:root {
  --bg: #030711;
  --bg-soft: #08101d;
  --panel: rgba(255, 255, 255, .06);
  --panel-strong: rgba(255, 255, 255, .09);
  --border: rgba(255, 255, 255, .08);
  --text: #f4f6fb;
  --muted: #a6b0c3;
  --accent: #67dce2;
  --accent-2: #7c6bff;
  --pink: #cf416f;
  --green: #3cd47f;
  --orange: #ff9f2f;
  --blue: #65a9ff;
  --header: rgba(3, 7, 17, .76);
  --shadow: 0 18px 60px rgba(0, 0, 0, .34);
  --radius: 26px;
  --container: 1180px;
  --header-h: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 74% 9%, rgba(184, 46, 94, .28), transparent 24%),
    radial-gradient(circle at 57% 30%, rgba(34, 178, 198, .12), transparent 20%),
    linear-gradient(180deg, #02050f 0%, #030711 38%, #02050f 100%);
  line-height: 1.45;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
.container { width: min(var(--container), calc(100% - 52px)); margin: 0 auto; }
.center { text-align: center; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--header);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}
.logo img { width: 34px; height: 34px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { color: #dbe3ef; transition: color .18s ease, opacity .18s ease; }
.nav a:hover, .nav a.active { color: #fff; }
.mobile-toggle {
  display: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  color: #fff;
  padding: 10px 12px;
}

.page { padding-top: 28px; }
.section { padding: 72px 0; }
.hero { padding: 70px 0 78px; }
.hero-grid, .waitlist-grid {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: 58px;
  align-items: center;
}
.hero-copy { padding: 10px 0; }
.hero h1, .page-hero h1 {
  margin: 0 0 28px;
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  line-height: .96;
  letter-spacing: -.025em;
}
.lead {
  margin: 0 0 40px;
  max-width: 560px;
  color: var(--muted);
  font-size: 1.32rem;
  line-height: 1.42;
}
.section-intro { margin-bottom: 28px; padding: 8px 0 22px; }
.section-heading {
  margin: 0 0 14px;
  font-size: clamp(2.45rem, 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}
.section-subtitle {
  margin: 0;
  color: #ced7e7;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  letter-spacing: .01em;
}
.button-row, .button-stack { display: flex; flex-wrap: wrap; gap: 16px; }
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 26px;
  border-radius: 14px;
  font-weight: 760;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 24px rgba(0,0,0,.18); filter: brightness(1.03); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.btn-primary { background: var(--accent); color: #051018; }
.btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn-dark { background: #030711; color: #fff; border-color: rgba(255,255,255,.08); }

.device-stage { position: relative; min-height: 430px; }
.hero-device-stage { opacity: 1; transform: none; }
.device-glow {
  position: absolute;
  inset: 5px 0 0;
  background:
    radial-gradient(circle at 76% 24%, rgba(198, 54, 100, .38), transparent 24%),
    radial-gradient(circle at 47% 72%, rgba(60, 205, 224, .24), transparent 19%);
  filter: blur(10px);
  pointer-events: none;
}
.device-stage .laptop-img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 86%;
  z-index: 1;
  filter: drop-shadow(0 20px 34px rgba(0,0,0,.28));
}
.device-stage .phone-angle {
  position: absolute;
  left: 0;
  top: 52%;
  transform: translateY(-50%);
  width: 33%;
  z-index: 2;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.38));
}

/* Feature showcase */
.feature-showcase-section { padding-top: 52px; scroll-margin-top: calc(var(--header-h) + 24px); }
.feature-stack { display: grid; gap: 18px; }
.showcase-row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.showcase-meta, .showcase-demo {
  border-radius: 22px;
  border: 1px solid rgba(103,220,226,.12);
  background: linear-gradient(180deg, rgba(6,12,24,.95), rgba(3,8,18,.92));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.showcase-meta { display: flex; padding: 22px 20px; align-items: center; }
.showcase-meta h3 { margin: 0 0 12px; font-size: 1.1rem; line-height: 1.2; letter-spacing: .01em; }
.showcase-meta p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.45; }
.showcase-demo { padding: 18px; display: grid; gap: 16px; overflow: hidden; }
.stat-card,
.simple-chart-card,
.insight-score-panel,
.insight-meaning-panel,
.study-v6-card,
.focus-forcefield-card,
.home-widget-preview,
.sync-icon-card {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(10,16,29,.98), rgba(6,11,21,.98));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}
.eyebrow { color: #dbe5f5; opacity: .92; font-size: .78rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow strong { color: #fff; }
.big-stat { font-size: clamp(2.05rem, 2.5vw, 2.6rem); line-height: 1; letter-spacing: -.01em; font-weight: 820; margin: 8px 0; }
.stat-positive { color: #4fe58b; font-weight: 700; }
.split-top { display: flex; justify-content: space-between; margin-top: 20px; }
.stat-card { padding: 18px; }
.reveal-card { opacity: 0; transform: translateX(18px); transition: opacity .55s ease .35s, transform .55s ease .35s; }
.full-picture-row.visible .reveal-card { opacity: 1; transform: translateX(0); }

/* Performance graph */
.simple-graph-demo { grid-template-columns: minmax(0, 1fr) 170px; align-items: stretch; }
.simple-chart-card { padding: 15px; }
.simple-chart-wrap { position: relative; min-height: 270px; overflow: hidden; border-radius: 15px; background: #050b15; }
.simple-chart-grid span, .simple-chart-vertical span { position: absolute; display: block; }
.simple-chart-grid span { left: 0; right: 0; height: 1px; background: rgba(106,128,162,.16); }
.simple-chart-grid span:nth-child(1) { top: 14%; }
.simple-chart-grid span:nth-child(2) { top: 36%; }
.simple-chart-grid span:nth-child(3) { top: 58%; }
.simple-chart-grid span:nth-child(4) { top: 80%; }
.simple-chart-vertical span { top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(to bottom, rgba(85,105,137,.18), rgba(85,105,137,.18) 5px, transparent 5px, transparent 12px); }
.simple-chart-vertical span:nth-child(1) { left: 17%; }
.simple-chart-vertical span:nth-child(2) { left: 49%; }
.simple-chart-vertical span:nth-child(3) { left: 79%; }
.simple-chart-axis span, .simple-chart-months span { position: absolute; z-index: 3; color: #8798b5; font-size: .82rem; font-weight: 650; }
.simple-chart-axis span { right: 7px; top: var(--top); transform: translateY(-50%); }
.simple-chart-months span { bottom: 10px; transform: translateX(-50%); }
.simple-chart-svg { position: absolute; inset: 22px 28px 28px 18px; width: calc(100% - 46px); height: calc(100% - 50px); overflow: visible; z-index: 2; }
.simple-line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.line-bio { stroke: #46d8e8; }
.line-chem { stroke: #7b67ff; }
.line-eng { stroke: #d74ff2; }
.simple-dots circle { stroke-width: 2; }
.bio-dots circle { fill: #46d8e8; stroke: #051019; }
.chem-dots circle { fill: #7b67ff; stroke: #051019; }
.eng-dots circle { fill: #d74ff2; stroke: #051019; }
.simple-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 13px 5px 0; color: #a9b7ca; font-size: .82rem; font-weight: 650; }
.simple-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.biology { background: #46d8e8; }
.legend-dot.chemistry { background: #7b67ff; }
.legend-dot.english { background: #d74ff2; }
.overall-stat-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; }

/* Insights */
.insight-v6-demo { grid-template-columns: minmax(240px, .82fr) minmax(0, 1.45fr); }
.insight-score-panel, .insight-meaning-panel { padding: 22px; }
.insight-score-panel-green { border-color: rgba(74, 213, 139, .2); background: linear-gradient(180deg, rgba(13,39,30,.72), rgba(7,17,19,.98)); }
.insight-v6-header { display: flex; gap: 13px; align-items: center; }
.insight-book-icon { width: 39px; height: 39px; border-radius: 11px; display: grid; place-items: center; background: rgba(73, 208, 137, .12); border: 1px solid rgba(73, 208, 137, .22); }
.insight-book-icon::before { content: ""; width: 18px; height: 21px; border: 2px solid #62dda1; border-radius: 3px; box-shadow: inset 6px 0 0 rgba(98,221,161,.12); }
.insight-v6-header h4 { margin: 0; font-size: 1rem; }
.insight-v6-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; color: #8f9bad; font-size: .74rem; }
.insight-v6-rule { height: 1px; margin: 20px 0; background: rgba(255,255,255,.075); }
.insight-v6-label { color: #8e9bad; font-size: .72rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.insight-v6-score-row { display: flex; align-items: center; justify-content: space-between; margin: 7px 0 16px; }
.insight-v6-score-row strong { font-size: 3.25rem; line-height: 1; letter-spacing: -.04em; }
.insight-grade { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; color: #8ef0b9; background: rgba(73,208,137,.1); border: 1px solid rgba(73,208,137,.22); font-weight: 820; }
.insight-score-track, .comparison-track, .study-week-progress, .weekly-goal-track { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.07); }
.insight-score-track > span { display: block; height: 100%; width: 94%; border-radius: inherit; background: linear-gradient(90deg, #49d087, #75e5b0); }
.insight-green-panel { border-color: rgba(73, 208, 137, .22); background: linear-gradient(180deg, rgba(20,42,34,.48), rgba(7,18,18,.96)); }
.insight-meaning-head { display: flex; align-items: center; gap: 13px; }
.insight-check-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; color: #79e8aa; border: 1px solid rgba(73,208,137,.72); background: rgba(73,208,137,.08); font-weight: 900; }
.insight-meaning-head h5 { margin: 4px 0 0; font-size: 1.16rem; }
.insight-meaning-copy { margin: 18px 0 22px; color: #aab7c8; line-height: 1.55; }
.insight-study-comparison { padding: 17px; border: 1px solid rgba(255,255,255,.06); border-radius: 16px; background: rgba(3,10,16,.42); }
.study-comparison-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.study-comparison-head span { display: block; color: #8e9bad; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.study-comparison-head strong { display: block; margin-top: 4px; font-size: .88rem; }
.study-comparison-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #7de4aa; background: rgba(73,208,137,.08); border: 1px solid rgba(73,208,137,.16); font-size: .7rem; font-weight: 760; }
.study-comparison-bars { display: grid; gap: 13px; margin-top: 18px; }
.comparison-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: #9aa8ba; font-size: .74rem; }
.comparison-label strong { color: #d9e4ef; }
.comparison-track > span { display: block; height: 100%; border-radius: inherit; }
.current-prep .comparison-track > span { width: 100%; background: linear-gradient(90deg, #49d087, #72e7b0); }
.usual-prep .comparison-track > span { width: 62%; background: #506172; }

/* Study streak */
.study-v6-demo { display: block; }
.study-v6-card { display: grid; grid-template-columns: 230px 1fr; min-height: 225px; overflow: hidden; }
.study-streak-summary { padding: 27px; border-right: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; justify-content: center; }
.study-streak-title { display: flex; align-items: center; gap: 10px; color: #cbd5e4; font-size: .86rem; font-weight: 760; }
.flame-icon { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 0 9px rgba(255,137,31,.24)); }
.study-streak-number { display: flex; align-items: baseline; gap: 8px; margin-top: 13px; }
.study-streak-number strong { font-size: 4.3rem; line-height: .92; letter-spacing: -.055em; }
.study-streak-number span { color: #ff9f2f; font-weight: 780; }
.study-streak-summary p { margin: 11px 0 0; color: #929dad; font-size: .86rem; }
.study-week-panel { padding: 27px 30px; display: flex; flex-direction: column; justify-content: center; }
.study-week-heading { display: flex; justify-content: space-between; gap: 15px; color: #929dad; font-size: .8rem; }
.study-week-heading strong { color: #dce5ef; }
.study-week-days { display: grid; grid-template-columns: repeat(7, minmax(28px,1fr)); gap: 8px; margin-top: 18px; }
.week-day { display: grid; gap: 8px; justify-items: center; }
.week-day label { color: #7f8b9c; font-size: .72rem; font-weight: 760; }
.week-day > span { position: relative; display: flex; width: 100%; max-width: 45px; height: 67px; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 11px; background: rgba(255,255,255,.045); }
.week-fill { position: absolute; inset: 0; transform-origin: bottom; background: linear-gradient(180deg, #ffb03d, #ff7a1a); }
.week-tick { position: relative; z-index: 1; margin-bottom: 9px; color: #fff4df; font-size: .75rem; }
.study-week-progress { margin-top: 17px; height: 6px; }
.study-week-progress > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8e22, #ffc148); }

/* Focus restrictions */
.focus-v7-demo { display: block; padding: 16px; }
.focus-forcefield-card { min-height: 300px; border-color: rgba(92,224,145,.13); background: radial-gradient(circle at 50% 50%, rgba(72,210,128,.11), transparent 28%), linear-gradient(180deg, rgba(8,17,27,.98), rgba(5,11,20,.98)); overflow: hidden; position: relative; }
.focus-forcefield-stage { position: relative; min-height: 300px; display: grid; grid-template-columns: minmax(150px,1fr) 190px minmax(150px,1fr); align-items: center; gap: 22px; padding: 30px 7%; isolation: isolate; }
.focus-forcefield-stage::before { content: ""; position: absolute; inset: 14% 17%; border-radius: 50%; background: radial-gradient(circle, rgba(78,222,139,.08), transparent 62%); filter: blur(10px); z-index: -2; }
.forcefield-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(96,224,147,.18); transform: translate(-50%,-50%) scale(.88); opacity: .45; pointer-events: none; box-shadow: inset 0 0 24px rgba(62,209,123,.04), 0 0 24px rgba(62,209,123,.04); }
.forcefield-ring-outer { width: 430px; height: 230px; }
.forcefield-ring-inner { width: 300px; height: 170px; border-color: rgba(96,224,147,.26); }
.focus-lock-core { position: relative; width: 174px; height: 174px; display: grid; place-items: center; justify-self: center; z-index: 2; }
.focus-lock-aura { position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgba(75,221,137,.19), rgba(75,221,137,.035) 52%, transparent 70%); box-shadow: 0 0 40px rgba(73,214,134,.14); }
.focus-lock-svg-v7 { position: relative; z-index: 2; width: 126px; height: 144px; overflow: visible; }
.lock-shackle-v7 { fill: none; stroke: #58d88f; stroke-width: 12; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(76,218,139,.18)); }
.lock-body-v7 { fill: #35cc7b; filter: drop-shadow(0 12px 20px rgba(36,180,103,.2)); }
.lock-keyhole-v7, .lock-key-stem-v7 { fill: #08351f; }
.focus-satellite { position: relative; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 13px 15px; border-radius: 15px; border: 1px solid rgba(86,222,143,.14); background: rgba(8,20,24,.72); box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.focus-apps-satellite { justify-self: end; }
.focus-sites-satellite { justify-self: start; }
.satellite-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgba(73,208,137,.1); }
.satellite-icon svg { width: 18px; height: 18px; fill: none; stroke: #71e3a6; stroke-width: 1.7; }
.focus-satellite strong, .focus-satellite small { display: block; }
.focus-satellite strong { color: #e2ebf2; font-size: .82rem; }
.focus-satellite small { margin-top: 2px; color: #70dda2; font-size: .68rem; font-weight: 750; }
.focus-v7-row.forcefield-active .forcefield-ring-outer { animation: fieldPulse 2.2s ease-in-out infinite; }
.focus-v7-row.forcefield-active .forcefield-ring-inner { animation: fieldPulse 2.2s ease-in-out .25s infinite; }
.focus-v7-row.forcefield-active .focus-lock-aura { animation: auraPulse 2s ease-in-out infinite; }
@keyframes fieldPulse { 0%,100% { opacity:.36; transform:translate(-50%,-50%) scale(.9); } 50% { opacity:.86; transform:translate(-50%,-50%) scale(1.03); } }
@keyframes auraPulse { 0%,100% { transform:scale(.94); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }

/* Widgets */
.widgets-v7-demo { display: block; padding: 17px; }
.widget-preview-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(220px,.75fr); gap: 16px; }
.home-widget-preview { position: relative; min-height: 218px; padding: 23px; overflow: hidden; background: radial-gradient(circle at 90% 0%, rgba(89,130,255,.18), transparent 38%), linear-gradient(180deg, rgba(11,19,36,.99), rgba(7,12,23,.99)); }
.widget-preview-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.widget-preview-header strong, .subject-widget-title { font-size: 1rem; }
.widget-preview-header span { color: #8fa1b6; font-size: .74rem; font-weight: 720; }
.weekly-goal-main { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-top: 36px; }
.weekly-goal-copy strong { display: block; font-size: 2.2rem; line-height: 1; letter-spacing: -.035em; }
.weekly-goal-copy span { display: block; margin-top: 7px; color: #8797aa; }
.weekly-goal-percent { color: #72b0ff; font-size: 1.45rem; font-weight: 820; }
.weekly-goal-track { margin-top: 22px; height: 10px; }
.weekly-goal-track > span { display: block; width: 73%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #48d7e7, #6d7dff); }
.weekly-goal-scale { display: flex; justify-content: space-between; margin-top: 7px; color: #647389; font-size: .66rem; }
.subject-average-widget { display: flex; flex-direction: column; }
.subject-widget-ring-wrap { position: relative; display: grid; width: 145px; height: 145px; place-items: center; margin: auto; }
.subject-widget-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.subject-ring-track, .subject-ring-progress, .subject-ring-comparison { fill: none; cx: 60; cy: 60; r: 46; }
.subject-ring-track { stroke: rgba(255,255,255,.07); stroke-width: 10; }
.subject-ring-progress { stroke: url(#subjectRingGradient); stroke-width: 10; stroke-linecap: round; }
.subject-ring-comparison { stroke: rgba(255,255,255,.43); stroke-width: 3; stroke-linecap: round; }
.subject-widget-ring-wrap > strong { position: absolute; font-size: 1.6rem; }

/* Sync */
.sync-v9-demo { display: block; padding: 16px; }
.sync-icon-card { min-height: 310px; display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; gap: 18px; padding: 24px 6%; background: radial-gradient(circle at 50% 50%, rgba(80,120,235,.1), transparent 30%), linear-gradient(180deg, rgba(8,15,29,.98), rgba(5,10,20,.98)); }
.sync-icon-node { display: grid; justify-items: center; gap: 10px; color: #cfd9e6; font-size: .85rem; }
.sync-device-icon { display: grid; place-items: center; color: #94aef0; filter: drop-shadow(0 0 12px rgba(86,132,235,.18)); }
.sync-device-icon svg { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mac-icon svg { width: 112px; height: 94px; }
.phone-icon svg { width: 64px; height: 110px; }
.sync-loop-stage { position: relative; width: 280px; height: 226px; display: grid; place-items: center; }
.sync-loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sync-loop-arrow { fill: none; stroke: url(#syncArrowGradient); stroke-width: 5.25; stroke-linecap: butt; filter: drop-shadow(0 0 7px rgba(83,146,255,.26)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.sync-loop-arrow-tip { fill: url(#syncArrowGradient); stroke: none; opacity: 0; filter: drop-shadow(0 0 7px rgba(83,146,255,.3)); }
.sync-cloud-icon { position: relative; z-index: 2; display: grid; width: 112px; height: 78px; place-items: center; }
.sync-cloud-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(92,126,221,.22); stroke: #7197ee; stroke-width: 2; filter: drop-shadow(0 0 15px rgba(82,125,235,.22)); }
.sync-cloud-icon span { position: relative; z-index: 2; color: #a5c1ff; font-size: 1.5rem; font-weight: 850; }
.sync-simple-status { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 13px; color: #8f9eb2; font-size: .78rem; }
.sync-simple-status > span { width: 7px; height: 7px; border-radius: 50%; background: #64dba0; box-shadow: 0 0 10px rgba(100,219,160,.45); }
.sync-v9-row.visible .sync-loop-arrow-top { animation: syncArrowDraw .9s cubic-bezier(.2,.75,.25,1) .45s forwards; }
.sync-v9-row.visible .sync-loop-arrow-bottom { animation: syncArrowDraw .9s cubic-bezier(.2,.75,.25,1) .62s forwards; }
.sync-v9-row.visible .sync-loop-arrow-tip-top { animation: syncArrowheadReveal .16s ease-out 1.24s forwards; }
.sync-v9-row.visible .sync-loop-arrow-tip-bottom { animation: syncArrowheadReveal .16s ease-out 1.41s forwards; }
@keyframes syncArrowDraw { to { stroke-dashoffset: 0; } }
@keyframes syncArrowheadReveal { to { opacity: 1; } }

/* Pre-pricing call to action */
.pre-pricing-cta-section { padding-top: 80px; padding-bottom: 28px; }
.launch-cta { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 29px 31px; border: 1px solid rgba(103,220,226,.12); border-radius: 24px; background: radial-gradient(circle at 0% 50%, rgba(103,220,226,.08), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022)); }
.launch-cta-mark { width: 54px; height: 54px; padding: 10px; border-radius: 16px; background: rgba(103,220,226,.08); border: 1px solid rgba(103,220,226,.12); }
.launch-cta-copy h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.launch-cta-copy p { margin: 6px 0 0; color: #94a1b3; }
.launch-cta-button { min-height: 51px; background: rgba(103,220,226,.95); color: #041018; }

/* Pricing v3 */
.pricing-v3 { padding: 82px 0 96px; }
.pricing-v3 .pricing-intro { max-width: 920px; margin: 0 auto; padding: 0 0 34px; }
.pricing-v3 .pricing-heading { margin: 0 auto 16px; }
.pricing-v3 .pricing-subtitle { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 1.08rem; line-height: 1.55; }
.pricing-v3-shell { max-width: 1120px; margin: 0 auto; }
.pricing-v3-cards { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: 18px; align-items: stretch; }
.pricing-v3-card { position: relative; display: flex; min-width: 0; flex-direction: column; overflow: hidden; padding: 31px 32px 29px; border: 1px solid rgba(255,255,255,.075); border-radius: 25px; background: linear-gradient(180deg, rgba(255,255,255,.046), rgba(255,255,255,.024)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.pricing-v3-card::after { content: ""; position: absolute; right: -100px; bottom: -145px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.065), transparent 68%); pointer-events: none; }
.pricing-v3-premium { border-color: rgba(103,220,226,.22); background: radial-gradient(circle at 94% 5%, rgba(103,220,226,.13), transparent 33%), linear-gradient(135deg, rgba(31,58,88,.72), rgba(27,24,69,.62)); box-shadow: inset 0 0 0 1px rgba(103,220,226,.035), 0 22px 56px rgba(0,0,0,.18); }
.pricing-v3-card-head { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pricing-v3-label { display: block; color: #8f9db1; font-size: .73rem; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.pricing-v3-premium .pricing-v3-label { color: #8eeef3; }
.pricing-v3-card h3 { margin: 7px 0 0; color: #fff; font-size: clamp(1.8rem,2.7vw,2.55rem); line-height: 1.04; letter-spacing: -.025em; }
.pricing-v3-price { display: grid; flex: 0 0 auto; justify-items: end; text-align: right; }
.pricing-v3-price strong { color: #fff; font-size: clamp(2.15rem,3.6vw,3.45rem); line-height: .88; letter-spacing: -.045em; }
.pricing-v3-premium .pricing-v3-price strong { color: #b9fbff; text-shadow: 0 0 20px rgba(103,220,226,.17); }
.pricing-v3-price span { margin-top: 8px; color: #98a5b9; font-size: .78rem; font-weight: 750; }
.pricing-v3-description { position: relative; z-index: 1; max-width: 680px; margin: 24px 0 0; color: #adb9cc; font-size: .96rem; line-height: 1.52; }
.pricing-v3-list { position: relative; z-index: 1; display: grid; gap: 13px; margin: 25px 0 0; padding: 0; list-style: none; }
.pricing-v3-list li { position: relative; padding-left: 28px; color: #dce5f1; font-size: .9rem; font-weight: 650; line-height: 1.4; }
.pricing-v3-list li::before { content: "✓"; position: absolute; top: .02em; left: 0; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(103,220,226,.2); border-radius: 50%; background: rgba(103,220,226,.08); color: #83edf2; font-size: .7rem; font-weight: 900; }
.pricing-v3-premium-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin-top: 25px; }
.pricing-v3-premium-grid > div { position: relative; min-width: 0; padding: 18px 17px 17px 52px; border: 1px solid rgba(103,220,226,.105); border-radius: 17px; background: rgba(3,11,24,.25); }
.pricing-v3-icon { position: absolute; top: 17px; left: 16px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(103,220,226,.18); border-radius: 9px; background: rgba(103,220,226,.09); color: #9bf3f6; font-size: .78rem; font-weight: 850; }
.pricing-v3-premium-grid strong { display: block; color: #eaf2fb; font-size: .88rem; line-height: 1.25; }
.pricing-v3-premium-grid p { margin: 6px 0 0; color: #91a0b6; font-size: .76rem; line-height: 1.42; }

/* Footer and utility pages */
.site-footer { margin-top: 72px; background: rgba(255,255,255,.03); border-top: 1px solid rgba(255,255,255,.06); }
.footer-inner { padding: 34px 0 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22px; }
.footer-copy { color: #d7dde8; font-size: .95rem; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: #fff; }
.page-hero { padding: 60px 0 48px; }
.glass-card, .legal-card { border-radius: 30px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); box-shadow: var(--shadow); }
.glass-card { padding: 44px; }
.form-stack { display: grid; gap: 18px; margin-top: 30px; }
.field { display: grid; gap: 10px; }
.field label { font-weight: 700; }
.field input, .field textarea { width: 100%; min-height: 56px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: #f3f4f6; color: #111827; }
.field textarea { min-height: 180px; resize: vertical; }
.form-note { color: var(--muted); font-size: .95rem; }
.waitlist-phone { width: min(340px,78%); margin: 0 auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,.26)); }
.waitlist-status { min-height: 24px; margin: 0; font-size: .98rem; font-weight: 700; line-height: 1.45; }
.waitlist-status.success { color: #58e3a1; }
.waitlist-status.error { color: #ff9f9f; }
.accent-text { color: #d9fdff; }

/* Support */
.support-page-section { padding-top: 58px; }
.support-page-layout { display: grid; gap: 20px; max-width: 1080px; }
.support-hero-card { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 34px; align-items: center; padding: 42px; background: radial-gradient(circle at 95% 0%, rgba(103,220,226,.13), transparent 34%), linear-gradient(145deg, rgba(13,24,43,.96), rgba(8,12,25,.96)); }
.support-kicker, .support-resource-label, .support-contact-label { display: block; color: #8feaf0; font-size: .72rem; font-weight: 820; letter-spacing: .105em; text-transform: uppercase; }
.support-hero-copy h1 { margin: 9px 0 16px; font-size: clamp(2.55rem,5vw,4.6rem); line-height: .98; letter-spacing: -.025em; }
.support-hero-copy p { max-width: 650px; margin: 0; color: #aeb9cb; font-size: 1.08rem; line-height: 1.62; }
.support-contact-panel { padding: 23px; border: 1px solid rgba(103,220,226,.16); border-radius: 20px; background: rgba(2,9,19,.52); }
.support-contact-panel a { display: inline-block; margin-top: 8px; color: #e3fdff; font-size: clamp(1.05rem,2vw,1.28rem); font-weight: 780; overflow-wrap: anywhere; }
.support-contact-panel p { margin: 13px 0 0; color: #8f9db1; font-size: .88rem; line-height: 1.52; }
.support-resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.support-resource-card { display: flex; min-width: 0; flex-direction: column; padding: 28px; border: 1px solid rgba(255,255,255,.07); border-radius: 22px; background: linear-gradient(180deg, rgba(9,16,29,.94), rgba(5,10,20,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.support-resource-card-wide { grid-column: 1 / -1; }
.support-resource-heading { display: flex; gap: 14px; align-items: flex-start; }
.support-resource-icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(103,220,226,.17); border-radius: 12px; background: rgba(103,220,226,.08); color: #a2f7fa; font-size: 1rem; font-weight: 850; }
.support-resource-card h2 { margin: 5px 0 0; font-size: 1.35rem; line-height: 1.18; letter-spacing: -.01em; }
.support-resource-card > p { margin: 20px 0 0; color: #99a6b9; font-size: .96rem; line-height: 1.58; }
.support-check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 28px; margin: 25px 0 0; padding: 0; list-style: none; }
.support-check-list li { position: relative; padding-left: 25px; color: #a8b5c7; font-size: .92rem; line-height: 1.52; }
.support-check-list li::before { content: "✓"; position: absolute; left: 0; top: .04em; color: #79e8ed; font-weight: 850; }
.support-check-list strong { color: #edf6ff; }
.support-text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding-top: 24px; color: #9af3f6; font-weight: 760; }
.support-text-link span { transition: transform .18s ease; }
.support-text-link:hover span { transform: translateX(3px); }

/* Legal documents */
.legal-page-section { padding-top: 54px; }
.legal-page-container { max-width: 1040px; }
.legal-card { padding: clamp(28px,5vw,58px); }
.legal-document { overflow: hidden; }
.legal-document-header { padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.08); }
.legal-eyebrow { display: block; color: #8feaf0; font-size: .75rem; font-weight: 820; letter-spacing: .11em; text-transform: uppercase; }
.legal-document h1 { margin: 9px 0 26px; font-size: clamp(2.7rem,5vw,4.7rem); line-height: 1; letter-spacing: -.025em; }
.legal-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.07); border-radius: 17px; background: rgba(255,255,255,.07); }
.legal-meta-row { min-width: 0; padding: 13px 16px; background: rgba(4,10,21,.9); }
.legal-meta dt { margin: 0; color: #7f8da2; font-size: .68rem; font-weight: 790; letter-spacing: .08em; text-transform: uppercase; }
.legal-meta dd { margin: 4px 0 0; color: #dce5f1; font-size: .9rem; font-weight: 650; overflow-wrap: anywhere; }
.legal-document a { color: #a0f4f7; text-decoration: underline; text-decoration-color: rgba(160,244,247,.34); text-underline-offset: 3px; }
.legal-intro { display: grid; gap: 14px; margin-top: 28px; padding: 24px 25px; border-left: 3px solid rgba(103,220,226,.62); border-radius: 0 15px 15px 0; background: rgba(103,220,226,.05); }
.legal-intro:empty { display: none; }
.legal-intro p { margin: 0; }
.legal-section { padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.legal-section:last-of-type { border-bottom: 0; }
.legal-section h2 { margin: 0 0 18px; color: #f3f7fd; font-size: clamp(1.45rem,2.7vw,2rem); line-height: 1.22; letter-spacing: -.012em; }
.legal-section h2 span { color: #77e2e7; }
.legal-subsection { margin-top: 27px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.055); border-radius: 16px; background: rgba(3,9,19,.36); }
.legal-subsection h3 { margin: 0 0 12px; color: #dfe8f5; font-size: 1rem; letter-spacing: .01em; }
.legal-section p, .legal-section li, .legal-intro p { color: #aab5c6; font-size: 1rem; line-height: 1.72; }
.legal-section p { margin: 0 0 15px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { display: grid; gap: 8px; margin: 15px 0 19px; padding-left: 23px; }
.legal-section li::marker { color: #72dfe5; }
.legal-section strong, .legal-intro strong { color: #edf5ff; }
.back-link { display: inline-flex; margin-top: 30px; color: var(--accent); font-weight: 750; text-decoration: none !important; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .hero-grid, .waitlist-grid { grid-template-columns: 1fr; }
  .device-stage { min-height: 420px; }
  .device-stage .laptop-img { width: 88%; right: 0; }
  .device-stage .phone-angle { width: 35%; left: 0; }
  .showcase-row { grid-template-columns: 1fr; }
  .nav { position: absolute; top: calc(100% + 10px); left: 24px; right: 24px; display: none; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; border-radius: 18px; background: rgba(4,8,18,.98); border: 1px solid rgba(255,255,255,.06); box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .mobile-toggle { display: inline-flex; }
  .focus-forcefield-stage { grid-template-columns: 1fr 170px 1fr; padding-left: 3%; padding-right: 3%; }
  .sync-icon-card { grid-template-columns: 1fr 270px 1fr; padding-left: 3%; padding-right: 3%; }
  .pricing-v3-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .section, .hero, .page-hero { padding-top: 42px; padding-bottom: 42px; }
  .lead, .section-subtitle, .legal-card p, .legal-card li, .support-section p, .support-section li { font-size: 1rem; }
  .button-row, .button-stack { flex-direction: column; }
  .btn { width: 100%; }
  .showcase-demo, .simple-graph-demo, .insight-v6-demo, .widget-preview-layout { grid-template-columns: 1fr; }
  .device-stage { min-height: 320px; }
  .device-stage .laptop-img { width: 100%; right: 0; top: 54%; }
  .device-stage .phone-angle { width: 40%; left: -1%; top: 55%; }
  .simple-chart-wrap { min-height: 225px; }
  .study-v6-card { grid-template-columns: 1fr; }
  .study-streak-summary { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .study-week-panel { padding: 24px 18px; }
  .study-week-days { gap: 5px; }
  .week-day > span { height: 52px; }
  .focus-forcefield-stage { grid-template-columns: 1fr; padding: 28px 20px; }
  .focus-apps-satellite, .focus-sites-satellite { justify-self: center; width: min(240px,100%); }
  .focus-lock-core { order: -1; }
  .forcefield-ring-outer { width: 310px; height: 210px; }
  .forcefield-ring-inner { width: 220px; height: 150px; }
  .sync-icon-card { grid-template-columns: 1fr; min-height: 0; padding: 28px 20px; }
  .sync-loop-stage { width: 250px; height: 200px; margin: 0 auto; }
  .sync-mac-node, .sync-phone-node { grid-template-columns: auto auto; justify-content: center; align-items: center; }
  .mac-icon svg { width: 86px; height: 70px; }
  .phone-icon svg { width: 48px; height: 82px; }
  .launch-cta { grid-template-columns: 1fr; text-align: center; padding: 30px 22px; }
  .launch-cta-mark { margin: 0 auto; }
  .launch-cta-button { width: 100%; }
  .pricing-v3 { padding: 62px 0 72px; }
  .pricing-v3 .pricing-intro { padding-bottom: 27px; }
  .pricing-v3-card { padding: 25px 21px 23px; }
  .pricing-v3-card-head { align-items: flex-start; }
  .pricing-v3-price strong { font-size: 2.2rem; }
  .pricing-v3-premium-grid { grid-template-columns: 1fr; }
  .pricing-v3-heading { font-size: 2.35rem; }
  .glass-card, .legal-card { padding: 22px; }
  .support-hero-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 23px; }
  .support-resource-grid, .support-check-list { grid-template-columns: 1fr; }
  .support-resource-card-wide { grid-column: auto; }
  .legal-meta { grid-template-columns: 1fr; }
  .legal-section { padding: 27px 0; }
  .legal-subsection { padding: 18px; }
  .footer-inner { flex-direction: column; }
}

@media (max-width: 480px) {
  .pricing-v3-card-head { gap: 12px; }
  .pricing-v3-card h3 { font-size: 1.55rem; }
  .pricing-v3-price strong { font-size: 1.95rem; }
  .pricing-v3-price span { font-size: .7rem; }
  .study-week-heading { flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* =========================================================
   Support + Legal refresh v25
   ========================================================= */
.support-page-layout-v2 {
  display: grid;
  gap: 22px;
  max-width: 1080px;
}

.support-hero-surface {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .72fr);
  gap: 34px;
  align-items: end;
  padding: 42px;
  background:
    radial-gradient(circle at 100% 0%, rgba(103,220,226,.12), transparent 32%),
    linear-gradient(145deg, rgba(11,20,36,.95), rgba(6,11,22,.95));
}

.support-hero-main h1 {
  margin: 10px 0 16px;
  font-size: clamp(2.6rem, 5vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.025em;
}

.support-hero-main p {
  max-width: 720px;
  margin: 0;
  color: #aeb9cb;
  font-size: 1.06rem;
  line-height: 1.62;
}

.support-contact-inline {
  min-width: 0;
  padding: 0;
  align-self: center;
}

.support-contact-inline a {
  display: inline-block;
  margin-top: 9px;
  color: #f3fdff;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  font-weight: 790;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.support-contact-inline p {
  margin: 13px 0 0;
  max-width: 340px;
  color: #96a3b6;
  font-size: .94rem;
  line-height: 1.55;
}

.support-policy-hub {
  padding: 34px;
  background: linear-gradient(180deg, rgba(9,16,29,.94), rgba(5,10,20,.94));
}

.support-policy-intro {
  max-width: 760px;
  margin-bottom: 22px;
}

.support-policy-intro h2 {
  margin: 8px 0 12px;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.018em;
}

.support-policy-intro p {
  margin: 0;
  color: #a5b1c3;
  font-size: 1rem;
  line-height: 1.62;
}

.policy-nav-large {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.policy-nav-card {
  display: flex;
  min-width: 0;
  min-height: 218px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.policy-nav-card:hover {
  transform: translateY(-3px);
  border-color: rgba(103,220,226,.24);
  background: linear-gradient(180deg, rgba(103,220,226,.08), rgba(255,255,255,.02));
}

.policy-nav-eyebrow {
  display: block;
  color: #8feaf0;
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.policy-nav-card strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 1.36rem;
  line-height: 1.14;
  letter-spacing: -.01em;
}

.policy-nav-card p {
  margin: 14px 0 0;
  color: #98a6ba;
  font-size: .94rem;
  line-height: 1.56;
}

.policy-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
  color: #a0f4f7;
  font-weight: 760;
}

.policy-nav-cta span {
  transition: transform .18s ease;
}

.policy-nav-card:hover .policy-nav-cta span {
  transform: translateX(3px);
}

.support-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.support-simple-card {
  padding: 28px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(9,16,29,.94), rgba(5,10,20,.94));
}

.support-simple-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.support-simple-list li {
  position: relative;
  padding-left: 24px;
  color: #a8b5c7;
  font-size: .95rem;
  line-height: 1.56;
}

.support-simple-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #7ee8ee;
  font-size: 1.05rem;
  line-height: 1.35;
}

.legal-page-container {
  max-width: 980px;
}

.legal-card.legal-document {
  padding: clamp(28px, 4.8vw, 54px);
  background: linear-gradient(180deg, rgba(10,17,30,.97), rgba(6,11,22,.97));
}

.legal-document-header {
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.legal-document h1 {
  margin: 10px 0 18px;
}

.legal-meta-text {
  display: grid;
  gap: 8px;
  margin: 0;
}

.legal-meta-text p {
  margin: 0;
  color: #aab5c6;
  font-size: .96rem;
  line-height: 1.58;
}

.legal-meta-text strong {
  color: #e8f1fb;
  font-weight: 760;
  margin-right: .4rem;
}

.legal-intro {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.policy-nav-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.policy-pill {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  color: #cbd6e6;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}

.policy-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(103,220,226,.25);
  color: #fff;
}

.policy-pill.is-active {
  border-color: rgba(103,220,226,.24);
  background: rgba(103,220,226,.12);
  color: #f4fdff;
}

.legal-section {
  padding: 30px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.legal-section h2 {
  margin: 0 0 16px;
  color: #f3f7fd;
  font-size: clamp(1.45rem, 2.5vw, 1.95rem);
  line-height: 1.22;
  letter-spacing: -.012em;
}

.legal-section h2 span {
  color: inherit;
  margin-right: .32em;
}

.legal-section p,
.legal-section li,
.legal-intro p {
  color: #aab5c6;
  font-size: 1rem;
  line-height: 1.72;
}

.legal-subsection {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.legal-subsection h3 {
  margin: 0 0 12px;
  color: #edf4fd;
  font-size: 1.02rem;
  line-height: 1.4;
}

.legal-section ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 18px;
  padding-left: 22px;
}

.legal-section li::marker {
  color: #dce7f3;
}

@media (max-width: 900px) {
  .support-hero-surface,
  .policy-nav-large,
  .support-help-grid {
    grid-template-columns: 1fr;
  }

  .policy-nav-card {
    min-height: 0;
  }
}

@media (max-width: 720px) {
  .support-hero-surface {
    padding: 28px 23px;
  }

  .support-policy-hub,
  .support-simple-card {
    padding: 24px 22px;
  }

  .support-contact-inline p {
    max-width: none;
  }

  .policy-nav-inline {
    gap: 9px;
  }
}


/* =========================================================
   Site v26 refinements
   ========================================================= */

/* Restore the larger study-streak layout and boxes. */
.study-v6-card.study-streak-wide {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 0;
  min-height: 270px;
}

.study-streak-wide .study-streak-summary {
  padding: 30px 28px;
  border-right: 1px solid rgba(255,255,255,.07);
}

.study-streak-wide .study-streak-title {
  color: #f2f5fa;
  font-size: 1rem;
}

.study-streak-wide .study-streak-number {
  margin-top: 17px;
  align-items: flex-end;
}

.study-streak-wide .study-streak-number strong {
  color: #ff8b20;
  font-size: 5.2rem;
  line-height: .84;
}

.study-streak-wide .study-streak-number span {
  padding-bottom: 5px;
  color: #ff9f2f;
  font-size: 1.35rem;
}

.study-streak-wide .study-week-panel {
  width: 100%;
  padding: 30px 32px;
}

.study-streak-wide .study-week-heading {
  align-items: center;
}

.study-streak-wide .study-week-heading strong {
  color: #ff9f2f;
}

.study-streak-wide .study-week-days {
  gap: 12px;
  margin-top: 20px;
}

.study-streak-wide .week-day {
  min-width: 0;
}

.study-streak-wide .week-day > span {
  width: 100%;
  max-width: none;
  height: 88px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,121,20,.55);
  border-radius: 16px;
  background: rgba(255,121,20,.08);
  box-shadow: none;
}

.study-streak-wide .week-fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  background: linear-gradient(180deg, #ff962e, #ff7410);
  transform-origin: bottom;
}

.study-streak-wide .week-tick {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(91,35,0,.28);
}

.study-streak-wide .study-week-progress > span {
  background: #ff7914;
}

/* The simplified support policy section no longer needs introductory copy. */
.support-policy-intro {
  margin-bottom: 22px;
}

.support-policy-intro h2 {
  margin: 0;
}

@media (max-width: 760px) {
  .study-v6-card.study-streak-wide {
    grid-template-columns: 1fr;
  }

  .study-streak-wide .study-streak-summary {
    padding: 25px 23px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .study-streak-wide .study-week-panel {
    padding: 25px 22px;
  }

  .study-streak-wide .study-week-days {
    gap: 6px;
  }

  .study-streak-wide .week-day > span {
    height: 58px;
    border-radius: 12px;
  }

  .study-streak-wide .week-tick {
    font-size: 1rem;
  }
}


/* =========================================================
   Site v27 — responsive composition and iPhone layout
   ========================================================= */

html {
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  overflow-x: clip;
}

.hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
  gap: clamp(34px, 5vw, 72px);
}

.hero-copy,
.device-stage,
.device-composition {
  min-width: 0;
}

.device-stage {
  display: grid;
  width: 100%;
  min-height: 0;
  place-items: center;
}

/*
  The two device images are positioned inside one fixed-ratio canvas.
  Only this canvas scales, so the phone can no longer drift away from
  the laptop when the viewport changes shape.
*/
.device-composition {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1.28 / 1;
}

.device-composition .device-glow {
  position: absolute;
  inset: 3% -2% -2%;
}

.device-stage .laptop-img {
  position: absolute;
  top: 50%;
  right: 0;
  width: 87%;
  height: auto;
  transform: translateY(-50%);
}

.device-stage .phone-angle {
  position: absolute;
  top: 57.5%;
  left: 5.5%;
  width: 32%;
  height: auto;
  transform: translateY(-50%);
}

/* Tablet portrait: keep the device composition centred beneath the copy. */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-copy {
    max-width: 700px;
  }

  .device-composition {
    width: min(100%, 700px);
  }
}

/* Wide, short screens—including iPhone landscape—retain a compact two-column hero. */
@media (min-width: 720px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
    gap: clamp(24px, 4vw, 46px);
    align-items: center;
  }

  .hero h1 {
    font-size: clamp(3rem, 7vw, 4.25rem);
  }

  .lead {
    margin-bottom: 28px;
    font-size: 1.08rem;
  }

  .button-row {
    gap: 12px;
  }

  .btn {
    min-height: 54px;
    padding-inline: 20px;
  }

  .device-composition {
    width: min(100%, 540px);
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 70px;
  }

  .container {
    width: min(var(--container), calc(100% - 32px));
  }

  .site-header {
    height: var(--header-h);
  }

  .logo {
    gap: 9px;
    font-size: 1.28rem;
  }

  .logo img {
    width: 30px;
    height: 30px;
  }

  .mobile-toggle {
    padding: 9px 11px;
  }

  .nav {
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    max-height: calc(100vh - var(--header-h) - 24px);
    overflow-y: auto;
  }

  .page {
    padding-top: 8px;
  }

  .hero {
    padding-top: 36px;
    padding-bottom: 54px;
  }

  .hero-grid {
    gap: 28px;
  }

  .hero-copy {
    max-width: none;
    text-align: center;
  }

  .hero h1,
  .page-hero h1 {
    margin-bottom: 18px;
    font-size: clamp(3rem, 15vw, 4.15rem);
    line-height: .95;
  }

  .lead {
    max-width: 420px;
    margin: 0 auto 28px;
    font-size: clamp(1.03rem, 4.8vw, 1.22rem);
    line-height: 1.46;
  }

  .button-row {
    width: min(100%, 430px);
    margin-inline: auto;
  }

  .device-composition {
    width: min(100%, 520px);
  }

  .section-intro {
    margin-bottom: 20px;
    padding-bottom: 12px;
  }

  .section-heading {
    font-size: clamp(2.15rem, 10vw, 3.05rem);
  }

  .section-subtitle {
    font-size: 1.08rem;
  }

  .feature-showcase-section {
    padding-top: 46px;
  }

  .feature-stack {
    gap: 14px;
  }

  .showcase-row {
    gap: 12px;
  }

  .showcase-meta {
    padding: 21px 19px;
  }

  .showcase-meta h3 {
    margin-bottom: 7px;
    font-size: 1.08rem;
  }

  .showcase-meta p {
    font-size: .94rem;
  }

  .showcase-demo {
    gap: 12px;
    padding: 10px;
  }

  .simple-chart-card,
  .insight-score-panel,
  .insight-meaning-panel,
  .home-widget-preview {
    padding: 18px;
  }

  .simple-chart-wrap {
    min-height: 205px;
  }

  .simple-chart-axis span,
  .simple-chart-months span {
    font-size: .7rem;
  }

  .simple-chart-legend {
    gap: 12px;
    font-size: .73rem;
  }

  .study-comparison-head {
    flex-direction: column;
  }

  .study-comparison-badge {
    align-self: flex-start;
  }

  .weekly-goal-main {
    align-items: flex-start;
  }

  .focus-forcefield-card,
  .focus-forcefield-stage {
    min-height: 0;
  }

  .forcefield-ring-outer {
    width: min(310px, 86vw);
  }

  .forcefield-ring-inner {
    width: min(220px, 64vw);
  }

  .focus-satellite {
    width: min(240px, 100%);
  }

  .sync-icon-card {
    gap: 24px;
  }

  .sync-loop-stage {
    width: min(250px, 76vw);
  }

  .pricing-v3-card-head {
    align-items: flex-start;
  }

  .pricing-v3-card,
  .support-policy-hub,
  .support-simple-card,
  .legal-card.legal-document {
    border-radius: 21px;
  }

  .footer-inner {
    align-items: center;
    text-align: center;
  }

  .footer-links {
    justify-items: center;
  }

  .waitlist-grid {
    gap: 34px;
  }

  .waitlist-phone {
    width: min(300px, 76vw);
  }
}

@media (max-width: 430px) {
  .container {
    width: calc(100% - 24px);
  }

  .hero {
    padding-top: 30px;
  }

  .device-composition {
    width: 100%;
  }

  .showcase-meta,
  .showcase-demo {
    border-radius: 18px;
  }

  .simple-chart-card,
  .insight-score-panel,
  .insight-meaning-panel,
  .study-v6-card,
  .focus-forcefield-card,
  .home-widget-preview,
  .sync-icon-card {
    border-radius: 16px;
  }

  .study-streak-wide .study-week-panel {
    padding-inline: 15px;
  }

  .study-streak-wide .study-week-days {
    gap: 4px;
  }

  .study-streak-wide .week-day label {
    font-size: .64rem;
  }

  .study-streak-wide .week-day > span {
    height: 52px;
    border-radius: 10px;
  }

  .pricing-v3-card-head {
    gap: 14px;
  }

  .pricing-v3-price strong {
    font-size: 1.9rem;
  }

  .policy-nav-inline {
    display: grid;
    grid-template-columns: 1fr;
  }

  .policy-pill {
    justify-content: center;
  }
}


/* =========================================================
   Site v28 — alignment, lock motion, and hero emphasis
   ========================================================= */

/* Keep every streak tick perfectly centred in its orange day box. */
.study-streak-wide .week-day > span {
  display: grid;
  place-items: center;
}

.study-streak-wide .week-tick {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  margin: 0;
  line-height: 1;
}

/* Give the devices more visual weight while preserving their shared composition. */
.device-composition {
  width: min(106%, 770px);
  transform: translateX(-2%);
}

.device-stage .laptop-img {
  right: 0;
  width: 94%;
}

.device-stage .phone-angle {
  top: 58%;
  left: 10.5%;
  width: 34.6%;
}

/* The shackle pivots around the attached right-hand side. */
.lock-shackle-v7 {
  transform-box: view-box;
  transform-origin: 117px 78px;
}

@media (max-width: 1024px) {
  .device-composition {
    width: min(100%, 740px);
    transform: none;
  }
}

@media (min-width: 720px) and (max-width: 1024px) and (orientation: landscape) {
  .device-composition {
    width: min(100%, 580px);
  }
}

@media (max-width: 760px) {
  .device-composition {
    width: min(100%, 560px);
  }
}


/* =========================================================
   Site v29 — reference hero composition and refined lock
   ========================================================= */

/*
  The reference hero uses more of the viewport than the rest of the site.
  The laptop and phone still live in one fixed-ratio canvas, so they scale
  as a single composition instead of drifting independently.
*/
.hero > .container {
  width: min(1380px, calc(100% - 96px));
}

.hero-grid {
  grid-template-columns: minmax(0, .88fr) minmax(600px, 1.12fr);
  gap: clamp(34px, 3.2vw, 52px);
  align-items: center;
}

.hero {
  padding-top: 58px;
  padding-bottom: 72px;
}

.device-stage {
  justify-items: end;
  overflow: visible;
}

.device-composition {
  width: min(108%, 820px);
  aspect-ratio: 1.28 / 1;
  transform: translateX(2.5%);
}

.device-stage .laptop-img {
  top: 50%;
  right: 0;
  width: 92%;
}

.device-stage .phone-angle {
  top: 62%;
  left: -2%;
  width: 30%;
}

/* The full shackle now moves as one piece, hinged on its left side. */
.lock-shackle-v7 {
  transform-box: view-box;
  transform-origin: 43px 78px;
}

@media (max-width: 1180px) {
  .hero > .container {
    width: min(calc(100% - 52px), 1120px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, .9fr) minmax(560px, 1.1fr);
    gap: 32px;
  }

  .device-composition {
    width: min(112%, 760px);
    transform: translateX(1%);
  }
}

@media (max-width: 1024px) {
  .hero > .container {
    width: min(var(--container), calc(100% - 52px));
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .device-stage {
    justify-items: center;
  }

  .device-composition {
    width: min(100%, 760px);
    transform: none;
  }

  .device-stage .laptop-img {
    width: 92%;
  }

  .device-stage .phone-angle {
    top: 62%;
    left: -1%;
    width: 30%;
  }
}

@media (min-width: 720px) and (max-width: 1024px) and (orientation: landscape) {
  .hero > .container {
    width: calc(100% - 44px);
  }

  .hero-grid {
    grid-template-columns: minmax(0, .78fr) minmax(430px, 1.22fr);
    gap: 24px;
  }

  .device-stage {
    justify-items: end;
  }

  .device-composition {
    width: min(108%, 610px);
    transform: translateX(1.5%);
  }
}

@media (max-width: 760px) {
  .hero > .container {
    width: calc(100% - 28px);
  }

  .hero {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .hero-grid {
    gap: 24px;
  }

  .device-composition {
    width: min(100%, 570px);
  }

  .device-stage .phone-angle {
    top: 62%;
    left: -1%;
    width: 30%;
  }
}

@media (max-width: 430px) {
  .hero > .container {
    width: calc(100% - 24px);
  }

  .device-composition {
    width: 100%;
  }
}


/* =========================================================
   Site v30 — compact hero, SVG laptop, and calmer lock pulse
   ========================================================= */

/* Bring the hero back toward the top instead of vertically centring the
   shorter copy inside the much taller device canvas. */
.hero {
  padding-top: 18px;
  padding-bottom: 58px;
}

.hero-grid {
  align-items: start;
}

.hero-copy {
  padding-top: clamp(84px, 7.1vw, 108px);
}

/* Keep the laptop/phone relationship fixed, but move the phone farther
   right and give it slightly more visual weight. */
.device-stage .phone-angle {
  top: 62.5%;
  left: 3.5%;
  width: 32%;
}

/* SVG and raster laptop files should occupy the exact same composition. */
.device-stage .laptop-img {
  height: auto;
  object-fit: contain;
}

/* The one-time click remains visible; the continuing force-field motion is
   deliberately restrained so it no longer reads as flicker. */
.focus-v7-row.forcefield-active .forcefield-ring-outer {
  animation: fieldPulseCalm 3.6s ease-in-out infinite;
}

.focus-v7-row.forcefield-active .forcefield-ring-inner {
  animation: fieldPulseCalm 3.6s ease-in-out .28s infinite;
}

.focus-v7-row.forcefield-active .focus-lock-aura {
  animation: auraPulseCalm 3.4s ease-in-out infinite;
}

@keyframes fieldPulseCalm {
  0%, 100% {
    opacity: .4;
    transform: translate(-50%, -50%) scale(.975);
  }
  50% {
    opacity: .58;
    transform: translate(-50%, -50%) scale(1.01);
  }
}

@keyframes auraPulseCalm {
  0%, 100% {
    opacity: .72;
    transform: scale(.99);
  }
  50% {
    opacity: .84;
    transform: scale(1.025);
  }
}

@media (max-width: 1180px) {
  .hero-copy {
    padding-top: clamp(68px, 6vw, 88px);
  }

  .device-stage .phone-angle {
    left: 3%;
    width: 32%;
  }
}

@media (max-width: 1024px) {
  .hero {
    padding-top: 26px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .device-stage .phone-angle {
    left: 3.5%;
    width: 32%;
  }
}

@media (min-width: 720px) and (max-width: 1024px) and (orientation: landscape) {
  .hero {
    padding-top: 24px;
  }

  .hero-copy {
    padding-top: 54px;
  }
}

@media (max-width: 760px) {
  .hero {
    padding-top: 22px;
    padding-bottom: 44px;
  }

  .hero-copy {
    padding-top: 0;
  }

  .device-stage .phone-angle {
    top: 62.5%;
    left: 4%;
    width: 32.5%;
  }
}


/* =========================================================
   Site v31 — larger hero phone, matched device rendering,
   and a single clean lock close
   ========================================================= */

/* Give the phone more presence without breaking the shared device canvas. */
.device-stage .phone-angle {
  top: 62.7%;
  left: 2.4%;
  width: 35.5%;
  transform: translate3d(0, -50%, 0);
  backface-visibility: hidden;
}

/* Use the SVG directly and bring its colour response closer to the phone.
   This does not blur or raster-filter the image; it only corrects the darker,
   flatter colour balance visible in the supplied comparison. */
.device-stage .laptop-img {
  transform: translate3d(0, -50%, 0);
  backface-visibility: hidden;
  image-rendering: auto;
  filter: saturate(1.10) contrast(1.045) brightness(1.015);
}

/* Keep the moving shackle crisp. Drop-shadow filters on a transformed SVG
   can shimmer between frames in Chromium, which was causing the flicker. */
.lock-shackle-v7 {
  filter: none;
  will-change: transform;
  backface-visibility: hidden;
}

.focus-lock-core,
.focus-lock-aura,
.forcefield-ring {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Once the lock is closed, the force field stays calm and static. The only
   movement is the one-off fade-in performed by JavaScript. */
.focus-v7-row.forcefield-active .forcefield-ring-outer,
.focus-v7-row.forcefield-active .forcefield-ring-inner,
.focus-v7-row.forcefield-active .focus-lock-aura {
  animation: none;
}

.focus-v7-row.forcefield-active .forcefield-ring-outer {
  opacity: .48;
  transform: translate(-50%, -50%) scale(1);
}

.focus-v7-row.forcefield-active .forcefield-ring-inner {
  opacity: .58;
  transform: translate(-50%, -50%) scale(1);
}

.focus-v7-row.forcefield-active .focus-lock-aura {
  opacity: .8;
  transform: scale(1.01);
}

@media (max-width: 1180px) {
  .device-stage .phone-angle {
    left: 2.2%;
    width: 35%;
  }
}

@media (max-width: 1024px) {
  .device-stage .phone-angle {
    left: 2.5%;
    width: 34.5%;
  }
}

@media (min-width: 720px) and (max-width: 1024px) and (orientation: landscape) {
  .device-stage .phone-angle {
    left: 2%;
    width: 35%;
  }
}

@media (max-width: 760px) {
  .device-stage .phone-angle {
    top: 62.8%;
    left: 2.5%;
    width: 35%;
  }
}


/* =========================================================
   Site v32 — PNG laptop compatibility and softer lock impact
   ========================================================= */
.device-stage .laptop-img {
  image-rendering: auto;
  object-fit: contain;
}


/* =========================================================
   Site v33 — raised Mac and gentler lock close
   ========================================================= */
.device-stage .laptop-img {
  top: 48.6%;
}

@media (max-width: 1024px) {
  .device-stage .laptop-img {
    top: 49%;
  }
}

@media (max-width: 760px) {
  .device-stage .laptop-img {
    top: 49.2%;
  }
}


/* =========================================================
   Site v34 — higher Mac and smooth lock-field response
   ========================================================= */
.device-stage .laptop-img {
  top: 46.9%;
}

@media (max-width: 1024px) {
  .device-stage .laptop-img {
    top: 47.5%;
  }
}

@media (max-width: 760px) {
  .device-stage .laptop-img {
    top: 48%;
  }
}

/* The rings are driven by the one-off Web Animations sequence. Keeping the
   active state visually identical prevents a final-frame snap. */
.focus-v7-row.forcefield-active .forcefield-ring-outer {
  opacity: .48;
  transform: translate(-50%, -50%) scale(1);
}

.focus-v7-row.forcefield-active .forcefield-ring-inner {
  opacity: .58;
  transform: translate(-50%, -50%) scale(1);
}