*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--obsidian);color:var(--silver);font:400 var(--text-body)/1.55 var(--font-sans);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

.defs{position:absolute;width:0;height:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:60;padding:.75rem 1rem;border-radius:var(--radius-control);background:var(--silver);color:var(--ink);text-decoration:none}
.skip:focus{top:1rem}
.crow{aspect-ratio:1;overflow:visible}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);flex-shrink:0}
.container{width:min(100% - 2 * var(--gutter),var(--content));margin-inline:auto}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--obsidian) 78%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--hairline)}
.nav{display:flex;align-items:center;gap:1.5rem;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none}
.brand .crow{width:30px}
.wordmark{font-weight:800;font-size:.95rem;letter-spacing:.08em}
.nav-links{display:flex;gap:.25rem;margin-left:auto}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border-radius:var(--radius-control);color:var(--mist);font-size:var(--text-small);text-decoration:none;transition:color var(--duration-fast),background var(--duration-fast)}
.nav-links a:hover{color:var(--silver);background:#ffffff0d}
.mobile-navigation{display:none;margin-left:auto}
.mobile-navigation summary{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:var(--radius-control);box-shadow:inset 0 0 0 1px var(--edge);font-size:var(--text-small);list-style:none;cursor:pointer}
.mobile-navigation summary::-webkit-details-marker{display:none}
.mobile-navigation nav{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% + .5rem);display:grid;padding:.5rem;border-radius:var(--radius-object);background:var(--graphite);box-shadow:var(--shadow-object)}
.mobile-navigation nav a{display:flex;align-items:center;min-height:48px;padding:0 1rem;border-radius:10px;text-decoration:none}
.mobile-navigation nav a:hover{background:#ffffff0d}

/* Buttons and controls */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.4rem;border:0;border-radius:var(--radius-control);background:var(--ember);color:var(--ink);font-size:var(--text-small);font-weight:600;text-decoration:none;transition:transform var(--duration-fast) var(--ease),background var(--duration-fast),box-shadow var(--duration-normal)}
.button:hover{background:#f3ab9e;box-shadow:0 12px 30px -12px #ed978799}
.button:active{transform:scale(.97)}
.button-quiet{background:transparent;color:var(--silver);box-shadow:inset 0 0 0 1px var(--edge)}
.button-quiet:hover{background:#ffffff0f;box-shadow:inset 0 0 0 1px #6a6c75}
.button-small{min-height:44px;padding:0 1.1rem}
.icon-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration-fast) var(--ease)}
a:hover>.icon-arrow,button:hover>.icon-arrow{transform:translateX(3px)}
.icon-button{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#ffffff0f;font-size:1.25rem;line-height:1;transition:background var(--duration-fast)}
.icon-button:hover{background:#ffffff1f}
.segmented{display:inline-flex;flex-wrap:wrap;gap:.25rem;padding:.25rem;border-radius:var(--radius-control);background:#ffffff0a;box-shadow:inset 0 0 0 1px var(--hairline)}
.segmented button{min-height:44px;padding:0 1.1rem;border:0;border-radius:var(--radius-control);background:transparent;color:var(--pewter);font-size:var(--text-small);font-weight:500;transition:color var(--duration-fast),background var(--duration-normal) var(--ease)}
.segmented button:hover{color:var(--silver)}
.segmented button[aria-pressed=true]{background:var(--silver);color:var(--ink)}

/* Sections */
.section{padding-block:var(--space-section)}
.section-lg{padding-block:var(--space-section-lg)}
.section-intro{margin-bottom:clamp(3rem,2rem + 4vw,6rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--pewter);font-size:var(--text-label);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.section-title{margin-top:1.25rem;font-size:var(--text-h2);font-weight:300;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
.section-lead{max-width:34rem;margin-top:1.5rem;color:var(--mist);font-size:var(--text-lead);line-height:1.5;text-wrap:pretty}

.compat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;padding-block:2.5rem;border-block:1px solid var(--hairline)}
.compat p{color:var(--pewter);font-size:var(--text-small)}
.compat-list{display:flex;flex-wrap:wrap;gap:1rem 3rem;color:var(--mist);font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.compat-list code{font-family:var(--font-mono);font-size:1rem}

.closing{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2rem}
.closing h2{font-size:var(--text-h2);font-weight:300;letter-spacing:-.045em;line-height:.95}
.closing p{margin:1.5rem 0 2rem;color:var(--mist);font-size:var(--text-lead)}
.closing-bird{width:clamp(140px,22vw,320px)}
.footer{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding-block:3rem;border-top:1px solid var(--hairline);color:var(--pewter);font-size:var(--text-small)}
.footer-links{display:flex;gap:.25rem;margin-left:auto}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;text-decoration:none}
.footer-links a:hover{color:var(--silver)}

.plan-dialog{width:min(32rem,100% - 2 * var(--gutter));padding:2rem;border:0;border-radius:20px;background:var(--graphite);color:var(--silver);box-shadow:var(--shadow-object)}
.plan-dialog::backdrop{background:#000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog-header{display:flex;align-items:start;justify-content:space-between;gap:1rem}
.dialog-header h2{font-size:var(--text-h3);font-weight:300;letter-spacing:-.03em;line-height:1.05}
.plan-dialog p{margin:1rem 0 1.5rem;color:var(--mist)}

@media (max-width:859px){.nav-links{display:none}.mobile-navigation{display:block}}
@media (max-width:600px){.nav-cta{display:none}.closing{grid-template-columns:1fr}.closing-bird{width:140px}.footer-links{margin-left:0}}
.browser-chrome{display:flex;align-items:center;gap:1rem;height:40px;padding:0 1rem;background:#26272c;color:var(--pewter)}
.window-dots{display:flex;gap:6px}
.window-dots i{width:9px;height:9px;border-radius:50%;background:#55575f}
.browser-address{display:flex;align-items:center;gap:.5rem;margin-inline:auto;padding:.3rem 1rem;border-radius:var(--radius-control);background:var(--obsidian);font:var(--text-label)/1 var(--font-mono)}
.browser-address svg{width:9px;fill:none;stroke:currentColor}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}