/* Portfolio Home, built from the Claude Design handoff (Portfolio Home.dc.html). */

:root {
  --phone-shadow: drop-shadow(0 14px 20px rgba(30,40,80,.26));
  --paper: #EEEBE4;
  --ink: #12110F;
  --card: #FBFAF7;
  --cream: #F7F5F0;
  --accent: #1B4CD8;
  --muted: #6E695D;
  --muted-on-dark: #A9A396;
  --mono: 'JetBrains Mono', monospace;
  --shadow-tile: 0 1px 2px rgba(0,0,0,.05), 0 22px 44px -30px rgba(0,0,0,.55);
  --shadow-tile-dark: 0 1px 2px rgba(0,0,0,.05), 0 22px 44px -30px rgba(0,0,0,.7);
  --shadow-pill: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -20px rgba(0,0,0,.5);
  --ease-tile: cubic-bezier(.2,.7,.3,1);
  --ease-shot: cubic-bezier(.2,.9,.3,1);
  --ease-deck: cubic-bezier(.24,1.04,.36,1);
  --shadow-sheet: 0 40px 90px -30px rgba(0,0,0,.6);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
/* Keeps the layout from shifting when the sheet locks page scroll. */
html { scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; background: var(--paper); }
body { font-family: 'Outfit', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.page { min-height: 100vh; background: var(--paper); color: var(--ink); padding: 0 0 90px; }
.wrap { max-width: 1480px; margin: 0 auto; padding: 14px 26px 0; }

.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.app-icon { width: 44px; height: 44px; border-radius: 11px; display: block; margin-bottom: 14px; }

/* ---------- Keyframes ---------- */

@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes copiedIn { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 60% { opacity: 1; transform: translateY(0) scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes checkDraw { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes ghWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg) scale(1.08); } 55% { transform: rotate(8deg) scale(1.08); } 80% { transform: rotate(-3deg); } }
@keyframes liHop { 0% { transform: none; } 38% { transform: translateY(-26px) scale(1.16); } 100% { transform: none; } }
@keyframes liSquash { 0% { transform: none; } 34% { transform: scaleY(.72) scaleX(1.12); } 100% { transform: none; } }
@keyframes liLean { 0% { transform: none; } 40% { transform: translateY(-9px) rotate(-3.5deg); } 100% { transform: none; } }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 26px 30px;
  background: linear-gradient(#EEEBE4 0%, #EEEBE4 74%, rgba(238,235,228,0) 100%);
}

.logo { display: flex; align-items: baseline; gap: 2px; font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.logo__dot { color: var(--accent); }

.navpills {
  position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 999px;
  background: rgba(255,255,255,.62); box-shadow: var(--shadow-pill);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.navpills__pill {
  position: absolute; top: 5px; left: 0; height: 0; width: 0; border-radius: 999px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.09), 0 6px 16px -10px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: transform .46s cubic-bezier(.22,1.15,.3,1), width .46s cubic-bezier(.22,1.15,.3,1), opacity .3s;
}
.tab {
  position: relative; z-index: 1; padding: 11px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 500;
  letter-spacing: -.01em; color: var(--muted); transition: color .3s;
}
.tab:hover, .tab.is-active { color: var(--ink); }

.topbar__actions { display: flex; align-items: center; gap: 10px; }

.resume-btn {
  display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font-size: 15px; font-weight: 500;
  box-shadow: var(--shadow-pill); transition: transform .3s;
}
.resume-btn:hover { transform: translateY(-2px); color: var(--cream); }
.resume-btn[hidden] { display: none; }
.resume-btn__arrow { font-family: var(--mono); font-size: 12px; opacity: .7; }


/* ---------- Bento grid ---------- */

/* Row height makes a 1-column, 2-row tile square: row = (column - gap) / 2. */
.bento-wrap { container-type: inline-size; }
.bento {
  --row: 138px;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-flow: dense; gap: 18px;
  /* The first two rows may grow so the bio copy never slides under its chips. */
  grid-template-rows: repeat(2, minmax(var(--row), auto));
  grid-auto-rows: var(--row);
}
@supports (width: 1cqw) {
  .bento { --row: calc((100cqw - 162px) / 10); }
}

.tile {
  border-radius: 30px; box-shadow: var(--shadow-tile);
  animation: pop .45s var(--ease-tile) backwards;
}
.tile.is-filtered { display: none !important; }
.tile--w2 { grid-column: span 2; }
.tile--w4 { grid-column: span 4; }
.tile--w5 { grid-column: span 5; }
.tile--h2 { grid-row: span 2; }
.tile--h3 { grid-row: span 3; }
.tile--lift { transition: transform .35s var(--ease-tile); }
.tile--lift:is(:hover, .is-hot) { transform: translateY(-6px); }

/* ---------- Bio ---------- */

.bio {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 28px; background: var(--card); overflow: hidden;
}
.bio__top { display: flex; gap: 22px; align-items: flex-start; min-height: 0; }
.bio__memoji {
  flex: 0 0 108px; width: 108px; height: 132px; object-fit: contain; object-position: bottom;
  animation: float 6s ease-in-out infinite;
}
.bio__lead {
  font-size: clamp(18px, 1.75vw, 25px); line-height: 1.3; font-weight: 400;
  letter-spacing: -.015em; text-wrap: pretty;
}
.bio__lead strong { font-weight: 600; }
.bio__hey { margin-bottom: 8px; }
.bio__chips { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }

.chip {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.chip--link { background: #EBE7DE; color: #3A362E; transition: transform .3s, background .3s; }
.chip--link:hover { transform: translateY(-2px); background: #E3DED3; color: #3A362E; }
.chip--open { background: #E8F0E9; color: #2C6B3F; }
.chip__mark {
  width: 20px; height: 20px; margin: -3px 0 -3px -3px; border-radius: 5px;
  object-fit: contain; mix-blend-mode: multiply;
}
.chip__ext { width: 17px; height: 17px; margin-left: 2px; flex: 0 0 auto; }
.chip__dot { width: 8px; height: 8px; border-radius: 999px; background: #3E9A5B; }

/* ---------- Icon tiles: mail, LinkedIn, GitHub ---------- */

.icon-tile {
  display: flex; align-items: center; justify-content: center; padding: 30px;
  background: var(--card);
}
.icon-tile, .icon-tile:hover { color: var(--ink); }
.icon-tile .gmail-mark { width: 100%; height: 100%; align-items: center; justify-content: center; --size: 83px; }

.mailtile {
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease-tile), box-shadow .35s;
}
.mailtile:is(:hover, .is-hot) {
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 34px 54px -30px rgba(0,0,0,.6);
}

/* The mark tilts toward the pointer; --rx/--ry are set from script.js. */
.gmail-mark { display: inline-flex; padding: 18px; perspective: 900px; outline: none; }
.gmail-mark svg {
  display: block; width: var(--size, 150px); height: auto; overflow: visible;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1);
  transition: transform .45s cubic-bezier(.2,.8,.25,1);
}
a:is(:hover, .is-hot) .gmail-mark svg, .mailtile:is(:hover, .is-hot) .gmail-mark svg {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.05);
}
.g-env, .g-letter { transform-box: view-box; transition-timing-function: cubic-bezier(.32,0,.5,1); }
.g-env { transform-origin: 128px 223.5px; transition: transform .34s; transition-delay: .06s; }
.g-letter { transform-origin: 128px 127.5px; transform: translateY(122px); transition: transform .30s; }
.mailtile:is(:hover, .is-hot) .gmail-mark .g-env {
  transform: translateY(4px) rotate(-1.4deg);
  transition-duration: .5s; transition-timing-function: cubic-bezier(.2,.9,.25,1); transition-delay: 0s;
}
.mailtile:is(:hover, .is-hot) .gmail-mark .g-letter {
  transform: translateY(-10px) rotate(-3deg);
  transition-duration: .62s; transition-timing-function: cubic-bezier(.14,1.1,.32,1); transition-delay: .08s;
}

.mail-actions {
  position: absolute; top: 18px; right: 18px; display: flex; align-items: center; gap: 9px;
  opacity: 0; transform: translateY(-8px) scale(.9); pointer-events: none;
  transition: opacity .3s, transform .42s cubic-bezier(.2,1.1,.3,1);
}
.mailtile:is(:hover, .is-hot) .mail-actions, .mailtile:focus-within .mail-actions { opacity: 1; transform: none; pointer-events: auto; }
.mail-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), 0 14px 28px -16px rgba(0,0,0,.5);
  transition: transform .3s cubic-bezier(.2,1.2,.3,1), background .3s, color .3s, width .34s cubic-bezier(.2,1.1,.3,1), padding .34s;
}
.mail-btn:hover { transform: translateY(-4px) scale(1.06); color: var(--ink); }
.mail-btn:active { transform: scale(.94); }
.mail-btn__send { width: 17px; height: 17px; }
.mail-btn__copy { width: 16px; height: 16px; }
.mail-btn__copied { display: none; align-items: center; gap: 7px; animation: copiedIn .34s cubic-bezier(.2,1.2,.3,1) both; }
.mail-btn__copied svg { width: 15px; height: 15px; }
.mail-btn__copied path { stroke-dasharray: 32; animation: checkDraw .4s cubic-bezier(.5,0,.3,1) .06s both; }
.mail-btn__copied span { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mail-btn.is-copied { width: auto; padding: 0 15px; background: var(--ink); color: var(--cream); white-space: nowrap; }
.mail-btn.is-copied .mail-btn__copy { display: none; }
.mail-btn.is-copied .mail-btn__copied { display: flex; }

.li-plate, .li-dot, .li-stem, .li-n { transform-box: fill-box; }
.li-plate { transform-origin: 50% 50%; transition: transform .55s cubic-bezier(.2,.9,.25,1); }
.li-dot { transform-origin: 50% 100%; }
.li-stem { transform-origin: 50% 100%; }
.li-n { transform-origin: 0% 100%; }
a:is(:hover, .is-hot) .li-plate { transform: rotate(-4deg); }
a:is(:hover, .is-hot) .li-dot { animation: liHop .62s cubic-bezier(.28,1.35,.4,1) both; }
a:is(:hover, .is-hot) .li-stem { animation: liSquash .58s cubic-bezier(.24,1.2,.36,1) .05s both; }
a:is(:hover, .is-hot) .li-n { animation: liLean .6s cubic-bezier(.2,1.25,.34,1) .1s both; }

.gh-mark { width: 83px; height: 83px; flex: 0 0 auto; }
.github:is(:hover, .is-hot) .gh-mark { animation: ghWiggle .7s cubic-bezier(.3,.9,.3,1) both; }

/* Hover skyline: the mark steps aside to the top-right corner while script.js
   raises the year of contributions on the canvas. --gh-x/--gh-y come from the tile size. */
.github { position: relative; overflow: hidden; }
.gh-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gh-lift { position: relative; display: flex; transition: transform .6s cubic-bezier(.2,1.1,.3,1); }
.github.is-sky .gh-lift { transform: translate(var(--gh-x, 80px), var(--gh-y, -80px)) scale(.62); }
.gh-stat {
  position: absolute; left: 24px; top: 22px; display: flex; flex-direction: column; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .45s cubic-bezier(.2,1.1,.3,1);
}
.github.is-sky .gh-stat { opacity: 1; transform: none; transition-delay: .18s; }
.gh-stat__total { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.gh-stat__label { font-size: 15px; line-height: 1.3; color: var(--muted); margin-top: 5px; }
.github.is-compact .gh-stat { left: 20px; top: 18px; }

/* ---------- Typpo ---------- */

.typpo {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  justify-content: space-between; padding: 26px; background: #F3F3F3;
}
.typpo, .typpo:is(:hover, .is-hot) { color: var(--ink); }
.typpo { cursor: pointer; }
.typpo__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.typpo__eyebrow { color: #5C5240; }
.now-badge {
  display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: #E8F0E9; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #2C6B3F;
}
.now-badge__dot { width: 7px; height: 7px; border-radius: 999px; background: #3E9A5B; }
.typpo__stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 4px 0; }
.typpo__mark {
  width: 44%; max-width: 120px; height: auto; object-fit: contain;
  transition: transform .55s cubic-bezier(.2,1.1,.3,1);
}
.typpo:is(:hover, .is-hot) .typpo__mark { transform: rotate(-8deg) scale(1.12); }
.typpo__title { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.typpo__role { font-size: 15px; color: #5C5240; margin-top: 6px; line-height: 1.3; }

/* ---------- Pressr ---------- */

.pressr {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 34px 34px 0; background: var(--ink); color: var(--cream);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.75);
}
.pressr { cursor: pointer; }
.pressr__head { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; }
.pressr__icon { width: 54px; height: 54px; border-radius: 14px; display: block; }
.pressr__title { font-size: 44px; font-weight: 600; letter-spacing: -.03em; }
.pressr__role { font-size: 18px; color: var(--muted-on-dark); font-weight: 400; }
/* On a phone the strip drops to the middle pair, so nothing is a sliver. */
@media (max-width: 760px) {
  .pro-sheet--pressr .pro-stage { --panel-w: min(calc(.82 * clamp(340px, 52vh, 520px) * 654 / 1422), calc((100cqw - 8px) / 2)); }
}

/* One screen from the app, running off the bottom of the tile. */
.pressr-shot { position: relative; flex: 1; min-height: 110px; margin: 20px -34px -34px; }
.pressr-shot img {
  position: absolute; left: 50%; top: 0; width: auto; height: 210%;
  transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgba(0,0,0,.7));
  transition: transform .55s var(--ease-shot);
}
.pressr:is(:hover, .is-hot) .pressr-shot img { transform: translateX(-50%) translateY(-10px) scale(1.02); }

/* ---------- Vookie ---------- */

.vookie {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; background: #0B0B0B; color: var(--cream); box-shadow: var(--shadow-tile-dark);
}
.vookie__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.2,.8,.3,1), filter .5s;
}
.vookie:is(:hover, .is-hot) .vookie__video { transform: scale(1.05); }
/* The clip's true frame, cover-cropped by the tile. Invisible in the tile itself;
   its ghost copy in the sheet shows the frame the video stopped on. */
.vookie__still {
  position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 888 / 1920;
  transform: translateY(-50%); pointer-events: none; opacity: 0; object-fit: cover;
}
.pro-stage .vookie__still { opacity: 1; }
.vookie__scrim {
  position: absolute; inset: 0; opacity: .9; transition: opacity .5s;
  background: linear-gradient(to top, rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 34%, rgba(8,8,8,0) 62%);
}
.vookie:is(:hover, .is-hot) .vookie__scrim { opacity: .6; }
.vookie__title { position: relative; transition: transform .45s cubic-bezier(.2,1.05,.3,1); }
.vookie:is(:hover, .is-hot) .vookie__title { transform: translateY(-2px); }
.vookie__name { font-size: 28px; font-weight: 600; letter-spacing: -.025em; }
.vookie__role { font-size: 15px; color: #B8B2A5; margin-top: 2px; }

/* ---------- Helpros for PROS ---------- */

.pro-tile {
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; background: #DDE3F5; cursor: pointer;
}
/* Swapped instantly: the sheet's first and last morph frames sit exactly on top of the tile. */
.tile[data-hide="true"] { opacity: 0 !important; pointer-events: none; }
.pro-tile__title { font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.pro-tile__role { font-size: 15px; color: #5A6486; margin-top: 6px; }
/* Full-bleed slot, like the Swivel tile, so the phone can run to the tile's edges. */
.pro-shot { position: relative; flex: 1; min-height: 84px; margin: 18px -26px -26px; }
/* Sized by height, so the same slice of the screen shows at every tile size:
   166% crops just under the $70.00, the screen's punchline. */
.pro-shot img {
  position: absolute; left: 50%; top: 0; width: auto; height: 166%;
  transform: translateX(-50%); filter: var(--phone-shadow);
  transition: transform .55s var(--ease-shot);
}
.pro-tile:is(:hover, .is-hot) .pro-shot img { transform: translateX(-50%) translateY(-10px) scale(1.02); }

/* ---------- Phone ---------- */

.phone {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 26px 28px; background: var(--ink);
}
.phone, .phone:hover { color: var(--cream); }
.phone__number { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.phone__hint { font-family: var(--mono); font-size: 12px; opacity: .6; }

/* ---------- Swivel ---------- */

.swivel {
  overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; background: #DCECEC; cursor: pointer;
}
.swivel__title { font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.swivel__role { font-size: 14.5px; color: #4A6466; margin-top: 4px; }
/* Sized by height, like the other project tiles, so the phone can fly into the sheet. */
.swivel-shot { position: relative; flex: 1; min-height: 90px; margin: 12px -26px -26px; }
.swivel-shot img {
  position: absolute; left: 50%; top: 0; width: auto; height: 230%; transform: translateX(-50%);
  filter: drop-shadow(0 18px 30px rgba(20,60,62,.35));
  transition: transform .55s var(--ease-shot);
}
.swivel:is(:hover, .is-hot) .swivel-shot img { transform: translateX(-50%) translateY(-10px) scale(1.02); }

/* ---------- Swivel Partner ---------- */

.partner {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; background: #0C0D0F; color: var(--cream); box-shadow: var(--shadow-tile-dark); cursor: pointer;
}
.partner__body { position: relative; z-index: 1; }
/* Full-bleed slot, like the pro tile, on a square tile: the title stays on one
   line so the phone gets the room. */
.partner-shot { position: relative; flex: 1; min-height: 90px; margin: 12px -26px -26px; }
.partner-shot img {
  position: absolute; left: 50%; top: 0; width: auto; height: 230%;
  transform: translateX(-50%); filter: drop-shadow(0 18px 30px rgba(0,0,0,.6));
  transition: transform .55s var(--ease-shot);
}
.partner:is(:hover, .is-hot) .partner-shot img { transform: translateX(-50%) translateY(-10px) scale(1.02); }
.partner__icon { width: 40px; height: 40px; margin-bottom: 12px; background: var(--cream); box-shadow: 0 0 0 1px rgba(247,245,240,.28); }
.partner__title { font-size: 24px; font-weight: 600; letter-spacing: -.028em; line-height: 1.05; }
.partner__role { font-size: 14.5px; color: var(--muted-on-dark); margin-top: 5px; }

/* ---------- Helpros ---------- */

/* The customer app. Three phones stand in the tile's right side and run off its
   bottom edge; the middle one is the hero that flies into the sheet. */
.helpros {
  --phone-shadow: drop-shadow(0 14px 20px rgba(70,45,15,.26));
  position: relative; overflow: hidden; display: flex; align-items: center;
  padding: 30px 32px; background: #EFE3D6; cursor: pointer;
}
.helpros__body { position: relative; z-index: 1; width: max-content; max-width: 40%; }
.helpros__icon { width: 46px; height: 46px; border-radius: 11px; display: block; margin-bottom: 14px; }
.helpros__title { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.helpros__role { font-size: 15px; color: #7A6349; margin-top: 6px; }
/* Phones are sized by the tile's height, so the same slice of each screen shows at
   every tile size (112% crops just under the $12 and $15, the screen's punchline),
   and offset in phone widths, so the fan keeps its shape. */
.helpros-fan { position: absolute; top: 0; right: 2.5%; bottom: 0; width: 60%; pointer-events: none; }
.helpros-fan img {
  position: absolute; left: 50%; top: 7%; height: 112%; width: auto;
  transform-origin: 50% 100%; filter: var(--phone-shadow);
  transition: transform .6s var(--ease-shot);
}
.helpros-fan__center { transform: translateX(-50%); }
.helpros-fan__left { transform: translateX(-50%) translateX(-50%) rotate(-7deg) scale(.9); }
.helpros-fan__right { transform: translateX(-50%) translateX(50%) rotate(7deg) scale(.9); }
.helpros:is(:hover, .is-hot) .helpros-fan__center { transform: translateX(-50%) translateY(-8px); }
.helpros:is(:hover, .is-hot) .helpros-fan__left { transform: translateX(-50%) translateX(-56%) rotate(-9deg) scale(.9); }
.helpros:is(:hover, .is-hot) .helpros-fan__right { transform: translateX(-50%) translateX(56%) rotate(9deg) scale(.9); }

/* ---------- Biite ---------- */

/* A web build: the tile borrows the site's editorial type and links straight out. */
.biite {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 26px; background: #FFFFFF; color: #111;
}
.biite, .biite:is(:hover, .is-hot) { color: #111; }
.biite__top { display: flex; align-items: flex-start; justify-content: space-between; }
.biite__mark { font-family: 'Bodoni Moda', 'Didot', Georgia, serif; font-size: 30px; font-weight: 500; letter-spacing: .01em; line-height: 1; }
.biite__mark sup { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; vertical-align: top; margin-left: 4px; position: relative; top: 2px; }
.biite__ext { width: 18px; height: 18px; color: #777; transition: transform .35s var(--ease-shot), color .25s; }
.biite:is(:hover, .is-hot) .biite__ext { transform: translate(2px, -2px); color: #111; }
.biite__tag {
  font-family: 'Bodoni Moda', 'Didot', Georgia, serif; font-optical-sizing: auto; font-weight: 400;
  font-size: clamp(30px, 3.1vw, 40px); line-height: .92; letter-spacing: .01em; text-transform: uppercase;
  transition: transform .5s var(--ease-shot);
}
.biite:is(:hover, .is-hot) .biite__tag { transform: translateY(-3px); }
.biite__title { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.biite__role { font-size: 14.5px; color: #6B6B6B; margin-top: 3px; }
[data-theme="dark"] .biite { background: var(--card); }
[data-theme="dark"] .biite, [data-theme="dark"] .biite:is(:hover, .is-hot) { color: #F5F5F7; }
[data-theme="dark"] .biite__ext { color: #8E8E93; }
[data-theme="dark"] .biite:is(:hover, .is-hot) .biite__ext { color: #F5F5F7; }
[data-theme="dark"] .biite__role { color: #8E8E93; }

/* ---------- CTA + stats ---------- */

.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 30px 34px; background: var(--accent); color: #F4F6FF;
}
.cta__text { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; text-wrap: pretty; }
.cta__btn {
  flex: 0 0 auto; padding: 13px 24px; border-radius: 999px; background: var(--cream);
  color: var(--ink); font-size: 16px; font-weight: 600; transition: transform .3s;
}
.cta__btn:hover { transform: scale(1.05); color: var(--ink); }

.stat { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 28px; }
.stat--dark { background: var(--ink); color: var(--cream); }
.stat--light { background: var(--card); }
.stat__figure { font-size: 46px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stat__label { font-size: 15px; color: var(--muted-on-dark); }
.stat__emoji { font-size: 34px; }
.stat__place { font-size: 17px; font-weight: 500; margin-top: 8px; }

/* ---------- Lab ---------- */

/* A wide, short strip: glove, the one-line pitch, and what it was built with. */
.lab {
  display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  background: var(--card);
}
.lab__glove { font-size: 38px; line-height: 1; flex: 0 0 auto; transition: transform .5s var(--ease-shot); }
.lab:is(:hover, .is-hot) .lab__glove { transform: rotate(-14deg) translateX(-3px) scale(1.08); }
.lab__text { flex: 1; min-width: 0; }
.lab__eyebrow { color: var(--muted); }
.lab__title { font-size: 21px; font-weight: 600; letter-spacing: -.02em; margin-top: 4px; }
.lab__line { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 3px; text-wrap: pretty; }
.lab__chips { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.lab__chips span { padding: 6px 11px; border-radius: 999px; background: #EBE7DE; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
[data-theme="dark"] .lab__chips span { background: #2C2C2E; color: #D1D1D6; }
@media (max-width: 680px) {
  .lab { flex-wrap: wrap; }
  .lab__chips { flex-direction: row; width: 100%; }
}

/* ---------- Lab sheet ---------- */

/* Opens out of the tile's neutral card; the stage is dark so the placeholder reads. */
.pro-sheet--lab .pro-sheet__head, .pro-sheet--lab .case-end { background: var(--card); }
.pro-sheet--lab .pro-stage { background: #141312; height: clamp(300px, 44vh, 440px); }
.pro-sheet--lab .pro-hero.lab-stage {
  position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; padding: 28px; transform: none; filter: none; border-radius: 0; transition: none;
}
.pro-sheet--lab .pro-stage:hover .pro-hero, .pro-sheet--lab .pro-stage.is-done:hover .pro-hero { transform: none; }
.pro-sheet__glove, .pro-bar__glove { font-size: 34px; line-height: 1; flex: 0 0 auto; }
.pro-bar__glove { font-size: 24px; margin-right: 10px; }
/* The live clip in a phone, with two of the model's calls floating beside it. */
.lab-stage .lab-phone { flex: 0 0 auto; height: 100%; width: auto; aspect-ratio: 560 / 980; }
.lab-tag {
  position: absolute; top: 50%; padding: 11px 15px 10px; border-radius: 16px;
  background: rgba(247,245,240,.07); box-shadow: inset 0 0 0 1px rgba(247,245,240,.14);
  color: #B8B2A5; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  animation: labFloat 5.2s ease-in-out infinite;
}
.lab-tag b { display: block; margin-bottom: 4px; color: #F7F5F0; font: 600 17px/1.1 'Outfit', sans-serif; letter-spacing: -.01em; text-transform: none; }
.lab-tag--l { right: calc(50% + 128px); transform: translateY(-75%); }
.lab-tag--r { left: calc(50% + 128px); transform: translateY(5%); animation-delay: -2.6s; }
@keyframes labFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@media (max-width: 760px) { .lab-tag { display: none; } }

/* Results: the Create ML replay beside a card on what the model sees. */
.lab-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 36px; align-items: start; }
.lab-clip { margin: 0; border-radius: 22px; overflow: hidden; background: #141312; box-shadow: var(--shadow-tile); }
.lab-clip video { display: block; width: 100%; height: auto; }
.lab-clip figcaption { padding: 13px 18px 15px; font-size: 13.5px; line-height: 1.45; color: #B8B2A5; }
.lab-reads { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-tile); }
.lab-reads h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.lab-reads p { margin: 0; font-size: 15px; line-height: 1.5; color: #5C5240; }
.lab-reads .pro-body__stack { margin-top: 4px; }
.lab-reads .lab-none { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(18,17,15,.2); }
.lab-reads__note { font-size: 13px; color: #8F897C; }
@media (max-width: 760px) { .lab-evidence { grid-template-columns: minmax(0, 1fr); } }
[data-theme="dark"] .pro-sheet--lab .pro-stage { background: #0E0E10; }
[data-theme="dark"] .lab-reads p { color: #B8B2A5; }
[data-theme="dark"] .lab-reads .lab-none { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }

/* ---------- Relay ---------- */

/* A video tile in the app's own deep green-black, with a mint "coming soon". */
.relay {
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column;
  justify-content: space-between; padding: 22px 24px; background: #071412; color: #F5F5F7;
  box-shadow: var(--shadow-tile-dark); cursor: pointer;
}
.relay, .relay:is(:hover, .is-hot) { color: #F5F5F7; }
.relay__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.relay:is(:hover, .is-hot) .relay__video { transform: scale(1.05); }
.relay__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,20,18,.94) 0%, rgba(7,20,18,.55) 40%, rgba(7,20,18,.15) 100%); }
.relay__top { position: relative; display: flex; }
.relay__soon {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px;
  background: rgba(106,233,197,.14); color: #6AE9C5; font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
}
.relay__dot { width: 7px; height: 7px; border-radius: 999px; background: #6AE9C5; animation: relayPulse 2.4s ease-in-out infinite; }
@keyframes relayPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.relay__title { position: relative; }
.relay__name { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.relay__role { font-size: 15px; color: #9FB3AE; margin-top: 2px; }

/* ---------- Relay sheet ---------- */

.pro-sheet--relay .pro-sheet__head, .pro-sheet--relay .pro-stage { background: #071412; color: #F5F5F7; }
.pro-sheet--relay .pro-sheet__sub { color: #9FB3AE; }
.pro-sheet--relay .pro-ghost { color: #F5F5F7; }
.pro-sheet--relay .pro-sheet__close { background: rgba(255,255,255,.14); color: #F5F5F7; }
.pro-sheet--relay .pro-sheet__close:hover { background: rgba(255,255,255,.24); }
/* A mint mark stands in for an icon the app doesn't have yet. */
.pro-sheet__relay, .pro-bar__relay {
  display: block; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, #6AE9C5, #2B7FFF);
}
.pro-bar__relay { width: 32px; height: 32px; border-radius: 9px; margin-right: 11px; }
.pro-sheet--relay .pro-stage { height: clamp(360px, 54vh, 540px); }
.pro-sheet--relay .pro-hero.relay-reel {
  position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 22px 30px;
  transform: none; filter: none; border-radius: 0; transition: none;
}
.pro-sheet--relay .pro-stage:hover .pro-hero, .pro-sheet--relay .pro-stage.is-done:hover .pro-hero { transform: none; }
.relay-reel figure { position: relative; margin: 0; min-height: 0; border-radius: 16px; overflow: hidden; background: #000; }
.relay-reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
.relay-reel figcaption {
  position: absolute; left: 12px; bottom: 10px; padding: 4px 9px; border-radius: 999px;
  background: rgba(7,20,18,.72); color: #F5F5F7; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
}
.relay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.relay-card { padding: 20px; border-radius: 20px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5); }
.relay-card h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.relay-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.relay-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.relay-tools span { padding: 8px 14px; border-radius: 999px; background: #EBE7DE; font-size: 14px; font-weight: 500; }
.pro-sheet--relay .case-end { background: #E4F3EE; }
.pro-sheet--relay .case-end p { color: #3F5A52; }
[data-theme="dark"] .relay-tools span { background: #2C2C2E; color: #D1D1D6; }
[data-theme="dark"] .pro-sheet--relay .case-end { background: #10201C; }
[data-theme="dark"] .pro-sheet--relay .pro-sheet__head, [data-theme="dark"] .pro-sheet--relay .pro-stage { background: #071412; }
[data-theme="dark"] .pro-sheet--relay .case-end p { color: #9FB3AE; }
@media (max-width: 1000px) { .relay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pro-sheet--relay .pro-hero.relay-reel { gap: 8px; padding: 14px 16px; }
  .relay-reel figure { border-radius: 12px; }
  .relay-reel figcaption { left: 8px; bottom: 7px; font-size: 9px; }
}

/* Relay's onboarding, redrawn: three dark slides in the app's palette. */
.onb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.onb-slide { padding: 22px 22px 26px; border-radius: 26px; background: #071412; color: #F5F5F7; }
.onb-art { position: relative; height: 210px; margin: 0 0 22px; border-radius: 18px; background: #0F1F1B; overflow: hidden; }
.onb-slide__n { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #6AE9C5; }
.onb-slide h3 { margin: 8px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
.onb-slide p:last-child { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #9FB3AE; }
/* 1. Tools fan: five chips laid in an arc, the middle one in front. */
.onb-art--fan { --chip-bg: #152A25; }
.onb-chip {
  position: absolute; padding: 9px 13px; border-radius: 12px; white-space: nowrap;
  background: var(--chip-bg); color: #F5F5F7; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.9);
}
.onb-chip:nth-child(1) { left: 3%; top: 54%; transform: rotate(-14deg); z-index: 1; opacity: .75; }
.onb-chip:nth-child(2) { left: 9%; top: 28%; transform: rotate(-7deg); z-index: 2; opacity: .9; }
.onb-chip:nth-child(3) { left: 50%; top: 14%; transform: translateX(-50%); z-index: 3; background: #1C3A33; box-shadow: 0 0 0 1.5px rgba(106,233,197,.45), 0 12px 28px -12px rgba(0,0,0,.9); }
.onb-chip:nth-child(4) { right: 9%; top: 28%; transform: rotate(7deg); z-index: 2; opacity: .9; }
.onb-chip:nth-child(5) { right: 3%; top: 54%; transform: rotate(14deg); z-index: 1; opacity: .75; }
.onb-art--fan::after {
  content: 'Drop a photo, video, or audio clip.'; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #6AE9C5;
}
/* 2. Chain */
.onb-art--chain { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 0; }
.onb-step {
  position: relative; padding: 8px 12px 8px 30px; border-radius: 10px; background: #152A25; font-size: 13px; font-weight: 500; color: #9FB3AE;
}
.onb-step::before { content: ''; position: absolute; left: 11px; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #6AE9C5; transform: translateY(-50%); opacity: .5; }
.onb-step::after { content: ''; position: absolute; left: 15px; top: 100%; width: 1.5px; height: 10px; background: rgba(106,233,197,.35); }
.onb-step:last-of-type::after { display: none; }
.onb-step.is-active { color: #F5F5F7; background: #1C3A33; }
.onb-step.is-active::before { opacity: 1; animation: onbPulse 1.6s ease-in-out infinite; }
@keyframes onbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(106,233,197,.5); } 50% { box-shadow: 0 0 0 6px rgba(106,233,197,0); } }
.onb-saved { margin-top: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(106,233,197,.14); color: #6AE9C5; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
/* 3. Replay card */
.onb-art--replay { display: grid; place-items: center; }
.onb-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; width: 78%;
  padding: 16px 16px 16px 18px; border-radius: 16px; background: #152A25; box-shadow: 0 14px 30px -16px rgba(0,0,0,.8);
}
.onb-card b { font-size: 15px; font-weight: 600; }
.onb-card small { grid-column: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9FB3AE; margin-top: 3px; }
.onb-run { grid-column: 2; grid-row: 1 / 3; padding: 9px 14px; border-radius: 999px; background: linear-gradient(135deg, #6AE9C5, #2B7FFF); color: #071412; font-style: normal; font-size: 13px; font-weight: 600; }
.onb-ripple { position: absolute; right: 22%; top: 50%; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #6AE9C5; transform: translate(50%, -50%); opacity: 0; animation: onbRipple 2.6s ease-out infinite; }
@keyframes onbRipple { 0% { transform: translate(50%, -50%) scale(.4); opacity: .9; } 70% { opacity: 0; } 100% { transform: translate(50%, -50%) scale(3.2); opacity: 0; } }
@media (max-width: 1000px) { .onb { grid-template-columns: minmax(0, 1fr); } .onb-art { height: 190px; } }
@media (prefers-reduced-motion: reduce) { .onb-step.is-active::before, .onb-ripple { animation: none; } .onb-ripple { display: none; } }

/* ---------- Theme switch ---------- */

/* An iOS settings row: label on the left, switch on the right, and the whole
   tile is the control. The switch is a little sky that never sits still: clouds
   drift past a glowing sun by day; by night the knob rolls over into a crescent
   moon, the stars twinkle, and every so often one shoots across. */
.theme-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 20px 20px 20px 24px; border: 0; background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease-tile);
}
.theme-tile:hover { transform: translateY(-6px); }
.theme-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-tile__text {
  align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; min-width: 0;
}
.theme-tile__eyebrow { color: var(--muted); }
.theme-tile__mode {
  position: relative; display: block; height: 1.3em; overflow: hidden;
  font-size: 19px; font-weight: 500; letter-spacing: -.01em;
}
.theme-tile__word { position: absolute; left: 0; bottom: 0; transition: transform .8s cubic-bezier(.6,0,.2,1), opacity .5s ease; }
.theme-tile__word--dark { transform: translateY(110%); opacity: 0; }
[data-theme="dark"] .theme-tile__word--light { transform: translateY(-110%); opacity: 0; }
[data-theme="dark"] .theme-tile__word--dark { transform: none; opacity: 1; }

/* Height follows the desktop row (see .bento) so the switch always fits its tile. */
.theme-switch {
  --h: 56px;
  /* One easing for the whole change, so the knob, sky and stars move together. */
  --ts-ease: cubic-bezier(.6,0,.2,1);
  --ts-dur: .8s;
  position: relative; flex: 0 0 auto; width: calc(var(--h) * 2); height: var(--h);
  border-radius: 999px; overflow: hidden; isolation: isolate;
}
@supports (width: 1cqw) {
  .theme-switch { --h: min(56px, calc((100cqw - 162px) / 10 - 40px)); }
}
/* The rim sits above the art so the sky looks set into the tile. */
.theme-switch::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 2px 5px rgba(8,24,70,.3), inset 0 0 0 1px rgba(8,24,70,.08);
  transition: box-shadow var(--ts-dur) ease;
}
.ts-art { display: block; width: 100%; height: 100%; }
[data-theme="dark"] .theme-switch::after { box-shadow: inset 0 2px 5px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.08); }

/* Day and night are two live scenes, night on top seen through a circle (.ts-dusk).
   script.js grows and shrinks that circle with the page's reveal, so the switch
   turns over exactly when the new colour reaches it; at rest it's shut or wide open. */
.ts-dusk { r: 0; }
[data-theme="dark"] .ts-dusk { r: 160px; }

/* The two knobs travel as one: the sun by day, the moon by night, turning as it rolls. */
.ts-knob { transform-origin: 28px 28px; transition: transform var(--ts-dur) var(--ts-ease); }
.theme-tile:hover .ts-knob { transform: translateX(3px); }
[data-theme="dark"] .ts-knob { transform: translateX(56px); }
[data-theme="dark"] .theme-tile:hover .ts-knob { transform: translateX(53px); }
.ts-moon { transform: rotate(-120deg); transform-origin: 28px 28px; transition: transform var(--ts-dur) var(--ts-ease); }
[data-theme="dark"] .ts-moon { transform: none; }

/* Never still. By day two lanes of cloud scroll past at different speeds, the sun
   turns its rays and pulses, its glow ripples outward, and a bird flaps across. */
.ts-bob { animation: bob 3.2s ease-in-out infinite alternate; }
.ts-lane--back { opacity: .75; animation: lane 17s linear infinite; }
.ts-lane--front { animation: lane 10s linear infinite; }
.ts-rays { transform-origin: 28px 28px; animation: spin 14s linear infinite; }
.ts-rays__pulse { transform-origin: 28px 28px; animation: rays 1.6s ease-in-out infinite alternate; }
.ts-halo circle { transform-box: fill-box; transform-origin: center; animation: glow 3.2s ease-in-out infinite; }
.ts-halo circle:nth-child(2) { animation-delay: .4s; }
.ts-halo circle:nth-child(1) { animation-delay: .8s; }
.ts-bird { transform: translate(-20px, 9px); animation: bird 12s linear 1.5s infinite; }
.ts-bird__wings { transform-box: fill-box; transform-origin: center; animation: flap .28s ease-in-out infinite alternate; }

/* By night the sky drifts, every star twinkles on its own beat, two shooting stars
   run on different clocks, and the moon rocks and bobs in its glow. */
.ts-sky { animation: lane 34s linear infinite; }
.ts-sky circle {
  transform-box: fill-box; transform-origin: center;
  animation: twinkle calc(1.3s + var(--i) * .19s) ease-in-out calc(var(--i) * -.53s) infinite;
}
.ts-star--blue { fill: var(--accent); }
.ts-meteor { opacity: 0; }
.ts-meteor--a { animation: meteorA 4.6s linear .6s infinite; }
.ts-meteor--b { animation: meteorB 6.8s linear 3.2s infinite; }
.ts-moon__wobble { transform-origin: 28px 28px; animation: wobble 5.5s ease-in-out infinite alternate; }

@keyframes bob { from { transform: translateY(-1.3px); } to { transform: translateY(1.3px); } }
@keyframes lane { from { transform: translateX(0); } to { transform: translateX(-112px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rays { from { transform: scale(.86); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
@keyframes glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .55; } }
@keyframes bird {
  0% { transform: translate(118px, 11px); }
  45% { transform: translate(52px, 5px); }
  70%, 100% { transform: translate(-14px, 9px); }
}
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.45); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .15; transform: scale(.55); } }
@keyframes meteorA {
  0%, 76% { opacity: 0; transform: translate(6px, 4px); }
  80% { opacity: 1; }
  94%, 100% { opacity: 0; transform: translate(38px, 15.6px); }
}
@keyframes meteorB {
  0%, 80% { opacity: 0; transform: translate(24px, 2px); }
  84% { opacity: 1; }
  96%, 100% { opacity: 0; transform: translate(50px, 11.5px); }
}
@keyframes wobble { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ---------- Footer ---------- */

.footer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* Apple writes "iOS", never "IOS", even in all-caps labels. The pull-in closes
   the extra gap a monospace period leaves before the narrow "i" of "Sr. iOS". */
.ios { text-transform: none; margin-left: -.3em; }

/* ---------- Helpros for PROS sheet ---------- */

/* The open/close morph is driven from script.js: the sheet starts clipped to the
   tile's bounds and grows out of it, so there is no separate "modal appears" step. */
.pro-backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgba(18,17,15,.42);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pro-backdrop[hidden], .pro-sheet[hidden] { display: none; }

.pro-sheet {
  position: fixed; z-index: 101; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border-radius: 34px;
  background: var(--cream); color: var(--ink);
  box-shadow: var(--shadow-sheet), 0 0 0 1px rgba(255,255,255,.5) inset;
}
.pro-sheet::-webkit-scrollbar { display: none; }
.pro-sheet:focus { outline: none; }
.pro-sheet.is-morphing { overflow: hidden; will-change: transform, clip-path; }

/* Stands in for the sheet's shadow, which clip-path cuts off during the morph. */
.pro-shadow {
  position: fixed; z-index: 100; pointer-events: none; border-radius: 34px;
  transform-origin: 0 0; box-shadow: var(--shadow-sheet);
}
/* Copies of the tile's title block (and extra phones), cross-faded with the sheet
   header. The icon and the phone are the real ones, flying, so the copies hide theirs. */
.pro-ghost { position: absolute; left: 26px; top: 26px; z-index: 6; pointer-events: none; }
.pro-ghost [data-sheet-icon], .pro-ghost [data-sheet-shot] { visibility: hidden; }

/* The negative bottom margin zeroes the float's height so it overlays the header. */
.pro-sheet__close {
  position: sticky; top: 13px; float: right; margin: 22px 22px -60px 0; z-index: 5;
  width: 38px; height: 38px; border: 0; border-radius: 999px;
  background: rgba(18,17,15,.08); color: var(--ink); font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pro-sheet__close:hover { background: rgba(18,17,15,.16); }
.pro-sheet__close svg { width: 16px; height: 16px; }

/* The right padding keeps the title block clear of the floating close button. */
.pro-sheet__head {
  display: flex; align-items: center; gap: 14px; padding: 26px 76px 18px 34px;
  background: #DDE3F5; border-radius: 34px 34px 0 0;
}
/* A rubber-band scroll past the top shows what's above the header: this keeps it
   the header's own colour rather than the sheet's. It sits off-canvas otherwise. */
.pro-sheet__head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh;
  background: inherit; pointer-events: none;
}
.pro-sheet__head img { width: 46px; height: 46px; border-radius: 12px; transform-origin: 0 0; }
/* The icon can start its flight below the header, over the stage: lift it above. */
.pro-sheet.is-morphing .pro-sheet__head img { position: relative; z-index: 7; }
.pro-sheet__title { font-size: 22px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.pro-sheet__sub { font-size: 14px; color: #5A6486; margin-top: 3px; }
.pro-sheet__sub i { font-style: normal; }
.pro-sheet__sub span { white-space: nowrap; }

/* Isolated so the phones' z-indexes stay inside the stage: the sticky title bar and
   the case study cue always sit above them as the sheet scrolls. */
.pro-stage {
  position: relative; container-type: inline-size; isolation: isolate;
  height: clamp(340px, 52vh, 520px); overflow: hidden; background: #DDE3F5;
}
/* A tile's phone can sit higher than the stage's top edge, so mid-morph the hero
   (and any ghost phones) may show over the header. The other three sides still clip. */
.pro-sheet.is-morphing .pro-stage { overflow: visible; clip-path: inset(-100vh 0 0); }

/* All five phones hang from one baseline below the stage and share a height, so
   the deck reads as a single row of devices standing on the same ground. */
.pro-screen, .pro-hero {
  position: absolute; left: 50%; bottom: -15%; height: 102%; width: auto;
}

/* Each screen pivots at its own foot and rests stacked behind the hero, so
   opening deals the deck out and closing gathers it back in. Offsets are in
   cqw (a share of the stage's width) so the fan keeps its proportions. */
.pro-screen {
  --x: 0cqw; --r: 0deg; --s: .88;
  z-index: var(--z); opacity: 0;
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateX(var(--x)) rotate(var(--r)) scale(var(--s));
  filter: var(--phone-shadow);
  transition: transform .75s var(--ease-deck) var(--d), opacity .4s ease var(--d);
}
.pro-screen--left, .pro-screen--right { --z: 4; --d: 0s; }
.pro-screen--far-left, .pro-screen--far-right { --z: 3; --d: .08s; }

.pro-stage.live .pro-screen { opacity: 1; }
.pro-stage.live .pro-screen--far-left { --x: -28cqw; --r: -9deg; --s: .92; }
.pro-stage.live .pro-screen--left { --x: -15cqw; --r: -4.5deg; --s: .96; }
.pro-stage.live .pro-screen--right { --x: 15cqw; --r: 4.5deg; --s: .96; }
.pro-stage.live .pro-screen--far-right { --x: 28cqw; --r: 9deg; --s: .92; }

/* Gathering in outruns the sheet, so the deck is tucked away behind the hero
   before the sheet has finished shrinking back into the tile. */
.pro-stage.is-closing .pro-screen { transition: transform .34s ease-in 0s, opacity .24s linear 0s; }

/* Promoted only while moving: scaling a drop-shadow re-rasterizes every frame. */
.pro-stage:not(.is-done) .pro-screen { will-change: transform, opacity; }

/* The hero is the tile's phone; script.js flies it between the two (origin 0 0). */
.pro-hero {
  z-index: 5; transform: translateX(-50%); transform-origin: 0 0;
  filter: drop-shadow(0 20px 30px rgba(30,40,80,.34));
  transition: transform .6s var(--ease-shot);
}
.pro-sheet.is-morphing .pro-hero { will-change: transform; }
.pro-stage.is-done:hover .pro-hero { transform: translateX(-50%) translateY(-10px); }

/* Without container units, fall back to offsets measured in phone widths. */
@supports not (width: 1cqw) {
  .pro-stage.live .pro-screen--far-left { --x: -125%; }
  .pro-stage.live .pro-screen--left { --x: -67%; }
  .pro-stage.live .pro-screen--right { --x: 67%; }
  .pro-stage.live .pro-screen--far-right { --x: 125%; }
}

.pro-body {
  padding: 44px 44px 52px; display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px 56px;
}
.pro-body__eyebrow { color: var(--muted); margin-bottom: 8px; }
.pro-body__eyebrow--lg { margin-bottom: 12px; }
.pro-body__overview {
  font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.3; text-wrap: pretty;
}
.pro-body__side { display: flex; flex-direction: column; gap: 22px; }
.pro-body__role { font-size: 16px; line-height: 1.45; }
.pro-body__stack { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-body__stack span { padding: 7px 13px; border-radius: 999px; background: #EBE7DE; font-size: 13px; font-weight: 500; }
.pro-body__store {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--cream);
  font-size: 15px; font-weight: 600; transition: transform .3s;
}
.pro-body__store:hover { transform: translateY(-2px); color: var(--cream); }
.pro-body__store svg { width: 15px; height: 15px; }
.pro-body__cards {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px; margin-top: 8px;
}
.pro-card {
  padding: 24px; border-radius: 24px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5);
}
.pro-card__title { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.pro-card__text { font-size: 15px; color: var(--muted); line-height: 1.45; margin-top: 6px; }

/* ---------- PROS case study ---------- */

.pro-body { --pad: 44px; --line: rgba(18,17,15,.1); }

/* Compact title bar: takes over once the big header scrolls away, the way an
   iOS large title collapses into the nav bar. Tapping it scrolls to the top. */
.pro-bar {
  position: sticky; top: 0; z-index: 4; height: 64px; margin-bottom: -64px;
  display: flex; align-items: center; padding: 0 76px 0 14px;
  background: rgba(247,245,240,.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(18,17,15,.07);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .35s var(--ease-shot), visibility 0s .35s;
}
.pro-sheet.is-scrolled .pro-bar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pro-bar__top {
  display: flex; align-items: center; gap: 11px; min-width: 0; padding: 6px 12px 6px 6px;
  border: 0; border-radius: 14px; background: transparent; color: var(--ink);
  font-family: 'Outfit', sans-serif; text-align: left; cursor: pointer; transition: background .2s;
}
.pro-bar__top:hover { background: rgba(18,17,15,.05); }
.pro-bar__top img { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; }
.pro-bar__text { display: flex; flex-direction: column; min-width: 0; }
.pro-bar__title { font-size: 15px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }
/* Section, then the dates, on one small line under the app's name. */
.pro-bar__meta {
  display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.pro-bar__section { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro-bar__dates { flex: 0 0 auto; white-space: nowrap; }
.pro-bar__dates::before { content: '·'; margin-right: 7px; }
.pro-bar__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: 0 50%;
}

/* A nudge at the foot of the sheet until the first scroll: the case study is
   below the fold, and it's the part worth finding. */
.pro-cue {
  position: sticky; bottom: 0; z-index: 4; height: 76px; margin-top: -76px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 20px;
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .3s ease, transform .5s var(--ease-shot);
}
.pro-sheet.is-cued .pro-cue { opacity: 1; transform: none; }
.pro-cue a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px 10px 18px; border-radius: 999px;
  background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 500;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}
.pro-sheet.is-cued .pro-cue a { pointer-events: auto; }
.pro-cue a:hover { color: var(--cream); }
.pro-cue svg { width: 14px; height: 14px; animation: cueNudge 1.6s ease-in-out infinite; }
@keyframes cueNudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

/* Section scaffolding */
.case-sec { grid-column: 1 / -1; margin-top: 72px; scroll-margin-top: 80px; }
.case-intro { margin-top: 40px; padding-top: 64px; border-top: 1px solid var(--line); }
.case-kicker {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.case-kicker b { font-weight: 500; color: var(--ink); }
.case-title {
  margin: 14px 0 0; max-width: 20ch;
  font-size: clamp(30px, 3.3vw, 42px); font-weight: 600; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance;
}
.case-lead { margin: 16px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.55; color: #5E594E; text-wrap: pretty; }

.case-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.case-toc a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: #EBE7DE; color: #3A362E; font-size: 13.5px; font-weight: 500;
  transition: background .25s, transform .35s var(--ease-shot);
}
.case-toc a:hover { background: #E3DED3; color: #3A362E; transform: translateY(-2px); }
.case-toc a span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

.case-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 36px 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.case-fact { padding: 22px 20px 22px 0; }
.case-fact + .case-fact { padding-left: 20px; border-left: 1px solid var(--line); }
.case-fact dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.case-fact dd { margin: 8px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.case-fact small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); }

/* 01 · The brief */
.case-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.principle {
  padding: 26px; border-radius: 24px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5);
}
.principle__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #DDE3F5; color: #2F3D6B; }
.principle__icon svg { width: 22px; height: 22px; }
.principle h3 { margin: 18px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.principle p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* 02 · Walkthrough: a sticky phone that follows the steps as they scroll by. */
.walk {
  grid-column: 1 / -1; margin: 72px calc(var(--pad) * -1) 0; padding: 80px var(--pad) 24px;
  background: #DDE3F5; scroll-margin-top: 64px;
}
.walk .case-kicker, .walk-step__n { color: #56618A; }
.walk .case-lead { color: #4A5577; }
.walk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; margin-top: 48px; }
.walk__stage {
  position: sticky; top: 88px; align-self: start;
  height: min(600px, calc(100vh - 170px)); height: min(600px, calc(100dvh - 170px));
}
.walk-phone {
  position: absolute; left: 50%; top: 0; height: 100%; margin: 0; pointer-events: none;
  opacity: 0; transform: translateX(-50%) translateY(20px) scale(.97);
  transition: opacity .4s ease, transform .65s var(--ease-shot);
}
.walk-phone.is-active { z-index: 1; pointer-events: auto; opacity: 1; transform: translateX(-50%); }
.walk-phone img, .walk-step__phone img { display: block; height: 100%; width: auto; filter: var(--phone-shadow); }

/* Outlines drawn over the screen, one per numbered detail (built from data-spot). */
.walk-spot {
  position: absolute; border-radius: 999px; border: 2px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 10px 24px -10px rgba(27,76,216,.6);
  opacity: 0; transform: translate(-50%, -50%) scale(.88);
  transition: opacity .35s ease, transform .55s cubic-bezier(.3,1.35,.5,1), box-shadow .3s, background-color .3s;
  transition-delay: calc(var(--i, 0) * 80ms + 200ms);
}
.walk-spot::before {
  content: attr(data-n); position: absolute; left: -14px; top: -14px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: 0 0 0 2px #fff;
  font: 500 10px/1 var(--mono);
}
.walk-phone.is-active .walk-spot, .walk-step__phone .walk-spot { opacity: 1; transform: translate(-50%, -50%); }
.walk-spot.is-hot {
  background-color: rgba(27,76,216,.12); transition-delay: 0s;
  box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(27,76,216,.2), 0 10px 24px -10px rgba(27,76,216,.6);
}

.walk__steps { min-width: 0; }
.walk-step { min-height: max(62vh, 460px); padding-bottom: 40px; opacity: .38; transition: opacity .45s ease; }
.walk-step.is-active { opacity: 1; }
.walk-step__phone { display: none; }
.walk-step__n { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.walk-step h3 { margin: 12px 0 0; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; }
.walk-step h3 + p { margin: 12px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: #3E4866; }
.walk-step ol { counter-reset: spot; display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.walk-step li {
  counter-increment: spot; position: relative; padding: 13px 16px 13px 48px; border-radius: 16px;
  background: rgba(255,255,255,.5); font-size: 15px; line-height: 1.45; color: #2B3350;
  transition: background .25s, transform .35s var(--ease-shot);
}
.walk-step li::before {
  content: counter(spot); position: absolute; left: 14px; top: 12px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font: 500 10.5px/1 var(--mono);
}
.walk-step li.is-hot { background: #fff; transform: translateX(4px); }

/* 03 · Under the hood */
.case-diagram {
  margin: 36px 0 0; padding: 28px 28px 20px; border-radius: 28px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5);
}
.case-diagram__scroll { overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.state-map { display: block; width: 100%; min-width: 700px; height: auto; }
.state-map__edge { fill: none; stroke: #9A9486; stroke-width: 1.6; stroke-linecap: round; }
.state-map__labels text { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; fill: #6E695D; }
.state-map__node rect { fill: #fff; stroke: rgba(18,17,15,.14); }
.state-map__node > text { font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.state-map__node--idle rect { fill: #EFECE5; stroke: none; }
.state-map__node--hot rect { fill: #FFD43B; stroke: none; }
.state-map__badge circle { fill: var(--ink); }
.state-map__badge text { font-family: var(--mono); font-size: 9px; font-weight: 500; fill: var(--cream); }
.state-map__token { fill: var(--accent); }
.case-diagram figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 14px; color: var(--muted); }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 4px; vertical-align: -1px; }
.swatch--hot { background: #FFD43B; }
.swatch--token { border-radius: 50%; background: var(--accent); }

.case-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.case-note { padding: 22px 24px; border-radius: 22px; background: #EFECE5; }
.case-note h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.case-note p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.5; color: #5E594E; }

/* 04 · Ten seconds: a live replay of one offer beside its timeline. */
.offer { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; margin-top: 40px; align-items: start; }
.offer-demo {
  padding: 28px 28px 24px; border-radius: 28px; background: var(--ink); color: var(--cream); text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.75);
}
.offer-demo__label { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #A9A396; }
.offer-demo__label b { font-weight: 500; color: var(--cream); }
.offer-demo__ring { position: relative; width: 176px; height: 176px; margin: 22px auto 0; }
.offer-demo__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.offer-demo__track, .offer-demo__arc { fill: none; stroke-width: 8; }
.offer-demo__track { stroke: rgba(247,245,240,.1); }
.offer-demo__arc { stroke: var(--cream); stroke-linecap: round; stroke-dasharray: 1; transition: stroke .3s; }
.offer-demo.is-urgent .offer-demo__arc { stroke: #FF6B5E; }
.offer-demo__count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.offer-demo__count span { font-size: 58px; font-weight: 600; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .3s; }
.offer-demo.is-urgent .offer-demo__count span { color: #FF6B5E; }
.offer-demo__count small { margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8F897C; }
.offer-demo__status { min-height: 3em; max-width: 30ch; margin: 18px auto 0; font-size: 15px; line-height: 1.45; color: #D8D2C4; }
.offer-demo__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.offer-demo__btn {
  height: 50px; border: 0; border-radius: 14px; cursor: pointer;
  font: 600 14px/1 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .25s var(--ease-shot), opacity .25s, box-shadow .25s;
}
.offer-demo__btn--decline { background: #2B2924; color: #D8D2C4; }
.offer-demo__btn--accept { background: #FFD43B; color: #1F2B3A; box-shadow: 0 10px 24px -12px rgba(255,212,59,.7); }
.offer-demo__btn:disabled { opacity: .32; box-shadow: none; cursor: default; }
.offer-demo__btn:not(:disabled):hover { transform: translateY(-2px); }
.offer-demo__btn:not(:disabled):active { transform: scale(.97); }

.offer-steps { position: relative; margin: 0; padding: 4px 0 0; list-style: none; }
.offer-steps::after { content: ''; position: absolute; left: 10px; top: 14px; bottom: 34px; width: 2px; border-radius: 2px; background: var(--line); }
.offer-step { position: relative; z-index: 1; padding: 0 0 26px 40px; transition: opacity .35s ease; }
.offer-step::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream); box-shadow: inset 0 0 0 2px #C9C3B5;
  transition: background .3s, box-shadow .3s, transform .4s var(--ease-shot);
}
.offer-step.is-on::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(18,17,15,.08); transform: scale(1.08); }
.offer.is-running .offer-step:not(.is-on) { opacity: .42; }
.offer-step__t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.offer-step h3 { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.offer-step p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: #5E594E; }
.offer-step [data-outcome] { border-radius: 4px; transition: color .3s, background-color .3s; }
.offer-step [data-outcome].is-on { color: var(--ink); background-color: rgba(255,212,59,.4); }

/* 05 · The hard parts */
.problems { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.problem {
  padding: 28px; border-radius: 26px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5);
}
.problem__head { display: flex; align-items: center; gap: 10px; }
.problem__n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.problem__tag { padding: 4px 10px; border-radius: 999px; background: #DDE3F5; color: #3B4A78; font-size: 12px; font-weight: 500; }
.problem h3 { margin: 16px 0 0; font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.problem dl { display: grid; gap: 14px; margin: 18px 0 0; }
.problem dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.problem dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #3A362E; }

/* 06 · Outcome */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.stat-card {
  padding: 24px; border-radius: 24px; background: var(--card);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 18px 36px -28px rgba(0,0,0,.5);
}
.stat-card b { display: block; font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
.stat-card > span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
/* Words rather than figures: what was owned, not what was counted. */
.stat-card--text b { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.stat-card--text > span { font-size: 14.5px; line-height: 1.5; }
/* The App Store listing as proof it shipped, beside what I owned. */
.shipped { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 36px; }
.shipped .stats { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.shipped .case-facts { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shipped .case-facts .case-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
.shipped .case-facts .case-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
.store-proof { margin: 0; }
.store-proof img {
  display: block; width: 100%; height: auto; border-radius: 24px; background: #000;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.6);
}
.store-proof figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.quote { margin: 18px 0 0; padding: 36px 40px; border-radius: 28px; background: var(--ink); color: var(--cream); }
.quote p { margin: 0; font-size: clamp(20px, 2.1vw, 26px); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; text-wrap: pretty; }
.quote footer { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A9A396; }

/* 07 · Looking back */
.reflect { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.reflect__item { padding: 24px; border-radius: 22px; background: #EFECE5; }
.reflect__item h3 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reflect__item p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #3A362E; }

.case-end {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 72px; padding: 36px 40px; border-radius: 30px; background: #DDE3F5;
}
.case-end h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.case-end p { margin: 6px 0 0; font-size: 16px; color: #4A5577; }
.case-end__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.case-btn {
  display: inline-flex; align-items: center; padding: 12px 20px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer;
  font: 600 15px/1.2 'Outfit', sans-serif; transition: transform .3s var(--ease-shot), background .25s;
}
.case-btn:hover { color: var(--ink); transform: translateY(-2px); }
.case-btn--ink { background: var(--ink); color: var(--cream); }
.case-btn--ink:hover { color: var(--cream); }
.case-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(18,17,15,.18); }

/* Template markers. Delete them as the case study gets filled in:
   .ph is a fact to supply; data-draft is my read of how it was built. */
.ph {
  padding: .04em .3em; border-radius: .3em; background: rgba(255,212,59,.4);
  box-shadow: inset 0 -1px 0 rgba(170,130,0,.35);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.quote .ph { background: rgba(255,212,59,.24); box-shadow: none; }
[data-draft] { position: relative; }
[data-draft="card"]::after {
  content: 'Draft'; position: absolute; top: 16px; right: 16px; padding: 3px 8px; border-radius: 999px;
  background: rgba(255,212,59,.5); color: #6E5200; pointer-events: none;
  font: 500 9.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
[data-draft="text"]::before {
  content: ''; position: absolute; left: -16px; top: .3em; bottom: .3em; width: 3px; border-radius: 3px; background: #FFD43B;
}

/* ---------- Helpros sheet ---------- */

/* The customer app: the PROS sheet's layout in the tile's warm palette. */
.pro-sheet--helpros { --phone-shadow: drop-shadow(0 14px 20px rgba(70,45,15,.26)); }
.pro-sheet--helpros .pro-sheet__head, .pro-sheet--helpros .pro-stage,
.pro-sheet--helpros .walk, .pro-sheet--helpros .case-end { background: #EFE3D6; }
.pro-sheet--helpros .pro-sheet__sub, .pro-sheet--helpros .walk-step__n { color: #7A6349; }
.pro-sheet--helpros .walk .case-lead, .pro-sheet--helpros .case-end p { color: #5E4B36; }
.pro-sheet--helpros .walk-step h3 + p { color: #4E3E2C; }
.pro-sheet--helpros .walk-step li { color: #3A2E21; }
.pro-sheet--helpros .pro-hero { filter: drop-shadow(0 20px 30px rgba(70,45,15,.3)); }

/* One job, two apps: each customer step beside the pro step that answers it. */
.sides { display: grid; gap: 10px; margin-top: 36px; }
.sides__head, .sides__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
.sides__head { align-items: center; padding: 0 2px 4px; }
.sides__app { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.sides__app img { width: 28px; height: 28px; border-radius: 8px; }
.sides__row p {
  margin: 0; padding: 16px 18px; border-radius: 18px; background: var(--card);
  font-size: 15.5px; line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 30px -26px rgba(0,0,0,.5);
}
/* The hand-off: a short rule with a dot at each end. */
.sides__row i { position: relative; align-self: center; height: 2px; margin: 0 9px; border-radius: 2px; background: #DCCDBC; }
.sides__row i::before, .sides__row i::after {
  content: ''; position: absolute; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #B59C80;
}
.sides__row i::before { left: -3px; }
.sides__row i::after { right: -3px; }

/* ---------- Swivel Partner sheet ---------- */

/* The tile is black, so the sheet grows out of black, with the Swivel teal
   under the walkthrough and the closing card. */
.pro-sheet--partner { --phone-shadow: drop-shadow(0 14px 20px rgba(0,0,0,.45)); }
.pro-sheet--partner .pro-sheet__head, .pro-sheet--partner .pro-stage { background: #0C0D0F; color: #F7F5F0; }
.pro-sheet--partner .pro-sheet__sub { color: #8AA6A7; }
/* The title block's copy flies over the black header, so it keeps the tile's colour. */
.pro-sheet--partner .pro-ghost { color: #F7F5F0; }
.pro-sheet--partner .pro-sheet__close { background: rgba(255,255,255,.14); color: #F7F5F0; }
.pro-sheet--partner .pro-sheet__close:hover { background: rgba(255,255,255,.24); }
.pro-sheet--partner .pro-hero { filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }
.pro-sheet--partner .walk, .pro-sheet--partner .case-end { background: #DCECEC; }
.pro-sheet--partner .walk-step__n { color: #4A6466; }
.pro-sheet--partner .walk .case-lead, .pro-sheet--partner .case-end p { color: #3F5A5C; }
.pro-sheet--partner .walk-step h3 + p { color: #2E4446; }
.pro-sheet--partner .walk-step li { color: #21393B; }

/* ---------- Swivel sheet ---------- */

/* The agent app, in the tile's teal. */
.pro-sheet--agent { --phone-shadow: drop-shadow(0 14px 20px rgba(20,60,62,.3)); }
.pro-sheet--agent .pro-sheet__head, .pro-sheet--agent .pro-stage, .pro-sheet--agent .case-end { background: #DCECEC; }
.pro-sheet--agent .walk { background: #CFE3E3; }
.pro-sheet--agent .pro-sheet__sub, .pro-sheet--agent .walk-step__n { color: #4A6466; }
.pro-sheet--agent .walk .case-lead, .pro-sheet--agent .case-end p { color: #3F5A5C; }
.pro-sheet--agent .walk-step h3 + p { color: #2E4446; }
.pro-sheet--agent .walk-step li { color: #21393B; }
.pro-sheet--agent .pro-hero { filter: drop-shadow(0 20px 30px rgba(20,60,62,.35)); }

/* ---------- Pressr sheet ---------- */

/* The tile is near black, so the sheet grows out of black. The previews bring
   their own red, which is why the stage stays plain. */
.pro-sheet--pressr .pro-sheet__head, .pro-sheet--pressr .pro-stage { background: #12110F; color: var(--cream); }
.pro-sheet--pressr .pro-sheet__sub { color: #A9A396; }
.pro-sheet--pressr .pro-ghost { color: #F7F5F0; }
.pro-sheet--pressr .pro-sheet__close { background: rgba(255,255,255,.14); color: #F7F5F0; }
.pro-sheet--pressr .pro-sheet__close:hover { background: rgba(255,255,255,.24); }
/* The previews are one continuous strip, drawn to be read left to right, so they
   sit in a centred row at one size instead of fanning out like phones. The step is
   a panel's width, worked out from the stage height, plus a hairline gap. */
/* The header is the example pressr itself. The stage takes the clip's own shape so
   the whole frame shows, and nothing about it reacts to the pointer. */
.pro-sheet--pressr .pro-stage { height: auto; aspect-ratio: 1280 / 720; }
.pro-sheet--pressr .pro-hero {
  position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; border-radius: 0; filter: none;
  transform: none; transition: none;
}
.pro-sheet--pressr .pro-stage:hover .pro-hero,
.pro-sheet--pressr .pro-stage.is-done:hover .pro-hero { transform: none; }
.pro-sheet--pressr .case-end { background: #EFECE5; }
/* The pressr walkthrough runs on black, like the app itself. */
.pro-sheet--pressr .walk { background: #141312; }
.pro-sheet--pressr .walk .case-title, .pro-sheet--pressr .walk-step h3 { color: #F7F5F0; }
.pro-sheet--pressr .walk .case-kicker, .pro-sheet--pressr .walk-step__n { color: #A9A396; }
.pro-sheet--pressr .walk .case-kicker b { color: #F7F5F0; }
.pro-sheet--pressr .walk .case-lead, .pro-sheet--pressr .walk-step h3 + p { color: #C9C3B5; }
/* A stand-in where I don't have the screen yet; it says what it is waiting for. */
.walk-ph {
  display: grid; place-content: center; gap: 10px; height: 100%; aspect-ratio: 654 / 1422;
  padding: 0 22px; border-radius: 30px; border: 1.5px dashed rgba(247,245,240,.3);
  background: rgba(247,245,240,.03); text-align: center; color: #8F897C;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
}
.walk-ph span {
  display: block; max-width: 22ch; margin: 0 auto; color: #F7F5F0;
  font: 500 16px/1.4 'Outfit', sans-serif; letter-spacing: -.01em; text-transform: none;
}
/* ---------- Typpo sheet ---------- */

/* The tile's light grey. The stage is the real thing: the Mac window with the
   iPhone standing in front of it, both actual screenshots, nothing from the listing. */
.pro-sheet--typpo .pro-sheet__head, .pro-sheet--typpo .pro-stage, .pro-sheet--typpo .case-end { background: #F3F3F3; }
.pro-sheet--typpo .pro-stage { height: clamp(380px, 56vh, 560px); }
.pro-sheet--typpo .pro-hero.ty-set {
  position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%;
  transform: none; filter: none; border-radius: 0; transition: none;
}
.pro-sheet--typpo .pro-stage:hover .pro-hero, .pro-sheet--typpo .pro-stage.is-done:hover .pro-hero { transform: none; }
/* The window capture carries its own macOS shadow; the phone gets the site's. */
.ty-set__mac { position: absolute; left: 5%; top: 50%; height: 92%; width: auto; transform: translateY(-50%); }
.ty-set__phone {
  position: absolute; right: 19%; bottom: -6%; height: 84%; width: auto;
  filter: drop-shadow(0 26px 40px rgba(40,34,26,.38));
}
.previews .previews__scroll--wide img { height: 300px; }
[data-theme="dark"] .ty-set img { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 50px -30px rgba(0,0,0,.9); }
@media (max-width: 760px) {
  .ty-set__mac { left: 2%; height: 64%; }
  .ty-set__phone { right: 4%; height: 78%; bottom: -8%; }
  .previews .previews__scroll--wide img { height: 220px; }
}

/* The reel: 4:5 ads in a grid, one wide one, captions on a scrim. */
.reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.reel__item {
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: #000;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 44px -30px rgba(0,0,0,.6);
}
.reel__item--wide { grid-column: span 2; aspect-ratio: 1120 / 720; }
.reel__item video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}
.reel__item b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.reel__item span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.82); }

/* Two stills from the ad system, side by side. */
.ad-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; }
.ad-pair img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 44px -30px rgba(0,0,0,.5);
}
.ad-pair figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
@media (max-width: 760px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .reel__item { border-radius: 16px; }
  .reel__item figcaption { padding: 28px 12px 12px; }
  .reel__item span { display: none; }
  .ad-pair { gap: 10px; }
  .ad-pair img { border-radius: 16px; }
}
.pro-sheet--typpo .pro-sheet__sub { color: #5C5240; }
.pro-sheet--typpo .walk { background: #EDEBE6; }
.pro-sheet--typpo .walk-step__n { color: #6E5F49; }
.pro-sheet--typpo .walk .case-lead, .pro-sheet--typpo .case-end p { color: #5C5240; }
.pro-sheet--typpo .walk-step h3 + p { color: #46403A; }
.pro-sheet--typpo .pro-screen, .pro-sheet--typpo .pro-hero { border-radius: 16px; }
.pro-sheet--typpo .pro-hero { filter: drop-shadow(0 20px 30px rgba(40,34,26,.3)); }
[data-theme="dark"] .pro-sheet--typpo .pro-sheet__head, [data-theme="dark"] .pro-sheet--typpo .pro-stage,
[data-theme="dark"] .pro-sheet--typpo .case-end { background: #1C1C1E; }
[data-theme="dark"] .pro-sheet--typpo .walk { background: #171718; }
[data-theme="dark"] .pro-sheet--typpo .pro-sheet__sub, [data-theme="dark"] .pro-sheet--typpo .walk-step__n { color: #9C9589; }
[data-theme="dark"] .pro-sheet--typpo .walk .case-lead, [data-theme="dark"] .pro-sheet--typpo .case-end p { color: #AEAEB2; }
[data-theme="dark"] .pro-sheet--typpo .walk-step h3 + p { color: #C7C2BA; }

/* ---------- Vookie sheet ---------- */

/* Opens out of the tile's video, so the header and stage are the tile's black. */
.pro-sheet--vookie .pro-sheet__head, .pro-sheet--vookie .pro-stage { background: #0B0B0B; color: var(--cream); }
.pro-sheet--vookie .pro-sheet__head { padding-top: 30px; padding-bottom: 22px; }
.pro-sheet--vookie .pro-sheet__sub { color: #B8B2A5; }
.pro-sheet--vookie .pro-ghost { color: #F7F5F0; }
.pro-sheet--vookie .pro-sheet__close { background: rgba(255,255,255,.14); color: #F7F5F0; }
.pro-sheet--vookie .pro-sheet__close:hover { background: rgba(255,255,255,.24); }
/* The lineup rises into the header once the sheet has landed, then drifts. */
.pro-sheet--vookie .pro-hero.vk-set {
  position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 26px 30px;
  transform: none; filter: none; border-radius: 0;
  opacity: 0; transition: opacity .5s ease;
}
.pro-sheet--vookie .pro-stage.live .vk-set { opacity: 1; }
.pro-sheet--vookie .pro-stage:hover .pro-hero, .pro-sheet--vookie .pro-stage.is-done:hover .pro-hero { transform: none; }
.vk-set img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.6));
  transform: translateY(70px) scale(.86);
  transition: transform .95s var(--ease-deck);
}
.pro-stage.live .vk-set img { transform: none; animation: vkFloat 7s ease-in-out .95s infinite; }
@keyframes vkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* The raffle clip in the walkthrough gets a device around it. */
.walk-device {
  display: block; height: 100%; aspect-ratio: 908 / 1960; padding: 10px; box-sizing: border-box;
  border-radius: 44px; background: #0F0F10; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14);
  filter: var(--phone-shadow);
}
.walk-device video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 34px; background: #000; }
.walk-step__phone .walk-device { height: 100%; }
.pro-sheet--vookie .walk { background: #121212; }
.pro-sheet--vookie .walk .case-title, .pro-sheet--vookie .walk-step h3 { color: #F7F5F0; }
.pro-sheet--vookie .walk .case-kicker, .pro-sheet--vookie .walk-step__n { color: #B8B2A5; }
.pro-sheet--vookie .walk .case-kicker b { color: #F7F5F0; }
.pro-sheet--vookie .walk .case-lead, .pro-sheet--vookie .walk-step h3 + p { color: #C9C3B5; }
.pro-sheet--vookie .case-end { background: #EFECE5; }
/* The wordmark stands in for an icon: it sits above the role rather than beside it. */
.pro-sheet__head--wordmark { flex-direction: column; align-items: flex-start; gap: 10px; }
.pro-sheet__head img.pro-sheet__wordmark { height: 44px; width: auto; border-radius: 0; }
.pro-bar__top img.pro-bar__wordmark { height: 22px; width: auto; border-radius: 0; margin-right: 12px; }
/* Share cards: story-shaped, in a row that scrolls when it has to. */
.share-row { margin: 36px 0 0; }
.share-row__scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.share-row img {
  flex: 0 0 auto; height: 440px; width: auto; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.6);
}
.share-row figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Four across for the Combine, which has one more point to make than the rest. */
.case-notes--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .case-notes--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The demo clip that shows a raw recording next to the rendered pressr. */
.pr-demo { margin: 36px 0 0; }
.pr-demo video {
  display: block; width: 100%; height: auto; border-radius: 24px; background: #000;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.6);
}
.pr-demo figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* A row of previews rather than one wide image. */
.previews .previews__scroll--row { display: flex; gap: 14px; }
.previews .previews__scroll--row img { flex: 0 0 auto; width: auto; min-width: 0; height: 440px; border-radius: 20px; }

/* The App Store previews, side by side; narrow screens scroll them. */
.previews { margin: 36px 0 0; }
.previews__scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.previews img {
  display: block; width: 100%; min-width: 760px; height: auto; border-radius: 22px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 28px 54px -30px rgba(0,0,0,.6);
}
.previews figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* Sections rise in as they scroll into view (only once script.js opts in). */
.has-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .9s var(--ease-shot); transition-delay: var(--rd, 0s); }
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  @supports (width: 1cqw) {
    .bento { --row: calc((100cqw - 54px) / 4); }
  }
  .bio { justify-content: center; gap: 26px; }
  .bio__lead { font-size: 32px; }
  .tile--w4, .tile--w5 { grid-column: span 2; }
  .theme-switch { --h: 64px; }
}

/* The design leaves the top bar undefined below ~900px; the tabs drop to their own row. */
@media (max-width: 920px) {
  .topbar { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; }
  .navpills { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

@media (max-width: 760px) {
  /* On a phone the sheet is the whole screen, like a pushed page, rather than a
     narrow card floating over the grid. */
  .pro-sheet {
    top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none;
    transform: none; border-radius: 0; box-shadow: none;
  }
  .pro-shadow { display: none; }
  .pro-sheet__close { top: calc(13px + env(safe-area-inset-top)); }
  .pro-bar { height: calc(64px + env(safe-area-inset-top)); margin-bottom: calc(-64px - env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .pro-body { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .pro-cue { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

  /* Three phones on a narrow stage: shorter, and spread wider to stay legible. */
  .pro-screen--far-left, .pro-screen--far-right, .pro-screen--far-left-2 { display: none; }
  .pro-screen, .pro-hero { height: 92%; bottom: -12%; }
  .pro-stage.live .pro-screen--left { --x: -22cqw; --r: -6deg; --s: .94; }
  .pro-stage.live .pro-screen--right { --x: 22cqw; --r: 6deg; --s: .94; }
  .pro-body { grid-template-columns: minmax(0, 1fr); padding: 32px 24px 36px; gap: 28px; }
  .pro-sheet__head { padding: calc(22px + env(safe-area-inset-top)) 70px 16px 24px; }
  /* Role, then dates on their own line, rather than a break mid-date. */
  .pro-sheet__sub i { display: none; }
  .pro-sheet__sub span { display: block; margin-top: 1px; }

  /* Case study, single column. The walkthrough trades its sticky phone for a
     phone inside each step. */
  .pro-body { --pad: 24px; }
  .case-sec { margin-top: 48px; }
  .case-intro { margin-top: 24px; padding-top: 44px; }
  .case-lead { font-size: 16.5px; }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .case-fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .case-principles, .case-notes, .problems, .reflect { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipped { grid-template-columns: minmax(0, 1fr); }
  .shipped .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shipped .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .walk { margin-top: 48px; padding: 52px var(--pad) 12px; }
  .walk__grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .walk__stage { display: none; }
  .walk-step { min-height: 0; padding-bottom: 48px; opacity: 1; }
  .walk-step__phone { display: block; position: relative; width: fit-content; height: min(460px, 110vw); margin: 0 auto 24px; }
  .walk-spot::before { left: -13px; top: -13px; width: 17px; height: 17px; font-size: 9px; }
  .offer { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quote { padding: 28px 24px; }
  .case-end { padding: 28px 24px; }
  [data-draft="text"]::before { left: -12px; }
  .sides__head, .sides__row { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); }
  .sides__app { gap: 8px; font-size: 14px; }
  .sides__app img { width: 24px; height: 24px; border-radius: 7px; }
  .sides__row p { padding: 13px 14px; border-radius: 16px; font-size: 14px; }
  .sides__row i { margin: 0 4px; }
  .sides__row i::before, .sides__row i::after { display: none; }
}

@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .bento > .tile { grid-column: span 1; grid-row: auto; min-height: 190px; }

  /* Beyond the design's one-column rule: media tiles keep their desktop proportions. */
  .bio__top { flex-direction: column; gap: 14px; }
  .bio__lead { font-size: 24px; }
  .bento > .vookie, .bento > .pro-tile { aspect-ratio: 2 / 3; }
  .bento > .pressr, .bento > .swivel, .bento > .partner { aspect-ratio: 1 / 1; }
  /* Title on top and the fan below it, across the tile's full width. */
  .bento > .helpros { aspect-ratio: 4 / 5; align-items: flex-start; padding: 26px; }
  .bento > .relay { aspect-ratio: 4 / 3; }
  .helpros__body { max-width: none; }
  .helpros-fan { top: 36%; right: 0; width: 100%; }
  .helpros-fan img { top: 0; height: 120%; }
}

@media (max-width: 560px) {
  /* The bar keeps the section label; the dates are still in the header above. */
  .pro-bar__dates { display: none; }
  .topbar { padding: 14px 16px 24px; }
  .wrap { padding: 10px 16px 0; }
  .tab { padding: 10px 16px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .gmail-mark svg, .g-env, .g-letter, .li-plate { transition-duration: .01ms !important; transition-delay: 0s !important; }
  a:is(:hover, .is-hot) .li-dot, a:is(:hover, .is-hot) .li-stem, a:is(:hover, .is-hot) .li-n { animation: none !important; }
  a:is(:hover, .is-hot) .gmail-mark svg, .mailtile:is(:hover, .is-hot) .gmail-mark svg { transform: none; }
  .tile, .bio__memoji { animation: none; }
  .github:is(:hover, .is-hot) .gh-mark { animation: none; }
  .gh-lift, .gh-stat { transition: none; }
  .pro-bar, .pro-cue, .walk-phone, .walk-spot, .walk-step { transition: none; }
  .pro-cue svg { animation: none; }
  .pro-screen { transition: none; }
  .theme-tile, .theme-tile__word, .ts-knob, .ts-moon { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .ts-bob, .ts-lane, .ts-rays, .ts-rays__pulse, .ts-halo circle, .ts-bird, .ts-bird__wings,
  .ts-sky, .ts-sky circle, .ts-meteor, .ts-moon__wobble { animation: none !important; }
}

/* ---------- Dark theme: Onyx ---------- */

/* The Onyx business card's palette: neutral black, iOS greys, and the brand blue
   lifted so it holds up on black. Ink and cream trade places, so the ink buttons,
   the phone tile and the "6 apps" stat turn light, like the Call tile on the card.
   Tiles that stay dark either way (media, Pressr, the demo and quote) pin their own. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0A0A0A;
  --card: #1C1C1E;
  --ink: #F5F5F7;
  --cream: #0A0A0A;
  --accent: #3D6AF2;
  --muted: #8E8E93;
  --muted-on-dark: #8E8E93;
  --phone-shadow: drop-shadow(0 14px 20px rgba(0,0,0,.55));
  --shadow-tile: 0 0 0 1px rgba(255,255,255,.045), 0 22px 44px -30px rgba(0,0,0,.9);
  --shadow-tile-dark: var(--shadow-tile);
  --shadow-pill: 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px -20px rgba(0,0,0,.9);
  --shadow-sheet: 0 40px 90px -30px rgba(0,0,0,.95);
}

/* Top bar */
[data-theme="dark"] .topbar { background: linear-gradient(#0A0A0A 0%, #0A0A0A 74%, rgba(10,10,10,0) 100%); }
[data-theme="dark"] .navpills { background: rgba(28,28,30,.72); }
[data-theme="dark"] .navpills__pill { background: #3A3A3C; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px -10px rgba(0,0,0,.8); }

/* Bio and contact */
[data-theme="dark"] .chip--link { background: #2C2C2E; color: #D1D1D6; }
[data-theme="dark"] .chip--link:hover { background: #3A3A3C; color: #F5F5F7; }
[data-theme="dark"] .chip--open, [data-theme="dark"] .now-badge { background: rgba(48,209,88,.14); color: #6FDD8B; }
[data-theme="dark"] .chip__dot, [data-theme="dark"] .now-badge__dot { background: #30D158; }
/* The Typpo mark is dark type on transparency, so inverting it is all dark mode needs. */
[data-theme="dark"] .chip__mark, [data-theme="dark"] .typpo__mark { filter: invert(1) contrast(1.25); }
[data-theme="dark"] .mailtile:is(:hover, .is-hot) { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 34px 54px -30px rgba(0,0,0,.95); }
[data-theme="dark"] .mail-btn:not(.is-copied) { background: #2C2C2E; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 28px -16px rgba(0,0,0,.9); }

/* Work tiles keep a trace of their colour, dimmed to near black. */
[data-theme="dark"] .typpo { background: var(--card); }
[data-theme="dark"] .typpo__eyebrow, [data-theme="dark"] .typpo__role { color: #8E8E93; }
[data-theme="dark"] .pressr { background: var(--card); color: #F5F5F7; box-shadow: var(--shadow-tile); }
[data-theme="dark"] .pressr__icon { background-image: repeating-linear-gradient(135deg, #2C2C2E 0 6px, #3A3A3C 6px 12px); }
[data-theme="dark"] .pressr__shots { background-image: repeating-linear-gradient(135deg, #232325 0 10px, #2A2A2D 10px 20px); }
[data-theme="dark"] .pressr__shots span { color: #8E8E93; }
[data-theme="dark"] .pressr__store, [data-theme="dark"] .pressr__store:hover,
[data-theme="dark"] .cta__btn, [data-theme="dark"] .cta__btn:hover { background: #F5F5F7; color: #0A0A0A; }
[data-theme="dark"] .vookie, [data-theme="dark"] .partner { color: #F5F5F7; }
[data-theme="dark"] .partner__icon { background: #F7F5F0; }
[data-theme="dark"] .pro-tile, [data-theme="dark"] .pro-sheet__head, [data-theme="dark"] .pro-stage, [data-theme="dark"] .case-end { background: #1A1D27; }
[data-theme="dark"] .pro-tile__role, [data-theme="dark"] .pro-sheet__sub { color: #8E97B8; }
[data-theme="dark"] .swivel { background: #172121; }
[data-theme="dark"] .swivel__role { color: #8AA6A7; }
[data-theme="dark"] .swivel-shot img { filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
[data-theme="dark"] .helpros { --phone-shadow: drop-shadow(0 14px 20px rgba(0,0,0,.55)); background: #221D18; }
[data-theme="dark"] .helpros__role { color: #B09A80; }
[data-theme="dark"] .cta { background: #1B4CD8; }
[data-theme="dark"] .stat--dark .stat__label { color: #6E6E73; }

/* Helpros for PROS sheet and case study */
[data-theme="dark"] .pro-backdrop { background: rgba(0,0,0,.55); }
[data-theme="dark"] .pro-sheet { background: #121214; box-shadow: var(--shadow-sheet), 0 0 0 1px rgba(255,255,255,.08) inset; }
[data-theme="dark"] .pro-sheet__close { background: rgba(255,255,255,.1); }
[data-theme="dark"] .pro-sheet__close:hover { background: rgba(255,255,255,.18); }
[data-theme="dark"] .pro-body { --line: rgba(255,255,255,.1); }
[data-theme="dark"] .pro-body__stack span { background: #2C2C2E; }
[data-theme="dark"] .pro-bar { background: rgba(18,18,20,.84); box-shadow: 0 1px 0 rgba(255,255,255,.07); }
[data-theme="dark"] .pro-bar__top:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .pro-card, [data-theme="dark"] .principle, [data-theme="dark"] .problem,
[data-theme="dark"] .stat-card, [data-theme="dark"] .case-diagram { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 36px -28px rgba(0,0,0,.8); }
[data-theme="dark"] .case-lead, [data-theme="dark"] .case-note p, [data-theme="dark"] .offer-step p { color: #AEAEB2; }
[data-theme="dark"] .case-toc a { background: #2C2C2E; color: #D1D1D6; }
[data-theme="dark"] .case-toc a:hover { background: #3A3A3C; color: #F5F5F7; }
[data-theme="dark"] .principle__icon, [data-theme="dark"] .problem__tag { background: #232838; color: #A9B8EC; }
[data-theme="dark"] .walk { background: #171A23; }
[data-theme="dark"] .walk .case-kicker, [data-theme="dark"] .walk-step__n { color: #8E97B8; }
[data-theme="dark"] .walk .case-lead, [data-theme="dark"] .case-end p { color: #A3ABC4; }
[data-theme="dark"] .walk-step h3 + p { color: #B8BFD4; }
[data-theme="dark"] .walk-step li { background: rgba(255,255,255,.05); color: #D1D1D6; }
[data-theme="dark"] .walk-step li.is-hot { background: rgba(255,255,255,.12); }
[data-theme="dark"] .state-map__edge { stroke: #636366; }
[data-theme="dark"] .state-map__labels text { fill: #8E8E93; }
[data-theme="dark"] .state-map__node rect { fill: #2C2C2E; stroke: rgba(255,255,255,.1); }
[data-theme="dark"] .state-map__node--idle rect { fill: #232325; stroke: none; }
[data-theme="dark"] .state-map__node--hot rect { fill: #FFD43B; }
[data-theme="dark"] .state-map__node--hot > text { fill: #12110F; }
[data-theme="dark"] .case-note, [data-theme="dark"] .reflect__item { background: #18181A; }
[data-theme="dark"] .offer-demo, [data-theme="dark"] .quote {
  background: #0A0A0A; color: #F5F5F7;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 28px 54px -30px rgba(0,0,0,.9);
}
[data-theme="dark"] .store-proof img { box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 28px 54px -30px rgba(0,0,0,.9); }
[data-theme="dark"] .offer-demo__label b { color: #F5F5F7; }
[data-theme="dark"] .offer-demo__arc { stroke: #F5F5F7; }
[data-theme="dark"] .offer-step::before { box-shadow: inset 0 0 0 2px #48484A; }
[data-theme="dark"] .offer-step.is-on::before { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(255,255,255,.1); }
[data-theme="dark"] .offer-step [data-outcome].is-on { background-color: rgba(255,212,59,.28); }
[data-theme="dark"] .problem dd, [data-theme="dark"] .reflect__item p { color: #D1D1D6; }
[data-theme="dark"] .case-btn { background: #2C2C2E; }
[data-theme="dark"] .case-btn--ink { background: var(--ink); }
[data-theme="dark"] .case-btn--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
[data-theme="dark"] .ph { background: rgba(255,212,59,.26); box-shadow: inset 0 -1px 0 rgba(255,212,59,.35); }

/* Helpros sheet: the tile's warm tint, dimmed the same way */
[data-theme="dark"] .pro-sheet--helpros { --phone-shadow: drop-shadow(0 14px 20px rgba(0,0,0,.55)); }
[data-theme="dark"] .pro-sheet--helpros .pro-sheet__head, [data-theme="dark"] .pro-sheet--helpros .pro-stage,
[data-theme="dark"] .pro-sheet--helpros .case-end { background: #221D18; }
[data-theme="dark"] .pro-sheet--helpros .walk { background: #1D1915; }
[data-theme="dark"] .pro-sheet--helpros .pro-sheet__sub, [data-theme="dark"] .pro-sheet--helpros .walk-step__n { color: #B09A80; }
[data-theme="dark"] .pro-sheet--helpros .walk .case-lead, [data-theme="dark"] .pro-sheet--helpros .case-end p { color: #C2AE96; }
[data-theme="dark"] .pro-sheet--helpros .walk-step h3 + p { color: #D2C4B3; }
[data-theme="dark"] .pro-sheet--helpros .walk-step li { color: #D1D1D6; }
[data-theme="dark"] .pro-sheet--helpros .pro-hero { filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
[data-theme="dark"] .sides__row p { box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 18px 36px -28px rgba(0,0,0,.8); }
[data-theme="dark"] .sides__row i { background: #3A322A; }

/* Swivel Partner sheet: the header stays black either way; the teal band dims */
[data-theme="dark"] .pro-sheet--partner .walk, [data-theme="dark"] .pro-sheet--partner .case-end { background: #15201F; }
[data-theme="dark"] .pro-sheet--partner .walk-step__n { color: #8AA6A7; }
[data-theme="dark"] .pro-sheet--partner .walk .case-lead, [data-theme="dark"] .pro-sheet--partner .case-end p { color: #A6BFC0; }
[data-theme="dark"] .pro-sheet--partner .walk-step h3 + p { color: #C2D4D5; }
[data-theme="dark"] .pro-sheet--partner .walk-step li { color: #D1D1D6; }
[data-theme="dark"] .previews img { background: #0A0A0A; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 28px 54px -30px rgba(0,0,0,.9); }

/* Swivel sheet: the tile's dimmed teal */
[data-theme="dark"] .pro-sheet--agent { --phone-shadow: drop-shadow(0 14px 20px rgba(0,0,0,.55)); }
[data-theme="dark"] .pro-sheet--agent .pro-sheet__head, [data-theme="dark"] .pro-sheet--agent .pro-stage,
[data-theme="dark"] .pro-sheet--agent .case-end { background: #172121; }
[data-theme="dark"] .pro-sheet--agent .walk { background: #131B1B; }
[data-theme="dark"] .pro-sheet--agent .pro-sheet__sub, [data-theme="dark"] .pro-sheet--agent .walk-step__n { color: #8AA6A7; }
[data-theme="dark"] .pro-sheet--agent .walk .case-lead, [data-theme="dark"] .pro-sheet--agent .case-end p { color: #A6BFC0; }
[data-theme="dark"] .pro-sheet--agent .walk-step h3 + p { color: #C2D4D5; }
[data-theme="dark"] .pro-sheet--agent .walk-step li { color: #D1D1D6; }
[data-theme="dark"] .pro-sheet--agent .pro-hero { filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }

/* Pressr sheet: the tile's card black */
[data-theme="dark"] .pro-sheet--pressr .pro-sheet__head, [data-theme="dark"] .pro-sheet--pressr .pro-stage { background: #1C1C1E; }
[data-theme="dark"] .pro-sheet--pressr .case-end { background: #18181A; }
[data-theme="dark"] .sides__row i::before, [data-theme="dark"] .sides__row i::after { background: #8C7760; }

/* Changing theme: script.js grows the new theme out of the switch's knob (and pulls
   the dark one back into it), so the browser's default cross-fade is switched off. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.vt-to-light::view-transition-old(root) { z-index: 1; }
/* The tile itself rides the reveal with the rest of the page (it stays dark until the
   collapsing dark reaches it). Only the switch floats above, live, so its sky never
   freezes; its own dusk circle keeps it in step with the page's circle. */
.theme-switch { view-transition-name: theme-switch; }
::view-transition-group(theme-switch), ::view-transition-new(theme-switch) { animation: none; }
::view-transition-old(theme-switch) { display: none; }
/* When the reveal can't run (no view transitions, reduced motion, a background tab),
   colours ease across instead; the switch and the Light/Dark word keep their own motion. */
.theme-fade :not(.theme-switch, .theme-switch *, .theme-tile__word) {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease, fill .6s ease, stroke .6s ease !important;
}