/* Crypto With Confidence Wizard — visual polish pass */
* { box-sizing: border-box; }
:root {
/* Matched to cryptowithconfidenceclass.com (Kadence theme palette) */
--cwc-blue: #1863b2;
--cwc-blue-dark: #134a85;
/* ===== "Quiet Trust" palette (2026-06-05) — calm, cool slate + one brand blue ===== */
--cwc-blue-light: #eef6fc; /* soft blue background — important info / rec boxes */
/* Success/done green system (Jen, 2026-06-05) — completed / positive / good-to-go ONLY.
Never on primary buttons, general info, warnings, or anything implying a payment is "safe". */
--cwc-green: #4f966b; /* success green — fills + accent bars */
--cwc-green-text: #2f6848; /* success dark text (readable on white) */
--cwc-green-bg: #eff8f3; /* success soft background */
--cwc-green-bd: #cbe6d5; /* success border */
--cwc-green-hover: #3f7f58; /* success hover/active, if needed */
--cwc-text: #1f2937; /* body text (cool slate) */
--cwc-text-soft: #475569; /* soft text */
--cwc-text-mute: #64748b; /* muted / helper text */
--cwc-border: #e2e8f0; /* default border */
--cwc-bg: #f8fafc; /* desktop page background */
--cwc-card-bg: #ffffff; /* card / main content */
--cwc-panel: #f6f8fa; /* quiet helper panel background */
--cwc-hairline: #eef2f6; /* faint hairline divider */
--cwc-info-bg: #eef6fc; /* soft blue background */
--cwc-info-bd: #c6ddf1; /* soft blue border */
--radius-lg: 14px;
--radius-md: 10px;
--radius-sm: 6px;
--shadow-card: 0 1px 2px rgba(15, 30, 60, .04), 0 4px 14px rgba(15, 30, 60, .06);
}
html, body { height: 100%; }
body {
font-family: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--cwc-text);
background: var(--cwc-bg);
margin: 0;
font-size: 17px; /* page base body — 17 for senior readability (Jen, 2026-06-09); was the odd 16.5 */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .rec-eyebrow, .rec-headline, .steps-leadin, .phase-title, .rec-why {
font-family: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
/* ---------- Layout ---------- */
.screen { padding: 0 20px 26px; max-width: 640px; margin: 0 auto; }
.wrap {
background: var(--cwc-card-bg);
padding: 38px 58px 14px; /* top 38 — matches the plan page so every screen's content starts at the same height (Jen, 2026-06-11); bottom 14 keeps the copyright near the bottom */
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
}
.wrap > *:first-child, .wrap .card-content > *:first-child { margin-top: 0; } /* first element flush to the top padding — mirrors .plan, so the text start height is identical on every screen (Jen, 2026-06-11) */
/* Payment screen (q1) only: its top-bar carries the extra "Next" row (~20px taller), so trim
the card top by that much → content lands at the same height as the single-row-bar screens. */
.wrap.has-topnext { padding-top: 18px; }
/* Desktop/laptop: the question-screen card gets a min-height (set live in JS —
anchorCardHeight) so a short screen fills the space below the header and the
copyright anchors to the card's bottom. Mobile (≤600px) follows content naturally. */
/* Copyright, pulled inside the white card. On .wrap (flex column) margin-top:auto
pushes it to the card's bottom; on .plan (long, normal flow) it trails the content. */
.card-footer {
margin-top: auto;
text-align: center;
padding-top: 32px;
font-size: 12px;
line-height: 1.4;
color: #64748B;
}
/* ---------- Typography ---------- */
h1 { color: var(--cwc-blue); font-size: 30px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
h2 { color: var(--cwc-text); font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 14px; letter-spacing: -.01em; } /* 23→24 to match the .q0-title question headings; line-height 1.2 so wrapped headings don't inherit the airy 1.6 body spacing (Jen) */
h3 { color: var(--cwc-text); font-size: 17px; font-weight: 600; margin: 22px 0 8px; }
h4 { color: var(--cwc-text-soft); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 6px; }
p { margin: 0 0 14px; color: var(--cwc-text); }
p.lead { color: var(--cwc-text-soft); margin: 0 0 18px; font-size: 17.5px; }
strong { color: var(--cwc-text); font-weight: 600; }
em { color: var(--cwc-text-soft); }
hr { border: 0; border-top: 1px solid var(--cwc-border); margin: 24px 0; }
/* ---------- Form controls ---------- */
input[type=text] {
display: block; width: 100%; padding: 12px 14px;
font-size: 16px; font-family: inherit;
border: 1px solid var(--cwc-border); border-radius: 6px; /* matches buttons + answer rows */
margin-bottom: 14px; text-transform: uppercase; letter-spacing: .04em;
color: var(--cwc-text); background: #fff;
transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus {
outline: 0; border-color: var(--cwc-blue);
box-shadow: 0 0 0 3px rgba(24, 99, 178, .15);
}
textarea {
display: block; width: 100%; padding: 12px 14px; font-size: 15px;
border: 1px solid var(--cwc-border); border-radius: 6px; /* matches buttons + answer rows */
margin: 8px 0 18px; font-family: inherit; min-height: 90px;
color: var(--cwc-text); background: #fff;
transition: border-color .15s, box-shadow .15s;
}
textarea:focus {
outline: 0; border-color: var(--cwc-blue);
box-shadow: 0 0 0 3px rgba(24, 99, 178, .15);
}
/* ---------- Buttons ---------- */
button {
background: var(--cwc-blue); color: #fff; border: 0;
padding: 7px 16px; font-size: 15px; font-weight: 500;
border-radius: 6px; cursor: pointer; /* matches the answer-row corner shape */
font-family: inherit;
transition: background .15s, transform .05s;
}
button:hover { background: var(--cwc-blue-dark); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(24, 99, 178, .25); }
button.ghost {
background: transparent; color: #94a3b8;
border: 0;
padding: 0; font-size: 14px; font-weight: 500; line-height: 24px; /* recessive text link (light muted blue-grey); 13→14 (Jen) — matches mobile */
}
button.ghost:hover { color: var(--cwc-blue); text-decoration: underline; text-underline-offset: 2px; background: transparent; }
/* Next button reads muted until an answer is picked, so the eye goes to the Yes/No
choices first. JS adds/removes .next-muted as the selection changes (plain class —
no :has(), which mis-invalidates here). Still clickable while muted ("pick one" nudge). */
button.next-muted { background: #e3e8ef; color: #9aa6b6; } /* intentionally-inactive soft state (waiting for a pick), not a muddy forgotten grey */
button.next-muted:hover { background: #dbe1ea; }
/* The intro "Let's Go" sits in the "second button slot" below the paragraphs — i.e. a
one-button-height gap above it (~32px desktop; the paragraph's own 14px is part of it). */
#introNext { margin-top: 18px; }
/* ---------- Choice list (radios + checkboxes) ---------- */
.choice-list { list-style: none; padding: 0; margin: 14px 0 22px; }
.choice-list li { margin: 0; }
.choice-list label {
display: flex; align-items: center; gap: 12px; /* center the radio against the answer text — incl. multi-line options (Jen, 2026-06-12) */
padding: 10px 14px; border: 1px solid var(--cwc-border); /* light neutral grey — quiet, matches the crypto checklist */
border-radius: 6px; margin-bottom: 11px; min-height: 40px;
cursor: pointer; background: #fff; /* white/outlined — de-blobbed; blue fill now only on hover/selected */
transition: border-color .15s, background .15s, box-shadow .15s;
line-height: 1.5;
}
.choice-list label:hover {
border-color: var(--cwc-blue); background: var(--cwc-blue-light);
box-shadow: 0 2px 6px rgba(24, 99, 178, .15); /* soft lift on hover — feels clickable */
}
.choice-list input { margin: 4px 0 0; accent-color: var(--cwc-blue); flex-shrink: 0; }
.choice-list label > span { flex: 1; }
.choice-list input:checked + * { font-weight: 500; }
/* If a radio/checkbox is checked, give the whole label a subtle highlight. */
.choice-list label:has(input:checked) {
border-color: var(--cwc-blue);
background: var(--cwc-blue-light);
}
/* Custom radio for the Yes/No answer rows — bigger + cleaner than the tiny native control,
and a friendlier tap indicator. (Checkboxes on the payment list keep the native control for now.) */
.choice-list input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; margin: 0; flex-shrink: 0;
border: 2px solid #cbd5e1; border-radius: 50%;
background: #fff; cursor: pointer;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice-list input[type="radio"]:checked {
border-color: var(--cwc-blue);
background: var(--cwc-blue);
box-shadow: inset 0 0 0 4px #fff; /* white ring → leaves a clean blue centre dot */
}
.choice-list input[type="radio"]:focus-visible {
outline: 2px solid rgba(24, 99, 178, .5); outline-offset: 2px;
}
/* Long checklists (e.g. the vendor payment-options list) stay calm and scannable:
neutral white rows with a gray border until hover/selection — no wall of blue.
Hover + selected states still inherit the blue from the rules above (higher
specificity), so an interacted/selected row stands out clearly. */
.choice-list-long label { align-items: center; } /* coin checkbox centered on the name; fill/border/corners/height/padding all inherit the standard row */
.choice-list-long input { margin-top: 0; } /* centered rows: checkbox aligns with the coin name */
/* SOL Yes/No: single-line answers, so center the dot with the words (the base
flex-start exists for the longer PayPal/Exodus answers that wrap to 2 lines). */
.choice-list-yn label { align-items: center; }
.choice-list-yn input { margin-top: 0; }
/* ---------- Question-screen rhythm (scoped to .wrap only — plan pages untouched) ----------
Tighten vertical spacing so helper text → heading → paragraph → choices read as
one connected flow, not separate floating blocks. */
.wrap .transition { margin-bottom: 6px; } /* helper text → heading */
.wrap h2 { margin-bottom: 12px; } /* heading → paragraph (loosened to match the plan page) */
.wrap p, .wrap p.lead { margin-bottom: 14px; } /* paragraph → next block (match the plan page's breathing room) */
.wrap h3 { margin: 16px 0 12px; } /* roomy space above a subsection, even gap below (match plan) */
.wrap .choice-list { margin: 8px 0 14px; } /* text → first answer card; list → button */
.wrap .choice-list label { margin-bottom: 7px; } /* even gap between answer cards (tightened to pack longer lists) */
/* SOL wallet-check screen: title → one-line helper → question, exact sizing. Scoped
under .wrap (higher specificity than the .wrap h2 / .wrap p rhythm rules) so the
per-element margins below win. */
.wrap .q0-title { font-size: 24px; font-weight: 700; line-height: 1.25; color: #111827; margin-bottom: 8px; }
.wrap .q0-helper { font-size: 16px; font-weight: 400; line-height: 1.5; color: #475569; max-width: 640px; margin-bottom: 26px; } /* helper tier: 16px (senior-readable) + darker soft-slate so it doesn't read as a throwaway aside */
.wrap p.q1-helper { margin-top: -7px; margin-bottom: 19px; font-size: 16px; color: #475569; font-weight: 400; } /* desktop: darker slate, regular weight, 16px to match the .q0-helper "Why? Solana…" line one screen earlier (same one-line-helper role); tight under the title, 19px above the coin list. `p.` so it out-specifies .wrap .q0-helper by specificity, not source order (Jen, 2026-06-12) */
/* Q1 payment options — plain multi-select CHECKLIST (deliberately NOT the bordered
pick-one buttons; a multi-select reads better as a light list). Faint hairline rows,
original coin order, slot before the label for an optional coin icon. */
.checklist { list-style: none; padding: 0; margin: 8px 0 14px; }
.checklist li { margin: 0; }
.checklist label {
display: flex; align-items: center; gap: 10px;
padding: 7px 2px; cursor: pointer;
border-bottom: 1px solid #eef2f6; /* faint hairline between rows */
font-size: 17px; line-height: 1.4; transition: color .12s; /* desktop coin choices 17px (mobile overrides to 16) */
}
.checklist li:last-child label { border-bottom: 0; }
.checklist input { accent-color: var(--cwc-blue); flex-shrink: 0; margin: 0; width: 16px; height: 16px; }
/* Round "coin" checkbox — both viewports (they're coins, so circular). Blue centre dot when checked, matching the question radios. */
.checklist input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; flex-shrink: 0;
border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; cursor: pointer;
position: relative; top: -1px;
transition: border-color .15s, background-color .15s;
}
.checklist input[type="checkbox"]:checked {
border-color: var(--cwc-blue); background-color: var(--cwc-blue);
box-shadow: inset 0 0 0 3px #fff; /* blue centre dot */
}
.checklist input[type="checkbox"]:focus-visible { outline: 2px solid rgba(24, 99, 178, .5); outline-offset: 2px; }
.checklist label > span { flex: 1; }
.checklist .coin-sep { color: #cbd5e1; margin: 0 10px; font-size: 0.7em; vertical-align: middle; } /* small, light separator with breathing room — only between ticker and name */
.checklist label:hover { color: var(--cwc-blue); }
.checklist label:has(input:checked) > span { font-weight: 600; }
#q1next { margin-top: 2px; } /* desktop: +2px below the list (adds to the list's 14px → 16px); mobile overrides to 28 */
.wrap .q0-question { font-size: 18px; font-weight: 500; line-height: 1.45; color: #111827; margin-bottom: 8px; }
.wrap .note { margin: 10px 0; } /* around the yellow message box */
.wrap .vendor-msg { margin: 8px 0 4px; } /* tight to the copy link below it */
/* Vendor-message boxes on the "not sure what they accept" screen — roomier than a plain
note: full breathing room under the title, space between the two, generous side padding. */
.wrap .msg-box { padding: 14px 24px 12px; margin: 0; background: #f6f8fa; border: 1px solid #e2e8f0; border-left: 0; border-radius: var(--radius-md); } /* faint neutral — quiet container, no blue */
.msg-box .copy-btn { display: block; margin-left: auto; width: fit-content; font-size: 14px; color: #64748b; } /* Copy button to the right — a touch bigger + darker than a plain ghost link */
.msg-box .copy-btn.copy-lucky { color: #de2910; font-weight: 600; } /* "Good Luck!" flashes China-red on copy */
/* The two parallel condition lines ("If English is…" / "Otherwise…") — matched style for symmetry. */
.wrap .vendor-cond { font-size: 17px; font-weight: 500; color: var(--cwc-text); line-height: 1.4; margin: 0; }
.wrap .q0-title + .vendor-cond { margin-top: 32px; } /* breathing room below the title */
.wrap .vendor-cond + .msg-box { margin-top: 16px; } /* air between the condition line and its box */
.wrap .msg-box + .vendor-cond { margin-top: 50px; } /* the "Otherwise" line — left-aligned, dropped below the box, same size as the "If English" line */
.wrap .solana-inline { height: 11px; width: auto; vertical-align: middle; margin-left: 2px; position: relative; top: -2px; } /* very small Solana mark, inline after the sentence — nudged to sit even with the text */
/* ---------- Notes / callouts ---------- */
.note {
background: var(--cwc-panel);
border: 1px solid var(--cwc-border);
padding: 14px 18px; border-radius: var(--radius-md);
margin: 18px 0; font-size: 14.5px; line-height: 1.5;
color: var(--cwc-text);
}
/* Compact inline note attached to a sub-step (e.g. "address matters" warning under
the send sub-step). Smaller and tighter than .note so it reads as part of the
step, not as a separate visual section. */
.address-note {
background: var(--cwc-panel);
border: 1px solid var(--cwc-border);
padding: 14px 16px; border-radius: 8px;
margin: 16px 0; font-size: 17px; line-height: 1.45; /* spacing/font/corners matched to the "Speaking of QR codes" .note.warn box (8px corners, color kept neutral) — Jen 2026-06-17 */
color: var(--cwc-text);
}
.note.info {
background: var(--cwc-info-bg);
border-color: var(--cwc-info-bd);
}
/* Safety-critical (irreversible loss): outweighs ordinary notes. Red = stop. */
.note.critical {
background: #fdecea;
border-color: #e0a3a0;
border-left: 4px solid #c0392b;
}
/* Caution ("double-check, you're probably fine"): orange, below critical. */
.note.warn {
background: #fff4e5;
border-color: #f0c38e;
border-left: 4px solid #e8821a;
}
/* Solana-themed note — on-brand purple for SOL gas reminders (Jen, 2026-06-13). */
.note.sol {
background: #f5f0ff;
border-color: #d4c2f2;
border-left: 4px solid #9945ff;
}
/* The "Crypto payments are final and cannot be reversed" line at the bottom of the send caution
box — the single most important sentence in the tool (the irreversible moment). Its own line,
bold, set off by a divider, so it can't be skimmed past. Works inside .note.warn + .note.critical. */
.send-final {
display: block;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, .14);
font-weight: 700;
}
/* Copy-able vendor message + its copy button (ETH ask-your-vendor screen). */
.vendor-msg { margin: 10px 0 12px; line-height: 1.5; }
.vendor-msg span { display: block; }
.vendor-msg span + span { margin-top: 8px; } /* controlled gap between sentences (was a full blank line) */
/* "Not listed" contact capture — Web3Forms lead form (2026-07-10). Sits at the
bottom of the dead-end screen: Yes/No, then Name+Email on Yes, then a thank-you. */
.contact-ask { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--cwc-hairline); }
.contact-ask .vendor-cond { margin-bottom: 14px; }
.contact-form { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }
.contact-input { width: 100%; box-sizing: border-box; padding: 11px 13px; font-size: 15px; font-family: inherit; color: var(--cwc-text); border: 1px solid #cbd5e1; border-radius: var(--radius-md); background: #fff; }
.contact-input:focus { outline: none; border-color: var(--cwc-blue); box-shadow: 0 0 0 2px #e9f2fc; }
.contact-form #contactSend { width: fit-content; align-self: flex-start; margin-top: 2px; }
.contact-note { margin: 4px 0 0; font-size: 12.5px; color: var(--cwc-text-mute); line-height: 1.4; }
.contact-err { margin: 4px 0 0; font-size: 13px; color: #de2910; }
.contact-thanks { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--cwc-blue); }
.copy-btn { font-size: 13px; padding: 6px 14px; }
/* Class sales pitch — the CTA. Solid blue (a touch darker than the buttons), white text.
Layout-matched to .advanced-option so the two adjacent boxes read as a streamlined pair. */
.promo {
background: #eef6fc;
border: 1px solid #c6ddf1;
border-left: 4px solid var(--cwc-blue);
padding: 16px 20px; border-radius: var(--radius-md);
margin: 28px 0 0; font-size: 15px; line-height: 1.5; /* 14.5→15 to match the grad-promo body (Jen, 2026-06-13) */
color: var(--cwc-text);
}
.plan .promo h3 {
margin: 0 0 8px; padding: 0;
background: none; border-left: 0;
color: var(--cwc-text-soft);
font-size: 16.5px; font-weight: 700;
}
.plan .promo p { margin: 0; line-height: 1.5; color: var(--cwc-text); }
.promo a { color: var(--cwc-blue); font-weight: 700; }
.wrap .promo { margin-bottom: 16px; } /* dead-end screen: air below the blue "ask your vendor" box before the "Many vendors…" line */
/* Sign-up CTA promo: same calm-card look as the grad referral box — drop the base .promo's
4px blue accent bar and match its symmetric padding so the two promos read as a family (Jen, 2026-06-14). */
.promo--signup { border-left: 1px solid #c6ddf1; padding: 22px; }
/* CTA button — secondary to the primary Print/Save action, so it's an outline button
(smaller, no solid fill) that fills in on hover. */
.promo a.promo-cta {
display: inline-block;
margin-top: 14px;
padding: 7px 16px;
background: transparent;
border: 1.5px solid var(--cwc-blue);
color: var(--cwc-blue);
font-weight: 700; font-size: 14px;
border-radius: var(--radius-md);
text-decoration: none;
}
.promo a.promo-cta:hover { background: var(--cwc-blue); color: #fff; }
/* "Repeat as needed" info box on PYUSD plans — light blue, distinct from the
orange .note.warn (orange stays reserved for irreversibility-level warnings
like bank/ACH lock). Sits after the sub-step ol; gives the student calm,
structured guidance for cap / hold / abandon scenarios. */
.repeat-note {
background: #eef6fc;
border: 1px solid #c6ddf1;
border-left: 4px solid var(--cwc-blue);
padding: 14px 18px;
border-radius: var(--radius-md);
margin: 20px 0;
font-size: 14.5px;
line-height: 1.5;
color: var(--cwc-text);
}
.repeat-note h4 {
margin: 0 0 12px;
font-size: 16.5px;
font-weight: 700;
color: var(--cwc-text);
text-transform: none;
letter-spacing: 0;
}
.repeat-note p { margin: 10px 0; }
.repeat-note p:first-of-type { margin-top: 0; }
.repeat-note p:last-of-type { margin-bottom: 0; }
/* Collapsible scenarios inside .repeat-note — student taps the one matching their issue. */
.repeat-note details {
margin: 5px 0; /* loosened from 2px — more air between the tap-to-expand scenarios (Jen) */
border-top: 1px solid #c6ddf1;
padding-top: 12px; /* 4→12: more space below the divider line, above each question (Jen) */
}
.repeat-note details:first-of-type { border-top: 0; padding-top: 2px; margin-top: 8px; }
.repeat-note details summary {
cursor: pointer;
font-weight: 700;
padding: 2px 0;
color: var(--cwc-text);
outline: none;
list-style: none;
display: flex;
align-items: baseline;
gap: 6px;
}
.repeat-note details summary::-webkit-details-marker { display: none; }
.repeat-note details summary::before {
content: "▸";
color: var(--cwc-blue);
font-size: 13px;
transition: transform 0.15s;
}
.repeat-note details[open] summary::before { content: "▾"; }
.repeat-note details summary:hover { color: var(--cwc-blue); }
.repeat-note details p {
margin: 12px 0 10px 18px; /* 8→12 top: space between the question and its answer (Jen) */
font-size: 17px; line-height: 1.5; /* match the other Good-to-know sections' readable body (17/1.5) — was a cramped 14px (Jen) */
}
/* When a scenario is open, add real room below its content before the next row's border.
(The 's own bottom margin is zeroed by .repeat-note p:last-of-type, so pad the box.) */
.repeat-note details[open] { padding-bottom: 12px; }
/* Collapsible plan phases (Buy / Swap / Send) — independent, closed by default.
Desktop formatting per Jen's spec (2026-06-02). Scoped to .phase only. */
.phase-hint { font-size: 13px; color: var(--cwc-text-mute); margin: 14px 0 8px; }
.phase { margin: 13px 0; }
/* Step row — a calm guided-checklist row, NOT a big CTA button (redesign 2026-06-06,
per accordion/stepper standards). Number badge left · title (the focus) · chevron far
right. Collapsed = very pale; open = pale blue. */
.phase > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 0;
padding: 12px 28px 12px 22px;
box-sizing: border-box;
font-weight: 400;
color: var(--cwc-text);
background: #f7faff;
border: 1px solid #d8e2ee;
border-radius: 6px;
transition: background .15s, border-color .15s;
}
.phase > summary:hover { border-color: #b9cee6; color: var(--cwc-blue); }
.phase[open] > summary { background: var(--cwc-blue-light); border-color: #c6ddf1; border-radius: 6px 6px 0 0; }
.phase > summary::-webkit-details-marker { display: none; }
/* Chevron, far right — points down when collapsed, rotates up when open. */
.phase > summary::after {
content: "›";
margin-left: auto;
padding-left: 12px;
color: #5b7188;
font-size: 36px; font-weight: 600; line-height: 1;
transform: translateY(-3px) rotate(90deg); /* optical lift — the big rotated "›" read low vs the title (Jen, 2026-06-13) */
transition: transform .15s;
}
.phase[open] > summary::after { transform: translateY(-3px) rotate(-90deg); }
/* Small quiet number badge — signals the step without competing with the title. */
.phase-num {
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%;
background: #e9f2fc; color: var(--cwc-blue-dark);
font-size: 14px; font-weight: 600;
margin-right: 14px;
}
.phase[open] .phase-num { background: #fff; }
.phase-title { font-size: 20px; font-weight: 600; min-width: 0; } /* 18→20 to stay clearly above the 17 body */
/* Coin mark next to a "Buy [coin]" step title — sized to the title text. Hidden until the
step is opened (shows only once they're actually in the buy menu). */
.phase-coin { display: none; height: 25px; width: auto; vertical-align: middle; margin-left: 6px; position: relative; top: -2px; }
.phase-coin[src*="solana"] { height: 19px; } /* desktop: sized to match the top chip's Solana:USDT proportion (26:34 ≈ 0.76) against the 25px phase USDT → ~19. The bars logo reads wide, so it's trimmed well below the round coins. (mobile also 19.) Buy SOL + Swap SOL titles. */
/* Arrow between the two coins in a "Swap A → B" title — even breathing room each side so
each mark hugs its own ticker (the marks use the 6px .phase-coin margin to their ticker). */
/* Swap step title connectors. COLLAPSED rows show NO symbols (Jen, 2026-06-12) — just the plain
"Swap PYUSD to USDT" word. On EXPAND the symbol appears: ⇄ on desktop, "/" on mobile (the ⇄
reads crowded once the coin logos show on a phone), plus the coin logos. */
.swap-to { display: inline; margin: 0 5px; } /* the plain "to" — shown only when COLLAPSED; inherits the phase-title weight + color so it matches "Swap" (Jen) */
.phase[open] .swap-to { display: none; }
.swap-arrow { display: none; margin: 0 9px; color: var(--cwc-text-mute); font-weight: 700; } /* ⇄ — hidden when collapsed */
.phase[open] .swap-arrow { display: inline; } /* ⇄ shown when open (desktop; mobile overrides to keep "/") */
.swap-arrow svg { width: 18px; height: 18px; vertical-align: middle; display: inline-block; } /* the ⇄ two-arrows glyph — muted via .swap-arrow color */
.swap-word { display: none; } /* the "/" — base hidden; mobile shows it when open */
.send-arrow { display: none; margin-left: 6px; color: var(--cwc-text-mute); } /* ↗ now sits at the END of the Send title, after "to your vendor" (Jen's option C) — hidden when collapsed, shown only when open; a left gap from "vendor", no position fussing needed at the end */
.phase[open] .send-arrow { display: inline; }
.send-arrow svg { width: 27px; height: 27px; vertical-align: middle; display: inline-block; } /* 18→20→22→25→27 — Jen wanted the Send ↗ bigger */
/* The arrow that follows the Solana mark — tuned independently of other coins' arrows.
(Was 2px to absorb the big logo's right-padding; once Solana shrank to 19px that padding
shrank too and the arrow sat right on it, so it needs real space again.) */
.phase-coin[src*="solana"] + .swap-arrow { margin-left: 6px; }
.phase[open] .phase-coin { display: inline-block; }
/* "Close" link at the bottom of an open phase — collapse without scrolling back to the header. */
.phase-close {
display: block; margin: 16px 0 0 auto;
background: none; border: 0; padding: 4px 0;
font-family: inherit; font-size: 14px; color: var(--cwc-text-soft); cursor: pointer;
}
.phase-close::after {
content: "›"; display: inline-block; margin-left: 6px;
font-size: 16px; font-weight: 600; transform: rotate(-90deg); /* up-chevron, matches the header chevron */
}
.phase-close:hover { color: var(--cwc-blue); }
/* "Close all" at the bottom of a PayPal-issue box — only appears once a scenario is open. */
.repeat-close {
display: none; margin: 12px 0 0 auto;
background: none; border: 0; padding: 4px 0;
font-family: inherit; font-size: 14px; color: var(--cwc-text-soft); cursor: pointer;
}
.repeat-note:has(details[open]) .repeat-close { display: block; }
.repeat-close:hover { color: var(--cwc-blue); }
.repeat-close::after { content: "›"; display: inline-block; margin-left: 6px; font-size: 16px; font-weight: 600; transform: rotate(-90deg); }
.phase-summary { color: var(--cwc-text-mute); font-weight: 400; font-size: 14px; }
/* Open content box — shares the header's left/right border; the header's bottom
edge is the subtle divider. */
.phase[open] .phase-body {
border: 1px solid #c6ddf1;
border-top: 0;
border-radius: 0 0 6px 6px;
padding: 22px 28px 28px;
font-size: 17px;
line-height: 1.5;
color: var(--cwc-text);
}
.phase-body > *:first-child { margin-top: 0; }
/* Content lead lines — Buy & Swap titles + Send's "Have your vendor's…" intro all share
one low-key look (Jen 2026-06-02): regular weight, body color, a touch bigger than body
(17px). No blue heading — the collapsible header bar carries the phase label. */
.phase .phase-body > strong:first-child,
.phase .phase-body > ol.phase-steps > li > strong:first-child {
display: block;
font-size: 17px;
font-weight: 400;
line-height: 1.45;
color: var(--cwc-text);
margin: 0 0 9px;
}
.phase-body p { font-size: 17px; line-height: 1.45; margin: 0 0 18px; } /* one body size = 17 (senior-readable, Jen 2026-06-09) */
/* Intro paragraph under a step title — beat the universal "+ p { margin 0 0 10px
!important }" rule (line ~493) with a higher-specificity !important. */
.phase .phase-body ol.phase-steps > li > strong:first-child + p { margin: 0 0 18px !important; line-height: 1.45; }
/* Numbered sub-steps inside a phase. */
ol.phase-steps { list-style: none; margin: 0; padding: 0; }
.phase-body ol ol { font-size: 17px; }
.phase-body ol ol > li { line-height: 1.48; margin-bottom: 15px; }
.phase-body ol ol > li:last-child { margin-bottom: 0; }
/* Any note inside a phase reads at body size (17px) — the base .note 14.5px is meant
for the question screens, not inside plans. The variant boxes (.warn/.info/.sol/
.critical) restate this below; this covers the plain .note (e.g. the Bitcoin
network-fee note, the "skip the swap" notes). */
.phase-body .note { font-size: 17px; line-height: 1.45; }
.phase-body .note strong { font-size: 17px; }
/* A note placed directly in a plan (NOT inside a phase) — e.g. the "On second thought, we
shifted" reroute note at the top of the Bitcoin-direct plan — would fall back to the small
base 14.5px. Pin it to the plan body 17px so it doesn't read tiny (Jen, 2026-06-14). */
.plan > .note { font-size: 17px; line-height: 1.45; }
/* Tip / warning box inside phase content — soft orange box per spec. */
.phase-body .note.warn {
margin: 16px 0;
padding: 14px 16px;
border: 1px solid #f0c38e;
border-radius: 8px;
background: #fff4e5;
font-size: 17px; /* important caution — keep it at body size, not the smallest text */
line-height: 1.45;
}
.phase-body .note.warn strong { font-size: 17px; }
.phase-body .note.sol {
margin: 16px 0;
padding: 14px 16px;
border: 1px solid #d4c2f2;
border-left: 4px solid #9945ff;
border-radius: 8px;
background: #f5f0ff;
font-size: 17px;
line-height: 1.45;
}
.phase-body .note.sol strong { font-size: 17px; }
/* Safety-critical (irreversible loss) inside a phase — the highest-stakes text in the
wizard, so it must read at body size, never the smallest. */
.phase-body .note.critical { font-size: 17px; }
.phase-body .note.critical strong { font-size: 17px; }
/* Calm info box (e.g. "Solana payments usually go through in seconds") — reassurance,
meant to read quietly, so just a touch under the steps. */
.phase-body .note.info { font-size: 17px; }
/* De-boxed advisory callout inside a phase (e.g. "When you pay") — slim amber left rule
+ bold label, NO box, so it doesn't nest a box inside the phase box. (Safety warnings
keep the full .note.warn / .note.critical box.) */
.phase-body .callout-line {
margin: 8px 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid #16a34a; /* thin green line — reads as friendly advice, not a caution */
font-size: 17px; /* level with the walkthrough steps — it's highlighted advice, shouldn't be the smallest text */
line-height: 1.45;
}
.phase-body .callout-line strong { font-size: 17px; }
.phase-body .callout-line .cl-green { color: #16a34a; } /* the "do this" advice — bright, crisp green */
.phase-body .callout-line .cl-caveat { display: block; margin-top: 6px; } /* the "bank transfers can lock…" caveat drops to its own line, below the green advice — two distinct thoughts (Jen, 2026-06-12) */
/* When the callout sits inside the buy walkthrough list (PayPal plans), pull it back out
to the outer box margin instead of the bullet indent. */
.phase-body ul.walkthrough > .callout-line { margin-left: -20px; }
/* Calm info box inside phase content — soft blue, NOT a warning. Used for the
"Make sure it went through" status guide (expectation-setting, nothing to stop). */
.phase-body .note.info {
margin: 16px 0;
padding: 14px 16px;
border: 1px solid var(--cwc-info-bd);
border-radius: 8px;
background: var(--cwc-info-bg);
font-size: 17px;
line-height: 1.45;
}
/* The Solana send-status guide (Sending/Dropped/Sent) only: de-boxed (no border/fill/side padding)
so it uses the FULL phase width — the box's side padding was squeezing the long "Dropped — your
crypto is still safe…" line. Set apart with a blue line BELOW it instead, separating it from the
"Tell your vendor" action. Both viewports (Jen, 2026-06-12). */
.phase-body .note.info.status-guide {
border: 0;
border-bottom: 2px solid var(--cwc-blue);
background: none;
border-radius: 0;
padding: 0 0 12px; /* space above the line: tighter, grouped with the status block it closes (Jen) */
margin: 0 0 24px; /* space below the line → "Vendor follow-up" heading: 24px (Jen, +2 from 22) */
}
/* The status list carries a default ~17px top+bottom margin. Bottom zeroed so the 12px
padding is the TRUE gap above the blue line (it was pushing the line toward "Vendor
follow-up"); top brought to 8px so "…you'll see one of these statuses:" sits tidily
above the first bullet, matching the 8px gaps elsewhere in the box (Jen). */
.phase-body .note.info.status-guide ul.walkthrough { margin: 8px 0 0; }
/* The single post-send action ("Tell your vendor…") — plain paragraph, no orphan bullet.
15px to match the status box. Spacing inherits the system `.phase-body p` rule
(margin 0 0 18px) — no custom values, so it matches Buy/Swap/Send. */
.phase-body p.after-action { line-height: 1.5; font-size: 17px; }
/* After-send action leads ("Check it in Activity", "Tell your vendor it's sent") read as
bold as the Send-step leads (700) — the global `strong` is a softer 600, which left these
looking under-weight next to the 700 send leads (Jen caught it). Targets only the lead,
not the inline emphasis on "Activity" / "Transaction ID" in the body. */
.phase-body p.after-action > strong:first-child,
.phase-body p.after-action > span:first-child > strong { font-weight: 700; }
/* A continuation paragraph that belongs to the SAME heading as the one above it
("If they ask…" under "Vendor follow-up…") — pull it up 2px so the two read as one
unit (18→16) rather than the full section gap. Scoped by class so other after-action
pairs across paths aren't affected (Jen). */
.phase-body p.after-cont { margin-top: -2px; }
/* A status/info box that's the FIRST thing in an open phase starts flush at the top
padding, same as every other phase's first content (the `*:first-child` reset loses
to `.note.info`'s own margin on specificity, so restore it here). */
.phase-body > .note:first-child { margin-top: 0; }
/* Send walkthrough — 4 numbered steps, each with bulleted sub-points. + After-send list. */
ol.send-steps { margin: 0; padding-left: 22px; }
.send-steps > li { margin-bottom: 18px; }
.send-steps > li:last-child { margin-bottom: 0; }
.send-steps > li > strong:first-child { display: block; font-weight: 700; margin-bottom: 8px; } /* gap to first bullet standardized to 8px — matches the "Check it in Activity" lead→content gap (Jen, 2026-06-12) */
.send-steps ul { margin: 4px 0 0; padding-left: 20px; list-style: disc; }
.plan .send-steps ul > li { margin-bottom: 11px; line-height: 1.45; } /* 11px to match the Buy/Swap walkthrough sub-bullets (desktop + mobile). NOTE: needs the `.plan` prefix to out-specify `.plan ul > li { margin-bottom: 6px }` (line ~826) which otherwise ties on specificity and wins by source order, squashing these to 6px (Jen, 2026-06-13). The 18px between the 3 groups still carries the hierarchy. */
/* Swap walkthrough + After-send list — top-level bulleted lists in a phase. Styled
identically so their spacing matches (title gap, indent, item spacing). Bold action
stays inline as a lead-in; bullets handle the list. */
.phase-body ul.walkthrough,
.phase-body ul.after-list { list-style: disc; }
.phase-body ul.walkthrough > li,
.phase-body ul.after-list > li { line-height: 1.45; margin-bottom: 11px; } /* 8→11 both viewports: clearer step separation for multi-line bullets (Jen, 2026-06-12) */
.phase-body ul.walkthrough > li:last-child,
.phase-body ul.after-list > li:last-child { margin-bottom: 0; }
.phase-body ul.walkthrough > li:has(.exchange-callout) { margin-bottom: 11px; } /* +3 below the inline "Exchange options" box → a little more air before the next step (Jen) */
/* Tighten + unify the step indents in the collapsed layout (Jen: the wider indent
looked left-heavy / lopsided vs. the right margin, and ate space). One modest indent. */
/* Outer Buy list: keep its content flush with the box edge (it was inheriting a 22px
left padding from `.plan ol`, pushing the whole Buy block in vs. Swap). */
.phase-body ol.phase-steps { padding-left: 0; }
.phase-body ol.send-steps,
.phase-body ul.walkthrough,
.phase-body ul.after-list,
.phase-body ol.phase-steps ol { padding-left: 20px; }
.phase-body .send-steps ul { padding-left: 18px; } /* desktop: keep the deeper sub-bullet indent (Jen prefers it — bullets sit under the step text). Mobile pulls them in a little, but still right of the numbers — see the mobile block. */
/* In-step callout boxes (e.g. "When you pay") — balance their outer margins to match the
step list, equal on each side (Jen). With Buy now flush, the sub-step list is 20px in,
so a 20px right margin mirrors the 20px the box sits in on the left. */
.phase-body ol.phase-steps .note.warn { margin-left: 0; margin-right: 20px; }
/* Grad-referral promo — same .promo shell, with a share-button row in place of the
single sign-up CTA. Rendered when state.has_sol === "yes" (the grad signal). */
/* Calm secondary card (Jen spec 2026-06-11): drop .promo's 4px blue left accent for a
uniform subtle 1px border, roomier padding, and 12px rhythm between the parts. */
.grad-promo { border-left: 1px solid #c6ddf1; padding: 22px; } /* symmetric top/bottom (was 20 bottom) so box space matches top↔bottom (Jen, 2026-06-13) */
.grad-promo h3 { font-size: 17px; margin: 0 0 12px; line-height: 1.3; } /* own heading line-height — was inheriting the loose 1.5 body value, which read weird when the title wrapped on mobile (Jen, 2026-06-14) */
.plan .grad-promo p { margin: 0 0 12px; line-height: 1.5; font-size: 15px; } /* description 15px + spacing (overrides .plan .promo p margin:0) */
.share-row {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; /* gap 15→10 so all 4 buttons fit one row incl. "Copy promo code" (Jen, 2026-06-13) */
margin: 18px 0 18px; /* symmetric space above/below the buttons on desktop (Jen, 2026-06-13) */
}
.share-btn {
display: inline-block;
padding: 10px 12px; /* ~40px tall; horizontal 16→12 to fit all 4 on one row (Jen, 2026-06-13) */
background: #fff; /* secondary/quiet: white fill, not bright blue */
border: 1px solid #cbd5e1; /* subtle muted blue-gray border */
color: var(--cwc-text); /* dark, readable text */
font-weight: 600; font-size: 15px;
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.share-btn:hover { background: #f1f5f9; border-color: #94a3b8; } /* slight tint on hover — stays quiet */
.share-btn.copied { background: #eef6f1; color: var(--cwc-green); border-color: #cfe6da; } /* soft-green confirmation — calm tint, not a loud solid fill (Jen, 2026-06-18) */
.share-btn--native { display: none; } /* native Share sheet — mobile only (shown in the ≤480 block); hidden on desktop where navigator.share is unreliable (Jen, 2026-06-13) */
.share-subline {
font-size: 13px; /* 12→13: off the floor, matches the fine-print tier — it's useful guidance (Jen) */
color: var(--cwc-text-mute);
margin: 12px 0 0; /* base (overridden below by .plan .grad-promo p) */
font-style: normal;
}
/* Real desktop spacing above the subline. .plan .grad-promo p (margin-top:0) beats the base
.share-subline, so set it here with matching specificity. Effective top gap = this + the
share-row's 12px bottom margin. Down 2 (0→2) per Jen, 2026-06-13. Mobile overrides in the ≤480 block. */
.plan .grad-promo .share-subline { margin-top: 2px; }
/* Sign-up box: its CTA button has no bottom margin and `.plan .promo p` zeroes the subline's
top margin, so the "Sharing in a group?" note crowds the button. Add a one-line gap below
the button (both viewports). (Jen, 2026-06-26) */
.plan .promo--signup .share-subline { margin-top: 16px; }
.error { color: #b22b2b; font-weight: 500; }
.transition {
color: var(--cwc-blue); font-style: italic; font-size: 14.5px;
margin: 0 0 12px;
}
.fine-print {
color: var(--cwc-text-mute); font-size: 13px; line-height: 1.45;
margin-top: 4px; margin-bottom: 4px;
}
.fine-print:has(+ .fine-print) { margin-bottom: 0; }
.fine-print + .fine-print { margin-top: 0; }
.fine-print a { color: var(--cwc-blue); }
/* "See steps in more detail" pop-out (collapsed by default) inside a buy step. */
.more-steps { margin: 14px 0 16px; }
.more-steps > summary {
cursor: pointer; color: var(--cwc-blue); font-weight: 600; font-size: 14px;
list-style: none; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 0;
}
.more-steps > summary::-webkit-details-marker { display: none; }
.more-steps > summary::before { content: "▸"; font-size: 12px; transition: transform .15s; }
.more-steps[open] > summary::before { transform: rotate(90deg); }
.more-steps > summary:hover { text-decoration: underline; }
.more-steps > ol { margin: 10px 0 4px; }
.more-steps > ol > li { margin-bottom: 8px; line-height: 1.5; }
/* "Data pulled …" caption — very subtle, right-aligned, tucked under a chart. */
.data-pulled { text-align: right; font-size: 13px; color: #94a3b8; margin: 2px 0 0; } /* 11→13 (Jen) */
/* Inside a collapsible box, .phase-body p (17px) was overriding .data-pulled — restore the
small footnote size so "Data pulled…" doesn't read bigger than the table (Jen, 2026-06-14). */
.phase-body .data-pulled { font-size: 13px; }
/* Drift / volatility sections ("Bitcoin's price swings", "Stabilizing your funds") use bare
outside any phase, so they'd inherit the airy 1.6 base line-height → big gaps when a
line wraps. Pin them to the plan body 1.45, matching every other section (Jen, 2026-06-14). */
.drift-section p { line-height: 1.45; }
.cost-section .fee-estimate-note { font-size: 15.5px; color: #64748b; line-height: 1.4; margin: 20px 0 0; max-width: none; } /* note + inline link 15→15.5; margin-top 18→20 (down 2) (Jen, 2026-06-13) */
.fee-estimate-note a { font-size: 15.5px; color: #0b57c2; text-decoration: underline; }
/* "Good to know" aside — KNOW content (context/FYI), visually demoted vs. the
DO steps and quieter than the orange/red safety callouts. */
.know {
margin: 10px 0;
font-size: 13.5px; color: var(--cwc-text-mute); line-height: 1.5;
}
.know .know-label {
display: block; font-weight: 700; color: var(--cwc-text-soft); margin-bottom: 2px;
}
.know ul, .know p { margin: 0 0 6px; }
.know p + p { margin-top: -4px; }
.know ul:last-child, .know p:last-child { margin-bottom: 0; }
.know strong { color: var(--cwc-text-soft); }
/* "Wanna nerd out?" Solscan peek — Solana-purple bonus callout (#9945FF = Solana's
brand purple). The one purple in the wizard, reserved for this delight moment. */
.know.nerd-out {
background: #f4effe;
border: 1px solid #d9c5fb;
border-left: 4px solid #9945ff;
border-radius: 8px;
padding: 12px 14px;
font-size: 15px; /* 13.5→15 — it's the fun delight moment, a touch more readable (Jen) */
color: var(--cwc-text-soft); /* darker than the base .know muted grey (#64748b → #475569): the muted grey was only ~4:1 on the lavender bg → hard to read on desktop (Jen). Label keeps its purple override below. */
}
.know.nerd-out .know-label { color: #9945ff; }
/* Bitcoin nerd-out box: mempool palette (blue/green) instead of Solana purple (Jen, 2026-06-14). */
.know.nerd-out--btc {
background: #ebf6fc;
border-color: #c2e2f4;
border-left-color: #06ADEF;
}
.know.nerd-out--btc .know-label { color: #0D47A1; }
/* Ethereum nerd-out box: Etherscan/ETH palette (slate-blue + periwinkle) instead of Solana purple (Jen, 2026-06-17). */
.know.nerd-out--eth {
background: #eef0f8;
border-color: #c9cee8;
border-left-color: #627EEA;
}
.know.nerd-out--eth .know-label { color: #454A75; }
/* ---------- Topbar ---------- */
/* Compact utility strip above the main card — matches the card's width (680px) and
stays quiet (minimal padding, subtle divider, no shadow) so the card stays the focus. */
.topbar {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
padding: 3px 58px; background: var(--cwc-card-bg);
border-radius: 0;
box-shadow: none; /* no shadow on the bar — a single raised box's drop-shadow pools at the bottom (the card); a shadow here casts onto the card and draws a seam line */
width: calc(100% - 40px); max-width: 600px; margin: 0 auto; /* match the card's width/gutters so the merged box edges align */
position: sticky; top: 0; z-index: 10;
}
.topbar-left { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Quiet greeting shown in the bar on the intro screen, in place of "Start over". */
.topbar-welcome {
width: 100%; text-align: right; line-height: 24px; /* match the action-button height so the intro bar == the question bar */
font-size: 15px; font-weight: 500; letter-spacing: 0.5px; color: #64748b; /* a touch bigger/lower than the links — quiet greeting, no italics */
position: relative; top: 6px;
}
/* Intro screen: greeting right-aligned in the bar; no action buttons there.
Same padding + a matched line height as the question screens, so the bar height is identical. */
.topbar.intro-bar .topbar-actions { display: none; }
.topbar.intro-bar .topbar-left { flex: 1; align-items: stretch; gap: 0; }
.breadcrumbs { font-size: 14px; color: var(--cwc-text-mute); line-height: 1.5; position: relative; top: 6px; } /* 12→14 to match the "Show my answers" toggle (Jen) */
/* top:6px drops the first answer line onto the same baseline the "Show my answers"
toggle sat on (toggle = 24px line + 3px nudge; breadcrumbs = 18px line). Rows below stay tight. */
.breadcrumbs strong { color: var(--cwc-text); font-weight: 400; } /* values: neutral + normal weight, so "No" matches "BTC" (the Yes/No was bold, coins weren't) */
.bc-row { margin-bottom: 2px; } /* tight summary rows */
.bc-row:last-child { margin-bottom: 0; }
.bc-label { font-weight: 600; color: var(--cwc-text-soft); }
.bc-value { color: var(--cwc-text); }
.topbar-actions { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 14px; row-gap: 2px; flex-shrink: 0; position: relative; top: 3px; } /* baseline-align so Back (w/ its 16px arrow) + Start over share a baseline at any font size (Jen) */ /* Back + Start over on row 1; Next tucked just below */
/* Top-bar "Next" link — its own line, right-aligned under Start over. */
.topbar-next { flex-basis: 100%; text-align: right; margin-top: -5px; } /* desktop: right Next, tucked under Start over */
.topbar-next-left { display: none; } /* the left Next is mobile-only */
.js-topnext.topnext-muted { color: #cbd5e1; } /* greyed until an answer is picked (both links) */
.bk-arrow { font-size: 16px; margin-right: 4px; vertical-align: -1px; } /* left arrow on Back — a touch larger than the label so it reads clearly, never tiny */
/* "Show my answers" — very faint text control, same height as the Back/Start over ghost
links (13px / 24px line). No underline; fades up gently on hover instead. */
.topbar-toggle {
background: none; border: 0; padding: 0; margin: 0;
font-size: 14px; line-height: 24px; font-weight: 500; /* Show my answers — 13→14 (Jen) */
color: #94a3b8; cursor: pointer; /* visible-but-quiet — matches the Back/Start over links */
text-decoration: none;
transition: color .2s;
position: relative; top: 3px; /* drop to the same line as Back/Start over */
}
/* Purely a text control — strip the base button's fill/ring/press behavior. */
.topbar-toggle:hover { color: #475569; background: none; text-decoration: none; } /* darkens to a readable slate, no fill */
.topbar-toggle:focus-visible { box-shadow: none; outline: 0; }
.topbar-toggle:active { transform: none; }
/* Collapsed: hide the choices — the toggle becomes the lone left item, one slim row. */
.topbar.collapsed { align-items: flex-start; } /* top-align so "Show my answers" stays on the Back/Start over line even when the Next row makes the right side taller */
.topbar.collapsed .breadcrumbs { display: none; }
/* ---------- Plan output ---------- */
.plan {
background: var(--cwc-card-bg);
padding: 38px 36px 32px; /* top 32→38: a little more breathing room on the final plan page (Jen). NB: this is now 6px lower than the question-screen .wrap (32) — deliberate, the plan gets a touch more air. */
border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* square top, rounded bottom — tucks under the answers bar as one box (matches .wrap) */
box-shadow: var(--shadow-card);
}
.plan > *:first-child { margin-top: 0; }
.plan > .note:first-child { margin-top: 0; }
.plan h2 { color: var(--cwc-blue); border-bottom: 2px solid var(--cwc-blue-light); padding-bottom: 10px; margin-bottom: 8px; }
.plan h3 {
margin-top: 32px; margin-bottom: 12px;
padding: 10px 0 8px 14px;
border-left: 4px solid var(--cwc-blue);
background: linear-gradient(to right, var(--cwc-blue-light), transparent 60%);
color: var(--cwc-blue-dark);
font-size: 18px; font-weight: 700;
}
/* Demoted heading for optional/tangent sections — reads as secondary, not part of the do-this spine. */
.plan h3.secondary {
border-left: 0; padding-left: 0; background: none;
color: var(--cwc-text-soft); font-size: 15px;
margin-top: 28px;
}
.plan ol, .plan ul { padding-left: 22px; }
.plan > ol > li { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cwc-border); }
.plan > ol > li:last-child { border-bottom: 0; }
.plan ol ul, .plan ol ol { margin-top: 8px; }
/* Tighten nested sub-steps so they feel like a single step's micro-list */
.plan ol ol > li { margin-bottom: 4px; padding-bottom: 0; border-bottom: 0; }
.plan ul > li { margin-bottom: 6px; }
/* Numbered step phases — each top-level step's lead becomes a "Step N ·" title. */
.plan ol.steps { list-style: none; padding-left: 0; counter-reset: step; }
.plan ol.steps > li { counter-increment: step; border-bottom: 2px solid #c6ddf1; }
/* No separator-line/padding after the last step, so the following warning sits
as close as an in-step note does (matches the Don't-swap box's spacing). */
.plan ol.steps > li:last-child { padding-bottom: 0; border-bottom: 0; }
/* A callout inserted between steps (e.g. the skip-the-swap note) — not a numbered
step, so don't increment the counter, draw a step divider, or indent it. */
.plan ol.steps > li.step-note { counter-increment: none; border-bottom: 0; padding: 0 0 14px; }
/* Sub-step format: bold action title on its own line, explanation right below it
(no extra paragraph spacing — just a simple line break via display:block). */
.plan ol ol > li { line-height: 1.4; margin-bottom: 10px; }
.plan ol ol > li:last-child { margin-bottom: 0; }
.plan ol ol > li > strong:first-child { display: block; margin: 0; line-height: 1.3; }
/* Reduce inline bold inside sub-step bodies — keeps the action title bold, but
downgrades secondary inline bolds to normal weight so emphasis isn't diluted.
Strongs inside warning callouts (.note.warn, .address-note, etc.) are nested
inside their own
s, so this selector doesn't reach them — they stay bold. */
.plan ol ol > li > strong:not(:first-child) { font-weight: normal; }
.plan ol.steps > li > strong:first-child {
display: block;
font-family: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 17px; font-weight: 700;
color: var(--cwc-blue-dark);
margin-bottom: 0;
}
.plan ol.steps > li > strong:first-child::before {
content: "Step " counter(step) " · ";
color: var(--cwc-blue);
}
/* Pull the step intro paragraph right under its title (tight grouping, matches the
sub-step action/explanation pattern). Override the inline margin on intro
s
in plan templates — tight to title above, tight to sub-step list below. */
.plan ol.steps > li > strong:first-child + p { margin: 0 0 10px !important; line-height: 1.4; }
/* Inline orange/yellow callouts inside the sub-step list (e.g. "💳 When you pay"
between sub-steps) — tighten the default .note 18px margins so the callout
doesn't visually break the sub-step flow. */
.plan ol ol > .note { margin: 12px 0; padding: 10px 14px; }
.plan table { width: 100%; border-collapse: collapse; margin: 4px 0 4px; font-size: 14.5px; }
.plan table th, .plan table td {
padding: 8px 12px; border: 1px solid var(--cwc-border); text-align: left;
}
.plan table th { background: var(--cwc-blue-light); color: var(--cwc-text); font-weight: 600; }
/* Drift cells: make the ± / − sign easy to catch; worst-case losses in red. */
.plan table .drift-sign { font-weight: 700; }
.plan table td.drift-loss { color: #c0392b; }
/* Mobile-only stacked "drift cards" — one card per holding time, generated from the SAME live data
as the desktop table (driftTable). Desktop keeps the table; <600px swaps to cards (Jen, 2026-06-14). */
.drift-cards { display: none; }
@media (max-width: 600px) {
.drift-table { display: none; }
.drift-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.swing-card { background: #f8fbfd; border: 1px solid #dce7ee; border-radius: 10px; padding: 12px 14px; }
.swing-card-title { font-size: 15px; line-height: 1.3; font-weight: 700; color: #123f5c; margin: 0 0 8px; }
.swing-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-top: 1px solid #e6eef3; }
.swing-row:first-of-type { border-top: none; }
.swing-label { font-size: 13px; line-height: 1.35; color: #4b5563; }
.swing-value { font-size: 14px; line-height: 1.35; font-weight: 700; color: #111827; white-space: nowrap; text-align: right; }
.swing-value.negative { color: #c7352b; }
/* The desktop full-bleed was for the wide table; cards want normal box padding, so restore it on mobile. */
.phase--cost.phase--drift:not(.phase--amber)[open] .phase-body { padding: 22px 16px 18px; border-left: 1px solid #bfe5cf; border-right: 1px solid #bfe5cf; border-radius: 0 0 8px 8px; }
}
/* "Exchange options you may see" — shaded, secondary callout inside the Buy step.
Extra bottom margin keeps Step 2 from feeling crowded under it. */
/* Two matched callout cards (Jen, 2026-06-09): "Exchange options you may see" +
"First-time buyer note" — each its own box, same title+content format, so the two
points read as distinct (spacing alone ran them together). Faint card on the white
open-phase body — reads as a card without heavy box-in-box. */
.exchange-callout {
margin: 16px 0 0;
padding: 13px 15px;
background: #f3f7fc; /* mid-tone soft-blue tint — dialed back ~halfway from the brighter pop (Jen, 2026-06-13) */
border: 1px solid #d2e0f0; /* mid between the old grey and the brighter blue */
border-radius: 8px;
font-size: 13.5px;
color: var(--cwc-text-soft);
line-height: 1.45;
}
.exchange-callout + .exchange-callout { margin-top: 12px; } /* gap between the two cards */
.exchange-callout-label {
display: block;
font-weight: 700;
color: #335b89; /* muted-blue label — mid between the old grey and the brighter blue (Jen, 2026-06-13) */
font-size: 17px;
margin-bottom: 5px; /* 8→5: title 3px closer to its content (Jen, 2026-06-13) */
}
.exchange-callout p { margin: 0 0 8px; }
.exchange-callout p:last-child { margin-bottom: 0; }
/* The inline "Exchange options" box lives inside a walkthrough
, so it inherits the
list's 20px indent and reads as pushed-in past the bullets. Pull it back out to the
content edge (same -20px the green callout-line uses), so it aligns with the bullets. */
.phase-body ul.walkthrough .exchange-callout { margin-left: -20px; }
/* ---------- Collapsible "Why we recommend" ---------- */
details.why {
margin: 16px 0; /* no fill / border — quiet toggle, recedes vs the answer rows (2026-06-05) */
}
details.why > summary {
cursor: pointer;
display: inline-block; /* shrink to the text so the arrow hugs it, not the page edge */
padding: 4px 22px 4px 0;
font-size: 14.5px;
font-weight: 500;
color: var(--cwc-blue);
list-style: none;
position: relative;
}
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::after {
content: "›";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%) rotate(90deg); /* down when closed — same chevron glyph as the step rows */
transition: transform .15s;
color: var(--cwc-blue);
}
details.why[open] > summary::after { transform: translateY(-50%) rotate(-90deg); } /* up when open */
details.why > ol, details.why > ul {
margin: 0;
padding: 4px 16px 14px 20px; /* aligned under the un-boxed summary text */
color: var(--cwc-text);
}
details.why > ol > li, details.why > ul > li { margin-bottom: 8px; }
/* "Why we ask" body when it holds paragraphs (question screens) instead of an . */
details.why > .why-body { padding: 4px 16px 14px; color: var(--cwc-text); }
details.why > .why-body p { margin: 0 0 10px; }
details.why > .why-body p:last-child { margin: 0; }
/* ---------- Q2 two-zone layout: [your answer] + [one more question] ----------
The page legitimately has two parts — the recommendation (the answer to what
they entered) and a new question. Group the "why" toggle WITH the answer, then
a faint hairline opens the question zone so the answer buttons stop floating.
Scoped to Q2 so the plan pages are untouched. (2026-06-05) */
.q2-answer .rec { margin-bottom: 10px; } /* tighten so the toggle hugs the answer above it */
.q2-answer .why { margin: 4px 0 0; } /* toggle sits with the answer, not the question */
/* "What we like about using PayPal" — small link tucked tight under the question, above the
options. NOTE: must out-specify `details.why { margin: 16px 0 }` above (0,1,1) or that 16px
wins and the toggle sits way too low — so this targets details.why.why-under-q (0,2,1). */
details.why.why-under-q { margin: 4px 0 14px; }
.wrap h3.q2-ask {
margin: 20px 0 4px; /* top 18→20: +2px space above the divider; bottom 4: the "What we like…" toggle sits close (Jen) */
padding-top: 18px; /* 16→18: +2px space below the divider, before the question (Jen) */
border-top: 1px solid #94a3b8; /* darkened divider (was #cbd5e1) for a clearer separation between the recommendation above and the question below (Jen, 2026-06-12) */
font-size: 24px; /* the decision question — matches the main question titles (.q0-title), now that the rec block above is stripped down (Jen, 2026-06-12) */
line-height: 1.2; /* tighten the wrapped 2-line question on mobile (was inheriting an airy body line-height) */
}
.q2-recap { color: var(--cwc-text-mute); } /* "Based on your answers:" recap — quieter than the reasoning paragraph */
/* Standalone "Don't have Exodus yet?" download callout — its own visible block. */
.exodus-cta {
display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px;
margin: 36px 0 0;
padding: 18px 0 0; border-top: 1px solid var(--cwc-hairline); background: none; /* plain text + a faint hairline above → marks the quiet footer zone, separate from the question */
text-align: left; /* block centers as a group; the two lines stay left-aligned (Download right under We use) */
}
.exodus-cta-logo-link { display: flex; flex-shrink: 0; line-height: 0; } /* link wrapper sizes exactly to the logo (no inline gap, keeps the centering balance) */
.exodus-cta-logo { width: 30px; height: 30px; flex-shrink: 0; } /* desktop size; mobile drops to 26 in the media query */
.exodus-cta::after { content: ""; width: 30px; flex-shrink: 0; } /* invisible spacer = logo width → balances the logo so the TEXT dead-centers (both viewports; mobile overrides width to match its logo) */
.exodus-cta-text { margin: 0; line-height: 1.25; font-size: 15px; font-weight: 500; letter-spacing: 0.25px; color: #64748b; } /* "Soft Welcome" style; tracking 0.25px on desktop (less sprawly), 0.5px on mobile (override below) */
.exodus-cta .exodus-cta-lead { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: normal; color: #0B2B50; } /* line 1: prominent dark-navy label (Jen spec 2026-07-10) */
/* Download line under the lead explanation — same size as the lead so the two
lines read as one cohesive, quiet fine-print block. */
.exodus-cta .exodus-cta-note { margin: 0; font-size: 14px; font-weight: 400; letter-spacing: normal; line-height: 1.45; color: #475569; } /* margin:0 so the text box = the two visible lines → logo centers true */
.exodus-cta .exodus-cta-note a { color: #1863B2; font-weight: 600; } /* only the Exodus.com link carries the blue accent */
/* SOL screen only: the Exodus helper is a secondary support note pinned near the
card bottom. Auto top-margin drops it below the question/Next area (so that feels
complete first); a fixed gap sits between it and the copyright footer. */
.wrap.has-helper > .exodus-cta { margin: auto 0 0; }
.wrap.has-helper > .card-footer { margin-top: 0; padding-top: 22px; }
/* SOL screen: the Next button is hidden until an answer is picked, but we keep its
space reserved (visibility, not display:none) so revealing it doesn't grow the card
and push the bottom content past the fold. */
.next-reserved { visibility: hidden; }
/* ---------- Recommendation block (top of Recommended: page) ---------- */
/* "Treatment B" — light, no box. A thin blue left rule marks the recommendation as
"this is the answer" without the heavy tinted box (which read heavy on mobile +
desktop). Just the coin + the one-line route; detailed steps live below. */
.rec {
position: relative;
padding-left: 16px;
padding-right: 16px; /* default: no dead space (chip plans have no corner badge) */
margin: 0 0 22px;
}
/* "Starting recommendation" screen (Q2 — the PayPal-decision screen). Kept deliberately spare:
an "Our Starting Recommendation" eyebrow + headline + route, with NO coin icon, NO network-fee
line, and NO blue left rule (that detail/framing lives on the final plan page that follows).
Plan pages use the flow chip + keep their blue rule. */
.rec--starting::before { display: none; } /* no blue rule on this screen (both viewports) */
.rec--starting { padding-left: 0; } /* no blue bar here → reclaim its 16px indent so the text aligns left with the question + answers below */
/* The headline sits in a faint blue box echoing the plan pages' icon-flow chip (.rec-coins),
but 30% more subtle: chip bg #f1f6fc → #f5f9fd (tint reduced 30% toward white), and the border
softened from #e2e8f0 to the hairline. Marks the recommendation as the focal answer. (Jen, 2026-06-12) */
.rec--starting .rec-headline {
display: block; /* full-width banner (Jen) */
margin: 0 -16px; /* bleed 16px into the side margins → the larger box; the left text still lines up with the question below (the 16px padding offsets the bleed) */
padding: 12px 16px;
background: #f5f9fd;
border: 1px solid var(--cwc-hairline);
border-radius: 12px;
}
/* desktop: NO forced "on the Solana network" line break — the headline fits on one line at full
width (Jen). Mobile still wraps it via the global `.rec-net { display:block }` in the @media block. */
.rec--starting .rec-route { margin-top: 8px; } /* +2px above the route line (6→8) — only on the starting screen; both viewports (Jen) */
/* The blue accent rule — a positioned bar (not a full-height border) so it's inset from
the block's top + bottom edges (shorter than the block). */
.rec::before {
content: "";
position: absolute;
left: 0; top: 1px; bottom: 1px; /* near-flush so the rule runs the block's full height (was inset 5px → read stubby) */
width: 3px; border-radius: 2px;
background: var(--cwc-blue);
}
.rec-eyebrow {
font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
color: var(--cwc-blue); margin-bottom: 6px;
}
.rec-headline {
font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--cwc-text);
letter-spacing: -.01em;
}
.rec-coin { font-weight: 700; } /* bold emphasis — de-blued so it doesn't read as a clickable link */
/* Flow chip below the route. The icons are the STOPS your money makes ($ → PayPal USD →
coin → vendor); the verbs (Buy / Swap / Send) label the ARROWS between them — the actions
that move you from one stop to the next. Built in buildRecBlock for PayPal-funded paths. */
.rec-coins {
margin-top: 15px; /* space above the flow card */
display: inline-block;
padding: 24px 22px 11px; /* top 22→24: +2px so the floating verb labels aren't right against the top edge (Jen); roomier sides */
border: 1px solid var(--cwc-border);
border-radius: 12px;
background: #f1f6fc; /* faint brand-blue tint — reads as a deliberate unit */
}
.rec-flow-mobile { display: none; } /* desktop: hidden — this is the mobile-only action list (shown ≤600px); desktop uses .rec-coins above */
.rec-coins-row { display: flex; align-items: center; gap: 16px; } /* 11→16: more breathing room between icons now the verb labels are bigger (Jen) */
.rec-flow-node { display: flex; align-items: center; }
.rec-coin-mark { height: 36px; width: auto; }
.rec-coin-mark--sol { height: 26px; } /* Solana bars fill their box more than the round coins — trimmed so it doesn't read larger */
.rec-coin-mark--usdt { height: 34px; } /* Tether mark reads a touch large — trim 2px */
.rec-coin-mark--eth { height: 38px; } /* ETH diamond reads narrow → +2px desktop for a bit more weight (Jen, 2026-06-17). Mobile keeps its own 26px rule (more specific). */
/* The leading "$" — a coin-style circle. Green = real cash. */
.rec-coin-mark.rec-dollar {
width: 35px; height: 35px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #16A765; color: #fff; font-weight: 700; font-size: 21px; line-height: 1;
}
/* Send (envelope) + Verify (check) are the flow's ENDPOINTS, not coins — so no circle.
Bare glyphs, colored directly (the SVG fill is currentColor): the envelope carries the
send-network tint, the check is green. No background / no border-radius / no fixed box. */
.rec-coin-mark.rec-send,
.rec-coin-mark.rec-verify {
width: auto; height: auto; background: none; border-radius: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.rec-coin-mark.rec-send { color: #64748b; } /* neutral fallback */
.rec-coin-mark.rec-send--solana { color: #7C5CFF; } /* Solana purple */
.rec-coin-mark.rec-send--bitcoin { color: #06ADEF; } /* mempool cyan — Bitcoin envelope renders as a thick outline (Jen, 2026-06-14) */
/* Envelope has two variants in one SVG: a filled body (other coins) and a stroked outline.
Outline is hidden by default; Bitcoin hides the fill and shows the cyan outline instead. */
.env-outline { display: none; }
.rec-coin-mark.rec-send--bitcoin .env-fill { display: none; }
.rec-coin-mark.rec-send--bitcoin .env-outline { display: inline; }
.rec-coin-mark.rec-send--ethereum { color: #627EEA; } /* Ethereum blue */
.rec-coin-mark.rec-verify { color: #16A765; } /* green check, bookending the green "$" */
.rec-flow-svg { display: block; } /* bare endpoint glyphs — sized per glyph below */
.rec-coin-mark.rec-send .rec-flow-svg { width: 39px; height: 39px; } /* envelope */
.rec-coin-mark.rec-verify .rec-flow-svg { width: 36px; height: 36px; } /* check */
/* Arrow segment between two stops — the verb floats above the arrow line. */
.rec-flow-arrow { position: relative; display: flex; align-items: center; padding: 0 2px; }
.rec-flow-verb {
position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
font-size: 16px; font-weight: 500; letter-spacing: 0.3px; color: #64748B; white-space: nowrap; /* 12.5→16 for legibility (Jen) */
}
.rec-flow-line { font-size: 24px; line-height: 1; color: var(--cwc-text-mute); opacity: 0.75; } /* 19→22→23→24: larger arrows to match the bigger icons + verbs (Jen) */
.rec-flow-line svg { width: 23px; height: 23px; vertical-align: middle; display: inline-block; } /* Exodus-style Swap/Send glyphs (21→22→23) — muted via currentColor + the .rec-flow-line opacity (Jen) */
.rec-flow-name { display: none; } /* desktop: icon-only horizontal chip. Names appear only on the mobile vertical layout. */
/* Small Solana mark inline beside the buy instructions (plan pages). */
.plan .sol-inline { height: 13px; width: auto; vertical-align: middle; margin-left: 2px; position: relative; top: -1px; } /* desktop; mobile pulls it 1px further left below */
.rec-route {
margin-top: 6px;
font-size: 17px; color: var(--cwc-text-soft); line-height: 1.5;
}
.rec-route strong { color: var(--cwc-text); font-weight: 600; }
.rec-why {
margin-top: 19px; /* breathing room below the flow card */
font-size: 16px; color: var(--cwc-text-soft);
line-height: 1.5;
}
.rec-why strong { color: var(--cwc-blue-dark); }
.rec-fee { margin-top: 7px; font-size: 14.5px; color: #7c8a9e; line-height: 1.4; } /* network fees — info; still receded but slightly darkened #94a3b8→#7c8a9e for readability (Jen). mobile pinned 14px (label floor) below */
/* Light hand-off from the recommendation to the steps. Grouped with the steps
(12px below, the rec block's 22px sits above) — introduces, doesn't shout. */
.steps-leadin { margin: -2px 0 8px; font-size: 20px; font-weight: 500; color: var(--cwc-text); } /* header→first-item gap 9→8 (both sections, Jen) */ /* 20px, lighter (600→500), nudged down 1px + 1px closer to the menus below (Jen) — mobile keeps its own 18px */
.steps-leadin + .phase { margin-top: 0; } /* tighten the gap from "Here's what to do" to the first step (no margin-collapse surprise) */
.know-leadin { margin-top: 32px; } /* "Good to know:" — gap above; "Here's what to do" matches this on desktop so both headers sit equally below their section (Jen) */
/* ---------- Cost calculator ---------- */
/* Whole cost-estimate section sits in a bright-green box. */
.cost-section {
background: var(--cwc-green-bg);
border: 0;
border-radius: var(--radius-md);
padding: 4px 18px 18px;
margin: 22px 0;
font-size: 17px; /* body copy = 17; h3/notes/calc keep their explicit sizes */
}
/* Heading matches other plan sections' format, just green instead of blue. */
.plan .cost-section h3 {
margin: 16px 0 12px;
padding: 10px 0 8px 14px;
border-left: 4px solid var(--cwc-green);
background: linear-gradient(to right, var(--cwc-green-bd), transparent 60%);
color: var(--cwc-green-text);
font-size: 20px; font-weight: 700; /* matches the 20px phase titles */
}
.cost-section > p { color: var(--cwc-text); }
.cost-section .cost-note { margin: 12px 0 0; font-size: 17px; color: var(--cwc-text-soft); line-height: 1.5; } /* 15→17 to match the "Fees eat a little…" cost-intro above (Jen, 2026-06-13) */
/* Cost estimate now lives in a step-style accordion (Jen, 2026-06-11): inside .phase--cost
the .cost-section drops its own green box — the .phase frame is the container. */
.phase--cost .cost-section { background: none; padding: 0; margin: 0; border-radius: 0; font-size: 17px; }
/* "If you hit a PayPal issue" reuses the .repeat-note scenario dropdowns inside the green
accordion — strip its own box so it doesn't double-frame (Jen, 2026-06-11). */
.phase--cost .repeat-note { background: none; border: 0; padding: 0; margin: 0; font-size: 17px; } /* 14.5→17 so the scenario questions match the answers + other sections (Jen) */
/* Green "money" theme for the cost-estimate + "Buying a larger amount" accordions (Jen,
2026-06-11): same step shell, recolored green. Badge is a pill (min 26px → circle for
"$", widens for "$$$"). Open badge goes white via the base .phase[open] .phase-num. */
.phase--cost > summary { background: var(--cwc-green-bg); border-color: var(--cwc-green-bd); }
.phase--cost > summary:hover { border-color: #a9d6bd; color: var(--cwc-green-text); }
.phase--cost[open] > summary { background: var(--cwc-green-bg); border-color: var(--cwc-green-bd); }
.phase--cost .phase-num {
width: auto; min-width: 26px; padding: 0 6px; border-radius: 13px;
background: var(--cwc-green-bd); color: var(--cwc-green-text); letter-spacing: -.5px;
}
/* ===== Cost estimate accordion — distinct "calculator card" header (Jen, 2026-06-12 spec).
Scoped :not(.phase--amber) so the amber "If you hit a PayPal issue" box keeps its own look.
NOTE: this intentionally diverges from the blue Buy/Swap/Send step headers (18/700 vs 20/600). ===== */
.phase--cost:not(.phase--amber) > summary {
height: 52px; padding: 0 28px 0 22px; /* L/R matched to the blue/amber step headers (22 left / 28 right) (Jen, 2026-06-13) */
background: #f1fbf5; border: 1px solid #bfe5cf; border-radius: 8px;
}
.phase--cost:not(.phase--amber) > summary:hover { border-color: #a9d6bd; }
.phase--cost:not(.phase--amber)[open] > summary { background: #f1fbf5; border-color: #bfe5cf; border-radius: 8px 8px 0 0; }
.phase--cost:not(.phase--amber) .phase-title { font-size: 20px; font-weight: 600; color: #17613e; } /* 18/700 → 20/600 to match the blue step titles; green color kept (Jen, 2026-06-13) */
.phase--cost:not(.phase--amber) .phase-num {
/* Good-to-know badges are bare glyphs (no circle): green $ / $$$, sized up + bold (Jen, 2026-06-13). */
width: auto; min-width: 0; height: auto; padding: 0;
border-radius: 0; background: none; color: #17613e; letter-spacing: 0;
font-size: 16px; font-weight: 700;
}
.phase--cost:not(.phase--amber)[open] .phase-body {
border-color: #bfe5cf; border-radius: 0 0 8px 8px;
padding: 22px 28px 18px; /* sides 18→28 to match the blue/amber bodies; vertical left as-is (Jen, 2026-06-13) */
}
/* "Bitcoin's price swings" drift box: full-bleed body so the wide 5-column drift table uses the
plan's full width — no side padding/borders squeezing it (esp. on mobile). Keeps the collapsible
green header; just the sides go edge-to-edge (Jen, 2026-06-14). */
.phase--cost.phase--drift:not(.phase--amber)[open] .phase-body {
padding-left: 0; padding-right: 0;
border-left: 0; border-right: 0; border-radius: 0;
}
/* Intro/explainer — secondary to the result; narrow column on desktop. */
/* Full-width intro (cap lifted, Jen 2026-06-13). No side inset — text starts flush with the
calculator card's left border below, so the paragraph and the box share one left margin
(the $ inside the card sits 17px in, so aligning to it read as "indented" — Jen 2026-06-13). */
.cost-intro p { font-size: 17px; line-height: 1.5; color: #1f2937; margin: 0 0 18px; } /* 15→17 to match the "From the coin's main screen" body text above (Jen, 2026-06-13) */
/* Amber variant — "If you hit a PayPal issue". Green = success, so the problem/help section
gets a soft caution amber instead (Jen, 2026-06-11). Layered over .phase--cost, so it only
recolors — the pill badge ("!") + inner box-strip still apply. */
.phase--amber > summary { background: #fff4e5; border-color: #f0d9b5; height: 52px; } /* match the green good-to-know bars' 52px (was ~54 from base padding) (Jen, 2026-06-13) */
.phase--amber > summary:hover { border-color: #e6c187; color: #8f520c; }
.phase--amber[open] > summary { background: #fff4e5; border-color: #f0d9b5; }
.phase--amber .phase-num { background: none; width: auto; min-width: 0; height: auto; padding: 0; border-radius: 0; color: #1a1a1a; font-size: 16px; font-weight: 700; } /* bare "?" — 16/700 to match the green $ / $$$ badges; black (not PayPal blue — the box isn't PayPal-only) (Jen, 2026-06-13) */
.phase--amber[open] .phase-num { background: none; } /* stay transparent when open — beats .phase[open] .phase-num's white fill (Jen, 2026-06-13) */
/* "What you end up with" — plain grouped notes inside the green cost section. */
.cost-outcome { margin-top: 12px; }
.cost-outcome .cost-note { margin-top: 0; }
/* The calculator is a white card inside the green section so amounts pop. */
/* Inner calculator card — soft, self-contained; the input + result live inside it
(Jen, 2026-06-12 spec). Capped width on desktop so it reads as a calculator, not a band. */
.calc {
/* outer card removed (Jen, 2026-06-13) — the bordered $ fields alone signal "input" */
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
max-width: 280px;
}
/* Parallel "label above, amount below" fields. */
.calc-field { margin-bottom: 0; }
.calc-field:last-child { margin-bottom: 0; }
/* Result: label then the strong "About $412" value — the main result inside the card. */
.calc-label { display: block; font-weight: 700; font-size: 18px; line-height: 1.35; color: #334155; margin-top: 4px; margin-bottom: 5px; } /* 15→18 + 4px above; gap 6→5 (Jen, 2026-06-13) */
.calc-out.calc-result { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 800; } /* fonts cap at 700 weight (Cabin/Lato) — renders ~700 */
.calc-out.calc-result, .calc-out.calc-result strong { color: #0f6b3f; }
/* Field label ("Vendor payment amount"). */
.calc label { display: block; font-weight: 700; font-size: 18px; line-height: 1.35; color: #334155; margin-bottom: 9px; } /* 16→18; gap 10→9 (Jen, 2026-06-13) */
.calc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.calc-row span { font-size: 20px; line-height: 1; color: #334155; }
.calc-row input[type=number] {
flex: none; width: 116px; height: 40px;
padding: 0 12px; font-size: 20px; font-weight: 500; font-family: inherit; /* entry field 18→20 (Jen, 2026-06-13) */
border: 1px solid #d9e3ef; border-radius: 6px; background: #fff;
color: #111827;
}
.calc-row input[type=number]:focus {
outline: 0; border-color: #7bbfa0;
box-shadow: 0 0 0 3px rgba(123, 191, 160, .18);
}
.calc-out { margin: 12px 0 0; font-size: 16px; color: var(--cwc-text); }
.calc-out strong { color: var(--cwc-blue); }
/* Output field — mirrors the input box format (Jen, 2026-06-13): same bordered field, the "$"
sits outside in the .calc-row. Number is green (the computed answer), 20px to match the input. */
.calc-output {
flex: none; width: 116px; height: 40px;
display: flex; align-items: center;
padding: 0 12px; font-size: 20px; font-weight: 700; font-family: inherit;
border: 1px solid #d9e3ef; border-radius: 6px; background: #fff;
color: #0f6b3f;
}
.calc-row--out { margin-bottom: 0; } /* it's the last thing in the card — no trailing gap */
/* ---------- Alternative section (Solana fallback only) ---------- */
.alt-section {
margin-top: 32px;
padding: 20px 22px;
background: #f6f8fa;
border: 1px dashed #cbd5e1;
border-radius: var(--radius-md);
}
.alt-section > h3 {
margin-top: 0; margin-bottom: 10px;
padding: 0; background: none; border-left: 0;
color: #475569;
font-size: 16.5px;
}
.alt-section .alt-priority {
font-size: 13.5px; font-weight: 500; color: #64748b;
text-transform: none; letter-spacing: 0;
}
.alt-section > ol > li { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; line-height: 1.5; }
.alt-section > ol > li:last-child { margin-bottom: 0; }
.alt-section .alt-subtitle { margin: -2px 0 12px; font-style: italic; font-size: 13.5px; color: #64748b; }
/* "Why you start with SOL" — quiet context note that sits BELOW the recommendation, not a hero.
Neutral box, NO blue accent (only the recommendation carries the blue left rule), smaller type so
it reads as secondary to the answer above it. */
.starting-point {
margin: 0 0 22px;
padding: 14px 18px;
background: #f6f8fa;
border: 1px solid var(--cwc-border);
border-radius: var(--radius-md);
}
.starting-point > h3 {
margin: 0 0 6px; padding: 0;
background: none; border-left: 0;
color: var(--cwc-text-soft);
font-size: 17px; font-weight: 600; /* heads its box at body size, still well under the 20px phase titles */
}
.starting-point > p { margin: 0; line-height: 1.5; font-size: 17px; } /* matches the 17 page body */
/* "You've unlocked better options" payoff — positive, prominent, sits above the promo. */
.unlock {
margin-top: 18px;
padding: 14px 18px;
background: var(--cwc-green-bg);
border: 1px solid var(--cwc-green-bd);
border-left: 5px solid var(--cwc-green);
border-radius: var(--radius-md);
}
.unlock > h3 {
margin: 0 0 8px; padding: 0;
background: none; border-left: 0;
color: var(--cwc-green-text);
font-size: 17.5px; font-weight: 700;
}
.unlock > p { margin: 0; line-height: 1.55; }
.unlock + .promo { margin-top: 12px; }
/* "Sent" success line in the After-you-send status list — the win, in green.
This is the finale of the whole flow; the brighter, more saturated green carries
it on its own (same size as the other statuses — the color does enough). */
.status-sent, .status-sent strong { color: #16a34a; font-weight: 700; }
/* Supporting detail under a status (the Dropped reassurance) — SAME size as the
status label, just a slightly softer color so the list reads with light hierarchy. */
.status-detail { color: var(--cwc-text-soft); }
/* Top teaser line that scrolls down to the bottom "Advanced move" section. */
.advanced-teaser {
margin: 14px 0 22px;
font-size: 14px;
color: var(--cwc-text-mute);
}
.advanced-teaser a {
color: var(--cwc-blue);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
/* Bottom "Advanced move" — optional cost-saver, deliberately secondary (neutral, not green). */
.advanced-option {
margin-top: 18px;
padding: 14px 18px;
background: #f6f8fa;
border: 1px solid #e2e8f0;
border-left: 4px solid #cbd5e1;
border-radius: var(--radius-md);
}
.advanced-option > h3 {
margin: 0 0 6px; padding: 0;
background: none; border-left: 0;
color: var(--cwc-text-mute);
font-size: 15px; font-weight: 700;
text-transform: uppercase; letter-spacing: .03em;
}
.advanced-option > p { margin: 0 0 10px; line-height: 1.55; font-size: 14.5px; }
.advanced-option > ol { margin: 0; padding-left: 22px; }
.advanced-option > ol > li { margin-bottom: 8px; line-height: 1.5; font-size: 14.5px; border-bottom: 0; padding-bottom: 0; }
.advanced-option > ol > li:last-child { margin-bottom: 0; }
.advanced-option + .promo { margin-top: 18px; }
/* ---------- Actions row ---------- */
.actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.actions button:not(.ghost) { font-size: 18px; } /* Print / Save as PDF — primary CTA, 18 (Jen); Start over (ghost) keeps its size */
.stacking-tip { margin-top: 20px; }
/* Bottom-of-plan links: review ask + bug-report on one line, divided by a pipe,
EQUAL weight — we genuinely want both, so neither is visually demoted. */
.plan-links { margin-top: 18px; display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; } /* gap 8→13: more space around the "|" between the two links (Jen) */
.review-link, .feedback-link { font-size: 15px; color: var(--cwc-blue); font-weight: 500; }
.review-link:hover, .feedback-link:hover { text-decoration: underline; }
.plan-links-sep { color: #cbd5e1; font-size: 13px; }
/* Liability fine print — last block on every plan / printed PDF.
Extra top margin so the feedback links above don't read as legal footer. */
.disclaimer {
margin-top: 34px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
font-size: 14px; /* disclaimer — 11→14 (Jen); was below the readable floor */
line-height: 1.5;
color: #64748b;
}
.disclaimer strong { color: #475569; font-weight: 700; }
/* Persistent copyright footer — shows on every screen (gate + all wizard steps). */
/* ---------- Utilities ---------- */
.hidden { display: none !important; }
/* ---------- Print: clean, plan only ---------- */
@page { margin: 0.75in; }
@media print {
body { background: #fff; }
#gate, .topbar, .actions, .transition, .feedback-link, .plan-links, .phase-close, .repeat-close { display: none !important; } /* in-section "Close"/"Close all" buttons are useless on paper */
.plan { box-shadow: none; padding: 0; border-radius: 0; }
.plan h2 { border-bottom-color: #999; color: #000; }
.screen { padding: 0; max-width: none; }
.note, .promo, .rec, .calc, .cost-section, .unlock, .starting-point, .advanced-option, .cost-outcome, .exchange-callout { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* The "Show me ↓" teaser is a scroll link — useless on paper, and the section it points to prints below anyway. */
.advanced-teaser { display: none !important; }
/* De-button the CTA and reveal its URL so the printed plan is actionable. */
.plan .promo a.promo-cta { border: 0; padding: 0; background: none; color: var(--cwc-blue); font-weight: 700; }
.plan .promo a.promo-cta::after { content: " — cryptowithconfidenceclass.com"; font-weight: 400; }
/* Grad-promo share buttons are useless on paper — hide. The text + code still print. */
.grad-promo .share-row { display: none !important; }
/* Reveal the share URL in print after the discount-line paragraph (not the subline rules note) so paper copies stay actionable. */
.grad-promo p:first-of-type::after { content: " — cryptowithconfidenceclass.com"; font-weight: 400; }
/* Keep cards and table rows from being sliced across a page break. */
.rec, .note, .cost-section, .calc, .cost-outcome, .unlock, .advanced-option, .promo, .exchange-callout, .starting-point, .disclaimer { break-inside: avoid; page-break-inside: avoid; }
/* Keep each accordion section (Buy/Send/Confirm + the green Good-to-know sections) whole —
no page break slicing through the middle of one. (A section longer than a page will
still have to break — unavoidable.) */
.phase { break-inside: avoid; page-break-inside: avoid; }
/* Keep the recommendation block + "Here's what to do:" attached to Step 1, so the rec
never strands alone at a page bottom / on its own page (Jen, 2026-06-11). */
.rec, .steps-leadin { break-after: avoid; page-break-after: avoid; }
.plan table tr { break-inside: avoid; page-break-inside: avoid; }
}
/* ---------- Desktop-only: top recommendation block +1px (Jen, 2026-06-11) ---------- */
/* Adds one point of weight to the top section so the page reads less bottom-heavy.
Scoped to >600px → the phone view (≤600px) is untouched. Undo = delete this block. */
@media (min-width: 601px) {
/* Send title (option C: "Send USDT [logo] to your vendor ↗") fine-tuning, desktop (Jen). */
.phase-coin:has(+ .phase-title-suffix) { margin-left: 7px; margin-right: 3px; } /* +1px each side of the tether mark (left 6→7, right 2→3) — Jen */
.send-arrow { margin-left: 2px; } /* move the ↗ 4px left (6→2), closer to "to your vendor" */
.status-detail { display: block; } /* Dropped status: detail on its own line on desktop; mobile keeps it inline (no break) — Jen */
/* Promo box: kill the subline's stray 12px bottom margin (from .plan .grad-promo p) so the last
element sits at the padding edge → box bottom gap = top gap. Desktop only. (Jen, 2026-06-13) */
.plan .grad-promo .share-subline { margin-bottom: 0; }
/* "Here's what to do" step bars (blue, not the green/amber good-to-know): pin to 56px on desktop
so the 36px chevron stops stretching them to ~62 (good-to-know bars are pinned at 52) — Jen, 2026-06-13. */
.phase:not(.phase--cost) > summary { height: 56px; }
/* Step bars get a touch of blue on hover (desktop) — a gentle preview of opening (Jen, 2026-06-13). */
.phase:not(.phase--cost) > summary:hover { background: #e9f2fc; border-color: #aacbe9; }
/* …chevron lift -3 (lowered 1px from -4 per Jen, 2026-06-13 — now matches the good-to-know chevrons on desktop). */
.phase:not(.phase--cost) > summary::after { transform: translateY(-3px) rotate(90deg); }
.phase:not(.phase--cost)[open] > summary::after { transform: translateY(-3px) rotate(-90deg); }
.know.nerd-out { font-size: 16px; } /* desktop: 15→16 — easier to read on the lower-density monitor; mobile stays 15 (Jen) */
.rec-eyebrow { font-size: 13.5px; margin-bottom: 5px; } /* +2px total; -1px gap → headline sits closer */
.rec-headline { font-size: 24px; }
.rec-route { font-size: 19px; }
.rec-why { font-size: 18px; }
.rec-fee { font-size: 16.5px; margin-top: 2px; } /* fee moved directly under the headline — tight 2px gap */
.share-subline { font-size: 15px; } /* "Sharing in a group?" guidance — 15 on desktop (Jen); mobile stays 13 */
.steps-leadin:not(.know-leadin) { margin-top: 32px; } /* "Here's what to do" gap-above matches "Good to know" (32) so both headers sit equally below their section (Jen) */
/* Q2 decision-question spacing (desktop only; mobile keeps the base values) — Jen, 2026-06-12. */
.wrap h3.q2-ask { padding-top: 23px; } /* question lower below the divider (16 base → 19 → 21 → 23: +2 this round) */
details.why.why-under-q { margin-bottom: 17px; } /* +3px below the toggle → more space between it and the two answer options */
details.why.why-under-q > summary { font-size: 16px; } /* "What we like about using PayPal" 14.5→16 on desktop */
}
/* ---------- Small screens ---------- */
@media (max-width: 600px) {
/* Full-bleed white on phones (Jen, 2026-06-05): no grey gutter, no floating card.
The card spans edge to edge, so the side margin is now a SINGLE number — the 18px below. */
body { background: var(--cwc-card-bg); } /* white everywhere — no grey peeking below short cards */
.screen { padding: 0; } /* drop the 20px side gutter → card goes edge-to-edge */
.wrap, .plan { padding: 24px 32px 24px; border-radius: 0; box-shadow: none; } /* 24px top · 32px sides · 24px bottom · no corners/shadow at phone width */
.wrap.has-topnext { padding-top: 24px; } /* desktop top-Next compensation doesn't apply on mobile (Next sits elsewhere there) */
/* Mobile referral box (Jen, 2026-06-11): compact + 2-column button grid — a sharing tool, not an ad block. */
.grad-promo { padding: 18px; }
.plan .grad-promo p { margin: 0 0 12px; } /* description→description 10→12 (matches desktop box rhythm) — Jen, 2026-06-13 */
.grad-promo .share-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 18px 0 0; /* description→buttons 12→18 (matches desktop box rhythm) — Jen, 2026-06-13 */
}
.grad-promo .share-btn { width: 100%; padding: 11px 10px; } /* each fills its column → equal width, ~42px tall */
/* Mobile share set = Share (native sheet) + Copy message + Copy promo code. Share leads full-width;
Email + Copy link are hidden here (the sheet covers email; the code/link are in the message) — Jen, 2026-06-13 */
.grad-promo .share-btn--native { display: block; grid-column: 1 / -1; }
.grad-promo .share-btn--email, .grad-promo .share-btn--link { display: none; }
.plan .grad-promo .share-subline { line-height: 1.4; margin: 18px 0 0; } /* buttons→subline 18 + bottom margin 0 so subline→box-bottom = padding 18 (symmetric box, matches desktop rhythm) — Jen, 2026-06-13 */
.topbar { width: 100%; max-width: none; margin: 0; padding: 8px 32px; gap: 12px; } /* bar spans full width; side padding matches the card (32px) */
h1 { font-size: 26px; }
h2 { font-size: 22px; } /* 20→22 to match the .q0-title question headings on mobile (Jen) */
/* ===== Mobile type scale — locked one decision at a time with Jen. See MOBILE_STANDARDS.md ===== */
.wrap .q0-title { font-size: 22px; margin-bottom: 12px; } /* mobile title — 22px (all screens); 12px gap to the body/helper below */
.wrap p.lead { font-size: 16.5px; margin-bottom: 12px; } /* Page 1 body — 16.5px; 12px between body lines (2026-06-05) */
button.ghost { font-size: 14px; } /* Back / Start over — locked 2026-06-05 */
.starting-point > p { font-size: 17px; line-height: 1.45; } /* "Why you start" body — matches 17 body; tighter line-height on mobile */
/* Step rows — more compact on mobile; drop the "to your vendor" suffix to keep titles single-line. */
.phase { margin: 10px 0; }
.phase > summary { padding: 10px 22px 10px 16px; } /* vertical 13→11→10 — rows 2px shorter on mobile (Jen, 2026-06-12); still ~53-63px, well above the 44/48px tap-target minimums */
.phase > summary::after { font-size: 32px; transform: translateY(-4px) rotate(90deg); } /* all chevrons (steps + good-to-know) lifted −3→−4 on mobile (Jen, 2026-06-13) */
.phase[open] > summary::after { transform: translateY(-4px) rotate(-90deg); }
.phase-title { font-size: 18px; line-height: 1.2; } /* mobile: 19→18 (Jen); line-height 1.2 so a one-line title doesn't inflate the header */
.phase--cost:not(.phase--amber) .phase-title { font-size: 18px; } /* green titles match blue/amber on mobile (the desktop 20px rule isn't media-scoped) — Jen, 2026-06-13 */
/* "?" badge now matches the 16px $ / $$$ badges (base rule) on mobile too — no override needed */
.actions { margin-top: 29px; } /* Print button down 1px on mobile (Jen, 2026-06-13) */
/* Feedback links stack cleanly on mobile (no orphaned "|") — Jen, 2026-06-13 */
.plan-links { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 19px; } /* block down 1px (18→19); two links closer (gap 6→4) — Jen */
.fee-br { display: none; } /* fee note: no forced line break on mobile — let it flow (Jen, 2026-06-13) */
/* BTC swap timing tip: desktop bolds the lead + breaks the line; on mobile, plain flowing text (Jen, 2026-06-14) */
.btc-swap-lead { font-weight: 400; }
.btc-swap-br { display: none; }
.addr-br { display: none; }
.plan-links-sep { display: none; }
.phase-num { width: 24px; height: 24px; font-size: 13px; margin-right: 12px; }
.phase-title-suffix { display: none; }
/* Mobile: phase-title coin marks sized DOWN to ~19px (≈ the 18px title text) so they don't
out-size the text — and so the two-logo Swap title ("Swap PYUSD → USDT") fits on one line
instead of wrapping the trailing logo (Jen, 2026-06-12). Was 24/25 to match the rec-header
action-list; that match yields to fitting + better logo-to-text proportion. */
.phase-coin { height: 19px; margin-left: 4px; }
.phase-coin[src*="solana"] { height: 19px; }
.phase-coin[src*="pyusd"] { height: 19px; left: -1px; } /* +1px-left nudge to hug "PYUSD" (Buy + Swap titles) */
.phase-coin[src*="bitcoin"] { height: 20px; } /* mobile: Bitcoin mark +1px (19→20) — Jen, 2026-06-14 */
/* mobile: when OPEN, keep "/" instead of the ⇄ (the ⇄ reads crowded once the logos show on a
phone). Collapsed shows the plain "to" via the base rule — no symbol either way. (Jen) */
.phase[open] .swap-arrow { display: none; }
.phase[open] .swap-word { display: inline; margin: 0 5px; font-weight: 400; color: var(--cwc-text-mute); }
.send-arrow svg { width: 25px; height: 25px; } /* mobile: ↗ 16→18→20→23→25 — Jen wanted it bigger */
.plan .sol-inline { margin-left: 1px; } /* mobile: pull the inline Solana mark 1px further left than desktop's 2px */
/* Rec lines on mobile — pin a step smaller than desktop (the +1pt desktop bump
shouldn't carry to the phone) + tighter gaps/line-height so they sit close. */
.rec-headline { font-size: 21px; line-height: 1.2; } /* +1px mobile bump (Jen) */
.rec-net { display: block; } /* clean 2-line headline on mobile — the "on the X network" qualifier drops to its own line (only renders when a suffix exists, so native-coin headlines are unaffected) */
.rec::before { display: none; } /* drop the blue accent rule on mobile — buys back width + de-clutters the narrow single column (desktop keeps it) */
.rec { padding-left: 0; } /* reclaim the bar's indent so the rec content aligns with the steps below */
/* ===== Flow chip on mobile — ACTION LIST (Jen, 2026-06-09; replaced the old vertical
timeline). Each row = one action with its own from→to icons: "Buy SOL $→◎",
"Swap SOL → USDT ◎→₮", "Send USDT ₮→✉", "Confirm ✉→✓". The desktop horizontal chip
(.rec-coins) is hidden here; .rec-flow-mobile shows. ===== */
.rec-coins { display: none; }
.rec-flow-mobile { display: block; margin-top: 14px; margin-bottom: 14px; } /* the 14px below the list owns the gap to whatever follows (why OR fee) so it's consistent across plans */
.rec-step { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; }
.rec-step + .rec-step { border-top: 1px solid var(--cwc-border); } /* hairline divider between actions */
.rec-step-label { font-size: 18px; font-weight: 500; color: var(--cwc-text); } /* flow row labels 17→18 (Jen) */
.rec-step-icons { display: flex; align-items: center; gap: 9px; flex: none; } /* +1px between logos and arrows (Jen) */
.rec-step-arrow { color: var(--cwc-text-mute); font-size: 15px; line-height: 1; }
.rec-step-arrow svg { width: 17px; height: 17px; vertical-align: middle; display: inline-block; } /* Exodus-style Swap/Send glyphs in the mobile action list (Jen) */
/* Uniform, smaller icons in the rows — override the desktop per-glyph sizes. */
.rec-flow-mobile .rec-coin-mark { height: 23px; width: auto; } /* +1px mobile bump (Jen, 2026-06-11) */
.rec-flow-mobile .rec-coin-mark--sol { height: 18px; } /* sol bars read wide → trim more (+1) */
.rec-flow-mobile .rec-coin-mark--pyusd { height: 25px; } /* PayPal USD mark reads small → +2 vs the others (+1) */
.rec-flow-mobile .rec-coin-mark--eth { height: 26px; margin: 0 2px; } /* ETH diamond reads narrow → bumped to +3px taller + 2px buffer each side to line up with round coins (Jen, 2026-06-17) */
.rec-flow-mobile .rec-dollar { width: 25px; height: 25px; box-sizing: border-box; font-size: 16px; padding-top: 2px; } /* $ glyph +1pt + nudged ~1px down so it fills the circle like the coin logos (Jen, 2026-06-18) */
.rec-flow-mobile .rec-send .rec-flow-svg { width: 25px; height: 25px; } /* envelope (+1) */
.rec-flow-mobile .rec-verify .rec-flow-svg { width: 25px; height: 25px; } /* check (+1) */
/* mobile: drop the prose route sentence ONLY on chip screens (the plan pages) — there the
flow chip's action-list already spells out the route WITH coin names, so it's redundant.
The starting-recommendation screen (Q2, .rec--starting) has NO chip, so it KEEPS the sentence
on mobile — otherwise the "what you'll actually do" journey would vanish there. (Jen, 2026-06-12) */
.rec:not(.rec--starting) .rec-route { display: none; }
.rec-why { margin-top: 14px; } /* mobile: tighter than desktop's 19px; the action-list's 14px bottom margin sets the gap above it */
.rec-fee { margin-top: 7px; font-size: 15px; line-height: 1.3; } /* +1px mobile bump (Jen); sits snug under whatever precedes it (the "why" line, or — when there's no why — separated by the action-list's own 14px bottom margin) */
.steps-leadin { font-size: 18px; } /* mobile sub-head above 17 body */
/* Mobile "When you purchase your crypto" callout — move up more, and drop the left
rule (the orange lives in the text now), per Jen. */
.phase-body .callout-line { margin-top: 2px; font-size: 17px; }
.phase-body .callout-line strong { font-size: 17px; }
/* Trim the open-phase side padding 2px each on mobile. */
.phase[open] .phase-body { padding: 22px 22px 28px; } /* mobile: trimmed side padding 26→22 to buy back width for the steps */
/* Green money-boxes match the blue/amber mobile padding (Jen, 2026-06-13): header 16/22, body 22 sides
(the green body bottom stays 18 vs blue's 28 — L/R parity only, same as desktop). */
.phase--cost:not(.phase--amber) > summary { padding: 0 22px 0 16px; }
.phase--cost:not(.phase--amber)[open] .phase-body { padding: 22px 22px 18px; }
.phase-body .send-steps ul { padding-left: 10px; } /* mobile: shallower sub-bullet indent than desktop (18→10) to reclaim content width — but still RIGHT of the numbers, not past them (Jen, 2026-06-12) */
.exchange-callout { font-size: 14px; } /* mobile: bump the exchange note 13.5→14 for readability (desktop stays 13.5) */
.topbar-next { display: none; } /* mobile: hide the right (desktop) Next */
.topbar-next-left { display: block; margin-top: -6px; } /* mobile: Next sits under "Show my answers", tucked tight */
/* Payment screen only (the one with the checklist) — pull its title up 4px on mobile;
it sits lower than other screens because this screen's top bar carries the Next row. */
.wrap:has(.checklist) .q0-title { margin-top: -4px; }
.wrap h3.q2-ask { font-size: 22px; } /* mobile: matches the .q0-title mobile size (desktop is 24) */
/* Keep the main action buttons tap-friendly on phones (the ghost utility buttons keep their own smaller padding). */
button { padding: 13px 20px; font-size: 15.5px; }
/* Calm primary button (Jen + spec, 2026-06-05): centered, capped width, NOT full-bleed.
6px radius kept on purpose so it matches the answer rows + inputs (one corner radius).
Targets the solo forward buttons only (Let's Go / Next = direct children of the card);
leaves the side-by-side .actions rows and ghost/secondary buttons alone. */
/* Unified compact primary button (Jen, 2026-06-05) — Get started / Next all match.
Compact + centered + 10px radius so the title stays dominant; not full-bleed. */
.wrap > button:not(.ghost),
.card-content > button:not(.ghost) {
display: block; /* so margin auto can center it in any container */
align-self: center; /* center it when the card is a flex column */
margin: 24px auto 0; /* 24px standard gap above every primary button — matches the header→title gap; centered */
width: 200px; max-width: 100%;
height: 42px;
border-radius: 10px;
padding: 12px 18px;
font-size: 16px; font-weight: 600; line-height: 20px;
}
#introNext { margin-top: 24px; } /* match the 24px standard (id beats the desktop base margin) */
/* Tap-to-select answer rows — calm, tappable selection rows (Jen + GPT spec, 2026-06-05). Mobile only.
Applies to all three select screens (SOL, PayPal, Exodus); each keeps its own radio alignment.
Roomier padding, 10px corners (match the buttons), 12px between rows; selected = tinted + 1.5px blue
border (NOT a filled blue button). Desktop rows stay as Jen likes them. */
.wrap .choice-list label { padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; }
.wrap .choice-list label:has(input:checked) { border-width: 1.5px; }
/* Mobile: STACKED layout (Jen, 2026-07-10) — icon centered ABOVE the text, both lines
centered, full width, so the heading gets room to wrap cleanly instead of squeezing
beside the logo. Desktop keeps the side-by-side arrangement. */
.exodus-cta { flex-direction: column; align-items: center; gap: 10px; width: 100%; text-align: center; }
.exodus-cta::after { display: none; } /* no balancing spacer needed once it's stacked */
.exodus-cta-logo { width: 28px; height: 28px; }
.exodus-cta-text { max-width: 300px; }
.exodus-cta .exodus-cta-lead { font-size: 14px; letter-spacing: normal; } /* line 1: 14px/600/1.4 */
.exodus-cta .exodus-cta-note { font-size: 13px; margin-top: 4px; } /* line 2: 13px/400/1.45; 4px gap under line 1 */
.card-footer { font-size: 11px; } /* mobile copyright: 11px */
/* Payment screen Next: 2px narrower + shorter than the standard; 28px above to match the helper→list gap. */
#q1next { width: 198px; height: 40px; margin-top: 25px; }
/* Payment checklist (multi-select) — mobile: 16px text (the floor) + a bigger custom checkbox.
Rows stay compact (the bigger box fits inside the existing row height); list barely grows. */
.checklist label { font-size: 16px; padding: 10px 2px; } /* dense multi-select coin list — kept at 16 (Jen), not bumped with the 17 body */
.checklist input[type="checkbox"] { width: 14px; height: 14px; border-width: 1.5px; border-color: #64748b; top: 1px; } /* mobile: smaller (14px), darker thinner ring, nudged DOWN 1px to look centered on the text */
/* Payment screen (mobile): helper hugs the title (gap 12 → 0), bigger (18px), and sits 28px
above the list — matched by 28px above the Next button (uniform section spacing). */
/* Mobile: 19px soft slate (the dark instruction treatment is desktop-only). ~6px below the title; tighter to the list. */
.wrap p.q1-helper { margin-top: -11px; margin-bottom: 11px; font-size: 16px; color: #475569; font-weight: 400; } /* 16px to match .q0-helper (mobile). `p.` matches the desktop rule's specificity so this mobile override still wins by source order */
/* Copyright pinned to the bottom of the phone screen (above the bottom margin).
The card fills the viewport below the topbar; .card-footer's margin-top:auto drops it down. */
.wrap { min-height: calc(100dvh - 48px); }
}
/* ===== Cost estimate — phone layout (Jen, 2026-06-12 spec): card goes full-width,
intro un-capped; the input + result keep their sizes (better hierarchy, not a bigger box). ===== */
@media (max-width: 480px) {
/* green body padding now lives in the ≤600 block (matches blue) — removed the old 20/16/18 here */
.cost-intro p { max-width: none; }
.calc { max-width: none; width: 100%; padding: 0; } /* outer card removed — no padding needed (Jen, 2026-06-13) */
/* input stays 128×40, result stays 22px (inherited from base — no override needed) */
}