/* ==========================================================================
   ariyel.com — page layer
   Loads after aster-tokens.css and aster-components.css. The home page is the
   approved Landing Page v2 (Satoshi, sky plate, letter, showcase, comparison,
   FAQ). Legal pages keep the Aster nav, footer and prose rhythm. No colour,
   size, radius, shadow or duration is written as a literal — every one is a
   token. Pages load no scripts; Wistia runs inside its own iframe.
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   Every face - Inter, Clash Display, Satoshi and JetBrains Mono - is declared
   by aster-tokens.css, which is the single font source for both this site and
   the app. Nothing here comes from a CDN, and nothing here redeclares a face:
   the legal pages are self-contained and do not load this stylesheet, so a
   face declared here would never reach them. That is exactly how the mono
   scope names silently fell back to system mono once.
   ========================================================================== */

/* ==========================================================================
   2. PAGE FRAME
   ========================================================================== */
:root { color-scheme: light; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

main { flex: 1; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 100;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.as-eyebrow { color: var(--accent); }

.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.link:hover { color: var(--accent-hover); }

/* ==========================================================================
   3. LEGAL-PAGE NAVIGATION — §10's floating pill bar
   Home uses the v2 .nav pill. Privacy and terms keep .as-navbar.
   ========================================================================== */
.navbar-slot {
  position: sticky;
  top: var(--s-9);
  z-index: 50;
}
.as-navbar { gap: var(--s-4); }

.navbar__brand {
  display: flex;
  align-items: center;
  height: 36px;
  padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  transition: var(--transition-ghost);
}
.navbar__brand:hover { background: var(--a-1); }

.brand__logo { display: block; width: auto; }
.navbar__brand .brand__logo { height: 22px; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: auto;
}

@media (max-width: 640px) {
  .navbar__links { display: none; }
  .navbar__cta-slot { margin-inline-start: auto; }
}

.as-btn--pill.as-btn--primary { box-shadow: var(--shadow-raised); }

@media (pointer: coarse) {
  .as-navbar__link,
  .as-navbar .as-btn--pill,
  .navbar__brand,
  .footer__link {
    position: relative;
  }
  .as-navbar__link::after,
  .as-navbar .as-btn--pill::after,
  .navbar__brand::after,
  .footer__link::after {
    content: "";
    position: absolute;
    inset: -4px -2px;
    min-height: 44px;
  }
}

/* ==========================================================================
   4. LEGAL-PAGE FOOTER
   ========================================================================== */
.footer {
  padding: var(--section-y) var(--gutter);
  background: var(--bg-subtle);
}
.footer__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-9);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-9);
}
.footer__link {
  font-size: var(--t-prose);
  line-height: var(--t-prose-lh);
  letter-spacing: var(--t-prose-ls);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  transition: var(--transition-ghost);
}
.footer__link:hover { color: var(--ink); }

.footer__legal {
  font-size: var(--t-prose);
  line-height: var(--t-prose-lh);
  letter-spacing: var(--t-prose-ls);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
}

/* ==========================================================================
   5. LEGAL PAGES
   ========================================================================== */
.doc { max-width: var(--container-text); }

.doc__meta {
  font-size: var(--t-prose);
  line-height: var(--t-prose-lh);
  letter-spacing: var(--t-prose-ls);
  font-weight: var(--fw-regular);
  color: var(--ink-3);
}

.doc__body { display: flex; flex-direction: column; }

.doc__body h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-display-md);
  line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-ls);
  color: var(--ink);
  margin-top: var(--s-14);
  margin-bottom: var(--s-7);
}
.doc__body h2:first-child { margin-top: 0; }

.doc__body h3 {
  font-size: var(--t-title);
  line-height: var(--t-title-lh);
  letter-spacing: var(--t-title-ls);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-top: var(--s-9);
  margin-bottom: var(--s-6);
}

.doc__body p,
.doc__body ul {
  font-size: var(--t-prose-lg);
  line-height: var(--t-prose-lg-lh);
  letter-spacing: var(--t-prose-lg-ls);
  font-weight: var(--fw-regular);
  color: var(--ink-2);
}
.doc__body p + p,
.doc__body ul + p { margin-top: var(--s-7); }

.doc__body ul {
  margin-top: var(--s-7);
  padding-inline-start: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.doc__body li { position: relative; padding-inline-start: var(--s-8); }
.doc__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: var(--s-3);
  height: var(--s-3);
  border-radius: var(--r-pill);
  background: var(--accent-400);
}

.doc__body strong { font-weight: var(--fw-semibold); color: var(--ink); }

.doc__body code {
  font-family: var(--font-mono);
  font-size: var(--t-prose);
  letter-spacing: 0;
  color: var(--ink);
}

@media (max-width: 900px) {
  .doc__body h2 {
    font-family: var(--font-sans);
    letter-spacing: var(--t-title-lg-ls);
  }
}

/* ==========================================================================
   6. LANDING PAGE V2
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   Satoshi — heading 900, sub copy 400, chrome 500/700 — is a deliberate
   departure from the Aster font rule (Clash Display 600 / Inter), taken for
   the marketing layer and recorded in DESIGN-SYSTEM.md §16.74. Its four
   @font-face rules and --font-marketing live in aster-tokens.css with every
   other face; they used to be repeated here, which is how the legal pages
   ended up carrying their own copies too.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Site-local. The Aster display scale stops at 64px (--t-display-xl) and a
     landing hero runs a touch larger; --t-hero-ls is already a real token. */
  --t-hero:    clamp(36px, 4.6vw, 66px);
  --sky-h:     860px;   /* fade runway, not visible sky height */
}

html[data-page="home"] body{
  font-family:var(--font-marketing);
  font-weight:var(--fw-regular);
  background:var(--bg-canvas);
}

/* ── Sky plate ────────────────────────────────────────────────────────────
   Masked to transparent by ~62% so the white page underneath *is* the fade.
   A gradient overlay bands against the blue; a mask does not.

   The plate is the master exported at 3x and cropped to 3366x3000, with no
   horizontal extension. Extending it (cross-fading a y-offset copy to get a
   wider asset) was tried and reverted: this source earns its keep on the
   symmetric cloud corners, and any blend pushes one of them off the edge.
   3x means the browser downsamples (0.86x at 1440 on a 2dpr screen) instead
   of upscaling a 2x asset, which is the whole sharpness win available —
   content is still only 1122px wide, so 1440 shows it at 1.28x of master.

   aster-allow: the #000 / rgba(0,0,0,x) stops below are mask *alpha* ramps,
   not colours. A mask samples the alpha channel; the hue never paints.
   ───────────────────────────────────────────────────────────────────────── */
.sky{
  position:absolute;
  inset:0 0 auto 0;
  height:var(--sky-h);
  background-image:url('/assets/img/landing-sky.webp');
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 19%, rgba(0,0,0,0.44) 38%, rgba(0,0,0,0.10) 52%, transparent 62%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 19%, rgba(0,0,0,0.44) 38%, rgba(0,0,0,0.10) 52%, transparent 62%);
  pointer-events:none;
  z-index:0;
}

.page{ position:relative; z-index:1; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav-wrap{
  position:sticky;
  top:var(--s-7);
  z-index:50;
  padding:var(--s-7) var(--s-8) 0;
}

.nav{
  display:flex;
  align-items:center;
  gap:var(--s-9);
  width:100%;
  max-width:800px;
  margin:0 auto;
  height:var(--h-navbar);
  padding:0 var(--s-3) 0 var(--s-8);
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  box-shadow:var(--shadow-popover), var(--shadow-ring);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  color:var(--ink);
  font-size:var(--t-title);
  font-weight:700;
  letter-spacing:var(--t-title-ls);
  flex:0 0 auto;
}
.brand img{ width:22px; height:22px; }


.nav-actions{ display:flex; align-items:center; gap:var(--s-3); margin-left:auto; flex:0 0 auto; }
.mobile-menu{ display:none; }
.mobile-menu__backplate{ display:none; }
.mobile-menu__summary{
  display:flex;
  align-items:center;
  height:var(--h-navbar);
  padding:0 var(--s-8);
  border-radius:inherit;
  cursor:pointer;
  list-style:none;
}
.mobile-menu__summary::-webkit-details-marker{ display:none; }
.mobile-menu__summary::marker{ content:''; }
.mobile-menu__summary:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.mobile-menu__brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s-4);
  color:var(--ink);
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:700;
}
.mobile-menu__brand img{
  width:var(--h-control);
  height:var(--h-control);
}
.mobile-menu__toggle{
  position:relative;
  width:var(--h-row);
  height:var(--h-row);
  margin-left:auto;
  flex:none;
}
.mobile-menu__toggle::before,
.mobile-menu__toggle::after{
  content:'';
  position:absolute;
  left:var(--s-3);
  width:var(--s-8);
  height:var(--s-1);
  border-radius:var(--r-pill);
  background:var(--ink);
  transition:transform var(--dur-slow) var(--ease), top var(--dur-slow) var(--ease);
}
.mobile-menu__toggle::before{ top:var(--s-5); }
.mobile-menu__toggle::after{ top:var(--s-8); }
.mobile-menu[open] .mobile-menu__toggle::before{
  top:calc(50% - var(--s-1) / 2);
  transform:rotate(45deg);
}
.mobile-menu[open] .mobile-menu__toggle::after{
  top:calc(50% - var(--s-1) / 2);
  transform:rotate(-45deg);
}
.mobile-menu__actions{
  display:grid;
  gap:var(--s-5);
  padding:var(--s-13) var(--s-8) var(--s-9);
}
.mobile-menu__actions .btn{
  width:100%;
  height:var(--h-cta);
  border-radius:var(--r-pill);
  font-size:var(--t-prose-lg);
  line-height:var(--t-prose-lg-lh);
}

@media (max-width:760px){
  .nav-wrap{
    top:0;
    height:calc(var(--h-navbar) + var(--s-7));
    isolation:isolate;
  }
  .nav-wrap:has(.mobile-menu[open]) .mobile-menu__backplate{
    position:absolute;
    z-index:0;
    top:var(--s-7);
    right:var(--s-8);
    left:var(--s-8);
    display:block;
    height:calc(var(--h-navbar) + var(--s-13) + var(--h-cta) * 2 + var(--s-5) + var(--s-9));
    border-radius:var(--r-5xl);
    background:var(--n-900);
    transform:translateY(var(--s-9));
  }
  .nav{ display:none; }
  .mobile-menu{
    z-index:1;
    position:absolute;
    top:var(--s-7);
    right:var(--s-8);
    left:var(--s-8);
    display:block;
    border-radius:var(--r-pill);
    background:var(--glass-bg);
    -webkit-backdrop-filter:var(--glass-blur);
            backdrop-filter:var(--glass-blur);
    box-shadow:var(--shadow-popover), var(--shadow-ring);
  }
  .mobile-menu[open]{
    border-radius:var(--r-5xl);
    background:var(--bg-canvas);
    box-shadow:var(--shadow-popover), var(--shadow-ring);
  }
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-weight:var(--fw-medium);
  transition:var(--transition-button);
}
.btn:focus-visible{ outline:1px solid var(--accent); outline-offset:1px; }

/* Touch: the nav pills stay 36–40px tall for looks, but a coarse pointer
   gets a 44px hit box via an overlay that costs no layout. */
@media (pointer:coarse){
  .btn{ position:relative; }
  .btn::after{
    content:'';
    position:absolute;
    inset:50% 0 auto 0;
    height:44px;
    transform:translateY(-50%);
  }
}

.btn--ghost,
.btn--dark{
  /* .as-btn--pill: 36px, fully round, --t-prose */
  height:var(--h-row);
  padding:0 var(--s-6);
  border-radius:var(--r-pill);
  font-size:var(--t-prose);
  line-height:24px;
  letter-spacing:var(--t-prose-ls);
  box-shadow:var(--shadow-raised);
}
.btn--ghost{ color:var(--ink); background:var(--bg-canvas); }
.btn--ghost:hover{ background:var(--bg-sunken); }
.btn--dark{ color:var(--ink-on-dark); background:var(--n-900); }
.btn--dark:hover{ background:var(--n-950); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--s-18) var(--s-9) 0;
  text-align:center;
}
.hero-mascot{
  position:absolute;
  z-index:0;
  display:block;
  height:auto;
  pointer-events:none;
  user-select:none;
}
.hero-mascot--left{
  top:calc(var(--s-18) * 3 + var(--s-3) - var(--s-16));
  left:calc(0px - var(--s-17));
  width:calc(var(--s-18) * 2 + var(--s-2));
}
.hero-mascot--right{
  bottom:0;
  right:calc(0px - var(--s-19) - var(--s-11));
  width:calc(var(--s-18) * 2 + var(--s-2));
  transform:scaleX(-1);
}
.hero h1,
.hero p,
.hero .cta-row{
  position:relative;
  z-index:1;
}

@media (max-width:1320px){
  .hero-mascot--right{
    right:var(--s-5);
    width:calc(var(--s-16) * 2 + var(--s-4));
  }
}
@media (max-width:1200px){
  .hero-mascot--left{
    left:var(--s-5);
    width:calc(var(--s-16) * 2 + var(--s-4));
  }
}
@media (max-width:900px){
  .hero-mascot{ display:none; }
}


.hero h1{
  font-weight:900;
  font-size:var(--t-hero);
  line-height:1.03;
  letter-spacing:var(--t-hero-ls);
  color:var(--ink);
  text-wrap:balance;
}

/* The forced break is a block span, not a <br>: hiding a <br> on mobile
   also eats the word space and jams "MoneyFrom" into one unbreakable run. */
.hero h1 .line-2{ display:block; }

.hero p{
  margin:var(--s-9) auto 0;
  max-width:34em;
  font-weight:var(--fw-regular);
  font-size:var(--t-prose-lg);
  line-height:1.55;
  letter-spacing:-0.011em;
  color:var(--ink-2);
  text-wrap:balance;  /* two lines: even them, don't just fix the last */
}
.hero p b{ font-weight:var(--fw-medium); color:var(--ink); }

.cta-row{ margin-top:var(--s-11); }

.btn--cta{
  height:var(--h-cta);
  padding:0 var(--s-10);
  border-radius:var(--r-xl);
  /* .as-btn--cta type */
  font-size:var(--t-prose-lg);
  line-height:var(--t-prose-lg-lh);
  letter-spacing:var(--t-prose-lg-ls);
  color:var(--ink-on-dark);
  background:var(--n-900);
  box-shadow:var(--shadow-raised);
}
.btn--cta:hover{ background:var(--n-950); transform:translateY(-1px); }

/* ── Trusted by marquee ───────────────────────────────────────────────────
   The audience labels are product truth, not invented customer logos. The
   duplicated group makes one native CSS loop; focus or hover pauses it. */
.trusted-strip{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:var(--s-11);
  width:100%;
  max-width:calc(var(--container-text) + var(--s-9) * 2);
  margin:var(--s-11) auto 0;
  padding:0 var(--s-9);
}
.trusted-strip__label{
  color:var(--ink-4);
  font-size:var(--t-prose-lg);
  line-height:var(--t-prose-lg-lh);
  letter-spacing:var(--t-prose-lg-ls);
  white-space:nowrap;
}
.trusted-marquee{
  min-width:0;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, var(--ink) var(--s-11), var(--ink) calc(100% - var(--s-11)), transparent);
          mask-image:linear-gradient(to right, transparent, var(--ink) var(--s-11), var(--ink) calc(100% - var(--s-11)), transparent);
}
.trusted-marquee:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.trusted-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:trusted-scroll 28s linear infinite;
}
.trusted-marquee:hover .trusted-track,
.trusted-marquee:focus .trusted-track{ animation-play-state:paused; }
.trusted-group{
  display:flex;
  gap:var(--s-5);
  padding-right:var(--s-5);
}
.trusted-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--s-4);
  height:var(--h-cta);
  padding:0 var(--s-6) 0 var(--s-3);
  flex:none;
  border-radius:var(--r-pill);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-ring);
  color:var(--ink-2);
  font-size:var(--t-prose);
  line-height:var(--t-prose-lh);
  letter-spacing:var(--t-prose-ls);
  font-weight:var(--fw-medium);
  white-space:nowrap;
}
.trusted-pill__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-control);
  height:var(--h-control);
  border-radius:var(--r-squircle);
  background:var(--pill-bg);
  box-shadow:inset 0 0 0 1px var(--pill-ring);
  color:var(--pill-fg);
}
.trusted-pill__mark .os-icon{
  width:calc(var(--icon) - var(--s-1));
  height:calc(var(--icon) - var(--s-1));
}
.trusted-pill--purple{
  --pill-bg:var(--tag-purple-bg);
  --pill-ring:var(--tag-purple-ring);
  --pill-fg:var(--tag-purple-fg);
}
.trusted-pill--blue{
  --pill-bg:var(--tag-blue-bg);
  --pill-ring:var(--tag-blue-ring);
  --pill-fg:var(--tag-blue-fg);
}
.trusted-pill--amber{
  --pill-bg:var(--tag-amber-bg);
  --pill-ring:var(--tag-amber-ring);
  --pill-fg:var(--tag-amber-fg);
}
.trusted-pill--red{
  --pill-bg:var(--tag-red-bg);
  --pill-ring:var(--tag-red-ring);
  --pill-fg:var(--tag-red-fg);
}
.trusted-pill--cyan{
  --pill-bg:var(--tag-cyan-bg);
  --pill-ring:var(--tag-cyan-ring);
  --pill-fg:var(--tag-cyan-fg);
}
.trusted-pill--green{
  --pill-bg:var(--tag-green-bg);
  --pill-ring:var(--tag-green-ring);
  --pill-fg:var(--tag-green-fg);
}
@keyframes trusted-scroll{
  to{ transform:translateX(-50%); }
}
@media (max-width:760px){
  .trusted-strip{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-6);
    margin-top:var(--s-11);
    padding:0 var(--s-7);
  }
  .trusted-strip__label{
    font-size:var(--t-prose);
    line-height:var(--t-prose-lh);
    text-align:center;
  }
  .trusted-marquee{
    -webkit-mask-image:linear-gradient(to right, transparent, var(--ink) var(--s-7), var(--ink) calc(100% - var(--s-7)), transparent);
            mask-image:linear-gradient(to right, transparent, var(--ink) var(--s-7), var(--ink) calc(100% - var(--s-7)), transparent);
  }
  .trusted-pill{
    height:var(--h-row-head);
    font-size:var(--t-body);
    line-height:var(--t-body-lh);
  }
  .trusted-pill__mark{
    width:var(--h-control-sm);
    height:var(--h-control-sm);
  }
}


/* ── VSL ─────────────────────────────────────────────────────────────────── */
.vsl{
  max-width:calc(var(--container-text) + var(--s-9) * 2);
  margin:var(--s-11) auto 0;
  padding:0 var(--s-9);
}

.vsl-frame{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:960 / 538;
  border:0;
  border-radius:var(--r-3xl);
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, var(--n-800) 0%, var(--n-900) 55%, var(--n-950) 100%);
  box-shadow:var(--shadow-float);
}


/* ── Letter ──────────────────────────────────────────────────────────────
   A letter is read, not scanned, so this block is left-aligned while the
   hero above it is centred. The card floats on --bg-subtle for the same
   reason the nav pill and the VSL frame float: it is the one visual idea
   the page repeats.
   ───────────────────────────────────────────────────────────────────────── */
.letter{
  margin-top:var(--s-16);
  padding:var(--s-16) var(--s-9);
  background:var(--bg-subtle);
}

.letter-card{
  /* rem, not em: the card inherits the 14px body size, so `em` here would
     have set the measure off the wrong font and come out ~53ch. 38rem of
     content is ~67 characters at the 18px prose size. */
  max-width:calc(38rem + var(--s-16) * 2);
  margin:0 auto;
  padding:var(--s-16);
  border-radius:var(--r-4xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-float);
}

/* Letterhead. Replaces the "from the founder" eyebrow: the name, date and
   place say the same thing and say it the way a letter says it. */
.letterhead{
  margin-top:var(--s-8);
  padding-bottom:var(--s-9);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.letterhead-name{
  font-size:var(--t-prose);
  line-height:24px;
  font-weight:var(--fw-medium);
  letter-spacing:var(--t-prose-ls);
  color:var(--ink);
}
.letterhead p{
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  font-weight:var(--fw-medium);
  letter-spacing:var(--t-label-ls);
  color:var(--ink-4);
}

.letter h2{
  margin-top:0;
  font-weight:900;
  font-size:clamp(30px, 3.6vw, 48px);
  line-height:1.06;
  letter-spacing:-0.03em;
  color:var(--ink);
}

.letter-lead{
  margin-top:var(--s-9);
  font-size:var(--t-lead);
  line-height:1.4;
  letter-spacing:var(--t-lead-ls);
  font-weight:var(--fw-medium);
  color:var(--ink);
}

/* Page-layer prose is ratio line-height (1.45 at 18px, DESIGN-SYSTEM §3).
   A letter wants more air than that, so the air comes from the gap between
   paragraphs rather than from stretching the ratio. */
.letter-body p{
  margin-top:var(--s-9);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  color:var(--ink-2);
}
.letter-body strong{ font-weight:var(--fw-medium); color:var(--ink); }

.signoff{
  display:flex;
  align-items:center;
  gap:var(--s-6);
  margin-top:var(--s-12);
  padding-top:var(--s-9);
  box-shadow:inset 0 1px 0 0 var(--border);
}
.signoff img{ width:32px; height:32px; }
.signoff-name{
  font-size:var(--t-prose);
  line-height:24px;
  font-weight:var(--fw-medium);
  letter-spacing:var(--t-prose-ls);
  color:var(--ink);
}
.signoff-role{
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  font-weight:var(--fw-medium);
  letter-spacing:var(--t-label-ls);
  color:var(--ink-3);
}

/* ── Product showcase ─────────────────────────────────────────────────────
   Page-layer framing around a deliberately app-layer preview. The chrome
   below mirrors Ariyel OS: Inter, 28px controls, quiet tonal states and
   hairline surfaces. */
.showcase{
  padding:var(--s-18) var(--s-9) var(--s-19);
  overflow:hidden;
}
.showcase__inner{
  width:100%;
  max-width:var(--container-wide);
  margin:0 auto;
}
.showcase__copy{
  max-width:calc(var(--container-text) - var(--s-19));
  margin:0 auto;
  text-align:center;
}
.showcase__copy h2{
  margin:0;
  scroll-margin-top:calc(var(--s-17) + var(--s-7));
  font-size:clamp(var(--t-display-md), 4vw, var(--t-display-lg));
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  color:var(--ink);
  text-wrap:balance;
}
.showcase__copy p{
  max-width:36em;
  margin:var(--s-8) auto 0;
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  color:var(--ink-2);
  text-wrap:balance;
}
.showcase__tabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--s-2);
  max-width:calc(var(--container-text) - var(--s-18));
  margin:var(--s-12) auto 0;
  padding:var(--s-2);
  border-radius:var(--r-pill);
  background:var(--bg-hover);
  box-shadow:var(--shadow-ring);
}
.showcase__tab{
  height:var(--h-row);
  padding:0 var(--s-8);
  border:0;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-2);
  font-family:var(--font-marketing);
  font-size:var(--t-prose);
  line-height:24px;
  letter-spacing:var(--t-prose-ls);
  font-weight:var(--fw-medium);
  cursor:pointer;
  transition:var(--transition-ghost);
}
.showcase__tab:hover{ background:var(--a-1); color:var(--ink); }
.showcase:has(#view-reports:checked) .showcase__tab[for="view-reports"],
.showcase:has(#view-pipeline:checked) .showcase__tab[for="view-pipeline"],
.showcase:has(#view-workflows:checked) .showcase__tab[for="view-workflows"]{
  background:var(--bg-canvas);
  color:var(--ink);
  box-shadow:var(--shadow-raised);
}
.showcase__tab:focus-visible{ outline:1px solid var(--accent); outline-offset:1px; }

.product-tray{
  margin-top:var(--s-12);
  padding:var(--s-4);
  border-radius:var(--r-4xl);
  background:var(--bg-hover);
}
.os-screen{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  height:672px;
  overflow:hidden;
  border-radius:var(--r-2xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  letter-spacing:var(--t-body-ls);
  font-weight:var(--fw-medium);
  color:var(--ink);
}
.os-icon{
  width:var(--icon);
  height:var(--icon);
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.os-sidebar{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:var(--s-4);
  background:var(--bg-subtle);
  box-shadow:inset -1px 0 0 0 var(--border);
}
.os-workspace{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control-lg);
  padding:0 var(--s-2);
}
.os-workspace img{
  width:24px;
  height:24px;
  border-radius:var(--r-squircle);
  box-shadow:var(--shadow-hairline);
}
.os-workspace span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;
}
.os-search{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  margin-top:var(--s-4);
  padding:0 var(--s-4);
  border-radius:var(--r-md);
  color:var(--ink-4);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-raised);
}
.os-search kbd{
  margin-left:auto;
  padding:0 var(--s-2);
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-ring);
  color:var(--ink-4);
  font-family:var(--font-mono);
  font-size:var(--t-micro);
  line-height:20px;
  letter-spacing:var(--t-micro-ls);
}
.os-nav{ margin-top:var(--s-7); }
.os-nav__label{
  display:flex;
  align-items:center;
  height:var(--h-control);
  padding:0 var(--s-4);
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
}
.os-navitem{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  margin-top:var(--s-1);
  padding:0 var(--s-4);
  border-radius:var(--r-lg);
  color:var(--ink-2);
}
.os-navitem__chevron{
  width:14px;
  height:14px;
  margin-left:auto;
}
.os-navitem--child{ padding-left:var(--s-8); }
.showcase:has(#view-reports:checked) .os-navitem[data-target="reports"],
.showcase:has(#view-pipeline:checked) .os-navitem[data-target="pipeline"],
.showcase:has(#view-workflows:checked) .os-navitem[data-target="workflows"]{
  background:var(--a-2);
  color:var(--ink);
}
.os-sidebar__foot{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control-lg);
  margin-top:auto;
  padding:0 var(--s-3);
  box-shadow:inset 0 1px 0 0 var(--border);
  color:var(--ink-2);
}
.os-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex:none;
  border-radius:var(--r-squircle);
  background:var(--tag-purple-bg);
  box-shadow:inset 0 0 0 1px var(--tag-purple-ring);
  color:var(--tag-purple-fg);
  font-size:var(--t-label);
}
.os-main{
  display:flex;
  min-width:0;
  min-height:0;
  flex-direction:column;
  background:var(--bg-canvas);
}
.os-topbar{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-topbar);
  flex:none;
  padding:0 var(--s-6);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.os-topbar__section{ color:var(--ink-4); }
.os-topbar__slash{ color:var(--ink-5); }
.os-topbar__current{ font-weight:var(--fw-semibold); letter-spacing:-0.02em; }
.os-topbar__spacer{ flex:1; }
.os-topbar__status{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  height:var(--h-chip);
  padding:0 var(--s-3);
  border-radius:var(--r-chip);
  background:var(--tag-green-bg);
  box-shadow:inset 0 0 0 1px var(--tag-green-ring);
  color:var(--tag-green-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.os-panel{
  display:flex;
  min-width:0;
  min-height:0;
  flex:1;
  flex-direction:column;
}
.os-panel{ display:none; }
.showcase:has(#view-reports:checked) #showcase-reports,
.showcase:has(#view-pipeline:checked) #showcase-pipeline,
.showcase:has(#view-workflows:checked) #showcase-workflows{
  display:flex;
}
.mock-toolbar{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  min-height:var(--h-topbar);
  flex:none;
  padding:0 var(--s-6);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.mock-toolbar__spacer{ flex:1; }
.mock-search,
.mock-control{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  padding:0 var(--s-4);
  border-radius:var(--r-md);
  background:var(--bg-canvas);
  color:var(--ink-3);
  box-shadow:var(--shadow-ring);
  white-space:nowrap;
}
.mock-search{ width:240px; }
.mock-action{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  padding:0 var(--s-4);
  border-radius:var(--r-md);
  background:var(--accent);
  color:var(--accent-btn-fg);
  white-space:nowrap;
}
.report-view{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:var(--s-8);
  background:var(--bg-subtle);
}
.report-head{
  display:flex;
  align-items:flex-start;
  gap:var(--s-8);
}
.report-title{
  margin:0;
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:var(--fw-semibold);
}
.report-subtitle{
  margin:var(--s-2) 0 0;
  color:var(--ink-2);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
}
.report-range{ margin-left:auto; }
.metric-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-4);
  margin-top:var(--s-8);
}
.metric-card,
.chart-card{
  background:var(--bg-canvas);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-hairline);
}
.metric-card{ padding:var(--s-7); }
.metric-label{
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
}
.metric-value{
  margin-top:var(--s-4);
  font-size:var(--t-title);
  line-height:var(--t-title-lh);
  letter-spacing:var(--t-title-ls);
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
}
.metric-delta{
  display:inline-flex;
  margin-top:var(--s-4);
  padding:0 var(--s-2);
  border-radius:var(--r-pill);
  background:var(--delta-up-bg);
  color:var(--delta-up-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.report-grid{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(240px, 1fr);
  gap:var(--s-4);
  margin-top:var(--s-4);
}
.chart-card{ padding:var(--s-7); }
.chart-card__head{
  display:flex;
  align-items:center;
  gap:var(--s-4);
}
.chart-card__title{
  margin:0;
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  letter-spacing:-0.02em;
  font-weight:var(--fw-semibold);
}
.chart-card__meta{
  margin-left:auto;
  color:var(--ink-4);
  font-size:var(--t-label);
}
.revenue-chart{
  display:block;
  width:100%;
  height:auto;
  margin-top:var(--s-6);
  overflow:visible;
}
.chart-gridline{ stroke:var(--border); stroke-width:1; }
.chart-area{ fill:var(--accent-100); }
.chart-line{ fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart-dot{ fill:var(--bg-canvas); stroke:var(--accent); stroke-width:2; }
.chart-axis{
  fill:var(--ink-4);
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:var(--fw-medium);
}
.funnel-list{
  display:flex;
  flex-direction:column;
  gap:var(--s-6);
  margin-top:var(--s-8);
}
.funnel-row__head{
  display:flex;
  gap:var(--s-4);
  color:var(--ink-2);
  font-size:var(--t-label);
}
.funnel-row__head strong{
  margin-left:auto;
  color:var(--ink);
  font-weight:var(--fw-semibold);
  font-variant-numeric:tabular-nums;
}
.funnel-track{
  height:var(--s-2);
  margin-top:var(--s-3);
  overflow:hidden;
  border-radius:var(--r-pill);
  background:var(--bg-sunken);
}
.funnel-fill{ height:100%; border-radius:inherit; background:var(--accent); }

.pipeline-view{
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.pipeline-board{
  display:flex;
  width:100%;
  min-width:0;
  height:100%;
  align-items:stretch;
  gap:var(--s-4);
  padding:var(--s-7) var(--s-4);
}
.pipeline-col{
  display:flex;
  width:auto;
  min-width:0;
  min-height:0;
  flex:1 1 0;
  flex-direction:column;
}
.pipeline-col__head{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-row);
  flex:none;
  padding:0 var(--s-5);
  border-radius:var(--r-lg);
  background:var(--a-1);
}
.stage-dot{
  width:var(--s-5);
  height:var(--s-5);
  flex:none;
  border-radius:var(--r-pill);
  background:var(--stage-bg);
  box-shadow:inset 0 0 0 1px var(--stage-ring);
}
.pipeline-col__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;
}
.pipeline-col__count{ color:var(--ink-4); }
.pipeline-col__more{ margin-left:auto; color:var(--ink-4); letter-spacing:.08em; }
.pipeline-col__body{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-4) var(--s-1);
}
.deal-card{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-6);
  border-radius:var(--r-xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
}
.deal-card__title{
  font-weight:var(--fw-semibold);
  letter-spacing:-0.02em;
}
.deal-card__company{
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.deal-tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  height:var(--h-chip);
  padding:0 var(--s-3);
  overflow:hidden;
  border-radius:var(--r-md);
  background:var(--deal-tag-bg);
  box-shadow:inset 0 0 0 1px var(--deal-tag-ring);
  color:var(--deal-tag-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.deal-card__foot{
  display:flex;
  align-items:center;
  gap:var(--s-4);
}
.deal-card__value{ font-variant-numeric:tabular-nums; }
.deal-card__owner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon);
  height:var(--icon);
  margin-left:auto;
  border-radius:var(--r-squircle);
  background:var(--tag-blue-bg);
  box-shadow:inset 0 0 0 1px var(--tag-blue-ring);
  color:var(--tag-blue-fg);
  font-size:var(--t-micro);
}
.pipeline-col__calc{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  flex:none;
  padding:0 var(--s-3);
  color:var(--ink-4);
  font-size:var(--t-label);
}
.pipeline-col__calc strong{
  margin-left:auto;
  color:var(--ink);
  font-weight:var(--fw-medium);
  font-variant-numeric:tabular-nums;
}

.workflow-toolbar__tab{
  display:inline-flex;
  align-items:center;
  height:var(--h-control);
  padding:0 var(--s-4);
  border-radius:var(--r-md);
  color:var(--ink-3);
}
.workflow-toolbar__tab.is-active{
  background:var(--a-2);
  color:var(--ink);
}
.workflow-live{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control);
  padding:0 var(--s-4);
  border-radius:var(--r-pill);
  background:var(--a-1);
  color:var(--ink-2);
}
.workflow-live__switch{
  position:relative;
  width:28px;
  height:16px;
  border-radius:var(--r-pill);
  background:var(--success-strong);
}
.workflow-live__switch::after{
  content:'';
  position:absolute;
  top:var(--s-1);
  right:var(--s-1);
  width:12px;
  height:12px;
  border-radius:var(--r-pill);
  background:var(--accent-btn-fg);
}
.workflow-canvas{
  position:relative;
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background-color:var(--bg-canvas);
  background-image:radial-gradient(circle, var(--canvas-dot) 1px, transparent 1px);
  background-size:var(--s-9) var(--s-9);
}
.workflow-map{
  position:relative;
  width:940px;
  height:100%;
  min-height:520px;
  margin:0 auto;
  transform-origin:top left;
}
.workflow-caption{
  position:absolute;
  top:var(--s-7);
  left:var(--s-7);
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-row);
  padding:0 var(--s-4);
  border-radius:var(--r-xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-raised);
}
.workflow-caption__dot{
  width:var(--s-4);
  height:var(--s-4);
  border-radius:var(--r-pill);
  background:var(--success);
}
.workflow-wires{
  position:absolute;
  inset:0;
  width:940px;
  height:520px;
  color:var(--ink-5);
  pointer-events:none;
}
.workflow-wires--mobile{ display:none; }
.workflow-wires path{
  fill:none;
  stroke:currentColor;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.workflow-node{
  position:absolute;
  width:220px;
}
.workflow-node--trigger{ left:40px; top:190px; }
.workflow-node--if{ left:340px; top:190px; }
.workflow-node--sequence{ left:640px; top:86px; }
.workflow-node--task{ left:640px; top:304px; }
.workflow-node__card{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-raised);
}
.workflow-node--selected .workflow-node__card{
  box-shadow:inset 0 0 0 1px var(--accent), var(--shadow-raised);
}
.workflow-node__tab{
  position:absolute;
  top:0;
  left:var(--s-5);
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  height:var(--h-chip);
  padding:0 var(--s-3);
  border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--node-bg);
  box-shadow:inset 0 0 0 1px var(--node-ring);
  color:var(--node-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.workflow-node__body{
  display:flex;
  flex-direction:column;
  gap:var(--s-1);
  padding:26px var(--s-5) var(--s-4);
}
.workflow-node__identity{
  display:flex;
  align-items:center;
  gap:var(--s-2);
}
.workflow-node__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:var(--r-sm);
  background:var(--node-bg);
  box-shadow:inset 0 0 0 1px var(--node-ring);
  color:var(--node-fg);
}
.workflow-node__mark .os-icon{ width:14px; height:14px; }
.workflow-node__desc{
  margin:0;
  padding-left:var(--s-10);
  color:var(--ink-2);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.workflow-node__foot{
  height:var(--h-control-sm);
  padding:0 var(--s-5);
  background:var(--bg-subtle);
  box-shadow:inset 0 1px 0 0 var(--border);
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--h-control-sm);
}
.workflow-port{
  position:absolute;
  top:50%;
  right:-5px;
  width:var(--s-5);
  height:var(--s-5);
  margin-top:-5px;
  border-radius:var(--r-pill);
  background:var(--bg-canvas);
  box-shadow:inset 0 0 0 1px var(--ink-5);
}
.workflow-node--trigger .workflow-port{ top:56px; }
.workflow-node--if .workflow-port--true{ top:46px; }
.workflow-node--if .workflow-port--false{ top:82px; }
.workflow-node--if .workflow-port::after{
  content:'';
  position:absolute;
  top:50%;
  left:100%;
  width:14px;
  height:1px;
  background:var(--ink-5);
  transform:translateY(-50%);
}
.workflow-branch{
  position:absolute;
  right:var(--s-5);
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.workflow-branch--true{ top:36px; }
.workflow-branch--false{ top:72px; }

@media (max-width:900px){
  .os-screen{ grid-template-columns:minmax(0, 1fr); }
  .os-sidebar{ display:none; }
  .workflow-map{ margin:0; transform:scale(.84); }
}
@media (max-width:760px){
  .showcase{ padding:var(--s-16) var(--s-7) var(--s-17); }
  .showcase__copy p{ font-size:var(--t-prose); line-height:1.4; }
  .showcase__tabs{ margin-top:var(--s-11); }
  .showcase__tab{ padding:0 var(--s-3); font-size:var(--t-body); line-height:var(--t-body-lh); }
  .product-tray{ margin-top:var(--s-9); padding:var(--s-2); border-radius:var(--r-2xl); }
  .os-screen{ height:560px; border-radius:var(--r-xl); }
  .mock-search{ width:160px; }
  .metric-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .report-grid{ grid-template-columns:minmax(0, 1fr); }
  .report-grid .chart-card:last-child{ display:none; }
  .pipeline-view{ overflow:hidden auto; }
  .pipeline-board{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    height:auto;
    min-height:100%;
    align-content:start;
  }
  .pipeline-col{ width:auto; min-height:360px; }
  .workflow-map{ transform:scale(.7); }
}
@media (max-width:600px){
  .workflow-map{ transform:scale(.52); }
}
@media (max-width:520px){
  .mock-toolbar{ padding:0 var(--s-4); }
  .mock-search{ width:auto; flex:1; }
  .mock-control--optional{ display:none; }
  .report-view{ padding:var(--s-6); }
  .report-head{ align-items:center; }
  .metric-card{ padding:var(--s-6); }
  .metric-value{ font-size:var(--t-heading); line-height:var(--t-heading-lh); }
  .pipeline-board{ grid-template-columns:minmax(0, 1fr); }

  #showcase-reports .mock-toolbar__spacer,
  #showcase-reports .mock-toolbar > .mock-control{ display:none; }
  #showcase-reports .mock-search{ min-width:0; }
  #showcase-reports .mock-search span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #showcase-workflows .mock-toolbar{ gap:var(--s-2); }
  #showcase-workflows .workflow-toolbar__tab{ padding:0 var(--s-3); }
  #showcase-workflows .workflow-toolbar__tab--settings{ display:none; }
  #showcase-workflows .mock-toolbar__spacer{ min-width:0; }
  #showcase-workflows .workflow-live{
    gap:var(--s-2);
    padding:0 var(--s-3);
  }
  #showcase-workflows .workflow-live__switch{ width:var(--h-control-sm); }
  #showcase-workflows .mock-action{ padding:0 var(--s-3); }

  .workflow-map{
    width:100%;
    min-height:calc(var(--s-19) * 3 + var(--s-14));
    margin:0;
    transform:none;
  }
  .workflow-wires--desktop{ display:none; }
  .workflow-wires--mobile{
    display:block;
    width:100%;
    height:calc(var(--s-19) * 3 + var(--s-14));
  }
  .workflow-node--trigger,
  .workflow-node--if{
    right:auto;
    left:50%;
    width:220px;
    transform:translateX(-50%);
  }
  .workflow-node--trigger{ top:var(--s-15); }
  .workflow-node--if{ top:calc(var(--s-15) + var(--s-18)); }
  .workflow-node--sequence,
  .workflow-node--task{
    top:calc(var(--s-15) + var(--s-18) + var(--s-19));
    width:calc(50% - var(--s-8));
    transform:none;
  }
  .workflow-node--sequence{ left:var(--s-6); }
  .workflow-node--task{ right:var(--s-6); left:auto; }
  .workflow-port,
  .workflow-branch{ display:none; }
}

/* ── Courses + Fulfillment ────────────────────────────────────────────────
   The reference-led treatment: two soft feature tiles, focused UI moments,
   tiny colour accents, and copy anchored underneath each illustration. */
.scale-section{
  padding:var(--s-18) var(--s-9) var(--s-19);
  overflow:hidden;
  background:var(--bg-canvas);
}
.scale-section__inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
.scale-intro{
  max-width:calc(var(--container-text) - var(--s-19));
  margin:0 auto;
  text-align:center;
}
.scale-intro h2{
  margin:0;
  scroll-margin-top:calc(var(--s-17) + var(--s-7));
  color:var(--ink);
  font-size:clamp(var(--t-display-md), 4vw, var(--t-display-lg));
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  text-wrap:balance;
}
.scale-intro p{
  max-width:36em;
  margin:var(--s-8) auto 0;
  color:var(--ink-2);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  text-wrap:balance;
}
.scale-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-7);
  margin-top:var(--s-13);
}
.scale-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:var(--s-12) var(--s-9) var(--s-10);
  border-radius:var(--r-4xl);
  background:var(--bg-hover);
}
.scale-card__visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:calc(var(--s-19) * 2 + var(--s-13));
  padding:0 var(--s-8);
  overflow:hidden;
}
.scale-card__visual::before,
.scale-card__visual::after{
  content:'';
  position:absolute;
  border-radius:var(--r-pill);
}
.scale-card__visual::before{
  width:calc(var(--s-17) * 2);
  height:calc(var(--s-17) * 2);
  top:var(--s-7);
  right:0;
  background:var(--tag-purple-bg);
}
.scale-card__visual::after{
  width:var(--s-15);
  height:var(--s-15);
  left:var(--s-4);
  bottom:var(--s-7);
  background:var(--tag-blue-bg);
}
.scale-card__visual--fulfillment::before{ background:var(--tag-green-bg); }
.scale-card__visual--fulfillment::after{ background:var(--tag-amber-bg); }
.scale-card__copy{
  margin-top:var(--s-8);
  padding:0 var(--s-2);
}
.scale-card__label{
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
}
.scale-card__copy h3{
  margin:var(--s-3) 0 0;
  color:var(--ink);
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:var(--fw-semibold);
  text-wrap:balance;
}
.scale-card__copy p{
  margin:var(--s-3) 0 0;
  color:var(--ink-2);
  font-size:var(--t-prose);
  line-height:1.4;
  letter-spacing:var(--t-prose-ls);
}
.mini-app{
  position:relative;
  z-index:1;
  width:100%;
  max-width:calc(var(--col-half) - var(--s-13));
  height:calc(var(--s-19) * 2 + var(--s-9));
  overflow:hidden;
  border-radius:var(--r-2xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  font-weight:var(--fw-medium);
  letter-spacing:var(--t-body-ls);
}
.mini-app__bar{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-row-head);
  padding:0 var(--s-7);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.mini-app__dots{
  display:flex;
  gap:var(--s-2);
  margin-right:var(--s-2);
}
.mini-app__dots span{
  width:var(--s-3);
  height:var(--s-3);
  border-radius:var(--r-pill);
}
.mini-app__dots span:nth-child(1){ background:var(--danger); }
.mini-app__dots span:nth-child(2){ background:var(--warning); }
.mini-app__dots span:nth-child(3){ background:var(--success); }
.mini-app__title{ font-weight:var(--fw-semibold); }
.mini-app__status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  height:var(--h-chip);
  margin-left:auto;
  padding:0 var(--s-3);
  border-radius:var(--r-chip);
  background:var(--status-bg);
  box-shadow:inset 0 0 0 1px var(--status-ring);
  color:var(--status-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.mini-app__status--purple{
  --status-bg:var(--tag-purple-bg);
  --status-ring:var(--tag-purple-ring);
  --status-fg:var(--tag-purple-fg);
}
.mini-app__status--green{
  --status-bg:var(--tag-green-bg);
  --status-ring:var(--tag-green-ring);
  --status-fg:var(--tag-green-fg);
}
.mini-app__body{ padding:var(--s-6); }
.course-mini__head{
  display:grid;
  grid-template-columns:var(--h-control-lg) minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-4);
}
.mini-app__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-control-lg);
  height:var(--h-control-lg);
  border-radius:var(--r-squircle);
}
.mini-app__mark--courses{
  background:var(--tag-purple-bg);
  box-shadow:inset 0 0 0 1px var(--tag-purple-ring);
  color:var(--tag-purple-fg);
}
.course-mini__title strong,
.fulfill-mini__title strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:var(--fw-semibold);
}
.course-mini__title span,
.fulfill-mini__title span{
  display:block;
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.course-mini__count{
  color:var(--tag-purple-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  font-weight:var(--fw-semibold);
}
.mini-progress{
  height:var(--s-2);
  margin-top:var(--s-5);
  overflow:hidden;
  border-radius:var(--r-pill);
  background:var(--bg-sunken);
}
.mini-progress span{
  display:block;
  width:60%;
  height:100%;
  border-radius:inherit;
  background:var(--accent);
}
.mini-progress--green span{ width:63%; background:var(--success-strong); }
.mini-list-label{
  margin:var(--s-6) 0 var(--s-2);
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.mini-lesson{
  display:grid;
  grid-template-columns:var(--h-chip) minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-4);
  height:var(--h-row);
  padding:0 var(--s-4);
  color:var(--ink-3);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.mini-lesson.is-active{
  border-radius:var(--r-xl);
  background:var(--tag-purple-bg);
  box-shadow:inset 0 0 0 1px var(--tag-purple-ring);
  color:var(--ink);
  font-weight:var(--fw-semibold);
}
.mini-lesson__number,
.mini-step__tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-chip);
  height:var(--h-chip);
  border-radius:var(--r-pill);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-ring);
  color:var(--ink-4);
  font-size:var(--t-micro);
  line-height:var(--t-micro-lh);
}
.mini-lesson.is-done .mini-lesson__number,
.mini-step.is-done .mini-step__tick{
  background:var(--tag-green-bg);
  box-shadow:inset 0 0 0 1px var(--tag-green-ring);
  color:var(--tag-green-fg);
}
.mini-lesson__time{
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.fulfill-mini__head{
  display:flex;
  align-items:flex-end;
  gap:var(--s-6);
}
.fulfill-mini__progress{
  width:var(--s-17);
  margin-left:auto;
}
.fulfill-mini__progress-label{
  display:flex;
  justify-content:space-between;
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.fulfill-mini__progress-label strong{
  color:var(--ink-2);
  font-weight:var(--fw-semibold);
}
.fulfill-mini__next{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:var(--s-5);
  margin-top:var(--s-6);
  padding:var(--s-4) var(--s-6);
  border-radius:var(--r-xl);
  background:var(--tag-amber-bg);
  box-shadow:inset 0 0 0 1px var(--tag-amber-ring);
}
.fulfill-mini__next span{
  display:block;
  color:var(--tag-amber-fg);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
}
.fulfill-mini__next strong{
  display:block;
  margin-top:var(--s-1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:var(--fw-semibold);
}
.fulfill-mini__due{
  height:var(--h-chip);
  padding:0 var(--s-3);
  border-radius:var(--r-chip);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-ring);
  color:var(--tag-amber-fg);
  font-size:var(--t-label);
  line-height:var(--h-chip);
  white-space:nowrap;
}
.mini-step{
  display:grid;
  grid-template-columns:var(--h-chip) minmax(0, 1fr) var(--h-chip) var(--s-14);
  align-items:center;
  gap:var(--s-3);
  height:var(--h-row);
  padding:0 var(--s-4);
  box-shadow:inset 0 -1px 0 0 var(--border);
}
.mini-step.is-current{
  border-radius:var(--r-xl);
  background:var(--tag-blue-bg);
  box-shadow:inset 0 0 0 1px var(--tag-blue-ring);
}
.mini-step__name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mini-step.is-done .mini-step__name{
  color:var(--ink-4);
  text-decoration:line-through;
}
.mini-owner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-chip);
  height:var(--h-chip);
  border-radius:var(--r-squircle);
  background:var(--tag-blue-bg);
  color:var(--tag-blue-fg);
  font-size:var(--t-micro);
  line-height:var(--t-micro-lh);
}
.mini-step__due{
  color:var(--ink-4);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  text-align:right;
  white-space:nowrap;
}
.mini-step.is-current .mini-step__due{ color:var(--info-deep); }
.scale-float{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  height:var(--h-control-lg);
  padding:0 var(--s-5) 0 var(--s-3);
  border-radius:var(--r-pill);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-raised);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  font-weight:var(--fw-medium);
}
.scale-float--courses{ right:var(--s-3); bottom:var(--s-7); }
.scale-float--fulfillment{ left:var(--s-3); bottom:var(--s-7); }
.scale-float__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-chip);
  height:var(--h-chip);
  border-radius:var(--r-pill);
  background:var(--tag-purple-bg);
}
.scale-float__mark img{ width:var(--icon); height:var(--icon); }
.scale-float--fulfillment .scale-float__mark{
  background:var(--tag-green-bg);
  color:var(--tag-green-fg);
}

@media (max-width:900px){
  .scale-section__inner{ max-width:calc(var(--col-half) + var(--s-15)); }
  .scale-grid{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:760px){
  .scale-section{ padding:var(--s-16) var(--s-7) var(--s-17); }
  .scale-intro p{ font-size:var(--t-prose); line-height:1.4; }
  .scale-grid{ margin-top:var(--s-13); }
  .scale-card{ padding:var(--s-11) var(--s-7) var(--s-9); }
  .scale-card__visual{ padding:0; }
}
@media (max-width:520px){
  .scale-intro h2{ font-size:var(--t-display-md); line-height:var(--t-display-md-lh); }
  .scale-card__copy h3{ font-size:var(--t-title); line-height:var(--t-title-lh); }
  .scale-card__visual::before{
    width:var(--s-19);
    height:var(--s-19);
  }
  .scale-float{ display:none; }
  .mini-app__body{ padding:var(--s-5); }
  .mini-app__bar{ padding:0 var(--s-5); }
  .mini-lesson,
  .mini-step{ padding:0 var(--s-2); }
  .mini-lesson__time{ display:none; }
  .fulfill-mini__progress{ width:var(--s-15); }
  .mini-step{ grid-template-columns:var(--h-chip) minmax(0, 1fr) var(--h-chip); }
  .mini-step__due{ display:none; }
}

/* ── Before + after comparison ────────────────────────────────────────────
   The scroll runway pins both cards while the Ariyel card moves over the
   old way of working. At compact widths the same content simply stacks. */
.comparison-section{
  padding:var(--s-18) var(--s-9) 0;
  background:var(--bg-canvas);
}
.comparison-intro{
  max-width:calc(var(--container-text) - var(--s-19));
  margin:0 auto;
  text-align:center;
}
.comparison-intro h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(var(--t-display-md), 4vw, var(--t-display-lg));
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  text-wrap:balance;
}
.comparison-intro p{
  max-width:36em;
  margin:var(--s-8) auto 0;
  color:var(--ink-2);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  text-wrap:balance;
}
.comparison-scroll{
  position:relative;
  height:auto;
  margin-top:var(--s-15);
}
.comparison-sticky{
  position:static;
}
.comparison-stage{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-11);
  width:100%;
  max-width:var(--container-wide);
  margin:0 auto;
}
.comparison-card{
  display:flex;
  min-width:0;
  min-height:calc(var(--s-19) * 6);
  flex-direction:column;
  padding:var(--s-13) var(--s-7) var(--s-7);
  border-radius:var(--r-5xl);
}
.comparison-card--before{
  z-index:1;
  background:var(--bg-hover);
}
.comparison-card--after{
  position:relative;
  z-index:2;
  background:var(--bg-canvas);
  box-shadow:var(--shadow-accent);
  transform-origin:center;
}
.comparison-card__head{ text-align:center; }
.comparison-card__head h3{
  margin:0;
  color:var(--ink-4);
  font-size:var(--t-display-md);
  line-height:var(--t-display-md-lh);
  letter-spacing:-0.03em;
  font-weight:900;
}
.comparison-card--after .comparison-card__head h3{ color:var(--accent-500); }
.comparison-card__head p{
  margin:var(--s-3) 0 0;
  color:var(--ink);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
}
.comparison-list{
  display:grid;
  gap:var(--s-6);
  margin:var(--s-12) 0 var(--s-12);
  padding:0 var(--s-8);
  list-style:none;
}
.comparison-list li{
  display:grid;
  grid-template-columns:var(--h-control) minmax(0, 1fr);
  align-items:start;
  gap:var(--s-5);
  color:var(--ink);
  font-size:var(--t-prose-lg);
  line-height:var(--h-control);
  letter-spacing:var(--t-prose-lg-ls);
}
.comparison-list__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--h-control);
  height:var(--h-control);
  border-radius:var(--r-lg);
  background:var(--bg-sunken);
  color:var(--ink-4);
  font-size:var(--t-prose);
  line-height:1;
  font-weight:var(--fw-semibold);
}
.comparison-card--after .comparison-list__mark{
  background:var(--accent);
  color:var(--accent-fg);
}
.comparison-list__mark .os-icon{ width:var(--icon); height:var(--icon); }
.comparison-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--s-5);
  margin:auto 0 0;
}
.comparison-stat{
  min-width:0;
  min-height:var(--s-17);
  padding:var(--s-7);
  border-radius:var(--r-2xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
}
.comparison-stat dt{
  overflow:hidden;
  margin:0;
  color:var(--ink-2);
  font-size:var(--t-prose);
  line-height:var(--t-prose-lh);
  letter-spacing:var(--t-prose-ls);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.comparison-card--after .comparison-stat dt{ color:var(--accent-500); }
.comparison-stat dd{ margin:0; }
.comparison-stat__row{
  display:flex;
  align-items:flex-end;
  gap:var(--s-4);
  margin-top:var(--s-3);
}
.comparison-stat__value{
  min-width:0;
  color:var(--ink);
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:var(--fw-medium);
  text-wrap:balance;
}
.comparison-delta{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-chip);
  margin-left:auto;
  padding:0 var(--s-4);
  flex:none;
  border-radius:var(--r-pill);
  background:var(--tag-green-bg);
  color:var(--tag-green-fg);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  font-weight:var(--fw-medium);
  white-space:nowrap;
}
.comparison-stat--wide{
  position:relative;
  grid-column:1 / -1;
  min-height:calc(var(--s-17) * 2);
  overflow:hidden;
}
.comparison-stat--wide .comparison-stat__value{
  font-size:var(--t-display-md);
  line-height:var(--t-display-md-lh);
  letter-spacing:-0.03em;
  font-weight:900;
}
.comparison-mascot{
  position:absolute;
  z-index:1;
  right:var(--s-3);
  bottom:calc(0px - var(--s-4));
  display:block;
  width:calc(var(--s-16) * 2 + var(--s-3));
  height:auto;
  pointer-events:none;
  user-select:none;
}
.comparison-cta{
  display:flex;
  justify-content:center;
  margin-top:var(--s-12);
}

@media (max-width:900px){
  .comparison-section{ padding-bottom:var(--s-18); }
  .comparison-scroll{ height:auto; }
  .comparison-sticky{ position:static; }
  .comparison-stage{
    grid-template-columns:minmax(0, 1fr);
    max-width:calc(var(--col-half) + var(--s-15));
  }
  .comparison-card{ min-height:0; }
  .comparison-card--after{
    transform:none;
    will-change:auto;
  }
  .comparison-card--before{
    opacity:1;
    will-change:auto;
  }
}
@media (max-width:760px){
  .comparison-section{ padding:var(--s-16) var(--s-7) var(--s-17); }
  .comparison-intro p{ font-size:var(--t-prose); line-height:1.4; }
  .comparison-scroll{ margin-top:var(--s-13); }
  .comparison-stage{ gap:var(--s-7); }
  .comparison-card{ padding:var(--s-11) var(--s-5) var(--s-5); }
  .comparison-list{
    margin:var(--s-10) 0;
    padding:0 var(--s-4);
  }
}
@media (max-width:520px){
  .comparison-intro h2{ font-size:var(--t-display-md); line-height:var(--t-display-md-lh); }
  .comparison-card__head h3{ font-size:var(--t-title-lg); line-height:var(--t-title-lg-lh); }
  .comparison-card__head p,
  .comparison-list li{ font-size:var(--t-prose); line-height:var(--t-prose-lh); }
  .comparison-list{ padding:0; }
  .comparison-stats{ gap:var(--s-3); }
  .comparison-stat{
    min-height:var(--s-16);
    padding:var(--s-5);
  }
  .comparison-stat dt{ font-size:var(--t-label); line-height:var(--t-label-lh); }
  .comparison-stat__value{ font-size:var(--t-prose); line-height:var(--t-prose-lh); }
  .comparison-delta{ display:none; }
  .comparison-stat--wide{ min-height:var(--s-19); }
  .comparison-stat--wide .comparison-stat__value{
    max-width:calc(100% - var(--s-19));
    font-size:var(--t-title-lg);
    line-height:var(--t-title-lg-lh);
  }
  .comparison-mascot{ width:calc(var(--s-15) * 2); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Native details elements keep the accordion accessible without another
   script. The name attribute makes the group exclusive in modern browsers. */
.faq-section{
  padding:var(--s-18) var(--s-9) var(--s-19);
  overflow:hidden;
  background:var(--bg-canvas);
}
.faq-section__inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
.faq-intro{
  max-width:calc(var(--container-text) - var(--s-19));
  margin:0 auto;
  text-align:center;
}
.faq-intro h2{
  margin:0;
  scroll-margin-top:calc(var(--s-17) + var(--s-7));
  color:var(--ink);
  font-size:clamp(var(--t-display-md), 4vw, var(--t-display-lg));
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  text-wrap:balance;
}
.faq-intro p{
  max-width:36em;
  margin:var(--s-8) auto 0;
  color:var(--ink-2);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  text-wrap:balance;
}
.faq-list{ margin-top:var(--s-15); }
.faq-item{
  overflow:hidden;
  border-radius:var(--r-4xl);
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
  transition:var(--transition-ghost);
}
.faq-item + .faq-item{ margin-top:var(--s-5); }
.faq-item[open]{
  background:var(--bg-hover);
  box-shadow:none;
}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:var(--s-7);
  min-height:var(--s-17);
  padding:var(--s-7) var(--s-11);
  border-radius:var(--r-4xl);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:''; }
.faq-item summary:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.faq-question{
  color:var(--ink);
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:var(--fw-semibold);
}
.faq-toggle{
  position:relative;
  width:var(--h-control-lg);
  height:var(--h-control-lg);
  margin-left:auto;
  flex:none;
  border-radius:var(--r-pill);
  color:var(--accent);
  transition:color var(--dur-fast) var(--ease), transform var(--dur-slow) var(--ease);
}
.faq-toggle::before,
.faq-toggle::after{
  content:'';
  position:absolute;
  top:calc(50% - var(--s-1) / 2);
  left:var(--s-4);
  width:var(--s-7);
  height:var(--s-1);
  border-radius:var(--r-pill);
  background:currentColor;
}
.faq-toggle::after{ transform:rotate(90deg); }
.faq-item summary:hover .faq-toggle{ color:var(--accent-hover); }
.faq-item[open] .faq-toggle{
  color:var(--ink);
  transform:rotate(45deg);
}
.faq-answer{
  max-width:52em;
  padding:0 var(--s-11) var(--s-11);
}
.faq-answer p{
  margin:0;
  color:var(--ink-2);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
}
.faq-item[data-expanded="false"]{
  background:var(--bg-canvas);
  box-shadow:var(--shadow-hairline);
}
.faq-item[data-expanded="false"] .faq-toggle{
  color:var(--accent);
  transform:rotate(0);
}
.faq-answer a{
  color:var(--accent-500);
  text-decoration-thickness:1px;
  text-underline-offset:var(--s-1);
}
.faq-answer a:hover{ color:var(--accent-hover); }
.faq-answer a:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}

@media (max-width:760px){
  .faq-section{ padding:var(--s-16) var(--s-7) var(--s-17); }
  .faq-intro p,
  .faq-answer p{ font-size:var(--t-prose); line-height:1.4; }
  .faq-list{ margin-top:var(--s-13); }
  .faq-item summary{
    min-height:var(--s-16);
    padding:var(--s-6) var(--s-8);
  }
  .faq-question{ font-size:var(--t-title); line-height:var(--t-title-lh); }
  .faq-answer{ padding:0 var(--s-8) var(--s-9); }
}
@media (max-width:520px){
  .faq-intro h2{ font-size:var(--t-display-md); line-height:var(--t-display-md-lh); }
  .faq-question{ font-size:var(--t-prose); line-height:var(--t-prose-lh); }
  .faq-toggle{ width:var(--h-control); height:var(--h-control); }
  .faq-toggle::before,
  .faq-toggle::after{ left:var(--s-3); }
}

/* ── Footer ────────────────────────────────────────────────────────────────
   A tall off-black close: quiet brand context, four useful columns, and only
   routes or product capabilities that this page can honestly support. */
.site-footer{
  min-height:calc(var(--s-19) * 4 + var(--s-15));
  padding:var(--s-17) var(--gutter) var(--s-11);
  background:var(--n-950);
  color:var(--ink-on-dark);
}
.site-footer__inner{
  display:flex;
  width:100%;
  max-width:var(--container-wide);
  min-height:calc(var(--s-19) * 3 + var(--s-15));
  margin:0 auto;
  flex-direction:column;
}
.site-footer__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-13);
}
.site-footer__brand{
  display:inline-flex;
  align-items:center;
  gap:var(--s-4);
  width:max-content;
  color:var(--ink-on-dark);
  font-size:var(--t-title-lg);
  line-height:var(--t-title-lg-lh);
  letter-spacing:var(--t-title-lg-ls);
  font-weight:700;
}
.site-footer__brand img{
  width:var(--h-control);
  height:var(--h-control);
}
.site-footer__head p{
  max-width:28em;
  margin:0;
  color:color-mix(in srgb, var(--ink-on-dark) 62%, transparent);
  font-size:var(--t-prose-lg);
  line-height:1.45;
  letter-spacing:var(--t-prose-lg-ls);
  text-align:right;
}
.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-15);
  margin-top:var(--s-15);
}
.site-footer__column h2{
  margin:0;
  color:var(--ink-on-dark);
  font-size:var(--t-prose);
  line-height:var(--t-prose-lh);
  letter-spacing:var(--t-prose-ls);
  font-weight:700;
}
.site-footer__column ul{
  display:grid;
  gap:var(--s-4);
  margin:var(--s-7) 0 0;
  padding:0;
  list-style:none;
}
.site-footer__column a,
.site-footer__note{
  color:color-mix(in srgb, var(--ink-on-dark) 62%, transparent);
  font-size:var(--t-prose);
  line-height:var(--t-prose-lh);
  letter-spacing:var(--t-prose-ls);
}
.site-footer__column a{
  display:inline-flex;
  transition:color var(--dur-fast) var(--ease);
}
.site-footer__column a:hover{ color:var(--ink-on-dark); }
.site-footer a:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:1px;
}
.site-footer__note{
  max-width:18em;
  margin:var(--s-7) 0 0;
}
.site-footer__note + .site-footer__note{ margin-top:var(--s-4); }
.site-footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-9);
  margin-top:auto;
  padding-top:var(--s-16);
}
.site-footer__legal,
.site-footer__bottom a{
  color:color-mix(in srgb, var(--ink-on-dark) 42%, transparent);
  font-size:var(--t-label);
  line-height:var(--t-label-lh);
  letter-spacing:var(--t-label-ls);
  font-weight:var(--fw-medium);
}
.site-footer__bottom-links{
  display:flex;
  align-items:center;
  gap:var(--s-9);
}
.site-footer__bottom a{
  transition:color var(--dur-fast) var(--ease);
}
.site-footer__bottom a:hover{ color:var(--ink-on-dark); }

@media (max-width:900px){
  .site-footer{
    min-height:0;
    padding:var(--s-16) var(--s-11) var(--s-11);
  }
  .site-footer__inner{ min-height:0; }
  .site-footer__head{ align-items:flex-start; }
  .site-footer__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-13) var(--s-15);
  }
  .site-footer__bottom{ margin-top:var(--s-16); }
}
@media (max-width:560px){
  .site-footer{ padding:var(--s-15) var(--s-7) var(--s-11); }
  .site-footer__head{
    align-items:flex-start;
    flex-direction:column;
    gap:var(--s-7);
  }
  .site-footer__head p{
    max-width:22em;
    font-size:var(--t-prose);
    line-height:1.4;
    text-align:left;
  }
  .site-footer__grid{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-12);
    margin-top:var(--s-14);
  }
  .site-footer__bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:var(--s-7);
    margin-top:var(--s-15);
    padding-top:0;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{ --sky-h:660px; }
  /* The wide plate centre-crops to bare sky on a phone. The narrow cut is
     the original framing, where the cloud banks sit at both edges. */
  .sky{ background-image:url('/assets/img/landing-sky-narrow.webp'); }
  .hero{ padding-top:var(--s-15); }
  .hero h1 .line-2{ display:inline; }
  .hero p{ font-size:var(--t-prose); margin-top:var(--s-8); }
  .vsl{ margin-top:var(--s-11); }
  .vsl-frame{ border-radius:var(--r-2xl); }
  .letter{ margin-top:var(--s-12); padding:var(--s-13) var(--s-7); }
  .letter-card{ padding:var(--s-9); border-radius:var(--r-2xl); }
  .letter-lead{ margin-top:var(--s-9); font-size:var(--t-prose-lg); }
  .letter-body p{ font-size:var(--t-prose); line-height:1.4; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
  .btn--cta:hover{ transform:none; }
  .comparison-scroll{ height:auto; }
  .comparison-sticky{ position:static; }
  .comparison-card--after{
    transform:none;
    will-change:auto;
  }
  .trusted-marquee{
    overflow:visible;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .trusted-track{
    width:auto;
    animation:none;
    will-change:auto;
  }
  .trusted-group{
    flex-wrap:wrap;
    justify-content:center;
  }
  .trusted-group[aria-hidden="true"]{ display:none; }
  .comparison-card--before{
    opacity:1;
    will-change:auto;
  }
}

/* ── Zero-JS adapters ──────────────────────────────────────────────────────
   The reference file drives showcase tabs and the comparison cover with a
   <script> block. This site ships no JavaScript, so those interactions are
   radios + :has(), native <details>, and a CSS scroll timeline. */

.showcase-state{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}
.showcase-switch{ position:relative; }
.showcase__tab{ display:inline-flex; align-items:center; justify-content:center; width:100%; }
.os-topbar__view{ display:none; }
.showcase:has(#view-reports:checked) .os-topbar__view--reports,
.showcase:has(#view-pipeline:checked) .os-topbar__view--pipeline,
.showcase:has(#view-workflows:checked) .os-topbar__view--workflows{ display:inline; }
.showcase:has(#view-reports:focus-visible) .showcase__tab[for="view-reports"],
.showcase:has(#view-pipeline:focus-visible) .showcase__tab[for="view-pipeline"],
.showcase:has(#view-workflows:focus-visible) .showcase__tab[for="view-workflows"]{
  outline:1px solid var(--accent);
  outline-offset:1px;
}

@supports selector(::details-content){
  .faq-item::details-content{
    block-size:0;
    overflow:hidden;
    opacity:0;
    transition:
      block-size var(--dur-base) var(--ease),
      content-visibility var(--dur-base) var(--ease) allow-discrete,
      opacity var(--dur-base) var(--ease);
  }
  .faq-item[open]::details-content{
    block-size:auto;
    opacity:1;
  }
}

@supports (animation-timeline:view()){
  @media (min-width:901px) and (prefers-reduced-motion:no-preference){
    .comparison-scroll{ height:calc(var(--s-19) * 6 + 88vh); }
    .comparison-sticky{ position:sticky; top:var(--s-17); }
    .comparison-card--after{
      animation:comparison-cover linear both;
      animation-timeline:view();
      animation-range:contain 0% contain 100%;
    }
    .comparison-card--before{
      animation:comparison-fade linear both;
      animation-timeline:view();
      animation-range:contain 55% contain 90%;
    }
  }
}
@keyframes comparison-cover{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(calc(-50% - var(--s-11) / 2),0,0) scale(1.02); }
}
@keyframes comparison-fade{
  from{ opacity:1; }
  to{ opacity:0; }
}