:root {
  --bg: #07080b;
  --bg-2: #0d0f14;
  --card: #12151c;
  --line: rgba(255, 255, 255, 0.08);
  --ink: #f4f6fb;
  --ink-2: rgba(244, 246, 251, 0.66);
  --ink-3: rgba(244, 246, 251, 0.42);
  --blue: #3b82ff;
  --sky: #7ad7ff;
  --warn: #ff6a3d;
  --good: #35e0a1;
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
a { color: inherit; }
code, kbd { font-family: var(--mono); font-size: 0.9em; }
kbd {
  display: inline-block; padding: 1px 7px; margin: 0 2px;
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(59,130,255,0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(53,224,161,0.08), transparent 60%);
}
main, .footer, .nav { position: relative; z-index: 1; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: rgba(7,8,11,0.6);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; font-weight: 600; font-size: 16px;
  text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #5cc2ff, #2f6bff);
  box-shadow: 0 10px 30px -8px rgba(47,107,255,0.7), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(47,107,255,0.85), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-ghost { color: var(--ink); background: rgba(255,255,255,0.06); border: 1px solid var(--line); }
.btn-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-small { padding: 8px 16px; font-size: 14px; color: #fff; background: linear-gradient(135deg, #5cc2ff, #2f6bff); }
.btn-block { width: 100%; }

/* Type */
.eyebrow { color: var(--sky); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 16px; }
h1, h2, h3 { letter-spacing: -0.03em; line-height: 1.04; margin: 0; }
.hero-title { font-size: clamp(40px, 5.2vw, 84px); font-weight: 750; }
.hero-title .mask { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.08em; }
.hero-title .line-in { display: inline-block; }
h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 720; }
h3 { font-size: clamp(26px, 3vw, 36px); font-weight: 700; margin-bottom: 14px; }
.grad {
  background: linear-gradient(100deg, #9fe6ff 0%, #4aa8ff 40%, #8b7bff 75%, #35e0a1 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 560px; margin: 26px 0 32px; }
.fine { color: var(--ink-3); font-size: 14px; margin-top: 18px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cta.center { justify-content: center; }
.section-head { text-align: center; max-width: 900px; margin: 0 auto 72px; padding: 0 20px; }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  min-height: calc(100vh - 64px);
  padding: 60px clamp(16px, 5vw, 72px) 80px;
  max-width: 1400px; margin: 0 auto;
}
.hero-stage { perspective: 1400px; }
.screen {
  position: relative; aspect-ratio: 16 / 10.4; border-radius: 26px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 60px 120px -30px rgba(0,0,0,0.8), 0 0 0 10px #111318, 0 0 0 11px rgba(255,255,255,0.06);
  transform: rotateX(8deg) rotateY(-10deg);
  transform-style: preserve-3d;
}
.wallpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 70% at 25% 80%, #2a5cff 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 30%, #35e0a1 0%, transparent 60%),
    radial-gradient(60% 60% at 60% 110%, #8b5cff 0%, transparent 60%),
    linear-gradient(180deg, #1a2440, #0b1020);
  filter: saturate(115%);
}
/* The Mac around the notch. Everything is sized in cqw — a percent of the
   screen's width — so the whole desktop scales as one picture. */
.screen { container-type: inline-size; }
.mb {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 3.4cqw; padding: 0 2.2cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(14,16,24,0.42); backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 1.62cqw; color: rgba(255,255,255,0.92); letter-spacing: 0;
}
.mb-left, .mb-right { display: flex; align-items: center; gap: 2.1cqw; white-space: nowrap; }
.mb-right { gap: 1.8cqw; }
.mb b { font-weight: 700; }
.mb svg { height: 1.55cqw; width: auto; fill: currentColor; color: rgba(255,255,255,0.92); }
.mb .mb-apple { height: 1.9cqw; margin-top: -0.2cqw; }
.mb-right svg:first-child { height: 1.3cqw; }

.win {
  position: absolute; z-index: 1; left: 6%; top: 11%; width: 57%; height: 58%;
  border-radius: 1.6cqw; overflow: hidden;
  background: rgba(22,23,28,0.9); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 2.4cqw 5cqw rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  font-family: var(--mono); font-size: 1.42cqw; line-height: 1.55; color: rgba(255,255,255,0.86);
}
.win-bar {
  position: relative; height: 4.4cqw; display: flex; align-items: center; gap: 1.1cqw; padding: 0 1.7cqw;
  background: rgba(255,255,255,0.045); border-bottom: 1px solid rgba(0,0,0,0.4);
  font-family: var(--font); font-size: 1.4cqw; color: rgba(255,255,255,0.5);
}
.win-bar i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar span { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-weight: 600; }
.win-body { padding: 1.6cqw 2cqw; overflow: hidden; }
.win-body p { margin: 0; white-space: pre; }
.win-body b { font-weight: 600; color: #fff; }
.t-box {
  display: inline-block; margin-bottom: 0.7cqw !important; padding: 0.5cqw 1.4cqw;
  border: 1px solid rgba(215,119,87,0.7); border-radius: 0.8cqw;
}
.t-claude { color: #d77757; }
.t-dim { color: rgba(255,255,255,0.42); }
.t-prompt { color: #fff; margin: 0.7cqw 0 !important; padding: 0.4cqw 1cqw; background: rgba(255,255,255,0.06); border-radius: 0.5cqw; }
.t-dot { color: rgba(255,255,255,0.9); }
.t-dot.ok { color: #4ade80; }
.t-work { margin-top: 0.7cqw !important; color: #d77757; }
.spin { display: inline-block; animation: tspin 1.6s linear infinite; }
@keyframes tspin { to { transform: rotate(360deg); } }

.dock {
  position: absolute; z-index: 2; left: 50%; bottom: 1.2cqw; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.9cqw; padding: 0.9cqw;
  border-radius: 2.4cqw; background: rgba(255,255,255,0.13);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 1.2cqw 3cqw rgba(0,0,0,0.35);
}
.dock > i {
  position: relative; width: 5cqw; height: 5cqw; border-radius: 1.2cqw; flex: none;
  display: grid; place-items: center; overflow: visible;
  font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 1.7cqw; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 0.3cqw 0.8cqw rgba(0,0,0,0.25);
}
.dock > i.on::after {
  content: ""; position: absolute; bottom: -0.75cqw; left: 50%; width: 0.5cqw; height: 0.5cqw;
  margin-left: -0.25cqw; border-radius: 50%; background: rgba(255,255,255,0.75);
}
.dock > b { width: 1px; height: 4.2cqw; background: rgba(255,255,255,0.25); margin: 0 0.3cqw; }
.d-finder { background: linear-gradient(90deg, #6ec3ff 50%, #e8f3ff 50%); }
.d-finder::before { content: ""; width: 42%; height: 18%; border-bottom: 0.35cqw solid #1a3a66; border-radius: 0 0 50% 50%; margin-top: 18%; }
.d-safari { background: radial-gradient(circle, #fff 0 55%, transparent 56%) center / 82% 82% no-repeat, linear-gradient(#e9eef5, #c9d2de); }
.d-safari::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #5cc0ff, #1466e0); }
.d-safari::after { content: ""; position: absolute; left: 44%; top: 22%; width: 12%; height: 56%; transform: rotate(45deg); background: linear-gradient(#ff3b30 50%, #fff 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.d-mail { background: linear-gradient(#5ab8ff, #1b74f5); }
.d-mail::before { content: ""; width: 58%; height: 40%; border: 0.3cqw solid #fff; border-radius: 0.3cqw; background: linear-gradient(to bottom right, transparent 48%, #fff 49% 53%, transparent 54%), linear-gradient(to bottom left, transparent 48%, #fff 49% 53%, transparent 54%); background-size: 100% 200%; }
.d-notes { background: linear-gradient(#ffd84d 0 24%, #fffdf3 24%); }
.d-notes::before { content: ""; width: 64%; height: 38%; margin-top: 30%; background: repeating-linear-gradient(#d9d3c0 0 1px, transparent 1px 28%); }
.d-term { background: linear-gradient(#3a3d45, #16171b); }
.d-term span { font-size: 1.5cqw; color: #e7e7e7; }
.d-claude { background: #d77757; }
.d-claude svg { width: 58%; height: 58%; fill: #fff; fill-rule: evenodd; }
.d-code { background: linear-gradient(#2f9bff, #0a64d8); }
.d-quota { background: #0c0d10; overflow: hidden; }
.d-quota img { width: 100%; height: 100%; border-radius: inherit; }
.d-trash { background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.15)); }
.d-trash::before { content: ""; width: 48%; height: 62%; margin-top: 10%; border-radius: 0 0 0.5cqw 0.5cqw; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 25%), rgba(255,255,255,0.25); }

/* The hero notch, drawn like the app's: a black body welded to the right bezel,
   flaring back out to it at both ends. Sizes are the app's design-frame pixels
   times --s, which main.js sets from the screen's height. The shape itself is a
   clip-path path main.js redraws as it opens and folds. */
.notch-wrap {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  filter: drop-shadow(-6px 0 18px rgba(0,0,0,0.35));
}
.notch {
  --s: 0.3;
  position: absolute; right: -1px; top: calc(50% + 1.7cqw); transform: translateY(-50%);
  width: calc(26px * var(--s)); height: calc(210px * var(--s));
  background: #000;
}
.hn-cells {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: calc(186px * var(--s));
  padding-top: calc(19.4px * var(--s));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(83.5px * var(--s));
  opacity: 0;
}
.hn-cell { display: flex; flex-direction: column; align-items: center; gap: calc(26.9px * var(--s)); }
.hn-ring { width: calc(117px * var(--s)); height: calc(117px * var(--s)); display: block; overflow: visible; }
.hn-track { fill: none; stroke: rgba(255,255,255,0.188); stroke-width: 15.5; }
.hn-bar { fill: none; stroke: var(--c); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 342.43; stroke-dashoffset: 342.43; }
.hn-glyph { fill: #fff; fill-rule: evenodd; }
.hn-pct {
  font-size: calc(38.3px * var(--s)); line-height: calc(46px * var(--s));
  font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.notch-cells { display: flex; gap: 26px; padding: 0 26px 14px; opacity: 0; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cell b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cell i { font-style: normal; font-size: 10px; color: var(--ink-3); }
.ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .track { stroke: rgba(255,255,255,0.14); }
.ring .bar { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; }

/* The hover card and the warning scale with the screen, like the rest of the
   desktop — cqw here is a percent of the mockup's width. */
.tip {
  position: absolute; z-index: 5; top: 10%; right: 12.8cqw; width: 43.5cqw;
  background: rgba(10,12,16,0.92); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2.8cqw; padding: 2.4cqw 2.8cqw; font-size: 2.1cqw;
  box-shadow: 0 3.5cqw 7cqw rgba(0,0,0,0.5); opacity: 0;
  backdrop-filter: blur(10px);
}
.tip-head { display: flex; align-items: center; gap: 1.4cqw; margin-bottom: 1.7cqw; }
.tip-head em { margin-left: auto; font-style: normal; color: var(--ink-3); }
.dot { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; display: inline-block; }
.tip-row { display: flex; justify-content: space-between; color: var(--ink-2); margin-top: 1cqw; }
.tip-row.strong { color: var(--ink); font-weight: 600; margin-bottom: 1.7cqw; }
.tip-bar { height: 0.9cqw; border-radius: 0.5cqw; background: rgba(255,255,255,0.12); margin-top: 1cqw; overflow: hidden; }
.tip-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb13d, #ff6a3d); border-radius: 0.5cqw; }
.warn { color: var(--warn); }
.toast {
  position: absolute; z-index: 5; left: 3cqw; bottom: 9.5cqw; width: 50cqw;
  display: flex; gap: 1.7cqw; align-items: flex-start;
  padding: 2.1cqw 2.4cqw; border-radius: 2.8cqw; font-size: 2.1cqw; line-height: 1.4;
  background: rgba(30,32,40,0.72); border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(20px); box-shadow: 0 3.5cqw 8.5cqw rgba(0,0,0,0.4);
  opacity: 0;
}
.toast img { width: 5.2cqw; height: 5.2cqw; flex: none; }
.toast b { display: block; margin-bottom: 0.35cqw; }
.toast span { color: var(--ink-2); }

/* Marquee */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; background: rgba(255,255,255,0.015); }
.marquee-track { display: flex; gap: 56px; width: max-content; white-space: nowrap; }
.marquee-track span { color: var(--ink-3); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }

/* Features */
.features { padding: 140px clamp(16px, 5vw, 72px) 60px; max-width: 1250px; margin: 0 auto; }
.feature {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px);
  align-items: center; margin-bottom: 170px;
}
.feature.reverse .feature-copy { order: 2; }
.feature-copy p { color: var(--ink-2); font-size: 19px; }
.num { display: inline-block; font-family: var(--mono); color: var(--sky); font-size: 14px; margin-bottom: 18px; }
.feature-visual {
  position: relative; min-height: 360px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.caption { color: var(--ink-3); font-size: 13px; margin-top: 22px; }

.mini-notch {
  display: flex; gap: 30px; padding: 26px 36px 22px; background: #000;
  border-radius: 0 0 28px 28px; border: 1px solid rgba(255,255,255,0.06); border-top: none;
}
.mini-notch .ring { width: 64px; height: 64px; }
.mini-notch .cell b { font-size: 18px; }

/* Needs you */
.needs-visual .bezel { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #000; }
.needs-visual .pill { position: absolute; top: 0; left: 50%; width: 110px; height: 24px; margin-left: -55px; background: #000; border-radius: 0 0 12px 12px; }
.bead { position: absolute; top: 34px; left: 50%; margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; background: #000; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(242,255,0,0.7); }
.bead i { width: 8px; height: 8px; border-radius: 50%; background: #f2ff00; }
.term {
  width: min(430px, 88%); margin-top: 60px; border-radius: 14px; overflow: hidden;
  background: #0b0d12; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  transform-origin: 50% 0%;
}
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #151821; font-size: 12px; color: var(--ink-3); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; }
.term pre { margin: 0; padding: 16px 18px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--ink-2); white-space: pre-wrap; }
.term .dim { color: var(--good); }
.term .ask { color: #f2ff00; }

/* Approve */
.perm {
  position: relative; width: min(390px, 88%); padding: 20px; border-radius: 22px;
  background: #000; border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.perm-head { display: flex; gap: 12px; align-items: center; }
.perm-head .spark { font-size: 26px; color: #d97757; }
.perm-head b { display: block; font-size: 16px; }
.perm-head em { font-style: normal; color: var(--ink-3); font-size: 13px; }
.perm code { display: block; margin: 16px 0; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.08); font-size: 14px; }
.perm-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.perm-actions span { text-align: center; padding: 10px 0; border-radius: 999px; background: rgba(255,255,255,0.1); font-weight: 600; font-size: 14px; }
.perm-actions .muted { background: none; color: var(--ink-3); }
.perm-actions .allow { background: var(--blue); }
.perm-done {
  position: absolute; inset: 0; border-radius: 22px; display: grid; place-items: center;
  background: rgba(0,0,0,0.9); color: var(--good); font-weight: 700; font-size: 22px; opacity: 0;
}
.cursor {
  position: absolute; width: 22px; height: 22px; left: 72%; top: 85%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2l16 11-7 1.5L9.5 22z' fill='white' stroke='black' stroke-width='1.2'/></svg>") no-repeat;
  opacity: 0;
}

/* Forecast */
.forecast-visual { align-items: stretch; padding: 40px clamp(20px, 5vw, 50px); }
.fc-row { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 14px; }
.fc-time { color: var(--warn); opacity: 0; }
.fc-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(255,255,255,0.08); overflow: hidden; }
.fc-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 8px; }
.fc-fill { width: 0; background: linear-gradient(90deg, #ffb13d, #ff6a3d); }
.fc-ghost { width: 0; background: repeating-linear-gradient(135deg, rgba(255,106,61,0.45) 0 6px, transparent 6px 12px); }
.fc-scale { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12px; margin-top: 8px; }
.fc-pick { margin-top: 34px; padding: 14px 16px; border-radius: 14px; background: rgba(53,224,161,0.08); border: 1px solid rgba(53,224,161,0.25); font-size: 15px; opacity: 0; display: flex; gap: 10px; align-items: center; }

/* Builder */
.b-notch { position: relative; width: 300px; height: 90px; background: #000; border-radius: 0 0 30px 30px; margin-top: -60px; }
.b-spot { position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.3); }
.b-spot.l { left: -52px; top: 8px; } .b-spot.r { right: -52px; top: 8px; } .b-spot.s { left: 132px; bottom: -52px; }
.b-tray { display: flex; gap: 10px; margin-top: 90px; }
.chip { padding: 8px 14px; border-radius: 999px; background: #000; border: 1px solid rgba(255,255,255,0.14); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Plan */
.plan-card { width: min(400px, 88%); padding: 26px; border-radius: 22px; background: linear-gradient(160deg, rgba(53,224,161,0.12), rgba(255,255,255,0.03)); border: 1px solid rgba(53,224,161,0.25); }
.plan-top { display: flex; gap: 12px; align-items: center; }
.dollar { width: 34px; height: 34px; border-radius: 50%; background: var(--good); color: #062; display: grid; place-items: center; font-weight: 800; }
.plan-top b { display: block; } .plan-top em { font-style: normal; font-size: 13px; color: var(--ink-3); }
.plan-card p { color: var(--ink-2); margin: 20px 0 6px; }
.save { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: var(--good); line-height: 1; }
.save small { font-size: 18px; color: var(--ink-2); font-weight: 600; margin-left: 4px; letter-spacing: 0; }

/* Privacy */
.privacy { padding: 120px clamp(16px, 5vw, 72px); }
.privacy-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.privacy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 60px; text-align: left; }
.p-item { padding: 28px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.p-item b { display: block; font-size: 20px; margin-bottom: 8px; }
.p-item span { color: var(--ink-2); }

/* Pricing */
.pricing { padding: 120px 20px; }
.price-card {
  position: relative; max-width: 440px; margin: 0 auto; padding: 44px 36px 34px; text-align: center;
  border-radius: 30px; background: linear-gradient(180deg, #141824, #0b0d13);
  border: 1px solid rgba(122,215,255,0.25); overflow: hidden;
}
.price-glow { position: absolute; inset: -40% -20% auto; height: 70%; background: radial-gradient(closest-side, rgba(59,130,255,0.35), transparent); pointer-events: none; }
.price-card img { margin: 0 auto 14px; position: relative; }
.price-card h3 { position: relative; }
.amount { position: relative; margin: 8px 0 22px; }
.amount .price { font-size: 72px; font-weight: 800; letter-spacing: -0.05em; }
.amount small { color: var(--ink-3); margin-left: 6px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 28px; text-align: left; display: grid; gap: 10px; position: relative; }
.price-card li { padding-left: 30px; position: relative; color: var(--ink-2); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }
.price-card .btn + .btn { margin-top: 10px; }

/* FAQ */
.faq { padding: 80px 20px 120px; }
.faq-list { max-width: 780px; margin: 0 auto; }
details { border-bottom: 1px solid var(--line); padding: 22px 4px; }
summary { cursor: pointer; font-size: 19px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-3); font-size: 24px; line-height: 1; transition: transform .25s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--ink-2); margin: 14px 0 0; }

/* Final */
.final { text-align: center; padding: 120px 20px 160px; }
.final-icon { margin: 0 auto 30px; filter: drop-shadow(0 30px 60px rgba(47,107,255,0.45)); }
.final h2 { margin-bottom: 36px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 36px clamp(16px, 5vw, 72px) 50px; max-width: 1400px; margin: 0 auto; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer nav { display: flex; gap: 24px; }
.footer nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.legal { color: var(--ink-3); font-size: 13px; margin-top: 22px; max-width: 760px; }

/* Split text lines */
.split .line { overflow: hidden; }

/* Responsive */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 50px; }
  .hero-stage { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero { padding-top: 30px; }
  .screen { transform: none; }
  .feature, .feature.reverse { grid-template-columns: 1fr; margin-bottom: 110px; }
  .feature.reverse .feature-copy { order: 0; }
  .privacy-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .notch-cells { gap: 14px; padding: 0 16px 10px; }
  .ring { width: 34px; height: 34px; }
  .mini-notch { gap: 16px; padding: 20px 20px 16px; }
  .mini-notch .ring { width: 46px; height: 46px; }
  .tip { display: none; }
  .b-notch { width: 220px; }
  .b-spot.s { left: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}