/* =====================================================================
   Lulu Ledger — shared marketing-page styles
   Extracted from the approved homepage (prototype/index.html) so the
   /features, /how-it-works, /pricing and /compare pages match it exactly.
   Tokens per docs/LULU_LEDGER_DESIGN_SYSTEM.md §16. The homepage keeps its
   own inline copy of these rules; do not diverge values without updating both.
   ===================================================================== */

/* ================= tokens ================= */
:root{
  --white:#FFFFFF;
  --azure:#EFFAFF;
  --blue:#00BFFF;
  --navy:#06446A;
  --pink:#FF557E;
  --navy-deep:#052E4C;
  --navy-ink:#0B2E47;
  --muted:#4A6B84;
  --muted-light:#B9D5E8;
  --hairline:#E1EDF5;
  --panel:#F7FBFE;
  --green:#14A05F;
  --green-chip-bg:#E3F7EE;
  --pink-chip-bg:#FFE9EF;
  --orange:#F5A93B;
  --colgray:#8B98A5;
  --colgreen:#2BBF83;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Manrope', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --pink-accessible:#D6335F;

  --space-gutter:40px;
  --space-gutter-mobile:24px;
  --space-section-tight:72px;
  --space-section-quiet:88px;
  --space-section:104px;
  --space-section-loose:120px;

  --container:1120px;
  --container-narrow:860px;
  --container-faq:760px;

  --radius-pill:999px;
  --radius-full:50%;
  --radius-sm:12px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-sm:0 1px 0 rgba(6,68,106,.06),0 18px 40px -12px rgba(2,25,42,.45);
  --shadow-md:0 24px 60px -22px rgba(4,38,63,.18);
  --shadow-lg:0 40px 90px -20px rgba(4,38,63,.5);
  --shadow-xl:0 50px 110px -32px rgba(4,38,63,.5);
  --shadow-cta-pink:0 10px 30px rgba(255,85,126,.35);
  --shadow-glow-blue:0 0 0 10px rgba(0,191,255,.07),0 0 44px rgba(0,191,255,.35);

  --text-kicker-size:12px;
  --text-kicker-tracking:.16em;
  --text-h2-size:clamp(30px,3.4vw,44px);
  --text-body-size:17px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:#fff;
  color:var(--navy-ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ================= marketing nav ================= */
.mnav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;gap:20px;
  transition:background .3s ease;
}
.mnav .logo{height:30px;width:auto}
.mnav .logo.light{display:block}
.mnav .logo.color{display:none}
body.lit .mnav .logo.light{display:none}
body.lit .mnav .logo.color{display:block}
body.lit .mnav{background:#FFFFFF;box-shadow:0 1px 0 var(--hairline),0 6px 24px -12px rgba(4,38,63,.12)}
.mnav .cta{
  font:800 15px/1 var(--sans);color:#fff;background:var(--pink);
  border-radius:999px;padding:12px 22px;text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.mnav .cta:hover{background:#E8446C}
.mnav .cta:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.mnav .links{display:flex;align-items:center;gap:6px;flex:1;justify-content:center}
.mnav .navitem{position:relative}
.mnav .navitem > button,
.mnav .navitem > a.plain{
  display:flex;align-items:center;gap:5px;
  font:700 14.5px/1 var(--sans);color:#EAF5FD;background:none;border:none;cursor:pointer;
  padding:10px 13px;border-radius:8px;text-decoration:none;
}
body.lit .mnav .navitem > button,
body.lit .mnav .navitem > a.plain{color:var(--navy)}
.mnav .navitem > button:hover,.mnav .navitem > a.plain:hover{background:rgba(127,180,214,.14)}
body.lit .mnav .navitem > button:hover,body.lit .mnav .navitem > a.plain:hover{background:var(--azure)}
.mnav .navitem > button:focus-visible,.mnav .navitem > a.plain:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mnav .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65}
.mnav .menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:210px;background:#fff;border:1px solid var(--hairline);border-radius:12px;
  box-shadow:0 18px 44px -14px rgba(4,38,63,.30);padding:8px;
  opacity:0;visibility:hidden;transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.mnav .navitem:hover .menu,.mnav .navitem:focus-within .menu,
.mnav .navitem.open .menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mnav .menu a{
  display:block;font:600 13.5px/1 var(--sans);color:var(--navy-ink);
  text-decoration:none;padding:10px 12px;border-radius:8px;white-space:nowrap;
}
.mnav .menu a:hover{background:var(--azure);color:var(--navy)}
.mnav .navright{display:flex;align-items:center;gap:16px}
.mnav .login{font:700 14.5px/1 var(--sans);color:#EAF5FD;text-decoration:none;padding:10px 4px}
body.lit .mnav .login{color:var(--navy)}
.mnav .login:hover{text-decoration:underline}
.mnav .burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:4px}
.mnav .burger i{display:block;width:20px;height:2.5px;border-radius:2px;background:#EAF5FD}
body.lit .mnav .burger i{background:var(--navy)}

.mobilemenu{
  position:fixed;inset:60px 0 auto 0;z-index:49;background:#fff;
  border-bottom:1px solid var(--hairline);box-shadow:0 24px 48px -18px rgba(4,38,63,.30);
  padding:10px 18px 18px;max-height:calc(100vh - 60px);overflow-y:auto;
}
.mobilemenu details{border-bottom:1px solid var(--hairline)}
.mobilemenu summary{
  font:800 15px/1 var(--sans);color:var(--navy);padding:15px 4px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.mobilemenu summary::-webkit-details-marker{display:none}
.mobilemenu summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.mobilemenu details[open] summary::after{transform:rotate(-135deg)}
.mobilemenu details a,.mobilemenu a.top{
  display:block;font:600 14.5px/1 var(--sans);color:var(--muted);text-decoration:none;padding:11px 14px;
}
.mobilemenu a.top{font:800 15px/1 var(--sans);color:var(--navy);padding:15px 4px;border-bottom:1px solid var(--hairline)}
.mobilemenu .mrow{display:flex;align-items:center;gap:14px;padding-top:16px}
.mobilemenu .login{font:700 15px/1 var(--sans);color:var(--navy);text-decoration:none;padding:12px 10px}
.mobilemenu .mcta{
  flex:1;text-align:center;font:800 15px/1 var(--sans);color:#fff;background:var(--pink);
  border-radius:999px;padding:14px 18px;text-decoration:none;
}

/* ================= page hero (subpages) ================= */
.pagehero{
  padding:158px var(--space-gutter) 76px;text-align:center;
  background:
    radial-gradient(46% 58% at 22% 22%,rgba(0,191,255,.12),transparent 70%),
    radial-gradient(40% 52% at 82% 70%,rgba(0,191,255,.08),transparent 70%),
    linear-gradient(180deg,#F3FBFF, var(--azure) 60%, #F8FDFF);
}
.pagehero.dark{
  background:linear-gradient(150deg,#04263F 0%,var(--navy-deep) 30%,var(--navy) 62%,#0A5580 100%);
}
.pagehero .in{max-width:820px;margin:0 auto}
.pagehero .kicker{margin-bottom:16px}
.pagehero.dark .kicker{color:var(--blue)}
.pagehero h1{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(34px,4.6vw,56px);line-height:1.14;letter-spacing:-0.8px;text-wrap:balance;
}
.pagehero.dark h1{color:#fff}
.pagehero h1 em{font-style:italic;color:#0E86B8}
.pagehero.dark h1 em{color:var(--blue)}
.pagehero .sub{
  font:500 17px/1.65 var(--sans);color:var(--muted);
  max-width:56ch;margin:18px auto 0;
}
.pagehero.dark .sub{color:var(--muted-light)}
.pagehero .ctarow{margin-top:30px}
.pagehero .nocard{font:600 13.5px/1.45 var(--sans);color:#93A8B8;margin-top:14px}
.pagehero.dark .nocard{color:#7FA8C6}

/* ================= shared section grammar ================= */
.sec{padding:var(--space-section) var(--space-gutter)}
.sec.tight{padding:var(--space-section-tight) var(--space-gutter)}
.sec.quiet{padding:var(--space-section-quiet) var(--space-gutter)}
.sec .in{max-width:var(--container);margin:0 auto}
.sec.white{background:#fff}
.sec.azure{background:var(--azure)}
.sec.navyband{background:linear-gradient(160deg,#04304F 0%,var(--navy) 55%,#0A5580 100%);color:#DCEEF9}
.sec,.pagecta,.truststrip{scroll-margin-top:70px}
.kicker{font:800 var(--text-kicker-size)/1.4 var(--sans);letter-spacing:var(--text-kicker-tracking);text-transform:uppercase;color:var(--pink-accessible);margin-bottom:14px}
.sec.navyband .kicker{color:var(--blue)}
.sec h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:var(--text-h2-size);line-height:1.18;letter-spacing:-0.4px;text-wrap:balance;
  max-width:22ch;
}
.sec.navyband h2{color:#fff}
.sec .centered{text-align:center}
.sec .centered h2{margin:0 auto}
.sec .sub{font:500 var(--text-body-size)/1.65 var(--sans);color:var(--muted);max-width:58ch;margin-top:16px}
.sec.navyband .sub{color:#AFCFE4}
.sec .centered .sub{margin-left:auto;margin-right:auto}
.textlink{font:700 15px/1 var(--sans);color:var(--navy);text-decoration:none;border-bottom:2px solid var(--blue);padding-bottom:2px}
.textlink:hover{color:#032E4A}
.btn-pink{
  display:inline-block;font:800 16px/1 var(--sans);color:#fff;background:var(--pink);
  border-radius:999px;padding:15px 28px;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.btn-pink:hover{background:#E8446C;transform:translateY(-1px)}
.btn-pink:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-blue{
  display:inline-block;font:800 14px/1 var(--sans);color:var(--navy);background:var(--blue);
  border-radius:999px;padding:13px 22px;text-decoration:none;
  transition:background .2s ease,transform .2s ease;
}
.btn-blue:hover{background:#4FD4FF;transform:translateY(-1px)}
.btn-blue:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ================= product-card language (matches real product data) ================= */
.card{
  background:#fff;border-radius:10px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.kpi-head{
  background:var(--navy);color:#fff;
  font:800 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  padding:9px 12px;border-radius:10px 10px 0 0;
}
.kpi-body{padding:10px 12px 12px;position:relative}
.kpi-val{font:800 24px/1.1 var(--sans);color:var(--navy-ink);font-variant-numeric:tabular-nums}
.kpi-meta{position:absolute;right:12px;top:10px;text-align:right}
.kpi-meta .vs{font:600 8.5px/1.4 var(--sans);color:#93A8B8}
.chip{display:inline-block;font:800 9.5px/1 var(--sans);border-radius:999px;padding:4px 7px;font-variant-numeric:tabular-nums}
.chip.up{background:var(--green-chip-bg);color:var(--green)}
.chip.down{background:var(--pink-chip-bg);color:var(--pink-accessible)}
.bars{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:10px}
.bars i{flex:1;border-radius:2px 2px 0 0;min-height:2px}
.bars.green i{background:linear-gradient(180deg,#2BBF83,#BDEBD6)}
.bars.pink i{background:linear-gradient(180deg,#FF557E,#FFD3DF)}
.bars.orange i{background:linear-gradient(180deg,#F5A93B,#FBE3BC)}
.bars.navy i{background:linear-gradient(180deg,#06446A,#B9D5E8)}
.mons{display:flex;gap:3px;margin-top:4px}
.mons b{flex:1;font:600 5.5px/1 var(--sans);color:#A9BCCA;text-align:center}

.colcard{border-radius:10px;overflow:hidden;background:#fff}
.colhead{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--sans);color:#fff;padding:11px 12px}
.colhead .pct{font:800 8.5px/1 var(--sans);background:rgba(3,28,46,.35);border-radius:999px;padding:3px 6px}
.colhead.gray{background:var(--colgray)}
.colhead.green{background:var(--colgreen)}
.colhead.orange{background:var(--orange)}
.colhead.navy{background:var(--navy)}
.colsum{display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px 12px;background:#fff}
.colsum .n{font:800 30px/1 var(--sans);color:var(--navy-ink)}
.colsum .lb{font:600 8.5px/1.4 var(--sans);color:#93A8B8;margin-top:6px}
.colsum .fig{text-align:right}
.colsum .fig .l{font:600 8.5px/1.5 var(--sans);color:#93A8B8}
.colsum .fig .v{font:800 12.5px/1.35 var(--sans);color:var(--navy-ink);font-variant-numeric:tabular-nums}

.deal{background:#fff;border:1px solid var(--hairline);border-radius:9px;padding:9px 12px}
.deal .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.deal .nm{font:800 12.5px/1.3 var(--sans);color:var(--navy-ink)}
.deal .tag{font:700 8px/1 var(--sans);letter-spacing:.05em;color:var(--muted);background:var(--panel);border:1px solid var(--hairline);border-radius:4px;padding:3px 6px}
.deal .ad{font:500 10.5px/1.5 var(--sans);color:#7A93A6;margin-top:3px}
.deal .row{display:flex;justify-content:space-between;font:500 10.5px/1.7 var(--sans);color:#7A93A6;font-variant-numeric:tabular-nums}
.deal .row b{color:var(--navy-ink);font-weight:800}
.deal .row .g{color:var(--green);font-weight:800}
.deal .row .late{color:var(--pink-accessible);font-weight:700}

.bdown{padding:12px 14px}
.bdown .t{font:800 13px/1.25 var(--sans);letter-spacing:.03em;color:var(--navy-ink);text-transform:uppercase}
.bdown .r{font:600 11px/1.7 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.bdown .r b{color:var(--navy-ink)}
.bdown .r.neg{color:var(--pink-accessible)}
.bdown .net{font:800 17px/1.4 var(--sans);color:var(--green);font-variant-numeric:tabular-nums}
.rmatch{padding:12px 14px}
.rmatch .t{font:800 13px/1.2 var(--sans);letter-spacing:.04em;color:var(--navy-ink);text-transform:uppercase}
.rmatch .r{font:600 11px/1.7 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.rmatch .ok{color:var(--green);font-weight:800}

/* ================= outcome rows + product shots ================= */
.outcome{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.outcome.flip .otext{order:2}
.outcome.flip .ovis{order:1}
.outcome .caps{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.outcome .caps span{font:600 14.5px/1.5 var(--sans);color:var(--muted);display:flex;gap:10px;align-items:baseline}
.outcome .caps span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--blue);flex:none;position:relative;top:-1px}
.ovis .shot{
  background:#fff;border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(4,38,63,.25);
}
.shot .shead,.screenframe .shead{background:var(--navy);display:flex;align-items:center;gap:8px;padding:10px 14px}
.shot .shead img,.screenframe .shead img{height:16px;width:auto}
.shot .shead em,.screenframe .shead em{font-style:normal;font:800 10px/1 var(--sans);letter-spacing:.08em;color:#fff}
.shot .sbody{padding:18px}
.screenframe{
  max-width:940px;margin:56px auto 0;
  background:#0A1D30;border-radius:18px;padding:10px;
  box-shadow:var(--shadow-xl);
}
.screenframe .shead{border-radius:9px 9px 0 0;padding:11px 16px}
.screencrop{aspect-ratio:2164/1140;overflow:hidden;background:#fff;border-radius:0 0 9px 9px;position:relative}
.screencrop img{width:108.4%;max-width:none;margin-left:-4.07%;margin-top:-25.6%;display:block}

/* deal economics visual */
.becon .brow{display:flex;justify-content:space-between;font:600 13.5px/2 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.becon .brow b{color:var(--navy-ink);font-weight:800}
.becon .brow .neg{color:var(--pink-accessible);font-weight:700}
.becon .netpill{
  display:flex;justify-content:space-between;align-items:center;background:var(--green-chip-bg);
  border-radius:9px;padding:11px 14px;margin:10px 0;
  font:800 15px/1 var(--sans);color:var(--green);font-variant-numeric:tabular-nums;
}
.becon .profitpill{
  display:flex;justify-content:space-between;align-items:center;background:var(--navy);
  border-radius:9px;padding:12px 14px;margin-top:12px;
  font:800 15px/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums;
}
/* planning allocations: reserve set-asides taken off deal profit */
.becon .allocs{
  background:var(--azure);border:1px solid #D6EBF7;border-radius:10px;
  padding:12px 14px;margin-top:12px;
}
.becon .allocs .at{
  font:800 9.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:#5C7C93;margin-bottom:9px;
}
.becon .allocs .arow{
  display:flex;justify-content:space-between;gap:12px;
  font:600 12.5px/1.95 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;
}
.becon .allocs .arow b{color:var(--navy-ink);font-weight:800}
.becon .allocs .aavail{
  display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid #D6EBF7;margin-top:7px;padding-top:8px;
  font:800 13px/1.5 var(--sans);color:var(--green);font-variant-numeric:tabular-nums;
}
.becon .allocs .anote{font:500 9.5px/1.55 var(--sans);color:#93A8B8;margin-top:9px}
/* transactions visual */
.btxn .trow{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hairline)}
.btxn .trow:last-child{border-bottom:none}
.btxn .cat{font:700 10px/1.3 var(--sans);color:var(--green);background:var(--green-chip-bg);border-radius:5px;padding:4px 7px;justify-self:start}
.btxn .cat.exp{color:#B8781A;background:#FDF0DC}
.btxn .tn{font:700 13px/1.35 var(--sans);color:var(--navy-ink)}
.btxn .ts{font:600 10.5px/1.4 var(--sans);color:#93A8B8}
.btxn .tv{font:800 13px/1.3 var(--sans);color:var(--navy-ink);font-variant-numeric:tabular-nums}
.btxn .tv.pos{color:var(--green)}
.btxn .matchbar{
  display:flex;align-items:center;gap:10px;background:#FDF6E8;border:1px solid #F2DFB6;
  border-radius:9px;padding:10px 12px;margin-bottom:12px;
}
.btxn .matchbar .mi{font:800 12px/1.4 var(--sans);color:#8A6410}
.btxn .matchbar .mb{margin-left:auto;font:800 11px/1 var(--sans);color:#fff;background:#E9962E;border-radius:999px;padding:7px 12px;white-space:nowrap}
/* performance visual */
.bperf .prow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.bperf .pcell{border:1px solid var(--hairline);border-radius:10px;padding:12px 14px;background:#fff}
.bperf .pt{font:800 9.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#93A8B8}
.bperf .pv{font:800 21px/1.25 var(--sans);color:var(--navy-ink);font-variant-numeric:tabular-nums}
.bperf .pd{font:700 10.5px/1.4 var(--sans);color:var(--green)}
.bperf .insight{
  margin-top:14px;background:var(--panel);border:1px solid var(--hairline);border-radius:9px;
  padding:12px 14px;font:600 12.5px/1.6 var(--sans);color:var(--muted);
}
.bperf .insight b{color:var(--navy)}

/* ================= how-it-works: beam + step cards ================= */
.beamwrap{position:relative;height:36px;margin-top:52px}
.beamwrap .line{
  position:absolute;left:9%;right:9%;top:50%;height:2px;transform:translateY(-50%);
  background:#C2E4F5;border-radius:2px;overflow:hidden;
}
.beamwrap .line::after{
  content:"";position:absolute;top:0;left:-35%;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,var(--blue) 45%,#7FDFFF 55%,transparent);
  animation:beam 3s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes beam{to{left:100%}}
.beamwrap .bdot{
  position:absolute;top:50%;transform:translate(-50%,-50%);
  width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--blue);
  box-shadow:0 0 0 5px rgba(0,191,255,.16);
}
@media (prefers-reduced-motion:reduce){.beamwrap .line::after{animation:none;display:none}}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-top:16px}
.step{
  background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:26px;
  box-shadow:0 14px 34px -18px rgba(4,38,63,.14);
  transition:transform .2s ease,box-shadow .2s ease;
}
.step:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(4,38,63,.22)}
.step .num{
  width:46px;height:46px;border-radius:50%;margin-bottom:16px;
  background:linear-gradient(160deg,#F2FBFF,var(--azure));border:2px solid var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:22px;color:var(--navy);
}
.step h3{font:800 17px/1.35 var(--sans);color:var(--navy);margin-bottom:8px}
.step p{font:500 14.5px/1.6 var(--sans);color:var(--muted)}
.step .mins{display:inline-block;margin-top:14px;font:800 10.5px/1 var(--sans);letter-spacing:.06em;color:#0E86B8;background:#E2F6FF;border-radius:999px;padding:6px 10px}

/* ================= trust strip ================= */
.truststrip{background:#fff;border-bottom:1px solid var(--hairline);padding:34px 40px}
.truststrip.topline{border-top:1px solid var(--hairline)}
.truststrip .in{max-width:var(--container);margin:0 auto;display:flex;justify-content:space-between;align-items:stretch;gap:20px;flex-wrap:wrap}
.titem{display:flex;align-items:center;gap:14px;flex:1;min-width:230px}
.titem + .titem{border-left:1px solid var(--hairline);padding-left:24px}
.tico{
  width:44px;height:44px;border-radius:12px;flex:none;color:var(--navy);
  background:linear-gradient(160deg,#F2FBFF,var(--azure));border:1px solid #D6ECF7;
  display:flex;align-items:center;justify-content:center;
}
.tico svg{width:22px;height:22px}
.titem b{display:block;font:800 13.5px/1.35 var(--sans);color:var(--navy)}
.titem small{display:block;font:600 11.5px/1.45 var(--sans);color:#7A93A6;margin-top:2px}

/* ================= pricing ================= */
.pgrid{display:grid;grid-template-columns:1fr 1.06fr;gap:28px;max-width:var(--container-narrow);margin:56px auto 0;align-items:start}
.plan{
  background:#fff;border:1px solid var(--hairline);border-radius:18px;padding:34px 34px 30px;
  position:relative;display:flex;flex-direction:column;
  box-shadow:0 18px 44px -24px rgba(4,38,63,.16);
}
.plan.best{
  border:2px solid var(--pink);
  box-shadow:0 0 0 6px rgba(255,85,126,.10),0 36px 80px -28px rgba(196,30,80,.35);
  transform:translateY(-10px);
  padding:42px 38px 34px;
}
.plan .save{
  display:inline-block;align-self:flex-start;margin-top:12px;
  font:800 11px/1 var(--sans);letter-spacing:.05em;color:var(--green);
  background:var(--green-chip-bg);border-radius:999px;padding:6px 10px;
}
.plan.best .price{font-size:52px}
.plan .flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font:800 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--pink);border-radius:999px;padding:8px 14px;white-space:nowrap;
}
.plan h3{font:800 15px/1.4 var(--sans);color:var(--navy);letter-spacing:.02em}
.plan .was{font:700 14px/1.4 var(--sans);color:#B4C7D4;text-decoration:line-through;margin-top:14px}
.plan .price{font:800 44px/1.05 var(--sans);color:var(--navy-ink);font-variant-numeric:tabular-nums}
.plan .price small{font:700 15px;color:var(--muted)}
.plan .pnote{font:600 13px/1.55 var(--sans);color:var(--muted);margin-top:8px}
.plan .pnote b{color:var(--green);font-weight:800}
.plan .btn-pink{margin-top:22px;text-align:center}
.plan .ghost{
  display:inline-block;margin-top:22px;text-align:center;font:800 16px/1 var(--sans);color:var(--navy);
  border:2px solid var(--navy);border-radius:999px;padding:13px 28px;text-decoration:none;
}
.plan .ghost:hover{background:var(--azure)}
.plan .ghost:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.plan .trial{font:600 12px/1.5 var(--sans);color:#93A8B8;text-align:center;margin-top:10px}
.pshared{max-width:820px;margin:30px auto 0;text-align:center}
.pshared p{font:600 13.5px/1.7 var(--sans);color:var(--muted)}
.pshared .feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:14px}
.pshared .feats span{font:700 12.5px/1.5 var(--sans);color:var(--navy);display:flex;gap:6px;align-items:baseline}
.pshared .feats span::before{content:"✓";color:var(--green);font-weight:800}
.founderbar{
  max-width:var(--container-narrow);margin:38px auto 0;background:#fff;border:1px solid var(--hairline);
  border-left:4px solid var(--pink);border-radius:12px;
  padding:18px 24px;text-align:left;font:600 13.5px/1.7 var(--sans);color:var(--muted);
  box-shadow:0 12px 30px -18px rgba(4,38,63,.14);
}
.founderbar b{color:var(--navy);font-weight:800}

/* ================= comparison table ================= */
.cmpwrap{overflow-x:auto;margin-top:56px;border:1px solid var(--hairline);border-radius:14px;background:#fff}
.cmp{border-collapse:collapse;width:100%;min-width:640px}
.cmp th{
  font:800 11.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:16px 18px;border-bottom:2px solid var(--hairline);
}
.cmp th.lulu{color:#fff;background:var(--navy);border-radius:0}
.cmp td{padding:15px 18px;border-bottom:1px solid var(--hairline);font:600 14px/1.5 var(--sans);color:var(--muted);vertical-align:top}
.cmp tr:last-child td{border-bottom:none}
.cmp td.rowlab{font-weight:800;color:var(--navy-ink)}
.cmp td.lulu{background:var(--azure);color:var(--navy);font-weight:800}
/* ✓ and ✕ share one metric set so the two marks match in family, size,
   weight, alignment, and spacing; only the color differs. */
.cmp .yes,.cmp .no{
  font:800 14px/1.5 var(--sans);font-style:normal;
  display:inline-block;vertical-align:baseline;margin-right:2px;
}
.cmp .yes{color:var(--green)}
.cmp .no{color:#E23A5F}
.cmp col.c-lab{width:31%}
.cmp col.c-brand{width:23%}

/* ================= vs cards (deal-first vs transaction-first) ================= */
.vsrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.vscard{
  background:#E8F4FB;border:1px solid #BFDEF0;border-radius:14px;padding:26px 28px;
  text-align:left;
}
.vscard.lulu{
  background:#FFFFFF;border:2px solid var(--blue);
  box-shadow:0 0 0 6px rgba(0,191,255,.14),0 22px 50px -18px rgba(0,60,100,.55);
}
.vscard h4{font:800 12.5px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#5C7C93;margin-bottom:10px}
.vscard.lulu h4{color:#0E86B8}
.vscard p{font:500 15px/1.6 var(--sans);color:var(--navy-ink);max-width:44ch}
.vscard p b{color:var(--navy)}

/* ================= FAQ ================= */
.faqlist{max-width:var(--container-faq);margin:48px auto 0}
.faqlist details{background:#fff;border:1px solid var(--hairline);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faqlist summary{
  font:800 15.5px/1.45 var(--sans);color:var(--navy);padding:19px 22px;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{
  content:"+";font:600 22px/1 var(--sans);color:var(--blue);flex:none;transition:transform .15s;
}
.faqlist details[open] summary::after{transform:rotate(45deg)}
.faqlist details p{font:500 14.5px/1.7 var(--sans);color:var(--muted);padding:0 22px 20px;max-width:66ch}
.faqlist details p b{color:var(--navy-ink)}
.faqlist details ol,.faqlist details ul{font:500 14.5px/1.7 var(--sans);color:var(--muted);margin:0 0 20px;padding:0 22px 0 44px;max-width:66ch}
.faqlist details ol{list-style:decimal}
.faqlist details ul{list-style:disc}
.faqlist details li{margin-bottom:4px}
.faqlist details li::marker{color:var(--blue)}
.faqlist details li b{color:var(--navy-ink)}

/* ================= grouped FAQ / help-center sections (shared by /faq, /help) ================= */
.faqgroup{max-width:var(--container-faq);margin:0 auto 56px;scroll-margin-top:80px}
.faqgroup:last-child{margin-bottom:0}
.faqgroup .gk{
  font:800 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink-accessible);margin-bottom:16px;text-align:left;
}
.faqgroup:nth-of-type(3n+2) .gk{color:#0E86B8}
.faqgroup:nth-of-type(3n) .gk{color:var(--navy)}
.faqgroup .faqlist{margin-top:0}
.stillstuck{
  max-width:var(--container-faq);margin:64px auto 0;text-align:center;
  background:var(--panel);border:1px solid var(--hairline);border-radius:14px;padding:28px 30px;
}
.stillstuck b{display:block;font:800 17px/1.4 var(--sans);color:var(--navy);margin-bottom:6px}
.stillstuck p{font:500 14px/1.7 var(--sans);color:var(--muted)}

/* light-surface jump nav (help center category chips) */
.jumprow2{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:30px;max-width:820px;margin-left:auto;margin-right:auto}
.jumprow2 a{
  font:800 12px/1 var(--sans);color:var(--navy);text-decoration:none;
  border:1px solid var(--hairline);border-radius:999px;padding:9px 15px;
  background:#fff;transition:background .2s ease,border-color .2s ease;
}
.jumprow2 a:hover{background:var(--azure);border-color:#BFDEF0}
.jumprow2 a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ================= development placeholder (matches homepage pendingbox) ================= */
.pendingbox{
  border:1.5px dashed #C9DBE8;border-radius:10px;background:var(--panel);
  padding:14px 16px;font:800 11.5px/1.5 var(--sans);letter-spacing:.1em;color:#93A8B8;
}
.pendingbox small{display:block;font:600 11px/1.5 var(--sans);letter-spacing:0;text-transform:none;margin-top:4px}

/* ================= page-closing CTA (no gradient text — that is a
   homepage-only approved exception) ================= */
.pagecta{
  position:relative;text-align:center;padding:112px var(--space-gutter) 108px;overflow:hidden;
  background:
    radial-gradient(46% 58% at 24% 30%,rgba(0,191,255,.20),transparent 70%),
    radial-gradient(40% 52% at 82% 74%,rgba(0,191,255,.12),transparent 70%),
    linear-gradient(rgba(6,68,106,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,68,106,.045) 1px,transparent 1px),
    #F7FCFF;
  background-size:auto,auto,56px 56px,56px 56px,auto;
}
.pagecta h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:clamp(34px,4.8vw,58px);line-height:1.12;letter-spacing:-1px;text-wrap:balance;
  max-width:20ch;margin:0 auto;
}
.pagecta h2 em{font-style:italic;color:#0E86B8}
.pagecta .sub{font:600 18px/1.6 var(--sans);color:var(--muted);margin-top:22px}
.pagecta .btn-pink{margin-top:36px;font-size:18px;padding:19px 40px;box-shadow:0 16px 40px rgba(255,85,126,.38)}
.pagecta .nocard{font:700 14px/1.45 var(--sans);color:#93A8B8;margin-top:16px}

/* ================= legal / policy pages ================= */
.legalwrap{max-width:760px;margin:0 auto;padding:64px var(--space-gutter) 96px}
.legalmeta{
  background:var(--panel);border:1px solid var(--hairline);border-radius:12px;
  padding:16px 20px;margin-bottom:40px;
  font:600 13px/1.8 var(--sans);color:var(--muted);
}
.legalmeta b{color:var(--navy-ink)}
.legaltext h2{
  font-family:var(--serif);font-weight:600;color:var(--navy);
  font-size:24px;line-height:1.3;letter-spacing:-0.2px;
  margin:44px 0 12px;
}
.legaltext h3{font:800 15.5px/1.45 var(--sans);color:var(--navy-ink);margin:26px 0 8px}
.legaltext p{font:500 15px/1.75 var(--sans);color:var(--muted);margin:0 0 14px}
.legaltext p b{color:var(--navy-ink)}
.legaltext ul{margin:0 0 16px;padding-left:22px}
.legaltext li{font:500 15px/1.75 var(--sans);color:var(--muted);margin-bottom:4px}
.legaltext a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--blue)}
.legaltext a:hover{color:#032E4A}
@media (max-width:900px){.legalwrap{padding:48px var(--space-gutter-mobile) 72px}}

/* ================= footer ================= */
.footer{position:relative;background:#04304F;color:#B9D5E8;overflow:hidden}
.footer .brand a.btn-blue{
  display:inline-block;margin-top:22px;padding:13px 22px;
  font:800 14px/1 var(--sans);color:var(--navy);
}
.footer .fin{position:relative;max-width:var(--container);margin:0 auto;padding:92px 40px 0}
.footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:56px}
.footer .brand img{height:30px;width:auto}
.footer .brand p{font:500 14px/1.6 var(--sans);color:#7FA8C6;margin-top:16px;max-width:26ch}
.footer .brand .flogin{display:block;font:700 13.5px/1 var(--sans);color:#B9D5E8;text-decoration:none;margin-top:16px}
.footer .brand .flogin:hover{color:#fff}
.footer .footer-heading{font:800 11px/1.4 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:#6E96B4;margin-bottom:18px}
.footer .cols a{display:block;font:600 13.5px/1.5 var(--sans);color:#B9D5E8;text-decoration:none;padding:6px 0;transition:color .15s ease,transform .15s ease}
.footer .cols a:hover{color:#fff;transform:translateX(2px)}
.footer .legal{
  border-top:1px solid #12507A;margin-top:64px;padding:24px 0 20px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
.footer .legal span{font:600 12.5px/1.5 var(--sans);color:#6E96B4}
.footer .legal .llinks{display:flex;flex-wrap:wrap;gap:10px 22px}
.footer .legal a{font:600 12.5px/1.5 var(--sans);color:#9CC3DD;text-decoration:none}
.footer .legal a:hover{color:#fff}
.footer .disclaimer{position:relative;font:500 11.5px/1.6 var(--sans);color:#5C86A5;padding:0 0 28px;max-width:86ch}

/* ================= responsive ================= */
@media (max-width:1080px){
  .mnav .links{display:none}
  .mnav .login{display:none}
  .mnav .burger{display:flex}
  .footer .cols{grid-template-columns:1fr 1fr 1fr}
  .footer .brand{grid-column:1/-1}
}
@media (max-width:900px){
  .sec{padding:76px var(--space-gutter-mobile)}
  .sec.tight{padding:56px var(--space-gutter-mobile)}
  .sec.quiet{padding:64px var(--space-gutter-mobile)}
  .pagehero{padding:132px var(--space-gutter-mobile) 56px}
  .outcome{grid-template-columns:1fr;gap:40px}
  .outcome.flip .otext{order:1}
  .outcome.flip .ovis{order:2}
  .steps{grid-template-columns:1fr;gap:18px}
  .vsrow{grid-template-columns:1fr;gap:16px}
  .pgrid{grid-template-columns:1fr;gap:22px;max-width:460px}
  .truststrip{padding:22px 18px}
  .truststrip .in{gap:16px}
  .titem{min-width:100%}
  .titem + .titem{border-left:none;padding-left:0}
  .footer .cols{grid-template-columns:1fr 1fr;gap:36px}
  .footer .fin{padding:60px 24px 0}
  .pagecta{padding:84px 24px 80px}
  .bperf .prow{grid-template-columns:1fr}
}
@media (max-width:767px){
  .mnav{padding:14px 18px}
  .mnav .logo{height:24px}
  .mnav .cta{font-size:13px;padding:10px 16px}
}