/* =============================================================
   friendly-proof , token layer + structural CSS

   The friendly family: cream canvas, teal primary, apricot
   secondary, Fraunces display, Plus Jakarta Sans body.

   What is this page's own: the receipt tape in the hero, the
   real ad gallery standing in the proof slot, numbered ledger
   rows for the four capability blocks, and a two panel agency
   comparison. No corpus counters anywhere.

   MOBILE FIRST. Every unprefixed rule is the phone layout and
   every heading, eyebrow, subhead and call to action is CENTRED
   at that width. min-width queries enhance upward and hand the
   composition back to the left at 900px.
   ============================================================= */

/* ---------- 1. tokens ---------------------------------------- */
:root{
  /* surfaces, every one at HSL lightness 88 or above */
  --canvas:#FFF9F2;        /* L 97.5 */
  --paper:#FFFFFF;         /* L 100  */
  --warm:#FDF1E3;          /* L 94.1 */
  --warm-2:#FBE9D6;        /* L 91.6 */
  --teal-wash:#E4F5F6;     /* L 93.3 */
  --teal-wash-2:#D8EEF0;   /* L 89.6 */
  --apricot-wash:#FFEFD9;  /* L 92.5 */
  --blush:#FDE7E0;         /* L 93.5 */

  /* ink and accent */
  --ink:#1F2E2C;
  --ink-2:#4B5D5A;
  --ink-3:#758783;
  --teal:#00E8F7;
  --teal-deep:#00717A;
  --teal-soft:#87CED4;
  --apricot:#FFB25C;
  --apricot-deep:#D9832A;

  /* lines */
  --line:#EFE0CD;
  --line-2:#E4D2BB;
  --line-teal:#BBE0E3;

  /* type */
  --display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --kanji:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-xs:0.8125rem;
  --f-sm:0.9375rem;
  --f-base:1.0625rem;
  --f-lg:1.1875rem;
  --f-xl:1.375rem;
  --f-2xl:1.625rem;
  --f-3xl:2rem;

  /* space, a deliberately uneven ladder */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px;
  --s5:22px; --s6:30px;  --s7:40px; --s8:54px;
  --s9:72px; --s10:92px; --s11:118px;

  /* radii */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:34px; --r-pill:999px;

  /* shadows, warm not grey */
  --sh-1:0 1px 2px rgba(120,84,42,.05), 0 5px 14px rgba(120,84,42,.06);
  --sh-2:0 2px 4px rgba(120,84,42,.06), 0 14px 32px rgba(120,84,42,.09);
  --sh-3:0 3px 7px rgba(120,84,42,.07), 0 28px 62px rgba(120,84,42,.13);
  --sh-seal:0 2px 0 rgba(0,113,122,.28);

  /* motion curves, never freehanded */
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-expo:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --ease-circ:cubic-bezier(.075,.82,.165,1);
  --ease-quart:cubic-bezier(.165,.84,.44,1);

  --wrap:1180px;
  --gut:16px;              /* the page gutter, mirrored by the rail */
  --shot:300px;            /* gallery card height */
}
@media (min-width:640px){:root{--gut:30px;--shot:344px}}
@media (min-width:1024px){:root{--gut:40px;--shot:392px}}
@media (min-width:1180px){:root{--shot:428px}}

/* nav tokens, re-themed by the scroll sentinel (Notion technique) */
@property --nav-bg{syntax:"<color>";inherits:true;initial-value:rgba(255,249,242,.72)}
@property --nav-line{syntax:"<color>";inherits:true;initial-value:rgba(239,224,205,0)}
@property --nav-shadow{syntax:"<color>";inherits:true;initial-value:rgba(120,84,42,0)}

/* ---------- 2. base ------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--f-base);
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  padding-bottom:80px;              /* room for the sticky buy bar */
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{
  font-family:var(--display);
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 96;
  font-weight:600;
  line-height:1.09;
  letter-spacing:-0.012em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- 3. the reveal contract ---------------------------
   /dp/dp.js adds .in. This page registers no reveal observer. */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in{opacity:1;transform:none}

/* @magicui/blur-fade, ported: 6px blur, 6px offset, .4s ease out */
.bfade{
  opacity:0;
  filter:blur(6px);
  transform:translateY(6px);
  transition:opacity .4s var(--ease-out), filter .4s var(--ease-out), transform .4s var(--ease-out);
  transition-delay:calc(40ms + var(--i,0) * 70ms);
}
.reveal.in .bfade{opacity:1;filter:blur(0);transform:none}

/* ---------- 4. CENTRED ON THE PHONE --------------------------
   Base layout centres every heading, eyebrow, subhead and call
   to action. The composition returns to the left at 900px,
   where the page becomes two columns.                          */
.sec-head,.hero-copy{text-align:center}
.sec-head p,.hero-sub,.lede{margin-inline:auto}
.lede{max-width:34ch}
.lede--wide{max-width:46ch}
.cta-row{display:flex;flex-direction:column;gap:var(--s3);align-items:center;justify-content:center}
.cta-row .btn{width:100%;max-width:22rem;margin-inline:auto}
.cta-note{text-align:center;font-size:var(--f-xs);color:var(--ink-3);margin-top:var(--s4)}

@media (min-width:900px){
  .sec-head,.hero-copy{text-align:left}
  .sec-head p,.hero-sub,.lede{margin-inline:0}
  .lede{max-width:38ch}
  .lede--wide{max-width:52ch}
  .cta-row{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
  .cta-row .btn{width:auto;max-width:none;margin-inline:0}
  .cta-note{text-align:left}
}
/* the two blocks that stay optically centred at every width */
.sec-head.is-centred,.cta-row.is-centred,.cta-note.is-centred{text-align:center}
.sec-head.is-centred p,.sec-head.is-centred .lede{margin-inline:auto}
.cta-row.is-centred{justify-content:center}

/* ---------- 5. small delight: spring overshoot ----------------
   The back curve only ever touches objects under about 48px.  */
.pill{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:5px 13px 5px 10px;
  border-radius:var(--r-pill);
  background:var(--paper);
  border:1px solid var(--line);
  font-size:var(--f-xs);
  font-weight:600;
  color:var(--ink-2);
  box-shadow:var(--sh-1);
  opacity:0;
  transform:scale(.88);
  transition:transform .3s var(--ease-back), opacity .18s;
}
.reveal.in .pill{transform:none;opacity:1}
.pill--teal{background:var(--teal-wash);border-color:var(--line-teal);color:var(--teal-deep)}
.pill--apricot{background:var(--apricot-wash);border-color:#F6D9AE;color:var(--apricot-deep)}
.pill-dot{
  width:9px;height:9px;flex:0 0 9px;border-radius:var(--r-pill);
  background:var(--teal);opacity:0;transform:scale(.4);
  transition:opacity .22s, transform .38s cubic-bezier(.34,1.56,.64,1), height .45s cubic-bezier(.34,1.56,.64,1);
}
.reveal.in .pill-dot{opacity:1;transform:none}
.pill-dot--apricot{background:var(--apricot)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--f-xs);font-weight:700;color:var(--teal-deep);
  margin-bottom:var(--s3);
}

/* ---------- 6. ambient float, desynchronised ------------------ */
@keyframes bob{50%{transform:translateY(-5px)}}
.float{animation:bob var(--dur,4s) ease-in-out infinite;animation-play-state:paused}
.reveal.in .float{animation-play-state:running}

/* ---------- 7. cutout props: fly in, rotate, then drift ------- */
@keyframes drift{50%{translate:-2% -4%;rotate:2deg}}
.prop{
  display:block;
  translate:var(--enter-t,-24% 12%);
  rotate:var(--enter-r,-15deg);
  opacity:0;
  transition:translate .6s var(--ease-expo), rotate .6s var(--ease-expo), opacity .46s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
  transform-origin:50% 60%;
}
.reveal.in .prop{translate:0 0;rotate:var(--settle,-6deg);opacity:1}
.prop > img,.prop > svg{animation:drift var(--drift,5.2s) ease-in-out infinite;animation-play-state:paused}
.reveal.in .prop > img,.reveal.in .prop > svg{animation-play-state:running}

/* ---------- 8. buttons: two-icon slide swap ------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  min-height:52px;min-width:44px;padding:13px 24px;
  border-radius:var(--r-pill);
  font-family:var(--body);font-size:var(--f-base);font-weight:700;
  letter-spacing:-0.005em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .3s var(--ease-circ), box-shadow .3s var(--ease-circ), transform .3s var(--ease-circ), border-color .3s var(--ease-circ);
}
.btn--primary{background:var(--teal);color:#FFFFFF;box-shadow:0 2px 0 var(--teal-deep), var(--sh-2)}
.btn--primary:hover{background:var(--teal-deep);transform:translateY(-2px);box-shadow:0 4px 0 #005C64, var(--sh-3)}
.btn--primary:active{transform:translateY(1px);box-shadow:0 1px 0 var(--teal-deep)}
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2);box-shadow:var(--sh-1)}
.btn--ghost:hover{background:var(--warm);border-color:var(--apricot);transform:translateY(-2px)}
.btn--small{min-height:46px;padding:10px 15px;font-size:.875rem;gap:var(--s2)}
@media (min-width:420px){.btn--small{padding:10px 18px;font-size:var(--f-sm)}}
.btn-extra{display:none}
@media (min-width:560px){.btn-extra{display:inline}}
.btn > span:first-child{text-wrap:balance}
.ico-slot{position:relative;overflow:hidden;width:1em;height:1em;flex:0 0 1em;display:block}
.ico{position:absolute;inset:0;width:1em;height:1em;transition:transform .4s var(--ease-quart)}
.ico--ghost{transform:translateX(-140%)}
.btn:hover .ico--real{transform:translateX(140%)}
.btn:hover .ico--ghost{transform:translateX(0)}

/* ---------- 9. header: Murasaki lockup + the product ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-line);
  box-shadow:0 12px 30px -22px var(--nav-shadow);
  backdrop-filter:saturate(1.3) blur(9px);
  -webkit-backdrop-filter:saturate(1.3) blur(9px);
}
.nav-in{display:flex;align-items:center;gap:var(--s3);justify-content:space-between;min-height:62px;padding-block:9px}
.nav-id{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.brand{
  display:flex;align-items:center;gap:.4em;
  color:var(--ink);font-weight:700;font-size:16px;
  text-decoration:none;min-width:0;
}
.brand .k{font-family:var(--kanji);font-size:1.5em;font-weight:700;color:#00E8F7;line-height:1}
.brand .wordmark{font-weight:700;letter-spacing:-.015em}
.brand .tld{color:#00E8F7}
@media (min-width:560px){.brand{font-size:18px}}
.nav-div{display:none}
.nav-product{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 20;
  font-weight:600;font-size:11.5px;line-height:1.24;letter-spacing:-0.004em;
  color:var(--ink-2);text-decoration:none;min-width:0;
}
@media (min-width:560px){
  .nav-id{flex-direction:row;align-items:center;gap:var(--s3)}
  .nav-div{display:block;width:1px;height:19px;background:var(--line-2);flex:0 0 1px}
  .nav-product{font-size:var(--f-sm);white-space:nowrap}
}
.nav-tap{display:flex;align-items:center;min-height:44px}

.scrollSentinel{block-size:1px;margin-block-end:-1px;pointer-events:none}
@keyframes navTokens{
  0%  {--nav-bg:rgba(255,249,242,.72);--nav-line:rgba(239,224,205,0);--nav-shadow:rgba(120,84,42,0)}
  100%{--nav-bg:rgba(255,249,242,.96);--nav-line:rgba(239,224,205,1);--nav-shadow:rgba(120,84,42,.5)}
}
@supports (animation-timeline:scroll()){
  .scrollSentinel{view-timeline-name:--nav-stuck;view-timeline-axis:block;view-timeline-inset:0}
  body:has(.scrollSentinel){timeline-scope:--nav-stuck}
  .nav{animation-name:navTokens;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--nav-stuck}
}

/* ---------- 10. section shells -------------------------------- */
.sec{position:relative}
.sec--hero{padding-block:var(--s6) var(--s7);overflow-x:clip}
.sec--ribbon{background:var(--teal-wash);border-block:1px solid var(--line-teal);padding-block:var(--s4)}
.sec--gallery{padding-block:var(--s8) var(--s7);overflow-x:clip}
.sec--work{background:var(--warm);padding-block:var(--s8) var(--s9)}
.sec--caps{padding-block:var(--s9) var(--s8);overflow-x:clip}
.sec--agents{background:var(--teal-wash);padding-block:var(--s8) var(--s9)}
.sec--agency{background:var(--apricot-wash);padding-block:var(--s8) var(--s9)}
.sec--inside{padding-block:var(--s9) var(--s8)}
.sec--card{padding-block:var(--s8) var(--s9);background:var(--warm)}
.sec--faq{padding-block:var(--s9) var(--s8)}
.sec--close{background:var(--teal-wash);padding-block:var(--s8)}
@media (min-width:900px){
  .sec--hero{padding-block:var(--s7) var(--s9)}
  .sec--gallery{padding-block:var(--s10) var(--s8)}
  .sec--work{padding-block:var(--s10) var(--s11)}
  .sec--caps{padding-block:var(--s11) var(--s9)}
  .sec--agents{padding-block:var(--s10) var(--s10)}
  .sec--agency{padding-block:var(--s10) var(--s11)}
  .sec--inside{padding-block:var(--s10) var(--s9)}
  .sec--card{padding-block:var(--s10) var(--s11)}
  .sec--faq{padding-block:var(--s11) var(--s9)}
  .sec--close{padding-block:var(--s9)}
}
.sec-head{max-width:38rem;min-width:0}
.sec-head h2{font-size:var(--f-3xl);margin-bottom:var(--s3)}
.sec-head p{color:var(--ink-2);font-size:var(--f-lg)}
@media (min-width:900px){.sec-head h2{font-size:2.65rem}}
.sec-head.is-centred{margin-inline:auto}

/* ---------- 11. hero ------------------------------------------ */
.hero-grid{display:grid;gap:var(--s7);align-items:start}
@media (min-width:960px){.hero-grid{grid-template-columns:5fr 7fr;gap:var(--s8);align-items:center}}
.hero-copy{min-width:0}
.hero-h1{font-size:clamp(1.85rem,8.4vw,2.6rem);letter-spacing:-0.022em;margin-block:var(--s4) var(--s5)}
@media (min-width:640px){.hero-h1{font-size:2.9rem}}
@media (min-width:960px){.hero-h1{font-size:3.05rem}}
@media (min-width:1180px){.hero-h1{font-size:3.4rem}}
.h1-lockup{
  display:block;font-family:var(--body);font-weight:800;
  font-size:var(--f-sm);letter-spacing:0.005em;line-height:1.3;
  color:var(--teal-deep);margin-bottom:var(--s3);
}
.uline{position:relative;display:inline-block;white-space:nowrap}
.uline svg{position:absolute;left:-2%;right:-2%;bottom:-.22em;width:104%;height:.32em;overflow:visible}
.uline path{
  fill:none;stroke:var(--apricot);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:520;stroke-dashoffset:520;
  transition:stroke-dashoffset 1.05s var(--ease-expo);
  transition-delay:calc(340ms + var(--i,0) * 70ms);
}
.reveal.in .uline path{stroke-dashoffset:0}
.hero-sub{font-size:var(--f-lg);color:var(--ink-2);min-width:0}
.hero-cta{margin-top:var(--s6)}
.hero-kicker{
  margin-top:var(--s5);font-size:var(--f-sm);font-weight:700;color:var(--ink-2);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:center;
}
.hero-kicker span{display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
@media (min-width:900px){.hero-kicker{justify-content:flex-start}}

/* the receipt tape, this page's signature object */
.tape-wrap{position:relative;min-width:0;filter:drop-shadow(0 4px 6px rgba(120,84,42,.07)) drop-shadow(0 22px 40px rgba(120,84,42,.11))}
.tape{
  --r:9px;
  position:relative;background:var(--paper);
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding:var(--s5) var(--s5) calc(var(--s5) + var(--r));
  min-width:0;
  -webkit-mask:
    radial-gradient(var(--r) at 50% 0,#0000 98%,#000 101%) 50% 100%/calc(2*var(--r)) var(--r) repeat-x,
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--r)) no-repeat;
  mask:
    radial-gradient(var(--r) at 50% 0,#0000 98%,#000 101%) 50% 100%/calc(2*var(--r)) var(--r) repeat-x,
    linear-gradient(#000 0 0) 0 0/100% calc(100% - var(--r)) no-repeat;
}
@media (min-width:520px){.tape{padding:var(--s6) var(--s6) calc(var(--s6) + var(--r))}}
.tape-top{display:flex;flex-direction:column-reverse;align-items:center;gap:var(--s3);min-width:0;text-align:center}
@media (min-width:900px){.tape-top{flex-direction:row;align-items:flex-start;justify-content:space-between;text-align:left}}
.tape-top h2{font-size:var(--f-xl);min-width:0}
.tape-label{font-size:11px;font-weight:800;color:var(--apricot-deep);background:var(--apricot-wash);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap;flex:0 0 auto}
.tape-sub{font-size:var(--f-xs);color:var(--ink-3);margin-top:var(--s2);text-align:center}
@media (min-width:900px){.tape-sub{text-align:left}}
/* Monzo dotted connector: a repeating radial gradient, both ends dissolved by a mask */
.rule{
  height:9px;margin:var(--s3) 0;
  background:radial-gradient(circle,var(--teal-soft) 2.5px,transparent 0);
  background-size:20px 9px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.rule--warm{background:radial-gradient(circle,var(--line-2) 2.5px,transparent 0);background-size:20px 9px}
.tape-row{display:flex;align-items:flex-start;gap:var(--s3);min-width:0;padding-block:var(--s2)}
.tape-n{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 30;
  font-weight:600;font-size:var(--f-sm);color:var(--teal-deep);
  flex:0 0 26px;width:26px;line-height:1.5;
}
.tape-t{min-width:0;font-size:var(--f-sm);color:var(--ink);line-height:1.45}
.tape-t small{display:block;font-size:var(--f-xs);color:var(--ink-3);line-height:1.4;margin-top:1px}
.tape-foot{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);justify-content:center}
@media (min-width:900px){.tape-foot{justify-content:flex-start}}
.verdict{
  font-size:var(--f-xs);font-weight:800;border-radius:var(--r-pill);
  padding:5px 12px;white-space:nowrap;
  opacity:0;transform:scale(.88);
  transition:transform .3s var(--ease-back), opacity .18s;
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in .verdict{opacity:1;transform:none}
.verdict--scale{background:var(--teal-wash);color:var(--teal-deep)}
.verdict--hold{background:var(--warm-2);color:var(--apricot-deep)}
.verdict--fix{background:var(--apricot-wash);color:var(--apricot-deep)}
.verdict--kill{background:var(--blush);color:#A84A22}
.tape-close{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);min-width:0;
}
.tape-close p{font-size:var(--f-xs);color:var(--ink-3);min-width:0}
.tape-close b{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40;
  font-weight:600;font-size:var(--f-xl);white-space:nowrap;
}
.tape-seal{
  position:absolute;top:-16px;right:24px;z-index:4;
  width:36px;height:36px;border-radius:50%;background:var(--teal);
  display:grid;place-items:center;color:#fff;box-shadow:var(--sh-seal);
}
.tape-stamp{display:none;position:absolute;left:-64px;bottom:16px;z-index:3;width:92px;color:var(--apricot-deep)}
@media (min-width:960px){.tape-stamp{display:block;left:-80px}}
@media (min-width:1180px){.tape-stamp{left:-94px;width:104px}}

/* ---------- 12. proof ribbon (@aceternity/infinite-moving-cards) */
.ribbon{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
@keyframes track{to{transform:translateX(-50%)}}
.ribbon-track{display:flex;width:max-content;animation:track 46s linear infinite}
.ribbon-half{display:flex;flex:0 0 auto}
.ribbon:hover .ribbon-track,.ribbon:focus-within .ribbon-track{animation-play-state:paused}
.chip{
  display:inline-flex;align-items:center;gap:var(--s2);margin-right:var(--s3);
  background:var(--paper);border:1px solid var(--line-teal);border-radius:var(--r-pill);
  padding:8px 16px;font-size:var(--f-sm);font-weight:600;color:var(--ink);white-space:nowrap;
  box-shadow:var(--sh-1);
}
.chip i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--teal);font-style:normal}
.chip:nth-child(even) i{background:var(--apricot)}
.ribbon-say{text-align:center;font-size:var(--f-xs);color:var(--teal-deep);font-weight:700;margin-bottom:var(--s3)}

/* ---------- 13. the gallery: three drifting rails ---------------- */
/* The gallery IS the proof, so it carries no labels, no captions and no chrome.
   Three rails drift in alternating directions and loop seamlessly, because the
   tile set is duplicated once and the scroll position wraps at exactly half the
   track. That reads as endless without loading anything more. */
.gal{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:var(--s7)}
/* The buy bar floats over the page on a phone and the gallery is the one block
   a reader stops on, so the rails carry the bar's own height as clearance below
   the last row. Above 768 the bar is gone and the clearance goes with it. */
/* minmax(0,1fr) is load bearing. A grid column defaults to max-content, so the
   rail sizes to the whole 5000px track and stops being a scroller entirely. */
@media (min-width:640px){.gal{gap:16px}}
.rail-wrap{position:relative;min-width:0}
.rail{
  overflow-x:auto;overflow-y:hidden;
  /* proximity rather than mandatory: a mandatory snap fights the continuous
     drift and lands as jitter on every single frame. A user flick still settles. */
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:var(--r-lg)}
.track{display:flex;gap:12px;width:max-content;padding:0 var(--gut)}
@media (min-width:640px){.track{gap:16px}}
:root{--gh:196px;--sticky-h:calc(100px + env(safe-area-inset-bottom,0px))}
@media (min-width:640px){:root{--gh:252px}}
@media (min-width:1024px){:root{--gh:268px}}
@media (min-width:1400px){:root{--gh:296px}}
.t{
  flex:0 0 auto;height:var(--gh);aspect-ratio:var(--ar,.8);
  width:auto;border-radius:var(--r-lg);object-fit:cover;display:block;
  background:var(--warm-2);box-shadow:var(--sh-2);
}

/* Snap targets exist only while a reader is actually holding a rail. Left on
   permanently, proximity snapping pins scrollLeft to the first tile and cancels
   the drift completely, because a 0.3px step never escapes the snap threshold.
   The rail keeps scroll-snap-type at all times, so a thumb flick still settles. */
.rail.is-held .t{scroll-snap-align:start}

/* nothing may summon a control layer over a tile */
video.t{pointer-events:none}
video.t::-webkit-media-controls{display:none !important}
video.t::-webkit-media-controls-enclosure{display:none !important}
video.t::-webkit-media-controls-start-playback-button{display:none !important}

.gal-foot{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:var(--s5)}
@media (min-width:900px){.gal-foot{flex-direction:row;justify-content:space-between}}
.gal-note{font-size:var(--f-xs);color:var(--ink-3);text-align:center;margin:0}
@media (min-width:900px){.gal-note{text-align:left}}
.arrow{
  width:46px;height:46px;flex:0 0 46px;min-width:46px;min-height:46px;
  /* flex:none plus an explicit min: a 44px control inside a tight flex row still
     shrinks to 43.6 and fails the tap-target floor while reporting "44" rounded */
  border-radius:50%;cursor:pointer;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
  display:grid;place-items:center;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease-back), background-color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.arrow:hover{transform:translateY(-2px);border-color:var(--teal);color:var(--teal-deep)}
.arrow:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.arrow svg{width:20px;height:20px}

.gal-nav{display:flex;gap:var(--s2);flex:none}

/* ---------- 14. the work behind it (@aceternity/card-spotlight) */
.work-lead{
  margin-top:var(--s7);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:var(--s6) var(--s5);box-shadow:var(--sh-2);min-width:0;
}
@media (min-width:640px){.work-lead{padding:var(--s7) var(--s6)}}
.work-claim{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;
  font-weight:500;font-size:var(--f-xl);line-height:1.3;text-align:center;
}
@media (min-width:900px){.work-claim{font-size:1.8rem;text-align:left}}
.work-three{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media (min-width:760px){.work-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}}
.work-three div{min-width:0;text-align:center}
@media (min-width:900px){.work-three div{text-align:left}}
.work-three b{display:block;font-size:var(--f-sm);font-weight:800;color:var(--teal-deep);margin-bottom:var(--s2)}
.work-three p{font-size:var(--f-xs);color:var(--ink-2);line-height:1.55}

.spots{display:grid;gap:var(--s4);margin-top:var(--s6)}
@media (min-width:700px){.spots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.spots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spot{
  position:relative;min-width:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2xl);
  padding:var(--s5);box-shadow:var(--sh-1);
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.spot::before,.spot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .3s var(--ease-out);
}
.spot::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),var(--apricot-wash),transparent 72%)}
.spot::after{
  background-image:radial-gradient(circle,var(--teal-soft) 1.4px,transparent 1.4px);
  background-size:11px 11px;
  -webkit-mask-image:radial-gradient(150px circle at var(--mx,50%) var(--my,0%),#000,transparent 75%);
  mask-image:radial-gradient(150px circle at var(--mx,50%) var(--my,0%),#000,transparent 75%);
}
.spot:hover,.spot:focus-within{border-color:var(--teal-soft);transform:translateY(-3px);box-shadow:var(--sh-2)}
.spot:hover::before,.spot:focus-within::before{opacity:1}
.spot:hover::after,.spot:focus-within::after{opacity:.85}
.spot > *{position:relative;z-index:1}
.spot-t{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--f-sm);color:var(--teal-deep);margin-bottom:var(--s3)}
.spot-d{font-size:var(--f-sm);color:var(--ink-2);line-height:1.55}

/* ---------- 15. capability ledger rows ------------------------ */
.caps{display:grid;gap:var(--s8);margin-top:var(--s8)}
@media (min-width:900px){.caps{gap:var(--s10);margin-top:var(--s9)}}
.cap{display:grid;gap:var(--s4);min-width:0}
@media (min-width:900px){.cap{grid-template-columns:96px minmax(0,1fr);gap:var(--s7);align-items:start}}
.cap-n{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 100;
  font-weight:600;font-size:2.6rem;line-height:.9;color:var(--teal-soft);
  text-align:center;
}
@media (min-width:900px){
  .cap-n{font-size:3.6rem;text-align:right;padding-top:.1em;position:sticky;top:96px}
}
.cap-body{min-width:0}
.cap-head{text-align:center}
@media (min-width:900px){.cap-head{text-align:left}}
.cap-head h3{font-size:var(--f-2xl);margin-bottom:var(--s3)}
@media (min-width:900px){.cap-head h3{font-size:2.15rem;max-width:20ch}}
.cap-panel{
  margin-top:var(--s5);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:var(--s5);box-shadow:var(--sh-1);min-width:0;
}
@media (min-width:640px){.cap-panel{padding:var(--s6)}}
.cap-panel > p{color:var(--ink-2);min-width:0}
.cap-points{display:grid;gap:0;margin:var(--s4) 0 0;padding:0;list-style:none}
.cap-points li{display:flex;gap:var(--s3);align-items:flex-start;min-width:0;font-size:var(--f-sm);color:var(--ink-2);padding-block:var(--s3)}
.cap-points li + li{border-top:1px dashed var(--line-2)}
.tick{flex:0 0 20px;width:20px;height:20px;margin-top:3px;color:var(--teal)}
.cap-fig{margin:var(--s5) 0 0;border-radius:var(--r-2xl);background:var(--warm);border:1px solid var(--line);padding:var(--s5);min-width:0;overflow:hidden}
.cap-fig img{width:100%;max-width:min(100%,420px);margin-inline:auto}
.cap-fig figcaption{margin-top:var(--s3);font-size:var(--f-xs);color:var(--ink-3);text-align:center}
.inline-link{color:var(--teal-deep);font-weight:700;padding-block:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--teal-soft)}
.inline-link:hover{text-decoration-color:var(--teal)}
.mid-cta{margin-top:var(--s8)}

/* ---------- 16. three agent index cards ----------------------- */
.agents{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:820px){.agents{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);margin-top:var(--s8)}}
.agent{
  position:relative;min-width:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.agent:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.agent::before{
  content:"";position:absolute;top:0;left:var(--s6);
  width:70px;height:8px;border-radius:0 0 var(--r-sm) var(--r-sm);background:var(--teal);
}
.agent:nth-child(2)::before{background:var(--apricot)}
.agent:nth-child(3)::before{background:var(--teal-soft)}
.agent-n{
  width:34px;height:34px;border-radius:50%;background:var(--teal-wash);
  color:var(--teal-deep);display:grid;place-items:center;
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 20;
  font-weight:600;font-size:var(--f-sm);margin-bottom:var(--s3);
}
.agent h3{font-size:var(--f-xl);margin-bottom:var(--s2)}
.agent-one{font-size:var(--f-sm);font-weight:700;color:var(--teal-deep);margin-bottom:var(--s3)}
.agent-what{font-size:var(--f-sm);color:var(--ink-2)}
.agents-foot{margin-top:var(--s6);text-align:center;font-size:var(--f-sm);font-weight:700;color:var(--ink-2)}
@media (min-width:900px){.agents-foot{text-align:left}}

/* ---------- 17. agency comparison, two panels ----------------- */
.vs{display:grid;gap:var(--s4);margin-top:var(--s7)}
@media (min-width:820px){.vs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);align-items:start}}
.panel{min-width:0;border-radius:var(--r-2xl);padding:var(--s5);border:1px solid #F6D9AE;background:var(--paper);box-shadow:var(--sh-1)}
@media (min-width:640px){.panel{padding:var(--s6)}}
.panel--ours{background:var(--teal-wash);border-color:var(--line-teal);box-shadow:var(--sh-2)}
.panel-h{display:flex;align-items:center;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--line);min-width:0}
.panel--ours .panel-h{border-bottom-color:var(--line-teal)}
.panel-h h3{font-size:var(--f-lg);min-width:0}
.panel-tag{font-size:11px;font-weight:800;border-radius:var(--r-pill);padding:4px 10px;background:var(--warm-2);color:var(--apricot-deep);white-space:nowrap;margin-left:auto;flex:0 0 auto}
.panel--ours .panel-tag{background:var(--teal);color:#fff}
.panel dl{margin:0}
.panel dt{font-size:11px;font-weight:800;color:var(--ink-3);margin-top:var(--s4)}
.panel dd{margin:2px 0 0;font-size:var(--f-sm);color:var(--ink-2);display:flex;gap:var(--s2);align-items:flex-start;min-width:0}
.panel--ours dd{color:var(--ink);font-weight:600}
.panel dd .mk{flex:0 0 19px;width:19px;height:19px;margin-top:3px;color:var(--ink-3)}
.panel--ours dd .mk{color:var(--teal)}

/* ---------- 18. what you get, dotted index -------------------- */
.index{display:grid;gap:0;margin-top:var(--s7);padding:0;list-style:none}
@media (min-width:760px){.index{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s7)}}
.index li{min-width:0;padding-block:var(--s4)}
.index li + li{border-top:1px dashed var(--line-2)}
@media (min-width:760px){.index li:nth-child(2){border-top:0}}
.ix-n{display:flex;align-items:center;gap:var(--s2);font-weight:800;font-size:var(--f-sm)}
.ix-n i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--teal);font-style:normal}
.index li:nth-child(even) .ix-n i{background:var(--apricot)}
.ix-d{display:block;font-size:var(--f-xs);color:var(--ink-2);line-height:1.55;margin-top:3px}

/* ---------- 19. the product card ------------------------------
   One offer block on the page. The header and the sticky bar send the
   reader here, and the button inside it is the only way to Stripe.
   Elevation is the page's warm shadow, the same one a physical card
   casts on cream. Mobile first: every query below is min-width. */
.anchor-alias{display:block;height:0;scroll-margin-top:92px}
.sec--card{scroll-margin-top:92px}

.offer{max-width:44rem;margin-inline:auto}
.offer-anchor{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;
  font-weight:500;font-size:var(--f-xl);line-height:1.3;text-align:center;color:var(--ink-2);
  max-width:30ch;margin-inline:auto;margin-top:var(--s4);
}
.offer-panel{
  margin-top:var(--s7);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:var(--s6) var(--s5);box-shadow:var(--sh-3);
  min-width:0;text-align:center;
}
@media (min-width:520px){.offer-panel{padding:var(--s8) var(--s7)}}
.offer-price{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;justify-content:center}
.offer-price .now{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:600;font-size:3.6rem;line-height:1;letter-spacing:-0.03em;
}
.offer-price .was{font-size:var(--f-lg);color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:2px}
.offer-line{font-size:var(--f-sm);color:var(--ink-2);margin-top:var(--s3);margin-bottom:var(--s6)}
.offer-panel .btn{width:100%;max-width:24rem;margin-inline:auto}
.offer-foot{margin-top:var(--s5);display:grid;gap:var(--s2);justify-items:start;max-width:30rem;margin-inline:auto}
.offer-foot p{font-size:var(--f-xs);color:var(--ink-3);display:flex;gap:var(--s2);align-items:flex-start;text-align:left;min-width:0}
.offer-foot .mk{flex:0 0 17px;width:17px;height:17px;margin-top:3px;color:var(--teal)}
/* the card itself */
.pcard{
  margin-top:var(--s7);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:var(--s6) var(--s5);box-shadow:var(--sh-3);
  min-width:0;text-align:center;
}
.pcard-top{min-width:0}
.pcard-kicker{
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--apricot-deep);background:var(--apricot-wash);border-radius:var(--r-pill);
  display:inline-block;padding:4px 12px;
}
.pcard-name{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;
  font-weight:600;font-size:var(--f-2xl);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);margin:var(--s3) 0 0;min-width:0;overflow-wrap:break-word;
}
.pcard-price{
  display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  justify-content:center;margin-top:var(--s4);
}
.pcard-price .now{
  font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-weight:600;font-size:3.4rem;line-height:1;letter-spacing:-.03em;color:var(--ink);
}
.pcard-price .once{font-size:var(--f-base);font-weight:700;color:var(--teal-deep)}
.pcard-sub{font-size:var(--f-sm);color:var(--ink-2);margin-top:var(--s2)}

/* the benefits */
.pcard-list{
  list-style:none;margin:var(--s6) 0 0;padding:0;
  display:grid;gap:var(--s3);text-align:left;
}
.pcard-list li{
  display:flex;gap:var(--s3);align-items:flex-start;min-width:0;
  font-size:var(--f-sm);color:var(--ink-2);line-height:1.5;
}
.pcard-list .mk{flex:0 0 18px;width:18px;height:18px;margin-top:2px;color:var(--teal)}
.pcard-list span{min-width:0;overflow-wrap:break-word}

/* works with */
.pcard-works{
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
  min-width:0;
}
.pcard-works-t{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.pcard-marks{
  list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3);
}
.pcard-marks li{
  display:flex;align-items:center;gap:var(--s2);min-width:0;
  background:var(--warm);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 16px;
}
.pcard-marks b{font-size:var(--f-sm);font-weight:700;color:var(--ink);white-space:nowrap}
.pcard-mark{flex:0 0 22px;width:22px;height:22px;color:var(--ink);display:block}
.pcard-mark svg{width:100%;height:100%;display:block}
.pcard-works-n{
  font-size:var(--f-sm);color:var(--ink-2);margin-top:var(--s4);
  max-width:42ch;margin-inline:auto;line-height:1.5;min-width:0;
}
.pcard-tm{font-size:11px;color:var(--ink-3);margin-top:var(--s3);line-height:1.45;min-width:0}

/* the one way out of this card */
.pcard .btn{width:100%;max-width:24rem;margin-top:var(--s6);margin-inline:auto}
.pcard-guard{
  margin-top:var(--s4);display:flex;gap:var(--s2);align-items:flex-start;
  justify-content:center;font-size:var(--f-xs);color:var(--ink-3);
  text-align:left;min-width:0;
}
.pcard-guard .mk{flex:0 0 17px;width:17px;height:17px;margin-top:2px;color:var(--teal)}
.pcard-guard span{min-width:0}

@media (min-width:520px){
  .pcard{padding:var(--s8) var(--s7)}
  .pcard-name{font-size:var(--f-3xl)}
  .pcard-price .now{font-size:4rem}
}
@media (min-width:720px){
  /* columns rather than a two track grid: a grid row is as tall as its
     tallest item, which leaves a ragged gap beside every short line.
     Column flow packs them and break-inside keeps a benefit whole. */
  .pcard-list{display:block;columns:2;column-gap:var(--s7);gap:0}
  .pcard-list li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--s4)}
  .pcard-list li:last-child{margin-bottom:0}
}

.reason{
  margin-top:var(--s6);background:var(--warm-2);border:1px solid var(--line-2);
  border-radius:var(--r-xl);padding:var(--s5);font-size:var(--f-sm);color:var(--ink-2);
}

/* ---------- 20. faq (@shadcn/accordion) ----------------------- */
.acc{margin-top:var(--s7);max-width:52rem;margin-inline:auto}
.acc-item{border-bottom:1px solid var(--line-2)}
.acc-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:56px;padding:var(--s4) 0;background:none;border:0;cursor:pointer;
  text-align:left;font-weight:700;font-size:var(--f-base);color:var(--ink);
  transition:color .2s var(--ease-out);
}
.acc-trigger:hover{color:var(--teal-deep)}
.acc-trigger .chev{flex:0 0 22px;width:22px;height:22px;color:var(--teal);transition:transform .24s var(--ease-out)}
.acc-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease-expo)}
.acc-trigger[aria-expanded="true"] + .acc-panel{grid-template-rows:1fr}
.acc-panel > div{overflow:hidden;min-width:0}
.acc-panel p{padding-bottom:var(--s5);color:var(--ink-2);font-size:var(--f-sm);max-width:46rem}

/* ---------- 21. close and footer ------------------------------ */
.close-in{display:grid;gap:var(--s6);align-items:center;justify-items:center;text-align:center}
@media (min-width:900px){.close-in{grid-template-columns:1fr auto;gap:var(--s7);justify-items:start;text-align:left}}
.close-in h2{font-size:var(--f-3xl);max-width:20ch;min-width:0}
@media (min-width:900px){.close-in h2{font-size:2.5rem}}
.close-side{min-width:0;display:flex;flex-direction:column;gap:var(--s3);align-items:center;width:100%}
@media (min-width:900px){.close-side{align-items:flex-start;width:auto}}
.foot{background:var(--warm);border-top:1px solid var(--line-2)}
.foot-in{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;padding-block:var(--s6)}
.foot p{font-size:var(--f-xs);color:var(--ink-3);min-width:0;max-width:54ch}
.foot-brand{display:grid;gap:var(--s2);min-width:0}
.foot-brand .brand{font-size:17px}

/* ---------- 22. sticky mobile buy bar ------------------------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(255,249,242,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line-2);
  box-shadow:0 -10px 30px -20px rgba(120,84,42,.6);
  padding:9px var(--gut) calc(9px + env(safe-area-inset-bottom,0px));
}
.stickybar-in{display:flex;align-items:center;gap:var(--s3);max-width:var(--wrap);margin-inline:auto;min-width:0}
.stickybar-p{min-width:0;flex:1 1 auto}
.stickybar-p b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40;font-weight:600;font-size:var(--f-lg);line-height:1.05}
.stickybar-p span{display:none;font-size:11px;color:var(--ink-3);line-height:1.3}
@media (min-width:360px){.stickybar-p span{display:block}}
.stickybar .btn{flex:0 0 auto;padding:10px 15px;font-size:.9375rem}
@media (min-width:400px){.stickybar .btn{padding:10px 18px}}
@media (min-width:768px){
  .stickybar{display:none}
  body{padding-bottom:0}
  .gal{padding-bottom:0}
}

/* ---------- 23. reduced motion -------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.bfade{opacity:1;transform:none;filter:none;transition:none}
  .pill,.pill-dot,.verdict{transition:none;transform:none;opacity:1}
  .float{animation:none;transform:none}
  .prop{translate:0 0;rotate:-6deg;transition:none;opacity:1}
  .prop > img,.prop > svg{animation:none}
  .btn .ico{transition:none}
  .btn .ico--ghost{display:none}
  .btn:hover .ico--real{transform:none}
  .uline path{stroke-dashoffset:0;transition:none}
  .ribbon-track{animation:none}
  .ribbon{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .acc-panel{transition:none}
  .spot,.spot::before,.spot::after,.shot,.tab,.arrow,.agent{transition:none}
  .nav{animation:none}
  .rail{scroll-behavior:auto}
  .t{box-shadow:var(--sh-1)}
  .rail-bar i{transition:none}
}

/* =============================================================
   HERO A , THE FAN
   A held hand of cards. Five cards fanned from one pivot low in
   the frame, the centre one face on and playing at full size.
   Every 2.6s the hand cycles: the centre card slides left and
   behind, the card on its right rises into the centre, and the
   card that reaches the far left tucks into the deck behind the
   hand and comes back at the right edge.

   The geometry is one number. Every card shares transform-origin
   50% 132%, a point 0.32 card heights below the bottom edge, so
   a plain rotate fans them the way a wrist does. Nothing is
   translated sideways by hand.

   MOBILE FIRST, and there is not one max-width query in here.
   No wash, scrim, plate or gradient sits over any film. Copy
   lives on the cream, above and below the hand, never on it.
   ============================================================= */

.sec--hero{padding-block:var(--s5) var(--s7)}
@media (min-width:900px){.sec--hero{padding-block:var(--s6) var(--s9)}}

/* ---- the centred column. The hand is the composition, so the
        copy stays centred at every width instead of handing the
        page back to the left at 900. ------------------------- */
.fan-hero{display:grid;justify-items:center;text-align:center;min-width:0}
.fan-hero .hero-sub{margin-top:0}
.fan-hero .hero-h1{
  font-size:clamp(1.9rem,8vw,2.5rem);
  margin-block:var(--s4);
  max-width:15ch;
}
@media (min-width:640px){.fan-hero .hero-h1{font-size:2.85rem;max-width:16ch}}
@media (min-width:960px){.fan-hero .hero-h1{font-size:3.05rem;margin-block:var(--s4) var(--s3)}}
@media (min-width:1180px){.fan-hero .hero-h1{font-size:3.3rem}}
.fan-hero .hero-sub{margin-inline:auto;max-width:42ch;text-align:center}
.fan-hero .cta-row{margin-top:var(--s6)}

/* ---- the stage ------------------------------------------------
   The pivot is the bottom edge of the cards, 50% 104%, because that
   is where a hand is actually held: the bottom corners converge and
   the tops splay. A pivot further down translates cards sideways and
   the hand reads as a shuffled stack instead, which is what the first
   build did.

   Width is the binding constraint and it is derived. The furthest
   point is the top outer corner of an outer card, rotated by --a2 and
   scaled 0.9 about the shared pivot, plus the 1.1deg the whole hand
   breathes. That comes to roughly 1.4 card heights on the phone and
   1.75 at the desk, so --fh is capped to keep the hand inside the
   gutter at 320. Change --fh or --a2 and nothing else moves. */
.fan-hero{--fh:min(58vw,250px);--a1:15deg;--a2:30deg}
@media (min-width:520px) {.fan-hero{--fh:296px;--a1:16deg;--a2:32deg}}
@media (min-width:768px) {.fan-hero{--fh:372px;--a1:16deg;--a2:32deg}}
@media (min-width:1024px){.fan-hero{--fh:470px;--a1:19deg;--a2:38deg}}
@media (min-width:1280px){.fan-hero{--fh:520px;--a1:20deg;--a2:40deg}}

.fan-stage{
  position:relative;
  width:100%;
  height:calc(var(--fh) * 1.25);
  margin-top:var(--s5);
  min-width:0;
}

/* the hand breathes a degree either side of true, about the same
   pivot the cards use, so it reads as held rather than pinned. */
@keyframes handDrift{
  0%,100%{rotate:-1.1deg;translate:0 0}
  50%    {rotate:1.1deg;translate:0 -5px}
}
.fan{
  position:absolute;inset:0;
  transform-origin:50% 104%;
  animation:handDrift 11s ease-in-out infinite;
  animation-play-state:paused;
}
.reveal.in .fan{animation-play-state:running}

.fcard{
  position:absolute;
  top:calc(var(--fh) * 0.035);
  left:50%;
  width:calc(var(--fh) * 0.8);
  height:var(--fh);
  margin-left:calc(var(--fh) * -0.4);
  background:var(--warm);
  border:1px solid var(--line);
  overflow:hidden;
  border-radius:calc(var(--fh) * 0.055);
  box-shadow:0 2px 4px rgba(120,84,42,.07), 0 16px 34px rgba(120,84,42,.11);
  transform-origin:50% 104%;
  transition:transform .82s var(--ease-expo),
             opacity .46s var(--ease-out),
             box-shadow .82s var(--ease-out);
  will-change:transform;
}
/* card stock: a white border the way a playing card has one, which is
   what separates two overlapping films on a cream page. It frames the
   picture and never lies across it. */
.fcard video{
  display:block;width:100%;height:100%;
  object-fit:cover;
  
  background:var(--warm-2);
  pointer-events:none;
}
.fcard video::-webkit-media-controls{display:none !important}
.fcard video::-webkit-media-controls-enclosure{display:none !important}
.fcard video::-webkit-media-controls-start-playback-button{display:none !important}

/* the six slots. Distinct z on every one: two cards sharing a z swap
   in and out of front as the ring turns, which shows up as a flicker
   on the exact frame they cross. */
.fcard[data-pos="0"]{transform:rotate(calc(var(--a2) * -1)) scale(.90);z-index:2;opacity:1}
.fcard[data-pos="1"]{transform:rotate(calc(var(--a1) * -1)) scale(.95);z-index:4;opacity:1}
.fcard[data-pos="2"]{transform:translateY(-2.6%) scale(1);z-index:6;opacity:1;box-shadow:var(--sh-3)}
.fcard[data-pos="3"]{transform:rotate(var(--a1)) scale(.95);z-index:3;opacity:1}
.fcard[data-pos="4"]{transform:rotate(var(--a2)) scale(.90);z-index:1;opacity:1}
/* slot 5 is the deck: square behind the centre card, at nothing. The
   ring runs 4,3,2,1,0,5 and back to 4, so the one jump a card makes
   across the hand happens while it is invisible and underneath. */
.fcard[data-pos="5"]{transform:scale(.80);z-index:0;opacity:0}

/* ---- the pivot: one price, sitting where the hand is held ---- */
.fan-seal{
  display:grid;place-items:center;
  margin-top:var(--s2);
  color:var(--apricot-deep);
  width:86px;height:86px;
}
.fan-seal svg{width:86px;height:86px}
@media (min-width:768px){.fan-seal,.fan-seal svg{width:98px;height:98px}}

/* ---- the grip: the three agents the hand comes out of -------- */
.grip{width:100%;min-width:0;margin-top:var(--s3)}
.grip-say{
  text-align:center;font-size:var(--f-xs);font-weight:800;
  color:var(--teal-deep);margin-bottom:var(--s3);
}
.grips{
  list-style:none;margin:0 auto;padding:0;
  display:grid;gap:var(--s3);
  width:100%;max-width:27rem;min-width:0;
}
.grip-c{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px var(--s3);align-items:center;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s4);
  box-shadow:var(--sh-1);text-align:left;min-width:0;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.grip-m{
  grid-row:span 2;
  width:30px;height:30px;flex:0 0 30px;
  display:grid;place-items:center;
  border-radius:50%;background:var(--teal-wash);color:var(--teal);
}
.grip-c:nth-child(2) .grip-m{background:var(--apricot-wash);color:var(--apricot-deep)}
.grip-c:nth-child(3) .grip-m{background:var(--warm-2);color:var(--teal-deep)}
.grip-m svg{width:15px;height:15px}
.grip-c b{font-size:var(--f-sm);font-weight:800;line-height:1.3;min-width:0}
.grip-c i{font-style:normal;font-size:var(--f-xs);color:var(--ink-2);line-height:1.45;min-width:0}
@media (min-width:760px){
  .grips{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);max-width:56rem;align-items:start}
  /* the three splay from the same wrist the cards do */
  .grip-c{
    grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;
    gap:var(--s3);padding:var(--s5) var(--s4);
    transform-origin:50% 0%;
  }
  .grip-c:nth-child(1){transform:rotate(-5deg)}
  .grip-c:nth-child(3){transform:rotate(5deg)}
  .grip-m{grid-row:auto}
  /* the outer two are rotated, so they hang below their own box.
     The row carries the clearance instead of the button eating it. */
  .grip{margin-bottom:var(--s4)}
}
.grip-c:hover{box-shadow:var(--sh-2);border-color:var(--teal-soft)}

/* ---- the first read, moved below the fold -------------------- */
.sec--firstread{background:var(--warm);padding-block:var(--s8) var(--s9)}
@media (min-width:900px){.sec--firstread{padding-block:var(--s10) var(--s11)}}
.firstread-in{max-width:44rem;margin-inline:auto;min-width:0}
.firstread-say{
  text-align:center;font-size:var(--f-xs);font-weight:800;
  color:var(--teal-deep);margin-bottom:var(--s5);
}

/* ---- reduced motion ------------------------------------------
   The poster lives on the video element, so the film is paused
   and kept in the DOM. display:none would take the poster too. */
@media (prefers-reduced-motion:reduce){
  .fan{animation:none}
  .fcard{transition:none}
  .grip-c{transition:none}
}




/* ---- HERO: THE FAN, ported from friendly-proof/hero-a --------------------
   A held hand of cards. Six slots on a ring, the sixth invisible behind the
   centre card, so the one jump across the hand is never seen. The centre
   card is face on at full size, which is the whole point: every film gets a
   turn where you see all of it rather than a sliver.

   Frame follows variant B rather than A: no white card stock, no padding.
   The film runs to the edge of its own card and a warm hairline plus a warm
   shadow do the separating. */
/* ---- the centred column. The hand is the composition, so the
        copy stays centred at every width instead of handing the
        page back to the left at 900. ------------------------- */
.fan-hero{display:grid;justify-items:center;text-align:center;min-width:0}
.fan-hero .hero-sub{margin-top:0}
.fan-hero .hero-h1{
  font-size:clamp(1.9rem,8vw,2.5rem);
  margin-block:var(--s4);
  max-width:15ch;
}
.fan-hero .hero-sub{margin-inline:auto;max-width:42ch;text-align:center}
.fan-hero .cta-row{margin-top:var(--s6)}
/* ---- the stage ------------------------------------------------
   The pivot is the bottom edge of the cards, 50% 104%, because that
   is where a hand is actually held: the bottom corners converge and
   the tops splay. A pivot further down translates cards sideways and
   the hand reads as a shuffled stack instead, which is what the first
   build did.

   Width is the binding constraint and it is derived. The furthest
   point is the top outer corner of an outer card, rotated by --a2 and
   scaled 0.9 about the shared pivot, plus the 1.1deg the whole hand
   breathes. That comes to roughly 1.4 card heights on the phone and
   1.75 at the desk, so --fh is capped to keep the hand inside the
   gutter at 320. Change --fh or --a2 and nothing else moves. */
.fan-hero{--fh:min(58vw,250px);--a1:15deg;--a2:30deg}
.fan-stage{
  position:relative;
  width:100%;
  height:calc(var(--fh) * 1.25);
  margin-top:var(--s5);
  min-width:0;
}
.fan{
  position:absolute;inset:0;
  transform-origin:50% 104%;
  animation:handDrift 11s ease-in-out infinite;
  animation-play-state:paused;
}
.reveal.in .fan{animation-play-state:running}
.fcard{
  position:absolute;
  top:calc(var(--fh) * 0.035);
  left:50%;
  width:calc(var(--fh) * 0.8);
  height:var(--fh);
  margin-left:calc(var(--fh) * -0.4);
  background:var(--warm);
  border:1px solid var(--line);
  overflow:hidden;
  border-radius:calc(var(--fh) * 0.055);
  box-shadow:0 2px 4px rgba(120,84,42,.07), 0 16px 34px rgba(120,84,42,.11);
  transform-origin:50% 104%;
  transition:transform .82s var(--ease-expo),
             opacity .46s var(--ease-out),
             box-shadow .82s var(--ease-out);
  will-change:transform;
}
/* card stock: a white border the way a playing card has one, which is
   what separates two overlapping films on a cream page. It frames the
   picture and never lies across it. */
.fcard video{
  display:block;width:100%;height:100%;
  object-fit:cover;
  
  background:var(--warm-2);
  pointer-events:none;
}
.fcard video::-webkit-media-controls{display:none !important}
.fcard video::-webkit-media-controls-enclosure{display:none !important}
.fcard video::-webkit-media-controls-start-playback-button{display:none !important}
/* the six slots. Distinct z on every one: two cards sharing a z swap
   in and out of front as the ring turns, which shows up as a flicker
   on the exact frame they cross. */
.fcard[data-pos="0"]{transform:rotate(calc(var(--a2) * -1)) scale(.90);z-index:2;opacity:1}
.fcard[data-pos="1"]{transform:rotate(calc(var(--a1) * -1)) scale(.95);z-index:4;opacity:1}
.fcard[data-pos="2"]{transform:translateY(-2.6%) scale(1);z-index:6;opacity:1;box-shadow:var(--sh-3)}
.fcard[data-pos="3"]{transform:rotate(var(--a1)) scale(.95);z-index:3;opacity:1}
.fcard[data-pos="4"]{transform:rotate(var(--a2)) scale(.90);z-index:1;opacity:1}
/* slot 5 is the deck: square behind the centre card, at nothing. The
   ring runs 4,3,2,1,0,5 and back to 4, so the one jump a card makes
   across the hand happens while it is invisible and underneath. */
.fcard[data-pos="5"]{transform:scale(.80);z-index:0;opacity:0}
/* ---- the pivot: one price, sitting where the hand is held ---- */
.fan-seal{
  display:grid;place-items:center;
  margin-top:var(--s2);
  color:var(--apricot-deep);
  width:86px;height:86px;
}
.fan-seal svg{width:86px;height:86px}

@media (min-width:640px){.fan-hero .hero-h1{font-size:2.85rem;max-width:16ch}}
@media (min-width:960px){.fan-hero .hero-h1{font-size:3.05rem;margin-block:var(--s4) var(--s3)}}
@media (min-width:1180px){.fan-hero .hero-h1{font-size:3.3rem}}
@media (min-width:520px) {.fan-hero{--fh:296px;--a1:16deg;--a2:32deg}}
@media (min-width:768px) {.fan-hero{--fh:372px;--a1:16deg;--a2:32deg}}
@media (min-width:1024px){.fan-hero{--fh:400px;--a1:19deg;--a2:38deg}}
@media (min-width:1280px){.fan-hero{--fh:440px;--a1:20deg;--a2:40deg}}
@media (min-width:768px){.fan-seal,.fan-seal svg{width:98px;height:98px}}
@media (prefers-reduced-motion:reduce){
  .fan{animation:none}
  .fcard{transition:none}
  .grip-c{transition:none}
}

/* The centre card is the hero of this hand, so it is sized to be READ rather than
   glanced at. 58vw put it at 176px on a 375 screen, under half the width. This
   takes it to roughly 208px. The outer cards still land inside the frame because
   the fan pivots below the hand rather than spreading it sideways. */
.fan-hero{--fh:min(68vw,268px)}
@media (min-width:520px) {.fan-hero{--fh:330px}}
@media (min-width:768px) {.fan-hero{--fh:420px}}
@media (min-width:1024px){.fan-hero{--fh:480px}}
@media (min-width:1280px){.fan-hero{--fh:540px}}

/* The card takes the SHAPE of the film it carries. Height is the constant so the
   fan keeps its vertical rhythm, and width follows the ratio. Centring moves from
   margin-left to the separate translate property, which composes with the fan's
   rotate and scale in transform rather than fighting them. */
.fcard{width:auto;margin-left:0;aspect-ratio:var(--ar,0.8);translate:-50% 0}

/* The hero pill is gone, so the whole fold moves up proportionally to bring the
   $99 seal fully into view on a phone. Every value here is a tightening of an
   existing rhythm rather than a new one: the section keeps its own top padding
   scale, the headline keeps its margin pair, the hand keeps its gap. */
.sec--hero{padding-block:var(--s3) var(--s7)}
.hero-h1{margin-block:var(--s2) var(--s3)}
.fan-stage{margin-top:var(--s3)}
@media (min-width:900px){.sec--hero{padding-block:var(--s5) var(--s9)}}

/* ---- the four step films -------------------------------------------------
   Rendered by the product's own frame renderer, so the animations explaining
   the engine were made by the engine. 16:9 because these sit inside a section
   rather than standing as a hero. */
.cap-film{margin:0 0 var(--s5);border-radius:var(--r-xl);overflow:hidden;background:var(--canvas);border:1px solid var(--line);min-width:0}
.cap-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;pointer-events:none}
.cap-film video::-webkit-media-controls{display:none !important}
.cap-film figcaption{padding:var(--s3) var(--s4);font-size:var(--f-xs);color:var(--ink-3);text-align:center;background:var(--paper);border-top:1px solid var(--line)}
@media (min-width:900px){.cap-film{margin-bottom:var(--s6)}}


/* =============================================================
   ELECTRIC BLUE OVERRIDES

   The accent is #00E8F7. It measures 1.45:1 on the cream canvas,
   so it can be a fill, a rule, a dot or a chip, and it can never
   be a letterform or a stroke on a light surface. Two consequences
   follow, and they are the whole of this block.

   1. Anything filled with --teal takes dark ink on top of it,
      never white. Dark ink on the accent measures 10.6:1.
   2. Anything that was a MARK drawn in --teal on cream, a tick,
      a chevron, a rule, moves to --teal-deep, which is the same
      hue at 5.5:1.
   ============================================================= */
:root{ --on-teal:#04252B; }

.btn--primary{
  background:var(--teal); color:var(--on-teal);
  box-shadow:0 2px 0 var(--teal-deep), var(--sh-2);
}
.btn--primary:hover{
  background:#3EEDF9; color:var(--on-teal);
  box-shadow:0 4px 0 var(--teal-deep), var(--sh-3);
}
.btn--primary:active{box-shadow:0 1px 0 var(--teal-deep)}
.panel--ours .panel-tag{background:var(--teal); color:var(--on-teal)}
.cap-n, .step-n{color:var(--teal-deep)}

/* marks on cream: same hue, readable weight */
.mk, .tick, .acc-trigger .chev, .fit-col--yes li svg{color:var(--teal-deep)}
.panel--ours dd .mk{color:var(--teal-deep)}
.grip-c .grip-m{background:var(--teal-wash); color:var(--teal-deep)}
.inline-link{text-decoration-color:var(--teal-soft)}
.inline-link:hover{text-decoration-color:var(--teal-deep)}

/* dots and bars stay electric: they are fills, not strokes */
.chip i, .ix-n i, .agent::before, .pill-dot--teal{background:var(--teal)}

/* =============================================================
   LINK VAULT PIECES

   Three things this product has that the creative pack did not:
   a card that carries a row of the sheet, a table that shows
   twelve of them, and the email field that opens checkout.
   Everything else on the page is the shared friendly sheet
   above, untouched.
   ============================================================= */

/* ---- a row of the sheet, as a card ----------------------------
   Everything on one centred axis: the mark, the domain, a short cyan
   rule, the price, then the covered up address and a quiet count.
   The price is the largest thing on the card because the price is the
   argument. ------------------------------------------------------ */
.sitecard{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0; width:100%; height:100%; padding:var(--s5) var(--s4) var(--s4);
  background:var(--paper); text-align:center;
}
.sitecard-h{
  position:absolute; top:var(--s4); right:var(--s4); z-index:2;
  display:flex; align-items:center;
}

/* the mark. auto margins absorb the free space so it centres in whatever
   the copy leaves, and the block below stays anchored to the foot. */
.sitecard-lg{
  position:relative; flex:0 0 auto;
  width:46%; aspect-ratio:1; margin:auto;
}
@media (min-width:1024px){ .sitecard-lg{width:48%} }
.tcard .sitecard-lg{width:48%}
.sitecard-lg img{
  /* Absolute, because a percentage height on a flex child resolves to auto
     here: the mark then renders at its intrinsic aspect and the overflow
     clips it rather than letterboxing it. inset:0 gives object-fit a box it
     can definitely measure, and margin:auto centres it when --lgmax bites. */
  position:absolute; inset:0; margin:auto;
  width:100%; height:100%;
  max-width:var(--lgmax, 100%); max-height:var(--lgmax, 100%);
  object-fit:contain;
  /* Many of these files are solid squares. A proportional radius turns one
     into a squircle at any size, where a fixed 16px vanished on a 320px mark
     and dominated a 64px one. A transparent logo is unaffected. */
  border-radius:22%;
}

.sitecard-dr{
  flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.04em;
  color:var(--teal-deep); background:var(--teal-wash); border:1px solid var(--line-teal);
  border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap;
}

.sitecard-b{display:flex; flex-direction:column; align-items:center; width:100%; min-width:0; margin-top:var(--s4)}
.sitecard-d{
  font-family:var(--display); font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40;
  font-weight:600; font-size:var(--f-base); line-height:1.15; color:var(--ink);
  max-width:100%; overflow-wrap:anywhere;
}
.sitecard-rule{
  display:block; width:30px; height:4px; border-radius:2px;
  background:var(--teal); margin:var(--s3) 0;
}
.sitecard-p{
  font-family:var(--display); font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;
  font-weight:600; font-size:var(--f-xl); line-height:1; color:var(--ink);
  letter-spacing:-.01em;
}

/* the middle of the offer is the seller's address, covered up */
.sitecard-m{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:100%; min-width:0; margin-top:auto;
  padding:var(--s3) var(--s3); border-radius:var(--r-md);
  background:var(--warm); border:1px dashed var(--line-2);
}
.sitecard-ml{
  font-size:9.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.sitecard-mask{
  font-size:var(--f-xs); color:var(--ink-2); letter-spacing:.01em;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sitecard-s{margin-top:var(--s3); font-size:var(--f-xs); color:var(--ink-3)}

/* the same card riding the gallery rails */
.tcard{
  /* .sitecard wants to fill its parent. On a rail the card IS the parent, so
     the rail's own contract (fixed height, width from the aspect ratio) has to
     be restated here or aspect-ratio resolves off a 100% width and the card
     grows to the height of the whole track. */
  --ar:.78; height:var(--gh); width:auto; aspect-ratio:var(--ar);
  background:var(--paper); border:1px solid var(--line); overflow:hidden;
}

/* ---- the ledger inside the tab panel -------------------------- */
.lv-panel{align-items:start}
.lv-tabtext{margin-top:var(--s4); color:var(--ink-2); font-size:var(--f-sm)}
.lv-tabfacts{list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3)}
.lv-tabfacts li{display:flex; align-items:baseline; gap:var(--s3)}
.lv-tabfacts b{
  font-family:var(--display); font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 40;
  font-weight:600; font-size:var(--f-xl); line-height:1; color:var(--ink); min-width:74px;
}
.lv-tabfacts span{font-size:var(--f-xs); color:var(--ink-3)}

.lv-tablewrap{
  min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
}
.lv-table{width:100%; border-collapse:collapse; font-size:var(--f-xs); min-width:470px}
.lv-table th{
  text-align:left; font-size:11px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
  padding:var(--s4) var(--s3) var(--s3); border-bottom:1px solid var(--line-2);
  background:var(--warm); white-space:nowrap;
}
.lv-table td{padding:10px var(--s3); border-bottom:1px solid var(--line); vertical-align:middle}
.lv-table tr:last-child td{border-bottom:0}
.lv-table tbody tr{transition:background .18s var(--ease-out)}
.lv-table tbody tr:hover{background:var(--warm)}
.lv-site{display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap}
.lv-site img{
  width:24px; height:24px; object-fit:contain; flex:0 0 24px; padding:2px;
  background:var(--warm); border:1px solid var(--line); border-radius:5px;
}
.lv-table th:first-child,.lv-site{position:sticky; left:0; z-index:1}
.lv-site{background:var(--paper)}
.lv-table tbody tr:hover .lv-site{background:var(--warm)}
.lv-dr{
  font-size:11px; font-weight:800; color:var(--teal-deep);
  background:var(--teal-wash); border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap;
}
.lv-from{font-weight:800; white-space:nowrap}
.lv-sel{color:var(--ink-3)}
.lv-mail{color:var(--ink-3); white-space:nowrap; font-size:var(--f-xs)}
.lv-mail i{
  font-style:normal; margin-left:8px; font-size:10px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:1px 7px;
}

/* ---- the email field on the price card ------------------------ */
/* The page no longer collects an address: the buy control is a link straight
   to Stripe, which asks for it. The field styles stay because the field can
   come back without a change here. */
.lv-buy{width:100%; margin-top:var(--s6)}
.lv-form{margin-top:var(--s6); display:grid; gap:var(--s3)}
.lv-lab{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.lv-form input{
  width:100%; height:54px; padding:0 var(--s5);
  font-family:var(--body); font-size:16px; color:var(--ink);
  background:var(--canvas); border:1px solid var(--line-2); border-radius:var(--r-md);
}
.lv-form input::placeholder{color:var(--ink-3)}
.lv-form input:focus{outline:3px solid var(--teal); outline-offset:2px; border-color:var(--teal)}
.lv-form .btn{width:100%}
.lv-err{margin-top:var(--s3); color:#A33220; font-size:var(--f-sm); text-align:center}

@media (min-width:900px){
  .lv-panel{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:var(--s6)}
}



/* Only the card face on has the mark at full size. On the fanned cards
   behind it the card is mostly hidden, so a mark at 70% arrives as a slab
   of colour with no card around it. */
.fcard:not([data-pos="2"]) .sitecard-lg{width:34%}


/* Phone sizing for the card interior. The card is a fixed height with the
   overflow hidden, so every part of the column has to be budgeted or the
   last line goes under the edge. */
@media (max-width:639px){
  .sitecard{padding:var(--s4) var(--s3) var(--s3)}
  .sitecard-h{top:var(--s3); right:var(--s3)}
  .sitecard-lg{width:40%}
  .fcard .sitecard-lg{width:38%}
  .fcard .sitecard-dr{font-size:10px; padding:1px 7px}
  .tcard .sitecard-lg{width:44%}
  .sitecard-d{font-size:var(--f-sm)}
  .sitecard-rule{width:24px; height:3px; margin:var(--s2) 0}
  .sitecard-p{font-size:var(--f-lg)}
  .sitecard-b{margin-top:var(--s3)}
  .sitecard-m{padding:7px 8px; gap:2px}
  .sitecard-ml{font-size:8.5px; letter-spacing:.08em}
  .sitecard-mask{font-size:10px; letter-spacing:-.01em}
  .sitecard-s{margin-top:var(--s2); font-size:10.5px}
}

/* The card face on in the hand is the largest card on the page, so it carries
   the type at the scale the design was drawn at. The fanned cards behind it
   keep the smaller setting. */
@media (min-width:1024px){
  .fcard[data-pos="2"] .sitecard-d{font-size:var(--f-lg)}
  .fcard[data-pos="2"] .sitecard-rule{width:36px; margin-block:var(--s4)}
  .fcard[data-pos="2"] .sitecard-p{font-size:var(--f-2xl)}
  .fcard[data-pos="2"] .sitecard-mask{font-size:var(--f-sm)}
}


/* ═══════════════════════════════════════════════════════════════
   THE WALL

   Five rows. Each track carries its row twice and slides exactly half
   its own width, so the wrap has no seam and the whole thing is one
   transform on the compositor. Nothing here touches scroll position,
   layout or paint per frame, which is the difference between this and
   the version that stuttered on a phone.
   ═══════════════════════════════════════════════════════════════ */
.gal .rail{
  overflow:hidden;                     /* no native scroller, no scroll writes */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gal .track{
  display:flex; width:max-content; padding:0;
  animation:wall var(--dur, 40s) linear infinite;
  will-change:transform;
}
.gal .rail:nth-child(even) .track{animation-direction:reverse}
@keyframes wall{ to{ transform:translate3d(-50%,0,0) } }

/* off screen rows cost nothing */
.gal:not(.on) .track{animation-play-state:paused}
.gal .rail:hover .track{animation-play-state:paused}

/* Each card paints in its own box, so one card can never force the row
   beside it to repaint. */
.tcard{contain:layout paint style}

@media (prefers-reduced-motion: reduce){
  .gal .track{animation:none}
  .gal .rail{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* ── the covered address ──
   The real first character and the real suffix sit either side of two
   covered runs. A run is a box whose width is the number of characters it
   stands for, painted as text coloured ticks and blurred. Nothing legible
   is underneath: lifting the blur in a devtools panel reveals a gradient,
   never a name. */
.sitecard-mask b{
  display:inline-block; vertical-align:-.14em;
  /* capped, so the two longest runs in the set cannot push the line past the
     panel on the one breakpoint where the card is narrowest for its type */
  width:min(calc(var(--n, 6) * .5em), 4.3em); height:.86em;
  border-radius:2px;
  background:repeating-linear-gradient(90deg,
    var(--ink-2) 0 .34em, transparent .34em .5em);
  filter:blur(2.4px); opacity:.7;
}
@media (min-width:1024px){ .sitecard-mask b{filter:blur(3px)} }
/* the narrowest phone: the longest run still has to sit inside the panel */
@media (max-width:374px){ .sitecard-mask b{width:min(calc(var(--n, 6) * .46em), 3.4em)} }

/* ── the wall's tile ──
   A rail card is a small fixed height tile with its overflow hidden, so its
   whole column is budgeted explicitly. Every value here exists because the
   line under it would otherwise sit past the card's bottom edge. */
.tcard .sitecard{padding:var(--s4) var(--s3) var(--s3)}
.tcard .sitecard-h{top:var(--s3); right:var(--s3)}
.tcard .sitecard-dr{font-size:10px; padding:1px 7px}
.tcard .sitecard-lg{width:38%}
.tcard .sitecard-b{margin-top:var(--s3)}
.tcard .sitecard-d{font-size:var(--f-sm)}
.tcard .sitecard-rule{width:26px; height:3px; margin:var(--s2) 0}
.tcard .sitecard-p{font-size:var(--f-lg)}
.tcard .sitecard-m{padding:8px 10px; gap:3px; border-radius:var(--r-sm)}
.tcard .sitecard-ml{font-size:8.5px; letter-spacing:.1em}
.tcard .sitecard-mask{font-size:11px}
.tcard .sitecard-s{margin-top:6px; font-size:11px}

@media (max-width:639px){
  .tcard .sitecard{padding:var(--s3) 10px 10px}
  .tcard .sitecard-h{top:8px; right:8px}
  .tcard .sitecard-dr{font-size:9px; padding:1px 6px}
  .tcard .sitecard-lg{width:40%}
  .tcard .sitecard-b{margin-top:var(--s2)}
  .tcard .sitecard-d{font-size:11.5px}
  .tcard .sitecard-rule{width:20px; height:3px; margin:6px 0}
  .tcard .sitecard-p{font-size:var(--f-base)}
  .tcard .sitecard-m{padding:5px 7px; gap:1px}
  .tcard .sitecard-ml{font-size:7.5px; letter-spacing:.08em}
  .tcard .sitecard-mask{font-size:9.5px}
  .tcard .sitecard-mask b{filter:blur(1.8px)}
  .tcard .sitecard-s{margin-top:4px; font-size:9.5px}
}

/* a discount arriving on the link says so, above the price it changed */
.promo-note{
  margin:0 0 var(--s5); padding:8px var(--s4);
  border-radius:var(--r-pill); background:var(--teal-wash);
  border:1px solid var(--line-teal);
  font-size:var(--f-xs); font-weight:700; color:var(--teal-deep);
  text-align:center;
}

/* the ledger's masked address uses the same covered runs as the cards */
.lv-mail b{
  display:inline-block; vertical-align:-.14em;
  width:min(calc(var(--n, 6) * .46em), 3.6em); height:.8em;
  border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--ink-2) 0 .3em, transparent .3em .46em);
  filter:blur(2px); opacity:.68;
}

/* ── the Japan price block. The saving is the reason this page exists,
      so it sits above the number rather than beside it. ── */
.jp-save{
  display:inline-block; margin:0 auto var(--s4); padding:7px var(--s5);
  border-radius:var(--r-pill); background:var(--teal); color:var(--on-teal);
  font-size:var(--f-sm); font-weight:800; letter-spacing:.01em;
}
.jp-save b{font-weight:800}
.pcard-price .was{
  display:block; margin-bottom:6px; font-size:var(--f-sm); color:var(--ink-3);
  text-decoration:line-through; text-decoration-thickness:2px;
}
.lang-switch{color:var(--ink-3); text-decoration:underline; text-underline-offset:3px}
.lang-switch:hover{color:var(--ink)}