/* =========================================================================
   Tethry — landing page
   "The Quiet Line" — calm authority, dark-first, rationed cyan.
   One radius (12 cards / 8 chips). One border (1px slate @ ~8%).
   One shadow language (long, soft, low-opacity, light-from-above).
   Type: Clash Display 500/600 display, General Sans 400/500 body, system mono for chips.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* brand palette */
  --ink: #1E1B4B;
  --indigo: #4F46E5;
  --indigo-deep: #3730A3;
  --indigo-light: #6366F1;
  --signal: #22D3EE;
  --signal-soft: #A5F3FC;
  --cord-1: #67E8F9;
  --cord-2: #22D3EE;
  --slate-900: #0F172A;
  --slate-500: #64748B;
  --cloud: #F8FAFC;

  /* radii (one system) */
  --r-card: 12px;
  --r-chip: 8px;
  --r-pill: 999px;

  /* one border treatment */
  --hair: 1px solid rgba(148,163,184,0.08);
  --hair-strong: 1px solid rgba(148,163,184,0.16);

  /* spacing — 8pt grid */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-7: 64px; --s-8: 80px;
  --s-9: 120px; --s-10: 160px;

  /* type scale */
  --t-12: .75rem; --t-14: .875rem; --t-16: 1rem;  --t-18: 1.125rem;
  --t-22: 1.375rem; --t-28: 1.75rem; --t-40: 2.5rem; --t-56: 3.5rem; --t-72: 4.5rem;

  --measure: 62ch;
  --container: 1200px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 240ms;

  /* one shadow language */
  --shadow-sm: 0 1px 2px rgba(2,6,23,.4);
  --shadow:    0 18px 48px -24px rgba(2,6,23,.7);
  --shadow-lg: 0 40px 90px -40px rgba(2,6,23,.8);
}

/* ---------- Dark theme (authored default) ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg:        #15132f;            /* ink, edge-deepened via gradient below */
  --bg-edge:   var(--slate-900);
  --surface:   #1b1940;
  --surface-2: #20204a;
  --panel-tint: rgba(79,70,229,0.10);

  --text:      #EEF1F8;
  --text-soft: #C3C9DA;
  --text-mut:  #8A91AA;
  --heading:   #F8FAFC;

  --mark-bg:   var(--indigo);
  --border:    rgba(148,163,184,0.10);
  --border-strong: rgba(148,163,184,0.18);

  --btn-ghost-bd: rgba(199,205,222,0.22);
  --btn-ghost-tx: #E5E9F3;

  --flow-line:  rgba(148,163,184,0.22);
  --flow-card:  #1b1940;
  --flow-stroke: rgba(148,163,184,0.20);
  --cipher-fill: #11132e;

  --invoice-bg: #1a1838;
  --code-bg:    #14122c;
}

/* ---------- Light theme (real, shipped) ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg:        #FFFFFF;
  --bg-edge:   var(--cloud);
  --surface:   #FFFFFF;
  --surface-2: var(--cloud);
  --panel-tint: rgba(79,70,229,0.06);

  --text:      #1E1B4B;
  --text-soft: #334155;
  --text-mut:  #64748B;
  --heading:   #0F172A;

  --mark-bg:   var(--indigo);
  --border:    rgba(15,23,42,0.10);
  --border-strong: rgba(15,23,42,0.16);

  --btn-ghost-bd: rgba(30,27,75,0.22);
  --btn-ghost-tx: #1E1B4B;

  --flow-line:  rgba(15,23,42,0.16);
  --flow-card:  #FFFFFF;
  --flow-stroke: rgba(15,23,42,0.12);
  --cipher-fill: #0F172A;

  --invoice-bg: #FFFFFF;
  --code-bg:    #0F172A;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow:    0 18px 48px -28px rgba(15,23,42,.28);
  --shadow-lg: 0 40px 90px -44px rgba(15,23,42,.30);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--t-16);
  line-height: 1.65;
  color: var(--text);
  background:
    radial-gradient(120% 80% at 15% -5%, rgba(79,70,229,0.16), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%, var(--bg-edge) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
[data-theme="light"] body {
  background:
    radial-gradient(120% 70% at 12% -8%, rgba(79,70,229,0.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 50%, var(--cloud) 100%);
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: "Clash Display", system-ui, sans-serif;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

a { color: inherit; text-decoration: none; }
p a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--indigo-light);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
p a:hover { text-decoration-color: var(--indigo); }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: fixed; top: -100px; left: var(--s-2); z-index: 200;
  background: var(--indigo); color: #fff; padding: 10px 16px;
  border-radius: var(--r-chip); font-weight: 500;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); }

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

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-3); }
.narrow { max-width: 880px; }
.center { text-align: center; margin-inline: auto; }

section { position: relative; }
.toll, .how, .why, .anydevice, .security, .pricing, .compare, .faq, .finalcta {
  padding-block: var(--s-9);
}

/* ---------- Typography utilities ---------- */
.lede { font-size: var(--t-18); color: var(--text-soft); max-width: var(--measure); line-height: 1.7; }
.eyebrow, .section-eyebrow {
  font-size: var(--t-14); font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-mut); margin-bottom: var(--s-2);
}
.section-lede { font-size: var(--t-18); color: var(--text-soft); max-width: var(--measure); line-height: 1.7; margin-top: var(--s-3); }
.section-lede.center { margin-inline: auto; }
.accent-text { color: var(--signal-soft); }
[data-theme="light"] .accent-text { color: var(--indigo); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0; }
.dot { color: var(--text-mut); margin-inline: 6px; }

h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.5rem); }
section > .container > h2,
section > .container.narrow > h2 { max-width: 22ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: var(--t-16); line-height: 1;
  padding: 14px 22px; border-radius: var(--r-chip);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-sm { padding: 9px 15px; font-size: var(--t-14); }
.btn-block { width: 100%; }
.btn-primary { background: var(--indigo); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--indigo-light); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--btn-ghost-tx);
  border-color: var(--btn-ghost-bd);
}
.btn-ghost:hover { border-color: var(--text-soft); background: rgba(148,163,184,0.06); transform: translateY(-1px); }

/* ---------- The continuous tether spine ---------- */
.spine {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.spine-path { opacity: .9; }
.spine-lit {
  opacity: .85;
  filter: drop-shadow(0 0 4px rgba(103,232,249,.5));
  /* dashoffset driven by JS scroll progress */
}
[data-theme="light"] .spine-lit { filter: drop-shadow(0 0 3px rgba(34,211,238,.4)); }

/* keep section content above the spine */
.site-header, main, .site-footer { position: relative; z-index: 2; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.site-header.scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hair);
}
.header-inner { display: flex; align-items: center; gap: var(--s-3); height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { border-radius: 9px; flex: none; }
.brand-word {
  font-family: "Clash Display", sans-serif; font-weight: 600;
  font-size: var(--t-22); letter-spacing: -0.04em; color: var(--heading);
}
.site-nav { display: flex; gap: var(--s-4); margin-left: auto; }
.site-nav a {
  font-size: var(--t-14); color: var(--text-soft); font-weight: 500;
  padding: 6px 2px; position: relative; transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-3); }
.site-nav + .header-actions { margin-left: var(--s-3); }

.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-chip); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-soft); cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-soft); }
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }
[data-theme="light"] .theme-toggle .ico-sun { display: block; }
[data-theme="light"] .theme-toggle .ico-moon { display: none; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--s-7), 7vw, 120px) var(--s-9); }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--s-7); align-items: center;
}
.hero-copy { padding-top: var(--s-6); } /* intentional breath above the headline */
.hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 5vw, 4.5rem);
  letter-spacing: -0.03em; margin-bottom: var(--s-3); max-width: 16ch;
}
.hero-sub { margin-bottom: var(--s-5); }
.hero-cta { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-4); }
.hero-cta.center { justify-content: center; }
.trust-strip {
  font-size: var(--t-14); color: var(--text-mut); display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px;
}
.trust-strip.center { justify-content: center; }

/* hero device stage */
.hero-stage { position: relative; }
.device { position: relative; margin: 0; }
.hero-cord {
  position: absolute; inset: -28px -8px auto -34px; width: calc(100% + 60px); height: 360px;
  z-index: 0; overflow: visible;
}
.node-fill { fill: var(--cord-1); }
.node-fill-ring { fill: none; stroke: rgba(103,232,249,.35); stroke-width: 6px; }
.node-ring { fill: none; stroke: var(--cord-2); stroke-width: 3px; }
.node-ring-dot { fill: var(--signal-soft); }
#heroPulse { filter: drop-shadow(0 0 5px rgba(165,243,252,.9)); }

.device-frame {
  position: relative; z-index: 1;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.device-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: var(--hair);
  background: color-mix(in srgb, var(--surface) 70%, var(--ink));
}
[data-theme="light"] .device-bar { background: var(--cloud); }
.traffic { display: inline-flex; gap: 6px; }
.traffic i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; }
.device-title { font-size: var(--t-12); color: var(--text-mut); }
.live-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-12); color: var(--text-soft);
  background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.22);
  padding: 4px 9px; border-radius: var(--r-chip);
}
.live-chip .mono { color: var(--signal-soft); }
[data-theme="light"] .live-chip .mono { color: var(--indigo-deep); }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(34,211,238,.5);
}
.live-dot.pulse { animation: livePulse 2.4s var(--ease) infinite; }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(34,211,238,.5); }
  70% { box-shadow: 0 0 0 6px rgba(34,211,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}

.device-body { display: grid; grid-template-columns: 132px 1fr; min-height: 248px; background: var(--code-bg); }
.dv-side { border-right: var(--hair); padding: 12px 0; font-size: var(--t-12); color: var(--text-mut); }
.dv-side-h { padding: 0 14px 8px; text-transform: uppercase; letter-spacing: .05em; font-size: 10px; color: var(--text-mut); }
.dv-tree { list-style: none; padding: 0; }
.dv-tree li { padding: 4px 14px; color: var(--text-mut); }
.dv-tree li.indent { padding-left: 26px; }
.dv-tree li.open { color: var(--text-soft); }
.dv-tree li.active { color: var(--signal-soft); background: rgba(34,211,238,0.06); }
[data-theme="light"] .dv-tree li.active { color: var(--indigo); background: rgba(79,70,229,0.07); }

.dv-main { display: flex; flex-direction: column; }
.dv-tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.dv-tab { font-size: var(--t-12); color: var(--text-mut); padding: 5px 10px; border-radius: 6px 6px 0 0; }
.dv-tab.active { color: var(--text-soft); background: rgba(148,163,184,0.08); }
.dv-code {
  flex: 1; margin: 0; padding: 12px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.75; color: var(--text-soft); overflow: hidden;
}
.dv-code .ln { display: block; white-space: pre; }
.dv-code i { display: inline-block; width: 20px; color: var(--text-mut); opacity: .5; font-style: normal; user-select: none; }
.dv-code .k { color: #c4b5fd; font-weight: 500; }
.dv-code .f { color: #7dd3fc; }
.dv-code .t { color: #6ee7b7; }
.dv-code .c { color: var(--text-mut); font-style: italic; }
[data-theme="light"] .dv-code { color: #cbd5e1; }
.dv-status {
  display: flex; gap: 14px; padding: 7px 14px; border-top: var(--hair);
  font-size: 11px; color: var(--text-mut);
}
.dv-ok { margin-left: auto; color: var(--signal-soft); }
[data-theme="light"] .dv-ok { color: #38bdf8; }

/* role toggle (graft 1) */
.role-toggle {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-top: var(--s-4); font-size: var(--t-14); color: var(--text-mut);
}
.role-label { font-weight: 500; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.role-label .arrow { color: var(--signal); padding-inline: 2px; transition: transform var(--dur) var(--ease); }
.role-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-soft); border-radius: var(--r-pill);
  padding: 6px 6px 6px 8px; cursor: pointer; font-size: var(--t-14); font-family: inherit;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.role-pill:hover { border-color: var(--text-soft); color: var(--text); }
.role-pill-track {
  width: 34px; height: 18px; border-radius: var(--r-pill);
  background: rgba(148,163,184,0.25); position: relative; flex: none;
  transition: background var(--dur) var(--ease);
}
.role-pill-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--signal); transition: transform var(--dur) var(--ease);
}
.role-pill[aria-pressed="true"] .role-pill-track { background: rgba(34,211,238,0.3); }
.role-pill[aria-pressed="true"] .role-pill-thumb { transform: translateX(16px); }
.role-pill-text { font-size: var(--t-12); }
.role-hint { font-size: var(--t-12); color: var(--text-mut); }

/* ---------- Toll booth (section 2) ---------- */
.toll .section-lede { margin-bottom: var(--s-6); }
.invoice {
  background: var(--invoice-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.invoice-head, .invoice-foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-2);
  padding: 16px 24px; font-size: var(--t-14);
}
.invoice-head { border-bottom: var(--hair); font-weight: 500; color: var(--text); }
.invoice-meta { color: var(--text-mut); font-weight: 400; font-size: var(--t-12); }
.invoice-lines { list-style: none; padding: 0; margin: 0; }
.invoice-line {
  display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline;
  padding: 18px 24px; border-bottom: var(--hair); position: relative;
  transition: opacity var(--dur) var(--ease);
}
.invoice-line:last-child { border-bottom: 0; }
.il-text { color: var(--text-soft); max-width: 56ch; }
.il-text b { color: var(--text); font-weight: 500; }
.il-amt {
  font-family: "Clash Display", sans-serif; font-variant-numeric: tabular-nums;
  color: var(--text-mut); font-size: var(--t-14); white-space: nowrap; flex: none;
}
/* the strike — drawn on scroll-into-view */
.invoice-line::after {
  content: ""; position: absolute; left: 24px; right: 24px; top: 50%;
  height: 1.5px; background: var(--cord-2);
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 6px rgba(34,211,238,.5);
}
.invoice-line.struck::after {
  transform: scaleX(1);
  transition: transform 300ms var(--ease);
}
.invoice-line.struck .il-text,
.invoice-line.struck .il-amt {
  filter: grayscale(1); opacity: .5;
  transition: filter 300ms var(--ease), opacity 300ms var(--ease);
}
.invoice-foot { border-top: var(--hair-strong); background: var(--panel-tint); font-weight: 500; color: var(--text); }
.invoice-total {
  font-family: "Clash Display", sans-serif; color: var(--signal-soft);
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .invoice-total { color: var(--indigo-deep); }
.toll-note { margin-top: var(--s-3); font-size: var(--t-12); color: var(--text-mut); max-width: 70ch; }

/* ---------- How it works (section 3) ---------- */
.how-steps { margin-top: var(--s-6); }
.steps { list-style: none; padding: 0; display: grid; gap: var(--s-5); }
.step { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-3); align-items: start; }
.step-num {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border-strong); display: grid; place-items: center;
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: var(--t-22);
  color: var(--heading); background: var(--surface);
}
.step-node {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px solid rgba(34,211,238,.4);
  opacity: 0; transform: scale(.7);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.step.in .step-node { opacity: 1; transform: scale(1); }
.step-body h3 { font-size: var(--t-22); margin-bottom: 6px; }
.step-body p { color: var(--text-soft); max-width: 56ch; }

/* ---------- Why (section 4) ---------- */
.why-grid {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-7);
}
.pillar { padding-right: var(--s-2); }
.pillar-ico {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--r-chip); border: 1px solid var(--border-strong);
  color: var(--indigo-light); background: var(--panel-tint); margin-bottom: var(--s-3);
}
[data-theme="light"] .pillar-ico { color: var(--indigo); }
.pillar h3 { font-size: var(--t-22); margin-bottom: var(--s-1); }
.pillar p { color: var(--text-soft); max-width: 48ch; }

/* ---------- Any device (section 5) ---------- */
.anydevice-grid {
  display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--s-7); align-items: center;
}
.ad-points { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.ad-points li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-soft); }
.tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid var(--cord-2); position: relative;
}
.tick::after {
  content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px;
  border: solid var(--cord-2); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
[data-theme="light"] .tick { border-color: var(--indigo); }
[data-theme="light"] .tick::after { border-color: var(--indigo); }

.ad-stage { display: grid; place-items: center; }
.phone { margin: 0; display: grid; justify-items: center; gap: var(--s-2); }
.phone-frame {
  width: 256px; border-radius: 36px; padding: 10px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); position: relative;
}
.phone-notch {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 20px; border-radius: var(--r-pill); background: var(--ink); z-index: 3;
}
.phone-screen { border-radius: 28px; overflow: hidden; background: var(--code-bg); border: var(--hair); }
.safari-bar {
  display: flex; align-items: center; gap: 8px; padding: 26px 14px 10px;
  background: color-mix(in srgb, var(--surface) 60%, var(--ink));
  font-size: var(--t-12); color: var(--text-soft);
}
[data-theme="light"] .safari-bar { background: var(--cloud); }
.sf-lock { color: var(--text-mut); display: inline-flex; }
.sf-url {
  flex: 1; text-align: center; color: var(--text-soft);
  background: rgba(148,163,184,0.12); border-radius: var(--r-pill); padding: 5px 10px;
  font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-rl { color: var(--text-mut); display: inline-flex; }
/* phone web-client mock — a real app screenshot (always dark, like the app) */
.phone-canvas { padding: 11px; display: flex; flex-direction: column; gap: 9px; background: #0b1124; color: #e8edf7; }
.app-top { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: #aeb6c9; }
.app-host { display: inline-flex; align-items: center; gap: 6px; }
.app-dot { width: 6px; height: 6px; border-radius: 50%; background: #22D3EE; flex: none; box-shadow: 0 0 6px rgba(34,211,238,.7); }
.app-dot.green { background: #34D399; box-shadow: 0 0 6px rgba(52,211,153,.7); }
.app-lat-chip { color: #34D399; background: rgba(52,211,153,.14); border-radius: 999px; padding: 2px 7px; font-size: 9.5px; font-weight: 500; }
.app-ms { margin-left: auto; color: #8b93a7; font-variant-numeric: tabular-nums; }
.app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-card { background: #fff; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.app-card.wide { grid-column: span 2; }
.app-ico { color: #818cf8; line-height: 0; }
.app-ico svg { width: 22px; height: 22px; }
.app-card-t { font-weight: 600; font-size: 12px; color: #0f172a; }
.app-bar { height: 4px; width: 42px; border-radius: 3px; background: linear-gradient(90deg, #6366F1, #A5B4FC); }
.app-card-d { font-size: 9.5px; line-height: 1.45; color: #64748b; }
.app-session { background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.14); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.app-session-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 7px; border-bottom: 1px solid rgba(148,163,184,.12); margin-bottom: 1px; }
.app-conn { display: inline-flex; align-items: center; gap: 6px; color: #34D399; font-size: 11px; font-weight: 500; }
.app-time { color: #aeb6c9; font-size: 10.5px; }
.app-row { display: flex; justify-content: space-between; font-size: 10px; color: #8b93a7; }
.app-row span:last-child { color: #cbd5e1; }
.app-keys { display: flex; gap: 6px; }
.app-key { flex: 1; text-align: center; background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.14); border-radius: 7px; padding: 7px 0; font-size: 10px; color: #cbd5e1; }
.app-key.danger { color: #f87171; flex: 1.7; }
.phone-cap { font-size: var(--t-12); color: var(--text-mut); margin-top: var(--s-2); text-align: center; }

/* ---------- Security (section 6 — showpiece, most whitespace) ---------- */
.security { padding-block: var(--s-10); }
.flow {
  margin: var(--s-7) auto 0; max-width: 980px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s-5) var(--s-3) var(--s-3);
}
.flow-svg { width: 100%; height: auto; }
.flow-label { font-family: "Clash Display", sans-serif; font-size: 14px; fill: var(--text); font-weight: 500; }
.flow-sub { font-size: 11px; fill: var(--text-mut); }
.packet { will-change: transform; }
.packet-text { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 1px; }
.packet-text.plain { fill: var(--ink); }
.packet-text.cipher { fill: var(--signal-soft); }
.packet-cipher { opacity: 0; }
#pcScreen, #pcData { transition: opacity 350ms var(--ease); }
.flow-cap {
  display: flex; gap: var(--s-5); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair);
  font-size: var(--t-14); color: var(--text-soft);
}
.fc-step { display: inline-flex; align-items: center; gap: 8px; }
.fc-key { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.fc-key.plain { background: var(--signal-soft); }
.fc-key.cipher { background: var(--cipher-fill); border: 1px solid var(--cord-2); }

.sec-grid {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
.sec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-sm);
}
.sec-card h3 { font-size: var(--t-18); margin-bottom: var(--s-1); }
.sec-card p { color: var(--text-soft); font-size: var(--t-16); }

/* ---------- Pricing (section 7) ---------- */
.price-grid {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); align-items: stretch;
}
.price-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.price-lead {
  border-color: rgba(34,211,238,0.3);
  box-shadow: var(--shadow);
  position: relative;
}
.price-lead::before {
  content: "Free forever"; position: absolute; top: -11px; left: var(--s-4);
  font-size: var(--t-12); font-weight: 500; color: var(--ink);
  background: var(--signal-soft); padding: 3px 10px; border-radius: var(--r-chip);
}
.price-head { margin-bottom: var(--s-3); }
.price-name { font-size: var(--t-22); }
.price-tagline { font-size: var(--t-14); color: var(--text-mut); margin-top: 2px; }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin-bottom: var(--s-3); }
.price-num {
  font-family: "Clash Display", sans-serif; font-weight: 600; font-size: var(--t-56);
  letter-spacing: -0.03em; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1;
}
.price-per { font-size: var(--t-14); color: var(--text-mut); }
.price-feats { list-style: none; padding: 0; margin: 0 0 var(--s-4); display: grid; gap: 10px; flex: 1; }
.price-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-14); color: var(--text-soft); }
.price-feats .tick { width: 18px; height: 18px; }
.price-feats .tick::after { left: 5px; top: 3px; }
.price-fine { font-size: var(--t-12); color: var(--text-mut); margin-top: var(--s-2); }
.price-promise {
  margin-top: var(--s-5); text-align: center; font-size: var(--t-14); color: var(--text-mut);
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 2px;
}

/* ---------- Comparison (section 8) ---------- */
.table-wrap { margin-top: var(--s-6); overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--border); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
.cmp-table th, .cmp-table td { padding: 16px 18px; text-align: center; border-bottom: var(--hair); font-size: var(--t-14); }
.cmp-table thead th { font-family: "Clash Display", sans-serif; font-weight: 600; color: var(--heading); font-size: var(--t-16); }
.cmp-table tbody th { text-align: left; font-weight: 400; color: var(--text-soft); }
.cmp-rowhead { width: 32%; }
.cmp-us { background: var(--panel-tint); }
.cmp-table thead .cmp-us { color: var(--heading); border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); position: relative; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.yes, .no, .part {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--t-12); font-weight: 500;
}
.yes { color: var(--signal-soft); background: rgba(34,211,238,0.10); }
[data-theme="light"] .yes { color: var(--indigo-deep); background: rgba(79,70,229,0.10); }
.no { color: var(--text-mut); background: rgba(148,163,184,0.08); }
.part { color: var(--text-soft); background: rgba(148,163,184,0.12); }
.cmp-note { margin-top: var(--s-3); font-size: var(--t-12); color: var(--text-mut); max-width: 72ch; }

/* ---------- FAQ (section 9) ---------- */
.faq-list { margin-top: var(--s-6); border-top: var(--hair); }
.faq-item { border-bottom: var(--hair); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--s-3) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3);
  font-family: "Clash Display", sans-serif; font-weight: 500; font-size: var(--t-18); color: var(--heading);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 12px; height: 12px;
  border-right: 1.5px solid var(--text-mut); border-bottom: 1.5px solid var(--text-mut);
  transform: rotate(45deg); transition: transform var(--dur) var(--ease); margin-right: 4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-a { padding: 0 0 var(--s-3); }
.faq-a p { color: var(--text-soft); max-width: 66ch; }

/* ---------- Final CTA (section 10) ---------- */
.finalcta { padding-block: var(--s-10); text-align: center; }
.finalcta-inner { display: grid; justify-items: center; gap: var(--s-3); }
.knot { margin-bottom: var(--s-2); }
.knot path, .knot circle { opacity: 0; transition: opacity 500ms var(--ease); }
.finalcta.in .knot path, .finalcta.in .knot circle { opacity: 1; }
.finalcta h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3rem); max-width: 18ch; }

/* ---------- Footer (section 11) ---------- */
.site-footer { border-top: var(--hair); margin-top: var(--s-8); padding-top: var(--s-8); }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-5);
  padding-bottom: var(--s-7);
}
.footer-tag { color: var(--text-mut); font-size: var(--t-14); margin-top: var(--s-2); max-width: 36ch; }
.footer-h { font-family: "Clash Display", sans-serif; font-size: var(--t-14); font-weight: 600; color: var(--heading); margin-bottom: var(--s-2); }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col a { font-size: var(--t-14); color: var(--text-soft); width: fit-content; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-source { display: inline-flex !important; align-items: center; gap: 8px; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-block: var(--s-4); border-top: var(--hair);
}
.footer-legal { font-size: var(--t-12); color: var(--text-mut); }
.footer-os { font-size: var(--t-12); color: var(--text-mut); }

/* ---------- Reveal-on-scroll ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ====================================================================
   Responsive
   ==================================================================== */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-copy { padding-top: 0; }
  .hero-stage { max-width: 520px; }
  .anydevice-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .ad-stage { order: -1; }
  .why-grid { gap: var(--s-5) var(--s-5); }
  .sec-grid { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  .price-lead { order: -1; }
  .site-nav { display: none; }
  .toll, .how, .why, .anydevice, .pricing, .compare, .faq { padding-block: var(--s-8); }
  .security, .finalcta { padding-block: var(--s-8); }
}

@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
  .header-actions .btn-ghost { display: none; }
  .invoice-line { flex-direction: column; gap: 6px; }
  .invoice-line::after { left: 24px; right: 24px; }
  .flow-cap { gap: var(--s-3); }
}

@media (max-width: 380px) {
  :root { --container: 100%; }
  .container { padding-inline: var(--s-2); }
  .hero h1 { font-size: 2.2rem; }
  .phone-frame { width: 100%; max-width: 240px; }
  /* spine thickens on tiny screens to survive */
  .spine-path, .spine-lit { stroke-width: 2px; }
  .price-num { font-size: var(--t-40); }
}

/* ====================================================================
   Reduced motion — render everything in its end-state, stilled
   ==================================================================== */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .step-node { opacity: 1; transform: scale(1); }
  .knot path, .knot circle { opacity: 1; }
  .live-dot.pulse { animation: none; }
  /* strikes present but not animated */
  .invoice-line.struck::after { transition: none; }
  /* security packet shows end-state at PC (decrypted) handled in JS */
}

/* ====================================================================
   Command palette + live relay status (interactive pack)
   ==================================================================== */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 10px 0 11px; border-radius: var(--r-chip);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-soft);
  cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cmdk-trigger:hover { color: var(--text); border-color: var(--text-soft); }
.cmdk-trigger kbd {
  font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-mut);
  border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 5px; line-height: 1.4;
}

.cmdk-overlay {
  position: fixed; inset: 0; z-index: 300; display: grid; align-items: start; justify-items: center;
  padding-top: 14vh; background: rgba(8,10,24,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 160ms var(--ease);
}
.cmdk-overlay.show { opacity: 1; }
.cmdk-overlay[hidden] { display: none; }
.cmdk-dialog {
  width: min(560px, 92vw); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); overflow: hidden;
  transform: translateY(-6px); transition: transform 160ms var(--ease);
}
.cmdk-overlay.show .cmdk-dialog { transform: none; }
.cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: var(--hair); color: var(--text-mut); }
.cmdk-input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font-size: var(--t-16); font-family: inherit; }
.cmdk-esc { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-mut); border: 1px solid var(--border-strong); border-radius: 5px; padding: 1px 6px; }
.cmdk-list { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.cmdk-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: 11px 12px; border-radius: var(--r-chip); cursor: pointer; color: var(--text-soft);
}
.cmdk-item.active { background: var(--panel-tint); color: var(--text); }
.cmdk-label { font-size: var(--t-14); }
.cmdk-hint { font-size: var(--t-12); color: var(--text-mut); }
.cmdk-empty { padding: 18px; text-align: center; color: var(--text-mut); font-size: var(--t-14); }

.cmdk-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px); z-index: 320;
  background: var(--ink); color: #EEF1F8; border: 1px solid var(--border-strong);
  padding: 11px 16px; border-radius: var(--r-chip); font-size: var(--t-14); box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; white-space: pre-line; max-width: 90vw;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.cmdk-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* live relay pill */
.relay-line { margin-top: var(--s-3); }
.relay-pill {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-12);
  color: var(--text-soft); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 5px 12px;
}
.relay-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mut); flex: none; }
.relay-pill[data-state="up"] { border-color: rgba(34,211,238,0.35); color: var(--text); }
.relay-pill[data-state="up"] .relay-dot { background: var(--signal); animation: livePulse 2.4s var(--ease) infinite; }
[data-theme="light"] .relay-pill[data-state="up"] .relay-dot { background: #0891b2; }

@media (max-width: 560px) { .cmdk-trigger kbd { display: none; } }

/* hero device renders (phone / laptop), swapped by the flip toggle */
.hero-device { margin: 0; display: grid; place-items: center; min-height: 520px; }
.hero-device-img { max-width: 100%; max-height: 560px; width: auto; height: auto; display: block; transition: opacity 280ms var(--ease); }
@media (max-width: 880px) { .hero-device { min-height: 0; } .hero-device-img { max-height: 480px; } }

/* clean transparent phone render in the "any device" section */
.phone-render { width: 100%; max-width: 300px; height: auto; display: block; margin-inline: auto; filter: drop-shadow(0 24px 48px rgba(15,23,42,.22)); }