/* Annie homepage mock. One stylesheet, built from four sources.
   Order matters: fonts, then tokens and components, then the product
   screens, then motion. No CDN, no Google Fonts: this must open offline. */


/* ====================================================================
   1. Self-hosted fonts
   ==================================================================== */

/* Self-hosted for offline use. Latin + Latin Extended subsets only.
   Instrument Serif 400 regular + italic (headlines).
   Plus Jakarta Sans variable 400-800 (everything else). */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-400-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-400-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-var-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/plus-jakarta-sans-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}


/* ====================================================================
   2. Design tokens, base and components
   ==================================================================== */

/* ============================================================
   ANNIE HOMEPAGE — design tokens
   Brief Part 1. Every colour, size, step, radius and shadow used
   anywhere in this file is declared here and nowhere else.
   Contrast ratios in comments are measured WCAG 2.1 values; see
   reports/design-system.md for the full table.
   ============================================================ */
:root{
  /* ---- Brand: navy ---- */
  --navy:#0a1129;            /* body text, dark buttons, dark sections */
  --navy-2:#0e1836;          /* darker navy panel */
  --navy-3:#131f45;          /* darker navy panel / primary button hover */
  --navy-press:#0e1836;      /* primary button :active */

  /* ---- Brand: gold ---- */
  --gold:#c9a84c;            /* LARGE headline text + fills only. 2.29:1 on white */
  --gold-light:#e2c169;      /* gold on dark. 10.72:1 on navy */
  --gold-tint:#faf4e2;       /* tint panel behind screenshots, highlight fill */
  --gold-ink:#8a6212;        /* small gold TEXT on light backgrounds. 5.47:1 on white */
  --gold-press:#b8963f;      /* gold button :active */

  /* Tick / check-mark stroke on light backgrounds.
     Set to --gold-ink so the 16x9px glyph meets WCAG 1.4.11 non-text
     contrast (5.47:1). Change this one line back to var(--gold) to
     restore the lighter brief colour (2.29:1, fails 1.4.11). */
  --tick-on-light:var(--gold-ink);

  /* ---- Surfaces ---- */
  --bg:#f5f7fc;              /* page background */
  --white:#ffffff;

  /* ---- Text ---- */
  --ink:#0a1129;             /* 18.66:1 on white */
  --ink-2:#55617d;           /* secondary. 6.19:1 on white, 5.78:1 on --bg */
  --ink-3:#64708a;           /* faint TEXT. 4.97:1 on white, 4.64:1 on --bg */
  --ink-faint:#6b7385;       /* brand faint. NON-TEXT ONLY: 3.01:1 on white */
  --ink-onDark:#f4f6fb;      /* 17.26:1 on navy */
  --ink-onDark-2:#a3adc4;    /* 8.29:1 on navy */

  /* ---- Lines ---- */
  --line:#e2e7f1;
  --line-onDark:rgba(255,255,255,.14);

  /* ---- Status (pills only) ---- */
  --green:#117f4b;           /* 4.52:1 on --green-bg */
  --green-brand:#117f4b;     /* brief value. 4.14:1 on --green-bg, fails AA */
  --green-bg:#e7f6ee;

  /* ---- Type ---- */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --h1:64px; --h1-lh:1.05;   /* 40px on mobile */
  --h2:44px; --h2-lh:1.1;    /* 32px on mobile */
  --h3:22px; --h3-lh:1.3;    /* 20px on mobile, Plus Jakarta Sans 600 */
  --lede:19px; --lede-lh:1.55;
  --body:17px; --body-lh:1.6;
  --ui:15px;                 /* buttons, nav links, tabs */
  --small:14px;
  --tiny:13px;
  --micro:12px;
  --track:-0.01em;           /* headline letter-spacing */
  --track-caps:.12em;        /* eyebrow small caps */

  /* ---- Spacing steps ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:120px;

  /* ---- Radius ---- */
  --r-btn:10px;              /* buttons */
  --r-sm:12px;               /* small cards */
  --r-lg:16px;               /* large cards, screenshots, browser frame */
  --r-pill:999px;
  --r-round:50%;

  /* ---- Shadow ---- */
  --shadow:0 20px 40px rgba(10,17,41,.08);          /* the one soft shadow */
  --shadow-lift:0 24px 48px rgba(10,17,41,.12);     /* hover lift */
  --shadow-float:0 10px 26px rgba(10,17,41,.28);    /* floating help button */
  --shadow-row:0 6px 16px rgba(10,17,41,.10);       /* call-list row hover */

  /* ---- Focus ---- */
  --focus:#0a1129;           /* 2px navy outline, 2px offset */
  --focus-onDark:#e2c169;    /* navy is invisible on navy; gold on dark */
  --focus-w:2px;
  --focus-off:2px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.3s;

  /* ---- Layout ---- */
  --nav-h:72px;
  --maxw:1200px;
  --gutter:24px;
}

@media (max-width:900px){
  :root{ --h1:40px; --h2:32px; --h3:20px; }
}
@media (max-width:600px){
  :root{ --gutter:20px; }
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--body);
  line-height:var(--body-lh);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}

h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:var(--track)}
h1{font-size:var(--h1);line-height:var(--h1-lh)}
h2{font-size:var(--h2);line-height:var(--h2-lh)}
h3{font-family:var(--sans);font-size:var(--h3);font-weight:600;line-height:var(--h3-lh);letter-spacing:-.005em}

/* ---------- Focus: 2px outline, 2px offset, everywhere ----------
   Never removed, never set to none.

   The colour comes from --focus-c, which INHERITS. On light ground it is
   navy; any element that paints a navy background redeclares it as gold,
   because navy on navy is invisible. That means a new dark block only has
   to set --focus-c once and every control inside it is correct, rather
   than each control needing its own selector.                          */
:root{ --focus-c:var(--focus); }
.on-dark,.sec--dark,.founder,.final,
[data-theme="dark"]{ --focus-c:var(--focus-onDark); }

a:focus-visible,button:focus-visible,summary:focus-visible,
details:focus-visible,[tabindex]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.is-focus{
  outline:var(--focus-w) solid var(--focus-c);
  outline-offset:var(--focus-off);
  border-radius:4px;
}
/* Elements that already carry a radius keep it under the outline. */
.btn:focus-visible,.btn.is-focus{border-radius:var(--r-btn)}
.tab:focus-visible,.tab.is-focus{border-radius:var(--r-pill)}
.help__btn:focus-visible,.help__btn.is-focus{border-radius:var(--r-pill)}
.ini:focus-visible,.ini.is-focus{border-radius:var(--r-round)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

.sec{padding:var(--s9) 0}
@media (max-width:900px){ .sec{padding:var(--s8) 0} }
.sec--bg{background:var(--bg)}
.sec--white{background:var(--white)}
.sec--dark{background:var(--navy);color:var(--ink-onDark)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--white);padding:var(--s3) var(--s5);border-radius:0 0 var(--r-btn) 0;
  font-size:var(--small);font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ============================================================
   Typography helpers
   ============================================================ */
.eyebrow{
  font-size:var(--tiny);font-weight:700;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--gold-ink);margin:0 0 var(--s4);
}
.on-dark .eyebrow,.sec--dark .eyebrow,.founder .eyebrow,.final .eyebrow{color:var(--gold-light)}
.lede{font-size:var(--lede);line-height:var(--lede-lh);color:var(--ink-2)}
.sub{font-size:var(--body);color:var(--ink-2)}
.tiny{font-size:var(--tiny);color:var(--ink-3)}
.micro{font-size:var(--micro);color:var(--ink-3)}
.center{text-align:center}
.measure{max-width:640px;margin-left:auto;margin-right:auto}
/* T1. Section heads and intros are left-aligned in How it works, Product,
   Comparison, Pricing and FAQ. `.measure` keeps its 640px reading width but
   hugs the wrap's left edge unless it is also centred (video, final CTA). */
.measure:not(.center){margin-left:0;margin-right:0}
/* The hero's signature gold italic line. It now sits on the navy field
   (brief 04, star 1), where #c9a84c measures 8.17:1. The 2.13:1 exception
   that stood on #f5f7fc is cleared. */
.gold-italic{color:var(--gold);font-style:italic}
.on-dark .gold-italic,.sec--dark .gold-italic,
.founder .gold-italic,.final .gold-italic{color:var(--gold)} /* 8.17:1 on navy */

/* An inline text link inside body copy */
.tlink{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;font-weight:600;transition:color .2s var(--ease)}
.tlink:hover,.tlink.is-hover{text-decoration-thickness:2px}
.tlink:active,.tlink.is-active{color:var(--navy)}
.on-dark .tlink,.sec--dark .tlink,.founder .tlink,.final .tlink{color:var(--gold-light)}

/* ============================================================
   Buttons
   ============================================================ */
/* Brief Part 1: 14px 28px padding, 10px radius. Two buttons everywhere
   (primary navy, secondary white/navy-outline) plus the gold variant the
   nav, founder section and final band ask for. Five states each.        */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--sans);font-size:var(--ui);font-weight:700;line-height:1.2;
  padding:14px 28px;border-radius:var(--r-btn);
  border:1.5px solid transparent;text-decoration:none;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),
             color .2s var(--ease),transform .12s var(--ease);
  white-space:nowrap;
}
.btn:active,.btn.is-active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"],.btn.is-disabled{
  opacity:.4;pointer-events:none;cursor:not-allowed;transform:none;
}

/* Primary — solid navy, white text */
.btn--primary{background:var(--navy);color:var(--white);border-color:var(--navy)}
.btn--primary:hover,.btn--primary.is-hover{background:var(--navy-3);border-color:var(--navy-3)}
.btn--primary:active,.btn--primary.is-active{background:var(--navy-press);border-color:var(--navy-press)}

/* Secondary — white, 1.5px navy border, navy text */
.btn--secondary{background:var(--white);color:var(--navy);border-color:var(--navy)}
.btn--secondary:hover,.btn--secondary.is-hover{background:var(--bg)}
.btn--secondary:active,.btn--secondary.is-active{background:var(--line)}

/* Gold — nav trial button, founder button, final band primary */
.btn--gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn--gold:hover,.btn--gold.is-hover{background:var(--gold-light);border-color:var(--gold-light)}
.btn--gold:active,.btn--gold.is-active{background:var(--gold-press);border-color:var(--gold-press)}

/* Outline on dark — final band secondary */
.btn--ghostLight{background:transparent;color:var(--white);border-color:rgba(255,255,255,.65)}
.btn--ghostLight:hover,.btn--ghostLight.is-hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn--ghostLight:active,.btn--ghostLight.is-active{background:rgba(255,255,255,.18)}

.btn--sm{padding:9px 18px;font-size:var(--small)}
.btn--block{display:flex;width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.btn-row--center{justify-content:center}

.microcopy{font-size:var(--tiny);color:var(--ink-2);margin-top:var(--s3)}
.on-dark .microcopy,.sec--dark .microcopy,
.founder .microcopy,.final .microcopy{color:var(--ink-onDark-2)}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:var(--white);border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:100%;
  display:flex;align-items:center;gap:var(--s6);
}
.nav__logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav__link{
  font-size:var(--ui);font-weight:600;color:var(--ink);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.nav__link:hover,.nav__link.is-hover{border-bottom-color:var(--gold)}
.nav__link:active,.nav__link.is-active{color:var(--gold-ink);border-bottom-color:var(--gold-ink)}
.nav__link[aria-current="page"],.nav__link.is-current{border-bottom-color:var(--navy)}
.nav__right{display:flex;align-items:center;gap:var(--s4);margin-left:var(--s5)}
.nav__login{font-size:var(--ui);font-weight:600;text-decoration:none;color:var(--ink)}
.nav__login:hover,.nav__login.is-hover{text-decoration:underline;text-underline-offset:3px}
.nav__login:active,.nav__login.is-active{color:var(--ink-2)}
.nav__burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-btn);cursor:pointer;
}
.nav__burger svg{width:22px;height:22px}

.navpanel{
  position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--white);
  border-bottom:1px solid var(--line);padding:var(--s5) var(--gutter) var(--s7);
  z-index:59;display:none;box-shadow:var(--shadow);
}
.navpanel[data-open="true"]{display:block}
.navpanel a{
  display:block;padding:var(--s4) 0;font-size:18px;font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--line);
}
.navpanel .btn{margin-top:var(--s5)}

@media (max-width:980px){
  .nav__links{display:none}
  .nav__right{margin-left:auto}
  .nav__burger{display:flex}
  .nav__login{display:none}
}
@media (max-width:420px){
  .nav__in{gap:var(--s3)}
  .nav__logo img{height:32px}
}

/* ============================================================
   1. Hero
   ============================================================ */
.hero{background:var(--bg);padding:var(--s8) 0 var(--s9)}
.hero__grid{
  display:grid;grid-template-columns:58fr 42fr;gap:var(--s7);align-items:center;
}
/* The H1 has to hold two lines: the gold italic second line is the signature look and a
   three-line break kills it. Instrument Serif needs about 10.73px of width per 1px of
   font-size for the longer of the two lines, so the type is sized from the column it sits
   in and capped at the brief's 64px. On a 1200px page that lands at 58px. */
.hero__text{container-type:inline-size}
.hero h1{margin:0 0 var(--s5);font-size:min(var(--h1),9.04cqw)}
@supports not (width:1cqw){ .hero h1{font-size:58px} }
@media (max-width:980px){ .hero h1{font-size:var(--h1)} }
.hero h1 .l1{display:block;color:var(--navy)}
.hero h1 .l2{display:block;color:var(--gold);font-style:italic}
.hero__lede{max-width:520px;margin-bottom:var(--s6)}
/* The founder photo and byline are gone (Michael, 30 Sep). This is now a
   short standing claim, so it is set as a small tracked label rather than
   a caption under a face. */
.hero__trust{
  margin-top:var(--s5);
  font-size:var(--tiny);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
}

@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero{padding:var(--s7) 0 var(--s8)}
}

/* ============================================================
   2. Proof strip
   ============================================================ */
.proof{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--white);padding:var(--s8) 0;
}
/* T4. The strip was three equal centred columns, which is the symmetrical
   stat row every software page has. Now it is left-aligned and weighted:
   629 is the real proof, so it gets a wider column and a larger numeral,
   and the note sits under the strip on the left rather than centred. */
.proof__row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:start}
.proof__item{padding:0 var(--s6) 0 0;text-align:left;border-left:1px solid var(--line);
  padding-left:var(--s6)}
.proof__item:first-child{border-left:0;padding-left:0}
.proof__num{font-family:var(--serif);font-size:44px;line-height:1.1;color:var(--navy);display:block}
.proof__item:first-child .proof__num{font-size:72px;line-height:1}
.proof__lab{font-size:var(--small);color:var(--ink-2);margin-top:var(--s2);display:block;
  max-width:300px}
.proof__note{font-size:12px;color:var(--ink-3);text-align:left;margin-top:var(--s6)}
@media (max-width:760px){
  .proof__row{grid-template-columns:1fr;gap:var(--s6)}
  .proof__item{border-left:0;padding:0}
  .proof__item:first-child .proof__num{font-size:56px}
}

/* ====================================================================
   PART 1 — star-1: the navy hero field and the full-width frame
   Paste after section "1. Hero" in styles.css (or link this file late).
   ==================================================================== */

.hero--field{position:relative;background:#0a1129;color:#fff;padding:112px 0 0;overflow:visible}
.hero__ledger{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero--field .wrap{position:relative;z-index:1}
/* CLASH (B): the brief writes `.hero--field .hero__grid{display:block}`.
   With a plain block box the frame's `margin-bottom:-140px` COLLAPSES up
   through .wrap and .hero__grid and out of .hero itself, so the navy
   field shrinks by the same 140px and ends flush with the frame: the
   overlap the brief asks for is never visible. `flow-root` is the same
   block box, but it establishes a block formatting context, so the
   negative margin stays inside and the frame really does hang 140px
   over the proof strip. Measured: navy ends 140px above the frame edge.
     brief: .hero--field .hero__grid{display:block}                    */
.hero--field .hero__grid{display:flow-root}
.hero--field .hero__text{max-width:720px}
.hero--field .eyebrow{color:#e2c169;padding-bottom:12px;border-bottom:1px solid rgba(201,168,76,.4)}
.hero--field h1 .l1{color:#fff}
.hero--field h1 .l2{color:#c9a84c}
.hero--field .hero__lede{color:#dfe4f0}
.hero--field .microcopy,.hero--field .hero__trust{color:#b9c2d6}
.hero--field .hero__media{margin:56px 0 -140px;position:relative;z-index:2}
.hero--field .hero__media .scr-frame{box-shadow:0 30px 60px rgba(0,0,0,.28)}
.hero--field .scr-today{display:grid;grid-template-columns:200px 1fr 300px}

/* ADDED, not in the brief. CLASH (A): styles.css switches the focus ring
   to gold only on .on-dark, .sec--dark, .founder and .final. The hero is
   now navy but carries none of those classes, so both hero CTAs would
   take the default NAVY 2px ring on a navy field: invisible. One line
   fixes every control in the hero, present and future. */
.hero--field{--focus-c:var(--focus-onDark)}

/* CLASH (C): the brief's rule is `.proof{padding-top:calc(140px + 48px)}`.
   styles.css sets `.proof{...padding:var(--s8) 0}` as a SHORTHAND, so an
   unscoped longhand here is safe ONLY while it is read later. It is also
   unscoped, which would pad the proof strip even if the hero ever loses
   .hero--field. Scoped to the adjacent sibling instead: same result,
   no side effect. The literal brief rule is kept in the comment.
     brief: .proof{padding-top:calc(140px + 48px)}          */
.hero--field + .proof{padding-top:calc(140px + 48px)}

/* CLASH (D): the brief's breakpoint is 979px. Every other breakpoint in
   this build is 980px (the nav, .hero__grid, .panel__grid, .lead__grid,
   .mo-tabline). At exactly 980px the brief's number leaves the frame in
   three columns inside a 932px frame, which squeezes the call list to
   430px while the nav has already gone to its mobile state. Changed to
   980 so the whole page turns over on one line.
     brief: @media (max-width:979px)                                   */
@media (max-width:980px){
  .hero--field{padding-top:80px}
  .hero--field .hero__media{margin:40px 0 -64px}
  .hero--field .scr-today{grid-template-columns:1fr}
  .hero--field .scr-today .scr-side,.hero--field .scr-today .scr-rail{display:none}
  /* brief: .proof{padding-top:calc(64px + 40px)} */
  .hero--field + .proof{padding-top:calc(64px + 40px)}
}


/* ============================================================
   3. Video
   ============================================================ */
.video-wrap{
  position:relative;max-width:960px;margin:var(--s7) auto 0;
  border-radius:var(--r-sm);overflow:hidden;
  background:var(--navy);aspect-ratio:16/9;
}
.video-wrap video,.video-wrap img.poster{width:100%;height:100%;object-fit:cover;display:block}
.video-wrap video{display:none}
.video-wrap[data-playing="true"] video{display:block}
/* Sub-agent 7, performance fix. The poster= attribute was removed from the <video>
   in index.html: Chrome fetches it on load even though the element is display:none,
   which cost 732ms of LCP on throttled mobile. Painting it here instead keeps the
   still frame behind the buffering film, and because the rule only matches after
   play the file is never fetched on the critical path. */
.video-wrap[data-playing="true"] video{background:var(--navy) url(img/video-poster.webp) center/cover no-repeat}
.video-wrap[data-playing="true"] .poster,
.video-wrap[data-playing="true"] .playbtn{display:none}
.playbtn{
  position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;
  background:var(--navy);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-float);
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.playbtn:hover{transform:scale(1.06);background:var(--navy-3)}
.playbtn svg{width:26px;height:26px;margin-left:4px;fill:var(--white)}

/* ============================================================
   4. How it works
   ============================================================ */
/* T3. An editorial numbered list, not three identical cards. Uneven columns,
   large Instrument Serif numerals, left-aligned, no circles and no card fill. */
.steps{
  display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:var(--s7);
  margin-top:var(--s8);list-style:none;padding:0;
}
.step{text-align:left}
.step__n{
  display:block;font-family:var(--serif);font-size:56px;line-height:1;
  color:var(--gold-ink);margin-bottom:var(--s2);font-weight:400;
}
.step h3{margin-bottom:var(--s3)}
.step p{color:var(--ink-2)}
/* One real UI chip per step, built from the product-screen component classes.
   Those classes size themselves in `em` and read the --s-* palette that is
   declared on `.scr-frame, .scr`, so outside a frame both have to be supplied
   here or the chips render borderless and at the wrong scale. */
.step__chip{
  --s-ink:#0a1129; --s-ink2:#55617d; --s-line:#e4e8f0; --s-navy:#0d1b40;
  --s-gold:#c9a84c; --s-gold-ink:#8a6212; --s-gold-tint:#faf4e2; --s-gold-line:#efe1bb;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:15px;margin-top:var(--s4);
}
@media (max-width:860px){ .steps{grid-template-columns:1fr;gap:var(--s6)} }

/* ============================================================
   5. Product tour (tabs)
   ============================================================ */
.tabs{display:flex;gap:var(--s2);justify-content:center;margin:var(--s7) 0 var(--s7);
  flex-wrap:wrap;position:relative}
.tab{
  position:relative;background:var(--white);border:1px solid var(--line);color:var(--navy);
  font-size:var(--ui);font-weight:600;padding:11px 22px;border-radius:var(--r-pill);cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  overflow:hidden;
}
.tab:hover,.tab.is-hover{border-color:var(--navy)}
.tab:active,.tab.is-active-press{background:var(--line);border-color:var(--navy)}
.tab[aria-selected="true"],.tab.is-selected{background:var(--navy);color:var(--white);border-color:var(--navy)}
.tab[aria-selected="true"]:hover,.tab.is-selected.is-hover{background:var(--navy-3);border-color:var(--navy-3)}
.tab[disabled],.tab.is-disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
/* T9. .tab__prog and its 7-second auto-advance are removed. Tabs change on
   click and by keyboard only. The sliding gold underline (.mo-tabline) stays. */

.panel{display:none}
.panel[data-active="true"]{display:block}
/* Top-aligned, not centred: centring leaves a well of white above the tab text when the
   screenshot beside it is tall. */
.panel__grid{display:grid;grid-template-columns:40fr 60fr;gap:var(--s8);align-items:start}
.panel h3{margin-bottom:var(--s4)}
.panel p{color:var(--ink-2);margin-bottom:var(--s5)}
.ticks li{
  position:relative;padding-left:30px;margin-bottom:var(--s3);
  font-size:16px;color:var(--ink);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:9px;
  border-left:2px solid var(--tick-on-light);border-bottom:2px solid var(--tick-on-light);
  transform:rotate(-45deg);
}
.panel__media{transition:opacity .25s var(--ease),transform .25s var(--ease)}
.panel__media[data-swap="out"]{opacity:0;transform:translateY(8px)}
@media (max-width:980px){
  .tabs{display:none}
  .panel{display:block!important;margin-bottom:var(--s8)}
  .panel__grid{grid-template-columns:1fr;gap:var(--s5)}
  .panel:last-of-type{margin-bottom:0}
}

/* ============================================================
   6. On every lead
   ============================================================ */
.lead__grid{display:grid;grid-template-columns:45fr 55fr;gap:var(--s8);align-items:start;
  margin-top:var(--s7)}
.lead__list li{
  padding:var(--s4) 0 var(--s4) 44px;position:relative;border-bottom:1px solid var(--line);
  transition:opacity .35s var(--ease);
}
.lead__list li:last-child{border-bottom:0}
.lead__list .n{
  position:absolute;left:0;top:var(--s4);font-family:var(--serif);font-size:24px;
  color:var(--gold-ink);line-height:1.2;
}
.lead__list b{font-weight:700}
.lead__list span.t{color:var(--ink-2)}
/* E7. The line that says where each card's words come from. */
.lead__sub{margin-top:var(--s5)}
/* T11. No box: a 2px gold left rule instead. */
.lead__box{
  border-left:2px solid var(--gold);border-radius:0;
  padding:var(--s1) 0 var(--s1) var(--s5);margin-top:var(--s5);
}

/* ====================================================================
   PART 3 — star-3: "Everything on one desk."
   Paste after section "6. On every lead" in styles.css.

   Asymmetric 4/12 + 8/12. No cards, no icons, no shadows, no radius.
   The three lists keep their natural 7 / 8 / 8 lengths and are NOT
   balanced. The only rule between them is a 1px hairline.
   ==================================================================== */

.desk__grid{
  display:grid;grid-template-columns:4fr 8fr;
  gap:var(--s8);align-items:start;
}
/* The right column runs to about 1,600px. Left on its own the intro would
   sit at the top with a page of empty column under it, which is worse than
   the symmetry the asymmetry was meant to avoid. It sticks instead, the way
   the contact card does in "On every lead". */
.desk__intro{position:sticky;top:calc(var(--nav-h) + 48px)}
.desk__intro h2{margin-bottom:var(--s5)}
.desk__intro .sub{max-width:38ch}
.desk__link{margin-top:var(--s5)}

.desk__group{padding:var(--s6) 0}
.desk__group:first-child{padding-top:0}
.desk__group:last-child{padding-bottom:0}
.desk__group + .desk__group{border-top:1px solid #e2e7f1}

/* "small bold headings" (brief). Set as a NAVY tracked label, the idiom
   this design system already uses for a group head (.foot__h,
   .s5-col__h, .price__plan). Navy, not gold, so it cannot be mistaken
   for the gold .eyebrow that T2 is cutting back. It is a <p>, not an
   h3: see the note at the top of desk-section.html. */
.desk__h{
  font-size:var(--micro);font-weight:700;line-height:1.3;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy);margin:0 0 var(--s4);
}
.desk__list li{
  font-size:16px;line-height:1.5;color:var(--ink);
  padding:6px 0;max-width:62ch;
}

@media (max-width:900px){
  .desk__grid{grid-template-columns:1fr;gap:var(--s6)}
  .desk__intro{position:static}
  .desk__intro .sub{max-width:none}
}

.lead__box b{display:block;margin-bottom:var(--s2)}
.lead__box p{color:var(--ink-2);font-size:16px}
.lead__sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
@media (max-width:980px){
  .lead__grid{grid-template-columns:1fr;gap:var(--s6)}
  .lead__sticky{position:static}
  .lead__media{order:-1}
}

/* ============================================================
   7. Founder (dark)
   ============================================================ */
.founder{background:var(--navy);color:var(--ink-onDark)}
/* T7. The portrait's native width is 288px, so the photo column is capped at
   300px and the quote column takes every pixel that frees up. */
.founder__grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:var(--s8);align-items:start}
.founder h2{color:var(--white);margin-bottom:var(--s5)}
.founder__photo{
  max-width:300px;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/5;
  background:var(--navy-3);border:1px solid var(--line-onDark);
}
.founder__photo img{width:100%;height:100%;object-fit:cover;display:block}
.quote{position:relative;font-size:19px;line-height:1.6;color:var(--ink-onDark)}
.quote p{margin-bottom:var(--s4)}
.quote__mark{
  font-family:var(--serif);font-size:56px;line-height:.8;color:var(--gold);
  display:block;margin-bottom:var(--s2);
}
.founder__name{margin-top:var(--s5);font-weight:700;color:var(--white)}
.founder__role{color:var(--ink-onDark-2);font-size:var(--small);margin-top:var(--s1)}
.fcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s6) 0}
.fcard{background:var(--navy-3);border-radius:var(--r-sm);padding:var(--s5)}
.fcard__t{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:var(--s3);
}
.fcard__big{font-family:var(--serif);font-size:48px;line-height:1;color:var(--white);display:block}
.fcard__big--sm{font-size:32px;line-height:1.15}
.fcard p{font-size:var(--small);color:var(--ink-onDark-2);margin-top:var(--s3);line-height:1.5}
@media (max-width:900px){
  .founder__grid{grid-template-columns:1fr;gap:var(--s6)}
  .founder__photo{max-width:300px}
  .fcards{grid-template-columns:1fr}
}

/* ============================================================
   8. CRM vs coach
   ============================================================ */
.cmp{
  max-width:880px;margin:var(--s7) 0 0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;
}
.cmp table{width:100%;border-collapse:collapse;font-size:16px}
.cmp th{
  text-align:left;padding:var(--s5) var(--s5);font-size:var(--small);font-weight:700;
  border-bottom:1px solid var(--line);
}
.cmp th.a{color:var(--ink-2);background:var(--bg)}
.cmp th.b{color:var(--navy);border-top:3px solid var(--gold)}
.cmp td{padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);vertical-align:top;width:50%}
.cmp tr:last-child td{border-bottom:0}
.cmp td.a{color:var(--ink-2);background:var(--bg)}
.cmp tbody tr:hover td,.cmp tbody tr.is-hover td{background:var(--gold-tint)}
.cmp tbody tr:hover td.a,.cmp tbody tr.is-hover td.a{background:var(--gold-tint)}
/* Small navy tick in the Annie column, plain grey dash on the left. No red crosses. */
.cmp .mk{display:inline-block;width:18px;margin-right:10px;color:var(--ink-3);font-weight:700}
.cmp td.b .mk{color:var(--navy)}
@media (max-width:700px){
  .cmp table,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:100%}
  .cmp thead{display:none}
  .cmp tr{border-bottom:1px solid var(--line);padding:var(--s3) 0}
  .cmp tr:last-child{border-bottom:0}
  .cmp td{border-bottom:0;padding:10px var(--s5)}
  .cmp td.a::before{content:"A typical recruitment CRM";display:block;font-size:12px;
    font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .cmp td.b::before{content:"Annie";display:block;font-size:12px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
}

/* ============================================================
   9. Pricing
   ============================================================ */
/* T1. The card sits left-of-centre in column 1 with its sub-line beside it.
   The sub-line is first in the DOM, so below 900px it reads before the card. */
.price__lay{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);
  gap:var(--s8);align-items:start;margin-top:var(--s7);
}
.price__lay .price{grid-column:1;grid-row:1}
.price__aside{grid-column:2;grid-row:1;font-size:var(--lede);line-height:var(--lede-lh)}
@media (max-width:900px){
  .price__lay{grid-template-columns:1fr;gap:var(--s5)}
  .price__lay .price,.price__aside{grid-column:1;grid-row:auto}
}
/* T11. Radius 12 and a 1px border, no shadow and no hover lift. 16px radius
   plus the soft shadow now belong to the product frames alone. */
.price{
  max-width:480px;margin:0;background:var(--white);border:1px solid var(--line);
  border-top:4px solid var(--gold);border-radius:var(--r-sm);padding:var(--s6);
}
.price__plan{font-size:var(--small);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2)}
.price__amt{font-family:var(--serif);font-size:56px;line-height:1.1;margin-top:var(--s2)}
.price__amt span{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--ink-2)}
.price__yr{font-size:var(--small);color:var(--ink-2);margin-top:var(--s1)}
.price ul{margin:var(--s5) 0;border-top:1px solid var(--line);padding-top:var(--s5)}
.price ul li{position:relative;padding-left:30px;margin-bottom:var(--s3);font-size:16px}
.price ul li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:9px;
  border-left:2px solid var(--tick-on-light);border-bottom:2px solid var(--tick-on-light);transform:rotate(-45deg);
}
.price__fine{font-size:var(--tiny);color:var(--ink-2);text-align:center;margin-top:var(--s3)}
.price__legal{font-size:12px;color:var(--ink-3);margin-top:var(--s6)}
.price__team{font-size:var(--small);color:var(--ink-2);margin-top:var(--s3)}

/* ============================================================
   10. FAQ
   ============================================================ */
/* T1. The list hugs the wrap's left edge under its left-aligned H2, the same
   way the comparison table and the pricing card do. */
.faq{max-width:840px;margin:var(--s7) 0 0;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  background:none;border:0;padding:var(--s5) 0 var(--s5);text-align:left;cursor:pointer;
  font-size:18px;font-weight:600;line-height:1.4;
}
.faq__q:hover,.faq__q.is-hover{color:var(--gold-ink)}
.faq__q:active,.faq__q.is-active{color:var(--navy)}
.faq__item:has(.faq__q[aria-expanded="true"]),.faq__item.is-open{background:transparent}
.faq__q[aria-expanded="true"],.faq__q.is-expanded{color:var(--navy)}
.faq__ic{
  flex:0 0 22px;width:22px;height:22px;position:relative;margin-top:2px;
  transition:transform .3s var(--ease);
}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;background:var(--gold-ink);border-radius:1px;
}
.faq__ic::before{left:0;right:0;top:10px;height:2px}
.faq__ic::after{top:0;bottom:0;left:10px;width:2px;transition:opacity .3s var(--ease)}
.faq__q[aria-expanded="true"] .faq__ic::after,
.faq__q.is-expanded .faq__ic::after{opacity:0}
.faq__a{display:none;padding:0 0 var(--s5);max-width:760px;color:var(--ink-2)}
.faq__a[data-open="true"],.faq__a.is-open{display:block}

/* ============================================================
   11. Final CTA
   ============================================================ */
.final{background:var(--navy);color:var(--white);text-align:center;padding:var(--s9) 0}
.final h2{color:var(--white)}
.final h2 .l2{display:block;color:var(--gold);font-style:italic}
.final .btn-row{margin-top:var(--s6)}
@media (max-width:900px){ .final{padding:var(--s8) 0} }

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--white);border-top:1px solid var(--line);padding:var(--s8) 0 var(--s6)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6)}
.foot__h{font-size:var(--tiny);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s4)}
.foot__cols a{display:block;font-size:var(--small);color:var(--ink-2);text-decoration:none;
  padding:6px 0}
.foot__cols a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot__bot{
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);
}
@media (max-width:760px){ .foot__cols{grid-template-columns:1fr 1fr;gap:var(--s5)} }

/* ============================================================
   Floating help button
   ============================================================ */
.help{position:fixed;right:var(--s5);bottom:var(--s5);z-index:70}
/* T12. A small text pill, not a generic round chat bubble. The float shadow
   stays: this is an overlay control on a white page, not a card. */
.help__btn{
  border-radius:var(--r-pill);background:var(--navy);color:var(--white);border:0;cursor:pointer;
  padding:11px 20px;font-family:inherit;font-size:var(--small);font-weight:700;line-height:1.2;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  box-shadow:var(--shadow-float);
  transition:transform .25s var(--ease),background-color .25s var(--ease);
}
.help__btn:hover,.help__btn.is-hover{transform:translateY(-2px);background:var(--navy-3)}
.help__btn:active,.help__btn.is-active{transform:translateY(0);background:var(--navy-press)}
.help__btn[disabled],.help__btn.is-disabled{opacity:.4;pointer-events:none}
.help__card{
  position:absolute;right:0;bottom:56px;width:268px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s5);
  display:none;
}
.help__card[data-open="true"],.help__card.is-open{display:block}
.help__card b{display:block;font-size:var(--ui);margin-bottom:var(--s3)}
.help__card a{display:block;font-size:var(--small);color:var(--gold-ink);font-weight:600;
  text-decoration:none;padding:7px 0}
.help__card a:hover,.help__card a.is-hover{text-decoration:underline;text-underline-offset:3px}
.help__card a:active,.help__card a.is-active{color:var(--navy)}
@media (max-width:600px){ .help{right:16px;bottom:16px} }
@media (prefers-reduced-motion:reduce){ .help__btn:hover{transform:none} }

/* ============================================================
   Browser frame  (Brief Part 1: "a simple light browser frame: a white
   bar 36px tall with three small grey dots on the left. Nothing else
   in the frame.")  Clips its contents, works at any width.
   ============================================================ */
.frame{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow);
  overflow:hidden;              /* clips the body to the rounded corners */
  isolation:isolate;
  width:100%;
}
.frame__bar{
  height:36px;flex:0 0 36px;
  background:var(--white);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 var(--s4);
}
.frame__dots{display:flex;align-items:center;gap:6px}
.frame__dots span{
  width:9px;height:9px;border-radius:var(--r-round);
  background:var(--line);display:block;flex:0 0 9px;
}
.frame__body{
  background:var(--white);
  overflow:hidden;
}
/* Child combinator on purpose: this sizes the screenshot that IS the
   frame's content. Without it this rule also stretched every avatar
   inside a rebuilt screen to full width. */
.frame__body > img,.frame__body > video{width:100%;height:auto;display:block}
/* A frame that must fill a fixed-height area */
.frame--fill{display:flex;flex-direction:column;height:100%}
.frame--fill .frame__body{flex:1 1 auto;min-height:0}

/* Gold-tint offset panel (Part 5, "Polished product shot standard":
   the only decoration allowed is a soft #faf4e2 panel behind a
   screenshot, offset 24px down and to the right).                     */
.shot{position:relative;display:block}
.shot::before{
  content:"";position:absolute;
  inset:var(--s5) calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s5);
  background:var(--gold-tint);
  border-radius:var(--r-lg);
  z-index:0;
  pointer-events:none;
}
.shot > .frame{position:relative;z-index:1}
/* The 24px right offset would push past the viewport on a phone, so the
   decoration is dropped below 900px. No horizontal scroll at 375px.   */
@media (max-width:900px){
  .shot::before{display:none}
}

/* ============================================================
   People and companies

   The client overrode Part 1's "replace every face with an initials
   circle": anything with a candidate name or a company logo keeps the
   real face and the real mark. See CAST-AND-LOGOS.md.

   So:
     .av         a real face. Used wherever a named person appears.
     .logo-tile  a real company mark on its brand-coloured tile.
     .ini        initials only. Still used where the app itself uses one
                 and no person is behind it: the "3" counter circle in
                 IMAGE 1, and Sarah's sidebar user chip.

   All three take --sz, so they line up with each other at any size.
   ============================================================ */

/* Round avatar. The hairline inner edge stops a light photo floating
   free on a white background. Cropped with object-fit so a 160x160
   source is never squashed. */
.av{
  --sz:36px;
  width:var(--sz);height:var(--sz);flex:0 0 var(--sz);
  border-radius:var(--r-round);
  object-fit:cover;object-position:50% 40%;
  display:block;background:var(--line);
  box-shadow:inset 0 0 0 1px rgba(10,17,41,.08);
  user-select:none;
}
.av--22{--sz:22px}
.av--28{--sz:28px}
.av--36{--sz:36px}
.av--58{--sz:58px}
/* An <img> cannot paint its own inset shadow in every engine, so when
   the avatar is an image the ring is drawn by a wrapper instead. */
span.av,.av-wrap{position:relative;overflow:hidden;display:inline-block}
.av-wrap > img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.av-wrap::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(10,17,41,.08);pointer-events:none;
}

/* Company logo tile: rounded square, --lg is the tile colour and --lgi
   the mark colour. The SVG inherits --lgi through currentColor, so one
   sprite serves every company. Radius is 0.28 of the tile, matching the
   app's own tiles. Sprite: assets/logos.svg.html */
.logo-tile{
  --sz:36px;--lg:var(--navy);--lgi:var(--gold);
  width:var(--sz);height:var(--sz);flex:0 0 var(--sz);
  border-radius:calc(var(--sz) * .28);
  background:var(--lg);color:var(--lgi);
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;user-select:none;
}
.logo-tile svg{
  width:calc(var(--sz) * .62);height:calc(var(--sz) * .62);
  display:block;fill:currentColor;
}
.logo-tile--22{--sz:22px}
.logo-tile--28{--sz:28px}
.logo-tile--36{--sz:36px}
.logo-tile--58{--sz:58px}

/* Initials circle. Navy fill, gold letters, Plus Jakarta Sans 700. */
.ini{
  --sz:36px;
  width:var(--sz);height:var(--sz);flex:0 0 var(--sz);
  border-radius:var(--r-round);
  background:var(--navy);
  color:var(--gold-light);                 /* 10.72:1 on navy */
  font-family:var(--sans);font-weight:700;
  font-size:calc(var(--sz) * .36);
  line-height:1;letter-spacing:.01em;
  display:inline-flex;align-items:center;justify-content:center;
  text-align:center;text-transform:uppercase;
  overflow:hidden;user-select:none;
}
.ini--22{--sz:22px}
.ini--28{--sz:28px}
.ini--36{--sz:36px}
.ini--58{--sz:58px}

/* ============================================================
   Status pill (green only, Brief Part 1)
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--micro);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--green-bg);color:var(--green);   /* 4.52:1 */
}
.pill--quiet{background:var(--bg);color:var(--ink-2)}
.pill--gold{background:var(--gold-tint);color:var(--gold-ink)}

/* ============================================================
   Style-guide state simulation
   These classes force a state so a reviewer can see hover, focus and
   active rendered side by side without a mouse. They are inert on the
   homepage, where nothing carries them.
   ============================================================ */
.is-focus{outline-style:solid!important}

/* ============================================================
   Mock label (mock only)
   ============================================================ */
.mocklab{
  position:fixed;left:12px;bottom:12px;z-index:80;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:rgba(255,255,255,.92);
  border:1px solid var(--line);border-radius:6px;padding:5px 9px;pointer-events:none;
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv[data-in="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}


/* ====================================================================
   3. Product screens
   ==================================================================== */

/* ============================================================
   ANNIE: PRODUCT SCREENS (Sub-agent 3)
   Six rebuilt app screens. Everything here is scoped under .scr
   (or .scr-frame) so nothing leaks into the page.

   NOTE FOR THE CREATIVE DIRECTOR / SUB-AGENT 2:
   assets/styles.css did not yet contain `.frame` when this file was
   written, so the browser frame is defined here under the clearly-named
   class `.scr-frame`. It does not collide with anything. If Sub-agent 2
   adds `.frame` later, the page can use that instead and this block can
   be deleted; nothing else in this file depends on it.

   There is no `.ini` here any more. Michael's 29 Sep override means
   every person is a real photograph (`.scr-av`, from the closed cast in
   assets/img/cast/) and every company is its real mark (`.scr-logo`,
   from assets/logos.svg.html). The only lettered circles left are the
   "3" counter on IMAGE 1 (`.s1-count`) and Sarah's own chip
   (`.scr-user`), because neither has a candidate behind it.

   PAGES THAT SHOW A SCREEN MUST PASTE THE LOGO SPRITE once, just after
   <body>. Without it every `.scr-logo` renders as an empty tile.

   HOW THESE SCALE (no transform: scale() anywhere)
   `.scr-frame` is an inline-size container. Each screen sets ONE
   fluid root font size in `cqi` with a clamp floor and ceiling, and
   every size inside that screen is expressed in `em`. So the whole
   screen scales with its slot (470px hero / 700px tour / 640px lead)
   while keeping the exact proportions measured off the originals,
   and floors out so it stays legible down to 335px.
   ============================================================ */

/* ---- local palette, sampled from the original screenshots ------
   (kept local so this file works on its own; values match the
   brief's tokens in styles.css) */
.scr-frame,
.scr{
  --s-ink:#0a1129;          /* body text */
  --s-ink2:#55617d;         /* secondary / role text */
  --s-faint:#6b7385;        /* faint line */
  --s-line:#e4e8f0;         /* hairlines, measured #dadbdf–#e8ecf4 */
  --s-line2:#eef1f7;        /* lighter hairline */
  --s-navy:#0d1b40;         /* app fills: number boxes, buttons, tiles */
  --s-navy-deep:#0a1129;
  --s-side:#101a35;         /* sidebar */
  --s-appbg:#f6f7fc;        /* app content background */
  --s-card:#f6f7fb;         /* soft card fill */
  --s-gold:#c9a84c;
  --s-gold-l:#e2c169;
  --s-gold-ink:#8a6212;
  --s-gold-tint:#faf4e2;    /* measured #fbf7ec */
  --s-gold-line:#efe1bb;
  --s-green:#117f4b;
  --s-green-bg:#e7f6ee;
  --s-red-bg:#fde7e9;
  --s-red-ink:#9b2530;
  --s-blue-bg:#e6ecfa;
  --s-blue-ink:#28477e;
  --s-pale:#edf0f7;         /* pale circle fill (news.jpg "OM") */
  --s-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

/* ============ BROWSER FRAME =================================== */
.scr-frame{
  container-type:inline-size;
  background:#fff;
  border:1px solid var(--s-line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(10,17,41,.08);
  max-width:100%;
}
.scr-frame__bar{
  height:36px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 14px;
  background:#fff;
  border-bottom:1px solid var(--s-line);
}
.scr-frame__bar i{
  width:9px;height:9px;border-radius:50%;
  background:#d7dce7;
  display:block;
}

/* ============ SCREEN ROOT ===================================== */
.scr{
  font-family:var(--s-sans);
  color:var(--s-ink);
  background:#fff;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:lining-nums tabular-nums;
}
.scr *{box-sizing:border-box;}
/* :where() keeps these resets at zero specificity so every class below
   wins without needing !important. */
.scr :where(p,ul,ol,li,h1,h2,h3,h4){margin:0;padding:0;}
.scr :where(ul,ol){list-style:none;}
.scr :where(b,strong){font-weight:700;}
.scr :where(a){color:inherit;text-decoration:none;}

/* Buttons inside the screens are inert display elements. */
.scr :where(button){
  font:inherit;color:inherit;background:none;border:0;
  cursor:default;text-align:left;
}
.scr :focus-visible{outline:2px solid var(--s-navy-deep);outline-offset:2px;}

/* ---- avatar (people) ------------------------------------------
   CLIENT OVERRIDE, 29 Sep: faces stay faces. Every person on these
   screens is one of the thirteen Pexels photos in
   assets/img/cast/. The cast is closed: see CAST-AND-LOGOS.md.
   alt="" is deliberate. The name is in text right beside the photo,
   so a described avatar makes a screen reader say it twice. */
.scr-av{
  flex:0 0 auto;
  display:block;
  width:2em;height:2em;
  border-radius:50%;
  object-fit:cover;
  background:#e8ecf4;           /* holds the circle before decode */
}

/* ---- company logo tile ----------------------------------------
   The real marks, from assets/logos.svg.html. --lg is the tile
   colour, --lgi the mark colour. Radius 26% of the tile, matching
   the originals. */
.scr-logo{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.3em;height:1.3em;
  border-radius:26%;
  background:var(--lg,var(--s-navy-deep));
  color:var(--lgi,#fff);
}
.scr-logo svg{width:70%;height:70%;display:block;fill:currentColor;}

/* ---- the recruiter's own chip (Sarah) -------------------------
   Sarah is the app user, not a candidate, and the app already
   shows her as a lettered chip. She has no cast photo and must
   never be given a stock face. */
.scr-user{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:2em;height:2em;border-radius:50%;
  background:var(--s-gold);color:var(--s-navy-deep);
  font-weight:800;line-height:1;
}

/* ---- pale monogram circle (non-person, e.g. news.jpg "OM") ---- */
.scr-pale{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--s-pale);
  color:var(--s-navy-deep);
  font-weight:700;line-height:1;
}

/* ---- small pills --------------------------------------------- */
.scr-pill{
  display:inline-block;
  padding:.2em .55em;
  border-radius:.4em;
  font-size:.8em;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
}
.scr-pill--green{background:var(--s-green-bg);color:var(--s-green);}
.scr-pill--navy{background:var(--s-navy);color:#fff;}
.scr-pill--red{background:var(--s-red-bg);color:var(--s-red-ink);}
.scr-pill--blue{background:var(--s-blue-bg);color:var(--s-blue-ink);}
.scr-pill--out{
  background:#fff;border:1px solid var(--s-line);
  color:var(--s-ink2);font-weight:700;
  font-size:.72em;letter-spacing:.07em;text-transform:uppercase;
}
.scr-pill--guess{
  background:#f2e4bd;color:#7a5510;
  font-weight:800;font-size:.72em;letter-spacing:.07em;text-transform:uppercase;
}
.scr-pill--gold{
  background:var(--s-gold-tint);border:1px solid var(--s-gold-line);
  color:var(--s-gold-ink);font-weight:800;
  font-size:.72em;letter-spacing:.07em;text-transform:uppercase;
}

/* ---- gold "dash + label" section head ------------------------ */
.scr-elabel{
  display:flex;align-items:center;gap:.6em;
  color:var(--s-gold-ink);
  font-size:.82em;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.scr-elabel::before{
  content:"";width:1.6em;height:2px;flex:0 0 auto;
  background:var(--s-gold);border-radius:2px;
}

/* ---- gold-tint panel ----------------------------------------- */
.scr-gold{
  background:var(--s-gold-tint);
  border:1px solid var(--s-gold-line);
  border-radius:.75em;
  padding:1em 1.15em;
}
.scr-gold__t{
  color:var(--s-gold-ink);
  font-size:.82em;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:.45em;
}

/* ---- button row ---------------------------------------------- */
.scr-btns{display:flex;flex-wrap:wrap;gap:.65em;}
.scr-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.72em 1.1em;
  border-radius:.62em;
  border:1px solid var(--s-line);
  background:#fff;
  font-weight:700;font-size:.95em;
  color:var(--s-ink);
  white-space:nowrap;
}
.scr-btn--p{background:var(--s-navy);border-color:var(--s-navy);color:#fff;}

/* ---- simple line icons --------------------------------------- */
.scr-ico{
  flex:0 0 auto;width:1.05em;height:1.05em;display:block;
  stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ============================================================
   APP CHROME (screens 3 and 5): sidebar + content
   ============================================================ */
.scr-app{display:flex;min-height:0;background:var(--s-appbg);}
.scr-side{
  flex:0 0 20.5%;
  min-width:0;
  background:var(--s-side);
  color:#c3cbdd;
  padding:1.15em .7em .9em;
  display:flex;flex-direction:column;
}
.scr-side__logo{display:flex;align-items:center;gap:.5em;margin:0 .25em 1.25em;}
.scr-side__logo img{width:1.85em;height:1.85em;border-radius:.4em;display:block;flex:0 0 auto;}
.scr-side__logo .lk{min-width:0;}
.scr-side__logo .lk b{
  display:block;color:#fff;font-size:1.12em;font-weight:800;
  line-height:1;letter-spacing:-.01em;
}
.scr-side__logo .lk span{
  display:block;color:var(--s-gold-l);
  font-size:.52em;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;margin-top:.35em;white-space:nowrap;
}
.scr-nav{display:flex;flex-direction:column;gap:.1em;}
.scr-nav a{
  display:flex;align-items:center;gap:.55em;
  padding:.46em .5em;border-radius:.45em;
  font-size:.88em;font-weight:600;color:#d3d9e6;
  white-space:nowrap;
}
.scr-nav a.is-on{background:var(--s-gold);color:var(--s-navy-deep);font-weight:700;}
.scr-nav__sec{
  margin:1.1em .6em .45em;
  font-size:.68em;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#7b88a6;
}
.scr-side__user{
  margin-top:auto;padding-top:.95em;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:.7em;
}
.scr-side__user .u{
  flex:0 0 auto;width:1.9em;height:1.9em;border-radius:50%;
  background:var(--s-gold);color:var(--s-navy-deep);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95em;line-height:1;
}
.scr-side__user .uk{min-width:0;}
.scr-side__user .uk b{display:block;color:#fff;font-size:.9em;line-height:1.2;}
.scr-side__user .uk span{display:block;color:#98a3bd;font-size:.78em;line-height:1.3;white-space:nowrap;}
.scr-main{flex:1 1 auto;min-width:0;padding:1.4em 1.45em;}

/* ============================================================
   IMAGE 1: Ranked call list  (faithful rebuild of queue.jpg)
   Original: 1600x1006 @2x = 800x503 CSS. Base body 15.8px.
   ============================================================ */
.scr-1{
  font-size:clamp(11.5px,1.95cqi,15.5px);
  padding:1.6em 1.5em 1.5em;
}
.s1-head{display:flex;align-items:flex-start;gap:1.05em;}
.s1-count{
  flex:0 0 auto;
  width:3.45em;height:3.45em;border-radius:50%;
  background:var(--s-pale);color:#2b3566;
  display:flex;align-items:center;justify-content:center;
  font-size:1.18em;font-weight:700;line-height:1;
}
.s1-htxt{min-width:0;flex:1 1 auto;}
.s1-today{
  font-size:1.9em;font-weight:800;line-height:1.05;
  letter-spacing:-.02em;color:var(--s-ink);
}
.s1-sub{font-size:1.17em;line-height:1.35;margin-top:.28em;color:var(--s-ink);}
.s1-sub b{font-weight:800;}
.s1-sub span{color:var(--s-ink);font-weight:500;}
.s1-faint{font-size:.9em;color:var(--s-faint);margin-top:.5em;line-height:1.4;}
/* Scene A progress bar. display:none is the RESTING state, so it takes
   no space and the header matches queue.jpg exactly. Sub-agent 4: set
   display:block at 0.0s, fill the inner <i> to 100% over 1.2s, then
   set display:none again at 1.2s. */
.s1-bar{
  display:none;
  height:3px;border-radius:3px;background:var(--s-line2);
  margin-top:.7em;overflow:hidden;
}
.s1-bar i{display:block;height:100%;width:0;background:var(--s-gold);border-radius:3px;}

.s1-rows{margin-top:1.05em;border-top:1px solid var(--s-line);}
.s1-row{
  display:flex;align-items:flex-start;gap:.72em;
  padding:1.05em 0 1.05em;
  border-bottom:1px solid var(--s-line);
}
.s1-rows .s1-row:last-child{border-bottom:0;}
.s1-num{
  flex:0 0 auto;
  width:1.5em;height:1.5em;border-radius:.34em;
  background:var(--s-navy);color:var(--s-gold-l);
  display:flex;align-items:center;justify-content:center;
  font-size:.86em;font-weight:700;line-height:1;margin-top:.22em;
}
.s1-row .scr-av{width:2.05em;height:2.05em;}
.s1-row .scr-logo{width:1.3em;height:1.3em;margin-top:.26em;}
.s1-body{min-width:0;flex:1 1 auto;}
.s1-name{font-size:1.17em;line-height:1.3;}
.s1-name b{font-weight:800;color:var(--s-ink);}
.s1-name span{color:var(--s-ink2);font-weight:500;}
.s1-reason{margin-top:.2em;line-height:1.48;color:var(--s-ink);}
/* Scene A pill: hidden until the motion layer reveals it. */
/* Scene A reveals this. display:none so the resting state matches the
   original exactly and the pill reserves no space. Sub-agent 4: set
   display:inline-block, then fade/slide it in. */
.s1-pill{
  display:none;
  margin-left:.4em;vertical-align:.08em;
  background:var(--s-green-bg);color:var(--s-green);
  font-size:.72em;font-weight:700;font-style:normal;
  padding:.18em .5em;border-radius:.4em;white-space:nowrap;
}
.s1-btns{margin-top:1.3em;}
@media (hover:hover){
  .s1-row{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1);}
  .s1-row:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(10,17,41,.08);}
}

/* ============================================================
   IMAGE 2: Morning email  (BUILT TO BRIEF, no matching original)
   Visual language taken from email.jpg: header block, subject bar,
   body card, gold "why" panel, button row.
   ============================================================ */
.scr-2{
  font-size:clamp(11.5px,2.45cqi,15.5px);
  padding:1.5em 1.4em 1.4em;
}
.s2-head{display:flex;align-items:flex-start;gap:.85em;}
.s2-head .scr-user{margin-top:.15em;}
.s2-head .scr-user{width:2.5em;height:2.5em;font-size:1.05em;}
.s2-htxt{min-width:0;}
.s2-htxt h3{font-size:1.72em;font-weight:800;line-height:1.1;letter-spacing:-.02em;}
.s2-meta{font-size:1.02em;font-weight:700;margin-top:.22em;line-height:1.35;}
.s2-meta span{color:var(--s-ink2);font-weight:500;}
.s2-faint{color:var(--s-faint);font-size:.95em;margin-top:.25em;}

.s2-card{
  margin-top:1.05em;
  border:1px solid var(--s-line);
  border-radius:.8em;
  overflow:hidden;
}
.s2-subj{
  background:#f5f6fa;
  border-bottom:1px solid var(--s-line);
  padding:.78em 1em;
  font-size:1.02em;line-height:1.35;
  color:var(--s-ink2);
}
.s2-subj b{color:var(--s-ink);font-weight:800;}
.s2-body{padding:1.05em 1em 1.1em;}
.s2-body>p{line-height:1.55;}
.s2-greet{font-weight:700;}
.s2-lede{margin-top:.5em;color:var(--s-ink);}

.s2-blocks{margin-top:.9em;border-top:1px solid var(--s-line);}
.s2-block{
  display:flex;gap:.65em;align-items:flex-start;
  padding:.8em 0;
  border-bottom:1px solid var(--s-line);
}
.s2-blocks .s2-block:last-child{border-bottom:0;padding-bottom:.35em;}
.s2-block .scr-logo{width:1.45em;height:1.45em;margin-top:.14em;}
.s2-block__t{font-size:1.05em;line-height:1.3;}
.s2-block__t b{font-weight:800;}
.s2-block__t span{color:var(--s-ink2);font-weight:500;}
.s2-who{margin-top:.15em;font-weight:700;color:var(--s-gold-ink);font-size:.92em;}
.s2-why{margin-top:.18em;line-height:1.5;color:var(--s-ink);}

.s2-panel{margin-top:1.1em;}
.s2-panel p{line-height:1.5;}
.scr-2 .scr-btns{margin-top:1.05em;}

/* ============================================================
   IMAGE 3: Ask Annie  (faithful rebuild of ask.jpg, cropped)
   Original: 1600x1007 @1x. Sidebar 265/1600 = 16.6%.
   ============================================================ */
.scr-3{font-size:clamp(10.5px,1.72cqi,14px);}
.scr-3 .scr-app{min-height:24em;}
.s3-q{display:flex;justify-content:flex-end;}
.s3-q p{
  max-width:84%;
  background:var(--s-navy);color:#fff;
  border-radius:.8em;
  padding:.85em 1.05em;
  line-height:1.5;
}
.s3-a{
  margin-top:1.1em;
  position:relative;
  background:#fff;
  border:1px solid var(--s-line);
  border-radius:.8em;
  padding:1.1em 1.2em 1.4em;
  overflow:hidden;
}
.s3-a p{line-height:1.62;}
.s3-a p+p{margin-top:1.05em;}
.s3-a h4{font-size:1em;font-weight:800;margin-top:1.15em;line-height:1.4;}
.s3-a h4+p{margin-top:.55em;}
/* the soft fade that says "this continues" */
.s3-fade{
  position:absolute;left:1px;right:1px;bottom:1px;
  height:4.6em;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.35) 38%,
    rgba(255,255,255,.82) 72%,
    #fff 100%);
}
.s3-ask{margin-top:1.05em;display:flex;gap:.7em;align-items:center;}
.s3-input{
  flex:1 1 auto;min-width:0;
  border:1.5px solid var(--s-gold);
  border-radius:.62em;
  padding:.8em 1em;
  background:#fff;
  color:var(--s-faint);
  line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s3-send{
  flex:0 0 auto;
  background:#e3d6ac;color:#4a3c14;
  border-radius:.62em;
  padding:.8em 1.35em;
  font-weight:800;
}

/* ============================================================
   IMAGE 4: Annie's recommendations (BUILT TO BRIEF)
   Header, label and gold panel taken from recs.jpg.
   ============================================================ */
.scr-4{
  font-size:clamp(11.5px,1.95cqi,15.5px);
  padding:1.5em 1.5em 1.4em;
}
.s4-head{display:flex;align-items:flex-start;gap:1em;}
.s4-head .scr-logo{width:4em;height:4em;}
.s4-htxt{min-width:0;}
.s4-htxt h3{font-size:1.9em;font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.s4-meta{font-size:1.1em;font-weight:700;margin-top:.2em;line-height:1.35;}
.s4-meta span{color:var(--s-ink2);font-weight:500;}
.s4-faint{color:var(--s-faint);margin-top:.28em;font-size:.95em;}
.scr-4 .scr-elabel{margin:1.15em 0 .3em;padding-top:1.05em;border-top:1px solid var(--s-line);}
.s4-list{margin-top:.55em;}
.s4-cand{
  display:flex;align-items:flex-start;gap:.7em;
  padding:.78em 0;
  border-bottom:1px solid var(--s-line2);
}
.s4-list .s4-cand:last-child{border-bottom:0;}
.s4-cand .scr-av{width:2.05em;height:2.05em;}
.s4-cand .scr-logo{width:1.3em;height:1.3em;margin-top:.24em;}
.s4-txt{min-width:0;flex:1 1 auto;}
.s4-name{font-size:1.12em;line-height:1.3;}
.s4-name b{font-weight:800;}
.s4-name span{color:var(--s-ink2);font-weight:500;}
.s4-why{margin-top:.15em;line-height:1.48;}
.scr-4 .scr-gold{margin-top:1.05em;}
.scr-4 .scr-gold p{line-height:1.5;}

/* ============================================================
   IMAGE 5: Job pipeline (faithful rebuild of pipe-trim.jpg)
   ============================================================ */
.scr-5{font-size:clamp(10.5px,1.72cqi,14px);}
.scr-5 .scr-main{background:#fff;}
.scr-5 .scr-app{min-height:22em;background:#fff;}
.s5-crumb{color:var(--s-ink2);font-size:.92em;}
.s5-title{font-size:2em;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin-top:.25em;}
.s5-meta{display:flex;align-items:center;gap:.5em;margin-top:.45em;font-size:1em;line-height:1.35;}
.s5-meta .scr-logo{width:1.35em;height:1.35em;}
.s5-meta .t{min-width:0;}
.s5-meta b{font-weight:800;}
.s5-meta i{font-style:normal;color:var(--s-ink2);font-weight:500;}
.s5-tabs{display:flex;gap:.3em;margin-top:1.05em;}
.s5-tab{padding:.62em 1.05em;border-radius:.55em;font-weight:700;color:var(--s-ink2);}
.s5-tab.is-on{background:var(--s-navy);color:#fff;}
.s5-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.85em;margin-top:1.1em;}
.s5-col__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5em;
  font-size:.82em;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--s-ink2);padding-bottom:.5em;
}
.s5-col__h em{font-style:normal;letter-spacing:0;font-weight:700;color:var(--s-faint);}
.s5-stack{display:flex;flex-direction:column;gap:.7em;}
.s5-card{
  background:var(--s-card);
  border:1px solid transparent;
  border-radius:.7em;
  padding:.8em .85em;
}
.s5-card--live{background:#fff;border-color:var(--s-line);box-shadow:0 4px 12px rgba(10,17,41,.06);}
.s5-card__top{display:flex;align-items:center;gap:.6em;}
.s5-card .scr-av{width:1.9em;height:1.9em;}
.s5-card b{display:block;font-size:1em;font-weight:800;line-height:1.25;}
.s5-card em{display:block;font-style:normal;color:var(--s-ink2);font-size:.9em;line-height:1.3;}
.s5-card__pills{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;margin-top:.6em;}
.s5-card__pills time{color:var(--s-faint);font-size:.85em;}
.s5-empty{
  border:1.5px dashed var(--s-line);
  border-radius:.7em;
  min-height:7.4em;
}
.s5-foot{
  margin-top:1.3em;padding-top:1.05em;
  border-top:1px solid var(--s-line);
  line-height:1.5;
}
.s5-foot b{font-weight:800;}

/* ============================================================
   IMAGE 6: Contact card (BUILT TO BRIEF, from contact-1.jpg)
   ============================================================ */
.scr-6{
  font-size:clamp(11px,2.15cqi,15px);
  padding:1.4em 1.35em 1.3em;
}
.s6-head{display:flex;align-items:flex-start;gap:.8em;}
.s6-head .scr-av{width:3em;height:3em;}
.s6-htxt{min-width:0;}
.s6-htxt h3{font-size:1.85em;font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.s6-role{display:flex;align-items:center;gap:.45em;margin-top:.25em;font-size:1.08em;line-height:1.3;}
.s6-role{align-items:flex-start;}
.s6-role .scr-logo{width:1.3em;height:1.3em;margin-top:.1em;}
.s6-role .t{min-width:0;}
.s6-role b{font-weight:800;}
.s6-role i{font-style:normal;color:var(--s-ink2);font-weight:500;}
.s6-faint{color:var(--s-faint);margin-top:.3em;font-size:.95em;}

.s6-why{
  margin-top:1em;padding-top:1em;
  border-top:1px solid var(--s-line);
  display:flex;flex-direction:column;gap:.85em;
}
.s6-block{display:flex;gap:.7em;align-items:flex-start;}
.s6-block .scr-pill{margin-top:.12em;}
.s6-block p{line-height:1.55;min-width:0;}
.s6-block p b{font-weight:800;}
.s6-note{font-style:italic;color:var(--s-ink2);margin-top:.85em;line-height:1.5;}

.s6-news{margin-top:.95em;line-height:1.55;}
.s6-news a{color:var(--s-gold-ink);font-weight:800;}

.s6-fold{
  margin-top:.85em;
  border:1px solid var(--s-line);
  border-radius:.65em;
  overflow:hidden;
}
.s6-fold__h{
  display:flex;align-items:center;gap:.5em;
  width:100%;
  padding:.72em .9em;
  font-weight:800;font-size:1.02em;line-height:1.3;
  border-bottom:1px solid var(--s-line);
}
.s6-fold__h .car{
  flex:0 0 auto;width:0;height:0;
  border-left:.32em solid transparent;border-right:.32em solid transparent;
  border-top:.36em solid var(--s-ink2);
}
.s6-fold__h .n{margin-left:auto;color:var(--s-faint);font-weight:600;font-size:.88em;}
.s6-item{padding:.68em .9em;border-bottom:1px solid var(--s-line2);}
.s6-fold .s6-item:last-child{border-bottom:0;}
.s6-item b{display:block;font-weight:800;font-size:1.02em;line-height:1.3;}
.s6-item p{margin-top:.15em;line-height:1.5;}
.s6-src{margin-top:.3em;font-size:.9em;color:var(--s-faint);}
.s6-src a{color:var(--s-gold-ink);font-weight:800;}
.s6-person{
  display:flex;align-items:center;gap:.6em;
  padding:.55em .9em;border-bottom:1px solid var(--s-line2);
}
.s6-fold .s6-person:last-child{border-bottom:0;}
.s6-person .scr-av{width:1.9em;height:1.9em;}
.s6-person b{font-weight:800;}
.s6-person em{font-style:normal;color:var(--s-ink2);}
.s6-person .scr-pill{margin-left:auto;}
.scr-6 .scr-btns{margin-top:1em;}

/* ============================================================
   NARROW SLOTS: reflow sensibly down to 335px
   ============================================================ */
@container (max-width:430px){
  .scr-3 .scr-side,
  .scr-5 .scr-side{display:none;}          /* the app content is the point */
  .scr-3 .scr-main,
  .scr-5 .scr-main{padding:1.2em 1.1em;}
  .s5-cols{grid-template-columns:1fr;gap:.9em;}
  .s5-col--offer{display:none;}
  .s4-head .scr-logo{width:3.1em;height:3.1em;}
  .s6-block{flex-direction:column;gap:.35em;}
  .s2-block{flex-wrap:wrap;}
}
@container (max-width:360px){
  .s1-head{gap:.75em;}
  .s1-count{width:2.9em;height:2.9em;font-size:1.05em;}
  .scr-btn{padding:.65em .85em;font-size:.9em;}
  .s6-person .scr-pill{display:none;}
}

/* ============================================================
   REDUCED MOTION: nothing here moves anyway; this keeps the
   hover lift off for people who ask for stillness.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .scr *{transition:none !important;animation:none !important;}
  .s1-row:hover{transform:none;box-shadow:none;}
}


/* ====================================================================
   PART 2 — the .scr-today three-column Today view (star-1) and
   screen 7, the Intelligence Feed (star-2).
   Paste after section "3. Product screens" in styles.css.

   Both are built from the existing .scr vocabulary. The only new class
   names are .scr-today (named by the brief) and .scr-rail (named by the
   brief). Everything else below is a scoped adjustment to a REUSED
   class, not a new one.
   ==================================================================== */

/* ---- .scr-today: sidebar | call list | rail -------------------
   Every other screen sets ONE fluid root font size in cqi and sizes
   everything inside it in em. .scr-today does the same, so the sidebar
   and the rail scale with the frame exactly as screens 3 and 5 do.
   1.17cqi lands on the 14px ceiling in the 1200px hero slot, which is
   the same size the sidebar renders at in screens 3 and 5. */
.scr-today{font-size:clamp(11px,1.17cqi,14px)}

/* The call list is sized off the CENTRE column (700px of the 1200px
   frame), not off the whole frame, or it renders a size and a half too
   big beside the sidebar. 1.95cqi x (700/1200) = 1.14cqi. */
.scr-today .scr-1{font-size:clamp(11.5px,1.14cqi,15.5px);padding:1.5em 1.45em 1.4em}

/* ---- the right rail ------------------------------------------- */
.scr-rail{
  min-width:0;background:#fff;
  border-left:1px solid var(--s-line);
  padding:1.35em 1.15em 1.25em;
}
.scr-rail .s6-fold{margin-top:.9em}

/* ---- reused .s6-item / .s6-role / .s6-person, tuned for a feed row
   .s6-role carries the logo beside the title, .s6-person carries the
   face beside "You know ...". Both were written to sit at the TOP of a
   contact card, so inside an .s6-item they need their own padding and
   rules zeroed. No new class. */
.scr-rail .s6-item .s6-role,
.scr-7 .s6-item .s6-role{margin-top:0;font-size:1.02em;align-items:flex-start}
.scr-rail .s6-item .s6-role .scr-logo,
.scr-7 .s6-item .s6-role .scr-logo{margin-top:.08em}
.scr-rail .s6-item .s6-person,
.scr-7 .s6-item .s6-person{padding:.5em 0 0;border-bottom:0}
/* .s6-item b is display:block, which would drop the name onto its own
   line inside "You know Erwin Vogel, Transformation." */
.scr-rail .s6-person b,
.scr-7 .s6-person b{display:inline;font-size:inherit}
.scr-rail .s6-src,
.scr-7 .s6-src{margin-top:.4em}

/* ---- screen 7 root ------------------------------------------- */
.scr-7{
  font-size:clamp(11px,2.15cqi,15px);
  padding:1.4em 1.35em 1.3em;
}
.scr-7 .s6-fold{margin-top:1.05em}
.scr-7 .scr-gold{margin-top:1em}
.scr-7 .scr-btns{margin-top:1em}

/* ---- narrow slots. The media query in part 1 already hides the two
   outer columns below 980px. This container query is the belt and
   braces the other screens have: the frame reflows on its OWN width,
   so .scr-today can never be squashed into three columns in a slot
   too narrow for them. */
@container (max-width:620px){
  .scr-today{grid-template-columns:1fr}
  .scr-today .scr-side,.scr-today .scr-rail{display:none}
}
@container (max-width:430px){
  .scr-7{padding:1.2em 1.1em 1.15em}
  .scr-rail{padding:1.15em 1em 1.1em}
}

/* ====================================================================
   THE REAL OVERVIEW PAGE, rebuilt for the hero frame.
   Measured off meetannie-deploy/demo.html (#s-overview), the
   click-through mock whose landing view is Overview.
   Everything scales off the screen's own `em`, like the other screens.
   ==================================================================== */

/* Two columns now, not three: the rail is gone because the real
   Overview already carries Latest intelligence. */
.hero--field .scr-today{grid-template-columns:200px 1fr}

.scr-ov{
  padding:1.5em 1.6em 1.6em;
  background:var(--s-bg);
  min-width:0;
  display:flex;flex-direction:column;
}

.scr-ov .ov-h{display:flex;align-items:flex-start;gap:1em;margin-bottom:.9em}
.scr-ov .ov-hi{
  font-size:1.6em;font-weight:800;line-height:1.15;
  letter-spacing:-.02em;color:var(--s-ink);margin:0;
}
.scr-ov .ov-date{font-size:.95em;color:var(--s-ink3);margin:.25em 0 0}
.scr-ov .ov-q{margin-left:auto;color:var(--s-ink3);font-size:1.05em;line-height:1}

.scr-ov .ov-line{font-size:1.05em;color:var(--s-ink);margin:0}
.scr-ov .ov-note{font-size:.88em;color:var(--s-ink3);margin:.45em 0 0}

/* Scene A's progress bar, kept so the hero still has its one beat of
   motion. It fills once, then the rest of the view settles in. */
.scr-ov .ov-bar{
  height:2px;border-radius:2px;background:var(--s-line);
  margin:.9em 0 0;overflow:hidden;
}
.scr-ov .ov-bar i{display:block;height:100%;width:0;background:var(--s-gold);border-radius:2px}

.scr-ov .ov-nudge{margin-top:1em;padding:1em 1.1em}
.scr-ov .ov-nudge p{margin:0;font-size:.95em;line-height:1.5;color:var(--s-ink)}
.scr-ov .ov-nudge b{font-weight:800}
.scr-ov .ov-nudge .scr-btns{margin-top:.85em}

.scr-ov .ov-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.7em;margin-top:1em;
}
.scr-ov .ov-tile{
  background:#fff;border:1px solid var(--s-line);border-radius:.6em;
  padding:.85em .9em;min-width:0;
}
.scr-ov .ov-tile b{
  display:block;font-size:1.35em;font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--s-ink);
  font-variant-numeric:tabular-nums;
}
.scr-ov .ov-tile span{display:block;font-size:.88em;color:var(--s-ink2);margin-top:.3em}
.scr-ov .ov-tile i{display:block;font-style:normal;font-size:.82em;color:var(--s-ink3);margin-top:.15em}

.scr-ov .ov-cols{display:grid;grid-template-columns:1fr 1fr;gap:.7em;margin-top:.7em}
.scr-ov .ov-card{
  background:#fff;border:1px solid var(--s-line);border-radius:.6em;
  padding:.95em 1em;min-width:0;
}
.scr-ov .ov-card__h{font-size:1.02em;font-weight:800;color:var(--s-ink);margin:0 0 .3em}
.scr-ov .ov-card__h--rule{
  margin-top:1em;padding-top:.9em;border-top:1px solid var(--s-line);
}
.scr-ov .ov-empty{font-size:.88em;color:var(--s-ink3);padding:.6em 0;margin:0}

.scr-ov .ov-row{
  display:flex;align-items:center;gap:.65em;
  padding:.6em 0;border-bottom:1px solid var(--s-line);
}
/* The people going cold get their faces, per Michael's standing rule that
   anything with a candidate name keeps a face. The real app shows these
   rows as text only; this is a deliberate departure from it. */
.scr-ov .ov-row .scr-av{width:1.95em;height:1.95em;flex:0 0 auto}
.scr-ov .ov-row:last-of-type{border-bottom:0}
.scr-ov .ov-row > div{min-width:0}
.scr-ov .ov-row b{display:block;font-size:.98em;font-weight:800;color:var(--s-ink);line-height:1.2}
.scr-ov .ov-row span{display:block;font-size:.85em;color:var(--s-ink3);margin-top:.15em}

.scr-ov .ov-pill{
  margin-left:auto;flex:0 0 auto;
  font-size:.72em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.35em .6em;border-radius:.35em;white-space:nowrap;
}
/* Both pairs measured: #9a2b20 on #ffe9e6 is 5.68:1, #7a5510 on #fdf3dd
   is 5.86:1. The app's own lighter red and amber do not clear AA. */
.scr-ov .ov-pill--red{background:#ffe9e6;color:#9a2b20}
.scr-ov .ov-pill--amb{background:#fdf3dd;color:#7a5510}

.scr-ov .ov-intel{display:flex;align-items:flex-start;gap:.6em;padding:.5em 0}
.scr-ov .ov-intel .scr-logo{--sz:1.75em;flex:0 0 auto;margin-top:.05em}
.scr-ov .ov-intel span{font-size:.88em;line-height:1.45;color:var(--s-ink2);min-width:0}
.scr-ov .ov-intel b{color:var(--s-green);font-weight:800}

.scr-ov .ov-more{
  margin:.7em 0 0;font-size:.88em;font-weight:800;color:var(--s-gold-ink);
}

/* Narrow slots. The sidebar is already hidden below 980px by the hero's
   own media query; this is the content reflow inside the frame. */
@media (max-width:980px){
  .scr-ov{padding:1.2em 1.1em 1.3em}
  .scr-ov .ov-tiles{grid-template-columns:1fr 1fr}
  .scr-ov .ov-cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .scr-ov .ov-tiles{grid-template-columns:1fr 1fr;gap:.5em}
  .scr-ov .ov-nudge .scr-btns{flex-wrap:wrap}
}

/* ====================================================================
   4. Motion
   ==================================================================== */

/* ============================================================
   ANNIE HOMEPAGE — MOTION (Sub-agent 4)
   Loads AFTER styles.css and screens.css. Owns every moving part
   on the page: Scene A (hero call list), Scene B (product tour),
   Scene C (on every lead), Scene D (proof counter) and the
   shared scroll reveal.

   Rules this file obeys, from Part 5 of the brief:
     - 300 to 700ms, cubic-bezier(0.22, 1, 0.36, 1).
     - Nothing bounces, spins, glows or flashes.
     - prefers-reduced-motion: reduce shows every FINAL state with
       no movement at all. Not faster. None.

   No :root block here on purpose: this file is concatenated after
   styles.css, which already declares the tokens. Every var() below
   carries a literal fallback so the file also stands on its own.
   ============================================================ */


/* ============================================================
   SCENE A — Hero: the Overview view settles in
   Rebuilt for the real Overview page (brief 04 feedback, 30 Sep).
   The old version animated the ranked call list's .s1-* markup,
   which is no longer what the hero shows.

   Everything here is out of flow or opacity-only, so the scene
   cannot move a single pixel of layout: CLS stays at zero.

   --moA is the master time multiplier. 1 on desktop, 0.7 on
   mobile, which is the brief's "all timings 30% faster".
   ============================================================ */
[data-scene="a"]{ --moA:1; }
@media (max-width:760px){ [data-scene="a"]{ --moA:.7; } }

/* --- the gold progress bar, 0 to 1.2s ----------------------
   It lives in the 0.9em gap under the day line and fades out once
   the view has landed, so its space is reserved from first paint. */
[data-scene="a"] .ov-bar{
  animation:moA-bar calc(var(--moA) * 1.4s) linear both;
}
[data-scene="a"] .ov-bar i{
  animation:moA-fill calc(var(--moA) * 1.2s) linear both;
}
@keyframes moA-bar{ 0%,85.7%{opacity:1} 100%{opacity:0} }
@keyframes moA-fill{ from{width:0} to{width:100%} }

/* --- the "Reading your contacts and your market..." line ----
   app.js puts .mo-a-load inside .ov-line and adds .mo-load to it.
   The real words stay in the DOM the whole time, just not painted,
   so the line keeps its exact height and nothing below it moves. */
[data-scene="a"] .ov-line{ position:relative; }
[data-scene="a"] .ov-line.mo-load{ visibility:hidden; }
[data-scene="a"] .mo-a-load{
  visibility:visible;
  position:absolute; left:0; top:0; right:0;
  font-size:1em; line-height:inherit;
  color:var(--s-faint,#6b7385);
}

/* --- the three blocks landing: 1.4s, 1.7s, 2.0s ------------
   The nudge, then the four tiles, then the two cards. */
[data-scene="a"] [data-a="row"]{
  animation:moA-row calc(var(--moA) * .5s)
            var(--ease,cubic-bezier(.22,1,.36,1)) both;
}
[data-scene="a"] [data-a="row"]:nth-of-type(1){ animation-delay:calc(var(--moA) * 1.4s) }
[data-scene="a"] [data-a="row"]:nth-of-type(2){ animation-delay:calc(var(--moA) * 1.7s) }
[data-scene="a"] [data-a="row"]:nth-of-type(3){ animation-delay:calc(var(--moA) * 2s) }
@keyframes moA-row{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}

/* --- the soft 1px gold outline on the button, at 3.2s ------
   box-shadow, not outline, so it cannot nudge the layout. Spread
   stays at 1px and only the ink fades up and back down: it settles,
   it does not flash or glow. */
[data-scene="a"] [data-a="cta"]{
  animation:moA-cta calc(var(--moA) * .6s)
            var(--ease,cubic-bezier(.22,1,.36,1)) calc(var(--moA) * 3.2s) both;
}
@keyframes moA-cta{
  0%       { box-shadow:0 0 0 1px rgba(201,168,76,0) }
  22%, 78% { box-shadow:0 0 0 1px rgba(201,168,76,.9) }
  100%     { box-shadow:0 0 0 1px rgba(201,168,76,0) }
}


/* ============================================================
   SCENE B — Product tour
   ============================================================ */

/* The thin gold line that slides across to the active tab.
   .tabs is already position:relative in styles.css. */
.mo-tabline{
  position:absolute; left:0; bottom:-9px;
  height:2px; width:0;
  background:var(--gold,#c9a84c);
  border-radius:2px;
  transform:translateX(0);
  transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1)),
             width .4s var(--ease,cubic-bezier(.22,1,.36,1)),
             opacity .3s var(--ease,cubic-bezier(.22,1,.36,1));
  pointer-events:none;
  opacity:0;
}
.mo-tabline.is-on{ opacity:1 }
/* No tabs below 980px: styles.css stacks every panel instead. */
@media (max-width:980px){ .mo-tabline{ display:none } }



/* ============================================================
   SCENE C — On every lead
   A soft gold highlight follows the five numbered points.
   Desktop only: below 980px the card sits above the list and the
   brief says no highlighting at all.

   The 2px gold left border is an INSET box-shadow, and the side
   gutter is reserved from the first paint with a matching negative
   margin, so lighting a block never moves a word.
   ============================================================ */
.scr-6 [data-c]{
  transition:background-color .45s var(--ease,cubic-bezier(.22,1,.36,1)),
             box-shadow .45s var(--ease,cubic-bezier(.22,1,.36,1));
}
.scr-6 [data-c="who"],
.scr-6 [data-c="whyyou"],
.scr-6 [data-c="whynow"]{
  margin-inline:-.7em;
  padding-inline:.7em;
  padding-block:.34em;
  border-radius:.4em;
}
.scr-6 [data-c="who"]{ margin-block:-.34em }

.scr-6 [data-c="who"].mo-lit,
.scr-6 [data-c="whyyou"].mo-lit,
.scr-6 [data-c="whynow"].mo-lit{
  background:var(--s-gold-tint,#faf4e2);
  box-shadow:inset 2px 0 0 0 var(--s-gold,#c9a84c);
}
/* The two buttons keep their own fill (a gold tint over the navy
   primary would put white text on cream). They take the 2px gold
   left border plus a matching gold ring, which reads as the same
   highlight without breaking the button. Flagged in the report. */
.scr-6 .scr-btn[data-c].mo-lit{
  box-shadow:inset 2px 0 0 0 var(--s-gold,#c9a84c),
             0 0 0 2px rgba(201,168,76,.55);
}
.scr-6 .scr-btn[data-c="next"].mo-lit{
  background:var(--s-gold-tint,#faf4e2);
}
/* The numbered points themselves are NOT dimmed or moved. The brief
   highlights the card, and only the card. styles.css ships an
   opacity transition on .lead__list li; it is left unused. */


/* ============================================================
   SCENE D — Proof strip counter
   629 counts up once. The digits sit in a fixed-width inline-block
   with tabular figures, so 0 and 629 occupy the same box and the
   number never nudges its label.
   ============================================================ */
.mo-num{
  display:inline-block;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  text-align:center;
}


/* ============================================================
   REDUCED MOTION
   Every final state, present, with no movement at all.
   These rules also have to beat screens.css's
   `.scr *{animation:none!important}` under the same query, which
   would otherwise strand the Scene A rows at opacity 0.
   ============================================================ */
@media (prefers-reduced-motion:reduce){

  /* Scene A: every block of the Overview present. The progress bar
     and the CTA outline are passing states, not final ones, so
     they are simply not there. */
  [data-scene="a"] .ov-bar{ display:none!important; animation:none!important }
  [data-scene="a"] [data-a="row"]{
    opacity:1!important; transform:none!important; animation:none!important;
  }
  [data-scene="a"] [data-a="cta"]{ box-shadow:none!important; animation:none!important }
  [data-scene="a"] .ov-line.mo-load{ visibility:visible!important }
  [data-scene="a"] .mo-a-load{ display:none!important }

  /* Scene B: no sliding line. There is no auto-advance to suppress. */
  .mo-tabline{ display:none!important }

  /* Scene C: no highlight travels, because nothing may move. */
  .scr-6 [data-c]{ transition:none!important }

  /* Scene D: the number is just 629. */
  .mo-num{ min-width:0!important }
}