/* TMN Creative case studies (Hilpan Moxie, East West Diversified Ventures and the rest of the growth-guides case
   family) in the TMN Flow world. Loads after tmn-home.css, which carries the tokens, type, buttons, header, menu,
   device frames and footer. scripts/convert-case-v2.mjs keeps each page's case-study markup as written, so every
   heading, quote, disclosure and fact is the page's own (docs/case-v2/COPY-CHANGES.md). */

/* ===== Header: case pages carry up to 7 links and a long action, so the menu takes over below 1280px and
   the secondary action (it repeats Work) shows from 1440px ===== */
.case-page .nav-links { gap: clamp(0.9rem, 1.25vw, 1.35rem); }
.case-page .nav-link,
.case-page .nav-ghost { font-size: 0.9375rem; }
@media (max-width: 1439px) {
  .case-page .nav-ghost { display: none; }
}
@media (max-width: 1279px) {
  .case-page .nav-links,
  .case-page .nav-cta { display: none; }
  .case-page .menu-btn { display: block; }
  .case-page .mob-menu { display: block; }
}

/* ===== Hero: the promise beside the client's own capture in a CSS MacBook ===== */
.case-hero-grid { align-items: center; }
@media (min-width: 1100px) {
  .case-hero-grid { grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr); gap: clamp(3rem, 5vw, 4.75rem); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .case-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
}
.case-hero .display {
  max-width: 15em;
  font-size: clamp(2.3rem, 3.7vw, 3.3rem);
  line-height: 1.03;
}
/* The H1's second clause reads as its subtitle, as on the page before */
.case-hero .display em {
  display: block;
  margin-top: 0.85rem;
  font-size: max(1.0625rem, 0.4em);
  font-weight: 460;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink-2);
}
/* A slogan H1 ("Proof before the pitch.") keeps its emphasis at full size on its own line, as on the home page.
   Only a "Name: what it is" H1 reads its second clause as a subtitle. */
.case-hero .display.case-slogan em {
  margin-top: 0;
  font-size: inherit;
  font-weight: 500;
  font-stretch: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--ink);
}
.case-hero .hero-deck { margin-top: 1.2rem; max-width: 36em; font-size: clamp(1.0625rem, 1.1vw, 1.1875rem); line-height: 1.55; }
.case-hero .hero-ctas { margin-top: 1.75rem; }
.case-jump { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin-top: 1rem; }
.case-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgb(15 27 47 / 0.3);
}
.case-jump a:hover { color: var(--ink); text-decoration-color: var(--ink); }

.case-proof { margin: 0; min-width: 0; }
.case-mac { position: relative; width: 100%; }
.case-mac .mac-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.case-proof-cap { margin-top: 1.1rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference) {
  .case-proof { animation: stage-in 1.2s var(--ease-out) 0.12s both; }
}

/* ===== Sections: Flow's rhythm, and 2 neighbours on the same ground share 1 gap ===== */
.case-sec,
.case-close { padding-block: clamp(3.25rem, 6.2vw, 5.75rem); }
.case-sec.ground-paper + .case-sec.ground-paper,
.case-sec.ground-paper-2 + .case-sec.ground-paper-2 { padding-top: 0; }
.case-sec h2,
.case-close h2 { max-width: 20ch; font-size: clamp(2rem, 3.4vw, 3.1rem); }
.case-sec h3 { font-size: 1.125rem; font-weight: 580; letter-spacing: -0.012em; line-height: 1.35; color: var(--ink); }
.case-sec p { color: var(--ink-2); }
.case-sec a:not(.button) { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
.case-sec a:not(.button):hover { text-decoration-color: var(--ink); }

/* Project facts: 1 hairline ledger of label and value under the hero */
.case-facts-section { padding-block: 0 clamp(2.5rem, 4.5vw, 3.75rem); }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.case-fact { padding: 1.1rem 1.25rem 0 0; }
.case-fact span { display: block; font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.case-fact strong { display: block; margin-top: 0.3rem; font-size: 1rem; font-weight: 580; line-height: 1.4; color: var(--ink); }
@media (min-width: 900px) {
  .case-facts { grid-template-columns: 1.05fr 1fr 0.95fr 0.8fr; }
}

/* Problem, timeline and words layouts: the heading column stays in view beside its ledger */
.problem-layout,
.words-layout,
.verify-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .problem-layout,
  .words-layout,
  .verify-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); }
  .problem-copy,
  .words-copy,
  .verify-copy { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.problem-copy p,
.words-copy p,
.verify-copy > p,
.build-copy > p { margin-top: 1rem; max-width: 40em; font-size: 1.0625rem; line-height: 1.6; }
.problem-list,
.words-list,
.verify-list { border-top: 1px solid var(--line); }
.problem-row { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.problem-row p { margin-top: 0.45rem; max-width: 46em; font-size: 1rem; line-height: 1.6; }
.timeline-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 1rem 0; }
.timeline-row h3 { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline-row p { margin-top: 0; }
@media (min-width: 640px) {
  .timeline-row { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}

/* Build: the second capture in a framed surface beside the decisions */
.build-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .build-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .build-visual { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.build-visual { margin: 0; min-width: 0; }
.build-visual__frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.build-visual img { display: block; width: 100%; height: auto; }
.build-visual figcaption { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); }
.decision-list { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.decision-list li { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.decision-list strong { display: block; margin-bottom: 0.25rem; font-size: 1.0625rem; font-weight: 580; color: var(--ink); }

/* Client words: unboxed quotes with hanging marks, as on the home page */
.words-list { margin: 0; padding: 0; list-style: none; }
.words-list li { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.words-list blockquote { margin: 0; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); text-indent: -0.42em; }
.words-list cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.9375rem; color: var(--ink-3); }

/* The ChatGPT inquiry account */
.inquiry-header { max-width: 52rem; }
.inquiry-header > p { margin-top: 1rem; max-width: 42em; font-size: 1.0625rem; line-height: 1.6; }
.inquiry-header .experience-note { font-size: 1rem; color: var(--ink-3); }
.inquiry-quote {
  margin: 2rem 0 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.inquiry-quote blockquote { margin: 0; max-width: 40em; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.45; letter-spacing: -0.012em; color: var(--ink); text-indent: -0.42em; }
.inquiry-quote figcaption { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-3); }
.inquiry-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
@media (min-width: 900px) {
  .inquiry-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
}
.inquiry-detail p,
.inquiry-limit p { margin-top: 0.6rem; font-size: 1rem; line-height: 1.65; }
.inquiry-test blockquote { margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink); text-indent: -0.42em; }
.inquiry-test cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.9375rem; color: var(--ink-3); }
.inquiry-limit { margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.inquiry-limit p { max-width: 64em; }

/* What is public and verifiable */
.verify-item { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.verify-item p { margin-top: 0.45rem; font-size: 0.9375rem; line-height: 1.6; }
.verify-item a,
.verify-copy .v-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; font-weight: 560; }

/* ===== Close: the ask beside its action, on paper with Flow's gold radial ===== */
.case-close { background: radial-gradient(50% 70% at 85% 30%, rgb(201 164 76 / 0.09), transparent 70%), var(--paper); }
.closing-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.closing-inner > p,
.closing-aside p { max-width: 34em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.closing-aside p { margin-bottom: 1.5rem; }
.closing-aside a:not(.button),
.closing-inner > p a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(15 27 47 / 0.35); }
@media (min-width: 900px) {
  .closing-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
}
@media (max-width: 430px) {
  .case-close .button,
  .case-hero .hero-ctas .button { width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
}

/* ===== Footer: brand, then this page's own groups ===== */
.case-foot-logo { width: 74px; height: auto; }
.case-foot .foot-brand p { margin-top: 1rem; }
@media (min-width: 1180px) {
  .case-foot-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .case-foot .foot-links a { min-height: 36px; padding-block: 4px; }
}
@media (max-width: 1179px) {
  .case-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .case-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-foot .foot-links { grid-template-columns: minmax(0, 1fr); }
  /* The brand line and the contact row take the full width, so the email address never squeezes into a half column */
  .case-foot .foot-brand,
  .case-foot .case-foot-contact { grid-column: 1 / -1; }
  .case-foot .case-foot-contact .foot-links { display: flex; flex-wrap: wrap; column-gap: 1.75rem; }
}

/* ===== Case hero, client MacBook plus iPhone: the same pair and geometry as the home hero scene (Hilpan and Training
   Wheels first). The phone is the client's real mobile capture, decorative beside the Mac's described screenshot. ===== */
.case-proof--pair .case-stage { container-type: inline-size; }
.case-scene { position: relative; width: 70em; height: 46.5em; font-size: calc(100cqi / 70); }
.case-scene .case-mac { position: absolute; left: 0; top: 0; width: 58em; }
.case-scene .case-phone { left: 52.5em; top: 13.5em; width: 15em; z-index: 2; }
.case-phone .phone-capture picture { display: contents; }
/* Phones: recompose rather than scale, as on the home hero. The iPhone comes forward at about 46% of the width,
   the MacBook sits behind it, higher and cropped at the screen edge. Only in the single-column layout (below 900px),
   as on home, so the 2-column hero between 900 and about 1180px keeps the desktop pair. */
@media (max-width: 899px) {
@container (max-width: 560px) {
  .case-scene { width: 40em; height: 50em; font-size: calc(100cqi / 40); }
  .case-scene .case-mac { left: 11.5em; top: 0; width: 31em; }
  .case-scene .case-phone { left: 0.5em; top: 9.5em; width: 18.4em; }
  .case-scene .mac-lid { box-shadow: 0 2px 4px rgb(15 27 47 / 0.08), 0 18px 36px -16px rgb(15 27 47 / 0.3); }
}
}
/* Below 900px the work comes before the in-page jump links, so it appears sooner after the title and actions */
@media (max-width: 899px) {
  .case-hero-grid:has(.case-proof--pair) { row-gap: 0; }
  .case-hero-grid:has(.case-proof--pair) > .hero-copy { display: contents; }
  .case-hero-grid:has(.case-proof--pair) > .case-proof { order: 1; margin-top: 2.25rem; }
  .case-hero-grid:has(.case-proof--pair) .case-jump { order: 2; margin-top: 1.25rem; }
}