/* ============================================================================
   theme.css — Rom Growth (romgrowth.co)

   No existing brand to extract: the domain served a Namecheap parking page, so
   there is no palette, wordmark or type on the live site. These tokens are a
   first definition, not an extraction. Recorded as such in SOURCES.md.

   Direction: an operator's page, not an agency's. Ink and paper, one warm
   action colour, an editorial serif against a plain system sans. The thing it
   has to avoid looking like is a template, because the whole reason the page
   exists is that a prospect is checking whether this is a real business.

   Contrast measured, not estimated (WCAG AA floor 4.5:1 for text):
     light  accent #B23A0A on white ................. 6.00:1
     dark   accent #FF8A5B against #14181d surface ... 7.67:1
            dark ink #1A1207 on that accent .......... 7.97:1
     body   #55606e on white ........................ 6.39:1
            #b9c2cd on #14181d ....................... 9.90:1
   ========================================================================= */

:root,
.ctx-light,
.invert .hero-panel,
.invert .close-cta,
.invert .scheduler {
  color-scheme: light;

  --ink:        #14181d;
  --ink-muted:  #4c5663;
  --ink-faint:  #6d7784;
  --hairline:   #e1e5ea;
  --line:       var(--hairline);

  --surface:        #ffffff;
  --surface-alt:    #f6f5f2;   /* warm paper, not blue-grey — the blue-grey is the SaaS tell */
  --surface-sunken: #ecebe6;
  --card:           #ffffff;
  --panel:          #ffffff;
  --panel-ink:      #14181d;
  --input-bg:       #ffffff;

  /* Brand is ink; action is the warm orange. Keeping them separate is what
     makes a button read as the next step rather than as more branding. */
  --brand:        #14181d;
  --accent:       #B23A0A;
  --accent-ink:   #ffffff;
  --accent-hover: #8F2E07;
  --focus:        #B23A0A;
  --danger:       #b3261e;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fw-display:   400;          /* Instrument Serif ships one weight; size carries the emphasis */
  --fw-body:      400;
  --tracking-display: -0.012em;
  --tracking-label:    0.1em;

  --fs-display: clamp(3.1rem, 2rem + 4.2vw, 5.4rem);
  --fs-h1:      clamp(2.6rem, 1.6rem + 3.2vw, 4.2rem);
  --fs-h2:      clamp(1.9rem, 1.35rem + 2vw, 2.9rem);
  --fs-h3:      1.2rem;
  --fs-lede:    clamp(1.08rem, 1rem + .45vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9rem;
  --fs-micro:   .76rem;
  --fs-stat:    clamp(2.6rem, 1.8rem + 2.8vw, 3.8rem);
  --fs-quote:   clamp(1.4rem, 1.1rem + 1.2vw, 2rem);

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;  --s5: 1.5rem;
  --s6: 2rem;   --s7: 3rem;   --s8: 4rem;   --s9: 6rem;  --s10: 8rem;
  --gap: var(--s6);

  --radius-sm: 4px;
  --radius-lg: 10px;
  --shadow:      0 1px 2px rgba(20,24,29,.05), 0 14px 38px rgba(20,24,29,.08);
  --shadow-lift: 0 2px 4px rgba(20,24,29,.06), 0 22px 48px rgba(20,24,29,.12);

  --logo-filter: none;
}

.invert {
  color-scheme: dark;
  --ink:        #ffffff;
  --ink-muted:  #b9c2cd;
  --ink-faint:  #8d97a4;
  --hairline:   #2b323b;
  --line:       var(--hairline);

  --surface:        #14181d;
  --surface-alt:    #1b2027;
  --surface-sunken: #0f1216;
  --card:           #1b2027;
  --input-bg:       #ffffff;

  --accent:       #FF8A5B;
  --accent-ink:   #1A1207;
  --accent-hover: #FFA075;
  --focus:        #FF8A5B;
  --danger:       #ff8b82;

  color: var(--ink);
  background: var(--surface);
}

/* Display face carries the page. Loaded with swap and a real fallback so the
   first paint is never blank — a paid-for or hard-won visit should not wait
   on a font. */
h1, h2, .stat-n, .signature-wordmark, .fs-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}

/* Numbers are the argument on this page, so they get the display face and are
   set left, against a source line. Centring a stat row is the generic move. */
.stat-n { font-variant-numeric: tabular-nums lining-nums; }

/* One editorial gesture: the format-finding figure. Required, and exactly one.
   Deliberately NOT .signature-band — that variant styles its .wrap as a flex row,
   which silently cancelled .signature-figure's 7fr/5fr grid and stacked the number
   and its explanation in one narrow column. Background only, no layout. */
.sig-surface { background: var(--surface-sunken); }
.sig-surface .overline { margin-bottom: var(--s5); }

/* ---------------------------------------------------------------------------
   Scheduler panel. The scaffold ships it as a 26rem dashed placeholder meant to
   hold a Calendly/Chili Piper iframe. This page deliberately links out instead:
   an embedded scheduler is a render-blocking third party on a page whose whole
   job is to load fast and look legitimate, and the email CTA already points at
   the same Calendly URL — one destination, not two.
   So: no dashed border, no reserved iframe height, and left-aligned to match
   the rest of the page. A centred island inside a left-aligned layout was the
   one thing that read as assembled in the first screenshot.
   ------------------------------------------------------------------------ */
.scheduler {
  min-height: 0;
  place-items: start;
  text-align: left;
  border: 0;
  padding: var(--s5) var(--s5) var(--s4);
}
.scheduler .form-title { margin-top: 0; }
.scheduler .capture-note { margin-bottom: var(--s5); }
.scheduler .btn { margin-bottom: var(--s3); }
.hero-panel { align-self: start; }

/* ---------------------------------------------------------------------------
   Logo lockup. Mark + wordmark, inline so the wordmark uses the page's display
   face and the mark inherits currentColor for the dark header and footer.
   ------------------------------------------------------------------------ */
/* min-height, not just padding: the lockup is 24px of artwork and a real-browser check
   flagged it at 24x127 against the 44px tap floor. The header logo is a link, so it is a
   tap target like any other. */
.logo-lockup {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.logo-mark { display: block; flex: none; }
.logo-word {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 1.35rem; letter-spacing: -.012em; line-height: 1; white-space: nowrap;
}
.site-footer .logo-word { font-size: 1.2rem; }
a.logo-lockup:hover .logo-word { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   The loop diagram. Carries the structure so the copy does not have to; the
   return arrow is the argument, which is why it is the longest stroke on it.
   ------------------------------------------------------------------------ */
.loop-fig { margin: var(--s7) 0 var(--s7); }
.loop-fig svg { width: 100%; max-width: 760px; height: auto; color: var(--ink); display: block; }
.loop-node circle { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.loop-verb {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 21px; fill: var(--ink); letter-spacing: -.01em;
}
.loop-detail { font-family: var(--font-body); font-size: 13px; fill: var(--ink-faint); }
.loop-caption {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; fill: var(--ink-faint);
}

/* The loop replaced three paragraphs, so the pillars under it are now captions.
   Tighten them or they read as a second, competing explanation. */
.section-alt .pillar { padding-bottom: var(--s5); }
.section-alt .pillar p { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: 0; }

/* The loop's supporting detail. Deliberately not cards: the diagram already carries the
   three-step structure, so repeating it in three bordered boxes headed with the same verbs
   was the same idea told twice. Plain columns, no chrome, detail the diagram cannot hold. */
.loop-detail-row { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .loop-detail-row { grid-template-columns: repeat(3, 1fr); } }
.loop-detail-row p { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }
.loop-detail-row strong { color: var(--ink); font-weight: 600; }

/* Centred, to break the page's otherwise uniform left alignment once. */
.loop-fig svg { margin-inline: auto; }

/* The close panel holds one button and one line now, so the scaffold's panel padding
   leaves it floating in its own box. Tighten, and let the button be the whole object. */
.close-cta { padding: var(--s5); }
.close-cta .fineprint { margin: var(--s3) 0 0; text-align: center; }

/* The diagram is one SVG scaled to the column, so at 390px its 21px label renders at
   about 12px. Type inside an SVG does not get the page's responsive scale for free -
   it shrinks with the artwork. Enlarged in viewBox units below the breakpoint so the
   rendered size lands back near 15px. */
@media (max-width: 700px) {
  .loop-verb   { font-size: 26px; }
  .loop-detail { font-size: 17px; }
  .loop-caption { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   Signature moment, centred. The one block on the page that breaks the left
   alignment - per the design system, a page where every section shares an
   alignment and a density reads as assembled rather than designed.
   ------------------------------------------------------------------------ */
.sig-centred { text-align: center; max-width: 70ch; margin-inline: auto; }
.sig-figure {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: clamp(5rem, 3rem + 11vw, 12rem);
  line-height: .9; letter-spacing: -.045em; margin: 0 0 var(--s4);
  font-variant-numeric: tabular-nums lining-nums;
}
.sig-times { font-size: .52em; letter-spacing: 0; }
.sig-claim {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: var(--fs-h2); line-height: 1.14; letter-spacing: var(--tracking-display);
  margin: 0 auto var(--s5); max-width: 30ch; text-wrap: balance;
}
.sig-body {
  font-size: var(--fs-lede); color: var(--ink-muted); line-height: 1.55;
  margin: 0 auto var(--s4); max-width: 54ch;
}
.sig-body:last-child { margin-bottom: 0; }