/* ==========================================================================
   Sure Step Education — surestepeducation.com
   Redesign 2026 · "Paper & Emerald"
   Zero-build modular CSS. Layers: tokens → base → layout → components → utilities
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ── TOKENS ──────────────────────────────────────────────────────────── */
@layer tokens {
  :root {
    /* color */
    --paper:        #FAF8F3;
    --paper-deep:   #F1EDE3;
    --card:         rgba(255, 255, 255, .78);
    --ink:          #171A2B;
    --ink-soft:     #454A63;
    --emerald:      #0E6E55;
    --emerald-bright:#1D9E75;
    --emerald-soft: #E2F2EC;
    --amber:        #B97511;   /* graphics: dots, borders, glyphs (3:1 non-text) */
    --amber-text:   #9C6009;   /* small amber TEXT on paper/white — 4.84:1, AA */
    --amber-soft:   #F8ECD7;
    --rule:         #DDD7C8;
    --rule-soft:    #EAE5D8;
    --paper-on-ink: #F5F2EA;

    /* type */
    --serif: "DM Serif Display", Georgia, serif;
    --sans:  "DM Sans", system-ui, -apple-system, sans-serif;
    --mono:  "DM Mono", ui-monospace, "SF Mono", monospace;

    --fs-display: clamp(2.75rem, 6.2vw, 4.5rem);
    --fs-h2:      clamp(2rem, 4vw, 3rem);
    --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
    --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
    --fs-small:   .875rem;
    --fs-eyebrow: .8125rem;

    /* 8px grid */
    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
    --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;

    /* layout */
    --container: 1200px;
    --radius: 24px;
    --radius-sm: 12px;

    /* motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t: 300ms var(--ease);

    /* elevation */
    --shadow-1: 0 1px 2px rgba(23, 26, 43, .05), 0 4px 16px rgba(23, 26, 43, .06);
    --shadow-2: 0 2px 4px rgba(23, 26, 43, .06), 0 12px 32px rgba(23, 26, 43, .10);
  }
}

/* ── BASE ────────────────────────────────────────────────────────────── */
@layer base {
  @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
  @font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
  @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "DM Mono"; src: url("../fonts/DMMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 96px; }
  body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0 0 var(--s3); letter-spacing: -.01em; }
  h1 { font-size: var(--fs-display); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  p  { margin: 0 0 var(--s2); }
  img { max-width: 100%; display: block; }
  a { color: var(--emerald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--emerald-bright); }
  button { font: inherit; cursor: pointer; }

  ::selection { background: var(--emerald); color: var(--paper); }

  :focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
    border-radius: 4px;
  }

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--paper-on-ink);
    padding: var(--s2) var(--s3); z-index: 200; border-radius: 0 0 var(--radius-sm) 0;
  }
  .skip-link:focus { left: 0; }
}

/* ── LAYOUT ──────────────────────────────────────────────────────────── */
@layer layout {
  .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--s4); }
  .section { padding-block: var(--s16); }
  .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s4); }

  @media (max-width: 768px) {
    .section { padding-block: var(--s12); }
    .container { padding-inline: var(--s3); }
  }
}

/* ── COMPONENTS ──────────────────────────────────────────────────────── */
@layer components {

  /* Eyebrow label */
  .eyebrow {
    font-family: var(--mono); font-size: var(--fs-eyebrow); font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--amber-text);
    display: flex; align-items: center; gap: var(--s1); margin-bottom: var(--s2);
  }
  .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
  .on-ink .eyebrow { color: #E9B45C; }
  .on-ink .eyebrow::before { background: #E9B45C; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: var(--s1);
    min-height: 48px; padding: 12px 28px;
    border-radius: 999px; border: 1.5px solid transparent;
    font-weight: 600; font-size: 1rem; text-decoration: none;
    transition: transform var(--t), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t);
  }
  .btn .arr { transition: transform var(--t); }
  .btn:hover .arr { transform: translateX(4px); }
  .btn:active { transform: translateY(1px); }

  .btn-primary { background: var(--emerald); color: #fff; }
  .btn-primary:hover { background: var(--emerald-bright); color: #fff; box-shadow: var(--shadow-2); transform: translateY(-2px); }

  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
  .btn-ghost:hover { border-color: var(--emerald); color: var(--emerald); transform: translateY(-2px); }

  .btn-paper { background: var(--paper); color: var(--ink); }
  .btn-paper:hover { background: #fff; box-shadow: var(--shadow-2); transform: translateY(-2px); color: var(--ink); }

  .btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
  .btn[aria-busy="true"] .arr { animation: btn-spin 800ms linear infinite; }
  @keyframes btn-spin { to { transform: rotate(360deg); } }

  /* Text link with arrow */
  .tlink { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  .tlink .arr { transition: transform var(--t); }
  .tlink:hover .arr { transform: translateX(4px); }

  /* ── Header ── */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: transparent;
    transition: background-color var(--t), box-shadow var(--t), backdrop-filter var(--t);
  }
  .site-header.scrolled {
    background: rgba(250, 248, 243, .85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--rule-soft);
  }
  .nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: var(--s3); }
  .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
  .brand-name { font-family: var(--serif); font-size: 1.375rem; line-height: 1; }
  .brand-name small { display: block; font-family: var(--mono); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

  .nav-links { display: flex; align-items: center; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
  .nav-links a:not(.btn) {
    color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem;
    padding: 12px 4px; position: relative;
  }
  .nav-links a:not(.btn)::after {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: 6px; height: 2px;
    background: var(--emerald); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform var(--t);
  }
  .nav-links a:not(.btn):hover::after, .nav-links a.active::after { transform: scaleX(1); }
  .nav-links .btn { min-height: 44px; padding: 10px 22px; }

  .nav-toggle { display: none; background: none; border: none; width: 48px; height: 48px; border-radius: var(--radius-sm); }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; border-radius: 2px; transition: transform var(--t), opacity var(--t); }

  @media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--paper); border-bottom: 1px solid var(--rule-soft);
      padding: var(--s2) var(--s3) var(--s3);
      display: none;
    }
    .nav-links.open { display: flex; }
    .nav-links a:not(.btn) { padding: var(--s2) var(--s1); }
    .nav-links li:last-child { margin-top: var(--s2); }
    .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  }

  /* ── Hero ── */
  .hero { position: relative; overflow: clip; padding-block: var(--s12) var(--s16); }
  .hero-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
  .hero-blobs i {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  }
  .hero-blobs i:nth-child(1) {
    width: 620px; height: 620px; left: -160px; top: -120px;
    background: radial-gradient(circle, rgba(29,158,117,.14), transparent 65%);
    animation: drift-a 60s ease-in-out infinite alternate;
  }
  .hero-blobs i:nth-child(2) {
    width: 540px; height: 540px; right: -140px; bottom: -180px;
    background: radial-gradient(circle, rgba(185,117,17,.10), transparent 65%);
    animation: drift-b 75s ease-in-out infinite alternate;
  }
  @keyframes drift-a { to { transform: translate(120px, 80px) scale(1.12); } }
  @keyframes drift-b { to { transform: translate(-100px, -60px) scale(1.08); } }

  .hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: var(--s8); align-items: center; }
  .hero h1 { margin-bottom: var(--s3); }
  .hero h1 .accent { color: var(--emerald); }
  .hero-sub { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--s5); }
  .hero-ctas { display: flex; gap: var(--s2); flex-wrap: wrap; }

  .hero-photo { position: relative; transform: rotate(-2deg); margin-bottom: -48px; }
  .hero-photo img {
    border: 6px solid #fff; border-radius: var(--radius);
    box-shadow: var(--shadow-2); width: 100%; height: auto;
  }
  .hero-photo::after {
    content: ""; position: absolute; inset: 14px -14px -14px 14px;
    border-radius: var(--radius); background: var(--emerald-soft); z-index: -1;
  }

  @media (max-width: 860px) {
    .hero { padding-block: var(--s6) var(--s12); }
    .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
    .hero-photo { max-width: 420px; margin-inline: auto; margin-bottom: 0; }
  }

  /* ── Product cards (staggered) ── */
  .toolkit-head { max-width: 62ch; margin-bottom: var(--s8); }
  .toolkit-head p { color: var(--ink-soft); font-size: 1.0625rem; }

  .product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s4); }
  .product-card {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: var(--s5);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: var(--shadow-1);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    display: flex; flex-direction: column; gap: var(--s3);
  }
  .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--rule-soft); }
  .product-card.p1 { grid-column: 1 / span 7; }
  .product-card.p2 { grid-column: 8 / span 5; margin-top: var(--s8); }
  .product-card.p3 { grid-column: 3 / span 6; margin-top: calc(-1 * var(--s4)); }

  .pcard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
  .pcard-num { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; color: var(--ink-soft); }
  .badge-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: .75rem; font-weight: 500; letter-spacing: .08em;
    color: var(--emerald); background: var(--emerald-soft);
    padding: 4px 12px; border-radius: 999px;
  }
  .badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-bright); animation: live-pulse 2.4s ease-in-out infinite; }
  @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  .pcard-name { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 2px; }
  .pcard-tag { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-soft); }
  .pcard-blurb { color: var(--ink-soft); }
  .pcard-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: auto; }

  /* vignette: DailyWins points rows */
  .vig { border: 1px solid var(--rule-soft); border-radius: var(--radius-sm); padding: var(--s3); background: #fff; }
  .vig-dw .dw-row { display: grid; grid-template-columns: 36px 1fr auto; gap: var(--s2); align-items: center; padding-block: var(--s1); }
  .vig-dw .dw-row + .dw-row { border-top: 1px dashed var(--rule-soft); }
  .dw-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--emerald-soft); color: var(--emerald);
    font-weight: 700; font-size: .8125rem; display: grid; place-items: center;
  }
  .dw-avatar.alt { background: var(--amber-soft); color: var(--amber); }
  .dw-meta b { display: block; font-size: .9375rem; }
  .dw-meta span { font-size: .75rem; color: var(--ink-soft); font-family: var(--mono); }
  .dw-pts { text-align: right; }
  .dw-pts b { color: var(--emerald); font-size: .9375rem; }
  .dw-bar { width: 96px; height: 6px; border-radius: 3px; background: var(--rule-soft); overflow: hidden; margin-top: 6px; }
  .dw-bar i { display: block; height: 100%; border-radius: 3px; background: var(--emerald-bright); width: var(--fill, 60%); animation: dw-tick 4s var(--ease) infinite; }
  .dw-bar.alt i { background: var(--amber); animation-delay: 2s; }
  @keyframes dw-tick { 0%, 55% { width: var(--fill, 60%); } 70%, 100% { width: var(--fill-next, 72%); } }

  /* vignette: TransitionReady fanned sheets */
  .vig-tr { position: relative; height: 190px; overflow: visible; background: transparent; border: none; padding: 0; }
  .tr-sheet {
    position: absolute; inset: 10px 12%; background: #fff;
    border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow-1);
    transition: transform var(--t);
    padding: 18px;
  }
  .tr-sheet i { display: block; height: 7px; border-radius: 4px; background: var(--rule-soft); margin-bottom: 9px; }
  .tr-sheet i:first-child { width: 55%; height: 10px; background: var(--emerald-soft); }
  .tr-sheet:nth-child(1) { transform: rotate(-5deg) translateX(-14px); }
  .tr-sheet:nth-child(2) { transform: rotate(2deg) translateY(4px); }
  .tr-sheet:nth-child(3) { transform: rotate(7deg) translateX(16px); }
  .tr-sheet:nth-child(3) i:last-child { width: 40%; background: var(--amber-soft); }
  .product-card:hover .tr-sheet:nth-child(1) { transform: rotate(-9deg) translateX(-26px); }
  .product-card:hover .tr-sheet:nth-child(3) { transform: rotate(11deg) translateX(28px); }

  /* vignette: ParaScheduler coverage grid */
  .vig-ps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .ps-cell { aspect-ratio: 1.4; border-radius: 8px; background: var(--emerald-soft); position: relative; }
  .ps-cell::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 55%; height: 5px; border-radius: 3px; background: var(--emerald-bright); opacity: .55;
  }
  .ps-cell.gap { background: var(--amber-soft); animation: ps-gap 5s var(--ease) infinite; }
  .ps-cell.gap::after { background: var(--amber); animation: ps-gap-fill 5s var(--ease) infinite; }
  @keyframes ps-gap { 0%, 45% { background: var(--amber-soft); } 65%, 100% { background: var(--emerald-soft); } }
  @keyframes ps-gap-fill { 0%, 30% { opacity: .25; } 45% { opacity: .9; } 65%, 100% { opacity: .55; background: var(--emerald-bright); } }

  /* pipeline chips */
  .pipeline { margin-top: var(--s8); }
  .pipeline-rule { display: flex; align-items: center; gap: var(--s2); color: var(--ink-soft); font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--s3); }
  .pipeline-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
  .chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
  .chip {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px dashed var(--rule); border-radius: 999px;
    padding: 10px 20px; background: transparent; color: var(--ink-soft);
    font-size: .9375rem; transition: border-color var(--t), color var(--t);
  }
  .chip:hover { border-color: var(--amber); color: var(--ink); }
  .chip b { font-weight: 600; color: var(--ink); }
  .chip .dev { font-family: var(--mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-text); }

  /* stats strip */
  .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid var(--rule-soft); }
  .stat b { font-family: var(--serif); font-size: 2rem; display: block; color: var(--emerald); }
  .stat span { font-family: var(--mono); font-size: .8125rem; color: var(--ink-soft); }

  @media (max-width: 860px) {
    .product-card.p1, .product-card.p2, .product-card.p3 { grid-column: 1 / -1; margin-top: 0; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── Founders band ── */
  .founders-band { background: var(--ink); color: var(--paper-on-ink); position: relative; }
  .founders-band .torn { display: block; width: 100%; height: 28px; fill: var(--paper); }
  .founders-inner { padding-block: var(--s12); }
  .founders-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s8); align-items: center; }
  .founder-photos { display: flex; gap: var(--s3); }
  .founder-fig { margin: 0; text-align: center; }
  .founder-fig img {
    width: 168px; height: 168px; object-fit: cover; border-radius: var(--radius-sm);
    border: 3px solid #E9B45C; transition: transform var(--t);
  }
  .founder-fig:nth-child(1) img { transform: rotate(-2deg); }
  .founder-fig:nth-child(2) img { transform: rotate(2deg); }
  .founder-fig:hover img { transform: rotate(0); }
  .founder-fig figcaption { font-family: var(--mono); font-size: .8125rem; margin-top: var(--s2); color: #B9BDD1; }
  .founder-fig figcaption b { display: block; font-family: var(--sans); font-size: 1rem; color: var(--paper-on-ink); }

  .founders-copy h2 { color: var(--paper-on-ink); }
  .pull-quote {
    font-family: var(--serif); font-style: italic; font-size: clamp(1.375rem, 2.4vw, 1.875rem);
    line-height: 1.35; color: var(--paper-on-ink); border-left: 3px solid #E9B45C;
    padding-left: var(--s3); margin: var(--s4) 0;
  }
  .founder-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s5); margin-top: var(--s4); }
  .ffact dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #8F94AD; margin-bottom: 4px; }
  .ffact dd { margin: 0; font-size: .9875rem; color: var(--paper-on-ink); }

  @media (max-width: 860px) {
    .founders-grid { grid-template-columns: 1fr; gap: var(--s6); }
    .founder-photos { justify-content: center; }
    .founder-facts { grid-template-columns: 1fr; }
  }

  /* ── Pricing widgets ── */
  .pricing-head { max-width: 62ch; margin-bottom: var(--s8); }
  .pricing-head p { color: var(--ink-soft); }
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .price-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: var(--s5); box-shadow: var(--shadow-1);
    transition: transform var(--t), box-shadow var(--t);
  }
  .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .price-card h3 { margin-bottom: var(--s2); }
  .price-card p { color: var(--ink-soft); font-size: .9875rem; margin: 0; }
  .price-glyph { height: 72px; margin-bottom: var(--s3); display: flex; align-items: center; }

  /* per seat: chairs fill */
  .glyph-seats { display: flex; gap: 8px; }
  .glyph-seats i { width: 22px; height: 30px; border-radius: 6px 6px 3px 3px; background: var(--rule-soft); position: relative; }
  .glyph-seats i::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 4px; border-radius: 2px; background: inherit; }
  .in .glyph-seats i:nth-child(-n+4) { background: var(--emerald-bright); transition: background-color 400ms var(--ease); }
  .in .glyph-seats i:nth-child(1) { transition-delay: .1s; } .in .glyph-seats i:nth-child(2) { transition-delay: .25s; }
  .in .glyph-seats i:nth-child(3) { transition-delay: .4s; } .in .glyph-seats i:nth-child(4) { transition-delay: .55s; }

  /* per student: caseload dial */
  .glyph-dial { width: 72px; height: 72px; }
  .glyph-dial circle { fill: none; stroke-width: 8; }
  .glyph-dial .track { stroke: var(--rule-soft); }
  .glyph-dial .arc { stroke: var(--emerald-bright); stroke-linecap: round; stroke-dasharray: 175.9; stroke-dashoffset: 175.9; }
  .in .glyph-dial .arc { stroke-dashoffset: 52.8; transition: stroke-dashoffset 900ms var(--ease) .2s; }

  /* per specialist: radiating rings */
  .glyph-rings { position: relative; width: 72px; height: 72px; }
  .glyph-rings i { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 2px solid var(--emerald-bright); opacity: 0; }
  .glyph-rings i:nth-child(1) { width: 18px; height: 18px; background: var(--emerald); border: none; opacity: 1; }
  .in .glyph-rings i:nth-child(2) { width: 40px; height: 40px; opacity: .5; transition: all 500ms var(--ease) .2s; }
  .in .glyph-rings i:nth-child(3) { width: 64px; height: 64px; opacity: .25; transition: all 500ms var(--ease) .4s; }
  .price-card:hover .glyph-rings i:nth-child(3) { transform: scale(1.12); }

  .price-note {
    margin-top: var(--s5); border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--amber-soft); padding: var(--s4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  }
  .price-note p { margin: 0; max-width: 60ch; color: var(--ink); }

  @media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; } }

  /* ── Pilot rail ── */
  .rail-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
  .rail-head .lead { color: var(--ink-soft); max-width: 46ch; margin: 0; }
  .rail-progress { height: 4px; background: var(--rule-soft); border-radius: 2px; margin-bottom: var(--s4); overflow: hidden; }
  .rail-progress i { display: block; height: 100%; background: var(--emerald-bright); border-radius: 2px; width: 25%; transition: width 200ms linear; }
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
    gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: var(--s2); scrollbar-width: none; cursor: grab;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail.dragging { cursor: grabbing; scroll-snap-type: none; }
  .rail-step {
    scroll-snap-align: start; background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-1);
    transition: transform var(--t), box-shadow var(--t);
  }
  .rail-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
  .rail-step .num {
    font-family: var(--serif); font-size: 2.25rem; color: var(--emerald);
    display: block; margin-bottom: var(--s2);
  }
  .rail-step h3 { font-family: var(--sans); font-weight: 700; font-size: 1.125rem; margin-bottom: var(--s1); }
  .rail-step p { color: var(--ink-soft); font-size: .9875rem; margin: 0; }
  .rail-hint { font-family: var(--mono); font-size: .75rem; color: var(--ink-soft); display: none; }
  @media (max-width: 860px) { .rail-hint { display: block; margin-top: var(--s2); } }

  /* ── CTA band ── */
  .cta-band { background: var(--emerald); color: #fff; position: relative; }
  .cta-band .torn { display: block; width: 100%; height: 28px; fill: var(--paper); }
  .cta-inner { padding-block: var(--s12); text-align: center; }
  .cta-inner h2 { color: #fff; }
  .cta-inner p { color: rgba(255, 255, 255, .85); max-width: 52ch; margin-inline: auto; margin-bottom: var(--s5); }

  /* ── Footer ── */
  .site-footer { background: var(--emerald); color: rgba(255,255,255,.8); border-top: 1px solid rgba(255,255,255,.18); }
  .footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s4); flex-wrap: wrap; font-size: var(--fs-small); }
  .footer-row .brand { color: #fff; }
  .footer-row .brand-name { font-size: 1.125rem; }
  .footer-links { display: flex; gap: var(--s3); }
  .footer-links a { color: rgba(255,255,255,.8); text-decoration: none; padding: 8px 0; }
  .footer-links a:hover { color: #fff; text-decoration: underline; }

  /* ── Demo modal ── */
  .demo-modal { border: none; border-radius: var(--radius); padding: 0; width: min(960px, calc(100vw - 32px)); background: var(--ink); }
  .demo-modal::backdrop { background: rgba(23, 26, 43, .72); backdrop-filter: blur(4px); }
  .demo-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); color: var(--paper-on-ink); }
  .demo-head b { font-family: var(--serif); font-size: 1.125rem; font-weight: 400; }
  .demo-close { background: none; border: none; color: var(--paper-on-ink); font-size: 1.5rem; line-height: 1; padding: 10px 14px; border-radius: var(--radius-sm); }
  .demo-close:hover { background: rgba(255,255,255,.1); }
  .demo-frame { aspect-ratio: 16 / 9; width: 100%; border: none; display: block; background: #000; border-radius: 0 0 var(--radius) var(--radius); }
}

/* ── UTILITIES ───────────────────────────────────────────────────────── */
@layer utilities {
  /* Scroll reveals — content is ALWAYS visible by default.
     .js + motion-ok adds the pre-reveal state; IO adds .in to land it. */
  @media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
    .js .reveal.in { opacity: 1; transform: none; }
    .js .reveal.d1 { transition-delay: 90ms; }
    .js .reveal.d2 { transition-delay: 180ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
  }

  .visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}

/* ── Card media v2: video thumbs, filmstrip, real portfolio fan, DW chips ── */
@layer components {
  .media-thumb {
    position: relative; display: block; width: 100%; padding: 0;
    border: 1px solid var(--rule); border-radius: var(--radius-sm);
    overflow: hidden; background: #0b0d18; cursor: pointer;
    box-shadow: var(--shadow-1);
    transition: transform var(--t), box-shadow var(--t);
  }
  .media-thumb img { width: 100%; height: auto; display: block; transition: transform var(--t); }
  .media-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
  .media-thumb:hover img { transform: scale(1.02); }
  .play-badge {
    position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
    border-radius: 50%; background: rgba(14, 110, 85, .92);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    transition: transform var(--t), background-color var(--t);
  }
  .play-badge::after {
    content: ""; position: absolute; left: 55%; top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid; border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
  }
  .media-thumb:hover .play-badge { transform: scale(1.1); background: var(--emerald-bright); }
  .media-cap {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(23, 26, 43, .78); color: #fff;
    font-size: .8125rem; font-weight: 600; padding: 6px 14px;
    border-radius: 999px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }

  .film-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
  .film-strip img {
    width: 100%; height: auto; border-radius: 8px;
    border: 1px solid var(--rule-soft); display: block;
    transition: transform var(--t), box-shadow var(--t);
  }
  .film-strip img:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }

  /* DailyWins category chips — depicting the product's own multicolor UI */
  .dw-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s2); }
  .dwc { font-family: var(--mono); font-size: .75rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; }
  .dwc-emerald { background: var(--emerald-soft); color: var(--emerald); }
  .dwc-amber   { background: var(--amber-soft);   color: #8A5406; }
  .dwc-cobalt  { background: #E3EAFB;             color: #2F4FA0; }
  .dwc-flame   { background: #FDECE4;             color: #A33B2E; }

  /* TransitionReady fan — real rendered pages from the sample portfolio */
  .vig-tr { display: block; height: 260px; text-decoration: none; }
  .tr-sheet {
    padding: 0; overflow: hidden;
    inset: auto; top: 6px; left: 25%; width: 50%; aspect-ratio: 520 / 673;
    border: 3px solid #fff; border-radius: 10px;
    box-shadow: var(--shadow-2);
    transform-origin: 50% 80%;
  }
  .tr-sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tr-sheet:nth-child(1) { transform: rotate(9deg) translateX(34%); }
  .tr-sheet:nth-child(2) { transform: rotate(-8deg) translateX(-34%); }
  .tr-sheet:nth-child(3) { transform: rotate(-1deg) translateY(-4px); }
  .product-card:hover .tr-sheet:nth-child(1),
  .vig-tr:focus-visible .tr-sheet:nth-child(1) { transform: rotate(12deg) translateX(44%); }
  .product-card:hover .tr-sheet:nth-child(2),
  .vig-tr:focus-visible .tr-sheet:nth-child(2) { transform: rotate(-11deg) translateX(-44%); }
  .product-card:hover .tr-sheet:nth-child(3),
  .vig-tr:focus-visible .tr-sheet:nth-child(3) { transform: rotate(0deg) translateY(-10px) scale(1.02); }

  @media (max-width: 860px) {
    .vig-tr { height: 220px; }
  }
}

@layer components {
  /* button-flavored .tlink should match anchor-flavored exactly */
  button.tlink { background: none; border: none; padding: 0; color: var(--emerald); }
  button.tlink:hover { color: var(--emerald-bright); }
}

/* ── Doc pages: /privacy/ /terms/ /accessibility/ /security/ ── */
@layer components {
  .doc-hero { padding-block: var(--s8) 0; }
  .doc-hero h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
  .doc-updated { font-family: var(--mono); font-size: var(--fs-small); color: var(--ink-soft); }
  .doc { max-width: 76ch; padding-block: var(--s6) var(--s12); }
  .doc h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); margin-top: var(--s8); }
  .doc h3 { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; margin-top: var(--s5); margin-bottom: var(--s1); }
  .doc p, .doc li { color: var(--ink-soft); }
  .doc li { margin-bottom: var(--s1); }
  .doc li::marker { color: var(--emerald); }
  .doc strong { color: var(--ink); }
  .doc .callout { background: var(--emerald-soft); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
  .doc .callout p { margin: 0; color: var(--ink); }
  .doc .table-wrap { overflow-x: auto; }
  .doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: var(--s3) 0; }
  .doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
  .doc th { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
}