/* =====================================================================
   Tavnio design tokens
   Black and silver, keyed off the mark: near-black ink for surfaces and
   type, the logo's silver shadow stroke as the secondary accent, cool
   neutral grounds. Amber and red are semantic only (warnings, issues).
   Blue appears in exactly one place, the SMS bubbles inside a phone,
   because that is the color a text message is.
   ===================================================================== */
:root {
  --ink: #111213;
  --ink-soft: #3d3f42;
  --ink-muted: #6f7378;
  --ink-faint: #a3a3ad;

  --silver: #a3a3ad;
  --silver-light: #d6d6db;
  --silver-deep: #7c7d85;
  --silver-wash: #ececee;

  --paper: #f4f4f5;
  --paper-raised: #ffffff;
  --paper-deep: #e8e8eb;

  --rule: rgba(17, 18, 19, 0.12);
  --rule-strong: rgba(17, 18, 19, 0.22);

  --amber: #c5711f;
  --amber-wash: #fbeee0;
  --red: #c8371c;
  --sms-blue: #0a84ff;

  --font-display: "Archivo", "Arial Black", Arial, sans-serif;
  /* Film grain for the dark panels: white specks at 9% alpha, tiled. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 160ms;
  --dur-component: 260ms;
  --dur-screen: 560ms;

  /* Lets height transitions interpolate to and from the auto keyword,
     which is what makes the FAQ answer slide instead of snap. */
  interpolate-size: allow-keywords;

  --nav-height: 72px;
  --container: clamp(992px, 100vw, 1240px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-component: 1ms;
    --dur-screen: 1ms;
  }
}

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

html {
  /* 15px root. Every rem on the page keys off this, so the whole site sits
     one notch smaller than browser default without touching each rule. */
  font-size: 15px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 16px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: .9rem;
  transform: translateY(-150%);
  transition: transform var(--dur-component) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.brand:focus-visible { border-radius: 8px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600; font-size: .92rem; line-height: 1;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-component) var(--ease-out),
              color var(--dur-component) var(--ease-out),
              transform var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out);
}
.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
/* A light band crosses the button on hover. Transform only, so it costs
   nothing to animate. */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(255,255,255,0) 36%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,0) 64%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
}
.btn-primary:hover { background: #000; transform: translateY(-1px); }

/* =====================================================================
   Sticky nav
   Floating, transparent, no border, no blur, no shadow. Flips to paper
   over dark sections via .is-on-dark.
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding: 0;
  transition: padding 380ms var(--ease-out);
}
/* Once anything scrolls under it the bar lifts into a floating frosted pill
   the width of the container, and the page blurs through it. The header's
   outer height stays constant (padding grows as the nav shrinks) so the
   page never jumps. */
.site-header.is-scrolled { padding: 10px 0; }
.site-header.is-scrolled .nav { height: calc(var(--nav-height) - 20px); }
/* While the bar sits over a dark section it tints itself so paper nav text
   never lands on paper headline glyphs. On the ink ground the tint is
   invisible; it fades in over a quarter second so the section edge passing
   under the bar never flashes. z-index -1 keeps it behind the nav content. */
/* The bar is transparent at the top of the page and gains a scrim as soon as
   anything scrolls under it. Without this, body copy passed straight through
   the nav on every light section, which is most of the page. */
.site-header::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 0;
  background: rgba(244,244,245,.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(17,18,19,0), 0 18px 40px -24px rgba(17,18,19,0);
  opacity: 0;
  transition:
    opacity 320ms var(--ease-out),
    inset 380ms var(--ease-out),
    border-radius 380ms var(--ease-out),
    box-shadow 380ms var(--ease-out),
    background 320ms var(--ease-out);
  pointer-events: none;
}
.site-header.is-scrolled::before {
  opacity: 1;
  inset: 10px max(16px, calc((100% - var(--container)) / 2));
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(17,18,19,.08), 0 18px 40px -24px rgba(17,18,19,.35);
}
/* Over a dark section the pill flips to ink. */
.site-header.is-on-dark::before {
  opacity: 1;
  background: rgba(17,18,19,.82);
  box-shadow: 0 0 0 1px rgba(244,244,245,.1), 0 18px 40px -24px rgba(0,0,0,.6);
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header::before, .nav { transition: none; }
}

.nav {
  height: var(--nav-height);
  transition: height 380ms var(--ease-out);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em;
  color: var(--ink);
}
.brand-mark { width: 30px; height: 30px; fill: var(--ink); flex: 0 0 auto; }
.brand-mark-shadow { fill: var(--ink-faint); }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 20px;
}
.nav-links a {
  display: block;
  padding: 9px 13px;
  border-radius: 999px;
  font-weight: 500; font-size: .93rem;
  color: var(--ink-soft);
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav-links a:hover { background: rgba(17,18,19,.06); color: var(--ink); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; border-radius: 8px; cursor: pointer;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-component) var(--ease-out), opacity var(--dur-micro); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* While a dark section (automations, final CTA, footer) sits under the bar,
   main.js adds .is-on-dark and the nav flips to paper so it stays legible.
   The bar itself stays transparent and borderless. */
.site-header.is-on-dark .brand,
.site-header.is-on-dark .nav-links a { color: var(--paper); }
.site-header.is-on-dark .nav-links a:hover { background: rgba(244,244,245,.1); color: var(--paper); }
.site-header.is-on-dark .brand-mark { fill: var(--paper); }
.site-header.is-on-dark .btn-primary { background: var(--paper); color: var(--ink); }
.site-header.is-on-dark .btn-primary:hover { background: #fff; }
.site-header.is-on-dark .nav-toggle span { background: var(--paper); }
.site-header.is-on-dark a:focus-visible, .site-header.is-on-dark button:focus-visible { outline-color: var(--paper); }

/* =====================================================================
   Section 1 : Hero
   ===================================================================== */
.hero {
  padding: 28px 28px 64px;
  /* clip, not hidden: a hidden ancestor would become the scroll container
     for the sticky search pill on phones and it would never pin. */
  overflow: clip;
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: .01em;
  margin-bottom: 18px;
}

/* The hero arrives in sequence on load: eyebrow, headline, sub, form, proof,
   then the device. Each piece is a short lift, staggered by 90ms, so the page
   assembles itself rather than appearing all at once. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.js .hero-eyebrow,
.js .hero-headline,
.js .hero-sub,
.js .hero-search,
.js .hero-proof,
.js .hero-stage {
  animation: hero-in 720ms var(--ease-out) both;
}
.js .hero-headline { animation-delay: 90ms; }
.js .hero-sub      { animation-delay: 180ms; }
.js .hero-search   { animation-delay: 270ms; }
.js .hero-proof    { animation-delay: 360ms; }
.js .hero-stage    { animation-delay: 450ms; animation-duration: 900ms; }

/* The eyebrow dot pulses once the hero has settled, so the page has one
   small living detail above the fold. */
@keyframes eyebrow-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--silver-wash); }
  50%      { box-shadow: 0 0 0 7px rgba(163,163,173,.28); }
}
.js .hero-eyebrow-dot { animation: eyebrow-pulse 3.2s var(--ease-out) 1.4s infinite; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-eyebrow, .js .hero-headline, .js .hero-sub,
  .js .hero-search, .js .hero-proof, .js .hero-stage,
  .js .hero-eyebrow-dot { animation: none; }
}
.hero-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--silver-wash);
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: .96;
  letter-spacing: -0.048em;
  max-width: 14ch;
  text-wrap: balance;
  margin-bottom: 20px;
}

.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 44ch;
  text-wrap: pretty;
  margin-bottom: 26px;
}

/* Search pill: the grader itself, in the hero. */
.hero-search {
  display: flex; align-items: center; gap: 6px;
  width: min(100%, 520px);
  padding: 6px 6px 6px 22px;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(17,18,19,.04), 0 12px 32px -12px rgba(17,18,19,.18);
  transition: box-shadow var(--dur-component) var(--ease-out), border-color var(--dur-component) var(--ease-out);
}
.hero-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 1px 2px rgba(17,18,19,.04), 0 16px 40px -12px rgba(17,18,19,.26);
}
.hero-search input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  /* 16px floor: Mobile Safari zooms the page when a focused input is smaller. */
  font: inherit; font-size: max(1rem, 16px); color: var(--ink);
}
.hero-search input::placeholder { color: var(--ink-muted); }
.hero-search-btn { padding: 15px 20px; }
.hero-search-btn svg { transition: transform var(--dur-component) var(--ease-out); }
.hero-search:hover .hero-search-btn svg { transform: translateY(-2px); }

.hero-proof {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .86rem; color: var(--ink-muted);
  margin-top: 16px;
  text-wrap: balance;
}

/* ---------- Stage : silver panel + phone ---------- */
/* Height comes from the phone plus its progress dots. The panel stops 56px
   short (28px stage padding, 22px dots margin, 6px dots) so it ends level
   with the frame and the dots sit on the paper below it. */
.hero-stage {
  position: relative;
  width: 100%;
  margin-top: 40px;
  padding-bottom: 28px;
  display: flex; justify-content: center;
}

/* The panel: black at the base rising to silver at the top, with a light
   source that drifts. --mx and --my follow the pointer (set in main.js, with
   a slow idle drift when nobody is pointing) and move the highlight, so the
   metal looks lit rather than printed. The ramp is weighted to the lower
   half because the phone covers the middle: most of the black-to-silver
   travel has to happen where it is actually visible. */
.hero-stage-wash {
  --mx: 50%;
  --my: 78%;
  position: absolute;
  top: 80px; bottom: 56px; left: 0; right: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    var(--grain),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    linear-gradient(0deg,
      #08090a 0%,
      var(--ink) 8%,
      #26282c 22%,
      #4c4e55 38%,
      var(--silver-deep) 54%,
      var(--silver) 72%,
      var(--silver-light) 92%,
      #e6e6e9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.6);
}
/* The moving highlight. Kept small and low so it lights the dark base without
   washing out the silver above it. */
.hero-stage-wash::before {
  content: "";
  position: absolute;
  left: var(--mx); top: var(--my);
  width: 46%; aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.3),
    rgba(255,255,255,.09) 44%,
    rgba(255,255,255,0) 70%);
  transition: left 420ms var(--ease-out), top 420ms var(--ease-out);
  pointer-events: none;
  will-change: left, top;
}
/* A second, slower sheen band that keeps the panel alive with no pointer. */
.hero-stage-wash::after {
  content: "";
  position: absolute; inset: -40% -10%;
  background: linear-gradient(112deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,0) 60%);
  animation: stage-sheen 9s linear infinite;
  pointer-events: none;
}
@keyframes stage-sheen {
  from { transform: translateX(-38%); }
  to   { transform: translateX(38%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage-wash::after { animation: none; }
  .hero-stage-wash::before { transition: none; }
}

/* ---------- Phone: pure CSS device frame ---------- */
.phone {
  position: relative;
  z-index: 2;
  width: 280px;
  flex: 0 0 auto;
}


/* The rail. A real machined edge reads as three bands across its width: a
   bright catch on the outer chamfer, a dark core on the flat, and a dimmer
   second catch where it turns back toward the glass. The vertical pass on
   top of that is the room light falling down the device. */
.phone-frame {
  position: relative;
  aspect-ratio: 300 / 620;
  border-radius: 46px;
  background:
    linear-gradient(180deg,
      transparent 0 9.6%,
      rgba(255,255,255,.22) 9.6% calc(9.6% + 1px),
      transparent calc(9.6% + 1px) 90.2%,
      rgba(255,255,255,.22) 90.2% calc(90.2% + 1px),
      transparent calc(90.2% + 1px)),
    linear-gradient(180deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,0) 12%,
      rgba(0,0,0,.28) 62%,
      rgba(255,255,255,.08) 100%),
    linear-gradient(90deg,
      #6c6f76 0%,
      #3a3d43 5%,
      #202226 16%,
      #1a1b1e 50%,
      #202226 84%,
      #3a3d43 95%,
      #6c6f76 100%);
  padding: 11px;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.26),
    inset -1px -1px 0 rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4),
    0 24px 50px -18px rgba(0,0,0,.7);
}
/* The glass sits below the rail, so a hairline shadow separates them. */
.phone-screen {
  box-shadow:
    0 0 0 7px #07080a,
    0 0 0 7.5px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 1px 3px rgba(0,0,0,.5);
}
/* Two reflections on the glass: a broad diagonal wipe, and a tight specular
   streak near the top-left corner where a window would land. */
.phone-screen::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(148deg,
      rgba(255,255,255,.2) 0%,
      rgba(255,255,255,.05) 16%,
      rgba(255,255,255,0) 34%),
    radial-gradient(52% 28% at 10% 3%, rgba(255,255,255,.16), rgba(255,255,255,0) 72%);
  pointer-events: none;
  z-index: 4;
}

/* Buttons. Each is a small slab with its own top highlight and base shadow,
   inset slightly into the rail rather than floating beside it. */
.phone-frame::before,
.phone-frame::after,
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #9296a0 0%, #5c6068 30%, #383b41 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 1px 3px rgba(0,0,0,.6);
  z-index: 1;
}
/* Left rail: action button, then the volume pair. */
.phone::after  { left: -3px; top: 84px;  height: 20px; }
.phone::before { left: -3px; top: 128px; height: 34px; }
.phone-frame::before {
  left: -3px; top: 172px; height: 34px;
  background: linear-gradient(90deg, #71747c 0%, #45484e 40%, #26282c 100%);
}
/* Right rail: the long side button, lit from the other side. */
.phone-frame::after {
  right: -3px; top: 158px; height: 62px;
  background: linear-gradient(270deg, #71747c 0%, #45484e 40%, #26282c 100%);
}

/* The island is a cutout through the glass, so it takes a faint rim of
   light from the screen around its edge and reads slightly recessed. */
.phone-island {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  width: 82px; height: 26px;
  border-radius: 999px;
  background: #050506;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.07),
    0 0 0 .5px rgba(255,255,255,.06);
  z-index: 3;
}
/* Camera lens: a dark well with a blue coating catch and a tiny specular
   dot, which is what makes a drawn lens stop looking like a flat circle. */
.phone-island::after {
  content: "";
  position: absolute; top: 50%; right: 9px;
  transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.5) 0 8%, rgba(255,255,255,0) 30%),
    radial-gradient(circle at 62% 68%, #2f4160 0%, #1b2740 40%, #07090d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
/* The speaker slot, left of the lens. */
.phone-island::before {
  content: "";
  position: absolute; top: 50%; left: 14px;
  transform: translateY(-50%);
  width: 26px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.05);
}

.phone-status {
  position: absolute;
  top: 26px; left: 26px; right: 26px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body);
  font-size: .8rem; font-weight: 600;
  color: var(--ink);
  z-index: 3;
  pointer-events: none;
}
.phone-status-icons { display: flex; align-items: center; gap: 5px; }
.phone-status-icons svg { fill: currentColor; }

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 35px;
  background: var(--paper);
  overflow: hidden;
  display: grid;
  padding: 68px 16px 20px;
  text-align: left;
}

/* All three cards stack in one grid cell; only one is visible at a time.
   Outgoing card fades out first, then incoming fades in, so text never
   overlaps mid-transition. */
.phone-card {
  grid-area: 1 / 1;
  background: var(--paper-raised);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 1px 2px rgba(17,18,19,.05), 0 8px 24px -10px rgba(17,18,19,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* Longhands on purpose. A `transition` shorthand that mixes a var()
     duration with a literal delay was being dropped by the parser, which
     froze the incoming card at opacity 0 forever. Longhands cannot mis-parse. */
  transition-property: opacity, transform, visibility;
  transition-duration: 220ms, 220ms, 0ms;
  transition-timing-function: ease, ease, linear;
  transition-delay: 0ms, 0ms, 220ms;
  align-self: start;
}
.phone-card.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* Visibility switches on instantly so opacity has a visible element to
     tween. Opacity and transform wait 220ms so the outgoing card finishes
     fading before this one begins. */
  transition-property: opacity, transform, visibility;
  transition-duration: var(--dur-screen), var(--dur-screen), 0ms;
  transition-timing-function: ease, var(--ease-out), linear;
  transition-delay: 220ms, 220ms, 0ms;
}

/* Hero phone: the report is one long page that scrolls inside the screen,
   the way owner.com's phone does. --feed-d is how far it has to travel for
   the last card to land at the bottom of the visible part of the screen;
   main.js measures it, CSS runs the loop. Down slowly, rest, back up. */
.phone-feed { display: flex; flex-direction: column; gap: 12px; align-self: start; will-change: transform; }
.phone-feed .phone-card { grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none; }
/* A solid strip of paper under the status bar, so the report slides under
   the time and the island instead of through them. */
#heroPhone .phone-screen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 72%, rgba(244,244,245,0) 100%); }
#heroPhone .phone-feed { position: relative; z-index: 1; }
.js .phone-feed.is-scrolling { animation: feed-scroll 15s ease-in-out infinite; }
@keyframes feed-scroll {
  0%, 10% { transform: translateY(0); }
  68%, 82% { transform: translateY(calc(var(--feed-d, 0px) * -1)); }
  94%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .js .phone-feed.is-scrolling { animation: none; } }

.phone-card-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}
.phone-card-title strong { font-size: 1.35rem; letter-spacing: -0.03em; }

/* Leaderboard */
.ldr { display: flex; flex-direction: column; gap: 6px; }
.ldr-row {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  background: var(--paper);
  font-size: .82rem;
}
.ldr-row.is-you { background: var(--silver-wash); outline: 1px solid var(--silver); }
.ldr-rank { font-family: var(--font-display); font-weight: 700; font-size: .72rem; color: var(--ink-muted); text-align: center; }
.ldr-row.is-you .ldr-rank { color: var(--ink); font-size: .9rem; }
.ldr-name { display: flex; flex-direction: column; font-weight: 600; line-height: 1.15; }
.ldr-name small { font-weight: 500; font-size: .7rem; color: var(--amber); margin-top: 2px; }
.ldr-score { font-family: var(--font-display); font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.ldr-row.is-you .ldr-score { color: var(--red); }
.ldr-score small { font-weight: 500; font-size: .68rem; color: var(--ink-faint); }

/* Issues */
.issues { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.issue {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
  padding: 10px 11px;
  border-radius: 12px;
  background: var(--paper);
  font-size: .8rem; line-height: 1.3;
}
.issue-flag {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  display: grid; place-items: center;
  margin-top: 1px;
}
.issue b { display: block; font-weight: 600; }
.issue small { display: block; color: var(--ink-muted); font-size: .72rem; margin-top: 2px; }
.phone-cta {
  background: var(--ink); color: var(--paper);
  border-radius: 12px;
  padding: 13px;
  text-align: center;
  font-weight: 600; font-size: .86rem;
}

/* Gauge */
.gauge-wrap { position: relative; width: 132px; margin: 4px auto 0; }
.gauge { width: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--paper-deep); stroke-width: 9; }
.gauge-fill {
  fill: none; stroke: var(--amber); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 314.16;
  stroke-dashoffset: calc(314.16 - (314.16 * var(--gauge-pct, 0) / 100));
  transition: stroke-dashoffset 900ms var(--ease-out);
}
.gauge-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.gauge-num { font-weight: 800; font-size: 2.3rem; line-height: 1; letter-spacing: -0.04em; }
.gauge-den { font-weight: 500; font-size: .7rem; color: var(--ink-muted); margin-top: 3px; }
.gauge-caption { text-align: center; font-size: .78rem; color: var(--ink-muted); margin: 8px 0 14px; line-height: 1.3; }
.gauge-caption strong { display: block; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; }
.grade-poor { color: var(--amber); }
.grade-fair { color: var(--amber); }

.subscores { display: flex; flex-direction: column; gap: 7px; }
.subscores li {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--paper);
  font-size: .8rem;
}
.ring {
  width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--amber) calc(var(--gauge-pct, 0) * 1%), var(--paper-deep) 0);
  -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%);
          mask: radial-gradient(circle, transparent 55%, #000 57%);
}
.sub-name { display: flex; flex-direction: column; font-weight: 600; line-height: 1.15; }
.sub-name small { font-weight: 500; font-size: .7rem; margin-top: 2px; }
.sub-val { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.sub-val small { font-weight: 500; font-size: .68rem; color: var(--ink-faint); }

/* =====================================================================
   Shared section primitives (sections 2 through 10)
   Section heads sit left, like a spec sheet. Only the final CTA centers.
   ===================================================================== */
/* Three weights, so vertical space tells the reader which sections carry an
   argument and which are a lighter beat. */
.section { padding: 92px 28px; }
.section-major { padding: 128px 28px; }
.section-minor { padding: 68px 28px; }
.section-inner { max-width: var(--container); margin: 0 auto; }
.section-inner-narrow { max-width: 780px; }
.section-head { max-width: 760px; margin-bottom: 48px; }
/* Two sections split their head into two columns so the same eyebrow,
   headline, lede gesture does not fire identically four times in a row. */
@media (min-width: 901px) {
  /* #offer keeps the standard stacked head: its lede is one short line and
     in a second column it floated against nothing. */
  .section-how .section-head {
    max-width: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px; align-items: end;
  }
  .section-how .section-head .eyebrow { grid-column: 1 / -1; }
  .section-how .section-head .lede { margin-bottom: 6px; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--silver); border-radius: 2px; }
.eyebrow-light { color: rgba(244,244,245,.72); }

.h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.3vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
  max-width: 20ch;
  margin-bottom: 18px;
}
.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Check and cross glyphs, drawn in CSS so they take theme color. */
.check, .x {
  position: relative;
  width: 20px; height: 20px; border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 2px;
}
.check { background: var(--silver-wash); }
.check::before {
  content: "";
  position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.x { background: rgba(17,18,19,.07); }
.x::before, .x::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 2px; border-radius: 2px;
  background: var(--ink-muted);
  transform: translate(-50%, -50%) rotate(45deg);
}
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* =====================================================================
   Scroll reveals
   One shared treatment: content lifts a little and fades in the first time
   it is seen. .reveal-group staggers its own children from JS. Everything
   is visible by default and only hidden once JS confirms it will animate,
   so the page still reads with scripting off.
   ===================================================================== */
/* Text arrives quickly and close; only the device and panel blocks get the
   fuller travel. An identical 620ms fade on every row was latency, not
   direction. */
.js .reveal,
.js .reveal-group > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.js .compare,
.js .craft,
.js .auto-phone-wrap,
.js .grader-checks,
.js .how-grid {
  transform: translateY(18px);
  transition-duration: 620ms;
}
.js .reveal.is-in,
.js .reveal-group > *.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal-group > * { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Section 2 : Rent vs own
   ===================================================================== */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.compare-col {
  border-radius: 24px; padding: 32px 32px 28px;
  transition: transform var(--dur-component) var(--ease-out),
              box-shadow var(--dur-component) var(--ease-out);
}
/* Each column lifts slightly on hover, which makes the pair feel like a
   choice rather than a static table. */
.compare-col-rent:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(17,18,19,.4); }
.compare-col-own:hover  { transform: translateY(-3px); box-shadow: 0 22px 46px -22px rgba(0,0,0,.6); }
/* The list items stagger in behind their own column. */
.compare-list li {
  transition: transform var(--dur-component) var(--ease-out);
}
.compare-col:hover .compare-list li { transform: translateX(2px); }
.compare-col-rent { background: var(--paper-deep); }
.compare-col-own { background: var(--ink); color: var(--paper); }
.compare-label {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.compare-list { display: flex; flex-direction: column; gap: 13px; }
.compare-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start;
  font-size: .98rem; line-height: 1.42;
}
.compare-col-own .check { background: rgba(244,244,245,.16); }
.compare-col-own .check::before { border-color: var(--paper); }

.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 60px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-strip li {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 28px 28px 0;
}
/* A rule that draws itself under whichever stat you are reading. */
.stat-strip li::after {
  content: "";
  position: absolute; left: 0; right: 28px; bottom: -1px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.stat-strip li:hover::after { transform: scaleX(1); }
.stat-strip li + li::after { left: 28px; }
.stat-strip li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.stat-strip strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Direct child only: as a descendant selector this also caught the count-up
   spans nested inside <strong> and rendered them at 13.8px. */
.stat-strip > li > span { font-size: .92rem; color: var(--ink-muted); max-width: 28ch; text-wrap: pretty; }
.stat-source { margin-top: 16px; font-size: .84rem; color: var(--ink-muted); max-width: 70ch; }

/* =====================================================================
   Section 3 : What you get (spec sheet)
   ===================================================================== */
.section-offer { background: var(--paper-raised); }
/* The sheet is one grid and each row is a subgrid, so the description and
   tag columns line up across rows no matter how wide a tag is. */
.spec {
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) auto;
  column-gap: 32px;
}
.spec-row {
  position: relative;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
  transition: background var(--dur-component) var(--ease-out);
}
/* Hovering a row tints it and darkens its tag, so the eye can hold a line
   in a wide table without a heavy zebra stripe. */
.spec-row:hover { background: linear-gradient(90deg, rgba(17,18,19,.03), rgba(17,18,19,0) 70%); }
.spec-row dd.spec-tag { transition: border-color var(--dur-component), color var(--dur-component); }
.spec-row:hover dd.spec-tag { border-color: var(--ink); color: var(--ink); }
.spec-row dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.025em; line-height: 1.1;
  text-wrap: balance;
}
.spec-row dd { color: var(--ink-soft); font-size: 1rem; max-width: 58ch; text-wrap: pretty; }
.spec-row dd.spec-tag {
  justify-self: end;
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* =====================================================================
   Section 4 : Spot the template
   ===================================================================== */
.craft { display: flex; flex-direction: column; gap: 28px; }

.segmented {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  align-self: flex-start;
  padding: 4px;
  background: var(--paper-deep);
  border-radius: 999px;
}
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.segmented label {
  position: relative; z-index: 2;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600; font-size: .9rem;
  color: var(--ink-muted);
  text-align: center; cursor: pointer;
  transition: color var(--dur-component) var(--ease-out);
}
.segmented-thumb {
  position: absolute; z-index: 1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--paper-raised);
  box-shadow: 0 1px 2px rgba(17,18,19,.08), 0 6px 16px -8px rgba(17,18,19,.25);
  transition: transform var(--dur-component) var(--ease-out);
}
.segmented:has(#viewDrafted:checked) .segmented-thumb { transform: translateX(100%); }
.segmented:has(#viewTemplate:checked) label[for="viewTemplate"],
.segmented:has(#viewDrafted:checked) label[for="viewDrafted"] { color: var(--ink); }
.segmented input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }

.craft-stage { display: grid; }
.craft-panel { grid-area: 1 / 1; }
/* The hidden panel collapses to zero height so the stage is sized by the
   visible one, not by whichever panel happens to be taller. */
.craft:has(#viewTemplate:checked) .craft-panel-drafted,
.craft:has(#viewDrafted:checked) .craft-panel-template { visibility: hidden; opacity: 0; pointer-events: none; max-height: 0; overflow: hidden; }
.craft-panel { max-height: 4000px; transition: opacity var(--dur-component) var(--ease-out); }

.craft-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
  gap: 40px;
  /* Centred against the laptop: top-aligned, the short tells list left a
     large void beside a 600px device. */
  align-items: center;
}


/* ---------- Laptop: dark-mode aluminium shell around the browser ----------
   Three parts, the way the real object is built: a lid whose bezel catches
   light on its outer chamfer, a hinge line where the lid meets the body,
   and a tapered base that throws a contact shadow onto the surface.
   Drawn in CSS, no images. */
.laptop { position: relative; }
.laptop-lid {
  position: relative;
  border-radius: 22px 22px 5px 5px;
  padding: 13px 13px 15px;
  /* Vertical pass for the room light, horizontal pass for the chamfers on
     the left and right edges of the lid. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 16%),
    linear-gradient(90deg,
      #55585f 0%,
      #303237 1.5%,
      #212327 6%,
      #1b1c1f 50%,
      #212327 94%,
      #303237 98.5%,
      #55585f 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 30px 60px -30px rgba(0,0,0,.7);
}
/* The camera dot, centred in the top bezel. */
.laptop-lid::before {
  content: "";
  position: absolute; top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4a4e55, #101114 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04);
}
/* The hinge: a dark recess where the lid meets the body, with a highlight
   on the cylinder above it. Without this the lid looks glued to the base. */
.laptop-lid::after {
  content: "";
  position: absolute; left: 12%; right: 12%; bottom: -3px;
  z-index: 2;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #43464c, #101114 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
/* The base: wider than the lid and tapered, so the eye reads a wedge. The
   ::after is the contact shadow it casts on whatever it is standing on. */
.laptop-base {
  position: relative;
  height: 16px;
  margin: 0 -26px;
  border-radius: 3px 3px 13px 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%),
    linear-gradient(90deg,
      #4d5057 0%,
      #2b2d31 2%,
      #212327 50%,
      #2b2d31 98%,
      #4d5057 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -2px 3px rgba(0,0,0,.6);
}
.laptop-base::after {
  content: "";
  position: absolute; left: 4%; right: 4%; bottom: -14px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,0) 78%);
  pointer-events: none;
}
/* The thumb notch cut into the front lip. */
.laptop-notch {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 88px; height: 6px;
  border-radius: 0 0 9px 9px;
  background: #131417;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}

/* The page itself, inside the lid. Chrome is dark; the rendered page below
   it stays light, the way a real browser in dark mode looks. */
.browser {
  border-radius: 10px;
  background: var(--paper-raised);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.55);
}
/* The pins pop in after their panel settles, one after another, so the eye
   is walked through the numbered tells instead of meeting all four at once. */
@keyframes pin-in {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
/* The pins wait for their panel to be seen. As a load-time animation they
   finished thousands of pixels above the fold and nobody ever saw them.
   Delays key off the pin's container so the walk is 1, 2, 3, 4 on both
   panels rather than the source order the old chain produced. */
.js .craft-panel .pin { opacity: 0; }
.js .craft-panel.is-in .pin { animation: pin-in 420ms var(--ease-out) both; }
.js .mock .pin { animation-delay: 260ms; }
.js .mock-photo-t .pin, .js .mock-photo-d .pin { animation-delay: 360ms; }
.js .mock-cards .pin, .js .mock-callbar .pin { animation-delay: 460ms; }
.js .mock-review .pin { animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  .js .craft-panel .pin { animation: none; }
}
/* Tab strip: traffic lights, then the active tab lifted out of the strip the
   way a real browser draws it, with a dimmer sibling behind it. */
.browser-tabs {
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 12px 0;
  background: #1c1d20;
  min-width: 0; overflow: hidden;
}
.browser-tabs .dots { display: flex; gap: 6px; align-items: center; padding: 0 8px 9px 0; }
.browser-tabs .dots s { width: 9px; height: 9px; border-radius: 50%; text-decoration: none; }
.browser-tabs .dots s:nth-child(1) { background: #ec6a5e; }
.browser-tabs .dots s:nth-child(2) { background: #f4bf50; }
.browser-tabs .dots s:nth-child(3) { background: #61c554; }
.browser-tabs .tab {
  display: flex; align-items: center; gap: 6px;
  /* flex-shrink is what keeps a long page title from widening the device. */
  flex: 0 1 auto;
  max-width: 190px; min-width: 0;
  padding: 7px 12px 8px;
  border-radius: 8px 8px 0 0;
  font-size: .66rem; font-weight: 500;
  color: rgba(244,244,245,.45);
  background: #17181a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* text-overflow needs a real box: a bare text node in a flex container is
   an anonymous item and gets sliced instead of ellipsised. */
.browser-tabs .tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-tabs .tab b {
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 2px;
  background: rgba(244,244,245,.22);
}
.browser-tabs .tab.is-active {
  color: rgba(244,244,245,.9);
  background: #2b2d31;
}
.browser-tabs .tab.is-active b { background: var(--silver); }

.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 10px;
  background: #2b2d31;
  border-bottom: 1px solid rgba(0,0,0,.55);
}
.browser-bar i {
  flex: 1;
  font-style: normal; font-size: .72rem; color: rgba(244,244,245,.62);
  padding: 5px 12px; border-radius: 999px;
  background: #1b1c1f; border: 1px solid rgba(255,255,255,.07);
}
/* 470px matches the template mock's natural height, so flipping the toggle
   never moves the content below the stage. */
.mock { position: relative; padding: 18px 22px 0; min-height: 470px; }
.mock-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.mock-nav b { width: 26px; height: 10px; border-radius: 3px; background: var(--ink-faint); }
.mock-nav b.mark { width: 14px; height: 14px; background: var(--ink); border-radius: 3px; }
.mock-nav i { width: 34px; height: 6px; border-radius: 3px; background: var(--rule-strong); }
.mock-nav em {
  margin-left: auto; font-style: normal;
  font-size: .68rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
}

/* Template mock. Deliberately generic: system font, default blue, centered. */
.mock-template { font-family: Arial, Helvetica, sans-serif; color: #1f2937; }
.mock-hero-t {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
  padding: 6px 20px 18px;
}
.mock-pill {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #2563eb; background: #dbeafe;
  padding: 4px 10px; border-radius: 999px;
}
.mock-h1-t { position: relative; font-size: 1.35rem; font-weight: 800; margin-top: 4px; }
.mock-p-t { font-size: .74rem; color: #6b7280; max-width: 30ch; }
.mock-btn-blue {
  position: relative; display: inline-block;
  margin-top: 6px;
  font-size: .74rem; font-weight: 700;
  color: #fff; background: #2563eb;
  padding: 8px 16px; border-radius: 8px;
}
.mock-photo-t {
  position: relative;
  margin: 8px 20px;
  height: 96px; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #eef0f3 10px 20px);
  display: grid; place-items: center;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #9ca3af;
}
.mock-cards {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 30px 20px 22px;
}
.mock-cards > div {
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mock-cards s { display: block; width: 26px; height: 26px; border-radius: 50%; background: #dbeafe; text-decoration: none; }
.mock-cards u { display: block; width: 70%; height: 6px; border-radius: 3px; background: #e5e7eb; text-decoration: none; }
.mock-cards u + u { width: 50%; }

/* Drafted mock. Tavnio's own system: display face, real-photo slot, call bar. */
/* The drafted page runs dark, so the whole laptop reads as one dark device.
   The template mock stays light on purpose: that contrast is the section. */
.browser-dark { background: #101113; }
.mock-drafted { color: var(--paper); padding-bottom: 0; display: flex; flex-direction: column; }
.mock-drafted .mock-nav b { background: rgba(244,244,245,.28); }
.mock-drafted .mock-nav b.mark { background: var(--paper); }
.mock-drafted .mock-nav i { background: rgba(244,244,245,.16); }
.mock-drafted .mock-nav em { background: var(--paper); color: var(--ink); }
/* A service strip fills the space between the review card and the call bar
   with real content: named services, not three identical placeholder boxes. */
.mock-services { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mock-services span {
  font-size: .66rem; font-weight: 600;
  color: rgba(244,244,245,.78);
  border: 1px solid rgba(244,244,245,.18); border-radius: 999px;
  padding: 5px 10px;
}
.mock-drafted .mock-callbar { margin-top: auto; }
.mock-hero-d {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: center;
  padding: 4px 0 16px;
}
.mock-hero-d-text { position: relative; }
.mock-h1-d {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem;
  letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: 8px;
}
.mock-p-d { font-size: .72rem; color: rgba(244,244,245,.72); line-height: 1.35; margin-bottom: 10px; }
.mock-btn-ink {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  background: var(--paper); color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
}
.mock-photo-d {
  position: relative;
  height: 168px; border-radius: 12px;
  background:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(244,244,245,.07) 15px 16px),
    repeating-linear-gradient(90deg, transparent 0 15px, rgba(244,244,245,.07) 15px 16px),
    #1b1c1f;
  outline: 1px dashed rgba(244,244,245,.28); outline-offset: -6px;
  display: grid; place-items: center;
  font-size: .66rem; letter-spacing: .04em; text-align: center; color: rgba(244,244,245,.6);
  padding: 8px;
}
.mock-review {
  position: relative;
  border: 1px solid rgba(244,244,245,.14); border-radius: 12px;
  background: #1b1c1f;
  padding: 10px 12px; margin-bottom: 12px;
  font-size: .72rem; line-height: 1.35;
}
.mock-stars { color: var(--amber); font-size: .68rem; letter-spacing: 1px; margin-bottom: 2px; }
.mock-review-date { display: block; font-size: .62rem; color: rgba(244,244,245,.5); margin-bottom: 5px; }
.mock-reply { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(244,244,245,.16); color: rgba(244,244,245,.55); }
.mock-callbar {
  position: relative;
  margin: auto -22px 0;
  padding: 12px;
  background: var(--paper); color: var(--ink);
  text-align: center; font-weight: 600; font-size: .78rem;
}

/* Numbered pins on both mocks. Red for tells, ink for the fixes. */
.pin {
  position: absolute; z-index: 3;
  left: var(--x); top: var(--y);
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--paper-raised);
}
.pin-ink { background: var(--ink); }
/* On the dark drafted page the ink pins need a light ring to separate. */
.mock-drafted .pin { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 3px #101113; }
.mock-drafted .mock-callbar .pin { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 3px var(--paper); }
.mock-callbar .pin { box-shadow: 0 0 0 3px var(--paper); }

.tells { display: flex; flex-direction: column; gap: 28px; padding-top: 4px; }
.tells li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: .96rem; line-height: 1.4; color: var(--ink-soft);
  text-wrap: pretty;
}
.tells b {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .72rem;
  display: grid; place-items: center;
  margin-top: 1px;
  transition: transform var(--dur-component) var(--ease-out),
              box-shadow var(--dur-component) var(--ease-out);
}
.tells li { transition: color var(--dur-component) var(--ease-out); }
.tells li:hover { color: var(--ink); }
.tells li:hover b { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(200,55,28,.15); }
.tells-good li:hover b { box-shadow: 0 0 0 4px rgba(17,18,19,.12); }
.tells-good b { background: var(--ink); }

/* =====================================================================
   Section 4B : Recent work
   Each build is a browser frame holding a full-page screenshot. On hover
   the shot scrolls the whole page inside the frame and a fake scrollbar
   thumb tracks it, so a still image behaves like a real site.
   ===================================================================== */
.section-work { background: var(--paper-raised); overflow-x: clip; }

.figs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.fig-link {
  display: flex; flex-direction: column; gap: 18px;
  color: inherit;
}
.fig-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 14px; }

.fig-stage { position: relative; display: block; }
/* A pool of light that lifts under the frame on hover. */
.fig-glow {
  position: absolute; inset: 12% -6% -8%;
  background: radial-gradient(closest-side, rgba(17,18,19,.28), rgba(17,18,19,0) 72%);
  opacity: 0; transform: translateY(8px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
  pointer-events: none;
}
.fig-link:hover .fig-glow,
.fig-link:focus-visible .fig-glow { opacity: 1; transform: none; }

.fig-frame {
  position: relative; display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #17181a;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 18px 40px -24px rgba(17,18,19,.5);
  transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out);
}
.fig-link:hover .fig-frame,
.fig-link:focus-visible .fig-frame {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 34px 60px -28px rgba(17,18,19,.6);
}

/* Chrome: dots and a locked address, matching the device mocks elsewhere. */
.fig-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #2b2d31, #232529);
  border-bottom: 1px solid rgba(0,0,0,.5);
}
.fig-dots { display: flex; gap: 5px; flex: 0 0 auto; }
.fig-dots i { width: 8px; height: 8px; border-radius: 50%; background: #4a4d53; }
.fig-dots i:nth-child(1) { background: #ec6a5e; }
.fig-dots i:nth-child(2) { background: #f4bf50; }
.fig-dots i:nth-child(3) { background: #61c554; }
.fig-url {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: #1b1c1f; border: 1px solid rgba(255,255,255,.07);
  font-size: .72rem; color: rgba(244,244,245,.66);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fig-lock { flex: 0 0 auto; opacity: .55; }

/* The viewport shows one screenful; the shot inside is the whole page. */
.fig-view {
  position: relative; display: block;
  aspect-ratio: 16 / 10.6;
  overflow: hidden;
  background: var(--paper-deep);
}
.fig-shot {
  display: block; width: 100%; height: auto;
  /* Sits at the top of the page, then travels up to reveal the rest. The
     distance is everything below the first screenful. */
  transform: translateY(0);
  transition: transform 3200ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.fig-link:hover .fig-shot,
.fig-link:focus-visible .fig-shot {
  transform: translateY(calc((100% - (100% * var(--thumb-frac))) * -1));
}
/* A soft diagonal glare so the frame reads as glass, not a flat image. */
.fig-glare {
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%);
  pointer-events: none;
}
/* The fake scrollbar. Its thumb is as tall a fraction of the rail as the
   viewport is of the page, and it travels the rail as the shot scrolls. */
.fig-rail {
  position: absolute; top: 6px; right: 5px; bottom: 6px;
  width: 3px; border-radius: 3px;
  background: rgba(17,18,19,.14);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.fig-link:hover .fig-rail,
.fig-link:focus-visible .fig-rail { opacity: 1; }
.fig-thumb {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100% * var(--thumb-frac));
  border-radius: 3px;
  background: rgba(17,18,19,.55);
  transition: transform 3200ms cubic-bezier(.22, .61, .36, 1);
}
/* The thumb is --thumb-frac of the rail, so its travel is the remaining
   fraction expressed against its own height: (1 - frac) / frac. */
.fig-link:hover .fig-thumb,
.fig-link:focus-visible .fig-thumb {
  transform: translateY(calc((1 - var(--thumb-frac)) / var(--thumb-frac) * 100%));
}

.fig-caption { display: flex; flex-direction: column; gap: 7px; }
.fig-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: .78rem;
  color: var(--ink-muted);
}
.fig-no { font-family: var(--font-display); letter-spacing: .04em; }
.fig-domain {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-muted);
  transition: color var(--dur-component) var(--ease-out);
}
.fig-link:hover .fig-domain { color: var(--ink); }
.fig-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em;
}
.fig-desc { font-size: .92rem; color: var(--ink-soft); text-wrap: pretty; }

.figs-note {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: .88rem; color: var(--ink-muted);
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  .fig-shot, .fig-thumb, .fig-frame, .fig-glow { transition: none; }
  .fig-link:hover .fig-shot, .fig-link:focus-visible .fig-shot { transform: none; }
}

/* =====================================================================
   Secondary pages: shared page head and figure extras
   ===================================================================== */
/* Interior pages open with a head rather than a hero, so they start below
   the nav without the homepage stage. */
.page-head { padding-top: 132px; padding-bottom: 52px; }
/* The head sits in a narrow measure but the section below it is full width,
   so the head does not need the default section bottom padding as well. */
.page-head + .section { padding-top: 0; }
.h1-page {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.03; letter-spacing: -0.04em;
  max-width: 20ch;
  text-wrap: balance;
  margin: 14px 0 18px;
}
.page-head .lede { max-width: 60ch; }
/* The current page is marked in the nav. */
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(17,18,19,.06); }
.site-header.is-on-dark .nav-links a[aria-current="page"] { color: var(--paper); background: rgba(244,244,245,.14); }

/* On the dedicated work page the figures run two-up and larger. */
.figs-lg { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
/* An odd last figure spans both columns rather than leaving an empty cell
   that reads as a missing case study. The guard removes itself once a
   fourth build is added. */
.figs-lg > .fig:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  /* Spanning both columns would make the last screenshot twice the size of
     its siblings, so the card itself keeps a two-up width and centres. */
  max-width: calc((100% - 40px) / 2);
  margin-inline: auto;
}
.fig-facts {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: 4px;
  font-size: .82rem; color: var(--ink-muted);
}
.fig-facts b {
  font-family: var(--font-display); font-weight: 800;
  color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.figs-more { border-bottom: 1px solid var(--rule-strong); }
.figs-more:hover { border-color: var(--ink); }
.section-work-cta { background: var(--paper-deep); }

/* =====================================================================
   Multi-page components: pillars, trades, timeline, comparison, FAQ groups
   ===================================================================== */
/* Pillars: a four-up summary. Used for the platform teaser on the homepage
   and the monthly report on the platform page. */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pillar {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 24px 22px;
  transition: transform var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out);
}
.pillar:hover { transform: translateY(-3px); border-color: var(--silver-deep); }
.pillar b {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em;
}
.pillar span { font-size: .92rem; color: var(--ink-soft); text-wrap: pretty; }
.pillar small {
  margin-top: auto; padding-top: 10px;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-muted);
}

/* Trades: the industries grid, same card language as the pillars. */
.trades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trade {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 26px 24px;
  transition: transform var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out);
}
.trade:hover { transform: translateY(-3px); border-color: var(--silver-deep); }
.trade b {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.12rem; letter-spacing: -0.02em;
}
.trade span { font-size: .93rem; color: var(--ink-soft); text-wrap: pretty; }
.trade small {
  margin-top: auto; padding-top: 12px;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint);
}
.trade-live {
  margin-top: auto; padding-top: 12px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .84rem; font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  transition: border-color var(--dur-component) var(--ease-out), gap var(--dur-component) var(--ease-out);
}
.trade-live:hover { border-color: var(--ink); gap: 9px; }
.trade-live:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Timeline: a dated rail for the how-it-works page. */
.timeline { max-width: 820px; border-top: 1px solid var(--rule); }
.tl {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}
.tl-when {
  font-family: var(--font-display);
  font-weight: 800; font-size: .95rem; letter-spacing: -0.01em;
  color: var(--ink);
  padding-top: 3px;
}
.tl h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.tl p { font-size: .95rem; color: var(--ink-soft); text-wrap: pretty; max-width: 62ch; }

/* Comparison table. Wide content scrolls inside its own box on phones. */
.cmp-wrap {
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 20px;
  -webkit-overflow-scrolling: touch;
}
.cmp { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.cmp th, .cmp td {
  padding: 15px 18px;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.cmp th {
  font-family: var(--font-display);
  font-weight: 700; font-size: .95rem; letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--paper-deep);
}
.cmp th.is-us { background: var(--ink); color: var(--paper); }
.cmp tbody td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp td.is-us { background: rgba(17,18,19,.035); color: var(--ink); }
.cmp tbody tr:last-child td { border-bottom: none; }

/* FAQ groups on the questions page. */
.faq-group + .faq-group { margin-top: 64px; }
.faq-group .section-head { margin-bottom: 20px; }

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .trades { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars, .trades { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .cmp-wrap { border-radius: 14px; }
}

/* Comparison table on narrow screens: the row labels stay put while the
   columns scroll under them, and a hint says the box moves. */
.cmp th:first-child,
.cmp tbody td:first-child { position: sticky; left: 0; z-index: 1; }
.cmp th:first-child { background: var(--paper-deep); }
.cmp tbody td:first-child { background: var(--paper); box-shadow: 1px 0 0 var(--rule); }
.cmp-hint {
  display: none;
  align-items: center; gap: 6px; white-space: nowrap;
  margin: 0 0 12px;
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-muted);
}
.cmp-hint svg { flex: none; }
@media (max-width: 820px) {
  .cmp-hint { display: inline-flex; }
  .cmp { min-width: 680px; }
  .cmp tbody td:first-child { white-space: normal; min-width: 128px; max-width: 150px; }
}

/* Industries strip on the homepage: one line of intent, then the trades as
   chips that deep-link into the industries page. */
.trades-strip {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px; align-items: center;
}
.trades-strip .section-head { margin-bottom: 0; }
.trades-strip .h2 { font-size: clamp(1.75rem, 2.7vw, 2.3rem); margin-bottom: 14px; }
.trades-strip .lede { font-size: 1rem; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.trade-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-raised);
  color: var(--ink);
  font-weight: 600; font-size: .92rem; letter-spacing: -0.005em;
  transition: background var(--dur-component) var(--ease-out),
              color var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out),
              transform var(--dur-component) var(--ease-out);
}
.trade-chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.trade-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.trade-chip-more { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.trade-chip-more:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.trade { scroll-margin-top: 96px; }
.trade:target { border-color: var(--ink); }
@media (max-width: 900px) {
  .trades-strip { grid-template-columns: 1fr; gap: 28px; }
}

/* Cross-document view transitions: a short fade between pages, with the
   header held still so the site reads as one place. Enhancement only. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: 150ms var(--ease-out) both vt-out; }
::view-transition-new(root) { animation: 240ms var(--ease-out) both vt-in; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Hero phone: a fixed lean off the page, the way the phones in ToplinePro's
   feature photos sit. No pointer tracking; the light on the panel behind it
   is the only thing that moves. */
/* Hero stage: a bigger phone, leaning the way the phone on owner.com's
   green hero did (top to the right, left rail toward the viewer), running
   off the bottom of the panel. The transform sits on .phone itself so the
   side buttons travel with the frame. */
.hero-stage { perspective: 1700px; perspective-origin: 50% 35%; overflow: clip; border-radius: 28px; padding-bottom: 0; }
.hero-stage-wash { bottom: 0; }
#heroPhone {
  zoom: 1.45;
  margin-bottom: -88px;
}
#heroPhone .phone-frame {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 0 0 1px rgba(0,0,0,.5),
    0 2px 4px rgba(0,0,0,.4),
    0 44px 70px -28px rgba(0,0,0,.75),
    0 14px 24px -12px rgba(0,0,0,.5);
}
@media (max-width: 900px) {
  #heroPhone { zoom: 1.1; margin-bottom: -56px; }
}

/* The report pill and its button glow, the way owner.com's search does. */
.hero-search { position: relative; }
.hero-search::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 5px rgba(10,132,255,.09), 0 0 44px 8px rgba(10,132,255,.22);
  animation: search-glow 3.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.hero-search-btn {
  box-shadow: 0 0 0 1px rgba(10,132,255,.45), 0 8px 26px -6px rgba(10,132,255,.7);
}
.hero-search-btn:hover { box-shadow: 0 0 0 1px rgba(10,132,255,.6), 0 10px 30px -6px rgba(10,132,255,.85); }
@keyframes search-glow {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .hero-search::before { animation: none; } }

/* The big MacBook: a real 16:10 screen. The browser chrome is a flex column
   and the report takes whatever height is left, instead of adding its own
   aspect ratio on top of the tab strip and address bar, which made the lid
   nearly square. */
.laptop-lg .browser { aspect-ratio: 16 / 10; display: flex; flex-direction: column; }
.laptop-lg .browser-tabs { padding-top: 6px; }
.laptop-lg .browser-bar { padding: 7px 12px 8px; }
.laptop-lg .rep { aspect-ratio: auto; flex: 1; min-height: 0; }
.laptop-lg .rep-screen { padding: 16px 22px; }

/* Split page heads: copy on the left, a device on the right. */
.head-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.head-split-visual { display: flex; justify-content: center; perspective: 1600px; perspective-origin: 50% 40%; }
.head-split .hero-stage { margin-top: 0; }
.head-split .hero-stage-wash { top: 40px; bottom: 40px; left: 0; right: 0; border-radius: 28px; }
.page-head-split { overflow-x: clip; }
.page-head-split { padding-bottom: 40px; }
@media (max-width: 900px) {
  .head-split { grid-template-columns: 1fr; gap: 36px; }
}

/* The search phone on the industries page. */
.phone-sm.phone-search .phone-status { color: var(--ink); }
.phone-sm.phone-search .phone-screen-search { background: #fff; box-shadow: inset 0 0 0 1px rgba(17,18,19,.06); }
.phone-screen-search { display: flex; flex-direction: column; gap: 10px; padding: 66px 12px 18px; }
.srch-bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 8px 12px;
  border-radius: 999px; background: #f1f3f4;
  font-size: .8rem; color: var(--ink);
}
.srch-bar svg { flex: none; color: #5f6368; }
.srch-q { white-space: nowrap; overflow: hidden; }
.srch-caret { flex: none; width: 1.5px; height: 14px; background: var(--ink); animation: rep-caret 1.1s steps(2) infinite; }
.srch-map {
  position: relative; height: 84px; border-radius: 12px; overflow: hidden;
  background-color: #e9efe7;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(17,18,19,.06) 17px 18px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(17,18,19,.06) 23px 24px);
}
.srch-map b {
  position: absolute; left: var(--x); top: var(--y);
  width: 12px; height: 12px; border-radius: 50% 50% 50% 0;
  background: #d93025; transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.srch-map b::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #fff; }
.srch-pack { display: flex; flex-direction: column; }
.srch-row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 9px 0; border-top: 1px solid #e6e8ea;
}
.srch-rank { font-size: .7rem; font-weight: 700; color: #5f6368; }
.srch-name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.srch-name i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: #dfe1e5; }
.srch-name em { font-style: normal; font-size: .66rem; color: #5f6368; white-space: nowrap; }
.srch-cta { font-size: .66rem; font-weight: 600; color: #1a73e8; border: 1px solid #dadce0; border-radius: 999px; padding: 4px 9px; }
.srch-you { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #fdecea; }
.srch-you b { font-size: .74rem; color: var(--ink); }
.srch-you span { font-size: .66rem; color: #b3261e; }

/* About: the three builds in phone shells, real mobile screenshots. */
.about-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; perspective: 1800px; perspective-origin: 50% 40%; }
.about-phone a { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--ink); }
.about-phone .phone { display: block; width: 100%; max-width: 232px; }
.about-phone .phone { transition: transform 600ms var(--ease-out); transform-style: preserve-3d; }
.about-phone:nth-child(1) .phone { transform: rotateY(16deg) rotateX(3deg); }
.about-phone:nth-child(3) .phone { transform: rotateY(-16deg) rotateX(3deg); }
.about-phone a:hover .phone, .about-phone a:focus-visible .phone { transform: none; }
.phone-screen-shot { container-type: size; overflow: hidden; background: #fff; display: block; padding: 50px 0 0; }
.phone-screen-shot img { display: block; width: 100%; height: auto; transition: transform 4s linear; }
.about-phone a:hover .phone-screen-shot img, .about-phone a:focus-visible .phone-screen-shot img { transform: translateY(calc(100cqh - 100%)); }
.about-phone-cap {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .98rem; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--rule-strong);
}
.about-phone a:hover .about-phone-cap { border-color: var(--ink); }
.about-phone a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 12px; }
@media (max-width: 900px) {
  .about-phones { gap: 16px; }
  .about-phone .phone { max-width: 200px; }
}
@media (max-width: 560px) {
  .about-phones { grid-template-columns: 1fr; gap: 36px; }
  .about-phone:nth-child(n) .phone { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .srch-caret { animation: none; }
  .phone-screen-shot img, .about-phone .phone { transition: none; }
}

/* Industries: the local search as a standalone card. */
.srch-card {
  width: min(100%, 380px);
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px 16px;
  background: #fff; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(17,18,19,.06), 0 34px 60px -30px rgba(0,0,0,.4);
  transform: rotateY(-10deg) rotateX(4deg) rotateZ(-2deg);
}
.srch-card .srch-you { margin-top: 6px; }

/* Pricing: a month's statement. */
.inv {
  width: min(100%, 400px);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 22px 24px 18px;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.35);
  font-variant-numeric: tabular-nums;
}
.inv-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); }
.inv-head b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.inv-head span { font-size: .78rem; color: var(--ink-muted); }
.inv-lines { display: flex; flex-direction: column; }
.inv-lines li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.inv-lines span { color: var(--ink); }
.inv-lines i { flex: 1; border-bottom: 1px dotted var(--rule-strong); transform: translateY(-4px); }
.inv-lines em { font-style: normal; color: var(--ink-soft); }
.inv-total { display: flex; justify-content: space-between; padding: 14px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; }
.inv-total em { font-style: normal; }
.inv-foot { font-size: .78rem; color: var(--ink-muted); }
.reveal.is-in .inv-lines li { animation: oc-in 460ms var(--ease-out) both; }
.reveal.is-in .inv-lines li:nth-child(2) { animation-delay: 80ms; }
.reveal.is-in .inv-lines li:nth-child(3) { animation-delay: 160ms; }
.reveal.is-in .inv-lines li:nth-child(4) { animation-delay: 240ms; }
.reveal.is-in .inv-lines li:nth-child(5) { animation-delay: 320ms; }
.reveal.is-in .inv-lines li:nth-child(6) { animation-delay: 400ms; }

/* Questions: a fanned deck of three cards. */
.qa-deck { position: relative; width: min(100%, 360px); height: 340px; }
.qa-card {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 24px;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.4);
  transform-origin: 50% 120%;
  transition: transform 500ms var(--ease-out);
}
.qa-card b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.qa-card span { font-size: .92rem; color: var(--ink-soft); }
.qa-card:nth-child(1) { transform: rotate(-4deg) translate(-16px, 0); z-index: 1; }
.qa-card:nth-child(2) { transform: rotate(3deg) translate(14px, 104px); z-index: 2; }
.qa-card:nth-child(3) { transform: rotate(-1.5deg) translate(-4px, 208px); z-index: 3; }
.qa-deck:hover .qa-card:nth-child(1) { transform: rotate(-6deg) translate(-30px, -10px); }
.qa-deck:hover .qa-card:nth-child(2) { transform: rotate(5deg) translate(28px, 104px); }
.qa-deck:hover .qa-card:nth-child(3) { transform: rotate(-2deg) translate(-16px, 222px); }

/* Grader: the desktop report, one screen, revealed on scroll. */
.laptop-static { width: 100%; max-width: 640px; }
.laptop-static .rep-screen-static { transition-delay: 0ms; zoom: .9; }
.laptop-static .rep-screen[data-screen="2"] .rep-bars { flex: 0 0 auto; gap: 12px; }
.laptop-static .rep-foot { margin-top: auto; }
.reveal.is-in .rep-screen-static { opacity: 1; visibility: visible; transform: none; }
.reveal.is-in .rep-screen-static .rep-bar i::after { transform: scaleX(1); transition-delay: 500ms; }
html:not(.js) .rep-screen-static { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .rep-screen-static .rep-bar i::after { transform: scaleX(1); }

/* Outcomes: tabs over a dark stage, one panel per outcome. */
.section-outcomes .section-head { max-width: 860px; }
.oc-tabs {
  display: flex; gap: 32px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 22px;
  overflow-x: auto; scrollbar-width: none;
}
.oc-tabs::-webkit-scrollbar { display: none; }
.oc-tab {
  padding: 12px 2px 14px;
  font: inherit; font-weight: 600; font-size: 1.02rem;
  color: var(--ink-muted);
  background: none; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-component) var(--ease-out), border-color var(--dur-component) var(--ease-out);
}
.oc-tab:hover { color: var(--ink); }
.oc-tab.is-active { color: var(--ink); border-color: var(--ink); }
.oc-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.oc-stage {
  position: relative;
  display: grid;
  min-height: 540px;
  border-radius: 28px; overflow: hidden;
  color: var(--paper);
  background:
    var(--grain),
    radial-gradient(70% 90% at 12% 12%, rgba(10,132,255,.42), rgba(10,132,255,0) 62%),
    radial-gradient(50% 60% at 92% 92%, rgba(163,163,173,.22), rgba(163,163,173,0) 60%),
    linear-gradient(135deg, #1a1c21, #08090a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.oc-panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px; align-items: center;
  padding: 56px;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out), visibility 0s linear 340ms;
}
.oc-panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.oc-panel[hidden] { display: grid; }
.oc-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(244,244,245,.62); margin-bottom: 14px; }
.oc-copy h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.08; letter-spacing: -0.03em;
  text-wrap: balance; margin-bottom: 14px;
}
.oc-copy p { color: rgba(244,244,245,.78); max-width: 44ch; text-wrap: pretty; }
.oc-visual { display: flex; justify-content: center; }
@keyframes oc-in { from { opacity: 0; transform: translateY(12px); } }
/* Timeline */
.oc-tl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.oc-tl::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; border-left: 2px dashed rgba(244,244,245,.28); }
.oc-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--paper-raised); color: var(--ink);
  font-weight: 600; font-size: .95rem;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.7);
}
.oc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--silver-deep); }
.oc-dot-blue { background: var(--sms-blue); }
.oc-dot-star { background: #f2a33c; }
.oc-wait { position: relative; font-size: .82rem; color: rgba(244,244,245,.66); padding: 3px 10px; border-radius: 6px; background: rgba(12,13,15,.9); }
.oc-panel.is-active .oc-tl > * { animation: oc-in 460ms var(--ease-out) both; }
.oc-panel.is-active .oc-tl > :nth-child(2) { animation-delay: 90ms; }
.oc-panel.is-active .oc-tl > :nth-child(3) { animation-delay: 180ms; }
.oc-panel.is-active .oc-tl > :nth-child(4) { animation-delay: 270ms; }
.oc-panel.is-active .oc-tl > :nth-child(5) { animation-delay: 360ms; }
.oc-panel.is-active .oc-tl > :nth-child(6) { animation-delay: 450ms; }
.oc-panel.is-active .oc-tl > :nth-child(7) { animation-delay: 540ms; }
/* Three-step flow */
.oc-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 560px; counter-reset: flow; }
.oc-flow li {
  counter-increment: flow;
  background: rgba(244,244,245,.07);
  border: 1px solid rgba(244,244,245,.16);
  border-radius: 18px;
  padding: 18px 16px 16px;
}
.oc-flow li::before { content: "0" counter(flow); display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: rgba(244,244,245,.5); margin-bottom: 12px; }
.oc-flow b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 6px; }
.oc-flow span { font-size: .86rem; color: rgba(244,244,245,.72); }
.oc-panel.is-active .oc-flow li { animation: oc-in 460ms var(--ease-out) both; }
.oc-panel.is-active .oc-flow li:nth-child(2) { animation-delay: 120ms; }
.oc-panel.is-active .oc-flow li:nth-child(3) { animation-delay: 240ms; }
/* Town chips */
.oc-towns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 480px; }
.oc-town {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 999px;
  background: rgba(244,244,245,.08);
  border: 1px solid rgba(244,244,245,.18);
  color: var(--paper); font-weight: 600; font-size: .92rem;
}
.oc-town i { width: 8px; height: 8px; border-radius: 50%; background: var(--sms-blue); box-shadow: 0 0 0 3px rgba(10,132,255,.22); }
.oc-town small { font-size: .74rem; font-weight: 500; color: rgba(244,244,245,.55); }
.oc-town.is-soon { opacity: .6; }
.oc-town.is-soon i { background: rgba(244,244,245,.4); box-shadow: none; }
.oc-panel.is-active .oc-town { animation: oc-in 420ms var(--ease-out) both; }
.oc-panel.is-active .oc-town:nth-child(2) { animation-delay: 60ms; }
.oc-panel.is-active .oc-town:nth-child(3) { animation-delay: 120ms; }
.oc-panel.is-active .oc-town:nth-child(4) { animation-delay: 180ms; }
.oc-panel.is-active .oc-town:nth-child(5) { animation-delay: 240ms; }
.oc-panel.is-active .oc-town:nth-child(6) { animation-delay: 300ms; }
.oc-panel.is-active .oc-town:nth-child(7) { animation-delay: 360ms; }
.oc-panel.is-active .oc-town:nth-child(8) { animation-delay: 420ms; }
.oc-panel.is-active .oc-town:nth-child(9) { animation-delay: 480ms; }
.oc-panel.is-active .oc-town:nth-child(10) { animation-delay: 540ms; }
@media (max-width: 900px) {
  .oc-stage { min-height: 0; }
  .oc-panel { grid-template-columns: 1fr; gap: 30px; padding: 32px 24px; }
  .oc-flow { grid-template-columns: 1fr; }
  .oc-tabs { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-panel.is-active .oc-tl > *, .oc-panel.is-active .oc-flow li, .oc-panel.is-active .oc-town, .reveal.is-in .inv-lines li { animation: none; }
  .oc-panel { transition: none; }
}

/* Search Console proof: dark section, stat tiles, and monthly bars on a
   browser plate. */
.section-proof { background: #141517; color: var(--paper); }
.section-proof .h2 { color: var(--paper); }
.section-proof .lede { color: rgba(244,244,245,.78); max-width: 66ch; }
.proof-kicker { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,244,245,.5); margin: 8px 0 14px; }
.proof-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(244,244,245,.12); border: 1px solid rgba(244,244,245,.12); border-radius: 18px; overflow: hidden; margin-bottom: 36px; }
.proof-tiles li { background: #1b1c1f; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.proof-tiles li.is-hot { background: linear-gradient(135deg, #26282c, #1b1c1f); }
.proof-tiles strong { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.proof-tiles li.is-hot strong { color: var(--silver-light); }
.proof-tiles span { font-size: .88rem; color: rgba(244,244,245,.66); }
.plates { position: relative; padding: 10px 0 0 0; perspective: 1500px; perspective-origin: 50% 20%; }
.plate { position: relative; border-radius: 14px; background: #0e0f11; box-shadow: inset 0 0 0 1px rgba(244,244,245,.1), 0 40px 80px -40px rgba(0,0,0,.9); margin: 0; }
.plate-front {
  transform: rotateX(6deg) rotateY(-4deg);
  transition: transform 700ms var(--ease-out);
  box-shadow: inset 0 0 0 1px rgba(244,244,245,.1), 0 70px 100px -40px rgba(0,0,0,.95), 0 24px 34px -22px rgba(0,0,0,.6);
}
.plates:hover .plate-front { transform: rotateX(2deg) rotateY(-1deg); }
.plate-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1c1d20; border-radius: 14px 14px 0 0; font-size: .72rem; color: rgba(244,244,245,.5); }
.plate-bar .dots { display: flex; gap: 6px; }
.plate-bar .dots s { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,244,245,.18); text-decoration: none; }
.plate-bar i { font-style: normal; padding: 4px 10px; border-radius: 999px; background: #121316; border: 1px solid rgba(244,244,245,.08); }
.plate-bar b { margin-left: auto; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .66rem; color: rgba(244,244,245,.45); }
/* Monthly bars. --bmax is the top of the scale and --v each month's value,
   both set inline by the generator, so the grid and the bars share one
   ruler. --i staggers the grow-in. */
.bars { padding: 40px 18px 44px; }
.bars-plot { position: relative; height: 300px; }
.bars-grid { position: absolute; inset: 0; pointer-events: none; }
.bars-grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--gv) / var(--bmax) * 100%); border-top: 1px solid rgba(244,244,245,.1); }
.bars-grid em { position: absolute; left: 0; bottom: 4px; font-style: normal; font-size: 12px; letter-spacing: .04em; color: rgba(244,244,245,.45); font-family: var(--font-body); }
/* Rolling click-through line. The SVG is stretched to the plot (viewBox
   1000 x 300, aspect ignored), so every x is a share of the width and the
   HTML marks (move line, end point, month ticks) land on the same ruler. */
.trend { position: absolute; inset: 0 10px 0 48px; }
.trend-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trend-area { fill: url(#trend-fill); }
.trend-line { fill: none; stroke: #2b8fff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(10,132,255,.5)); }
.trend-move { position: absolute; left: var(--x); top: -16px; bottom: 0; border-left: 1.5px dashed rgba(244,244,245,.5); }
.trend-move::after { content: attr(data-mark); position: absolute; right: 8px; top: -18px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(244,244,245,.85); white-space: nowrap; }
.trend-end { position: absolute; right: 0; bottom: var(--y); width: 12px; height: 12px; margin: 0 -6px -6px 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #2b8fff, 0 0 0 9px rgba(43,143,255,.22); z-index: 2; }
.trend-end b { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); padding: 5px 10px; border-radius: 999px; background: #2b8fff; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(10,132,255,.8); }
.trend-ticks { position: absolute; left: 0; right: 0; top: 100%; margin: 10px 0 0; padding: 0; list-style: none; }
.trend-ticks li { position: absolute; left: var(--x); transform: translateX(-50%); font-size: 12px; letter-spacing: .04em; color: rgba(244,244,245,.45); white-space: nowrap; }
.trend-ticks .ms { display: none; }
@keyframes trend-pulse { 0% { box-shadow: 0 0 0 3px #2b8fff, 0 0 0 6px rgba(43,143,255,.4); } 100% { box-shadow: 0 0 0 3px #2b8fff, 0 0 0 18px rgba(43,143,255,0); } }
.js .reveal .trend-line { stroke-dasharray: 1.06; stroke-dashoffset: 1.06; }
.js .reveal.is-in .trend-line { animation: trend-draw 2.4s var(--ease-out) forwards; }
@keyframes trend-draw { to { stroke-dashoffset: 0; } }
.js .reveal .trend-area { opacity: 0; }
.js .reveal.is-in .trend-area { opacity: 1; transition: opacity 900ms var(--ease-out) 1200ms; }
.js .reveal .trend-end { opacity: 0; transform: scale(.4); }
.js .reveal.is-in .trend-end { opacity: 1; transform: none; transition: opacity 300ms var(--ease-out) 2200ms, transform 500ms var(--ease-out) 2200ms; animation: trend-pulse 2.4s ease-out 2800ms infinite; }
.plate-cap { padding: 12px 16px 16px; font-size: .82rem; color: rgba(244,244,245,.55); text-wrap: pretty; }
@media (max-width: 760px) {
  .trend-ticks .ml { display: none; }
  .trend-ticks .ms { display: block; }
}
@media (max-width: 560px) {
  .bars { padding: 34px 12px 34px; }
  .bars-plot { height: 210px; }
  .trend { inset: 0 6px 0 40px; }
  .trend-ticks li { font-size: 10px; }
  .trend-ticks { margin-top: 8px; }
  .trend-move::after { font-size: 9px; letter-spacing: .08em; }
  .trend-end b { font-size: 12px; padding: 4px 8px; right: 16px; }
  .bars-grid em { font-size: 11px; }
}
.proof-table { margin-top: 26px; }
.proof-table summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--paper); padding: 10px 0; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.proof-table summary::-webkit-details-marker { display: none; }
.proof-table summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(244,244,245,.3); display: inline-grid; place-items: center; font-size: .9rem; }
.proof-table[open] summary::before { content: "\2013"; }
.proof-table-wrap { overflow-x: auto; margin-top: 10px; border: 1px solid rgba(244,244,245,.12); border-radius: 14px; }
.proof-table table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 600px; font-variant-numeric: tabular-nums; }
.proof-table th, .proof-table td { text-align: right; padding: 10px 16px; border-bottom: 1px solid rgba(244,244,245,.08); color: rgba(244,244,245,.8); }
.proof-table th:first-child, .proof-table td:first-child { text-align: left; color: var(--paper); }
.proof-table th { font-weight: 600; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(244,244,245,.5); }
.proof-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 900px) {
  .proof-tiles { grid-template-columns: repeat(2, 1fr); }
  .plates { padding-top: 0; }
}
@media (max-width: 560px) {
  .proof-tiles { grid-template-columns: 1fr 1fr; }
  .proof-tiles li { padding: 18px 16px; }
  .plate-bar b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal .trend-line { stroke-dasharray: none; animation: none; }
  .js .reveal .trend-area, .js .reveal .trend-end { opacity: 1; transform: none; transition: none; animation: none; }
}

/* Why section: the leaning phone between the two columns. */
.compare { perspective: 1600px; perspective-origin: 50% 40%; }
.compare-phone { display: flex; align-items: center; justify-content: center; }
.compare .phone-sm { width: 236px; }
.phone-sm.phone-leads .phone-status { color: var(--paper); }
.phone-sm.phone-leads .phone-screen-leads {
  display: flex; flex-direction: column;
  padding: 58px 12px 18px;
  background: linear-gradient(180deg, #2b2e36 0%, #15161a 55%, #0b0c0e 100%);
}
.ld-time { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -0.04em; line-height: 1; color: var(--paper); text-align: center; margin-top: 6px; }
.ld-date { font-size: .72rem; color: rgba(244,244,245,.6); text-align: center; margin: 4px 0 18px; }
.ld-stack { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ld-note {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(244,244,245,.14);
  backdrop-filter: blur(8px);
  color: var(--paper);
}
.ld-note b { font-size: .72rem; font-weight: 700; }
.ld-note em { font-style: normal; font-size: .66rem; color: rgba(244,244,245,.55); text-align: right; }
.ld-note span { grid-column: 1 / -1; font-size: .74rem; line-height: 1.35; color: rgba(244,244,245,.9); }
.ld-note-sum { background: rgba(10,132,255,.28); }
.reveal-group > .compare-phone.is-in .ld-note { animation: oc-in 460ms var(--ease-out) both; }
.reveal-group > .compare-phone.is-in .ld-note:nth-child(2) { animation-delay: 120ms; }
.reveal-group > .compare-phone.is-in .ld-note:nth-child(3) { animation-delay: 240ms; }
.reveal-group > .compare-phone.is-in .ld-note:nth-child(4) { animation-delay: 360ms; }
@media (max-width: 900px) {
  .compare-phone { padding: 12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-group > .compare-phone.is-in .ld-note { animation: none; }
}

/* Frost panel: the hero stage as a card for inner-page heads, with a
   leaning phone running off its bottom edge. */
.frost {
  position: relative; width: 100%; min-height: 520px;
  border-radius: 28px; overflow: clip;
  display: flex; align-items: flex-end; justify-content: center;
  perspective: 1600px; perspective-origin: 50% 40%;
  isolation: isolate;
}
.head-split .frost { max-width: 600px; }
.frost-wash {
  position: absolute; inset: 0; z-index: 0;
  background:
    var(--grain),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    linear-gradient(0deg,
      #08090a 0%,
      var(--ink) 8%,
      #26282c 22%,
      #4c4e55 38%,
      var(--silver-deep) 54%,
      var(--silver) 72%,
      var(--silver-light) 92%,
      #e6e6e9 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.6);
}
.frost-wash::before {
  content: "";
  position: absolute; left: 50%; top: 74%;
  width: 60%; aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.28), rgba(255,255,255,.08) 44%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.frost-wash::after {
  content: "";
  position: absolute; inset: -40% -10%;
  background: linear-gradient(112deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.1) 50%, rgba(255,255,255,0) 60%);
  animation: stage-sheen 9s linear infinite;
  pointer-events: none;
}
.frost .phone { position: relative; z-index: 1; margin-bottom: -58px; }
.frost .phone-sm { width: 262px; }
.phone-sm.phone-report .phone-screen, .phone-sm.phone-shot .phone-screen { background: var(--paper); }
.phone-sm.phone-report .phone-status, .phone-sm.phone-shot .phone-status { color: var(--ink); }
.frost:hover .phone-screen-shot img { transform: translateY(calc(100cqh - 100%)); }
/* The timeline runs beside the desktop report. */
.tl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 56px; align-items: start; }
.tl-grid .section-head { grid-column: 1 / -1; }
.tl-side { position: sticky; top: 112px; }
@media (max-width: 900px) {
  .frost { min-height: 440px; }
  .tl-grid { grid-template-columns: 1fr; gap: 36px; }
  .tl-side { position: static; }
}
@media (max-width: 560px) {
  .frost { border-radius: 22px; min-height: 400px; }
  .frost .phone-sm { width: 236px; }
}
@media (prefers-reduced-motion: reduce) {
  .frost-wash::after { animation: none; }
}

/* Closing section: the frost panel, copy on the dark side and the leaning
   phone on the silver side, the way owner.com closes its pages. */
.section-cta-frost { padding: 24px 28px 64px; }
.cta-frost {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px;
  align-items: end;
  min-height: 600px;
  border-radius: 28px; overflow: clip;
  perspective: 1600px; perspective-origin: 70% 40%;
}
.cta-frost .frost-wash {
  background:
    var(--grain),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    linear-gradient(90deg,
      #08090a 0%,
      var(--ink) 26%,
      #26282c 44%,
      #4c4e55 62%,
      var(--silver-deep) 78%,
      var(--silver) 90%,
      var(--silver-light) 100%);
}
.cta-frost .frost-wash::before { left: 78%; top: 52%; width: 46%; }
.cta-frost-copy { position: relative; z-index: 1; align-self: center; padding: 64px 24px 64px 56px; color: var(--paper); }
.cta-frost-copy .h2-cta { text-align: left; }
.cta-frost-copy .lede-cta { text-align: left; }
.cta-frost-visual { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; }
.cta-frost-visual .phone { margin-bottom: -150px; }
.cta-frost-visual .phone-sm { width: 340px; }
.head-split-visual .phone-sm { width: 300px; }
@media (max-width: 900px) {
  .cta-frost { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .cta-frost .frost-wash {
    background:
      repeating-linear-gradient(0deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
      repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
      linear-gradient(180deg,
        #08090a 0%,
        var(--ink) 30%,
        #26282c 48%,
        #4c4e55 64%,
        var(--silver-deep) 80%,
        var(--silver) 92%,
        var(--silver-light) 100%);
  }
  .cta-frost .frost-wash::before { left: 50%; top: 84%; width: 70%; }
  .cta-frost-copy { padding: 44px 26px 24px; }
  .cta-frost-visual { padding-top: 12px; }
  .cta-frost-visual .phone-sm { width: 270px; }
  .cta-frost-visual .phone { margin-bottom: -100px; }
  .head-split-visual .phone-sm { width: 270px; }
}
@media (max-width: 560px) {
  .section-cta-frost { padding: 8px 20px 48px; }
  .cta-frost { border-radius: 22px; }
  .cta-frost-copy { padding: 36px 22px 16px; }
}

/* Buttons and text links that sit on the closing panel's dark side. */
.cta-frost-copy .btn-primary:not(.hero-search-btn) { background: var(--paper); color: var(--ink); }
.cta-frost-copy .btn-primary:not(.hero-search-btn):hover { background: var(--silver-light); }
.cta-frost-note { margin-top: 14px; color: rgba(244,244,245,.7); }
.cta-frost-copy .figs-more { color: var(--paper); border-color: rgba(244,244,245,.4); }
.cta-frost-copy .figs-more:hover { border-color: var(--paper); }

/* =====================================================================
   Section 5 : How it works
   ===================================================================== */
/* The laptop base overhangs its lid by design, so both sections that hold
   one clip horizontally rather than letting it widen the page. */
.section-how { background: var(--paper-raised); overflow-x: clip; }
.section-craft { overflow-x: clip; }
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 56px;
  /* Steps start level with the top of the lid. Centred, the list floated
     134px below the headline and looked unrelated to it. */
  align-items: start;
}
#howSteps { padding-top: 12px; }
.step-btn { padding: 18px 0; }

/* The steps are a vertical list now, and the active one drives the laptop.
   A rail runs down the left with the active segment filled in. */
.steps { display: flex; flex-direction: column; gap: 4px; position: relative; }
.steps::before {
  content: "";
  position: absolute; left: 13px; top: 26px; bottom: 26px;
  width: 2px; background: var(--rule);
}
.step { position: relative; padding: 0 0 4px 0; border: none; }
.step-btn {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: center;
  width: 100%;
  background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
}
.step-num {
  position: relative; top: 0; left: 0; z-index: 1;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--paper-raised); color: var(--ink-muted);
  box-shadow: inset 0 0 0 2px var(--rule-strong);
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  display: grid; place-items: center;
  transition: background var(--dur-component) var(--ease-out),
              color var(--dur-component) var(--ease-out),
              box-shadow var(--dur-component) var(--ease-out);
}
.step.is-active .step-num,
.step.is-done .step-num {
  background: var(--ink); color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em;
  color: var(--ink-muted);
  transition: color var(--dur-component) var(--ease-out);
}
.step.is-active h3 { color: var(--ink); }
.step-btn:hover h3 { color: var(--ink); }
.step-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
/* The body copy only opens on the active step, so the list stays scannable. */
/* The body copy only opens on the active step, so the list stays scannable.
   grid-template-rows 0fr to 1fr is the height animation that works without
   a hard-coded max-height. */
/* Collapsed bodies are hidden from assistive tech too, not just visually,
   so aria-expanded="false" is true rather than decorative. visibility is
   delayed on close so the height transition finishes first. */
.step-body {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; overflow: hidden; visibility: hidden;
  margin-left: 40px;
  transition: grid-template-rows var(--dur-screen) var(--ease-out),
              opacity var(--dur-component) var(--ease-out),
              visibility 0s linear var(--dur-screen);
}
.step-body > p { min-height: 0; }
.step.is-active .step-body {
  grid-template-rows: 1fr; opacity: 1; visibility: visible;
  transition-delay: 0s, 0s, 0s;
}
/* Padding lives on the open state only: on the closed row it survives the
   0fr collapse and leaves a 12px sliver under every step. */
.step p { font-size: .95rem; color: var(--ink-soft); text-wrap: pretty; padding-bottom: 0; }
.step.is-active .step-body > p { padding-bottom: 12px; }

.how-device { position: relative; }
/* The big laptop gets a slightly deeper lid so the screen has room. */
.laptop-lg .laptop-lid { padding: 15px 15px 17px; border-radius: 24px 24px 5px 5px; }
.laptop-lg .laptop-base { height: 18px; margin: 0 -30px; }

/* ---------- The report inside the laptop ---------- */
.rep {
  position: relative;
  aspect-ratio: 16 / 10.5;
  background: #0d0e10;
  display: grid;
}
.rep-screen {
  grid-area: 1 / 1;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition-property: opacity, transform, visibility;
  transition-duration: 240ms, 240ms, 0ms;
  transition-timing-function: ease, var(--ease-out), linear;
  transition-delay: 0ms, 0ms, 240ms;
}
.rep-screen.is-on {
  opacity: 1; visibility: visible; transform: none;
  transition-duration: var(--dur-screen), var(--dur-screen), 0ms;
  transition-delay: 200ms, 200ms, 0ms;
}

/* Screen 1: search */
.rep-screen[data-screen="1"] { justify-content: space-between; }
/* Once the grid stacks, the laptop spans the full column and the panel gets
   much taller than its content needs. Cap the search block so the empty
   band above and below it stays proportionate instead of yawning open. */
@media (max-width: 900px) {
  .rep-screen[data-screen="1"] { justify-content: flex-start; }
  .rep-center { margin: 10% auto auto; }
}
.rep-center {
  margin: auto;
  width: min(100%, 340px);
  text-align: center;
}
.rep-kicker {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,244,245,.42); margin-bottom: 8px;
}
.rep-lede {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--paper); letter-spacing: -0.02em; margin-bottom: 14px;
}
.rep-field {
  display: flex; align-items: center; gap: 2px;
  background: #1b1c1f; border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 9px 16px;
  font-size: .74rem; color: var(--paper);
}
.rep-caret {
  width: 1.5px; height: 13px; background: var(--paper);
  animation: rep-caret 1.1s steps(2) infinite;
}
@keyframes rep-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.rep-suggest { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; text-align: left; }
.rep-suggest span {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; color: rgba(244,244,245,.6);
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.rep-suggest b { width: 5px; height: 5px; border-radius: 50%; background: var(--silver); }

/* Shared report chrome */
.rep-head { display: flex; align-items: center; gap: 8px; }
.rep-head b { font-family: var(--font-display); font-size: .8rem; color: var(--paper); }
.rep-head em { font-style: normal; font-size: .66rem; color: rgba(244,244,245,.45); margin-left: auto; }
.rep-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--silver); }

/* Screen 2: score + bars */
.rep-hero { display: flex; align-items: center; gap: 18px; }
.rep-score { display: flex; align-items: baseline; }
.rep-score-num {
  font-family: var(--font-display); font-weight: 800; font-size: 3.2rem;
  color: var(--paper); letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rep-score-den { font-size: .74rem; color: rgba(244,244,245,.45); }
.rep-loss {
  margin-left: auto; text-align: right;
  display: flex; flex-direction: column; gap: 2px;
}
.rep-loss span { font-size: .62rem; color: rgba(244,244,245,.5); }
.rep-loss b {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: var(--red); letter-spacing: -0.02em;
}
.rep-loss i { font-style: normal; font-size: .62rem; color: rgba(244,244,245,.5); font-weight: 500; }
.rep-bars { display: flex; flex-direction: column; gap: 14px; }
/* Screen 2 lays out as head / hero / bars / footnote so it fills the panel
   instead of stacking against the top edge. */
.rep-screen[data-screen="2"] { justify-content: flex-start; gap: 20px; }
/* The bars take the leftover height and space themselves through it, so the
   report fills the screen the way a real dashboard would. */
.rep-screen[data-screen="2"] .rep-bars {
  flex: 1; min-height: 0;
  justify-content: space-evenly;
  gap: 14px;
}
/* Prose, not a flex row: as flex, every inline child became its own item
   and the line broke into columns with an orphaned comma. */
.rep-foot {
  margin-top: auto;
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .62rem; line-height: 1.45; color: rgba(244,244,245,.45);
}
.rep-foot b { color: var(--paper); font-weight: 600; white-space: nowrap; }
.rep-bar {
  display: grid; grid-template-columns: 96px 1fr 38px; gap: 12px; align-items: center;
  font-size: .68rem; color: rgba(244,244,245,.6);
}
.rep-bar i {
  height: 7px; border-radius: 4px;
  background: rgba(255,255,255,.1);
  position: relative; overflow: hidden;
}
.rep-bar i::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: var(--w);
  border-radius: 3px;
  background: linear-gradient(90deg, var(--silver-deep), var(--silver));
  transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--ease-out);
}
.rep-screen.is-on .rep-bar i::after { transform: scaleX(1); transition-delay: 420ms; }
.rep-bar em { font-style: normal; text-align: right; color: var(--paper); font-variant-numeric: tabular-nums; }

/* Screen 3: the draft in progress */
.rep-draft { display: grid; grid-template-columns: 1.6fr .8fr; gap: 10px; flex: 1; min-height: 0; }
/* The draft panel is a miniature of the site being built, not a skeleton:
   a nav, a real headline, body lines, a call button and a photo slot. */
.rep-draft-main {
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
}
.rd-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.rd-nav b { width: 9px; height: 9px; border-radius: 2px; background: var(--paper); }
.rd-nav i { width: 20px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.rd-nav em {
  margin-left: auto; font-style: normal;
  font-size: .52rem; font-weight: 700;
  background: var(--paper); color: var(--ink);
  padding: 3px 7px; border-radius: 999px;
}
.rd-h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: .78rem; letter-spacing: -0.02em;
  color: var(--paper);
}
.rd-p { height: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.rd-p-short { width: 62%; }
.rd-cta {
  align-self: flex-start;
  font-size: .54rem; font-weight: 600;
  background: var(--paper); color: var(--ink);
  padding: 5px 10px; border-radius: 999px;
  margin-top: 2px;
}
.rd-photo {
  flex: 1; min-height: 0;
  margin-top: 4px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: .54rem; color: rgba(244,244,245,.4);
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(255,255,255,.05) 11px 12px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.05) 11px 12px),
    rgba(255,255,255,.03);
  outline: 1px dashed rgba(255,255,255,.16); outline-offset: -4px;
}
/* The side rail is the town pages, ticking off as each is written. */
.rep-draft-side { display: flex; flex-direction: column; gap: 8px; }
.rep-draft-side span {
  flex: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .58rem; color: rgba(244,244,245,.55);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.rep-draft-side span::before {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.22);
}
.rep-draft-side .is-done { color: rgba(244,244,245,.85); }
.rep-draft-side .is-done::before {
  border-color: var(--silver);
  background: var(--silver);
  box-shadow: inset 0 0 0 2px #101113;
}
.rep-notes { display: flex; flex-direction: column; gap: 6px; }
.rep-notes span {
  display: flex; align-items: center; gap: 8px;
  font-size: .64rem; color: rgba(244,244,245,.62);
}
.rep-notes b {
  flex: 0 0 auto;
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  position: relative;
}
.rep-notes b::after {
  content: "";
  position: absolute; left: 4px; top: 2.5px;
  width: 3px; height: 6px;
  border: solid var(--paper); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* Screen 4: the score climbing month over month */
.rep-chart {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  align-items: end;
  padding-top: 6px;
}
.rep-chart span {
  position: relative;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 700ms var(--ease-out);
}
.rep-screen.is-on .rep-chart span { transform: scaleY(1); }
.rep-screen.is-on .rep-chart span:nth-child(1) { transition-delay: 260ms; }
.rep-screen.is-on .rep-chart span:nth-child(2) { transition-delay: 360ms; }
.rep-screen.is-on .rep-chart span:nth-child(3) { transition-delay: 460ms; }
.rep-screen.is-on .rep-chart span:nth-child(4) { transition-delay: 560ms; }
.rep-chart span.is-now { background: linear-gradient(180deg, var(--silver-light), var(--silver-deep)); }
.rep-chart i {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .6rem; font-weight: 700;
  color: rgba(244,244,245,.7);
  font-variant-numeric: tabular-nums;
}
.rep-chart span.is-now i { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .rep-caret { animation: none; }
  .rep-bar i::after, .rep-chart span { transition: none; }
}

/* =====================================================================
   Section 6 : Grader
   ===================================================================== */
.section-grader { background: var(--paper-deep); }
.grader-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .8fr);
  gap: 56px;
  align-items: start;
}
.grader-search { margin-top: 28px; width: min(100%, 520px); }
.grader-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.grader-facts li { display: flex; flex-direction: column; gap: 5px; }
.grader-facts strong {
  font-family: var(--font-display);
  font-weight: 800; font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.grader-facts span { font-size: .86rem; color: var(--ink-muted); text-wrap: pretty; }

.grader-checks {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 26px 26px 20px;
}
.grader-checks-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin-bottom: 12px; }
.grader-checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  font-size: .92rem; color: var(--ink-soft);
}
.grader-checks li:first-child { border-top: none; }
.grader-checks li { transition: color var(--dur-component) var(--ease-out); }
.grader-checks li:hover { color: var(--ink); }
.grader-facts li { transition: transform var(--dur-component) var(--ease-out); }
.grader-facts li:hover { transform: translateY(-2px); }

/* =====================================================================
   Section 7 : Automations (ink)
   ===================================================================== */
/* overflow-x: clip keeps the silver pool behind the phone from widening the
   page on narrow viewports without turning the section into a scroll box. */
.section-auto { background: var(--ink); color: var(--paper); overflow-x: clip; }
.section-auto .h2 { color: var(--paper); }
.section-auto .lede { color: rgba(244,244,245,.8); }
.auto-grid {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: center;
}
.auto-phone-wrap {
  display: flex; justify-content: center;
  /* A camera for the slant below. */
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

/* The automations phone runs in dark mode: black screen, grey incoming
   bubbles, blue outgoing. Black and blue on the ink section, and the paper
   nav stays legible when the phone scrolls under it on mobile. A faint
   silver rim and a soft pool of light behind the device separate it from
   the ink ground. */
.phone-sm {
  width: 270px;
  /* The pose from the competitor feature photos: turned off axis, tipped
     back, and rolled a few degrees, so it reads as an object on a desk
     rather than a screenshot in a frame. Static on purpose. */
  transform: none;
}
/* The one that still leans: the phone on the closing panel. */
.cta-frost-visual .phone-sm { transform: rotateY(10deg) rotateX(4deg) rotateZ(12deg); transform-style: preserve-3d; }
/* The shadow falls the way the pose implies: long, to the lower right. */
.phone-sm .phone-frame {
  box-shadow:
    0 0 0 2px #3b3c40,
    0 0 0 3px #08090a,
    0 40px 80px -34px rgba(0,0,0,.7),
    0 14px 28px -12px rgba(0,0,0,.5);
}
.cta-frost-visual .phone-sm .phone-frame {
  box-shadow:
    0 0 0 2px #3b3c40,
    0 0 0 3px #08090a,
    44px 64px 96px -36px rgba(0,0,0,.8),
    12px 18px 28px -12px rgba(0,0,0,.55);
}
/* When the section stacks and the phone sits above the copy, a milder
   pose keeps it inside the column. */
@media (max-width: 900px) {
  .cta-frost-visual .phone-sm { transform: rotateY(6deg) rotateX(3deg) rotateZ(8deg); }
}
.auto-phone-wrap { position: relative; }
.auto-phone-wrap::before {
  content: "";
  position: absolute; inset: -60px -90px;
  background: radial-gradient(closest-side, rgba(163,163,173,.22), rgba(163,163,173,0));
  pointer-events: none;
}
.phone-sm .phone-screen { background: #000; box-shadow: 0 0 0 7px #07080a, 0 0 0 7.5px rgba(255,255,255,.05), inset 0 0 0 1px rgba(244,244,245,.06); }
.phone-sm .phone-status { color: var(--paper); }
.phone-screen-sms {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 70px 14px 24px;
}
.sms-missed { font-size: .68rem; color: rgba(244,244,245,.55); text-align: center; margin-bottom: 4px; }
.sms {
  max-width: 84%;
  padding: 9px 12px; border-radius: 16px;
  font-size: .78rem; line-height: 1.35;
}
.sms.out { align-self: flex-end; background: var(--sms-blue); color: #fff; border-bottom-right-radius: 4px; }
.sms.in { align-self: flex-start; background: #2c2c2e; color: var(--paper); border-bottom-left-radius: 4px; }
.sms.typing { align-self: flex-start; background: #2c2c2e; display: flex; gap: 4px; padding: 11px 12px; }
.sms.typing span { width: 6px; height: 6px; border-radius: 50%; background: rgba(244,244,245,.6); animation: sms-blink 1.2s linear infinite; }
.sms.typing span:nth-child(2) { animation-delay: .2s; }
.sms.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes sms-blink { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.auto-list { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid rgba(244,244,245,.18); }
.auto-list li {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(244,244,245,.18);
  transition: background var(--dur-component) var(--ease-out),
              padding-left var(--dur-component) var(--ease-out);
}
.auto-list li:hover {
  background: linear-gradient(90deg, rgba(244,244,245,.06), rgba(244,244,245,0) 70%);
  padding-left: 10px;
}
.auto-list b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.015em; }
.auto-list span { font-size: .92rem; color: rgba(244,244,245,.78); text-wrap: pretty; }
.auto-stat { margin-top: 26px; font-size: .95rem; color: rgba(244,244,245,.78); max-width: 50ch; text-wrap: pretty; }
.auto-stat strong { color: var(--paper); font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.03em; }

/* =====================================================================
   Section 8 : Pricing
   ===================================================================== */
/* The two group labels are the structural dividers of this section, so they
   are set as chapter headings rather than bold body copy. */
.pricing-group-label {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  margin: 0 0 24px;
}
.platform + .pricing-note + .pricing-group-label-build { margin-top: 88px; }
/* On /pricing/ the build half is its own section, so its label starts the
   block rather than dividing one. */
.section-pricing-build { background: var(--paper-raised); }
/* Two sections on the same ground double their padding at the seam. Tagging
   the second .section-tight lets it share the gap instead of stacking one,
   and pulls the preceding sections bottom padding back as well. */
.section-tight { padding-top: 0; margin-top: -36px; }
/* The dark CTA sits close under a dark section: its own generous padding is
   already the separation, so the block above does not add more. */
.section-auto:has(+ .section-cta) { padding-bottom: 72px; }
.section-pricing-build .pricing-group-label { margin-top: 0; padding-top: 0; border-top: none; }
/* The build group sits under the monthly plan and reads as supporting
   detail: a range in prose, then what moves it. No headline figures. */
.build-lede {
  font-size: 1rem; color: var(--ink-soft);
  max-width: 62ch; text-wrap: pretty;
  margin: -6px 0 20px;
}
.build-lede strong {
  font-family: var(--font-display); font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tier-scope {
  font-size: .88rem; color: var(--ink-muted);
  margin-bottom: 16px; text-wrap: pretty;
}

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier {
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 24px;
  padding: 28px 26px 26px;
  transition: transform var(--dur-component) var(--ease-out),
              box-shadow var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out);
}
.tier:hover {
  transform: translateY(-4px);
  border-color: var(--silver-deep);
  box-shadow: 0 20px 44px -26px rgba(17,18,19,.45);
}
.tier-featured { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tier-name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.tier-name span {
  font-family: var(--font-body);
  font-size: .76rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); background: var(--silver-wash);
  padding: 4px 9px; border-radius: 999px;
}
.tier-price { font-size: .9rem; color: var(--ink-muted); margin-bottom: 18px; }
.tier-price strong {
  display: block; margin-top: 2px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.2rem; letter-spacing: -0.04em; line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tier ul { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--rule); padding-top: 16px; }
.tier li { position: relative; padding-left: 18px; font-size: .92rem; color: var(--ink-soft); text-wrap: pretty; }
.tier li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--silver); }

.platform { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.platform-main { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 30px; }
.platform-main .tier-name { color: var(--paper); }
.platform-main .tier-price { color: rgba(244,244,245,.72); }
.platform-main .tier-price strong { display: inline; color: var(--paper); font-size: 2rem; }
.platform-desc { font-size: .95rem; color: rgba(244,244,245,.82); max-width: 44ch; text-wrap: pretty; }
.platform-addons { display: flex; flex-direction: column; gap: 12px; }
.platform-addons li {
  flex: 1 1 0; align-content: start;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 18px 22px;
  transition: transform var(--dur-component) var(--ease-out),
              border-color var(--dur-component) var(--ease-out);
}
.platform-addons li:hover { transform: translateX(3px); border-color: var(--silver-deep); }
.platform-addons b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.platform-addons span { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.platform-addons small { grid-column: 1 / -1; font-size: .84rem; color: var(--ink-muted); }
.pricing-note { margin-top: 22px; font-size: .88rem; color: var(--ink-muted); }

/* =====================================================================
   Section 9 : FAQ (native exclusive accordion via details name=)
   ===================================================================== */
/* A utility section should not shout as loudly as the argument sections. */
.section-faq { background: var(--paper-raised); }
.section-faq .h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); max-width: 16ch; }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  list-style: none; cursor: pointer;
  padding: 22px 48px 22px 0;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transform: translateY(-50%);
  transition: transform var(--dur-component) var(--ease-out);
}
.faq summary::after { transform: translateY(-50%) rotate(90deg); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.faq details p { padding: 0 0 24px; max-width: 62ch; color: var(--ink-soft); font-size: .98rem; text-wrap: pretty; }
/* The answer slides down rather than appearing. details-content is the
   modern hook; where it is unsupported the answer simply appears, which is
   the behaviour the accordion had before. */
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-screen) var(--ease-out),
                content-visibility var(--dur-screen) allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}
/* The question nudges right and its icon darkens on hover. */
.faq summary { transition: color var(--dur-component) var(--ease-out); }
.faq summary:hover { color: var(--ink-soft); }
.faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.faq details[open] summary { color: var(--ink); }

/* =====================================================================
   Section 10 : Final CTA + footer (ink)
   ===================================================================== */
/* Where a dark section runs straight into the dark CTA, a hairline marks the
   join so they do not read as one undifferentiated slab. */
.section-auto + .section-cta { padding-top: 72px; }
.section-auto + .section-cta::after {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1160px, calc(100% - 56px));
  height: 1px;
  background: rgba(244,244,245,.14);
}

.section-cta {
  position: relative;
  overflow: hidden;
  background: var(--ink); color: var(--paper);
  padding: 116px 28px; text-align: center;
}
/* A wide, slow silver glow behind the closing pitch, so the last thing on
   the page is not flat black. */
.section-cta::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 900px; aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(163,163,173,.2), rgba(163,163,173,0) 70%);
  animation: cta-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cta-drift {
  from { transform: translate(-58%, -54%) scale(1); }
  to   { transform: translate(-42%, -46%) scale(1.12); }
}
.section-cta .section-inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .section-cta::before { animation: none; }
}
.section-cta .section-inner { display: flex; flex-direction: column; align-items: center; }
.h2-cta { color: var(--paper); max-width: 18ch; margin-bottom: 14px; }
.lede-cta { color: rgba(244,244,245,.72); margin-bottom: 30px; }
.cta-search { box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); border-color: rgba(244,244,245,.35); }
.section-cta .hero-search:focus-within { outline: 2px solid var(--paper); outline-offset: 3px; }

.site-footer { background: var(--ink); color: var(--paper); border-top: 1px solid rgba(244,244,245,.12); padding: 48px 28px 40px; }
.footer-inner { display: grid; grid-template-columns: 1.2fr auto; gap: 26px 48px; align-items: start; }
.site-footer .brand { color: var(--paper); }
.site-footer .brand-mark { fill: var(--paper); }
.site-footer .brand-mark-shadow { fill: var(--ink-faint); }
.footer-brand p { margin-top: 14px; font-size: .9rem; color: rgba(244,244,245,.68); max-width: 40ch; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem; }
.footer-links a {
  position: relative;
  color: rgba(244,244,245,.78);
  transition: color var(--dur-micro);
}
.footer-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-component) var(--ease-out);
}
.footer-links a:hover { color: var(--paper); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.site-footer a:focus-visible { outline-color: var(--paper); }
.footer-legal {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 1px solid rgba(244,244,245,.12);
  font-size: .82rem; color: rgba(244,244,245,.5);
}

@media (prefers-reduced-motion: reduce) {
  .sms.typing span { animation: none; opacity: .5; }
  .segmented-thumb, .craft-panel { transition: none; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
  .section { padding: 80px 20px; }
  .section-head { margin-bottom: 36px; }

  .compare { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip li { padding: 22px 0; }
  .stat-strip li + li { padding-left: 0; border-left: none; border-top: 1px solid var(--rule); }

  .spec { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .spec-row dd.spec-tag { order: -1; justify-self: start; }

  .craft-panel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .mock { min-height: 0; }

  /* #how collapses with every other grid. Left at the 560px breakpoint the
     laptop was squeezed into a portrait box across the whole tablet band. */
  .how-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-device { order: -1; }
  .figs { grid-template-columns: repeat(2, 1fr); gap: 26px; }

  .grader-grid { grid-template-columns: 1fr; gap: 32px; }

  .auto-grid { grid-template-columns: 1fr; gap: 40px; }
  .auto-list li { grid-template-columns: 1fr; gap: 4px; }

  .tiers { grid-template-columns: 1fr; }
  .platform { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; }

  .nav { padding: 0 20px; gap: 16px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }

  .nav-links.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: var(--nav-height); left: 12px; right: 12px;
    padding: 10px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: 18px;
    /* One above .site-header so the panel always wins inside the header's
       stacking context, whatever main content declares. */
    z-index: 101;
    box-shadow: 0 20px 50px -20px rgba(17,18,19,.3), 0 18px 40px rgba(17,18,19,.16);
    margin-left: 0;
  }
  .nav-links.is-open a { padding: 12px 14px; }
  /* The opened dropdown is a white panel, so its links go back to ink even
     while the bar itself is flipped to paper over a dark section. */
  .site-header.is-on-dark .nav-links.is-open a { color: var(--ink-soft); }
  .site-header.is-on-dark .nav-links.is-open a:hover { background: rgba(17,18,19,.06); color: var(--ink); }

  .hero { padding-top: 32px; }
  .hero-stage { margin-top: 44px; }
  .hero-stage-wash { top: 60px; }
}

@media (max-width: 560px) {
  .hero-search { flex-direction: column; padding: 8px; border-radius: 22px; }
  .hero-search input { width: 100%; padding: 10px 12px; }
  .hero-search-btn { width: 100%; justify-content: center; }
  .hero-proof { display: block; }
  .hero-proof .check { display: inline-block; vertical-align: -5px; margin: 0 6px 0 0; }
  .hero-stage { border-radius: 0; margin-inline: -28px; }
  /* The search pill moves below the phone and pins to the bottom of the
     screen until the hero is scrolled past, the way owner.com's does. */
  .hero .hero-search { order: 10; position: sticky; bottom: 14px; z-index: 60; margin-top: 18px; }
  .hero .hero-proof { order: 11; }
  #heroPhone { zoom: 1; margin-bottom: -48px; }
  .hero-stage-wash { left: 0; right: 0; border-radius: 0; }

  .section { padding: 64px 18px; }
  .compare-col { padding: 24px 22px 22px; }
  .grader-facts { grid-template-columns: 1fr; gap: 16px; }
  .mock { padding: 14px 16px 0; }
  /* The base overhangs the lid; at phone widths a smaller overhang keeps it
     inside the viewport instead of widening the page. */
  /* Matches .laptop-lg .laptop-base too, which otherwise out-specifies this
     and pushed the #how laptop 12px past both viewport edges. */
  .laptop-base, .laptop-lg .laptop-base { margin: 0 -10px; height: 11px; }
  /* On a phone a MacBook has no honest shape: the stacked mock content makes
     the lid taller than it is wide. So the same markup becomes an iPhone:
     the lid turns into a titanium rail, the camera dot becomes the island,
     the hinge and base go, and the tab strip is replaced by a status row.
     A customer on a phone sees the phone version anyway. */
  .laptop { max-width: 300px; margin-inline: auto; }
  .laptop-lid {
    border-radius: 46px;
    padding: 10px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 12%, rgba(0,0,0,.28) 62%, rgba(255,255,255,.08) 100%),
      linear-gradient(90deg, #6c6f76 0%, #3a3d43 5%, #202226 16%, #1a1b1e 50%, #202226 84%, #3a3d43 95%, #6c6f76 100%);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.1),
      0 0 0 1px rgba(0,0,0,.5),
      0 2px 4px rgba(0,0,0,.4),
      0 24px 50px -18px rgba(0,0,0,.6);
  }
  /* Camera dot becomes the Dynamic Island. */
  .laptop-lid::before {
    top: 20px;
    width: 82px; height: 26px; border-radius: 999px;
    background: #050506;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.07), 0 0 0 .5px rgba(255,255,255,.06);
    z-index: 6;
  }
  .laptop-lid::after { display: none; }
  .laptop-base { display: none; }
  .browser { border-radius: 36px; }
  .browser-tabs { display: none; }
  /* Status row: time at left, a battery at right, above the address pill. */
  .browser-bar {
    position: relative;
    flex-wrap: wrap;
    padding: 52px 18px 10px;
    background: #1c1d20;
  }
  .browser-bar::before {
    content: "9:41";
    position: absolute; top: 18px; left: 24px;
    font-family: var(--font-body); font-size: .8rem; font-weight: 600;
    color: var(--paper);
  }
  .browser-bar::after {
    content: "";
    position: absolute; top: 22px; right: 24px;
    width: 22px; height: 10px; border-radius: 3px;
    border: 1.5px solid rgba(244,244,245,.5);
    background: linear-gradient(90deg, var(--paper) 0 78%, transparent 78%);
    background-clip: content-box;
    padding: 1.5px;
  }
  .browser-bar i { border-radius: 999px; padding: 6px 12px; }
  /* Light template page: its chrome stays light so the two mocks still
     contrast, but it gets the same island and status row. */
  .craft-panel-template .browser-bar { background: #f4f4f5; }
  .craft-panel-template .browser-bar::before { color: var(--ink); }
  .craft-panel-template .browser-bar::after { border-color: rgba(17,18,19,.5); background: linear-gradient(90deg, var(--ink) 0 78%, transparent 78%); background-clip: content-box; }
  .craft-panel-template .browser-bar i { background: #fff; border-color: var(--rule); color: var(--ink-muted); }
  /* The report panel is a phone screen now, so it is portrait and sizes
     to its content instead of a laptop ratio. */
  .rep { aspect-ratio: auto; min-height: 440px; }
  .laptop-lg .browser { aspect-ratio: auto; display: block; }
  .laptop-lg .rep { min-height: 440px; }
  .laptop-lg .browser-bar { padding: 52px 18px 10px; }
  .laptop-static .rep-screen-static { zoom: 1; }
  .mock { min-height: 0; padding-bottom: 18px; }
  .mock-drafted .mock-callbar { margin: auto -16px 0; }
  .mock-hero-d { grid-template-columns: 1fr; }
  .mock-cards { grid-template-columns: 1fr 1fr; }
  .mock-callbar { margin: auto -16px 0; }
  .segmented { align-self: stretch; }
  .figs { grid-template-columns: 1fr; gap: 34px; }
  .tier, .platform-main { padding: 24px 20px; }
  .section-cta { padding: 88px 18px; }
}

/* At 390 wide both halves of the headline fit on their own line at the 39px
   floor. Below 380px they stop fitting, so drop the forced break, ease the
   size down a notch, and let text-wrap: balance even the lines out. The
   space before the <br> in the markup keeps "for business" from gluing
   together once the break is hidden. */
@media (max-width: 380px) {
  .hero-headline { font-size: 2.35rem; }
  .hero-headline br { display: none; }
}

/* The report's interior scales down on narrow phones so its natural height
   drops under the 16/10.5 floor and the laptop keeps a laptop shape. */
@media (max-width: 430px) {
  .rep-screen { padding: 14px; gap: 10px; }
  .rep-score-num { font-size: 2.2rem; }
  .rep-lede { font-size: 1rem; margin-bottom: 10px; }
  .rep-field { padding: 7px 12px; }
  .rep-suggest span { padding: 5px 10px; }
  .rep-bar { grid-template-columns: 70px minmax(0, 1fr) 32px; gap: 8px; }
  .rep-screen[data-screen="2"] { gap: 12px; }
  .rep-screen[data-screen="2"] .rep-bars { gap: 12px; }
  .rep-foot { padding-top: 8px; }
}

/* The 280px frame fits down to a 336px viewport. Only the very narrowest
   phones get the 260px frame, and there the screen sizes to its tallest
   card instead of the fixed aspect ratio so screen 2 never clips. */
@media (max-width: 335px) {
  .phone { width: 260px; }
  .phone-frame { aspect-ratio: auto; }
  .phone-screen { height: auto; padding-top: 62px; }
  .phone-island { width: 76px; }
  .phone-status { left: 22px; right: 22px; }
}

/* Floating pill at phone widths: a tighter inset, and the bar's contents slide
   inward as the pill forms so the logo and menu never touch its edge. */
@media (max-width: 900px) {
  .nav { transition: height 380ms var(--ease-out), padding 380ms var(--ease-out); }
  .site-header.is-scrolled .nav { padding: 0 30px; }
  .site-header.is-scrolled::before { inset: 10px 12px; border-radius: 18px; }
}

/* =====================================================================
   Motion and depth pass (2026-09-10): kinetic headings, tilt, magnets,
   spotlight, the wall. Everything here is skipped under reduced motion
   and, for the pointer effects, on touch screens.
   ===================================================================== */

/* Kinetic headings: main.js wraps each word; the words rise from behind a
   mask, staggered by --i. The head's own reveal only fades now, so the words
   are the only thing that moves. */
.kin .w { display: inline-block; clip-path: inset(-0.2em -0.12em -0.36em -0.12em); }
.kin .w > span { display: inline-block; transform: translateY(112%); transition: transform 760ms var(--ease-out); transition-delay: calc(var(--i, 0) * 42ms); }
.kin.is-in .w > span { transform: none; }
.js .hero-headline.kin { animation: none; opacity: 1; }
.js .section-head.reveal, .js .reveal.kin { transform: none; }

/* Pointer tilt: main.js sets the transform inline while the pointer is on
   the card and drops a .sheen child that follows it. */
.tilt { transition: transform 520ms var(--ease-out), border-color var(--dur-component) var(--ease-out), box-shadow var(--dur-component) var(--ease-out); will-change: transform; transform-style: preserve-3d; }
.tilt > .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 420ms var(--ease-out); background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.2), rgba(255,255,255,0) 62%); mix-blend-mode: screen; }
.tilt:hover > .sheen { opacity: 1; }
.pillar > .sheen, .trade > .sheen, .tier > .sheen, .inv > .sheen, .compare-col-rent > .sheen { background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(10,132,255,.13), rgba(10,132,255,0) 62%); mix-blend-mode: normal; }

/* Magnetic buttons: pulled a few pixels toward a nearby pointer. */
.magnet { transition: transform 420ms cubic-bezier(.2,.8,.2,1.25), background var(--dur-component) var(--ease-out), color var(--dur-component) var(--ease-out), border-color var(--dur-component) var(--ease-out), box-shadow var(--dur-component) var(--ease-out); will-change: transform; }

/* Spotlight on the dark panels: a soft white pool under the pointer, kept
   beneath the copy. */
.oc-stage { isolation: isolate; }
.oc-panel, .cta-frost-copy, .cta-frost-visual { position: relative; z-index: 1; }
.spot-light { position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 600ms var(--ease-out); background: radial-gradient(560px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.17), rgba(255,255,255,0) 60%); }
.is-lit > .spot-light { opacity: 1; }

/* The wall: two rows of phone-width captures drifting past, opposite ways.
   Each row holds two identical sets, so translating one set's width loops
   without a seam. Hover or focus pauses it. */
.section-wall { overflow: hidden; }
.section-wall .section-head { margin-bottom: 34px; }
.wall { display: grid; gap: 18px; }
.wall-row { 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); padding: 14px 0; }
.wall-track { display: flex; width: max-content; animation: wall-move 70s linear infinite; }
.wall-row-rev .wall-track { animation-direction: reverse; }
.wall:hover .wall-track, .wall:focus-within .wall-track { animation-play-state: paused; }
.wall-set { display: flex; gap: 18px; padding-right: 18px; }
@keyframes wall-move { to { transform: translateX(-50%); } }
.wall-tile { position: relative; display: block; flex: none; width: 214px; aspect-ratio: 390 / 620; border-radius: 22px; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px rgba(17,18,19,.12), 0 20px 44px -22px rgba(17,18,19,.45); transform: rotate(var(--r, 0deg)); transition: transform 520ms var(--ease-out), box-shadow 520ms var(--ease-out); }
.wall-set .wall-tile:nth-child(odd) { --r: -1.4deg; }
.wall-set .wall-tile:nth-child(even) { --r: 1.2deg; margin-top: 22px; }
.wall-tile:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); box-shadow: inset 0 0 0 1px rgba(17,18,19,.12), 0 34px 60px -26px rgba(17,18,19,.55); z-index: 1; }
.wall-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wall-tag { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(17,18,19,.78); color: var(--paper); font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wall-tag.is-live { background: rgba(10,132,255,.92); }
.wall-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 13px; color: var(--paper); font-size: .84rem; font-weight: 600; letter-spacing: -0.01em; background: linear-gradient(180deg, rgba(17,18,19,0), rgba(17,18,19,.82)); }
@media (max-width: 760px) {
  .wall-tile { width: 150px; border-radius: 16px; }
  .wall-set { gap: 12px; padding-right: 12px; }
  .wall-set .wall-tile:nth-child(even) { margin-top: 14px; }
  .wall-name { font-size: .74rem; padding: 30px 10px 10px; }
  .wall-track { animation-duration: 50s; }
}
@media (prefers-reduced-motion: reduce) {
  .kin .w > span { transform: none; transition: none; }
  .wall-track { animation: none; }
  .wall-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .wall-tile { transform: none; }
  .magnet, .tilt { transition: none; }
}