/* ============ FRIENDS FOR LIFE glossy teen-zine ============ */
:root{
  --pink:#ff2e88; --cherry:#e8083e; --cream:#fff4ec; --ink:#1a0a12;
  --lemon:#ffd84d; --mint:#7df0c4; --lav:#c9b8ff;
  --display:'Shrikhand',cursive; --body:'Bricolage Grotesque',sans-serif; --hand:'Caveat',cursive;
  /* the quiet set used by the sealed-pair home */
  --card:#fffaf6; --muted:#5c2740; --soft:#8a6478; --hand-ink:#7a3a56; --hair:rgba(26,10,18,.14); --seal-ink:#fff4ec;

  /* the paired app skin (board K); tabs.css scopes it under body.has-tabs */
  --plum:#1f0b16; --plum2:#2a1020; --blush:#ffb8d4;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);overflow-x:hidden}
.noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hl{background:linear-gradient(transparent 55%,var(--lemon) 55%);padding:0 .1em}

/* ---------- HERO (the dare) ---------- */
.hero{position:relative;text-align:center;padding:1.2rem 0 1.6rem}
.hero-stickers .stk{position:absolute;font-size:2rem;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.2));animation:bob 4s ease-in-out infinite;pointer-events:none;z-index:1}
.s1{top:-4%;left:2%;rotate:-12deg}.s2{top:-2%;right:3%;rotate:9deg;animation-delay:.6s}
.s3{bottom:6%;left:0;rotate:8deg;animation-delay:1.1s}.s4{bottom:2%;right:1%;rotate:-9deg;animation-delay:.3s}
.s5{top:46%;left:-2%;rotate:5deg;animation-delay:1.5s}.s6{top:40%;right:-2%;rotate:-6deg;animation-delay:.9s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes pop{from{opacity:0;scale:.85;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
.brand{font-family:var(--display);font-size:1.35rem;line-height:1;color:var(--cherry);text-shadow:2px 2px 0 var(--lemon);margin-top:.35rem}
.brand em{font-style:normal;color:var(--pink)}
/* the address, said out loud in the wordmark: quieter than the name, same sticker shadow */
.brand .tld{font-size:.66em;color:var(--muted);text-shadow:1px 2px 0 var(--lemon);letter-spacing:.01em}
.challenge{position:relative;z-index:2;font-size:clamp(3.1rem,13.5vw,6.2rem);line-height:.98;max-width:11ch;margin:.2em auto 0;
  text-wrap:balance;animation:pop .55s .1s both}
.challenge .hl{color:var(--pink);background:linear-gradient(transparent 56%,var(--lemon) 56%,var(--lemon) 86%,transparent 86%);padding:0 .12em;text-shadow:3px 4px 0 var(--ink)}
.dare{position:relative;z-index:2;margin:1.3rem auto 0;max-width:40ch;font-weight:700;font-size:clamp(1.05rem,2.6vw,1.25rem);line-height:1.4;color:#5c2740}
.cta-row{position:relative;z-index:2;margin-top:1.6rem}
.cta{font-size:1.35rem;padding:.75em 1.7em}
.cta-detail{margin-top:.9rem;font-size:.9rem;font-weight:600;color:#7a3a56;max-width:34ch;margin-inline:auto}
.cta-secondary{margin-top:1.1rem;font-family:var(--hand);font-size:1.35rem;color:var(--cherry);rotate:-1deg}
.auth-bar{display:flex;justify-content:center;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.7rem;font-size:.8rem;font-weight:700;color:#7a3a56}
.auth-bar .text-button{display:inline;margin:0;font-size:.8rem}
.teaser-title{font-family:var(--display);font-size:clamp(1.5rem,5vw,2rem);color:var(--cherry);text-align:center;margin:2.6rem 0 1.6rem;rotate:-1deg;text-shadow:2px 3px 0 var(--lemon)}
.rules.dare-card{background:var(--lemon);box-shadow:6px 7px 0 var(--pink);rotate:.6deg}
.dare-card .rules-title{color:var(--ink)}
.signin-card{text-align:center}
.signin-card .copybtn{margin-top:1rem}
/* modes: challenge = the dare; setup/join = short headline + one card; course = paired, hero + teaser hidden */
.home[data-mode="setup"] .challenge,.home[data-mode="join"] .challenge{font-size:clamp(2.2rem,9vw,3.6rem)}
/* The hero sign-in stays where Chris put it. It is drawn on W1 AND on the first-pair setup card, in the same
   upper-right corner, because the masthead is on both screens and the way in should not move under her while
   she fills the card in. What does not happen on those two screens is the footer bar drawing the very same
   offer a second time: `standDownBarSignIn` empties it, so exactly one "sign in" is on the page.

   Join keeps the old arrangement: no hero there, the bar is the way in. `.masthead` is in that selector on
   purpose. `.home[data-mode="join"] .text-button` further down would otherwise tie it at (0,3,0) and win on
   source order — the exact way this went wrong once already — and the extra class settles it at (0,4,0). */
.home[data-mode="setup"] .dare,.home[data-mode="setup"] .cta-row,.home[data-mode="setup"] .hero-stickers,
.home[data-mode="join"] .dare,.home[data-mode="join"] .cta-row,.home[data-mode="join"] .hero-stickers,.home[data-mode="join"] .masthead .hero-signin{display:none}
.home[data-mode="setup"] .hero,.home[data-mode="join"] .hero{padding-bottom:0}
.home[data-mode="course"] .hero,.home[data-mode="course"] .teaser,.home[data-mode="course"] .masthead{display:none}
/* The journal, on the same element the poster uses: board Z's 24px gutter, so stepping from a tab to the
   journal does not move the page sideways. `[data-mode="course"]` is the journal alone; the poster keeps the
   wider `.home` rule below, and setup/join keep theirs. */
.home[data-mode="course"]{max-width:480px;padding:44px 24px 24px}
/* Paired: no footer. Sign out and leave live in settings (Chris, 9 Sept). */
.home[data-mode="course"] .foot{display:none}

/* ---------- HOME ---------- */
.home{max-width:720px;margin:0 auto;padding:28px 18px 60px}
.masthead{text-align:center;padding:1.6rem 0 1rem}
/* The way back in, upper right. Its own row above the centred issue line rather than absolutely placed
   beside it: at 390px the issue label is about 250px of a 354px column, so a right-aligned control on the
   same line would sit on top of it. `width:max-content` plus `margin-left:auto` puts it flush right in
   normal flow, so it cannot overlap the label, the wordmark, the hero title or the stickers at any width.
   .8rem is the size this same control already takes in the footer auth bar (`.auth-bar .text-button`).
   Colour is untouched: the landing's rose rule in tabs.css still reaches it as a `.text-button`. */
.masthead .hero-signin{width:max-content;margin:0 0 1.25rem auto;font-size:.8rem}
.issue{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;font-weight:700;color:var(--cherry)}
.logo{font-family:var(--display);font-size:clamp(2.6rem,10vw,4.6rem);line-height:.95;rotate:-1.5deg;
  color:var(--cherry);text-shadow:3px 4px 0 var(--lemon)}
.logo em{font-style:normal;color:var(--pink)}
.tag{margin:.9rem auto 0;max-width:42ch;font-weight:600;color:#5c2740}
.progress-pill{display:inline-block;margin-top:1rem;font-weight:800;background:var(--ink);color:var(--cream);
  padding:.45em 1.2em;border-radius:999px;rotate:1deg;box-shadow:3px 4px 0 var(--pink)}
.rules{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:1.1rem 1.3rem;margin:1.4rem 0 2rem;
  rotate:-.6deg;box-shadow:6px 7px 0 var(--lav)}
.rules-title{font-family:var(--display);font-size:1.25rem;color:var(--cherry);margin-bottom:.3rem}

.pillar{margin-bottom:2.4rem}
.pillar-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1rem;rotate:-1deg}
.pillar-num{font-family:var(--display);font-size:2.4rem;color:var(--pink);text-shadow:2px 3px 0 var(--ink)}
.pillar-name{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.pillar-why{font-family:var(--hand);font-size:1.25rem;color:#7a3a56;margin:-.4rem 0 1rem;rotate:-.5deg}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.card{position:relative;text-align:left;background:#fff;border:3px solid var(--ink);border-radius:18px;
  padding:1rem 1rem 1.1rem;cursor:pointer;font-family:var(--body);
  box-shadow:5px 6px 0 var(--ink);transition:translate .14s,box-shadow .14s,rotate .14s}
.card:nth-child(odd){rotate:-1.2deg}.card:nth-child(even){rotate:1deg}
.card:hover{translate:-2px -4px;box-shadow:8px 10px 0 var(--ink);rotate:0deg}
.card:active{translate:2px 3px;box-shadow:2px 2px 0 var(--ink)}
.card .dnum{font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cherry)}
.card h3{font-family:var(--display);font-size:1.05rem;line-height:1.15;margin:.25rem 0 .35rem}
.card .tease{font-size:.85rem;font-weight:600;color:#6b3550;line-height:1.3}
.card .spicy{position:absolute;top:-12px;right:-8px;background:var(--lemon);border:2.5px solid var(--ink);
  border-radius:999px;font-size:.66rem;font-weight:800;padding:.3em .7em;rotate:8deg}
.card.locked{cursor:default}
.card.locked:hover{translate:0;box-shadow:5px 6px 0 var(--ink)}
.card.locked:nth-child(odd):hover{rotate:-1.2deg}.card.locked:nth-child(even):hover{rotate:1deg}
.card.locked::after{content:"🔒";position:absolute;bottom:-11px;right:10px;background:var(--cream);border:2px solid var(--ink);font-size:.7rem;padding:.2em .5em;border-radius:999px;rotate:-4deg}
.p5 .card.locked::after{background:#1f0b16;border-color:var(--pink)}
.card.done{background:var(--mint)}
.card.done::after{content:"done ✓";position:absolute;bottom:-11px;right:10px;background:var(--ink);color:var(--mint);
  font-size:.66rem;font-weight:800;padding:.28em .8em;border-radius:999px;rotate:-4deg}
.p5 .card{background:#1f0b16;color:var(--cream);border-color:var(--pink);box-shadow:5px 6px 0 var(--pink)}
.p5 .card .tease{color:#ffb8d4}.p5 .card h3{color:var(--cream)}
.p5 .card.done{background:#0d3b2b}
.foot{text-align:center;margin-top:3rem;font-family:var(--hand);font-size:1.3rem;color:#7a3a56}
.foot a{color:var(--pink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.reset{margin-top:.8rem;font-family:var(--body);font-size:.75rem;font-weight:700;background:none;
  border:2px solid #c98aa6;color:#a05c7c;border-radius:999px;padding:.4em 1em;cursor:pointer}

/* ---------- DAY ---------- */
.day{max-width:480px;margin:0 auto;padding:24px 18px 80px}
.back{font-family:var(--body);font-weight:800;font-size:.95rem;background:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:.5em 1.2em;cursor:pointer;box-shadow:4px 5px 0 var(--ink);margin-bottom:1.4rem}
.day-kicker{font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cherry)}
.day-title{font-family:var(--display);font-size:clamp(1.9rem,7.5vw,2.8rem);line-height:1.02;color:var(--ink);
  margin:.3rem 0 1rem;rotate:-1deg;text-shadow:2px 3px 0 var(--lemon)}
.day-intro{background:#fff;border-left:6px solid var(--pink);border-radius:0 16px 16px 0;padding:.9rem 1.1rem;
  font-weight:600;color:#5c2740;margin-bottom:1.6rem}
.qlist{display:flex;flex-direction:column;gap:.9rem;counter-reset:q}
.q{position:relative;background:#fff;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;
  padding:1rem 1.1rem 1rem 3.4rem;font-weight:600;line-height:1.4;box-shadow:4px 5px 0 var(--lav)}
.q::before{counter-increment:q;content:counter(q);position:absolute;left:.9rem;top:.95rem;width:1.7rem;height:1.7rem;
  display:grid;place-items:center;background:var(--pink);color:#fff;font-family:var(--display);font-size:.95rem;
  border:2.5px solid var(--ink);border-radius:50%}
.scoring,.pact{border:3px solid var(--ink);border-radius:18px;padding:1rem 1.2rem;margin-top:1.4rem;font-weight:600}
.scoring{background:var(--lemon);rotate:-.7deg;box-shadow:5px 6px 0 var(--ink)}
.pact{background:var(--ink);color:var(--cream);rotate:.6deg;box-shadow:5px 6px 0 var(--pink)}
.pact b{color:var(--lemon)}
.label{font-family:var(--display);display:block;font-size:1rem;margin-bottom:.3rem}
.deep{margin-top:1.6rem;font-family:var(--hand);font-size:1.55rem;line-height:1.25;color:var(--cherry);rotate:-1deg;
  padding-left:1rem;border-left:4px solid var(--pink)}
.deep b{font-family:inherit}
.q.big{font-size:1.25rem;line-height:1.45;padding:1.6rem 1.4rem 1.6rem 3.6rem;min-height:9rem;display:flex;align-items:center}
.lesson{background:#fff;border:3px solid var(--ink);border-radius:20px;padding:1.4rem 1.3rem;
  box-shadow:6px 7px 0 var(--lav);rotate:-.5deg}
.lesson h2{font-family:var(--display);font-size:1.3rem;color:var(--cherry);margin-bottom:.5rem}
.lesson p{font-weight:600;color:#4a2138;line-height:1.55}
.day.dark .lesson{background:#2e1322;border-color:var(--pink);box-shadow:6px 7px 0 var(--cherry)}
.day.dark .lesson p{color:#ffd6e6}
.day.dark .lesson h2{color:var(--lemon)}
.choices{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.choice{text-align:left;font-family:var(--body);font-weight:700;font-size:1rem;background:#fff;
  border:3px solid var(--ink);border-radius:14px;padding:.8rem 1rem;cursor:pointer;
  box-shadow:3px 4px 0 var(--lav);transition:translate .1s,box-shadow .1s}
.choice:active{translate:2px 2px;box-shadow:1px 1px 0 var(--lav)}
.choice.on{background:var(--lemon);box-shadow:3px 4px 0 var(--ink)}
.choice.on::after{content:" ✓";font-weight:900}
.day.dark .choice{background:#2e1322;color:#ffe9f2;border-color:var(--pink);box-shadow:3px 4px 0 var(--cherry)}
.day.dark .choice.on{background:var(--lemon);color:var(--ink)}
.cmp{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:.9rem 1rem;margin-top:.9rem;
  position:relative;font-weight:600;line-height:1.45}
.cmp .cmpq{font-weight:800;margin-bottom:.3rem}
.cmp.match{box-shadow:4px 5px 0 var(--mint)}
.cmp.miss{box-shadow:4px 5px 0 var(--cherry)}
.cmp .verdict{position:absolute;top:-11px;right:10px;background:var(--ink);color:var(--cream);
  font-size:.66rem;font-weight:800;padding:.28em .8em;border-radius:999px;rotate:-3deg}
.day.dark .cmp{background:#2e1322;color:#ffe9f2;border-color:var(--pink)}
.pairbox p code{font-size:.78rem;word-break:break-all}
.pairout{margin-top:.7rem;font-weight:700}
.pact textarea{font-family:var(--body);font-weight:600;border:3px solid var(--cream);border-radius:12px;
  padding:.7rem .9rem;background:#2e1322;color:#ffe9f2}
.answerbox{margin-top:1rem}
.answerbox textarea{width:100%;font-family:var(--body);font-weight:600;font-size:1rem;line-height:1.45;
  border:3px solid var(--ink);border-radius:16px;padding:.85rem 1rem;background:#fff;color:var(--ink);
  box-shadow:4px 5px 0 var(--mint);resize:vertical;outline:none}
.answerbox textarea:focus{box-shadow:4px 5px 0 var(--mint),0 0 0 4px var(--lemon)}
.ansrow{display:flex;align-items:center;gap:.8rem;margin-top:.7rem;flex-wrap:wrap}
.micbtn{font-family:var(--body);font-weight:800;font-size:.95rem;background:var(--lemon);border:3px solid var(--ink);
  border-radius:999px;padding:.55em 1.2em;cursor:pointer;box-shadow:4px 5px 0 var(--ink)}
.micbtn.rec{background:var(--cherry);color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{scale:1.06}}
.ansrow audio{height:2.4rem;max-width:100%}
.day.dark .answerbox textarea{background:#2e1322;color:#ffe9f2;border-color:var(--pink);box-shadow:4px 5px 0 var(--cherry)}
.steprow{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:.8rem}
.steprow .back{margin-bottom:0}
.dots{display:flex;gap:.45rem;margin:.2rem 0 1.2rem}
.dot{width:.65rem;height:.65rem;border-radius:50%;border:2px solid var(--ink);background:#fff}
.dot.on{background:var(--pink)}
.day.dark .dot{border-color:var(--pink);background:#2e1322}
.day.dark .dot.on{background:var(--lemon)}
.copybar{position:sticky;bottom:14px;margin-top:2.2rem;display:flex;justify-content:center}
.copybtn{font-family:var(--display);font-size:1.1rem;background:var(--pink);color:#fff;border:3px solid var(--ink);
  border-radius:999px;padding:.7em 1.6em;cursor:pointer;box-shadow:5px 6px 0 var(--ink);
  transition:translate .12s,box-shadow .12s}
.copybtn:active{translate:3px 4px;box-shadow:1px 1px 0 var(--ink)}
.donebtn{display:block;margin:1.2rem auto 0;font-family:var(--body);font-weight:800;background:var(--mint);
  border:3px solid var(--ink);border-radius:999px;padding:.6em 1.4em;cursor:pointer;box-shadow:4px 5px 0 var(--ink)}
.day.dark{background:#1f0b16;min-height:100dvh}
.day.dark .day-title{color:var(--cream);text-shadow:2px 3px 0 var(--cherry)}
.day.dark .back{background:var(--cream)}
.day.dark .day-intro{background:#2e1322;color:#ffd6e6;border-color:var(--lemon)}
.day.dark .q{background:#2e1322;color:#ffe9f2;box-shadow:4px 5px 0 var(--cherry);border-color:var(--pink)}
.day.dark .deep{color:var(--lemon)}
@media(max-width:480px){.cards{grid-template-columns:1fr 1fr}}

/* ---------- PAIRED DAILY COURSE ---------- */
button,input,textarea{font:inherit}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid var(--lemon);outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.55;translate:0 0!important;box-shadow:none!important}
.flow-card{background:#fff;border:3px solid var(--ink);padding:clamp(1.25rem,4vw,2rem);margin:1.6rem 0;
  box-shadow:7px 8px 0 var(--ink)}
.flow-card h2,.offer-card h2{font-family:var(--display);font-size:clamp(1.55rem,6vw,2.3rem);line-height:1.08;color:var(--cherry);margin:.35rem 0 .65rem}
.flow-card p,.offer-card p{font-weight:600;line-height:1.55;color:#5c2740}
.section-note{font-family:var(--hand);font-size:1.2rem!important;font-weight:700!important;color:var(--pink)!important}
.setup-card{max-width:620px;margin-inline:auto}
/* No word alone on the last line ("Start with your / bestie", "...the private / link."). */
.setup-card :is(h2,.privacy-note){text-wrap:balance}
.name-form{margin-top:1.4rem}
.name-form label,.answerbox label,.pact label{display:block;font-weight:800;margin-bottom:.45rem}
.form-row{display:flex;align-items:stretch;gap:.75rem}
.form-row input{min-width:0;flex:1;border:3px solid var(--ink);background:var(--cream);color:var(--ink);padding:.8rem 1rem;border-radius:12px;box-shadow:4px 5px 0 var(--lav)}
.form-row .copybtn{white-space:nowrap}
.form-error{margin-top:.75rem!important;color:var(--cherry)!important;font-weight:800!important}
.privacy-note{margin-top:1rem;font-size:.85rem}
.loading-card{text-align:center;font-weight:800}
.wait-card{text-align:center}
.invite-box{margin:1.2rem 0;padding:.8rem;background:var(--cream);border:2px dashed var(--ink);overflow-wrap:anywhere;text-align:left}
.invite-box code{font-size:.78rem}
.text-button{display:block;margin:1rem auto 0;border:0;background:transparent;color:var(--cherry);font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pair-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.5rem 0 1rem}
.pair-names{font-family:var(--display);font-size:clamp(1.35rem,5vw,2rem);color:var(--cherry)}
.sealed{font-size:.76rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.pair-stats{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--ink);background:var(--lemon);margin-bottom:1rem}
.pair-stats div{display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem}
.pair-stats div+div{border-left:3px solid var(--ink)}
.pair-stats strong{font-family:var(--display);font-size:1.75rem;color:var(--cherry)}
.pair-stats span{font-size:.75rem;font-weight:900;text-transform:uppercase;line-height:1.1}
.day-strip{display:flex;gap:.4rem;list-style:none;overflow-x:auto;padding:.35rem .1rem .7rem;scrollbar-width:thin}
.day-chip{width:2.35rem;height:2.35rem;display:grid;place-items:center;flex:none;border:2px solid var(--ink);border-radius:50%;background:#fff;font-weight:900;cursor:pointer}
.day-chip.complete{background:var(--mint)}
.day-chip.ready{background:var(--lemon);box-shadow:2px 3px 0 var(--ink)}
.day-chip:disabled{background:#eadde2;color:#8b7480;border-color:#bbaab2}
.active-card{position:relative;background:var(--pink);color:#fff;box-shadow:8px 9px 0 var(--ink);rotate:-.4deg}
.active-card h2,.active-card p{color:#fff}
.active-card .section-note{color:var(--lemon)!important}
.active-card .copybtn{background:var(--lemon);color:var(--ink);margin-top:1.15rem}
.active-number{font-family:var(--hand);font-size:1.35rem!important;margin-top:.45rem}
.locked-card{background:var(--ink)}
.finished-card{background:var(--cherry)}
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.25rem 0}
.tool-button{min-height:46px;border:3px solid var(--ink);background:#fff;color:var(--ink);font-weight:800;padding:.7rem 1rem;cursor:pointer;box-shadow:3px 4px 0 var(--lav)}
.tool-button:active{translate:2px 3px;box-shadow:1px 1px 0 var(--lav)}
.offer-card{background:var(--lemon);border:3px solid var(--ink);padding:1.4rem;margin:1.6rem 0;box-shadow:6px 7px 0 var(--pink)}
.offer-card h2{color:var(--ink);font-size:clamp(1.35rem,5vw,1.9rem)}
.offer-card p{color:var(--ink)}
.keep-line code{display:block;margin-top:.4rem;font-size:.78rem;overflow-wrap:anywhere}
.mismatch-card .text-button{margin-top:.9rem}
.foot-links,.foot-legal{margin-top:.5rem;font-size:.85rem}
.foot-links a{color:inherit;font-weight:800}
.beta-pass{display:inline-block;margin-top:1rem;background:var(--ink);color:var(--cream);font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;padding:.55rem .75rem}
/* Option C of the 24 Sept gate: the row reads DOWN the screen, so each control has its own line and "our
   score" sits under "back to today" rather than beside it. This row is drawn on one screen only (the course
   day's reveal, app.js renderReveal), so the column belongs to the row itself and needs no second class. */
.reveal-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;margin:2rem 0}
.reveal-actions .copybtn,.reveal-actions .tool-button{margin:0}
.pact label{margin-top:1rem;color:var(--cream)}
.pact textarea{width:100%;margin-top:0}
.answerbox label{color:var(--ink)}
.day.dark .answerbox label{color:var(--cream)}
.reset{min-height:44px}
.cta-detail{margin-top:.6rem}

/* ============ THE DAILY: sealed pair home, answer screen, reveal ============
   One hero in Shrikhand per screen, one pink pill, at most one bordered card,
   the seal on the card's edge. Hairlines instead of boxes everywhere else. */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cherry)}
.eyebrow.mute{color:var(--soft)}
.brandline{font-family:var(--display);font-size:15px;line-height:1;color:var(--ink);margin-top:6px}
.brandline em{font-style:normal;color:var(--pink)}
.hero-q{font-family:var(--display);font-size:34px;line-height:1.08;letter-spacing:-.005em;color:var(--ink);margin-top:12px;overflow-wrap:anywhere}
.hero-q.sm{font-size:32px}
.lede{font-size:17px;line-height:1.5;font-weight:500;color:var(--muted);margin-top:18px}
.stat{font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}
.stat b{color:var(--cherry)}
.hand{font-family:var(--hand);font-size:20px;line-height:1.2;color:var(--hand-ink)}
.hair{height:1px;background:var(--hair);border:0}
.tcard{position:relative;border:1.5px solid var(--ink);border-radius:20px;background:var(--card);padding:28px 24px 30px;margin-top:38px}
.tcard .hero-q{margin-top:12px}

/* the seal: a wax disc with a lock. .open = snapped in two on the reveal */
.seal{width:54px;height:54px;border-radius:50%;background:var(--pink);position:relative;flex:none;
  box-shadow:inset 0 0 0 3px rgba(255,244,236,.45)}
.seal::before{content:"";position:absolute;left:50%;top:14px;translate:-50% 0;width:16px;height:13px;
  border:3px solid var(--seal-ink);border-bottom:0;border-radius:9px 9px 0 0}
.seal::after{content:"";position:absolute;left:50%;top:26px;translate:-50% 0;width:22px;height:16px;border-radius:4px;background:var(--seal-ink)}
.seal.on-edge{position:absolute;top:-20px;right:20px;z-index:2;rotate:-6deg}
.seal.open{width:64px;height:54px;background:none;border-radius:0;box-shadow:none}
.seal.open::before{left:0;top:0;translate:0 0;width:27px;height:54px;border:0;
  border-radius:27px 5px 5px 27px;background:var(--pink);rotate:-7deg;box-shadow:inset 3px 0 0 rgba(255,244,236,.45)}
.seal.open::after{left:auto;right:0;top:0;translate:0 0;width:27px;height:54px;
  border-radius:5px 27px 27px 5px;background:var(--pink);rotate:7deg;box-shadow:inset -3px 0 0 rgba(255,244,236,.45)}
.reveal-head{display:flex;align-items:center;gap:14px}

/* the one button, and the text link under it */
.pill{display:block;width:100%;min-height:56px;border:0;border-radius:999px;background:var(--pink);color:#fff;
  font-family:var(--body);font-weight:800;font-size:17px;letter-spacing:.01em;cursor:pointer;padding:0 20px;margin-top:28px;
  transition:translate .12s}
.pill:active{translate:0 2px}
.pill:disabled{opacity:.55}
.tlink{display:block;width:100%;text-align:center;margin-top:16px;background:0;border:0;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:700;color:var(--soft);text-decoration:underline;text-underline-offset:4px}
.tlink.left{width:auto;text-align:left;margin-top:8px;padding:0;min-height:44px;display:inline-flex;align-items:center}
.stat.mt{margin-top:32px}

/* mood row: bare emoji, the picked ones lifted and tagged with an initial */
.moods{display:flex;justify-content:space-between;align-items:flex-end;margin-top:24px;gap:0;margin-left:-6px;margin-right:-6px}
.mood{position:relative;font-size:31px;line-height:1;opacity:.4;background:0;border:0;padding:8px 6px 10px;min-width:44px;min-height:44px;cursor:pointer;
  transition:translate .18s,opacity .18s}
.mood.up{opacity:1;translate:0 -12px}
.mood:disabled{cursor:default}
.mood i{position:absolute;right:0;bottom:-2px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--pink);
  color:#fff;font-style:normal;font-family:var(--body);font-size:11px;font-weight:800;display:grid;place-items:center;letter-spacing:.02em}
.moods + .hand{margin-top:18px}
@media(max-width:360px){.mood{font-size:26px;padding:8px 3px 10px;min-width:40px}}

/* the course as the quiet second thing on the home */
.course-line{margin-top:36px;padding-top:22px;border-top:1px solid var(--hair)}
.course-line .stat{margin-top:6px}
.course-line .tlink.left{margin-top:8px}

/* screen 04: keep the daily, add the 13 days */
.offer-list{list-style:none;margin-top:12px}
.offer-list li{font-size:16px;font-weight:600;line-height:1.35;padding:7px 0 7px 20px;position:relative;color:var(--muted)}
.offer-list li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.offer-list a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.price{font-size:17px;font-weight:800;color:var(--ink);margin-top:4px}
.tcard.offer{margin-top:26px}
.hero-q.top{margin-top:34px}

/* the paywall: after the free days, one price for the pair */
.tcard.paywall{margin-top:26px}
.paywall .hero-q{margin-top:10px}
.price-line{font-family:var(--display);font-size:26px;line-height:1.1;color:var(--cherry);margin-top:16px}
.apple-line{font-size:14px;line-height:1.45;font-weight:600;color:var(--muted);margin-top:8px}
.paywall .pill{margin-top:22px}
.paywall .hand{margin-top:18px}
.offer-card.paywall{margin:1.6rem 0}

/* missed days on the home, the list at #history */
.catchup{margin-top:22px;padding:14px 16px;border:1.5px solid var(--ink);border-radius:16px;background:var(--card)}
.catchup .stat+.stat{margin-top:4px}
.catchup .tlink.left{margin-top:4px;text-decoration:underline;text-underline-offset:3px;color:var(--cherry);font-weight:800}
.history{list-style:none;margin-top:22px}
.history-row a{display:block;padding:14px 0;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.history-row:last-child a{border-bottom:1px solid var(--hair)}
.history-day{display:block;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cherry)}
.history-day em{font-style:normal;letter-spacing:.06em;color:var(--soft);text-transform:none;margin-left:6px}
.history-q{display:block;margin-top:6px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.history-status{display:inline-block;margin-top:8px;font-size:12px;font-weight:800;color:var(--muted)}
.history-row.open .history-status{color:var(--cherry)}

/* the other side's answer behind the sign-in */
.locked-card.said{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;padding:16px 18px 18px}
.locked-card.said .pill{margin-top:14px}
.scoring.locked-card{background:var(--ink)}

/* the two pages linked from the paywall */
.content-page{list-style:none;margin-top:26px;counter-reset:item}
.content-page li{padding:18px 0;border-top:1px solid var(--hair);counter-increment:item}
.content-page h3{font-family:var(--display);font-size:20px;line-height:1.15;color:var(--ink)}
.content-page h3::before{content:counter(item) ". ";color:var(--pink)}
.content-page .meta{margin-top:4px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.content-page p{margin-top:8px;font-size:16px;line-height:1.45;font-weight:500;color:var(--muted)}
.email-form{margin-top:22px}
.email-form .form-row{margin-top:8px}

/* the today screen (answer + reveal) */
/* Board Z's gutter: 24px, the same as the tabs and the journal. The top was already the approved 44px. */
.today{max-width:480px;margin:0 auto;padding:44px 24px 24px;min-height:100dvh}
.today .hero-q{margin-top:18px}
.said{margin-top:30px}
.said + .said{margin-top:18px;padding-top:18px;border-top:1px solid var(--hair)}
.said .who{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--pink)}
.said p{margin-top:7px;font-size:17px;line-height:1.42;font-weight:500;color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}
.today textarea{width:100%;margin-top:14px;min-height:150px;font-family:var(--body);font-weight:500;font-size:17px;line-height:1.45;
  border:1.5px solid var(--ink);border-radius:14px;padding:14px 16px;background:var(--card,#fff);color:var(--ink);resize:none;outline:none;display:block}
.today .count{margin-top:8px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--soft);text-align:right}
.today textarea::placeholder{color:var(--soft)}
.today textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,46,136,.18)}
.today .form-error{margin-top:14px!important;color:var(--cherry)!important;font-weight:700!important}
.today .status{margin-top:26px}

/* setup, join, waiting and sign-in cards follow the same rules in the sealed style */
.home[data-mode="setup"] .flow-card,.home[data-mode="join"] .flow-card,.home[data-mode="course"] .flow-card{
  background:var(--card);border:1.5px solid var(--ink);border-radius:20px;box-shadow:none;padding:28px 24px 30px;margin:24px 0 0}
.home[data-mode="setup"] .flow-card h2,.home[data-mode="join"] .flow-card h2,.home[data-mode="course"] .flow-card h2{
  font-family:var(--display);font-size:30px;line-height:1.08;color:var(--ink);margin:12px 0 0}
.home[data-mode="setup"] .flow-card p,.home[data-mode="join"] .flow-card p,.home[data-mode="course"] .flow-card p{
  font-size:17px;line-height:1.5;font-weight:500;color:var(--muted);margin-top:14px}
.home[data-mode="setup"] .section-note,.home[data-mode="join"] .section-note,.home[data-mode="course"] .section-note{
  font-family:var(--body)!important;font-size:11px!important;font-weight:800!important;letter-spacing:.22em;text-transform:uppercase;
  color:var(--soft)!important;margin:0!important}
.home[data-mode="setup"] .copybtn,.home[data-mode="join"] .copybtn,.home[data-mode="course"] .copybtn{
  display:block;width:100%;min-height:56px;border:0;border-radius:999px;background:var(--pink);color:#fff;
  font-family:var(--body);font-weight:800;font-size:17px;box-shadow:none;margin-top:22px;padding:0 20px}
.home[data-mode="setup"] .copybtn:active,.home[data-mode="join"] .copybtn:active,.home[data-mode="course"] .copybtn:active{translate:0 2px;box-shadow:none}
.home[data-mode="setup"] .form-row,.home[data-mode="join"] .form-row{flex-direction:column}
.home[data-mode="setup"] .form-row input,.home[data-mode="join"] .form-row input{
  border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;box-shadow:none;padding:10px 0;font-size:17px;font-weight:500}
.home[data-mode="setup"] .name-form label,.home[data-mode="join"] .name-form label{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:22px 0 4px}
.home[data-mode="course"] .invite-box{border:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:transparent;padding:14px 0;margin:18px 0 0}
.home[data-mode="course"] .invite-box code{color:var(--muted)}
.home[data-mode="course"] .wait-card,.home[data-mode="course"] .signin-card{text-align:left}
.home[data-mode="setup"] .signin-card{text-align:left}
/* The full-width text buttons that sit under a card on these screens. `:not(.hero-signin)` keeps the masthead
   sign-in out of it: it is not a card control, and without the exclusion this rule (0,3,0) beat
   `.masthead .hero-signin` (0,2,0) and redrew it as a centred full-width grey line instead of the small pink
   one in the corner. */
.home[data-mode="course"] .text-button:not(.hero-signin),.home[data-mode="setup"] .text-button:not(.hero-signin),.home[data-mode="join"] .text-button:not(.hero-signin){
  display:block;width:100%;text-align:center;margin-top:16px;font-size:14px;font-weight:700;color:var(--soft);text-decoration:underline;text-underline-offset:4px}
.home[data-mode="course"] .privacy-note{font-size:14px!important;color:var(--soft)!important}
.home[data-mode="course"] .loading-card{text-align:left;font-weight:700;color:var(--muted)}

@media(max-width:560px){
  .home{padding-inline:14px}
  .hero-stickers .stk{font-size:1.5rem}
  .s3,.s4,.s5,.s6{display:none}
  .s1{top:-2%;left:0}.s2{top:-2%;right:0}
  .challenge{max-width:9ch}
  .cta{width:100%;font-size:1.25rem}
  .form-row{align-items:stretch;flex-direction:column}
  .form-row .copybtn{width:100%}
  .pair-heading{align-items:flex-start;flex-direction:column;gap:.25rem}
  .pair-stats span{font-size:.68rem}
  .tool-row{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}

.round-card,.round-settings,.course-purchase{margin:24px 0;padding:20px 0;border-top:1px solid var(--hair)}
.round-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.round-actions .pill{flex:1 1 140px;margin:0}
.said select,.round-card select,.round-card input{display:block;width:100%;max-width:100%;font:inherit;color:var(--ink);background:var(--card);padding:12px;margin:8px 0 20px;border:1px solid var(--ink);border-radius:8px}
.round-card select{white-space:normal}
.round-proof{display:block;max-width:100%;max-height:360px;object-fit:contain;margin:16px 0}
.round-proof[hidden]{display:none}
.round-notice{padding:16px;border:1px solid currentColor}
.proof-picker{display:block;margin-top:24px}
.round-settings [role="switch"]{text-align:left}
.round-settings [aria-checked="true"]::after{content:' · paused'}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media(prefers-color-scheme:dark){
  :root{--cream:#1f1118;--ink:#fff3f7;--lav:#72598a;--mint:#45ba91;--lemon:#f4ca3b;--cherry:#ff4f7b;--pink:#f52e82;
    --card:#321d27;--muted:#eacbd7;--soft:#b895a8;--hand-ink:#d9a9c0;--hair:rgba(255,243,247,.18)}
  body{background:var(--cream);color:var(--ink)}
  .tag,.flow-card p,.offer-card p,.pillar-why{color:#eacbd7}
  .rules,.flow-card,.tool-button,.day-chip,.cmp,.choice,.answerbox textarea,.card{background:#321d27;color:var(--ink);border-color:var(--ink)}
  .card .tease,.dare,.cta-detail,.auth-bar{color:#eacbd7}
  .dare-card{background:var(--lemon)}.dare-card p,.dare-card .rules-title{color:#1a0a12}
  .card.locked::after{background:#321d27}
  .q,.lesson,.day-intro,.back,.scoring,.pact,.dot{background:#321d27;color:var(--ink);border-color:var(--ink)}
  .q::before{background:var(--pink);color:#fff}
  .lesson p,.lesson h2,.day-intro,.scoring,.pact{color:var(--ink)}
  .dot.on{background:var(--lemon)}
  .form-row input,.invite-box{background:#28151f;color:var(--ink);border-color:var(--ink)}
  .active-card{background:var(--pink)}
  .active-card h2,.active-card p{color:#fff}
  .locked-card{background:#120a0e}
  .offer-card{background:var(--lemon)}
  .offer-card h2,.offer-card p{color:#1a0a12}
  .day-chip:disabled{background:#3b2b33;color:#a8909b;border-color:#725e68}
  .answerbox label{color:var(--ink)}
  .seal,.seal.open::before,.seal.open::after{background:var(--pink)}
  .seal::before{border-color:var(--seal-ink)}
  .seal::after{background:var(--seal-ink)}
  .pill,.mood i{color:#fff}
  .foot{color:#d9a9c0}
  .today textarea{background:#321d27}
}

/* ---------- reactions under an answer, and the share sheet ---------- */
/* Quiet until picked: the answers stay the loudest thing on the screen. */
.react{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.rx-set{display:flex;flex:1;min-width:0;justify-content:space-between;margin-left:-6px}
.rx{position:relative;font-size:19px;line-height:1;background:0;border:0;border-radius:14px;padding:11px 4px 13px;
  min-width:40px;min-height:44px;cursor:pointer;opacity:.34;transition:opacity .18s,background .18s}
.rx.theirs{opacity:1}
.rx.mine{opacity:1;background:rgba(255,46,136,.13)}
.rx:disabled{cursor:default}
.rx i{position:absolute;right:1px;bottom:3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--ink);color:var(--cream);font-style:normal;font-family:var(--body);font-size:9px;font-weight:800;
  display:grid;place-items:center;letter-spacing:.02em}
.rx-share{flex:0 0 auto;min-height:40px;padding:0 13px;border:1px solid var(--hair);border-radius:999px;background:0;
  cursor:pointer;font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.rx-share:active{background:rgba(255,46,136,.1)}
.react .rx-who{flex:0 0 100%;margin:2px 0 0;min-height:13px;font-size:11px;line-height:1.2;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.react .rx-who.err{color:var(--cherry);letter-spacing:0;text-transform:none;font-weight:700;font-size:13px}
.said .react{margin-top:12px}
.today .said + .tlink.left{margin-top:22px}
.cmp .react{margin-top:4px;margin-bottom:6px}
.cmp .tlink.left{margin-top:6px}
@media(max-width:360px){.rx{font-size:17px;padding:11px 2px 13px}.rx-share{padding:0 8px;font-size:10px;letter-spacing:.1em}}

.day.dark .rx{opacity:.44}
.day.dark .rx.mine,.day.dark .rx.theirs{opacity:1}
.day.dark .rx.mine{background:rgba(255,46,136,.24)}
.day.dark .rx-who,.day.dark .rx-share{color:#d9a9c0}
.day.dark .rx-share{border-color:rgba(255,232,242,.28)}
.day.dark .rx i{background:var(--lemon);color:#1a0a12}
.day.dark .tlink{color:#ffd6e6}

.sheet-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(26,10,18,.5);animation:sheet-fade .18s ease both}
.sheet{position:relative;width:100%;max-width:420px;background:var(--card);color:var(--ink);
  border-radius:26px 26px 0 0;padding:12px 24px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(26,10,18,.28);max-height:88dvh;overflow:auto;
  animation:sheet-up .24s cubic-bezier(.2,.8,.2,1) both}
.sheet:focus{outline:none}
.sheet-grip{display:block;width:42px;height:4px;border-radius:999px;background:var(--hair);margin:0 auto 18px}
.sheet-q{margin-top:8px;font-size:15px;line-height:1.35;font-weight:600;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sheet-rows{margin-top:16px;border-top:1px solid var(--hair)}
.srow{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:8px 2px;background:0;border:0;
  border-bottom:1px solid var(--hair);cursor:pointer;text-align:left;
  font-family:var(--body);font-size:16px;font-weight:700;color:var(--ink)}
.srow .sico{width:26px;font-size:19px;text-align:center}
.srow .slab{flex:1}
.srow .snote{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.srow:active{background:rgba(255,46,136,.08)}
.sheet-hint{margin-top:14px;font-size:13px;font-weight:600;line-height:1.45;color:var(--soft)}
.sheet .tlink{margin-top:12px;min-height:44px}
body.sheet-open{overflow:hidden}
@keyframes sheet-up{from{translate:0 100%}to{translate:0 0}}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}

@media(prefers-color-scheme:dark){
  .rx{opacity:.44}
  .rx.mine,.rx.theirs{opacity:1}
  .rx.mine{background:rgba(245,46,130,.24)}
  .rx i{background:var(--pink);color:#fff}
  .sheet{background:#321d27}
  .sheet-back{background:rgba(0,0,0,.6)}
}

/* ============ pair addresses: the poster at /<slug>, the quiet line on the home ============ */
.home[data-mode="public"]{max-width:480px;padding:56px 28px 40px}
.home[data-mode="public"] .hero,.home[data-mode="public"] .teaser,.home[data-mode="public"] .masthead{display:none}
.poster-names{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:20px}
.pname{font-family:var(--display);font-size:clamp(40px,14vw,58px);line-height:.94;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
/* the wax seal is the one mark on the page, and it sits between the two names holding them together */
.seal.pseal{margin-left:8px;rotate:-6deg}
.poster-since{margin-top:24px;font-size:13px;font-weight:700;color:var(--soft)}
.poster-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.poster-stats div{padding:16px 0}
.poster-stats div+div{border-left:1px solid var(--hair);padding-left:20px}
.poster-stats dt{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.poster-stats dd{font-family:var(--display);font-size:22px;line-height:1.1;color:var(--cherry);margin-top:9px}
.poster .lede{margin-top:24px}
.poster-addr{margin-top:28px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);overflow-wrap:anywhere}

.addr{display:flex;align-items:center;flex-wrap:wrap;gap:2px 10px;margin-top:12px}
.addr-url{font-size:12px;font-weight:700;color:var(--soft);overflow-wrap:anywhere}
.addr-btn{background:0;border:0;padding:6px 0;min-height:36px;cursor:pointer;font-family:var(--body);font-size:12px;font-weight:800;
  color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.addr-note{font-size:12px;font-weight:700;color:var(--soft)}
.addr-input{flex:1;min-width:110px;font-family:var(--body);font-size:13px;font-weight:700;color:var(--ink);
  border:0;border-bottom:1.5px solid var(--ink);background:transparent;padding:5px 0;outline:none}
.addr-input:focus{border-color:var(--pink)}
.addr-host{margin-right:-8px}
/* The first answer on the waiting card (board invite-teaser-2026-09-30): Day 1's question and its box, on the light card. */
.home[data-mode="course"] .wait-card .first-q{font-family:var(--display);font-size:24px;line-height:1.2;color:var(--ink)}
.home[data-mode="course"] .wait-card textarea{display:block;width:100%;min-height:110px;margin-top:16px;border:1.5px solid var(--ink);border-radius:14px;background:transparent;color:var(--ink);padding:12px 14px;font-size:17px;font-weight:500;line-height:1.45}
.home[data-mode="course"] .invite-box .invite-line{margin:0 0 8px;color:var(--ink)}