/* Ottavio — Vercel-skeleton design (approved v3).
   Pure black/white, Geist + Geist Mono, Jost for the wordmark only. */

:root {
  --bg: #000;
  --card: #0a0a0a;
  --ink: #ededed;
  --gray: #a1a1a1;
  --gray-2: #888;
  --gray-3: #555;
  --line: #171717;
  --line-2: #222;
  --line-3: #333;
  --sans: "Geist", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --wordmark: "Jost", var(--sans);
  /* One vertical rhythm everywhere: section boundaries share --sp-section,
     sibling blocks inside a section share the smaller --sp-block. */
  --sp-section: 120px;
  --sp-block: 140px;
  --sp-section-m: 72px;
  --sp-block-m: 90px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, .btn-rect:focus-visible, .btn-pill:focus-visible {
  outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px;
}
ul { list-style: none; }

/* ---------- Nav ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}
.nav-left { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; gap: 22px; font-size: 13.5px; color: var(--gray); }
.nav-links a:hover { color: var(--ink); }
.nav-mark {
  font-family: var(--wordmark);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav-actions { display: flex; gap: 8px; }
.btn-rect { border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.btn-rect.outline { border: 1px solid var(--line-3); color: var(--ink); }
.btn-rect.outline:hover { border-color: #666; }
.btn-rect.fill { background: #fff; color: #0a0a0a; border: 1px solid #fff; }
.btn-rect.fill:hover { background: #d9d9d9; border-color: #d9d9d9; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: center;
  min-height: calc(100vh - 64px);
  padding: 20px 44px 60px 56px;
  overflow: hidden;
}
.hero-glow {
  position: relative;
  width: 220px; height: 220px;
  justify-self: center;
  grid-column: 2; grid-row: 1;
  pointer-events: none;
}
.hero-glow .halo {
  position: absolute; inset: -72px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, transparent 68%);
  filter: blur(6px);
}
.hero-glow .ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.95);
  box-shadow: 0 0 34px rgba(255,255,255,.55), 0 0 90px rgba(255,255,255,.25), inset 0 0 26px rgba(255,255,255,.28);
}
.hero-glow .ring2 {
  position: absolute; inset: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.75);
  box-shadow: 0 0 22px rgba(255,255,255,.4), inset 0 0 18px rgba(255,255,255,.2);
}
/* Resting human breath: ~12/min = 5s cycle. One continuous curve —
   inhale to the 42% mark, longer exhale, no plateau anywhere.
   Animations live on the children so JS can move/dim .hero-glow itself. */
@keyframes breathe {
  0%   { transform: scale(.95); }
  42%  { transform: scale(1.05); }
  100% { transform: scale(.95); }
}
@keyframes halo-swell {
  0%   { opacity: .45; transform: scale(.95); }
  42%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: .45; transform: scale(.95); }
}
.hero-glow .ring  { animation: breathe 5s ease-in-out infinite; }
.hero-glow .ring2 { animation: breathe 5s ease-in-out infinite; }
.hero-glow .halo  { animation: halo-swell 5s ease-in-out infinite; }

.hero-copy { position: relative; justify-self: start; grid-column: 1; grid-row: 1; }
.hero-eyebrow { font-size: 13px; color: var(--gray); margin-bottom: 16px; }
.trial-note { font-size: 12.5px; color: var(--gray-3); margin-top: 14px; }
.hero h1 {
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 350;
  letter-spacing: -.035em;
  line-height: 1.04;
  margin-bottom: 30px;
}
.hero .h1-sub {
  display: block;
  font-size: clamp(20px, 2.4vw, 34px);
  margin-top: 8px;
  white-space: nowrap;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-pill { border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 500; display: inline-block; }
.btn-pill.fill { background: #fff; color: #0a0a0a; border: 1px solid #fff; }
.btn-pill.fill:hover { background: #d9d9d9; border-color: #d9d9d9; }
.btn-pill.outline { border: 1px solid var(--line-3); color: var(--ink); }
.btn-pill.outline:hover { border-color: #666; }

.hero-list { position: relative; display: flex; flex-direction: column; gap: 16px; font-size: 15px; color: var(--gray); justify-self: end; width: 300px; grid-column: 3; grid-row: 1; }
.hero-list .lead { color: var(--ink); }

/* ---------- Case sections ---------- */
.case { padding: var(--sp-section) 56px; }
.case + .case { padding-top: 30px; }
.case-title {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 350;
  letter-spacing: -.03em;
  line-height: 1.06;
  max-width: 720px;
  margin-bottom: 64px;
}
.case-title .dim { color: var(--gray-3); }
.case-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
}
.case-row.flip { grid-template-columns: 300px 1fr; margin-top: 105px; }

.shot {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.shot-bar { display: flex; gap: 6px; padding: 11px 14px; border-bottom: 1px solid #1c1c1c; }
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #262626; }
.shot-body { padding: 18px 20px 22px; }
.msg { display: flex; gap: 9px; margin: 9px 0; align-items: flex-start; }
.av { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.av.emp { background: #262626; }
.av.ott { border: 1.3px solid #fff; position: relative; }
.av.ott::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); }
.bub {
  font-size: 13px; line-height: 1.55;
  background: #141414; border: 1px solid var(--line-2);
  padding: 8px 12px; border-radius: 10px;
}
.tz-line {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; color: var(--gray-3);
  margin: 2px 0 12px;
}
.shot.solo { max-width: 640px; margin: 0 auto; }
.who {
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .12em; color: var(--gray-3);
  margin-bottom: 4px;
}

/* ---------- iMessage-style text chain (Ashley story) ---------- */
.imsg {
  max-width: 420px; margin: 0 auto;
  background: #050505;
  border: 1px solid #2a2a2c;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--sans);
}
.imsg-head {
  position: relative;
  background: #161618;
  border-bottom: 1px solid #2a2a2c;
  text-align: center;
  padding: 12px 14px 10px;
}
.imsg-back {
  position: absolute; left: 14px; top: 50%; transform: translateY(-58%);
  color: #0A84FF; font-size: 26px; font-weight: 300; line-height: 1;
}
.imsg-av {
  display: block; width: 34px; height: 34px; border-radius: 50%;
  border: 1.6px solid #fff; margin: 0 auto 5px; position: relative;
}
.imsg-av::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.imsg-name { font-size: 13px; font-weight: 600; color: #fff; }
.imsg-sub { font-size: 10px; color: #8E8E93; margin-top: 1px; }
.imsg-body { display: flex; flex-direction: column; padding: 14px 12px 16px; }
.imsg-stamp { text-align: center; font-size: 10.5px; font-weight: 500; color: #8E8E93; margin: 2px 0 12px; }
.b-out, .b-in {
  max-width: 80%; padding: 8px 13px; margin-bottom: 4px;
  font-size: 14px; line-height: 1.35; border-radius: 18px;
}
.b-out { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 5px; }
.b-out + .b-out { margin-top: -1px; }
.b-in { align-self: flex-start; background: #3A3A3C; color: #fff; border-bottom-left-radius: 5px; }
.b-out.tail, .b-in.tail { position: relative; }
.b-out.tail::before {
  content: ""; position: absolute; right: -6px; bottom: 0;
  width: 13px; height: 13px; background: #0A84FF;
  border-bottom-left-radius: 12px;
}
.b-out.tail::after {
  content: ""; position: absolute; right: -13px; bottom: 0;
  width: 13px; height: 14px; background: #050505;
  border-bottom-left-radius: 9px;
}
.b-in.tail::before {
  content: ""; position: absolute; left: -6px; bottom: 0;
  width: 13px; height: 13px; background: #3A3A3C;
  border-bottom-right-radius: 12px;
}
.b-in.tail::after {
  content: ""; position: absolute; left: -13px; bottom: 0;
  width: 13px; height: 14px; background: #050505;
  border-bottom-right-radius: 9px;
}
.imsg-input {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px;
}
.imsg-input .plus {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: #2C2C2E; color: #8E8E93; font-size: 17px; font-weight: 400;
  display: inline-flex; align-items: center; justify-content: center;
}
.imsg-input .field {
  flex: 1; border: 1px solid #3A3A3C; border-radius: 999px;
  padding: 6px 13px; font-size: 13px; color: #8E8E93;
}
.imsg-delivered { align-self: flex-end; font-size: 10px; color: #8E8E93; margin: 1px 5px 12px 0; }
.imsg-receipt {
  text-align: center; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .1em; color: #8E8E93; margin-top: 14px;
}

/* Cases layout: quotes left, phone right */
.cases-grid {
  display: grid; grid-template-columns: 1fr 420px;
  column-gap: 64px; align-items: center;
  padding-right: 20px;
}
.cases-grid .imsg { margin: 0; }
.cases-grid .t-row { grid-template-columns: 1fr 170px; gap: 28px; }

/* ---------- Slack-style thread ---------- */
.slackw {
  background: #1a1d21; border: 1px solid #33363a; border-radius: 12px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--sans);
}
.slackw-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid #33363a;
}
.sw-chan { font-size: 14px; font-weight: 700; color: #d1d2d3; }
.sw-meta { font-size: 11px; color: #9a9c9e; }
.slackw-body { padding: 14px 16px 16px; }
.sw-msg { display: flex; gap: 10px; margin-bottom: 12px; }
.sw-av {
  width: 34px; height: 34px; border-radius: 7px; flex: none;
  background: #3f4650; color: #d1d2d3; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.sw-av.ott { background: #0a0a0a; border: 1.4px solid #fff; position: relative; }
.sw-av.ott::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.2px solid rgba(255,255,255,.6); }
.sw-line { display: flex; align-items: baseline; gap: 7px; }
.sw-line b { font-size: 13.5px; color: #fff; font-weight: 700; }
.sw-app {
  font-size: 8.5px; font-weight: 700; letter-spacing: .04em; color: #9a9c9e;
  background: #33363a; border-radius: 3px; padding: 1.5px 4px;
}
.sw-time { font-size: 10.5px; color: #9a9c9e; }
.sw-text { font-size: 13.5px; color: #d1d2d3; line-height: 1.45; margin-top: 1px; }
.sw-day {
  position: relative; text-align: center; margin: 2px 0 14px;
}
.sw-day::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: #33363a;
}
.sw-day span {
  position: relative; background: #1a1d21; border: 1px solid #33363a;
  border-radius: 999px; padding: 3px 12px;
  font-size: 11px; font-weight: 700; color: #d1d2d3;
}
.sw-react {
  display: inline-block; margin: 0 0 14px 44px;
  font-size: 12px; color: #d1d2d3;
  background: #26292d; border: 1px solid #1c64f2; border-radius: 999px;
  padding: 2.5px 9px;
}
.sw-react b { font-size: 11px; font-weight: 600; color: #9dbbf5; margin-left: 3px; }
.sw-input {
  border: 1px solid #565856; border-radius: 9px;
  padding: 9px 12px; font-size: 12.5px; color: #9a9c9e;
}

/* ---------- Email widget ---------- */
.mailw {
  background: #141416; border: 1px solid #2a2a2c; border-radius: 12px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--sans);
}
.mailw-head { padding: 14px 18px 12px; border-bottom: 1px solid #2a2a2c; }
.mw-subject { font-size: 14.5px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.mw-sender { display: flex; align-items: center; gap: 10px; }
.mw-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: #4a5568; color: #e2e8f0; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.mw-name { font-size: 12.5px; font-weight: 600; color: #fff; }
.mw-to { font-size: 11px; color: #8E8E93; margin-top: 1px; }
.mw-date { margin-left: auto; font-size: 11px; color: #8E8E93; }
.mailw-body { padding: 15px 18px 16px; font-size: 13px; color: #d6d6db; line-height: 1.55; }
.mw-reply {
  margin-top: 13px; padding: 11px 13px;
  border-left: 2px solid #0A84FF; background: #1b1b1e; border-radius: 0 9px 9px 0;
}
.mw-reply-head { font-size: 10.5px; color: #8E8E93; margin-bottom: 5px; }

/* ---------- Phone-call widget ---------- */
.callw {
  background: #101013; border: 1px solid #2a2a2c; border-radius: 20px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--sans);
  text-align: center;
}
.callw-head { padding: 22px 18px 6px; }
.callw-head .imsg-av { width: 46px; height: 46px; margin-bottom: 8px; }
.cw-name { font-size: 19px; font-weight: 400; color: #fff; }
.cw-timer {
  font-size: 12px; color: #8E8E93; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.cw-controls { display: flex; gap: 22px; justify-content: center; padding-top: 14px; }
.cw-controls span {
  width: 34px; height: 34px; border-radius: 50%;
  background: #2C2C2E; display: inline-block;
}
.callw-body { padding: 14px 22px 4px; text-align: left; }
.cw-cap { font-size: 12.5px; color: #b9b9c0; line-height: 1.5; margin-bottom: 9px; }
.cw-cap b { color: #fff; font-weight: 600; margin-right: 5px; }
.cw-cap.ott b { color: #fff; }
.callw-foot { padding: 10px 0 4px; }
.cw-end {
  display: inline-block; width: 40px; height: 40px; border-radius: 50%;
  background: #FF453A; position: relative;
}
.cw-end::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 7px; border: 2.5px solid #fff; border-top: none;
  border-radius: 0 0 9px 9px; transform: translate(-50%, -50%);
}
.done {
  font-family: var(--mono);
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; font-size: 10.5px; color: var(--gray); letter-spacing: .08em;
}
.tick {
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; color: #000;
  font-size: 9px; font-weight: 700; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
}

.claim { font-size: 19px; line-height: 1.5; font-weight: 500; margin-bottom: 22px; }
.claim .g { color: var(--gray-2); font-weight: 400; }
.feat-label { font-size: 13px; color: var(--gray-2); margin-bottom: 10px; }
.feat-list { display: flex; flex-direction: column; gap: 9px; font-size: 14px; }

.ledger { padding: 4px 0; }
.ledger .row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.ledger .row:last-child { border-bottom: none; }
.ledger .tm { font-family: var(--mono); color: var(--gray-3); font-size: 10.5px; margin-right: 10px; }
.ledger .st { font-family: var(--mono); font-size: 10px; color: var(--gray); letter-spacing: .08em; white-space: nowrap; }

/* ---------- Done this week ---------- */
.ship { padding: var(--sp-section) 56px; }
.ship-title { font-size: clamp(32px, 3.5vw, 48px); font-weight: 350; letter-spacing: -.03em; margin-bottom: 56px; }
.ship-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 26px 26px 24px;
  min-height: 170px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  position: relative; overflow: hidden;
}
.card .art {
  position: absolute; right: 22px; top: 20px;
  font-family: var(--mono); font-size: 11px; color: #444;
  text-align: right; line-height: 1.9;
}
.card h3 { font-size: 21px; font-weight: 500; }
.card .s { font-size: 13.5px; color: var(--gray-2); line-height: 1.55; max-width: 320px; }

/* ---------- Alven-structure sections ---------- */
.sec { padding: var(--sp-section) 56px; }
.sec-title {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 350;
  letter-spacing: -.03em;
  line-height: 1.06;
  max-width: 760px;
  margin-bottom: 64px;
}
.sec-title .dim { color: var(--gray-3); }
.sec-title .lead-sm { font-size: .55em; letter-spacing: -.015em; }

.t-row {
  display: grid; grid-template-columns: 1fr 240px; gap: 48px;
  align-items: center; padding: 36px 0;
  max-width: 980px;
}
.t-row:last-child { border-bottom: none; }
.t-who { font-size: 13px; color: var(--gray-2); margin-top: 12px; }
.t-stat { text-align: right; }
.stat-n { display: block; font-weight: 300; font-size: 46px; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.stat-l { display: block; font-size: 12.5px; color: var(--gray-2); margin-top: 8px; }

/* Category blocks: three labeled examples, no pill clutter */
.cat + .cat { margin-top: var(--sp-block); }
.cat .case-row.flip { margin-top: 0; }
.cat-label {
  font-size: 17px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 44px;
}
#how .sec-title { margin-bottom: 110px; }

.adduser { padding: 20px 22px 24px; }
.au-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.au-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.au-row span { color: var(--gray-2); }
.au-row b { font-weight: 500; color: var(--ink); }
.au-btn { margin-top: 18px; text-align: center; background: #fff; color: #0a0a0a; border-radius: 999px; padding: 10px 0; font-size: 13px; font-weight: 600; }

.diff { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; max-width: 900px; margin-bottom: 60px; }
.diff .stat-n { font-size: 54px; }
.ba { display: flex; align-items: stretch; gap: 18px; max-width: 900px; }
.ba-card { flex: 1; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 22px 24px; }
.ba-card.on { border-color: #555; }
.ba-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-2); margin-bottom: 8px; }
.ba-t { font-size: 14.5px; color: var(--ink); line-height: 1.55; }
.ba-arrow { align-self: center; color: var(--gray-3); font-size: 20px; }

.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; }

.trust-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 44px; max-width: 900px; }
.tc-h { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.tc-t { font-size: 13px; color: var(--gray-2); line-height: 1.6; }

.price-card {
  max-width: 420px; margin: 0 auto; text-align: center;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 14px;
  padding: 40px 34px 36px;
}
.price-n { font-size: 64px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.price-l { font-size: 13.5px; color: var(--gray-2); margin-top: 8px; }
.price-trial { font-size: 12.5px; color: var(--gray); margin: 16px 0 18px; }
.price-list { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; color: var(--ink); margin-bottom: 26px; }

.chan { text-align: center; padding: 40px 30px; }
.chan p { font-size: 14px; color: var(--ink); }
.chan span { color: var(--gray-2); }

.final-sub { font-size: 14.5px; color: var(--gray-2); margin: -14px 0 26px; }

/* ---------- Closer ---------- */
.final { text-align: center; padding: var(--sp-section) 40px; }
.final h2 { font-size: clamp(40px, 4vw, 58px); font-weight: 350; letter-spacing: -.03em; margin-bottom: 30px; }

/* ---------- Footer ---------- */
.foot {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 56px 64px;
  font-size: 12.5px; color: var(--gray-2);
}
.foot .col { display: flex; flex-direction: column; gap: 9px; }
.foot .h { color: var(--ink); font-weight: 500; margin-bottom: 3px; }
.foot a:hover { color: var(--ink); }
.foot-logo {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.4px solid #fff; position: relative; display: inline-block;
}
.foot-logo::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }

/* ---------- Scroll motion (classes added by js/main.js only —
   without JS nothing is ever hidden) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--rd, 0s);
}
.reveal.in { opacity: 1; transform: none; }

.play-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.play-item.in { opacity: 1; transform: none; }

@keyframes stamp {
  from { opacity: 0; transform: scale(1.5); }
  to   { opacity: 1; transform: none; }
}
.ledger .row.play-item.in .st { animation: stamp .35s ease .25s backwards; }
.play-item.in .tick { animation: stamp .35s ease .15s backwards; }

.ba-card.on { transition: border-color .6s ease, box-shadow .6s ease; }
.ba-card.on.lit { border-color: #777; box-shadow: 0 0 44px rgba(255, 255, 255, .06); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav { grid-template-columns: auto 1fr; padding: 12px 18px; }
  .nav-links { display: none; }
  .nav-mark { justify-self: start; }
  .nav-actions { gap: 6px; }

  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 60px 24px 80px;
    min-height: auto;
  }
  .hero-glow { opacity: .55; width: 200px; height: 200px; justify-self: center; grid-column: 1; grid-row: 2; margin: 30px 0 10px; }
  .hero-copy { justify-self: center; grid-column: 1; grid-row: 1; }
  .hero-list { align-items: center; justify-self: center; width: auto; grid-column: 1; grid-row: 3; margin-top: 10px; }
  .cta-row { justify-content: center; }

  .case { padding: var(--sp-section-m) 24px; }
  .case-row, .case-row.flip { grid-template-columns: 1fr; gap: 28px; }
  .case-row.flip { margin-top: 60px; }
  .case-row.flip .case-side { order: 2; }

  .ship { padding: var(--sp-section-m) 24px; }
  .ship-cards { grid-template-columns: 1fr; }

  .nav-left { gap: 14px; }
  .nav-links { display: flex; gap: 14px; font-size: 12.5px; }
  .sec { padding: var(--sp-section-m) 24px; }
  .final { padding: var(--sp-section-m) 24px; }
  .cat + .cat { margin-top: var(--sp-block-m); }
  .cases-grid { grid-template-columns: 1fr; gap: 44px; }
  .cases-grid .imsg { margin: 0 auto; }
  .t-row, .cases-grid .t-row { grid-template-columns: 1fr; gap: 18px; }
  .t-stat { text-align: left; }
  .diff { grid-template-columns: 1fr; gap: 34px; }
  .ba { flex-direction: column; }
  .ba-arrow { transform: rotate(90deg); }
  .mem-grid { grid-template-columns: 1fr; }
  .trust-cols { grid-template-columns: 1fr; gap: 26px; }

  .foot { grid-template-columns: 1fr; gap: 26px; padding: 34px 24px 40px; }
}

/* ---------- Conversation simulation ---------- */
.sim-hidden { display: none !important; }
@keyframes sim-in {
  from { opacity: 0; transform: translateY(9px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.sim-in { animation: sim-in .28s cubic-bezier(.22, .9, .34, 1.12) backwards; }

.typing-bub {
  display: inline-flex; gap: 4px; align-items: center; align-self: flex-start;
  padding: 11px 13px; margin-bottom: 6px; border-radius: 16px;
  background: #26262a;
}
.waw-body .typing-bub { background: #202c33; border-radius: 9px; }
.typing-bub i {
  width: 6px; height: 6px; border-radius: 50%; background: #8e8e93;
  animation: t-dot 1.1s ease-in-out infinite;
}
.typing-bub i:nth-child(2) { animation-delay: .14s; }
.typing-bub i:nth-child(3) { animation-delay: .28s; }
@keyframes t-dot {
  0%, 55%, 100% { opacity: .35; transform: none; }
  25% { opacity: 1; transform: translateY(-3px); }
}
.sw-typing { font-size: 11px; font-style: italic; color: #9a9c9e; margin: 0 0 10px 44px; }
.wa-time b.tick-hide { visibility: hidden; }
.imsg, .waw, .slackw, .mailw, .callw { cursor: pointer; } /* click replays the conversation */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow .ring, .hero-glow .ring2, .hero-glow .halo { animation: none; }
  .reveal, .play-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ledger .row.play-item.in .st, .play-item.in .tick { animation: none; }
  .sim-hidden { display: revert !important; }
  .sim-in, .typing-bub i { animation: none; }
}



/* "Cmd-minus" effect: everything below the hero renders at 85% scale,
   so content is smaller and the page feels wider (desktop only). */
@media (min-width: 901px) {
  main > section:not(.hero),
  .foot { zoom: 0.85; }
}

/* "The difference" tiles — the old way, big and crossed out, right above the number */
.stat-vs {
  display: block;
  font-size: 24px; font-weight: 350; letter-spacing: -.01em;
  color: var(--gray-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-bottom: 10px;
}

/* ---------- WhatsApp-style maintenance chat ---------- */
.waw {
  max-width: 460px;
  background: #0B141A; border: 1px solid #233138; border-radius: 12px;
  overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", var(--sans);
}
.waw-head {
  display: flex; align-items: center; gap: 11px;
  background: #202C33; padding: 10px 14px;
}
.waw-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: 1.5px solid #fff; position: relative;
}
.waw-av::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }
.waw-name { font-size: 13.5px; font-weight: 600; color: #E9EDEF; }
.waw-status { font-size: 11px; color: #8696A0; margin-top: 1px; }
.waw-body { display: flex; flex-direction: column; padding: 14px 12px 16px; }
.wa-stamp {
  align-self: center; background: #182229; color: #8696A0;
  font-size: 10.5px; font-weight: 500; border-radius: 7px;
  padding: 4px 10px; margin: 4px 0 12px;
}
.wa-out, .wa-in {
  max-width: 82%; padding: 7px 10px 6px; margin-bottom: 6px;
  font-size: 13.5px; line-height: 1.4; border-radius: 9px; color: #E9EDEF;
}
.wa-out { align-self: flex-end; background: #005C4B; border-bottom-right-radius: 3px; }
.wa-in { align-self: flex-start; background: #202C33; border-bottom-left-radius: 3px; }
.wa-time {
  display: inline-block; float: right; margin: 8px 0 0 10px;
  font-size: 10px; color: #8696A0;
}
.wa-time b { color: #53BDEB; font-weight: 400; letter-spacing: -.08em; }

/* WhatsApp fidelity: wallpaper texture, tails, header icons, input bar, pair layout */
.waw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.waw-pair .waw { max-width: none; }
.waw-body {
  background-color: #0B141A;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.3px);
  background-size: 16px 16px;
}
.waw-icons { margin-left: auto; display: flex; align-items: center; gap: 17px; color: #AEBAC1; }
.waw-dots { font-size: 17px; line-height: 1; color: #AEBAC1; }
.wa-out, .wa-in { position: relative; }
.wa-out.tail { border-top-right-radius: 0; }
.wa-out.tail::after {
  content: ""; position: absolute; right: -7px; top: 0;
  border-left: 8px solid #005C4B; border-bottom: 9px solid transparent;
}
.wa-in.tail { border-top-left-radius: 0; }
.wa-in.tail::after {
  content: ""; position: absolute; left: -7px; top: 0;
  border-right: 8px solid #202C33; border-bottom: 9px solid transparent;
}
.waw-input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 10px;
  background-color: #0B141A;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1.3px);
  background-size: 16px 16px;
}
.waw-field {
  flex: 1; background: #2A3942; border-radius: 999px;
  padding: 9px 15px; font-size: 13px; color: #8696A0;
}
.waw-mic {
  width: 37px; height: 37px; border-radius: 50%; flex: none;
  background: #00A884; display: inline-flex; align-items: center; justify-content: center;
}
.waw-receipt { background: #0B141A; margin: 0; padding: 10px 0 14px; }
@media (max-width: 900px) {
  .waw-pair { grid-template-columns: 1fr; }
}

/* ---------- Gmail dark (both email widgets) ---------- */
.mailw { background: #1F1F1F; border: 1px solid #333; }
.gm-top { display: flex; align-items: center; gap: 12px; padding: 15px 18px 11px; }
.gm-logo { display: inline-flex; flex: none; }
.gm-subject { flex: 1; font-size: 16px; font-weight: 400; color: #E8EAED; }
.gm-chip { font-size: 11px; color: #9AA0A6; background: #2D2E31; border-radius: 6px; padding: 3px 9px; }
.gm-msg { padding: 12px 18px 4px; border-top: 1px solid #2D2E31; }
.gm-sender { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 7px; }
.gm-av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: #5F6368; color: #fff; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.gm-av.gm-ott { background: #0a0a0a; border: 1.4px solid #fff; position: relative; }
.gm-av.gm-ott::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.1px solid rgba(255,255,255,.6); }
.gm-name { font-size: 13.5px; font-weight: 700; color: #E8EAED; }
.gm-name span { font-weight: 400; font-size: 12px; color: #9AA0A6; }
.gm-to { font-size: 11.5px; color: #9AA0A6; margin-top: 1px; }
.gm-meta { margin-left: auto; font-size: 11.5px; color: #9AA0A6; white-space: nowrap; }
.gm-body { font-size: 13.5px; color: #E8EAED; line-height: 1.55; padding: 0 0 12px 45px; }
.gm-actions { display: flex; gap: 10px; padding: 6px 18px 16px 63px; }
.gm-actions span { border: 1px solid #5F6368; border-radius: 999px; padding: 6px 16px; font-size: 12.5px; color: #E8EAED; }
.gm-receipt { padding: 2px 0 14px; }

/* ---------- Microsoft 365 Fluent panel (light) ---------- */
.m365 {
  background: #fff; border-radius: 8px; overflow: hidden; width: 500px; max-width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, var(--sans);
}
.m365-top {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: #F5F5F5; border-bottom: 1px solid #E0E0E0;
  font-size: 13px; font-weight: 600; color: #424242;
}
.m365-body { padding: 20px 20px 22px; }
.m365-title { font-size: 18px; font-weight: 600; color: #242424; margin-bottom: 16px; }
.m365-field { margin-bottom: 13px; }
.m365-field label { display: block; font-size: 12px; color: #616161; margin-bottom: 4px; }
.m365-input {
  border: 1px solid #D1D1D1; border-radius: 4px;
  padding: 8px 12px; font-size: 13.5px; color: #242424; background: #fff;
}
.m365-btn {
  display: inline-block; background: #0F6CBD; color: #fff;
  border-radius: 4px; padding: 8px 22px; font-size: 13.5px; font-weight: 600; margin-top: 6px;
}

/* ---------- WhatsApp fidelity v2 ---------- */
.waw-head { background: #1F2C34; }
.waw-back { color: #AEBAC1; font-size: 18px; margin-right: 2px; }
.waw-av { width: 36px; height: 36px; }
.waw-name { font-size: 15px; font-weight: 500; }
.wa-in { background: #1F2C34; }
.wa-in.tail::after { border-right-color: #1F2C34; }
.wa-stamp { background: #1F2C34; }
.wa-out, .wa-in { font-size: 14px; border-radius: 8px; }
.waw-body, .waw-input {
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1.3px);
}
.waw-field { display: flex; align-items: center; gap: 9px; background: #1F2C34; }
.waw-field .clip { margin-left: auto; }

/* M365 row: text sits right beside the panel, no dead band */
.case-row:has(.m365) {
  grid-template-columns: auto 360px;
  gap: 72px;
  justify-content: start;
}