@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-variable.woff2') format('woff2'); }

:root {
  --content: 1180px; --gutter: clamp(1rem, 4vw, 3rem); --edge: max(var(--gutter), calc((100% - var(--content)) / 2));
  --bg: #e9f0ed; --bg-alt: #dce5e0; --surface: #f8faf9; --surface-muted: #f1f5f2;
  --fg: #1a1a1a; --mark: #00a83e; --fg-2: #4a4a4a; --fg-3: #69736f; --border: #c7d1cc; --border-subtle: #dbe3df;
  --accent: #1a1a1a; --accent-fg: #fff; --radius: 1rem; --radius-lg: 1.4rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0d0f0e; --bg-alt:#151918; --surface:#1c1f1e; --surface-muted:#171b19; --fg:#f0f4f2; --mark:#39ff14; --fg-2:#b0b8b4; --fg-3:#84908a; --border:#303733; --border-subtle:#252c28; --accent:#f0f4f2; --accent-fg:#101211; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#0d0f0e; --bg-alt:#151918; --surface:#1c1f1e; --surface-muted:#171b19; --fg:#f0f4f2; --mark:#39ff14; --fg-2:#b0b8b4; --fg-3:#84908a; --border:#303733; --border-subtle:#252c28; --accent:#f0f4f2; --accent-fg:#101211; color-scheme:dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.nav { height:56px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 var(--edge); border-bottom:1px solid var(--border-subtle); background:color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; font-size:.76rem; letter-spacing:.12em; font-weight:750; }
/* The mark is taller than the sticky nav; centred, its top would run past
   the top of the window, so it hangs below the bar instead. */
.nav .brand { margin-top:36px; }
.brand svg { width:68px; height:78px; flex-shrink:0; fill:var(--mark); }
.nav__right { display:flex; align-items:center; gap:.75rem; }
.nav__link { color:var(--fg-2); text-decoration:none; font-size:.875rem; }
.nav__link:hover { color:var(--fg); }
.theme-toggle { position:relative; display:inline-flex; align-items:center; width:48px; height:28px; padding:0; flex-shrink:0; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--surface) 40%, transparent); color:var(--fg-2); cursor:pointer; transition:background 220ms ease,border-color 220ms ease; }
.theme-toggle[aria-checked="true"] { background:color-mix(in srgb, var(--fg) 18%, transparent); border-color:color-mix(in srgb, var(--fg) 35%, transparent); }
.theme-toggle__thumb { position:absolute; left:3px; display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:#fff; color:#444; box-shadow:0 1px 4px rgb(0 0 0 / .18); transition:transform 220ms cubic-bezier(.4,0,.2,1); }
.theme-toggle[aria-checked="true"] .theme-toggle__thumb { transform:translateX(20px); }
.theme-toggle__thumb .icon-sun,.theme-toggle__thumb .icon-moon { position:absolute; transition:opacity 150ms ease; }
.theme-toggle[aria-checked="true"] .icon-sun,.theme-toggle[aria-checked="false"] .icon-moon { opacity:0; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.65rem; padding:.66rem 1rem; border-radius:.65rem; background:var(--accent); color:var(--accent-fg); text-decoration:none; font-size:.9rem; font-weight:650; border:1px solid var(--accent); transition:transform 160ms ease, box-shadow 160ms ease; }
.button:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgb(0 0 0 / .12); }
.button--quiet { background:transparent; color:var(--fg); border-color:var(--border); }
.button--quiet:hover { border-color:var(--fg-3); box-shadow:none; }
.hero { padding:clamp(4rem, 9vw, 7.25rem) var(--edge) clamp(3.5rem, 7vw, 5.5rem); text-align:center; background:radial-gradient(ellipse 70% 65% at 50% 0%, color-mix(in srgb, var(--bg-alt) 85%, transparent), transparent 68%); }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; color:var(--fg-2); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.eyebrow::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--fg); }
h1 { max-width:15ch; margin:.85rem auto 1rem; font-size:clamp(2.5rem, 6vw, 4.8rem); letter-spacing:-.06em; line-height:1.01; text-wrap:balance; }
.hero p { max-width:39rem; margin:0 auto; color:var(--fg-2); font-size:clamp(1rem, 1.5vw, 1.15rem); text-wrap:balance; }
.beta-note { display:inline-flex; align-items:flex-start; gap:.5rem; max-width:44rem; margin-top:1.75rem; padding:.75rem .95rem; border:1px solid var(--border); border-radius:.75rem; background:color-mix(in srgb, var(--surface) 75%, transparent); color:var(--fg-2); font-size:.86rem; text-align:left; }
.beta-note svg { flex:none; width:17px; margin-top:.1rem; }
.plans { max-width:var(--content); margin:0 auto; padding:0 var(--gutter) clamp(4.5rem, 8vw, 7rem); display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; align-items:stretch; }
.plan { position:relative; padding:1.5rem; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); display:flex; flex-direction:column; }
.plan--featured { border:2px solid var(--fg); padding:calc(1.5rem - 1px); box-shadow:0 15px 42px -25px rgb(0 0 0 / .42); }
.flag { position:absolute; top:-.82rem; left:1.35rem; padding:.25rem .6rem; border-radius:999px; background:var(--fg); color:var(--bg); font-size:.71rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.plan__name { font-size:1.22rem; font-weight:720; letter-spacing:-.025em; }
.plan__intro { min-height:4.6em; margin:.35rem 0 1.35rem; color:var(--fg-2); font-size:.93rem; }
.price { display:flex; align-items:baseline; gap:.35rem; margin-bottom:.15rem; }
.price b { font-size:2.65rem; line-height:1; letter-spacing:-.065em; }
.price span { color:var(--fg-2); font-size:.9rem; }
.price-note { min-height:2.8em; margin:0 0 1.25rem; color:var(--fg-3); font-size:.78rem; }
.plan hr { width:100%; border:0; border-top:1px solid var(--border-subtle); margin:0 0 1.05rem; }
.plan ul { list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.68rem; color:var(--fg-2); font-size:.89rem; }
.plan li { display:grid; grid-template-columns:1rem 1fr; gap:.55rem; }
.plan li::before { content:"✓"; color:var(--fg); font-weight:750; }
.plan .button { margin-top:auto; width:100%; }
.section { padding:clamp(4rem, 8vw, 6.5rem) var(--edge); border-top:1px solid var(--border-subtle); }
.section__head { max-width:42rem; margin:0 auto 2.5rem; text-align:center; }
.section__head h2 { margin:.55rem 0 .8rem; font-size:clamp(1.8rem, 3.8vw, 3rem); line-height:1.06; letter-spacing:-.05em; text-wrap:balance; }
.section__head p { color:var(--fg-2); margin:0; }
.included { max-width:var(--content); margin:auto; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.included__item { padding:1.4rem; border-right:1px solid var(--border); }
.included__item:last-child { border-right:0; }
.included__item svg { width:22px; height:22px; margin-bottom:.7rem; }
.included__item h3 { margin:0 0 .25rem; font-size:1rem; letter-spacing:-.02em; }
.included__item p { margin:0; color:var(--fg-2); font-size:.89rem; }
.details { max-width:52rem; margin:auto; }
details { border-top:1px solid var(--border); }
details:last-child { border-bottom:1px solid var(--border); }
summary { cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; font-weight:650; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:.1rem; top:.98rem; color:var(--fg-3); font-size:1.35rem; font-weight:400; }
details[open] summary::after { content:"−"; }
details p { max-width:46rem; margin:0 0 1.1rem; color:var(--fg-2); font-size:.92rem; }
.cta { padding:clamp(4rem, 8vw, 6.5rem) var(--edge); background:var(--bg-alt); text-align:center; }
.cta h2 { max-width:16ch; margin:0 auto .8rem; font-size:clamp(2rem, 4vw, 3.4rem); line-height:1.04; letter-spacing:-.055em; text-wrap:balance; }
.cta p { max-width:35rem; margin:0 auto 1.4rem; color:var(--fg-2); }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.5rem var(--edge); border-top:1px solid var(--border-subtle); color:var(--fg-3); font-size:.84rem; }
.footer-links { display:flex; flex-wrap:wrap; gap:.85rem 1.25rem; }
.footer-links a { text-decoration:none; }
.footer-links a:hover { color:var(--fg); }
.theme-transitioning, .theme-transitioning * { transition:background-color 700ms ease, color 700ms ease, border-color 700ms ease, fill 700ms ease !important; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--fg); outline-offset:3px; }
@media (max-width:1050px) { .plans { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:48rem; } }
@media (max-width:800px) { .plans { grid-template-columns:1fr; max-width:31rem; } .plan__intro { min-height:0; } .included { grid-template-columns:1fr; } .included__item { border-right:0; border-bottom:1px solid var(--border); } .included__item:last-child { border-bottom:0; } }
@media (max-width:540px) { .nav__link { display:none; } .nav { padding-inline:1rem; } .nav__right { gap:.45rem; } .button { padding-inline:.8rem; } .hero { padding-inline:1rem; } footer { padding-inline:1rem; } }