/* ═══════════════════════════════════════════════════════════════
   ExpertPitch — marketing site, rebuilt from measured tokens
   (see css/tokens.css and design/design-profile.json)
   ═══════════════════════════════════════════════════════════════ */
/* tokens.css is NOT @imported here — an @import is only discovered after
   this file parses, which serialises the two downloads. Both pages link it
   directly, immediately before this file, so the cascade order is unchanged.
   Any new page using site.css must link tokens.css first or every custom
   property below resolves to nothing. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  letter-spacing: var(--body-track);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent-30); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.accent { color: var(--accent); }

/* Screen-reader-only: used for the pricing live region, which announces the
   track change without the sighted layout shifting. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; position: relative; }

/* Material Symbols icon helper */
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  vertical-align: middle;
  user-select: none;
}

/* ── Buttons (measured: 999px pills, layered soft shadows) ──── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  border: 1px solid transparent;
  padding: 12px 26px;
  transition: transform 0.22s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-accent {
  background: var(--accent);
  color: #0a0a0a;
  box-shadow: var(--shadow-btn-accent);
}
.btn-accent:hover { box-shadow: 0 8px 32px -4px var(--accent-50), 0 2px 2px -1px rgba(0, 0, 0, 0.1); }

.btn-glass {
  background: var(--glass-50);
  color: var(--text);
  border-color: var(--border-10);
  box-shadow: var(--shadow-btn);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { border-color: var(--border-30); }

.btn-white { background: var(--text); color: #0a0a0a; box-shadow: var(--shadow-btn); }

.btn-lg { padding: 22px 48px; font-size: 16px; }   /* measured hero CTAs: 24px/48px box */
.btn-sm { padding: 9px 20px; font-size: 14px; }    /* measured nav pill: 9px/13px+ */

/* ── Nav (measured: 108px, transparent, not sticky) ─────────── */
.site-nav { height: var(--nav-h); display: flex; align-items: center; position: relative; z-index: 50; }
.site-nav .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.03em; }
.brand span { color: var(--accent); }
/* EP monogram (asset/Expert Pitch Logo.png). The artwork is a white block
   with the letters knocked out as transparency, and it is landscape
   (199×145) — so height is fixed and width follows, rather than the square
   box the old CSS lettermark used. */
.brand-mark {
  display: block;
  height: 30px;
  width: auto;
  border-radius: 6px;
}
.nav-links { display: flex; gap: 2px; margin-left: 8px; }
.nav-links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--white-08); }
.nav-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; }
/* Task Manager link inside .nav-links — only shown in the mobile hamburger. */
.nav-task-btn { display: none; }
/* Hamburger — hidden on desktop, revealed by the ≤1199px block below. */
.nav-toggle {
  display: none;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--glass-50);
  border: 1px solid var(--border-10);
  color: var(--text);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-toggle:hover { border-color: var(--border-30); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle .ms { font-size: 22px; }
.nav-cta .login-link { font-size: 14px; font-weight: 500; color: var(--text-muted); padding: 8px 12px; transition: color 0.2s; }
.nav-cta .login-link:hover { color: var(--text); }

/* ── Hero (measured: pt 100, 90px/-4.5px/99px, centered, 959w) ─ */
.hero { padding: 100px 0 64px; text-align: center; }
.hero h1 {
  font-size: var(--display-size);
  font-weight: 500;
  line-height: var(--display-leading);
  letter-spacing: var(--display-track);
  max-width: 960px;
  margin: 0 auto 28px;
}
.hero h1 .serif { font-size: 1.04em; }
.hero .sub {
  color: var(--text-muted);
  font-size: var(--lead-size);
  line-height: var(--lead-leading);
  letter-spacing: -0.02em;
  max-width: 560px;
  margin: 0 auto 40px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13px; color: var(--text-muted); letter-spacing: -0.02em; }

/* ── Sticky Track Buttons (pill shaped, horizontal) ─────── */
.sticky-tracks-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.85); /* Adjust based on theme bg */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-10);
}
.hero-tracks {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: none;
  margin: 0 auto;
}
.hero-track-btn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 100px;
  background: var(--surface);
  border: 2px solid var(--border-10);
  font-family: var(--font);
  color: var(--text-muted);
  cursor: pointer;
  transition:
    border-color 0.28s var(--ease),
    background 0.28s var(--ease),
    transform 0.22s var(--ease),
    box-shadow 0.28s var(--ease);
  overflow: hidden;
}
.hero-track-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px 260px at 50% 0%, var(--accent-30), transparent 72%);
  opacity: 0;
  transition: opacity 0.32s var(--ease);
  pointer-events: none;
}
.hero-track-btn:hover {
  transform: translateY(-3px);
  border-color: var(--border-30);
}
.hero-track-btn.is-active {
  border-color: var(--accent);
  color: var(--text);
  box-shadow:
    0 0 0 1px var(--accent-30),
    0 16px 48px -12px rgba(59, 130, 246, 0.35);
}
.hero-track-btn.is-active::before {
  opacity: 1;
}
.hero-track-btn .ms {
  position: relative;
  font-size: 20px;
  color: var(--text-muted);
  transition: color 0.24s var(--ease);
  margin-bottom: 0;
}
.hero-track-btn.is-active .ms {
  color: var(--accent);
}
.hero-track-label {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text);
}
.hero-track-desc {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 240px;
}
.hero-track-tag {
  background: var(--accent);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 4px 8px;
  line-height: 1.2;
}


/* ── Sections (measured rhythm: 64px bands) ─────────────────── */
section { padding: var(--section-y) 0; position: relative; }
.sec-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-10);
  background: var(--glass-40);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 7px 16px;
  margin-bottom: 20px;
}
.sec-head .eyebrow .ms { font-size: 15px; color: var(--accent); }
.sec-head h2 {
  font-size: var(--title-size);
  font-weight: 500;
  line-height: var(--title-leading);
  letter-spacing: var(--title-track);
  margin-bottom: 14px;
}
.sec-head p { color: var(--text-soft); font-size: var(--lead-size); line-height: var(--lead-leading); letter-spacing: -0.02em; }

/* ── Category chip strip (measured: py 48, pills) ───────────── */
.cats { padding: 48px 0; }
.cats .wrap { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-10);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-soft);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.22s var(--ease);
}
.cat-chip .ms { font-size: 17px; color: var(--accent); }
.cat-chip:hover { border-color: var(--accent-30); color: var(--text); transform: translateY(-2px); }

/* ── Marquee strips (observed ticker) ───────────────────────── */
.marquee { padding: var(--section-y) 0; overflow: hidden; }
.marquee .m-label { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 26px; letter-spacing: -0.02em; }
.m-track { display: flex; gap: 64px; width: max-content; animation: ticker var(--marquee-dur) linear infinite; }
.m-track span {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-60);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.m-track span .ms { font-size: 20px; color: var(--text-muted); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Work rows (measured: two collection rows, 16:9 cards) ──── */
.work { padding: var(--section-y) 0; }
/* Positioned on purpose. `.wrap` above these rows is `position: relative`
   (and `.sec-head` inside it gains a stacking context from `.reveal`'s
   transform), and a positioned element paints and hit-tests ABOVE an
   unpositioned in-flow sibling no matter which comes first in the markup.
   `.wrap` is capped at 1200px and centred while these rows are full-bleed, so
   an unpositioned `.work-rows` let that centred box swallow pointer events
   across the middle of the row while the spill-out at both edges stayed live
   -- "only the cards at the sides react". z-index puts the rows on top. */
.work-rows { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; margin-top: 48px; }
.work-row { overflow: hidden; }
/* The track holds one card set twice, and `ticker` scrolls it by -50%, so
   half the track must equal exactly one set or the row jumps at the seam.
   With flex `gap` it did not: 6 cards carry 5 gaps, but one set accounts for
   3, leaving -50% twelve pixels (half a gap) short of the loop point.
   Carrying the gap as margin-right on the cards instead makes every card
   advance width+gap, so half the track is exactly 3 cards and the seam is
   invisible. It is also width-agnostic, so the 809px breakpoint that drops
   cards to 300px needs no separate value. */
/* Duration is set per row rather than once, because the rows no longer all
   carry the same number of cards. `ticker` always travels -50% of the track,
   so a 20-card row covers more pixels than a 16-card one and a single
   duration would scroll it visibly faster. Scaling each duration to its own
   card count holds every row at the same ~69px/s. */
.w-track { display: flex; width: max-content; animation: ticker 58s linear infinite; } /* 18 cards */
[data-track-content="marketing"] .work-row:not(.reverse) .w-track,
[data-track-content="branding"] .w-track { animation-duration: 64s; }                  /* 20 cards */
[data-track-content="marketing"] .work-row.reverse .w-track { animation-duration: 52s; } /* 16 cards */
.work-row.reverse .w-track { animation-direction: reverse; }
/* Hold the row still while a pointer is on it. The row is a static box, so
   hovering IT is a hit-test no engine gets wrong; the track inside is the
   animated part. Freezing that track makes the cards static too, which is
   what makes the :hover rule below land on the right card in Safari -- and
   it lets people actually read a label instead of chasing it. */
.work-row:hover .w-track { animation-play-state: paused; }
.work-card {
  width: 420px;
  /* This is the row's gap, carried per card so the -50% loop lands exactly
     on the seam. See the note on .w-track above. */
  margin-right: 24px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-10);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.work-card .w-play {
  width: 54px; height: 54px;
  border-radius: var(--r-pill);
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #0a0a0a;
  box-shadow: var(--shadow-btn-accent);
  /* visibility rides along with a 0s duration so it flips instantly; the
     delay is 0 here so the mark comes BACK the moment the pointer leaves. */
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}
/* Two layers, both required. Layer 1 (:hover) is the no-JS floor, switched
   off by html.is-touch so a tap leaves no sticky hover. Layer 2 (.is-revealed,
   from js/site.js) tracks the cursor across the moving ticker, which :hover
   cannot. Never gate either on @media (hover)/(pointer) -- false in some
   desktop Safari. AGENTS.md, "Constraints that bite" #5. */
/* Ungated on purpose. This rule was `html:not(.is-touch) …`, which meant one
   wrong touch-detection anywhere killed hover completely -- the failure that
   recurred most across this bug's history. The sticky :hover it was guarding
   against costs nothing: on a touchscreen a tap uncovers the card anyway,
   which is the same result. `.is-touch` now only drives cursor:pointer. */
/* `visibility: hidden` as well as `opacity: 0`, deliberately.

   Opacity alone was leaving the blue disc on screen in Safari while the glyph
   inside it faded — the circle carries a background, a border-radius and a
   box-shadow, so it composites on a different path from the text child, and a
   transparency that does not reach that layer leaves the disc fully painted.
   Visibility is not a paint property: it takes the element out of rendering
   outright, disc, shadow and glyph together, so the hide cannot half-happen.

   The 0.3s delay lets the fade play first, so this still looks identical to
   Chrome; the base rule above has no delay, so the mark returns instantly. */
.work-card:hover .w-play,
.work-card.is-revealed .w-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

/* cursor:pointer makes iOS Safari treat the card as clickable so it
   synthesises a click. Invisible on a touchscreen. */
html.is-touch .work-card { cursor: pointer; }
.work-card .w-play .ms { font-size: 26px; }
.work-card .w-tag {
  position: absolute;
  bottom: 14px; left: 14px;
  background: var(--glass-50);
  border: 1px solid var(--border-10);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  backdrop-filter: blur(8px);
  /* Bound the pill: the longest label overruns a 300px card and the card is
     overflow:hidden, so it would clip mid-word. Wraps instead. */
  max-width: calc(100% - 28px);
  line-height: 1.35;
}
/* Gradients stay as the tint behind each card while its image decodes, and as
   the fallback if an image ever 404s. */
.w1 { background: linear-gradient(135deg, #101a30, #23479c); }
.w2 { background: linear-gradient(135deg, #0c1626, #1e3a8a); }
.w3 { background: linear-gradient(135deg, #0a1c2a, #0e7490); }
.w4 { background: linear-gradient(135deg, #141c36, #4547d8); }
.w5 { background: linear-gradient(135deg, #0d1a24, #155e75); }
.w6 { background: linear-gradient(135deg, #121a33, #3556c9); }
.w7 { background: linear-gradient(135deg, #0e1728, #2f5bb7); }
.w8 { background: linear-gradient(135deg, #0b1a2b, #12688a); }
.w9 { background: linear-gradient(135deg, #131b34, #3a49cf); }
.w10 { background: linear-gradient(135deg, #0c1a24, #17627a); }

/* Card artwork. `.w1`-`.w6` are reused by all three tracks, so each image is
   keyed off the track wrapper: one extra attribute selector out-specifies the
   gradient above and keeps the three sets independent. The art is 418x234,
   which is the 420px card at its 16/9 ratio, so `cover` only nudges it. */
.work-card {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

[data-track-content="video"] .w1 { background-image: url("../asset/work/video/motion-graphics.png"); }
[data-track-content="video"] .w2 { background-image: url("../asset/work/video/video-editing.png"); }
[data-track-content="video"] .w3 { background-image: url("../asset/work/video/2d-3d-animations.png"); }
[data-track-content="video"] .w4 { background-image: url("../asset/work/video/movement-design.png"); }
[data-track-content="video"] .w5 { background-image: url("../asset/work/video/videography.png"); }
[data-track-content="video"] .w6 { background-image: url("../asset/work/video/integrated-transitions.png"); }

[data-track-content="marketing"] .w1 { background-image: url("../asset/work/marketing/advertisements.png"); }
[data-track-content="marketing"] .w2 { background-image: url("../asset/work/marketing/content-strategy.png"); }
[data-track-content="marketing"] .w3 { background-image: url("../asset/work/marketing/community-building-pr.png"); }
[data-track-content="marketing"] .w4 { background-image: url("../asset/work/marketing/creative-content-ebooks.png"); }
[data-track-content="marketing"] .w5 { background-image: url("../asset/work/marketing/copywriting-editorial.png"); }
[data-track-content="marketing"] .w6 { background-image: url("../asset/work/marketing/e-commerce.png"); }
[data-track-content="marketing"] .w7 { background-image: url("../asset/work/marketing/infographics.png"); }
[data-track-content="marketing"] .w8 { background-image: url("../asset/work/marketing/insight-driven-posts.png"); }
[data-track-content="marketing"] .w9 { background-image: url("../asset/work/marketing/product-photography.png"); }

[data-track-content="branding"] .w1 { background-image: url("../asset/work/branding/logo.png"); }
[data-track-content="branding"] .w2 { background-image: url("../asset/work/branding/brand-driven-design.png"); }
[data-track-content="branding"] .w3 { background-image: url("../asset/work/branding/print-packaging.png"); }
[data-track-content="branding"] .w4 { background-image: url("../asset/work/branding/ux-design-ui.png"); }
[data-track-content="branding"] .w5 { background-image: url("../asset/work/branding/visual-language-design.png"); }
[data-track-content="branding"] .w6 { background-image: url("../asset/work/branding/concept-art-illustrations.png"); }
[data-track-content="branding"] .w7 { background-image: url("../asset/work/branding/3d-renders.png"); }
[data-track-content="branding"] .w8 { background-image: url("../asset/work/branding/backend-design.png"); }
[data-track-content="branding"] .w9 { background-image: url("../asset/work/branding/moodboarding.png"); }
[data-track-content="branding"] .w10 { background-image: url("../asset/work/branding/wireframes-interactive.png"); }

/* ── Process steps ──────────────────────────────────────────── */
.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
  background: var(--surface);
  border: 1px solid var(--border-07);
  border-radius: var(--r-lg);
  padding: 36px 28px 30px;
  position: relative;
  transition: border-color 0.25s var(--ease), transform 0.22s var(--ease);
}
.step-card:hover { border-color: var(--accent-30); transform: translateY(-3px); }
.step-card .s-num {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-btn-accent);
}
.step-card h3 { font-size: var(--h4-size); font-weight: 500; letter-spacing: var(--h4-track); line-height: 1.2; margin-bottom: 10px; }
.step-card p { color: var(--text-muted); font-size: 15px; line-height: 1.5; letter-spacing: -0.02em; }

/* ── Pricing ─────────────────────────────────────────────────
   Two switch levels: a track toggle above the grid (video / marketing)
   and a pack switcher inside every card. Markup comes from js/pricing.js —
   these rules are the only place the look is defined.
   ──────────────────────────────────────────────────────────── */

/* Track toggle — segmented pill, sliding thumb positioned by JS */
.pr-switch-wrap { display: flex; justify-content: center; margin: -18px 0 44px; }
.pr-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-pill);
  background: var(--glass-50);
  border: 1px solid var(--border-10);
  box-shadow: var(--shadow-btn);
  backdrop-filter: blur(10px);
}
.pr-thumb {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  width: 0;   /* JS measures the active tab and sets this */
  border-radius: var(--r-pill);
  background: var(--white-08);
  border: 1px solid var(--border-10);
  pointer-events: none;
}
/* Only animate once the first measurement has landed — otherwise the thumb
   visibly grows out of nothing on page load. */
.pr-switch.is-ready .pr-thumb { transition: transform 0.32s var(--ease), width 0.32s var(--ease); }
.pr-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  padding: 11px 26px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  transition: color 0.24s var(--ease);
}
.pr-tab:hover { color: var(--text-soft); }
.pr-tab.is-active { color: var(--text); }
.pr-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pr-save {
  background: var(--accent);
  color: #0a0a0a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: var(--r-pill);
  padding: 3px 9px;
  line-height: 1.2;
}

/* Card grid */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
/* Two-plan tracks (branding). Without this the pair sits in columns 1 and 2
   of the 3-column grid with a dead column on the right. Capped and centred so
   two cards don't stretch to the full 1200px container. Added by render() in
   js/pricing.js when a track has exactly two plans. */
.price-grid.is-two { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-left: auto; margin-right: auto; }

.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-07);
  border-radius: var(--r-card);
  padding: 30px 26px;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.22s var(--ease);
  animation: pcIn 0.42s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.pc:hover { transform: translateY(-4px); border-color: var(--border-10); }

/* Featured card: the reference uses a diagonal wash from the top-left
   corner. Re-hued from the source's violet to the site's blue. */
.pc.is-featured {
  border-color: var(--accent-30);
  background:
    radial-gradient(760px 460px at 0% 0%, rgba(59, 130, 246, 0.34), transparent 62%),
    linear-gradient(158deg, rgba(37, 99, 235, 0.18), rgba(13, 13, 13, 0) 58%),
    var(--surface);
  box-shadow: 0 30px 80px -46px rgba(59, 130, 246, 0.7);
}
.pc.is-featured:hover { border-color: var(--accent-50); }

.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-name { font-size: 25px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.pc-badge {
  flex-shrink: 0;
  background: var(--white-08);
  border: 1px solid var(--border-10);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-soft);
  text-align: center;
}
.pc.is-featured .pc-badge { background: rgba(255, 255, 255, 0.14); color: var(--text); border-color: var(--border-30); }

.pc-price { display: flex; align-items: baseline; gap: 7px; margin-top: 18px; }
.pc-price b { font-size: 44px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.pc-price span { font-size: 15px; font-weight: 500; color: var(--text-muted); letter-spacing: -0.02em; }
.pc-note { margin-top: 9px; font-size: 13.5px; color: var(--text-muted); letter-spacing: -0.02em; line-height: 1.45; }

/* Total bar */
.pc-total {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-07);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.02em;
}
.pc.is-featured .pc-total { background: rgba(255, 255, 255, 0.10); border-color: var(--border-10); }
.pc-total b { color: var(--text); font-weight: 700; }
.pc-total i { color: var(--text-muted); font-style: normal; }
.pc-total em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green);
  background: rgba(26, 255, 117, 0.12);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* Pack switcher inside the card */
.pc-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.pc-pack {
  border: 1px solid var(--border-07);
  background: rgba(255, 255, 255, 0.045);
  border-radius: var(--r-pill);
  padding: 11px 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.pc-pack:hover { color: var(--text); border-color: var(--border-30); }
.pc-pack.is-active { background: var(--text); color: #0a0a0a; border-color: transparent; box-shadow: var(--shadow-btn); }
.pc.is-featured .pc-pack.is-active { background: var(--accent); color: #0a0a0a; box-shadow: var(--shadow-btn-accent); }
.pc-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Feature rows */
.pc-feats { list-style: none; margin: 22px 0 0; flex: 1; display: flex; flex-direction: column; gap: 13px; }
.pc-feats li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.02em;
  line-height: 1.35;
}
.pc-feats .ms { font-size: 16px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.pc.is-featured .pc-feats .ms { color: var(--text); }

.pc-fine { margin-top: 22px; display: flex; flex-direction: column; gap: 3px; }
.pc-fine span {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.34);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.pc-fine span::before { content: '• '; }

.pc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.btn-full { width: 100%; }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-10);
}
.btn-ghost:hover { background: var(--white-08); border-color: var(--border-30); }

/* Motion: cards stagger in on render; a pack change only flips the numbers
   so the whole card doesn't replay its entrance. */
@keyframes pcIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pcFlip {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.pc.is-repriced { animation: none; }
.pc.is-repriced .pc-price b,
.pc.is-repriced .pc-total { animation: pcFlip 0.3s var(--ease) both; }

.pr-noscript {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.02em;
}
.pr-noscript p { margin-bottom: 10px; }
.pr-noscript a { color: var(--accent); text-decoration: underline; }

/* ── Feature band (measured: radius-50 fill container) ──────── */
.feature-band {
  border-radius: var(--r-band);
  border: 1px solid var(--border-07);
  background:
    radial-gradient(760px 380px at 50% -120px, var(--accent-30), transparent 68%),
    var(--surface);
  padding: 48px;
}
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
.feature-cell { padding: 4px 8px; }
.feature-cell .ms { font-size: 26px; color: var(--accent); margin-bottom: 14px; }
.feature-cell h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.feature-cell p { color: var(--text-muted); font-size: 14.5px; line-height: 1.5; letter-spacing: -0.02em; }

/* ── FAQ (measured: section bottom radius 96px) ─────────────── */
.faq-section {
  background: var(--surface);
  border-radius: 0 0 var(--r-faq) var(--r-faq);
  padding: var(--section-y) 0 88px;
}
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--bg);
  border: 1px solid var(--border-07);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.faq details[open] { border-color: var(--accent-30); }
.faq summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: 'add';
  font-family: 'Material Symbols Rounded';
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 20px; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; letter-spacing: -0.02em; }
/* Reference accordion motion, measured live: max-height 0.25s ease-out with
   opacity easing alongside. Native <details> can't transition open/close, so
   the reveal runs as a keyframe on open. Closing stays instant — that's a
   native-<details> limitation, not a styling choice. */
.faq details[open] .a { animation: faq-open 0.25s ease-out; }
@keyframes faq-open {
  from { opacity: 0; max-height: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 480px; padding-bottom: 20px; }
}

/* ── Gradient CTA footer (measured: 858px block + 250px bar) ── */
.cta-footer {
  min-height: 640px;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 56px 0 48px;
  background: var(--bg);
}
.cta-footer .wrap { width: 100%; }
.cta-footer h2 {
  font-size: var(--display-size);
  font-weight: 500;
  line-height: var(--display-leading);
  letter-spacing: var(--display-track);
  max-width: 900px;
  margin: 0 auto 22px;
}
.cta-footer p { color: var(--text-soft); font-size: var(--lead-size); line-height: var(--lead-leading); letter-spacing: -0.02em; max-width: 540px; margin: 0 auto 38px; }

/* Footer glow: a wide, shallow pool of light rising off the bottom edge of
   the page, fading upward into the flat background.

   Anchored at 50% 100% (the footer's own bottom-centre) rather than carried
   down from the CTA above, so it stands on its own: the three article pages
   have no .cta-footer and still get an identical footer, with no hard edge
   where the light would otherwise start.

   Radii are percentages, so the band scales with the footer instead of
   drifting when its content reflows. */
.foot-bar {
  padding: 48px 0 36px;
  background:
    radial-gradient(80% 46% at 50% 100%, var(--accent-50), transparent 100%),
    radial-gradient(125% 78% at 50% 116%, var(--accent-30), transparent 100%),
    var(--bg);
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 36px; margin-bottom: 44px; }
.foot-grid h3 { font-size: 13px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-muted); margin-bottom: 16px; }
.foot-grid a { display: block; color: var(--text-soft); font-size: 14.5px; letter-spacing: -0.02em; padding: 5px 0; transition: color 0.2s; }
.foot-grid a:hover { color: var(--text); }
.foot-grid p { color: var(--text-muted); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; }
.foot-wordmark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(56px, 9vw, 110px);
  text-align: center;
  line-height: 1;
  padding: 10px 0 34px;
  letter-spacing: -0.02em;
}
.foot-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-07);
  padding-top: 26px;
  font-size: 13px;
  /* --text-muted sat at 3.42:1 once the footer glow was added behind this
     row, which is the brightest part of it. --text-soft restores AA. */
  color: var(--text-soft);
  letter-spacing: -0.02em;
}

/* ── Product shots (measured: 773×515 = 3:2, centered column) ─ */
.walk { padding: 24px 0 0; }
.walk-block { max-width: 773px; margin: 0 auto; padding: 56px 24px; }
.walk-block .shot { margin-bottom: 34px; }
.walk-copy { text-align: center; }
.walk-copy .k {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.walk-copy h2 {
  font-size: var(--h2-size);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--h3-track);
  margin-bottom: 12px;
}
.walk-copy p { color: var(--text-soft); font-size: var(--lead-size); line-height: var(--lead-leading); letter-spacing: -0.01em; }
.walk-copy .mini { font-size: 14px; color: var(--text-muted); margin-top: 12px; }

.shot {
  border-radius: var(--r-md);
  border: 1px solid var(--border-10);
  background: var(--surface);
  box-shadow: var(--shadow-card), 0 0 90px rgba(101, 132, 224, 0.14);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.shot .s-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-07);
  background: var(--glass-40);
}
.shot .s-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--white-08); border: 1px solid var(--border-10); }
.shot .s-url {
  margin-left: 10px;
  flex: 1;
  max-width: 300px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-07);
  border-radius: var(--r-pill);
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 12px;
}
.shot .s-body { display: flex; min-height: 300px; }

/* mock mini-UI inside shots */
.mk-side { width: 150px; flex-shrink: 0; border-right: 1px solid var(--border-07); padding: 12px 9px; background: rgba(255, 255, 255, 0.015); }
.mk-logo { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; padding: 2px 6px 10px; border-bottom: 1px solid var(--border-07); margin-bottom: 9px; }
.mk-logo i { width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); display: inline-grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800; color: #0a0a0a; }
.mk-nav { display: flex; flex-direction: column; gap: 3px; }
.mk-nav i { height: 22px; border-radius: var(--r-pill); font-style: normal; font-size: 9.5px; color: var(--text-muted); display: flex; align-items: center; padding: 0 9px; letter-spacing: -0.01em; }
.mk-nav i.on { background: var(--accent-30); color: var(--text); font-weight: 600; }
.mk-main { flex: 1; padding: 13px 14px; min-width: 0; }
.mk-title { font-size: 11.5px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.mk-title .mk-btn { margin-left: auto; }
.mk-btn { display: inline-flex; align-items: center; background: var(--accent); color: #0a0a0a; font-size: 8.5px; font-weight: 700; border-radius: var(--r-pill); padding: 4px 11px; }
.mk-btn.ghost { background: var(--white-08); color: var(--text-soft); border: 1px solid var(--border-07); }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 10px; }
.mk-stat { background: var(--glass-40); border: 1px solid var(--border-07); border-radius: 9px; padding: 8px 9px; }
.mk-stat b { display: block; font-size: 13px; letter-spacing: -0.02em; }
.mk-stat span { font-size: 7.5px; color: var(--text-muted); }
.mk-rows { display: flex; flex-direction: column; gap: 6px; }
.mk-row { display: flex; align-items: center; gap: 9px; background: var(--glass-40); border: 1px solid var(--border-07); border-radius: 10px; padding: 8px 10px; font-size: 9.5px; }
.mk-thumb { width: 30px; height: 20px; border-radius: 5px; flex-shrink: 0; background: linear-gradient(135deg, #101a30, #23479c); }
.mk-thumb.b { background: linear-gradient(135deg, #0a1c2a, #0e7490); }
.mk-thumb.c { background: linear-gradient(135deg, #141c36, #4547d8); }
.mk-row b { font-size: 9.5px; font-weight: 600; letter-spacing: -0.01em; }
.mk-row small { display: block; font-size: 7.5px; color: var(--text-muted); }
.mk-pill { margin-left: auto; font-size: 7.5px; font-weight: 700; border-radius: var(--r-pill); padding: 2.5px 9px; flex-shrink: 0; }
.mk-pill.blue { background: var(--accent-30); color: var(--accent); }
.mk-pill.green { background: rgba(26, 255, 117, 0.13); color: var(--green); }
.mk-pill.amber { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.mk-pill.grey { background: var(--white-08); color: var(--text-soft); }
.mk-form { display: flex; flex-direction: column; gap: 7px; }
.mk-field { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border-07); border-radius: 8px; padding: 6px 10px; font-size: 8.5px; color: var(--text-muted); }
.mk-field b { color: var(--text); font-weight: 600; }
.mk-label { font-size: 7.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.mk-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-chip { border: 1px solid var(--border-07); border-radius: var(--r-pill); font-size: 7.5px; color: var(--text-soft); padding: 2.5px 9px; }
.mk-chip.on { background: var(--accent-30); border-color: transparent; color: var(--text); }
.mk-player {
  aspect-ratio: 16/9;
  border-radius: 10px;
  background:
    radial-gradient(200px 120px at 30% 25%, var(--accent-30), transparent 65%),
    radial-gradient(240px 140px at 80% 85%, rgba(14, 116, 144, 0.3), transparent 65%),
    linear-gradient(160deg, #0e1421 0%, #070b12 100%);
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 8px;
}
.mk-player i { width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--accent); display: grid; place-items: center; color: #0a0a0a; font-style: normal; font-size: 11px; padding-left: 2px; }
.mk-player .mk-vtag { position: absolute; top: 7px; left: 8px; font-size: 7px; font-weight: 700; color: var(--accent); background: rgba(0, 0, 0, 0.5); border-radius: var(--r-pill); padding: 2px 8px; }
.mk-scrub { height: 4px; border-radius: 2px; background: var(--white-08); position: relative; margin: 4px 0 8px; }
.mk-scrub::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; border-radius: 2px; background: var(--accent); }
.mk-chat { display: flex; flex-direction: column; gap: 6px; }
.mk-msg { display: flex; gap: 7px; align-items: flex-start; }
.mk-ava { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #1d3f8a, var(--accent-strong)); display: grid; place-items: center; font-size: 7px; font-weight: 800; color: #fff; font-style: normal; }
.mk-ava.e { background: linear-gradient(135deg, #0f766e, #34d399); }
.mk-msg div { background: var(--glass-40); border: 1px solid var(--border-07); border-radius: 9px; padding: 5px 10px; font-size: 8.5px; color: var(--text-soft); }
.mk-msg b { color: var(--text); font-size: 8.5px; }
.mk-ts { color: var(--accent); font-weight: 700; }
.mk-notifs { display: flex; flex-direction: column; gap: 6px; }
.mk-notif { display: flex; gap: 8px; align-items: center; background: var(--glass-40); border: 1px solid var(--border-07); border-radius: 10px; padding: 7px 10px; font-size: 8.5px; }
.mk-notif.unread { background: var(--accent-30); border-color: transparent; }
.mk-notif i { width: 20px; height: 20px; border-radius: 6px; background: var(--white-08); display: grid; place-items: center; font-style: normal; font-size: 9px; flex-shrink: 0; }
.mk-notif b { font-size: 8.5px; }
.mk-notif small { display: block; font-size: 7.5px; color: var(--text-muted); }
.mk-market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mk-mcard { background: var(--glass-40); border: 1px solid var(--border-07); border-radius: 10px; padding: 9px; font-size: 8.5px; }
.mk-mcard i { display: block; font-style: normal; font-size: 12px; margin-bottom: 5px; }
.mk-mcard b { display: block; font-size: 8.5px; margin-bottom: 2px; }
.mk-mcard small { color: var(--text-muted); font-size: 7.5px; display: block; margin-bottom: 6px; }
.mk-price { color: var(--accent); font-weight: 800; font-size: 9.5px; }
.mk-login { margin: 0 auto; max-width: 250px; background: var(--glass-50); border: 1px solid var(--border-10); border-radius: 14px; padding: 18px 16px; }
.mk-login .mk-title { font-size: 11px; margin: 8px 0 3px; letter-spacing: -0.02em; font-weight: 600; }
.mk-login p { font-size: 8px; color: var(--text-muted); margin-bottom: 10px; }
.mk-login .mk-btn { width: 100%; justify-content: center; margin-top: 8px; }
.mk-center { flex: 1; display: grid; place-items: center; padding: 26px; background: radial-gradient(300px 160px at 50% 0%, var(--accent-30), transparent 70%); }

/* ── Reveal motion (observed Framer appear pattern) ─────────── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .m-track, .w-track, .faq details[open] .a { animation: none; }
  .pc, .pc.is-repriced .pc-price b, .pc.is-repriced .pc-total { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive (measured breakpoints: 809 / 1199) ──────────── */
/* The featured pricing card sits slightly proud of its neighbours, but only
   while all three are on one row — once they wrap it just looks misaligned. */
@media (min-width: 1200px) {
  .pc.is-featured { margin: -14px 0; }
}
@media (max-width: 1199px) {
  .steps-row, .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .price-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  /* The header has to stay put on mobile: the hamburger is the only way to
     reach the nav links, and .site-nav is not sticky by default — scroll a
     little and the menu button was gone off the top of the screen.
     z-index beats .sticky-tracks-wrap (100) so the dropdown opens in front
     of the track bar rather than behind it. */
  .site-nav {
    position: sticky;
    top: 0;
    height: 84px;
    z-index: 110;
    background: rgba(10, 10, 10, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  /* The track bar pins below the header instead of underneath it. */
  .sticky-tracks-wrap { top: 84px; }
  /* Anchor jumps from the menu must clear the pinned header + track bar,
     or the section you tapped lands underneath them. */
  html { scroll-padding-top: 156px; }
  .nav-toggle { display: inline-grid; }
  /* The links used to be display:none here with nothing to replace them, so
     Work / Process / Platform / Pricing / FAQ were unreachable below 1200px.
     They now live behind the hamburger. Keep the 1200 boundary in sync with
     the resize handler in js/site.js, which resets the open state. */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 24px;
    left: 24px;
    flex-direction: column;
    gap: 2px;
    margin-left: 0;
    padding: 10px;
    border-radius: var(--r-lg);
    background: rgba(13, 13, 13, 0.96);
    border: 1px solid var(--border-10);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(16px);
    z-index: 60;
    /* A landscape phone is ~375px tall and the panel is ~240px; leave room
       for the header above it rather than letting it run off-screen. */
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 12px 14px; font-size: 15px; border-radius: var(--r-md); }
  /* Task Manager button: shown at the bottom of the hamburger menu. */
  .nav-task-btn {
    display: flex !important;
    margin-top: 8px;
    padding-top: 14px !important;
    border-top: 1px solid var(--border-10);
    font-weight: 600 !important;
    color: var(--accent) !important;
  }
  /* Hide the desktop copy in nav-cta on mobile. */
  .nav-task-desktop { display: none; }
  /* Lock body scroll while the hamburger panel is open. */
  body.menu-open { overflow: hidden; }
}
@media (max-width: 809px) {
  .steps-row, .price-grid, .feature-grid { grid-template-columns: 1fr; }
  /* .price-grid.is-two is (0,2,0) and would otherwise out-specify the line
     above, holding the two branding cards in 154px columns on a phone
     instead of letting them stack. Matched specificity, so it stacks. */
  .price-grid.is-two { grid-template-columns: 1fr; max-width: none; }
  /* These were card-sized (24px padding, 19px label), which made the sticky
     bar 118px tall — 14% of a phone screen, permanently. Back to a compact
     pill, sized down from the desktop rule rather than up. */
  .hero-tracks { max-width: 100%; gap: 8px; }
  .hero-track-btn { padding: 8px 14px; gap: 6px; }
  .hero-track-btn .ms { font-size: 17px; }
  .hero-track-label { font-size: 13.5px; }
  .hero-track-tag { font-size: 9.5px; padding: 3px 6px; }
  .hero-track-desc { font-size: 12.5px; }
  .sticky-tracks-wrap { padding: 8px 0; top: 72px; }
  .site-nav { height: 72px; }
  html { scroll-padding-top: 140px; }
  .nav-links { right: 16px; left: 16px; }
  .pc { padding: 26px 20px; }
  .pc-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pc-price b { font-size: 40px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  section { padding: 48px 0; }
  .hero { padding: 64px 0 44px; }
  .btn-lg { padding: 18px 36px; font-size: 15px; }
  .work-card { width: 300px; }
  .feature-band { padding: 28px 20px; border-radius: var(--r-card); }
  .faq-section { border-radius: 0 0 48px 48px; }
  .cta-footer { min-height: 480px; }
  .shot .s-body { min-height: 0; }
  .mk-side { display: none; }
  .mk-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-market { grid-template-columns: 1fr 1fr; }
  .walk-block { padding: 40px 20px; }
}

/* ── Book-a-meeting FAB ──────────────────────────────────────
   Fixed pill, bottom-right, that links straight out to Calendly.

   A plain anchor on purpose. Calendly's popup widget needs
   assets.calendly.com in script-src and calendly.com in frame-src —
   a third-party script with full DOM access on every page, for a
   modal. A new tab costs one click and leaves the CSP untouched.

   z-index clears .sticky-tracks-wrap (100). It's bottom-anchored, so
   it never meets the mobile nav panel (60) sitting at the top. */
.book-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  background: var(--accent);
  border: 1px solid transparent;
  box-shadow: var(--shadow-btn-accent);
  white-space: nowrap;
  /* Hidden until the hero scrolls away — js/site.js adds .is-in.
     visibility (not just opacity) because an opacity:0 link still takes
     keyboard focus, which would put an invisible tab stop over the page. */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.25s var(--ease), visibility 0s linear 0.3s;
}
.book-fab.is-in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.book-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px -4px var(--accent-50), 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}
.book-fab:active { transform: translateY(0); }
.book-fab:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.book-fab .ms { font-size: 18px; }

@media (max-width: 809px) {
  .book-fab { right: 16px; bottom: 16px; padding: 11px 18px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .book-fab {
    transform: none;
    transition: opacity 0.2s linear, visibility 0s linear 0.2s;
  }
  .book-fab.is-in { transform: none; transition-delay: 0s; }
  .book-fab:hover, .book-fab:active { transform: none; }
}

/* ── Answer pages (video-editing-cost, youtube-editing-turnaround,
      video-editor-vs-agency) ────────────────────────────────────
   Scoped to .answer so nothing here can reach index.html or
   platform.html. Long-form prose needs a narrower measure than the
   1200px marketing container — ~68 characters is the readable range. */
.answer { max-width: 760px; margin: 0 auto; padding: 8px 0 72px; }
.answer h2 {
  font-size: var(--h2-size, 34px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.18;
  margin: 56px 0 16px;
}
.answer h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 32px 0 10px; }
.answer p { color: var(--text-soft); font-size: 17px; line-height: 1.65; letter-spacing: -0.01em; margin-bottom: 16px; }
.answer ul, .answer ol { color: var(--text-soft); font-size: 17px; line-height: 1.65; margin: 0 0 18px; padding-left: 22px; }
.answer li { margin-bottom: 9px; }
.answer strong { color: var(--text); font-weight: 700; }
.answer a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.answer-lede { font-size: 19px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }

/* Price/comparison tables. Wide content scrolls inside its own box so the
   page body never scrolls sideways on a phone. */
.answer-table-wrap { overflow-x: auto; border: 1px solid var(--border-10); border-radius: var(--r-lg); margin: 0 0 22px; }
.answer-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 15px; }
.answer-table th {
  text-align: left; padding: 13px 16px; font-weight: 500; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-10); background: var(--glass-40);
}
.answer-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-07); color: var(--text-soft); }
.answer-table tr:last-child td { border-bottom: 0; }
.answer-table td:first-child { color: var(--text); }
.answer-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.answer-cta {
  border: 1px solid var(--border-10); background: var(--glass-40);
  border-radius: var(--r-lg); padding: 26px 28px; margin: 40px 0 0;
}
.answer-cta p { margin-bottom: 16px; }

@media (max-width: 720px) {
  .answer h2 { font-size: 26px; margin-top: 40px; }
  .answer p, .answer ul, .answer ol { font-size: 16px; }
}