/* Onboard Your AI — one column, one type scale, two card sizes.
   Type: 76 hero · 24 section · 18 card title / lede · 16 body · 14 secondary · 12 label.
   Weights: 400 body · 600 emphasis · 800 display. Radii: pill · 16 card · 10 inner · 6 small. */
:root{
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --serif:Georgia,'Times New Roman',serif;

  --paper:#f7f7f0; --card:#fff; --ink:#192d24; --accent:#285d43; --accent-ink:#1e4733; --muted:#64726b; --line:#dce2d5;
  --lime:#d9ec93; --hl:#e6f1bd; --soft:#edf2e3;

  --fs-hero:76px; --fs-h2:24px; --fs-lg:18px; --fs-md:16px; --fs-sm:14px; --fs-xs:12px;
  --r-pill:999px; --r-card:16px; --r-md:10px; --r-sm:6px;
  --pad-card:20px; --pad-compact:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-md)/1.6 var(--body)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
b,strong{font-weight:600}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;background:var(--card);padding:8px 12px;z-index:10}
.honeypot{position:absolute;left:-9999px}

/* shared text roles */
h2,h3{text-wrap:balance}
.eyebrow,.day .num,.tab-label,.faq h4,.prompt-top span,.takeaway span{font:600 var(--fs-xs)/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.fine{font-size:var(--fs-sm);color:var(--muted);margin:8px 0 0}
.status{font-size:var(--fs-sm);margin:8px 0 0}
.link{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* buttons: one primary size, one small size */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:var(--r-md);padding:11px 18px;font:600 var(--fs-md)/1.2 var(--body);text-decoration:none;white-space:nowrap;background:var(--ink);color:#fff}
.btn:hover{background:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--paper)}
.btn.sm,.prompt-top button,.email-row button{font-size:var(--fs-sm);padding:7px 12px;border-radius:var(--r-sm)}

/* inputs */
label{display:block;font-size:var(--fs-sm);font-weight:600;margin:0 0 6px}
input[type=email],input[type=text],input[type=date],input:not([type]),select,textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;background:var(--card);font-size:var(--fs-md)}
textarea{min-height:110px;resize:vertical}
.row{display:flex;gap:10px;align-items:flex-end}
.row > *{flex:1}
.row > .btn{flex:none}
.consent{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:var(--fs-sm);color:var(--muted);margin-top:12px}
.consent input{margin-top:4px}

/* cards: one look, two paddings */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--pad-card);margin:16px 0}
.card h2{font:800 var(--fs-lg)/1.25 var(--display);letter-spacing:-.01em;margin:0 0 4px}
.card > p{color:var(--muted);margin:0 0 14px;font-size:var(--fs-sm)}

/* top bar */
.topbar{border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.topbar .wrap{white-space:nowrap;display:flex;justify-content:space-between;align-items:center;height:44px;gap:12px}
.topbar a{text-decoration:none}
.topbar nav{display:flex;gap:18px}
.topbar nav a,.topbar nav .link{color:var(--accent);font-size:var(--fs-sm);font-weight:400}
.logo-inline{height:14px;width:auto;vertical-align:-2px;margin-left:2px}
.byline{display:inline-flex;align-items:center;gap:6px}
.byline .logo-inline{height:18px;margin:0;position:relative;top:1.5px} /* sits the wordmark on the text baseline */
.byline .logo-color,.byline:hover .logo-dark,.byline:focus-visible .logo-dark{display:none}
.byline:hover .logo-color,.byline:focus-visible .logo-color{display:inline}

/* hero */
.hero{text-align:center;padding:56px 0 28px}
.hero-title{display:flex;align-items:center;justify-content:center;gap:18px}
.hero h1{font:800 var(--fs-hero)/.92 var(--display);letter-spacing:-.035em;margin:0;text-align:left}
.mascot{width:132px;flex:none;transform:rotate(6deg);transform-origin:50% 0;animation:swing 2.6s ease-in-out .3s 1}
@keyframes swing{0%{transform:rotate(6deg)}25%{transform:rotate(-7deg)}50%{transform:rotate(10deg)}75%{transform:rotate(2deg)}100%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.mascot{animation:none}}
.hero .lede{font-size:var(--fs-lg);line-height:1.45;font-weight:600;max-width:440px;margin:28px auto 16px;text-wrap:balance}
.hero .lede em{font:italic 400 1em/1.4 var(--serif)}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--lime);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-sm)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--ink);display:block}

/* email opt-in under the hero, and the nudge after finishing a day */
.optin{max-width:380px;margin:18px auto 0;display:flex;flex-direction:column;align-items:center;gap:6px}
.optin small{font-size:var(--fs-xs);color:var(--muted)}
.optin .status{margin:0}
.optin .status:empty,.nudge .status:empty{display:none}
.day.upnext{border-color:var(--ink)}
.day.upnext .t::after{content:'Up next';font:600 var(--fs-xs)/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:var(--r-pill);padding:4px 8px;margin-left:8px;vertical-align:2px;text-decoration:none;display:inline-block}
.nudge-skip{color:var(--muted);font-weight:400;font-size:var(--fs-sm);margin-top:8px}
.badge-name{margin:-6px 0 4px}
.badge-name summary{list-style:none;cursor:pointer;display:inline-block;color:var(--accent);font-size:var(--fs-sm);font-weight:600}
.badge-name summary::-webkit-details-marker{display:none}
.badge-name[open] summary{margin-bottom:8px}
.badge-name input{max-width:320px}
.optin-done{margin:16px 0 0;font-size:var(--fs-sm);color:var(--accent);text-wrap:balance}
.email-row{display:flex;align-items:center;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:4px 4px 4px 12px}
.email-row input{border:0;padding:6px 4px;flex:1;min-width:0;background:transparent;font-size:var(--fs-md)}
.email-row input:focus{outline:none}
.email-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(40,93,67,.12)}
.email-row button{border:0;background:var(--ink);color:#fff;font-weight:600;white-space:nowrap}
.email-row button:hover{background:var(--accent)}
.email-row button:disabled{opacity:.5}
.nudge{background:var(--soft);border-radius:var(--r-md);padding:var(--pad-compact);margin-top:12px}
.nudge b{display:block}
.nudge p{margin:2px 0 10px;font-size:var(--fs-sm);color:var(--muted)}
.nudge .status{color:var(--ink)}

/* check-in card + daily habit */
.card.checkin{padding:var(--pad-compact) var(--pad-card);margin:12px 0 8px}
.booked{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.booked p{margin:0}
.checkin-form{display:flex;gap:10px;align-items:center;margin-top:14px}
.checkin-form input[name=where]{flex:1;min-width:0}
.checkin-form input[type=date]{width:180px;flex:none}
.checkin-form .cancel{color:var(--muted);padding:0 4px;font-weight:400}
.card.checkin [data-edit-commitment-form] .checkin-form{margin-top:0}
.bar{height:8px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;margin-top:10px}
.bar div{height:100%;background:var(--accent);border-radius:var(--r-pill);transition:width .3s}
.count{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.3;color:var(--muted)}
.count b{color:var(--ink);font-weight:600}

/* plan header, week picker, profile */
.plan{margin:56px 0 0}
.plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px}
.plan-head h2{font:800 var(--fs-h2)/1.15 var(--display);letter-spacing:-.01em;margin:0}
.part-heads{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 4px;margin-bottom:6px}
.part-heads h3{font:600 var(--fs-xs)/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;padding:0 8px}
.weeks{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:4px}
.weeks button{border:0;background:transparent;border-radius:var(--r-md);padding:9px 8px;line-height:1.25;text-align:center;color:var(--ink)}
.weeks button:hover{background:var(--paper)}
.weeks button span{display:block;font-weight:600}
.weeks button small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.weeks button[aria-selected=true]{background:var(--accent);color:#fff}
.weeks button[aria-selected=true] small{color:rgba(255,255,255,.85)}
.intro-you .profile{margin:8px 0 0}
.profile-nudge{background:var(--hl);border-radius:var(--r-sm);padding:8px 12px;font-size:var(--fs-sm);margin:12px 0 0 38px}
.profile-nudge a{color:var(--accent);font-weight:600}
.profile{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 10px;margin:8px 0 0}
.profile .pf{display:inline-flex;align-items:baseline;gap:6px;flex:1 1 150px;min-width:0}
.profile .pf:first-child::after{content:',';margin-left:-4px}
.profile input{width:auto;flex:1;min-width:0;border:0;border-bottom:2px solid var(--accent);border-radius:0;background:transparent;padding:2px;font-weight:600}
.profile small{flex-basis:100%;color:var(--muted);font-size:var(--fs-xs)}
.week-intro{margin:28px 0 10px}
.week-intro h3{font:800 var(--fs-h2)/1.15 var(--display);letter-spacing:-.01em;margin:0}
.week-intro p{color:var(--muted);margin:4px 0 0}
.part-note{margin:28px 0 0}

/* day rows */
.day{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);margin:10px 0;scroll-margin-top:16px}
.day > summary{list-style:none;display:grid;grid-template-columns:22px 56px 1fr auto;align-items:center;gap:12px;padding:var(--pad-compact) 18px;cursor:pointer}
.day > summary::-webkit-details-marker{display:none}
.day .num{color:var(--muted)}
.day .t{font-weight:600;line-height:1.3}
.day .meta{font-size:var(--fs-sm);color:var(--muted);display:flex;align-items:center;gap:10px}
.check{width:22px;height:22px;border-radius:var(--r-sm);border:1.5px solid #c3ccbc;background:var(--card);padding:0;display:grid;place-items:center;transition:background .15s,border-color .15s}
.check:hover{border-color:var(--accent)}
.check::after{content:'';width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0;transition:opacity .15s}
.day.done{background:var(--paper)}
.day.done .check{background:var(--accent);border-color:var(--accent)}
.day.done .check::after{opacity:1}
.day.done .t{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--muted)}
.day.done .num{opacity:.7}
.chev{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s;margin:0 2px 0 4px}
.day[open] .chev{transform:rotate(-135deg) translate(-2px,-1px)}
.day[open] > summary{border-bottom:1px solid var(--line)}

/* lesson body */
.body{padding:var(--pad-card)}
.body > p.intro{margin:0 0 18px}
.steps{counter-reset:step}
.step{counter-increment:step;position:relative;padding-left:38px;margin:14px 0}
.step::before{content:counter(step);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--paper);font-size:var(--fs-sm);font-weight:600;display:grid;place-items:center}
.tab-label{margin:22px 0 4px;color:var(--accent)}
.prose{margin:16px 0}
.note{background:var(--soft);border-radius:var(--r-md);padding:var(--pad-compact);font-size:var(--fs-sm);margin:16px 0}
.note b{font-weight:600}
.prompt{border:1px solid var(--line);background:var(--card);border-radius:var(--r-md);margin:12px 0 16px 38px;overflow:hidden}
.prompt-top{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.prompt-top span{color:var(--accent-ink)}
.prompt-top button{border:0;background:var(--ink);color:#fff;font-weight:600}
.prompt pre{margin:0;padding:14px;white-space:pre-wrap;word-wrap:break-word;font:var(--fs-sm)/1.7 var(--mono)}
mark{border-radius:4px;padding:0 1px;color:inherit}
mark.fill{background:var(--card);box-shadow:inset 0 -2px 0 var(--accent);font-weight:600}
mark.fill.empty,mark.blank{background:var(--hl);box-shadow:none;font-weight:400}
.takeaway{margin:26px 0 8px}
.takeaway span{display:block;color:var(--accent);margin-bottom:10px}
.takeaway p{margin:0;font:italic var(--fs-lg)/1.75 var(--serif)}
.takeaway .hl{background:var(--hl);padding:3px 7px;border-radius:var(--r-sm);-webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:none;font-weight:400}
.why{margin:6px 0 20px}
.why summary{list-style:none;cursor:pointer;color:var(--accent);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.why summary::-webkit-details-marker{display:none}
.why summary::before{content:'';width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
.why[open] summary::before{transform:rotate(90deg)}
.why p{margin:10px 0 0 2px;padding:2px 0 2px 16px;border-left:2px solid var(--lime);line-height:1.65}
.complete{width:100%;margin-top:6px}
.day.done .complete{background:transparent;color:var(--accent);border:1px solid var(--accent)}

/* badges, workshop */
.badges{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.badge-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.badge-item b{font-weight:600}
.badge-item canvas{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--line)}
.badge-item .btn{margin-top:4px}
#workshop .pill{font-size:var(--fs-xs);font-weight:600;padding:3px 10px;margin-bottom:10px}
.ws-format{border:0;padding:0;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ws-format legend{font-weight:600;font-size:var(--fs-sm);margin-bottom:6px;padding:0}
.ws-format label{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1.5px solid transparent;border-radius:var(--r-md);padding:12px;cursor:pointer;font-size:var(--fs-sm);margin:0}
.ws-format label:has(input:checked){border-color:var(--ink)}
.ws-format input{margin:3px 0 0;accent-color:var(--ink)}
.ws-format span{font-weight:400;color:var(--muted)}
.ws-format b{display:block;font-weight:600;color:var(--ink)}
[data-team-fields]{align-items:flex-start}
.ws-actions{display:flex;align-items:center;gap:16px;margin-top:12px}
.ws-done{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.65);border-radius:var(--r-md);padding:14px 16px;margin-top:4px;outline:none}
.ws-tick{flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:800;font-size:15px}
.ws-done b{display:block;font:800 var(--fs-lg)/1.3 var(--display)}
.ws-done p{margin:2px 0 0;font-size:var(--fs-sm)}
.ws-note{margin:8px 0 0;font-size:var(--fs-xs);color:var(--ink);opacity:.7}
#workshop summary{cursor:pointer;list-style:none}
#workshop summary::-webkit-details-marker{display:none}
#workshop details[open] > summary{display:none}

/* FAQ: quiet label, label-style groups, chevron rows */
.faq{margin:64px 0 0}
.faq h2{font:400 var(--fs-sm)/1 var(--body);color:var(--muted);margin:0 0 22px}
.faq h4{margin:28px 0 6px;opacity:.8}
.faq h2 + h4{margin-top:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 8px;margin:0 -8px;border-radius:var(--r-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.faq details[open] > summary::after{transform:rotate(-135deg) translate(-2px,-1px)}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.faq details p{margin:2px 0 14px;color:var(--muted);line-height:1.75}
footer{padding:48px 20px 40px;font-size:var(--fs-sm);color:var(--muted);text-align:center}

/* dialogs & toast */
.dialog{border:0;border-radius:var(--r-card);padding:24px;max-width:520px;width:calc(100% - 32px);box-shadow:0 20px 60px rgba(0,0,0,.2)}
.dialog::backdrop{background:rgba(25,45,36,.45)}
.dialog h2{font:800 var(--fs-h2)/1.15 var(--display);margin:0 0 6px}
.dialog p{color:var(--muted)}
.dialog .close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:24px;line-height:1}
.dialog textarea{min-height:150px;font-size:var(--fs-sm)}
.share-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#toast{display:none;position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-md);font-size:var(--fs-sm);z-index:20;max-width:calc(100% - 32px)}

@media (max-width:600px){
  .hero{padding:40px 0 20px}
  .hero h1{font-size:54px}
  .mascot{width:92px}
  .hide-sm{display:none}
  .pill{font-size:var(--fs-xs);white-space:nowrap;padding:6px 12px}
  .row{flex-direction:column;align-items:stretch}
  .plan-head{flex-direction:column;align-items:flex-start;gap:2px}
  .part-heads .sep{display:none}
  .part-heads .pn{display:block}
  .day > summary{grid-template-columns:22px 1fr auto;grid-template-areas:'c n m' 'c t m';gap:2px 12px;padding:var(--pad-compact) 16px}
  .day .check{grid-area:c}
  .day .num{grid-area:n}
  .day .t{grid-area:t}
  .day .meta{grid-area:m}
  .body{padding:18px 16px}
  .prompt,.profile-nudge{margin-left:0}
    .badges{grid-template-columns:1fr}
  .profile .pf:first-child::after{content:none}
  .badge-item canvas{max-width:280px}
  .checkin-form{flex-wrap:wrap}
  .checkin-form input[name=where]{flex-basis:100%}
  .checkin-form input[type=date]{flex:1;width:auto}
}

/* continue bar (returning learners) */
.count{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.to-badge{color:var(--accent);font-weight:600}
.badge-actions{display:flex;gap:8px;margin-top:4px}
.badge-actions .btn{flex:1}

/* celebration + share sheet */
.celebrate-dialog{max-width:460px;max-height:calc(100vh - 32px);padding:0;overflow:auto;background:var(--paper)}
.celebrate,.share-sheet{position:relative;padding:28px 24px 22px}
.celebrate{text-align:center}
.celebrate .eyebrow{display:block;color:var(--accent);margin-bottom:6px}
.celebrate h2{font:800 32px/1.05 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.celebrate .lead{font:italic var(--fs-lg)/1.45 var(--serif);color:var(--ink);margin:0 auto 12px;max-width:340px}
.celebrate canvas{width:220px;height:220px;display:block;margin:0 auto 6px;border-radius:var(--r-md)}
.celebrate-name{max-width:280px;margin:0 auto 10px;text-align:left;font-size:var(--fs-sm)}
.stats{display:flex;justify-content:center;gap:24px;margin:6px 0 16px;font-size:var(--fs-sm);color:var(--muted)}
.stats b{display:block;font:800 var(--fs-h2)/1.1 var(--display);color:var(--ink)}
.celebrate-actions{display:flex;flex-direction:column;gap:8px}
.celebrate .next{margin-top:14px;font-size:var(--fs-sm)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:8px;height:12px;border-radius:2px;animation:fall 3s linear 2 forwards}
@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(720px) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}}
.burst{position:fixed;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:1000;box-shadow:0 0 0 1px rgba(25,45,36,.15)}
.share-sheet h2{font:800 var(--fs-h2)/1.15 var(--display);margin:0 0 4px}
.share-sheet > p{margin:0 0 16px;font-size:var(--fs-sm);color:var(--muted)}
.stepper{list-style:none;counter-reset:st;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.stepper li{counter-increment:st;position:relative;padding-left:38px}
.stepper li::before{content:counter(st);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font:600 var(--fs-sm)/26px var(--body);text-align:center}
.stepper b{display:block;margin:2px 0 8px}
.stepper textarea{min-height:0;font-size:var(--fs-sm);line-height:1.5;margin-bottom:8px}

/* workshop: the lime highlight card */
#workshop{background:var(--lime);border-color:transparent}
#workshop > p{color:var(--ink)}
#workshop .pill{background:var(--card)}
#workshop .link{color:var(--ink);text-decoration:underline}

/* continue row: top of the check-in card, or its own card when no check-in is booked */
/* locked badges */
.badge-item.locked canvas{opacity:.55;filter:grayscale(.5)}
.badge-item.locked b{color:var(--muted)}

/* Screened mentions: lesson aside, maker card, celebration P.S. */
.real-world{background:var(--soft);border-radius:var(--r-md);padding:var(--pad-compact);font-size:var(--fs-sm);margin:16px 0}
.real-world b{display:block;font:600 var(--fs-xs)/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.real-world a,.celebrate-ps a{color:var(--accent);font-weight:600;text-decoration:none}
.teammate{display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:var(--soft);border-radius:var(--r-card);padding:24px;margin:40px 0 0}
.tm-pair{display:flex;align-items:flex-end;gap:6px;flex:none}
.tm-badge{display:block;height:auto}
.tm-plus{font:800 26px/1 var(--display);margin:0 2px 60px}
.tm-text{flex:1 1 260px}
.teammate h2{font:800 22px/1.2 var(--display);letter-spacing:-.01em;margin:0 0 6px}
.teammate p{margin:0 0 14px;font-size:15px}
@media (max-width:560px){.tm-pair{margin:0 auto}}
.celebrate-ps{margin:18px 0 0;font-size:var(--fs-sm);color:var(--muted)}
@media (max-width:560px){
    }