/* ============================================================================
 * Learn2Ride At Home — Sticker Book component layer
 * Drop-in CSS. Load after your reset, before page-specific styles.
 *
 * Mobile-first at 375px. Every class here is used in
 * app/at-home-app-redesign.html so you can see it rendered.
 *
 * THE STICKER RULE (applies to every card / badge / callout):
 *   border: 2-3px solid var(--l2r-ink)   — always ink, never a tint
 *   border-radius: 12-16px
 *   box-shadow: offset SOLID ink, never blurred, never rgba()
 *   background: one brand color (or a wash, for long reading text)
 * ========================================================================= */

/* Fonts are loaded in index.html: Barlow Condensed is self-hosted and preloaded,
 * Inter comes from Google. The design-project copy of this file @imports both from
 * Google, which the app can't use: an @import here is render-blocking and the
 * Google Barlow face would shadow the self-hosted one, wasting the preload and
 * putting the display font behind a network hop at the parking lot. Re-delete this
 * import on the next drop. Only the 900 italic Barlow face is self-hosted — do not
 * ask for other display weights without adding the file. */

:root {
  /* brand */
  --l2r-yellow: #FFC617;  --l2r-yellow-deep: #E5A900;
  --l2r-orange: #F28F1F;  --l2r-orange-hover: #E37D0B;
  --l2r-pink:   #FF6FA3;
  --l2r-blue:   #3AA7E0;
  --l2r-mint:   #6FD7B7;
  --l2r-ink:    #0B0B0B;  --l2r-ink-2: #1A1A1A;
  --l2r-paper:  #FFFFFF;  --l2r-bone:  #F6F6F5;

  /* WASHES — added for sunlight legibility. A saturated fill behind a
   * paragraph is unreadable in bright sun; the wash keeps the color
   * signal while holding ink-on-near-white contrast. Use a wash whenever
   * the sticker contains more than ~8 words. */
  --l2r-yellow-wash: #FFF3CC;
  --l2r-pink-wash:   #FFE3ED;
  --l2r-blue-wash:   #DCF0FB;
  --l2r-mint-wash:   #DFF6EE;
  --l2r-bone-2:      #E9E9E6;

  /* type */
  --display: 'Barlow Condensed', 'Oswald', system-ui, sans-serif; /* @kind font */
  --text:    'Inter', system-ui, -apple-system, sans-serif; /* @kind font */

  /* shape */
  --bw: 2px;  --bw-3: 3px; /* @kind spacing */
  --sh:    3px 3px 0 var(--l2r-ink); /* @kind shadow */
  --sh-4:  4px 4px 0 var(--l2r-ink); /* @kind shadow */
  --sh-6:  6px 6px 0 var(--l2r-ink); /* @kind shadow */
  --r: 14px;  --r-lg: 16px;  --r-pill: 999px; /* @kind radius */

  --tap: 48px; /* @kind spacing */   /* min tap target, above the 44px floor */
}

/* ========================================================== base */
.l2r-app { font-family: var(--text); color: var(--l2r-ink); background: var(--l2r-bone); font-size: 16.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.l2r-app * { box-sizing: border-box; }
.l2r-app p { margin: 0 0 12px; text-wrap: pretty; }
.l2r-app p:last-child { margin-bottom: 0; }
.l2r-app strong, .l2r-app b { font-weight: 700; }
.l2r-app a { color: var(--l2r-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.l2r-app a:hover { color: var(--l2r-orange-hover); }

/* Display type — every heading and label. Barlow 900 italic caps, always. */
.disp { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: 0.98; margin: 0; }
.h-page { font-size: 34px; }
.h-sect { font-size: 22px; }
.h-sub  { font-size: 17px; }

/* Page shell. max-width guard stops line lengths running away on desktop. */
.screen { max-width: 480px; margin: 0 auto; padding: 0 0 24px; background: var(--l2r-bone); min-height: 100%; }
.pad { padding-left: 16px; padding-right: 16px; }

/* ========================================================== header */
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--l2r-yellow); border-bottom: var(--bw-3) solid var(--l2r-ink); position: sticky; top: 0; z-index: 20; }
.app-header__logo { height: 34px; width: auto; display: block; }
.app-header__logo-wrap { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.app-header__sub { font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; margin-top: 1px; }

/* ========================================================== buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 12px 20px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 17px; letter-spacing: 0.02em; border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r); background: var(--l2r-paper); color: var(--l2r-ink); box-shadow: var(--sh-4); cursor: pointer; text-decoration: none; transition: transform 90ms ease, box-shadow 90ms ease, background 120ms ease; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--l2r-ink); }
.btn--block { display: flex; width: 100%; }

.btn-primary { background: var(--l2r-orange); color: var(--l2r-paper); }
.btn-primary:hover { background: var(--l2r-orange-hover); }
.btn-watch { background: var(--l2r-blue); color: var(--l2r-paper); }
.btn-watch:hover { background: #2E93C9; }
.btn-secondary { background: var(--l2r-paper); color: var(--l2r-ink); }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--l2r-ink); }

/* Disabled reads as clearly off, not as a faint ghost of an enabled button. */
.btn:disabled, .btn[aria-disabled="true"] { background: var(--l2r-bone-2); color: #8A8A85; border-color: #B9B9B4; box-shadow: 2px 2px 0 #B9B9B4; cursor: not-allowed; transform: none; }

/* Play glyph for the watch button */
.btn-watch .play { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--l2r-paper); border: var(--bw) solid var(--l2r-ink); display: inline-flex; align-items: center; justify-content: center; }
.btn-watch .play::before { content: ''; width: 0; height: 0; border-left: 7px solid var(--l2r-ink); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; margin-left: 2px; }

/* Footer action bar — sticks to the bottom of every step page */
.action-bar { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--l2r-bone); border-top: var(--bw-3) solid var(--l2r-ink); }
.action-bar__row { display: flex; gap: 10px; }
.action-bar__row .btn { flex: 1; }

/* ========================================================== progress */
/* Four segments, one per skill step. Setup is prep and excluded.
 * Completed = mint + check. Current = yellow + number. Locked = bone + number.
 * State is carried by fill AND glyph AND the summary line, never color alone. */
.progress { padding: 10px 16px 12px; background: var(--l2r-paper); border-bottom: var(--bw) solid var(--l2r-ink); }
.progress__track { display: flex; gap: 6px; }
.progress__seg { flex: 1; min-height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; border: var(--bw) solid var(--l2r-ink); border-radius: 8px; background: var(--l2r-bone-2); font-family: var(--display); font-style: italic; font-weight: 900; font-size: 13px; letter-spacing: 0.02em; color: #7C7C77; }
.progress__seg.is-done { background: var(--l2r-mint); color: var(--l2r-ink); box-shadow: 2px 2px 0 var(--l2r-ink); }
.progress__seg.is-now  { background: var(--l2r-yellow); color: var(--l2r-ink); box-shadow: 2px 2px 0 var(--l2r-ink); }
.progress__seg .tick { font-size: 14px; line-height: 1; }
.progress__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.progress__count { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; }
.progress__nowlabel { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: 0.04em; color: var(--l2r-ink); background: var(--l2r-yellow); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); padding: 2px 10px; }

/* ========================================================== page title */
.page-head { padding: 16px 16px 12px; }
.page-head__eyebrow { display: inline-block; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; background: var(--l2r-pink); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); padding: 3px 11px; box-shadow: 2px 2px 0 var(--l2r-ink); margin-bottom: 8px; }
.page-head__eyebrow--mint { background: var(--l2r-mint); }
.page-head__eyebrow--blue { background: var(--l2r-blue); color: var(--l2r-paper); }
.page-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.page-head h1 { font-size: 34px; }

/* ========================================================== sticker card */
.sticker { background: var(--l2r-paper); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: 16px; }
.sticker--yellow { background: var(--l2r-yellow); }
.sticker--pink   { background: var(--l2r-pink); }
.sticker--blue   { background: var(--l2r-blue); }
.sticker--mint   { background: var(--l2r-mint); }
.sticker--bone   { background: var(--l2r-bone); }
/* Rotation. Used on hero/celebration stickers only. Body-text cards stay
 * flat so long paragraphs don't fight the eye at the lot. */
.rot-l  { transform: rotate(-3deg); }
.rot-r  { transform: rotate(2.5deg); }
.rot-lg { transform: rotate(-5deg); }
.rot-xs { transform: rotate(-0.6deg); }

/* ========================================================== block
 * The workhorse. Every labeled section of a long page becomes one of these
 * so the page reads as distinct blocks instead of one continuous scroll.
 * Content stays fully visible (never collapsed) — parents scan, not tap. */
.block { background: var(--l2r-paper); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r); box-shadow: var(--sh); padding: 14px; margin-bottom: 14px; }
.block__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 0.03em; background: var(--l2r-yellow); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); padding: 3px 12px; margin-bottom: 10px; }
.block__label--pink { background: var(--l2r-pink); }
.block__label--blue { background: var(--l2r-blue); color: var(--l2r-paper); }
.block__label--mint { background: var(--l2r-mint); }
.block__label--bone { background: var(--l2r-bone-2); }
/* Numbered part sections get a tab that rides the top border. */
.block--part { margin-top: 22px; }
.block--part .block__label { margin: -26px 0 12px; box-shadow: 2px 2px 0 var(--l2r-ink); }

/* ========================================================== icons
 * Lucide, 2px stroke, currentColor. Per CLAUDE.md the pictographic emoji
 * set is not part of this brand: only ★, and ✅🦩🐸🚲⭐ in the narrow cases
 * README allows. Every UI icon slot below carries a real Lucide path. */
.ico { flex: 0 0 auto; display: block; }

/* ========================================================== callout */
/* "What to say" is the highest-value coaching content on a step page.
 * It gets one consistent treatment everywhere: blue wash, ink outline,
 * offset shadow, labeled. Upgrade from the current thin left border. */
.callout { border: var(--bw) solid var(--l2r-ink); border-radius: var(--r); box-shadow: var(--sh); padding: 12px 14px; margin: 12px 0; }
.callout__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; margin-bottom: 6px; }
.callout p { font-size: 16.5px; }
.callout--say     { background: var(--l2r-blue-wash); }
.callout--say .callout__label { color: #17607F; }
.callout--headsup { background: var(--l2r-yellow-wash); }
.callout--headsup .callout__label { color: #8A5A00; }
.callout--info    { background: var(--l2r-bone); }
.callout--win     { background: var(--l2r-mint-wash); }
.callout--win .callout__label { color: #14705A; }

/* ========================================================== ready-when */
/* The success checkpoint that ends every step. Consistent mint sticker so
 * parents can find the finish line for the step fast. */
.ready { display: flex; gap: 10px; background: var(--l2r-mint-wash); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: 14px; margin: 16px 0 0; }
.ready__flag { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--l2r-mint); border: var(--bw) solid var(--l2r-ink); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.ready__label { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }

/* ========================================================== troubleshoot */
/* "If they're stuck (do this in order)". The block a stressed parent scans
 * when things go sideways. Distinct from Parent reminders on purpose. */
.fix { background: var(--l2r-paper); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); padding: 14px; margin-bottom: 14px; }
.fix__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 14px; letter-spacing: 0.03em; background: var(--l2r-pink); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); padding: 3px 12px; margin-bottom: 12px; }
.fix ol { list-style: none; counter-reset: fix; padding: 0; margin: 0; }
.fix li { counter-increment: fix; position: relative; padding-left: 38px; margin-bottom: 12px; }
.fix li:last-child { margin-bottom: 0; }
.fix li::before { content: counter(fix); position: absolute; left: 0; top: -1px; width: 27px; height: 27px; border-radius: 50%; background: var(--l2r-pink); border: var(--bw) solid var(--l2r-ink); font-family: var(--display); font-style: italic; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; }

/* ========================================================== lists */
.l2r-app ul.list, .l2r-app ol.list { margin: 0; padding-left: 0; list-style: none; }
.list li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.list li:last-child { margin-bottom: 0; }
.list li::before { content: ''; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; background: var(--l2r-ink); border-radius: 2px; }
/* Checklist — for "Parent reminders" and gear lists. */
.list--check li::before { content: '✓'; background: none; border-radius: 0; width: auto; height: auto; top: 0; left: 0; font-weight: 800; color: var(--l2r-mint); -webkit-text-stroke: 0.6px var(--l2r-ink); font-size: 15px; }
.list--check li { padding-left: 22px; }
/* Numbered — inherits the ink circle look at a smaller scale. */
.list--num { counter-reset: n; }
.list--num li { counter-increment: n; padding-left: 30px; }
.list--num li::before { content: counter(n); background: var(--l2r-yellow); border: 1.5px solid var(--l2r-ink); border-radius: 50%; width: 22px; height: 22px; top: 0.1em; left: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 13px; }

/* ========================================================== step path */
.path { display: flex; flex-direction: column; gap: 10px; }
.step-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 62px; padding: 11px 13px; background: var(--l2r-paper); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); text-decoration: none; color: var(--l2r-ink); }
.step-card__num { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 26px; line-height: 1; min-width: 30px; display: flex; align-items: center; justify-content: center; }
.step-card__name { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 19px; line-height: 1; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.step-card__desc { font-size: 14.5px; line-height: 1.4; margin-top: 3px; color: var(--l2r-ink-2); }
.step-card--now    { background: var(--l2r-yellow); transform: rotate(-0.6deg); box-shadow: var(--sh-6); }
.step-card--done   { background: var(--l2r-mint); transform: rotate(0.5deg); }
.step-card--open   { background: var(--l2r-paper); }
/* Locked: outline stays full-strength ink so the row is still legible in
 * sun. Only the fill and the text drop back. */
.step-card--locked { background: var(--l2r-bone-2); box-shadow: 2px 2px 0 var(--l2r-ink); }
.step-card--locked .step-card__num, .step-card--locked .step-card__name { color: #6E6E69; }
.step-card--locked .step-card__desc { color: #7C7C77; }

/* ========================================================== badge */
.badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.05em; padding: 3px 10px; border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); background: var(--l2r-paper); color: var(--l2r-ink); white-space: nowrap; }
.badge--now    { background: var(--l2r-pink); box-shadow: 2px 2px 0 var(--l2r-ink); }
.badge--done   { background: var(--l2r-mint); }
.badge--locked { background: var(--l2r-bone); color: #6E6E69; border-color: #9E9E99; }
.badge--open   { background: var(--l2r-blue); color: var(--l2r-paper); }
.badge--prep   { background: var(--l2r-paper); font-size: 11px; padding: 2px 8px; }

/* ========================================================== chip */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Single-row rail for tight vertical space (the chat composer). Keeps the
   tap-to-ask affordance at ~52px instead of ~170px of stacked rows.
   Scrolls sideways; edge fade hints there is more. */
.chips--rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.chips--rail::-webkit-scrollbar { display: none; }
.chips--rail .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; min-height: 40px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; font-family: var(--text); font-weight: 700; font-size: 14.5px; background: var(--l2r-paper); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); box-shadow: 2px 2px 0 var(--l2r-ink); cursor: pointer; text-align: left; line-height: 1.25; }
.chip:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--l2r-ink); }
.chip--yellow { background: var(--l2r-yellow); }

/* ========================================================== coach panel */
/* "A coach in your pocket, not a generic chatbot" — so it gets Matt's face. */
.coach-panel { background: var(--l2r-paper); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; margin-bottom: 14px; }
.coach-panel__head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; background: var(--l2r-yellow); border-bottom: var(--bw-3) solid var(--l2r-ink); }
.coach-panel__avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; border: var(--bw) solid var(--l2r-ink); object-fit: cover; display: block; background: var(--l2r-paper); }
.coach-panel__who { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 18px; line-height: 1; }
.coach-panel__status { font-size: 12.5px; font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.coach-panel__status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--l2r-mint); border: 1.5px solid var(--l2r-ink); }
.coach-panel__body { padding: 13px; }
.coach-panel__prompt { font-size: 15.5px; margin-bottom: 11px; }

/* Chat bubbles inside the Ask Coach Matt modal */
.bubble { border: var(--bw) solid var(--l2r-ink); border-radius: var(--r); box-shadow: var(--sh); padding: 12px 14px; margin-bottom: 14px; max-width: 88%; }
.bubble--you   { background: var(--l2r-blue-wash); margin-left: auto; border-bottom-right-radius: 4px; }
.bubble--coach { background: var(--l2r-mint-wash); margin-right: auto; border-bottom-left-radius: 4px; }
.bubble__from { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 11px; letter-spacing: 0.05em; margin-bottom: 5px; opacity: 0.8; }

/* ========================================================== modal */
.modal { background: var(--l2r-bone); border: var(--bw-3) solid var(--l2r-ink); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; max-height: 100dvh; }
/* Inside a fixed-height overlay (real app), let the wrapper own the height. */
.modal-overlay > .modal { max-height: 100%; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--l2r-yellow); border-bottom: var(--bw-3) solid var(--l2r-ink); }
.modal__close { width: 44px; height: 44px; flex: 0 0 auto; border: var(--bw-3) solid var(--l2r-ink); border-radius: 12px; background: var(--l2r-paper); box-shadow: 2px 2px 0 var(--l2r-ink); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; }
/* flex:1 + min-height:0 is what lets the transcript actually shrink and
   scroll instead of pushing the composer off-screen on short phones. */
.modal__body { padding: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal__foot { flex: 0 0 auto; padding: 10px 12px; background: var(--l2r-paper); border-top: var(--bw-3) solid var(--l2r-ink); }

/* Composer: input and Send share one row so the footer stays ~64px, not ~130px.
   Both children are pinned to the same 52px so the button can't outgrow the field. */
.modal__row { display: flex; gap: 8px; align-items: center; }
.modal__row .modal__input { flex: 1 1 auto; min-width: 0; height: 52px; margin: 0; }
.modal__row .btn { flex: 0 0 auto; min-height: 0; height: 52px; padding-block: 0; padding-inline: 18px; }
.modal__input { width: 100%; min-height: 52px; padding: 13px 14px; font-family: var(--text); font-size: 16px; border: var(--bw) solid var(--l2r-ink); border-radius: var(--r); background: var(--l2r-paper); margin: 10px 0; }
.modal__input::placeholder { color: #8A8A85; }

/* Video modal */
.video-frame { aspect-ratio: 16 / 10; background: var(--l2r-ink); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.video-frame__play { width: 74px; height: 74px; border-radius: 50%; background: var(--l2r-yellow); border: var(--bw-3) solid var(--l2r-ink); box-shadow: var(--sh-4); display: flex; align-items: center; justify-content: center; }
.video-frame__play::before { content: ''; width: 0; height: 0; border-left: 22px solid var(--l2r-ink); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }

/* ========================================================== certificate */
/* The payoff. Only place we go full celebration. */
.cert { position: relative; background: var(--l2r-yellow); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-6); padding: 20px 16px 16px; text-align: center; overflow: hidden; }
.cert::before { content: '★'; position: absolute; left: -18px; top: -26px; font-size: 120px; line-height: 1; color: rgba(11,11,11,0.06); pointer-events: none; }
.cert__ribbon { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; background: var(--l2r-pink); border: var(--bw) solid var(--l2r-ink); border-radius: var(--r-pill); padding: 4px 13px; box-shadow: 2px 2px 0 var(--l2r-ink); position: relative; }
.cert__title { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 30px; line-height: 0.95; margin: 11px 0 4px; position: relative; }
.cert__sub { font-size: 15px; font-weight: 600; margin-bottom: 15px; position: relative; }
.cert__stars { font-size: 20px; letter-spacing: 5px; color: var(--l2r-ink); margin-bottom: 14px; position: relative; }
.cert .btn { position: relative; }

/* ========================================================== ask-link */
/* Escape hatch at the bottom of every step page: pink-wash speech-bubble
 * sticker, not a dashed outline. */
.ask-link { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 56px; margin-top: 14px; padding: 11px 14px; text-align: left; background: var(--l2r-pink-wash); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh); color: var(--l2r-ink); text-decoration: none; cursor: pointer; font: inherit; }
.ask-link::after { content: ''; position: absolute; left: 26px; bottom: -11px; width: 14px; height: 14px; background: var(--l2r-pink-wash); border-right: var(--bw-3) solid var(--l2r-ink); border-bottom: var(--bw-3) solid var(--l2r-ink); transform: rotate(45deg); }
.ask-link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--l2r-ink); }
.ask-link__face { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 9px; border: var(--bw) solid var(--l2r-ink); object-fit: cover; }
.ask-link__title { display: block; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 17px; line-height: 1; letter-spacing: 0.02em; }
.ask-link__sub { display: block; font-size: 12.5px; font-weight: 600; margin-top: 3px; color: #3D3D3D; }

/* ========================================================== utility */
.stack-sm > * + * { margin-top: 8px; }
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Collapsible "How this works" — sticker treatment on the toggle */
.disclose { background: var(--l2r-paper); border: var(--bw-3) solid var(--l2r-ink); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; margin-bottom: 14px; }
.disclose__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--tap); padding: 13px 15px; background: var(--l2r-paper); border: 0; cursor: pointer; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: 20px; letter-spacing: 0; text-align: left; }
.disclose__sign { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--l2r-yellow); border: var(--bw) solid var(--l2r-ink); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 20px; line-height: 1; }
.disclose__panel { padding: 0 15px 15px; border-top: var(--bw) solid var(--l2r-ink); padding-top: 13px; }
.disclose[data-open="false"] .disclose__panel { display: none; }