/* deadrip tour — one full-screen stage over the page, one phone, frame to frame.
   Comic call-outs: flat ink, hard offset shadow, hand-drawn stroke. No glow. */

/* The tour is a layer over the page; the page under it doesn't scroll. */
.film { position: fixed; inset: 0; z-index: 100; background: var(--bg); overscroll-behavior: contain; touch-action: none; }
.film[hidden] { display: none; }
.film:focus { outline: none; }
.film.is-jump *, .film.is-jump *::before { transition: none !important; }
html.tour-open, html.tour-open body { overflow: hidden; }
.film-stage { position: absolute; inset: 0; overflow: hidden; --bar: 0px; }

/* Copy — left on desktop, on top on phones. */
.film-cap { position: absolute; left: clamp(20px, 6vw, 96px); top: 50%; width: min(38vw, 520px);
  transform: translateY(-50%); z-index: 3; pointer-events: none;
  /* The phone zooms under the copy — the copy keeps its own ground. */
  padding: 22px 26px; margin-left: -26px; border-radius: 26px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.film-cap h2 { font-size: clamp(38px, 5vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.film-cap p { margin-top: 18px; font-size: clamp(16px, 1.4vw, 20px); color: var(--muted); max-width: 400px; line-height: 1.4; }
.film-cap.is-in h2, .film-cap.is-in p { animation: film-in .6s var(--ease) both; }
.film-cap.is-in p { animation-delay: .06s; }
@keyframes film-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* The opening logo — the same drop that becomes the splash on the phone. */
.film-logo { position: absolute; left: 0; right: 0; top: 66%; margin-top: 0; z-index: 4; pointer-events: none; text-align: center;
  mix-blend-mode: difference; color: #fff; transition: opacity .2s linear; }
.film-logo span { font-size: clamp(56px, 9vw, 128px); font-weight: 900; letter-spacing: -.055em; line-height: 1; }
[data-scene="logo"] .film-cap { opacity: 0; }

/* The phone. --frame fades the bezel in as the logo turns into the splash. */
.film-phone { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform;
  border-radius: 14% / 6.5%; }
.film-phone::before, .film-phone::after { content: ""; position: absolute; pointer-events: none; opacity: var(--frame, 1); z-index: -1; }
/* The Simulator look: a black body with a thin light rim, nothing shiny. */
.film-phone { --r: calc(var(--pw, 300px) * .125); --b1: calc(var(--pw, 300px) * .012); --b2: calc(var(--pw, 300px) * .036); }
/* Concentric corners: each layer's radius = screen radius + its own thickness. */
.film-phone::before { inset: calc(var(--b2) * -1); border-radius: calc(var(--r) + var(--b2)); background: #0a0a0a;
  box-shadow: inset 0 0 0 1.5px #9a9aa0, inset 0 0 0 3px #1c1c1e, 0 50px 110px -30px rgba(0,0,0,.55); }
.film-phone::after { inset: calc(var(--b1) * -1); border-radius: calc(var(--r) + var(--b1)); background: #000; }
.film-btn { position: absolute; width: calc(var(--pw, 300px) * .016); border-radius: 3px; z-index: -2; opacity: var(--frame, 1);
  background: #121214; box-shadow: inset 0 0 0 1.25px #8e8e93; }
.film-btn.is-action { left: calc(var(--b2) * -1 - var(--pw) * .011); top: 15.5%; height: 4.4%; }
.film-btn.is-up { left: calc(var(--b2) * -1 - var(--pw) * .011); top: 22%; height: 8%; }
.film-btn.is-down { left: calc(var(--b2) * -1 - var(--pw) * .011); top: 31.5%; height: 8%; }
.film-btn.is-side { right: calc(var(--b2) * -1 - var(--pw) * .011); top: 25%; height: 12%; }
.film-screen { position: absolute; inset: 0; border-radius: var(--r); overflow: hidden; background: #f5f3ef;
  /* Safari doesn't clip composited children (video, its poster) to a rounded
     overflow box; the mask makes it, and each layer carries the radius too. */
  -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); isolation: isolate; }
/* Невидимі кадри зовсім виходять із композиції (visibility після згасання):
   інакше Safari тримає й перемальовує десятки шарів роздутого телефона. */
.film-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; border-radius: var(--r);
  visibility: hidden; transition: opacity .28s linear, visibility 0s linear .28s; }
.film-layer.is-on { opacity: 1; visibility: visible; transition: opacity .28s linear, visibility 0s; }
/* A tall capture (whole Home) pans under the screen. */
.film-layer.is-tall { height: auto; object-fit: initial; inset: 0 0 auto; border-radius: var(--r) var(--r) 0 0;
  transform: translateY(calc(var(--pan, 0) * (-100% + 100cqh))); }
.film-screen { container-type: size; }

/* Call-outs. */
.film-pops { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.film-pop { position: absolute; left: 0; top: 0; max-width: 240px; padding: 12px 16px; opacity: 0; display: none;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  /* Ink is fixed, not themed: call-outs sit on the light app screen. */
  background: #fff; color: #0b0b0b; border: 2.5px solid #0b0b0b; border-radius: 18px;
  box-shadow: 5px 5px 0 #0b0b0b; }
.film-pop.is-on { display: block; }
.film-pop.is-burst { background: none; color: #fff; border: 0; box-shadow: none; border-radius: 0;
  font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; padding: 18px 22px; isolation: isolate;
  /* Ink burst with a white comic outline — reads on the light app screen and on the dark page. */
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 6px 0 rgba(0,0,0,.35)); }
.film-pop.is-burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0b0b0b;
  clip-path: polygon(0 12%, 8% 0, 22% 8%, 40% 0, 55% 9%, 72% 0, 86% 7%, 100% 0, 96% 30%, 100% 52%, 95% 74%, 100% 100%, 78% 92%, 60% 100%, 42% 92%, 24% 100%, 8% 92%, 0 100%, 4% 70%, 0 48%, 5% 28%); }
.film-pop.is-note { border-style: dashed; box-shadow: none; font-weight: 700; font-style: italic; }
.film-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.film-arrow:not(.is-on) { display: none; }
.film-arrow path { fill: none; stroke: #0b0b0b; stroke-width: 2.5; filter: drop-shadow(0 0 1.5px #fff); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; }

/* The finger: a ring where the tap landed. */
.film-tap { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .12s linear; }
.film-tap.is-on { opacity: 1; }
/* The tap, comic-style: a jagged ink "pow" pops under the finger and
   speed lines burst out of it. Never covers the target for long. */
.film-tap b { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; background: #0b0b0b;
  clip-path: polygon(50% 0, 61% 30%, 93% 16%, 74% 45%, 100% 62%, 68% 66%, 76% 100%, 50% 76%, 24% 100%, 32% 66%, 0 62%, 26% 45%, 7% 16%, 39% 30%);
  filter: drop-shadow(0 0 0 #fff); opacity: calc(var(--press, 0) * (1 - var(--wave, 0) * .8));
  transform: scale(calc(.4 + var(--press, 0) * .7)) rotate(calc(var(--wave, 0) * 25deg)); }
.film-tap s { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%;
  background: repeating-conic-gradient(#0b0b0b 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 46%, #000 47% 70%, transparent 71%);
          mask: radial-gradient(circle, transparent 0 46%, #000 47% 70%, transparent 71%);
  transform: scale(calc(.55 + var(--wave, 0) * .9)); opacity: calc((1 - var(--wave, 0)) * min(1, var(--wave, 0) * 5)); }
/* A white comic outline round the pow, so it reads on dark screens too. */
.film-tap::before { content: ""; position: absolute; left: -29px; top: -29px; width: 58px; height: 58px; background: #fff;
  clip-path: polygon(50% 0, 61% 30%, 93% 16%, 74% 45%, 100% 62%, 68% 66%, 76% 100%, 50% 76%, 24% 100%, 32% 66%, 0 62%, 26% 45%, 7% 16%, 39% 30%);
  opacity: calc(var(--press, 0) * (1 - var(--wave, 0) * .8));
  transform: scale(calc(.4 + var(--press, 0) * .7)) rotate(calc(var(--wave, 0) * 25deg)); }

/* Day counter for the time-lapse. */
.film-day { position: absolute; left: clamp(20px, 6vw, 96px); bottom: 9vh; z-index: 3; opacity: 0;
  font-size: clamp(56px, 9vw, 140px); font-weight: 900; letter-spacing: -.06em; line-height: 1;
  font-variant-numeric: tabular-nums; transition: opacity .3s; color: var(--fg);
  /* Reads over the phone too: a hairline of the page colour around the digits. */
  text-shadow: 0 0 1px var(--bg), 0 0 18px var(--bg), 0 0 36px var(--bg); }
.film-day.is-on { opacity: 1; }

/* Phones: copy on top, phone below, call-outs smaller. */
@media (max-width: 859px) {
  .film-cap { left: 0; right: 0; top: 0; width: auto; transform: none; margin: 0; border-radius: 0;
    padding: calc(max(18px, env(safe-area-inset-top)) + 66px) 20px 28px;
    background: linear-gradient(var(--bg) 78%, color-mix(in srgb, var(--bg) 0%, transparent));
    backdrop-filter: none; -webkit-backdrop-filter: none; }
  .film-cap h2 { font-size: 34px; }
  .film-cap p { font-size: 15px; margin-top: 10px; }
  .film-pop { max-width: 170px; font-size: 14px; padding: 9px 12px; box-shadow: 4px 4px 0 #0b0b0b; }
  .film-pop.is-burst { font-size: 15px; padding: 13px 15px; box-shadow: none; }
  .film-day { bottom: calc(var(--bar, 0px) + 2.5vh); top: auto; left: 20px; font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .film-cap.is-in h2, .film-cap.is-in p { animation: none; }
}
/* The header arrives on its own, softly, after the title has landed. */
[data-nav] { animation: nav-in .9s var(--ease) .45s both; }
@keyframes nav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
/* Scroll hint on the opening frame; scroll fades it out (--cue). */
.film-cue { position: absolute; left: 50%; bottom: calc(var(--bar, 0px) + max(26px, 4.5vh)); z-index: 4; transform: translateX(-50%);
  opacity: var(--cue, 1); pointer-events: none; color: #0b0b0b; }
.film-cue span { display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  animation: film-in .8s var(--ease) 1.2s both; }
.film-cue i { display: block; width: 1.5px; height: 38px; background: currentColor; transform-origin: top;
  animation: cue-drop 1.9s var(--ease) 2s infinite both; }
/* Wide screens: the wordmark sits low and large — the hint moves to the corner. */
@media (min-width: 860px) {
  .film-cue { left: auto; right: clamp(20px, 6vw, 96px); transform: none; }
}
@keyframes cue-drop { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-nav], .film-cue span, .film-cue i { animation: none; }
}
/* ?t= debug still: no transitions, stage pinned. */
.film-still *, .film-still *::before { transition: none !important; animation: none !important; }
[data-nav] { z-index: 60; }
/* The opening: the whole stage is the splash colour, then the page shows through. */
.film-stage::before { content: ""; position: absolute; inset: 0; background: #f4f2ee; opacity: var(--open, 0); z-index: 1; pointer-events: none; }

/* Tour controls, story-style: chapter segments + name on top, ✕ beside them,
   ‹ › bottom right. Nothing sits over the phone. */
.tour-ui { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.tour-ui button { pointer-events: auto; }
.tour-top { position: absolute; left: clamp(16px, 4vw, 56px); right: calc(clamp(16px, 4vw, 56px) + 58px); top: max(18px, env(safe-area-inset-top)); }
.tour-segs { display: flex; gap: 6px; }
.tour-segs button { flex: 1; position: relative; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.tour-segs button::before, .tour-segs i { position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; }
.tour-segs button::before { content: ""; background: color-mix(in srgb, var(--fg) 16%, transparent); }
.tour-segs i { display: block; background: var(--fg); transform-origin: 0 50%; transform: scaleX(0); }
.tour-segs button:hover::before { background: color-mix(in srgb, var(--fg) 30%, transparent); }
.tour-meta { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; font-size: 13px; }
.tour-ch { font-weight: 750; letter-spacing: -.01em; }
.tour-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: clamp(14px, 3vw, 40px); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 16px; }
.tour-foot { position: absolute; right: clamp(16px, 4vw, 56px); bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.tour-step { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--fg); color: var(--bg); font-size: 24px; line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: scale .25s var(--spring), opacity .2s; }
.tour-step[data-dir="-1"] { background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--fg); border: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tour-step:disabled { opacity: .3; }
.tour-play { font-size: 15px; letter-spacing: -.1em; background: color-mix(in srgb, var(--bg) 82%, transparent) !important; color: var(--fg) !important;
  border: 1px solid var(--line) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tour-step:active { scale: .92; }
.film-cue { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 76px); }
@media (max-width: 859px) {
  .film-day { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); }
}

/* Hero: the slogan and the way in. */
.intro { max-width: 1200px; margin: 0 auto; min-height: 100svh; padding: 110px clamp(20px, 5vw, 64px) 40px;
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(28px, 5vw, 72px); }
.intro h1 { margin-top: 4px; }
.intro .lede { margin-top: 22px; }
.intro-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.intro-note { margin-top: 16px; font-size: 13px; color: var(--muted); }
.intro-phone { position: relative; display: block; width: min(320px, 72vw); aspect-ratio: 660 / 1434; padding: 0; border: 0;
  border-radius: 13% / 6%; background: #000; box-shadow: 0 0 0 10px #0a0a0a, 0 0 0 11px #3a3a3a, var(--shadow); cursor: pointer;
  transition: transform .5s var(--ease); }
.intro-phone:hover { transform: translateY(-6px) rotate(-1deg); }
.intro-phone picture { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); }
.intro-phone img, .intro-phone video { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.intro-phone video { -webkit-mask-image: -webkit-radial-gradient(white, black); }
.intro-visual { position: relative; justify-self: center; }
.intro-play { opacity: 0; transition: opacity .25s; }
.intro-phone:hover .intro-play, .intro-phone:focus-visible .intro-play { opacity: 1; }
/* Comic stickers from the tour, floating round the phone. */
.sticker { position: absolute; z-index: 2; pointer-events: none; padding: 11px 15px; white-space: nowrap;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  background: #fff; color: #0b0b0b; border: 2.5px solid #0b0b0b; border-radius: 18px; box-shadow: 5px 5px 0 #0b0b0b;
  animation: sticker-float 9s ease-in-out infinite; }
.sticker.is-note { border-style: dashed; box-shadow: none; font-weight: 700; font-style: italic; }
.sticker.is-burst { background: none; color: #fff; border: 0; box-shadow: none; border-radius: 0; font-size: 20px;
  text-transform: uppercase; padding: 18px 22px; isolation: isolate;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 6px 0 rgba(0,0,0,.35)); }
.sticker.is-burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0b0b0b;
  clip-path: polygon(0 12%, 8% 0, 22% 8%, 40% 0, 55% 9%, 72% 0, 86% 7%, 100% 0, 96% 30%, 100% 52%, 95% 74%, 100% 100%, 78% 92%, 60% 100%, 42% 92%, 24% 100%, 8% 92%, 0 100%, 4% 70%, 0 48%, 5% 28%); }
.sticker.s-1 { top: 30%; left: -30%; rotate: -6deg; }
.sticker.s-2 { top: 44%; right: -24%; rotate: 4deg; animation-delay: -3s; }
.sticker.s-3 { bottom: 9%; left: -26%; rotate: -3deg; animation-delay: -6s; }
@keyframes sticker-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } }
.intro-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 5px; font-size: 26px; color: #fff; background: rgba(8, 8, 8, .82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
@media (max-width: 859px) {
  .intro { grid-template-columns: 1fr; min-height: 0; padding-top: 104px; text-align: left; }
  .intro .lede { font-size: 17px; margin-top: 16px; }
  .intro-ctas { margin-top: 24px; }
  .intro-phone { width: min(250px, 62vw); margin-top: 8px; }
  .intro-visual { margin-top: 10px; }
  .sticker { font-size: 13px; padding: 8px 11px; box-shadow: 3px 3px 0 #0b0b0b; }
  .sticker.is-burst { font-size: 15px; padding: 13px 15px; }
  .sticker.s-1 { left: -14%; } .sticker.s-2 { right: -16%; } .sticker.s-3 { left: -18%; }
    }

/* Buttons with a bit of character: ink offset shadow, an arrow that moves,
   the tour as a big play disc. */
.btn-pop { gap: 10px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--fg) 35%, transparent); transition: translate .2s var(--ease), box-shadow .2s var(--ease); }
.btn-pop:hover { translate: -2px -2px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--fg) 35%, transparent); }
.btn-pop:active { translate: 2px 2px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--fg) 35%, transparent); scale: 1; }
.btn-arrow { display: inline-block; transition: translate .3s var(--spring); }
.btn-pop:hover .btn-arrow { translate: 4px 0; }
.intro-tour { display: flex; align-items: center; gap: 14px; margin: 34px auto 0; padding: 0; border: 0; background: none;
  font-size: 17px; font-weight: 750; letter-spacing: -.01em; color: var(--fg); cursor: pointer; }
.tour-disc { display: grid; place-items: center; width: 58px; height: 58px; padding-left: 4px; border-radius: 50%; font-size: 18px;
  background: var(--fg); color: var(--bg); position: relative; transition: scale .35s var(--spring); }
.tour-disc::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--fg); opacity: .35;
  animation: disc-pulse 2.4s var(--ease) infinite; }
.intro-tour:hover .tour-disc { scale: 1.08; }
@keyframes disc-pulse { 0% { scale: .9; opacity: .5; } 100% { scale: 1.35; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour-disc::after { animation: none; } }
/* The slogan on one line on wide screens. */
@media (min-width: 860px) {
  .intro { grid-template-columns: 1.15fr .85fr; }
}
/* "Get notified" lives in the hero; once it scrolls away it flies into the header. */
/* Until then it takes no room, so language and theme sit at the edge. */
.nav-cta { opacity: 0; transform: translateY(-14px) scale(.86); pointer-events: none; max-width: 0; padding-inline: 0; margin-left: -10px;
  overflow: visible; clip-path: inset(-8px); white-space: nowrap; border-width: 0;
  transition: opacity .35s var(--ease), transform .55s var(--spring), max-width .45s var(--ease), padding .45s var(--ease), margin .45s var(--ease); }
html.cta-docked .nav-cta { opacity: 1; transform: none; pointer-events: auto; max-width: 220px; padding-inline: 18px; margin-left: 0; border-width: 1px; }
@media (prefers-reduced-motion: reduce) { .nav-cta { transition: opacity .2s; transform: none; } }

/* Features: five things that matter, each its own layout.
   Phones at angles, zoomed crops, comic call-outs with hand-drawn arrows. */
.feats { max-width: 1240px; margin: 0 auto; padding: 60px clamp(20px, 4vw, 56px) 40px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 96px); padding: clamp(60px, 9vw, 120px) 0; }
.feat.is-flip .feat-copy { order: 2; }
/* Same title type as every section (landing.css h2), the hero included. */
.intro h1 { font-size: clamp(44px, 6.8vw, 94px); font-weight: 900; line-height: .92; letter-spacing: -.055em; }
@media (max-width: 859px) { .intro h1 { font-size: clamp(42px, 13vw, 70px); } }
/* Section type, a step smaller for the narrow column; balanced lines, no orphan words. */
.feat-copy h2 { font-size: clamp(40px, 4.8vw, 70px); text-wrap: balance; }
.intro h1, .fixes h2 { text-wrap: balance; }
.feat-copy p { text-wrap: pretty; margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); max-width: 440px; line-height: 1.5; }
.feat-vis { position: relative; aspect-ratio: 1 / 1; margin-bottom: 10%; width: 100%; max-width: 600px; justify-self: center; }
/* A whole phone. */
.ph { position: absolute; margin: 0; width: var(--w); aspect-ratio: 660 / 1434; border-radius: 13% / 6%; background: #000;
  box-shadow: 0 0 0 7px #0a0a0a, 0 0 0 8px #3a3a3a, 0 30px 60px rgba(0, 0, 0, .35); rotate: var(--r, 0deg);
  transition: transform .9s var(--ease); }
.ph picture, .ph img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ph picture { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.ph.is-tilt { transform: perspective(1400px) rotateY(-16deg) rotateX(4deg); }
/* A zoomed-in piece of a screen, on a card with a thick ink border. */
.ph-crop { position: absolute; margin: 0; width: var(--w); rotate: var(--r, 0deg); border-radius: 26px; overflow: hidden; background: #f5f3ef;
  border: 3px solid #0b0b0b; box-shadow: 8px 8px 0 #0b0b0b; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.ph-crop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--y, 0%); scale: var(--zoom, 1); transform-origin: 50% 0; }
/* Comic call-outs, popping in once the block is on screen. */
.callout { position: absolute; z-index: 5; max-width: 230px; padding: 11px 15px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12;
  background: #fff; color: #0b0b0b; border: 2.5px solid #0b0b0b; border-radius: 18px; box-shadow: 5px 5px 0 #0b0b0b;
  opacity: 0; scale: .6; rotate: -3deg; transition: opacity .3s var(--ease) var(--d), scale .55s var(--spring) var(--d); }
.callout.is-note { border-style: dashed; box-shadow: none; font-weight: 700; font-style: italic; rotate: 2deg; }
.callout.is-burst { background: none; color: #fff; border: 0; box-shadow: none; border-radius: 0; font-size: 19px; text-transform: uppercase;
  padding: 18px 22px; isolation: isolate; rotate: 3deg;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 6px 0 rgba(0,0,0,.35)); }
.callout.is-burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0b0b0b;
  clip-path: polygon(0 12%, 8% 0, 22% 8%, 40% 0, 55% 9%, 72% 0, 86% 7%, 100% 0, 96% 30%, 100% 52%, 95% 74%, 100% 100%, 78% 92%, 60% 100%, 42% 92%, 24% 100%, 8% 92%, 0 100%, 4% 70%, 0 48%, 5% 28%); }
.feat-vis.in .callout { opacity: 1; scale: 1; }
.arrow { position: absolute; z-index: 4; overflow: visible; pointer-events: none; }
.arrow { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }
.arrow path { fill: none; stroke: #0b0b0b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset .9s var(--ease) var(--d); }
.feat-vis.in .arrow path { stroke-dashoffset: 0; }
.feats-end { display: flex; justify-content: center; padding: 0 0 40px; }
@media (max-width: 859px) {
  .feat { grid-template-columns: 1fr; padding: 56px 0; gap: 36px; }
  .feat.is-flip .feat-copy { order: 0; }
  .feat-vis { width: 92%; margin: 4% 0 16%; }
  .ph { box-shadow: 0 0 0 5px #0a0a0a, 0 0 0 6px #3a3a3a, 0 20px 40px rgba(0, 0, 0, .35); }
  .ph-crop { border-radius: 18px; box-shadow: 5px 5px 0 #0b0b0b; }
  .callout { font-size: 13px; padding: 8px 11px; max-width: 150px; box-shadow: 3px 3px 0 #0b0b0b; border-width: 2px; }
  .callout.is-burst { font-size: 14px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .callout { transition: none; opacity: 1; scale: 1; }
  .arrow path { transition: none; stroke-dashoffset: 0; }
}

/* A fuller hero: bigger phone, a second screen behind it, a soft spotlight. */
.intro { position: relative; isolation: isolate; }
.intro::before { content: ""; position: absolute; z-index: -1; right: 4%; top: 50%; width: min(760px, 90vw); aspect-ratio: 1; translate: 0 -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--fg) 9%, transparent), transparent); pointer-events: none; }
.intro .lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 520px; }
.intro-phone { width: min(320px, 72vw, calc((100svh - 190px) / 2.17)); z-index: 1; }
.intro-back { position: absolute; z-index: 0; width: 84%; top: 7%; left: -42%; rotate: -9deg; margin: 0; aspect-ratio: 660 / 1434;
  border-radius: 13% / 6%; background: #000; box-shadow: 0 0 0 9px #0a0a0a, 0 0 0 10px #3a3a3a, var(--shadow); opacity: .9; }
.intro-back picture { display: block; width: 100%; height: 100%; border-radius: inherit; overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); }
.intro-back img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
@media (max-width: 859px) {
  .intro-phone { width: min(240px, 58vw); }
  .intro-back { width: 70%; left: -20%; top: 9%; }
}

/* Pains → fixes, comic-style: the pain is a dashed "thought", deadrip
   answers in an ink bubble with a hard shadow. Cards lean a little. */
.fixes { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 9vw, 120px) clamp(20px, 4vw, 56px); }
.fixes h2 { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.fix-tag { display: inline-block; padding: .35em .55em .3em; font-size: .3em; font-weight: 900; letter-spacing: .02em; text-transform: uppercase;
  color: #fff; background: #0b0b0b; rotate: -6deg; isolation: isolate; position: relative;
  clip-path: polygon(0 12%, 8% 0, 22% 8%, 40% 0, 55% 9%, 72% 0, 86% 7%, 100% 0, 96% 30%, 100% 52%, 95% 74%, 100% 100%, 78% 92%, 60% 100%, 42% 92%, 24% 100%, 8% 92%, 0 100%, 4% 70%, 0 48%, 5% 28%);
  filter: drop-shadow(0 0 1px #fff); }
.fix-list { list-style: none; padding: 0; margin: 46px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 36px; }
.fix-list > .fix { flex: 0 1 calc((100% - 72px) / 3); min-width: 250px; }
.fix { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; rotate: var(--lean, -1deg); }
.fix:nth-child(2n) { --lean: 1.2deg; }
.fix:nth-child(3n) { --lean: -.4deg; }
.fix s { text-decoration: none; font-style: italic; font-weight: 650; font-size: 17px; line-height: 1.3; color: var(--fg);
  padding: 12px 16px; border: 2px dashed color-mix(in srgb, var(--fg) 45%, transparent); border-radius: 22px; max-width: 92%; }
.fix-arrow { width: auto; height: auto; background: none; color: var(--fg); font-size: 24px; font-weight: 900; line-height: 1;
  rotate: 90deg; margin-left: 26px; display: block; transition: translate .3s var(--spring); }
.fix b { align-self: flex-end; font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2;
  padding: 16px 18px; background: #fff; color: #0b0b0b; border: 2.5px solid #0b0b0b; border-radius: 20px; box-shadow: 6px 6px 0 #0b0b0b;
  max-width: 94%; transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.fix:hover b { translate: -2px -2px; box-shadow: 8px 8px 0 #0b0b0b; }
.fix:hover .fix-arrow { translate: 4px 0; }
@media (max-width: 859px) {
  .fix-list { gap: 30px; }
  .fix b { font-size: 18px; box-shadow: 4px 4px 0 #0b0b0b; }
  .fix-tag { font-size: .34em; }
  /* Hero on phones: centred. */
  .intro { text-align: center; justify-items: center; }
  .intro .lede { margin-inline: auto; }
  .intro-ctas { justify-content: center; }
}

/* A joke, struck out, then a polite correction. */
.quip { margin-top: 18px; font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 640px; }
.quip s { color: var(--fg); font-weight: 700; text-decoration-thickness: 2px; margin-right: 4px; }
.quip-center { margin: 0 auto 26px; text-align: center; }

/* Support + follow: made in Ukraine, Patreon, Instagram, Threads. */
.support { max-width: 1240px; margin: 0 auto; padding: clamp(60px, 9vw, 120px) clamp(20px, 4vw, 56px) 20px;
  display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(24px, 4vw, 56px); align-items: end; }
.support-card { padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--fg); color: var(--bg); position: relative; overflow: hidden; }
.support-card .eyebrow { color: color-mix(in srgb, var(--bg) 55%, transparent); }
.support-card h2 { font-size: clamp(32px, 4vw, 56px); text-wrap: balance; }
.support-card > p:not(.eyebrow) { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; max-width: 560px;
  color: color-mix(in srgb, var(--bg) 72%, transparent); }
.support-card::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 240px; height: 300px; opacity: .08;
  background: url(/assets/drop-tight.svg) center/contain no-repeat; filter: invert(1); }
html[data-theme="light"] .support-card::after { filter: invert(1); }
.support-ctas { margin-top: 28px; }
.support-card .pill-solid { background: var(--bg); color: var(--fg); }
.follow { display: flex; flex-direction: column; gap: 10px; }
.follow-title { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.follow-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; border: 1px solid var(--line);
  font-size: 18px; font-weight: 750; letter-spacing: -.02em; transition: background .25s, translate .25s var(--ease); }
.follow-link:hover { background: var(--panel); translate: 0 -2px; }
.follow-link svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.follow-link svg .dot { fill: currentColor; stroke: none; }
.support [hidden] { display: none !important; }
@media (max-width: 859px) { .support { grid-template-columns: 1fr; } }
/* Socials without the Patreon card: one centred row. */
.support:has(.support-card[hidden]) { grid-template-columns: 1fr; justify-items: center; padding-bottom: 0; }
.support:has(.support-card[hidden]) .follow { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.support:has(.support-card[hidden]) .follow-title { width: 100%; text-align: center; margin: 0 0 4px; }

/* Jump across scenes (chapter tap): a soft dip instead of flying through. */
.film-phone, .film-cap, .film-pops { transition: opacity .26s var(--ease); }
.film-stage.is-cut .film-phone, .film-stage.is-cut .film-cap, .film-stage.is-cut .film-pops { opacity: 0; }

/* One button language everywhere, as in the hero: square-ish ink buttons
   with a hard offset shadow; secondary ones are outlined the same way. */
.nav-cta.btn-pop { box-shadow: 3px 3px 0 color-mix(in srgb, var(--fg) 35%, transparent); }
.follow-link { border-radius: 2px; border-color: color-mix(in srgb, var(--fg) 30%, transparent);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--fg) 22%, transparent); font-weight: 800; font-size: 16px; padding: 14px 18px;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.follow-link:hover { translate: -2px -2px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--fg) 30%, transparent); background: var(--panel); }
.follow-link:active { translate: 2px 2px; box-shadow: 1px 1px 0 color-mix(in srgb, var(--fg) 30%, transparent); }
.support-card .btn-pop { box-shadow: 4px 4px 0 color-mix(in srgb, var(--bg) 35%, transparent); }

/* Yours first, comic panels: white cards with an ink border and a hard
   shadow, each leaning its own way; the icon sits in an ink "pow". */
.local-grid { gap: 30px !important; margin-top: 54px !important; border: 0 !important; }
.local { border-top: 0 !important; }
.local-grid article { position: relative; padding: 34px 28px 30px !important; border-radius: 4px !important; background: #fff !important; color: #0b0b0b;
  border: 2.5px solid #0b0b0b; box-shadow: 8px 8px 0 color-mix(in srgb, var(--fg) 70%, transparent) !important; rotate: -1.2deg;
  transition: translate .3s var(--ease), box-shadow .3s var(--ease), rotate .4s var(--spring) !important; }
.local-grid article:nth-child(2) { rotate: 1deg; margin-top: 26px; }
.local-grid article:nth-child(3) { rotate: -.6deg; }
.local-grid article:hover { rotate: 0deg; translate: -3px -3px; box-shadow: 11px 11px 0 color-mix(in srgb, var(--fg) 70%, transparent) !important; }
.local-grid article::before { display: none; }
.local-grid h3 { font-size: clamp(22px, 2vw, 28px) !important; font-weight: 900; letter-spacing: -.03em; margin: 22px 0 10px !important; color: #0b0b0b; }
.local-grid p { color: #4a4a4a !important; font-size: 16px !important; line-height: 1.5; }
.local-ico { width: 62px !important; height: 62px !important; border-radius: 0 !important; background: #0b0b0b !important; color: #fff !important; rotate: -8deg;
  clip-path: polygon(50% 0, 61% 30%, 93% 16%, 74% 45%, 100% 62%, 68% 66%, 76% 100%, 50% 76%, 24% 100%, 32% 66%, 0 62%, 26% 45%, 7% 16%, 39% 30%); }
.local-ico svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; }
@media (max-width: 820px) { .local-grid article:nth-child(2) { margin-top: 0; } }
.local-grid article, .local-grid article + article { border: 2.5px solid #0b0b0b !important; padding-left: 28px !important; }
.follow-link svg.is-fill { fill: currentColor; stroke: none; width: 22px; height: 22px; margin: 0 2px; }