/* ============================================================
   MAILROOM — Homepage layout (index.html only)

   The homepage's responsive system. Built ON TOP of tokens.css, which stays the
   single source of colour truth for the whole site — this file deliberately
   redefines NO colour token. The redesign's palette was checked against
   tokens.css value by value and is identical in both themes, so duplicating it
   here would buy nothing and guarantee drift the first time a colour changes.

   What this file DOES own:
     · one fluid type + spacing scale (clamp, 320 → 1920, no jumps)
     · the container / rhythm variables the sections lay themselves out against
     · every homepage component, and the three breakpoints (1080 / 900 / 600)

   The --fs-* overrides are scoped to .mr, matching tokens.css's own scope, and
   this file loads after it — same specificity, later wins. index.html is the
   only page that links it; every other page keeps site.css and tokens.css's
   fixed scale untouched.
   ============================================================ */

.mr {
  /* ---- one fluid type scale: 320px → 1920px with no jumps ----
     tokens.css sets these as fixed px for the other nine pages. Here they
     become viewport-driven, which is what lets the homepage go from a phone to
     a 1920 display without a single width-specific font-size override. The
     upper bounds land on (or just under) tokens.css's fixed values, so the
     desktop rendering is the one the site already had. */
  --fs-sm:   clamp(12.5px, 0.9vw,  13.5px);
  --fs-base: clamp(14.5px, 1vw,    15.5px);
  --fs-md:   clamp(15.5px, 1.15vw, 17px);
  --fs-lg:   clamp(17.5px, 1.5vw,  20px);
  --fs-xl:   clamp(20px,   2.1vw,  26px);
  --fs-2xl:  clamp(23px,   2.9vw,  32px);
  --fs-3xl:  clamp(27px,   4vw,    46px);
  --fs-hero: clamp(32px,   4.6vw,  56px);

  /* ---- one spacing + rhythm system, driven by viewport ---- */
  --gutter: clamp(20px, 4.2vw, 40px);
  --content: 1180px;
  --rhythm: 1;
  --sec-y: calc(clamp(58px, 7.6vw, 104px) * var(--rhythm));
  --gap-lg: clamp(28px, 4vw, 56px);
  --gap-md: clamp(18px, 2.4vw, 30px);
  --gap-sm: clamp(12px, 1.4vw, 18px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* No overflow-x:hidden here, on purpose. site.css carries it, and on the old
   homepage it was load-bearing — it silently swallowed the hero's right-bleed
   hack. Hiding overflow hides the bug that causes it; without it, anything that
   overruns the viewport is visible at 390px and gets fixed instead of masked. */
body.mr {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-size: var(--fs-base);
}
img, video { max-width: 100%; display: block; }
a { color: var(--accent-700); text-decoration: none; }
a:hover { color: var(--accent-600); }
::selection { background: var(--accent-soft); color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.03em; line-height: 1.05; font-weight: 680; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ============================================================
   SHELL
   ============================================================ */
.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: min(860px, var(--content)); }
.sec { padding: var(--sec-y) 0; position: relative; }
.sec-head { max-width: 680px; margin-bottom: var(--gap-lg); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head .lede { max-width: 620px; }
.sec-head.center .lede { margin-left: auto; margin-right: auto; }
/* Lifts the 680px cap off the HEADING only, so a long one can hold a single line
   on a wide screen instead of wrapping to two and pushing the section below it
   down the page. The lede keeps its own 620px measure — that cap is about
   readable line length for body copy, which is a different problem from a
   display heading and should not be solved with the same number.
   It still wraps on narrow viewports; nothing here forces one line, it only
   stops removing the room for one. */
.sec-head.wide { max-width: none; }
.sec-head.wide h2 { max-width: none; }
.h-section { font-size: var(--fs-3xl); letter-spacing: -0.035em; line-height: 1.04; }
.lede { font-size: var(--fs-lg); color: var(--text-muted); line-height: 1.55; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-text); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent-line); flex: 0 0 auto; }
.eyebrow.center { justify-content: center; }

/* ============================================================
   LOGO
   ============================================================ */
.logo { display: inline-flex; align-items: center; gap: 11px; color: inherit; }
.logo-mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent-500);
  display: grid; place-items: center; color: var(--on-accent); flex: 0 0 auto;
}
.logo-mark::before {
  content: ""; display: block; width: 17.8px; height: 17.8px; background: currentColor;
  -webkit-mask: var(--logo-envelope) center / contain no-repeat;
  mask: var(--logo-envelope) center / contain no-repeat;
}
.logo-word { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.logo-word b { color: var(--accent-text); font-weight: 700; }

/* ============================================================
   BUTTONS — 44px minimum touch target, everywhere
   ============================================================ */
.btn {
  font-family: var(--font-display); font-size: var(--fs-base); font-weight: 560;
  letter-spacing: -0.005em; border: 1px solid transparent; border-radius: var(--r-md);
  padding: 13px 20px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  line-height: 1; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast),
              box-shadow var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 16px 26px; font-size: var(--fs-md); min-height: 52px; }
.btn-primary {
  background: var(--accent-600); color: var(--on-accent);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { background: var(--accent-500); color: var(--on-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }
.btn-quiet { background: transparent; color: var(--text-muted); }
.btn-quiet:hover { color: var(--text); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm);
  font-weight: 540; padding: 8px 13px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ============================================================
   NAV — the sticky bar (the sheet itself is in nav.css)

   The old bar simply deleted .nav-links below 980px with nothing in their
   place: on every phone the six section links did not exist. Below 1080 the
   links and inline CTAs now collapse into a hamburger that opens a full-height
   sheet carrying all six links AND both CTAs, so nothing is unreachable on a
   phone. 1080 (not 980) is where the full bar stops needing to eat its gutter.
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur), background var(--dur);
}
.nav.scrolled { border-bottom-color: var(--border); background: color-mix(in oklch, var(--bg) 92%, transparent); }
/* flex-wrap is the no-JS safety net: without JS the links stay in the bar at
   every width (see the breakpoint below), and wrapping to a second line is far
   better than a row that runs off the side of a phone. */
.nav-inner { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); min-height: 68px; flex-wrap: wrap; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); margin-left: auto; }
.nav-links a { font-size: 14.5px; color: var(--text-muted); font-weight: 500; padding: 11px 0; transition: color var(--dur-fast); }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* The hamburger and the sheet live in nav.css — one definition, loaded by
   every page that has a bar. Only the bar above is page-specific: this one is
   sized on the fluid clamp scale, site.css sizes its own in fixed px. */

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(28px, 4vw, 60px) 0 var(--sec-y); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 520px at 78% -8%, var(--accent-soft), transparent 60%),
              radial-gradient(800px 420px at 8% 4%, var(--bg-tint), transparent 64%);
  opacity: 0.85;
}
.hero .wrap { position: relative; z-index: 1; }

/* The motto runs as one full-width line above the split — inside the 410px copy
   column it broke across three lines. The video starts below it, aligned with
   the lede, which is also what retires the old right-bleed hack: the video no
   longer has to fight the copy column for width, so .hero .wrap can go back to
   being an ordinary 1180px container with ordinary gutters. */
.hero-head { margin-bottom: clamp(22px, 2.4vw, 34px); }
.hero-head .hero-h { max-width: 34ch; margin-bottom: 0; text-wrap: balance; }
.hero-stack { display: grid; grid-template-columns: minmax(0, 410px) minmax(0, 1fr); gap: clamp(28px, 3vw, 40px); align-items: start; }
.hero-copy { min-width: 0; max-width: 410px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.hero-h { font-size: var(--fs-hero); letter-spacing: -0.038em; line-height: 1.04; font-weight: 700; margin-bottom: 18px; }
.hero-h .soft { color: var(--text-muted); font-weight: inherit; }
/* The second motto line, as its own block. The design export achieved this with
   runs of literal &nbsp; and <br><br> inside the h1 — which re-wrapped into
   nonsense at every width it was not drawn at, and read as a wall of spaces to a
   screen reader. A block-level span breaks in exactly one place, at any width. */
.hero-h-2 { display: block; margin-top: 0.28em; }
.hero-lede { max-width: 52ch; margin: 0 0 26px; }
.hero-lede b { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-chip-row { display: flex; margin-top: 14px; }
.hero-microcopy { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--text-muted); max-width: 48ch; line-height: 1.6; }
.hero-microcopy b { color: var(--text); font-weight: 600; }
.hero-fine {
  margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hero-fine .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); opacity: 0.6; flex: 0 0 auto; }

.hero-video { margin: 6px 0 0; min-width: 0; max-width: 800px; }
.hero-video video {
  display: block; width: 100%; height: auto; border-radius: var(--r-xl);
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface);
}
.hero-video figcaption { margin-top: 14px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; max-width: 62ch; }
.hero-video figcaption b { color: var(--text); font-weight: 600; }

@media (max-width: 1080px) {
  .hero-stack { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 40px); }
  .hero-copy { max-width: 720px; }
  .hero-head .hero-h { max-width: 22ch; }
  .hero-video { margin: 4px 0 0; max-width: none; }
}
@media (max-width: 430px) {
  .hero-fine { flex-direction: column; align-items: flex-start; gap: 5px; }
  .hero-fine .sep { display: none; }
  .hero-actions .btn { width: 100%; }
}

/* snow chip */
.snowchip { position: relative; overflow: hidden; }
.snowchip .snow-field { position: absolute; inset: 0; pointer-events: none; }
.snowchip .pt {
  position: absolute; top: -6px; border-radius: 50%; background: var(--accent-300); opacity: 0.75;
  animation-name: mr-snow; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes mr-snow { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 0), var(--fall, 60px)); } }
@media (prefers-reduced-motion: reduce) { .snowchip .pt { animation: none !important; opacity: 0 !important; } }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.founder-inner { max-width: 74ch; }
.founder p { font-size: var(--fs-md); line-height: 1.7; color: var(--text); margin: 0 0 16px; }
.founder p.lead-line { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.founder .sig { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-faint); margin-top: 20px; }

/* ============================================================
   NOTICES
   ============================================================ */
.notices { display: grid; gap: var(--gap-md); margin-top: var(--gap-md); max-width: 900px; }
.notice { margin: 0; }
/* Natural size is the ceiling — these are screenshots, and upscaling past their
   pixel width is what made them soft. They scale DOWN to fit narrow viewports,
   never up. notice-email.png is 565px wide and now renders at 565px, not
   stretched across the column. */
.notice img { width: auto; max-width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.notice figcaption { margin-top: 12px; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.notice figcaption b { color: var(--text); font-weight: 600; }
.notices-note { margin-top: 24px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: clamp(18px, 2.2vw, 26px) 10px; text-align: center; border-right: 1px solid var(--border); }
.trust-item:last-child { border-right: 0; }
.trust-item .ti-key { font-weight: 640; font-size: var(--fs-base); letter-spacing: -0.02em; margin-bottom: 4px; }
.trust-item .ti-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
@media (max-width: 900px) {
  .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(2n) { border-right: 0; }
  .trust-item:nth-child(1), .trust-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* ============================================================
   STEPS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); }
.step {
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px) clamp(24px, 2.6vw, 34px) 0;
  border-right: 1px solid var(--border); position: relative;
}
.step:last-child { border-right: 0; padding-right: 0; }
.step .step-n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent-text); letter-spacing: 0.04em; margin-bottom: 14px; }
.step .step-t { font-size: var(--fs-lg); font-weight: 640; letter-spacing: -0.025em; margin-bottom: 9px; }
.step .step-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.step .step-bar { position: absolute; left: 0; top: -1px; width: 38px; height: 2px; background: var(--accent-600); }
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--border); padding: 24px 0; }
  .step:last-child { border-bottom: 0; }
}

/* ============================================================
   KEEPSAFE
   ============================================================ */
.keepsafe { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.keepsafe::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 480px at 82% 12%, var(--accent-soft), transparent 60%); opacity: 0.5;
}
.keepsafe .wrap { position: relative; z-index: 1; }
.keepsafe-grid { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: var(--gap-lg); align-items: center; }
.keepsafe .promise { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.35; margin: 0 0 24px; }
.keepsafe .promise b { color: var(--accent-text); font-weight: 600; }
.ks-points { display: flex; flex-direction: column; gap: 16px; }
.ks-point { display: flex; gap: 14px; align-items: flex-start; }
.ks-point .tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--accent-soft);
  border: 1px solid var(--accent-line); display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.ks-point .tick svg { width: 12px; height: 12px; stroke: var(--accent-text); fill: none; }
.ks-point .kp-t { font-size: var(--fs-base); line-height: 1.6; }
.ks-point .kp-t b { font-weight: 620; }
.ks-point .kp-t span { color: var(--text-muted); }

.channels {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: clamp(20px, 2.4vw, 30px);
}
.channels .device {
  border: 1.5px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--r-lg);
  padding: 20px; margin-bottom: 24px; position: relative;
}
.channels .device .dlabel {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 14px; padding-right: 96px;
}
.channels .device .dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.channels .device .dcell {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: var(--fs-sm); display: flex; align-items: center; gap: 9px;
}
.channels .device .dcell .lock { color: var(--accent-text); }
.channels .device .stays {
  position: absolute; top: 18px; right: 20px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  padding: 4px 10px; background: var(--surface);
}
.channels .leaves-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.channels .leaves-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.channels .chan { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); align-items: flex-start; }
.channels .chan:last-child { border-bottom: 0; padding-bottom: 0; }
.channels .chan .cn { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding-top: 2px; }
.channels .chan .ct { font-size: var(--fs-sm); line-height: 1.6; }
.channels .chan .ct b { font-weight: 620; }
.channels .chan .ct span { color: var(--text-muted); }
@media (max-width: 980px) { .keepsafe-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 40px); } }
@media (max-width: 460px) {
  .channels .device .dgrid { grid-template-columns: 1fr; }
  .channels .device .stays { position: static; display: inline-block; margin-bottom: 12px; }
  .channels .device .dlabel { padding-right: 0; }
}

/* ============================================================
   WHY
   ============================================================ */
.why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.why-cell { background: var(--surface); padding: clamp(22px, 2.4vw, 30px); }
.why-cell .wc-k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 16px;
}
.why-cell .wc-t { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.02em; margin-bottom: 8px; }
.why-cell .wc-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: center; margin-bottom: var(--gap-lg); }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; } }
.split-copy h3 { font-size: var(--fs-2xl); margin: 16px 0 14px; }

/* review mock — restacks instead of squeezing */
.reviewmock { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.reviewmock .rm-bar {
  display: flex; align-items: center; gap: 9px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); background: var(--bg-tint); flex-wrap: wrap;
}
.reviewmock .rm-bar .wlogo { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(150deg, var(--accent-500), var(--accent-700)); }
.reviewmock .rm-bar .wt { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.reviewmock .rm-bar .rm-sel { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-text); }
.rrow {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 13px clamp(14px, 1.6vw, 20px); border-bottom: 1px solid var(--border);
}
.rrow:last-child { border-bottom: 0; }
.rrow .rcheck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--accent-line); background: var(--accent-soft); position: relative; flex: 0 0 auto; }
.rrow .rcheck.on { background: var(--accent-600); border-color: var(--accent-600); }
.rrow .rcheck.on::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(43deg);
}
.rrow .rsender { font-weight: 580; font-size: var(--fs-sm); }
.rrow .rsub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.rrow .rsize { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.rbucket { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.rbucket.safe { background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); }
.rbucket.review { background: var(--warn-soft); color: var(--warn-text); border: 1px solid var(--warn-line); }
.reviewmock .rm-foot {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-top: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap;
}
.reviewmock .rm-foot .rf-figure { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.reviewmock .rm-foot .rf-figure b { color: var(--text); }
.reviewmock .rm-foot .rf-cta {
  margin-left: auto; font-size: var(--fs-sm); font-weight: 560; color: var(--on-accent);
  background: var(--accent-600); padding: 9px 16px; border-radius: var(--r-sm); white-space: nowrap;
}
@media (max-width: 540px) {
  .rrow { grid-template-columns: 22px minmax(0, 1fr); row-gap: 8px; }
  .rrow .rsize { grid-column: 2; font-size: 12px; }
  .rrow .rbucket { grid-column: 2; justify-self: start; }
  .reviewmock .rm-foot .rf-cta { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: var(--surface-2); border-top: 1px solid var(--border); }
.trial-card {
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); padding: clamp(24px, 2.6vw, 34px); margin-bottom: var(--gap-md);
  display: grid; grid-template-columns: 1.3fr 1fr auto; gap: var(--gap-md); align-items: center;
}
.trial-card .tc-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 12px;
}
.trial-card .tc-t { font-size: var(--fs-xl); font-weight: 680; letter-spacing: -0.03em; margin-bottom: 8px; }
.trial-card .tc-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.trial-meta { display: flex; flex-direction: column; gap: 10px; }
.trial-meta .tm { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-sm); flex-wrap: wrap; }
.trial-meta .tm .tmk { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); width: 78px; flex: 0 0 auto; letter-spacing: 0.04em; }
.trial-meta .tm b { font-weight: 620; }
@media (max-width: 900px) { .trial-card { grid-template-columns: 1fr; } .trial-card .btn { width: 100%; } }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-sm); }
.tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: clamp(22px, 2.4vw, 28px); display: flex; flex-direction: column;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.tier:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tier.featured { border-color: var(--accent-600); box-shadow: var(--shadow-md); position: relative; }
.tier.featured::before {
  content: "3 mailboxes"; position: absolute; top: -11px; left: 24px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--accent-600);
  color: var(--on-accent); padding: 4px 11px; border-radius: var(--r-pill);
}
.tier .t-name { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.02em; margin-bottom: 4px; }
.tier .t-accounts { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.03em; margin-bottom: 20px; }
.tier .t-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.tier .t-price .amt { font-size: clamp(32px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: proportional-nums; }
.tier .t-once { font-size: 12.5px; color: var(--text-faint); margin-bottom: 22px; }
.tier .t-feats { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 11px; }
.tier .t-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; }
.tier .t-feats li svg { width: 14px; height: 14px; stroke: var(--accent-text); fill: none; flex: 0 0 auto; margin-top: 3px; }
.tier .btn { margin-top: auto; width: 100%; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.pricing-howto { margin: var(--gap-md) auto 0; max-width: 74ch; text-align: center; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-muted); }
.pricing-howto b { color: var(--text); font-weight: 600; }
.pricing-note { margin-top: 24px; text-align: center; font-size: 12.5px; color: var(--text-faint); font-family: var(--font-mono); }

.future-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); margin-top: var(--gap-md); }
.future-card { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 28px); }
.future-card .fc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.future-card .fc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); font-weight: 500; }
.future-card .fc-tag {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--accent-text);
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-pill);
  padding: 4px 11px; white-space: nowrap;
}
.future-card .fc-t { font-size: var(--fs-md); font-weight: 640; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text); }
.future-card .fc-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
@media (max-width: 900px) { .future-band { grid-template-columns: 1fr; } }

/* ============================================================
   ROADMAP
   ============================================================ */
.roadmap-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--gap-lg); }
.road-now { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r-lg); padding: clamp(22px, 2.4vw, 28px); align-self: start; }
.road-now .rn-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.road-now .rn-tag .livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-600); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-600) 25%, transparent); }
.road-now .rn-t { font-size: var(--fs-xl); font-weight: 660; letter-spacing: -0.025em; margin-bottom: 10px; }
.road-now .rn-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.road-later .rl-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; display: block; }
.road-item { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); align-items: start; }
.road-item:last-child { border-bottom: 0; }
.road-item .ri-mark { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-strong); margin-top: 6px; }
.road-item .ri-t { font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.015em; margin-bottom: 4px; }
.road-item .ri-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; }
.road-item .ri-when { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 4px 10px; white-space: nowrap; }
@media (max-width: 900px) { .roadmap-grid { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 36px); } }
@media (max-width: 520px) {
  .road-item { grid-template-columns: 9px minmax(0, 1fr); row-gap: 10px; }
  .road-item .ri-when { grid-column: 2; justify-self: start; }
}

/* ============================================================
   LIVE
   ============================================================ */
.feed-empty { background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: 28px 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-base); }
.feed-empty b { color: var(--text); font-weight: 650; }
.feed-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.feed-item { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 24px; color: inherit; }
.feed-item:hover { border-color: var(--accent-line); box-shadow: var(--shadow-md); color: inherit; }
.feed-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.feed-gb { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); }
.feed-gb .u { font-size: var(--fs-sm); font-weight: 600; }
.feed-prov { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.feed-when { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-faint); }
.feed-hook { margin-top: 6px; font-size: var(--fs-sm); color: var(--text-muted); }
.feed-stat { font-size: var(--fs-md); color: var(--text-muted); margin: 0 0 24px; }
.feed-stat b { color: var(--accent-text); font-weight: 700; }
.live-more { margin-top: 24px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); padding: 22px 44px 22px 0; min-height: 60px;
  position: relative; display: flex; align-items: center; gap: 16px;
}
.faq-q .fq-plus { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }
.faq-q .fq-plus::before, .faq-q .fq-plus::after { content: ""; position: absolute; background: var(--text-muted); transition: transform var(--dur), opacity var(--dur); }
.faq-q .fq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-q .fq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item.open .fq-plus::after { transform: rotate(90deg); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease-out); }
.faq-a-inner { padding: 0 clamp(0px, 4vw, 56px) 26px 0; font-size: var(--fs-base); color: var(--text-muted); line-height: 1.65; }
.faq-a-inner b { color: var(--text); font-weight: 600; }
.faq-a-inner a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.faq-a-inner a:hover { color: var(--accent-text); }
/* Footnote for the one answer that quotes a competitor's price. It sits with the
   claim rather than at the foot of the page: a dated source the reader has to go
   hunting for is not a source. */
.faq-a-inner .fn { display: block; margin-top: 12px; font-size: 12.5px; color: var(--text-faint); line-height: 1.55; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.contact-card {
  display: flex; flex-direction: column; gap: 9px; padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-sm); color: inherit;
  transition: transform 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out), border-color 0.28s var(--ease-out);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-line); color: inherit; }
.contact-card .cc-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
/* `anywhere`, not `break-word`. Both break the address mid-word when it is too
   long, but only `anywhere` also shrinks the element's min-content size — and
   min-content is what the grid track is sized from. With `break-word` the
   column still reserved the full width of "contact@mailroomclean.com" as one
   unbreakable run, which pushed the card 11px past a 320px viewport.
   min-width:0 stops the default `minmax(auto, 1fr)` track floor doing the same. */
.contact-card { min-width: 0; }
.contact-card .cc-mail { font-size: var(--fs-lg); font-weight: 640; letter-spacing: -0.02em; color: var(--accent-text); overflow-wrap: anywhere; }
.contact-card .cc-d { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }
.contact-card .cc-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 560; color: var(--text); }
.contact-card .cc-cta .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.contact-card:hover .cc-cta .arrow { transform: translateX(4px); }
.contact-note { text-align: center; margin-top: 24px; font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { padding: var(--sec-y) 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% 0%, var(--accent-soft), transparent 65%); opacity: 0.7; }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lede { margin: 0 auto 28px; max-width: 56ch; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 430px) { .cta-actions .btn { width: 100%; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top: 1px solid var(--border); background: var(--surface-2); padding: var(--sec-y) 0 40px; }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap-md); padding-bottom: var(--gap-lg); border-bottom: 1px solid var(--border); }
.foot-brand .logo { margin-bottom: 14px; }
.foot-brand p { font-size: var(--fs-sm); color: var(--text-muted); max-width: 34ch; line-height: 1.6; margin: 0; }
.foot-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 14px; font-weight: 500; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.foot-col a { font-size: var(--fs-sm); color: var(--text-muted); display: inline-flex; align-items: center; min-height: 36px; transition: color var(--dur-fast); }
.foot-col a:hover { color: var(--text); }
.foot-legal { padding-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.legal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.legal-block { font-size: 12.5px; color: var(--text-faint); line-height: 1.6; }
.legal-block b { color: var(--text-muted); font-weight: 600; }
.legal-block a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.legal-block a:hover { color: var(--text); }
.legal-fulllinks { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--border); }
.legal-fulllinks .lfl-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.legal-fulllinks a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 560; color: var(--accent-text); min-height: 36px; }
.legal-fulllinks a:hover .arrow { transform: translateX(3px); }
.legal-fulllinks a .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.foot-base { display: flex; align-items: center; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.foot-base .copy { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.foot-base .spacer { flex: 1; min-width: 0; }
.foot-base a { font-size: 12.5px; color: var(--text-faint); min-height: 36px; display: inline-flex; align-items: center; }
.foot-base a:hover { color: var(--text-muted); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   REVEAL — progressive enhancement only.
   Gated on .js so a visitor without JS never gets a page of invisible sections.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
}