/* ── src/index.html:32 ── */
/* ══ Posty · embedded type ══ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;src:url("/assets/fonts/IBMPlexMono-400.bb87500e32.woff2") format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;src:url("/assets/fonts/IBMPlexMono-500.d32f0e0701.woff2") format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;src:url("/assets/fonts/IBMPlexMono-600.ce9a5ca3a8.woff2") format('woff2');}
@font-face{ font-family:'BauhausVoleVF'; font-style:normal; font-weight:100 950; font-display:block; src:url("/assets/fonts/BauhausVoleVF-100_950.b4a21058ad.woff2") format('woff2-variations'); }
@font-face{ font-family:'BauhausVole'; font-style:normal; font-weight:300; src:url("/assets/fonts/BauhausVoleVF-100_950.b4a21058ad.woff2") format('woff2'); }
@font-face{ font-family:'BauhausVole'; font-style:normal; font-weight:400; src:url("/assets/fonts/BauhausVoleVF-100_950.b4a21058ad.woff2") format('woff2'); }
@font-face{ font-family:'BauhausVole'; font-style:normal; font-weight:600; src:url("/assets/fonts/BauhausVoleVF-100_950.b4a21058ad.woff2") format('woff2'); }
@font-face{font-family:'Systemia';font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-400.0c1a5958a1.woff2") format('woff2');}
@font-face{font-family:'Systemia';font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-500.0029b0e482.woff2") format('woff2');}
@font-face{font-family:'Systemia';font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-600.af3b439824.woff2") format('woff2');}
@font-face{font-family:'Systemia';font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-700.5ca0110dbf.woff2") format('woff2');}
@font-face{font-family:'Systemia';font-weight:800;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-800.9f6ab4f26b.woff2") format('woff2');}
@font-face{font-family:'Systemia';font-weight:900;font-style:normal;font-display:swap;src:url("/assets/fonts/Systemia-900.d2a04f488e.woff2") format('woff2');}
@font-face{ font-family:'Geist'; font-weight:400; font-style:normal; font-display:swap; src:url("/assets/fonts/Geist-400.fa5b1d0d3d.woff2") format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:500; font-style:normal; font-display:swap; src:url("/assets/fonts/Geist-500.69dc3aa816.woff2") format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:600; font-style:normal; font-display:swap; src:url("/assets/fonts/Geist-600.9893b8b131.woff2") format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:700; font-style:normal; font-display:swap; src:url("/assets/fonts/Geist-700.0bac35abb4.woff2") format('woff2'); }
@font-face{ font-family:'Geist'; font-weight:800; font-style:normal; font-display:swap; src:url("/assets/fonts/Geist-800.0c363a09e0.woff2") format('woff2'); }

  :root{
    /* Posty type stack · Brand Guidelines Vol. 01 */
    --sans:'Systemia','Geist',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --display:'BauhausVoleVF','BauhausVole','Systemia','Geist',sans-serif;
    --display-light:'BauhausVole','Systemia','Geist',sans-serif;
    --mono:'IBM Plex Mono','Systemia',monospace;
    /* Posty colour · sky is the stamp and the buttons, ocean does everything else */
    --sky:#A9D7F2; --sky-deep:#3F6ECA; --sky-soft:#E9F1FA;
    --ocean:#6B8FD6; --ocean-deep:#3F6ECA; --ocean-60:#A4B8E0; --ocean-30:#CFD7E8; --ocean-15:#E5E7EB;
    --heather:#E4BFD3; --iris:#D0C4E1; --sage:#C2E0CA; --sage-deep:#7EC49C;
    --manila:#EAE3D5;
  }


  :root{
    /* ===== Posty palette · Brand Guidelines Vol. 01, Summer 2026 ===== */
    --ink:       #0C0C0C;   /* section ink — pure #000 reserved for the nav notch */
    --ink-2:     #0C0C0C;
    --ink-3:     #1A1A1A;
    --paper:     #FAF6EF;
    --paper-2:   #F1EAE0;
    --sky:      #A9D7F2;
    --ocean: #6B8FD6;
    --sky-soft:   #E9F1FA;
    --ocean-deep:      #3F6ECA;   /* accent for type on light surfaces */
    --sage:      #C2E0CA;
    --sage-deep: #7EC49C;

    /* Text on ink */
    --t-paper:    #FAF6EF;
    --t-paper-70: rgba(250, 246, 239,.70);
    --t-paper-55: rgba(250, 246, 239,.55);
    --t-paper-35: rgba(250, 246, 239,.35);

    /* Text on paper */
    --t-ink:      #0C0C0C;
    --t-ink-70:   rgba(12,12,12,.70);
    --t-ink-55:   rgba(12,12,12,.55);
    --t-ink-35:   rgba(12,12,12,.35);

    /* Hairlines */
    --rule-on-ink:   rgba(250, 246, 239,.10);
    --rule-on-paper: rgba(12,12,12,.10);

    /* Spacing scale · base 8 */
    --xs: 4px;
    --sm: 8px;
    --md: 16px;
    --lg: 24px;
    --xl: 32px;
    --2xl: 48px;
    --3xl: 64px;
    --4xl: 96px;
    --5xl: 128px;

    /* Radius tokens */
    --r-card: 14px;
    --r-media: 14px;
    --r-pill: 999px;

    /* Motion · brand book v3 · four patterns cover the whole system */
    --t-micro:      120ms cubic-bezier(0.2, 0, 0, 1);        /* hover · state */
    --t-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);     /* general transitions */
    --t-press:      130ms cubic-bezier(0.34, 1.45, 0.5, 1); /* button release · one gentle overshoot */
    --t-reveal:     420ms cubic-bezier(0.32, 0.72, 0, 1);   /* page/screen entrance */
  }

  /* Per-word headline reveal · JS splits target headlines into .word spans
     with inline transition-delays, then adds .is-revealed on scroll-in. */
  [data-words-split] .word{
    display:inline-block;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 520ms cubic-bezier(.2,.7,.2,1),
               transform 520ms cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  [data-words-split].is-revealed .word{
    opacity:1;
    transform:translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    [data-words-split] .word{ opacity:1; transform:none; transition:none }
  }

  *{box-sizing:border-box;margin:0;padding:0}
  ::selection{ background:var(--sky); color:var(--ink) }
  h1,h2,h3{ text-wrap:balance }
  p{ text-wrap:pretty }
  html{
    /* Smooth in-page nav anchors with a scroll offset that clears the sticky nav. */
    scroll-behavior:smooth;
    scroll-padding-top:96px;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto }
  }
  html,body{
    background:var(--ink);
    color:var(--t-paper);
    font-family:var(--sans);
    font-feature-settings:"ss01","cv11","tnum";
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  body{
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }
  img{max-width:100%;display:block;height:auto}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

  :focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(169, 215, 242,.55);
  }
  .calc-input:focus-visible{
    box-shadow:0 3px 0 0 var(--sky);
  }

  /* ===== Layout · 1280 container, 32 gutter ===== */
  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 var(--xl);
    position:relative;
    z-index:1;
  }

  /* ===== Nav ===== */
  .nav{
    position:sticky; top:0; z-index:30;
    padding:var(--lg) 0 0;
    background:transparent;
  }
  .nav-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:var(--lg);
  }
  /* Lockup proportions follow the brand book: wordmark at 0.68 of the stamp's
     height, clearspace between them at 0.30 of it. */
  .brand{ display:flex;align-items:center;gap:11px; }
  .brand-sym{ height:30px; width:auto; flex-shrink:0; }
  /* Wordmark flips paper→ink when nav crosses a light section (JS toggles .nav-over-paper on body) */
  .brand-word{
    height:20.5px; width:auto; flex-shrink:0;
    margin-left:0;
    transition:filter 180ms cubic-bezier(.45,0,.55,1);
  }
  /* Scope to the nav lockup only — otherwise the footer wordmark also flips to black */
  body.nav-over-paper .nav .brand-word{
    filter:brightness(0);
  }
  /* Pink-context overrides · over the pink calculator band the pink symbol
     disappears into the background — flip it to ink alongside the wordmark.
     (JS toggles .nav-over-sky on body when the crossing section is .is-sky) */
  .brand-sym{ transition:filter 180ms cubic-bezier(.45,0,.55,1); }
  body.nav-over-sky .nav .brand-sym{
    filter:brightness(0);
  }
  /* The pink demo CTA also needs a non-pink hover to stay legible on pink. */
  body.nav-over-sky .nav-pill .cta-sky:hover{
    background:var(--ink); color:var(--paper);
    box-shadow:0 10px 24px -12px rgba(0,0,0,.5),
               0 4px 10px -6px rgba(0,0,0,.28);
  }

  .nav-pill{
    justify-self:center;
    display:flex;align-items:center;gap:2px;
    background:rgba(250, 246, 239,.04);
    border:none;
    box-shadow:inset 0 0 0 1px var(--di-line-ink), inset 0 1px 0 rgba(250, 246, 239,.06);
    border-radius:var(--r-pill);
    padding:6px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:background var(--t-transition), box-shadow var(--t-transition);
  }
  .nav-pill a{
    display:inline-flex;align-items:center;gap:6px;
    padding:10px 18px;border-radius:var(--r-pill);
    color:var(--t-paper);font-size:14px;font-weight:500;letter-spacing:-0.005em;
    transition:background var(--t-micro),
               color var(--t-transition),
               transform var(--t-transition);
  }
  .nav-pill a:hover{
    background:rgba(250, 246, 239,.06);
    transform:translateY(-1px);
  }
  .nav-pill .cta-sky{
    background:var(--sky);color:var(--ink);
    font-weight:600;
    transition:background var(--t-transition),
               color var(--t-transition),
               transform var(--t-transition),
               box-shadow var(--t-transition);
  }
  .nav-pill .cta-sky:hover{
    background:var(--ocean);color:var(--ink);
    transform:translateY(-2px);
    box-shadow:0 10px 24px -12px rgba(169, 215, 242,.55),
               0 4px 10px -6px rgba(0,0,0,.20);
  }
  .nav-pill .cta-sky:active{ transform:translateY(0); transition-duration:80ms }

  .nav-right{
    display:flex;align-items:center;gap:2px;
    background:rgba(250, 246, 239,.04);
    border:none;
    box-shadow:inset 0 0 0 1px var(--di-line-ink), inset 0 1px 0 rgba(250, 246, 239,.06);
    border-radius:var(--r-pill);
    padding:6px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:background var(--t-transition), box-shadow var(--t-transition);
  }
  .nav-right a{
    padding:10px 16px;border-radius:var(--r-pill);
    font-size:14px;font-weight:500;color:var(--t-paper-70);
    transition:color var(--t-transition),
               background var(--t-micro),
               transform var(--t-transition);
  }
  .nav-right a:hover{
    color:var(--t-paper);
    background:rgba(250, 246, 239,.06);
    transform:translateY(-1px);
  }
  .nav-right .active{color:var(--t-paper);background:rgba(250, 246, 239,.06)}

  /* Paper-context overrides — nav pills become ink-tinted glass on light sections */
  body.nav-over-paper .nav-pill,
  body.nav-over-paper .nav-right{
    background:rgba(255,255,255,.55);
    box-shadow:inset 0 0 0 1px var(--di-line-paper), inset 0 1px 0 rgba(255,255,255,.6);
  }
  body.nav-over-paper .nav-pill a{ color:var(--t-ink) }
  body.nav-over-paper .nav-pill a:hover{ background:rgba(0,0,0,.05) }
  body.nav-over-paper .nav-right a{ color:var(--t-ink-70) }
  body.nav-over-paper .nav-right a:hover,
  body.nav-over-paper .nav-right .active{ color:var(--t-ink); background:rgba(0,0,0,.05) }

  /* ===== Platform dropdown ===== · trigger reads as a nav link; the menu is
     always a solid ink card (same voice as the modals — max contrast over
     every surface, no theming juggling). */
  .nav-drop{ position:relative; }
  .nav-drop-trigger{
    display:inline-flex;align-items:center;gap:7px;
    padding:10px 18px;border-radius:var(--r-pill);
    font:inherit;font-size:14px;font-weight:500;letter-spacing:-0.005em;
    color:var(--t-paper);
    background:none;border:none;cursor:pointer;
    transition:background var(--t-micro), color var(--t-transition);
  }
  .nav-drop-trigger .caret{
    width:10px;height:10px;flex:none;
    opacity:.6;
    transition:transform var(--t-transition), opacity var(--t-transition);
  }
  .nav-drop-trigger:hover,
  .nav-drop.is-open .nav-drop-trigger{ background:rgba(250, 246, 239,.06); }
  .nav-drop.is-open .nav-drop-trigger .caret{ transform:rotate(180deg); opacity:1; }
  body.nav-over-paper .nav-drop-trigger{ color:var(--t-ink); }
  body.nav-over-paper .nav-drop-trigger:hover,
  body.nav-over-paper .nav-drop.is-open .nav-drop-trigger{ background:rgba(0,0,0,.05); }
  /* Two dropdown sizes share one chassis. The mega (.is-mega) anchors to the
     sticky nav and centers on the viewport — its .nav-drop goes static to hand
     positioning up. The compact (.is-compact) hangs under its own trigger. */
  .nav-drop{ position:relative; }
  .nav-drop.is-mega{ position:static; }
  .nav-drop-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    background:var(--ink-2);
    box-shadow:inset 0 0 0 1px var(--di-line-ink), 0 24px 56px rgba(0,0,0,.45);
    opacity:0;
    transform:translate(-50%, -6px);
    visibility:hidden;
    pointer-events:none;
    transition:opacity 200ms cubic-bezier(.2,.7,.2,1),
               transform 200ms cubic-bezier(.2,.7,.2,1),
               visibility 0s linear 200ms;
  }
  .nav-drop.is-open .nav-drop-menu{
    opacity:1;
    transform:translate(-50%, 0);
    visibility:visible;
    pointer-events:auto;
    transition:opacity 200ms cubic-bezier(.2,.7,.2,1),
               transform 200ms cubic-bezier(.2,.7,.2,1),
               visibility 0s linear 0s;
  }
  /* ---- mega menu · glass, two zones, media tile -------------------------
     Was an opaque #0C0C0C card holding three different container treatments:
     a bare list, a hairline-divided text panel, and a filled pink card. The
     pink card was also the only light panel on a dark page, and it carried a
     second "Learn more" identical to the spotlight's.
     Now: the links, and one real product shot. Same glass as the CTAs and the
     quote card, so the nav stops being the one surface that is not glass. */
  .nav-drop.is-mega .nav-drop-menu{
    width:min(840px, calc(100vw - 48px));
    padding:10px;
    border-radius:20px;
    display:grid;
    grid-template-columns:1.18fr 1fr;
    gap:10px;
  }
  /* Light glass over the dark hero (the look we want), and a crossfade to a
     PAPER-glass panel with ink type once the nav is over a light section.
     A single white tint cannot serve both: over paper it goes near-white and
     leaves paper-coloured text on a near-white panel. The paper state reuses the
     .calc-card recipe, so the menu becomes the same material as the other light
     cards rather than a third treatment. */
  .nav-drop-menu{
    /* The white-glass tint alone is only "dark" because the page behind it is dark —
       over any light section it becomes pale grey and the paper text disappears.
       A dark base underneath is invisible over the near-black hero but keeps the
       panel legible if it is ever painted over white (mid-scroll, stale state). */
    /* background-image is a DISCRETE property — Chrome never interpolates a
       gradient, it swaps it. So the panel skin always snapped while the text
       colour animated, giving ~300ms of ink type on a still-dark panel. Both
       skins are painted as stacked pseudo layers and we crossfade OPACITY,
       which is interpolable, so panel and type now move together. */
    /* The panel's own base colour, NOT a pseudo layer. The skin used to live
       entirely in ::before/::after, which is fragile: this menu sits inside
       .nav-pill, and .nav-pill has its own backdrop-filter. A backdrop-filtered
       ancestor becomes the backdrop root for everything inside it, and WebKit
       additionally declines to paint a negative-z pseudo in that situation — so
       the panel could lose its whole skin and read as clear glass over a light
       section. background-color is interpolable, so it crossfades on its own and
       the pseudo gradients are now only a sheen on top of a base that always paints. */
    background:rgba(16, 18, 24,.90) !important;
    isolation:isolate;
    backdrop-filter:blur(30px) saturate(1.6);
    -webkit-backdrop-filter:blur(30px) saturate(1.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 0 0 1px rgba(255,255,255,.12),
      0 34px 76px -30px rgba(0,0,0,.9) !important;
    transition:opacity 200ms cubic-bezier(.2,.7,.2,1),
               transform 200ms cubic-bezier(.2,.7,.2,1),
               visibility 0s linear 200ms,
               background-color 430ms cubic-bezier(.78,0,.22,1),
               box-shadow 430ms cubic-bezier(.78,0,.22,1); }
  /* These two layers must sit ABOVE the element's own backdrop-filter pass and
     below its content. At z-index:-1 they painted under the blurred backdrop,
     so the blurred page washed straight over the tint and the panel read as
     near-transparent glass with only its rim showing. z-index:0 here, and the
     panel's real children are lifted to 1 just below. */
  .nav-drop-menu::before, .nav-drop-menu::after{
    content:""; position:absolute; inset:0; z-index:0;
    border-radius:inherit; pointer-events:none;
    transition:opacity 430ms cubic-bezier(.78,0,.22,1); }
  .nav-drop-menu > *{ position:relative; z-index:1; }
  .nav-drop-menu::before{                       /* over a dark section */
    opacity:1;
    background:linear-gradient(158deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 55%, rgba(255,255,255,.035) 100%),
               linear-gradient(0deg, rgba(16, 18, 24,.88), rgba(16, 18, 24,.88)); }
  .nav-drop-menu::after{                        /* over a light section */
    /* Sky is a far lighter colour than the pink this replaced, so carrying the
       old alphas over left the panel reading as plain grey-white on cream. The
       tint deepens toward Ocean at the far corner so the gradient still travels. */
    opacity:0;
    background:linear-gradient(158deg, rgba(255,255,255,.92) 0%, rgba(214, 233, 248,.55) 46%, rgba(132, 176, 226,.60) 100%); }
  body.nav-over-paper .nav-drop-menu::before,
  body.nav-over-sky  .nav-drop-menu::before{ opacity:0; }
  body.nav-over-paper .nav-drop-menu::after,
  body.nav-over-sky  .nav-drop-menu::after{ opacity:1; }
  .nav-mega-eye, .nav-mega-links a, .nav-mega-links a span,
  .nav-mega-tile{ transition:color 430ms cubic-bezier(.78,0,.22,1), background 430ms cubic-bezier(.78,0,.22,1), box-shadow 430ms cubic-bezier(.78,0,.22,1); }

  /* ---- over a light section ---- */
  body.nav-over-paper .nav-drop-menu,
  body.nav-over-sky  .nav-drop-menu{
    /* Sky-tinted paper, opaque enough to carry the panel with no pseudo help. */
    background:rgba(226, 238, 250,.96) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 0 0 1px rgba(107, 143, 214,.42),
      0 34px 74px -30px rgba(31, 62, 128,.46) !important; }
  /* Routed through .nav-pill deliberately. There is a later rule
     `body.nav-over-paper .nav-pill .nav-mega-links a{color:var(--t-paper)}` that
     keeps the nav CHASSIS links paper over light sections; at equal specificity
     it wins on source order and would drag the menu's type with it. Adding
     .nav-drop-menu scopes this to the panel only, and outranks it. */
  body.nav-over-paper .nav-pill .nav-drop-menu .nav-mega-eye,
  body.nav-over-sky  .nav-pill .nav-drop-menu .nav-mega-eye{ color:var(--t-ink-35); }
  body.nav-over-paper .nav-pill .nav-drop-menu .nav-mega-links a,
  body.nav-over-sky  .nav-pill .nav-drop-menu .nav-mega-links a{ color:var(--t-ink); }
  body.nav-over-paper .nav-pill .nav-drop-menu .nav-mega-links a span,
  body.nav-over-sky  .nav-pill .nav-drop-menu .nav-mega-links a span{ color:var(--t-ink-55); }
  body.nav-over-paper .nav-pill .nav-drop-menu .nav-mega-links a:hover,
  body.nav-over-sky  .nav-pill .nav-drop-menu .nav-mega-links a:hover{ background:rgba(10,10,10,.05); }
  body.nav-over-paper .nav-pill .nav-drop-menu .nav-mega-links a:hover span,
  body.nav-over-sky  .nav-pill .nav-drop-menu .nav-mega-links a:hover span{ color:var(--t-ink-70); }
  /* the tile is its own dark object on a photo, so only its rim needs to flip */
  body.nav-over-paper .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile,
  body.nav-over-sky  .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile{
    box-shadow:inset 0 0 0 1px rgba(12,12,12,.14); }

  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
    .nav-drop-menu::before{ background:#141416; }
    .nav-drop-menu::after{ background:#E4EFF9; } }

  /* The text spotlight is gone; the shot carries the proof. Specificity matters
     here: the plain .nav-mega-spot{display:flex} rule is declared LATER in this
     file, so an equal-specificity hide would lose on source order. */
  .nav-drop.is-mega .nav-mega-spot{ display:none; }

  /* Two overrides needed here, both from generic nav-anchor rules:
     the menu's <a> pills carry border-radius:999px, and something in that chain
     collapses a flex child's width to 0. Explicit values rather than inherit. */
  .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile{
    position:relative; display:flex; flex-direction:column;
    align-items:stretch; gap:0; padding:0;
    border-radius:14px; overflow:hidden; text-decoration:none;
    background:#0C0C0C;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    transition:box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.2,1); }
  .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.42), 0 18px 36px -22px rgba(0,0,0,.9); }
  .nav-mega-tile:hover{
    transform:translateY(-2px);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.42), 0 18px 36px -22px rgba(0,0,0,.9); }
  .nav-mega-tile .nav-mega-tile-shot{
    display:block; width:100%; flex:1 1 auto; min-height:120px;
    background-size:cover; background-position:top center; background-repeat:no-repeat; }
  .nav-mega-tile .nav-mega-tile-cap{
    display:block; width:100%; padding:12px 14px 13px;
    background:linear-gradient(180deg, rgba(12, 12, 12,.55), rgba(12, 12, 12,.92)); }
  .nav-mega-tile-cap b{
    display:block; font-size:14.5px; font-weight:700; letter-spacing:-.015em;
    color:var(--t-paper); }
  .nav-mega-tile-cap i{
    display:block; margin-top:4px; font-style:normal;
    font-size:12px; line-height:1.45; color:var(--t-paper-55); }
  .nav-mega-tile:hover .nav-mega-tile-cap i .ring{ transform:translateX(3px); }
  @media (max-width:900px){
    /* must outrank .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile above */
    .nav-drop.is-mega .nav-drop-menu a.nav-mega-tile{ display:none; } }
  /* zone 1 · eyebrow + six links, column-major (products left, platform right) */
  .nav-mega-list{
    padding:16px 8px 14px 16px;
    display:flex;flex-direction:column;gap:10px;
    min-width:0;
  }
  .nav-mega-eye{
    display:block;
    padding:0 12px;
    font-size:10.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--t-paper-35);
  }
  .nav-mega-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(3, auto);
    grid-auto-flow:column;
    gap:2px 8px;
  }
  .nav-pill .nav-mega-links a{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    padding:9px 12px;border-radius:9px;
    color:var(--t-paper);
    /* Systemia sits smaller on the body than the Geist these sizes were set
       for, so the register is nudged up to keep the ref's optical weight. */
    font-size:14.5px;font-weight:600;letter-spacing:-0.005em;
  }
  .nav-pill .nav-mega-links a span{
    font-size:12.25px;font-weight:400;letter-spacing:0;
    color:var(--t-paper-55);
    transition:color var(--t-transition);
    /* descriptors are locked to one line — trim copy, never wrap */
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav-pill .nav-mega-links a:hover{ background:rgba(250, 246, 239,.06); transform:none; }
  .nav-pill .nav-mega-links a:hover span{ color:var(--t-paper-70); }
  /* zone 2 · feature spotlight */
  .nav-mega-spot{
    padding:16px 20px 14px;
    border-left:1px solid var(--rule-on-ink);
    display:flex;flex-direction:column;gap:8px;
    min-width:0;
  }
  .nav-mega-spot-eye, .nav-mega-card-eye{
    font-size:10.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  }
  .nav-mega-spot-eye{ color:var(--sky); }
  .nav-mega-spot h4{
    font-size:16.5px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;
    color:var(--t-paper);
    margin:0;
  }
  .nav-mega-spot p{
    font-size:12.5px;line-height:1.55;
    color:var(--t-paper-55);
    margin:0;
  }
  /* zone 3 · pink card — the accent surface doing what a photo does elsewhere */
  .nav-mega-card{
    background:var(--sky);
    border-radius:12px;
    padding:18px 20px 16px;
    display:flex;flex-direction:column;gap:8px;
    min-width:0;
  }
  .nav-mega-card-eye{ color:rgba(0,0,0,.45); }
  .nav-mega-card h4{
    font-size:16.5px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;
    color:var(--ink);
    margin:0;
  }
  .nav-mega-card p{
    font-size:12.5px;line-height:1.55;
    color:rgba(0,0,0,.68);
    margin:0;
  }
  /* ring-arrow learn-more · compact cousin of .link-arrow, pinned to zone foot */
  .nav-pill a.nav-mega-more{
    display:inline-flex;flex-direction:row;align-items:center;gap:8px;
    margin-top:auto;
    padding:6px 0 0;border-radius:0;
    font-size:13px;font-weight:600;letter-spacing:-0.005em;
    color:var(--t-paper);
    background:none;
  }
  .nav-pill a.nav-mega-more:hover{ background:none; transform:none; }
  .nav-mega-more .ring{
    display:inline-grid;place-items:center;
    width:22px;height:22px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.45);
    color:var(--sky);
    font-size:12px;line-height:1;
    transition:background var(--t-transition), color var(--t-transition),
               transform var(--t-transition), box-shadow var(--t-transition);
  }
  .nav-mega-more:hover .ring{
    background:var(--sky); color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--sky);
    transform:translateX(3px);
  }
  .nav-pill .nav-mega-card a.nav-mega-more{ color:var(--ink); }
  .nav-mega-card .nav-mega-more .ring{
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
    color:var(--ink);
  }
  .nav-mega-card .nav-mega-more:hover .ring{
    background:var(--ink); color:var(--sky);
    box-shadow:inset 0 0 0 1px var(--ink);
  }
  /* Desktop menu stays ink even when the nav crosses paper — undo the generic
     over-paper link flip inside it. */
  @media (min-width: 901px){
    body.nav-over-paper .nav-pill .nav-mega-links a{ color:var(--t-paper); }
    body.nav-over-paper .nav-pill .nav-mega-links a:hover{ background:rgba(250, 246, 239,.06); }
    body.nav-over-paper .nav-pill .nav-mega-links a span{ color:var(--t-paper-55); }
    body.nav-over-paper .nav-pill .nav-mega-links a:hover span{ color:var(--t-paper-70); }
    body.nav-over-paper .nav-pill a.nav-mega-more{ color:var(--t-paper); background:none; }
    body.nav-over-paper .nav-pill .nav-mega-card a.nav-mega-more{ color:var(--ink); }
  }
  /* Dropdown items deep-link into page sections — clear the sticky nav. */
  #platform-insurance, #platform-rewards, #platform-returns,
  #cases, #support{ scroll-margin-top:110px; }
  @media (prefers-reduced-motion: reduce){
    .nav-drop-menu{ transition:none; }
    .nav-drop-trigger .caret{ transition:none; }
  }

  /* Hamburger button · hidden on desktop, shown ≤900px in place of nav-pill */
  .nav-burger{
    display:none;
    width:44px;height:44px;
    border-radius:var(--r-pill);
    background:rgba(250, 246, 239,.04);
    border:none;
    box-shadow:inset 0 0 0 1px var(--di-line-ink), inset 0 1px 0 rgba(250, 246, 239,.06);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    transition:background var(--t-transition);
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger:hover{ background:rgba(250, 246, 239,.08) }
  .nav-burger .bar{
    width:18px;height:2px;border-radius:2px;
    background:var(--paper);
    transition:transform 240ms cubic-bezier(.2,.7,.2,1),
               opacity 200ms;
  }
  body.menu-open .nav-burger .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  body.menu-open .nav-burger .bar:nth-child(2){ opacity:0 }
  body.menu-open .nav-burger .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
  body.nav-over-paper .nav-burger{
    background:rgba(0,0,0,.04);
    box-shadow:inset 0 0 0 1px var(--di-line-paper), inset 0 1px 0 rgba(255,255,255,.6);
  }
  body.nav-over-paper .nav-burger .bar{ background:var(--ink) }
  /* pink CTA stays pink — already legible on both surfaces */

  /* ===== Hero ===== */
  .hero{
    position:relative;
    padding:var(--4xl) 0 var(--3xl);
    overflow:hidden;
  }


  h1.hero-title{
    font-size:clamp(48px, 6.2vw, 86px);
    line-height:0.95;
    letter-spacing:-0.035em;
    font-weight:800;
    margin-bottom:var(--lg);
    color:var(--t-paper);
  }
  h1.hero-title .accent{ color:var(--sky); }

  /* ---- headline · word stagger (B) + scroll parallax (D) ------------------
     The headline used to rise as one slab (mRise on the whole h1). Split into
     words, each on its own clock 45ms behind the last, it reads as the sentence
     assembling rather than a block arriving. The split is done in JS; without
     it the title simply renders, unanimated — .is-split is what arms the CSS. */
  .hero-title .hw{ display:inline-block; }
  .hero.hero-globe .hero-title.is-split{ animation:none; }
  .hero.hero-globe .hero-title.is-split .hw{
    animation:hwRise .72s var(--m-ease) backwards; }
  @keyframes hwRise{
    from{ opacity:0; transform:translateY(18px); filter:blur(4px); }
    to{ opacity:1; transform:translateY(0); filter:blur(0); } }
  @media (prefers-reduced-motion:reduce){
    .hero.hero-globe .hero-title.is-split .hw{ animation:none; } }

  .hero-sub{
    font-size:20px;line-height:1.45;
    color:var(--t-paper-70);
    font-weight:400;
    max-width:560px;
    margin-bottom:var(--xl);
    letter-spacing:-0.005em;
  }

  .hero-cta{
    display:flex;align-items:center;gap:var(--md);flex-wrap:wrap;
    margin-bottom:var(--xl);
  }
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:var(--r-pill);
    font-size:15px;font-weight:600;letter-spacing:-0.005em;
    transition:transform var(--t-micro), background var(--t-transition), box-shadow var(--t-transition);
  }
  /* Hover lift + brand-tinted shadow gives every CTA on the page a consistent
     "reach toward you" affordance. */
  .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -12px rgba(169, 215, 242,.55),
               0 4px 10px -6px rgba(0,0,0,.18);
  }
  .btn:active{ transform:translateY(0); transition-duration:80ms }
  /* .btn on real <button> elements (modal forms) — match the <a> pills */
  button.btn{ border:none; cursor:pointer; font-family:inherit; }
  /* The arrow chip slides right on hover — universal "go" cue */
  .btn .arrow{ transition:transform var(--t-transition) }
  .btn:hover .arrow{ transform:translateX(4px) }
  .btn-sky{ background:var(--sky); color:var(--ink); }
  .btn-sky:hover{ background:var(--ocean) }
  .btn-ink{ background:var(--ink); color:var(--paper); }
  .btn-ink:hover{ background:var(--ink-3) }
  .btn-ghost-paper{
    color:var(--t-ink);
    background:transparent;
    border:1px solid var(--rule-on-paper);
  }
  .btn-ghost-paper:hover{ background:rgba(0,0,0,.04) }
  /* Paper pill · inverse fill for CTAs sitting on ink surfaces — a different
     voice from the pink pill without leaving the pill system. */
  .btn-paper{ background:var(--paper); color:var(--ink); }
  .btn-paper:hover{ background:#FFFFFF }
  .btn-paper .arrow{ background:var(--sky); color:var(--ink); }
  /* Double-bezel ring · reserved for the page's highest-stakes CTA (hero).
     A detached hairline halo that tightens on hover — machined, not louder. */
  .btn-bezel{ position:relative; }
  .btn-bezel::after{
    content:""; position:absolute; inset:-5px;
    border-radius:var(--r-pill);
    box-shadow:0 0 0 1px rgba(169, 215, 242,.35);
    transition:box-shadow var(--t-transition);
    pointer-events:none;
  }
  .btn-bezel:hover::after{ box-shadow:0 0 0 1px rgba(169, 215, 242,.7); }
  /* Ring-arrow link · quiet secondary — text with a small ringed arrow that
     fills pink on hover. */
  .link-arrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 6px;
    font-size:15px;font-weight:600;letter-spacing:-0.005em;
    color:var(--t-paper);
  }
  .link-arrow .ring{
    display:inline-grid;place-items:center;
    width:26px;height:26px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.45);
    color:var(--sky);
    font-size:13px;line-height:1;
    transition:background var(--t-transition), color var(--t-transition),
               transform var(--t-transition), box-shadow var(--t-transition);
  }
  .link-arrow:hover .ring{
    background:var(--sky); color:var(--ink);
    box-shadow:inset 0 0 0 1px var(--sky);
    transform:translateX(3px);
  }
  .btn .arrow{
    display:inline-grid;place-items:center;
    width:22px;height:22px;border-radius:var(--r-pill);
    background:var(--ink);color:var(--sky);
    font-size:13px;line-height:1;font-weight:600;
  }
  .btn-ink .arrow{ background:var(--paper); color:var(--ink); }
  .btn-ghost-paper .arrow{ background:var(--ink); color:var(--paper); }

  /* ---- arrow glyph centering (site-wide) ----
     The raw → / ← character is seated high-and-left inside these circles by the
     font's metrics. Draw the arrow as an absolutely-centred SVG mask instead:
     dead-centre in every circle regardless of size or font, colour follows
     currentColor so all contexts + hover states keep their arrow colour, and the
     one back-button (.demo-back) overrides to a left arrow. */
  .btn .arrow, .link-arrow .ring, .nav-mega-more .ring, .demo-back .ring{
    font-size:0 !important; position:relative;
  }
  .btn .arrow::before, .link-arrow .ring::before,
  .nav-mega-more .ring::before, .demo-back .ring::before{
    content:""; position:absolute; top:50%; left:50%;
    width:66%; height:66%; transform:translate(-50%,-50%);
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%204l-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M12%204l-1.41%201.41L16.17%2011H4v2h12.17l-5.58%205.59L12%2020l8-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .demo-back .ring::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20fill='%23000'%20d='M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20z'/%3E%3C/svg%3E");
  }

  /* Unified check glyph · one component across marketing surfaces (audit C2) */
  .ck{
    flex:none; display:inline-block; position:relative;
    width:16px; height:16px; border-radius:50%;
    background:rgba(169, 215, 242,.15);
  }
  .ck::after{
    content:""; position:absolute; left:4.5px; top:6px;
    width:7px; height:3.5px;
    border-left:1.5px solid var(--sky);
    border-bottom:1.5px solid var(--sky);
    transform:rotate(-45deg);
  }
  .ck.mint{ background:rgba(45,130,82,.12); }
  .ck.mint::after{ border-color:#2D8252; }

  .trust-row{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    color:var(--t-paper-35);
    font-size:13px;font-weight:500;
  }
  .trust-row .stat{
    display:inline-flex;align-items:baseline;gap:6px;
    color:var(--t-paper);
  }
  .trust-row .stat b{
    font-family:var(--sans);
    font-size:18px;font-weight:800;letter-spacing:-0.02em;
    color:var(--t-paper);
    font-feature-settings:"tnum";
  }
  .trust-row .stat.mint b{ color:var(--sage) }
  .trust-row .sep{ opacity:.4 }


  /* ===== Problem cascade · paper · "Lost packages cost more than refunds" ===== */
  .cascade{
    background:var(--paper);
    color:var(--t-ink);
    padding:var(--4xl) 0;
    position:relative;
  }
  .cascade h2{
    font-size:clamp(40px, 5vw, 72px);
    line-height:1.0;letter-spacing:-0.038em;font-weight:800;
    color:var(--ink);
    margin-bottom:var(--md);
  }
  @media (max-width: 720px){
    .cascade h2{ font-size:clamp(34px, 10vw, 48px) }
  }

  /* ===== Big-numbers stats band · ink plate on paper · Route/Seel hybrid.
     Card break instead of a full-bleed band — same plate language as the
     shipping page's compliance panel (radius 32, deep soft shadow). ===== */
  .bynums{
    background:var(--paper);
    color:var(--paper);
    padding:var(--lg) 0 var(--2xl);
    position:relative;
  }
  .bynums-plate{
    position:relative; overflow:hidden;
    background:var(--ink);
    border-radius:32px;
    padding:clamp(40px, 6vw, 88px);
    box-shadow:0 60px 120px -60px rgba(0,0,0,.55);
  }
  .bynums-head{
    max-width:820px;
    margin:0 0 var(--3xl);
  }
  .bynums h2{
    font-size:clamp(36px, 4.4vw, 60px);
    line-height:1.02;
    letter-spacing:-0.035em;
    font-weight:800;
    color:var(--paper);
  }
  .bynums h2 .soft{ color:var(--t-paper-35) }
  .bynums-sub{
    margin-top:var(--md);
    font-size:16px;line-height:1.5;
    color:var(--t-paper-55);
    max-width:560px;
    letter-spacing:-0.005em;
  }

  /* Stats grid · Route-style floating numbers, no cards, hairlines between */
  .bynums-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:0;
    border-top:1px solid var(--rule-on-ink);
    padding-top:var(--2xl);
    margin-top:var(--lg);
  }
  .bynums-cell{
    display:flex;flex-direction:column;
    padding:0 var(--xl) 0 0;
    border-right:1px solid var(--rule-on-ink);
    position:relative;
    /* scroll entrance */
    opacity:0;
    transform:translateY(20px);
    transition:opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1);
  }
  .bynums-cell:last-child{ border-right:0; padding-right:0 }
  .bynums-cell + .bynums-cell{ padding-left:var(--xl) }
  .bynums-cell.is-in{ opacity:1; transform:translateY(0); }
  .bynums-cell:nth-child(1){ transition-delay:0ms }
  .bynums-cell:nth-child(2){ transition-delay:120ms }
  .bynums-cell:nth-child(3){ transition-delay:240ms }
  @media (prefers-reduced-motion: reduce){
    .bynums-cell{ opacity:1; transform:none; transition:none }
  }

  /* Mini sparkline · sits BELOW the number as a growth indicator so the three
     stat numbers share the same baseline. Pulled tight to the number with a
     negative margin-top, then a small gap below before the bottom-pushed label. */
  .bynums-spark{
    display:flex;align-items:flex-end;gap:3px;
    height:32px;
    margin-top:calc(var(--lg) * -1 + var(--xs));
    margin-bottom:var(--md);
    max-width:240px;
  }
  .bynums-spark .bar{
    flex:1;
    border-radius:2px;
    background:rgba(169, 215, 242,0.22);
    transform-origin:bottom;
    transform:scaleY(0);
    transition:transform 800ms cubic-bezier(.2,.7,.2,1);
    min-width:4px;
  }
  .bynums-cell.is-in .bynums-spark .bar{ transform:scaleY(1) }
  /* 10 bars trending upward — first 9 muted pink, final peak in full pink */
  .bynums-cell.is-in .bynums-spark .bar:nth-child(1) { transition-delay:380ms; height:22% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(2) { transition-delay:430ms; height:30% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(3) { transition-delay:480ms; height:28% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(4) { transition-delay:530ms; height:40% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(5) { transition-delay:580ms; height:50% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(6) { transition-delay:630ms; height:46% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(7) { transition-delay:680ms; height:62% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(8) { transition-delay:730ms; height:74% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(9) { transition-delay:780ms; height:86% }
  .bynums-cell.is-in .bynums-spark .bar:nth-child(10){ transition-delay:830ms; background:var(--sky); height:100% }
  .bynums-spark .bar{ height:0% }

  .bynums-mono{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--t-paper-55);
    margin-bottom:var(--md);
  }
  /* Route-style massive floating numbers · clamp tuned so $192k+ fits its column */
  .bynums-num{
    font-size:clamp(60px, 8.2vw, 132px);
    font-weight:800;
    line-height:0.92;
    letter-spacing:-0.045em;
    color:var(--paper);
    font-feature-settings:"tnum";
    margin-bottom:var(--lg);
    white-space:nowrap;
  }
  .bynums-num .accent{ color:var(--sky) }
  .bynums-label{
    font-size:14px;line-height:1.5;
    color:var(--t-paper-70);
    max-width:300px;
    letter-spacing:-0.005em;
    margin-top:auto;
  }
  .bynums-label b{ color:var(--paper);font-weight:600 }

  /* ===== Revenue calculator · pink · "See what posty earns you" =====
     Single input (annual revenue) → single output (new revenue), anchored to
     the $192k+ per $10M GMV claim from the bynums section (3.5% x 55% opt-in).
     Brand pink surface with a paper card sitting on top. */
  .calc{
    background:var(--paper);
    color:var(--t-ink);
    /* extra top room so the heading clears the fixed nav as the curtain lifts;
       scroll-margin keeps #calculator anchor jumps below the nav too */
    padding:clamp(120px,15vh,184px) 0 var(--4xl);
    scroll-margin-top:88px;
    position:relative;
  }
  .calc-head{
    max-width:780px;
    margin:0 auto var(--xl);
    text-align:center;
    position:relative;
    z-index:1;   /* keep the heading above the bloom */
  }
  .calc-eye{
    display:inline-block;
    margin-bottom:var(--lg);
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--ink);
  }
  .calc h2{
    font-size:clamp(44px, 5.4vw, 80px);
    line-height:1.0;letter-spacing:-0.038em;font-weight:800;
    color:var(--ink);
    margin-bottom:var(--md);
  }
  .calc h2 .soft{ color:rgba(0,0,0,.40) }
  .calc-sub{
    font-size:18px;line-height:1.45;
    color:var(--t-ink-70);
    letter-spacing:-0.005em;
    max-width:580px;
    margin:0 auto;
  }

  /* Card · paper panel sitting on pink, split into input (left) and output (right) */
  .calc-card{
    background:linear-gradient(158deg, rgba(255,255,255,.5), rgba(233, 241, 250,.24) 55%, rgba(169, 215, 242,.18));
    -webkit-backdrop-filter:blur(36px) saturate(1.55);
    backdrop-filter:blur(36px) saturate(1.55);
    border:1px solid rgba(255,255,255,.72);
    border-radius:32px;
    padding:var(--2xl);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--3xl);
    align-items:stretch;
    position:relative;
    z-index:1;
    overflow:hidden;
    /* more apparent frosted glass: brighter rim light, top sheen, and a soft
       pink glow welling up from the inside bottom edge */
    box-shadow:0 46px 116px -44px rgba(107, 143, 214,.68),
               inset 0 1px 0 rgba(255,255,255,.96),
               inset 0 0 0 1px rgba(169, 215, 242,.3),
               inset 0 -34px 66px -40px rgba(169, 215, 242,.46);
  }
  /* soft pink bloom behind the card so the frosted glass has colour to refract */
  /* pink bloom · a real element (not ::after) so JS can animate it: scroll-in on
     arrival, then a slow ambient breathe while the section is in view. Static
     full-strength by default — reduced-motion / no-JS / subpages keep the glow. */
  .calc-bloom{ position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
    width:min(1040px,88%); height:540px; border-radius:50%; pointer-events:none; z-index:0;
    background:radial-gradient(58% 58% at 50% 45%, rgba(169, 215, 242,.55), rgba(169, 215, 242,0) 72%);
    filter:blur(56px); will-change:transform,opacity; }
  .calc-col{
    display:flex;flex-direction:column;
    gap:var(--lg);
  }
  /* Output column · lighter frosted panel so the result reads on the pink glass. */
  .calc-col-out{
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.42) 60%, rgba(255,255,255,.5));
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-radius:20px;
    padding:var(--xl);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.5);
  }
  .calc-col .lbl{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--t-ink-55);
  }

  /* Input · $ prefix + editable number on the same baseline */
  .calc-input-row{
    display:flex;align-items:baseline;gap:6px;
  }
  .calc-prefix{
    font-family:var(--sans);
    font-size:clamp(40px, 5vw, 72px);
    font-weight:600;
    color:var(--t-ink-35);
    letter-spacing:-0.04em;
    line-height:1;
    font-feature-settings:"tnum";
  }
  .calc-input{
    font-family:var(--sans);
    font-size:clamp(40px, 5vw, 72px);
    font-weight:600;
    letter-spacing:-0.04em;
    line-height:1;
    color:var(--ink);
    background:transparent;
    border:none;outline:none;
    width:100%;
    padding:0;
    font-feature-settings:"tnum";
    caret-color:var(--ocean-deep);
    -moz-appearance:textfield;
  }
  .calc-input::-webkit-outer-spin-button,
  .calc-input::-webkit-inner-spin-button{ -webkit-appearance:none;margin:0 }
  .calc-input::placeholder{ color:var(--t-ink-35) }

  /* Slider · ink thumb on subtle ink track, full width below the typed input */
  .calc-slider{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:4px;
    background:var(--rule-on-paper);
    border-radius:2px;
    outline:none;
    cursor:pointer;
    margin-top:var(--xs);
  }
  .calc-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;height:20px;
    border-radius:50%;
    background:var(--ink);
    border:3px solid var(--paper);
    box-shadow:0 0 0 1px var(--ink);
    cursor:grab;
    transition:transform 200ms cubic-bezier(.2,.7,.2,1);
  }
  .calc-slider::-webkit-slider-thumb:hover{ transform:scale(1.15) }
  .calc-slider::-webkit-slider-thumb:active{ cursor:grabbing }
  .calc-slider::-moz-range-thumb{
    width:20px;height:20px;
    border-radius:50%;
    background:var(--ink);
    border:3px solid var(--paper);
    box-shadow:0 0 0 1px var(--ink);
    cursor:grab;
  }
  .calc-slider-marks{
    display:flex;justify-content:space-between;
    font-family:var(--sans);
    font-size:10px;letter-spacing:0.15em;
    color:var(--t-ink-35);
    text-transform:uppercase;
    margin-top:4px;
  }

  /* Quick presets · one-tap GMV chips below the slider; the chip matching the
     current value fills ink so the control always shows where you are. */
  .calc-presets{
    display:flex;flex-wrap:wrap;gap:8px;
    margin-top:var(--md);
  }
  .calc-chip{
    font-family:var(--sans);
    font-size:12.5px;font-weight:600;letter-spacing:-0.005em;
    color:var(--t-ink-70);
    padding:7px 14px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px var(--rule-on-paper);
    transition:background var(--t-micro), color var(--t-micro),
               box-shadow var(--t-transition), transform var(--t-transition);
  }
  .calc-chip:hover{ background:rgba(0,0,0,.045); color:var(--ink); transform:translateY(-1px) }
  .calc-chip:active{ transform:translateY(0); transition-duration:80ms }
  .calc-chip.on{ background:var(--ink); color:var(--paper); box-shadow:inset 0 0 0 1px var(--ink) }

  /* Output · large ink mono number with supporting copy below */
  .calc-output{
    font-family:var(--sans);
    font-size:clamp(48px, 6.2vw, 92px);
    font-weight:700;
    letter-spacing:-0.045em;
    line-height:1;
    color:var(--ink);
    font-feature-settings:"tnum";
    white-space:nowrap;
    transform-origin:left center;
    /* Pop when the value changes: brief scale-up + mint color flash, then
       settle back to ink. The transitions reverse on .is-updating release. */
    transition:transform 220ms cubic-bezier(.34,1.56,.64,1),
               color 280ms ease;
  }
  .calc-output.is-updating{
    transform:scale(1.06);
    color:#2D8252; /* dark mint flash · same value used for conveyor outcome labels */
  }
  .calc-output-sub{
    font-size:14px;line-height:1.5;
    color:var(--t-ink-70);
    letter-spacing:-0.005em;
    margin-top:auto;
  }
  .calc-output-sub b{ color:var(--ink);font-weight:600 }
  /* Breakdown · new revenue + support costs removed = the bottom-line number above */
  .calc-break{
    display:grid; gap:8px;
    padding:var(--md) 0;
    border-top:1px solid var(--rule-on-paper);
    border-bottom:1px solid var(--rule-on-paper);
  }
  .calc-break-row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:14px; color:var(--t-ink-70); letter-spacing:-0.005em;
  }
  .calc-break-row b{
    font-family:var(--sans);
    font-size:15px; font-weight:600; color:var(--ink);
    font-feature-settings:"tnum";
  }
  .calc-break-row .k{ display:inline-flex; align-items:center; gap:8px }
  .calc-break-row .k .swatch{ width:8px; height:8px; border-radius:2px; background:var(--sky); flex:none }
  .calc-break-row .k .swatch.m{ background:var(--sage-deep) }

  /* Mobile · stack input above the tinted output panel */
  @media (max-width: 720px){
    .calc-card{
      grid-template-columns:1fr;
      gap:var(--xl);
      padding:var(--xl);
    }
    .calc-col-out{ padding:var(--lg) }
  }

  /* ===== Pricing · ink · transparent margin-share ===== */
  .pricing{
    background:var(--ink);
    color:var(--t-paper);
    padding:var(--4xl) 0;
  }
  .pricing-head{ max-width:780px; margin:0 auto var(--3xl); text-align:center; }
  .pricing-eye{
    display:inline-block;
    margin-bottom:var(--lg);
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--sky);
  }
  .pricing h2{
    font-size:clamp(40px, 5vw, 72px);
    line-height:1.02;letter-spacing:-0.035em;font-weight:800;
    color:var(--paper);
    margin-bottom:var(--md);
  }
  .pricing h2 .soft{ color:var(--t-paper-35) }
  .pricing-sub{
    font-size:17px;line-height:1.5;letter-spacing:-0.005em;
    color:var(--t-paper-70);
    max-width:620px;
    margin:0 auto;
  }

  /* One centered object + a one-line footnote band below it. */
  .pricing-card{
    max-width:1040px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:var(--md);
  }
  .pricing-tier{
    background:rgba(250, 246, 239,0.04);
    border:1px solid var(--rule-on-ink);
    border-radius:var(--r-card);
    padding:var(--2xl);
    display:grid;
    grid-template-columns:1.14fr 0.86fr;
    grid-template-areas:"lbl lbl" "main rcpt";
    column-gap:clamp(28px,4.5vw,72px);
    row-gap:var(--xl);
    align-items:center;
  }
  .pricing-tier-lbl{ grid-area:lbl; }
  .pt-main{ grid-area:main; display:flex; flex-direction:column; gap:var(--xl); min-width:0; }
  .pt-main .pt-ticks{ flex-wrap:wrap; justify-content:flex-start; gap:12px 20px; }
  /* One protected order, itemized · the mechanics as a receipt on the plate */
  .pt-receipt{
    grid-area:rcpt; justify-self:stretch;
    background:var(--paper); color:var(--ink);
    border-radius:18px; padding:20px 24px 22px;
    box-shadow:0 40px 80px -42px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.07);
    font-feature-settings:"tnum";
  }
  .ptr-head{
    font-family:var(--sans);
    font-size:10px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--t-ink-55);
    padding-bottom:12px; border-bottom:1px solid rgba(0,0,0,.10);
  }
  .ptr-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
    padding:10px 0 9px; font-size:13.5px; line-height:1.4; color:var(--t-ink-70); }
  .ptr-row b{ font-weight:650; color:var(--ink); white-space:nowrap; }
  .ptr-row b.plus{ color:var(--ocean-deep); }
  .ptr-ck{ display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%;
    background:var(--sage); color:#14301F; font-size:10px; font-style:normal; font-weight:700;
    transform:translateY(2px); }
  .ptr-rule{ border-top:1px dashed rgba(0,0,0,.20); margin:5px 0; }
  .ptr-row.big{ padding-top:12px; }
  .ptr-row.big span{ color:var(--ink); font-weight:650; }
  .ptr-row.big b{ font-size:21px; font-weight:800; letter-spacing:-0.02em; }
  .pricing-tier-lbl{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--sky);
  }

  /* Single-focus card · one hero number. "You pay $0" is a quiet badge above
     it; the earn rate is the only large object in the whole section. */
  .pt-pay{
    display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;
    font-size:14.5px;color:var(--t-paper-55);
    padding:10px 18px;border-radius:var(--r-pill);
    background:rgba(191,229,205,.08);
    box-shadow:inset 0 0 0 1px rgba(191,229,205,.4);
  }
  .pt-pay b{ color:var(--sage); font-weight:800; font-size:17px; letter-spacing:-0.01em; }
  .pt-earn{ display:flex;flex-direction:column;gap:12px; }
  .pt-earn .lbl{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--sky);
  }
  .pt-earn .num{
    font-size:clamp(56px, 7vw, 92px);
    font-weight:800;letter-spacing:-0.04em;line-height:1;
    color:var(--paper);
    display:inline-flex;align-items:baseline;gap:10px;
    font-variant-numeric:tabular-nums;
  }
  .pt-earn .num .accent{ font-size:0.5em; color:var(--sky); font-weight:700 }
  .pt-earn .num .suffix{ font-size:0.19em; color:var(--t-paper-55); font-weight:500; letter-spacing:0.04em }
  .pt-chip{
    display:inline-flex; align-self:flex-start;
    font-size:13px; line-height:1.4;
    color:var(--t-paper-70);
    padding:6px 12px; border-radius:var(--r-pill);
    background:rgba(191,229,205,.08);
    box-shadow:inset 0 0 0 1px rgba(191,229,205,.35);
  }
  .pt-chip b{ color:var(--sage); font-weight:700; white-space:nowrap; }

  /* Short ticks · plain claims — the substantiation (underwriter, TPA, SLA)
     already lives in the trust section. One single line on desktop. */
  .pt-ticks{ display:flex;flex-wrap:wrap;gap:12px 20px; }
  .pt-ticks span{ display:inline-flex;align-items:center;gap:8px; font-size:13px;color:var(--t-paper-70); letter-spacing:-0.01em; white-space:nowrap; }
  @media (min-width: 901px){
    .pt-ticks{ flex-wrap:nowrap; justify-content:space-between; gap:12px; }
  }

  .pricing-cta-row{
    display:flex;align-items:center;gap:var(--lg);
    flex-wrap:wrap;
  }
  /* Secondary action demoted to a quiet text link — one button owns the card */
  .pricing-calc-link{
    color:var(--t-paper-70);
    font-weight:600;font-size:15px;
    display:inline-flex;align-items:center;gap:6px;
    transition:color var(--t-transition), gap var(--t-transition);
  }
  .pricing-calc-link:hover{ color:var(--paper); gap:10px }

  /* Enterprise · a one-line footnote band, not a competing panel. */
  .pricing-ent{
    display:flex;align-items:center;gap:var(--md);flex-wrap:wrap;
    padding:15px 22px;
    border-radius:var(--r-card);
    background:linear-gradient(90deg, rgba(169, 215, 242,0.08), rgba(169, 215, 242,0.02));
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,0.20);
    font-size:14px;line-height:1.5;color:var(--t-paper-70);
  }
  .pricing-ent b{ color:var(--paper); font-weight:650; }
  .pricing-ent .pricing-ent-link{ margin-left:auto; white-space:nowrap; }
  .pricing-ent-link{
    color:var(--sky);
    font-weight:600;
    font-size:15px;
    display:inline-flex;align-items:center;gap:6px;
    transition:gap var(--t-transition);
  }
  .pricing-ent-link:hover{ gap:10px }

  @media (max-width: 900px){
    .pricing-tier{
      padding:var(--xl);
      grid-template-columns:1fr;
      grid-template-areas:"lbl" "main" "rcpt";
    }
    .pt-receipt{ max-width:420px; }
  }
  @media (max-width: 640px){
    .pricing{ padding:var(--2xl) 0; }
    .pt-earn .num{ font-size:clamp(44px, 12vw, 60px); }
    .pt-earn .num .suffix{ font-size:0.26em; }
    .pricing-ent .pricing-ent-link{ margin-left:0; }
  }

  /* ===== Pin-card stat footers · stat + product page link ===== */
  .pin-foot{
    margin-top:10px; padding-top:10px;
    border-top:1px solid rgba(0,0,0,.08);
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  }
  .pf-stat{ font-family:var(--sans); font-size:11.5px; color:var(--t-ink-55); }
  .pf-stat b{ font-size:15px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); font-feature-settings:"tnum"; }
  .pin-foot a{
    font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ocean-deep);
    white-space:nowrap; transition:color var(--t-micro);
  }
  .pin-foot a:hover{ color:var(--ink); }

  /* ===== Operator-grade trust wall · the paperwork, printed large ===== */
  /* Header row · names what the strip below is, and gives it a door deeper */
  .twall-head{
    display:flex; align-items:center; justify-content:space-between; gap:var(--md);
    margin-top:var(--2xl); flex-wrap:wrap;
  }
  .twall-eye{
    font-family:var(--sans);
    font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--t-ink-55);
  }
  .twall-link{ padding:4px 2px; font-size:14px; color:var(--t-ink); }
  .twall-link .ring{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); color:var(--ink); }
  .twall-link:hover .ring{ background:var(--sky); color:var(--ink); box-shadow:inset 0 0 0 1px var(--sky); }
  /* One connected strip, ruled into four — a document, not four cards */
  .twall{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:0;
    margin-top:var(--md);
    background:#FFFFFF;
    border:1px solid var(--rule-on-paper);
    border-radius:var(--r-card);
    overflow:hidden;
  }
  .tw-card{
    background:transparent;
    padding:22px 22px 20px;
    border-left:1px solid var(--rule-on-paper);
  }
  .tw-card:first-child{ border-left:0; }
  .tw-card.is-lead{
    background:var(--sky-soft);
  }
  .tw-eye{
    display:block;
    font-family:var(--sans);
    font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--t-ink-35); margin-bottom:10px;
  }
  .tw-card.is-lead .tw-eye{ color:var(--ocean-deep); }
  .tw-card h4{
    font-size:15.5px; font-weight:700; letter-spacing:-0.015em; line-height:1.3;
    color:var(--ink); margin:0 0 6px;
  }
  .tw-card p{ font-size:12.5px; line-height:1.5; color:var(--t-ink-55); margin:0; }
  @media (max-width:1000px){
    .twall{ grid-template-columns:1fr 1fr; }
    .tw-card{ border-left:0; }
    .tw-card:nth-child(even){ border-left:1px solid var(--rule-on-paper); }
    .tw-card:nth-child(n+3){ border-top:1px solid var(--rule-on-paper); }
  }
  @media (max-width:560px){
    .twall{ grid-template-columns:1fr; }
    .tw-card:nth-child(even){ border-left:0; }
    .tw-card + .tw-card{ border-top:1px solid var(--rule-on-paper); }
  }

  /* ===== Credential wall · ink ==========================================
     The voices carousel and the credential wall are one continuous dark
     block now — no break, no card container. Four ruled columns straight
     on the ink, and the gravity field spills down out of the carousel's
     corner and dissolves as it travels right. The paper break moves to
     the support section below. ========================================== */
  .trust.is-ink{
    background:var(--ink); color:var(--paper);
    position:relative; z-index:2; overflow:hidden;
    padding:clamp(14px,1.5vw,22px) 0 clamp(22px,2.4vw,34px);
  }
  /* Subpages wrap sections in .si-canvas, which zeroes section backgrounds. */
  .si-canvas .trust.is-ink{ background:var(--ink); color:var(--paper); }
  .trust.is-ink > .wrap{ position:relative; z-index:1; }
  /* pulled 2px up under the carousel: the two canvases now overlap slightly, so no
     device-pixel rounding on either backing store can leave a hairline between them */
  .tw-dots{ position:absolute; inset:-2px 0 0 0; pointer-events:none; z-index:0; }
  .tw-dots canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  .trust.is-ink .twall-head{ margin-top:0; }
  .trust.is-ink .twall-eye{ color:rgba(250, 246, 239,.42); }
  /* Not a contrast problem — the label is already ~15:1 on ink. It is figure-ground:
     mid-tone dots read as shapes competing with the letterforms, so the fix is to give
     the element its own ground rather than push the type brighter. */
  .trust.is-ink .twall-link{
    color:rgba(250, 246, 239,.86);
    text-shadow:0 0 3px rgba(10,10,10,1), 0 0 6px rgba(10,10,10,1),
                0 0 10px rgba(10,10,10,1), 0 0 16px rgba(10,10,10,1),
                0 0 26px rgba(10,10,10,.95);
  }
  /* The ring was a 1px outline over a transparent centre, so the field showed THROUGH
     the middle of the circle — a round hole full of texture, and the noisiest part of
     the whole element. Filling it makes it read as an object. text-shadow is reset
     because the arrow is a text glyph (&rarr;), not an SVG, so the halo would other-
     wise smudge inside the ring. */
  .trust.is-ink .twall-link .ring{
    background:var(--ink); text-shadow:none;
    box-shadow:inset 0 0 0 1px rgba(250, 246, 239,.28); color:var(--paper);
  }
  .trust.is-ink .twall-link:hover{ color:var(--paper); }
  .trust.is-ink .twall-link:hover .ring{ background:var(--sky); color:var(--ink); box-shadow:inset 0 0 0 1px var(--sky); }

  /* No panel, no fill — one rule across the top, hairlines between. */
  .trust.is-ink .twall{
    background:none; border:0; border-radius:0; overflow:visible;
    margin-top:clamp(20px,2.4vw,30px);
    border-top:1px solid rgba(250, 246, 239,.14);
  }
  .trust.is-ink .tw-card{
    background:none; position:relative;
    padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,30px) 0 clamp(20px,2.2vw,30px);
    border-left:1px solid rgba(250, 246, 239,.10);
  }
  .trust.is-ink .tw-card:first-child{ border-left:0; padding-left:0; }
  /* The lead credential earns a pink rule, not a pink box. */
  .trust.is-ink .tw-card.is-lead::before{
    content:""; position:absolute; left:0; right:clamp(20px,2.2vw,30px); top:-1px;
    height:2px; background:var(--sky);
  }
  .trust.is-ink .tw-eye{ color:rgba(250, 246, 239,.34); }
  .trust.is-ink .tw-card.is-lead .tw-eye{ color:var(--sky); }
  .trust.is-ink .tw-card h4{
    color:var(--paper); font-size:clamp(15px,1.16vw,16.5px);
    letter-spacing:-0.016em; line-height:1.3; margin:0 0 7px;
  }
  .trust.is-ink .tw-card p{ color:rgba(250, 246, 239,.50); font-size:13px; line-height:1.55; }

  /* Column entry · armed by JS, so a failed script leaves them visible. */
  .trust.is-ink .twall.is-armed .tw-card{ opacity:0; transform:translateY(20px); }
  .trust.is-ink .twall.is-armed .tw-card.is-in{ animation:tz-rise .6s cubic-bezier(.2,.7,.2,1) both; }
  .trust.is-ink .twall.is-armed .tw-card:nth-child(2).is-in{ animation-delay:.07s; }
  .trust.is-ink .twall.is-armed .tw-card:nth-child(3).is-in{ animation-delay:.14s; }
  .trust.is-ink .twall.is-armed .tw-card:nth-child(4).is-in{ animation-delay:.21s; }

  /* Integration rail · only what the four columns above don't already say. */
  .trust.is-ink .t-brands{
    margin-top:clamp(14px,1.5vw,22px);
    padding-top:clamp(12px,1.3vw,18px);
    border-top:1px solid rgba(250, 246, 239,.10);
  }
  .trust.is-ink .t-brands-row{
    mask-image:linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  }
  .plat-track{
    display:flex; align-items:center; gap:clamp(34px,4vw,64px);
    width:max-content;
    animation:t-brands-scroll 72s linear infinite;
    will-change:transform;
  }
  .plat-item{
    flex-shrink:0; white-space:nowrap;
    display:inline-flex; align-items:center; gap:11px;
    font-family:var(--sans);
    font-size:13px; font-weight:500; letter-spacing:0.015em;
    color:rgba(250, 246, 239,.42);
  }
  .plat-item::before{
    content:""; width:4px; height:4px; border-radius:50%;
    background:rgba(169, 215, 242,.55); flex-shrink:0;
  }
  .plat-item b{ color:var(--paper); font-weight:600; }

  @media (max-width:1000px){
    .trust.is-ink .tw-card{ border-left:0; padding-left:0; }
    .trust.is-ink .tw-card:nth-child(even){
      border-left:1px solid rgba(250, 246, 239,.10);
      padding-left:clamp(20px,2.2vw,30px);
    }
    .trust.is-ink .tw-card:nth-child(n+3){ border-top:1px solid rgba(250, 246, 239,.10); }
    .trust.is-ink .tw-card.is-lead::before{ right:clamp(20px,2.2vw,30px); }
  }
  @media (max-width:560px){
    .trust.is-ink .tw-card:nth-child(even){ border-left:0; padding-left:0; }
    .trust.is-ink .tw-card + .tw-card{ border-top:1px solid rgba(250, 246, 239,.10); }
    .trust.is-ink .tw-card.is-lead::before{ right:0; }
  }
  @media (prefers-reduced-motion:reduce){
    .plat-track{ animation:none; }
    .trust.is-ink .twall.is-armed .tw-card{ opacity:1; transform:none; }
    .trust.is-ink .twall.is-armed .tw-card.is-in{ animation:none; }
  }

  /* ===== Operator voices · ink carousel ==================================
     Frame borrowed from zig.ai's testimonial panel (full-bleed color break,
     one large quote, corner halftone), rebuilt in Posty language: the dot
     field is our gravity-dot matrix on a live canvas, it reacts when the
     quote changes, and the left rail carries the operator's number instead
     of a decorative void. ===================================================== */
  .tz{
    position:relative; z-index:2;
    background:var(--ink); color:var(--paper);
    padding:clamp(38px,3.6vw,52px) 0 clamp(14px,1.6vw,22px);
    overflow:hidden;
  }
  /* The gravity field bleeds out of the bottom-left corner and dissolves
     toward the middle of the panel. Canvas, not a background-image, because
     the dots have to answer the carousel. */
  .tz-dots{
    position:absolute; left:0; bottom:0;
    width:min(40%,512px); height:min(50%,450px);
    pointer-events:none; z-index:0;
  }
  /* Subpages wrap sections in .si-canvas, which zeroes section backgrounds
     at (0,1,1). Beat it explicitly rather than relying on source order. */
  .si-canvas .tz{ background:var(--ink); color:var(--paper); }
  .tz-dots canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .tz-wrap{ position:relative; z-index:1; }

  .tz-head{ max-width:820px; }
  .tz-eye{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--sans);
    font-size:11px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase;
    color:rgba(250, 246, 239,.55);
  }
  .tz-eye svg{ display:block; color:var(--sky); }
  .tz-title{
    margin-top:16px;
    font-size:clamp(30px,4.2vw,58px); line-height:1.03;
    letter-spacing:-0.034em; font-weight:800; color:var(--paper);
  }
  .tz-title .accent{ color:var(--sky); }

  .tz-stage{
    margin-top:clamp(48px,6vw,88px);
    position:relative;
  }
  .tz-slides{ position:relative; }
  .tz-slide{
    /* inset:0, not `0 0 auto 0`. The stack height is locked to the tallest
       slide, but each slide used to be only as tall as its own content — so
       align-items:center centred each one in a different box and the stat
       landed at a different height on every card. */
    position:absolute; inset:0;
    display:grid;
    grid-template-columns:minmax(0,0.76fr) minmax(0,1.24fr);
    column-gap:clamp(32px,5vw,88px);
    align-items:end;
    opacity:0; visibility:hidden;
    transition:opacity .42s ease, visibility 0s linear .42s;
  }
  .tz-slide.is-on{
    opacity:1; visibility:visible;
    transition:opacity .52s ease, visibility 0s;
  }

  /* --- left rail · the operator's number, set over the dot field --- */
  .tz-fig{ align-self:end; padding-bottom:4px; }
  .tz-num{
    font-size:clamp(52px,7.4vw,104px); font-weight:800;
    letter-spacing:-0.05em; line-height:0.92; color:var(--paper);
    font-feature-settings:"tnum";
    display:flex; align-items:baseline; gap:6px;
  }
  .tz-num .u{ font-size:0.34em; font-weight:600; letter-spacing:-0.01em; color:var(--sky); }
  /* Type untouched. Legibility comes from a soft ink halo: stacked blurs of the
     section's own background at zero offset, so it knocks the dots back around the
     glyphs without reading as a drop shadow. */
  .tz-lbl{
    margin-top:14px; max-width:250px;
    font-family:var(--sans);
    font-size:11px; font-weight:500; letter-spacing:0.13em; text-transform:uppercase;
    color:rgba(250, 246, 239,.55); line-height:1.5;
    /* Six layers, the first four fully opaque. Stacked shadows compound rather than
       replace, so each pass darkens what the last one left — that is what puts a solid
       plate of ink immediately around the glyphs while the outer two feather it away
       with no visible boundary. */
    text-shadow:0 0 3px rgba(10,10,10,1), 0 0 6px rgba(10,10,10,1),
                0 0 10px rgba(10,10,10,1), 0 0 16px rgba(10,10,10,1),
                0 0 26px rgba(10,10,10,.95), 0 0 38px rgba(10,10,10,.8);
  }
  .tz-slide.is-on .tz-num,
  .tz-slide.is-on .tz-lbl{ animation:tz-rise .62s cubic-bezier(.2,.7,.2,1) both; }
  .tz-slide.is-on .tz-lbl{ animation-delay:.07s; }

  /* --- right column · the quote --- */
  .tz-quote{
    margin:0;
    font-size:clamp(21px,2.3vw,33px); line-height:1.38;
    letter-spacing:-0.021em; font-weight:500; color:var(--paper);
  }
  .tz-quote em{ font-style:normal; color:var(--sky); }
  .tz-slide.is-on .tz-quote{ animation:tz-rise .66s cubic-bezier(.2,.7,.2,1) both; }

  .tz-foot{
    margin-top:clamp(28px,3.4vw,46px);
    display:flex; align-items:center; justify-content:space-between; gap:var(--lg);
    flex-wrap:wrap;
  }
  .tz-slide.is-on .tz-foot{ animation:tz-rise .66s cubic-bezier(.2,.7,.2,1) both; animation-delay:.11s; }

  .tz-who{ display:flex; align-items:center; gap:16px; min-width:0; }
  /* Placeholder until real headshots land — deliberately reads as a slot. */
  .tz-av{
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    display:grid; place-items:center;
    background:rgba(250, 246, 239,.05);
    border:1px dashed rgba(250, 246, 239,.24);
    color:var(--sky); font-size:16px; line-height:1;
  }
  .tz-name{ display:block; font-size:17px; font-weight:600; letter-spacing:-0.012em; color:var(--paper); }
  .tz-role{ display:block; margin-top:4px; font-size:13.5px; color:rgba(250, 246, 239,.55); letter-spacing:-0.004em; }
  /* Placeholder until merchant logos are cleared. */
  .tz-logo{
    flex-shrink:0;
    min-width:154px; height:52px; padding:0 18px;
    display:grid; place-items:center;
    border:1px dashed rgba(250, 246, 239,.20); border-radius:10px;
    font-family:var(--sans);
    font-size:10px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
    color:rgba(250, 246, 239,.32);
  }

  /* --- control bar --- */
  .tz-bar{
    margin-top:clamp(22px,2.4vw,34px);
    display:grid;
    grid-template-columns:minmax(0,0.76fr) minmax(0,1.24fr);
    column-gap:clamp(32px,5vw,88px);
  }
  .tz-bar-in{ grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:var(--lg); }
  .tz-ticks{ display:flex; align-items:center; gap:10px; }
  .tz-tick{
    -webkit-appearance:none; appearance:none; background:none; border:0;
    padding:12px 2px; cursor:pointer; line-height:0;
  }
  .tz-tick i{
    display:block; width:38px; height:2px; border-radius:2px;
    background:rgba(250, 246, 239,.20); position:relative; overflow:hidden;
    transition:background .3s ease;
  }
  .tz-tick i::after{
    content:""; position:absolute; inset:0;
    background:var(--sky); transform-origin:left;
    transform:scaleX(var(--tzp,0));
  }
  .tz-tick:hover i{ background:rgba(250, 246, 239,.34); }
  .tz-tick:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:4px; }

  .tz-arrows{ display:flex; align-items:center; gap:12px; }
  .tz-arrow{
    -webkit-appearance:none; appearance:none;
    width:46px; height:46px; border-radius:50%;
    background:transparent; border:1px solid rgba(250, 246, 239,.22);
    color:rgba(250, 246, 239,.82);
    display:grid; place-items:center; cursor:pointer;
    transition:border-color .34s cubic-bezier(.2,.7,.2,1),
               background .34s cubic-bezier(.2,.7,.2,1),
               color .34s ease, transform .34s cubic-bezier(.2,.7,.2,1);
  }
  .tz-arrow svg{ display:block; transition:transform .34s cubic-bezier(.2,.7,.2,1); }
  .tz-arrow:hover{ border-color:var(--sky); background:rgba(169, 215, 242,.10); color:var(--paper); }
  .tz-arrow[data-tz-next]:hover svg{ transform:translateX(3px); }
  .tz-arrow[data-tz-prev]:hover svg{ transform:translateX(-3px); }
  .tz-arrow:active{ transform:scale(.94); }
  .tz-arrow:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }

  @keyframes tz-rise{
    from{ opacity:0; transform:translateY(20px); }
    to{ opacity:1; transform:none; }
  }

  @media (max-width:900px){
    .tz-dots{ width:51%; height:36%; }
    .tz-slide{ grid-template-columns:1fr; row-gap:26px; align-items:start; }
    .tz-fig{ align-self:start; padding-bottom:0; order:-1; }
    .tz-lbl{ max-width:none; }
    .tz-bar{ grid-template-columns:1fr; }
    /* Arrows move left of the ticks so they clear the floating chat launcher. */
    .tz-bar-in{ grid-column:1; flex-direction:row-reverse; }
    .tz-foot{ gap:var(--md); }
    .tz-logo{ min-width:130px; height:46px; }
  }
  @media (max-width:520px){
    .tz-av{ width:46px; height:46px; }
    .tz-foot{ flex-direction:column; align-items:flex-start; }
  }
  @media (prefers-reduced-motion:reduce){
    .tz-slide, .tz-slide.is-on{ transition:none; }
    .tz-slide.is-on .tz-num,
    .tz-slide.is-on .tz-lbl,
    .tz-slide.is-on .tz-quote,
    .tz-slide.is-on .tz-foot{ animation:none; }
    .tz-tick i::after{ transform:scaleX(0); }
    .tz-tick.is-on i::after{ transform:scaleX(1); }
  }

  /* ===== Trust section · paper · DYNAMIC v2 ===== */
  .trust{
    background:var(--paper);
    color:var(--t-ink);
    padding:var(--4xl) 0;
    position:relative;
  }

  /* Compliance items · used inside the marquee track below the testimonials */
  .comp-item{
    display:inline-flex;align-items:center;gap:12px;
    color:var(--t-ink-70);
    font-size:14px;font-weight:500;letter-spacing:-0.005em;
    flex-shrink:0;
    transition:color var(--t-micro);
  }
  .comp-item .icon{
    width:36px;height:36px;
    display:inline-grid;place-items:center;
    border-radius:10px;
    background:var(--sky-soft);
    color:var(--ocean-deep);
    flex-shrink:0;
    transition:transform var(--t-micro), background var(--t-micro);
  }
  .comp-item:hover .icon{
    background:var(--sky);
    transform:scale(1.05);
  }
  .comp-item .icon svg{ display:block }
  .comp-item:hover{ color:var(--ink) }
  .comp-item b{ font-weight:700;color:var(--ink) }

  /* Testimonial section · headline + asymmetric grid */
  .t-head{
    text-align:center;
    margin-bottom:var(--3xl);
    max-width:820px;
    margin-left:auto;margin-right:auto;
  }
  .t-eye{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--ocean-deep);
    margin-bottom:var(--md);
    display:inline-block;
  }
  .t-title{
    font-size:clamp(28px, 3.4vw, 48px);
    line-height:1.05;letter-spacing:-0.028em;font-weight:800;
    color:var(--ink);
  }
  .t-title .accent{ color:var(--ocean-deep) }

  /* Asymmetric grid · 1 featured (left, wider) + 2 supporting (right, stacked) */
  .t-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    grid-template-rows:auto auto;
    gap:var(--lg);
    grid-template-areas:
      "featured side1"
      "featured side2";
  }
  .t-card:nth-child(1){ grid-area:featured }
  .t-card:nth-child(2){ grid-area:side1 }
  .t-card:nth-child(3){ grid-area:side2 }

  .t-card{
    background:#FFFFFF;
    border:1px solid var(--rule-on-paper);
    border-radius:20px;
    padding:var(--xl);
    display:flex;flex-direction:column;
    gap:var(--md);
    position:relative;
    transition:transform 380ms cubic-bezier(.2,.7,.2,1),
               box-shadow 380ms cubic-bezier(.2,.7,.2,1),
               border-color 380ms;
    will-change:transform;
    overflow:hidden;
    transform-style:preserve-3d;
  }
  /* While the cursor is inside a card, JS sets an inline transform
     each frame to follow the pointer. We shorten the transition so it
     feels responsive instead of laggy. */
  .t-card.is-tilting{
    transition:transform 80ms cubic-bezier(.2,.7,.2,1),
               box-shadow 380ms cubic-bezier(.2,.7,.2,1),
               border-color 380ms;
  }
  /* Featured card · gradient wash, bigger type, more drama */
  .t-card.featured{
    background:linear-gradient(160deg, #FFFFFF 0%, rgba(169, 215, 242,0.06) 100%);
    border-color:rgba(169, 215, 242,0.30);
    padding:var(--2xl);
    gap:var(--lg);
  }
  .t-card.featured::before{
    content:"";
    position:absolute;
    top:-50%; right:-30%;
    width:60%;height:80%;
    background:radial-gradient(circle, rgba(169, 215, 242,0.10) 0%, transparent 60%);
    pointer-events:none;
  }
  .t-card.featured .quote{
    font-size:22px;line-height:1.52;font-weight:500;
  }
  .t-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 60px -32px rgba(0,0,0,.20),
               0 10px 24px -18px rgba(169, 215, 242,.30);
    border-color:rgba(169, 215, 242,.50);
  }
  .t-card.featured:hover{
    box-shadow:0 30px 60px -32px rgba(0,0,0,.18),
               0 14px 28px -18px rgba(169, 215, 242,.40);
  }

  /* Pull-quote stat chip · prominent metric from the testimonial */
  .t-pull{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:var(--r-pill);
    background:var(--sky-soft);
    color:var(--ocean-deep);
    font-family:var(--sans);
    font-size:11px;font-weight:600;
    letter-spacing:0.10em;text-transform:uppercase;
    border:1px solid rgba(169, 215, 242,0.40);
  }
  .t-pull .dot{
    width:5px;height:5px;border-radius:50%;
    background:var(--ocean);
    flex-shrink:0;
  }

  .t-card .quote{
    font-size:15px;line-height:1.55;letter-spacing:-0.005em;
    color:var(--ink);
    flex:1;
    position:relative;
  }
  .t-card .quote::before{
    content:"\201C";
    font-family:Georgia, serif;
    font-size:36px;line-height:0;
    color:var(--ocean-deep);
    margin-right:4px;
    vertical-align:-0.25em;
    font-weight:700;
  }
  .t-card .attr{
    display:flex;align-items:center;gap:12px;
    padding-top:var(--md);
    border-top:1px solid var(--rule-on-paper);
    margin-top:var(--xs);
  }
  .t-card.featured .attr{ padding-top:var(--lg) }
  .t-card .avatar{
    width:40px;height:40px;border-radius:50%;
    background:var(--sky-soft);
    color:var(--ocean-deep);
    display:grid;place-items:center;
    font-family:var(--sans);
    font-size:12px;font-weight:600;letter-spacing:0.04em;
    flex-shrink:0;
    border:1px solid rgba(169, 215, 242,0.40);
  }
  .t-card.featured .avatar{
    width:48px;height:48px;font-size:13px;
  }
  .t-card .meta{ min-width:0 }
  .t-card .name{ font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-0.005em }
  .t-card.featured .name{ font-size:15px }
  .t-card .role{ font-size:12px;color:var(--t-ink-55);margin-top:1px;line-height:1.4 }

  /* Key phrase emphasis inside the quote · pink, semibold */
  .t-card .quote em{
    color:var(--ocean-deep);
    font-style:normal;
    font-weight:600;
  }

  /* Outcome ledger · the featured card's results set like a P&L — label left,
     number right, one rule per line. Substance where the dead space was. */
  .t-outcomes{
    display:flex;
    flex-direction:column;
    margin-top:auto;
    border-top:1px solid rgba(169, 215, 242,.30);
  }
  .t-outcome{
    display:flex; align-items:baseline; justify-content:space-between;
    flex-direction:row-reverse;
    padding:13px 2px;
    border-bottom:1px solid rgba(169, 215, 242,.30);
  }
  .t-outcome .num{
    font-size:26px;font-weight:800;letter-spacing:-0.028em;
    color:var(--ink);
    line-height:1.05;
    font-feature-settings:"tnum";
  }
  .t-outcome .num .accent{ color:var(--ocean-deep) }
  .t-outcome .lbl{
    font-family:var(--sans);
    font-size:10.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--t-ink-55);
    line-height:1.3;
  }

  /* Brand mark pill in attribution */
  .t-card .brand-tag{
    display:inline-block;
    margin-top:6px;
    padding:3px 8px;
    border-radius:var(--r-pill);
    background:rgba(0,0,0,.04);
    color:var(--t-ink-55);
    font-family:var(--sans);
    font-size:10px;font-weight:500;letter-spacing:0.12em;
    text-transform:uppercase;
    line-height:1.4;
  }

  /* Brand logos marquee · slow horizontal scroll of merchant names */
  .t-brands{
    margin-top:var(--3xl);
    padding-top:var(--2xl);
    border-top:1px solid var(--rule-on-paper);
  }
  .t-brands-label{
    text-align:center;
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--t-ink-55);
    margin-bottom:var(--lg);
  }
  .t-brands-row{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .t-brands-track{
    display:flex;align-items:center;gap:var(--3xl);
    width:max-content;
    animation:t-brands-scroll 52s linear infinite;
    will-change:transform;
  }
  /* Variant of the marquee track that carries the compliance comp-items */
  .t-brands-track.comp-track{
    gap:var(--3xl);
    padding:var(--md) 0;
    animation-duration:60s;
  }
  @keyframes t-brands-scroll{
    from{ transform:translateX(0) }
    to  { transform:translateX(-50%) }
  }
  @media (prefers-reduced-motion: reduce){
    .t-brands-track{ animation:none }
  }

  /* Scroll-triggered entrance · fade + rise + stagger (testimonial cards only) */
  .t-card{
    opacity:0;
    transform:translateY(20px);
  }
  .t-card.is-in{
    animation:trust-rise 700ms cubic-bezier(.2,.7,.2,1) forwards;
  }
  .t-grid .t-card.is-in:nth-child(1){ animation-delay:0ms }
  .t-grid .t-card.is-in:nth-child(2){ animation-delay:120ms }
  .t-grid .t-card.is-in:nth-child(3){ animation-delay:240ms }
  @keyframes trust-rise{
    from{ opacity:0; transform:translateY(20px) }
    to  { opacity:1; transform:translateY(0) }
  }
  @media (prefers-reduced-motion: reduce){
    .t-card{ opacity:1; transform:none; animation:none }
  }

  /* ===== Closing CTA · ink (redesigned) =====
     Anchored by the posty pink symbol as a focal element, with a single soft radial
     wash carrying brand presence. No more edge orbs. */
  .cta-final{
    background:var(--paper);
    color:var(--ink);
    padding:var(--4xl) 0;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  /* single warm radial wash behind the moment */
  .cta-final::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:min(1200px, 90vw);
    aspect-ratio:1;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, rgba(169, 215, 242,.10) 0%, rgba(169, 215, 242,.04) 30%, transparent 60%);
    pointer-events:none;
    z-index:0;
  }
  .cta-final .wrap{ position:relative; z-index:1 }
  /* The monolith · one giant pink panel carries the entire closing moment —
     the only warm object on the ink field, bookending the calculator's pink.
     isolation:isolate keeps the z:-1 watermark above the panel's own fill. */
  .cta-final-panel{
    position:relative;
    isolation:isolate;
    background:linear-gradient(165deg, #C8E5F7, var(--sky) 45%, #6B8FD6);
    border-radius:32px;
    padding:clamp(56px, 7vw, 96px) var(--xl);
    overflow:hidden;
    box-shadow:0 48px 110px -48px rgba(169, 215, 242,.38),
               inset 0 1px 0 rgba(255,255,255,.35);
  }
  /* Symbol as a quiet oversized watermark behind the closing message —
     inked so it reads on the pink panel. */
  .cta-final-mark{
    position:absolute;
    left:50%; top:46%;
    width:min(520px, 64vw); height:auto;
    transform:translate(-50%,-50%);
    opacity:.04;
    filter:brightness(0);
    pointer-events:none;
    z-index:-1;
  }
  .cta-final-eye{
    display:inline-block;
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.20em;text-transform:uppercase;
    color:var(--ink);
    margin-bottom:var(--md);
  }
  .cta-final h2{
    font-size:clamp(40px, 5.2vw, 76px);
    line-height:1.02;letter-spacing:-0.038em;font-weight:800;
    color:var(--ink);
    margin:0 auto var(--md);
    max-width:1100px;
    white-space:nowrap;
  }
  .cta-final h2 .accent{ color:rgba(0,0,0,.38) }
  .cta-final p{
    font-size:18px;line-height:1.5;letter-spacing:-0.005em;
    color:var(--t-ink-70);
    margin:0 auto var(--xl);
    max-width:560px;
  }
  .cta-final .actions{
    display:flex;align-items:center;gap:var(--md);flex-wrap:wrap;justify-content:center;
    margin-bottom:var(--lg);
  }
  .cta-final .btn-ink{ padding:16px 30px;font-size:16px }
  .cta-final .btn-ghost-paper{ padding:16px 30px;font-size:16px }
  .cta-final .actions .btn .arrow{ transition:transform var(--t-micro) }
  .cta-final .actions .btn:hover .arrow{ transform:translateX(3px) }
  /* small trust line below buttons — its own row */
  .cta-final-trust{
    display:flex;align-items:center;gap:18px;
    color:var(--t-ink-55);
    font-size:13px;letter-spacing:-0.005em;
    flex-wrap:wrap;justify-content:center;
  }
  .cta-final-trust .item{ display:inline-flex;align-items:center;gap:6px }
  /* closer trust checks read white on a quiet ink disc — off-brand green removed */
  .cta-final-trust .ck.mint{ background:rgba(10,10,10,.18); }
  .cta-final-trust .ck.mint::after{ border-color:#FFFFFF; }

  /* ============================================================ */
  /* Deep footer · redesigned                                      */
  /* Structure:                                                    */
  /*   1. Identity strip (logo + tagline · status · socials)       */
  /*   2. Featured demo CTA band (heading left · form right)       */
  /*   3. Link columns grid                                        */
  /*   4. Mega wordmark · refined                                  */
  /*   5. Bottom legal bar                                         */
  /* ============================================================ */
  .footer-deep{
    background:var(--ink);
    color:var(--t-paper-55);
    padding:0 0 var(--xl);
    font-size:15px;
    position:relative;
  }

  /* 1 · Link columns ------------------------------------------ */
  .footer-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:var(--xl);
    padding:var(--3xl) 0 var(--2xl);
  }
  .footer-col h4{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.20em;text-transform:uppercase;
    color:var(--sky);
    margin-bottom:var(--md);
  }
  .footer-col ul{
    list-style:none;
    display:flex;flex-direction:column;gap:10px;
  }
  .footer-col a{
    color:var(--t-paper-70);
    transition:color var(--t-micro), padding-left var(--t-micro);
    letter-spacing:-0.005em;
    position:relative;
    display:inline-block;
  }
  .footer-col a::before{
    content:"→";
    position:absolute;
    left:-18px;
    opacity:0;
    transform:translateX(-4px);
    color:var(--sky);
    transition:opacity var(--t-micro), transform var(--t-micro);
  }
  .footer-col a:hover{
    color:var(--paper);
    padding-left:18px;
  }
  .footer-col a:hover::before{
    opacity:1;
    transform:translateX(0);
    left:0;
  }
  .footer-col a:focus-visible{
    outline:none;
    color:var(--paper);
    text-decoration:underline;
    text-decoration-color:var(--sky);
    text-underline-offset:4px;
  }

  /* 2 · Mega wordmark band ------------------------------------ */
  .footer-mega{
    padding:0;
    overflow:hidden;
    display:flex;justify-content:center;align-items:center;
  }
  .footer-mega img{
    width:96%;height:auto;
    opacity:.18;
    filter:brightness(1.8);
    user-select:none;pointer-events:none;
    display:block;
  }

  /* 3 · Bottom legal bar — Optimist-style: left-justified, sentence case, ~13px ----- */
  .footer-disclaimer{
    text-align:left;
    color:var(--t-paper-55);
    font-size:13px;line-height:1.6;letter-spacing:-0.005em;
    max-width:none;
    margin:var(--xl) 0 var(--md);
    padding:0;
  }
  .footer-bottom{
    display:flex;align-items:center;justify-content:flex-start;
    gap:8px;flex-wrap:wrap;
    font-size:13px;line-height:1.6;letter-spacing:-0.005em;
    color:var(--t-paper-55);
  }
  .footer-bottom a{
    color:var(--t-paper-55);
    transition:color var(--t-micro);
  }
  .footer-bottom a:hover{ color:var(--paper); text-decoration:underline; text-underline-offset:3px }
  .footer-bottom .sep{ color:var(--t-paper-35) }

  /* ===== Responsive ===== */
  @media (max-width: 900px){
    /* Show the hamburger and convert nav-pill from inline pill to slide-down dropdown.
       Switch nav-inner from 3-col grid to flex so brand sits left and burger sits right
       (the absolutely-positioned panel drops out of the layout flow). */
    .nav-burger{ display:inline-flex }
    .nav-right{ display:none }
    .nav-inner{ display:flex; justify-content:space-between; align-items:center }
    .nav-pill{
      /* override desktop's inline pill layout */
      position:absolute;
      top:calc(100% + 8px);
      left:var(--lg);
      right:var(--lg);
      flex-direction:column;
      align-items:stretch;
      justify-self:auto;
      padding:var(--md);
      border-radius:20px;
      background:rgba(10,10,10,.94);
      backdrop-filter:blur(20px) saturate(140%);
      -webkit-backdrop-filter:blur(20px) saturate(140%);
      border:none;
      box-shadow:inset 0 0 0 1px var(--di-line-ink), 0 24px 56px rgba(0,0,0,.45);
      gap:4px;
      /* hidden by default, shown when body.menu-open */
      opacity:0;
      transform:translateY(-8px);
      pointer-events:none;
      visibility:hidden;
      transition:opacity 220ms cubic-bezier(.2,.7,.2,1),
                 transform 220ms cubic-bezier(.2,.7,.2,1),
                 visibility 0s linear 220ms;
    }
    body.nav-over-paper .nav-pill{
      background:rgba(255,255,255,.96);
      box-shadow:inset 0 0 0 1px var(--di-line-paper), 0 24px 56px rgba(12, 15, 20,.18);
    }
    body.menu-open .nav-pill{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
      visibility:visible;
      transition:opacity 220ms cubic-bezier(.2,.7,.2,1),
                 transform 220ms cubic-bezier(.2,.7,.2,1),
                 visibility 0s linear 0s;
    }
    .nav-pill a{
      padding:14px 18px;
      font-size:15px;
      border-radius:12px;
    }
    .nav-pill a:hover{ transform:none } /* override desktop hover lift inside the panel */
    .nav-pill .cta-sky{
      margin-top:var(--xs);
      justify-content:center;
    }
    /* Platform group flattens inside the mobile panel — a caps label + the six
       links, no second tap level. The desktop spotlights stay desktop-only. */
    .nav-drop{ display:contents; }
    .nav-drop-trigger{ display:none; }
    .nav-mega-spot, .nav-mega-card{ display:none; }
    /* enumerated variant so this outranks the desktop mega rules */
    .nav-drop-menu,
    .nav-drop.is-mega .nav-drop-menu{
      position:static;top:auto;
      width:auto;padding:0;
      background:transparent;box-shadow:none;border-radius:0;
      opacity:1;visibility:visible;pointer-events:auto;
      transform:none;transition:none;
      display:block;
    }
    .nav-mega-list{ display:contents; }
    .nav-mega-eye{
      padding:8px 18px 4px;
      color:var(--t-paper-35);
    }
    body.nav-over-paper .nav-mega-eye{ color:var(--t-ink-35); }
    .nav-mega-links{
      display:flex;flex-direction:column;gap:2px;
    }
    .nav-pill .nav-mega-links a{
      padding:10px 18px;border-radius:12px;
      font-size:15px;
    }
    .nav-pill .nav-mega-links a span{ font-size:12px; }
    body.nav-over-paper .nav-pill .nav-mega-links a{ color:var(--t-ink); }
    body.nav-over-paper .nav-pill .nav-mega-links a span{ color:var(--t-ink-55); }
    body.nav-over-paper .nav-pill .nav-mega-links a:hover{ background:rgba(0,0,0,.05); }
    /* breathers between the two groups and the flat links; panel scrolls if
       the two groups outgrow the viewport */
    .nav-drop + .nav-drop .nav-mega-eye{ padding-top:16px; }
    .nav-drop + a[href="#pricing"]{ margin-top:var(--xs); }
    .nav-pill{ max-height:calc(100vh - 110px); overflow-y:auto; }
    .bynums-grid{ grid-template-columns:1fr; gap:var(--2xl); padding-top:var(--2xl); }
    /* Center each stat cell + its inner blocks on mobile so the column reads as a clean,
       balanced stack instead of left-justified inside its own row. */
    .bynums-cell{
      border-right:0;
      border-bottom:1px solid var(--rule-on-ink);
      padding:0 0 var(--2xl);
      align-items:center;
      text-align:center;
    }
    .bynums-cell + .bynums-cell{ padding-left:0 }
    .bynums-cell:last-child{ border-bottom:0; padding-bottom:0 }
    .bynums-spark{ margin-left:auto; margin-right:auto }  /* center the sparkline */
    .bynums-label{ max-width:none; margin-left:auto; margin-right:auto }
    .bynums-num{ font-size:clamp(56px, 13vw, 96px) }
    .t-grid{ grid-template-columns:1fr; grid-template-areas:"featured" "side1" "side2"; gap:var(--md); }
    .t-card.featured{ padding:var(--xl) }
    .t-card.featured .quote{ font-size:17px }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--xl) }
    /* Center the four footer columns on tablets/phones so the 2×2 grid reads
       as a balanced footer block rather than a left-justified list. */
    .footer-col{ text-align:center }
    .footer-col ul{ align-items:center }
    .footer-col a:hover{ padding-left:0 }
    .footer-col a::before{ display:none }
    .cta-final-mark{ width:min(360px, 82vw) }
    .cta-final h2{ white-space:normal }
  }
  @media (max-width: 640px){
    .wrap{padding:0 20px}
    .hero{padding:var(--2xl) 0 var(--xl)}
    .hero-title{ font-size:clamp(40px, 11vw, 56px); line-height:1.02 }
    .hero-sub{font-size:17px}
    /* Hero CTAs stack full-width on phones so they're easy to tap */
    .hero-cta{ flex-direction:column; align-items:stretch; gap:10px }
    .hero-cta .btn{ width:100%; justify-content:center }
    .hero-cta .link-arrow{ width:100%; justify-content:center }
    /* Trust row wraps naturally; reduce font and tighten gaps */
    .trust-row{ gap:8px; font-size:12px }
    /* Calculator: smaller input font so the typed revenue fits cleanly */
    .calc h2{ font-size:clamp(32px, 8vw, 44px) }
    .calc-input, .calc-prefix{ font-size:clamp(32px, 8vw, 48px) }
    .calc-output{ font-size:clamp(36px, 9vw, 56px) }
    /* Generous slider thumb for finger taps · 24px clears the touch standard */
    .calc-slider{ height:6px }
    .calc-slider::-webkit-slider-thumb{ width:26px;height:26px }
    .calc-slider::-moz-range-thumb{ width:26px;height:26px }
    /* Make btn touch targets meet 44pt */
    .btn{ padding:16px 24px; font-size:15px }
    .bynums{ padding:var(--md) 0 var(--lg) }
    .bynums-plate{ padding:32px 20px; border-radius:24px }
    .trust{ padding:var(--2xl) 0 }
    .t-card{ padding:var(--lg) }
    .t-card.featured{ padding:var(--xl) }
    .comp-item{ font-size:13px; }
    .cta-final{ padding:var(--2xl) 0 }
    .cta-final-panel{ border-radius:20px; padding:var(--2xl) var(--lg) }
    .cta-final h2{ font-size:clamp(32px, 8vw, 44px); white-space:normal }
    .cta-final-mark{ width:48px;height:48px;margin-bottom:var(--md) }
    .cta-final-trust{ font-size:12px;gap:10px }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--xl) }
    .footer-bottom{ justify-content:center; flex-wrap:wrap }
  }
  /* Narrow phones ≤ 420px · final tighten pass */
  @media (max-width: 420px){
    .hero-title{ font-size:clamp(34px, 10vw, 44px) }
    .cascade h2{ font-size:clamp(34px, 11vw, 48px) }
    .bynums h2{ font-size:clamp(38px, 11vw, 52px) }
    /* Keep the 2-column 2×2 footer grid on narrow phones · single-column was
       making the footer read as one very long list. Tighten gap + link size
       so the four sections sit comfortably side-by-side. */
    .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--lg) var(--md) }
    .footer-col{ text-align:center }
    .footer-col h4{ font-size:10px }
    .footer-col ul{ gap:6px; align-items:center }
    .footer-col a{ font-size:13px }
    /* Hover arrow shifts links left/right — disable on mobile so the
       centered text stays centered when tapped. */
    .footer-col a:hover{ padding-left:0 }
    .footer-col a::before{ display:none }
    .footer-mega img{ width:100% }
  }

  /* =================================================================
     v3 REDESIGN LAYER · Dynamic-Island cards · world-map hero · journey
     ================================================================= */
  :root{
    --di-line-ink:   rgba(169, 215, 242,.30);   /* soft pink hairline on dark */
    --di-line-paper: rgba(107, 143, 214,.42);   /* soft pink hairline on light */
    --di-fill-ink:   rgba(250, 246, 239,.035);
    --di-fill-paper: rgba(255,255,255,.72);
  }
  /* Film grain · ink sections only — subtle texture so the dark fields don't read flat.
     Static tiled SVG turbulence (no JS, no repaint cost); pointer-safe. */
  .bynums-plate::before,
  .cta-final::after{
    content:"";
    position:absolute; inset:0;
    z-index:1; pointer-events:none;
    opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
  }

  /* Dynamic-Island card — rounded + soft pink hairline (never pure white) */
  .di{ border-radius:var(--r-media); position:relative; }
  .is-ink .di{
    background:var(--di-fill-ink);
    box-shadow:inset 0 0 0 1px var(--di-line-ink), inset 0 1px 0 rgba(250, 246, 239,.06), 0 18px 44px rgba(0,0,0,.42);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .is-paper .di{
    background:var(--di-fill-paper);
    box-shadow:inset 0 0 0 1px var(--di-line-paper), inset 0 1px 0 rgba(255,255,255,.9), 0 16px 38px rgba(12, 15, 20,.08);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  }

  /* ---------- HERO world map ---------- */
  .hero-map{ position:relative; width:100%; aspect-ratio:1000/470; margin-top:var(--sm); }
  .hero-map .map-dots{
    position:absolute; inset:0;
    background-image:radial-gradient(rgba(169, 215, 242,.55) 1.3px, transparent 1.6px);
    background-size:17px 17px; background-position:center;
    -webkit-mask:radial-gradient(ellipse 64% 82% at 50% 48%, #000 52%, transparent 100%);
            mask:radial-gradient(ellipse 64% 82% at 50% 48%, #000 52%, transparent 100%);
    opacity:.55;
  }
  .hero-map .map-dots.mint{
    background-image:radial-gradient(rgba(191,229,205,.5) 1.3px, transparent 1.6px);
    background-position:8px 8px; opacity:.4;
  }
  .hero-map svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .map-svg{ -webkit-mask:radial-gradient(ellipse 72% 90% at 50% 46%,#000 58%,transparent 100%); mask:radial-gradient(ellipse 72% 90% at 50% 46%,#000 58%,transparent 100%); opacity:.62; }
  .hero-arc{ fill:none; stroke:var(--sky); stroke-width:1.6; stroke-linecap:round; opacity:.8; }
  .hero-arc.m{ stroke:var(--sage-deep); }
  .hub{ fill:var(--paper); }
  .hub-ring{ fill:none; stroke:var(--sky); stroke-width:1.4; opacity:.5;
    transform-box:fill-box; transform-origin:center; animation:hub-pulse 3s ease-in-out infinite; }
  @keyframes hub-pulse{ 0%,100%{ opacity:.5; r:5 } 50%{ opacity:.12; r:11 } }
  .pkg{ fill:var(--sage-deep); }
  @media (prefers-reduced-motion:reduce){
    .hero-map .hero-arc{ stroke-dashoffset:0; animation:none }
    .hub-ring,.pkg{ animation:none }
  }

  /* ---------- JOURNEY MAP ---------- */
  .journey{ padding:var(--4xl) 0; }
  /* One line per phrase — the 60px size wrapped "Post-purchase is complex."
     onto two lines and the head read as a four-storey stack. */
  .journey-head{ max-width:860px; }
  .journey-head h2{ font-size:clamp(30px,3.6vw,50px); font-weight:800; letter-spacing:-.03em; line-height:1.12; color:var(--t-ink); }
  .journey-head h2 .soft{ color:var(--t-ink-55); }
  .journey-sub{ margin-top:var(--sm); font-size:clamp(15px,1.35vw,17.5px); color:var(--t-ink-70); max-width:58ch; line-height:1.55; }
  .journey-stage-eye{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--t-ink-35); }

  /* ---------- VERTICAL JOURNEY · scroll-driven rail + stage visuals ----------
     One dotted line runs the height of the section. Scroll fills it in rose,
     a head rides the fill, and each stage lights as the head passes its node.
     Every stage carries a real surface of the product, not an icon. */
  .vj{ position:relative; margin-top:var(--3xl); }
  .vj-rail{ position:absolute; left:31px; width:2px; top:0; height:0; --p:0;
    background:repeating-linear-gradient(to bottom, rgba(0,0,0,.17) 0 3px, transparent 3px 11px); }
  .vj-rail-fill{ position:absolute; inset:0 0 auto 0; height:calc(var(--p) * 100%);
    background:repeating-linear-gradient(to bottom, var(--ocean-deep) 0 3px, transparent 3px 11px); }
  /* the head is a paper plane carrying the parcel down the rail. Sized in the
     SVG's own 232:324 ratio; margin re-centres it on the 2px rail line. */
  .vj-head{ position:absolute; left:1px; top:calc(var(--p) * 100%);
    width:44px; height:50px; margin:-26px 0 0 -21px;
    background:url("/assets/img/c4759ea950.svg") center/contain no-repeat;
    filter:drop-shadow(0 5px 9px rgba(31, 62, 128,.20));
    /* Above the stage nodes. .vj-rail is positioned but z-index:auto, so it is
       not a stacking context and this competes directly with .vj-step, which
       is positioned and later in the DOM — which is why the dots were
       painting over the plane. */
    z-index:5;
    /* Parked and visible from the start: it used to fade in only once the rail
       was mid-travel, so at the first node the plane appeared to load in. */
    opacity:1;
    animation:vjFly 3.6s ease-in-out infinite; }
  /* a little airborne wobble so it reads as flying, not sliding */
  @keyframes vjFly{
    0%,100%{ transform:translateX(-2px) rotate(-2.5deg); }
    50%    { transform:translateX(2px) rotate(2.5deg); } }

  .vj-step{ position:relative; display:grid; align-items:start;
    grid-template-columns:64px minmax(200px,272px) minmax(0,1fr);
    column-gap:clamp(22px,3vw,48px);
    padding-bottom:clamp(64px,8vw,118px); }
  .vj-step:last-child{ padding-bottom:0; }
  .vj-node{ width:14px; height:14px; margin:6px 0 0 25px; border-radius:50%;
    background:var(--paper); box-shadow:inset 0 0 0 2px rgba(0,0,0,.20);
    transition:background .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1); }
  .vj-step.on .vj-node{ background:var(--ocean-deep);
    box-shadow:inset 0 0 0 2px var(--ocean-deep), 0 0 0 7px rgba(63, 110, 202,.10); }
  .vj-step:last-child.on .vj-node{ background:var(--sage-deep);
    box-shadow:inset 0 0 0 2px var(--sage-deep), 0 0 0 7px rgba(151,211,174,.24); }

  .vj-no{ font-family:var(--sans); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--t-ink-35); }
  .vj-meta h3{ margin-top:8px; font-size:clamp(23px,2.4vw,30px); font-weight:750;
    letter-spacing:-.025em; line-height:1.1; color:var(--t-ink); }
  .vj-meta p{ margin-top:10px; font-size:16px; line-height:1.55; color:var(--t-ink-70); max-width:34ch; }
  .vj-more{ margin-top:4px; color:var(--t-ink); font-size:14.5px; }
  .vj-more .ring{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); color:var(--ink); }
  .vj-more:hover .ring{ background:var(--sky); color:var(--ink); box-shadow:inset 0 0 0 1px var(--sky); }

  .vj-vis{ border-radius:28px; overflow:hidden; container-type:inline-size;
    display:grid; place-items:center; min-height:284px;
    padding:clamp(26px,4cqw,46px) 0;
    box-shadow:0 24px 54px -34px rgba(12, 15, 20,.34); }
  .vj-vis.warm{ background:#EAE3D5 }
  .vj-vis.blossom{ background:var(--sky-soft) }
  .vj-vis.ink{ background:#0C0C0C }
  .vj-vis.mint{ background:var(--sage) }
  .vj-vis.skywash{ background:var(--sky) }

  .vj-meta, .vj-vis{ opacity:0; transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); }
  .vj-step.seen .vj-meta, .vj-step.seen .vj-vis{ opacity:1; transform:none; }
  .vj-step.seen .vj-vis{ transition-delay:90ms; }

  /* ---- shared mock language inside a stage visual ---- */
  .vm{ width:min(84cqw,496px); font-size:min(3.35cqw,15.5px);
    display:flex; flex-direction:column; gap:.72em; }
  .vj-vis .co-mock{ width:min(84cqw,496px); font-size:min(3.35cqw,15.5px); }
  .vm-card{ background:#fff; border-radius:1.2em; padding:1.05em 1.15em;
    box-shadow:0 26px 56px -34px rgba(12, 15, 20,.4), 0 0 0 1px rgba(0,0,0,.04); }
  .vm-row{ display:flex; align-items:center; gap:.7em; }
  .vm-line{ margin-top:.55em; }
  .vm-rule{ height:1px; background:rgba(0,0,0,.08); margin:.9em 0; }
  .vm-k{ font-family:var(--sans); font-size:.8em; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(10,10,10,.42); }
  .vm-b{ font-weight:680; color:var(--ink); font-size:1.02em; letter-spacing:-.012em; }
  .vm-s{ color:rgba(10,10,10,.55); font-size:.92em; line-height:1.45; }
  .vm-pill{ margin-left:auto; font-family:var(--sans); font-size:.76em;
    letter-spacing:.07em; text-transform:uppercase; font-weight:600;
    padding:.42em .78em; border-radius:999px; background:var(--sage); color:#14301F; }
  .vm-pill-ink{ background:var(--ink); color:#fff; }
  .vm-money{ margin-left:auto; font-weight:650; color:var(--ink); }
  .vm-plus{ color:var(--ocean-deep); }
  .vm-mark{ width:2.15em; height:2.15em; border-radius:.62em; background:var(--ink);
    color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9em; flex:none;
    letter-spacing:.01em; }
  .vm-ring{ width:2.15em; height:2.15em; flex:none; }
  .vm-ring svg{ width:100%; height:100%; display:block; }
  .vm-ring img{ width:100%; height:100%; display:block; }
  .vm-policy{ display:flex; align-items:center; gap:.8em; }

  /* 03 · tracking rail */
  .vm-track{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); }
  .vm-track-line{ position:absolute; left:12.5%; right:12.5%; top:.4em; height:2px;
    background:rgba(0,0,0,.10); border-radius:2px; }
  .vm-track-fill{ position:absolute; inset:0 auto 0 0; width:66.6%;
    background:var(--ocean-deep); border-radius:2px; }
  .vm-stop{ position:relative; display:flex; flex-direction:column; align-items:center;
    gap:.62em; font-size:.79em; color:rgba(10,10,10,.42); text-align:center; }
  .vm-stop i{ width:.9em; height:.9em; border-radius:50%; background:#fff;
    box-shadow:inset 0 0 0 2px rgba(0,0,0,.14); }
  .vm-stop.done i{ background:var(--ocean-deep); box-shadow:inset 0 0 0 2px var(--ocean-deep); }
  .vm-stop.now i{ background:var(--ocean-deep);
    box-shadow:inset 0 0 0 2px var(--ocean-deep), 0 0 0 .34em rgba(63, 110, 202,.14); }
  .vm-stop.now{ color:var(--ink); font-weight:650; }
  .vm-ev{ display:flex; gap:.7em; margin-top:.5em; }
  .vm-t{ margin-left:auto; font-size:.85em; color:rgba(10,10,10,.4); }
  .vm-big{ font-size:1.55em; font-weight:730; letter-spacing:-.025em; line-height:1.1; margin-top:.1em; }

  /* 04 · claim */
  .vm-chips{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:.8em; }
  .vm-chip{ padding:.55em .9em; border-radius:999px; font-size:.9em;
    color:rgba(10,10,10,.55); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
  .vm-chip.on{ background:var(--ink); color:#fff; box-shadow:none; font-weight:600; }
  .vm-caret{ text-align:center; color:rgba(10,10,10,.26); font-size:1.05em; line-height:1; }
  .vm-tick{ width:1.7em; height:1.7em; border-radius:50%; background:var(--sage);
    color:#14301F; display:grid; place-items:center; font-size:.85em; font-weight:700; flex:none; }

  /* 05 · exchange */
  .vm-tabs{ display:inline-flex; gap:.3em; padding:.3em; border-radius:999px; background:rgba(0,0,0,.05); }
  .vm-tab{ padding:.45em .95em; border-radius:999px; font-size:.88em; color:rgba(10,10,10,.5); }
  .vm-tab.on{ background:#fff; color:var(--ink); font-weight:650;
    box-shadow:0 4px 12px -6px rgba(0,0,0,.3); }
  .vm-note{ display:flex; align-items:center; gap:.7em; }

  /* 06 · wallet */
  .vm-huge{ font-size:2.95em; font-weight:770; letter-spacing:-.038em; line-height:1;
    margin:.22em 0 .3em; color:var(--ink); }

  @media (max-width:860px){
    .vj-step{ grid-template-columns:40px minmax(0,1fr); }
    .vj-meta, .vj-vis{ grid-column:2; }
    .vj-vis{ margin-top:18px; min-height:236px; }
    .vj-rail{ left:19px; }
    .vj-head{ width:33px; height:37px; margin:-19px 0 0 -15px; }
    .vj-node{ margin-left:13px; }
    .vj-meta p{ max-width:none; }
  }
  @media (prefers-reduced-motion: reduce){
    .vj-meta, .vj-vis{ opacity:1 !important; transform:none !important; }
    .vj-node{ transition:none }
  }

  /* ---------- SOCIAL PROOF / CASE STUDIES ---------- */
  .social{ padding:var(--4xl) 0 var(--3xl); background:var(--paper); color:var(--t-ink); }
  .social-head{ text-align:center; max-width:920px; margin:0 auto; }
  .social-head h2{ font-size:clamp(32px,5vw,58px); font-weight:800; letter-spacing:-.03em; color:var(--t-ink); line-height:1.04; }
  .rotate{ position:relative; display:inline-grid; justify-items:center; vertical-align:bottom; }
  .rotate .rw{ grid-area:1/1; color:var(--ocean-deep); opacity:0; transform:translateY(14px);
    transition:opacity .5s ease, transform .5s ease; white-space:nowrap; }
  .rotate .rw.on{ opacity:1; transform:none; }
  .social-sub{ margin:var(--lg) auto 0; color:var(--t-ink-70); font-size:clamp(16px,1.5vw,19px); max-width:56ch; line-height:1.55; }
  .cases-wrap{ margin-top:var(--2xl); }
  .cases{ display:flex; gap:var(--lg); overflow-x:auto; scroll-snap-type:x mandatory;
    padding:6px 4px var(--md); scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
    /* Cross-dissolve edges · cards melt out instead of cutting hard at the
       clip edge. Fade strength follows scroll position (JS drives the vars):
       zero at a resting end, up to 28px wherever cards continue off-frame —
       a soft edge kiss, not a long burn. */
    --fade-l:0px; --fade-r:28px;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
            mask-image:linear-gradient(90deg,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
  }
  .cases::-webkit-scrollbar{ display:none; }
  .case-card{ scroll-snap-align:start; flex:0 0 300px; height:404px; border-radius:var(--r-media);
    position:relative; overflow:hidden; cursor:default; text-align:left;
    box-shadow:inset 0 0 0 1px var(--di-line-paper), 0 18px 40px rgba(12, 15, 20,.10);
    transition:transform var(--t-transition), box-shadow var(--t-transition); }
  .case-card:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px var(--sky), 0 26px 54px rgba(12, 15, 20,.16); }
  .cc-bg{ position:absolute; inset:0; }
  .cc-bg.p{ background:linear-gradient(155deg,#E9F1FA,#A9D7F2); }
  .cc-bg.m{ background:linear-gradient(155deg,#D9F0E1,#C2E0CA); }
  .cc-bg.d{ background:linear-gradient(155deg,#1b1b1f,#000); }
  .cc-bg.b{ background:linear-gradient(155deg,#FAF6EF,#F1EAE0); }
  .cc-tag{ position:absolute; top:15px; left:15px; display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:11px; letter-spacing:.06em; padding:6px 11px; border-radius:var(--r-pill);
    background:rgba(255,255,255,.6); color:#0E121A; box-shadow:inset 0 0 0 1px var(--di-line-paper), inset 0 1px 0 rgba(255,255,255,.8); }
  .cc-bg.d ~ .cc-tag{ background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px var(--di-line-ink), inset 0 1px 0 rgba(255,255,255,.10); }
  .cc-body{ position:absolute; left:0; right:0; bottom:0; padding:20px; }
  .cc-delta{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .cc-from{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:0.02em; color:rgba(16, 16, 16,.5); text-decoration:line-through; text-decoration-color:rgba(16, 16, 16,.3); font-variant-numeric:tabular-nums; }
  .cc-arrow{ font-size:14px; color:rgba(16, 16, 16,.35); }
  .cc-bg.d ~ .cc-body .cc-from{ color:rgba(255,255,255,.55); text-decoration-color:rgba(255,255,255,.30); }
  .cc-bg.d ~ .cc-body .cc-arrow{ color:rgba(255,255,255,.40); }
  .cc-metric{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#101010; font-variant-numeric:tabular-nums; }
  .cc-bg.d ~ .cc-body .cc-metric{ color:#fff; }
  .cc-metric-lbl{ margin-top:4px; font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:rgba(16, 16, 16,.55); }
  .cc-bg.d ~ .cc-body .cc-metric-lbl{ color:rgba(255,255,255,.60); }
  .cc-quote{ margin-top:10px; font-size:13.5px; line-height:1.4; color:rgba(16, 16, 16,.7); }
  .cc-bg.d ~ .cc-body .cc-quote{ color:rgba(255,255,255,.72); }
  .cc-brand{ margin-top:8px; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.02em; color:rgba(16, 16, 16,.55); }
  .cc-bg.d ~ .cc-body .cc-brand{ color:rgba(255,255,255,.60); }
  .cc-ph{ position:absolute; top:15px; right:15px; font-family:var(--sans); font-size:10px;
    color:rgba(16, 16, 16,.4); }
  .cc-bg.d ~ .cc-ph{ color:rgba(255,255,255,.5); }
  .cases-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--md); margin-top:var(--lg); }
  .case-arrows{ display:flex; gap:10px; }
  .case-arrows button{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--di-fill-paper); box-shadow:inset 0 0 0 1px var(--di-line-paper); color:var(--t-ink);
    transition:transform var(--t-micro), box-shadow var(--t-transition); }
  .case-arrows button:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--sky); }
  .case-arrows button:active{ transform:translateY(0) scale(.96); }
  .logo-strip{ display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; justify-content:center; margin-top:var(--3xl);
    padding-top:var(--2xl); border-top:1px solid var(--rule-on-paper); }
  .logo-strip .ls-lbl{ width:100%; text-align:center; font-family:var(--sans); font-size:11px;
    letter-spacing:.16em; text-transform:uppercase; color:var(--t-ink-35); margin-bottom:var(--xs); }
  .logo-strip .lg{ font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--t-ink-35);
    transition:color var(--t-transition); }
  .logo-strip .lg:hover{ color:var(--t-ink-70); }

  /* ---------- CUSTOMER SUPPORT ---------- */
  .support{ padding:var(--4xl) 0; background:var(--paper); color:var(--t-ink); }
  .support-head{ max-width:740px; }
  .support-head h2{ font-size:clamp(32px,4.6vw,52px); font-weight:800; letter-spacing:-.03em; color:var(--t-ink); line-height:1.05; }
  .support-head h2 .soft{ color:var(--t-ink-55); }
  .support-sub{ margin-top:var(--md); font-size:clamp(16px,1.5vw,19px); color:var(--t-ink-70); max-width:52ch; line-height:1.55; }
  .support-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--lg); margin-top:var(--2xl); align-items:stretch; }
  .sup-card{ border-radius:var(--r-media); padding:26px; min-height:430px; position:relative; overflow:hidden;
    display:flex; flex-direction:column; }
  .sup-card.sky{ background:linear-gradient(160deg,#C8E5F7,#6B8FD6); color:#121721; }
  .sup-card.light{ background:var(--di-fill-paper); box-shadow:inset 0 0 0 1px var(--di-line-paper); color:var(--t-ink); }
  .sup-card.dark{ background:var(--ink-2); color:var(--t-paper); box-shadow:inset 0 0 0 1px var(--di-line-ink); }
  .sup-card h3{ font-size:21px; font-weight:750; letter-spacing:-.02em; margin-bottom:9px; }
  .sup-card .sup-p{ font-size:14px; line-height:1.5; opacity:.9; max-width:30ch; }
  .sup-card.sky .sup-p{ color:#252C3A; }
  .sup-art{ margin-top:auto; }
  /* account-manager avatar block */
  .am-badge{ display:flex; align-items:center; gap:12px; margin-top:var(--xl); }
  .am-ava{ width:54px; height:54px; border-radius:50%; flex:0 0 auto; background:rgba(255,255,255,.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(12, 15, 20,.10); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:18px; color:#121721; }
  .am-meta b{ display:block; font-size:14px; }
  .am-meta span{ font-size:12px; opacity:.7; }
  /* slack thread */
  .slack{ display:flex; flex-direction:column; gap:10px; margin-top:var(--lg); }
  .slack-msg{ display:flex; gap:9px; align-items:flex-start; }
  .slack-msg.me{ flex-direction:row-reverse; }
  .slack-av{ width:26px; height:26px; border-radius:7px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; background:var(--ink); color:#fff; }
  .slack-msg.me .slack-av{ background:var(--sky); color:#121721; }
  .slack-bub{ max-width:74%; padding:10px 13px; border-radius:13px; font-size:12.5px; line-height:1.4;
    background:rgba(0,0,0,.05); color:var(--t-ink); }
  .slack-msg.me .slack-bub{ background:var(--sky); color:#121721; }
  .slack-name{ font-size:10.5px; color:var(--t-ink-35); margin-bottom:3px; font-weight:600; }
  /* transparency ticket (dark card) */
  .ticket{ margin-top:var(--lg); border-radius:12px; background:#fff; color:#101010; padding:15px; box-shadow:0 18px 36px rgba(0,0,0,.4); }
  .ticket-head{ display:flex; align-items:center; gap:10px; margin-bottom:9px; }
  .ticket-dot{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; background:var(--sage); display:flex; align-items:center; justify-content:center; font-size:13px; color:#13361f; }
  .ticket-head b{ font-size:13px; display:block; } .ticket-head span{ font-size:11px; color:rgba(0,0,0,.5); }
  .ticket-body{ font-size:12.5px; line-height:1.45; color:rgba(0,0,0,.7); }
  .ticket-solve{ margin-top:12px; display:flex; align-items:center; gap:8px; font-weight:700; font-size:12px; color:var(--ocean-deep); letter-spacing:.04em; }

  /* Bridge-pattern tri-card · uniform quiet shells, a live app window in each,
     and the pod's cursor caught mid-action — the section's promise, literally.
     (.sup-card styles above stay for the subpages that still use them.) */
  .bsg{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--lg); margin-top:var(--2xl); align-items:stretch; }
  .bs-card{ background:var(--paper-2); border-radius:26px; padding:14px 14px 20px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
    display:flex; flex-direction:column; gap:15px; }
  .bs-win{ position:relative; background:#FFFFFF; border-radius:16px; overflow:hidden;
    box-shadow:0 18px 40px -26px rgba(12, 15, 20,.28), 0 0 0 1px rgba(0,0,0,.05);
    flex:1; display:flex; flex-direction:column; min-height:296px; }
  .bs-bar{ display:flex; align-items:center; gap:5px; padding:11px 14px;
    border-bottom:1px solid rgba(0,0,0,.06); }
  .bs-bar i{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.10); }
  .bs-bar span{ margin-left:8px; font-family:var(--sans); font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--t-ink-35); }
  .bs-body{ padding:16px; display:flex; flex-direction:column; gap:10px; flex:1; justify-content:center; }
  /* window 1 · claims queue */
  .q-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:11px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); }
  .q-row.on{ background:var(--sky-soft); box-shadow:inset 0 0 0 1px rgba(107, 143, 214,.45); }
  .q-meta b{ display:block; font-size:12.5px; letter-spacing:-.01em; color:var(--ink); }
  .q-meta span{ font-size:11px; color:var(--t-ink-55); }
  .q-pill{ font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.07em;
    text-transform:uppercase; padding:5px 9px; border-radius:999px;
    background:var(--sage); color:#14301F; white-space:nowrap; }
  .q-pill.live{ background:var(--ink); color:#fff; }
  /* window 3 · ticket framed as an inbox item on white */
  .bs-ticket{ border-radius:12px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); padding:14px; }
  /* the pod's cursor · pointer + action chip, drifting gently */
  .bs-cursor{ position:absolute; display:flex; align-items:flex-start; z-index:3;
    filter:drop-shadow(0 8px 16px rgba(12, 15, 20,.28));
    animation:bs-drift 5.4s ease-in-out infinite; }
  .bs-cursor svg{ width:18px; height:18px; flex:none; margin-right:-3px; }
  .bs-chip{ margin-top:14px; background:var(--ink); color:#fff; font-size:11px; font-weight:600;
    letter-spacing:-.005em; padding:6px 11px; border-radius:999px; white-space:nowrap; }
  .bs-cursor.c1{ left:34%; top:118px; }
  .bs-cursor.c2{ right:34px; bottom:18px; animation-delay:1.3s; }
  .bs-cursor.c3{ left:26%; bottom:30px; animation-delay:2.2s; }
  @keyframes bs-drift{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-8px,-6px) } }
  .bs-label{ padding:0 8px; }
  .bs-label b{ display:block; font-size:17px; font-weight:750; letter-spacing:-.02em; color:var(--t-ink); }
  .bs-label span{ display:block; margin-top:4px; font-size:13px; line-height:1.5;
    color:var(--t-ink-55); max-width:36ch; }
  @media (max-width:960px){
    .bsg{ grid-template-columns:1fr; }
    .bs-win{ min-height:250px; }
  }
  @media (prefers-reduced-motion:reduce){ .bs-cursor{ animation:none } }

  @media (max-width:860px){
    .support-grid{ grid-template-columns:1fr; }
    .case-card{ flex-basis:78vw; height:380px; }
  }


  /* ---- Globe B hero (centered backdrop + particle dissolve) ---- */
  .hero.hero-globe{ position:relative; min-height:calc(100svh + 74px); overflow:hidden; display:flex; align-items:center;
    justify-content:center; text-align:center; padding:110px 24px; background:#000;
    /* the sticky nav occupies ~74px of flow; pull the hero under it so the
       flex-centered copy lands on the true viewport center. the +74px on
       min-height restores the flow footprint the negative margin removes, so
       the next section seats exactly at the fold (no peek at rest). */
    margin-top:-74px; }

  /* ══ Orbit hero · stamp cards in every merchant's colour ══
     The white-label story told at the top of the page: the stamp takes any
     brand, so six colourways float around the promise. Idle float is CSS;
     cursor parallax and the close-range lean are written by JS onto .oc. */
  .hero.hero-globe .orbit-wrap{ position:absolute; inset:74px 0 -74px; z-index:0; pointer-events:none;
    perspective:1100px; perspective-origin:50% 46%; }
  .orbit-ring{ position:absolute; left:50%; top:47%; width:min(94vw,1340px); height:auto;
    transform:translate(-50%,-50%) rotateX(14deg); opacity:.9; }
  /* soft sky bloom behind the headline, in place of the globe's atmosphere */
  .orbit-wrap::before{ content:""; position:absolute; left:50%; top:44%; width:1020px; height:640px;
    transform:translate(-50%,-50%); pointer-events:none;
    background:radial-gradient(48% 44% at 50% 50%, rgba(107,143,214,.16), rgba(107,143,214,.05) 55%, rgba(107,143,214,0) 78%); }
  .oc{ position:absolute; width:112px; height:132px; margin:-66px 0 0 -56px;
    transform-style:preserve-3d; will-change:transform;
    transform:rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
  .oc-bob{ width:100%; height:100%; border-radius:22px; display:grid; place-items:center;
    background:linear-gradient(152deg, color-mix(in srgb, var(--c) 72%, #FFFFFF) 0%, var(--c) 42%, color-mix(in srgb, var(--c) 78%, #000000) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 22px -12px rgba(0,0,0,.5),
      0 24px 44px -18px rgba(0,0,0,.65), 0 0 54px -10px color-mix(in srgb, var(--c) 55%, transparent);
    animation:ocBob var(--dur,10s) ease-in-out infinite; }
  .oc:nth-child(even) .oc-bob{ animation-delay:-3.1s; }
  @keyframes ocBob{ 0%,100%{ transform:translateY(0) rotate(0deg); }
    34%{ transform:translateY(-9px) rotate(1.4deg); }
    68%{ transform:translateY(4px) rotate(-1.1deg); } }
  .oc-mark{ width:62%; height:auto; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
  .oc{ --stamp-body:color-mix(in srgb, var(--c) 22%, #FFFFFF);
       --stamp-eye:color-mix(in srgb, var(--c) 82%, #000000); }
  /* twinkles */
  .tw{ position:absolute; width:14px; height:14px; opacity:0;
    background:radial-gradient(circle, rgba(250,246,239,.95) 0%, rgba(250,246,239,0) 62%),
      linear-gradient(0deg, transparent 45%, rgba(250,246,239,.9) 50%, transparent 55%),
      linear-gradient(90deg, transparent 45%, rgba(250,246,239,.9) 50%, transparent 55%);
    animation:twk 5.2s ease-in-out infinite; animation-delay:var(--td,0s); }
  .tw-sm{ width:9px; height:9px; }
  @keyframes twk{ 0%,72%,100%{ opacity:0; transform:scale(.5) rotate(0deg); }
    82%{ opacity:.95; transform:scale(1) rotate(24deg); }
    92%{ opacity:0; transform:scale(.55) rotate(40deg); } }
  @media (max-width:900px){
    .oc{ width:74px; height:88px; margin:-44px 0 0 -37px; }
    .oc.c-blue, .oc.c-purple{ display:none; }
    /* four corners only, clear of the copy column */
    .oc.c-rose{ left:11% !important; top:11% !important; }
    .oc.c-green{ left:89% !important; top:10% !important; }
    .oc.c-gold{ left:15% !important; top:88% !important; }
    .oc.c-orange{ left:85% !important; top:89% !important; }
    .orbit-ring{ top:48%; width:150vw; } }
  @media (prefers-reduced-motion:reduce){
    .oc-bob{ animation:none; } .tw{ animation:none; opacity:.5; } }

  .hero.hero-globe::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    /* scrim stops match the #0C0C0C base exactly (fading into itself), so there is
       no tonal mismatch — and the film grain sits ABOVE this layer to dither the
       ramps, which is what kills visible banding on the dark field */
    /* was a 92%-black disc across 70x62% of the hero, which meant the sphere only
       ever showed at the edges. Tightened onto the copy column so the globe reads
       as an object and the type still sits on calm ink. */
    background:radial-gradient(52% 40% at 50% 48%, rgba(0,0,0,.88), rgba(0,0,0,.60) 46%, rgba(0,0,0,.22) 72%, rgba(0,0,0,0) 92%),
              linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0) 24%, rgba(0,0,0,0) 66%, #000 100%); }
  .hero.hero-globe .hero-center{ position:relative; z-index:2; max-width:960px; margin:0 auto;
    will-change:opacity,transform; }
  /* local plate: the wide scrim protects the block, this keeps the two text
     runs themselves off the dot field without darkening the whole hero */
  .hero.hero-globe .hero-center::before{ content:""; position:absolute; z-index:-1;
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:132%; height:126%; pointer-events:none;
    background:radial-gradient(50% 48% at 50% 50%, rgba(0,0,0,.72), rgba(0,0,0,.34) 58%, rgba(0,0,0,0) 84%); }
  /* the hard <br> stranded "every" on its own line once the badge came out —
     let it balance instead so the two lines stay even at any width */
  .hero.hero-globe .hero-title{ margin:0 auto; max-width:15ch; text-wrap:balance; }
  /* Balanced two-line subcopy · no orphaned "24 hours." third line. */
  .hero.hero-globe .hero-sub{ margin:20px auto 0; max-width:620px; text-wrap:balance; }
  /* Grouped rhythm · message block (badge/title/sub) → CTAs → proof row,
     with gaps that widen as importance falls: 20 → 36 → 44. */
  .hero.hero-globe .hero-cta{ justify-content:center; margin:36px 0 0; }
  .hero.hero-globe .trust-row{ justify-content:center; margin-top:44px; }
  .hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px;
    background:rgba(250, 246, 239,.05); box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.30);
    font-size:13px; color:var(--t-paper); margin-bottom:24px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); }
  .hero-badge .dot{ width:7px;height:7px;border-radius:50%;background:var(--sage-deep);box-shadow:0 0 0 4px rgba(151,211,174,.18); }
  .hero-badge .spark{ color:var(--sky); }

  /* ---- hero controls + proof · glass ---------------------------------
     The pair used to be a filled pill next to a bare text link — two
     different objects at two different heights. Both are pills now, one
     solid and one glass, so they read as a considered choice, and the three
     numbers were 13px at 35% white: the most persuasive thing in the hero,
     styled like fine print. */
  /* Two fixes for the same thing: the arrow chip makes the secondary 66px tall
     while the arrowless primary collapses to 51px. Stretch handles the desktop
     row; on mobile the row becomes a COLUMN, where align-items governs width
     rather than height, so the pills also carry a shared min-height. */
  .hero.hero-globe .hero-cta{ align-items:stretch; gap:14px; }
  .hero.hero-globe .hero-cta .btn{ min-height:66px; }
  .hero.hero-globe .btn-glass{
    padding:16px 26px; border-radius:var(--r-pill);
    font-size:16px; font-weight:640; color:var(--paper);
    background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045));
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 0 0 1px rgba(255,255,255,.13),
      0 18px 34px -24px rgba(0,0,0,.95); }
  .hero.hero-globe .btn-glass:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.21), rgba(255,255,255,.09)); }
  .hero.hero-globe .btn-glass .arrow{ transition:transform var(--t-micro); }
  .hero.hero-globe .btn-glass:hover .arrow{ transform:translateX(3px); }
  /* primary keeps its bezel ring — this only adds the lit top edge */
  .hero.hero-globe .btn-sky{
    padding:16px 28px; font-size:16px;
    background-image:linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0) 56%); }

  .hero.hero-globe .trust-row.hero-chips{ gap:12px; margin-top:40px; }
  .hero-chips .chip{
    display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    padding:13px 22px; border-radius:16px; text-align:center;
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
    backdrop-filter:blur(16px) saturate(1.2);
    -webkit-backdrop-filter:blur(16px) saturate(1.2);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 0 0 1px rgba(255,255,255,.10),
      0 20px 38px -28px rgba(0,0,0,.95); }
  .hero-chips .chip b{
    font-size:21px; font-weight:760; letter-spacing:-.025em; line-height:1;
    color:var(--paper); font-variant-numeric:tabular-nums; }
  .hero-chips .chip.is-mint b{ color:var(--sage); }
  .hero-chips .chip i{
    font-style:normal; font-size:11.5px; font-weight:500; letter-spacing:.05em;
    color:rgba(250, 246, 239,.50); }


  /* ══ SKY HERO · Posty Sky wash, ink type, cloud cover ══
     The hero opens as sky rather than ink: the brand colour doing what it
     says on the tin. The section carries .is-paper/.is-sky so the nav's
     hit-test probe themes the island's wordmark and menus correctly. */
  .hero.hero-globe{
    background:linear-gradient(180deg, #E9F1FA 0%, #CDE6F7 48%, #A9D7F2 100%); }
  .hero.hero-globe::after{
    /* the ink scrim becomes a soft light vignette that lifts the copy */
    background:radial-gradient(52% 40% at 50% 48%, rgba(255,255,255,.55), rgba(255,255,255,.28) 46%, rgba(255,255,255,0) 78%),
               linear-gradient(180deg, rgba(233,241,250,.85), rgba(233,241,250,0) 22%); }
  .hero.hero-globe .hero-center::before{
    background:radial-gradient(50% 48% at 50% 50%, rgba(240,247,253,.80), rgba(240,247,253,.38) 58%, rgba(240,247,253,0) 84%); }
  .hero.hero-globe .hero-title{ color:var(--t-ink); }
  .hero.hero-globe h1.hero-title .accent{ color:var(--ocean-deep); }
  .hero.hero-globe .hero-sub{ color:rgba(12,12,12,.72); }
  /* (superseded by the site-wide ref pills below) */
  .hero.hero-globe .hero-cta .btn-glass{
    color:var(--t-ink);
    background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(107,143,214,.30),
      0 18px 34px -24px rgba(31,62,128,.55); }
  .hero.hero-globe .hero-cta .btn-glass:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.60)); }
  /* orbit furniture re-inked for the light field */
  .orbit-ring ellipse{ stroke:rgba(12,12,12,.22); }
  .orbit-ring circle{ fill:var(--ocean-deep); opacity:.55; }
  .orbit-wrap::before{
    background:radial-gradient(48% 44% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,.20) 55%, rgba(255,255,255,0) 78%); }
  .oc-bob{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 22px -12px rgba(0,0,0,.35),
      0 22px 40px -18px rgba(31,62,128,.42), 0 0 54px -10px color-mix(in srgb, var(--c) 42%, transparent); }
  .tw{
    background:radial-gradient(circle, rgba(63,110,202,.85) 0%, rgba(63,110,202,0) 62%),
      linear-gradient(0deg, transparent 45%, rgba(63,110,202,.8) 50%, transparent 55%),
      linear-gradient(90deg, transparent 45%, rgba(63,110,202,.8) 50%, transparent 55%); }

  /* ── clouds ── */
  .cl{ display:block; overflow:visible; aspect-ratio:220/124; height:auto; }
  .cl use{ fill:#FFFFFF; }
  .cloud-cover{ position:absolute; inset:0; z-index:5; pointer-events:none; }
  .cl-bank{ position:absolute; top:0; bottom:0; width:120%; will-change:transform; }
  #cloudL{ left:-20%; }
  #cloudR{ right:-20%; }
  .cl-bank .cl{ position:absolute; filter:drop-shadow(0 18px 30px rgba(63,110,202,.18)); }
  .cl-bank .b1{ width:96%; top:-14%; }
  .cl-bank .b2{ width:110%; top:22%; }
  .cl-bank .b3{ width:92%; top:58%; }
  .cl-bank .b4{ width:74%; top:34%; }
  #cloudL .b1{ left:-4%; } #cloudL .b2{ left:-14%; } #cloudL .b3{ left:2%; } #cloudL .b4{ left:38%; }
  #cloudR .b1{ right:-6%; } #cloudR .b2{ right:-16%; } #cloudR .b3{ right:0%; } #cloudR .b4{ right:36%; }
  #cloudR .cl{ transform:scaleX(-1); }
  /* ambient · three small clouds that live in the sky and never leave */
  .cl-ambient{ position:absolute; inset:74px 0 0 0; z-index:0; pointer-events:none; overflow:hidden; }
  .cl-ambient .cl{ position:absolute; opacity:.9; }
  .cl-ambient .a1{ width:190px; top:14%; left:6%;  animation:clDrift 86s linear infinite; }
  .cl-ambient .a2{ width:120px; top:9%;  left:64%; animation:clDrift 112s linear infinite reverse; opacity:.75; }
  .cl-ambient .a3{ width:150px; top:70%; left:78%; animation:clDrift 98s linear infinite; opacity:.8; }
  @keyframes clDrift{
    0%{ transform:translateX(0); } 50%{ transform:translateX(9vw); } 100%{ transform:translateX(0); } }
  @media (max-width:900px){
    .cl-ambient .a3{ display:none; }
    .cl-bank .cl{ filter:none; } }
  @media (prefers-reduced-motion:reduce){
    .cl-ambient .cl{ animation:none; }
    /* the reveal driver parks the banks open; if JS never runs they must not
       blind the page, so the no-JS/reduced default is parted */
    #cloudL{ transform:translate3d(-118vw,-4vh,0); }
    #cloudR{ transform:translate3d(118vw,-4vh,0); } }


  /* ══ CARTOON PASS · flat fills, ink lines, sticker shadows ══ */
  .hero.hero-globe{
    background:linear-gradient(180deg, #8CC4EF 0%, #9DCFF2 46%, #A9D7F2 74%, #C2E2F7 100%); }
  .hero.hero-globe::after{
    background:radial-gradient(50% 38% at 50% 47%, rgba(255,255,255,.34), rgba(255,255,255,.12) 52%, rgba(255,255,255,0) 76%); }
  .hero.hero-globe .hero-center::before{ background:none; }
  .hero.hero-globe .hero-sub{ color:rgba(12,12,12,.78); }
  /* cards · drawn flat: sticker rim, ink line, hard offset shadow */
  .oc{ --stamp-body:#FDF6EE; --stamp-eye:#1A1A1A; --stamp-line:#1A1A1A; }
  /* the coloured card shell is gone — the drawn parcel is the whole object,
     so the sticker shadow moves onto the artwork itself */
  .oc-bob{ background:none; border-radius:0; box-shadow:none; }
  /* the hero parcels are the illustrated asset now — the drawn SVG box it
     replaced carried its own shadow polygon, so the sticker shadow moves back
     onto the element as a filter */
  .oc-parcel{ width:104%; height:auto; max-width:none; display:block;
    filter:drop-shadow(7px 10px 0 rgba(20,45,90,.15)); }
  /* four parcel sizes from the vector set · widths tuned so each reads at a
     similar visual mass: tall box narrower, flat box wider, cube as drawn */
  .oc-parcel[data-a="k33"]{ width:112%; margin-left:-4%; }
  .oc-parcel[data-a="k32"],.oc-parcel[data-a="k36"]{ width:74%; margin-left:15%; margin-top:-14%; }
  .oc-parcel[data-a="k34"]{ width:128%; margin-left:-12%; margin-top:12%; }
  /* the drawing already carries its own perspective — the JS-composed
     rotateX/Y warped the box geometry, so only the flat spin survives */
  .oc.c-rose, .oc.c-green, .oc.c-blue, .oc.c-purple, .oc.c-gold, .oc.c-orange{
    --rx:0deg; --ry:0deg; }
  /* flatter tilt · the drawn look wants 2D. JS composes rotateX/Y from these. */
  .oc.c-rose{   --rx:4deg;  --ry:-6deg; }
  .oc.c-green{  --rx:5deg;  --ry:5deg;  }
  .oc.c-blue{   --rx:3deg;  --ry:-9deg; }
  .oc.c-purple{ --rx:4deg;  --ry:8deg;  }
  .oc.c-gold{   --rx:-4deg; --ry:-7deg; }
  .oc.c-orange{ --rx:5deg;  --ry:6deg;  }
  /* clouds · crisp, flat, no blur */
  .cl-bank .cl{ filter:none; }
  .cl-ambient .cl{ opacity:1; }
  .cl-ambient .a1{ width:230px; }
  .cl-ambient .a2{ width:130px; top:8%; }
  .cl-ambient .a3{ width:180px; }
  /* orbit ring · dotted, deeper blue */
  .orbit-ring ellipse{ stroke:rgba(46, 99, 200,.50); stroke-width:2.2;
    stroke-dasharray:0.1 10; stroke-linecap:round; }
  .orbit-ring circle{ fill:#2E63C8; opacity:.75; }
  /* sparkles · real four-point stars */
  .tw{
    background:var(--twc,#FFFFFF);
    clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    width:18px; height:18px; }
  .tw-sm{ width:11px; height:11px; }
  .tw.t-pink{ --twc:#E4BFD3; }
  .tw.t-gold{ --twc:#F2D98B; }
  @keyframes twk{ 0%,64%,100%{ opacity:0; transform:scale(.35) rotate(0deg); }
    76%{ opacity:1; transform:scale(1) rotate(14deg); }
    90%{ opacity:0; transform:scale(.4) rotate(26deg); } }
  /* CTAs follow the site-wide ref pills; only the text colour needs restating
     against the old dark-glass rule that still sits earlier in the file. */
  .hero.hero-globe .hero-cta .btn-glass{ color:var(--t-ink) !important;
    background:rgba(255,255,255,.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:inset 0 0 0 1.5px rgba(107,143,214,.45), 0 12px 26px -16px rgba(31,62,128,.35); }
  .hero.hero-globe .hero-cta .btn-glass:hover{ background:rgba(255,255,255,.95); }
  .hero.hero-globe .btn-sky{ background:#0F0F10; color:#FFFFFF;
    background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%); }
  .hero.hero-globe .btn-sky .arrow{ background:#FFFFFF; color:#0F0F10; }
  /* perforated seam · the sheet's top edge is a row of stamp scallops */
  .sw-cover{ border-radius:0 !important; box-shadow:none !important; }
  .sw-cover::before{
    content:""; position:absolute; left:0; right:0; top:-13px; height:14px;
    background:radial-gradient(circle 14px at 14px 14px, #FAF6EF 13.4px, rgba(0,0,0,0) 14px);
    background-size:28px 14px; background-repeat:repeat-x; }
  @media (max-width:760px){ .sw-cover{ border-radius:0 !important; } }
  /* the journey sheet opens with the blue wash, so its lip must be cut from
     the same colour — cream scallops read as a foreign white strip there.
     #D2E5F6 = the wash (rgba(169,213,253,.5)) blended over the paper. */
  .journey.sw-cover::before{
    background:radial-gradient(circle 14px at 14px 14px, #D2E5F6 13.4px, rgba(0,0,0,0) 14px);
    background-size:28px 14px; background-repeat:repeat-x; }


  /* ══ CTA pills · ink pill / white pill, round arrow chips ══
     Primary: ink pill, white text, WHITE chip with ink arrow.
     Secondary: white pill, sky hairline, ink text, ROYAL chip with white arrow. */
  .btn{ padding:15px 9px 15px 26px; gap:14px; font-weight:700; }
  .btn .arrow{
    display:inline-grid; place-items:center;
    width:34px; height:34px; border-radius:999px; flex:none; }
  .btn-sky, .btn-ink, .btn-paper{
    background:#0F0F10; color:#FFFFFF;
    background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%);
    box-shadow:0 14px 30px -14px rgba(10, 22, 44,.55), 0 3px 8px -4px rgba(10,22,44,.3); }
  .btn-sky:hover, .btn-ink:hover, .btn-paper:hover{ background-color:#1C1C1E; }
  .btn-sky .arrow, .btn-ink .arrow, .btn-paper .arrow{ background:#FFFFFF; color:#0F0F10; }
  .btn-glass, .btn-ghost-paper{
    background:rgba(255,255,255,.75); color:var(--t-ink);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:0;
    box-shadow:inset 0 0 0 1.5px rgba(107,143,214,.45),
      0 12px 26px -16px rgba(31,62,128,.35); }
  .btn-glass:hover, .btn-ghost-paper:hover{ background:rgba(255,255,255,.95); }
  .btn-glass .arrow, .btn-ghost-paper .arrow{ background:#2E63C8; color:#FFFFFF; }
  /* buttons without an arrow chip keep even padding */
  .btn:not(:has(.arrow)){ padding:15px 28px; }

  @media (max-width:620px){
    .hero.hero-globe .trust-row.hero-chips{ gap:8px; }
    .hero-chips .chip{ padding:10px 14px; }
    .hero-chips .chip b{ font-size:18px; }
    .hero-chips .chip i{ font-size:10.5px; }
  }
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
    .hero.hero-globe .btn-glass, .hero-chips .chip{ background:rgba(255,255,255,.10); }
    .hero-cta .btn-sky{ background-image:linear-gradient(180deg,
      rgba(205, 233, 250,1), rgba(172, 214, 240,1)); }
  }

  /* ---- hero CTAs as glass -----------------------------------------------
     Secondary: option B — the .calc-card recipe (158deg white->pink diagonal,
     36px blur, bright rim, inner bottom bloom) run at low opacity so it reads
     as the same material as the primary rather than a different button.
     Primary: option C — same glass, but the glow is thrown OUTSIDE the pill
     onto the plate, so the button is lit from behind instead of filled. Bloom
     dialled back 27% from the option sheet (.50/.24/.85 -> .365/.175/.62).
     isolation:isolate pins the stacking context so the z-index:-1 bloom paints
     identically at rest and on hover, where the lift transform would otherwise
     create a new context and move it. */
  .hero.hero-globe .hero-cta .btn-glass{
    color:var(--paper);
    background:linear-gradient(158deg,
      rgba(255,255,255,.16) 0%, rgba(233, 241, 250,.09) 55%, rgba(169, 215, 242,.07) 100%);
    backdrop-filter:blur(36px) saturate(1.55);
    -webkit-backdrop-filter:blur(36px) saturate(1.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.42),
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 -18px 30px -20px rgba(169, 215, 242,.30),
      0 30px 70px -34px rgba(107, 143, 214,.42); }
  .hero.hero-globe .hero-cta .btn-glass:hover{ background:rgba(255,255,255,.95); }

  .hero.hero-globe .hero-cta .btn-sky{
    position:relative; isolation:isolate;
    color:#FFFFFF;
    background:#0F0F10;
    background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:0 14px 30px -14px rgba(10, 22, 44,.55), 0 3px 8px -4px rgba(10,22,44,.3); }
  /* the bloom — a light source on the plate behind the glass */
  .hero.hero-globe .hero-cta .btn-sky::before{
    content:""; position:absolute; z-index:-1;
    left:-42%; right:-42%; top:-160%; bottom:-190%;
    border-radius:inherit; transform-origin:50% 50%;
    background:radial-gradient(50% 50% at 50% 50%,
      rgba(169, 215, 242,.365) 0%, rgba(107, 143, 214,.175) 38%, rgba(107, 143, 214,0) 72%);
    filter:blur(14px); pointer-events:none;
    /* The pulse lives on the BLOOM, never on the pill — scaling the button
       jitters the text and shifts the row. First pass ran .80->1 over 6.4s,
       which measured out at 15 RGB levels max / 4 mean: about one level per
       second, i.e. below perception. Widened to .48->1 with a real scale
       swing and shortened to 3.4s so the ramp is steep enough to register. */
    animation:ctaBreathe 3.4s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes ctaBreathe{
      0%   { opacity:.48; transform:scale(.92); }
     46%  { opacity:1;    transform:scale(1.12); }
    100%  { opacity:.48; transform:scale(.92); } }

  /* the bezel ring is off — the bloom owns the edge */
  .hero.hero-globe .hero-cta .btn-bezel::after{ display:none; }

  /* hover takes over — hold the bloom at full and stand the ambient cues down */
  .hero.hero-globe .hero-cta .btn-sky:hover::before{
    animation-play-state:paused; opacity:1; transform:scale(1.12); }
  @media (prefers-reduced-motion:reduce){
    .hero.hero-globe .hero-cta .btn-sky::before{ animation:none; opacity:1; }
    .hero.hero-globe .hero-cta .btn-bezel::after{ animation:none; background:none; } }
  .hero.hero-globe .hero-cta .btn-sky:hover{ background-color:#1C1C1E; }


  /* ---- section halftone bridges (subtle) ----
     One reusable strip for every color boundary on the page: the incoming
     section's color dissolves in as a growing dot matrix over the outgoing
     section's color. Configure per-strip via --st-from / --st-to. */
  .sec-trans{ display:none; position:relative; height:clamp(64px,9vh,110px); background:var(--st-from,#000); overflow:hidden; margin-top:-1px; }
  .sec-trans canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .sec-trans::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, transparent 40%, var(--st-to,var(--paper)) 100%); }


  /* ===== Products PINNED tour (immersive scroll) · paper ===== */
  .products-pinned{ background:var(--paper); color:var(--t-ink-70); padding:var(--4xl) 0; }
  .pin-head{ text-align:center; max-width:720px; margin:0 auto var(--lg); padding:0 24px; }
  .pin-head h2{ color:#101010; font-weight:800; letter-spacing:-.03em; font-size:clamp(32px,4.4vw,54px); margin-top:12px; line-height:1.04; }
  .pin-head h2 .soft{ color:var(--t-ink-55); }
  .pin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  /* Lead-in/out padding lets the first and last copy blocks physically line up
     with the sticky panel's center; the 55vh blocks keep neighbours close. */
  .pin-copy{ padding:16vh 0; }
  .pin-block{ min-height:55vh; display:flex; flex-direction:column; justify-content:center; max-width:44ch; }
  .pin-block .num{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ocean-deep); }
  .pin-block h3{ color:#101010; font-weight:800; letter-spacing:-.025em; font-size:clamp(26px,3.2vw,42px); line-height:1.06; margin:10px 0 14px; }
  .pin-block .desc{ font-size:17px; line-height:1.6; color:var(--t-ink-70); }
  .pin-block ul{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
  .pin-block li{ list-style:none; display:flex; gap:10px; font-size:15px; color:var(--t-ink-70); align-items:flex-start; }
  .pin-block .ck{ margin-top:2px; }
  .pin-block b{ color:#101010; font-weight:650; }
  .pin-visual{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
  .pin-stage{ position:relative; width:100%; max-width:440px; height:440px; }
  .pin-dots{ position:absolute; top:-30px; left:0; display:flex; gap:7px; }
  .pin-dots i{ width:24px; height:4px; border-radius:2px; background:rgba(16, 16, 16,.12); transition:background .4s; }
  .pin-dots i.on{ background:var(--sky); }
  /* Console panels · faithful mirrors of the live merchant dashboard:
     solid white card on paper, 14px radius, ink hairline — then the product's
     own components inside (ink hero stat, mint trend chip, KPI tiles,
     sparklines, data rows with ring badges). Tokens lifted from the real
     dashboard build (covrlydashboardpreview). */
  .pin-card{ position:absolute; inset:0; opacity:0; transform:translateY(34px) scale(.96);
    transition:opacity .3s ease, transform .45s cubic-bezier(.32,.72,0,1);
    border-radius:14px; background:#fff;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04), 0 22px 54px rgba(12, 15, 20,.10);
    padding:18px;
    display:flex; flex-direction:column;
  }
  /* Incoming panel waits 100ms so the outgoing one is mostly gone — no
     double-exposure mid-swap. */
  .pin-card.on{ opacity:1; transform:none; z-index:2;
    transition:opacity .34s ease .1s, transform .55s cubic-bezier(.32,.72,0,1) .1s; }
  /* the card just left behind recedes upward — Route-style deck depth */
  .pin-card.was{ opacity:.4; transform:translateY(-20px) scale(.95); z-index:1;
    transition:opacity .5s ease .05s, transform .6s cubic-bezier(.32,.72,0,1); }

  .pcx-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .pcx-lbl{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--t-ink-55); }
  .pcx-period{ font-family:var(--sans); font-size:11px; color:var(--t-ink-35); }
  .pcx-trend{ display:inline-flex; align-items:center; gap:5px; background:var(--sage); color:var(--ink);
    border-radius:999px; padding:3px 9px; font-family:var(--sans); font-size:11px; font-weight:500; }
  /* Ink hero stat · the dashboard's spotlight metric */
  .pcx-hero{ background:#101010; border-radius:10px; padding:14px 16px 12px; }
  .pcx-hero .pcx-lbl{ color:rgba(255,255,255,.55); }
  .pcx-hero-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .pcx-hero-num{ font-family:var(--sans); font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1; color:#fff; font-feature-settings:"tnum"; }
  .pcx-spark{ display:block; width:100%; height:22px; margin-top:10px; }
  .pcx-spark polyline{ fill:none; stroke:var(--sage-deep); stroke-width:1.6; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
  .pcx-spark.sky polyline{ stroke:var(--ocean); }
  /* KPI tiles */
  .pcx-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
  .pcx-tile{ border-radius:10px; background:#fff; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); padding:11px 13px 10px; }
  .pcx-tile .pcx-num{ font-family:var(--sans); font-size:24px; font-weight:700; letter-spacing:-.02em; color:#101010; margin-top:4px; font-feature-settings:"tnum"; }
  .pcx-tile .pcx-num.mint{ color:var(--sage-deep); }
  /* Data rows · dashboard table anatomy at widget scale */
  .pcx-table{ margin-top:6px; }
  .pcx-tr{ display:flex; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid rgba(0,0,0,.08); font-size:13px; color:#101010; }
  .pcx-tr:last-child{ border-bottom:0; }
  .pcx-tr b{ font-weight:600; color:#101010; white-space:nowrap; }
  .pcx-tr .mono{ font-family:var(--sans); font-size:12.5px; color:var(--t-ink-55); font-feature-settings:"tnum"; white-space:nowrap; }
  .pcx-tr .amt{ margin-left:auto; font-family:var(--sans); font-size:13px; color:#101010; font-feature-settings:"tnum"; white-space:nowrap; }
  /* Ring badges · the console's status pills (colored ring + soft glow) */
  .pcx-badge{ display:inline-flex; align-items:center; gap:5px; font-family:var(--sans);
    font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
    padding:3px 8px; border-radius:999px; background:#fff; white-space:nowrap; }
  .pcx-badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.8; }
  .pcx-badge.g{ color:#1A6B3E; box-shadow:inset 0 0 0 1px rgba(55,172,106,.48), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px -5px rgba(55,172,106,.55), 0 1px 2px rgba(0,0,0,.05); }
  .pcx-badge.v{ color:#5A43B2; box-shadow:inset 0 0 0 1px rgba(142,118,227,.48), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px -5px rgba(142,118,227,.55), 0 1px 2px rgba(0,0,0,.05); }
  .pcx-badge.a{ color:#87540D; box-shadow:inset 0 0 0 1px rgba(224,151,47,.48), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px -5px rgba(224,151,47,.55), 0 1px 2px rgba(0,0,0,.05); }
  .pcx-badge.t{ color:#0E6B63; box-shadow:inset 0 0 0 1px rgba(43,169,156,.48), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px -5px rgba(43,169,156,.55), 0 1px 2px rgba(0,0,0,.05); }
  /* Big number block + pinned footer stat */
  .pcx-big .pcx-num{ font-family:var(--sans); font-size:34px; font-weight:800; letter-spacing:-.03em; color:#101010; font-feature-settings:"tnum"; }
  .pcx-big .pcx-sub{ font-size:12px; color:var(--t-ink-55); margin-top:2px; }
  .pcx-foot{ margin-top:auto; display:flex; align-items:baseline; gap:10px; padding-top:12px; border-top:1px solid rgba(0,0,0,.08); }
  .pcx-foot .pcx-num{ font-family:var(--sans); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--sage-deep); font-feature-settings:"tnum"; }
  .pcx-foot .pcx-sub{ font-size:12px; line-height:1.45; color:var(--t-ink-55); }
  .pcx-foot .pcx-sub b{ color:#101010; font-weight:600; }
  @media(max-width:860px){
    .pin-grid{ grid-template-columns:1fr; gap:24px; }
    .pin-block{ min-height:auto; padding:30px 0; }
    .pin-visual{ position:relative; height:auto; margin-bottom:40px; }
    .pin-stage{ height:400px; }
    .pin-card{ position:relative; opacity:1; transform:none; margin-bottom:16px; }
    .pin-card:not(.on){ display:none; }
  }

  /* ===== Demo capture · modal popup · Calendly-style host + calendar ===== */
  /* ===== Posty · Posty AI assistant (front-end mock; answers use real site facts) ===== */
  /* ---- Posty launcher · circle ------------------------------------------
     Back to the original FAB geometry — 56px black disc, pink hairline ring,
     mint status dot at the corner — but carrying the two-frame avatar and the
     wave/idle motion from the chip handoff. The labelled chip was too much
     furniture in the corner. */
  .covy-dock{ position:fixed; right:22px; bottom:22px; z-index:28; }
  /* The cloud IS the shell — no tile, no disc behind it. Posty is drawn in
     black outline, so he needs a light surface to read against, and a cloud
     gives him one while being a shape the logo can never be. */
  .covy-launch{
    position:relative; display:flex; align-items:center; justify-content:center;
    width:56px; height:56px;
    background:none; border-radius:0; box-shadow:none;
    cursor:pointer; text-decoration:none;
    transition:transform .18s ease; }
  .covy-launch:hover{ transform:translateY(-2px) scale(1.05); }
  /* Paint on the <use>, not the path: document CSS cannot reach into the shadow
     tree a <use> builds, and fill is inherited so it passes through. */
  .covy-puff{ position:absolute; inset:0; width:100%; height:100%; z-index:1;
    overflow:visible; filter:drop-shadow(0 5px 12px rgba(31, 62, 128,.30)); }
  .covy-puff use{ fill:url(#covyPuffFill); }
  .covy-launch:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; }

  /* Rounded square, not a circle: Posty IS a square stamp, so a circular mask
     clipped his perforated edge and cut the raised hand off at the corner. */
  .covy-av{
    position:relative; width:56px; height:56px; flex:none;
    background:transparent; transform-origin:50% 85%; }
  /* Sized in PER CENT, not by inset. An absolutely-positioned <img> with
     width:auto resolves to its INTRINSIC width, and the global img{max-width:100%}
     then clamps it to the container — so the inset box was ignored entirely and
     he spilled over the cloud's lobes. */
  .covy-av img, .covy-head-av img{
    position:absolute; left:17%; top:14%; width:66%; height:66%;
    object-fit:contain; z-index:2; }
  /* Framing dial — scale and translateY are the only values to touch. */
  .covy-av img{ transform:none; transition:opacity .18s ease; }
  /* the raised arm reaches further left than the resting bust — more room for it */
  /* the wave frame is scaled down further to clear the raised arm, so it needs
     more of a push than the rest frame to close the same gap — 5% -> 7% */
  .covy-av .covy-wave{ opacity:0; }
  .covy-av.is-waving .covy-wave{ opacity:1; }
  .covy-av.is-waving .covy-rest{ opacity:0; }

  /* Bottom-right lobe. Top-right is where his raised hand goes in the wave
     state, and the dot sat right on top of it. */
  .covy-live{
    position:absolute; bottom:6px; right:5px; width:10px; height:10px; z-index:3;
    border-radius:50%; background:var(--sage-deep);
    box-shadow:0 0 0 2.5px #FFFFFF; }

  body:has(#covy.is-open) .covy-dock{ opacity:0; pointer-events:none; }
  @media (max-width:600px){
    .covy-dock{ right:14px; bottom:14px; }
    .covy-launch{ width:52px; height:52px; }
    .covy-av{ width:42px; height:42px; } }
  @media (prefers-reduced-motion:reduce){
    .covy-launch, .covy-av img{ transition-duration:.01ms; } }
  .covy-modal{ display:block; padding:0; overflow:hidden; }
  .covy-panel{ position:absolute; right:24px; bottom:24px; z-index:1;
    width:min(400px, calc(100vw - 32px)); max-height:min(620px, calc(100svh - 48px));
    display:flex; flex-direction:column; background:var(--paper); color:var(--t-ink);
    border-radius:22px; overflow:hidden; box-shadow:0 40px 90px -30px rgba(12, 15, 20,.55);
    transform:translateY(14px) scale(.98); transform-origin:100% 100%;
    transition:transform 240ms cubic-bezier(.2,.7,.2,1); }
  .covy-modal.is-open .covy-panel{ transform:none; }
  @media (max-width:600px){ .covy-panel{ right:12px; left:12px; bottom:12px; width:auto; } }
  .covy-head{ display:flex; align-items:center; gap:11px; padding:14px 16px;
    background:#000; color:var(--paper); flex:none; }
  .covy-head-av{ position:relative; width:44px; height:44px; flex:none; display:block; }

  .covy-head-meta{ flex:1; min-width:0; }
  .covy-head-meta b{ display:block; font-size:15px; font-weight:800; letter-spacing:-.01em; }
  .covy-head-meta span{ display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(250, 246, 239,.55); }
  .covy-head-meta span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--sage-deep); }
  .covy-close{ flex:none; width:34px; height:34px; border:0; border-radius:10px; background:rgba(250, 246, 239,.08);
    color:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .covy-close:hover{ background:rgba(250, 246, 239,.16); }
  .covy-thread{ flex:1; min-height:200px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
    background:var(--paper); scrollbar-width:thin; }
  .covy-msg{ max-width:86%; padding:10px 13px; border-radius:15px; font-size:13.5px; line-height:1.45; }
  .covy-msg b{ font-weight:700; }
  .covy-msg.from-covy{ align-self:flex-start; background:rgba(10,10,10,.05); color:var(--t-ink);
    border-bottom-left-radius:5px; box-shadow:inset 0 0 0 1px rgba(10,10,10,.06); }
  .covy-msg.from-user{ align-self:flex-end; background:#000; color:var(--paper); border-bottom-right-radius:5px; }
  .covy-msg.is-typing{ display:flex; gap:4px; align-items:center; padding:13px 14px; }
  .covy-msg.is-typing span{ width:6px; height:6px; border-radius:50%; background:rgba(10,10,10,.35);
    animation:covyTyping 1s ease-in-out infinite; }
  .covy-msg.is-typing span:nth-child(2){ animation-delay:.16s; } .covy-msg.is-typing span:nth-child(3){ animation-delay:.32s; }
  @keyframes covyTyping{ 0%,100%{ opacity:.35; transform:translateY(0);} 50%{ opacity:1; transform:translateY(-3px);} }
  .covy-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; flex:none; background:var(--paper); }
  .covy-chip{ border:1px solid rgba(10,10,10,.16); background:transparent; color:var(--t-ink);
    font-family:inherit; font-size:12px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer;
    transition:background .15s ease, border-color .15s ease; }
  .covy-chip:hover{ background:var(--sky-soft); border-color:rgba(107, 143, 214,.6); }
  .covy-chip.used{ opacity:.38; }
  .covy-form{ display:flex; gap:8px; padding:12px 16px; border-top:1px solid rgba(10,10,10,.09); flex:none; background:var(--paper); }
  .covy-input{ flex:1; min-width:0; border:1px solid rgba(10,10,10,.16); border-radius:999px; padding:10px 15px;
    font-family:inherit; font-size:13.5px; color:var(--t-ink); background:#fff; }
  .covy-input:focus{ outline:none; border-color:rgba(107, 143, 214,.75); box-shadow:0 0 0 3px rgba(169, 215, 242,.22); }
  .covy-send{ flex:none; width:40px; height:40px; border:0; border-radius:50%; background:var(--sky); color:#000;
    cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .covy-send:hover{ background:var(--ocean, #6B8FD6); }
  .covy-foot{ padding:9px 16px 13px; text-align:center; font-size:12px; color:rgba(10,10,10,.5); flex:none; background:var(--paper); }
  .covy-foot a{ color:var(--ocean-deep); font-weight:700; text-decoration:none; }
  .covy-foot a:hover{ text-decoration:underline; }

  /* =====================================================================
     COVY · layout + material
     The thread was flex:1 in a 620px panel, so a single greeting left ~180px
     of empty cream and pushed the suggested questions to the floor, where
     they read as a toolbar instead of replies. The panel now sizes to its
     content and only scrolls once the conversation outgrows the cap.
     ===================================================================== */
  .covy-thread{ flex:0 1 auto; min-height:0; }

  /* material: frosted panel, lit edge, chromatic shadow — same language as
     the calculator card and the closer. Children go transparent or the frost
     is hidden behind three opaque paper blocks. */
  .covy-panel{
    background:linear-gradient(180deg, rgba(252, 251, 249,.90), rgba(248, 246, 242,.88));
    backdrop-filter:blur(28px) saturate(1.3);
    -webkit-backdrop-filter:blur(28px) saturate(1.3);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 0 0 1px rgba(116, 133, 168,.13),
      0 46px 96px -40px rgba(58, 79, 120,.55),
      0 12px 28px -18px rgba(12, 15, 20,.45); }
  .covy-thread, .covy-chips, .covy-form, .covy-foot{ background:transparent; }

  /* header: was a flat #000 bar butted against cream */
  .covy-head{
    background:
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%),
      linear-gradient(180deg, #16161A, #0C0C0C);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.10);
    padding:15px 16px; }
  .covy-head-av{ width:50px; height:50px; }
  .covy-head-av .covy-puff{ filter:drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
  .covy-head-meta b{ font-size:15.5px; }

  /* Posty's own bubbles get the glass; the user's stay solid ink so the two
     voices never read as the same object */
  .covy-msg.from-covy{
    background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.52));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(116, 133, 168,.14),
      0 10px 22px -16px rgba(58, 79, 120,.35); }
  .covy-msg.from-user{ box-shadow:0 10px 22px -16px rgba(12, 15, 20,.6); }

  .covy-chips{ padding:10px 16px 12px; }
  .covy-chip{
    border-color:transparent;
    background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.46));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(116, 133, 168,.18),
      0 6px 14px -12px rgba(58, 79, 120,.4); }
  .covy-chip:hover{
    background:linear-gradient(180deg, rgba(233, 241, 250,.95), rgba(214, 236, 249,.7));
    border-color:transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(107, 143, 214,.5),
      0 8px 18px -12px rgba(58, 79, 120,.45); }

  .covy-form{ border-top-color:rgba(116, 133, 168,.16); }
  .covy-input{
    border-color:transparent;
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.66));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(116, 133, 168,.20); }
  .covy-input:focus{
    border-color:transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      inset 0 0 0 1px rgba(107, 143, 214,.75),
      0 0 0 3px rgba(169, 215, 242,.22); }
  .covy-send{
    background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 58%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 20px -12px rgba(58, 79, 120,.55); }

  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
    .covy-panel{ background:linear-gradient(180deg,#FCFBF9,#F7F5F1); }
  }
  .demo-modal{
    position:fixed;
    inset:0;
    z-index:1000;
    display:grid;
    place-items:center;
    padding:var(--lg);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transition:opacity 220ms cubic-bezier(.2,.7,.2,1),
               visibility 0s linear 220ms;
  }
  .demo-modal.is-open{
    opacity:1;
    visibility:visible;
    transition:opacity 220ms cubic-bezier(.2,.7,.2,1),
               visibility 0s linear 0s;
  }
  .demo-modal-scrim{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.55);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    cursor:pointer;
  }
  /* Solid editorial object — the page's own paper, not glass. The scrim
     carries the blur; the panel is a surface. */
  .demo-modal-panel{
    position:relative;
    z-index:1;
    background:var(--paper);
    color:var(--t-ink);
    border-radius:20px;
    border:none;
    padding:0;
    width:min(1080px, 100%);
    max-height:calc(100vh - 2 * var(--lg));
    overflow:auto;
    box-shadow:0 40px 80px -30px rgba(0, 0, 0, .50),
               0 12px 28px -16px rgba(0, 0, 0, .35);
    transform:translateY(16px) scale(0.985);
    transition:transform 280ms cubic-bezier(.2,.7,.2,1);
  }
  .demo-modal.is-open .demo-modal-panel{
    transform:translateY(0) scale(1);
  }
  .demo-modal-close{
    position:absolute;
    top:14px;right:14px;
    width:36px;height:36px;
    border-radius:50%;
    background:#FFFFFF;
    border:1px solid rgba(0,0,0,.08);
    color:var(--ink);
    display:grid;place-items:center;
    cursor:pointer;
    transition:background var(--t-transition), transform var(--t-transition);
    z-index:5;
  }
  .demo-modal-close:hover{ background:var(--paper-2); transform:scale(1.05); }
  .demo-modal-close:active{ transform:scale(0.95); }
  .demo-modal-close.on-ink{
    background:rgba(255,255,255,.06);
    border-color:var(--rule-on-ink);
    color:var(--t-paper);
  }
  .demo-modal-close.on-ink:hover{ background:rgba(255,255,255,.12); }
  body.demo-modal-open{ overflow:hidden; }

  .demo-grid{
    display:grid;
    grid-template-columns:minmax(300px, 0.9fr) 1.4fr;
    gap:0;
    align-items:stretch;
    /* Definite height so the slot list scrolls inside the panel instead of
       growing it — the panel stays one calm object. */
    height:min(640px, calc(100vh - 2 * var(--lg)));
    grid-template-rows:minmax(0, 1fr);
  }

  /* LEFT · host rail · the page's own ink voice, not scheduler-grey */
  .demo-host{
    background:var(--ink-2);
    color:var(--t-paper);
    padding:var(--2xl);
    display:flex;flex-direction:column;
    gap:var(--md);
  }
  .demo-host-id{ display:flex;align-items:center;gap:12px;margin-bottom:2px; }
  .demo-avatar{
    flex:none;
    width:44px;height:44px;border-radius:50%;
    display:grid;place-items:center;
    background:rgba(169, 215, 242,.12);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.35);
    color:var(--sky);
    font-size:14px;font-weight:700;letter-spacing:0.02em;
  }
  .demo-host-name{ font-size:14.5px;font-weight:600;color:var(--t-paper);line-height:1.25; }
  .demo-host-org{ font-size:12.5px;font-weight:500;color:var(--t-paper-55); }
  .demo-host-title{
    font-size:clamp(22px, 2.4vw, 28px);
    line-height:1.12;letter-spacing:-0.028em;font-weight:800;
    color:var(--t-paper);
    margin:0;
  }
  .demo-host-meta{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:10px;
  }
  .demo-host-meta li{
    display:flex;align-items:flex-start;gap:10px;
    font-size:14px;line-height:1.45;color:var(--t-paper-70);
  }
  .demo-host-meta li b{ color:var(--t-paper); font-weight:700; }
  .demo-host-meta .ic{
    flex:none;
    width:18px;height:18px;
    color:var(--t-paper-55);
    margin-top:1px;
  }
  .demo-host-desc{
    font-size:14px;line-height:1.55;color:var(--t-paper-55);
    padding-top:var(--md);
    border-top:1px solid var(--rule-on-ink);
  }
  .demo-host-foot{
    margin-top:auto;
    padding-top:var(--md);
    border-top:1px solid var(--rule-on-ink);
  }
  .demo-host-foot .ft-eye{
    display:block;
    color:var(--sky);
    margin-bottom:10px;
  }
  .demo-host-foot ul{
    list-style:none;padding:0;margin:0;
    display:flex;flex-direction:column;gap:8px;
    font-size:13px;line-height:1.45;color:var(--t-paper-70);
  }
  .demo-host-foot ul li{ display:flex;align-items:flex-start;gap:9px; }
  .demo-host-foot ul li .ck{ margin-top:1px; }

  /* RIGHT · scheduler · paper · three steps (pick a time → details → booked) */
  .demo-sched{
    position:relative;
    padding:var(--2xl);
    background:var(--paper);
    display:flex;flex-direction:column;
    min-width:0;min-height:0;
  }
  .demo-step{ display:none; }
  .demo-step.is-on{
    display:flex;flex-direction:column;flex:1;min-height:0;
    animation:demoStepIn 300ms cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes demoStepIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .demo-step-eye{
    font-family:var(--sans);
    font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--ocean);
  }
  .demo-step-head{
    display:flex;align-items:center;justify-content:space-between;gap:var(--md);
    margin-bottom:var(--lg);
  }
  .demo-month-nav{ display:flex;align-items:center;gap:6px; }
  .demo-month-nav b{
    font-size:14.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
    min-width:118px;text-align:center;
  }
  .demo-mn-btn{
    width:30px;height:30px;border-radius:50%;
    display:grid;place-items:center;
    color:var(--ink);
    background:transparent;
    border:1px solid var(--rule-on-paper);
    cursor:pointer;
    transition:background var(--t-transition), border-color var(--t-transition), opacity var(--t-transition);
  }
  .demo-mn-btn:hover:not(:disabled){ background:rgba(169, 215, 242,.20); border-color:transparent; }
  .demo-mn-btn:disabled{ opacity:.25; cursor:default; }
  .demo-mn-btn svg{ width:13px;height:13px; }

  /* calendar | slots — the slot rail slides open once a day is picked */
  .demo-when{
    flex:1;min-height:0;
    display:grid;
    grid-template-columns:1fr 0fr;
    grid-template-rows:minmax(0, 1fr); /* row = container height → slot list scrolls */
    gap:0;
    transition:grid-template-columns 340ms cubic-bezier(.2,.7,.2,1),
               gap 340ms cubic-bezier(.2,.7,.2,1);
  }
  .demo-when.has-day{ grid-template-columns:1fr 0.68fr; gap:var(--lg); }
  .demo-cal-col{ min-width:0; width:100%; max-width:430px; margin:0 auto; align-self:start; }
  .demo-cal-dow, .demo-cal-days{
    display:grid;grid-template-columns:repeat(7, 1fr);
    gap:4px;
    text-align:center;
  }
  .demo-cal-dow span{
    font-size:10.5px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
    color:var(--t-ink-35);
    padding:2px 0 8px;
  }
  .demo-day{
    position:relative;
    aspect-ratio:1 / 1;
    border-radius:50%;
    display:grid;place-items:center;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
    background:rgba(169, 215, 242,.14);
    border:none;
    cursor:pointer;
    transition:background var(--t-transition), transform var(--t-micro);
  }
  .demo-day:not(.is-out):not(.is-pad):hover{ background:rgba(169, 215, 242,.34); }
  .demo-day:not(.is-out):not(.is-pad):active{ transform:scale(.94); }
  .demo-day.is-sel{ background:var(--sky); font-weight:700; }
  .demo-day.is-out{ background:transparent; color:var(--t-ink-35); font-weight:400; cursor:default; }
  .demo-day.is-pad{ background:transparent; cursor:default; }
  .demo-day.is-today::after{
    content:""; position:absolute; bottom:4px;left:50%;
    width:4px;height:4px;border-radius:50%;
    background:var(--ocean);
    transform:translateX(-50%);
  }

  .demo-slots{
    min-width:0;
    overflow:hidden;
    display:flex;flex-direction:column;
    opacity:0; transform:translateX(10px);
    pointer-events:none;
    transition:opacity 280ms cubic-bezier(.2,.7,.2,1) 120ms,
               transform 280ms cubic-bezier(.2,.7,.2,1) 120ms;
  }
  .demo-when.has-day .demo-slots{ opacity:1; transform:none; pointer-events:auto; }
  .demo-slots-day{
    font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;
    padding:4px 2px 12px;
    white-space:nowrap;
  }
  .demo-slots-list{
    flex:1;min-height:0;
    overflow-y:auto;
    display:flex;flex-direction:column;gap:8px;
    padding:2px 6px 20px 2px;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,0,0,.18) transparent;
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
            mask-image:linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  }
  /* Calendly's split-confirm affordance, in the house system: the picked slot
     flips to ink and a pink "Next" grows in beside it. */
  .demo-slot{
    flex:none;
    display:grid;grid-template-columns:1fr 0fr;gap:0;
    transition:grid-template-columns 260ms cubic-bezier(.2,.7,.2,1),
               gap 260ms cubic-bezier(.2,.7,.2,1);
  }
  .demo-slot.is-picked{ grid-template-columns:1fr 1fr; gap:8px; }
  .demo-slot-t{
    height:40px;min-width:0;
    border-radius:var(--r-pill);
    border:1px solid var(--rule-on-paper);
    background:#FFFFFF;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
    cursor:pointer;white-space:nowrap;
    transition:border-color var(--t-transition), background var(--t-transition), color var(--t-transition);
  }
  .demo-slot-t:hover{ border-color:var(--ocean); background:rgba(169, 215, 242,.10); }
  .demo-slot.is-picked .demo-slot-t{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .demo-slot-go{
    height:40px;min-width:0;padding:0;overflow:hidden;
    border-radius:var(--r-pill);
    border:none;
    background:var(--sky);
    font:inherit;font-size:13.5px;font-weight:700;color:var(--ink);
    cursor:pointer;white-space:nowrap;
    opacity:0;pointer-events:none;
    transition:opacity 200ms cubic-bezier(.2,.7,.2,1) 60ms, background var(--t-transition);
  }
  .demo-slot.is-picked .demo-slot-go{ opacity:1; pointer-events:auto; }
  .demo-slot-go:hover{ background:var(--ocean); }

  .demo-tz{
    margin-top:var(--md);
    padding-top:var(--md);
    border-top:1px solid rgba(0,0,0,.06);
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;color:var(--t-ink-55);
  }
  .demo-tz svg{ flex:none;width:14px;height:14px;color:var(--t-ink-35); }
  .demo-tz b{ color:var(--t-ink-70);font-weight:600; }

  /* step 02 · details */
  .demo-back{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:8px;
    font:inherit;font-size:13px;font-weight:600;color:var(--t-ink-55);
    background:none;border:none;cursor:pointer;
    padding:0;
    margin-bottom:var(--md);
    transition:color var(--t-transition);
  }
  .demo-back:hover{ color:var(--ink); }
  .demo-back .ring{
    display:inline-grid;place-items:center;
    width:22px;height:22px;border-radius:var(--r-pill);
    box-shadow:inset 0 0 0 1px var(--rule-on-paper);
    color:var(--ink);font-size:12px;line-height:1;
    transition:background var(--t-transition), box-shadow var(--t-transition), transform var(--t-transition);
  }
  .demo-back:hover .ring{
    background:var(--sky);
    box-shadow:inset 0 0 0 1px var(--sky);
    transform:translateX(-2px);
  }
  .demo-picked{
    display:inline-flex;align-items:center;gap:9px;
    align-self:flex-start;
    margin:10px 0 var(--lg);
    padding:9px 16px;
    border-radius:var(--r-pill);
    background:rgba(169, 215, 242,.16);
    box-shadow:inset 0 0 0 1px rgba(169, 215, 242,.45);
    font-size:13.5px;font-weight:700;color:var(--ink);
    letter-spacing:-0.005em;
    white-space:nowrap;
  }
  .demo-picked svg{ flex:none;width:14px;height:14px;color:var(--ocean); }
  .demo-form{ display:grid;grid-template-columns:1fr 1fr;gap:14px; }
  .demo-field{ display:flex;flex-direction:column;gap:7px;min-width:0; }
  .demo-field.full{ grid-column:1 / -1; }
  .demo-field .lbl{ font-size:12px;font-weight:600;letter-spacing:0.01em;color:var(--t-ink-70); }
  .demo-field .lbl .opt{ font-weight:500;color:var(--t-ink-35); }
  .demo-input{
    font:inherit;font-size:14.5px;color:var(--ink);
    width:100%;
    background:#FFFFFF;
    border:1px solid var(--rule-on-paper);
    border-radius:10px;
    padding:11px 14px;
    transition:border-color var(--t-transition), box-shadow var(--t-transition);
  }
  .demo-input::placeholder{ color:var(--t-ink-35); }
  .demo-input:focus{
    outline:none;
    border-color:var(--ocean);
    box-shadow:0 0 0 4px rgba(169, 215, 242,.22);
  }
  textarea.demo-input{ resize:vertical;min-height:74px; }
  .demo-form-actions{
    grid-column:1 / -1;
    display:flex;align-items:center;gap:var(--md);
    margin-top:4px;flex-wrap:wrap;
  }
  .demo-fineprint{ font-size:12.5px;line-height:1.45;color:var(--t-ink-55);max-width:250px; }

  /* step 03 · booked */
  .demo-done{
    flex:1;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    gap:var(--md);
    max-width:410px;
  }
  .demo-done-ck, .signin-sent-ck{
    display:block;
    width:52px;height:52px;border-radius:50%;
    background:var(--sky);
    position:relative;
    margin-bottom:4px;
  }
  .demo-done-ck::after, .signin-sent-ck::after{
    content:"";position:absolute;left:16px;top:19px;
    width:19px;height:10px;
    border-left:2.5px solid var(--ink);
    border-bottom:2.5px solid var(--ink);
    transform:rotate(-45deg);
  }
  .demo-done h3{
    font-size:clamp(24px, 2.4vw, 30px);font-weight:800;letter-spacing:-0.028em;
    color:var(--ink);line-height:1.1;
  }
  .demo-done-when{ font-size:15px;font-weight:700;color:var(--ink); }
  .demo-done-note{ font-size:14px;line-height:1.55;color:var(--t-ink-70); }
  .demo-done-note b{ color:var(--ink);font-weight:700; }
  .demo-done .btn{ margin-top:6px; }

  /* ============ SIGN-IN · compact ink panel · magic link + SSO ============ */
  .demo-modal-panel.signin-panel{
    width:min(432px, 100%);
    background:var(--ink-2);
    color:var(--t-paper);
    border:1px solid var(--rule-on-ink);
    padding:44px 40px 32px;
  }
  .signin-head{ display:flex;flex-direction:column;gap:10px;margin-bottom:var(--lg); }
  .signin-sym{ height:26px;width:auto;align-self:flex-start;margin-bottom:8px; }
  .signin-title{
    font-size:25px;font-weight:800;letter-spacing:-0.028em;line-height:1.1;
    color:var(--t-paper);
  }
  .signin-sub{ font-size:14px;line-height:1.55;color:var(--t-paper-55); }
  .signin-form{ display:flex;flex-direction:column;gap:12px; }
  .signin-form .btn{ justify-content:center;width:100%; }
  .demo-input.on-ink{
    background:rgba(255,255,255,.05);
    border-color:var(--rule-on-ink);
    color:var(--t-paper);
  }
  .demo-input.on-ink::placeholder{ color:var(--t-paper-35); }
  .demo-input.on-ink:focus{
    border-color:var(--sky);
    box-shadow:0 0 0 4px rgba(169, 215, 242,.18);
  }
  .signin-or{
    display:flex;align-items:center;gap:12px;
    margin:var(--md) 0;
    font-size:10.5px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--t-paper-35);
  }
  .signin-or::before, .signin-or::after{ content:"";flex:1;height:1px;background:var(--rule-on-ink); }
  .signin-sso{ display:flex;flex-direction:column;gap:10px; }
  .btn-sso{
    display:flex;align-items:center;justify-content:center;gap:10px;
    height:46px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.03);
    border:1px solid var(--rule-on-ink);
    font:inherit;font-size:14px;font-weight:600;color:var(--t-paper);
    cursor:pointer;
    transition:background var(--t-transition), border-color var(--t-transition), transform var(--t-micro);
  }
  .btn-sso:hover{ background:rgba(255,255,255,.07); border-color:rgba(250, 246, 239,.22); }
  .btn-sso:active{ transform:scale(.985); }
  .btn-sso svg{ flex:none;width:16px;height:16px; }
  .signin-legal{
    margin-top:var(--lg);
    padding-top:var(--md);
    border-top:1px solid var(--rule-on-ink);
    font-size:12px;line-height:1.55;color:var(--t-paper-35);
  }
  .signin-legal a{
    color:var(--t-paper-55);
    text-decoration:underline;text-underline-offset:2px;
    transition:color var(--t-transition);
  }
  .signin-legal a:hover{ color:var(--t-paper); }
  .signin-state{ display:none; }
  .signin-state.is-on{ display:block; animation:demoStepIn 300ms cubic-bezier(.2,.7,.2,1) both; }
  .signin-sent-ck{ width:46px;height:46px; }
  .signin-sent-ck::after{ left:14px;top:16px;width:17px;height:9px; }
  .signin-sent-title{
    font-size:23px;font-weight:800;letter-spacing:-0.028em;color:var(--t-paper);
    margin:14px 0 8px;
  }
  .signin-sent-note{ font-size:14px;line-height:1.6;color:var(--t-paper-55); }
  .signin-sent-note b{ color:var(--t-paper);font-weight:600;overflow-wrap:anywhere; }
  .signin-alt{
    margin-top:var(--md);
    font:inherit;font-size:13px;font-weight:600;color:var(--t-paper-55);
    background:none;border:none;cursor:pointer;padding:0;
    text-decoration:underline;text-underline-offset:3px;
    transition:color var(--t-transition);
  }
  .signin-alt:hover{ color:var(--t-paper); }

  @media (max-width: 900px){
    .demo-grid{ grid-template-columns:1fr; height:auto; grid-template-rows:none; }
    .demo-host{ padding:var(--xl); gap:10px; }
    .demo-host-desc, .demo-host-foot{ display:none; }
    .demo-sched{ padding:var(--xl); }
  }
  @media (max-width: 700px){
    .demo-when{
      grid-template-columns:1fr;
      grid-template-rows:auto 0fr;
      transition:grid-template-rows 340ms cubic-bezier(.2,.7,.2,1),
                 gap 340ms cubic-bezier(.2,.7,.2,1);
    }
    .demo-when.has-day{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:var(--md); }
    .demo-slots{ transform:translateY(8px); }
    .demo-when.has-day .demo-slots{ transform:none; }
    .demo-slots-list{ max-height:250px; }
    .demo-form{ grid-template-columns:1fr; }
  }
  @media (max-width: 640px){
    .demo-modal{ padding:0 }
    .demo-modal-panel{
      max-height:100vh;
      height:100vh;
      border-radius:0;
      width:100%;
      overflow-y:auto;
    }
    .demo-host, .demo-sched{ padding:var(--lg); }
    .demo-host-title{ font-size:22px; }
    .demo-modal.signin-modal{ padding:var(--md); }
    .demo-modal-panel.signin-panel{
      height:auto;min-height:0;
      border-radius:20px;
      padding:36px 24px 26px;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .demo-step.is-on, .signin-state.is-on{ animation:none; }
    .demo-when, .demo-slot, .demo-slots, .demo-modal-panel{ transition:none; }
  }


  /* Audit consolidation · one metric set for all small-caps labels and all
     section subs (colors/widths stay per-surface). */
  .calc-eye, .pricing-eye, .cta-final-eye, .t-eye, .ft-eye, .journey-stage-eye, .ls-lbl{
    font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase;
  }
  .social-sub, .journey-sub, .calc-sub, .pricing-sub, .bynums-sub, .support-sub{
    font-size:clamp(16px, 1.4vw, 18px); line-height:1.5; letter-spacing:-0.005em;
  }

  /* ===================== MOTION LAYER v4 · chassis-wide ===================== */
  :root{ --m-ease: cubic-bezier(.22,1,.36,1); }

  /* --- hero entrance choreography (subpage si-hero) --- */
  @keyframes mRise{ from{ opacity:0; transform:translateY(26px); filter:blur(6px); }
                    to{ opacity:1; transform:none; filter:none; } }
  @keyframes mRiseBig{ from{ opacity:0; transform:translateY(44px); }
                       to{ opacity:1; transform:none; } }
  @keyframes mFade{ from{ opacity:0; } to{ opacity:1; } }
  .si-hero .si-eye{ animation: mRise .7s var(--m-ease) .05s backwards; }
  .si-hero h1{ animation: mRise .85s var(--m-ease) .14s backwards; }
  .si-hero .si-hero-sub{ animation: mRise .8s var(--m-ease) .26s backwards; }
  .si-hero .hero-cta{ animation: mRise .8s var(--m-ease) .36s backwards; }
  .si-hero .trust-row{ animation: mRise .8s var(--m-ease) .46s backwards; }
  .si-hero .si-step-visual{ animation: mRiseBig .95s var(--m-ease) .3s backwards; }
  .si-hero .si-band{ animation: mFade .9s var(--m-ease) .58s backwards; }
  .si-hero .si-reveal2{ opacity:1; transform:none; }   /* entrance owns the hero */

  /* Home hero is stable from its first paint. */
  .globe-wrap{ animation: mFade 1.6s var(--m-ease) .1s backwards; }

  /* --- auto-attached scroll reveals (JS adds .m-rev + stagger delays) --- */
  .m-rev{ opacity:0; transform:translateY(22px);
    transition:opacity .75s var(--m-ease), transform .75s var(--m-ease); }
  .m-rev.m-in{ opacity:1; transform:none; }

  /* --- micro-interactions --- */
  .btn{ transition:transform .25s var(--m-ease), box-shadow .25s var(--m-ease),
        background .2s, color .2s; }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:translateY(0) scale(.98); }
  .btn .arrow{ display:inline-block; transition:transform .28s var(--m-ease); }
  .btn:hover .arrow{ transform:translateX(4px); }
  .link-arrow .ring{ display:inline-block; transition:transform .28s var(--m-ease); }
  .link-arrow:hover .ring{ transform:translateX(4px); }
  .tw-card, .flow-step{ transition:transform .3s var(--m-ease), box-shadow .3s var(--m-ease),
    border-color .3s; }
  .tw-card:hover, .flow-step:hover{ transform:translateY(-3px);
    box-shadow:0 22px 48px -30px rgba(12, 15, 20,.25); }
  .faq-list summary{ transition:color .2s; }
  .faq-list summary:hover{ color:var(--ocean-deep,#3F6ECA); }

  /* --- ink plates: slow halftone drift baked into the background --- */
  @keyframes mDrift{ from{ background-position:0 0, 0 0; } to{ background-position:150px 90px, 0 0; } }
  .sec-plate, .cmp-plate, .wk-plate, .sla-plate{
    background-image:radial-gradient(circle, rgba(255,255,255,.045) 1.5px, transparent 1.9px),
                     linear-gradient(var(--ink), var(--ink));
    background-size:26px 26px, 100% 100%;
    animation:mDrift 46s linear infinite alternate;
  }

  /* --- licensed-proof ribbon (rides the TRUST chunk to every page) --- */
  .m-ribbon{ overflow:hidden; border-top:1px solid var(--rule-on-paper);
    border-bottom:1px solid var(--rule-on-paper); padding:13px 0; margin-bottom:var(--3xl);
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .m-ribbon-track{ display:flex; align-items:center; gap:34px; width:max-content;
    animation:mRibbon 42s linear infinite; }
  .m-ribbon:hover .m-ribbon-track{ animation-play-state:paused; }
  @keyframes mRibbon{ to{ transform:translateX(-50%); } }
  .m-ribbon .mi{ font-family:var(--sans); font-size:11px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--t-ink-55); white-space:nowrap; }
  .m-ribbon .mi b{ color:var(--ink); font-weight:700; }
  .m-ribbon .md{ width:22px; height:6px; flex-shrink:0;
    background-image:radial-gradient(circle, var(--sky) 2.2px, transparent 2.6px);
    background-size:8px 6px; }

  /* --- statement moment · scroll-filled two-tone line --- */
  .stmt{ padding:clamp(44px,5.5vw,80px) 0; background:var(--paper); }
  .stmt-line{ margin:0 auto; max-width:720px; text-align:center; font-family:var(--sans);
    font-size:clamp(19px,2.2vw,30px); font-weight:600; letter-spacing:-0.02em;
    line-height:1.32; }
  /* While the rack-focus driver is live the words hold their FINAL colour and
     opacity does the dimming, so a word fades up rather than changing hue.
     The .on classes below stay for the reduced-motion and no-JS paths. */
  /* .is-rack is set on the LINE (that is what [data-stmt] selects), and each
     rule has to outrank the dim `.stmt.is-ink .stmt-line span` colour below. */
  .stmt-line.is-rack span, .stmt-line.is-rack em{
    opacity:.13; will-change:opacity, filter, transform; }
  .stmt .stmt-line.is-rack span{ color:var(--ink); }
  .stmt .stmt-line.is-rack em{ color:var(--ocean-deep,#3F6ECA); }
  .stmt.is-ink .stmt-line.is-rack span{ color:var(--paper); }
  .stmt.is-ink .stmt-line.is-rack em{ color:var(--sky); }

  @media (prefers-reduced-motion:reduce){
    .stmt-line.is-rack span, .stmt-line.is-rack em{
      opacity:1 !important; filter:none !important; transform:none !important; } }
  .stmt-line span, .stmt-line em{ font-style:normal; color:rgba(0,0,0,.13);
    transition:color .5s var(--m-ease); }
  .stmt-line span.on{ color:var(--ink); }
  .stmt-line em.on{ color:var(--ocean-deep,#3F6ECA); }

  /* home statement · full-viewport black beat that the calculator curtains up over,
     hero-style. scoped to .stmt.is-ink so subpage (.stmt.is-paper) breathers are untouched. */
  /* 100lvh, not svh: on iPhone the viewport grows when Safari's toolbar collapses, and a
     statement sized to the small viewport left a strip at the bottom where the hero's sky
     showed through (Rob's screenshot, 9 Sep). lvh is the toolbar-collapsed height. */
  .stmt.is-ink{ position:sticky; top:0; z-index:0; min-height:100svh; min-height:100lvh; background:#0C0C0C;
    display:flex; align-items:center; justify-content:center; padding:clamp(60px,10vh,120px) 24px; overflow:hidden; }
  .stmt.is-ink .stmt-line{ max-width:960px; font-size:clamp(30px,4.4vw,60px); font-weight:800;
    letter-spacing:-0.035em; line-height:1.08; will-change:transform,opacity; }
  .stmt.is-ink .stmt-line span, .stmt.is-ink .stmt-line em{ color:rgba(250, 246, 239,.14); }
  .stmt.is-ink .stmt-line span.on{ color:var(--paper); }
  .stmt.is-ink .stmt-line em.on{ color:var(--sky); }
  .stmt.is-ink ~ .calc{ position:relative; z-index:2; border-radius:44px 44px 0 0; box-shadow:0 -1px 0 rgba(0,0,0,.05); }
  /* Hold strip · empty scroll that sits between the pinned statement and the
     calculator. The calculator is in normal flow, so the only way to stop it
     rising while the line is still resolving is to put distance in front of it.
     60svh: the reveal finishes 0.34svh into the pin, so the finished line holds
     alone for about a quarter viewport before the next section even peeks. */
  .stmt-hold{ height:60svh; pointer-events:none; }
  @media(max-width:760px){ .stmt.is-ink ~ .calc{ border-radius:26px 26px 0 0; } }
  @media(prefers-reduced-motion:reduce){
    .stmt.is-ink{ position:relative; min-height:auto; padding:90px 24px; }
    .stmt.is-ink ~ .calc{ border-radius:0; }
    /* nothing is pinned here, so the hold strip would just be a blank gap */
    .stmt-hold{ display:none; }
  }
  @media(max-width:760px){
    /* still sticky at this width — only reduced-motion unpins it — so the hold
       strip stays, just shorter: less dead scroll on a small screen. */
    .stmt-hold{ height:44svh; }
  }

  /* ---- By the numbers · stacked focal reveal (numbers enter from the right) ---- */
  /* -2px: svh rounding leaves a 1-2px sliver of the tour's paper at the seam
     on 2x displays — the pricing block simply covers it */
  .bn2{ position:relative; height:420svh; background:#0C0C0C; color:#FAF6EF; margin-top:-2px; }
  .bn2-pin{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:grid; grid-template-columns:0.92fr 1.08fr; align-items:center; padding:0 clamp(28px,6vw,110px); }
  .bn2-label{ position:relative; z-index:2; max-width:420px; }
  .bn2-cta{ margin-top:var(--lg); }
  .bn2-eye{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:#A9D7F2; }
  .bn2-eye .dot{ width:8px; height:8px; border-radius:50%; background:#A9D7F2; }
  .bn2-h2{ margin:18px 0 0; font-size:clamp(30px,3.4vw,50px); font-weight:800; letter-spacing:-.035em; line-height:1.03; color:#FAF6EF; }
  .bn2-h2 .soft{ color:rgba(250, 246, 239,.32); }
  .bn2-sub{ margin:18px 0 0; font-size:15px; line-height:1.6; color:rgba(250, 246, 239,.55); max-width:360px; }
  .bn2-progress{ margin-top:30px; display:flex; gap:8px; }
  .bn2-progress i{ width:26px; height:3px; border-radius:2px; background:rgba(250, 246, 239,.14); transition:background .4s ease; }
  .bn2-progress i.on{ background:#A9D7F2; }
  .bn2-track{ display:flex; align-items:center; gap:16px; }
  .bn2-idx{ margin-top:30px; font-family:var(--sans); font-size:11.5px; font-weight:600;
    letter-spacing:.16em; color:rgba(250, 246, 239,.30); font-variant-numeric:tabular-nums; }
  .bn2-idx b{ color:#A9D7F2; font-weight:700; }

  .bn2-view{ position:relative; height:100svh; z-index:2; }
  .bn2-stack{ position:absolute; left:0; right:0; top:0; will-change:transform; }
  .bn2-stat{ display:flex; flex-direction:column; justify-content:center; will-change:opacity,transform; transform-origin:left center; }
  .bn2-mono{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(250, 246, 239,.32); margin-bottom:14px; }
  .bn2-num{ font-size:clamp(66px,10.5vw,148px); font-weight:800; letter-spacing:-.045em; line-height:.9; font-variant-numeric:tabular-nums; color:#FAF6EF; }
  .bn2-num .accent{ color:#A9D7F2; }
  .bn2-desc{ margin:20px 0 0; font-size:16px; line-height:1.55; color:rgba(250, 246, 239,.55); max-width:440px; }
  .bn2-desc b{ color:#FAF6EF; font-weight:600; }
  @media(max-width:820px){
    .bn2-pin{ grid-template-columns:1fr; align-content:center; }
    .bn2-label{ position:absolute; top:9vh; left:clamp(24px,6vw,40px); right:24px; max-width:none; }
    .bn2-num{ font-size:clamp(52px,16vw,90px); } .bn2-desc{ font-size:14px; }
  }
  @media(prefers-reduced-motion:reduce){
    .bn2{ height:auto; } .bn2-pin{ position:static; height:auto; padding-top:80px; padding-bottom:80px; }
    .bn2-stack{ position:static; } .bn2-stat{ opacity:1 !important; transform:none !important; padding:36px 0; }
    .bn2-view{ height:auto; }
  }


  /* --- hero mock · live console --- */
  @keyframes mStamp{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
  .m-stamp{ animation:mStamp .5s var(--m-ease) backwards; }
  .m-live{ background:var(--sky-soft) !important; transition:background .45s var(--m-ease); }
  .sx-row.m-live, .tl-row.m-live, .rw-row.m-live{ border-radius:8px;
    padding-left:8px; padding-right:8px; margin-left:-8px; margin-right:-8px; }
  .si-hero .si-mock .em-head > span:last-child{ display:inline-flex; align-items:center; gap:6px; }
  .si-hero .si-mock .em-head > span:last-child::before{ content:""; width:6px; height:6px;
    border-radius:50%; background:var(--ocean,#6B8FD6); animation:mPulse 2s ease infinite; }
  @keyframes mPulse{ 0%,100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } }

  /* --- audience toggle (Route-style, Posty tokens) --- */
  .aud{ display:flex; gap:2px; padding:3px; border:1px solid rgba(255,255,255,.16);
    border-radius:999px; margin-right:14px; }
  body.nav-over-paper .aud{ border-color:rgba(0,0,0,.12); }
  .aud-a{ padding:7px 13px; border-radius:999px; font-size:12px; font-weight:600;
    letter-spacing:.01em; color:inherit; opacity:.62; transition:opacity .2s, background .2s, color .2s; }
  .aud-a:hover{ opacity:1; }
  .aud-a.is-on{ background:var(--sky); color:#000; opacity:1; font-weight:700; }
  @media (max-width:1180px){ .aud{ display:none; } }

  /* --- lifestyle band · photo-ready glass quote (field swaps to <img> later) --- */
  .lband{ position:relative; overflow:hidden; height:clamp(400px,54vh,560px);
    display:flex; align-items:center; }
  .lband-field{ position:absolute; inset:-46px;
    background:
      radial-gradient(560px 360px at 78% 22%, rgba(107, 143, 214,.5), transparent 70%),
      radial-gradient(680px 440px at 16% 80%, rgba(233, 241, 250,.95), transparent 72%),
      radial-gradient(circle, rgba(0,0,0,.05) 1.4px, transparent 1.8px),
      linear-gradient(160deg, #F7F3EC, #E5EEF3);
    background-size:auto, auto, 22px 22px, auto;
    will-change:transform; }
  .lband-field img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .lband-card{ position:relative; margin:0; max-width:600px;
    background:rgba(255,255,255,.55); backdrop-filter:blur(18px) saturate(150%);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    border-radius:20px; padding:30px 32px 26px;
    box-shadow:0 34px 80px -34px rgba(12, 15, 20,.28), inset 0 0 0 1px rgba(255,255,255,.65); }
  .lband-card::before{ content:"\201C"; display:block; font-family:var(--sans);
    font-size:52px; font-weight:800; line-height:.6; color:var(--ocean-deep,#3F6ECA); margin-bottom:12px; }
  .lband-card blockquote{ margin:0 0 16px; font-size:clamp(17px,1.55vw,21px);
    line-height:1.5; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
  .lband-card blockquote em{ font-style:normal; color:var(--ocean-deep,#3F6ECA); }
  .lband-card figcaption b{ display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
  .lband-card figcaption span{ display:block; font-size:12px; color:var(--t-ink-55); margin-top:2px; }
  @media (max-width:640px){ .lband{ height:auto; padding:60px 0; } }

  /* --- shopper outro --- */
  .shp-outro{ padding:var(--3xl) 0; text-align:center; }
  .shp-outro h2{ font-size:clamp(30px,3.6vw,52px); letter-spacing:-0.03em; color:var(--ink); margin:0 0 14px; }
  .shp-outro h2 .accent{ color:var(--ocean-deep,#3F6ECA); }
  .shp-outro p{ max-width:560px; margin:0 auto var(--xl); color:var(--t-ink-55); font-size:15.5px; line-height:1.65; }
  @media (prefers-reduced-motion: reduce){
    .si-hero .si-eye, .si-hero h1, .si-hero .si-hero-sub, .si-hero .hero-cta,
    .si-hero .trust-row, .si-hero .si-step-visual, .si-hero .si-band,
    .hero-center .hero-badge, .hero-center .hero-title, .hero-center .hero-sub,
    .hero-center .hero-cta, .hero-center .trust-row, .globe-wrap,
    .sec-plate, .cmp-plate, .wk-plate, .sla-plate{ animation:none !important; }
    .m-rev{ opacity:1 !important; transform:none !important; transition:none !important; }
    .m-ribbon-track{ animation:none; }
    .m-stamp{ animation:none; }
    .si-hero .si-mock .em-head > span:last-child::before{ animation:none; }
    .btn:hover{ transform:none; }
  }

  /* ============== SWIPE LAYER v5 · sheet-over-hero (Novu pattern) ==============
     The hero pins under the page (sticky, z0) and everything after slides up
     over it like a sheet with rounded top corners. Subpages use .si-canvas as
     the sheet; the landing gets .sw-cover on the first post-hero section (JS).
     The hero recedes (scale + dim) as the sheet covers it. */
  body.sw-on .sw-under{ position:sticky; top:0; z-index:0; }
  body.sw-on :where(.sw-under ~ section, .sw-under ~ .sec-trans, .sw-under ~ footer, .sw-under ~ .si-canvas){ position:relative; z-index:2; }
  .sw-cover, body.sw-on .si-canvas{
    border-radius:44px 44px 0 0;
    box-shadow:0 -1px 0 rgba(0,0,0,.05);
  }
  body.sw-on .si-canvas{ position:relative; z-index:2; }
  body.sw-on .si-hero.sw-under{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
  @media (max-width:760px){ .sw-cover, body.sw-on .si-canvas{ border-radius:26px 26px 0 0; } }

  /* ============== PRODUCT TOUR · pinned phone scrollytelling ==============
     Four steps: checkout → claim → resolution → payout. The phone stays
     centered (sticky) while copy panels scroll past, alternating sides; the
     phone screen crossfades per step (Novu's device-scrolly, in Posty UI). */
  /* -------------------------------------------------------------------------
     THE WHOLE LOOP · operator console (bridge.surf motion, 1:1)
     A machined lid rises into frame on the cream page; the four windows of the
     loop slide onto the wallpaper, one per scroll step, while the sidebar and
     the subline track along. The entrance is scroll-scrubbed per frame in the
     tour IIFE; the window slide-on is CSS with the site's --m-ease.
     ------------------------------------------------------------------------- */
  .tour{ background:var(--paper); color:var(--ink); position:relative; }
  .si-canvas .tour{ background:var(--paper); }
  .tour-track{ position:relative; height:725svh; }   /* 1.95 lead-in + 4 steps x STEP + exit tail */
  .tour-pin{ position:sticky; top:0; height:100svh; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; }

  .tour-head{ position:relative; z-index:1; text-align:center; flex:none;
    padding:clamp(6px,1.4svh,20px) 24px 0; }
  .tour-head h2{ font-size:clamp(30px,3.5vw,52px); line-height:1.05; letter-spacing:-.028em;
    margin:0 0 12px; font-weight:700; }
  .tour-head h2 .soft{ color:rgba(10,10,10,.34); }
  .tour-sub{ position:relative; height:50px; max-width:520px; margin:0 auto; }
  .ts-line{ position:absolute; inset:0; margin:0; font-size:clamp(14.5px,1.05vw,16.5px);
    line-height:1.5; color:rgba(10,10,10,.55); opacity:0; transform:translateY(7px);
    transition:opacity .5s var(--m-ease), transform .5s var(--m-ease); }
  .ts-line b{ color:var(--ink); font-weight:600; }
  .ts-line.is-on{ opacity:1; transform:none; }

  .tour-stage{ position:relative; z-index:3; width:100%; flex:1 1 auto;
    display:flex; justify-content:center; align-items:flex-start;
    margin-top:4px; perspective:2400px; }   /* was clamp(14px,2.6svh,34px) — same reason */
  /* the colour bleeding past the lid's edges on the cream page */
  .tour-aura{ position:absolute; left:-6.9vw; right:-6.9vw; top:19svh; height:82svh; z-index:0;
    pointer-events:none; filter:blur(72px); opacity:0; will-change:transform,opacity;
    contain:paint;
    background:
      radial-gradient(46% 60% at 3% 60%, rgba(169, 215, 242,.92) 0%, rgba(169, 215, 242,0) 70%),
      radial-gradient(44% 58% at 98% 54%, rgba(243, 201, 174,.78) 0%, rgba(243, 201, 174,0) 70%),
      radial-gradient(38% 48% at 90% 90%, rgba(151,211,174,.62) 0%, rgba(151,211,174,0) 72%); }

  /* ---- the lid. Runs past the fold on purpose — the windows are cropped by
     the bottom of the frame, exactly as in the reference. No height clamp. ---- */
  .tour-mac{ position:relative; z-index:1; box-sizing:border-box;
    width:min(94.5vw,1660px);
    height:max(calc(min(94.5vw,1660px) * .625), calc(100svh + 2px));
    border-radius:30px; padding:14px; background:#0C0C0C;   /* = screen 16 + bezel 14 */
    transform-origin:50% 0%; will-change:transform;
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08),
               0 44px 110px -46px rgba(10,10,10,.42); }
  .mac-screen{ position:absolute; inset:14px; border-radius:16px;
    overflow:hidden; background:#0C0C0C; opacity:1; will-change:opacity;
    transform:translateZ(0); contain:paint; }
  /* full-bleed ink pinned to the lid's top edge, retracts into the lid as it lands.
     border-radius:inherit is load-bearing — this layer sits behind the lid at exactly
     its box, so with square corners it filled the lid's rounded ones straight back in.
     Inheriting tracks the radius the scrub writes on .tour-mac, frame for frame. */
  /* The side black PUSHES IN and curves onto the frame right after the
     handoff — the contraction is the moment the page appears around the
     machine. No border-radius on the box: the clip carries the corners, so
     at full bleed the shape is square to the viewport edges. */
  .mac-bleed{ position:absolute; z-index:-1; left:0; right:0; top:-320px; bottom:-6px;
    background:#0C0C0C; transform-origin:50% 0%;
    will-change:clip-path,opacity; pointer-events:none; }
  /* MacBook camera housing — clears the 14px bezel and cuts down into the screen,
     so it reads as a notch against the wallpaper instead of vanishing into the frame */
  .mac-notch{ position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:clamp(111px,8.55vw,147px); height:28px; background:#0C0C0C;
    border-radius:0 0 13px 13px; z-index:8;
    box-shadow:0 0 0 .5px rgba(255,255,255,.045); }
  .mac-notch::after{ content:""; position:absolute; left:50%; top:15px; transform:translateX(-50%);
    width:6px; height:6px; border-radius:50%; background:#26262A;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }

  /* Posty-toned wallpaper — same gradient structure and grain as the reference. */
  .mac-wall{ position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 6% 100%, #F5CDB0 0%, rgba(245, 205, 176,0) 52%),
      radial-gradient(105% 80% at 96% 97%, #C2E0CA 0%, rgba(191,229,205,0) 54%),
      radial-gradient(90% 70% at 84% 2%, #BFE1F6 0%, rgba(191, 225, 246,0) 58%),
      linear-gradient(176deg,#7FBBE0 0%,#9CCFEE 18%,#C9E4F5 40%,#F3EEE6 62%,#DCEBDF 84%,#C4E4D2 100%); }
  /* while the lid is still falling the screen is dark — the blend and the blur are
     pure repaint cost with nothing to show for them */
  .tour-mac.is-landing .mac-grain{ display:none; }
  .tour-mac.is-landing .mr-item{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .mac-grain{ position:absolute; inset:0; z-index:2; opacity:.42; mix-blend-mode:overlay;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

  /* wallpaper sidebar — the four stages of the loop, tracking the scroll */
  .mac-rail{ position:absolute; z-index:4; left:clamp(12px,1.05vw,22px); top:clamp(14px,2.3vw,34px);
    display:flex; flex-direction:column; gap:6px; }
  .mr-item{ display:flex; align-items:center; gap:10px; min-width:clamp(120px,9.6vw,170px);
    padding:8px 16px 8px 11px; border-radius:10px; color:#fff;
    font-size:clamp(11.5px,.86vw,14px); font-weight:500; white-space:nowrap; opacity:.78;
    text-shadow:0 1px 2px rgba(0,0,0,.22);
    transition:background .55s var(--m-ease), opacity .55s var(--m-ease), box-shadow .55s var(--m-ease); }
  .mr-item svg{ width:1.15em; height:1.15em; flex:none; opacity:.92; }
  .mr-item.is-on{ background:rgba(255,255,255,.27); opacity:1;
    -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.24); }

  /* ---- the windows · dispensed from the notch -------------------------------
     Measured off the reference: at rest the sheet is flat and facing you (top and
     bottom widths within 2% of each other), and as it leaves it rotates about its
     TOP edge under a hard perspective — the top collapses toward a point while the
     bottom stays wide and rises. Centre-x never moves, so there is no lateral drift.
     The sheet is squeezed to the notch's width (scaleX 0.15, scaleY 0.33 — X about
     twice as hard as Y) with only a 0.68 taper, so perspective stays gentle at 520px
     and the rotation is 12deg. It reads as being drawn into the slot, not folded.
     The sheet folds about its OWN top edge, and that edge travels up to the notch as
     it folds (FOLD_RISE = 11.9%, which is exactly the 10.6% screen inset expressed in
     window heights). Pivoting on a point ABOVE the element instead just swings it like
     a pendulum — it never reaches the notch. .mac-screen clips the result and the notch
     element sits at z-index 8 over the vanishing point.
     No transitions: every frame is scrubbed from scroll, so it holds wherever you
     stop instead of playing on its own clock. That is the reference's actual
     mechanic — it froze mid-fold for 3.3s in the recording. */
  /* top was 10.6%. The lid runs past the bottom of the viewport by design, so
     every pixel above it is window you actually see. This plus .tour-stage's
     margin is +123 canvas px at 1440x900 — more than any further trim to the
     screens could win. Measured: no tweaks 620, top:6%/8px 699, top:3%/4px 743. */
  .mac-wins{ position:absolute; z-index:3; left:15.2%; right:16.3%; top:3%; bottom:0;
    perspective:520px; perspective-origin:50% -11.9%; }
  /* .mw-body is height-capped by the driver, so the strip of .mac-win below it is
     exposed the moment the sheet shrinks into the notch. Paper, not #fff, so the
     exposed area reads as the page continuing rather than a white block. */
  .mac-win{ position:absolute; inset:0; background:#FAF6EF; border-radius:12px 12px 0 0;
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 34px 80px -26px rgba(10,10,10,.4), 0 0 0 .5px rgba(10,10,10,.1);
    opacity:0; visibility:hidden;
    transform-origin:50% 0%; backface-visibility:hidden;
    will-change:transform,opacity,filter; }
  .mw-bar{ flex:none; display:flex; align-items:center; gap:13px; height:46px; padding:0 14px;
    border-bottom:1px solid rgba(10,10,10,.07); background:#fff; }
  .mw-dots{ display:flex; gap:8px; flex:none; }
  .mw-dots i{ width:11px; height:11px; border-radius:50%; }
  .mw-dots i:nth-child(1){ background:#FF5F57; }
  .mw-dots i:nth-child(2){ background:#FEBC2E; }
  .mw-dots i:nth-child(3){ background:#28C840; }
  .mw-nav{ display:flex; gap:9px; flex:none; color:rgba(10,10,10,.28); }
  .mw-nav svg{ width:15px; height:15px; }
  .mw-url{ flex:1; min-width:0; max-width:400px; margin:0 auto; text-align:center;
    background:#F1F1F0; border-radius:999px; padding:5px 14px; font-size:12.5px;
    color:rgba(10,10,10,.58); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mw-plus{ flex:none; color:rgba(10,10,10,.3); font-size:17px; line-height:1; }
  /* The lid deliberately runs past the fold, so the lower ~30% of every window
     is off screen. The window BOX has to keep its full height — the notch fold
     and the exit are both expressed in window-heights — so instead the content
     box is bounded to the visible band. --win-vis is written by the tour script
     on resize; the fallback keeps this sane if the script never runs. */
  /* The lid deliberately runs past the fold, so the lower third of every window
     is off screen. The window BOX keeps its full height — the notch fold and the
     exit are both expressed in window-heights — and the CONTENT is bounded to
     the visible band instead. --win-vis is written by the tour script. */
  .mw-body{ flex:1; min-height:0; display:flex;
    max-height:calc(var(--win-vis, 100%) - 46px); }
  /* Screenshot windows. .mw-body is display:flex with a max-height the tour
     script drives, so the image must not be a flex item that stretches — it is
     a block child of a block container, clipped by the body's own overflow.
     Above ~1500px tall the body is taller than the image; the paper background
     fills the gap rather than leaving a white band. */
  .mw-body.is-shot{ display:block; overflow:hidden; background:#FAF6EF; }
  .mac-win:has(.mw-body.is-shot){ background:#FAF6EF; }
  .mw-shot{ display:block; width:100%; height:auto; }
  .mw-rail{ flex:none; width:clamp(160px,17.5%,248px); overflow:hidden;
    border-right:1px solid rgba(10,10,10,.07); background:#FAFAF8;
    padding:13px 11px; display:flex; flex-direction:column; gap:4px; }
  .mw-new{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600;
    background:var(--ink); color:var(--paper); border-radius:9px; padding:8px 11px; }
  .mw-new svg{ width:13px; height:13px; flex:none; }
  .mw-lab{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(10,10,10,.34); margin:11px 0 1px; padding-left:5px; }
  .mw-li{ display:flex; justify-content:space-between; gap:8px; align-items:baseline;
    font-size:11.5px; color:rgba(10,10,10,.62); border-radius:8px; padding:6px 8px;
    white-space:nowrap; overflow:hidden; }
  .mw-li em{ font-style:normal; font-size:9.5px; color:rgba(10,10,10,.32); flex:none;
    font-variant-numeric:tabular-nums; }
  .mw-li.on{ background:rgba(10,10,10,.055); color:var(--ink); font-weight:600; }
  .mw-pane{ flex:1; min-width:0; overflow:hidden; background:var(--paper); }
  /* a dark app pane takes the app rail with it — only the browser chrome stays light */
  .mac-win:has(.tp-ink) .mw-rail{ background:#0B0B0B; border-right-color:rgba(255,255,255,.09); }
  .mac-win:has(.tp-ink) .mw-new{ background:rgba(255,255,255,.09); color:var(--paper);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
  .mac-win:has(.tp-ink) .mw-lab{ color:rgba(250, 246, 239,.34); }
  .mac-win:has(.tp-ink) .mw-li{ color:rgba(250, 246, 239,.6); }
  .mac-win:has(.tp-ink) .mw-li em{ color:rgba(250, 246, 239,.34); }
  .mac-win:has(.tp-ink) .mw-li.on{ background:rgba(255,255,255,.09); color:var(--paper); }

  /* the four screens, unchanged in content — now laid into a window pane */
  .tour-scr{ display:flex; flex-direction:column; gap:10px; height:100%; box-sizing:border-box;
    padding:clamp(20px,2.8vw,40px) max(20px, calc(50% - 265px)) clamp(20px,2.8vw,36px);
    background:var(--paper); color:var(--ink); font-size:13px; }
  .tour-scr.tp-ink{ background:#0E0E0E; color:var(--paper);
    padding:clamp(20px,2.8vw,40px) max(24px, calc(50% - 320px)) clamp(20px,2.8vw,36px); }
  /* was margin-top:18px, which outranked .tp-btn{margin-top:auto} and stopped the
     CTA being pushed to the foot of the pane — that is the gap under the short
     screens. Keep the auto; the gap above it is carried by the flex gap. */
  .tour-scr .tp-btn{ margin-top:auto; }
  .tp-head{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:10px;
    border-bottom:1px solid rgba(10,10,10,.1); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
  .tp-head b{ font-weight:800; }
  .tp-head span{ color:rgba(10,10,10,.45); letter-spacing:.08em; text-transform:none; font-size:12px; }
  .tp-ink .tp-head{ border-bottom-color:rgba(250, 246, 239,.14); }
  .tp-ink .tp-head span{ color:rgba(250, 246, 239,.5); }
  .tp-row{ display:flex; justify-content:space-between; align-items:center; padding:9px 0;
    border-bottom:1px dashed rgba(10,10,10,.1); color:rgba(10,10,10,.78); }
  .tp-row b{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  .tp-ink .tp-row{ border-bottom-color:rgba(250, 246, 239,.12); color:rgba(250, 246, 239,.72); }
  .tp-ink .tp-row b{ color:var(--paper); }
  .tp-cov{ display:flex; align-items:center; gap:9px; margin-top:4px; padding:11px 12px; border-radius:14px;
    background:var(--sky-soft); border:1px solid rgba(107, 143, 214,.5); }
  .tp-cov .tp-mark{ width:24px; height:24px; border-radius:8px; background:var(--sky); color:#000;
    display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
  .tp-cov div{ flex:1; min-width:0; }
  .tp-cov b{ display:block; font-size:12.5px; }
  .tp-cov i{ display:block; font-style:normal; font-size:10.5px; color:rgba(10,10,10,.55); }
  .tp-cov .tp-on{ font-size:9px; font-weight:800; letter-spacing:.1em; background:var(--ink); color:var(--paper);
    border-radius:999px; padding:4px 8px; flex:none; }
  .tp-cov .tp-price{ font-weight:800; font-variant-numeric:tabular-nums; flex:none; }
  .tp-btn{ margin-top:auto; background:var(--ink); color:var(--paper); text-align:center; font-weight:700;
    border-radius:999px; padding:13px 0; font-size:14px; }
  .tp-ink .tp-btn{ background:var(--sky); color:#000; }
  .tp-fine{ text-align:center; font-size:10.5px; color:rgba(10,10,10,.5); }
  .tp-ink .tp-fine{ color:rgba(250, 246, 239,.45); }
  .tp-chip{ align-self:flex-start; font-size:11px; font-weight:600; background:rgba(10,10,10,.06);
    border:1px solid rgba(10,10,10,.12); border-radius:999px; padding:5px 10px; }
  .tp-what{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(10,10,10,.5); margin-top:6px; }
  .tp-opts{ display:flex; gap:7px; }
  .tp-opt{ flex:1; text-align:center; padding:9px 0; border-radius:11px; border:1px solid rgba(10,10,10,.16);
    color:rgba(10,10,10,.6); font-size:12px; }
  .tp-opt.on{ background:var(--sky); border-color:var(--sky); color:#000; font-weight:700; }
  .tp-photos{ display:flex; gap:7px; }
  /* the only screen that still ran 27px long — wider tiles reclaim it */
  .tp-ph{ flex:1; aspect-ratio:1.28; border-radius:11px; background:linear-gradient(135deg,#E8E4DC,#D6D0C4); position:relative; }
  .tp-ph.add{ background:none; border:1.5px dashed rgba(10,10,10,.25); display:flex; align-items:center;
    justify-content:center; color:rgba(10,10,10,.4); font-size:18px; }
  .tp-ph::after{ content:"✓"; position:absolute; right:5px; bottom:5px; width:16px; height:16px; border-radius:50%;
    background:var(--sage-deep, #7EC49C); color:#0C0C0C; font-size:9px; display:flex; align-items:center; justify-content:center; }
  .tp-ph.add::after{ content:none; }
  .tp-tl{ display:flex; flex-direction:column; gap:0; }
  .tp-tl .tp-ev{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; }
  .tp-ev .tp-dot{ width:18px; height:18px; border-radius:50%; background:#7EC49C; color:#0C0C0C; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; margin-top:1px; }
  .tp-ev div b{ display:block; font-size:12.5px; }
  .tp-ev div i{ display:block; font-style:normal; font-size:10.5px; color:rgba(10,10,10,.5); }
  .tp-stamp{ margin-top:2px; border:1.5px solid #7EC49C; color:#1F5C38; border-radius:12px; text-align:center;
    padding:10px 8px; font-weight:800; letter-spacing:.08em; font-size:11px; text-transform:uppercase; }
  .tp-stamp i{ display:block; font-style:normal; font-weight:600; letter-spacing:0; text-transform:none;
    color:rgba(10,10,10,.55); margin-top:2px; font-size:10.5px; }
  .tp-big{ padding:6px 0 2px; }
  .tp-big b{ display:block; font-size:34px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .tp-big i{ display:block; font-style:normal; font-size:11px; color:rgba(250, 246, 239,.5); margin-top:2px; }
  .tp-bars{ display:flex; align-items:flex-end; gap:4px; height:52px; padding:4px 0 8px; }
  .tp-bars span{ flex:1; background:linear-gradient(180deg, var(--sky), var(--ocean,#6B8FD6)); border-radius:3px 3px 0 0; opacity:.9; }
  /* two sticky layers (phone + copy) must pin together from the very first step.
     the copy layer is the 2nd flow child, so without this it wouldn't pin until
     one viewport later — that's why step 01 never used to reach the phone top.
     margin-top:-100svh overlaps it onto the phone's pin window (rel 0 → last). */
  @media (max-width:980px){
    .tour-head h2{ font-size:clamp(26px,7.4vw,38px); }
    .tour-sub{ height:66px; max-width:430px; }
    .ts-line{ font-size:14px; }
    /* A 96vw laptop lid is only ~260px tall on a phone — the window inside is
       unreadable and the rest of the pin sits empty. On mobile the device frame
       goes portrait and fills the stage, cropping at the bottom edge exactly as
       the lid does on desktop. Same motion, screen-shaped for the screen. */
    .tour-mac{ width:94vw; border-radius:22px; padding:9px; }   /* = screen 13 + bezel 9 */
    .mac-screen{ inset:9px; border-radius:13px; }
    .mac-notch{ width:clamp(71px,19.5vw,99px); height:19px; border-radius:0 0 9px 9px; }
    .mac-notch::after{ top:10px; width:4px; height:4px; }
    .mac-rail{ display:none; }
    .mac-wins{ left:4.5%; right:4.5%; top:7%; }
    .mw-bar{ height:34px; padding:0 10px; gap:9px; }
    .mw-body{ max-height:calc(var(--win-vis, 100%) - 34px); }
    .mw-dots i{ width:8px; height:8px; }
    .mw-nav, .mw-plus, .mw-rail{ display:none; }
    .mw-url{ font-size:10px; padding:4px 10px; }
    .tour-scr, .tour-scr.tp-ink{ font-size:12px; gap:8px; padding:16px 14px 18px; }
    .tp-big b{ font-size:26px; }
    .tp-bars{ height:40px; }
  }
  @media (prefers-reduced-motion: reduce){
    .mac-win, .mr-item, .ts-line{ transition:none; }
    .tour-mac{ transform:none !important; opacity:1 !important; }
    .mac-screen{ opacity:1 !important; }
    .mac-bleed{ display:none; }
    .tour-aura{ transform:none !important; opacity:.4 !important; }
  }

  /* ============== SUPASTE NOTCH NAV · single black island, flush to top ==============
     Benchmark: withnovu → supaste.com. One solid-black bar hanging from the top
     edge (radius 0 0 18px 18px) with concave "ears" tying it to the viewport —
     Mac-notch grammar. Constant ink in every theme; the old pill trio collapses
     into one island: brand · links · audience · sign in · CTA. */
  .nav{ position:fixed; top:0; left:0; right:0; z-index:30; padding:0;
    display:flex; justify-content:center; pointer-events:none; background:transparent; }
  .nav .wrap.nav-inner{
    pointer-events:auto; position:relative;
    display:flex; align-items:center; gap:4px;
    width:max-content; max-width:calc(100vw - 56px); margin:0;
    padding:9px 10px 9px 14px;
    background:#000; border-radius:0 0 18px 18px;
  }
  @keyframes navNotchDrop{ from{ transform:translateY(-115%); } }
  .nav .wrap.nav-inner{ animation:navNotchDrop .8s var(--m-ease) backwards; }   /* no delay: with the cloud cover as the first frame, a late island read as the nav loading */
  /* concave ears — true vector quarter-fillets (clip-path), 1px overlapped into
     the island so the join is seam-free at any zoom / DPR (the old radial-gradient
     ears rasterized with a soft feather and stair-stepping) */
  .nav-inner::before, .nav-inner::after{ content:""; position:absolute; top:0; width:19px; height:18px; pointer-events:none;
    background-size:100% 100%; background-repeat:no-repeat; }
  /* each ear is an inline SVG quarter-fillet, black fill only */
  .nav-inner::before{ left:-18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M0 0 L19 0 L19 18 L18 18 A18 18 0 0 0 0 0 Z' fill='black'/%3E%3C/svg%3E"); }
  .nav-inner::after{ right:-18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M19 0 L0 0 L0 18 L1 18 A18 18 0 0 1 19 0 Z' fill='black'/%3E%3C/svg%3E"); }
  /* brand lockup — always the on-ink (light) art */
  .nav .brand{ margin-right:12px; gap:9px; }
  .nav .brand-sym{ height:24px; }
  .nav .brand-word{ height:16.5px; }
  body.nav-over-paper .nav .brand-word{ filter:none; }
  body.nav-over-sky .nav .brand-sym{ filter:none; }
  @media (min-width:901px){
    /* pill dissolves into the island; CTA jumps to the far right (Supaste order) */
    .nav-pill{ display:contents; }
    .nav-pill > a, .nav-drop-trigger{
      font-size:13px; font-weight:500; letter-spacing:0;
      padding:8px 11px; border-radius:10px; color:rgba(250, 246, 239,.62);
    }
    .nav-pill > a:hover, .nav-drop-trigger:hover, .nav-drop.is-open .nav-drop-trigger{
      color:#FAF6EF; background:rgba(255,255,255,.08); transform:none;
    }
    .nav-pill .cta-sky{ order:9; margin-left:8px; padding:9px 16px; border-radius:11px;
      font-size:13px; font-weight:700; color:#000; background:var(--sky); }
    .nav-pill .cta-sky:hover{ background:var(--ocean); color:#000; transform:none;
      box-shadow:0 8px 20px -10px rgba(169, 215, 242,.55); }
    .nav-right{ background:transparent; box-shadow:none; gap:0; margin-left:2px;
      -webkit-backdrop-filter:none; backdrop-filter:none; }
    .nav-right a{ font-size:12.5px; padding:8px 10px; border-radius:10px; color:rgba(250, 246, 239,.55); }
    .nav-right a:hover{ color:#FAF6EF; background:rgba(255,255,255,.08); transform:none; }
    .aud{ margin-right:6px; padding:2px; border-color:rgba(255,255,255,.14); }
    .aud-a{ padding:6px 11px; font-size:11.5px; }
    /* theme-flip neutralizers — the island never changes color */
    body.nav-over-paper .nav-pill > a, body.nav-over-paper .nav-drop-trigger{ color:rgba(250, 246, 239,.62); }
    body.nav-over-paper .nav-pill > a:hover, body.nav-over-paper .nav-drop-trigger:hover,
    body.nav-over-paper .nav-drop.is-open .nav-drop-trigger{ color:#FAF6EF; background:rgba(255,255,255,.08); }
    body.nav-over-paper .nav-pill .cta-sky{ color:#000; background:var(--sky); }
    body.nav-over-paper .nav-pill .cta-sky:hover{ background:var(--ocean); }
    body.nav-over-paper .nav-right a{ color:rgba(250, 246, 239,.55); }
    body.nav-over-paper .nav-right a:hover, body.nav-over-paper .nav-right .active{ color:#FAF6EF; background:rgba(255,255,255,.08); }
    body.nav-over-paper .aud{ border-color:rgba(255,255,255,.14); }
    body.nav-over-paper .nav-right{ background:transparent; box-shadow:none; }
    .nav-right a.aud-a.is-on, body.nav-over-paper .nav-right a.aud-a.is-on{ color:#000; background:var(--sky); }
    .nav-right a.aud-a.is-on:hover, body.nav-over-paper .nav-right a.aud-a.is-on:hover{ color:#000; background:var(--sky); }
    body.nav-over-paper .nav-pill{ background:transparent; box-shadow:none; }
    /* dropdown panels hang from the island */
    .nav-drop-menu{ top:calc(100% + 10px); }
  }
  @media (max-width:900px){
    .nav .wrap.nav-inner{ width:calc(100% - 24px); max-width:none; justify-content:space-between;
      border-radius:0 0 16px 16px; padding:8px 10px 8px 12px; }
    .nav-burger{ background:rgba(250, 246, 239,.08); box-shadow:none; width:40px; height:40px; }
    body.nav-over-paper .nav-burger{ background:rgba(250, 246, 239,.08); box-shadow:none; }
    body.nav-over-paper .nav-burger .bar{ background:var(--paper); }
    .nav-inner::before, .nav-inner::after{ display:none; }
    .nav-pill{ top:calc(100% + 10px); }
  }
  @media (prefers-reduced-motion: reduce){ .nav .wrap.nav-inner{ animation:none; } }

  /* ============== UBEST · Umano-pattern product row ==============
     Benchmark: umanodesign.studio features row — portrait visual panels
     (radius 30) with icon + title + desc captions, bleeding both edges. */
  .ubest .social-head{ margin-bottom:var(--xl); }
  .ubest{ padding-bottom:0; }   /* the finale card's ink handoff must touch the tour */
  .ub-row{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x proximity;
    padding:10px max(24px, calc((100vw - 1240px)/2)) 20px; scrollbar-width:none; }
  .ub-row::-webkit-scrollbar{ display:none; }
  .ub-card{ flex:0 0 auto; width:min(487px, calc((100svh - 300px) * 0.922), 86vw); scroll-snap-align:center; }   /* matches Umano card size (487×528) */
  .ub-card.ub-fin{ position:relative; z-index:3; }
  /* Handing the frame to the lid used to mean visibility:hidden on the whole pin —
     cheap going down (it was already painted), a full re-raster coming back up, which
     is a dropped frame right at the top of the reverse. Yielding by paint order costs
     nothing in either direction. */
  .ub-pinvp.is-yielded .ub-card.ub-fin{ z-index:0; }
  .ub-pinvp{ will-change:opacity; }
  /* Ink, matching .ub-vis.ink — same near-black and the same faint pink bloom
     off the top edge, so it reads as one family with the other dark tiles rather
     than a one-off. The symbol is a data-URI SVG at #A9D7F2 and is untouched. */
  .ub-vis.fin{
    background:radial-gradient(86% 58% at 50% 0%, rgba(222, 242, 255,.13), rgba(222, 242, 255,0) 58%), #0C0C0C;
    display:grid; place-items:center; transform-origin:50% 50%;
    will-change:transform; }
  .ub-fin-sym{ width:214%; max-width:none; transform:scale(.5); will-change:opacity,transform,filter; position:relative; z-index:2; }
  .ub-fin-ink{ position:absolute; inset:0; background:#0C0C0C; opacity:0; pointer-events:none; z-index:1; }
  /* Sits ABOVE the symbol. Darkening the logo used to be a filter:brightness() on a
     ~757px scaled SVG, re-rasterised every frame — that was the stutter. Compositing
     an opacity change is effectively free and looks identical. */
  .ub-fin-veil{ position:absolute; inset:0; background:#0C0C0C; opacity:0; pointer-events:none; z-index:3; }
  .ub-vis{ position:relative; width:100%; aspect-ratio:487/528; border-radius:28px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; }
  /* ---- motion cards ---------------------------------------------------------
     Clips are 860x1068 (0.81) inside a 487x528 frame (0.92), so cover crops the
     top and bottom rather than the sides. 50% 44% matches how the stills were
     already cropped. The poster carries the card until the clip is in view, so it
     never flashes empty, and under reduced motion the clip simply never plays —
     the poster is what stays on screen. */
  .ub-vis.has-clip{ padding:0; gap:0; background:#0C0C0C; }
  .ub-clip{ position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:50% 44%; display:block;
    background:#0C0C0C; }
  .ub-vis.warm{ background:#EAE3D5; }
  .ub-vis.ink{ background:#0C0C0C; }
  .ub-vis.blossom{ background:var(--sky-soft); }
  .ub-vis.mint{ background:#C2E0CA; }
  .ub-mock{ width:80%; background:#fff; border-radius:22px; padding:20px 18px; font-size:13px;
    display:flex; flex-direction:column; gap:10px;
    box-shadow:0 30px 64px -32px rgba(12, 15, 20,.4), 0 0 0 1px rgba(0,0,0,.05); }
  .ub-vis.ink .ub-mock{ background:var(--paper); }

  /* ===== Updated checkout graphic (Delivery-protection platform card) ===== */
  .ub-vis.warm{ container-type:inline-size; }
  .co-mock{ width:86cqw; font-size:3.15cqw; background:var(--sky-soft); border-radius:1.6em; padding:.95em;
    display:flex; flex-direction:column; gap:.74em; box-shadow:0 30px 64px -32px rgba(12, 15, 20,.4), 0 0 0 1px rgba(0,0,0,.04); }
  .co-card{ background:#fff; border-radius:1.15em; padding:1.0em 1.08em; }
  .co-item{ display:flex; align-items:center; gap:.88em; padding:.47em 0; }
  .co-thumb{ width:3.11em; height:3.11em; border-radius:.88em; background:#EFEAE1; display:flex; align-items:center; justify-content:center; flex:none; }
  .co-thumb svg{ width:1.76em; height:1.76em; }
  /* the product shots are keyed to transparent, so the tile IS the background.
     Sized to leave a margin the baked-in white square used to provide. */
  .co-thumb img{ width:2.25em; height:2.25em; object-fit:contain; display:block;
    filter:drop-shadow(0 2px 3px rgba(31, 62, 128,.18)); }
  .co-meta{ flex:1; min-width:0; }
  .co-meta b{ display:block; font-size:1.05em; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
  .co-meta i{ display:block; font-style:normal; font-size:.845em; color:rgba(10,10,10,.5); margin-top:.14em; }
  .co-price{ font-weight:800; font-size:1.05em; color:var(--ink); font-variant-numeric:tabular-nums; flex:none; }
  .co-sub{ display:flex; justify-content:space-between; align-items:center; margin-top:.4em; padding-top:.95em; border-top:1px solid rgba(10,10,10,.09); }
  .co-sub span{ font-size:.95em; color:rgba(10,10,10,.55); }
  .co-sub b{ font-size:1.15em; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
  .co-prot{ display:flex; align-items:center; gap:.81em; padding:1.0em 1.08em; }
  .co-ring{ flex:none; display:flex; } .co-ring svg{ width:2.05em; height:2.05em; } .co-ring img{ width:2.05em; height:2.05em; display:block; }
  .co-prot-main{ flex:1; display:flex; align-items:center; gap:.61em; min-width:0; }
  .co-prot-main b{ font-size:1.05em; font-weight:800; letter-spacing:-.01em; color:var(--ink); }
  .co-i{ width:1.28em; height:1.28em; border-radius:50%; border:1.5px solid rgba(10,10,10,.3); color:rgba(10,10,10,.5);
    font-size:.74em; font-style:italic; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; font-family:Georgia,serif; }
  .co-prot-price{ font-weight:600; font-size:1.01em; color:rgba(10,10,10,.5); font-variant-numeric:tabular-nums; flex:none; }
  .co-btn{ background:var(--ink); color:#fff; border-radius:1.15em; padding:1.0em 0; display:flex; flex-direction:column;
    align-items:center; gap:.2em; font-size:1.15em; font-weight:800; letter-spacing:-.01em; }
  .co-cash{ font-size:.735em; font-weight:600; color:var(--sky); letter-spacing:0; }
  .co-decline{ text-align:center; font-size:.845em; color:rgba(10,10,10,.5); text-decoration:underline; text-underline-offset:2px; margin-top:.07em; }

  /* ---- interactive checkout mock ------------------------------------------
     Lifted from the checkout-treatments file: the info button opens the
     coverage detail, and declining flips the whole card to its unprotected
     state with a real toggle to put it back. */
  .co-i{ font-family:Georgia,serif; cursor:pointer; padding:0; background:none;
    transition:border-color .18s ease, color .18s ease; }
  .co-i:hover{ border-color:var(--ocean-deep); color:var(--ocean-deep); }
  .co-decline{ display:block; width:100%; background:none; border:0; cursor:pointer;
    font-family:inherit; padding:0; }
  .co-decline:hover{ color:rgba(10,10,10,.75); }

  .co-tgl{ width:2.9em; height:1.7em; border:0; padding:0; flex:none; cursor:pointer;
    border-radius:999px; background:rgba(10,10,10,.22); position:relative;
    transition:background .22s ease, box-shadow .22s ease; }
  .co-tgl .co-knob{ position:absolute; top:.19em; left:.19em; width:1.32em; height:1.32em;
    border-radius:50%; background:#121417; transition:transform .22s ease; }
  .co-tgl.is-on{ background:var(--sky); box-shadow:0 0 0 .25em var(--sky-soft); }
  .co-tgl.is-on .co-knob{ transform:translateX(1.2em); }

  /* The panel unrolls on the brand ease rather than snapping: height rides a
     longer decelerating curve, and the rows inside rise in sequence once the
     envelope is opening — head, checks, cash line — so the reveal reads as a
     performance instead of a jump cut. */
  /* Height is animated to the MEASURED value by the script, not a max-height
     cap. max-height 0->22em was the jump cut: the content is only ~13em tall,
     so the eased 22em curve blew through the real height in the first ~150ms
     and the panel was effectively fully open on the second frame. */
  .co-detail{ background:#fff; border-radius:1.0em; margin-top:.6em; padding:0 1.05em;
    height:0; overflow:hidden; opacity:0;
    transition:height .55s cubic-bezier(.32,.72,0,1),
               opacity .38s ease,
               padding .55s cubic-bezier(.32,.72,0,1),
               margin .55s cubic-bezier(.32,.72,0,1); }
  .co-detail.is-open{ opacity:1; padding:.95em 1.05em; }
  .co-detail .co-detail-head,
  .co-detail .co-check,
  .co-detail .co-cashline{
    opacity:0; transform:translateY(9px);
    transition:opacity .38s ease, transform .45s cubic-bezier(.32,.72,0,1); }
  .co-detail.is-open .co-detail-head{ opacity:1; transform:none; transition-delay:.10s; }
  .co-detail.is-open .co-check:nth-child(1){ opacity:1; transform:none; transition-delay:.18s; }
  .co-detail.is-open .co-check:nth-child(2){ opacity:1; transform:none; transition-delay:.26s; }
  .co-detail.is-open .co-check:nth-child(3){ opacity:1; transform:none; transition-delay:.34s; }
  .co-detail.is-open .co-cashline{ opacity:1; transform:none; transition-delay:.44s; }
  .co-detail-head{ display:flex; justify-content:space-between; align-items:baseline; }
  .co-detail-head .t{ font-size:.98em; font-weight:700; color:var(--ink); }
  .co-detail-head .f{ font-size:.98em; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink); }
  .co-checks{ margin-top:.75em; display:flex; flex-direction:column; gap:.5em; }
  .co-check{ display:flex; align-items:center; gap:.6em; font-size:.9em; color:rgba(10,10,10,.72); }
  .co-check svg{ width:1.05em; height:1.05em; flex:none; color:var(--ocean-deep); }
  .co-cashline{ margin-top:.8em; padding-top:.72em; border-top:1px dashed rgba(10,10,10,.14);
    font-size:.9em; font-weight:600; color:var(--ocean-deep); }

  /* the declined state — the shell drains, the mark greys, the fee falls away.
     Two gradients cannot interpolate, so the drained skin lives on an overlay
     whose OPACITY animates; the children ride above it. */
  .co-mock{ position:relative; }
  .co-mock > *{ position:relative; z-index:1; }
  .co-mock::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:radial-gradient(96% 56% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), #E4E2E8;
    opacity:0; transition:opacity .5s ease; }
  .co-mock.is-off::after{ opacity:1; }
  .co-ring img{ transition:filter .45s ease; }
  .co-mock.is-off .co-ring img{ filter:grayscale(1) opacity(.45); }
  .co-prot-price{ transition:color .35s ease, opacity .16s ease; }
  .co-mock.is-off .co-prot-price{ color:rgba(10,10,10,.32); }
  .co-decline{ transition:color .35s ease, opacity .16s ease; }
  .co-mock.is-off .co-decline{ color:var(--ocean-deep); font-weight:700; }

  /* toggle collapses away instead of popping via [hidden] */
  .co-tgl.is-gone{ width:0; min-width:0; opacity:0; margin-left:-.81em; pointer-events:none; }
  .co-tgl{ transition:background .22s ease, box-shadow .22s ease,
           width .32s cubic-bezier(.32,.72,0,1), opacity .26s ease,
           margin .32s cubic-bezier(.32,.72,0,1); overflow:hidden; }

  /* the cash-back line under Checkout folds shut rather than display:none */
  .co-cash{ display:block; overflow:hidden; max-height:1.5em;
    transition:max-height .34s cubic-bezier(.32,.72,0,1), opacity .28s ease,
               margin .34s cubic-bezier(.32,.72,0,1); }
  .co-mock.is-off .co-cash{ max-height:0; opacity:0; margin-top:0; }

  /* text swaps crossfade */
  .co-prot-main b{ transition:opacity .16s ease; }

  /* ---- checkout press-through -------------------------------------------- */
  .co-btn{ width:100%; border:0; cursor:pointer; font-family:inherit;
    transition:transform .16s cubic-bezier(.32,.72,0,1), opacity .3s ease, filter .3s ease; }
  .co-btn:active{ transform:scale(.985); }
  .co-btn.is-busy{ pointer-events:none; }
  .co-btn.is-busy .co-btn-label{ opacity:0; }
  .co-btn.is-busy .co-cash{ opacity:0; }
  .co-btn-label{ position:relative; transition:opacity .2s ease; }
  .co-btn.is-busy::before{ content:""; position:absolute; left:50%; top:50%;
    width:1.15em; height:1.15em; margin:-.575em 0 0 -.575em; border-radius:50%;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:coSpin .7s linear infinite; }
  .co-btn{ position:relative; }
  @keyframes coSpin{ to{ transform:rotate(360deg); } }

  /* confirmation folds open under the button */
  .co-done{ height:0; overflow:hidden; opacity:0; text-align:center;
    background:#fff; border-radius:1.15em; margin-top:0;
    transition:height .5s cubic-bezier(.32,.72,0,1), opacity .35s ease,
               margin .5s cubic-bezier(.32,.72,0,1); }
  .co-mock.is-done .co-done{ opacity:1; margin-top:.6em; }
  .co-done-tick{ width:2.2em; height:2.2em; margin:1.0em auto .45em; border-radius:50%;
    background:var(--sage); color:#14301F; display:flex; align-items:center; justify-content:center; }
  .co-done-tick svg{ width:1.1em; height:1.1em; }
  .co-done-tick{ transform:scale(.4); opacity:0;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1) .12s, opacity .3s ease .12s; }
  .co-mock.is-done .co-done-tick{ transform:none; opacity:1; }
  .co-done-t{ font-size:1.08em; font-weight:800; letter-spacing:-.01em; color:var(--ink);
    opacity:0; transform:translateY(7px); transition:opacity .35s ease .22s, transform .4s cubic-bezier(.32,.72,0,1) .22s; }
  .co-mock.is-done .co-done-t{ opacity:1; transform:none; }
  .co-done-rows{ padding:.65em 1.05em 1.0em; }
  .co-done-row{ display:flex; justify-content:space-between; align-items:baseline;
    padding:.5em 0; border-bottom:1px dashed rgba(10,10,10,.10);
    font-size:.9em; color:rgba(10,10,10,.62);
    opacity:0; transform:translateY(7px);
    transition:opacity .35s ease, transform .4s cubic-bezier(.32,.72,0,1); }
  .co-done-row:last-child{ border-bottom:0; }
  .co-done-row b{ font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  .co-done-row.is-cb b{ color:var(--ocean-deep); }
  .co-mock.is-done .co-done-row.is-show:nth-of-type(1){ opacity:1; transform:none; transition-delay:.32s; }
  .co-mock.is-done .co-done-row.is-show:nth-of-type(2){ opacity:1; transform:none; transition-delay:.42s; }
  .co-mock.is-done .co-done-row.is-show:nth-of-type(3){ opacity:1; transform:none; transition-delay:.32s; }
  .co-done-row:not(.is-show){ display:none; }
  /* while confirmed, the button rests */
  .co-mock.is-done .co-btn{ opacity:.45; filter:saturate(.6); pointer-events:none; }
  /* Once the order is placed, coverage is settled: the opt-out and the re-add
     both go with it, so the preview never offers protection after checkout.
     Space is held rather than collapsed so the confirmation does not jump. */
  .co-mock.is-done .co-decline{ opacity:0; visibility:hidden; pointer-events:none; }
  @media (prefers-reduced-motion:reduce){
    .co-btn, .co-done, .co-done-tick, .co-done-t, .co-done-row{ transition:none; }
    .co-btn.is-busy::before{ animation:none; } }
  @media (prefers-reduced-motion:reduce){
    .co-detail, .co-tgl, .co-tgl .co-knob,
    .co-detail .co-detail-head, .co-detail .co-check, .co-detail .co-cashline{
      transition:none; }
    .co-detail .co-detail-head, .co-detail .co-check, .co-detail .co-cashline{
      opacity:1; transform:none; } }

  .ub-cap{ padding:16px 6px 0; }
  /* card caption type matched to Umano: 20px/700 title, 18px/500 body (Geist kept as the brand face) */
  .ub-cap h3{ display:flex; align-items:center; gap:10px; margin:0 0 8px;
    font-size:20px; font-weight:700; letter-spacing:-.2px; color:var(--ink); }
  .ub-cap h3 svg{ width:20px; height:20px; color:var(--ocean-deep); flex:none; }
  .ub-cap p{ margin:0; font-size:18px; font-weight:500; line-height:1.4; color:rgba(10,10,10,.85); max-width:94%; }
  .ub-cap p b{ color:var(--ink); font-weight:700; }
  .ub-pattern{ display:grid; grid-template-columns:repeat(5, 28px); gap:46px 40px;
    align-content:center; justify-content:center; }
  .ub-pattern span{ place-self:center; }
  .ub-pattern .pd{ width:11px; height:11px; border-radius:50%; background:var(--ocean, #6B8FD6); }
  .ub-pattern .pl{ width:27px; height:27px; background:var(--ocean, #6B8FD6); border-radius:50% 50% 50% 0; }
  .ub-pattern .pl:nth-child(3n){ transform:rotate(90deg); }
  .ub-pattern .pl:nth-child(4n){ transform:rotate(180deg); }
  .ub-pattern .pl:nth-child(7n){ transform:rotate(-90deg); }
  .ub-chips{ position:absolute; left:22px; right:22px; bottom:30px; height:200px; }
  .uc{ position:absolute; background:#fff; border-radius:15px; padding:13px 17px;
    font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--ink); white-space:nowrap;
    box-shadow:0 16px 36px -18px rgba(12, 15, 20,.35), 0 0 0 1px rgba(0,0,0,.045); }
  .uc.sky{ background:var(--sky); }
  .uc.s1{ left:4%; bottom:4%; transform:rotate(-2deg); }
  .uc.s2{ left:34%; bottom:0; transform:rotate(1.5deg); }
  .uc.s3{ left:62%; bottom:20%; transform:rotate(-1deg); }
  .uc.s4{ left:12%; bottom:34%; transform:rotate(2deg); }
  .uc.s5{ left:47%; bottom:38%; transform:rotate(-2.5deg); }
  .uc.s6{ left:74%; bottom:44%; transform:rotate(1deg); }
  .uc.s7{ left:30%; bottom:68%; transform:rotate(-1.5deg); }
  .ub-loop{ width:150px; height:150px; border-radius:50%; background:#fff; display:grid; place-items:center;
    box-shadow:0 30px 64px -30px rgba(20,40,28,.45), 0 0 0 1px rgba(0,0,0,.04); }
  .ub-loop svg{ width:58px; height:58px; color:var(--ocean-deep); }
  .ub-loop-chip{ background:#fff; border-radius:999px; padding:10px 18px; font-size:12.5px; font-weight:700;
    box-shadow:0 12px 28px -14px rgba(20,40,28,.4); }
  /* Umano scroll mechanism: runway + sticky window, vertical scroll scrubs
     the row horizontally (JS sets runway height and drives translate3d).
     Below 900px / reduced-motion it falls back to a natural swipe row. */
  .ub-runway{ position:relative; }
  body.ubpin .ub-pinvp{ position:sticky; top:0; height:100svh; display:flex;
    flex-direction:column; justify-content:center; overflow:hidden;
    /* centre the card row in the space BELOW the floating nav so the panels
       keep clean spacing above and below and never clip under the nav */
    box-sizing:border-box; padding-top:76px; }
  body.ubpin .ub-row{ overflow:visible; scroll-snap-type:none; will-change:transform; }
  /* The tour overlaps the runway's tail by exactly one viewport: the logo's fade+lift
     and the lid's descent share the same scroll, so rel=0 lands on p=1 and there is no
     empty viewport between them. Umano's card->next-section handoff overlaps this way. */
  body.ubpin .tour{ margin-top:-100svh; }
  .ubest .logo-strip{ margin-top:var(--xl); }
  @media (max-width:760px){
    .ub-row{ gap:16px; }
    .ub-vis{ border-radius:24px; }
  }
/* Umano-style logo tiles — jostled by scroll velocity in the driver */
  .ub-tiles{ position:absolute; inset:0; }
  .uc2{ position:absolute; z-index:2; left:0; top:0; width:110px; height:110px; border-radius:24px; background:#fff;
    display:grid; place-items:center; will-change:transform;
    box-shadow:0 22px 46px -24px rgba(12, 15, 20,.3); }

  /* ---- glass integration pills -------------------------------------------
     Rendering from the design kit; motion stays on the card's own sim, so no
     GSAP/Matter dependency. That sim translates only — tiles never rotate —
     which means the sheen stays world-locked for free. */
  /* .ub-vis.warm is restated later by the glass-card layer, so this needs the
     extra class to outrank it rather than relying on order */
  .ub-vis.warm.ub-pills{
    isolation:isolate;
    background:
      radial-gradient(120% 90% at 22% 12%, #DCEAF3 0%, transparent 62%),
      radial-gradient(130% 100% at 88% 96%, #A9C7D9 0%, transparent 58%),
      linear-gradient(150deg, #DCEAF3 0%, #C2D8E6 58%, #A9C7D9 100%); }
  .ub-vis.warm.ub-pills::after{
    /* z-index 0, not 4 — in the kit the stage noise sits BELOW the pills
       (they are z-index 2). Above them it dusts every pill face. */
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    opacity:.16; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .ub-pills .ub-glow{
    position:absolute; left:50%; top:52%; width:46%; aspect-ratio:1; z-index:0;
    transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
    background:radial-gradient(circle, #5FC2FF 0%, transparent 68%);
    filter:blur(46px); opacity:.34; }

  /* one shared pill render, carried as a background so the 224px source is
     stored once instead of seven times */
  .uc2.cvp{ background:transparent; border-radius:25px; box-shadow:none; }
  /* the light is world-locked, so the shadow cannot rotate with the pill —
     it is a separate body offset down-right in world space, as in the kit */
  .cvp-shadow{ position:absolute; left:0; top:0; border-radius:25px;
    background:rgba(44, 70, 122,.22); filter:blur(14px); will-change:transform; z-index:1; }
  .uc2.cvp::before{
    content:""; position:absolute; inset:0; z-index:1; border-radius:25px;
    background-image:url("/assets/img/e4a00f7606.webp"); background-size:100% 100%; opacity:.94; }
  .cvp-refract{
    position:absolute; inset:4%; z-index:0; border-radius:23px;
    backdrop-filter:blur(7px) saturate(1.35) brightness(1.04);
    -webkit-backdrop-filter:blur(7px) saturate(1.35) brightness(1.04); }
  .cvp-sheen{
    position:absolute; inset:3.5%; z-index:2; border-radius:23px;
    pointer-events:none; mix-blend-mode:screen;
    background:
      radial-gradient(60% 42% at 32% 24%, rgba(255,255,255,.38) 0%, rgba(255,255,255,.08) 36%, transparent 58%),
      linear-gradient(155deg, rgba(255,255,255,.12) 0%, transparent 40%, transparent 76%, rgba(40, 67, 120,.08) 100%); }
  .cvp-mark{
    position:relative; z-index:3; width:57%; height:auto;
    filter:drop-shadow(0 1px 2px rgba(255,255,255,.55)) drop-shadow(0 1px 4px rgba(30, 50, 90,.28)); }
  .cvp-mark.m-klaviyo{ width:64%; }
  .cvp-mark.m-woocommerce{ width:64%; }
  .cvp-label{
    position:relative; z-index:3; width:74%; text-align:center; line-height:1.12;
    font-family:var(--sans); font-weight:700; font-size:16px;
    letter-spacing:-.01em; color:#222B3D; }
  @media (prefers-reduced-motion:reduce){
    .cvp-refract{ backdrop-filter:none; -webkit-backdrop-filter:none; } }

  .uc2 svg{ width:40px; height:40px; display:block; }
  .uc2 svg[viewBox="0 0 24 24"][data-w]{ width:48px; height:48px; }
  .uc2.sky{ background:var(--sky); font-weight:800; font-size:17px; letter-spacing:.02em; color:#000; }
  .uc2.mono{ font-weight:800; font-size:26px; color:var(--ink); }
  .uc2.lbl{ font-weight:700; font-size:12.5px; letter-spacing:-.01em; line-height:1.1; color:var(--ink); text-align:center; padding:0 9px; }
  /* brand tiles — Shopify/Woo/BigCommerce hexes via simple-icons, Slack aubergine (official);
     Klaviyo/Gorgias/Shopline ship their real dark-on-white lockups */
  .uc2.b-shopify{ background:#7AB55C; }
  .uc2.b-woo{ background:#96588A; }
  .uc2.b-bigc{ background:#F7F7F7; overflow:hidden; }   /* BigCommerce official mark — diagonal split, full-bleed */
  .uc2.b-bigc svg{ width:100%; height:100%; }
  .uc2.b-slack{ background:#4A154B; }
  .uc2.b-klaviyo{ background:#EC5942; }   /* Klaviyo poppy — sampled from official lockup */
  .uc2.b-klaviyo img{ width:76%; display:block; }
  .uc2.b-shopline{ background:#2755D2; }  /* SHOPLINE blue — sampled from official lockup */
  .uc2.b-shopline img{ width:82%; display:block; }
  .uc2.b-ink{ background:var(--ink); color:var(--paper); }
  .uc2.wm{ font-weight:800; color:var(--ink); text-align:center; }
  .uc2.wm-g{ font-size:14.5px; letter-spacing:-.02em; }
  .uc2.wm-s{ font-size:10.5px; letter-spacing:.06em; }

/* ── photographic clouds ──
   These lived in the late PHOTO-SKY block after the hero markup; the parser painted the hero long
   before it reached them, so the first frames were the sky with no cover, then the bank fog with
   no clouds in it. Here, at the end of the head, they still outrank the cartoon-pass rules above. */
/* Cutout clouds with real alpha: ratios 1.61-1.94, so height follows the
   file. max-width:none matters — several are wider than their parent and the
   global img{max-width:100%} would clamp them. Their edges are pre-feathered,
   so the halo glow that softened the vector edge is retired. */
.cph, .cpa, .cpf{ position:absolute; pointer-events:none; user-select:none;
  height:auto; max-width:none; aspect-ratio:auto; filter:none; }
/* sparkles: tiny, behind the text, breathing slowly */
.cst{ position:absolute; pointer-events:none; user-select:none; height:auto;
  animation:stTwinkle 5.2s ease-in-out infinite; }
.cst.s1{ width:34px; top:12%;  left:37%; animation-delay:-1.2s; }
.cst.s2{ width:24px; top:20%;  left:8%;  animation-delay:-2.8s; }
.cst.s3{ width:44px; top:31%;  left:88%; animation-delay:-0.6s; }
.cst.s4{ width:22px; top:47%;  left:20%; animation-delay:-3.9s; }
.cst.s5{ width:28px; top:64%;  left:79%; animation-delay:-2.1s; }
.cst.s6{ width:38px; top:76%;  left:55%; animation-delay:-4.6s; }
@keyframes stTwinkle{
  0%,100%{ opacity:.55; transform:scale(.92); }
  50%{ opacity:1; transform:scale(1.06); } }
@media (prefers-reduced-motion:reduce){ .cst{ animation:none; opacity:.8; } }
/* banks: big layered masses + a fog fill so the cover state has no gaps */
/* inset -12% let the fog poke 14vw back into the viewport once the bank was
   parked — that was the diagonal "beam" seam on the left of the sky */
.cl-bank::before{ content:""; position:absolute; inset:-2%;
  background:radial-gradient(58% 58% at 50% 50%, rgba(252,254,255,.98) 42%, rgba(244,250,255,.75) 66%, rgba(244,250,255,0) 88%); }
.cl-bank .b1{ width:92%;  top:-10%; }
.cl-bank .b2{ width:108%; top:24%; }
.cl-bank .b3{ width:96%;  top:60%; }
.cl-bank .b4{ width:70%;  top:42%; }
#cloudL .b1{ left:-8%; }  #cloudL .b2{ left:-16%; } #cloudL .b3{ left:-4%; } #cloudL .b4{ left:30%; transform:scaleX(-1); }
#cloudR .b1{ right:-8%; } #cloudR .b2{ right:-16%; } #cloudR .b3{ right:-4%; } #cloudR .b4{ right:30%; }
#cloudR .cph{ transform:scaleX(-1); }
/* breathing on the bank puffs — ±8px, phases offset so no two move together.
   It rides the `translate` property, so the reveal driver's transform on the
   bank container and the scaleX flips on the puffs are untouched. */
.cl-bank .cph{ animation:bankBreath 18s ease-in-out infinite; }
.cl-bank .b2{ animation-duration:22s; animation-delay:-7s; }
.cl-bank .b3{ animation-duration:16s; animation-delay:-11s; }
.cl-bank .b4{ animation-duration:20s; animation-delay:-4s; }
@keyframes bankBreath{
  0%,100%{ translate:0 0; }
  50%{ translate:8px -4px; } }
#cloudR .b4{ transform:none; }
/* ambient: small, far, soft */
.cl-ambient .cpa{ opacity:1; }
/* Wind, not oscillation: every free cloud travels left-to-right and wraps
   offscreen — both ends of the loop are outside the viewport, so the jump is
   never seen. Speed encodes depth: smaller = farther = slower. Negative delays
   put each cloud mid-flight on load, at roughly its old spot. */
.cl-ambient .a1{ width:300px; top:16%; left:-420px; animation:skyWind 190s linear infinite; animation-delay:-38s; }
.cl-ambient .a2{ width:190px; top:10%; left:-420px; animation:skyWind 260s linear infinite; animation-delay:-161s; }
.cl-ambient .a3{ width:150px; top:11%; left:-420px; animation:skyWind 320s linear infinite; animation-delay:-150s; }
@keyframes skyWind{
  from{ translate:0 0; }
  to{ translate:calc(100vw + 840px) 0; } }
/* foreground deck along the bottom, in front of the stamps' shadow zone */
/* the vector cloud is far taller than the photo at the same width (240:150 vs
   627:296) — the old widths made the deck swallow half the hero */
.cl-floor{ position:absolute; left:0; right:0; bottom:-6%; height:26%;
  z-index:2; pointer-events:none; }
.cl-floor .cpf{ bottom:0; }
.cl-floor .f1{ width:34%; left:-5%;
  animation:deckSway 30s ease-in-out infinite; }
.cl-floor .f2{ width:28%; left:33%; bottom:-34%; transform:scaleX(-1);
  animation:deckSway 26s ease-in-out infinite; animation-delay:-9s; }
.cl-floor .f3{ width:36%; right:-6%; bottom:-12%;
  animation:deckSway 34s ease-in-out infinite; animation-delay:-19s; }
/* the deck anchors the frame, so it sways and settles instead of crossing */
@keyframes deckSway{
  0%,100%{ translate:0 0; }
  30%{ translate:13px -5px; }
  55%{ translate:20px 1px; }
  80%{ translate:7px 4px; } }

@media (max-width:900px){
  /* stacked CTAs own the centre column on mobile, so the cards peek in from
     the edges instead — the ref crops its edge cards the same way */
  .oc.c-rose{   left:5%  !important; top:38% !important; }
  .oc.c-gold{   left:95% !important; top:38% !important; }
  .oc.c-green{  left:7%  !important; top:74% !important; }
  .oc.c-purple{ left:93% !important; top:74% !important; }
  /* ambient clouds shrink well below headline scale */
  /* start offscreen on mobile too — an onscreen origin makes the wrap pop */
  .cl-ambient .a1{ width:130px; top:6%; left:-180px; }
  .cl-ambient .a2{ width:100px; top:4%; left:-180px; animation-delay:-190s; }
  .cl-ambient .a3{ display:none; }
  .cl-floor .f2{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .cpa, .cpf, .cl-bank .cph{ animation:none; } }

/* ── src/index.html:5109 ── */
/* ══════════════════════════════════════════════════════════════════════════
   POSTY · type register overlay
   Display  -> Bauhaus Vole VF, SemiBold, mixed case, never all caps
   Body     -> Systemia
   Chrome   -> IBM Plex Mono  (labels, captions, eyebrows, page furniture)
   ══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3,
h1.hero-title, .hero-title,
.calc h2, .cta-final h2, .pricing h2, .cascade h2, .journey-head h2, .bynums h2,
.social-head h2, .pin-head h2, .tour-head h2, .support-head h2, .shp-outro h2,
.bn2-h2, .t-title, .tz-title, .pin-block h3, .vj-meta h3, .demo-done h3,
.stmt-line, .tz-quote, .nav-mega-spot h4, .demo-host-title{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.035em;
}
.stmt-line, .tz-quote{ letter-spacing:-0.028em; }
.calc-eye, .pricing-eye, .t-eye{ font-family:var(--display); font-weight:600; }

/* Secondary display · the quiet, generous statement voice */
.stmt.is-ink .stmt-line{ font-family:var(--display-light); font-weight:300; letter-spacing:-0.005em; }

/* Chrome · everything that reads as filing rather than reading */
.bn2-eye, .demo-step-eye, .ft-eye, .lbl, .nav-mega-eye, .nav-mega-spot-eye,
.tz-lbl, .bpx-cap, .bpx-eye, .bpx-head-eye, .bpx-stage, .brand-tag,
.bynums-label, .cc-metric-lbl, .cc-tag, .cta-final-eye, .journey-stage-eye,
.pcx-lbl, .pin-stage, .pricing-tier-lbl, .si-eye, .t-brands-label,
.tw-eye, .twall-eye, .tz-eye{
  font-family:var(--mono) !important;
  font-weight:500;
  letter-spacing:.04em;
}

/* Display numerals · Systemia, each at the weight its own block sets, always
   tabular so the counting figures do not reflow as they tick. */
.bn2-num, .bynums-num, .tz-num, .calc-output, .pt-earn .num, .pcx-hero-num,
.pcx-big .pcx-num, .calc-input, .calc-prefix, .tp-big b, .cc-metric,
.vj-stat b, .hero-chips .chip b{
  font-family:var(--sans);
  /* stepped down from the 700-800 each block sets: at display size that weight
     was competing with the Bauhaus headlines. 500 is a real embedded cut. */
  font-weight:500 !important;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* The accent word · sky on ink, ocean deep on cream */
h1.hero-title .accent{ color:var(--sky); }
.is-paper .accent, .is-sky .accent{ color:var(--ocean-deep); }
/* Light-themed ink sections: sky would not clear 4.5:1 on cream, so ocean deep carries it */
.tz.is-light .tz-title .accent, .trust.is-light .accent, .is-light .accent{ color:var(--ocean-deep); }

/* ── Art · the pink 3D renders rotated into the Posty blues.
      The green returns clip and the neutral product shots are left alone. ── */
/* The four product stills are the real Posty character, already drawn in brand
   blue — the rotation that rescued the borrowed pink renders would push them off
   palette. Only the integration tiles still need it. */
.uc2.cvp::before{
  filter:hue-rotate(250deg) saturate(.88);
}
/* Art is 1100x1366 (0.81) in a 487x528 frame (0.92): cover crops top and bottom.
   Walking Posty is framed to his shoes, so that one holds its baseline instead. */
.ub-vis.has-clip{ background:#BFDDF6; }
img.ub-clip{ background:#BFDDF6; }
/* Bottom-aligned: the art is only 173px taller than the frame and his shoes sit
   at its very bottom edge, so anchoring to the base shows the foreground grass
   and spends the surplus headroom above his head. */
img.ub-clip[data-a="k5"]{ object-position:50% 100%; }
video.ub-clip[data-clip="k5"]{ object-position:50% 100%; }
/* Ticket resolution: spend the new sunset scene’s extra headroom above the mascot,
   preserving the waving glove, table, and shoes within the card crop. */
img.ub-clip[data-a="k2"]{ object-position:50% 100%; }
video.ub-clip[data-clip="k2"]{ object-position:50% 100%; }
/* delivery: nudged down from the shared 44% default to show more of the hills
   glimpsed far below the cloud deck */
img.ub-clip[data-a="k3"]{ object-position:50% 64%; }
video.ub-clip[data-clip="k3"]{ object-position:50% 64%; }
/* loyalty: bottom-aligned so the glowing money in the grass stays in frame and
   the blue-hour sky does not run to empty above the mailbox */
img.ub-clip[data-a="k4"]{ object-position:50% 100%; }
video.ub-clip[data-clip="k4"]{ object-position:50% 100%; }
/* The assistant art is the real Posty character now, drawn in brand colours:
   the rotation that rescued the old borrowed mascot would push it off-palette. */
/* The protection tile is mostly cardboard, not pink light: rotating it turned
   the parcels violet. Taking the colour out instead leaves the parcels their
   own warm tone and the rim arc white. Placeholder until the shot is re-rendered. */
.nav-mega-tile[href*="shipping_insurance"] .nav-mega-tile-shot{
  filter:grayscale(.86) brightness(1.03) contrast(1.04); }

/* ── src/index.html:5200 ── */
/* the closer's background-colour is the deep dusk the gradient starts on; at 2x/3x the
   bottom-aligned gradient image can stop a half device pixel short of the box edge and that
   colour showed as a dark hairline over the footer (phones, 9 Sep). The colour under the
   gradient is now the sky it ends on, so anything that peeks is sky. */
#cta-final.cta-final.is-paper{ background-color:#BDA1C0; }
.ub-mhead-ride{ display:none; }
@media (min-width:761px){
  #products:not(.is-unpinned) .ub-pinvp .ub-mhead{ display:none; }
  #products:not(.is-unpinned) .ub-row > .ub-card:first-child{ position:relative; }
  #products:not(.is-unpinned) .ub-mhead-ride{ display:block; position:absolute; left:0; bottom:calc(100% + 26px); margin:0; white-space:nowrap; pointer-events:none; z-index:5;
    font-family:var(--display); font-size:clamp(34px, 3.2vw, 50px); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--ink); }
}
.demo-error{ margin:0; font-size:13px; line-height:1.5; color:#B3261E; text-align:center; }
.demo-error:empty{ display:none; }
/* below the notes field everything stacks and centres: button, fine print, error, then the Turnstile badge last */
.demo-form .demo-form-actions{ flex-direction:column; align-items:center; gap:10px; margin-top:10px; text-align:center; }
.demo-form .demo-fineprint{ max-width:none; text-align:center; }
.demo-form .cf-turnstile{ grid-column:1 / -1; display:flex; justify-content:center; margin:22px 0 0; }
/* the sent state centres too: check, heading, note, button, on the card's centre line */
.demo-sched .demo-done{ align-items:center; text-align:center; max-width:none; }
.demo-sched .demo-done-note{ max-width:410px; }
/* tour aura on phones: WebKit clips filter:blur() to the box under contain:paint, so the glow ended in a hard
   full-width rectangle below the phone frame (Rob, iOS, 9 Sep). Fade it out before its top and bottom edges. */
@media (max-width:760px){ .tour-aura{ -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 24%, #000 76%, transparent 100%); } }
/* pricing on phones: the label (headline, copy, Book a demo) and the scrubbing stat share the pin, and the
   stat's full-height view layer (z-index 2, later in the DOM) sat over the button and swallowed every tap.
   Nothing in it is interactive, so let taps pass through. Desktop lays them side by side and is untouched. */
@media (max-width:760px){ .bn2-view, .bn2-stack, .bn2-stat{ pointer-events:none; } }
/* postcard on phones: the stacked-actions rule (align-items:stretch) was written for two buttons; with one it
   stretched the pill to the card's width with the label hard left. Hug the label, centre it, breathe before the
   postmark line. The id selector outranks Frank's later rules and their !important margin. */
@media (max-width:760px){
  #cta-final .postcard .actions{ align-items:center; margin-top:26px; }
  #cta-final .postcard .actions .btn{ width:auto; justify-content:center; text-align:center; padding:15px 28px; }
  #cta-final .postcard .pc-from{ margin-top:28px !important; }
}

/* ── src/index.html:5238 · #posty-approved-soft-hero ── */
.hero.hero-globe.hero-world{height:100svh;min-height:800px;position:relative;margin:0;padding:clamp(128px,16svh,164px) 0 0;overflow:hidden;isolation:isolate;display:block;text-align:center;background:#abd7f5}
.hero.hero-globe.hero-world:before,.hero.hero-globe.hero-world:after{display:none}
.cloud-world{position:absolute;inset:0;z-index:0;pointer-events:none;display:block;overflow:hidden}
.cloud-world img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;user-select:none;-webkit-user-drag:none}
.hero.hero-globe.hero-world .hero-center{position:relative;z-index:2;width:min(960px,100% - 64px);max-width:960px;padding:0;margin:0 auto;transform:none;will-change:auto}
.hero.hero-globe.hero-world .hero-center:before{display:none}
.hero.hero-globe.hero-world .hero-title{font-family:var(--display);font-weight:600;font-size:clamp(48px,5.7vw,82px);max-width:15ch;line-height:1.07;letter-spacing:-.02em;color:#16181c;margin:0 auto;text-wrap:balance;animation:none}
.hero.hero-globe.hero-world .hero-title .accent{color:var(--ocean-deep)}
.hero.hero-globe.hero-world .hero-sub{font-family:var(--sans);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.5;letter-spacing:-.005em;max-width:none;margin:22px auto 0;color:#293d51;text-wrap:initial;animation:none}
.hero.hero-globe.hero-world .hero-cta{justify-content:center;align-items:stretch;gap:14px;margin:27px 0 0;animation:none}
.hero.hero-globe.hero-world .hero-cta .btn{min-height:62px;justify-content:center}
.hero.hero-globe.hero-world .hero-cta .btn-sky{padding:16px 28px;font-size:16px}
.hero.hero-globe.hero-world .hero-cta .btn-glass{padding:16px 26px;font-size:16px}
.hero.hero-globe.hero-world .hero-cta .btn-sky:before{animation:none;opacity:.7}
#hero .btn .arrow{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px #1b3e7a55;font-size:18px;margin-left:3px}
@media(max-width:1050px) and (min-width:761px){
  .hero.hero-globe.hero-world .hero-sub{max-width:650px!important}
  #hero .hs-br{display:none}
}
@media(max-width:760px){
  .nav{padding-top:19px}
  .hero.hero-globe.hero-world{height:auto;min-height:max(100svh,860px);padding:146px 0 370px}
  .cloud-world img{object-position:50% 50%}
  .hero.hero-globe.hero-world .hero-center{position:relative;top:auto;left:auto;right:auto;width:calc(100% - 40px);max-width:none;padding:0;transform:none}
  .hero.hero-globe.hero-world .hero-title{font-size:clamp(25px,8.4vw,44px);line-height:1.06;letter-spacing:-.025em;max-width:none;width:100%;text-wrap:balance}
  .hero.hero-globe.hero-world .hero-title .accent{display:block}
  .hero.hero-globe.hero-world .hero-sub{font-size:17px;line-height:1.5;max-width:350px!important;margin-top:22px;text-wrap:balance}
  #hero .hs-br{display:none}
  .hero.hero-globe.hero-world .hero-cta{flex-direction:column;align-items:stretch;gap:11px;margin:26px auto 0;width:min(100%,326px)}
  .hero.hero-globe.hero-world .hero-cta .btn{min-height:60px;width:100%;font-size:15px;justify-content:center}
}
@media(max-width:390px){
  .hero.hero-globe.hero-world .hero-sub{font-size:16px;max-width:315px!important}
  .hero.hero-globe.hero-world .hero-center{width:calc(100% - 38px)}
  .hero.hero-globe.hero-world .hero-cta{max-width:300px}
}
@media(prefers-reduced-motion:reduce){#hero *,#hero *:before,#hero *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the full landing edge-to-edge; widget-only mobile padding must not leak. */
body:has(#hero.hero-world){padding:0}
/* Preserve the approved page's continuous scroll-under handoff. */
body.sw-on #hero.hero-world.sw-under{position:sticky;top:0;z-index:0}
#hero.hero-world .hero-title,#hero.hero-world .hero-sub{transform:none!important}
/* Original brand-book stars, set at their original aspect ratio and color. */
.brand-stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.brand-star{position:absolute;height:auto;max-width:none;user-select:none;-webkit-user-drag:none}
.star-near{width:42px;right:10%;top:21%}
.star-high{width:28px;left:26%;top:9%}
.star-distant{width:16px;left:17%;top:37%}
@media(max-width:1050px) and (min-width:761px){
  .star-near{right:5%;width:34px}
  .star-high{left:16%;top:10%;width:22px}
  .star-distant{left:10%;width:13px}
}
@media(max-width:760px){
  .star-near{right:10%;top:112px;width:24px}
  .star-high{left:13%;top:99px;width:18px}
  .star-distant{left:4%;top:318px;width:11px}
}

/* ── src/index.html:5299 · #posty-hero-cloud-placement ── */
/* Keep the chosen scene intact, with an open band of sky beneath the CTAs. */
#hero.hero-world{--world-drop:19%;--world-sky-blend:16%}
#hero.hero-world .cloud-world-sky{z-index:0;filter:blur(18px);transform:scale(1.06)}
#hero.hero-world .cloud-world:not(.cloud-world-sky){
  z-index:1;
  transform:translateY(var(--world-drop));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--world-sky-blend));
  mask-image:linear-gradient(to bottom,transparent,#000 var(--world-sky-blend));
}
#hero.hero-world .brand-stars{z-index:2}
#hero.hero-world .hero-center{z-index:3}
@media(max-width:760px){
  #hero.hero-world{--world-drop:23%;--world-sky-blend:8%}
}

/* ── src/index.html:5315 · #posty-stable-hero-handoff ── */
/* The sky and copy use their final geometry before any body scripts execute. */
#hero.hero-world .hero-title,
#hero.hero-world .hero-sub,
#hero.hero-world .hero-cta{animation:none!important;filter:none!important}
#hero.hero-world .hero-center{transition:none;filter:none}
@media(prefers-reduced-motion:no-preference){
  #hero.hero-world{position:sticky;top:0;z-index:0}
  #hero.hero-world + .sec-trans{display:none}
  body :where(#hero.hero-world ~ section,#hero.hero-world ~ .sec-trans,#hero.hero-world ~ footer,#hero.hero-world ~ .si-canvas){position:relative;z-index:2}
}
@media(prefers-reduced-motion:reduce){
  body.sw-on #hero.hero-world.sw-under{position:relative;top:auto}
  #hero.hero-world .hero-center{opacity:1!important}
}

/* ── src/index.html:9002 ── */


/* ── src/index.html:9011 ── */
/* Fix #2 · interactivity floor */
.cta-final-mark{ transition:transform .3s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.pt-earn .num.counting{ }
@media (prefers-reduced-motion:reduce){ .cta-final-mark{ transition:none; } }

/* ── src/index.html:9041 ── */
/* Fix #4 · retire the two-tone-gray tic in 2 spots: rose accent instead of gray */
.support .support-head h2 .soft{ color:var(--ocean-deep) !important; }
.cta-final .cta-final-panel h2 .soft{ color:var(--ocean-deep) !important; }

/* ── src/index.html:9047 ── */
/* Fix #5 · frame the Platform console as a DESKTOP window (operator's view) —
   distinct from the Tour's shopper phone. */
.products-pinned .pin-stage{ border-radius:16px; background:#fff; overflow:visible;
  box-shadow:0 34px 82px -42px rgba(12, 15, 20,.26), inset 0 0 0 1px rgba(0,0,0,.08); }
.products-pinned .pin-chrome{ position:absolute; top:0; left:0; right:0; height:32px; z-index:6;
  border-radius:16px 16px 0 0; border-bottom:1px solid rgba(0,0,0,.06);
  background:
    radial-gradient(circle at 15px 16px,#A6CEE7 3px,transparent 3.4px),
    radial-gradient(circle at 31px 16px,#EBCEA6 3px,transparent 3.4px),
    radial-gradient(circle at 47px 16px,#A9D3B8 3px,transparent 3.4px),
    linear-gradient(#FBFAF7,#F1EDE6);
  display:flex; align-items:center; justify-content:center; }
.products-pinned .pin-chrome span{ font-family:var(--sans); font-size:10.5px; letter-spacing:.02em; color:rgba(0,0,0,.42); }
.products-pinned .pin-card{ top:32px !important; box-shadow:none !important; border-radius:0 0 16px 16px !important; }
.products-pinned .pin-dots{ top:-44px !important; }

/* ── src/index.html:9074 ── */
/* A/B stat illustrations in-section */
.cst-retention .cs-viz{ position:relative; height:120px; margin-top:14px; }
.cst-retention .cs-viz .cs-viz-bar{ display:none !important; }
.cst-retention .cs-viz canvas.ill-cohort{ position:absolute; inset:0; width:100%; height:100%; }
.bynums-viz-dial{ position:relative; height:104px; margin:14px 0 4px; overflow:visible; padding-top:12px; }
.bynums-viz-dial canvas{ position:absolute; inset:0; width:170px; height:82px; }
.bynums-viz-dial .dstate{ position:absolute; left:0; bottom:2px; font-family:var(--sans);
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--t-paper-55,rgba(250, 246, 239,.55)); }

/* ── src/index.html:9171 ── */
/* ===== Platform · flagship three-column pinned (Blueprint pattern, Posty language) ===== */
.bpx{ position:relative; background:#0C0C0C; color:var(--paper); }   /* plain black: grid removed */
.bpx-track{ height:330vh; }
.bpx-stage{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; grid-template-columns:1fr minmax(400px,500px) 1fr; align-items:center; }
.bpx-head{ position:absolute; top:calc(var(--lg) + 74px); left:0; right:0; text-align:center; z-index:3; }
.bpx-head-eye{ display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sky); margin-bottom:8px; }
.bpx-head h2{ margin:0; font-size:clamp(22px,2.2vw,30px); font-weight:800; letter-spacing:-.03em; color:var(--paper); }
.bpx-head h2 .soft{ color:var(--t-paper-35); }
.bpx-side{ position:relative; z-index:2; min-height:240px; padding:0 clamp(24px,4vw,60px); }
.bpx-eye{ font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:14px; }
.bpx-title{ font-size:clamp(24px,2.2vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--paper); }
.bpx-title .soft{ color:var(--t-paper-35); }
.bpx-cap{ font-size:clamp(19px,1.7vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--t-paper-35); }
.bpx-cap b{ color:var(--paper); }
.bpx-beat{ position:absolute; left:0; right:0; top:50%; padding:0 clamp(24px,4vw,60px);
  opacity:0; transform:translateY(calc(-50% + 14px));
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.bpx-beat.on{ opacity:1; transform:translateY(-50%); }
.bpx-beat .w{ display:inline-block; opacity:.14; transform:translateY(6px); will-change:opacity,transform; }
@media (prefers-reduced-motion:reduce){ .bpx-beat .w{ opacity:1 !important; transform:none !important; } }
.bpx-widget{ position:relative; z-index:2; width:100%; height:min(540px,72vh);
  border-radius:22px; background:linear-gradient(160deg,#1A1A1A,#0C0C0C);
  box-shadow:inset 0 0 0 1px rgba(250, 246, 239,.07), inset 0 1px 0 rgba(250, 246, 239,.05);
  overflow:hidden; }
.bpx-chrome{ position:absolute; top:0; left:0; right:0; height:32px; z-index:6;
  border-bottom:1px solid rgba(250, 246, 239,.06);
  background:
    radial-gradient(circle at 15px 16px, rgba(166, 207, 232,.8) 3px, transparent 3.4px),
    radial-gradient(circle at 31px 16px, rgba(235, 206, 166,.8) 3px, transparent 3.4px),
    radial-gradient(circle at 47px 16px, rgba(169,211,184,.8) 3px, transparent 3.4px),
    linear-gradient(#161616,#101010);
  display:flex; align-items:center; justify-content:center; }
.bpx-chrome span{ font-family:var(--sans); font-size:10.5px; letter-spacing:.02em; color:var(--t-paper-35); }
.bpx-dots{ position:absolute; top:44px; left:0; right:0; display:flex; justify-content:center; gap:7px; z-index:5; }
.bpx-dots i{ width:22px;height:4px;border-radius:2px;background:rgba(250, 246, 239,.14);transition:background .4s,width .4s; }
.bpx-dots i.on{ background:var(--sky); width:30px; }
.bpx-card{ position:absolute; inset:68px 24px 24px; opacity:0; transform:scale(.97) translateY(16px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); pointer-events:none; display:flex; flex-direction:column; }
.bpx-card.on{ opacity:1; transform:none; }
.bpx-glass{ background:rgba(250, 246, 239,.04); border-radius:16px; box-shadow:inset 0 0 0 1px rgba(250, 246, 239,.08); padding:18px; }
.bpx-ch{ display:flex;justify-content:space-between;align-items:center;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-paper-45,rgba(250, 246, 239,.45));margin-bottom:14px; }
.bpx-ch .live{ display:inline-flex;align-items:center;gap:6px;color:var(--sage-deep); }
.bpx-ch .live::before{ content:"";width:6px;height:6px;border-radius:50%;background:var(--sage-deep); }
.bpx-num{ font-size:clamp(28px,2.8vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--paper);font-feature-settings:"tnum"; }
.bpx-num .u{ color:var(--sky);font-size:.5em;vertical-align:top; }
.bpx-row{ display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid rgba(250, 246, 239,.08);font-size:12.5px; }
.bpx-row .k{ color:var(--t-paper-45,rgba(250, 246, 239,.45)); } .bpx-row .v{ font-weight:600;color:var(--paper); } .bpx-row .v.ok{ color:var(--sage-deep); }
.bpx-mini{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.bpx-mini .m{ background:rgba(250, 246, 239,.03);border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px rgba(250, 246, 239,.07); }
.bpx-mini .kk{ font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-paper-45,rgba(250, 246, 239,.45)); }
.bpx-mini .vv{ font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:4px;color:var(--paper); }
.bpx-mini .vv.mint{ color:var(--sage-deep); } .bpx-mini .vv.sky{ color:var(--sky); }
.bpx-spark{ margin-top:auto;display:flex;align-items:flex-end;gap:5px;height:44px; }
.bpx-spark span{ flex:1;background:rgba(250, 246, 239,.12);border-radius:3px; }
.bpx-spark span:last-child{ background:var(--sky); }


@media(max-width:900px){ .bpx-stage{ grid-template-columns:1fr; } .bpx-side{ display:none; } .bpx-widget{ margin:0 20px; width:auto; } }
.tour-mac{ z-index:1; }
/* ===== Footer reveal (yeqq curtain) ===== */
html,body{ background:#BDA1C0; } /* dusk sky: any sub-pixel seam at the footer reads as sky, never a black line */
#reveal{ position:relative; z-index:2; background:var(--ink); }
/* the pinned statement is the ink backdrop behind the closer; its last 48px match the footer sky so the closer's rounded corners lift onto sky, not ink */
section.stmt.is-ink{ background:linear-gradient(90deg,#BDA1C0 0%,#BDA1C0 100%) bottom / 100% 48px no-repeat, var(--ink); }
@media (max-width:760px){ section.stmt.is-ink{ background-size:100% 30px; } }
footer.footer-deep{ position:fixed; left:0; right:0; bottom:0; z-index:1; }
/* the closer ends on #BDA1C0; the footer's first rows are painted that exact colour and
   dissolve into the hills photo over 180px, so the hand-off is a fade, never an edge */
footer.footer-deep::before{ content:""; position:absolute; left:0; right:0; top:0; height:220px; pointer-events:none; z-index:0;
  background:linear-gradient(180deg, #BDA1C0 0px, #BDA1C0 52px, rgba(189,161,192,.55) 120px, rgba(189,161,192,0) 220px); }
footer.footer-deep > .wrap{ position:relative; z-index:1; }
footer.footer-deep .wrap{ transform:translateY(26px); opacity:.55;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease; }
footer.footer-deep.revealed .wrap{ transform:none; opacity:1; }

/* ===== Footer ground · the whole footer sits on the hills (brand book: the site travels sky to grass) ===== */
:root{ --grass-img:url("/assets/img/3c4de9c171.jpg"); }
/* fallback colour is the hills' own dark green: iOS paints it in the strip the footer gains when
   Safari's toolbar collapses, before the cover image is re-laid; periwinkle showed as a band */
footer.footer-deep{ background:var(--grass-img) center 62% / cover no-repeat, #152E39; }
footer.footer-deep, footer.footer-deep .footer-col a, footer.footer-deep .footer-disclaimer,
footer.footer-deep .footer-bottom, footer.footer-deep .footer-bottom a, footer.footer-deep .footer-bottom .sep{ color:rgba(250,246,239,.78); }
footer.footer-deep .footer-col h4{ color:rgba(250,246,239,.55); }
footer.footer-deep .footer-disclaimer, footer.footer-deep .footer-bottom, footer.footer-deep .footer-bottom a{ color:rgba(250,246,239,.72); }
footer.footer-deep .footer-col a:hover, footer.footer-deep .footer-col a:focus-visible, footer.footer-deep .footer-bottom a:hover{ color:var(--paper); }
footer.footer-deep .footer-col a::before{ color:var(--sky); }
footer.footer-deep .footer-col a:focus-visible{ text-decoration-color:var(--sky); }
footer.footer-deep .footer-mega img{ opacity:.9; filter:none; }

/* checkout thumbs · real product shots: white ground, edge to edge */
.co-thumb{ background:#FFFFFF; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(70,87,120,.09); }
.co-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; filter:none; }
/* merchant avatar · Pearable mark on a white tile */
.vm-mark.has-logo{ width:2.9em; height:2.9em; border-radius:.8em; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(70,87,120,.12); overflow:hidden; }
.vm-mark.has-logo img{ width:80%; height:80%; object-fit:contain; display:block; }
/* in-transit step · the live email graphic sits inside the widget shell */
.vm-card.vm-media{ padding:0; overflow:hidden; line-height:0; }
.vm-card.vm-media img{ width:100%; height:auto; display:block; border-radius:inherit; }
/* in-transit step · the delivery email rebuilt as live UI inside the widget card */
.vm-card.vm-email, .vj-vis .vm-card.vm-email, .vj-vis.ink .vm-card.vm-email{ position:relative; overflow:hidden; padding:2.2em 1.2em 1.1em; text-align:center; isolation:isolate;
  background:linear-gradient(180deg,#B7DBFB 0%,#A9D5FD 46%,#CFE6FC 100%); }
.vm-email > *{ position:relative; z-index:2; }
.vm-email .ve-cloud{ position:absolute; z-index:1; height:auto; max-width:none; pointer-events:none; }
.vm-email .ve-c1{ width:34%; left:-9%; top:-6%; }
.vm-email .ve-c2{ width:22%; right:2%; top:4%; opacity:.9; }
.vm-email .ve-c3{ width:16%; left:4%; top:46%; opacity:.8; }
.vm-email .ve-c4{ width:30%; right:-6%; top:64%; }
.vm-email .ve-c5{ width:26%; left:-4%; bottom:-14%; opacity:.9; }
.vm-email .ve-star{ position:absolute; z-index:1; width:.8em; height:.8em; background:#FFFFFF;
  clip-path:polygon(50% 0%,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0% 50%,39% 39%); }
.vm-email .ve-star.sm{ width:.5em; height:.5em; opacity:.85; }
.vm-email .ve-h{ font-family:var(--display); font-weight:600; font-size:2.35em; line-height:1.04; letter-spacing:-.03em; color:#0C0C0C; text-wrap:balance; }
.vm-email .ve-p{ margin:.85em auto 0; max-width:22em; font-size:1em; line-height:1.5; color:rgba(12,12,12,.62); }
.vm-email .ve-p b{ color:#0C0C0C; font-weight:700; }
.vm-email .ve-btns{ display:flex; justify-content:center; gap:.7em; margin-top:1.3em; }
.vm-email .ve-btn{ display:inline-flex; align-items:center; justify-content:center; height:2.9em; padding:0 1.5em; border-radius:999px; font-size:1em; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.vm-email .ve-btn.ink{ background:#0C0C0C; color:#FFFFFF; box-shadow:0 8px 18px -10px rgba(12,12,12,.5); }
.vm-email .ve-btn.line{ background:rgba(255,255,255,.28); color:#0C0C0C; border:2px solid #0C0C0C; }
.vm-email .ve-route{ position:relative; margin:1.2em -.2em 0; aspect-ratio:600/190; }
.vm-email .ve-route svg{ position:absolute; inset:0; width:100%; height:100%; }
.vm-email .ve-dash{ position:absolute; left:58%; top:6%; width:17%; height:auto; transform:translateX(-50%); }
.vm-email .ve-lab{ position:absolute; font-family:var(--mono); font-size:.72em; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.vm-email .ve-lab.now{ left:63%; top:74%; transform:translateX(-50%); color:#0C0C0C; }
.vm-email .ve-lab.door{ right:1%; top:6%; color:rgba(12,12,12,.42); }
/* head type sits on sky now: ink stays, the soft second line deepens a touch */
.journey .journey-head h2 .soft{ color:rgba(12,12,12,.55); }
/* dash trail · fatter so the fill reads, hairline ink edge */
.vj-trail i{ width:8px; left:-4px; box-shadow:none; border:1.2px solid #0C0C0C; box-sizing:border-box; }


.hero.hero-globe::after{ background:none; } /* no horizon bloom: the hero bottom is the same sky the sheet opens in */
/* the product cards sit on the sunrise sky; the pinned viewport carries it so it never stretches */
section.social.ubest{ background:#AE8DAA; } /* the runway band above the pinned viewport matches the sunrise top row */
.ubest .ub-cap h3, .ubest .ub-cap p{ color:#0C0C0C; }
/* Returns sits on the deep dusk: its type flips to paper */
.vj-step:nth-of-type(6) h3, .vj-step:nth-of-type(6) p, .vj-step:nth-of-type(6) .vj-stat b, .vj-step:nth-of-type(6) .vj-stat span,
.vj-step:nth-of-type(6) .vj-no, .vj-step:nth-of-type(6) .vj-more{ color:var(--paper) !important; }
.vj-step:nth-of-type(6) .vj-stat{ border-top-color:rgba(250,246,239,.25) !important; }
.vj-step:nth-of-type(6) .vj-more .ring{ border-color:rgba(250,246,239,.6) !important; color:var(--paper) !important; }
/* ===== hero → journey · one continuous sky (Frank, 2 Sep) =====
   The journey sheet opens in the hero's own sky, no scalloped lip, no mist band,
   and only fades to paper once the first cards arrive. The hero's recede-dim is off
   so the seam is invisible. */
.journey.sw-cover::before{ display:none; }
.jy-mist{ display:none; }
body.sw-on .hero.hero-globe{ filter:none !important; }
/* tour checkout · the merchant's own mark leads the page bar */
.mw-page-bar b{ display:inline-flex; align-items:center; gap:.55em; }
.mw-page-bar b img{ height:1.55em; width:auto; display:block; }
/* ===== checkout widget · white-labelled to Pearable (Frank, 2 Sep) =====
   The protection line drops the Posty sky and clouds and sits on the merchant's own
   white card; the stamp is the Pear-striped Posty mark. Same in the journey and the tour. */
.co-card.co-prot, .co-mock .co-card.co-prot{ background:#FFFFFF; }
.co-mock .co-sky{ display:none; }
.co-mock .co-card.co-prot .co-prot-price{ color:#0C0C0C; }
.co-mock.is-off .co-card.co-prot{ background:#F1F3F6; }
.co-prot .co-ring::after{ border-color:rgba(12,12,12,.28); }
/* the trail exists only while the page is moving: dashes flicker in behind the plane, then fade out when the scroll stops */
.vj.is-moving .vj-trail{ transform:translateY(-34px) scaleY(1.35); }
.vj.is-moving .vj-trail i{ animation:vjDash .55s ease-in-out infinite; transition:none; }
@media (prefers-reduced-motion:reduce){ .vj-trail{ display:none; } }
@media (max-width:760px){ .vj-head, .vj-step .vj-head{ width:34px; height:40px; margin:-22px 0 0 -16px; } .vj-trail{ transform:translateY(-24px) scale(.75); } .vj.is-moving .vj-trail{ transform:translateY(-24px) scale(.75) scaleY(1.35); } }
/* ===== journey rail · the new paper plane and its dash trail (Frank, 2 Sep) =====
   The plane is the vector from postypaperplane.eps (body only, 842:1000). The trail
   is rebuilt as nine sky dashes above it that flicker in and out; while the page
   scrolls the rail goes .is-moving and the trail stretches and brightens. */
.vj-head, .vj-step .vj-head{ width:46px; height:55px; margin:-30px 0 0 -22px;
  background:url("/assets/img/bddb041eb4.svg") center / contain no-repeat;
  filter:drop-shadow(0 6px 10px rgba(31,62,128,.22)); }
.vj-trail{ position:absolute; left:1px; top:calc(var(--p) * 100%); width:0; height:0; z-index:4; pointer-events:none;
  transform:translateY(-34px); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.vj-trail i{ position:absolute; display:block; width:6px; border-radius:999px; background:#A9D7F2; box-shadow:inset 0 0 0 1.4px #0C0C0C;
  left:-3px; transform-origin:50% 100%; opacity:0; transform:scaleY(.6); animation:none; transition:opacity .45s ease, transform .45s ease; }
.vj-trail i:nth-child(1){ height:20px; top:-22px;  left:-3px;  animation-delay:0s; }
.vj-trail i:nth-child(2){ height:26px; top:-52px;  left:-10px; animation-delay:-.4s; }
.vj-trail i:nth-child(3){ height:16px; top:-46px;  left:5px;   animation-delay:-.9s; }
.vj-trail i:nth-child(4){ height:24px; top:-84px;  left:-3px;  animation-delay:-1.3s; }
.vj-trail i:nth-child(5){ height:14px; top:-78px;  left:-11px; animation-delay:-.2s; }
.vj-trail i:nth-child(6){ height:20px; top:-110px; left:5px;   animation-delay:-1.6s; }
.vj-trail i:nth-child(7){ height:12px; top:-118px; left:-3px;  animation-delay:-.7s; }
.vj-trail i:nth-child(8){ height:16px; top:-146px; left:-9px;  animation-delay:-1.1s; }
.vj-trail i:nth-child(9){ height:10px; top:-168px; left:-3px;  animation-delay:-1.5s; }
@keyframes vjDash{ 0%,100%{ opacity:.18; transform:scaleY(.7) } 50%{ opacity:.9; transform:scaleY(1) } }
/* the trail dashes read on sky: paper fill, ink hairline */
.vj-trail i{ background:#FAF6EF; }
/* ===== hero stack (Frank, 3 Sep) · true vertical centre, looser headline, tighter sub ===== */
.hero.hero-globe{ padding-bottom:184px; } /* the hero runs 74px under the sheet; balance that so the stack centres on the viewport */
.hero.hero-globe .hero-title{ line-height:1.08; letter-spacing:-.02em; }
.hero.hero-globe .hero-sub{ max-width:30ch; margin-top:26px; font-size:clamp(17px,1.35vw,20px); line-height:1.5; }
.hero.hero-globe .hero-cta{ margin-top:34px; }
@media (max-width:760px){ .hero.hero-globe{ padding-bottom:150px; } .hero.hero-globe .hero-title{ line-height:1.06; } }
/* smaller dashes behind the plane */
.vj-trail{ transform:translateY(-30px) scale(.62); transform-origin:50% 100%; }
.vj.is-moving .vj-trail{ transform:translateY(-30px) scale(.62) scaleY(1.3); }
@media (max-width:760px){ .vj-trail{ transform:translateY(-22px) scale(.5); } .vj.is-moving .vj-trail{ transform:translateY(-22px) scale(.5) scaleY(1.3); } }
/* hero object layers dissolve before the hero's clip edge, so nothing is ever cut straight across */
.hero.hero-globe .orbit-wrap, .hero.hero-globe .cl-ambient, .hero.hero-globe .cloud-cover{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 260px), rgba(0,0,0,0) calc(100% - 40px));
  mask-image:linear-gradient(180deg, #000 0%, #000 calc(100% - 260px), rgba(0,0,0,0) calc(100% - 40px)); }
.hero.hero-globe .cl-floor{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, rgba(0,0,0,0) 100%); }
/* fade-in staggers away from the plane; fade-out is immediate and together */
.vj.is-moving .vj-trail i:nth-child(1){ transition-delay:0s; animation-delay:0s; }     .vj.is-moving .vj-trail i:nth-child(2){ transition-delay:.06s; animation-delay:-.1s; }
.vj.is-moving .vj-trail i:nth-child(3){ transition-delay:.11s; animation-delay:-.2s; } .vj.is-moving .vj-trail i:nth-child(4){ transition-delay:.17s; animation-delay:-.3s; }
.vj.is-moving .vj-trail i:nth-child(5){ transition-delay:.22s; animation-delay:-.4s; } .vj.is-moving .vj-trail i:nth-child(6){ transition-delay:.28s; animation-delay:-.5s; }
.vj.is-moving .vj-trail i:nth-child(7){ transition-delay:.34s; animation-delay:-.6s; } .vj.is-moving .vj-trail i:nth-child(8){ transition-delay:.40s; animation-delay:-.2s; }
.vj.is-moving .vj-trail i:nth-child(9){ transition-delay:.46s; animation-delay:-.45s; }
/* ===== plane trail v3 (Frank, 3 Sep) · smaller; appears only while the plane itself moves; dashes fade in one after another ===== */
.vj-trail{ transform:translateY(-26px) scale(.45); }
.vj.is-moving .vj-trail{ transform:translateY(-26px) scale(.45) scaleY(1.25); }
@media (max-width:760px){ .vj-trail{ transform:translateY(-20px) scale(.38); } .vj.is-moving .vj-trail{ transform:translateY(-20px) scale(.38) scaleY(1.25); } }
.vj-trail i{ opacity:0; animation:none; transition:opacity .28s ease; }
.vj.is-moving .vj-trail i{ opacity:1; animation:vjFlick .7s ease-in-out infinite; }
@keyframes vjFlick{ 0%,100%{ transform:scaleY(.7) } 50%{ transform:scaleY(1) } }
/* ---- finale card · two clouds hide the stamp until the card lands (Frank, 3 Sep) ----
   --ufc runs 0→1 as the card settles into the centre and the zoom begins; the clouds
   part to the upper-left and lower-right, clearing the frame before the logo locks. */
.ub-vis.fin{ --ufc:0; }
.ub-fin-clouds{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.ub-fin-clouds .ufc{ position:absolute; left:50%; top:50%; width:64%; max-width:none; height:auto;
  will-change:transform; opacity:calc(1 - var(--ufc) * 0.25); }
.ub-fin-clouds .c1{ transform:translate3d(calc(-76% - var(--ufc) * 150%), calc(-68% - var(--ufc) * 90%), 0); }
.ub-fin-clouds .c2{ transform:translate3d(calc(-22% + var(--ufc) * 150%), calc(-24% + var(--ufc) * 90%), 0); }
@media (prefers-reduced-motion:reduce){ .ub-fin-clouds{ display:none; } }
/* ---- in-transit email · clouds ride the same wind as the hero (Frank, 3 Sep) ----
   Each cloud starts fully off the card's left edge and travels to fully off its right
   edge, then wraps; both ends are hidden by the card's overflow, so the jump is never
   seen. Negative delays park each cloud at its designed spot on load. Speed encodes
   depth, as in the hero: smaller = farther = slower. Sparkles breathe like the hero's. */
.vm-email .ve-cloud{ will-change:translate; }
.vm-email .ve-c1{ left:-34%; right:auto; animation:veWind1 90s linear infinite;  animation-delay:-16.8s; }
.vm-email .ve-c2{ left:-22%; right:auto; animation:veWind2 140s linear infinite; animation-delay:-112.5s; }
.vm-email .ve-c3{ left:-16%; right:auto; animation:veWind3 160s linear infinite; animation-delay:-27.6s; }
.vm-email .ve-c4{ left:-30%; right:auto; animation:veWind4 100s linear infinite; animation-delay:-81.5s; }
.vm-email .ve-c5{ left:-26%; right:auto; animation:veWind5 110s linear infinite; animation-delay:-19.2s; }
@keyframes veWind1{ from{ translate:0 0; } to{ translate:394% 0; } }
@keyframes veWind2{ from{ translate:0 0; } to{ translate:555% 0; } }
@keyframes veWind3{ from{ translate:0 0; } to{ translate:725% 0; } }
@keyframes veWind4{ from{ translate:0 0; } to{ translate:433% 0; } }
@keyframes veWind5{ from{ translate:0 0; } to{ translate:485% 0; } }
.vm-email .ve-star{ animation:stTwinkle 5.2s ease-in-out infinite; }
.vm-email .ve-star:nth-of-type(2n){ animation-delay:-1.7s; }
.vm-email .ve-star:nth-of-type(3n){ animation-delay:-3.1s; }
.vm-email .ve-star:nth-of-type(4n+1){ animation-duration:6.4s; }
@media (prefers-reduced-motion:reduce){
  .vm-email .ve-cloud, .vm-email .ve-star{ animation:none; }
  .vm-email .ve-c1{ left:-9%; } .vm-email .ve-c2{ left:auto; right:2%; } .vm-email .ve-c3{ left:4%; }
  .vm-email .ve-c4{ left:auto; right:-6%; } .vm-email .ve-c5{ left:-4%; } }
/* ---- checkout widget spacing (Frank, 3 Sep) ----
   The collapsed detail panel still sat in the flex flow with its own margin, so the
   gap between the protection line and the Checkout button was gap + margin. Pull it
   back by the flex gap while closed; open, it rejoins the rhythm. The decline link
   sits with equal air above (gap + margin) and below (widget padding). */
.co-mock .co-detail{ margin-top:-.74em; }
.co-mock .co-detail.is-open{ margin-top:0; }
.co-mock .co-decline{ display:block; width:100%; text-align:center; margin-top:.21em; }
.co-mock .co-ring img{ filter:none; }
/* ---- motion cards · no dark rim (Frank, 3 Sep) ----
   The clip sat on an ink background inside a rounded, clipped frame, so the anti-aliased
   rim of the corner showed the ink underneath as a hairline. The frame and the clip are
   now transparent, and the clip overshoots the frame by a pixel and a hair of scale so the
   picture itself owns every edge and corner. */
/* Doubled class beats the later `.ub-vis.ink` / `.ub-vis.warm` glass-layer rules, which
   were still painting ink behind the clip. And the clip must NOT carry the frame's radius:
   rounding an element that overshoots its frame pulls its own corner INSIDE the frame's
   corner, and the sliver between the two curves is where the dark rim was showing. Square
   clip + the frame's overflow:hidden = the picture owns every pixel of the corner. */
.ub-vis.has-clip.has-clip{ background:#BFDDF6; }
.ub-vis.has-clip .ub-clip, img.ub-clip, video.ub-clip{ background:transparent; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px);
  transform:scale(1.015); transform-origin:50% 50%; border-radius:0; }
/* the hidden done-state panel between the button and the decline link claimed a flex gap too */
.co-mock .co-done{ margin-top:-.74em; }
.co-mock.is-done .co-done{ margin-top:.6em; }
.co-mock .co-decline{ margin-top:.21em; }
/* product tiles carry their own cream ground now: fill the tile edge to edge (Frank, 3 Sep) */
.co-thumb{ background:#F4F2F0; }
.co-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; filter:none; }
/* ---- tour frame 1 · Pearable checkout page (Frank, 3 Sep) --------------------
   Was a floating cart widget; a real merchant checkout reads far truer to how the
   protection line actually shows up. Merchant chrome is deliberately NOT Posty: a
   slate merchant ink, the merchant's own express-pay buttons. The only Posty thing
   on the page is the protection line item and its icon, which is the point. Sized in
   cqw off .mw-page-stage's container so it scales with the mac frame; the page runs
   past the bottom of the window and is clipped, as a real checkout would be. */
.mw-page:has(.pco){ background:#FFFFFF; }
.pco-top{ display:flex; align-items:center; gap:1.15em; flex:none; padding:.85em 1.5em;
  border-bottom:1px solid rgba(20,30,48,.09); font-size:min(1.28cqw,12px); background:#FFFFFF; }
.pco-brand{ display:inline-flex; align-items:center; gap:.5em; }
.pco-brand img{ height:1.5em; width:auto; display:block; }
.pco-brand b{ font-weight:800; letter-spacing:.22em; font-size:1.02em; color:#16233A; }
.pco-nav{ display:flex; gap:1.4em; margin-left:1.2em; color:rgba(20,30,48,.62); font-weight:500; }
.pco-bag{ margin-left:auto; position:relative; color:#16233A; display:block; }
.pco-bag svg{ width:1.5em; height:1.5em; display:block; }
.pco-bag i{ position:absolute; top:-.42em; right:-.5em; min-width:1.28em; height:1.28em; border-radius:50%;
  background:#16233A; color:#fff; font-style:normal; font-size:.72em; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.mw-page-stage.is-page{ display:block; padding:0; place-items:stretch; }

.pco{ display:grid; grid-template-columns:1.1fr .9fr; align-items:start; min-height:var(--vh,100%);
  font-size:min(1.34cqw,12.6px); color:#16233A; letter-spacing:-.005em; }
.pco-form{ padding:1.35em 1.7em 2em; display:flex; flex-direction:column; gap:.58em; }
.pco-sum{ padding:1.5em 1.7em 2em; background:#FBFAF7; border-left:1px solid rgba(20,30,48,.08);
  min-height:100%; display:flex; flex-direction:column; gap:.62em; }
.pco h4{ margin:.32em 0 0; font-size:1.08em; font-weight:700; letter-spacing:-.015em; }
.pco-express{ display:grid; grid-template-columns:1fr 1fr; gap:.85em; }
.pcx{ height:2.7em; border-radius:.5em; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-style:italic; font-size:1.05em; letter-spacing:-.01em; }
.pcx.shop{ background:#5A31F4; color:#fff; }
.pcx.pp{ background:#F5C14E; color:#152C70; }
.pcx.pp em{ font-style:italic; color:#1B9AD6; }
.pco-or{ display:flex; align-items:center; gap:.9em; font-size:.82em; letter-spacing:.16em;
  color:rgba(20,30,48,.42); text-transform:uppercase; margin:0; }
.pco-or i{ flex:1; height:1px; background:rgba(20,30,48,.12); }
.pcf{ border:1px solid rgba(20,30,48,.16); border-radius:.5em; padding:.44em .78em .48em; background:#fff; min-width:0; }
.pcf label{ display:block; font-size:.8em; color:rgba(20,30,48,.45); }
.pcf span{ display:block; font-size:1.02em; margin-top:.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pco-row{ display:grid; grid-template-columns:1fr 1fr; gap:.7em; }
.pco-row.g3{ grid-template-columns:1.5fr .7fr .8fr; }
.pco-ship{ border:1px solid rgba(20,30,48,.16); border-radius:.5em; overflow:hidden; }
.pcs{ display:flex; align-items:center; gap:.75em; padding:.62em .85em; }
.pcs + .pcs{ border-top:1px solid rgba(20,30,48,.12); }
.pcs.is-on{ background:#EDF2F6; }
.pcr{ width:1.05em; height:1.05em; border-radius:50%; border:1.5px solid rgba(20,30,48,.32); flex:none; }
.pcs.is-on .pcr{ border-color:#16233A; box-shadow:inset 0 0 0 .22em #FFFFFF, inset 0 0 0 1em #16233A; }
.pcs-m{ flex:1; min-width:0; }
.pcs-m b{ display:block; font-size:1.02em; font-weight:700; }
.pcs-m em{ display:block; font-style:normal; font-size:.85em; color:rgba(20,30,48,.5); margin-top:.05em; }
.pcs s{ text-decoration:none; font-weight:700; font-size:1em; }
.pco-pay{ border:1px solid rgba(20,30,48,.16); border-radius:.5em; overflow:hidden; }
.pcp-head{ display:flex; align-items:center; gap:.6em; padding:.72em .85em; background:#EDF2F6;
  border-bottom:1px solid rgba(20,30,48,.12); }
.pcp-head b{ font-weight:700; font-size:1.02em; }
.pcp-cards{ margin-left:auto; display:flex; gap:.4em; }
.pcp-cards i{ font-style:normal; font-size:.68em; font-weight:800; letter-spacing:.06em; color:rgba(20,30,48,.55);
  border:1px solid rgba(20,30,48,.16); border-radius:.28em; padding:.28em .5em; background:#fff; }
.pcp-body{ padding:.8em .85em; display:grid; grid-template-columns:1.6fr 1fr .8fr; gap:.6em; }
.pcf.w2{ grid-column:auto; }
.pco-btn{ margin-top:.55em; height:3.3em; border-radius:.55em; background:#16233A; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1em; }
.pci{ display:flex; align-items:center; gap:.8em; padding:.42em 0; }
.pct{ position:relative; width:3.1em; height:3.1em; border-radius:.6em; background:#F4F2EF; flex:none;
  box-shadow:inset 0 0 0 1px rgba(20,30,48,.07); }
.pct img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.pci:first-child .pct img{ object-fit:contain; padding:.3em; }
.pct i{ position:absolute; top:-.42em; right:-.42em; min-width:1.3em; height:1.3em; border-radius:50%;
  background:#16233A; color:#fff; font-style:normal; font-size:.72em; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.pcm{ flex:1; min-width:0; }
.pcm b{ display:block; font-size:1.04em; font-weight:700; letter-spacing:-.012em; }
.pcm em{ display:block; font-style:normal; font-size:.86em; color:rgba(20,30,48,.5); margin-top:.06em; }
.pci s{ text-decoration:none; font-weight:700; font-size:1.04em; font-variant-numeric:tabular-nums; }
.pco-disc{ display:flex; gap:.55em; margin-top:.5em; }
.pcd-in{ flex:1; border:1px solid rgba(20,30,48,.16); border-radius:.5em; background:#fff;
  padding:.72em .78em; color:rgba(20,30,48,.42); font-size:.98em; }
.pcd-btn{ padding:0 1.25em; display:flex; align-items:center; border-radius:.5em;
  background:#E7E3DC; color:rgba(20,30,48,.45); font-weight:700; font-size:.98em; }
.pco-tot{ margin-top:.7em; padding-top:.85em; border-top:1px solid rgba(20,30,48,.12); display:flex;
  flex-direction:column; gap:.5em; }
.pct-row{ display:flex; align-items:baseline; justify-content:space-between; font-size:1em; }
.pct-row span{ color:rgba(20,30,48,.72); }
.pct-row b{ font-weight:700; font-variant-numeric:tabular-nums; }
.pct-row b.free{ color:#16233A; }
.pct-row.is-total{ margin-top:.15em; align-items:baseline; }
.pct-row.is-total span{ font-size:1.32em; font-weight:800; color:#16233A; letter-spacing:-.02em; }
.pct-row.is-total b{ font-size:1.42em; letter-spacing:-.025em; font-weight:800; }
.pct-row.is-total b em{ font-style:normal; font-size:.6em; font-weight:700; color:rgba(20,30,48,.45);
  margin-right:.5em; letter-spacing:.02em; }
.pco-cb{ margin-top:.85em; display:flex; align-items:center; gap:.6em; padding:.85em .95em;
  border-radius:.55em; background:#E8F1F8; font-size:.98em; color:#16233A; }
.pco-cb svg{ width:1.1em; height:1.1em; flex:none; }
.pco-cb b{ font-weight:800; }
@container (max-width: 620px){ .pco{ font-size:2.1cqw; } }
/* ---- tour frame 1 · the shop-to-confirmation flow (Frank, 3 Sep) --------------
   Product page → cart drawer → checkout → thank you, played as a loop when the
   frame becomes the active tour step. Built as live DOM rather than a screen
   recording: it stays crisp at any size, weighs nothing next to an mp4, and the
   copy stays editable. A pointer walks the flow so it reads as a customer doing it. */
.pflow{ position:relative; width:100%; height:100%; overflow:hidden; }
.pf-scr{ position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease, transform .55s cubic-bezier(.32,.72,0,1), visibility 0s linear .55s; }
.pflow.s0 .pf-prod, .pflow.s1 .pf-prod, .pflow.s2 .pf-prod, .pflow.s3 .pf-prod, .pflow.s4 .pf-prod,
.pflow.s5 .pf-co, .pflow.s6 .pf-co, .pflow.s7 .pf-co,
.pflow.s8 .pf-ty{ opacity:1; visibility:visible; transition-delay:0s; }
.pflow.s5 .pf-prod, .pflow.s6 .pf-prod{ transform:scale(1.04); }
.pflow.s8 .pf-co{ transform:scale(1.03); }
.pf-co{ transform:scale(.985); }
.pflow.s5 .pf-co, .pflow.s6 .pf-co, .pflow.s7 .pf-co{ transform:scale(1); }
.pf-ty{ transform:scale(.985); }
.pflow.s8 .pf-ty{ transform:scale(1); }
/* the checkout scrolls itself down so Payment and Pay now come into frame */
.pf-co .pco{ transition:transform .42s cubic-bezier(.32,.72,0,1); }
.pflow.s4 .pf-co .pco, .pflow.s5 .pf-co .pco{ transform:translateY(-35cqh); }
/* the summary rides back up by the same amount, so it reads as a sticky column
   while the form scrolls under it, which is what a real checkout does */
.pf-co .pco-sum{ transition:transform .42s cubic-bezier(.32,.72,0,1); }
.pflow.s4 .pf-co .pco-sum, .pflow.s5 .pf-co .pco-sum{ transform:translateY(35cqh); }

/* product page */
.pf-prod{ display:block; background:#FFFFFF; }
.pfp{ display:grid; grid-template-columns:1.05fr .95fr; height:100%;
  font-size:min(1.34cqw,12.6px); color:#16233A; }
.pfp-shot{ position:relative; background:#F1EEE9; display:grid; place-items:center; overflow:hidden; }
.pfp-shot img{ width:78%; height:auto; display:block; }
.pfp-tag{ position:absolute; top:1.6em; left:1.6em; font-size:.78em; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(20,30,48,.5); }
.pfp-info{ padding:2.1em 2.2em; display:flex; flex-direction:column; gap:.5em; }
.pfp-kick{ font-size:.78em; letter-spacing:.18em; text-transform:uppercase; color:rgba(20,30,48,.45); }
.pfp-info h3{ margin:.1em 0 0; font-size:2.15em; font-weight:800; letter-spacing:-.028em; line-height:1.05; }
.pfp-price{ font-size:1.5em; font-weight:800; letter-spacing:-.02em; margin-top:.1em; }
.pfp-stars{ display:flex; align-items:center; gap:.55em; font-size:.9em; }
.pfp-stars i{ font-style:normal; color:#E0A227; letter-spacing:.12em; }
.pfp-stars em{ font-style:normal; color:rgba(20,30,48,.45); }
.pfp-info p{ margin:.35em 0 .2em; font-size:1em; line-height:1.5; color:rgba(20,30,48,.62); max-width:24em; }
.pfp-lab{ font-size:.85em; letter-spacing:.1em; text-transform:uppercase; color:rgba(20,30,48,.45); margin-top:.5em; }
.pfp-lab b{ color:#16233A; letter-spacing:0; text-transform:none; font-size:1.05em; }
.pfp-sw{ display:flex; gap:.6em; }
.pfp-sw i{ width:1.65em; height:1.65em; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(20,30,48,.16); }
.pfp-sw i.on{ box-shadow:inset 0 0 0 1px rgba(20,30,48,.16), 0 0 0 1.5px #16233A; }
.pfp-chips{ display:flex; gap:.5em; }
.pfp-chips span{ padding:.42em .95em; border-radius:.42em; font-size:.92em;
  box-shadow:inset 0 0 0 1px rgba(20,30,48,.18); color:rgba(20,30,48,.62); }
.pfp-chips span.on{ background:#16233A; color:#fff; box-shadow:none; }
.pfp-cta{ margin-top:.9em; height:3.2em; width:78%; border-radius:.55em; background:#16233A; color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.08em; }
.pf-scrim{ position:absolute; inset:0; background:rgba(12,16,26,.16); opacity:0;
  transition:opacity .45s ease; }
.pflow.s1 .pf-scrim, .pflow.s2 .pf-scrim, .pflow.s3 .pf-scrim, .pflow.s4 .pf-scrim{ opacity:1; }

/* cart drawer */
.pf-drawer{ position:absolute; top:0; right:0; height:var(--vh,100%); width:35%; background:#FFFFFF;
  box-shadow:-18px 0 44px -26px rgba(12,20,36,.4); padding:1.25em 1.35em;
  display:flex; flex-direction:column; gap:.5em; font-size:min(1.28cqw,12px); color:#16233A;
  transform:translateX(102%); transition:transform .5s cubic-bezier(.32,.72,0,1); }
.pflow.s1 .pf-drawer, .pflow.s2 .pf-drawer, .pflow.s3 .pf-drawer, .pflow.s4 .pf-drawer{ transform:none; }
.pfd-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:.6em;
  border-bottom:1px solid rgba(20,30,48,.1); }
.pfd-head b{ font-size:1.1em; font-weight:800; letter-spacing:-.015em; }
.pfd-head i{ font-style:normal; color:rgba(20,30,48,.4); font-size:1.15em; }
.pfd-row{ display:flex; gap:.7em; align-items:flex-start; padding:.65em 0; }
.pfd-th{ width:2.9em; height:2.9em; border-radius:.55em; overflow:hidden; flex:none; background:#F4F2EF;
  box-shadow:inset 0 0 0 1px rgba(20,30,48,.07); }
.pfd-th img{ width:100%; height:100%; object-fit:cover; display:block; }
.pfd-m{ flex:1; min-width:0; }
.pfd-m b{ display:block; font-size:1em; font-weight:700; }
.pfd-m em{ display:block; font-style:normal; font-size:.85em; color:rgba(20,30,48,.5); margin-top:.05em; }
.pfd-m s{ display:inline-block; text-decoration:none; margin-top:.45em; font-size:.82em;
  letter-spacing:.14em; color:rgba(20,30,48,.5); box-shadow:inset 0 0 0 1px rgba(20,30,48,.14);
  border-radius:.3em; padding:.2em .5em; }
.pfd-p{ font-weight:700; font-variant-numeric:tabular-nums; }
.pfd-sub{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  padding-top:.75em; border-top:1px solid rgba(20,30,48,.1); margin-top:auto; }
.pfd-sub span{ color:rgba(20,30,48,.66); }
.pfd-sub b{ font-size:1.15em; font-weight:800; font-variant-numeric:tabular-nums; }
.pfd-sub em{ flex-basis:100%; font-style:normal; font-size:.85em; color:rgba(20,30,48,.42); margin-top:.2em; }
.pfd-prot{ display:flex; align-items:center; gap:.6em; margin-top:.85em; padding:.7em .8em;
  border-radius:.55em; background:#FFFFFF; box-shadow:inset 0 0 0 1px rgba(20,30,48,.12);
  transition:box-shadow .5s ease, background .5s ease; }
/* the line only lights once the shopper has actually switched it on */
.pflow.s3 .pfd-prot, .pflow.s4 .pfd-prot{ background:#F0F7F4; box-shadow:inset 0 0 0 1.5px #24675E; }
.pfd-prot img{ width:1.9em; height:1.9em; display:block; flex:none; }
.pfd-prot b{ flex:1; font-size:1em; font-weight:800; letter-spacing:-.01em; }
/* the old info-badge rule used to catch the toggle's own <i> and shrink it, which is why
   the knob sat off-centre and stopped short of the right edge */
.pfd-prot s{ text-decoration:none; font-weight:600; color:rgba(20,30,48,.55); font-variant-numeric:tabular-nums; }
.pfd-btn{ margin-top:.7em; height:3.25em; border-radius:.55em; background:#16233A; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05em; }
.pfd-btn b{ font-size:1.1em; font-weight:800; }
.pfd-btn em{ font-style:normal; font-size:.8em; font-weight:600; color:#A9D7F2; }
.pfd-skip{ text-align:center; font-size:.85em; color:rgba(20,30,48,.45);
  text-decoration:underline; text-underline-offset:2px; margin-top:.55em; }

/* thank you */
.pf-co{ background:linear-gradient(90deg,#FFFFFF 0 55%,#FBFAF7 55% 100%); }
.pf-ty{ background:#FAF6EF; overflow:hidden; }
.pft{ height:var(--vh,100%); padding:1.45em 2.2em; display:flex; flex-direction:column; align-items:center;
  text-align:center; font-size:min(1.34cqw,12.6px); color:#16233A; }
.pft-tick{ width:3em; height:3em; border-radius:50%; display:grid; place-items:center;
  background:#E8F1F8; color:#16233A; box-shadow:inset 0 0 0 1.5px rgba(22,35,58,.18); }
.pft-tick svg{ width:1.5em; height:1.5em; }
.pft-ord{ margin-top:.85em; font-size:.86em; color:rgba(20,30,48,.5); }
.pft h3{ margin:.35em 0 0; font-size:2em; font-weight:800; letter-spacing:-.03em; }
.pft p{ margin:.5em 0 0; font-size:1em; line-height:1.5; color:rgba(20,30,48,.6); max-width:28em; }
.pft-lines{ width:min(30em,86%); margin-top:1.15em; text-align:left; background:#FFFFFF;
  border-radius:.6em; padding:.35em 1.1em; box-shadow:inset 0 0 0 1px rgba(20,30,48,.08); }
.pft-lines > div{ display:flex; justify-content:space-between; gap:1em; padding:.6em 0;
  font-size:.97em; color:rgba(20,30,48,.72); }
.pft-lines > div + div{ border-top:1px solid rgba(20,30,48,.07); }
.pft-lines b{ font-weight:700; color:#16233A; font-variant-numeric:tabular-nums; }
.pft-lines .tot span, .pft-lines .tot b{ font-weight:800; color:#16233A; font-size:1.06em; }
.pft-prot{ width:min(30em,86%); margin-top:.75em; display:flex; gap:.7em; text-align:left;
  padding:.85em 1em; border-radius:.6em; background:#E8F1F8; }
.pft-prot img{ width:2em; height:2em; flex:none; display:block; }
.pft-prot b{ display:block; font-size:1em; font-weight:800; }
.pft-prot em{ display:block; font-style:normal; font-size:.88em; line-height:1.45;
  color:rgba(20,30,48,.66); margin-top:.15em; }

/* pointer */
.pf-cursor{ position:absolute; left:var(--cx,56%); top:var(--cy,82%); width:1.5em; height:1.5em; z-index:9;
  font-size:min(1.34cqw,12.6px); pointer-events:none;
  transition:left .72s cubic-bezier(.5,0,.2,1), top .72s cubic-bezier(.5,0,.2,1); }
.pf-cursor svg{ width:100%; height:100%; display:block;
  filter:drop-shadow(0 2px 4px rgba(12,20,36,.35)); }
.pf-ring{ position:absolute; left:.1em; top:.1em; width:2.4em; height:2.4em; margin:-1.2em 0 0 -1.2em;
  border-radius:50%; border:1.5px solid rgba(22,35,58,.55); opacity:0; transform:scale(.35); }
.pflow.is-click .pf-ring{ animation:pfRing .5s ease-out; }
@keyframes pfRing{ 0%{ opacity:.9; transform:scale(.3); } 100%{ opacity:0; transform:scale(1.5); } }
.pflow.s8 .pf-cursor{ opacity:0; transition:left .72s cubic-bezier(.5,0,.2,1), top .72s cubic-bezier(.5,0,.2,1), opacity .4s ease .2s; }
/* pay button swaps to a processing label */
.pf-co .pco-btn{ position:relative; }
.pf-co .pco-btn::after{ content:"Processing\2026"; position:absolute; inset:0; border-radius:inherit;
  background:#16233A; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease; }
.pflow.s7 .pf-co .pco-btn::after{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .pf-scr, .pf-drawer, .pf-cursor, .pf-co .pco{ transition:none !important; }
  .pf-cursor{ display:none; }
}
/* ---- tour frame 1 v2 · Pear reads as Pear (Frank, 3 Sep) ---------------------
   The merchant's site must not wear our typeface. Everything inside the frame is set
   in a modern system UI stack (SF Pro on the Mac this is shown from), with none of
   Systemia / Bauhaus Vole in the chain, so the mock reads as somebody else's brand.
   The product page is now a real product page: full-bleed shot, copy, specs. */
.pflow, .pco-top{ font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif; }
.pco-brand b{ font-weight:600; letter-spacing:.3em; font-size:1.05em; }
.pco-nav{ font-weight:400; }

/* product page · full-bleed shot */
.pfp{ position:relative; display:block; height:var(--vh,100%); background:#F5F4F3;
  font-size:min(1.34cqw,12.6px); color:#1D1D1F; }
/* the window is cropped by the viewport at ~86%, so the shot is sized to sit whole
   inside that band rather than running past a fold nobody sees */
.pfp-hero{ position:absolute; top:5%; right:3%; height:76%; width:auto; max-width:none; display:block; }
.pfp-info{ position:relative; z-index:2; height:100%; padding:2.4em 2.4em 2.4em 2.6em;
  width:47%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.42em; }
.pfp-kick{ font-size:.82em; letter-spacing:.02em; color:#6E6E73; font-weight:500; }
.pfp h3{ margin:.05em 0 0; font-size:2.5em; font-weight:600; letter-spacing:-.028em; line-height:1.03; }
.pfp-price{ font-size:1.18em; font-weight:500; letter-spacing:-.01em; margin-top:.15em; }
.pfp-price em{ font-style:normal; color:#6E6E73; font-size:.86em; }
.pfp-stars{ display:flex; align-items:center; gap:.5em; font-size:.86em; }
.pfp-stars i{ font-style:normal; color:#E0A227; letter-spacing:.1em; }
.pfp-stars em{ font-style:normal; color:#6E6E73; }
.pfp p{ margin:.5em 0 0; font-size:1.02em; line-height:1.48; color:#4A4A50; max-width:23em; }
.pfp-specs{ list-style:none; margin:.6em 0 0; padding:0; display:flex; gap:.5em; }
.pfp-specs li{ font-size:.85em; color:#4A4A50; padding:.34em .8em; border-radius:999px;
  background:rgba(29,29,31,.055); }
.pfp-lab{ font-size:.85em; color:#6E6E73; margin-top:.85em; }
.pfp-lab b{ color:#1D1D1F; font-weight:600; }
.pfp-sw{ display:flex; gap:.55em; margin-top:.1em; }
.pfp-sw i{ width:1.55em; height:1.55em; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(29,29,31,.14); }
.pfp-sw i.on{ box-shadow:inset 0 0 0 1px rgba(29,29,31,.14), 0 0 0 1.5px #1D1D1F; }
.pfp-cta{ margin-top:1.05em; height:3em; padding:0 2.4em; border-radius:999px; background:#24675E; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:500; font-size:1.06em; letter-spacing:-.01em; }
.pfp-note{ margin-top:.65em; font-size:.82em; color:#6E6E73; }

/* the drawer and checkout in Pear's own voice, not ours */
.pf-drawer{ color:#1D1D1F; }
.pfd-head b{ font-weight:600; }
.pfd-m b, .pfd-sub b, .pfd-p, .pfd-prot b, .pfd-btn b{ font-weight:600; }
.pfd-btn{ border-radius:999px; background:#24675E; }
.pfd-btn em{ color:#D0E8E0; }
.pco{ color:#1D1D1F; }
.pco h4{ font-weight:600; }
.pco-btn{ border-radius:999px; background:#24675E; font-weight:500; }
.pf-co .pco-btn::after{ background:#24675E; font-weight:500; }
.pct-row.is-total span, .pct-row.is-total b, .pcm b, .pci s, .pct-row b{ font-weight:600; }
.pcp-head b, .pcs-m b{ font-weight:600; }
.pcs.is-on{ background:#EEF6F3; }
.pcs.is-on .pcr{ border-color:#24675E; box-shadow:inset 0 0 0 .22em #FFFFFF, inset 0 0 0 1em #24675E; }
.pcp-head{ background:#EEF6F3; }
.pco-cb{ background:#EEF6F3; }
.pft{ color:#1D1D1F; }
.pft h3{ font-weight:600; }
.pft-tick{ background:#E8F2EF; color:#24675E; box-shadow:inset 0 0 0 1.5px rgba(36,103,94,.25); }
.pft-prot{ background:#EEF6F3; }

/* Pay now must be reachable without scrolling: the pointer clicks the real button */
/* On a short window the page scrolls just far enough to bring Pay now into the band,
   and not a pixel more; on a tall one --cos is 0 and nothing moves. Measured per screen
   so the pointer always lands on the real button. */
.pflow.s6 .pf-co .pco, .pflow.s7 .pf-co .pco{ transform:translateY(calc(-1 * var(--cos,0px))); }
.pflow.s6 .pf-co .pco-sum, .pflow.s7 .pf-co .pco-sum{ transform:translateY(var(--cos,0px)); }
.pco{ font-size:min(1.16cqw,11px); }
.pco-form{ padding:.95em 1.5em 1em; gap:.4em; }
.pco-sum{ padding:1.2em 1.5em 1em; }
.pco-sum{ min-height:var(--vh,100%); }
.pco-express{ gap:.7em; }
.pcx{ height:2.35em; font-size:1em; }
.pco-or{ display:none; }
.pcf{ padding:.4em .7em .44em; }
.pcs{ padding:.5em .8em; }
.pcp-body{ padding:.62em .8em; gap:.5em; }
.pco-btn{ margin-top:.35em; height:2.85em; font-size:1.05em; }
.pci{ padding:.35em 0; }
.pct{ width:2.9em; height:2.9em; }
.pco-disc{ margin-top:.4em; }
.pcd-in{ padding:.62em .72em; }
.pco-tot{ margin-top:.55em; padding-top:.7em; gap:.42em; }
.pco-cb{ margin-top:.7em; padding:.75em .9em; }
/* the store's headings were still resolving to our display face through the global
   h1-h4 rule, which beats inheritance; nothing inside the frame wears our type */
.pflow h1, .pflow h2, .pflow h3, .pflow h4, .pflow h5, .pflow h6,
.pco-top *, .pflow b, .pflow em, .pflow i, .pflow s, .pflow label, .pflow span, .pflow p, .pflow div, .pflow li{ font-family:inherit; }
.pco-top{ font-family:-apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif; }
.pfp h3{ letter-spacing:-.03em; font-weight:600; }
.pft h3{ letter-spacing:-.03em; font-weight:600; }
/* the mark on a merchant surface is the merchant's, not ours */
.co-mock .co-ring img, .pfd-prot img, .pft-prot img{ filter:none; }
/* ---- the protection line is opt-in, and the pointer opts in (Frank, 3 Sep) ----
   It starts off, as it would on a real cart, so the flow shows the shopper choosing it
   rather than finding it pre-ticked. */
.pfd-pm{ flex:1; min-width:0; }
.pfd-pm b{ display:block; font-size:1.02em; font-weight:600; letter-spacing:-.01em; line-height:1.25; }
.pfd-pm em{ display:block; font-style:normal; font-size:.84em; color:#6E6E73; margin-top:.1em; }
.pfd-prot .t-on{ display:none; }
.pflow.s3 .pfd-prot .t-on, .pflow.s4 .pfd-prot .t-on{ display:inline; }
.pflow.s3 .pfd-prot .t-off, .pflow.s4 .pfd-prot .t-off{ display:none; }
.pfd-prot img{ filter:grayscale(1); opacity:.4; transition:filter .35s ease, opacity .35s ease; }
.pflow.s3 .pfd-prot img, .pflow.s4 .pfd-prot img{ filter:none; opacity:1; }
.pfd-prot s{ align-self:center; }
.pfd-tgl{ position:relative; flex:none; width:2.5em; height:1.42em; border-radius:999px;
  background:rgba(29,29,31,.22); transition:background .3s ease; align-self:center; }
.pfd-tgl i{ position:absolute; top:.16em; left:.16em; width:1.1em; height:1.1em; border-radius:50%;
  font-size:1em; box-shadow:0 1px 3px rgba(12,20,36,.3); background:#fff; margin:0;
  transition:transform .3s cubic-bezier(.32,.72,0,1); }
.pflow.s3 .pfd-tgl, .pflow.s4 .pfd-tgl{ background:#24675E; }
/* 2.5 − 1.1 − .16 − .16 = 1.08em: the same gap on the right as it had on the left */
.pflow.s3 .pfd-tgl i, .pflow.s4 .pfd-tgl i{ transform:translateX(1.08em); }
/* the cash-back promise belongs to the protected state */
.pfd-btn em{ opacity:0; transition:opacity .3s ease; }
.pflow.s3 .pfd-btn em, .pflow.s4 .pfd-btn em{ opacity:1; }
/* ==== appended rules end here · newer rules go BELOW this line ==== */

/* ── CLOSER · the postcard ──────────────────────────────────────────────────
   The message is written on the back of an airmail postcard. Everything in the
   stamp corner comes from posty-postal-set.svg — mixed forms, mixed weights, so
   the corner reads as a collection rather than a swatch chart. The postmark is
   applied ACROSS the hero stamp's edge with its cancellation running off the
   card, because that is what a postmark is: a record that the thing moved.
   ------------------------------------------------------------------------- */
.cta-final{ padding:clamp(96px,11vw,170px) 0 clamp(120px,13vw,200px); text-align:left; overflow:hidden; }
.cta-final::before{ display:none; }
.postcard-stage{ display:flex; justify-content:center; padding:2vw 0; }

.postcard{
  --pc-tilt:-5deg;
  position:relative; width:min(940px,88vw); aspect-ratio:1.58;
  /* beige, not cream: the card has to be a different value from the page or it
     reads as a panel drawn on it rather than a piece of paper set down on it */
  background:#EDE4DB; border-radius:14px; transform:rotate(var(--pc-tilt)); color:var(--ink);
  box-shadow:0 60px 120px -50px rgba(12,12,12,.35), 0 24px 48px -30px rgba(12,12,12,.22),
             inset 0 0 0 1px rgba(12,12,12,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
.pc-border{ position:absolute; inset:14px; border-radius:6px; pointer-events:none;
  --a:#3F6ECA; --b:#E4BFD3;
  background:
    repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) top / 100% 9px no-repeat,
    repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) bottom / 100% 9px no-repeat,
    repeating-linear-gradient(25deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) left / 9px 100% no-repeat,
    repeating-linear-gradient(25deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) right / 9px 100% no-repeat; }
.pc-inner{ position:absolute; inset:44px 52px 48px 56px; display:grid;
  grid-template-columns:1.05fr 1px .95fr; column-gap:clamp(24px,3.4vw,52px); }
.pc-rule{ background:rgba(12,12,12,.14); align-self:stretch; margin:12px 0; }

/* message half */
.pc-msg{ position:relative; display:flex; flex-direction:column; justify-content:center;
  padding:56px 0 30px; min-width:0; }
.pc-airmail{ position:absolute; left:0; top:0; font-family:var(--mono,ui-monospace,monospace);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#3F6ECA;
  padding:6px 12px; border:1.5px solid #3F6ECA; border-radius:4px; }
/* literal hex, not var() — in a stylesheet this deep, the one element that must
   never fail does not go through a variable another scope can redefine */
.cta-final .postcard h2{ font-size:clamp(34px,4.1vw,60px); line-height:.98; letter-spacing:-.04em;
  font-weight:800; margin:0 0 18px; max-width:none; color:#0C0C0C; }
.cta-final .postcard h2 .l1{ white-space:nowrap; color:#0C0C0C; }
.cta-final .postcard h2 .accent{ color:#3F6ECA; }
.cta-final .postcard p{ font-size:clamp(14.5px,1.15vw,17px); line-height:1.5;
  color:rgba(12,12,12,.7); margin:0 0 24px; max-width:32ch; }
.cta-final .postcard .actions{ justify-content:flex-start; margin:0; gap:12px; }
.cta-final .postcard .btn-ink, .cta-final .postcard .btn-ghost-paper{ padding:14px 24px; font-size:15px; }
/* nobody sends a blank postcard — the sender closes the device */
.pc-from{ position:absolute; left:0; bottom:0; font-family:var(--mono,ui-monospace,monospace);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(12,12,12,.55); }
.pc-from{ display:flex; align-items:center; gap:2px; }
.pc-wm{ width:52px; height:auto; color:#0C0C0C; fill:currentColor; margin:0 3px -2px 1px; }

/* address half */
.pc-addr{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.pc-stamps{ position:absolute; inset:-10px -10px auto auto; width:100%; height:56%; pointer-events:none; }
.pc-s{ position:absolute; width:var(--w); height:auto; transform:rotate(var(--r));
  filter:drop-shadow(0 6px 10px rgba(12,12,12,.14)); }
/* one mass, top-right — the marks accumulate in a corner the way they do on a
   real envelope; PROTECTED is applied over the address, not floated in the gap */
.pc-s.hero{ --w:108px; --r:4deg;   right:2%;  top:1%;   }
.pc-s.word{ --w:118px; --r:-6deg;  right:27%; top:9%;   }
.pc-s.tri { --w:76px;  --r:-11deg; right:58%; top:1%;   }
.pc-s.seal{ --w:56px;  --r:8deg;   right:80%; top:13%;  }
.pc-s.wav { --w:92px;  --r:6deg;   right:57%; top:33%; filter:none; opacity:.72; }
.pc-s.mrk { --w:118px; --r:-5deg;  right:5%;  top:104%; filter:none; }
/* the cancellation is applied ON the hero stamp's edge and runs off the card */
.pc-postmark{ position:absolute; width:148px; height:auto; right:22%; top:31%;
  color:rgba(12,12,12,.72); font-family:var(--mono,ui-monospace,monospace);
  fill:currentColor; transform:rotate(-13deg); overflow:visible; }

.pc-to{ margin-top:auto; padding-top:8px; }
.pc-lbl{ display:block; font-family:var(--mono,ui-monospace,monospace); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(12,12,12,.55); margin-bottom:7px; }
.pc-line{ position:relative; height:32px; border-bottom:1.5px solid #A4B8E0; }
.pc-line i{ position:absolute; left:6px; bottom:6px; font-style:normal;
  font-size:clamp(12.5px,1.05vw,14px);
  letter-spacing:-.005em; color:var(--t-ink-70,rgba(12,12,12,.7)); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 8px); }

@media (prefers-reduced-motion:no-preference){
  .postcard{ animation:pcSettle 1.1s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes pcSettle{ from{ transform:rotate(calc(var(--pc-tilt) - 3deg)) translateY(28px); opacity:0; }
                       to{ transform:rotate(var(--pc-tilt)) translateY(0); opacity:1; } }
}
@media (max-width:1100px){
  .postcard{ --pc-tilt:-4deg; }
  .pc-s.hero{ --w:92px; } .pc-s.word{ --w:100px; } .pc-s.tri{ --w:66px; }
  .pc-s.seal{ --w:48px; } .pc-s.mrk{ --w:104px; } .pc-s.wav{ --w:78px; }
  .pc-postmark{ width:132px; }
}
@media (max-width:760px){
  .cta-final{ padding:72px 0 96px; }
  .postcard{ --pc-tilt:-3deg; width:94vw; aspect-ratio:auto; }
  .pc-border{ inset:10px; }
  .pc-inner{ position:relative; inset:auto; padding:34px 28px 30px; grid-template-columns:1fr; row-gap:22px; }
  .pc-rule{ height:1px; margin:0; }
  .pc-msg{ order:2; padding-bottom:34px; }
  .pc-addr{ order:1; min-height:206px; }
  .pc-stamps{ inset:0 0 auto 0; height:150px; }
  .pc-s.hero{ --w:74px; } .pc-s.word{ --w:82px; } .pc-s.tri{ --w:54px; }
  .pc-s.seal{ --w:42px; } .pc-s.mrk{ --w:92px; }
  .pc-postmark{ width:106px; }
  .pc-to{ margin-top:154px; }
  .pc-line{ height:29px; }
  .cta-final .postcard .actions{ flex-direction:column; align-items:stretch; }
}


/* ── OPERATOR VOICES · the folder (full-bleed) ─────────────────────────────
   One folder, the height of the viewport and nearly the width of the page.
   No headline column: the headline is a note clipped to the folder, over the
   top-left corner of whichever file is on top. Index tabs run the full height
   of the right edge and are the only navigation, with keys and swipe. Same
   paper as the postcard closer (#EDE4DB, grained). Tints do one job each: a
   tab. Sky appears once, on the stamp. Ocean Deep carries accent text.
   ------------------------------------------------------------------------- */
.vf{ position:relative; background:#FAF6EF; color:#0C0C0C; padding:clamp(56px,7vw,96px) 0 0; overflow:visible; z-index:2; }
.vf .wrap{ position:relative; z-index:2; max-width:1300px; }

/* the track · one viewport per file (three turns) plus one for the exit. The
   folder holds for exactly that span; the script seats each file with the
   pinned tour's settle (idle 120ms → ease to the nearest step, direction of
   travel only). */
/* the folder sits about 15% smaller than the viewport so the sky and the
   folder's own top edge show above it, clear of the nav (Frank, 4 Sep) */
.vf-stage{ position:relative; --vf-gap:max(76px, 8vh); --vf-h:calc(100vh - 2 * var(--vf-gap)); }
.vf-stage.is-hold{ height:calc(var(--vf-h) + 3 * 100vh); }
.vf-desk{ position:relative; perspective:1800px; perspective-origin:50% 100%; }
.vf-stage.is-hold .vf-desk{ position:sticky; top:var(--vf-gap); }

/* the folder */
.vf-folder{ position:relative; width:100%; height:var(--vf-h); transform-origin:50% 100%; will-change:transform; z-index:3;
  transform:rotateX(calc(var(--vf-e,0) * 10deg)) translateY(calc(var(--vf-e,0) * -34px)) scale(calc(1 - var(--vf-e,0) * .08));
  opacity:calc(1 - var(--vf-e,0) * .3); }
.vf-body{ position:absolute; inset:0; background:#EDE4DB; border-radius:18px 0 18px 18px;
  --pad:clamp(18px,2vw,30px); --tabw:clamp(56px,4.8vw,72px);
  box-shadow:0 60px 120px -50px rgba(12,12,12,.35), 0 24px 48px -30px rgba(12,12,12,.22), inset 0 0 0 1px rgba(12,12,12,.06);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E"); }
.vf-ftab{ position:absolute; left:0; right:var(--tabw); top:0; height:36px; display:flex; align-items:center; gap:14px; padding:0 var(--pad);
  font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(12,12,12,.62); white-space:nowrap; }
.vf-ftab b{ font-weight:600; color:#0C0C0C; } .vf-ftab .ct{ margin-left:auto; color:#3F6ECA; }
.vf-body::before{ content:""; position:absolute; left:0; right:var(--tabw); top:0; height:7px; border-radius:18px 0 0 0; pointer-events:none;
  --a:#3F6ECA; --b:#E4BFD3; background:repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px); }

/* the note · the headline, clipped to the folder over the top-left of the file.
   Ocean with ink type and the accent word in cream: the voice kit's "Proper"
   tile, so the note reads as the brand's own hand. (Frank, 4 Sep: chosen over
   Post Yellow.) */
.vf-note{ --note:#6B8FD6; position:absolute; z-index:8; left:calc(var(--pad) - 14px); top:calc(var(--pad) + 22px);
  width:min(400px, 34%); padding:26px 26px 28px; background:var(--note); color:#0C0C0C; border-radius:3px;
  transform:rotate(-2.2deg); transform-origin:20px 20px; pointer-events:none;
  box-shadow:0 22px 34px -22px rgba(12,12,12,.55), 0 2px 0 rgba(12,12,12,.06);
  background-image:linear-gradient(rgba(255,255,255,.14), rgba(0,0,0,.02)); }
.vf-note::after{ /* the curl */ content:""; position:absolute; right:0; bottom:0; width:26px; height:26px;
  background:linear-gradient(225deg, #FAF6EF 0 48%, rgba(0,0,0,.14) 50%, var(--note) 52%); border-radius:0 0 3px 0; }
.vf-clip{ position:absolute; left:34px; top:-22px; width:22px; height:auto; color:rgba(12,12,12,.7); filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.vf-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono,ui-monospace,monospace);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(12,12,12,.72); }
.vf-eyebrow i{ width:18px; height:1.5px; background:#0C0C0C; }
.vf-title{ margin:12px 0 0; font-family:var(--display,'Geist',sans-serif); font-size:clamp(24px,2.35vw,36px); line-height:1.05; letter-spacing:-.03em; font-weight:800; color:#0C0C0C; }
.vf-title .accent{ color:#FAF6EF; }

/* the sheets · a stack that fills the folder */
.vf-sheets{ position:absolute; inset:calc(var(--pad) + 30px) var(--tabw) var(--pad) var(--pad); touch-action:pan-y; }
.vf-sheet{ position:absolute; inset:0; background:#F7F2EA; border-radius:6px; color:#0C0C0C; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.04'/%3E%3C/svg%3E");
  box-shadow:0 1px 0 rgba(12,12,12,.06), 0 18px 40px -28px rgba(12,12,12,.35);
  transform-origin:50% 100%; will-change:transform, opacity; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease; }
.vf-sheet[data-k="1"]{ transform:translate(6px,-6px) rotate(.4deg); z-index:4; }
.vf-sheet[data-k="2"]{ transform:translate(12px,-12px) rotate(.8deg); z-index:3; }
.vf-sheet[data-k="3"]{ transform:translate(12px,-12px) rotate(.8deg); z-index:2; }
.vf-sheet.is-on{ transform:none; z-index:5; }
.vf-sheet.is-on:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(12,12,12,.06), 0 26px 48px -28px rgba(12,12,12,.4); }
/* the corner turn · tells the hand this is a page */
.vf-turn{ position:absolute; right:0; bottom:0; width:38px; height:38px; border-radius:0 0 6px 0; pointer-events:none; opacity:0; transition:opacity .2s;
  background:linear-gradient(225deg, #EDE4DB 0 48%, rgba(12,12,12,.14) 50%, #F7F2EA 52%); }
.vf-sheet.is-posty .vf-turn{ background:linear-gradient(225deg, #EDE4DB 0 48%, rgba(250,246,239,.3) 50%, #0C0C0C 52%); }
.vf-sheet.is-on:hover .vf-turn{ opacity:1; }
.vf-hint{ position:absolute; right:52px; bottom:14px; font-family:var(--mono,ui-monospace,monospace); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(12,12,12,.45); opacity:0; transition:opacity .2s; pointer-events:none; }
.vf-sheet.is-posty .vf-hint{ color:rgba(250,246,239,.5); }
.vf-sheet.is-on:hover .vf-hint{ opacity:1; }
.vf-sheet.is-leaving{ z-index:6; transform-origin:0 0; animation:vfLeave .6s cubic-bezier(.45,0,.25,1) both; pointer-events:none; }
.vf-sheet.is-returning{ z-index:6; transform-origin:0 0; animation:vfLeave .6s cubic-bezier(.45,0,.25,1) both reverse; pointer-events:none; }
/* peel and lift · the top sheet rises off the stack from its top-left corner, slides up
   and out past the folder edge, and drops to the back. The next sheet is already fully
   drawn underneath, so nothing fades in. */
@keyframes vfLeave{
  0%  { transform:none; opacity:1; box-shadow:0 1px 0 rgba(12,12,12,.06), 0 18px 32px -24px rgba(12,12,12,.35); }
  32% { transform:translate(-8px,-24px) rotate(-2.2deg); opacity:1; box-shadow:0 2px 0 rgba(12,12,12,.05), 0 44px 64px -30px rgba(12,12,12,.5); }
  82% { opacity:1; }
  100%{ transform:translate(-70px,-112%) rotate(-6deg); opacity:0; box-shadow:0 2px 0 rgba(12,12,12,0), 0 60px 80px -30px rgba(12,12,12,0); }
}
.vf-sheet.is-on .vf-in{ animation:none; }
@keyframes vfIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* sheet internals · the note owns the top-left; the ticket sits under it, the
   quote takes the right, the attribution runs along the bottom */
.vf-in{ position:absolute; inset:0; padding:clamp(22px,2.4vw,34px) clamp(28px,3vw,48px) clamp(20px,2.2vw,30px);
  display:grid; grid-template-columns:minmax(300px,36%) 1fr; grid-template-rows:minmax(clamp(200px,26vh,260px),auto) 1fr auto;
  column-gap:clamp(36px,5vw,96px); }
.vf-meta{ grid-column:2; grid-row:1; align-self:start; display:flex; align-items:center; gap:14px; font-family:var(--mono,ui-monospace,monospace);
  font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(12,12,12,.55); }
.vf-meta .file{ color:#0C0C0C; } .vf-meta .rl{ flex:1; height:1px; background:rgba(12,12,12,.12); } .vf-meta .mk{ height:24px; width:auto; color:#3F6ECA; }

.vf-ticket{ grid-column:1; grid-row:2; align-self:center; justify-self:start; position:relative; margin-left:-14px; width:min(100%, 420px);
  background:#E5E7EB; border-radius:10px; padding:22px 24px 20px 28px; border:1.5px solid #0C0C0C; transform:rotate(-1.2deg); transform-origin:0 100%;
  box-shadow:0 14px 28px -18px rgba(12,12,12,.4); }
.vf-ticket::before, .vf-ticket::after{ content:""; position:absolute; left:-9px; width:16px; height:16px; border-radius:50%; background:#F7F2EA; border:1.5px solid #0C0C0C; box-sizing:border-box; }
.vf-ticket::before{ top:-9px; } .vf-ticket::after{ bottom:-9px; }
.vf-ticket .perf{ position:absolute; left:0; top:12px; bottom:12px; border-left:1.5px dashed rgba(12,12,12,.35); margin-left:-1px; }
.vf-ticket .tk{ display:flex; justify-content:space-between; font-family:var(--mono,ui-monospace,monospace); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(12,12,12,.55); }
.vf-num{ margin-top:12px; font-family:var(--display,'Geist',sans-serif); font-size:clamp(64px,7.4vw,116px); line-height:.92; font-weight:800; letter-spacing:-.045em; font-feature-settings:"tnum"; color:#0C0C0C; }
.vf-num .u{ font-size:.34em; font-weight:600; letter-spacing:-.01em; color:#3F6ECA; margin-left:2px; }
.vf-lbl{ margin-top:12px; font-family:var(--mono,ui-monospace,monospace); font-size:10.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:rgba(12,12,12,.62); }

.vf-quote{ grid-column:2; grid-row:2; align-self:center; margin:0; font-size:clamp(26px,3vw,46px); line-height:1.24; letter-spacing:-.026em; font-weight:500; color:#0C0C0C; max-width:19ch; }
.vf-quote em{ font-style:normal; color:#3F6ECA; }
.vf-foot{ grid-column:1 / -1; grid-row:3; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; border-top:1px solid rgba(12,12,12,.12); padding:14px 44px 6px 0; }
.vf-who{ display:flex; align-items:center; gap:12px; }
.vf-av{ width:34px; height:34px; border-radius:50%; background:#CFD7E8; display:grid; place-items:center; color:#3F6ECA; font-size:15px; flex:none; }
.vf-name{ display:block; font-size:15px; font-weight:600; letter-spacing:-.012em; }
.vf-role{ display:block; margin-top:2px; font-size:13px; color:rgba(12,12,12,.55); }
.vf-logo{ font-family:var(--mono,ui-monospace,monospace); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(12,12,12,.45); border:1px dashed rgba(12,12,12,.25); border-radius:6px; padding:7px 12px; white-space:nowrap; }
.vf-stamp{ position:absolute; right:clamp(28px,3vw,48px); bottom:clamp(84px,10vh,110px); width:96px; height:auto; color:rgba(12,12,12,.62); transform:rotate(-12deg); pointer-events:none; }

/* Posty's own sheet · ink */
.vf-sheet.is-posty{ background:#0C0C0C; color:#FAF6EF; }
.vf-sheet.is-posty .vf-meta{ color:rgba(250,246,239,.6); } .vf-sheet.is-posty .vf-meta .file{ color:#FAF6EF; } .vf-sheet.is-posty .vf-meta .rl{ background:rgba(250,246,239,.16); }
.vf-posty{ grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:minmax(300px,36%) 1fr; column-gap:clamp(36px,5vw,96px); align-items:center; }
.vf-posty .big{ width:clamp(160px,17vw,240px); height:auto; transform:rotate(-5deg); filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)); justify-self:start; margin-left:8px; }
.vf-posty .from{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,246,239,.6); }
.vf-posty .wm{ display:block; width:clamp(200px,20vw,300px); height:auto; color:#FAF6EF; fill:currentColor; margin:12px 0 4px; }
.vf-posty .office{ font-size:clamp(18px,1.7vw,24px); font-weight:500; letter-spacing:-.02em; color:rgba(250,246,239,.85); }
.vf-posty p{ margin:14px 0 0; max-width:34ch; font-size:clamp(14.5px,1.15vw,17px); line-height:1.5; color:rgba(250,246,239,.7); }
.vf-posty .go{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; padding:12px 18px 12px 20px; border-radius:999px;
  background:#A9D7F2; color:#0C0C0C; font-weight:600; font-size:14.5px; letter-spacing:-.005em; text-decoration:none; cursor:pointer; border:0; font-family:inherit; }
.vf-posty .go:hover{ background:#6B8FD6; }
.vf-sheet.is-posty .vf-foot{ border-top-color:rgba(250,246,239,.16); }
.vf-sheet.is-posty .vf-foot .vf-logo{ color:rgba(250,246,239,.5); border-color:rgba(250,246,239,.25); }
.vf-count{ font-family:var(--mono,ui-monospace,monospace); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(250,246,239,.6); }
.vf-count b{ color:#FAF6EF; font-weight:600; }

/* index tabs · full height of the folder's right edge, the navigation */
.vf-tabs{ position:absolute; top:0; right:calc(-1 * var(--tabw)); bottom:0; width:var(--tabw); z-index:7; display:flex; flex-direction:column; gap:6px; }
.vf-tab{ position:relative; flex:1 1 0; width:100%; border:0; padding:0; cursor:pointer; border-radius:0 14px 14px 0; background:var(--tint); color:#0C0C0C; font-family:inherit;
  box-shadow:inset 1px 0 0 rgba(12,12,12,.06), 4px 0 12px -8px rgba(12,12,12,.35); transform:translateX(-8px); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.vf-tab:hover{ transform:translateX(-3px); }
.vf-tab.is-on{ transform:translateX(0); z-index:1; box-shadow:inset 1px 0 0 rgba(12,12,12,.06), 8px 0 18px -10px rgba(12,12,12,.45); }
.vf-tab:focus-visible{ outline:2px solid #3F6ECA; outline-offset:2px; }
.vf-tab span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono,ui-monospace,monospace); font-size:11.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; }
.vf-tab span b{ font-weight:600; opacity:.5; }
.vf-tab.is-posty{ --tint:#0C0C0C; color:#FAF6EF; }
.vf-tab.is-posty svg{ position:absolute; left:50%; top:50%; width:32px; height:auto; transform:translate(-50%,-50%); }

.vf-out{ height:clamp(28px,4vw,56px); }
/* closer hook · the folder has receded by the time the card arrives; the card
   lifts into place as it enters the viewport. Requires postycloserEMBED. */
.cta-final{ position:relative; z-index:1; }
.cta-final .postcard-stage{ transform:translateY(calc((1 - var(--vf-c,1)) * 160px)) scale(calc(.92 + var(--vf-c,1) * .08)); transform-origin:50% 100%; will-change:transform; }
.cta-final .postcard{ animation:none !important; }

/* ── Closer · hierarchy ──────────────────────────────────────────
   The headline and the two buttons are the only high-contrast objects on the
   card. The postage corner stays as identity — one stamp, one postmark — and
   everything else on the address half goes quiet. */
.cta-final .postcard h2{ font-size:clamp(36px,4.3vw,64px); }
.cta-final .postcard .btn-ink, .cta-final .postcard .btn-ghost-paper{ padding:16px 28px; font-size:16px; }

/* airmail border · one continuous striped field cut into a frame, so the
   corners join instead of four separate edges meeting at an angle */
.pc-border{ --w:9px; padding:var(--w);
  background:repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }

/* ── The closer pins · one viewport of dwell, then it lifts as the curtain ──
   --pin runs 0→1 across the pinned viewport; a/b/c are eased slices of it. */
@media (min-width:761px){
  .pin-close{ position:relative; height:200vh; z-index:6; } /* above the folder's sheets while pinned */
  .pin-close > .cta-final{ position:sticky; top:0; height:100vh; box-sizing:border-box; padding:0;
    display:flex; align-items:center; }
  .pin-close .postcard-stage{ padding:0; width:100%; }
  .pin-close .postcard{ width:min(940px, 88vw, calc((100vh - 150px) * 1.58)); }
}



/* ── the dusk · one sky from the folder to the hills ───────────────────────
   Sampled from the footer's own picture (the site travels sky to grass, brand
   book). The folder and the closer share a single gradient the height of both
   sections (--duskH, set by script, same trick as the journey's --skyH); the
   closer shows the tail (offset by the folder's height) so the two read as one
   sky, and the bottom stop meets the pink band at the footer's top edge. Stars
   sit in the upper half only. Frank, 4 Sep: replaces the cream behind both. */
.vf.is-paper, section.cta-final.is-paper{ color:#0C0C0C;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Ccircle cx='335' cy='158' r='1.2' fill='white' opacity='0.35'/%3E%3Ccircle cx='78' cy='552' r='0.8' fill='white' opacity='0.6'/%3E%3Ccircle cx='63' cy='523' r='1' fill='white' opacity='0.35'/%3E%3Ccircle cx='92' cy='448' r='1.2' fill='white' opacity='0.35'/%3E%3Ccircle cx='250' cy='96' r='1.5' fill='white' opacity='0.8'/%3E%3Ccircle cx='64' cy='583' r='0.8' fill='white' opacity='0.5'/%3E%3Ccircle cx='67' cy='594' r='1.5' fill='white' opacity='0.8'/%3E%3Ccircle cx='54' cy='230' r='0.8' fill='white' opacity='0.9'/%3E%3Ccircle cx='140' cy='300' r='1.2' fill='white' opacity='0.5'/%3E%3Ccircle cx='557' cy='124' r='1.5' fill='white' opacity='0.6'/%3E%3Ccircle cx='577' cy='189' r='0.8' fill='white' opacity='0.9'/%3E%3Ccircle cx='588' cy='196' r='1' fill='white' opacity='0.35'/%3E%3Ccircle cx='564' cy='68' r='1.5' fill='white' opacity='0.35'/%3E%3Ccircle cx='214' cy='512' r='1.8' fill='white' opacity='0.9'/%3E%3Ccircle cx='441' cy='325' r='1.2' fill='white' opacity='0.9'/%3E%3Ccircle cx='468' cy='374' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='188' cy='253' r='0.8' fill='white' opacity='0.9'/%3E%3Ccircle cx='311' cy='541' r='1.2' fill='white' opacity='0.6'/%3E%3Ccircle cx='463' cy='298' r='1.5' fill='white' opacity='0.35'/%3E%3Ccircle cx='124' cy='528' r='1.2' fill='white' opacity='0.5'/%3E%3Ccircle cx='354' cy='159' r='1.2' fill='white' opacity='0.8'/%3E%3Ccircle cx='44' cy='83' r='1.5' fill='white' opacity='0.9'/%3E%3Ccircle cx='325' cy='352' r='1.8' fill='white' opacity='0.6'/%3E%3Ccircle cx='512' cy='471' r='0.8' fill='white' opacity='0.35'/%3E%3Ccircle cx='280' cy='489' r='1.8' fill='white' opacity='0.35'/%3E%3Ccircle cx='66' cy='321' r='1.8' fill='white' opacity='0.9'/%3E%3Ccircle cx='460' cy='295' r='1.8' fill='white' opacity='0.8'/%3E%3Ccircle cx='359' cy='27' r='1.2' fill='white' opacity='0.6'/%3E%3Ccircle cx='176' cy='123' r='1.2' fill='white' opacity='0.35'/%3E%3Ccircle cx='227' cy='298' r='1' fill='white' opacity='0.5'/%3E%3Ccircle cx='411' cy='404' r='1.2' fill='white' opacity='0.35'/%3E%3Ccircle cx='174' cy='463' r='1.2' fill='white' opacity='0.9'/%3E%3Ccircle cx='288' cy='144' r='1.2' fill='white' opacity='0.9'/%3E%3Ccircle cx='289' cy='429' r='1' fill='white' opacity='0.8'/%3E%3C/svg%3E"), linear-gradient(180deg, #1E3384 0%, #233990 6%, #2B4199 18%, #3149A1 30%, #3B56AB 42%, #415CB1 50%, #516CBD 62%, #617BC4 72%, #7186CB 80%, #8D93CC 87%, #9F9BCC 92%, #AD9BC5 96%, #BDA1C0 100%);
  background-repeat:repeat, repeat, no-repeat;
  background-size:300px 300px, 600px 600px, 100% var(--duskH, 300vh);
  background-position:0 0, 0 0, 0 0; background-color:#233990; }
section.cta-final.is-paper{ background-position:0 0, 0 calc(-1 * var(--duskOff, 0px)), 0 calc(-1 * var(--duskOff, 0px)); }
section.cta-final.is-paper{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(180deg, #1E3384 0%, #233990 6%, #2B4199 18%, #3149A1 30%, #3B56AB 42%, #415CB1 50%, #516CBD 62%, #617BC4 72%, #7186CB 80%, #8D93CC 87%, #9F9BCC 92%, #AD9BC5 96%, #BDA1C0 100%); background-repeat:repeat, no-repeat; background-size:300px 300px, 100% var(--duskH, 300vh); background-position:0 0, 0 calc(-1 * var(--duskOff, 0px)); }
.vf-ftab, .vf-note{ color:#0C0C0C; }

/* ── Operator files · option A: the quote leads ─────────────── */
.vf-say{ grid-column:1 / -1; grid-row:2; align-self:center; display:flex; flex-direction:column; gap:18px; }
.vf-sheet .vf-quote{ grid-column:auto; grid-row:auto; align-self:flex-start; max-width:24ch; font-size:clamp(28px,3.3vw,50px); line-height:1.18; }
.vf-proof{ margin:0; font-size:15px; letter-spacing:-.01em; color:rgba(12,12,12,.62); }
.vf-proof b{ font-weight:700; color:#3F6ECA; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.vf-proof b .u{ font-weight:600; margin-left:2px; }
.vf-foot{ justify-content:flex-start; }

/* ── Operator voices · header above the folder, sheet laid out top-down ── */
.vf-head{ text-align:center; max-width:1100px; margin:0 auto clamp(26px,3.5vh,44px); }
.vf-eye{ display:inline-block; margin-bottom:14px; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,246,239,.62); }
.vf-h2{ margin:0 auto; max-width:24ch; font-family:var(--display); font-size:clamp(30px,3.5vw,52px); line-height:1.04; letter-spacing:-.035em; font-weight:800; color:#FAF6EF; text-wrap:balance; }
.vf-h2 .accent{ color:#A9D7F2; }
.vf-stage{ --vf-h:calc(100vh - 2 * var(--vf-gap) - var(--vf-headH, 180px)); }
.vf-sheet .vf-in{ display:flex; flex-direction:column; gap:clamp(16px,2.2vh,26px); }
.vf-sheet .vf-meta{ flex:none; }
.vf-say{ flex:1 1 auto; justify-content:center; align-self:stretch; }
.vf-sheet .vf-quote{ max-width:26ch; font-size:clamp(28px,3.4vw,54px); }
.vf-sheet.is-posty .vf-posty{ flex:1 1 auto; }
@media (max-width:760px){ .vf-head{ text-align:left; margin-bottom:22px; } .vf-h2{ font-size:30px; } }
/* the folder's airmail stripe is gone — the postcard below owns that motif */
.vf-body::before{ display:none; }
.vf-body{ border-radius:18px; }
.vf-sheet.is-posty .vf-foot{ align-items:center; gap:18px; }
.vf-sheet.is-posty .vf-foot .vf-logo{ line-height:1; }
.vf-tabs{ top:14px; bottom:14px; }
/* index tabs · one short word per tab, evenly spaced, never clipped */
.vf-tab span{ font-size:12px; letter-spacing:.16em; gap:12px; padding:14px 0; }
.vf-tab span b{ opacity:.45; }
/* the sheet fits the viewport height: type and gaps scale with vh, and the folder
   grows to its tallest sheet when a short window would otherwise clip it */
.vf-sheet .vf-quote{ font-size:clamp(22px, min(3.4vw, 5.6vh), 54px); line-height:1.16; }
.vf-sheet .vf-in{ gap:clamp(12px,2vh,26px); padding-top:clamp(16px,2.4vh,34px); padding-bottom:clamp(14px,2vh,30px); }
.vf-foot{ padding-top:clamp(10px,1.4vh,14px); }
.vf-folder{ height:max(var(--vf-h), var(--vf-need, 0px)); }
@media (max-height:820px){
  .vf-stage{ --vf-gap:max(44px,5vh); }
  .vf-head{ margin-bottom:clamp(14px,2.2vh,24px); }
  .vf-eye{ margin-bottom:8px; }
  .vf-h2{ font-size:clamp(26px,3.1vw,40px); }
}
@media (max-width:1100px){ .vf-sheet .vf-quote{ font-size:clamp(22px,2.8vw,34px); } }
@media (max-width:760px){ .vf-say{ gap:12px; } .vf-sheet .vf-quote{ max-width:none; font-size:23px; } }


@media (prefers-reduced-motion:reduce){
  .vf-folder{ transform:none !important; opacity:1 !important; }
  .vf-sheet, .vf-tab{ transition:none; } .vf-sheet.is-leaving, .vf-sheet.is-returning{ animation:none; } .vf-sheet.is-on .vf-in{ animation:none; }
}
@media (max-width:1100px){
  .vf-in{ grid-template-columns:minmax(260px,40%) 1fr; column-gap:32px; }
  .vf-quote{ font-size:clamp(20px,2.4vw,30px); }
  .vf-note{ width:min(340px,40%); }
}
@media (max-width:760px){
  .vf{ padding-top:56px; }
  .vf .wrap{ padding:0 12px; }
  .vf-stage{ --vf-h:auto; }
  .vf-folder{ height:auto; }
  .vf-body{ position:relative; inset:auto; padding:52px 14px 16px; border-radius:0 0 16px 16px; --tabw:0px; }
  .vf-ftab{ right:0; height:30px; padding:0 14px; }
  .vf-body::before{ right:0; border-radius:0; }
  .vf-note{ position:relative; inset:auto; left:0; top:0; width:100%; margin:0 0 -12px; transform:rotate(-1deg); pointer-events:auto; }
  .vf-sheets{ position:relative; inset:auto; margin-top:58px; }
  .vf-sheet{ position:relative; inset:auto; display:none; }
  .vf-sheet.is-on{ display:block; }
  .vf-in{ position:relative; inset:auto; padding:20px 18px 18px; display:flex; flex-direction:column; gap:18px; }
  .vf-ticket{ margin-left:-26px; width:84%; }
  .vf-quote{ max-width:none; font-size:22px; }
  .vf-posty{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .vf-stamp{ width:64px; bottom:auto; top:14px; right:14px; }
  .vf-tabs{ inset:-48px 0 auto 0; width:auto; height:44px; flex-direction:row; gap:6px; }
  .vf-tab{ border-radius:10px 10px 0 0; transform:translateY(6px); }
  .vf-tab.is-on, .vf-tab:hover{ transform:translateY(0); }
  .vf-tab span{ writing-mode:horizontal-tb; transform:none; font-size:10px; } .vf-tab span b{ display:none; }
}


/* =============================================================================
   CLOSER · the postcard (Frank, 4 Sep)
   The closing message is written on the back of an airmail postcard, set down
   on the paper at a slight angle, with a corner of Posty stamps and a postmark.
   Everything is drawn from the system: cream card, Ocean Deep + Heather
   chevrons for the airmail border, Ocean 60 rules for the address lines, and
   the stamp mark in its own sky plus the palette's small-surface tints.
   The reference was an illustrated envelope; nothing from it is reproduced.
   ============================================================================ */
.cta-final{ padding:clamp(96px,11vw,170px) 0 clamp(120px,13vw,200px); text-align:left; overflow:hidden; }
.cta-final::before{ display:none; }
.postcard-stage{ display:flex; justify-content:center; padding:2vw 0; }

.postcard{
  --pc-tilt:-5deg;
  position:relative; width:min(940px, 88vw); aspect-ratio:1.58;
  background:#FBF7F0;
  border-radius:14px;
  transform:rotate(var(--pc-tilt));
  box-shadow:0 60px 120px -50px rgba(12,12,12,.35), 0 24px 48px -30px rgba(12,12,12,.22),
             inset 0 0 0 1px rgba(12,12,12,.06);
  color:var(--ink);
  /* paper grain, the same feTurbulence the sky uses */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
}
/* the airmail border · Ocean Deep + Heather chevrons, drawn as four edges */
.pc-border{ position:absolute; inset:14px; border-radius:6px; pointer-events:none;
  --a:#3F6ECA; --b:#E4BFD3; --w:26px;
  background:
    repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) top / 100% 9px no-repeat,
    repeating-linear-gradient(115deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) bottom / 100% 9px no-repeat,
    repeating-linear-gradient(25deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) left / 9px 100% no-repeat,
    repeating-linear-gradient(25deg, var(--a) 0 18px, transparent 18px 26px, var(--b) 26px 44px, transparent 44px 52px) right / 9px 100% no-repeat; }
.pc-inner{ position:absolute; inset:44px 52px 48px 56px; display:grid;
  grid-template-columns:1.05fr 1px .95fr; column-gap:clamp(24px,3.4vw,52px); }
.pc-rule{ background:rgba(12,12,12,.14); align-self:stretch; margin:12px 0; }

/* the message half */
.pc-msg{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:56px 0 8px; min-width:0; }
.pc-airmail{ position:absolute; left:0; top:0; font-family:var(--mono, ui-monospace, monospace);
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:#3F6ECA;
  padding:6px 12px; border:1.5px solid #3F6ECA; border-radius:4px; }
.cta-final .postcard h2{ font-size:clamp(32px,3.8vw,56px); line-height:1.02; letter-spacing:-.035em; font-weight:800;
  color:var(--ink); margin:0 0 14px; max-width:none; white-space:normal; text-wrap:balance; }
.cta-final .postcard h2 .accent{ color:var(--ocean-deep); }
.cta-final .postcard p{ font-size:clamp(14.5px,1.15vw,17px); line-height:1.5; color:var(--t-ink-70);
  margin:0 0 22px; max-width:34ch; }
.cta-final .postcard .actions{ justify-content:flex-start; margin:0; gap:12px; }
.cta-final .postcard .btn-ink, .cta-final .postcard .btn-ghost-paper{ padding:14px 24px; font-size:15px; }

/* the address half */
.pc-addr{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.pc-stamps{ position:absolute; inset:-6px -8px auto auto; width:100%; height:58%; pointer-events:none; }
.pc-stamp{ position:absolute; width:var(--s); height:auto; filter:drop-shadow(0 6px 10px rgba(12,12,12,.14));
  transform:rotate(var(--r)); }
.pc-stamp.s1{ --s:118px; --r:4deg;   right:5%;  top:2%;  }
.pc-stamp.s2{ --s:88px;  --r:-7deg;  right:30%; top:0;   }
.pc-stamp.s3{ --s:64px;  --r:9deg;   right:52%; top:14%; }
.pc-stamp.s4{ --s:72px;  --r:-4deg;  right:14%; top:52%; }
.pc-stamp.s5{ --s:56px;  --r:6deg;   right:44%; top:58%; }
.pc-stamp.s6{ --s:48px;  --r:-11deg; right:64%; top:0;   }
.pc-postmark{ position:absolute; width:150px; height:150px; right:24%; top:22%; color:rgba(12,12,12,.72);
  font-family:var(--mono, ui-monospace, monospace); fill:currentColor; transform:rotate(-9deg); overflow:visible; }
.pc-cancel{ opacity:.9; }

.pc-to{ margin-top:auto; padding-top:8px; }
.pc-lbl{ display:block; font-family:var(--mono, ui-monospace, monospace); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--t-ink-55); margin-bottom:6px; }
.pc-line{ position:relative; height:34px; border-bottom:1.5px solid #A4B8E0; }
.pc-line i{ position:absolute; left:6px; bottom:6px; font-style:normal; font-size:14.5px; letter-spacing:-.005em;
  color:var(--t-ink-70); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:calc(100% - 8px); }

/* the card is set down, not dropped: a small settle on entry */
@media (prefers-reduced-motion:no-preference){
  .postcard{ animation:pcSettle 1.1s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes pcSettle{ from{ transform:rotate(calc(var(--pc-tilt) - 3deg)) translateY(28px); opacity:0; }
                       to{ transform:rotate(var(--pc-tilt)) translateY(0); opacity:1; } }
}

@media (max-width:1100px){
  .postcard{ --pc-tilt:-4deg; }
  .pc-stamp.s1{ --s:96px; } .pc-stamp.s2{ --s:72px; } .pc-postmark{ width:120px; height:120px; }
}
@media (max-width:760px){
  .cta-final{ padding:72px 0 96px; }
  .postcard{ --pc-tilt:-3deg; width:94vw; aspect-ratio:auto; }
  .pc-border{ inset:10px; }
  .pc-inner{ position:relative; inset:auto; padding:34px 28px 30px; grid-template-columns:1fr; row-gap:22px; }
  .pc-rule{ height:1px; margin:0; }
  .pc-msg{ order:2; }
  .pc-addr{ order:1; min-height:200px; }
  .pc-stamps{ inset:0 0 auto 0; height:150px; }
  .pc-stamp.s1{ --s:78px; } .pc-stamp.s2{ --s:58px; } .pc-stamp.s3{ --s:44px; }
  .pc-stamp.s4{ --s:50px; top:56%; } .pc-stamp.s5{ --s:40px; } .pc-stamp.s6{ --s:34px; }
  .pc-postmark{ width:104px; height:104px; }
  .pc-to{ margin-top:150px; }
  .pc-line{ height:30px; }
  .cta-final .postcard .actions{ flex-direction:column; align-items:stretch; }
}

/* ---- the paper section lifts off the ink one (Frank, 3 Sep) -------------------
   The cut from the ink statement to the operator voices was a hard square edge.
   The paper now curves over the ink and stands off it, with more air above the
   headline so it does not sit tight under the join. */
#voices{ border-radius:28px 28px 0 0; margin-top:-1px; position:relative; z-index:2; }
#voices{ padding-top:clamp(84px,9vh,132px); }
@media (max-width:760px){ #voices{ border-radius:20px 20px 0 0; padding-top:clamp(64px,8vh,96px); } }

/* ---- order placed · no dead band under the card (Frank, 3 Sep) ----------------
   "Continue without protection" was only hidden, so its row and margin still held
   open a strip of shell under the confirmation. It collapses now, and the card's
   own bottom padding carries the rhythm instead. */
.co-mock.is-done .co-decline{ height:0; margin:0; padding:0; overflow:hidden; }
.co-done-cta{ margin-bottom:.9em; }

/* ---- the chosen case chip · the portal's own selected state (Frank, 3 Sep) ----
   It was a solid ink pill, which read as a button rather than a choice. Same
   treatment the case portal gives a picked option: pale ground, a 1.5px accent
   rule, ink label, and a soft drop in the accent's own colour. */
.vm-chip.on{
  background:var(--sky-soft); color:var(--ink); font-weight:600;
  box-shadow:inset 0 0 0 1.5px var(--ocean),
             0 14px 34px -22px var(--ocean); }
.vm-chip.on, .vm-pill-ink{ background-image:none; }

/* ---- the whole widget speaks Pearable purple, no Ocean left (Frank, 3 Sep) ----
   Every accent inside the checkout mock: the info affordance, the benefit ticks,
   the cash back line, the switch when it is on, and the way back to coverage. */
.co-i:hover{ border-color:#24675E; color:#24675E; }
.co-check svg{ color:#24675E; }
.co-cashline{ color:#24675E; }
.co-tgl.is-on{ background:#24675E; box-shadow:0 0 0 .25em #E8F2EF; }
.co-mock.is-off .co-decline{ color:#24675E; }
.co-mock.is-off .co-decline:hover{ color:#19554D; }
.co-done-row.is-cb b{ color:#24675E; }

/* ---- re-add protection · the merchant's purple, not Ocean (Frank, 3 Sep) ------
   When coverage is off this link is the way back to it, so it wears the same
   #24675E as the rest of the widget rather than the site's Ocean Deep. */
.co-mock.is-off .co-decline{ color:#24675E; }
.co-mock.is-off .co-decline:hover{ color:#19554D; }

/* ---- the case chips wrap now there are four (Frank, 3 Sep) -------------------- */
.vm-chips{ flex-wrap:wrap; row-gap:.4em; }

/* ---- merchant mark · optical centring in its tile (Frank, 3 Sep) --------------
   The pear's mass is all in the body, with only a thin stem and leaf above it, so
   a box-centred glyph reads low. A small lift puts the visual weight on the
   tile's centre line rather than the bounding box's. */
.vm-mark.has-logo img{ transform:translateY(-11%); }

/* ---- checkout button · plain black, white label (Frank, 3 Sep) ---------------
   The pale purple pill read as secondary next to the widget's own cards. Back to
   the standard: ink ground, white label, a lit top edge. Shape untouched. */
.co-btn{
  background:#0C0C0C;
  background-image:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 56%);
  color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 18px 34px -22px rgba(10,10,10,.62); }
.co-btn:hover{ background-color:#1C1C1E; }
.co-cash{ color:rgba(255,255,255,.72); }
.co-btn.is-busy{ color:#FFFFFF; }

/* ---- order placed · the portal's check mark, exactly (Frank, 3 Sep) -----------
   The tick was a static glyph on a sage disc. It is now the same drawn ring that
   thickens into a disc while the tick strokes on, so filing a case and placing an
   order confirm in the same voice. */
.co-done-tick{ background:none !important; color:inherit; width:3.05em; height:3.05em;
  margin:1.0em auto .5em; border-radius:0; display:block; }
.co-done-tick svg{ width:100%; height:100%; overflow:visible; display:block; }
.co-done-tick .ck-ring{ fill:none; stroke:#2F9A62; stroke-width:26; stroke-linecap:round;
  stroke-dasharray:151; stroke-dashoffset:151; }
.co-done-tick .ck-tick{ fill:none; stroke:#fff; stroke-width:4.6; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:28; stroke-dashoffset:28; }
.co-mock.is-done .co-done-tick svg{
  animation:coCkPop 1.35s cubic-bezier(.34,1.2,.4,1) both, coCkGlow 1.35s ease both; }
.co-mock.is-done .co-done-tick .ck-ring{ animation:coCkRing 1.35s cubic-bezier(.5,0,.25,1) both; }
.co-mock.is-done .co-done-tick .ck-tick{ animation:coCkTick 1.35s cubic-bezier(.4,0,.2,1) both; }
@keyframes coCkRing{
  0%{ stroke-dashoffset:151; r:24px; stroke-width:5; }
  38%{ stroke-dashoffset:0; r:24px; stroke-width:5; }
  62%,100%{ stroke-dashoffset:0; r:13px; stroke-width:26; } }
@keyframes coCkTick{ 0%,64%{ stroke-dashoffset:28; } 90%,100%{ stroke-dashoffset:0; } }
@keyframes coCkPop{
  0%{ transform:scale(.72); opacity:0; }
  14%{ opacity:1; }
  38%{ transform:scale(1.05); }
  62%{ transform:scale(.93); }
  80%{ transform:scale(1.05); }
  100%{ transform:scale(1); } }
@keyframes coCkGlow{
  0%,34%{ filter:drop-shadow(0 6px 14px rgba(47,154,98,.2)); }
  62%{ filter:drop-shadow(0 12px 30px rgba(47,154,98,.55)); }
  100%{ filter:drop-shadow(0 8px 20px rgba(47,154,98,.35)); } }
@media (prefers-reduced-motion:reduce){
  .co-mock.is-done .co-done-tick svg,
  .co-mock.is-done .co-done-tick .ck-ring,
  .co-mock.is-done .co-done-tick .ck-tick{ animation:none; }
  .co-done-tick .ck-ring{ stroke-dashoffset:0; r:13px; }
  .co-done-tick .ck-tick{ stroke-dashoffset:0; } }

/* ---- order tile · the mark sits dead centre, whatever it is (Frank, 3 Sep) -----
   place-items already centres the box; this pins it so an odd intrinsic size or a
   swapped-in logo can never drift it off. */
#order-thumb{ display:flex !important; align-items:center; justify-content:center; padding:0; }
#order-thumb img{ display:block; margin:0 auto; width:auto; height:32px;
  max-width:36px; max-height:32px; object-fit:contain; }

/* ---- order placed · protection, not paperwork (Frank, 3 Sep) ------------------
   The card used to read "Policy written · PY-9482-P", which is the insurer's
   language, not the shopper's. It now says the one thing that matters, carries
   the case reference they would quote, and hands them straight to the case flow.
   Purple throughout: this widget lives on Pearable's checkout. */
.co-done-row.is-pol{ justify-content:flex-start; gap:.55em; align-items:center; }
.co-done-row.is-pol .co-done-ic{ flex:none; width:1.5em; height:1.5em; display:block; }
.co-done-row.is-pol .co-done-ic img{ width:100%; height:100%; display:block; }
.co-done-row.is-pol b{ font-weight:700; color:var(--ink); }
.co-done-row.is-cb b{ color:#24675E; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.co-done-cta{ display:none; }
.co-done-cta.is-show{ display:inline-flex; }
.co-done-cta{ align-items:center; justify-content:center; gap:.5em;
  margin:0 1.05em 1.05em; padding:.72em 1.1em; border-radius:999px;
  background:#24675E; color:#fff; font-size:.88em; font-weight:700; letter-spacing:-.005em;
  cursor:pointer; border:0; font-family:inherit; text-decoration:none;
  transition:background .2s ease, transform .16s cubic-bezier(.32,.72,0,1);
  opacity:0; transform:translateY(7px); }
.co-done-cta:hover{ background:#19554D; }
.co-mock.is-done .co-done-cta.is-show{ opacity:1; transform:none;
  transition:opacity .35s ease .5s, transform .4s cubic-bezier(.32,.72,0,1) .5s, background .2s ease; }
.co-done-cta i{ font-style:normal; }
/* the widget's own button style now lives in the ghost-pill block below */
@media (prefers-reduced-motion:reduce){ .co-done-cta{ transition:none; } }

/* ---- cart drawer · Checkout centres itself when coverage is off (Frank, 3 Sep) --
   The cash back line was only faded out, so it still held its row and pushed
   "Checkout" above the button's centre. It now collapses to zero height, so the
   label sits dead centre when the switch is off and lifts as the line opens. */
.pfd-btn{ gap:0; }
.pfd-btn em{ display:block; overflow:hidden; height:0; margin-top:0; opacity:0;
  transition:height .3s cubic-bezier(.32,.72,0,1), margin-top .3s cubic-bezier(.32,.72,0,1),
             opacity .24s ease; }
.pflow.s3 .pfd-btn em, .pflow.s4 .pfd-btn em{ height:.96em; margin-top:.06em; opacity:1; }
@media (prefers-reduced-motion:reduce){ .pfd-btn em{ transition:none; } }

/* ---- the lid's notch · measured off a real MacBook (Frank, 3 Sep) -------------
   Proportions taken from Frank's reference, normalised to the drop D (the part of
   the notch below the bezel), so the shape stays honest at any lid size:
     width 5.75 D  ·  bottom radius 0.26 D
     ear: a true quarter-round at half the outer radius (outer 4px, inner 2px)
     camera 0.05 D, centred 0.21 D down
   The concave ears are the nav island's grammar, but on a real lid they read as a
   hairline flare rather than a scoop, so they are sized from the reference, not
   from the nav's much larger island. */
.mac-notch{ background:#000; height:28px; border-radius:0 0 4px 4px; box-shadow:none; }
.mac-notch::before, .mac-notch::after{
  content:""; position:absolute; top:14px; width:2px; height:2px;
  background-size:100% 100%; background-repeat:no-repeat; pointer-events:none;
  background-color:transparent; border-radius:0; box-shadow:none; transform:none; }
.mac-notch::before{ left:-2px; right:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M0 0 L19 0 L19 18 L18 18 A18 18 0 0 0 0 0 Z' fill='black'/%3E%3C/svg%3E"); }
.mac-notch::after{ right:-2px; left:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 18'%3E%3Cpath d='M19 0 L0 0 L0 18 L1 18 A18 18 0 0 1 19 0 Z' fill='black'/%3E%3C/svg%3E"); }
/* the camera, back where the reference has it: a 1px lens 3px under the bezel */
.mac-cam{ position:absolute; left:50%; top:17px; width:1px; height:1px; margin-left:-.5px;
  border-radius:50%; background:#26262A; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10);
  pointer-events:none; }
@media (max-width:760px){
  .mac-notch{ height:19px; border-radius:0 0 3px 3px; }
  .mac-notch::before, .mac-notch::after{ top:9px; width:1.5px; height:1.5px; }
  .mac-notch::before{ left:-1.5px; }
  .mac-notch::after{ right:-1.5px; }
  .mac-cam{ top:11px; width:1px; height:1px; margin-left:-.5px; }
}

/* ---- portal frame · width pinned in CSS as well as by the fitter (Frank, 3 Sep) --
   The fitter scales by the frame's data-w; if the inline width ever lags it, the
   document would render at 1500 and sit left of centre inside the window. */
iframe.mw-frame[data-w="1700"]{ width:1700px; }
.mw-body.is-app .mw-frame{ left:50%; right:auto; transform-origin:50% 0; }

/* ---- sign-in modal · the sky pill (Frank, 3 Sep) ------------------------------
   The one button colour the system reserves, and the same pill the visitor
   just clicked in the nav. It had been folded into the ink family, dark on dark. */
#signinForm .btn-sky, #signinForm .btn-sky:hover{
  background:var(--sky); background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 56%);
  color:var(--ink); box-shadow:0 14px 30px -14px rgba(169,215,242,.5), 0 3px 8px -4px rgba(10,22,44,.3); }
#signinForm .btn-sky:hover{ background:#BEE1F6; }
#signinForm .btn-sky .arrow{ background:#FFFFFF; color:var(--ink); }
#signinForm .btn-sky::before{ display:none; }

/* ---- pricing · Book a demo goes light (Frank, 3 Sep) --------------------------
   The section sits on ink, and the button had been folded into the ink family,
   so it read as a dark pill on a dark ground. Same sky pill as the nav CTA. */
#pricing .btn-paper, #pricing .btn-paper:hover{
  background:var(--sky); background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 56%);
  color:var(--ink); box-shadow:0 14px 30px -14px rgba(169,215,242,.45), 0 3px 8px -4px rgba(10,22,44,.3); }
#pricing .btn-paper:hover{ background:#BEE1F6; }
#pricing .btn-paper .arrow{ background:#FFFFFF; color:var(--ink); }

/* ---- finale card · idle life before the zoom (Frank, 3 Sep · option 1 + 4) ----
   At rest the card was a black rectangle with two parked clouds. Each cloud now
   bobs a few pixels and breathes, out of phase, on the individual translate /
   scale properties so the zoom-parting transform stays untouched underneath.
   A faint sky glow swells behind them, so the black reads as night sky with
   something behind it. All of it off under reduced motion. */
.ub-vis.fin{ position:relative; }
.ub-vis.fin::before{ content:""; position:absolute; inset:-10%; z-index:1; pointer-events:none;
  background:radial-gradient(52% 44% at 50% 54%, rgba(169,215,242,.62) 0%, rgba(169,215,242,.18) 45%, rgba(169,215,242,0) 72%);
  opacity:.45; animation:ubGlow 7.2s ease-in-out infinite; }
/* + the peek (option 3): once a cycle the clouds part along the same diagonal the
   zoom uses, about a tenth of the way, the eyes show through, and they close. */
.ub-fin-clouds .ufc{ animation:ubBob1 13s ease-in-out infinite; }
.ub-fin-clouds .c2{ margin:-1.6% 0 0 -2%; animation-name:ubBob2; }   /* tucked a touch further under c1, so the seam never shows the stamp at rest */
@keyframes ubBob1{
  0%,100%{ translate:0 0; scale:1; }
  18%{ translate:0 -2.2%; scale:1.025; }
  36%{ translate:0 0; scale:1; }
  52%{ translate:-28% -16%; scale:1.01; }
  64%{ translate:-28% -16%; scale:1.01; }
  78%{ translate:0 0; scale:1; }
  90%{ translate:0 -1.4%; scale:1.02; } }
@keyframes ubBob2{
  0%,100%{ translate:0 0; scale:1; }
  18%{ translate:0 -2.2%; scale:1.025; }
  36%{ translate:0 0; scale:1; }
  52%{ translate:28% 16%; scale:1.01; }
  64%{ translate:28% 16%; scale:1.01; }
  78%{ translate:0 0; scale:1; }
  90%{ translate:0 -1.4%; scale:1.02; } }
/* the glow brightens with the peek, so the eyes come out of light, not out of black */
.ub-vis.fin::before{ animation-duration:13s; }
@keyframes ubGlow{
  0%,100%{ opacity:.32; }
  18%{ opacity:.6; }
  36%{ opacity:.36; }
  52%,64%{ opacity:.9; }
  78%{ opacity:.34; } }
@media (prefers-reduced-motion:reduce){
  .ub-vis.fin::before{ animation:none; opacity:.4; }
  .ub-fin-clouds .ufc{ animation:none; } }

/* ---- tour subtext · no orphans (Frank, 3 Sep) --------------------------------
   The caption box was 520px, so three of the four lines broke into a long line
   and a stranded tail ("end to end."). Wider box so the shorter captions sit on
   one line, and balanced wrapping so the long one breaks into two even halves. */
.tour-sub{ max-width:780px; }
.ts-line{ text-wrap:balance; }

/* ---- Pearable lockup in the store chrome (Frank, 4 Sep) --------------------
   The wordmark is part of the SVG now, so the header mark is sized by height
   and the old letter-spaced <b>PEAR</b> is gone. */
.pco-brand img{ height:1.12em; width:auto; display:block; }
.vm-mark.has-logo img{ width:72%; height:72%; }


/* ===== plane trail v4 (Frank, 3 Sep) · length follows scroll speed, fades in and decays ===== */
.vj-trail{ transform:translateY(-26px) scale(.45) scaleY(calc(1 + var(--trail,0) * .35)); }
.vj.is-moving .vj-trail{ transform:translateY(-26px) scale(.45) scaleY(calc(1 + var(--trail,0) * .35)); }
@media (max-width:760px){ .vj-trail, .vj.is-moving .vj-trail{ transform:translateY(-20px) scale(.38) scaleY(calc(1 + var(--trail,0) * .35)); } }
.vj-trail i, .vj.is-moving .vj-trail i{ animation:vjFlick .7s ease-in-out infinite; transition:opacity .22s ease; transition-delay:0s; }
.vj-trail i:nth-child(1){ opacity:clamp(0, calc(var(--trail,0) * 9 - 0), 1); }
.vj-trail i:nth-child(2){ opacity:clamp(0, calc(var(--trail,0) * 9 - 1), 1); }
.vj-trail i:nth-child(3){ opacity:clamp(0, calc(var(--trail,0) * 9 - 2), 1); }
.vj-trail i:nth-child(4){ opacity:clamp(0, calc(var(--trail,0) * 9 - 3), 1); }
.vj-trail i:nth-child(5){ opacity:clamp(0, calc(var(--trail,0) * 9 - 4), 1); }
.vj-trail i:nth-child(6){ opacity:clamp(0, calc(var(--trail,0) * 9 - 5), 1); }
.vj-trail i:nth-child(7){ opacity:clamp(0, calc(var(--trail,0) * 9 - 6), 1); }
.vj-trail i:nth-child(8){ opacity:clamp(0, calc(var(--trail,0) * 9 - 7), 1); }
.vj-trail i:nth-child(9){ opacity:clamp(0, calc(var(--trail,0) * 9 - 8), 1); }
.vj.is-moving .vj-trail i:nth-child(n){ opacity:clamp(0, calc(var(--trail,0) * 9 - var(--k,0)), 1); }
/* ===== journey step headers +20% ===== */
.vj-meta h3{ font-size:clamp(28px,2.9vw,36px); }
/* ===== hero clouds · the floor bank sits fully inside the hero (never clipped), and every cloud paints over the stars ===== */
.hero.hero-globe .cl-floor{ bottom:74px; -webkit-mask-image:none; mask-image:none; }
.hero.hero-globe .cl-ambient{ z-index:1; }
.hero.hero-globe .cl-ambient .cpa{ z-index:2; }
.hero.hero-globe .cl-ambient .cst{ z-index:1; }

/* ===== journey → cards · one sky image runs the whole arc (Frank, 3 Sep) =====
   The picture already carries day → lavender → pink → sunrise. It is scaled to the
   journey height plus one viewport (--skyH, set by script), the journey shows its head,
   and the cards' pinned viewport shows its tail, so the two meet pixel for pixel. */
section.journey.cascade{ background:none; position:relative; }
section.journey.cascade::before{ content:""; display:block; position:absolute; inset:0; top:0; height:auto; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), radial-gradient(ellipse 46% 9% at 50% 91%, rgba(255,236,206,.85) 0%, rgba(255,232,200,.4) 45%, rgba(255,232,200,0) 100%), radial-gradient(ellipse 34% 7% at 6% 9%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%); background-position:0 0, center top, center top, center top; background-size:300px 300px, 100% var(--skyH,200%), 100% var(--skyH,200%), 100% var(--skyH,200%); background-repeat:repeat, no-repeat, no-repeat, no-repeat;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,.35) 140px, rgba(0,0,0,.8) 280px, #000 400px);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,.35) 140px, rgba(0,0,0,.8) 280px, #000 400px); }
section.journey.cascade > *{ position:relative; z-index:1; }
section.journey.cascade > .jy-mist{ z-index:2; }
section.journey.cascade > .jy-clouds{ position:absolute; z-index:1; } /* the cloud + parachute layer stays absolute (inset:0), above the sky, under the content */
.ubest .ub-pinvp{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), radial-gradient(ellipse 46% 9% at 50% 91%, rgba(255,236,206,.85) 0%, rgba(255,232,200,.4) 45%, rgba(255,232,200,0) 100%), radial-gradient(ellipse 34% 7% at 6% 9%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%); background-position:0 0, center bottom, center bottom, center bottom; background-size:300px 300px, 100% var(--skyH,200%), 100% var(--skyH,200%), 100% var(--skyH,200%); background-repeat:repeat, no-repeat, no-repeat, no-repeat; background-color:#F4C09D; }
section.social.ubest{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), radial-gradient(ellipse 46% 9% at 50% 91%, rgba(255,236,206,.85) 0%, rgba(255,232,200,.4) 45%, rgba(255,232,200,0) 100%), radial-gradient(ellipse 34% 7% at 6% 9%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%); background-position:0 0, center var(--bandY, 0px), center var(--bandY, 0px), center var(--bandY, 0px); background-size:300px 300px, 100% var(--skyH,200%), 100% var(--skyH,200%), 100% var(--skyH,200%); background-repeat:repeat, no-repeat, no-repeat, no-repeat; background-color:#E9AFAF; } /* the runway band between the journey and the pinned viewport shows its own slice of the same picture */
/* the dusk is gone: Returns goes back to ink */
.vj-step:nth-of-type(6) h3, .vj-step:nth-of-type(6) p, .vj-step:nth-of-type(6) .vj-no, .vj-step:nth-of-type(6) .vj-more{ color:var(--t-ink) !important; }
.vj-step:nth-of-type(6) .vj-stat b{ color:var(--ocean-deep) !important; }
.vj-step:nth-of-type(6) .vj-stat span{ color:rgba(10,10,10,.48) !important; }
.vj-step:nth-of-type(6) .vj-stat{ border-top-color:rgba(12,12,12,.12) !important; }
.vj-step:nth-of-type(6) .vj-more .ring{ border-color:rgba(12,12,12,.35) !important; color:var(--t-ink) !important; }

/* ===== closer corners show the footer image (Frank, 3 Sep) · the footer tucks 48px under the closer; the pinned statement and #reveal go clear there ===== */
#reveal{ background:transparent; }
html, body{ background:var(--ink); } /* the page ground is ink again: the footer now tucks under the closer, so no seam can show; the transparent #reveal lets the footer paint through the closer's corners */
section.stmt.is-ink{ background:var(--ink); } /* solid ink end to end (Frank, 4 Sep): no clear strip mid-page, so the hero's clouds never show under the statement */
/* the clear 48px strip only opens once the footer is revealed at the page end, so the closer's corners lift onto the footer image */
body:has(footer.footer-deep.revealed) section.stmt.is-ink{
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 48px), rgba(0,0,0,0) calc(100% - 48px));
  mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 48px), rgba(0,0,0,0) calc(100% - 48px)); }
footer.footer-deep{ padding-top:48px; }
/* footer folded to the nav: one column, no legal line */
footer.footer-deep .footer-grid{ grid-template-columns:1fr; padding-bottom:var(--lg); }
footer.footer-deep .footer-col ul{ flex-direction:row; flex-wrap:wrap; gap:10px 28px; }
/* phones: the footer links were 15px-tall text runs; give each a thumb-sized hit area and
   centre the rows so a wrapped last link (Sign in) sits under the others, not alone at the left */
@media (max-width:640px){
  footer.footer-deep .footer-col ul{ justify-content:center; gap:0 8px; }
  footer.footer-deep .footer-col a{ display:inline-block; padding:10px 8px; }
  footer.footer-deep .footer-bottom{ justify-content:center; gap:5px; }
  footer.footer-deep .footer-bottom a{ display:inline-block; padding:8px 2px; }
}
/* narrowest phones (≤340): the copyright takes its own line so the four legal links stay together */
@media (max-width:340px){
  footer.footer-deep .footer-bottom > span:first-child{ flex-basis:100%; text-align:center; }
  footer.footer-deep .footer-bottom > span:first-child + .sep{ display:none; }
}
/* at the page end the sticky hero still sits under everything: hide it once the footer reveals, so the corners show the footer, not hero sky */
body:has(footer.footer-deep.revealed) .hero.hero-globe{ opacity:0; }

/* ── src/index.html:10687 ── */
/* ---- viewport-fit fixes (Frank review, Jul 22) ---- */
/* footer: legal above a half-cropped wordmark; whole footer fits */
.footer-mega{ height:clamp(100px,11vw,180px); align-items:flex-start; margin-top:var(--sm); overflow:hidden; }
/* v3 · closer section flipped to paper — kill the ink-grain overlay there */
.cta-final::after{ display:none; }
/* v3 · page bottom edge mirrors the sw-cover sheet: rounded corners as the
   curtain lifts off the footer (44px desktop / 26px mobile, same as hero cover) */
.cta-final{ border-radius:0 0 44px 44px; }
@media (max-width:760px){ .cta-final{ border-radius:0 0 26px 26px; } }
/* v3 · wordmark crop ends flush with the viewport — no black strip below */
footer.footer-deep{ padding-bottom:0; }
/* v3 · tighten the footer: less dead air up top, taller wordmark band */
footer.footer-deep .footer-grid{ padding-top:var(--xl); }
footer.footer-deep .footer-disclaimer{ margin-top:var(--lg); }
footer.footer-deep .footer-mega{ height:clamp(140px,16vw,260px); margin-top:var(--md); }
footer.footer-deep .footer-disclaimer{ margin-top:var(--xl); }
/* bynums plate: compact so the whole card reads in one viewport */
.bynums-plate{ padding:clamp(28px,3.6vw,48px) clamp(28px,4vw,64px); }
.bynums h2{ font-size:clamp(26px,2.9vw,42px); }
.bynums-sub{ font-size:14.5px; margin-top:10px; max-width:520px; }
.bynums-head{ margin:0 0 var(--xl); }
.bynums-num{ font-size:clamp(40px,4.9vw,80px); margin-bottom:var(--md); }
.bynums-grid{ padding-top:var(--xl); margin-top:var(--md); }
.bynums-label{ font-size:13px; }
.bynums-viz-dial{ height:78px; margin:10px 0 2px; padding-top:10px; }
.bynums-viz-dial canvas{ width:140px; height:60px; }
/* platform: header clear of nav and widget; widget sized to remaining viewport */
.bpx-stage{ padding-top:clamp(180px,19vh,220px); padding-bottom:26px; }
.bpx-head{ top:calc(20px + 74px); }
.bpx-head h2{ font-size:clamp(20px,1.9vw,27px); }
.bpx-widget{ height:min(460px, calc(100vh - 250px)); }
.bpx-card{ inset:58px 22px 22px; }
.bpx-side{ padding-top:0; }
/* tour: device fully visible under the nav */
.tour-pin{ padding-top:92px; box-sizing:border-box; }
/* No height clamp on the lid: it runs past the fold by design — the loop
   windows are cropped by the bottom of the frame, same as the reference. */

  /* ===== Voices + credential wall on paper ==================================
     Same #FAF6EF as the sections above and below, so it flows. The impact that
     the ink gave has to come from inside instead: type scale, one saturated
     accent per frame, a halftone you can actually see, and plate rules top and
     bottom. Both sections keep .is-ink so every structural rule still applies —
     .is-light only re-colours and re-scales. */
  .tz.is-ink.is-light,
  .trust.is-ink.is-light{ background:var(--paper); color:var(--ink); }
  /* The calculator card throws a wide pink shadow that overflows its section.
     The voices panel (z-index 2) was clipping it dead at its own top edge and
     the cut read as a hairline. Lift the calculator one layer so the shadow
     crosses the boundary and the two sections dissolve into each other.
     Specificity has to beat `.stmt.is-ink ~ .calc`. */
  .stmt.is-ink ~ .calc.is-paper{ z-index:3; }


  /* scale does the work the darkness used to */
  /* The quote was set like a second headline (600 weight, 1.24 leading, -0.028em)
     directly under a 58px/800 h2 — two display blocks stacked, no hierarchy break.
     Set as prose instead: lighter, looser, measure-capped. Same words, reads like
     a person talking rather than a slogan. */
  .tz.is-ink.is-light .tz-quote{
    font-size:clamp(20px,1.95vw,27px); line-height:1.45; font-weight:500;
    letter-spacing:-0.012em; color:rgba(10,10,10,.86);
    max-width:58ch;
  }
  .tz.is-ink.is-light .tz-quote em{ color:var(--ocean-deep,#3F6ECA); font-weight:600; }
  .tz.is-ink.is-light .tz-num{ color:var(--ink); font-size:clamp(56px,7.2vw,100px); }
  /* h2 ended ~180px above the figure with nothing in between. Pull the stage up
     and top-align the rail so the number's cap-height meets the quote's first line
     instead of the two floating as unrelated objects. */
  .tz.is-ink.is-light .tz-stage{ margin-top:clamp(30px,3.4vw,50px); }
  .tz.is-ink.is-light .tz-slide{ align-items:start; }
  /* base .tz-fig is align-self:end, which pinned the number to the bottom of the
     row regardless of the container's align-items — override on the item itself */
  .tz.is-ink.is-light .tz-fig{ align-self:start; padding-bottom:0; padding-top:0; margin-top:-14px; }
  .tz.is-ink.is-light .tz-num .u{ color:var(--ocean-deep,#3F6ECA); }

  /* quiet everything that is not the quote, so the gap is wider than on ink */
  .tz.is-ink.is-light .tz-eye{ color:rgba(10,10,10,.45); }
  .tz.is-ink.is-light .tz-title{ color:var(--ink); }
  /* On ink, the six-layer halo worked because it punched a DARK plate into a
     light dot field — a big value gap. On paper the halo and the dots are both
     light, so it erases almost nothing. The label needs an actual plate. */
  .tz.is-ink.is-light .tz-lbl{
    /* nowrap + fit-content: the label is short enough to sit on one line, and a
       fixed max-width was clipping the plate 20px short of its own text */
    width:fit-content; max-width:none; white-space:nowrap;
    margin-top:16px; padding:9px 14px 10px;
    border-radius:13px;
    color:rgba(10,10,10,.62); text-shadow:none;
    background:linear-gradient(180deg, rgba(233, 241, 250,.92), rgba(214, 236, 249,.80));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 0 0 1px rgba(107, 143, 214,.30),
      0 10px 22px -16px rgba(58, 79, 120,.35); }
  .tz.is-ink.is-light .tz-name,
  .tz.is-ink.is-light .tz-who{ color:var(--ink); }
  .tz.is-ink.is-light .tz-role,
  .tz.is-ink.is-light .tz-meta{ color:rgba(10,10,10,.45); }
  /* Two dashed placeholder boxes sat in the most-read line of the section and
     pulled the eye to empty containers. Hidden until real assets exist — put
     them back by dropping this block. */
  .tz.is-ink.is-light .tz-av,
  .tz.is-ink.is-light .tz-logo{ display:none; }

  /* ---- one card ---------------------------------------------------------
     Previous pass put only the quote on a card, which left the stat, the card
     and the nav as three loose objects around an empty lower-left quadrant —
     measured: the stat rail used 143px of a 311px column, then nothing, with
     the dot field sitting under the void and drawing the eye to it.
     Now the SLIDE is the card and the stat lives inside it as a left cell,
     divided by a hairline. One object, full width, no rail to leave empty.
     The dot field is untouched and now bleeds out from under the card's lower
     left, which is what it wanted to be doing all along. */
  .tz.is-ink.is-light .tz-slide{
    grid-template-columns:minmax(0,.38fr) minmax(0,1fr);
    column-gap:clamp(28px,3.1vw,50px);
    align-items:center;
    background:linear-gradient(158deg,#FFFFFF 0%,#F8FCFE 54%,#F0F7FC 100%);
    border-radius:30px;
    padding:clamp(30px,3.1vw,46px) clamp(30px,3.4vw,52px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.11),
      0 34px 68px -36px rgba(96, 126, 186,.44); }
  /* the inner wrapper stops being the card */
  .tz.is-ink.is-light .tz-body{
    background:none; padding:0; box-shadow:none; border-radius:0; }

  /* hairline between the two cells, centred in the gap */
  .tz.is-ink.is-light .tz-fig{ position:relative; align-self:center; }
  .tz.is-ink.is-light .tz-fig::after{
    content:""; position:absolute; top:2%; bottom:2%;
    right:calc(-1 * clamp(15px,1.7vw,28px)); width:1px;
    background:linear-gradient(180deg,
      rgba(116, 133, 168,0), rgba(116, 133, 168,.22) 22%,
      rgba(116, 133, 168,.22) 78%, rgba(116, 133, 168,0)); }

  /* 100px against a 58px h2 made the stat the loudest thing on the page and
     it was competing with both the title and the quote. Inside the card it
     only has to outrank the quote. */
  /* height is locked, not left to the content. .tz-num is a baseline-aligned
     flex box, so its height was the deepest descender among its children —
     "pt" descends, "wks" does not, and "0" has no unit span at all. Three
     different box heights meant the centred block sat 2px apart slide to slide. */
  .tz.is-ink.is-light .tz-num{ font-size:clamp(46px,5.2vw,74px); height:.92em; }
  /* the pill existed to hold the label legible over the dot field — on the
     card there is no field to fight, so it goes back to a plain label */
  /* The label was capped at 22ch, which pushed the longest of the three onto a
     third line — that is the odd stack under the +6, and because the label sits
     inside the centred block it also shoved the number up and down slide to
     slide. Wider cap so all three fit two lines, and a reserved two-line box so
     the block height is identical whatever the copy does. */
  .tz.is-ink.is-light .tz-lbl{
    margin-top:12px; padding:0; background:none; box-shadow:none;
    white-space:normal; max-width:none; text-shadow:none;
    min-height:calc(2 * 1.5em);
    color:rgba(10,10,10,.48); }
  /* belt and braces: the stat block itself holds a constant height, so even a
     three-line label could not move the number */
  .tz.is-ink.is-light .tz-fig{ min-height:calc(0.92em + 12px + 3em); }

  .tz.is-ink.is-light .tz-quote{ max-width:none; font-size:clamp(17px,1.85vw,26px); }
  .tz.is-ink.is-light .tz-foot{ margin-top:clamp(20px,2vw,26px); }
  .tz.is-ink.is-light .tz-bar{ margin-top:clamp(26px,2.8vw,38px); }
  .tz.is-ink.is-light .tz-bar-in{ justify-content:flex-end; gap:clamp(20px,2.2vw,28px); }

  @media (max-width:900px){
    /* The two-column rule above is (0,3,0) and was outranking the existing
       (0,1,0) mobile `grid-template-columns:1fr`, so at 390px the quote was
       still stuck in the narrow column — 192px, 17 characters a line, seven
       lines. Restate it at matching specificity. */
    .tz.is-ink.is-light .tz-slide{
      grid-template-columns:1fr; row-gap:20px; align-items:start;
      padding:24px 22px; border-radius:24px; }
    .tz.is-ink.is-light .tz-fig::after{ display:none; }
    .tz.is-ink.is-light .tz-body{ padding:0; }
    .tz.is-ink.is-light .tz-bar-in{ justify-content:space-between; }
  }

  .tz.is-ink.is-light .tz-who{ gap:0; }
  .tz.is-ink.is-light .tz-name{ font-size:15.5px; }
  .tz.is-ink.is-light .tz-role{ font-size:13px; }
  .tz.is-ink.is-light .tz-tick i{ background:rgba(10,10,10,.16); }
  .tz.is-ink.is-light .tz-tick.is-on i{ background:var(--ocean-deep,#3F6ECA); }
  .tz.is-ink.is-light .tz-tick:hover i{ background:rgba(10,10,10,.30); }
  .tz.is-ink.is-light .tz-arrow{ border-color:rgba(10,10,10,.20); color:var(--ink); }
  .tz.is-ink.is-light .tz-arrow:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .trust.is-ink.is-light .twall-eye{ color:rgba(10,10,10,.45); }
  .trust.is-ink.is-light .twall-link{ color:var(--ink); text-shadow:none; }
  .trust.is-ink.is-light .twall-link .ring{ background:var(--paper); color:var(--ink);
    box-shadow:inset 0 0 0 1px rgba(10,10,10,.24); }
  .trust.is-ink.is-light .twall-link:hover .ring{ background:var(--ocean-deep,#3F6ECA); color:var(--paper);
    box-shadow:inset 0 0 0 1px var(--ocean-deep,#3F6ECA); }
  .trust.is-ink.is-light .twall{ border-top-color:rgba(10,10,10,.18); }
  .trust.is-ink.is-light .tw-card{ border-left-color:rgba(10,10,10,.16); }
  .trust.is-ink.is-light .tw-eye{ color:rgba(10,10,10,.45); }
  .trust.is-ink.is-light .tw-card.is-lead .tw-eye{ color:var(--ocean-deep,#3F6ECA); }
  .trust.is-ink.is-light .tw-card h4{ color:var(--ink); }
  .trust.is-ink.is-light .tw-card p{ color:rgba(10,10,10,.60); }
  .trust.is-ink.is-light .t-brands{ border-top-color:rgba(10,10,10,.16); }
  .trust.is-ink.is-light .plat-item{ color:rgba(10,10,10,.52); }
  .trust.is-ink.is-light .plat-item b{ color:var(--ink); }
  .trust.is-ink.is-light .plat-item::before{ background:var(--ocean-deep,#3F6ECA); }

  /* =====================================================================
     11 · CLOSER PANEL · frosted glass
     Was one opaque pink gradient with a single shadow — no light source, no
     edge, and the mark inked at 4% black so it mottled the fill instead of
     watermarking it. Same material language as the calculator card.
     ===================================================================== */
  .cta-final-panel{
    background:
      /* specular sweep off the top-left corner — most of the glass read */
      linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 19%,
                              rgba(255,255,255,0) 44%),
      /* the pink itself, now translucent so the page tints through it */
      linear-gradient(165deg, rgba(229, 231, 235,.88) 0%, rgba(207, 215, 232,.90) 45%,
                              rgba(164, 184, 224,.92) 100%);
    backdrop-filter:blur(26px) saturate(1.35);
    -webkit-backdrop-filter:blur(26px) saturate(1.35);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.80),      /* lit top edge */
      inset 0 -1px 0 rgba(80, 103, 150,.22),      /* thickness along the bottom */
      inset 0 0 0 1px rgba(255,255,255,.30),    /* rim all round */
      0 46px 96px -44px rgba(96, 126, 186,.62),   /* wide chromatic lift */
      0 10px 26px -18px rgba(58, 79, 120,.34);    /* contact shadow */
  }
  /* light caught inside the pane, not on it */
  .cta-final-panel::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(58% 42% at 22% 8%,  rgba(255,255,255,.34), rgba(255,255,255,0) 62%),
      radial-gradient(46% 38% at 88% 96%, rgba(120, 178, 214,.26), rgba(120, 178, 214,0) 66%);
  }
  /* the mark is absolutely positioned — pulling it into flow with a blanket
     `> *` doubled the panel height */
  .cta-final-panel > *:not(.cta-final-mark){ position:relative; z-index:1; }

  /* the mark is etched into the glass rather than printed under it */
  .cta-final-mark{
    opacity:.22;
    filter:brightness(0) invert(1)
           drop-shadow(0 1.5px 0 rgba(72, 95, 140,.30));
  }

  /* the secondary action becomes a glass pill */
  .cta-final .btn-ghost-paper{
    border-color:transparent;
    background:linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.20));
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 0 0 1px rgba(255,255,255,.48),
      0 10px 22px -16px rgba(58, 79, 120,.42);
  }
  .cta-final .btn-ghost-paper:hover{
    background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.32));
  }
  /* primary reads as a solid object sitting on the glass */
  .cta-final .btn-ink{
    background-image:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 34px -20px rgba(26, 37, 60,.55);
  }
  /* trust ticks pick up the same glass */
  .cta-final-trust .ck.mint{
    background:rgba(255,255,255,.42);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
  }
  .cta-final-trust .ck.mint::after{ border-color:rgba(40, 57, 90,.75); }

  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
    /* no blur available — go opaque so the panel never washes out */
    .cta-final-panel{
      background:
        linear-gradient(145deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,.13) 19%,
                                rgba(255,255,255,0) 44%),
        linear-gradient(165deg, #E5E7EB 0%, #CFD7E8 45%, #A4B8E0 100%);
    }
    .cta-final .btn-ghost-paper{ background:rgba(255,255,255,.55); }
  }

  /* =====================================================================
     GLASS MOCK CARDS
     The in-frame product mocks were flat white on flat colour: paper
     cutouts. This gives them the calculator card's four devices —
     pearlescent fill, lit top edge, chromatic (never grey) shadow, and a
     light source on the plate behind — plus a depth ladder so the primary
     card and the secondary strip sit on different planes.
     ===================================================================== */

  /* 1 · light source on the plate. background-image, not a pseudo-element:
     .vj-vis is a grid and a ::before would auto-place as a second row. */
  .vj-vis.blossom, .ub-vis.blossom{
    background:radial-gradient(92% 62% at 50% 0%, rgba(255,255,255,.52), rgba(255,255,255,0) 62%), var(--sky-soft); }
  .vj-vis.skywash, .ub-vis.skywash{
    background:radial-gradient(92% 62% at 50% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 60%), var(--sky); }
  .vj-vis.mint, .ub-vis.mint{
    background:radial-gradient(92% 62% at 50% 0%, rgba(255,255,255,.46), rgba(255,255,255,0) 60%), var(--sage); }
  .vj-vis.warm, .ub-vis.warm{
    background:radial-gradient(92% 62% at 50% 0%, rgba(255,255,255,.52), rgba(255,255,255,0) 58%), #EAE3D5; }
  .vj-vis.ink, .ub-vis.ink{
    background:radial-gradient(86% 58% at 50% 0%, rgba(222, 242, 255,.13), rgba(222, 242, 255,0) 58%), #0C0C0C; }

  /* the plates themselves lift on a tinted shadow rather than a grey one */
  .vj-vis{ box-shadow:0 34px 72px -40px rgba(64, 83, 120,.42), 0 4px 14px -10px rgba(64, 83, 120,.20); }

  /* 2 · pearlescent fill + lit edge, shared by every mock card */
  .vm-card, .co-card, .ub-mock{
    background:linear-gradient(158deg, #FFFFFF 0%, #F8FCFE 54%, #F0F7FC 100%); }

  /* 3 · chromatic shadow, tinted to the plate it sits on.
     Two layers every time: a wide soft lift and a tight contact shadow. */
  .vm-card, .ub-mock{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.13),
      0 30px 62px -36px rgba(96, 126, 186,.58),
      0 6px 16px -12px rgba(58, 79, 120,.30); }

  .vj-vis.mint .vm-card, .ub-vis.mint .ub-mock{
    background:linear-gradient(158deg, #FFFFFF 0%, #F7FCF9 54%, #EFF9F3 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(86,140,110,.14),
      0 30px 62px -36px rgba(52,124,88,.50),
      0 6px 16px -12px rgba(30, 86, 58,.28); }

  .vj-vis.warm .vm-card, .ub-vis.warm .ub-mock{
    background:linear-gradient(158deg, #FFFFFF 0%, #FDFAF5 54%, #FAF4EA 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(88, 109, 150,.14),
      0 30px 62px -36px rgba(60, 87, 140,.44),
      0 6px 16px -12px rgba(38, 57, 96,.26); }

  /* on the black plate a pink shadow would vanish — invert: rim light + void */
  .vj-vis.ink .vm-card, .ub-vis.ink .ub-mock{
    background:linear-gradient(158deg, #FFFFFF 0%, #F8FBFD 54%, #F1F7FB 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(255,255,255,.16),
      0 34px 68px -34px rgba(0,0,0,.72),
      0 0 44px -12px rgba(107, 143, 214,.16); }

  /* 4 · depth ladder — the secondary strip sits nearer the plate */
  .vm-note, .co-prot{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.12),
      0 14px 30px -22px rgba(96, 126, 186,.46),
      0 3px 8px -6px rgba(58, 79, 120,.22); }
  .vj-vis.mint .vm-note{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(86,140,110,.13),
      0 14px 30px -22px rgba(52,124,88,.42),
      0 3px 8px -6px rgba(30, 86, 58,.22); }
  .vj-vis.warm .vm-note{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(88, 109, 150,.13),
      0 14px 30px -22px rgba(60, 87, 140,.38),
      0 3px 8px -6px rgba(38, 57, 96,.20); }

  /* 5 · checkout mock — the rose plate gets its own light source, and its
     inner cards get the same treatment as everything else */
  .co-mock{
    background:radial-gradient(96% 56% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), var(--sky-soft);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 0 0 1px rgba(116, 133, 168,.14),
      0 38px 78px -38px rgba(96, 126, 186,.60),
      0 8px 20px -14px rgba(58, 79, 120,.32); }
  .co-card{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.11),
      0 20px 40px -28px rgba(96, 126, 186,.50),
      0 4px 10px -8px rgba(58, 79, 120,.24); }

  /* 6 · the lit top edge belongs to the dark chips now; the checkout button is a
     pale ghost pill and carries its own ground (Frank, 3 Sep) */
  .vm-chip.on, .vm-pill-ink{
    background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%); }

  /* 7 · small surfaces pick up the same language */
  .co-thumb{ background:linear-gradient(158deg, #F4EFE6, #EAE3D6);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(70, 87, 120,.09); }
  .vm-tab.on{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 5px 12px -7px rgba(58, 79, 120,.38); }

  /* 8 · journey plates removed. Each mock group now wears the checkout
     widget's own shell, so all six frames speak one language. overflow has
     to go visible too — the old plate box was clipping the shell's shadow
     into a hard line right under each widget. */
  .vj-vis, .vj-vis.warm, .vj-vis.blossom, .vj-vis.ink, .vj-vis.mint, .vj-vis.skywash{
    background:none; box-shadow:none; overflow:visible; }

  /* the shell — same geometry and finish as .co-mock */
  .vm{ padding:.95em; border-radius:1.6em;
    background:radial-gradient(96% 56% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), var(--sky-soft);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.55),
      0 0 0 1px rgba(116, 133, 168,.14),
      0 38px 78px -38px rgba(96, 126, 186,.60),
      0 8px 20px -14px rgba(58, 79, 120,.32); }

  /* inside a shell the cards sit shallower than they did on bare paper */
  .vj-vis .vm-card,
  .vj-vis.ink .vm-card, .vj-vis.mint .vm-card, .vj-vis.warm .vm-card{
    background:linear-gradient(158deg,#FFFFFF 0%,#F8FCFE 54%,#F0F7FC 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.11),
      0 20px 40px -28px rgba(96, 126, 186,.50),
      0 4px 10px -8px rgba(58, 79, 120,.24); }
  .vj-vis .vm-note,
  .vj-vis.mint .vm-note, .vj-vis.warm .vm-note{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.10),
      0 12px 26px -20px rgba(96, 126, 186,.42),
      0 3px 8px -6px rgba(58, 79, 120,.20); }

  /* =====================================================================
     9 · JOURNEY CHOREOGRAPHY
     Every sequence is keyed off .vj-step.seen, which the rail script sets
     once and never removes — so each stage performs on arrival and then
     holds its end state. Transform/opacity only, no per-frame JS except
     the two count-ups.
     ===================================================================== */

  /* --- the guiding rail ------------------------------------------------ */
  /* a comet trail behind the head: static relative to the fill, so it costs
     nothing per frame — it just travels because the fill does */
  .vj-rail-fill::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:0;
    height:74px; border-radius:4px; pointer-events:none;
    background:linear-gradient(to bottom, rgba(63, 110, 202,0), rgba(63, 110, 202,.20));
    filter:blur(3px); }
  /* the ping ring belonged to the dot — a halo round a plane reads as an error.
     The rail's comet trail already carries the motion cue. */

  /* each node pings once as its stage arrives */
  .vj-node{ position:relative; }
  .vj-node::after{ content:""; position:absolute; inset:0; border-radius:50%;
    border:1.5px solid var(--ocean-deep); opacity:0; }
  .vj-step.seen .vj-node::after{ animation:vjNode .95s cubic-bezier(.32,.72,0,1) .10s 1; }
  @keyframes vjNode{ 0%{ transform:scale(1); opacity:.75 } 100%{ transform:scale(2.7); opacity:0 } }

  /* --- widget build: shell lands, then its rows stack in --------------- */
  .vj-vis :is(.vm,.co-mock) > *:not(.co-detail){
    opacity:0; transform:translateY(12px) scale(.99);
    transition:opacity .55s cubic-bezier(.32,.72,0,1), transform .55s cubic-bezier(.32,.72,0,1); }
  .vj-step.seen .vj-vis :is(.vm,.co-mock) > *:not(.co-detail){ opacity:1; transform:none; }
  .vj-step.seen .vj-vis :is(.vm,.co-mock) > *:nth-child(1):not(.co-detail){ transition-delay:.20s }
  .vj-step.seen .vj-vis :is(.vm,.co-mock) > *:nth-child(2):not(.co-detail){ transition-delay:.32s }
  .vj-step.seen .vj-vis :is(.vm,.co-mock) > *:nth-child(3):not(.co-detail){ transition-delay:.42s }
  .vj-step.seen .vj-vis :is(.vm,.co-mock) > *:nth-child(4):not(.co-detail){ transition-delay:.50s }

  /* 01 · checkout — the coverage ring announces itself */
  .co-prot .co-ring{ position:relative; }
  .co-prot .co-ring::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
    border:1.5px solid rgba(150, 203, 236,.8); opacity:0; }
  .vj-step.seen .co-prot .co-ring::after{ animation:vjNode 1.05s cubic-bezier(.32,.72,0,1) .60s 1; }

  /* 02 · order confirmed — the status pill pops last */
  .vj-vis .vm-pill{ transform:scale(.72); opacity:0;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1) .54s, opacity .35s ease .54s; }
  .vj-step.seen .vj-vis .vm-pill{ transform:none; opacity:1; }

  /* 03 · tracking — the bar draws and the stops light in order */
  .vj-vis .vm-track-fill{ width:0; transition:width 1.15s cubic-bezier(.32,.72,0,1) .58s; }
  .vj-step.seen .vj-vis .vm-track-fill{ width:66.6%; }
  .vj-vis .vm-stop i{ transform:scale(.35); opacity:0;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; }
  .vj-step.seen .vj-vis .vm-stop i{ transform:none; opacity:1; }
  .vj-step.seen .vj-vis .vm-stop:nth-child(2) i{ transition-delay:.60s }
  .vj-step.seen .vj-vis .vm-stop:nth-child(3) i{ transition-delay:.88s }
  .vj-step.seen .vj-vis .vm-stop:nth-child(4) i{ transition-delay:1.16s }
  .vj-step.seen .vj-vis .vm-stop:nth-child(5) i{ transition-delay:1.42s }
  .vj-vis .vm-stop.now i{ position:relative; }
  .vj-vis .vm-stop.now i::after{ content:""; position:absolute; inset:-2px; border-radius:50%;
    border:1.5px solid var(--ocean-deep); opacity:0; }
  .vj-step.seen .vj-vis .vm-stop.now i::after{ animation:vjNode 1.1s cubic-bezier(.32,.72,0,1) 1.30s 1; }

  /* 04 · claim — chips land, then the customer's pick fills in */
  .vj-vis .vm-chip{ opacity:0; transform:translateY(6px);
    transition:opacity .4s ease, transform .4s cubic-bezier(.32,.72,0,1),
               background .45s ease, color .45s ease, box-shadow .45s ease; }
  .vj-step.seen .vj-vis .vm-chip{ opacity:1; transform:none; }
  .vj-step.seen .vj-vis .vm-chip:nth-child(1){ transition-delay:.42s }
  .vj-step.seen .vj-vis .vm-chip:nth-child(2){ transition-delay:.50s }
  .vj-step.seen .vj-vis .vm-chip:nth-child(3){ transition-delay:.58s }
  .vj-vis .vm-chip.on{ background:rgba(10,10,10,0); color:rgba(10,10,10,.55);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }
  /* the picked chip lands in the portal's own selected state, not a black pill
     (Frank, 3 Sep): pale ground, accent rule, ink label */
  .vj-step.seen .vj-vis .vm-chip.on{ background:var(--sky-soft); color:var(--ink);
    box-shadow:inset 0 0 0 1.5px var(--ocean), 0 14px 34px -22px var(--ocean);
    transition-delay:.42s, .42s, 1.02s, 1.02s, 1.02s; }

  /* ticks draw after the thing they confirm */
  .vj-vis .vm-tick{ transform:scale(.4); opacity:0;
    transition:transform .5s cubic-bezier(.34,1.56,.64,1) .70s, opacity .35s ease .70s; }
  .vj-step.seen .vj-vis .vm-tick{ transform:none; opacity:1; }
  .vj-step.seen .vj-vis.warm .vm-tick{ transition-delay:1.30s; }

  /* 05 · exchange — the selection hands off from Return to Exchange */
  .vj-vis .vm-tab{ transition:background .45s ease .98s, color .45s ease .98s,
                              box-shadow .45s ease .98s; }
  .vj-vis .vm-tab:first-child{ background:#fff; color:var(--ink);
    box-shadow:0 4px 12px -6px rgba(0,0,0,.3); }
  .vj-step.seen .vj-vis .vm-tab:first-child{ background:transparent;
    color:rgba(10,10,10,.5); box-shadow:none; }
  .vj-vis .vm-tab.on{ background:transparent; color:rgba(10,10,10,.5); box-shadow:none; }
  .vj-step.seen .vj-vis .vm-tab.on{ background:#fff; color:var(--ink);
    box-shadow:0 4px 12px -6px rgba(0,0,0,.3); }

  /* 06 · wallet — the balance rises, then counts (JS) */
  .vj-vis.skywash .vm-huge{ opacity:0; transform:translateY(8px);
    transition:opacity .5s ease .48s, transform .6s cubic-bezier(.32,.72,0,1) .48s; }
  .vj-step.seen .vj-vis.skywash .vm-huge{ opacity:1; transform:none; }

  @media (prefers-reduced-motion:reduce){
    .vj-vis :is(.vm,.co-mock) > *, .vj-vis .vm-pill, .vj-vis .vm-stop i,
    .vj-vis .vm-chip, .vj-vis .vm-tick, .vj-vis .vm-tab, .vj-vis.skywash .vm-huge{
      transition:none !important; opacity:1 !important; transform:none !important; }
    .vj-vis .vm-track-fill{ transition:none !important; width:66.6% !important; }
    .vj-vis .vm-chip.on{ background:var(--sky-soft) !important; color:var(--ink) !important;
      box-shadow:inset 0 0 0 1.5px var(--ocean) !important; }
    .vj-vis .vm-tab:first-child{ background:transparent !important;
      color:rgba(10,10,10,.5) !important; box-shadow:none !important; }
    .vj-vis .vm-tab.on{ background:#fff !important; color:var(--ink) !important;
      box-shadow:0 4px 12px -6px rgba(0,0,0,.3) !important; }
    .vj-head{ animation:none; transform:none; }
    .vj-head::before, .vj-node::after, .co-prot .co-ring::after,
    .vj-vis .vm-stop.now i::after{ animation:none !important; }
  }

  /* =====================================================================
     10 · JOURNEY DENSITY
     The section was 1216px wide carrying a 272px copy column and a 372px
     mock: a 254px dead gutter between them and up to 394px of empty
     column below the copy. These four devices fill both voids.
     ===================================================================== */

  /* --- one stat per step, filling the column below the link ------------ */
  .vj-stat{ margin-top:clamp(26px,3vw,44px); padding-top:20px;
    border-top:1px solid rgba(10,10,10,.10); max-width:30ch;
    opacity:0; transform:translateY(14px);
    transition:opacity .7s cubic-bezier(.32,.72,0,1) .30s,
               transform .7s cubic-bezier(.32,.72,0,1) .30s; }
  .vj-step.seen .vj-stat{ opacity:1; transform:none; }
  .vj-stat b{ display:block; font-size:clamp(38px,4.4vw,58px); font-weight:780;
    letter-spacing:-.04em; line-height:1; color:var(--ink);
    font-variant-numeric:tabular-nums; }
  .vj-stat span{ display:block; margin-top:10px; font-size:14.5px; line-height:1.5;
    color:rgba(10,10,10,.48); }
  .vj-step.on .vj-stat b{ color:var(--ocean-deep); transition:color .5s ease; }

  /* --- elapsed-time chips: the rail becomes a timeline ----------------- */
  .vj-lapse{ position:absolute; left:31px; bottom:clamp(22px,3vw,44px);
    transform:translateX(-50%); z-index:2; pointer-events:none; }
  .vj-lapse span{ display:block; background:var(--paper);
    padding:5px 11px; border-radius:999px;
    font-family:var(--sans); font-size:10.5px; font-weight:500;
    letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
    color:rgba(10,10,10,.40); box-shadow:inset 0 0 0 1px rgba(10,10,10,.12);
    opacity:0; transform:scale(.86);
    transition:opacity .5s ease .40s, transform .5s cubic-bezier(.34,1.56,.64,1) .40s,
               color .4s ease, box-shadow .4s ease; }
  .vj-step.seen .vj-lapse span{ opacity:1; transform:none; }
  .vj-step.on .vj-lapse span{ color:var(--ocean-deep);
    box-shadow:inset 0 0 0 1px rgba(63, 110, 202,.35); }

  /* --- a second object, stacked under the widget ----------------------- */
  /* justify-content:center makes the track shrink to the mock's width, so
     justify-self start/end on the aside lines it up with the mock's own
     edges rather than the far edges of the column. */
  .vj-vis{ position:relative; justify-content:center; align-content:center; row-gap:15px; }
  .vj-aside{ order:0; width:min(46cqw,262px); justify-self:start;
    padding:.9em 1.15em; border-radius:1.15em;
    font-size:min(2.6cqw,12.5px); line-height:1.38;
    background:linear-gradient(158deg,#FFFFFF 0%,#F8FCFE 54%,#F0F7FC 100%);
    opacity:0; transform:translateY(14px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 0 0 1px rgba(116, 133, 168,.11),
      0 16px 34px -24px rgba(96, 126, 186,.48),
      0 4px 10px -8px rgba(58, 79, 120,.24);
    transition:opacity .7s cubic-bezier(.32,.72,0,1) .62s,
               transform .8s cubic-bezier(.32,.72,0,1) .62s; }
  .vj-step.seen .vj-aside{ opacity:1; transform:none; }
  .vj-aside b{ display:block; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
  .vj-aside i{ display:block; font-style:normal; margin-top:.28em; color:rgba(10,10,10,.52); }
  .vj-aside-sms{ justify-self:end; }


  @media (max-width:860px){
    .vj-lapse{ left:19px; bottom:14px; }
    .vj-stat{ margin-top:26px; }
    .vj-stat b{ font-size:clamp(34px,10vw,46px); }
  }
  @media (prefers-reduced-motion:reduce){
    .vj-stat, .vj-lapse span, .vj-aside{
      transition:none !important; opacity:1 !important; }
    .vj-stat{ transform:none !important; }
    .vj-aside{ transform:none !important; }
    .vj-lapse span{ transform:none !important; }
  }

/* ── src/index.html:11494 ── */
/* ══ protection strip · a window of sky inside the checkout ══
   Late in the document on purpose: the widget's base rules and two polish
   passes all restyle .co-prot, and this must outrank them by order. */
/* z-index:1, not 0: the mock's grey "declined" overlay sits at z0 and would
   paint over the strip. 1 matches the .co-mock > * lift; the sky stays inside
   this stacking context at -1, above the strip's own background. */
.co-card.co-prot{ position:relative; overflow:hidden; z-index:1;
  /* strip sky matches the hero plate's ramp */
  background:linear-gradient(100deg, #DFF0FE 0%, #BFE0FC 46%, #A2D1FD 100%); }
.co-sky{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
/* the hero's cutout clouds, small: max-width:none dodges the global img clamp */
.co-sky .cs{ position:absolute; height:auto; max-width:none; }
.co-sky .cs1{ width:36%; right:-7%; bottom:-58%; opacity:.95; }
.co-sky .cs2{ width:24%; right:26%; top:-42%; opacity:.85; }
.co-sky .cs3{ width:16%; right:48%; bottom:-38%; opacity:.6; }
.co-sky .cst{ position:absolute; width:9px; height:9px; background:#FFFFFF;
  clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); }
.co-mock .co-ring img{ filter:none; } /* outlined stamp carries its own ink edge: no white halo */
.co-mock.is-off .co-ring img{ filter:grayscale(1) opacity(.45); }
.co-mock .co-prot-price{ color:#2E63C8; font-weight:800; }
.co-mock.is-off .co-prot-price{ color:rgba(10,10,10,.35); }
.co-mock.is-off .co-card.co-prot{
  background:linear-gradient(100deg, #F1F3F6 0%, #E7EBEF 100%); }
.co-mock.is-off .co-sky{ opacity:.35; }

/* ── src/index.html:11520 ── */
/* ══════════════════════════════════════════════════════════════════════════
   PHOTO-SKY HERO · azure gradient, photographic clouds, sticker stamps
   Late in the document on purpose: it outranks the cartoon-pass hero rules
   by order at equal specificity. The stamps keep their sticker outlines —
   print objects on a real sky is the point, not a style clash.
   ══════════════════════════════════════════════════════════════════════════ */
/* Sky sampled from the reference plate: nearly flat, pale, bright — with the
   plate's soft sun-glow behind the headline, so the field has a centre instead
   of reading as one flat sheet. Two radials: a tight warm core and a wide
   halo, both dying out well before the edges. */
.hero.hero-globe{
  background:
    radial-gradient(38% 30% at 50% 40%, rgba(255,255,255,.42), rgba(255,255,255,0) 100%),
    radial-gradient(72% 58% at 50% 42%, rgba(255,255,255,.26), rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #A9D5FD 0%, #A4D2FD 45%, #A0D0FD 100%); }
/* top scrim for nav + headline contrast; soft bloom at the horizon */
/* top darkening only — the horizon bloom sat ABOVE the stamp layer (z1 vs z0)
   and bleached the cards to pastel ghosts */
.hero.hero-globe::after{
  background:radial-gradient(60% 14% at 50% 100%, rgba(255,255,255,.20), rgba(255,255,255,0) 85%); }
.hero.hero-globe .hero-center::before{ background:none; }
/* Pale sky flips the type dark: white washed out, so the headline goes ink
   with the accent staying ocean — the way dark text sits in the reference. */
.hero.hero-globe .hero-title{ color:#16181C; text-shadow:none; }
.hero.hero-globe h1.hero-title .accent{ color:var(--ocean-deep); text-shadow:none; }
.hero.hero-globe .hero-sub{ color:rgba(12,16,24,.66); text-shadow:none; }
/* secondary pill reads on azure as frosted glass */
.hero.hero-globe .hero-cta .btn-glass{ color:#1B3E7A !important;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9), 0 12px 26px -16px rgba(8,30,64,.35); }
.hero.hero-globe .hero-cta .btn-glass:hover{ background:rgba(255,255,255,.75); }

/* cartoon furniture retired in the hero */
.orbit-ring, .tw, .orbit-wrap::before{ display:none; }

/* ── four stamps in a shallow arc, clear of the cloud deck ── */
.oc.c-blue, .oc.c-orange{ display:none; }
/* wide arc: the inner pair flanks the CTA row instead of sitting behind it */
.oc.c-rose{   left:14% !important; top:46% !important; }
.oc.c-green{  left:30% !important; top:61% !important; }
.oc.c-purple{ left:72% !important; top:61% !important; }
.oc.c-gold{   left:86% !important; top:46% !important; }

/* (the photographic-cloud rules moved to the head: the cover must be right on the first paint) */


/* ── journey · clouds descend with the reader ──
   Same cutouts as the hero, scattered down the section's full height and kept
   to the margins so they never sit under the step cards. z0 under the .wrap;
   the drift reuses the ambient keyframes. They stop ~8% short of the section's
   end, so the pinned card runway starts on clear paper. */
.journey .jy-clouds{ position:absolute; inset:0; overflow:hidden; z-index:0;
  pointer-events:none; }
.journey > .wrap{ position:relative; z-index:1; }
/* ── atmosphere · the descent reads in four layers ──
   1 · the sky itself thins away over the first ~950px: still airborne at the
       headline, on solid paper by the card runway */
.journey{ background:
  linear-gradient(180deg, rgba(169,213,253,.50) 0%, rgba(169,213,253,.26) 420px,
                  rgba(169,213,253,0) 950px),
  var(--paper); }
/* 2 · punching through the deck: a mist band overlapping the hero seam,
       above the content so you pass through it once on the way in */
.jy-mist{ position:absolute; left:0; right:0; top:-240px; height:320px;
  z-index:2; pointer-events:none;
  /* Densest AT the sheet's scalloped lip (~75% of this band), thinning upward
     into the sky, with a short dissolve past the lip into the page — so the
     rising sheet carries its own cap of mist and no sky gap can open. */
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%,
    rgba(253,254,255,.45) 42%, rgba(251,253,255,.95) 72%,
    rgba(251,253,255,.9) 80%, rgba(252,253,255,.45) 91%,
    rgba(255,255,255,0) 100%); }

/* Sideways wind + scroll parallax: idle motion drifts left-to-right like the
   hero, and the vertical axis belongs to the reader's scroll (depth-scaled
   parallax). A JS driver owns the `translate` property, so no CSS animation
   lives here. */
/* deliveries on their way down · three at staggered depths. Size, sink rate
   and sway period all scale together; they paint over the clouds (later in
   the DOM) but under the content. Sway rides the `rotate` property so it
   never fights the driver's `translate`. */
.jy-chute{ position:absolute; height:auto; max-width:none;
  transform-origin:50% 6%; will-change:translate;
  animation:chuteSway 7.5s ease-in-out infinite; }
.jy-chute.c1{ width:180px; top:3%;  right:7%; }
.jy-chute.c2{ width:170px; top:40%; left:-34px; animation-duration:8.8s; animation-delay:-3.1s; }
.jy-chute.c3{ width:150px; top:64%; right:5%; animation-duration:6.4s; animation-delay:-1.4s; }
@keyframes chuteSway{ 0%,100%{ rotate:-3.5deg; } 50%{ rotate:3.5deg; } }
@media (max-width:900px){
  .jy-chute.c1{ width:150px; right:4%; top:2%; }
  .jy-chute.c2, .jy-chute.c3{ display:none; } }
@media (prefers-reduced-motion:reduce){ .jy-chute{ animation:none; } }

/* 4 · far layer: slightly out of focus, the content stays the only crisp plane */
.jc{ position:absolute; height:auto; max-width:none; opacity:.85;
  filter:blur(1.8px); will-change:translate; }
.jc.j2{ width:190px; top:11%; left:-40px; }
.jc.j4{ width:170px; top:37%; left:-30px; }
.jc.j6{ width:330px; top:64%; left:-110px; }
.jc.j7{ width:180px; top:76%; right:-20px; }
@media (max-width:900px){
  .jc{ opacity:.8; }
  /* j1 sat behind the section headline on a narrow screen */
  .jc.j1, .jc.j6{ display:none; }
  .jc.j2{ width:130px; } .jc.j4{ width:120px; } .jc.j7{ width:140px; }
}
@media (prefers-reduced-motion:reduce){
  .jc{ animation:none; opacity:.85; } }

/* ══ mobile menu tap-through fix ══
   The flattened dropdown sets visibility:visible + pointer-events:auto on its
   children, and a child's visibility OVERRIDES a hidden ancestor. The panel's
   opacity:0 kept the links invisible, but they still hit-tested: an invisible
   click-trap over the hero. Closed means closed. */
@media (max-width:900px){
  body:not(.menu-open) .nav-pill .nav-drop-menu,
  body:not(.menu-open) .nav-pill .nav-drop-menu *{
    visibility:hidden !important; pointer-events:none !important; }
}

/* ── src/index.html:11642 ── */
/* ══ tour frame 1 · the real Posty widget, not a screenshot ══
   A static twin of the live checkout mock: ids and data-co hooks stripped so it
   never collides with the driver, which scopes to the first .co-mock on the page. */
.mw-body.is-live{ display:block; overflow:hidden; background:#FAF6EF; }
.mac-win:has(.mw-body.is-live){ background:#FAF6EF; }
.mw-page{ width:100%; height:100%; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#FFFFFF,#FAF6EF 40%); }
.mw-page-bar{ display:flex; align-items:center; gap:12px; flex:none;
  padding:11px 16px; border-bottom:1px solid rgba(12,12,12,.07);
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(12,12,12,.42); }
.mw-page-bar b{ font-weight:700; color:rgba(12,12,12,.72); letter-spacing:.1em; }
.mw-page-bar span{ margin:0 auto; }
.mw-page-bar em{ font-style:normal; color:rgba(12,12,12,.72); font-weight:600; }
.mw-page-stage{ flex:1; min-height:0; display:grid; place-items:start center;
  padding:20px 16px 0; container-type:inline-size; }
/* the widget is em-driven, so one font-size scales the whole thing */
.mw-page-stage .co-mock{ width:min(74cqw,360px); font-size:min(2.6cqw,11.4px); }
.co-mock.is-static, .co-mock.is-static *{ pointer-events:none !important;
  animation:none !important; transition:none !important; }

/* ── src/index.html:11664 ── */
/* ══ tour frames 2-4 · the real dashboard, in an iframe ══
   The dashboard ships a full CSS reset (html, body, h1-h6, a, table, button),
   so inlining it would rewrite the site's own type and layout. An iframe gives
   it its own document to reset. It is rendered at a desktop width and scaled
   down, so the UI keeps desktop proportions instead of collapsing to a narrow
   layout inside a small frame. */
.mw-body.is-app{ display:block; overflow:hidden; background:#FAF6EF;
  position:relative; }
.mac-win:has(.mw-body.is-app){ background:#FAF6EF; }
.mw-frame{
  position:absolute; top:0; left:0;
  width:1500px; height:1000px; border:0; background:#FAF6EF;
  transform-origin:0 0; pointer-events:none;
  /* --mwk is written per-frame by the driver from the frame's real width */
  transform:scale(var(--mwk, .38)); }
@media (prefers-reduced-motion:reduce){ .mw-frame{ transition:none; } }

/* ── src/index.html:11747 · #posty-mobile ── */
.ub-swipe, .ub-mhead{ display:none; }
/* Desktop "Products" header (Frank, 7 Sep) — same word, same placement as the
   phone: sitting on the first card's left edge, just above it. It lives inside
   the pinned viewport so it holds still while the deck pans, and fades out as
   the pan hands over to the zoom (--ubp is the pan progress from the driver). */
@media (min-width:761px){
  /* deck not pinned (tablet band, or reduced motion): a plain header above the
     row, exactly as on the phone, so it can never sit on a card */
  #products.is-unpinned .ub-mhead{ display:block; position:static; margin:0 0 18px; padding:0 24px;
    font-size:clamp(34px, 5vw, 44px); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--ink); }
  #products:not(.is-unpinned) .ub-mhead{ display:block; position:absolute; z-index:5; margin:0; pointer-events:none;
    left:var(--ub-x, 12%); top:max(calc(var(--ub-y, 16svh) - 1.05em - 26px), 78px);   /* never under the floating nav on a short screen */
    font-size:clamp(34px, 3.2vw, 50px); font-weight:800; letter-spacing:-.035em; line-height:1;
    color:var(--ink);
    opacity:calc(1 - clamp(0, (var(--ubp, 0) - .40) / .08, 1)); }
}
/* ════════════════════════════════════════════════════════════════════
   MOBILE PASS · Sep 4 2026 (Frank)
   One block, last in the cascade, so it wins without hunting specificity.
   Everything here is scoped to <=760px and changes nothing on desktop.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

  /* ── 1 · hero · all four parcels on screen ──────────────────────────
     They used to peek in from the edges at left:5%/95%, which on a 390px
     screen meant half a box each. They now sit as a shallow arc across the
     band above the headline, where the sky is empty. */
  .oc.c-rose, .oc.c-green, .oc.c-purple, .oc.c-gold{ display:block !important; }
  .oc{ width:54px !important; height:64px !important; margin:-32px 0 0 -27px !important; }
  .oc.c-rose{   left:11% !important; top:16%   !important; }
  .oc.c-green{  left:24% !important; top:11%   !important; }
  .oc.c-purple{ left:76% !important; top:11%   !important; }
  .oc.c-gold{   left:90% !important; top:12.5% !important; }

  /* ── 2 · journey · the falling deliveries come back ─────────────────
     c2/c3 and the far cloud j6 were hidden on mobile because they landed on
     the copy. They are placed in the empty bands between steps instead. */
  .jy-chute.c2, .jy-chute.c3{ display:block; }
  /* the gutters either side of the rail are the only full-height empty
     columns on a phone, so the deliveries fall down those and bleed off the
     edge rather than landing on a headline or a card. */
  .jy-chute.c1{ width:88px;  left:auto; right:-20px; top:24%; }
  .jy-chute.c2{ width:78px;  left:-18px; right:auto; top:48%; }
  .jy-chute.c3{ width:84px;  left:auto; right:-16px; top:72%; }
  .jc.j6{ display:block; width:190px; top:57%; left:-84px; }
  .jc.j7{ top:88%; }

  /* ── 3 · product cards · the runway reads as a swipeable deck ───────
     The section is cream but the cards' own tint bled to the page edge and
     stopped dead at the black below, which read as a broken background. */
  /* The pinned viewport paints the active card's tint edge to edge. That is the
     point on desktop, where the card zooms into it; on mobile nothing pins, so it
     showed as a peach band one card tall. On a phone the whole section is one
     flat warm tone instead — a colour lifted from the page sweep where the
     section sits — so the deck reads as its own screen and the cream does not
     arrive until the section is genuinely over. */
  #products.social.ubest{ background:#F3CABB !important;
    /* one flat tone, with a short blend at the top edge so the join with the
       page sweep above (#EFC3BE there) is a transition, not a line */
    background-image:linear-gradient(180deg,#EFC3BE 0,#F3CABB 110px) !important;
    background-repeat:no-repeat !important; background-size:100% 100% !important;
    min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    padding:clamp(20px,5vh,44px) 0 clamp(24px,6vh,52px); }
  #products .ub-runway, .ubest .ub-pinvp{ background:transparent !important;
    background-image:none !important; }
  .ub-mhead{ display:block; margin:0 0 clamp(14px,2.4vh,24px); padding:0 24px;
    font-size:clamp(30px,8.6vw,40px); font-weight:800; letter-spacing:-.035em;
    line-height:1; color:var(--ink); }
  .ub-row{ padding:0 24px 4px; gap:14px; scroll-snap-type:x mandatory;
    scroll-padding-inline:24px; }
  .ub-card{ scroll-snap-align:center; }
  .ub-card .ub-cap{ padding-left:2px; padding-right:2px; }
  /* swipe affordance */
  /* Dots centred on the PAGE, arrows either side: tappable, and they say the
     deck moves without needing a word for it. padding, not margin — as the last
     child of the section a bottom margin collapses out of it, and the gap that
     opened let the sticky hero's sky show through as a blue line. */
  .ub-swipe{ display:flex; align-items:center; justify-content:center; gap:14px;
    margin:clamp(12px,2.4vh,22px) auto 0; padding-bottom:2px; width:100%; }
  .ub-swipe .dots{ display:flex; gap:6px; align-items:center; }
  .ub-swipe .dots i{ width:6px; height:6px; border-radius:50%;
    background:rgba(12,12,12,.18); transition:background .3s ease, transform .3s ease; }
  .ub-swipe .dots i.on{ background:var(--ocean-deep,#3F6ECA); transform:scale(1.35); }
  .ub-arw{ display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; border-radius:50%; cursor:pointer;
    color:var(--ink); background:rgba(255,255,255,.5);
    border:1px solid rgba(12,12,12,.14); -webkit-tap-highlight-color:transparent;
    transition:background .2s ease, opacity .2s ease, transform .2s ease; }
  .ub-arw:active{ transform:scale(.94); background:rgba(255,255,255,.8); }
  .ub-arw[disabled]{ opacity:.3; pointer-events:none; }
  .ub-arw[data-ub="1"]:not([disabled]){ animation:ubNudge 2.4s ease-in-out infinite; }
  @keyframes ubNudge{ 0%,100%{ transform:translateX(0) }
                      50%{ transform:translateX(4px) } }
  .ub-swipe.is-used .ub-arw{ animation:none !important; }
  @media (prefers-reduced-motion:reduce){ .ub-arw{ animation:none !important } }

  /* ── 4 · the loop · an iPhone, not a laptop ─────────────────────────
     Same four screens, but the device now matches how a shopper actually
     meets them, and the app frames render at a real 430px viewport
     (data-wm) instead of a desktop layout scaled to thumbnail size. */
  .tour-mac{
    /* the phone fits whatever is left under the header: --tour-avail is measured by the page */
    width:min(322px, 84vw, calc(var(--tour-avail, 70svh) / 2.03)) !important;
    height:min(calc(min(322px,84vw) * 2.03), var(--tour-avail, 70svh)) !important;
    border-radius:46px !important; padding:8px !important;   /* bezel 20% thinner (Frank, 7 Sep) */
    transform:none !important; opacity:1 !important;
    background:#0C0C0C;
    box-shadow:0 0 0 2px #23232A, 0 34px 60px -28px rgba(10,10,10,.55),
               0 4px 14px -8px rgba(10,10,10,.4) !important; }
  .mac-screen{ inset:8px !important; border-radius:39px !important; opacity:1 !important; }
  .mac-bleed{ display:none !important; }
  .mac-rail{ display:none !important; }
  .mac-wall, .mac-grain{ display:none; }
  /* dynamic island · floats clear of the bezel the way the real one does:
     10px of bezel, then a 12px gap, then the pill. */
  .mac-notch{ top:20px !important; width:86px !important; height:25px !important;
    border-radius:13px !important; background:#000 !important; box-shadow:none !important; }
  .mac-notch::before, .mac-notch::after{ display:none !important; }
  .mac-cam{ top:7px !important; left:auto !important; right:9px !important;
    width:8px !important; height:8px !important; border-radius:50% !important;
    background:#15151A !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
  /* the windows become the phone's screen */
  .mac-wins{ left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; }
  .mac-win{ border-radius:39px !important; overflow:hidden; }
  /* browser chrome, iOS Safari shape: the status-bar band the island sits in,
     then a rounded address pill with the aA and reload glyphs either side. */
  .mw-bar{ height:84px !important; padding:44px 10px 6px !important; gap:0 !important;
    background:#F7F7F7 !important; border-bottom:1px solid rgba(0,0,0,.10) !important;
    align-items:flex-end !important; }
  .mw-dots, .mw-nav, .mw-plus{ display:none !important; }
  /* block, not flex, so a long address ellipsises inside the pill instead of
     running under the aA glyph (Frank, 7 Sep) */
  .mw-url{ flex:1; display:block !important; height:34px; line-height:34px; text-align:center;
    border-radius:11px; background:#E6E6E9;
    font-size:10.5px !important; letter-spacing:-.01em; color:#1D1D1F !important;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding:0 30px 0 32px; position:relative; }
  .mw-url::before{ content:"aA"; position:absolute; left:9px; font-size:9.5px;
    font-weight:600; color:#6B6B70; letter-spacing:-.02em; }
  .mw-url::after{ content:"\21BB"; position:absolute; right:10px; font-size:12px;
    color:#6B6B70; }
  .mw-body{ border-radius:0 0 39px 39px; }
  /* the phone sits in the flow instead of the lid's descent */
  .tour-stage{ align-items:center; margin-top:10px; }
  .tour-aura{ opacity:.5 !important; top:24svh; height:52svh; }

  /* ── 5 · checkout demo · a phone checkout, not a scaled desktop one ──
     The flow is DOM, and every size in it is em-relative to one base that is
     normally clamped off the container width. At phone width that base is set
     in real pixels and the three screens restack, so it reads as a mobile
     storefront rather than a desktop page shrunk to a thumbnail. */
  .mac-win{ transform:none !important; filter:none !important;
    visibility:hidden !important; opacity:0 !important; }
  .mac-win.is-active{ visibility:visible !important; opacity:1 !important; z-index:30 !important; }
  .mw-page-stage{ contain:none; }

  /* product page: a real column. The shot was absolutely positioned with a
     percentage padding under it, and percentage padding resolves against WIDTH,
     not height, so the copy climbed back over the image. Flex column instead,
     with Add to Bag pushed to the foot of the screen. */
  .pfp{ display:flex !important; flex-direction:column !important;
    font-size:10.6px !important; }
  .pfp-hero{ position:static !important; width:100% !important; height:auto !important;
    max-height:38% !important; object-fit:contain !important; transform:none !important;
    margin:1.4em 0 .2em !important; flex:0 0 auto; }
  .pfp-info{ width:auto !important; height:auto !important; flex:1 1 auto;
    padding:0 1.6em 1.6em !important; justify-content:flex-start !important;
    gap:.34em !important; }
  .pfp h3{ font-size:2.05em !important; }
  .pfp p{ display:none; }                      /* the blurb is the first thing a phone drops */
  .pfp-specs{ flex-wrap:wrap; }
  .pfp-cta{ width:100%; padding:0 !important; height:3.3em !important;
    margin-top:auto !important; }              /* sits on the foot of the screen */
  .pfp-note{ align-self:center; }

  /* cart: a bottom sheet, the way every mobile store does it */
  .pf-drawer{ top:auto !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:100% !important; height:auto !important; max-height:80% !important;
    font-size:11px !important; padding:1.1em 1.2em 1.3em !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -18px 44px -26px rgba(12,20,36,.45) !important;
    transform:translateY(102%) !important; z-index:6 !important; }
  .pflow.s1 .pf-drawer, .pflow.s2 .pf-drawer,
  .pflow.s3 .pf-drawer, .pflow.s4 .pf-drawer{ transform:none !important; }

  /* checkout: one column, summary first, like a real mobile checkout. The page
     opens on the order and scrolls down to Pay now — so the summary must travel
     WITH the page, not counter-scroll the way it does beside a desktop form. */
  .pco{ display:flex !important; flex-direction:column !important;
    font-size:11px !important; }
  /* the order leads, the form follows, Pay now sits at the foot — so the screen
     opens on what was bought (protection included) and scrolls down to pay */
  .pco-sum{ order:-1; border-left:0 !important;
    border-bottom:1px solid rgba(20,30,48,.08);
    min-height:0 !important; padding:1.1em 1.2em 1em !important; }
  .pflow.s6 .pf-co .pco-sum, .pflow.s7 .pf-co .pco-sum{ transform:none !important; }
  .pco-form{ padding:1em 1.2em 2em !important; }
  .pco-row, .pco-row.g3{ grid-template-columns:1fr !important; }
  .pco-express{ grid-template-columns:1fr 1fr !important; }
  .pco-btn{ width:100%; }

  /* store header: the brand centred and big enough to read, nav dropped */
  .pco-top{ justify-content:center !important; position:relative; }
  .pco-top .pco-nav{ display:none !important; }
  .pco-top .pco-bag{ position:absolute; right:1.1em; top:50%; transform:translateY(-50%); }
  .pco-brand{ margin:0 auto !important; }
  .pco-brand img{ height:2.4em !important; width:auto !important; }

  /* thank-you screen */
  .pft{ font-size:11px !important; padding:1.4em 1.2em !important; }

  /* ── 6 · general polish ────────────────────────────────────────────── */
  /* The closer read as a floating panel on a background: the stage clipped the
     tilted card's corners, and a heavy drop shadow plus its own slightly warmer
     paper made it a box sitting ON the section rather than part of it. Same
     paper, no shadow, and narrow enough that the rotated bounds fit unclipped. */
  .postcard-stage{ overflow:visible; padding:2vw 0 0; }
  .postcard{ width:86vw !important; background:var(--paper) !important;
    box-shadow:none !important; }
  .postcard::after{ display:none; }

  /* The footer tucks 48px under the closer so its sky shows through the
     rounded corners. On a phone the footer's link row is inside that 48px, so
     it was reading half-hidden: give the row somewhere to sit. */
  footer.footer-deep{ padding-top:74px !important; }

  /* Pricing keeps its own stacking: the label block and the scrubbing stat share
     one grid area on a phone, so centring the pin collapses them onto each other. */
}

/* ── src/index.html:12518 ── */
/* ===== footer seam (Frank, 4 Sep) · the closer's sky runs into the picture =====
   The closer ends on #BDA1C0; the footer photo starts on its own mauve-pink a few
   shades away, so the curtain's edge read as a hard line. Same idea as the journey
   → cards sky: the two surfaces share one colour at the join. The top of the footer
   carries the closer's last stop across the 48px tuck, then dissolves into the
   photograph before the hills start, so the sheet and the picture read as one sky
   at any viewport (the cover crop moves the photo; the fade follows the footer). */
footer.footer-deep::before{ content:""; position:absolute; left:0; right:0; top:0; height:150px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, #BDA1C0 0px, #BDA1C0 48px, rgba(189,161,192,.92) 64px, rgba(189,161,192,.62) 88px, rgba(189,161,192,.28) 116px, rgba(189,161,192,0) 150px); }
footer.footer-deep > .wrap{ position:relative; z-index:1; }
@media (max-width:760px){
  footer.footer-deep::before{ height:120px;
    background:linear-gradient(180deg, #BDA1C0 0px, #BDA1C0 48px, rgba(189,161,192,.9) 60px, rgba(189,161,192,.55) 80px, rgba(189,161,192,.22) 100px, rgba(189,161,192,0) 120px); }
}

/* ── src/index.html:12579 ── */
/* phone tour · the cart drawer sits above the phone's rounded bottom, so the Checkout pill gets
   the same breathing room the Pay now button has */
@media (max-width:760px){
  .pf-drawer{ padding-bottom:5.2em !important; }
  .pf-cursor{ display:none !important; }
}
/* closer postcard · phone: content sits well clear of the striped frame */
@media (max-width:760px){
  .postcard .pc-inner{ padding:46px 42px 40px !important; }
  .postcard .pc-msg h2{ font-size:clamp(26px, 8.6vw, 34px) !important; }
  .postcard .pc-msg p{ font-size:15px !important; margin-top:12px !important; }
  .postcard .pc-msg .actions{ margin-top:22px !important; }
  .postcard .pc-from{ margin-top:16px !important; }
}
/* journey → products on the phone: the journey's last 260px ease into the flat peach the
   products section is painted in, so both sides of the join are the same colour and there is
   no edge above the Products headline. */
@media (max-width:760px){
  section.journey.cascade::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:260px; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(to bottom, rgba(243,202,187,0) 0, rgba(243,202,187,.55) 45%, #F3CABB 88%, #F3CABB 100%);
    background-repeat:repeat, no-repeat; background-size:300px 300px, 100% 100%; }
  #products.social.ubest{ background-color:#F3CABB !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E") !important;
    background-repeat:repeat !important; background-size:300px 300px !important; background-position:0 0 !important; }
  .ubest::before{ display:none !important; }
}
/* closer · honest corners: nothing is painted behind them. The radius is driven by how far
   the fixed footer has come up under the card's bottom edge (--cta-r, set by script), so the
   corners round only over the real hills and are square while the page's ink is behind. */
.pin-close{ background:transparent; }
.cta-final{ border-radius:44px 44px var(--cta-r, 0px) var(--cta-r, 0px) !important; box-shadow:0 -1px 0 rgba(0,0,0,.05); }
@media (max-width:760px){ .cta-final{ border-radius:26px 26px var(--cta-r, 0px) var(--cta-r, 0px) !important; } }
/* step 04 · the resolution file sits at the width of the confirmation widget above it */
@media (min-width:761px){
  .cf-vis{ zoom:1.35; padding:20px 8% !important; }
  .cf-folder{ width:min(100%, 367px) !important; }
}
/* journey → products on desktop · one sky, three boxes. The journey's tail, the products
   ground and the pinned card viewport all paint the same sweep, each anchored so the picture's
   bottom lands on the pinned viewport's bottom (--jyOff from the sky fitter). Same picture in
   the same place: no seam can exist between them at any window size. The tail fades in over
   its top 280px. Grain + sweep only — the ground's glows are box-relative and would land in
   different places on a 640px box. */
@media (min-width:761px){
  /* the two overlap for 360px and cross-fade: the tail runs on under the products section
     while the products ground fades in over it — identical pictures, so even the grain tile
     and sub-pixel rounding at the join blend away instead of meeting on one line */
  .ubest::before{ -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 360px) !important;
                          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 360px) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%) !important;
    background-repeat:repeat, no-repeat !important;
    background-position:0 0, center calc(var(--jyOff, 0px) - var(--skyH, 200%)) !important;
    background-size:300px 300px, 100% var(--skyH,200%) !important;
    /* below the picture's last stop the ground carries that same stop on — the sweep ends at
       #F4C09D, and the old base tone (a darker pink) drew a line where the picture ran out */
    background-color:#F4C09D !important; }
  /* the pinned card viewport used to paint its own copy of the sweep, anchored to its own box —
     and that box is sticky, so as it pinned the copy slid against the ground behind it and its
     top edge read as a line. The section's ground is under it everywhere, so it paints nothing. */
  .ubest .ub-pinvp{ background:transparent !important; }
  section.journey.cascade{ overflow:visible; }
  section.journey.cascade::after{ content:""; position:absolute; left:0; right:0; bottom:-360px; height:1000px; z-index:0; pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%);
    background-repeat:repeat, no-repeat;
    background-size:300px 300px, 100% var(--skyH,200%);
    background-position:0 0, center calc(640px + var(--jyOff, 0px) - var(--skyH, 200%));
    background-color:#F4C09D;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 280px);
            mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 280px); }
}
/* checkout demo · Add to Bag matches the weight of the other buttons, and the tick
   is a true circle at every width (it was being squashed by the flex column) */
.pfp-cta{ width:100% !important; height:3.4em !important; min-height:3.4em !important; flex:none !important;
  box-sizing:border-box !important; padding:0 1em !important; line-height:1 !important; font-weight:600 !important; }
.pft-tick{ width:3em !important; height:3em !important; aspect-ratio:1 !important; flex:none !important; align-self:center !important; }
/* closer · no pinned dwell: the card sits in one viewport-tall section and scrolls past freely */
@media (min-width:761px){
  .pin-close{ height:auto !important; }
  .pin-close > .cta-final{ position:relative !important; top:auto !important; height:auto !important; min-height:100vh;
    display:flex; align-items:center; padding:6vh 0 !important; }
}
/* footer · the join with the closer is feathered: the footer's own top eases up from the
   closer's lilac into its sky, so at the end of the page there is no hard edge */
footer.footer-deep{ position:fixed; }
footer.footer-deep::before{ content:""; position:absolute; left:0; right:0; top:0; height:240px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, #BAA1C1 0, rgba(186,161,193,.85) 30%, rgba(186,161,193,.35) 65%, rgba(186,161,193,0) 100%); }
/* voices · the desk sticks below the nav, not under it: a taller top gap clears the pill
   (nav bottom sits ~120px down), and the folder gives up that height */
@media (min-width:761px){
  .vf-stage{ --vf-gap:max(132px, 13vh); --vf-h:calc(100vh - var(--vf-gap) - max(48px, 5vh) - var(--vf-headH, 180px)); }
}
/* closer postcard · no drop shadow: it sat as a dark smear on the sky below the card */
.cta-final .postcard{ box-shadow:none !important; }
/* footer fade · grain-matched and tone-matched to the closer's bottom edge; the first 64px stay
   fully opaque under the closer's 48px tuck so its edge never shows as a step */
footer.footer-deep::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), linear-gradient(to bottom, #BCA2C1 0, #BCA2C1 64px, rgba(188,162,193,.82) 42%, rgba(188,162,193,.38) 70%, rgba(188,162,193,0) 100%) !important; background-repeat:repeat,no-repeat; background-size:300px 300px,100% 100%; }
/* hero lede · two lines on desktop, not three */
@media (min-width:761px){ .hero-sub{ max-width:760px !important; } }
/* sign-in header · option 3 (7 Sep): a dashed postmark strip carrying the symbol and the
   wordmark, then title and lede, everything centred */
.signin-head{ align-items:center !important; text-align:center; gap:10px !important; }
.signin-strip{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding-bottom:18px; margin-bottom:10px; border-bottom:1px dashed rgba(255,255,255,.18); }
.signin-strip .signin-sym{ height:24px !important; width:auto; margin:0 !important; align-self:center !important; }
.signin-strip .signin-word{ height:20px; width:auto; display:block; filter:brightness(0) invert(1); }
.signin-title{ text-align:center; font-size:27px !important; }
.signin-sub{ text-align:center; max-width:32ch; margin:0 auto; }
/* modals · the blur eases in instead of popping. The dialog used to fade in over 220ms with a
   full 14px blur already baked into the scrim, so the background snapped from sharp to blurred
   the moment the first frame landed. The blur and the dim now ramp over ~600ms behind a panel
   that arrives on its own quicker curve; closing runs the same ramp in reverse. */
.demo-modal{ transition:opacity 160ms ease, visibility 0s linear 420ms; }
.demo-modal.is-open{ transition:opacity 120ms ease, visibility 0s linear 0s; }
.demo-modal-scrim{ background:rgba(0,0,0,0); backdrop-filter:blur(0px) saturate(100%); -webkit-backdrop-filter:blur(0px) saturate(100%);
  will-change:backdrop-filter, background-color;
  transition:background-color 420ms ease, backdrop-filter 420ms ease, -webkit-backdrop-filter 420ms ease; }
.demo-modal.is-open .demo-modal-scrim{ background:rgba(0,0,0,.55); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  transition:background-color 620ms cubic-bezier(.2,.6,.2,1), backdrop-filter 620ms cubic-bezier(.2,.6,.2,1), -webkit-backdrop-filter 620ms cubic-bezier(.2,.6,.2,1); }
.demo-modal-panel{ transition:transform 360ms cubic-bezier(.2,.7,.2,1), opacity 260ms ease; opacity:0; }
.demo-modal.is-open .demo-modal-panel{ opacity:1; transition:transform 420ms cubic-bezier(.2,.7,.2,1) 60ms, opacity 300ms ease 60ms; }
@media (prefers-reduced-motion:reduce){ .demo-modal, .demo-modal-scrim, .demo-modal-panel{ transition:none !important; } }
/* checkout demo on phones · the tap is shown without a mouse arrow: the click ring pulses at
   the spot and the tapped control dips, so "adding protection" reads as an action */
@media (max-width:760px){
  .pf-cursor{ display:block !important; }
  .pf-cursor svg{ display:none !important; }
  .pf-ring{ width:3em !important; height:3em !important; margin:-1.5em 0 0 -1.5em !important; left:0 !important; top:0 !important;
    border:2px solid rgba(12,12,12,.5) !important; }
  .pf-hit{ transform:scale(.955) !important; transition:transform .12s ease !important; filter:brightness(.95); }
}
/* checkout demo on phones · the demo's type follows the phone frame's size. The frame shrinks
   to whatever height Safari leaves under its toolbars (an iPhone 17 Pro gives ~430px), but the
   sheet was set in fixed 11px type, so on a real phone it grew taller than the screen and the
   protection row and Checkout were cut off below the bezel. Sized in cqw (the frame keeps its
   aspect, so width stands in for height) they scale down with the frame. */
@media (max-width:760px){
  .pf-drawer{ font-size:clamp(6.8px, 3.42cqw, 11px) !important; max-height:86% !important; }
  .pfp{ font-size:clamp(6.6px, 3.3cqw, 10.6px) !important; }
  .pco{ font-size:clamp(6.8px, 3.42cqw, 11px) !important; }
  .pft{ font-size:clamp(6.8px, 3.42cqw, 11px) !important; }
  .pco-top{ font-size:clamp(6.5px, 3.3cqw, 12px) !important; }
}
/* hero lede · the break sits after "after," on desktop; phones wrap naturally */
@media (min-width:761px){ .hero-sub{ max-width:none !important; text-wrap:initial !important; } }
@media (max-width:760px){ .hs-br{ display:none; } }
/* voices on phones · the sheets stack in one grid cell, so the folder is always as tall as the
   tallest file and switching files never changes the page's height (that height change moved
   everything under the reader's thumb, which read as the page scrolling on its own) */
@media (max-width:760px){
  .vf-sheets{ display:grid !important; }
  .vf-sheet{ display:block !important; grid-area:1 / 1; visibility:hidden; pointer-events:none; }
  .vf-sheet.is-on{ visibility:visible; pointer-events:auto; }
  .vf-sheet.is-leaving, .vf-sheet.is-returning{ visibility:visible; }
}
/* mobile menu · Sign in lives in the dropdown (desktop keeps it in the nav's right slot), and the
   burger's middle bar is removed outright when open — iOS kept painting it through opacity:0 */
@media (min-width:761px){ .nav-pill .nav-signin-m{ display:none !important; } }
body.menu-open .nav-burger .bar:nth-child(2){ opacity:0 !important; transform:scaleX(0) !important; visibility:hidden !important; }
/* late overrides · these must land after every earlier rule for the same selectors */
/* checkout demo on phones · the tick stays round; the Checkout button grows to hold
   its cash-back line instead of clipping it */
@media (max-width:760px){
  .pft-tick{ width:3em !important; height:3em !important; aspect-ratio:1; flex:none; align-self:center; }
  .pfd-btn{ height:auto !important; min-height:3.25em; padding:.72em 1em .64em; box-sizing:border-box; overflow:visible; }
  .pfd-btn b{ line-height:1.1; }
  .pfd-btn em{ line-height:1.15; }
  .pflow.s4 .pfd-btn em, .pfd-btn em{ height:auto; }
}
/* product row pager on phones · one cream pill: arrows and dots as a single control,
   the active dot stretching into a dash */
@media (max-width:760px){
  .ub-swipe{ gap:0 !important; padding:6px 8px !important; border-radius:999px; background:#FAF6EF;
    box-shadow:0 1px 0 rgba(12,12,12,.06), 0 12px 24px -18px rgba(12,12,12,.35); width:max-content; margin-left:auto; margin-right:auto; }
  .ub-swipe .ub-arw{ width:36px !important; height:36px !important; background:none !important; box-shadow:none !important; border:0 !important; color:#0C0C0C; }
  .ub-swipe .ub-arw:active{ background:rgba(12,12,12,.06) !important; }
  .ub-swipe .dots{ gap:6px !important; padding:0 8px; }
  .ub-swipe .dots i{ width:6px !important; height:6px !important; border-radius:3px !important; background:rgba(12,12,12,.22) !important; transform:none !important; transition:width .3s cubic-bezier(.32,.72,0,1), background .3s; }
  .ub-swipe .dots i.on{ width:22px !important; background:#3F6ECA !important; }
}
/* phone tour · a progress rail on the right edge says "this is a scroll, keep going" */
.tour-scroller{ display:none; }
@media (max-width:760px){
  .tour-scroller{ display:flex; flex-direction:column; align-items:center; gap:10px; position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:12; pointer-events:none; }
  .tour-scroller .ts-track{ position:relative; width:3px; height:30vh; border-radius:2px; background:rgba(12,12,12,.14); overflow:hidden; }
  .tour-scroller .ts-track i{ position:absolute; left:0; right:0; top:0; height:calc(var(--tsp,0) * 100%); background:#3F6ECA; border-radius:2px; }
  .tour-scroller .ts-arrow{ width:9px; height:9px; border-right:2px solid rgba(12,12,12,.5); border-bottom:2px solid rgba(12,12,12,.5); transform:rotate(45deg);
    animation:tsBob 1.6s ease-in-out infinite; opacity:calc(1 - var(--tsp,0)); }
  @keyframes tsBob{ 0%,100%{ transform:translateY(0) rotate(45deg); } 50%{ transform:translateY(5px) rotate(45deg); } }
  @media (prefers-reduced-motion:reduce){ .tour-scroller .ts-arrow{ animation:none; } }
}
/* pricing stack on phones: everything centred, the number held in the lower half so it
   never rides up into the headline, copy or button above it */
@media (max-width:760px){
  .bn2-label{ text-align:center; left:24px; right:24px; }
  .bn2-sub{ margin-left:auto; margin-right:auto; }
  .bn2-cta{ display:flex; justify-content:center; }
  .bn2-track{ justify-content:center; }
  .bn2-stat{ align-items:center; text-align:center; transform-origin:center center; justify-content:flex-end; padding-bottom:7vh; box-sizing:border-box; }
  .bn2-desc{ margin-left:auto; margin-right:auto; }
}
/* journey · step 04 · a miniature of the case portal: folder, tabs, ruled sheet, rubber stamp */
.cf-vis{ padding:22px 18px; display:grid; place-items:center; }
.cf-folder{ width:min(100%, 360px); background:#FFFFFF; border-radius:14px; padding:10px; box-shadow:0 1px 0 rgba(12,12,12,.05), 0 22px 44px -30px rgba(12,12,12,.32); font-family:'Geist', system-ui, -apple-system, sans-serif; color:#0C0C0C; text-align:left; }
.cf-tabs{ display:flex; align-items:flex-end; gap:4px; padding:0 12px; }
.cf-tab{ display:inline-block; padding:7px 12px 6px; border-radius:8px 8px 0 0; background:#F3EFE6; color:rgba(12,12,12,.55); font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; transform:translateY(2px); }
.cf-tab.on{ background:#FBF8F1; color:#0C0C0C; font-weight:600; transform:none; padding-top:9px; }
.cf-sheet{ position:relative; background:#FBF8F1; border:1px solid rgba(12,12,12,.07); border-radius:6px; padding:18px 18px 12px; }
.cf-label{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(12,12,12,.55); margin-bottom:4px; }
.cf-row{ display:flex; gap:11px; align-items:flex-start; padding:10px 2px 9px; border-bottom:1px solid rgba(12,12,12,.12); }
.cf-row:last-of-type{ border-bottom:0; }
.cf-row b{ display:block; font-size:13.5px; font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.cf-row i{ display:block; font-style:normal; font-size:11.5px; color:rgba(12,12,12,.55); margin-top:2px; line-height:1.35; }
.cf-box{ flex:none; width:16px; height:16px; margin-top:1px; border:1.5px solid rgba(12,12,12,.28); border-radius:4px; display:grid; place-items:center; background:#fff; }
.cf-row.on .cf-box{ background:#0C0C0C; border-color:#0C0C0C; }
.cf-stamp{ display:inline-flex; align-items:center; gap:8px; color:#2F9A62; transform:rotate(-4deg); mix-blend-mode:multiply; margin:4px 0 0; }
.cf-sheet{ text-align:center; }
.cf-stamp-box{ display:inline-flex; flex-direction:column; align-items:center; padding:5px 12px 4px; border:3px solid currentColor; border-radius:8px; box-shadow:inset 0 0 0 2px #FBF8F1, inset 0 0 0 3.5px currentColor; }
.cf-stamp-box b{ font-weight:800; font-size:17px; line-height:1; letter-spacing:-.005em; text-transform:uppercase; padding:3px 2px 1px; }
.cf-stamp-box small{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:8px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin-top:2px; }
.cf-waves{ width:40px; height:30px; flex:none; }
.cf-title{ margin:14px 0 4px; font-size:17px; font-weight:800; letter-spacing:-.02em; }
.cf-case{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:11px; font-weight:700; letter-spacing:.12em; color:#3F6ECA; margin-bottom:12px; }
.cf-facts{ text-align:left; }
.cf-fact{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 2px; border-top:1px solid rgba(12,12,12,.12); }
.cf-fact span{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(12,12,12,.55); }
.cf-fact b{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
@media (max-width:760px){ .cf-vis{ padding:16px 12px; } .cf-sheet{ padding:14px 14px 16px; } }
/* phone tour: the whole phone frame stays inside the viewport, bottom bezel included */
@media (max-width:760px){
  .tour-stage{ box-sizing:border-box; padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)); }
}
/* journey → products: the products ground fades in over the first 260px, so the sky behind
   the journey shows through the seam and there is no edge — the section's own background
   moves to a masked layer underneath its content */
#products{ position:relative; margin-top:-1px; isolation:isolate; }
.ubest{ background:none !important; background-color:transparent !important; }
.ubest::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"), radial-gradient(ellipse 46% 9% at 50% 91%, rgba(255,236,206,.85) 0%, rgba(255,232,200,.4) 45%, rgba(255,232,200,0) 100%), radial-gradient(ellipse 34% 7% at 6% 9%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 100%), linear-gradient(180deg, #7EACEC 0%, #8EB6E1 6%, #AECDEB 12%, #C4DBEE 20%, #D1E1EE 24%, #D8E2ED 28%, #CCD3E7 36%, #C1C4E0 44%, #BDBDDB 48%, #BAACCE 56%, #BBA4C6 60%, #C09EBE 64%, #D19FB6 72%, #E1ADB8 76%, #EEBEBE 80%, #F8D0BE 88%, #F8D1B9 92%, #FACDAA 96%, #F4C09D 100%); background-position:0 0, center var(--bandY, 0px), center var(--bandY, 0px), center var(--bandY, 0px); background-size:300px 300px, 100% var(--skyH,200%), 100% var(--skyH,200%), 100% var(--skyH,200%); background-repeat:repeat, no-repeat, no-repeat, no-repeat; background-color:#E9AFAF; 
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0px, #000 260px);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0px, #000 260px); }
/* checkout widget · "Order placed" in the case-portal language: cream sheet, rubber stamp,
   mono labels on ruled lines, ocean-blue action */
.co-done{ background:#FBF8F1 !important; border:1px solid rgba(12,12,12,.07); border-radius:6px !important; font-family:'Geist', system-ui, -apple-system, sans-serif; }
.co-done-tick{ display:none !important; }
.co-done-t{ margin:1.1em auto .35em; font-size:1.08em; font-weight:800; letter-spacing:-.01em; color:#0C0C0C; }
.co-done-rows{ padding:.4em 1.05em .9em; }
.co-done-row{ border-bottom:1px solid rgba(12,12,12,.12) !important; color:rgba(12,12,12,.55); }
.co-done-row > span:first-child:not(.co-done-ic){ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.72em; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.co-done-row.is-pol b{ color:#0C0C0C; }
.co-done-row.is-cb b{ color:#3F6ECA !important; font-weight:800; font-size:1em; font-variant-numeric:tabular-nums; }
.co-done-rows{ padding-bottom:1.1em; }
.co-done-row.is-pol .co-done-ic img{ filter:hue-rotate(-40deg) saturate(.85) brightness(1.15); }
.co-done-cta{ background:#3F6ECA !important; color:#fff !important; border-radius:999px !important; }
.co-done-cta:hover{ background:#3563BD !important; }
/* postcard on phones: just the message — no stamps, postmark, address lines or tag */
@media (max-width:760px){
  .cta-final .postcard .pc-addr, .cta-final .postcard .pc-airmail{ display:none !important; }
  .cta-final .postcard .pc-inner{ padding:30px 26px 28px; row-gap:0; }
  .cta-final .postcard .pc-msg{ padding-top:0; }
}
/* postcard on phones: the sign-off flows under the buttons instead of sitting on them,
   and the divider between the two halves is not drawn */
@media (max-width:760px){
  .cta-final .postcard .pc-from{ position:static; margin-top:18px; }
  .cta-final .postcard .pc-msg{ padding-bottom:0; }
  .cta-final .postcard .pc-rule{ display:none; }
}
/* hero parcels on phones: below the two buttons, resting on the cloud floor */
@media (max-width:760px){
  .oc{ width:64px !important; height:76px !important; margin:-38px 0 0 -32px !important; }
  .oc.c-rose{   left:12% !important; top:71% !important; }
  .oc.c-green{  left:35% !important; top:80% !important; }
  .oc.c-purple{ left:65% !important; top:80% !important; }
  .oc.c-gold{   left:88% !important; top:71% !important; }
}
/* hero headline on phones: two lines ("Stop wondering / after checkout."), as on desktop */
@media (max-width:760px){
  .hero.hero-globe .hero-title{ font-size:clamp(25px, 8.4vw, 44px); max-width:none; line-height:1.06; letter-spacing:-.025em; }
}
/* ── One platform, your stack · 3D parcels (three + cannon) ── */
.ub-vis.warm.ub-pills{ isolation:isolate; background:
  radial-gradient(38% 30% at 50% 40%, rgba(255,255,255,.42), rgba(255,255,255,0) 100%),
  radial-gradient(72% 58% at 50% 42%, rgba(255,255,255,.26), rgba(255,255,255,0) 100%),
  linear-gradient(180deg, #A9D5FD 0%, #A4D2FD 45%, #B9DCF8 100%); }
.ub-pills .dsk{ z-index:0; }
.ub-vis.warm.ub-pills::after{ opacity:.09; mix-blend-mode:multiply; }
.ub-pills .pt-stage{ position:absolute; inset:0; overflow:hidden; touch-action:pan-y; }
.ub-pills .pt-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:24%; pointer-events:none; z-index:0;
  background:linear-gradient(to top, rgba(12,12,12,.06), transparent); }
.ub-pills .pt-stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; cursor:grab; }
.ub-pills .pt-stage canvas.dragging{ cursor:grabbing; }
/* voices → closer · the two dusk sections overlap by a pixel so a fractional
   boundary can never let the page ground show through as a hairline */
.pin-close{ margin-top:-1px; }
.vf{ padding-bottom:1px; }
/* the folder's shadow lives on a flat element under it, not on the 3D-tilted folder:
   a shadow drawn on a transformed layer can get cut at the layer edge on GPU
   compositing, which shows as a hard line across the dusk below the folder */
.vf-body{ box-shadow:inset 0 0 0 1px rgba(12,12,12,.06); }
/* no drop shadow under the folder — it kept rendering as a hard line on GPU compositing */
.vf-desk::after{ display:none; }

/* ── Brand stars on the dusk · the four-point sparkle from the brand book,
   scattered in the margins around the folder and the closer ── */
:root{ --dsk-a:url("/assets/img/k23.99710dcf78.webp"); --dsk-b:url("/assets/img/k24.6e1d8c39b8.webp"); }
.dsk-stars{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.cta-final .dsk-stars{ z-index:0; }
.dsk{ position:absolute; width:var(--w); aspect-ratio:6 / 7; background:var(--dsk-a) center / contain no-repeat;
  opacity:var(--o); transform:translate(-50%,-50%); animation:dskTwinkle 6.4s ease-in-out infinite; will-change:opacity,transform; }
.dsk.b{ background-image:var(--dsk-b); animation-duration:7.6s; }
@keyframes dskTwinkle{ 0%,100%{ opacity:var(--o); transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:calc(var(--o) * .45); transform:translate(-50%,-50%) scale(.86); } }
@media (prefers-reduced-motion:reduce){ .dsk{ animation:none; } }
@media (max-width:760px){ .dsk{ width:calc(var(--w) * .6); } }

/* the postmark sits in clear paper below the stamps so the ring text can be read */
.pc-postmark{ right:52%; top:47%; }
@media (max-width:760px){ .pc-postmark{ right:auto; left:6%; top:52%; } }

/* ── iPhone pinned stages (9 Sep) ─────────────────────────────────────────────────────────
   Safari's toolbar collapses on scroll: the screen is 100svh with the toolbar out and 100lvh
   with it away, ~90px apart. The rule: content lays out and centres in the SMALL viewport (so
   it is never under the toolbar) and the background paints to the LARGE one (so no strip ever
   shows when it collapses). The tour and pricing pins already get this for free: they are
   100svh inside sections that paint the same ground below them. The statement is its own
   sticky section with nothing beneath, so it carries the extra height itself, as bottom
   padding. Desktop: both units are equal, the padding is 0. Never dvh here: it resizes
   mid-scroll. Scroll scripts read the small height from #svh-probe for the same reason. */
@media (prefers-reduced-motion:no-preference){
  .stmt.is-ink{ min-height:calc(100lvh + 60px); padding-bottom:calc(clamp(60px,10vh,120px) + (100lvh + 60px - 100svh)); }
  .tour-pin{ height:calc(100lvh + 60px); padding-bottom:calc(100lvh + 60px - 100svh); box-sizing:border-box; }
  .tour-track{ height:calc(725svh + (100lvh + 60px - 100svh)); }
  .bn2-pin{ height:calc(100lvh + 60px); padding-bottom:calc(100lvh + 60px - 100svh); box-sizing:border-box; }
  .bn2{ height:calc(420svh + (100lvh + 60px - 100svh)); }
}

/* ── the footer on phones (9 Sep) ────────────────────────────────────────────────────────
   Safari paints the flat background-COLOUR of a position:fixed element that touches the
   bottom edge behind its toolbar, in place of the element's content: the fixed footer showed
   its fallback colour there while in-flow sections showed their real pixels. On phones the
   footer is in normal flow, overlapping 48px under the closer exactly as the fixed one did, so
   the hills paint behind the pill like everything else. Desktop keeps the reveal curtain. */
@media (max-width:760px){
  footer.footer-deep{ position:relative; margin-top:-48px; padding-bottom:env(safe-area-inset-bottom, 0px); }
}
/* the closed demo sheet was a fixed, full-screen, invisible element touching the bottom edge;
   Safari samples those for its toolbar even at opacity 0. Gone from layout while hidden: the
   open sequence clears `hidden`, waits a frame, then adds `is-open`, so the fade is unchanged. */
.demo-modal[hidden]{ display:none; }

/* ── Safari 26 glass bars (9 Sep, measured on Rob's iPhone 17 with a test page) ─────────
   Safari's bottom bar is clear glass over the page, EXCEPT that any position:sticky or fixed box
   whose bottom edge lands inside the large viewport is sampled and turns the bar into a solid
   band of that box's background-colour (transparent reads as black). A sticky box that runs
   PAST the large viewport is ignored and the glass stays clear. So on phones every pinned
   stage overhangs the large viewport by 60px; the content still lays out in the small
   viewport (the overhang is bottom padding) and the tracks grow by the same 60px so the pins
   hold as long as before. theme-color is ignored since Safari 26; images never count. */
@media (max-width:760px){
  .hero.hero-globe{ min-height:calc(100lvh + 60px); }
  /* the hero is the sky under the whole journey, so it must stay pinned; but a sticky hero is
     always sampled (solid band, or black when it overhangs). On phones it stays in normal flow
     and a script moves it with the scroll instead (transform is never sampled). */
  body.sw-on #hero.hero-globe.sw-under{ position:relative; will-change:transform; }   /* #hero: outranks the design's sticky pin */
}
/* the follow itself is a scroll-driven animation (Safari 26+, Chrome): the compositor moves the hero
   in lockstep with the scroll, so no frame of lag and no shimmer. translate = scroll for the first
   --hero-stop px of scroll (the products top, set by script), then it
   holds, parked under products. Browsers without scroll timelines get the script fallback. */
@supports (animation-timeline: scroll()){
  @media (max-width:760px){
    body.sw-on #hero.hero-globe.sw-under{ animation:heroFollow linear both; animation-timeline:scroll(root block); animation-range:0 var(--hero-stop, 100000px); }
  }
}
@keyframes heroFollow{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,var(--hero-stop, 100000px),0); } }
/* the journey's paper plane and rail fill: same idea. Script still computes --p for the step states and
   the dash trail, but their positions come from a scroll timeline over the rail's own scroll span
   (--vj-a … --vj-b, set by the journey script), so they never trail the scroll by a frame. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* the travel lives on its own carrier (built by the journey script) that animates nothing but a
       transform on the scroll timeline: WebKit keeps that on the compositor. The plane, with its
       time-based wobble, and the trail sit inside it at top:0. (A `top` animation, or mixing
       timelines on the plane itself, both fell back to the main thread and lagged a frame.) */
    .vj-carrier{ position:absolute; left:0; top:0; width:100%; height:0; overflow:visible; will-change:transform; z-index:5;   /* the plane's own level: above the stage nodes */
      animation:vjTravel linear both; animation-timeline:scroll(root block); animation-range:var(--vj-a, 0px) var(--vj-b, 1px); }
    .vj-carrier .vj-head, .vj-carrier .vj-trail{ top:0; }
  }
}
@keyframes vjTravel{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,var(--vj-len, 0px),0); } }

/* phones: the statement stays sticky down to the reveal wrapper's end, i.e. to the postcard's bottom,
   and the footer now tucks 48px under that edge. Until the footer counted as "revealed" the
   statement's last 48px of ink painted over the footer's dusk band behind the postcard's rounded
   corners (black corners, and on iOS a hairline of ink below the card). The clear strip that the
   revealed state applies is simply always on for phones. */
@media (max-width:760px){
  section.stmt.is-ink{ -webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 48px), rgba(0,0,0,0) calc(100% - 48px));
                               mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 48px), rgba(0,0,0,0) calc(100% - 48px)); }
}

/* Safari's bar falls back to the BODY's background-colour whenever nothing settled is under it: at
   the very end of the page (the document stops at the expanded bar's top edge) and for a moment
   when the bar expands on a scroll-up. One fixed colour is wrong somewhere, so on phones a script
   sets the body colour to the section at the bottom edge (sky, pink, paper, ink, dusk, hills).
   The body colour is never visible inside the page (checked pixel by pixel at phone size: every
   section paints its own ground). Root canvas: ink above the page for the top bounce. */
/* phones: the footer's last 56px fade into the same hills green Safari paints under its expanded bar
   at the page end, so the bar reads as the fade continuing rather than a band starting */
@media (max-width:760px){
  footer.footer-deep::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; z-index:2; pointer-events:none;
    background:linear-gradient(to bottom, rgba(21,46,57,0) 0%, rgba(21,46,57,.55) 50%, #152E39 100%); }
}
/* (the body keeps its ink from the rule above on desktop; on phones the script sets it per section) */
/* the canvas beyond the document: while Safari's bar animates between its sizes the visible area is
   briefly taller than the page has left, and the canvas shows. Ink is painted as a tall tile anchored
   to the page's bottom (so above the page stays ink) and the hills green is the colour beyond it. */
@media (max-width:760px){ html{ background:linear-gradient(#0C0C0C, #0C0C0C) 0 100% / 100% 300% no-repeat, #152E39; } }
html, body{ overscroll-behavior-y:none; }   /* no rubber-band past the ends (honoured on iOS 26): the bounce is what expanded the bar at the page end */

/* ── viewport-fit=cover (9 Sep) ────────────────────────────────────────────────────────────
   The page now extends under the status bar and the home indicator, so the strip under
   Safari's URL bar shows the page (sky, paper, hills) instead of a flat colour. Two things
   sit against those edges and step inside them: the nav island hangs below the status bar,
   from an ink strip that keeps the bar looking as it did; the demo sheet pads its top and
   bottom. The footer needs nothing: its hills simply reach further down. */
.nav{ padding-top:env(safe-area-inset-top, 0px); }
.nav::before{ content:""; position:absolute; left:0; right:0; top:0; height:env(safe-area-inset-top, 0px); background:#000; }
@media (max-width:640px){
  .demo-host{ padding-top:calc(var(--lg) + env(safe-area-inset-top, 0px)); }      /* the ink header runs under the status bar */
  .demo-sched{ padding-bottom:calc(var(--lg) + env(safe-area-inset-bottom, 0px)); }
  .demo-modal-close{ top:calc(14px + env(safe-area-inset-top, 0px)); }
}

/* ── src/index.html:13429 · #posty-approved-update ── */
.pwk .zone{width:100%;text-align:left}
.pwk{--sky:#A9D7F2; --cream:#FAF6EF; --ink:#0C0C0C;
  --ocean-deep:#3F6ECA; --ocean:#6B8FD6; --ocean-60:#A4B8E0; --ocean-30:#CFD7E8; --ocean-15:#E5E7EB;
  --sky-tint:#E7F1FA;

  --ink-2:#3A3A3A; --paper:#ffffff; --page:#FAF6EF; --page-2:#F2ECE2;

  
  --field:#E7F1FA; --accent:#A9D7F2; --accent-deep:#8CC7EA; --accent-text:#3F6ECA;
  --off:#E5E7EB; --off-ink:#9CA3AD;

  
  --cta:#0C0C0C; --cta-deep:#262626; --cta-ink:#ffffff; --cta-sub:#A9D7F2;

  
  --stamp:#A9D7F2; --stamp-ink:#0C0C0C; --knob:#0C0C0C;

  --muted:#6B6B6B; --muted-2:#9C9C9C; --line:#EDE6DA; --line-2:#E0D7C7;

  
  --card-end:#F3F8FC;
  --rim:rgba(63,110,202,.20); --rim-soft:rgba(63,110,202,.16);
  --glow-far:rgba(63,110,202,.42); --glow-near:rgba(12,12,12,.20);
  --thumb-a:#F3F3F2; --thumb-b:#EBEBE9;
  --radius:16px;
  --shadow:0 1px 2px rgba(12,12,12,.04), 0 8px 30px rgba(12,12,12,.06);
  --shadow-lift:0 2px 6px rgba(12,12,12,.06), 0 18px 50px rgba(12,12,12,.10);}

.pwk .zone{position:relative;border-radius:24px;padding:11px;
  background:radial-gradient(96% 56% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), var(--field);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px var(--rim),
             0 38px 78px -38px var(--glow-far), 0 8px 20px -14px var(--glow-near)}
.pwk .zone>*{position:relative;z-index:1}
.pwk .zone::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(96% 56% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 58%), var(--off);
  opacity:0;transition:opacity .5s ease}
.pwk .zone.off::after{opacity:1}
.pwk .z-card{border-radius:17px;padding:14px 15px;
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFFFF 34%,var(--card-end) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--rim-soft),
             0 20px 40px -28px var(--glow-far), 0 4px 10px -8px var(--glow-near)}
.pwk .z-line{display:flex;align-items:center;gap:11px}
.pwk .z-line + .z-line{margin-top:12px}
.pwk .z-thumb{width:44px;height:44px;border-radius:12px;
  background:linear-gradient(158deg,var(--thumb-a),var(--thumb-b));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(12,12,12,.06);flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pwk .z-thumb svg{width:100%;height:100%}
.pwk .z-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.pwk .z-meta{flex:1;min-width:0}
.pwk .z-name{font-size:13.5px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pwk .z-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.pwk .z-price{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.pwk .z-divider{height:1px;background:rgba(12,12,12,.09);margin:12px 0}
.pwk .z-subtotal{display:flex;justify-content:space-between;align-items:baseline}
.pwk .z-subtotal .l{font-size:12.5px;color:var(--muted)}
.pwk .z-subtotal .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.pwk .pill{border-radius:17px;padding:15px 16px;margin-top:9px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFFFF 34%,var(--card-end) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--rim-soft),
             0 14px 30px -22px var(--glow-far), 0 3px 8px -6px var(--glow-near)}
.pwk .pill-lead{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto}
.pwk .badge{width:33px;height:33px;flex:none;display:flex;align-items:center;justify-content:center;transition:filter .35s ease}
.pwk .badge svg{width:33px;height:33px;display:block}
.pwk .zone.off .badge{filter:grayscale(1) opacity(.5)}
.pwk .pill-title{font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25;white-space:nowrap;color:var(--ink)}
.pwk .info-btn{width:21px;height:21px;flex:none;border-radius:50%;border:1.4px solid var(--muted-2);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;background:none;font-family:"Geist Mono",monospace}
.pwk .info-btn:hover{border-color:var(--accent-text);color:var(--accent-text)}
.pwk .pill-tail{display:flex;align-items:center;gap:13px;flex:none;margin-left:auto}
.pwk .pill-fee{font-size:14px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.pwk .zone.off .pill-fee{color:var(--muted-2)}
.pwk .tgl{width:46px;height:27px;border-radius:999px;background:var(--off-ink);position:relative;cursor:pointer;flex:none;border:none;padding:0;transition:background .22s ease,box-shadow .22s ease}
.pwk .tgl.on{background:var(--accent);box-shadow:0 0 0 4px var(--field)}
.pwk .tgl .knob{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--knob);transition:transform .22s ease}
.pwk .tgl.on .knob{transform:translateX(19px)}
.pwk .detail{border-radius:17px;margin-top:9px;padding:0 15px;height:0;overflow:hidden;opacity:0;
  background:linear-gradient(158deg,#FFFFFF 0%,#FFFFFF 34%,var(--card-end) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--rim-soft),
             0 20px 40px -28px var(--glow-far), 0 4px 10px -8px var(--glow-near);
  transition:height .55s cubic-bezier(.32,.72,0,1), opacity .38s ease,
             padding .55s cubic-bezier(.32,.72,0,1), margin .55s cubic-bezier(.32,.72,0,1)}
.pwk .detail.open{opacity:1;padding:14px 15px}
.pwk .detail .detail-head,.pwk .detail .check,.pwk .detail .cashline{opacity:0;transform:translateY(9px);
  transition:opacity .38s ease, transform .45s cubic-bezier(.32,.72,0,1)}
.pwk .detail.open .detail-head{opacity:1;transform:none;transition-delay:.10s}
.pwk .detail.open .check:nth-child(1){opacity:1;transform:none;transition-delay:.18s}
.pwk .detail.open .check:nth-child(2){opacity:1;transform:none;transition-delay:.26s}
.pwk .detail.open .check:nth-child(3){opacity:1;transform:none;transition-delay:.34s}
.pwk .detail.open .cashline{opacity:1;transform:none;transition-delay:.44s}
@media (prefers-reduced-motion:reduce){.pwk .detail,.pwk .detail .detail-head,.pwk .detail .check,.pwk .detail .cashline{transition:none}.pwk .detail .detail-head,.pwk .detail .check,.pwk .detail .cashline{opacity:1;transform:none}}
.pwk .detail-head{display:flex;justify-content:space-between;align-items:baseline}
.pwk .detail-head .t{font-size:13px;font-weight:600}
.pwk .detail-head .f{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pwk .checks2{margin:10px 0 0;display:flex;flex-direction:column;gap:7px}
.pwk .check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.pwk .check svg{width:14px;height:14px;flex:none;color:var(--accent-text)}
.pwk .cashline{margin-top:11px;padding-top:10px;border-top:1px dashed rgba(12,12,12,.14);font-size:12px;color:var(--accent-text);font-weight:500}
.pwk .z-btn{width:100%;margin-top:9px;border:none;cursor:pointer;border-radius:17px;padding:15px 16px;
  background-color:var(--cta);color:var(--cta-ink);
  background-image:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 58%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 18px 34px -22px var(--glow-near);
  font-family:inherit;text-align:center;
  transition:background-color .2s, transform .16s cubic-bezier(.32,.72,0,1)}
.pwk .z-btn:hover{background-color:var(--cta-deep)}
.pwk .z-btn:active{transform:scale(.985)}
.pwk .z-btn .b1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.pwk .z-btn .b2{font-size:11.5px;color:var(--cta-sub);margin-top:2px;font-weight:500}
.pwk .z-exit{display:block;width:100%;text-align:center;margin-top:10px;background:none;border:none;cursor:pointer;font-family:inherit;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.pwk .z-exit.tiny{font-size:11px;color:var(--muted-2)}
.pwk .z-exit.norm{font-size:12.5px;color:var(--muted)}
.pwk .z-exit.readd{color:var(--accent-text);font-weight:500;text-decoration:underline}
.pwk .zone.off .pi-fill{background:var(--off-ink)}
@media(max-width:680px){.pwk .pill{padding:12px 13px}.pwk .pill-title{font-size:14px}.pwk .badge,.pwk .badge svg{width:32px;height:32px}}.pwk{width:474px;max-width:94vw;text-align:left;font-family:inherit;color:var(--ink)}.pwk .detail,.pwk .detail.open{max-height:none}.pwk .badge .sym{width:100%;height:100%;display:block;background:var(--sym) no-repeat center/contain}.pwk .z-more{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;cursor:pointer;white-space:nowrap}.pwk .z-more:hover{color:var(--ink)}
#posty-widget{width:474px;max-width:100%;margin:0 auto}
.pwk .z-exit.tiny,.pwk .z-exit.norm{color:#0C0C0C;text-decoration:underline;text-underline-offset:2px}
.pwk .z-exit.readd{font-size:12.5px}
.pwk .info-btn{border-color:#0063cf;border-width:1.8px}
.pwk .info-btn::after{content:"";position:absolute;width:32px;height:40px;border-radius:50%}
.pwk .z-price{white-space:nowrap}
.pwk .detail{transition:opacity .38s ease}
.pwk .detail:not(.open){pointer-events:none}
.pwk .detail.open{height:auto}
.pwk .check svg{overflow:visible}
@media(max-width:440px){
 body{padding:16px}
 .pwk .pill{padding:12px}
 .pwk .pill-lead{flex:1 1 0;gap:8px}
 .pwk .pill-title{font-size:13.5px;white-space:normal;min-width:0}
 .pwk .pill-tail{gap:8px}
 .pwk .badge,.pwk .badge .sym{width:28px;height:28px}
 .pwk .z-line{gap:9px}
 .pwk .z-card{padding:13px 12px}
 .pwk .z-sub{font-size:10.5px;line-height:1.4}
 .pwk .z-name{font-size:12.5px}
 .pwk .z-price{font-size:12.5px}
 .pwk .z-thumb{width:38px;height:38px}
 .pwk .check{align-items:flex-start;font-size:11.5px}
 .pwk .check svg{margin-top:1px}
 .pwk .detail-head{gap:12px}
 .pwk .cashline{line-height:1.5}
 .pwk .pill-fee{font-size:12.5px}
 .pwk .zone.off .pill-tail{flex-basis:100%;justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
#posty-order-benefits{--brand:#272727;--brand-text:#272727;--on-brand:#fff;--ink:#222225;--muted:#6a6a70;--line:#e7e7e9;--surface:#f7f7f8;font-synthesis:none}#posty-order-benefits button{font:inherit}#posty-order-benefits button{cursor:pointer}#posty-order-benefits button:focus-visible,#posty-order-benefits summary:focus-visible{outline:3px solid var(--brand);outline-offset:4px}#posty-order-benefits button{ -webkit-tap-highlight-color:transparent}#posty-order-benefits .stamp{width:31px;height:31px;color:var(--brand)}#posty-order-benefits{padding:0;border:1px solid #ffffff80;border-radius:22px;width:520px;max-width:calc(100% - 32px);max-height:calc(100dvh - 48px);box-shadow:0 28px 100px #1113;color:var(--ink);overflow:auto}#posty-order-benefits::backdrop{background:#19191c66;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#posty-order-benefits[open]{animation:pobEnter .18s ease-out}#posty-order-benefits .modal-inner{padding:32px}#posty-order-benefits .modal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}#posty-order-benefits .powered{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}#posty-order-benefits .wordmark{display:block;width:72px;height:auto;flex:none}#posty-order-benefits .powered .wordmark{width:59px}#posty-order-benefits .powered .stamp{width:24px;height:24px}#posty-order-benefits .close{border:0;background:var(--surface);border-radius:50%;width:36px;height:36px;color:#616168;display:grid;place-items:center}#posty-order-benefits .close svg{width:18px;height:18px}#posty-order-benefits h2{font-size:30px;line-height:1.12;letter-spacing:-1px;font-weight:550;margin:0 0 12px}#posty-order-benefits .intro{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 27px;max-width:380px}#posty-order-benefits .benefits{display:grid;gap:25px;margin-bottom:28px}#posty-order-benefits .benefit{display:grid;grid-template-columns:24px 1fr;gap:14px}#posty-order-benefits .icon{width:24px;height:24px;margin-top:1px;display:grid;place-items:center;color:var(--brand-text)}#posty-order-benefits .icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}#posty-order-benefits h3{font-size:17px;font-weight:500;letter-spacing:-.2px;margin:0 0 7px;line-height:1.35;color:var(--brand-text)}#posty-order-benefits .benefit p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}#posty-order-benefits .help{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px}#posty-order-benefits .help-toggle{width:100%;min-height:56px;padding:16px 0;background:none;border:0;text-align:left;color:var(--ink);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:16px}#posty-order-benefits .help-toggle svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;color:var(--muted);transition:color 220ms ease}#posty-order-benefits .help-toggle .vertical{transform-origin:12px 12px;transition:transform 280ms cubic-bezier(.22,1,.36,1),opacity 200ms ease}#posty-order-benefits .help.is-open .vertical{transform:rotate(90deg);opacity:0}#posty-order-benefits .help.is-open .help-toggle svg{color:var(--brand)}#posty-order-benefits .help-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 300ms cubic-bezier(.22,1,.36,1),opacity 200ms ease}#posty-order-benefits .help.is-open .help-panel{grid-template-rows:1fr;opacity:1}#posty-order-benefits .help-panel-inner{overflow:hidden;min-height:0}#posty-order-benefits .help p{font-size:13px;line-height:1.6;color:var(--muted);margin:0;padding:0 24px 17px 0}@media(prefers-reduced-motion:reduce){#posty-order-benefits .help-panel,#posty-order-benefits .help-toggle svg,#posty-order-benefits .help-toggle .vertical{transition:none}}#posty-order-benefits .primary{width:100%;border:0;border-radius:10px;background:var(--brand);color:var(--on-brand);font-size:14px;font-weight:600;padding:15px}#posty-order-benefits .footnote{font-size:11px;color:var(--muted);text-align:center;line-height:1.6;margin:13px 8px 0}@keyframes pobEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){#posty-order-benefits{width:100%;max-width:100%;max-height:92dvh;margin:auto 0 0;border-radius:22px 22px 0 0}#posty-order-benefits .modal-inner{padding:26px 24px calc(24px + env(safe-area-inset-bottom))}#posty-order-benefits .modal-top{margin-bottom:23px}#posty-order-benefits h2{font-size:29px}}@media(prefers-reduced-motion:reduce){#posty-order-benefits[open]{animation:none}}#posty-order-benefits .benefits-footer{border-top:1px solid var(--line);margin-top:24px;padding-top:19px}#posty-order-benefits .benefits-footer p{font-size:11px;line-height:1.75;color:var(--muted);margin:0 0 16px}#posty-order-benefits .benefits-footer nav{display:flex;gap:12px 20px;flex-wrap:wrap}#posty-order-benefits .benefits-footer a{font-size:11px;line-height:1.8;color:var(--ink);text-underline-offset:3px}#posty-order-benefits .benefits-footer a:focus-visible{outline:2px solid var(--brand);outline-offset:4px}#posty-order-benefits .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:600px){#posty-order-benefits .benefits-footer a{min-height:32px;display:inline-flex;align-items:center}#posty-order-benefits .benefits-footer nav{gap:8px 18px}}#posty-order-benefits /* Refined popup hierarchy */
dialog{width:560px;border-radius:18px;box-shadow:0 24px 80px #1112}#posty-order-benefits .modal-inner{padding:30px 32px 26px}#posty-order-benefits .modal-top{margin-bottom:22px}#posty-order-benefits .powered{font-size:11px;gap:6px}#posty-order-benefits .powered .stamp{width:21px;height:21px}#posty-order-benefits .powered .wordmark{width:54px}#posty-order-benefits .close{width:32px;height:32px;background:transparent}#posty-order-benefits .close:hover{background:var(--surface)}#posty-order-benefits h2{font-size:27px;font-weight:500;letter-spacing:-.8px;margin-bottom:9px}#posty-order-benefits .intro{font-size:13px;line-height:1.6;max-width:none;margin-bottom:25px}#posty-order-benefits .benefits{gap:21px;margin-bottom:23px}#posty-order-benefits .benefit{grid-template-columns:22px 1fr;gap:13px}#posty-order-benefits .icon{width:22px;height:22px;margin-top:0}#posty-order-benefits .icon svg{width:20px;height:20px}#posty-order-benefits h3{font-size:15px;font-weight:600;letter-spacing:-.1px;margin-bottom:5px;line-height:1.4}#posty-order-benefits .benefit p{font-size:13px;line-height:1.6}#posty-order-benefits .help{border-bottom:0;margin-bottom:0}#posty-order-benefits .help-toggle{min-height:50px;padding:14px 0;font-size:12px}#posty-order-benefits .help p{font-size:12px;padding-bottom:12px}#posty-order-benefits .modal-actions{display:flex;justify-content:center;margin-top:12px}#posty-order-benefits .primary{width:100%;min-height:48px;border-radius:10px;padding:15px 23px;font-size:14px;font-weight:600;text-align:center}#posty-order-benefits .benefits-footer{margin-top:22px;padding-top:17px}#posty-order-benefits .benefits-footer p{font-size:11px;line-height:1.7;margin-bottom:12px}#posty-order-benefits .benefits-footer nav{gap:10px 22px}@media(max-width:600px){#posty-order-benefits{width:100%;border-radius:18px 18px 0 0}#posty-order-benefits .modal-inner{padding:24px 24px calc(22px + env(safe-area-inset-bottom))}#posty-order-benefits h2{font-size:25px}#posty-order-benefits .modal-top{margin-bottom:20px}#posty-order-benefits .benefits{gap:20px}#posty-order-benefits .primary{min-height:44px}#posty-order-benefits .benefits-footer nav{gap:8px 18px}}#posty-order-benefits{font-family:inherit;color:var(--ink);margin:auto;position:fixed;inset:0}#posty-order-benefits button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}#posty-order-benefits .powered .stamp{color:#A9D7F2;--on-brand:#0C0C0C}#posty-order-benefits .wordmark{width:59px;height:auto}#posty-order-benefits a{color:inherit}#posty-order-benefits .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}#posty-order-benefits button:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
#posty-order-benefits{background:#fff}
#posty-order-benefits .powered .stamp{flex:none}
@media(max-width:600px){#posty-order-benefits{margin:auto 0 0;inset:auto 0 0}}

.pwk{--sym:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2094.15%2094.15%22%3E%3Cpath%20fill%3D%22%234A2A8F%22%20d%3D%22M82.54%2024.69C82.54%2028.58%2085.3%2031.82%2088.96%2032.56C89.87%2032.74%2090.52%2033.54%2090.52%2034.46L90.52%2036.86C90.52%2037.79%2089.87%2038.58%2088.96%2038.76C85.3%2039.5%2082.54%2042.75%2082.54%2046.63C82.54%2050.52%2085.3%2053.76%2088.96%2054.49C89.87%2054.68%2090.52%2055.47%2090.52%2056.39L90.52%2058.81C90.52%2059.73%2089.87%2060.52%2088.96%2060.71C85.3%2061.44%2082.54%2064.68%2082.54%2068.57C82.54%2072.46%2085.3%2075.7%2088.96%2076.44C89.87%2076.62%2090.52%2077.41%2090.52%2078.34L90.52%2080.75C90.52%2081.68%2089.86%2082.46%2088.96%2082.65C85.79%2083.29%2083.31%2085.79%2082.68%2088.96C82.5%2089.86%2081.71%2090.52%2080.79%2090.52L78.39%2090.52C77.47%2090.52%2076.67%2089.86%2076.49%2088.96C75.77%2085.27%2072.52%2082.49%2068.62%2082.49C64.71%2082.49%2061.46%2085.27%2060.74%2088.96C60.56%2089.86%2059.76%2090.52%2058.84%2090.52L56.45%2090.52C55.53%2090.52%2054.73%2089.86%2054.55%2088.96C53.82%2085.27%2050.57%2082.49%2046.67%2082.49C42.78%2082.49%2039.52%2085.27%2038.8%2088.96C38.62%2089.86%2037.82%2090.52%2036.9%2090.52L34.51%2090.52C33.59%2090.52%2032.79%2089.86%2032.61%2088.96C31.89%2085.27%2028.63%2082.49%2024.74%2082.49C20.83%2082.49%2017.58%2085.27%2016.86%2088.96C16.68%2089.86%2015.88%2090.52%2014.96%2090.52L12.21%2090.52C11.4%2090.52%2010.69%2090%2010.38%2089.25C9.23%2086.4%207.14%2084.27%204%2082.94C3.27%2082.64%202.79%2081.93%202.79%2081.13L2.79%2078.34C2.79%2077.43%203.45%2076.63%204.35%2076.45C8.04%2075.72%2010.82%2072.47%2010.82%2068.57C10.82%2064.67%208.04%2061.42%204.35%2060.7C3.45%2060.52%202.79%2059.72%202.79%2058.8L2.79%2056.4C2.79%2055.48%203.45%2054.68%204.35%2054.5C8.04%2053.78%2010.82%2050.53%2010.82%2046.63C10.82%2042.73%208.04%2039.48%204.35%2038.75C3.45%2038.57%202.79%2037.77%202.79%2036.86L2.79%2034.46C2.79%2033.55%203.45%2032.75%204.35%2032.57C8.04%2031.84%2010.82%2028.59%2010.82%2024.69C10.82%2020.79%208.04%2017.54%204.35%2016.82C3.45%2016.64%202.79%2015.84%202.79%2014.92L2.79%2012.52C2.79%2011.59%203.45%2010.8%204.35%2010.62C7.52%2010%2010.01%207.52%2010.66%204.35C10.84%203.45%2011.63%202.79%2012.56%202.79L14.97%202.79C15.89%202.79%2016.69%203.44%2016.87%204.34C17.61%208.01%2020.85%2010.77%2024.74%2010.77C28.62%2010.77%2031.86%208.01%2032.6%204.34C32.79%203.44%2033.58%202.79%2034.5%202.79L36.91%202.79C37.83%202.79%2038.62%203.44%2038.8%204.34C39.54%208.01%2042.79%2010.77%2046.67%2010.77C50.56%2010.77%2053.8%208.01%2054.54%204.34C54.72%203.44%2055.52%202.79%2056.44%202.79L58.85%202.79C59.77%202.79%2060.57%203.44%2060.75%204.34C61.49%208.01%2064.73%2010.77%2068.62%2010.77C72.5%2010.77%2075.75%208.01%2076.48%204.34C76.66%203.44%2077.46%202.79%2078.38%202.79L80.79%202.79C81.71%202.79%2082.51%203.44%2082.69%204.35C83.32%207.49%2085.81%209.98%2088.95%2010.61C89.86%2010.8%2090.52%2011.59%2090.52%2012.51L90.52%2014.63C90.52%2015.86%2089.87%2016.64%2088.96%2016.82C85.3%2017.56%2082.54%2020.8%2082.54%2024.69%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M40.32%2055.05C38.82%2055.05%2037.59%2053.83%2037.59%2052.32C37.59%2047.57%2033.93%2043.71%2029.43%2043.71C24.93%2043.71%2021.27%2047.57%2021.27%2052.32C21.27%2053.83%2020.05%2055.05%2018.55%2055.05C17.04%2055.05%2015.82%2053.83%2015.82%2052.32C15.82%2044.57%2021.93%2038.26%2029.43%2038.26C36.94%2038.26%2043.05%2044.57%2043.05%2052.32C43.05%2053.83%2041.82%2055.05%2040.32%2055.05%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M74.76%2055.05C73.25%2055.05%2072.04%2053.83%2072.04%2052.32C72.04%2047.57%2068.38%2043.71%2063.88%2043.71C59.38%2043.71%2055.71%2047.57%2055.71%2052.32C55.71%2053.83%2054.49%2055.05%2052.99%2055.05C51.48%2055.05%2050.26%2053.83%2050.26%2052.32C50.26%2044.57%2056.37%2038.26%2063.88%2038.26C71.38%2038.26%2077.48%2044.57%2077.48%2052.32C77.48%2053.83%2076.27%2055.05%2074.76%2055.05%22%2F%3E%3C%2Fsvg%3E")}

.posty-journey-asset{display:block;width:100%;max-width:620px;margin:0 auto;border:0;background:transparent;overflow:hidden}
.vj-vis.cf-vis{zoom:1!important;padding:0!important}
.vj-vis:has(.posty-journey-asset){padding:0!important;min-width:0;display:block!important;width:100%}
/* posty-asymmetric-parcels-v1 */
/* Deliveries occupy whitespace, independently of card heights. Compact gutters
   vary with the artwork size and leave room for the cards' entrance movement. */
#how .vj-step>.jy-chute.journey-parcel{
  position:absolute;display:block;pointer-events:none;z-index:2;
  width:clamp(72px,5.2vw,84px);max-width:none;height:auto;
  top:auto;bottom:12px;left:auto;right:8%;margin:0;
  translate:none!important;object-fit:contain;will-change:rotate;
}
#how .vj-step>.jy-chute.journey-parcel.c2{
  width:54px;height:auto;
  left:26%;right:auto;bottom:10px;
}
#how .vj-step>.jy-chute.journey-parcel.c3{
  width:clamp(76px,5.8vw,96px);height:auto;
  left:61%;right:auto;bottom:8px;
}
@media(max-width:1559px){
  #how .vj-step:has(>.journey-parcel.c1){padding-bottom:132px;}
  #how .vj-step:has(>.journey-parcel.c2){padding-bottom:112px;}
  #how .vj-step:has(>.journey-parcel.c3){padding-bottom:124px;}
}
@media(min-width:1560px){
  #how .vj-step>.jy-chute.journey-parcel.c1{
    width:128px;height:auto;top:8%;bottom:auto;left:auto;right:-146px;
  }
  #how .vj-step>.jy-chute.journey-parcel.c2{
    width:94px;height:auto;top:52%;bottom:auto;left:-128px;right:auto;
  }
  #how .vj-step>.jy-chute.journey-parcel.c3{
    width:114px;height:auto;top:42%;bottom:auto;left:auto;right:-134px;
  }
}
@media(prefers-reduced-motion:reduce){
  #how .vj-step>.jy-chute.journey-parcel{animation:none;will-change:auto;}
}






.pft-prot{width:min(54em,92%)!important;align-items:center;border:5px solid #A9D7F2;border-radius:16px!important;background:#F3F8FC!important}
.pft-prot>div{flex:1}.pft-ref{font-size:.8em;white-space:nowrap;padding:.7em;background:#e5edf1;border-radius:6px}.pft-ticket{font-size:.8em;white-space:nowrap;padding:.9em 1.2em;border-radius:30px;background:white;font-weight:600}
.cta-final{--duskH:100%;--duskOff:0px}
.mw-frame[data-posty-asset="finale"]{pointer-events:auto!important}
@media(max-width:760px){#how .wrap{width:calc(100% - 36px)!important;padding:0!important}#how .vj-step{grid-template-columns:24px minmax(0,1fr);column-gap:12px}#how .vj-node{margin-left:6px}#how .vj-rail{left:11px}.pft-prot{flex-wrap:wrap;justify-content:center}.pft-prot>div{min-width:65%}.pft-ref,.pft-ticket{font-size:11px}.posty-journey-asset{max-width:100%}}

/* ── src/index.html:13667 · #posty-journey-plane-fix ── */
/* Centre the existing plane on the real rail endpoint and park it there. */
#how .vj-rail{overflow:visible}
#how .vj-head{left:50%;margin:0;translate:-50% -50%}
#how .vj.is-landed .vj-head{animation:none;transform:none}
#how .vj.is-landed .vj-trail{opacity:0}

/* ── src/index.html:13675 · #posty-teal-interactions ── */
@font-face{font-family:Systemia;src:url('/assets/fonts/Systemia-400.0c1a5958a1.woff2');font-weight:400;font-display:swap}@font-face{font-family:Systemia;src:url('/assets/fonts/Systemia-500.0029b0e482.woff2');font-weight:500;font-display:swap}@font-face{font-family:Systemia;src:url('/assets/fonts/Systemia-600.af3b439824.woff2');font-weight:600;font-display:swap}@font-face{font-family:Systemia;src:url('/assets/fonts/Systemia-700.5ca0110dbf.woff2');font-weight:700;font-display:swap}@font-face{font-family:Bauhaus;src:url('/assets/fonts/BauhausVoleVF-100_950.b4a21058ad.woff2');font-weight:100 950;font-display:swap}@font-face{font-family:Plex;src:url('/assets/fonts/IBMPlexMono-500.d32f0e0701.woff2');font-weight:500;font-display:swap}

#posty-action-dialog .posty-lockup{display:inline-flex;align-items:center;gap:8px}#posty-action-dialog .posty-lockup .sym{width:28px;height:28px}#posty-action-dialog .posty-lockup .word{width:70px;height:auto;filter:brightness(0)}#posty-action-dialog .brand-button{border:1.5px solid #111;border-radius:12px;box-shadow:3px 3px 0 #111;background:var(--merchant);color:white;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:8px 9px 8px 18px;font-weight:600;font-size:14px;text-decoration:none;transition:transform .15s,box-shadow .15s}#posty-action-dialog .brand-button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #111}#posty-action-dialog .brand-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #111}#posty-action-dialog .brand-button .arrow{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--merchant);font-size:22px;font-weight:400}#posty-action-dialog .quiet-button{border:1px solid var(--line);border-radius:9px;padding:10px 14px;background:#fff;font-weight:500;font-size:13px}#posty-action-dialog .text-button{background:none;border:0;color:var(--merchant);padding:0;text-decoration:underline;text-underline-offset:4px;font-size:13px}#posty-action-dialog .stamp{color:var(--merchant);display:inline-flex;border:2px solid currentColor;border-radius:6px;padding:5px 13px;box-shadow:inset 0 0 0 2px var(--paper),inset 0 0 0 3px currentColor;flex-direction:column;align-items:center;transform:rotate(-5deg)}#posty-action-dialog .stamp b{font-size:21px;font-weight:700;letter-spacing:-.02em}#posty-action-dialog .stamp small{font:500 7px Plex,monospace;letter-spacing:.14em;margin:2px 0 1px}#posty-action-dialog .tick{width:44px;height:44px;border:1.5px solid var(--merchant);background:var(--merchant-soft);border-radius:50%;display:grid;place-items:center;color:var(--merchant);font-size:24px}#posty-action-dialog .rule-label{display:flex;align-items:center;gap:15px;color:var(--muted)}#posty-action-dialog .rule-label:after{content:'';height:1px;flex:1;background:var(--line)}

#posty-action-dialog{border:1px solid #edf0e9;border-radius:24px;width:min(680px,calc(100vw - 36px));max-width:none;max-height:calc(100svh - 46px);padding:28px 30px;color:var(--ink);background:#fff;box-shadow:0 25px 90px #1e243347;overflow:auto;overscroll-behavior:contain}#posty-action-dialog::backdrop{background:rgba(30,38,49,.35);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}body:has(#posty-action-dialog[open]){overflow:hidden}#posty-action-dialog .dialog-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}#posty-action-dialog .powered-by{display:flex;align-items:center;gap:9px;color:#777d7e;font-size:11px}#posty-action-dialog .dialog-top .posty-lockup{gap:7px}#posty-action-dialog .dialog-top .sym{width:25px;height:25px}#posty-action-dialog .dialog-top .word{width:63px}#posty-action-dialog .dialog-close{border:0;width:35px;height:35px;border-radius:50%;background:#f4f5f4;color:#666;font-size:27px;line-height:1;display:grid;place-items:center}#posty-action-dialog .dialog-close:hover{background:#e9ede8}#posty-action-dialog #posty-dialog-title{font:600 35px/1.08 Bauhaus,sans-serif;letter-spacing:-.027em;margin:0 0 12px}#posty-action-dialog #posty-dialog-content>.intro{font-size:14px;line-height:1.6;color:#7d8383;margin:0 0 24px}#posty-action-dialog .feature{display:flex;gap:15px;align-items:flex-start;margin:23px 0}#posty-action-dialog .feature>.icon{background:var(--merchant-soft);color:var(--merchant);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:20px}#posty-action-dialog .feature h3{font-size:15px;font-weight:600;margin:0 0 6px}#posty-action-dialog .feature p{font-size:13px;line-height:1.6;color:#7a8383;margin:0}#posty-action-dialog .help-details{margin-top:24px;border-top:1px solid #e4e8e4;border-bottom:1px solid #e4e8e4;padding:16px 0;font-size:13px}#posty-action-dialog .help-details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between}#posty-action-dialog .help-details summary:after{content:'+';font-size:18px;color:var(--merchant)}#posty-action-dialog .help-details[open] summary:after{content:'−'}#posty-action-dialog .help-details p{line-height:1.7;color:#7d8583;margin:12px 0 0}#posty-action-dialog .dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}#posty-action-dialog .fine-print{font-size:10px;line-height:1.7;color:#959c98;margin:20px 0 0}#posty-action-dialog .dialog-order{display:flex;align-items:center;gap:12px;background:var(--paper);padding:14px;border:1px solid #eae5dc;border-radius:11px;margin-bottom:24px}#posty-action-dialog .dialog-order>img{width:40px;height:40px;border-radius:8px}#posty-action-dialog .dialog-order b{font-size:13px;display:block}#posty-action-dialog .dialog-order p{font-size:11px;color:#89908a;margin:5px 0 0}#posty-action-dialog .dialog-order .tag{font-size:10px;border:1px solid #d6e7d8;color:var(--merchant);border-radius:20px;padding:5px 9px;margin-left:auto;background:var(--merchant-soft)}#posty-action-dialog .ticket-form fieldset{padding:0;margin:0 0 20px;border:0}#posty-action-dialog .ticket-form legend,#posty-action-dialog .ticket-form>label{font:500 10px Plex,monospace;text-transform:uppercase;letter-spacing:.1em;color:#798278;margin-bottom:12px;display:block}#posty-action-dialog .ticket-form fieldset>label{display:flex;gap:10px;align-items:center;margin-top:9px;border:1px solid #dde4db;border-radius:8px;padding:12px 13px;font-size:13px;cursor:pointer}#posty-action-dialog .ticket-form fieldset>label:has(:checked){background:var(--merchant-soft);border-color:var(--merchant);color:var(--merchant)}#posty-action-dialog .ticket-form input{accent-color:var(--merchant)}#posty-action-dialog .ticket-form textarea{width:100%;height:80px;resize:vertical;border:1px solid #dce2d8;border-radius:8px;padding:12px;font-size:13px}#posty-action-dialog .ticket-form button[type=submit]{margin-top:19px}#posty-action-dialog .received{text-align:center;padding:10px 8px}#posty-action-dialog .received .stamp{margin-bottom:30px}#posty-action-dialog .received .intro{font-size:14px;line-height:1.6;color:#7a817c;max-width:400px;margin:12px auto 23px}#posty-action-dialog .ticket-facts{text-align:left;border-top:1px solid #e4e7de;border-bottom:1px solid #e4e7de;margin:24px 0}#posty-action-dialog .ticket-facts>div{display:flex;justify-content:space-between;gap:20px;padding:14px 5px;font-size:13px}#posty-action-dialog .ticket-facts>div+div{border-top:1px solid #edf0e9}#posty-action-dialog .ticket-facts span{color:#83907d}#posty-action-dialog .sample-frame{width:100%;height:590px;border:0;display:block}#posty-action-dialog .label-caption{font-size:12px;color:#7b847a;line-height:1.6;margin:0 0 10px}

@media(max-width:720px){#posty-action-dialog{padding:21px 20px;border-radius:19px;width:calc(100vw - 22px);max-height:calc(100svh - 24px)}#posty-action-dialog .dialog-top{margin-bottom:22px}#posty-action-dialog #posty-dialog-title{font-size:30px}#posty-action-dialog .dialog-order .tag{font-size:8px;padding:5px 6px}#posty-action-dialog .dialog-actions{gap:12px}#posty-action-dialog .dialog-actions .brand-button{font-size:12px}#posty-action-dialog .dialog-actions .text-button{font-size:11px}#posty-action-dialog .powered-by{font-size:10px}#posty-action-dialog .sample-frame{height:570px}}
#posty-action-dialog{--merchant:#24675E;--merchant-soft:#E8F2EF;--paper:#FAF6EF;--ink:#17191b;--line:#E3DFD6;font:400 16px/1.45 Systemia,Arial,sans-serif;isolation:isolate;margin:auto}
#posty-action-dialog *{box-sizing:border-box}#posty-action-dialog button,#posty-action-dialog input,#posty-action-dialog textarea{font-family:inherit}#posty-action-dialog button{cursor:pointer}#posty-action-dialog img{max-width:100%;display:block}
#posty-action-dialog .posty-lockup .word{filter:brightness(0)}#posty-action-dialog .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
#posty-action-dialog button:focus-visible,#posty-action-dialog input:focus-visible,#posty-action-dialog textarea:focus-visible{outline:3px solid #3F6ECA;outline-offset:4px}
.pf-ty{background:radial-gradient(ellipse at 15% 10%,#d8edf6,transparent 65%),#F4F6F8!important;pointer-events:auto!important}
.posty-confirmation-tour{position:absolute;left:50%;top:12px;border:0;display:block;transform-origin:top center;pointer-events:auto!important;max-width:none!important}
.pflow.s8{pointer-events:auto!important}.pflow.s8 .pf-cursor{display:none!important}

/* The label uses the same full-width ready screen as the asset bank. */
#posty-action-dialog[data-action="return-label"]{width:min(1060px,calc(100vw - 28px));height:min(950px,calc(100dvh - 40px));max-height:calc(100dvh - 40px);padding:0;border:0;border-radius:26px;overflow:hidden;background:#faf6ef}
#posty-action-dialog[data-action="return-label"] .dialog-top{position:absolute;top:12px;right:14px;z-index:2;margin:0;pointer-events:none}
#posty-action-dialog[data-action="return-label"] .powered-by{display:none}
#posty-action-dialog[data-action="return-label"] .dialog-close{pointer-events:auto;background:white;border:1px solid #ddd8ce;color:#252d35}
#posty-action-dialog[data-action="return-label"] #posty-dialog-content{height:100%}
#posty-action-dialog[data-action="return-label"] .sample-frame{height:100%!important}

@media(max-width:720px){#posty-action-dialog[data-action="return-label"] .dialog-top{top:4px;right:4px}#posty-action-dialog[data-action="return-label"] .dialog-close{width:30px;height:30px;font-size:22px}}

#posty-action-dialog .ticket-lookup>label{display:block;font:500 10px Plex,monospace;text-transform:uppercase;letter-spacing:.1em;color:#63786c;margin-bottom:10px}#posty-action-dialog .ticket-lookup input{display:block;width:100%;border:1px solid #cedbd1;border-radius:10px;padding:14px 15px;font:500 17px Plex,monospace;color:#213d30;background:#fafcf9}#posty-action-dialog .ticket-lookup input[aria-invalid=true]{border-color:#a64437}#posty-action-dialog #lookup-help{font-size:12px;color:#818b80;margin:9px 0 22px}#posty-action-dialog .lookup-error{font-size:12px;color:#a64437;margin:12px 0 20px}#posty-action-dialog .lookup-error[hidden]{display:none}#posty-action-dialog .status-stamp{color:#2f9a62}

/* Match the paper sheet and ruled fields in the supplied Posty ticket portal. */
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]){--paper:#FBF8F1;--line:rgba(12,12,12,.28);background:var(--paper);border-color:rgba(12,12,12,.12);color-scheme:light}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) #posty-dialog-title:focus{outline:none;box-shadow:none}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .dialog-close{background:#F3EFE6}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .dialog-order{background:transparent;border-color:rgba(12,12,12,.12)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-form fieldset>label{border-color:rgba(12,12,12,.12)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-form fieldset>label:has(:checked){border-color:var(--merchant)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-form textarea{height:96px;padding:0;border:0;border-radius:0;line-height:32px;background-color:transparent;background-image:repeating-linear-gradient(transparent 0 31px,var(--line) 31px 32px);background-attachment:local}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-form textarea:focus{background-image:repeating-linear-gradient(transparent 0 31px,var(--merchant) 31px 32px)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-lookup input{background:transparent;border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:10px 0 9px;color:var(--ink)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-lookup input[aria-invalid=true]{border-bottom-color:#a64437}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-facts{border-color:rgba(12,12,12,.12)}
#posty-action-dialog:is([data-action="ticket"],[data-action="check-ticket"]) .ticket-facts>div+div{border-color:rgba(12,12,12,.07)}

/* ── src/index.html:13768 · #posty-touchups-29sep ── */
/* ---- touch-ups, 29 Sep: one primary, quieter section heads, undated stamps ---- */
/* One primary (brand book): every Book a demo is the same button. Size stays with
   each placement so it still pairs with its secondary; the look is the book's. */
html body a.posty-primary, html body a.posty-primary:hover, html body .nav-pill a.posty-primary,
body.nav-over-paper .nav-pill a.posty-primary, body.nav-over-sky .nav-pill a.posty-primary{
  background:#A9D7F2 !important; background-image:none !important; color:#0C0C0C !important;
  border:1.5px solid #0C0C0C !important; border-radius:13px !important;
  box-shadow:3px 3px 0 #0C0C0C !important; min-height:44px; box-sizing:border-box;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-weight:600 !important; letter-spacing:-.005em !important; text-shadow:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important; }
html body a.posty-primary:hover{ filter:brightness(1.03) !important; transform:none !important; }
html body a.posty-primary:active{ transform:translate(2px,2px) !important; box-shadow:1px 1px 0 #0C0C0C !important; }
html body a.posty-primary:focus-visible{ outline:3px solid #3F6ECA !important; outline-offset:4px !important; }
html body a.posty-primary::before, html body a.posty-primary::after{ display:none !important; }
/* on ink grounds the ink edge disappears, so the shadow steps to cream there */
#pricing a.posty-primary, #pricing a.posty-primary:hover{ border-color:#A9D7F2 !important; box-shadow:none !important; }
#pricing a.posty-primary:active{ box-shadow:none !important; transform:translate(1px,1px) !important; }

/* Secondary in the Posty style too (Frank, 30 Sep): same shape, border, shadow and press as the
   primary, white fill; the arrow becomes the brand's divider chip, like "Spend it | →". */
html body a.posty-secondary, html body a.posty-secondary:hover{
  background:#FFFFFF !important; background-image:none !important; color:#0C0C0C !important;
  border:1.5px solid #0C0C0C !important; border-radius:13px !important;
  box-shadow:3px 3px 0 #0C0C0C !important; min-height:44px; box-sizing:border-box;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-weight:600 !important; letter-spacing:-.005em !important; text-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; filter:none !important;
  transition:transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important; }
html body a.posty-secondary:hover{ background:#FAF6EF !important; transform:none !important; }
html body a.posty-secondary:active{ transform:translate(2px,2px) !important; box-shadow:1px 1px 0 #0C0C0C !important; }
html body a.posty-secondary:focus-visible{ outline:3px solid #3F6ECA !important; outline-offset:4px !important; }
html body a.posty-secondary::before, html body a.posty-secondary::after{ display:none !important; }
html body a.posty-secondary .arrow{ background:transparent !important; color:#0C0C0C !important; box-shadow:none !important;
  width:auto !important; height:20px !important; min-width:0 !important; border-radius:0 !important;
  border-left:1px solid rgba(12,12,12,.25); padding:0 0 0 14px !important; margin-left:14px !important;
  display:inline-flex !important; align-items:center; font-size:18px !important; line-height:1; transform:none; }
html body a.posty-secondary .arrow::before, html body a.posty-secondary .arrow::after{ display:none !important; }
html body a.posty-secondary .arrow{ font-size:0 !important; color:transparent !important; width:40px !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7h21M16 1.5 22 7l-6 5.5' fill='none' stroke='%230C0C0C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 24px 14px no-repeat !important; }
html body #hero .hero-cta a.posty-secondary, html body .cta-final a.posty-secondary{ color:#0C0C0C !important; }
/* on the sky the hero pair shares the softer offset, so black and white read as one set */
html body #hero a.posty-secondary{ box-shadow:3px 3px 0 rgba(12,12,12,.28) !important; }
html body #hero a.posty-secondary:active{ box-shadow:1px 1px 0 rgba(12,12,12,.28) !important; }

/* Hero primary (Frank, 29 Sep): ink to match the headline, same shape and press as
   every primary; the hard shadow is a translucent ink so the offset reads on the sky. */
html body #hero a.posty-primary, html body #hero a.posty-primary:hover{
  background:#0C0C0C !important; color:#FAF6EF !important; border-color:#0C0C0C !important;
  box-shadow:3px 3px 0 rgba(12,12,12,.28) !important; }
html body #hero a.posty-primary:hover{ background:#1C1C1E !important; filter:none !important; }
html body #hero a.posty-primary:active{ box-shadow:1px 1px 0 rgba(12,12,12,.28) !important; }

/* Two big lines only (hero + postcard). The middle heads step down to section scale. */
.sec-eye{ display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace) !important; font-size:12px; font-weight:500;
  letter-spacing:.04em; text-transform:none; color:rgba(12,12,12,.72); }
.sec-eye .dot{ width:7px; height:7px; border-radius:50%; background:#3F6ECA; }
.journey-head h2{ font-size:clamp(26px,2.6vw,38px) !important; line-height:1.12 !important; }
.tour-head .sec-eye{ margin:0 0 8px; }
.tour-head h2{ font-size:clamp(24px,2.5vw,36px) !important; margin-bottom:10px !important; }
@media (max-width:760px){ .tour-head h2{ font-size:clamp(22px,6.4vw,30px) !important; } .tour-head .sec-eye{ font-size:11px; } }

.journey-head h2 .soft, .tour-head h2 .soft{ white-space:nowrap; }
/* Reduce motion: the hero no longer pins under the journey, so the journey's
   transparent top would show the ink body. Let its sky run from the top edge. */
@media (prefers-reduced-motion:reduce){
  section.journey.cascade::before{ -webkit-mask-image:none !important; mask-image:none !important; } }
/* Desktop pacing (Frank, 29 Sep): less scroll where the screen holds still.
   Tour: the last screen seats at 5.05 viewports; the pin now lets go ~0.55vh later, not ~1.2.
   Pricing: same three holds, same snaps, over 2 viewports of travel instead of 3.2.
   Statement: the finished line still holds, a little less long. */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .tour-track{ height:660svh !important; }
  .bn2{ height:300svh !important; }
  .stmt-hold{ height:40svh !important; }
}
/* One sky into the hills (Frank, 30 Sep). The closer no longer lifts off a pinned footer
   like a card: that uncovered the footer's dark grass first and read as a black lane. The
   footer now sits in the page right under the closer; the closer ends on #BDA1C0 and the
   footer's first rows are that same colour, fading into the hills, so the dusk runs straight
   down with no edge, no corners and nothing to open. */
footer.footer-deep{ position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; }
#reveal{ margin-bottom:0 !important; }
.cta-final, .pin-close > .cta-final{ border-radius:44px 44px 0 0 !important; }
@media (max-width:760px){ .cta-final, .pin-close > .cta-final{ border-radius:26px 26px 0 0 !important; } }
#cta-final{ --cta-r:0px !important; }
footer.footer-deep{ margin-top:-1px; }   /* no sub-pixel seam between the two */
footer.footer-deep::before{ height:280px !important;
  background:linear-gradient(180deg, #BDA1C0 0px, #BDA1C0 60px, rgba(189,161,192,.62) 150px, rgba(189,161,192,0) 280px) !important; }
body:has(footer.footer-deep.revealed) section.stmt.is-ink{ -webkit-mask-image:none !important; mask-image:none !important; }
/* Phone postcard (Frank, 30 Sep, rev 4): original envelope size; one stamp, "One stamp,
   everything after", stuck INSIDE the card just right of the headline, tilted right. On narrow
   phones "Post-purchase," fills its line, so the stamp sits beside the short "sorted." line. */
@media (max-width:760px){
  .cta-final .postcard{ position:relative; }
  .cta-final .postcard .pc-addr{ display:block !important; position:absolute !important; inset:0 !important;
    min-height:0 !important; margin:0 !important; pointer-events:none; z-index:3; order:0; }
  .cta-final .postcard .pc-to, .cta-final .postcard .pc-postmark, .cta-final .postcard .pc-rule,
  .cta-final .postcard .pc-s:not(.hero){ display:none !important; }
  .cta-final .postcard .pc-stamps{ position:absolute !important; inset:auto !important;
    top:79px !important; right:58px !important; left:auto !important; width:44px !important; height:60px !important; }
  .cta-final .postcard .pc-s.hero{ --w:44px; --r:13deg; right:0 !important; top:0 !important; left:auto !important;
    bottom:auto !important; padding:0 !important; height:auto !important; margin:0 !important; }
}
@media (max-width:359px){
  .cta-final .postcard .pc-stamps{ top:71px !important; right:44px !important; width:40px !important; }
  .cta-final .postcard .pc-s.hero{ --w:40px; }
}
@media (min-width:470px) and (max-width:760px){
  .cta-final .postcard .pc-stamps{ top:34px !important; right:auto !important; left:332px !important; width:48px !important; }
  .cta-final .postcard .pc-s.hero{ --w:48px; }
}
/* Phone nav (Frank, 30 Sep): the same tab as desktop, hanging from the top edge with its curved
   flares into the page, instead of a bar floating 19px down. */
@media (max-width:760px){
  .nav{ padding-top:0 !important; }
  .nav-inner{ margin:0 18px !important; border-radius:0 0 18px 18px !important; }
  .nav-pill{ top:62px !important; }
}
/* Timeline lapse labels: mixed-case chrome, per the book */
.vj-lapse span{ text-transform:none !important; letter-spacing:.02em !important; }

/* ── src/index.html:13894 · #posty-closing-stamp ── */
/* ===== Closing stamp (Frank, 30 Sep): the taped Posty stamp drops onto the existing dusk sky.
   Art is one transparent image per layout (landscape desktop, portrait phone); every word and
   button is live and sized in container units, so the layout scales with the stamp itself. ===== */
.pstamp-stage{ display:flex; justify-content:center; width:100%; }
.pstamp{ position:relative; container-type:inline-size; width:min(1200px, 92vw, calc((100svh - 118px) / .5502));
  aspect-ratio:2408 / 1325; color:#0C0C0C; }
.pstamp-art, .pstamp-art img{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; user-select:none; }
.pstamp-art img{ object-fit:contain; filter:drop-shadow(0 18px 30px rgba(20,24,70,.28)); }
.pstamp-body{ position:absolute; left:8.2%; top:13.5%; width:52%; bottom:10%; display:flex; flex-direction:column; align-items:flex-start; }
.pstamp-tag{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:1.02cqw; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#3F6ECA; border:.13cqw solid #3F6ECA; border-radius:.4cqw; padding:.55cqw 1.1cqw; transform:rotate(-2deg); }
.pstamp h2{ margin:2.3cqw 0 0 !important; font-size:5.5cqw !important; line-height:.98 !important; letter-spacing:-.035em !important; color:#0C0C0C; font-weight:800; }
.pstamp h2 .accent{ color:#3F6ECA !important; }
.pstamp p{ margin:1.7cqw 0 0; font-size:max(12.5px, 1.45cqw); line-height:1.5; color:rgba(12,12,12,.72); max-width:34em; }
.pstamp .actions{ display:flex; gap:1.3cqw; margin-top:2.2cqw; flex-wrap:wrap; }
html body .pstamp a.posty-primary, html body .pstamp a.posty-secondary{ font-size:clamp(13px,1.3cqw,16px) !important;
  padding:0 clamp(18px,2cqw,28px) !important; min-height:clamp(44px,3.9cqw,54px) !important; height:auto !important; }
.pstamp-from{ margin-top:auto; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.95cqw; letter-spacing:.22em; text-transform:uppercase; color:rgba(12,12,12,.5); }
.pstamp-note{ position:absolute; left:52%; top:12.5%; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:1.05cqw; line-height:1.4;
  color:#3F6ECA; transform:rotate(-5deg); text-align:right; }
.pstamp-to{ position:absolute; left:101.5%; width:58.7%; top:68.6%; font-size:max(11px, 1.2cqw); }
.pstamp-lbl{ display:block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9cqw; letter-spacing:.3em; text-transform:uppercase; color:rgba(12,12,12,.5); margin-bottom:.4cqw; }
.pstamp-to ul{ list-style:none; margin:0; padding:0; }
.pstamp-to li{ padding:.55cqw 0 .45cqw; border-bottom:.1cqw solid rgba(63,110,202,.45); color:rgba(12,12,12,.78); white-space:nowrap; }
/* phone: the portrait stamp, one column above Posty */
@media (max-width:760px), (max-width:1100px) and (orientation:portrait){
  .pstamp{ width:min(92vw, 440px); aspect-ratio:1389 / 2574; }
  .pstamp-body{ left:10.5%; right:10.5%; width:auto; top:8.5%; bottom:auto; }
  .pstamp-tag{ font-size:2.9cqw; border-width:.4cqw; border-radius:1cqw; padding:1.4cqw 2.6cqw; }
  .pstamp h2{ margin-top:5cqw !important; font-size:9.6cqw !important; }
  .pstamp p{ margin-top:3.6cqw; font-size:4.1cqw; }
  .pstamp .actions{ flex-direction:column; align-items:stretch; width:100%; gap:3cqw; margin-top:5cqw; }
  html body .pstamp a.posty-primary, html body .pstamp a.posty-secondary{ font-size:clamp(14px,4.2cqw,17px) !important; min-height:clamp(44px,12cqw,52px) !important; width:100%; }
  .pstamp-from{ margin-top:4cqw; font-size:max(9px, 2.6cqw); }
  .pstamp-to{ position:static; width:60%; margin-top:4.5cqw; font-size:max(10.5px, 3.5cqw); }
  .pstamp-note{ display:none; }
  .pstamp-lbl{ font-size:2.6cqw; margin-bottom:1cqw; }
  .pstamp-to li{ padding:1.3cqw 0 1cqw; border-bottom-width:.3cqw; white-space:normal; line-height:1.3; }
}

/* the real Posty (CHEER pose, ground shadow removed), live SVG over the stamp */
.pstamp-posty{ position:absolute; left:67.2%; top:14.5%; width:21.5%; height:auto; pointer-events:none; }
@media (max-width:760px), (max-width:1100px) and (orientation:portrait){
  .pstamp-posty{ left:58.6%; top:63.5%; width:34.4%; }
}

/* tape: vector, crisp at any size, parcel orange from the book */
.ptape{ position:absolute; display:block; pointer-events:none; overflow:visible; filter:drop-shadow(0 1px 1.2px rgba(20,24,70,.28)); }
.ptape-top{ left:49.2%; top:6.2%; width:17.6cqw; height:5.9cqw; transform:translate(-50%,-50%) rotate(-2.1deg); }
.ptape-bot{ left:49.4%; top:93.6%; width:17.2cqw; height:6.1cqw; transform:translate(-50%,-50%) rotate(1.6deg); }
/* postmark replaces the From line, bottom left */
.pstamp-mark{ position:absolute; left:4.6%; bottom:12.6%; width:8.2cqw; height:auto; color:rgba(12,12,12,.8); transform:rotate(-7deg); overflow:visible; }
@media (max-width:760px), (max-width:1100px) and (orientation:portrait){
  .ptape-top{ left:49.3%; top:3.7%; width:34cqw; height:11.6cqw; transform:translate(-50%,-50%) rotate(-1deg); }
  .ptape-bot{ left:49.9%; top:96.5%; width:33.4cqw; height:11.8cqw; transform:translate(-50%,-50%) rotate(1.2deg); }
  .pstamp-mark{ display:none; }
}

/* ── src/index.html:13954 · #posty-tour-accent ── */
/* How it feels: second half of the headline in Ocean Deep, matching the hero and the closing stamp (Frank, 1 Oct) */
.tour .tour-head h2 .soft{ color:#3F6ECA !important; }