/* =========================================================
   getsitetape — marketing site
   A white page and three colours that tell the product's story:
     blue   the product: the recording, the playhead, every action
     red    what it finds: rage clicks, errors, drop-offs
     green  what you get: the fix, the sale, "safe to install"
   Ink is for text and the one dark panel; greys are tints of ink.
   Type is Mona Sans, with JetBrains Mono for code and timestamps.

   Colour is used in whole areas, not only in details, and always
   flat: an ink band for the problem, the product mounted on fields of
   blue, red, green and ink, a green band for privacy, a blue panel
   for the price. No gradients, glows or patterns.

   Motion: transform and opacity only, one easing curve, things move
   once as they scroll in, and loops stop while off screen. Nothing
   moves because a page is opening: it opens where it is going to be,
   and what is on screen then arrives once, from the top down. All of
   it is switched off for visitors who ask for reduced motion.
   ========================================================= */

/* Fonts are served from this site (assets/fonts), not from a font service:
   one less connection before the page can draw, and no visitor data leaves
   for a third party. Both are variable fonts, one file for all weights. */
@font-face {
  font-family: "Mona Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/mona-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {   /* the rupee sign and other extended characters; fetched only when a page uses them */
  font-family: "Mona Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../assets/fonts/mona-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --white: #ffffff;
  --ink: #0b1220;
  --ink-2: #3d4759;        /* body text, 9.4:1 on white */
  --muted: #5b6577;        /* secondary text, 5.9:1 */
  --faint: #7a8597;        /* large or non-text only */
  --line: #e4e7ec;
  --line-2: #d0d5dd;
  --surface: #f6f7f9;

  /* each colour: the vivid tone for shapes, a darker one for text, two tints */
  --blue: #1f5bff;
  --blue-dark: #1746d6;
  --blue-400: #6fa0ff;
  --blue-100: #dce8ff;
  --blue-50: #eef4ff;

  --green: #0e9f5b;
  --green-bright: #12b76a;
  --green-text: #067647;
  --green-100: #d1fadf;
  --green-50: #ecfdf3;

  --red: #f04438;
  --red-600: #d92d20;
  --red-text: #b42318;
  --red-100: #fee4e2;
  --red-50: #fef3f2;


  --r-s: 8px;
  --r: 12px;
  --r-l: 16px;
  --r-xl: 24px;
  --shadow-frame: 0 1px 2px rgba(11, 18, 32, .05), 0 14px 28px -10px rgba(11, 18, 32, .12), 0 36px 72px -28px rgba(11, 18, 32, .2);
  --shadow-pop: 0 1px 2px rgba(11, 18, 32, .06), 0 12px 32px -10px rgba(11, 18, 32, .2);
  --shadow-card: 0 1px 2px rgba(11, 18, 32, .04), 0 6px 16px -6px rgba(11, 18, 32, .08);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --container: 1200px;
  --gutter: 32px;
  --header-h: 68px;
  --section: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
/* Links within a page glide. main.js adds the class once the page has opened, so a page that
   opens at an #anchor is already there when it appears instead of scrolling down to it. */
html.is-settled { scroll-behavior: smooth; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--ink-2); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; text-wrap: balance; }
code, .mono { font-family: var(--mono); font-size: .92em; }
::selection { background: var(--blue); color: var(--white); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.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; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; padding: 10px 16px; border-radius: var(--r-s); background: var(--ink); color: var(--white); font-weight: 600; }
.skip:focus { top: 12px; }

/* Changing page, where the browser can: the old page fades out and the new one fades in after
   it, so the two never show through each other. The header is a layer of its own and holds
   still in between. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  .nav__inner { view-transition-name: site-nav; }
  ::view-transition-old(root) { animation: pageOut .14s ease-in both; }
  ::view-transition-new(root) { animation: pageIn .24s ease-out .1s both; }
  ::view-transition-group(site-nav) { animation-duration: .3s; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@keyframes pageOut { to { opacity: 0; } }
@keyframes pageIn { from { opacity: 0; } }

/* ---------- Type ---------- */
.h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.035em; font-weight: 600; }
.h2 { font-size: clamp(30px, 3.7vw, 46px); line-height: 1.08; letter-spacing: -.03em; }
.h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; letter-spacing: -.024em; }
.h4 { font-size: 18px; line-height: 1.3; letter-spacing: -.012em; }
.lead { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.55; color: var(--ink-2); }
.small { font-size: 14px; color: var(--muted); }
.hot { color: var(--red-text); }
.good { color: var(--green-text); }
.nowrap { white-space: nowrap; }

.kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--blue); }
.kicker--red { color: var(--red-text); }
.kicker--green { color: var(--green-text); }
.kicker--ink { color: var(--ink); }
.kicker--pill { padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid var(--blue-100); box-shadow: 0 1px 2px rgba(11, 18, 32, .04); font-size: 13.5px; color: var(--blue-dark); }

/* one phrase per heading may carry the accent colour */
.hl, .hl .wi { color: var(--blue); }

/* the recording dot */
.rec { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.rec::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: recPulse 1.8s ease-out infinite; }
@keyframes recPulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.dot--red { background: var(--red); }
.dot--green { background: var(--green-bright); }

/* ---------- Buttons and links ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px; border-radius: var(--r);
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: transform .35s var(--ease), border-color .2s, color .2s, background-color .2s;
}
.btn svg { flex: none; transition: transform .35s var(--ease); }
.btn:hover .icon-arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--blue); color: var(--white); }
.btn--primary:hover { transform: translateY(-2px); background: var(--blue-dark); }
.btn--ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue-dark); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { transform: translateY(-2px); background: var(--blue-50); }
.btn--outline { color: var(--white); border: 1px solid rgba(255, 255, 255, .32); }
.btn--outline:hover { transform: translateY(-2px); border-color: var(--white); background: rgba(255, 255, 255, .08); }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14.5px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; transform: none; }

.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.link svg { transition: transform .35s var(--ease); }
.link:hover { color: var(--blue-dark); }
.link:hover svg { transform: translateX(4px); }
.textlink { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.textlink:hover { color: var(--blue-dark); }

/* =========================================================
   MOTION
   Things start a little lower and fade up once, as they come into
   view. The hiding class (.anim) is set in the page's <head>, before
   the first paint, so nothing is shown and then taken away; the same
   script takes it back if main.js never arrives, so nothing can stay
   hidden. Hero items use a plain CSS animation.
   --i staggers the members of a group; --d is the extra wait main.js
   gives to what is already on screen as the page opens.
   ========================================================= */
@media screen and (prefers-reduced-motion: no-preference) {
  .anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + var(--d, 0ms)); }
  .anim [data-reveal="scale"] { transform: translateY(26px) scale(.96); }
  .anim [data-reveal="left"] { transform: translateX(-32px); }
  .anim [data-reveal="right"] { transform: translateX(32px); }
  .anim [data-reveal].is-in { opacity: 1; transform: none; }

  /* headings rise word by word */
  .anim [data-words]:not(.is-in) { opacity: 0; }
  .anim [data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
  .anim [data-words] .wi { display: inline-block; transform: translateY(112%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 40ms + var(--d, 0ms)); }
  .anim [data-words].is-in .wi { transform: none; }

  /* if the hiding has to be applied to a page that is already showing, it is applied in one cut */
  .anim-cut [data-reveal], .anim-cut [data-words] .wi, .anim-cut [data-live] *, .anim-cut .steps::after, .anim-cut .spark * { transition: none !important; }

  /* the top of each page arrives in order as it loads */
  [data-in] { animation: riseIn .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
  [data-in="visual"] { animation-name: visualIn; animation-duration: 1.2s; }
}
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } }
@keyframes visualIn { from { opacity: 0; transform: perspective(1400px) translateY(40px) rotateX(9deg) scale(.96); } }
@keyframes floatY { 50% { transform: translateY(-7px); } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ring { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-100%); } }

/* =========================================================
   HEADER
   Full width at the top of the page; once you scroll it lifts into a
   floating bar, with a line that fills as you move down the page.
   The bar is always there, just not shown at the top: lifting is a
   fade and a small slide, so nothing on the page is laid out again.
   ========================================================= */
.nav { position: sticky; top: 0; z-index: 100; }
.nav__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); transition: transform .45s var(--ease); }
.nav::before { content: ""; position: absolute; inset: 8px max(12px, calc((100% - var(--container) - 24px) / 2)) -16px; z-index: -1; border-radius: var(--r-l); border: 1px solid rgba(208, 213, 221, .7); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 10px 30px -14px rgba(11, 18, 32, .28); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
.nav.is-scrolled::before { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav.is-scrolled .nav__inner { transform: translateY(8px); }
.nav.is-open::before { inset: 0; border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; opacity: 1; visibility: visible; transform: none; transition: none; }
/* until the page has opened, the header takes its place without moving there */
html:not(.is-settled) .nav__inner, html:not(.is-settled) .nav::before { transition: none; }
.nav__progress { position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__progress i { display: block; height: 100%; background: var(--blue); transform-origin: left center; transform: scaleX(0); }

.logo { display: inline-flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.logo b { font-weight: 700; color: var(--blue); }
.logo img { transition: transform .6s var(--ease); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }
.nav__links { display: flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 500; }
.nav__links a { position: relative; padding: 8px 14px; border-radius: var(--r-s); color: var(--ink-2); text-align: center; transition: color .2s; }
/* room for the label in bold is always kept, so marking the current page moves nothing */
.nav__links a[data-text]::before { content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; user-select: none; }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: right center; transition: transform .4s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__links .nav__extra { display: none; }
.nav__cta { display: flex; align-items: center; gap: 8px; }
.nav__login { padding: 8px 13px; border-radius: var(--r-s); font-size: 15px; font-weight: 500; color: var(--ink); transition: background-color .2s; }
.nav__login:hover { background: var(--surface); }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: var(--r-s); place-items: center; color: var(--ink); }
.nav__burger:hover { background: var(--surface); }
.nav__burger .i-close, .nav.is-open .nav__burger .i-menu { display: none; }
.nav.is-open .nav__burger .i-close { display: block; }

/* =========================================================
   HOME HERO
   The top of the page sits on a flat tint of blue. The product
   plays on the right and leans a little toward the pointer.
   ========================================================= */
.hero { position: relative; isolation: isolate; padding: clamp(36px, 4.6vw, 64px) 0 clamp(64px, 7vw, 100px); }
.hero__fx, .phero__fx { position: absolute; inset: -80px 0 0; z-index: -1; background: #f2f6ff; pointer-events: none; }

.hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.hero__title { margin-top: 20px; }
.hero__sub { margin-top: 22px; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 14.5px; color: var(--ink-2); }
.hero__points li { display: flex; align-items: center; gap: 7px; }
.hero__points svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green-100); color: var(--green-text); }

/* the word that is the problem, underlined by hand */
.mark { position: relative; color: var(--red-600); white-space: nowrap; }
.mark__line { position: absolute; left: -1%; bottom: .03em; width: 102%; height: .17em; overflow: visible; }
.mark__line path { fill: none; stroke: var(--red); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .mark__line path { animation: draw 1s var(--ease) .9s both; }
}
@keyframes draw { from { stroke-dashoffset: 1; } }

.hero__visual { position: relative; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero__visual > .player { transform: perspective(1600px) rotateX(calc(var(--py, 0) * -1.6deg)) rotateY(calc(var(--px, 0) * 2.2deg)); transition: transform .8s var(--ease); }
}

/* notes that appear around the player as the visit plays */
.toast { position: absolute; z-index: 5; pointer-events: none; transform: translate3d(calc(var(--px, 0) * var(--depth, 10px)), calc(var(--py, 0) * var(--depth, 10px)), 0); transition: transform .5s var(--ease); }
.toast__in { display: flex; align-items: center; gap: 11px; padding: 10px 15px 10px 11px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 1.35; white-space: nowrap; animation: floatY 6s ease-in-out infinite; }
.toast b { display: block; font-weight: 600; color: var(--ink); }
.toast small { display: block; font-size: 11.5px; color: var(--muted); }
.toast__icon { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--white); }
.toast--rec { left: -20px; top: -20px; --depth: 6px; }
.toast--rec .toast__in { padding: 8px 14px; gap: 9px; border-radius: 999px; font-weight: 500; color: var(--ink-2); }
.toast--red { right: -24px; top: 58px; --depth: 14px; }
.toast--red .toast__in { animation-delay: -2s; border-color: var(--red-100); }
.toast--red .toast__icon { background: var(--red); }
.toast--green { left: -30px; bottom: -22px; --depth: 18px; }
.toast--green .toast__in { animation-delay: -4s; border-color: var(--green-100); }
.toast--green .toast__icon { background: var(--green); }

/* ---------- Works-on strip: the logos move ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip + .strip { border-top: 0; }
.strip__inner { display: flex; align-items: center; gap: 14px 40px; padding-block: 24px; }
.strip__label { flex: none; font-size: 14px; color: var(--muted); }
.strip__list { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
.strip__list li, .marquee li { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); white-space: nowrap; }
.strip__list svg, .marquee svg { color: var(--muted); transition: color .3s; }
.marquee li:hover svg { color: var(--blue); }
.marquee { display: flex; flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__row { display: flex; flex: none; align-items: center; gap: 46px; padding-right: 46px; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }

/* =========================================================
   THE REPLAY PLAYER (hero demo). Mirrors the dashboard's player:
   transport on top, the page on the left, the insight rail on the right.
   The screen is a size container, so the fake page scales as one piece.
   ========================================================= */
.player { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-frame); overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.player__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.player__play { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: var(--white); transition: transform .3s var(--ease), background-color .2s; }
.player__play:hover { transform: scale(1.08); background: var(--blue-dark); }
.player__play .i-play, .player.is-paused .player__play .i-pause { display: none; }
.player.is-paused .player__play .i-play { display: block; }
.player__time { flex: none; min-width: 78px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.player__track { position: relative; flex: 1; height: 22px; cursor: pointer; }
.player__track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 6px; background: #e9ecf1; }
.player__fill { position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 6px; background: var(--blue); transform-origin: left center; transform: scaleX(.64); }
.player__mark { position: absolute; top: 11px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--white); }
.player__mark--hot { background: var(--red); }
.player__handle { position: absolute; inset: 0; pointer-events: none; transform: translateX(64%); }
.player__handle i { position: absolute; left: 0; top: 11px; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--white); border: 3px solid var(--blue); box-shadow: 0 1px 5px rgba(11, 18, 32, .28); }
.player__speeds { display: flex; gap: 4px; flex: none; }
.player__speeds button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--ease); }
.player__speeds button:hover { transform: scale(1.1); border-color: var(--blue); color: var(--blue); }
.player__speeds button.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }

.player__body { display: grid; grid-template-columns: minmax(0, 1fr) 226px; }
.player__stage { display: grid; align-content: center; padding: 14px; background: var(--surface); }
.vp { border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); overflow: hidden; box-shadow: 0 8px 20px -12px rgba(11, 18, 32, .25); }
.vp__chrome { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--surface); }
.vp__dots { display: flex; gap: 4px; }
.vp__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.vp__url { flex: 1; min-width: 0; padding: 3px 9px; border-radius: 5px; background: var(--white); border: 1px solid var(--line); font-size: 10.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vp__screen { position: relative; aspect-ratio: 16 / 10.6; overflow: hidden; container-type: inline-size; cursor: pointer; }

/* the recorded page: every size is relative to the screen's width */
.shop { position: absolute; inset: 0; font-size: 11px; font-size: 2.9cqw; color: var(--ink); }
.shop__nav { display: flex; align-items: center; gap: 5%; height: 12%; margin: 0 5%; border-bottom: 1px solid var(--line); font-size: .86em; color: var(--muted); }
.shop__nav b { font-size: 1.18em; letter-spacing: -.01em; color: var(--ink); }
.shop__nav span:last-child { margin-left: auto; }
.shop__page { position: absolute; left: 5%; right: 5%; top: 12%; height: 88%; }
.shop__main { display: grid; grid-template-columns: 44% 1fr; gap: 6%; padding-top: 5%; height: 100%; }
.shop__photo { align-self: start; aspect-ratio: 1 / 1; border-radius: .7em; background: var(--blue-50); border: 1px solid var(--line); display: grid; place-items: center; }
.shop__photo svg { width: 64%; height: auto; }
.shop__name { font-size: 1.42em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.shop__meta { margin-top: .25em; font-size: .86em; color: var(--muted); }
.shop__price { margin-top: .7em; font-size: 1.3em; font-weight: 600; }
.shop__label { margin-top: .9em; font-size: .82em; color: var(--muted); }
.shop__sizes { display: flex; gap: .5em; margin-top: .35em; }
.shop__sizes span { position: relative; flex: 1; padding: .45em 0; border: 1px solid var(--line-2); border-radius: .45em; text-align: center; font-size: .86em; font-weight: 600; color: var(--ink-2); }
.shop__sizes i { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--blue); background: rgba(31, 91, 255, .06); opacity: 0; }
.shop__buy { margin-top: 1.1em; padding: .82em 0; border-radius: .55em; background: var(--ink); color: var(--white); text-align: center; font-size: .96em; font-weight: 600; }
.shop__reviews { position: absolute; left: 0; right: 0; top: 104%; }
.shop__reviews b { font-size: 1.1em; }
.shop__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; margin-top: 3%; }
.shop__cards span { padding: 6% 7%; border: 1px solid var(--line); border-radius: .6em; font-size: .8em; line-height: 1.45; color: var(--muted); }
.shop__cards em { display: block; margin-bottom: .3em; font-style: normal; letter-spacing: .12em; color: var(--ink); }

.tap { position: absolute; z-index: 3; width: 9cqw; height: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%; border: 2px solid var(--blue); background: rgba(31, 91, 255, .16); opacity: 0; pointer-events: none; }
.tap--hot { border-color: var(--red); background: rgba(240, 68, 56, .2); }
.cursor { position: absolute; inset: 0; z-index: 4; pointer-events: none; will-change: transform; transform: translate(74%, 79%); }
.cursor svg { position: absolute; left: 0; top: 0; width: 5.4cqw; min-width: 16px; height: auto; margin: -.4cqw 0 0 -.6cqw; filter: drop-shadow(0 2px 3px rgba(11, 18, 32, .3)); }

.rail { display: flex; flex-direction: column; border-left: 1px solid var(--line); min-width: 0; }
.rail__who { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rail__avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); color: var(--blue); }
.rail__who b { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rail__who small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__who > div { min-width: 0; }
.rail__label { padding: 11px 14px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ins { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; width: 100%; padding: 6px 14px; text-align: left; font-size: 12px; line-height: 1.4; color: var(--ink-2); transition: background-color .2s; }
button.ins:hover { background: var(--surface); }
.ins__t { padding-top: 1px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.ins--hot { color: var(--red-text); }
.ins--hot .ins__t { color: var(--red-text); }
.rail__tabs { display: flex; gap: 5px; margin-top: auto; padding: 10px 14px 7px; border-top: 1px solid var(--line); }
.rail__tabs span { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.rail__tabs .is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.rail__log { display: grid; gap: 5px; padding: 0 14px 13px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.rail__log div { display: flex; gap: 8px; }
.rail__log span { flex: none; color: var(--muted); }
.rail__log b { font-weight: 500; color: var(--red-text); }
.rail__log b.ok { color: var(--green-text); }
.rail__log .is-err { color: var(--red-text); }
.rail__log .is-err span { color: var(--red-text); }

/* =========================================================
   SECTIONS AND BANDS
   Most of the page is white. A band is a rounded panel of colour,
   set in from the edges, for the parts of the story that carry
   weight: ink for the problem, a tint for setup, green for safety.
   ========================================================= */
.section { position: relative; padding-block: var(--section); }
.section--line { border-top: 1px solid var(--line); }
.section--flush { padding-top: 0; }
.section__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head .kicker { margin-bottom: 14px; }
.section__head .lead { margin-top: 18px; color: var(--muted); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lead { max-width: 34em; margin-inline: auto; }
.section__more { margin-top: 44px; }

.band { position: relative; isolation: isolate; margin: clamp(16px, 2vw, 28px) clamp(8px, 1.6vw, 24px); padding-block: var(--section); border-radius: clamp(24px, 3.2vw, 44px); overflow: clip; }

.band--ink { background: var(--ink); color: #b9c3d3; }
.band--ink :is(.h2, .h3, .h4) { color: var(--white); }
.band--ink .section__head .lead { color: #aab5c6; }
.band--ink .hl, .band--ink .hl .wi { color: #8fb6ff; }
.band--ink .kicker { color: #ff9a90; }
.band--tint { background: #f3f6fd; }
.band--green { background: var(--green-50); }

/* ---------- Three cases: the number, the scene, the reason ----------
   Each card is three rows, and the rows line up across the cards. */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.case { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; border: 1px solid rgba(255, 255, 255, .11); border-radius: var(--r-xl); background: rgba(255, 255, 255, .05); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.case:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .26); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9); }
@supports not (grid-template-rows: subgrid) { .case { display: flex; flex-direction: column; } }
.case__says { display: flex; flex-direction: column; padding: 22px 24px 18px; }
.case__label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; color: #93a0b6; }
.case__label--red { color: #ff9a90; }
.case__says p { font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: var(--white); }
.case__says small { display: block; margin-top: 4px; font-size: 13.5px; color: #93a0b6; }
.case__shows { padding: 20px 24px 24px; }
.case__shows p { font-size: 15.5px; color: #e6ebf3; }
.gap__note { margin-top: 18px; font-size: 13px; color: #93a0b6; }

/* the number, as analytics draws it: a line with nothing behind it */
.spark { display: block; width: 100%; height: auto; margin-top: auto; padding-top: 16px; overflow: visible; }
.spark path { fill: none; stroke: #6b7a94; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.spark line { stroke: #46536b; stroke-width: 1; stroke-dasharray: 3 3; }
.spark rect { fill: #46536b; transform-box: fill-box; transform-origin: center bottom; }
.spark circle, .spark .is-hot { fill: var(--red); }
@media screen and (prefers-reduced-motion: no-preference) {
  .spark path { transition: stroke-dashoffset 1.5s var(--ease) .35s; }
  .spark circle { transition: opacity .4s 1.5s, scale .6s var(--spring) 1.5s; transform-box: fill-box; transform-origin: center; }
  .spark rect { transition: transform .9s var(--ease) calc(var(--n, 0) * 140ms + .35s); }
  .anim .case:not(.is-in) .spark path { stroke-dashoffset: 1; }
  .anim .case:not(.is-in) .spark circle { opacity: 0; scale: .2; }
  .anim .case:not(.is-in) .spark rect { transform: scaleY(0); }
}

/* small moving pictures of what the recording shows */
.scene { position: relative; aspect-ratio: 16 / 9.4; margin-inline: 12px; border-radius: var(--r-l); background: #eef2f9; overflow: hidden; font-size: 10px; container-type: size; box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .8); }
.scene * { animation-play-state: paused !important; }
.scene.is-live * { animation-play-state: running !important; }
.scene__time { position: absolute; z-index: 3; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 999px; background: rgba(11, 18, 32, .88); font-family: var(--mono); font-size: 10.5px; color: var(--white); }
.scene__time::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.4s ease-in-out infinite; }
.scene__ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--red); background: rgba(240, 68, 56, .2); opacity: 0; }
.scene__tag { position: absolute; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--red-600); color: var(--white); font-size: 10.5px; font-weight: 600; white-space: nowrap; opacity: 0; box-shadow: 0 6px 14px -6px rgba(11, 18, 32, .2); }

/* 1: a phone, and a banner that slides up over the Buy button */
.ph { position: absolute; left: 50%; top: 10%; width: 34%; height: 110%; margin-left: -17%; border-radius: 14px 14px 0 0; border: 2px solid var(--ink); border-bottom: 0; background: var(--white); overflow: hidden; box-shadow: 0 14px 30px -14px rgba(11, 18, 32, .5); }
.ph i { display: block; height: 6px; margin: 9px 10px 0; border-radius: 3px; background: var(--line); }
.ph i:first-child { height: 34px; border-radius: 6px; background: var(--blue-100); }
.ph i:nth-child(3) { width: 55%; }
.ph b { position: absolute; left: 10px; right: 10px; top: 60%; padding: 6px 0; border-radius: 6px; background: var(--blue); color: var(--white); font-size: 9.5px; font-weight: 600; text-align: center; }
.ph em { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; padding: 8px 10px; border-top: 1px solid var(--line-2); background: var(--white); box-shadow: 0 -8px 18px -8px rgba(11, 18, 32, .25); font-style: normal; font-size: 9px; font-weight: 600; color: var(--ink); animation: phBanner 6s var(--ease) infinite; }
.ph em::after { content: ""; display: block; width: 70%; height: 5px; margin-top: 6px; border-radius: 3px; background: var(--line); }
.scene--phone .scene__ring { left: 50%; top: 80%; animation: phTap 6s linear infinite; }
.scene--phone .scene__ring + .scene__ring { animation-delay: .55s; }
.scene--phone .scene__tag { right: 8%; top: 12%; animation: tagIn 6s var(--ease) infinite; }
@keyframes phBanner { 0%, 8% { transform: translateY(100%); } 20%, 92% { transform: none; } 100% { transform: translateY(100%); } }
@keyframes phTap { 0%, 34% { transform: scale(.35); opacity: 0; } 35% { opacity: 1; } 46%, 100% { transform: scale(1.6); opacity: 0; } }
@keyframes tagIn { 0%, 62% { opacity: 0; transform: translateY(6px) scale(.9); } 68%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2: a coupon field whose button does nothing */
.fm { position: absolute; left: 12%; right: 12%; top: 30%; }
.fm span { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 600; color: var(--ink-2); }
.fm div { display: flex; gap: 6px; }
.fm i { flex: 1; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--white); font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
.fm b { position: relative; padding: 8px 14px; border-radius: 7px; background: var(--ink); color: var(--white); font-size: 10.5px; font-weight: 600; animation: fmShake 5s linear infinite; }
.fm .scene__ring { left: 50%; top: 50%; animation: fmTap 5s linear infinite; }
.fm .scene__ring:nth-of-type(2) { margin: -11px 0 0 -21px; animation-delay: .32s; }
.fm .scene__ring:nth-of-type(3) { margin: -19px 0 0 -9px; animation-delay: .64s; }
.scene--form .scene__tag { left: 12%; top: 68%; font-family: var(--mono); font-weight: 500; animation: fmErr 5s var(--ease) infinite; }
@keyframes fmShake { 0%, 22%, 44%, 100% { transform: none; } 25%, 33%, 41% { transform: translateX(-2px); } 29%, 37% { transform: translateX(2px); } }
@keyframes fmTap { 0%, 21% { transform: scale(.35); opacity: 0; } 22% { opacity: 1; } 32%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fmErr { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 3: a page that scrolls past its own offer, down to the size guide */
.sc { position: absolute; left: 24%; right: 24%; top: 0; padding-bottom: 14px; border-inline: 1px solid var(--line-2); background: var(--white); box-shadow: 0 0 30px -10px rgba(11, 18, 32, .25); animation: scScroll 7s var(--ease) infinite; }
.sc i { display: block; height: 7px; margin: 10px 12px 0; border-radius: 3px; background: var(--line); }
.sc i:nth-of-type(2n) { width: 62%; }
.sc b { display: block; margin: 12px 12px 0; padding: 9px; border-radius: 7px; background: var(--green-50); border: 1px dashed var(--green); color: var(--green-text); font-size: 10px; font-weight: 600; text-align: center; }
.sc em { display: block; height: 54px; margin: 12px 12px 0; border-radius: 7px; background: var(--blue-100); }
.sc u { position: relative; display: inline-block; margin: 12px 12px 0; font-size: 10px; font-weight: 600; color: var(--blue); text-underline-offset: 2px; }
.sc .scene__ring { left: 50%; top: 50%; border-color: var(--blue); background: rgba(31, 91, 255, .2); animation: scTap 7s linear infinite; }
.scene--scroll .scene__tag { right: 8%; top: 12%; animation: tagIn 7s var(--ease) infinite; }
@keyframes scScroll { 0%, 8% { transform: none; } 40%, 92% { transform: translateY(calc(100cqh - 100%)); } 100% { transform: none; } }
@keyframes scTap { 0%, 50% { transform: scale(.35); opacity: 0; } 51% { opacity: 1; } 62%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Feature tabs that follow you down the product section ---------- */
.ftabs { position: sticky; top: calc(var(--header-h) + 18px); z-index: 50; margin-bottom: clamp(36px, 4vw, 56px); padding-inline: var(--gutter); pointer-events: none; }
.ftabs__inner { position: relative; display: flex; gap: 2px; width: max-content; max-width: 100%; margin-inline: auto; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(11, 18, 32, .3); overflow-x: auto; scrollbar-width: none; pointer-events: auto; }
.ftabs__inner::-webkit-scrollbar { display: none; }
.ftabs a { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .3s; }
.ftabs a:hover { color: var(--ink); }
.ftabs a.is-active { color: var(--white); }
.ftabs__ink { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--ease), width .5s var(--ease); }
html:not(.is-settled) .ftabs__ink { transition: none; }

/* ---------- Feature rows: words on one side, the product on the other ---------- */
.frow { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: center; scroll-margin-top: 104px; }   /* lands just under the tabs */
.frow + .frow { margin-top: clamp(72px, 9vw, 128px); }
.frow--flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.frow--flip .frow__copy { order: 2; }
.frow__copy .kicker { margin-bottom: 14px; }
.frow__copy p { margin-top: 16px; font-size: 17px; }
p.frow__plan { display: inline-block; margin-top: 20px; padding: 4px 11px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100); font-size: 12.5px; font-weight: 600; color: var(--green-text); }
.frow__plan--paid { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-dark); }
.checks { display: grid; gap: 11px; margin-top: 24px; }
.checks li { position: relative; padding-left: 32px; color: var(--ink); }
.checks li svg { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue-100); color: var(--blue-dark); }
.checks--red li svg { background: var(--red-100); color: var(--red-text); }
.checks--green li svg { background: var(--green-100); color: var(--green-text); }
.frow__copy .link { margin-top: 26px; }
.shot__note { margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: right; }

/* the product is mounted on a flat field of its own colour */
.stage { position: relative; isolation: isolate; padding: clamp(14px, 2.6vw, 34px); border-radius: var(--r-xl); background: var(--blue); overflow: hidden; }
.stage > :is(.frame, .player, .code, .field-demo, .status) { border-color: rgba(255, 255, 255, .75); box-shadow: 0 1px 2px rgba(11, 18, 32, .14), 0 30px 54px -24px rgba(11, 18, 32, .6); }
.stage--red { background: var(--red); }
.stage--green { background: var(--green); }
.stage--ink { background: var(--ink); }
.stage > .code { border: 1px solid rgba(255, 255, 255, .16); }
.stage .shot__note { width: max-content; margin: 12px 0 0 auto; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

/* =========================================================
   PRODUCT FRAMES: pictures of the dashboard, built in HTML so they
   stay sharp. They come alive when scrolled into view (.is-seen):
   rows arrive in turn, bars grow, numbers count up.
   ========================================================= */
.frame { border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-frame); overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.frame__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.frame__title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.frame__title svg { color: var(--blue); }
.frame__meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.frame__split { display: grid; grid-template-columns: 1fr 1fr; }
.frame__split > * + * { border-left: 1px solid var(--line); }
.frame__sub { padding: 12px 16px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.chip b { font-weight: 600; color: var(--muted); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip.is-active b { color: rgba(255, 255, 255, .7); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.badge--blue { background: var(--blue-50); border-color: var(--blue-100); color: var(--blue-dark); }
.badge--green { background: var(--green-50); border-color: var(--green-100); color: var(--green-text); }
.badge--hot { background: var(--red-50); border-color: var(--red-100); color: var(--red-text); }
.badge--live { border: 0; padding-left: 0; color: var(--red-text); }
.badge--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--red); vertical-align: 1px; animation: blink 1.4s ease-in-out infinite; }

.rec__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.rec__icon { width: 28px; height: 28px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--blue-50); color: var(--blue); }
.rec__icon--hot { background: var(--red-50); color: var(--red); }
.rec__item b { display: block; font-weight: 500; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rec__item small { display: block; font-size: 11.5px; color: var(--muted); }
.rec__item time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.utable { width: 100%; border-collapse: collapse; }
.utable th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.utable td { padding: 10px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
.utable tr:last-child td { border-bottom: 0; }
.utable td b { font-weight: 600; color: var(--ink); }
.utable td small { display: block; font-size: 11.5px; color: var(--muted); }
.utable td small.hot { color: var(--red-text); }
.utable .num { font-weight: 600; color: var(--ink); white-space: nowrap; }
.utable .num.hot { color: var(--red-text); }
.utable .num.good { color: var(--green-text); }
.utable .end { text-align: right; white-space: nowrap; }
.utable .badge + .badge { margin-left: 4px; }
.watch { font-weight: 600; color: var(--blue); white-space: nowrap; }
.net { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.path { padding: 1px 6px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

.bar { height: 6px; margin-top: 6px; border-radius: 6px; background: #e9ecf1; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: var(--blue); transform-origin: left center; }
.bar--hot i { background: var(--red); }
.bar--good i { background: var(--green-bright); }

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-bottom: 1px solid var(--line); }
.metric { padding: 14px 16px; }
.metric + .metric { border-left: 1px solid var(--line); }
.metric b { display: block; font-size: 23px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.metric > span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--muted); }
.metric--hot b { color: var(--red-text); }
.metric--good b { color: var(--green-text); }

.callout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--red-50); border-bottom: 1px solid var(--red-100); font-size: 12.5px; color: var(--red-text); }
.callout svg { flex: none; }
.callout span { flex: 1; min-width: 180px; }
.callout .watch { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

/* funnel */
.fstep { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; }
.fstep__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 12px; font-weight: 600; color: var(--blue-dark); }
.fstep__name { font-weight: 600; color: var(--ink); }
.fstep__name .path { margin-left: 6px; font-weight: 400; }
.fstep__bar { position: relative; height: 22px; margin-top: 6px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.fstep__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: #b9cdff; transform-origin: left center; }
.fstep__bar span { position: relative; padding-left: 9px; font-size: 11.5px; line-height: 22px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.fstep__pct { text-align: right; }
.fstep__pct b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); }
.fstep__pct small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.fdrop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 16px 0 54px; padding: 7px 11px; border-radius: var(--r-s); background: var(--red-50); font-size: 12px; color: var(--red-text); }
.fdrop .watch { margin-left: auto; color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }

/* heatmap */
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; }
.seg span { padding: 2px 9px; border-radius: 6px; color: var(--muted); }
.seg .is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(11, 18, 32, .12); }
.heat { position: relative; aspect-ratio: 16 / 10.5; background: var(--white); overflow: hidden; }
.heat__page { position: absolute; inset: 0; padding: 4.5% 6%; }
.heat__page i { position: absolute; border-radius: 4px; background: #e9ecf1; }
.heat__page b { position: absolute; border-radius: 5px; background: var(--ink); }
.heat__spots { position: absolute; inset: 0; }
.heat__label { position: absolute; z-index: 1; display: grid; place-items: center; font-size: 10.5px; font-weight: 600; color: var(--white); }
/* cool where few click, through green, to red where everyone does */
.heat__spot { position: absolute; border-radius: 50%; margin: 0; translate: -50% -50%; background: radial-gradient(circle, rgba(240, 68, 56, .8) 0, rgba(250, 176, 5, .55) 26%, rgba(18, 183, 106, .38) 46%, rgba(31, 91, 255, .22) 62%, rgba(31, 91, 255, 0) 74%); }
.heat__spot--cool { background: radial-gradient(circle, rgba(18, 183, 106, .5) 0, rgba(31, 91, 255, .26) 44%, rgba(31, 91, 255, 0) 70%); }
.heat__fold { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--faint); }
.heat__fold span { position: absolute; right: 8px; top: -19px; padding: 1px 6px; border-radius: 4px; background: var(--white); border: 1px solid var(--line); font-size: 10.5px; font-weight: 500; color: var(--ink-2); }
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.legend i { width: 56px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--green-bright), #fab005, var(--red)); }
.depth { display: grid; gap: 9px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.depth__row { display: grid; grid-template-columns: 70px minmax(0, 1fr) 34px; gap: 10px; align-items: center; font-size: 12px; }
.depth__row .bar { margin: 0; }
.depth__row b { text-align: right; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* console + network rows */
.logrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 5px 16px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.logrow span:first-child { color: var(--muted); }
.logrow span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.logrow b { font-weight: 500; color: var(--green-text); white-space: nowrap; }
.logrow--err, .logrow--err span:first-child, .logrow--err b { color: var(--red-text); }
.tline { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tline .player__track { cursor: default; }

/* journey */
.journey { padding: 6px 0; }
.journey__step { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 9px 16px; }
.journey__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 11.5px; font-weight: 600; color: var(--blue-dark); }
.journey__step b { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.journey__step small { display: block; font-size: 11.5px; color: var(--muted); }
.journey__step time { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.journey__step--end .journey__n { background: var(--red-50); border-color: var(--red-100); color: var(--red-text); }
.journey__step--end b { color: var(--red-text); }

/* alert message */
.msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; padding: 14px 16px; }
.msg + .msg { border-top: 1px solid var(--line); }
.msg__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--red-50); color: var(--red); }
.msg__from { font-size: 12px; color: var(--muted); }
.msg__from b { font-weight: 600; color: var(--ink); }
.msg p { margin-top: 2px; font-size: 13px; color: var(--ink); }
.msg .watch { display: inline-block; margin-top: 5px; font-size: 12.5px; }

/* bug report */
.report { padding: 16px; font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.report span { display: block; min-height: 1.7em; }
.report b { font-weight: 500; color: var(--ink); }
.report .hot { color: var(--red-text); }
.report__done { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100); font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--green-text); }

/* how frames come alive */
@media screen and (prefers-reduced-motion: no-preference) {
  .anim [data-live]:not(.is-seen) :is(.bar i, .fstep__bar i, .player__fill) { transform: scaleX(0); }
  .anim [data-live]:not(.is-seen) :is(.rec__item, .utable tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .report span, .callout) { opacity: 0; transform: translateY(10px); }
  .anim [data-live]:not(.is-seen) :is(.heat__spot, .player__mark) { opacity: 0; scale: .4; }
  .anim [data-live]:not(.is-seen) .player__handle { transform: translateX(0); }
  [data-live] :is(.bar i, .fstep__bar i) { transition: transform 1.1s var(--ease) calc(var(--n, 0) * 90ms + .25s); }
  [data-live] :is(.player__fill, .player__handle) { transition: transform 1.4s var(--ease) .2s; }
  [data-live] :is(.rec__item, .utable tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .report span, .callout) { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--n, 0) * 80ms + .1s); }
  [data-live] :is(.heat__spot, .player__mark) { transition: opacity .7s var(--ease), scale .7s var(--spring); transition-delay: calc(var(--n, 0) * 140ms + .3s); }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(2) { --n: 1; }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(3) { --n: 2; }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(4) { --n: 3; }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(5) { --n: 4; }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(6) { --n: 5; }
  [data-live] :is(.rec__item, tbody tr, .fstep, .fdrop, .logrow, .ins, .msg, .status, .journey__step, .depth__row, .metric, .heat__spot, .player__mark):nth-child(n+7) { --n: 6; }
  /* the report prints line by line */
  [data-live] .report span { transition-delay: calc(var(--l, 0) * 70ms + .1s); }
  /* things that keep moving, only while on screen */
  [data-live].is-live .heat__spot { animation: heatPulse 3.6s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.7s); }
  [data-live].is-live .fdrop svg, [data-live].is-live .callout svg { animation: nudge 2.4s var(--ease) infinite; }
}
@keyframes heatPulse { 50% { scale: 1.08; opacity: .82; } }
@keyframes nudge { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-12deg) scale(1.15); } 86% { transform: rotate(10deg) scale(1.15); } }

/* =========================================================
   HOW IT WORKS (home): three steps joined by a line that fills
   ========================================================= */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); }
.steps::before, .steps::after { content: ""; position: absolute; left: 30px; right: 30px; top: 24px; height: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: var(--blue); transform-origin: left center; }
.step { position: relative; z-index: 1; display: flex; flex-direction: column; }
.step__n { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line-2); box-shadow: var(--shadow-card); font-size: 18px; font-weight: 600; color: var(--ink); transition: background .5s var(--ease), color .5s, border-color .5s, transform .6s var(--spring); }
.step h3 { margin-top: 22px; }
.step p { margin-top: 8px; color: var(--ink-2); }
.step__vis { margin-top: auto; padding-top: 22px; }
.steps.is-seen .step__n { background: var(--blue); border-color: transparent; color: var(--white); box-shadow: none; }
.steps.is-seen .step:nth-child(2) .step__n { transition-delay: .55s; }
.steps.is-seen .step:nth-child(3) .step__n { transition-delay: 1.1s; background: var(--green); }
@media screen and (prefers-reduced-motion: no-preference) {
  .anim .steps:not(.is-seen)::after { transform: scaleX(0); }
  .steps::after { transition: transform 1.5s var(--ease) .15s; }
}

.code { position: relative; border-radius: var(--r); background: var(--ink); color: #dbe3f0; font-family: var(--mono); font-size: 13px; line-height: 1.7; box-shadow: 0 16px 32px -16px rgba(11, 18, 32, .5); }
.code pre { padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.code__bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px 7px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-family: var(--font); font-size: 12.5px; color: #8a94a6; }
.code .c-tag { color: #8fb0ff; }
.code .c-str { color: #7ee2a8; }
.code .c-com { color: #8a94a6; }
.code__copy { padding: 5px 11px; border-radius: var(--r-s); background: rgba(255, 255, 255, .12); font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--white); transition: background-color .2s, transform .3s var(--ease); }
.code__copy:hover { background: var(--blue); transform: translateY(-1px); }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.18em; background: var(--blue-400); animation: blink 1s steps(1) infinite; }

.status { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-card); font-size: 14px; color: var(--ink); }
.status time, .status .status__end { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.status--hot { background: var(--red-50); border-color: var(--red-100); color: var(--red-text); }
.status--hot time { color: var(--red-text); }
.status--good { background: var(--green-50); border-color: var(--green-100); color: var(--green-text); }

/* ---------- Who it's for ----------
   A card answers the pointer quietly: a wash of its own colour rises from the bottom edge, the
   icon turns solid, the link underlines itself and its arrow steps forward. Transform and
   colour only, and the words keep their colours, so nothing flashes. */
.roles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.role { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 272px; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .35s; }
.role::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--w, var(--blue-50)); transform: translateY(101%); transition: transform .6s var(--ease); }
.role__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--t, var(--blue-100)); color: var(--ct, var(--blue-dark)); transition: transform .5s var(--spring), background-color .35s, color .35s; }
.role__who { margin-top: 20px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ct, var(--blue-dark)); }
.role__q { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.014em; line-height: 1.34; color: var(--ink); }
.role .link { position: relative; align-self: flex-start; margin-top: auto; padding-top: 22px; font-size: 14.5px; color: var(--ct, var(--blue-dark)); }
.role .link::after { content: ""; position: absolute; left: 0; right: 22px; bottom: -3px; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); }
/* each role: the solid colour, its text tone, the icon's tint, the wash and the edge it takes on hover */
.role { --c: var(--blue); --ct: var(--blue-dark); --t: var(--blue-100); --w: var(--blue-50); --e: #b9cdff; }
.role--green { --c: var(--green); --ct: var(--green-text); --t: var(--green-100); --w: var(--green-50); --e: #a3e3c1; }
.role--red { --c: var(--red); --ct: var(--red-text); --t: var(--red-100); --w: var(--red-50); --e: #fbc0ba; }
.role--ink { --c: var(--ink); --ct: var(--ink); --t: #e6e9ef; --w: #f1f3f7; --e: #c3c9d4; }
@media (hover: hover) {
  .role:is(:hover, :focus-visible) { transform: translateY(-4px); border-color: var(--e); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -24px rgba(11, 18, 32, .2); }
  .role:is(:hover, :focus-visible)::before { transform: none; }
  .role:is(:hover, :focus-visible) .role__icon { transform: scale(1.08); background: var(--c); color: var(--white); }
  .role:is(:hover, :focus-visible) .link svg { transform: translateX(5px); }
  .role:is(:hover, :focus-visible) .link::after { transform: scaleX(1); }
}
.role:active { transform: translateY(-1px) scale(.99); transition-duration: .15s; }


/* ---------- Privacy and performance ---------- */
.trust { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.trust__copy, .faq__head { position: sticky; top: calc(var(--header-h) + 40px); }
.trust__copy .kicker { margin-bottom: 14px; }
.trust__copy .lead { margin-top: 18px; color: var(--ink-2); }
.trust__copy .link { margin-top: 24px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fact { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-card); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.fact:hover { transform: translateY(-4px); border-color: var(--green-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -22px rgba(11, 18, 32, .2); }
.fact__icon { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; display: grid; place-items: center; background: var(--green); color: var(--white); transition: transform .6s var(--spring); }
.fact:hover .fact__icon { transform: scale(1.12) rotate(-6deg); }
.fact__icon--blue { background: var(--blue); }
.fact p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.fact code { color: var(--ink-2); }
.band--green .fact { border-color: rgba(14, 159, 91, .16); }

/* a password field, masked as it is typed */
.mask { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 14px 16px; border: 1px solid rgba(14, 159, 91, .22); border-radius: var(--r-l); background: var(--white); box-shadow: 0 16px 30px -22px rgba(11, 18, 32, .2); font-size: 14px; font-weight: 500; color: var(--green-text); }
.mask__field { display: flex; align-items: center; flex: none; width: 158px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--green); box-shadow: 0 0 0 4px rgba(18, 183, 106, .16); background: var(--white); font-family: var(--mono); font-size: 15px; letter-spacing: .12em; color: var(--ink); overflow: hidden; white-space: nowrap; }
.mask .caret { background: var(--green); }

/* ---------- Quotes (only shown once includes/proof.php has real ones) ---------- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.quote { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.quote blockquote { font-size: 17px; line-height: 1.55; color: var(--ink); }
.quote figcaption { margin-top: auto; padding-top: 22px; font-size: 14px; color: var(--muted); }
.quote figcaption b { display: block; font-weight: 600; color: var(--ink); }

/* ---------- Pricing teaser (home): the free plan, on blue ---------- */
.offer { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(4px, 1.6vw, 20px); padding: clamp(10px, 1.3vw, 16px); border-radius: 30px; background: var(--blue); color: #eef3ff; overflow: hidden; }
.offer__main { padding: clamp(22px, 3.4vw, 46px); }
.offer .h2 { color: var(--white); }
.offer .hl { color: #a9ffd0; white-space: nowrap; }
.offer__main .lead { margin-top: 16px; color: #eef3ff; }
.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.offer .link, .offer .link:hover { color: var(--white); }
.offer__side { padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: var(--white); color: var(--ink-2); box-shadow: 0 26px 50px -26px rgba(11, 18, 32, .6); }
.offer__side h3 { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100); font-size: 12.5px; font-weight: 600; color: var(--green-text); }
.offer__list { display: grid; gap: 14px; margin-top: 22px; }
.offer__list li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 15px; }
.offer__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.offer__list b { font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__head .lead { margin-top: 18px; color: var(--muted); }
.faq__list { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--white); transition: border-color .3s, box-shadow .4s var(--ease); }
.faq details:hover { border-color: var(--line-2); }
.faq details[open]:not(.is-closing) { border-color: var(--blue-100); box-shadow: 0 16px 32px -22px rgba(11, 18, 32, .2); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 22px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--surface); color: var(--ink-2); transition: transform .45s var(--ease), background-color .3s, color .3s; }
.faq details[open]:not(.is-closing) summary svg { transform: rotate(180deg); background: var(--blue); color: var(--white); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 60px 22px 22px; color: var(--ink-2); }

/* =========================================================
   CLOSING PANEL + FOOTER
   ========================================================= */
.closing { padding-block: 0 var(--section); }
.closing__panel { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(36px, 5.4vw, 72px); border-radius: 28px; background: var(--ink); color: #c5cedc; overflow: hidden; }
.closing__panel h2 { color: var(--white); }
.closing__panel .lead { margin-top: 16px; color: #d3dae6; }
.closing__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.closing__try { padding: 22px 24px; border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, .18); background: rgba(11, 18, 32, .5); }
.closing__try h3 { display: flex; align-items: center; gap: 9px; font-size: 16px; color: var(--white); }
.closing__try p { margin-top: 8px; font-size: 14.5px; color: #b9c3d3; }
.closing__try .btn { margin-top: 18px; }
.closing__try .btn[disabled] { opacity: 1; color: #b9c3d3; border-color: rgba(255, 255, 255, .18); }
.closing__clock { font-family: var(--mono); font-size: 13px; font-weight: 400; color: #b9c3d3; }

.footer { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.footer__brand p { margin-top: 14px; max-width: 300px; font-size: 15px; color: var(--muted); }
.footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.footer__social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink-2); transition: color .2s, border-color .2s, transform .35s var(--ease); }
.footer__social a:hover, .footer__social a:focus-visible { color: var(--blue); border-color: var(--blue-100); transform: translateY(-2px); }
.footer h2 { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.footer__col ul { display: grid; gap: 10px; margin-top: 16px; }
.footer__col a { display: inline-block; font-size: 15px; color: var(--ink-2); transition: color .2s, transform .35s var(--ease); }
.footer__col a:hover { color: var(--blue); transform: translateX(4px); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

/* =========================================================
   THE TAPE: a small recorder that follows you down the page.
   It is the product, running on this visitor: reels turn while
   it records, and once there is something to show, a button
   slides out to play the visit back.
   ========================================================= */
.dock { position: fixed; left: 20px; bottom: 20px; z-index: 120; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 12px; border-radius: 999px; background: var(--ink); color: var(--white); box-shadow: 0 16px 36px -12px rgba(11, 18, 32, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 13px; transform: translateY(160%); transition: transform .9s var(--ease); }
.dock.is-in { transform: none; }
.is-replaying .dock { transform: translateY(160%); }
.dock__reels { display: flex; gap: 4px; }
.dock__reels i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); border-top-color: var(--red); animation: spin 2.4s linear infinite; }
.dock__reels i + i { animation-duration: 3.4s; }
@keyframes spin { to { transform: rotate(360deg); } }
.dock__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #ff8a80; }
.dock__time { min-width: 34px; font-family: var(--mono); font-size: 12.5px; color: #d3dae6; font-variant-numeric: tabular-nums; }
.dock__play { display: inline-flex; align-items: center; height: 32px; max-width: 190px; padding: 0 9px; border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; transition: max-width .8s var(--ease), padding .8s var(--ease), margin .8s var(--ease), opacity .5s, transform .35s var(--ease), background-color .2s; }
.dock__play svg { flex: none; }
.dock__play span { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .7s var(--ease), opacity .4s, margin .7s var(--ease); }
.dock:is(:hover, :focus-within, .is-hint) .dock__play span { max-width: 130px; margin: 0 4px 0 7px; opacity: 1; }
.dock__play:hover:not(:disabled) { transform: scale(1.05); background: var(--blue-50); }
.dock__play:disabled { max-width: 0; margin-left: -10px; padding-inline: 0; opacity: 0; cursor: default; }
.dock__play.is-ready { animation: ready 2.2s var(--ease) .8s 2; }
@keyframes ready { 50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, .16); } }
.dock__close { width: 0; height: 26px; margin-left: -10px; border-radius: 50%; display: grid; place-items: center; color: #aab5c6; opacity: 0; overflow: hidden; transition: width .5s var(--ease), margin .5s var(--ease), opacity .3s, background-color .2s, color .2s; }
.dock:is(:hover, :focus-within) .dock__close { width: 26px; margin-left: 0; opacity: 1; }
.dock__close:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
.dock__tip { position: absolute; left: 0; bottom: calc(100% + 10px); width: 280px; padding: 12px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-pop); font-size: 13px; line-height: 1.5; color: var(--ink-2); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease); }
.dock:hover .dock__tip, .dock:focus-within .dock__tip { opacity: 1; transform: none; }

/* =========================================================
   INNER PAGES
   ========================================================= */
.phero { position: relative; isolation: isolate; padding: clamp(44px, 6vw, 84px) 0 clamp(44px, 5vw, 68px); }
.phero__fx { border-bottom: 1px solid var(--line); }
.phero + .section--flush { padding-top: clamp(36px, 4.4vw, 60px); }
.phero__inner { max-width: 800px; }
.phero__title { margin-top: 18px; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -.034em; }
.phero__sub { margin-top: 20px; max-width: 34em; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.phero__note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.phero--center .phero__inner { margin-inline: auto; text-align: center; }
.phero--center .phero__sub { margin-inline: auto; }
.phero--center .phero__actions { justify-content: center; }

/* 404: the reel in the middle keeps turning */
.lost { display: flex; justify-content: center; align-items: center; gap: .06em; margin-bottom: 8px; font-size: clamp(96px, 16vw, 184px); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: var(--ink); }
.lost span { color: var(--blue); }
.lost i { position: relative; width: .74em; height: .74em; border-radius: 50%; border: .1em solid var(--ink); animation: spin 5s linear infinite; }
.lost i::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: .05em dashed var(--red); }
.lost i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .1em; height: .1em; margin: -.05em 0 0 -.05em; border-radius: 50%; background: var(--red); }

/* small feature cards */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gcard { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-card); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.gcard:hover { transform: translateY(-5px); border-color: var(--blue-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -24px rgba(11, 18, 32, .2); }
.gcard__icon { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 13px; display: grid; place-items: center; background: var(--blue); color: var(--white); transition: transform .6s var(--spring); }
.gcard:hover .gcard__icon { transform: scale(1.12) rotate(-6deg); }
.gcard:nth-child(3n+2) .gcard__icon { background: var(--green); }
.gcard:nth-child(3n) .gcard__icon { background: var(--red); }
.gcard:nth-child(3n+2):hover { border-color: var(--green-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -24px rgba(11, 18, 32, .2); }
.gcard:nth-child(3n):hover { border-color: var(--red-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -24px rgba(11, 18, 32, .2); }
.gcard p { margin-top: 6px; font-size: 15px; color: var(--muted); }
p.gcard__plan { display: inline-block; margin-top: 14px; padding: 3px 10px; border-radius: 999px; background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 12px; font-weight: 600; color: var(--blue-dark); }

/* how it works: the long version */
.guide { display: grid; gap: clamp(56px, 7vw, 96px); counter-reset: step; }
.guide__step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; counter-increment: step; }
.guide__step .kicker { margin-bottom: 14px; }
.guide__step .kicker::before { content: counter(step); width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: var(--white); font-size: 14px; }
.guide__step:nth-child(3) .kicker { color: var(--green-text); }
.guide__step:nth-child(3) .kicker::before { background: var(--green); }
.guide__step p { margin-top: 14px; font-size: 17px; }
.guide__vis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.guide__vis .small { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: 12px; font-weight: 600; color: var(--ink-2); }

.field-demo { padding: 22px; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--white); box-shadow: var(--shadow-frame); }
.field-demo label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field-demo__input { display: flex; align-items: center; height: 46px; margin: 7px 0 14px; padding: 0 13px; border: 1px solid var(--blue); border-radius: var(--r-s); box-shadow: 0 0 0 4px rgba(31, 91, 255, .14); font-size: 15px; color: var(--ink); }
.field-demo .caret { background: var(--blue); }

.tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--white); font-size: 14.5px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, color .2s, background-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.tab svg { color: var(--muted); transition: color .2s; }
.tab:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.tab[aria-selected="true"] svg { color: var(--white); }
.tabpanel { padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-frame); }
.js .tabpanel[hidden] { display: none; }
.tabpanel:not([hidden]) { animation: riseIn .6s var(--ease) both; }
.tabpanel ol { display: grid; gap: 14px; margin-top: 18px; counter-reset: s; }
.tabpanel li { position: relative; padding: 3px 0 0 44px; min-height: 30px; font-size: 16px; counter-increment: s; }
.tabpanel li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-100); font-size: 13px; font-weight: 600; color: var(--blue-dark); }
.tabpanel li:last-child::before { background: var(--green-100); color: var(--green-text); }
.tabpanel li b { font-weight: 600; color: var(--ink); }

/* ---------- Install guides: the cards on How it works, and the guide pages (/integrations/...) ---------- */
.iguides { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.iguide { display: flex; flex-direction: column; padding: 24px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-card); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.iguide:hover { transform: translateY(-4px); border-color: var(--blue-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 22px 40px -24px rgba(11, 18, 32, .2); }
.iguide:active { transform: translateY(-1px); transition-duration: .15s; }
.iguide__logo { display: inline-grid; place-items: center; align-self: flex-start; min-width: 44px; height: 44px; margin-bottom: 16px; padding-inline: 11px; border-radius: 13px; background: var(--blue-50); color: var(--ink); }
.iguide p { margin-top: 6px; font-size: 15px; color: var(--muted); }
.iguide .link { margin-top: auto; padding-top: 18px; font-size: 14.5px; }
.iguide:hover .link svg { transform: translateX(4px); }
.iguide--ask { background: var(--surface); box-shadow: none; }
.iguide--ask .iguide__logo { background: var(--white); border: 1px solid var(--line); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-inline: 9px; font-weight: 400; color: var(--faint); }
.crumbs a { color: var(--blue-dark); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.prep__text { margin-top: 14px; font-size: 17px; }

.isteps { display: grid; gap: clamp(48px, 6vw, 84px); }
.istep, .prep { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.istep .kicker, .prep .kicker { margin-bottom: 12px; }
.istep .code, .prep .code { font-size: 12px; }   /* the snippet's address fits on one line at this size */
.istep:last-child .kicker { color: var(--green-text); }
.istep p:not(.kicker) { margin-top: 14px; font-size: 17px; }
.istep b { font-weight: 600; color: var(--ink); }
.istep__fig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.istep__fig > :is(.trail, .pick, .shot) { border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--r-l); background: var(--white); box-shadow: 0 1px 2px rgba(11, 18, 32, .14), 0 30px 54px -24px rgba(11, 18, 32, .6); }
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; padding: clamp(18px, 2.4vw, 26px); }
.trail li { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); }
.trail b { padding: 8px 13px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.trail li:last-child b { border-color: var(--blue); background: var(--blue); color: var(--white); }
.pick { overflow: hidden; font-size: 14.5px; }
.pick__title { padding: 13px 20px; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.pick__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; padding: 13px 20px; }
.pick__row + .pick__row { border-top: 1px solid var(--line); }
.pick dt { color: var(--muted); }
.pick dd { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.pick dd svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--green-100); color: var(--green-text); }
.shot { overflow: hidden; }
.shot img { width: 100%; height: auto; }
.code__hl { display: block; margin-inline: -18px; padding: 3px 18px; background: rgba(111, 160, 255, .2); box-shadow: inset 3px 0 0 var(--blue-400); }

.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split .kicker { margin-bottom: 14px; }
.split .lead { margin-top: 18px; color: var(--muted); }

/* a question with one answer: a panel and a button */
.callbox { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px; padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: var(--blue-50); border: 1px solid var(--blue-100); overflow: hidden; }
.callbox > div { max-width: 640px; }
.callbox .kicker { margin-bottom: 12px; }
.callbox .lead { margin-top: 14px; color: var(--ink-2); }

/* use cases */
.ucase { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 64px); scroll-margin-top: 40px; }
.ucase--flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.ucase--flip .ucase__copy { order: 2; }
.ucase__copy .kicker { margin-bottom: 14px; }
.ucase__copy p { margin-top: 16px; font-size: 17px; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 34px; }
.pricing-controls form { display: contents; }   /* each switch is a form, so it works without JavaScript */
.billing, .currency { position: relative; display: inline-flex; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); isolation: isolate; }
.billing button, .currency button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .3s, background-color .3s, box-shadow .3s; }
.billing button:hover, .currency button:hover { color: var(--ink); }
.currency button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(11, 18, 32, .16); }
/* the thumb slides between Monthly and Annually */
.billing { display: inline-grid; grid-template-columns: 1fr 1fr; }
.billing::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: var(--white); box-shadow: 0 1px 3px rgba(11, 18, 32, .16); transition: transform .5s var(--ease); }
.billing[data-billing="annual"]::before { transform: translateX(100%); }
.billing button { justify-content: center; }
.billing button[aria-pressed="true"] { color: var(--ink); }
.billing__save { padding: 1px 8px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100); font-size: 11.5px; font-weight: 600; color: var(--green-text); }
.currency button span { font-weight: 500; color: var(--muted); }

.pricing { padding-top: 8px; }
.pricing .for-annual { display: none; }
.pricing[data-cycle="annual"] .for-annual { display: inline; }
.pricing[data-cycle="annual"] .for-monthly { display: none; }
@keyframes priceSwap { from { opacity: 0; transform: translateY(-45%); } }
.is-swap { display: inline-block; animation: priceSwap .5s var(--ease); }

.pgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pcard { position: relative; display: flex; flex-direction: column; padding: 26px 20px 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-card); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.pcard:hover { transform: translateY(-8px); border-color: var(--blue-100); box-shadow: 0 2px 4px rgba(11, 18, 32, .04), 0 28px 48px -26px rgba(11, 18, 32, .2); }
.pcard--popular { border: 2px solid var(--blue); padding: 25px 19px 21px; }
.pcard--popular:hover { border-color: var(--blue); }
.pcard__flag { position: absolute; top: -13px; left: 18px; padding: 3px 11px; border-radius: 999px; background: var(--blue); font-size: 11.5px; font-weight: 600; color: var(--white); white-space: nowrap; }
.pcard__name { font-size: 18px; letter-spacing: -.015em; }
.pcard__tag { margin-top: 2px; min-height: 21px; font-size: 13.5px; color: var(--muted); }
.pcard__price { display: flex; align-items: baseline; gap: 1px; margin-top: 18px; color: var(--ink); }
.pcard__price b, .ecard__price b { font-size: 38px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.pcard__cur { font-size: 20px; font-weight: 600; }
.pcard__per { margin-left: 4px; font-size: 14px; color: var(--muted); }
.pcard__billed { min-height: 20px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.pcard__was { margin-right: 8px; font-size: 18px; font-weight: 500; color: var(--muted); text-decoration-thickness: 1.5px; }
.pcard__off { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--green-50); border: 1px solid var(--green-100); font-size: 11.5px; font-weight: 600; color: var(--green-text); vertical-align: 1px; }
.pcard__was[hidden], .pcard__off[hidden] { display: none; }
.ecard__price .pcard__was { font-size: 14px; margin-right: 6px; }
.ecard__price .pcard__off { align-self: center; }
.pcard__cta { margin-top: 18px; }
.pcard__limits { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.pcard__limits b { font-weight: 600; color: var(--ink); }
.pcard__incl { margin-top: 18px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pcard__feats { display: grid; gap: 8px; margin-top: 10px; font-size: 13.5px; }
.pcard__feats li { display: flex; align-items: flex-start; gap: 8px; color: var(--ink-2); }
.pcard__feats svg { flex: none; margin-top: 2px; color: var(--green); }
.pricing__fine { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted); }

.scale { margin-top: var(--section); }
.etable { border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.ecard { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr) minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 18px 24px; background: var(--white); transition: background-color .3s; }
.ecard:hover { background: var(--blue-50); }
.ecard + .ecard { border-top: 1px solid var(--line); }
.ecard__name { font-size: 16px; font-weight: 600; color: var(--ink); }
.ecard__name small { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.ecard__list { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--ink-2); }
.ecard__price { display: flex; align-items: baseline; gap: 1px; color: var(--ink); }
.ecard__price b { font-size: 26px; }
.ecard__price .pcard__cur { font-size: 16px; }
.ecard--custom, .ecard--custom:hover { background: var(--blue-50); }
.ecard--custom p { grid-column: span 2; font-size: 14.5px; color: var(--ink-2); }

.compare { margin-top: clamp(40px, 5vw, 64px); }
.compare summary { display: flex; align-items: center; justify-content: center; gap: 8px; width: max-content; margin-inline: auto; padding: 12px 22px; border-radius: var(--r); border: 1px solid var(--line-2); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; box-shadow: var(--shadow-card); transition: border-color .2s, transform .35s var(--ease), color .2s; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue-dark); }
.compare summary svg { transition: transform .4s var(--ease); }
.compare[open] summary svg { transform: rotate(180deg); }
.compare__wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-xl); animation: riseIn .6s var(--ease) both; }
.compare__table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
.compare__table th, .compare__table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.compare__table td { color: var(--ink); }
.compare__table td svg { display: inline-block; vertical-align: middle; }
.compare__table thead th { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.compare__table tbody th { font-weight: 400; color: var(--ink-2); }
.compare__table tbody tr:not(.compare__group):hover > * { background: var(--blue-50); }
.compare__group th { padding-block: 9px; background: var(--surface); font-size: 12px; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--muted) !important; }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }
.compare__table .is-on svg { color: var(--green); }
.compare__table .is-off svg { color: var(--line-2); }
/* A two-column table (question, answer) that fits a phone without scrolling. */
.compare__table--two { min-width: 0; }
.compare__table--two tbody th { width: 55%; }
.fineprint { max-width: 760px; margin: 24px auto 0; font-size: 13px; color: var(--muted); text-align: center; }
.compare__price { white-space: nowrap; }
.compare__price .pcard__cur { font-size: inherit; font-weight: inherit; }

/* =========================================================
   CONTACT + FORMS
   ========================================================= */
.contact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact__ways { display: grid; gap: 14px; }
.way { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-card); transition: transform .5s var(--ease), border-color .3s; }
.way:hover { transform: translateY(-4px); border-color: var(--blue-100); }
.way__icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--blue); color: var(--white); }
.way:nth-child(2) .way__icon { background: var(--green); }
.way:nth-child(3) .way__icon { background: var(--red); }
.way p { margin-top: 4px; font-size: 15px; color: var(--muted); }
.way .textlink { display: inline-block; margin-top: 6px; font-size: 15px; font-weight: 600; text-decoration: none; }
.way .textlink:hover { text-decoration: underline; }

.form { padding: clamp(22px, 3vw, 38px); border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-frame); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink); }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--white); font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .3s var(--ease); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(31, 91, 255, .16); }
.field--error input, .field--error textarea { border-color: var(--red); }
.field__error { margin-top: 6px; font-size: 13.5px; color: var(--red-text); }
.field--trap { position: absolute; left: -10000px; }
.field--captcha input { max-width: 160px; font-variant-numeric: tabular-nums; }
.field__hint { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.form__note { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.notice { display: flex; gap: 12px; margin-bottom: 22px; padding: 15px 17px; border-radius: var(--r-l); border: 1px solid var(--green-100); background: var(--green-50); font-size: 15px; color: var(--ink); animation: riseIn .6s var(--ease) both; }
.notice svg { flex: none; margin-top: 2px; color: var(--green); }
.notice--error { border-color: var(--red-100); background: var(--red-50); }
.notice--error svg { color: var(--red); }
.notice b { font-weight: 600; }

/* =========================================================
   LEGAL
   ========================================================= */
.legal { position: relative; isolation: isolate; padding: clamp(44px, 6vw, 80px) 0 var(--section); }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -.03em; }
.legal__date { margin: 12px 0 32px; font-size: 14px; color: var(--muted); }
.legal__note { margin-bottom: 32px; padding: 13px 16px; border-radius: var(--r); border: 1px solid var(--red-100); background: var(--red-50); font-size: 14.5px; color: var(--red-text); }
.legal h2 { margin: 36px 0 10px; font-size: 21px; letter-spacing: -.015em; }
.legal p + p { margin-top: 14px; }
.legal ul { display: grid; gap: 8px; margin-top: 10px; padding-left: 20px; list-style: disc; }
.legal b { font-weight: 600; color: var(--ink); }
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================
   "REPLAY MY VISIT": plays back this visitor's own pointer and
   scrolling, recorded in the page's memory and nowhere else.
   ========================================================= */
.rlayer { position: fixed; inset: 0; z-index: 250; display: none; box-shadow: inset 0 0 0 3px var(--blue); transition: background-color .3s; }
.rlayer.is-on { display: block; }
.rlayer.is-end { background: rgba(11, 18, 32, .5); }
.rlayer__banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow-pop); white-space: nowrap; }
.rlayer__time { font-family: var(--mono); font-size: 12.5px; color: #b9c3d3; }
.rlayer__stop { padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600; color: var(--white); }
.rlayer__stop:hover { background: rgba(255, 255, 255, .26); }
.rlayer__cursor { position: absolute; left: 0; top: 0; filter: drop-shadow(0 3px 6px rgba(11, 18, 32, .35)); will-change: transform; }
.rlayer__click { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--blue); background: rgba(31, 91, 255, .18); animation: ring .7s ease-out forwards; pointer-events: none; }
.rlayer__end { position: absolute; left: 50%; top: 50%; width: min(520px, calc(100% - 32px)); padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: var(--white); box-shadow: var(--shadow-frame); text-align: center; opacity: 0; transform: translate(-50%, -44%) scale(.96); pointer-events: none; transition: opacity .4s, transform .6s var(--spring); }
.rlayer.is-end .rlayer__end { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.rlayer.is-end .rlayer__cursor, .rlayer.is-end .rlayer__banner { opacity: 0; }
.rlayer__end p { margin: 12px auto 24px; max-width: 380px; color: var(--muted); }
.rlayer__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* =========================================================
   MOTION TIED TO SCROLLING
   Where the browser can drive an animation from the scroll position
   itself, panels open as they arrive and the product drifts inside
   its mount. Elsewhere the page is simply still at these points.
   ========================================================= */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band--ink { animation: bandOpen linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
    .stage > :first-child { animation: mountDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes bandOpen { from { transform: scale(.93); border-radius: 76px; } }
@keyframes mountDrift { from { translate: 0 16px; } to { translate: 0 -16px; } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1260px) {
  .toast--red { right: -8px; }
  .toast--green { left: -8px; }
  .toast--rec { left: -8px; }
}

@media (max-width: 1180px) {
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1139px) {
  .frow, .frow--flip, .ucase, .ucase--flip { grid-template-columns: minmax(0, 1fr); }
  .frow--flip .frow__copy, .ucase--flip .ucase__copy { order: 0; }
  .frow__copy, .ucase__copy { max-width: 640px; }
  .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role { min-height: 0; }
}

@media (max-width: 1023px) {
  .hero__grid, .trust, .faq, .contact, .split, .guide__step, .istep, .prep { grid-template-columns: minmax(0, 1fr); }
  .iguides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__copy, .faq__head { position: static; }
  .hero__sub { max-width: 36em; }
  .hero__visual { margin-top: 18px; }
  .trust__copy { max-width: 640px; }
  .cases { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .offer { grid-template-columns: minmax(0, 1fr); }
  .closing__panel { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .ecard { grid-template-columns: minmax(0, 1fr) auto; }
  .ecard__list { grid-column: 1 / -1; grid-row: 2; }
  .ecard__price { justify-self: end; grid-column: 2; grid-row: 1; }
  .ecard .btn { grid-column: 1 / -1; }
  .ecard--custom p { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --header-h: 60px; }
  .nav__burger { display: grid; }
  .nav__login { display: none; }
  .js .nav__links {
    position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 99;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 32px; background: var(--white); overflow-y: auto;
  }
  .js .nav.is-open .nav__links { display: flex; }
  .js .nav.is-open .nav__inner { transform: none; transition: none; }
  .js .nav.is-open .nav__progress { opacity: 0; }
  .js .nav__links a { padding: 16px 2px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 18px; font-weight: 600; color: var(--ink); text-align: left; animation: riseIn .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .js .nav__links a::after { display: none; }
  .js .nav__links .nav__extra { display: flex; }
  .js .nav__links .btn { margin-top: 22px; border-bottom: 0; border-radius: var(--r); color: var(--white); font-size: 16px; }
  html:not(.js) .nav__inner { height: auto; flex-wrap: wrap; padding-block: 12px; }
  html:not(.js) .nav__links { order: 3; width: 100%; flex-wrap: wrap; }
  html:not(.js) .nav__burger { display: none; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .steps::before, .steps::after { left: 24px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
  .steps::after { transform-origin: center top; }
  .anim .steps:not(.is-seen)::after { transform: scaleY(0); }
  .step { padding-left: 74px; }
  .step__n { position: absolute; left: 0; top: 0; }
  .step h3 { margin-top: 10px; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip__inner { flex-direction: column; align-items: flex-start; }
  .marquee { width: 100%; flex: none; }
  .toast { display: none; }
  .dock { display: none; }
  .band { margin-inline: 8px; }
  .ftabs { padding-inline: 12px; }
}

@media (max-width: 720px) {
  .hero__actions .btn, .phero__actions .btn, .closing__actions .btn { flex: 1 1 100%; }
  .player__body { grid-template-columns: minmax(0, 1fr); }
  .player__stage { padding: 10px; }
  .rail { border-left: 0; border-top: 1px solid var(--line); padding-bottom: 8px; }
  .rail__who, .rail__tabs, .rail__log { display: none; }
  .player__speeds button:not(.is-active) { display: none; }
  .player__time { min-width: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .grid3, .iguides { grid-template-columns: minmax(0, 1fr); }
  .pgrid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; }
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .frame__split { grid-template-columns: minmax(0, 1fr); }
  .frame__split > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .hide-s { display: none !important; }
  .utable th, .utable td { padding-inline: 12px; }
  .utable th, .utable .nowrap { white-space: normal; }
  .utable .end { padding-left: 0; }
  .utable .badge:not(:last-child) { display: none; }
  .frame__head, .rec__item { padding-inline: 12px; }
  .fdrop { margin-left: 16px; }
  .faq summary { padding: 17px 18px; font-size: 16px; }
  .faq__a p { padding: 0 18px 20px; }
  .rlayer__banner { font-size: 12.5px; gap: 8px; }
  .ftabs { top: calc(var(--header-h) + 14px); }
  .ftabs a { padding: 8px 14px; font-size: 13.5px; }
  .mask { flex-wrap: wrap; }
  .closing__panel { border-radius: 22px; }
  .stage { padding: 10px; border-radius: 20px; }
  .stage > :first-child { animation: none; }
  .stage .shot__note { margin-top: 10px; }
  .offer { border-radius: 24px; }
  .case__says, .case__shows { padding-inline: 20px; }
  .callbox .btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .hero .kicker--pill { font-size: 12.5px; text-wrap: balance; }   /* the home pill names three platforms: one line at 360px, two even lines below that */
  .utable th, .utable td, .frame__head, .rec__item { padding-inline: 10px; }
  .hide-xs { display: none !important; }
  .logo { font-size: 17px; }
  .nav__cta .btn { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html, html.is-settled { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__row { flex: 1 1 auto; flex-wrap: wrap; gap: 14px 30px; padding-right: 0; }
  .marquee__row + .marquee__row { display: none; }
  .dock__reels i, .lost i { animation: none; }
}

@media print {
  .nav, .closing, .rlayer, .dock, .footer__col, .hero__fx, .phero__fx, .ftabs { display: none !important; }
  .section, .band { padding-block: 24px; }
  .band--ink { background: none; color: inherit; }
}