/* ---------- Reset ---------- */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; padding: 0; }
    /* clip (not hidden) contains decorative bleed without turning the root into
       a scroll container, so sticky headers and smooth scrolling still work. */
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    img, svg, video { display: block; max-width: 100%; height: auto; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }
    h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
    :focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; border-radius: 6px; }

    /* ---------- Tokens ---------- */
    :root {
      /* ink & brand */
      --ink-950: #060d1c;
      --ink-900: #0a1428;
      --ink-800: #10203f;
      --ink-700: #1a2f57;
      --brand-500: #3b82f6;
      --brand-400: #60a5fa;
      --brand-300: #93c5fd;
      --brand-100: #dbeafe;
      --brand-50: #eff6ff;

      /* neutrals */
      --white: #ffffff;
      --paper: #f7f9fc;
      --paper-warm: #f4f7fb;
      --gray-100: #eef1f6;
      --gray-200: #e2e7ef;
      --gray-400: #94a0b4;
      --gray-500: #64748b;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-900: #0f172a;

      /* accents */
      --gold-400: #e8b94a;
      --gold-500: #d9a52e;
      --amber-50: #fdf8ec;
      --amber-700: #a16207;
      --emerald-50: #ecfdf5;
      --emerald-600: #059669;
      --emerald-800: #065f46;
      --blue-50: #eff6ff;
      --blue-600: #2563eb;
      --blue-900: #1e3a8a;
      --pink-100: #fce7f3;
      --pink-900: #9d174d;
      --green-100: #dcfce7;
      --green-900: #166534;

      /* type */
      --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --font-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;

      /* spacing & radii */
      --container: 80rem;
      --radius-sm: .625rem;
      --radius-md: 1rem;
      --radius-lg: 1.5rem;
      --radius-xl: 2rem;
      --radius-pill: 9999px;

      /* shadows — layered for depth */
      --shadow-sm: 0 1px 2px rgba(10, 20, 40, .05), 0 1px 1px rgba(10, 20, 40, .03);
      --shadow-md: 0 2px 4px rgba(10, 20, 40, .04), 0 8px 24px rgba(10, 20, 40, .07);
      --shadow-lg: 0 4px 8px rgba(10, 20, 40, .05), 0 18px 46px -12px rgba(10, 20, 40, .16);
      --shadow-xl: 0 8px 16px rgba(10, 20, 40, .07), 0 32px 72px -18px rgba(10, 20, 40, .3);
      --shadow-float: drop-shadow(0 18px 20px rgba(6, 13, 28, .22)) drop-shadow(0 44px 60px rgba(6, 13, 28, .26));

      /* motion */
      --ease: cubic-bezier(.4, 0, .2, 1);
      --ease-out: cubic-bezier(.16, 1, .3, 1);
    }

    /* ---------- Large-screen scaling ----------
       Past ~1382px the design had stopped growing: every breakpoint has
       fired, `--container` is at its 80rem ceiling and all the heading
       clamps have reached their maximum. A 4K screen therefore rendered a
       pixel-identical copy of a 1280px window marooned in the middle of it
       — a third of the width, 1280px of dead gutter each side.

       Scaling the root instead of widening one thing at a time is what
       keeps the proportions: nearly all sizing here is in rem, so type,
       spacing and the container grow together and the design zooms rather
       than reflows. Line lengths are preserved exactly, because the column
       and the text inside it scale by the same factor. Every breakpoint is
       in px, so none of them drift as this changes.

       Anchored to be an exact no-op at 1920px and to reach 1.5rem at 3840px,
       so a 1080p screen renders byte-for-byte what it did before and only
       genuinely larger displays scale. The 1rem floor means the expression
       is inert below that anyway; the query is here to say so. */
    @media (min-width: 1920px) {
      :root { font-size: clamp(1rem, 0.4167vw + 0.5rem, 1.5rem); }
    }

    /* ---------- Base ---------- */
    body {
      font-family: var(--font-sans);
      color: var(--gray-900);
      background: var(--white);
      font-weight: 400;
      overflow-x: clip;
    }
    ::selection { background: var(--brand-100); color: var(--ink-800); }

    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: 1.25rem;
    }
    /* Reading-width column for prose-heavy sections (FAQ, policy copy). */
    .container--narrow { max-width: 48rem; }
    @media (min-width: 640px) { .container { padding-inline: 1.5rem; } }
    @media (min-width: 1024px) { .container { padding-inline: 2.5rem; } }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .625rem;
      font-size: .75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .22em;
      color: var(--blue-600);
    }
    .eyebrow::before {
      content: "";
      width: 1.75rem;
      height: 1px;
      background: currentColor;
      opacity: .5;
    }
    .eyebrow--center::after {
      content: "";
      width: 1.75rem;
      height: 1px;
      background: currentColor;
      opacity: .5;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .375rem .875rem;
      border-radius: var(--radius-pill);
      font-size: .8125rem;
      font-weight: 500;
    }
    .pill--brand { background: var(--brand-50); color: var(--ink-800); border: 1px solid var(--brand-100); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .625rem;
      padding: 1rem 2.125rem;
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: 1rem;
      letter-spacing: .01em;
      transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out);
    }
    .btn .icon { transition: transform .25s var(--ease-out); }
    .btn:hover .icon { transform: translateX(3px); }
    .btn--primary {
      background: linear-gradient(180deg, #ffffff 0%, #eef3fb 100%);
      color: var(--ink-800);
      box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 28px -8px rgba(6, 13, 28, .5);
    }
    .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 36px -8px rgba(6, 13, 28, .55); }
    .btn--ghost {
      background: rgba(255, 255, 255, .08);
      color: var(--white);
      border: 1px solid rgba(255, 255, 255, .28);
      backdrop-filter: blur(12px);
    }
    .btn--ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
    .btn--dark {
      background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-900) 100%);
      color: var(--white);
      box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 28px -10px rgba(10, 20, 40, .5);
    }
    .btn--dark:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 18px 40px -10px rgba(10, 20, 40, .55); }
    .btn--soft {
      background: var(--gray-100);
      color: var(--gray-900);
      border: 1px solid var(--gray-200);
    }
    .btn--soft:hover { background: var(--gray-200); }
    .btn--block { width: 100%; padding-block: .9375rem; border-radius: var(--radius-md); }

    /* Icon definitions only — never painted itself. Each icon on the page is a
       one-line <use> into this, so a glyph is edited in exactly one place. */
    .icon-sprite { display: none; }

    .icon { width: 1rem; height: 1rem; flex-shrink: 0; }
    .icon-md { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
    .icon-lg { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

    /* Sprite icons used at one-off sizes carry their size as px `width`/
       `height` attributes, which the root scaling above cannot reach — they
       would sit at 18px beside 27px body copy on a 4K screen. Restate the
       same sizes in rem so they grow with the text they sit beside. Scoped
       to classless icons so the `.icon*` sizes above still win where both
       are present, and every value is the exact px equivalent at the 16px
       base, so nothing moves below 1920px. */
    svg:not([class])[width="14"] { width: .875rem; height: .875rem; }
    svg:not([class])[width="15"] { width: .9375rem; height: .9375rem; }
    svg:not([class])[width="17"] { width: 1.0625rem; height: 1.0625rem; }
    svg:not([class])[width="18"] { width: 1.125rem; height: 1.125rem; }
    svg:not([class])[width="20"] { width: 1.25rem; height: 1.25rem; }
    svg:not([class])[width="22"] { width: 1.375rem; height: 1.375rem; }
    svg:not([class])[width="24"] { width: 1.5rem; height: 1.5rem; }
    svg:not([class])[width="26"] { width: 1.625rem; height: 1.625rem; }
    svg:not([class])[width="32"] { width: 2rem; height: 2rem; }

    /* ---------- Scroll reveal (visible by default; JS hides below-fold items) ---------- */
    .reveal {
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    }
    .reveal.is-hidden { opacity: 0; transform: translateY(28px); }
    .reveal-d1 { transition-delay: .1s; }
    .reveal-d2 { transition-delay: .2s; }
    .reveal-d3 { transition-delay: .3s; }
    @media (prefers-reduced-motion: reduce) {
      .reveal, .reveal.is-hidden { opacity: 1; transform: none; transition: none; }
      html { scroll-behavior: auto; }
    }

    /* ---------- Header / Nav ---------- */
    .site-header {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 50;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
    }
    .site-header.is-scrolled {
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(16px) saturate(1.4);
      border-bottom-color: rgba(10, 20, 40, .07);
      box-shadow: 0 1px 12px rgba(10, 20, 40, .05);
    }
    /* Keep the nav row above the mobile panel so the close button stays
       reachable while the menu is open. */
    .site-header > .container { position: relative; z-index: 46; }
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 5rem;
    }
    .nav__logo {
      display: inline-flex;
      align-items: center;
      gap: .625rem;
      color: var(--white);
    }
    .nav__logo svg { color: currentColor; flex-shrink: 0; }
    .nav__logo-text { display: flex; flex-direction: column; }
    .nav__logo-title {
      font-weight: 700;
      font-size: 1.125rem;
      line-height: 1;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .nav__logo-sub {
      font-size: .625rem;
      line-height: 1.4;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .65);
      margin-top: .125rem;
      transition: color .3s var(--ease);
    }
    .nav__logo-sub em {
      text-transform: none;
      font-style: normal;
      font-size: 1.3em;
      letter-spacing: 0;
      color: var(--brand-300);
      transition: color .3s var(--ease);
    }
    /* "Aesthetic" is drawn from outlines (#logo-aesthetic in the sprite), not set
       in a script face. Brush Script MT ships with Office and macOS but not with
       Windows itself, iOS, Android or Linux, so most visitors fell through to
       whatever `cursive` mapped to — Snell Roundhand, Dancing Script, or a plain
       sans. The box below reproduces the metrics of the text it replaces, so the
       word sits exactly where it always did and `Anatomy` did not shift. Sized in
       em, so it still scales with the 1.3em above and inherits every colour state. */
    .nav__logo-script {
      display: inline-block;
      width: 2.99em;
      height: .698em;
      margin-left: -.062em;    /* the A's ink starts left of its origin */
      margin-right: -.011em;   /* the rest of the run's advance width */
      vertical-align: -.0513em;
      fill: currentColor;
    }
    .nav__links {
      display: none;
      align-items: center;
      gap: 2.25rem;
    }
    @media (min-width: 768px) {
      .nav__links { display: flex; }
    }
    .nav__link {
      position: relative;
      font-size: .875rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .85);
      transition: color .2s var(--ease);
      padding-block: .25rem;
    }
    .nav__link::after {
      content: "";
      position: absolute;
      left: 0; right: 100%;
      bottom: 0;
      height: 1.5px;
      background: currentColor;
      transition: right .3s var(--ease-out);
    }
    .nav__link:hover { color: var(--white); }
    .nav__link:hover::after { right: 0; }
    .nav__cta {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .625rem 1.375rem;
      border-radius: var(--radius-pill);
      font-size: .875rem;
      font-weight: 600;
      color: var(--white);
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .3);
      transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease-out);
    }
    .nav__cta:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
    @media (max-width: 379px) { .nav__cta { display: none; } }

    .nav__end { display: flex; align-items: center; gap: .625rem; }
    .nav__toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: var(--radius-md);
      color: var(--white);
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .22);
      transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
    }
    @media (min-width: 768px) { .nav__toggle { display: none; } }
    .nav__toggle .icon-close { display: none; }
    .nav__toggle.is-open .icon-menu { display: none; }
    .nav__toggle.is-open .icon-close { display: block; }

    .mobile-menu {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 45;
      padding: 5.75rem 1.25rem 1.5rem;
      background: rgba(6, 13, 28, .96);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, .1);
      transform: translateY(-102%);
      visibility: hidden;
      transition: transform .4s var(--ease-out), visibility .4s;
      display: flex;
      flex-direction: column;
    }
    .mobile-menu.is-open { transform: none; visibility: visible; }
    @media (min-width: 768px) { .mobile-menu { display: none; } }
    .mobile-menu__link {
      padding: 1rem .25rem;
      font-size: 1.0625rem;
      font-weight: 500;
      color: rgba(255, 255, 255, .9);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      transition: color .2s var(--ease);
    }
    .mobile-menu__link:hover { color: var(--white); }
    .mobile-menu .btn { margin-top: 1.375rem; }

    /* Scrolled state — recolor nav items */
    .site-header.is-scrolled .nav__logo { color: var(--blue-600); }
    .site-header.is-scrolled .nav__logo-title { color: var(--ink-900); }
    .site-header.is-scrolled .nav__logo-sub { color: var(--gray-500); }
    .site-header.is-scrolled .nav__logo-sub em { color: var(--blue-600); }
    .site-header.is-scrolled .nav__link { color: var(--gray-600); }
    .site-header.is-scrolled .nav__link:hover { color: var(--ink-900); }
    .site-header.is-scrolled .nav__cta {
      background: var(--ink-900);
      color: var(--white);
      border-color: transparent;
      box-shadow: 0 8px 20px -8px rgba(10, 20, 40, .4);
    }
    .site-header.is-scrolled .nav__cta:hover { background: var(--ink-700); }
    .site-header.is-scrolled .nav__toggle {
      color: var(--ink-900);
      background: var(--gray-100);
      border-color: var(--gray-200);
    }

    /* With the panel open the nav sits on the dark sheet, so it drops the
       scrolled (light) treatment and reads white again. */
    .site-header.is-menu-open,
    .site-header.is-menu-open.is-scrolled {
      background: transparent;
      border-bottom-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }
    .site-header.is-menu-open .nav__logo,
    .site-header.is-menu-open .nav__logo-title { color: var(--white); }
    .site-header.is-menu-open .nav__logo-sub { color: rgba(255, 255, 255, .65); }
    .site-header.is-menu-open .nav__logo-sub em { color: var(--brand-300); }
    .site-header.is-menu-open .nav__cta {
      background: rgba(255, 255, 255, .12);
      color: var(--white);
      border-color: rgba(255, 255, 255, .3);
      box-shadow: none;
    }
    .site-header.is-menu-open .nav__toggle {
      color: var(--white);
      background: rgba(255, 255, 255, .14);
      border-color: rgba(255, 255, 255, .3);
    }
    body.has-menu { overflow: hidden; }

    /* ---------- Hero ---------- */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      color: var(--white);
      overflow: hidden;
      padding: 8rem 0 6rem;
    }
    @media (min-width: 1024px) {
      .hero { padding: 9rem 0 7rem; }
    }
    .hero__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      /* Vibrant mesh: electric-blue glow (top-left) + cyan glow (bottom-right)
         over an electric-blue base. */
      background:
        radial-gradient(48rem 36rem at 12% 8%, rgba(59, 130, 246, .48), transparent 55%),
        radial-gradient(58rem 44rem at 92% 92%, rgba(34, 211, 238, .45), transparent 55%),
        linear-gradient(160deg, #0a1428 0%, #1e3a8f 55%, #2563eb 100%);
    }
    .hero__overlay {
      position: absolute;
      inset: 0;
      /* Kept light so the vibrant mesh reads; the text side stays dark
         enough for the white hero copy. */
      background:
        linear-gradient(to right, rgba(6, 13, 28, .85) 0%, rgba(6, 13, 28, .58) 45%, rgba(6, 13, 28, .18) 100%),
        linear-gradient(to top, rgba(6, 13, 28, .45) 0%, transparent 35%);
    }
    .hero__grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem;
      align-items: center;
    }
    @media (min-width: 1024px) {
      .hero__grid { grid-template-columns: 11fr 9fr; gap: 3rem; }
    }
    .hero__content { max-width: 38rem; }
    .hero__tag {
      display: inline-flex;
      align-items: center;
      gap: .625rem;
      padding: .4375rem 1rem;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, .16);
      margin-bottom: 2rem;
    }
    .hero__tag-dot {
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      background: var(--brand-400);
      box-shadow: 0 0 0 4px rgba(96, 165, 250, .2);
    }
    .hero__tag-text {
      font-size: .75rem;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--brand-100);
    }
    .hero__title {
      font-family: var(--font-display);
      font-weight: 300;
      font-size: clamp(2.75rem, 5.5vw, 4.75rem);
      line-height: 1.04;
      letter-spacing: -.02em;
      margin-bottom: 1.75rem;
    }
    .hero__title strong {
      display: block;
      font-weight: 600;
      background: linear-gradient(100deg, var(--brand-300) 0%, var(--brand-400) 60%, var(--brand-300) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      padding-right: .1em;
    }
    .hero__lead {
      font-size: 1.125rem;
      line-height: 1.7;
      color: rgba(226, 232, 240, .92);
      margin-bottom: 2.5rem;
      font-weight: 300;
      max-width: 34rem;
    }
    @media (min-width: 1024px) {
      .hero__lead { font-size: 1.1875rem; }
    }
    .hero__actions {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2.75rem;
    }
    @media (min-width: 640px) {
      .hero__actions { flex-direction: row; }
    }
    /* Same button row used as a standalone call to action, not under a hero. */
    .hero__actions--center { justify-content: center; margin-bottom: 0; }
    /* Hero product visual */
    .hero__visual {
      position: relative;
      display: none;
      min-height: 40rem;
    }
    @media (min-width: 1024px) {
      .hero__visual { display: block; }
    }
    .hero__visual-glow {
      position: absolute;
      top: 50%; left: 50%;
      width: 34rem; height: 34rem;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(59, 130, 246, .28) 0%, transparent 62%);
      pointer-events: none;
    }
    /* Two exploded boards, staggered diagonally so both read as distinct
       puzzles: the deeper layers (4/5) sit behind and below, the upper
       layers (2/3) in front and above. */
    .hero__puzzle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(30rem, 92%);
      filter: var(--shadow-float);
    }
    .hero__puzzle--front {
      z-index: 1;
      transform: translate(-64%, -62%) rotate(-4deg);
      animation: heroFloatFront 7s ease-in-out infinite;
    }
    .hero__puzzle--back {
      z-index: 0;
      transform: translate(-36%, -38%) rotate(5deg);
      animation: heroFloatBack 8.5s ease-in-out infinite;
    }
    @keyframes heroFloatFront {
      0%, 100% { transform: translate(-64%, -62%) rotate(-4deg); }
      50% { transform: translate(-64%, -63.2%) rotate(-4deg); }
    }
    @keyframes heroFloatBack {
      0%, 100% { transform: translate(-36%, -38%) rotate(5deg); }
      50% { transform: translate(-36%, -36.8%) rotate(5deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero__puzzle { animation: none; }
    }

    /* Puzzle visual shown on mobile instead of the floating desktop visual:
       the two exploded boards staggered diagonally, deeper layers (4/5)
       behind and below the upper layers (2/3). Ordered above the headline. */
    .hero__products {
      /* Both children are absolutely positioned, so this box has no in-flow
         content — its height is set explicitly rather than via aspect-ratio,
         which Safari fails to resolve on a flex item with an auto main size
         (the box collapses to 0 and the artwork spills over the headline). */
      --hero-products-w: min(30rem, 94vw);
      position: relative;
      order: -1;
      flex: 0 0 auto;
      width: var(--hero-products-w);
      height: calc(var(--hero-products-w) * 0.9);
      margin: 0 auto 1.75rem;
    }
    .hero__product {
      position: absolute;
      top: 47%;
      left: 50%;
      width: 80%;
      filter: drop-shadow(0 18px 26px rgba(6, 13, 28, .45));
    }
    .hero__product--front {
      z-index: 1;
      transform: translate(-64%, -62%) rotate(-4deg);
      animation: heroFloatFront 7s ease-in-out infinite;
    }
    .hero__product--back {
      z-index: 0;
      transform: translate(-36%, -38%) rotate(5deg);
      animation: heroFloatBack 8.5s ease-in-out infinite;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero__product { animation: none; }
    }
    @media (min-width: 1024px) { .hero__products { display: none; } }

    @media (max-width: 639px) {
      .hero { padding: 6.5rem 0 3.5rem; min-height: auto; }
      .hero__tag { margin-bottom: 1.25rem; }
      .hero__lead { margin-bottom: 1.75rem; }
      /* last block in the stacked hero — the section padding closes it out */
      .hero__actions { margin-bottom: 0; }
      .hero__proof { gap: 1rem 1.25rem; }
      .nav { height: 4.5rem; }
    }

    /* ---------- Sections ---------- */
    .section { padding: 5rem 0; }
    @media (max-width: 767px) { .section { padding: 3.5rem 0; } }
    .section--alt { background: linear-gradient(180deg, var(--paper) 0%, var(--white) 100%); }
    .section--gray {
      background: var(--paper-warm);
      border-top: 1px solid var(--gray-100);
      border-bottom: 1px solid var(--gray-100);
    }
    .section--dark {
      /* Echoes the hero: electric-blue glow (top-left) + cyan glow
         (bottom-right) over an electric-blue base. */
      background:
        radial-gradient(72rem 48rem at 12% -8%, rgba(59, 130, 246, .38), transparent 55%),
        radial-gradient(66rem 46rem at 92% 112%, rgba(34, 211, 238, .34), transparent 55%),
        linear-gradient(160deg, #0a1428 0%, #1a337d 55%, #2352c9 100%);
      color: var(--white);
      position: relative;
      overflow: hidden;
    }
    .section__head {
      max-width: 44rem;
      margin: 0 auto 4rem;
      text-align: center;
    }
    .section__title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(2rem, 4vw, 2.875rem);
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--ink-900);
      /* every head pairs the title with an eyebrow above it */
      margin-top: 1rem;
      margin-bottom: 1.125rem;
    }
    .section__lead {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--gray-600);
    }
    .section--dark .section__title { color: var(--white); }
    .section--dark .section__lead { color: var(--brand-100); opacity: .85; }
    .section--dark .eyebrow { color: var(--brand-300); }

    /* ---------- How it works (intro) ---------- */
    /* The intro is the only thing in this section, so it reads as floating
       between the hero and the puzzle. The hero's bottom padding sits inside
       its own background, so above the copy there is only this section's
       padding — while below it that padding stacks with the puzzle section's.
       Equal padding therefore lands the copy hugging the hero; shifting it
       half a step down centres it in the gap. Total height is unchanged, so
       the section's gradient still spans the same band. */
    #how-it-works { padding-top: 7.5rem; padding-bottom: 2.5rem; }
    .intro {
      max-width: 56rem;
      margin: 0 auto;
      text-align: center;
    }
    .intro h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(2rem, 4vw, 2.75rem);
      line-height: 1.15;
      letter-spacing: -.02em;
      color: var(--ink-900);
      margin-bottom: 1.25rem;
    }
    .intro h2 em {
      font-style: normal;
      color: var(--blue-600);
    }
    .intro p {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--gray-600);
      max-width: 38rem;
      margin-inline: auto;
    }
    @media (min-width: 768px) {
      .intro p { font-size: 1.1875rem; }
    }

    /* ---------- Split (puzzle + textbook) ---------- */
    .split {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4rem;
    }
    @media (min-width: 1024px) {
      .split { flex-direction: row; gap: 5.5rem; }
    }
    .split--reverse { flex-direction: column; }
    @media (min-width: 1024px) {
      .split--reverse { flex-direction: row-reverse; }
    }
    .split__media,
    .split__copy { flex: 1; min-width: 0; width: 100%; }

    .split__copy h2 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(2.125rem, 4.5vw, 3.125rem);
      line-height: 1.1;
      letter-spacing: -.02em;
      color: var(--ink-900);
      margin: 1.5rem 0 1.375rem;
    }
    .split__copy > p {
      font-size: 1.125rem;
      line-height: 1.7;
      color: var(--gray-600);
      margin-bottom: 2.25rem;
    }
    .feature-list { display: grid; gap: 1.125rem; }
    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: .875rem;
      color: var(--gray-700);
      line-height: 1.55;
    }
    .feature-list svg {
      flex-shrink: 0;
      margin-top: .1875rem;
      color: var(--blue-600);
    }

    /* Puzzle slideshow */
    .puzzle-frame {
      position: relative;
      width: 100%;
    }
    .puzzle-frame__halo {
      position: absolute;
      inset: -1.25rem;
      background:
        radial-gradient(40rem 26rem at 20% 0%, rgba(59, 130, 246, .14), transparent 60%),
        linear-gradient(to top right, var(--brand-100), var(--brand-50));
      border-radius: var(--radius-xl);
      transform: rotate(-2.5deg);
      z-index: 0;
    }
    .puzzle-card {
      position: relative;
      z-index: 1;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      padding: 1.25rem 1.25rem 1.375rem;
      overflow: hidden;
    }
    .puzzle-stage {
      position: relative;
      width: 100%;
      padding-bottom: 72%;
      background: var(--paper);
      border-radius: var(--radius-md);
      overflow: hidden;
      /* Sideways drags are swipes between layers; up and down still scrolls. */
      touch-action: pan-y;
    }
    .puzzle-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      transition: opacity 700ms ease-in-out;
      -webkit-user-drag: none;
      user-select: none;
    }
    .puzzle-layer.is-active { opacity: 1; }
    .puzzle-label {
      text-align: center;
      padding: .875rem 0 1rem;
      color: var(--gray-500);
      font-size: .875rem;
      font-weight: 500;
      letter-spacing: .01em;
    }
    .puzzle-pagination {
      display: flex;
      justify-content: center;
      gap: .5rem;
      padding-bottom: .25rem;
    }
    .puzzle-dot {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: .875rem;
      background: var(--gray-100);
      color: var(--gray-700);
      /* `color` is deliberately not transitioned: it can't be composited, so
         the browser repaints the dot on every frame of the slideshow. The
         swap is instant and reads no differently at this size. */
      transition: background-color .2s var(--ease), transform .2s var(--ease-out);
    }
    .puzzle-dot:hover { background: var(--gray-200); transform: translateY(-1px); }
    .puzzle-dot.is-active {
      background: var(--ink-900);
      color: var(--white);
      box-shadow: 0 6px 14px -6px rgba(10, 20, 40, .45);
    }

    /* Textbook image — transparent render floats free */
    .book-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .book-frame {
      position: relative;
      display: inline-block;
      margin: 0 auto;
      /* Bottom room for the "Look inside" cue hanging under the book. */
      padding: 2rem 1rem 4rem;
    }
    .book-frame__halo {
      position: absolute;
      inset: 6% -4%;
      background:
        radial-gradient(circle at 50% 45%, rgba(59, 130, 246, .16) 0%, transparent 62%),
        linear-gradient(to top right, var(--brand-100), var(--blue-50));
      border-radius: var(--radius-xl);
      transform: rotate(3deg);
      z-index: 0;
    }
    .book-frame__trigger {
      position: relative;
      z-index: 1;
      display: block;
      cursor: pointer;
    }
    .book-frame img {
      position: relative;
      z-index: 1;
      max-height: 35rem;
      width: auto;
      filter: var(--shadow-float);
      transition: transform .5s var(--ease-out);
    }
    .book-frame__trigger:hover img,
    .book-frame__trigger:focus-visible img { transform: translateY(-8px) rotate(-1deg); }
    /* `max-height` is only a ceiling, so with `width: auto` the cover sat at
       its intrinsic 530px while the type beside it grew. An explicit rem
       width makes it scale too. Scoped so the mobile and 1080p rendering,
       which the intrinsic size already gets right, is left untouched. */
    @media (min-width: 1920px) {
      .book-frame img { width: 33.125rem; }
    }

    /* "Look inside" cue — always on show, so the book reads as openable at a
       glance rather than only rewarding a hover. Worn by the home page book,
       and again as its own button over the product gallery. */
    .peek-cue {
      position: absolute;
      z-index: 2;
      left: 50%;
      transform: translate(-50%, 0);
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      white-space: nowrap;
      padding: .4375rem 1.25rem .4375rem .4375rem;
      border-radius: var(--radius-pill);
      background: var(--white);
      border: 1px solid var(--gray-200);
      color: var(--ink-800);
      box-shadow: var(--shadow-lg);
      transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease-out);
    }
    /* Hangs off the bottom of the book, clear of the artwork. */
    .peek-cue--book { bottom: -1.75rem; }
    .peek-cue__icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 2.125rem;
      height: 2.125rem;
      border-radius: var(--radius-pill);
      background: var(--brand-50);
      color: var(--blue-600);
      transition: background .3s var(--ease), color .3s var(--ease);
    }
    /* A slow halo, the quietest possible nudge to click. */
    .peek-cue__icon::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 2px solid var(--brand-400);
      animation: cue-halo 3s var(--ease-out) infinite;
    }
    @keyframes cue-halo {
      0% { opacity: .6; transform: scale(1); }
      65%, 100% { opacity: 0; transform: scale(1.75); }
    }
    .peek-cue__text {
      display: grid;
      gap: .0625rem;
      text-align: left;
      line-height: 1.25;
    }
    .peek-cue__text b {
      font-size: .875rem;
      font-weight: 600;
      letter-spacing: .01em;
    }
    .peek-cue__text > span {
      font-size: .625rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--gray-500);
      transition: color .3s var(--ease);
    }
    /* Lit state. On the home page the trigger wraps the cue; over the
       gallery the cue is the trigger, so both routes are spelled out. */
    .book-frame__trigger:hover .peek-cue,
    .book-frame__trigger:focus-visible .peek-cue,
    .pdp-gallery__peek:hover,
    .pdp-gallery__peek:focus-visible {
      background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-900) 100%);
      border-color: transparent;
      color: var(--white);
      transform: translate(-50%, -2px);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 18px 40px -10px rgba(10, 20, 40, .55);
    }
    .book-frame__trigger:hover .peek-cue__icon,
    .book-frame__trigger:focus-visible .peek-cue__icon,
    .pdp-gallery__peek:hover .peek-cue__icon,
    .pdp-gallery__peek:focus-visible .peek-cue__icon {
      background: rgba(255, 255, 255, .16);
      color: var(--white);
    }
    .book-frame__trigger:hover .peek-cue__text > span,
    .book-frame__trigger:focus-visible .peek-cue__text > span,
    .pdp-gallery__peek:hover .peek-cue__text > span,
    .pdp-gallery__peek:focus-visible .peek-cue__text > span { color: var(--brand-300); }
    .book-frame__trigger:hover .peek-cue__icon::after,
    .book-frame__trigger:focus-visible .peek-cue__icon::after,
    .pdp-gallery__peek:hover .peek-cue__icon::after,
    .pdp-gallery__peek:focus-visible .peek-cue__icon::after { animation: none; }
    @media (prefers-reduced-motion: reduce) {
      .peek-cue__icon::after { animation: none; }
    }
    .book-frame__badge {
      position: absolute;
      z-index: 2;
      right: -.25rem;
      top: 3rem;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-pill);
      padding: .5rem 1rem;
      font-size: .75rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-800);
      box-shadow: var(--shadow-md);
    }

    /* ---------- Author ---------- */
    .author-frame {
      position: relative;
      display: inline-block;
      margin: 0 auto;
    }
    .author-frame__halo {
      position: absolute;
      inset: -1.25rem;
      background: conic-gradient(from 210deg, var(--brand-100), var(--blue-50), var(--brand-100));
      border-radius: 50%;
      z-index: 0;
    }
    .author-frame img {
      position: relative;
      z-index: 1;
      width: 20rem;
      max-width: 100%;
      height: 20rem;
      object-fit: cover;
      border-radius: 50%;
      border: 5px solid var(--white);
      box-shadow: var(--shadow-xl);
    }
    .author-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .author-credentials {
      list-style: none;
      padding: 0;
      margin: 1.5rem 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }
    .author-credentials li {
      background: var(--brand-50);
      color: var(--ink-800);
      border: 1px solid var(--brand-100);
      font-size: .8125rem;
      font-weight: 500;
      padding: .375rem .875rem;
      border-radius: var(--radius-pill);
    }

    /* ---------- Reviews ---------- */
    .review-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    @media (min-width: 768px) {
      .review-grid { grid-template-columns: repeat(3, 1fr); }
    }
    /* Product pages carry two reviews rather than three, so the cards centre
       on the page instead of stretching across a three-column track. */
    .review-grid--narrow {
      grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
      max-width: 52rem;
      margin-inline: auto;
    }
    @media (min-width: 768px) {
      .review-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
    }
    .review-card {
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg);
      padding: 2.25rem 2rem;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-sm);
      position: relative;
      transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
    }
    .review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .review-card::before {
      content: "\201C";
      position: absolute;
      top: 1rem;
      right: 1.5rem;
      font-family: var(--font-display);
      font-size: 5rem;
      line-height: 1;
      color: var(--brand-100);
      pointer-events: none;
    }
    .review-card__stars {
      display: flex;
      gap: 2px;
      margin-bottom: 1.25rem;
      color: var(--gold-400);
    }
    .review-card__quote {
      color: var(--gray-700);
      line-height: 1.7;
      margin-bottom: 1.75rem;
      flex: 1;
    }
    .review-card__author {
      display: flex;
      align-items: center;
      gap: .875rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--gray-100);
    }
    .avatar {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .875rem;
    }
    .avatar--blue { background: var(--brand-100); color: var(--ink-800); }
    .avatar--pink { background: var(--pink-100); color: var(--pink-900); }
    .avatar--green { background: var(--green-100); color: var(--green-900); }
    .review-card__name {
      font-weight: 600;
      color: var(--gray-900);
      font-size: .875rem;
    }
    .review-card__role {
      font-size: .75rem;
      color: var(--gray-500);
    }

    /* ---------- Pricing ---------- */
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.75rem;
      max-width: 58rem;
      margin: 0 auto;
      position: relative;
      align-items: stretch;
    }
    @media (min-width: 768px) {
      .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .pricing-card {
      background: var(--white);
      color: var(--gray-900);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform .35s var(--ease-out);
    }
    .pricing-card:hover { transform: translateY(-4px); }
    /* Full-card click target; the in-card button stays the focusable link */
    .pricing-card__link {
      position: absolute;
      inset: 0;
      z-index: 3;
      border-radius: inherit;
    }
    .pricing-card__body .btn { position: relative; z-index: 4; }
    .pricing-card--featured {
      border: 1.5px solid var(--brand-400);
      box-shadow: 0 0 0 6px rgba(59, 130, 246, .14), var(--shadow-xl);
    }
    .pricing-card__badge {
      position: absolute;
      top: 1.125rem;
      left: 1.125rem;
      z-index: 2;
      background: linear-gradient(100deg, var(--blue-600), var(--brand-500));
      color: var(--white);
      padding: .4375rem 1.125rem;
      border-radius: var(--radius-pill);
      font-size: .75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .12em;
      white-space: nowrap;
      box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .6);
    }
    .pricing-card__media {
      position: relative;
      aspect-ratio: 5 / 4;
      padding: 1.75rem;
      background:
        radial-gradient(120% 100% at 50% 18%, var(--white) 0%, var(--brand-50) 52%, var(--gray-100) 100%);
      border-bottom: 1px solid var(--gray-100);
      overflow: hidden;
    }
    .pricing-card__stage {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .5s var(--ease-out);
    }
    .pricing-card:hover .pricing-card__stage { transform: scale(1.045); }
    .pricing-card__stage img {
      max-height: 100%;
      width: auto;
      filter: drop-shadow(0 16px 22px rgba(6, 13, 28, .22));
    }
    .pricing-card__stage--pair img { position: absolute; }
    .pricing-card__stage--pair img:first-child {
      max-height: 88%;
      transform: translateX(-26%) rotate(-7deg);
    }
    .pricing-card__stage--pair img:last-child {
      max-height: 96%;
      z-index: 1;
      transform: translate(24%, 4%) rotate(6deg);
      filter: drop-shadow(-14px 12px 20px rgba(6, 13, 28, .3));
    }
    .pricing-card__body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 1.75rem 1.75rem 2rem;
    }
    @media (min-width: 768px) {
      .pricing-card__body { padding: 2rem 2.25rem 2.25rem; }
    }
    .pricing-card h3 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
      margin-bottom: .25rem;
      color: var(--ink-900);
    }
    .pricing-card__sub {
      color: var(--gray-500);
      font-size: .9375rem;
      margin-bottom: 1.125rem;
    }
    .pricing-card__price {
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink-900);
      font-size: 2.75rem;
      line-height: 1;
    }
    .pricing-card__price-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: .625rem;
      margin-bottom: 1.5rem;
      margin-top: auto;
    }
    .pricing-card__price-old {
      color: var(--gray-400);
      font-size: 1.0625rem;
      text-decoration: line-through;
    }
    .pricing-card__save {
      background: var(--emerald-50);
      color: var(--emerald-800);
      font-size: .75rem;
      font-weight: 600;
      padding: .25rem .625rem;
      border-radius: var(--radius-pill);
    }
    .pricing-guarantee {
      margin: 2.5rem auto 0;
      max-width: 58rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      font-size: .8125rem;
      color: var(--brand-100);
      opacity: .85;
    }
    .pricing-guarantee span {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }
    .pricing-guarantee svg { color: var(--brand-400); }

    /* ---------- FAQ ---------- */
    .faq-list { display: grid; gap: .875rem; }
    .faq-item {
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
    }
    .faq-item[open] { box-shadow: var(--shadow-md); border-color: var(--gray-200); }
    .faq-item > summary {
      list-style: none;
      cursor: pointer;
      padding: 1.375rem 1.625rem;
      font-weight: 600;
      color: var(--gray-900);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      transition: color .2s var(--ease);
    }
    .faq-item > summary:hover { color: var(--blue-600); }
    .faq-item > summary::-webkit-details-marker { display: none; }
    .faq-item__chevron {
      flex-shrink: 0;
      color: var(--gray-400);
      transition: transform .3s var(--ease), color .3s var(--ease);
    }
    .faq-item[open] > summary { color: var(--ink-800); }
    .faq-item[open] .faq-item__chevron { transform: rotate(180deg); color: var(--blue-600); }
    .faq-item__body {
      padding: 0 1.625rem 1.375rem;
      color: var(--gray-600);
      line-height: 1.65;
    }

    /* ---------- Blog ---------- */
    .blog-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2rem;
    }
    @media (min-width: 768px) {
      .blog-grid { grid-template-columns: repeat(3, 1fr); }
    }
    .blog-card {
      cursor: pointer;
      transition: transform .35s var(--ease-out);
    }
    .blog-card:hover { transform: translateY(-4px); }
    .blog-card__thumb {
      height: 12.5rem;
      border-radius: var(--radius-md);
      overflow: hidden;
      margin-bottom: 1.375rem;
      position: relative;
      box-shadow: var(--shadow-sm);
      transition: box-shadow .35s var(--ease);
    }
    .blog-card:hover .blog-card__thumb { box-shadow: var(--shadow-lg); }
    .blog-card__thumb--blue { background: linear-gradient(135deg, #dbeafe 0%, #3b82f6 100%); }
    .blog-card__thumb--amber { background: linear-gradient(135deg, #fdf3d8 0%, #d9a52e 100%); }
    .blog-card__thumb--green { background: linear-gradient(135deg, #d1fae5 0%, #10b981 100%); }
    .blog-card__tag {
      position: absolute;
      z-index: 2;
      top: 1rem;
      left: 1rem;
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(4px);
      padding: .3125rem .75rem;
      border-radius: var(--radius-pill);
      font-size: .6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    .blog-card__tag--blue { color: var(--blue-900); }
    .blog-card__tag--amber { color: var(--amber-700); }
    .blog-card__tag--green { color: var(--emerald-800); }
    /* Photos cover the tinted panel; the puzzle render is transparent, so on
       that card the panel shows through and keeps the colour coding. */
    .blog-card__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 26%;
      transition: transform .5s var(--ease-out);
    }
    .blog-card:hover .blog-card__img { transform: scale(1.05); }
    /* Hold each crop on its subject: the pen on the brow, the needle tip,
       and the assembled puzzle. */
    .blog-card__thumb--blue .blog-card__img { object-position: 50% 42%; }
    .blog-card__thumb--amber .blog-card__img { object-position: 46% 38%; }
    .blog-card__thumb--green .blog-card__img { object-position: 50% 32%; }
    .blog-card__meta {
      font-size: .75rem;
      color: var(--gray-500);
      margin-bottom: .5rem;
    }
    .blog-card__title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.3125rem;
      line-height: 1.3;
      color: var(--ink-900);
      margin-bottom: .5rem;
      transition: color .25s var(--ease);
    }
    .blog-card:hover .blog-card__title { color: var(--blue-600); }
    .blog-card__excerpt {
      color: var(--gray-600);
      font-size: .875rem;
      line-height: 1.65;
    }

    /* ---------- Footer ---------- */
    .site-footer {
      background: var(--paper);
      padding: 3.5rem 0;
      border-top: 1px solid var(--gray-100);
    }
    .site-footer__row {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      align-items: center;
      justify-content: space-between;
    }
    @media (min-width: 768px) {
      .site-footer__row { flex-direction: row; }
    }
    .site-footer .nav__logo { color: var(--blue-600); }
    .site-footer .nav__logo-title { color: var(--ink-900); font-size: .9rem; }
    .site-footer .nav__logo-sub { color: var(--gray-500); font-size: .5625rem; }
    .site-footer .nav__logo-sub em { color: var(--blue-600); }
    .site-footer__copy {
      font-size: .875rem;
      color: var(--gray-500);
    }
    .site-footer__links {
      display: flex;
      /* The row centres its items, so this nav is sized to its content and would
         overflow a narrow phone. Cap it at the row width so the links can wrap. */
      max-width: 100%;
      flex-wrap: wrap;
      justify-content: center;
      gap: .75rem 1.5rem;
      font-size: .875rem;
      color: var(--gray-500);
    }
    .site-footer__links a { transition: color .2s var(--ease); }
    .site-footer__links a:hover { color: var(--blue-600); }

    /* ---------- Mobile sticky order bar ---------- */
    .mobile-cta {
      position: fixed;
      left: .875rem;
      right: .875rem;
      bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .875rem;
      background: rgba(10, 20, 40, .94);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 1.125rem;
      padding: .75rem .75rem .75rem 1.125rem;
      color: var(--white);
      box-shadow: 0 18px 40px -12px rgba(6, 13, 28, .55);
      transform: translateY(150%);
      opacity: 0;
      pointer-events: none;
      transition: transform .45s var(--ease-out), opacity .45s var(--ease);
    }
    .mobile-cta.is-shown { transform: none; opacity: 1; pointer-events: auto; }
    @media (min-width: 768px) { .mobile-cta { display: none; } }
    .mobile-cta__info { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
    .mobile-cta__title { font-size: .8125rem; font-weight: 600; }
    .mobile-cta__price { font-size: .75rem; color: var(--brand-300); }
    .mobile-cta__btn {
      flex-shrink: 0;
      background: linear-gradient(100deg, var(--blue-600), var(--brand-500));
      color: var(--white);
      font-size: .875rem;
      font-weight: 600;
      padding: .75rem 1.375rem;
      border-radius: var(--radius-pill);
      box-shadow: 0 8px 18px -6px rgba(37, 99, 235, .55);
    }
    @media (prefers-reduced-motion: reduce) {
      .mobile-cta { transition: opacity .3s var(--ease); transform: none; }
    }

    /* ---------- Book preview lightbox ----------
       The preview is a physical object, not a panel: the book floats on the
       blurred page and its leaves turn on a real 3D hinge at the spine. */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      --flip: 820ms;
      --flip-ease: cubic-bezier(.34, .06, .16, 1);
    }
    .lightbox[hidden] { display: none; }
    .lightbox__backdrop {
      position: absolute;
      inset: 0;
      background: rgba(6, 13, 28, .86);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      opacity: 0;
      transition: opacity .45s var(--ease);
    }
    .lightbox.is-open .lightbox__backdrop { opacity: 1; }

    .lightbox__inner {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4.5rem 1.5rem 1.5rem;
      opacity: 0;
      transition: opacity .45s var(--ease);
    }
    .lightbox.is-open .lightbox__inner { opacity: 1; }

    .lightbox__close {
      position: absolute;
      z-index: 3;
      top: 1.25rem;
      right: 1.25rem;
      width: 2.875rem;
      height: 2.875rem;
      display: grid;
      place-items: center;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      color: var(--white);
      transition: background .25s var(--ease), transform .25s var(--ease-out);
    }
    .lightbox__close:hover { background: rgba(255, 255, 255, .24); transform: rotate(90deg); }

    .lightbox__head {
      flex-shrink: 0;
      text-align: center;
      margin-bottom: 1.25rem;
    }
    .lightbox__eyebrow {
      font-size: .6875rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--brand-300);
      margin-bottom: .375rem;
    }
    .lightbox__title {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: -.01em;
      color: var(--white);
    }

    /* ---- the book ---- */
    .book-viewport {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      /* Clips leaves that swing past the edge. Sits outside the 3D context
         so it never flattens the page turn. */
      overflow: hidden;
      cursor: pointer;
      touch-action: pan-y;
    }
    .book-spread {
      --page-w: 20rem;
      --page-h: 26rem;
      --progress: 0;
      position: relative;
      /* Never let the flex parent squash the spread — when it is wider than
         the viewport the overflow is meant to be clipped, not compressed. */
      flex: 0 0 auto;
      width: calc(var(--page-w) * 2);
      height: var(--page-h);
      perspective: 2600px;
      perspective-origin: 50% 46%;
      /* Closed, only the right half is occupied — pull the spread left so the
         cover sits centred. Once open, the two halves centre as a spread. */
      transform: translateX(calc(var(--page-w) / -2));
      transition: transform var(--flip) var(--flip-ease);
    }
    .book-spread.is-spread { transform: none; }
    /* Too narrow for both halves: centre whichever single page is being read,
       and let the reader step across the spine one page at a time. */
    .book-spread.is-narrow { transform: translateX(calc(var(--page-w) / -2)); }
    .book-spread.is-narrow.is-verso { transform: translateX(calc(var(--page-w) / 2)); }
    /* The block of paper the open leaves are sitting on, and the shadow the
       whole object casts onto the page behind it. */
    .book-spread::before,
    .book-spread::after {
      content: "";
      position: absolute;
      right: -.375rem;
      /* Closed, the block is only under the right half — and flush with the
         spine, never overhanging it. Paper shows at a fore-edge, not at the
         binding; a sliver there reads as a loose stack rather than a book.
         Collapsing back is immediate: the instant the cover lifts off the
         left, nothing is lying there any more. */
      left: var(--page-w);
      transition: left 0s;
    }
    /* Expanding is the other way round: hold until the cover has landed on
       top, so the block is never seen arriving. */
    .book-spread.is-spread::before,
    .book-spread.is-spread::after {
      left: -.375rem;
      transition: left 0s var(--flip);
    }
    .book-spread::before {
      top: -.1875rem;
      bottom: -.4375rem;
      border-radius: 4px;
      background: linear-gradient(to bottom, #eef1f6, #cfd7e4 60%, #b9c3d4);
      box-shadow: 0 2px 6px rgba(6, 13, 28, .5);
    }
    .book-spread::after {
      bottom: -1.5rem;
      height: 3rem;
      background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .7), transparent 72%);
      filter: blur(10px);
      pointer-events: none;
      z-index: -1;
    }

    /* Paper thickness at the fore-edges — the unread block shrinks as the
       read block on the left grows. */
    .book__edge {
      position: absolute;
      top: .375rem;
      bottom: .375rem;
      width: .5rem;
      border-radius: 2px;
      background: repeating-linear-gradient(to right, #fdfdfe 0 1px, #d8dfea 1px 2px);
      box-shadow: 0 2px 10px rgba(6, 13, 28, .45);
    }
    .book__edge--right {
      right: -.4375rem;
      /* The unread block only thins once the leaf has actually left it. */
      opacity: calc(1 - var(--progress) * .8);
      transition: opacity .25s var(--flip);
    }
    /* Nothing is stacked on the left until a leaf has actually landed there,
       so this edge waits out the turn before appearing — and leaves the
       instant the cover starts coming back. */
    .book__edge--left {
      left: -.4375rem;
      opacity: 0;
      transition: opacity 0s;
    }
    .book-spread.is-spread .book__edge--left {
      opacity: calc(var(--progress) * .9);
      transition: opacity .25s var(--flip);
    }

    .book {
      position: absolute;
      top: 0;
      left: var(--page-w);
      width: var(--page-w);
      height: var(--page-h);
      transform-style: preserve-3d;
    }
    .book__leaf {
      position: absolute;
      inset: 0;
      transform-origin: left center;
      transform-style: preserve-3d;
      transition: transform var(--flip) var(--flip-ease);
      will-change: transform;
    }
    .book__leaf.is-turned { transform: rotateY(-180deg); }

    .book__face {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background: linear-gradient(135deg, #ffffff, var(--paper));
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      box-shadow: 0 1px 3px rgba(6, 13, 28, .28), 0 12px 30px -12px rgba(6, 13, 28, .55);
    }
    .book__face--front { border-radius: 2px 5px 5px 2px; }
    .book__face--back {
      transform: rotateY(180deg);
      border-radius: 5px 2px 2px 5px;
    }
    /* `contain`, not `cover`: if a page's proportions ever differ from the
       leaf, show the whole page on paper rather than silently cropping it. */
    .book__face img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    /* The back of a leaf carries the next page, so a spread reads left to
       right like a real book. */
    .book__face--back {
      background: linear-gradient(225deg, #ffffff, var(--paper));
    }
    /* Sits under every leaf so the right half is never empty once the last
       sheet has been turned. */
    .book__base {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      border-radius: 2px 5px 5px 2px;
      background: linear-gradient(135deg, #ffffff, var(--paper));
      box-shadow: 0 1px 3px rgba(6, 13, 28, .28), 0 12px 30px -12px rgba(6, 13, 28, .55);
    }
    .book__base img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* Gutter shading along whichever edge meets the spine. */
    .book__shade {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(to right, rgba(6, 13, 28, .22), rgba(6, 13, 28, .04) 7%, transparent 16%);
    }
    .book__face--back .book__shade {
      background: linear-gradient(to left, rgba(6, 13, 28, .22), rgba(6, 13, 28, .04) 7%, transparent 16%);
    }
    /* While a leaf is in flight it catches the light and darkens as it
       stands up, then settles flat again. */
    .book__leaf.is-flipping .book__shade { animation: leaf-turn var(--flip) var(--flip-ease); }
    @keyframes leaf-turn {
      0%   { background-color: rgba(6, 13, 28, 0); }
      45%  { background-color: rgba(6, 13, 28, .38); }
      70%  { background-color: rgba(6, 13, 28, .22); }
      100% { background-color: rgba(6, 13, 28, 0); }
    }

    /* ---- controls ---- */
    .lightbox__foot {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      margin-top: 2.25rem;
    }
    .lightbox__nav {
      width: 2.875rem;
      height: 2.875rem;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .18);
      color: var(--white);
      transition: background .25s var(--ease), transform .25s var(--ease-out), opacity .25s var(--ease);
    }
    .lightbox__nav:hover { background: rgba(255, 255, 255, .26); transform: scale(1.07); }
    .lightbox__nav[disabled] { opacity: .3; cursor: default; }
    .lightbox__nav[disabled]:hover { background: rgba(255, 255, 255, .12); transform: none; }

    .lightbox__meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .625rem;
      min-width: 9rem;
    }
    .lightbox__count {
      font-size: .8125rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--brand-100);
    }
    .lightbox__dots { display: flex; align-items: center; gap: .5rem; }
    .lightbox__dot {
      width: .5rem;
      height: .5rem;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, .28);
      transition: background .25s var(--ease), width .3s var(--ease-out);
    }
    .lightbox__dot:hover { background: rgba(255, 255, 255, .55); }
    .lightbox__dot.is-active { width: 1.5rem; background: var(--brand-400); }
    .lightbox__hint {
      flex-shrink: 0;
      margin-top: 1rem;
      font-size: .75rem;
      color: rgba(255, 255, 255, .45);
    }

    /* ---- Zoom viewer (product gallery) ---- */
    .pdp-gallery__main { cursor: zoom-in; }
    .pdp-gallery__zoom-cue {
      position: absolute;
      top: .875rem;
      right: .875rem;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 2.25rem;
      height: 2.25rem;
      border-radius: var(--radius-pill);
      background: rgba(6, 13, 28, .5);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .2);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: .82;
      pointer-events: none;   /* let taps fall through to the figure */
      transition: opacity .25s var(--ease), transform .25s var(--ease-out);
    }
    .pdp-gallery__main:hover .pdp-gallery__zoom-cue { opacity: 1; transform: scale(1.06); }

    .lightbox--zoom .zoom-stage {
      position: absolute;
      inset: 0;
      z-index: 1;
      overflow: hidden;
      cursor: grab;
      touch-action: none;
      opacity: 0;
      transition: opacity .35s var(--ease);
    }
    .lightbox--zoom.is-open .zoom-stage { opacity: 1; }
    .lightbox--zoom .zoom-stage.is-panning { cursor: grabbing; }
    .lightbox--zoom .zoom-stage__img {
      position: absolute;
      top: 0;
      left: 0;
      max-width: none;
      width: auto;
      height: auto;
      transform-origin: 0 0;
      will-change: transform;
      user-select: none;
      -webkit-user-select: none;
      -webkit-user-drag: none;
    }
    .lightbox--zoom .lightbox__hint {
      position: absolute;
      left: 50%;
      bottom: 1.25rem;
      transform: translateX(-50%);
      z-index: 3;
      margin-top: 0;
      pointer-events: none;
    }

    body.has-lightbox { overflow: hidden; }

    @media (prefers-reduced-motion: reduce) {
      .lightbox { --flip: 1ms; }
      .lightbox__backdrop,
      .lightbox__inner,
      .book-spread { transition-duration: .01ms; }
      .book__leaf.is-flipping .book__shade { animation: none; }
    }


    /* ---------- Small-screen polish ---------- */
    @media (max-width: 639px) {
      .lightbox__inner { padding: 3.5rem .75rem 1rem; }
      .lightbox__title { font-size: 1.1875rem; }
      .lightbox__head { margin-bottom: .875rem; }
      .lightbox__foot { gap: .875rem; }
      .split { gap: 3rem; }
      .book-frame img { max-height: 400px; }
      .book-frame__badge { top: 2rem; right: 0; }
      .author-frame img { width: 260px; height: 260px; }
      .feature-card { padding: 1.75rem 1.5rem; }
      .review-card { padding: 1.875rem 1.5rem; }
      .pricing-card__media { padding: 1.25rem; }
      .pricing-card__body { padding: 1.5rem 1.5rem 1.75rem; }
      .blog-card__thumb { height: 180px; }
      .faq-item > summary { padding: 1.125rem 1.25rem; }
      .faq-item__body { padding: 0 1.25rem 1.125rem; }
    }
    @media (max-width: 767px) {
      /* keep the sticky order bar from covering footer content */
      .site-footer { padding: 2.5rem 0 7rem; }
    }

    /* ---------- Mobile layout ----------
       Phone/tablet reordering and swipe carousels. Everything here is scoped
       below the desktop breakpoints, so the wide layout is untouched. */
    @media (max-width: 1023.98px) {
      /* A flex column so the product stack can be ordered above the headline. */
      .hero__content { display: flex; flex-direction: column; }

      /* The eyebrow / pill label is moved out of the copy column by main.js so
         it introduces the section above the artwork instead of below it. */
      .split { gap: 3rem; }
      .split__label {
        align-self: flex-start;
        margin-bottom: -1.75rem;   /* pull it close to the artwork it labels */
      }
      .split__copy > h2 { margin-top: 0; }
      /* These two halos start above their artwork, so the label would sit right
         on the tinted panel. Drop the frame to leave the same clearance under
         the label as the textbook section, where the halo starts lower. */
      .puzzle-frame,
      .author-frame { margin-top: 2.5rem; }

      /* Decorative halos bleed past their frame; on narrow screens that bleed
         is what pushed the page wider than the viewport. */
      .puzzle-frame__halo,
      .book-frame__halo { inset-inline: 0; }
    }

    @media (max-width: 767px) {
      /* Section rhythm: the desktop scale leaves phone-sized screens mostly
         empty, so headings sit closer to what they introduce. */
      .section__head { margin-bottom: 2.25rem; }
      .intro h2 { margin-bottom: 1rem; }
      /* The same rebalance, at this breakpoint's tighter 3.5rem scale. */
      #how-it-works { padding-top: 5.25rem; padding-bottom: 1.75rem; }
      .split__copy > p { margin-bottom: 1.75rem; }
      .split__copy h2 { margin-bottom: 1.125rem; }
      .pricing-guarantee { margin-top: 1.75rem; gap: .875rem 1.75rem; }

      /* Reviews, blog posts and kits swipe sideways instead of stacking into a
         very long column. Cards bleed to the screen edges but snap back to
         the container gutter, so the first card lines up with the heading. */
      .review-grid,
      .blog-grid,
      .pricing-grid {
        --edge: 1.25rem;
        display: flex;
        max-width: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--edge);
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: calc(var(--edge) * -1);
        padding: .25rem var(--edge) 1.25rem;
      }
      .review-grid::-webkit-scrollbar,
      .blog-grid::-webkit-scrollbar,
      .pricing-grid::-webkit-scrollbar { display: none; }
      .review-grid > *,
      .blog-grid > *,
      .pricing-grid > * {
        flex: 0 0 min(20rem, 80vw);
        scroll-snap-align: start;
      }
      /* Room for the featured card's focus ring, which sits outside its box. */
      .pricing-grid { padding-block: .5rem 1.5rem; }
      /* Hover lift is a pointer idiom; on a scroller it only fights the swipe. */
      .review-card:hover,
      .blog-card:hover,
      .pricing-card:hover { transform: none; }

      /* Lead with the bundle — the offer most buyers want. */
      .pricing-card--featured { order: -1; }
    }
    @media (min-width: 640px) and (max-width: 767px) {
      .review-grid,
      .blog-grid,
      .pricing-grid { --edge: 1.5rem; }
    }

    /* ---------- Utility ---------- */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }

    /* ---------- Product pages (PDP) ---------- */
    .breadcrumb {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: .5rem;
      padding-top: 6.5rem;
      font-size: .8125rem;
      color: var(--gray-500);
    }
    @media (max-width: 639px) { .breadcrumb { padding-top: 5.75rem; } }
    .breadcrumb a { transition: color .2s var(--ease); }
    .breadcrumb a:hover { color: var(--blue-600); }
    .breadcrumb svg { color: var(--gray-400); }
    .breadcrumb [aria-current] { color: var(--gray-700); font-weight: 500; }

    .pdp-hero {
      display: grid;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      padding: 1.75rem 0 4.5rem;
    }
    @media (min-width: 1024px) {
      .pdp-hero {
        grid-template-columns: 1.05fr .95fr;
        gap: 4.5rem;
        align-items: start;
        padding: 2.25rem 0 6rem;
      }
    }

    /* Grid items default to min-width: auto, so a wide thumb strip would
       stretch this column. Zero lets it track the viewport and pass the
       overflow to the scrollable strip. */
    .pdp-gallery { min-width: 0; }
    @media (min-width: 1024px) {
      .pdp-gallery { position: sticky; top: 6.5rem; }
    }
    .pdp-gallery__main {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1 / 1;
      padding: 2.5rem;
      background:
        radial-gradient(28rem 22rem at 50% 42%, rgba(59, 130, 246, .1), transparent 65%),
        var(--paper);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      /* Sideways drags are swipes between photos; up and down still scrolls. */
      touch-action: pan-y;
    }
    .pdp-gallery__main img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 20px 28px rgba(6, 13, 28, .18));
      transition: opacity .2s var(--ease);
      -webkit-user-drag: none;
      user-select: none;
    }
    /* Sits over the foot of the photo. The JS hides it on every frame but
       the first, where the book itself is on show. */
    .pdp-gallery__peek {
      bottom: 1.25rem;
      cursor: pointer;
    }
    .pdp-gallery__peek[hidden] { display: none; }
    .pdp-thumbs {
      display: flex;
      gap: .75rem;
      margin-top: 1rem;
      /* A long strip of thumbs scrolls rather than forcing the gallery
         column wider than the phone — the pair below lets the grid track
         shrink and hands the overflow to this row instead. */
      overflow-x: auto;
      scrollbar-width: thin;
      /* Room for the focus ring, plus a little breathing space so the
         scrollbar sits clear of the thumbnails rather than hard against
         their bottom edge. */
      padding-bottom: .75rem;
    }
    .pdp-thumb {
      flex: 0 0 auto;
      width: 4.75rem;
      height: 4.75rem;
      padding: .625rem;
      background: var(--white);
      border: 1.5px solid var(--gray-200);
      border-radius: var(--radius-md);
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease-out);
    }
    .pdp-thumb:hover { transform: translateY(-2px); border-color: var(--gray-400); }
    .pdp-thumb.is-active {
      border-color: var(--blue-600);
      box-shadow: 0 0 0 3px var(--brand-100);
    }
    .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }

    .pdp-info .eyebrow { margin-bottom: .875rem; }
    /* A badge above the title needs the gap the eyebrow gets for free. */
    .pdp-info .pill + h1 { margin-top: .875rem; }
    .pdp-info h1 {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(2rem, 4vw, 2.875rem);
      line-height: 1.12;
      letter-spacing: -.02em;
      color: var(--ink-900);
      margin-bottom: .875rem;
    }
    .pdp-rating {
      display: flex;
      align-items: center;
      gap: .625rem;
      margin-bottom: 1.375rem;
      font-size: .875rem;
      color: var(--gray-500);
    }
    .pdp-rating__stars { display: inline-flex; gap: 2px; color: var(--gold-400); }
    .pdp-price-row {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: .75rem;
      margin-bottom: .375rem;
    }
    .pdp-price {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 2.75rem;
      line-height: 1;
      letter-spacing: -.02em;
      color: var(--ink-900);
    }
    .pdp-price-old {
      color: var(--gray-400);
      font-size: 1.125rem;
      text-decoration: line-through;
    }
    .pdp-ship-note {
      font-size: .875rem;
      color: var(--gray-500);
      margin-bottom: 1.75rem;
    }
    .pdp-lead {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: var(--gray-600);
      margin-bottom: 1.75rem;
    }
    .pdp-info .feature-list { margin-bottom: 2.25rem; }
    .pdp-cta { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
    .pdp-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem 1.5rem;
      font-size: .8125rem;
      color: var(--gray-500);
    }
    .pdp-trust span { display: inline-flex; align-items: center; gap: .5rem; }
    .pdp-trust svg { color: var(--blue-600); }

    .pdp-upsell {
      display: flex;
      align-items: center;
      gap: 1.125rem;
      margin-top: 2.25rem;
      padding: 1.25rem 1.375rem;
      background: var(--brand-50);
      border: 1px solid var(--brand-100);
      border-radius: var(--radius-lg);
    }
    .pdp-upsell img {
      width: 3.75rem;
      flex-shrink: 0;
      filter: drop-shadow(0 8px 12px rgba(6, 13, 28, .2));
    }
    .pdp-upsell strong { display: block; color: var(--ink-900); font-size: .9375rem; margin-bottom: .125rem; }
    .pdp-upsell p { font-size: .8125rem; color: var(--gray-600); line-height: 1.5; }
    .pdp-upsell a { color: var(--blue-600); font-weight: 600; white-space: nowrap; margin-left: auto; font-size: .875rem; }
    .pdp-upsell a:hover { text-decoration: underline; }
    @media (max-width: 479px) {
      .pdp-upsell { flex-wrap: wrap; }
      .pdp-upsell a { margin-left: 0; }
    }

    .pdp-included__title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 1.0625rem;
      letter-spacing: -.01em;
      color: var(--ink-900);
      margin-bottom: .75rem;
    }
    .pdp-included {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-bottom: 2.25rem;
    }
    .pdp-included__card {
      text-align: center;
      padding: 1.25rem 1rem;
      background: var(--white);
      border: 1px solid var(--gray-100);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
    }
    .pdp-included__card img {
      height: 5.5rem;
      width: auto;
      margin: 0 auto .75rem;
      object-fit: contain;
      filter: drop-shadow(0 8px 10px rgba(6, 13, 28, .16));
    }
    .pdp-included__card span { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink-900); }
    .pdp-included__card small { font-size: .75rem; color: var(--gray-500); }

    .pill--featured {
      background: linear-gradient(100deg, var(--blue-600), var(--brand-500));
      color: var(--white);
      box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6);
    }