/* ==========================================================================
   Vivid Commerce program sites kit, v2 (2026-10-06)

   One stylesheet for every partner program site: square.hellovivid.com and
   shopify.hellovivid.com (reseller and merchant pages). Edit it here, never
   in a page. Each site links it at assets/kit/program.css through a symlink;
   deploy.sh copies the real file into the upload.

   Authorities, in order:
     identity  products/vivid-commerce/gtm/design-system.md (colors, fonts, logo)
     craft     resources/frameworks/design-principles.md §3
     motion    .agents/skills/emil-design-eng + apple-design
   Every contrast pair below was measured (WCAG AA), not eyeballed.
   ========================================================================== */

:root{
  /* brand */
  --orange:#FD4040; --pink:#ED1566; --purple:#5B0066; --gold:#FAB028;
  --sig:linear-gradient(135deg,#FD4040 0%,#ED1566 50%,#5B0066 100%);  /* backgrounds only */
  --cta:linear-gradient(135deg,#E0262E,#D31059);  /* white text 4.7 to 5.3:1; #FD4040 is only 3.5 */

  /* surfaces */
  --bg:#FFFDF4;        /* warm white, the marketing canvas */
  --bg-2:#FAF6E8;      /* cream: tiles and bands */
  --bg-3:#F2ECD9;      /* cream, one step deeper */
  --whisper:#F1E4EE;   /* plum whisper: one band per page at most */
  --plum:#1A1320; --plum-2:#251B2E; --plum-3:#352840;
  --field:#FFFFFF;

  /* text */
  --ink:#1A1320;       /* headings, 17.8:1 on bg */
  --ink-2:#3C3C3E;     /* body, 10.2:1 on cream */
  --ink-3:#6B6A70;     /* secondary, 5.3:1 on bg, 4.95 on cream; not on whisper */
  --ink-3w:#5E5D63;    /* secondary on whisper */
  --pink-text:#C80F55; /* small pink text, 5.6:1 (#ED1566 is 4.2) */
  --ok:#1F7A4D; --no:#B42318;
  --on-dark:#FFFDF4; --on-dark-2:rgba(255,253,244,.74); --on-dark-3:rgba(255,253,244,.6);

  --line:rgba(26,19,32,.10); --line-2:rgba(26,19,32,.18);
  --line-dark:rgba(255,253,244,.12);

  /* type */
  --font:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --fs-display:clamp(2.4rem,1.35rem + 3.4vw,4.5rem);   /* 38 to 72: a header should not eat the screen (Jackson 2026-10-07) */
  --fs-h2:clamp(2.05rem,1.3rem + 2.9vw,3.75rem);       /* 33 to 60 */
  --fs-h3:clamp(1.15rem,1.05rem + .35vw,1.375rem);     /* 18 to 22 */
  --fs-lede:clamp(1.125rem,1.03rem + .35vw,1.3rem);    /* 18 to 21 */
  --fs-body:1.0625rem;                                 /* 17 */
  --fs-small:.9375rem;                                 /* 15 */
  --fs-micro:.8125rem;                                 /* 13 */

  /* space: one scale for the whole kit */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section:clamp(88px,5rem + 5vw,160px);
  --gutter:clamp(20px,4.4vw,56px);
  --max:1180px; --max-wide:1320px;

  /* shape: two radii (controls, showcase) and pill buttons */
  --r-sm:12px; --r-lg:28px;

  /* motion */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:160ms; --t-ui:200ms; --t-reveal:700ms;

  --shadow-lg:0 1px 2px rgba(26,19,32,.05),0 28px 56px -28px rgba(26,19,32,.28);
  --shadow-md:0 1px 2px rgba(26,19,32,.05),0 12px 32px -18px rgba(26,19,32,.24);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink-2);font:400 var(--fs-body)/1.62 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
p,ul,ol,figure{margin:0}
p{text-wrap:pretty}
ul,ol{padding:0;list-style:none}
a{color:inherit;-webkit-tap-highlight-color:transparent}
b,strong{font-weight:600;color:var(--ink)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px}
::selection{background:rgba(237,21,102,.16);color:var(--ink)}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-sm);font-weight:600;text-decoration:none}
.skip:focus{left:12px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
/* Tracking and leading follow size, in measured steps (design-principles.md §3,
   spacing standard of 2026-10-07): display -2.2% / 1.06, section heads -1.8% / 1.1,
   card titles about -1% / 1.25, body 0 / 1.62, small caps open. The brand guide
   sets 96px display at -1.5px (-1.6%); the old -4.2% read as bunched (Jackson
   2026-10-07). Poppins is wide and heavy: never go past -2.5% on words. */
.display{font-weight:800;font-size:var(--fs-display);line-height:1.06;letter-spacing:-.022em}
h2,.h2{font-weight:700;font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.018em}
h3,.h3{font-weight:600;font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.008em}
.h2--md{font-size:clamp(1.9rem,1.25rem + 2.2vw,3rem);letter-spacing:-.016em;line-height:1.12}
.lede{font-size:var(--fs-lede);line-height:1.56;letter-spacing:-.004em;color:var(--ink-2);max-width:34em}
.small{font-size:var(--fs-small);line-height:1.6}
.muted{color:var(--ink-3)}
.fine{font-size:var(--fs-micro);line-height:1.6;color:var(--ink-3)}
.fine a,.tlink{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.fine a:hover,.tlink:hover{text-decoration-color:currentColor}}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
/* the italic accent: Fraunces 600 in Vivid Orange, large text only (3.4:1 on warm white
   passes AA large). Rationed to three headlines a page. */
.em{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--orange);letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- layout ---------- */
.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.wrap--wide{width:min(100% - 2 * var(--gutter),var(--max-wide))}
.sec{padding-block:var(--section);position:relative}
.sec--cream{background:var(--bg-2)}
.sec--whisper{background:var(--whisper)}
.sec--dark{background:var(--plum);color:var(--on-dark-2)}
.sec--dark h2,.sec--dark h3,.sec--dark b{color:var(--on-dark)}
.sec--dark .lede{color:var(--on-dark-2)}
.sec--dark .kicker{color:var(--on-dark-3)}
.sec--whisper .kicker,.sec--whisper .muted{color:var(--ink-3w)}
.sec--join{padding-top:0}          /* two adjacent sections that share a background */
.sec--short{padding-block:clamp(56px,4rem + 2vw,96px)}
.sec--tuck{padding-top:clamp(12px,1.4vw,24px)}   /* a band that belongs to the hero above it (Jackson 2026-10-08: "shrink gap slightly between header and timeline") */

.head{display:grid;gap:clamp(20px,.9rem + 1vw,32px);max-width:780px;margin-bottom:clamp(48px,3rem + 2.6vw,96px)}
.head--center{margin-inline:auto;text-align:center;justify-items:center}
.head--center .lede{margin-inline:auto}
/* editorial head: headline left, lede right, sharing a baseline row */
.head--split{max-width:none;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s6) var(--s8);align-items:end}
.head--split .lede{padding-bottom:.35em}
@media (max-width:900px){.head--split{grid-template-columns:minmax(0,1fr);align-items:start}.head--split .lede{padding-bottom:0}}

/* ---------- buttons ---------- */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 24px;
  border:0;border-radius:999px;font:600 15.5px/1 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) ease,box-shadow var(--t-ui) ease,color var(--t-ui) ease}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--cta);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -12px rgba(211,16,89,.7)}
.btn--ink{background:var(--ink);color:var(--bg)}
.btn--quiet{background:rgba(26,19,32,.06);color:var(--ink)}
.btn--light{background:var(--bg);color:var(--ink);box-shadow:0 10px 30px -14px rgba(26,19,32,.5)}
.btn--glass{background:rgba(255,253,244,.12);color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(255,253,244,.2)}
.btn--sm{--h:38px;padding:0 16px;font-size:14px}
.btn--lg{--h:56px;padding:0 30px;font-size:16.5px}
.btn--wide{width:100%}
@media (max-width:560px){
  .btn{white-space:normal;text-align:center;height:auto;min-height:var(--h);padding-block:12px;line-height:1.25}
  .btn--lg{font-size:15.5px;padding-inline:22px}
  .actions .btn{flex:1 1 auto}
}
.btn[disabled]{opacity:.72;cursor:progress;transform:none}
.btn .arr{width:16px;height:16px;flex:none;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 30px -12px rgba(211,16,89,.8)}
  .btn--primary:hover .arr,.btn--light:hover .arr{transform:translateX(3px)}
  .btn--ink:hover{background:#2E2338}
  .btn--quiet:hover{background:rgba(26,19,32,.1)}
  .btn--glass:hover{background:rgba(255,253,244,.18)}
}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none;padding:10px 0}
.link svg{width:14px;height:14px;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link:hover svg{transform:translateX(3px)}}

/* ---------- nav: translucent material, edge appears only once content scrolls under it ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,253,244,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  transition:box-shadow var(--t-ui) ease}
.nav[data-scrolled]{box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(26,19,32,.35)}
.nav__in{display:flex;align-items:center;gap:var(--s5);height:68px}
.nav__links{display:flex;gap:2px;margin-left:auto}
.nav__links a{font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:8px 12px;border-radius:999px;transition:background-color var(--t-ui) ease,color var(--t-ui) ease}
@media (hover:hover) and (pointer:fine){.nav__links a:hover{background:rgba(26,19,32,.05);color:var(--ink)}}
.nav .btn{margin-left:var(--s2)}
@media (max-width:1160px){.nav__links a{padding:8px 9px;font-size:14px}}
@media (max-width:1080px){.nav__links{display:none}.nav .btn{margin-left:auto}}
/* audience switch: a merchant page sends resellers to the partner page (Jackson 2026-10-08). In the nav from
   tablet up; on a phone the nav has no room, so the same button sits under the hero instead */
.nav .nav__alt + .btn{margin-left:calc(10px - var(--s5))}   /* the two buttons read as one pair */
.hero__alt{display:none}
@media (max-width:560px){.nav .nav__alt{display:none}.nav .nav__alt + .btn{margin-left:auto}.hero__alt{display:inline-flex;justify-self:start;margin-top:var(--s3)}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--bg)}}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* co-brand lockup: the vivid logo image, a quiet ×, the partner mark */
.lockup{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.lockup__v{height:40px;width:auto}
.lockup__x{font-size:15px;font-weight:500;color:var(--ink-3);line-height:1}
.lockup__sq{height:22px;width:auto}               /* Square's official wordmark, 0.565 of the logo */
.lockup__name{font-size:18px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1}  /* partners without logo clearance: plain text */
@media (max-width:560px){.lockup{gap:8px}.lockup__v{height:32px}.lockup__sq{height:18px}.lockup__name{font-size:15.5px}.nav__in{gap:var(--s3);height:62px}.nav .btn--sm{padding:0 14px;font-size:13.5px;white-space:nowrap}}
@media (max-width:400px){:root{--gutter:16px}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(36px,1.5rem + 2.6vw,88px) clamp(56px,3rem + 3vw,104px)}
.hero__title{max-width:22ch;margin-bottom:clamp(36px,4vw,72px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5vw,88px);align-items:center}
.hero__grid--top{align-items:start}
/* Hero rhythm by proximity: a block sits closest to what it belongs to. Title to
   lede is one thought; the buttons are the next beat; the micro line belongs to
   the buttons; proof (body, facts, trust) is a new group with the biggest gap. */
.hero__copy{display:grid;gap:0;justify-items:start}
.hero__copy > * + *{margin-top:var(--s5)}
.hero__copy > .display + .lede{margin-top:clamp(24px,1rem + 1.4vw,40px)}
.hero__copy > .actions{margin-top:clamp(32px,1.4rem + 1.4vw,48px)}
.hero__copy > .hero__micro{margin-top:var(--s4)}
.hero__copy > .hero__body,.hero__copy > .facts,.hero__copy > .trust{margin-top:clamp(28px,1.2rem + 1.4vw,44px)}
.hero__copy > .trust + .display{margin-top:clamp(20px,1rem + .8vw,28px)}
.hero__copy .display{max-width:13.5ch}
.hero__copy .lede{max-width:30em}
.hero__body{font-size:var(--fs-body);line-height:1.68;color:var(--ink-2);max-width:34em}
.hero__micro{font-size:var(--fs-small);line-height:1.6;color:var(--ink-3);max-width:34em}
.hero--center{text-align:center}
.hero--center .hero__copy{justify-items:center;max-width:920px;margin-inline:auto}
.hero--center .hero__copy .display{max-width:16ch}
.hero--center .lede{margin-inline:auto}
.hero--center .actions{justify-content:center}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:var(--fs-micro);font-weight:500;color:var(--ink-3)}
.trust > span{display:inline-flex;align-items:center;gap:7px}
.trust > span + span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.6;margin-right:7px}
.trust img{width:16px;height:16px;border-radius:4px}
@media (max-width:560px){.trust{flex-direction:column;align-items:flex-start;gap:4px}.trust > span + span::before{display:none}.hero--center .trust{align-items:center}}
/* hero intro row: a long opening paragraph and its facts get their own beat
   under the hero instead of stacking into the hero column (2026-10-07) */
.hero__intro{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(56px,5vw,96px);padding-top:clamp(32px,3vw,48px);border-top:1px solid var(--line)}
.hero__intro .hero__body{font-size:var(--fs-lede);line-height:1.6;max-width:32em}
.hero__intro .facts{max-width:none;border-top:0;padding-top:0;grid-template-columns:minmax(0,1fr);gap:0}
.hero__intro .facts > div{padding:var(--s4) 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline}
.hero__intro .facts > div:first-child{border-top:0;padding-top:0}
.hero__intro .facts b{font-size:var(--fs-body)}
.hero__intro .facts span{margin-top:0;font-size:var(--fs-small);text-align:right}
@media (max-width:960px){.hero__intro{grid-template-columns:minmax(0,1fr)}}
/* three short facts under the hero copy, ruled not boxed */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:34em;border-top:1px solid var(--line);padding-top:var(--s4);gap:var(--s4)}
.facts b{display:block;font-size:15px;line-height:1.35}
.facts span{display:block;font-size:var(--fs-micro);color:var(--ink-3);margin-top:2px}
.hero__media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);aspect-ratio:var(--ar,4/5);box-shadow:var(--shadow-lg)}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* A hero film sits in .hero__vid so the frame (radius, shadow) and the pause
   button stay on the video when the chip drops below it on phones. */
.hero__vid{position:relative;width:100%;height:100%}
@media (max-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__media{max-width:560px}
}
@media (max-width:560px){
  .hero__media{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}
  .hero__media img,.hero__vid{aspect-ratio:var(--ar,4/5);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
  .hero__vid{height:auto;overflow:hidden;background:var(--bg-2)}
  .hero__media .chip{position:relative;left:auto;top:auto;margin-top:var(--s3);max-width:none}
}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}

/* glass chip over photography: material, not a flat sticker */
.glass{background:rgba(255,253,244,.72);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 32px -16px rgba(26,19,32,.45)}
@media (prefers-reduced-transparency:reduce){.glass{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
.chip{position:absolute;left:20px;top:20px;display:flex;align-items:center;gap:14px;padding:14px 20px 14px 16px;border-radius:20px;max-width:calc(100% - 40px)}
.chip b{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);display:flex;align-items:baseline}
.chip b i{font-style:normal;font-size:.5em;margin-left:1px;color:var(--pink-text)}
.chip > span{font-size:13.5px;font-weight:500;line-height:1.35;color:var(--ink-2);max-width:17ch}

/* hero card: what the visitor gets, set over the hero media (merchant pages) */
.hero__card{position:absolute;left:16px;bottom:16px;width:min(320px,calc(100% - 88px));border-radius:20px;padding:16px 18px;display:grid;gap:12px}
.hero__card-who{display:flex;gap:12px;align-items:center}
.hero__card-who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.hero__card-who b{display:block;font-size:14.5px;color:var(--ink)}
.hero__card-who span{display:block;font-size:12.5px;color:var(--ink-3)}
.hero__card ol{list-style:none;display:grid;gap:6px;counter-reset:hc;padding-top:10px;border-top:1px solid var(--line)}
.hero__card li{counter-increment:hc;display:flex;gap:10px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.hero__card li::before{content:counter(hc);flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;display:grid;place-items:center}
@media (max-width:560px){.hero__media .hero__card{position:relative;left:auto;bottom:auto;width:auto;margin-top:var(--s3)}}

/* ---------- numbers panel (stats sit on a frame, never naked) ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,40px) 0}
.numbers > div{padding:var(--s2) clamp(20px,2.4vw,36px);display:grid;gap:var(--s2);align-content:start}
.numbers > div + div{border-left:1px solid var(--line)}
.numbers b{font-size:clamp(2.6rem,1.8rem + 2.4vw,4rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink);display:flex;align-items:baseline;gap:4px}
.numbers b small{font-size:.42em;font-weight:700;letter-spacing:-.02em;color:var(--ink-3)}
.numbers span{font-size:var(--fs-small);line-height:1.45;color:var(--ink-2);max-width:20ch}
@media (max-width:860px){
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--s2) 0}
  .numbers > div{padding:var(--s5) var(--s5)}
  .numbers > div:nth-child(3){border-left:0}
  .numbers > div:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- bento tiles ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.tile{grid-column:span 4;background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;gap:var(--s3);min-height:220px;position:relative;overflow:hidden}
.tile--6{grid-column:span 6}.tile--5{grid-column:span 5}.tile--7{grid-column:span 7}.tile--8{grid-column:span 8}.tile--12{grid-column:span 12}
.tile--tall{grid-row:span 2}
.tile--bg{background:var(--bg)}
.tile--ink{background:var(--plum);color:var(--on-dark-2)}
.tile.tile--ink h3,.tile.tile--ink .big{color:var(--on-dark)}
.tile .label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tile--ink .label,.sec--dark .tile .label{color:var(--gold)}
.tile .big{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.tile--row{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--s4) var(--s8);min-height:0}
.tile--row > :first-child{flex:1 1 300px;display:grid;gap:var(--s3)}
.tile--row > p{flex:1.2 1 340px}
.tile p{font-size:var(--fs-body)}
.tile .push{margin-top:auto}
.sec--dark .tile{background:var(--plum-2);color:var(--on-dark-2)}
.sec--dark .tile .big,.sec--dark .tile h3{color:var(--on-dark)}
.sec--dark .tile--lift{background:var(--plum-3)}
@media (max-width:960px){.tile,.tile--5,.tile--6,.tile--7,.tile--8{grid-column:span 12}.tile--tall{grid-row:auto}.tile{min-height:0}}

/* ---------- sticky split: statement stays, the list scrolls past it ---------- */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,104px);align-items:start}
.split__aside{position:sticky;top:112px;display:grid;gap:var(--s5)}
.split--flip .split__aside{order:2}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.split__aside{position:static}.split--flip .split__aside{order:0}}
.rows > *{display:grid;grid-template-columns:72px minmax(0,1fr);gap:var(--s2) var(--s5);padding:var(--s6) 0;border-top:1px solid var(--line)}
.rows > *:last-child{border-bottom:1px solid var(--line)}
.rows .n{grid-row:span 2;font-size:15px;font-weight:600;color:var(--pink-text);letter-spacing:.02em;padding-top:4px;font-variant-numeric:tabular-nums}
.rows h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);font-weight:700;letter-spacing:-.012em}
.rows p{color:var(--ink-2)}
.rows--plain > *{grid-template-columns:minmax(0,1fr)}
.rows--plain .n{grid-row:auto}
@media (max-width:560px){.rows > *{grid-template-columns:minmax(0,1fr)}.rows .n{grid-row:auto;padding-top:0}}

/* inline call-out row (agents with a merchant ready, owner hand-off) */
.callout{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s5) var(--s5) var(--s5) var(--s6)}
.callout p{font-weight:500;color:var(--ink);max-width:40ch}
.callout h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);letter-spacing:-.016em;margin-bottom:var(--s2)}
.callout--big{padding:clamp(28px,3vw,48px)}
.callout--big p{font-weight:400;color:var(--ink-2);max-width:48ch}
.callout--form{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s6) clamp(32px,5vw,72px);align-items:start}
.callout--form .formcard{box-shadow:var(--shadow-md)}
@media (max-width:900px){.callout--form{grid-template-columns:minmax(0,1fr)}}

/* ---------- path cards (three ways in) ---------- */
.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);align-items:stretch}
.path{background:var(--bg);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;gap:var(--s4);box-shadow:var(--shadow-md)}
.path--feature{background:var(--plum);color:var(--on-dark-2);box-shadow:var(--shadow-lg)}
.path--feature h3,.path--feature b{color:var(--on-dark)}
.path .tag{align-self:flex-start;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(26,19,32,.06);color:var(--ink-2)}
.path--feature .tag{background:rgba(250,176,40,.16);color:var(--gold)}
.path h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);font-weight:700;letter-spacing:-.014em;line-height:1.22}
.path dl{margin:0;display:grid;gap:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.path--feature dl{border-color:var(--line-dark)}
.path dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.path--feature dt{color:var(--on-dark-3)}
.path dd{margin:0;font-size:var(--fs-small);line-height:1.55}
.path .link{margin-top:auto;color:var(--pink-text)}
.path--feature .link{color:var(--on-dark)}
@media (max-width:900px){.paths{grid-template-columns:minmax(0,1fr)}}

/* ---------- ruled strip (a list that reads across, no boxes) ---------- */
.strip{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border-top:1px solid var(--line-2)}
.strip > *{padding:var(--s5) var(--s5) var(--s2) 0;display:grid;gap:var(--s2);align-content:start}
.strip > * + *{padding-left:var(--s5);border-left:1px solid var(--line)}
.strip .k{font-size:var(--fs-micro);font-weight:600;color:var(--pink-text);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.strip h3{font-size:1.125rem;font-weight:600}
.strip p{font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:960px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip > *:nth-child(odd){padding-left:0;border-left:0}.strip > *:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.strip{grid-template-columns:minmax(0,1fr)}.strip > *{padding-left:0!important;border-left:0!important}.strip > * + *{border-top:1px solid var(--line)}}

/* ---------- hardware lineup ---------- */
.lineup{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.device{grid-column:span 3;background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.device--hero{grid-column:span 6}
.device__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.device--hero .device__ph{aspect-ratio:16/10}
.device__ph img{width:100%;height:100%;object-fit:cover}
.device__ph .flag{position:absolute;left:16px;top:16px;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;color:var(--on-dark);background:rgba(26,19,32,.66);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.device__body{padding:var(--s5) clamp(20px,2vw,28px) clamp(24px,2.2vw,32px);display:grid;gap:var(--s2)}
.device--hero .device__body{padding:var(--s6) clamp(24px,2.6vw,36px) clamp(28px,2.6vw,40px);gap:var(--s3)}
.device h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.device--hero h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);letter-spacing:-.016em}
.device .use{font-size:var(--fs-small);color:var(--ink-2)}
.device--hero .use{font-size:var(--fs-body)}
.device .sell{font-size:var(--fs-small);color:var(--ink-3);padding-top:var(--s2);border-top:1px solid var(--line);margin-top:var(--s2)}
.device .sell b{color:var(--ink)}
@media (max-width:1060px){.device{grid-column:span 6}}
@media (max-width:640px){.device,.device--hero{grid-column:span 12}}

/* ---------- hardware, full suite with variety (2026-10-07) ----------
   Jackson: "the hardware section lacks variability ... include all available
   hardware products." Three layouts so no two pages repeat: a mixed lineup
   (feature + wide + supporting rows + accessory band), grouped columns, and
   typographic cards with drawn icons for brands whose photos we cannot use.
   Product shots sit on the provider's own flat gray (#F2F2F2, Square's tile). */
.device--feature{grid-column:span 7}
.device--wide{grid-column:span 5}
.device--third{grid-column:span 4}
/* when a row is taller than the card, the photo takes the extra height, not empty card */
.device--third .device__ph{flex:1 1 auto;aspect-ratio:auto;min-height:clamp(200px,18vw,280px)}
.device--feature .device__ph,.device--wide .device__ph{aspect-ratio:auto;height:clamp(240px,22vw,340px)}
.device-stack{grid-column:span 4;display:grid;gap:clamp(12px,1.2vw,20px);grid-auto-rows:1fr}
.device--row{flex-direction:row;align-items:stretch}
.device--row .device__ph{flex:none;width:clamp(104px,9vw,136px);aspect-ratio:auto}
.device--row .device__body{padding:var(--s4) var(--s5) var(--s4) var(--s4);align-content:center}
/* compact card: a short strip of product shot over the text, for supporting devices in a grid */
.device--compact .device__ph{aspect-ratio:auto;height:clamp(132px,11vw,164px)}
.device--compact .device__body{padding:var(--s4) clamp(20px,2vw,28px) clamp(20px,2vw,26px)}
.device__ph--product{background:#F2F2F2}
.device__ph--product img{object-fit:contain}
/* the band: the full counter station as one wide product strip, the copy and accessory list below it */
.hwband{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden}
.hwband__ph{background:#F2F2F2;height:clamp(200px,25vw,370px)}
.hwband__ph img{width:100%;height:100%;object-fit:contain}  /* product shots carry their own gray margin */
.hwband__body{padding:clamp(28px,3.2vw,52px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s4) clamp(32px,4.5vw,72px);align-content:start}
.hwband__body{grid-template-rows:auto 1fr}
.hwband__body > h3,.hwband__body > p{grid-column:1}
.hwband__body > p{align-self:start}
.hwband__body > .hwlist{grid-column:2;grid-row:1 / span 2;margin-top:0}
.hwband h3{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem);font-weight:700;letter-spacing:-.016em;line-height:1.2}
.hwband__body > p{color:var(--ink-2);max-width:36em}
.hwlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s6);margin-top:var(--s3)}
.hwlist li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s4);align-items:start}
.hwlist img{width:64px;height:64px;border-radius:var(--r-sm);background:#F2F2F2;object-fit:cover}
.hwlist b{display:block;font-size:var(--fs-body);line-height:1.35}
.hwlist li > div > span{display:block;font-size:var(--fs-small);color:var(--ink-3);margin-top:4px;line-height:1.5;text-wrap:pretty}
.hwlist--one{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.hwlist--icons li{grid-template-columns:48px minmax(0,1fr)}
/* the icon tile: its own selector wins over any list text rule, so the glyph sits dead center */
.hwlist .ico,.ico{width:48px;height:48px;margin:0;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--bg);color:var(--ink);line-height:0}
.ico svg{width:24px;height:24px;display:block;flex:none}
@media (max-width:1060px){.device--third{grid-column:span 6}.device-stack{grid-column:span 12;grid-auto-rows:auto;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.device--feature,.device--wide{grid-column:span 12}.hwband__body{grid-template-columns:minmax(0,1fr)}.hwband__body{grid-template-rows:none}.hwband__body > .hwlist{grid-column:1;grid-row:auto;margin-top:var(--s3)}}
@media (max-width:640px){.device--third{grid-column:span 12}.device-stack{grid-template-columns:minmax(0,1fr)}.hwlist{grid-template-columns:minmax(0,1fr)}
  /* on a phone a side column is too narrow for a product shot: the row card stacks like a compact card */
  .device--row{flex-direction:column}.device--row .device__ph{width:auto;height:clamp(132px,40vw,176px)}.device--row .device__body{padding:var(--s4) clamp(20px,2vw,28px) clamp(20px,2vw,26px)}}
/* grouped columns: one group per place the business takes payment */
/* every group has the same four slots (head, photo card, two row cards); subgrid lines the
   slots up across columns so tiles in a row share one height (Jackson 2026-10-07: "improve
   tile organization and evenness") */
.hwgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(16px,1.6vw,28px);row-gap:clamp(12px,1.2vw,16px)}
.hwgroup{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:clamp(12px,1.2vw,16px)}
.hwgroup__head{display:grid;gap:6px;align-content:start;padding:0 4px var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.hwgroup__head h3{font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem);font-weight:700;letter-spacing:-.012em}
.hwgroup__head p{font-size:var(--fs-small);color:var(--ink-3)}
.hwgroup .device{grid-column:auto}
@media (max-width:980px){.hwgroups{grid-template-columns:minmax(0,1fr)}.hwgroup{max-width:620px}}
/* cards per selling scenario, set in type (no provider photography) */
.hwgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.hwcard{--pad:clamp(28px,3vw,48px);grid-column:span 6;background:var(--bg-2);border-radius:var(--r-lg);padding:var(--pad);display:grid;gap:var(--s4);align-content:start}
.hwcard--photo{padding-top:0;overflow:hidden}
.hwcard__ph{margin:0 calc(var(--pad) * -1) var(--s2);aspect-ratio:16/9;overflow:hidden;background:var(--bg-3)}
.hwcard__ph img{width:100%;height:100%;object-fit:cover}
.hwcard--7{grid-column:span 7}.hwcard--5{grid-column:span 5}
.hwcard--ink{background:var(--plum);color:var(--on-dark-2)}
.hwcard--ink h3,.hwcard--ink b{color:var(--on-dark)}
.hwcard--ink .hwlist li > div > span{color:var(--on-dark-2)}
.hwcard--ink .ico{background:var(--plum-3);color:var(--on-dark)}
.hwcard__k{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hwcard--ink .hwcard__k{color:var(--on-dark-3)}
.hwcard h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.75rem);font-weight:700;letter-spacing:-.014em;line-height:1.2}
.hwcard .pitch{font-size:var(--fs-small);color:var(--ink-3);padding-top:var(--s4);border-top:1px solid var(--line);margin-top:var(--s2)}
.hwcard--ink .pitch{border-color:var(--line-dark);color:var(--on-dark-2)}
.hwcard--strip{grid-column:1/-1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,64px);align-items:start}
.hwcard--strip > .hwcard__k,.hwcard--strip > h3{grid-column:1}
.hwcard--strip > .hwlist{grid-column:2;grid-row:1 / span 3;margin-top:0}
.hwcard--strip > .pitch{grid-column:1}
@media (max-width:960px){.hwcard,.hwcard--7,.hwcard--5{grid-column:span 12}.hwcard--tall{grid-row:auto}.hwcard--strip{grid-template-columns:minmax(0,1fr)}.hwcard--strip > *{grid-column:1!important;grid-row:auto!important}}
/* two real hardware photos over a spec sheet, even widths */
.hwshots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,20px);margin-bottom:clamp(40px,4vw,64px)}
.hwshots figure{display:grid;gap:var(--s3)}
.hwshots img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.hwshots figcaption{font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:640px){.hwshots{grid-template-columns:minmax(0,1fr)}}
/* spec sheet: rows under three ruled headings */
.hwspec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) clamp(28px,3.4vw,56px)}
.hwspec__g{display:grid;gap:var(--s5);align-content:start;padding-top:var(--s5);border-top:2px solid var(--ink)}
.hwspec__g h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);font-weight:700;letter-spacing:-.01em}
@media (max-width:900px){.hwspec{grid-template-columns:minmax(0,1fr)}}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.compare__col{padding:clamp(24px,3vw,44px)}
.compare__col + .compare__col{background:var(--bg);box-shadow:var(--shadow-lg);border-radius:var(--r-lg)}
.compare h3{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s3)}
.compare__col + .compare__col h3{color:var(--pink-text)}
.compare li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.45}
.compare li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;
  background:rgba(26,19,32,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 7l6 6M13 7l-6 6' stroke='%236B6A70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}
.compare__col:first-child li{color:var(--ink-3)}
.compare__col + .compare__col li{color:var(--ink);font-weight:500}
.compare__col + .compare__col li::before{background:var(--cta);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),var(--cta);background-size:20px,cover}
@media (max-width:760px){.compare{grid-template-columns:minmax(0,1fr)}}
.note{margin:var(--s6) auto 0;max-width:46em;text-align:center;color:var(--ink-2);text-wrap:balance}
.note--left{text-align:left;margin-left:0;text-wrap:pretty}

/* ---------- duo: an honest yes / talk-first pair ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(12px,1.2vw,20px)}
.duo__col{border-radius:var(--r-lg);padding:clamp(24px,3vw,44px)}
.duo__col--yes{background:var(--bg);box-shadow:var(--shadow-lg)}
.duo__col--ask{background:var(--bg-2)}
.duo h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);font-weight:700;letter-spacing:-.01em;margin-bottom:var(--s3)}
.duo li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);line-height:1.5}
.duo li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%}
.duo__col--yes li::before{background:rgba(31,122,77,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%231F7A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.duo__col--ask li::before{background:rgba(26,19,32,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 7.8a2.5 2.5 0 014.8.9c0 1.7-2.4 2-2.4 3.4' fill='none' stroke='%233C3C3E' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='.95' fill='%233C3C3E'/%3E%3C/svg%3E") center/20px no-repeat}
.duo__col--ask li{color:var(--ink-2)}
@media (max-width:760px){.duo{grid-template-columns:minmax(0,1fr)}}

/* ---------- offer band: one plum moment, the number over its unit ---------- */
.offer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s5) clamp(24px,3vw,48px);align-items:center;margin-top:clamp(28px,3vw,48px);
  padding:clamp(24px,3vw,40px);border-radius:var(--r-lg);background:var(--plum);color:var(--on-dark-2)}
.offer__n b{display:block;font-size:clamp(3rem,2.2rem + 2.4vw,4.5rem);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--on-dark)}
.offer__n span{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-3);max-width:16ch;line-height:1.4}
.offer__body{display:grid;gap:var(--s2)}
.offer .kicker{color:var(--gold)}
.offer h3{color:var(--on-dark);font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:700;letter-spacing:-.01em}
.offer p{font-size:var(--fs-small);max-width:58ch}
@media (max-width:900px){.offer{grid-template-columns:auto minmax(0,1fr)}.offer .btn{grid-column:1/-1;justify-self:start}}
@media (max-width:560px){.offer{grid-template-columns:minmax(0,1fr)}}

/* ---------- statement: one sentence, set big ---------- */
.statement{font-weight:800;font-size:clamp(2.1rem,1.2rem + 3.6vw,4.4rem);line-height:1.1;letter-spacing:-.022em;text-align:center;max-width:20ch;margin:0 auto}

/* ---------- ledger: on your own vs through Vivid Commerce ---------- */
.ledger{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,1.2vw,20px);margin-top:clamp(40px,4vw,72px)}
.ledger__col{border-radius:var(--r-lg);padding:clamp(28px,3vw,48px)}
.ledger__col--alone{background:var(--bg-2)}
.ledger__col--vivid{background:var(--plum);color:var(--on-dark-2)}
.ledger h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:700;letter-spacing:-.012em;margin-bottom:var(--s5)}
.ledger__col--vivid h3{color:var(--on-dark)}
.ledger li{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);line-height:1.5}
.ledger__col--vivid li{border-color:var(--line-dark)}
.ledger li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;margin-top:.62em;background:var(--ink-3);opacity:.5}
.ledger__col--alone li{color:var(--ink-3)}
.ledger__col--vivid li{color:var(--on-dark)}
.ledger__col--vivid li::before{background:var(--orange);opacity:1}
@media (max-width:760px){.ledger{grid-template-columns:minmax(0,1fr)}}

/* ---------- media + list split (services) ---------- */
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.media-split > .frame{position:sticky;top:112px}
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);box-shadow:var(--shadow-lg)}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.frame figcaption{position:absolute;left:16px;right:16px;bottom:16px;padding:12px 16px;border-radius:16px;font-size:14px;font-weight:500;color:var(--ink)}
.services li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:4px 14px;padding:18px 0;border-top:1px solid var(--line)}
.services li:last-child{border-bottom:1px solid var(--line)}
.services li::before{content:"";grid-row:span 2;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:rgba(237,21,102,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l2.9 2.9 6.1-6.4' fill='none' stroke='%23C80F55' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px no-repeat}
.services h3{font-size:1.0625rem;font-weight:600}
.services p{font-size:var(--fs-small);color:var(--ink-3)}
@media (max-width:900px){.media-split{grid-template-columns:minmax(0,1fr)}.media-split > .frame{max-width:520px;position:relative;top:auto}}

/* ---------- record card (registration, eligibility): a real-looking receipt ---------- */
.record-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.record-split .head{margin-bottom:0}
.record{background:var(--bg);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,34px);box-shadow:var(--shadow-lg);font-size:var(--fs-small)}
.record__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-bottom:var(--s4)}
.record__top span:first-child{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.record__row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:15px 0;border-top:1px solid var(--line)}
.record__row > span:first-child{color:var(--ink-3)}
.record__row b{font-weight:600;color:var(--ink);text-align:right}
.status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:5px 11px 5px 9px;border-radius:999px;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status--ok{color:var(--ok);background:rgba(31,122,77,.1)}
.status--no{color:var(--no);background:rgba(180,35,24,.08)}
.status--ask{color:var(--ink-2);background:rgba(26,19,32,.06)}
.status--live{color:var(--pink-text);background:rgba(237,21,102,.08)}
@media (max-width:900px){.record-split{grid-template-columns:minmax(0,1fr)}}

/* ---------- check grid (week one kit) ---------- */
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.check{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,36px);display:grid;gap:var(--s2);align-content:start}
.check::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--orange);margin-bottom:var(--s4)}
.check h3{font-size:1.15rem;font-weight:600}
.check p{font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:760px){.checks{grid-template-columns:minmax(0,1fr)}}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.person{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;min-height:320px}
.person img{width:100%;height:100%;object-fit:cover}
.person__body{padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:var(--s2)}
.person h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem);font-weight:700;letter-spacing:-.014em}
.person .role{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pink-text)}
.person p{padding-top:var(--s3);font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:980px){.people{grid-template-columns:minmax(0,1fr)}.person{max-width:620px}}
@media (max-width:480px){.person{grid-template-columns:minmax(0,1fr);min-height:0}.person img{aspect-ratio:1/1}}

/* ---------- dark feature card (office hours) ---------- */
.feature{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:var(--plum);color:var(--on-dark-2);border-radius:var(--r-lg);overflow:hidden;margin-top:clamp(16px,2vw,28px)}
.feature__copy{padding:clamp(28px,3.6vw,56px);display:flex;flex-direction:column;gap:var(--s4)}
.feature h3{color:var(--on-dark);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);font-weight:700;letter-spacing:-.018em;line-height:1.16}
.feature .when{color:var(--gold);font-weight:600}
.feature__ph{position:relative;min-height:280px}
.feature__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature .fine{color:var(--on-dark-3)}
.feature .fine a{color:var(--on-dark);text-decoration-color:rgba(255,253,244,.3)}
.inline-form{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.inline-form input{flex:1 1 220px;height:50px;border-radius:999px;padding:0 20px;background:rgba(255,253,244,.08);color:var(--on-dark);border:1px solid rgba(255,253,244,.2);font:400 16px var(--font)}
.inline-form input::placeholder{color:var(--on-dark-3)}
.inline-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(250,176,40,.18)}
.feature .form-err{background:rgba(255,106,106,.14);color:#FFC2C2;flex-basis:100%}
@media (max-width:860px){.feature{grid-template-columns:minmax(0,1fr)}.feature__ph{min-height:0;aspect-ratio:16/10}}

/* ---------- apply: steps + form ---------- */
.apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:start}
.apply__lead{display:grid;gap:var(--s5);position:sticky;top:112px}
.steps{display:grid;margin-top:var(--s4);counter-reset:step}
.steps > div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px var(--s4);padding-bottom:var(--s6);position:relative;counter-increment:step}
.steps > div::before{content:counter(step);grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--ink);font-weight:700;font-size:15px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2)}
.steps > div:first-child::before{background:var(--ink);color:var(--bg);box-shadow:none}
.steps > div:not(:last-child)::after{content:"";position:absolute;left:18px;top:44px;bottom:8px;width:1px;background:var(--line-2)}
.steps h3{font-size:1.125rem;font-weight:600;padding-top:5px}
.steps p{font-size:var(--fs-small);color:var(--ink-2)}
.formcard{background:var(--bg);border-radius:var(--r-lg);padding:clamp(24px,3vw,44px);box-shadow:var(--shadow-lg)}
.formcard > h3{font-size:clamp(1.35rem,1.15rem + .6vw,1.7rem);font-weight:700;letter-spacing:-.014em}
.formcard > p{color:var(--ink-3);font-size:var(--fs-small);margin:6px 0 var(--s5)}
@media (max-width:900px){.apply{grid-template-columns:minmax(0,1fr)}.apply__lead{position:static}}

/* fields: 16px text so iOS never zooms; focus is a halo, not a jump */
.field{display:grid;gap:7px;margin-bottom:var(--s4)}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.req{color:var(--pink-text)}
.opt{font-weight:500;color:var(--ink-3)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--s3)}
@media (max-width:520px){.two{grid-template-columns:minmax(0,1fr)}}
.field input,.field select,.field textarea{width:100%;height:50px;padding:0 15px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--field);
  font:400 16px/1.4 var(--font);color:var(--ink);transition:border-color var(--t-ui) ease,box-shadow var(--t-ui) ease;-webkit-appearance:none;appearance:none}
.field textarea{height:auto;min-height:104px;padding:13px 15px;resize:vertical}
.field select{padding-right:42px;cursor:pointer;
  background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%233C3C3E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 15px center/16px no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(237,21,102,.13)}
.field ::placeholder{color:#9A98A0}
@media (hover:hover) and (pointer:fine){.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(26,19,32,.3)}}
.form-err{display:none;margin-top:var(--s3);padding:12px 14px;border-radius:var(--r-sm);background:rgba(180,35,24,.07);color:var(--no);font-size:14px;font-weight:500}
.form-err.show{display:block;animation:kit-fade 200ms var(--ease-out)}
.form-err a{color:inherit;font-weight:600}
.form-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:var(--s4);font-size:13px;font-weight:500;color:var(--ink-3)}
.form-meta img{width:15px;height:15px;border-radius:3px}
.form-meta span{display:inline-flex;align-items:center;gap:7px}
.formcard .fine{margin-top:var(--s3)}
.hp{display:none}

/* ---------- FAQ ---------- */
.faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,104px);align-items:start}
.faq-split .head{position:sticky;top:112px;margin-bottom:0}
@media (max-width:900px){.faq-split{grid-template-columns:minmax(0,1fr)}.faq-split .head{position:static}}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s5);padding:22px 0;cursor:pointer;
  font-size:1.0625rem;font-weight:600;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;
  background:rgba(26,19,32,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M15 9.5v11M9.5 15h11' stroke='%231A1320' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;
  transition:transform 240ms var(--ease-out),background-color var(--t-ui) ease}
.faq details[open] summary::after{transform:rotate(45deg);background-color:rgba(26,19,32,.1)}
@media (hover:hover) and (pointer:fine){.faq summary:hover::after{background-color:rgba(26,19,32,.1)}}
.faq .a{padding:0 56px 26px 0;color:var(--ink-2);max-width:62ch}
.faq details[open] .a{animation:kit-drop 280ms var(--ease-out)}
/* smooth open where the browser supports animating to auto */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow-y:clip;transition:block-size 320ms var(--ease-out),content-visibility 320ms allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- article cards ---------- */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card{display:flex;flex-direction:column;background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;transition:transform 320ms var(--ease-out)}
.card__ph{aspect-ratio:10/3;overflow:hidden;background:var(--bg-3)}
.card__ph img{width:100%;height:100%;object-fit:cover}
.card__body{padding:var(--s5) clamp(22px,2.4vw,32px) clamp(24px,2.4vw,32px);display:grid;gap:var(--s2)}
.card .label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.card h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);font-weight:700;letter-spacing:-.012em}
.card .link{color:var(--pink-text);padding-bottom:0}
.card:active{transform:scale(.99)}
@media (hover:hover) and (pointer:fine){.card:hover .link svg{transform:translateX(3px)}}
@media (max-width:760px){.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- closing band: the one place the signature gradient fills a surface ---------- */
.cta-band{border-radius:var(--r-lg);background:var(--sig);color:#fff;padding:clamp(48px,6vw,104px) clamp(24px,5vw,80px);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.cta-band h2{color:#fff;max-width:18ch;margin:0 auto;font-size:clamp(2.1rem,1.3rem + 3.2vw,4rem)}
/* 24px text on the gradient is AA large text (white on #FD4040 = 3.5:1) */
.cta-band p{font-size:clamp(1.5rem,1.4rem + .3vw,1.6rem);line-height:1.4;font-weight:500;letter-spacing:-.012em;max-width:30em;margin:var(--s5) auto 0;color:#fff}
.cta-band .actions{justify-content:center;margin-top:var(--s7)}
/* on phones the line drops to 19px, so it goes bold to stay AA large text (14pt bold) */
@media (max-width:560px){.cta-band{border-radius:22px}.cta-band p{font-size:1.1875rem;font-weight:700;letter-spacing:-.005em}}

/* ---------- footer ---------- */
.foot{padding-block:var(--s8) var(--s7);border-top:1px solid var(--line);margin-top:var(--section)}
.foot--flush{margin-top:0}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.foot__links{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:14px}
.foot__links a{text-decoration:none;color:var(--ink-2);font-weight:500;padding:6px 0}
@media (hover:hover) and (pointer:fine){.foot__links a:hover{color:var(--ink)}}
.foot__legal{margin-top:var(--s5);font-size:var(--fs-micro);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:6px 18px}
.foot__legal a{color:inherit}

/* ---------- sticky mobile CTA ---------- */
.mcta{display:none}
@media (max-width:760px){
  .mcta{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;padding:8px;border-radius:999px;
    transition:transform 280ms var(--ease-out),opacity 200ms ease}
  .mcta .btn{width:100%}
  .mcta.is-hidden{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
  body{padding-bottom:84px}
}

/* ---------- deal flow: the real process, set in type ---------- */
.flow{background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(22px,2.6vw,36px)}
.flow__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s5)}
@media (max-width:600px){.flow__top{flex-direction:column;align-items:flex-start;gap:var(--s3)}}
.flow__k{font-size:var(--fs-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.flow__t{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin-top:4px}
.flow ol{display:grid;gap:0;position:relative}
.flow li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:2px var(--s4);align-items:start;padding:14px 0;position:relative}
.flow .dot{grid-column:1;grid-row:1 / 3}
.flow li b{grid-column:2;grid-row:1}
.flow li small{grid-column:2;grid-row:2}
.flow .who{grid-column:3;grid-row:1 / 3}
.flow li + li{border-top:1px solid var(--line)}
.flow .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line-2);
  transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease}
.flow li b{font-size:15.5px;font-weight:600;line-height:1.35;padding-top:3px}
.flow li small{font-size:13.5px;color:var(--ink-3);line-height:1.45}
.flow .who{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(26,19,32,.06);color:var(--ink-2);margin-top:2px}
.flow .who--you{background:rgba(237,21,102,.1);color:var(--pink-text)}
.flow .who--vivid{background:rgba(91,0,102,.09);color:var(--purple)}
/* the line under a flow: the guarantee on one side, the action on the other */
.handoff__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4) var(--s6);margin-top:clamp(28px,3vw,44px)}
.handoff__foot p{max-width:40em;color:var(--ink-2)}
/* explanation motion: each step lights up in order, once */
.flow.is-in .dot{background:var(--ink);color:var(--bg);box-shadow:none;transition-delay:calc(var(--i,0) * 240ms + 250ms)}
.flow.is-in li:first-child .dot{background:var(--cta);background-color:var(--pink)}
/* horizontal pipeline variant for wide stages */
.flow--wide ol{grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));gap:var(--s4)}
.flow--wide{text-align:left}
.flow--wide li{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr auto;padding:0;gap:var(--s2);border:0!important}
.flow--wide .dot,.flow--wide li b,.flow--wide li small,.flow--wide .who{grid-column:1;grid-row:auto}
.flow--wide li b{margin-top:var(--s2)}
.flow--wide .dot{position:relative;z-index:1}
.flow--wide .who{justify-self:start;align-self:end;margin:var(--s2) 0 0}
.flow--wide ol::before,.flow--wide ol::after{content:"";position:absolute;left:14px;right:14px;top:13.5px;height:1px;background:var(--line-2)}
.flow--wide ol::after{background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1300ms var(--ease-in-out) 250ms}
.flow--wide.is-in ol::after{transform:scaleX(1)}
@media (max-width:900px){
  .flow--wide ol{grid-template-columns:minmax(0,1fr);gap:0}
  .flow--wide ol::before,.flow--wide ol::after{display:none}
  .flow--wide li{grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto;gap:2px var(--s4);padding:14px 0}
  .flow--wide li + li{border-top:1px solid var(--line)!important}
  .flow--wide .dot{grid-column:1;grid-row:1 / 3}
  .flow--wide li b{grid-column:2;grid-row:1;margin-top:0}
  .flow--wide li small{grid-column:2;grid-row:2}
  .flow--wide .who{grid-column:3;grid-row:1 / 3;align-self:start;margin:2px 0 0}
}
.stage{margin-top:clamp(48px,5vw,80px)}
.stage .flow{padding:clamp(24px,3.2vw,48px)}

/* ---------- fit list (tagged rows) ---------- */
.fits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,20px)}
.fit{background:var(--bg);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,34px);display:grid;gap:var(--s3);align-content:start;box-shadow:var(--shadow-md)}
.fit .status{justify-self:start}
.fit h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.fit p{font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:760px){.fits{grid-template-columns:minmax(0,1fr)}}

/* ---------- explorer: pick a merchant type, see the real scene + the pitch ----------
   Tabs are a segmented control; panels share one grid cell so switching never
   shifts the page. Without JS every panel simply shows in sequence. */
.explorer{display:grid;gap:clamp(20px,2.4vw,32px)}
.explorer__tabs{display:flex;gap:4px;padding:5px;border-radius:999px;background:var(--bg-2);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.explorer__tabs::-webkit-scrollbar{display:none}
.explorer__tabs button{flex:none;border:0;background:transparent;font:600 14.5px/1 var(--font);color:var(--ink-2);padding:12px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-ui) ease,color var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.explorer__tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.explorer__tabs button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.explorer__tabs button[aria-selected="false"]:hover{background:rgba(26,19,32,.06);color:var(--ink)}}
.sec--cream .explorer__tabs{background:var(--bg)}
.explorer__panels{display:grid}
.explorer__panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,64px);align-items:center}
.js .explorer__panel{grid-area:1/1;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),visibility 0s linear 0s}
.js .explorer__panel[hidden]{display:grid;opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease,visibility 0s linear 160ms}
html:not(.js) .explorer__tabs{display:none}
html:not(.js) .explorer__panels{gap:var(--s8)}
.explorer__ph{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--bg-3);box-shadow:var(--shadow-lg)}
.explorer__ph img{width:100%;height:100%;object-fit:cover}
.explorer__ph figcaption{position:absolute;left:16px;bottom:16px;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--on-dark);background:rgba(26,19,32,.62);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.explorer__body{display:grid;gap:var(--s4);align-content:center}
.explorer__body h3{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.25rem);font-weight:700;letter-spacing:-.018em;line-height:1.15}
.explorer__body > p{color:var(--ink-2)}
.explorer__facts{margin:var(--s2) 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.explorer__facts > div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);padding:14px 0;border-bottom:1px solid var(--line)}
.explorer__facts dt{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.explorer__facts dd{margin:0;font-size:var(--fs-small);color:var(--ink);font-weight:500}
.explorer__body .link{color:var(--pink-text)}
@media (max-width:900px){.explorer__panel{grid-template-columns:minmax(0,1fr)}.explorer__tabs{width:100%}}
@media (max-width:480px){.explorer__facts > div{grid-template-columns:minmax(0,1fr);gap:4px}}
/* Phones: every tab stays visible. A scrolling pill row hid 2 to 3 of 5 tabs
   at 375px with no cue that more existed (audit 2026-10-06). */
@media (max-width:560px){
  .explorer__tabs{flex-wrap:wrap;overflow:visible;border-radius:22px}
  .explorer__tabs button{flex:1 1 auto;padding:11px 14px;font-size:14px}
}

/* ---------- rail: a swipeable strip of real scenes, native scroll physics ---------- */
.rail{position:relative}
.rail__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,30vw,400px);gap:clamp(12px,1.4vw,20px);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2));scroll-padding-inline:max(var(--gutter),calc((100vw - var(--max)) / 2));padding-bottom:var(--s4)}
.rail__track::-webkit-scrollbar{display:none}
.scene{margin:0;scroll-snap-align:start;display:grid;gap:var(--s3)}
.scene__ph{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--bg-3)}
.scene__ph img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.scene figcaption{display:grid;gap:2px;padding:0 4px}
.scene figcaption b{font-size:1rem;font-weight:600}
.scene figcaption span{font-size:var(--fs-small);color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){.scene:hover .scene__ph img{transform:scale(1.025)}}
.rail__nav{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s3)}
.rail__nav button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(26,19,32,.07);color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background-color var(--t-ui) ease,opacity var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.rail__nav button:active{transform:scale(.94)}
.rail__nav button[disabled]{opacity:.35;cursor:default}
.rail__nav svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.rail__nav button:not([disabled]):hover{background:rgba(26,19,32,.12)}}
@media (max-width:640px){.rail__nav{display:none}.rail__track{grid-auto-columns:78%}}

/* ---------- photo service tiles ---------- */
.tile--photo{padding:0;min-height:0;background:var(--bg-2)}
.tile--photo .tile__ph{aspect-ratio:16/10;overflow:hidden;background:var(--bg-3)}
.tile--photo .tile__ph img{width:100%;height:100%;object-fit:cover}
.tile--photo .tile__body{padding:var(--s5) clamp(20px,2.2vw,30px) clamp(22px,2.2vw,30px);display:grid;gap:var(--s2)}
.tile--photo h3{font-size:1.15rem;font-weight:700;letter-spacing:-.018em}
.tile--photo p{font-size:var(--fs-small);color:var(--ink-2)}

/* ---------- ambient video: provider footage, muted, looping only while visible ----------
   WCAG 2.2.2: anything that moves for more than 5 seconds gets a pause control. */
.media-video{position:relative}
.media-video video{display:block;width:100%;height:100%;object-fit:cover}
.vid-toggle{position:absolute;right:16px;bottom:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--on-dark);
  background:rgba(26,19,32,.55);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  transition:background-color var(--t-ui) ease,transform var(--t-press) var(--ease-out)}
.vid-toggle:active{transform:scale(.94)}
.vid-toggle svg{width:14px;height:14px}
.vid-toggle .i-play{display:none}
.vid-toggle[aria-pressed="true"] .i-play{display:block}
.vid-toggle[aria-pressed="true"] .i-pause{display:none}
@media (hover:hover) and (pointer:fine){.vid-toggle:hover{background:rgba(26,19,32,.72)}}
html:not(.js) .vid-toggle{display:none}

/* ---------- simple pages (thanks, 404) ---------- */
.simple{min-height:100vh;display:flex;flex-direction:column}
.simple main{flex:1;display:grid;place-items:center;padding:var(--s8) 0}
.simple .tick{width:56px;height:56px;border-radius:50%;background:var(--cta);display:grid;place-items:center;margin-bottom:var(--s5)}
.simple .tick svg{width:26px;height:26px;color:#fff}
.simple h1{font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--s4)}
.simple .panel{margin-top:var(--s6);background:var(--bg-2);border-radius:var(--r-lg);padding:var(--s5) var(--s6)}
.simple .panel h2{font-size:1rem;letter-spacing:0;font-weight:700;margin-bottom:var(--s2)}
.simple .panel li{position:relative;padding:8px 0 8px 18px;font-size:var(--fs-small)}
.simple .panel li::before{content:"";position:absolute;left:0;top:.95em;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.simple .panel a{color:var(--ink);font-weight:600}
.simple .foot{margin-top:0}
[data-v][hidden]{display:none!important}

/* ---------- motion: reveal on first view ----------
   Content is hidden only when the page has JS (html.js, set inline in <head>),
   and the head script force-reveals everything after 2.2s, so nothing can
   stay invisible if the kit script fails. Reduced motion keeps a short fade. */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].is-in,.reveal-all [data-reveal]{opacity:1;transform:none}
.reveal-all .flow .dot{background:var(--ink);color:var(--bg);box-shadow:none}
.reveal-all .flow--wide ol::after{transform:scaleX(1)}
.hero [data-enter]{animation:kit-enter 900ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes kit-enter{from{opacity:0;transform:translateY(16px)}}
@keyframes kit-fade{from{opacity:0}}
@keyframes kit-drop{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{transform:none;transition:opacity 240ms ease}
  .hero [data-enter]{animation:kit-fade 240ms ease both}
  .flow .dot,.flow--wide ol::after{transition:none!important}
  .btn:active,.card:active{transform:none}
  .faq details::details-content{transition:none}
  .mcta{transition:opacity 200ms ease}
  .js .explorer__panel,.js .explorer__panel[hidden]{transform:none}
  .scene__ph img{transition:none}
}

/* ---------- print: the page as a clean reference ---------- */
@media print{.nav,.mcta,.cta-band .actions,form{display:none!important}.js [data-reveal]{opacity:1;transform:none}.sec{padding-block:32px}}