/* Stylesheet for the pre-redesign pages (privacy.html, support.php).
   index.php/index.html moved to the Claude Design port and now use style.css;
   this file is the previous site stylesheet, kept so those pages render unchanged. */
/* ==========================================================================
   Conversely — editorial dark redesign
   Ported from redesign/tt/Conversely.dc.html (design canvas, authored at 1440x960).

   The canvas was inline-styled and desktop-only. Every style here is the same
   value, moved into a class so the responsive layer at the bottom can reach it
   — you cannot put a media query on an inline style.

   Palette: teal #22b8a3 · cyan #5fd7e0 · amber #e3b567 · coral #e05a5a
            on a purple-black gradient, under film grain.
   ========================================================================== */

:root {
  /* canvas */
  --bg:        #08060c;
  --bg-2:      #0a0810;
  --glow-1:    #241c3f;
  --glow-2:    #1a1430;

  /* brand */
  --teal:      #22b8a3;   --teal-rgb: 34,184,163;
  --teal-hi:   #3ecbb5;
  --teal-mid:  #7fdcc9;
  --teal-pale: #a8ece2;

  --cyan:      #5fd7e0;   --cyan-rgb: 95,216,230;
  --cyan-pale: #a6e9ee;

  --mint:      #5fd7a3;
  --mint-pale: #7fe6b9;

  --amber:     #e3b567;   --amber-rgb: 227,181,103;

  --coral:     #e05a5a;   --coral-rgb: 224,90,90;
  --coral-pale:#f0a8a8;

  /* type */
  --text: #f5f2ee;
  --t-1:  #cfc6e4;
  --t-2:  #b7aec2;
  --t-3:  #a79ec0;
  --t-4:  #9a90b4;
  --t-5:  #8a80a4;
  --t-6:  #786f92;
  --t-7:  #6c6385;

  /* surfaces */
  --glass:      rgba(255,255,255,0.045);
  --glass-soft: rgba(255,255,255,0.03);
  --line:       rgba(255,255,255,0.09);
  --line-soft:  rgba(255,255,255,0.07);

  --display: 'Space Grotesk', sans-serif;
  --body:    'Plus Jakarta Sans', sans-serif;
  --mono:    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;

  --nav-h: 73px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ============================ base ============================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(var(--teal-rgb), 0.35); color: #fff; }

img { display: block; max-width: 100%; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The page canvas: two purple glows over a near-black vertical wash. */
.page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background:
    radial-gradient(1400px 900px at 88% -12%, var(--glow-1) 0%, rgba(36,28,63,0) 55%),
    radial-gradient(1000px 700px at -6% 8%, var(--glow-2) 0%, rgba(26,20,48,0) 50%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* Film grain — fixed, overlay blend, above everything. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Colour blooms behind the heroes. */
.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  border-radius: 50%;
}
.blob--h1a { width: 680px; height: 680px; left: 58%; top: 18%;   background: radial-gradient(circle, rgba(var(--teal-rgb),0.45), rgba(var(--teal-rgb),0) 62%); }
.blob--h1b { width: 520px; height: 520px; left: 8%;  top: 52%;   background: radial-gradient(circle, rgba(var(--cyan-rgb),0.28), rgba(var(--cyan-rgb),0) 62%); }
.blob--h2  { width: 600px; height: 600px; right: 6%; top: 8%;    background: radial-gradient(circle, rgba(var(--coral-rgb),0.16), rgba(var(--coral-rgb),0) 66%); }
.blob--h3  { width: 560px; height: 560px; left: 4%;  bottom: -6%; background: radial-gradient(circle, rgba(var(--cyan-rgb),0.2), rgba(var(--cyan-rgb),0) 66%); }
.blob--cta { width: 520px; height: 520px; top: -220px; left: 50%; transform: translateX(-50%); filter: blur(30px); background: radial-gradient(circle, rgba(var(--teal-rgb),0.28), transparent 70%); }

/* ============================ nav ============================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px var(--gutter);
  background: rgba(9,7,14,0.5);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}

.nav__logo { display: block; flex-shrink: 0; }
.nav__logo img { height: 30px; width: auto; }

.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a {
  color: var(--t-3);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
  white-space: nowrap;
}

.btn-nav {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 21px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform .25s, background .25s, border-color .25s;
}

/* Burger — not in the canvas (desktop-only); required for the mobile layer. */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  cursor: pointer;
  flex-shrink: 0;
}
.nav__burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  margin: 0 auto;
  border-radius: 2px;
  background: #fff;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Scroll progress — retained from the current site, painted on the nav's bottom rule. */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  pointer-events: none;
}
.progress i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
}

/* ============================ buttons ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 700;
  border-radius: 13px;
  white-space: nowrap;
}
.btn--primary {
  padding: 15px 26px;
  background: var(--text);
  color: var(--bg-2);
  font-size: 15.5px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  transition: transform .2s, box-shadow .2s;
}
.btn--ghost {
  padding: 15px 22px;
  gap: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  transition: border-color .2s, background .2s, transform .2s;
}
.btn--lg {
  padding: 17px 32px;
  font-size: 16.5px;
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.4);
  transition: transform .25s, box-shadow .25s;
}

/* ============================ hero shell ============================ */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.hero--1, .hero--2 { min-height: calc(100vh - var(--nav-h)); }

/* The vertical "INDEX / 01 · LIVE ANSWERS" rail. */
.rail {
  grid-column: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.hero--1 .rail { padding: 120px 0 40px; }
.rail__txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--t-6);
  font-weight: 600;
  white-space: nowrap;
}

.hero__grid {
  grid-column: 2;
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  min-width: 0;
}
.hero--1 .hero__grid { grid-template-columns: 1.08fr 0.92fr; gap: 40px; padding: clamp(50px,7vw,90px) 0 clamp(40px,5vw,64px); }
.hero--2 .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 48px; padding: clamp(50px,6vw,80px) 0; }
.hero--3 .hero__grid { grid-template-columns: 0.92fr 1.08fr; gap: 52px; padding: clamp(60px,7vw,96px) 0; }

/* Oversized ghost numeral behind the copy. */
.ghostnum {
  position: absolute;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(140px, 18vw, 260px);
  line-height: 1;
  color: rgba(255,255,255,0.035);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ghostnum--1 { right: 6%; top: -6%; }
.ghostnum--2 { left: 2%; bottom: -4%; }

.hero__copy { position: relative; z-index: 3; min-width: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 26px;
  white-space: nowrap;
}
.pill__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pill--teal  { background: rgba(var(--teal-rgb),0.1);  border: 1px solid rgba(var(--teal-rgb),0.3);  color: var(--teal-pale); }
.pill--teal  .pill__dot { background: var(--mint); }
.pill--coral { background: rgba(var(--coral-rgb),0.1); border: 1px solid rgba(var(--coral-rgb),0.3); color: var(--coral-pale); }
.pill--coral .pill__dot { background: var(--coral); }
.pill--cyan  { background: rgba(var(--cyan-rgb),0.1);  border: 1px solid rgba(var(--cyan-rgb),0.32); color: var(--cyan-pale); }
.pill--cyan  .pill__dot { background: var(--cyan); }

.hero__title {
  font-family: var(--display);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.hero--1 .hero__title { font-size: clamp(42px, 5.2vw, 70px); }
.hero--2 .hero__title { font-size: clamp(42px, 5.4vw, 68px); letter-spacing: -0.025em; margin-bottom: 24px; }
.hero--3 .hero__title { font-size: clamp(38px, 4.6vw, 58px); line-height: 1; letter-spacing: -0.025em; }
.hero__title span { display: block; }
.hero__title .amber { color: var(--amber); }
.hero__title .cyan  { color: var(--cyan); }

.hero__lede {
  font-size: clamp(16px, 1.4vw, 18.5px);
  line-height: 1.6;
  color: var(--t-2);
  max-width: 500px;
  margin: 0 0 30px;
}
.hero--2 .hero__lede { max-width: 480px; }
.hero--3 .hero__lede { max-width: 460px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero--2 .hero__cta { margin-bottom: 30px; }

.hero__checks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8f86a8;
  font-weight: 600;
}

.hero__viz {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.hero--3 .hero__viz { min-height: 400px; align-items: center; overflow: visible; }

/* Hero 3 feature list */
.sharelist { display: flex; flex-direction: column; gap: 13px; max-width: 440px; }
.sharelist > div {
  display: flex;
  gap: 11px;
  align-items: center;
  font-size: 15.5px;
  color: #d3cbe4;
}
.sharelist__ico {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(var(--cyan-rgb),0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============== hero 2 · the call mock (a bot gets blocked) ============== */

.callmock {
  position: relative;
  width: 460px;
  max-width: 100%;
  transform: rotate(1.2deg);
  transition: transform .4s;
}
.callmock__win {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55);
}
.callmock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.callmock__head-l { display: flex; align-items: center; gap: 9px; }
.callmock__rec { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.callmock__title { font-size: 13px; font-weight: 700; color: #fff; }
.callmock__meta { font-size: 12px; color: var(--t-5); }

.callmock__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  position: relative;
}

.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile--a   { background: linear-gradient(140deg, rgba(var(--teal-rgb),0.22), rgba(60,50,90,0.4)); }
.tile--m   { background: linear-gradient(140deg, rgba(var(--cyan-rgb),0.16), rgba(30,40,60,0.4)); }
.tile--s   { background: linear-gradient(140deg, rgba(var(--amber-rgb),0.14), rgba(60,40,40,0.4)); }
.tile--you { background: rgba(255,255,255,0.05); border: 1.5px solid rgba(var(--teal-rgb),0.4); }
.tile__av {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
}
.tile--a   .tile__av { background: rgba(var(--teal-rgb),0.9);  color: #fff; }
.tile--m   .tile__av { background: rgba(var(--cyan-rgb),0.85); color: var(--bg-2); }
.tile--s   .tile__av { background: rgba(var(--amber-rgb),0.85); color: var(--bg-2); }
.tile--you .tile__av { background: rgba(255,255,255,0.1); color: #fff; font-size: 15px; }
.tile__name {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,0.45);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}
.tile--you .tile__name { background: rgba(var(--teal-rgb),0.45); font-weight: 700; }

.bot {
  position: absolute;
  left: 50%; top: 50%;
  width: 62%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(20,10,10,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--coral);
  box-shadow: 0 20px 50px rgba(var(--coral-rgb),0.3);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%,-50%) translateY(-34px) scale(.9);
  pointer-events: none;
}
.bot__badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--coral-rgb),0.2);
  border: 1px solid rgba(var(--coral-rgb),0.5);
  font-size: 10px;
  font-weight: 800;
  color: var(--coral-pale);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bot__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.bot__face {
  position: relative;
  width: 46px; height: 36px;
  border-radius: 11px;
  background: #15101e;
  border: 2px solid var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
}
.bot__face i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.bot__name { font-size: 13px; font-weight: 700; color: #fff; text-align: center; }
.bot__sub  { font-size: 11px; color: #d6a0a0; text-align: center; }
.bot__stamp {
  position: absolute;
  left: 50%; top: 50%;
  padding: 6px 16px;
  border-radius: 8px;
  border: 3px solid var(--coral);
  color: var(--coral-pale);
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  background: rgba(20,8,12,0.6);
  opacity: 0;
  transform: translate(-50%,-50%) scale(1.6) rotate(-13deg);
  white-space: nowrap;
}

.toast {
  position: absolute;
  left: 50%; top: 58px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 12px;
  background: rgba(20,10,16,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--coral-rgb),0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  z-index: 8;
  opacity: 0;
  white-space: nowrap;
}
.toast span { font-size: 12.5px; font-weight: 600; color: var(--coral-pale); }

.capbadge {
  position: absolute;
  left: 50%; bottom: -30px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(var(--teal-rgb),0.4);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
  z-index: 9;
  white-space: nowrap;
}
.capbadge__wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.capbadge__wave span {
  width: 3px;
  background: var(--teal);
  border-radius: 2px;
  transform-origin: center;
}
.capbadge__t { display: flex; align-items: center; gap: 7px; }
.capbadge__t img { height: 15px; }
.capbadge__t span { font-size: 11px; font-weight: 700; color: var(--mint); }
.capbadge__s { font-size: 12px; color: #8f86a8; margin-top: 2px; }

/* ========== hero 1 · the live-answer scene (DOM built in main.js) ========== */

.as-win {
  position: relative;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 50px 110px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
}
.as-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.as-head-l { display: flex; align-items: center; gap: 9px; min-width: 0; }
.as-head-l i { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex-shrink: 0; }
.as-head-l b { font-size: 13px; font-weight: 700; color: #fff; }
.as-head-l s { font-size: 12px; color: var(--t-5); text-decoration: none; }
.as-head-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.as-wave { display: flex; align-items: center; gap: 2.5px; height: 18px; }
.as-wave span { width: 3px; height: 18px; border-radius: 2px; transform-origin: center; transform: scaleY(0.4); }
.as-wave span:nth-child(odd)  { background: var(--cyan); }
.as-wave span:nth-child(even) { background: var(--teal); }

.as-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--coral-rgb),0.14);
  border: 1px solid rgba(var(--coral-rgb),0.34);
  font-size: 12px;
  font-weight: 700;
  color: var(--coral-pale);
  white-space: nowrap;
}
.as-timer i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.as-timer b { color: var(--t-4); font-family: var(--mono); font-weight: 600; }

.as-ctx {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: rgba(var(--teal-rgb),0.07);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  min-width: 0;
}
.as-ctx b { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--teal-pale); white-space: nowrap; }
.as-ctx span { font-size: 12px; color: var(--t-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.as-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px 4px;
  flex-shrink: 0;
}
.as-tile {
  position: relative;
  height: 86px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.06);
  transition: box-shadow .25s;
}
.as-tile--d   { background: rgba(var(--cyan-rgb),0.14); }
.as-tile--you { background: rgba(var(--teal-rgb),0.12); border-color: rgba(var(--teal-rgb),0.5); }
.as-tile__av {
  width: 62px; height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.as-tile--d   .as-tile__av { background: rgba(var(--cyan-rgb),0.85); color: var(--bg); font-size: 21px; }
.as-tile--you .as-tile__av { background: rgba(var(--teal-rgb),0.9);  color: #fff;      font-size: 17px; }
.as-tile__name {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.45);
}
.as-tile--you .as-tile__name { background: rgba(var(--teal-rgb),0.5); }
.as-speak {
  position: absolute;
  right: 8px; top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(var(--cyan-rgb),0.2);
  border: 1px solid rgba(var(--cyan-rgb),0.5);
  font-size: 10px;
  font-weight: 700;
  color: var(--cyan-pale);
  opacity: 0;
  transition: opacity .2s;
}

.as-h {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--t-7);
  padding: 10px 16px 8px;
  flex-shrink: 0;
}
.as-tlist {
  flex: 1;
  overflow: hidden;
  padding: 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px);
  mask-image: linear-gradient(180deg, transparent 0, #000 26px);
}
.as-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 11px;
  padding: 7px 9px;
  margin: 0 -9px;
  transition: background .3s;
}
.as-row--q { background: rgba(var(--amber-rgb),0.08); }
.as-av {
  width: 23px; height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.as-av--you { background: rgba(var(--teal-rgb),0.9);  color: #fff; }
.as-av--d   { background: rgba(var(--cyan-rgb),0.85); color: var(--bg); }
.as-row__wrap { flex: 1; min-width: 0; }
.as-row__head { display: flex; align-items: center; gap: 7px; margin-bottom: 2px; flex-wrap: wrap; }
.as-name { font-size: 12px; font-weight: 700; }
.as-name--you { color: var(--teal-pale); }
.as-name--d   { color: var(--cyan-pale); }
.as-chip {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--amber-rgb),0.16);
  border: 1px solid rgba(var(--amber-rgb),0.5);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--amber);
  white-space: nowrap;
}
.as-chip.is-on { display: inline-flex; }
.as-txt { font-size: 13.5px; line-height: 1.45; }
.as-txt--you { color: #e8dff7; }
.as-txt--d   { color: #d3cce4; }

.as-overlay {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 6;
  opacity: 0;
  transform: translateY(130%);
  pointer-events: none;
}
.as-glow {
  position: absolute;
  left: -14px; right: -14px; top: -14px; bottom: -22px;
  border-radius: 24px;
  background: radial-gradient(60% 80% at 50% 62%, rgba(var(--teal-rgb),0.5), rgba(var(--cyan-rgb),0.14) 58%, rgba(0,0,0,0) 76%);
  filter: blur(18px);
  opacity: 0.5;
  pointer-events: none;
}
.as-card {
  position: relative;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(24,18,42,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--teal-rgb),0.55);
  box-shadow: 0 22px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: box-shadow .3s;
}
.as-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.as-card__head > b { font-size: 11px; font-weight: 800; color: var(--teal-pale); letter-spacing: 0.03em; }
.as-priv {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--teal-mid);
  white-space: nowrap;
}
.as-card__body {
  font-size: 15.5px;
  line-height: 1.5;
  color: #f2eefa;
  position: relative;
  z-index: 1;
  min-height: 1.5em;
}
.as-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mint-pale);
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: opacity .3s;
}

/* typing caret, shared by both scenes */
.caret {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 1px;
  background: var(--teal-pale);
  vertical-align: text-bottom;
}
.caret--tall { height: 14px; }
.caret--mint { background: var(--teal-mid); }

/* ========== hero 3 · the live share window (DOM built in main.js) ========== */

.sv-win {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 40px 90px rgba(0,0,0,0.5);
}
.sv-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--glass-soft);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sv-url { flex: 1; text-align: center; font-family: var(--mono); font-size: 12.5px; color: #c7bdde; }
.sv-live {
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(var(--cyan-rgb),0.16);
  border: 1px solid rgba(var(--cyan-rgb),0.4);
  font-size: 11px;
  font-weight: 800;
  color: var(--cyan-pale);
  flex-shrink: 0;
}
.sv-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-wrap: wrap;
}
.sv-status__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mint-pale);
}
.sv-status__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.sv-status__code { font-size: 11px; color: var(--t-7); }
.sv-watch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--t-4);
  white-space: nowrap;
}
.sv-watch b { font-weight: 700; color: var(--t-1); display: inline-block; }

.sv-body { display: grid; grid-template-columns: 1.2fr 1fr; }
.sv-tcol { padding: 14px; border-right: 1px solid rgba(255,255,255,0.06); min-width: 0; }
.sv-ccol { display: flex; flex-direction: column; padding: 14px; min-width: 0; }
.sv-h {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t-7);
  margin-bottom: 12px;
}
.sv-tlist {
  display: flex;
  flex-direction: column;
  gap: 13px;
  height: 280px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.sv-clist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  height: 238px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.sv-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.sv-input span { flex: 1; font-size: 12px; color: var(--t-7); white-space: nowrap; overflow: hidden; }

.sv-trow { display: flex; gap: 9px; align-items: flex-start; }
.sv-tav {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  flex-shrink: 0;
}
.sv-tav--1 { background: rgba(var(--cyan-rgb),0.85); }
.sv-tav--2 { background: rgba(var(--teal-rgb),0.85); }
.sv-thead { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; flex-wrap: wrap; }
.sv-tname { font-size: 12.5px; font-weight: 700; }
.sv-tname--1 { color: var(--cyan-pale); }
.sv-tname--2 { color: var(--teal-pale); }
.sv-ttime { font-size: 11px; color: var(--t-7); font-family: var(--mono); }
.sv-ttxt { font-size: 12.5px; line-height: 1.45; color: var(--t-1); }

.sv-crow { display: flex; gap: 8px; align-items: flex-start; }
.sv-crow--host { flex-direction: row-reverse; }
.sv-cav {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #3a3454;
}
.sv-crow--host .sv-cav { background: rgba(var(--teal-rgb),0.9); }
.sv-cwrap { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; max-width: 80%; }
.sv-crow--host .sv-cwrap { align-items: flex-end; }
.sv-cwho { font-size: 10px; color: var(--t-5); padding: 0 4px; }
.sv-bub {
  font-size: 12.5px;
  line-height: 1.4;
  padding: 8px 11px;
  border-radius: 12px;
  border-top-left-radius: 3px;
  color: #e6ddf7;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  min-height: 1.4em;
}
.sv-crow--host .sv-bub {
  color: #fff;
  background: rgba(var(--teal-rgb),0.22);
  border: 1px solid rgba(var(--teal-rgb),0.4);
  border-top-left-radius: 12px;
  border-top-right-radius: 3px;
}

/* ============================ trust strip ============================ */

.trust {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px var(--gutter) 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust span {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #5f5878;
  font-family: var(--mono);
  text-align: center;
}

/* ============================ sections ============================ */

.sec {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(50px,6vw,80px) var(--gutter);
  position: relative;
}
.sec--how     { padding: clamp(60px,8vw,110px) var(--gutter) clamp(50px,7vw,90px); }
.sec--feat    { padding: 30px var(--gutter); }
.sec--uc      { padding: clamp(60px,7vw,96px) var(--gutter); }
.sec--pricing { max-width: 1180px; }
.sec--cta     { padding: clamp(40px,6vw,70px) var(--gutter); }
.sec--privacy { margin: 60px auto; padding: 0 var(--gutter); }
.sec--quote   { max-width: 980px; padding: clamp(50px,6vw,90px) var(--gutter); }

/* "04 / THE SHIFT ————————" */
.sechead { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.sechead__no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--amber);
  font-weight: 700;
}
.sechead__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}

.sec__title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.sec__title .teal { color: var(--teal); }

/* ============================ 04 · the shift ============================ */

.shift__top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 50px;
}
.shift__top h2 { font-size: clamp(30px,3.6vw,48px); line-height: 1.06; }
.shift__top p  { font-size: 16.5px; line-height: 1.6; color: var(--t-3); margin: 0; }

.togglebar { display: flex; margin-bottom: 40px; }
.togglebar--price { margin-bottom: 44px; }
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.1);
  max-width: 100%;
}
.toggle__btn {
  border: none;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  background: transparent;
  color: #a99fc4;
  transition: background .25s, color .25s;
  white-space: nowrap;
}
.toggle__btn.is-on { color: #fff; background: var(--teal); }
.toggle__btn.is-on[data-ps="old"] { background: #4a4566; }
.toggle__grp { display: flex; align-items: center; gap: 7px; }
.toggle__save { font-size: 11px; font-weight: 800; color: var(--mint); padding-right: 10px; white-space: nowrap; }
.toggle--bill .toggle__btn { padding: 9px 20px; font-size: 14px; }

.ps {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: stretch;
}
.ps[hidden] { display: none; }

.ps-card {
  padding: 36px;
  border-radius: 22px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform .3s, border-color .3s;
}
.ps-card--new {
  background: linear-gradient(160deg, rgba(var(--teal-rgb),0.14), rgba(var(--cyan-rgb),0.05));
  border: 1px solid rgba(var(--teal-rgb),0.3);
  transform: rotate(-0.6deg);
}
.ps-card--side {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  transform: rotate(0.6deg);
}

/* These two are direct children of [data-reveal-stagger], so they receive
   .is-hidden / .is-shown — whose `transform` would otherwise flatten the tilt
   (equal specificity, and the reveal rules come later in the file). Compose the
   rotation INTO both reveal states, at (0,2,0), so it survives.
   Kept above the hover block on purpose: :hover is also (0,2,0) and must win. */
.ps-card--new.is-hidden  { transform: translateY(38px) scale(0.92) rotate(-0.6deg); }
.ps-card--new.is-shown   { transform: rotate(-0.6deg); }
.ps-card--side.is-hidden { transform: translateY(38px) scale(0.92) rotate(0.6deg); }
.ps-card--side.is-shown  { transform: rotate(0.6deg); }
.ps-card--old  { background: var(--glass-soft); border: 1px solid rgba(255,255,255,0.08); }
.ps-card--old2 {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.ps-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 20px;
}
.ps-chip--new { background: rgba(var(--cyan-rgb),0.14); border: 1px solid rgba(var(--cyan-rgb),0.35); color: var(--cyan-pale); }
.ps-chip--old { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #a29ab6; }

.ps-card h3 { font-family: var(--display); font-size: 23px; font-weight: 700; margin: 0 0 16px; }
.ps-card--old h3 { color: var(--t-1); }

.ps-list { display: flex; flex-direction: column; gap: 14px; }
.ps-item { display: flex; gap: 12px; align-items: flex-start; }
.ps-item__ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.ps-item__ico--ok { background: rgba(var(--cyan-rgb),0.9); }
.ps-item__ico--no { background: rgba(var(--coral-rgb),0.16); border: 1px solid rgba(var(--coral-rgb),0.4); }
.ps-item__txt   { font-size: 15px; line-height: 1.5; color: #d3cbe4; }
.ps-item__txt b { color: #fff; }
.ps-item__txt--muted { color: #a29ab6; }

.ps-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--t-6);
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.ps-card--old2 .ps-eyebrow { margin-bottom: 4px; }
.ps-stack { display: flex; flex-direction: column; gap: 12px; }
.ps-q, .ps-a { padding: 14px 16px; border-radius: 14px; }
.ps-q { background: rgba(var(--amber-rgb),0.1); border: 1px solid rgba(var(--amber-rgb),0.4); }
.ps-a { background: linear-gradient(160deg, rgba(var(--cyan-rgb),0.12), rgba(var(--teal-rgb),0.1)); border: 1px solid rgba(var(--cyan-rgb),0.3); }
.ps-q__h { font-size: 12px; font-weight: 700; color: var(--amber); margin-bottom: 5px; }
.ps-a__h { font-size: 12px; font-weight: 700; color: var(--cyan);  margin-bottom: 5px; }
.ps-q__t { font-size: 14px; color: #ece5f9; line-height: 1.45; }
.ps-a__t { font-size: 14px; color: #e6f7f8; line-height: 1.5; }
.ps-ghost {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass-soft);
  border: 1px dashed rgba(255,255,255,0.12);
  color: #8b8299;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================ 05 · features ============================ */

.sec--feat .sechead { margin-bottom: 60px; }
.sec--feat > .sec__title {
  font-size: clamp(30px,3.6vw,48px);
  line-height: 1.08;
  margin: 0 0 70px;
  max-width: 820px;
}

.feat {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 110px;
}
.feat--rev { grid-template-columns: 1.05fr 0.95fr; }
.feat--rev .feat__viz  { order: 2; }
.feat--rev .feat__copy { order: 1; }
.feat--last { margin-bottom: 0; }

.feat__copy { min-width: 0; }
.feat__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.feat__tag--teal { background: rgba(var(--teal-rgb),0.12); color: var(--teal-pale); }
.feat__tag--cyan { background: rgba(var(--cyan-rgb),0.12); color: var(--cyan-pale); }
.feat__title {
  font-family: var(--display);
  font-size: clamp(24px,2.5vw,32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.feat__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--t-3);
  margin: 0 0 22px;
  max-width: 420px;
}
.feat__list { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.feat__li {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 14.5px;
  color: var(--t-1);
}
.feat__li i { font-style: normal; }
.feat__li .b-cyan { color: var(--cyan); }
.feat__li .b-teal { color: var(--teal); }

.feat__viz { position: relative; min-width: 0; transition: transform .35s; }
.tilt-l { transform: rotate(-1deg); }
.tilt-r { transform: rotate(1deg); }

/* the glass device mocks */
.mock {
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--line);
  padding: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.mock--p20 { padding: 20px; }
.mock--p22 { padding: 22px; }

/* transcript mock */
.tx__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tx__head img { height: 16px; }
.tx__head span { font-size: 12px; color: var(--t-5); }
.tx__rows { display: flex; flex-direction: column; gap: 10px; }
.tx__row { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 11px 13px; }
.tx__row--you { background: rgba(var(--teal-rgb),0.14); border: 1px solid rgba(var(--teal-rgb),0.32); }
.tx__who { font-size: 12px; color: var(--t-4); margin-bottom: 3px; }
.tx__who i { color: var(--t-7); font-style: normal; }
.tx__row--you .tx__who { color: var(--teal-pale); }
.tx__txt { font-size: 14px; color: #e6ddf7; line-height: 1.4; }
.tx__row--you .tx__txt { color: #fff; }

/* recap mock */
.rc__h { font-size: 12px; font-weight: 700; color: var(--cyan); letter-spacing: 0.08em; margin-bottom: 16px; }
.rc__blk { margin-bottom: 16px; }
.rc__blk:last-child { margin-bottom: 0; }
.rc__k {
  font-size: 12px;
  color: var(--t-5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.rc__v { font-size: 14px; color: #d8cff0; line-height: 1.5; }
.rc__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #fff;
  background: rgba(var(--cyan-rgb),0.12);
  border: 1px solid rgba(var(--cyan-rgb),0.3);
  padding: 7px 12px;
  border-radius: 10px;
}
.rc__todos { display: flex; flex-direction: column; gap: 7px; }
.rc__todo { font-size: 14px; color: #d8cff0; display: flex; gap: 8px; align-items: center; }
.rc__box { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; border: 1.5px solid var(--teal); }
.rc__box--off { border-color: var(--t-7); }
.rc__at { color: var(--teal); }

/* analytics mock */
.an__h { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.an__bars { display: flex; gap: 6px; margin-bottom: 8px; }
.an__bar {
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
}
.an__bar--pos { flex: 6; background: rgba(var(--cyan-rgb),0.85); color: var(--bg); }
.an__bar--neu { flex: 3; background: #5c5570; color: #fff; }
.an__bar--neg { flex: 1; background: rgba(var(--coral-rgb),0.8); color: #fff; font-size: 11px; }
.an__legend { display: flex; gap: 14px; font-size: 12px; color: var(--t-4); margin-bottom: 18px; }
.an__k {
  font-size: 12px;
  color: var(--t-5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.an__topics { display: flex; flex-wrap: wrap; gap: 8px; }
.an__topic { padding: 6px 12px; border-radius: 999px; font-size: 12.5px; }
.an__topic--teal  { background: rgba(var(--teal-rgb),0.16);  border: 1px solid rgba(var(--teal-rgb),0.34); color: var(--teal-pale); }
.an__topic--cyan  { background: rgba(var(--cyan-rgb),0.14);  border: 1px solid rgba(var(--cyan-rgb),0.32); color: var(--cyan-pale); }
.an__topic--coral { background: rgba(var(--coral-rgb),0.14); border: 1px solid rgba(var(--coral-rgb),0.3);  color: var(--coral-pale); }

/* library mock */
.lb__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.lb__search span { font-size: 13px; color: var(--t-5); }
.lb__filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lb__chip {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  color: #b0a7c8;
  white-space: nowrap;
}
.lb__chip--on { background: var(--teal); color: #fff; font-weight: 700; }
.lb__items { display: flex; flex-direction: column; gap: 10px; }
.lb__item { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 13px; }
.lb__item--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lb__item--row > div { min-width: 0; }
.lb__t { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.lb__t--clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb__d { font-size: 12px; color: var(--t-5); margin-bottom: 8px; }
.lb__item--row .lb__d { margin-bottom: 0; }
.lb__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lb__tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.lb__tag--teal  { background: rgba(var(--teal-rgb),0.18);  color: var(--teal-pale); }
.lb__tag--cyan  { background: rgba(var(--cyan-rgb),0.16);  color: var(--cyan-pale); }
.lb__tag--amber { background: rgba(var(--amber-rgb),0.16); color: var(--amber); }
.lb__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 9px;
  background: rgba(var(--teal-rgb),0.16);
  border: 1px solid rgba(var(--teal-rgb),0.34);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-pale);
  flex-shrink: 0;
}
.lb__outs { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.lb__out {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #b0a7c8;
}

/* 3-up cards (highlights + use cases) */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cards-3--hl { margin-top: 100px; }
.card {
  padding: 28px;
  border-radius: 18px;
  background: var(--glass-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .3s, border-color .3s;
}
.card__ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card__ico--teal  { background: rgba(var(--teal-rgb),0.14);  border: 1px solid rgba(var(--teal-rgb),0.32); }
.card__ico--cyan  { background: rgba(var(--cyan-rgb),0.12);  border: 1px solid rgba(var(--cyan-rgb),0.3); }
.card__ico--amber { background: rgba(var(--amber-rgb),0.12); border: 1px solid rgba(var(--amber-rgb),0.3); }
.card__t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.card__d { font-size: 14px; line-height: 1.55; color: var(--t-3); }

/* ============================ platforms ============================ */

.platforms {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(var(--teal-rgb),0.22);
  padding: clamp(34px,4.5vw,54px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
}
.platforms__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cyan);
  margin-bottom: 16px;
}
.platforms h2 {
  font-family: var(--display);
  font-size: clamp(26px,3.1vw,38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 16px;
}
.platforms p { font-size: 16px; line-height: 1.6; color: var(--t-3); max-width: 500px; margin: 0 0 24px; }
.plat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  font-weight: 600;
  color: #e0d8f2;
}
.chip--teal {
  background: rgba(var(--teal-rgb),0.16);
  border-color: rgba(var(--teal-rgb),0.38);
  color: var(--teal-pale);
  font-weight: 700;
}

.devices { display: flex; align-items: flex-end; justify-content: center; gap: 18px; }
.dev-mac { display: flex; flex-direction: column; align-items: center; }
.dev-mac__screen {
  width: 164px; height: 104px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.dev-mac__base {
  width: 184px; height: 10px;
  border-radius: 0 0 9px 9px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-top: none;
}
.dev-wave { display: flex; align-items: center; gap: 3px; height: 34px; }
.dev-wave span { width: 4px; border-radius: 2px; }
.dev-phone {
  width: 60px; height: 124px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  flex-shrink: 0;
}
.dev-phone__bar { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.2); }
.dev-phone__rec {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(var(--teal-rgb),0.2);
  border: 1.5px solid rgba(var(--teal-rgb),0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dev-phone__rec span { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }
.dev-phone__t { font-size: 9px; color: var(--t-5); }

/* ============================ privacy band ============================ */

.pband {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(var(--teal-rgb),0.24);
  padding: clamp(34px,5vw,60px);
  text-align: center;
}
.pband__ico {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: rgba(var(--teal-rgb),0.14);
  border: 1px solid rgba(var(--teal-rgb),0.36);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.pband h2 {
  font-family: var(--display);
  font-size: clamp(25px,3.2vw,40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.pband p { font-size: 16px; line-height: 1.6; color: var(--t-3); max-width: 560px; margin: 0 auto 30px; }
.pband__tags { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.pband__tag {
  padding: 11px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13.5px;
  font-weight: 600;
  color: #e0d8f2;
}

/* ============================ 06 · use cases ============================ */

.sec--uc .sechead { margin-bottom: 40px; }
.sec--uc > .sec__title { font-size: clamp(28px,3.4vw,44px); line-height: 1.08; margin: 0 0 46px; }
.uc {
  padding: 26px;
  border-radius: 18px;
  background: var(--glass-soft);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .3s, border-color .3s;
}
.uc__t { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.uc__d { font-size: 13.5px; color: var(--t-3); line-height: 1.5; }

/* ============================ testimonial ============================ */

.quote__mark {
  font-family: var(--display);
  font-size: clamp(110px,10vw,160px);
  line-height: 0.6;
  color: rgba(var(--amber-rgb),0.5);
  margin-bottom: 10px;
}
.quote__txt {
  font-family: var(--display);
  font-size: clamp(22px,2.6vw,32px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 30px;
  max-width: 820px;
}
.quote__txt .teal { color: var(--teal); }
.quote__who { display: flex; align-items: center; gap: 14px; }
.quote__av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(var(--teal-rgb),0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.quote__n { font-weight: 700; font-size: 14.5px; }
.quote__r { font-size: 12.5px; color: #8f86a8; }

/* ============================ 07 · pricing ============================ */

.price__top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 40px;
}
.price__top h2 { font-size: clamp(28px,3.4vw,44px); }
.price__top p  { font-size: 15.5px; color: var(--t-3); margin: 0; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  padding: 30px;
  border-radius: 20px;
  background: var(--glass-soft);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .3s, border-color .3s;
}
.plan--pop {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--teal-rgb),0.16), rgba(var(--cyan-rgb),0.05));
  border: 1.5px solid rgba(var(--teal-rgb),0.5);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.plan__flag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--teal);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
  white-space: nowrap;
}
.plan__name { font-size: 14.5px; font-weight: 700; color: #c7bdde; margin-bottom: 10px; }
.plan--pop .plan__name { color: #fff; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.plan__amount { font-family: var(--display); font-size: 40px; font-weight: 700; }
.plan__period { font-size: 14.5px; color: var(--t-4); }
.plan--pop .plan__period { color: var(--teal-pale); }
.plan__note { font-size: 12.5px; color: var(--t-6); margin-bottom: 22px; min-height: 18px; }
.plan--pop .plan__note { color: var(--teal-mid); }
.plan__list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; flex: 1; }
.plan__li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--t-1); }
.plan--pop .plan__li { color: #eee6ff; }
.plan__li svg { flex-shrink: 0; }
.plan__cta {
  text-align: center;
  padding: 13px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
  transition: background .25s, border-color .25s;
}
.plan__cta--pop { background: var(--teal); border-color: var(--teal); }

/* ============================ final CTA ============================ */

.cta {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(var(--teal-rgb),0.28);
  padding: clamp(40px,6vw,80px);
  text-align: center;
}
.cta__in { position: relative; z-index: 1; }
.cta h2 {
  font-family: var(--display);
  font-size: clamp(30px,4.2vw,54px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.cta p { font-size: 17px; color: var(--t-2); max-width: 520px; margin: 0 auto 34px; }

/* ============================ footer ============================ */

.footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 40px;
  position: relative;
}
.footer__top {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__brand { max-width: 300px; }
.footer__brand img { height: 26px; margin-bottom: 16px; }
.footer__brand p { font-size: 14px; line-height: 1.6; color: var(--t-5); margin: 0; }
.footer__navs { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__h { font-size: 12.5px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 13.5px; color: var(--t-4); text-decoration: none; transition: color .2s; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 22px var(--gutter);
  text-align: center;
  font-size: 12.5px;
  color: var(--t-7);
}
/* four-hue seam, retained from the current site */
.footer__rule { display: flex; height: 2px; }
.footer__rule i { flex: 1; }
.footer__rule i:nth-child(1) { background: var(--teal); }
.footer__rule i:nth-child(2) { background: var(--cyan); }
.footer__rule i:nth-child(3) { background: var(--amber); }
.footer__rule i:nth-child(4) { background: var(--coral); }

/* ==================== doc pages (privacy / support) ==================== */

.doc { max-width: 860px; margin: 0 auto; padding: clamp(40px,6vw,72px) var(--gutter) 40px; }
.doc__head { margin-bottom: 34px; }
.doc__head h1 {
  font-family: var(--display);
  font-size: clamp(32px,4.4vw,52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.doc__head p { font-size: 16.5px; line-height: 1.6; color: var(--t-3); margin: 0; max-width: 620px; }

.doc__body {
  border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--line);
  padding: clamp(24px,3.4vw,44px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.doc__body h2 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.doc__body > h2:first-child { margin-top: 0; }
.doc__body h3 { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 22px 0 10px; }
.doc__body p, .doc__body li { font-size: 15px; line-height: 1.7; color: var(--t-1); }
.doc__body p { margin: 0 0 14px; }
.doc__body ul, .doc__body ol { padding-left: 22px; margin: 0 0 16px; }
.doc__body li { margin-bottom: 8px; }
.doc__body a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(var(--cyan-rgb),0.35); }
.doc__body strong, .doc__body b { color: #fff; }
.doc__body em, .doc__body i { color: var(--t-2); }
.doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.doc__body th, .doc__body td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px 12px;
  text-align: left;
  color: var(--t-1);
}
.doc__body th { background: rgba(255,255,255,0.04); color: #fff; font-weight: 700; }

.last-updated { font-size: 13px; color: var(--t-5); margin-bottom: 26px; }
.toc {
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 22px 26px;
  margin-bottom: 30px;
}
.toc h2 { margin-top: 0 !important; font-size: 17px !important; }
.toc ol, .toc ul { margin-bottom: 0; }
.contact-box {
  border-radius: 16px;
  background: rgba(var(--teal-rgb),0.1);
  border: 1px solid rgba(var(--teal-rgb),0.3);
  padding: 20px 24px;
  margin-top: 20px;
}
.contact-box p:last-child { margin-bottom: 0; }

/* support form */
.form { display: flex; flex-direction: column; gap: 20px; }
.form__group { display: flex; flex-direction: column; gap: 8px; }
.form__group label { font-size: 13.5px; font-weight: 700; color: var(--t-1); }
.form__group input,
.form__group textarea {
  font-family: var(--body);
  font-size: 15px;
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color .2s, background .2s;
  width: 100%;
}
.form__group textarea { min-height: 150px; resize: vertical; }
.form__group input::placeholder,
.form__group textarea::placeholder { color: var(--t-6); }
.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: rgba(var(--teal-rgb),0.6);
  background: rgba(255,255,255,0.07);
}
.form__submit {
  align-self: flex-start;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s, transform .2s;
}
.form__msg {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.form__msg--ok  { background: rgba(var(--teal-rgb),0.14);  border: 1px solid rgba(var(--teal-rgb),0.4);  color: var(--teal-pale); }
.form__msg--err { background: rgba(var(--coral-rgb),0.12); border: 1px solid rgba(var(--coral-rgb),0.4); color: var(--coral-pale); }
.form__msg a { color: inherit; }

/* ======================== hover (pointer devices only) ========================
   Guarded so a tap on a touchscreen doesn't leave the hover state stuck on.
   ============================================================================ */

@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover    { color: #fff; border-color: rgba(var(--teal-rgb),0.6); }
  .btn-nav:hover         { transform: translateY(-2px); background: rgba(255,255,255,0.1); border-color: rgba(var(--teal-rgb),0.5); }
  .nav__burger:hover     { background: rgba(255,255,255,0.1); }
  .btn--primary:hover    { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
  .btn--primary:active   { transform: scale(0.96); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
  .btn--ghost:hover      { border-color: rgba(var(--teal-rgb),0.5); background: rgba(255,255,255,0.07); }
  .btn--ghost:active     { transform: scale(0.96); }
  .btn--lg:hover         { transform: translateY(-3px); box-shadow: 0 22px 55px rgba(0,0,0,0.5); }
  .callmock:hover        { transform: rotate(0deg); }
  .feat__viz:hover       { transform: rotate(0deg); }
  .ps-card--new:hover    { transform: rotate(0deg); border-color: rgba(var(--teal-rgb),0.55); }
  .ps-card--side:hover   { transform: rotate(0deg); border-color: rgba(255,255,255,0.2); }
  .card:hover            { transform: translateY(-6px); }
  .card--teal:hover      { border-color: rgba(var(--teal-rgb),0.4); }
  .card--cyan:hover      { border-color: rgba(var(--cyan-rgb),0.4); }
  .card--amber:hover     { border-color: rgba(var(--amber-rgb),0.4); }
  .uc:hover              { transform: translateY(-6px); border-color: rgba(var(--teal-rgb),0.4); }
  .plan:hover            { transform: translateY(-6px); border-color: rgba(255,255,255,0.2); }
  .plan--pop:hover       { transform: translateY(-6px); border-color: rgba(var(--teal-rgb),0.5); }
  .plan__cta:hover       { background: rgba(255,255,255,0.11); }
  .plan__cta--pop:hover  { background: var(--teal-hi); border-color: var(--teal-hi); }
  .footer__links a:hover { color: #fff; }
  .form__submit:hover    { background: var(--teal-hi); }
  .form__submit:active   { transform: scale(0.97); }
  .doc__body a:hover     { border-bottom-color: var(--cyan); }
}

/* ============================ scroll reveal ============================ */

.is-hidden {
  opacity: 0.001;
  transform: translateY(38px) scale(0.92);
  transition: opacity .55s ease, transform .6s cubic-bezier(.22,1.6,.44,1);
}
.is-shown { opacity: 1; transform: translateY(0) scale(1); }

/* ==========================================================================
   RESPONSIVE
   The design canvas ships zero media queries — it was authored at 1440x960.
   Everything below is the mobile layer.
   ========================================================================== */

/* ---- <=1180px: relax the widest grids ---- */
@media (max-width: 1180px) {
  .hero--1 .hero__grid,
  .hero--2 .hero__grid,
  .hero--3 .hero__grid { gap: 32px; }
  .feat { gap: 40px; margin-bottom: 90px; }
  .nav__links { gap: 26px; }
}

/* ---- <=1024px: heroes, features, pricing go single-column ---- */
@media (max-width: 1024px) {
  .hero--1, .hero--2 { min-height: 0; }

  .hero--1 .hero__grid,
  .hero--2 .hero__grid,
  .hero--3 .hero__grid {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: clamp(40px,6vw,64px) 0;
  }
  .hero__copy { order: 1; }
  .hero__viz  { order: 2; }
  .hero__lede, .hero--2 .hero__lede { max-width: 560px; }

  /* the visuals were sized for a narrow column — let them breathe */
  .as-win, .sv-win { max-width: 640px; }
  .callmock { width: 100%; max-width: 460px; }

  .feat, .feat--rev {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-bottom: 80px;
  }
  /* copy always leads, visual always follows — regardless of desktop order */
  .feat__copy, .feat--rev .feat__copy { order: 1; }
  .feat__viz,  .feat--rev .feat__viz  { order: 2; }
  .feat__text, .feat__list { max-width: 560px; }

  .shift__top, .price__top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .ps { grid-template-columns: 1fr; }

  .platforms { grid-template-columns: 1fr; gap: 34px; }
  .platforms p { max-width: none; }

  .cards-3 { grid-template-columns: repeat(2, 1fr); }
  .cards-3--hl { margin-top: 70px; }

  .plans { grid-template-columns: 1fr; gap: 34px; }
  .plan--pop { order: -1; }   /* lead with the recommended plan once stacked */
}

/* ---- <=900px: burger nav, rails go horizontal, tilts flatten ---- */
@media (max-width: 900px) {
  .nav > .btn-nav { display: none; }
  .nav__burger { display: flex; }

  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px var(--gutter) 22px;
    background: rgba(9,7,14,0.92);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav__links a {
    font-size: 16px;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .nav__links .btn-nav {
    justify-content: center;
    margin-top: 16px;
    padding: 14px 21px;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,0.16);
  }

  /* index rail: vertical -> a horizontal mono label above the copy */
  .hero { grid-template-columns: 1fr; overflow: visible; }
  .rail, .hero--1 .rail {
    grid-column: 1;
    justify-content: flex-start;
    padding: 34px 0 0;
  }
  .rail__txt {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 10.5px;
    letter-spacing: 0.2em;
  }
  .hero__grid { grid-column: 1; }
  .hero--1 .hero__grid,
  .hero--2 .hero__grid,
  .hero--3 .hero__grid { padding: 24px 0 clamp(40px,8vw,64px); }

  /* tilted cards overflow a narrow viewport — flatten them */
  .callmock, .tilt-l, .tilt-r,
  .ps-card--new, .ps-card--side { transform: none; }
  /* the ps cards carry their tilt at (0,2,0) so the reveal can't flatten it —
     which means un-tilting them here has to match that specificity, while still
     leaving the reveal's rise intact */
  .ps-card--new.is-hidden,
  .ps-card--side.is-hidden { transform: translateY(38px) scale(0.92); }
  .ps-card--new.is-shown,
  .ps-card--side.is-shown  { transform: none; }

  .ghostnum { font-size: clamp(110px, 26vw, 190px); }
  .ghostnum--1 { right: -2%; top: -4%; }
  .ghostnum--2 { left: -2%; bottom: -2%; }

  /* blur(80px) across five big blobs is real work for a phone GPU */
  .blob { filter: blur(60px); opacity: 0.85; }
  .blob--h1a { width: 420px; height: 420px; left: 40%; }
  .blob--h1b { width: 340px; height: 340px; }
  .blob--h2  { width: 380px; height: 380px; }
  .blob--h3  { width: 360px; height: 360px; }
  .blob--cta { width: 380px; height: 380px; top: -180px; }

  .sec--feat .sechead { margin-bottom: 40px; }
  .sec--feat > .sec__title { margin-bottom: 46px; }
  .feat { margin-bottom: 64px; }

  /* share window: transcript over chat */
  .sv-body { grid-template-columns: 1fr; }
  .sv-tcol { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .sv-tlist { height: 210px; }
  .sv-clist { height: 190px; }

  .as-win { height: 460px; }

  .footer__top { gap: 32px; }
  .footer__navs { gap: 44px; }
}

/* ---- <=640px: phone ---- */
@media (max-width: 640px) {
  .sechead { gap: 12px; margin-bottom: 28px; }
  .sechead__no { font-size: 10.5px; letter-spacing: 0.14em; }

  .hero--1 .hero__title,
  .hero--2 .hero__title,
  .hero--3 .hero__title { font-size: clamp(32px, 9vw, 44px); }
  .hero__lede { font-size: 15.5px; }

  /* "LIVE ANSWERS · ONLY YOU CAN SEE THEM" is ~319px at nowrap — wider than a
     320px screen's content box. Let the pills wrap instead of being clipped. */
  .pill { white-space: normal; letter-spacing: 0.04em; }

  /* stack the CTAs full-width — side by side they get cramped */
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { justify-content: center; }
  .btn--primary, .btn--ghost { padding: 15px 20px; font-size: 15px; }

  .hero__checks { gap: 10px; flex-direction: column; align-items: flex-start; }

  .cards-3 { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .uc { padding: 22px; }

  .ps-card { padding: 26px; }

  .toggle { width: 100%; }
  .toggle__btn { flex: 1; padding: 11px 12px; font-size: 13.5px; }
  .toggle--bill .toggle__btn { padding: 9px 12px; font-size: 13px; }
  .toggle__grp { flex: 1; justify-content: center; }
  .toggle__save { font-size: 10px; padding-right: 6px; }

  .plan { padding: 26px; }
  .plans { gap: 30px; }
  .plan--pop { margin-top: 8px; }   /* the -13px flag needs headroom once stacked */

  .platforms { padding: 28px 22px; }

  /* The device row is 262px wide (mac base 184 + gap 18 + phone 60) but the
     platforms card only offers 236px here — it was being clipped. Scale it. */
  .devices { gap: 14px; }
  .dev-mac__screen { width: 138px; height: 88px; padding: 10px; }
  .dev-mac__base   { width: 156px; height: 9px; }
  .dev-wave        { height: 28px; }
  .dev-phone       { width: 52px; height: 106px; }

  .pband { padding: 30px 22px; }
  .pband__tags { gap: 10px; }
  .pband__tag { padding: 10px 14px; font-size: 12.5px; }

  .cta { padding: 40px 22px; }
  .cta p { font-size: 15.5px; }

  /* the answer scene is the tightest thing on the page */
  .as-win { height: 430px; }
  .as-head { padding: 11px 13px; }
  .as-wave { display: none; }          /* the head is too narrow for wave + timer */
  .as-ctx { padding: 9px 13px; }
  .as-tiles { padding: 10px 12px 4px; }
  .as-tile { height: 74px; }
  .as-tile__av { width: 50px; height: 50px; }
  .as-tile--d .as-tile__av { font-size: 18px; }
  .as-tile--you .as-tile__av { font-size: 14px; }
  .as-h { padding: 9px 13px 6px; }
  .as-tlist { padding: 0 13px 13px; gap: 9px; }
  .as-txt { font-size: 12.5px; }
  .as-overlay { left: 12px; right: 12px; bottom: 12px; }
  .as-card { padding: 12px 13px; }
  .as-card__body { font-size: 13.5px; }
  .as-card__head { flex-wrap: wrap; gap: 5px; }
  .as-priv { margin-left: 0; }

  .callmock__grid { gap: 8px; padding: 10px; }
  .tile__av { width: 44px; height: 44px; font-size: 16px; }
  .tile--you .tile__av { font-size: 13px; }
  .bot { width: 78%; padding: 14px 12px; }
  .capbadge { padding: 11px 15px; gap: 10px; }
  .capbadge__s { font-size: 11px; }

  .quote__mark { margin-bottom: 4px; }

  .footer__top { flex-direction: column; gap: 34px; }
  .footer__navs { gap: 48px; }
  .footer__brand { max-width: none; }

  .doc__body { padding: 22px 18px; border-radius: 18px; }
  .form__submit { align-self: stretch; }
}

/* ---- <=400px: smallest phones ---- */
@media (max-width: 400px) {
  .as-win { height: 400px; }
  .as-ctx span { display: none; }   /* "Your notes: …" has nowhere left to go */
  .capbadge__wave { display: none; }
  .footer__navs { gap: 32px; }
}

/* ============================ reduced motion ============================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .is-hidden { opacity: 1; transform: none; }
  .blob { display: none; }
  .grain { display: none; }
}