/* ============================================================================
   CollApp — application surfaces (purchase + account deletion)
   ----------------------------------------------------------------------------
   Tokens below are a VERBATIM MIRROR of landing.html's :root. landing.html is
   the source of truth and is never modified by this file. If a token changes
   there, change it here. Nothing else in this file should be edited to
   "match" — the landing owns the palette, this file owns the components.
   Deploy with a version query: /assets/app.css?v=2
   ========================================================================== */

/* ---------- Fonts (shared with landing, already on disk) ----------
   Paths are relative to THIS file (/assets/app.css), so they resolve to
   /landing/fonts/… in the browser and are followable on disk by the IDE.
   Do not switch these to root-absolute: the IDE cannot resolve a leading
   slash without public/ marked as a resource root, which is per-machine. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(../landing/fonts/baloo-2-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(../landing/fonts/baloo-2-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../landing/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../landing/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../landing/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(../landing/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(../landing/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
:root{
    /* --- mirrored from landing.html --- */
    --ink:#171033; --ink-2:#241B3D;
    --violet:#4B2E83; --violet-lt:#6B46C1;
    --cyan:#34B8E8; --magenta:#E63A88;
    --paper:#FBFAFF; --lav:#EDE9FB; --lav-2:#DCD4F5;
    --line:rgba(23,16,51,.10); --muted:#5C5080;
    --b-brown:#8B5E3C; --b-violet:#4A2A6B; --b-red:#B23A3A;
    --b-orange:#C97A1F; --b-green:#1E7A4C; --b-teal:#1F7A72;
    --r-xs:8px; --r-sm:14px; --r-md:22px; --r-lg:34px; --r-pill:999px;
    --shadow-sm:0 2px 8px rgba(23,16,51,.06);
    --shadow-md:0 12px 32px -12px rgba(23,16,51,.22);
    --shadow-lg:0 40px 80px -32px rgba(23,16,51,.42);
    --maxw:1180px;

    /* --- app-only additions (NOT on the landing) --- */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
    --col:640px;                    /* single-column form measure */
    --col-wide:960px;               /* offer grid measure */
    --danger:#B3261E;               /* true destructive red. NOT --b-red, which
                                     is a decorative map-pin colour. */
    --danger-bg:#FDECEA; --danger-ink:#8C1D18;
    --ok-bg:#E8F6EF; --ok-ink:#155C3A;
    --warn-bg:#FDF3E3; --warn-ink:#8A5410;
}

/* ============================== BASE ============================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    min-height:100vh;
    display:flex;flex-direction:column;
    background:var(--paper);color:var(--ink);
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
/* Small-viewport height accounts for mobile browser chrome, so the sticky
   footer never hides under Safari's toolbar. Feature-queried rather than
   double-declared, so it doesn't read as an accidental override. */
@supports (min-height:100svh){
    body{min-height:100svh}
}
h1,h2,h3{margin:0;font-family:'Baloo 2',system-ui,sans-serif;line-height:1.12;letter-spacing:-.018em}
p{margin:0;color:var(--muted)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
hr{border:0;border-top:1px solid var(--line);margin:var(--s5) 0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:var(--r-xs)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700;font-size:15px}
.skip:focus{left:0}

/* Copy buttons do nothing without JS — don't advertise them. */
.js-only{display:none}
html.js .js-only{display:inline-flex}

/* ============================== TYPE ============================== */
/* Deliberately below the landing's .display scale: this is a task surface,
   not a hero. Large enough to anchor, small enough not to shout. */
.t-title{font-size:clamp(28px,4.6vw,40px);font-weight:800;letter-spacing:-.026em}
.t-sub{font-size:20px;font-weight:700;letter-spacing:-.012em}
.t-lead{font-size:clamp(16px,1.9vw,18px);line-height:1.6;color:var(--muted)}
.t-body{font-size:15.5px;line-height:1.65;color:var(--muted)}
.t-fine{font-size:13.5px;line-height:1.6;color:var(--muted)}
.t-eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--violet-lt)}
.t-ink{color:var(--ink)}
.t-center{text-align:center}

/* ============================== NAV ============================== */
/* Structurally identical to the landing nav so the transition is seamless. */
.nav{position:sticky;top:0;z-index:80;background:rgba(251,250,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.nav.stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em}
.brand img{width:31px;height:31px}
.nav-links{display:none;gap:20px;margin-left:12px;font-size:15px;font-weight:600;color:var(--muted)}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--violet);transition:right .22s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
/* Hidden on narrow screens, exactly like the landing nav — at 360px the
   brand, ghost link and pill button can't share a row without wrapping. */
.nav-ghost{display:none;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}
.nav-ghost:hover{color:var(--ink)}
@media (min-width:640px){.nav-ghost{display:block}}
.btn-buy{background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;padding:10px 19px;border-radius:var(--r-pill);white-space:nowrap;transition:transform .18s,background .18s}.btn-buy:hover{background:var(--violet);transform:translateY(-1px)}
@media (min-width:780px){.nav-links{display:flex}}
@media (min-width:940px){.nav-links{gap:28px}}
.nav-exit{display:block;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap}
.nav-exit:hover{color:var(--ink)}
/* ============================ PAGE SHELL ========================== */
.page{position:relative;flex:1 0 auto;padding:var(--s6) 0 var(--s7);overflow:hidden}
/* Centred, symmetric wash — the landing's hero gradient is asymmetric because
   it sits behind right-hand art. Reusing it verbatim here would read as a
   smudge, so the geometry is re-authored while the colours are identical. */
.page::before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(760px 340px at 50% -6%, rgba(52,184,232,.15), transparent 64%),
        radial-gradient(620px 320px at 50% 2%, rgba(230,58,136,.09), transparent 62%),
        linear-gradient(180deg,#F3F1FE 0%, var(--paper) 58%);
}
.page-in{position:relative;z-index:1;max-width:var(--col);margin:0 auto}
.page-in.is-wide{max-width:var(--col-wide)}
/* Deletion is a destructive, legal-facing surface: no marketing wash. */
.page.is-plain::before{background:linear-gradient(180deg,#F7F5FE 0%,var(--paper) 34%)}

/* ============================== BADGE ============================= */
/* The landing's signature device, reused as a system component. */
.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;border:3px solid #fff;box-shadow:0 6px 16px -4px rgba(23,16,51,.4);flex-shrink:0}
.badge svg{width:52%;height:52%;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.badge-lg{width:62px;height:62px;font-size:22px}
.badge-md{width:46px;height:46px;font-size:16px}
.badge-sm{width:34px;height:34px;font-size:12.5px;border-width:2.5px}
.bg-violet{background:var(--b-violet)} .bg-teal{background:var(--b-teal)}
.bg-orange{background:var(--b-orange)} .bg-brown{background:var(--b-brown)}
.bg-green{background:var(--b-green)} .bg-danger{background:var(--danger)}

/* ============================= BUTTONS ============================ */
/* Geometry and shadows copied 1:1 from the landing. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 27px;border-radius:var(--r-pill);font-weight:700;font-size:15.5px;letter-spacing:-.005em;text-align:center;transition:transform .18s ease,box-shadow .18s ease,background .18s;position:relative}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--violet);color:#fff;box-shadow:0 10px 26px -10px rgba(75,46,131,.65)}
.btn-solid:hover{background:var(--violet-lt);box-shadow:0 16px 34px -12px rgba(75,46,131,.7)}
.btn-outline{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--lav-2)}
.btn-outline:hover{box-shadow:inset 0 0 0 1.6px var(--violet)}
.btn-danger{background:var(--danger);color:#fff;box-shadow:0 10px 26px -10px rgba(179,38,30,.6)}
.btn-danger:hover{background:#8C1D18}
.btn-block{display:flex;width:100%}
.btn-sm{padding:9px 16px;font-size:13.5px}
/* Busy state — set by app.js on submit. Prevents the classic double-charge. */
.btn[aria-busy="true"]{pointer-events:none;opacity:.75;transform:none}
.btn[aria-busy="true"] .btn-text{visibility:hidden}
.btn[aria-busy="true"]::after{content:"";position:absolute;width:19px;height:19px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{font-weight:700;font-size:14.5px;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--violet-lt)}

/* ============================== CARD ============================== */
.card{background:#fff;border-radius:var(--r-lg);padding:var(--s6) var(--s6);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.card + .card{margin-top:var(--s4)}
.card-head{margin-bottom:var(--s5)}
.card-head .t-title{margin:var(--s2) 0 var(--s3)}
.card.is-plain{border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s5)}

/* ============================= STEPPER ============================ */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:0 0 var(--s5);padding:0;list-style:none}
.step{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s2);min-width:0}
.step:not(:last-child)::after{content:"";position:absolute;top:22px;left:calc(50% + 26px);width:calc(100% - 52px);height:2px;background:var(--lav-2);border-radius:2px}
.step[data-state="done"]::after{background:var(--violet)}
.step .badge{background:#fff;color:var(--muted);border-color:#fff;box-shadow:inset 0 0 0 2px var(--lav-2)}
.step[data-state="done"] .badge{background:var(--violet);color:#fff;box-shadow:0 6px 16px -4px rgba(23,16,51,.4)}
.step[data-state="now"] .badge{background:#fff;color:var(--violet);box-shadow:inset 0 0 0 2.6px var(--violet),0 6px 16px -6px rgba(75,46,131,.45)}
.step-label{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;line-height:1.2}
.step[data-state="now"] .step-label{color:var(--ink)}
@media (max-width:360px){.step-label{font-size:11px}.step .badge{width:38px;height:38px;font-size:14px}.step:not(:last-child)::after{top:18px;left:calc(50% + 22px);width:calc(100% - 44px)}}

/* ============================== FIELDS ============================ */
.field{display:block}
.field-label{display:block;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.field-hint{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:6px}
.input{width:100%;padding:14px 15px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.6px solid var(--lav-2);border-radius:var(--r-sm);transition:border-color .18s,box-shadow .18s}
.input::placeholder{color:#A79BC4}
.input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(75,46,131,.13)}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(179,38,30,.11)}
/* text-indent cancels the trailing letter-space so the digits sit optically
   centred — text-align:center alone is off by half a space. */
.input-code{font-family:'Baloo 2',sans-serif;font-size:30px;font-weight:700;text-align:center;letter-spacing:.42em;text-indent:.42em;padding:16px 15px}
.input[type=file]{padding:11px 13px;font-size:14.5px}
.input[type=file]::file-selector-button{font:inherit;font-weight:700;font-size:13.5px;margin-right:12px;padding:8px 14px;border:0;border-radius:var(--r-pill);background:var(--lav);color:var(--violet);cursor:pointer}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted);line-height:1.5;cursor:pointer}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--violet);flex-shrink:0}

/* ============================== ALERTS ============================ */
.alert{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;line-height:1.5;margin-bottom:var(--s4)}
.alert svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.alert-danger{background:var(--danger-bg);color:var(--danger-ink);box-shadow:inset 0 0 0 1.4px rgba(179,38,30,.22)}
.alert-success{background:var(--ok-bg);color:var(--ok-ink);box-shadow:inset 0 0 0 1.4px rgba(30,122,76,.25)}
.alert-warning{background:var(--warn-bg);color:var(--warn-ink);box-shadow:inset 0 0 0 1.4px rgba(201,122,31,.25)}

/* ============================== OFFERS ============================ */
.offers{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:620px){.offers{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.offer{display:block;cursor:pointer;position:relative}
.offer-body{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;background:#fff;border-radius:var(--r-md);padding:var(--s6) var(--s4) var(--s5);box-shadow:inset 0 0 0 1.6px var(--lav-2);transition:box-shadow .18s,transform .18s}
.offer:hover .offer-body{transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--violet-lt)}
.offer-radio:checked + .offer-body{box-shadow:inset 0 0 0 2.4px var(--violet),0 14px 34px -14px rgba(75,46,131,.5)}
/* The radio is visually hidden, so the ring has to be forwarded to the tile —
   without this the whole selector is invisible to keyboard users. */
.offer-radio:focus-visible + .offer-body{outline:3px solid var(--cyan);outline-offset:3px}
.offer-mark{position:absolute;top:-19px;left:50%;transform:translateX(-50%)}
.offer-tokens{margin-top:var(--s4);font-family:'Baloo 2',sans-serif;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1}
.offer-unit{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.offer-price{margin-top:var(--s3);font-size:22px;font-weight:800;color:var(--violet)}
.offer-was{font-size:14px;color:var(--muted)}
.offer-save{position:absolute;top:14px;right:14px;background:var(--magenta);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;padding:5px 10px;border-radius:var(--r-pill);box-shadow:0 6px 16px -5px rgba(230,58,136,.55)}
.offer-check{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .18s;font-size:12.5px;font-weight:800;color:var(--violet);letter-spacing:.04em;text-transform:uppercase}
.offer-radio:checked ~ .offer-body .offer-check,.offer-radio:checked + .offer-body .offer-check{opacity:1}

/* ============================ SUMMARY ============================= */
.summary{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:400px){.summary{grid-template-columns:1fr 1fr}}
.summary-cell{background:var(--lav);border-radius:var(--r-md);padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:3px}
.summary-k{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.summary-v{font-family:'Baloo 2',sans-serif;font-size:clamp(22px,5vw,27px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}

/* ======================= NUMBERED INSTRUCTIONS ==================== */
.howto{counter-reset:howto;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s5)}
.howto li{counter-increment:howto;position:relative;padding-left:48px;font-size:15.5px;line-height:1.62;color:var(--muted)}
.howto li::before{content:counter(howto);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--b-violet);color:#fff;border:2.5px solid #fff;box-shadow:0 6px 16px -4px rgba(23,16,51,.4);display:grid;place-items:center;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px}
.howto strong{color:var(--ink);font-weight:700}
.bullets{margin:var(--s3) 0 0;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.72}
.bullets li{margin-bottom:6px}
.bullets::marker{color:var(--violet)}

/* ============================ COPY ROW ============================ */
.copyrow{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);background:var(--lav);border-radius:var(--r-sm);padding:7px 8px 7px 14px;flex-wrap:wrap}
.copyrow code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-all}
.copyrow .btn{margin-left:auto}

/* ============================ DISCLOSURE ========================== */
.alt{margin-top:var(--s5);background:var(--lav);border-radius:var(--r-md);padding:var(--s4) var(--s5)}
.alt summary{cursor:pointer;font-weight:700;font-size:15px;color:var(--violet);list-style:none}
.alt summary::-webkit-details-marker{display:none}
.alt summary::before{content:"+";display:inline-block;width:18px;font-weight:800}
.alt[open] summary::before{content:"−"}
.bank{margin:var(--s4) 0 var(--s1);display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:520px){.bank{grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);align-items:baseline}}
.bank dt{font-weight:700;font-size:14px;color:var(--muted)}
.bank dd{margin:0;font-size:15px}

/* ============================== STATUS ============================ */
.status-mark{margin:0 auto var(--s4)}
.receipt{margin:var(--s5) 0 0;display:grid;grid-template-columns:1fr;gap:var(--s3);text-align:left;font-size:15px}
@media (min-width:460px){.receipt{grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);align-items:baseline}}
.receipt dt{font-weight:700;color:var(--muted);font-size:14px}
.receipt dd{margin:0;font-weight:600}

/* =========================== DANGER ZONE ========================== */
.danger-zone{border-left:3px solid var(--danger);background:var(--danger-bg);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:var(--s4) var(--s5);margin-top:var(--s5)}
.danger-zone .t-sub{color:var(--danger-ink);font-size:16px;margin-bottom:6px}
.danger-zone p{color:var(--danger-ink);font-size:14.5px;line-height:1.55;opacity:.92}
.kv{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media (min-width:560px){.kv{grid-template-columns:1fr 1fr}}

/* ============================== FOOTER ============================ */
/* Matches the landing footer exactly, including its full-width measure. */
.site-footer{flex-shrink:0;border-top:1px solid var(--line);padding:40px 0 34px;background:var(--paper)}
.foot-in{display:flex;flex-direction:column;gap:22px}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;font-size:14.5px;font-weight:600;color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.foot-note{font-size:13.5px;color:var(--muted);max-width:520px;margin-top:12px}
@media (min-width:860px){.foot-in{flex-direction:row;align-items:center;justify-content:space-between}}

/* =========================== RESPONSIVE =========================== */
@media (max-width:420px){
    .wrap{padding:0 16px}
    .btn{padding:14px 22px}
    .card{padding:var(--s5) var(--s4)}
    .page{padding:var(--s5) 0 var(--s6)}
}

/* ============================== PRINT ============================= */
/* The status page is a payment record. People print it. */
@media print{
    .nav,.site-footer,.steps,.btn,.skip,.page::before{display:none!important}
    body{background:#fff;font-size:12pt}
    .card{box-shadow:none;border:1px solid #999;border-radius:0;padding:0;page-break-inside:avoid}
    .page{padding:0}
    .page-in{max-width:none}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    html{scroll-behavior:auto}
    .btn[aria-busy="true"]::after{animation:none;border-top-color:currentColor;opacity:.4}
}