@font-face {
  font-family:Jakarta;
  src:url('/assets/jakarta.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

:root {
  --ink:#202123;
  --muted:#5c6268;
  --paper:#fff;
  --blue:#407aef;
  --sky:#e8f1ff;
  --mint:#dcf5db;
  --peach:#ffe7d5;
  --lilac:#ece3ff;
  --line:#dedfe2;
  --radius:32px;
  --max:1200px;
  font-family:Jakarta,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body {
  margin:0;
}

button,a,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

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

img {
  height:auto;
}

p {
  line-height:1.7;
}

h1,h2,h3,p {
  margin:0;
}

h1,h2,h3 {
  text-wrap:balance;
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #2757bb;
  outline-offset:6px;
}

button {
  color:inherit;
}

button[hidden],[hidden] {
  display:none!important;
}

::selection {
  background:#d5e5ff;
}

section[id] {
  scroll-margin-top:20px;
}

.container {
  width:min(var(--max),calc(100% - 80px));
  margin-inline:auto;
}

.section {
  padding-block:112px;
}

.eyebrow {
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.6;
}

.muted {
  color:var(--muted);
}

.skip-link {
  position:fixed;
  z-index:100;
  left:20px;
  top:12px;
  padding:16px;
  background:white;
  border:2px solid var(--ink);
  transform:translateY(-150%);
}

.skip-link:focus {
  transform:none;
}

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

.icon {
  width:24px;
  height:24px;
  flex-shrink:0;
}

.arrow {
  font-size:24px;
  line-height:1;
}

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:48px;
  padding:14px 23px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:14px;
  font-weight:650;
  background:var(--ink);
  color:white;
  transition:transform .2s,background .2s;
}

.pill:hover {
  background:#36383d;
  transform:translateY(-2px);
}

.pill.light {
  background:white;
  color:var(--ink);
}

.pill.light:hover {
  background:#f4f5f7;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:44px;
  font-size:14px;
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:5px;
}

.store-button {
  display:inline-flex;
  gap:13px;
  align-items:center;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  padding:13px 27px;
  min-height:61px;
  transition:background .2s,transform .2s;
  text-align:left;
}

.store-button:hover {
  background:#373940;
  transform:translateY(-2px);
}

.store-button .icon {
  width:26px;
  height:30px;
}

.store-button small {
  display:block;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.02em;
}

.store-button strong {
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.04em;
  font-weight:600;
}

.brand {
  display:inline-flex;
  min-height:44px;
  gap:10px;
  align-items:center;
  white-space:nowrap;
  font-size:20px;
  letter-spacing:-.055em;
  font-weight:750;
}

.brand img {
  width:33px;
  height:33px;
  border-radius:10px;
}

.site-header {
  position:fixed;
  z-index:30;
  top:24px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:min(1050px,calc(100% - 80px));
  min-height:70px;
  padding:10px 12px 10px 25px;
  border:1px solid #fff;
  border-radius:100px;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 24px #223e5a0a;
  backdrop-filter:blur(16px);
}

.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
}

.nav-links>a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  min-width:44px;
  font-size:13px;
  font-weight:600;
  color:#4d5258;
}

.nav-links>a:hover {
  color:#14161b;
}

.nav-download {
  font-size:12px;
  padding:13px 20px;
  min-height:46px;
}

.menu-toggle {
  display:none;
}

.hero {
  position:relative;
  margin:12px 12px 0;
  border-radius:32px;
  overflow:hidden;
  background:radial-gradient(ellipse at 8% 100%,#ffe9c9 0%,transparent 39%),radial-gradient(ellipse at 94% 75%,#c9e8ff 0%,transparent 38%),linear-gradient(165deg,#e7f0ff,#f2f6ff 60%,#e5efff);
  text-align:center;
  padding:153px 24px 0;
}

.hero:before {
  content:'';
  position:absolute;
  width:700px;
  height:700px;
  left:calc(50% - 350px);
  bottom:-320px;
  border-radius:50%;
  background:#fff7;
  filter:blur(60px);
  pointer-events:none;
}

.hero-copy {
  position:relative;
  z-index:2;
}

.hero .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:23px;
  letter-spacing:.12em;
  font-size:12px;
  text-wrap:balance;
}

.status-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#3a6650;
  box-shadow:0 0 0 4px #c7e1d699;
}

.hero h1 {
  font-size:clamp(60px,7.1vw,106px);
  line-height:1.01;
  letter-spacing:-.075em;
  font-weight:650;
}

.hero h1 span {
  color:#477fe5;
}

.hero-description {
  max-width:470px;
  margin:23px auto 24px;
  font-size:16px;
  line-height:1.65;
  color:#565e68;
}

.hero-cta {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:17px;
}

.hero-cta .text-link {
  font-size:12px;
}

.hero-footnote {
  font-size:10px;
  letter-spacing:.025em;
  color:#626773;
  margin-top:13px;
}

.showcase {
  height:440px;
  position:relative;
  max-width:980px;
  margin:52px auto 0;
}

.phone {
  padding:6px;
  background:#191c23;
  border:2px solid #45474d;
  border-radius:38px;
  box-shadow:0 20px 45px #27354823;
  overflow:hidden;
  position:relative;
}

.phone img {
  border-radius:30px;
  width:100%;
  height:auto;
}

.phone:after {
  content:'';
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:30%;
  height:13px;
  border-radius:20px;
  background:#000;
}

.showcase .phone {
  position:absolute;
  width:226px;
  top:45px;
  left:50%;
  z-index:1;
}

.showcase .phone-left {
  transform:translateX(-134%) rotate(-12deg);
  top:59px;
  width:211px;
}

.showcase .phone-right {
  transform:translateX(34%) rotate(12deg);
  top:59px;
  width:211px;
}

.showcase .phone-main {
  transform:translateX(-50%);
  top:0;
  z-index:2;
  width:237px;
}

.floating-note {
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  background:white;
  border:1px solid #fff9;
  border-radius:18px;
  padding:15px 20px;
  text-align:left;
  box-shadow:0 8px 30px #233a6610;
  font-size:13px;
  line-height:1.5;
}

.floating-note small {
  display:block;
  color:var(--muted);
  font-size:10px;
}

.note-left {
  left:2%;
  top:140px;
  transform:rotate(-7deg);
}

.note-right {
  right:1%;
  top:72px;
  transform:rotate(7deg);
}

.note-symbol {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--mint);
}

.note-right .note-symbol {
  background:var(--lilac);
}

.sparkle {
  position:absolute;
  z-index:3;
  width:54px;
  height:54px;
  color:#6198ee;
  right:11%;
  top:248px;
  transform:rotate(12deg);
}

.mini-sticker {
  position:absolute;
  left:13%;
  top:15px;
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  background:#e1ef9d;
  border-radius:50%;
  font-size:10px;
  font-weight:750;
  line-height:1.45;
  transform:rotate(-15deg);
  border:1px solid #a6b16b;
}

.proof-strip {
  display:flex;
  justify-content:center;
  gap:90px;
  align-items:center;
  padding-block:32px;
  border-bottom:1px solid #ececef;
  font-size:12px;
  font-weight:550;
  color:#59616b;
}

.proof-strip span {
  display:flex;
  gap:10px;
  align-items:center;
}

.proof-strip .icon {
  width:18px;
  height:18px;
}

.intro {
  text-align:center;
  padding-bottom:66px;
}

.section h2 {
  font-size:clamp(36px,4.2vw,58px);
  line-height:1.1;
  letter-spacing:-.055em;
  font-weight:600;
}

.section .eyebrow {
  margin-bottom:20px;
}

.intro>p:last-child {
  font-size:16px;
  max-width:520px;
  margin:22px auto 0;
  color:var(--muted);
}

.feature-tabs {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px;
  border-radius:40px;
  background:#f1f2f4;
  width:max-content;
  max-width:100%;
  margin:0 auto 32px;
}

.feature-tabs button {
  background:transparent;
  border:0;
  border-radius:30px;
  padding:14px 25px;
  min-height:46px;
  font-size:13px;
  font-weight:600;
  transition:background .2s;
}

.feature-tabs button[aria-selected=true] {
  background:var(--ink);
  color:white;
}

.feature-panel {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:var(--radius);
  background:#edf2f9;
  overflow:hidden;
  min-height:570px;
  margin-bottom:22px;
}

/* Reserve the tallest panel at every width so tab changes never move the page.
   Without JavaScript the panels remain a readable vertical list. */
.feature-panels.is-enhanced {
  display:grid;
}

.feature-panels.is-enhanced .feature-panel {
  grid-area:1 / 1;
}

.feature-panels.is-enhanced .feature-panel[hidden] {
  display:grid !important;
  visibility:hidden;
  pointer-events:none;
}

.feature-content {
  padding:67px 20px 67px 65px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.feature-number {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:600;
  margin-bottom:31px;
}

.feature-number span {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  background:white;
  border-radius:50%;
  font-size:12px;
}

.feature-content h3 {
  font-size:42px;
  line-height:1.1;
  letter-spacing:-.055em;
  font-weight:600;
  max-width:360px;
}

.feature-content>p {
  margin:24px 0;
  max-width:345px;
  color:#555e67;
  font-size:15px;
}

.feature-visual {
  position:relative;
  min-height:570px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:47px;
  background:radial-gradient(ellipse at 50% 70%,#b3d7fb 0%,transparent 70%);
  overflow:hidden;
}

.feature-visual .phone {
  width:255px;
  transform:rotate(7deg);
  margin-bottom:-110px;
}

.feature-visual .visual-tag {
  position:absolute;
  left:20px;
  bottom:120px;
  border:1px solid #d0d8e4;
  background:#fff;
  border-radius:999px;
  padding:16px 24px;
  transform:rotate(-8deg);
  font-size:12px;
  font-weight:650;
  z-index:2;
}

.feature-panel[data-tone=peach] {
  background:#fff1e5;
}

.feature-panel[data-tone=peach] .feature-visual {
  background:radial-gradient(ellipse at 50% 65%,#ffd7bc,transparent 70%);
}

.feature-panel[data-tone=lilac] {
  background:#f0edfa;
}

.feature-panel[data-tone=lilac] .feature-visual {
  background:radial-gradient(ellipse at 50% 65%,#d2c9f6,transparent 70%);
}

.caption {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-top:18px;
  line-height:1.6;
}

.small-features {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  margin-top:60px;
}

.small-feature {
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.small-feature>.icon {
  width:22px;
  height:22px;
  margin-top:2px;
}

.small-feature h3 {
  font-size:14px;
  font-weight:650;
  letter-spacing:-.02em;
}

.small-feature p {
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.manifesto {
  background:#f5f7f3;
  padding-block:110px;
}

.manifesto .container {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:center;
}

.manifesto-art {
  position:relative;
  display:grid;
  place-items:center;
  min-height:350px;
}

.orbit {
  width:275px;
  height:275px;
  position:relative;
  border:38px solid #c8d9fa;
  border-radius:50%;
  transform:rotate(-20deg);
  box-shadow:inset 3px 7px 13px #8cb0df,inset -7px -8px 14px #ecf7ff,5px 12px 12px #b7cae53b;
}

.orbit:after {
  content:'';
  position:absolute;
  bottom:-30px;
  right:-48px;
  width:112px;
  height:45px;
  border-radius:0 0 50px 30px;
  transform:rotate(33deg);
  background:linear-gradient(#bdd5f6,#d3e4ff 50%,#9abbe5);
}

.orbit-label {
  position:absolute;
  top:58px;
  left:8px;
  transform:rotate(-10deg);
  border:1px solid #616856;
  background:#e3edb2;
  padding:12px 22px;
  border-radius:999px;
  font-size:12px;
  font-weight:650;
}

.orbit-note {
  position:absolute;
  bottom:22px;
  right:0;
  transform:rotate(9deg);
  padding:20px 28px;
  background:#fff;
  border-radius:16px;
  font-size:13px;
  line-height:1.5;
  border:1px solid #e7e8e0;
}

.manifesto h2 {
  font-size:52px;
}

.manifesto .copy {
  font-size:16px;
  color:var(--muted);
  margin-top:25px;
  max-width:490px;
}

.steps-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:54px;
}

.steps-header h2 {
  max-width:550px;
}

.steps-header>p {
  max-width:300px;
  color:var(--muted);
  font-size:14px;
}

.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.step-card {
  padding:35px 30px 32px;
  background:#f2f5f9;
  border-radius:26px;
  min-height:296px;
}

.step-card:nth-child(2) {
  background:#f1ecfa;
}

.step-card:nth-child(3) {
  background:#eef3db;
}

.step-icon {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:46px;
  font-size:12px;
  color:#58616a;
}

.step-icon .icon {
  width:28px;
  height:28px;
  color:var(--ink);
}

.step-card h3 {
  font-size:22px;
  letter-spacing:-.045em;
  margin-bottom:13px;
}

.step-card p {
  font-size:13px;
  color:var(--muted);
}

.plan-note {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding:25px 5px;
  margin-top:14px;
  border-bottom:1px solid var(--line);
}

.plan-note p {
  font-size:12px;
  max-width:800px;
  color:var(--muted);
}

.plan-note strong {
  color:var(--ink);
}

.plan-note a {
  white-space:nowrap;
  font-size:12px;
}

.founder {
  border-top:1px solid #e8e9ec;
}

.founder .container {
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:90px;
  align-items:start;
}

.founder-mark {
  width:60px;
  height:60px;
  border-radius:18px;
  margin-bottom:26px;
}

.founder h2 {
  font-size:39px;
  max-width:330px;
}

.founder blockquote {
  margin:0;
  font-size:26px;
  line-height:1.55;
  letter-spacing:-.04em;
}

.founder blockquote p+p {
  margin-top:20px;
}

.founder .signature {
  margin-top:29px;
  font-size:13px;
  font-weight:650;
}

.founder .signature span {
  display:block;
  font-size:12px;
  font-weight:400;
  color:var(--muted);
  margin-top:6px;
}

.guides {
  background:#f7f8fa;
}

.guides-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:45px;
}

.guides-heading p {
  max-width:270px;
  font-size:14px;
  color:var(--muted);
}

.guides-more {
  margin-top:24px;
}

.guide-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:23px;
}

.guide-card {
  display:block;
  background:white;
  border:1px solid #e6e8eb;
  border-radius:24px;
  overflow:hidden;
  transition:transform .2s;
}

.guide-card:hover {
  transform:translateY(-5px);
}

.guide-art {
  height:180px;
  background:var(--sky);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.guide-card:nth-child(2) .guide-art {
  background:var(--peach);
}

.guide-card:nth-child(3) .guide-art {
  background:var(--mint);
}

.guide-illustration {
  display:flex;
  align-items:center;
  gap:15px;
  transform:rotate(-8deg);
  padding:19px 23px;
  background:white;
  border:1px solid #c5cfdd;
  border-radius:17px;
  font-size:36px;
  letter-spacing:-.06em;
  box-shadow:6px 6px 0 #9ab9e63b;
}

.guide-illustration .icon {
  width:30px;
  height:30px;
}

.guide-card:nth-child(2) .guide-illustration {
  transform:rotate(7deg);
  font-size:30px;
  box-shadow:6px 6px 0 #e5bca73b;
}

.guide-card:nth-child(3) .guide-illustration {
  font-size:20px;
  box-shadow:6px 6px 0 #a2cca93b;
}

.guide-card-body {
  padding:27px;
}

.guide-card .eyebrow {
  font-size:12px;
  margin-bottom:15px;
  color:var(--muted);
  letter-spacing:.08em;
}

.guide-card h3 {
  font-size:20px;
  letter-spacing:-.04em;
  line-height:1.35;
  min-height:55px;
}

.guide-card p {
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
}

.guide-card .read {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:25px;
  font-size:12px;
  font-weight:650;
}

.faq-layout {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:100px;
}

.faq-layout h2 {
  font-size:48px;
}

.faq-intro>p:last-of-type {
  font-size:14px;
  color:var(--muted);
  margin-top:25px;
  max-width:270px;
}

.faq-intro a {
  margin-top:20px;
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list details:first-child {
  border-top:1px solid var(--line);
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:650;
  list-style:none;
  line-height:1.6;
}

.faq-list summary::-webkit-details-marker {
  display:none;
}

.faq-list summary:after {
  content:'+';
  font-size:23px;
  font-weight:400;
  flex-shrink:0;
  width:24px;
  text-align:center;
}

.faq-list details[open] summary:after {
  content:'−';
}

.faq-list details p {
  font-size:13px;
  color:var(--muted);
  padding:0 35px 25px 0;
}

.download-section {
  padding:0 12px 12px;
  text-align:center;
}

.download-inner {
  position:relative;
  overflow:hidden;
  border-radius:32px;
  background:radial-gradient(ellipse at 90% 100%,#e4d7ff,transparent 55%),radial-gradient(ellipse at 0% 20%,#dcebf9,transparent 70%),#eef3ff;
  padding:80px 24px 76px;
}

.download-inner h2 {
  font-size:clamp(42px,5vw,70px);
  line-height:1.08;
  letter-spacing:-.065em;
  font-weight:600;
  margin:22px auto;
}

.download-inner>p {
  font-size:15px;
  color:var(--muted);
  max-width:430px;
  margin:0 auto 27px;
}

.download-inner .brand-icon {
  width:62px;
  height:62px;
  border-radius:19px;
  margin:auto;
  transform:rotate(-9deg);
}

.download-inner .hero-footnote {
  margin:14px auto 0;
  font-size:11px;
}

.footer {
  padding:51px 0 29px;
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-start;
}

.footer-tagline {
  font-size:12px;
  color:var(--muted);
  margin-top:14px;
}

.footer-links {
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  font-size:12px;
}

.footer-links a {
  min-height:44px;
  min-width:44px;
  display:inline-flex;
  align-items:center;
}

.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

.footer-bottom {
  margin-top:40px;
  border-top:1px solid #e8e9ed;
  padding-top:23px;
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:35px;
  color:#697079;
  font-size:12px;
  line-height:1.65;
}

.footer-bottom p {
  max-width:50ch;
  text-wrap:pretty;
}

.article-page {
  padding-top:160px;
}

.breadcrumbs {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  margin-bottom:35px;
}

.breadcrumbs a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.article-header {
  max-width:850px;
}

.article-header .eyebrow {
  margin-bottom:22px;
  color:#536b94;
}

.article-header h1 {
  font-size:clamp(42px,5vw,70px);
  line-height:1.08;
  letter-spacing:-.06em;
  font-weight:600;
}

.article-lede {
  font-size:19px;
  color:var(--muted);
  max-width:720px;
  margin-top:26px;
}

.article-meta {
  font-size:11px;
  color:var(--muted);
  margin-top:24px;
}

.article-layout {
  display:grid;
  grid-template-columns:minmax(0,750px) minmax(200px,280px);
  gap:90px;
  margin-top:60px;
  padding-bottom:95px;
  align-items:start;
}

.article-body {
  font-size:16px;
  line-height:1.8;
  color:#49525c;
}

.article-body h2 {
  font-size:29px;
  color:var(--ink);
  letter-spacing:-.035em;
  line-height:1.3;
  margin:42px 0 18px;
}

.article-body h2:first-child {
  margin-top:0;
}

.article-body h3 {
  font-size:19px;
  color:var(--ink);
  margin:28px 0 12px;
  letter-spacing:-.02em;
}

.article-body p+p {
  margin-top:20px;
}

.article-body ul,.article-body ol {
  padding-left:22px;
  margin:20px 0;
}

.article-body li {
  padding-left:8px;
  margin-bottom:12px;
}

.article-body a {
  color:#2859ae;
  text-decoration:underline;
  text-underline-offset:3px;
}

.article-body .callout {
  margin:32px 0;
  padding:27px;
  background:#eff4fb;
  border-radius:20px;
  font-size:14px;
  line-height:1.75;
}

.article-sidebar {
  position:sticky;
  top:120px;
  padding:28px;
  background:#edf2fb;
  border-radius:24px;
}

.article-sidebar img {
  width:55px;
  height:55px;
  border-radius:16px;
  margin-bottom:20px;
}

.article-sidebar h2 {
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.035em;
}

.article-sidebar p {
  font-size:12px;
  color:var(--muted);
  margin:17px 0 23px;
}

.article-sidebar .store-button {
  padding:11px 18px;
}

.article-sidebar .store-button strong {
  font-size:18px;
}

.article-sidebar .related {
  display:block;
  margin-top:22px;
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:4px;
}

.article-table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  margin:25px 0;
}

.article-table th,.article-table td {
  text-align:left;
  border-bottom:1px solid var(--line);
  padding:16px 10px;
  vertical-align:top;
}

.article-table th {
  color:var(--ink);
  font-weight:650;
}

.error-page {
  max-width:760px;
  margin:auto;
  text-align:center;
  padding:200px 25px 120px;
}

.error-page h1 {
  font-size:60px;
  letter-spacing:-.06em;
}

.error-page p {
  margin:25px 0;
}

.no-js .nav-links {
  display:flex;
}

@media(min-width:1600px) {
  .hero {
    max-width:1800px;
    margin-inline:auto;
  }
  .showcase {
    height:475px;
  }
  .hero h1 {
    font-size:112px;
  }
}

@media(max-width:1000px) {
  .container {
    width:calc(100% - 56px);
  }
  .site-header {
    width:calc(100% - 56px);
  }
  .nav-links {
    gap:22px;
  }
  .hero {
    padding-top:150px;
  }
  .showcase {
    max-width:800px;
  }
  .floating-note {
    padding:12px 16px;
  }
  .note-left {
    left:0;
  }
  .note-right {
    right:0;
  }
  .mini-sticker {
    left:10%;
  }
  .proof-strip {
    gap:45px;
  }
  .section {
    padding-block:85px;
  }
  .feature-content {
    padding:45px 30px;
  }
  .feature-content h3 {
    font-size:36px;
  }
  .feature-visual {
    min-height:530px;
  }
  .feature-panel {
    min-height:530px;
  }
  .feature-visual .phone {
    width:230px;
  }
  .feature-visual .visual-tag {
    left:0;
  }
  .manifesto .container {
    gap:40px;
  }
  .manifesto h2 {
    font-size:43px;
  }
  .manifesto-art {
    transform:scale(.9);
  }
  .small-features {
    gap:23px;
  }
  .faq-layout {
    gap:55px;
  }
  .faq-layout h2 {
    font-size:40px;
  }
  .founder .container {
    gap:50px;
  }
  .founder blockquote {
    font-size:23px;
  }
  .article-layout {
    gap:40px;
  }
  .footer-links {
    gap:24px;
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  html {
    scroll-padding-top:95px;
  }
  .site-header {
    top:16px;
    min-height:62px;
    width:calc(100% - 40px);
    padding:9px 10px 9px 16px;
    gap:10px;
  }
  .brand {
    font-size:18px;
  }
  .brand img {
    width:30px;
    height:30px;
  }
  .nav-download {
    margin-left:auto;
    min-height:44px;
    font-size:12px;
    padding:11px 16px;
  }
  .menu-toggle {
    display:flex;
    width:44px;
    height:44px;
    background:transparent;
    border:1px solid #d9dce1;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    font-size:23px;
    font-weight:400;
  }
  .menu-toggle:before {
    content:'+';
    line-height:1;
  }
  .menu-toggle[aria-expanded=true]:before {
    content:'−';
  }
  .nav-links {
    display:none;
    position:absolute;
    top:74px;
    right:0;
    left:0;
    padding:16px 24px;
    background:white;
    border:1px solid var(--line);
    border-radius:23px;
    box-shadow:0 12px 20px #273b5a0d;
  }
  .nav-links.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:1px;
  }
  .nav-links>a {
    padding:8px 0;
    min-height:47px;
  }
  .hero {
    margin:8px 8px 0;
    border-radius:26px;
    padding:132px 14px 0;
  }
  .hero .eyebrow {
    font-size:12px;
    letter-spacing:.09em;
    margin-bottom:21px;
  }
  .hero h1 {
    font-size:clamp(51px,9.8vw,74px);
    line-height:1.04;
    letter-spacing:-.065em;
  }
  .hero-description {
    font-size:14px;
    max-width:350px;
    margin-top:23px;
    padding-inline:6px;
  }
  .hero-cta {
    gap:17px;
  }
  .store-button {
    padding:12px 22px;
    min-height:57px;
  }
  .store-button strong {
    font-size:19px;
  }
  .hero-cta .text-link {
    font-size:12px;
    gap:7px;
  }
  .hero-cta .arrow {
    font-size:18px;
  }
  .hero-footnote {
    font-size:9px;
  }
  .showcase {
    height:355px;
    margin-top:40px;
    max-width:530px;
  }
  .showcase .phone-main {
    width:186px;
    border-radius:30px;
  }
  .showcase .phone {
    padding:4px;
    border-width:2px;
  }
  .showcase .phone img {
    border-radius:24px;
  }
  .showcase .phone-left,.showcase .phone-right {
    width:163px;
    top:53px;
    border-radius:29px;
  }
  .showcase .phone-left {
    transform:translateX(-137%) rotate(-13deg);
  }
  .showcase .phone-right {
    transform:translateX(37%) rotate(13deg);
  }
  .phone:after {
    height:10px;
    top:9px;
  }
  .floating-note {
    font-size:10px;
    padding:10px 12px;
    border-radius:13px;
    gap:8px;
  }
  .floating-note small {
    font-size:8px;
  }
  .note-symbol {
    width:27px;
    height:27px;
  }
  .note-symbol .icon {
    width:17px;
    height:17px;
  }
  .note-left {
    left:0;
    top:189px;
    transform:rotate(-5deg);
  }
  .note-right {
    right:0;
    top:86px;
    transform:rotate(8deg);
  }
  .mini-sticker {
    width:55px;
    height:55px;
    left:4%;
    top:5px;
    font-size:8px;
  }
  .sparkle {
    width:35px;
    height:35px;
    right:7%;
    top:260px;
  }
  .proof-strip {
    gap:25px;
    padding:25px 10px;
    font-size:10px;
    flex-wrap:wrap;
    row-gap:15px;
  }
  .proof-strip span {
    gap:7px;
  }
  .proof-strip .icon {
    width:16px;
    height:16px;
  }
  .section {
    padding-block:73px;
  }
  .section h2 {
    font-size:39px;
  }
  .section .eyebrow {
    font-size:12px;
    margin-bottom:18px;
  }
  .intro {
    padding-bottom:35px;
  }
  .intro>p:last-child {
    font-size:14px;
    padding-inline:12px;
    margin-top:20px;
  }
  .feature-tabs {
    margin-bottom:22px;
    padding:5px;
    gap:2px;
    width:100%;
  }
  .feature-tabs button {
    padding:13px 15px;
    flex:1;
    font-size:12px;
  }
  .feature-panel {
    grid-template-columns:1fr;
    border-radius:26px;
  }
  .feature-panels.is-enhanced .feature-panel {
    grid-template-rows:1fr 370px;
  }
  .feature-content {
    padding:35px 30px 30px;
  }
  .feature-number {
    margin-bottom:23px;
    font-size:12px;
  }
  .feature-content h3 {
    font-size:34px;
    max-width:310px;
  }
  .feature-content>p {
    font-size:14px;
    max-width:440px;
    margin:20px 0;
  }
  .feature-visual {
    min-height:370px;
    height:370px;
    padding-top:17px;
  }
  .feature-visual .phone {
    width:224px;
    transform:rotate(5deg);
  }
  .feature-visual .visual-tag {
    bottom:50px;
    left:6%;
    font-size:12px;
    padding:13px 20px;
  }
  .caption {
    font-size:10px;
    padding-inline:15px;
  }
  .small-features {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:36px;
    padding:0 8px;
  }
  .small-feature p {
    font-size:12px;
    max-width:460px;
  }
  .manifesto .container {
    grid-template-columns:1fr;
    gap:22px;
  }
  .manifesto-art {
    min-height:265px;
    transform:scale(.85);
    max-width:400px;
    width:100%;
    margin:auto;
  }
  .manifesto h2 {
    font-size:39px;
  }
  .manifesto .copy {
    font-size:14px;
    margin-top:20px;
  }
  .steps-header {
    display:block;
    margin-bottom:35px;
  }
  .steps-header>p {
    margin-top:20px;
    max-width:350px;
  }
  .steps-grid {
    grid-template-columns:1fr;
    gap:15px;
  }
  .step-card {
    min-height:0;
    padding:27px;
  }
  .step-icon {
    margin-bottom:26px;
  }
  .step-card h3 {
    font-size:23px;
  }
  .step-card p {
    font-size:13px;
    max-width:470px;
  }
  .plan-note {
    align-items:start;
    flex-direction:column;
    gap:10px;
    padding:18px 4px;
  }
  .founder .container {
    grid-template-columns:1fr;
    gap:30px;
  }
  .founder h2 {
    font-size:34px;
    max-width:340px;
  }
  .founder-mark {
    width:49px;
    height:49px;
    border-radius:14px;
    margin-bottom:20px;
  }
  .founder blockquote {
    font-size:21px;
  }
  .guides-heading {
    display:block;
    margin-bottom:32px;
  }
  .guides-heading p {
    max-width:360px;
    margin-top:20px;
  }
  .guide-grid {
    grid-template-columns:1fr;
    gap:22px;
  }
  .guide-art {
    height:155px;
  }
  .guide-card h3 {
    min-height:0;
    font-size:23px;
    max-width:330px;
  }
  .guide-card p {
    font-size:13px;
  }
  .guide-card-body {
    padding:26px;
  }
  .faq-layout {
    grid-template-columns:1fr;
    gap:35px;
  }
  .faq-layout h2 {
    font-size:39px;
  }
  .faq-intro>p:last-of-type {
    max-width:330px;
    font-size:13px;
    margin-top:19px;
  }
  .faq-intro a {
    margin-top:14px;
    font-size:12px;
  }
  .faq-list summary {
    font-size:13px;
    padding:22px 0;
  }
  .faq-list details p {
    padding-right:15px;
    font-size:13px;
  }
  .download-section {
    padding:0 8px 8px;
  }
  .download-inner {
    padding:62px 20px;
    border-radius:26px;
  }
  .download-inner h2 {
    font-size:43px;
    margin:25px auto;
  }
  .download-inner>p {
    font-size:14px;
    max-width:300px;
  }
  .footer {
    padding-top:36px;
  }
  .footer-top {
    display:block;
  }
  .footer-links {
    gap:12px 25px;
    margin-top:24px;
    font-size:12px;
  }
  .footer-bottom {
    display:block;
    margin-top:23px;
    font-size:12px;
  }
  .footer-bottom>span {
    display:block;
    margin-top:20px;
  }
  .article-page {
    padding-top:125px;
  }
  .article-header h1 {
    font-size:43px;
  }
  .article-lede {
    font-size:16px;
    margin-top:22px;
  }
  .article-layout {
    grid-template-columns:1fr;
    gap:40px;
    margin-top:42px;
    padding-bottom:60px;
  }
  .article-sidebar {
    position:static;
  }
  .article-body {
    font-size:15px;
  }
  .article-body h2 {
    font-size:27px;
  }
  .article-table {
    font-size:11px;
  }
  .article-table th,.article-table td {
    padding:12px 6px;
  }
  .error-page h1 {
    font-size:45px;
  }
  .no-js .site-header {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    margin:16px auto 0;
    flex-wrap:wrap;
    border-radius:24px;
  }
  .no-js .nav-links {
    position:static;
    border:0;
    padding:0;
    box-shadow:none;
    order:3;
    flex-direction:row;
    flex-wrap:wrap;
    width:100%;
    gap:12px;
  }
  .no-js .nav-links>a {
    font-size:12px;
    min-height:44px;
  }
  .no-js .hero {
    padding-top:60px;
  }
}

@media(max-width:370px) {
  .brand {
    font-size:16px;
    gap:7px;
  }
  .brand img {
    width:26px;
    height:26px;
  }
  .nav-download {
    padding:10px;
    font-size:12px;
  }
  .hero h1 {
    font-size:49px;
  }
  .hero-cta {
    gap:10px;
  }
  .hero-cta .store-button {
    padding:11px 18px;
  }
  .hero-cta .text-link {
    font-size:12px;
  }
  .note-left {
    left:-5px;
  }
  .note-right {
    right:-5px;
  }
  .proof-strip {
    gap:15px;
    font-size:9px;
  }
  .feature-tabs button {
    font-size:12px;
    padding-inline:9px;
  }
  .section h2 {
    font-size:34px;
  }
  .feature-content {
    padding-inline:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}

/* Keep decorative artwork inside its section and compact navigation unbroken. */
.manifesto {
  overflow:hidden;
}

.brand,.nav-download,.menu-toggle {
  flex-shrink:0;
}

.nav-download {
  white-space:nowrap;
}

@media(max-width:760px) {
  .desktop-break {
    display:none;
  }
}

@media(max-width:370px) {
  .site-header {
    gap:6px;
    padding-inline:12px;
  }
  .nav-download {
    gap:8px;
  }
  .note-right {
    display:none;
  }
}

/* DOM order places the disclosure before its links for forward keyboard navigation. */
.nav-links {
  order:1;
}

.nav-download {
  order:2;
}

.menu-toggle {
  order:3;
}

/* Preserve the complete App Store artwork; expose only its real screen in each mockup.
   Source size 1290×2796; screen rectangle x=190, y=675, width=910, height=1975. */
.phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 910 / 1975;
  overflow: hidden;
  border-radius: 30px;
}
.phone-screen img {
  position: absolute;
  left: -20.87912088%;
  top: -34.17721519%;
  width: 141.75824176%;
  max-width: none;
  height: auto;
  border-radius: 0;
}
.phone:after {
  content: none;
}
@media (max-width: 760px) {
  .phone-screen {
    border-radius: 24px;
  }
  .showcase .phone-screen img {
    border-radius: 0;
  }
}

/* The landing page follows the reduction process, then answers practical doubts. */
.hero-description { max-width:550px; }
.intro h2 { max-width:760px; margin-inline:auto; }
.feature-content h3 { text-wrap:balance; }
.reduction { background:#f2f6fc; }
.section-cta { display:flex; justify-content:center; align-items:center; gap:26px; margin-top:42px; }
.section-cta p { max-width:260px; color:var(--muted); font-size:14px; }
.getting-started .small-features { margin-top:40px; }
.research { background:#f0edfa; }
.research-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.research h2 { max-width:500px; }
.research-intro { max-width:510px; margin-top:24px; font-size:16px; line-height:1.8; color:#4d5262; }
.creator-credit { margin-top:30px; font-size:12px; color:#565b6b; }
.research-sources { padding-top:8px; }
.research-link { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:21px 0; border-top:1px solid #d5cee5; text-decoration:none; }
.research-link strong { display:block; font-size:16px; font-weight:600; line-height:1.5; }
.research-link small { display:block; margin-top:6px; color:#565b6b; font-size:12px; line-height:1.6; }
.research-link:hover strong { text-decoration:underline; text-underline-offset:4px; }
.research-link>span:last-child { font-size:22px; flex-shrink:0; }
.research-detail { border-top:1px solid #d5cee5; padding-top:18px; margin-top:2px; }
.research-detail summary { cursor:pointer; font-size:13px; line-height:1.6; font-weight:600; padding-block:8px; }
.research-detail p { margin-top:12px; font-size:13px; color:#565b6b; line-height:1.75; }
.guides { padding-block:70px; }
.guides h2 { font-size:clamp(32px,4vw,46px); }
.guides .guide-art { height:150px; }
.guide-illustration { font-size:20px; }
@media(max-width:1000px) {
  .research-layout { gap:40px; }
}
@media(max-width:760px) {
  .hero h1 { font-size:clamp(44px,10.6vw,72px); }
  .hero-description { max-width:440px; }
  .section-cta { flex-direction:column; text-align:center; gap:12px; margin-top:30px; }
  .research-layout { grid-template-columns:1fr; gap:32px; }
  .research-intro { font-size:14px; margin-top:20px; }
  .research-link { padding-block:18px; }
  .research-link strong { font-size:15px; }
  .getting-started .small-features { margin-top:28px; }
  .guides { padding-block:50px; }
}