/* Layout: a layered painted valley you fly into; clouds carry you onto paper where the
   story draws itself; a pinned diorama walks place to place; stacked case cards; a desk
   of things you can move; a sky footer to close. */
:root {
  --paper: #FFF8EC;
  --paper-2: #FFF1D9;
  --ink: #13233A;
  --ink-2: #4B5D72;
  --line: rgba(19, 35, 58, .14);
  --sky: #2F7FD8;
  --sky-2: #9FD3FF;
  --sun: #FFD23F;
  --coral: #FF6B4A;
  --grass: #4F9E4A;
  --lilac: #B7A2FF;
  --card: #FFFDF7;
  --shadow: 0 30px 70px -24px rgba(19, 35, 58, .38), 0 2px 8px rgba(19, 35, 58, .08);
  --shadow-sm: 0 10px 24px -12px rgba(19, 35, 58, .35);
  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --geist: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Gaegu", "Comic Sans MS", cursive;
  --serif: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;  /* subtext: the same family as body copy */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
html { background: var(--paper); overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 3px; border-radius: 10px; }
.it { font-family: var(--serif); font-style: normal; font-weight: 400; font-size-adjust: .46; letter-spacing: -.01em; }
/* no lonely word on a line of its own: paragraphs wrap "pretty", short lines are balanced */
p, li, figcaption, blockquote, small, dd { text-wrap: pretty; }
.sec-head p, .sub, .role, .lead, .bi-p, .tag, figcaption, small, h1, h2, h3, h4, h5, li b, li span { text-wrap: balance; }
.wrap { width: min(76rem, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); box-sizing: border-box; }

/* brush highlights */
.hl { position: relative; z-index: 0; white-space: nowrap; }
.hl::before { content: ""; position: absolute; z-index: -1; inset: .12em -.12em .02em -.14em; background: var(--b) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.hl.on::before { clip-path: inset(0 0 0 0); }
.b-sun { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M7 33C18 12 58 8 108 9c42 1 78-2 87 14 5 11-4 24-35 27-40 4-100 5-137 1C6 49 1 43 7 33z' fill='%23FFD23F'/%3E%3C/svg%3E"); }
.b-sky { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5 30C14 11 60 9 104 10c46 1 82-1 90 15 6 12-6 23-38 25-40 3-98 4-134 0C5 48 0 41 5 30z' fill='%239FD3FF'/%3E%3C/svg%3E"); }
.b-coral { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M6 31C16 13 56 7 104 8c46 1 80 0 89 15 5 12-5 25-36 27-42 3-100 5-135 1C5 49 1 42 6 31z' fill='%23FFB4A0'/%3E%3C/svg%3E"); }
.b-lilac { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M6 31C16 13 56 7 104 8c46 1 80 0 89 15 5 12-5 25-36 27-42 3-100 5-135 1C5 49 1 42 6 31z' fill='%23D9CCFF'/%3E%3C/svg%3E"); }
.b-mint { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M7 33C18 12 58 8 108 9c42 1 78-2 87 14 5 11-4 24-35 27-40 4-100 5-137 1C6 49 1 43 7 33z' fill='%23BDEBC0'/%3E%3C/svg%3E"); }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) clamp(16px, 3vw, 36px) 0; pointer-events: none; }
.bar > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 999px; text-decoration: none; font-weight: 800; letter-spacing: -.02em;
  background: rgba(255, 253, 247, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-sm); }
.logo i { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--sun); display: grid; place-items: center; font-style: normal; font-size: 13px; }
.logo i img { width: 100%; height: 100%; object-fit: cover; }
.nav { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translateX(-50%); transition: transform .7s var(--ease), opacity .4s var(--ease);
  display: flex; align-items: center; gap: 2px; height: 64px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 250, 240, .42)); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(19, 35, 58, .06), 0 24px 48px -20px rgba(19, 35, 58, .45), 0 4px 12px -6px rgba(19, 35, 58, .18) !important; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 140% at 20% -30%, rgba(255, 255, 255, .8), transparent 55%); pointer-events: none; }
.nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 48px; padding: 0 18px; white-space: nowrap; font: 600 15px/1 var(--sans); letter-spacing: -.01em; color: var(--ink-2); text-decoration: none; border-radius: 999px; transition: color .3s; }
.nav a:hover, .nav a.on { color: var(--ink); }
.nav .ind { position: absolute; z-index: 0; left: 0; top: 8px; height: 48px; width: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); box-shadow: 0 1px 0 #fff inset, 0 6px 16px -8px rgba(19, 35, 58, .35), 0 0 0 1px rgba(19, 35, 58, .05); opacity: 0; transition: transform .55s var(--spring), width .55s var(--spring), opacity .3s; }
.nav .ind.on { opacity: 1; }
.nav .sep { width: 1px; height: 26px; margin: 0 6px; background: rgba(19, 35, 58, .12); }
.nav a.cta { color: #fff; background: var(--ink); padding: 0 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 18px -8px rgba(19, 35, 58, .6); transition: transform .4s var(--spring), background .3s; }
.nav a.cta:hover { background: #22395a; transform: translateY(-1px); }
.nav.away { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

/* =========================================================
   1 · THE VALLEY
   ========================================================= */
.valley { position: relative; height: 260vh; }
.stage .shade { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(255, 248, 236, 0) 30%, rgba(255, 248, 236, .55)); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; background: #2c7fd6; touch-action: pan-y; }
.cam { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 0; }
.scene { position: absolute; inset: 0; }
.scene > .bgp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ly { position: absolute; inset: 0; pointer-events: none; transform-origin: var(--fo, 52% 58%); }
.ly > img { position: absolute; transition: filter .9s var(--ease), transform .9s var(--ease); }
.ly .hot { position: absolute; pointer-events: auto; border-radius: 40% 40% 20% 20%; }
.scene.focusing .ly:not(.on):not(.keep) > img { filter: saturate(.25) brightness(1.08) contrast(.82); }
.scene.focusing .ly.on > img { filter: brightness(1.06) saturate(1.12) drop-shadow(0 0 18px rgba(255, 244, 200, .9)); }
.ly.lift > img { transform: translateY(-1.2%); }
/* the sunset landscape: one painted plate; picking a place lights that building up and dims the rest */
.ly[data-id="radio"] { display: none; }   /* music lives in the top-right button */
.ly > .plate { left: 0; top: 0; width: 100%; height: 100%; }
/* the painting is drawn by a depth-aware shader (real parallax and a sharp zoom); the plain image is only the fallback */
.gl-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s var(--ease), filter .9s var(--ease); pointer-events: none; }
.gl-plate.on { opacity: 1; }
.scene.gl .plate { visibility: hidden; }
:root[data-theme="dark"] .gl-plate:not(.nt) { filter: brightness(.6) saturate(.82) contrast(1.05); }
@media (max-width: 859px) { .gl-plate { display: none; } }
.scene.focusing .plate { filter: saturate(.55) brightness(.86) contrast(.94); }
.ly > .plate { transition: filter .9s var(--ease); }
:root[data-theme="dark"] .plate { filter: brightness(.6) saturate(.82) contrast(1.05); }
:root[data-theme="dark"] .scene.focusing .plate { filter: brightness(.42) saturate(.4); }
/* a soft dark gradient behind the headline so white type reads on the bright clouds (desktop only); it sits in the scene, under the pins */
.hero-scrim { display: none; }
@media (min-width: 860px) {
  .hero-scrim { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; will-change: opacity;
    background: radial-gradient(62% 58% at 22% 20%, rgba(8, 18, 42, .64) 0%, rgba(8, 18, 42, .4) 38%, rgba(8, 18, 42, .12) 68%, transparent 84%), linear-gradient(180deg, rgba(8, 18, 42, .32), transparent 20%); }
}


.drift img { position: absolute; opacity: .9; animation: drift var(--d, 120s) ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(8%); } }
.birds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flock { position: absolute; left: -6%; animation: fly var(--t, 50s) linear infinite; animation-delay: var(--dl, 0s); }
.flock > span { position: absolute; animation: bob 3.4s ease-in-out infinite alternate; }
.bird { display: block; width: 1.1vw; min-width: 11px; overflow: visible; }
.bird path { fill: none; stroke: #1d2f45; stroke-width: 1.7; stroke-linecap: round; transform-origin: 12px 6px; animation: flap .42s ease-in-out infinite alternate; }
@keyframes fly { from { left: -6%; } to { left: 106%; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(14px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }

.me-fig { position: absolute; transform: scaleX(-1); transform-origin: 50% 100%; }
.me-fig img { width: 100%; height: auto; animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; filter: saturate(.92) contrast(.96); }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }
.me-fig::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 40, 20, .45), transparent); z-index: -1; }

.pin { position: absolute; scale: var(--ps, 1); transform-origin: 50% 100%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; transition: opacity .5s var(--ease), transform .6s var(--ease); }
.pin b { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 13.5px; font-weight: 700; padding: 7px 13px 7px 8px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow-sm); transition: transform .5s var(--spring); }
.pin b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.pin::after { content: ""; width: 2px; height: 16px; background: linear-gradient(var(--card), transparent); }
.pin b { cursor: pointer; }
.pin:hover b, .pin.hov b, .pin.on b { transform: translateY(-7px) scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 14px 24px -10px rgba(19, 35, 58, .55); }
.pin:hover::after, .pin.hov::after { height: 22px; }
.pin::after { transition: height .4s var(--spring); }
.scene.focusing .pin:not(.on) { opacity: 0; }
.cam.flying .pin { opacity: 0; pointer-events: none; }

.hero-copy { position: absolute; z-index: 5; left: clamp(16px, 5vw, 76px); top: calc(env(safe-area-inset-top, 0px) + clamp(74px, 12vh, 140px)); width: min(52rem, calc(100vw - 32px));
  color: #fff; pointer-events: none; will-change: transform, opacity; transition: opacity .6s var(--ease); }
.hey { margin: 0 0 12px; display: inline-flex; align-items: center; gap: 10px; font: 400 calc(clamp(21px, 1.9vw, 28px) * var(--hs, 1))/1 var(--serif); font-size-adjust: .46; text-shadow: 0 2px 18px rgba(10, 40, 90, .35); }
.hey svg { width: calc(30px * var(--hs, 1)); height: calc(30px * var(--hs, 1)); }
.hero-copy h1 { margin: 0; font-weight: 800; font-size: calc(clamp(2.5rem, 4.9vw, 5.1rem) * var(--hs, 1)); line-height: .93; letter-spacing: -.05em; text-wrap: balance;
  text-shadow: 0 4px 30px rgba(10, 40, 90, .28); }
.hero-copy h1 .ln { display: block; overflow: hidden; padding: .03em .12em .09em 0; margin-bottom: -.06em; }
.hero-copy h1 .ln > span { display: inline-block; animation: rise 1.3s var(--ease) both; animation-delay: var(--dl, 1.7s); }
@keyframes rise { from { transform: translateY(112%); } to { transform: none; } }
.rq { position: relative; display: inline-block; color: var(--ink); padding: 0 .14em; z-index: 0; }
.rq::before { content: ""; position: absolute; inset: .08em -.04em .02em -.06em; z-index: -1; background: var(--b) center / 100% 100% no-repeat; clip-path: inset(0 100% 0 0); animation: paint 1s var(--ease) 2.5s forwards; }
.rq svg { position: absolute; left: -6%; right: -6%; top: 36%; width: 112%; height: 40%; overflow: visible; }
.rq svg path { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1s var(--ease) 3.2s forwards; }
@keyframes paint { to { clip-path: inset(0 0 0 0); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.sub { margin: calc(18px * var(--hs, 1)) 0 0; font: 400 calc(clamp(19px, 1.7vw, 25px) * var(--hs, 1))/1.3 var(--serif); font-size-adjust: .46; text-shadow: 0 2px 16px rgba(10, 40, 90, .45); opacity: 0; animation: fade 1s var(--ease) 2.9s forwards; }
.chips { position: absolute; z-index: 6; left: clamp(16px, 3vw, 36px); bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; opacity: 0; animation: fade 1s var(--ease) 3.2s forwards; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: rgba(255, 253, 247, .88); box-shadow: var(--shadow-sm); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--grass)); font-style: normal; }
.chip .live { position: relative; }
.chip .live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c, var(--grass)); animation: ping 2s var(--ease) infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
@keyframes fade { to { opacity: 1; } }

.chips, .hint { transition: opacity .5s var(--ease); }
.stage.ready .chips, .stage.ready .hint, .stage.ready .places, .stage.ready .scroll-cue { animation: none; opacity: 1; }
.hint { position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; font: 400 20px/1 var(--serif); font-size-adjust: .46; color: #fff; text-shadow: 0 2px 14px rgba(10, 40, 60, .6);
  pointer-events: none; opacity: 0; animation: fade 1s var(--ease) 3.6s forwards; }
.hint svg { width: 58px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.places { position: absolute; z-index: 7; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); display: flex; gap: 4px; padding: 6px;
  border-radius: 999px; background: rgba(255, 253, 247, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow);
  max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none; opacity: 0; animation: fade 1s var(--ease) 3.4s forwards; }
.places::-webkit-scrollbar { display: none; }
.places button { white-space: nowrap; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: background .3s; }
.places button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.places button:hover, .places button.on { background: var(--card); box-shadow: 0 2px 10px -3px rgba(19, 35, 58, .3); }
.scroll-cue { position: absolute; z-index: 5; right: clamp(16px, 3vw, 36px); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; align-items: center; gap: 10px;
  font: 400 19px/1 var(--serif); font-size-adjust: .46; color: #fff; text-shadow: 0 1px 12px rgba(10, 30, 50, .6); pointer-events: none; opacity: 0; animation: fade 1s var(--ease) 3.8s forwards; }
.scroll-cue i { width: 22px; height: 34px; border: 1.6px solid currentColor; border-radius: 12px; position: relative; }
.scroll-cue i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: currentColor; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }

/* chapter card in the valley */
.sheet { position: absolute; z-index: 9; top: 50%; right: clamp(16px, 3.4vw, 56px); width: min(29rem, calc(100vw - 32px)); max-height: calc(100svh - 150px); overflow: auto;
  padding: 24px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow); box-sizing: border-box; scrollbar-width: none;
  opacity: 0; visibility: hidden; transform: translate(26px, -50%) rotate(1.2deg); transition: opacity .5s var(--ease), transform .8s var(--ease), visibility 0s .8s; }
.sheet::-webkit-scrollbar { display: none; }
.sheet { overscroll-behavior: contain; }  /* scrolling inside a place card never spills over into the page */
.sheet.left { right: auto; left: clamp(16px, 3.4vw, 56px); transform: translate(-26px, -50%) rotate(-1.2deg); }
.sheet.on { opacity: 1; visibility: visible; transform: translate(0, -50%) rotate(0); transition: opacity .6s var(--ease) .12s, transform .9s var(--spring) .08s, visibility 0s; }
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet .sh-top { justify-content: flex-end; } .sheet .sh-top .tag { display: none; }  /* the card opens with its title; the close button keeps the top-right corner */
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.tag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(19, 35, 58, .06); font-size: 18px; line-height: 1; }
.x:hover { background: rgba(19, 35, 58, .12); }
:root[data-theme="dark"] .sheet .x { background: #4A4D52; color: #FFFFFF; box-shadow: none; }
:root[data-theme="dark"] .sheet .x:hover { background: #5C6066; }
.sheet h2 { margin: 12px 0 2px; font: 800 clamp(30px, 2.6vw, 40px)/1 var(--sans); letter-spacing: -.04em; }
.sheet .role { margin: 0 0 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.sheet .lead { margin: 0; font: 400 22px/1.22 var(--serif); font-size-adjust: .46; }
.sheet .did { margin: 12px 0 0; font-size: 15.5px; line-height: 1.5; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.nums li { padding: 11px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, var(--card)); display: grid; gap: 2px; }
.nums b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.nums span { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); font-weight: 500; }
.peek { display: flex; gap: 10px; margin: 16px 0 0; }
.peek img { width: calc((100% - 20px) / 3); height: auto; border-radius: 14px; box-shadow: var(--shadow-sm); border: 1px solid var(--line); background: #fff; transition: transform .5s var(--spring); }
.peek img:nth-child(1) { transform: rotate(-3deg); }
.peek img:nth-child(3) { transform: rotate(3deg); }
.peek:hover img { transform: none; }
.peek-note { margin: 16px 0 0; padding: 14px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--c) 50%, transparent); font: 400 19px/1.25 var(--serif); font-size-adjust: .46; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 11px 16px; border-radius: 999px; text-decoration: none; transition: transform .45s var(--spring), background .3s; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); }
.btn-ghost { background: rgba(19, 35, 58, .07); }
.btn-ghost:hover { background: rgba(19, 35, 58, .12); }

/* opening + closing clouds */
.veil { position: absolute; z-index: 20; inset: 0; pointer-events: none; background: #FFFDF8; animation: fadeout 1.6s .3s cubic-bezier(.4, 0, .2, 1) forwards, gone 0s 2s forwards; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes gone { to { visibility: hidden; } }

/* =========================================================
   2 · HOW I GOT HERE
   ========================================================= */
.story { position: relative; z-index: 8; height: 250vh; margin-top: -100vh; background: var(--paper); }
.story::before { content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 150px; pointer-events: none; background: url("v2/h/tear.png") 0 0 / auto 150px repeat-x; filter: drop-shadow(0 -8px 14px rgba(19, 35, 58, .16)); }
.story-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; overflow: hidden; }
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.kicker svg { width: 22px; height: 22px; fill: var(--coral); animation: spin 14s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.tell-box { position: relative; padding-right: min(18rem, 22vw); }
.tell { position: relative; z-index: 1; margin: 0; max-width: 22ch; font-weight: 800; font-size: clamp(2rem, 4.2vw, 4.1rem); line-height: 1.34; letter-spacing: -.03em; word-spacing: .04em; text-wrap: pretty; }
.tell .w { opacity: .13; transition: opacity .3s linear; }
.tell .hl::before { inset: .1em -.1em .0em -.12em; }
.doodles { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.doodles path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sticky { position: absolute; z-index: 3; width: 13.5rem; padding: 18px 18px 16px; box-sizing: border-box; font: 400 22px/1.2 var(--serif); font-size-adjust: .46; color: var(--ink);
  background: var(--sc, #FFE98A); box-shadow: 0 18px 30px -16px rgba(19, 35, 58, .45); border-radius: 4px 4px 14px 4px; cursor: grab; touch-action: none; user-select: none;
  opacity: 0; transform: translate(var(--tx, 0), calc(var(--ty, 0px) + 18px)) rotate(var(--r, -3deg)); transition: opacity .6s var(--ease), transform .8s var(--ease); will-change: transform; }
.sticky.in { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, -3deg)); }
.sticky.drag { cursor: grabbing; transition: none; box-shadow: 0 30px 40px -18px rgba(19, 35, 58, .5); }
.sticky::before { content: ""; position: absolute; left: 50%; top: -10px; width: 64px; height: 20px; margin-left: -32px; background: rgba(255, 255, 255, .55); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.st-lg { display: flex; gap: 8px; margin-top: 12px; }
.st-lg img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: #fff; box-shadow: 0 6px 12px -6px rgba(19, 35, 58, .45); pointer-events: none; }
.sticky small { display: block; margin-top: 8px; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .55; font-style: normal; }
.move-hint { position: absolute; font: 400 18px/1 var(--serif); font-size-adjust: .46; color: var(--ink-2); display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .6s; }
.move-hint.in { opacity: 1; }
.move-hint svg { width: 40px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; }

/* =========================================================
   3 · THE JOURNEY (a map you discover)
   ========================================================= */
.journey { position: relative; background: var(--paper); }
.j-track { position: relative; }
.j-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--paper); }
.j-fade { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(var(--paper) 0, var(--paper) calc(var(--hb, 240px) - 30px), color-mix(in srgb, var(--paper) 60%, transparent) calc(var(--hb, 240px) + 20px), transparent calc(var(--hb, 240px) + 80px), transparent 86%, var(--paper) 100%); }
.j-head { position: absolute; z-index: 6; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 8vh); padding: 0 16px; pointer-events: none; will-change: transform, opacity; }
.j-head .sec-head { justify-items: center; text-align: center; margin: 0; }
.j-head .sec-head h2 { max-width: 18ch; font-size: clamp(2.2rem, 4.8vw, 4.6rem); }
.j-head .kicker { margin-bottom: 6px; }
.j-head .sec-head p:not(.kicker) { max-width: none; }
.world3:not(.far) .mk { opacity: 0 !important; pointer-events: none; }
.mk { transition: opacity .5s var(--ease), transform .7s cubic-bezier(.22, 1, .36, 1); }
.world3.far .poi { opacity: 0 !important; pointer-events: none !important; }
.world3 > svg.maplayer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.spot2 { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease);
  background: radial-gradient(circle var(--sr, 800px) at var(--sx, 50%) var(--sy, 50%), rgba(244, 239, 225, 0) 38%, rgba(244, 239, 225, .82) 100%); }
.spot2.on { opacity: 1; }
.car { position: absolute; left: 0; top: 0; width: 20px; height: 11px; border-radius: 4px; background: linear-gradient(90deg, var(--c) 60%, rgba(255, 255, 255, .75) 60% 78%, var(--c) 78%); box-shadow: 0 2px 3px rgba(19, 35, 58, .25); offset-rotate: auto; animation: drive linear infinite; pointer-events: none; }
.boat { position: absolute; left: 0; top: 0; width: 30px; height: 12px; border-radius: 3px 3px 10px 10px; background: #fff; box-shadow: 0 0 0 1.5px #6C9CC2; offset-rotate: 0deg; animation: drive linear infinite; pointer-events: none; }
.boat::before { content: ""; position: absolute; left: 12px; bottom: 10px; border: 9px solid transparent; border-bottom: 18px solid #FF6B4A; border-top: 0; }
@keyframes drive { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.mapview { position: absolute; inset: 0; cursor: grab; touch-action: pan-y; }
.mapview.drag { cursor: grabbing; }
.world3 { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.world3 > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* pins */
.mk { position: absolute; left: 0; top: 0; z-index: 3; transform: translate(-50%, -100%) scale(var(--inv, 1)); transform-origin: 50% 100%; cursor: pointer; transition: opacity .6s var(--ease), transform .7s cubic-bezier(.22, 1, .36, 1); }
.mk .pinhead { position: relative; display: block; width: 52px; height: 64px; transform: scale(.3) translateY(24px); opacity: 0; transform-origin: 50% 100%; transition: transform .8s var(--spring), opacity .4s; filter: drop-shadow(0 10px 10px rgba(19, 35, 58, .28)); }
.mk .pinhead > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk .pinhead .lg { position: absolute; left: 50%; top: 6px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-sizing: border-box; background: #fff; }
.mk .pinhead .ic { position: absolute; left: 50%; top: 13px; width: 24px; height: 24px; margin-left: -12px; color: #fff; }
.mk .pinhead .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mk .nm { display: none; position: absolute; left: calc(100% + 6px); top: 14px; font: 700 14px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); background: #fff; padding: 7px 11px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(19, 35, 58, .45); opacity: 0; transform: translateX(-4px); transition: opacity .4s .15s, transform .6s var(--spring) .15s; }
.mk .dot { position: absolute; left: 50%; bottom: 0; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85); opacity: .7; transition: opacity .4s; }
.mk .halo { position: absolute; left: 50%; bottom: -14px; width: 84px; height: 28px; margin-left: -42px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); opacity: 0; transition: opacity .5s; }
.mk.seen .pinhead { transform: none; opacity: 1; }
.mk.seen .nm { opacity: 1; transform: none; }
.mk.seen .dot { opacity: 0; }
.mk.on .halo { opacity: 1; animation: halo 2.4s ease-in-out infinite; }
.mk.on .pinhead { transform: scale(1.12); }
.mk.dim { opacity: .25; }
@keyframes halo { 50% { transform: scale(1.35); opacity: .5; } }
/* little things on the map */
.poi { position: absolute; left: 0; top: 0; z-index: 2; transform: translate(-50%, -50%) scale(calc(var(--inv, 1) * .9)); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 45%, #fff), 0 8px 14px -8px rgba(19, 35, 58, .5); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .5s, box-shadow .3s; text-decoration: none; }
.poi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.poi.link { width: auto; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; gap: 7px; display: flex; align-items: center; background: var(--c); color: #fff; font: 700 14px/1 var(--sans); box-shadow: 0 10px 20px -10px var(--c); }
.poi.seen { opacity: 1; pointer-events: auto; }
.poi:hover, .poi.tipon { box-shadow: 0 0 0 3px var(--c), 0 0 22px 4px color-mix(in srgb, var(--c) 40%, transparent); }
.poi .tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 6px); width: max-content; max-width: 220px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff;
  font: 500 13.5px/1.35 var(--sans); text-align: left; opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--spring); }
.poi .tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.poi:hover .tip, .poi.tipon .tip, .poi:focus-visible .tip { opacity: 1; transform: translate(-50%, 0); }
/* polaroids that pop out of the map */
.pols { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; transform: scale(var(--inv, 1)); transform-origin: 0 0; pointer-events: none; }
.pol { position: absolute; left: 0; top: 0; width: 156px; padding: 10px 10px 42px; background: #FDFDFB; border-radius: 3px; box-shadow: 0 1px 2px rgba(19, 35, 58, .12), 0 16px 28px -14px rgba(19, 35, 58, .45); cursor: zoom-in; pointer-events: auto;
  transform: translate(-50%, -50%) translate(0, 0) rotate(0) scale(.2); opacity: 0; transition: transform .9s var(--spring), opacity .35s; transition-delay: calc(var(--k) * 90ms); }
.pols.in .pol { opacity: 1; transform: translate(-50%, -50%) translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
.pol:hover { transform: translate(-50%, -50%) translate(var(--x), calc(var(--y) - 8px)) rotate(0deg) scale(1.08) !important; z-index: 2; }
.pol .ph { display: block; width: 100%; aspect-ratio: 1; border-radius: 1px; overflow: hidden; background: var(--g); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); }
.pol .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pol .ph.empty { display: grid; place-items: center; color: #fff; }
.pol .ph.empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.pol span { position: absolute; left: 8px; right: 8px; bottom: 13px; font: 400 16px/1 var(--serif); font-size-adjust: .46; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(14px) scale(.8); opacity: .3; transition: transform 1s cubic-bezier(.34, 1.56, .64, 1), opacity .6s; }
.lm.seen { transform: none; opacity: 1; }
.world3.focus .lm.seen:not(.act) { opacity: .35; }
.world3.focus .mk.seen:not(.on) { opacity: .28; }
.world3.focus .poi.seen:not(.here) { opacity: 0; pointer-events: none; }
.lm.all { transform: none; opacity: .95; }
.ripple { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.ripple.go { animation: ripple 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ripple { 0% { transform: scale(.2); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.jc-share { margin-top: 18px; padding: 8px; border-radius: 18px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.jc-share p { margin: 0 0 10px; font: 400 17px/1.3 var(--serif); font-size-adjust: .46; color: var(--ink); }
.jc-share a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); font: 700 14px/1.2 var(--sans); transition: background .2s; }
.jc-share a:hover { background: #fff; }
.jc-share a i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.jc-share a i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-share a span { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.jc-share a em { margin-left: auto; font-style: normal; color: var(--ink-2); }
.me-tip { position: absolute; left: 0; top: 0; z-index: 5; width: 48px; height: 48px; transform: translate(-50%, -50%) scale(var(--inv, 1)); pointer-events: none; opacity: 0; transition: opacity .4s; }
.me-tip::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: rgba(66, 133, 244, .14); border: 1px solid rgba(66, 133, 244, .3); animation: halo 2.4s ease-in-out infinite; }
.me-tip svg { position: relative; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--hd, 0deg)); filter: drop-shadow(0 6px 10px rgba(26, 95, 208, .35)); }
.me-tip .cone { fill: rgba(66, 133, 244, .22); }
/* chrome over the map */
.compass { position: absolute; z-index: 6; right: clamp(16px, 3vw, 40px); top: calc(env(safe-area-inset-top, 0px) + 88px); width: 96px; height: 96px; opacity: 0; transform: scale(.6) rotate(-90deg); transition: opacity .8s var(--ease), transform 1.2s var(--spring); }
.compass.in { opacity: 1; transform: none; }
.compass svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 16px rgba(19, 35, 58, .2)); }
.compass .needle { transform-origin: 54px 54px; }
.mapctl { position: absolute; z-index: 6; right: clamp(16px, 3vw, 40px); bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); display: grid; gap: 8px; }
.mapctl .grp { display: grid; background: #fff; border-radius: 14px; box-shadow: 0 10px 22px -12px rgba(19, 35, 58, .5); overflow: hidden; }
.mapctl button { width: 44px; height: 44px; display: grid; place-items: center; font: 500 22px/1 var(--sans); color: var(--ink); transition: background .2s; }
.mapctl button + button { border-top: 1px solid rgba(19, 35, 58, .1); }
.mapctl button:hover { background: #F2F4F7; }
.mapctl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mapctl .solo { border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -12px rgba(19, 35, 58, .5); color: #4285F4; }
.jtl { position: absolute; z-index: 6; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 24px -14px rgba(19, 35, 58, .5); transition: opacity .5s; }
.jtl ol { position: relative; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jtl ol::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; background: rgba(19, 35, 58, .12); }
.jtl button { position: relative; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; }
.jtl button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(19, 35, 58, .25); transition: transform .4s var(--spring), background .3s, box-shadow .3s; }
.jtl button.done::before { background: var(--c); box-shadow: 0 0 0 2px var(--c); }
.jtl button.on::before { transform: scale(1.5); background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.jtl button:hover::before { transform: scale(1.4); }
.jtl .yr { min-width: 11ch; font: 700 14px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the chapter card */
.jcard { position: absolute; z-index: 6; left: clamp(16px, 3vw, 44px); top: 50%; width: min(26rem, calc(100vw - 32px)); max-height: calc(100svh - 190px); overflow-y: auto; scrollbar-width: none;
  box-sizing: border-box; padding: 0; border-radius: 28px; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(19, 35, 58, .5), 0 0 0 1px rgba(19, 35, 58, .05);
  transform: translate(-30px, -50%); opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.jcard::-webkit-scrollbar { display: none; }
.jcard.in { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.jcard .jc-in { transition: opacity .3s var(--ease), transform .5s var(--ease); }
.jcard.swap .jc-in { opacity: 0; transform: translateY(10px); }
.jc-top { display: flex; align-items: center; gap: 14px; padding: 20px 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, #fff), color-mix(in srgb, var(--c) 6%, #fff)); border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, transparent); }
.jc-top em { margin-left: auto; font: 700 12px/1 var(--sans); font-style: normal; letter-spacing: .08em; color: color-mix(in srgb, var(--c) 75%, var(--ink)); opacity: .7; font-variant-numeric: tabular-nums; }
.jc-bd { padding: 24px 26px 26px; }
.jc-top .tile { flex: none; width: 46px; height: 46px; border-radius: 14px; border: 2px solid #fff; display: grid; place-items: center; background: var(--c); color: #fff; overflow: hidden; box-shadow: 0 10px 20px -12px var(--c); }
.jc-top .tile img { display: block; width: 46px; height: 46px; object-fit: cover; }
.jc-top .tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-top p { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink-2); }
.jc-top p b { display: block; font-weight: 800; color: color-mix(in srgb, var(--c) 82%, var(--ink)); letter-spacing: -.01em; font-size: 15px; }
.jcard h3 { margin: 0 0 14px; font: 800 clamp(26px, 2.2vw, 32px)/1.05 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.jcard .txt { margin: 0; font: 400 16.5px/1.72 var(--sans); color: #2B3A4E; }
.jcard .txt b { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) 28%, transparent) 58%); padding: 0 1px; }
.jc-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(19, 35, 58, .1); list-style: none; }
.jc-stats li { flex: 1 1 0; min-width: 0; padding: 0 12px; border-left: 1px solid rgba(19, 35, 58, .1); }
.jc-stats li:first-child { padding-left: 0; border-left: 0; }
.jc-stats b { display: block; font: 800 26px/1 var(--sans); letter-spacing: -.035em; color: var(--c); }
.jc-stats span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.jc-act { display: flex; margin-top: 22px; }
.jc-gal { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(19, 35, 58, .08); }
.jc-gal > p { margin: 0 0 12px; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.jc-gal > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.jc-ph { padding: 6px 6px 20px; background: #FDFDFB; border-radius: 3px; box-shadow: 0 1px 2px rgba(19, 35, 58, .12), 0 10px 18px -12px rgba(19, 35, 58, .45); transform: rotate(var(--r)); transition: transform .4s var(--spring); position: relative; cursor: zoom-in; }
.jc-ph:hover { transform: rotate(0) translateY(-4px) scale(1.04); z-index: 1; }
.jc-ph .ph { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 1px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); color: #fff; }
.jc-ph .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.jc-ph .ph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.jc-ph small { position: absolute; left: 4px; right: 4px; bottom: 4px; font: 400 11.5px/1 var(--serif); font-size-adjust: .46; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-act .cbtn { padding: 13px 20px; font-size: 15px; }
.cbtn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; font: 700 14px/1 var(--sans); text-decoration: none; color: #fff; background: var(--c); box-shadow: 0 10px 22px -12px var(--c); transition: transform .4s var(--spring), box-shadow .3s; }
.cbtn:hover { transform: translateY(-2px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent), 0 0 26px 2px color-mix(in srgb, var(--c) 40%, transparent); }
.cbtn.ghost { background: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 80%, var(--ink)); box-shadow: none; }
.cbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jc-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(19, 35, 58, .08); font: 600 13px/1 var(--sans); color: var(--ink-2); }
.jc-nav button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; font: 700 13px/1 var(--sans); color: var(--ink); background: rgba(19, 35, 58, .05); }
.jc-nav button:hover { background: rgba(19, 35, 58, .1); }
.jc-nav button:disabled { opacity: .35; pointer-events: none; }
/* photo viewer */
.lb { position: fixed; z-index: 95; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 20px) clamp(16px, 4vw, 48px) calc(env(safe-area-inset-bottom, 0px) + 22px);
  background: rgba(15, 25, 40, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.lb.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.lb-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lb-head p { margin: 0; font: 600 14px/1.3 var(--sans); color: rgba(255, 255, 255, .75); }
.lb-head h4 { margin: 4px 0 0; font: 800 clamp(20px, 2vw, 26px)/1.1 var(--sans); letter-spacing: -.03em; color: #fff; }
.lb-x { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 24px/1 var(--sans); }
.lb-x:hover { background: rgba(255, 255, 255, .24); }
.lb-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; align-items: center; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-slide { flex: none; width: 100%; height: 100%; scroll-snap-align: center; display: grid; place-items: center; align-content: center; gap: 14px; }
.lb-slide .frame { position: relative; max-width: min(88vw, 900px); padding: 18px 18px 84px; background: #FDFDFB; border-radius: 3px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .65); transform: rotate(var(--rot, -1.5deg)) scale(.94); transition: transform .6s var(--spring); }
.lb-slide .frame figcaption { position: absolute; left: 18px; right: 18px; bottom: 22px; font: 400 26px/1 var(--serif); font-size-adjust: .46; color: #13233A; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb.open .lb-slide .frame { transform: rotate(var(--rot, -1.5deg)); }
.lb-slide img { display: block; max-width: 100%; max-height: calc(70vh - 94px); width: auto; height: auto; border-radius: 1px; }
.lb-slide .empty { width: min(76vw, 560px); aspect-ratio: 1; max-height: calc(70vh - 94px); border-radius: 6px; display: grid; place-items: center; align-content: center; gap: 10px; background: var(--g); color: #fff; font: 600 15px/1 var(--sans); }
.lb-slide .empty svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-slide figcaption { font: 400 22px/1.2 var(--serif); font-size-adjust: .46; color: #fff; text-align: center; }
.lb-foot { display: flex; justify-content: center; align-items: center; gap: 16px; font: 700 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.lb-foot button { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; transition: transform .3s var(--spring); }
.lb-foot button:hover { transform: scale(1.08); }
.lb-foot button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   4 · WORK (the box)
   ========================================================= */
#work, #lastlook, #process, #notes { display: none !important; }
.work { position: relative; padding-block: 20vh 4vh; background: var(--paper); overflow: clip; }
.wk.wk-ghost { position: fixed; z-index: 91; margin: 0; pointer-events: none; transform: none !important; }
.sec-head { display: grid; gap: 10px; margin-bottom: 7vh; }
.sec-head h2 { margin: 0; font: 800 clamp(2.6rem, 6.4vw, 6.2rem)/.94 var(--sans); letter-spacing: -.055em; text-wrap: balance; max-width: 16ch; }
.sec-head p:not(.kicker) { margin: 0; font: 400 clamp(20px, 1.8vw, 26px)/1.3 var(--serif); font-size-adjust: .46; color: var(--ink-2); max-width: 64ch; }
.box-track { position: relative; height: 230vh; margin-top: -2vh; }
.box-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.box-fit { position: absolute; left: 50%; top: 65%; width: 0; height: 0; perspective: 2400px; perspective-origin: 50% 25%; will-change: transform; }
.box3 { position: absolute; width: 660px; height: 260px; left: -330px; top: -60px; transform-style: preserve-3d; transform: rotateX(57deg) rotateZ(30deg); }
.box3 .f { position: absolute; transform-origin: 50% 100%; backface-visibility: visible; box-sizing: border-box; }
.box-floor { position: absolute; inset: 0; background: linear-gradient(135deg, #EAD3A8, #DDBF8C); box-shadow: inset 0 0 50px rgba(120, 80, 30, .3); }
.box-shadow { position: absolute; inset: -50px -40px -40px -50px; transform: translateZ(-2px); background: rgba(90, 60, 20, .3); filter: blur(40px); border-radius: 40px; }
.wall-o { background: linear-gradient(180deg, #DDBD8B, #C99F66); border-top: 6px solid #F0DCB6; }
.wall-i { background: linear-gradient(180deg, #E8CFA0, #D5B37C); border-top: 6px solid #F4E3C2; }
.wall-o .brand { position: absolute; inset: 0; display: grid; place-items: center; font: 800 30px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; color: #C39A61; text-shadow: 0 1.5px 0 rgba(255, 240, 212, .7), 0 -1.5px 0 rgba(106, 72, 30, .55); }
.box-lid { background: linear-gradient(0deg, #E3C795, #F0DDB8); border: 6px solid #D4B07A; transition: transform 1.9s cubic-bezier(.65, 0, .2, 1) .1s; }
.box-lid::after { content: ""; position: absolute; inset: 24px; border: 1.5px dashed rgba(122, 90, 46, .35); border-radius: 8px; }
.box-lid .stamp2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 42px/1 var(--hand); color: rgba(122, 90, 46, .55); white-space: nowrap; }
.wk { position: absolute; width: 224px; height: 304px; transform-origin: 50% 100%; cursor: pointer; border-radius: 24px; box-sizing: border-box; overflow: hidden;
  padding: 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: #fff; background: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 40px -18px rgba(19, 35, 58, .5);
  transition: transform .9s cubic-bezier(.2, .9, .25, 1), box-shadow .5s var(--ease); outline: none; backface-visibility: hidden; }
.wk::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%); }
.wk::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.wk > * { position: relative; z-index: 1; }
.wk .wk-logo { width: 44px; height: 44px; border-radius: 13px; object-fit: cover; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); }
.wk .wk-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.wk .wk-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wk .wk-hand { font: 700 24px/1 var(--hand); opacity: .95; }
.wk .wk-big { font: 800 58px/.9 var(--sans); letter-spacing: -.05em; }
.wk .wk-mid { font: 700 27px/1.05 var(--sans); letter-spacing: -.035em; }
.wk .wk-sub { font: 400 13px/1.3 var(--geist); opacity: .85; margin-top: 6px; }
.wk .wk-top { display: flex; justify-content: space-between; align-items: flex-start; }
.wk .wk-tag { font: 600 11px/1 var(--geist); letter-spacing: .06em; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.wk.light { color: var(--ink); }
.wk.light .wk-tag { background: rgba(19, 35, 58, .08); }
.wk.light::after { box-shadow: inset 0 0 0 1.5px rgba(19, 35, 58, .06); }
.wk.dark::after { box-shadow: inset 0 0 0 2px transparent; background: linear-gradient(#141418, #141418) padding-box, linear-gradient(to top, #8AF28A, #7C5CFF 40%, transparent 70%) border-box; border: 2px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); }
.wk-bk { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; color: #fff; background: linear-gradient(180deg, rgba(12, 18, 30, .5), rgba(12, 18, 30, .72)); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.wk > :not(.wk-bk) { transition: opacity .35s var(--ease); } .wk.hover:has(.wk-bk) > :not(.wk-bk) { opacity: 0; } .wk.hover .wk-bk { opacity: 1; }
.wb-k { margin: 0; font: 700 11px/1 var(--geist); letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.wb-n { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; } .wb-n li { display: grid; gap: 3px; translate: 0 8px; opacity: 0; transition: translate .5s var(--ease), opacity .4s; }
.wb-n b { font: 800 40px/1 var(--sans); letter-spacing: -.04em; } .wb-n span { font: 500 13px/1.3 var(--geist); opacity: .9; }
.wb-l { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .wb-l li { display: flex; gap: 8px; font: 600 14px/1.3 var(--sans); translate: 0 8px; opacity: 0; transition: translate .5s var(--ease), opacity .4s; }
.wb-l svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #8AF2B5; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.wb-g { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .wb-g span { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, .14); font: 500 12px/1 var(--geist); } .wb-g b { font: 800 17px/1 var(--sans); letter-spacing: -.02em; color: #8AF2B5; }
.wb-t { margin-top: -4px; font: 500 11.5px/1 var(--geist); opacity: .7; }
.wb-go { margin-top: auto; font: 700 13px/1 var(--sans); }
.wk.hover .wb-n li, .wk.hover .wb-l li { translate: 0 0; opacity: 1; } .wk.hover :is(.wb-n, .wb-l) li:nth-child(2) { transition-delay: .06s; } .wk.hover :is(.wb-n, .wb-l) li:nth-child(3) { transition-delay: .12s; }
.wk.hover, .wk:focus-visible { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 0 0 3px rgba(255, 255, 255, .9), 0 0 40px 4px var(--glow); }
.box-info { position: absolute; z-index: 3; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6vh); bottom: calc(env(safe-area-inset-bottom, 0px) + 3vh); transform: translateX(-50%); width: min(76rem, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; color: var(--ink); }
.box-info > * { pointer-events: auto; }
.box-info .bi-k { margin: 0 0 10px; font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--coral)); }
.box-info h3 { margin: 0 0 10px; font: 800 clamp(28px, 2.6vw, 40px)/1 var(--sans); letter-spacing: -.045em; }
.box-info { opacity: 0; translate: 0 18px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.box-info.in { opacity: 1; translate: 0 0; }
.box-info .bi-p { margin: 0; max-width: 58ch; min-height: 2.7em; font: 400 19px/1.4 var(--serif); font-size-adjust: .46; color: var(--ink-2); text-wrap: balance; }
.bi-m { display: flex; justify-content: center; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.bi-m li { padding: 0 20px; text-align: center; animation: bim .5s var(--ease) both; }
.bi-m li + li { border-left: 1px solid rgba(19, 35, 58, .12); }
.bi-m li:nth-child(2) { animation-delay: .06s; } .bi-m li:nth-child(3) { animation-delay: .12s; }
.bi-m b { display: block; font: 800 26px/1 var(--sans); letter-spacing: -.04em; color: color-mix(in srgb, var(--c) 85%, var(--ink)); }
.bi-m span { display: block; margin-top: 5px; font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); max-width: 17ch; }
@keyframes bim { from { opacity: 0; transform: translateY(6px); } }
.bi-list { margin: auto 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, auto); justify-content: center; column-gap: clamp(2px, 1.2vw, 24px); width: 100%; }
.bi-list li { min-width: 0; }
.bi-list button { max-width: 100%; }
.bi-list button em { font-style: normal; white-space: nowrap; }
.bi-list button { padding: 10px 14px !important; font-size: 15px !important; }
.bi-list button { width: auto; display: grid; grid-template-columns: 26px auto; text-align: left; align-items: baseline; gap: 0 8px; padding: 10px 12px; border-radius: 14px; text-align: left; font: 700 16px/1.2 var(--sans); color: var(--ink); transition: background .25s, transform .35s var(--spring); }
.bi-list button b { font: 700 13px/1 var(--sans); color: var(--c); }
.bi-list button span { grid-column: 2; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.bi-list button { position: relative; }
.bi-list button::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px; border-radius: 2px; background: var(--c); transform: scaleX(0); transition: transform .4s var(--spring); }
.bi-list button:hover, .bi-list button.on { background: none; box-shadow: none !important; transform: translateY(-3px); color: color-mix(in srgb, var(--c) 78%, var(--ink)); }
.bi-list button:hover::before, .bi-list button.on::before { transform: scaleX(1); }
.bi-list:has(button.on) button:not(.on):not(:hover) { opacity: .45; }
.bi-list button { transition: opacity .3s, color .3s, transform .45s var(--spring); }
@media (min-width: 861px) { .bi-list button { padding: 10px 8px !important; font-size: clamp(13.5px, 1.05vw, 16px) !important; grid-template-columns: 22px auto; gap: 0 6px; } .bi-list button b { font-size: 12px; } .bi-list button { grid-template-columns: 22px auto !important; } .bi-list button span { font-size: clamp(11.5px, .9vw, 13px); } }
.box-cap { display: none !important; position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; font: 400 17px/1 var(--geist); color: var(--ink); white-space: nowrap; }
.box-cap b { font-weight: 600; color: var(--c, var(--coral)); font-variant-numeric: tabular-nums; }
.box-cap .hint2 { font: 700 24px/1 var(--hand); color: var(--ink-2); }
/* case study page */
.cs { position: fixed; z-index: 90; inset: 0; background: var(--t, var(--paper)); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; clip-path: inset(50% 50% 50% 50% round 18px); }
.cs.open { visibility: visible; }
.cs-in { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .8s var(--ease); }
.cs.ready .cs-in { opacity: 1; transform: none; }
.cs-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 16px) clamp(16px, 4vw, 48px) 14px;
  background: linear-gradient(var(--t), color-mix(in srgb, var(--t) 0%, transparent)); }
.cs-close { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--geist); padding: 11px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.cs-full { font: 600 14px/1 var(--geist); text-decoration: none; padding: 11px 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.cs-hero { padding: 6vh clamp(16px, 4vw, 48px) 5vh; max-width: 76rem; margin: 0 auto; box-sizing: border-box; }
.cs-hero .k { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--geist); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 70%, #13233A); }
.cs-hero .k i { width: 34px; height: 34px; border-radius: 10px; background: #fff; color: var(--c); display: grid; place-items: center; }
.cs-hero .k i svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-hero h2 { margin: 18px 0 14px; font: 800 clamp(2.8rem, 7vw, 6.4rem)/.92 var(--sans); letter-spacing: -.055em; max-width: 14ch; }
.cs-hero .pitch { margin: 0; font: 400 clamp(21px, 2vw, 28px)/1.3 var(--serif); font-size-adjust: .46; max-width: 36ch; }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; max-width: 52rem; }
.cs-meta li { font: 400 15px/1.45 var(--geist); }
.cs-meta b { display: block; font: 600 12px/1 var(--geist); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.cs-shots { display: flex; gap: 16px; padding: 2vh clamp(16px, 4vw, 48px) 6vh; overflow-x: auto; scrollbar-width: none; justify-content: center; }
.cs-shots img { height: min(62vh, 560px); width: auto; border-radius: 22px; border: 4px solid #fff; box-shadow: var(--shadow); background: #fff; flex: none; }
.cs-body { background: var(--paper); padding: 8vh clamp(16px, 4vw, 48px) 12vh; }
.cs-body > div { max-width: 60rem; margin: 0 auto; display: grid; gap: 7vh; }
.cs-sec { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 24px; }
.cs-sec h3 { margin: 0; font: 400 26px/1.1 var(--serif); font-size-adjust: .46; }
.cs-sec p, .cs-sec li { margin: 0; font: 400 18px/1.6 var(--geist); }
.cs-sec ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; counter-reset: s; }
.cs-sec ol li { position: relative; padding-left: 44px; counter-increment: s; }
.cs-sec ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: .1em; font: 600 13px/1.6 var(--geist); color: var(--c); }
.cs-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cs-res li { padding: 20px; border-radius: 18px; background: var(--t); }
.cs-res b { display: block; font: 800 38px/1 var(--sans); letter-spacing: -.04em; }
.cs-res span { display: block; margin-top: 8px; font: 400 14px/1.35 var(--geist); color: var(--ink-2); }
.cs-end { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cs-end a, .cs-end button { font: 600 15px/1 var(--geist); text-decoration: none; padding: 14px 20px; border-radius: 999px; }
.cs-end a { background: var(--ink); color: var(--paper); }
.cs-end button { background: rgba(19, 35, 58, .07); }

/* =========================================================
   4b · BRAND & WEB (horizontal scroll)
   ========================================================= */
.brand-sec { position: relative; background: #FFF1D9; }
.brand-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.brand-head { padding: calc(env(safe-area-inset-top, 0px) + 90px) clamp(16px, 4vw, 56px) 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brand-head h2 { margin: 0; font: 800 clamp(2.4rem, 5.4vw, 5rem)/.94 var(--sans); letter-spacing: -.055em; }
.brand-head > p { margin: 0; font: 700 24px/1.1 var(--hand); color: var(--ink-2); max-width: 22ch; }
.bh-sub { margin: 14px 0 0; max-width: 40ch; font: 400 clamp(19px, 1.6vw, 23px)/1.35 var(--serif); font-size-adjust: .46; color: var(--ink-2); }
.bh-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 13px 20px 13px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 15px/1 var(--sans); text-decoration: none; box-shadow: 0 14px 26px -14px rgba(19, 35, 58, .7); transition: transform .4s var(--spring), box-shadow .3s; }
.bh-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 4px rgba(255, 107, 74, .25), 0 18px 30px -14px rgba(19, 35, 58, .7); }
.bh-cta i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #3DDC84; }
.bh-cta i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #3DDC84; animation: ping 2s var(--ease) infinite; }
.brand-row { position: relative; display: flex; align-items: center; gap: clamp(28px, 4vw, 64px); padding: 0 clamp(16px, 8vw, 140px); will-change: transform; }
.site { position: relative; flex: none; width: min(560px, 78vw); transform: translateY(var(--dy, 0)) rotate(var(--r, 0deg)); transition: transform .6s var(--spring); }
.site:hover { transform: translateY(calc(var(--dy, 0px) - 10px)) rotate(0deg) scale(1.02); }
.site .win { border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(19, 35, 58, .55), 0 0 0 1px rgba(19, 35, 58, .08); }
.site .chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #F4F1EA; border-bottom: 1px solid rgba(19, 35, 58, .08); }
.site .chrome i { width: 10px; height: 10px; border-radius: 50%; background: #E2DCCF; }
.site .chrome i:nth-child(1) { background: #FF6159; } .site .chrome i:nth-child(2) { background: #FFBD2E; } .site .chrome i:nth-child(3) { background: #28C941; }
.site .chrome span { margin-left: 10px; flex: 1; font: 400 12px/1 var(--geist); color: var(--ink-2); background: #fff; padding: 6px 10px; border-radius: 8px; }
.site .page { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.site .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding: 0 4px; }
.site .cap b { font: 800 22px/1 var(--sans); letter-spacing: -.03em; }
.site .cap span { font: 400 14px/1 var(--geist); color: var(--ink-2); }
.stk { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 8px 10px rgba(19, 35, 58, .25)); }
.stk.round { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; text-align: center; font: 700 19px/1 var(--hand); color: #fff; background: var(--sc, #FF6B4A); border: 3px solid #fff; }
.stk.tape { width: 110px; height: 30px; background: rgba(255, 216, 107, .8); transform: rotate(-8deg); }
.stk.star { width: 84px; height: 84px; }
.stk.star svg { width: 100%; height: 100%; }
.stk.pill { padding: 8px 14px; border-radius: 999px; background: #13233A; color: #fff; font: 700 18px/1 var(--hand); border: 2px solid #fff; }
.brand-prog { display: none; position: absolute; left: clamp(16px, 4vw, 56px); right: clamp(16px, 4vw, 56px); bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); height: 4px; border-radius: 2px; background: rgba(19, 35, 58, .1); }
.brand-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 2px; background: var(--coral); }
/* mini landing pages */
.lp { position: absolute; inset: 0; padding: 7% 7%; box-sizing: border-box; display: flex; flex-direction: column; }
.lp nav { display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--geist); }
.lp nav em { font-style: normal; opacity: .7; }
.lp h5 { margin: auto 0 0; }
.lp .btn5 { align-self: flex-start; margin-top: 14px; padding: 9px 14px; border-radius: 999px; font: 600 11px/1 var(--geist); }
.lp-coffee { background: #F5EBDD; color: #3B2417; }
.lp-coffee h5 { font: 400 42px/.95 var(--serif); font-size-adjust: .46; max-width: 8ch; }
.lp-coffee .btn5 { background: #3B2417; color: #F5EBDD; }
.lp-coffee .cup { position: absolute; right: 8%; bottom: 12%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #6B3E24 0 34%, #C79A6B 35% 44%, #fff 45% 60%, transparent 61%), #E9D5BD; box-shadow: 0 20px 30px -18px rgba(59, 36, 23, .6); }
.lp-fin { background: #0E1530; color: #fff; }
.lp-fin h5 { font: 800 36px/.95 var(--sans); letter-spacing: -.04em; max-width: 9ch; }
.lp-fin h5 span { color: #C6FF4D; }
.lp-fin .btn5 { background: #C6FF4D; color: #0E1530; }
.lp-fin .cardx { position: absolute; right: 7%; top: 30%; width: 40%; aspect-ratio: 1.6; border-radius: 14px; background: linear-gradient(135deg, #7C5CFF, #22D3EE); transform: rotate(-10deg); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .6); }
.lp-fin .cardx::after { content: ""; position: absolute; left: 10%; top: 18%; width: 18%; aspect-ratio: 1.3; border-radius: 4px; background: #FFD86B; }
.lp-fit { background: #FF5A1F; color: #1A0A02; }
.lp-fit h5 { font: 800 60px/.82 var(--sans); letter-spacing: -.06em; text-transform: uppercase; }
.lp-fit .btn5 { background: #1A0A02; color: #FF5A1F; }
.lp-fit .grid5 { position: absolute; right: 7%; top: 22%; width: 34%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lp-fit .grid5 i { aspect-ratio: 1; border-radius: 10px; background: #FFD2BF; } .lp-fit .grid5 i:nth-child(2) { background: #1A0A02; } .lp-fit .grid5 i:nth-child(3) { background: #FFB08F; border-radius: 50%; }
.lp-skin { background: #DDEBDD; color: #22402E; }
.lp-skin h5 { font: 400 44px/.95 var(--serif); font-size-adjust: .46; max-width: 7ch; }
.lp-skin .btn5 { background: #fff; color: #22402E; box-shadow: inset 0 0 0 1.5px #22402E; }
.lp-skin .bottle { position: absolute; bottom: 10%; width: 12%; border-radius: 30px 30px 10px 10px; background: linear-gradient(#F7F3EA, #E8DECB); box-shadow: 0 16px 24px -14px rgba(34, 64, 46, .6); }
.lp-skin .bottle::before { content: ""; position: absolute; left: 30%; right: 30%; top: -14%; height: 16%; border-radius: 4px; background: #22402E; }
.lp-trav { background: linear-gradient(#8ED0FF, #D8F0FF 70%); color: #0B3B63; }
.lp-trav h5 { font: 800 40px/.92 var(--sans); letter-spacing: -.045em; max-width: 8ch; }
.lp-trav .btn5 { background: #0B3B63; color: #fff; }
.lp-trav svg.mnt { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; }
@media (max-width: 860px) { .brand-head p { font-size: 20px; } .site .cap b { font-size: 18px; } .lp-fit h5 { font-size: 40px; } .lp-coffee h5, .lp-skin h5 { font-size: 30px; } .lp-fin h5, .lp-trav h5 { font-size: 26px; } }

/* =========================================================
   5 · HOW I WORK
   ========================================================= */
/* =========================================================
   5 · MY STACK (the gift)
   ========================================================= */
/* =========================================================
   5 · MY STACK (The Library Bookcase)
   ========================================================= */
.stack { position: relative; padding-block: 10vh 12vh; background: var(--paper); overflow: hidden; }
.stack .wrap { width: min(1200px, 92vw); margin-inline: auto; }

.bookcase {
  position: relative;
  margin-top: 5vh;
  border-radius: 20px;
  background: linear-gradient(180deg, #2A170C 0%, #1D1007 100%);
  border: 10px solid #3E2413;
  box-shadow: 0 30px 80px -20px rgba(19, 35, 58, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.1), inset 0 0 40px rgba(0, 0, 0, 0.6);
  padding: 24px 28px 36px;
  color: #F8F5EE;
}

:root[data-theme="dark"] .bookcase {
  background: linear-gradient(180deg, #1C1917 0%, #12100E 100%);
  border-color: #2E251E;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.05), inset 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Bookcase crown */
.bc-crown {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 28px;
  border-bottom: 2px solid #55331C;
  margin-bottom: 32px;
}
:root[data-theme="dark"] .bc-crown { border-bottom-color: #382C24; }

.bc-plaque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  border-radius: 6px;
  background: linear-gradient(180deg, #E6C280 0%, #B88B42 50%, #8C6527 100%);
  border: 1px solid #FFDE9E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #241407;
  font: 800 12px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bc-screw {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5A3F18, #2E1D06);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
}
.bc-screw::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 1px;
  right: 1px;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
}

/* Shelves container */
.bc-shelves {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Individual Shelf */
.bc-shelf {
  position: relative;
  display: flex;
  flex-direction: column;
}

.bc-shelf-meta {
  margin-bottom: 18px;
  padding-left: 4px;
}

.bc-shelf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(220, 180, 110, 0.15);
  border: 1px solid rgba(220, 180, 110, 0.3);
  color: #F4D090;
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.bc-brass-pin {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #E8C172;
  box-shadow: 0 0 4px rgba(232, 193, 114, 0.6);
}

.bc-shelf-meta h3 {
  margin: 0 0 4px;
  font: 700 22px/1.2 var(--sans);
  color: #FFF9F0;
  letter-spacing: -0.02em;
}

.bc-shelf-meta p {
  margin: 0;
  font: 400 14px/1.45 var(--sans);
  color: #D4C3B2;
  max-width: 65ch;
}

/* Row of books */
.bc-books-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  align-items: end;
  position: relative;
  z-index: 2;
  padding-bottom: 2px;
}

/* Book Card */
.book-card {
  position: relative;
  display: flex;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(135deg, #2D1A10 0%, #1E120A 100%);
  border: 1px solid rgba(255, 230, 190, 0.15);
  box-shadow: -2px 4px 10px rgba(0, 0, 0, 0.35), inset 1px 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: default;
  outline: none;
  min-height: 195px;
}

.book-card:hover, .book-card:focus-visible {
  transform: translateY(-9px) scale(1.02);
  border-color: rgba(244, 208, 144, 0.5);
  box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.65), 0 0 18px rgba(244, 208, 144, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3);
  z-index: 5;
}

.book-spine {
  width: 14px;
  flex: none;
  border-radius: 10px 0 0 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%, rgba(0, 0, 0, 0.45) 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.4);
  position: relative;
}
.book-spine::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 6px;
  width: 1px;
  background: rgba(255, 215, 140, 0.25);
}

.book-face {
  flex: 1;
  padding: 16px 14px 16px 10px;
  display: flex;
  flex-direction: column;
}

.book-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.book-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.book-icon svg {
  width: 22px;
  height: 22px;
}

.book-role {
  font: 700 11px/1.2 var(--sans);
  color: #E2B774;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-name {
  margin: 0 0 6px;
  font: 800 17px/1.2 var(--sans);
  color: #FFFDF9;
  letter-spacing: -0.01em;
}

.book-desc {
  margin: 0;
  font: 400 12.5px/1.45 var(--sans);
  color: #C5B6A5;
}

/* Wooden Shelf Plank */
.bc-plank {
  position: relative;
  height: 18px;
  margin-top: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #8A5732 0%, #6E4426 35%, #4A2E1A 75%, #2B1A0F 100%);
  box-shadow: 0 10px 20px -3px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.28), inset 0 -2px 4px rgba(0, 0, 0, 0.5);
  border: 1px solid #2B1A0F;
  border-top-color: #9C663D;
  z-index: 1;
}

:root[data-theme="dark"] .bc-plank {
  background: linear-gradient(180deg, #4A3A2F 0%, #382A20 35%, #261B14 75%, #17100B 100%);
  border-color: #17100B;
  border-top-color: #5C4A3D;
}

.bc-plank-shadow {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -10px;
  height: 10px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.6) 0%, transparent 75%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .bookcase { padding: 18px 16px 26px; }
  .bc-books-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  .book-card { min-height: 180px; }
  .book-face { padding: 12px 10px 12px 6px; }
  .book-name { font-size: 15px; }
  .book-desc { font-size: 11.5px; }
  .book-role { font-size: 10px; }
  .book-icon { width: 32px; height: 32px; }
  .book-icon svg { width: 18px; height: 18px; }
}

/* =========================================================
   6 · LASTLOOK
   ========================================================= */
.ll { --ll-ink: #3A2616; position: relative; padding-top: 6vh; color: var(--ll-ink); background: linear-gradient(180deg, #F7E7CC, #F3DDBB 60%, #F7E7CC); }
.ll .sec-head h2, .ll .tell, .ll-stats b { color: var(--ll-ink); }
.ll .kicker { color: #8A6242; }
.b-caramel { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M5 30C14 11 60 9 104 10c46 1 82-1 90 15 6 12-6 23-38 25-40 3-98 4-134 0C5 48 0 41 5 30z' fill='%23EDBB7E'/%3E%3C/svg%3E"); }
.b-peach { --b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M6 31C16 13 56 7 104 8c46 1 80 0 89 15 5 12-5 25-36 27-42 3-100 5-135 1C5 49 1 42 6 31z' fill='%23FFC4A6'/%3E%3C/svg%3E"); }
.ll-roles { width: min(1100px, 100%); margin: 0 0 9vh; }
.ll-roles-k { margin: 0 0 26px; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8A6242; }
.ll-roles ol { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin: 0; padding: 0; list-style: none; }
.ll-roles ol::before, .ll-roles ol::after { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 24px; height: 3px; border-radius: 2px; background: rgba(58, 38, 22, .12); }
.ll-roles ol::after { background: linear-gradient(90deg, #FF6B4A, #F2A93B, #C98B52, #1DB954, #0B0B0C, #E1306C); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--ease); }
.ll-roles.in ol::after { transform: scaleX(1); }
.ll-roles li { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 8px; opacity: 0; translate: 0 12px; transition: opacity .6s var(--ease), translate .7s var(--spring); transition-delay: calc(var(--d) * .25s + .2s); }
.ll-roles.in li { opacity: 1; translate: 0 0; }
.ll-roles li i.hat { position: relative; z-index: 1; display: grid; place-items: end center; width: 64px; height: 50px; margin: -24px 0 6px; }
.ll-roles li i.hat svg { width: 58px; height: auto; filter: drop-shadow(0 6px 5px rgba(58, 38, 22, .28)); transform-origin: 50% 90%; transform: translateY(-60px) rotate(-18deg); opacity: 0; transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; transition-delay: calc(var(--d) * .25s + .3s); }
.ll-roles.in li i.hat svg { transform: none; opacity: 1; }
.ll-roles li:hover i.hat svg { animation: hattip .7s var(--ease); }
@keyframes hattip { 40% { transform: translateY(-10px) rotate(-12deg); } 70% { transform: translateY(0) rotate(4deg); } }
.ll-roles li b { font: 800 18px/1.1 var(--sans); letter-spacing: -.02em; color: var(--ll-ink); }
.ll-roles li span { font: 400 14px/1.4 var(--sans); color: #6E5038; max-width: 16ch; }
.ll-rev-track { position: relative; height: 175vh; }
.ll-rev-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; }
.ll-tell { max-width: 26ch; margin-top: 4vh !important; }
.ll-rev-pin .sec-head { margin-bottom: 0; }
.ll-ic { position: relative; display: inline-block; width: .92em; height: .92em; vertical-align: -.14em; margin: 0 .04em; }
.ll-ic svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; animation: icbob 2.6s ease-in-out infinite; }
.ll-ic::before, .ll-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; margin: -50% 0 0 -50%; border-radius: 50%; border: .05em solid var(--rc); opacity: 0; animation: icring 2.2s var(--ease) infinite; }
.ll-ic::after { animation-delay: 1.1s; }
.ll-ic.fm { --rc: #1DB954; } .ll-ic.ll-loc { --rc: #FF6B4A; }
.ll-ic.ll-loc::before, .ll-ic.ll-loc::after { top: 88%; height: 36%; }
@keyframes icring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes icbob { 50% { transform: translateY(-.06em) rotate(-4deg); } }
.ll-app { display: inline-block; width: .9em; height: .9em; vertical-align: -.12em; }
.ll-app img { display: block; width: 100%; height: 100%; border-radius: .22em; box-shadow: 0 .08em .2em rgba(58, 38, 22, .35); animation: icbob 3s ease-in-out infinite; }
.ll-tell .oo { position: relative; display: inline-block; width: .5em; height: .54em; margin: 0 .01em; vertical-align: -.03em; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #F6EBDA); box-shadow: inset 0 0 0 .07em var(--ink); animation: blink 5s infinite; }
.ll-tell .oo s { position: absolute; left: 50%; top: 50%; width: .22em; height: .24em; margin: -.12em 0 0 -.11em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5A6B85 0 14%, #13233A 16%); transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .12s linear; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.ll-end { padding-block: 2vh 16vh; display: grid; justify-items: center; text-align: center; }
.ll-end-icon { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 20px 40px -18px rgba(58, 38, 22, .55); margin-bottom: 4vh; }
.ll-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: min(960px, 100%); margin: 0; padding: 0; list-style: none; }
.ll-stats li { padding: 0 clamp(12px, 3vw, 40px); }
.ll-stats li + li { border-left: 1px solid rgba(58, 38, 22, .15); }
.ll-stats b { display: block; font: 800 clamp(3rem, 6vw, 5.4rem)/.95 var(--sans); letter-spacing: -.06em; color: var(--ll-ink); }
.ll-stats span { display: block; margin: 12px auto 0; font: 600 13px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6E5038; max-width: 16ch; }
.ll-cta { margin-top: 5vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ll-store { display: inline-flex; align-items: center; gap: 12px; padding: 13px 26px 13px 20px; border-radius: 16px; background: #0B0B0C; color: #fff; text-decoration: none; box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .7); transition: transform .4s var(--spring), box-shadow .3s; }
.ll-store:hover { transform: translateY(-3px); box-shadow: 0 0 0 4px rgba(154, 106, 62, .3), 0 26px 40px -18px rgba(0, 0, 0, .7); }
.ll-store svg { width: 30px; height: 30px; margin-top: -3px; }
.ll-store span { display: grid; text-align: left; font: 700 22px/1 var(--sans); letter-spacing: -.02em; }
.ll-store small { font: 500 11.5px/1.3 var(--sans); letter-spacing: 0; opacity: .85; }
.ll-follow { font: 500 15px/1.4 var(--sans); color: #8A6242; text-decoration: underline dotted rgba(138, 98, 66, .6); text-underline-offset: 5px; text-decoration-thickness: 1.5px; transition: color .3s; }
.ll-follow:hover { color: var(--ll-ink); }
.ll-solo { margin: 4vh 0 0; font: 600 15px/1.4 var(--sans); color: var(--ll-br); }

.process { position: relative; padding-block: 24vh 20vh; background: var(--paper); overflow-x: clip; }
.proc-line { position: relative; margin-top: 6vh; height: 460px; }
.proc-line svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.proc-line .ln-bg { stroke: var(--line); }
.proc-line path { fill: none; stroke-width: 5; stroke-linecap: round; }
.pnode { position: absolute; width: 190px; transform: translate(-50%, 0); text-align: center; opacity: 0; translate: 0 18px; transition: opacity .6s var(--ease), translate .8s var(--spring); }
.pnode.in { opacity: 1; translate: 0 0; }
.pnode .dot { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-sizing: border-box; transition: background .4s, transform .5s var(--spring); }
.pnode.in .dot { background: var(--c); transform: scale(1.12); }
.pnode b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.pnode span { display: block; margin-top: 4px; font: 400 17px/1.25 var(--serif); font-size-adjust: .46; color: var(--ink-2); }
.pnode.up { transform: translate(-50%, -100%); }
.pnode.up .dot { margin: 10px auto 0; order: 3; }
.pnode.up { display: flex; flex-direction: column; }

/* =========================================================
   6 · OFF THE CLOCK (desk)
   ========================================================= */
.life { position: relative; padding-block: 22vh 24vh; background: var(--paper-2); overflow-x: clip; }
.desk { position: relative; height: 1000px; margin-top: 5vh; border-radius: 22px; border: 16px solid #9A6B3F; box-sizing: border-box;
  background: radial-gradient(circle at 30% 20%, rgba(255, 236, 200, .35), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .18 0 0 0 0 .06 0 0 0 1.4 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #D6A56D, #C38D56);
  box-shadow: inset 0 0 0 2px rgba(255, 220, 170, .25), inset 0 10px 30px rgba(60, 30, 0, .35), 0 30px 60px -30px rgba(60, 30, 0, .6); }
.item:hover { --r: 0deg !important; z-index: 15; }
.pinned::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -9px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85) 0 2px, var(--pc, #E4402A) 3.5px, color-mix(in srgb, var(--pc, #E4402A) 65%, #000) 100%); box-shadow: 3px 6px 5px rgba(40, 20, 0, .4); }
.taped::before { content: ""; position: absolute; left: 50%; top: -12px; width: 76px; height: 22px; margin-left: -38px; background: rgba(255, 255, 255, .55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.about { width: 370px; padding: 26px 26px 24px 46px; box-sizing: border-box; color: var(--ink); background: linear-gradient(90deg, transparent 32px, rgba(228, 64, 42, .35) 32px 34px, transparent 34px), repeating-linear-gradient(#FFFDF6 0 27px, rgba(42, 123, 209, .18) 27px 28px); background-color: #FFFDF6; box-shadow: 0 24px 34px -20px rgba(60, 30, 0, .6); }
.about .ab-k { margin: 0 0 4px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.about h4 { margin: 0 0 12px; font: 800 26px/1.05 var(--sans); letter-spacing: -.035em; }
.about b { display: block; margin: 10px 0 2px; font: 400 20px/1.35 var(--serif); font-size-adjust: .46; }
.about ul { margin: 0; padding: 0 0 0 16px; font: 500 14.5px/28px var(--sans); color: #2B3A4E; }
.scrap { width: 160px; padding: 16px 14px 12px; box-sizing: border-box; isolation: isolate; filter: drop-shadow(0 12px 12px rgba(60, 30, 0, .32)) drop-shadow(0 2px 2px rgba(60, 30, 0, .12)); }
.scrap::after { content: ""; position: absolute; z-index: -1; inset: 0; background: #FFFDF6; clip-path: polygon(0 3%, 12% 0, 30% 2%, 55% 0, 80% 3%, 100% 0, 98% 40%, 100% 72%, 97% 100%, 70% 97%, 42% 100%, 16% 97%, 0 100%, 2% 60%); }
.scrap.pinned::before { top: 4px; }
.scrap svg { width: 100%; height: auto; }
.scrap svg * { fill: none; stroke: #13233A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scrap span { display: block; margin-top: 6px; text-align: center; font: 400 17px/1 var(--serif); font-size-adjust: .46; color: var(--ink-2); }
.ticket { width: 390px; display: flex; filter: drop-shadow(0 20px 18px rgba(60, 30, 0, .35)); }
.ticket .tk-main { flex: 1; background: #fff; border-radius: 14px 0 0 14px; overflow: hidden; }
.tk-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #D71920; color: #fff; }
.tk-air { font: 400 26px/1 var(--serif); font-size-adjust: .46; letter-spacing: .01em; }
.tk-top small { font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.tk-route { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 6px; }
.tk-route b { display: block; font: 800 34px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.tk-route span { font: 500 12px/1.4 var(--sans); color: var(--ink-2); }
.tk-route > div:last-child { text-align: right; }
.tk-route i { flex: 1; margin: 0 12px; height: 2px; background: repeating-linear-gradient(90deg, #D71920 0 6px, transparent 6px 11px); position: relative; }
.tk-route i svg { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; fill: #D71920; background: #fff; border-radius: 50%; }
.tk-meta { display: flex; gap: 18px; padding: 6px 16px 14px; font: 700 13px/1.2 var(--sans); color: var(--ink); }
.tk-meta small { display: block; margin-bottom: 3px; font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tk-stub { width: 74px; padding: 12px 10px; box-sizing: border-box; background: #FBF4E8; border-left: 2px dashed rgba(19, 35, 58, .2); border-radius: 0 14px 14px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.tk-stub small { font: 700 9px/1.2 var(--sans); letter-spacing: .08em; text-align: center; color: #D71920; writing-mode: vertical-rl; rotate: 180deg; }
.tk-bar { width: 44px; height: 30px; background: repeating-linear-gradient(90deg, #13233A 0 2px, transparent 2px 4px, #13233A 4px 5px, transparent 5px 8px); }
.mag { font: 800 64px/1 var(--sans); color: var(--mc); letter-spacing: 0; cursor: grab;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--mc) 70%, #000), 0 2px 0 color-mix(in srgb, var(--mc) 70%, #000), 0 3px 0 color-mix(in srgb, var(--mc) 60%, #000), 0 4px 0 color-mix(in srgb, var(--mc) 60%, #000), 0 10px 12px rgba(40, 20, 0, .45); }
.mag.wig { animation: wig .5s var(--ease); }
@keyframes wig { 30% { scale: 1.15; } 60% { scale: .95; } }
.pick { width: 120px; text-align: center; }
.pick svg { width: 60px; height: auto; filter: drop-shadow(0 8px 8px rgba(40, 20, 0, .4)); }
.pick span { display: block; margin-top: 6px; font: 400 17px/1.1 var(--serif); font-size-adjust: .46; color: #FFF6E6; text-shadow: 0 1px 3px rgba(40, 20, 0, .5); }
.ll-mag { width: 118px; text-align: center; }
.ll-mag img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 6px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 20px -10px rgba(40, 20, 0, .6); pointer-events: none; }
.ll-mag span { display: block; margin-top: 6px; font: 400 18px/1 var(--serif); font-size-adjust: .46; color: #FFF6E6; text-shadow: 0 1px 3px rgba(40, 20, 0, .5); }
.item { position: absolute; cursor: grab; touch-action: none; user-select: none; transition: box-shadow .3s, transform .5s var(--spring); transform: rotate(var(--r, 0deg)); }
.item.drag { cursor: grabbing; transition: none; z-index: 20 !important; }
.polaroid { width: min(290px, 44%); padding: 12px 12px 54px; background: #fff; box-shadow: 0 26px 40px -22px rgba(60, 30, 0, .55); box-sizing: border-box; }
.polaroid img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; pointer-events: none; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 400 22px/1 var(--serif); font-size-adjust: .46; }
.note { width: 220px; padding: 20px 18px; box-sizing: border-box; font: 400 23px/1.18 var(--serif); font-size-adjust: .46; background: var(--sc); box-shadow: 0 20px 30px -18px rgba(60, 30, 0, .55); border-radius: 3px 3px 16px 3px; }
.note small { display: block; margin-top: 10px; font: 700 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-style: normal; }
.card-ig { width: 270px; padding: 18px; background: var(--card); border-radius: 22px; box-shadow: 0 20px 30px -18px rgba(60, 30, 0, .5); box-sizing: border-box; }
.card-ig h4 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.card-ig p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.card-ig a { font-size: 14px; font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(19, 35, 58, .07); margin: 0 4px 4px 0; }
.tools { width: 330px; padding: 18px; background: #13233A; color: var(--paper); border-radius: 22px; box-shadow: 0 20px 30px -18px rgba(0, 0, 0, .5); box-sizing: border-box; }
.tools h4 { margin: 0 0 12px; font: 400 22px/1 var(--serif); font-size-adjust: .46; }
.tools ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tools li { font-size: 13.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.instr { width: 150px; }
.instr svg { width: 100%; height: auto; overflow: visible; }
.instr svg * { fill: none; stroke: #13233A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lastlook-app { width: 150px; }
.lastlook-app img { width: 100%; height: auto; border-radius: 34px; box-shadow: 0 20px 30px -16px rgba(60, 30, 0, .5); pointer-events: none; }
.lastlook-app span { display: block; margin-top: 8px; text-align: center; font: 400 19px/1 var(--serif); font-size-adjust: .46; }
.vinyl { width: 250px; height: 200px; }
.vn-sleeve { position: absolute; left: 0; top: 0; z-index: 1; width: 170px; height: 170px; box-sizing: border-box; padding: 16px; border-radius: 6px; color: #fff; background: linear-gradient(145deg, #FA2D48, #FC5C7D 55%, #A93DF2); box-shadow: 0 20px 26px -16px rgba(60, 30, 0, .6); display: flex; flex-direction: column; justify-content: flex-end; }
.vn-sleeve svg { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vn-sleeve b { font: 800 20px/1 var(--sans); letter-spacing: -.02em; }
.vn-sleeve small { margin-top: 4px; font: 600 12px/1 var(--sans); opacity: .85; }
.vn-disc { position: absolute; left: 76px; top: 6px; width: 158px; height: 158px; border-radius: 50%; box-shadow: 0 16px 22px -12px rgba(0, 0, 0, .6);
  background: radial-gradient(circle, #FC5C7D 0 17%, #1A1A1D 17.5% 19%, transparent 19.5%), conic-gradient(from 30deg, rgba(255, 255, 255, .14), transparent 12%, rgba(255, 255, 255, .1) 30%, transparent 45%, rgba(255, 255, 255, .14) 62%, transparent 75%), repeating-radial-gradient(circle, #1A1A1D 0 2px, #26262B 2px 4px);
  animation: vnspin 3.2s linear infinite; }
.vn-disc i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--paper-2); }
.vinyl:hover .vn-disc { animation-duration: 1.2s; }
@keyframes vnspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vn-disc { animation: none; } }
.vinyl > span { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 400 18px/1 var(--serif); font-size-adjust: .46; color: #FFF6E6; text-shadow: 0 1px 3px rgba(40, 20, 0, .5); }
.pol-ph { width: 100%; aspect-ratio: 5 / 6; display: grid; place-items: center; align-content: center; gap: 8px; background: var(--phc, #EEE); }
.pol-ph svg { width: 42%; height: auto; fill: none; stroke: #13233A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pol-ph span { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(19, 35, 58, .55); }
.polaroid.pol-sm { padding: 9px 9px 40px; }
.polaroid.pol-sm figcaption { bottom: 10px; font-size: 17px; }
.desk .polaroid figcaption { display: grid; place-items: center; height: 46px; bottom: 4px; padding: 0 10px; font: 700 22px/.95 var(--hand); color: #2B3A4E; text-wrap: balance; }
.desk .polaroid.pol-sm { padding-bottom: 52px; }
@media (min-width: 861px) and (max-width: 1320px) { .desk .item { scale: .9; transform-origin: 0 0; } }
@media (min-width: 861px) and (max-width: 1180px) { .desk .item { scale: .78; } .desk { height: 840px; } }
.desk .polaroid.pol-sm figcaption { height: 46px; bottom: 3px; font-size: 19px; }
.vinyl { cursor: pointer; }
.vn-ask { position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 6px); width: 230px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: var(--shadow); transform: translate(-50%, 8px) scale(.94); opacity: 0; visibility: hidden; transition: opacity .25s, transform .35s var(--spring), visibility 0s .25s; text-align: left; }
.vinyl.ask .vn-ask { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .25s, transform .35s var(--spring); }
.vn-ask b { display: block; margin: 0 18px 10px 0; font: 700 15px/1.3 var(--sans); }
.vn-ask a { display: inline-flex; padding: 10px 14px; border-radius: 999px; background: linear-gradient(135deg, #FA2D48, #FC5C7D); color: #fff; font: 700 13.5px/1 var(--sans); text-decoration: none; }
.vn-x { position: absolute; right: 8px; top: 6px; width: 28px; height: 28px; font-size: 20px; line-height: 1; color: var(--ink-2); }
.desk-hint { position: absolute; right: 24px; bottom: 16px; margin: 0; font: 400 19px/1 var(--serif); font-size-adjust: .46; color: rgba(255, 244, 225, .85); text-shadow: 0 1px 3px rgba(40, 20, 0, .4); }

/* =========================================================
   7 · SAY HI (sky footer)
   ========================================================= */
.hello { position: relative; overflow: hidden; color: #fff; background: linear-gradient(180deg, #2C7FD6 0%, #62A9EC 55%, #BFE3FF 100%); padding-block: 18vh 0; }
.hello .skyimg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 75%; object-fit: cover; object-position: 50% 40%; opacity: .9; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hello .inner { position: relative; z-index: 2; text-align: center; }
.hello h2 { margin: 0 auto; font: 800 clamp(3rem, 8.4vw, 8.2rem)/.9 var(--sans); letter-spacing: -.06em; max-width: 12ch; text-wrap: balance; text-shadow: 0 6px 40px rgba(10, 40, 90, .3); }
.hello h2 .rq { color: #fff; }
.hello p { margin: 20px auto 0; font: 400 clamp(21px, 2vw, 28px)/1.3 var(--serif); font-size-adjust: .46; max-width: 32ch; text-shadow: 0 2px 16px rgba(10, 40, 90, .4); }
.mail { margin: 34px auto 0; display: inline-flex; align-items: center; gap: 6px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); max-width: 100%; box-sizing: border-box; }
.mail span { font-size: clamp(16px, 1.8vw, 22px); font-weight: 700; letter-spacing: -.02em; user-select: all; overflow-wrap: anywhere; }
.mail button { font-size: 14px; font-weight: 700; padding: 12px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); white-space: nowrap; }
/* keycaps */
.keys-mat { position: relative; margin: 44px auto 0; max-width: 980px; padding: 26px clamp(16px, 3vw, 40px) 30px; border-radius: 32px; color: var(--ink); text-align: center;
  background: linear-gradient(rgba(42, 127, 214, .08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(42, 127, 214, .08) 1px, transparent 1px) 0 0 / 28px 28px, #FFF8EC;
  box-shadow: 0 40px 70px -34px rgba(10, 40, 90, .6), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.keys-hint { margin: 0 0 8px !important; font: 600 13px/1.4 var(--sans) !important; color: var(--ink-2); text-shadow: none !important; max-width: none !important; }
.keys-hint kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px; background: #fff; box-shadow: 0 2px 0 rgba(19, 35, 58, .2), inset 0 0 0 1px rgba(19, 35, 58, .12); font: 700 11px/1 var(--sans); }
.keys { display: grid; grid-template-columns: repeat(5, 150px); justify-content: center; gap: 0 clamp(14px, 2.4vw, 30px); }
.keys.keys-three { grid-template-columns: repeat(3, 160px); gap: 0 clamp(20px, 3.5vw, 48px); }
.keys.keys-four { grid-template-columns: repeat(4, 150px); gap: 0 clamp(16px, 2.5vw, 36px); }
.kw { display: grid; grid-template-rows: 96px auto 96px; justify-items: center; min-width: 0; }
.kw .knote { width: 200px; }
.key { position: relative; display: block; width: 118px; height: 118px; padding: 10px; box-sizing: border-box; border-radius: 26px; background: linear-gradient(#2A2E36, #1B1E24); text-decoration: none;
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .08), inset 0 -3px 6px rgba(0, 0, 0, .5), 0 22px 30px -16px rgba(10, 20, 40, .7); outline: none; }
.key::after { content: ""; position: absolute; inset: -16px; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, color-mix(in srgb, var(--kc) 60%, transparent), transparent); opacity: 0; transition: opacity .35s; }
.key:hover::after, .key:focus-visible::after, .key.down::after { opacity: 1; }
.key .cap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 42%), var(--kbg, var(--kc));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .45), inset 0 -9px 0 rgba(0, 0, 0, .18), 0 7px 0 var(--kd), 0 12px 14px rgba(0, 0, 0, .35); transform: translateY(-7px); transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.key .cap svg { width: 46px; height: 46px; margin-top: -6px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15)); }
.key .cap i { position: absolute; left: 10px; top: 8px; font: 700 11px/1 var(--sans); font-style: normal; color: var(--kfg, #fff); opacity: .6; }
.key:hover .cap, .key:focus-visible .cap { transform: translateY(-9px); }
.key:active .cap, .key.down .cap { transform: translateY(0); box-shadow: inset 0 2px 1px rgba(255, 255, 255, .35), inset 0 -5px 0 rgba(0, 0, 0, .18), 0 0 0 var(--kd), 0 3px 6px rgba(0, 0, 0, .35); }
.knote { margin: 0 !important; max-width: none !important; display: flex; flex-direction: column; align-items: center; font: 400 18px/1.25 var(--serif) !important; font-size-adjust: .46; color: var(--ink) !important; text-shadow: none !important; }
.knote.up { justify-content: flex-end; padding-bottom: 6px; }
.knote.dn { padding-top: 10px; }
.knote svg { width: 34px; height: 24px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knote #mailText { font: 700 14px/1.4 var(--sans); font-style: normal; }
.mailrow { display: inline-flex; align-items: center; gap: 6px; }
.knote #copy { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(19, 35, 58, .07); color: var(--ink); transition: background .2s, transform .3s var(--spring); }
.knote #copy:hover { background: rgba(19, 35, 58, .14); transform: scale(1.08); }
.knote #copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.knote #copy .i-ok, .knote #copy.ok .i-copy { display: none; }
.knote #copy.ok .i-ok { display: block; }
.knote #copy.ok { background: #DDF3E4; color: #1E8A4C; }
.links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.links a { font-size: 14.5px; font-weight: 700; text-decoration: none; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .4s var(--spring); }
.links a:hover { background: rgba(255, 255, 255, .38); transform: translateY(-2px); }
.hello .clouds-foot { position: relative; height: min(34vh, 30vw); margin-top: 8vh; pointer-events: none; }
@media (min-width: 1400px) { .hello .clouds-foot { display: none; } .hello .foot { margin-top: 10vh; } }
.hello .clouds-foot img { position: absolute; bottom: -8vh; will-change: transform; }
.hello .me-cloud { position: absolute; left: 50%; bottom: 11vh; width: 84px; transform: translateX(-50%); z-index: 1; }
.hello .clouds-foot img.front { z-index: 2; }
.hello .me-cloud img { width: 100%; height: auto; animation: sway 4s ease-in-out infinite; transform-origin: 50% 100%; }
.foot { position: relative; z-index: 4; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px clamp(16px, 4vw, 48px) calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: #fff; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }


/* =========================================================
   9 · NOTES WALL
   ========================================================= */
.notes { position: relative; padding-block: 20vh 16vh; background: var(--paper); overflow-x: clip; }
.nw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nw-head .sec-head { margin-bottom: 0; }
.nw-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--sans); box-shadow: 0 16px 30px -14px rgba(19, 35, 58, .6); transition: transform .4s var(--spring), box-shadow .3s; }
.nw-cta:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 0 0 5px rgba(255, 210, 63, .45), 0 20px 34px -14px rgba(19, 35, 58, .6); }
.nw-pen { width: 34px; height: 34px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; }
.nw-pen svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nw-rows { display: grid; gap: 0; margin-top: 6vh; }
.nw-row { overflow: hidden; padding: 30px 0 56px; margin-bottom: -20px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.nw-track { display: flex; gap: 24px; width: max-content; animation: nwscroll var(--dur, 70s) linear infinite; }
.nw-row.rev .nw-track { animation-direction: reverse; }
.nw-row:hover .nw-track, .nw-row:focus-within .nw-track { animation-play-state: paused; }
@keyframes nwscroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.nw-card { position: relative; flex: none; width: 290px; min-height: 170px; box-sizing: border-box; padding: 22px 20px 18px; background: var(--nc); color: var(--ink); border-radius: 4px 4px 18px 4px; box-shadow: 0 18px 28px -18px rgba(60, 30, 0, .5), 0 1px 0 rgba(255, 255, 255, .6) inset;
  transform: rotate(var(--r)); transition: transform .5s var(--spring), box-shadow .4s; }
.nw-card:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 26px 36px -18px rgba(60, 30, 0, .55); }
.nw-card::before { content: ""; position: absolute; left: 50%; top: -11px; width: 70px; height: 22px; margin-left: -35px; background: rgba(255, 255, 255, .6); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.nw-card p { margin: 0; font: 400 21px/1.25 var(--serif); font-size-adjust: .46; overflow-wrap: anywhere; }
.nw-by { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.nw-by .av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 12px -6px rgba(19, 35, 58, .5); background: #fff; }
.nw-by .av img, .nw-by .av svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-by b { display: block; font: 700 14.5px/1.2 var(--sans); }
.nw-by small { display: block; font: 500 12px/1.3 var(--sans); color: rgba(19, 35, 58, .6); }
.nw-card .pin-me { position: absolute; right: 14px; top: 12px; font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(19, 35, 58, .5); }
.nw-card.fresh { animation: nwpop .9s var(--spring); }
@keyframes nwpop { from { transform: rotate(0) scale(.6) translateY(30px); opacity: 0; } }
.nw-ghost { background: transparent; border: 2px dashed rgba(19, 35, 58, .18); box-shadow: none; display: grid; place-items: center; text-align: center; cursor: pointer; color: var(--ink-2); }
.nw-ghost::before { display: none; }
.nw-ghost p { font-size: 20px; }
.nw-ghost span { display: block; margin-top: 8px; font: 700 13px/1 var(--sans); color: var(--ink); }
.nw-ghost:hover { border-color: var(--coral); background: rgba(255, 107, 74, .05); }
/* the form */
.nw-card[data-read] { cursor: pointer; }
.nw-card.clip::after { content: ""; position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313233A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.nw-card.clip > p { padding-right: 20px; }
.nw-read { position: fixed; z-index: 97; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(15, 25, 40, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.nw-read.open { opacity: 1; visibility: visible; }
.nw-rd { position: relative; width: min(100%, 440px); max-height: 80vh; overflow: auto; box-sizing: border-box; padding: 62px 24px 22px; border-radius: 6px 6px 22px 6px; background: var(--nc); color: #13233A; transform: rotate(var(--r, 0deg)) scale(.92); transition: transform .35s var(--spring, cubic-bezier(.2, .9, .3, 1.2)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.nw-read.open .nw-rd { transform: rotate(calc(var(--r, 0deg) * .4)) scale(1); }
.nw-rd::before { content: ""; position: absolute; left: 50%; top: -12px; width: 80px; height: 24px; margin-left: -40px; background: rgba(255, 255, 255, .6); transform: rotate(-3deg); }
.nw-rd p { margin: 0; font: 400 22px/1.35 var(--serif); font-size-adjust: .46; overflow-wrap: anywhere; }
.nw-rd .nw-by { margin-top: 20px; } .nw-rd .nw-by small { color: rgba(19, 35, 58, .65); }
.nw-rd-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); color: #13233A; font: 400 26px/1 var(--sans); cursor: pointer; }
.nw-modal { position: fixed; z-index: 96; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 25, 40, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.nw-modal.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.nw-sheet { position: relative; width: min(460px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; box-sizing: border-box; padding: 30px 28px 24px; border-radius: 22px; background: #FFFCF6; color: var(--ink); border: 1px solid rgba(19, 35, 58, .08); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  transform: translateY(24px) scale(.97); transition: transform .6s var(--spring); }
.nw-modal.open .nw-sheet { transform: none; }
.nw-x { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(19, 35, 58, .08); font: 400 22px/1 var(--sans); color: var(--ink); }
.nw-k { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(19, 35, 58, .6); }
.nw-sheet h3 { margin: 6px 0 16px; font: 800 30px/1 var(--sans); letter-spacing: -.04em; }
.nw-face { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.nw-av { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 4px #fff, 0 10px 18px -8px rgba(19, 35, 58, .5); }
.nw-av img, .nw-av svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-face-b { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-face-b button, .nw-up { display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 999px; background: #F1ECE2; font: 700 13px/1 var(--sans); color: var(--ink); cursor: pointer; }
.nw-face-b button:hover, .nw-up:hover { background: #E8E1D3; }
.nw-up input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.nw-up:focus-within { outline: 2px solid var(--ink); }
.nw-f { display: grid; gap: 6px; margin-top: 12px; }
.nw-f span { display: flex; justify-content: space-between; font: 700 13px/1 var(--sans); }
.nw-f em { font: 400 14px/1 var(--serif); font-size-adjust: .46; color: rgba(19, 35, 58, .6); }
.nw-f input, .nw-f textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: #F6F2EA; font: 500 16px/1.4 var(--sans); color: var(--ink); resize: none; box-shadow: inset 0 0 0 1.5px rgba(19, 35, 58, .06); }
.nw-f textarea { font: 500 16px/1.5 var(--sans); }
.nw-f input:focus, .nw-f textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink); background: #fff; }
.nw-err { min-height: 18px; margin: 10px 0 0; font: 600 13px/1.3 var(--sans); color: #B3261E; }
.nw-go { width: 100%; margin-top: 6px; padding: 15px; border-radius: 14px; background: var(--ink); color: var(--paper); font: 700 16px/1 var(--sans); transition: transform .3s var(--spring); }
.nw-go:hover { transform: translateY(-2px); }
.nw-go:disabled { opacity: .6; transform: none; }
.nw-sheet.done > :not(.nw-done):not(.nw-x) { display: none !important; }
.nw-done { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 8px 0 4px; }
.nw-done[hidden] { display: none; }
.nw-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; box-shadow: 0 12px 22px -10px rgba(19, 35, 58, .5); animation: nwpop .8s var(--spring); }
.nw-tick svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.nw-done h3 { margin: 6px 0 0; }
.nw-done p { margin: 0; max-width: 32ch; font: 500 16px/1.45 var(--sans); color: rgba(19, 35, 58, .75); }
.nw-follow, .nw-home { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 14px; font: 700 16px/1 var(--sans); cursor: pointer; text-decoration: none; transition: transform .3s var(--spring); }
.nw-follow { margin-top: 10px; background: var(--ink); color: var(--paper); }
.nw-home { background: #F1ECE2; color: var(--ink); }
.nw-follow:hover, .nw-home:hover { transform: translateY(-2px); }
:root[data-theme="dark"] .nw-done p { color: #CFCFCF; }
:root[data-theme="dark"] .nw-follow { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .nw-home { background: rgba(255, 255, 255, .1); color: #F5F5F5; }
.nw-fine { margin: 10px 0 0; font: 500 12.5px/1.4 var(--sans); color: rgba(19, 35, 58, .65); text-align: center; }


/* book a free call: a tiny brief first, then the Calendly slot picker */
.bk-sheet { width: min(520px, 100%); }
.bk-modal.cal .bk-sheet { width: min(760px, 100%); padding: 22px 16px 16px; }
.bk-lead { margin: -6px 0 6px; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.bk-lead b { color: var(--ink); }
.bk-svc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bk-svc button { padding: 10px 14px; border-radius: 999px; background: #F1ECE2; font: 700 14px/1 var(--sans); color: var(--ink); box-shadow: inset 0 0 0 1.5px transparent; transition: background .2s, box-shadow .2s, color .2s; }
.bk-svc button:hover { background: #E8E1D3; }
.bk-svc button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.bk-svc button[aria-pressed="true"]::before { content: "✓ "; }
.bk-step2 { display: none; }
.bk-modal.cal .bk-step1 { display: none; } .bk-modal.cal .bk-step2 { display: block; }
.bk-slot { position: relative; border-radius: 14px; background: #fff; }
.bk-slot::before { content: "Loading the calendar…"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 14px/1 var(--sans); color: #6B7280; }
.bk-cal { position: relative; display: block; width: 100%; height: min(680px, calc(100svh - 150px)); border: 0; border-radius: 14px; background: transparent; }
.bk-back { margin: 0 0 10px; padding: 8px 12px; border-radius: 999px; background: rgba(19, 35, 58, .08); font: 700 13px/1 var(--sans); }
.bk-out { display: block; margin-top: 10px; text-align: center; font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
:root[data-theme="dark"] .bk-svc button { background: rgba(255, 255, 255, .08); color: #F2F2F2; }
:root[data-theme="dark"] .bk-svc button[aria-pressed="true"] { background: #F2F2F2; color: #1A1A1A; }
:root[data-theme="dark"] .bk-back { background: rgba(255, 255, 255, .1); color: #F2F2F2; }
/* torn-paper edges: each new sheet overlaps the one above it */
.torn { z-index: 2; }
.torn::before { content: ""; position: absolute; z-index: 6; left: 0; right: 0; top: -40px; height: 60px; pointer-events: none; background: var(--edge) 0 0 / 1600px 60px repeat-x; }
.torn-bot { z-index: 3; }
.torn-bot::after { content: ""; position: absolute; z-index: 6; left: 0; right: 0; bottom: -40px; height: 60px; pointer-events: none; background: var(--edge2) 0 0 / 1600px 60px repeat-x; transform: scaleY(-1); }
.brand-sec { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF1D9'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.stack { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF8EC'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.ll { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23F7E7CC'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.process { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF8EC'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.life { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF1D9'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF1D9'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.notes { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF8EC'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF8EC'%20filter='url(%23s)'/%3E%3C/svg%3E"); }


/* =========================================================
   CASE STUDY · EazyDiner, the full story
   ========================================================= */
.cs.ed { --ed: #F4511E; --ed-2: #FFE3D6; background: var(--paper); color: var(--ink); }
.cs.ed .cs-bar { background: rgba(255, 248, 236, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.c3-ch { font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.c3-prog { position: sticky; top: 62px; z-index: 3; height: 3px; margin-bottom: -3px; background: rgba(19, 35, 58, .06); }
.c3-prog i { display: block; height: 100%; width: var(--p, 0%); background: var(--ed); border-radius: 0 3px 3px 0; }
.c3 { text-align: center; overflow-x: clip; }
.c3-w { max-width: 76rem; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); box-sizing: border-box; }
.c3-wide { max-width: 72rem; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); box-sizing: border-box; }
.c3-sec { padding: 18vh 0 0; }
.c3 .c3-k { margin: 0 0 18px; justify-content: center; }
.c3-h { margin: 0 auto 22px; font: 800 clamp(32px, 4.3vw, 66px)/1.04 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.c3 .c3-h[data-rv] { opacity: 1; transform: none; }
.c3-h .w { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.c3-h.in .w { opacity: 1; transform: none; }
@media (min-width: 1000px) { .c3-h { white-space: nowrap; } }
.c3-p { margin: 0 auto; max-width: 740px; font: 400 clamp(18px, 1.4vw, 20px)/1.7 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.c3-p + .c3-p { margin-top: 18px; }
.c3-p b { font-weight: 600; color: var(--ink); }
.c3 [data-rv] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.c3 [data-rv].in { opacity: 1; transform: none; }
.c3 img { display: block; }
.c3-ph { display: grid; place-items: center; min-height: 180px; padding: 20px; border: 2px dashed rgba(19, 35, 58, .2); border-radius: 18px; background: var(--paper-2); font: 600 15px/1.4 var(--sans); color: var(--ink-2); }
.c3-card { background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.c3-track { position: relative; }
.c3-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }

/* hero */
.c3-hero { padding: 13vh 0 0; }
.c3-hero .brand { height: clamp(56px, 6vw, 88px); width: auto; margin: 0 auto 18px; }
.c3-hero h2 { margin: 0; font: 800 clamp(48px, 7.4vw, 104px)/.95 var(--sans); letter-spacing: -.055em; }
.c3-hero h2 .it { font-weight: 400; letter-spacing: -.02em; }
.c3-hero .sub { margin: 20px auto 0; max-width: 740px; font: 400 clamp(19px, 1.7vw, 23px)/1.5 var(--sans); color: var(--ink-2); }
@keyframes c3bob { 50% { transform: translateY(6px); } }

/* comic strip */
.c3-comic { width: min(1100px, 94vw); display: grid; gap: 4vh; justify-items: center; }
.c3-panels { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 20px); width: 100%; align-items: center; }
.c3-panels figure { margin: 0; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 16px; background: #fff; overflow: hidden; position: relative;
  opacity: .28; filter: grayscale(1); transform: scale(.94) rotate(var(--r)); transition: opacity .6s var(--ease), filter .6s var(--ease), transform .8s var(--spring), box-shadow .6s; }
.c3-panels figure img { width: 100%; height: 100%; object-fit: cover; }
.c3-panels figure.seen { opacity: .8; filter: none; }
.c3-panels figure.on { opacity: 1; filter: none; transform: scale(1.04) rotate(0deg); box-shadow: 0 30px 50px -26px rgba(19, 35, 58, .5); z-index: 1; }
.c3-panels figure span { position: absolute; left: 10px; top: 8px; font: 800 13px/1 var(--sans); color: var(--ink); background: var(--sun); padding: 5px 8px; border-radius: 8px; }
.c3-cap { min-height: 3.2em; max-width: 740px; margin: 0; font: 700 clamp(22px, 2.2vw, 30px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.c3-cap small { display: block; margin-top: 6px; font: 400 17px/1.5 var(--sans); color: var(--ink-2); }

/* receipt */
.c3-receipt { position: relative; width: min(400px, 100%); margin: 9vh auto 0; padding: 30px 28px 40px; box-sizing: border-box; background: #fff; text-align: left;
  box-shadow: 0 26px 50px -30px rgba(19, 35, 58, .5); transform: rotate(-1.2deg);
  -webkit-mask: radial-gradient(9px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 100% repeat-x; mask: radial-gradient(9px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 100% repeat-x; }
.c3-receipt h4 { margin: 0; text-align: center; font: 800 18px/1.2 var(--sans); letter-spacing: .02em; }
.c3-receipt .sm { margin: 4px 0 0; text-align: center; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
.c3-receipt hr { border: 0; border-top: 2px dashed rgba(19, 35, 58, .2); margin: 16px 0; }
.c3-receipt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font: 400 14.5px/1.4 var(--sans); }
.c3-receipt dt { color: var(--ink-2); }
.c3-receipt dd { margin: 0; text-align: right; font-weight: 600; }
.c3-receipt dd em { font-style: normal; color: #1E8E4E; }
.c3-receipt .thx { margin: 18px 0 0; text-align: center; font: 600 13px/1 var(--sans); letter-spacing: .04em; color: var(--ink-2); }

/* funnel: 100 diners */
.c3-fun { display: grid; grid-template-columns: auto minmax(0, 470px); gap: clamp(28px, 6vw, 90px); align-items: center; width: min(1040px, 92vw); }
.c3-steps { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.c3-steps span { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--sans); color: #9AA3B2; transition: color .4s; }
.c3-steps span + span::before { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .5; border-radius: 1px; }
.c3-steps span.on { color: var(--ink); }
.c3-steps span.cur { font-weight: 700; }
.c3-phone { position: relative; width: 236px; height: 470px; border: 8px solid var(--ink); border-radius: 38px; background: #fff; overflow: hidden; box-shadow: var(--shadow); text-align: left; }
.c3-phone::before { content: ""; position: absolute; z-index: 3; left: 50%; top: 8px; width: 70px; height: 18px; border-radius: 10px; background: var(--ink); transform: translateX(-50%); }
.c3-scr { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); font: 400 12px/1.35 var(--sans); }
.c3-scr.on { opacity: 1; transform: none; }
.c3-scr header { padding: 38px 16px 16px; background: var(--ed); color: #fff; }
.c3-scr header b { display: block; font: 700 14px/1.2 var(--sans); }
.c3-scr header small { opacity: .85; }
.c3-scr .amt { margin: 22px 0 6px; text-align: center; font: 800 34px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.c3-scr .lbl { text-align: center; color: var(--ink-2); }
.c3-keys { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; background: #F1F2F5; }
.c3-keys i { font: 600 15px/34px var(--sans); font-style: normal; text-align: center; background: #fff; border-radius: 8px; }
.c3-rows { padding: 14px 16px; display: grid; gap: 10px; }
.c3-rows div { display: flex; justify-content: space-between; gap: 8px; }
.c3-rows .cp { padding: 10px; border: 1.5px dashed rgba(19, 35, 58, .3); border-radius: 10px; font-weight: 600; }
.c3-rows .cp em { font-style: normal; color: var(--ed); }
.c3-rows .tot { padding-top: 10px; border-top: 1px solid rgba(19, 35, 58, .12); font-weight: 700; font-size: 14px; }
.c3-btn { margin: auto 14px 16px; padding: 12px; border-radius: 10px; background: var(--ed); color: #fff; font: 700 13px/1 var(--sans); text-align: center; }
.c3-modes { padding: 12px 14px; display: grid; gap: 8px; }
.c3-modes div { padding: 9px 10px; border: 1px solid rgba(19, 35, 58, .12); border-radius: 10px; }
.c3-modes b { display: block; font-size: 12.5px; }
.c3-modes s { display: inline-block; margin: 5px 4px 0 0; padding: 2px 6px; border-radius: 5px; background: #FFF1E8; color: var(--ed); font: 600 10px/1.3 var(--sans); text-decoration: none; }
.c3-modes s:nth-child(3n) { background: #EAF3FF; color: #2A6BC1; }
.c3-modes s:nth-child(4n) { background: #EEF8EE; color: #2E7D32; }
.c3-scr.ok { align-items: center; justify-content: center; gap: 12px; text-align: center; }
.c3-scr.ok svg { width: 78px; height: 78px; }
.c3-scr.ok b { font: 700 17px/1.2 var(--sans); }
.c3-crowdw { display: grid; gap: 16px; justify-items: center; }
.c3-crowd { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(3px, .6vh, 7px) clamp(5px, .8vw, 10px); width: min(100%, 40vh); }
.c3-crowd i { position: relative; aspect-ratio: 5 / 7; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s; transition-delay: calc(var(--d) * 12ms); }
.c3-crowd i::before { content: ""; position: absolute; left: 25%; top: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--s); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08); }
.c3-crowd i::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 52%; border-radius: 50% 50% 18% 18% / 70% 70% 18% 18%; background: var(--c); }
.c3-crowd i.gone { opacity: .16; filter: grayscale(1); transform: translateY(10px) scale(.86); }
.c3-count { font: 400 18px/1.4 var(--sans); color: var(--ink-2); }
.c3-count b { display: block; font: 800 clamp(44px, 5vw, 68px)/1 var(--sans); letter-spacing: -.05em; color: var(--ink); }
.c3-fnote { min-height: 2.6em; max-width: 26ch; margin: 0; font: 700 19px/1.3 var(--sans); color: var(--ed); }

/* chat of real users */
.c3-chat { width: min(620px, 92vw); height: min(74vh, 640px); display: flex; flex-direction: column; border-radius: 26px; background: #fff; box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.c3-chat > header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(19, 35, 58, .08); font: 600 15px/1.2 var(--sans); }
.c3-chat > header small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-2); }
.c3-chat > header i { width: 10px; height: 10px; border-radius: 50%; background: #3DBE6B; }
.c3-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 20px; overflow: hidden; }
.c3-msg { display: none; grid-template-columns: 40px 1fr; gap: 12px; align-items: end; }
.c3-msg.on { display: grid; animation: c3pop .6s var(--spring) both; }
@keyframes c3pop { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.c3-av { width: 40px; height: 40px; border-radius: 50%; background: var(--paper-2) url("v2/cs/ed-users1.webp") 0 0 / 400% 100% no-repeat; }
.c3-msg p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #F3F1EC; font: 400 16.5px/1.5 var(--sans); color: var(--ink); max-width: 30rem; }
.c3-msg p small { display: block; margin-bottom: 3px; font: 600 12px/1 var(--sans); color: var(--ink-2); }
.c3-typing { display: flex; gap: 4px; padding: 0 20px 18px 72px; }
.c3-typing i { width: 7px; height: 7px; border-radius: 50%; background: #C9CDD4; animation: c3dot 1.2s infinite; }
.c3-typing i:nth-child(2) { animation-delay: .15s; } .c3-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes c3dot { 30% { transform: translateY(-4px); background: var(--ink-2); } }

/* whiteboard: 40+ notes become 5 */
.c3-board { position: relative; width: min(1000px, 92vw); height: min(58vh, 520px); border-radius: 18px; background: #FDFDFB; border: 10px solid #D9DCE1; box-shadow: var(--shadow), inset 0 0 60px rgba(19, 35, 58, .05); }
.c3-board .sn { position: absolute; width: 58px; height: 52px; border-radius: 3px; background: var(--c); box-shadow: 0 6px 10px -6px rgba(19, 35, 58, .5); transform: rotate(var(--r)); transition: opacity .5s, transform .7s var(--ease);
  background-image: repeating-linear-gradient(transparent 0 12px, rgba(19, 35, 58, .22) 12px 14px); background-size: 70% 70%; background-position: 50% 60%; background-repeat: no-repeat; }
.c3-five { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.6vw, 22px); padding: 0 16px; }
.c3-five div { flex: 0 1 170px; aspect-ratio: 1; display: grid; place-items: center; padding: 12px; box-sizing: border-box; background: var(--c); box-shadow: 0 16px 22px -14px rgba(19, 35, 58, .55);
  font: 700 clamp(17px, 1.8vw, 24px)/1.1 var(--hand); color: var(--ink); opacity: 0; transform: scale(.6) rotate(var(--r)); transition: opacity .5s, transform .7s var(--spring), outline-color .3s; outline: 3px solid transparent; outline-offset: 4px; }
.c3-five div em { position: absolute; top: 8px; left: 10px; font: 700 15px/1 var(--hand); font-style: normal; color: rgba(19, 35, 58, .5); }
.c3-five div { position: relative; }
.c3-five div.in { opacity: 1; transform: scale(1) rotate(var(--r)); }
.c3-five div.on { transform: scale(1.1) rotate(0deg); outline-color: var(--ink); z-index: 1; }
.c3-bcap { margin-top: 4vh; min-height: 5.5em; max-width: 740px; }
.c3-bcap b { display: block; font: 700 22px/1.2 var(--sans); margin-bottom: 6px; }
.c3-bcap p { margin: 0; font: 400 18px/1.6 var(--sans); color: var(--ink-2); }
.c3-bnum { position: absolute; right: 18px; top: 12px; font: 700 22px/1 var(--hand); color: var(--ink-2); }

/* goal */
.c3-goal { margin: 0 auto; max-width: 740px; font: 400 clamp(30px, 3.6vw, 48px)/1.2 var(--serif); font-size-adjust: .46; letter-spacing: -.01em; color: var(--ink); }
.c3-eq { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: clamp(6px, 1.4vw, 18px); margin-top: 7vh; }
.c3-eq .t { display: grid; justify-items: center; gap: 8px; font: 600 15px/1.2 var(--sans); text-align: center; }
.c3-eq .t svg { width: 64px; height: 64px; }
.c3-eq > i { font: 400 34px/1 var(--serif); font-size-adjust: .46; font-style: normal; color: var(--ink-2); }
.c3-ticket { flex: none; padding: 16px 24px; background: var(--sun); border-radius: 12px; font: 800 18px/1.15 var(--sans); position: relative; transform: rotate(-3deg); white-space: nowrap;
  -webkit-mask: radial-gradient(10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.c3-ticket small { display: block; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; }

/* competition */
.c3-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 5vh; }
.c3-logos img { width: 54px; height: 54px; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); padding: 4px; box-sizing: border-box; transition: transform .4s var(--spring); }
.c3-logos img:hover { transform: translateY(-6px) rotate(-4deg); }
.c3-strip { display: flex; gap: 18px; width: max-content; margin-top: 7vh; padding: 0 5vw; will-change: transform; }
.c3-strip img { height: clamp(260px, 42vh, 400px); width: auto; border-radius: 20px; box-shadow: var(--shadow-sm); background: #fff; }

/* evolution slider */
.c3-evo .c3-pin { place-items: stretch; }
.c3-evo-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; height: 100%; padding: 9vh 0 6vh; box-sizing: border-box; }
.c3-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 2vh 16px 0; }
.c3-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; font: 600 14.5px/1 var(--sans); color: var(--ink-2); background: #fff; box-shadow: var(--shadow-sm); transition: background .3s, color .3s, transform .3s var(--spring); }
.c3-tabs button i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--paper-2); font: 800 12.5px/1 var(--sans); font-style: normal; color: var(--ink); }
.c3-tabs button:hover { transform: translateY(-2px); }
.c3-tabs button.on { background: var(--ink); color: #fff; } .c3-tabs button.on i { background: var(--sun); }
.c3-row { display: flex; align-items: center; }
.c3-slide { flex: none; width: var(--cw, 100vw); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 max(5vw, calc((var(--cw, 100vw) - 1180px) / 2)); box-sizing: border-box; text-align: left; }
.c3-slide .c3-card { position: relative; padding: clamp(10px, 1.6vw, 22px); box-sizing: border-box; }
.c3-slide .c3-card img { max-width: 100%; max-height: 52vh; width: auto; height: auto; margin: 0 auto; }
.c3-stxt small { display: block; font: 700 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ed); }
.c3-stxt h4 { margin: 10px 0 16px; font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.c3-stxt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.c3-stxt li { position: relative; padding-left: 22px; font: 400 16.5px/1.55 var(--sans); color: var(--ink-2); }
.c3-stxt li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ed); }
.c3-stxt li b { font-weight: 600; color: var(--ink); }
.c3-stxt .chal { margin: 16px 0 0; padding: 10px 14px; border-left: 3px solid #C2410C; background: rgba(194, 65, 12, .07); font: 600 15px/1.45 var(--sans); color: #9A3412; border-radius: 0 10px 10px 0; }

/* axis bank try-it */
.c3-try { display: grid; justify-items: center; gap: 14px; width: min(380px, 100%); margin: 6vh auto 0; }
.c3-cc { position: relative; width: 100%; aspect-ratio: 1.586; border-radius: 18px; padding: 20px 22px; box-sizing: border-box; text-align: left; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #B8336A 0%, transparent 60%), linear-gradient(135deg, #97144D, #5B0D2F); box-shadow: 0 26px 40px -24px rgba(91, 13, 47, .8); }
.c3-cc b { font: 800 18px/1 var(--sans); letter-spacing: .02em; }
.c3-cc .chip { position: absolute; left: 22px; top: 36%; width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #F5D78E, #C9A24B); }
.c3-cc .num { position: absolute; left: 22px; right: 22px; bottom: 44px; display: flex; gap: 12px; font: 600 clamp(17px, 2vw, 21px)/1 var(--sans); letter-spacing: .12em; }
.c3-cc .num span { opacity: .55; } .c3-cc .num span.f { opacity: 1; }
.c3-cc small { position: absolute; left: 22px; bottom: 18px; font: 500 11px/1 var(--sans); opacity: .8; letter-spacing: .1em; text-transform: uppercase; }
.c3-try input { width: 100%; padding: 15px 18px; border-radius: 14px; border: 2px solid rgba(19, 35, 58, .16); background: #fff; font: 600 20px/1 var(--sans); letter-spacing: .3em; text-align: center; color: var(--ink); box-sizing: border-box; }
.c3-try input:focus { outline: none; border-color: var(--ink); }
.c3-offers { width: 100%; display: grid; gap: 8px; text-align: left; }
.c3-offers div { padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); font: 400 14px/1.4 var(--sans); color: var(--ink-2); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--spring); }
.c3-offers div b { display: block; color: #1E8E4E; font: 700 15px/1.3 var(--sans); }
.c3-offers.on div { opacity: 1; transform: none; }
.c3-offers.on div:nth-child(2) { transition-delay: .1s; }
.c3-hint { min-height: 1.4em; font: 400 15px/1.4 var(--sans); color: var(--ink-2); }

/* the twist */
.c3-twist { display: inline-block; margin: 3vh 0 6vh; font: 800 clamp(22px, 2.2vw, 30px)/1 var(--sans); letter-spacing: -.02em; color: var(--ed); transform: rotate(-2deg); }
.c3-twist svg { display: block; width: 100%; height: 14px; margin-top: 2px; fill: none; stroke: var(--ed); stroke-width: 3; stroke-linecap: round; }
.c3-checks { display: flex; justify-content: center; gap: clamp(16px, 4vw, 56px); margin: 6vh auto 0; padding: 0; list-style: none; }
.c3-checks li { display: flex; align-items: center; gap: 10px; font: 600 17px/1.35 var(--sans); }
.c3-checks li::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--grass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.c3-booster { margin-top: 8vh; padding: clamp(10px, 2vw, 24px); }
.c3-booster img { width: 100%; height: auto; }

/* handoff + kpis */
.c3-hand { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 6vh; }
.c3-hand::before { content: ""; position: absolute; left: 12%; right: 12%; top: 21px; border-top: 2.5px dashed rgba(19, 35, 58, .25); }
.c3-hand div { position: relative; }
.c3-hand i { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; background: var(--sun); border: 2.5px solid var(--ink); font: 800 17px/1 var(--sans); font-style: normal; }
.c3-hand b { display: block; font: 700 17px/1.3 var(--sans); }
.c3-hand p { margin: 6px auto 0; max-width: 20ch; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.c3-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 4vh; }
.c3-kpi div { padding: 22px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transform: rotate(var(--r)); transition: transform .4s var(--spring); }
.c3-kpi div:hover { transform: rotate(0) translateY(-6px); }
.c3-kpi svg { width: 30px; height: 30px; fill: none; stroke: var(--ed); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c3-kpi b { display: block; margin: 10px 0 6px; font: 700 16px/1.3 var(--sans); }
.c3-kpi p { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }

/* three paths */
.c3-flow { margin-top: 6vh; padding: clamp(10px, 2vw, 24px); }
.c3-flow img { width: 100%; height: auto; }
.c3-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.c3-legend span::before { content: ""; display: inline-block; width: 18px; height: 4px; margin-right: 8px; vertical-align: middle; border-radius: 2px; background: var(--c); }
.c3-ptabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 9vh; }
.c3-ptabs button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); font: 600 15px/1 var(--sans); transition: background .3s, color .3s, transform .3s var(--spring); }
.c3-ptabs button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.c3-ptabs button.on { background: var(--ink); color: #fff; transform: translateY(-2px); }
.c3-pview { margin-top: 4vh; }
.c3-pview h4 { margin: 0 auto 8px; max-width: 26ch; font: 700 clamp(22px, 2.2vw, 28px)/1.2 var(--sans); letter-spacing: -.02em; }
.c3-pview > p { margin: 0 auto; max-width: 740px; font: 400 17px/1.5 var(--sans); color: var(--ink-2); }
.c3-phones { display: flex; justify-content: center; gap: clamp(10px, 1.4vw, 20px); margin-top: 4vh; padding: 0 16px; }
.c3-phones img { flex: 0 1 200px; min-width: 0; width: 200px; height: auto; border-radius: 20px; box-shadow: var(--shadow-sm); background: #fff; outline: 3px solid color-mix(in srgb, var(--c) 35%, transparent); outline-offset: 3px; animation: c3pop .6s var(--spring) both; }
.c3-phones img:nth-child(2) { animation-delay: .06s; } .c3-phones img:nth-child(3) { animation-delay: .12s; } .c3-phones img:nth-child(4) { animation-delay: .18s; }

/* results */
.c3-res { display: grid; gap: 34px; max-width: 40rem; margin: 7vh auto 0; text-align: left; }
.c3-res > div { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 20px; }
.c3-res .lab { font: 600 18px/1.3 var(--sans); }
.c3-res .big { font: 800 clamp(34px, 3.6vw, 46px)/1 var(--sans); letter-spacing: -.04em; color: var(--ed); text-align: right; grid-row: span 2; }
.c3-bars { display: grid; gap: 6px; }
.c3-bars span { white-space: nowrap; display: flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.c3-bars span i { height: 12px; width: 0; border-radius: 6px; background: #D5D9E0; transition: width 1.6s var(--ease); }
.c3-bars span + span i { background: var(--ed); transition-delay: .3s; }
.c3-res.in .c3-bars span i { width: calc(var(--w) * 3.4px); }

@media (max-width: 860px) {
  .c3-panels { grid-template-columns: 1fr 1fr; width: min(440px, 100%); }
  .c3-cap { font-size: 24px; }
  .c3-fun { grid-template-columns: 1fr; gap: 16px; justify-items: center; width: 92vw; }
  .c3-steps { display: none; }
  .c3-phone { width: 150px; height: 290px; border-width: 6px; border-radius: 28px; font-size: 9px; }
  .c3-phone::before { width: 46px; height: 12px; top: 6px; }
  .c3-scr { font-size: 9px; }
  .c3-scr header { padding: 24px 10px 10px; } .c3-scr header b { font-size: 11px; }
  .c3-scr .amt { font-size: 24px; margin-top: 12px; }
  .c3-keys { gap: 4px; padding: 8px; } .c3-keys i { font-size: 11px; line-height: 22px; }
  .c3-rows, .c3-modes { padding: 8px 10px; gap: 6px; } .c3-modes div { padding: 6px 8px; } .c3-modes b { font-size: 10px; } .c3-modes s { font-size: 8px; margin-top: 3px; }
  .c3-btn { margin: auto 10px 10px; padding: 8px; font-size: 10px; }
  .c3-scr.ok svg { width: 52px; height: 52px; } .c3-scr.ok b { font-size: 13px; }
  .c3-crowd { gap: 3px 6px; width: min(300px, 100%, 30vh); }
  .c3-count b { font-size: 48px; } .c3-count { font-size: 15px; }
  .c3-fnote { font-size: 20px; min-height: 2.4em; }
  .c3-crowdw { gap: 10px; }
  .c3-board { height: 50vh; }
  .c3-five { flex-wrap: wrap; align-content: center; }
  .c3-five div { flex-basis: 28%; font-size: 15px; padding: 8px; }
  .c3-board .sn { width: 40px; height: 36px; }
  .c3-bcap p { font-size: 16px; }
  .c3-hand, .c3-kpi { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .c3-hand::before { display: none; }
  .c3-phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 18px 12px; }
  .c3-phones img { flex: none; width: min(58vw, 240px); scroll-snap-align: center; }
  .c3-slide { grid-template-columns: 1fr; gap: 14px; align-content: center; padding: 0 18px; }
  .c3-slide .c3-card img { max-height: 28vh; }
  .c3-stxt { max-width: 34rem; margin: 0 auto; }
  .c3-stxt h4 { margin: 6px 0 8px; font-size: 22px; }
  .c3-stxt ul { gap: 4px; } .c3-stxt li { font-size: 14px; } .c3-stxt .chal { margin-top: 8px; font-size: 13.5px; padding: 8px 10px; }
  .c3-res.in .c3-bars span i { width: calc(var(--w) * 1.5px); }
  .c3-tabs { flex-wrap: nowrap; gap: 6px; } .c3-tabs button { padding: 6px; font-size: 0; gap: 0; } .c3-tabs button i { width: 34px; height: 34px; font-size: 14px; }
  .c3-doodles { display: none; }
  .c3-ptabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 6px 16px 10px; margin-inline: -16px; } .c3-ptabs button { flex: none; }
}

/* landing-style bits */
.c3-scrollhint { margin: 5vh 0 0; font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.c3-scrollhint svg { display: block; width: 26px; height: 40px; margin: 10px auto 0; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; animation: c3bob 2s var(--ease) infinite; }
.c3-big { margin: 16vh auto 0; max-width: 24ch; font: 800 clamp(30px, 4vw, 60px)/1.12 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.c3-big span { color: rgba(19, 35, 58, .13); transition: color .35s; }
.c3-big span.lit { color: var(--ink); }
.c3-big.q { margin-top: 12vh; max-width: 22ch; }
.c3-big.q span.lit { color: var(--ink); }
.c3-ph { font: 600 14px/1.4 var(--sans) !important; }

/* the competition sketch */
.c3-sketch { position: relative; width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 3vh;
  background: radial-gradient(rgba(19, 35, 58, .1) 1px, transparent 1.3px) 0 0 / 24px 24px; }
.c3-mx { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: min(940px, 92vw); aspect-ratio: 3 / 2; max-height: 76vh; }
.mx-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mx-lines path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; opacity: .7; }
.c3-mx .ax { position: absolute; z-index: 1; font: 700 19px/1 var(--hand); color: var(--ink-2); white-space: nowrap; }
.c3-mx .ax.x { right: 10px; top: calc(50% + 12px); }
.c3-mx .ax.y { left: calc(50% + 12px); top: 2px; }
.c3-mx .q { position: relative; z-index: 1; display: grid; align-content: center; justify-items: center; padding: 18px; text-align: center; }
.c3-mx .slot { display: block; width: 64px; height: 64px; margin-bottom: 10px; }
.c3-mx small { display: block; font: 700 21px/1 var(--hand); color: var(--ink-2); }
.c3-mx b { display: block; margin: 8px 0 6px; font: 800 clamp(20px, 2vw, 26px)/1.15 var(--sans); letter-spacing: -.02em; }
.c3-mx p { margin: 0 auto; max-width: 26ch; font: 400 clamp(15px, 1.25vw, 18px)/1.5 var(--sans); color: var(--ink-2); }
.c3-mx .win b { display: inline-block; padding: 0 10px; border: 2.5px solid var(--ed); border-radius: 50% 46% 52% 48% / 60% 55% 45% 40%; transform: rotate(-2deg); }
.bdg { position: absolute; z-index: 3; left: 0; top: 0; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: var(--bg); color: #fff; opacity: 0;
  box-shadow: 0 14px 24px -12px rgba(19, 35, 58, .55), inset 0 0 0 1px rgba(19, 35, 58, .08); pointer-events: none; }
.bdg b { font: 800 11px/1.05 var(--sans); letter-spacing: -.01em; text-transform: lowercase; text-align: center; }
.bdg b em { font-style: normal; padding: 0 2px; margin: 0 1px; border-radius: 3px; background: #fff; color: #F84464; }
.bdg img { width: 52px; height: auto; }
.bdg:nth-of-type(n) b:only-child { font-size: 12px; }
.c3-mxcap { min-height: 1.4em; margin: 0; font: 600 16px/1.4 var(--sans); color: var(--ink-2); }

/* the iterations studio: ruler, pencil, measurements */
.c3-doodles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c3-doodles * { fill: none; stroke: #13233A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .2; }
.c3-doodles .x { stroke: #F4511E; opacity: .3; }
.c3-doodles .ok { stroke: #2E9E6B; opacity: .45; stroke-width: 3; }
.c3-doodles text { fill: #13233A; stroke: none; font: 700 22px var(--hand); opacity: .32; }
.c3-evo-in { position: relative; z-index: 1; }
.c3-card .cm { position: absolute; inset: -14px; pointer-events: none; opacity: .55;
  background: linear-gradient(#13233A, #13233A) 0 0 / 18px 2px, linear-gradient(#13233A, #13233A) 0 0 / 2px 18px, linear-gradient(#13233A, #13233A) 100% 0 / 18px 2px, linear-gradient(#13233A, #13233A) 100% 0 / 2px 18px,
    linear-gradient(#13233A, #13233A) 0 100% / 18px 2px, linear-gradient(#13233A, #13233A) 0 100% / 2px 18px, linear-gradient(#13233A, #13233A) 100% 100% / 18px 2px, linear-gradient(#13233A, #13233A) 100% 100% / 2px 18px; background-repeat: no-repeat; }
.c3 img[data-z] { cursor: zoom-in; }
.c3-trylbl { margin: 0; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ed); }

/* before / after demo */
.c3-demo { display: grid; justify-items: center; gap: 18px; margin-top: 5vh; }
.c3-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: var(--shadow-sm); }
.c3-seg button { padding: 10px 22px; border-radius: 999px; font: 700 14px/1 var(--sans); color: var(--ink-2); transition: background .3s, color .3s; }
.c3-seg button.on { background: var(--ink); color: #fff; }
.c3-dphone { position: relative; width: 370px; box-sizing: border-box; border: 9px solid var(--ink); border-radius: 42px; background: #F4F4F6; overflow: hidden; text-align: left; font: 400 15px/1.4 var(--sans); color: var(--ink); box-shadow: var(--shadow); }
.c3-dphone > header { display: grid; justify-items: center; gap: 4px; padding: 40px 20px 24px; background: var(--ed); color: #fff; }
.c3-dphone > header small { opacity: .85; font-size: 13.5px; }
.c3-dphone > header b { font: 800 36px/1.1 var(--sans); letter-spacing: -.02em; }
.c3-dphone > header s { display: none; margin-right: 8px; font-size: 17px; font-weight: 600; opacity: .7; }
.c3-dphone.applied > header s { display: inline; }
.c3-dphone .lab { margin: 22px 20px 10px; font: 700 11.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8A93A3; }
.c3-dphone .bf, .c3-dphone .af { display: none; }
.c3-dphone[data-mode="before"] .bf, .c3-dphone[data-mode="after"] .af { display: block; }
.c3-dphone .row { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 40px); margin: 0 20px; padding: 16px 18px; box-sizing: border-box; border-radius: 12px; background: #fff; text-align: left; }
.c3-dphone .row b { display: block; font-size: 15.5px; } .c3-dphone .row small { color: #8A93A3; } .c3-dphone .row em { font-style: normal; font-size: 22px; color: #8A93A3; }
.c3-dphone .toast { margin: 10px 20px 0; padding: 0 12px; max-height: 0; overflow: hidden; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; opacity: 0; }
.c3-dphone .toast.on { animation: c3toast 3s var(--ease) both; }
@keyframes c3toast { 0% { max-height: 0; padding: 0 12px; opacity: 0; } 10%, 85% { max-height: 80px; padding: 10px 12px; opacity: 1; } 100% { max-height: 0; padding: 0 12px; opacity: 0; } }
.c3-dphone .best { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 20px; padding: 18px 16px; animation: c3glow 2.4s ease-in-out infinite; border-radius: 12px; background: #fff; border: 1.5px dashed #3DBE6B; }
.c3-dphone .bk { padding: 8px 7px; border-radius: 8px; background: #97144D; color: #fff; font: 800 11px/1 var(--sans); }
@keyframes c3glow { 50% { box-shadow: 0 0 0 6px rgba(61, 190, 107, .16); } }
.c3-dphone.applied .best { animation: none; }
.c3-dphone .best b { display: block; color: #1E8E4E; font-size: 17px; white-space: nowrap; } .c3-dphone .best small { display: block; margin-top: 3px; color: #8A93A3; font-size: 12.5px; }
.c3-dphone .best button { padding: 12px 18px; border-radius: 11px; background: var(--ed); color: #fff; font: 700 14.5px/1 var(--sans); transition: background .3s, color .3s; }
.c3-dphone.applied .best button { background: #fff; color: var(--ed); box-shadow: inset 0 0 0 1.5px var(--ed); }
.c3-dphone .all { margin: 14px 20px 0; text-align: center; font: 600 12px/1 var(--sans); color: var(--ed); }
.c3-dphone .sum { margin: 0 20px; padding: 6px 16px 14px; border-radius: 12px; background: #fff; }
.c3-dphone .sum .lab { margin: 14px 0 10px; }
.c3-dphone .sum div { display: flex; justify-content: space-between; padding: 6px 0; }
.c3-dphone .sum .disc { display: none; color: #1E8E4E; } .c3-dphone.applied .sum .disc { display: flex; }
.c3-dphone .sum .tot { margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(19, 35, 58, .1); font-weight: 800; }
.c3-dphone .yay { margin: 0 20px; max-height: 0; overflow: hidden; opacity: 0; border-radius: 10px; background: #E8F7EE; color: #1E8E4E; font: 700 13px/1.3 var(--sans); text-align: center; transition: max-height .4s var(--ease), opacity .4s, margin .4s, padding .4s; }
.c3-dphone.applied .yay { max-height: 70px; opacity: 1; margin-top: 16px; padding: 12px; font-size: 14.5px; }
.c3-dphone .cta { margin: 20px 20px 24px; padding: 16px; border-radius: 14px; background: var(--ed); color: #fff; font: 700 15px/1 var(--sans); text-align: center; }
.c3-dphone .conf { position: absolute; left: 50%; top: 52%; pointer-events: none; }
.c3-dphone .conf i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; }
.c3-dphone .conf.go i { animation: c3conf 1.1s var(--d) var(--ease) both; }
@keyframes c3conf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(420deg); } }
.c3-dcap { min-height: 2.8em; max-width: 740px; margin: 0; font: 600 16px/1.4 var(--sans); color: var(--ink-2); }
.c3-zoomhint { margin: 12px 0 0; font: 600 13px/1 var(--sans); color: var(--ink-2); }

/* the paths diagram */
.c3-flowd { margin-top: 4vh; padding: clamp(10px, 2vw, 24px); }
#c3Flow { display: block; width: 100%; height: auto; }
#c3Flow .fe { fill: none; stroke: #D7DBE2; stroke-width: 3; transition: stroke .4s; }
#c3Flow .fe.on { stroke: var(--c); stroke-width: 5; stroke-dasharray: 12 9; animation: c3flow .9s linear infinite; }
@keyframes c3flow { to { stroke-dashoffset: -21; } }
#c3Flow .fn rect { fill: #fff; stroke: #D7DBE2; stroke-width: 2; transition: fill .4s, stroke .4s; }
#c3Flow .fn.on rect { fill: color-mix(in srgb, var(--c) 12%, #fff); stroke: var(--c); stroke-width: 2.5; }
#c3Flow text { font: 600 15px var(--sans); fill: #8A93A3; text-anchor: middle; }
#c3Flow .fn.on text { fill: #13233A; font-weight: 700; }
#c3Flow.v text { font-size: 21px; }
#c3Flow.v .fe { stroke-width: 4; } #c3Flow.v .fe.on { stroke-width: 6; }
.c3-pview { margin-top: 5vh; }
.c3-fullflow { margin: 4vh 0 0; }
.c3-fullflow button { font: 600 15px/1 var(--sans); color: var(--ink); border-bottom: 1.5px dashed currentColor; padding-bottom: 3px; }

/* results */
.c3-rseg { display: flex; width: max-content; margin: 5vh auto 3vh; }
.c3-rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 980px; margin: 0 auto; }
.c3-rc { padding: 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); text-align: left; }
.c3-rc .rh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.c3-rc .rh span { font: 700 17px/1.2 var(--sans); }
.c3-rc .rh b { font: 800 clamp(28px, 3vw, 38px)/1 var(--sans); letter-spacing: -.04em; color: var(--ed); }
.c3-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px 8px; width: min(100%, 300px); margin: 18px auto 0; }
.c3-dots.p { width: min(100%, 210px); gap: 4px 6px; }
.c3-dots i { position: relative; transition: opacity .5s, background .5s, filter .5s, transform .5s var(--spring); transition-delay: calc(var(--d) * 14ms); }
.c3-dots.p i { aspect-ratio: 5 / 7; filter: grayscale(1); opacity: .2; }
.c3-dots.p i::before { content: ""; position: absolute; left: 25%; top: 0; width: 50%; aspect-ratio: 1; border-radius: 50%; background: var(--s); }
.c3-dots.p i::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 0; height: 52%; border-radius: 50% 50% 18% 18% / 70% 70% 18% 18%; background: var(--c); }
.c3-dots.p i.lit { filter: none; opacity: 1; }
.c3-dots.t i { aspect-ratio: 1.5; border-radius: 3px; background: #E3E6EA; -webkit-mask: radial-gradient(3px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(3px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(3px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.c3-dots.t i.lit { background: var(--sun); transform: rotate(-6deg); }
.c3-dots.c i { aspect-ratio: 2; border-radius: 99px; background: #E3E6EA; }
.c3-dots.c i.lit { background: #B7A2FF; }
.c3-rc .rf { margin: 16px 0 0; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.c3-rc .rf .rn { font: 800 22px/1 var(--sans); color: var(--ink); }
.c3-rc .rf small { display: block; margin-top: 4px; font: 600 13px/1 var(--sans); color: #8A93A3; }
.c3-tray { display: grid; place-items: center; height: 170px; }
.tr-box { position: relative; isolation: isolate; width: 170px; height: 70px; margin-top: 70px; border: 3px solid var(--ink); border-top-width: 6px; border-radius: 6px 6px 16px 16px; }
.tr-box::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 3px 3px 13px 13px; background: var(--paper-2); }
.tr-box i { position: absolute; left: 20px; bottom: 14px; width: 60px; height: 34px; border-radius: 6px; background: var(--c); transition: transform .9s var(--spring); z-index: 0; }
.tr-box i:nth-child(1) { --c: #FFD23F; } .tr-box i:nth-child(2) { --c: #FF6B4A; left: 56px; transition-delay: .1s; } .tr-box i:nth-child(3) { --c: #9FD3FF; left: 92px; transition-delay: .2s; } .tr-box i:nth-child(4) { --c: #BDEBC0; left: 72px; transition-delay: .3s; }
#c3Res.after .tr-box i:nth-child(1) { transform: translate(-30px, -66px) rotate(-18deg); } #c3Res.after .tr-box i:nth-child(2) { transform: translate(-6px, -84px) rotate(-4deg); }
#c3Res.after .tr-box i:nth-child(3) { transform: translate(24px, -70px) rotate(14deg); } #c3Res.after .tr-box i:nth-child(4) { transform: translate(4px, -52px) rotate(4deg); }
.c3-tbars { display: grid; gap: 8px; }
.c3-tbars span { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); color: var(--ink-2); }
.c3-tbars em { font-style: normal; }
.c3-tbars i { display: block; height: 12px; width: var(--w); border-radius: 6px; background: #D5D9E0; transition: background .5s, width .8s var(--ease); }
#c3Res:not(.after) .c3-tbars span + span i { width: 79.6%; }
#c3Res.after .c3-tbars span + span i { background: var(--ed); }

/* footer: the restaurant, from above */
.c3-scene { position: relative; height: clamp(280px, 38.8vw, 640px); overflow: hidden; }
.c3-scene svg { display: block; width: 100%; height: 100%; }
.c3-scene .sg { font: 800 11px var(--sans); letter-spacing: .14em; fill: #7A4B2E; text-anchor: middle; }
.c3-scene .bb { font: 800 15px var(--sans); fill: #1E8E4E; text-anchor: middle; }
.c3-scene .waiter { animation: c3waiter 14s linear infinite; }
.c3-scene .waiter .wk { animation: c3step .5s ease-in-out infinite alternate; }
@keyframes c3step { to { transform: translateY(-2px) rotate(3deg); } }
@keyframes c3waiter { 0% { transform: translate(1235px, 40px) rotate(100deg); } 18% { transform: translate(1180px, 270px) rotate(170deg); } 42% { transform: translate(790px, 275px) rotate(180deg); }
  50%, 64% { transform: translate(745px, 300px) rotate(150deg); } 80% { transform: translate(1050px, 270px) rotate(10deg); } 100% { transform: translate(1235px, 40px) rotate(-60deg); } }
.c3-scene .bubble { opacity: 0; animation: c3bubble 14s linear infinite; }
@keyframes c3bubble { 0%, 52% { opacity: 0; transform: translateY(8px); } 56%, 78% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; } }
.c3-scene .bob { animation: c3bob2 3s ease-in-out infinite; }
@keyframes c3bob2 { 50% { transform: translate(3px, -3px); } }
.c3-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 5vh; }
.c3-links a, .c3-links button { padding: 12px 18px; border-radius: 999px; background: rgba(19, 35, 58, .07); color: var(--ink); font: 600 14px/1 var(--sans); text-decoration: none; }
.c3-links button { background: var(--ink); color: #fff; }

/* zoom */
.c3-lb { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(12, 18, 30, .88); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.c3-lb.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.c3-lb figure { margin: 0; display: grid; justify-items: center; gap: 12px; transform: scale(.94); transition: transform .4s var(--spring); }
.c3-lb.open figure { transform: none; }
.c3-lb img { display: block; max-width: min(92vw, 1200px); max-height: 82vh; width: auto; height: auto; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.c3-lb figcaption { font: 600 14px/1.3 var(--sans); color: rgba(255, 255, 255, .85); text-align: center; }
.c3-lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 30px/1 var(--sans); }
.c3-lb .lb-x { right: 16px; top: calc(env(safe-area-inset-top, 0px) + 16px); }
.c3-lb .lb-p { left: 16px; top: 50%; margin-top: -24px; } .c3-lb .lb-n { right: 16px; top: 50%; margin-top: -24px; }
.c3-lb.one .lb-p, .c3-lb.one .lb-n { display: none; }

@media (max-width: 860px) {
  .c3-big { font-size: clamp(28px, 7.4vw, 40px); }
  .c3-mx { width: 94vw; aspect-ratio: 4 / 5; max-height: 66vh; }
  .c3-mx .q { padding: 8px; } .c3-mx .slot { width: 52px; height: 52px; margin-bottom: 6px; }
  .c3-mx b { font-size: 16px; } .c3-mx p { font-size: 12.5px; } .c3-mx small { font-size: 15px; }
  .c3-mx .ax { font-size: 14px; } .c3-mx .ax.x { right: 6px; top: calc(50% + 8px); }
  .bdg { width: 52px; height: 52px; border-radius: 14px; } .bdg img { width: 42px; } .bdg b { font-size: 9.5px; }
  .c3-eq { gap: 6px; } .c3-eq .t { font-size: 11.5px; gap: 6px; max-width: 64px; } .c3-eq .t svg { width: 38px; height: 38px; } .c3-eq > i { font-size: 20px; }
  .c3-ticket { padding: 10px 12px; font-size: 12.5px; white-space: normal; max-width: 96px; } .c3-ticket small { font-size: 9px; }
  .c3-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .c3-checks li { flex-direction: column; text-align: center; font-size: 13px; gap: 8px; }
  .c3-dphone { width: min(360px, calc(100vw - 32px)); box-sizing: border-box; }
  .c3-rgrid { grid-template-columns: 1fr; }
  .c3-dots { gap: 5px 6px; }
  .c3-lb .lb-p, .c3-lb .lb-n { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); margin: 0; }
  .c3-lb img { max-height: 74vh; }
}


/* the bill flips */
.c3-flip { width: min(420px, 100%); margin: 9vh auto 0; perspective: 1400px; }
.c3-flip-in { position: relative; display: grid; width: 100%; padding: 0; text-align: left; transform-style: preserve-3d; transition: transform .9s var(--spring); transform: rotate(-1.5deg); }
.c3-flip-in:hover { transform: rotate(0deg) translateY(-4px); }
.c3-flip-in.flipped, .c3-flip-in.flipped:hover { transform: rotateY(180deg) rotate(1.5deg); }
.c3-flip-in > .c3-receipt { grid-area: 1 / 1; width: 100%; margin: 0; transform: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.c3-flip-in > .c3-receipt.back { transform: rotateY(180deg); background: #FFFDF6; }
.c3-fliphint { margin: 18px 0 0; font: 600 14px/1 var(--sans); color: var(--ink-2); }
.c3-logos span { align-self: center; margin-left: 6px; font: 800 16px/1 var(--sans); color: var(--ink-2); }
/* results */
.c3-rc { display: grid; align-content: start; padding: clamp(22px, 2.4vw, 32px); }
.c3-rc .rh { align-items: center; }
.c3-rc .rh span { font: 700 18px/1.2 var(--sans); }
.c3-rc .rd { padding: 7px 12px; border-radius: 999px; background: rgba(244, 81, 30, .12); color: var(--ed); font: 800 14px/1 var(--sans); font-style: normal; opacity: 0; transform: scale(.8); transition: opacity .4s, transform .5s var(--spring); }
#c3Res.after .c3-rc .rd { opacity: 1; transform: none; }
.c3-rc .rv { margin-top: 10px; font: 800 clamp(40px, 4.4vw, 56px)/1 var(--sans); letter-spacing: -.045em; color: var(--ink); transition: color .4s; }
#c3Res.after .c3-rc .rv { color: var(--ed); }
.c3-rc .c3-dots { margin-top: 22px; }
.c3-rc .rf { margin-top: 18px; }
.c3-tbar { height: 14px; margin-top: 18px; border-radius: 7px; background: rgba(19, 35, 58, .06); overflow: hidden; }
.c3-tbar i { display: block; height: 100%; width: 79.6%; border-radius: 7px; background: #C9CED6; transition: width 1s var(--ease), background .5s; }
#c3Res.after .c3-tbar i { width: 100%; background: var(--ed); }
.c3-tray { height: 190px; }
/* other case studies, as cards */
.c3-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 4vh; }
.c3-morek { margin: 10vh 0 0; font: 800 clamp(22px, 2.2vw, 30px)/1.2 var(--sans); letter-spacing: -.02em; }
.c3-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 72rem; margin: 4vh auto 0; }
.c3-more > * { flex: 0 1 calc((100% - 48px) / 4); min-width: 0; }  /* however many stories there are, they sit centred */
.c3-wc { position: relative; display: grid; grid-template-rows: auto 1fr auto auto; gap: 12px; min-height: 290px; padding: 18px; border-radius: 24px; background: var(--bg); color: #fff; text-align: left; overflow: hidden;
  box-shadow: 0 24px 40px -24px var(--g), 0 2px 6px rgba(19, 35, 58, .12); transition: transform .5s var(--spring), box-shadow .4s; }
.c3-wc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255, 255, 255, .22), transparent 40%); pointer-events: none; }
.c3-wc:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 34px 50px -24px var(--g), 0 2px 6px rgba(19, 35, 58, .12); }
.wc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wc-top img { width: 40px; height: 40px; border-radius: 11px; object-fit: cover; background: #fff; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4); }
.wc-top em { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); font: 700 11.5px/1 var(--sans); font-style: normal; }
.wc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: #5B21B6; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .4); }
.wc-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wc-face { display: grid; align-content: center; gap: 6px; }
.wc-face b { font: 800 22px/1.08 var(--sans); letter-spacing: -.03em; }
.wc-face.big b { font-size: 54px; letter-spacing: -.05em; }
.wc-face small { font: 600 13px/1.2 var(--sans); opacity: .85; }
.wc-name b { display: block; font: 800 18px/1.15 var(--sans); letter-spacing: -.02em; }
.wc-name small { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--sans); opacity: .85; }
.wc-go { font: 700 13px/1 var(--sans); padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .3); }
/* the restaurant closes the page, under a torn paper edge */
.c3-foot { padding-top: 14vh; }
.c3-fin { padding: 6vh clamp(18px, 4vw, 40px) 14vh; }
.c3-scene { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FFF8EC'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
.c3-scene::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: -2px; height: 60px; pointer-events: none; background: var(--edge) 0 0 / 1600px 60px repeat-x; transform: scaleY(-1); }
@media (max-width: 1100px) { .c3-more > * { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 860px) {
  .c3-mx small { font-size: 16px; } .c3-mx b { font-size: 18px; } .c3-mx p { font-size: 13.5px; }
  .c3-rc .rv { font-size: 44px; }
  .c3-wc { min-height: 240px; }
}
@media (max-width: 480px) { .c3-more > * { flex-basis: 100%; } }

/* final screens gallery */
.c3-gal { margin-top: 8vh; }
.c3-galk { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 0 0 3vh; font: 800 clamp(20px, 2vw, 26px)/1.2 var(--sans); letter-spacing: -.02em; }
.c3-galk i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.c3-galk small { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); font: 700 12.5px/1 var(--sans); }
.c3-galrow { display: flex; justify-content: safe center; gap: clamp(12px, 1.6vw, 24px); padding: 6px clamp(18px, 4vw, 40px) 18px; overflow-x: auto; scrollbar-width: none; }
.c3-galrow img { flex: 0 0 auto; width: clamp(170px, 15vw, 230px); height: auto; border-radius: 22px; background: #fff; box-shadow: var(--shadow-sm); outline: 3px solid color-mix(in srgb, var(--c) 30%, transparent); outline-offset: 3px; transition: transform .4s var(--spring); }
.c3-galrow img:hover { transform: translateY(-8px); }
@media (max-width: 1100px) { .c3-galrow { justify-content: flex-start; scroll-snap-type: x mandatory; } .c3-galrow img { scroll-snap-align: center; width: min(56vw, 230px); } }
/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .nav { height: 56px; padding: 0 6px; }
  .nav a { height: 44px; padding: 0 11px; font-size: 13.5px; }
  .nav .ind { top: 6px; height: 44px; }
  .nav a[data-go="life"], .nav a[data-go="stack"], .nav a[data-go="lastlook"], .nav .sep { display: none; }
  .nav a.cta { padding: 0 14px; }
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 80px); }
  .hero-copy h1 { font-size: clamp(2.5rem, 11.4vw, 3.6rem); }
  .sub { font-size: 19px; }
  .chip { font-size: 12.5px; }
  .scroll-cue, .hint { display: none; }
  .sheet, .sheet.left { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); left: 12px; right: 12px; width: auto; max-height: 62svh; padding: 20px; transform: translateY(30px); }
  .sheet.on { transform: none; }
  .sheet .peek img { border-radius: 10px; }
  .jcard { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); left: 12px; right: 12px; width: auto; max-height: 46svh; padding: 0; transform: translateY(30px); }
  .jc-top { padding: 14px 18px; }
  .jc-bd { padding: 16px 18px 18px; }
  .j-head { top: calc(env(safe-area-inset-top, 0px) + 84px); }
  .jcard.in { transform: none; }
  .jcard h3 { font-size: 23px; }
  .jcard .txt { font-size: 15px; }
  .jc-nav { display: none; }
  .compass { width: 60px; height: 60px; top: calc(env(safe-area-inset-top, 0px) + 74px); }
  .mapctl { display: none; }
  .jtl { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); padding: 8px 12px; gap: 10px; }
  .jtl .yr { display: none; }
  .pol { width: 120px; }
  .pols { transform: scale(calc(var(--inv, 1) * .62)); }
  .sec-head h2 { font-size: clamp(2rem, 9.2vw, 3rem); }
  .j-head .sec-head h2 { font-size: min(7.2vw, 3rem); }
  .desk-hint { font-size: 15px; right: 12px; bottom: 8px; }
  .desk .p1 { left: 3% !important; top: 16px !important; width: 54% !important; }
  .desk .pc1 { left: 59% !important; top: 40px !important; width: 38% !important; }
  .desk .p2 { left: 3% !important; top: 310px !important; width: 94%; padding-left: 40px; }
  .desk .p5 { left: 8% !important; top: 800px !important; }
  .desk .pc2 { left: 4% !important; top: 1030px !important; width: 44% !important; }
  .desk .pc3 { left: 52% !important; top: 1050px !important; width: 44% !important; }
  .desk .pc4 { left: 4% !important; top: 1300px !important; width: 44% !important; }
  .desk .pc5 { left: 52% !important; top: 1320px !important; width: 44% !important; }
  .desk .pc6 { left: 4% !important; top: 1570px !important; width: 44% !important; }
  .desk .pc7 { left: 52% !important; top: 1590px !important; width: 44% !important; }
  .desk .p7 { left: 3% !important; top: 1850px !important; width: min(92%, 420px); }
  .desk .p17 { display: none; }
  .desk .polaroid.pol-sm figcaption { font-size: 16px; }
  .vn-ask { left: 0; transform: translate(0, 8px) scale(.94); } .vinyl.ask .vn-ask { transform: none; }
  .box-track { height: 190vh; }
  .box-fit { left: 50%; top: 42%; }
  .box-info { left: 16px; right: 16px; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: none; width: auto; display: block; }
  .bi-list { display: grid; margin: 0; }
  .box-info .bi-p, .box-info h3, .box-info .bi-k { display: none; }
  .bi-list { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scrollbar-width: none; }
  .bi-list button { background: #fff; }
  .cs-sec { grid-template-columns: 1fr; gap: 10px; }
  .cs-shots { justify-content: flex-start; }
  .cs-shots img { height: 52vh; }
  .box-cap .hint2 { display: none; }
  .proc-line { height: auto; margin-top: 4vh; display: grid; gap: 18px; }
  .proc-line svg { display: none; }
  .pnode, .pnode.up { position: relative; left: auto !important; top: auto !important; transform: none; width: auto; text-align: left; display: grid; grid-template-columns: 26px 1fr; gap: 4px 14px; }
  .pnode .dot, .pnode.up .dot { margin: 0; grid-row: span 2; order: 0; }
  .desk { height: 2060px; border-width: 10px; }
  .sticky { width: 10.5rem; font-size: 18px; padding: 14px; }
  .tell-box { padding-right: 0; }
  .tell { font-size: clamp(1.9rem, 8.4vw, 2.6rem); line-height: 1.3; }
  .tell-box .sticky:nth-of-type(n+2), .move-hint { display: none; }
  .tell-box .sticky:nth-of-type(1) { top: auto !important; bottom: -30%; right: 0 !important; }
  .chips { bottom: calc(env(safe-area-inset-bottom, 0px) + 80px); }
  .chip { padding: 6px 10px; }
  .ll-tell { font-size: clamp(1.45rem, 6.6vw, 2rem); }
  .nw-card { width: 240px; min-height: 150px; padding: 18px 16px 14px; }
  .nw-card p { font-size: 18px; }
  .nw-cta { width: 100%; justify-content: center; }
  .ll-roles ol { grid-template-columns: 1fr; gap: 18px; padding-left: 8px; }
  .ll-roles ol::before, .ll-roles ol::after { left: 18px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; }
  .ll-roles ol::after { transform: scaleY(0); transform-origin: 50% 0; }
  .ll-roles.in ol::after { transform: scaleY(1); }
  .ll-roles li { grid-template-columns: 64px 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; }
  .ll-roles li i.hat { grid-row: span 2; margin: 0; }
  .ll-roles ol::before, .ll-roles ol::after { left: 38px !important; }
  .ll-stats { grid-template-columns: 1fr; gap: 28px; }
  .ll-stats li + li { border-left: 0; border-top: 1px solid rgba(58, 38, 22, .15); padding-top: 28px; }
  .gift { transform-origin: 50% 92%; left: -110px; top: -125px; width: 220px; height: 220px; }
  .gift-cap { font-size: 16px; }
  .gift-stage { top: 86%; }
  .tool { width: 66px; height: 76px; margin: -38px 0 0 -33px; padding: 8px 3px 7px; gap: 6px; border-radius: 16px; }
  .tool .ti { width: 40px; height: 40px; border-radius: 11px; }
  .tool .ti svg { width: 22px; height: 22px; }
  .tool .tn { font-size: 9px; }
  .shelf { border-radius: 24px; }
  .tool-tip { width: 220px; padding: 12px 14px 14px; }
  .tool-tip p { font-size: 14px; }
  .keys, .keys.keys-three, .keys.keys-four { grid-template-columns: repeat(2, 150px); gap: 14px 12px; }
  .kw .knote { width: 160px; }
  .kw { grid-template-rows: auto; }
  .kw > span { display: none; }
  .keys-hint { display: none; }
  .kw .knote { order: 3; padding: 8px 0 0; }
  .kw .knote.up { flex-direction: column-reverse; padding: 8px 0 0; }
  .kw .key { order: 2; }
  .knote.up svg { transform: scaleY(-1); }
  .knote { font-size: 15px !important; }
  .key { width: 96px; height: 96px; border-radius: 22px; }
  .key .cap svg { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .flock, .veil { display: none; }
}

/* =========================================================
   Responsive pass: type and spacing scale with both the width
   and the height of the screen, so short laptops, tall tablets
   and phones all get a layout that fits.
   ========================================================= */
:root { --gut: clamp(16px, 4vw, 48px); --sec: clamp(72px, 14vh, 180px); --edge-x: max(var(--gut), calc((100vw - 76rem) / 2 + var(--gut))); }
.sec-head h2 { font-size: clamp(2.2rem, min(6.2vw, 10.5vh), 6rem); }
.tell { font-size: clamp(1.6rem, min(4.1vw, 6.4vh), 4rem); line-height: 1.3; }
.ll-tell { font-size: clamp(1.45rem, min(3.3vw, 5.2vh), 3.2rem); }
.hello h2 { font-size: clamp(2.6rem, min(8vw, 12.5vh), 8rem); }
.hello { padding-block: var(--sec) 0; }
.process { padding-block: var(--sec) calc(var(--sec) * .85); }
.notes { padding-block: var(--sec) calc(var(--sec) * .75); }
.life { padding-block: var(--sec) calc(var(--sec) * 1.1); }
.work { padding-block: var(--sec) 4vh; }
.sec-head { margin-bottom: clamp(28px, 6vh, 72px); }
/* brands: align the heading with the rest of the page on wide screens */
.brand-head { padding-left: var(--edge-x); padding-right: var(--edge-x); padding-top: calc(env(safe-area-inset-top, 0px) + clamp(70px, 11vh, 110px)); }
.bh-l { flex: 1 1 340px; min-width: 0; }
.brand-pin { grid-template-columns: minmax(0, 1fr); }
.bh-sub { max-width: min(40ch, 100%); }
/* the process wave never taller than the screen allows */
.proc-line { height: clamp(300px, 52vh, 460px); }
/* short laptop screens (e.g. 1280×720, 1366×768) */
@media (min-width: 861px) and (max-height: 820px) {
  .tell-box .sticky { transform-origin: 100% 0; scale: .86; }
  .ll-roles { margin-bottom: 6vh; }
  .keys-mat { margin-top: 28px; padding-block: 18px 22px; }
  .key { width: 104px; height: 104px; }
  .hello p { margin-top: 14px; }
}
/* big desktops: let things breathe but stop growing */
@media (min-width: 1600px) {
  .wrap { width: min(84rem, 100%); }
  :root { --edge-x: max(var(--gut), calc((100vw - 84rem) / 2 + var(--gut))); }
  .desk { max-width: 84rem; margin-inline: auto; }
}
/* tablets */
@media (min-width: 600px) and (max-width: 1100px) {
  .tell { font-size: clamp(1.9rem, min(5vw, 5.6vh), 3.2rem); }
  .tell-box { padding-right: min(14rem, 24vw); }
  .ll-tell { font-size: clamp(1.6rem, min(4.2vw, 4.6vh), 2.6rem); }
  .ll-roles li b { font-size: 16px; } .ll-roles li span { font-size: 13px; }
}
/* phones */
@media (max-width: 600px) {
  .tell { font-size: clamp(1.45rem, 6.9vw, 2.15rem); line-height: 1.32; max-width: none; }
  .tell .hl { white-space: normal; }
  .ll-tell { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .sec-head h2 { font-size: clamp(2rem, 9vw, 2.75rem); }
  .hello h2 { font-size: clamp(2.4rem, 11.5vw, 3.4rem); }
  .bi-m { flex-wrap: nowrap; justify-content: space-between; }
  .bi-m li { padding: 0 8px; min-width: 0; }
  .bi-m b { font-size: 20px; } .bi-m span { font-size: 11px; }
  .brand-head > p { display: none; }
  .bh-sub { font-size: 18px; }
  .ll-stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ll-stats li { padding: 0 6px; } .ll-stats li + li { border-top: 0; padding-top: 0; border-left: 1px solid rgba(58, 38, 22, .15); }
  .ll-stats b { font-size: clamp(28px, 8.6vw, 38px); }
  .ll-stats span { font-size: 10px; letter-spacing: .08em; }
}

/* journey as a carousel on phones and tablets */
.jcar { display: none; }
.journey.jcm .jcar { position: absolute; z-index: 7; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: rgba(255, 253, 247, .94); box-shadow: var(--shadow-sm); }
.jcar button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font: 700 15px/1 var(--sans); color: var(--ink); background: rgba(19, 35, 58, .06); }
.jcar button:disabled { display: none; }
.jcar #jcPrev { width: 44px; padding: 0; justify-content: center; font-size: 18px; }
.jcar .nx { background: var(--ink); color: #fff; }
.jcar #jcCount { min-width: 4ch; font: 700 13px/1 var(--sans); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.jcar #jcCount:empty { display: none; }
.journey.jcm .j-track { height: 100vh; height: 100svh; }
.journey.jcm .jtl, .journey.jcm .mapctl, .journey.jcm .jc-nav { display: none; }
.journey.jcm .jcard { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); }
@media (min-width: 861px) and (max-width: 1100px) { .journey.jcm .jcard { top: auto; transform: translateY(30px); max-height: calc(100svh - 200px); } .journey.jcm .jcard.in { transform: none; } }
@media (max-width: 860px) { .journey.jcm .jcard { max-height: 50svh; } }

/* ===== touch layouts (phones and tablets) ===== */
.jcar button { white-space: nowrap; }
.gift-tap { display: none; }
@media (max-width: 1100px) {
  /* journey carousel card on tablets */
  .journey.jcm .jcard { left: 50%; right: auto; width: min(560px, calc(100vw - 24px)); translate: -50% 0; }
  .journey.jcm .jc-gal > div { grid-template-columns: repeat(3, minmax(0, 96px)); }
}
@keyframes tapbob { 50% { transform: translate(-50%, -4px); } }
@media (max-width: 860px) {
  /* A · hero: a shorter fly-in */
  .valley { height: 200vh; }
  /* B · story: keep the colour marks, drop the drawn scribbles that misalign on small lines */
  #doodles { display: none; }
  /* D · the box on phones: numbers on top, projects as a swipeable row at the bottom */
  .box-fit { top: 54%; }
  .box-info { left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 70px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); width: auto; transform: none; display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .box-info .bi-k { display: block; margin: 0 0 6px; text-align: center; }
  .box-info h3 { display: block; margin: 0 16px 8px; font-size: 24px; text-align: center; }
  .bi-m { margin: 6px 16px 0; justify-content: center; }
  .bi-m li { flex: 1 1 0; }
  .bi-list { display: flex !important; margin: auto 0 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; padding: 6px 16px 4px; scroll-padding-inline: 16px; justify-content: flex-start; }
  .bi-list::-webkit-scrollbar { display: none; }
  .bi-list li { flex: 0 0 auto; scroll-snap-align: start; }
  .bi-list button { min-width: 190px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-sm) !important; transform: none !important; }
  .bi-list:has(button.on) button:not(.on):not(:hover) { opacity: 1; }
  /* F · LastLook: tighter, and highlights that wrap cleanly */
  .ll-rev-track { height: 135vh; }
  .ll-end { padding-block: 0 12vh; }
  /* G · hats: no line running through them, just a clean list */
  .ll-roles ol::before, .ll-roles ol::after { display: none; }
  .ll-roles ol { gap: 20px; padding-left: 0; }
  .ll-roles li i.hat { margin: 0; width: 56px; height: 44px; }
  /* J · email fits its column */
  .keys, .keys.keys-three, .keys.keys-four { grid-template-columns: repeat(2, minmax(0, 160px)); }
  .kw .knote { width: 100%; }
  .knote #mailText { font-size: 11px; white-space: nowrap; letter-spacing: -.01em; }
  .mailrow { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 600px) {
  .tell .hl, .ll-tell .hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--b) center / 100% 100% no-repeat; padding: 0 .08em; border-radius: .1em; }
  .tell .hl::before, .ll-tell .hl::before { display: none; }
  .tell .hl:not(.on) { background-size: 0 100%; transition: background-size .8s var(--ease); }
}
/* brands: the site cards never cover the heading or the call button */
.brand-pin > div[style] { padding-top: 34px; }
.site { width: min(560px, 78vw, calc((100svh - 300px) * 1.4)); }

/* brands: a calm carousel with buttons on every screen */
.brand-sec.manual .brand-pin { position: relative; height: auto; overflow: visible; padding-bottom: 8vh; }
.brand-car { position: relative; }
.brand-sec.manual .brand-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 50px var(--edge-x) 40px; scroll-padding-inline: var(--edge-x); will-change: auto; }
.brand-sec.manual .brand-row::-webkit-scrollbar { display: none; }
.brand-sec.manual .site { scroll-snap-align: start; width: min(560px, 82vw); }
.brand-sec.manual .brand-prog { display: none; }
.bnav { position: absolute; z-index: 4; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 247, .94); color: var(--ink); font: 700 20px/1 var(--sans); box-shadow: var(--shadow-sm); transition: opacity .3s, transform .3s var(--spring); }
.bnav:hover { transform: scale(1.08); }
.bnav:disabled { opacity: 0; pointer-events: none; }
.bnav.prev { left: 16px; } .bnav.next { right: 16px; }
@media (max-width: 600px) { .bnav { width: 44px; height: 44px; margin-top: -22px; font-size: 18px; } }
/* the map: clean checkpoint pins instead of buildings */
#lmArt, .poi, .car, .boat, .ripple { display: none !important; }
.world3 .mk.mk { opacity: 1 !important; pointer-events: auto; }
.mk .pinhead { transform: none; opacity: 1; }
.mk .dot { opacity: 0; }
.mk .nm { display: block; opacity: 1; transform: none; top: 12px; font-size: 13px; box-shadow: 0 6px 14px -8px rgba(19, 35, 58, .5); }
.mk.dim { opacity: .45 !important; }
.mk.dim .nm { opacity: 0; }

/* bigger, readable checkpoint pins */
.mk .pinhead { width: 76px; height: 94px; }
.mk .pinhead .lg { top: 9px; width: 56px; height: 56px; margin-left: -28px; border-width: 3px; }
.mk .pinhead .ic { top: 19px; width: 36px; height: 36px; margin-left: -18px; }
.mk .nm { left: calc(100% + 8px); top: 22px; padding: 9px 14px; font-size: 17px; }
.mk.on .nm { background: var(--ink); color: #fff; }
@media (max-width: 860px) { .mk .pinhead { width: 60px; height: 74px; } .mk .pinhead .lg { width: 44px; height: 44px; margin-left: -22px; top: 7px; } .mk .pinhead .ic { top: 15px; width: 28px; height: 28px; margin-left: -14px; } .mk .nm { font-size: 14px; top: 16px; padding: 7px 11px; } }
/* after the walk: one simple way back in */
.jtl-view { display: none; }
.journey.over .jtl { opacity: 0; pointer-events: none; }
.journey.over .jtl-view { position: absolute; z-index: 7; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 15px/1 var(--sans); box-shadow: 0 16px 30px -14px rgba(19, 35, 58, .7); animation: c3popc .5s var(--spring) both; }
.jtl-view svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.jtl-view:hover { transform: translateX(-50%) translateY(-2px); }
@keyframes c3popc { from { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
/* brands: room for the card shadows */
.brand-sec.manual .brand-row { padding-top: 60px; padding-bottom: 110px; margin-bottom: -60px; }
/* a few clouds in the footer on every screen */
@media (min-width: 1400px) { .hello .clouds-foot { display: block; height: 18vh; margin-top: 6vh; } .hello .clouds-foot img { width: min(36%, 620px) !important; } .hello .foot { margin-top: 0; } }

/* map: no zoom buttons in the overview, and the ground runs edge to edge */
.journey.jfar .mapctl { opacity: 0; pointer-events: none; }
.mapctl { transition: opacity .3s; }
.j-pin { background: #F4EFE1; }
#mapArt { overflow: visible; }
/* more clouds at the very bottom */
@media (min-width: 1400px) { .hello .clouds-foot { height: 30vh; margin-top: 4vh; } .hello .clouds-foot img { width: min(48%, 900px) !important; } }
.hello .clouds-foot { height: max(min(34vh, 30vw), 220px); }

/* paths: the shipped screens, joined by the route through them */
.pflow { align-items: center; gap: 0; }
.pf-s { position: relative; margin: 0; flex: 0 1 200px; min-width: 0; animation: c3pop .6s var(--spring) both; animation-delay: calc(var(--k) * 90ms); }
.pf-s img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-sm); background: #fff; outline: 3px solid color-mix(in srgb, var(--c) 35%, transparent); outline-offset: 3px; animation: none; }
.c3-phones.pflow img { width: 100%; }
.pf-n { position: absolute; z-index: 1; left: -10px; top: -12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 800 14px/1 var(--sans); box-shadow: 0 0 0 3px var(--paper); }
.pf-ar { flex: 0 0 auto; width: clamp(28px, 3.4vw, 56px); color: var(--c); }
.pf-ar svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 6; animation: c3flow .9s linear infinite; }
@media (max-width: 860px) { .pflow { padding: 18px 18px 14px; } .pf-s { flex: 0 0 min(56vw, 220px); scroll-snap-align: center; } }
/* final screens: room to lift on hover, and a one-line note */
.c3-galrow { padding-top: 22px; padding-bottom: 34px; }
.c3-gald { margin: -1.5vh auto 1vh; max-width: 740px; font: 400 16.5px/1.5 var(--sans); color: var(--ink-2); }
/* thanks: filled hover states */
.c3-links a, .c3-links button { transition: background .25s, color .25s, transform .3s var(--spring), box-shadow .25s; }
.c3-links a:hover, .c3-links button:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 12px 22px -12px rgba(19, 35, 58, .6); }
.c3-links a[href*="github"]:hover { background: #24292F; }
.c3-links a[href*="peji"]:hover { background: #0A66C2; }
.c3-links a[href*="linkedin"]:hover { background: #0A66C2; }
.c3-links a[href*="instagram"]:hover { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.c3-links a[href^="mailto"]:hover { background: #EA4335; }
.c3-links a[href*="topmate"]:hover, .c3-links a[data-book]:hover { background: #E4402A; }
.c3-links button:hover { background: var(--ed); }
/* other case study cards: no divider */
.wc-go { border-top: 0; padding-top: 4px; }

/* clouds rise up to meet the contact card */
.hello .clouds-foot { z-index: 1; margin-top: -14vh !important; height: max(min(44vh, 40vw), 260px) !important; }
.hello .clouds-foot img { bottom: -4vh; }
@media (min-width: 1400px) { .hello .clouds-foot img { width: min(56%, 1050px) !important; } }
@media (max-width: 860px) { .hello .clouds-foot { margin-top: -8vh !important; } }

/* nav: Home lives in the bar on desktop, and the active item shows its icon */
.nav a .ni { display: inline-grid; place-items: center; width: 0; height: 22px; margin-right: 0; overflow: hidden; opacity: 0; transition: width .35s var(--ease), margin .35s var(--ease), opacity .3s; }
.nav a .ni svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav a .ni.face { border-radius: 50%; }
.nav a .ni.face img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.nav a.on .ni { width: 22px; margin-right: 8px; opacity: 1; }
@media (min-width: 861px) { .bar > .logo { display: none; } }
@media (max-width: 860px) { .nav .nv-home { display: none; } }
/* gift: a secondary button right under it, on every screen */
.stack .gift-tap { position: absolute; z-index: 5; left: 50%; bottom: auto; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 16px; border-radius: 999px; background: rgba(255, 253, 247, .92); color: var(--ink); border: 1.5px solid rgba(19, 35, 58, .16); font: 700 15px/1 var(--sans); box-shadow: 0 10px 22px -14px rgba(19, 35, 58, .5); transition: opacity .4s, transform .35s var(--spring), background .25s, border-color .25s; animation: none; cursor: pointer; }
.stack .gift-tap i { width: 18px; height: 18px; border-radius: 0; background: none; box-shadow: none; display: inline-block; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='2'/%3E%3Cpath d='M2 9h20M12 9v12M12 9c-2-4-6-5-6-2s4 2 6 2zm0 0c2-4 6-5 6-2s-4 2-6 2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='2'/%3E%3Cpath d='M2 9h20M12 9v12M12 9c-2-4-6-5-6-2s4 2 6 2zm0 0c2-4 6-5 6-2s-4 2-6 2z'/%3E%3C/svg%3E") center / contain no-repeat; background: var(--ink-2); }
.stack .gift-tap:hover { background: #fff; border-color: var(--ink); transform: translateX(-50%) translateY(-2px); }
.stack .gift-tap:hover i { background: var(--coral); }
.stack .gift-tap.gone { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); }
.stack.tap .stack-track { height: 100vh; height: 100svh; }
.stack.tap #giftStage { cursor: pointer; }
/* real sites: the live front page as the thumbnail */
a.site { display: block; color: inherit; text-decoration: none; }
.site .page img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* hats, centred */
@media (max-width: 860px) { .ll-roles { text-align: center; } .ll-roles ol { width: fit-content; margin: 0 auto; } .ll-roles li { text-align: left; } }

/* view journey map: softer shadow that fits, and a clear hover */
.journey.over .jtl-view { bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); box-shadow: 0 6px 14px -8px rgba(19, 35, 58, .45); transition: background .25s, transform .3s var(--spring), box-shadow .25s; }
.journey.over .jtl-view:hover { background: #22395a; transform: translateX(-50%) translateY(-3px); box-shadow: 0 10px 18px -10px rgba(19, 35, 58, .5); }
.journey.over .jtl-view:hover svg { stroke: var(--sun); }

/* overview: pins and names read clearly even fully zoomed out */
.world3.far .mk { transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 1.9)); }
.world3.far .mk .nm { font-size: 19px; padding: 9px 14px; }
@media (max-width: 860px) { .world3.far .mk { transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 1.35)); } .world3.far .mk .nm { font-size: 15px; } }

/* the map gets its own lighter sheet, with torn paper edges top and bottom */
.journey { --paper: #FDFCF9; --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FDFCF9'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FDFCF9'%20filter='url(%23s)'/%3E%3C/svg%3E"); z-index: 9; background: var(--paper); }
.journey .j-pin { background: var(--paper); }
@media (max-width: 860px) { .world3.far .mk { transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 2.4)); } .world3.far .mk .nm { font-size: 16px; } }

/* each site card takes its screenshot's own shape, so nothing is cropped */
.site .page { aspect-ratio: auto; height: auto; }
.site .page img { height: auto; object-fit: initial; }
.brand-sec.manual .brand-row { align-items: center; }

/* the next section's torn edge never sits on the last lines */
.process { padding-bottom: calc(var(--sec) * .85 + 70px); }
.life, .notes, .stack, .ll, .brand-sec, .hello { scroll-margin-top: 0; }

/* overview pins: names hidden on phones and tablets, a touch smaller on desktop */
.world3.far .mk { transform: translate(-50%, -100%) scale(calc(var(--inv, 1) * 1.7)); }
.journey.jcm .world3.far .mk .nm { display: none; }

/* contact keys sit dead centre in their columns */
.kw { grid-template-columns: 100%; }
.kw > .key { justify-self: center; }
.kw > .knote { justify-self: center; }

/* =========================================================
   DARK MODE · the same world, after sunset
   ========================================================= */
:root[data-theme="dark"] {
  --paper: #1A1A1A; --paper-2: #222222; --ink: #F5F5F5; --ink-2: #BEBEBE; --line: rgba(240, 240, 240, .16);
  --card: #2A2A2A; --shadow: 0 30px 70px -24px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .35); --shadow-sm: 0 10px 24px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
:root[data-theme="dark"], :root[data-theme="dark"] body { background: var(--paper); }
/* the switch */
.theme-btn { position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 14px); right: clamp(14px, 2.4vw, 28px); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 247, .86); color: var(--ink); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; pointer-events: auto; transition: transform .4s var(--spring), background .4s, box-shadow .4s; }
.theme-btn:hover { transform: rotate(-14deg) scale(1.07); }
/* "visitors so far" nudge under the theme button */
.vc { position: fixed; z-index: 69; top: calc(env(safe-area-inset-top, 0px) + 21px); right: calc(clamp(14px, 2.4vw, 28px) + 110px); display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 16px; border-radius: 999px; box-sizing: border-box;
  background: rgba(255, 255, 255, .34); backdrop-filter: blur(16px) saturate(1.7); -webkit-backdrop-filter: blur(16px) saturate(1.7);  /* same glass as the theme button */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px -16px rgba(19, 35, 58, .5);
  font: 600 15px/1 var(--sans); color: var(--ink-2); white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.vc.in { opacity: 1; transform: none; }
.vc.tight .vc-w { display: none; }
.vc b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.vc i { width: 8px; height: 8px; border-radius: 50%; background: #34C759; animation: vcPulse 2.2s ease-out infinite; }
@keyframes vcPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); } }
:root[data-theme="dark"] .vc { color: #E4E4EA; background: rgba(38, 38, 38, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .vc b { color: #F5F5F7; }
@media (max-width: 860px) { .vc { padding: 0 12px 0 11px; gap: 7px; font-size: 13px; height: 44px; top: calc(env(safe-area-inset-top, 0px) + 14px); } }
html .vc.away { opacity: 0 !important; pointer-events: none; }
@media (max-width: 859px) {   /* phones: the visitor count sits just above the nav, only while you're at the top */
  .vc { top: auto !important; right: auto !important; left: 50%; translate: -50% 0; bottom: calc(var(--navh, 92px) + 12px); height: 36px !important; padding: 0 14px 0 12px; font-size: 13px; z-index: 66; transition: opacity .4s var(--ease), transform .6s var(--ease); }
  .vc .vc-w { display: inline !important; }
  html .sfx-btn, html .theme-btn { width: 44px !important; height: 44px !important; min-height: 0 !important; max-height: 44px !important; padding: 0 !important; box-sizing: border-box; }
}
.theme-btn svg { position: absolute; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .8s var(--spring), opacity .4s; }
.theme-btn .moon { transform: none; }
.theme-btn .sun { transform: translateY(40px) rotate(-90deg); opacity: 0; }
:root[data-theme="dark"] .theme-btn { background: rgba(42, 42, 42, .85); color: #FFD86B; box-shadow: 0 0 0 1px rgba(255, 216, 107, .2), 0 10px 30px -10px rgba(255, 196, 70, .5); }
:root[data-theme="dark"] .theme-btn .moon { transform: translateY(-40px) rotate(90deg); opacity: 0; }
:root[data-theme="dark"] .theme-btn .sun { transform: none; opacity: 1; }
/* the reveal: the new theme grows as a circle from the switch */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }
html.theme-fade, html.theme-fade * { transition: background-color .9s ease, color .9s ease, border-color .9s ease, fill .9s ease, box-shadow .9s ease !important; }

/* glass bits */
:root[data-theme="dark"] .logo, :root[data-theme="dark"] .nav { background: rgba(34, 34, 34, .82); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 34px -14px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .nav .ind { background: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .nav a.cta { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .kicker { color: var(--ink-2); }

/* 1 · the valley at night: a real night sky behind the hills, a moon, stars, and a cooler, dimmer land */
.night { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: linear-gradient(180deg, transparent 40%, rgba(12, 12, 14, .35) 100%); }
:root[data-theme="dark"] .night { opacity: 1; }
.night i { display: none; }
:root[data-theme="dark"] .scene > .bgp, :root[data-theme="dark"] #L-sky > img { opacity: 0; }
:root[data-theme="dark"] #L-sky::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 58%; animation: twinkle 4s ease-in-out infinite alternate; background-image:
  radial-gradient(1.6px 1.6px at 6% 12%, #fff, transparent), radial-gradient(1px 1px at 11% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 17% 6%, #fff, transparent), radial-gradient(1px 1px at 23% 22%, #fff, transparent),
  radial-gradient(1.8px 1.8px at 29% 40%, #fff, transparent), radial-gradient(1px 1px at 34% 10%, #fff, transparent), radial-gradient(1.2px 1.2px at 41% 28%, #fff, transparent), radial-gradient(1px 1px at 46% 4%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 52% 18%, #fff, transparent), radial-gradient(1px 1px at 57% 36%, #fff, transparent), radial-gradient(1.2px 1.2px at 63% 8%, #fff, transparent), radial-gradient(1px 1px at 69% 26%, #fff, transparent),
  radial-gradient(1.6px 1.6px at 74% 44%, #fff, transparent), radial-gradient(1px 1px at 88% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 93% 8%, #fff, transparent), radial-gradient(1px 1px at 97% 40%, #fff, transparent),
  radial-gradient(1px 1px at 3% 48%, #fff, transparent), radial-gradient(1.2px 1.2px at 38% 52%, #fff, transparent), radial-gradient(1px 1px at 60% 50%, #fff, transparent), radial-gradient(1.4px 1.4px at 84% 54%, #fff, transparent),
  radial-gradient(900px 260px at 50% 100%, rgba(150, 150, 170, .16), transparent); }
:root[data-theme="dark"] #L-sky::after { content: ""; position: absolute; left: 77%; top: 7%; width: 4.2%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 34%, #FFFBEA, #F6E6B0 55%, #E3C982 100%); box-shadow: 0 0 40px 14px rgba(255, 236, 180, .35), 0 0 160px 60px rgba(255, 230, 170, .14); }
:root[data-theme="dark"] .drift img { filter: brightness(.38) saturate(.5); opacity: .55; }
:root[data-theme="dark"] .ly:not(#L-sky):not(#L-drift) > img { filter: brightness(.6) saturate(.82) contrast(1.05); }
:root[data-theme="dark"] .scene.focusing .ly:not(.on):not(.keep) > img { filter: brightness(.42) saturate(.4); }
:root[data-theme="dark"] .scene.focusing .ly.on > img { filter: brightness(.95) saturate(1.05) drop-shadow(0 0 22px rgba(255, 220, 140, .7)); }
:root[data-theme="dark"] .bird path { stroke: #B9B9C0; }
@keyframes twinkle { to { opacity: .55; } }
:root[data-theme="dark"] .hero-copy .sub, :root[data-theme="dark"] .hero-copy .hey { text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .stage .shade { background: linear-gradient(180deg, transparent 30%, rgba(26, 26, 26, .6)); }
:root[data-theme="dark"] .pin b { background: rgba(42, 42, 42, .94); color: var(--ink); }
:root[data-theme="dark"] .sheet { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .veil { background: #1A1A1A; }
:root[data-theme="dark"] .story::before { background: var(--paper); -webkit-mask: url("v2/h/tear.png") 0 0 / auto 150px repeat-x; mask: url("v2/h/tear.png") 0 0 / auto 150px repeat-x; filter: none; }

/* 2 · story */
:root[data-theme="dark"] .sticky { color: #13233A; }

/* 3 · the map, in night mode */
:root[data-theme="dark"] .journey { --paper: #1C1C1C; }
:root[data-theme="dark"] #mapArt [fill="#FDFCF9"] { fill: #1C1C1C; }
:root[data-theme="dark"] #mapArt #cityG stop { stop-color: #212428; }
:root[data-theme="dark"] #mapArt [fill="#E3DED5"] { fill: #262626; }
:root[data-theme="dark"] #mapArt [stroke="#E2DDD3"], :root[data-theme="dark"] #mapArt [stroke="#DCD5C9"] { stroke: #17181A; }
:root[data-theme="dark"] #mapArt [stroke="#FFFFFF"] { stroke: #333333; }
:root[data-theme="dark"] #mapArt [fill="#CDE8C4"] { fill: #1E2B22; }
:root[data-theme="dark"] #mapArt [fill="#AAD3F2"] { fill: #1A2733; } :root[data-theme="dark"] #mapArt [stroke="#AAD3F2"] { stroke: #1A2733; }
:root[data-theme="dark"] #mapArt [stroke="#EDC458"] { stroke: #5C4A1F; } :root[data-theme="dark"] #mapArt [stroke="#FCDE86"] { stroke: #7A6328; }
:root[data-theme="dark"] #mapArt [fill="#fff"]:not(mask *):not(mask) { fill: #2A2D32; }
:root[data-theme="dark"] #mapArt text { fill: #8A9099; stroke: #1C1C1C; }
:root[data-theme="dark"] .mk .nm { background: #333333; color: var(--ink); }
:root[data-theme="dark"] .mk.on .nm { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .jcard { background: var(--card); color: var(--ink); }
:root[data-theme="dark"] .jcard .txt { color: #C9C9C9; }
:root[data-theme="dark"] .jc-top { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, #2A2A2A), color-mix(in srgb, var(--c) 10%, #2A2A2A)); border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .jtl, :root[data-theme="dark"] .jcar { background: rgba(42, 42, 42, .94); }
:root[data-theme="dark"] .jtl button::before { background: #2A2A2A; }
:root[data-theme="dark"] .jcar button { background: rgba(255, 255, 255, .08); color: var(--ink); }
:root[data-theme="dark"] .jcar .nx, :root[data-theme="dark"] .journey.over .jtl-view { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .compass svg > circle:first-child { fill: #2A2A2A; stroke: #F0F0F0; }
:root[data-theme="dark"] .compass text { fill: #F0F0F0; }

/* 4 · work box, under a warm lamp */
:root[data-theme="dark"] .box-stage { background: radial-gradient(55% 45% at 50% 62%, rgba(255, 196, 120, .13), transparent 70%); }
:root[data-theme="dark"] .bi-list button { color: var(--ink); }
:root[data-theme="dark"] .bi-m b { color: var(--ink); }

/* 4b · brands */
:root[data-theme="dark"] .brand-sec { background: #222222; }
:root[data-theme="dark"] .bnav { background: rgba(42, 42, 42, .94); color: var(--ink); }
:root[data-theme="dark"] .site .chrome { background: #333333; border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .site .chrome span { background: #1E1E1E; color: var(--ink-2); }
:root[data-theme="dark"] .bh-cta { background: #FFD86B; color: #1A1A1A; }

/* 5 · LastLook, a lamp-lit study */
:root[data-theme="dark"] .ll { --ll-ink: #F3DFC3; background: linear-gradient(180deg, #1C140E, #24190F 60%, #1C140E); }
:root[data-theme="dark"] .ll .kicker, :root[data-theme="dark"] .ll-roles-k { color: #C9A27A; }
:root[data-theme="dark"] .ll-roles li span, :root[data-theme="dark"] .ll-stats span { color: #BFA184; }
:root[data-theme="dark"] .ll-stats li + li { border-color: rgba(243, 223, 195, .14); }
:root[data-theme="dark"] .ll-follow { color: #F3DFC3; }
:root[data-theme="dark"] .ll-store { background: #F3DFC3; color: #1C140E; }

/* stack */
:root[data-theme="dark"] .stack-pin { background: radial-gradient(90% 70% at 50% 62%, #2C2C2C 0%, var(--paper) 70%); }
:root[data-theme="dark"] .tool .tn { color: var(--ink-2); }
:root[data-theme="dark"] .stack .gift-tap { background: rgba(42, 42, 42, .92); color: var(--ink); border-color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .stack .gift-tap:hover { background: #333333; border-color: #FFD86B; }
:root[data-theme="dark"] .stack .gift-tap i { background: var(--ink-2); }

/* process, life, notes */
:root[data-theme="dark"] .proc-line .ln-bg { stroke: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .desk { filter: brightness(.82) saturate(.9); }
:root[data-theme="dark"] .nw-ghost { border-color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .nw-cta { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .nw-sheet { background: #2A2A2A; color: var(--ink); border-color: rgba(255, 255, 255, .08); }

/* the sky footer, at night */
:root[data-theme="dark"] .hello { background: linear-gradient(180deg, #0C0C0D 0%, #18181B 50%, #26262B 100%); }
:root[data-theme="dark"] .hello .skyimg { opacity: .25; filter: brightness(.55) saturate(.7); }
:root[data-theme="dark"] .hello::before { content: ""; position: absolute; inset: 0 0 40% 0; z-index: 1; pointer-events: none; animation: twinkle 5s ease-in-out infinite alternate; background-image:
  radial-gradient(1.5px 1.5px at 10% 12%, #fff, transparent), radial-gradient(1px 1px at 24% 30%, #fff, transparent), radial-gradient(1.3px 1.3px at 38% 8%, #fff, transparent), radial-gradient(1px 1px at 52% 22%, #fff, transparent),
  radial-gradient(1.6px 1.6px at 66% 10%, #fff, transparent), radial-gradient(1px 1px at 78% 28%, #fff, transparent), radial-gradient(1.2px 1.2px at 90% 6%, #fff, transparent), radial-gradient(1px 1px at 4% 34%, #fff, transparent); }
:root[data-theme="dark"] .hello h2 .rq { color: #fff; }
:root[data-theme="dark"] .clouds-foot img { filter: brightness(.4) saturate(.6); }
:root[data-theme="dark"] .keys-mat { background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 28px 28px, #222222; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .06); }
:root[data-theme="dark"] .knote { color: var(--ink) !important; }
:root[data-theme="dark"] kbd { background: #333333; color: var(--ink); border-color: rgba(255, 255, 255, .12); }

/* case study */
:root[data-theme="dark"] .cs.ed .cs-bar { background: rgba(26, 26, 26, .88); }
:root[data-theme="dark"] .cs-close { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .c3-big span { color: rgba(240, 240, 240, .14); }
:root[data-theme="dark"] .c3-big span.lit { color: var(--ink); }
:root[data-theme="dark"] .c3-sketch { background: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1.3px) 0 0 / 24px 24px; }
:root[data-theme="dark"] .mx-lines path { stroke: var(--ink); }
:root[data-theme="dark"] .c3-doodles * { stroke: #F0F0F0; }
:root[data-theme="dark"] .c3-doodles text { fill: #F0F0F0; stroke: none; }
:root[data-theme="dark"] .c3-tabs button.on, :root[data-theme="dark"] .c3-seg button.on, :root[data-theme="dark"] .c3-ptabs button.on, :root[data-theme="dark"] .c3-links button { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .c3-msg p { background: #333333; color: var(--ink); }

:root[data-theme="dark"] .brand-sec { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23222222'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .stack { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231A1A1A'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .ll { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231C140E'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .process { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231A1A1A'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .life { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23222222'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23222222'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .notes { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231A1A1A'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231A1A1A'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .c3-scene { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231A1A1A'%20filter='url(%23s)'/%3E%3C/svg%3E"); }

:root[data-theme="dark"] .journey { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231C1C1C'%20filter='url(%23s)'/%3E%3C/svg%3E"); --edge2: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%231C1C1C'%20filter='url(%23s)'/%3E%3C/svg%3E"); }
/* paper objects stay paper: they keep their light ink */
:root[data-theme="dark"] .about, :root[data-theme="dark"] .note, :root[data-theme="dark"] .scrap, :root[data-theme="dark"] .polaroid, :root[data-theme="dark"] .ticket, :root[data-theme="dark"] .c3-receipt, :root[data-theme="dark"] .sticky, :root[data-theme="dark"] .nw-card, :root[data-theme="dark"] .c3-board, :root[data-theme="dark"] .vn-ask, :root[data-theme="dark"] .pol-ph, :root[data-theme="dark"] .jc-ph, :root[data-theme="dark"] .c3-dphone, :root[data-theme="dark"] .c3-phone, :root[data-theme="dark"] .site .page, :root[data-theme="dark"] .card-ig, :root[data-theme="dark"] .c3-flip-in, :root[data-theme="dark"] .c3-panels figure { --ink: #13233A; --ink-2: #4B5D72; --card: #FFFDF7; --paper: #FFF8EC; --line: rgba(19, 35, 58, .14); color: var(--ink); }
:root[data-theme="dark"] .c3-five div { color: #13233A; }
/* marker highlights: a softer brush so the light text stays crisp */
:root[data-theme="dark"] .hl::before { opacity: .5; }
@media (max-width: 600px) { :root[data-theme="dark"] .tell .hl, :root[data-theme="dark"] .ll-tell .hl { background-image: linear-gradient(rgba(26, 26, 26, .55), rgba(26, 26, 26, .55)), var(--b); } }
/* map lights: city glow and the stop spotlight, after dark */
:root[data-theme="dark"] #cityG stop:nth-child(1) { stop-color: #262626; }
:root[data-theme="dark"] #cityG stop:nth-child(2) { stop-color: #2A2A2A; }
:root[data-theme="dark"] #cityG stop:nth-child(3) { stop-color: #1C1C1C; }
:root[data-theme="dark"] #spotG stop { stop-color: #1C1C1C; }
:root[data-theme="dark"] .spot2 { background: radial-gradient(circle var(--sr, 800px) at var(--sx, 50%) var(--sy, 50%), rgba(28, 28, 28, 0) 38%, rgba(28, 28, 28, .82) 100%); }

/* dark contrast pass: quiet text stays quiet, but always readable */
:root[data-theme="dark"] .sec-head p:not(.kicker), :root[data-theme="dark"] .bh-sub, :root[data-theme="dark"] .c3-p, :root[data-theme="dark"] .box-info .bi-p { color: #D2D2D2; }
:root[data-theme="dark"] .kicker { color: #D2D2D2; }
:root[data-theme="dark"] .c3-big span { color: rgba(245, 245, 245, .3); }
:root[data-theme="dark"] .nw-ghost { border-color: rgba(255, 255, 255, .22); color: #D2D2D2; }
:root[data-theme="dark"] .nw-ghost p, :root[data-theme="dark"] .nw-ghost span { color: #D2D2D2; }
:root[data-theme="dark"] .bi-m span, :root[data-theme="dark"] .bi-list button span, :root[data-theme="dark"] .tool .tn, :root[data-theme="dark"] .c3-steps span, :root[data-theme="dark"] .c3-legend, :root[data-theme="dark"] .c3-count { color: #B9B9B9; }
:root[data-theme="dark"] .bi-list:has(button.on) button:not(.on):not(:hover) { opacity: .7; }
:root[data-theme="dark"] .pnode span, :root[data-theme="dark"] .pnode p, :root[data-theme="dark"] .pnode em { color: #C7C7C7; }
:root[data-theme="dark"] .site .cap span, :root[data-theme="dark"] .c3-rc .rf small, :root[data-theme="dark"] .c3-galk small { color: #B9B9B9; }
:root[data-theme="dark"] .mk.dim { opacity: .65 !important; }
:root[data-theme="dark"] .jtl .yr, :root[data-theme="dark"] #jcCount { color: var(--ink); }
:root[data-theme="dark"] .desk-hint, :root[data-theme="dark"] .pick span, :root[data-theme="dark"] .vinyl > span, :root[data-theme="dark"] .ll-mag span { color: #FFF3DE; }
:root[data-theme="dark"] .nav a { color: #D2D2D2; } :root[data-theme="dark"] .nav a:hover, :root[data-theme="dark"] .nav a.on { color: #fff; }
:root[data-theme="dark"] .move-hint, :root[data-theme="dark"] .scroll-cue, :root[data-theme="dark"] .hint { color: #E6E6E6; }
:root[data-theme="dark"] .cs-meta b, :root[data-theme="dark"] .c3-ch, :root[data-theme="dark"] .c3-scrollhint { color: #D2D2D2; }
/* auto-mapped light surfaces */
:root[data-theme="dark"] .nav .ind { background: var(--card); }
:root[data-theme="dark"] .nav a.cta { color: #1A1A1A; }
:root[data-theme="dark"] .jc-share a:hover { background: var(--card); }
:root[data-theme="dark"] .mapctl .grp { background: var(--card); }
:root[data-theme="dark"] .mapctl .solo { background: var(--card); }
:root[data-theme="dark"] .jtl { background: var(--card); }
:root[data-theme="dark"] .jtl button::before { background: var(--card); }
:root[data-theme="dark"] .jcard { background: var(--card); }
:root[data-theme="dark"] .jcard .txt { color: var(--ink-2); }
:root[data-theme="dark"] .cs-hero .k i { background: var(--card); }
:root[data-theme="dark"] .foot { background: var(--card); }
:root[data-theme="dark"] .nw-sheet { background: var(--card); }
:root[data-theme="dark"] .nw-av { background: var(--card); }
:root[data-theme="dark"] .nw-f input:focus, :root[data-theme="dark"] .nw-f textarea:focus { background: var(--card); }
:root[data-theme="dark"] .c3-card { background: var(--card); }
:root[data-theme="dark"] .c3-chat { background: var(--card); }
:root[data-theme="dark"] .c3-tabs button { background: var(--card); }
:root[data-theme="dark"] .c3-tabs button.on { color: #1A1A1A; }
:root[data-theme="dark"] .c3-try input { background: var(--card); }
:root[data-theme="dark"] .c3-offers div { background: var(--card); }
:root[data-theme="dark"] .c3-kpi div { background: var(--card); }
:root[data-theme="dark"] .c3-ptabs button { background: var(--card); }
:root[data-theme="dark"] .c3-ptabs button.on { color: #1A1A1A; }
:root[data-theme="dark"] .c3-seg { background: var(--card); }
:root[data-theme="dark"] .c3-seg button.on { color: #1A1A1A; }
:root[data-theme="dark"] .c3-rc { background: var(--card); }
:root[data-theme="dark"] .c3-links button { color: #1A1A1A; }
:root[data-theme="dark"] .journey.jcm .jcar { background: var(--card); }
:root[data-theme="dark"] .jcar .nx { color: #1A1A1A; }
:root[data-theme="dark"] .bnav { background: var(--card); }
:root[data-theme="dark"] .journey.over .jtl-view { color: #1A1A1A; }
@media (max-width: 860px) {
  :root[data-theme="dark"] .bi-list button { background: var(--card); }
}

/* the nav is always on screen, so bottom controls sit above it */
:root { --navh: calc(env(safe-area-inset-bottom, 0px) + 92px); }
.jtl, .journey.jcm .jcar, .journey.over .jtl-view { bottom: var(--navh) !important; }
.journey.jcm .jcard { bottom: calc(var(--navh) + 80px) !important; }
@media (min-width: 861px) { .jcard { max-height: calc(100svh - 260px); } .mapctl { bottom: calc(var(--navh) + 60px); } }
@media (max-width: 860px) { .journey.jcm .jcard { max-height: calc(100svh - 300px); } .box-info { bottom: var(--navh) !important; } }
.box-info { bottom: var(--navh) !important; }

/* dark · round 3: tinted surfaces, tooltips, and the simple case studies */
:root[data-theme="dark"] .jc-share { background: color-mix(in srgb, var(--c) 16%, #232323); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
:root[data-theme="dark"] .jc-share p, :root[data-theme="dark"] .jc-share a { color: #F5F5F5; }
:root[data-theme="dark"] .jc-share a span, :root[data-theme="dark"] .jc-share a em { color: #C4C4C4; }
:root[data-theme="dark"] .jc-share a:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .tool-tip { background: rgba(38, 38, 38, .96); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .bi-list button b { color: color-mix(in srgb, var(--c) 70%, #fff); }
:root[data-theme="dark"] .scrap span { color: #C9C9C9; }
:root[data-theme="dark"] .c3-ticket { --ink: #13233A; --ink-2: #4B5D72; color: var(--ink); }
:root[data-theme="dark"] .c3-mx .win b { border-color: #FF7A4F; }
:root[data-theme="dark"] .c3-stxt .chal { color: #FDBA74; background: rgba(251, 146, 60, .1); border-left-color: #FB923C; }
/* the four simpler case studies: their light tint becomes a deep tint of the same colour */
:root[data-theme="dark"] .cs:not(.ed) { background: color-mix(in srgb, var(--c) 13%, #161616); color: var(--ink); }
:root[data-theme="dark"] .cs:not(.ed) .cs-bar { background: linear-gradient(color-mix(in srgb, var(--c) 13%, #161616) 60%, transparent); }
:root[data-theme="dark"] .cs-full { background: rgba(255, 255, 255, .1); color: #F5F5F5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .cs-full:hover { background: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .cs-hero .k { color: color-mix(in srgb, var(--c) 62%, #fff); }
:root[data-theme="dark"] .cs-hero .pitch { color: #D8D8D8; }
:root[data-theme="dark"] .cs-shots img { border-color: #2E2E2E; background: #2E2E2E; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .cs-body { background: var(--paper); }
:root[data-theme="dark"] .cs-res li { background: color-mix(in srgb, var(--c) 16%, #232323); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
:root[data-theme="dark"] .cs-res b { color: color-mix(in srgb, var(--c) 55%, #fff); }
:root[data-theme="dark"] .cs-res span { color: #C8C8C8; }
:root[data-theme="dark"] .cs-sec ol li::before { color: color-mix(in srgb, var(--c) 60%, #fff); }
:root[data-theme="dark"] .cs-end button { background: rgba(255, 255, 255, .08); color: #F5F5F5; }

/* dark · brighter accents: every coloured word is lifted toward white so it reads crisply on charcoal */
:root[data-theme="dark"] { --ink-2: #CACACA; --coral: #FF8C70; --sky: #6CB4FF; --grass: #7FD27A; --lilac: #CDBDFF; }
:root[data-theme="dark"] .cs.ed { --ed: #FF8257; }
:root[data-theme="dark"] .c3-dphone, :root[data-theme="dark"] .c3-phone, :root[data-theme="dark"] .c3-receipt, :root[data-theme="dark"] .c3-flip-in, :root[data-theme="dark"] .c3-panels figure, :root[data-theme="dark"] .c3-board, :root[data-theme="dark"] .c3-ticket { --ed: #F4511E; --coral: #FF6B4A; }
:root[data-theme="dark"] .jc-top em, :root[data-theme="dark"] .jc-top p b, :root[data-theme="dark"] .jc-stats b, :root[data-theme="dark"] .cbtn.ghost, :root[data-theme="dark"] .box-info .bi-k, :root[data-theme="dark"] .bi-m b, :root[data-theme="dark"] .bi-list button b, :root[data-theme="dark"] .box-cap b, :root[data-theme="dark"] .cs-hero .k, :root[data-theme="dark"] .cs-sec ol li::before, :root[data-theme="dark"] .cs-res b { color: color-mix(in srgb, var(--c, #FF8C70) 62%, #fff) !important; }
:root[data-theme="dark"] .bi-list button:hover, :root[data-theme="dark"] .bi-list button.on { color: color-mix(in srgb, var(--c) 55%, #fff); }
:root[data-theme="dark"] .c3-stxt small, :root[data-theme="dark"] .c3-twist, :root[data-theme="dark"] .c3-res .big, :root[data-theme="dark"] .c3-trylbl, :root[data-theme="dark"] .c3-rc .rh b, :root[data-theme="dark"] .c3-rc .rd, :root[data-theme="dark"] #c3Res.after .c3-rc .rv, :root[data-theme="dark"] .c3-galk small, :root[data-theme="dark"] .c3-fnote { color: var(--ed); }
:root[data-theme="dark"] .c3-rc .rd { background: rgba(255, 130, 87, .16); }
:root[data-theme="dark"] .bi-m span, :root[data-theme="dark"] .bi-list button span, :root[data-theme="dark"] .tool .tn, :root[data-theme="dark"] .c3-steps span, :root[data-theme="dark"] .c3-legend, :root[data-theme="dark"] .c3-count, :root[data-theme="dark"] .c3-p, :root[data-theme="dark"] .c3-mxcap, :root[data-theme="dark"] .c3-stxt li { color: #CDCDCD; }
:root[data-theme="dark"] .tool-tip p { color: #DADADA; }
:root[data-theme="dark"] .tool-tip b { color: #FFFFFF; }
:root[data-theme="dark"] .tt-h span:not(.tt-i) { color: #FFD86B; }
:root[data-theme="dark"] .c3-offers div b { color: #5FD394; }
:root[data-theme="dark"] .ll .kicker, :root[data-theme="dark"] .ll-roles-k { color: #E8BF8E; }
:root[data-theme="dark"] .c3-rc .rd { color: #FF9A75; }

/* journey on phones: a compact sheet so the map stays the hero; swipe follows the finger */
.jc-more { display: none; }
.journey.jcm .j-pin { touch-action: pan-y; }
.journey.jcm .jcard .jc-in { will-change: transform, opacity; transition: none; }
@media (max-width: 860px) {
  .journey.jcm .jcard { max-height: none !important; overflow: hidden; transition: opacity .5s var(--ease), transform .8s var(--ease), box-shadow .4s; }
  .journey.jcm .jcard .jc-top { padding: 12px 16px; gap: 12px; }
  .journey.jcm .jcard .jc-top .tile { width: 40px; height: 40px; }
  .journey.jcm .jcard .jc-bd { padding: 12px 16px 14px; }
  .journey.jcm .jcard h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.12; }
  .journey.jcm .jcard .txt { margin: 0; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .journey.jcm .jcard:not(.open) .jc-bd > :not(h3):not(.txt):not(.jc-more) { display: none; }
  .journey.jcm .jc-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 14px; border-radius: 999px; font: 700 13px/1 var(--sans); color: color-mix(in srgb, var(--c) 75%, var(--ink)); background: color-mix(in srgb, var(--c) 12%, transparent); }
  .journey.jcm .jc-more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
  .journey.jcm .jcard.open { overflow-y: auto; max-height: calc(100svh - var(--navh) - 150px) !important; }
  .journey.jcm .jcard.open .txt { -webkit-line-clamp: unset; display: block; }
  .journey.jcm .jcard.open .jc-more { order: 9; }
  .journey.jcm .jcard.open .jc-more::after { transform: translateY(2px) rotate(-135deg); }
  .journey.jcm .jcard.open .jc-bd { display: flex; flex-direction: column; align-items: flex-start; }
  .journey.jcm .jcard.open .jc-bd > * { align-self: stretch; } .journey.jcm .jcard.open .jc-more { align-self: flex-start; }
}
:root[data-theme="dark"] .journey.jcm .jc-more { color: color-mix(in srgb, var(--c) 60%, #fff); background: color-mix(in srgb, var(--c) 22%, transparent); }

/* dark · the note form */
:root[data-theme="dark"] .nw-modal { background: rgba(8, 8, 8, .62); }
:root[data-theme="dark"] .nw-sheet { background: #242424; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .nw-k { color: #FFD86B; }
:root[data-theme="dark"] .nw-x { background: rgba(255, 255, 255, .08); color: #F5F5F5; }
:root[data-theme="dark"] .nw-x:hover { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .nw-av { box-shadow: 0 0 0 4px #3A3A3A, 0 10px 18px -8px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .nw-face-b button, :root[data-theme="dark"] .nw-up { background: #333; color: #F5F5F5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .nw-face-b button:hover, :root[data-theme="dark"] .nw-up:hover { background: #3D3D3D; }
:root[data-theme="dark"] .nw-up:focus-within { outline-color: #FFD86B; }
:root[data-theme="dark"] .nw-f span { color: #F0F0F0; }
:root[data-theme="dark"] .nw-f em { color: #B5B5B5; }
:root[data-theme="dark"] .nw-f input, :root[data-theme="dark"] .nw-f textarea { background: #1B1B1B; color: #F5F5F5; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); caret-color: #FFD86B; }
:root[data-theme="dark"] .nw-f input::placeholder, :root[data-theme="dark"] .nw-f textarea::placeholder { color: #8C8C8C; }
:root[data-theme="dark"] .nw-f input:focus, :root[data-theme="dark"] .nw-f textarea:focus { background: #1B1B1B; box-shadow: inset 0 0 0 2px #FFD86B; }
:root[data-theme="dark"] .nw-err { color: #FF8A80; }
:root[data-theme="dark"] .nw-go { background: #FFD86B; color: #1A1A1A; }
:root[data-theme="dark"] .nw-fine { color: #B5B5B5; }

/* where do you work: company + role, with logos */
.nw-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nw-two .nw-f { min-width: 0; }
.nw-f em { font-size: 12.5px; }
.nw-co { position: relative; }
.nw-co.has input { padding-left: 46px; }
.nw-lg { position: absolute; left: 9px; top: 50%; translate: 0 -50%; display: none; pointer-events: none; }
.nw-lg.on { display: block; }
.co { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bh, #13233A); font: 800 12px/1 var(--sans); font-style: normal; color: #fff; overflow: hidden; vertical-align: middle; }
.co img { width: 62%; height: 62%; filter: brightness(0) invert(1); }
.co.mono { background: #E9E3D8; color: #13233A; }
.nw-sug { position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 24px 40px -18px rgba(19, 35, 58, .45), 0 0 0 1px rgba(19, 35, 58, .08); max-height: 260px; overflow-y: auto; }
.nw-sug li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font: 600 14.5px/1.2 var(--sans); cursor: pointer; }
.nw-sug li:hover, .nw-sug li.on { background: #F4EFE6; }
.nw-work { display: flex !important; align-items: center; gap: 6px; margin-top: 3px; }
.nw-work .co { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
.nw-work span { min-width: 0; white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; }
.nw-work { align-items: flex-start !important; } .nw-work .co { flex: none; margin-top: -1px; }
.nw-by > span:last-child { flex: 1; min-width: 0; }
.nw-work em { font-style: normal; font-weight: 700; color: #2B3A4E; }
.nw-card { width: 300px; }
@media (min-width: 860px) {
  .nw-card { height: 236px; min-height: 0; display: flex; flex-direction: column; }
  .nw-card p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .nw-card .nw-by { margin-top: auto; padding-top: 10px; }
  .nw-card .nw-work, .nw-card .nw-work span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0; }
  .nw-card.nw-ghost { display: grid; place-items: center; }
}
@media (max-width: 480px) { .nw-two { grid-template-columns: 1fr; gap: 0; } }
:root[data-theme="dark"] .nw-sug { background: #2E2E2E; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .nw-sug li { color: #F5F5F5; }
:root[data-theme="dark"] .nw-sug li:hover, :root[data-theme="dark"] .nw-sug li.on { background: #3A3A3A; }
:root[data-theme="dark"] .nw-sheet .co.mono { background: #444; color: #F5F5F5; }

/* the box: light spills out when it opens */
.box-floor::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 50%, rgba(255, 214, 140, .95), rgba(255, 190, 110, .35) 55%, transparent 80%); opacity: 0; transition: opacity 1.6s var(--ease) .5s; }
.box-stage.opened .box-floor::after { opacity: .9; }
.box-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 34% at 50% 58%, rgba(255, 200, 120, .32), transparent 72%); opacity: 0; transition: opacity 2s var(--ease) .6s; }
.box-stage.opened::before { opacity: 1; }
.box3 { will-change: transform; }
:root[data-theme="dark"] .box-stage::before { background: radial-gradient(38% 34% at 50% 58%, rgba(255, 196, 110, .22), transparent 72%); }

/* place markers: anchored on each building, they move with it */
.pin { z-index: 4; padding-bottom: 0; }
.pin b { gap: 7px; padding: 5px 13px 5px 5px; font-size: 13.5px; position: relative; }
.pin b > img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--c); }
.pin b::before { display: none; }
.pin b::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.pin::after { width: 2px; height: 14px; margin-top: 2px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)); }
.pin .pd { position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff; }
.pin .pd::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); animation: pdpulse 2.4s var(--ease) infinite; }
@keyframes pdpulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
:root[data-theme="dark"] .pin::after { background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); }
:root[data-theme="dark"] .pin .pd { box-shadow: 0 0 0 3px #2A2A2A; }

/* the music station on the hill */
.radio { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; filter: saturate(.86) sepia(.1) contrast(.97) drop-shadow(0 6px 8px rgba(30, 30, 10, .25)); }
.radio .rs { display: block; width: 100%; height: auto; overflow: visible; }
.rs-disc { transform-box: fill-box; transform-origin: center; animation: rsspin 3.2s linear infinite; animation-play-state: paused; }
.radio.on .rs-disc { animation-play-state: running; }
.radio .rs { transform-origin: 50% 100%; }
.radio.on .rs { animation: rbeat 1.1s ease-in-out infinite alternate; }
@keyframes rbeat { from { transform: scale(1); } to { transform: scale(1.025, .985); } }
.radio::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 18, 8, .45), transparent); z-index: -1; }
@keyframes rsspin { to { transform: rotate(360deg); } }
.radio .rn { position: absolute; left: 70%; top: 0; width: 60%; height: 60%; pointer-events: none; }
.radio .rn i { position: absolute; left: 0; bottom: 0; font: 700 clamp(12px, 1.2vw, 20px)/1 var(--sans); font-style: normal; color: #fff; text-shadow: 0 2px 6px rgba(40, 20, 80, .45); opacity: 0; }
.radio.on .rn i { animation: rnote 3.6s var(--ease) infinite; }
.radio.on .rn i:nth-child(2) { animation-delay: .9s; left: 30%; } .radio.on .rn i:nth-child(3) { animation-delay: 1.8s; left: -10%; } .radio.on .rn i:nth-child(4) { animation-delay: 2.7s; left: 45%; }
@keyframes rnote { 0% { opacity: 0; transform: translate(0, 10px) rotate(-10deg) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -70px) rotate(14deg) scale(1.15); } }
.rpin .rpi { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; }
.rpin .rpi svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rpin .eq { display: none; align-items: flex-end; gap: 2px; height: 12px; margin-left: 2px; }
.rpin .eq i, .np-b i { width: 3px; border-radius: 2px; background: var(--c, #7B5CD6); animation: eqb .9s ease-in-out infinite alternate; }
.rpin .eq i:nth-child(1) { height: 6px; } .rpin .eq i:nth-child(2) { height: 12px; animation-delay: .3s; } .rpin .eq i:nth-child(3) { height: 8px; animation-delay: .6s; }
@keyframes eqb { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.rpin.on .eq { display: inline-flex; }
.rpin .eq i { transform-origin: 50% 100%; }
/* now playing, reachable from anywhere */
.np { position: fixed; z-index: 70; top: calc(env(safe-area-inset-top, 0px) + 14px); right: calc(clamp(14px, 2.4vw, 28px) + 58px); height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px 0 8px; border-radius: 999px; background: rgba(255, 253, 247, .9); color: var(--ink); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font: 700 13.5px/1 var(--sans); --c: #7B5CD6; transition: transform .4s var(--spring), opacity .4s; }
.np[hidden] { display: none; }
.np:hover { transform: translateY(-2px); }
.np-d { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle, #E4402A 0 26%, #1a1a1a 27% 30%, #2a2a2a 31% 45%, #151515 46% 60%, #2a2a2a 61% 75%, #111 76%); animation: rsspin 3.2s linear infinite; }
.np.paused .np-d, .np.paused .np-b i { animation-play-state: paused; }
.np-b { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.np-b i { height: 14px; transform-origin: 50% 100%; } .np-b i:nth-child(2) { animation-delay: .35s; }
.np.paused .np-b { gap: 0; } .np.paused .np-b i { display: none; }
.np.paused .np-b::before { content: ""; border-left: 11px solid #7B5CD6; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.np:not(.paused) .np-b i { width: 3px; }
@media (max-width: 859px) { .np { display: none !important; } }
:root[data-theme="dark"] .np { background: rgba(42, 42, 42, .88); color: #F5F5F5; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 30px -10px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .radio .rs { filter: brightness(.75) saturate(.9); }

/* work: the section heading leads the box stage, centred */
.work { padding-top: 8vh; }
.work > .wrap { display: none; }
.box-info { opacity: 1 !important; translate: none !important; }
.box-info .bi-list { opacity: 0; translate: 0 14px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.box-info.in .bi-list { opacity: 1; translate: 0 0; }
.box-info .bi-head { display: grid; justify-items: center; gap: 8px; margin: 0 auto; text-align: center; }
.box-info .bi-head .kicker { margin: 0; }
.box-info .bi-head h2 { max-width: 22ch; font-size: clamp(2rem, 3.6vw, 3.5rem); text-wrap: balance; }
.box-info .bi-head p:not(.kicker) { max-width: 64ch; font-size: clamp(17px, 1.35vw, 21px); }
@media (max-width: 860px) { .box-info .bi-head { padding: 0 16px; } .box-info .bi-head h2 { font-size: clamp(1.7rem, 7vw, 2.3rem); } .box-info .bi-head p:not(.kicker) { font-size: 15.5px; } }

/* map: the opening overview stays clean until you start scrolling */
.journey.jstart .mk .nm { opacity: 0 !important; transform: translateX(-4px) !important; }

/* the hint rides on the EazyDiner marker */
.pin .hint { position: absolute; right: calc(100% + 4px); top: 50%; translate: 0 -62%; display: flex; align-items: center; gap: 4px; white-space: nowrap; pointer-events: none; font: 400 19px/1 var(--serif); font-size-adjust: .46; color: #fff; text-shadow: 0 2px 12px rgba(10, 40, 60, .65); transition: opacity .5s; }
.pin .hint svg { width: 40px; height: 22px; margin-bottom: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.pin:hover .hint, .pin.hov .hint { opacity: 0; }
/* birds wander around the heading */
.sky-birds { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.sky-birds .sb { position: absolute; left: 0; top: 0; will-change: transform; }
.sky-birds svg { display: block; width: 100%; height: auto; overflow: visible; }
.sky-birds path { fill: none; stroke: #26303B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sky-birds .w { transform-origin: 12px 7px; animation: sbflap var(--fl, .5s) ease-in-out infinite alternate; }
.sky-birds .sb.glide .w { animation-play-state: paused; }
@keyframes sbflap { from { transform: scaleY(1); } to { transform: scaleY(-.55); } }
.cam.flying ~ .sky-birds { opacity: 0; transition: opacity .6s; }
:root[data-theme="dark"] .sky-birds path { stroke: #D9D9D9; }
:root[data-theme="dark"] .sky-birds { opacity: .75; }

/* hero: the key to the valley */
.hero-key { display: inline-flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 9px 16px 9px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); font: 500 clamp(14px, 1.1vw, 16.5px)/1.35 var(--sans); color: #fff; text-shadow: 0 1px 8px rgba(10, 40, 60, .45); max-width: 100%; }
.hero-key svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #fff; fill: none; stroke: #E4402A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.hero-key b { font-weight: 800; }
@media (max-width: 600px) { .hero-key { font-size: 13.5px; border-radius: 16px; align-items: flex-start; } }
/* markers read like a timeline: chapter number and year */
.pin .pnum { order: -1; display: grid; place-items: center; min-width: 18px; height: 18px; margin-right: -2px; border-radius: 50%; background: var(--c); color: #fff; font: 800 10.5px/1 var(--sans); font-style: normal; }
.pin b > img { order: -2; }
.pin .pyr { margin-left: 2px; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, transparent); color: color-mix(in srgb, var(--c) 80%, var(--ink)); font: 700 11px/1 var(--sans); }
:root[data-theme="dark"] .pin .pyr { color: color-mix(in srgb, var(--c) 55%, #fff); background: color-mix(in srgb, var(--c) 22%, transparent); }
/* the chapter card: story first, then the gallery, then one clear next step */
.sheet .lead { margin: 6px 0 0; font: 400 24px/1.2 var(--serif); font-size-adjust: .46; }
.sheet .did { margin: 10px 0 0; }
.sheet .did p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.sheet .did b { color: var(--ink); font-weight: 700; }
.s-gal { margin: 12px 0 2px; }
.s-gal > p { margin: 0 0 10px; font: 700 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.s-gal > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sheet .nums { margin-top: 14px; }
.sheet .row { gap: 10px; }
.s-cta { flex: 1 1 auto; justify-content: center; }

/* the chapter card's next step stays in reach */
.sheet .row { position: sticky; bottom: -24px; z-index: 2; margin: 14px -24px -24px; padding: 14px 24px 20px; background: linear-gradient(transparent, var(--card) 26%); }
@media (max-width: 860px) { .sheet .row { margin: 12px -20px -20px; padding: 12px 20px 16px; bottom: -20px; } .pin .hint { display: none; } }

/* simpler, quieter: glass markers, one font in the cards, one short CTA */
.pin b { background: rgba(18, 26, 34, .36); color: #fff; backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 10px 24px -12px rgba(10, 30, 50, .55); text-shadow: 0 1px 6px rgba(10, 30, 50, .45); }
.pin b::after { background: rgba(18, 26, 34, .36); box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .25); }
.pin .pyr { background: rgba(255, 255, 255, .18); color: #fff; }
.pin:hover b, .pin.hov b, .pin.on b { background: rgba(18, 26, 34, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 14px 26px -12px rgba(10, 30, 50, .6); }
:root[data-theme="dark"] .pin b { background: rgba(30, 30, 30, .38); color: #F5F5F5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 24px -12px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .pin b::after { background: rgba(30, 30, 30, .38); }
:root[data-theme="dark"] .pin .pyr { background: rgba(255, 255, 255, .12); color: #F5F5F5; }
.hero-key { gap: 10px; padding: 8px 16px 8px 14px; background: rgba(18, 26, 34, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); font-weight: 500; }
.hero-key i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FFD23F; box-shadow: 0 0 0 3px rgba(255, 210, 63, .3); }
.hero-key i::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #FFD23F; animation: pdpulse 2.4s var(--ease) infinite; }
.hero-key u { text-decoration: none; font-weight: 700; border-bottom: 1.5px solid rgba(255, 255, 255, .7); }
.sheet, .sheet * { font-family: var(--sans) !important; }
.sheet .lead { font: 700 19px/1.3 var(--sans); font-style: normal; letter-spacing: -.01em; margin-top: 8px; }
.sheet .jc-ph small { font: 500 10.5px/1 var(--sans); font-style: normal; }
.sheet .row { justify-content: flex-start; }
.sheet .row[hidden], .sheet .nums[hidden] { display: none; }
.s-cta { flex: 0 0 auto; padding-inline: 18px; }

/* the switch says where it takes you: Night in the day, Day at night */
.theme-btn { width: auto; padding: 0 17px 0 13px; gap: 8px; display: inline-flex; align-items: center; border-radius: 999px; }
.theme-btn:hover { transform: translateY(-2px); }
.theme-btn .ti { position: relative; width: 22px; height: 22px; flex: none; overflow: hidden; }
.theme-btn .ti svg { left: 0; top: 0; }
.theme-btn .tl { position: relative; display: grid; overflow: hidden; height: 18px; font: 700 14.5px/18px var(--sans); }
.theme-btn .tl b { grid-area: 1 / 1; font-weight: 700; transition: transform .7s var(--spring), opacity .4s; }
.theme-btn .tl-d { transform: translateY(100%); opacity: 0; }
:root[data-theme="dark"] .theme-btn .tl-n { transform: translateY(-100%); opacity: 0; }
:root[data-theme="dark"] .theme-btn .tl-d { transform: none; opacity: 1; }
.np { right: calc(clamp(14px, 2.4vw, 28px) + 112px); }
@media (min-width: 860px) {   /* three fixed slots, right to left: theme switch, music, badge. Nothing here changes width, so nothing ever shifts */
  .theme-btn { width: 112px; padding: 0 14px 0 12px; justify-content: center; }
  .np { right: calc(clamp(14px, 2.4vw, 28px) + 122px); width: auto; }
  .np-t { white-space: nowrap; }
  .wop-badge { right: calc(clamp(14px, 2.4vw, 28px) + 296px); }
}
@media (max-width: 860px) { .theme-btn { height: 44px; width: 44px; padding: 0; justify-content: center; } .theme-btn .tl { display: none; } .np { right: calc(clamp(14px, 2.4vw, 28px) + 60px); } }

/* a little plane crosses the sky, slowly */
.sky-plane { position: absolute; z-index: 3; left: 0; top: clamp(70px, 9vh, 110px); width: clamp(84px, 7vw, 124px); pointer-events: none; animation: spfly 64s linear infinite; animation-delay: -18s; will-change: transform; }
.sp-in { position: relative; animation: spbob 7s ease-in-out infinite; }
.sky-plane svg { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(20, 40, 70, .22)); }
.sp-trail { position: absolute; right: 90%; top: 50%; width: 20vw; height: 4px; margin-top: -2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 55%); filter: blur(1.2px); }
.sp-prop { transform-box: fill-box; transform-origin: center; animation: spprop .14s linear infinite; }
.sp-l { opacity: 0; }
@keyframes spfly { from { transform: translate3d(-30vw, 0, 0) rotate(-2deg); } to { transform: translate3d(118vw, -4vh, 0) rotate(-2deg); } }
@keyframes spbob { 50% { transform: translateY(-5px) rotate(.6deg); } }
@keyframes spprop { 50% { transform: scaleY(.25); } }
@keyframes splight { 0%, 70%, 100% { opacity: 0; } 78% { opacity: 1; } }
.cam.flying ~ .sky-plane { opacity: 0; transition: opacity .6s; }
:root[data-theme="dark"] .sky-plane svg { filter: brightness(.62) saturate(.8) drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
:root[data-theme="dark"] .sp-trail { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22)); }
:root[data-theme="dark"] .sp-l { animation: splight 1.6s linear infinite; filter: brightness(1.8); } :root[data-theme="dark"] .sp-l.g { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) { .sky-plane { display: none; } }
@media (max-width: 860px) { .sky-plane { top: calc(env(safe-area-inset-top, 0px) + 64px); animation-duration: 40s; } }

/* the plane tows a banner */
.sp-trail { display: none; }
.sp-ban { position: absolute; right: 90%; top: 4%; display: flex; flex-direction: row-reverse; align-items: center; transform-origin: 100% 50%; animation: spsway 3.2s ease-in-out infinite; }
.sp-rope { width: clamp(26px, 2.6vw, 40px); height: 18px; overflow: visible; flex: none; }
.sp-rope path { fill: none; stroke: #6B5B45; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sp-flag { position: relative; padding: 6px 16px 6px 22px; background: linear-gradient(180deg, #FFF8EA, #EFE3CB); border-top: 3px solid #D2483A; border-bottom: 3px solid #D2483A; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); box-shadow: 0 8px 14px -8px rgba(20, 40, 70, .4); transform-origin: 100% 50%; animation: spwave 1.8s ease-in-out infinite; white-space: nowrap; }
.sp-flag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 10%, rgba(120, 90, 50, .14) 22%, transparent 34%, transparent 52%, rgba(120, 90, 50, .12) 64%, transparent 76%); background-size: 200% 100%; animation: spfold 1.8s linear infinite; pointer-events: none; }
.sp-flag span { font: 700 clamp(12px, 1vw, 15px)/1 var(--hand); letter-spacing: .02em; color: #2B3A4E; }
@keyframes spwave { 0%, 100% { transform: skewY(-1.6deg) scaleY(1); } 50% { transform: skewY(1.6deg) scaleY(.94); } }
@keyframes spfold { to { background-position: -200% 0; } }
@keyframes spsway { 50% { transform: translateY(3px) rotate(-1.2deg); } }
:root[data-theme="dark"] .sp-flag { filter: brightness(.72); }
:root[data-theme="dark"] .sp-rope path { stroke: #9C8E79; }
@media (max-width: 860px) {
  /* phones: the plane gets its own lane between the header and the greeting */
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 124px) !important; }
  .sky-plane { top: calc(env(safe-area-inset-top, 0px) + 80px); width: 64px; }
  .sp-ban { top: -4%; }
  .sp-rope { width: 20px; }
  .sp-flag { padding: 4px 11px 4px 16px; border-width: 2px; }
  .sp-flag span { font-size: 11.5px; line-height: 1; }
}

/* the banner rides level with the plane: straight rope, no swing */
.sp-ban { top: 50% !important; translate: 0 -50%; animation: none !important; }
.sp-flag { animation: none !important; }

/* while a building is open, everything in the sky holds still where it is */
.stage.still .sky-plane, .stage.still .sky-plane *, .stage.still .sky-birds * { animation-play-state: paused !important; }
.stage.still .sky-plane, .stage.still .sky-birds { opacity: 0; transition: opacity .5s; }

/* banner sits closer behind the plane */
.sp-ban { right: 84% !important; }
.sp-rope { width: clamp(12px, 1.1vw, 18px) !important; }
@media (max-width: 860px) { .sp-rope { width: 10px !important; } }

@media (max-width: 860px) {
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 138px) !important; }
  .sky-plane { top: calc(env(safe-area-inset-top, 0px) + 82px) !important; }
  .sp-flag { padding: 3px 10px 3px 15px !important; border-width: 2px !important; }
  .sp-flag span { font-size: 11px !important; line-height: 1.1 !important; }
}

.sp-flag { line-height: 1; font-size: 0; }
.sp-flag span { display: block; }

@keyframes spflyflat { from { transform: translate3d(-40vw, 0, 0); } to { transform: translate3d(118vw, 0, 0); } }
@media (max-width: 860px) {
  .sky-plane { top: calc(env(safe-area-inset-top, 0px) + 84px) !important; animation-name: spflyflat !important; }
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 140px) !important; }
}

/* galleries hold three or four polaroids */
.jc-gal > div, .s-gal > div { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) !important; gap: 10px; }
.journey.jcm .jc-gal > div { grid-template-columns: repeat(var(--n, 3), minmax(0, 90px)) !important; }
/* journey card: the CTA stays pinned at the bottom of the card, always in view */
.jc-act { position: sticky; bottom: 0; z-index: 2; margin: 18px -26px -26px !important; padding: 16px 26px 22px; background: linear-gradient(rgba(255, 255, 255, 0), #fff 34%); }
:root[data-theme="dark"] .jc-act { background: linear-gradient(rgba(42, 42, 42, 0), var(--card) 34%); }
@media (max-width: 860px) {
  .jc-act { margin: 10px -16px -14px !important; padding: 10px 16px 14px; }
  .journey.jcm .jcard:not(.open) .jc-bd > .jc-act { display: flex !important; position: static; margin: 10px 0 0 !important; padding: 0; background: none; }
  .journey.jcm .jcard:not(.open) .jc-bd { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
  .journey.jcm .jcard:not(.open) .jc-bd > h3, .journey.jcm .jcard:not(.open) .jc-bd > .txt { flex-basis: 100%; }
}


/* =========================================================
   MakeMyTrip · Special Requests — a stay at a hotel
   ========================================================= */
.cs.mm { --mr: #E4262C; --mr2: #FF5A4F; --gold: #C9962E; --ed: #E4262C; background: var(--paper); color: var(--ink); overflow-y: auto; overflow-x: hidden; }
.cs.mm .mm-bar { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root[data-theme="dark"] .cs.mm, :root[data-theme="dark"] .cs.mm .mm-bar { background: var(--paper) !important; }
:root[data-theme="dark"] .cs.mm .mm-bar { background: color-mix(in srgb, var(--paper) 88%, transparent) !important; }
.mm-bar .cs-close { white-space: nowrap; }
.mm-bk { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1 var(--sans); color: var(--ink-2); }
.mm-bk img { height: 22px; width: auto; }
div.mm { overflow-x: clip; }
.mm [data-rv] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate 1s var(--ease); }
.mm [data-rv].in { opacity: 1; translate: 0 0; }
.mm-sec { position: relative; max-width: 76rem; margin: 0 auto; padding: 16vh clamp(18px, 4vw, 48px) 0; box-sizing: border-box; }
.mm-pl { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mm-pl span { padding: 7px 11px; border-radius: 8px; background: linear-gradient(180deg, #E9C46A, #C9962E); color: #3B2A0B; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 12px -8px rgba(120, 80, 10, .6); letter-spacing: .08em; }
.mm-h { margin: 0 0 4vh; font: 800 clamp(30px, 4.4vw, 60px)/1.02 var(--sans); letter-spacing: -.045em; max-width: 22ch; text-wrap: balance; }
.mm-p { margin: -2vh 0 4vh; max-width: 60ch; font: 400 clamp(16px, 1.25vw, 19px)/1.6 var(--sans); color: var(--ink-2); }

/* hero: words left, a live phone right */
.mm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 70px); max-width: 76rem; margin: 0 auto; min-height: calc(100svh - 80px); padding: 4vh clamp(18px, 4vw, 48px); box-sizing: border-box; }
.mm-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 90vh; z-index: -1; background: radial-gradient(60% 60% at 75% 30%, color-mix(in srgb, var(--mr) 10%, transparent), transparent 70%); }
.mm-k { margin: 0; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mr); }
.mm-t { margin: 18px 0 0; font: 800 clamp(42px, 5vw, 78px)/.98 var(--sans); letter-spacing: -.055em; }
.mm-t em { font-style: normal; color: var(--mr); }
.mm-lead { margin: 22px 0 0; max-width: 44ch; font: 400 clamp(17px, 1.35vw, 21px)/1.5 var(--sans); color: var(--ink-2); }
.mm-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.mm-meta li { padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1 var(--sans); }
.mm-meta b { margin-right: 8px; font-weight: 700; color: var(--ink-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.mm-demo { display: grid; justify-items: center; gap: 16px; }
.mm-dcap { margin: 0; min-height: 2.6em; max-width: 30ch; text-align: center; font: 600 15px/1.35 var(--sans); color: var(--ink-2); }
.mm-ph { position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 18.5; border-radius: 44px; padding: 12px; box-sizing: border-box; background: #14161A; box-shadow: 0 50px 80px -40px rgba(19, 35, 58, .55), inset 0 0 0 2px #2C3038; overflow: hidden; }
.mm-ph > * { position: relative; }
.ph-top { display: flex; justify-content: space-between; align-items: center; height: 26px; padding: 0 18px; border-radius: 32px 32px 0 0; background: #F4F5F8; font: 700 12px/1 var(--sans); color: #13233A; }
.ph-top i { width: 70px; height: 18px; border-radius: 10px; background: #14161A; position: absolute; left: 50%; top: 4px; margin-left: -35px; }
.ph-app { height: calc(100% - 26px); padding: 14px 14px 0; border-radius: 0 0 32px 32px; background: #F4F5F8; box-sizing: border-box; color: #13233A; display: flex; flex-direction: column; gap: 10px; }
.ph-k { margin: 0; font: 800 15px/1 var(--sans); }
.ph-stay { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(19, 35, 58, .08); }
.ph-stay b { font: 800 14px/1 var(--sans); } .ph-stay span { font: 500 11.5px/1.2 var(--sans); color: #6B778C; }
.ph-bar { display: block; height: 34px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(19, 35, 58, .08); } .ph-bar.s { height: 22px; width: 70%; }
.ph-req { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mr) 30%, transparent), 0 10px 20px -12px rgba(228, 38, 44, .4); transition: opacity .4s; }
.ph-req b { display: block; font: 800 14px/1.1 var(--sans); } .ph-req span { font: 600 11.5px/1.2 var(--sans); color: var(--mr); }
.ph-bell { flex: none; width: 54px; height: 46px; padding: 6px; border-radius: 14px; background: #FFF6E0; cursor: pointer; position: relative; }
.ph-bell::after { content: ""; position: absolute; inset: -4px; border-radius: 18px; border: 2px solid #E3B04B; animation: mmpulse 1.8s var(--ease) infinite; }
.ph-bell svg { width: 100%; height: 100%; overflow: visible; }
.mm-ph[data-s="0"] .ph-bell:hover svg, .mm-ph.tap1 .ph-bell svg { animation: mmding .7s var(--spring); transform-origin: 50% 90%; }
@keyframes mmding { 20% { transform: scale(.9, .85); } 45% { transform: scale(1.06) rotate(-6deg); } 70% { transform: rotate(4deg); } }
@keyframes mmpulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.ph-sheet { position: absolute !important; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px 18px; border-radius: 26px 26px 32px 32px; background: #fff; color: #13233A; box-shadow: 0 -20px 40px -20px rgba(19, 35, 58, .5); transform: translateY(105%); transition: transform .6s var(--spring); }
.mm-ph[data-s="1"] .ph-sheet { transform: none; }
.ph-grab { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #D5D9E0; }
.ph-sheet p { margin: 0 0 10px; font: 800 15px/1.2 var(--sans); }
.ph-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-svc button { display: flex; align-items: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: #F4F5F8; color: #13233A; font: 700 12px/1.15 var(--sans); text-align: left; cursor: pointer; transition: background .25s, transform .3s var(--spring), box-shadow .25s; }
.ph-svc button i { font-style: normal; font-size: 16px; }
.ph-svc button:hover { background: #FFE9E9; }
.ph-svc button.on { background: var(--mr); color: #fff; transform: scale(1.05); box-shadow: 0 10px 20px -10px var(--mr); }
.ph-status { display: grid; gap: 8px; }
.st-msg { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(19, 35, 58, .08); animation: mmin .5s var(--spring); }
.st-msg i { grid-row: span 2; font-style: normal; font-size: 22px; } .st-msg b { font: 800 13.5px/1.1 var(--sans); }
.st-go { font: 600 11.5px/1.2 var(--sans); color: #6B778C; }
.st-msg:not(.ok) .st-go::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 6px; border-radius: 50%; border: 2px solid #C4CAD4; border-top-color: var(--mr); vertical-align: -1px; animation: mmspin .8s linear infinite; }
.st-msg.ok .st-go { color: #2FA36B; }
.st-rep { justify-self: start; max-width: 88%; padding: 10px 12px; border-radius: 4px 16px 16px 16px; background: #E8F7EF; font: 500 12px/1.35 var(--sans); animation: mmin .5s var(--spring) .1s both; }
.st-rep b { display: block; margin-bottom: 2px; font: 800 11px/1 var(--sans); color: #2FA36B; }
.mm-ph[data-s="2"] .ph-req { opacity: .5; }
@keyframes mmspin { to { transform: rotate(360deg); } }
@keyframes mmin { from { opacity: 0; transform: translateY(8px); } }
.ph-tap { position: absolute !important; z-index: 3; width: 34px; height: 34px; border-radius: 50%; background: rgba(19, 35, 58, .28); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); opacity: 0; pointer-events: none; }
.ph-tap.go { animation: mmtap .7s ease forwards; }
@keyframes mmtap { 0% { opacity: 0; transform: scale(1.4); } 30% { opacity: 1; transform: scale(1); } 55% { transform: scale(.75); } 100% { opacity: 0; transform: scale(1); } }

/* 01 · the key rack: keys come off one by one */
.mm-rack { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); padding: 44px clamp(16px, 2.4vw, 32px) 34px; border-radius: 22px;
  background: linear-gradient(180deg, #9B6A3E, #7C5130); box-shadow: inset 0 2px 0 rgba(255, 220, 170, .35), inset 0 -6px 14px rgba(40, 20, 5, .4), 0 30px 50px -30px rgba(60, 30, 5, .6); align-items: start; }
.mm-rack::before { content: ""; position: absolute; left: 20px; right: 20px; top: 22px; height: 6px; border-radius: 3px; background: linear-gradient(#E9C46A, #A97A22); box-shadow: 0 2px 2px rgba(0, 0, 0, .3); }
.mm-key { position: relative; display: grid; justify-items: center; text-align: center; padding-top: 6px; }
.mm-ring2 { width: 22px; height: 22px; margin-top: -24px; border-radius: 50%; border: 3px solid #D9B05A; box-sizing: border-box; }
.mm-fob { display: grid; justify-items: center; gap: 6px; width: min(130px, 100%); padding: 16px 10px 18px; margin-top: -4px; border-radius: 14px 14px 40px 40px; background: linear-gradient(170deg, var(--mr2), var(--mr) 60%, #B3121A); color: #fff;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 14px 20px -12px rgba(0, 0, 0, .55); transform-origin: 50% -16px; animation: mmsway 4.4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); transition: transform .8s var(--spring); box-sizing: border-box; }
.mm-fob b { font: 800 22px/1 var(--sans); letter-spacing: .04em; }
.mm-fob i { display: grid; place-items: center; height: 28px; font-style: normal; font-size: 24px; line-height: 1; }
@keyframes mmsway { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
.mm-key.on .mm-fob { animation: none; transform: translateY(10px) scale(1.04); }
.mm-kc { display: grid; gap: 8px; width: 100%; max-height: 0; overflow: hidden; padding: 0 16px; border-radius: 16px; background: var(--card); color: var(--ink); text-align: left; box-sizing: border-box; box-shadow: var(--shadow-sm); opacity: 0;
  transition: max-height 1s var(--ease), opacity .6s, margin .7s var(--ease), padding .7s var(--ease); }
.mm-kc b { font: 800 18px/1.2 var(--sans); letter-spacing: -.02em; }
.mm-kc span { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.mm-key.on .mm-kc { max-height: 480px; opacity: 1; margin-top: 22px; padding: 18px 16px; }

/* 02 · two circles, one sweet spot */
.mm-venn { position: relative; width: min(100%, 1040px); aspect-ratio: 1040 / 600; margin: 0 auto; }
.mm-venn .vc { position: absolute; top: 0; width: 60%; aspect-ratio: 1; border-radius: 50%; display: grid; align-items: center; transition: transform 1.2s var(--spring) .1s; }
.mm-venn .vc.l { left: 0; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--mr) 14%, var(--card)), color-mix(in srgb, var(--mr) 8%, var(--card))); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mr) 55%, transparent); transform: translateX(-12%); }
.mm-venn .vc.r { right: 0; background: radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--gold) 18%, var(--card)), color-mix(in srgb, var(--gold) 9%, var(--card))); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 65%, transparent); transform: translateX(12%); mix-blend-mode: multiply; }
:root[data-theme="dark"] .mm-venn .vc.r { mix-blend-mode: screen; }
.mm-venn.in .vc { transform: none; }
.mm-venn .vin { width: 54%; display: grid; gap: 12px; }
.mm-venn .vc.l .vin { margin-left: 13%; } .mm-venn .vc.r .vin { margin-left: 34%; }
.mm-venn .vin > img { height: 28px; width: auto; justify-self: start; }
.vh { display: inline-flex; align-items: center; gap: 8px; font: 800 18px/1 var(--sans); } .vh img { height: 30px; width: auto; }
.mm-venn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.mm-venn li { position: relative; padding-left: 22px; font: 600 clamp(13px, 1.15vw, 16px)/1.35 var(--sans); opacity: 0; translate: 0 8px; transition: opacity .5s, translate .6s var(--ease); transition-delay: calc(.9s + var(--d) * .15s); }
.mm-venn li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--mr); }
.mm-venn .vc.r li::before { color: var(--gold); }
.mm-venn.in li { opacity: 1; translate: 0 0; }
.mm-venn .vx { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 4px; padding: 16px 18px; border-radius: 22px; background: var(--card); box-shadow: 0 20px 40px -20px rgba(19, 35, 58, .5), inset 0 0 0 2px color-mix(in srgb, var(--mr) 40%, var(--gold)); text-align: center; opacity: 0; scale: .7; transition: opacity .5s 1.5s, scale .8s var(--spring) 1.5s; }
.mm-venn.in .vx { opacity: 1; scale: 1; }
.mm-venn .vx span { font-size: 28px; } .mm-venn .vx b { font: 800 17px/1.1 var(--sans); } .mm-venn .vx small { font: 600 12px/1 var(--sans); color: var(--ink-2); }

/* 03 · placeholder wireframes for each issue */
.mm-wires { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); }
.mm-wire { display: grid; gap: 16px; transition-delay: calc(var(--i) * .12s) !important; }
.mm-wph { position: relative; aspect-ratio: 9 / 16; padding: 10px; border-radius: 26px; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px var(--line); box-sizing: border-box; }
.wf { position: relative; height: 100%; padding: 14px 12px; border-radius: 18px; background: var(--card); box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 9px; }
.wb { display: block; height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 12%, transparent); flex: none; }
.wb.h { height: 13px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.wc { display: grid; gap: 7px; padding: 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.wq { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 6px 8px; border-radius: 8px; font: 600 10px/1.2 var(--sans); color: color-mix(in srgb, var(--ink) 35%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.wq em { position: absolute; right: -6px; top: -14px; font-style: normal; font-size: 26px; animation: mmlook 2.4s var(--ease) infinite; }
@keyframes mmlook { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-60px, -30px) rotate(-12deg); } }
.wcta { display: block; height: 28px; border-radius: 8px; background: color-mix(in srgb, #2F7FD8 60%, transparent); flex: none; }
.wf.sheet { justify-content: flex-end; padding: 0; background: color-mix(in srgb, var(--ink) 20%, var(--card)); }
.wsh { height: 82%; padding: 12px; border-radius: 16px 16px 0 0; background: var(--card); display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.wlist { display: grid; gap: 9px; animation: mmlist 6s linear infinite; }
.wlist span, .wrow { display: flex; align-items: center; gap: 8px; }
.cb { flex: none; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent); }
@keyframes mmlist { 50% { transform: translateY(-45%); } }
.wbub { align-self: flex-end; margin-top: 10px; padding: 8px 10px; border-radius: 12px 12px 2px 12px; background: var(--mr); color: #fff; font: 700 11.5px/1.2 var(--sans); animation: mmbob 2.4s ease-in-out infinite; }
.wnope { margin-top: 8px; padding: 14px 8px; border-radius: 10px; border: 2px dashed color-mix(in srgb, var(--mr) 50%, transparent); text-align: center; font: 600 10.5px/1 var(--sans); color: var(--mr); }
@keyframes mmbob { 50% { transform: translate(-6px, -4px); } }
.wsent { display: grid; gap: 8px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.wsent b { font: 800 12px/1 var(--sans); }
.wst { font: 600 11px/1 var(--sans); color: var(--ink-2); } .wst em { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: #F5B83D; color: #fff; font-style: normal; font-weight: 800; }
.wdots { display: flex; gap: 6px; justify-content: center; margin-top: auto; padding-bottom: 8px; }
.wdots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 30%, transparent); animation: mmdot 1.2s infinite; } .wdots i:nth-child(2) { animation-delay: .2s; } .wdots i:nth-child(3) { animation-delay: .4s; }
@keyframes mmdot { 50% { transform: translateY(-5px); opacity: .4; } }
.mm-wt { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; align-items: start; }
.mm-wt > span { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mr); color: #fff; font: 800 13px/1 var(--sans); }
.mm-wt b { font: 800 17px/1.2 var(--sans); }
.mm-wt p { margin: 0; font: 400 14.5px/1.45 var(--sans); color: var(--ink-2); }

/* 04 · the hotel facade, centred and on one screen */
.mm-fsec { text-align: center; }
.mm-fsec .mm-h { margin-left: auto; margin-right: auto; margin-bottom: 3vh; }
.mm-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 4vh; }
.mm-tabs button { display: grid; gap: 4px; min-width: 150px; padding: 12px 16px; border-radius: 16px; text-align: center; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s, transform .4s var(--spring); }
.mm-tabs button:hover { transform: translateY(-2px); }
.mm-tabs b { font: 800 26px/1 var(--sans); letter-spacing: -.03em; color: var(--sc); }
.mm-tabs span { font: 600 13px/1.3 var(--sans); color: var(--ink-2); }
.mm-tabs button.on { box-shadow: inset 0 0 0 2px var(--sc), 0 14px 24px -16px var(--sc); }
.mm-fac { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 60px); text-align: left; }
.mm-bld { position: relative; flex: none; width: clamp(200px, calc((100svh - 420px) * .7), 300px); padding: 40px 18px 0; border-radius: 16px 16px 4px 4px; background: linear-gradient(180deg, #D98C5F, #B9663F); box-shadow: inset 0 0 0 5px #C7774C, 0 40px 60px -40px rgba(80, 30, 10, .7); box-sizing: border-box; }
.mm-sign { position: absolute; left: 50%; top: -16px; translate: -50% 0; padding: 7px 16px; border-radius: 8px; background: #2B1B12; color: #FFD879; font: 800 14px/1 var(--sans); letter-spacing: .3em; box-shadow: 0 0 22px rgba(255, 200, 90, .35); }
.mm-win { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.mm-win i { aspect-ratio: 3 / 4; border-radius: 2px 2px 1px 1px; background: #4A2A1B; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); transition: background .35s, box-shadow .35s; }
.mm-win i.on { background: var(--wc); box-shadow: 0 0 8px color-mix(in srgb, var(--wc) 70%, transparent); }
.mm-door { width: 48px; height: 52px; margin: 14px auto 0; border-radius: 24px 24px 0 0; background: linear-gradient(#5B3524, #3C2116); box-shadow: inset 0 0 0 4px #C7774C; }
.mm-sd { width: min(420px, 100%); min-height: 190px; }
.mm-sd .h { margin: 0; font: 700 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sc); }
.mm-sd .n { margin: 10px 0 0; font: 700 20px/1.2 var(--sans); }
.mm-sd .n b { display: block; font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: -.05em; color: var(--sc); }
.mm-sd .d { margin: 12px 0 0; font: 400 16px/1.55 var(--sans); color: var(--ink-2); animation: mmin .5s var(--ease); }
.mm-sd .fn { margin: 10px 0 0; font: 500 13px/1.4 var(--sans); color: var(--ink-2); }

/* 05 · luggage tags */
.mm-tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); perspective: 1200px; padding: 30px 0 30px; }
.mm-tag { position: relative; height: 230px; padding: 0; cursor: pointer; background: none; }
.mm-tag::before { content: ""; position: absolute; left: 50%; top: -26px; width: 2px; height: 34px; background: #B88A4A; transform-origin: 50% 0; rotate: -8deg; }
.mm-tin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s var(--spring); rotate: calc((var(--i) - 1.5) * 2deg); }
.mm-tag:hover .mm-tin { transform: rotateY(12deg); }
.mm-tag.fl .mm-tin { transform: rotateY(180deg); }
.mm-tin > span { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 34px 18px 18px; border-radius: 16px 16px 18px 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-sizing: border-box; isolation: isolate; filter: drop-shadow(0 16px 16px rgba(19, 35, 58, .2)); }
.mm-tin > span::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 16px 16px 18px 18px; background: var(--tb); clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%); }
.mm-tin > span::before { content: ""; position: absolute; left: 50%; top: 14px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px #C9A05A; }
.mm-tin .f { --tb: var(--card); }
.mm-tin .f img { width: 64px; height: 64px; border-radius: 16px; }
.mm-tin .f b { font: 800 20px/1 var(--sans); }
.mm-tin .f small { font: 600 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .08em; text-transform: uppercase; }
.mm-tin .b { transform: rotateY(180deg); --tb: linear-gradient(160deg, var(--mr2), var(--mr)); color: #fff; text-align: center; }
.mm-tin .b b { font: 800 18px/1 var(--sans); opacity: .85; }
.mm-tin .b span { font: 700 17px/1.35 var(--sans); }
.mm-cimg { margin: 3vh 0 0; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); cursor: zoom-in; }
.mm-cimg img { display: block; width: 100%; height: auto; }
.mm-cimg figcaption { padding: 12px; text-align: center; font: 600 13px/1 var(--sans); color: #5B6576; background: #F6F6F6; }

/* 06 · iterations: a progress you step through */
.mm-tr { padding: clamp(18px, 2.4vw, 32px); border-radius: 28px; background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); --p: 0; }
.mm-trk { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 clamp(20px, 3vh, 34px); padding: 0; list-style: none; }
.mm-trk::before, .mm-trk .fill { content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 19px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.mm-trk .fill { right: auto; width: calc((100% - 100% / 6) * var(--p)); background: linear-gradient(90deg, var(--mr), #FF8A5B); transition: width .7s var(--ease); }
.mm-trk li:not(.fill) { position: relative; z-index: 1; display: grid; justify-items: center; }
.mm-trk button { display: grid; justify-items: center; gap: 8px; cursor: pointer; background: none; }
.mm-trk button i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); font: 800 15px/1 var(--sans); font-style: normal; color: var(--ink-2); transition: background .4s, box-shadow .4s, color .4s, transform .5s var(--spring); }
.mm-trk button span { font: 700 13px/1 var(--sans); color: var(--ink-2); }
.mm-trk button.done i { background: var(--mr); color: #fff; box-shadow: none; }
.mm-trk button.on i { background: var(--mr); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mr) 22%, transparent); transform: scale(1.12); }
.mm-trk button.on span { color: var(--ink); }
.mm-tr[data-v="5"] .mm-trk li:nth-last-child(2) button i { background: #2FA36B; box-shadow: 0 0 0 6px rgba(47, 163, 107, .22); }
.mm-trb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); align-items: center; }
.mm-trs .ph { display: flex; justify-content: center; gap: 10px; animation: mmin .5s var(--ease); }
.mm-trs img { height: min(54vh, 500px); width: auto; max-width: 100%; border-radius: 18px; box-shadow: 0 24px 44px -24px rgba(19, 35, 58, .5), 0 0 0 1px var(--line); cursor: zoom-in; background: #fff; }
.mm-trs .many img { height: min(42vh, 380px); max-width: 32%; object-fit: cover; object-position: top; }
.mm-trc { animation: mmin .5s var(--ease); }
.mm-trc .v { display: inline-block; margin: 0; padding: 7px 12px; border-radius: 999px; background: color-mix(in srgb, var(--mr) 12%, transparent); font: 800 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--mr); }
.mm-trc .v.ship { background: rgba(47, 163, 107, .14); color: #2FA36B; }
.mm-trc h4 { margin: 14px 0 8px; font: 800 clamp(24px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -.03em; }
.mm-trc .d { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.mm-trc .col { margin-top: 18px; }
.mm-trc .col > b { display: block; margin-bottom: 8px; font: 800 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.mm-trc .col.y > b { color: #2FA36B; } .mm-trc .col.n > b { color: var(--mr); }
.mm-trc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mm-trc li { position: relative; padding: 10px 12px 10px 38px; border-radius: 12px; font: 600 15px/1.4 var(--sans); }
.mm-trc li::before { position: absolute; left: 12px; top: 9px; font-weight: 800; }
.mm-trc .col.y li { background: rgba(47, 163, 107, .1); } .mm-trc .col.y li::before { content: "✓"; color: #2FA36B; }
.mm-trc .col.n li { background: color-mix(in srgb, var(--mr) 9%, transparent); } .mm-trc .col.n li::before { content: "✗"; color: var(--mr); }
.mm-tr[data-v="5"] .mm-trc .col.y li { padding-left: 14px; font-size: 16px; } .mm-tr[data-v="5"] .mm-trc .col.y li::before { content: none; }
.mm-trc .ar { display: flex; gap: 10px; margin-top: 22px; }
.mm-trc .ar button { padding: 13px 20px; border-radius: 999px; font: 700 14.5px/1 var(--sans); background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .3s var(--spring), opacity .3s; }
.mm-trc .ar button:hover:not(:disabled) { transform: translateY(-2px); }
.mm-trc .ar button[data-d="-1"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.mm-trc .ar button:disabled { opacity: .35; cursor: default; }

/* 07 · the lift, sized to the screen */
.mm-lsec { padding-top: 12vh; }
.mm-lsec .mm-h { margin-bottom: 3vh; }
.mm-lift { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); height: clamp(460px, calc(100svh - 230px), 700px); }
.mm-pan { align-self: start; display: grid; gap: 8px; padding: 16px; border-radius: 22px; background: linear-gradient(160deg, #3B3F46, #24272C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 40px -24px rgba(0, 0, 0, .6); }
.mm-led { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; margin-bottom: 6px; border-radius: 12px; background: #0E0F11; color: #FF5A4F; font: 800 30px/1 ui-monospace, monospace; text-shadow: 0 0 10px rgba(255, 90, 79, .7); }
.mm-led i { font-style: normal; font-size: 16px; }
.mm-lift.moving .mm-led i { animation: mmblink .3s steps(2) infinite; }
@keyframes mmblink { 50% { opacity: .2; } }
.mm-pan button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; text-align: left; color: #E8E8E8; font: 600 14px/1.25 var(--sans); cursor: pointer; transition: background .3s; }
.mm-pan button:hover { background: rgba(255, 255, 255, .06); }
.mm-pan button span { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F2F2F2, #A7ABB2); color: #2A2D33; font: 800 15px/1 var(--sans); box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .4); transition: box-shadow .3s, color .3s; }
.mm-pan button.on span { color: #fff; background: radial-gradient(circle at 40% 35%, #FF8A80, #E4262C); box-shadow: 0 0 0 3px rgba(255, 90, 79, .35), 0 0 16px rgba(255, 90, 79, .7); }
.mm-pan button em { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: #FFD23F; color: #2A2D33; font: 800 10px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.mm-car { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 10%, var(--card)), var(--card)); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.mm-fl { height: 100%; display: flex; flex-direction: column; padding: 22px 24px 14px; box-sizing: border-box; }
.mm-fl .hd h4 { margin: 0; font: 800 clamp(22px, 2vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; }
.mm-fl .hd h4 em { margin-left: 6px; padding: 4px 9px; border-radius: 8px; background: #FFD23F; color: #2A2D33; font: 800 12px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
.mm-fl .hd p { margin: 6px 0 0; font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); }
.mm-fl .row { flex: 1; min-height: 0; display: flex; gap: 14px; margin-top: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.mm-fl .row img { flex: none; height: 100%; width: auto; max-width: none; object-fit: contain; scroll-snap-align: start; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -22px rgba(19, 35, 58, .55), 0 0 0 1px var(--line); cursor: zoom-in; }
.mm-fl .sw { margin: 6px 0 0; font: 600 12.5px/1 var(--sans); color: var(--ink-2); text-align: right; }
.mm-doors { position: absolute; inset: 0; display: flex; pointer-events: none; }
.mm-doors i { flex: 1; background: linear-gradient(90deg, #C9CDD3, #EEF0F2 50%, #B9BEC5); transition: transform .5s cubic-bezier(.7, 0, .3, 1); }
.mm-doors i:first-child { transform: translateX(-101%); box-shadow: inset -2px 0 0 rgba(0, 0, 0, .15); } .mm-doors i:last-child { transform: translateX(101%); }
.mm-lift.moving .mm-doors i { transform: none; }

/* 08 · the arrivals board: black and yellow */
.mm-bd { padding: clamp(14px, 2vw, 24px); border-radius: 18px; background: #050505; color: #FFD23F; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8), inset 0 0 0 6px #1B1B1B; }
.mm-bdh { display: flex; justify-content: space-between; gap: 12px; margin: -2px -2px 10px; padding: 12px 14px; border-radius: 10px; background: #FFD23F; color: #050505; font: 800 14px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mm-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 8px; border-bottom: 1px solid #1E1E1E; }
.mm-row:last-child { border-bottom: 0; }
.mm-fx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mm-fx > i { font-style: normal; color: #FFD23F; opacity: .6; font: 800 20px/1 var(--sans); }
.sf { display: inline-flex; gap: 3px; }
.sf i { position: relative; display: grid; place-items: center; width: 26px; height: 38px; border-radius: 4px; background: linear-gradient(180deg, #1A1A1A 50%, #121212 50%); font: 800 22px/1 ui-monospace, "SF Mono", monospace; font-style: normal; color: #FFD23F; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6); }
.sf i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; }
.sf i.flip { animation: mmflip .055s linear; }
@keyframes mmflip { 50% { transform: scaleY(.3); } }
.sf.big i { width: 34px; height: 50px; font-size: 30px; }
.mm-rt b { display: block; font: 800 17px/1.25 var(--sans); color: #FFD23F; letter-spacing: .02em; text-transform: uppercase; }
.mm-rt span { display: block; margin-top: 6px; font: 400 14.5px/1.5 var(--sans); color: #CFCFCF; }

/* 09 · the guestbook, signed as you arrive */
.mm-gb { position: relative; max-width: 50rem; margin: 0 auto; padding: 44px clamp(22px, 4vw, 60px) 30px clamp(56px, 6vw, 90px); border-radius: 6px 20px 20px 6px; background: #FFFDF6;
  background-image: linear-gradient(90deg, transparent 38px, rgba(228, 38, 44, .35) 38px 40px, transparent 40px), repeating-linear-gradient(transparent 0 37px, rgba(30, 90, 160, .13) 37px 38px); background-position: 0 0, 0 30px;
  color: #13233A; box-shadow: 0 30px 50px -30px rgba(60, 40, 10, .5), inset 10px 0 18px -12px rgba(60, 40, 10, .25); transform: rotate(-.6deg); }
.mm-gb p { margin: 0 0 14px; font: 400 clamp(19px, 1.6vw, 23px)/1.6 var(--hand); }
.mm-gb p.o { font-size: clamp(22px, 2vw, 28px); font-weight: 700; color: var(--mr); }
.mm-gb u { text-decoration: none; background: linear-gradient(transparent 58%, rgba(255, 210, 63, .7) 58%); }
.mm-sig { width: min(360px, 80%); margin: 10px 0 0 auto; }
.mm-sig svg { display: block; width: 100%; height: auto; overflow: visible; }
.mm-sig text { font: 400 92px/1 "Mrs Saint Delafield", "Allura", cursive; fill: transparent; stroke: #1F3A8A; stroke-width: 1.2; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.mm-sig { clip-path: inset(-20% 100% -20% 0); }
.mm-sig.go { clip-path: inset(-20% 0 -20% 0); transition: clip-path 2.6s cubic-bezier(.45, .05, .4, 1) .3s; }
.mm-sig.go text { animation: mmsign 2.6s cubic-bezier(.45, .05, .4, 1) .3s forwards, mmink .8s ease 2.5s forwards; }
@keyframes mmsign { to { stroke-dashoffset: 0; } }
@keyframes mmink { to { fill: #1F3A8A; } }

/* footer: thanks, stories, and the corridor */
.mm-foot { padding-top: 12vh; }
.mm .c3-fin { text-align: center; padding-bottom: 6vh; }
.mm .c3-k { justify-content: center; margin: 0 0 18px; }
.mm .c3-h { margin: 0 auto 22px; }
.mm .c3-h[data-rv] { opacity: 1; translate: none; }
.mm-hall { height: max(200px, 22.5vw) !important; overflow: hidden; }  /* the art is 1600×360: grow with the width so the top never gets sliced off */
.mm-hall svg { width: 100%; height: 100%; display: block; }
.mm-hall .hn { font: 800 13px var(--sans); fill: #5A3A10; }
.mm-hall .bb { animation: mmbb 26s linear infinite; }
.mm-hall .bb-in { animation: mmstep .5s ease-in-out infinite alternate; }
.mm-hall .l1 { transform-origin: 28px 226px; animation: mmleg .5s ease-in-out infinite alternate; }
.mm-hall .l2 { transform-origin: 40px 226px; animation: mmleg .5s ease-in-out infinite alternate-reverse; }
@keyframes mmbb { from { transform: translateX(-300px); } to { transform: translateX(1700px); } }
@keyframes mmstep { to { transform: translateY(-3px); } }
@keyframes mmleg { from { transform: rotate(14deg); } to { transform: rotate(-14deg); } }
:root[data-theme="dark"] .mm-hall .wall { filter: brightness(.45); }
:root[data-theme="dark"] .mm-hall svg { filter: brightness(.8); }

/* lightbox */
.mm-lb { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 60px 70px; background: rgba(10, 12, 16, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.mm-lb.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.mm-lb img { max-width: 100%; max-height: calc(100svh - 140px); border-radius: 12px; background: #fff; }
.mm-lb p { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; text-align: center; font: 600 14px/1.3 var(--sans); color: rgba(255, 255, 255, .85); }
.mm-lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 28px/1 var(--sans); cursor: pointer; }
.mm-lb .x { right: 18px; top: 18px; } .mm-lb .p { left: 14px; top: 50%; } .mm-lb .n { right: 14px; top: 50%; }
.mm-lb.one .p, .mm-lb.one .n { display: none; }

/* dark */
:root[data-theme="dark"] .mm-rack { background: linear-gradient(180deg, #5E3F25, #4A301C); }
:root[data-theme="dark"] .mm-bld { background: linear-gradient(180deg, #8E5A3D, #6F4129); box-shadow: inset 0 0 0 5px #7F4E33, 0 40px 60px -40px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .mm-win i:not(.on) { background: #26170F; }
:root[data-theme="dark"] .mm-gb { filter: brightness(.9); }
:root[data-theme="dark"] .mm-bk img, :root[data-theme="dark"] .mm-venn .vin > img { background: #fff; border-radius: 8px; padding: 3px 6px; }
:root[data-theme="dark"] .mm-car { background: linear-gradient(180deg, #2C2A26, var(--card)); }
:root[data-theme="dark"] .mm-tin > span::before { background: #1A1A1A; }
:root[data-theme="dark"] .mm-ph { box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .8), inset 0 0 0 2px #3A3F48; }

/* responsive */
@media (max-width: 1100px) {
  .mm-hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 6vh; }
  .mm-lead { margin-left: auto; margin-right: auto; } .mm-meta { justify-content: center; }
  .mm-wires { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .mm-trb { grid-template-columns: 1fr; }
  .mm-lift { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); height: clamp(560px, calc(100svh - 170px), 820px); }
  .mm-pan { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
  .mm-led { display: none; }
  .mm-pan button { flex-direction: column; text-align: center; font-size: 12px; gap: 6px; padding: 6px 4px; }
  .mm-pan button em { margin: 0; }
}
@media (max-width: 860px) {
  .mm-sec { padding-top: 11vh; }
  .mm-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; padding-top: 40px; }
  .mm-rack::before { display: none; }
  .mm-key .mm-ring2 { margin-top: -10px; }
  .mm-venn { aspect-ratio: auto; display: grid; gap: 0; justify-items: center; }
  .mm-venn .vc { position: relative; width: min(92%, 380px); transform: none !important; }
  .mm-venn .vc.r { margin-top: -70px; }
  .mm-venn .vc .vin { width: 70%; margin: 0 auto !important; }
  .mm-venn .vc.l .vin { margin-top: -30px !important; } .mm-venn .vc.r .vin { margin-top: 40px !important; }
  .mm-venn .vx { top: calc(50% - 10px); }
  .mm-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; padding-top: 20px; }
  .mm-tag { height: 210px; }
  .mm-tabs button { min-width: 0; flex: 1 1 40%; }
  .mm-fac { flex-direction: column; text-align: center; }
  .mm-sd { min-height: 0; }
  .mm-trk button span { font-size: 11px; } .mm-trk button i { width: 34px; height: 34px; } .mm-trk::before, .mm-trk .fill { top: 15px; }
  .mm-trs img { height: min(50vh, 420px); }
  .mm-trs .many img { height: auto; max-width: 31%; }
  .mm-fl { padding: 16px; }
  .mm-row { grid-template-columns: 1fr; gap: 12px; }
  .sf i { width: 21px; height: 32px; font-size: 18px; } .sf.big i { width: 27px; height: 40px; font-size: 24px; }
  .mm-gb { padding-left: 52px; transform: none; }
  .mm-lb { padding: 60px 12px; } .mm-lb .p, .mm-lb .n { top: auto; bottom: 60px; }
}
@media (max-width: 520px) { .mm-bk { font-size: 0; gap: 0; } .mm-bk img { height: 20px; } .mm-wires { grid-template-columns: 1fr 1fr; } .mm-wt b { font-size: 15px; } .mm-pan button { font-size: 10.5px; } .mm-pan button span { width: 30px; height: 30px; } }
@media (prefers-reduced-motion: reduce) { .mm-fob, .mm-hall .bb, .wlist { animation: none; } .mm-sig { clip-path: none; } .mm-sig text { fill: #1F3A8A; } }

/* fit: the venn and the wireframes sit within one screen */
.mm-venn { width: min(100%, 900px, calc((100svh - 240px) * 1.72)); aspect-ratio: 1.72; }
.mm-venn .vc { width: 58%; }
.mm-venn li { font-size: clamp(12.5px, 1vw, 15px); }
.mm-venn .vin { gap: 10px; }
.mm-wph { aspect-ratio: auto; height: clamp(300px, calc(100svh - 420px), 440px); }
@media (max-width: 860px) { .mm-venn { width: 100%; aspect-ratio: auto; } .mm-wph { height: 340px; } }

.mm-wire, .mm-wph, .wf, .wsh, .wlist { min-width: 0; }
.mm-wph { overflow: hidden; }
.wlist span .wb { flex: 0 1 auto; }
@media (max-width: 860px) {
  .mm-venn { display: grid; gap: 14px; }
  .mm-venn .vc { position: static; width: 100% !important; aspect-ratio: auto !important; border-radius: 28px !important; margin: 0 !important; padding: 22px; box-sizing: border-box; mix-blend-mode: normal !important; }
  .mm-venn .vc .vin { width: 100% !important; margin: 0 !important; }
  .mm-venn .vc.r { order: 3; }
  .mm-venn .vx { position: static; translate: none; order: 2; justify-self: center; grid-auto-flow: column; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; }
  .mm-venn .vx span { font-size: 20px; }
}

.wlong { display: grid; gap: 9px; overflow: hidden; flex: 1; min-height: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.wlong .wrow { animation: mmscan 3s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 1s); }
.wmore { padding: 7px; border-radius: 8px; background: color-mix(in srgb, var(--mr) 12%, transparent); color: var(--mr); text-align: center; font: 700 10.5px/1.2 var(--sans); flex: none; }

/* ===== MakeMyTrip round 3 ===== */
/* centred page */
.mm-sec { text-align: center; }
.mm-h, .mm-p { margin-left: auto; margin-right: auto; }
.mm-pl { justify-content: center; }
/* headings: ink sweeps across as they arrive */
.mm-h { background: linear-gradient(90deg, var(--ink) 0 50%, color-mix(in srgb, var(--ink) 16%, transparent) 50% 100%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.6s cubic-bezier(.6, 0, .2, 1) .1s, opacity .8s, translate 1s var(--ease) !important; }
.mm-h.in { background-position: 0 0; }
/* hero: centred, logo first, lines unmask */
.mm-hero { display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; padding-top: 7vh; gap: 5vh; }
.mm-hw { max-width: 56rem; display: grid; justify-items: center; }
.mm-logo { padding: 16px 26px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px -24px rgba(228, 38, 44, .45), inset 0 0 0 1px rgba(19, 35, 58, .06); opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .7s, transform .9s var(--spring); }
.mm-logo img { display: block; height: clamp(40px, 4.4vw, 60px); width: auto; }
.mm-hero.in .mm-logo { opacity: 1; transform: none; }
.mm-k { margin-top: 26px; opacity: 0; transition: opacity .8s .3s; } .mm-hero.in .mm-k { opacity: 1; }
.mm-t { margin-top: 14px; font-size: clamp(46px, 6.6vw, 104px); }
.mm-t .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.mm-t .ln > span { display: inline-block; transform: translateY(110%) rotate(3deg); transition: transform 1.1s cubic-bezier(.2, .9, .2, 1); }
.mm-t .ln:nth-child(1) > span { transition-delay: .35s; } .mm-t .ln:nth-child(2) > span { transition-delay: .55s; }
.mm-hero.in .mm-t .ln > span { transform: none; }
.mm-lead, .mm-meta { opacity: 0; transform: translateY(14px); transition: opacity .8s .9s, transform 1s var(--ease) .9s; }
.mm-meta { justify-content: center; transition-delay: 1.05s; }
.mm-lead { margin-left: auto; margin-right: auto; }
.mm-hero.in .mm-lead, .mm-hero.in .mm-meta { opacity: 1; transform: none; }
.mm-demo { position: relative; padding: 0 clamp(0px, 14vw, 260px); opacity: 0; transform: translateY(40px); transition: opacity 1s 1.2s, transform 1.2s var(--ease) 1.2s; }
.mm-hero.in .mm-demo { opacity: 1; transform: none; }
.mm-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--card); box-shadow: 0 18px 30px -18px rgba(19, 35, 58, .45), inset 0 0 0 1px var(--line); font: 700 14px/1 var(--sans); white-space: nowrap; animation: mmfl 6s ease-in-out infinite; }
.mm-chip b { padding: 4px 8px; border-radius: 999px; background: rgba(47, 163, 107, .14); color: #2FA36B; font: 800 11.5px/1 var(--sans); }
.mm-chip.c1 { left: 0; top: 14%; animation-delay: -1s; } .mm-chip.c2 { right: 0; top: 24%; animation-delay: -3s; } .mm-chip.c3 { left: 2%; top: 58%; animation-delay: -2s; } .mm-chip.c4 { right: 3%; top: 68%; animation-delay: -4s; }
@keyframes mmfl { 50% { transform: translateY(-10px); } }
@media (max-width: 860px) { .mm-chip { display: none; } .mm-demo { padding: 0; } }
/* two buildings */
.mm-blds { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: clamp(10px, 2vw, 30px); max-width: 66rem; margin: 0 auto; }
.mm-b { display: grid; justify-items: center; }
.bsign { display: inline-flex; align-items: center; gap: 8px; margin-bottom: -2px; padding: 10px 16px; border-radius: 12px 12px 0 0; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 800 13px/1 var(--sans); letter-spacing: .3em; color: #8A5A10; }
.bsign img { height: 26px; width: auto; }
.bbody { position: relative; width: 100%; padding: 18px 16px 0; border-radius: 14px 14px 4px 4px; box-sizing: border-box; display: grid; gap: 10px; transform-origin: 50% 100%; transform: scaleY(.04); transition: transform 1.1s cubic-bezier(.3, .9, .3, 1); }
.mm-blds.in .bbody { transform: none; }
.mmt .bbody { background: linear-gradient(180deg, #2B3A55, #1D2738); box-shadow: inset 0 0 0 4px #3B4C6B, 0 40px 60px -40px rgba(19, 35, 58, .7); }
.htl .bbody { background: linear-gradient(180deg, #D98C5F, #B9663F); box-shadow: inset 0 0 0 4px #C7774C, 0 40px 60px -40px rgba(80, 30, 10, .7); }
.htl .bsign img { height: 24px; }
.btag { margin: 0 0 4px; font: 800 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bfl { display: grid; grid-template-columns: 14px 1fr 14px; align-items: center; gap: 10px; padding: 12px 12px; border-radius: 8px; font: 700 clamp(13px, 1.1vw, 15.5px)/1.3 var(--sans); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(.9s + var(--d) * .16s); }
.mm-blds.in .bfl { opacity: 1; transform: none; }
.bfl > i { width: 14px; height: 18px; border-radius: 2px; }
.mmt .bfl { background: rgba(140, 190, 255, .16); color: #EAF2FF; box-shadow: inset 0 0 0 1px rgba(140, 190, 255, .25); } .mmt .bfl > i { background: #8EC2FF; box-shadow: 0 0 10px rgba(142, 194, 255, .8); }
.htl .bfl { background: rgba(255, 230, 190, .2); color: #FFF7EA; box-shadow: inset 0 0 0 1px rgba(255, 230, 190, .3); } .htl .bfl > i { background: #FFD879; box-shadow: 0 0 10px rgba(255, 216, 121, .8); }
.bdoor { width: 54px; height: 40px; margin: 6px auto 0; border-radius: 6px 6px 0 0; }
.mmt .bdoor { background: linear-gradient(90deg, #8EC2FF33, #8EC2FF66, #8EC2FF33); box-shadow: inset 0 0 0 3px #3B4C6B; } .htl .bdoor { border-radius: 27px 27px 0 0; background: #4A2A1B; box-shadow: inset 0 0 0 3px #C7774C; }
.mm-link { align-self: center; display: flex; align-items: center; gap: 6px; margin-bottom: 18%; }
.lk-l { width: clamp(16px, 3vw, 46px); height: 0; border-top: 3px dashed color-mix(in srgb, var(--mr) 55%, transparent); }
.lk-c { display: grid; justify-items: center; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: 0 20px 40px -20px rgba(19, 35, 58, .5), inset 0 0 0 2px color-mix(in srgb, var(--mr) 35%, transparent); opacity: 0; scale: .7; transition: opacity .5s .9s, scale .8s var(--spring) .9s; }
.mm-blds.in .lk-c { opacity: 1; scale: 1; }
.lk-bell { font-size: 26px; animation: mmring 2.6s ease-in-out 2.4s infinite; display: inline-block; }
@keyframes mmring { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-14deg); } 85% { transform: rotate(12deg); } }
.lk-c b { font: 800 15px/1.1 var(--sans); } .lk-c small { font: 600 11.5px/1 var(--sans); color: var(--ink-2); }
:root[data-theme="dark"] .bsign img[alt="MakeMyTrip"] { background: #fff; border-radius: 6px; padding: 2px 4px; }
@media (max-width: 860px) { .mm-blds { grid-template-columns: 1fr; align-items: stretch; gap: 0; } .mm-link { flex-direction: column; margin: 0; } .lk-l { width: 0; height: 26px; border-top: 0; border-left: 3px dashed color-mix(in srgb, var(--mr) 55%, transparent); } }
/* iterations: nav sits still under the tracker */
.mm-tra { justify-content: center; margin: 0 0 clamp(18px, 3vh, 28px); display: flex; gap: 10px; }
.mm-tra button { padding: 13px 22px; border-radius: 999px; font: 700 14.5px/1 var(--sans); background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .3s var(--spring), opacity .3s; min-width: 150px; }
.mm-tra button[data-d="-1"] { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); min-width: 0; }
.mm-tra button:disabled { opacity: .35; cursor: default; }
.mm-tra button:hover:not(:disabled) { transform: translateY(-2px); }
.mm-trb { min-height: min(56vh, 520px); text-align: left; }
.mm-tr { text-align: center; }
/* arrivals: charcoal, not pitch black */
.mm-bd { background: #222; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6), inset 0 0 0 6px #2E2E2E; }
.mm-row { border-bottom-color: #333; text-align: left; }
.sf i { background: linear-gradient(180deg, #333 50%, #2B2B2B 50%); }
.sf i::after { background: #1F1F1F; }
/* signature: written as you scroll */
.mm-sig { position: relative; width: max-content; max-width: 100%; margin: 12px 0 0 auto; padding-right: 30px; clip-path: none !important; --sp: 0; }
.mm-sig .sg { display: block; font: 400 clamp(54px, 6vw, 84px)/1.1 "Mrs Saint Delafield", "Allura", "Snell Roundhand", "Segoe Script", cursive; color: #1F3A8A; clip-path: inset(-30% calc((1 - var(--sp)) * 100%) -30% 0); white-space: nowrap; padding: 0 6px; }
.mm-sig .pen { position: absolute; top: 18%; left: calc(var(--sp) * (100% - 30px)); font-size: 30px; transform: rotate(-10deg); opacity: calc(1 - max(0, (var(--sp) - .95) * 20)); pointer-events: none; }
/* footer paper edge */
.mm-hall.c3-scene { height: clamp(220px, 28vw, 380px); }
/* feedback, in every case study */
.fb { --fa: var(--c, #E4402A); max-width: 64rem; margin: 10vh auto 0; text-align: left; }
.fb-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); padding: clamp(24px, 4vw, 48px); border-radius: 32px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -56px rgba(19, 35, 58, .5); }
.fb-k { margin: 0; font: 800 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.fb h3 { margin: 14px 0 12px; font: 800 clamp(28px, 3vw, 40px)/1.05 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.fb-s { margin: 0; max-width: 34ch; font: 400 16.5px/1.55 var(--sans); color: var(--ink-2); }
.fb-me { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.fb-me img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fb-me b { display: block; font: 700 15px/1.2 var(--sans); } .fb-me small { display: block; margin-top: 2px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
.fb-f { display: grid; gap: 18px; align-content: start; }
.fb-f fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fb-lg, .fb-fl > span { display: block; margin: 0 0 9px; padding: 0; font: 700 13.5px/1 var(--sans); color: var(--ink); }
.fb-fl > span i { font-style: normal; color: var(--ink-2); font-weight: 600; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-c { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13.5px/1 var(--sans); color: var(--ink); background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent); transition: background .25s, box-shadow .25s, transform .3s var(--spring); }
.fb-c::before { content: "+"; font-weight: 700; color: var(--ink-2); transition: transform .3s var(--spring); }
.fb-c:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.fb-c.on { background: color-mix(in srgb, var(--fa) 12%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fa) 55%, transparent); }
.fb-c.on::before { content: "✓"; color: var(--fa); transform: scale(1.1); }
.fb-fl { display: block; }
.fb textarea, .fb input { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4.5%, transparent); color: var(--ink);
  font: 400 15.5px/1.45 var(--sans); box-shadow: inset 0 0 0 1px transparent; transition: background .2s, box-shadow .2s; resize: vertical; }
.fb textarea { min-height: 110px; }
.fb textarea::placeholder, .fb input::placeholder { color: color-mix(in srgb, var(--ink) 42%, transparent); }
.fb textarea:focus, .fb input:focus { outline: none; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--fa), 0 0 0 4px color-mix(in srgb, var(--fa) 14%, transparent); }
.fb .bad { box-shadow: inset 0 0 0 1.5px #D93025 !important; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fb-end { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fb-err { flex: 1; min-height: 18px; margin: 0; font: 600 13.5px/1.3 var(--sans); color: #D93025; }
.fb-go { --gk: var(--fa) !important; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1 var(--sans); transition: transform .3s var(--spring); }
.fb-go span { transition: transform .3s var(--spring); } .fb-go:hover span { transform: translateX(4px); }
.fb-go:disabled { opacity: .6; cursor: progress; }
.fb-done { grid-column: 2; align-self: center; display: grid; justify-items: center; gap: 10px; padding: 20px 0; text-align: center; animation: mmin .6s var(--spring); }
.fb-done span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, #2FA36B 14%, transparent); color: #1E8A55; font: 800 28px/1 var(--sans); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #2FA36B 45%, transparent); }
.fb-done b { font: 800 24px/1.2 var(--sans); letter-spacing: -.02em; } .fb-done p { margin: 0; max-width: 32ch; font: 400 16px/1.5 var(--sans); color: var(--ink-2); }
.fb-done[hidden], .fb-f[hidden] { display: none; }
:root[data-theme="dark"] .fb { --fa: #FFD86B; }
:root[data-theme="dark"] .fb-done span { color: #5BD69A; }
@media (max-width: 760px) { .fb-in { grid-template-columns: 1fr; border-radius: 26px; } .fb-row { grid-template-columns: 1fr; } .fb-done { grid-column: 1; } .fb-go { width: 100%; justify-content: center; } }
@media (max-width: 560px) { .fb-row { grid-template-columns: 1fr; } }

/* ===== phones: nothing plays on scroll; you tap to explore ===== */
.places { display: none; }
@media (max-width: 860px) {
  .valley { height: 100vh !important; height: 100svh !important; }
  .story { margin-top: 0 !important; height: auto !important; }
  .story-pin { position: relative !important; height: auto !important; padding: 12vh 0 10vh; overflow: visible; }
  #moveHint { display: none; }
  .ll-rev-track { height: auto !important; }
  .ll-rev-pin { position: relative !important; height: auto !important; padding: 12vh 0; }
  .box-track { height: 100vh !important; height: 100svh !important; }
  .places { display: flex; bottom: calc(var(--navh, 92px) + 8px); opacity: 1; animation: none; max-width: calc(100vw - 24px); }
  .places button { padding: 9px 12px; font-size: 13px; }
  .stage .sheet, .stage .sheet.left { bottom: calc(var(--navh, 92px) + 66px) !important; max-height: calc(100svh - var(--navh, 92px) - 150px) !important; }
  .hint, .scroll-cue { display: none !important; }
}
:root[data-theme="dark"] .places { background: rgba(34, 34, 34, .86); }
:root[data-theme="dark"] .places button { color: var(--ink); }

@property --sp { syntax: '<number>'; inherits: true; initial-value: 0; }
.mm-sig.ph { transition: --sp 2.6s cubic-bezier(.45, .05, .4, 1) .2s; }
.c3-step { display: none; }
@media (max-width: 860px) {
  .c3-step { position: absolute; z-index: 6; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
  .c3-step button { min-width: 44px; height: 44px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 14px/1 var(--sans); white-space: nowrap; }
  .c3-step button[data-sd="-1"] { padding: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); font-size: 22px; }
  .c3-step button:disabled { opacity: .35; }
  .c3-step .dots { display: flex; gap: 5px; }
  .c3-step .dots i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); transition: width .3s, background .3s; }
  .c3-step .dots i.on { width: 18px; border-radius: 3px; background: var(--ed, var(--coral)); }
  .c3-strip, #c3Strip { overflow-x: auto; scrollbar-width: none; }
}
:root[data-theme="dark"] .c3-step button:not([data-sd="-1"]) { background: #FFD86B; color: #1A1A1A; }

/* =========================================================
   MakeMyTrip · Swipr.AI — hotel hunting like a first date
   ========================================================= */
@property --sv { syntax: '<number>'; initial-value: 0; inherits: false; }
.cs.sw { --s1: #FF3D9A; --s2: #8B5CF6; --s3: #22A6F2; --sg: linear-gradient(95deg, #FF3D9A, #8B5CF6 52%, #22A6F2);
  --paper: #FBF8FF; --card: #FFFFFF; --ink: #1E1830; --ink-2: #5C5670; --line: rgba(60, 40, 110, .12); --c: #8B5CF6;
  background: var(--paper); color: var(--ink); overflow-y: auto; overflow-x: hidden; }
:root[data-theme="dark"] .cs.sw { --paper: #17141F; --card: #221E2E; --ink: #F3F0FA; --ink-2: #C4BED3; --line: rgba(220, 210, 255, .14); --c: #C4A8FF; background: var(--paper) !important; }
.cs.sw .sw-bar { background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
:root[data-theme="dark"] .cs.sw .sw-bar { background: color-mix(in srgb, var(--paper) 84%, transparent) !important; }
.sw-bar .cs-close { white-space: nowrap; }
.sw-bk { display: inline-flex; align-items: center; gap: 8px; font: 800 15px/1 var(--sans); letter-spacing: -.02em; background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-bk img { width: 24px; height: 24px; animation: swspin 8s linear infinite; }
.sw-pg { position: relative; overflow-x: clip; text-align: center; }
.sw .g { background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sw [data-rv] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate 1s var(--ease); }
.sw [data-rv].in { opacity: 1; translate: 0 0; }
@keyframes swspin { to { rotate: 360deg; } }
@keyframes swfloat { 50% { translate: 0 -10px; } }
@keyframes swpulse { 50% { scale: 1.08; filter: saturate(1.4) brightness(1.08); } }

/* aurora behind the hero */
.sw-aur { position: absolute; inset: 0 0 auto; height: 110vh; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.sw-aur i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .32; animation: swdrift 18s ease-in-out infinite alternate; }
.sw-aur i:nth-child(1) { left: -12vmax; top: -14vmax; background: var(--s1); }
.sw-aur i:nth-child(2) { right: -14vmax; top: -6vmax; background: var(--s3); animation-delay: -6s; }
.sw-aur i:nth-child(3) { left: 30%; top: 22vh; width: 34vmax; height: 34vmax; background: var(--s2); opacity: .22; animation-delay: -11s; }
:root[data-theme="dark"] .sw-aur i { opacity: .26; }
@keyframes swdrift { 50% { transform: translate(6vmax, 4vmax) scale(1.12); } 100% { transform: translate(-4vmax, 7vmax) scale(.94); } }

/* hero: centred words, then the deck you can actually swipe */
.sw-hero { position: relative; z-index: 1; max-width: 80rem; margin: 0 auto; padding: 6vh clamp(16px, 4vw, 48px) 2vh; box-sizing: border-box; }
.sw-hw > * { opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease), translate 1s var(--ease); }
.sw-hero.in .sw-hw > * { opacity: 1; translate: 0 0; }
.sw-hero.in .sw-hw > :nth-child(2) { transition-delay: .1s; } .sw-hero.in .sw-hw > :nth-child(4) { transition-delay: .55s; } .sw-hero.in .sw-hw > :nth-child(5) { transition-delay: .7s; }
.sw-brand { display: inline-flex; padding: 12px 22px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: 0 14px 30px -18px rgba(90, 50, 170, .5), inset 0 0 0 1px rgba(255, 255, 255, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sw-brand img { display: block; height: clamp(26px, 2.6vw, 36px); width: auto; }
.sw-k { margin: 26px 0 0; font: 700 13px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sw-t { margin: 16px auto 0; font: 800 clamp(44px, 7vw, 108px)/.98 var(--sans); letter-spacing: -.06em; opacity: 1 !important; translate: none !important; }
.sw-t .ln { display: block; overflow: hidden; padding-bottom: .08em; }
.sw-t .ln > span { display: inline-block; translate: 0 105%; transition: translate 1.1s var(--ease); }
.sw-t .ln:nth-child(2) > span { transition-delay: .14s; }
.sw-hero.in .sw-t .ln > span { translate: 0 0; }
.sw-lead { margin: 22px auto 0; max-width: 46ch; font: 400 clamp(17px, 1.35vw, 21px)/1.55 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.sw-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.sw-meta li { padding: 10px 16px; border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 600 14px/1 var(--sans); }
.sw-meta b { margin-right: 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

.sw-prompt { grid-area: p; justify-self: center; display: flex; align-items: center; gap: 10px; width: min(560px, 100%); min-height: 58px; padding: 8px 14px 8px 10px; box-sizing: border-box; border-radius: 999px; text-align: left;
  background: color-mix(in srgb, var(--card) 86%, transparent); font: 500 15px/1.35 var(--sans); color: var(--ink);
  box-shadow: 0 0 0 1.5px transparent, 0 18px 40px -22px rgba(110, 60, 200, .55); position: relative; isolation: isolate; }
.sw-prompt::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--a, 0deg), #FF3D9A, #8B5CF6, #22A6F2, #FF3D9A); animation: swring 4s linear infinite; }
.sw-prompt::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--card); }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes swring { to { --a: 360deg; } }
.sw-prompt .orb { width: 34px; height: 34px; flex: none; animation: swspin 6s linear infinite; }
#swType { flex: 1; min-width: 0; }
.sw-prompt .caret { width: 2px; height: 18px; background: var(--s2); animation: swblink 1s steps(1) infinite; margin-left: -8px; }
@keyframes swblink { 50% { opacity: 0; } }
.sw-prompt .mic { display: flex; align-items: center; gap: 3px; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--sg); }
.sw-prompt .mic i { width: 3px; height: 10px; border-radius: 2px; background: #fff; animation: swwave 1s ease-in-out infinite; }
.sw-prompt .mic i:nth-child(2) { animation-delay: -.3s; } .sw-prompt .mic i:nth-child(3) { animation-delay: -.6s; }
@keyframes swwave { 50% { height: 20px; } }

.sw-card { position: absolute; inset: 0 0 auto; height: 350px; border-radius: 26px; background: var(--card); overflow: hidden; text-align: left; cursor: grab;
  box-shadow: 0 24px 44px -26px rgba(70, 30, 140, .55), inset 0 0 0 1px var(--line);
  translate: 0 calc(var(--k, 0) * 13px); scale: calc(1 - var(--k, 0) * .05); transform-origin: 50% 100%;
  transition: transform .5s var(--ease), translate .5s var(--ease), scale .5s var(--ease), opacity .5s; }
.sw-card:not(.top) { pointer-events: none; }
.sw-card.drag { transition: none; cursor: grabbing; }
.sw-card.out { opacity: 0; pointer-events: none; transition: transform .6s var(--ease), opacity .5s .1s; }
.sw-card .ph { position: relative; height: 236px; }
.sw-card .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 0 50%; display: block; pointer-events: none; }
.sw-card .st { position: absolute; top: 22px; padding: 6px 12px; border: 3px solid; border-radius: 10px; font: 900 26px/1 var(--sans); letter-spacing: .06em; background: rgba(255, 255, 255, .85); }
.sw-card .like { left: 18px; color: #12A36A; rotate: -14deg; opacity: clamp(0, var(--dx, 0), 1); }
.sw-card .nope { right: 18px; color: #F0396B; rotate: 14deg; opacity: clamp(0, calc(var(--dx, 0) * -1), 1); }
.sw-card[data-v="y"] .like, .sw-card[data-v="n"] .nope { opacity: 1; }
.sw-card .ph em { position: absolute; left: 12px; bottom: 12px; padding: 7px 11px; border-radius: 999px; background: var(--sg); color: #fff; font: 700 12.5px/1 var(--sans); font-style: normal; box-shadow: 0 8px 18px -8px rgba(139, 92, 246, .8); }
.sw-card.smart { box-shadow: 0 24px 44px -26px rgba(70, 30, 140, .55), inset 0 0 0 2px var(--s2); }
.sw-card .bd { padding: 16px 18px; display: grid; gap: 8px; }
.sw-card .r1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sw-card .r1 b { font: 800 19px/1.15 var(--sans); letter-spacing: -.02em; }
.sw-card .r1 span { font: 800 17px/1 var(--sans); white-space: nowrap; }
.sw-card.smart .r1 span { background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-card .r2 { display: flex; align-items: center; gap: 8px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.sw-card .r2 i { padding: 5px 7px; border-radius: 7px; background: #2563EB; color: #fff; font: 800 12px/1 var(--sans); font-style: normal; }
.sw-card .r3 { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-card .r3 span { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--s2) 10%, transparent); color: color-mix(in srgb, var(--s2) 80%, var(--ink)); font: 600 12.5px/1 var(--sans); }
.sw-think, .sw-match { position: absolute; inset: 0 0 26px; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 26px; padding: 20px;
  background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; scale: .96; pointer-events: none; transition: opacity .4s, scale .5s var(--spring); }
.sw-think.on, .sw-match.on { opacity: 1; scale: 1; pointer-events: auto; }
.sw-think img { width: 84px; height: 84px; animation: swspin 1.4s linear infinite, swpulse 1.2s ease-in-out infinite; }
.sw-think b { font: 800 19px/1.2 var(--sans); } .sw-think span { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.sw-match { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--s1) 50%, transparent); }
.sw-match .k { margin: 0; font: 900 clamp(26px, 3vw, 34px)/1 var(--sans); letter-spacing: -.03em; background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-match img { width: 220px; height: 120px; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 30px -16px rgba(70, 30, 140, .6); }
.sw-match b { font: 800 19px/1.2 var(--sans); } .sw-match span { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.sw-match button { margin-top: 6px; padding: 12px 18px; border-radius: 999px; background: var(--sg); color: #fff; font: 700 14px/1 var(--sans); cursor: pointer; }
@keyframes swpop { from { scale: .6; opacity: 0; } }

/* sections */
.sw-sec { position: relative; z-index: 1; max-width: 76rem; margin: 0 auto; padding: 18vh clamp(16px, 4vw, 48px) 0; box-sizing: border-box; }
.sw-pl { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 80%, transparent); box-shadow: inset 0 0 0 1px var(--line); font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sw-pl span { padding: 7px 10px; border-radius: 999px; background: var(--sg); color: #fff; letter-spacing: .06em; }
.sw-h { margin: 0 auto 4vh; max-width: 20ch; font: 800 clamp(34px, 5vw, 72px)/1.02 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.sw-p { margin: -1vh auto 5vh; max-width: 58ch; font: 400 clamp(16px, 1.25vw, 19px)/1.6 var(--sans); color: var(--ink-2); text-wrap: pretty; }

/* the problem */
.sw-same { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); max-width: 860px; margin: 0 auto; padding-bottom: 54px; }
.sw-same::after { content: "Same list. Every person."; position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding: 9px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 800 14px/1 var(--sans); white-space: nowrap; rotate: -2deg; scale: 0; transition: scale .6s var(--spring) 1.4s; }
.sw-same.in::after { scale: 1; }
.sw-u { padding: 16px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -26px rgba(70, 30, 140, .5); text-align: left; }
.sw-u p { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 800 15px/1.2 var(--sans); }
.sw-u p span { font-size: 22px; }
.sw-u ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; counter-reset: u; }
.sw-u li { counter-increment: u; display: flex; gap: 8px; padding: 9px 10px; border-radius: 11px; background: color-mix(in srgb, var(--ink) 4%, transparent); font: 600 13.5px/1.2 var(--sans);
  opacity: 0; translate: 0 10px; transition: opacity .5s, translate .6s var(--ease); }
.sw-u li::before { content: counter(u); color: var(--ink-2); font-weight: 800; }
.sw-same.in li { opacity: 1; translate: 0 0; }
.sw-same.in li:nth-child(2) { transition-delay: .15s; } .sw-same.in li:nth-child(3) { transition-delay: .3s; } .sw-same.in li:nth-child(4) { transition-delay: .45s; }
.sw-same.in .sw-u:nth-child(2) li { transition-delay: calc(.2s + var(--x, 0s)); } .sw-same.in .sw-u:nth-child(3) li { transition-delay: calc(.4s + var(--x, 0s)); }
.sw-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(22px, 4vw, 56px); max-width: 860px; margin: 14vh auto 0; text-align: left; }
.sw-top .sq { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: clamp(200px, 24vw, 280px); }
.sw-top .sq i { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.sw-top .sq i.t { background: var(--sg); background-size: 1000% 100%; box-shadow: 0 0 14px rgba(255, 61, 154, .55); animation: swpulse 2s ease-in-out infinite; }
.sw-top .sq i.t:nth-child(1) { background-position: 0 0; } .sw-top .sq i.t:nth-child(2) { background-position: 25% 0; } .sw-top .sq i.t:nth-child(3) { background-position: 50% 0; } .sw-top .sq i.t:nth-child(4) { background-position: 75% 0; } .sw-top .sq i.t:nth-child(5) { background-position: 100% 0; }
.sw-top .tx b { display: block; font: 800 clamp(26px, 3vw, 40px)/1.12 var(--sans); letter-spacing: -.035em; }
.sw-top .tx p { margin: 14px 0 0; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.sw-list { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 380px); justify-content: center; align-items: center; gap: clamp(24px, 4vw, 60px); margin: 14vh auto 0; }
.sw-lc { position: relative; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -26px rgba(70, 30, 140, .55); text-align: left; }
.sw-lc .lph { height: 170px; border-radius: 22px 22px 0 0; overflow: hidden; } .sw-lc .lph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5); }
.sw-lc .lbd { padding: 16px; display: grid; gap: 9px; } .sw-lc .lbd b { font: 800 18px/1.2 var(--sans); }
.sw-lc .l { display: block; height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.sw-lc .l.sm { height: 7px; } .sw-lc .w30 { width: 30%; } .sw-lc .w40 { width: 40%; } .sw-lc .w60 { width: 60%; } .sw-lc .w80 { width: 80%; }
.sw-lc .lfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .sw-lc .lfoot span { font: 800 16px/1 var(--sans); }
.sw-lc .hs { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 800 14px/1 var(--sans); cursor: pointer; transition: transform .3s var(--spring), background .3s; }
.sw-lc .hs::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--s1); opacity: .7; animation: swping 1.8s ease-out infinite; }
@keyframes swping { to { inset: -16px; opacity: 0; } }
.sw-lc .hs.on { background: var(--sg); color: #fff; transform: scale(1.15); }
.sw-lc .h0 { right: 98px; bottom: 8px; } .sw-lc .h1 { right: 14px; top: 14px; } .sw-lc .h2 { left: 14px; top: 14px; } .sw-lc .h3 { right: 22%; top: 214px; }
.sw-iss { text-align: left; min-height: 210px; animation: swpop .5s var(--ease); }
.sw-iss .n { margin: 0; font: 800 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--s1); }
.sw-iss b { display: block; margin: 12px 0 10px; font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--sans); letter-spacing: -.03em; }
.sw-iss p { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.sw-iss .q { display: inline-block; margin-top: 18px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--s2) 10%, transparent); font: 600 14px/1.3 var(--sans); color: color-mix(in srgb, var(--s2) 75%, var(--ink)); }

/* competitors: a deck you flick through */

/* data */
.sw-ai { position: relative; max-width: 720px; margin: 10vh auto 0; padding: clamp(28px, 4vw, 48px); border-radius: 30px; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(80% 90% at 0% 0%, #FF3D9A, transparent 60%), radial-gradient(80% 90% at 100% 100%, #22A6F2, transparent 60%), #6D45E8; box-shadow: 0 40px 70px -40px rgba(109, 69, 232, .9); }
.sw-ai .orb { width: 70px; height: 70px; animation: swspin 7s linear infinite, swfloat 4s ease-in-out infinite; }
.sw-ai .k { margin: 14px 0 0; font: 800 12.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.sw-ai .q { margin: 14px auto 0; max-width: 24ch; font: 800 clamp(24px, 2.8vw, 36px)/1.15 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.sw-ai .d { margin: 16px auto 0; max-width: 52ch; font: 400 17px/1.55 var(--sans); opacity: .92; }

/* goal */
.sw-eq { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.sw-eq span { padding: 16px 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 700 16px/1 var(--sans); }
.sw-eq b { font: 800 26px/1 var(--sans); color: var(--ink-2); }
.sw-eq .res { display: inline-flex; align-items: center; gap: 10px; background: var(--sg); color: #fff; box-shadow: 0 18px 30px -16px rgba(139, 92, 246, .9); }
.sw-eq .res img { width: 26px; height: 26px; animation: swspin 5s linear infinite; }
.sw-eq > * { opacity: 0; scale: .8; transition: opacity .4s, scale .6s var(--spring); }
.sw-eq.in > * { opacity: 1; scale: 1; }
.sw-eq.in > :nth-child(2) { transition-delay: .12s; } .sw-eq.in > :nth-child(3) { transition-delay: .24s; } .sw-eq.in > :nth-child(4) { transition-delay: .36s; } .sw-eq.in > :nth-child(5) { transition-delay: .48s; } .sw-eq.in > :nth-child(6) { transition-delay: .7s; } .sw-eq.in > :nth-child(7) { transition-delay: .9s; }

/* idea: the learning loop */
.sw-loop { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px, 6vw, 90px); max-width: 820px; margin: 0 auto; }
.sw-loop::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; z-index: -1; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--s2) 50%, transparent) 0 8px, transparent 8px 16px); }
.sw-loop .lp { position: relative; display: grid; justify-items: center; gap: 6px; padding: 22px 16px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -28px rgba(70, 30, 140, .5); }
.sw-loop .lp span { font-size: 36px; } .sw-loop .lp b { font: 800 18px/1.1 var(--sans); } .sw-loop .lp small { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.sw-loop .l span { animation: swnudgeL 1.6s ease-in-out infinite; } .sw-loop .r span { animation: swnudgeR 1.6s ease-in-out infinite; }
@keyframes swnudgeL { 50% { translate: -8px 0; rotate: -10deg; } } @keyframes swnudgeR { 50% { translate: 8px 0; rotate: 10deg; } }
.sw-loop .c { padding: 26px 24px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--s2) 40%, transparent), 0 24px 60px -20px rgba(139, 92, 246, .6); }
.sw-loop .c img { width: 92px; height: 92px; animation: swspin 6s linear infinite, swpulse 2.4s ease-in-out infinite; }
.sw-loop .l::after, .sw-loop .r::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--s1); box-shadow: 0 0 12px var(--s1); }
.sw-loop .l::after { left: 100%; animation: swdotL 2s linear infinite; } .sw-loop .r::after { right: 100%; background: var(--s3); box-shadow: 0 0 12px var(--s3); animation: swdotR 2s linear infinite; }
@keyframes swdotL { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { translate: clamp(20px, 6vw, 90px) 0; opacity: 0; } }
@keyframes swdotR { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { translate: calc(clamp(20px, 6vw, 90px) * -1) 0; opacity: 0; } }
.sw-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); max-width: 900px; margin: 10vh auto 0; }
.sw-nums > div { padding: 24px 18px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.sw-nums b { display: block; font: 900 clamp(40px, 5vw, 64px)/1 var(--sans); letter-spacing: -.05em; background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.sw-nums span { display: block; margin-top: 10px; font: 500 15px/1.45 var(--sans); color: var(--ink-2); }

/* how it works */

/* the prototype, as stories */

/* impact gauges */
.sw-gauges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.sw-g { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 22px 14px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.sw-g .ring { --sv: 0; position: relative; display: grid; place-content: center; justify-items: center; width: 120px; aspect-ratio: 1; border-radius: 50%; margin-bottom: 8px;
  background: conic-gradient(from -90deg, #FF3D9A, #8B5CF6 calc(var(--sv) * .5%), #22A6F2 calc(var(--sv) * 1%), color-mix(in srgb, var(--ink) 8%, transparent) 0); transition: --sv 1.8s var(--ease); }
.sw-g .ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--card); }
.sw-g .ring > * { position: relative; }
.sw-gauges.in .sw-g .ring { --sv: var(--v); }
.sw-gauges.in .sw-g:nth-child(2) .ring { transition-delay: .15s; } .sw-gauges.in .sw-g:nth-child(3) .ring { transition-delay: .3s; } .sw-gauges.in .sw-g:nth-child(4) .ring { transition-delay: .45s; } .sw-gauges.in .sw-g:nth-child(5) .ring { transition-delay: .6s; }
.sw-g .ring b { font: 900 28px/1 var(--sans); letter-spacing: -.04em; } .sw-g .ring span { font-size: 18px; margin-top: 2px; }
.sw-g .t { margin: 0; font: 800 15.5px/1.25 var(--sans); } .sw-g .d { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); }

/* result */
.sw-win { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 40px); }
.sw-win figure { margin: 0; padding: 12px 12px 14px; border-radius: 6px; background: #fff; box-shadow: 0 30px 50px -30px rgba(40, 20, 80, .55); transition: transform .5s var(--spring); }
.sw-win .p1 { rotate: -3deg; } .sw-win .p2 { rotate: 4deg; }
.sw-win figure:hover { transform: scale(1.03) rotate(0deg); }
.sw-win img { display: block; width: 100%; height: auto; border-radius: 3px; cursor: zoom-in; }
.sw-win figcaption { margin-top: 10px; font: 600 13.5px/1.3 var(--sans); color: #4A445A; }
.sw-rt { display: grid; justify-items: center; gap: 10px; }
.sw-rt .cup { font-size: 64px; animation: swfloat 3s ease-in-out infinite; }
.sw-rt b { font: 900 clamp(30px, 3.4vw, 46px)/1 var(--sans); letter-spacing: -.04em; background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-rt p { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
.sw-win .hearts { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: visible; }
.sw-win .hearts i { position: absolute; bottom: 10%; font-style: normal; font-size: 20px; color: var(--s1); opacity: 0; }
.sw-win.in .hearts i { animation: swheart 3.4s ease-out infinite; }
.sw-win .hearts i:nth-child(odd) { color: var(--s2); } .sw-win .hearts i:nth-child(3n) { color: var(--s3); }
.sw-win .hearts i:nth-child(1) { left: 36%; animation-delay: 0s; } .sw-win .hearts i:nth-child(2) { left: 42%; animation-delay: .4s; } .sw-win .hearts i:nth-child(3) { left: 48%; animation-delay: .9s; } .sw-win .hearts i:nth-child(4) { left: 54%; animation-delay: 1.3s; } .sw-win .hearts i:nth-child(5) { left: 60%; animation-delay: 1.8s; }
.sw-win .hearts i:nth-child(6) { left: 39%; animation-delay: 2.1s; } .sw-win .hearts i:nth-child(7) { left: 45%; animation-delay: 2.5s; } .sw-win .hearts i:nth-child(8) { left: 51%; animation-delay: 2.8s; } .sw-win .hearts i:nth-child(9) { left: 57%; animation-delay: 3.1s; } .sw-win .hearts i:nth-child(10) { left: 63%; animation-delay: .6s; }
@keyframes swheart { 0% { opacity: 0; translate: 0 0; scale: .6; } 15% { opacity: 1; } 100% { opacity: 0; translate: 20px -260px; scale: 1.3; rotate: 20deg; } }

/* footer: cards drift up through a soft aurora, no hard line */
.sw-foot { position: relative; z-index: 1; padding-top: 16vh; }
.sw .c3-fin { text-align: center; padding-bottom: 6vh; }
.sw .c3-k { justify-content: center; margin: 0 0 18px; }
.sw-foot .c3-h .hl::before { opacity: .9; }
.sw-sky { height: clamp(260px, 32vw, 420px); overflow: hidden; background: linear-gradient(180deg, var(--paper), color-mix(in srgb, var(--s2) 22%, var(--paper)) 55%, color-mix(in srgb, var(--s1) 28%, var(--paper))); }
.sw-sky .fc { position: absolute; bottom: -120px; left: calc(8% + var(--i) * 19%); width: clamp(110px, 12vw, 160px); padding: 6px 6px 22px; border-radius: 12px; background: #fff; box-shadow: 0 20px 34px -18px rgba(70, 30, 140, .6);
  animation: swrise 11s linear infinite; animation-delay: calc(var(--i) * -2.3s); }
.sw-sky .fc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.sw-sky .fc b { position: absolute; right: 10px; bottom: 3px; font-size: 15px; color: var(--s1); }
.sw-sky .fc:nth-child(even) { animation-duration: 13s; }
@keyframes swrise { 0% { translate: 0 0; rotate: -6deg; } 50% { rotate: 6deg; } 100% { translate: 0 calc(-1 * clamp(260px, 32vw, 420px) - 160px); rotate: -4deg; } }
.sw-sky .ht { position: absolute; bottom: -30px; font-style: normal; font-size: 18px; color: #fff; opacity: .9; animation: swrise 7s linear infinite; }
.sw-sky .ht:nth-child(6) { left: 5%; } .sw-sky .ht:nth-child(7) { left: 14%; animation-delay: -1s; } .sw-sky .ht:nth-child(8) { left: 23%; animation-delay: -4s; } .sw-sky .ht:nth-child(9) { left: 33%; animation-delay: -2.5s; }
.sw-sky .ht:nth-child(10) { left: 44%; animation-delay: -5.5s; } .sw-sky .ht:nth-child(11) { left: 52%; animation-delay: -3s; } .sw-sky .ht:nth-child(12) { left: 61%; animation-delay: -6s; } .sw-sky .ht:nth-child(13) { left: 70%; animation-delay: -.5s; }
.sw-sky .ht:nth-child(14) { left: 78%; animation-delay: -3.6s; } .sw-sky .ht:nth-child(15) { left: 86%; animation-delay: -1.8s; } .sw-sky .ht:nth-child(16) { left: 93%; animation-delay: -4.8s; } .sw-sky .ht:nth-child(17) { left: 98%; animation-delay: -2.2s; }

/* lightbox */
.sw-lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(20, 14, 34, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s; cursor: zoom-out; }
.sw-lb.open { opacity: 1; pointer-events: auto; }
.sw-lb img { max-width: min(1100px, 100%); max-height: 88vh; border-radius: 14px; scale: .94; transition: scale .4s var(--spring); }
.sw-lb.open img { scale: 1; }
.sw-lb .x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #1E1830; font: 700 24px/1 var(--sans); cursor: pointer; }

/* dark */
:root[data-theme="dark"] .sw-brand { background: rgba(255, 255, 255, .92); }
:root[data-theme="dark"] .sw-card .st { background: rgba(255, 255, 255, .92); }
:root[data-theme="dark"] .sw-same::after { background: #F3F0FA; color: #17141F; }
:root[data-theme="dark"] .sw-lc .hs { background: #F3F0FA; color: #17141F; }
:root[data-theme="dark"] .sw-lc .hs.on, :root[data-theme="dark"] .sw-ctrl .yes { color: #fff; }
:root[data-theme="dark"] .sw-foot .c3-h .hl .w { color: #1E1830; }

@media (max-width: 1100px) {
  .sw-gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sw-hero { padding-top: 4vh; }
  .sw-prompt { font-size: 13.5px; min-height: 54px; }
  .sw-sec { padding-top: 13vh; }
  .sw-same { grid-template-columns: 1fr; max-width: 360px; }
  .sw-same .sw-u:not(:first-child) ol { display: none; }
  .sw-u p { white-space: nowrap; }
  .sw-lc .h0 { right: 112px; }
  .sw-meta li { padding: 9px 13px; font-size: 13px; }
  .sw-same .sw-u:not(:first-child) p::after { content: "Same 4 hotels, same order"; margin-left: auto; font: 600 12.5px/1 var(--sans); color: var(--ink-2); }
  .sw-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sw-list { grid-template-columns: minmax(0, 340px); }
  .sw-iss { text-align: center; min-height: 230px; }
  .sw-loop { grid-template-columns: 1fr; max-width: 300px; gap: 14px; }
  .sw-loop::before { left: 50%; right: auto; top: 8%; bottom: 8%; width: 2px; height: auto; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--s2) 50%, transparent) 0 8px, transparent 8px 16px); }
  .sw-loop .l::after, .sw-loop .r::after { display: none; }
  .sw-nums { grid-template-columns: 1fr; max-width: 360px; }
  .sw-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-gauges .sw-g:last-child { grid-column: 1 / -1; }
  .sw-g .ring { width: 100px; }
  .sw-win { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .sw-win .p2 { width: 82%; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sw-aur i, .sw-sky .fc, .sw-sky .ht, .sw-win .hearts i, .sw-loop *, .sw-loop *::after { animation: none !important; }
}

/* =========================================================
   Glass chrome: map controls, labels, CTAs and the Day/Night toggle
   ========================================================= */
:root { --gl-bg: rgba(255, 255, 255, .34); --gl-bg-h: rgba(255, 255, 255, .5); --gl-ring: rgba(255, 255, 255, .72); --gl-ink: #13233A; --gl-blur: blur(16px) saturate(1.7);
  --gl-sh: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 28px -16px rgba(19, 35, 58, .5); }
:root[data-theme="dark"] { --gl-bg: rgba(38, 38, 38, .38); --gl-bg-h: rgba(60, 60, 60, .5); --gl-ring: rgba(255, 255, 255, .18); --gl-ink: #F5F5F5;
  --gl-sh: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 28px -14px rgba(0, 0, 0, .7); }
.theme-btn, .np, .mapctl .grp, .mapctl .solo, .jtl, .jcar, .jtl-view, .mk .nm, .journey.jcm .jcar, .journey.over .jtl-view {
  background: var(--gl-bg) !important; color: var(--gl-ink) !important; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur);
  box-shadow: inset 0 0 0 1px var(--gl-ring), var(--gl-sh) !important; }
.theme-btn:hover, .np:hover, .mapctl button:hover, .jtl-view:hover { background: var(--gl-bg-h) !important; }
.mapctl .grp .solo, .mapctl .grp button { background: transparent !important; box-shadow: none !important; }
.mapctl button { color: var(--gl-ink); } .mapctl button + button { border-top-color: var(--gl-ring); } .mapctl .solo { color: #4285F4 !important; }
:root[data-theme="dark"] .theme-btn { color: #FFD86B !important; }
:root[data-theme="dark"] .theme-btn .tl { color: var(--gl-ink); }
.jtl .yr, #jcCount { color: var(--gl-ink) !important; }
.jtl ol::before { background: var(--gl-ring); }
.jtl button::before, :root[data-theme="dark"] .jtl button::before { background: var(--gl-bg-h); }
.jtl button.done::before, .jtl button.on::before, :root[data-theme="dark"] .jtl button.done::before, :root[data-theme="dark"] .jtl button.on::before { background: var(--c); }
/* the map's buttons: tinted glass, never a solid fill */
.jcar button, :root[data-theme="dark"] .jcar button { background: rgba(255, 255, 255, .22); color: var(--gl-ink); box-shadow: inset 0 0 0 1px var(--gl-ring); }
.jcar .nx, :root[data-theme="dark"] .jcar .nx { background: rgba(255, 255, 255, .42); color: var(--gl-ink); box-shadow: inset 0 0 0 1.5px var(--gl-ring), 0 8px 18px -10px rgba(19, 35, 58, .5); }
:root[data-theme="dark"] .jcar button, :root[data-theme="dark"] .jcar .nx { background: rgba(255, 255, 255, .1); }
.mk.on .nm, :root[data-theme="dark"] .mk.on .nm { background: color-mix(in srgb, var(--c) 26%, var(--gl-bg)) !important; color: var(--gl-ink) !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, var(--gl-ring)), 0 10px 22px -12px var(--c) !important; }
.jcard .cbtn, .poi.link { background: color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, .45)); color: color-mix(in srgb, var(--c) 82%, #13233A);
  backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 42%, transparent), inset 0 1px 0 rgba(255, 255, 255, .7), 0 10px 22px -14px var(--c); }
.jcard .cbtn:hover, .poi.link:hover { background: color-mix(in srgb, var(--c) 22%, rgba(255, 255, 255, .5)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent), 0 14px 26px -12px var(--c); }
:root[data-theme="dark"] .jcard .cbtn, :root[data-theme="dark"] .poi.link { background: color-mix(in srgb, var(--c) 20%, rgba(255, 255, 255, .06)); color: color-mix(in srgb, var(--c) 45%, #fff); }
.places { background: var(--gl-bg); backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); box-shadow: inset 0 0 0 1px var(--gl-ring), var(--gl-sh); }
.places button { color: var(--gl-ink); }
.places button:hover, .places button.on { background: var(--gl-bg-h); box-shadow: inset 0 0 0 1px var(--gl-ring); }
/* the compass becomes a glass dial */
.compass::before { content: ""; position: absolute; inset: 3.7%; border-radius: 50%; backdrop-filter: var(--gl-blur); -webkit-backdrop-filter: var(--gl-blur); }
.compass svg { position: relative; }
.compass svg > circle:first-child, :root[data-theme="dark"] .compass svg > circle:first-child { fill: var(--gl-bg); stroke: var(--gl-ring); stroke-width: 1.5; }
.compass svg > circle:nth-child(2) { stroke: var(--gl-ink); opacity: .5; }
.compass text, :root[data-theme="dark"] .compass text { fill: var(--gl-ink); }


/* ===== Swipr round 2 ===== */
.sw-play { display: grid; justify-items: center; gap: 22px; margin-top: 6vh; opacity: 0; translate: 0 30px; transition: opacity .9s var(--ease) .8s, translate 1.1s var(--ease) .8s; }
.sw-hero.in .sw-play { opacity: 1; translate: 0 0; }
.sw-arena { position: relative; display: grid; grid-template-columns: auto 340px auto; align-items: center; gap: clamp(20px, 4vw, 60px); }
.sw-deck { position: relative; height: 364px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sw-act { display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.sw-act span { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; font: 800 30px/1 var(--sans); color: var(--gk);
  background: color-mix(in srgb, var(--gk) 10%, rgba(255, 255, 255, .55)); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gk) 35%, rgba(255, 255, 255, .7)), inset 0 1px 0 rgba(255, 255, 255, .8), 0 18px 34px -18px var(--gk);
  transition: transform .35s var(--spring), background .3s, box-shadow .3s; }
.sw-act small { font: 800 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sw-act.yes { --gk: #FF3D9A; } .sw-act.no { --gk: #6B5F86; }
.sw-act.yes span { scale: calc(1 + max(0, var(--lean, 0)) * .24); } .sw-act.no span { scale: calc(1 + max(0, var(--lean, 0) * -1) * .24); }
.sw-act:hover span { transform: translateY(-3px); background: color-mix(in srgb, var(--gk) 20%, rgba(255, 255, 255, .6)); }
.sw-act:active span { transform: scale(.92); }
:root[data-theme="dark"] .sw-act span { background: color-mix(in srgb, var(--gk) 18%, rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gk) 45%, rgba(255, 255, 255, .14)), 0 18px 34px -18px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .sw-act.no { --gk: #B7A8D9; }
.sw-learn { display: grid; justify-items: center; gap: 12px; min-height: 76px; }
.sw-learn .rr { display: flex; align-items: center; gap: 12px; font: 600 14.5px/1.2 var(--sans); color: var(--ink-2); }
.sw-learn .dots { display: flex; gap: 6px; }
.sw-learn .dots b { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 14%, transparent); transition: background .3s, scale .4s var(--spring); }
.sw-learn .dots b.on { background: var(--sg); scale: 1.25; }
.sw-learn .tg { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 520px; }
.sw-learn .tg span { padding: 8px 12px; border-radius: 999px; font: 700 13px/1 var(--sans); animation: swpop .45s var(--spring); }
.sw-learn .tg .p { background: color-mix(in srgb, #12A36A 13%, transparent); color: color-mix(in srgb, #12A36A 75%, var(--ink)); }
.sw-learn .tg .m { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sw-ask { width: min(560px, 100%); margin: 0 auto 6vh; }
/* competitors: the whole hand, face up */
.sw-hand { display: flex; justify-content: center; padding: 30px 0 10px; }
.sw-cc { position: relative; flex: none; display: grid; align-content: start; gap: 12px; width: 250px; margin: 0 -14px; padding: 24px 20px; box-sizing: border-box; border-radius: 26px; text-align: left; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 26px 46px -28px rgba(70, 30, 140, .55);
  rotate: calc((var(--i) - 1.5) * 5deg); translate: 0 var(--ty, 0px); transition: rotate .5s var(--spring), translate .5s var(--spring), scale .5s var(--spring), opacity .6s var(--ease); }
.sw-hand .sw-cc { opacity: 0; translate: 0 60px; } .sw-hand.in .sw-cc { opacity: 1; translate: 0 var(--ty, 0px); transition-delay: calc(var(--i) * 90ms); }
.sw-hand.in .sw-cc:hover { z-index: 5; rotate: 0deg; translate: 0 -22px; scale: 1.05; transition-delay: 0s; }
.sw-cc:nth-child(1), .sw-cc:nth-child(4) { --ty: 22px; } .sw-cc:nth-child(2), .sw-cc:nth-child(3) { --ty: 2px; }
.sw-cc .top { display: flex; align-items: center; gap: 12px; }
.sw-cc .top img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.sw-cc .top b { font: 800 20px/1.1 var(--sans); letter-spacing: -.03em; }
.sw-cc p { margin: 0; padding: 12px 14px; border-radius: 14px; font: 600 14.5px/1.35 var(--sans); }
.sw-cc p span { display: block; margin-bottom: 5px; font: 800 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.sw-cc .y { background: color-mix(in srgb, #12A36A 10%, transparent); } .sw-cc .y span { color: #12A36A; }
.sw-cc .n { background: color-mix(in srgb, #F0396B 8%, transparent); } .sw-cc .n span { color: #E0325F; }
.sw-cc.muse { box-shadow: inset 0 0 0 2px #FF3D9A, 0 30px 50px -26px rgba(255, 61, 154, .55); }
.sw-cc em { position: absolute; top: -14px; right: 14px; padding: 7px 11px; border-radius: 999px; background: var(--sg); color: #fff; font: 800 12.5px/1 var(--sans); font-style: normal; box-shadow: 0 10px 20px -10px rgba(255, 61, 154, .8); }
/* data: one smooth line */
.sw-chart { max-width: 820px; margin: 0 auto; padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 36px) 20px; border-radius: 30px; text-align: left; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(70, 30, 140, .5); }
.sw-chh { display: grid; gap: 4px; }
.sw-chh span { font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.sw-chh b { font: 900 clamp(56px, 7vw, 88px)/1 var(--sans); letter-spacing: -.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sw-chh small { font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.sw-plot svg { display: block; width: 100%; height: auto; overflow: visible; margin-top: 10px; }
.sw-plot .gl { stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 1; }
.sw-plot .ax { fill: var(--ink-2); font: 600 12px var(--sans); text-anchor: end; } .sw-plot .ax.x { text-anchor: middle; }
.sw-plot .area { fill: url(#swAg); } .sw-plot .ln { fill: none; stroke: url(#swLg); stroke-width: 3; stroke-linecap: round; }
.sw-plot .rev { transform: scaleX(0); transform-origin: 56px 0; transition: transform 2.2s cubic-bezier(.45, 0, .2, 1) .2s; }
.sw-chart.in .sw-plot .rev { transform: scaleX(1); }
.sw-plot .pt { opacity: 0; transition: opacity .5s var(--d); }
.sw-chart.in .sw-plot .pt { opacity: 1; }
.sw-plot .dot { fill: var(--card); stroke: #8B5CF6; stroke-width: 3; transition: r .3s var(--spring); }
.sw-plot .ring { fill: #8B5CF6; opacity: 0; transition: opacity .3s, r .4s var(--spring); }
.sw-plot .pt.on .ring { opacity: .18; r: 16px; } .sw-plot .pt.on .dot { r: 7px; }
.sw-plot .lb { fill: var(--ink-2); font: 800 14px var(--sans); text-anchor: middle; transition: fill .3s; } .sw-plot .pt.on .lb { fill: var(--ink); }
.sw-plot .hit { fill: transparent; cursor: pointer; }
.sw-plot .cross { stroke: color-mix(in srgb, #8B5CF6 45%, transparent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; transition: opacity .3s; } .sw-plot .cross.on { opacity: 1; }
.sw-chx { margin: 6px 0 0; text-align: center; font: 800 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
/* features: a bento of real screens */
.sw-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.sw-ft { display: grid; grid-template-rows: auto 1fr; padding: 0; border: 0; border-radius: 26px; overflow: hidden; text-align: left; cursor: zoom-in; font: inherit; color: var(--ink); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 44px -32px rgba(70, 30, 140, .55); opacity: 0; translate: 0 24px; transition: opacity .7s var(--ease), translate .8s var(--ease), transform .5s var(--spring), box-shadow .4s; transition-delay: calc(var(--i) * 70ms), calc(var(--i) * 70ms), 0s, 0s; }
.sw-bento.in .sw-ft { opacity: 1; translate: 0 0; }
.sw-ft:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s2) 35%, var(--line)), 0 34px 54px -30px rgba(70, 30, 140, .6); }
.sw-ft .shot { display: flex; justify-content: center; height: 250px; padding: 24px 20px 0; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(80% 80% at 50% 110%, color-mix(in srgb, var(--s2) 26%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--s1) 9%, transparent), color-mix(in srgb, var(--s3) 11%, transparent)); }
.sw-ft .shot img { width: 74%; height: auto; align-self: flex-start; filter: drop-shadow(0 16px 22px rgba(60, 30, 120, .3)); transition: transform .7s var(--ease); }
.sw-ft:hover .shot img { transform: translateY(-16px); }
.sw-ft .tx { display: grid; align-content: start; gap: 6px; padding: 16px 18px 20px; }
.sw-ft .tx i { font: 800 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; background: var(--sg); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-ft .tx b { font: 800 17px/1.2 var(--sans); letter-spacing: -.02em; }
.sw-ft .tx small { font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.sw-lb.tall img { width: auto; max-height: 88vh; border-radius: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
/* metrics: glass over a soft aurora */
.sw-gauges { position: relative; isolation: isolate; padding: 10px; }
.sw-gauges::before { content: ""; position: absolute; inset: 6% 4%; z-index: -1; filter: blur(46px); opacity: .55;
  background: radial-gradient(40% 70% at 15% 50%, #FF3D9A, transparent 70%), radial-gradient(40% 70% at 55% 40%, #8B5CF6, transparent 70%), radial-gradient(40% 70% at 90% 60%, #22A6F2, transparent 70%); }
.sw-g { background: rgba(255, 255, 255, .42) !important; backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 44px -30px rgba(70, 30, 140, .55) !important; }
.sw-g .ring::before { background: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .sw-gauges::before { opacity: .38; }
:root[data-theme="dark"] .sw-g { background: rgba(40, 32, 60, .45) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 44px -30px rgba(0, 0, 0, .8) !important; }
:root[data-theme="dark"] .sw-g .ring::before { background: rgba(30, 24, 46, .9); }
/* footer: torn paper over a soft aurora sky */
.sw-sky { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23281A0A'%20flood-opacity='.16'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%23FBF8FF'%20filter='url(%23s)'/%3E%3C/svg%3E"); background: linear-gradient(165deg, #FFD3EA, #DCCFFF 50%, #CDE6FF) !important; }
:root[data-theme="dark"] .sw-sky { --edge: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1600'%20height='60'%20viewBox='0%200%201600%2060'%3E%3Cfilter%20id='s'%20x='0'%20y='-50%'%20width='100%'%20height='200%'%3E%3CfeDropShadow%20dx='0'%20dy='-3'%20stdDeviation='3.5'%20flood-color='%23000'%20flood-opacity='.5'/%3E%3C/filter%3E%3Cpath%20d='M0%2060%20L0%2020.5%20L16%2017.0%20L28%2016.8%20L36%2030.1%20L44%2021.9%20L53%2019.1%20L73%2024.1%20L94%2016.7%20L105%2026.0%20L116%2027.4%20L131%2024.9%20L146%2024.9%20L156%2025.5%20L167%2024.2%20L178%2027.1%20L189%2024.0%20L208%2026.2%20L229%2017.7%20L246%2018.1%20L254%2025.4%20L269%2028.3%20L286%2024.3%20L299%2027.8%20L313%2033.3%20L330%2025.1%20L348%2020.0%20L364%2016.3%20L374%2025.6%20L391%2017.8%20L404%2036.2%20L417%2023.7%20L436%2028.1%20L449%2021.0%20L469%2018.1%20L479%2019.3%20L494%2027.7%20L507%2021.2%20L528%2025.7%20L543%2033.5%20L563%2026.9%20L581%2021.5%20L589%2032.9%20L597%2018.9%20L609%2024.7%20L618%2017.4%20L626%2028.2%20L635%2019.5%20L647%2017.7%20L668%2022.5%20L676%2017.4%20L687%2027.6%20L694%2029.3%20L703%2031.6%20L717%2029.7%20L734%2019.7%20L744%2026.8%20L761%2020.6%20L780%2029.8%20L798%2027.5%20L808%2023.2%20L816%2016.4%20L826%2025.7%20L840%2029.1%20L860%2021.1%20L870%2018.8%20L886%2028.6%20L900%2025.1%20L908%2025.2%20L926%2026.5%20L935%2027.0%20L953%2029.6%20L966%2029.3%20L975%2017.8%20L995%2027.3%20L1014%2029.7%20L1026%2023.7%20L1033%2029.6%20L1047%2029.1%20L1066%2027.6%20L1077%2020.1%20L1092%2019.6%20L1101%2028.7%20L1114%2024.2%20L1127%2028.8%20L1142%2031.3%20L1155%2026.6%20L1173%2018.4%20L1190%2023.8%20L1204%2023.8%20L1213%2023.8%20L1224%2026.8%20L1239%2026.6%20L1252%2024.6%20L1266%2025.7%20L1280%2022.7%20L1297%2028.3%20L1308%2023.8%20L1327%2017.9%20L1340%2017.0%20L1348%2025.4%20L1367%2018.2%20L1384%2018.0%20L1404%2019.1%20L1417%2022.8%20L1435%2018.3%20L1450%2020.7%20L1461%2034.1%20L1476%2030.2%20L1488%2024.7%20L1495%2029.8%20L1516%2017.5%20L1524%2026.9%20L1532%2021.9%20L1551%2019.6%20L1571%2024.0%20L1579%2016.8%20L1592%2017.0%20L1600%2020.5%20L1600%2060Z'%20fill='%2317141F'%20filter='url(%23s)'/%3E%3C/svg%3E"); background: linear-gradient(165deg, #3A1F45, #261E4A 50%, #182A4E) !important; }
@media (max-width: 1100px) { .sw-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } }
@media (max-width: 860px) {
  .sw-arena { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 360px; }
  .sw-deck { height: 352px; margin: 0 22px; } .sw-card { height: 336px; } .sw-card .ph { height: 200px; }
  .sw-act { position: absolute; top: 46%; z-index: 40; translate: 0 -50%; } .sw-act.no { left: -4px; } .sw-act.yes { right: -4px; }
  .sw-act span { width: 58px; height: 58px; font-size: 22px; } .sw-act small { display: none; }
  .sw-hand { justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px 16px 24px; margin: 0 -16px; scrollbar-width: none; }
  .sw-cc { width: 78vw; margin: 0; rotate: 0deg !important; translate: none !important; scroll-snap-align: center; }
  .sw-hand .sw-cc { opacity: 1; }
  .sw-chh b { font-size: 56px; }
  .sw-bento { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 20px; margin: 0 -16px; scrollbar-width: none; }
  .sw-ft { flex: 0 0 74vw; scroll-snap-align: center; }
  .sw-ft .shot { height: 230px; }
}
/* =========================================================
   404 — a hotel corridor where room 404 should be
   ========================================================= */
.lost { --lo-bg: #FFF8EC; --lo-ink: #13233A; --lo-ink2: #4B5D72; --lo-wall: #F3E2C4; --lo-wall2: #EAD3AE; --lo-wood: #8A5A3B; --lo-wood2: #6E4429; --lo-gold: #D9A441; --lo-carpet: #A8323A;
  position: fixed; inset: 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain; background: var(--lo-bg); color: var(--lo-ink); text-align: center;
  --lo-f: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--lo-f); padding: 0 0 8vh; box-sizing: border-box;
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.lost.open { opacity: 1; visibility: visible; }
:root[data-theme="dark"] .lost { --lo-bg: #1A1A1A; --lo-ink: #F5F5F5; --lo-ink2: #C4C4C4; --lo-wall: #3A322B; --lo-wall2: #332B25; --lo-wood: #6B4630; --lo-wood2: #4E3222; --lo-carpet: #7E2830; }
.lo-top { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 14px) clamp(16px, 3vw, 32px) 12px; }
.lo-brand { font: 800 16px/1 var(--lo-f); letter-spacing: -.02em; }
.lo-lights { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; cursor: pointer; color: var(--lo-ink); font: 700 14px/1 var(--lo-f);
  background: rgba(255, 255, 255, .34); backdrop-filter: blur(16px) saturate(1.7); -webkit-backdrop-filter: blur(16px) saturate(1.7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 12px 28px -16px rgba(19, 35, 58, .5); }
:root[data-theme="dark"] .lo-lights { background: rgba(38, 38, 38, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 28px -14px rgba(0, 0, 0, .7); }
.lo-hd { max-width: 46rem; margin: 0 auto; padding: 4vh 20px 5vh; }
.lo-k { margin: 0; font: 700 13px/1.3 var(--lo-f); letter-spacing: .14em; text-transform: uppercase; color: var(--lo-ink2); }
.lo-hd h1 { margin: 16px 0 0; font: 800 clamp(40px, 6.4vw, 92px)/1 var(--lo-f); letter-spacing: -.055em; text-wrap: balance; }
.lo-n { display: inline-flex; color: #E4402A; }
.lo-n i { font-style: normal; display: inline-block; animation: lojig 3.2s ease-in-out infinite; }
.lo-n i:nth-child(2) { animation-delay: .25s; color: var(--lo-gold); } .lo-n i:nth-child(3) { animation-delay: .5s; }
@keyframes lojig { 0%, 70%, 100% { translate: 0 0; rotate: 0deg; } 78% { translate: 0 -12px; rotate: -8deg; } 86% { translate: 0 0; rotate: 6deg; } }
.lo-sub { margin: 18px auto 0; max-width: 44ch; font: 400 clamp(17px, 1.35vw, 20px)/1.55 var(--lo-f); color: var(--lo-ink2); }

/* the corridor */
.lo-hall { --mx: 50%; --my: 50%; position: relative; max-width: 1080px; margin: 0 auto; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: linear-gradient(transparent 70%, var(--lo-wood2) 70% 71.5%, color-mix(in srgb, var(--lo-wood) 70%, var(--lo-wall)) 71.5%),
    repeating-linear-gradient(90deg, var(--lo-wall) 0 26px, var(--lo-wall2) 26px 30px);
  box-shadow: 0 40px 80px -50px rgba(19, 35, 58, .6), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.lo-row { display: flex; align-items: flex-end; justify-content: center; gap: 0; padding: 70px 24px 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lo-row::-webkit-scrollbar { display: none; }
.lo-lamp { flex: none; position: relative; align-self: flex-start; width: 46px; height: 60px; margin-top: 10px; }
.lo-lamp i { position: absolute; left: 50%; top: 10px; width: 18px; height: 26px; margin-left: -9px; border-radius: 9px 9px 4px 4px; background: #FFE9A8; box-shadow: 0 0 30px 14px rgba(255, 214, 120, .45); animation: loflick 7s steps(1) infinite; }
.lo-lamp i::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 24px; height: 6px; margin-left: -12px; border-radius: 3px; background: var(--lo-gold); }
.lo-lamp:nth-child(3) i { animation-delay: -2.3s; } .lo-lamp:nth-child(5) i { animation-delay: -4.1s; }
@keyframes loflick { 0%, 100% { opacity: 1; } 91% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .5; } 95% { opacity: 1; } }
.lo-door { flex: none; position: relative; width: 132px; height: 236px; padding: 0; border: 8px solid var(--lo-wood2); border-bottom: 0; border-radius: 6px 6px 0 0; background: #15110E; cursor: pointer; perspective: 700px; scroll-snap-align: center; font-family: inherit; color: inherit; }
.lo-in { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10px; color: #F6EBDD; background: radial-gradient(90% 60% at 50% 30%, #4A3424, #15110E); }
.lo-in .e { font-size: 38px; }
.lo-in b { font: 800 12.5px/1.2 var(--lo-f); letter-spacing: .02em; color: #FFD27A; }
.lo-in small { font: 500 12.5px/1.35 var(--lo-f); opacity: .9; }
.lo-leaf { position: absolute; inset: 0; display: block; transform-origin: 0 50%; transition: transform .9s cubic-bezier(.3, 1.3, .5, 1); backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 30%, rgba(255, 255, 255, .06) 70%, rgba(0, 0, 0, .14)), var(--lo-wood);
  box-shadow: inset 0 0 0 10px var(--lo-wood), inset 0 0 0 12px rgba(0, 0, 0, .18), inset 0 -110px 0 -100px rgba(0, 0, 0, .12); }
.lo-leaf::before, .lo-leaf::after { content: ""; position: absolute; left: 18px; right: 18px; border-radius: 4px; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .16), inset 2px 2px 0 3px rgba(255, 255, 255, .06); }
.lo-leaf::before { top: 54px; height: 64px; } .lo-leaf::after { top: 130px; height: 80px; }
.lo-leaf .pl { position: absolute; left: 50%; top: 16px; translate: -50% 0; padding: 5px 10px; border-radius: 6px; background: linear-gradient(180deg, #F2CF7A, var(--lo-gold)); color: #3B2A0B; font: 800 15px/1 var(--lo-f); box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .5); }
.lo-leaf .kn { position: absolute; right: 12px; top: 128px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE7A0, var(--lo-gold) 60%, #8A6418); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.lo-leaf .dnd { position: absolute; right: 2px; top: 118px; z-index: 1; padding: 6px 6px 7px; border-radius: 4px; background: #E4402A; color: #fff; font: 800 9.5px/1.1 var(--lo-f); font-style: normal; text-transform: uppercase; letter-spacing: .04em; rotate: 6deg; transform-origin: 70% 0; animation: loswing 3s ease-in-out infinite; }
@keyframes loswing { 50% { rotate: -4deg; } }
.lo-door.knock .lo-leaf { animation: loknock .4s; }
@keyframes loknock { 20%, 60% { translate: 2px 0; } 40%, 80% { translate: -2px 0; } }
.lo-door.open .lo-leaf { transform: rotateY(-102deg); }
.lo-door:hover:not(.open) .lo-leaf { transform: rotateY(-8deg); }
.lo-home { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 14px 26px; border-radius: 999px; background: var(--lo-ink); color: var(--lo-bg); font: 700 16px/1 var(--sans); text-decoration: none; box-shadow: 0 14px 30px -16px rgba(19, 35, 58, .7); transition: transform .25s var(--ease), box-shadow .25s; }
.lo-home:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(19, 35, 58, .75); }
.lo-door:focus-visible { outline: 3px solid var(--lo-gold); outline-offset: 4px; }
.lo-gap { flex: none; position: relative; display: grid; place-items: center; width: 148px; height: 236px; scroll-snap-align: center; }
.lo-ghost { position: absolute; inset: 0 8px; border: 3px dashed color-mix(in srgb, var(--lo-ink) 30%, transparent); border-bottom: 0; border-radius: 6px 6px 0 0; }
.lo-note { position: relative; margin: 0; padding: 14px 12px 16px; background: #FFF3A8; color: #3A3320; font: 700 14px/1.3 "Gaegu", "Comic Sans MS", cursive; rotate: -4deg; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .5); animation: lonote 4s ease-in-out infinite; }
.lo-note::before { content: ""; position: absolute; left: 50%; top: -9px; width: 46px; height: 16px; margin-left: -23px; background: rgba(255, 255, 255, .55); rotate: 3deg; }
.lo-note small { font-size: 12px; opacity: .8; }
@keyframes lonote { 50% { rotate: -1deg; translate: 0 -2px; } }
.lo-carpet { height: 64px; margin: 0 -10%; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(255, 210, 120, .14) 40px 44px), linear-gradient(var(--lo-gold) 0 4px, var(--lo-carpet) 4px calc(100% - 4px), var(--lo-gold) calc(100% - 4px));
  transform: perspective(300px) rotateX(38deg); transform-origin: 50% 0; }
/* lights off: a flashlight follows you */
.lo-dark { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle 150px at var(--mx) var(--my), rgba(255, 240, 200, .06) 0, transparent 60%, rgba(6, 8, 12, .7) 75%, rgba(6, 8, 12, .95) 100%); }
.lo-hall.off .lo-dark { opacity: 1; }
.lo-hall.off .lo-lamp i { background: #5A5040; box-shadow: none; animation: none; }
.lo-count { margin: 22px 0 0; font: 700 14px/1.3 var(--lo-f); color: var(--lo-ink2); }
.lo-count.all { color: #E4402A; }

/* the front desk */
.lo-desk { position: relative; display: grid; justify-items: center; gap: 12px; margin: 6vh auto 0; max-width: 420px; padding: 0 20px; }
.lo-boy { position: relative; width: 70px; height: 92px; opacity: 0; translate: 0 20px; transition: opacity .5s, translate .7s var(--spring, cubic-bezier(.34, 1.56, .64, 1)); }
.lo-boy.on { opacity: 1; translate: 0 0; animation: loboy 1.6s ease-in-out .7s infinite; }
@keyframes loboy { 50% { translate: 0 -4px; } }
.lo-boy i { position: absolute; left: 50%; display: block; translate: -50% 0; }
.lo-boy .cap { top: 0; width: 34px; height: 14px; border-radius: 4px 4px 2px 2px; background: #C8161E; box-shadow: inset 0 -3px 0 var(--lo-gold); z-index: 2; }
.lo-boy .face { top: 10px; width: 34px; height: 34px; border-radius: 50%; background: #E9B98C; }
.lo-boy .face::before, .lo-boy .face::after { content: ""; position: absolute; top: 14px; width: 4px; height: 5px; border-radius: 50%; background: #2A1C12; }
.lo-boy .face::before { left: 10px; } .lo-boy .face::after { right: 10px; }
.lo-boy .body { top: 44px; width: 52px; height: 48px; border-radius: 16px 16px 6px 6px; background: #C8161E; box-shadow: inset 0 0 0 0 transparent, inset 0 -6px 0 rgba(0, 0, 0, .15); }
.lo-boy .body::before { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 30px; margin-left: -2px; background: repeating-linear-gradient(var(--lo-gold) 0 4px, transparent 4px 9px); }
.lo-say { position: relative; margin: 0; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--lo-ink) 6%, transparent); font: 700 16px/1.35 var(--lo-f); min-height: 1.35em; }
.lo-bell { position: relative; width: 92px; height: 70px; border: 0; padding: 0; background: none; cursor: pointer; }
.lo-bell i { position: absolute; left: 50%; display: block; translate: -50% 0; }
.lo-bell .lo-bb { top: 4px; width: 12px; height: 10px; border-radius: 4px 4px 0 0; background: #B8B8B8; }
.lo-bell .dome { top: 12px; width: 70px; height: 40px; border-radius: 40px 40px 4px 4px; background: radial-gradient(60% 70% at 35% 30%, #FFF6D6, #E8C063 45%, #A97C22); box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .5); }
.lo-bell .base { top: 52px; width: 88px; height: 10px; border-radius: 4px; background: #2E2A26; }
.lo-bell.ring .lo-bb { animation: lopress .25s; } .lo-bell.ring .dome { animation: loring .6s; }
@keyframes lopress { 50% { translate: -50% 5px; } }
@keyframes loring { 20% { rotate: -6deg; } 40% { rotate: 5deg; } 60% { rotate: -3deg; } 80% { rotate: 1deg; } }
.lo-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4vh; padding: 16px 26px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; font: 800 17px/1 var(--lo-f); color: var(--lo-ink);
  background: rgba(228, 64, 42, .12); box-shadow: inset 0 0 0 1.5px rgba(228, 64, 42, .5), 0 14px 28px -16px rgba(228, 64, 42, .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.lo-go:hover { transform: translateY(-2px); }
.lo-go.glow { animation: loglow 1.4s ease-in-out infinite; }
@keyframes loglow { 50% { box-shadow: inset 0 0 0 1.5px rgba(228, 64, 42, .8), 0 0 0 8px rgba(228, 64, 42, .12), 0 14px 28px -12px rgba(228, 64, 42, .8); transform: translateY(-2px); } }
@media (max-width: 760px) {
  .lo-hall { border-radius: 0; }
  .lo-row { justify-content: flex-start; padding: 60px 30vw 0; }
  .lo-door, .lo-gap { width: 122px; height: 220px; }
  .lo-leaf::after { height: 70px; }
}
@media (prefers-reduced-motion: reduce) { .lo-n i, .lo-lamp i, .lo-note, .lo-leaf .dnd, .lo-boy.on, .lo-go.glow { animation: none; } }

/* =========================================================
   Every button is glass: translucent, blurred, a light rim, never a solid fill
   ========================================================= */
.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .mm-trc .ar button, .mm-tra button, .c3-step button,
.sw-match button, .sw-ctrl button, .sw-cnav button, .lb-foot button, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button, .c3-tabs button.on, .c3-seg button.on, .sw-tabs button.on {
  --gk: #13233A;
  background: color-mix(in srgb, var(--gk) 9%, rgba(255, 255, 255, .42)) !important; color: var(--ink) !important;
  backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gk) 28%, rgba(255, 255, 255, .7)), inset 0 1px 0 rgba(255, 255, 255, .75), 0 12px 26px -16px color-mix(in srgb, var(--gk) 70%, transparent) !important; }
.btn-ink:hover, .btn-ghost:hover, .cs-close:hover, .bh-cta:hover, .mail button:hover, .nw-cta:hover, .nw-go:hover, .c3-links a:hover, .c3-links button:hover, .fb-go:hover, .mm-trc .ar button:hover, .mm-tra button:hover, .c3-step button:hover,
.sw-match button:hover, .sw-ctrl button:hover, .sw-cnav button:hover, .lb-foot button:hover, .cbtn:hover, .sn-drop:hover:hover, .sn-btn:hover, .sn-done button:hover, .c3-ptabs button:hover {
  background: color-mix(in srgb, var(--gk) 15%, rgba(255, 255, 255, .58)) !important; color: var(--ink) !important; transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gk) 30%, rgba(255, 255, 255, .8)), inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 34px -18px color-mix(in srgb, var(--gk) 60%, transparent) !important; }
/* each button keeps its own colour as the tint */
.bh-cta, .c3-links a[href*="topmate"], .c3-links a[data-book] { --gk: #E4402A; }
.c3-links a[href*="linkedin"] { --gk: #0A66C2; } .c3-links a[href*="instagram"] { --gk: #DD2A7B; } .c3-links a[href^="mailto"] { --gk: #EA4335; }
.cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button { --gk: var(--c, #13233A); }
.cs.ed .c3-links button, .cs.ed .fb-go { --gk: #EE5A2B; } .cs.mm .c3-links button, .cs.mm .fb-go, .mm-trc .ar button, .mm-tra button { --gk: #E4262C; }
.cs.sw .c3-links button, .cs.sw .fb-go, .sw-match button, .sw-ctrl .yes, .sw-tabs button.on { --gk: #8B5CF6; } .sw-ctrl .no { --gk: #F0396B; }
.sw-ctrl .yes, .sw-ctrl .no { color: var(--gk) !important; }
.c3-tabs button.on i { background: var(--sun); }
:root[data-theme="dark"] :is(.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .mm-trc .ar button, .mm-tra button, .c3-step button, .sw-match button, .sw-ctrl button, .sw-cnav button, .lb-foot button, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button, .c3-tabs button.on, .c3-seg button.on, .sw-tabs button.on) {
  --gk: #FFD86B; background: color-mix(in srgb, var(--gk) 14%, rgba(255, 255, 255, .05)) !important; color: #F5F5F5 !important;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gk) 40%, rgba(255, 255, 255, .16)), inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px -14px rgba(0, 0, 0, .7) !important; }
:root[data-theme="dark"] :is(.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .mm-trc .ar button, .mm-tra button, .c3-step button, .sw-match button, .sw-ctrl button, .sw-cnav button, .lb-foot button, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button):hover {
  background: color-mix(in srgb, var(--gk) 24%, rgba(255, 255, 255, .06)) !important; color: #fff !important; }
:root[data-theme="dark"] .c3-links a[href*="linkedin"] { --gk: #5AA9FF; } :root[data-theme="dark"] .c3-links a[href*="instagram"] { --gk: #FF6FB0; } :root[data-theme="dark"] .c3-links a[href^="mailto"], :root[data-theme="dark"] .c3-links a[href*="topmate"], :root[data-theme="dark"] .bh-cta { --gk: #FF8A6B; }
:root[data-theme="dark"] :is(.cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button) { --gk: color-mix(in srgb, var(--c, #FFD86B) 60%, #fff); }
:root[data-theme="dark"] .cs.sw :is(.c3-links button, .fb-go), :root[data-theme="dark"] :is(.sw-match button, .sw-ctrl .yes, .sw-tabs button.on) { --gk: #C4A8FF; } :root[data-theme="dark"] .sw-ctrl .no { --gk: #FF7A9C; }
:root[data-theme="dark"] .sw-ctrl .yes, :root[data-theme="dark"] .sw-ctrl .no { color: var(--gk) !important; }
.cs-close, :root[data-theme="dark"] .cs-close { box-shadow: 0 10px 24px -16px rgba(19, 35, 58, .45) !important; }

/* ===== Coming soon: a draft being written ===== */
.cs.soon { --bp: #FFFFFF; --ink: #13171F; --ink-2: #5F6672; --line: rgba(19, 23, 31, .08); --doc: #FFFFFF; --sk: #EEF0F3; background: var(--bp) !important; color: var(--ink); overflow-y: auto; overflow-x: hidden; }
:root[data-theme="dark"] .cs.soon { --bp: #141414; --ink: #F2F2F2; --ink-2: #A3A3A3; --line: rgba(255, 255, 255, .08); --doc: #1D1D1D; --sk: #2A2A2A; }
.cs.soon .sn-bar { background: color-mix(in srgb, var(--bp) 85%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sn-bk { display: inline-flex; align-items: center; gap: 8px; font: 700 14.5px/1 var(--sans); color: var(--ink); }
.sn-bk img { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; }
.sn-pg { min-height: 100%; }
.sn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); max-width: 72rem; min-height: calc(100svh - 80px); margin: 0 auto; padding: 4vh clamp(16px, 4vw, 48px) 8vh; box-sizing: border-box; }
.sn-k { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.sn-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); animation: snpulse 1.8s ease-in-out infinite; }
@keyframes snpulse { 50% { opacity: .25; } }
.sn-t { margin: 18px 0 0; font: 800 clamp(40px, 5.2vw, 72px)/1.02 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.sn-t em { font-style: normal; font-family: var(--serif); font-weight: 400; font-size-adjust: .46; letter-spacing: -.02em; }
.sn-lead { margin: 20px 0 0; max-width: 40ch; font: 400 clamp(16.5px, 1.3vw, 19px)/1.6 var(--sans); color: var(--ink-2); }
.sn-f { display: flex; gap: 8px; max-width: 30rem; margin-top: 30px; padding: 6px; border-radius: 999px; background: var(--doc); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -26px rgba(19, 23, 31, .35); }
.sn-f[hidden] { display: none; }
.sn-fl { flex: 1; min-width: 0; display: flex; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sn-f input { flex: 1; min-width: 0; padding: 12px 16px; border: 0; background: transparent; color: var(--ink); font: 500 15.5px/1 var(--sans); outline: none; }
.sn-f input::placeholder { color: color-mix(in srgb, var(--ink) 40%, transparent); }
.sn-f input.bad { color: #D93025; }
.sn-f:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink), 0 18px 40px -26px rgba(19, 23, 31, .4); }
.sn-pri { flex: none; padding: 13px 22px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--bp); font: 700 15px/1 var(--sans); transition: transform .3s var(--spring), opacity .3s; }
.sn-pri:hover { transform: translateY(-1px); } .sn-pri:active { transform: scale(.97); } .sn-pri:disabled { opacity: .5; }
.sn-err { min-height: 18px; margin: 10px 0 0 18px; font: 600 13px/1.3 var(--sans); color: #D93025; }
.sn-ok { margin: 26px 0 0; font: 600 16px/1.4 var(--sans); color: var(--ink); } .sn-ok[hidden] { display: none; }
.sn-sec { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 0; font: 600 15px/1 var(--sans); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); transition: color .25s, border-color .25s; }
.sn-sec:hover { color: var(--ink); border-color: var(--ink); } .sn-sec span { transition: transform .3s var(--spring); } .sn-sec:hover span { transform: translate(2px, -2px); }
/* the draft */
.sn-doc { position: relative; padding: 30px 30px 34px; border-radius: 22px; background: var(--doc); box-shadow: 0 1px 2px rgba(19, 23, 31, .05), 0 40px 80px -40px rgba(19, 23, 31, .35); rotate: 1.5deg; }
:root[data-theme="dark"] .sn-doc { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.sn-dt { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.sn-dt span img { display: block; width: 30px; height: 30px; border-radius: 9px; object-fit: cover; }
.sn-dt b { font: 800 clamp(20px, 2vw, 26px)/1.15 var(--sans); letter-spacing: -.03em; }
.sn-caret { width: 2px; height: 26px; background: var(--ink); animation: swblink 1s steps(1) infinite; }
.sn-dco { margin: 6px 0 18px 40px; font: 500 13px/1 var(--sans); color: var(--ink-2); }
.sn-hero-ph { height: 120px; border-radius: 14px; background: var(--sk); position: relative; overflow: hidden; }
.sn-s { margin-top: 18px; }
.sn-s p { margin: 0 0 8px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sn-s i { display: block; height: 9px; width: 0; margin-top: 7px; border-radius: 6px; background: var(--sk); transition: width .9s var(--ease); transition-delay: calc(var(--i) * 220ms); }
.sn-doc.fill .sn-s i { width: var(--w); }
.sn-doc.fill .sn-s i + i { transition-delay: calc(var(--i) * 220ms + 120ms); }
.sn-hero-ph::after, .sn-doc.fill .sn-s i::after { content: ""; }
.sn-hero-ph::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); background-size: 220% 100%; animation: snshim 2.4s ease-in-out infinite; }
:root[data-theme="dark"] .sn-hero-ph::after { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%); }
@keyframes snshim { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.sn-more { max-width: 76rem; margin: 0 auto; padding: 4vh clamp(16px, 4vw, 40px) 12vh; }
.sn-more .c3-morek { text-align: center; }
@media (max-width: 860px) {
  .sn-wrap { grid-template-columns: 1fr; min-height: 0; padding-top: 5vh; gap: 40px; }
  .sn-doc { rotate: 0deg; padding: 22px 20px 26px; }
  .sn-hero-ph { height: 90px; }
}
@media (prefers-reduced-motion: reduce) { .sn-k i, .sn-caret, .sn-hero-ph::after { animation: none; } }

/* ===== Swipr round 3 + premium hovers ===== */
:is(.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button) {
  transition: background .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), color .3s !important; }
:is(.btn-ink, .cs-close, .bh-cta, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .cbtn, .sn-drop, .sn-btn):active { transform: translateY(0) scale(.97); transition-duration: .12s !important; }
.cs-close { gap: 10px; padding: 11px 18px 11px 14px; letter-spacing: -.005em; }
.cs-close .ar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 8%, transparent); font-size: 13px; transition: transform .45s cubic-bezier(.22, 1, .36, 1), background .3s; }
.cs-close:hover .ar { transform: translateX(-3px); background: color-mix(in srgb, var(--ink) 14%, transparent); }
.cs-close, :root[data-theme="dark"] .cs-close { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px -14px rgba(19, 35, 58, .5) !important; }
.cs-close:hover, :root[data-theme="dark"] .cs-close:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 14px 30px -14px rgba(19, 35, 58, .55) !important; }
:root[data-theme="dark"] .cs-close .ar { background: rgba(255, 255, 255, .1); }
/* the problem in three lines, revealed word by word */
.sw-ps { max-width: 62rem; margin: 16vh auto 0; padding: 0 clamp(16px, 4vw, 40px); text-align: center; translate: none !important; opacity: 1 !important; }
.sw-ps .ln { margin: 0; font: 800 clamp(28px, 4.2vw, 58px)/1.16 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.sw-ps .ln + .ln { margin-top: .22em; }
.sw-ps span { display: inline-block; color: color-mix(in srgb, var(--ink) 13%, transparent); translate: 0 .18em; transition: color .7s var(--ease), translate .8s var(--ease); transition-delay: var(--d); }
.sw-ps.in span { color: var(--ink); translate: 0 0; }
.sw-ps .ln:last-child span:nth-last-child(-n+3) { background: var(--sg); -webkit-background-clip: text; background-clip: text; }
.sw-ps.in .ln:last-child span:nth-last-child(-n+3) { color: transparent; }
/* room between the stack and the progress line */
.sw-deck { height: 404px !important; }
.sw-learn { margin-top: 18px; }
@media (max-width: 860px) { .sw-deck { height: 386px !important; } }
/* cards: no outlines, just soft depth */
.sw-card, .sw-card.smart, .sw-cc, .sw-cc.muse, .sw-ft, .sw-chart, .sw-u, .sw-lc, .sw-loop .lp, .sw-nums > div, .sw-eq span:not(.res), .sw-pl, .sw-meta li, .sw-match, .sw-think {
  box-shadow: 0 1px 2px rgba(30, 20, 60, .05), 0 22px 44px -26px rgba(70, 30, 140, .38) !important; }
.sw-loop .c { box-shadow: 0 1px 2px rgba(30, 20, 60, .05), 0 26px 60px -24px rgba(139, 92, 246, .55) !important; }
.sw-ft:hover { box-shadow: 0 2px 4px rgba(30, 20, 60, .05), 0 34px 60px -28px rgba(70, 30, 140, .5) !important; }
.sw-g { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 44px -30px rgba(70, 30, 140, .5) !important; }
:root[data-theme="dark"] :is(.sw-card, .sw-cc, .sw-ft, .sw-chart, .sw-u, .sw-lc, .sw-loop .lp, .sw-nums > div, .sw-eq span:not(.res), .sw-pl, .sw-meta li, .sw-match, .sw-think) { box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .8) !important; }
:root[data-theme="dark"] .sw-g { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 44px -30px rgba(0, 0, 0, .8) !important; }
.sw-cc.muse em { box-shadow: 0 10px 20px -10px rgba(255, 61, 154, .8); }
/* the final UI, flow by flow */
.sw-ui { display: grid; justify-items: center; gap: 18px; }
.sw-ui .sw-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sw-ui .sw-tabs button { padding: 11px 17px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--sans); color: var(--ink-2); background: color-mix(in srgb, var(--ink) 5%, transparent) !important; box-shadow: none !important; transition: background .3s, color .3s; }
.sw-ui .sw-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent) !important; }
.sw-ui .sw-tabs button.on { color: #fff !important; background: var(--sg) !important; }
.sw-fdsc { margin: 0; min-height: 1.5em; font: 500 16px/1.5 var(--sans); color: var(--ink-2); }
.sw-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 200px)); justify-content: center; gap: clamp(12px, 1.6vw, 22px); width: 100%; margin-top: 10px; }
.sw-scr { display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; animation: swscr .7s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes swscr { from { opacity: 0; translate: 0 26px; } }

.sw-scr .fr { display: block; width: 100%; padding: 6px; box-sizing: border-box; border-radius: 30px; background: #17131F; box-shadow: 0 30px 50px -30px rgba(40, 20, 90, .7); transition: transform .5s var(--spring), box-shadow .5s; }
.sw-scr .fr img { display: block; width: 100%; aspect-ratio: 540 / 1200; height: auto; object-fit: cover; border-radius: 24px; background: #fff; }
.sw-scr:hover .fr { transform: translateY(-8px); box-shadow: 0 40px 60px -30px rgba(40, 20, 90, .8); }
.sw-scr small { font: 800 12px/1 var(--sans); letter-spacing: .12em; color: var(--ink-2); }
@media (max-width: 860px) {
  .sw-ui .sw-tabs { flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; max-width: calc(100vw - 32px); padding-bottom: 6px; scrollbar-width: none; }
  .sw-ui .sw-tabs button { flex: none; }
  .sw-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start; padding: 6px 16px 20px; margin: 0 -16px; width: calc(100% + 32px); scrollbar-width: none; }
  .sw-scr { flex: 0 0 56vw; scroll-snap-align: center; }
}
html:root[data-theme="dark"] .cs .cs-bar button.cs-close { --gk: #FFFFFF; background: rgba(255, 255, 255, .08) !important; color: #F5F5F5 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px -14px rgba(0, 0, 0, .8) !important; }
html:root[data-theme="dark"] .cs .cs-bar button.cs-close:hover { background: rgba(255, 255, 255, .14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 16px 32px -14px rgba(0, 0, 0, .85) !important; }
html:root .cs .cs-bar button.cs-close:not(:hover) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px -14px rgba(19, 35, 58, .5) !important; }
html:root:not([data-theme="dark"]) .cs .cs-bar button.cs-close:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 16px 32px -14px rgba(19, 35, 58, .55) !important; }

/* ===== phone hero: the whole valley in view, a compact card ===== */
@media (max-width: 859px) {
  .stage { background: linear-gradient(90deg, #0E64B7, #0662AE 50%, #035DA7); }
  :root[data-theme="dark"] .stage { background: #09090B; }
  .hero-copy { left: 16px; right: 16px; width: auto; top: calc(env(safe-area-inset-top, 0px) + 78px); }
  .hero-copy h1 { font-size: clamp(2.1rem, 10.4vw, 2.9rem); }
  .stage .places { left: 16px; right: 16px; transform: none; max-width: none; justify-content: flex-start; }
  .pin b { gap: 0; padding: 3px; font-size: 0; }
  .pin b > img { width: 26px; height: 26px; }
  .pin b > *:not(img) { display: none; }
  .pin.on b { gap: 6px; padding: 3px 11px 3px 3px; font-size: 12.5px; }
  .pin.on b > small { display: inline-block; }
  .rpin b { padding: 5px; }
  .stage .sheet, .stage .sheet.left { left: 16px !important; right: 16px !important; max-height: min(56svh, calc(100svh - var(--navh, 92px) - 170px)) !important; padding: 18px 16px 16px; border-radius: 24px; }
  .sheet h2 { font-size: 26px; margin-top: 8px; }
  .sheet .role { font-size: 13.5px; margin-bottom: 6px; }
  .sheet .lead { font-size: 16.5px !important; line-height: 1.3 !important; }
  .sheet .did p { font-size: 14.5px; line-height: 1.5; }
  .sheet .did p:nth-child(n+2) { display: none; }
  .sheet .nums { display: flex !important; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .sheet .nums[hidden] { display: none !important; }
  .sheet .nums li { flex: 1 0 auto; padding: 10px 12px !important; }
  .sheet .nums b { font-size: 20px !important; }
  .sheet .nums span { font-size: 11.5px !important; }
  .sheet .row { margin: 10px -16px -16px; padding: 12px 16px 14px; bottom: -16px; box-sizing: border-box; width: calc(100% + 32px); }
  .sheet .s-cta { width: 100%; justify-content: center; }
}

/* Swipr: thinner screen bezels, glass taste chips and pills */
.sw-scr .fr { padding: 1px; border-radius: 26px; background: #2A2536; }
.sw-scr .fr img { border-radius: 25px; }
.sw-learn .tg span, .sw-card .r3 span, .sw-meta li, .sw-pl {
  background: rgba(255, 255, 255, .55) !important; color: var(--ink) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 6px 16px -10px rgba(70, 30, 140, .35) !important; }
.sw-learn .tg span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 9px 11px; font-weight: 700; }
.sw-learn .tg span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12A36A; box-shadow: 0 0 0 3px rgba(18, 163, 106, .15); }
.sw-learn .tg .m { color: var(--ink-2) !important; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.sw-learn .tg .m::before { background: #E0325F; box-shadow: 0 0 0 3px rgba(224, 50, 95, .14); }
.sw-card .r3 span { color: var(--ink-2) !important; background: color-mix(in srgb, var(--ink) 5%, transparent) !important; backdrop-filter: none; box-shadow: none !important; }
:root[data-theme="dark"] :is(.sw-learn .tg span, .sw-meta li, .sw-pl) { background: rgba(255, 255, 255, .07) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px -12px rgba(0, 0, 0, .7) !important; }
:root[data-theme="dark"] .sw-card .r3 span { background: rgba(255, 255, 255, .07) !important; }
@media (max-width: 859px) {
  .scene.focusing .pin { opacity: 0 !important; pointer-events: none; }
  .stage .sheet { display: flex; flex-direction: column; }
  .stage .sheet > * { flex: none; }
  .sheet .nums { order: 1; margin: 12px 0 0 !important; }
  .sheet .s-gal { order: 2; margin-top: 12px; }
  .sheet .row { order: 3; }
  .sheet .s-gal .jc-ph .ph { aspect-ratio: 4 / 3; }
}
@media (max-width: 859px) and (max-height: 740px) {
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 70px); }
  .hero-copy h1 { font-size: clamp(1.9rem, 8.6vw, 2.3rem); }
  .hero-copy .sub { display: none; }
  .hero-copy .hey { margin-bottom: 6px; }
}
.sw-card .bd { transition: opacity .35s; } .sw-card:not(.top):not(.out) .bd { opacity: 0; }

/* ===== phone polish ===== */
.logo i { position: relative; }
.logo .jc { position: absolute; inset: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 800 12.5px/1 var(--sans); letter-spacing: -.02em; opacity: 0; scale: .6; transition: opacity .35s, scale .45s var(--spring); }
@media (max-width: 859px) {
  /* hero: one painted sky from edge to edge, no flat blue, no places bar */
  .stage { background: linear-gradient(180deg, #2C86D8 0%, #1C74C6 45%, #0E64B7 100%) !important; }
  :root[data-theme="dark"] .stage { background: #09090B !important; }
  .cam { -webkit-mask: linear-gradient(transparent, #000 9%); mask: linear-gradient(transparent, #000 9%); }
  .stage .places, #places { display: none !important; }
  /* the name chip is just my photo; once you scroll it becomes JC */
  .logo { padding: 5px; gap: 0; height: 48px; width: 48px; box-sizing: border-box; justify-content: center; }
  .logo .lt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .logo i { width: 38px; height: 38px; }
  .logo .jc { display: none; }
  /* every tappable pill is 48px tall */
  :is(.theme-btn, .nw-cta, .nw-go, .cbtn, .jc-more, .jcar button, .fb-go, .c3-links a, .c3-links button, .cs-close, .sn-pri, .s-cta, .sw-cnav button, .bh-cta) { height: 48px !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
  .nw-cta { padding: 0 18px 0 8px !important; gap: 10px; font-size: 15px; }
  .nw-cta .nw-pen { width: 32px; height: 32px; }
  .jcar #jcPrev { width: 48px; }
  /* the sticky note: portrait, in the flow, never under the torn edge */
  .tell-box .sticky:nth-of-type(1) { position: relative; display: block; top: auto !important; bottom: auto !important; right: auto !important; left: auto; width: 10rem; min-height: 12.5rem; margin: 30px 8px 30px auto; padding: 22px 16px 16px; font-size: 20px; line-height: 1.25; scale: 1 !important; }
  .tell-box .sticky:nth-of-type(1) small { margin-top: 14px; }
  /* selected work list: room for the card shadows */
  .bi-list { padding: 8px 16px 26px !important; margin-bottom: -18px !important; }
}
/* journey CTAs: glass, never a solid fill */
.jc-more, .journey.jcm .jc-more, :root[data-theme="dark"] .journey.jcm .jc-more { background: rgba(255, 255, 255, .45) !important; color: var(--ink) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(19, 35, 58, .1), inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px -12px rgba(19, 35, 58, .35); }
.jcard .cbtn, .jcard .cbtn.ghost { background: rgba(255, 255, 255, .45) !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(19, 35, 58, .1), inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 22px -14px rgba(19, 35, 58, .4) !important; }
.jcard .cbtn:hover { background: rgba(255, 255, 255, .62) !important; transform: translateY(-1px); }
:root[data-theme="dark"] .jc-more, :root[data-theme="dark"] .jcard .cbtn { background: rgba(255, 255, 255, .07) !important; color: #F2F2F2 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 22px -14px rgba(0, 0, 0, .8) !important; }
.sn-foot { max-width: 76rem; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 14vh; text-align: center; }
.sn-foot .c3-links { justify-content: center; }
.sn-more { padding-bottom: 8vh !important; }
@media (max-width: 859px) {
  /* phones: two rows of short cards, so the wall stays about one screen tall */
  .notes { padding-block: 9vh 7vh !important; }
  .nw-rows { margin-top: 16px; gap: 0; }
  .nw-row { padding: 16px 0 24px; margin-bottom: -10px; }
  .nw-track { gap: 14px; }
  .nw-card { width: 210px !important; min-height: 0; height: 136px; padding: 16px 14px 10px; display: flex; flex-direction: column; }
  .nw-card::before { width: 54px; height: 18px; margin-left: -27px; top: -9px; }
  .nw-card p { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .nw-card .nw-by { margin-top: auto; padding-top: 8px; gap: 8px; }
  .nw-card .nw-by .av { width: 28px; height: 28px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
  .nw-card .nw-by b { font-size: 13.5px; } .nw-card .nw-by small { font-size: 11.5px; }
  .nw-card .nw-work { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nw-card:has(.nw-work) > p { -webkit-line-clamp: 2; }
  .nw-card .nw-work span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nw-ghost p { font-size: 16px; } .nw-ghost span { margin-top: 6px; }
  .nw-card.nw-ghost { display: grid; place-items: center; }
}

/* ===== case studies on phones ===== */
@media (max-width: 859px) {
  .cs :is(.c3-h, .mm-h, .sw-h, .sw-t, .mm-t) { font-size: clamp(27px, 8.2vw, 36px) !important; letter-spacing: -.035em !important; max-width: 100%; overflow-wrap: break-word; }
  .cs :is(.c3-p, .mm-p, .sw-p) { font-size: 16px; }
  .cs :is(.c3-sec, .mm-sec, .sw-sec, .c3-w) { padding-left: 16px !important; padding-right: 16px !important; }
  .cs .hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  /* sideways rows: one card at a time, stepped with buttons */
  .ph-car { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0 !important; padding: 8px 0 18px !important; margin: 0 !important; width: 100% !important; justify-content: flex-start !important; }
  .ph-car::-webkit-scrollbar { display: none; }
  .ph-car > * { flex: 0 0 100% !important; width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; scroll-snap-align: center; rotate: 0deg !important; translate: none !important; opacity: 1 !important; }
  .ph-car > img { height: min(64svh, 540px) !important; object-fit: contain; background: transparent !important; outline: 0 !important; box-shadow: none !important; }
  .ph-car > :not(img) { display: flex; flex-direction: column; align-items: center; padding: 0 2px; }
  .sw-hand.ph-car > .sw-cc, .sw-bento.ph-car > .sw-ft { display: grid; align-items: initial; width: calc(100% - 4px) !important; flex-basis: 100% !important; }
  .sw-strip.ph-car .sw-scr .fr { width: min(60vw, 250px); }
  .mm-fl .ph-car > img { height: min(60svh, 500px) !important; }
  .ph-cb { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 4px auto 0; font: 700 14px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
  .ph-cb[hidden] { display: none; }
  .ph-cb button { width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; font: 700 18px/1 var(--sans); color: var(--ink);
    background: rgba(255, 255, 255, .55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -14px rgba(19, 35, 58, .45); transition: opacity .25s, transform .25s; }
  .ph-cb button:disabled { opacity: .3; }
  .ph-cb button:active { transform: scale(.94); }
  :root[data-theme="dark"] .ph-cb button { background: rgba(255, 255, 255, .08); color: #F2F2F2; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .8); }
  .mm-fl .sw, .c3-galrow + .hint { display: none; }
  /* tabs wrap instead of running off screen */
  .c3-ptabs, .sw-ui .sw-tabs { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; margin-inline: 0 !important; padding: 0 !important; max-width: 100% !important; }
  /* footer links: a tidy grid */
  .cs .c3-links { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin-inline: auto; }
  .cs .c3-links > * { display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; }
  .cs .c3-links > button { grid-column: 1 / -1; }
  /* back to the box: no outline */
  html:root .cs .cs-bar button.cs-close, html:root .cs .cs-bar button.cs-close:hover { outline: 0 !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 8px 22px -14px rgba(19, 35, 58, .5) !important; }
}
@media (max-width: 859px) {
  .cs h2, .cs h3 { max-width: 100%; overflow-wrap: break-word; }
  .cs h2:not(.sw-t):not(.mm-t):not(.tf-t), .cs h3.c3-h, .cs h3.mm-h, .cs h3.sw-h { font-size: clamp(26px, 7.8vw, 34px) !important; }
  .cs .c3-links > * { font-size: 14px !important; white-space: nowrap; padding-inline: 10px !important; }
}

/* ===== buttons: plain neutral glass, no colour tint ===== */
html:root :is(.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .mm-trc .ar button, .mm-tra button, .c3-step button, .sw-match button, .sw-ctrl button, .sw-cnav button, .lb-foot button, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button, .c3-tabs button.on, .c3-seg button.on, .sw-tabs button.on, .fb-go) { --gk: #13233A !important; }
html:root[data-theme="dark"] :is(.btn-ink, .btn-ghost, .cs-close, .bh-cta, .mail button, .nw-cta, .nw-go, .c3-links a, .c3-links button, .fb-go, .mm-trc .ar button, .mm-tra button, .c3-step button, .sw-match button, .sw-ctrl button, .sw-cnav button, .lb-foot button, .cbtn, .sn-drop, .sn-btn, .sn-done button, .c3-ptabs button, .c3-tabs button.on, .c3-seg button.on, .sw-tabs button.on, .fb-go) { --gk: #FFFFFF !important; }
.sw-act { --gk: #13233A !important; } :root[data-theme="dark"] .sw-act { --gk: #FFFFFF !important; }
.sw-act span { color: var(--ink) !important; }
/* EazyDiner results: increases in neutral ink with a green nudge, never orange */
#c3Res.after .c3-rc .rv, .c3-res .big, .c3-rc .rh b { color: var(--ink) !important; }
.c3-rc .rd { background: rgba(30, 142, 78, .12) !important; color: #1E8E4E !important; }
.c3-tbar i { background: #2FA36B !important; }
:root[data-theme="dark"] .c3-rc .rd { background: rgba(91, 214, 154, .16) !important; color: #5BD69A !important; }
:root[data-theme="dark"] .c3-tbar i { background: #5BD69A !important; }

/* the baked map: one bitmap, moved by the GPU */
.world3 > .mapbake { position: absolute; max-width: none; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.world3 { backface-visibility: hidden; }
@media (max-width: 1100px) { .spot2 { display: none !important; } }

/* sections that are off screen hold their ambient animations, so nothing repaints out of view */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }
.me-tip { will-change: transform; }
.kicker svg, .c3-k svg, .sw-bk img, .mk .halo { will-change: transform; }
.jcard .jc-in, .jcard, .compass, .mapctl, .jcar, .jtl { will-change: transform, opacity; }
.journey .pin-wrap, #jPin { contain: layout paint; }

/* reveal text never pins the page: it plays by itself once it scrolls into view */
/* the story never pins, but on desktop it still slides up over the valley like a sheet of paper */
.story { height: auto !important; }
@media (max-width: 859px) { .story { margin-top: 0 !important; } }
.story-pin { position: relative !important; height: auto !important; padding: 16vh 0 14vh; overflow: visible; }
.ll-rev-track { height: auto !important; }
.ll-rev-pin { position: relative !important; height: auto !important; padding: 16vh 0; }

.bdg { overflow: hidden; }
.bdg img.lg { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: inherit; }
.bdg svg.gen { width: 30px; height: 30px; }
@media (max-width: 860px) { .bdg svg.gen { width: 24px; height: 24px; } }

/* results: captions sit on one baseline across a row, clear of the illustration */
.c3-rc { display: flex !important; flex-direction: column; }
.c3-rc .rf { margin-top: auto !important; padding-top: 0; min-height: 3.6em; }
.c3-rc .c3-dots, .c3-rc .c3-tbar { margin-bottom: 24px !important; }
.c3-rc.tray .c3-tray { margin-bottom: 0; }
.c3-rc .c3-dots, .c3-rc .c3-tray, .c3-rc .c3-tbar { flex: none; }

/* MakeMyTrip: logo on no white plate; lift screens one size, centred, never stretched */
.mm-logo { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
:root[data-theme="dark"] .bsign img[alt="MakeMyTrip"] { background: transparent !important; padding: 0 !important; }
.mm-fl .row { justify-content: safe center; }
.mm-fl .row img { aspect-ratio: 720 / 1780; height: 100%; width: auto; object-fit: contain; }
.mm-fl .row img[src*="desk"] { aspect-ratio: auto; }
:root[data-theme="dark"] .mm-bk img, .mm-bk img { background: transparent !important; padding: 0 !important; box-shadow: none !important; }

/* MakeMyTrip hero: ask on the phone, the bell rings, the hotel brings it */
.mm-hero .mm-demo { padding: 0 !important; width: 100%; overflow-x: clip; }
.mm-desk.mm-req { position: relative; width: min(940px, 100%, calc(56svh * 1.5)) !important; margin: 0 auto; }
.mm-req svg { display: block; width: 100%; height: auto; overflow: hidden; }
.mm-req .opt, .mm-req .q, .mm-req .st, .mm-req .pbell { transition: opacity .3s, transform .6s var(--spring); }
.mm-req .opt .ok, .mm-req .st, .mm-req .pbell { opacity: 0; }
.mm-req.asking .opt, .mm-req.asking .q { opacity: 0; }
.mm-req.chosen .opt.sel { opacity: 1; transform: translateY(var(--dy)); }
.mm-req.chosen .opt.sel .chev { opacity: 0; } .mm-req.chosen .opt.sel .ok { opacity: 1; }
.mm-req.chosen .opt.sel rect { stroke: #1F9D55; }
.mm-req.chosen .st { opacity: 1; }
.mm-req.ring .pbell { opacity: 1; }
.mm-req .bl { transform-box: fill-box; transform-origin: 50% 100%; }
.mm-req.ring .bl { animation: mmshake .5s ease-in-out 2; }
.mm-req .dg { opacity: 0; } .mm-req.ring .dg { animation: mmdg 1s ease-out .15s; }
@keyframes mmdg { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes mmshake { 20% { transform: rotate(-10deg); } 45% { transform: rotate(9deg); } 70% { transform: rotate(-5deg); } }
.mm-req .act { transform: translate(880px, 386px); }
.mm-req.come .act.sel { transform: translate(calc(var(--x) * 1px), 386px); transition: transform 2s cubic-bezier(.3, .1, .3, 1); }
.mm-req.go .act.sel { transform: translate(1000px, 386px); transition: transform 2s cubic-bezier(.6, 0, .8, .9); }
.mm-req .lg, .mm-req .wh { transform-box: fill-box; transform-origin: 50% 0; }
.mm-req .wh { transform-origin: 50% 50%; }
.mm-req.come:not(.here) .sel .lg.l, .mm-req.go .sel .lg.l { animation: mmlegstep .36s ease-in-out infinite alternate; }
.mm-req.come:not(.here) .sel .lg.r, .mm-req.go .sel .lg.r { animation: mmlegstep .36s ease-in-out infinite alternate-reverse; }
.mm-req.come:not(.here) .sel .bw, .mm-req.go .sel .bw { animation: mmbobv .36s ease-in-out infinite alternate; }
.mm-req.come:not(.here) .sel .wh circle:first-child, .mm-req.go .sel .wh circle:first-child { stroke: #555; stroke-width: 2; stroke-dasharray: 3 5; }
.mm-req.come:not(.here) .sel .wh, .mm-req.go .sel .wh { animation: mmspin .5s linear infinite reverse; }
.mm-req.here .sel .stack, .mm-req.here .sel .cart { animation: mmoffer .6s var(--spring) both; }
.mm-req .wave { transform-box: fill-box; transform-origin: 0 100%; } .mm-req.here .sel .wave { animation: mmwave .5s ease-in-out 3 alternate; }
@keyframes mmlegstep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes mmbobv { to { transform: translateY(-3px); } }

@keyframes mmoffer { 50% { transform: translateX(-8px); } }
@keyframes mmwave { to { transform: rotate(-22deg); } }
.mm-opt { position: absolute; left: 7%; width: 31%; height: 13.5%; border: 0; border-radius: 14px; background: transparent; cursor: pointer; }
.mm-opt:hover { background: rgba(19, 35, 58, .04); }
.mm-opt:focus-visible { outline: 2px solid #E4262C; outline-offset: 2px; }
.mm-req.asking .mm-opt { pointer-events: none; }
.mm-req:not(.asking) .opt[data-k] rect { animation: mmhint 2.4s ease-in-out infinite; }
@keyframes mmhint { 50% { stroke: #E4262C; } }
.mm-bub { position: absolute; right: 2%; top: 6%; margin: 0; max-width: 230px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--card); color: var(--ink); font: 700 14px/1.3 var(--sans); box-shadow: 0 16px 30px -18px rgba(19, 35, 58, .5);
  opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 0 100%; transition: opacity .3s, transform .45s var(--spring); pointer-events: none; }
.mm-req.here .mm-bub { opacity: 1; transform: none; }
:root[data-theme="dark"] .mm-req .dk > rect:first-child { fill: #3A3F48; }
@media (max-width: 859px) { .mm-bub { font-size: 12px; max-width: 150px; padding: 8px 10px; top: 2%; } .mm-dcap { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .mm-req .act, .mm-req .opt { transition: none !important; animation: none !important; } }
/* results: brass room-number plaques instead of a flight board */
.mm-bd { background: linear-gradient(180deg, #3B2A1E, #2A1D14) !important; color: #F4E4C1 !important; box-shadow: 0 40px 70px -40px rgba(40, 20, 0, .7), inset 0 0 0 6px #4A3526 !important; }
.mm-bdh { background: #E3B04B !important; color: #3B2A0B !important; }
.mm-row { border-bottom-color: rgba(244, 228, 193, .12) !important; }
.mm-fx > i { color: #E3B04B !important; }
.sf { gap: 4px; padding: 6px 8px; border-radius: 10px; background: linear-gradient(160deg, #F2D58A, #C9962E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 6px 14px -8px rgba(0, 0, 0, .6); position: relative; }
.sf::before, .sf::after { content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #8A6418; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.sf::before { left: 3px; } .sf::after { right: 3px; }
.sf i, .sf.big i { background: none !important; width: auto !important; min-width: .62em; height: auto !important; padding: 2px 0; color: #3B2A0B !important; font-family: Georgia, "Times New Roman", serif !important; font-weight: 700 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.sf i::after { display: none !important; }
.sf i { font-size: 22px !important; } .sf.big i { font-size: 30px !important; }
.mm-rt b { color: #F2D58A !important; }
.mm-rt span { color: #E6D7BC !important; }

/* case-study top bar: no strip, just floating controls */
.cs .cs-bar, .cs.mm .mm-bar, .cs.sw .sw-bar, .cs.soon .sn-bar, .cs.ed .cs-bar, :root[data-theme="dark"] .cs .cs-bar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border: 0 !important; pointer-events: none; }
.cs-bar > * { pointer-events: auto; }
.cs-bar .cs-old { display: none !important; }
html:root .cs .cs-bar button.cs-close { width: 48px; height: 48px; padding: 0 !important; justify-content: center; border-radius: 50%; gap: 0; }
.cs-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); }
.cs-close:hover svg { transform: translateX(-2px); }
.cs-right { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 4px 0 16px; border-radius: 999px; box-sizing: border-box;
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px -14px rgba(19, 35, 58, .5); }
.cs-ttl { font: 700 14.5px/1 var(--sans); color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }
.cs-theme { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; position: relative; }
.cs-theme:hover { background: rgba(19, 35, 58, .07); }
.cs-theme svg { position: absolute; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--spring), opacity .3s; }
.cs-theme .sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .cs-theme .sun { opacity: 1; transform: none; color: #FFD86B; }
:root[data-theme="dark"] .cs-theme .moon { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .cs-right { background: rgba(38, 38, 38, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px -14px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .cs-ttl { color: #F2F2F2; }
:root[data-theme="dark"] .cs-theme:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 859px) { .cs-ttl { font-size: 13.5px; } }

/* coming soon: centred cards over a soft dot pattern */
.sn-more .c3-more { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 18px; }
.sn-more .c3-more > * { flex: 0 1 260px; }
.sn-pg { background-image: radial-gradient(circle, rgba(19, 35, 58, .09) 1.2px, transparent 1.6px) !important; background-size: 22px 22px !important; }
:root[data-theme="dark"] .sn-pg { background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1.2px, transparent 1.6px) !important; }
@media (max-width: 600px) { .sn-more .c3-more > * { flex-basis: 100%; } }

@media (max-width: 859px) {
  .tell-box .sticky { display: none !important; }
  .story-pin { padding: 9vh 0 7vh !important; }
  .ll-rev-pin { padding: 9vh 0 !important; }
}

/* ===== EazyDiner on phones: tap, don't step ===== */
.c3-pb { display: none; }
@media (max-width: 859px) {
  .c3-step { display: none !important; }
  .c3-pb { display: inline-flex; align-items: center; justify-content: center; height: 48px; margin: 16px auto 0; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1 var(--sans); color: var(--ink);
    background: rgba(255, 255, 255, .6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -14px rgba(19, 35, 58, .45); }
  .c3-pb[hidden] { display: none; }
  :root[data-theme="dark"] .c3-pb { background: rgba(255, 255, 255, .08); color: #F2F2F2; }
  #c3Chat .c3-pin > div, #c3Board .c3-pin > div { display: flex; flex-direction: column; align-items: center; }
  .c3-typing { display: none !important; }
  .c3-five div { cursor: pointer; }
  .c3-sketch { display: flex; flex-direction: column; align-items: center; }
  /* 100 diners: everything in one screen */
  .c3-fun { gap: 10px !important; align-content: center; position: relative; }
  .c3-fun .c3-steps { display: none; }
  .c3-phone { width: 128px !important; height: 248px !important; border-width: 5px !important; border-radius: 24px !important; }
  .c3-crowd { width: min(220px, 26vh) !important; gap: 2px 4px !important; }
  .c3-count b { font-size: 34px !important; }
  .c3-fnote { font-size: 15px !important; margin-top: 6px !important; }
  .c3-fnav { position: absolute; left: 0; right: 0; top: 112px; display: flex; justify-content: space-between; padding: 0 calc(50% - 128px); pointer-events: none; }
  .c3-fnav button { pointer-events: auto; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; font: 700 22px/1 var(--sans); color: var(--ink); background: rgba(255, 255, 255, .6); backdrop-filter: blur(12px); box-shadow: 0 8px 20px -12px rgba(19, 35, 58, .45); }
  .c3-fnav button:disabled { opacity: .3; }
  :root[data-theme="dark"] .c3-fnav button { background: rgba(255, 255, 255, .08); color: #F2F2F2; }
  /* 50+ apps: one row of icons, then the screens as a peeking scroll */
  .c3-logos { flex-wrap: nowrap !important; gap: 8px !important; }
  .c3-logos img:nth-child(n+5) { display: none; }
  .c3-logos img { width: 50px !important; height: 50px !important; }
  #c3Strip, .c3-strip { margin-top: 32px !important; width: auto !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding: 10px 16px 24px !important; gap: 14px !important; transform: none !important; }
  #c3Strip img { scroll-snap-align: center; height: auto !important; width: 62vw !important; }
  /* iterations: all four rounds, stacked */
  #c3Evo .c3-pin { position: relative !important; height: auto !important; top: auto !important; }
  #c3Evo .c3-evo-in { height: auto !important; padding: 2vh 0 4vh !important; }
  #c3Evo .c3-row { flex-direction: column; transform: none !important; gap: 8vh; }
  #c3Evo .c3-slide { width: 100% !important; }
  #c3Evo .c3-tabs { display: none !important; }
  /* upfront coupon: four screens in a 2 × 2 grid */
  .c3-b2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .c3-b2 span { display: block; aspect-ratio: 500 / 904; overflow: hidden; border-radius: 24px; }
  .c3-b2 img { width: 400% !important; max-width: none !important; height: 100% !important; object-fit: cover; transform: translateX(calc(var(--k) * -25%)); }
  .c3-booster .c3-zoomhint { display: none; }
  /* the paths section stays on desktop only */
  .c3-paths { display: none !important; }
  /* final screens: rounded, hairline, a peeking scroll that never clips */
  .c3-galrow { justify-content: flex-start !important; overflow-x: auto !important; scroll-snap-type: x mandatory; padding: 14px 16px 30px !important; gap: 14px !important; }
  .c3-galrow img { width: 64vw !important; scroll-snap-align: center; }
}
@media (max-width: 859px) {
  .c3-msgs .c3-pb.in { align-self: flex-start; margin: 2px 0 0 52px; padding: 10px 16px; font-size: 14px; }
  /* iterations: the phones stand on their own, no card, no corner marks, inside the gutter */
  #c3Evo .c3-card { padding: 0; background: none !important; box-shadow: none; border-radius: 0; }
  #c3Evo .c3-card .cm { display: none; }
  #c3Evo .c3-slide { padding: 0 16px !important; }
  #c3Evo .c3-slide .c3-card img { width: auto; max-width: 100%; max-height: 50svh; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 14px 22px rgba(19, 35, 58, .18)); }
  /* screen rows: nothing gets cut, shadows and the hairline breathe */
  /* screen rows run edge to edge: they scroll under the gutter instead of being cut 16px early */
  #c3Strip, .c3-strip, .c3-galrow { box-sizing: border-box; width: 100vw !important; max-width: none !important; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; scroll-padding-inline: 16px; clip-path: none !important; mask: none !important; -webkit-mask: none !important; }
}
@media (max-width: 859px) { .cs img[data-z], .c3-galrow img, #c3Strip img, .c3-b2 span { border-radius: 40px !important; outline: 0 !important; box-shadow: 0 0 0 .8px rgba(19, 35, 58, .16), 0 16px 30px -22px rgba(19, 35, 58, .45) !important; } .c3-b2 img { box-shadow: none !important; border-radius: 0 !important; } }

/* case studies: a thin neutral progress line at the very top; name and theme as two separate buttons */
.cs-prog { position: sticky; top: 0; z-index: 6; height: 3px; margin-bottom: -3px; pointer-events: none; }
.cs-prog i { display: block; height: 100%; background: var(--pc, var(--coral)); transform: scaleX(0); transform-origin: 0 50%; border-radius: 0 3px 3px 0; }
.c3-prog { display: none !important; }
.cs-right { background: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; gap: 8px !important; }
.cs-ttl { display: inline-flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 999px; box-sizing: border-box;
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px -14px rgba(19, 35, 58, .5); }
.cs-theme { width: 48px !important; height: 48px !important; background: rgba(255, 255, 255, .55) !important; backdrop-filter: blur(14px) saturate(1.6); -webkit-backdrop-filter: blur(14px) saturate(1.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 22px -14px rgba(19, 35, 58, .5); }
/* the case-study theme button says what it does, like the one on the home page */
.cs-theme { width: auto !important; padding: 0 18px 0 14px !important; display: inline-flex !important; align-items: center; gap: 8px; border-radius: 999px !important; font: 700 15px/1 var(--sans); color: var(--ink); }
.cs-theme .ct-i { position: relative; width: 20px; height: 20px; flex: none; }
.cs-theme .ct-i svg { left: 0; top: 0; width: 20px; height: 20px; }
.cs-theme .ct-l { display: grid; overflow: hidden; line-height: 1.2; }
.cs-theme .ct-l > span { grid-area: 1 / 1; transition: transform .5s var(--spring), opacity .3s; }
.cs-theme .ct-d { transform: translateY(100%); opacity: 0; }
:root[data-theme="dark"] .cs-theme { color: #FFD86B; }
:root[data-theme="dark"] .cs-theme .ct-n { transform: translateY(-100%); opacity: 0; }
:root[data-theme="dark"] .cs-theme .ct-d { transform: none; opacity: 1; }
@media (max-width: 359px) { .cs-theme .ct-l { display: none; } .cs-theme { padding: 0 !important; width: 48px !important; justify-content: center; } }
:root[data-theme="dark"] .cs-ttl, :root[data-theme="dark"] .cs-theme { background: rgba(38, 38, 38, .55) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px -14px rgba(0, 0, 0, .7); }

/* results: five hotel windows, three then two; the curtains draw open and the numbers flip in */
.cs .mm-wins { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px) !important; max-width: 940px; margin: 0 auto; background: none !important; box-shadow: none !important; padding: 0 !important; color: var(--ink) !important; }
.mm-rw { grid-column: span 2; display: flex; flex-direction: column; padding: 14px 14px 20px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 22px 40px -30px rgba(19, 35, 58, .45); text-align: center; }
.mm-rw:nth-child(4) { grid-column: 2 / span 2; } .mm-rw:nth-child(5) { grid-column: 4 / span 2; }
.mm-glass { position: relative; aspect-ratio: 3 / 3.5; overflow: hidden; border-radius: 999px 999px 8px 8px; border: 9px solid #EFE5D6;
  background: radial-gradient(70% 40% at 50% 100%, rgba(255, 214, 140, .55), transparent 70%), linear-gradient(180deg, #A9D8FF 0%, #DCEFFF 58%, #FFF3DC 100%);
  box-shadow: inset 0 0 0 1px rgba(120, 90, 60, .18), 0 1px 0 rgba(120, 90, 60, .15); }
.mm-glass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) 50% 0 / 3px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)) 0 42% / 100% 3px no-repeat; }
.mm-glass::after { content: ""; position: absolute; left: -20%; top: -10%; width: 40%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: rotate(18deg); }
.cs .mm-wins .mm-fx { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px !important; width: auto; min-height: 0; padding: 18px 8px 10px; background: none; box-shadow: none; border-radius: 0; }
.cs .mm-wins .mm-fx::after { display: none; }
.cs .mm-wins .mm-fx > i { transform: none; color: #6E86A3 !important; font-size: 15px !important; font-style: normal; }
.cs .mm-wins .mm-fx .sf { background: rgba(255, 255, 255, .92); padding: 5px 10px; border-radius: 10px; box-shadow: 0 6px 14px -8px rgba(19, 35, 58, .45); font: 800 17px/1.1 var(--sans); color: #4B5D72; }
.cs .mm-wins .mm-fx .sf.big { font-size: clamp(22px, 2.4vw, 30px); color: #13233A; }
.cs .mm-wins .mm-fx .sf::before, .cs .mm-wins .mm-fx .sf::after { display: none; }
.cs .mm-wins .mm-fx .sf i { color: #4B5D72 !important; font-size: 17px !important; text-shadow: none; }
.cs .mm-wins .mm-fx .sf.big { padding: 7px 12px; }
.cs .mm-wins .sf { display: inline-flex !important; gap: 0 !important; grid-template-columns: none !important; }
.cs .mm-wins .sf i { display: inline-block !important; flex: none !important; min-width: 0 !important; width: auto !important; height: auto; background: none !important; box-shadow: none; border-radius: 0; font-family: var(--sans) !important; font-weight: 800; letter-spacing: 0 !important; margin: 0 !important; padding: 0 !important; }
.cs .mm-wins .sf i::after { display: none; }
.cs .mm-wins .mm-fx > i { width: auto; height: auto; background: none !important; box-shadow: none !important; line-height: 1; }
.cs .mm-wins .mm-fx .sf.big i { color: #13233A !important; font-size: clamp(22px, 2.4vw, 30px) !important; }
.mm-glass .cur { position: absolute; top: 0; bottom: 0; z-index: 2; width: 51%; background: repeating-linear-gradient(90deg, #E4262C 0 10px, #C8161E 10px 13px, #E4262C 13px 22px); box-shadow: inset 0 -16px 18px -12px rgba(0, 0, 0, .25);
  transition: width 1.3s var(--ease) calc(var(--i) * .14s), border-radius 1.3s var(--ease) calc(var(--i) * .14s); }
.mm-glass .cur.l { left: 0; border-radius: 0 0 30% 0; } .mm-glass .cur.r { right: 0; border-radius: 0 0 0 30%; }
.mm-bd.open .mm-glass .cur { width: 11%; }
.mm-rw .sill { display: block; height: 10px; margin: -3px -6px 0; border-radius: 4px; background: #E6D7C1; box-shadow: 0 4px 8px -4px rgba(80, 60, 30, .4); position: relative; z-index: 1; }
.mm-rw .mm-rt { display: grid; gap: 6px; padding: 16px 4px 0; text-align: center; }
.cs .mm-wins .mm-rt b { color: var(--ink) !important; font: 800 16px/1.25 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.cs .mm-wins .mm-rt span { color: var(--ink-2) !important; font: 400 14px/1.5 var(--sans) !important; }
:root[data-theme="dark"] .mm-glass { border-color: #3A342D; background: radial-gradient(70% 45% at 50% 100%, rgba(255, 190, 100, .35), transparent 70%), linear-gradient(180deg, #13203A 0%, #22365C 60%, #3B3326 100%); }
:root[data-theme="dark"] .mm-glass::before { background: linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 50% 0 / 3px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .14), rgba(255, 255, 255, .14)) 0 42% / 100% 3px no-repeat; }
:root[data-theme="dark"] .mm-rw .sill { background: #4A4239; }
:root[data-theme="dark"] .cs .mm-wins .mm-fx > i { color: #9FB3CC !important; }
@media (max-width: 859px) {
  .cs .mm-wins { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; }
  .mm-rw, .mm-rw:nth-child(4) { grid-column: auto; padding: 10px 10px 16px; border-radius: 20px; }
  .mm-rw:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); box-sizing: border-box; }
  .mm-glass { border-width: 7px; }
  .cs .mm-wins .mm-fx { padding: 14px 4px 8px; } .cs .mm-wins .mm-fx .sf { padding: 4px 8px; } .cs .mm-wins .mm-fx .sf.big { padding: 6px 9px; }
  .cs .mm-wins .mm-fx .sf, .cs .mm-wins .mm-fx .sf i { font-size: 12.5px !important; } .cs .mm-wins .mm-fx .sf.big, .cs .mm-wins .mm-fx .sf.big i { font-size: 18px !important; }
  .cs .mm-wins .mm-rt b { font-size: 14px !important; } .cs .mm-wins .mm-rt span { font-size: 12.5px !important; }
}
@media (prefers-reduced-motion: reduce) { .mm-glass .cur { transition: none; } }

/* phone case studies: screens stay whole on screen and leave room for the words around them */
@media (max-width: 859px) {
  #c3Strip img, .c3-galrow img { width: auto !important; height: min(52svh, 440px) !important; max-width: 70vw; }
  #c3Evo .c3-slide .c3-card img { max-height: 42svh; }
  .c3-b2 { max-width: min(100%, 52svh) !important; margin-inline: auto !important; }
}

/* phone home: one portrait painting with a tall sky for the headline, instead of the wide layered valley */
.ph-hero { display: none; }
@media (max-width: 859px) {
  /* the painting itself, edge to edge, no colour laid over it; it is pinned a little right of centre so the buildings on that side stay in view */
  .ph-hero { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("v2/h/phone-day.webp") 65% 100% / cover no-repeat; }
  .stage .cam { display: none !important; }
  .stage::before { display: none !important; }
  :root[data-theme="dark"] .ph-hero { background-image: url("v2/h/phone-night.webp"); }
}

/* case-study footer: on phones the socials are just their logos; laptops keep the labelled pills */
.c3-links .soc-i { display: none; }
@media (max-width: 859px) {
  html:root .cs .c3-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; grid-template-columns: none !important; }
  html:root .cs .c3-links a.soc { flex: none !important; width: 56px !important; height: 56px !important; padding: 0 !important; display: inline-grid !important; place-items: center; border-radius: 50% !important; border: 0 !important; }
  html:root .cs .c3-links a.soc .soc-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html:root .cs .c3-links a.soc .soc-i { display: block; width: 25px; height: 25px; }
  html:root .cs .c3-links a.soc.gh { background: #24292F !important; } html:root .cs .c3-links a.soc.gh path { fill: #fff; }
  html:root .cs .c3-links a.soc.pj { background: #0A66C2 !important; } html:root .cs .c3-links a.soc.pj path { fill: #fff; }
  html:root .cs .c3-links a.soc.li { background: #0A66C2 !important; } html:root .cs .c3-links a.soc.li path { fill: #fff; }
  html:root .cs .c3-links a.soc.ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%) !important; } html:root .cs .c3-links a.soc.ig :is(path, rect, circle) { fill: #fff; }
  html:root .cs .c3-links a.soc.gm { background: #fff !important; box-shadow: inset 0 0 0 1px rgba(19, 35, 58, .12), 0 8px 18px -12px rgba(19, 35, 58, .5) !important; } html:root .cs .c3-links a.soc.gm path { fill: #EA4335; }
  html:root .cs .c3-links > :not(.soc) { flex: 1 1 100% !important; width: 100% !important; justify-content: center; }
}

/* polaroid captions: always dark ink on the white card (night mode too), two lines instead of cut off */
.pol { padding-bottom: 50px !important; }
.pol span { color: #13233A !important; white-space: normal !important; text-overflow: clip !important; font-size: 14px !important; line-height: 1.1 !important; bottom: 8px !important; height: 2.2em; display: grid !important; place-items: center; }
.jc-ph { padding-bottom: 30px !important; }
.jc-ph small { color: #13233A !important; white-space: normal !important; text-overflow: clip !important; line-height: 1.1 !important; bottom: 3px !important; height: 2.2em; display: grid !important; place-items: center; text-align: center; font-size: 11px !important; }

/* a two-photo gallery uses the whole row: two big prints instead of two small ones */
html:root .jc-gal > div[style*="--n:2"], html:root .journey.jcm .jc-gal > div[style*="--n:2"], html:root .s-gal > div[style*="--n:2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; }
.jc-gal > div[style*="--n:2"] .jc-ph .ph { aspect-ratio: 4 / 3; }
.jc-gal > div[style*="--n:2"] .jc-ph small { font-size: 13px !important; }

html:has(.cs.open) .np { z-index: 95; }   /* the music button keeps its spot, top right, even over an open case study */
@media (min-width: 860px) { html:has(.cs.open) .np { right: clamp(14px, 2.4vw, 28px) !important; } html:has(.cs.open) .np { top: calc(env(safe-area-inset-top, 0px) + 16px) !important; } html:has(.cs.open) .cs-bar { padding-right: calc(clamp(14px, 2.4vw, 28px) + var(--npw, 170px) + 8px) !important; } html:has(.cs.open) .cs-right { overflow: visible !important; } html:has(.cs.open) .cs-bar > :last-child { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }   /* in a case study the music button takes the far right and the bar's own title and theme switch sit just left of it */
@media (max-width: 859px) { html:has(.cs.open) .np { padding: 0 8px !important; gap: 0 !important; } html:has(.cs.open) .np .np-b { display: none; } }

/* phone place pins over the portrait painting (same box as the cover-fit image, anchored at the bottom) */
.ph-pins { display: none; }
@media (max-width: 859px) {
  .ph-pins { display: block; position: absolute; z-index: 1; left: calc((100vw - max(100vw, 100svh * .5625)) * .65); bottom: 0; width: max(100vw, 100svh * .5625); height: max(100svh, 100vw / .5625); pointer-events: none; }
  .ph-pin { position: absolute; z-index: 1; pointer-events: auto; opacity: 0; animation: phpin .6s var(--spring) forwards; }
  .ph-pin:nth-child(2) { animation-delay: .1s; } .ph-pin:nth-child(3) { animation-delay: .2s; } .ph-pin:nth-child(4) { animation-delay: .3s; } .ph-pin:nth-child(5) { animation-delay: .4s; } .ph-pin:nth-child(6) { animation-delay: .5s; }
  .ph-pin.l { transform: translate(-22%, -100%); } .ph-pin.l b::after { left: 22%; }
  .ph-pin.r { transform: translate(-78%, -100%); } .ph-pin.r b::after { left: 78%; }
  .ph-pin b { font-size: 12.5px; padding: 4px 11px 4px 4px; }
  .hero-copy { top: calc(env(safe-area-inset-top, 0px) + 96px) !important; }   /* the headline block sits higher, clear of the OYO pin */
  .ph-pin b { gap: 9px !important; }
  .ph-pin b > img { width: 22px; height: 22px; }
  .ph-pin b > img { margin-right: 0; }
  .ph-music b { padding-left: 11px; }
  .ph-music .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; } .ph-music .eq i { width: 3px; height: 12px; border-radius: 2px; background: #7B5CD6; transform-origin: 50% 100%; transform: scaleY(.45); }
  .ph-music.on .eq i { animation: eqb .9s ease-in-out infinite alternate; } .ph-music.on .eq i:nth-child(2) { animation-delay: .3s; } .ph-music.on .eq i:nth-child(3) { animation-delay: .6s; }
  .stage.still .ph-pins { opacity: .35; transition: opacity .4s; }
  .ph-pin.down { flex-direction: column-reverse; transform: translate(-50%, -14px); } .ph-pin.down.l { transform: translate(-22%, -14px); } .ph-pin.down.r { transform: translate(-78%, -14px); }
  .ph-pin.down b { margin-top: 6px; } .ph-pin.down b::after { bottom: auto; top: -5px; transform: rotate(225deg); }
}
@keyframes phpin { from { opacity: 0; margin-top: 10px; } to { opacity: 1; margin-top: 0; } }

/* inside a case study the site's own top bar and navbar step away completely */
html:has(.cs.open) :is(header.bar, nav.nav, .mnav) { visibility: hidden !important; pointer-events: none !important; }

/* featured on Wall of Portfolios: a badge in the sky, a pop-up in the middle of the screen */
.wop-badge { position: fixed; z-index: 69; top: calc(env(safe-area-inset-top, 0px) + 21px); right: calc(clamp(14px, 2.4vw, 28px) + 240px); width: 100px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 8px 14px rgba(8, 30, 70, .34)); transition: transform .5s var(--spring), opacity .5s, visibility 0s, right .7s var(--ease); -webkit-tap-highlight-color: transparent; }
.wop-badge:not(.ready) { opacity: 0; }
.wop-badge:hover, .wop-badge:focus-visible { transform: translateY(-3px) scale(1.07) rotate(-1.5deg); }
.wop-badge:focus-visible { outline: 2.5px solid #fff; outline-offset: 4px; border-radius: 8px; }
.wop-in { position: relative; display: block; overflow: hidden; border-radius: 5px; line-height: 0; }
.wop-in img { display: block; width: 100%; height: auto; max-width: none; }
.wop-in .wb-b { display: none; }
:root[data-theme="dark"] .wop-in .wb-w { display: none; } :root[data-theme="dark"] .wop-in .wb-b { display: block; }
.wop-shine { position: absolute; inset: -20%; pointer-events: none; transform: translateX(-130%); background: linear-gradient(100deg, transparent 38%, rgba(90, 150, 255, .8) 50%, transparent 62%); mix-blend-mode: hard-light; animation: wopshine 5.2s ease-in-out 2.4s infinite; }
:root[data-theme="dark"] .wop-shine { background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%); mix-blend-mode: soft-light; }
@keyframes wopshine { 0%, 62% { transform: translateX(-130%); } 82%, 100% { transform: translateX(130%); } }
.wop-sp { position: absolute; width: 13px; height: 13px; pointer-events: none; opacity: 0; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: wopsp 5.2s ease-in-out infinite; }
.wop-sp.a { left: -8px; top: -6px; animation-delay: 3.3s; } .wop-sp.b { right: -9px; top: 10px; width: 10px; height: 10px; animation-delay: 3.55s; } .wop-sp.c { right: 22%; bottom: -8px; width: 9px; height: 9px; animation-delay: 3.8s; }
@keyframes wopsp { 0%, 14%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 6% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
.wop-ring { position: absolute; inset: -5px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 9px; opacity: 0; pointer-events: none; }
.wop-badge.new .wop-ring { animation: wopring 2.4s ease-out 4; }
@keyframes wopring { 0% { opacity: .9; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.32); } }
.wop-hint { position: absolute; right: 4px; top: calc(100% + 6px); display: flex; align-items: center; gap: 4px; white-space: nowrap; opacity: 0; pointer-events: none; font: 400 19px/1 var(--serif); font-size-adjust: .46; color: #fff; text-shadow: 0 2px 12px rgba(10, 40, 60, .65); transition: opacity .5s; }
.wop-hint svg { width: 40px; height: 22px; margin-top: -10px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.wop-badge.new .wop-hint { opacity: 1; }
/* on phones it sits under the Night button and leaves with the hero */
.wop-badge.away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility 0s .35s, right .7s var(--ease); }
@media (max-width: 859px) { .wop-badge { width: 74px; } .wop-hint { display: none; } }
/* the pop-up */
.wop-modal { position: fixed; z-index: 97; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 20px; text-align: center; color: #F5F7FA; background: radial-gradient(60% 50% at 50% 42%, rgba(60, 90, 140, .55), rgba(6, 10, 20, .9)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.wop-modal.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease), visibility 0s; }
.wop-card { position: relative; width: min(58vw, 270px, calc((100svh - 230px) * .543)); aspect-ratio: 598 / 1100; perspective: 900px; transform: translateY(30px) scale(.78) rotateY(-80deg); transition: transform .95s var(--spring); }
.wop-modal.open .wop-card { transform: none; }
.wop-tilt { position: absolute; inset: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; animation: wopfloat 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.wop-pill { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.wop-glint { position: absolute; inset: 0; background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: url("v2/wop/featured-pill.webp") center / 100% 100% no-repeat; mask: url("v2/wop/featured-pill.webp") center / 100% 100% no-repeat; mix-blend-mode: overlay; animation: wopglint 4.2s ease-in-out .9s infinite; }
@keyframes wopglint { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
@keyframes wopfloat { 50% { translate: 0 -7px; } }
.wop-cap { margin: 8px 0 0; font: 700 17px/1.25 var(--sans); } .wop-cap b { color: #fff; }
.wop-sub { margin: 0; max-width: none; white-space: nowrap; font: 400 min(14px, 3.05vw)/1.45 var(--sans); color: rgba(245, 247, 250, .72); }
.wop-link { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font: 700 14px/1 var(--sans); text-decoration: none; transition: background .25s, transform .3s var(--spring); }
.wop-link:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.wop-x { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font: 400 26px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.wop-x:hover { background: rgba(255, 255, 255, .22); }
/* laptops and desktops: everything in the pop-up reads at a comfortable size */
@media (min-width: 860px) {
  .wop-modal { gap: 16px; }
  .wop-card { width: min(36vw, 360px, calc((100svh - 290px) * .543)); }
  .wop-cap { margin-top: 12px; font-size: clamp(26px, 2.3vw, 36px); letter-spacing: -.01em; }
  .wop-sub { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.5; }
  .wop-link { height: 54px; padding: 0 30px; font-size: 17px; }
  .wop-x { width: 52px; height: 52px; top: 24px; right: 28px; font-size: 30px; }
}
.wop-cv { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 120; pointer-events: none; }

/* phone hero: crisp headline, flat illustrated clouds instead of blurry blobs */
@media (max-width: 859px) {
  .hero-copy h1 { text-shadow: 0 1px 2px rgba(10, 40, 90, .25) !important; }
  .hero-copy .sub, .hero-copy .hey { text-shadow: 0 1px 2px rgba(10, 40, 90, .3) !important; }
  .hero-copy .sub .br { display: block; }
  .stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; z-index: 0; pointer-events: none; opacity: .9;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M14 40h92a14 14 0 0 0 0-28 20 20 0 0 0-36-8A18 18 0 0 0 38 14 13 13 0 0 0 14 40z' fill='%23fff'/%3E%3C/svg%3E") 10% 78% / 104px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M14 40h92a14 14 0 0 0 0-28 20 20 0 0 0-36-8A18 18 0 0 0 38 14 13 13 0 0 0 14 40z' fill='%23fff'/%3E%3C/svg%3E") 88% 90% / 136px auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath d='M14 40h92a14 14 0 0 0 0-28 20 20 0 0 0-36-8A18 18 0 0 0 38 14 13 13 0 0 0 14 40z' fill='%23fff'/%3E%3C/svg%3E") 58% 70% / 60px auto no-repeat;
    animation: phcloud 40s ease-in-out infinite alternate; }
  :root[data-theme="dark"] .stage::before { display: none; }
}
@keyframes phcloud { to { transform: translateX(14px); } }

/* ===== MakeMyTrip screens: one phone size everywhere (iPhone 17 Pro Max, 440 × 956), with a stroke ===== */
.cs.mm { --mmph: clamp(340px, calc(100svh - 260px), 560px); }
@media (max-width: 859px) { .cs.mm { --mmph: clamp(190px, calc(100svh - 490px), 400px); } }
.mm-scrw { flex: none; display: inline-flex; justify-content: center; padding: 10px; scroll-snap-align: center; }
html:root .mm img.mm-scr { display: block; flex: none; height: var(--mmph) !important; width: auto !important; max-width: none !important; aspect-ratio: 440 / 956 !important;
  object-fit: cover !important; object-position: 50% 22%; border-radius: 12.5% / 5.75% !important; background: #fff !important; cursor: zoom-in; outline: 0 !important;
  box-shadow: 0 0 0 1.5px rgba(19, 35, 58, .28), 0 0 0 6px var(--card), 0 0 0 7.5px rgba(19, 35, 58, .14), 0 26px 44px -26px rgba(19, 35, 58, .6) !important; }
html:root .mm img.mm-scr.dk { aspect-ratio: auto !important; object-fit: contain !important; border-radius: 14px !important; }
html:root[data-theme="dark"] .mm img.mm-scr { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3), 0 0 0 6px var(--card), 0 0 0 7.5px rgba(255, 255, 255, .14), 0 26px 44px -26px rgba(0, 0, 0, .8) !important; }

/* 06 · iterations: scroll moves through the tries, the numbers jump back */
.mm-trw { position: relative; height: calc(100svh + 6 * 62svh); }
.mm-trw > .mm-tr { position: sticky; top: clamp(64px, 9svh, 96px); }
.mm-tra { display: none !important; }
.mm-trhint { margin: -6px 0 clamp(14px, 2.4vh, 24px); font: 600 13px/1 var(--sans); color: var(--ink-2); text-align: center; transition: opacity .4s; }
.mm-tr:not([data-v="0"]) .mm-trhint { opacity: 0; }
.mm-trb { min-height: 0 !important; grid-template-columns: auto minmax(0, 1fr) !important; }
.mm-trs { min-width: 0; }
.mm-trs .ph { display: flex; gap: 6px; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: min(46vw, 640px); margin: -10px; }
.mm-trs .ph::-webkit-scrollbar { display: none; }
.mm-trs .ph:not(.many) { justify-content: center; }
.mm-trs .swipe { margin: 8px 0 0; font: 600 12.5px/1 var(--sans); color: var(--ink-2); text-align: center; }
@media (max-width: 859px) {
  .mm-trw { height: calc(100svh + 6 * 70svh); }
  .mm-trw > .mm-tr { top: calc(env(safe-area-inset-top, 0px) + 72px); padding: 14px 12px 16px; }
  .mm-trk { margin-bottom: 10px; }
  .mm-trhint { margin-bottom: 8px; }
  .mm-trb { grid-template-columns: 1fr !important; gap: 10px !important; }
  .mm-trs .ph { max-width: none; margin: -8px -8px 0; justify-content: flex-start; }
  .mm-trs .ph:not(.many) { justify-content: center; }
  .mm-trc .v { padding: 5px 10px; font-size: 11px; }
  .mm-trc h4 { margin: 8px 0 4px; font-size: 19px; }
  .mm-trc .d { font-size: 14px; line-height: 1.4; }
  .mm-trc .col { margin-top: 8px; } .mm-trc .col > b { margin-bottom: 5px; font-size: 11px; }
  .mm-trc ul { gap: 5px; } .mm-trc li { padding: 6px 10px 6px 30px; font-size: 13px; } .mm-trc li::before { left: 10px; top: 5px; }
}

/* 07 · the lift: the car fits the phone, not the other way round */
.mm-lift { height: auto !important; }
.mm-car, .mm-fl { height: auto !important; }
.mm-fl .row { flex: none !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 2px 0 6px !important; overflow-x: auto !important; }
@media (max-width: 859px) { .mm-fl .ph-car > .mm-scrw { padding: 10px 0 !important; } }

/* ===== hints in glass: "these notes move" on the yellow note, "scroll to fly in" centred after a pause ===== */
html:root .move-hint { z-index: 4; left: 0; top: 0; right: auto; bottom: auto; margin: 0; gap: 6px; padding: 9px 12px 9px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 400 17px/1 var(--serif); font-size-adjust: .46; color: var(--ink); background: rgba(255, 255, 255, .42); backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 30px -16px rgba(19, 35, 58, .45); transform: translateX(-8px) rotate(-3deg); transition: opacity .6s, transform .6s var(--ease); }
html:root .move-hint.in { transform: rotate(-3deg); }
html:root .move-hint.done { opacity: 0 !important; }
html:root .move-hint svg { width: 30px; height: 22px; stroke: var(--coral, #FF6B4A); stroke-width: 2; }
html:root[data-theme="dark"] .move-hint { color: #F2F2F2; background: rgba(24, 24, 24, .45); border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 30px -16px rgba(0, 0, 0, .7); }
/* About me: fun facts in tabs, and links instead of "Say hi" */
.s-fun { margin: 14px 0 4px; }
.sf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.sf-tabs button { padding: 7px 13px; border-radius: 999px; font: 700 13px/1 var(--sans); color: var(--ink-2); background: rgba(19, 35, 58, .06); transition: background .25s, color .25s, transform .25s var(--ease); }
.sf-tabs button:hover { transform: translateY(-1px); }
.sf-tabs button[aria-selected="true"] { color: #fff; background: var(--fc); }
.sf-pane { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; animation: sfIn .4s var(--ease); }
.sf-pane li { padding: 10px 12px 10px 14px; border-radius: 14px; background: rgba(19, 35, 58, .04); border-left: 3px solid var(--fc); }
.sf-pane b { display: block; font: 700 14.5px/1.3 var(--sans); }
.sf-pane span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
@keyframes sfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:root[data-theme="dark"] .sf-tabs button:not([aria-selected="true"]), :root[data-theme="dark"] .sf-pane li { background: rgba(255, 255, 255, .07); }
.s-link { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 999px; font: 700 13.5px/1 var(--sans); color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -10px rgba(19, 35, 58, .5); transition: transform .25s var(--ease); white-space: nowrap; }
.s-link:hover { transform: translateY(-2px); }
.sheet .row:has(.s-link) { flex-wrap: nowrap; gap: 8px; }
.s-link, .s-link:hover { text-decoration: none; }
@media (max-width: 520px) { .s-link { padding: 9px 6px; gap: 6px; font-size: 12.5px; } .s-link i { width: 20px; height: 20px; } }
.s-link i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.s-link svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html:root .scroll-cue { left: 50%; right: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 112px); padding: 10px 20px 10px 12px; border-radius: 999px; gap: 10px;
  font: 400 18px/1 var(--serif); font-size-adjust: .46; color: #fff; text-shadow: 0 1px 6px rgba(10, 30, 50, .35);
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 36px -14px rgba(10, 30, 50, .5);
  opacity: 0 !important; animation: none !important; transform: translate(-50%, 12px); transition: opacity .7s var(--ease), transform .7s var(--ease), background .3s;
  cursor: pointer; pointer-events: auto; user-select: none; }
html:root .scroll-cue.idle { opacity: 1 !important; transform: translate(-50%, 0); }
html:root .scroll-cue:hover { background: rgba(255, 255, 255, .28); transform: translate(-50%, -3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 22px 42px -12px rgba(10, 30, 50, .6); }
html:root .scroll-cue:active { transform: translate(-50%, 1px); }
html:root .scroll-cue i { width: 18px; height: 28px; border-radius: 10px; }
html:root .scroll-cue i::after { top: 5px; }
/* ===== Special Requests hero: the guest's phone and the hotel's front desk, one request at a time ===== */
.sr { --sr-red: #E4262C; --sr-red2: #C8161E; --sr-ink: #101828; --sr-ink2: #667085; --sr-line: #EAECF0; --sr-ok: #12B76A; --sr-blue: #2E90FA;
  --sr-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Geist, system-ui, sans-serif;
  position: relative; width: min(1000px, 100%); margin: 0 auto; text-align: left; letter-spacing: normal; }
.sr-in { position: absolute; left: 0; top: 0; width: 1000px; height: 560px; transform-origin: 0 0; }
.sr.narrow .sr-in { width: 420px; height: 800px; }
.sr * { box-sizing: border-box; }
/* devices */
.sr-ph { position: absolute; left: 30px; top: 10px; width: 262px; height: 540px; padding: 5px; border-radius: 38px; background: linear-gradient(145deg, #2A2D34, #0E0F12 55%, #1C1E23);
  box-shadow: inset 0 0 0 1px #3A3E47, inset 0 0 0 2px #0B0C0E, 0 50px 80px -34px rgba(16, 24, 40, .55), 0 18px 30px -18px rgba(16, 24, 40, .35); z-index: 3; }
.sr-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 30%); }
.sr-tb { position: absolute; left: 380px; top: 60px; width: 590px; height: 420px; padding: 14px; border-radius: 34px; background: linear-gradient(145deg, #2B2E35, #101114 60%, #1D1F24);
  box-shadow: inset 0 0 0 1.5px #3A3E47, 0 60px 90px -40px rgba(16, 24, 40, .5), 0 20px 34px -20px rgba(16, 24, 40, .3); z-index: 2; }
.sr.narrow .sr-ph { left: 79px; top: 0; }
.sr.narrow .sr-tb { left: 15px; top: 518px; transform: scale(.66); transform-origin: 0 0; z-index: 4; }
.sr-scr { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; font-family: var(--sr-ui); color: var(--sr-ink); -webkit-font-smoothing: antialiased; }
.sr-ph .sr-scr { border-radius: 33px; background: #F6F7F9; }
.sr-tb .sr-scr { border-radius: 20px; display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 46px 1fr; background: #F8F9FB; }
/* phone: status bar + header */
.sr-isl { position: absolute; left: 50%; top: 9px; width: 86px; height: 25px; margin-left: -43px; border-radius: 14px; background: #000; z-index: 5; }
.sr-sb { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; justify-content: space-between; align-items: center; padding: 6px 24px 0 28px; font: 600 12.5px/1 var(--sr-ui); color: #fff; z-index: 4; }
.sr-sb i { display: inline-block; width: 15px; height: 9px; margin-left: 4px; border-radius: 2px; border: 1.3px solid #fff; position: relative; }
.sr-sb i::after { content: ""; position: absolute; inset: 1px 3px 1px 1px; background: #fff; border-radius: 1px; }
.sr-sb s { display: inline-flex; gap: 1.5px; align-items: flex-end; height: 9px; } .sr-sb s b { width: 2.5px; background: #fff; border-radius: 1px; } 
.sr-hd { position: relative; height: 118px; padding: 52px 18px 0; background: radial-gradient(120% 140% at 85% 0%, #F04A4F 0%, var(--sr-red) 45%, var(--sr-red2) 100%); color: #fff; }
.sr-hd small { display: block; font: 500 10.5px/1.3 var(--sr-ui); opacity: .82; }
.sr-hd h4 { margin: 3px 0 0; font: 700 18px/1.15 var(--sr-ui); letter-spacing: -.01em; }
.sr-hd svg { position: absolute; right: 16px; top: 54px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255,255,255,.18); stroke: #fff; fill: none; stroke-width: 2; }
.sr-body { position: absolute; left: 0; right: 0; top: 104px; bottom: 0; border-radius: 18px 18px 0 0; background: #F6F7F9; }
.sr-list { position: absolute; inset: 0; padding: 16px 12px 0; transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .4s; }
.sr-lab { margin: 0 4px 8px; font: 600 10px/1 var(--sr-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--sr-ink2); }
.sr-row { position: relative; display: grid; grid-template-columns: 30px 1fr 18px; align-items: center; gap: 10px; margin-bottom: 7px; padding: 8px 10px; border-radius: 13px; background: #fff;
  box-shadow: 0 0 0 1px var(--sr-line), 0 1px 2px rgba(16,24,40,.04); cursor: pointer; transition: box-shadow .3s, background .3s; }
.sr-row .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--t, #F2F4F7); }
.sr-row .ic svg { width: 17px; height: 17px; fill: none; stroke: var(--c, #344054); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-row b { display: block; font: 600 12.5px/1.25 var(--sr-ui); }
.sr-row small { display: block; margin-top: 1px; font: 500 10px/1.3 var(--sr-ui); color: var(--sr-ink2); }
.sr-row .rd { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D0D5DD; display: grid; place-items: center; transition: background .25s, box-shadow .25s; }
.sr-row .rd svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.sr-row.on { background: #FFF6F6; box-shadow: 0 0 0 1.5px var(--sr-red), 0 6px 16px -10px rgba(228,38,44,.6); }
.sr-row.on .rd { background: var(--sr-red); box-shadow: none; } .sr-row.on .rd svg { opacity: 1; transform: none; }
.sr-more { grid-column: 1 / -1; height: 0; overflow: hidden; transition: height .45s cubic-bezier(.65,0,.35,1); }
.sr-chips { display: flex; gap: 5px; padding-top: 9px; }
.sr-chips span { flex: 1; padding: 6px 0; border-radius: 8px; text-align: center; font: 600 10.5px/1 var(--sr-ui); color: #344054; background: #F2F4F7; transition: background .25s, color .25s, box-shadow .25s; }
.sr-chips span.on { background: var(--sr-red); color: #fff; box-shadow: 0 4px 10px -6px rgba(228,38,44,.8); }
.sr-field { margin-top: 9px; padding: 8px 9px; min-height: 46px; border-radius: 9px; background: #F9FAFB; box-shadow: inset 0 0 0 1px var(--sr-line); font: 500 11px/1.4 var(--sr-ui); color: var(--sr-ink); }
.sr-field .ph { color: #98A2B3; } .sr-field .ca { display: inline-block; width: 1.5px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--sr-red); animation: srblink 1s steps(1) infinite; }
@keyframes srblink { 50% { opacity: 0; } }
.sr-cta { position: absolute; left: 12px; right: 12px; bottom: 26px; height: 42px; border-radius: 12px; display: grid; place-items: center; font: 700 13px/1 var(--sr-ui); color: #98A2B3; background: #E9EBEF; transition: background .3s, color .3s, transform .15s; }
.sr-cta.ok { background: linear-gradient(180deg, #EC3B40, var(--sr-red2)); color: #fff; box-shadow: 0 10px 20px -12px rgba(228,38,44,.9); }
.sr-cta.press { transform: scale(.96); }
.sr.sent .sr-cta { transform: translateY(70px); opacity: 0; transition: transform .5s cubic-bezier(.65,0,.35,1) .1s, opacity .3s .1s; }
.sr-home { position: absolute; left: 50%; bottom: 7px; width: 96px; height: 4px; margin-left: -48px; border-radius: 2px; background: #101828; opacity: .85; }
/* phone: status view */
.sr-st { position: absolute; inset: 0; padding: 18px 16px 0; transform: translateX(105%); transition: transform .55s cubic-bezier(.65,0,.35,1); background: #F6F7F9; }
.sr.sent .sr-list { transform: translateX(-30%); opacity: 0; } .sr.sent .sr-st { transform: none; }
.sr-card { padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--sr-line), 0 8px 20px -14px rgba(16,24,40,.25); }
.sr-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font: 600 9.5px/1 var(--sr-ui); color: #B42318; background: #FEF3F2; }
.sr-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sr-card h5 { margin: 9px 0 2px; font: 700 15px/1.2 var(--sr-ui); letter-spacing: -.01em; }
.sr-card > small { display: block; font: 500 10.5px/1.3 var(--sr-ui); color: var(--sr-ink2); }
.sr-tl { margin: 14px 0 0; padding: 0; list-style: none; }
.sr-tl li { position: relative; padding: 0 0 13px 24px; font: 600 11.5px/1.25 var(--sr-ui); color: #98A2B3; transition: color .3s; }
.sr-tl li small { display: block; margin-top: 2px; font: 500 9.5px/1.2 var(--sr-ui); color: #98A2B3; }
.sr-tl li::before { content: ""; position: absolute; left: 3px; top: 1px; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D0D5DD; background: #fff; transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.sr-tl li::after { content: ""; position: absolute; left: 8px; top: 15px; bottom: 0; width: 1.5px; background: #EAECF0; }
.sr-tl li:last-child::after { display: none; }
.sr-tl li.on { color: var(--sr-ink); } .sr-tl li.on::before { background: var(--sr-ok); box-shadow: 0 0 0 3px rgba(18,183,106,.15); }
.sr-tl li.now::before { background: #fff; box-shadow: inset 0 0 0 3px var(--sr-blue), 0 0 0 4px rgba(46,144,250,.15); }
.sr-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: #EAECF0; overflow: hidden; } .sr-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: 2px; background: linear-gradient(90deg, var(--sr-blue), #53B1FD); transition: width .2s linear; }
.sr-done { margin-top: 12px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #ECFDF3; color: #067647; font: 600 11px/1.3 var(--sr-ui); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1); }
.sr-done.on { opacity: 1; transform: none; }
.sr-done svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sr-nc { margin: 12px 4px 0; font: 500 10px/1.4 var(--sr-ui); color: var(--sr-ink2); text-align: center; }
/* tablet: front desk */
.sr-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 14px; background: #fff; box-shadow: 0 1px 0 var(--sr-line); }
.sr-top .lg { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--sr-ink); color: #fff; font: 800 11px/1 var(--sr-ui); }
.sr-top b { font: 700 13px/1.1 var(--sr-ui); } .sr-top small { display: block; font: 500 10px/1.2 var(--sr-ui); color: var(--sr-ink2); }
.sr-top .sp { flex: 1; }
.sr-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #ECFDF3; color: #067647; font: 600 10px/1 var(--sr-ui); }
.sr-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sr-ok); animation: srlive 2s ease-out infinite; }
@keyframes srlive { 0% { box-shadow: 0 0 0 0 rgba(18,183,106,.5); } 70%, 100% { box-shadow: 0 0 0 6px rgba(18,183,106,0); } }
.sr-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #F4EBFF; color: #6941C6; font: 700 10px/1 var(--sr-ui); }
.sr-nav { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 14px; background: #fff; box-shadow: 1px 0 0 var(--sr-line); }
.sr-nav i { position: relative; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #98A2B3; }
.sr-nav i.on { background: #FEF3F2; color: var(--sr-red); }
.sr-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-nav .dot { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--sr-red); box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.3); transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.sr.ping .sr-nav .dot { opacity: 1; transform: none; }
.sr-main { position: relative; padding: 14px 16px 0; overflow: hidden; }
.sr-mh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sr-mh b { font: 700 15px/1 var(--sr-ui); letter-spacing: -.01em; } .sr-mh em { font-style: normal; padding: 3px 7px; border-radius: 999px; background: #F2F4F7; font: 600 10px/1 var(--sr-ui); color: #344054; }
.sr-mh .sp { flex: 1; } .sr-mh span { padding: 5px 9px; border-radius: 7px; font: 600 10px/1 var(--sr-ui); color: var(--sr-ink2); } .sr-mh span.on { background: #fff; color: var(--sr-ink); box-shadow: 0 0 0 1px var(--sr-line); }
.sr-rows { position: relative; }
.sr-q { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; height: 56px; margin-bottom: 7px; padding: 0 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--sr-line), 0 1px 2px rgba(16,24,40,.04); transition: box-shadow .5s, transform .6s cubic-bezier(.34,1.3,.64,1), opacity .5s, margin .6s, height .6s; }
.sr-q .rm { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #F2F4F7; font: 700 11.5px/1 var(--sr-ui); color: #344054; }
.sr-q b { display: block; font: 600 12.5px/1.25 var(--sr-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sr-q small { display: block; margin-top: 2px; font: 500 10px/1.2 var(--sr-ui); color: var(--sr-ink2); }
.sr-q .s { padding: 5px 9px; border-radius: 999px; font: 600 10px/1 var(--sr-ui); white-space: nowrap; }
.sr-q .s.done { background: #ECFDF3; color: #067647; } .sr-q .s.prog { background: #EFF8FF; color: #175CD3; } .sr-q .s.new { background: #FEF3F2; color: #B42318; }
.sr-q .acc { padding: 7px 12px; border-radius: 8px; background: var(--sr-ink); color: #fff; font: 700 10.5px/1 var(--sr-ui); transition: transform .15s; } .sr-q .acc.press { transform: scale(.94); }
.sr-q.fresh { background: #FFFBFA; box-shadow: 0 0 0 1.5px rgba(228,38,44,.55), 0 14px 26px -16px rgba(228,38,44,.55); }
.sr-q.fresh .rm { background: var(--sr-red); color: #fff; }
.sr-q.in { transform: translateY(-14px) scale(.98); opacity: 0; height: 0; margin-bottom: 0; }
.sr-q.old { opacity: .55; }
.sr-toast { position: absolute; right: 14px; top: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 9px; border-radius: 12px; background: var(--sr-ink); color: #fff; font: 600 10.5px/1.2 var(--sr-ui);
  box-shadow: 0 14px 28px -14px rgba(16,24,40,.6); transform: translateY(-140%); opacity: 0; transition: transform .5s cubic-bezier(.34,1.3,.64,1), opacity .3s; z-index: 3; }
.sr-toast svg { width: 15px; height: 15px; fill: none; stroke: #FDA29B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sr.ping .sr-toast { transform: none; opacity: 1; }
/* the request in flight + taps */
.sr-fx { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.sr-arc { fill: none; stroke: rgba(228,38,44,.35); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.sr.fly .sr-arc { opacity: 1; }
.sr-tok { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border-radius: 999px; background: #fff; color: var(--sr-ink); font: 700 10.5px/1 var(--sr-ui); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(228,38,44,.25), 0 12px 26px -10px rgba(228,38,44,.55), 0 0 0 6px rgba(228,38,44,.06); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; translate: -50% -50%; z-index: 7; }
.sr-tok i { width: 16px; height: 16px; border-radius: 50%; background: var(--sr-red); display: grid; place-items: center; } .sr-tok svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sr-tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(16,24,40,.18); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); opacity: 0; z-index: 8; pointer-events: none; }
.sr-tap.go { animation: srtap .6s cubic-bezier(.2,.7,.3,1); }
@keyframes srtap { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.6); } }
:root[data-theme="dark"] .sr-ph, :root[data-theme="dark"] .sr-tb { box-shadow: inset 0 0 0 1.5px #4A4F59, 0 50px 90px -34px rgba(0,0,0,.85); }
@media (prefers-reduced-motion: reduce) { .sr * { transition: none !important; animation: none !important; } }

/* ===== Traum · the visibility score ===== */
.cs.tf { --tg: #16825A; --tgl: #E3F4EC; --ta: #A8740A; --tal: #FFF3D1; --tr: #B9451A; --trl: #FCE9E1; --ty: #FFC61F; --tb: #2F86C4; --tbl: #E7F2FB; --tp: #D9476B; --tpl: #FCEBF0; --oyo: #EE2A24;
  --paper: #F7F5F0; --card: #FFFFFF; --ink: #24272C; --ink-2: #62666D; --line: rgba(36, 39, 44, .09); --soft: #EFECE5; --c: #2F86C4;
  background: var(--paper); color: var(--ink); overflow-y: auto; overflow-x: hidden; }
:root[data-theme="dark"] .cs.tf { --tg: #4CC892; --tgl: #17302A; --ta: #F0B84A; --tal: #33291A; --tr: #F08B60; --trl: #3A2219; --tb: #6CB8EE; --tbl: #182A38; --tp: #FF7FA0; --tpl: #3A1E28;
  --paper: #15171A; --card: #1E2125; --ink: #ECEDEE; --ink-2: #A3A8AF; --line: rgba(255, 255, 255, .09); --soft: #26292E; --c: #6CB8EE; background: var(--paper) !important; }
.cs.tf .tf-bar { background: color-mix(in srgb, var(--paper) 84%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.tf-bk { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.tf-bk img { width: 26px; height: 26px; border-radius: 8px; }
.tf-pg { position: relative; overflow-x: clip; text-align: center; }
.tf [data-rv] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--ease), translate 1s var(--ease); }
.tf [data-rv].in { opacity: 1; translate: 0 0; }
.tf .c3-h[data-rv] { opacity: 1; translate: none; }
.tf .u { position: relative; z-index: 0; white-space: nowrap; }
.tf .u::after { content: ""; position: absolute; z-index: -1; left: -.04em; right: -.04em; bottom: .04em; height: .3em; border-radius: 99px; background: color-mix(in srgb, var(--ty) 75%, transparent); transform-origin: 0 50%; scale: 0 1; transition: scale 1s var(--ease) .35s; }
.tf .in .u::after, .tf-hero.in .u::after, .tf .u.in::after { scale: 1 1; }
.tf-last .u { white-space: normal; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--ty) 60%, transparent) 62%); } .tf-last .u::after { display: none; }
:root[data-theme="dark"] .tf .u::after { height: .14em; }
.tf-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* frames: a browser with a real viewport, and a phone with thin bezels */
.tf-brw { border-radius: 16px; overflow: hidden; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -48px rgba(40, 30, 10, .4); text-align: left; }
.tf-brw .tbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F1EFEA; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.tf-brw .tbar i { width: 10px; height: 10px; border-radius: 50%; background: #F2A69F; } .tf-brw .tbar i + i { background: #F4D58A; } .tf-brw .tbar i + i + i { background: #9FD9A9; }
.tf-brw .tbar span { flex: 1; margin-left: 10px; padding: 5px 12px; border-radius: 8px; background: #fff; font: 500 12px/1 var(--sans); color: #6B6F75; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tf-brw .vp { aspect-ratio: 16 / 10; overflow-y: auto; overscroll-behavior: contain; background: #F4F4F2; scrollbar-width: thin; }
.tf-brw .vp img { display: block; width: 100%; transition: opacity .25s; }
.tf-phone { position: relative; width: 300px; aspect-ratio: 300 / 620; padding: 6px; border-radius: 46px; background: #2A2C30; box-shadow: inset 0 0 0 1.5px #44474D, 0 0 0 1px rgba(0, 0, 0, .25), 0 40px 70px -36px rgba(30, 20, 0, .55); box-sizing: border-box; flex: none; }
.tf-phone .isl { position: absolute; z-index: 2; top: 14px; left: 50%; width: 76px; height: 20px; translate: -50% 0; border-radius: 99px; background: #0E0F11; }
.tf-phone .scr { height: 100%; border-radius: 40px; overflow-y: auto; overscroll-behavior: contain; background: #F4F4F2; scrollbar-width: none; }
.tf-phone .scr::-webkit-scrollbar { display: none; }
.tf-phone .scr > img { display: block; width: 100%; padding-top: 34px; background: #fff; }
.tf-phone.sm { width: 250px; }
.tf-pscr { min-height: 100%; padding-top: 34px; background: #F4F4F2; box-sizing: border-box; }
.tf-pscr .hd { display: block; width: 100%; height: 56px; object-fit: cover; object-position: top; }
.tf-pscr .cd { display: block; width: calc(100% - 20px); margin: 12px auto; border-radius: 14px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .3); }

/* hero, centred */
.tf-hero { position: relative; display: grid; justify-items: center; max-width: 76rem; margin: 0 auto; padding: calc(84px + 7vh) clamp(16px, 4vw, 48px) 4vh; box-sizing: border-box; }
.tf-hero::before { content: ""; position: absolute; z-index: -1; inset: 0 -40% 30%; background: radial-gradient(30% 42% at 30% 22%, color-mix(in srgb, var(--ty) 26%, transparent), transparent 70%), radial-gradient(28% 40% at 72% 30%, color-mix(in srgb, var(--tb) 16%, transparent), transparent 70%), radial-gradient(30% 40% at 52% 70%, color-mix(in srgb, var(--tp) 10%, transparent), transparent 70%); pointer-events: none; }
.tf-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1.2 var(--sans); color: var(--ink-2); }
.tf-k img { width: 28px; height: 28px; border-radius: 8px; } .tf-k b { color: var(--oyo); font-weight: 800; }
.tf-t { margin: 0 0 22px; font: 800 clamp(48px, 8vw, 120px)/.95 var(--sans); letter-spacing: -.055em; }
.tf-t .ln { display: block; overflow: hidden; padding-bottom: .07em; }
.tf-t .ln > span { display: inline-block; translate: 0 105%; transition: translate 1.1s var(--ease); } .tf-t .ln + .ln > span { transition-delay: .12s; }
.tf-hero.in .tf-t .ln > span { translate: 0 0; }
.tf-lead { max-width: 30ch; margin: 0 0 26px; font: 500 clamp(18px, 1.7vw, 24px)/1.45 var(--sans); color: var(--ink-2); text-wrap: balance; }
.tf-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 6vh; padding: 0; list-style: none; }
.tf-meta li { padding: 9px 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1 var(--sans); }
.tf-hero .tf-k, .tf-hero .tf-lead, .tf-hero .tf-meta, .tf-stage, .tf-hint { opacity: 0; translate: 0 18px; transition: opacity .9s var(--ease) .35s, translate 1s var(--ease) .35s; }
.tf-hero.in :is(.tf-k, .tf-lead, .tf-meta, .tf-stage, .tf-hint) { opacity: 1; translate: 0 0; } .tf-hero.in .tf-stage { transition-delay: .55s; }
.tf-stage { position: relative; width: min(100%, 1040px); padding: 0 70px 60px 0; box-sizing: border-box; }
.tf-stage .tf-brw .vp { aspect-ratio: 16 / 9.4; }
.tf-stage .tf-phone { position: absolute; right: 0; bottom: 0; width: clamp(180px, 22vw, 250px); }
.tf-hint { margin: 18px 0 0; font: 400 13px/1.4 var(--sans); color: var(--ink-2); }

/* opening */
.tf-open { max-width: 52rem; margin: 0 auto; padding: 14vh clamp(16px, 4vw, 48px) 0; box-sizing: border-box; }
.tf-big { margin: 0 auto 4vh; max-width: 20ch; font: 800 clamp(30px, 4.2vw, 58px)/1.08 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.tf-q { position: relative; margin: 6vh auto; padding: 34px clamp(20px, 4vw, 48px); border-radius: 28px; background: var(--tal); color: var(--ink); font: 700 clamp(24px, 3vw, 40px)/1.25 var(--sans); letter-spacing: -.03em; min-height: 2.5em; text-wrap: balance; }
.tf-q .caret { display: inline-block; width: 3px; height: 1em; margin-left: 4px; vertical-align: -.12em; background: var(--ta); animation: tfblink 1s steps(2) infinite; } .tf-q.done .caret { animation: none; opacity: 0; }
@keyframes tfblink { 50% { opacity: 0; } }
.tf-catch { max-width: 46ch; margin: 2vh auto 0; padding: 20px 24px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 400 17px/1.6 var(--sans); color: var(--ink-2); } .tf-catch b { color: var(--tp); }

/* scaffolding */
.tf-sec { position: relative; z-index: 1; max-width: 76rem; margin: 0 auto; padding: 18vh clamp(16px, 4vw, 48px) 0; box-sizing: border-box; }
.tf-pl { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tf-pl span { display: grid; place-items: center; min-width: 26px; height: 26px; border-radius: 999px; background: var(--tbl); color: var(--tb); letter-spacing: 0; }
.tf-sec:nth-of-type(3n) .tf-pl span { background: var(--tal); color: var(--ta); } .tf-sec:nth-of-type(3n+1) .tf-pl span { background: var(--tpl); color: var(--tp); }
.tf-h { margin: 0 auto 4vh; max-width: none; font: 800 clamp(34px, 5vw, 72px)/1.02 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.tf-h4 { margin: 14vh auto 2vh; font: 800 clamp(26px, 3vw, 42px)/1.1 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.tf-p { margin: -1vh auto 5vh; max-width: 72ch; font: 400 clamp(16px, 1.25vw, 19px)/1.65 var(--sans); color: var(--ink-2); text-wrap: pretty; }
.tf-mid { max-width: 26ch; margin: 2vh auto 6vh; font: 700 clamp(24px, 2.8vw, 38px)/1.2 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.tf-cap { margin: 2vh auto 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.tf-sw2, .tf-dev, .tf-stt { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.tf-sw2 button, .tf-dev button, .tf-stt button { padding: 10px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; white-space: nowrap; }
.tf-sw2 button.on, .tf-dev button.on, .tf-stt button.on { background: var(--card); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .25); }

/* 01 numbers */
.tf-src { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 5vh; padding: 0; list-style: none; }
.tf-src li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--tbl); color: var(--tb); font: 600 14px/1 var(--sans); }
.tf-ctr { max-width: 820px; margin: 0 auto 5vh; padding: 26px clamp(16px, 3vw, 34px); border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tf-ctr figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 20px; } .tf-ctr figcaption b { font: 700 17px/1.3 var(--sans); } .tf-ctr figcaption span { font: 400 13px/1.3 var(--sans); color: var(--ink-2); }
.tf-ctr .rows { display: grid; gap: 10px; }
.tf-ctr .r { display: grid; grid-template-columns: 150px 1fr 76px; gap: 14px; align-items: center; padding: 8px 10px; border: 0; border-radius: 14px; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background .25s; }
.tf-ctr .r:hover, .tf-ctr .r.on { background: var(--paper); }
.tf-ctr .t { font: 600 15px/1.2 var(--sans); }
.tf-ctr .b { height: 14px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.tf-ctr .b i { display: block; height: 100%; width: 0; min-width: 0; border-radius: 99px; background: linear-gradient(90deg, #9DCCF0, var(--tb)); transition: width 1.2s var(--ease); transition-delay: calc(var(--i) * 120ms); }
.tf-ctr.in .b i { width: max(4px, calc(var(--v) * 1%)); }
.tf-ctr .base .b i { background: linear-gradient(90deg, #FFE08A, #F2B705); }
.tf-ctr .r.on:not(.base) .b i { background: linear-gradient(90deg, #F7B5C6, var(--tp)); }
.tf-ctr .r b { font: 800 18px/1 var(--sans); text-align: right; font-variant-numeric: tabular-nums; }
.tf-ctr .cmp { margin: 18px 0 0; padding: 14px 18px; border-radius: 16px; background: var(--tal); font: 500 16px/1.45 var(--sans); } .tf-ctr .cmp b { font-size: 22px; color: var(--ta); }
.tf-ctr .nt { margin: 12px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink-2); }
.tf-ex { display: grid; grid-template-columns: .82fr 1.18fr; gap: 18px; align-items: start; text-align: left; }
.tf-exl { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tf-exl button { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; width: 100%; padding: 16px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 15px/1.45 var(--sans); text-align: left; cursor: pointer; transition: box-shadow .25s, background .25s, transform .25s var(--ease); }
.tf-exl button:hover { transform: translateX(3px); }
.tf-exl i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--soft); color: var(--ink-2); font: 800 14px/1 var(--sans); font-style: normal; transition: background .25s, color .25s; }
.tf-exl button.on { background: var(--tal); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ty) 80%, transparent); } .tf-exl button.on i { background: var(--ty); color: #3A2A00; }
.tf-exv .vp { aspect-ratio: 4 / 3.2; position: relative; }
.tf-exv .in { position: relative; }
.tf-exv .spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 3px var(--ty), 0 0 0 9999px rgba(247, 245, 240, .66); opacity: 0; transition: left .7s var(--ease), top .7s var(--ease), width .7s var(--ease), height .7s var(--ease), opacity .4s; pointer-events: none; }
.tf-exv .spot.on { opacity: 1; }
.tf-exd { margin: 14px 4px 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); } .tf-exd.in { animation: tfin .5s var(--ease); }
@keyframes tfin { from { opacity: 0; translate: 0 6px; } }

/* 02 first idea */
.tf-two { display: grid; justify-items: center; gap: 20px; margin: 0 auto 5vh; }
.tf-two .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 900px; text-align: left; }
.tf-fc { display: grid; gap: 14px; padding: 18px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tf-fc .top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; } .tf-fc .top img { width: 72px; height: 58px; border-radius: 10px; object-fit: cover; }
.tf-fc .top b { display: block; font: 700 17px/1.2 var(--sans); } .tf-fc .top small { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.tf-fc .gen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tf-fc .gen span { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--soft); font: 600 13px/1.2 var(--sans); color: var(--ink-2); transition: opacity .4s, filter .4s; }
.tf-fc .ctx { display: none; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--tgl); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tg) 35%, transparent); }
.tf-fc .ctx .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--card); color: var(--tg); }
.tf-fc .ctx b { display: block; font: 700 15px/1.2 var(--sans); } .tf-fc .ctx small { font: 400 13px/1.35 var(--sans); color: var(--ink-2); }
.tf-fc .ctx em { padding: 6px 10px; border-radius: 999px; background: var(--card); color: var(--tg); font: 700 13px/1 var(--sans); font-style: normal; white-space: nowrap; }
.tf-two[data-m="ctx"] .gen { display: none; } .tf-two[data-m="ctx"] .ctx { display: grid; animation: tfin .5s var(--ease); }
.tf-twoc { margin: 0; font: 500 16px/1.5 var(--sans); color: var(--ink-2); min-height: 1.5em; }
.tf-rule { display: inline-grid; gap: 6px; margin: 0 auto; padding: 22px 30px; border-radius: 22px; background: var(--tbl); font: 700 clamp(20px, 2.2vw, 28px)/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.tf-rule span { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tb); }

/* 03 meter */
.tf-gm { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 960px; margin: 0 auto 5vh; text-align: left; }
.tf-gmc { padding: 24px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(20, 80, 50, .35); text-align: center; }
.tf-gmc .hd { text-align: left; } .tf-gmc .hd b { display: block; font: 600 20px/1.2 var(--sans); } .tf-gmc .hd small { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.tf-gw { position: relative; width: min(290px, 100%); margin: 14px auto 0; }
.tf-gauge { display: block; width: 100%; overflow: visible; }
.tf-gauge path { fill: none; stroke-width: 16; stroke-linecap: round; } .tf-gauge .tk { stroke: var(--soft); } .tf-gauge .fl { stroke-dasharray: .01 100; transition: stroke .4s; }
.tf-gauge .kn { fill: #0E7A4E; transition: fill .4s; stroke: #fff; stroke-width: 5; filter: drop-shadow(0 4px 8px rgba(0, 60, 30, .3)); }
.tf-gv { position: absolute; left: 0; right: 0; top: 40%; display: grid; justify-items: center; gap: 8px; }
.tf-gv b { font: 600 clamp(48px, 5vw, 64px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font: 600 13px/1 var(--sans); background: var(--tgl); color: var(--tg); }
.tf-chip::before { content: "↗"; } .tf-chip.a { background: var(--tal); color: var(--ta); } .tf-chip.a::before { content: "↗"; } .tf-chip.r { background: #FCE6E1; color: #C2412E; } .tf-chip.r::before { content: "!"; font-weight: 800; } .tf-chip.p::before { content: "★"; }
.tf-gmc .msg { margin: 6px 0 16px; font: 500 15px/1.4 var(--sans); min-height: 2.8em; }
.tf-gmc .drag { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--paper); font: 600 13px/1 var(--sans); color: var(--ink-2); text-align: left; } .tf-gmc .drag input { width: 100%; accent-color: var(--tg); }
.tf-gmx { display: grid; align-content: start; gap: 14px; padding: 24px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tf-gmx .k, .tf-why2 .k, .tf-foldc .k, .tf-team .k { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tf-gmx .mini { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--paper); }
.tf-gmx .mini img { width: 60px; height: 48px; border-radius: 8px; object-fit: cover; } .tf-gmx .mini small { display: block; font: 500 11px/1 var(--sans); color: var(--ink-2); } .tf-gmx .mini b { font: 600 14px/1.3 var(--sans); }
.tf-gmx .bands { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tf-gmx .bands li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; font: 500 14px/1.2 var(--sans); color: var(--ink-2); transition: background .3s, color .3s; }
.tf-gmx .bands li b { min-width: 58px; font-variant-numeric: tabular-nums; }
.tf-gmx .bands li.on.r { background: #FCE6E1; color: #C2412E; } .tf-gmx .bands li.on.a { background: var(--tal); color: var(--ta); } .tf-gmx .bands li.on.g, .tf-gmx .bands li.on.p { background: var(--tgl); color: var(--tg); }
.tf-gmx .facts { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--ink-2); }
.tf-honest { max-width: 52ch; margin: 0 auto; padding: 18px 22px; border-radius: 18px; background: var(--tgl); font: 400 16px/1.55 var(--sans); color: var(--ink); text-align: left; } .tf-honest b { color: var(--tg); }
.tf-mv { display: grid; gap: 16px; max-width: 1000px; margin: 0 auto 5vh; }
.tf-mvs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tf-mvs button { display: grid; gap: 4px; padding: 14px; border: 0; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 14px/1.25 var(--sans); text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.tf-mvs small { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tf-mvs button.on { background: var(--tgl); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tg) 40%, transparent); }
.tf-mvf { margin: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: center; padding: 20px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tf-mvf .im { display: grid; place-items: center; min-height: 320px; padding: 14px; border-radius: 18px; background: var(--paper); }
.tf-mvf img { display: block; max-width: 100%; max-height: 360px; border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); animation: tfin .45s var(--ease); cursor: zoom-in; }
.tf-mvf figcaption { font: 400 16px/1.6 var(--sans); color: var(--ink-2); } .tf-mvf figcaption b { display: block; margin-bottom: 6px; font: 700 20px/1.3 var(--sans); color: var(--ink); }

/* rings */
.tf-ring { --rc: var(--tg); position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; }

.tf-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.tf-ring circle { fill: none; stroke: var(--soft); stroke-width: 3.6; }
.tf-ring circle.f { stroke: var(--rc); stroke-linecap: round; stroke-dasharray: var(--v) 100; transition: stroke-dasharray .8s var(--ease), stroke .3s; }
.tf-ring b { font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; }

/* 04 next step */
.tf-jr { display: grid; justify-items: center; gap: 18px; max-width: 980px; margin: 0 auto 6vh; }
.tf-jrs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tf-jrs li { display: flex; align-items: center; gap: 6px; } .tf-jrs li + li::before { content: "→"; color: var(--ink-2); opacity: .5; }
.tf-jrs button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.tf-jrs i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-style: normal; font-weight: 800; transition: background .3s, color .3s; }
.tf-jrs button.on { background: var(--tal); color: var(--ink); } .tf-jrs button.on i { background: var(--ty); color: #3A2A00; }
.tf-lc { width: 100%; border-radius: 22px; overflow: hidden; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -40px rgba(60, 40, 0, .45); text-align: left; --soft: #ECEAE4; }
.tf-lc .lrow { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; padding: 16px; transition: background .4s; }
.tf-lc .lrow > img { width: 120px; height: 96px; border-radius: 12px; object-fit: cover; }
.tf-lc .tx { display: grid; gap: 4px; align-content: start; min-width: 0; } .tf-lc small { font: 500 13px/1 var(--sans); color: #6B6F75; } .tf-lc .tx b { font: 500 18px/1.3 var(--sans); } .tf-lc .m { font: 400 14px/1 var(--sans); color: #6B6F75; }
.tf-lc .hf { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font: 400 14px/1 var(--sans); } .tf-lc .hf span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border-radius: 6px; transition: background .4s, box-shadow .4s; } .tf-lc .hf .tf-i { width: 15px; height: 15px; color: #16825A; } .tf-lc .hf .no .tf-i { color: #C2410C; }
.tf-lc .rt { display: grid; justify-items: end; align-content: space-between; gap: 12px; }
.tf-lc .sc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 999px; font: 500 16px/1 var(--sans); color: #A8740A; transition: box-shadow .4s, background .4s; } .tf-lc .sc > b { font-weight: 600; } .tf-lc .sc .tf-ring { width: 30px; height: 30px; } .tf-lc .sc .tf-ring b { display: none; }
.tf-lc .ics { display: flex; gap: 14px; color: #4B5157; }
.tf-lc[data-s="0"] .sc { background: #FFF3D1; box-shadow: 0 0 0 3px #FFC61F; }
.tf-lc[data-s="1"] .hf .no { background: #FCE9E1; box-shadow: 0 0 0 4px #FCE9E1; }
.tf-lc .strip { background: #FDF6E3; color: #8A5E00; }
.tf-lc .strip .hd { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; font: 500 15px/1.4 var(--sans); text-align: left; cursor: pointer; } .tf-lc .strip .hd span { flex: 1; } .tf-lc .strip .hd i { font-style: normal; transition: rotate .3s; }
.tf-lc.open .strip .hd i { rotate: 180deg; }
.tf-lc .recs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-height: 0; padding: 0 16px; overflow: hidden; transition: max-height .6s var(--ease), padding .6s var(--ease); }
.tf-lc.open .recs { max-height: 260px; padding: 0 16px 16px; }
.tf-lc .rc { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: #fff; transition: opacity .4s, background .4s; }
.tf-lc .rc img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; }
.tf-lc .rc em { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #E3F4EC; color: #16825A; font: 600 12px/1.2 var(--sans); font-style: normal; } .tf-lc .rc b { display: block; margin: 4px 0 2px; font: 600 16px/1.2 var(--sans); } .tf-lc .rc small { font: 400 13px/1.35 var(--sans); color: #6B6F75; }
.tf-lc .rc button { padding: 10px 18px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #24272C; color: #24272C; font: 600 14px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.tf-lc .rc button:hover { background: #FFC61F; box-shadow: none; }
.tf-lc[data-s="2"] .rc { animation: tfpulse 1.6s var(--ease); } @keyframes tfpulse { 30% { box-shadow: 0 0 0 3px #FFC61F; } }
.tf-lc .rc.done { background: #E3F4EC; } .tf-lc .rc.done button { box-shadow: none; background: none; color: #16825A; pointer-events: none; }
.tf-jrc { margin: 0; max-width: 54ch; font: 500 16px/1.5 var(--sans); color: var(--ink-2); min-height: 3em; }
.tf-play { padding: 13px 22px; border: 0; border-radius: 999px; background: var(--ty); color: #3A2A00; font: 700 15px/1 var(--sans); cursor: pointer; box-shadow: 0 10px 24px -14px rgba(160, 110, 0, .6); }
.tf-dual { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 900px; margin: 0 auto; text-align: left; }
.tf-dual figure { display: grid; justify-items: center; gap: 12px; margin: 0; } .tf-dual figcaption { max-width: 260px; font: 400 14px/1.5 var(--sans); color: var(--ink-2); text-align: center; }
.tf-why2 { display: grid; gap: 14px; } .tf-why2 > div { padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .tf-why2 > div:nth-of-type(1) { background: var(--tbl); box-shadow: none; } .tf-why2 > div:nth-of-type(2) { background: var(--tal); box-shadow: none; }
.tf-why2 b { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--sans); } .tf-why2 span { font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
.tf-why2 .bal { margin: 0; font: 700 20px/1.3 var(--sans); letter-spacing: -.02em; text-wrap: balance; }

/* 05 states */
.tf-st { display: grid; justify-items: center; gap: 14px; }
.tf-stt { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .tf-stt::-webkit-scrollbar { display: none; }
.tf-sttrack { display: flex; gap: 20px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 0 18px; scrollbar-width: none; }
.tf-sttrack::-webkit-scrollbar { display: none; }
.tf-sti { flex: 0 0 100%; display: grid; justify-items: center; align-content: start; gap: 18px; scroll-snap-align: start; }
.tf-sti .d { width: 100%; max-width: 1000px; padding: clamp(14px, 3vw, 34px); border-radius: 26px; background: var(--soft); box-sizing: border-box; }
.tf-sti .d img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 16px 40px -26px rgba(0, 0, 0, .4); cursor: zoom-in; }
.tf-sti .mob { display: none; justify-items: center; }
.tf-sti .na { margin: 60px 0; font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.tf-st.mob .tf-sti .d { display: none; } .tf-st.mob .tf-sti .mob { display: grid; }
.tf-sti .c { max-width: 58ch; margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink-2); } .tf-sti .c b { color: var(--ink); }
.tf-stn { display: flex; align-items: center; gap: 14px; font: 600 14px/1 var(--sans); color: var(--ink-2); }
.tf-stn button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 18px/1 var(--sans); cursor: pointer; }
.tf-by { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: start; text-align: left; }
.tf-by .map { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(0, 0, 0, .4); }
.tf-by .map img { display: block; width: 100%; }
.tf-by .bhl { position: absolute; border-radius: 10px; box-shadow: 0 0 0 3px var(--ty), 0 0 0 9999px rgba(247, 245, 240, .6); transition: left .6s var(--ease), top .6s var(--ease), width .6s var(--ease), height .6s var(--ease); }
.tf-by .list { display: grid; gap: 10px; }
.tf-by .list button { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: center; padding: 10px; border: 0; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s; }
.tf-by .list img { width: 150px; height: 92px; border-radius: 10px; object-fit: cover; object-position: top left; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.tf-by .list b { display: block; font: 700 16px/1.25 var(--sans); } .tf-by .list small { font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.tf-by .list button.on { background: var(--tal); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ty) 80%, transparent); }
.tf-sea { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: center; }
.tf-sea figure { margin: 0; padding: 16px; border-radius: 24px; background: var(--soft); } .tf-sea img { display: block; width: 100%; border-radius: 14px; cursor: zoom-in; } .tf-sea figcaption { margin-top: 10px; font: 500 14px/1.4 var(--sans); color: var(--ink-2); }

/* 06 trade-offs */
.tf-fold { display: grid; grid-template-columns: auto minmax(0, 360px); gap: clamp(24px, 5vw, 64px); justify-content: center; align-items: center; margin: 0 auto 6vh; text-align: left; }
.tf-phone.fold { width: 270px; } .tf-phone.fold .scr { position: relative; overflow: hidden; }
.tf-fk { padding: 34px 10px 10px; display: grid; gap: 8px; }
.tf-fk .fnav { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; font: 800 14px/1 var(--sans); color: #24272C; } .tf-fk .fnav i { width: 18px; height: 3px; border-radius: 2px; background: #24272C; box-shadow: 0 5px 0 #24272C, 0 -5px 0 #24272C; }
.tf-fk .gm { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; height: 120px; padding: 12px; border-radius: 14px; background: #fff; overflow: hidden; transition: height .6s var(--ease); }
.tf-fk .gm b { justify-self: start; font: 600 12px/1 var(--sans); color: #24272C; }
.tf-fk .gm .arc { width: 64%; aspect-ratio: 2 / 1; margin-top: 4px; border-radius: 999px 999px 0 0; border: 9px solid #DDEFE5; border-bottom: 0; border-left-color: #16825A; border-top-color: #4BB384; box-sizing: border-box; transition: width .6s var(--ease); }
.tf-fk .gm .n { position: absolute; top: 58%; font: 700 20px/1 var(--sans); color: #24272C; transition: top .6s var(--ease), font-size .6s; }
.tf-fold[data-z="m"] .tf-fk .gm { height: 210px; } .tf-fold[data-z="m"] .gm .arc { width: 80%; } .tf-fold[data-z="m"] .gm .n { top: 52%; font-size: 30px; }
.tf-fold[data-z="l"] .tf-fk .gm { height: 330px; } .tf-fold[data-z="l"] .gm .arc { width: 94%; } .tf-fold[data-z="l"] .gm .n { top: 42%; font-size: 44px; }
.tf-fk .li { display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 10px; border-radius: 14px; background: #fff; }
.tf-fk .li .ph { height: 46px; border-radius: 8px; background: url(v2/tf/ph.webp) center / cover; } .tf-fk .li:nth-of-type(3) .ph { background-image: url(v2/tf/ph2.webp); } .tf-fk .li:nth-of-type(4) .ph { background-image: url(v2/tf/ph3.webp); }
.tf-fk .li .l { display: grid; gap: 6px; align-content: center; } .tf-fk .li .l i { height: 7px; border-radius: 4px; background: #E6E4DE; } .tf-fk .li .l i:first-child { width: 90%; background: #CFCCC4; } .tf-fk .li .l i:last-child { width: 55%; }
.tf-phone.fold .line { position: absolute; left: 6px; right: 6px; bottom: 18px; height: 0; border-top: 2px dashed #E05A78; }
.tf-phone.fold .line span { position: absolute; right: 10px; top: -22px; padding: 3px 8px; border-radius: 6px; background: #FCEBF0; color: #C2335A; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tf-foldc { display: grid; gap: 14px; } .tf-foldc .tf-sw2 { justify-self: start; }
.tf-foldc .out { margin: 6px 0 0; font: 500 18px/1.3 var(--sans); } .tf-foldc .out b { display: block; font: 800 64px/1 var(--sans); letter-spacing: -.04em; color: var(--tp); }
.tf-foldc .d { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--ink-2); min-height: 3em; }
.tf-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; }
.tf-tri > div { padding: 22px; border-radius: 22px; } .tf-tri .sky { background: var(--tbl); } .tf-tri .sun { background: var(--tal); } .tf-tri .mint { background: var(--tgl); }
.tf-tri b { font: 700 18px/1.2 var(--sans); } .tf-tri p { margin: 8px 0 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.tf-evo { display: grid; grid-template-columns: 1.5fr .5fr; gap: 20px; align-items: start; text-align: left; }
.tf-evo .vp { aspect-ratio: 16 / 10.5; }
.tf-evn { display: grid; gap: 14px; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tf-evn input { width: 100%; accent-color: var(--ta); }
.tf-evn .lb { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .tf-evn .lb span { font: 600 12px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; } .tf-evn .lb span.on { color: var(--ink); }
.tf-evn p { margin: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); } .tf-evn p b { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--sans); color: var(--ink); }
.tf-team { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; margin-top: 8vh; text-align: left; }
.tf-team .who, .tf-team .drop { padding: 24px; border-radius: 24px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tf-team ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; padding: 0; list-style: none; }
.tf-team li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--paper); font: 600 14px/1 var(--sans); }
.tf-team li i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tbl); color: var(--tb); font: 800 12px/1 var(--sans); font-style: normal; } .tf-team li:nth-child(2) i { background: var(--tgl); color: var(--tg); } .tf-team li:nth-child(3) i { background: var(--tpl); color: var(--tp); }
.tf-team .me { margin: 0; font: 500 16px/1.5 var(--sans); }
.tf-team .drop { position: relative; background: var(--trl); box-shadow: none; }
.tf-team .drop b { display: block; font: 700 20px/1.25 var(--sans); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--tr) 70%, transparent); }
.tf-team .drop p { margin: 8px 0 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.tf-team .stamp { position: absolute; top: 16px; right: 16px; padding: 6px 10px; border: 2px solid var(--tr); border-radius: 8px; color: var(--tr); font: 800 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; rotate: 6deg; }

/* 07 AI */
.ai2 { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; max-width: 1060px; margin: 6vh auto 0; }
.ai2 .st { display: grid; justify-items: center; gap: 8px; text-align: center; opacity: 0; translate: 0 14px; transition: opacity .6s calc(.2s + var(--i) * .45s), translate .6s calc(.2s + var(--i) * .45s) var(--ease); }
.ai2.in .st { opacity: 1; translate: 0 0; }
.ai2 .st > b { margin-top: 14px; font: 700 18px/1.25 var(--sans); } .ai2 .st > small { max-width: 24ch; font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.ai2 .vis { display: grid; place-items: center; width: 100%; height: 200px; }
.ai2 .cn { width: clamp(28px, 5vw, 72px); height: 2px; margin-top: 99px; background: repeating-linear-gradient(90deg, var(--ink-2) 0 5px, transparent 5px 10px); opacity: .35; animation: aicn 1s linear infinite; }
@keyframes aicn { to { background-position: 10px 0; } }
.ai2 svg .tr { fill: none; stroke: #EEEDE8; stroke-width: 7; stroke-linecap: round; } .ai2 svg .vl { fill: none; stroke-width: 7; stroke-linecap: round; }
.ai-sys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; width: 210px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 50px -34px rgba(40, 30, 10, .45); box-sizing: border-box; }
.ai-sys .sw { grid-column: 1 / -1; display: flex; gap: 6px; } .ai-sys .sw i { width: 22px; height: 22px; border-radius: 7px; background: #FFC61F; } .ai-sys .sw i:nth-child(2) { background: #16825A; } .ai-sys .sw i:nth-child(3) { background: #2F86C4; } .ai-sys .sw i:nth-child(4) { background: #E0533D; }
.ai-sys .bt { justify-self: start; padding: 6px 14px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #24272C; color: #24272C; font: 700 12px/1 var(--sans); }
.ai-sys .ch { justify-self: end; padding: 5px 8px; border-radius: 7px; background: #E3F4EC; color: #16825A; font: 700 11px/1 var(--sans); }
.ai-sys svg { width: 72px; } .ai-sys .ln { display: grid; gap: 6px; } .ai-sys .ln i { height: 7px; border-radius: 9px; background: #EEEDE8; } .ai-sys .ln i + i { width: 60%; }
.ai-fan { position: relative; width: 280px; height: 150px; }
.ai-mc { position: absolute; left: 50%; top: 14px; display: grid; justify-items: center; width: 110px; padding: 16px 10px 12px; margin-left: -55px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 40px -26px rgba(40, 30, 10, .5); box-sizing: border-box; transition: transform .7s calc(.9s + var(--k) * .15s) var(--ease); }
.ai-mc svg { width: 74px; } .ai-mc b { margin-top: -18px; font: 800 22px/1 var(--sans); color: #24272C; letter-spacing: -.03em; }
.ai-mc:nth-child(1) { --k: 0; } .ai-mc:nth-child(2) { --k: 1; } .ai-mc:nth-child(3) { --k: 2; z-index: 1; }
.ai2.in .ai-mc:nth-child(1) { transform: translate(-84px, 14px) rotate(-10deg) scale(.88); } .ai2.in .ai-mc:nth-child(2) { transform: translate(84px, 14px) rotate(10deg) scale(.88); } .ai2.in .ai-mc:nth-child(3) { transform: translateY(-4px); }
.ai-fan em { position: absolute; z-index: 2; left: 50%; bottom: -6px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #24272C; color: #fff; font: 700 12px/1 var(--sans); font-style: normal; white-space: nowrap; } .ai-fan em svg { width: 14px; height: 14px; }
.ai-dm { display: flex; align-items: center; gap: 14px; }
.ai-dm .dk, .ai-dm .ph { display: grid; align-content: start; gap: 6px; padding: 12px 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 24px 40px -26px rgba(40, 30, 10, .5); box-sizing: border-box; }
.ai-dm .dk { grid-template-columns: 1.6fr 1fr; width: 130px; height: 88px; } .ai-dm .dk i:nth-child(1) { grid-row: span 3; }
.ai-dm .ph { width: 64px; height: 124px; padding: 16px 7px; border-radius: 16px; box-shadow: 0 0 0 3px #2A2C30, 0 24px 40px -26px rgba(40, 30, 10, .5); }
.ai-dm i { display: block; min-height: 10px; border-radius: 5px; background: #EEEDE8; } .ai-dm .dk i:nth-child(1) { background: #FFF3D1; } .ai-dm .dk i:nth-child(2) { background: #E3F4EC; }
.ai-dm .ph i { height: 14px; transform: scaleX(0); transform-origin: left; transition: transform .45s calc(1.4s + var(--n, 0) * .25s) var(--ease); }
.ai-dm .ph i:nth-child(1) { --n: 0; background: #E3F4EC; height: 26px; } .ai-dm .ph i:nth-child(2) { --n: 1; background: #FFF3D1; } .ai-dm .ph i:nth-child(3) { --n: 2; } .ai-dm .ph i:nth-child(4) { --n: 3; }
.ai2.in .ai-dm .ph i { transform: scaleX(1); } .ai2.in .ai-dm .ph i.todo { transform: scaleX(.1); background: repeating-linear-gradient(90deg, #EEEDE8 0 4px, transparent 4px 7px); }
.ai-dm .ar { font: 700 20px/1 var(--sans); color: var(--ink-2); }
.ai2-st { display: grid; justify-items: center; gap: 8px; max-width: 560px; margin: 7vh auto 0; } #tfAi .tf-mid { margin-top: 10vh; }
.ai2-st b { font: 800 clamp(44px, 5vw, 68px)/1 var(--sans); letter-spacing: -.045em; color: var(--tg); } .ai2-st span { font: 400 17px/1.5 var(--sans); color: var(--ink-2); text-wrap: balance; }

/* 08 next */
.nx-track { max-width: 920px; margin: 6vh auto 0; padding: 30px 20px 26px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(40, 30, 10, .35); }
.nx-track ol { position: relative; display: grid; align-items: start; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.nx-track ol::before, .nx-track ol::after { content: ""; position: absolute; top: 15px; left: 10%; height: 2px; }
.nx-track ol::before { right: 10%; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 11px); }
.nx-track ol::after { width: 0; background: var(--tg); transition: width 1.4s .3s var(--ease); }
.nx-track.in ol::after { width: 60%; }
.nx-track li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; opacity: .35; transition: opacity .4s calc(.3s + var(--i) * .3s); }
.nx-track.in li { opacity: 1; } .nx-track li:last-child { opacity: .6 !important; } .nx-track li:last-child .dot { box-shadow: none; border: 2px dashed color-mix(in srgb, var(--ink-2) 55%, transparent); box-sizing: border-box; }
.nx-track .dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: #fff; }
.nx-track .dot svg { width: 16px; height: 16px; }
.nx-track .d .dot { background: var(--tg); box-shadow: none; }
.nx-track .now .dot { background: var(--ty); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ty) 60%, transparent); animation: nxping 2s 1.6s infinite; }
.nx-track .now .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3A2A00; }
@keyframes nxping { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.nx-track b { font: 600 15px/1.25 var(--sans); }
.nx-track em { margin-top: -4px; padding: 4px 9px; border-radius: 999px; background: var(--tal); color: var(--ta); font: 700 11px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tf-h4.nx-h { margin-top: 12vh; }
.nx-tg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 920px; margin: 3vh auto 0; text-align: left; }
.nx-c { padding: 26px 26px 18px; border-radius: 28px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(40, 30, 10, .35); }
.nx-c .t { display: grid; gap: 10px; }
.nx-c .t b { white-space: nowrap; font: 800 clamp(48px, 5vw, 72px)/1 var(--sans); letter-spacing: -.05em; color: var(--tg); }
.nx-c strong { display: block; font: 700 18px/1.2 var(--sans); } .nx-c small { display: block; margin-top: 4px; font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.nx-c svg { display: block; width: 100%; margin-top: 18px; overflow: visible; }
.nx-c .ax { stroke: var(--line); stroke-width: 1; } .nx-c .lx { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 4; }
.nx-c .tx { fill: var(--ink-2); font: 600 11px var(--sans); letter-spacing: .04em; }
.nx-c .base { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.nx-c .pj { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s .5s var(--ease); } .nx-tg.in .pj { clip-path: inset(0 0 0 0); }
.nx-c .area { fill: color-mix(in srgb, var(--tg) 14%, transparent); }
.nx-c .proj { fill: none; stroke: var(--tg); stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
.nx-c .rng { stroke: var(--tg); stroke-width: 4; stroke-linecap: round; } .nx-c .end { fill: var(--tg); }
.nx-cap { margin: 18px auto 0; font: 400 14px/1.5 var(--sans); color: var(--ink-2); }
.nx-ms { max-width: 920px; margin: 9vh auto 0; }
.nx-ms p { margin: 0 0 14px; font: 600 15px/1.4 var(--sans); color: var(--ink-2); }
.nx-ms ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nx-ms li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 500 15px/1.2 var(--sans); }
.nx-ms li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tb); }
.tf-end { max-width: 64rem; margin: 0 auto; padding: 20vh clamp(16px, 4vw, 48px) 0; box-sizing: border-box; }
.tk-note { --pp: #FFFDF6; --pi: #24272C; --pd: rgba(47, 90, 140, .16); position: relative; margin: 0 auto; padding: clamp(52px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(32px, 4vw, 44px) clamp(44px, 8vw, 104px); border-radius: 6px 6px 16px 16px; background: radial-gradient(circle, var(--pd) 1.2px, transparent 1.6px) 0 0 / 24px 24px, var(--pp); color: var(--pi); text-align: left; rotate: -1deg;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 12px 14px 0 -2px color-mix(in srgb, var(--pp) 88%, #C9B88E), 12px 14px 0 -1px rgba(0, 0, 0, .06), 0 50px 90px -50px rgba(40, 30, 10, .5); }
.tk-note::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(26px, 6vw, 76px); width: 2px; background: rgba(217, 71, 107, .35); }
.tk-tape { position: absolute; top: -16px; left: 50%; width: 150px; height: 36px; translate: -50% 0; rotate: -3deg; background: rgba(255, 210, 70, .6); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .15); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 97% 100%, 2% 96%, 0 50%); }
.tk-k { margin: 0 0 14px; letter-spacing: 0; font: 700 30px/1 var(--hand); color: #D9476B; }
.tk-in { margin: 0; max-width: 44ch; font: 500 clamp(19px, 1.8vw, 23px)/1.45 var(--sans); color: color-mix(in srgb, var(--pi) 72%, transparent); } .tk-in b { color: var(--pi); }
.tk-l { display: grid; gap: 6px; margin: 26px 0 0; padding: 0; list-style: none; }
.tk-l li { display: flex; align-items: center; gap: 12px; font: 400 clamp(21px, 1.9vw, 26px)/1.25 var(--hand); letter-spacing: 0; }
.tk-l b { font-weight: 700; }
.tk-l svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #16825A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tk-l path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s calc(.5s + var(--i) * .35s) var(--ease); }
.tk-note.in .tk-l path { stroke-dashoffset: 0; }
.tk-note .tf-last { margin: 32px 0 0; max-width: 26ch; font-size: clamp(26px, 3vw, 42px); text-wrap: balance; }
.tk-note .tf-last .u { background: linear-gradient(transparent 58%, rgba(255, 198, 31, .65) 58%) no-repeat 0 0 / 0% 100%; transition: background-size 1.1s 2s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tk-note.in .tf-last .u { background-size: 100% 100%; }
.tk-sig { margin: 18px 0 0; text-align: right; font: 400 clamp(44px, 5vw, 60px)/1 "Mrs Saint Delafield", cursive; color: #1F3A8A; }
:root[data-theme="dark"] .tk-note { --pp: #23231F; --pi: #ECEDEE; --pd: rgba(255, 255, 255, .1); } :root[data-theme="dark"] .tk-sig { color: #9DB7F5; } :root[data-theme="dark"] .tk-l svg { stroke: #4CC892; }
.tf-fin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 3.5vw, 48px); align-items: end; max-width: 1180px; margin: 5vh auto 0; padding: clamp(20px, 3.5vw, 48px); border-radius: 40px; background: radial-gradient(90% 80% at 10% 0%, var(--tal), transparent 60%), radial-gradient(70% 70% at 100% 100%, var(--tbl), transparent 60%), var(--soft); text-align: left; }
.tf-fin figure { display: grid; gap: 14px; margin: 0; }
.tf-fin figcaption { display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--sans); }
.tf-fin figcaption i { width: 8px; height: 8px; border-radius: 50%; background: var(--tg); }
.tf-fin figcaption small { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: var(--card); color: var(--ink-2); font: 600 12px/1 var(--sans); }
.fn-d .vp { aspect-ratio: auto; height: min(68vh, 640px); }
.tf-phone.fn-ph { width: calc((min(68vh, 640px) + 39px) * 300 / 620); }
@media (max-width: 860px) { .tf-fin { grid-template-columns: 1fr; justify-items: center; } .fn-d { width: 100%; } .fn-d .vp { height: 56vh; } .tf-phone.fn-ph { width: 270px; } .tk-note { rotate: 0deg; } }
.tf-last { margin: 2vh auto 0; max-width: 24ch; font: 800 clamp(30px, 4vw, 54px)/1.12 var(--sans); letter-spacing: -.045em; text-wrap: balance; }

/* hero v3 */
.tf-hero .tf-k { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 0; background: none; box-shadow: none; font: 600 15px/1.3 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.tf-hero .tf-k img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line); } .tf-hero .tf-k b { color: var(--oyo); font-weight: 800; }
p.tf-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin: 0 0 6vh; font: 500 15px/1.3 var(--sans); color: var(--ink-2); }
.tf-b2b { padding: 7px 12px; border-radius: 999px; background: var(--tbl); color: var(--tb); font: 700 13px/1 var(--sans); letter-spacing: .02em; }
p.tf-meta i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; }
.tf-hero :is(.tf-hcard, .tf-try) { opacity: 0; translate: 0 18px; transition: opacity .9s var(--ease) .55s, translate 1s var(--ease) .55s; } .tf-hero.in :is(.tf-hcard, .tf-try) { opacity: 1; translate: 0 0; }
.tf-hcard { width: min(100%, 440px); padding: 24px; border-radius: 28px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -46px rgba(20, 80, 50, .45); box-sizing: border-box; transition: box-shadow .6s; }
.tf-hcard.max { box-shadow: 0 0 0 2px #4CC892, 0 40px 80px -40px rgba(20, 120, 70, .5); }
.tf-hcard .hd { text-align: left; } .tf-hcard .hd b { display: block; font: 600 20px/1.2 var(--sans); } .tf-hcard .hd small { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.tf-hcard .msg { margin: 6px 0 18px; font: 500 15px/1.4 var(--sans); min-height: 2.8em; }
.tf-hcard .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tf-hcard .acts button { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 16px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: background .3s, box-shadow .3s, transform .2s; }
.tf-hcard .acts button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--line); }
.tf-hcard .ic { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--card); color: var(--ink-2); transition: background .3s, color .3s; }
.tf-hcard .t { font: 600 14px/1.2 var(--sans); } .tf-hcard em { grid-column: 3; grid-row: 1; font: 700 12px/1 var(--sans); font-style: normal; color: var(--tg); }
.tf-hcard .go { grid-column: 2 / 4; font: 600 12px/1 var(--sans); color: var(--ink-2); }
.tf-hcard .acts button.on { background: var(--tgl); } .tf-hcard .acts button.on .ic { background: var(--tg); color: #fff; } .tf-hcard .acts button.on .go { color: var(--tg); }
.tf-try { margin: 16px 0 0; font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
/* opening v3 */
.tf-open { max-width: 76rem; padding-top: 16vh; }
.tf-ba { display: grid; justify-items: center; gap: 26px; margin: 0 auto 5vh; }
.tf-ba .ba-stage { display: grid; justify-items: center; gap: 14px; width: min(100%, 520px); }
.tf-ba .ba-ask { display: flex; align-items: center; gap: 10px; align-self: start; justify-self: start; }
.tf-ba .ba-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tbl); color: var(--tb); flex: none; }
.tf-ba .ba-ask p { margin: 0; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 16px/1.35 var(--sans); text-align: left; }
.tf-ba .ba-card { width: 100%; border-radius: 22px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -40px rgba(60, 40, 0, .4); overflow: hidden; text-align: left; --soft: #ECEAE4; }
.tf-ba .ba-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; }
.tf-ba .ba-top img { width: 76px; height: 64px; border-radius: 12px; object-fit: cover; } .tf-ba .ba-tx { display: grid; gap: 3px; } .tf-ba small, .tf-ba .ba-tx span { font: 400 13px/1.2 var(--sans); color: #6B6F75; } .tf-ba .ba-tx b { font: 600 17px/1.25 var(--sans); }
.tf-ba .ba-sc { transition: opacity .5s, scale .5s var(--ease); } .tf-ba[data-m="b"] .ba-sc { opacity: 0; scale: .6; }
.tf-ba .ba-old { display: flex; gap: 8px; padding: 0 16px 16px; } .tf-ba .ba-old span { padding: 8px 14px; border-radius: 10px; background: #F1EFEA; font: 600 13px/1 var(--sans); color: #6B6F75; }
.tf-ba .ba-new { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; max-height: 0; padding: 0 16px; background: #FDF6E3; overflow: hidden; transition: max-height .6s var(--ease), padding .6s var(--ease); }
.tf-ba[data-m="a"] .ba-new { max-height: 120px; padding: 14px 16px; }
.tf-ba .ba-new img { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; } .tf-ba .ba-new em { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #E3F4EC; color: #16825A; font: 600 12px/1.2 var(--sans); font-style: normal; } .tf-ba .ba-new b { display: block; margin-top: 4px; font: 600 15px/1.2 var(--sans); }
.tf-ba .ba-add { padding: 9px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px #24272C; font: 600 14px/1 var(--sans); }
.tf-ba .ba-ans { justify-self: end; display: grid; font: 600 15px/1.35 var(--sans); }
.tf-ba .ba-ans > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 18px 18px 6px 18px; transition: opacity .4s, translate .4s var(--ease); }
.tf-ba .ba-ans .ba-n { background: var(--trl); color: var(--tr); } .tf-ba .ba-ans .ba-y { background: var(--tgl); color: var(--tg); }
.tf-ba[data-m="b"] .ba-ans .ba-y, .tf-ba[data-m="a"] .ba-ans .ba-n { opacity: 0; translate: 0 8px; }
.tf-3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 3vh; padding: 0; list-style: none; }
.tf-3 li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 15px/1.2 var(--sans); }
.tf-3 i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tal); color: var(--ta); font: 800 13px/1 var(--sans); font-style: normal; }
p.tf-catch { max-width: 52ch; margin: 0 auto; padding: 0; background: none; box-shadow: none; font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
@media (max-width: 640px) { .tf-hcard .acts { grid-template-columns: 1fr; } .tf-hcard { padding: 18px; } .tf-ba .ba-top img { width: 60px; height: 52px; } .tf-ba .ba-old span { padding: 7px 10px; } }
.tf-cmp2 { width: min(100%, 1100px); margin: 0 auto 5vh; }
.tf-cmp2 .cm-cv { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #F4F4F2; user-select: none; touch-action: pan-y; }
.tf-cmp2 .cm-cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.tf-cmp2 .cm-bf { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.tf-cmp2 .cm-hd { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 0 24px rgba(0, 0, 0, .18); pointer-events: none; }
.tf-cmp2 .cm-hd i { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 48px; height: 48px; translate: -50% -50%; border-radius: 50%; background: #fff; color: #24272C; font: 700 18px/1 var(--sans); font-style: normal; letter-spacing: 2px; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .4), 0 0 0 4px rgba(255, 198, 31, .55); }
.tf-cmp2 .cm-tg { position: absolute; bottom: 16px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35); padding: 7px 12px; border-radius: 999px; font: 700 13px/1 var(--sans); pointer-events: none; transition: opacity .3s; }
.tf-cmp2 .cm-tg.l { left: 16px; background: #FCE9E1; color: #B9451A; } .tf-cmp2 .cm-tg.r { right: 16px; background: #E3F4EC; color: #16825A; }
.tf-cmp2.lo .cm-tg.l, .tf-cmp2.hi .cm-tg.r { opacity: 0; }
.tf-cmp2 input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.tf-cmp2 .cm-cap { margin: 16px auto 0; max-width: 56ch; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 640px) { .tf-cmp2 .cm-cv { aspect-ratio: 4 / 3.4; } .tf-cmp2 .cm-hd i { width: 40px; height: 40px; } .tf-cmp2 .cm-tg { bottom: 10px; font-size: 12px; } .tf-cmp2 .cm-tg.l { left: 10px; } .tf-cmp2 .cm-tg.r { right: 10px; } }
/* metrics v3 */
.tf-mx { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px; align-items: stretch; margin: 0 auto 6vh; text-align: left; --c: #F2B705; }
.tf-mxm { align-self: center; }
.mx-map { background: #F4F4F2; }
.mx-in { position: relative; }
.mx-map img { display: block; width: 100%; filter: saturate(.7); }
.mx-in::after { content: ""; position: absolute; inset: 0; background: rgba(247, 245, 240, .35); pointer-events: none; }
.mx-hot { position: absolute; z-index: 2; padding: 0; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent); cursor: pointer; transition: background .35s, box-shadow .35s, opacity .35s; }
.mx-hot::before { content: ""; position: absolute; inset: -14px; border-radius: 20px; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.mx-hot span { position: absolute; top: -12px; right: -10px; padding: 5px 9px; border-radius: 999px; background: #fff; color: #24272C; font: 800 13px/1 var(--sans); box-shadow: 0 0 0 2px var(--c), 0 6px 14px -6px rgba(0, 0, 0, .35); white-space: nowrap; }
.mx-hot.on { background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 0 0 3px var(--c); } .mx-hot.on::before { opacity: 1; animation: mxp 1.8s ease-in-out infinite; }
.tf-mx:has(.mx-hot.on) .mx-hot:not(.on) { opacity: .45; }
@keyframes mxp { 50% { transform: scale(1.06); } }
.tf-mxs { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.mx-k { margin: 0; font: 700 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mx-big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .mx-big b { font: 800 clamp(56px, 6vw, 84px)/.9 var(--sans); letter-spacing: -.05em; color: var(--c); font-variant-numeric: tabular-nums; transition: color .4s; } .mx-big span { font: 600 18px/1.2 var(--sans); }
.mx-dots { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; }
.mx-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--soft); transition: background .3s; }
.mx-dots i.on { background: var(--c); } .mx-dots i.half { background: linear-gradient(90deg, var(--c) 50%, var(--soft) 50%); }
.mx-say { margin: 0; min-height: 3em; font: 500 15px/1.5 var(--sans); color: var(--ink-2); } .mx-say b { color: var(--ink); }
.mx-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.mx-tabs button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow .25s, background .25s; }
.mx-tabs i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .mx-tabs span { font: 600 13px/1.2 var(--sans); color: var(--ink-2); } .mx-tabs b { font: 800 17px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mx-tabs button.on { background: var(--card); box-shadow: inset 0 0 0 2px var(--c); }
.mx-ft { margin: 0; font: 400 12px/1.4 var(--sans); color: var(--ink-2); }
/* coach-mark tooltip */
.tf-tip { position: fixed; z-index: 130; padding: 10px 14px; border-radius: 12px; background: #FFF3C4; color: #4A3700; font: 600 14px/1.2 var(--sans); white-space: nowrap; box-shadow: 0 0 0 1px rgba(160, 110, 0, .2), 0 12px 28px -12px rgba(80, 55, 0, .45); translate: -50% calc(-100% - 14px); opacity: 0; scale: .9; pointer-events: none; transition: opacity .3s, scale .3s var(--ease); }
.tf-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: #FFF3C4; box-shadow: 1px 1px 0 rgba(160, 110, 0, .2); }
.tf-tip.on { opacity: 1; scale: 1; animation: tftip 2s ease-in-out .3s infinite; }
@keyframes tftip { 50% { translate: -50% calc(-100% - 20px); } }
@media (max-width: 980px) { .tf-mx { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .mx-hot span { font-size: 11px; padding: 4px 7px; top: -10px; right: -6px; } .tf-mxs { padding: 18px; } .mx-dots { gap: 1.5px; } .tf-tip { white-space: normal; max-width: 220px; text-align: center; } }
/* metrics v4: one card, four moments */
.tf-mk { height: 230vh; margin: 0 auto; --c: #E8A912; }
.mk-pin { position: sticky; top: 76px; display: grid; align-content: start; justify-items: center; gap: 22px; }
.mk-steps { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.mk-steps button { padding: 9px 16px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background .3s, color .3s, box-shadow .3s; }
.mk-steps button.on { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--c); }
.mk-card { position: relative; width: min(100%, 660px); padding: 16px; border-radius: 20px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 60px -40px rgba(60, 40, 0, .45); text-align: left; box-sizing: border-box; }
.mk-card > * { transition: opacity .45s, filter .45s, scale .5s var(--ease), box-shadow .45s; }
.mk-body { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 6px; border-radius: 14px; }
.mk-body img { width: 96px; height: 76px; border-radius: 10px; object-fit: cover; }
.mk-tx small { font: 500 12px/1 var(--sans); color: #6B6F75; } .mk-tx b { display: block; margin: 4px 0 8px; font: 600 18px/1.25 var(--sans); }
.mk-tx p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font: 400 13px/1 var(--sans); } .mk-tx p span { display: inline-flex; align-items: center; gap: 4px; } .mk-tx .tf-i { width: 14px; height: 14px; color: #16825A; } .mk-tx .dash .tf-i { color: #C2410C; }
.mk-act { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EEECE6; }
.mk-ic { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #4B5157; transition: background .4s, color .4s, scale .5s var(--ease), box-shadow .4s; }
.mk-ic em { position: absolute; left: 50%; bottom: -22px; translate: -50% 0; font: 600 11px/1 var(--sans); font-style: normal; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.mk-sp { flex: 1; }
.mk-ren, .mk-pub { padding: 10px 14px; border-radius: 10px; font: 600 13px/1 var(--sans); white-space: nowrap; transition: scale .5s var(--ease), box-shadow .45s, opacity .45s, filter .45s; }
.mk-ren { background: #FFC61F; color: #3A2A00; } .mk-pub { box-shadow: inset 0 0 0 1.5px #5BA4D6; color: #2F86C4; }
/* focus one part, quiet the rest */
.mk-card[data-s="0"] .mk-act { opacity: .4; filter: grayscale(1); }
.mk-card[data-s="0"] .mk-body { box-shadow: 0 0 0 3px var(--c), 0 18px 36px -18px color-mix(in srgb, var(--c) 70%, transparent); scale: 1.02; background: #fff; }
.mk-card:not([data-s="0"]) .mk-body { opacity: .4; filter: grayscale(1); }
.mk-card:not([data-s="0"]) :is(.mk-ic, .mk-ren, .mk-pub) { opacity: .35; filter: grayscale(1); }
.mk-card[data-s="1"] .mk-stat { opacity: 1; filter: none; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); scale: 1.35; box-shadow: 0 0 0 3px var(--c); } .mk-card[data-s="1"] .mk-stat em { opacity: 1; color: var(--c); }
.mk-card[data-s="2"] .mk-ren { opacity: 1; filter: none; scale: 1.15; box-shadow: 0 0 0 3px var(--c), 0 14px 28px -12px color-mix(in srgb, var(--c) 80%, transparent); }
.mk-card[data-s="3"] .mk-pub { opacity: 1; filter: none; scale: 1.15; background: #fff; box-shadow: 0 0 0 3px var(--c), 0 14px 28px -12px color-mix(in srgb, var(--c) 80%, transparent); color: var(--c); }
.mk-read { display: grid; justify-items: center; gap: 14px; width: min(100%, 620px); }
.mk-num { display: grid; justify-items: center; gap: 4px; } .mk-num b { font: 800 clamp(56px, 7vw, 92px)/.95 var(--sans); letter-spacing: -.05em; color: var(--c); font-variant-numeric: tabular-nums; transition: color .4s; } .mk-num span { font: 600 18px/1.3 var(--sans); }
.mk-ppl { display: flex; gap: clamp(4px, 1.2vw, 10px); }
.mk-ppl i { position: relative; width: clamp(26px, 5vw, 46px); aspect-ratio: 1; --f: 0; }
.mk-ppl i.tiny::after { content: attr(data-t); position: absolute; left: 50%; bottom: calc(100% + 6px); translate: -50% 0; padding: 4px 8px; border-radius: 999px; background: var(--c); color: #fff; font: 700 11px/1 var(--sans); white-space: nowrap; animation: tfin .4s var(--ease); }
.mk-ppl i.tiny::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); animation: mxp 1.6s ease-in-out infinite; }
.mk-ppl { padding-top: 26px; }
.mk-ppl svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--soft); }
.mk-ppl i span { position: absolute; inset: 0; background: var(--c); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4 21c.8-4.6 4-7 8-7s7.2 2.4 8 7z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.5' r='4'/%3E%3Cpath d='M4 21c.8-4.6 4-7 8-7s7.2 2.4 8 7z'/%3E%3C/svg%3E") center / contain no-repeat; clip-path: inset(0 calc((1 - var(--f)) * 100%) 0 0); transition: clip-path .6s var(--ease), background .4s; }
.mk-one { max-width: 46ch; margin: 0; min-height: 3em; font: 400 16px/1.5 var(--sans); color: var(--ink-2); text-align: center; } .mk-one b { color: var(--ink); }
@media (max-width: 640px) { .tf-mk { height: 220vh; } .mk-pin { gap: 16px; padding: 0 2px; } .mk-body img { width: 70px; height: 58px; } .mk-tx b { font-size: 16px; } .mk-act { gap: 6px; } .mk-ren .lg { display: none; } .mk-ren, .mk-pub { padding: 9px 14px; } .mk-steps button { padding: 8px 12px; font-size: 13px; } }
/* findings */
.tf-find { padding-top: 14vh; }
.tf-rv2 { margin: 2vh auto 7vh; font: 800 clamp(40px, 6.4vw, 96px)/1.04 var(--sans); letter-spacing: -.05em; text-wrap: balance; }
.tf-rv2 i { font-style: normal; color: color-mix(in srgb, var(--ink) 15%, transparent); transition: color .35s; }
.tf-rv2 i.on { color: var(--ink); }
.tf-rv2.sm { max-width: 24ch; margin: 14vh auto 10vh; font-size: clamp(30px, 4vw, 56px); line-height: 1.1; } .tf-rv2 i.k.on { color: var(--tp); }
.tf-bub { max-width: 900px; margin: 0 auto 10vh; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.bb-k, .eq-k { margin: 0 0 26px; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.bb-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: end; gap: 16px; }
.bb { display: grid; justify-items: center; gap: 12px; }
.bb .ball { display: grid; place-items: center; width: calc(var(--d) * 2.2); max-width: 240px; min-width: 18px; aspect-ratio: 1; border-radius: 50%; background: var(--c); color: #fff; scale: 0; transition: scale 1s var(--ease) calc(var(--i) * 180ms); box-shadow: 0 18px 40px -20px var(--c); }
.tf-bub.in .bb .ball { scale: 1; }
.bb .ball b { font: 800 clamp(22px, 3.4vw, 48px)/1 var(--sans); letter-spacing: -.04em; }
.bb:not(:first-child) .ball b { position: absolute; translate: 0 calc(-100% - 30px); color: var(--c); font-size: clamp(22px, 2.6vw, 36px); }
.bb:not(:first-child) .ball { position: relative; }
.bb small { font: 600 15px/1.2 var(--sans); color: var(--ink-2); }
.bb-gap { margin: 30px auto 0; max-width: 48ch; font: 500 17px/1.5 var(--sans); color: var(--ink-2); } .bb-gap b { color: var(--tp); font-size: 22px; }
.tf-eq { max-width: 980px; margin: 0 auto; }
.eq-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; margin-bottom: 30px; }
.eq-row .t { display: grid; gap: 4px; padding: 16px 22px; border-radius: 18px; font: 700 clamp(18px, 1.8vw, 24px)/1.2 var(--sans); text-align: left; opacity: 0; translate: 0 16px; transition: opacity .6s, translate .7s var(--ease); }
.eq-row .t small { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.eq-row .g { background: var(--tal); } .eq-row .b { background: var(--tbl); } .eq-row .r { background: var(--trl); } .eq-row s { text-decoration-thickness: 2px; text-decoration-color: var(--tr); }
.eq-row i { font: 800 32px/1 var(--sans); font-style: normal; color: var(--ink-2); opacity: 0; transition: opacity .5s; }
.tf-eq.in .eq-row > * { opacity: 1; translate: 0 0; } .tf-eq.in .eq-row > :nth-child(2) { transition-delay: .25s; } .tf-eq.in .eq-row > :nth-child(3) { transition-delay: .45s; } .tf-eq.in .eq-row > :nth-child(4) { transition-delay: .65s; } .tf-eq.in .eq-row > :nth-child(5) { transition-delay: .85s; }
.eq-q { margin: 0 auto; max-width: 30ch; padding: 30px clamp(20px, 4vw, 40px); border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 700 clamp(24px, 2.8vw, 38px)/1.25 var(--sans); letter-spacing: -.03em; text-wrap: balance; opacity: 0; translate: 0 20px; transition: opacity .7s 1.1s, translate .8s var(--ease) 1.1s; }
.tf-eq.in .eq-q { opacity: 1; translate: 0 0; } .eq-q .u { white-space: normal; }
.eq-q .lab { color: var(--tb); }
@media (max-width: 640px) { .bb-row { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .bb .ball { width: calc(var(--d) * 1.3); } .bb small { font-size: 12px; } .eq-row .t { padding: 12px 14px; } .eq-row i { font-size: 24px; } }
/* pinned problems */
.tf-pins { padding-top: 16vh; }
.tf-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); max-width: 1080px; margin: 0 auto; padding: clamp(24px, 4vw, 46px) clamp(16px, 3vw, 36px); border-radius: 30px; background: #EFE7D8 radial-gradient(rgba(120, 90, 40, .08) 1px, transparent 1.4px) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .12); }
:root[data-theme="dark"] .tf-board { background-color: #2A2620; }
.tf-pin { position: relative; aspect-ratio: 1 / 1.05; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; rotate: var(--r); transition: rotate .5s var(--ease), translate .5s var(--ease); opacity: 0; translate: 0 30px; }
.tf-board.in .tf-pin { opacity: 1; translate: 0 0; transition: rotate .5s var(--ease), translate .7s var(--ease) calc(var(--i) * 110ms), opacity .6s calc(var(--i) * 110ms); }
.tf-pin:hover, .tf-pin[aria-pressed="true"] { rotate: 0deg; translate: 0 -8px !important; z-index: 2; }
.tf-pin .tack { position: absolute; z-index: 3; top: -9px; left: 50%; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A8A, #D9364B 60%, #9E2033); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .35); }
.tf-pin .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.tf-pin[aria-pressed="true"] .in { transform: rotateY(180deg); }
.tf-pin .fr, .tf-pin .bk { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 26px 18px 18px; border-radius: 6px 6px 18px 6px; background: var(--c); color: #2B2A26; text-align: left; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 30px -18px rgba(70, 50, 10, .55), 0 2px 0 rgba(0, 0, 0, .04); box-sizing: border-box; }
.tf-pin .bk { transform: rotateY(180deg); background: #fff; }
.tf-pin em { font: 700 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.tf-pin .fr b { font: 700 clamp(17px, 1.5vw, 21px)/1.25 var(--sans); letter-spacing: -.015em; }
.tf-pin small { margin-top: auto; font: 600 12px/1 var(--sans); opacity: .55; }
.tf-pin .ev { font: 400 15px/1.45 var(--sans); color: #5E6166; }
.tf-pin .bk b { margin-top: auto; padding: 10px 12px; border-radius: 12px; background: var(--c); font: 700 15px/1.3 var(--sans); }
@media (max-width: 980px) { .tf-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tf-board { grid-template-columns: 1fr; padding: 22px 18px; } .tf-pin { aspect-ratio: auto; min-height: 190px; } }
/* wrong turn: scroll scene */
.tf-sh { height: 340vh; }
.sh-pin { position: sticky; top: 0; height: 100vh; display: grid; align-content: center; justify-items: center; gap: 22px; padding-top: 56px; box-sizing: border-box; }
.sh-hd .tf-h { margin-bottom: 1.5vh; font-size: clamp(30px, 3.6vw, 52px); } .sh-hd .tf-p { margin: 0 auto; } .sh-hd .tf-pl { margin-bottom: 12px; }
#tfFirst { padding-top: 10vh; }
@media (max-width: 640px) { .sh-pin { align-content: start; padding-top: 74px; gap: 14px; } .sh-hd .tf-pl, .sh-hd .tf-p { display: none; } .sh-hd .tf-h { font-size: 28px; margin: 0; } .sh-steps { gap: 4px 14px; } .sh-note { width: 230px; padding: 20px 16px 16px; } .sh-note b { font-size: 16px; } }
.sh-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.sh-steps li { opacity: .45; transition: opacity .4s; } .sh-steps button { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 15px/1.2 var(--sans); color: var(--ink-2); cursor: pointer; } .sh-steps li.cur button { color: var(--ink); }
.sh-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); font: 800 12px/1 var(--sans); font-style: normal; transition: background .4s, color .4s; }
.sh-steps li.on { opacity: 1; } .sh-steps li.on i { background: var(--ty); color: #3A2A00; }
.sh-stage { position: relative; display: grid; justify-items: center; gap: 20px; width: min(100%, 880px); }
.sh-card { width: 100%; border-radius: 24px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 70px -44px rgba(60, 40, 0, .5); overflow: hidden; text-align: left; --soft: #ECEAE4; }
.tf .sh-top { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 24px; }
.tf .sh-top img { width: 150px; height: 112px; border-radius: 14px; object-fit: cover; }
.tf .sh-top small { font: 500 12px/1 var(--sans); color: #6B6F75; } .tf .sh-top b { display: block; margin: 6px 0 12px; font: 600 28px/1.2 var(--sans); }
.tf .sh-top p { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font: 400 14px/1 var(--sans); } .tf .sh-top p span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; transition: background .4s, box-shadow .4s; } .tf .sh-top .tf-i { width: 15px; height: 15px; color: #16825A; } .tf .sh-top .no .tf-i { color: #C2412E; }
.sh-sc .tf-ring { width: 72px; height: 72px; } .sh-sc .tf-ring b { font-size: 21px; }
.sh-rec { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; max-height: 0; padding: 0 20px; background: #FDF6E3; overflow: hidden; transition: max-height .7s var(--ease), padding .7s var(--ease); }
.sh-rec img { width: 120px; height: 84px; border-radius: 10px; object-fit: cover; }
.sh-rec em { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #E3F4EC; color: #16825A; font: 600 12px/1.2 var(--sans); font-style: normal; } .sh-rec b { display: block; margin: 6px 0 3px; font: 600 20px/1.2 var(--sans); } .sh-rec small { font: 400 14px/1.4 var(--sans); color: #6B6F75; }
.sh-add { padding: 11px 20px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #24272C; color: #24272C; font: 600 15px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s, scale .3s var(--ease); }
.sh-stage[data-s="2"] .sh-add { background: #FFC61F; box-shadow: none; animation: shp 1.4s ease-in-out infinite; } @keyframes shp { 50% { scale: 1.06; } }
.sh-stage[data-s="3"] .sh-add { background: #E3F4EC; color: #16825A; box-shadow: none; }
.sh-stage[data-s="3"] .sh-rec { background: #F0FAF4; }
.sh-cat { width: 100%; padding: 18px 20px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); box-sizing: border-box; text-align: left; transition: opacity .6s, translate .7s var(--ease), max-height .7s var(--ease), padding .7s; max-height: 200px; overflow: hidden; }
.sh-cat p { margin: 0 0 12px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sh-cat div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sh-cat span { display: flex; align-items: center; gap: 8px; padding: 18px 14px; font-size: 15px; border-radius: 14px; background: var(--paper); font: 600 14px/1.2 var(--sans); transition: opacity .4s, box-shadow .4s, background .4s, scale .5s var(--ease); }
.sh-note { position: absolute; right: -70px; bottom: -150px; width: 270px; padding: 26px 20px 20px; border-radius: 4px 4px 18px 4px; background: #FFF1B8; color: #2B2A26; text-align: left; rotate: 3deg; box-shadow: 0 24px 40px -22px rgba(80, 60, 0, .55); opacity: 0; translate: 0 30px; scale: .9; transition: opacity .5s, translate .6s var(--ease), scale .6s var(--ease); pointer-events: none; }
.sh-note .tack { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FF8A8A, #D9364B 60%, #9E2033); box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .35); }
.sh-note em { display: block; margin-bottom: 8px; font: 700 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .6; } .sh-note b { font: 700 19px/1.3 var(--sans); }
.sh-stage[data-s="1"] .sh-ph { background: #FCE6E1; box-shadow: 0 0 0 2px #E0533D; }
.sh-stage[data-s="1"] .sh-cat span:not(.fit) { opacity: .3; } .sh-stage[data-s="1"] .sh-cat .fit { background: #FFF3C4; box-shadow: inset 0 0 0 2px #F2B705; scale: 1.06; }
.sh-stage[data-s="2"] .sh-rec, .sh-stage[data-s="3"] .sh-rec { max-height: 220px; padding: 20px 24px; }
.sh-stage[data-s="2"] .sh-cat .fit { opacity: 0; scale: .6; } .sh-stage[data-s="2"] .sh-cat span:not(.fit) { opacity: .35; }
.sh-stage[data-s="3"] .sh-cat { opacity: 0; translate: 0 -40px; max-height: 0; padding-top: 0; padding-bottom: 0; }
.sh-stage[data-s="3"] .sh-note { transition-delay: .5s; opacity: 1; translate: 0 0; scale: 1; }
@media (max-width: 760px) { .sh-note { position: relative; right: auto; bottom: auto; margin-top: 4px; } .sh-cat div { grid-template-columns: 1fr 1fr; } .tf .sh-top { grid-template-columns: auto 1fr; padding: 16px; } .tf .sh-top img { width: 80px; height: 66px; } .tf .sh-top b { font-size: 18px; } .sh-sc { position: absolute; right: 14px; top: 14px; } .sh-card { position: relative; } .tf .sh-top > div { padding-right: 52px; } .sh-rec { grid-template-columns: auto 1fr; } .sh-rec img { width: 64px; height: 52px; } .sh-add { grid-column: 1 / -1; text-align: center; } .sh-steps li span { font-size: 13px; } .tf-sh { height: 320vh; } }
/* meter evolution: spotlight */
.tf-ev { display: grid; justify-items: center; gap: 16px; margin: 2vh auto 8vh; }
.ev-stage { position: relative; width: 100%; height: clamp(270px, 27vw, 350px); overflow-x: clip; overflow-y: visible; }
.tf-ev { overflow-x: clip; }
#tfMeter .tf-h4 { position: relative; z-index: 3; }
.ev-cone { position: absolute; z-index: 0; left: 50%; top: -30%; width: min(64vw, 560px); height: 135%; translate: -50% 0; background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 80%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(18px); pointer-events: none; }
:root[data-theme="dark"] .ev-cone { background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .1) 45%, transparent 80%); }
.ev-floor { position: absolute; left: 50%; bottom: 2%; width: min(56vw, 480px); height: 56px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); pointer-events: none; }
.ev-c { --o: 0; position: absolute; left: 50%; top: 50%; width: clamp(220px, 22vw, 300px); aspect-ratio: 1 / .86; padding: 16px; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -26px rgba(0, 0, 0, .35); display: grid; place-items: center; cursor: pointer; box-sizing: border-box;
  translate: calc(-50% + var(--o) * min(30vw, 330px)) -50%; scale: .72; opacity: .5; filter: grayscale(.85) brightness(.96); transition: translate .7s var(--ease), scale .7s var(--ease), opacity .5s, filter .5s, box-shadow .5s; z-index: 1; }
.ev-c.far { opacity: 0; pointer-events: none; }
.ev-c.on { scale: 1; opacity: 1; filter: none; z-index: 2; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -30px rgba(0, 0, 0, .35), 0 0 60px 10px rgba(255, 255, 255, .9); cursor: default; }
.ev-c img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.ev-c .ev-tag { position: absolute; top: -12px; left: 50%; translate: -50% 0; padding: 6px 12px; border-radius: 999px; background: var(--card); color: var(--ink-2); font: 700 12px/1 var(--sans); box-shadow: 0 0 0 1px var(--line); white-space: nowrap; }
.ev-c.on .ev-tag { background: var(--ty); color: #3A2A00; box-shadow: none; }
.ev-nav { display: flex; align-items: center; gap: 16px; }
.ev-nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 600 18px/1 var(--sans); cursor: pointer; }
.ev-dots { display: flex; gap: 8px; } .ev-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--soft); cursor: pointer; transition: width .3s, background .3s; } .ev-dots i.on { width: 26px; background: var(--ty); }
.ev-tx { display: grid; justify-items: center; gap: 10px; width: min(100%, 760px); text-align: center; }
.ev-tx.in > * { animation: tfin .5s var(--ease) both; } .ev-tx.in > *:nth-child(2) { animation-delay: .06s; } .ev-tx.in > *:nth-child(3) { animation-delay: .14s; }
.ev-k { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ta); }
.ev-tx > b { font: 800 clamp(22px, 2.4vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; }
.ev-gb { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .ev-gb:has(.ev-bad[hidden]) { grid-template-columns: 1fr; max-width: 460px; }
.ev-good, .ev-bad { display: flex; gap: 10px; margin: 0; padding: 14px 16px; border-radius: 16px; font: 500 15px/1.45 var(--sans); text-align: left; }
.ev-good { background: var(--tgl); } .ev-good .tf-i { color: var(--tg); margin-top: 2px; }
.ev-bad { background: var(--trl); } .ev-bad .tf-i { color: var(--tr); margin-top: 2px; } .ev-bad[hidden] { display: none; }
@media (max-width: 640px) { .ev-stage { height: 300px; } .ev-c { width: 230px; translate: calc(-50% + var(--o) * 190px) -50%; } .ev-gb { grid-template-columns: 1fr; } .ev-cone { width: 90vw; } }
/* recommended tray */
.tf-rt { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; max-width: 1100px; margin: 0 auto; }
.rt-who { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.rt-who button { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow .3s, background .3s; }
.rt-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; } .rt-who b { display: block; font: 700 14px/1.2 var(--sans); } .rt-who small { font: 500 12px/1.2 var(--sans); color: var(--ink-2); }
.rt-who button.on { background: var(--tal); box-shadow: inset 0 0 0 2px var(--ty); }
.rt-tray { width: 100%; min-width: 0; padding: 22px; border-radius: 24px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 70px -46px rgba(60, 40, 0, .45); box-sizing: border-box; text-align: left; --soft: #ECEAE4; }
.rt-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.rt-hd b { display: flex; align-items: center; gap: 8px; font: 600 20px/1.2 var(--sans); } .rt-hd small { font: 400 14px/1.4 var(--sans); color: #6B6F75; }
.rt-hd .i { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #24272C; font: 700 11px/1 var(--sans); } .rt-hd em { padding: 3px 6px; border-radius: 5px; background: #24272C; color: #fff; font: 700 10px/1 var(--sans); font-style: normal; }
.rt-sc { display: flex; align-items: center; gap: 8px; } .rt-sc .tf-ring { width: 44px; height: 44px; } .rt-sc .tf-ring b { display: none; } .rt-sc b { font: 700 24px/1 var(--sans); font-variant-numeric: tabular-nums; } .rt-sc small { font: 500 14px/1 var(--sans); color: #6B6F75; }
.rt-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; min-height: 300px; }
.rt-c { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 8px 18px -12px rgba(0, 0, 0, .3); overflow: hidden; transition: opacity .45s, scale .45s var(--ease), background .3s; }
.rt-row.in .rt-c { animation: rtin .6s var(--ease) both; animation-delay: calc(var(--i) * 90ms); } @keyframes rtin { from { opacity: 0; translate: 0 24px; scale: .96; } }
.rt-c .im { position: relative; aspect-ratio: 16 / 9; } .rt-c .im img { width: 100%; height: 100%; object-fit: cover; }
.rt-c em { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: #E3F4EC; color: #16825A; font: 600 13px/1 var(--sans); font-style: normal; }
.rt-c > b { padding: 6px 14px 0; font: 600 16px/1.25 var(--sans); } .rt-c > small { padding: 0 14px; font: 400 13px/1.4 var(--sans); color: #6B6F75; flex: 1; }
.rt-c button { align-self: flex-start; margin: 6px 14px 0; padding: 10px 22px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #24272C; color: #24272C; font: 600 14px/1 var(--sans); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.rt-c button:hover { background: #FFC61F; box-shadow: none; }
.rt-c.done { background: #F0FAF4; } .rt-c.done button { background: #E3F4EC; color: #16825A; box-shadow: none; }
.rt-c.out { opacity: 0; scale: .85; }
.rt-done { grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 30px; border-radius: 18px; background: #F0FAF4; color: #16825A; text-align: center; animation: tfin .5s var(--ease); } .rt-done .tf-i { width: 34px; height: 34px; } .rt-done b { font: 700 18px/1.2 var(--sans); color: #24272C; } .rt-done small { font: 400 14px/1.4 var(--sans); color: #6B6F75; }
.rt-why { margin: 16px 0 0; font: 500 14px/1.45 var(--sans); color: #6B6F75; }
@media (max-width: 640px) { .rt-who { flex-wrap: nowrap; justify-content: flex-start; width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; } .rt-who button { flex: none; } .rt-tray { padding: 16px; } .rt-hd b { font-size: 17px; } }
@media (max-width: 900px) { .rt-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; } .rt-c { flex: 0 0 72%; scroll-snap-align: start; } .rt-hd { flex-wrap: wrap; } }
/* meter section v2 */
.tf-gm2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; max-width: 1180px; margin: 0 auto 8vh; text-align: left; }
.g2-col { display: grid; gap: 28px; }
.g2-col.l { text-align: right; } .g2-col.l .g2-a { justify-items: end; }
.g2-a { display: grid; gap: 6px; } .g2-a i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ty); color: #3A2A00; font: 800 13px/1 var(--sans); font-style: normal; }
.g2-a b { font: 700 18px/1.25 var(--sans); } .g2-a span { font: 400 15px/1.5 var(--sans); color: var(--ink-2); max-width: 26ch; }
.g2-a .mini { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 6px; padding: 10px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); max-width: 300px; }
.g2-a .mini img { width: 52px; height: 42px; border-radius: 8px; object-fit: cover; } .g2-a .mini small { display: block; font: 500 11px/1 var(--sans); color: var(--ink-2); } .g2-a .mini b { font: 600 14px/1.3 var(--sans); }
.g2-mid { display: grid; gap: 14px; }
.g2-mid .tf-gmc { padding: 24px 24px 18px; }
.g2-scale { display: grid; grid-template-columns: 49fr 30fr 20fr 9fr; gap: 4px; margin: 0; padding: 0; list-style: none; }
.g2-scale li { display: grid; gap: 4px; padding: 8px 8px 0; border-top: 6px solid var(--soft); border-radius: 3px; font: 500 12px/1.2 var(--sans); color: var(--ink-2); transition: border-color .3s, color .3s; }
.g2-scale li b { font: 700 12px/1 var(--sans); } .g2-scale li:last-child span { white-space: nowrap; }
.g2-scale li:nth-child(1) { --sc: #E0533D; } .g2-scale li:nth-child(2) { --sc: #E8A912; } .g2-scale li:nth-child(3), .g2-scale li:nth-child(4) { --sc: #16825A; }
.g2-scale li { border-top-color: color-mix(in srgb, var(--sc) 25%, transparent); } .g2-scale li.on { color: var(--ink); border-top-color: var(--sc); }
.g2-drag { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 600 13px/1 var(--sans); color: var(--ink-2); } .g2-drag input { width: 100%; accent-color: var(--ink); }
.tf-pr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1000px; margin: 0 auto 4vh; text-align: left; }
.tf-pr > div { padding: 20px; border-radius: 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tf-pr .ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: var(--tbl); color: var(--tb); } .tf-pr > div:nth-child(2) .ic { background: var(--tal); color: var(--ta); } .tf-pr > div:nth-child(3) .ic { background: var(--tgl); color: var(--tg); }
.tf-pr b { font: 700 17px/1.25 var(--sans); } .tf-pr p { margin: 6px 0 0; font: 400 15px/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 980px) { .tf-gm2 { grid-template-columns: 1fr; max-width: 520px; } .g2-mid { order: -1; } .g2-col, .g2-col.l { text-align: left; } .g2-col.l .g2-a { justify-items: start; } .g2-col { grid-template-columns: 1fr 1fr; gap: 18px; } .tf-pr { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 520px) { .g2-col { grid-template-columns: 1fr; } }
.tf-bub .wf { display: grid; grid-template-columns: repeat(50, 1fr); gap: 3px; }
.tf-bub .wf i { aspect-ratio: 1; border-radius: 2px; background: var(--soft); transition: background .3s; transition-delay: calc(var(--k) * 2.5ms); }
.tf-bub.in .wf i.y { background: #E8A912; } .tf-bub.in .wf i.o { background: #E06A3F; } .tf-bub.in .wf i.p { background: #D9476B; } .tf-bub.in .wf i.h { background: linear-gradient(90deg, #D9476B 50%, var(--soft) 50%); }
.wf-lg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; text-align: left; }
.wf-lg > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; }
.wf-lg i { grid-row: span 2; width: 14px; height: 14px; border-radius: 4px; } .wf-lg .y i { background: #E8A912; } .wf-lg .o i { background: #E06A3F; } .wf-lg .p i { background: #D9476B; } .wf-lg .n i { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.wf-lg b { font: 800 clamp(24px, 2.6vw, 34px)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .wf-lg .y b { color: #C98E00; } .wf-lg .o b { color: #E06A3F; } .wf-lg .p b { color: #D9476B; } .wf-lg .n b { color: var(--ink-2); }
.wf-lg span { font: 500 14px/1.2 var(--sans); color: var(--ink-2); }
@media (max-width: 640px) { .tf-bub .wf { grid-template-columns: repeat(25, 1fr); gap: 2px; } .wf-lg { grid-template-columns: 1fr 1fr; } }
/* meter v3 */
.tf-m3 { display: grid; justify-items: center; max-width: 500px; margin: 0 auto 4vh; text-align: left; }
.m3-card { width: 100%; box-sizing: border-box; }
.m3-k { margin: 26px 0 10px; font: 600 14px/1.3 var(--sans); color: var(--ink-2); text-align: center; }
.m3-k::before { content: ""; display: block; width: 1px; height: 22px; margin: -22px auto 10px; background: var(--line); }
.tf-m3 .m3-li { width: calc(100% - 48px); box-sizing: border-box; }
.m3-card { position: relative; user-select: none; -webkit-user-select: none; padding: 26px 28px 24px; border-radius: 30px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 50px 90px -50px rgba(40, 60, 30, .45); --soft: #EEEDE8; }
.m3-card .hd b { display: flex; align-items: center; gap: 8px; font: 600 22px/1.2 var(--sans); } .m3-card .hd .i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #24272C; font: 700 12px/1 var(--sans); } .m3-card .hd small { font: 400 15px/1.4 var(--sans); color: #6B6F75; }
.m3-g { position: relative; width: min(100%, 420px); margin: 10px auto 0; touch-action: none; }
.tf-gauge.g3 { cursor: grab; } .dragging .tf-gauge.g3 { cursor: grabbing; }
.g3 .sg { fill: none; stroke-width: 16; stroke-linecap: butt; opacity: .16; transition: opacity .35s; } .g3 .sg.on { opacity: .32; }
.g3 .fl { stroke-width: 16; }
.g3 .bl { font: 600 7.5px var(--sans); fill: #A3A7AC; letter-spacing: .02em; transition: fill .35s; } .g3 .bl.on { fill: #24272C; font-weight: 800; }
.g3 .tk2 { font: 600 6.5px var(--sans); fill: #B9BCC0; }
.g3 .halo { opacity: .18; transition: fill .4s; animation: m3h 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes m3h { 50% { opacity: .05; transform: scale(1.35); } }
.g3 .kn { stroke-width: 6; cursor: grab; }
.m3-g .tf-gv { top: 44%; } .m3-g .tf-gv b { font-size: clamp(56px, 6vw, 80px); }
.m3-hint { position: absolute; right: -2%; bottom: 2%; padding: 6px 10px; border-radius: 999px; background: #24272C; color: #fff; font: 700 12px/1 var(--sans); animation: m3b 1.6s ease-in-out infinite; transition: opacity .3s; pointer-events: none; } .m3-hint.gone { opacity: 0; } @keyframes m3b { 50% { translate: 0 -4px; } }
.m3-card .msg { margin: 8px 0 0; text-align: center; font: 500 16px/1.4 var(--sans); min-height: 2.8em; }
.m3-li { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: #fff; color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 18px 40px -28px rgba(0, 0, 0, .35); transition: box-shadow .3s, scale .3s var(--ease); --soft: #EEEDE8; }
.m3-li img { width: 64px; height: 52px; border-radius: 10px; object-fit: cover; } .m3-li small { display: block; font: 500 11px/1 var(--sans); color: #6B6F75; } .m3-li b { display: block; margin: 3px 0; font: 600 15px/1.25 var(--sans); }
.m3-li em { font: 600 12px/1 var(--sans); font-style: normal; } .m3-li em.r { color: #C2412E; } .m3-li em.a { color: #A8740A; } .m3-li em.g, .m3-li em.p { color: #16825A; }
@media (max-width: 900px) { .m3-card { padding: 20px 18px; } }
/* ICP */
.tf-icp { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; max-width: 1000px; margin: 0 auto; text-align: left; }
.icp-card { padding: 26px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgba(0, 0, 0, .3); }
.icp-top { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; } .icp-top small { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .icp-top b { display: block; margin-top: 4px; font: 800 24px/1.15 var(--sans); letter-spacing: -.02em; }
.flag { display: grid; grid-template-rows: repeat(3, 1fr); width: 54px; height: 38px; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); flex: none; } .flag i:nth-child(1) { background: #1E1E1E; } .flag i:nth-child(2) { background: #DD2B21; } .flag i:nth-child(3) { background: #FFCC00; }
.icp-age p { margin: 0 0 30px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.icp-age .ax { position: relative; height: 12px; border-radius: 99px; background: var(--soft); margin: 0 10px 34px; }
.icp-age .ax span { position: absolute; top: 20px; translate: -50% 0; font: 600 12px/1 var(--sans); color: var(--ink-2); }
.icp-age .band { position: absolute; left: 20%; width: 0; top: -6px; bottom: -6px; border-radius: 99px; background: linear-gradient(90deg, #FFCC00, #E8A912); box-shadow: 0 8px 20px -8px rgba(200, 140, 0, .6); transition: width 1.1s var(--ease) .3s; }
.tf-icp.in .icp-age .band { width: 40%; }
.icp-age > small { font: 500 14px/1 var(--sans); color: var(--ink-2); } .icp-age > small b { color: var(--ink); font-size: 18px; }
.icp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.icp-facts li { padding: 12px 14px; border-radius: 14px; background: var(--paper); } .icp-facts span { display: block; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .icp-facts b { display: block; margin-top: 6px; font: 600 15px/1.35 var(--sans); }
.icp-jobs { display: grid; align-content: start; gap: 10px; }
.icp-jobs .k { margin: 0 0 4px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.icp-jobs > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; translate: 20px 0; transition: opacity .6s, translate .7s var(--ease); transition-delay: calc(.4s + var(--i) * .15s); }
.tf-icp.in .icp-jobs > div { opacity: 1; translate: 0 0; }
.icp-jobs .ic { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tbl); color: var(--tb); } .icp-jobs > div:nth-of-type(2) .ic { background: var(--tal); color: var(--ta); } .icp-jobs > div:nth-of-type(3) .ic { background: var(--tgl); color: var(--tg); }
.icp-jobs b { font: 700 17px/1.2 var(--sans); } .icp-jobs small { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
.icp-jobs .note { margin: 6px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--tal); font: 500 15px/1.5 var(--sans); }
/* A/B */
.tf-ab { display: grid; justify-items: center; gap: 22px; max-width: 1000px; margin: 0 auto; }
.ab-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.ab-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 600 15px/1 var(--sans); cursor: pointer; opacity: .5; transition: opacity .3s, color .3s; }
.ab-steps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--soft); font: 800 12px/1 var(--sans); font-style: normal; } .ab-steps button.on { opacity: 1; color: var(--ink); } .ab-steps button.on i { background: var(--ty); color: #3A2A00; }
.ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.ab-v { position: relative; margin: 0; padding: 18px; border-radius: 26px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: opacity .6s, scale .6s var(--ease), box-shadow .5s, filter .6s; }
.ab-v figcaption { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .ab-v figcaption b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--card); font: 800 17px/1 var(--sans); } .ab-v figcaption span { font: 600 16px/1.2 var(--sans); }
.ab-wf { display: grid; grid-template-columns: 1.7fr 1fr; gap: 10px; padding: 12px; border-radius: 16px; background: #F4F4F2; }
.ab-wf > div { display: grid; align-content: start; gap: 8px; }
.w-m { position: relative; height: 70px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #CFE8DA; } .w-m i { position: absolute; left: 50%; top: 14px; width: 50px; height: 25px; translate: -50% 0; border: 7px solid #16825A; border-bottom: 0; border-radius: 50px 50px 0 0; box-sizing: border-box; }
.w-r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #FFE08A; } .w-r i { height: 34px; border-radius: 6px; background: #F1E7C8; }
.w-li { height: 26px; border-radius: 8px; background: #fff; } .w-p { height: 46px; border-radius: 10px; background: #fff; }
.ab-call { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .4s; }
.ab-call .ph { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tbl); color: var(--tb); } .ab-call .q { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); font: 500 14px/1.45 var(--sans); }
.tf-ab:not([data-s="0"]) .ab-call { max-height: 120px; opacity: 1; }
.tf-ab[data-s="2"] .ab-v { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tb) 45%, transparent); } .tf-ab[data-s="2"] .ab-v::after { content: "Testing…"; position: absolute; top: 18px; right: 18px; padding: 5px 10px; border-radius: 999px; background: var(--tbl); color: var(--tb); font: 700 12px/1 var(--sans); }
.ab-win { position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px; background: var(--tg); color: #fff; font: 700 13px/1 var(--sans); opacity: 0; scale: .6; transition: opacity .4s, scale .5s var(--ease); }
.tf-ab[data-s="3"] .ab-v.a { opacity: .45; scale: .96; filter: grayscale(.8); } .tf-ab[data-s="3"] .ab-v.b { box-shadow: inset 0 0 0 3px var(--tg), 0 30px 60px -40px rgba(20, 120, 70, .5); scale: 1.02; } .tf-ab[data-s="3"] .ab-v.b .ab-win { opacity: 1; scale: 1; }
.ab-cap { margin: 0; max-width: 56ch; min-height: 3em; font: 500 16px/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 760px) { .tf-icp, .ab-pair { grid-template-columns: 1fr; } .icp-facts { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tf-h .u { white-space: normal; } }
/* findings → fixes */
.tf-fs { display: grid; gap: 10px; max-width: 820px; margin: 0 auto 10vh; text-align: left; }
.fs-k { display: grid; grid-template-columns: 1fr 48px 1.3fr; margin: 0 0 4px; padding: 0 20px; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); } .fs-k span:last-child { grid-column: 3; }
.fs-r { display: grid; grid-template-columns: 1fr 48px 1.3fr; align-items: center; padding: 16px 20px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; translate: 0 14px; transition: opacity .6s, translate .7s var(--ease); transition-delay: calc(var(--i) * .15s); }
.tf-fs.in .fs-r { opacity: 1; translate: 0 0; }
.fs-n { display: flex; align-items: baseline; gap: 10px; font: 500 15px/1.2 var(--sans); color: var(--ink-2); } .fs-n b { font: 800 30px/1 var(--sans); letter-spacing: -.03em; color: var(--c); font-variant-numeric: tabular-nums; }
.fs-ar { color: var(--c); } .fs-ar .tf-i { width: 22px; height: 22px; translate: -10px 0; transition: translate .6s var(--ease); transition-delay: calc(.4s + var(--i) * .15s); } .tf-fs.in .fs-ar .tf-i { translate: 0 0; }
.fs-f { font: 600 16px/1.35 var(--sans); }
@media (max-width: 640px) { .fs-k { display: none; } .fs-r { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; } .fs-ar { display: none; } .fs-f::before { content: "→ "; color: var(--c); } }
/* iterations: single column, scroll-stepped */
.tf-it { height: 340vh; margin-top: 12vh; }
.it-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 64px 0 24px; box-sizing: border-box; }
.it-pin .tf-h4 { margin: 0 0 6px; }
.it-cap { margin: 0; max-width: 60ch; font: 400 17px/1.45 var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
.it-cap b { font-weight: 700; color: var(--ink); }
.it-cap.in { animation: tfin .45s var(--ease) both; }
.it-pin .tf-brw { width: min(100%, 1040px, (100svh - 330px) * 1.86); }
.it-vp { position: relative; aspect-ratio: 16 / 8.6; width: 100%; overflow: hidden; background: #F4F4F2; }
.it-vp img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; scale: 1.02; transition: opacity .5s, scale .7s var(--ease); }
.it-vp img.on { opacity: 1; scale: 1; }
.it-dots { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--soft); }
.it-dots button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 13px/1 var(--sans); cursor: pointer; transition: background .3s, color .3s; }
.it-dots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; } .it-dots .past i { opacity: .8; background: var(--tg); }
.it-dots button.on { background: var(--card); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .25); } .it-dots button.on i { opacity: 1; background: var(--ty); }
@media (max-width: 640px) { .it-pin .tf-brw { width: 100%; } .it-dots span { display: none; } .it-dots button { padding: 8px; } .it-cap { min-height: 3em; font-size: 15px; } .tf-it { height: 320vh; } }
/* ICP v2: map + host ID */
.tf-icp2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; max-width: 1040px; margin: 0 auto 6vh; text-align: left; }
.icp-map { position: relative; margin: 0; }
.icp-map svg { display: block; width: 100%; max-height: 560px; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
.icp-map .de, .icp-map .lbl, .icp-map .dot, .icp-map .pls { }
.icp-map .nb { fill: #E7E3DA; stroke: var(--paper); stroke-width: 1.5; } :root[data-theme="dark"] .icp-map .nb { fill: #2A2D31; }
.icp-map .de { fill: #FFD84D; stroke: #E0A800; stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 16px 24px rgba(200, 150, 0, .35)); transform-box: fill-box; transform-origin: center; scale: .9; opacity: 0; transition: scale 1s var(--ease), opacity .7s; }
.tf-icp2.in .icp-map .de { scale: 1; opacity: 1; }
.icp-map .lbl { font: 800 20px var(--sans); letter-spacing: .3em; fill: rgba(80, 55, 0, .55); }
.icp-map .dot { fill: #D9364B; stroke: #fff; stroke-width: 3; } .icp-map .pls { fill: #D9364B; opacity: .35; transform-box: fill-box; transform-origin: center; animation: icpp 2s ease-out infinite; } @keyframes icpp { to { scale: 3.2; opacity: 0; } }
.icp-map .icp-tag { position: absolute; translate: 14px -130%; padding: 6px 10px; border-radius: 999px; background: var(--card); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); font: 700 12px/1 var(--sans); white-space: nowrap; }
.icp-map figcaption { margin-top: 6px; text-align: center; font: 600 14px/1 var(--sans); color: var(--ink-2); }
.icp-id { position: relative; padding: 22px; border-radius: 22px; background: linear-gradient(135deg, #FFFFFF, #F6F3EC); color: #24272C; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 40px 70px -40px rgba(60, 40, 0, .5); rotate: -2deg; transition: rotate .6s var(--ease); overflow: hidden; }
.icp-id:hover { rotate: 0deg; }
.icp-id::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #1E1E1E 33%, #DD2B21 33% 66%, #FFCC00 66%); }
.id-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .id-top span { font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #6B6F75; } .id-top img { width: 30px; height: 30px; border-radius: 8px; }
.id-body { display: grid; grid-template-columns: 110px 1fr; gap: 18px; }
.id-body .av { width: 110px; height: 128px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.id-body dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.id-body dl > div:nth-child(3), .id-body dl > div:nth-child(5), .id-body dl > div:nth-child(6) { grid-column: 1 / -1; }
.id-body dt { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6B6F75; } .id-body dd { margin: 4px 0 0; font: 600 15px/1.3 var(--sans); }
.id-body dl > div:nth-child(2) dd { font: 800 26px/1 var(--sans); letter-spacing: -.02em; }
.id-age { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(0, 0, 0, .12); } .id-age > span { font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #6B6F75; }
.id-age .ax { position: relative; height: 10px; margin: 10px 0 6px; border-radius: 99px; background: #ECEAE4; }
.id-age .band { position: absolute; left: 20%; width: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #FFCC00, #E8A912); transition: width 1s var(--ease) .4s; } .tf-icp2.in .id-age .band { width: 40%; }
.id-age .me { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #24272C; box-shadow: 0 0 0 3px #fff; }
.id-age .lb { display: flex; justify-content: space-between; font: 600 12px/1 var(--sans); color: #6B6F75; } .id-age .lb b { color: #24272C; font-size: 14px; }
.id-ft { margin: 14px 0 0; font: 500 12px/1.3 var(--sans); color: #6B6F75; }
.icp-jobs2 { max-width: 1040px; margin: 0 auto; text-align: left; } .icp-jobs2 .k { margin: 0 0 12px; text-align: center; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.icp-jobs2 > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.icp-jobs2 > div > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 16px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.icp-jobs2 .ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tbl); color: var(--tb); } .icp-jobs2 > div > div:nth-child(2) .ic { background: var(--tal); color: var(--ta); } .icp-jobs2 > div > div:nth-child(3) .ic { background: var(--tgl); color: var(--tg); }
.icp-jobs2 b { font: 700 16px/1.2 var(--sans); } .icp-jobs2 small { font: 400 14px/1.4 var(--sans); color: var(--ink-2); }
@media (max-width: 760px) { .tf-icp2 { grid-template-columns: 1fr; } .icp-map svg { max-height: 360px; } .icp-jobs2 > div { grid-template-columns: 1fr; } .id-body { grid-template-columns: 90px 1fr; } .id-body .av { width: 90px; height: 106px; } }
/* footer, lightbox */
.tf-foot { margin-top: 10vh; }
.tf-sky { background: radial-gradient(40% 60% at 20% 100%, color-mix(in srgb, var(--tb) 16%, transparent), transparent 70%), radial-gradient(40% 60% at 55% 100%, color-mix(in srgb, var(--ty) 22%, transparent), transparent 70%), radial-gradient(40% 60% at 88% 100%, color-mix(in srgb, var(--tp) 14%, transparent), transparent 70%); }
.tf-sky .fl { position: absolute; bottom: 12%; left: calc(6% + var(--i) * 14%); display: grid; place-items: center; width: clamp(64px, 8vw, 110px); height: clamp(64px, 8vw, 110px); border-radius: 50%; background: var(--card); box-shadow: 0 20px 40px -20px rgba(0, 60, 30, .4); animation: tffloat 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.tf-sky .fl:nth-child(even) { bottom: 40%; } .tf-sky .tf-ring { width: 72%; height: 72%; } .tf-sky .tf-ring b { font-size: clamp(14px, 1.4vw, 20px); }
@keyframes tffloat { 50% { translate: 0 -16px; } }
.tf-lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(247, 245, 240, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .3s; cursor: zoom-out; }
:root[data-theme="dark"] .tf-lb { background: rgba(21, 23, 26, .9); }
.tf-lb.open { opacity: 1; pointer-events: auto; }
.tf-lb img { max-width: min(1280px, 100%); max-height: 90vh; border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .4); scale: .95; transition: scale .4s var(--ease); }
.tf-lb.tall { place-items: start center; overflow-y: auto; } .tf-lb.tall img { max-height: none; max-width: min(760px, 100%); }
.tf-lb.open img { scale: 1; }
.tf-lb .x { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); font: 400 26px/1 var(--sans); cursor: pointer; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .3); z-index: 2; }
.cs.tf .c3-links button, .cs.tf .fb-go { --gk: #2F86C4; }
:root[data-theme="dark"] .cs.tf :is(.c3-links button, .fb-go) { --gk: #6CB8EE; }
:root[data-theme="dark"] .tf-brw .tbar { background: #2A2D32; border-color: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .tf-brw .tbar span { background: #1E2125; color: #A3A8AF; }
:root[data-theme="dark"] .tf-exv .spot, :root[data-theme="dark"] .tf-by .bhl { box-shadow: 0 0 0 3px var(--ty), 0 0 0 9999px rgba(21, 23, 26, .62); }
:root[data-theme="dark"] .tf-lc { filter: brightness(.95); }

@media (max-width: 980px) {
  .tf-ex, .tf-gm, .tf-by, .tf-evo, .tf-team, .tf-mvf { grid-template-columns: 1fr; }
  .tf-mvs { grid-template-columns: 1fr 1fr; }
  .tf-sea { grid-template-columns: 1fr; }
  .tf-tri { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tf-sec { padding-top: 12vh; }
  .tf-stage { padding: 0 0 110px; } .tf-stage .tf-phone { right: 50%; translate: 50% 0; width: 170px; } .tf-stage .tf-brw .vp { aspect-ratio: 4 / 3.6; }
  .tf-ctr .r { grid-template-columns: 1fr 64px; } .tf-ctr .b { grid-column: 1 / -1; grid-row: 2; }
  .tf-exv .vp { aspect-ratio: 4 / 4.2; }
  .tf-two .cards { grid-template-columns: 1fr; }
  .tf-dual { grid-template-columns: 1fr; justify-items: center; } .tf-dual .tf-why2 { width: 100%; }
  .tf-lc .lrow { grid-template-columns: auto 1fr; } .tf-lc .lrow > img { width: 72px; height: 64px; } .tf-lc .rt { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; } .tf-lc .recs { grid-template-columns: 1fr; } .tf-lc.open .recs { max-height: 420px; } .tf-lc .rc img { width: 60px; height: 60px; } .tf-lc .tx b { font-size: 16px; }
  .tf-by .list button { grid-template-columns: 96px 1fr; } .tf-by .list img { width: 96px; height: 70px; }
  .tf-fold { grid-template-columns: 1fr; justify-items: center; } .tf-phone.fold { width: 240px; } .tf-foldc { text-align: center; } .tf-foldc .tf-sw2 { justify-self: center; }
  .ai2 { grid-template-columns: 1fr; justify-items: center; gap: 0; } .ai2 .cn { width: 2px; height: 36px; margin: 14px 0; background: repeating-linear-gradient(180deg, var(--ink-2) 0 5px, transparent 5px 10px); animation: none; } .ai2 .vis { height: 180px; }
  .nx-tg { grid-template-columns: 1fr; } .nx-track { padding: 24px 6px 20px; } .nx-track b { font-size: 12px; } .nx-track em { font-size: 9px; padding: 3px 6px; } .nx-ms li { font-size: 14px; padding: 8px 13px; }
  .tf-phone.sm { width: 230px; }
  .tf-jrs li + li::before { display: none; }
}

/* compact width: Material-style touch targets, type floor and steppers */
@media (max-width: 640px) {
  .cs.tf .mk-steps button, .cs.tf .tf-sw2 button, .cs.tf .tf-dev button, .cs.tf .tf-stt button { min-height: 48px; padding: 0 16px; }
  .cs.tf .rt-c button, .cs.tf .sh-add { min-height: 48px; padding: 0 22px; }
  .cs.tf .it-dots { gap: 0; } .cs.tf .it-dots button { justify-content: center; width: 48px; height: 48px; padding: 0; }
  .cs.tf .sh-steps, .cs.tf .ab-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .cs.tf .sh-steps li { opacity: 1; }
  .cs.tf .sh-steps button, .cs.tf .ab-steps button { width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.25; text-align: left; opacity: 1; color: var(--ink-2); }
  .cs.tf .sh-steps li.cur button, .tf-ab[data-s="0"] .ab-steps li:nth-child(1) button, .tf-ab[data-s="1"] .ab-steps li:nth-child(2) button, .tf-ab[data-s="2"] .ab-steps li:nth-child(3) button, .tf-ab[data-s="3"] .ab-steps li:nth-child(4) button { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ty); }
  .cs.tf .sh-steps i, .cs.tf .ab-steps i { flex: none; }
  .cs.tf .rt-who { flex-wrap: nowrap; justify-content: flex-start; margin: 0 -16px; padding: 4px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .cs.tf .rt-who::-webkit-scrollbar { display: none; }
  .cs.tf .rt-who button { flex: none; min-height: 52px; scroll-snap-align: start; }
  .cs.tf .fb-c { min-height: 48px; padding: 0 16px; font-size: 14px; }
  .cs.tf .fb textarea, .cs.tf .fb input { font-size: 16px; }
  .cs.tf .nx-track { padding: 20px 20px 8px; text-align: left; }
  .cs.tf .nx-track ol { grid-template-columns: 1fr; }
  .cs.tf .nx-track ol::before, .cs.tf .nx-track ol::after { top: 16px; left: 15px; right: auto; width: 2px; height: auto; }
  .cs.tf .nx-track ol::before { bottom: 40px; background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 11px); }
  .cs.tf .nx-track ol::after { height: 0; bottom: auto; transition: height 1.4s .3s var(--ease); }
  .cs.tf .nx-track.in ol::after { width: 2px; height: calc(75% - 30px); }
  .cs.tf .nx-track li { grid-template-columns: 32px auto auto; justify-content: start; align-items: center; gap: 14px; min-height: 56px; text-align: left; }
  .cs.tf .nx-track b { font-size: 16px; } .cs.tf .nx-track em { margin: 0; font-size: 11px; padding: 4px 8px; }
  .cs.tf .tk-note { padding: 48px 20px 28px 40px; }
  .cs.tf .tk-note::before { left: 24px; }
  .cs.tf .tk-l { gap: 10px; } .cs.tf .tk-l li { align-items: flex-start; font-size: 21px; } .cs.tf .tk-l svg { margin-top: 2px; }
  .cs.tf .tk-sig { font-size: 44px; }
  .cs.tf .tf-pl { font-size: 12px; }
  .cs.tf .nx-c { padding: 22px 20px 16px; }
}


/* role and company wrap onto a second line instead of being cut off with an ellipsis */
.nw-card .nw-work { display: flex !important; align-items: center; gap: 6px; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
.nw-card .nw-work > span { display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; overflow: hidden !important; text-overflow: clip !important; min-width: 0; line-height: 1.25; }
.nw-card .nw-work .co { flex: none; }

/* quieter, less templated: section labels are plain text, headings are not marked up with highlighter swatches, hovers don't wiggle */
.kicker { gap: 0; margin-bottom: 14px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.kicker svg { display: none; }
h2 > .hl[id$="Hl"]::before { display: none; }
.nw-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(19, 35, 58, .55); }

/* cursor: one filled ball, dark blue on light and yellow on dark, that swells into a soft disc over anything clickable. It never reads styles or toggles page-wide classes while you move, so it stays cheap */
html.cc, html.cc * { cursor: none !important; }
html.cc input, html.cc textarea, html.cc select, html.cc [contenteditable="true"] { cursor: text !important; }
.cc-ball { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; width: 0; height: 0; will-change: transform; --c: #13233A; --o: #fff; }
:root[data-theme="dark"] .cc-ball { --c: #FFD86B; --o: #1A1A1A; }
.cc-ball i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--o); transition: scale .3s var(--ease), opacity .25s, box-shadow .25s; }
.cc-ball.link i { scale: 2; opacity: 1; }
.cc-ball.lbl i { scale: 4.5; opacity: .94; box-shadow: none; }
.cc-ball b { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 700 12px/1 var(--sans); color: var(--o); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.cc-ball.lbl b { opacity: 1; }
.cc-ball.down i { scale: .75; }
.cc-ball.link.down i { scale: 1.5; }
.cc-ball.lbl.down i { scale: 3.8; }
.cc-ball.off i, .cc-ball.off b { opacity: 0; }

/* sound: a small mute toggle, bottom left */
.sfx-btn { position: fixed; z-index: 68; left: clamp(14px, 2.4vw, 28px); bottom: 22px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 253, 247, .86); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(19, 35, 58, .45), inset 0 0 0 1px rgba(19, 35, 58, .1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); cursor: pointer; transition: transform .3s var(--ease), background .25s; }
.sfx-btn:hover { transform: translateY(-2px); }
.sfx-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sfx-btn .off { display: none; }
.sfx-btn[aria-pressed="false"] .on { display: none; } .sfx-btn[aria-pressed="false"] .off { display: inline; }
:root[data-theme="dark"] .sfx-btn { background: rgba(42, 42, 42, .85); color: #FFD86B; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* phones: the sound switch sits in the top bar, between the badge and the theme switch */
@media (max-width: 859px) { .sfx-btn { top: calc(env(safe-area-inset-top, 0px) + 14px); bottom: auto; left: auto; right: calc(clamp(14px, 2.4vw, 28px) + 56px); width: 44px; height: 44px; z-index: 70; } .wop-badge { right: calc(clamp(14px, 2.4vw, 28px) + 112px) !important; } }
html:has(.cs.open) .sfx-btn { display: none; }
/* view all notes: the secondary action next to "Write a note" */
.nw-actions { display: flex; align-items: center; justify-content: flex-start; gap: 12px; }
.nw-actions .nw-cta { order: 1; } .nw-actions .nw-view { order: 2; }
@media (min-width: 860px) { .nw-actions { width: 100%; justify-content: flex-end; } .nw-actions .nw-view { order: 1; } .nw-actions .nw-cta { order: 2; } }
/* wide screens: the buttons sit on the right, bottom right, level with the line of copy under the heading */
@media (min-width: 1000px) { .nw-head { position: relative; } .nw-head .sec-head p { max-width: calc(100% - 420px); } .nw-actions { position: absolute; right: 0; bottom: -12px; width: auto; } }
.nw-view { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px 0 16px; border-radius: 999px; background: transparent; color: var(--ink); font: 700 15px/1 var(--sans); box-shadow: inset 0 0 0 1.5px rgba(19, 35, 58, .26); cursor: pointer; transition: background .25s, box-shadow .25s, transform .3s var(--spring); }
.nw-view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.nw-view:hover { background: rgba(19, 35, 58, .06); box-shadow: inset 0 0 0 1.5px rgba(19, 35, 58, .5); transform: translateY(-2px); }
:root[data-theme="dark"] .nw-view { color: #F5F5F5; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .nw-view:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.nw-all { position: fixed; z-index: 95; inset: 0; display: flex; flex-direction: column; background: rgba(15, 25, 40, .5); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.nw-all.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
:root[data-theme="dark"] .nw-all { background: rgba(8, 8, 8, .6); }
.nw-all-h { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 20px) clamp(16px, 4vw, 48px) 14px; color: #fff; }
.nw-all-h h3 { margin: 0; font: 800 clamp(24px, 3vw, 34px)/1 var(--sans); letter-spacing: -.03em; }
.nw-all-h small { display: block; margin-top: 6px; font: 500 14px/1 var(--sans); color: rgba(255, 255, 255, .7); }
.nw-all-x { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font: 400 28px/1 var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.nw-all-x:hover { background: rgba(255, 255, 255, .26); }
.nw-all-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(16px, 4vw, 48px) calc(env(safe-area-inset-bottom, 0px) + 48px); }
.nw-all-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 24px; max-width: 1400px; margin: 0 auto; }
.nw-all .nw-card { width: auto !important; min-width: 0; }
.nw-all-more { height: 1px; }
@media (max-width: 859px) { .nw-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; } .nw-all .nw-card { height: auto !important; min-height: 176px; padding: 18px 12px 12px !important; } .nw-all .nw-card .nw-work > span { -webkit-line-clamp: 3; } .nw-all .nw-card p { -webkit-line-clamp: 4 !important; font-size: 15px !important; } }
@media (max-width: 859px) {
  .nw-head { align-items: stretch; }
  .nw-actions { width: 100%; justify-content: flex-start; }
  .nw-actions .nw-view { height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
  .nw-actions .nw-cta { width: auto !important; height: 44px !important; padding: 0 16px 0 6px !important; gap: 8px; font-size: 14px !important; }
  .nw-actions .nw-pen { width: 32px; height: 32px; }
}