/* MIS Major tab: hero, capability blocks, RideFlow, "Hand me a problem" triangle, two-stack chart, habits, closing quote.
   The cycle and the zoom lens keep their own styles in mis-cycle.css and mis-story.css. */

.mp {
    --mul: #76344E;
    --plum: #6B4A5A;
    --sage: #6B7F5E;
    --choc: #1E100A;
    --ink: #2A1810;
    --muted: #7A665F;
    --rose: #A9788A;
    --ivory: #FFFBF9;
    --line: rgba(143, 70, 97, 0.18);
    --serif: Georgia, "Times New Roman", serif;
}

.mp-section { margin: 0 0 120px; }
.mp-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mul);
    font-weight: 600;
    margin: 0;
}
.mp-h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 44px;
    line-height: 1.12;
    color: var(--choc);
    margin: 12px 0 0;
}
.mp-lead { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 14px 0 0; }
.mp-head { margin-bottom: 44px; }

/* hero */
.mp-hero { margin: 10px 0 100px; }
.mp-hero h2 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 58px;
    line-height: 1.06;
    color: var(--choc);
    margin: 16px 0 24px;
}
.mp-thesis {
    font-family: var(--serif);
    font-style: italic;
    font-size: 29px;
    line-height: 1.3;
    color: var(--mul);
    margin: 0 0 22px;
}
/* MIS and Marketing: the pitch sized to the column, so the first sentence fills exactly two full lines,
   then the bold payoff ("I speak both." / "People don't love brands…") underneath */
.mp-hero-fill { container-type: inline-size; }
/* the "I studied MIS. / I minored in marketing." heading steps back so the pitch under it leads
   (all three Coursework tabs, so switching tabs doesn't change the size) */
.mp-hero #mis-heading,
.mp-hero #mk-heading,
.mp-hero #ov-heading { font-size: max(1.2rem, calc(var(--section-size) * 0.75)) !important; }
.mp-hero-fill .mp-thesis { font-size: clamp(1.15rem, 3.55cqi, 1.9rem); max-width: 27.8em; }
.mk .mp-hero-fill .mp-thesis { font-size: clamp(1.15rem, 3.25cqi, 1.9rem); max-width: 30.4em; }   /* a slightly longer sentence */
/* on wide screens the size stops growing and the width (in em) keeps it at two full lines */
.mp-hero-fill .mp-thesis strong { display: block; text-wrap: balance; }
.mp-hook { font-size: 18px; line-height: 1.7; color: var(--ink); margin: 0; }

/* what I can do */
/* the trip across the six cards: idea in, decision out */
.mp-trip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.mp-trip i { font-style: normal; color: var(--rose); }
.mp-trip span:first-child, .mp-trip span:last-child { color: var(--mul); }
/* the trip is also the slideshow's controls: steps open their card, ‹ › walk it */
.mp-trip-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.mp-trip-bar .mp-trip { margin: 0; }
.mp-trip-step { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 4px 0; border-bottom: 2px solid transparent; cursor: var(--cursor-hot, pointer); transition: color 0.2s ease, border-color 0.2s ease; }
.mp-trip-step:hover, .mp-trip-step.is-past { color: var(--choc); }
.mp-trip-step.is-on { color: var(--mul); border-bottom-color: var(--mul); }
.mp-trip-step:focus-visible { outline: 2px solid var(--mul); outline-offset: 3px; }
.pf-arrows { display: flex; align-items: center; gap: 10px; }
.pf-count { font-family: var(--serif); font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.2em; text-align: center; }
.mp-cap-num { font-family: var(--serif); font-size: 14px; letter-spacing: 0; color: var(--rose); margin-right: 4px; }
.mp-cap-name { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--mul); margin: 0 0 10px; }
.mp-cap-from { margin: 10px 0 0; font-size: 10.5px; letter-spacing: 0.08em; color: #9A8780; font-weight: 600; }

/* RideFlow */
.mp-proof { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 52px; align-items: start; }
/* the story leads (what it is, what I built, the proof), and the screenshot backs it up on the right */
.mp-projects .mp-proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.mp-projects .mp-proof > div:has(> h3) { order: -1; }
.mp-browser { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: 0 30px 60px -35px rgba(42, 24, 16, 0.4); }
.mp-browser-bar { display: flex; gap: 7px; padding: 12px 14px; background: #F5E5E1; border-bottom: 1px solid var(--line); }
.mp-browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(143, 70, 97, 0.3); }
.mp-browser-bar em { margin-left: 8px; font-style: normal; font-size: 12px; color: #76344E; }
.mp-browser-stack { display: grid; gap: 20px; }
/* two stacked pages: a wider crop so the pair ends level with the text beside it */
.mp-browser-stack .mp-browser-view { aspect-ratio: 2 / 1; }
.mp-browser-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.mp-browser-view iframe { position: absolute; top: 0; left: 0; width: 250%; height: 250%; border: 0; transform: scale(0.4); transform-origin: 0 0; }
.mp-browser-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* RideFlow: the live app stretches to the height of the text beside it, and the data model runs full width below both */
.mp-proof-fill { align-items: stretch; }
.mp-proof-fill > div:not(:has(> h3)):not(.mp-erd) { display: flex; flex-direction: column; }
.mp-proof-fill > div:not(:has(> h3)):not(.mp-erd) > .mp-browser { flex: 1; display: flex; flex-direction: column; }
.mp-proof-fill > div:not(:has(> h3)):not(.mp-erd) .mp-browser-view { flex: 1; aspect-ratio: 16 / 10; }
.mp-proof-fill > div:not(:has(> h3)):not(.mp-erd) > .mp-facts { margin: 24px 0 0; }
/* the text column: title level with the window's top, buttons level with the stats' bottom */
.mp-proof-fill > div:has(> h3) { display: flex; flex-direction: column; }
.mp-proof-fill > div:has(> h3) > h3 { margin-top: 0; }
.mp-proof-fill > div:has(> h3) > .mp-links { margin-top: auto; padding-top: 20px; }
/* projects: ‹ project names › above one slide at a time */
.mp-proj-nav { display: flex; align-items: center; gap: 12px; margin: 0 0 40px; }
/* one line of tabs; when they don't all fit, the row scrolls and ‹ › appear at its far left and far right */
.mp-proj-tabs { display: flex; flex-wrap: nowrap; gap: 8px; flex: 1; min-width: 0; padding: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.mp-proj-tabs::-webkit-scrollbar { display: none; }
.mp-proj-tabs button { flex: none; white-space: nowrap; }
/* the same pills as the Coursework tabs: uppercase, spaced out, left-aligned */
.mp-proj-tabs button { font: inherit; font-size: 0.85em; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 11px 15px; border-radius: var(--r-pill); border: 1.5px solid #D9B8B3; background: #FFF8F6; color: #1E100A; cursor: var(--cursor-hot, pointer); transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.mp-proj-tabs button:hover { border-color: var(--mul); }
.mp-proj-tabs button[aria-selected="true"] { background: #76344E; border-color: #76344E; color: #FFF8F6; }
.mp-proj-arrow { display: none; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #D9B8B3; background: #FFF8F6; color: #76344E; font-size: 20px; line-height: 1; cursor: var(--cursor-hot, pointer); transition: background 0.2s ease, color 0.2s ease; }
.mp-proj-nav.overflows .mp-proj-arrow { display: block; }
.mp-proj-arrow:hover { background: var(--mul); color: #FFF8F6; }
.mp-proj-tabs button:focus-visible, .mp-proj-arrow:focus-visible { outline: 2px solid var(--mul); outline-offset: 3px; }
.mp-proj.entering { animation: mp-proj-in 0.35s ease; }
@keyframes mp-proj-in { from { opacity: 0; transform: translateY(8px); } }
.mp-browser-view img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* the SQL project shows its code in an editor frame instead of a screenshot */
.mp-code { background: #1E100A; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 30px 60px -35px rgba(42, 24, 16, 0.5); }
.mp-code-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #2A1810; }
.mp-code-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 248, 246, 0.28); }
.mp-code-bar em { margin-left: 8px; font-style: normal; font-size: 12px; color: #D9B8B3; }
.mp-code-files { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 10px; }
.mp-code-files button { background: none; border: 0; border-radius: var(--r-small); padding: 4px 10px; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #D9B8B3; cursor: var(--cursor-hot, pointer); }
.mp-code-files button:hover { color: #F5E5E1; }
.mp-code-files button[aria-selected="true"] { background: #1E100A; color: #F5E5E1; }
/* all three SQL files take the height of the longest, so switching doesn't move the page */
.mp-code:has(.mp-code-files) pre { min-height: 36.5em; }
.mp-code-files button:focus-visible { outline: 2px solid #E9A6BC; outline-offset: 1px; }
.mp-code pre { margin: 0; padding: 26px 28px 30px; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.7; color: #F5E5E1; }
.mp-code .k { color: #E9A6BC; }
.mp-code .c { color: #A9BE98; }
.mp-code .n { color: #F3C9A0; }
.mp-facts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mp-proof h3 { font-family: var(--serif); font-weight: 400; font-size: 52px; color: var(--choc); margin: 10px 0 10px; }
/* a little signature badge above each project I built */
.mp-proof-sub { font-size: 17.5px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
.mp-facts { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mp-facts li { border-top: 2px solid var(--mul); padding-top: 10px; }
.mp-facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--choc); line-height: 1; margin-bottom: 4px; }
.mp-facts span { font-size: 11px; letter-spacing: 0.14em; color: var(--muted); font-weight: 600; }
.mp-proof-list { color: var(--muted); font-size: 15px; line-height: 1.7; padding-left: 18px; margin: 0 0 22px; }
.mp-links { display: flex; gap: 12px; flex-wrap: wrap; }
.mp-link { padding: 10px 18px; border-radius: var(--r-pill); font-size: 14px; text-decoration: none; border: 1px solid var(--mul); color: var(--mul); transition: background 0.2s, color 0.2s; }
.mp-link.solid, .mp-link:hover { background: var(--mul); color: #fff; }
.mp-erd { margin-top: 44px; background: #FFF8F6; border: var(--card-border); border-radius: var(--r-card); padding: var(--pad-card); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 40px; align-items: center;
 box-shadow: var(--shadow-card);
}
.mp-erd h4 { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--choc); margin: 10px 0; }
.mp-erd p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.mp-erd svg { width: 100%; height: auto; }
/* compact version that sits under a project's live preview */
.mp-erd-mini { margin-top: 20px; padding: 22px 24px; gap: 20px; border-radius: var(--r-card); grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.mp-erd-mini .mp-eyebrow { font-size: 10px; }
.mp-erd-mini h4 { font-size: 19px; margin: 6px 0 8px; }
.mp-erd-mini p { font-size: 12.5px; line-height: 1.55; }
/* full width, so it reads at normal size: the story on the left, the model on the right */
.mp-proof-fill { row-gap: 32px; }
.mp-erd.mp-erd-row { grid-column: 1 / -1; margin-top: 0; padding: var(--pad-card); gap: 48px; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-erd-row h4 { font-size: 24px; }
.mp-erd-row p { font-size: 15px; line-height: 1.65; }
.mp-built { margin-top: 22px; display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; background: #FFF8F6; border: var(--card-border); border-radius: var(--r-card); padding: var(--pad-card-sm); font-size: 15px; color: var(--muted);
 box-shadow: var(--shadow-card);
}
.mp-built b { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--choc); }

/* hand me a problem */
.mp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: -16px 0 28px; }
.mp-tabs button { border: 1px solid var(--line); background: var(--ivory); padding: 9px 18px; border-radius: var(--r-pill); cursor: var(--cursor-hot, pointer); font-size: 14px; color: var(--ink); transition: background 0.2s, color 0.2s; }
.mp-tabs button[aria-selected="true"] { background: var(--mul); color: #fff; border-color: var(--mul); }
.mp-tabs button:focus-visible, .mp-link:focus-visible { outline: 2px solid var(--mul); outline-offset: 3px; }
.mp-tri { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.mp-tri-fig { display: flex; align-items: center; justify-content: center; min-height: 520px; margin: 0; }
.mp-tri-fig svg { width: 100%; height: 100%; max-height: 660px; }
.mp-tri-card { background: #FFF8F6; border: var(--card-border); border-radius: var(--r-card); overflow: hidden;
 box-shadow: var(--shadow-card);
}
.mp-tri-card::before { content: ""; display: block; height: 4px; background: var(--mul); }
.mp-tri-body { padding: 24px 28px 22px; transition: opacity 0.3s; }
.mp-q { font-family: var(--serif); font-style: italic; font-size: 25px; color: var(--mul); line-height: 1.3; margin: 6px 0 10px; }
.mp-step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.mp-step-n { width: 34px; height: 34px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--serif); }
.mp-step-c { font-size: 11px; letter-spacing: 0.18em; font-weight: 700; margin: 0; }
.mp-step-t { font-family: var(--serif); font-size: 20px; color: var(--choc); line-height: 1.25; margin: 2px 0 3px; }
.mp-step-d { font-size: 14.5px; color: var(--muted); line-height: 1.5; margin: 0; }
.mp-step-r { font-size: 13px; font-style: italic; color: var(--ink); margin: 6px 0 0; }
.mp-step-r::before { content: "✓  "; color: var(--mul); font-style: normal; font-weight: 700; }
/* the triangle's corners are buttons: tap one to light up its step in the card */
.mp-corner { cursor: var(--cursor-hot, pointer); outline: none; }
.mp-corner rect, .mp-corner > circle:not(.mp-corner-halo) { transition: stroke-width 0.2s ease; }
.mp-corner-halo { opacity: 0; transition: opacity 0.2s ease; }
.mp-corner:hover .mp-corner-halo, .mp-corner:focus-visible .mp-corner-halo { opacity: 0.12; }
.mp-corner.on .mp-corner-halo { opacity: 0.2; }
.mp-corner:hover rect, .mp-corner.on rect { stroke-opacity: 1; stroke-width: 2.4; }
.mp-corner:focus-visible rect { stroke-width: 3; }
/* nothing starts filled in; a corner fills only once you tap it */
.mp-corner rect, .mp-corner > circle:not(.mp-corner-halo), .mp-corner text { transition: fill 0.2s ease, stroke-width 0.2s ease; }
.mp-corner.on rect, .mp-corner.on > circle:not(.mp-corner-halo) { fill: var(--c); }
.mp-corner.on text { fill: #fff; }
.mp-step { transition: opacity 0.25s ease, background 0.25s ease; }
.mp-tri-body.has-focus .mp-step:not(.lit) { opacity: 0.35; }
.mp-step.lit { background: rgba(143, 70, 97, 0.06); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: var(--r-small, 8px); }
/* fewer words: a step shows its detail only while it's lit */
.mp-step-d, .mp-step-r { display: none; }
.mp-step.lit .mp-step-d, .mp-step.lit .mp-step-r { display: block; animation: mpIn 0.45s ease both; }
/* the arrows draw themselves, one after the other, and the lit corner breathes */
.mp-tri-path path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mpDraw 0.7s ease forwards; animation-delay: calc(var(--j) * 0.6s + 0.15s); }
.mp-corner.on .mp-corner-halo { transform-box: fill-box; transform-origin: center; animation: mpBreathe 1.6s ease-in-out infinite; }
@keyframes mpDraw { to { stroke-dashoffset: 0; } }
@keyframes mpBreathe { 50% { transform: scale(1.35); opacity: 0.08; } }
@keyframes mpIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .mp-tri-path path { stroke-dashoffset: 0; animation: none; }
    .mp-corner.on .mp-corner-halo, .mp-step.lit .mp-step-d, .mp-step.lit .mp-step-r { animation: none; }
}
.mp-get { border-top: 1px solid var(--line); padding-top: 14px; margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.mp-get b { color: var(--choc); font-weight: 600; }

/* two stacks */
/* the interactive stack: layers on the left, the picked layer's card on the right */
 box-shadow: var(--shadow-card);
}

/* closing quote */
.mp-close { background: var(--plum); border-radius: var(--r-card); padding: 90px 40px; text-align: center; margin: 40px 0 0; }
.mp-close blockquote { font-family: var(--serif); font-size: 36px; line-height: 1.35; max-width: 920px; margin: 0 auto; color: #fff; }
.mp-close em { color: #F3C9D5; }
.mp-close p { margin: 22px 0 0; font-size: 12px; letter-spacing: 0.22em; color: rgba(245, 229, 225, 0.8); }

@media (max-width: 800px) {
    .mp-section { margin-bottom: 84px; }
    .mp-hero h2 { font-size: 42px; }
    .mp-thesis { font-size: 23px; }
    .mp-h2 { font-size: 33px; }
    .mp-proof, .mp-erd, .mp-erd-mini, .mp-tri { grid-template-columns: 1fr; gap: 32px; }
    .mp-projects .mp-proof { grid-template-columns: 1fr; }
    .mp-proof h3 { font-size: 40px; }
    .mp-tri-fig { min-height: 0; }
    .mp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-close blockquote { font-size: 26px; }
    .mp-close { padding: 60px 24px; }
}

@media (max-width: 560px) {
    .mp-hero h2 { font-size: 36px; }
    .mp-erd { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .mp-tri-body { transition: none; }
}

/* the one-line summary under each course in the cycle's step card */
.mis-summary { margin: 6px 0 2px; font-size: 14.5px; line-height: 1.55; color: #7A665F; }

/* ===== Marketing Minor tab: consulting-grade decks with my personality =====
   Structure borrowed from strategy decks (storyline tracker, action titles, numbered exhibits, "so what", sources),
   dressed in the site's warmth: blush paper, serif titles with an italic mulberry phrase, sticky-note takeaways.
   Type is sized in cqw (1% of the slide's width) so every slide scales as one piece; phones stack naturally. */
.mk-sbux { --acc: #2F5D50; --acc-soft: #E6EFEA; }
.mk-owala { --acc: #C8553D; --acc-soft: #FBE9E3; }
.mk-ff { --acc: #3F4A34; --acc-soft: #E3E8DC; }   /* the site's sage green */
/* 1. the cover: watch alert, a walk past the food, a Celsius spike and crash, then FuelFlow inside GSB */
.mk-ff .ff-cover { flex-direction: row; align-items: center; gap: 3cqw; padding: 4cqw 4cqw 5cqw 5cqw; background: radial-gradient(70% 90% at 75% 45%, #FFFDF8 0%, #FBF8F1 55%, #F1ECE0 100%); }
.mk-ff .ff-copy { flex: 0 0 40%; display: flex; flex-direction: column; gap: 1.6cqw; }
.mk-ff .ff-kick { margin: 0; font-size: clamp(9px, 0.95cqw, 12px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #B5651D; }
.mk-ff .ff-title { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3.8cqw, 50px); line-height: 1.04; letter-spacing: -0.02em; color: #1F1B16; }
.mk-ff .ff-title em { display: block; font-weight: 400; font-style: italic; color: var(--acc); }
.mk-ff .ff-status { display: flex; align-items: center; gap: 2cqw; }
.mk-ff .ff-watch { width: 15cqw; aspect-ratio: 0.85; padding: 1.3cqw; border-radius: 3.4cqw; background: #111; color: #FFF; box-shadow: 0 0 0 0.5cqw #2B2B2B, 0 1.6cqw 2.4cqw -1cqw rgba(0, 0, 0, 0.45); display: flex; flex-direction: column; justify-content: center; gap: 0.3cqw; font-family: system-ui, sans-serif; font-size: clamp(8px, 0.95cqw, 12px); line-height: 1.2; transition: transform 0.4s ease; }
.mk-ff .ff-watch b { font-size: 1.25em; }
.mk-ff .ff-watch span { color: rgba(255, 255, 255, 0.7); }
.mk-ff .ff-watch .ff-gcal { color: #8AB4F8; font-weight: 700; font-size: 0.85em; }
.mk-ff .ff-watch em { font-style: normal; font-weight: 700; color: #F28B82; }
.mk-ff .ff-cover.buzz .ff-watch { animation: ffBuzz 0.12s linear 6; }
@keyframes ffBuzz { 50% { transform: translateX(0.25cqw) rotate(1deg); } }
.mk-ff .ff-batt { position: relative; width: 12cqw; height: 5cqw; border: 0.35cqw solid #1F1B16; border-radius: 1cqw; padding: 0.35cqw; }
.mk-ff .ff-batt::after { content: ""; position: absolute; right: -1cqw; top: 1.4cqw; width: 0.6cqw; height: 1.6cqw; border-radius: 0 0.4cqw 0.4cqw 0; background: #1F1B16; }
.mk-ff .ff-batt i { display: block; height: 100%; width: var(--pct, 72%); border-radius: 0.5cqw; background: var(--batt, #7B9A5C); transition: width 0.5s ease, background 0.4s ease; }
.mk-ff .ff-batt span { position: absolute; left: 0; right: 0; top: 115%; text-align: center; font-family: var(--serif); font-weight: 700; font-size: clamp(13px, 1.8cqw, 22px); color: var(--batt, #7B9A5C); }
.mk-ff .ff-stat { position: relative; margin: 1.2cqw 0 0; min-height: 4.6em; font-size: clamp(12px, 1.4cqw, 17px); line-height: 1.4; color: #5A5249; }
.mk-ff .ff-stat span { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; }
.mk-ff .ff-stat b { font-family: var(--serif); font-size: 1.35em; color: #1F1B16; }
.mk-ff .ff-cover[data-scene="walk"] .ff-stat .a, .mk-ff .ff-cover[data-scene="alert"] .ff-stat .a,
.mk-ff .ff-cover[data-scene="crash"] .ff-stat .b, .mk-ff .ff-cover[data-scene="fix"] .ff-stat .c { opacity: 1; }
/* the map */
.mk-ff .ff-map { flex: 1; min-width: 0; width: 100%; height: auto; max-height: 100%; overflow: visible; }
.mk-ff .ff-map .st { stroke: #E4DDCE; stroke-width: 14; fill: none; }
.mk-ff .ff-map .sn { font: 600 11px system-ui, sans-serif; fill: #B3A995; letter-spacing: 0.05em; }
.mk-ff .ff-map .bl rect { fill: #FFFFFF; stroke: #DCD3C2; stroke-width: 2; }
.mk-ff .ff-map .bl text { font: 700 17px Georgia, serif; fill: #3B342C; text-anchor: middle; }
.mk-ff .ff-map .bl text.sm { font: 600 11px system-ui, sans-serif; fill: #8A8173; }
.mk-ff .ff-map .food rect { fill: #FFF6EA; stroke: #E9B77D; stroke-dasharray: 5 4; }
.mk-ff .ff-map .her rect { stroke: var(--acc); stroke-width: 3; }
.mk-ff .ff-map .route { fill: none; stroke: #B5651D; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 6 8; opacity: 0; transition: opacity 0.3s; }
/* the student: backpack, hurrying; limbs swing (SMIL) only during the walk */
.mk-ff .ff-map .walker .sh { fill: rgba(60, 45, 30, 0.18); }
.mk-ff .ff-map .walker .leg { stroke: #3E5A80; stroke-width: 5.5; stroke-linecap: round; }
.mk-ff .ff-map .walker .leg.back { stroke: #34496A; }
.mk-ff .ff-map .walker .arm { stroke: #C68C67; stroke-width: 4; stroke-linecap: round; }
.mk-ff .ff-map .walker .arm.back { stroke: #B57D5B; }
.mk-ff .ff-map .walker .pack { fill: #B5651D; }
.mk-ff .ff-map .walker .strap { stroke: #8C4C15; stroke-width: 2.4; stroke-linecap: round; }
.mk-ff .ff-map .walker .shirt { fill: #F2EBDC; stroke: #D9CDB6; stroke-width: 1; }
.mk-ff .ff-map .walker .head { fill: #D7A07B; }
.mk-ff .ff-map .walker .hair { fill: #2E211A; }
.mk-ff .ff-map .walker .hand-can rect { fill: #F4F1EA; stroke: #E0522F; stroke-width: 1.6; opacity: 0; transition: opacity 0.25s; }
.mk-ff .ff-cover.canned .ff-map .walker .hand-can rect { opacity: 1; }
.mk-ff .ff-map .walker { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15)); }
.mk-ff .ff-map .can { opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.mk-ff .ff-map .can rect { fill: #F4F1EA; stroke: #E0522F; stroke-width: 2.4; }
.mk-ff .ff-map .can path { stroke: #E0522F; stroke-width: 2; }
.mk-ff .ff-map .can text { font: 800 12px system-ui, sans-serif; fill: #E0522F; text-anchor: middle; }
.mk-ff .ff-map .cantag { font: 700 12px system-ui, sans-serif; fill: #E0522F; opacity: 0; transition: opacity 0.3s; }
.mk-ff .ff-map .station { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.35s ease; }
.mk-ff .ff-map .station rect { fill: var(--acc); }
.mk-ff .ff-map .station text { font: 800 11px system-ui, sans-serif; fill: #FFF; text-anchor: middle; }
.mk-ff .ff-cover:not([data-scene="alert"]) .ff-map .route { opacity: 0.85; }
.mk-ff .ff-cover[data-scene="alert"] .ff-map { opacity: 0.55; transition: opacity 0.4s; }
.mk-ff .ff-cover.canned .ff-map .can, .mk-ff .ff-cover.canned .ff-map .cantag { opacity: 1; }
.mk-ff .ff-cover[data-scene="fix"] .ff-map .station { opacity: 1; animation: ffDrop 0.6s cubic-bezier(.2, 1.5, .4, 1); }
.mk-ff .ff-cover[data-scene="fix"] .ff-map .food rect { opacity: 0.45; }
@keyframes ffDrop { from { transform: translateY(-40px) scale(0.8); } }
.mk-ff .ff-src { position: absolute; left: 5cqw; bottom: 2cqw; font-size: clamp(8px, 0.8cqw, 10px); color: #A39A8B; }
@media (prefers-reduced-motion: reduce) { .mk-ff .ff-cover .ff-watch { animation: none !important; } }
/* 3. three big numbers */
.mk-cards.ff-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-cards.ff-three i { font-style: normal; font-size: clamp(40px, 6.8cqw, 86px); letter-spacing: -0.03em; white-space: nowrap; }
.mk-cards.ff-three h5 { min-height: 2.5em; }
.mk-cards.ff-three > div { padding: 2.2cqw; }
/* 7. sixty seconds, five steps */
.mk-timeline.ff-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4cqw; margin: 3cqw 0 0; padding: 0; list-style: none; }
.mk-timeline.ff-journey li { font-size: clamp(14px, 1.9cqw, 24px) !important; line-height: 1.3; padding-top: 3.6cqw; }
.mk-timeline.ff-journey b { margin: 0.4cqw 0 0.8cqw; font-size: clamp(10px, 1.05cqw, 13px); color: var(--acc); }
.mk-timeline.ff-journey::before { left: 10%; right: 10%; }
.mk-split.ff-sees { flex: 0 0 auto; grid-template-columns: 1fr 1fr; align-items: stretch; margin-top: 3.4cqw; }
.ff-logo { position: absolute; top: 1.6cqw; right: 3.2cqw; width: 3.4cqw; min-width: 30px; height: auto; }
.ff-sum { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.4cqw; align-items: stretch; }
.ff-sum .mk-scr { min-height: 0; }
.ff-station { position: relative; margin: 0; min-height: 0; border-radius: 1.4cqw; overflow: hidden; border: 1px solid var(--line); }
.ff-station img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.ff-station figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6cqw 1.2cqw 0.8cqw; background: linear-gradient(transparent, rgba(20, 14, 10, 0.75)); font-size: clamp(10px, 1cqw, 13px); font-style: italic; color: #FFFFFF; }
/* FuelFlow: persona, tabs, product features, partners and the business-case calculator */
.ff-buyer, .ff-product { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3cqw; align-items: center; }
.ff-persona { padding: 2cqw 2.2cqw; border-radius: 1.4cqw; background: var(--acc); color: #FFFFFF; }
.ff-kicker, .ff-label { margin: 0 0 0.6cqw; font-size: clamp(9px, 0.9cqw, 11px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.ff-persona .ff-kicker { color: #DDE5D3; }
.mk-ff .ff-persona h5 { color: #FFFFFF !important; }
.ff-persona h5 { margin: 0 !important; font-family: var(--serif); font-size: clamp(16px, 2cqw, 25px) !important; font-weight: 400 !important; line-height: 1.2; color: #FFFFFF; }
.ff-where { margin: 0.4cqw 0 1.2cqw; font-style: italic; color: #DDE5D3; }
.ff-persona ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5cqw; }
.ff-persona li { padding-top: 0.5cqw; border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: clamp(12px, 1.25cqw, 15px); }
.ff-tabrow { display: flex; flex-wrap: wrap; gap: 0.6cqw; margin-bottom: 1.2cqw; }
.ff-tabrow button { padding: 0.5cqw 1.2cqw; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #FFFFFF; font: inherit; font-size: clamp(11px, 1.1cqw, 14px); font-weight: 600; color: var(--ink); cursor: var(--cursor-hot, pointer); }
.ff-tabrow button[aria-selected="true"] { border-color: var(--acc); background: var(--acc); color: #FFFFFF; }
.ff-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8cqw; }
.ff-list[hidden] { display: none; }
.ff-list li { position: relative; padding: 0 0 0.8cqw 2cqw; border-bottom: 1px dashed var(--line); font-size: clamp(13px, 1.4cqw, 17px); color: var(--ink); }
.ff-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.8cqw; height: 0.8cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--acc); }
.ff-features { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; }
.ff-features li { padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); }
.ff-features b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 1.45cqw, 18px); color: var(--acc); }
.ff-features span { display: block; margin-top: 0.3cqw; font-size: clamp(11px, 1.1cqw, 14px); color: var(--muted); }
.ff-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8cqw; }
.ff-partners b { margin-right: 0.6cqw; font-size: clamp(9px, 0.9cqw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc); }
.ff-partners span { padding: 0.4cqw 1.1cqw; border-radius: var(--r-pill); background: var(--acc-soft); font-size: clamp(11px, 1.1cqw, 14px); font-weight: 600; color: var(--acc); }
.ff-calc { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4cqw; align-items: center; }
.ff-label b { margin-left: 0.6cqw; font-family: var(--serif); font-size: 2em; letter-spacing: 0; color: var(--choc); }
.ff-range { width: 100%; margin: 0 0 2cqw; accent-color: var(--acc); }
.ff-seg { display: flex; gap: 0.6cqw; margin-bottom: 1.6cqw; }
.ff-seg button { flex: 1; padding: 0.8cqw; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: #FFFFFF; font: inherit; font-size: clamp(12px, 1.2cqw, 15px); font-weight: 600; color: var(--ink); cursor: var(--cursor-hot, pointer); }
.ff-seg button[aria-pressed="true"] { border-color: var(--acc); background: var(--acc); color: #FFFFFF; }
.ff-note { margin: 0; font-size: clamp(11px, 1.1cqw, 14px); color: var(--muted); }
.ff-out { display: grid; gap: 1.4cqw; }
.ff-out > div:not(.ff-bars) { padding: 1.4cqw 1.8cqw; border-radius: 1.2cqw; border: 1px solid var(--line); background: #FFFFFF; }
.ff-out span { display: block; font-size: clamp(10px, 1cqw, 13px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ff-out b { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.6cqw, 46px); color: var(--choc); }
.ff-out .ff-back { background: var(--acc); border-color: var(--acc); }
.ff-out .ff-back span, .ff-out .ff-back b { color: #FFFFFF; }
.ff-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.5cqw; }
.ff-bars i { height: 1.2cqw; min-height: 8px; border-radius: var(--r-pill); background: var(--acc-soft); transition: background 0.2s ease; }
.ff-bars i.on { background: var(--acc); }
@media (max-width: 800px) {
    .ff-buyer, .ff-product, .ff-calc, .ff-sum { grid-template-columns: 1fr; gap: 20px; }
    .ff-station { aspect-ratio: 1; }
}

.mk-deck { margin: 0 0 36px; }
.mk-stage { position: relative; aspect-ratio: 16 / 9; container-type: inline-size; border-radius: var(--r-card); overflow: hidden;
    background: radial-gradient(circle at 100% 0%, #F7DDE2 0, rgba(247, 221, 226, 0) 34%), radial-gradient(circle at 0% 100%, var(--acc-soft) 0, rgba(255, 255, 255, 0) 30%), #FFFCFB;
    border: 1px solid var(--line); box-shadow: 0 30px 60px -35px rgba(42, 24, 16, 0.4); }
.mk-slide { position: absolute; inset: 0; padding: 3cqw 4.4cqw 2.4cqw; display: flex; flex-direction: column; gap: 1.5cqw; color: var(--choc); }
.mk-slide[hidden] { display: none; }
.mk-slide.entering { animation: mk-in 0.35s ease; }
@keyframes mk-in { from { opacity: 0; transform: translateX(1.5cqw); } }
.mk-slide p, .mk-slide li { font-size: clamp(12px, 1.3cqw, 16px); line-height: 1.45; margin: 0; }
.mk-slide ul, .mk-slide ol { list-style: none; margin: 0; padding: 0; }
.mk-slide h5 { margin: 0 0 0.6cqw; font-size: clamp(13px, 1.45cqw, 18px); font-weight: 700; color: var(--choc); }
.mk-slide b { font-weight: 700; }

/* tracker + brand tag */
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.mk-brandtag { font-family: var(--serif); font-style: italic; font-size: clamp(10px, 1.05cqw, 13px); color: var(--acc); white-space: nowrap; }

/* action title: the takeaway, with one phrase in italic mulberry and a hand-drawn underline */
.mk-h { margin: 0; padding-bottom: 1.2cqw; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 2.45cqw, 31px); line-height: 1.2; color: var(--choc); max-width: 70ch; }
.mk-h em { font-style: italic; color: var(--mul); background: linear-gradient(transparent 72%, rgba(233, 166, 188, 0.45) 72%, rgba(233, 166, 188, 0.45) 90%, transparent 90%); padding: 0 0.1em; }

/* footer */
.mk-foot { margin-top: auto; display: flex; align-items: center; gap: 1.5cqw; font-size: clamp(9px, 0.85cqw, 11px); color: var(--muted); }
.mk-foot > span:first-child { flex: 1; }
.mk-sig { font-family: var(--serif); font-style: italic; color: var(--mul); font-size: clamp(10px, 1cqw, 13px); }
.mk-page { display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--mul); color: #FFF8F6; font-weight: 700; font-size: clamp(9px, 0.9cqw, 11px); }

/* exhibits, labels, sticky-note takeaways */
.mk-exhibit { margin: 0; display: flex; flex-direction: column; gap: 1cqw; min-height: 0; }
.mk-exhibit.grow { flex: 1; }
.mk-exhibit figcaption, .mk-exlabel { font-size: clamp(9px, 0.95cqw, 12px) !important; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); margin: 0; }
/* the takeaway: a clean card with a mulberry rule on the left, set straight (no tilt, no sticky-note yellow) */
.mk-sowhat { position: relative; padding: 1.2cqw 1.6cqw; border-left: 0.35cqw solid var(--mul); border-radius: 0 1cqw 1cqw 0; background: #FFF8F6; color: var(--ink); box-shadow: 0 0.5cqw 1.2cqw -0.9cqw rgba(42, 24, 16, 0.3); font-size: clamp(12px, 1.3cqw, 16px) !important; }
.mk-sowhat b { display: block; font-family: inherit; font-style: normal; font-weight: 700; font-size: clamp(9px, 0.85cqw, 11px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mul); margin-bottom: 0.4cqw; }
.mk-sowhat.inline { display: flex; align-items: baseline; gap: 1.4cqw; }
.mk-sowhat.inline b { display: inline; margin: 0; white-space: nowrap; }

/* executive summary: the situation · the catch · the fix */
.mk-scr { flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 1.2cqw; counter-reset: s; }
.mk-scr li { counter-increment: s; display: grid; grid-template-columns: 4cqw 15cqw 1fr; gap: 1.6cqw; align-items: center; padding: 1.4cqw 2cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); }
.mk-scr li::before { content: counter(s); display: grid; place-items: center; width: 4cqw; height: 4cqw; min-width: 28px; min-height: 28px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); font-family: var(--serif); font-size: clamp(15px, 1.9cqw, 24px); }
.mk-scr li:last-child { background: var(--acc); border-color: var(--acc); }
.mk-scr li:last-child::before { background: rgba(255, 255, 255, 0.18); color: #FFF8F6; }
.mk-scr li:last-child span, .mk-scr li:last-child p, .mk-scr li:last-child b { color: #FFF8F6; }
.mk-scr span { font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.9cqw, 24px); color: var(--mul); }
.mk-scr p { font-size: clamp(12px, 1.45cqw, 18px) !important; color: var(--ink); }
.mk-scr b { color: var(--choc); }

/* chart + side panel */
.mk-split { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.4cqw; align-items: center; min-height: 0; }
.mk-side { display: flex; flex-direction: column; gap: 1.4cqw; }
.mk-hbars { display: grid; gap: 1.1cqw; }
.mk-hbars li { display: grid; grid-template-columns: 11cqw 1fr 4cqw; gap: 1.2cqw; align-items: center; }
.mk-hbars span { font-size: clamp(11px, 1.25cqw, 15px); }
.mk-hbars i { display: block; height: 3cqw; min-height: 14px; width: var(--w); border-radius: 0 var(--r-pill) var(--r-pill) 0; background: #D9CCC8; }
.mk-hbars li.hi i { background: var(--acc); }
.mk-hbars li.hi span, .mk-hbars li.hi b { font-weight: 700; color: var(--choc); }
.mk-hbars b { font-family: var(--serif); font-weight: 400; font-size: clamp(14px, 1.7cqw, 21px); color: var(--ink); }
.mk-kpis { display: grid; gap: 1cqw; }
.mk-kpis li { display: grid; grid-template-columns: 7cqw 1fr; gap: 1.2cqw; align-items: baseline; padding-bottom: 1cqw; border-bottom: 1px dashed var(--line); color: var(--ink); }
.mk-kpis b { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.6cqw, 33px); color: var(--choc); }
.mk-kpis.text li { grid-template-columns: 10cqw 1fr; }
.mk-kpis.text b { font-family: inherit; font-weight: 700; font-size: clamp(12px, 1.3cqw, 16px); }

/* opportunity tree */
.mk-outcome { display: flex; align-items: baseline; gap: 1.4cqw; padding: 1.2cqw 1.8cqw; border-radius: 1.2cqw; background: var(--acc); color: #FFF8F6; font-size: clamp(12px, 1.4cqw, 17px) !important; }
.mk-outcome span { flex: none; font-family: var(--serif); font-style: italic; opacity: 0.85; }
.mk-tree { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; min-height: 0; }
.mk-branch { display: flex; flex-direction: column; gap: 0.9cqw; padding: 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); }
.mk-branch h5 { display: flex; align-items: center; gap: 0.8cqw; margin: 0; font-size: clamp(13px, 1.5cqw, 19px); }
.mk-branch h5 i { flex: none; display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--acc); color: #FFF8F6; font-style: normal; font-size: clamp(10px, 1.1cqw, 14px); }
.mk-why { padding: 0.8cqw 1cqw; border-radius: 0.8cqw; background: var(--acc-soft); color: var(--ink); font-size: clamp(11px, 1.15cqw, 14px) !important; }
.mk-why b, .mk-test b { display: block; font-size: clamp(9px, 0.85cqw, 11px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }
.mk-branch li { position: relative; padding-left: 1.4cqw; font-size: clamp(12px, 1.3cqw, 16px); }
.mk-branch li + li { margin-top: 0.3cqw; }
.mk-branch li::before { content: "✦"; position: absolute; left: 0; color: var(--acc); font-size: 0.75em; top: 0.2em; }
.mk-test { margin-top: auto !important; padding-top: 0.9cqw; border-top: 1px dashed var(--line); color: var(--muted); font-style: italic; font-size: clamp(11px, 1.15cqw, 14px) !important; }

/* RICE bars */
.mk-bars { flex: 1; display: grid; gap: 0.6cqw; align-content: center; }
.mk-bars li { display: grid; grid-template-columns: 27cqw 1fr 6.5cqw; gap: 1.4cqw; align-items: center; }
.mk-bar-label { font-size: clamp(11px, 1.2cqw, 15px); }
.mk-bar { height: 1.7cqw; min-height: 10px; border-radius: var(--r-pill); background: rgba(143, 70, 97, 0.07); overflow: hidden; }
.mk-bar i { display: block; height: 100%; width: var(--w); border-radius: var(--r-pill); background: color-mix(in srgb, var(--acc) 45%, #fff); }
.mk-bars li.top .mk-bar i { background: var(--acc); }
.mk-bars li.top .mk-bar-label { font-weight: 700; }
.mk-bars li.low .mk-bar i { background: #D8C3C3; }
.mk-bar-val { font-size: clamp(11px, 1.15cqw, 14px); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }

/* 2×2 matrix */
.mk-matrix { flex: 1; position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1cqw; margin: 0 0 2.2cqw 2.6cqw; min-height: 0; }
.mk-matrix .q { padding: 1.5cqw 1.8cqw; border-radius: 1.4cqw; }
.mk-matrix .q p { color: var(--ink); line-height: 1.55; }
.mk-matrix .q h5 { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.8cqw, 22px); }
.mk-matrix .q h5 small { display: block; margin-top: 0.2cqw; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(9px, 0.9cqw, 11px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.mk-matrix .win { background: var(--acc-soft); }
.mk-matrix .bet { background: var(--acc); }
.mk-matrix .bet h5, .mk-matrix .bet p { color: #FFF8F6; }
.mk-matrix .fill { background: #FBF3E6; }
.mk-matrix .cut { background: #F7E4E6; padding-left: 8.4cqw; }  /* clears the WARO badge at the center */
.mk-goal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); width: 13cqw; height: 13cqw; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--mul); color: #FFF8F6; font-size: clamp(9px, 0.95cqw, 12px); letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 0 0.6cqw #FFFCFB; }
.mk-goal b { display: block; margin-top: 0.3cqw; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(12px, 1.6cqw, 20px); letter-spacing: 0; text-transform: none; }
.mk-matrix .ax { position: absolute; font-size: clamp(9px, 0.85cqw, 11px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.mk-matrix .ax.y { left: -1.6cqw; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); }
.mk-matrix .ax.x { bottom: -2.2cqw; left: 50%; transform: translateX(-50%); }

/* prototype / concept: numbered callouts beside an image */
.mk-proto { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3.4cqw; align-items: center; min-height: 0; }
.mk-proto img { width: 100%; height: 100%; max-height: 38cqw; object-fit: contain; border-radius: 1.4cqw; transform: rotate(1.2deg); box-shadow: 0 1.4cqw 3cqw -2cqw rgba(42, 24, 16, 0.5); }
.mk-proto img.dark { background: #0E0D0D; padding: 1.2cqw; box-sizing: border-box; }
.mk-callouts { display: grid; gap: 1.2cqw; counter-reset: c; }
.mk-callouts li { counter-increment: c; display: grid; grid-template-columns: 3cqw 1fr; column-gap: 1.2cqw; color: var(--ink); }
.mk-callouts li::before { content: counter(c); grid-row: span 2; display: grid; place-items: center; width: 3cqw; height: 3cqw; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--acc); color: #FFF8F6; font-weight: 700; font-size: clamp(11px, 1.2cqw, 15px); }
.mk-callouts b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.75cqw, 22px); color: var(--choc); margin-bottom: 0.2cqw; }

/* north star */
.mk-star { flex: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.4cqw; align-items: center; }
.mk-star-main { display: flex; flex-direction: column; gap: 1cqw; }
.mk-star-main b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(48px, 9cqw, 116px); line-height: 0.9; color: var(--acc); }
.mk-star-main span { font-size: clamp(12px, 1.4cqw, 17px); line-height: 1.5; color: var(--ink); }
.mk-drivers { display: grid; gap: 0.8cqw; counter-reset: d; }
.mk-drivers li { counter-increment: d; display: grid; grid-template-columns: 2.8cqw 12cqw 1fr; gap: 1.2cqw; align-items: center; padding: 0.9cqw 1.2cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); color: var(--muted); }
.mk-drivers li::before { content: counter(d); display: grid; place-items: center; width: 2.8cqw; height: 2.8cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--acc-soft); color: var(--acc); font-weight: 700; font-size: clamp(10px, 1.1cqw, 14px); }
.mk-drivers b { color: var(--choc); }

/* Starbucks: video cover, order waffle, the mobile-order plateau, the prize model, RICE by quadrant, WARO targets */
.mk-slide.sb-cover { flex-direction: row; align-items: center; gap: 3cqw; padding: 4cqw 4cqw 5cqw 5cqw; color: #F2EBDC;
    background: radial-gradient(60% 80% at 78% 45%, #1E4A40 0%, #12302A 60%, #0E2621 100%); }
.sb-cover > * { position: relative; z-index: 1; }
.sb-cover .sb-copy { flex: 0 0 40%; display: flex; flex-direction: column; gap: 1.8cqw; }
.sb-cover .sb-kick { align-self: flex-start; padding: 0.45cqw 1.1cqw; border-radius: var(--r-pill); border: 1px solid rgba(226, 190, 114, 0.6); font-size: clamp(9px, 0.95cqw, 12px); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #E2BE72; }
.sb-cover .sb-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.4cqw, 58px); line-height: 1.02; letter-spacing: -0.02em; color: #F2EBDC; }
.sb-cover .sb-title em { display: block; font-style: italic; color: #E2BE72; }
.sb-cover .sb-one { margin: 0; padding-left: 1.2cqw; border-left: 2px solid #E2BE72; font-size: clamp(13px, 1.6cqw, 20px); line-height: 1.35; color: rgba(242, 235, 220, 0.85); }
.sb-cover .sb-one b { font-family: var(--serif); font-weight: 400; font-size: 1.5em; color: #FFFFFF; }

/* the cup wall: 4 weeks × 7 days, one cup per order, dropping in one at a time */
.sb-cover .sb-wall { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 1cqw; }
.sb-cover .sb-total { display: flex; flex-direction: column; align-items: flex-end; }
.sb-cover .sb-total b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 5cqw, 64px); line-height: 1; color: #F2EBDC; font-variant-numeric: tabular-nums; }
.sb-cover .sb-total span { font-size: clamp(9px, 1cqw, 12px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242, 235, 220, 0.6); }
.sb-cover .sb-days, .sb-cover .sb-cups { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.8cqw; }
.sb-cover .sb-days span { text-align: center; font-size: clamp(8px, 0.95cqw, 12px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(242, 235, 220, 0.5); }
.sb-cover .sb-days .we { color: #E2BE72; }
.sb-cover .sb-cups { margin: 0; padding: 0; list-style: none; }
.sb-cover .sb-cups li { aspect-ratio: 1 / 1.1; display: grid; place-items: center; border-radius: 0.8cqw; background: rgba(242, 235, 220, 0.04); border: 1px dashed rgba(242, 235, 220, 0.12); }
.sb-cover .sb-cups li svg { width: 80%; height: auto; opacity: 0; transform: translateY(-2cqw) scale(0.9); filter: drop-shadow(0 0.6cqw 0.8cqw rgba(0, 0, 0, 0.35)); }
.sb-cover .sb-cups li.in svg { opacity: 1; transform: none; transition: opacity 0.25s ease, transform 0.45s cubic-bezier(.2, 1.4, .4, 1); }
.sb-cover .sb-cups li.in { border-style: solid; border-color: rgba(242, 235, 220, 0.18); }
.sb-cover .sb-src { position: absolute; left: 5cqw; bottom: 2cqw; font-size: clamp(8px, 0.8cqw, 10px); color: rgba(242, 235, 220, 0.5); }
.sb-cover .sb-sig { position: absolute; right: 3cqw; bottom: 2cqw; font-family: var(--serif); font-style: italic; font-size: clamp(10px, 1.05cqw, 13px); color: #E2BE72; }

.sb-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.55cqw; max-width: 30cqw; }
.sb-waffle i { aspect-ratio: 1; border-radius: 50%; background: #E6DCD8; }
.sb-waffle i.on { background: var(--acc); }
.sb-legend { display: flex; flex-wrap: wrap; gap: 0.5cqw 1.6cqw; font-size: clamp(10px, 1.05cqw, 13px) !important; color: var(--muted); }
.sb-legend span { display: inline-flex; align-items: center; gap: 0.6cqw; }
.sb-legend span::before { content: ""; width: 1.1cqw; height: 1.1cqw; min-width: 9px; min-height: 9px; border-radius: 50%; background: #E6DCD8; }
.sb-legend span.on::before { background: var(--acc); }
.sb-legend span.base::before { border-radius: 0.3cqw; background: transparent; box-shadow: inset 0 0 0 2px var(--mul); }
.sb-legend b { color: var(--choc); }

.sb-plateau { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3cqw; }
.sb-plateau .mk-exhibit { min-height: 0; }
.sb-cols { flex: 1; min-height: 12cqw; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.7cqw; }
.sb-cols li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.4cqw; min-height: 0; }
.sb-cols i { width: 100%; flex: 0 0 calc(var(--h) * 0.72); border-radius: 0.6cqw 0.6cqw 0 0; background: color-mix(in srgb, var(--acc) 38%, #FFFFFF); transform-origin: bottom; }
.sb-cols li.up i { background: var(--acc); }
.sb-cols b { font-size: clamp(10px, 1.1cqw, 14px); color: var(--choc); }
.sb-cols span { font-size: clamp(7px, 0.75cqw, 10px); color: var(--muted); white-space: nowrap; }
.sb-flat { font-family: var(--serif); font-style: italic; color: var(--mul); font-size: clamp(12px, 1.35cqw, 17px) !important; }
.sb-flat span { background: linear-gradient(transparent 70%, rgba(233, 166, 188, 0.45) 70%, rgba(233, 166, 188, 0.45) 90%, transparent 90%); }
.sb-tiles { display: grid; gap: 1.2cqw; align-content: center; }
.sb-tile { display: grid; gap: 0.3cqw; padding: 1.4cqw 1.6cqw; border-radius: 1.4cqw; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.9); }
.sb-tile > b { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.4cqw, 44px); line-height: 1; color: var(--choc); }
.sb-tile > span { font-size: clamp(11px, 1.1cqw, 14px); color: var(--muted); }
.sb-tile em { font-style: normal; font-weight: 700; color: var(--acc); }
.sb-tile svg { width: 100%; height: 3.2cqw; min-height: 24px; overflow: visible; }
.sb-tile path { fill: none; stroke: var(--acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.sb-prize { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 3.4cqw; align-items: center; }
.sb-eq li { display: grid; grid-template-columns: 2cqw 9.5cqw 1fr; gap: 0.8cqw; align-items: baseline; padding: 0.5cqw 0; border-bottom: 1px dashed var(--line); color: var(--ink); }
.sb-eq li > b:first-child { grid-column: 2; }
.sb-eq i { font-style: normal; font-family: var(--serif); color: var(--muted); }
.sb-eq b { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 2.2cqw, 28px); color: var(--choc); }
.sb-eq li.sum { margin-top: 0.6cqw; padding: 1cqw 1.2cqw 1cqw 0; border: 0; border-radius: 1.2cqw; background: var(--acc); color: #FFF8F6; }
.sb-eq li.sum i, .sb-eq li.sum b { color: #FFF8F6; text-align: right; }
.sb-heat { width: 100%; border-collapse: separate; border-spacing: 0.6cqw; }
.sb-heat th { padding: 0 0.4cqw; font-size: clamp(9px, 0.95cqw, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); text-align: center; }
.sb-heat tbody th { text-align: right; white-space: nowrap; }
.sb-heat td { padding: 1.5cqw 0.6cqw; border-radius: 1cqw; text-align: center; font-family: var(--serif); font-size: clamp(14px, 2cqw, 25px); color: var(--choc); background: color-mix(in srgb, var(--acc) calc(8% + var(--a) * 92%), #F6F1EC); }
.sb-heat td.dark { color: #FFF8F6; }
.sb-heat td.base { box-shadow: 0 0 0 0.3cqw #FFFCFB, 0 0 0 0.6cqw var(--mul); }

.sb-quads { display: flex; flex-wrap: wrap; gap: 0.4cqw 1.6cqw; font-size: clamp(10px, 1cqw, 13px) !important; color: var(--muted); }
.sb-quads span { display: inline-flex; align-items: center; gap: 0.5cqw; }
.sb-quads span::before { content: ""; width: 1.6cqw; height: 0.9cqw; min-width: 12px; min-height: 7px; border-radius: var(--r-pill); }
.sb-quads .win::before, .sb-rice li.win .mk-bar i { background: var(--acc); }
.sb-quads .bet::before, .sb-rice li.bet .mk-bar i { background: color-mix(in srgb, var(--acc) 40%, #FFFFFF); }
.sb-quads .fill::before, .sb-rice li.fill .mk-bar i { background: #DDBF7E; }
.sb-quads .cut::before, .sb-rice li.cut .mk-bar i { background: #D8C3C3; }
.sb-rice li.win .mk-bar-label { font-weight: 700; color: var(--choc); }

.mk-star-main .sb-drivers { display: flex; flex-wrap: wrap; gap: 0.5cqw; }
.mk-star-main .sb-drivers li { padding: 0.3cqw 0.9cqw; border-radius: var(--r-pill); background: var(--acc-soft); font-size: clamp(10px, 1cqw, 13px); font-weight: 700; color: var(--acc); }
.mk-star-main .sb-guards li { display: grid; grid-template-columns: 7cqw 1fr; gap: 1cqw; align-items: baseline; padding-top: 0.5cqw; border-top: 1px dashed var(--line); color: var(--ink); font-size: clamp(11px, 1.15cqw, 14px); }
.mk-star-main .sb-guards b { font-family: var(--serif); font-style: normal; font-size: clamp(14px, 1.8cqw, 22px); line-height: 1.2; color: var(--mul); }
.sb-waro-chart { width: 100%; height: auto; max-height: 34cqw; overflow: visible; }
.sb-waro-chart .ph.p0 { fill: var(--acc-soft); }
.sb-waro-chart .ph.p1 { fill: #F3ECE0; }
.sb-waro-chart .ph.p2 { fill: #F7E4E6; }
.sb-waro-chart .phn { font-size: 2.5px; font-weight: 700; fill: var(--acc); }
.sb-waro-chart .phs { font-size: 2.1px; fill: var(--muted); }
.sb-waro-chart .grid { stroke: var(--line); stroke-width: 0.25; stroke-dasharray: 1 1; }
.sb-waro-chart .ax { font-size: 2.2px; fill: var(--muted); }
.sb-waro-chart .ln { fill: none; stroke: var(--mul); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-waro-chart .dt { fill: var(--mul); }
.sb-waro-chart .val { font-size: 2.8px; font-weight: 700; fill: var(--choc); }

/* charts build in each time their slide opens */
@media (prefers-reduced-motion: no-preference) {
    .mk-slide:not([hidden]) .sb-waffle i { animation: sb-pop 0.35s calc(var(--n) * 9ms) ease-out both; }
    .mk-slide:not([hidden]) .sb-cols i { animation: sb-grow 0.5s calc(var(--n) * 50ms) ease-out both; }
    .mk-slide:not([hidden]) .sb-rice .mk-bar i { animation: sb-wide 0.6s calc(var(--n) * 50ms) ease-out both; }
    .mk-slide:not([hidden]) .sb-waro-chart .ln { stroke-dasharray: 100; animation: sb-draw 1.2s 0.2s ease-in-out both; }
    .mk-slide:not([hidden]) .sb-waro-chart .dt, .mk-slide:not([hidden]) .sb-waro-chart .val { animation: sb-fade 0.3s calc(0.3s + var(--n) * 0.25s) both; }
}
@keyframes sb-pop { from { transform: scale(0); } }
@keyframes sb-grow { from { transform: scaleY(0); } }
@keyframes sb-wide { from { width: 0; } }
@keyframes sb-draw { from { stroke-dashoffset: 100; } }
@keyframes sb-fade { from { opacity: 0; } }

/* Owala: root causes, numbers, positioning, 4 P's, pilot */
.mk-cards { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; min-height: 0; }
.mk-cards > div { display: flex; flex-direction: column; gap: 0.7cqw; padding: 1.8cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); }
.mk-cards i { font-style: italic; font-family: var(--serif); font-size: clamp(30px, 4.4cqw, 56px); line-height: 1; color: var(--acc); }
.mk-cards h5 { margin: auto 0 0 !important; font-family: var(--serif); font-weight: 400 !important; font-size: clamp(15px, 1.8cqw, 22px) !important; }
.mk-cards p { color: var(--ink); }
.mk-numbers { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; align-items: center; }
.mk-numbers li { padding: 1.8cqw 1.6cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.mk-numbers li.hi { background: var(--acc); border-color: var(--acc); }
.mk-numbers li.hi b, .mk-numbers li.hi span { color: #FFF8F6; }
.mk-numbers b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 5cqw, 64px); line-height: 1; color: var(--choc); margin-bottom: 1cqw; }
.mk-numbers span { font-size: clamp(12px, 1.3cqw, 16px); color: var(--ink); }
.mk-position { flex: 1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 3cqw; align-items: center; min-height: 0; }
.mk-position svg { width: 100%; height: auto; max-height: 30cqw; overflow: visible; }
.mk-zone { fill: var(--acc-soft); opacity: 0.8; rx: 10; }
.mk-axis { stroke: rgba(42, 24, 16, 0.22); stroke-width: 1.2; }
.mk-axis-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--muted); }
.mk-dot { fill: #B8A7A2; }
.mk-dot.owala-now { fill: none; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 3 2; }
.mk-dot.owala { fill: var(--acc); }
.mk-brand { font-size: 12px; fill: var(--ink); }
.mk-brand.strong { font-weight: 700; fill: var(--acc); font-family: Georgia, serif; font-style: italic; font-size: 13px; }
.mk-move { fill: none; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 5 4; }
.mk-arrowhead { fill: var(--acc); }
.mk-ps { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; min-height: 0; }
.mk-ps > div { display: flex; flex-direction: column; gap: 0.8cqw; padding: 1.8cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); border-top: 0.45cqw solid var(--acc); }
.mk-ps h5 { font-family: var(--serif); font-style: italic; font-weight: 400 !important; font-size: clamp(18px, 2.3cqw, 29px) !important; color: var(--mul) !important; }
.mk-ps p { color: var(--ink); }
.mk-price { display: block; margin-bottom: 0.6cqw; font-family: var(--serif); font-weight: 400; font-size: clamp(16px, 2cqw, 25px); color: var(--acc); }
.mk-why-p { margin-top: auto !important; padding-top: 1cqw; border-top: 1px dashed var(--line); color: var(--acc) !important; font-weight: 600; }
.mk-phases { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqw; counter-reset: ph; position: relative; }
.mk-phases li { counter-increment: ph; position: relative; padding: 1.6cqw 1.8cqw; border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); color: var(--ink); }
.mk-phases li:first-child { background: var(--acc); border-color: var(--acc); color: #FFF8F6; }
.mk-phases li:first-child b { color: #FFF8F6; }
.mk-phases b { display: block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 2.1cqw, 26px); color: var(--mul); margin-bottom: 0.4cqw; }
.mk-phases b::before { content: "0" counter(ph) " "; font-style: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.5em; font-weight: 700; letter-spacing: 0.1em; vertical-align: middle; margin-right: 0.4em; opacity: 0.8; }
.mk-phases { flex: 0 1 auto; }
.mk-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.mk-timeline::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 1cqw; height: 0.3cqw; min-height: 2px; background: var(--acc-soft); }
.mk-timeline li { position: relative; text-align: center; padding-top: 2.8cqw; font-family: var(--serif); font-size: clamp(13px, 1.55cqw, 19px) !important; color: var(--choc); }
.mk-timeline li::before { content: "✦"; position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: var(--acc); color: #FFF8F6; font-size: clamp(8px, 0.9cqw, 11px); box-shadow: 0 0 0 0.5cqw var(--acc-soft); }
.mk-timeline b { display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(9px, 0.9cqw, 11px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.1cqw; }
.mk-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2cqw; }
.mk-metrics li { padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: var(--acc-soft); color: var(--ink); }
.mk-metrics b { display: block; font-size: clamp(10px, 1cqw, 13px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--acc); margin-bottom: 0.3cqw; }

/* stage controls and chapter buttons */
/* ‹ › beside the numbered slide menu, under the slide (never on top of it) */
.mk-nav-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.mk-nav-row .mk-chapters { flex: 1; margin-top: 0; }
.mk-step { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--mul); font-size: 20px; line-height: 1; cursor: var(--cursor-hot, pointer); }
.mk-step:hover { border-color: var(--acc); }
.mk-step:focus-visible { outline: 2px solid var(--mul); outline-offset: 2px; }
/* chapter dots, like the tracker down the page's edge: small dots, the current one a long pill in the deck's color */
.mk-chapters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.mk-chapters button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: var(--r-pill); background: #D9C2C4; cursor: var(--cursor-hot, pointer);
    position: relative; transition: width 0.3s cubic-bezier(.2, .8, .2, 1), background 0.2s ease; }
/* a bigger tap area than the dot itself */
.mk-chapters button::before { content: ""; position: absolute; inset: -12px -4px; }
.mk-chapters button:hover { background: var(--acc); }
.mk-chapters button[aria-pressed="true"] { width: 30px; background: var(--mul); }
.mk-chapters button:focus-visible { outline: 2px solid var(--mul); outline-offset: 3px; }
/* the current chapter, named under the dots in small caps */
.mk-chapter-now { margin: 10px 0 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mul); }
.mk-chapter-now b { margin-right: 6px; font-variant-numeric: tabular-nums; color: var(--acc); }
.mk-chapter-now span { margin-left: 8px; font-weight: 600; letter-spacing: 0.12em; color: #A88A8F; }
@media (prefers-reduced-motion: reduce) { .mk-chapters button { transition: none; } }
/* phones: smaller dots, closer together, so a ten-slide deck stays on one line */
@media (max-width: 800px) {
    .mk-chapters { gap: 7px; flex-wrap: nowrap; }
    .mk-chapters button { width: 8px; height: 8px; }
    .mk-chapters button[aria-pressed="true"] { width: 24px; }
}

/* summary under each deck */
.mk-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 52px; align-items: start; }
.mk-info h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; color: var(--choc); margin: 0 0 10px; line-height: 1.1; }
.mk-info .mp-proof-sub { margin-bottom: 0; }

@media (max-width: 800px) {
    .mk-stage { aspect-ratio: auto; }
    .mk-slide { position: relative; inset: auto; padding: 20px 18px 18px; gap: 14px; }
    .mk-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .mk-split, .mk-proto, .mk-star, .mk-position, .mk-info { grid-template-columns: 1fr; gap: 18px; }
    .mk-tree, .mk-cards, .mk-phases { grid-template-columns: 1fr; gap: 10px; }
    .mk-ps, .mk-numbers, .mk-metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mk-scr li { grid-template-columns: 30px 1fr; row-gap: 4px; padding: 14px; }
    .mk-scr li p { grid-column: 1 / -1; }
    .mk-hbars li { grid-template-columns: 90px 1fr 30px; }
    .mk-kpis li, .mk-kpis.text li { grid-template-columns: 76px 1fr; }
    .mk-bars li { grid-template-columns: 1fr 64px; gap: 4px 10px; }
    .mk-bar-label { grid-column: 1 / -1; }
    .mk-matrix { grid-template-columns: 1fr; grid-template-rows: none; margin: 0; }
    .mk-goal { position: static; transform: none; width: auto; height: auto; border-radius: var(--r-inset); padding: 12px; box-shadow: none; }
    .mk-matrix .ax { display: none; }
    .mk-matrix .cut { padding-left: 1.8cqw; }
    .mk-proto img { width: auto; max-width: 100%; height: auto; max-height: 340px; justify-self: center; transform: none; }
    .mk-position svg { max-height: none; }
    .mk-drivers li { grid-template-columns: 26px 1fr; border-radius: var(--r-inset); }
    .mk-drivers li b { grid-column: 2; }
    .mk-sowhat, .mk-sowhat.inline { display: block; }
    .mk-sowhat.inline b { display: block; margin-bottom: 4px; }
    .mk-foot { flex-wrap: wrap; }
    .mk-step { display: none; }
    .mk-info h3 { font-size: 32px; }
    .mk-ff .ff-cover { flex-direction: column; align-items: stretch; gap: 16px; min-height: 520px; padding: 28px 20px 44px; }
    .mk-ff .ff-copy { flex: none; gap: 12px; }
    .mk-ff .ff-watch { width: 110px; padding: 12px; border-radius: 26px; font-size: 10px; }
    .mk-ff .ff-batt { width: 84px; height: 36px; border-width: 3px; border-radius: 8px; padding: 3px; }
    .mk-ff .ff-batt::after { right: -8px; top: 10px; width: 5px; height: 12px; }
    .mk-ff .ff-src { left: 20px; bottom: 14px; }
    .mk-slide.sb-cover { flex-direction: column; align-items: stretch; gap: 20px; min-height: 460px; padding: 28px 20px 44px; }
    .sb-cover .sb-copy { flex: none; gap: 12px; }
    .sb-cover .sb-one { padding-left: 10px; }
    .sb-cover .sb-days, .sb-cover .sb-cups { gap: 4px; }
    .sb-cover .sb-cups li { border-radius: 6px; }
    .sb-cover .sb-src { left: 20px; bottom: 16px; }
    .sb-waffle { max-width: 280px; gap: 4px; }
    .sb-plateau, .sb-prize { grid-template-columns: 1fr; gap: 18px; }
    .sb-cols { min-height: 180px; gap: 3px; }
    .sb-cols span { display: none; }
    .sb-eq li { grid-template-columns: 18px 90px 1fr; }
    .mk-star-main .sb-guards li { grid-template-columns: 70px 1fr; }
}

/* Saturday in Austin: the interactive Python planner (fourth project) */
.sat-planner { display: flex; flex-direction: column; min-height: 36.5em; }
.sat-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 18px 20px 16px; border-bottom: 1px solid rgba(245, 229, 225, 0.12); }
.sat-form label { display: flex; flex-direction: column; gap: 6px; font: 600 11px/1 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #D9B8B3; }
.sat-form input[type="time"], .sat-form select { font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #F5E5E1; background: #2A1810; border: 1px solid rgba(245, 229, 225, 0.18); border-radius: var(--r-small); padding: 8px 10px; color-scheme: dark; }
.sat-hours span { display: flex; align-items: center; gap: 10px; }
.sat-hours input { flex: 1; accent-color: #E9A6BC; }
.sat-hours output { min-width: 2.2em; font: 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #F5E5E1; text-transform: none; letter-spacing: 0; }
.sat-where { grid-column: 1 / -1; }
.sat-filters { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.sat-filters label { flex-direction: row; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid rgba(245, 229, 225, 0.25); font-size: 12px; letter-spacing: 0.04em; text-transform: none; cursor: var(--cursor-hot, pointer); }
.sat-filters input { accent-color: #E9A6BC; margin: 0; }
.sat-filters label:has(input:checked) { background: rgba(233, 166, 188, 0.18); border-color: #E9A6BC; color: #F5E5E1; }
.sat-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.sat-actions button[type="submit"] { flex: 1; }
.sat-form .sat-random { background: transparent; color: #E9A6BC; box-shadow: inset 0 0 0 1.5px #E9A6BC; }
.sat-form .sat-random:hover { background: rgba(233, 166, 188, 0.14); }
.sat-form button { padding: 11px 16px; border: 0; border-radius: var(--r-pill); background: #E9A6BC; color: #1E100A; font: 700 14px system-ui, sans-serif; cursor: var(--cursor-hot, pointer); transition: background 0.2s ease; }
.sat-form button:hover { background: #F2C1D1; }
.sat-form button:disabled { opacity: 0.6; cursor: progress; }
.sat-form :focus-visible { outline: 2px solid #E9A6BC; outline-offset: 2px; }
.sat-out { flex: 1; padding: 16px 20px 20px; font: 13.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #F5E5E1; }
.sat-out p { margin: 0; }
.sat-status { color: #D9B8B3; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.6; }
.sat-head { color: #E9A6BC; font-weight: 700; margin-bottom: 6px !important; }
.sat-row { display: grid; grid-template-columns: 7.2em 1fr; }
.sat-row b { font-weight: 400; color: #D9B8B3; }
.sat-row i { font-style: normal; color: #A98F89; }
.sat-free span { color: #A98F89; }
.sat-foot { margin-top: 12px !important; color: #A98F89; font-size: 12px; }
@media (max-width: 560px) {
    .sat-form { grid-template-columns: 1fr; }
    .sat-actions { flex-direction: column; }
    .sat-row { grid-template-columns: 6.4em 1fr; }
}
.sat-sass { margin-bottom: 10px !important; color: #E9A6BC; font: italic 14px/1.5 var(--serif, Georgia, serif); }

/* ===== Starbucks prototype: my two screens as one flow (Starbucks white and greens, a touch of gold) ===== */
/* a real iPhone: 9 by 19.5, thin black frame, rounded screen, Dynamic Island on top, home bar at the bottom */
.sb-phone { justify-self: center; height: 35.5cqw; aspect-ratio: 9 / 19.5; padding: 0.42cqw; border-radius: 3.3cqw; background: #141414; box-shadow: 0 0 0 1px #3A3A3A, 0 1.4cqw 3cqw -1.2cqw rgba(30, 57, 50, 0.55); }
.sb-screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 2.4cqw; background: #FFFFFF; overflow: hidden; font-family: system-ui, -apple-system, sans-serif; color: #1E3932; }
.sb-screen::before { content: ""; position: absolute; top: 0.55cqw; left: 50%; width: 30%; height: 1.45cqw; transform: translateX(-50%); border-radius: 999px; background: #141414; z-index: 3; }
.sb-screen::after { content: ""; position: absolute; bottom: 0.45cqw; left: 50%; width: 36%; height: 0.32cqw; min-height: 3px; transform: translateX(-50%); border-radius: 999px; background: #141414; z-index: 3; }
.sb-status { display: flex; justify-content: space-between; align-items: center; min-height: 2.6cqw; padding: 0.55cqw 1.5cqw 0.2cqw 1.9cqw; font-size: 10px; font-weight: 600; }
.sb-status span { color: #00754A; font-weight: 600; }
.sb-view { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 7px; padding: 4px 12px 10px; animation: sbIn 0.3s ease both; }
.sb-view::-webkit-scrollbar { display: none; }
/* the app's own text at a phone's scale, so the screen reads like a real app, not a web page */
.sb-view { zoom: 0.86; }
.sb-h.sb-ready { display: block; margin-top: 6px; }
.sb-h.sb-ready em { display: block; margin-top: 2px; }
.sb-view[hidden] { display: none; }
.sb-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.15; }
.sb-sub { margin: -4px 0 2px; font-size: 10.5px; color: #6B6B6B; }
.sb-block { padding: 7px 8px; border-radius: 10px; background: #F2F0EB; }
.sb-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 5px; font-size: 11px; font-weight: 700; }
.sb-h em { font-style: normal; font-weight: 600; color: #00754A; }
.sb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-chips button { padding: 3px 8px; border-radius: 999px; border: 1px solid #00754A; background: #FFFFFF; font: inherit; font-size: 10px; font-weight: 600; color: #00754A; cursor: pointer; }
.sb-chips button[aria-pressed="true"] { background: #00754A; color: #FFFFFF; }
.sb-range { width: 100%; margin: 0; accent-color: #00754A; }
.sb-ends { display: flex; justify-content: space-between; margin: 1px 0 0; font-size: 9.5px; color: #6B6B6B; }
.sb-apply, .sb-edit { margin-top: 2px; padding: 8px; border-radius: 999px; border: none; background: #1E3932; font: inherit; font-size: 11.5px; font-weight: 700; color: #FFFFFF; cursor: pointer; }
.sb-edit { background: transparent; border: 1px solid #1E3932; color: #1E3932; }
.sb-picks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-picks li { position: relative; display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 8px; border-radius: 10px; background: #F2F0EB; }
.sb-picks li.hero { background: #1E3932; color: #FFFFFF; }
.sb-picks svg { width: 32px; grid-row: span 2; }
.sb-picks b { display: block; font-size: 12px; line-height: 1.2; }
.sb-picks span { display: block; margin-top: 1px; font-size: 10px; line-height: 1.3; color: #6B6B6B; }
.sb-picks em { display: block; margin-top: 2px; font-size: 9.5px; font-style: normal; font-weight: 600; color: #00754A; }
.sb-picks li.hero span { color: #D4E9E2; }
.sb-picks li.hero em { color: #CBA258; }
.sb-tag { grid-column: 1 / -1; margin: 0 0 4px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #CBA258; }
.sb-order { grid-column: 2; justify-self: start; margin-top: 6px; padding: 4px 10px; border-radius: 999px; border: none; background: #00754A; font: inherit; font-size: 10px; font-weight: 700; color: #FFFFFF; cursor: pointer; }
.sb-order.done { background: #CBA258; }
.sb-lid { fill: #FFFFFF; stroke: #1E3932; stroke-width: 1.2; }
.sb-straw { stroke: #00754A; stroke-width: 2.2; stroke-linecap: round; }
.sb-ice { stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; }
.sb-logo { fill: #00754A; }
.sb-nav { display: flex; justify-content: space-between; padding: 6px 10px 1.4cqw; border-top: 1px solid #E5E5E5; font-size: 8.5px; color: #6B6B6B; }
.sb-nav .on { color: #00754A; font-weight: 700; }
@keyframes sbIn { from { opacity: 0; transform: translateY(4px); } }

/* ===== Owala Race Series: my real bottle art, engraved live ===== */
.ow-build { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 2.4cqw; align-items: center; }
.ow-hero { position: relative; margin: 0; justify-self: center; height: 36cqw; aspect-ratio: 246 / 922; filter: drop-shadow(0 1.2cqw 1.4cqw rgba(42, 24, 16, 0.3)); }
.ow-hero-img { display: block; width: 100%; height: 100%; object-fit: contain; animation: owIn 0.35s ease both; }
@keyframes owIn { from { opacity: 0.4; transform: translateY(4px); } }
.ow-eng-time { position: absolute; left: 8%; right: 8%; text-align: center; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; }
.ow-eng-time { top: 42%; font: 700 1.1cqw/1 system-ui, sans-serif; letter-spacing: 0.18em; }
/* until someone types, the name box pulses to ask for their name */
.ow-nudge { animation: owNudge 1.8s ease-in-out infinite; }
@keyframes owNudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(143, 70, 97, 0); } 50% { box-shadow: 0 0 0 4px rgba(143, 70, 97, 0.22); } }
@media (prefers-reduced-motion: reduce) { .ow-nudge { animation: none; } }
.ow-eng-name { position: absolute; left: 4%; width: 92%; top: 70%; height: auto; overflow: visible; cursor: text; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }
.ow-eng-name text { font-family: Georgia, serif; font-weight: 700; fill: #FFFFFF; }
.ow-controls { display: flex; flex-direction: column; gap: 0.5cqw; }
.ow-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0.8cqw 0 0; font-size: clamp(10px, 0.8cqw, 12px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mul); }
.ow-count { font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: #3F4A34; }
.ow-input { padding: 0.55cqw 0.9cqw; border-radius: 0.8cqw; border: 1.5px solid #D9B8B3; background: #FFFFFF; font: inherit; font-size: clamp(12px, 1cqw, 15px); color: var(--choc); }
.ow-input:focus { outline: 2px solid var(--mul); outline-offset: 1px; }
/* the lineup: all eight bottles in one row, tap one to pick it */
.ow-lineup { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.6cqw; margin-top: 0.4cqw; }
.ow-lineup button { position: relative; padding: 0.4cqw 0 0.2cqw; border: none; border-bottom: 3px solid transparent; background: none; cursor: var(--cursor-hot, pointer); transition: transform 0.2s ease; }
.ow-lineup button:hover { transform: translateY(-3px); }
.ow-lineup button[aria-pressed="true"] { border-bottom-color: var(--mul); }
.ow-lineup img { display: block; width: 100%; height: 13cqw; object-fit: contain; }
.ow-lineup button.got::after { content: "✓"; position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 1.5cqw; height: 1.5cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: var(--mul); font-size: 10px; color: #FFF8F6; }
@media (max-width: 800px) {
    .ow-build { grid-template-columns: 1fr; gap: 16px; }
    .ow-hero { height: 360px; }
    .ow-eng-time { font-size: 13px; }
    .ow-lineup img { height: 110px; }
}

/* three phones across the slide, each with a numbered caption */
.sb-trio { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; gap: 7cqw; }
.sb-shot { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; margin: 0; min-width: 0; }
.sb-shot figcaption { display: flex; align-items: center; gap: 0.6cqw; font-family: var(--serif); font-size: clamp(13px, 1.3cqw, 17px); color: var(--choc); }
.sb-shot figcaption i { display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: #00754A; font-style: normal; font-family: system-ui, sans-serif; font-size: 0.75em; font-weight: 700; color: #FFFFFF; }
/* part 1, the ritual: profiles, one-tap usual, scheduled routines */
.sb-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sb-profiles button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 5px; border-radius: 10px; border: 1.5px solid transparent; background: #F2F0EB; font: inherit; color: #1E3932; text-align: center; cursor: pointer; }
.sb-profiles button[aria-pressed="true"] { border-color: #00754A; background: #FFFFFF; }
.sb-profiles i { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%; font-style: normal; font-size: 15px; font-weight: 800; color: #FFFFFF; }
.sb-profiles b { font-size: 11.5px; }
.sb-profiles span { font-size: 9px; color: #6B6B6B; }
.sb-profiles em { font-size: 9px; font-style: normal; font-weight: 600; line-height: 1.25; color: #00754A; }
.sb-reorder { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 9px 12px; border-radius: 12px; border: none; background: #1E3932; font: inherit; color: #FFFFFF; text-align: left; cursor: pointer; }
.sb-reorder b { font-size: 11.5px; }
.sb-reorder small { font-size: 9px; color: #D4E9E2; }
.sb-reorder.done { background: #00754A; }
.sb-row { display: grid; grid-auto-flow: column; grid-auto-columns: 30%; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sb-row::-webkit-scrollbar { display: none; }
.sb-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border-radius: 10px; background: #F2F0EB; text-align: center; }
.sb-mini svg { width: 26px; }
.sb-mini span { font-size: 8.5px; font-weight: 600; line-height: 1.2; }
.sb-mini .sb-order { margin-top: auto; padding: 3px 8px; font-size: 8.5px; }
.sb-event { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; padding: 8px 10px; border-radius: 10px; background: #1E3932; color: #FFFFFF; }
.sb-event b { font-size: 11px; }
.sb-event span { grid-row: 2; font-size: 9px; color: #D4E9E2; }
.sb-event .sb-order { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.sb-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: #F2F0EB; }
.sb-seg button { padding: 5px 0; border-radius: 999px; border: none; background: transparent; font: inherit; font-size: 10.5px; font-weight: 700; color: #1E3932; cursor: pointer; }
.sb-seg button[aria-selected="true"] { background: #00754A; color: #FFFFFF; }
.sb-pane { display: flex; flex-direction: column; gap: 7px; }
.sb-pane[hidden] { display: none; }
.sb-routines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-routines li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 10px; border-radius: 10px; background: #F2F0EB; }
.sb-routines b { font-size: 11px; }
.sb-routines em { font-size: 9.5px; font-style: normal; font-weight: 600; line-height: 1.25; color: #00754A; }
.sb-routines span { font-size: 9px; color: #6B6B6B; }
.sb-switch { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; width: 30px; height: 18px; border-radius: 999px; border: none; background: #C9C9C9; cursor: pointer; transition: background 0.2s ease; }
.sb-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; transition: transform 0.2s ease; }
.sb-switch[aria-pressed="true"] { background: #00754A; }
.sb-switch[aria-pressed="true"]::after { transform: translateX(12px); }
.sb-fields p { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 0; border-bottom: 1px solid #E5E1D8; font-size: 10px; }
.sb-fields p:last-child { border-bottom: 0; }
.sb-fields span { color: #6B6B6B; }
.sb-fields b { text-align: right; }
.sb-setpick.done { background: #CBA258; }
/* part 2: the rituals made for you */
.sb-rituals { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb-rituals li { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; padding: 8px 10px; border-radius: 10px; background: #F2F0EB; }
.sb-rituals b { font-size: 11px; }
.sb-rituals small { grid-column: 2; grid-row: 1; justify-self: end; font-size: 8.5px; font-weight: 700; color: #00754A; }
.sb-rituals span { grid-column: 1 / -1; font-size: 9px; color: #6B6B6B; }
.sb-rituals em { font-size: 10px; font-style: normal; font-weight: 700; }
.sb-rituals .sb-order { grid-column: 2; margin: 0; align-self: center; }
/* the working app: one phone beside a step guide that maps each screen to the strategy */
.sb-demo { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 5cqw; }
.sb-app { height: 39cqw; }
.sb-app .sb-screen { position: relative; }
.sb-appbar { display: flex; align-items: center; gap: 6px; padding: 0 10px 2px; }
.sb-appbar[hidden] { display: none; }
.sb-appbar b { font-size: 11px; }
.sb-back { width: 22px; height: 22px; border-radius: 50%; border: none; background: #F2F0EB; font-size: 15px; line-height: 1; color: #1E3932; cursor: pointer; }
.sb-body { overflow-y: auto; }
.sb-body > * { flex-shrink: 0; }   /* rows keep their full height; the screen scrolls instead of squeezing them */
.sb-tabs { gap: 2px; }
.sb-tabs[hidden] { display: none; }
.sb-tabs button { padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; }
.sb-tabs button.on { color: #00754A; font-weight: 700; }
.sb-toast { position: absolute; left: 8%; right: 8%; bottom: 3.6cqw; z-index: 4; margin: 0; padding: 7px 10px; border-radius: 10px; background: #1E3932; font-size: 9.5px; line-height: 1.3; text-align: center; color: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.sb-toast[hidden] { display: none; }
.sb-link { padding: 0; border: none; background: none; font: inherit; font-size: 10px; font-weight: 600; color: #00754A; cursor: pointer; }
/* splash: the full screen is the moment, like the drink photos in my deck */
.sb-app.is-splash .sb-status { position: absolute; inset: 0 0 auto; z-index: 2; color: #FFFFFF; }
.sb-app.is-splash .sb-status span { color: #FFFFFF; }
.sb-app.is-splash .sb-body { padding: 0; zoom: 1; }
.sb-splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; border: none; text-align: center; color: #FFFFFF; cursor: pointer;
    background: radial-gradient(circle at 30% 20%, #F4C9A8 0 12%, transparent 40%), radial-gradient(circle at 75% 70%, #E07A8A 0 10%, transparent 45%), linear-gradient(160deg, #D9536F 0%, #8F2F45 55%, #3D1A24 100%); }
.sb-siren { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 3px solid #FFFFFF; background: #00754A; font-size: 22px; }
.sb-splash b { font-size: 13px; line-height: 1.25; }
.sb-splash span { font-size: 10.5px; opacity: 0.9; }
.sb-splash em { margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); font-size: 9.5px; font-style: normal; font-weight: 700; }
button.sb-event { width: 100%; border: none; font: inherit; text-align: left; cursor: pointer; }
.sb-event i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 16px; }
.sb-done { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; text-align: center; }
.sb-done svg { width: 46px; }
.sb-done b { font-size: 14px; color: #00754A; }
.sb-done span { font-size: 11px; font-weight: 700; }
.sb-done small { font-size: 9.5px; color: #6B6B6B; }
.sb-nudge { border: 1.5px solid #00754A; background: #FFFFFF; }
.sb-stars { position: relative; padding: 10px 12px 14px; border-radius: 12px; background: #1E3932; color: #FFFFFF; overflow: hidden; }
.sb-stars b { display: block; font-size: 22px; color: #CBA258; }
.sb-stars span { font-size: 9.5px; color: #D4E9E2; }
.sb-stars i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--w); background: #CBA258; }
.sb-guide { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 0.5cqw; width: 34cqw; }
.sb-guide li { counter-increment: step; }
.sb-guide button { position: relative; display: block; width: 100%; padding: 0.8cqw 1.2cqw 0.8cqw 4.2cqw; border: 1px solid transparent; border-radius: 1cqw; background: none; font: inherit; text-align: left; color: var(--ink); cursor: var(--cursor-hot, pointer); transition: background 0.2s ease, border-color 0.2s ease; }
.sb-guide button::before { content: counter(step); position: absolute; left: 1.1cqw; top: 50%; display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; min-width: 20px; min-height: 20px; transform: translateY(-50%); border-radius: 50%; background: #D4E9E2; font-size: clamp(10px, 1cqw, 13px); font-weight: 700; color: #1E3932; }
.sb-guide b { display: block; font-family: var(--serif); font-size: clamp(13px, 1.35cqw, 17px); font-weight: 700; }
.sb-guide span { display: block; font-size: clamp(11px, 1.05cqw, 13px); color: var(--muted); }
.sb-guide button:hover { background: rgba(0, 117, 74, 0.06); }
.sb-guide button[aria-current="step"] { border-color: #00754A; background: #FFFFFF; }
.sb-guide button[aria-current="step"]::before { background: #00754A; color: #FFFFFF; }
.sb-fine { margin: 2px 0 0; font-size: 9px; line-height: 1.35; color: #8A8A8A; }
.sb-waro { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #1E3932; color: #FFFFFF; }
.sb-waro b { font-size: 24px; line-height: 1; color: #CBA258; }
.sb-waro span { font-size: 10.5px; line-height: 1.3; }
.sb-waro small { color: #D4E9E2; font-size: 9px; }
@media (max-width: 800px) {
    .sb-demo { flex-direction: column; gap: 20px; }
    .sb-app { height: 600px; }
    .sb-guide { width: 100%; gap: 6px; }
    .sb-guide button { padding: 8px 12px 8px 44px; border-radius: 10px; }
    .sb-guide button::before { left: 12px; }
}


/* on the one-page home, a "See the deck" link lands on the whole project card, clear of the sticky menu */
.mp-proj { scroll-margin-top: 80px; }