:root{color-scheme:dark;--bg:#0b0b0c;--panel:#19191c;--line:#343437;--white:#f4f4f5;--muted:#b9b9bf;--accent:#dedee2}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--white);font:16px/1.6 system-ui,sans-serif}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.shell{width:min(1160px,calc(100% - 64px));margin:auto}
header{border-bottom:1px solid var(--line)}
.header,footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:720;letter-spacing:-.02em}
.mark{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid #54545b;border-radius:10px;color:var(--accent);background:#28282d}
nav{display:flex;gap:24px;flex-wrap:wrap} nav a{color:var(--muted);text-decoration:none}nav a:hover,nav a[aria-current]{color:var(--white);text-decoration:underline}
.badge,.eyebrow,.demo small,.number{font-size:.72rem;letter-spacing:.14em;font-weight:720;color:var(--accent)}
.badge{border:1px solid var(--line);padding:5px 9px;border-radius:99px;white-space:nowrap}
.hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:66px;padding:98px 0 94px}
h1,h2,h3,p,figure{margin:0}
h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:1.04}
h1{font-size:clamp(3rem,6.2vw,6rem);margin:15px 0 25px}
h1 em{color:var(--accent);font-weight:400}
h2{font-size:clamp(2rem,4vw,3.65rem);margin:12px 0 25px}
h3{font-size:1.16rem;line-height:1.28;margin:11px 0}
p{color:var(--muted)} .lead{font-size:1.12rem;max-width:52ch}
.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}.actions>span,footer small{color:var(--muted);font-size:.82rem}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--accent);color:#18181a;border-radius:8px;padding:11px 17px;text-decoration:none;font-weight:730}.button:hover{background:#f5f5f7}
.demo{background:radial-gradient(ellipse at top right,#303035,var(--panel) 66%);border:1px solid #424247;border-radius:20px;padding:23px;box-shadow:0 24px 80px #00000080}
.demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:25px}.demo-head>span{display:flex;align-items:center;gap:9px;font-weight:650}
.bubble{padding:12px 15px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#141416;margin-right:10%}.bubble p{color:var(--white);margin-top:4px}.bubble.answer{margin:0 0 18px 10%;background:#29292e}
.demo-foot{display:flex;gap:8px;align-items:center;font-size:.83rem;color:var(--accent)}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}figcaption{margin-top:13px;color:var(--muted);font-size:.77rem}
.section{padding:58px 0;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr));gap:15px}
.cards article{border:1px solid var(--line);border-radius:13px;padding:21px;background:var(--panel)}
.pricing{padding-top:64px;border-top:0}
.price-cards{margin-top:32px;gap:18px}
.price-cards article{display:flex;flex-direction:column;padding:24px}
.price-cards h2{font-family:inherit;font-size:1.32rem;font-weight:680;letter-spacing:-.02em;margin:10px 0}
.price-cards .price{margin-top:auto;padding-top:20px;color:var(--white)}
.price strong{font-size:2.6rem;letter-spacing:-.06em}.price span{font-size:.9rem;color:var(--muted)}
.price-cards ul{border-top:1px solid var(--line);margin:10px 0 0;padding:14px 0 0 20px;color:var(--muted)}
.price-cards li+li{margin-top:6px}
.narrow{max-width:740px;margin:auto}.band .cards article{background:#151517}
details{border-bottom:1px solid var(--line);padding:13px 0}summary{cursor:pointer;font-weight:650}details p{margin:8px 0 4px}
.end{text-align:center}.end p{margin:0 0 18px}
footer{border-top:1px solid var(--line)}
.policy{display:grid;grid-template-columns:210px minmax(0,720px);justify-content:space-between;gap:48px;padding:65px 0}
.policy aside{align-self:start;position:sticky;top:24px;display:grid;gap:12px;border-left:1px solid var(--line);padding-left:16px}.policy aside a{color:var(--muted);font-size:.9rem}
.policy h1{font-size:clamp(2.8rem,6vw,5.4rem)}.policy section{border-top:1px solid var(--line);margin-top:26px;padding-top:15px;scroll-margin-top:20px}.policy h2{font-size:clamp(1.65rem,3vw,2.25rem);margin-bottom:10px}.reference{margin-top:28px}
.skip{position:absolute;left:10px;top:-80px;padding:8px;background:var(--accent);color:#18181a}.skip:focus{top:8px}
@media(max-width:850px){.hero{gap:30px;padding:60px 0}.policy{grid-template-columns:160px 1fr;gap:26px}}
@media(max-width:650px){.shell{width:calc(100% - 32px)}.header,footer{flex-wrap:wrap;gap:12px}.header nav{order:3;width:100%}.hero,.policy{grid-template-columns:1fr}.hero{padding:48px 0;gap:30px}.policy{padding:35px 0}.policy aside{position:static}.section{padding:38px 0}.demo{padding:17px}}

/* Editorial graphite theme. Each surface has a distinct role. */
:root {
  --bg:#09090a; --panel:#19191b; --line:#2c2c30;
  --white:#f5f5f6; --muted:#b7b7bf; --accent:#dedee3;
}
body {
  background: radial-gradient(ellipse 850px 520px at 72% 210px,#232325 0%,#111112 50%,var(--bg) 100%) fixed;
}
header { background:#0e0e10; }
.header { min-height:76px; }
.header nav a { padding:7px 13px; border-radius:7px; }
.header nav a[aria-current] { background:#242426; text-decoration:none; }
.badge { color:#d2d2d7; background:#1d1d20; border-color:#38383d; }
.mark { background:linear-gradient(155deg,#36363b,#19191c); border-color:#49494f; }
.eyebrow { color:#c0c0c8; }
.hero { position:relative; gap:clamp(32px,6vw,88px); padding-block:clamp(65px,9vw,135px); }
.hero h1 { font-size:clamp(3rem,6vw,6.1rem); line-height:.98; }
h1 em { color:#b7b7be; }
.hero .lead { color:#c3c3ca; }
.button { background:#f0f0f2; border:1px solid #fff; box-shadow:0 6px 20px #0005; }
.button:hover { background:#fff; }
.demo {
  padding:24px; border:1px solid #4b4b51; border-radius:22px;
  background:linear-gradient(150deg,#353538,#222225 44%,#17171a);
  box-shadow:inset 0 1px #ffffff15,0 22px 62px #0009;
}
.demo-head { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid #46464c; }
.bubble { background:#161618; border-color:#37373d; }
.bubble.answer { background:#37373d; border-color:#4c4c55; }
.demo-foot { border-top:1px solid #414148; padding-top:14px; }
.dot { box-shadow:0 0 8px #ffffff62; }
.section { padding-block:clamp(46px,7vw,90px); }
.cards article {
  background:linear-gradient(150deg,#242427,#151517 85%);
  border-color:#36363b; box-shadow:inset 0 1px #ffffff09;
}
.cards article:nth-child(even) { background:linear-gradient(150deg,#2b2b2f,#1c1c1f 85%); }
.number {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:29px; border:1px solid #45454b; border-radius:6px;
  background:#151517; color:#cfcfd5; font-variant-numeric:tabular-nums;
}
.band {
  background:linear-gradient(115deg,#252528,#161618 76%); border:1px solid #37373c;
  border-radius:24px; padding-inline:clamp(20px,5vw,60px);
}
.band .cards article { background:linear-gradient(150deg,#2e2e32,#202022); }
.price-cards article:nth-child(2) {
  background:linear-gradient(155deg,#3a3a3e,#242428 70%);
  border-color:#626269;
}
.price strong { color:#fff; }
.policy aside { background:#1a1a1d; border:1px solid #343438; border-radius:12px; padding:17px; }
.policy article { background:linear-gradient(150deg,#202023,#141416); border:1px solid #333338; border-radius:18px; padding:clamp(20px,4vw,44px); }
.policy article .lead { margin-bottom:28px; }
.end { background:radial-gradient(ellipse at 50% 80%,#222225,transparent 72%); }
@media(max-width:650px) {
  body { background:linear-gradient(155deg,#171719,var(--bg) 580px); }
  .header { min-height:0; }
  .header nav a { padding-inline:8px; }
  .hero { padding-block:52px; gap:32px; }
  .demo { padding:17px; }
  .section { padding-block:42px; }
}

/* Restrained monochrome finish. Keep the strongest contrast for the content. */
body { background:#0d0d0e; }
header { background:#0d0d0e; }
.header { min-height:68px; }
.header nav { gap:8px; }
.header nav a { font-size:.91rem; }
.header nav a[aria-current] { background:#202022; }
.badge { background:transparent; font-size:.62rem; color:#aaaab1; }
.brand { font-size:.98rem; }
.mark { width:32px; height:32px; border-radius:8px; background:#262628; }
.hero { grid-template-columns:1.15fr .85fr; padding-block:100px; gap:clamp(30px,6vw,86px); }
h1,h2 { font-family:system-ui,sans-serif; font-weight:650; letter-spacing:-.055em; }
.hero h1 { font-size:clamp(2.9rem,5.5vw,5.2rem); line-height:1.02; margin:18px 0 21px; }
h1 em { color:#a8a8b0; font-weight:inherit; font-style:normal; }
.hero .lead { color:#bcbcc3; max-width:39ch; }
.actions { gap:24px; }
.quiet-link { color:#bdbdc4; font-weight:590; font-size:.9rem; }
.button { border-radius:7px; box-shadow:none; font-size:.9rem; }
.demo { background:#1c1c1f; border-color:#36363b; padding:20px; border-radius:14px; box-shadow:0 16px 44px #0005; }
.demo-head { border-color:#333337; margin-bottom:15px; padding-bottom:15px; }
.demo-head>span { gap:12px; }
.demo .demo-subtitle { display:block; color:#aaaab1; font-size:.72rem; font-weight:450; letter-spacing:0; }
.demo .bubble { padding:11px 13px; border-radius:8px; background:#131315; border-color:#303033; }
.demo .bubble.answer { background:#2a2a2e; border-color:#3e3e43; }
.bubble p { font-size:.93rem; }
.demo-foot { border-color:#333337; color:#c4c4ca; font-size:.77rem; }
.dot { box-shadow:none; }
.section { padding-block:clamp(42px,6vw,72px); }
.section h2 { font-size:clamp(1.9rem,3.6vw,3rem); }
.cards article,.cards article:nth-child(even) { background:#19191b; border-color:#303034; box-shadow:none; }
.cards article p { font-size:.93rem; }
.number { background:transparent; border:0; width:auto; height:auto; color:#a9a9b1; }
.band { background:#161618; border-color:#2d2d31; border-radius:16px; }
.band .cards article { background:#202023; }
.price-cards article:nth-child(2) { background:#262629; border-color:#56565d; }
.price-cards h2 { font-size:1.28rem; }
.policy article { background:#18181a; }
.end { background:none; }
@media(max-width:650px) {
  .hero { grid-template-columns:1fr; padding-block:54px; }
  .hero h1 { font-size:clamp(2.45rem,10vw,3.7rem); }
  .header { min-height:0; }
}

/* Policy pages: lists and tables */
.policy ul{margin:10px 0 16px;padding-left:22px;color:var(--muted)}.policy li+li{margin-top:8px}.policy li strong,.policy p strong{color:var(--white)}
.policy section p+p{margin-top:12px}.policy a{color:var(--white)}
.policy table{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
.policy th,.policy td{text-align:left;padding:10px 12px;border:1px solid var(--line);vertical-align:top;color:var(--muted)}.policy th{color:var(--white);background:#202023}
@media(max-width:650px){.policy table{display:block;overflow-x:auto}}

/* Finishing pass: header actions, three-up cards, spacing */
.header-end{display:flex;align-items:center;gap:14px}
.join{font-size:.85rem;font-weight:650;color:#18181a;background:#f0f0f2;border-radius:7px;padding:8px 13px;text-decoration:none;white-space:nowrap}.join:hover{background:#fff}
.mark svg{display:block}
@media(min-width:720px){.cards{grid-template-columns:repeat(3,1fr)}.cards:has(> :nth-child(4)){grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}.price-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.cards{grid-template-columns:1fr}.join{display:none}}
.end p{max-width:46ch;margin:0 auto 20px}
.hero .actions .quiet-link{text-decoration:none;border-bottom:1px solid #4a4a50;padding-bottom:2px}
footer small a{color:var(--muted)}
footer{flex-wrap:wrap}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.parent-note{margin-top:8px}.parent-note .lead{max-width:60ch}

/* two plans */
@media(min-width:720px){.price-cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}}

.signin{font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none;padding:8px 6px}.signin:hover{color:var(--white)}

.other-prices{margin-top:2px;font-size:.88rem;color:var(--muted)}
