/* Public Skill Boost demos reuse the authenticated player's sb-* markup.
   Keep this bounded subset aligned with the owning rules in learning-zone.css. */
/* landing.css is linked after the page @section Head, so every rule below that
   competes with it is scoped through .landing-version-2 (body class) to win on
   specificity rather than on order. */
/* Single-column centered hero: the tabbed format demo below carries the visuals.
   landing.css sizes the hero for a narrow grid column (h1 14ch, kicker 30ch) – lift
   those caps here so the headline breaks into two balanced lines instead of four. */
.landing-version-2 .lv2-hero--fill .lv2-stagger { max-width:820px; margin-inline:auto; text-align:center; }
.landing-version-2 .lv2-hero--fill .lv2-stagger h1 { max-width:none; }
/* Deliberate two-line headline: dark opening line, accent line below it.
   fit-content keeps the box hugging the glyphs so the ::after underline stops at
   the text instead of stretching across the full 820px headline column. */
.landing-version-2 .lv2-hero--fill .lv2-stagger h1 .u { display:block; width:fit-content; margin-inline:auto; }
.landing-version-2 .lv2-hero--fill .lv2-kicker { max-width:none; justify-content:center; }
.landing-version-2 .lv2-hero--fill .lv2-hero-sub { max-width:54ch; margin-inline:auto; }
.landing-version-2 .lv2-hero--fill .lv2-hero-cta { justify-content:center; }
/* Checkmarks sit in one centered row instead of a left-hanging column. */
.landing-version-2 .lv2-hero--fill .lv2-hero-note { display:inline-flex; justify-content:center; margin:20px 12px 0; }
/* The flow grid is built for four steps; this page has three, so re-center the
   connector line on the first and last card and shorten its fill accordingly.
   Desktop only: below 981px landing.css switches the grid to 2/1 columns. */
@media (min-width:981px) {
    .landing-version-2 .lv2-steps--flow { grid-template-columns:repeat(3,1fr); }
    .landing-version-2 .lv2-steps--flow::before { left:16.66%; right:16.66%; }
    .landing-version-2 .lv2-steps--flow::after { left:16.66%; }
    .landing-version-2 .lv2-steps--flow.is-in::after { width:66.68%; }
}
.lz-v11 {
    --bg:#FDFAF5; --ink:#33304A; --ink-strong:#232139; --muted:#6E6A85;
    --faint:#9D99AE; --line:#EEE4D6; --line-2:#F2EADF; --coral-d:#ED5E2E;
    --peach:#FFD9C2; --r-pill:999px; --display:'Poppins',-apple-system,system-ui,sans-serif;
    --sans:'Mulish',-apple-system,system-ui,sans-serif;
}
.lz-v11 .sb-page { display:flex; width:100%; max-width:800px; margin-inline:auto; flex-direction:column; gap:16px; padding-bottom:24px; }
.lz-v11 .sb-card { padding:22px 24px 20px; border-radius:24px; background:#fff; box-shadow:0 8px 24px -14px rgba(80,60,40,.35); text-align:left; }
.lz-v11 .sb-divider { height:1px; margin:18px 0; background:var(--line-2); }
.lz-v11 .sb-label { color:var(--faint); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.lz-v11 .sb-blob { display:grid; width:40px; height:40px; flex:0 0 auto; place-items:center; border-radius:50% 50% 50% 12px; background:rgba(255,122,77,.12); color:var(--coral-d); font-size:18px; }
.lz-v11 .sb-blob--hero { background:linear-gradient(140deg,#FF9E6E,#ED5E2E); color:#fff; }
.lz-v11 .sb-card > .sb-section__head > .sb-blob { width:38px; height:38px; font-size:17px; }
.lz-v11 .sb-section__head { display:flex; align-items:center; gap:12px; }
.lz-v11 .sb-section__copy { flex:1 1 auto; min-width:0; }
.lz-v11 .sb-section__copy h2 { margin:0; font-family:var(--display); font-size:17px; font-weight:600; color:var(--ink-strong); }
.lz-v11 .sb-section__copy p { margin:2px 0 0; color:var(--muted); font-size:13px; }
.lz-v11 .sb-progress-line { padding:10px 0; border-bottom:1px solid var(--line-2); }
.lz-v11 .sb-progress-line:last-child { border-bottom:0; }
.lz-v11 .sb-progress-line .sb-label { display:block; }
.lz-v11 .sb-progress-line p { margin:4px 0 0; color:var(--ink-strong); font-size:15px; line-height:1.5; }
.lz-v11 .sb-panel { margin-top:12px; padding:14px 16px; border-radius:18px; }
.lz-v11 .sb-panel p { margin:4px 0 0; font-size:13.5px; line-height:1.6; }
.lz-v11 .sb-panel--coral { border:1px solid #FFD9C2; background:linear-gradient(135deg,rgba(255,158,110,.16),rgba(237,94,46,.1)); color:#C2412D; }
.lz-v11 .sb-panel--mint { background:rgba(143,224,190,.16); color:#1F7D57; }
.lz-v11 .sb-panel--mint strong { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
/* The home page pair picker sits above the format tabs. landing.css owns its look; only the
   spacing inside this card and the line under it belong here. */
/* The card is wider than the home page demo column, so the field keeps the width the
   dropdown has there instead of stretching across it, and sits on the right edge where it
   reads as a setting of the card rather than as its heading. */
.lz-v11 .dc-pick { justify-content:flex-end; margin-bottom:16px; }
.lz-v11 .dc-pick .dc-field { flex:0 1 250px; }
@media (max-width:640px) { .lz-v11 .dc-pick .dc-field { flex:1 1 100%; } }
.lz-v11 .sb-filters { display:flex; align-items:center; gap:4px; margin:0; padding:4px; overflow-x:auto; border:1px solid #F2EADF; border-radius:999px; background:#FDFAF5; scrollbar-width:none; }
.lz-v11 .sb-filters::-webkit-scrollbar { display:none; }
.lz-v11 .sb-filters__tab { flex:0 0 auto; padding:7px 15px; border:0; border-radius:999px; background:transparent; color:#6E6A85; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer; }
.lz-v11 .sb-filters__tab.is-active { background:rgba(255,122,77,.12); color:#ED5E2E; font-weight:800; }
.lz-v11 .sb-filters__tab:focus-visible { outline:2px solid #FF7A4D; outline-offset:2px; }
/* All demo panels share one grid cell, so the card keeps the height of the tallest
   panel and nothing jumps when tabs switch. Hidden panels stay in layout invisibly. */
.lz-v11 .sb-demo-panels { display:grid; }
/* Each of these carries a display of its own, which would otherwise beat the hidden attribute
   and leave the player and its stand-in plate on the card at the same time. */
.lz-v11 .sb-demo-panels[hidden], .lz-v11 .sb-filters[hidden], .lz-v11 .sb-demo-empty[hidden] { display:none; }
.lz-v11 .sb-demo-panels > [role="tabpanel"] { grid-area:1/1; min-width:0; display:flex; flex-direction:column; }
.lz-v11 .sb-demo-panels > [role="tabpanel"][hidden] { display:flex; visibility:hidden; }
/* The step fills the panel so its action row can sit on the bottom edge of the card. */
.lz-v11 .sb-demo-panels > [role="tabpanel"] > * { display:flex; flex:1 1 auto; flex-direction:column; }
.lz-v11 .sb-phrase { margin:6px 0 0; font-family:var(--display); font-size:27px; font-weight:500; line-height:1.3; color:var(--ink-strong); overflow-wrap:anywhere; }
.lz-v11 .sb-tag { flex:0 0 auto; padding:4px 10px; border-radius:var(--r-pill); background:var(--peach); color:var(--coral-d); font-size:11.5px; font-weight:700; letter-spacing:.05em; white-space:nowrap; }
.lz-v11 .sb-task { margin-top:16px; padding:15px 18px; border:1px solid #FFD9C2; border-radius:18px; background:#fff; box-shadow:0 14px 34px -20px rgba(237,94,46,.55); }
.lz-v11 .sb-task__head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.lz-v11 .sb-task__head > .sb-tag { order:1; }
.lz-v11 .sb-task__instruction { order:3; flex:1 1 100%; min-width:0; font-family:var(--display); font-size:19px; font-weight:600; color:var(--ink-strong); }
.lz-v11 .sb-answer { margin-top:16px; }
.lz-v11 .sb-answer .sb-label { display:block; }
.lz-v11 .sb-answer__field { width:100%; min-height:76px; margin-top:16px; padding:12px 15px; border:1px solid var(--line); border-radius:18px; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.6; }
.lz-v11 .sb-bubble-row { display:flex; align-items:flex-end; gap:10px; margin-top:12px; }
.lz-v11 .sb-bubble-row--user { justify-content:flex-end; }
.lz-v11 .sb-avatar { display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border:1px solid var(--line-2); border-radius:50%; background:#fff; color:var(--muted); font-size:11.5px; font-weight:800; }
.lz-v11 .sb-avatar--user { border-color:transparent; background:rgba(255,122,77,.1); color:var(--coral-d); }
.lz-v11 .sb-bubble { max-width:78%; padding:12px 16px; font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.lz-v11 .sb-bubble--partner { border-radius:18px 18px 18px 6px; background:var(--bg); color:var(--ink); }
.lz-v11 .sb-bubble--user { border:1px solid var(--peach); border-radius:18px 18px 6px 18px; background:#fff; color:var(--ink-strong); }
.lz-v11 .sb-bubble__usually { display:block; margin-top:6px; padding-top:6px; border-top:1px dashed var(--peach); color:var(--muted); font-size:12.5px; }
.lz-v11 .sb-intent { display:flex; align-items:center; gap:10px; margin-top:14px; padding:13px 16px; border-radius:18px; background:rgba(255,122,77,.07); }
.lz-v11 .sb-intent__text { flex:1 1 auto; min-width:0; color:#C2412D; font-size:14px; font-weight:700; }
.lz-v11 .sb-hints { margin-top:12px; padding:14px 16px; border:1px dashed var(--peach); border-radius:18px; background:#fff; }
.lz-v11 .sb-hints .sb-label { display:block; }
.lz-v11 .sb-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.lz-v11 .sb-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:#fff; color:var(--ink); font-size:12.5px; font-weight:700; white-space:nowrap; }
.lz-v11 .sb-chip--outline { border-color:var(--peach); background:#fff; }
.lz-v11 .sb-story .sb-label { display:block; }
.lz-v11 .sb-story__text { padding:22px 24px; border-radius:18px; background:var(--bg); color:var(--ink); font-size:17px; line-height:1.85; overflow-wrap:anywhere; }
.lz-v11 .sb-story__text b { color:var(--coral-d); font-weight:700; }
.lz-v11 .sb-story__label { margin-top:16px; }
.lz-v11 .sb-ladder-run .sb-label { display:block; }
.lz-v11 .sb-ladder { display:flex; gap:6px; margin:8px 0 4px; }
.lz-v11 .sb-ladder__chip { padding:7px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill); background:var(--bg); color:var(--muted); font-size:12.5px; font-weight:700; white-space:nowrap; }
.lz-v11 .sb-ladder__chip.is-done { border-color:transparent; background:rgba(143,224,190,.25); color:#1F7D57; }
.lz-v11 .sb-ladder__chip.is-current { border:2px solid var(--coral-d); background:#fff; color:var(--coral-d); }
.lz-v11 .sb-options { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.lz-v11 .sb-option { display:flex; min-height:54px; align-items:center; gap:12px; padding:14px 18px; border:1px solid var(--line-2); border-radius:18px; background:#fff; color:var(--ink); font-size:17px; font-weight:700; text-align:left; }
.lz-v11 .sb-option > span:first-child { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.lz-v11 .sb-option:disabled { cursor:default; }
.lz-v11 .sb-option.is-right { border-color:rgba(31,125,87,.35); background:rgba(143,224,190,.16); color:#1F7D57; }
.lz-v11 .sb-option.is-dimmed { color:var(--faint); }

/* ---- playable demo: the parts of the player the landing needs on top of the subset above --- */
.lz-v11 .sb-progress { display:flex; width:150px; flex:0 0 auto; gap:5px; }
.lz-v11 .sb-progress__segment { height:6px; flex:1 1 0; border-radius:999px; }
.lz-v11 .sb-progress__segment.is-done { background:#ED5E2E; }
.lz-v11 .sb-progress__segment.is-current { background:#FFD9C2; }
.lz-v11 .sb-progress__segment.is-todo { background:rgba(51,48,74,.1); }
.lz-v11 .sb-link { padding:0; border:0; background:transparent; color:var(--coral-d); font-size:12.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.lz-v11 .sb-task__head > .sb-link { order:2; margin-left:auto; }
.lz-v11 .sb-task--final { border-color:#FFD9C2; background:linear-gradient(135deg,rgba(255,158,110,.16),rgba(237,94,46,.1)); }
.lz-v11 .sb-task__hint { margin-top:12px; padding-top:12px; border-top:1px dashed #FFD9C2; }
.lz-v11 .sb-task__hint p { margin:0; color:#C2412D; font-size:13.5px; line-height:1.55; }
.lz-v11 .sb-phrase--small { font-size:20px; }
.lz-v11 .sb-phrase__new { color:#1F7D57; }
.lz-v11 .sb-hints__note { margin:8px 0 0; color:var(--muted); font-size:12.5px; }
.lz-v11 .sb-answer__field--tall { min-height:132px; }
.lz-v11 .sb-answer__field:focus-visible { outline:2px solid #FF7A4D; outline-offset:3px; }
.lz-v11 .sb-score { flex:0 0 auto; padding:6px 14px; border-radius:var(--r-pill); font-size:14px; font-weight:800; }
.lz-v11 .sb-score.is-mint { background:rgba(143,224,190,.25); color:#1F7D57; }
.lz-v11 .sb-score.is-amber { background:rgba(255,211,122,.32); color:#8A6100; }
/* Hint chips are buttons in the demo: they insert their phrase into the answer field. */
.lz-v11 button.sb-chip { cursor:pointer; font-family:inherit; }
.lz-v11 button.sb-chip:hover { border-color:var(--peach); color:var(--coral-d); }
.lz-v11 .sb-option { width:100%; cursor:pointer; font-family:inherit; }
.lz-v11 .sb-option:disabled { cursor:default; }
.lz-v11 .sb-demo__head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.lz-v11 .sb-demo__count { color:var(--faint); font-size:12.5px; font-weight:700; }
.lz-v11 .sb-demo__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:auto; padding-top:18px; }
/* One height for every format and every step: the body scrolls inside the card, so the head
   and the action row never move and the four tabs stay the same size as each other. It is
   taken from the viewport minus what the card carries around the body (picker, note, tabs,
   head, actions, padding), so the whole demo fits on one screen. */
.lz-v11 .sb-card { --sb-view:clamp(240px,calc(100vh - 500px),420px); }
/* The horizontal padding is what the focus ring and the plate shadows live in: a scroll box
   clips sideways too, so without it the outline of the answer field is cut at the edges. The
   negative margin puts the content back on the card's own alignment. */
.lz-v11 .sb-demo__body { min-height:var(--sb-view); max-height:var(--sb-view); flex:1 1 auto; margin:0 -10px; padding:0 10px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#F0DCCB transparent; }
.lz-v11 .sb-demo__body::-webkit-scrollbar { width:8px; }
.lz-v11 .sb-demo__body::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:#F0DCCB; background-clip:content-box; }
.lz-v11 .sb-demo__head, .lz-v11 .sb-demo__actions { flex:0 0 auto; }
/* SO FAR opens the popup with everything already answered, so the step itself can stay on
   the current line only. */
.lz-v11 .sb-demo__head > .sb-demo__history { margin-left:auto; }
.lz-v11 .sb-history { margin-top:4px; }
.lz-v11 .sb-history .sb-bubble-row:first-child { margin-top:0; }
.lz-v11 .sb-history__row { padding:12px 0; border-top:1px solid var(--line-2); }
.lz-v11 .sb-history__row:first-child { padding-top:0; border-top:0; }
.lz-v11 .sb-history__row .sb-label { display:block; margin-bottom:4px; }
.lz-v11 .sb-history__row .sb-phrase { margin:0; }
@media (max-width:560px) { .lz-v11 .sb-card { --sb-view:clamp(240px,calc(100vh - 440px),400px); } }
/* Stands in for the player while a language has no samples: same height, so swapping the
   language never resizes the card. */
.lz-v11 .sb-demo-empty { display:flex; min-height:var(--sb-view); flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px 20px; text-align:center; }
.lz-v11 .sb-demo-empty h3 { margin:0; max-width:24ch; font-family:var(--display); font-size:22px; font-weight:600; line-height:1.3; color:var(--ink-strong); }
.lz-v11 .sb-demo-empty p { margin:0; max-width:52ch; color:var(--muted); font-size:14.5px; line-height:1.65; }
.lz-v11 .sb-demo-empty .sb-blob--hero svg { width:20px; height:20px; }
/* A scroll that ends near the demo settles with the card fully under the header instead of
   leaving it half cut. Proximity only, so scrolling anywhere else on the page is untouched. */
@media (min-width:981px) and (min-height:720px) {
    html { scroll-snap-type:y proximity; }
    .lz-v11 .sb-card { scroll-snap-align:start; scroll-margin-top:96px; }
}
/* Browser dictation, the same input the authenticated players offer. */
.lz-v11 .sb-answer__mic-row { display:flex; align-items:center; gap:12px; margin-top:10px; }
.lz-v11 .sb-answer__mic-note { flex:1 1 auto; min-width:0; color:var(--faint); font-size:12.5px; }
.lz-v11 .sb-mic { display:grid; width:42px; height:42px; flex:0 0 auto; place-items:center; border:0; border-radius:50%; background:rgba(255,122,77,.1); color:var(--coral-d); cursor:pointer; }
.lz-v11 .sb-mic.is-listening { background:var(--coral-d); color:#fff; animation:sb-pulse 1.4s ease-in-out infinite; }
@keyframes sb-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(237,94,46,.45); } 50% { box-shadow:0 0 0 10px rgba(237,94,46,0); } }
@media (prefers-reduced-motion: reduce) { .lz-v11 .sb-mic.is-listening { animation:none; } }
.lz-v11 .sb-demo__note { margin:12px 0 0; color:var(--muted); font-size:13.5px; line-height:1.6; }
.lz-v11 .sb-demo__done { text-align:center; }
.lz-v11 .sb-demo__done h3 { margin:0; font-family:var(--display); font-size:22px; font-weight:600; color:var(--ink-strong); }
.lz-v11 .sb-demo__done .sb-demo__score { margin:6px 0 0; color:var(--muted); font-size:14px; font-weight:700; }
.lz-v11 .sb-demo__done .sb-demo__actions { justify-content:center; }
/* The finished screen keeps its heading where the progress head sits on a step, so the
   result underneath scrolls in the same box and the card height never changes. */
.lz-v11 .sb-demo__head--done { display:block; margin-bottom:14px; text-align:center; }
/* The take-away plate and its closing line are prose, so they keep a readable measure and
   left alignment inside the centred done screen instead of stretching across the card. */
.lz-v11 .sb-demo__done .sb-panel { max-width:560px; margin:20px auto 0; padding:16px 20px; text-align:left; }
.lz-v11 .sb-demo__done .sb-panel p { font-size:14px; }
.lz-v11 .sb-demo__done .sb-demo__note { max-width:560px; margin:12px auto 0; }
/* The offer is its own plate under the demo card (design handoff "Landing CTA after the demo
   practice"): plain white, the accent left to the chips and the button. It is hidden until the
   visitor has answered something, then slides in when it is scrolled to. */
.lz-v11 .sb-cta { display:flex; flex-direction:column; align-items:center; gap:22px; padding:44px 48px; border-radius:26px; background:#fff; box-shadow:0 10px 30px -18px rgba(80,60,40,.5); overflow:hidden; text-align:center; opacity:0; transform:translateY(26px); transition:opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1)), transform .5s var(--ease,cubic-bezier(.22,.61,.36,1)); }
.lz-v11 .sb-cta.is-in { opacity:1; transform:none; }
.lz-v11 .sb-cta[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { .lz-v11 .sb-cta { transform:none; transition:none; } }
.lz-v11 .sb-cta__copy { display:flex; max-width:620px; flex-direction:column; gap:12px; }
.lz-v11 .sb-cta__title { margin:0; font-family:var(--display); font-size:30px; font-weight:600; line-height:1.25; color:var(--ink-strong); }
.lz-v11 .sb-cta__lead { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.lz-v11 .sb-cta__points { display:flex; max-width:660px; flex-wrap:wrap; justify-content:center; gap:9px; margin:0; padding:0; list-style:none; }
.lz-v11 .sb-cta__points li { display:inline-flex; align-items:center; gap:9px; padding:9px 17px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg); color:var(--ink-strong); font-size:14px; font-weight:700; white-space:nowrap; }
.lz-v11 .sb-cta__points svg { width:14px; height:14px; flex:0 0 auto; color:var(--coral-d); }
.lz-v11 .sb-cta__btn { display:inline-flex; height:60px; align-items:center; justify-content:center; gap:12px; padding:0 34px; border:0; border-radius:999px; background:linear-gradient(135deg,#FF9E6E,#FF7A4D 55%,#ED5E2E); box-shadow:0 18px 34px -16px rgba(237,94,46,.9); color:#fff; font-family:var(--display); font-size:17px; font-weight:600; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.lz-v11 .sb-cta__btn:hover { transform:translateY(-2px); box-shadow:0 22px 38px -16px rgba(237,94,46,.95); color:#fff; }
.lz-v11 .sb-cta__btn svg { width:18px; height:18px; flex:0 0 auto; }
.lz-v11 .sb-cta__note { max-width:420px; margin:0; color:var(--faint); font-size:13px; line-height:1.6; }
/* Narrow landing column: same plate, one step down in every size. */
@media (max-width:760px) {
    .lz-v11 .sb-cta { gap:20px; padding:36px 32px; }
    .lz-v11 .sb-cta__title { font-size:26px; }
    .lz-v11 .sb-cta__lead { font-size:15px; }
    .lz-v11 .sb-cta__points li { font-size:13.5px; }
    .lz-v11 .sb-cta__btn { height:56px; font-size:16px; }
}
/* Mobile: the chips become a full width column so a long claim wraps inside its pill. */
@media (max-width:560px) {
    .lz-v11 .sb-cta { gap:18px; padding:26px 20px; border-radius:22px; }
    .lz-v11 .sb-cta__title { font-size:1.5rem; }
    .lz-v11 .sb-cta__lead { font-size:14.5px; }
    .lz-v11 .sb-cta__points { align-self:stretch; flex-direction:column; gap:8px; }
    .lz-v11 .sb-cta__points li { padding:11px 15px; white-space:normal; }
    .lz-v11 .sb-cta__points li span { flex:1 1 auto; min-width:0; }
    .lz-v11 .sb-cta__btn { width:100%; height:54px; padding:0 20px; font-size:15px; }
}
/* ---- the rest of the player subset, copied from the owning rules in learning-zone.css ---- */
.lz-v11 .sb-label--coral { color:var(--coral-d); }
.lz-v11 .sb-label--mint { color:#1F7D57; }
.lz-v11 .sb-label--error { color:#C2412D; }
.lz-v11 .sb-blob--mint { background:rgba(143,224,190,.25); color:#1F7D57; }
.lz-v11 .sb-tag--solid { background:var(--coral-d); color:#fff; }
.lz-v11 .sb-panel--amber { background:rgba(255,211,122,.22); color:#8A6100; }
.lz-v11 .sb-panel--error { background:rgba(224,83,58,.08); color:#C2412D; }
.lz-v11 .sb-panel--quiet { background:var(--bg); color:var(--ink); }
.lz-v11 .sb-panel__lead { font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink-strong); }
.lz-v11 .sb-panel--amber strong, .lz-v11 .sb-panel--error strong { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; }
.lz-v11 .sb-phrase--struck { font-size:17px; color:#C9C4B8; text-decoration:line-through; }
.lz-v11 .sb-task__requirements { margin:8px 0 0; color:#C2412D; font-size:13px; font-weight:700; }
.lz-v11 .sb-task__hint-note { color:var(--faint) !important; font-size:12.5px !important; font-weight:700; }
.lz-v11 .sb-chip--mint { border-color:transparent; background:rgba(143,224,190,.25); color:#1F7D57; }
.lz-v11 .sb-chip--error { border-color:transparent; background:rgba(224,83,58,.08); color:#C2412D; }
.lz-v11 .sb-chip--tappable { cursor:pointer; transition:transform .14s ease, border-color .14s ease; }
.lz-v11 .sb-chip--tappable:hover { transform:translateY(-1px); border-color:var(--peach); }
.lz-v11 .sb-result__head { display:flex; align-items:center; gap:14px; }
.lz-v11 .sb-result__title { flex:1 1 auto; min-width:0; }
.lz-v11 .sb-result__title h3 { margin:0; font-family:var(--display); font-size:22px; font-weight:600; color:var(--ink-strong); }
.lz-v11 .sb-result__title p { margin:2px 0 0; color:var(--muted); font-size:13.5px; font-weight:700; }
.lz-v11 .sb-fact-row { display:flex; align-items:flex-start; gap:10px; margin-top:8px; padding:11px 14px; border-radius:16px; background:var(--bg); font-size:14px; line-height:1.5; }
.lz-v11 .sb-fact-row > span:first-child { flex:0 0 auto; font-weight:800; }
.lz-v11 .sb-fact-row.is-covered > span:first-child { color:#1F7D57; }
.lz-v11 .sb-fact-row.is-missed > span:first-child { color:#C2412D; }
.lz-v11 .sb-fact-row.is-missed strong { margin-right:4px; color:#C2412D; }
.lz-v11 .sb-fix { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:6px 0 0; font-size:13.5px; }
.lz-v11 .sb-fix__said { color:var(--muted); text-decoration:line-through; }
.lz-v11 .sb-comparison__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.lz-v11 .sb-comparison__panel { padding:14px 16px; border-radius:18px; background:var(--bg); }
.lz-v11 .sb-comparison__panel--sample { border:1px solid var(--peach); background:#fff; }
.lz-v11 .sb-comparison__panel p { margin:8px 0 0; color:var(--ink); font-size:14px; line-height:1.65; overflow-wrap:anywhere; }

@media (max-width:767.98px) {
    .lz-v11 .sb-card { padding:18px 16px 16px; border-radius:22px; }
    .lz-v11 .sb-phrase { font-size:22px; }
    .lz-v11 .sb-task__instruction { font-size:16px; }
    .lz-v11 .sb-bubble { max-width:86%; }
    .lz-v11 .sb-story__text { padding:16px 18px; font-size:15.5px; line-height:1.8; }
    .lz-v11 .sb-ladder__chip { flex:1 1 0; min-width:0; padding:7px 8px; overflow:hidden; font-size:11.5px; text-align:center; text-overflow:ellipsis; }
    .lz-v11 .sb-option { min-height:50px; padding:12px 16px; font-size:15px; }
    .lz-v11 .sb-comparison__grid { grid-template-columns:1fr; }
}