/* =====================================================================
   MarginLabs — shared stylesheet for the v2 site.
   Mirrors brand/tokens.css. Every page links this one file.

   Type system: the whole IBM Plex superfamily, so the display serif is a
   sibling of the sans and mono rather than a guest.
     Serif  — display headlines only
     Sans   — body, UI, buttons
     Mono   — labels, data, eyebrows, chips

   Colour: ink & paper. Green (#2F7D58) is a SIGNAL — the leading bar, a
   confirmed state, the mark. It never fills a section. That restraint is
   what keeps us off the same shelf as the cream-and-forest-green funders.
   ===================================================================== */

:root{
  --surface:#FFFFFF; --sunk:#F5F5F5; --alt:#FAFAFA;
  --warm:#F7F5F2;                       /* warm band — used sparingly */
  --ink:#0A0A0A; --ink-soft:#171717; --body:#525252; --muted:#737373; --faint:#A3A3A3;
  --line:#E5E5E5; --line-soft:#F0F0F0; --line-strong:#D4D4D4;
  --signal:#2F7D58; --signal-deep:#10231A; --signal-soft:#F0F7F3; --signal-line:#CFE5DA;
  --bad:#B14431; --warn:#B45309;

  --serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --r:12px; --r-sm:6px; --r-lg:16px; --r-xl:24px; --pill:999px;
  --nav-h:64px;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1180px;
  --ease:cubic-bezier(.4,.02,.15,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px)}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =====================================================================
   SCROLL PROGRESS — a hairline that fills as you move down the page.
   ===================================================================== */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  background:var(--signal); transform:scaleX(0); transform-origin:0 50%;
  z-index:120; will-change:transform;
}

/* =====================================================================
   SECTIONS — tall, not locked. The one-idea-at-a-time feeling comes from
   height and full-bleed grounds, not from mandatory scroll-snap (which
   traps keyboard users and breaks on short screens).
   ===================================================================== */
.sec{position:relative; padding:clamp(84px,11vh,132px) var(--gutter)}
.sec > .inner{width:100%; max-width:var(--maxw); margin:0 auto; position:relative; z-index:2}
.sec--tall{min-height:88vh; display:flex; flex-direction:column; justify-content:center}
.sec--hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center}
.sec--sunk{background:var(--sunk)}
.sec--warm{background:var(--warm)}
.sec--ink{background:var(--signal-deep); color:#fff}
.sec--edge{border-top:1px solid var(--line)}

.sec--ink h1,.sec--ink h2,.sec--ink h3{color:#fff}
.sec--ink p,.sec--ink .lede{color:rgba(255,255,255,.76)}
.sec--ink .eyebrow{color:rgba(255,255,255,.62)}
.sec--ink .eyebrow::before{background:rgba(255,255,255,.34)}

/* --- curved divider: sections meet on an arc, not a straight rule ----- */
.curve{position:absolute; left:0; right:0; width:100%; height:clamp(30px,4vw,64px); display:block; z-index:1}
.curve--top{top:-1px}
.curve--bottom{bottom:-1px}

/* =====================================================================
   TYPE
   ===================================================================== */
h1,h2,h3,h4{margin:0; color:var(--ink)}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:-0.025em; line-height:1.06}
h1{font-size:clamp(38px,5.2vw,66px)}
h2{font-size:clamp(29px,3.9vw,48px)}
h3{font-family:var(--sans); font-size:clamp(17px,1.5vw,20px); font-weight:600; letter-spacing:-0.02em; line-height:1.28}
h1 em,h2 em{font-style:italic; color:var(--signal)}
p{margin:0; color:var(--body)}

.lede{font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:48ch; color:var(--body)}
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--line-strong); flex:none}
.note{font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.55}
.cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

/* =====================================================================
   NAV — the pill. It morphs: wide and transparent over a dark hero,
   then contracts into a compact solid pill once you start scrolling.
   The glide is one element that slides behind whichever item you point
   at; that continuity is most of why a nav reads as considered.
   ===================================================================== */
.nav{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:100; width:calc(100% - 28px); max-width:var(--maxw);
  display:flex; align-items:center; gap:16px;
  padding:8px 8px 8px 16px; height:var(--nav-h);
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border:1px solid var(--line); border-radius:var(--pill);
  box-shadow:0 1px 2px rgba(10,10,10,.03);
  transition:max-width .5s var(--ease), background .35s ease, border-color .35s ease,
             box-shadow .35s ease, color .35s ease;
}
/* over a dark hero, before any scroll */
.nav.is-over-dark{
  background:rgba(16,35,26,.42); border-color:rgba(255,255,255,.2);
  box-shadow:none; color:#fff;
}
.nav.is-over-dark .navlink{color:rgba(255,255,255,.86)}
.nav.is-over-dark .navlink:hover{color:#fff}
.nav.is-over-dark .brand span{color:#fff}
.nav.is-over-dark .brand .mk-ink{fill:#fff; stroke:#fff}
.nav.is-over-dark .glide{background:rgba(255,255,255,.16)}
.nav.is-over-dark .navcta{background:#fff; color:var(--signal-deep)}
.nav.is-over-dark .navtoggle{color:#fff}
.nav.is-over-dark .nav-login{color:#fff}

/* contracted, once scrolled */
.nav.is-scrolled{
  max-width:940px;
  box-shadow:0 10px 30px -14px rgba(10,10,10,.2);
  border-color:var(--line-strong);
}
/* Apply stays put. Hiding it on scroll copied a competitor's contracting nav
   and quietly removed the one link for someone ready to apply right now. */

.brand{display:flex; align-items:center; gap:9px; text-decoration:none; flex:none; padding-right:4px}
.brand svg{display:block; height:19px; width:auto}
.brand span{font-weight:700; font-size:16.5px; letter-spacing:-0.035em; color:var(--ink); transition:color .35s ease}

.navlinks{position:relative; display:flex; align-items:center; gap:2px; margin-left:6px}
.glide{
  position:absolute; top:0; height:100%; border-radius:var(--pill);
  background:var(--sunk); opacity:0; pointer-events:none;
  transition:left .34s var(--ease), width .34s var(--ease), opacity .22s ease;
}
.navlink{
  position:relative; z-index:1; display:flex; align-items:center; gap:5px;
  padding:9px 13px; border-radius:var(--pill);
  font-size:14.5px; font-weight:500; color:var(--body);
  text-decoration:none; white-space:nowrap; background:none; border:0;
  font-family:inherit; cursor:pointer; transition:color .2s ease, opacity .3s ease;
}
.navlink:hover,.navlink[aria-expanded="true"]{color:var(--ink)}
.navlink .caret{width:9px; height:9px; opacity:.5; transition:transform .28s ease}
.navlink[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navspacer{flex:1}
.nav-login{
  font-size:14.5px; font-weight:500; text-decoration:underline;
  text-underline-offset:3px; white-space:nowrap; flex:none;
  color:var(--ink);
  transition:color .35s ease;
}
.navcta{
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 17px; border-radius:var(--pill);
  background:var(--ink); color:#fff; font-size:14.5px; font-weight:600;
  text-decoration:none; white-space:nowrap; flex:none;
  transition:background .2s ease, transform .2s ease, color .35s ease;
}
.navcta:hover{background:var(--signal-deep); transform:translateY(-1px)}
.navtoggle{display:none}
.cta-short{display:none}

.panel{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:308px; padding:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:0 18px 44px -18px rgba(10,10,10,.24);
  opacity:0; visibility:hidden; transform:translateY(-6px); color:var(--ink);
  transition:opacity .2s ease, transform .24s var(--ease), visibility .2s;
}
.panel.open{opacity:1; visibility:visible; transform:translateY(0)}
.panelitem{display:block; padding:10px 12px; border-radius:var(--r-sm); text-decoration:none; transition:background .16s ease}
.panelitem:hover{background:var(--sunk)}
.panelitem b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em}
.panelitem em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.4}

@media (max-width:960px){
  .navtoggle{display:flex}
  .nav-login{display:none}
  .navlinks{
    position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; margin:0; padding:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:0 18px 44px -18px rgba(10,10,10,.24); color:var(--ink);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .24s var(--ease), visibility .2s;
  }
  .navlinks.mobile-open{opacity:1; visibility:visible; transform:translateY(0)}
  .navlinks > div{position:static !important}
  .nav.is-over-dark .navlinks .navlink{color:var(--body)}
  .navlink{justify-content:space-between; padding:12px 13px; font-size:15px}
  .glide{display:none}
  .panel{position:static; opacity:1; visibility:visible; transform:none; border:0;
         box-shadow:none; padding:0 0 6px 12px; min-width:0; max-height:0;
         overflow:hidden; transition:max-height .3s ease}
  .panel.open{max-height:560px}
  .panelitem em{display:none}
  .nav.is-scrolled{max-width:calc(100% - 28px)}
}
@media (max-width:560px){
  .cta-long{display:none}
  .cta-short{display:inline}
  .navcta{padding:9px 15px}
  .nav{padding-left:12px; padding-right:6px; gap:8px}
  .brand span{display:none}
}

/* =====================================================================
   BUTTONS + CHIPS
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:var(--pill);
  font-size:15.5px; font-weight:600; text-decoration:none; cursor:pointer;
  border:1px solid transparent; font-family:inherit; letter-spacing:-0.01em;
  transition:background .2s ease, transform .2s ease, border-color .2s ease, color .2s ease;
}
.btn--primary{background:var(--ink); color:#fff}
.btn--primary:hover{background:var(--signal-deep); transform:translateY(-1px)}
.btn--ghost{background:none; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn--onDark{background:none; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--onDark:hover{background:#fff; color:var(--signal-deep); transform:translateY(-1px)}
.btn--light{background:#fff; color:var(--signal-deep)}
.btn--light:hover{transform:translateY(-1px)}
.btn--quiet{padding:14px 6px; background:none; color:var(--body); font-weight:500}
.btn--quiet:hover{color:var(--ink)}
.sec--ink .btn--quiet{color:rgba(255,255,255,.8)}
.sec--ink .btn--quiet:hover{color:#fff}
/* On a photo ground the default hover colour is --ink, which is near-black
   and disappears. Anything quiet sitting on a photograph stays light. */
.photo .btn--quiet{color:rgba(255,255,255,.84)}
.photo .btn--quiet:hover{color:#fff}
.arrow{transition:transform .24s ease; display:inline-block}
.btn:hover .arrow,a:hover > .arrow{transform:translateX(3px)}

/* mono outline chips — a recurring device for hard facts */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.ochip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:7px 13px; border-radius:var(--pill); border:1px solid var(--line-strong);
  color:var(--muted); white-space:nowrap;
}
.sec--ink .ochip{border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.82)}
.chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--pill); white-space:nowrap; flex:none;
  border:1px solid var(--line); color:var(--muted); background:var(--alt);
}
.chip--live{color:var(--signal); border-color:var(--signal-line); background:var(--signal-soft)}
/* Coming soon. Warm amber from the brand tokens (--ml-warn), so it reads as
   "not yet" rather than "something is wrong", and never competes with the
   green, which means confirmed. */
.chip--soon{color:#8A5A0C; border-color:#EBD9BC; background:#FDF6EA}
.callout--soon{border-color:#EBD9BC; background:#FDF6EA; color:var(--ink-soft)}
.callout--soon b{color:#7A4E08}

/* =====================================================================
   REVEAL — one direction, once, with a small stagger.
   ===================================================================== */
.rev{
  opacity:0; transform:translateY(14px);
  transition:opacity .62s cubic-bezier(.2,.6,.2,1), transform .62s cubic-bezier(.2,.6,.2,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.rev.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1; transform:none; transition:none}}

/* =====================================================================
   PHOTO SLOTS
   Set --img to a real photograph and it takes over. Until then each slot
   renders a generated ground built from the logo motif, so the page is
   never a grey box waiting for an asset.
     <div class="photo" style="--img:url(/v2/assets/hero.jpg)">
   ===================================================================== */
.photo{
  position:relative; overflow:hidden; background-color:var(--signal-deep);
  background-image:var(--img,none); background-size:cover; background-position:center;
  isolation:isolate;
}
.photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 8%,  rgba(47,125,88,.42), transparent 60%),
    radial-gradient(100% 80% at 10% 96%, rgba(47,125,88,.20), transparent 62%),
    linear-gradient(168deg, #163527 0%, #10231A 52%, #0B1912 100%);
  opacity:var(--fallback,1);
}
.photo[style*="--img"]::before{--fallback:0}
/* legibility scrim — always on, so text survives any photograph */
.photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,14,10,.62) 0%, rgba(6,14,10,.34) 42%, rgba(6,14,10,.72) 100%);
}
.photo > *{position:relative; z-index:2}

/* the logo motif, drawn large and faint as a ground */
.motif{position:absolute; inset:0; z-index:1; opacity:.16; pointer-events:none; overflow:hidden}
.motif svg{position:absolute; right:-4%; bottom:-8%; width:min(56%,620px); height:auto}

/* .photo > * sets position:relative on children, which was quietly winning
   over .curve (equal specificity, later rule). Curves must stay pinned. */
.photo > .curve{position:absolute; z-index:3}

/* Anything sitting on a photo ground gets light text. This used to be
   scoped to the landing page's .hero, which left every product hero
   rendering near-black on near-black. */
.photo h1,.photo h2,.photo h3,.photo h4{color:#fff}
/* --signal is tuned for paper; on a warm photo scrim it goes muddy. Same hue, lifted. */
.photo h1 em,.photo h2 em{color:#9ADBB8}
.photo p,.photo .lede{color:rgba(255,255,255,.8)}
.photo .eyebrow{color:rgba(255,255,255,.64)}
.photo .eyebrow::before{background:rgba(255,255,255,.36)}
.photo .note{color:rgba(255,255,255,.6)}
.photo .cap{color:rgba(255,255,255,.62)}
.photo .ochip{border-color:rgba(255,255,255,.36); color:rgba(255,255,255,.86)}
.photo a{color:#fff}
/* ...except buttons, which carry their own colour pair. Without this the
   white CTA renders white-on-white on every photo hero. */
.photo .btn--light{color:var(--signal-deep)}
.photo .btn--primary{color:#fff}
.photo .btn--onDark:hover{color:var(--signal-deep)}
/* ...but not inside a light card that happens to sit on the photo */
.photo .scope h1,.photo .scope h2,.photo .scope h3,.photo .scope p{color:var(--ink)}
.photo .scope .verdict{color:var(--body)}
.photo .scope .verdict b{color:var(--ink)}
.photo .scope .txn{color:var(--body)}
.photo .scope .scope-hd span,.photo .scope .lab{color:var(--muted)}
.photo .scope .pct,.photo .scope .who,.photo .scope .amt{color:var(--ink)}
.photo .glass b{color:#fff}

/* =====================================================================
   CARDS
   ===================================================================== */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px); box-shadow:0 24px 60px -40px rgba(10,10,10,.3);
}
.tile{
  display:flex; flex-direction:column; gap:9px; text-decoration:none;
  padding:20px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  transition:border-color .24s ease, transform .24s ease, box-shadow .24s ease;
}
.tile:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(10,10,10,.26)}
.tile .top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.tile p{font-size:13.5px; line-height:1.45; color:var(--muted)}
/* Landing product cards: every card says the same three things in the same
   order, so a founder can compare them: what it is, who it suits, how it
   is paid back. */
.tile .tlede{font-size:14.5px; line-height:1.45; color:var(--body)}
.tfacts{margin:4px 0 0; padding-top:12px; border-top:1px solid var(--line-soft); display:grid; gap:8px}
.tfacts div{display:grid; grid-template-columns:104px 1fr; gap:10px; align-items:baseline}
.tfacts dt{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tfacts dd{margin:0; font-size:13.5px; line-height:1.45; color:var(--ink)}
html.snapping #products .tile{padding:16px 18px; gap:7px}
html.snapping .tfacts{padding-top:9px; gap:5px}
/* In snap mode the products frame has to fit one screen or it cannot
   snap. The whole card is already the link, so the "Read more" row goes. */
html.snapping #products .tile .go{display:none}
html.snapping #products .lede{margin-top:14px!important}
.tile .go{margin-top:auto; padding-top:12px; font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{border-top:1px solid var(--line); background:var(--sunk); padding:56px var(--gutter) 40px}
.foot .inner{max-width:var(--maxw); margin:0 auto}
.footgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
@media (max-width:820px){.footgrid{grid-template-columns:1fr 1fr; gap:28px}}
.footgrid h2{margin:0 0 12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:500}
.footgrid a{display:block; font-size:14px; color:var(--body); text-decoration:none; padding:4px 0; transition:color .18s ease}
.footgrid a:hover{color:var(--ink)}
.footlegal{border-top:1px solid var(--line); padding-top:24px; font-size:12.5px; color:var(--muted); line-height:1.6; max-width:82ch}
.footlegal b{color:var(--body); font-weight:600}

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 var(--r) 0; z-index:200}
.skip:focus{left:0}

/* =====================================================================
   SHARED LAYOUT HELPERS
   ===================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
@media (max-width:940px){.split{grid-template-columns:1fr; gap:36px}}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:940px){.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g3{grid-template-columns:1fr}}
.stack-sm > * + *{margin-top:12px}
.mt-lg{margin-top:clamp(32px,5vh,52px)}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{max-width:min(100%,940px)}
.hero h1{max-width:15ch}
.hero h1{color:#fff}
.hero .lede{color:rgba(255,255,255,.8)}
.hero .eyebrow{color:rgba(255,255,255,.64)}
.hero .eyebrow::before{background:rgba(255,255,255,.36)}
.swap{display:inline-block; color:#8FD6B0}
.swap i{font-style:normal; display:inline-block; animation:swapin .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes swapin{from{opacity:0; transform:translateY(.34em)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.swap i{animation:none}}
.herocta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:34px}
.herofoot{
  margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; gap:clamp(20px,4vw,52px); flex-wrap:wrap; align-items:baseline;
}
.herofoot .stat b{
  display:block; font-family:var(--serif); font-size:clamp(26px,3vw,36px); font-weight:600;
  color:#fff; letter-spacing:-0.025em; margin-bottom:2px; font-variant-numeric:tabular-nums;
}
/* the caption only — not the currency spans living inside the figure */
.herofoot .stat > span{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
                       text-transform:uppercase; color:rgba(255,255,255,.6)}
.herofoot .stat b .cur{font:inherit; color:inherit; letter-spacing:inherit; text-transform:none}
/* the currency cycles; a fixed width stops the line jiggling as it swaps */
.cur{display:inline-block; min-width:.62em; text-align:left}
/* Three plain reasons we're different, next to the amount. White on the
   photo, each with the same signal tick used in "What you keep". */
/* Stacked, not in a row: a row runs out over the bright half of the photo. */
.heropoints{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-start; gap:9px}
.heropoints li{display:flex; align-items:center; gap:10px; font-size:clamp(14.5px,1.3vw,16.5px); font-weight:500; color:rgba(255,255,255,.92); white-space:nowrap}
.heropoints li::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}
@media (max-width:560px){.heropoints li{white-space:normal}}
.heroline{font-size:clamp(15px,1.4vw,17.5px); line-height:1.45; color:rgba(255,255,255,.86);
          max-width:26ch; font-weight:500}

/* --- the scope: payments resolving into a revenue shape --- */
.scope{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.scope-hd{display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line-soft); margin-bottom:14px}
.scope-hd span{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.dot{width:6px; height:6px; border-radius:50%; background:var(--signal); display:inline-block; margin-right:7px; vertical-align:middle}
.feed{height:132px; overflow:hidden; position:relative; margin-bottom:6px}
.feed::after{content:""; position:absolute; inset:auto 0 0 0; height:34px; background:linear-gradient(transparent,var(--surface)); pointer-events:none}
.txn{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:7px 2px;
     border-bottom:1px dashed var(--line-soft); font-family:var(--mono); font-size:11.5px; color:var(--body);
     opacity:0; animation:feedin .5s ease both}
.txn .who{color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.txn .amt{color:var(--ink); font-variant-numeric:tabular-nums}
.txn .tag{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:var(--pill);
          border:1px solid var(--line); color:var(--muted); white-space:nowrap}
.txn .tag[data-t="d2c"]{color:var(--signal); border-color:var(--signal-line); background:var(--signal-soft)}
@keyframes feedin{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.bars{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; height:152px; padding-top:12px; border-top:1px solid var(--line)}
.bar{display:flex; flex-direction:column; height:100%; gap:6px}
.bar .track{flex:1; display:flex; align-items:flex-end; min-height:0}
.bar .fill{width:100%; border-radius:3px 3px 0 0; background:var(--signal-deep); height:0;
           transition:height 1.1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--d) * 1ms)}
.bar[data-lead] .fill{background:var(--signal)}
.bar .lab{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); text-align:center}
.bar .pct{font-size:14px; font-weight:600; color:var(--ink); text-align:center; letter-spacing:-0.02em}
.scope.on .bar .fill{height:var(--h)}
@media (prefers-reduced-motion:reduce){.bar .fill{transition:none; height:var(--h)}}
.verdict{margin-top:16px; padding:12px 14px; border-radius:var(--r); background:var(--sunk); border:1px solid var(--line);
         font-size:13.5px; color:var(--body); line-height:1.45}
.verdict b{color:var(--ink); font-weight:600}

/* =====================================================================
   DOORS
   ===================================================================== */
.doors{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px}
@media (max-width:940px){.doors{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.doors{grid-template-columns:1fr}}
.door{padding:20px 18px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
      display:flex; flex-direction:column; gap:9px;
      transition:border-color .24s ease, transform .24s ease, box-shadow .24s ease}
.door:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 14px 34px -22px rgba(10,10,10,.26)}
.glyph{display:flex; align-items:flex-end; gap:3px; height:26px; margin-bottom:3px}
.glyph i{width:6px; background:var(--line-strong); border-radius:2px 2px 0 0; display:block}
.glyph i.hi{background:var(--signal)}
.door h3{font-size:15.5px}
.door p{font-size:13px; line-height:1.45; color:var(--muted)}
.door .fit{margin-top:auto; padding-top:11px; border-top:1px solid var(--line-soft);
           font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--signal)}
/* Full product names wrap to two lines on some cards. Reserve two lines on
   every card in the four-across row so their dividers line up. */
@media (min-width:900px){.door .fit{line-height:1.5; min-height:calc(3em + 12px)}}

/* =====================================================================
   STEP SEQUENCE — image card with a glass overlay, plus a dot rail
   ===================================================================== */
.seq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; margin-top:clamp(36px,5vh,56px)}
@media (max-width:900px){.seq{grid-template-columns:1fr; gap:28px}}
.seqmedia{position:relative; border-radius:var(--r-xl); aspect-ratio:1/1; max-height:440px; overflow:hidden}
@media (max-width:900px){.seqmedia{aspect-ratio:4/3; max-height:none}}
.pane{position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px;
      opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s var(--ease); pointer-events:none}
.pane[data-on]{opacity:1; transform:none}
.glass{
  width:100%; padding:18px; border-radius:var(--r-lg);
  background:rgba(12,28,20,.52); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#fff;
}
.glass .cap{color:rgba(255,255,255,.66); display:block; margin-bottom:8px}
.glass b{display:block; font-family:var(--serif); font-size:clamp(19px,2.1vw,25px); font-weight:600; letter-spacing:-0.02em; margin-bottom:14px}
.qchips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.qchips span{font-size:12px; padding:5px 11px; border-radius:var(--pill);
             background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); color:#fff; white-space:nowrap}
.prog{height:3px; border-radius:2px; background:rgba(255,255,255,.2); overflow:hidden}
.prog i{display:block; height:100%; background:#8FD6B0; transition:width .6s var(--ease)}

.seqrail{display:flex; flex-direction:column; gap:2px}
.step{display:flex; gap:16px; align-items:flex-start; text-align:left; background:none; border:0;
      font-family:inherit; cursor:pointer; padding:14px 8px 18px 0; position:relative; color:inherit}
.step .dot{width:13px; height:13px; border-radius:50%; border:2px solid var(--line-strong);
           background:var(--warm); flex:none; margin-top:5px; position:relative; z-index:2; transition:border-color .3s ease, background .3s ease}
.step[data-on] .dot{border-color:var(--signal); background:var(--signal); box-shadow:0 0 0 4px var(--signal-soft)}
.step:not(:last-of-type)::before{content:""; position:absolute; left:6px; top:22px; bottom:-4px; width:1px; background:var(--line-strong); z-index:1}
.steptxt{display:block}
.steptxt b{display:block; font-family:var(--serif); font-size:clamp(19px,2vw,24px); font-weight:600;
           letter-spacing:-0.02em; margin:4px 0 6px; color:var(--faint); transition:color .3s ease}
.steptxt em{display:block; font-style:normal; font-size:14.5px; line-height:1.5; color:var(--faint); transition:color .3s ease; max-width:44ch}
.step[data-on] .steptxt b{color:var(--ink)}
.step[data-on] .steptxt em{color:var(--body)}

/* =====================================================================
   CONTRAST ROWS
   ===================================================================== */
.contrast{display:grid; gap:10px}
.row{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
     padding:16px 18px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface)}
.row .mk{font-family:var(--mono); font-size:12px; color:var(--faint); padding-top:1px}
.row[data-us]{border-color:var(--signal-line); background:var(--signal-soft)}
.row[data-us] .mk{color:var(--signal)}
.row b{display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; margin-bottom:2px}
.row span{font-size:13.5px; color:var(--body); line-height:1.45}

/* =====================================================================
   PRODUCT ROWS / CARDS
   ===================================================================== */
.prows{display:grid; gap:12px}
.prow{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; text-decoration:none;
      padding:24px 26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
      transition:border-color .24s ease, transform .24s ease, box-shadow .24s ease}
.prow:hover{border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 16px 38px -24px rgba(10,10,10,.26)}
.prow .top{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.prow h3,.prow .prowh{font-family:var(--sans); font-weight:600; letter-spacing:-0.02em;
            line-height:1.28; font-size:clamp(17px,1.8vw,21px)}
.prow p{font-size:14.5px; line-height:1.5; max-width:62ch}
.prow .fits{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.prow .fits span{font-family:var(--mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase;
                 color:var(--muted); border:1px solid var(--line); border-radius:var(--pill); padding:3px 9px}
.prow-go{font-size:20px; color:var(--faint)}
.prow:hover .prow-go{color:var(--signal)}
@media (max-width:620px){.prow{grid-template-columns:1fr} .prow-go{display:none}}

.fitcards{display:grid; gap:10px}
.fitcard{display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); text-decoration:none;
         transition:border-color .2s ease, transform .2s ease}
.fitcard:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.fitcard b{display:block; font-size:14.5px; font-weight:600; margin:6px 0 3px}
.fitcard em{display:block; font-style:normal; font-size:13px; color:var(--muted); line-height:1.45}

/* =====================================================================
   SMALL STEPS / TICKS / CALLOUTS
   ===================================================================== */
.steps-s{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,36px)}
@media (max-width:860px){.steps-s{grid-template-columns:1fr; gap:22px}}
.step-s{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding-top:22px; border-top:2px solid var(--signal)}
.step-s .n{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--signal)}
.step-s b{display:block; font-size:16px; font-weight:600; letter-spacing:-0.02em; margin-bottom:7px}
.step-s span{display:block; font-size:14px; line-height:1.55; color:var(--body)}

.ticks{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:28px; font-size:15px; line-height:1.55; color:var(--body)}
.ticks li::before{content:""; position:absolute; left:2px; top:8px; width:11px; height:6px;
                  border-left:2px solid var(--signal); border-bottom:2px solid var(--signal); transform:rotate(-45deg)}

.callout{padding:18px 20px; border-radius:var(--r); border:1px solid var(--line-strong); background:var(--alt);
         font-size:14.5px; line-height:1.6; color:var(--body); margin-bottom:36px}
.callout b{color:var(--ink)}
.callout--warn{border-color:#EBD9BC; background:#FDF6EA}

/* =====================================================================
   FAQ
   ===================================================================== */
.faqs{display:grid; gap:0; border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq > summary{display:flex; align-items:center; justify-content:space-between; gap:20px; cursor:pointer;
               padding:22px 2px; list-style:none; font-size:clamp(16px,1.6vw,18.5px); font-weight:600;
               letter-spacing:-0.015em; color:var(--ink)}
.faq > summary::-webkit-details-marker{display:none}
.faq .pm{position:relative; width:14px; height:14px; flex:none}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; background:var(--muted); transition:transform .28s var(--ease)}
.faq .pm::before{left:0; top:6px; width:14px; height:2px}
.faq .pm::after{left:6px; top:0; width:2px; height:14px}
.faq[open] .pm::after{transform:scaleY(0)}
.faq .ans{padding:0 2px 24px; max-width:72ch}
.faq .ans p{font-size:15px; line-height:1.65}
.faq .ans a{color:var(--signal)}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contacts{display:grid; gap:2px; margin-top:26px}
.crow{display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline; padding:15px 0; border-bottom:1px solid var(--line)}
@media (max-width:560px){.crow{grid-template-columns:1fr; gap:4px}}
.crow a{color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid var(--line-strong)}
.crow a:hover{border-color:var(--ink)}
.crow b{font-weight:600; color:var(--ink); line-height:1.5}

/* =====================================================================
   FORM
   ===================================================================== */
.formwrap{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:940px){.formwrap{grid-template-columns:1fr; gap:34px}}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.field label{font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:7px}
.field label em{font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.07em;
                text-transform:uppercase; color:var(--faint); font-weight:400}
.field input{font-family:inherit; font-size:15px; color:var(--ink); padding:11px 13px;
             border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--surface);
             transition:border-color .18s ease, box-shadow .18s ease}
.field input::placeholder{color:var(--faint)}
.field input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,10,10,.07)}
.field input:user-invalid{border-color:var(--bad)}
.optwrap{margin:4px 0 16px; border-top:1px solid var(--line-soft); padding-top:16px}
.optwrap > p{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:14px}
.formfoot{font-size:12px; color:var(--muted); line-height:1.5; margin-top:12px}
.formfoot a{color:var(--body)}
.formmsg{display:none; padding:13px 15px; border-radius:var(--r); font-size:14px; line-height:1.45; margin-bottom:16px}
.formmsg[data-ok]{display:block; background:var(--signal-soft); border:1px solid var(--signal-line); color:#1F5C40}
.formmsg[data-err]{display:block; background:#F9E9E5; border:1px solid #EBC9C0; color:#8F3527}
button[disabled]{opacity:.55; cursor:progress}

/* =====================================================================
   STEP ILLUSTRATIONS
   Each pane is a column: the drawn scene on top, the glass caption below.
   Drawn in HTML/CSS so real label lengths wrap instead of clipping.
   ===================================================================== */
.pane{flex-direction:column; justify-content:flex-end; gap:16px}
.scene{flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:0}
.sheet{
  width:100%; max-height:100%; overflow:hidden;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r); padding:14px 16px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.sheethd{display:flex; align-items:center; gap:9px; padding-bottom:11px; margin-bottom:4px; border-bottom:1px solid rgba(255,255,255,.14)}
.sheetfoot{padding-top:11px; margin-top:4px; border-top:1px solid rgba(255,255,255,.14)}
.sheet .cap{color:rgba(255,255,255,.6)}

/* 1 · banded questions */
.q{padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.q:last-of-type{border-bottom:0}
.qlab{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em;
      text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:7px}
.qopts{display:flex; flex-wrap:wrap; gap:6px}
.qopts span{
  font-size:12px; padding:5px 11px; border-radius:var(--pill);
  border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.62); white-space:nowrap;
}
.qopts span[data-on]{background:var(--signal); border-color:var(--signal); color:#fff; font-weight:600}

/* 2 · the accounts, read-only */
.acct{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
      padding:10px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.acct:last-of-type{border-bottom:0}
.an{font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.am{font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,.58); letter-spacing:.04em}
.ap{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
    color:#8FD6B0; border:1px solid rgba(143,214,176,.4); border-radius:var(--pill); padding:2px 8px; white-space:nowrap}
.lock{width:13px; height:13px; flex:none; border:1.5px solid #8FD6B0; border-radius:2px; position:relative}
.lock::before{content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%);
              width:9px; height:8px; border:1.5px solid #8FD6B0; border-bottom:0; border-radius:5px 5px 0 0}

/* 3 · the checks resolving */
.chk{display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
     padding:11px 0; border-bottom:1px solid rgba(255,255,255,.09)}
.chk:last-of-type{border-bottom:0}
.cn{font-size:13px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cv{font-family:var(--mono); font-size:10.5px; color:rgba(255,255,255,.58); text-align:right}
.tick{width:15px; height:15px; flex:none; border-radius:50%; background:var(--signal); position:relative}
.tick::after{content:""; position:absolute; left:4px; top:4.5px; width:6px; height:3px;
             border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg)}
.pane[data-on] .chk{animation:chkin .45s ease both; animation-delay:calc(var(--k) * 130ms + 120ms)}
@keyframes chkin{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.pane[data-on] .chk{animation:none}}

@media (max-width:900px){
  .seqmedia{aspect-ratio:auto; min-height:420px}
  .cv{display:none}
}
@media (max-width:420px){
  .am{display:none}
  .acct{grid-template-columns:1fr auto}
}


/* =====================================================================
   WHAT WE COULDN'T SEE — the honest gap block
   ===================================================================== */
.gaps{display:grid; gap:2px}
.gap{padding:14px 0; border-bottom:1px solid var(--line)}
.gap:last-child{border-bottom:0}
.gap b{display:block; font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:3px}
.gap span{display:block; font-size:13.5px; line-height:1.5; color:var(--muted)}
.gap[data-ok] b{color:var(--signal)}


/* =====================================================================
   HERO SCENE
   A drawn ground rather than a photograph: pale sheets and parcels
   scattered on dark, in the brand's own palette. Sits behind the scrim
   so the headline is legible whatever the canvas paints.
   ===================================================================== */
.photo--scene .motif{display:none}

/* The closing frame bookends the hero. Its photograph is warm and bright, so
   it needs a heavier scrim than the dark hero does to keep white type legible. */
.photo--cta::after{
  background:linear-gradient(180deg,
    rgba(8,16,11,.74) 0%, rgba(8,16,11,.60) 45%, rgba(8,16,11,.80) 100%);
}
/* The hero photograph is bright and sunlit, so the scrim is warm (brown, not
   green-black) and only as heavy as the white headline needs: dense under the
   copy on the left, nearly clear over the founder on the right, with a floor
   under the testimonial strip. Subject sits right, so the crop favours it. */
.photo--scene{background-position:68% center}
.photo--scene::after{
  background:
    linear-gradient(0deg, rgba(26,18,10,.50) 0%, rgba(26,18,10,0) 34%),
    linear-gradient(100deg,
      rgba(26,18,10,.72) 0%, rgba(26,18,10,.56) 34%,
      rgba(26,18,10,.12) 64%, rgba(26,18,10,.04) 100%);
}
@media (max-width:900px){
  .photo--scene::after{background:linear-gradient(180deg,
    rgba(26,18,10,.66) 0%, rgba(26,18,10,.48) 50%, rgba(26,18,10,.66) 100%)}
}

/* =====================================================================
   WHO WE WORK WITH
   ===================================================================== */
.bfgrid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(32px,6vw,80px); align-items:center}
@media (max-width:900px){.bfgrid{grid-template-columns:1fr; gap:40px}}
.bfhead{font-size:clamp(30px,4.7vw,60px); line-height:1.04}
/* The longest audience is "marketplace sellers". Reserve two lines so the
   section can't jump under the typing on narrower screens. */
.typed{display:block; color:var(--signal); min-height:2.12em}
@media (min-width:1100px){.typed{min-height:1.1em}}
.typed i{font-style:normal}
/* the caret only exists while something is typing */
.typed i::after{
  content:""; display:inline-block; width:.07em; height:.82em; margin-left:.06em;
  background:var(--signal); vertical-align:-0.06em; animation:caret 1s steps(1,end) infinite;
}
@keyframes caret{0%,50%{opacity:1} 51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.typed i::after{display:none}}

.regions .cap{display:block; margin-bottom:18px}
.regions ul{list-style:none; margin:0; padding:0; display:grid; gap:0}
.regions li{padding:16px 0; border-top:1px solid var(--line)}
.regions li:last-child{border-bottom:1px solid var(--line)}
.regions b{display:block; font-size:clamp(17px,1.7vw,21px); font-weight:600; letter-spacing:-0.02em; color:var(--ink)}
.regions span{display:block; font-size:13px; color:var(--muted); margin-top:2px}

/* =====================================================================
   BRAND STRIP — placeholder wordmarks, set in the page's own faces
   ===================================================================== */

/* =====================================================================
   THE PINNED STEP SEQUENCE
   The section pins while you scroll past it and the steps advance with
   the scroll — you drive it, rather than watching it play. Falls back to
   an ordinary section on short screens, narrow screens and reduced-motion,
   where pinning costs more than it gives.
   ===================================================================== */
.seqsec{position:relative; padding:0}
.seqtrack{height:300vh}
.seqsticky{
  position:sticky; top:0; min-height:100svh;
  display:flex; align-items:center;
  padding:calc(var(--nav-h) + 40px) var(--gutter) 64px;
}
.seqsticky > .inner{width:100%; max-width:var(--maxw); margin:0 auto}

/* the scroll position within the track, shown as a hairline under the rail */
.seqbar{height:2px; background:var(--line); margin-top:26px; overflow:hidden}
.seqbar i{display:block; height:100%; width:0; background:var(--signal); transition:width .25s linear}

@media (max-width:900px), (max-height:660px){
  .seqtrack{height:auto}
  .seqsticky{position:static; min-height:0; padding-block:clamp(84px,11vh,132px)}
}
@media (prefers-reduced-motion:reduce){
  .seqtrack{height:auto}
  .seqsticky{position:static; min-height:0; padding-block:clamp(84px,11vh,132px)}
}


/* =====================================================================
   PHOTOGRAPHY BAND
   One image inside "Who we fund" — a founder actually packing an order,
   which is the whole customer in one frame.
   ===================================================================== */
.photoband{
  margin-top:clamp(28px,4vh,44px);
  aspect-ratio:21/9; max-height:400px; width:100%;
  background-image:var(--img); background-size:cover; background-position:center 46%;
  background-color:var(--sunk);
  border-radius:var(--r-lg);
}
@media (max-width:640px){.photoband{aspect-ratio:16/10}}

/* =====================================================================
   GROWTH CHART — frame 4, under the estimator copy. A card that matches the
   estimator beside it: this year as a smooth signal-green line over a soft
   fill, last year dashed behind it, hairline grid, month axis. Draws in
   left to right once on reveal. Illustrative, no axis numbers, and the
   caption says so.
   ===================================================================== */
.growth{
  margin:30px 0 0; padding:20px 22px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 24px 60px -44px rgba(10,10,10,.28);
}
.growth-hd{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px}
.growth-title{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.growth-tag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--signal); background:var(--signal-soft); border:1px solid var(--signal-line);
  padding:4px 10px 4px 9px; border-radius:var(--pill);
}
.growth-tag::before{content:""; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid currentColor}
.growth-key{display:flex; gap:16px; padding-top:1px; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--muted)}
.growth-key span{display:inline-flex; align-items:center; gap:7px; white-space:nowrap}
.growth-key span::before{content:""; width:16px; border-top:2px solid var(--signal)}
.growth-key .k-last::before{border-top:2px dashed var(--faint)}
.growth-plot{
  position:relative; height:clamp(150px,20vh,196px);
  background:repeating-linear-gradient(to top, var(--line-soft) 0 1px, transparent 1px 25%);
  border-bottom:1px solid var(--line-strong);
}
.growth-svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  clip-path:inset(-14px 100% -14px -14px); transition:clip-path 1.5s var(--ease) .35s;
}
.growth.in .growth-svg{clip-path:inset(-14px -14px -14px -14px)}
.g-area{fill:url(#growth-fill)}
.g-this,.g-last{fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.g-this{stroke:var(--signal); stroke-width:2.25}
.g-last{stroke:var(--faint); stroke-width:1.5; stroke-dasharray:4 5}
.growth-dot{
  position:absolute; right:0; width:12px; height:12px; margin:0 -6px -6px 0; border-radius:50%;
  background:var(--signal); border:2px solid var(--surface);
  box-shadow:0 0 0 1px var(--signal-line), 0 4px 10px -2px rgba(47,125,88,.45);
  opacity:0; transform:scale(.3); transition:opacity .3s ease 1.8s, transform .45s var(--ease) 1.8s;
}
.growth-dot::after{content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid var(--signal); opacity:0}
.growth.in .growth-dot{opacity:1; transform:none}
.growth.in .growth-dot::after{animation:gpulse 2.6s ease-out 2.4s infinite}
@keyframes gpulse{0%{transform:scale(.5); opacity:.55} 100%{transform:scale(1.7); opacity:0}}
.growth-now{
  position:absolute; right:18px; transform:translateY(50%);
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:#fff; background:var(--ink); padding:4px 8px; border-radius:var(--r-sm);
  opacity:0; transition:opacity .35s ease 2s;
}
.growth.in .growth-now{opacity:1}
.growth-x{display:flex; justify-content:space-between; margin-top:10px}
.growth-x span{width:0; display:flex; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--faint)}
.growth figcaption{margin-top:16px}
@media (max-width:480px){.growth-key{flex-direction:column; gap:5px; align-items:flex-end}}
@media (prefers-reduced-motion:reduce){
  .growth-svg,.growth-dot,.growth-now{transition:none}
  .growth-svg{clip-path:none}
  .growth-dot,.growth-now{opacity:1; transform:none}
  .growth-now{transform:translateY(50%)}
  .growth.in .growth-dot::after{animation:none}
}

/* =====================================================================
   HERO TESTIMONIAL RAIL
   Fills the lower third of the hero, which was dead space. Two identical
   runs of the same cards slide past; the second is aria-hidden so a screen
   reader hears each quote once. Pauses on hover and for reduced-motion.
   ===================================================================== */
.tstrip{
  position:relative; margin-top:clamp(34px,7vh,80px); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.trail{display:flex; gap:14px; width:max-content; animation:trail 52s linear infinite}
.trail-copy{display:flex; gap:14px}
.tstrip:hover .trail,.tstrip:focus-within .trail{animation-play-state:paused}
@keyframes trail{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .trail{animation:none}
  .tstrip{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
}

.tcard{
  flex:none; width:clamp(238px,23vw,300px); margin:0;
  padding:17px 19px 15px; border-radius:var(--r);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.tcard blockquote{
  margin:0; font-size:14.5px; line-height:1.5; color:#fff;
  font-family:var(--serif); font-weight:500;
}
.tcard blockquote::before{content:"\201C"}
.tcard blockquote::after{content:"\201D"}
.tcard figcaption{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  margin-top:13px; padding-top:11px; border-top:1px solid rgba(255,255,255,.16);
}
.tcard b{font-size:13px; font-weight:600; color:rgba(255,255,255,.94); letter-spacing:-0.01em}
.tcard span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.52);
}
.tnote{
  margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.42);
}

/* =====================================================================
   ESTIMATOR
   ===================================================================== */
.est{display:flex; flex-direction:column; gap:14px}
.estrow{display:flex; align-items:center; justify-content:space-between; gap:14px}
.estcur{display:flex; gap:0; border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden}
.estcur button{
  font-family:var(--sans); font-size:13px; font-weight:600; line-height:1;
  padding:7px 12px; border:0; background:var(--surface); color:var(--muted);
  cursor:pointer; transition:background .16s ease, color .16s ease;
}
.estcur button + button{border-left:1px solid var(--line)}
.estcur button[aria-pressed="true"]{background:var(--ink); color:#fff}

.estrev{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(32px,4.4vw,46px); letter-spacing:-0.03em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1;
}

/* The axis widens left to right, so the control says "more money this way"
   before you have touched it. A flat line read as a floating dot. */
.estslider{position:relative; height:40px; margin-top:2px}
.wedge{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
       width:100%; height:22px; display:block; pointer-events:none}
.wedge path{fill:var(--line-strong)}
.wedge--fill path{fill:var(--ink)}
/* clip-path on an <svg> element is unreliable; on a plain div it is not */
.wedge-clip{
  position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
}

.estrange{
  -webkit-appearance:none; appearance:none; position:absolute; inset:0;
  width:100%; height:100%; margin:0; background:transparent; cursor:grab;
}
.estrange:active{cursor:grabbing}
.estrange::-webkit-slider-runnable-track{height:100%; background:transparent}
.estrange::-moz-range-track{height:100%; background:transparent}
.estrange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--surface); border:2px solid var(--ink);
  box-shadow:0 2px 8px rgba(10,10,10,.28); cursor:grab;
}
.estrange::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:var(--surface);
  border:2px solid var(--ink); box-shadow:0 2px 8px rgba(10,10,10,.28); cursor:grab;
}
.estrange:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:var(--r-sm)}
.estends{
  display:flex; justify-content:space-between; margin-top:2px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted);
}

.estresult{
  margin-top:4px; padding:18px 0 4px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.estresult b{
  font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:600;
  letter-spacing:-0.025em; color:var(--signal); font-variant-numeric:tabular-nums;
}
.estnote{font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.5}

/* =====================================================================
   WHAT YOU CAN USE IT FOR
   ===================================================================== */
/* Six moments, each a card: an icon, when it happens, what it is, and the
   product that usually fits (linked). The header carries a "what you keep"
   panel on the right, so the frame reads as a fair trade, not a pitch. */
.usehead{display:grid; grid-template-columns:1.45fr .8fr; gap:clamp(28px,5vw,72px); align-items:end}
@media (max-width:860px){.usehead{grid-template-columns:1fr; gap:26px}}
.keeps{padding:18px 20px 20px; border:1px solid var(--signal-line); background:var(--signal-soft); border-radius:var(--r-lg)}
.keeps ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px}
.keeps li{display:flex; align-items:center; gap:11px; font-size:14.5px; font-weight:500; color:var(--ink)}
.keeps li::before{
  content:""; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ELIGIBILITY STRIP — under the landing's products: the four minimums at a
   glance and a way through to the full Eligibility page. */
.eligstrip{
  display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap;
  padding:20px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.eligstrip ul{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px}
.eligstrip li{display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink)}
.eligstrip li::before{
  content:""; flex:none; width:16px; height:16px; border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
}
.eligstrip .btn{flex:none}
html.snapping .eligstrip{padding:16px 20px}

.uses{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.uses{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.uses{grid-template-columns:1fr}}
/* .use is also a .rev: its transition list has to carry the reveal's
   opacity/transform (with the stagger delay) as well as the hover. */
.use{
  display:flex; flex-direction:column; gap:10px; padding:22px 22px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:
    opacity .62s cubic-bezier(.2,.6,.2,1) calc(var(--i,0) * 70ms),
    transform .62s cubic-bezier(.2,.6,.2,1) calc(var(--i,0) * 70ms),
    border-color .24s ease 0s, box-shadow .24s ease 0s;
}
.use:hover{border-color:var(--line-strong); box-shadow:0 18px 40px -26px rgba(10,10,10,.28)}
.use-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.use-ic{
  display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:11px;
  background:var(--signal-soft); color:var(--signal); border:1px solid var(--signal-line);
}
.use-ic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.use-when{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:right}
.use h3{margin:6px 0 0; font-family:var(--sans); font-size:18px; font-weight:600; letter-spacing:-0.02em; line-height:1.25; color:var(--ink)}
.use p{margin:0; font-size:14px; line-height:1.55; color:var(--body)}
.use-fit{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; font-size:13px;
}
/* the label takes its own line, so two long product names never wrap
   raggedly beside it in the three-column grid */
.use-fit .cap{flex-basis:100%}
.use-fit a{color:var(--ink); font-weight:500; text-decoration:none; border-bottom:1px solid var(--line-strong); transition:color .18s ease, border-color .18s ease}
.use-fit a:hover{color:var(--signal); border-color:var(--signal)}
/* phone tap targets: small standalone links get enough height to hit */
.use-fit a{display:inline-block; padding-block:4px}
.nav .brand{padding-block:6px}
.eyebrow a{display:inline-block; padding-block:5px}

.nots{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}
.nots span{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  padding:8px 14px; border-radius:var(--pill);
  border:1px solid var(--signal-line); background:var(--signal-soft); color:var(--signal);
}

/* =====================================================================
   ELIGIBILITY
   ===================================================================== */
.eligs{list-style:none; margin:0; padding:0; display:grid; gap:0}
.eligs li{padding:14px 0; border-bottom:1px solid var(--line-soft)}
.eligs li:last-child{border-bottom:0; padding-bottom:0}
.eligs b{display:block; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:3px}
.eligs span{display:block; font-size:13.5px; line-height:1.5; color:var(--muted)}

/* =====================================================================
   WHAT YOU CAN CONNECT
   ===================================================================== */
/* .ints sits inside .seqsec, which has no padding and does not match the
   `.sec > .inner` rule, so it has to set its own gutter and width. */
.ints{
  width:100%; max-width:calc(var(--maxw) + 2 * var(--gutter));
  margin:clamp(40px,7vh,72px) auto 0;
  padding:clamp(26px,4vh,40px) var(--gutter) clamp(52px,8vh,88px);
  border-top:1px solid var(--line);
  position:relative; z-index:2;   /* clear the section's bottom curve */
}
.ints .cap{display:block; margin-bottom:20px}
.ints .note{margin-top:18px}
.intgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:12px}
@media (max-width:900px){.intgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.intgrid{grid-template-columns:repeat(2,1fr)}}
.intcell{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.intglyph{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:8px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
}
.intglyph img{width:22px; height:22px; object-fit:contain; display:block}
.intglyph svg{width:21px; height:21px; fill:var(--ink); display:block}
.intcell b{font-size:14px; font-weight:600; letter-spacing:-0.01em; color:var(--ink)}
.intcell > span:not(.intglyph){font-size:12px; line-height:1.4; color:var(--muted)}

/* =====================================================================
   WHEN WE ASK FOR MORE
   Paired rows: the situation, then what it means for you. Set as a list
   rather than cards, because it is a set of conditions and not a menu.
   ===================================================================== */
.needs{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,5vw,64px)}
@media (max-width:760px){.needs{grid-template-columns:1fr}}
.need{display:grid; grid-template-columns:1fr; gap:5px; padding:20px 0; border-top:1px solid var(--line)}
.need b{font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--ink)}
.need span{font-size:14px; line-height:1.55; color:var(--body); max-width:46ch}

/* =====================================================================
   ESTIMATOR — the repayment half
   The first slider answers "how much could I get". This answers "and what
   would I pay back", which is the question people have actually been
   burned on. A plain track here, because the taper has already made its
   point and a second one would just be decoration.
   ===================================================================== */
.esttake{margin-top:4px; padding-top:18px; border-top:1px solid var(--line)}
.esttakeval{
  font-family:var(--serif); font-weight:600; font-size:clamp(19px,2vw,23px);
  letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.estslider--plain{height:30px}
.estslider--plain::before{
  content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:4px; border-radius:2px;
  background:linear-gradient(90deg, var(--ink) 0 var(--p,0%), var(--line-strong) var(--p,0%) 100%);
}
.estslider--plain .estrange::-webkit-slider-thumb{width:22px; height:22px}
.estslider--plain .estrange::-moz-range-thumb{width:22px; height:22px}

.estback{margin:16px 0 0; display:grid; gap:0}
.ebrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line-soft);
}
.ebrow:last-child{border-bottom:0}
.estback dt{font-size:13.5px; color:var(--muted)}
.estback dd{
  margin:0; font-size:15px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:right;
}
.ebrow:first-child dd{color:var(--signal); font-size:clamp(16px,1.7vw,19px)}

/* USD is the only currency, so it is a label rather than a control */
.estusd{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:6px 10px;
}

/* =====================================================================
   FRAME-BY-FRAME SCROLLING
   One swipe moves you one frame. `scroll-snap-stop: always` is what stops
   a fast flick skipping three sections at once.

   Two things keep this from becoming a trap:
     · the pinned steps section carries three stops of its own, so you
       scroll THROUGH it a step at a time instead of jumping past it;
     · any section taller than the viewport opts out at runtime (see
       site.js), because a mandatory snap point on a section you cannot
       fit on screen hides its bottom half.
   Off entirely for reduced-motion and short viewports.
   ===================================================================== */
html.snapping{scroll-snap-type:y mandatory}
/* set by site.js when any frame is too tall to snap: mandatory snapping would
   skip that frame entirely, proximity never skips (see site.js) */
html.snapping.snap-soft{scroll-snap-type:y proximity}
html.snapping .sec,
html.snapping .seqstop,
html.snapping .foot{scroll-snap-align:start; scroll-snap-stop:always}
html.snapping .sec[data-nosnap]{scroll-snap-align:none; scroll-snap-stop:normal}
html.snapping .seqsec{scroll-snap-align:none}

/* the stops are position markers, nothing to look at */
.seqstop{position:absolute; left:0; width:1px; height:1px; pointer-events:none; opacity:0}

@media (prefers-reduced-motion:reduce){
  html.snapping{scroll-snap-type:none}
}

/* ---- snap mode: make a frame actually fit a frame --------------------
   Outside snap mode sections are generous. Inside it they have to fit one
   viewport or the snap point hides their lower half, so the padding tightens
   and the tallest single element (the photo band) gives up some height. */
html.snapping .sec{
  min-height:100svh;
  padding-block:calc(var(--nav-h) + 22px) 34px;
}
html.snapping .sec--hero{padding-block:calc(var(--nav-h) + 14px) 26px}
html.snapping .photoband{max-height:clamp(170px,24vh,290px); margin-top:clamp(18px,2.4vh,30px)}
html.snapping .doors{margin-top:clamp(18px,2.4vh,30px)}
html.snapping .mt-lg{margin-top:clamp(18px,2.6vh,34px)}
html.snapping .tstrip{margin-top:clamp(20px,3vh,44px)}
html.snapping .herofoot{margin-top:clamp(18px,2.6vh,34px); padding-top:16px}
html.snapping .herocta{margin-top:clamp(18px,2.6vh,30px)}
html.snapping .use{padding:16px 18px 14px; gap:8px}
html.snapping .uses{gap:12px}
html.snapping #usefor .lede{margin-top:12px!important}
html.snapping .use h3{font-size:17px; margin-top:2px}
html.snapping .use-ic{width:34px; height:34px}
html.snapping .use-fit{padding-top:10px}
html.snapping .growth{margin-top:20px; padding:16px 18px 14px}
html.snapping .need{padding:14px 0}
html.snapping .seqsticky{padding-block:calc(var(--nav-h) + 22px) 34px}
/* the two densest frames need a little more taken out to fit one screen */
html.snapping .door{padding:16px 16px 14px}
html.snapping .door p{font-size:12.5px}
html.snapping #who .lede{margin-top:14px}
html.snapping .est{gap:10px}
html.snapping .est .card,html.snapping .card{padding:clamp(16px,2vw,22px)}
html.snapping .ebrow{padding:8px 0}
html.snapping .esttake{padding-top:14px}
html.snapping .estslider{height:34px}
html.snapping .estnote{font-size:10.5px}
html.snapping #estimate .estrev{font-size:clamp(26px,3.4vw,38px)}
html.snapping #estimate .estback{margin-top:10px}
html.snapping #estimate .btn{padding-block:12px}
html.snapping #estimate .estends{font-size:9.5px}

/* =====================================================================
   PHONES
   Small type and thin controls are fine with a mouse and a big screen.
   On a phone they are neither readable nor tappable, so both get a floor.
   ===================================================================== */
@media (max-width:900px){
  /* nothing meta drops below 11.5px */
  .cap,.footgrid h2,.eyebrow,.estnote,.tnote,.note,.chip,.ochip,.qlab,.prow .fits span,
  .intcell > span:not(.intglyph),.tcard span,.estends,.bar .lab{font-size:11.5px}
  .chip,.ochip{padding:4px 9px; letter-spacing:.07em}
  .estends{letter-spacing:.05em}
  .txn,.am,.ap{font-size:11.5px}
}

/* Touch targets. Apple asks for 44px; the sliders were 21 and 34. */
@media (pointer:coarse), (max-width:900px){
  .estslider{height:52px}
  .estslider--plain{height:48px}
  .estrange::-webkit-slider-thumb{width:30px; height:30px}
  .estrange::-moz-range-thumb{width:30px; height:30px}
  .estcur button,.navlink,.navtoggle{min-height:44px}
  .field input{padding-block:13px}
  .faq > summary{padding-block:18px}
  .btn{padding-block:15px}
}

/* The product question. A select, not a text field, because we want the
   answer to line up with the five products rather than be free prose. */
.field select{
  font-family:inherit; font-size:15px; color:var(--ink);
  padding:11px 38px 11px 13px; border:1px solid var(--line-strong);
  border-radius:var(--r-sm); background:var(--surface);
  -webkit-appearance:none; appearance:none; cursor:pointer; width:100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%23737373' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:12px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field select:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,10,10,.07)}
.field select:invalid{color:var(--faint)}
@media (pointer:coarse), (max-width:900px){.field select{padding-block:13px}}