/* ONOTO design tokens — single source of truth.
   Loaded after each static page's inlined <style>, so these values win and the
   pages can no longer drift apart. Do not redeclare these anywhere else. */
:root {
  /* Brand */
  --onoto-ink: #070c0b;
  --onoto-ink-soft: #111817;
  --onoto-paper: #f1f0e9;
  --onoto-paper-2: #e9e8e0;
  --onoto-white: #fafaf4;
  --onoto-mint: #69dfcf;
  --onoto-mint-deep: #16a795;
  --onoto-orange: #ff7047;
  --onoto-muted: #68706d;
  --onoto-line: rgba(7, 12, 11, 0.16);
  --onoto-line-light: rgba(255, 255, 255, 0.14);
  --onoto-sans: 'Manrope', Inter, ui-sans-serif, system-ui, sans-serif;
  --onoto-radius: 2px;
  --onoto-shell: min(1440px, calc(100vw - 72px));
  --onoto-gutter: clamp(20px, 4.8vw, 76px);

  /* Local aliases used by the static solution pages — unified here */
  --ink: #070c0b;
  --ink-2: #111817;
  --ink-3: #16302a;
  --paper: #f1f0e9;
  --paper-2: #e9e8e0;
  --white: #fafaf4;
  --accent: #69dfcf;
  --accent-2: #70d6ef;
  --muted: #68706d;
  --line: rgba(7, 12, 11, 0.16);
  --line-dark: rgba(255, 255, 255, 0.14);
  --orange: #ff7047;
  --radius: 2px;
}

/* One container across every page — identical to the main site's column, so the
   header pill and the page content share an edge on every template. */
.shell,
.onoto-header-shell {
  width: var(--onoto-shell);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 1320px) { :root { --onoto-shell: min(1440px, calc(100vw - 52px)); } }
@media (max-width: 1120px) { :root { --onoto-shell: calc(100vw - 40px); } }
@media (max-width: 900px)  { :root { --onoto-shell: calc(100vw - 32px); } }
@media (max-width: 680px)  { :root { --onoto-shell: calc(100vw - 24px); } }
.section { padding: clamp(96px, 9vw, 140px) 0; }

/* One display scale */
.hero h1 { font-size: clamp(45px, 5vw, 86px); line-height: .9; letter-spacing: -.045em; font-weight: 700; }
.section-head h2 { font-size: clamp(38px, 4.4vw, 66px); line-height: .96; letter-spacing: -.04em; font-weight: 700; }

/* One body scale — readable, and matched to the main site */
.lead { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; }
.section-head p { font-size: 16px; line-height: 1.65; }
.stage-card p, .stack-card p, .info-card p, .pilot p { font-size: 14.5px; line-height: 1.6; }

/* No tracked caps, no mono — anywhere */
.eyebrow, .num, small, .metric small, .scene-label small {
  text-transform: none;
  letter-spacing: .01em;
  font-family: var(--onoto-sans);
}

/* ---------------------------------------------------------------------------
   One micro-type scale. The vertical pages were authored with 7–11px labels
   that read as unfinished next to the main site; these are the shared floor.

   WHY THESE ARE STILL PLAIN CLASS SELECTORS, NOT :where().
   The review asked for the whole block to be re-expressed as :where(...) so it
   carries zero specificity and a page can beat it. That is the right end state
   and it is one edit away — but it cannot ship yet, and the reason is
   measurable. Every selector below except `.num` and bare `small` is currently
   undercut by a page's own inlined <style>: nine of the ten static pages
   declare these same classes at 7–11px. Dropping to zero specificity hands the
   cascade straight back to those declarations. Measured on /plant at 390px,
   43 elements fall to 7–11px the moment the floor stops winning, on desktop as
   well as on phones — which breaks both the 12px minimum and "desktop must
   render identically".

   So this pass does the half that is provably free: every `!important` is gone.
   That was verified to change nothing — all ten pages, at 390px and at 1440px,
   computed font-size / letter-spacing / text-transform identical before and
   after — because this file loads after each page's <style>, so an equal
   specificity rule here already wins on source order alone. What the pages gain
   is the ability to win again: a page-level `!important`, or one extra level of
   specificity, now beats this block, where previously nothing could.

   TO FINISH THE JOB: raise the sub-12px font-size declarations in the ten
   pages' inlined <style> to >= 12px, then wrap the four rules below in
   :where(...) and delete this comment. The blocking declarations are listed in
   the handover notes for this pass.
   --------------------------------------------------------------------------- */
.eyebrow,
.mode-switch button,
.footer-inner,
.route-crumb,
.mini-stat,
.feature strong { font-size: 13px; }

.num,
.stage-card .num,
.product-card .num,
.offering-card .num,
.mini-chip,
.scene-hint,
.loading,
.loading-pill,
.fit-card span,
.stack-card span,
.proof span,
.hero-proof span,
.cine-tagline span { font-size: 12.5px; }

small,
.brand-copy small,
.metric small,
.scene-label small,
.outcome small,
.stage-card .outcome small,
.compare-row small,
.pilot-metric small,
.cine-caption small,
.cine-chip small,
.cine-reticle em { font-size: 12.5px; }

.metric b,
.scene-label b,
.cine-chip b,
.xuan-subnav-brand em,
.vert-subnav-brand em { font-size: 13px; }

/* ---------------------------------------------------------------------------
   Shared mobile ladder.
   This file loads after every page's inlined <style>, so the shared rhythm and
   the display scale can only be corrected here — a page-level rule of equal
   specificity would lose to the rules above. One ladder, ten pages.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .section { padding: 72px 0; }

  /* The two-column head has a 300px minimum per column, so it stops fitting
     around 700px and pushes the page wider than the viewport. Stack it. */
  .section-head {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
  }
}

@media (max-width: 680px) {
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }

  /* Display scale for a phone. These are the shared numbers for every family on
     the site, and this is the one place they are declared for the ten static
     pages — a page that restates them is drifting, not overriding.
     At 390px they resolve to 43.7px over 32.8px, so the hero headline is
     comfortably the largest thing on its page. The previous pair (8.8vw/6.6vw)
     gave 34.3px over 26px, close enough that a section head one screen down
     read as the same rank as the hero. */
  .hero h1 {
    font-size: clamp(38px, 11.2vw, 52px);
    line-height: .98;
    letter-spacing: -.03em;
  }
  .section-head h2 {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1.04;
    letter-spacing: -.03em;
  }

  /* Body copy on a phone. 14.5px is a desktop caption size; at arm's length on
     glass it is the smallest thing on the page that anyone is asked to read a
     paragraph of. The shared ladder is 15–16px / 1.6. */
  .stage-card p,
  .stack-card p,
  .info-card p,
  .pilot p {
    font-size: 15px;
    line-height: 1.6;
  }
}

@media (max-width: 430px) {
  .section { padding: 48px 0; }
  .section-head { margin-bottom: 28px; }
}