:root{
  /* Surfaces - widened gap between --bg and --surface (visual-audit.md's
     "Yüzey ayrımı" finding: was #f6f0e7/#fffdf9, both near-max lightness,
     cards barely read as separated from the page). Same beige family,
     just a real step apart now. */
  --bg:#edf2f1;
  --bg-soft:#F5F4EF;
  --surface:#FFFFFF;
  --surface-strong:#fff;
  --text:#132A2D;
  --text-secondary:#5D6B6D;
  --muted:#71817f;
  --border:#bcd7d2;
  --primary:#007C78;
  --primary-rgb:0,124,120;
  --primary-hover:#006965;
  --primary-active:#005854;
  --primary-soft:#edf8f6;
  --success:#15803D;
  --success-soft:#eaf6ee;

  /* Hero - the one deliberate dark tonal break; the rest of the page
     stays on --bg/--surface above. Near-black brown (not pure black) to
     stay in --primary's own family rather than reading as a generic
     dark-mode panel. */
  --hero-bg:#0B2F33;
  --hero-bg-rgb:11,47,51;
  --hero-text:#F5F4EF;
  --hero-text-rgb:245,244,239;
  --hero-text-secondary:#A8C4C0;
  --video-frame-bg:#12383C;

  /* Two shadow tiers - rest state was near-invisible (was a flat
     0 4px 16px at 8% opacity), cards didn't read as lifted off --bg.
     Hover stays a clear, larger jump. Tinted with --hero-bg's near-black
     brown rather than --primary's lighter one, for more depth. */
  --shadow-rest:0 1px 2px rgba(var(--hero-bg-rgb),.08),0 6px 20px rgba(var(--hero-bg-rgb),.10);
  --shadow-hover:0 4px 10px rgba(var(--hero-bg-rgb),.14),0 18px 44px rgba(var(--hero-bg-rgb),.20);

  /* Radius - collapsed from 10 distinct fixed-size values (visual-audit.md
     finding) to 3: pill controls, buttons/small icon boxes, everything
     else (cards, panels, media frames). Perfect circles (decorative
     blobs, icon badges) are a separate case - 50% isn't comparable to a
     fixed px value, so it gets its own token rather than being force-fit
     into one of the 3 or left as an untracked literal. */
  --radius-pill:999px;
  --radius-btn:8px;
  --radius-card:12px;
  --radius-circle:50%
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Poppins",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3,.brand{font-family:"Poppins",sans-serif}
h1{font-size:clamp(2.6rem,4.2vw,3.9rem);line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.04em}
h3{font-size:1.12rem;line-height:1.3}
:focus-visible{outline:3px solid rgba(11,47,51,.35);outline-offset:3px}

.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid transparent;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(18px)}
.nav.is-scrolled{border-color:var(--border);box-shadow:0 10px 30px rgba(38,34,30,.06)}
.nav__inner{max-width:1280px;height:72px;margin:auto;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand span,.preview-logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-btn);background:var(--primary);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(11,47,51,.2)}
.nav-menu{position:relative;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--border);border-radius:var(--radius-pill);background:rgba(255,253,249,.72);box-shadow:var(--shadow-rest);color:var(--text-secondary);font-size:.9rem;font-weight:600}
.nav-menu>a,.nav-link--capabilities{min-height:34px;padding:0 13px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font:inherit;cursor:pointer}
.nav-menu>a:hover,.nav-link--capabilities:hover,.nav-capabilities.is-open .nav-link--capabilities,.nav-capabilities:focus-within .nav-link--capabilities{background:var(--primary-soft);color:var(--primary)}
.nav-link--capabilities{display:inline-flex;align-items:center;gap:5px}
.nav-link--capabilities span{font-size:.78rem}
.nav-capabilities{position:relative}
.nav-hamburger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:38px;height:38px;padding:0;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);cursor:pointer}
.nav-menu-i18n{display:none}
.nav-hamburger span{display:block;width:18px;height:2px;border-radius:var(--radius-pill);background:var(--text)}
.nav-hamburger span+span{margin-top:4px}
.mega-menu{position:fixed;left:50%;top:72px;z-index:30;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:18px;width:min(910px,calc(100vw - 56px));padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.nav-capabilities:hover .mega-menu,.nav-capabilities:focus-within .mega-menu,.nav-capabilities.is-open .mega-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-menu__groups{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mega-menu section{display:grid;align-content:start;gap:8px}
.mega-menu section>p{color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.mega-link{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px;border:1px solid transparent;border-radius:var(--radius-card);color:var(--text);transition:background .18s ease,border-color .18s ease,transform .18s ease}
.mega-link:hover,.mega-link:focus-visible{background:var(--bg-soft);border-color:var(--border);transform:translateY(-1px)}
.mega-link svg{width:34px;height:34px;padding:7px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary)}
.mega-link strong{display:block;font-size:.84rem;line-height:1.22}
.mega-link small{display:block;margin-top:4px;color:var(--muted);font-size:.72rem;line-height:1.35}
.mega-link--soon{opacity:.55;cursor:not-allowed}
.mega-link--soon:hover{background:none;border-color:transparent;transform:none}
.plan-note{display:inline-block;margin-top:6px;padding:3px 8px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.66rem;font-weight:700;line-height:1.3}
.mega-promo{display:grid;align-content:start;gap:10px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);color:var(--text)}
.mega-promo img{display:block;width:100%;aspect-ratio:1.34/1;object-fit:cover;object-position:top left;border-radius:var(--radius-card);border:1px solid var(--border)}
.mega-promo span{width:max-content;padding:6px 9px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.66rem;font-weight:800;text-transform:uppercase}
.mega-promo strong{font-size:.84rem;line-height:1.32}
.nav nav a:hover{color:var(--primary)}
.nav__actions{justify-self:end;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:1px solid transparent;border-radius:var(--radius-btn);font-weight:700;font-size:.9rem;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(11,47,51,.2)}
.btn--primary:hover{background:var(--primary-hover);box-shadow:0 12px 28px rgba(11,47,51,.24)}
.btn--quiet{border-color:var(--border);background:var(--surface);color:var(--text)}

.hero{position:relative;overflow:hidden;max-width:none;margin:0;padding:72px max(28px,calc((100vw - 1224px)/2)) 64px;display:grid;grid-template-columns:1fr;gap:48px;background:linear-gradient(to bottom,var(--bg),transparent 56px),var(--hero-bg);background-repeat:no-repeat;color:var(--hero-text)}
.hero .eyebrow{color:var(--hero-text-secondary)}
.hero__copy{position:relative;max-width:700px}
.hero__copy:before{content:"";position:absolute;z-index:-1;right:-180px;top:-40px;width:620px;height:620px;border-radius:var(--radius-circle);background:radial-gradient(circle,rgba(var(--primary-rgb),.22),rgba(var(--primary-rgb),0) 68%)}
.hero__copy h1{margin-top:12px;color:var(--hero-text)}
.hero__lede{max-width:650px;margin-top:26px;color:var(--hero-text-secondary);font-size:1.08rem}
.hero__actions{display:flex;align-items:center;gap:12px;margin-top:32px}
.hero__actions>div{display:grid;gap:6px}
.hero__actions small{color:var(--hero-text-secondary);text-align:center;font-size:.72rem}
.hero__actions .btn--primary{background:var(--primary);color:#fff;box-shadow:0 10px 26px rgba(var(--primary-rgb),.32)}
.hero__actions .btn--primary:hover{background:var(--primary-hover);box-shadow:0 14px 32px rgba(var(--primary-rgb),.38)}
.hero__actions .btn--quiet{border-color:rgba(var(--hero-text-rgb),.28);background:transparent;color:var(--hero-text)}
.hero__actions .btn--quiet:hover{border-color:rgba(var(--hero-text-rgb),.5)}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;color:var(--success);font-size:.82rem;font-weight:700}
.trust-row li:before{content:"✓";margin-right:7px}
.hero .trust-row{color:var(--hero-text-secondary)}
.hero .trust-row li:before{color:var(--hero-text-secondary)}

/* Mirrors the real Anasayfa "Ne yapmak istiyorsun?" grid (public/app.js,
   simpleFlowHomeHtml()) so a visitor sees the exact same 7 actions before
   registering - same content/order/icons via public/shared/simple-flow-cards.js,
   restyled with this page's own tokens (the app uses --ac-* names, this
   page uses plain names) rather than pulling in app.js's full stylesheet.
   Sits inside the now-dark .hero band (same <section>, see landing.html) -
   its own heading needs an explicit light color, and its cards need an
   explicit dark text color pinned back down since they keep their light
   --surface background regardless of what .hero's own text color is. */
.simple-flow-section{margin-top:8px}
.simple-flow-section h2{font-size:1.4rem;margin-bottom:18px;color:var(--hero-text)}
.simple-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.simple-flow-card{display:grid;align-content:start;gap:7px;min-height:116px;padding:18px;text-align:left;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease;color:var(--text)}
.simple-flow-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.simple-flow-card i{font-style:normal;font-size:20px;color:var(--primary)}
.simple-flow-card span{color:var(--text);font-family:"Poppins",sans-serif;font-size:15px;font-weight:600}
.simple-flow-card small{color:var(--text-secondary);font-size:12px;line-height:1.45}
.simple-flow-card.is-primary{background:var(--primary);border-color:var(--primary)}
.simple-flow-card.is-primary i,.simple-flow-card.is-primary span{color:#fff}
.simple-flow-card.is-primary small{color:rgba(255,255,255,.78)}
.simple-flow-card.is-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.command-preview{position:relative;padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover)}
.preview-label{position:absolute;right:18px;top:-14px;padding:6px 10px;border:1px solid var(--primary);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;text-transform:uppercase}
.command-preview header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:17px;border-bottom:1px solid var(--border)}
.command-preview header>div{display:flex;align-items:center;gap:10px}
.safe-chip{padding:7px 10px;border:1px solid #b9d7c5;border-radius:var(--radius-pill);background:var(--success-soft);color:var(--success);font-size:.68rem;font-weight:800}
.preview-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}
.preview-metrics article,.preview-actions article{padding:14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft)}
.preview-metrics span,.preview-actions span{display:block;color:var(--muted);font-size:.67rem}
.preview-metrics strong{display:block;margin-top:5px;font-size:.8rem}
.preview-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.preview-actions article{min-height:88px;background:var(--surface-strong)}
.preview-actions strong{font-size:.82rem}
.preview-actions span{margin-top:7px}

.section{max-width:1280px;margin:auto;padding:78px 28px}
.section-head{max-width:720px;margin-bottom:30px}
.section-head h2{margin-top:9px}
.section-head>p:last-child{margin-top:16px;color:var(--text-secondary)}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.capability-grid a{display:flex;flex-direction:column;min-height:236px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease}
.capability-grid a:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.capability-grid .capability-soon{display:flex;flex-direction:column;min-height:236px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);opacity:.65;cursor:not-allowed}
.capability-grid span{color:var(--primary);font-weight:800}
.capability-grid h3{margin-top:30px}
.capability-grid p{margin:10px 0 22px;color:var(--text-secondary);font-size:.9rem}
/* Badge (.plan-note) and CTA are pinned to the card's bottom as one
   unit, not just the CTA - otherwise a card whose badge text wraps to 2
   lines (e.g. the Turkish "Starter'dan itibaren · Ücretsizde araştırma
   dahil") pushes only its own CTA down while a 1-line/no-badge card's
   CTA stays higher, so the badges themselves end up at different
   heights across the row even though the CTAs still bottom-align.
   strong always carries the auto margin (handles the one card with no
   badge at all); when a badge does precede it, the badge takes the auto
   margin instead and strong falls back to a small fixed gap - two auto
   margins on the same axis would otherwise split the free space between
   them instead of bunching badge+CTA together at the bottom. flex
   (not grid+align-content) is needed for auto margins to reliably
   consume the leftover space here at all. */
.capability-grid strong{margin-top:auto;color:var(--primary);font-size:.82rem}
.capability-grid .plan-note{margin-top:auto}
.capability-grid .plan-note+strong{margin-top:8px}

/* Primary decision - the first, and only mandatory, choice a visitor
   sees: 3 cards, matching the 3 real top-level jobs ACOPES actually
   does (create / improve / analyze). Everything else (the 6 studios +
   video/mockup + SEO Expert) lives one click away in the
   all-tools-disclosure below, not as 8-11 co-equal choices on first
   view. */
.primary-decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.primary-decision-card{display:flex;flex-direction:column;min-height:200px;padding:24px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease;text-decoration:none;color:inherit}
.primary-decision-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.primary-decision-card__icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary)}
.primary-decision-card__icon svg{width:22px;height:22px}
.primary-decision-card h3{margin-top:16px}
.primary-decision-card p{margin:8px 0 0;color:var(--text-secondary);font-size:.9rem}
.primary-decision-card strong{margin-top:auto;padding-top:16px;color:var(--primary);font-size:.82rem}
.primary-decision-card .plan-note{margin-top:auto;padding-top:16px}
.primary-decision-card .plan-note+strong{margin-top:0;padding-top:8px}
.primary-decision-card.is-primary{background:var(--primary);border-color:var(--primary)}
.primary-decision-card.is-primary .primary-decision-card__icon{background:rgba(255,255,255,.16);color:#fff}
.primary-decision-card.is-primary h3,.primary-decision-card.is-primary strong{color:#fff}
.primary-decision-card.is-primary p{color:rgba(255,255,255,.82)}
.primary-decision-card.is-primary .plan-note{background:rgba(255,255,255,.16);color:#fff}
.primary-decision-card.is-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
@media(max-width:820px){.primary-decision-grid{grid-template-columns:1fr}}

/* Secondary tools disclosure - collapsed by default (native <details>,
   no JS needed), so the 6 studios + video/mockup/SEO Expert read as an
   optional deeper level, not a second bank of equally-weighted choices
   right under the primary 3. */
.all-tools-disclosure{border:none;background:none;box-shadow:none;padding:0}
.all-tools-disclosure>.studios-grid{margin-top:20px}
.all-tools-disclosure:not([open])>.studios-grid{display:none}
.all-tools-disclosure__summary{cursor:pointer;list-style:none}
.all-tools-disclosure__summary::-webkit-details-marker{display:none}
.all-tools-disclosure__summary .eyebrow{display:inline-flex;align-items:center;gap:6px}
.all-tools-disclosure__summary .eyebrow:after{content:"▾";transition:transform .18s ease}
.all-tools-disclosure[open] .all-tools-disclosure__summary .eyebrow:after{transform:rotate(180deg)}
.studios-grid__link-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}

.studios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.studios-grid article,.studios-grid__link-card{padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest);transition:.18s ease}
.studios-grid article:hover,.studios-grid__link-card:hover{border-color:var(--primary);box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.studio-icon{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary)}
.studio-icon svg{width:22px;height:22px}
.studios-grid h3{margin-top:16px}
.studios-grid p{margin-top:8px;color:var(--text-secondary);font-size:.9rem}
.studio-figure{margin:14px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:4/3}
.studio-figure img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.studios-grid article:hover .studio-figure img{transform:scale(1.03)}
.studio-figure-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.studio-figure-pair figure{margin:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:3/4}
.studio-figure-pair img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.studios-grid article:hover .studio-figure-pair img{transform:scale(1.03)}

/* Real-output fan gallery: 2-3 real images stacked with a slight rotation,
   fanning out into a row on hover (desktop). Absolute positioning needs a
   sized relative parent - aspect-ratio:4/3 keeps the card's height stable
   whether the fan is stacked or open, so opening it never reflows the grid
   row. A few px of inset margin (not full-bleed to the figure's own edges)
   gives a rotated corner room to sit inside the card before it visually
   crosses the card boundary - full-bleed rotation escaped the card in
   testing (worst on Coloring Book's tall, high-contrast cover art).
   studio-fan--pair (2 images: Pattern Studio, Coloring Book) uses a
   lighter offset than the default 3-image fan. Hover translate is a small
   percentage, not the ~36% first tried, which fanned images out far enough
   to overlap the next card in the row. */
.studio-fan{position:relative;margin:14px 10px 0;aspect-ratio:4/3}
.studio-fan figure{position:absolute;inset:0;margin:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);box-shadow:var(--shadow-rest);transition:transform .3s ease,box-shadow .3s ease}
.studio-fan img{display:block;width:100%;height:100%;object-fit:cover}
.studio-fan figure:nth-child(1){transform:rotate(-3deg) translateX(-4px);z-index:1}
.studio-fan figure:nth-child(2){transform:rotate(0deg);z-index:2}
.studio-fan figure:nth-child(3){transform:rotate(3deg) translateX(4px);z-index:1}
.studios-grid article:hover .studio-fan figure:nth-child(1){transform:rotate(-6deg) translate(-11%,2%);z-index:3;box-shadow:var(--shadow-hover)}
.studios-grid article:hover .studio-fan figure:nth-child(2){transform:translateY(-6px);z-index:2;box-shadow:var(--shadow-hover)}
.studios-grid article:hover .studio-fan figure:nth-child(3){transform:rotate(6deg) translate(11%,2%);z-index:3;box-shadow:var(--shadow-hover)}
.studio-fan--pair figure:nth-child(1){transform:rotate(-2deg) translateX(-3px);z-index:1}
.studio-fan--pair figure:nth-child(2){transform:rotate(2deg) translateX(3px);z-index:2}
.studios-grid article:hover .studio-fan--pair figure:nth-child(1){transform:rotate(-4deg) translateX(-9%);z-index:2;box-shadow:var(--shadow-hover)}
.studios-grid article:hover .studio-fan--pair figure:nth-child(2){transform:rotate(4deg) translateX(9%);z-index:2;box-shadow:var(--shadow-hover)}

.studio-badge{display:inline-flex;align-items:center;margin-top:12px;padding:4px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.72rem;font-weight:700;letter-spacing:.02em}

.before-after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ba-card{display:grid;align-content:start;padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.ba-card--wide,.ba-card--stat{grid-column:span 1}
.ba-card__label{width:max-content;padding:6px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.ba-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-top:14px}
.ba-pair figure{margin:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:1/1}
.ba-pair img{display:block;width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;margin:8px;padding:4px 8px;border-radius:var(--radius-pill);background:rgba(var(--hero-bg-rgb),.7);color:var(--hero-text);font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ba-pair figure{position:relative}
/* The source image has a generic mockup-template caption baked into its
   bottom edge ("Wall art frame preview" / "Seller-review mockup
   template") that isn't real product-specific content and visually
   clashes with the card's own "After" tag - faded out here rather than
   re-cropped, since this image's 4:3 source can't be vertically cropped
   inside a 1:1 frame without changing this one card's aspect ratio and
   breaking row symmetry with its siblings. */
.ba-figure--fade-bottom:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(to bottom,transparent,var(--bg-soft) 70%);pointer-events:none}
.ba-arrow{display:grid;place-items:center;color:var(--primary);font-size:1.2rem;font-weight:800}
.ba-card>p{margin-top:14px;color:var(--text-secondary);font-size:.86rem}
.ba-pair--text-image{grid-template-columns:1.15fr auto 1fr}
.ba-text-panel{position:relative;display:grid;gap:8px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);aspect-ratio:1/1;align-content:center}
.ba-text-panel .ba-tag{position:static;width:max-content;background:var(--primary-soft);color:var(--primary)}
.ba-quote{color:var(--text);font-size:.86rem;line-height:1.4;font-style:italic}
.ba-text-panel small{color:var(--muted);font-size:.72rem}
.ba-card--stat{justify-content:center}
.ba-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ba-stat{padding:14px 10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft);text-align:center}
.ba-stat strong{display:block;font-size:1.6rem;color:var(--primary)}
.ba-stat span{display:block;margin-top:4px;color:var(--text-secondary);font-size:.7rem}
.before-after-note{margin-top:18px;color:var(--muted);font-size:.82rem}

.pricing{position:relative}
.pricing-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pricing-card{display:grid;align-content:start;gap:14px;min-height:390px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.pricing-card--featured{position:relative;border-color:var(--primary);background:var(--primary-soft);box-shadow:var(--shadow-hover)}
.pricing-featured-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);padding:5px 14px;border-radius:var(--radius-pill);background:var(--primary);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(11,47,51,.28)}
.pricing-plan{width:max-content;padding:7px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pricing-card h3{font-size:2.5rem;line-height:1;color:var(--text)}
.pricing-card h3 span{margin-left:4px;color:var(--muted);font-family:"Poppins",sans-serif;font-size:.9rem;font-weight:600}
.pricing-note{min-height:44px;color:var(--text-secondary);font-size:.88rem}
.pricing-card ul{display:grid;gap:9px;margin:4px 0 10px;padding:0;list-style:none;color:var(--text-secondary);font-size:.88rem}
.pricing-card li{display:flex;gap:8px;align-items:flex-start}
.pricing-card li:before{content:"✓";color:var(--success);font-weight:900}
.pricing-generations-wrap{display:block}
.pricing-generations-wrap strong{display:block}
.pricing-breakdown{display:block;margin-top:4px;color:var(--muted);font-size:.76rem;line-height:1.4}
.pricing-card .btn{align-self:end;margin-top:auto;width:100%}

.proof-showcase,.capability-preview,.proof-trail{position:relative}
.action-video{max-width:1060px}
.action-video__frame{margin:28px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--video-frame-bg);box-shadow:var(--shadow-hover)}
.action-video__frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--video-frame-bg)}
.action-video__frame figcaption{padding:12px 16px;background:var(--surface);color:var(--text-secondary);font-size:.84rem}
.proof-comparison{display:grid;grid-template-columns:.82fr 1.18fr;gap:18px}
.proof-panel{padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.proof-panel__label,.preview-grid span,.trail-grid span{display:inline-flex;align-items:center;width:max-content;padding:7px 10px;border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.proof-panel h3{margin-top:16px}
.proof-panel p{margin-top:8px;color:var(--text-secondary);font-size:.92rem}
.proof-panel figure,.preview-grid figure,.trail-grid article{margin:16px 0 0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-soft)}
.proof-panel img,.preview-grid img,.trail-grid img{display:block;width:100%;height:auto}
.proof-panel--before figure{display:grid;align-items:center;min-height:178px;padding:22px;background:var(--bg-soft)}
.proof-panel--before img{border-radius:var(--radius-card);box-shadow:0 10px 24px rgba(11,47,51,.08)}
.proof-after-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:12px}
.proof-after-grid figure{margin-top:16px}
.preview-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.preview-grid--products{grid-template-columns:repeat(3,1fr)}
.preview-grid article{display:grid;align-content:start;padding:14px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-rest)}
.preview-grid figure{margin:0 0 14px;aspect-ratio:1.22/1}
.preview-grid img{height:100%;object-fit:cover;object-position:top left}
.preview-grid--products figure{aspect-ratio:4/3}
.preview-grid--products article:nth-child(1) figure,.preview-grid--products article:nth-child(3) figure{background:var(--bg-soft)}
.preview-grid h3{margin-top:14px;font-size:1rem}
.preview-grid p{margin-top:8px;color:var(--text-secondary);font-size:.84rem}
.trail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.trail-grid article{display:grid;align-content:start;gap:10px;margin:0;padding:12px}
.trail-grid img{aspect-ratio:1.28/1;object-fit:cover;object-position:top left;border-radius:var(--radius-card)}
.trail-grid article:first-child img{object-fit:contain;padding:12px;background:var(--surface)}
@media(max-width:950px){
  .proof-comparison,.proof-after-grid{grid-template-columns:1fr}
  .preview-grid,.trail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .proof-panel{padding:16px}
  .proof-panel--before figure{min-height:122px;padding:14px}
  .preview-grid,.trail-grid{grid-template-columns:1fr}
}

.workflow{max-width:none;padding-inline:max(28px,calc((100vw - 1224px)/2));border-block:1px solid var(--border);background:var(--bg-soft)}
.workflow .section-head{max-width:1224px}
.workflow ol{max-width:1224px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.workflow li{position:relative;display:grid;gap:12px;padding:18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface)}
.workflow li:not(:last-child):after{content:"→";position:absolute;right:-13px;top:40%;z-index:2;color:var(--primary);font-weight:800}
.workflow li span{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-btn);background:var(--primary-soft);color:var(--primary);font-size:.72rem;font-weight:800}
.workflow-copy{max-width:1224px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;color:var(--text-secondary)}
.workflow-copy p{padding:15px;border-left:3px solid var(--primary);background:var(--surface)}

.safety{display:grid;grid-template-columns:1fr .78fr;gap:52px;align-items:center}
.safety h2{margin:9px 0 16px}
.safety>div>p:last-child{color:var(--text-secondary)}
.safety-card{padding:28px;border:1px solid #b9d7c5;border-radius:var(--radius-card);background:var(--success-soft)}
.safety-card span{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-btn);background:var(--success);color:#fff}
.safety-card strong{display:block;margin-top:18px}
.safety-card p{margin-top:8px;color:#47705a}

.beta{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px;border-radius:var(--radius-card);border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-hover)}
.beta .eyebrow{color:var(--primary)}
.beta h2{margin:8px 0 14px;color:var(--text)}
.beta p{max-width:650px;color:var(--text-secondary)}
.beta ul{display:flex;flex-wrap:wrap;gap:8px 22px;margin:20px 0 0;padding:0;list-style:none;color:var(--text-secondary);font-size:.83rem}
.beta li:before{content:"✓";color:#80d6a4;margin-right:6px}
.beta .btn--primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(11,47,51,.2)}

.final-cta{max-width:920px;margin:52px auto;padding:68px 28px;text-align:center}
.final-cta h2{margin:10px 0 17px}
.final-cta p:not(.eyebrow){max-width:660px;margin:0 auto 28px;color:var(--text-secondary)}

.footer{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:38px;padding:52px max(28px,calc((100vw - 1224px)/2));border-top:1px solid var(--border);background:var(--surface)}
.footer>div p{max-width:310px;margin-top:12px;color:var(--muted);font-size:.82rem}
.footer nav{display:flex;flex-direction:column;gap:8px;font-size:.82rem}
.footer nav strong{margin-bottom:6px}
.footer nav a{color:var(--text-secondary)}
.footer nav a:hover{color:var(--primary)}

@media(max-width:950px){
  .nav__inner{grid-template-columns:1fr auto auto;gap:10px}
  .nav-menu{justify-self:end;padding:0;border:0;background:transparent;box-shadow:none}
  .nav-menu>a{display:none}
  .mega-menu{left:16px;right:16px;top:72px;grid-template-columns:1fr;width:auto;max-height:calc(100vh - 92px);overflow:auto;transform:translate(0,8px)}
  .nav-capabilities:hover .mega-menu,.nav-capabilities:focus-within .mega-menu,.nav-capabilities.is-open .mega-menu{transform:translate(0,0)}
  .mega-menu__groups{grid-template-columns:1fr 1fr}
  .mega-promo{grid-template-columns:112px 1fr;align-items:center}
  .mega-promo img{height:92px}
  .mega-promo span{grid-column:2}
  .mega-promo strong{grid-column:2}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:64px}
  .command-preview{max-width:720px}
  .capability-grid{grid-template-columns:repeat(2,1fr)}
  .studios-grid{grid-template-columns:repeat(2,1fr)}
  .before-after-grid{grid-template-columns:repeat(2,1fr)}
  .simple-flow-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workflow ol{grid-template-columns:1fr}
  .workflow li:after{display:none}
  .workflow-copy{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr 1fr}
  .safety{grid-template-columns:1fr}
  .beta{margin-inline:24px}
}
@media(max-width:600px){
  .nav__inner{height:64px;padding:0 16px;gap:8px}
  .brand span{width:30px;height:30px}
  .nav-link--capabilities{min-height:38px;padding-inline:10px;background:var(--surface);border:1px solid var(--border);font-size:.82rem;width:100%;justify-content:space-between}
  .nav-hamburger{display:inline-flex}
  .nav-menu{display:none;position:absolute;justify-self:stretch;left:16px;right:16px;top:64px;flex-direction:column;align-items:stretch;gap:4px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--shadow-hover);z-index:30}
  .nav.mobile-nav-open .nav-menu{display:flex}
  .nav.mobile-nav-open .nav-menu>a{display:block;padding:10px 12px;border-radius:var(--radius-btn)}
  .nav-capabilities{width:100%}
  .nav__actions>[data-i18n-switcher]{display:none}
  .nav-menu-i18n{display:block;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}
  .mega-menu{left:12px;right:12px;top:66px;padding:14px;border-radius:var(--radius-card)}
  .mega-menu__groups{grid-template-columns:1fr}
  .mega-promo{grid-template-columns:1fr}
  .mega-promo span,.mega-promo strong{grid-column:auto}
  .nav__actions .btn--quiet{display:none}
  .nav__actions .btn{min-height:42px;padding-inline:14px}
  .hero,.section{padding-inline:16px}
  .hero{padding-top:48px;padding-bottom:44px;gap:42px}
  h1{font-size:clamp(2rem,10.4vw,2.9rem)}
  .hero__actions{align-items:stretch;flex-direction:column}
  .hero__actions .btn{width:100%}
  .trust-row{display:grid}
  .command-preview{padding:13px;border-radius:var(--radius-card)}
  .preview-metrics,.preview-actions,.capability-grid,.simple-flow-grid,.workflow ol,.studios-grid,.before-after-grid{grid-template-columns:1fr}
  /* The hover fan-out only makes sense on a device with a hover state - on
     touch, swap the absolute-stacked fan for a real horizontal scroll
     gallery (one real image per swipe) instead of a fan that can only ever
     show its stacked (closed) state. */
  .studio-fan{aspect-ratio:auto;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .studio-fan figure{position:static;flex:0 0 80%;aspect-ratio:4/3;scroll-snap-align:start;transform:none!important;box-shadow:var(--shadow-rest)!important}
  .ba-pair,.ba-pair--text-image{grid-template-columns:1fr}
  .ba-arrow{transform:rotate(90deg);justify-self:center}
  .ba-stat-row{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card{min-height:0}
  .preview-metrics article{display:flex;justify-content:space-between;align-items:center}
  .preview-metrics strong{margin:0;text-align:right}
  .capability-grid a,.capability-grid .capability-soon{min-height:205px}
  .workflow{padding-inline:16px}
  .beta{margin-inline:16px;padding:32px 22px;align-items:flex-start;flex-direction:column}
  .footer{grid-template-columns:1fr;padding:42px 20px}
  .final-cta{margin:24px auto;padding:42px 16px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------------------------------------------------------------------------
   Parity chapters: tool index, workspace comparison, FAQ.
   Ported from the staging build (2026-09-04). Colors are mapped onto this
   file's palette variables rather than the staging build's hardcoded hex, so
   the blocks follow the turquoise tokens instead of pinning a second palette.
   --------------------------------------------------------------------------- */
:root{--parity-mint:#75e6d8}
.parity-chapters{overflow:hidden;background:var(--bg)}
.parity-compare,.parity-faq{max-width:1120px;margin:auto;padding:112px 28px}
.parity-head{max-width:720px}
.parity-head>p{margin:0 0 12px;color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.13em}
.parity-head h2{margin:0;color:var(--text);font-size:clamp(2.6rem,5vw,5.2rem);line-height:.93;letter-spacing:-.07em}
.parity-compare__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.parity-compare article{display:flex;min-height:220px;flex-direction:column;padding:22px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text);text-decoration:none}
.parity-compare article span{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.1em}
.parity-compare h3{margin:45px 0 0;font-size:1.4rem;letter-spacing:-.04em}
.parity-compare{max-width:none;padding-inline:max(28px,calc((100vw - 1120px)/2));background:var(--primary-soft)}
.parity-compare__grid{max-width:1120px;margin-left:auto;margin-right:auto}
.parity-compare article{min-height:195px;background:rgba(255,255,255,.82)}
.parity-compare h3{margin:27px 0 9px}
.parity-compare p{margin:0;color:var(--text-secondary);line-height:1.55}
.parity-faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px}
.parity-faq>div:last-child{display:grid;gap:10px}
.parity-faq details{padding:19px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.parity-faq summary{cursor:pointer;color:var(--text);font-weight:800}
.parity-faq details p{margin:13px 0 0;color:var(--text-secondary);line-height:1.55}
@media(max-width:760px){.parity-compare,.parity-faq{padding:72px 20px}.parity-compare__grid{grid-template-columns:1fr}.parity-faq{grid-template-columns:1fr;gap:32px}.parity-head h2{font-size:2.7rem}}
.parity-faq{max-width:none;padding:118px max(28px,calc((100vw - 1120px)/2));background:radial-gradient(circle at 82% 12%,rgba(91,228,211,.18),transparent 30%),linear-gradient(135deg,var(--hero-bg),var(--primary-hover));color:var(--hero-text)}
.parity-faq .parity-head>p{color:var(--parity-mint)}
.parity-faq .parity-head h2{color:var(--hero-text)}
.parity-faq details{border-color:rgba(182,239,229,.34);border-radius:18px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.08)}
.parity-faq details:hover{background:rgba(255,255,255,.13)}
.parity-faq summary{color:var(--hero-text);font-size:1.03rem}
.parity-faq details p{color:var(--hero-text-secondary)}

/* ---------------------------------------------------------------------------
   Output feed: tangible product examples, intentionally distinct from a social
   feed. Ported from the staging build (2026-09-04) with colors mapped onto this
   file's palette variables rather than the staging build's hardcoded hex.
   --------------------------------------------------------------------------- */
.landing-output-feed{max-width:1420px;margin:0 auto;padding:76px clamp(24px,5vw,72px);overflow:hidden}
.landing-output-feed__head{max-width:760px;margin:0 0 30px}
.landing-output-feed__head h2{max-width:690px}
.output-feed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-width:0}
.output-feed-card{display:flex;flex-direction:column;min-height:368px;width:auto;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text);box-shadow:0 14px 35px rgba(12,50,48,.06);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.output-feed-card:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:0 20px 40px rgba(12,50,48,.13)}
.output-feed-card>img{display:block;width:100%;height:178px;object-fit:cover;background:var(--primary-soft)}
.output-feed-card__tag{align-self:flex-start;margin:-16px 14px 0;padding:7px 10px;border-radius:999px;background:var(--hero-bg);color:var(--hero-text);font-size:10px;font-weight:800;letter-spacing:.08em;position:relative}
.output-feed-card>div{display:flex;flex:1;flex-direction:column;padding:17px 16px 18px}
.output-feed-card h3{margin:0 0 8px;font-size:19px;line-height:1.14;letter-spacing:-.035em}
.output-feed-card p:not(.eyebrow){margin:0;color:var(--text-secondary);font-size:13px;line-height:1.48}
.output-feed-card strong{margin-top:auto;padding-top:15px;color:var(--primary);font-size:13px}
.output-feed-card--cta{justify-content:flex-end;border-color:var(--hero-bg);background:linear-gradient(145deg,var(--hero-bg),var(--primary-hover));color:var(--hero-text)}
.output-feed-card--cta:hover{border-color:var(--parity-mint);box-shadow:0 22px 42px rgba(8,74,72,.24)}
.output-feed-card--cta .output-feed-card__number{padding:24px 17px 0;color:var(--parity-mint);font-size:40px;font-weight:800;line-height:1;letter-spacing:-.08em}
.output-feed-card--cta>div{padding-top:18px}
.output-feed-card--cta h3{font-size:21px}
.output-feed-card--cta p:not(.eyebrow){color:var(--hero-text-secondary)}
.output-feed-card--cta .eyebrow{margin:0 0 9px;color:var(--parity-mint);font-size:10px}
.output-feed-card--cta strong{color:var(--hero-text)}
@media (max-width:900px){.landing-output-feed{padding:58px 24px}.output-feed-grid{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0}.output-feed-card{min-height:340px}}
@media (max-width:560px){.output-feed-grid{grid-template-columns:1fr}.output-feed-card{min-height:0}.output-feed-card>img{height:205px}}

/* ---------------------------------------------------------------------------
   Hero product preview. Ported from the staging build (2026-09-04), Option B:
   the figure plus the two-column hero grid only. Production's dark hero
   (--hero-bg / --hero-text) and its type, button and trust-row styling are
   deliberately left alone; the staging build's light-paper hero redesign is a
   separate decision.

   Breakpoints follow this file's existing 950/600 chain, not the staging
   build's 900/560, so the hero's responsive rules stay consistent. row-gap is
   intentionally not set: landing.css's own `gap` already supplies it and
   retunes at 600px, and overriding it here would break that chain for a 2px
   difference.
   --------------------------------------------------------------------------- */
.hero{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);align-items:center;column-gap:72px}
.hero__product-preview{position:relative;display:grid;gap:0;margin:0;transform:rotate(2.5deg);border:1px solid var(--color-rule);border-radius:32px;background:var(--surface);box-shadow:0 34px 76px rgba(var(--hero-bg-rgb),.17);overflow:hidden}
.hero-preview__top{display:flex;align-items:center;gap:7px;height:48px;padding:0 18px;border-bottom:1px solid var(--color-rule);color:var(--text-secondary);font-size:10px;font-weight:800;letter-spacing:.1em}
.hero-preview__top span{margin-right:auto;color:var(--primary)}
.hero-preview__top i{width:7px;height:7px;border-radius:50%;background:var(--color-rule)}
.hero-preview__stage{position:relative;min-height:460px;padding:18px;background:linear-gradient(145deg,var(--primary-soft),var(--surface))}
.hero-preview__stage img{display:block;width:100%;height:424px;object-fit:cover;object-position:left top;border:1px solid var(--color-rule);border-radius:19px}
.hero-preview__insight{position:absolute;right:30px;bottom:34px;display:grid;gap:3px;width:205px;padding:14px 15px;border:1px solid rgba(255,255,255,.72);border-radius:15px;background:rgba(var(--hero-bg-rgb),.91);box-shadow:0 13px 28px rgba(var(--hero-bg-rgb),.2);color:var(--hero-text)}
.hero-preview__insight span{color:var(--parity-mint);font-size:9px;font-weight:800;letter-spacing:.09em}
.hero-preview__insight strong{font-size:14px}
.hero-preview__insight small{color:rgba(255,255,255,.68);font-size:10px}
.hero__product-preview figcaption{display:grid;gap:3px;padding:17px 20px;background:var(--surface);color:var(--text)}
/* The staging build shared one mint rule between the dark insight card and this
   white figcaption, leaving the caption kicker at roughly 1.9:1. Split so the
   mint stays on dark and the caption uses --primary (~4.9:1 on white). */
.hero__product-preview figcaption span{color:var(--primary);font-size:9px;font-weight:800;letter-spacing:.09em}
.hero__product-preview figcaption strong{font-size:12px}
@media(max-width:950px){.hero{grid-template-columns:1fr}.hero__product-preview{width:min(510px,100%);justify-self:center}}
@media(max-width:600px){.hero-preview__stage{min-height:330px;padding:12px}.hero-preview__stage img{height:302px;border-radius:14px}.hero-preview__insight{right:22px;bottom:24px;width:172px}.hero__product-preview{border-radius:23px}.hero__product-preview figcaption{padding:14px 16px}}

/* ---------------------------------------------------------------------------
   Tool stage: one preview frame with a row of studio buttons beneath it.
   Ported from the staging build (2026-09-04); colors mapped onto this file's
   palette variables, breakpoint rebased onto the 950/600 chain.
   --------------------------------------------------------------------------- */
.acopes-tool-stage{max-width:1120px;margin:0 auto;padding:112px 28px 24px}
.stage-head{max-width:760px}
.stage-head p{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.13em}
.stage-head h2{margin:14px 0 42px;font-size:clamp(3rem,5.5vw,6rem);line-height:.9;letter-spacing:-.08em}
.stage-frame{position:relative;overflow:hidden;padding:16px;border:1px solid var(--border);border-radius:30px;background:var(--hero-bg);box-shadow:0 28px 60px rgba(11,59,58,.16)}
/* The staging build floated this label straight over the preview image. The
   landing stills are light, so white-on-image left the tag near unreadable;
   a corner scrim fixes it without hiding the image. */
.stage-frame:before{content:"";position:absolute;z-index:1;left:16px;top:16px;right:16px;bottom:16px;border-radius:20px;pointer-events:none;background:linear-gradient(155deg,rgba(var(--hero-bg-rgb),.92),rgba(var(--hero-bg-rgb),.55) 32%,rgba(var(--hero-bg-rgb),0) 58%)}
.stage-frame__top{position:absolute;z-index:2;left:42px;top:38px;display:grid;gap:5px;color:var(--hero-text)}
.stage-frame__top span{color:var(--parity-mint);font-size:11px;font-weight:800;letter-spacing:.12em}
.stage-frame__top strong{font-size:28px}
.stage-frame img{display:block;width:100%;height:520px;object-fit:cover;border-radius:20px;opacity:.74}
.stage-frame__cta{position:absolute;right:38px;bottom:35px;padding:14px 18px;border-radius:999px;background:var(--surface);color:var(--primary-hover);font-weight:800;text-decoration:none}
.stage-tabs{display:flex;gap:10px;overflow:auto;margin-top:18px;padding-bottom:6px}
.stage-tabs button{flex:0 0 auto;padding:12px 15px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:800;cursor:pointer}
.stage-tabs button small{margin-right:8px;color:var(--primary);font-size:10px}
.stage-tabs button[aria-pressed=true]{border-color:var(--hero-bg);background:var(--hero-bg);color:var(--hero-text)}
.stage-tabs button[aria-pressed=true] small{color:var(--parity-mint)}
@media(max-width:600px){.acopes-tool-stage{padding:72px 20px 12px}.stage-frame img{height:340px}.stage-frame__top{left:30px;top:28px}.stage-frame__top strong{font-size:22px}.stage-frame__cta{right:26px;bottom:25px}}

/* ---------------------------------------------------------------------------
   Operating model: manifesto, general-AI comparison, operator examples and the
   approval band. Ported from the staging build (2026-09-04); colors mapped onto
   this file's palette variables, breakpoint rebased onto the 950/600 chain.
   --------------------------------------------------------------------------- */
.operating-model{padding:120px max(28px,calc((100vw - 1120px)/2));background:var(--surface);color:var(--text)}
.operating-model__intro{max-width:780px}
.operating-model h2{margin:12px 0 20px;font-size:clamp(2.8rem,5.2vw,5.6rem);line-height:.91;letter-spacing:-.07em}
.operating-model__intro>p:last-child{max-width:670px;color:var(--text-secondary);line-height:1.65}
.operating-model__compare{display:grid;grid-template-columns:1fr 1.15fr;gap:16px;margin-top:48px}
.operating-model__compare article{min-height:270px;padding:28px;border:1px solid var(--border);border-radius:24px;background:var(--bg)}
.operating-model__compare .is-acopes{background:var(--hero-bg);color:var(--hero-text)}
.operating-model__compare span{color:var(--primary);font-size:11px;font-weight:800;letter-spacing:.12em}
.operating-model__compare .is-acopes span{color:var(--parity-mint)}
.operating-model__compare h3{max-width:420px;margin:47px 0 10px;font-size:1.8rem;line-height:1.05;letter-spacing:-.045em}
.operating-model__compare p{max-width:440px;margin:0;color:var(--text-secondary);line-height:1.55}
.operating-model__compare .is-acopes p{color:var(--hero-text-secondary)}
/* Scoped to the dark card. The staging build applied mint to any link in the
   comparison, so a link added to the light card would have been unreadable. */
.operating-model__compare .is-acopes a{display:inline-block;margin-top:22px;color:var(--parity-mint);font-weight:800;text-decoration:none}
.operator-strip{display:grid;grid-template-columns:.75fr 1.25fr;gap:46px;margin-top:96px;padding-top:76px;border-top:1px solid var(--border)}
.operator-strip h2{font-size:2.5rem}
.operator-strip__examples{display:grid;gap:10px}
.operator-strip__examples article{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:17px 0;border-bottom:1px solid var(--border)}
/* Explicit placement: relying on auto-placement here dropped the title into
   the 42px number column, wrapping it to three lines. */
.operator-strip__examples b{grid-column:1;grid-row:1;color:var(--primary);font-size:12px}
.operator-strip__examples strong{grid-column:2;grid-row:1;font-size:16px}
.operator-strip__examples span{grid-column:2;color:var(--text-secondary);font-size:13px}
.operator-strip__examples a{grid-column:3;grid-row:1 / span 2;color:var(--primary);font-size:13px;font-weight:800;text-decoration:none}
.partner-band{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:92px;padding:23px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.partner-band p{width:100%;margin:0 0 5px;color:var(--text-secondary);font-size:11px;font-weight:800;letter-spacing:.11em}
.partner-band strong{font-size:15px}
.partner-band span{color:var(--primary)}
.partner-band a{margin-left:auto;color:var(--primary);font-size:13px;font-weight:800;text-decoration:none}
/* Collapses at 950 rather than 600: between those widths the two-column
   strip squeezed the example titles into three-line wraps. */
@media(max-width:950px){.operating-model__compare,.operator-strip{grid-template-columns:1fr}.operator-strip{gap:25px;margin-top:65px;padding-top:55px}}
@media(max-width:600px){.operating-model{padding:78px 20px}.operator-strip__examples article{grid-template-columns:30px 1fr}.operator-strip__examples a{grid-column:2;grid-row:auto;margin-top:4px}}