/* =====================================================================
   Vuyo — design foundation (warm mirror of Zicy Phase 1)
   Identical structure, tokens, fonts, spacing, radii, shadows, motion
   and components as zicy.com/src/styles/theme.css. Only the colors
   change: every cool hue is mapped to its warm opposite at the same
   saturation and lightness (sky blue -> peach, blue -> amber; the
   violet family sits on terracotta 25deg, the magenta family on
   crimson 355deg, so the whole palette stays warm). Semantic
   truth-signal colors (ok / warn / flag) are unchanged.
   Tokens + base/global CSS + frame components (header, hero, footer).
   Interior section components (cards, metrics, bands, loops, tiers, etc.)
   are kept so existing pages keep their structural layout while inheriting
   the new tokens via the compat aliases below. Their final component
   styles arrive in Phase 2.
   ===================================================================== */

:root{
  /* neutrals — warm sand */
  --paper:#FBFAF7; --mist:#F5F2ED; --surface:#FFFFFF;
  --ink:#1F1915; --ink-2:#686251; --muted:#7E796A;
  --line:#EEEBE4; --canvas:#2A1D13;

  /* brand — warm mirror of the Zicy logo facets */
  --sky:#EBA583; --sky-300:#F4C8B4; --sky-700:#C2713E; --blue:#C99457;
  --violet-50:#F8F5F3; --violet-100:#F0E8E3; --violet-300:#DAC7B9;
  --violet:#AC8163;       /* PRIMARY: buttons, fills */
  --violet-700:#755843;   /* text + links on light (AA) */
  --violet-900:#413126;
  --magenta-300:#D6A8AC; --magenta:#AA5E64; --magenta-700:#774246;
  --grad:linear-gradient(110deg,#EBA583 0%,#AC8163 52%,#AA5E64 100%);

  /* truth-signal — semantic only */
  --ok:#0E9F6E; --ok-text:#0B6B4B; --ok-bg:#E2F4EC;
  --warn:#B7791F; --warn-text:#7A5212; --warn-bg:#F6ECD9;
  --flag:#D6453B; --flag-text:#9E2C24; --flag-bg:#FBE5E3;

  /* type */
  --fd:'Fraunces Variable','Fraunces',Georgia,serif;
  --fs:'Inter Tight',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;

  /* shape, motion, elevation */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --ease:cubic-bezier(.22,.7,.26,1); --dur:.62s;
  --shadow:0 18px 40px rgba(42,29,19,.08);
  /* spacing scale (8pt): 4 8 12 16 24 32 48 64 96 128 */

  /* --------------------------------------------------------------
     Backward-compatibility aliases — Phase 1 keeps interior pages
     rendering while their final component styles wait for Phase 2.
     These map the OLD token names onto the new Phase 1 palette so
     nothing renders unstyled. Phase 2 will refactor these out.
     -------------------------------------------------------------- */
  --indigo: var(--violet-700);
  --indigo-bright: var(--violet);
  --lavender: var(--mist);
  --orange: var(--violet-700);
  --white: var(--surface);
  --line-2: rgba(31,25,21,0.16);
  --green: var(--ok);
  --red: var(--flag);
  --amber: var(--warn);
  --display: var(--fd);
  --body: var(--fs);
  --mono: var(--fm);
  --max: 1200px;

  /* Vuyo warm-named aliases (same values; token names above kept
     identical to Zicy so every component style works unchanged) */
  --peach: var(--sky); --peach-300: var(--sky-300); --peach-700: var(--sky-700);
  --amber: var(--blue);
  --terracotta: var(--violet); --terracotta-700: var(--violet-700); --terracotta-900: var(--violet-900);
  --crimson: var(--magenta); --crimson-300: var(--magenta-300); --crimson-700: var(--magenta-700);
}

/* ===== base reset ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fs);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ===== focus + selection + reduced motion ===== */
*:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:rgba(172,129,99,.22)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* Accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--violet);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:500;font-size:14px}
.skip-link:focus{left:0}

/* Accessibility: visually-hidden (screen-reader-only) utility */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== type ===== */
h1,h2,h3,h4{font-optical-sizing:auto;text-wrap:balance;color:var(--ink);font-family:var(--fd);font-weight:500;letter-spacing:-.01em;line-height:1.08}
h1{font-weight:500;letter-spacing:-.025em;line-height:1.02}
h2{font-family:var(--fd);font-weight:500;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.01em}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums slashed-zero}
.sub{color:var(--ink-2);font-size:18px;max-width:62ch}

/* eyebrow — small mono micro-label with tick */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--fm);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-700)}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--violet-300)}
.eyebrow .ix{color:var(--violet)}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fs);font-weight:500;font-size:15px;border-radius:10px;padding:12px 22px;transition:background .18s var(--ease),transform .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);border:1px solid transparent;cursor:pointer}
.btn-p,.btn-primary{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn-p:hover,.btn-primary:hover{background:var(--violet-700);border-color:var(--violet-700);transform:translateY(-1px)}
.btn-o,.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-o:hover,.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-t{border-color:var(--violet-300);color:var(--violet-700);background:transparent}
.btn-t:hover{background:var(--violet-50)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-lg{padding:14px 26px;font-size:15.5px}

/* ===== sections + motion (interior sections inherit these in Phase 1) ===== */
section{padding:clamp(24px,3vw,36px) 0}
.rule{border:0;border-top:1px solid var(--line)}
.shead{max-width:62ch;margin-bottom:48px}
.shead h2{margin-top:14px}
.shead p{margin-top:14px;color:var(--ink-2)}
.rise{opacity:0;transform:translateY(16px);animation:rise var(--dur) var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===== HEADER / NAV ===== */
header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);overflow:visible}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;max-width:1200px;margin:0 auto;padding:0 28px;overflow:visible}
/* width crops the nav lockup down to "VUYO" (the source PNG bakes in ".com"
   after it); the mask-image fade over the last few percent guarantees no
   trace of the ".com" dot survives image scaling even at sub-pixel edges,
   rather than relying on a single exact crop pixel. Mobile's matching width
   override lives in each page's own <style> block next to the existing
   height:46px rule. */
.logo{display:inline-flex;align-items:center;line-height:0;overflow:hidden;width:195px}
.nav img,.logo img,.logo svg{height:72px;width:auto;max-width:none;display:block;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 79%,transparent 80.5%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 79%,transparent 80.5%,transparent 100%)}

.links{display:flex;align-items:center;gap:22px}
/* :not(.btn) so this generic nav-link color/underline styling doesn't
   override .btn-p's white text on the CTA — the plain-link rule (0,2,1
   specificity: .links + :not(.cta) + a) otherwise beats .btn-p (0,1,0),
   leaving dark ink-2 text on the CTA's terracotta background (poor
   contrast). Same fix already applied to .mnav-panel a below. */
.links a:not(.cta):not(.btn){font-size:15px;color:var(--ink-2);transition:color .15s;position:relative;font-family:var(--fs);font-weight:500}
.links a:not(.cta):not(.btn)::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.links a:not(.cta):not(.btn):hover,.links a:not(.cta):not(.btn).active{color:var(--ink)}
.links a:not(.cta):not(.btn):hover::after,.links a:not(.cta):not(.btn).active::after{transform:scaleX(1)}
.links .cta{background:var(--violet);color:#fff;padding:9px 18px;border-radius:9px;font-size:15px;font-weight:500;transition:background .15s var(--ease)}
.links .cta:hover{background:var(--violet-700)}
/* Mobile (<=860px): the <details> hamburger handles all primary navigation.
   - Hide direct anchor children of .links (Home / About / Platform / Pricing / Case Studies).
   - Hide the .has-dropdown wrappers (Solutions / Free tools triggers) so their
     <span class="trigger"> children don't leak past the right viewport edge.
   - Belt-and-braces: force .dropdown panels to display:none. They were hidden via
     opacity:0;visibility:hidden, but visibility:hidden keeps the position:absolute
     panel in the layout, contributing min-width:260px to document.scrollWidth and
     causing a 138 px horizontal overflow at 375 px viewport. */
/* Collapse the desktop nav to the hamburger at <=1080px. With eight top-level items, two
   dropdowns, the Log in link and the CTA, the full row no longer fits below ~1080px and would
   wrap / overflow, so the <details> menu takes over earlier. (Page-content grids still
   collapse at 860px below.) */
@media(max-width:1080px){
  .links > a:not(.cta),
  .links .has-dropdown,
  .dropdown{display:none}
}

/* dropdown — crawlable links live in the DOM; CSS toggles open state */
.has-dropdown{position:relative}
.has-dropdown>.trigger{display:inline-flex;align-items:center;gap:5px;font-size:15px;color:var(--ink-2);font-weight:500;cursor:default;background:none;border:none;font-family:var(--fs);position:relative;transition:color .15s}
.has-dropdown>a.trigger{cursor:pointer}
.has-dropdown>.trigger .car{font-size:10px;color:var(--muted)}
.has-dropdown:hover>.trigger,.has-dropdown:focus-within>.trigger{color:var(--ink)}
.has-dropdown>.trigger.active{color:var(--ink)}
.has-dropdown>.trigger::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:var(--violet);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.has-dropdown:hover>.trigger::after,.has-dropdown:focus-within>.trigger::after,.has-dropdown>.trigger.active::after{transform:scaleX(1)}
.dropdown{position:absolute;top:100%;left:0;margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:8px;min-width:260px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{padding:10px 12px;border-radius:7px;font-size:14px;color:var(--ink-2);white-space:nowrap;font-weight:500}
.dropdown a:hover,.dropdown a.active{background:var(--violet-50);color:var(--violet-700)}

/* Mobile menu (native <details> — no JS) */
.mnav{display:none;position:relative}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--surface)}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::marker{content:""}
.mnav .i-close{display:none}
.mnav[open] summary{border-color:var(--violet)}
.mnav[open] .i-open{display:none}
.mnav[open] .i-close{display:inline}
/* max-height is capped to the VISIBLE viewport so the last items (Log in / Try for free) are
   never cut off behind the mobile browser toolbar. 100dvh tracks the dynamic viewport (vh is the
   LARGE viewport on mobile, which hides content behind the toolbar); env(safe-area-inset-bottom)
   clears the iOS home indicator. The ~104px subtracted ≈ the panel's top offset (header + gap)
   plus a bottom breathing margin. The vh line is a fallback for browsers without dvh. */
.mnav-panel{position:absolute;right:0;top:calc(100% + 12px);background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:10px 10px 14px;width:min(86vw,320px);max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px - env(safe-area-inset-bottom, 0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:2px}
/* :not(.btn) so the generic nav-link colour does NOT override the .btn-p / .btn-o button
   styles — without it, .mnav-panel a (specificity 0-1-1) beat .btn-p (0-1-0) and the
   "Try for free" button rendered dark --ink-2 text on violet instead of white. */
.mnav-panel a:not(.btn){padding:11px 12px;border-radius:8px;font-size:15px;color:var(--ink-2);font-weight:500}
.mnav-panel a:not(.btn):hover,.mnav-panel a:not(.btn).active{background:var(--violet-50);color:var(--violet-700)}
.mnav-panel .mnav-group{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 12px 4px}
.mnav-panel .btn{margin-top:12px;justify-content:center}
/* Show the hamburger at <=1080px. MUST come after the base ".mnav{display:none}" rule above —
   equal specificity, so source order decides; placing it earlier let the base rule win and the
   menu disappeared. */
@media(max-width:1080px){.mnav{display:block}}

/* ===== HOMEPAGE HERO (asymmetric, measurement grid atmosphere) ===== */
.hero{position:relative;overflow:hidden;padding:clamp(72px,11vw,128px) 0 clamp(64px,8vw,104px);background:radial-gradient(120% 80% at 82% -10%,#F8F4EA 0%,var(--paper) 58%)}
.grid-field{position:absolute;inset:0;z-index:0;background-image:repeating-linear-gradient(90deg,rgba(42,29,19,.045) 0 1px,transparent 1px 92px);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);mask-image:linear-gradient(to bottom,#000,transparent 72%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(42px,6.6vw,74px);max-width:15ch;margin:18px 0 22px;font-weight:500}
.hero .sub{font-size:clamp(17px,2vw,20px)}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 38px}
.engines{font-family:var(--fm);font-size:12.5px;letter-spacing:.04em;color:var(--muted)}
.engines b{color:var(--ink);font-weight:500}
.engines .cap{display:block;margin-top:8px;font-family:var(--fs);font-size:13px;letter-spacing:0;color:var(--ink-2)}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.hcard{display:none}}

/* hero product card */
.hcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.hc-top{padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.hc-q{display:block;font-family:var(--fm);font-size:13.5px;color:var(--ink-2)}
.hc-rows{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.hc-row{display:flex;align-items:center;gap:10px;font-size:14px}
.hc-row .eng{font-weight:500}
.hc-tag{margin-left:auto;font-family:var(--fm);font-size:11px;padding:3px 9px;border-radius:var(--r-pill)}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.flag{background:var(--flag)}
.hc-tag.ok{background:var(--ok-bg);color:var(--ok-text)} .hc-tag.warn{background:var(--warn-bg);color:var(--warn-text)} .hc-tag.flag{background:var(--flag-bg);color:var(--flag-text)}
.hc-score{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}
.hc-lab{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.hc-num{font-family:var(--fm);font-size:30px;font-weight:500;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums slashed-zero;color:var(--ink)}
.hc-num span{font-size:14px;color:var(--muted)}
.hc-ring{position:relative;width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--ok) 0 331deg,var(--line) 331deg 360deg)}
.hc-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--surface)}

/* inner-page hero (non-homepage) — keep simple per Phase 2 plan */
.hero.inner{padding:clamp(40px,5vw,64px) 0 clamp(40px,5vw,56px);background:var(--paper)}
.hero.inner h1{font-size:clamp(34px,4.5vw,48px);max-width:760px}

/* ===== FOOTER (dark canvas, 5 cols, 3px grad rule, social, contact) ===== */
footer{background:var(--canvas);color:#DECEC3;position:relative;overflow:hidden;padding:0}
footer .gtop{height:3px;background:var(--grad);width:100%}
.fgrid{position:relative;z-index:2;display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:36px;padding:64px 28px 40px;max-width:1200px;margin:0 auto}
/* Sized and cropped to match Growth.pro's compact footer wordmark treatment.
   The source PNG bakes in ".com" after "VUYO". A hard overflow crop alone
   left a visible sliver of the "." dot at the edge (image scaling blurs
   neighbouring pixels together), so the mask-image fade below guarantees
   the last few percent are fully transparent regardless of that blur,
   same technique as the nav logo above. */
footer .flogo{display:inline-block;margin-bottom:16px;width:146px;height:36px;overflow:hidden}
/* max-width:none overrides the global img{max-width:100%} reset (line 82) —
   without it the image would be squeezed to the crop width instead of
   rendering at its natural aspect ratio and simply overflowing into the
   hidden region. */
footer .flogo img,footer .flogo svg{display:block;height:36px;width:auto;max-width:none;-webkit-mask-image:linear-gradient(to right,#000 0%,#000 69%,transparent 71.5%,transparent 100%);mask-image:linear-gradient(to right,#000 0%,#000 69%,transparent 71.5%,transparent 100%)}
footer .ftagline{font-size:14px;color:#C4A792;max-width:30ch;margin-bottom:18px;line-height:1.55}
footer h4{font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#A08978;margin-bottom:16px;font-weight:500}
footer ul{list-style:none;margin:0;padding:0}
footer li{list-style:none;margin-bottom:2px}
/* display:inline-block + padding so the tap target is a real ~32px box on
   touch devices, not just the 14.5px text line (was failing WCAG 2.2's
   24px minimum target size). */
footer li a{display:inline-block;padding:7px 0;font-size:14.5px;color:#DECEC3;transition:color .15s var(--ease)}
footer li a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.16);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#DECEC3;transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease)}
.social a:hover{color:#fff;border-color:var(--violet);background:rgba(172,129,99,.25);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}
.contact{margin-top:20px;font-size:13.5px;line-height:1.7;color:#C4A792;font-style:normal}
.fbot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.09);padding:22px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#AC9686;max-width:1200px;margin:0 auto}
.fbot a{color:inherit}
.fbot a:hover{color:#fff}
.fbot .cc-reopen{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}
.fbot .cc-reopen:hover{color:#fff}
.spam{font-size:12px;color:#927A69}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

/* =====================================================================
   INTERIOR PAGE COMPONENTS — kept for Phase 2 refactor.
   These inherit the new tokens through the compat aliases above so
   existing pages keep their layout and pick up new fonts/colours
   automatically. Full component restyle lands in Phase 2.
   ===================================================================== */

.muted{color:var(--muted)}
.lead{font-size:19px;color:var(--ink-2);max-width:620px}
.proofbar{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.proofbar .engines{font-family:var(--fm);font-size:13px;color:var(--violet-700);letter-spacing:.02em}
.proofbar .tag{font-size:13px;color:var(--muted)}
.provenance{margin-top:14px;font-size:13.5px;color:var(--muted)}
.provenance b{color:var(--violet-700);font-weight:500}
.cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
.metric{background:var(--violet-50);border-radius:12px;padding:20px 22px}
.metric .n{font-family:var(--fm);font-size:34px;color:var(--violet-700);line-height:1;font-variant-numeric:tabular-nums slashed-zero}
.metric .n.r{color:var(--flag)} .metric .n.g{color:var(--ok)}
.metric .l{font-size:13px;color:var(--muted);margin-top:8px}

.loop{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:36px;background:var(--surface)}
.loop .step{padding:26px 22px;border-right:1px solid var(--line);background:var(--surface)}
.loop .step:last-child{border-right:none}
.loop .step .k{font-family:var(--fm);font-size:13px;color:var(--violet-700)}
.loop .step h3{font-size:20px;margin:10px 0 8px}
.loop .step p{font-size:14px;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-radius:14px;padding:28px;transition:border-color .15s,transform .15s;background:var(--surface)}
.card:hover{border-color:rgba(31,25,21,0.16);transform:translateY(-2px)}
.card .eyebrow{margin-bottom:12px;display:inline-flex}
.card h3{font-size:23px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-2)}
.card .link{margin-top:16px;display:inline-block;font-weight:500;font-size:14px;color:var(--violet-700)}
.card .link:hover{color:var(--violet)}

.shot{border:1.5px dashed rgba(31,25,21,0.16);border-radius:12px;background:repeating-linear-gradient(135deg,#FFFCFA,#FFFCFA 11px,#FBF7F4 11px,#FBF7F4 22px);min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.shot span{font-family:var(--fm);font-size:12.5px;color:#A09389;letter-spacing:.02em;line-height:1.7}

.screenshot{margin:0;border:1px solid rgba(31,25,21,0.16);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.screenshot .chrome{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;border-bottom:1px solid var(--line);background:#fafafa}
.screenshot .chrome span{width:10px;height:10px;border-radius:50%;background:rgba(31,25,21,0.16)}
.screenshot img{display:block;width:100%;height:auto}
.screenshot figcaption{padding:14px 18px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);font-family:var(--fm);letter-spacing:.01em}

.band{background:var(--violet-50);color:var(--ink)}
.band h2{color:var(--ink);font-size:36px}
.band .lead{color:var(--ink-2)}
.band .eyebrow{color:var(--violet-700)}

.diverge{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.diverge>div{padding:30px 28px}
.diverge .old{background:#fafafa;border-right:1px solid var(--line)}
.diverge h3{font-size:16px;margin-bottom:16px}
.diverge .old h3{color:var(--muted)}
.diverge ul{list-style:none;font-size:15px}
.diverge li{padding:7px 0;color:var(--ink-2)}
.diverge li::before{content:"—";color:var(--violet-700);margin-right:10px}

.note{border-left:3px solid var(--warn);background:var(--warn-bg);border-radius:0 8px 8px 0;padding:12px 16px;font-size:13px;color:var(--warn-text);margin:18px 0;font-family:var(--fm);line-height:1.7}
.note b{color:var(--warn-text)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--surface)}
.tier.feat{border:2px solid var(--violet)}
.tier .price{font-family:var(--fm);font-size:34px;color:var(--violet-700);margin:10px 0;font-variant-numeric:tabular-nums slashed-zero}
.tier .badge{display:inline-block;background:var(--violet-100);color:var(--violet-700);font-size:12px;font-weight:500;padding:4px 11px;border-radius:7px;margin-bottom:14px}
.tier ul{list-style:none;margin:18px 0;font-size:14px}
.tier li{padding:6px 0;color:var(--ink-2);border-bottom:1px solid var(--line)}

.caserow{border:1px solid var(--line);border-radius:14px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;transition:border-color .15s;gap:16px;background:var(--surface)}
.caserow:hover{border-color:rgba(31,25,21,0.16)}
.caserow .meta{font-family:var(--fm);font-size:12px;color:var(--violet-700);letter-spacing:.08em;text-transform:uppercase}
.caserow .big{font-family:var(--fm);font-size:28px;color:var(--violet-700);font-variant-numeric:tabular-nums slashed-zero}
.disclosure{font-size:12px;color:#A89F99;font-style:italic;margin-top:18px;max-width:680px}

/* Module group list (Platform full module set) */
.modlist{list-style:none}
.modlist li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.modlist li:last-child{border-bottom:none}
.modlist b{display:block;color:var(--ink);font-weight:500;font-family:var(--fd);font-size:15.5px;margin-bottom:3px}

/* FAQ */
.faq-item{border-top:1px solid var(--line);padding:24px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:18px;margin-bottom:8px}
.faq-item p{color:var(--ink-2);font-size:15px}

/* Checklist (what you get / why choose) */
.checklist{list-style:none;max-width:640px}
.checklist li{padding:13px 0 13px 30px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--ink)}
.checklist li b{color:var(--ink);font-weight:500}
.checklist li::before{content:"✓";position:absolute;left:0;top:13px;color:var(--ok);font-weight:500;font-family:var(--fm)}

/* Forms */
label.fld{display:block;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:6px}
/* font-size is 16px, not 15px: anything under 16px makes iOS Safari
   auto-zoom the page when the field is focused. */
.input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font-family:var(--fs);font-size:16px;margin-bottom:14px;background:var(--surface);color:var(--ink)}
.input:focus{outline:none;border-color:var(--violet)}
.formcard{border:1px solid var(--line);border-radius:14px;padding:30px;background:var(--surface);max-width:460px}

/* Article body (case detail / legal) */
.prose{max-width:680px}
.prose h2{font-size:24px;margin:34px 0 12px}
.prose h3{font-size:19px;margin:28px 0 10px;color:var(--ink)}
.prose p{font-size:16.5px;color:var(--ink);margin-bottom:16px}
.pullquote{font-family:var(--fd);font-size:24px;color:var(--ink);font-weight:500;line-height:1.25;border-left:3px solid var(--violet);padding:6px 0 6px 22px;margin:30px 0;max-width:680px}

/* Imported WordPress case-study bodies: lists, links, charts. */
.cs-body ul,.cs-body ol{margin:0 0 16px;padding-left:24px}
.cs-body li{font-size:16.5px;color:var(--ink);margin-bottom:7px;line-height:1.55}
.cs-body ul ul,.cs-body ol ol,.cs-body ul ol,.cs-body ol ul{margin:7px 0 0}
.cs-body strong{font-weight:600}
.cs-body a{color:var(--violet-700);text-decoration:underline;text-underline-offset:2px}
.cs-body a:hover{color:var(--violet-900)}
.cs-body img{display:block;width:100%;height:auto;margin:24px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.cs-body p:has(> img){margin:0}
.cs-body h2:first-child,.cs-body p:first-child{margin-top:0}

/* Responsive breakpoints (mobile).
   Removed dead .navlinks / .navcta rules (those classes don't exist in the Phase 1
   nav — the actual mobile-hide rules for the current .links nav live in the
   header CSS above). */
@media(max-width:860px){
  .shead h2{font-size:30px}
  .metrics,.loop,.grid-3,.tiers{grid-template-columns:1fr}
  .grid-2,.diverge{grid-template-columns:1fr}
  /* .loop's border-right separated side-by-side columns; stacked to one
     column it left a stray vertical line down each card with no separator
     between them, so swap to a bottom border instead. */
  .loop .step{border-right:none;border-bottom:1px solid var(--line)}
  .loop .step:last-child{border-bottom:none}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .nav{padding:0 16px}
}

/* =====================================================================
   PHASE 2 — interior components, screenshot system, mock app frame.
   Builds on Phase 1 tokens. Where these share a class name with
   Phase 1 interior components (.card, .shot), this later block wins
   by source-order specificity and replaces the earlier definition.
   ===================================================================== */

/* ----- §2 section eyebrow indices (editorial spine) ----- */
.eyebrow .ix{color:var(--violet);font-family:var(--fm);font-weight:500;margin-right:2px}

/* ----- §3 interior components ----- */

/* generic card (Phase 2 spec) — overrides Phase 1 .card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{border-color:var(--violet-300);transform:translateY(-3px);box-shadow:var(--shadow)}
.card .k{font-family:var(--fm);font-size:13px;color:var(--violet-700);font-weight:500;letter-spacing:0;text-transform:none;display:block}
.card h3{font-family:var(--fd);font-weight:500;font-size:21px;margin:14px 0 10px;letter-spacing:-.01em;color:var(--ink)}
.card p{font-size:14.5px;color:var(--ink-2)}
.card .arrow{margin-top:18px;display:inline-block;font-size:14px;font-weight:500;color:var(--violet-700)}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

/* stat block */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 32px}
.stat .n{font-family:var(--fm);font-variant-numeric:tabular-nums slashed-zero;font-weight:500;font-size:clamp(44px,6vw,64px);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.stat .t{margin-top:14px;font-size:16px;color:var(--ink-2);max-width:34ch}
.stat .s{margin-top:16px;font-family:var(--fm);font-size:11.5px;color:var(--muted);line-height:1.5}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:680px){.stats{grid-template-columns:1fr}}

/* truth band (white surface) */
.truth{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px;margin-top:44px}
.three .bar{width:36px;height:4px;border-radius:2px;background:var(--grad);margin-bottom:18px}
.three h3{font-family:var(--fd);font-weight:500;font-size:20px;margin-bottom:10px;color:var(--ink);letter-spacing:-.01em}
.three p{font-size:15px;color:var(--ink-2)}

/* proof band (deep iris canvas) */
.proof{background:var(--canvas);color:#F6EFEA;text-align:center}
.proof .n{font-family:var(--fm);font-variant-numeric:tabular-nums slashed-zero;font-weight:500;font-size:clamp(56px,11vw,118px);letter-spacing:-.04em;line-height:.95;color:#fff}
.proof .gbar{width:200px;height:6px;border-radius:3px;background:var(--grad);margin:26px auto 22px}
.proof .lab{font-family:var(--fm);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#C4A792}
.proof .pnote{max-width:60ch;margin:22px auto 0;font-size:14px;color:#C4A792;line-height:1.55}

/* final CTA */
.final{text-align:center}
.final h2{font-size:clamp(32px,5vw,52px);color:var(--ink)}
.final p{margin:16px auto 30px;color:var(--ink-2);font-size:18px;max-width:46ch}
.final .hcta{justify-content:center}

/* pricing card featured state */
.card.featured{border:2px solid var(--violet-300);position:relative}
.badge{display:inline-block;background:var(--violet-50);color:var(--violet-700);font-family:var(--fm);font-size:12px;padding:4px 12px;border-radius:var(--r-pill);font-weight:500;letter-spacing:.02em}

/* ----- §4 screenshot / product-UI system ----- */

/* Real product frame — Phase 2 replaces the Phase 1 dashed placeholder. */
.shot{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.shot img{display:block;width:100%;height:auto}
.shot-cap{font-size:13px;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.shot-cap .mono{color:var(--violet-700)}
.callout{position:absolute;font-family:var(--fm);font-size:11px;padding:5px 11px;border-radius:var(--r-pill);box-shadow:var(--shadow);z-index:3}
.callout.ok{background:var(--ok-bg);color:var(--ok-text)}
.callout.flag{background:var(--flag-bg);color:var(--flag-text)}

/* Embed placeholder — preserves the dashed-frame pattern the Phase 1
   .shot used to provide (for the consultant page's "[ EMBED ]" block). */
.embed-frame{border:1.5px dashed rgba(31,25,21,0.16);border-radius:var(--r-md);background:repeating-linear-gradient(135deg,#FFFCFA,#FFFCFA 11px,#FBF7F4 11px,#FBF7F4 22px);min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.embed-frame span{font-family:var(--fm);font-size:12.5px;color:#A09389;letter-spacing:.02em;line-height:1.7}

/* Layout patterns — rotate across screenshot-heavy pages */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* align-items:start so a screenshot in the right column tops-aligns with the section header
   in the left column (the proof layer puts header + intro + bullets on the left). */
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:760px){.bento{grid-template-columns:1fr}.feature-split{grid-template-columns:1fr;gap:28px}}

/* Mock app frame (placeholders only — for the homepage showcase) */
.app-bar{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.app-bar .mk{width:22px;height:22px;border-radius:6px;background:var(--grad);flex:none}
.app-bar .wm{font-family:var(--fd);font-weight:500;letter-spacing:-.01em;font-size:15px;color:var(--ink)}
.app-bar .tabs{margin-left:20px;display:flex;gap:18px;color:var(--muted);font-size:12.5px;flex-wrap:wrap}
.app-bar .tabs .on{color:var(--ink);font-weight:500}
.app-bar .me{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--violet-100);flex:none}
.app-body{display:grid;grid-template-columns:176px 1fr}
.app-side{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px;background:var(--paper)}
.app-side .ni{padding:8px 11px;border-radius:8px;color:var(--ink-2);font-size:13px}
.app-side .ni.on{background:var(--violet-100);color:var(--violet-700);font-weight:500}
.app-main{padding:22px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.kpi .l{font-size:10.5px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-family:var(--fm)}
.kpi .v{font-family:var(--fm);font-variant-numeric:tabular-nums slashed-zero;font-size:23px;font-weight:500;letter-spacing:-.02em;margin-top:7px;color:var(--ink)}
.kpi .dlt{font-size:11px;margin-top:4px;color:var(--ok-text);font-family:var(--fm)}
.two{display:grid;grid-template-columns:1.45fr 1fr;gap:12px}
.panel{border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--paper)}
.panel h5{font-size:12.5px;font-weight:500;color:var(--ink)}
.panel .sx{font-size:11px;color:var(--muted);margin:2px 0 12px;font-family:var(--fm)}
.bars{display:flex;flex-direction:column;gap:10px}
.br-r{display:flex;align-items:center;gap:10px;font-size:12px}
.br-r .nm{width:88px;color:var(--ink-2);font-family:var(--fs)}
.br-r .tk{flex:1;height:7px;border-radius:4px;background:var(--mist);overflow:hidden}
.br-r .tk i{display:block;height:100%;border-radius:4px;background:var(--violet)}
.br-r .pc{font-family:var(--fm);font-size:11px;color:var(--ink-2);width:34px;text-align:right;font-variant-numeric:tabular-nums slashed-zero}
@media(max-width:760px){.app-body{grid-template-columns:1fr}.app-side{display:none}.kpis{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}}

/* Section sub-row of truth-signal pills (reused in homepage bento card) */
.signals{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.signals .row{display:flex;align-items:center;gap:10px;font-size:13px}
.signals .row .lab{color:var(--ink-2)}

/* ----- FAQ accordion (native <details>/<summary>, zero-JS) ----- */
.faq{max-width:760px;margin:0 auto}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q:first-child{border-top:1px solid var(--line)}
.faq-q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 4px;font-family:var(--fd);font-weight:500;font-size:19px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::marker{content:""}
.faq-q summary:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.faq-q summary:hover{color:var(--violet-700)}
.faq-qt{flex:1 1 auto}
.faq-icon{flex:none;width:20px;height:20px;position:relative;margin-top:5px}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--violet-700);transition:transform .25s var(--ease)}
.faq-icon::before{top:9px;left:2px;right:2px;height:2px}
.faq-icon::after{left:9px;top:2px;bottom:2px;width:2px}
.faq-q[open] .faq-icon::after{transform:scaleY(0)}
.faq-a{padding:0 4px 24px;max-width:64ch}
.faq-a p{font-size:15.5px;color:var(--ink-2);line-height:1.65}
@media (prefers-reduced-motion:reduce){.faq-icon::before,.faq-icon::after{transition:none}}

/* ----- Comparison table (semantic <table>; stacks to labelled rows on mobile) ----- */
.ctable{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-top:8px}
.ctable th,.ctable td{padding:15px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.ctable thead th{font-family:var(--fd);font-weight:500;font-size:18px;color:var(--ink);letter-spacing:-.01em;background:var(--paper)}
.ctable thead th.col-feat{background:var(--violet-50)}
.ctable tbody th[scope="row"]{font-family:var(--fm);font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;width:1%}
.ctable tbody td{color:var(--ink-2)}
.ctable td.col-feat,.ctable tfoot td.col-feat{background:var(--violet-50);color:var(--ink)}
.ctable tr:last-child th,.ctable tr:last-child td{border-bottom:0}
.ctable .ct-cta{display:inline-block;margin-top:4px;font-weight:500;font-size:14px;color:var(--violet-700)}
.ctable .ct-cta:hover{color:var(--violet)}
@media(max-width:760px){
  .ctable thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .ctable,.ctable tbody,.ctable tfoot,.ctable tr,.ctable th,.ctable td{display:block;width:auto}
  .ctable tr{border-bottom:1px solid var(--line);padding:10px 0}
  .ctable tr:last-child{border-bottom:0}
  .ctable tbody th[scope="row"]{width:auto;padding:8px 18px 4px;color:var(--violet-700)}
  .ctable tbody td,.ctable tfoot td{border:0;padding:4px 18px}
  .ctable td.col-feat{background:transparent;color:var(--ink-2)}
  .ctable tbody td::before,.ctable tfoot td::before{content:attr(data-col);display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
}

/* ----- Founder signature block ("signed-by" partial, repeated verbatim
   on every page that asks for admin access or contact details, so the
   ask has a named, photographed person attached to it) ----- */
.signed-by{border-top:1px solid var(--line)}
.sb{max-width:640px}
.sb-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.sb-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.sb-who{font-weight:500;color:var(--ink);font-size:16px}
.sb-note{font-size:15.5px;color:var(--ink-2);margin-bottom:12px;max-width:60ch}
.sb-contact{font-size:14px;color:var(--ink-2);margin-bottom:6px}
.sb-contact a{color:var(--violet-700);font-weight:500}
.sb-contact a:hover{color:var(--violet)}
.sb-entity{font-size:12px;color:var(--muted)}