/* Reunion HQ — reunionhq.app
   One stylesheet for every page. Brand matched to the app so a customer who
   buys here and opens the app feels one product, not two. */

:root{
  --navy:#01082A;
  --ink:#0B1240;
  --ink-2:#242C56;
  --muted:#4B5287;
  --faint:#8C95C9;
  --paper:#FFFFFF;
  --ground:#F1F3FD;
  --raise:#F7F8FE;
  --line:#E2E6F8;

  --blue:#1A5FF0;
  --orange:#FF7A1A;
  --pink:#F0186E;
  --purple:#8B3FF0;
  --green:#5BC52A;
  --cyan:#10B6E6;
  --gold:#F0B400;
  --red:#E02424;

  --accent:#FF7A1A;
  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(11,18,64,.05), 0 18px 40px -22px rgba(11,18,64,.35);

  --sans:Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:Lexend,Figtree,ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue)}

.wrap{max-width:1080px;margin:0 auto;padding-inline:22px}
.narrow{max-width:760px}

/* ------------------------------------------------------------- test bar */
#testbar{
  display:none;background:#8A1220;color:#fff;text-align:center;
  padding:10px 20px;font-size:14px;font-weight:600;
}
#testbar b{font-weight:800}

/* The bar a referred visitor sees. Green, not red: this is good news, and it
   has to read as a welcome rather than a warning. */
#refbar{
  background:linear-gradient(96deg,#1A5FF0,#8B3FF0);color:#fff;text-align:center;
  padding:10px 20px;font-size:14px;font-weight:600;
}
#refbar[hidden]{display:none}
#refbar b{font-weight:800;margin-right:8px}
#refbar span{opacity:.85}
@media (max-width:560px){
  #refbar b{display:block;margin:0 0 2px}
}

/* ------------------------------------------------------------- top nav */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(1,8,42,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-block:14px}
.nav img{height:30px;width:auto}
.nav .spacer{flex:1}
.nav a{
  color:#C7CEF0;text-decoration:none;font-size:15px;font-weight:600;
  padding:8px 2px;white-space:nowrap;
}
.nav a:hover{color:#fff}
.nav .btn{padding:9px 18px;font-size:14.5px}
@media(max-width:880px){
  .nav a.hide-sm{display:none}
  .nav .wrap{gap:12px}
  .nav img{height:26px}
  .nav a{font-size:14px}
  .nav .btn{padding:9px 14px;font-size:13.5px}
}
@media(max-width:420px){
  .nav a.hide-xs{display:none}
  .nav .wrap{gap:9px}
  .nav img{height:23px}
  .nav a{font-size:13px}
  .nav .btn{padding:8px 12px;font-size:13px}
}

/* ------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:#fff;border:0;border-radius:100px;
  padding:15px 30px;font-family:var(--sans);font-size:16.5px;font-weight:700;
  text-decoration:none;cursor:pointer;line-height:1.2;
  box-shadow:0 10px 24px -12px rgba(255,122,26,.9);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(255,122,26,1)}
.btn.line{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}
.btn.line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn.dark{background:var(--ink);box-shadow:0 10px 24px -14px rgba(11,18,64,.9)}
.btn.wide{width:100%}
.btn:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ------------------------------------------------------------- hero */
.hero{
  background:
    radial-gradient(760px 460px at 88% -18%, rgba(255,122,26,.55), transparent 66%),
    radial-gradient(620px 420px at -10% 110%, rgba(139,63,240,.50), transparent 70%),
    radial-gradient(520px 380px at 55% 125%, rgba(16,182,230,.32), transparent 72%),
    linear-gradient(155deg,#1A2560,#0B1240 54%,#01082A);
  color:#fff;padding-block:64px 52px;position:relative;overflow:hidden;
}
.hero h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(32px,4.2vw,47px);line-height:1.05;margin-bottom:18px;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;background:linear-gradient(96deg,#FFB24D,#FF7A1A 55%,#F0186E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.say{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(18px,2.4vw,23px);line-height:1.35;color:#fff;
  margin-bottom:16px;max-width:22ch;
}
.hero p.lede{
  font-size:clamp(16.5px,2vw,19px);color:#C3CAEE;max-width:50ch;line-height:1.58;
  margin-bottom:28px;
}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .rain{display:flex;height:6px;margin-top:40px;border-radius:99px;overflow:hidden;max-width:420px}
.hero .rain i{flex:1}
.eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.hero .eyebrow{color:#FFB24D}

/* ---------------------------------------------------- the slide deck */
.deck{display:grid}
.slide{
  grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:42px;align-items:center;padding-block:0;min-height:0;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
}
.slide.on{opacity:1;visibility:visible;transform:none}
.slide[hidden]{display:grid}          /* the script owns visibility, not display */
.said{min-width:0}
.art{position:relative;min-width:0;display:flex;justify-content:center;align-items:center}
@media(prefers-reduced-motion:reduce){
  .slide{transition:opacity .01s}
}

.deckbar{display:flex;align-items:center;gap:14px;margin-top:26px}
.arrow{
  width:40px;height:40px;flex:none;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:22px;line-height:1;display:grid;place-items:center;
  font-family:var(--sans);padding-bottom:3px;transition:background .15s ease;
}
.arrow:hover{background:rgba(255,255,255,.22)}
.dots{display:flex;gap:9px;flex-wrap:wrap}
.dots button{
  width:34px;height:6px;border-radius:99px;border:0;cursor:pointer;padding:0;
  background:rgba(255,255,255,.26);transition:background .2s ease,width .2s ease;
}
.dots button[aria-selected="true"]{background:var(--accent);width:48px}
.arrow:focus-visible,.dots button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------------------------------------------------- phone mock */
.phone{
  width:252px;max-width:100%;border-radius:32px;padding:10px;
  background:linear-gradient(160deg,#39406E,#171D48);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.phone.sm{width:190px;border-radius:26px;padding:8px}
.phone .screen{background:#F5F6FE;border-radius:24px;padding:13px;overflow:hidden}
.phone.sm .screen{border-radius:19px;padding:10px}
.scrhead{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.crest{
  width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(150deg,#8B3FF0,#1A5FF0);color:#fff;
  font-family:var(--display);font-weight:800;font-size:13px;
}
.crest.grn{background:linear-gradient(150deg,#5BC52A,#2E7D32)}
.crest.sm{width:28px;height:28px;border-radius:9px;font-size:11px}
.phone.sm .crest{width:27px;height:27px;border-radius:9px;font-size:11px}
.scrhead b{display:block;font-family:var(--display);font-size:13px;color:var(--ink);line-height:1.2}
.scrhead span{display:block;font-size:10.5px;color:var(--faint);font-weight:600}
.phone.sm .scrhead b{font-size:11px}
.phone.sm .scrhead span{font-size:9px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tiles.four{grid-template-columns:repeat(2,1fr)}
.tiles i{
  border-radius:11px;aspect-ratio:1;display:grid;place-items:center;text-align:center;
  color:#fff;font-style:normal;font-family:var(--display);font-weight:700;
  font-size:9.5px;letter-spacing:-.01em;padding:3px;line-height:1.15;
}
.tiles.four i{font-size:10.5px;border-radius:13px}
.paybar{
  margin-top:10px;border-radius:10px;padding:7px 9px;text-align:center;
  font-size:9.5px;font-weight:800;letter-spacing:.02em;
}
.paybar.std{background:#DBE6FF;color:#0B3FB5}
.paybar.fnd{background:#DAF5CC;color:#2E7D32}
.subbox{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 9px;text-align:center;
  box-shadow:0 10px 22px -16px rgba(11,18,64,.6);
}
.subbox span{display:block;font-size:10px;font-weight:700;color:var(--faint);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:5px}
.subbox b{display:block;font-family:var(--display);font-size:clamp(21px,5.6vw,29px);color:var(--ink);line-height:1;white-space:nowrap}
.subbox small{font-size:12px;color:var(--faint);font-weight:700}
.subbox em{
  display:block;margin-top:11px;background:var(--green);color:#fff;border-radius:99px;
  padding:8px;font-style:normal;font-family:var(--display);font-weight:800;font-size:12.5px;
}

/* ---------------------------------------------------- floating chips */
.chip{
  position:absolute;background:#fff;color:var(--ink);border-radius:13px;
  padding:10px 14px;font-size:13px;font-weight:700;white-space:nowrap;
  box-shadow:0 20px 34px -18px rgba(0,0,0,.75);
}
.chip b{color:var(--green);font-family:var(--display);font-size:16px}
.chip s{color:var(--muted)}
.stack{position:relative;display:block;width:100%;max-width:400px;margin-inline:auto}
.stack .phone{margin-inline:auto}
.botrow{display:flex;align-items:flex-end;gap:12px;margin-top:-10px;position:relative;z-index:2}
.float1{bottom:-24px;left:0}
.float2{position:static;color:var(--pink);margin-bottom:6px}
.float2 b{color:var(--ink)}

/* ---------------------------------------------------- slide 2 art */
.art .bubbles{position:relative}
  /* family group-text bubbles */
.bub{
  background:#1A2560;border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:11px 15px;font-size:14px;color:#E6E9FA;line-height:1.35;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.9);max-width:70%;
}
.bub span{
  display:block;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#8C95C9;margin-bottom:3px;
}
.b1{transform:rotate(-2deg)}
.b2{margin:10px 0 0 auto;transform:rotate(1.5deg)}
.b3{margin-top:10px;transform:rotate(-1deg)}
.allset{
  margin-left:auto;width:min(268px,72%);
  background:#fff;border-radius:18px;padding:16px;color:var(--ink);
  box-shadow:0 30px 56px -26px rgba(0,0,0,.85);
}
.ashead{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.ashead b{font-family:var(--display);font-size:13px;flex:1;line-height:1.2}
.ashead i{
  font-style:normal;background:#DAF5CC;color:#2E7D32;border-radius:99px;
  padding:4px 9px;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.asrow{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);padding:4px 0}
.asrow b{color:var(--ink)}
.asrow u{
  width:19px;height:19px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:10px;text-decoration:none;
}
.struck{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;max-width:420px}
.struck span{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:9px 16px 9px 13px;font-size:14.5px;font-weight:700;
  color:#C3CAEE;text-decoration:line-through;text-decoration-color:var(--pink);
  text-decoration-thickness:2px;
}

/* ---------------------------------------------------- slide 3 art */
.scene{width:100%;max-width:400px;border-radius:20px;overflow:hidden;
  box-shadow:0 34px 60px -28px rgba(0,0,0,.85)}
.scene svg{width:100%;height:auto;display:block}
.rsvp{
  position:absolute;left:0;bottom:-22px;background:#fff;border-radius:14px;
  padding:8px 13px 8px 8px;display:flex;align-items:center;gap:11px;color:var(--ink);
  box-shadow:0 22px 40px -20px rgba(0,0,0,.8);
}
.rsvp>b{
  background:var(--green);color:#fff;border-radius:9px;padding:6px 9px;
  font-family:var(--display);font-size:15px;
}
.rsvp span{font-size:12.5px;font-weight:700;line-height:1.25}
.rsvp i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--faint)}
.numsteps{list-style:none;margin-bottom:22px}
.numsteps li{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  font-family:var(--display);font-weight:700;font-size:clamp(16px,2.1vw,19.5px);color:#fff;
}
.numsteps u{
  width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:13.5px;text-decoration:none;font-weight:800;
}

/* ---------------------------------------------------- slide 4 art */
.opts{display:grid;gap:12px;margin-bottom:22px}
.opt{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  border-radius:15px;padding:13px 16px;font-size:14.5px;color:#C3CAEE;line-height:1.48;
}
.opt b{
  display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:16px;
  color:#fff;margin-bottom:5px;letter-spacing:-.01em;
}
.opt u{width:11px;height:11px;flex:none;border-radius:50%;text-decoration:none}
.duo{display:flex;gap:18px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.duo .one{display:flex;flex-direction:column;align-items:center;gap:12px}
.duo .cap{text-align:center;font-size:13px;color:#A9B2E0;line-height:1.35;max-width:190px}
.duo .cap b{display:block;font-family:var(--display);font-size:15px;color:#fff}

/* ---------------------------------------------------- hero, small screens */
@media(max-width:880px){
  .slide{grid-template-columns:1fr;gap:34px;min-height:0}
  .art{order:2}
}
@media(max-width:560px){
  .hero{padding-block:44px 40px}
  .slide{gap:28px}
  .hero h1{font-size:clamp(31px,8.6vw,42px)}
  .hero .cta .btn{flex:1 1 100%;}
  .bub{font-size:13px;max-width:86%}
  .allset{width:100%}
  .botrow{flex-direction:column;align-items:stretch;gap:10px}
  .float1,.float2{position:static;display:inline-block;margin-top:14px}
  .rsvp{position:static;margin-top:14px}
  .art{flex-direction:column;align-items:stretch}
  .scene{max-width:100%}
  .duo{gap:14px}
  .phone.sm{width:156px}
  .duo .cap{max-width:156px;font-size:12px}
}

/* ------------------------------------------------------------- icons */
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.ib{
  width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:#fff;margin-bottom:14px;
}

/* ------------------------------------------------------------- dashboard */
.dashwrap{
  margin-top:40px;border-radius:20px;padding:14px;
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:0 50px 90px -40px rgba(0,0,0,.9);
}
.dash{
  display:grid;grid-template-columns:186px minmax(0,1fr);
  background:#F4F6FD;border-radius:13px;overflow:hidden;color:var(--ink);
}
.dside{background:#0B1240;padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.dlogo{
  display:flex;align-items:center;gap:8px;color:#fff;font-family:var(--display);
  font-weight:800;font-size:13px;margin-bottom:14px;padding:0 6px;
}
.dlogo span{
  width:19px;height:19px;border-radius:6px;flex:none;
  background:conic-gradient(#1A5FF0,#FF7A1A,#5BC52A,#8B3FF0,#10B6E6,#F0186E,#1A5FF0);
}
.dside b,.dside i{
  font-style:normal;font-size:11.5px;font-weight:600;color:#8C95C9;
  padding:7px 9px;border-radius:7px;line-height:1.2;
}
.dside b{background:var(--accent);color:#fff;font-weight:800}
.dmain{padding:16px;min-width:0}
.dtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dtop>div{flex:1;min-width:150px}
.dtop h3{font-family:var(--display);font-size:16px;margin:0 0 2px;letter-spacing:-.02em}
.dtop span{font-size:10.5px;color:var(--faint);font-weight:600}
.sample{
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--line);color:var(--muted);border-radius:99px;padding:5px 9px;
}
.days{
  font-style:normal;background:var(--ink);color:#fff;border-radius:99px;
  padding:6px 12px;font-size:11px;font-weight:700;
}
.days b{color:var(--accent);font-family:var(--display);font-size:13px}

.dstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}
.dstat{background:#fff;border-radius:11px;padding:11px 12px;min-width:0}
.dstat span{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.dstat b{display:block;font-family:var(--display);font-size:21px;letter-spacing:-.02em;line-height:1.1}
.dstat u{display:block;font-size:10px;color:var(--faint);font-weight:600;text-decoration:none;margin-bottom:7px}
.meter{height:5px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:99px}

.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
.dcard{background:#fff;border-radius:11px;padding:13px 14px;min-width:0}
.dcard h4{
  font-family:var(--display);font-size:12.5px;margin-bottom:10px;
  display:flex;align-items:baseline;gap:8px;letter-spacing:-.01em;
}
.dcard h4.mt{margin-top:18px}
.dcard h4 span{margin-left:auto;font-size:9.5px;color:var(--faint);font-weight:600;font-family:var(--sans)}

.brow{display:flex;align-items:center;gap:9px;margin-bottom:7px;font-size:10.5px}
.brow>span{width:82px;flex:none;color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btrack{flex:1;height:9px;border-radius:0 4px 4px 0;background:var(--ground);min-width:0}
.btrack i{display:block;height:100%;border-radius:0 4px 4px 0}
.brow>b{width:24px;flex:none;text-align:right;font-size:10.5px;color:var(--ink)}

.cols{display:flex;align-items:flex-end;gap:8px;height:104px;padding-top:4px}
.cols>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:3px}
.cols i{display:block;width:100%;border-radius:4px 4px 0 0;order:2}
.cols b{font-size:10px;order:1;color:var(--ink)}
.cols span{font-size:9.5px;color:var(--faint);font-weight:700;order:3}

.trow{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:10.5px}
.trow u{width:15px;height:15px;flex:none;border-radius:50%;text-decoration:none;
  display:grid;place-items:center;color:#fff;font-size:8px}
.trow>div{flex:1;min-width:0;color:var(--faint);font-weight:600;line-height:1.25}
.trow b{display:block;color:var(--ink);font-size:11px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow em{font-style:normal;font-size:8.5px;font-weight:800;border-radius:99px;
  padding:4px 8px;white-space:nowrap}
.trow em.ok{background:#DAF5CC;color:#2E7D32}
.trow em.go{background:#DBE6FF;color:#0B3FB5}
.trow em.due{background:#FFE0D0;color:#B3430A}

.srow{display:flex;gap:9px;font-size:10.5px;color:var(--muted);padding:5px 0;
  border-top:1px solid var(--ground)}
.srow span{width:62px;flex:none;font-weight:800;color:var(--accent);font-size:9.5px;padding-top:1px}

/* ------------------------------------------------------------- 12 tiles */
.tiles12{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.t12{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;font-size:14.5px;color:var(--muted);line-height:1.5;box-shadow:var(--shadow);
}
.t12 .ib{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.t12 b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);
  margin-bottom:5px;letter-spacing:-.015em}

/* ------------------------------------------------------------- partners */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px}
.pcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);
}
.pcard p{color:var(--muted);font-size:15.5px;line-height:1.55}
.pband{
  margin-top:24px;border-radius:var(--r-lg);padding:26px 30px;text-align:center;
  background:linear-gradient(120deg,#1A2560,#0B1240 55%,#01082A);color:#fff;
  font-size:clamp(16px,2.2vw,20px);line-height:1.5;
}
.pband b{font-family:var(--display);font-weight:800;color:#FFB24D}

/* ------------------------------------------------------------- plan extras */
.plan .btn{font-size:14.5px;padding:13px 14px;margin-top:auto}
.plan ul{margin-bottom:18px}
.setupnote{
  font-size:14px;color:var(--muted);margin:-4px 0 12px;padding-bottom:12px;
  border-bottom:1px solid var(--line);line-height:1.45;
}
.setupnote i{display:block;font-style:normal;font-size:12.5px;color:var(--faint);margin-top:3px}
.setupnote b{color:var(--ink);font-weight:800}
.promo{
  margin:26px auto 0;max-width:660px;text-align:center;font-size:15.5px;color:var(--muted);
  background:var(--paper);border:2px solid var(--accent);border-radius:var(--r);
  padding:20px 24px;line-height:1.55;
  box-shadow:0 18px 40px -26px rgba(255,122,26,.9);
}
.promo>b:first-child{
  display:block;font-family:var(--display);font-size:18px;color:var(--ink);margin-bottom:6px;
  letter-spacing:-.015em;
}
.promo b{color:var(--ink)}

/* ------------------------------------------------------------- payment plan */
.payplan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}
.payplan h2{margin-bottom:14px}
.payplan .sub{margin-bottom:20px}
.ppcard{background:#fff;border-radius:var(--r-lg);padding:26px;color:var(--ink);
  box-shadow:0 36px 66px -30px rgba(0,0,0,.85)}
.ppcard h4{font-family:var(--display);font-size:17px;margin-bottom:14px;letter-spacing:-.015em}
.pprow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.pprow b{font-family:var(--display);font-size:17px;color:var(--ink);white-space:nowrap}
.pprow.head{border-top:0;padding-top:0}
.pprow.head span,.pprow.head b{font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-family:var(--sans)}
.ppnote{display:flex;gap:10px;margin-top:14px;font-size:14px;color:var(--muted);line-height:1.5}
.ppnote u{width:9px;height:9px;flex:none;border-radius:50%;text-decoration:none;margin-top:6px}

/* ------------------------------------------------------------- fundraiser buy */
.fbuy{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);text-align:center}
.fbuy span{display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#FF9AC0;margin-bottom:4px}
.fbuy b{display:block;font-family:var(--display);font-size:40px;line-height:1;color:#fff;
  letter-spacing:-.03em}
.fbuy u{display:block;text-decoration:none;font-size:13px;color:#C8B4D4;margin:6px 0 14px}

@media(max-width:820px){
  .payplan{grid-template-columns:1fr;gap:30px}
}

/* ------------------------------------------------------------- narrow */
@media(max-width:900px){
  .dash{grid-template-columns:1fr}
  .dside{flex-direction:row;flex-wrap:wrap;gap:6px;padding:12px}
  .dlogo{width:100%;margin-bottom:6px}
  .dside i{display:none}
  .dside b{font-size:10.5px}
  .dstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .dashwrap{padding:8px;border-radius:15px}
  .dmain{padding:11px}
  .brow>span{width:64px}
  .pband{padding:22px 20px}
}

/* ------------------------------------------------------------- sections */
section{padding-block:76px}
section.tint{background:var(--ground)}
section.dark{background:var(--navy);color:#fff}
h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(28px,4.2vw,42px);line-height:1.12;margin-bottom:16px;text-wrap:balance;
}
section.dark h2{color:#fff}
h3{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:20px;margin-bottom:8px}
p.sub{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:38px;line-height:1.6}
section.dark p.sub{color:#B7BFEA}
.center{text-align:center}
.center p.sub{margin-inline:auto}

/* ------------------------------------------------------------- pain */
.pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.pain div{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;font-size:16px;color:var(--ink-2);line-height:1.55;
}
.pain b{display:block;font-family:var(--display);font-size:17px;margin-bottom:6px;color:var(--ink)}

/* ------------------------------------------------------------- features */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.feat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);
}
.feat .dot{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  margin-bottom:16px;color:#fff;font-size:20px;font-weight:800;font-family:var(--display);
}
.feat ul{list-style:none;margin-top:14px}
.feat li{position:relative;padding-left:22px;margin-bottom:8px;font-size:15.5px;color:var(--muted);line-height:1.5}
.feat li::before{
  content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:currentColor;opacity:.45;
}

/* ------------------------------------------------------------- steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;counter-reset:s}
.step{position:relative;padding-top:18px;border-top:3px solid rgba(255,255,255,.18)}
.step span.n{
  font-family:var(--display);font-size:13px;font-weight:800;color:var(--accent);
  letter-spacing:.1em;display:block;margin-bottom:8px;
}
.step h3{color:#fff;font-size:19px}
.step p{color:#B7BFEA;font-size:15.5px;line-height:1.55;margin-top:6px}

/* ------------------------------------------------------------- plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;align-items:stretch}
@media(max-width:1000px){.plans{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}}
.plan{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 20px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  position:relative;
}
.plan.pick{border:2px solid var(--accent);box-shadow:0 1px 2px rgba(11,18,64,.05),0 26px 50px -26px rgba(255,122,26,.65)}
.plan .tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:99px;white-space:nowrap;
}
.plan .rail{height:5px;border-radius:99px;margin-bottom:18px}
.plan h3{font-size:22px;margin-bottom:4px}
.plan .who{font-size:14.5px;color:var(--muted);min-height:63px;line-height:1.45;margin-bottom:16px}
.plan .price{font-family:var(--display);font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.plan .price small{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}
.plan .terms{font-size:13.5px;color:var(--faint);margin:8px 0 20px;line-height:1.5}
.plan ul{list-style:none;margin-bottom:24px;flex:1}
.plan li{position:relative;padding-left:24px;margin-bottom:9px;font-size:15px;color:var(--ink-2);line-height:1.5}
.plan li::before{
  content:"";position:absolute;left:3px;top:.42em;width:11px;height:6px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);
  transform:rotate(-45deg);
}
.plan li.no{color:var(--faint)}
.plan li.no::before{
  border:0;background:var(--line);width:10px;height:2px;border-radius:2px;
  transform:none;top:.72em;left:4px;
}

/* ------------------------------------------------------------- fundraiser */
.fund{
  background:linear-gradient(140deg,#2A0E3C,#01082A 62%);
  border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);color:#fff;
  display:grid;grid-template-columns:1fr;gap:28px;
}
@media(min-width:880px){ .fund{grid-template-columns:1.25fr 1fr;gap:48px;align-items:center} }
.fund h2{font-size:clamp(26px,3.6vw,36px);margin-bottom:14px}
.fund p{color:#CBB9DA;font-size:16.5px;line-height:1.62;margin-bottom:14px}
.fund .math{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r);padding:24px}
.fund .math .row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.1);font-size:15.5px;color:#CBB9DA}
.fund .math .row:last-child{border:0;padding-top:16px;font-size:19px;font-weight:800;color:#fff;
  font-family:var(--display)}
.fund .math b{color:#fff;font-weight:700}

/* ------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:17px;font-size:26px;font-weight:400;
  color:var(--accent);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 22px;color:var(--muted);font-size:16.5px;line-height:1.65;max-width:70ch}
.faq p + p{padding-top:0;margin-top:-10px;padding-bottom:22px}

/* ------------------------------------------------------------- closing */
.close{
  background:
    radial-gradient(600px 400px at 80% -20%, rgba(255,122,26,.5), transparent 68%),
    linear-gradient(150deg,#1A2560,#01082A 60%);
  color:#fff;border-radius:var(--r-lg);padding:clamp(34px,6vw,64px);text-align:center;
}
.close h2{margin-bottom:14px}
.close p{color:#C3CAEE;font-size:18px;max-width:52ch;margin:0 auto 28px;line-height:1.6}

/* ------------------------------------------------------------- footer */
footer{background:var(--navy);color:#8C95C9;padding-block:52px 40px;font-size:15px}
footer img{height:34px;width:auto;margin-bottom:18px}
/* NB: .cols is also used by the dashboard bar chart above, which sets a fixed
   height:104px and makes its children centred flex columns. Reset all of that
   here, or the footer links overflow their row and sit on top of the fine print. */
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:30px;margin-bottom:34px;height:auto;align-items:start;padding-top:0}
footer .cols>div{display:block;height:auto;flex:none}
footer h4{color:#fff;font-family:var(--display);font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:12px;font-weight:700}
footer a{color:#8C95C9;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;font-size:13.5px;line-height:1.6}

/* ------------------------------------------------------------- legal pages */
.doc{padding-block:56px 80px}
.doc h1{font-family:var(--display);font-size:clamp(30px,5vw,44px);font-weight:800;
  letter-spacing:-.025em;margin-bottom:10px}
.doc .updated{color:var(--faint);font-size:14.5px;margin-bottom:12px}
.doc .draft{
  background:#FFF4E8;border:1px solid #FFCFA3;border-radius:var(--r);
  padding:18px 20px;margin-bottom:34px;color:#8A4A00;font-size:15.5px;line-height:1.6;
}
.doc h2{font-size:23px;margin:36px 0 10px}
.doc h3{font-size:18px;margin:24px 0 6px}
.doc p{color:var(--ink-2);margin-bottom:14px;max-width:72ch;font-size:16.5px}
.doc ul{margin:0 0 16px 0;list-style:none}
.doc li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--ink-2);max-width:70ch}
.doc li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.doc a{color:var(--blue)}

/* ------------------------------------------------------------- demo */
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.demo .dl{margin-bottom:16px}
.demo .dl div{font-size:15px}
.demo h2{margin-bottom:14px}
.btn.line.dk{color:var(--ink);border-color:rgba(11,18,64,.25)}
.btn.line.dk:hover{border-color:var(--ink);background:rgba(11,18,64,.05)}
.demolist{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow)}
.demolist h4{font-family:var(--display);font-size:17px;margin-bottom:16px;letter-spacing:-.015em}
.dl{display:flex;gap:12px;margin-bottom:13px}
.dl u{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:13px;font-weight:800;text-decoration:none}
.dl div{font-size:14.5px;color:var(--muted);line-height:1.45}
.dl b{display:block;font-family:var(--display);font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.dlnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint);font-weight:600}
@media(max-width:820px){.demo{grid-template-columns:1fr;gap:30px}}

/* ------------------------------------------------------------- demo form */
.demoform{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow);
}
.demoform h4{font-family:var(--display);font-size:19px;margin-bottom:16px;letter-spacing:-.015em}
.demoform label{
  display:block;margin-bottom:13px;font-size:13.5px;font-weight:700;color:var(--ink);
}
.demoform label span{font-weight:500;color:var(--faint)}
.demoform input,.demoform select,.demoform textarea{
  display:block;width:100%;margin-top:5px;
  font-family:var(--sans);font-size:15.5px;font-weight:500;color:var(--ink);
  background:var(--raise);border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;transition:border-color .12s ease, background .12s ease;
}
.demoform textarea{resize:vertical;min-height:74px}
.demoform input:focus,.demoform select:focus,.demoform textarea:focus{
  outline:none;border-color:var(--accent);background:var(--paper);
}
.demoform input::placeholder,.demoform textarea::placeholder{color:#A9B0D8}
.demoform label.check{
  display:flex;align-items:center;gap:10px;margin:2px 0 14px;
  background:var(--raise);border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;
  cursor:pointer;
}
.demoform label.check input{
  width:19px;height:19px;margin:0;flex:0 0 auto;padding:0;accent-color:var(--accent);
}
.demoform label.check span{font-weight:700;color:var(--ink);font-size:13.5px}
.demoform .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.demoform button{margin-top:6px}
.demoform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:12px;font-size:12.5px;color:var(--faint);line-height:1.45;text-align:center}
.smsnote{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.5;text-align:left;
  background:var(--raise);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.smsnote a{color:var(--accent);font-weight:700}
@media(max-width:430px){.demoform .two{grid-template-columns:1fr;gap:0}}

/* ------------------------------------------------------------- product */
.prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
.prodcard{
  border-radius:var(--r-lg);padding:30px 28px;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(11,18,64,.05), 0 30px 60px -34px rgba(11,18,64,.6);
}
.prodcard.app{background:linear-gradient(160deg,#1A5FF0,#0B3FB5 62%,#0B2A80);color:#fff}
.prodcard.raise{background:linear-gradient(160deg,#FF8A2B,#F0186E 78%);color:#fff}
.ptag{
  display:inline-flex;align-self:flex-start;gap:6px;
  background:rgba(1,8,42,.42);border:1px solid rgba(255,255,255,.22);
  border-radius:8px;padding:7px 12px;margin-bottom:18px;
  font-size:12.5px;font-weight:600;color:#E6E9FA;letter-spacing:.01em;white-space:nowrap;
}
.ptag b{color:#fff;font-weight:800}
.prodcard h3{min-height:2.3em;
  font-family:var(--display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(25px,3.1vw,34px);line-height:1.08;color:#fff;margin-bottom:12px;
}
.prodcard>p{min-height:4.9em;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);margin-bottom:22px}
.pshot{display:flex;justify-content:center;margin-bottom:24px}
.pshot .phone{
  width:232px;
  box-shadow:0 30px 56px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.18) inset;
}
.brandbar{
  display:flex;align-items:center;gap:6px;padding-bottom:9px;margin-bottom:10px;
  border-bottom:1px solid var(--line);
}
.brandbar img{height:16px;width:auto}
.brandbar span{
  font-family:var(--display);font-weight:800;font-size:10.5px;color:var(--ink);
  letter-spacing:.02em;
}
.ticks{margin-top:11px}
.ticks div{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--muted);
  font-weight:600;padding:2.5px 0}
.ticks u{width:14px;height:14px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:8px;text-decoration:none}

.psteps{list-style:none;margin-bottom:24px}
.psteps li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.psteps u{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:800;text-decoration:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.28);
}
.psteps div{font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.4}
.psteps b{display:block;font-family:var(--display);font-size:15.5px;color:#fff;
  letter-spacing:-.01em}
.prodcard .btn{margin-top:auto}
.prodcard.raise .btn{background:#fff;color:var(--ink);box-shadow:0 10px 24px -14px rgba(0,0,0,.9)}
.prodcard.raise .btn:hover{background:#fff}

/* ------------------------------------------------------------- add-ons */
.addons{
  margin-top:24px;background:var(--ground);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:34px;text-align:center;
}
.adhead h3{font-family:var(--display);font-size:clamp(22px,3vw,29px);letter-spacing:-.02em;
  margin-bottom:10px}
.adhead p{font-size:16px;color:var(--muted);max-width:60ch;margin:0 auto 26px;line-height:1.55}
.adgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px;
  margin-bottom:26px;text-align:left}
.ad{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;font-size:14.5px;color:var(--muted);line-height:1.5}
.ad .ib{width:38px;height:38px;border-radius:11px;margin-bottom:12px}
.ad b{display:block;font-family:var(--display);font-size:16.5px;color:var(--ink);
  margin-bottom:5px;letter-spacing:-.015em}

@media(max-width:840px){
  .prod{grid-template-columns:1fr}
  .addons{padding:26px 20px}
}

/* ------------------------------------------------------------- temp test card */
.testcard{
  margin:24px auto 0;max-width:720px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:#FFF6E8;border:2px dashed #E0A040;border-radius:var(--r);padding:20px 24px;
}
.testcard>div{flex:1;min-width:240px;font-size:14.5px;color:#7A5416;line-height:1.5}
.testcard span{
  display:inline-block;background:#E0A040;color:#fff;border-radius:99px;padding:3px 10px;
  font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:7px;
}
.testcard b{display:block;font-family:var(--display);font-size:18px;color:#5C3D0A;
  margin-bottom:4px;letter-spacing:-.015em}
.testcard .btn{flex:none;padding:13px 22px;font-size:15px}
@media(max-width:560px){.testcard .btn{width:100%}}

/* ------------------------------------------------------------- referral */
.refband{
  background:
    radial-gradient(620px 380px at 88% -20%, rgba(255,122,26,.42), transparent 66%),
    radial-gradient(520px 340px at -8% 115%, rgba(139,63,240,.42), transparent 70%),
    linear-gradient(155deg,#1A2560,#0B1240 56%,#01082A);
  color:#fff;
}
.ref{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center}
.refsay h2{color:#fff;margin-bottom:14px}
.refsay h2 em{font-style:normal;background:linear-gradient(96deg,#FFB24D,#FF7A1A 55%,#F0186E);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.refsay p{font-size:16.5px;color:#C3CAEE;line-height:1.58;margin-bottom:24px;max-width:52ch}
.refsay p b{color:#fff}
.refsay .eyebrow{color:#FFB24D}
.refmath{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:28px;
  box-shadow:0 36px 66px -30px rgba(0,0,0,.85)}
.refmath h4{font-family:var(--display);font-size:18px;letter-spacing:-.015em;margin-bottom:16px}
.rr{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.rr:first-of-type{border-top:0;padding-top:0}
.rr b{font-family:var(--display);font-size:19px;color:var(--ink);white-space:nowrap}
.rr.big{border-top:2px solid var(--ink);margin-top:2px}
.rr.big span{font-weight:700;color:var(--ink)}
.rr.big b{font-size:30px;color:var(--green);letter-spacing:-.02em}
.reffine{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);line-height:1.5}
@media(max-width:840px){.ref{grid-template-columns:1fr;gap:30px}}


/* The single activation-fee band above the plan cards. One place, one number. */
.actfee{max-width:560px;margin:22px auto 4px;padding:18px 22px;border-radius:16px;
  background:#fff;border:1px solid var(--line,#E6DFEE);
  box-shadow:0 6px 22px rgba(26,20,36,.06);text-align:center}
.actfee .lab{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint,#8B7F99);margin-bottom:6px}
.actfee .nums{display:flex;align-items:baseline;justify-content:center;gap:12px}
.actfee .nums s{font-size:22px;font-weight:700;color:var(--faint,#8B7F99);text-decoration-thickness:2px}
.actfee .nums b{font-size:40px;font-weight:800;line-height:1;color:var(--ink,#1A1424);letter-spacing:-.02em}
.actfee .note{font-size:13.5px;color:var(--muted,#6B5E7A);line-height:1.55;margin-top:8px}
.actfee .note b{color:var(--ink,#1A1424);font-weight:800}
@media (max-width:520px){
  .actfee{padding:16px 16px;margin-left:12px;margin-right:12px}
  .actfee .nums b{font-size:34px}
}

/* =====================================================================
   CONFIRMATION PAGES  —  welcome.html, onboard-thanks.html, thanks.html
   ---------------------------------------------------------------------
   These are the pages a customer lands on straight after paying or
   booking. They were using .doc, which has no container of its own, so
   the text ran to the very edge of the window on a phone and read like
   an error page rather than a receipt.
   This is a narrow, centred, deliberately quiet layout: the logo, one
   sentence that says it worked, the facts in a card, and the one thing
   to do next. Bold is spent only on the few words that carry meaning.
   ===================================================================== */

.confirm{
  max-width:640px;margin:0 auto;
  padding:52px 26px 90px;          /* 26px gutter: nothing ever touches the edge */
  text-align:left;
}
@media (max-width:560px){ .confirm{padding:34px 22px 64px} }

.mast{background:var(--navy);padding:26px 22px}
.mast a{display:block;text-align:center}
.mast img{width:206px;max-width:64%;height:auto;display:block;margin:0 auto}
@media (max-width:560px){ .mast{padding:20px 18px} .mast img{width:170px} }

/* The "it worked" line. A quiet tick, not a shout. */
.confirm .tick{
  display:flex;align-items:center;gap:10px;justify-content:center;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#137A3A;margin-bottom:18px;
}
.confirm .tick::before{
  content:"";width:18px;height:18px;border-radius:50%;
  background:#137A3A url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/11px no-repeat;
  flex:none;
}

.confirm h1{
  font-family:var(--display);font-size:clamp(28px,4.4vw,38px);font-weight:700;
  letter-spacing:-.028em;line-height:1.14;text-align:center;margin:0 0 12px;
  text-wrap:balance;
}
.confirm .lede{
  text-align:center;font-size:17px;line-height:1.6;color:var(--muted);
  max-width:44ch;margin:0 auto 38px;text-wrap:pretty;
}

/* A rule with a small label sitting on it. Cleaner than a heading. */
.confirm .band{
  display:flex;align-items:center;gap:14px;margin:42px 0 18px;
  font-size:11px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--faint);
}
.confirm .band::after{content:"";flex:1;height:1px;background:var(--line)}

.confirm .card{
  border:1px solid var(--line);border-radius:16px;background:var(--paper);
  padding:6px 26px;box-shadow:0 1px 2px rgba(11,18,64,.04);
}
@media (max-width:560px){ .confirm .card{padding:4px 20px} }
.confirm .card .row{padding:18px 0;border-top:1px solid var(--line)}
.confirm .card .row:first-child{border-top:0}
.confirm .card .k{
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px;
}
.confirm .card .v{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.confirm .card .v b{color:var(--ink);font-weight:700}
.confirm .card .v a{color:var(--blue);text-decoration:none;font-weight:600}
.confirm .card .v a:hover{text-decoration:underline}

/* Numbered steps, hung off a hairline. */
.confirm .flow{list-style:none;margin:0;padding:0}
.confirm .flow li{
  position:relative;padding:0 0 22px 46px;
}
.confirm .flow li::before{
  content:counter(s);counter-increment:s;
  position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--line);background:var(--raise);
  font-size:13px;font-weight:800;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.confirm .flow{counter-reset:s}
.confirm .flow li:not(:last-child)::after{
  content:"";position:absolute;left:14px;top:32px;bottom:6px;width:1px;background:var(--line);
}
.confirm .flow h3{
  font-family:var(--sans);font-size:16.5px;font-weight:700;color:var(--ink);
  margin:3px 0 4px;letter-spacing:-.008em;
}
.confirm .flow p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0;max-width:52ch}

.confirm .cta{text-align:center;margin:34px 0 8px}
.confirm .cta .btn{padding:16px 34px}
.confirm .cta .under{font-size:13.5px;color:var(--faint);margin-top:12px}

.confirm .note{
  font-size:15.5px;line-height:1.65;color:var(--muted);margin:0 0 14px;max-width:58ch;
}
.confirm .note a{color:var(--blue);font-weight:600;text-decoration:none}
.confirm .note a:hover{text-decoration:underline}
.confirm .note b{color:var(--ink);font-weight:700}

.confirm .quiet{
  margin-top:46px;padding-top:24px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.7;color:var(--faint);text-align:center;
}
.confirm .quiet a{color:var(--muted);text-decoration:none;font-weight:600}
.confirm .quiet a:hover{color:var(--blue)}