/* Rise Ultra — thank-you pages (/welcome/deposit, /welcome/call).
   Ported from rise-ultra-thankyou-pages.html. The preview toggle at the top of
   that mockup was a preview device only and is deliberately not built. */

.wrap{max-width:600px;margin:0 auto;padding:0 20px 60px}
.top{text-align:center;padding:36px 0 26px}
.badge{display:inline-flex;align-items:center;gap:8px;background:rgba(181,83,46,.1);border:1px solid rgba(181,83,46,.3);color:var(--clay);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:100px;margin-bottom:14px}
h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,7.6vw,40px);line-height:1.05;text-transform:uppercase;margin:0;letter-spacing:-.02em;color:var(--charcoal)}
.sub{margin:12px auto 0;max-width:420px;font-size:15.5px;line-height:1.6;color:var(--muted)}
.seclab{margin:0 0 10px;text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);font-weight:600}
.vidplace{background:#fff;border:1px dashed var(--border);border-radius:10px;padding:22px 20px;margin-bottom:26px}
.vidplace .lab{margin:0 0 10px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#8d8478;font-weight:600}
.vidplace p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.vid{margin-bottom:26px}
.panel{background:var(--charcoal);color:var(--cream);border-radius:10px;padding:22px;margin-bottom:16px}
.panel h3{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;color:var(--light-clay)}
.panel .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid rgba(245,241,232,.12);font-size:14.5px}
.panel .row:last-child{border-bottom:0;padding-bottom:0}
.panel .row span:first-child{color:rgba(245,241,232,.7)}
.panel .row span:last-child{font-weight:600;text-align:right}
.panel .paid{color:var(--light-clay)}
.card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.card h3{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 10px;color:var(--charcoal)}
.card p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.card p:last-child{margin:0}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 14px 34px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.steps li:last-child{padding-bottom:0}
.steps li:before{content:counter(s);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--clay);color:#fff;font-family:var(--display);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.steps b{color:var(--ink);font-weight:600}
.btn{display:block;width:100%;text-align:center;cursor:pointer;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.03em;text-transform:uppercase;padding:17px 14px;border-radius:6px;text-decoration:none;border:2px solid transparent;line-height:1.2;transition:background .18s,transform .12s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--clay);outline-offset:3px}
.btn-wa{background:#25D366;color:#0b3d20;border-color:#25D366}
.btn-wa:hover{background:#1fbb59;border-color:#1fbb59}
.btn-out{background:transparent;color:var(--clay);border-color:var(--clay)}
.btn-out:hover{background:rgba(181,83,46,.07)}
.waicon{width:17px;height:17px;fill:currentColor;vertical-align:-3px;margin-right:7px}
.note{margin:9px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}
.founder{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:16px}
.founder img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none;display:block}
.founder .fname{margin:0;font-family:var(--display);font-weight:800;font-size:13.5px;text-transform:uppercase;color:var(--charcoal)}
.founder .frole{margin:2px 0 7px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay);font-weight:600}
.founder p.fb{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.refer{background:rgba(181,83,46,.07);border:1px solid rgba(181,83,46,.3);border-radius:10px;padding:18px;text-align:center}
.refer h3{font-family:var(--display);font-weight:800;font-size:14px;text-transform:uppercase;margin:0 0 7px;color:var(--charcoal)}
.refer p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.cal{background:#fff;border:1px dashed var(--border);border-radius:10px;padding:22px 16px;text-align:center;color:#8d8478;font-size:13px;line-height:1.6;margin-bottom:16px}
.cal b{display:block;color:var(--muted);font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px}

/* iClosed call-details widget. Height is set inline by welcome-call.js from
   config (mobile/desktop), overriding the widget's hard-coded 340px.
   It stays collapsed until welcome-call.js confirms it actually rendered, so
   a widget that fails never leaves an empty box on the page. Collapsing with
   max-height (rather than display:none) keeps the iframe laid out, which is
   what makes that check possible. */
.iclosed-confirm{border:0;overflow:hidden;max-height:0;margin:0}
.iclosed-confirm.is-live{border:1px solid var(--border);border-radius:10px;background:#fff;max-height:none;margin-bottom:16px}
.call-details-widget{width:100%!important}
.call-details-widget iframe{width:100%!important;height:100%!important;border:0;display:block}

/* Add to Calendar row inside the booking-confirmation panel */
.calbtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:16px}
.calbtn{display:block;text-align:center;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.07em;text-transform:uppercase;padding:12px 4px;border-radius:6px;text-decoration:none;color:var(--cream);border:1px solid rgba(245,241,232,.32);background:transparent;transition:background .15s,border-color .15s}
.calbtn:hover{background:rgba(245,241,232,.08);border-color:var(--light-clay);color:var(--light-clay)}
.calbtn:focus-visible{outline:3px solid var(--light-clay);outline-offset:2px}
.callab{margin:16px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,241,232,.5);font-weight:600;text-align:center}
.footmark{margin-top:32px;padding-top:22px;border-top:1px solid var(--border);text-align:center}
.marklogo{width:110px;height:auto;margin:0 auto;display:block}
/* Company details — quiet legal line at the very bottom of every page.
   Lighter than --muted on purpose: present and legible, never competing
   with the wordmark above it. */
.legal{margin:14px auto 0;max-width:520px;font-size:11.5px;line-height:1.55;color:#6F675D;letter-spacing:.01em}

/* Instagram — a quiet footer link, deliberately smaller than the wordmark
   above it. The mark is a 26px rounded tile carrying the glyph's own gradient
   with a white glyph on top, which is how the app icon actually reads at small
   sizes; an SVG can't take a CSS gradient as a fill directly. Same size on
   mobile and desktop — it's meant to stay small everywhere. */
.iglink{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;line-height:1.3}
.iglink:hover{color:var(--ink)}
.iglink:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px}
.igmark{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:8px;
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.igmark svg{width:16px;height:16px;fill:#fff;display:block}
.footmark .mark{font-family:var(--display);font-weight:900;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);margin:0}

/* Green referral box — /welcome/sponsored. Mirrors .refer.is-green in
   start.css so the sponsored funnel reads the same before and after payment:
   clay means "do this", green means "this is already yours". */
.refer.is-green{background:#F1F6EE;border:1px solid #CBDDC0}
.refer.is-green h3{color:#2f4a24}
.refer.is-green p{color:#2f4a24}
.refer.is-green b{color:#2f4a24;font-weight:700}
.refer .fine{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:#4d6b40}

/* Green status badge, same palette as .refer.is-green. Used where the badge
   reports an arrangement that is running rather than a payment that is closed
   — a started plan is "on track", not "done". */
/* Solid fills, white type. The tinted versions read as decoration next to the
   charcoal booking panel; these read as status. #2F4A24 is the dark green the
   site already uses for "done"; #13294B the navy. White clears AA on both by a
   wide margin — 9.9:1 and 14.5:1. */
.badge.is-green{background:#2F4A24;border-color:#2F4A24;color:#fff}
.badge.is-blue{background:#13294B;border-color:#13294B;color:#fff}

/* The referral box, solid rather than tinted. */
.refer.is-deep{background:#2F4A24;border:1px solid #2F4A24}
.refer.is-deep h3,.refer.is-deep p,.refer.is-deep b{color:#fff}
.refer.is-deep p{color:rgba(255,255,255,.92)}
.refer.is-deep b{font-weight:700;color:#fff}
.refer.is-deep .fine{color:rgba(255,255,255,.75)}

/* Boxes must not touch. .refer sits directly above the charcoal panel on the
   welcome pages, and they were meeting edge to edge. */
.refer{margin-bottom:22px}
.refer + .panel{margin-top:0}