/* SOOK site: the sections below the hero (30 Sep 2026, client: "different designs, immersive images, smoother
   open / close", then "very smooth, nothing skipped"). Loaded after sook.css (build.py). Runtime: js/sections.js.
   - Framed photos (hills, ink cloud, lake): inset + rounded while entering or leaving, full-bleed when centred.
   - How it works: a deck of step cards (scene + step together). Builder: calls slide into a thesis slip.
   - Theses: a 3 x 2 grid of sketch-scene cards. New: live numbers, a thesis multiplying, every rule on chain.
   - Hover: cards lean toward the pointer (.sk-tilt), buttons fill from the pointer, links draw their underline.
   - Open / close: FAQ and the phone menu ease out on open, ease in on close, and reverse mid-way. */

:root {
  --sk-fg: 16px;                                 /* frame side gutter */
  --sk-fv: 8px;                                  /* frame top / bottom inset inside a full-screen stage */
  --sk-fr: 22px;                                 /* frame radius */
  --sk-ease-inq: cubic-bezier(0.5, 0, 0.75, 0.2);
}
@media (min-width: 768px) { :root { --sk-fg: clamp(24px, 3.2vw, 48px); --sk-fv: clamp(10px, 1.4vh, 16px); --sk-fr: 30px; } }

/* ---------- framed photos: inset + rounded while the section enters from below or leaves at the top; full-bleed,
   square corners once it fills the screen. sections.js drives the clip (inset + radius) and the picture's zoom from
   the frame's distance to the viewport centre, damped; the CSS below is the still, full-bleed state. ---------- */
.sk-frame { overflow: hidden; transform-origin: 50% 50%; backface-visibility: hidden; }
.sk-frame picture { position: absolute; inset: 0; display: block; transform-origin: 50% 50%; }
.sk-frame.is-moving { will-change: clip-path; }
.sk-frame.is-moving picture { will-change: transform; }

/* builder: the hills fill the stage; the copy keeps the page gutter */
.sk-calc__bg.sk-frame { inset: 0; }
.sk-calc__bg.sk-frame picture img { position: absolute; inset: 0; }

/* closing band: the ink cloud; a soft local wash keeps the title at 4.5:1 */
.sk-close { background: var(--sk-ground); }
.sk-close__bg.sk-frame { inset: 0; }
.sk-close__body { padding-inline: calc(var(--sk-fg) + 20px); }
.sk-close__body::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(120%, 78rem); height: 150%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 248, 252, 0.6), rgba(255, 248, 252, 0.28) 55%, rgba(255, 248, 252, 0)); }

/* footer lake: edge to edge; the glass letters stand on its bottom edge */
.sk-foot__lake .sk-foot__photo img, .sk-foot__lake .sk-water, .sk-foot__lake .sk-foot__glass img { transform-origin: 50% 50%; }

/* hover: the picture leans in 2 % inside its mask (sections.js folds it into the scroll zoom) */

/* ---------- hover: cards lean toward the pointer (sections.js sets the transform; springs back on leave) ---------- */
.sk .sk-tilt { transition-property: background-color, box-shadow, opacity, color; transition-duration: 0.4s; transition-timing-function: var(--sk-ease-out); transform-origin: 50% 50%; }
.sk-tilt.is-hot { box-shadow: 0 1px 2px rgba(11, 11, 12, 0.04), 0 22px 44px -22px rgba(60, 20, 55, 0.32); }
@media (hover: hover) { .sk-feat:hover .sk-feat__art { transform: none; } }

/* ---------- buttons: the fill grows from the pointer; the arrow nudges ---------- */
.sk-btn { isolation: isolate; overflow: hidden; transition: color 0.35s var(--sk-ease-out), transform 0.25s var(--sk-ease-std), translate 0.4s var(--sk-ease-out); }
.sk-btn::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--fill, var(--sk-ink));
  clip-path: circle(0% at var(--fx, 50%) var(--fy, 100%)); transition: clip-path 0.5s var(--sk-ease-in-out); pointer-events: none; }
.sk-btn--primary, .sk-btn:not(.sk-btn--ink) { --fill: var(--sk-ink); --fill-fg: #ffffff; }
.sk-btn--ink { --fill: var(--sk-pink); --fill-fg: var(--sk-ink); }
@media (hover: hover) {
  .sk-btn:hover { background: var(--bg); color: var(--fill-fg); }
  .sk-btn:hover::before { clip-path: circle(150% at var(--fx, 50%) var(--fy, 100%)); }
}
.sk-btn .sk-icon { transition: transform 0.45s var(--sk-ease-out); }

/* ---------- links draw their underline ---------- */
.sk-link { color: var(--sk-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px; padding-bottom: 2px; transition: background-size 0.45s var(--sk-ease-out); }
@media (hover: hover) { .sk-link:hover { background-position: 0 100%; background-size: 100% 1px; } }
.sk-link:focus-visible { background-size: 100% 1px; }

/* footer tiles: the arrow rides out and back in */
@media (hover: hover) { .sk-foot__tile:hover .sk-icon { transform: translate(4px, -4px); } }

/* ---------- FAQ: grid rows 0fr -> 1fr + opacity; ease-out on open, ease-in on close; a click mid-way reverses it ---------- */
.sk-qa { transition: background-color 0.3s var(--sk-ease-out); }
@media (hover: hover) { .sk-qa:not(.is-open):hover { background: #fdfbfd; } .sk-qa:not(.is-open) .sk-qa__q:hover .sk-icon { transform: translateY(2px); } }
.sk-qa__a { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows 380ms var(--sk-ease-inq), opacity 260ms var(--sk-ease-inq), visibility 0s linear 380ms; }
.sk-qa.is-open .sk-qa__a { grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition: grid-template-rows 380ms var(--sk-ease-out), opacity 380ms var(--sk-ease-out) 40ms, visibility 0s; }
.sk-qa__in { min-height: 0; overflow: hidden; }
.sk-qa__a p { translate: 0 -6px; transition: translate 380ms var(--sk-ease-inq); }
.sk-qa.is-open .sk-qa__a p { translate: 0 0; transition: translate 380ms var(--sk-ease-out); }

/* ---------- phone menu: ease-out open, ease-in close, the padding moves with it (no snap) ---------- */
.sk-sheet:not(.is-open) { transition: grid-template-rows 0.38s var(--sk-ease-inq), opacity 0.3s var(--sk-ease-inq) 0.08s; }
.sk-sheet__inner { transition: padding 0.45s var(--sk-ease-out); }
.sk-sheet:not(.is-open) .sk-sheet__inner { transition: padding 0.38s var(--sk-ease-inq); }
.sk-sheet:not(.is-open) .sk-sheet__link, .sk-sheet:not(.is-open) .sk-sheet__cta { transition: opacity 0.2s var(--sk-ease-inq), transform 0.3s var(--sk-ease-inq), background-color 0.2s; transition-delay: 0s; }

/* ---------- a thesis multiplying (white): the stage pins for 340vh; each scroll step flies a call into the stack, the
   multiplier and the payout curve follow (sections.js initMult). Reduced motion: no pin, the finished thesis. ---------- */
.sk-mult { position: relative; padding-block: var(--sk-sec); }
.sk-mult__in { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .sk-mult__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(56px, 6vw, 120px); } }
.sk-mult__stack { list-style: none; margin: clamp(28px, 4vh, 48px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 30rem; }
.sk-mcard { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 18px 0 12px; box-sizing: border-box; border-radius: 16px; background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.05), var(--sk-shadow-2); transform-origin: 0 50%; }
.sk-mcard__q { flex: 1; min-width: 0; font: 500 16px/1.3 var(--sk-font); letter-spacing: -0.01em; color: var(--sk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-mcard > b { flex: none; font: 600 16px/1 var(--sk-font); color: var(--sk-pink-text); font-variant-numeric: tabular-nums; }
.sk-mult__out { display: flex; flex-direction: column; min-width: 0; }
.sk-mult__x { margin: 10px 0 0; }
.sk-mult__x b { display: block; font: 600 clamp(80px, 7vw + 30px, 184px)/0.92 var(--sk-font); letter-spacing: -0.055em; color: var(--sk-pink-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-mult__pay { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 18px 0 0; padding-top: 16px; box-shadow: inset 0 1px 0 var(--sk-line); font: 400 16px/1.35 var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; }
.sk-mult__pay b { font-weight: 600; color: var(--sk-ink); }
.sk-mult__curve { display: block; width: 100%; height: auto; margin-top: clamp(20px, 3vh, 36px); overflow: visible; }
.sk-mult__base { fill: none; stroke: var(--sk-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sk-mult__line { fill: none; stroke: var(--sk-ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sk-mult__dot { fill: var(--sk-pink); stroke: var(--sk-ink); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 50%; }
.sk-mult.is-pinned { padding: 0; }
.sk-mult.is-pinned .sk-mult__track { height: 340vh; }
.sk-mult.is-pinned .sk-mult__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; display: flex; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + 16px) 0 24px; overflow: hidden; }
.sk-mult.is-pinned .sk-mcard, .sk-mult.is-pinned .sk-mult__dot { will-change: transform, opacity; }
@media (max-width: 1023px) {
  .sk-mult.is-pinned .sk-mult__in { width: 100%; gap: 14px; align-content: center; }
  .sk-mult.is-pinned .sk-mult__copy { display: contents; }
  .sk-mult.is-pinned .sk-eyebrow { display: none; }
  .sk-mult.is-pinned .sk-mult__copy > .sk-h2 { order: 1; margin: 0; font-size: clamp(30px, 8vw, 44px); }
  .sk-mult.is-pinned .sk-mult__out { order: 2; }
  .sk-mult.is-pinned .sk-mult__stack { order: 3; margin: 0; gap: 8px; max-width: none; }
  .sk-mult.is-pinned .sk-mcard { min-height: 50px; }
  .sk-mult.is-pinned .sk-mult__x b { font-size: clamp(60px, 17vw, 96px); }
  .sk-mult.is-pinned .sk-mult__pay { margin-top: 10px; padding-top: 10px; font-size: 15px; }
  .sk-mult.is-pinned .sk-mult__curve { width: auto; max-width: 100%; height: min(17vh, 150px); margin-top: 10px; }
}

/* ---------- live numbers (a blush band): today's open calls, the markets behind them and the next close, read from
   /api/calls (the app, through vercel.json); a line drawn from the calls' prices drifts under them ---------- */
.sk-live { position: relative; padding-block: clamp(88px, 8vw, 168px); overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, #fbf0f7 26%, #f7e5f0 72%, #ffffff 100%); }
.sk-live__in { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.sk-live__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sk-pink); box-shadow: 0 0 0 3px #ffffff; animation: sk-breathe 2.4s var(--sk-ease-in-out) infinite; }
@keyframes sk-breathe { 50% { transform: scale(0.7); } }
.sk-live__figs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 767px) { .sk-live__figs { grid-template-columns: 1fr; gap: 26px; } }
.sk-live__fig { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sk-live__fig b { display: block; font: 600 clamp(72px, 5.4vw + 24px, 140px)/0.92 var(--sk-font); letter-spacing: -0.055em; font-variant-numeric: tabular-nums; color: var(--sk-ink); white-space: nowrap; }
.sk-live__fig b small { font-size: 0.42em; letter-spacing: -0.02em; margin: 0 0.18em 0 0.04em; color: var(--sk-ink-3); }
.sk-live__fig:first-child b { color: var(--sk-pink-num); }
.sk-live__fig > span { font: 400 16px/1.3 var(--sk-font); color: var(--sk-ink-3); }
.sk-live__fig b.is-in { animation: sk-fade-up 0.8s var(--sk-ease-out) both; }
.sk-live__wave { position: relative; height: clamp(96px, 9vw, 168px); margin-block: clamp(36px, 4vw, 64px) clamp(20px, 2vw, 32px); }
.sk-live__wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; overflow: visible; }
.sk-live__wave path { fill: none; stroke: var(--sk-ink); stroke-width: 1.5; stroke-opacity: 0.75; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sk-live__bead { position: absolute; left: 50%; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--sk-pink); box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(11, 11, 12, 0.12); }
.sk-live__note { margin: 0; font: 400 15px/1.5 var(--sk-font); color: var(--sk-ink-3); }
.sk-live__note .sk-link { display: inline-flex; align-items: center; min-height: 44px; margin-left: 6px; vertical-align: middle; font-weight: 500; } /* a 44 px tap target */

/* ---------- every rule on chain (white): a sideways story with snap; the rule in front is full size, the ones either
   side step back; buttons, keys, trackpad or a mouse drag move it (sections.js initRules) ---------- */
.sk-rules { position: relative; padding-block: var(--sk-sec); --sk-edge: max(var(--sk-gutter), calc((100% - var(--sk-max)) / 2)); }
.sk-rules__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sk-rules__nav { display: flex; align-items: center; gap: 10px; }
.sk-rules__count { display: flex; align-items: baseline; gap: 6px; margin: 0 10px 0 0; font: 500 16px/1 var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; }
.sk-rules__count b { font-weight: 600; color: var(--sk-ink); }
.sk-rules__btn { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--sk-quiet); color: var(--sk-ink);
  -webkit-tap-highlight-color: transparent; transition: background-color 0.3s var(--sk-ease-out), color 0.3s var(--sk-ease-out), opacity 0.3s var(--sk-ease-out), transform 0.2s var(--sk-ease-std); }
.sk-rules__btn .sk-icon { transition: transform 0.4s var(--sk-ease-out); }
@media (hover: hover) {
  .sk-rules__btn:hover:not(:disabled) { background: var(--sk-ink); color: #ffffff; }
  .sk-rules__btn[data-dir="1"]:hover:not(:disabled) .sk-icon { transform: translateX(3px); }
  .sk-rules__btn[data-dir="-1"]:hover:not(:disabled) .sk-icon { transform: translateX(-3px); }
}
.sk-rules__btn:active:not(:disabled) { transform: scale(0.94); }
.sk-rules__btn:disabled { opacity: 0.35; cursor: default; }
.sk-rules__vp { margin-top: clamp(32px, 5vh, 56px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sk-edge); scrollbar-width: none; }
.sk-rules__vp::-webkit-scrollbar { display: none; }
.sk-rules__vp:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .sk-rules__vp { cursor: grab; } }
.sk-rules__vp.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.sk-rules__row { list-style: none; margin: 0; padding: 12px var(--sk-edge) 20px; display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; }
.sk-rule { flex: none; width: min(84vw, 940px); scroll-snap-align: start; transform-origin: 50% 50%; }
.sk-rule__card { display: grid; height: 100%; border-radius: 28px; background: var(--sk-paper); overflow: hidden; }
@media (min-width: 768px) { .sk-rule__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(360px, 46vh, 500px); } }
.sk-rule__art { position: relative; min-height: 230px; overflow: hidden; }
.sk-rule__art > .sk-art { position: absolute; inset: 6%; width: auto; height: auto; }
.sk-rule__txt { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); padding-top: clamp(8px, 2vw, 44px); }
.sk-rule__n { font: 700 clamp(56px, 4vw + 28px, 120px)/0.9 var(--sk-display); letter-spacing: -0.05em; color: var(--sk-pink-num); }
.sk-rule__t { margin: auto 0 0; padding-top: 28px; font: 700 clamp(28px, 1.4vw + 18px, 46px)/1.02 var(--sk-display); letter-spacing: -0.035em; color: var(--sk-ink); text-wrap: balance; }
.sk-rule .sk-card__line { max-width: 26rem; }
.sk-rules__bar { position: relative; height: 2px; margin-top: 8px; border-radius: 2px; background: var(--sk-line); overflow: hidden; }
.sk-rules__bar > span { position: absolute; inset: 0; border-radius: inherit; background: var(--sk-ink); transform-origin: 0 50%; transform: scaleX(0.25); }
/* wide screens with motion: the section pins and the page scroll walks the cards sideways (js/sections.js initRules) */
.sk-rules.is-pinned { padding-block: 0; }
.sk-rules.is-pinned .sk-rules__track { height: 500vh; }
.sk-rules.is-pinned .sk-rules__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + clamp(8px, 2vh, 24px)) 0 clamp(16px, 3vh, 36px); }
.sk-rules.is-pinned .sk-rules__vp { overflow: hidden; scroll-snap-type: none; cursor: default; }
.sk-rules.is-pinned .sk-rules__row { will-change: transform; }
.sk-rules.is-pinned .sk-rule__card { min-height: clamp(340px, 52vh, 580px); }

/* ---------- thesis builder: the app's Explore list (CallRow: ticker, question, Yes chance, Yes / No prices) and its
   slip (SlipPanel: legs, "3 calls = 6.96x", the multiply bar, You stake, You get about). A demo runs while it is on
   screen: a cursor picks three calls (each flies into the slip), types a stake, the payout counts up, it resets.
   The first touch, key or focus hands it to the reader. The hills fill the section (framed entering / leaving). ---------- */
.sk-calc-sec { position: relative; }
.sk-calc__stage { position: relative; padding-block: var(--sk-sec); }
.sk-calc__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sk-calc__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.sk-calc__stage > .sk-wrap { position: relative; z-index: 2; }
.sk-slipb__head { max-width: 40rem; }
.sk-slipb { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; margin-top: clamp(32px, 1.6vw + 16px, 48px); }
/* list 7 : slip 5 inside the heading's container; both columns stretch to one height, so their bottoms always line up */
@media (min-width: 960px) { .sk-slipb { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; } }
.sk-calls { display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #ffffff; box-shadow: var(--sk-shadow-2); }
@media (min-width: 960px) { .sk-calls__list { flex: 1; } .sk-call { flex: 1 1 auto; } }
.sk-calls__head { display: grid; grid-template-columns: minmax(0, 1fr) 92px 164px; gap: 20px; margin: 0; padding: 12px 14px 10px 74px; font: 400 14px/1 var(--sk-font); color: var(--sk-ink-3); }
.sk-calls__head span:last-child { text-align: center; }
.sk-calls__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sk-call { display: grid; grid-template-columns: 40px minmax(0, 1fr) 92px auto; align-items: center; column-gap: 20px; min-height: 76px; padding: 12px 14px; box-sizing: border-box;
  border-radius: 16px; transition: background-color 0.35s var(--sk-ease-out); }
.sk-call.is-in { background: rgba(216, 127, 209, 0.1); }
@media (hover: hover) { .sk-call:not(.is-in):hover { background: #faf7fa; } }
.sk-tk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #f1ecf1; color: var(--sk-ink-2); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.06); }
.sk-tk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-tk--macro { background: #f6e6f4; color: #9c4f95; }
.sk-tk--macro svg { width: 20px; height: 20px; }
.sk-call__q { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sk-call__t { font: 500 16px/22px var(--sk-font); color: var(--sk-ink); text-wrap: pretty; }
.sk-call__meta { display: flex; flex-wrap: wrap; gap: 0 8px; font: 400 14px/18px var(--sk-font); color: var(--sk-ink-3); }
.sk-call__meta span + span::before { content: "\00b7"; margin-right: 8px; opacity: 0.6; }
.sk-call__prob { display: flex; flex-direction: column; gap: 6px; }
.sk-call__prob b { font: 600 14px/1 var(--sk-font); text-align: right; font-variant-numeric: tabular-nums; color: var(--sk-ink); }
.sk-call__track { height: 6px; border-radius: 3px; background: #efe9ee; overflow: hidden; }
.sk-call__track i { display: block; height: 100%; border-radius: inherit; background: var(--sk-pink); transform-origin: 0 50%; }
.sk-call__sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk-sd { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 76px; height: 52px; padding: 0; border: 0; border-radius: 14px;
  background: #f4f0f4; color: var(--sk-ink); font: 600 15px/1.1 var(--sk-font); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color 0.25s var(--sk-ease-out), color 0.25s var(--sk-ease-out), transform 0.14s var(--sk-ease-out); }
.sk-sd span { font: 500 14px/1 var(--sk-font); color: var(--sk-ink-3); transition: color 0.25s var(--sk-ease-out); }
@media (hover: hover) { .sk-sd:hover:not([aria-pressed="true"]) { background: #f3dcf0; } }
.sk-sd:active, .sk-sd.is-press { transform: scale(0.94); }
.sk-sd[aria-pressed="true"] { background: var(--sk-pink); color: var(--sk-ink); }
.sk-sd[aria-pressed="true"] span { color: var(--sk-ink); }
.sk-sd:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
@media (max-width: 1180px) { .sk-calls__head { display: none; } }
@media (max-width: 1180px) and (min-width: 960px) { .sk-call__prob { display: none; } .sk-call { grid-template-columns: 40px minmax(0, 1fr) auto; } }
@media (max-width: 640px) {
  .sk-calls { padding: 8px; }
  .sk-call { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "i q q" "p p s"; row-gap: 12px; column-gap: 12px; padding: 14px 10px; }
  .sk-tk { grid-area: i; align-self: start; width: 36px; height: 36px; }
  .sk-call__q { grid-area: q; }
  .sk-call__prob { grid-area: p; align-self: center; }
  .sk-call__prob b { text-align: left; }
  .sk-call__sides { grid-area: s; }
  .sk-sd { width: 72px; height: 48px; }
}
/* the slip: the app's pink panel */
.sk-slip { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 24px; background: linear-gradient(180deg, #f7e1f3 0%, #efbde8 100%); box-shadow: var(--sk-shadow-2); }
/* the sketch sits in the header row, right-aligned and centred on the title */
.sk-slip__art { position: relative; flex: none; width: 72px; aspect-ratio: 4 / 3; margin: -16px -4px -16px auto; align-self: center; pointer-events: none; }
.sk-slip__art > .sk-art { position: absolute; inset: 0; }
.sk-slip__head { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 400 14px/1.2 var(--sk-font); color: var(--sk-ink-3); }
.sk-slip__head b { font: 600 18px/1.2 var(--sk-font); color: var(--sk-ink); letter-spacing: -0.01em; }
.sk-slip__legs { --row: 54px; position: relative; height: calc(3 * var(--row) - 6px); } /* js/sections.js animates it with the leg count; 3 = the demo's end state */
.sk-slip__legs ol { list-style: none; margin: 0; padding: 0; }
.sk-slip__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.4); font: 400 15px/1.3 var(--sk-font); color: var(--sk-ink-3); text-align: center; }
.sk-leg { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: calc(var(--row) - 6px); box-sizing: border-box; padding: 0 14px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.72); opacity: 0; will-change: transform, opacity; }
.sk-leg__q { font: 400 14px/20px var(--sk-font); color: var(--sk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-leg__sd { font: 400 14px/18px var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; }
.sk-slip__hero { display: flex; flex-direction: column; gap: 4px; }
.sk-slip__eq { font: 400 15px/1.2 var(--sk-font); color: var(--sk-ink-3); }
.sk-slip__x { font: 300 clamp(48px, 2.6vw + 22px, 64px)/1 var(--sk-font); letter-spacing: -0.045em; color: var(--sk-ink); font-variant-numeric: tabular-nums; }
.sk-slip__segs { display: flex; gap: 4px; height: 28px; margin-top: 10px; }
.sk-seg { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow: hidden; }
.sk-seg i { display: block; height: 8px; border-radius: 4px; background: var(--sk-ink); transform-origin: 0 50%; }
.sk-seg b { font: 400 14px/1 var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-slip__stake { display: flex; flex-direction: column; gap: 10px; }
.sk-slip__stake label { font: 400 14px/1 var(--sk-font); color: var(--sk-ink-3); }
.sk-slip__in { position: relative; }
.sk-slip__in input { display: block; width: 100%; height: 56px; box-sizing: border-box; padding: 0 76px 0 18px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.6);
  font: 500 24px/1 var(--sk-font); color: var(--sk-ink); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(11, 11, 12, 0.06); transition: box-shadow 0.2s var(--sk-ease-out), background-color 0.2s var(--sk-ease-out); }
.sk-slip__in input:focus, .sk-slip__in input.is-typing { outline: none; background: #ffffff; box-shadow: inset 0 0 0 2px var(--sk-ink); }
.sk-slip__in span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 400 15px/1 var(--sk-font); color: var(--sk-ink-3); pointer-events: none; }
.sk-slip__quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sk-slip__quick button { height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.6); font: 500 14px/1 var(--sk-font); color: var(--sk-ink-2); cursor: pointer; transition: background-color 0.2s var(--sk-ease-out); }
@media (hover: hover) { .sk-slip__quick button:hover { background: #ffffff; } }
.sk-slip__quick button:focus-visible { outline: 2px solid var(--sk-ink); outline-offset: 2px; }
.sk-slip__out { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.62); }
.sk-slip__out > span:first-child { font: 500 14px/1.2 var(--sk-font); color: var(--sk-ink-2); }
.sk-slip__out strong { font: 400 clamp(28px, 1vw + 20px, 36px)/1.15 var(--sk-font); letter-spacing: -0.02em; color: var(--sk-ink); font-variant-numeric: tabular-nums; }
.sk-slip__out strong small { font-size: 15px; color: var(--sk-ink-3); letter-spacing: 0; }
.sk-slip__kv { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; font: 400 14px/1.3 var(--sk-font); color: var(--sk-ink-3); }
.sk-slip__kv span:last-child { color: var(--sk-ink); font-variant-numeric: tabular-nums; }
.sk-leg[hidden], .sk-seg[hidden] { display: none; }
.sk-cursor { position: absolute; z-index: 6; left: 0; top: 0; width: 28px; height: 28px; margin: -4px 0 0 -5px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.sk-cursor path { fill: var(--sk-ink); stroke: #ffffff; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- how it works: a deck of three step cards, each the sketch scene and its step together. Motion: the stage
   pins for 360vh; each next card slides up over the last (scrubbed, damped), the one under it settles back a little.
   Reduced motion: the three cards one under the other. ---------- */
.sk-deck { position: relative; padding-block: var(--sk-sec); }
.sk-deck__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.sk-deck__count { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 400 16px/1 var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; }
.sk-deck__count b { font: 600 clamp(32px, 1.4vw + 22px, 48px)/1 var(--sk-font); letter-spacing: -0.04em; color: var(--sk-ink); }
.sk-deck__cards { list-style: none; margin: var(--sk-gap-head) 0 0; padding: 0; display: grid; gap: 20px; }
.sk-dcard { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; min-height: 0; border-radius: 28px;
  background: linear-gradient(115deg, #fbe7f7 0%, #f8eef8 52%, #eee8fb 100%); /* one surface under the scene AND its text */
  box-shadow: inset 0 0 0 1px rgba(165, 77, 157, 0.1), 0 1px 2px rgba(11, 11, 12, 0.04), 0 34px 60px -34px rgba(60, 20, 55, 0.3); transform-origin: 50% 0; overflow: hidden; }
.sk-dcard__art { position: relative; min-height: clamp(300px, 34vw, 520px); }
.sk-dcard__art > .sk-art { position: absolute; inset: 5% 4% 5% 6%; width: auto; height: auto; }
.sk-dcard__txt { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: clamp(28px, 4vw, 72px) clamp(28px, 4vw, 64px) clamp(28px, 4vw, 72px) clamp(20px, 2vw, 40px); }
.sk-dcard__step { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 15px/1 var(--sk-font); color: var(--sk-pink-text); }
.sk-dcard__step .sk-icon { width: 18px; height: 18px; }
.sk-dcard__title { margin: 0; font: 700 clamp(34px, 2.4vw + 16px, 64px)/1.02 var(--sk-display); letter-spacing: -0.035em; color: var(--sk-ink); }
.sk-dcard__line { margin: 0; max-width: 24rem; font: 400 clamp(17px, 0.3vw + 15px, 20px)/1.45 var(--sk-font); color: var(--sk-ink-3); }
@media (max-width: 767px) {
  .sk-dcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sk-dcard__art { min-height: 280px; }
  .sk-dcard__txt { gap: 8px; padding: 4px 22px 24px; }
  .sk-dcard__title { font-size: clamp(28px, 7vw, 36px); }
  .sk-dcard__line { font-size: 16px; }
}
.sk-deck.is-pinned { padding: 0; }
.sk-deck.is-pinned .sk-deck__track { height: 460vh; }
.sk-deck.is-pinned .sk-deck__stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + var(--sk-ht) + var(--sk-hh) + clamp(16px, 3vh, 40px)) 0 clamp(20px, 4vh, 48px); }
.sk-deck.is-pinned .sk-deck__in { display: flex; flex-direction: column; height: 100%; }
.sk-deck.is-pinned .sk-deck__cards { position: relative; flex: 1; min-height: 0; margin-top: clamp(20px, 3.5vh, 44px); display: block; }
.sk-deck.is-pinned .sk-dcard { position: absolute; inset: 0; will-change: transform; }
.sk-deck.is-pinned .sk-dcard__art { min-height: 0; }
.sk-deck.is-pinned .sk-dcard:not(:first-child) { transform: translate3d(0, 110%, 0); }
@media (max-width: 767px) { .sk-deck.is-pinned .sk-deck__head .sk-eyebrow { display: none; } .sk-deck.is-pinned .sk-deck__head .sk-h2 { font-size: clamp(30px, 8vw, 40px); } }

/* ---------- theses people built: a 3 x 2 grid (2 columns on tablets, 1 on phones); each card is a sketch scene, the
   thesis's calls with their multipliers, and what 10 USDG pays. Cards rise in with the scroll (scrubbed) and lean
   toward the pointer; the scene runs faster while hovered. ---------- */
.sk-theses { position: relative; padding-block: var(--sk-sec); }
.sk-theses__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sk-theses__top { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin: 0; }
.sk-theses__top b { font: 600 clamp(44px, 2.4vw + 30px, 72px)/1 var(--sk-font); letter-spacing: -0.045em; color: var(--sk-pink-num); font-variant-numeric: tabular-nums; }
.sk-theses__top small { font: 400 15px/1 var(--sk-font); color: var(--sk-ink-3); }
@media (max-width: 639px) { .sk-theses__top { align-items: flex-start; } }
.sk-theses__note { margin-top: 16px; min-height: 44px; }
.sk-theses__grid { list-style: none; margin: calc(var(--sk-gap-head) - 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 1023px) { .sk-theses__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .sk-theses__grid { grid-template-columns: minmax(0, 1fr); } }
.sk-theses .sk-tcard { display: flex; flex-direction: column; min-width: 0; border-radius: 24px; background: var(--sk-raised); overflow: hidden; }
.sk-tcard__art { position: relative; height: clamp(220px, 17vw + 40px, 300px); }
.sk-tcard__art > .sk-art { position: absolute; inset: 4% 6% 0; width: auto; height: auto; }
.sk-tcard__body { display: flex; flex-direction: column; flex: 1; padding: 6px 24px 22px; }
.sk-tcard__top { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font: 500 14px/1.2 var(--sk-font); color: var(--sk-ink-3); }
.sk-tcard__ex { color: var(--sk-pink-text); }
.sk-tcard__calls { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; }
.sk-tcard__calls li { display: flex; align-items: center; gap: 10px; min-height: 40px; font: 400 15px/1.3 var(--sk-font); color: var(--sk-ink-2); box-shadow: inset 0 -1px 0 var(--sk-line); }
.sk-tcard__calls li > span:not(.sk-side) { flex: 1; min-width: 0; }
.sk-tcard__calls li > b { flex: none; font: 500 14px/1 var(--sk-font); color: var(--sk-ink-3); font-variant-numeric: tabular-nums; }
.sk-tcard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: auto 0 0; padding-top: 22px; }
.sk-tcard__foot p { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.sk-tcard__foot b { font: 600 clamp(34px, 1vw + 24px, 44px)/1 var(--sk-font); letter-spacing: -0.045em; color: var(--sk-pink-num); font-variant-numeric: tabular-nums; }
.sk-tcard__foot p span, .sk-tcard__backers { font: 400 14px/1.2 var(--sk-font); color: var(--sk-ink-3); }
.sk-theses .sk-tcard.is-hot { background: #fbf8fa; }

/* scrubbed reveals (sections.js): an element rises 40 px and fades in as it crosses the lower third of the screen,
   and back out when scrolled back up; the transform is set inline on a damped value, so it never skips */

/* ---------- reduced motion: nothing moves, everything shows ---------- */
@media (prefers-reduced-motion: reduce) {
  .sk-frame, .sk-frame picture, .sk-close__body, .sk-calc__stage > .sk-wrap { clip-path: none !important; scale: none !important; translate: none !important; opacity: 1 !important; }
  .sk-tilt, .sk-rule, .sk-rule__art > .sk-art, .sk-mcard, .sk-mult__dot, .sk-dcard, [data-sk-rise] { transform: none !important; translate: none !important; opacity: 1 !important; }
  .sk-live__dot { animation: none; }
  .sk-qa__a p { translate: none; }
}