/* ============================================================
   LytePay · global stylesheet
   Design tokens come from Lyte's brand system (lyte-brand-system
   vercel app). Everything below is site chrome + shared components
   built on top of those tokens — see assets/tokens/*.css for the
   source of truth on color/type/spacing.
   ============================================================ */

@import url('./assets/tokens/fonts.css');
@import url('./assets/tokens/colors.css');
@import url('./assets/tokens/typography.css');
@import url('./assets/tokens/spacing.css');
@import url('./assets/tokens/radius-shadow.css');
@import url('./assets/tokens/base.css');

body{margin:0;background:var(--paper-100);color:var(--text-strong);font-family:var(--font-sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--pay-500)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:14px 20px;background:transparent;box-sizing:border-box}
.navrow{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px;padding:0 26px;border-radius:16px;background:color-mix(in oklch,var(--ink-900) 56%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:0;box-shadow:0 14px 40px -16px rgba(6,10,22,.55)}
.wm{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:24px;color:#fff;display:flex;align-items:center;flex:none}
.wm img{height:25px;display:block}
.navmenu{display:flex;align-items:center;justify-content:space-between;gap:20px;flex:1;min-width:0}
.navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.navlinks a{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-200)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:#fff}
.navactions{display:flex;align-items:center;gap:18px;flex:none}
.navsignin{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-200)}
.navsignin:hover{color:#fff}
.navcta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:#fff;background:var(--pay-500);padding:12px 20px;border-radius:999px;transition:transform .18s var(--ease-out,ease),background .2s;flex:none;white-space:nowrap}
.navcta:hover{background:var(--pay-600)}
/* Menu dropdown: opens on hover (pointer devices), click and keyboard */
.navdrop{position:relative;display:flex;align-items:center;gap:6px}
.navdrop-link{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-200)}
.navdrop-link:hover,.navdrop-link.is-current,.navdrop.open .navdrop-link{color:#fff}
.navdrop-link+.navdrop-btn{color:var(--warm-200);padding:4px 2px}
.navdrop:hover .navdrop-link+.navdrop-btn{color:#fff}
.navdrop-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;line-height:inherit;cursor:pointer;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-200)}
.navdrop-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.navdrop-btn:hover,.navdrop-btn.is-current,.navdrop.open .navdrop-btn{color:#fff}
.navdrop.open .navdrop-btn svg{transform:rotate(180deg)}
.navdrop-menu{display:none;position:absolute;top:100%;left:-16px;margin-top:0;padding-top:22px;min-width:230px;z-index:2}
.navdrop-menu::before{content:"";position:absolute;inset:14px 0 0;border-radius:14px;background:color-mix(in oklch,var(--ink-900) 94%,transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 18px 40px -14px rgba(6,10,22,.6);border:1px solid color-mix(in oklch,var(--paper-100) 10%,transparent);z-index:-1}
.navdrop-menu a{display:block;padding:10px 18px;white-space:nowrap}
.navdrop-menu a:first-child{margin-top:8px}
.navdrop-menu a:last-child{margin-bottom:8px}
.navdrop.open .navdrop-menu{display:block}
@media(hover:hover) and (min-width:861px){.navdrop:hover .navdrop-menu{display:block}.navdrop:hover .navdrop-btn{color:#fff}}
@media(prefers-reduced-motion:reduce){.navdrop-btn svg{transition:none}}
.navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:0;cursor:pointer;padding:0;flex:none}
.navtoggle span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s var(--ease-out,ease),opacity .2s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  nav{padding:10px 16px}
  .navrow{height:54px;padding:0 18px;border-radius:14px}
  .wm img{height:21px}
  .navtoggle{display:flex;width:34px;height:34px}
  .navtoggle span{width:20px}
  .navmenu{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;flex-direction:column;align-items:stretch;gap:22px;background:color-mix(in oklch,var(--ink-900) 92%,transparent);backdrop-filter:blur(18px) saturate(1.5);border-radius:16px;padding:22px 24px;box-shadow:0 14px 40px -16px rgba(6,10,22,.55)}
  .navmenu.open{display:flex}
  .navlinks{flex-direction:column;align-items:flex-start;gap:18px}
  .navlinks a{font-size:15px}
  .navdrop-btn,.navdrop-link{font-size:15px}
  .navdrop{flex-wrap:wrap}
  .navdrop-menu{position:static;flex:0 0 100%;padding:6px 0 0 22px;min-width:0}
  .navdrop-menu::before{display:none}
  .navdrop-menu a{padding:9px 0;font-size:15px}
  .navdrop-menu a:first-child{margin-top:6px}
  .navdrop-menu a:last-child{margin-bottom:0}
  .navactions{flex-direction:column;align-items:stretch;gap:12px}
  .navactions .navsignin,.navactions .navcta{display:flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;text-align:center}
  .navactions .navsignin{background:var(--pay-300);color:var(--ink-900)}
  .navactions .navsignin:hover{background:color-mix(in oklch,var(--pay-300) 78%,#fff);color:var(--ink-900)}
}
/* a mouse pointer over a group opens it in the small-screen menu too (taps and keys still toggle it) */
@media(hover:hover) and (max-width:860px){.navdrop:hover .navdrop-menu{display:block}.navdrop:hover .navdrop-btn{color:#fff}.navdrop:hover .navdrop-btn svg{transform:rotate(180deg)}}

/* HERO · full-bleed video */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0a1020}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero .scrim{position:absolute;inset:0;background:
   linear-gradient(90deg,rgba(8,13,26,.94) 0%,rgba(8,13,26,.62) 34%,rgba(8,13,26,.12) 62%,transparent 80%),
   linear-gradient(0deg,rgba(8,13,26,.86) 0%,transparent 40%)}
.hero .glow{position:absolute;top:-20%;left:-10%;width:60%;height:120%;background:radial-gradient(closest-side,color-mix(in oklch,var(--pay-500) 46%,transparent),transparent 72%);opacity:.55;pointer-events:none}
/* Guaranteed clearance from the fixed nav, at every viewport size: the hero
   box only has min-height (a floor, not a cap), so it grows to fit content
   with no slack left above it once content exceeds one screen's height —
   which can happen at ANY width, not just narrow ones, since the headline's
   font-size scales with vw and a wide-but-short window hits the same issue
   a narrow-but-tall one does. Reserving real top padding here fixes it
   unconditionally instead of trying to guess which viewport sizes are at risk. */
.hero-inner{position:relative;z-index:3;width:100%;padding:112px 0 76px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.htag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:#fff;background:color-mix(in oklch,var(--pay-500) 30%,transparent);border:1px solid color-mix(in oklch,var(--lyte-400) 60%,transparent);padding:8px 15px;border-radius:999px;margin-bottom:26px}
.htag .live{width:7px;height:7px;border-radius:999px;background:#57f2a4;box-shadow:0 0 0 0 rgba(87,242,164,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,242,164,.55)}70%{box-shadow:0 0 0 9px rgba(87,242,164,0)}100%{box-shadow:0 0 0 0 rgba(87,242,164,0)}}
.hero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:.94;font-size:clamp(2.2rem,7.4vw,7.2rem);color:#fff;margin:0 0 18px;max-width:16ch}
.hero h1 .em,.pagehero h1 .em{color:var(--pay-300);opacity:1}
.hero .lead{font-size:21px;line-height:1.5;color:rgba(255,255,255,.86);max-width:44ch;margin:0 0 34px}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
/* CTA BUTTONS: one size system for every primary and secondary button outside the nav bar (.btn-primary, .btn-glass,
   .btn-outline and the outlined "see more" links). 48px tall with 24px side padding below 1024px; 52px with 28px from 1024px up.
   Width always comes from the label: no fixed or shared width. Colours, borders and hover styles stay with each variant. */
:root{--btn-h:48px;--btn-px:24px;--btn-gap:10px;--btn-icon:18px}
@media(min-width:1024px){:root{--btn-h:52px;--btn-px:28px;--btn-gap:12px}}
.btn-primary,.btn-glass,.btn-outline,.seemore a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--btn-gap);min-height:var(--btn-h);padding:12px var(--btn-px);font-family:var(--font-sans);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;border-radius:999px;text-align:center;cursor:pointer}
.btn-primary .mono,.btn-glass .mono,.btn-outline .mono,.seemore a .mono{font-size:var(--btn-icon);line-height:1;letter-spacing:0}
.btn-primary svg,.btn-glass svg,.btn-outline svg{width:var(--btn-icon);height:var(--btn-icon);flex:none}
.btn-primary{background:var(--pay-500);color:#fff;border:none}
/* BUTTON PAIRS: two CTAs in one row (class "cta-pair" on their container) stay side by side on phones. Height and font stay at the
   standard; only the side padding eases (never under 10px) so both labels fit on one row. On the narrowest screens, where they
   can't, the pair wraps to two rows instead of overflowing. */
.cta-pair{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media(max-width:767px){
  .cta-pair>.btn-primary,.cta-pair>.btn-glass,.cta-pair>.btn-outline{white-space:nowrap;padding-left:clamp(10px,calc((100vw - 314px) / 4),var(--btn-px));padding-right:clamp(10px,calc((100vw - 314px) / 4),var(--btn-px))}
}
.btn-primary:hover{background:var(--pay-600)}
.btn-glass{display:inline-flex;align-items:center;color:#fff;border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.05);backdrop-filter:blur(4px)}
.btn-glass:hover{background:rgba(255,255,255,.14)}

/* floating live cards on hero */
.floatcol{display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.fcard{width:290px;background:color-mix(in oklch,var(--paper-0) 96%,transparent);border-radius:20px;padding:18px 20px;box-shadow:0 24px 60px -24px rgba(6,12,28,.7);border:1px solid rgba(255,255,255,.5)}
.fcard.wide{width:330px}
.fcard .top{display:flex;align-items:center;justify-content:space-between}
.fcard .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted)}
.fcard .pill{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:color-mix(in oklch,var(--success) 16%,transparent);color:var(--success)}
.fcard .amt{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:34px;color:var(--ink-900);margin:8px 0 2px;line-height:1}
.fcard .sub{font-size:12.5px;color:var(--text-body)}
.fcard .rowb{display:flex;align-items:center;gap:12px;margin-top:4px}
.fcard .rowb .av{width:38px;height:38px;border-radius:999px;background-size:cover;background-position:center 15%;flex:none}
.fcard .rowb b{font-size:14px;display:block;color:var(--ink-900)}
.fcard .rowb span{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-muted)}
.fcard .spark{margin-top:12px}

/* TRUST MARQUEE */
.trust{background:var(--ink-900);color:var(--warm-300);padding-top:26px;padding-bottom:26px;border-bottom:1px solid color-mix(in oklch,var(--paper-100) 10%,transparent);overflow:hidden}
.trust .lbl{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-400);text-align:center;margin-bottom:16px;padding:0 clamp(20px,4vw,48px)}
.marq{display:flex;gap:64px;width:max-content;animation:scroll 26s linear infinite}
.marq span{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.02em;color:color-mix(in oklch,var(--paper-100) 60%,transparent);white-space:nowrap}
@keyframes scroll{to{transform:translateX(-50%)}}

/* SECTION SHELL (shared across pages) */
/* SECTION SPACING: one vertical rhythm for every standard content section, set by a single token.
   56px phones / 72px tablets / 80px desktop / 96px large desktop. Hero banners, page headers and the footer CTA
   block are separate components and keep their own spacing. Add class "section-pad" to a section that is not a .block. */
:root{--section-pad:56px}
@media(min-width:768px){:root{--section-pad:72px}}
@media(min-width:1024px){:root{--section-pad:80px}}
@media(min-width:1440px){:root{--section-pad:96px}}
section.block,.section-pad{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
.eyebrow{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--pay-500);display:flex;align-items:center;gap:12px}
.sec-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:var(--lh-heading);font-size:var(--fs-h2);margin:18px 0 0}
.sec-lead{font-size:var(--fs-lead);line-height:var(--lh-caption);color:var(--text-body);max-width:52ch;margin:20px 0 0}

/* Generic page hero (for interior pages without full video hero) */
.pagehero{background:var(--ink-900);color:#fff;padding-top:180px;padding-bottom:96px;position:relative;overflow:hidden}
/* First fold: one shared minimum height on laptops and up so every inner page opens the same; content centred within it */
@media(min-width:961px){
  .pagehero,.btc-top{min-height:650px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
  .pagehero>*,.btc-top>*{width:100%}
}
.pagehero::before{content:"";position:absolute;top:-30%;right:-10%;width:56%;height:150%;background:radial-gradient(closest-side,color-mix(in oklch,var(--pay-500) 42%,transparent),transparent 70%);opacity:.5;pointer-events:none}
.pagehero .eyebrow{color:var(--pay-300)}
.pagehero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(2.8rem,5.6vw,5.2rem);margin:18px 0 0;max-width:18ch;color:#fff;position:relative;z-index:1}
.pagehero p{font-size:20px;line-height:1.5;color:var(--warm-200);max-width:52ch;margin:20px 0 0;position:relative;z-index:1}

/* APP SHOWCASE (dark) */
.app{background:var(--ink-900);color:var(--paper-100);position:relative;overflow:hidden}
.app::before{content:"";position:absolute;top:-30%;right:-6%;width:52%;height:150%;background:radial-gradient(closest-side,color-mix(in oklch,var(--pay-500) 42%,transparent),transparent 70%);opacity:.5;pointer-events:none}
.app .eyebrow{color:var(--pay-300)}
.app .sec-title{color:#fff}
.appgrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;margin-top:8px}
.app .bento{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.bcard{border:1px solid color-mix(in oklch,var(--paper-100) 13%,transparent);border-radius:20px;padding:26px;background:color-mix(in oklch,var(--paper-100) 4%,transparent)}
.bcard.span{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:20px}
.bcard .ic{width:44px;height:44px;border-radius:12px;background:color-mix(in oklch,var(--pay-500) 24%,transparent);display:flex;align-items:center;justify-content:center;color:var(--pay-300);margin-bottom:18px}
.bcard .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bcard h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;font-size:var(--fs-h4);margin:0 0 8px;line-height:var(--lh-heading)}
.bcard p{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--warm-200);margin:0}
.bcard.span .big{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:52px;line-height:1;color:var(--pay-300)}
.bcard.span .rt{font-size:15px;line-height:1.45;color:var(--warm-200);max-width:26ch}

/* PHONE MOCKUP */
.phonewrap{position:relative;display:flex;justify-content:center}
.phonewrap::after{content:"";position:absolute;inset:6% 12%;background:radial-gradient(closest-side,color-mix(in oklch,var(--pay-500) 55%,transparent),transparent 72%);filter:blur(30px);opacity:.5;z-index:0}
.phone{position:relative;z-index:1;width:340px;background:#05070d;border-radius:46px;padding:10px;box-shadow:0 50px 100px -30px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08)}
.screen{width:100%;background:var(--paper-100);border-radius:38px;overflow:hidden;position:relative}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:110px;height:24px;background:#05070d;border-radius:0 0 15px 15px;z-index:5}
.sbar{display:flex;justify-content:space-between;align-items:center;padding:13px 24px 6px;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ink-900)}
.phead{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 12px}
.phead .m{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:20px;color:var(--ink-900)}
.phead .m span{color:var(--pay-500)}
.phead .pav{width:34px;height:34px;border-radius:999px;background-size:cover;background-position:center 20%}
.pbal{margin:2px 16px 0;border-radius:22px;padding:22px;color:#fff;background:linear-gradient(155deg,var(--pay-500),var(--pay-600));position:relative;overflow:hidden}
.pbal::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:999px;background:rgba(255,255,255,.12)}
.pbal .k{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;opacity:.9}
.pbal .amt{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:40px;line-height:1.04;margin:8px 0 2px}
.pbal .sub{font-size:12.5px;opacity:.9}
.pbal .cta{margin-top:16px;width:100%;background:#fff;color:var(--pay-700);border:none;border-radius:999px;padding:13px;font-family:var(--font-sans);font-weight:600;font-size:15px}
.pfeats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:18px 14px 6px}
.pf{display:flex;flex-direction:column;align-items:center;gap:7px}
.pf .ic{width:46px;height:46px;border-radius:14px;background:var(--pay-100);display:flex;align-items:center;justify-content:center}
.pf .ic svg{width:20px;height:20px;stroke:var(--pay-600);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pf span{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--text-body)}
.plist{padding:12px 20px 22px}
.plhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.plhead b{font-family:var(--font-display);font-weight:700;font-size:15px}
.plhead a{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--pay-600)}
.pdeal{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px;border-top:1px solid var(--paper-300)}
.pdeal .di{width:34px;height:34px;border-radius:10px;background:var(--paper-200);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.pdeal .dm{flex:1}
.pdeal .dm b{font-size:13px}
.pdeal .dm span{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;color:var(--text-muted);margin-top:1px}
.pdeal .amt{font-weight:700;font-size:13px}
.badge{font-family:var(--font-mono);font-size:8px;letter-spacing:.04em;padding:3px 7px;border-radius:999px;background:color-mix(in oklch,var(--success) 16%,transparent);color:var(--success)}

/* HOW IT WORKS */
.how{background:var(--paper-100)}
/* Process / step flow — vertical rail per design.md, not a horizontal N-up
   grid: a dashed hairline rail with outlined (not solid-fill) number chips,
   each step a flat hairline card, no shadow, no arrows, same at every width */
.steps{display:flex;flex-direction:column;gap:20px;margin-top:56px;margin-left:20px;padding-left:36px;border-left:1px dashed color-mix(in oklch,var(--pay-500) 55%,transparent)}
.step{position:relative;background:var(--surface-card);border:1px solid var(--border-soft);border-radius:16px;padding:26px 28px;transition:border-color .2s ease}
.step:hover{border-color:var(--pay-300)}
.step .n{position:absolute;left:-56px;top:26px;width:40px;height:40px;border-radius:999px;background:var(--paper-100);border:1.5px solid var(--pay-500);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--pay-600)}
.step h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);letter-spacing:-.01em;margin:0 0 8px;line-height:var(--lh-heading)}
.step p{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--text-body);margin:0}
.step .tick{position:absolute;top:28px;right:28px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--pay-500)}

/* WALL OF AGENTS (testimonials) */
.wall{background:var(--ink-900);color:var(--paper-100);position:relative}
.wall .eyebrow{color:var(--pay-300)}
.wall .sec-title{color:#fff}
.wall .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.wall .headstat{text-align:right;flex:none}
.wall .headstat b{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:64px;line-height:.9;color:var(--pay-300);display:block}
.wall .headstat span{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-300);margin-top:8px;display:block}
.masonry{columns:4;column-gap:18px;margin-top:56px}
@media(max-width:1100px){.masonry{columns:3}}
.tcard{break-inside:avoid;margin-bottom:18px;border-radius:20px;overflow:hidden;position:relative;display:block}
.tcard.photo{color:#fff;background:#141a29}
.tcard.photo .im{position:absolute;inset:0;background-size:cover;background-position:center 22%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.tcard.photo:hover .im{transform:scale(1.06)}
.tcard.photo .scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(8,13,26,.5) 62%,rgba(8,13,26,.94))}
.tcard.photo .body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:22px}
.tcard.photo .q{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;line-height:1.14;font-size:19px;margin:0 0 14px}
.tcard.photo .who b{font-size:14px;display:block}
.tcard.photo .who span{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.04em;color:var(--pay-300);margin-top:2px;display:block;line-height:var(--lh-caption)}
.tcard.tall{aspect-ratio:3/4.4}
.tcard.med{aspect-ratio:3/3.6}
.tcard.quote{padding:28px 26px;background:var(--pay-500);color:#fff}
.tcard.quote.dark{background:color-mix(in oklch,var(--paper-100) 6%,transparent);border:1px solid color-mix(in oklch,var(--paper-100) 14%,transparent)}
.tcard.quote .mk{font-family:var(--font-serif);font-style:italic;font-size:64px;line-height:.2;height:26px;opacity:.5}
.tcard.quote .q{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.16;font-size:22px;margin:0 0 20px}
.tcard.quote .who b{font-size:14px;display:block}
.tcard.quote .who span{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.04em;opacity:.82;margin-top:2px;display:block;line-height:var(--lh-caption)}
.tcard.quote .stars{display:flex;gap:3px;margin-bottom:14px;font-size:13px;color:#ffd27a}

/* FEES */
.fees{background:var(--paper-100)}
.feegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.feecard{background:var(--paper-0);border:1px solid var(--paper-300);border-radius:24px;padding:34px 30px}
.feecard .amt{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:44px;color:var(--pay-500);margin:0 0 6px}
.feecard h4{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h4);margin:0 0 8px;line-height:var(--lh-heading)}
.feecard p{font-size:var(--fs-body);line-height:var(--lh-copy);color:var(--text-body);margin:0}

/* BIG CTA */
.cta{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--pay-500),var(--pay-700));color:#fff;text-align:center;padding-top:64px;padding-bottom:64px}
.cta::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:80%;height:160%;background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent 70%);pointer-events:none}
.cta .in{position:relative;z-index:2}
.cta h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;font-size:var(--fs-h2);margin:0 0 12px;line-height:var(--lh-heading);text-wrap:balance}
.cta h2 .nowrap{white-space:nowrap}
.cta h2 .em{color:#fff;opacity:.92}
.cta p{font-size:var(--fs-lead);color:rgba(255,255,255,.9);margin:0 0 28px;text-wrap:balance;line-height:var(--lh-caption)}
.cta .btn-primary{background:#fff;color:var(--pay-700)}
.cta .btn-primary{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,background .2s ease}
.cta .btn-primary:hover,.cta .btn-primary:focus-visible{background:var(--paper-200);transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(8,13,26,.45)}
@media(max-width:520px){.cta{padding-top:56px;padding-bottom:56px}.cta p{font-size:var(--fs-lead);line-height:var(--lh-caption)}}
@media(prefers-reduced-motion:reduce){.cta .btn-primary{transition:background .2s ease}.cta .btn-primary:hover,.cta .btn-primary:focus-visible{transform:none}}
.cta .stores{display:flex;gap:12px;justify-content:center;margin-top:22px;font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.85)}

/* App Store / Google Play badges — recreated as SVG/CSS since this is a
   code repo, not the official downloadable badge artwork. Swap for the
   real assets before launch if brand guidelines require the originals. */
.storebadges{display:flex;gap:12px;flex-wrap:wrap}
.storebadge{display:inline-flex;align-items:center;gap:10px;background:#000;border:1px solid #a6a6a6;border-radius:8px;padding:8px 14px;color:#fff;transition:background .2s ease}
.storebadge:hover{background:#1a1a1a}
.storebadge-icon{width:22px;height:22px;flex:none;color:#fff}
.storebadge-play{clip-path:polygon(0 0,100% 50%,0 100%);background:linear-gradient(135deg,#00d9ff 0 25%,#00f076 25% 50%,#ffcd00 50% 75%,#ff3a44 75% 100%)}
.storebadge-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.storebadge-text em{font-style:normal;font-family:var(--font-sans);font-size:9px;letter-spacing:.02em}
.storebadge-text b{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-.01em}
.cta .storebadges{justify-content:center;margin-top:22px}
footer .storebadges{margin-top:20px}

/* FOOTER */
footer{background:var(--ink-900);color:var(--warm-200);padding-top:64px;padding-bottom:40px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
footer .wm{font-size:26px;margin-bottom:12px}
footer .wm img{height:30px}
footer .tagline{max-width:28ch;font-size:14px;color:var(--warm-300);line-height:1.5}
footer h5{font-family:var(--font-mono);font-size:14px;letter-spacing:.04em;color:var(--warm-400);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer ul a{font-size:14px;color:var(--warm-200)}
footer ul a:hover{color:#fff}
.footlegal{margin-top:48px;padding-top:28px;border-top:1px solid color-mix(in oklch,var(--paper-100) 12%,transparent)}
.footlegal p{margin:0 0 16px;max-width:none;font-size:13px;line-height:1.6;color:var(--warm-400)}
.footlegal p:last-child{margin-bottom:0}
.footlegal a{color:var(--warm-200);text-decoration:underline;text-underline-offset:2px}
.footlegal a:hover{color:#fff}

@media(max-width:960px){
  .hero-grid,.appgrid,.wall .head,.feegrid{grid-template-columns:1fr}
  .floatcol{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .masonry{columns:2}
  .footgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .steps{margin-left:6px;padding-left:26px}
  .step .n{left:-42px;width:34px;height:34px;font-size:13px}
}
@media(max-width:640px){
  .footgrid{grid-template-columns:1fr}
  .masonry{columns:1}
}

/* LARGE SCREENS: no extra scaling. The layout keeps the same sizing it has on a laptop;
   the content stays centred at its maximum width. */

/* SMOOTH SCROLL for in-page links (e.g. the hero's "How It Works" button).
   scroll-margin keeps the target clear of the fixed nav. */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:60px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}