/* Kairos website look, 2026-10-30 (David chose "simple and playful", Duolingo-style).
   Loaded after styles.css and overrides it: one rounded font, chunky 3D buttons, bordered cards,
   white space, big art, short sections. Blue's greeter and the fly-by keep their own styles. */
@font-face{font-family:'Nunito Kairos';src:url(/assets/fonts/nunito.woff2) format('woff2');font-weight:200 1000;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --font:'Nunito Kairos',ui-rounded,'SF Pro Rounded','Arial Rounded MT Bold',system-ui,sans-serif;
  --body:var(--font);--heading:var(--font);
  --ink:#3c4a5c;--soft:#5b6a7c;--line:#e5e9ef;--line-dark:#d3dae3;
  --blue:#1a72cc;--blue-dark:#1666b8;--sky:#e8f4ff;
  --yellow:#ffcf3f;--yellow-dark:#e0a800;
  --green:#58b51f;--green-dark:#367a10;--leaf:#eef9e4;
  --navy:#26405f;--muted:var(--soft);
}
body{font-family:var(--font);color:var(--ink);font-size:17px}
h1,h2,h3,h4{font-family:var(--font);font-weight:900;letter-spacing:-.3px;color:var(--navy)}
h2{font-size:40px;line-height:1.15}
p{color:var(--soft)}
.eyebrow{font-weight:900;letter-spacing:1.4px;color:var(--blue);font-size:13px}
.blue-word{color:var(--blue)}

/* Buttons: chunky, rounded, a solid "ledge" underneath that presses down */
.button{font-family:var(--font);font-weight:900;text-transform:uppercase;letter-spacing:.8px;font-size:16px;border-radius:16px;min-height:52px;padding:14px 26px;gap:12px;transition:transform .08s,box-shadow .08s,filter .15s}
.button.yellow{background:var(--yellow);color:#4a3a00;box-shadow:0 5px 0 var(--yellow-dark)}
.button.yellow:hover{transform:none;filter:brightness(1.05);box-shadow:0 5px 0 var(--yellow-dark)}
.button:active{transform:translateY(5px)!important;box-shadow:0 0 0 transparent!important}
.ghost-button,.button.ghost-button{background:#fff;color:var(--blue);border:2px solid var(--line-dark);box-shadow:0 4px 0 var(--line-dark)}
.ghost-button:hover{transform:none;background:#f7fafd;box-shadow:0 4px 0 var(--line-dark)}
html[lang=ko] .button{text-transform:none;letter-spacing:0}

/* Header: quiet, white, one bright button */
.site-header{background:#fff;border-bottom:2px solid var(--line);backdrop-filter:none}
.nav-wrap{height:76px}
.brand{font-weight:900;color:var(--blue)}
.brand small{color:var(--soft)}
.brand-mark{background:var(--blue)}
.site-header nav{gap:22px;font-size:15px;font-weight:800}
.site-header nav a{color:var(--soft)}
.site-header nav a:hover{color:var(--blue)}
html[lang=ko] .site-header nav{text-transform:none;letter-spacing:0}
.nav-cta{min-height:44px;padding:10px 18px;font-size:14px}
.lang-switch{border:2px solid var(--line);background:#fff;box-shadow:none}
.lang-switch [aria-pressed=true]{background:var(--blue)}
.lang-bar{background:#fff;border-bottom:2px solid var(--line)}

/* Hero: big Blue on the left, words and two buttons on the right, lots of air */
.hero{background:#fff}
.hero-grid{grid-template-columns:1.05fr .95fr;gap:72px;padding-top:72px;padding-bottom:80px}
.hero-art{order:-1;padding:0}
.world-card{transform:none;border:0;box-shadow:none;background:transparent;border-radius:0;overflow:visible}
.world-picture{height:auto;aspect-ratio:1/1;border-radius:36px;border:2px solid var(--line);border-bottom-width:6px}
.world-picture:after{inset:62% 0 0}
.world-caption{left:0;right:0;bottom:12%;text-align:center}
.world-caption span{letter-spacing:1.6px;font-weight:800}
.world-caption strong{font-size:22px;font-weight:900}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.product-lockup{justify-content:center}
.product-lockup strong{font-weight:900}
.grade-badge{background:var(--leaf);color:var(--green-dark);border:2px solid #d4efbd;font-weight:900}
.grade-badge span{color:var(--green)}
h1{font-size:48px;letter-spacing:-.8px;line-height:1.12;margin:18px 0 18px}
.hero h1 .blue-word{color:var(--blue)}
.underlined{color:var(--green-dark)}
.underlined:after{display:none}
.hero-copy>.hero-description{font-size:18px;color:var(--soft);max-width:440px;margin-left:auto;margin-right:auto}
.hero-actions{flex-direction:column;align-items:stretch;gap:14px;width:100%;max-width:360px;margin-top:22px}
.hero-actions .button{width:100%}
.hero-blue{align-self:center;background:transparent;border:0;box-shadow:none;color:var(--blue);font-weight:900;text-transform:uppercase;letter-spacing:.8px;font-size:14px;min-height:44px}
.hero-notes{justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--soft)}
.hero-notes svg{color:var(--green)}
.hero-art .flight-controls{margin-top:28px}
.flight-controls button{border:2px solid var(--line-dark);border-bottom-width:4px;color:var(--blue);border-radius:14px;font-weight:900;font-size:13px}
.film-status{color:var(--soft)}

/* Shared section rhythm: thin dividers, centred headings, no navy slabs */
.section{padding-top:88px;padding-bottom:88px}
.section-heading h2{font-size:40px}
.section-heading p{color:var(--soft);font-size:18px}
.section-heading .eyebrow{color:var(--blue)}
main>section+section{border-top:2px solid var(--line)}

/* Sol & Coco film: words beside the picture */
.discovery-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px 64px;align-items:center}
.discovery-section .section-heading{text-align:left;margin:0;grid-column:1;grid-row:1}
.discovery-section{grid-template-rows:auto auto auto 1fr}
.discovery-cinema{grid-column:2;grid-row:1/5;border-radius:32px;border:2px solid var(--line);box-shadow:0 6px 0 var(--line)}
.discovery-section>.flight-controls{grid-column:1;justify-content:flex-start;margin-top:0}
.discovery-section>.film-status{grid-column:1;text-align:left}
.discovery-invitation{grid-column:1;text-align:left;font-size:17px;align-self:start;margin:18px 0 0;max-width:none}
.discovery-label{font-weight:900}

/* The flock: four bright cards on white */
.flock-section{background:#fff;color:var(--ink)}
.flock-section .section-heading .eyebrow{color:var(--blue)}
.flock-section .section-heading h2{color:var(--navy)}
.flock-section .section-heading p{color:var(--soft)}
.flock-grid{gap:20px}
.flock-card{background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:24px;padding:22px 18px 24px}
.flock-card.professor{background:#fff8ec;border-color:#f3dfb8}
.flock-card.sol{background:#f1fae6;border-color:#d4ecbb}
.flock-card.blue{background:#ecf6ff;border-color:#c9e2f8}
.flock-card.coco{background:#f6f7f9;border-color:#e1e5ea}
.flock-card h3{color:var(--navy)!important;font-size:24px}
.flock-card p{color:var(--soft)}
.flock-role{color:var(--soft);font-weight:900}
.flock-hello{background:#fff;border:2px solid var(--line-dark);border-bottom-width:4px;color:var(--blue);border-radius:14px;font-weight:900}
.flock-hello:hover{background:#f7fafd}
.flock-message{color:var(--soft)}
.portrait-disc{background:#fff!important}

/* Real game screens: one picture and one sentence per row, alternating sides */
.explore-section{background:#fff}
.shots{display:grid;grid-template-columns:1fr;gap:56px;max-width:1040px;margin-left:auto;margin-right:auto}
.shots .shot{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.shots .shot:nth-child(2){grid-template-columns:1fr 1.25fr}
.shots .shot:nth-child(2) .shot-frame{order:2}
.shots .shot-frame,.report-shot .shot-frame{border:2px solid var(--line);border-bottom-width:6px;border-radius:24px;box-shadow:none;padding:0;overflow:hidden}
.shots .shot figcaption{font-size:18px;color:var(--soft)}
.shots .shot figcaption strong{font-size:28px;font-weight:900;color:var(--navy);margin-bottom:8px;line-height:1.2}
.shot-num{background:var(--yellow);color:#4a3a00;font-weight:900}
.loop-step{border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;box-shadow:none}
.loop-step strong{font-weight:900}

/* Grown-ups: grade lists fold away, cards with ledges */
.parents-heading .eyebrow{color:var(--blue)}
.skills-card{border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;background:#fff;box-shadow:none}
.skills-card summary h3{font-weight:900}
.skills-grade{background:var(--blue);border-radius:10px}
.skills-toggle{border:2px solid var(--line-dark);background:#fff;color:var(--blue)}
.parent-steps>div{background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:20px;padding:24px}
.step-number{background:var(--yellow);color:#4a3a00;font-weight:900}
.report-preview{background:var(--sky);border:2px solid #d5e9fb;border-radius:28px;box-shadow:none}
.report-copy h3{font-size:26px}
.check-list svg{color:var(--green)}

/* Quick challenge */
.try-section{background:var(--sky)}
.challenge-card{background:#fff;border:2px solid var(--line);border-bottom-width:6px;border-radius:28px;box-shadow:none}
.grade-tabs{background:#f1f4f8;border-radius:16px}
.grade-tabs button{font-weight:900;border-radius:12px}
.grade-tabs [aria-selected=true]{color:var(--blue);box-shadow:0 3px 0 var(--line-dark)}
.answers button{font-family:var(--font);font-weight:900;border:2px solid var(--line-dark);border-bottom-width:5px;border-radius:16px;box-shadow:none;color:var(--navy);min-height:60px;font-size:24px}
.answers button:not(:disabled):hover{transform:none;background:#f7fafd;border-color:#b9cde3}
.answers button:not(:disabled):active{transform:translateY(3px);border-bottom-width:2px}
.answers button.correct{background:#e9f8dc;border-color:var(--green);color:var(--green-dark)}
.answers button.retry{background:#fff6d6;border-color:#f0cf62}
.challenge-finish{background:#e9f8dc;border-radius:16px;color:var(--green-dark);font-weight:700}
.challenge-stars{color:#dfe5ec}

/* Faith: warm, same shapes */
.faith-section{border:0}
.verse-card{transform:none;border:2px solid #efdfb6;border-bottom-width:6px;border-radius:24px;box-shadow:none}
.faith-options button{border:2px solid #e8d6a6;border-bottom-width:4px;border-radius:14px;font-weight:900}

/* Questions */
#faq{padding-top:88px}
.faqs details{border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:0 20px;margin-bottom:12px;background:#fff}
.faqs summary{font-weight:900;color:var(--navy)}

/* Closing: one bright band */
.closing-section{background:var(--blue);border-top:0!important}
.closing-section .eyebrow{color:#d6ebff!important}
.closing-section h2,.closing-section h2 span{color:#fff}
.closing-section p{color:#e3f1ff}

/* Footer */
.site-footer{border-top:0}
.sf-nav a{color:var(--soft);font-weight:800}
.sf-nav a:hover{color:var(--blue)}

@media(max-width:1100px){
  .hero-grid{gap:44px}
  .nav-wrap{gap:16px}
  .site-header nav{gap:14px;font-size:14px}
  .nav-cta svg{display:none}
  .nav-cta{padding:10px 14px}
  h1,.hero h1{font-size:38px}
  .shot{gap:32px}
}
@media(max-width:850px){
  .site-header nav{gap:12px;font-size:13px}
  .nav-cta{letter-spacing:0;font-size:13px}
  .hero-grid{grid-template-columns:1fr;padding-top:36px;padding-bottom:56px;gap:28px}
  .hero-art{max-width:420px;width:100%;margin:0 auto}
  h1,.hero h1{font-size:38px}
  .discovery-section{grid-template-columns:1fr}
  .discovery-section .section-heading,.discovery-cinema,.discovery-section>.flight-controls,.discovery-section>.film-status,.discovery-invitation{grid-column:1;grid-row:auto;text-align:center;justify-content:center}
  .shots .shot,.shots .shot:nth-child(2){grid-template-columns:1fr;gap:18px}
  .shots .shot:nth-child(2) .shot-frame{order:0}
  .shots .shot figcaption strong{font-size:22px}
  .discovery-section{grid-template-rows:none}
  .hero-art{order:0}
}
@media(max-width:650px){
  .nav-wrap{height:68px}
  .nav-wrap{gap:8px}
  .brand{font-size:24px}
  .nav-cta{font-size:13px;letter-spacing:0;padding:8px 11px;min-height:44px;gap:6px}
  .nav-cta svg{display:none}
  .hero-art .flight-controls{margin-top:18px}
  #faq{padding-top:60px}
  h2,.section-heading h2{font-size:30px}
  h1,.hero h1{font-size:32px;letter-spacing:-.4px}
  .hero-art{max-width:300px}
  .hero-copy>.hero-description{font-size:16px}
  .section{padding-top:60px;padding-bottom:60px}
  .world-caption strong{font-size:17px}
  .answers button{min-height:56px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){.button:active,.answers button:active{transform:none!important}}

/* Privacy page (/privacy/): same font, buttons and bordered cards */
.doc-page{background:#fff}
.doc{max-width:780px}
.doc h1{font-size:48px;letter-spacing:-.6px;color:var(--blue)}
.doc h2{font-size:26px;letter-spacing:-.2px;margin:40px 0 12px;padding-top:28px;border-top:2px solid var(--line)}
.doc p,.doc li{color:var(--ink);font-size:18px}
.doc-lead{color:var(--soft)!important}
.doc-date{display:inline-block;padding:4px 12px;border:2px solid #d4efbd;border-radius:999px;background:var(--leaf);color:var(--green-dark)!important;font-weight:800}
.doc ul{list-style:none;padding:0}
.doc ul li{position:relative;padding:14px 18px 14px 46px;margin:10px 0;border:2px solid var(--line);border-bottom-width:4px;border-radius:16px;background:#fff}
.doc ul li:before{content:'';position:absolute;left:18px;top:21px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 2px 0 var(--yellow-dark)}
.doc-links a{font-weight:800;color:var(--soft)}
.doc-links a:hover{color:var(--blue)}
@media(max-width:650px){.doc h1{font-size:36px}.doc p,.doc li{font-size:17px}}

/* ==== one design from the home page to the game's credits (David, 2026-10-30): the same tokens as play/css/duo.css ==== */
:root{
  --ground:#f4f9ff;--check:#378200;--check-dark:#285e00;--gentle:#fff4d6;
  --professor:#f97316;--professor-bg:#fff7ed;--sol:#10b981;--sol-ink:#047857;--sol-bg:#ecfdf5;--sky-accent:#0ea5e9;--sky-ink:#0369a1;--blue-bg:#f0f9ff;--coco:#8b5cf6;--coco-ink:#6d28d9;--coco-bg:#f5f3ff;--professor-ink:#c2410c;
}
body{background:var(--ground)}
.hero{background:linear-gradient(180deg,#cfe8ff 0%,#e6f3ff 38%,var(--ground) 100%)}
.flock-section:not(.closing-section),.explore-section,.doc-page,.faith-section{background:var(--ground)}
.discovery-section,.parents-section,.faq-section{background:transparent}
.button,.ghost-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-height:56px;height:auto;padding-inline:1.25rem;background-image:none;text-shadow:none}
/* each companion keeps its own colour, as in the game's speech bubbles: 3px accent border, pastel inside, ink words */
.flock-card.professor{border-color:var(--professor);background:var(--professor-bg)}
.flock-card.sol{border-color:var(--sol);background:var(--sol-bg)}
.flock-card.blue{border-color:var(--sky-accent);background:var(--blue-bg)}
.flock-card.coco{border-color:var(--coco);background:var(--coco-bg)}
.flock-card{border-width:3px;border-bottom-width:6px}
.flock-card .flock-role{color:var(--navy)}
/* the faith section speaks the same colours: ink heading with a blue line, a white verse card, the same tactile chips */
.faith-copy h2{color:var(--navy)}
.faith-copy h2 span{color:var(--blue)}
.faith-copy .eyebrow{color:var(--blue)}
.verse-card{background:#fff;border-color:var(--line)}
.verse-card cite,.verse-card .eyebrow,.verse-card small{color:var(--soft)}
.faith-options button{background:#fff;border-color:var(--line-dark);color:var(--blue);min-height:48px}
.faith-options button[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow-dark);color:#4a3a00}
/* the Bible moment is Coco's, as in the game's Verse of the Day: lavender card, ink words, the same tactile chips */
.faith-copy .eyebrow,.faith-section .eyebrow{color:var(--blue)}
.faith-copy>p,.faith-copy>.faith-invitation,.faith-list li,.faith-versions{color:var(--ink)}
.faith-list strong{color:var(--navy)}
.faith-list svg{stroke:var(--coco)}
.faith-spark{color:var(--yellow-dark)}
.verse-card{background:var(--coco-bg);border:3px solid var(--coco);border-bottom-width:6px}
.verse-card>.eyebrow,.verse-action>span{color:var(--coco-ink)}
.verse-card blockquote{color:var(--navy);font-weight:800}
.verse-card cite,.verse-action p{color:var(--ink)}
.verse-action{border-top:2px dashed #ddd6fe}
.faith-options button[aria-pressed=false]{color:var(--blue)}
.faith-options button[aria-pressed=true]{color:#4a3a00}
.faith-section .eyebrow,.faith-copy>.eyebrow{color:var(--blue)!important}
/* the quick challenge's first clue lights up one group (UX audit, 2026-10-31) */
.math-visual .spot{outline:3px solid #f0b400;outline-offset:4px;border-radius:12px;background-color:#fff6d6}
.fraction-bar i.spot{outline-offset:1px}

/* ==== Design review 2026-10-31 (Build 2.24.2): fixes from the iPad, iPhone and desktop look-through ==== */
/* "How practice works": the number sits above the heading on every screen, never on top of the words */
.parent-steps>div,.parent-steps>div:first-child{padding:24px}
.parent-steps .step-number{position:static;margin:0 0 14px}
/* the faith section's words use the kit's ink, not the old olive */
#faith .faith-copy>p,#faith .faith-list li,#faith .faith-versions,#faith .faith-copy>.faith-invitation{color:var(--ink)}
/* the films' status lines are for screen readers; the button already says play or pause */
.film-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the four grades: an even two-by-two grid, each card folding open on its own */
.skills-grid{align-items:start}
.skills-grid .skills-card.wide{grid-column:auto}
@media(min-width:901px){.skills-grid .skills-card.wide ol{columns:1}}
/* practice, seeds, nest, worlds: one line on wide screens */
@media(min-width:1100px){.loop{flex-wrap:nowrap;max-width:none}.loop-step{padding:10px 16px;white-space:nowrap}}
/* questions: the heading and the Professor stay in view while the answers scroll */
.faq-section>div:first-child{align-self:start}
.faq-prof{display:block;width:220px;height:auto;margin-top:22px;filter:drop-shadow(0 10px 8px #26405f22)}
@media(min-width:851px){.faq-section>div:first-child{position:sticky;top:110px}}
@media(max-width:850px){.faq-prof{display:none}}
/* phones: the flock as four short rows (picture beside the words) instead of four tall posters */
@media(max-width:650px){
  #flock .flock-grid{max-width:none;gap:14px}
  #flock .flock-card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:start;text-align:left;padding:16px 16px 18px;border-bottom-width:6px}
  #flock .flock-card:last-child{padding-bottom:18px;border-bottom-width:6px}
  #flock .flock-portrait{grid-column:1;grid-row:1/span 4;width:96px;height:118px;margin:0;align-self:center}
  #flock .flock-portrait img{height:112px}
  #flock .portrait-disc{width:86px;height:86px;bottom:8px}
  #flock .flock-role,#flock .flock-card h3,#flock .flock-card>p,#flock .flock-hello{grid-column:2}
  #flock .flock-card h3{font-size:22px;margin:2px 0 4px}
  #flock .flock-card>p{font-size:15px;line-height:1.5;max-width:none;margin:0 0 12px}
  #flock .flock-hello{margin:0;justify-self:start;gap:10px;padding:8px 14px}
}
/* small phones: "Learning software" under the logo gives way so the Play button and the menu always fit (Portuguese ran 13px wide) */
@media(max-width:430px){.site-header .brand small{display:none}.nav-wrap{gap:8px}}
/* contrast (WCAG AA 4.5:1 for small text): --soft is darker (#5B6A7C), small blue words use the darker blue,
   and the closing band is the darker blue so its small white lines read clearly. Big blue headline words keep the bright blue. */
:root{--blue-text:var(--blue-dark)}
.eyebrow,.section-heading .eyebrow,.parents-heading .eyebrow,.faith-section .eyebrow,.faith-copy>.eyebrow,.ghost-button,.button.ghost-button,.flock-hello,.flight-controls button,.faith-options button[aria-pressed=false],.grade-tabs [aria-selected=true],.inline-link,.skills-toggle,.site-header nav a:hover,.sf-nav a:hover{color:var(--blue-text)!important}
.closing-section{background:var(--blue-dark)}
.closing-section p{color:#fff}
.closing-section .eyebrow,.closing-section .section-heading .eyebrow{color:#e3f1ff!important}
#flock .flock-role{color:var(--navy)}
#flock .section-heading p{color:var(--soft)}
.skills-grade{background:var(--blue-dark)}
.faqs summary span{color:var(--soft)}
.doc-date{color:#2f6b10!important}

/* ==== Design pass 2026-10-31 (Build 2.24.3): the tutor's help ladder up front, the speaking helper in the sample ==== */
/* section headings speak for themselves (no small label above them) and wrap evenly */
h1,h2,h3,.section-heading h2{text-wrap:balance}
h2:has(.blue-word),h2:has(span){text-wrap:wrap}
.section-heading h2,.parents-heading h2,.faith-copy h2,.faq-section h2,.last-call h2{margin-top:0}
/* browser surfaces in the kit's colours */
::selection{background:#ffe58a;color:var(--navy)}
html{scrollbar-color:#b9cde3 var(--ground);caret-color:var(--blue)}
.answers button,.shot-num,.skills-grade,.step-number,.ladder-num{font-variant-numeric:tabular-nums}
a:focus-visible,button:focus-visible,summary:focus-visible,[role=tab]:focus-visible{outline-color:var(--blue-dark)}

/* "Never stuck on a wrong answer": the flock in the order they help, joined by arrows (wide screens) or a path (phones) */
#flock .ladder{list-style:none;padding:0;margin-top:8px;margin-bottom:0;counter-reset:none}
#flock .ladder-step{position:relative;display:flex}
#flock .ladder-step>.flock-card{flex:1;width:100%}
#flock .flock-role{display:inline-flex;align-items:center;gap:8px;letter-spacing:1.2px}
.ladder-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--line-dark);color:var(--navy);font-size:14px;font-weight:900;letter-spacing:0;line-height:1}
.flock-card.professor .ladder-num{border-color:var(--professor)}
.flock-card.sol .ladder-num{border-color:var(--sol)}
.flock-card.blue .ladder-num{border-color:var(--sky-accent)}
.flock-card.coco .ladder-num{border-color:var(--coco)}
@media(min-width:1101px){
  #flock .ladder{gap:40px}
  #flock .ladder-step:not(:last-child)::after{content:'';position:absolute;top:50%;right:-26px;width:12px;height:12px;border-top:4px solid var(--line-dark);border-right:4px solid var(--line-dark);border-radius:2px;transform:translateY(-50%) rotate(45deg)}
}
@media(max-width:650px){
  #flock .ladder{gap:18px}
  /* a short path from one helper to the next, under the pictures */
  #flock .ladder-step:not(:last-child)::after{content:'';position:absolute;left:62px;bottom:-18px;width:4px;height:18px;border-radius:4px;background:var(--line-dark)}
}
.ladder-twin{display:flex;align-items:center;justify-content:center;gap:12px;max-width:640px;margin:32px auto 0;color:var(--navy);font-size:18px;font-weight:800;line-height:1.45;text-align:left}
.ladder-twin svg{width:34px;height:34px;padding:6px;border-radius:50%;background:var(--leaf);border:2px solid #d4efbd;color:var(--green-dark);stroke-width:3}
#flock .flock-message{margin-top:14px}
@media(max-width:650px){.ladder-twin{font-size:16px;margin-top:24px;align-items:flex-start}}

/* the sample question: the helper who is talking, as a speech bubble in that character's colours */
.coach{display:flex;align-items:flex-start;gap:14px;margin:18px 0 6px;padding:14px 18px;border:3px solid var(--professor);border-radius:20px;background:var(--professor-bg)}
.coach[data-coach=sol]{border-color:var(--sol);background:var(--sol-bg)}
.coach[data-coach=coco]{border-color:var(--coco);background:var(--coco-bg)}
.coach-face{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:#fff;border:2px solid var(--line);overflow:hidden}
.coach-face img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.coach[data-coach=professor] .coach-face img{object-fit:contain;transform:scale(2.3);transform-origin:50% 14%}
.coach-words{min-width:0}
.coach-name{display:block;font-size:13px;font-weight:900;letter-spacing:1.1px;text-transform:uppercase;color:var(--professor-ink);margin:2px 0 2px}
.coach[data-coach=sol] .coach-name{color:var(--sol-ink)}
.coach[data-coach=coco] .coach-name{color:var(--coco-ink)}
html[lang=ko] .coach-name{text-transform:none;letter-spacing:0}
.coach #math-feedback{margin:0;color:var(--ink);font-size:17px;font-weight:700;line-height:1.5}
@media(max-width:650px){.coach{padding:12px 14px;gap:12px}.coach-face{flex-basis:48px;width:48px;height:48px}.coach #math-feedback{font-size:16px}}
@media(prefers-reduced-motion:no-preference){.coach{transition:background-color .2s,border-color .2s}}