/* CardCue Pro for Educators: the educator layer (prototype, 2026-10-28).

   Loads AFTER /assets/page.css (tokens, type, cards, CTAs, footer) and
   /press-assets/site-chrome.css (the canonical nav), so it only ADDS. The
   classroom touches are deliberately few: ruled notebook paper on the notes
   and receipts, an amber highlighter under one phrase, a small apple mark.
   Everything else is the site's own blue, violet gradient, serif headings
   and white cards. Light only, like the other standalone pages. */

:root{
  --amber:#f59e0b; --amber-ink:#92400e; --amber-wash:#fef8e7; --amber-line:rgba(245,158,11,.28);
  --rule-blue:rgba(10,92,214,.13); --rule-red:rgba(211,47,47,.32); --paper:#fffdf8;
  --danger:#c62828; --danger-wash:#fdecec; --success-wash:#e9f6ee; --info-wash:#eaf1fc;
  --shadow-soft:0 14px 36px rgba(20,20,43,.08);
  /* The site's tertiary gray (#86868b) is 3.6:1 on white, under WCAG AA for
     the small hint and note text these pages lean on. 5.0:1 here. */
  --ink3:#6e6e73;
}

/* Author display rules (flex, grid) would otherwise beat the hidden attribute. */
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:400;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
*:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* Headings and the error box take focus from script so screen readers land on
   the change; they are not controls, so no ring. Real controls keep theirs. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,.error-summary:focus,[data-store-cancelled]:focus{outline:none}

h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}

/* The shared nav makes the menu button a flex row, which lays the three bars
   side by side on phones (true on / and /pricing as of 2026-10-28). Stack them
   here; the site-wide fix belongs in /press-assets/site-chrome.css. */
nav#nav .nav-toggle{flex-direction:column}
/* /assets/page.css hides every nav link but the CTA under 640px, which left the
   phone menu with one item. The canonical menu shows them all. */
@media(max-width:720px){ nav#nav .nav-links a:not(.nav-cta){display:block} }

/* ---------- preview ribbon ---------- */
.edu-ribbon{background:var(--amber-wash);border-bottom:1px solid var(--amber-line);color:#7c2d12;font-size:13px;line-height:1.5}
.edu-ribbon .w{display:flex;gap:10px;align-items:center;padding-top:9px;padding-bottom:9px}
.edu-ribbon .pill{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;background:#7c2d12;color:#fff;padding:3px 8px;border-radius:999px}

/* ---------- eyebrow with the apple mark ---------- */
.edu-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.edu-eyebrow svg{width:16px;height:16px;flex:none;color:#c2410c}
.partner-chip{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;font-size:13px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.partner-chip b{color:var(--ink)}

/* Amber highlighter: the one hand-marked word on the page. */
.hl{background:linear-gradient(180deg,transparent 60%,rgba(245,158,11,.34) 60%,rgba(245,158,11,.34) 92%,transparent 92%);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* ---------- notebook paper ---------- */
/* --rule-offset puts each rule under a 28px line of text: set it to the block's
   top padding (plus anything above the first line). */
.ruled{--rule-offset:14px;background-color:var(--paper);
  background-image:linear-gradient(90deg,transparent 34px,var(--rule-red) 34px,var(--rule-red) 35.5px,transparent 35.5px),
    repeating-linear-gradient(180deg,transparent 0,transparent 27px,var(--rule-blue) 27px,var(--rule-blue) 28px);
  background-position:0 0,0 var(--rule-offset)}

/* ---------- landing hero ---------- */
/* The glows sit in their own clipped layer that fades out before the
   section ends, so the hero has no hard bottom edge and the phone's shadow
   is not cut off (founder 2026-10-28). */
.edu-hero{position:relative;padding:48px 0 22px}
.edu-hero .glows{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.edu-hero .glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(42px)}
.edu-hero .glow.v{top:-160px;left:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(117,54,184,.15),transparent 65%)}
.edu-hero .glow.b{bottom:-220px;right:-160px;width:600px;height:600px;background:radial-gradient(circle,rgba(10,92,214,.16),transparent 65%)}
.edu-hero .glow.a{top:26%;right:22%;width:240px;height:240px;background:radial-gradient(circle,rgba(245,158,11,.12),transparent 70%)}
.edu-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,64px);align-items:center}
.edu-hero h1{font-size:clamp(36px,6vw,62px);line-height:1.05;letter-spacing:-1.6px;margin:0 0 18px}
.edu-hero .lede{font-size:clamp(17px,2.1vw,20px);color:var(--ink2);max-width:560px;margin:0 0 26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta.lg{font-size:16.5px;padding:15px 28px;min-height:52px}
.cta.ghost:hover{background:var(--bg-soft)}
.cta[aria-disabled="true"],.cta:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.fine{font-size:13.5px;color:var(--ink3);margin:14px 0 0}
.fine a{color:var(--ink2)}

.edu-visual{position:relative;max-width:330px;margin:0 auto;width:100%}
/* The note is anchored to the phone, not to the figure, so the caption
   below doesn't move it. */
.edu-visual .phone-wrap{position:relative}
.visual-note{font-size:12.5px;line-height:1.45;color:var(--ink3);text-align:center;margin:14px auto 0;max-width:300px;text-wrap:balance}
.edu-visual .phone{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 48px rgba(10,30,80,.22)) drop-shadow(0 6px 14px rgba(20,20,43,.12))}
.note-card{position:absolute;left:-58px;bottom:44px;width:230px;padding:14px 16px 14px 46px;border-radius:6px;transform:rotate(-4deg);
  box-shadow:0 14px 30px rgba(20,20,43,.18),0 1px 0 rgba(0,0,0,.04);font-family:var(--serif);font-style:italic;font-size:16px;line-height:28px;color:#3b3a4a}
.note-card .sig{display:block;font-style:normal;font-family:inherit;font-size:13px;color:var(--ink3)}
.note-card .apple{position:absolute;right:12px;top:-16px;width:34px;height:34px;transform:rotate(10deg);filter:drop-shadow(0 4px 6px rgba(0,0,0,.15))}
/* Signed like a note: a hand-drawn heart, a pen slash, then the name (founder 2026-10-28). */
.note-card .signoff{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;height:28px;vertical-align:top}
.note-card .heart{flex:none;width:34px;height:18px;color:#d6455b;transform:rotate(-4deg)}

/* ---------- section scaffolding ---------- */
/* Section rhythm tightened 2026-10-28 (founder: "too much space between each section"). */
.sec{padding:38px 0}
.sec.tint{background:linear-gradient(180deg,var(--bg),#f0f4fa)}
.sec.warm{background:linear-gradient(180deg,#fefaf4,#fef3e8)}
.sec.white{background:#fff}
.sec h2{margin-top:0}

/* ---------- why we're doing this ---------- */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:center}
.letter{--rule-offset:26px;border-radius:14px;padding:26px 28px 22px 58px;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,.05)}
.letter p{font-size:17px;line-height:28px;color:#353445;margin:0 0 28px}
.letter p:last-of-type{margin-bottom:14px}
.letter .pull{font-family:var(--serif);font-style:italic;font-size:19.5px;color:var(--ink)}
.letter .sig{font-size:14.5px;line-height:28px;color:var(--ink2);margin:0}
/* A stack of generic gift cards (assets/gift-card-stack.svg, drawn in the
   homepage hero's palette, no brand names). Replaced Cue here, 2026-10-28. */
.why-stack{margin:0}
.why-stack img{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}

/* ---------- how it works ---------- */
.steps{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.step{border-radius:14px;padding:22px 22px 18px 56px;position:relative;box-shadow:var(--shadow-soft);border:1px solid rgba(0,0,0,.05);min-height:170px}
/* Steps keep the ruled lines but not the margin rule, which the number badge would sit on. */
.step.ruled{--rule-offset:22px;background-image:repeating-linear-gradient(180deg,transparent 0,transparent 27px,var(--rule-blue) 27px,var(--rule-blue) 28px);background-position:0 var(--rule-offset)}
.step .n{position:absolute;left:12px;top:18px;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.step h3{margin:0 0 6px;font-size:17px;line-height:28px}
.step p{margin:0;font-size:15px;line-height:28px}
.step svg{width:22px;height:22px;color:var(--accent);margin-bottom:6px;display:block}
/* Step 1's "Start here" (founder 2026-10-28): a small pill in the card's
   bottom-right corner, with room left under the text for it. */
.steps .step:first-child{padding-bottom:58px}
.step-cta{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:3px;background:var(--accent);color:#fff;
  font-size:13.5px;font-weight:700;line-height:1;padding:9px 11px 9px 15px;border-radius:999px;text-decoration:none;box-shadow:0 4px 12px rgba(10,92,214,.25)}
.step-cta:hover{background:var(--accent-light);opacity:1}
.step .step-cta svg{width:15px;height:15px;margin:0;color:#fff;display:inline}

/* ---------- FAQ ---------- */
.faq{margin-top:26px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 20px}
.faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;font-weight:700;font-size:16px;position:relative;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary:after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 18px;color:var(--ink2);font-size:15.5px}
.faq .a p{margin:0 0 10px}
.faq .a ul{margin:0 0 10px;padding-left:20px}
.tagline-status{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:2px 8px;border-radius:999px;vertical-align:2px;margin-right:6px}
.st-planned{background:var(--amber-wash);color:#7c2d12;border:1px solid var(--amber-line)}

/* ---------- closing band ---------- */
.final{background:linear-gradient(135deg,#4c1d95,#7536b8 42%,#0a5cd6);color:#fff;padding:54px 0;position:relative;overflow:hidden}
.final h2{color:#fff;margin:0 0 12px}
.final p{color:rgba(255,255,255,.88);font-size:18px;max-width:560px}
.final .w{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:30px;align-items:center}
.final img{width:170px;height:auto}
.cta.white{background:#fff;color:#3b1a86}
.cta.white:hover{background:#f2ecff}

/* ---------- floating CTA (shared look from page.css) ---------- */
.floating{transition:opacity .2s ease,transform .2s ease;white-space:nowrap}
.floating[hidden]{display:none}

/* ---------- flow pages ---------- */
.flow{max-width:820px;margin:0 auto;padding:34px 22px 40px}
.flow h1{font-size:clamp(30px,4.6vw,44px);margin-bottom:10px}
.stepper{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 30px;counter-reset:s}
.stepper li{flex:1;font-size:12.5px;font-weight:700;color:var(--ink3);padding-top:10px;border-top:4px solid var(--line);counter-increment:s}
.stepper li:before{content:counter(s) ". "}
.stepper li.done{color:var(--ink2);border-top-color:rgba(10,92,214,.45)}
.stepper li[aria-current="step"]{color:var(--accent);border-top-color:var(--accent)}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-soft)}
.panel + .panel{margin-top:18px}
.panel h2{font-size:clamp(22px,3vw,28px);margin:0 0 8px}
.preview-note{display:flex;gap:10px;align-items:flex-start;background:var(--amber-wash);border:1px solid var(--amber-line);color:#7c2d12;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;margin:0 0 20px}
.preview-note b{color:#7c2d12}
.preview-note svg{flex:none;width:18px;height:18px;margin-top:2px}

/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:6px}

.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{width:100%;min-height:48px;font:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid #cfd2db;border-radius:12px;padding:11px 13px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:92px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(10,92,214,.16)}
.field [aria-invalid="true"]{border-color:var(--danger);background:#fffafa}
.hint{font-size:13.5px;color:var(--ink3);margin:6px 0 0;line-height:1.45}
.err{font-size:13.5px;color:var(--danger);font-weight:600;margin:6px 0 0;display:flex;gap:6px;align-items:flex-start}
.err:before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;margin-top:2px}
.err[hidden]{display:none}
.error-summary{border:2px solid var(--danger);background:var(--danger-wash);border-radius:12px;padding:14px 16px;margin:0 0 20px}
.error-summary h2{font-size:17px;margin:0 0 6px;font-family:inherit;color:#8e1b1b}
.error-summary ul{margin:0;padding-left:20px}
.error-summary a{color:#8e1b1b;font-weight:600}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0}

.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2);cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.btn-link{background:none;border:0;padding:8px 2px;font:inherit;font-size:15px;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.signin-line{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg-soft);font-size:14px;line-height:1.5;color:var(--ink2)}
.signin-line .btn-link,.hint .btn-link,.go-steps .btn-link{font-size:inherit;padding:0}
button.cta{cursor:pointer;font-family:inherit;min-height:48px}

/* status panels */
.state-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}
.state-icon{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.state-icon svg{width:22px;height:22px}
.state-icon.ok{background:var(--success-wash);color:var(--success)}
.state-icon.warn{background:var(--amber-wash);color:var(--amber-ink)}
.state-icon.bad{background:var(--danger-wash);color:var(--danger)}
.state-icon.info{background:var(--info-wash);color:var(--accent)}
.state-head h2{margin:2px 0 4px}
.state-head p{margin:0}
.loading{display:flex;gap:14px;align-items:center;padding:8px 0}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(10,92,214,.18);border-top-color:var(--accent);animation:spin .9s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

.tips{margin:6px 0 0;padding-left:20px;color:var(--ink2);font-size:15px}
.tips li{margin-bottom:4px}
.recover{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.recover li{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--bg)}
.recover b{display:block;color:var(--ink);font-size:15px}
.recover span{font-size:14px;color:var(--ink2)}

.badge-demo{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:var(--amber-wash);color:#7c2d12;border:1px solid var(--amber-line);border-radius:999px;padding:1px 8px;vertical-align:1px}

/* The verify form's phone choice: two tiles side by side, each with its
   store's icon (founder 2026-10-28). A radio in a label, check on the right. */
.legend{display:block;font-weight:700;font-size:14.5px;color:var(--ink);margin-bottom:6px}
.platform-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.field .platform-pick label.opt{display:flex;align-items:center;gap:12px;margin:0;font-weight:400;font-size:inherit;color:inherit;
  position:relative;padding:14px;min-height:68px;border:1.5px solid #cfd2db;border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.opt:hover{border-color:#aeb6c9}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt .store{flex:none;width:38px;height:38px}
.opt .txt{flex:1;min-width:0;line-height:1.3}
.opt .txt b{display:block;font-size:15.5px;color:var(--ink)}
.opt .txt small{display:block;font-size:13px;color:var(--ink3);margin-top:2px}
.pick-dot{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #b9c0d0;display:flex;align-items:center;justify-content:center;color:#fff;background:#fff}
.pick-dot svg{width:14px;height:14px;opacity:0}
.field .platform-pick label.opt:has(input:checked){border-color:var(--accent);background:var(--info-wash);box-shadow:0 0 0 3px rgba(10,92,214,.12)}
.opt:has(input:checked) .pick-dot{background:var(--accent);border-color:var(--accent)}
.opt:has(input:checked) .pick-dot svg{opacity:1}
.opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
@media(max-width:480px){
  /* Two tiles still sit side by side; inside each, the icon and check share
     the top row and the words go underneath. */
  .field .platform-pick label.opt{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .opt .pick-dot{position:absolute;top:12px;right:12px}
}

/* ---------- gift page, laid out like /go/year ---------- */
.go{max-width:540px;margin:0 auto;padding:30px 22px 48px;text-align:center}
.go-card{container-type:inline-size;position:relative;aspect-ratio:1200/630;border-radius:16px;overflow:hidden;text-align:left;
  background:radial-gradient(70% 90% at 0% 0%,#3a1f6e 0%,transparent 60%),radial-gradient(70% 90% at 100% 100%,#0f2a6e 0%,transparent 65%),#141233;
  box-shadow:0 12px 40px rgba(0,0,0,.18);display:grid;grid-template-columns:1.2fr 1fr}
.go-card-copy{padding:7cqw 0 6cqw 7cqw;display:flex;flex-direction:column;justify-content:center}
.go-lockup{width:30cqw;height:auto;margin:0 0 4.5cqw -.6cqw}
.go-eyebrow{font-size:2.6cqw;font-weight:800;letter-spacing:.25cqw;text-transform:uppercase;color:#f0b13e}
.go-title{font-size:7.6cqw;line-height:1.05;font-weight:800;letter-spacing:-.25cqw;color:#fff;margin:.8cqw 0 2.2cqw}
.go-title span{color:#f0b13e}
.go-sub{font-size:2.9cqw;line-height:1.35;color:rgba(255,255,255,.82)}
.go-card-art{position:relative}
/* On a phone the card is small, so its small print grows a little. */
@container (max-width:420px){ .go-eyebrow{font-size:3.3cqw} .go-sub{font-size:3.7cqw} }
.go-phone{position:absolute;right:6cqw;top:5cqw;width:27cqw;height:auto;transform:rotate(6deg);filter:drop-shadow(0 2cqw 4cqw rgba(0,0,0,.45))}
.go-droid{position:absolute;right:7cqw;top:6.5cqw;width:24cqw;height:47cqw;transform:rotate(6deg);border-radius:3.6cqw;border:1.1cqw solid #2b2a40;
  background:linear-gradient(160deg,#3a7bd5,#5b3fb8);box-shadow:0 2cqw 4cqw rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;color:#fff}
.go-droid .cam{position:absolute;top:2.2cqw;left:50%;width:2cqw;height:2cqw;margin-left:-1cqw;border-radius:50%;background:#14131c}
.go-droid b{font-size:3.4cqw;font-weight:800}
.go-droid span:not(.cam){white-space:nowrap;font-size:1.9cqw;font-weight:800;letter-spacing:.12cqw;text-transform:uppercase;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.5cqw 1.6cqw}
.spark{position:absolute;width:3cqw;height:3cqw;fill:#f0b13e}
.spark.s1{right:38cqw;top:9cqw}.spark.s2{right:3.5cqw;top:44cqw;width:2.2cqw;height:2.2cqw}.spark.s3{right:30cqw;top:43cqw;width:2cqw;height:2cqw}
.go h1{font-size:clamp(24px,4vw,30px);line-height:1.2;margin:26px 0 10px}
.go-lede{font-size:16px;line-height:1.55;margin:0 auto 22px;max-width:460px}
/* Steps carry their own buttons, joined by a line so they read as a sequence. */
.go-steps{list-style:none;text-align:left;margin:0 auto;max-width:420px;padding:0}
.go-steps li{position:relative;display:flex;gap:14px;padding-bottom:22px}
.go-steps li:last-child{padding-bottom:0}
.go-steps li:not(:last-child)::before{content:"";position:absolute;left:13px;top:34px;bottom:6px;width:2px;border-radius:1px;background:var(--line)}
.go-steps li>div{flex:1;min-width:0}
.go-steps .n{flex:none;width:28px;height:28px;border-radius:50%;background:#f0b13e;color:#14131c;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.go-steps .t{display:block;font-size:16.5px;line-height:1.3;color:var(--ink);margin:3px 0 3px}
.go-steps .d{display:block;font-size:15px;line-height:1.5;color:var(--ink2)}
.go-steps .cta{margin-top:12px}
.go-note{font-size:12.5px;line-height:1.45;color:var(--ink3);margin:8px 0 0}
.go-email{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-size:16px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;outline-offset:3px}
.go-steps .go-after{margin-top:10px}
.go-change{margin:8px 0 0;font-size:14px}
.go-edit{margin:12px 0 0;font-size:14px}
.go-edit label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px}
.go-edit .row{display:flex;gap:8px}
.go-edit input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.go-edit input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(10,92,214,.16)}
.go-edit .cta{padding:11px 20px}
.go-edit .err{margin:6px 0 0}
.go-edit .btn-link{font-size:14px;padding:6px 0 0}
.go-switch{margin:24px 0 0}
.go-fine{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:18px auto 0;max-width:440px}
.go-handoff{display:flex;gap:16px;align-items:center;text-align:left;margin:26px auto 0;max-width:440px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.go-handoff img{width:96px;height:96px;flex:none;border-radius:8px}
.go-handoff p{margin:0;font-size:14px;line-height:1.5}
.go-handoff .url{font-family:'SF Mono','JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--ink)}

/* ---------- demo controls (mock mode only) ---------- */
.dev-fab{position:fixed;left:16px;bottom:16px;z-index:300;display:inline-flex;align-items:center;gap:8px;background:#1f1d2b;color:#fff;border:0;border-radius:999px;padding:10px 16px;font:700 13px/1 -apple-system,system-ui,sans-serif;box-shadow:0 10px 26px rgba(0,0,0,.28);cursor:pointer;min-height:44px}
.dev-fab .dot{width:8px;height:8px;border-radius:50%;background:#fbbf24}
.dev-panel{position:fixed;left:16px;bottom:72px;z-index:300;width:min(380px,calc(100vw - 32px));max-height:min(72vh,640px);overflow:auto;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.30);border:1px solid #e3e3ea;font:14px/1.45 -apple-system,system-ui,sans-serif;color:#1a1a1a}
.dev-panel[hidden]{display:none}
.dev-panel header{position:sticky;top:0;background:repeating-linear-gradient(135deg,#1f1d2b,#1f1d2b 12px,#2a2740 12px,#2a2740 24px);color:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.dev-panel header b{font-size:13px;letter-spacing:.6px;text-transform:uppercase}
.dev-panel header button{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:8px;padding:6px 10px;font:inherit;font-weight:700;cursor:pointer}
.dev-panel section{padding:12px 14px;border-bottom:1px solid #eee}
.dev-panel h3{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#6b6b78;margin:0 0 8px}
.dev-panel .opts{display:flex;flex-wrap:wrap;gap:6px}
.dev-panel button.o{border:1px solid #d6d6e0;background:#f6f6fa;border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;color:#1a1a1a;min-height:34px}
.dev-panel button.o[aria-pressed="true"]{background:#0a5cd6;border-color:#0a5cd6;color:#fff}
.dev-panel button.o.danger{color:#b42318;border-color:#f3c3be;background:#fff5f4}

.dev-panel .tip{font-size:12.5px;color:#6b6b78;margin:8px 0 0}
.dev-panel code{font-size:12px;background:#f1f1f6;padding:1px 5px;border-radius:5px}
.dev-panel .log{font-family:'SF Mono',ui-monospace,monospace;font-size:11.5px;max-height:150px;overflow:auto;background:#f8f8fb;border-radius:8px;padding:8px;margin:0;list-style:none}
.dev-panel .log li{padding:2px 0;border-bottom:1px solid #eee;word-break:break-word}
.dev-panel .state{font-family:'SF Mono',ui-monospace,monospace;font-size:11.5px;background:#f8f8fb;border-radius:8px;padding:8px;white-space:pre-wrap;max-height:160px;overflow:auto;margin:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  
  .note-card{left:-24px}
}
@media (max-width:820px){
  .edu-hero-grid,.why-grid,.final .w{grid-template-columns:1fr}
  .edu-visual{max-width:270px;margin-top:8px}
  .note-card{left:-44px;bottom:30px;width:200px;font-size:15px}
  .why-stack img{max-width:200px}
  .steps{grid-template-columns:1fr}
  .step{min-height:0}
  .final img{width:120px}
  .final .w{text-align:left}
}
@media (max-width:640px){
  .sec{padding:30px 0}
  .final{padding:44px 0}
  
  
  .form-grid{grid-template-columns:1fr}
  
  
  .panel{padding:22px 18px}
  .flow{padding:26px 16px 36px}
  .letter{padding:22px 18px 18px 50px;--rule-offset:22px}
  
  
  
  
  
  
  .cta-row .cta{width:100%}
  .edu-visual{max-width:240px}
  .note-card{left:-30px;width:204px;padding-left:42px}
}
@media (max-width:420px){
  /* Too narrow to overlap the phone: the note sits under it instead. */
  .note-card{position:relative;left:auto;bottom:auto;margin:-64px auto 0;width:226px;transform:rotate(-2.5deg)}
  /* Demo controls step above the floating claim button. */
  .dev-fab{left:12px;padding:9px 13px}
  .dev-panel{left:12px}
  body[data-edu-page="landing"] .dev-fab{bottom:82px}
  body[data-edu-page="landing"] .dev-panel{bottom:136px}
}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .spinner{border-top-color:rgba(10,92,214,.18);border-right-color:var(--accent)}
}