@font-face{font-family:"Geist";src:url('/assets/geist-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist";src:url('/assets/geist-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/assets/geist-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url('/assets/geist-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --black:#000000;--white:#ffffff;--blue:#15b9eb;--green:#00c896;--red:#ff4d4d;
  --yellow:#f2e863;--orange:#ff8c42;--violet:#8c6cff;
  --gray-050:#f8f8f7;--gray-100:#f0f0ee;--gray-200:#deded9;--gray-300:#c1c0b8;
  --gray-400:#989898;--gray-500:#7c7c7c;--gray-600:#656565;--gray-700:#464646;
  --gray-800:#3d3d3d;--gray-900:#282828;--gray-950:#1a1a1a;
  --white-90:rgba(255,255,255,.9);--white-80:rgba(255,255,255,.8);--white-70:rgba(255,255,255,.7);
  --white-60:rgba(255,255,255,.6);--white-50:rgba(255,255,255,.5);--white-40:rgba(255,255,255,.4);
  --white-30:rgba(255,255,255,.3);--white-20:rgba(255,255,255,.2);--white-10:rgba(255,255,255,.1);
  --white-04:rgba(255,255,255,.04);
  --black-50:rgba(0,0,0,.5);--black-40:rgba(0,0,0,.4);--black-20:rgba(0,0,0,.2);--black-10:rgba(0,0,0,.1);--black-04:rgba(0,0,0,.04);
  --color-font:#020202;--color-background:#f2f2f2;--color-background-alt:#111111;
  --green-50:color-mix(in oklab,var(--green) 10%,var(--white));
  --green-100:color-mix(in oklab,var(--green) 18%,var(--white));
  --green-400:color-mix(in oklab,var(--green) 78%,var(--white));
  --green-600:color-mix(in oklab,var(--green) 88%,var(--black));
  --green-700:color-mix(in oklab,var(--green) 72%,var(--black));
  --blue-100:color-mix(in oklab,var(--blue) 14%,var(--white));
  --blue-600:color-mix(in oklab,var(--blue) 74%,var(--black));
  --accent-2:var(--blue);
  --app-screenshot:var(--accent-2);
  --brand:var(--green);--brand-strong:var(--green-600);--brand-contrast:var(--black);
  --bg-page:var(--color-background);--bg-subtle:var(--gray-050);--bg-sunken:var(--gray-100);
  --surface-card:var(--white);--surface-hover:var(--black-04);--surface-active:var(--gray-100);
  --text-strong:var(--color-font);--text-body:var(--gray-800);--text-muted:var(--gray-600);--text-faint:color-mix(in oklab, var(--gray-500) 30%, var(--gray-600));
  --border-hairline:var(--gray-200);--border-strong:var(--gray-300);
  --focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--color-font);

  --font-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --font-display:"Geist","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --weight-regular:400;--weight-medium:500;
  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;
  --text-lg:20px;--text-xl:24px;--text-2xl:32px;--text-3xl:40px;--text-4xl:56px;
  --leading-tight:1.05;--leading-normal:1.45;--leading-relaxed:1.6;
  --tracking-display:-0.035em;--tracking-heading:-0.02em;--tracking-body:-0.005em;--tracking-caps:0.08em;
  --type-body-lg:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-ui:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/1.35 var(--font-sans);
  --type-eyebrow:var(--weight-medium) var(--text-xs)/1.2 var(--font-sans);

  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-20:80px;--space-24:96px;
  --container-max:1200px;--gutter-page-lg:48px;--section-y:96px;--header-height:64px;

  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--radius-full:999px;
  --shadow-xs:0 1px 1px var(--black-04);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 1px var(--black-04);
  --blur-panel:saturate(180%) blur(20px);

  --duration-fast:120ms;--duration-base:180ms;--duration-slow:260ms;
  --ease-standard:cubic-bezier(.2,0,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
}
.oa-dark{
  --bg-page:var(--color-background-alt);--bg-subtle:var(--gray-950);
  --surface-card:var(--gray-950);--surface-hover:var(--white-04);--surface-active:var(--white-10);
  --text-strong:var(--white);--text-body:var(--white-70);--text-muted:var(--white-60);--text-faint:var(--white-50);
  --border-hairline:var(--white-10);--border-strong:var(--white-20);
  --focus-ring:0 0 0 2px var(--bg-page),0 0 0 4px var(--green);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-background-alt);color:var(--text-body);font:var(--type-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3{margin:0;color:var(--text-strong);font-weight:var(--weight-medium);letter-spacing:var(--tracking-heading)}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
::selection{background:var(--green-100);color:var(--gray-950)}
svg{display:block}
.container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter-page-lg)}
@media (max-width:900px){.container{padding-inline:var(--space-6)}}

@keyframes fade-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-muted)}
.mono{font-family:var(--font-mono)}

.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}

.brand{display:inline-flex;align-items:center;gap:8px}
.brand-tile{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:color-mix(in oklab,var(--app-screenshot) 16%,transparent);color:var(--app-screenshot)}
.brand-word{font:var(--weight-medium) 17px/1 var(--font-display);letter-spacing:-0.04em;color:var(--text-strong)}
.brand-word .muted{color:var(--text-muted)}
.brand-word .dot{color:var(--app-screenshot)}

[data-icon]{display:inline-flex;flex:none}
.social-x{display:inline-flex;flex:none;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:var(--radius-md);font:var(--type-ui);white-space:nowrap;transition:var(--transition-control);border:1px solid transparent}
.btn:active{transform:translateY(0.5px)}
.btn-primary{background:var(--brand);color:var(--brand-contrast)}
.btn-primary:hover{background:var(--green-400)}
.btn-primary:active{background:var(--green-600)}
.btn-secondary{background:var(--white-04);color:var(--white);border-color:var(--white-20)}
.btn-secondary:hover{background:var(--white-10)}
.btn-sm{height:38px;padding:0 16px;font-size:var(--text-sm)}.btn-lg{height:48px;padding:0 24px;font-weight:600}.hero-ctas .btn-secondary{height:38px;padding:0 16px;font-size:var(--text-sm)}.hero-note{margin-top:12px;font:var(--type-caption);color:var(--white-50);text-align:center}

.site-header{position:sticky;top:0;z-index:40;background:color-mix(in oklab,var(--color-background-alt) 78%,transparent);backdrop-filter:var(--blur-panel);-webkit-backdrop-filter:var(--blur-panel);border-bottom:1px solid var(--border-hairline)}
.site-header .container{display:flex;align-items:center;gap:32px;height:var(--header-height)}
.site-nav{display:flex;gap:24px;flex:1}
.site-nav a{font:var(--type-ui);color:var(--text-muted);transition:color var(--duration-fast) var(--ease-standard)}
.site-nav a:hover{color:var(--text-strong)}
.header-actions{display:flex;align-items:center;gap:20px}
/* :not(.btn) — a bare `.header-actions>a` is (0,1,1) and outranks
   `.btn-primary` (0,1,0), so it repainted the button's own label 60%
   white on green: 2.16:1, under AA. */
.header-actions>a:not(.btn){font:var(--type-ui);color:var(--text-muted)}
.header-actions>a:not(.btn):hover{color:var(--text-strong)}
@media (max-width:760px){
  .site-header .container{flex-wrap:wrap;height:auto;padding-block:10px;gap:0 16px}
  .site-nav{order:3;flex-basis:100%;gap:18px;padding-block:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--space-6) * -1);padding-inline:var(--space-6)}
  .site-nav::-webkit-scrollbar{display:none}
  .header-actions{margin-left:auto}
  /* The header is ~104px once the tabs wrap, so an anchored jump has to
     clear the taller bar or it lands under it. */
  :target,[id]{scroll-margin-top:112px}
}
/* The bar is only as wide as its narrowest row allows: at 390 the wordmark
   and the actions together overran by 10px, which is what put a sideways
   scrollbar on the whole document. The GitHub link is the piece that gives
   way — it is in the footer too, so nothing becomes unreachable. */
@media (max-width:430px){
  .site-header .container{gap:0 12px}
  .header-actions{gap:12px}
  .header-actions>a:not(.btn){display:none}
}

.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-hairline)}
.hero-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--white-10) 1px,transparent 1px),linear-gradient(90deg,var(--white-10) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 5%,transparent 65%);mask-image:radial-gradient(120% 80% at 50% 0%,#000 5%,transparent 65%)}
.hero-inner{position:relative;display:grid;justify-items:center;text-align:center;gap:22px;padding:76px var(--gutter-page-lg) 0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border-radius:var(--radius-full);border:1px solid var(--border-hairline);background:var(--white-04);font:var(--type-ui);color:var(--white-70)}
.pill [data-icon]{color:var(--app-screenshot)}
.hero h1{max-width:820px;font:var(--weight-medium) var(--text-4xl)/1.02 var(--font-display);letter-spacing:var(--tracking-display);color:var(--white)}
.hero .lead{max-width:560px;font:var(--type-body-lg);color:var(--white-60)}
.hero-ctas{display:flex;gap:10px;margin-top:2px;flex-wrap:wrap;justify-content:center}
@media (max-width:640px){.hero h1{font-size:var(--text-3xl)}}

.mock{width:100%;max-width:920px;margin-top:8px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden;border:1px solid var(--border-hairline);border-bottom:0;background:var(--gray-950);box-shadow:0 40px 80px -20px rgba(0,0,0,.55)}

.rail{overflow:hidden;padding:20px 0;border-bottom:1px solid var(--border-hairline)}
.rail-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.rail-item{margin-right:10px;padding:6px 13px;border-radius:var(--radius-full);border:1px solid var(--border-hairline);background:var(--white-04);font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--white-50);white-space:nowrap}

.statement{border-bottom:1px solid var(--border-hairline)}
.statement .container{max-width:980px;padding-block:88px}
.statement p{font:var(--weight-medium) var(--text-2xl)/1.32 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--white)}
.statement span{display:inline-block;animation:fade-up 500ms var(--ease-out) both}

.pillar-row{border-bottom:1px solid var(--border-hairline)}
#features{padding-block:var(--space-24) 0}
.pillar{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;align-items:center;padding-block:76px}
.pillar.flip{grid-template-columns:1.6fr 1fr}
.pillar.flip .pillar-copy{order:2}
.pillar.flip .pillar-visual{order:1}
.pillar-copy{display:grid;gap:16px}
.pillar-copy .path{color:var(--text-faint)}
.pillar-copy h3{max-width:440px;font:var(--weight-medium) var(--text-xl)/1.35 var(--font-sans);letter-spacing:var(--tracking-heading);color:var(--white)}
.pillar-copy h3 span{color:var(--white-50);font-weight:var(--weight-regular)}

.pillar-copy .pillar-lede{max-width:440px}
.pillar-copy .pillar-lede h3{display:inline;max-width:none}
.pillar-copy .pillar-lede p{display:inline;margin:0;color:var(--white-50);font:var(--weight-regular) var(--text-xl)/1.35 var(--font-sans);letter-spacing:var(--tracking-heading)}
.pillar-links{display:flex;gap:20px;margin-top:2px}
.pillar-links a{display:inline-flex;align-items:center;gap:6px;font:var(--type-ui);transition:color var(--duration-fast) var(--ease-standard)}
.pillar-links a.primary{color:var(--white)}
.pillar-links a.muted{color:var(--white-50)}
.pillar-links a:hover{color:var(--app-screenshot)}
.pillar-row .container{max-width:1320px}
.pillar-visual{border-radius:var(--radius-xl);border:1px solid var(--border-hairline);background:var(--pillar-shot-bg,#0b0e14);overflow:hidden;position:relative}

.viz-stack{position:absolute;inset:0;display:grid;place-items:center}
.viz-stack .band{position:absolute;width:72%;height:34%;border-radius:8px;background:var(--white-04);border:1px solid var(--white-10)}
.viz-stack .band:nth-child(1){transform:translateY(-38px) scale(.92);opacity:.5}
.viz-stack .band:nth-child(2){transform:translateY(-14px) scale(.96);opacity:.75}
.viz-stack .band:nth-child(3){transform:translateY(10px);opacity:1;border-color:color-mix(in oklab,var(--app-screenshot) 40%,var(--white-10));background:color-mix(in oklab,var(--app-screenshot) 10%,transparent)}
.viz-stack .band:nth-child(4){transform:translateY(34px) scale(.96);opacity:.75}
.viz-stack .band:nth-child(5){transform:translateY(58px) scale(.92);opacity:.5}

.viz-annotate{position:absolute;inset:16px;border-radius:8px;background:var(--white-04);border:1px solid var(--white-10)}
.viz-annotate .redact{position:absolute;left:16px;top:20px;width:34%;height:16%;border-radius:4px;background:var(--gray-800);backdrop-filter:blur(6px)}
.viz-annotate .callout{position:absolute;right:14px;bottom:18px;padding:6px 10px;border-radius:6px;background:var(--white);color:var(--gray-950);font:var(--weight-medium) 11px/1.3 var(--font-sans);max-width:120px}
.viz-annotate svg.scribble{position:absolute;inset:0;width:100%;height:100%}

.viz-watermark{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);transform:rotate(-18deg) scale(1.35)}
.viz-watermark span{display:flex;align-items:center;justify-content:center;color:var(--white-20);font:var(--weight-medium) 10px/1 var(--font-sans);letter-spacing:.02em}

.triad{background:var(--black);border-bottom:1px solid var(--border-hairline)}
.triad .container{padding-block:var(--section-y);display:grid;gap:40px}
.triad h2{max-width:760px;font:var(--weight-medium) var(--text-2xl)/1.25 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--white)}
.triad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.triad-grid p{font:var(--type-body-lg);color:var(--white-50);max-width:320px}
.triad-grid b{color:var(--white);font-weight:var(--weight-medium)}
@media (max-width:820px){.triad-grid{grid-template-columns:1fr}}

.pricing{border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.pricing .container{padding-block:var(--section-y)}
.pricing-head{display:grid;gap:10px;margin-bottom:36px;max-width:640px}
.pricing-head h2{font:var(--weight-medium) var(--text-2xl)/1.15 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--text-strong)}
.pricing-head p{font:var(--type-body);color:var(--text-muted)}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.pricing-grid{grid-template-columns:1fr}}
.plan{border:1px solid var(--border-hairline);border-radius:var(--radius-xl);background:var(--surface-card);padding:32px;display:grid;gap:20px;align-content:start}
.plan-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.plan-name span:first-child{font:var(--weight-medium) var(--text-lg)/1 var(--font-display);color:var(--text-strong)}
.plan-price{font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);letter-spacing:.02em;color:var(--text-faint);text-transform:uppercase}
.plan.supporter{border-color:color-mix(in oklab,var(--app-screenshot) 35%,var(--border-hairline));background:color-mix(in oklab,var(--app-screenshot) 4%,var(--surface-card))}
.plan.supporter .plan-price{color:var(--app-screenshot)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan li{display:flex;align-items:flex-start;gap:10px;font:var(--type-body);color:var(--text-body)}
.plan li [data-icon]{color:var(--brand);margin-top:3px}
.plan.supporter li [data-icon]{color:var(--app-screenshot)}
.plan-fine{font:var(--type-caption);color:var(--text-faint);border-top:1px solid var(--border-hairline);padding-top:16px;margin-top:2px}

.faq{border-bottom:1px solid var(--border-hairline)}
.faq .container{padding-block:var(--section-y)}
.faq-head{max-width:640px;display:grid;gap:10px;margin-bottom:12px}
.faq-head h2{font:var(--weight-medium) var(--text-2xl)/1.15 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--white)}
.faq-list{margin:0;border-top:1px solid var(--border-hairline)}
.faq-item{border-bottom:1px solid var(--border-hairline);padding:28px 0;display:grid;grid-template-columns:1fr 1.4fr;gap:32px}
.faq-item dt{font:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);color:var(--white)}
.faq-item dd{margin:0;font:var(--type-body);color:var(--white-60)}
.faq-more{margin:26px 0 0}.notes-list{display:grid;gap:26px;margin:0;max-width:70ch}.notes-list .note-item{display:grid;gap:8px}.notes-list .note-item>a{color:var(--white);font:var(--weight-medium) var(--text-md)/1.35 var(--font-sans)}.notes-list .note-item p{margin:0;font:var(--weight-regular) var(--text-base)/1.5 var(--font-sans);color:var(--white-60)}.pillar-copy .pillar-lede p.inline-more{display:block;margin:14px 0 0;font:var(--weight-regular) var(--text-base)/1.4 var(--font-sans);color:var(--white-60)}
.faq-more a{font:var(--type-ui);color:var(--white);text-decoration:none;border-bottom:1px solid var(--border-hairline);padding-bottom:2px;transition:color var(--duration-fast) var(--ease-standard)}
.faq-more a:hover{color:var(--app-screenshot)}
@media (max-width:700px){.faq-item{grid-template-columns:1fr;gap:8px}}

.cta{border-bottom:1px solid var(--border-hairline)}
.cta .container{padding-block:88px;display:grid;justify-items:center;text-align:center;gap:16px}
.cta h2{max-width:620px;font:var(--weight-medium) var(--text-3xl)/1.08 var(--font-display);letter-spacing:var(--tracking-display);color:var(--white)}
.cta p{max-width:460px;font:var(--type-body-lg);color:var(--white-60)}
.cta .hero-ctas{margin-top:6px}

.site-footer .container{padding:56px var(--gutter-page-lg) 32px;display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:28px}
@media (max-width:900px){.site-footer .container{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.site-footer .container{grid-template-columns:repeat(2,1fr)}}
.footer-about{display:grid;gap:12px;align-content:start}
.footer-about p{font:var(--type-caption);color:var(--white-50);max-width:220px}
.footer-group{display:grid;gap:10px;align-content:start}
.footer-group .eyebrow{color:var(--text-faint)}
.footer-group a{font:var(--type-caption);color:var(--white-60);transition:color var(--duration-fast) var(--ease-standard)}
.footer-group a:hover{color:var(--white)}
.footer-base{border-top:1px solid var(--border-hairline)}
.footer-base .container{padding:20px var(--gutter-page-lg) 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-base .left{font:var(--type-caption);color:var(--text-faint)}
.footer-base .right{display:flex;align-items:center;gap:16px}
.footer-base .right .v{font:var(--weight-regular) 11px/1 var(--font-mono);color:var(--text-faint)}
.footer-base .right a{display:inline-flex;align-items:center;gap:6px;color:var(--white-50);transition:color var(--duration-fast) var(--ease-standard)}
.footer-base .right a:hover{color:var(--white)}
.footer-base .right .ic{flex:none}
.footer-base .right .ic-youtube{color:#ff0000}
.footer-base .right .ic-x{color:#fff}
.footer-base .right .ic-github{color:#fff}


.reveal{opacity:0}
.reveal.in{animation:reveal 620ms var(--ease-out) both}

.article{padding-block:72px 96px}
.article .container{max-width:760px}
.article .eyebrow{display:block;margin-bottom:14px}
.article h1{font:var(--weight-medium) var(--text-3xl)/1.12 var(--font-display);letter-spacing:var(--tracking-display);color:var(--white);margin:0 0 18px}
.article .lead{font:var(--type-body-lg);color:var(--white-70);margin:0 0 40px;max-width:62ch}
.article h2{font:var(--weight-medium) var(--text-xl)/1.3 var(--font-sans);letter-spacing:var(--tracking-heading);color:var(--white);margin:52px 0 14px}
.article h3{font:var(--weight-medium) var(--text-md)/1.35 var(--font-sans);letter-spacing:var(--tracking-heading);color:var(--white);margin:32px 0 10px}
.article p{font:var(--type-body);color:var(--white-60);margin:0 0 16px;max-width:68ch}
.article a{color:var(--app-screenshot);text-decoration:none;border-bottom:1px solid var(--white-20)}
.article a:hover{border-bottom-color:var(--app-screenshot)}
.article ul,.article ol{color:var(--white-60);font:var(--type-body);padding-left:22px;margin:0 0 18px;max-width:68ch}
.article li{margin:0 0 9px}
.article strong{color:var(--white-90);font-weight:var(--weight-medium)}
.article ol.steps{counter-reset:s;list-style:none;padding-left:0}
.article ol.steps>li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:22px}
.article ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:28px;height:28px;
  border-radius:var(--radius-full);background:var(--white-04);border:1px solid var(--white-20);
  color:var(--white);font:var(--weight-medium) var(--text-sm)/1 var(--font-mono);
  display:flex;align-items:center;justify-content:center}
.article .answer{border-left:2px solid var(--app-screenshot);padding:4px 0 4px 18px;margin:0 0 34px}
.article .answer p{font:var(--type-body-lg);color:var(--white-80);margin:0}
.article .note{background:var(--white-04);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);
  padding:18px 20px;margin:28px 0}
.article .note p{margin:0;color:var(--white-70)}
.article .page-cta{margin-top:56px;padding-top:34px;border-top:1px solid var(--border-hairline);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.article .page-cta .fine{font:var(--type-caption);color:var(--text-faint);margin:0}
.article .related{margin-top:44px;padding-top:26px;border-top:1px solid var(--border-hairline)}
.article .related .eyebrow{margin-bottom:12px}
.article .related ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.article .related a{color:var(--white-70);border-bottom:none}
.article .related a:hover{color:var(--app-screenshot)}
.article .updated{font:var(--type-caption);color:var(--text-faint);margin:-8px 0 34px}

.cmp-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--border-hairline);border-radius:var(--radius-lg)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px;font:var(--type-body)}
table.cmp th,table.cmp td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border-hairline);vertical-align:top}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:none}
table.cmp thead th{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-faint)}
table.cmp thead th.us{color:var(--app-screenshot)}
table.cmp tbody th{font-weight:var(--weight-medium);color:var(--white-80)}
table.cmp td{color:var(--white-60)}
table.cmp td small{display:block;color:var(--text-faint);font:var(--type-caption);margin-top:3px}
.check{display:inline-block;background:rgba(242,232,99,.12);border:1px solid rgba(242,232,99,.45);
  color:var(--yellow);border-radius:var(--radius-xs);padding:1px 8px;
  font:var(--weight-medium) var(--text-2xs)/1.5 var(--font-mono);letter-spacing:.03em}
@media (max-width:700px){
  .article{padding-block:48px 64px}
  .article h1{font-size:var(--text-2xl)}
}

.article .crumb{font:var(--type-caption);color:var(--text-faint);margin:0 0 18px}
.article .crumb a{color:var(--white-50);border-bottom:none}
.article .crumb a:hover{color:var(--app-screenshot)}
.article .meta{font:var(--type-caption);color:var(--text-faint);margin:-24px 0 34px}
.article .table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--border-hairline);border-radius:var(--radius-lg)}
.article .table-wrap table{border-collapse:collapse;width:100%;min-width:560px;font:var(--type-body)}
.article .table-wrap th,.article .table-wrap td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border-hairline);vertical-align:top}
.article .table-wrap tbody tr:last-child td{border-bottom:none}
.article .table-wrap thead th{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-faint)}
.article .table-wrap thead th.c:first-of-type{color:var(--app-screenshot)}
.article .table-wrap td{color:var(--white-60)}
.article .table-wrap td:first-child{color:var(--white-80);font-weight:var(--weight-medium)}
.article .table-wrap td small{display:block;color:var(--text-faint);font:var(--type-caption);margin-top:3px}
.article .table-wrap td.y{color:var(--green)}
.article .table-wrap td.n{color:var(--text-faint)}

.article .table-wrap td.p{color:var(--yellow);font:var(--weight-medium) var(--text-sm)/1.4 var(--font-mono)}
.article .table-wrap td.p small{color:var(--yellow);opacity:.72;font-family:var(--font-sans)}
.article .cta{margin-top:56px;padding:30px 0 0;border-top:1px solid var(--border-hairline)}
.article .cta h2{margin-top:0}
.article .btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.article .btn{border-bottom:none;background:var(--brand);color:var(--brand-contrast)}
.article .btn:hover{background:var(--green-400)}
.article .btn.alt{background:var(--white-04);color:var(--white);border:1px solid var(--white-20)}
.article .btn.alt:hover{background:var(--white-10)}
.article .faq h3{margin-top:26px}
.article .faq-page .qa{border-top:1px solid var(--border-hairline);padding:26px 0}
.article .faq-page .qa:last-child{border-bottom:1px solid var(--border-hairline)}
.article .faq-page h2{margin:0 0 8px;font:var(--weight-medium) var(--text-md)/1.35 var(--font-sans)}
.article .faq-page p{margin:0}
.article h2 .cnt{font:var(--type-caption);color:var(--yellow);margin-left:8px;vertical-align:middle}
.article code{font:var(--weight-regular) var(--text-sm)/1 var(--font-mono);background:var(--white-04);border:1px solid var(--border-hairline);border-radius:var(--radius-xs);padding:2px 6px;color:var(--white-70)}

.nav-group{position:relative;display:inline-flex;align-items:center}
.nav-group>.nav-group-top{display:inline-flex;align-items:center;gap:5px}
.nav-caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55;transition:transform var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}
.nav-group:hover .nav-caret,.nav-group:focus-within .nav-caret{opacity:1;transform:translateY(1px)}
.nav-menu{position:absolute;top:100%;left:-14px;z-index:50;display:flex;flex-direction:column;min-width:212px;padding:6px;margin-top:9px;background:var(--color-background-alt);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),visibility var(--duration-fast)}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav .nav-menu a{padding:7px 10px;border-radius:var(--radius-sm);white-space:nowrap;transition:color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.site-nav .nav-menu a:hover{color:var(--text-strong);background:var(--white-04)}
@media (max-width:760px){
  /* Shown, not hidden: the top of each group is a real link (/how-to/,
     /alternatives.html), so it works on a touch screen even though the
     hover menu underneath it does not. */
  .nav-group .nav-menu{display:none}
}

.article .table-wrap tr.grp th{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-faint);background:var(--white-04);padding-block:9px}
.article .table-wrap tr.grp+tr td{border-top:none}

.article .table-wrap td.d{color:var(--green)}
.article .table-wrap td.d small{color:var(--white-50)}

.hero .hero-sub{max-width:560px;font:var(--type-body);color:var(--white-50)}

.triad-grid a{color:var(--white-80);border-bottom:1px solid var(--white-20);transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.triad-grid a:hover{color:var(--app-screenshot);border-bottom-color:var(--app-screenshot)}

.mock img,.mock video{display:block;width:100%;height:auto}
.pillar-visual img,.pillar-visual video{display:block;width:100%;height:auto}
@media (max-width:900px){.pillar,.pillar.flip{grid-template-columns:1fr;gap:28px}.pillar.flip .pillar-copy{order:1}.pillar.flip .pillar-visual{order:2}}
.article figure.shot{margin:34px 0}
.article figure.shot img,.article figure.shot video{display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--border-hairline);background:var(--gray-950)}
.article figure.shot figcaption{font:var(--type-caption);color:var(--text-faint);margin-top:12px}
.article figure.shot.narrow{max-width:420px}
@media (max-width:720px){.article figure.shot.narrow{max-width:100%}}

/* The how-it-works spine section. Plain type on the page's own ground —
   the one filled panel on this page is the closing CTA. */
.how{border-bottom:1px solid var(--border-hairline)}
.how .container{padding-block:var(--space-24)}
.how h2{max-width:760px;font:var(--weight-medium) var(--text-2xl)/1.25 var(--font-display);letter-spacing:var(--tracking-heading);color:var(--text-strong);margin:10px 0 0}
.how-steps{counter-reset:step;list-style:none;margin:32px 0 0;padding:0;display:grid;gap:20px;max-width:760px}
.how-steps li{counter-increment:step;position:relative;padding-left:44px;font:var(--type-body);color:var(--text-muted)}
.how-steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--radius-full);border:1px solid var(--border-hairline);background:var(--white-04);font:var(--weight-regular) var(--text-xs)/1 var(--font-mono);color:var(--white-50)}
.how-steps b{color:var(--text-strong);font-weight:var(--weight-medium)}