/* ==========================================================
   NIVESHMART — design system
   Brand colours taken from the logo:
     charcoal #333333 · blue #0089D1 · green #35CB67
   ========================================================== */

:root{
  /* brand */
  --blue:      #0089D1;
  --blue-dk:   #0470AC;
  --blue-lt:   #E6F4FC;
  --green:     #35CB67;
  --green-dk:  #22A650;
  --green-lt:  #E7FAEE;
  --charcoal:  #333333;

  /* neutrals */
  --ink-950:   #0E1216;
  --ink-900:   #14191F;
  --ink-800:   #1D242C;
  --ink-700:   #2B343E;
  --text:      #171C22;
  --muted:     #5B6875;
  --muted-2:   #8996A4;
  --line:      #E3EAF1;
  --line-2:    #EFF3F7;
  --bg:        #FFFFFF;
  --bg-soft:   #F5F9FC;

  /* effects */
  --grad:      linear-gradient(118deg, var(--blue) 0%, #1BAE9A 55%, var(--green) 100%);
  --grad-soft: linear-gradient(118deg, rgba(0,137,209,.10), rgba(53,203,103,.10));
  --r:         16px;
  --r-lg:      22px;
  --sh-1:      0 1px 2px rgba(16,24,40,.04), 0 6px 20px rgba(16,24,40,.05);
  --sh-2:      0 2px 4px rgba(16,24,40,.05), 0 18px 44px rgba(16,24,40,.09);
  --sh-glow:   0 8px 30px rgba(0,137,209,.24);

  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --wrap: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--blue-dk); text-underline-offset:2px; }
button{ font-family:inherit; }

h1,h2,h3,h4,h5{ margin:0 0 .55em; line-height:1.15; letter-spacing:-.025em; font-weight:750; color:var(--text); }
h1{ font-size:clamp(2.2rem,5.2vw,3.75rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.7rem,3.5vw,2.6rem); letter-spacing:-.03em; }
h3{ font-size:1.22rem; font-weight:700; }
h4{ font-size:1.02rem; font-weight:700; }
p{ margin:0 0 1.1em; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:780px; }
.mid{ max-width:940px; }
section{ padding:86px 0; }
section.tight{ padding:56px 0; }
.center{ text-align:center; }
.mx{ margin-left:auto; margin-right:auto; }

/* ---------- type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-dk); margin:0 0 1em;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--grad); border-radius:2px; }
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.lede{ font-size:1.14rem; color:var(--muted); }
.lede-lg{ font-size:1.24rem; color:var(--muted); }
.small{ font-size:.88rem; color:var(--muted); }
.tiny{ font-size:.775rem; color:var(--muted-2); line-height:1.55; }
.mb0{ margin-bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-size:.97rem; font-weight:700; letter-spacing:-.01em;
  padding:.88em 1.6em; border-radius:11px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:.17s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
}
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--sh-glow); background-size:150% 150%; }
.btn-primary:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,137,209,.32); background-position:100% 0; }
.btn-dark{ background:var(--ink-900); color:#fff; }
.btn-dark:hover{ background:var(--ink-800); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue-dk); transform:translateY(-2px); }
.btn-ghost-d{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-ghost-d:hover{ background:rgba(255,255,255,.09); border-color:#fff; color:#fff; }
.btn-sm{ font-size:.88rem; padding:.66em 1.15em; border-radius:9px; }
.btn-lg{ font-size:1.04rem; padding:1.02em 1.9em; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
}
.head-in{ max-width:var(--wrap); margin:0 auto; padding:11px 24px; display:flex; align-items:center; gap:8px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand img{ height:38px; width:auto; }
.brand-txt{ font-size:1.16rem; font-weight:800; letter-spacing:-.03em; color:var(--charcoal); line-height:1.1; }
.brand-txt em{ font-style:normal; color:var(--blue); }
.brand-sub{ display:block; font-size:.56rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

.nav{ display:flex; align-items:center; gap:4px; }
.nav > a, .nav-drop > button{
  display:flex; align-items:center; gap:5px;
  font-size:.92rem; font-weight:600; color:var(--muted); text-decoration:none;
  padding:9px 13px; border-radius:9px; background:none; border:0; cursor:pointer;
  transition:.15s;
}
.nav > a:hover, .nav-drop > button:hover{ color:var(--text); background:var(--bg-soft); }
.nav > a.active{ color:var(--blue-dk); background:var(--blue-lt); }
.nav .btn{ margin-left:8px; }

.nav-drop{ position:relative; }
.nav-drop > button::after{ content:"▾"; font-size:.7em; opacity:.6; }
.drop{
  position:absolute; top:calc(100% + 6px); left:0; min-width:236px;
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-2);
  padding:8px; display:none; z-index:210;
}
.nav-drop.open .drop{ display:block; }
.drop a{
  display:block; padding:9px 12px; border-radius:9px; font-size:.9rem; font-weight:600;
  color:var(--muted); text-decoration:none;
}
.drop a:hover{ background:var(--bg-soft); color:var(--blue-dk); }
.drop small{ display:block; font-weight:500; font-size:.76rem; color:var(--muted-2); }

.burger{
  display:none; background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:9px 11px; cursor:pointer; line-height:1;
}
@media (max-width:1040px){
  .burger{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:2px; background:#fff; border-bottom:1px solid var(--line);
    padding:10px 20px 22px; max-height:78vh; overflow:auto; box-shadow:var(--sh-2);
  }
  .nav.open{ display:flex; }
  .nav > a, .nav-drop > button{ padding:12px 10px; width:100%; }
  .drop{ position:static; display:block; box-shadow:none; border:0; border-left:2px solid var(--line);
         border-radius:0; margin:0 0 6px 10px; padding:0 0 0 6px; min-width:0; }
  .nav .btn{ margin:12px 0 0; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink-950); color:#fff;
  padding:96px 0 108px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 460px at 12% -8%, rgba(0,137,209,.34), transparent 62%),
    radial-gradient(680px 440px at 92% 8%, rgba(53,203,103,.22), transparent 62%);
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 500px at 50% 0%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(900px 500px at 50% 0%, #000, transparent 75%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero h1{ color:#fff; }
.hero .lede-lg{ color:rgba(255,255,255,.72); max-width:640px; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } .hero{ padding:64px 0 74px; } }

.pill{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:7px 15px 7px 9px; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  font-size:.79rem; font-weight:650; color:rgba(255,255,255,.86);
}
.pill b{ background:var(--grad); color:#fff; padding:2px 9px; border-radius:100px; font-size:.71rem; font-weight:750; }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(53,203,103,.22); }

/* hero card (replaces the photo) */
.hero-card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-lg); padding:26px; backdrop-filter:blur(12px);
}
.hero-card h4{ color:#fff; font-size:.94rem; margin-bottom:4px; }
.hero-card .tiny{ color:rgba(255,255,255,.5); }
.hc-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.09); }
.hc-row:last-of-type{ border-bottom:0; }
.hc-ic{
  flex:0 0 40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); font-size:1.05rem;
}
.hc-row div{ min-width:0; }
.hc-row strong{ display:block; font-size:.91rem; color:#fff; font-weight:700; }
.hc-row span{ font-size:.79rem; color:rgba(255,255,255,.55); }

/* ---------- stat strip ---------- */
.stats{ background:var(--ink-900); border-top:1px solid rgba(255,255,255,.07); }
.stats-in{ max-width:var(--wrap); margin:0 auto; padding:34px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stat b{ display:block; font-size:2.1rem; font-weight:800; letter-spacing:-.04em; line-height:1;
         background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat span{ display:block; margin-top:7px; font-size:.82rem; color:rgba(255,255,255,.55); font-weight:550; }
@media (max-width:760px){ .stats-in{ grid-template-columns:1fr 1fr; gap:26px 18px; } }

/* ---------- AMC logo marquee ---------- */
.marquee{ overflow:hidden; padding:18px 0; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.amc{
  flex:0 0 auto; display:flex; align-items:center; gap:10px;
  padding:9px 18px 9px 9px; border:1px solid var(--line); border-radius:100px;
  background:#fff; white-space:nowrap; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.amc-mark{
  display:grid; place-items:center; height:30px; min-width:30px; padding:0 9px;
  border-radius:100px; color:#fff; font-size:.63rem; font-weight:800; letter-spacing:.04em;
}
.amc-logo{ height:30px; width:auto; max-width:76px; object-fit:contain; }
.amc-name{ font-size:.85rem; font-weight:650; color:var(--text); }

/* ---------- grids & cards ---------- */
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:.2s cubic-bezier(.4,0,.2,1); position:relative;
}
.card p:last-child{ margin-bottom:0; }
.card-hov:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:transparent; }
a.card{ text-decoration:none; color:inherit; display:block; }
.ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-soft); font-size:1.28rem; margin-bottom:16px;
}
.card-num{
  font-size:.78rem; font-weight:800; color:var(--blue); letter-spacing:.06em;
  font-family:var(--mono); margin-bottom:10px;
}

/* feature card with gradient top edge */
.card-edge::before{
  content:""; position:absolute; inset:0 0 auto; height:3px; border-radius:var(--r) var(--r) 0 0;
  background:var(--grad); opacity:0; transition:.2s;
}
.card-edge:hover::before{ opacity:1; }

/* ---------- bands ---------- */
.band-soft{ background:var(--bg-soft); }
.band-dark{ background:var(--ink-950); color:#fff; position:relative; overflow:hidden; }
.band-dark::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(680px 400px at 78% 110%, rgba(0,137,209,.26), transparent 60%);
}
.band-dark .wrap{ position:relative; z-index:2; }
.band-dark h2,.band-dark h3,.band-dark h4{ color:#fff; }
.band-dark .lede,.band-dark .lede-lg{ color:rgba(255,255,255,.7); }
.band-dark .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.11); color:#fff; }
.band-dark .card .small,.band-dark .card p{ color:rgba(255,255,255,.66); }
.band-dark .eyebrow{ color:var(--green); }

/* ---------- steps (journey) ---------- */
.journey{ position:relative; display:grid; gap:0; }
.journey::before{
  content:""; position:absolute; left:23px; top:34px; bottom:34px; width:2px;
  background:linear-gradient(var(--blue),var(--green));
  opacity:.28;
}
.jstep{ display:grid; grid-template-columns:48px 1fr; gap:22px; padding:16px 0 26px; position:relative; }
.jnum{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-weight:800; font-size:1.02rem;
  box-shadow:0 4px 14px rgba(0,137,209,.26); position:relative; z-index:2;
}
.jstep h3{ margin-bottom:.3em; }
.jstep p:last-child{ margin-bottom:0; }
@media (max-width:620px){
  .journey::before{ left:19px; }
  .jnum{ width:40px; height:40px; font-size:.92rem; }
  .jstep{ grid-template-columns:40px 1fr; gap:16px; }
}

/* ---------- accordion (FAQ) ---------- */
.acc{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.acc-item + .acc-item{ border-top:1px solid var(--line); }
.acc-q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:19px 54px 19px 22px; font-size:1rem; font-weight:700; color:var(--text);
  position:relative; line-height:1.4;
}
.acc-q::after{
  content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; font-weight:400; color:var(--blue); transition:.2s;
}
.acc-item.open .acc-q::after{ transform:translateY(-50%) rotate(45deg); }
.acc-a{ display:none; padding:0 22px 21px; color:var(--muted); font-size:.96rem; }
.acc-item.open .acc-a{ display:block; }
.acc-a p:last-child{ margin-bottom:0; }

/* ---------- testimonials ---------- */
.tcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; }
.tcard .quote{ font-size:1.02rem; line-height:1.6; color:var(--text); margin-bottom:18px; }
.tcard .quote::before{ content:"\201C"; color:var(--blue); font-size:2.2rem; line-height:0; vertical-align:-.32em; margin-right:3px; }
.tmeta{ display:flex; align-items:center; gap:12px; }
.tav{
  width:42px; height:42px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--grad); color:#fff; font-weight:800; font-size:.94rem;
}
.tmeta strong{ display:block; font-size:.92rem; }
.tmeta span{ font-size:.79rem; color:var(--muted-2); }

/* ---------- forms ---------- */
.field{ margin-bottom:17px; }
.field label{ display:block; font-size:.86rem; font-weight:700; margin-bottom:7px; }
.field .req{ color:#D9453B; }
.field input,.field select,.field textarea{
  width:100%; font-family:inherit; font-size:.98rem; color:var(--text);
  padding:.76em .9em; border:1.5px solid var(--line); border-radius:11px; background:#fff;
  transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3.5px rgba(0,137,209,.13);
}
.field textarea{ min-height:104px; resize:vertical; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:600px){ .f2{ grid-template-columns:1fr; } }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:.87rem; color:var(--muted); }
.check input{ width:auto; margin-top:4px; flex:0 0 auto; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-1); }
.msg{ display:none; padding:14px 16px; border-radius:11px; font-size:.92rem; margin-bottom:16px; }
.msg.err{ display:block; background:#FDECEA; border:1px solid #F5C6C0; color:#8C2E20; }
.msg.ok{ display:block; background:var(--green-lt); border:1px solid #B6E9C8; color:#166B36; }
.done{ display:none; text-align:center; padding:14px 0; }
.done.show{ display:block; }
/* NOTE: this is .tick-badge, NOT .tick — .tick is the bullet list further down.
   They collided before and the circle styling was leaking onto every checklist. */
.tick-badge{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--grad);
        color:#fff; font-size:1.7rem; display:grid; place-items:center; }
.hide{ display:none !important; }

/* ---------- range sliders (calculators) ---------- */
.slider-row{ margin-bottom:22px; }
.slider-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:9px; }
.slider-top label{ font-size:.88rem; font-weight:650; color:var(--muted); }
.slider-val{
  font-size:1.02rem; font-weight:800; color:var(--blue-dk); font-variant-numeric:tabular-nums;
  background:var(--blue-lt); padding:3px 11px; border-radius:8px; white-space:nowrap;
}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:100px;
  background:var(--line); outline:none; padding:0; border:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--blue); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--blue);
  cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.result-box{ background:var(--ink-950); color:#fff; border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden; }
.result-box::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(420px 260px at 90% 0%, rgba(53,203,103,.24), transparent 62%); }
.result-box > *{ position:relative; z-index:2; }
.rb-main{ font-size:2.5rem; font-weight:800; letter-spacing:-.04em; line-height:1.05; margin:6px 0 4px;
          background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rb-lbl{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.rb-split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.rb-split b{ display:block; font-size:1.16rem; font-weight:750; color:#fff; font-variant-numeric:tabular-nums; }
.rb-split span{ font-size:.76rem; color:rgba(255,255,255,.5); }

.calc-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:start; }
@media (max-width:900px){ .calc-grid{ grid-template-columns:1fr; } }

/* tabs */
.tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:28px; }
.tab{
  padding:.62em 1.15em; border-radius:100px; border:1.5px solid var(--line); background:#fff;
  font-size:.89rem; font-weight:700; color:var(--muted); cursor:pointer; transition:.16s;
}
.tab:hover{ border-color:var(--blue); color:var(--blue-dk); }
.tab.active{ background:var(--ink-950); border-color:var(--ink-950); color:#fff; }
.panel{ display:none; }
.panel.active{ display:block; }

/* ---------- risk profiler ---------- */
.pf-shell{ max-width:820px; margin:0 auto; }
.pf-bar{ height:6px; border-radius:100px; background:var(--line); overflow:hidden; margin-bottom:10px; }
.pf-fill{ height:100%; width:0; background:var(--grad); border-radius:100px; transition:width .35s cubic-bezier(.4,0,.2,1); }
.pf-meta{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--muted-2); font-weight:650; margin-bottom:26px; }
.pf-q{ display:none; }
.pf-q.active{ display:block; animation:fadeUp .32s cubic-bezier(.4,0,.2,1); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.pf-q > h3{ font-size:1.42rem; letter-spacing:-.03em; margin-bottom:6px; }
.pf-help{ font-size:.9rem; color:var(--muted); margin-bottom:22px; }
.opts{ display:grid; gap:11px; margin-bottom:26px; }
.opt{
  display:flex; align-items:flex-start; gap:13px; padding:16px 18px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:13px; background:#fff; transition:.16s; text-align:left; width:100%;
}
.opt:hover{ border-color:var(--blue); background:var(--blue-lt); }
.opt.sel{ border-color:var(--blue); background:var(--blue-lt); box-shadow:0 0 0 3.5px rgba(0,137,209,.11); }
.opt-k{
  flex:0 0 26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--bg-soft); border:1px solid var(--line); font-size:.76rem; font-weight:800; color:var(--muted);
}
.opt.sel .opt-k{ background:var(--blue); border-color:var(--blue); color:#fff; }
.opt strong{ display:block; font-size:.97rem; font-weight:650; line-height:1.45; }
.opt em{ font-style:normal; display:block; font-size:.83rem; color:var(--muted-2); margin-top:2px; }
.pf-nav{ display:flex; justify-content:space-between; gap:12px; }

.score-ring{ width:150px; height:150px; margin:0 auto 18px; position:relative; }
.score-ring svg{ transform:rotate(-90deg); }
.score-ring .val{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
}
.score-ring .val b{ display:block; font-size:2.1rem; font-weight:800; letter-spacing:-.04em; line-height:1; }
.score-ring .val span{ font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }

.alloc{ display:grid; gap:9px; }
.alloc-row{ display:grid; grid-template-columns:112px 1fr 52px; gap:12px; align-items:center; font-size:.89rem; }
.alloc-bar{ height:9px; border-radius:100px; background:var(--line-2); overflow:hidden; }
.alloc-bar i{ display:block; height:100%; border-radius:100px; }
.alloc-row b{ text-align:right; font-variant-numeric:tabular-nums; font-weight:750; }

.badge{
  display:inline-block; padding:5px 13px; border-radius:100px; font-size:.79rem; font-weight:750;
  background:var(--grad-soft); color:var(--blue-dk); border:1px solid rgba(0,137,209,.2);
}

/* ---------- blog ---------- */
.post-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.post-thumb{ height:8px; background:var(--grad); }
.post-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.post-cat{ font-size:.73rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.post-card h3{ font-size:1.08rem; margin-bottom:.45em; }
.post-card .small{ flex:1; }
.post-foot{ margin-top:16px; font-size:.78rem; color:var(--muted-2); display:flex; gap:12px; }

article.prose h2{ font-size:1.6rem; margin-top:1.8em; }
article.prose h3{ font-size:1.18rem; margin-top:1.5em; }
article.prose ul,article.prose ol{ margin:0 0 1.2em; padding-left:1.3em; }
article.prose li{ margin-bottom:.5em; }
article.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.93rem; }
article.prose th,article.prose td{ padding:11px 13px; border:1px solid var(--line); text-align:left; }
article.prose th{ background:var(--bg-soft); font-weight:700; }

/* ---------- tables ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; }
.tbl th,.tbl td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
.tbl th{ background:var(--bg-soft); font-weight:750; font-size:.83rem; letter-spacing:.02em; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl-wrap{ border:1px solid var(--line); border-radius:var(--r); overflow:auto; }

/* ---------- lists ---------- */
.tick,.cross{ list-style:none; padding:0; margin:0 0 1.2em; }
.tick li,.cross li{ position:relative; padding-left:30px; margin-bottom:11px; }
.tick li::before{ content:"✓"; position:absolute; left:0; top:-1px; color:var(--green-dk); font-weight:800; }
.cross li::before{ content:"✕"; position:absolute; left:0; top:-1px; color:#D9453B; font-weight:800; }
.kv{ list-style:none; padding:0; margin:0; }
.kv li{ display:flex; flex-wrap:wrap; gap:8px 16px; padding:12px 0; border-bottom:1px solid var(--line); }
.kv li:last-child{ border-bottom:0; }
.kv b{ flex:0 0 200px; font-size:.9rem; font-weight:700; }
.kv span{ flex:1; min-width:210px; color:var(--muted); font-size:.93rem; }

/* ---------- note ---------- */
.note{ background:#FFF9EC; border:1px solid #F2E2BE; border-radius:13px; padding:16px 19px; font-size:.87rem; color:#6B5420; line-height:1.6; }
.note strong{ color:#4C3B12; }
.note-blue{ background:var(--blue-lt); border-color:#BFE4F7; color:#0B5478; }
.note-blue strong{ color:#083C56; }

/* ---------- page head ---------- */
.page-head{ padding:60px 0 26px; }
.page-head.dark{ background:var(--ink-950); color:#fff; padding:74px 0 78px; position:relative; overflow:hidden; }
.page-head.dark::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(700px 380px at 18% -10%, rgba(0,137,209,.3), transparent 62%); }
.page-head.dark .wrap{ position:relative; z-index:2; }
.page-head.dark h1{ color:#fff; }
.page-head.dark .lede,.page-head.dark .lede-lg{ color:rgba(255,255,255,.72); }
.crumb{ font-size:.8rem; color:var(--muted-2); margin-bottom:14px; }
.crumb a{ color:inherit; text-decoration:none; }
.crumb a:hover{ color:var(--blue); }
.page-head.dark .crumb{ color:rgba(255,255,255,.5); }

/* ---------- footer ---------- */
.site-foot{ background:var(--ink-950); color:rgba(255,255,255,.66); padding:62px 0 26px; font-size:.9rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } }
@media (max-width:540px){ .foot-grid{ grid-template-columns:1fr; } }
.site-foot h5{ font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
               color:rgba(255,255,255,.4); margin:0 0 14px; }
.site-foot a{ color:rgba(255,255,255,.72); text-decoration:none; }
.site-foot a:hover{ color:#fff; }
.fl{ list-style:none; margin:0; padding:0; }
.fl li{ margin-bottom:9px; }
.foot-brand img{ height:42px; margin-bottom:14px; background:#fff; border-radius:9px; padding:4px 7px; }
.reg-block{ border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
            padding:20px 0; margin-bottom:20px; }
.reg-line{ color:#fff; font-weight:700; margin:0 0 6px; font-size:.91rem; }
.reg-ids{ font-size:.83rem; color:rgba(255,255,255,.6); margin:0; }
.disc{ font-size:.775rem; line-height:1.65; color:rgba(255,255,255,.5); }
.disc p{ margin:0 0 9px; }
.foot-base{ display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between;
            padding-top:16px; font-size:.78rem; color:rgba(255,255,255,.42); }

/* ---------- floating whatsapp ---------- */
.wa{
  position:fixed; bottom:22px; right:22px; z-index:180; width:54px; height:54px; border-radius:50%;
  background:#25D366; display:grid; place-items:center; box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:.18s;
}
.wa:hover{ transform:scale(1.07); }
.wa svg{ width:29px; height:29px; fill:#fff; }

/* ---------- scroll reveal ---------- */
.rv{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- admin ---------- */
.adm-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:22px; }
.adm-bar select,.adm-bar input{ padding:.56em .8em; border:1.5px solid var(--line); border-radius:10px; font-family:inherit; font-size:.9rem; }
.chip{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:.74rem; font-weight:750; }
.chip-new{ background:var(--blue-lt); color:var(--blue-dk); }
.chip-mid{ background:#FFF4E0; color:#8A5A0B; }
.chip-won{ background:var(--green-lt); color:var(--green-dk); }
.chip-lost{ background:#F4F5F6; color:var(--muted); }
.drawer{ position:fixed; inset:0; z-index:300; display:none; }
.drawer.open{ display:block; }
.drawer-bg{ position:absolute; inset:0; background:rgba(14,18,22,.5); }
.drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(560px,100%); background:#fff;
               overflow:auto; padding:28px; box-shadow:-8px 0 40px rgba(0,0,0,.18); }

/* ==========================================================
   MODAL — used by the risk profiler result gate
   ========================================================== */
.modal{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:flex-start; justify-content:center; overflow-y:auto; padding:28px 16px;
}
.modal.open{ display:flex; }
.modal-bg{ position:fixed; inset:0; background:rgba(8,12,16,.62); backdrop-filter:blur(4px); }
.modal-box{
  position:relative; z-index:2; width:min(620px,100%); background:#fff;
  border-radius:22px; box-shadow:0 24px 70px rgba(8,12,16,.34); overflow:hidden;
  animation:modalIn .32s cubic-bezier(.34,1.3,.64,1);
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.modal-head{
  position:relative; background:var(--ink-950); color:#fff; padding:28px 30px 26px; overflow:hidden;
}
.modal-head::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(420px 220px at 88% -10%, rgba(53,203,103,.3), transparent 62%),
             radial-gradient(420px 240px at 6% 110%, rgba(0,137,209,.32), transparent 60%);
}
.modal-head > *{ position:relative; z-index:2; }
.modal-head h3{ color:#fff; font-size:1.35rem; margin:0 0 6px; }
.modal-head p{ color:rgba(255,255,255,.68); font-size:.92rem; margin:0; }
.modal-body{ padding:26px 30px 30px; max-height:calc(100vh - 240px); overflow-y:auto; }
.modal-x{
  position:absolute; top:16px; right:16px; z-index:3; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.14); border:0; color:#fff; font-size:1rem; cursor:pointer; line-height:1;
}
.modal-x:hover{ background:rgba(255,255,255,.26); }
@media (max-width:560px){
  /* `align-items:stretch` pinned the box to viewport height, and
     `.modal-box{overflow:hidden}` (there for the rounded corners) then
     clipped everything below the fold — including the submit button, so
     the form could be filled in but never sent. flex-start lets the box
     grow to its content and .modal scrolls it. */
  .modal{ padding:0; align-items:flex-start; overscroll-behavior:contain; }
  .modal-box{
    border-radius:0; min-height:100%; overflow:visible;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .modal-head{ padding:24px 20px 22px; }
  .modal-body{ padding:22px 20px 34px; max-height:none; overflow:visible; }
}

/* result shown inside the modal after submitting */
.mres{ text-align:center; }
.mres .badge{ font-size:.92rem; padding:7px 18px; }
.mres h3{ font-size:1.5rem; margin:14px 0 10px; }
.mres .narration{
  font-size:.97rem; line-height:1.7; color:var(--muted); text-align:left;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  margin:0 0 20px;
}
.mres-alloc{ text-align:left; margin-bottom:20px; }

/* ==========================================================
   PROFILER RESULT — richer layout
   ========================================================== */
.pf-hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--ink-950); color:#fff; padding:40px 32px; text-align:center;
}
.pf-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(520px 300px at 15% -20%, rgba(0,137,209,.34), transparent 62%),
             radial-gradient(520px 320px at 88% 116%, rgba(53,203,103,.26), transparent 60%);
}
.pf-hero > *{ position:relative; z-index:2; }
.pf-hero h2{ color:#fff; font-size:clamp(1.5rem,3.4vw,2.1rem); margin:16px 0 12px; }
.pf-hero .narration{
  max-width:620px; margin:0 auto; color:rgba(255,255,255,.76); font-size:1.02rem; line-height:1.7;
}
.pf-hero .badge{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); color:#fff;
  font-size:.9rem; padding:7px 18px;
}
.score-ring .val b{ color:#fff; }
.pf-hero .score-ring .val span{ color:rgba(255,255,255,.5); }

.alloc-donut{ display:grid; place-items:center; margin-bottom:20px; }
.pf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; align-items:start; }
@media (max-width:820px){ .pf-grid{ grid-template-columns:1fr; } }

/* ==========================================================
   PHONE MOCKUP — app showcase (modelled on the real app)
   ========================================================== */
.phone-stack{
  display:flex; justify-content:center; align-items:flex-end; gap:0;
  padding:10px 0 0;
}
.phone{
  width:236px; flex:0 0 auto; border-radius:32px; padding:7px;
  background:linear-gradient(160deg,#3A434D,#0E1216);
  box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.09) inset;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.phone-stack .phone:nth-child(1){ transform:translateX(30px) scale(.9) rotate(-4deg); z-index:1; }
.phone-stack .phone:nth-child(2){ z-index:3; }
.phone-stack .phone:nth-child(3){ transform:translateX(-30px) scale(.9) rotate(4deg); z-index:2; }
.phone-stack:hover .phone:nth-child(1){ transform:translateX(10px) scale(.92) rotate(-6deg); }
.phone-stack:hover .phone:nth-child(3){ transform:translateX(-10px) scale(.92) rotate(6deg); }

.phone-screen{
  background:#0E1216; border-radius:26px; overflow:hidden; position:relative;
  height:474px; display:flex; flex-direction:column; color:#fff;
}
.phone-notch{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:64px; height:16px; border-radius:100px; background:#0A0D10; z-index:5;
}
.ph-status{
  display:flex; justify-content:space-between; padding:9px 16px 4px;
  font-size:.56rem; font-weight:700; color:rgba(255,255,255,.62);
}
.ph-head{
  display:flex; align-items:center; gap:9px; padding:6px 14px 12px;
}
.ph-ava{
  width:30px; height:30px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; font-size:.66rem; font-weight:800; flex:0 0 auto;
}
.ph-head small{ display:block; font-size:.56rem; color:rgba(255,255,255,.5); }
.ph-head strong{ font-size:.83rem; font-weight:750; }
.ph-back{ font-size:.78rem; color:rgba(255,255,255,.8); padding:8px 14px 10px; font-weight:650; }

.ph-hero{
  margin:0 12px 12px; border-radius:13px; padding:13px 14px;
  background:linear-gradient(135deg,#12A85A,#35CB67); color:#fff;
}
.ph-hero span{ font-size:.55rem; font-weight:800; letter-spacing:.1em; opacity:.86; }
.ph-hero b{ display:block; font-size:1.32rem; font-weight:800; letter-spacing:-.03em; margin-top:2px; }
.ph-hero .pa{ float:right; font-size:.62rem; font-weight:750; opacity:.95; }

.ph-body{ flex:1; overflow:hidden; padding:0 12px; }
.ph-sec{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.55rem; font-weight:800; letter-spacing:.1em;
  color:rgba(255,255,255,.42); margin:12px 2px 7px;
}
.ph-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:10px 11px; margin-bottom:8px;
}
.ph-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ph-row strong{ font-size:.74rem; font-weight:700; }
.ph-row span{ font-size:.62rem; color:rgba(255,255,255,.5); }
.ph-row b{ font-size:.74rem; font-variant-numeric:tabular-nums; font-weight:750; }
.ph-row .up{ color:#5FE08D; font-size:.63rem; font-weight:750; }
.ph-bar{ height:4px; border-radius:100px; background:rgba(255,255,255,.13); margin-top:8px; overflow:hidden; }
.ph-bar i{ display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,#12A85A,#35CB67); }

.ph-tabpills{ display:flex; gap:6px; margin:0 0 11px; }
.ph-tabpills span{
  flex:1; text-align:center; font-size:.57rem; font-weight:750; padding:5px 0;
  border-radius:7px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.55);
}
.ph-tabpills span.on{ background:#fff; color:var(--ink-950); }

.ph-donut{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.ph-legend{ display:grid; gap:3px; font-size:.57rem; color:rgba(255,255,255,.66); }
.ph-legend span{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.ph-legend i{ width:6px; height:6px; border-radius:50%; flex:0 0 auto; }
.ph-legend b{ color:#fff; font-weight:750; }

.ph-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ph-tile{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:10px;
  padding:9px 4px; text-align:center; font-size:.53rem; font-weight:650;
  color:rgba(255,255,255,.78); line-height:1.35;
}
.ph-tile i{ display:block; font-style:normal; font-size:.95rem; margin-bottom:4px; }

.ph-tabs{
  display:flex; justify-content:space-around; align-items:center;
  padding:9px 6px 12px; border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); font-size:.52rem; color:rgba(255,255,255,.45);
  position:relative;
}
.ph-tabs span{ display:grid; gap:2px; justify-items:center; font-weight:650; }
.ph-tabs span.on{ color:#35CB67; }
.ph-tabs i{ font-style:normal; font-size:.85rem; }
.ph-fab{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#12A85A,#35CB67);
  display:grid; place-items:center; color:#fff; font-size:1.05rem; font-weight:700;
  margin-top:-16px; box-shadow:0 4px 14px rgba(53,203,103,.45);
}
.ph-label{ text-align:center; font-size:.76rem; font-weight:650; margin-top:22px; }

@media (max-width:1040px){
  .phone-stack{
    justify-content:flex-start; overflow-x:auto; padding-bottom:14px; gap:14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .phone-stack .phone{ scroll-snap-align:center; }
  .phone-stack .phone:nth-child(1),
  .phone-stack .phone:nth-child(3){ transform:none; }
  .phone-stack:hover .phone:nth-child(1),
  .phone-stack:hover .phone:nth-child(3){ transform:none; }
}

.asset-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0; }
.asset-chip{
  font-size:.76rem; font-weight:650; padding:5px 12px; border-radius:100px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.82);
}

/* ==========================================================
   RISK SCALE — replaces the score ring
   ========================================================== */
.scale{ width:100%; max-width:520px; margin:0 auto; }
.scale-track{
  position:relative; display:flex; gap:3px; height:14px; margin-bottom:9px;
}
.scale-seg{
  flex:1; border-radius:4px; opacity:.32; transition:opacity .3s, transform .3s;
}
.scale-seg.on{ opacity:1; transform:scaleY(1.28); }
.scale-needle{
  position:absolute; top:-8px; transform:translateX(-50%);
  transition:left .9s cubic-bezier(.34,1.2,.64,1);
}
.scale-needle b{
  display:block; background:var(--ink-950); color:#fff; font-size:.78rem; font-weight:800;
  padding:3px 9px; border-radius:7px; line-height:1.3; box-shadow:0 3px 10px rgba(0,0,0,.28);
  position:relative;
}
.scale-needle b::after{
  content:""; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:8px; height:8px; background:var(--ink-950);
}
.scale-labels{
  display:flex; justify-content:space-between; font-size:.72rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px;
}
.scale-keys{ display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:center; }
.scale-key{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.74rem; font-weight:600; color:var(--muted-2); opacity:.62;
}
.scale-key.on{ opacity:1; font-weight:800; color:var(--text); }
.scale-key i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
/* on dark backgrounds */
.pf-hero .scale-labels,.pf-hero .scale-key{ color:rgba(255,255,255,.55); }
.pf-hero .scale-key.on{ color:#fff; }
.pf-hero .scale-needle b{ background:#fff; color:var(--ink-950); }
.pf-hero .scale-needle b::after{ background:#fff; }
@media (max-width:520px){
  .scale-keys{ display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; justify-items:start; }
}

/* locked state after dismissing the capture form */
.pf-lock{
  position:relative; overflow:hidden; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--r-lg); background:#fff;
  padding:40px 30px;
}
.pf-lock-ic{
  width:58px; height:58px; margin:0 auto 18px; border-radius:16px; display:grid; place-items:center;
  background:var(--grad-soft); font-size:1.5rem;
}
.pf-lock .blurred{
  filter:blur(7px); opacity:.45; pointer-events:none; user-select:none; margin:22px 0 4px;
}
.pf-urgency{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  background:#FFF4E0; border:1px solid #F0DCAF; color:#8A5A0B;
  font-size:.79rem; font-weight:750; padding:6px 14px; border-radius:100px;
}

/* what-you-get list inside the modal head area */
.modal-perks{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:9px; }
.modal-perks li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:.86rem; color:rgba(255,255,255,.78); line-height:1.5;
}
.modal-perks li::before{ content:"✓"; color:#5FE08D; font-weight:800; flex:0 0 auto; }

/* ==========================================================
   CALCULATOR NUMBER INPUTS
   ========================================================== */
.slider-top{ gap:10px; }
.num-input{
  width:132px; flex:0 0 auto; text-align:right;
  font-size:.95rem; font-weight:750; color:var(--blue-dk);
  font-variant-numeric:tabular-nums;
  padding:.42em .6em; border:1.5px solid var(--line); border-radius:9px; background:#fff;
  font-family:inherit;
}
.num-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,137,209,.13); }
.num-wrap{ display:inline-flex; align-items:center; gap:6px; }
.num-wrap .unit{ font-size:.8rem; font-weight:700; color:var(--muted-2); }
.num-input::-webkit-outer-spin-button,
.num-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.num-input[type=number]{ -moz-appearance:textfield; }
.num-hint{ font-size:.72rem; color:var(--muted-2); margin-top:5px; }
@media (max-width:480px){
  .slider-top{ flex-wrap:wrap; }
  .num-input{ width:118px; }
}

/* ==========================================================
   COMPACT PAGE HEAD — so content is visible without scrolling
   ========================================================== */
.page-head.dark.compact{ padding:40px 0 42px; }
.page-head.dark.compact h1{ font-size:clamp(1.75rem,3.6vw,2.5rem); margin-bottom:.4em; }
.page-head.dark.compact .lede-lg{ font-size:1.02rem; max-width:640px; }
.page-head.dark.compact .crumb{ margin-bottom:10px; }
.page-head.dark.compact .eyebrow{ margin-bottom:.7em; }
@media (max-width:640px){
  .page-head.dark.compact{ padding:28px 0 30px; }
}

@media print{ .site-head,.site-foot,.wa,.btn{ display:none !important; } }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   PROJECTION LADDER  (risk profiler result)
   ============================================================ */
.proj-ladder { margin: 22px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.pl-row {
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 10px;
  align-items: center; padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .95rem; color: rgba(255,255,255,.82);
}
.pl-row span:nth-child(2), .pl-row b, .pl-row span:nth-child(3) { text-align: right; }
.pl-row b { color: #fff; font-weight: 800; font-size: 1.05rem; }
.pl-head {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.42); border-bottom-color: rgba(255,255,255,.14);
  padding-bottom: 8px;
}
.pl-hi { background: rgba(255,255,255,.05); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.pl-hi b { font-size: 1.18rem; }
@media (max-width: 460px) {
  .pl-row { grid-template-columns: 1fr 1fr; font-size: .88rem; }
  .pl-row span:nth-child(2), .pl-head span:nth-child(2) { display: none; }
}

/* ============================================================
   ADMIN — standalone chrome (no public nav, no footer, no WhatsApp)
   ============================================================ */
.admin-head {
  background: var(--ink-950, #0E1216); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.admin-head-in {
  max-width: 1180px; margin: 0 auto; padding: 13px 22px;
  display: flex; align-items: center; gap: 12px;
}
.admin-head-in img { height: 28px; width: auto; }
.admin-head-in strong { font-size: 1rem; letter-spacing: -.01em; }
.admin-tag {
  margin-left: auto; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.72);
}
.admin-foot { padding: 26px 22px 40px; text-align: center; opacity: .55; }

/* ---- admin: bulk selection + destructive actions ---- */
.bulk-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; margin-bottom: 14px; border-radius: 12px;
  background: #FEF2F2; border: 1px solid #FCA5A5; color: #7F1D1D; font-size: .92rem;
}
.bulk-bar b { font-weight: 800; }
.btn-danger { background: #DC2626; color: #fff; border-color: #DC2626; }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }
.ad-del { color: #B91C1C; padding-left: 9px; padding-right: 9px; }
.ad-del:hover { background: #FEF2F2; border-color: #FCA5A5; }
.tbl .ad-pick { width: 15px; height: 15px; cursor: pointer; }

/* ============================================================
   MOBILE OVERFLOW GUARD
   The app showcase puts three 236px phones inside a grid column.
   Grid and flex children default to min-width:auto, so that column
   refused to shrink below ~710px, pushed the whole document wider
   than the viewport, and clipped every line of body text on the
   right. These rules let children shrink and stop any single
   element from widening the page.
   ============================================================ */
/* NOTE: deliberately `clip`, not `hidden`. `overflow-x:hidden` on html or
   body turns the body into a scroll container, which silently breaks
   `position:sticky` on .site-head — the header would stop sticking on
   scroll. `clip` contains the overflow without that side effect. */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  /* Very old browsers only. Sticky degrades to static there anyway. */
  html, body { overflow-x: hidden; }
}

.grid > *, .g2 > *, .g3 > *, .g4 > *,
.hero-grid > *, .pf-grid > *, .calc-grid > *, .foot-grid > * { min-width: 0; }

.phone-stack { max-width: 100%; }

/* Long unbroken strings (emails, URLs) shouldn't widen the page.
   `break-word` only breaks a word that genuinely cannot fit on its own
   line. The earlier version used `anywhere` and included td/li/p, which
   let the browser break ordinary words mid-syllable — the comparison
   table collapsed into one letter per line. Never use `anywhere` on
   general body copy. */
p, li, td, th, .lede, .lede-lg, .small, .tiny { overflow-wrap: break-word; }
.kv span, a[href^="mailto:"], code { overflow-wrap: anywhere; }

/* Tables scroll inside their own box rather than squeezing columns to
   nothing or stretching the page. */
.tbl-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) {
  .tbl { min-width: 580px; }
  .tbl th, .tbl td { padding: 11px 12px; font-size: .88rem; }
  .tbl-wrap { position: relative; }
}

@media (max-width: 640px) {
  /* Give the phone carousel a little breathing room at the edges so the
     first and last screens don't sit flush against the viewport */
  .phone-stack { padding-left: 2px; padding-right: 2px; }
  .phone { width: 208px; }
  .phone-screen { height: 424px; }
}

/* WhatsApp handoff button on the profiler result */
.btn-wa{ background:#25D366; border-color:#25D366; color:#06251A; font-weight:750; }
.btn-wa:hover{ background:#1EBE5A; border-color:#1EBE5A; color:#04180F; }
.btn-wa::before{ content:"◍"; margin-right:8px; font-size:1.05em; }

/* Investor Login in the header — visually secondary to the primary CTA,
   because the goal of the site is new leads, not returning-client traffic. */
.nav-login{
  border:1px solid var(--line); background:#fff; color:var(--ink-900);
}
.nav-login:hover{ border-color:var(--blue); color:var(--blue); }
@media (max-width:1040px){
  .nav-login{ width:100%; text-align:center; margin-bottom:8px; }
}