/* Self-hosted latin subsets. Removes two cross-origin handshakes and the
   render-blocking Google Fonts stylesheet that delayed first paint. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/manrope-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #0b0d0c;
  --ink-soft: #141814;
  --panel: #191e19;
  --panel-2: #202620;
  --bone: #f2f0e8;
  --bone-soft: #d9d7cf;
  --muted: #9ca39b;
  --line: rgba(242, 240, 232, 0.14);
  --line-strong: rgba(242, 240, 232, 0.28);
  --signal: #c8ff5a;
  --signal-ink: #192008;
  --blue: #7eb7ff;
  --danger: #ff7a70;
  --warning: #f5c05a;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --max: 1180px;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 30px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--bone);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 72%);
  z-index: -1;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--signal); color: var(--signal-ink); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 999; background: var(--signal); color: var(--signal-ink); padding: .75rem 1rem; border-radius: 8px; }
.skip-link:focus { top: 1rem; }
.container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.narrow { width: min(780px, calc(100% - 40px)); margin-inline: auto; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.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; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgba(11,13,12,.74); backdrop-filter: blur(20px) saturate(140%); transition: border-color .25s ease, background .25s ease; }
.site-header.scrolled { border-color: var(--line); background: rgba(11,13,12,.92); }
.nav-wrap { min-height: 74px; display: flex; align-items: center; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .72rem; font-weight: 700; letter-spacing: -.03em; font-size: 1.16rem; }
.brand-logo { width: 32px; height: 32px; flex: 0 0 auto; object-fit: contain; }
.desktop-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.desktop-nav a { color: var(--muted); font-size: .88rem; font-weight: 600; padding: .6rem .8rem; border-radius: 9px; transition: color .2s, background .2s; }
.desktop-nav a:hover, .desktop-nav a[aria-current='page'] { color: var(--bone); background: rgba(255,255,255,.05); }
.nav-actions { display: flex; align-items: center; gap: .65rem; }
.menu-toggle { display: none; border: 1px solid var(--line); background: transparent; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .74rem 1.05rem; border: 1px solid transparent; border-radius: 11px; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .22s var(--ease), background .22s ease, border-color .22s ease; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-primary { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 1px rgba(200,255,90,.18), 0 14px 34px rgba(200,255,90,.12); }
.btn-primary:hover { background: #d6ff84; transform: translateY(-2px); }
.btn-secondary { background: rgba(255,255,255,.04); color: var(--bone); border-color: var(--line); }
.btn-secondary:hover { background: rgba(255,255,255,.08); border-color: var(--line-strong); }
.btn-sm { min-height: 40px; padding: .56rem .82rem; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--signal); font-family: var(--mono); font-size: .73rem; line-height: 1.4; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 26px; height: 1px; background: currentColor; }
.hero { padding: clamp(3.5rem, 6vw, 5.5rem) 0 4.5rem; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
.hero-copy { position: relative; z-index: 2; }
.hero h1, .page-hero h1 { margin: 1.2rem 0 1.4rem; font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(3.75rem, 5.7vw, 6.2rem); line-height: .9; }
.page-hero h1 { font-size: clamp(4rem, 7.7vw, 7.4rem); line-height: .86; }
.hero h1 em { color: var(--signal); font-weight: 400; }
.hero-lede { max-width: 640px; margin: 0 0 1.8rem; color: var(--bone-soft); font-size: clamp(1rem, 1.45vw, 1.16rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.signal-stage { position: relative; min-height: 590px; display: grid; place-items: center; perspective: 1100px; }
.extension-window { width: min(100%, 470px); position: relative; border: 1px solid var(--line-strong); border-radius: 26px; background: rgba(24,29,24,.94); box-shadow: var(--shadow); overflow: hidden; transform: rotateY(-6deg) rotateX(2deg); transform-style: preserve-3d; }
.window-bar { height: 58px; display: flex; align-items: center; gap: .55rem; padding: 0 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.window-dot { width: 8px; height: 8px; border-radius: 50%; background: #647064; }
.window-dot.live { background: var(--signal); box-shadow: 0 0 0 5px rgba(200,255,90,.09); }
.window-title { margin-left: .45rem; font-size: .82rem; font-weight: 700; }
.window-status { margin-left: auto; color: var(--signal); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.extension-body { padding: 1.05rem; }
.monitor-row { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--line); border-radius: 14px; padding: .8rem; background: #111511; }
.avatar-block { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--signal); background: rgba(200,255,90,.09); font-family: var(--mono); font-weight: 600; }
.monitor-meta strong { display: block; font-size: .86rem; }
.monitor-meta small { color: var(--muted); font-family: var(--mono); font-size: .65rem; }
.monitor-pill { margin-left: auto; border: 1px solid rgba(200,255,90,.25); color: var(--signal); font-family: var(--mono); font-size: .62rem; padding: .25rem .45rem; border-radius: 99px; }
.activity-head { margin: 1.1rem 0 .65rem; display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; }
.event { display: grid; grid-template-columns: 34px 1fr auto; gap: .75rem; align-items: center; padding: .8rem .2rem; border-top: 1px solid var(--line); }
.event-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; font-family: var(--mono); font-size: .7rem; color: var(--blue); }
.event strong { display: block; font-size: .8rem; }
.event p { margin: .1rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.event time { align-self: start; color: var(--muted); font-family: var(--mono); font-size: .6rem; }
.scan-line { position: absolute; z-index: 3; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--signal), transparent); box-shadow: 0 0 18px var(--signal); animation: scan 4.2s var(--ease) infinite; pointer-events: none; }
.floating-note { position: absolute; right: -26px; bottom: 70px; width: 178px; padding: .8rem; border-radius: 13px; border: 1px solid rgba(200,255,90,.25); background: rgba(11,13,12,.92); box-shadow: var(--shadow); font-family: var(--mono); font-size: .65rem; line-height: 1.5; transform: translateZ(40px); }
.floating-note span { color: var(--signal); }

.section { padding: clamp(5rem, 9vw, 8rem) 0; }
.section-tight { padding: 4rem 0; }
.section-head { display: grid; grid-template-columns: .75fr 1.25fr; gap: 2rem; align-items: end; margin-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.section-head h2, .split-copy h2, .cta-band h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem, 5vw, 5.1rem); line-height: .96; letter-spacing: -.035em; }
.section-head p { margin: 0; max-width: 620px; color: var(--muted); }
.signal-ledger { border-top: 1px solid var(--line-strong); }
.ledger-row { display: grid; grid-template-columns: 58px minmax(190px,.8fr) 1.5fr 90px; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--line); transition: background .2s; }
.ledger-row:hover { background: rgba(255,255,255,.02); }
.ledger-index, .ledger-state { font-family: var(--mono); font-size: .68rem; color: var(--muted); }
.ledger-row h3 { margin: 0; font-size: 1rem; }
.ledger-row p { margin: 0; color: var(--muted); font-size: .87rem; }
.ledger-state { color: var(--signal); text-align: right; }

.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split-copy p { color: var(--muted); max-width: 600px; }
.privacy-visual { min-height: 500px; border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; overflow: hidden; background: #101410; display: grid; place-items: center; }
.privacy-core { position: relative; padding: 1rem 1.2rem; border-radius: var(--radius-sm); text-align: left; border: 1px solid var(--line-strong); background: #151a15; color: var(--signal); font-family: var(--mono); font-size: .7rem; line-height: 1.55; }

.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border-block: 1px solid var(--line); }
.step { padding: 2rem; border-right: 1px solid var(--line); min-height: 230px; display: flex; flex-direction: column; }
.step:last-child { border-right: 0; }
.step-number { font-family: var(--serif); font-size: 3.2rem; color: var(--signal); line-height: 1; }
.step h3 { margin: auto 0 .5rem; font-size: 1rem; }
.step p { margin: 0; color: var(--muted); font-size: .84rem; }

.quote-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(2rem,5vw,4.8rem); background: rgba(255,255,255,.022); }
.quote-panel blockquote { margin: 0; max-width: 950px; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; }
.quote-panel footer { margin-top: 1.5rem; color: var(--muted); font-family: var(--mono); font-size: .72rem; }
.quote-panel footer a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; border: 0; background: transparent; text-align: left; cursor: pointer; font-weight: 650; }
.faq-question span { color: var(--signal); font-family: var(--mono); font-weight: 400; transition: transform .25s var(--ease); }
.faq-item.open .faq-question span { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq-answer > div { max-width: 790px; padding: 0 0 1.35rem; color: var(--muted); font-size: .9rem; }
.faq-answer p { margin: 0; }

.cta-band { display: grid; grid-template-columns: 1.25fr .75fr; gap: 2rem; align-items: end; border-top: 1px solid var(--line-strong); padding-top: 3rem; }
.cta-band .hero-actions { justify-content: flex-end; }

.site-footer { margin-top: 4rem; border-top: 1px solid var(--line); padding: 3.2rem 0 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3,.7fr); gap: 2rem; }
.footer-brand p { max-width: 340px; color: var(--muted); font-size: .84rem; }
.footer-col h3 { margin: 0 0 .8rem; color: var(--bone-soft); font-family: var(--mono); font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; }
.footer-col a { display: block; width: fit-content; color: var(--muted); font-size: .82rem; margin: .5rem 0; }
.footer-col a:hover { color: var(--signal); }
.footer-bottom { margin-top: 2.7rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-family: var(--mono); font-size: .62rem; }

.page-hero { padding: clamp(4rem,8vw,7rem) 0 3.5rem; border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 930px; font-size: clamp(3.6rem,7vw,7rem); }
.page-hero p { max-width: 720px; color: var(--muted); font-size: 1.03rem; }
.editorial { padding: 4rem 0 7rem; }
.editorial h2 { margin: 2.7rem 0 .8rem; font-family: var(--serif); font-size: 2.35rem; font-weight: 400; line-height: 1; }
.editorial h3 { margin: 2rem 0 .6rem; font-size: 1rem; }
.editorial p, .editorial li { color: var(--bone-soft); }
.editorial a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.editorial ul { list-style: none; padding-left: 0; }
.editorial aside { margin: 2rem 0; padding: 1.2rem 1.35rem; border-left: 3px solid var(--signal); background: rgba(200,255,90,.05); color: var(--bone-soft); }

.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.price-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; min-height: 460px; flex-direction: column; background: rgba(255,255,255,.018); }
.price-card.featured { border-color: rgba(200,255,90,.45); background: rgba(200,255,90,.045); }
.price-label { color: var(--signal); font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.price { margin: .75rem 0 1.2rem; font-family: var(--serif); font-size: 3.8rem; line-height: 1; }
.price small { color: var(--muted); font-family: var(--sans); font-size: .75rem; }
.price-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.price-list li { padding: .62rem 0; border-bottom: 1px solid var(--line); color: var(--bone-soft); font-size: .82rem; }
.price-card .btn { margin-top: auto; }
.status-note { margin: 1rem 0 0; color: var(--warning); font-size: .72rem; font-family: var(--mono); }

.support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.support-card { padding: 1.5rem; min-height: 220px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); display: flex; flex-direction: column; }
.support-card .tag { color: var(--signal); font-family: var(--mono); font-size: .66rem; }
.support-card h2 { margin: auto 0 .5rem; font-size: 1.12rem; }
.support-card p { margin: 0; color: var(--muted); font-size: .83rem; }
.support-card a { margin-top: 1rem; color: var(--signal); font-family: var(--mono); font-size: .68rem; }
.support-card code, .editorial code { color: var(--signal); font-family: var(--mono); font-size: .82em; }
.support-detail { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; padding: 2.4rem 0; border-top: 1px solid var(--line); }
.support-detail h2 { margin: 0; font-family: var(--serif); font-size: 2.1rem; font-weight: 400; line-height: 1; }
.support-detail p, .support-detail li { color: var(--muted); font-size: .86rem; }
.support-detail ul { list-style: none; padding-left: 0; }
.notice { margin: 1.2rem 0; padding: 1rem 1.15rem; border: 1px solid rgba(243,190,85,.35); border-radius: 12px; background: rgba(243,190,85,.05); color: var(--bone-soft); font-size: .82rem; }

.blog-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; padding: 3rem 0 7rem; }
.blog-card { display: flex; min-height: 310px; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.blog-card:hover { transform: translateY(-4px); border-color: rgba(200,255,90,.35); background: rgba(200,255,90,.035); }
.blog-card-featured { grid-column: 1 / -1; border-color: rgba(200,255,90,.34); background: rgba(255,255,255,.022); box-shadow: inset 3px 0 0 var(--signal); }
.blog-card .kicker { color: var(--signal); font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.blog-card h2 { margin: auto 0 .7rem; max-width: 530px; font-family: var(--serif); font-size: clamp(1.7rem,3vw,2.45rem); font-weight: 400; line-height: 1; }
.blog-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.blog-card .card-meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: .61rem; }
.blog-card.pending { cursor: default; }
.blog-card.pending:hover { transform: none; }
.approval-banner { margin: 2rem 0 0; padding: 1.2rem 1.4rem; border-left: 3px solid var(--signal); background: rgba(200,255,90,.05); color: var(--bone-soft); }

.article-hero { padding: clamp(4rem,8vw,7rem) 0 2.6rem; border-bottom: 1px solid var(--line); }
.article-hero h1 { max-width: 980px; margin: .7rem 0 1.2rem; font-family: var(--serif); font-size: clamp(3.1rem,7vw,6.8rem); font-weight: 400; line-height: .93; letter-spacing: -.045em; }
.article-hero .hero-actions { margin-top: 1.5rem; }
.article-deck { max-width: 760px; color: var(--bone-soft); font-size: 1.05rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .55rem 1.2rem; margin-top: 1.5rem; color: var(--muted); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: clamp(2rem,6vw,5.5rem); align-items: start; padding: 3.4rem 0 7rem; }
.article-body { max-width: 760px; }
.article-body > p:first-child { color: var(--bone); font-size: 1.12rem; }
.article-body h2 { margin: 3.2rem 0 1rem; font-family: var(--serif); font-size: clamp(2.1rem,4vw,3.25rem); font-weight: 400; line-height: 1; }
.article-body h3 { margin: 2rem 0 .65rem; font-size: 1rem; }
.article-body p, .article-body li { color: var(--bone-soft); }
.article-body a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.article-body ul { list-style: none; padding-left: 0; }
.article-body ol { padding-left: 1.25rem; }
.article-body li { margin: .55rem 0; }
.article-body blockquote { margin: 2rem 0; padding: 1.2rem 1.35rem; border-left: 3px solid var(--signal); background: rgba(200,255,90,.05); color: var(--bone); }
.article-body table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .82rem; }
.article-body th, .article-body td { padding: .8rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { color: var(--signal); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
.article-body td { color: var(--bone-soft); }
.quick-answer { margin: 0 0 2rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(200,255,90,.3); border-radius: 14px; background: rgba(200,255,90,.04); }
.quick-answer strong { display: block; margin-bottom: .45rem; color: var(--signal); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.answer-card { margin: 1.5rem 0 2rem; padding: 1.4rem 1.5rem; border: 1px solid rgba(200,255,90,.3); border-radius: 14px; background: rgba(200,255,90,.04); }
.answer-card strong { display: block; margin-bottom: .55rem; color: var(--signal); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.answer-card p { max-width: 880px; margin: 0; color: var(--bone-soft); }
.article-aside { position: sticky; top: 96px; padding: 1rem 0; border-top: 1px solid var(--line-strong); }
.article-aside h2 { margin: 0 0 .8rem; color: var(--signal); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.article-aside a { display: block; margin: .65rem 0; color: var(--muted); font-size: .75rem; }
.article-aside a:hover { color: var(--bone); }
.article-related { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.article-related h2 { margin: 0 0 1rem; font-family: var(--serif); font-size: clamp(1.7rem,3vw,2.35rem); }
.article-related-links { display: flex; flex-wrap: wrap; gap: .55rem; }
.article-related-links a { display: inline-block; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--bone-soft); font-size: .78rem; text-decoration: none; }
.article-related-links a:hover { border-color: var(--signal); color: var(--signal); }
.source-note { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.article-cta { margin-top: 3rem; padding: 1.5rem; border: 1px solid rgba(200,255,90,.32); border-radius: var(--radius); background: rgba(200,255,90,.04); }
.article-cta h2 { margin-top: 0; }

.auth-gate { display: grid; place-items: start; gap: 1.15rem; max-width: 460px; margin: 0 auto; padding: clamp(1.8rem,4vw,2.6rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); }
.auth-gate h1 { font-size: clamp(2.2rem,4.4vw,2.9rem); }
.auth-gate p { margin: 0; color: var(--muted); }
.auth-gate .btn { width: 100%; }
.dashboard-content[hidden], .auth-gate[hidden] { display: none; }
.button-row { display: flex; flex-wrap: wrap; gap: .65rem; }
.key-actions { margin-top: .9rem; }
.subtle { color: var(--muted); font-size: .78rem; }

.dashboard-shell { display: grid; grid-template-columns: 232px 1fr; gap: 1rem; padding: 2rem 0 6rem; align-items: start; }
.dashboard-shell:has(.auth-gate:not([hidden])) { grid-template-columns: 1fr; }
.dashboard-shell:has(.auth-gate:not([hidden])) .dashboard-nav { display: none; }
.dashboard-nav, .dashboard-panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); }
.dashboard-nav { align-self: start; position: sticky; top: 92px; padding: .8rem; }
.dashboard-nav-label { display: block; padding: .3rem .8rem .6rem; color: var(--muted); font-family: var(--mono); font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; }
.dashboard-nav a { display: block; padding: .68rem .8rem; margin: .05rem 0; color: var(--muted); font-size: .82rem; border-radius: 9px; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.dashboard-nav a:hover { color: var(--bone); background: rgba(255,255,255,.035); }
.dashboard-nav a.active { color: var(--signal); background: rgba(200,255,90,.07); box-shadow: inset 2px 0 0 0 var(--signal); }
.dashboard-nav-divider { display: block; height: 1px; margin: .6rem .8rem; background: var(--line); }
.dashboard-panel { padding: clamp(1.25rem,4vw,2.5rem); min-height: 520px; }
.dashboard-panel:has(.auth-gate:not([hidden])) { display: grid; place-items: center; }
.dashboard-panel h1 { margin: 0 0 1.5rem; font-family: var(--serif); font-weight: 400; font-size: 3rem; }
.profile-line { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.profile-avatar { width: 66px; height: 66px; border-radius: 16px; object-fit: cover; background: var(--panel); border: 1px solid rgba(200,255,90,.3); box-shadow: 0 0 0 5px rgba(200,255,90,.07); }
.profile-line h2 { margin: 0; font-size: 1.1rem; }
.profile-line p { margin: .15rem 0 0; color: var(--muted); font-size: .78rem; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin: 1rem 0; }
.stat { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; transition: transform .25s var(--ease), border-color .25s var(--ease); }
.stat:hover { transform: translateY(-2px); border-color: rgba(200,255,90,.28); }
.stat span { display: block; color: var(--muted); font-family: var(--mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.stat strong { display: block; margin-top: .35rem; font-size: .82rem; word-break: break-word; }
.stat strong.plan-badge { display: inline-block; margin-top: .4rem; border: 1px solid rgba(200,255,90,.25); color: var(--signal); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .5rem; border-radius: 99px; word-break: normal; }
.key-box { margin-top: 1rem; border: 1px solid rgba(200,255,90,.25); border-radius: var(--radius); background: rgba(200,255,90,.03); overflow: hidden; }
.key-box .window-bar { background: rgba(255,255,255,.02); }
.key-box .window-title { margin: 0 0 0 .45rem; }
.key-box-body { padding: 1.2rem 1.35rem 1.4rem; }
.key-box-body p { margin: 0 0 1rem; color: var(--muted); font-size: .78rem; }
.key-controls { display: flex; flex-wrap: wrap; gap: .6rem; }
.key-controls .field { flex: 1 1 180px; width: auto; }
.field { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #0f120f; color: var(--bone); padding: .75rem; font-family: var(--mono); font-size: .72rem; }
.inline-status { min-height: 1.3rem; margin-top: .65rem; color: var(--muted); font-family: var(--mono); font-size: .68rem; }
.inline-status.error { color: var(--danger); }
.inline-status.success { color: var(--signal); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
/* Keep the primary answer and product proof visible for first paint; below-fold sections can still reveal on scroll. */
.hero .reveal { opacity: 1; transform: none; }
@keyframes scan { 0%,15% { top: 55px; opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .nav-actions .btn-secondary { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .desktop-nav.open { position: absolute; display: grid; top: 74px; left: 20px; right: 20px; padding: .7rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(11,13,12,.98); box-shadow: var(--shadow); }
  .hero-grid, .split, .section-head, .cta-band { grid-template-columns: 1fr; }
  .blog-grid, .support-detail { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; order: -1; }
  .hero { padding-top: 4.5rem; }
  .hero h1 { max-width: 780px; }
  .signal-stage { min-height: 510px; }
  .floating-note { right: 4px; }
  .section-head { align-items: start; }
  .pricing-grid, .support-grid { grid-template-columns: 1fr; }
  .price-card { min-height: auto; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .cta-band .hero-actions { justify-content: flex-start; }
}
@media (max-width: 680px) {
  .container, .narrow { width: min(100% - 28px, var(--max)); }
  .nav-wrap { min-height: 66px; gap: .75rem; }
  .nav-actions { margin-left: auto; }
  .nav-actions .btn-primary { display: none; }
  .desktop-nav.open { top: 66px; left: 14px; right: 14px; }
  .hero h1 { font-size: clamp(3.2rem, 12vw, 4.4rem); }
  .page-hero h1 { font-size: clamp(3.4rem, 17vw, 5.2rem); }
  .hero-grid { gap: 1rem; }
  .signal-stage { min-height: 450px; margin-inline: -10px; }
  .extension-window { transform: none; }
  .floating-note { display: none; }
  .ledger-row { grid-template-columns: 40px 1fr auto; }
  .ledger-row p { grid-column: 2 / -1; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); min-height: 180px; }
  .step:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .dashboard-shell { grid-template-columns: 1fr; }
  .dashboard-nav { position: static; display: flex; overflow-x: auto; }
  .dashboard-nav-label, .dashboard-nav-divider { display: none; }
  .dashboard-nav a { white-space: nowrap; }
  .stat-grid { grid-template-columns: 1fr; }
  .key-controls { flex-direction: column; }
  .key-controls .field { flex: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--ink); backdrop-filter: none; } }
@media (prefers-contrast: more) { :root { --line: rgba(255,255,255,.36); --muted: #c6cbc5; } }

/* --- Plan comparison ------------------------------------------------------
   The multiplier is the point of this table, so it gets its own column rather
   than being buried in prose. Numbers are tabular so the columns line up and
   the jump between tiers reads as a shape, not just as digits. */
.gain { display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; padding: .18em .45em; border-radius: 5px; white-space: nowrap;
  background: rgba(200,255,90,.12); color: var(--signal);
  box-shadow: inset 0 0 0 1px rgba(200,255,90,.3); }
.gain.flat { background: rgba(242,240,232,.06); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

.plan-headline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 1.4rem; }
.plan-headline > div { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1rem; background: rgba(255,255,255,.018); }
.plan-headline .big { font-family: var(--serif); font-size: 2.6rem; line-height: 1;
  color: var(--signal); font-variant-numeric: tabular-nums; }
.plan-headline .cap { display: block; font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-top: .45rem; }

.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.compare { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .84rem; }
.compare th, .compare td { padding: .6rem .85rem; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); background: rgba(255,255,255,.02); white-space: nowrap; }
.compare tbody tr:last-child td { border-bottom: none; }
.compare td.c { text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--bone-soft); }
.compare .col-pro { background: rgba(200,255,90,.05); }
.compare th.col-pro { color: var(--signal); }
.compare .grp td { font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); background: rgba(255,255,255,.02); }
.compare .yes { color: var(--signal); }
.compare .no { color: var(--muted); }

@media (max-width: 720px) {
  .plan-headline { grid-template-columns: 1fr; }
}

/* --- Public demo --------------------------------------------------------- */
.demo-section { padding-top: clamp(2.6rem, 6vw, 5rem); }
.demo-disclosure {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 1rem;
  padding: .58rem .82rem;
  border: 1px solid rgba(200,255,90,.25);
  border-radius: 9px;
  background: rgba(200,255,90,.055);
  color: var(--signal);
  font: 500 .66rem/1.35 var(--mono);
  letter-spacing: .035em;
  text-align: center;
}
.demo-stage {
  --rt-ground: #121110;
  --rt-surface: #1a1917;
  --rt-surface-2: #22201e;
  --rt-surface-3: #2b2926;
  --rt-ink: #f5f2ec;
  --rt-ink-2: #ada69b;
  --rt-ink-3: #8e867a;
  --rt-rule: #2a2825;
  --rt-rule-2: #3b3833;
  --rt-field: #6a645b;
  --rt-gold: #e8b860;
  --rt-gold-hi: #f3cd84;
  --rt-gold-lo: #c99a45;
  --rt-gold-ink: #241a08;
  --rt-gold-soft: rgba(232,184,96,.13);
  --rt-gold-line: rgba(232,184,96,.32);
  --rt-ok: #7cc48d;
  --rt-ok-soft: rgba(124,196,141,.14);
  --rt-warn: #e0a65c;
  --rt-warn-soft: rgba(224,166,92,.14);
  --rt-crit: #e58a82;
  --rt-crit-soft: rgba(229,138,130,.14);
  --rt-edge: inset 0 1px 0 rgba(255,255,255,.045);
  --rt-lift: 0 1px 2px rgb(0 0 0 / .35), 0 18px 50px -18px rgb(0 0 0 / .75);
  position: relative;
  scroll-margin-top: 82px;
  display: grid;
  grid-template-columns: 380px 0;
  justify-content: center;
  align-items: start;
  gap: 0;
  min-height: 628px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(232,184,96,.08), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%),
    #0d0e0d;
  transition: grid-template-columns 220ms var(--ease), gap 220ms var(--ease);
}
.demo-stage:has(.rt-history.is-open) { grid-template-columns: 380px minmax(340px, 440px); gap: 16px; }
.demo-stage [hidden] { display: none !important; }
.demo-stage[data-rt-theme="light"] {
  --rt-ground: #f2f0ec;
  --rt-surface: #fff;
  --rt-surface-2: #f4f1ec;
  --rt-surface-3: #e9e5de;
  --rt-ink: #17150f;
  --rt-ink-2: #59534a;
  --rt-ink-3: #726c63;
  --rt-rule: #e2ddd4;
  --rt-rule-2: #cfc8bc;
  --rt-field: #98896e;
  --rt-gold: #8a681d;
  --rt-gold-hi: #a17c28;
  --rt-gold-lo: #6e5211;
  --rt-gold-ink: #fff;
  --rt-gold-soft: rgba(138,104,29,.1);
  --rt-gold-line: rgba(138,104,29,.35);
  --rt-ok: #2f6b43;
  --rt-ok-soft: rgba(47,107,67,.1);
  --rt-warn: #8a5a16;
  --rt-warn-soft: rgba(138,90,22,.11);
  --rt-crit: #a33a31;
  --rt-crit-soft: rgba(163,58,49,.1);
  --rt-edge: inset 0 1px 0 rgba(255,255,255,.9);
  --rt-lift: 0 1px 2px rgb(23 21 15 / .06), 0 18px 50px -18px rgb(23 21 15 / .3);
}
.demo-stage button, .demo-stage input { font: inherit; }
.demo-stage button { cursor: pointer; }
.demo-stage button:focus-visible, .demo-stage input:focus-visible {
  outline: 2px solid var(--rt-gold);
  outline-offset: 2px;
}
.demo-note {
  max-width: 720px;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

.rt-popup, .rt-history {
  color: var(--rt-ink);
  background: var(--rt-ground);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}
.rt-popup {
  z-index: 1;
  width: 380px;
  height: 588px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rt-rule-2);
  border-radius: 13px;
  box-shadow: var(--rt-edge), var(--rt-lift);
}
.rt-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--rt-surface-2), var(--rt-surface));
  border-bottom: 1px solid var(--rt-rule);
  box-shadow: var(--rt-edge);
}
.rt-mark { display: flex; align-items: center; gap: 7px; }
.rt-wordmark { font-size: 15.5px; font-weight: 700; letter-spacing: .005em; }
.rt-grow { flex: 1; min-width: 0; }
.rt-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--rt-ink-3);
  background: transparent;
  transition: background-color 140ms ease, color 140ms ease;
}
.rt-icon-btn:hover { background: var(--rt-surface-2); color: var(--rt-ink); }
.rt-icon-btn svg { display: block; width: 16px; height: 16px; }
.rt-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 47px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rt-rule);
  color: var(--rt-ink-2);
  background: var(--rt-ground);
  font-size: 12px;
}
#demo-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--rt-ink-3);
}
.rt-dot-warn { background: var(--rt-warn); box-shadow: 0 0 0 3px var(--rt-warn-soft); }
.rt-dot-live { background: var(--rt-ok); animation: rt-pulse 1.9s ease-in-out infinite; }
@keyframes rt-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--rt-ok-soft); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: .55; }
}
.rt-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
  padding: 16px 14px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--rt-rule-2) transparent;
  scrollbar-width: thin;
}
.rt-view { display: flex; flex-direction: column; gap: 18px; }
.rt-view[hidden] { display: none; }
.rt-backbar h2 { margin: 0; color: var(--rt-ink); font-size: 15.5px; font-weight: 620; letter-spacing: -.02em; }
.rt-add { display: flex; gap: 8px; }
.rt-add input { flex: 1; min-width: 0; }
.demo-stage input[type="text"], .demo-stage input[type="search"] {
  width: 100%;
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--rt-field);
  border-radius: 9px;
  color: var(--rt-ink);
  background: var(--rt-ground);
  font-size: 13.5px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.demo-stage input::placeholder { color: var(--rt-ink-3); opacity: 1; }
.demo-stage input:hover { border-color: var(--rt-ink-3); }
.demo-stage input:focus-visible {
  border-color: var(--rt-gold);
  background: var(--rt-surface);
  box-shadow: 0 0 0 3px var(--rt-gold-soft);
  outline: none;
}
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--rt-rule-2);
  border-radius: 9px;
  color: var(--rt-ink);
  background: var(--rt-surface-2);
  box-shadow: var(--rt-edge), 0 1px 2px rgb(0 0 0 / .3);
  font-size: 13px;
  font-weight: 600;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.rt-btn:hover:not(:disabled) { background: var(--rt-surface-3); }
.rt-btn:active:not(:disabled) { transform: translateY(1px); }
.rt-btn:disabled { cursor: default; opacity: .45; }
.rt-btn-primary {
  color: var(--rt-gold-ink);
  border-color: transparent;
  background: linear-gradient(180deg, var(--rt-gold-hi), var(--rt-gold) 55%, var(--rt-gold-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgb(0 0 0 / .25), 0 6px 16px -10px var(--rt-gold);
}
.rt-btn-accent { border-color: var(--rt-gold-line); color: var(--rt-gold); background: var(--rt-gold-soft); }
.rt-btn-quiet { border-color: transparent; color: var(--rt-ink-2); background: transparent; box-shadow: none; }
.rt-btn-quiet:hover:not(:disabled) { color: var(--rt-ink); background: var(--rt-surface-2); }
.rt-btn-sm { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
.rt-btn:disabled[aria-busy="true"] { cursor: progress; opacity: 1; }
.rt-btn-progress {
  position: relative;
  display: none;
  width: 34px;
  height: 4px;
  flex: none;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, currentColor 22%, transparent);
}
[aria-busy="true"] > .rt-btn-progress { display: block; }
.rt-btn-progress::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 45%;
  border-radius: 2px;
  background: currentColor;
  animation: rt-progress 1.1s ease-in-out infinite;
}
@keyframes rt-progress { from { left: -45%; } to { left: 100%; } }
.rt-msg {
  min-height: 18px;
  margin-top: -12px;
  color: var(--rt-ink-3);
  font-size: 12px;
}
.rt-msg-ok { color: var(--rt-ok); }
.rt-msg-err { color: var(--rt-crit); }
.rt-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; padding: 0 2px; }
.rt-label {
  color: var(--rt-ink-3);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rt-num { font-family: "Cascadia Mono", "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.rt-chip {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border-radius: 5px;
  color: var(--rt-gold);
  background: var(--rt-gold-soft);
  box-shadow: inset 0 0 0 1px var(--rt-gold-line);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rt-panel {
  overflow: hidden;
  border: 1px solid var(--rt-rule);
  border-radius: 13px;
  background: var(--rt-surface);
  box-shadow: var(--rt-edge), 0 1px 2px rgb(0 0 0 / .35), 0 10px 26px -14px rgb(0 0 0 / .7);
}
.rt-card {
  padding: 14px;
  border: 1px solid var(--rt-rule);
  border-radius: 13px;
  background: var(--rt-surface);
  box-shadow: var(--rt-edge), 0 1px 2px rgb(0 0 0 / .35), 0 10px 26px -14px rgb(0 0 0 / .7);
}
.rt-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--rt-ink); font-size: 13px; }
.rt-row + .rt-row { border-top: 1px solid var(--rt-rule); }
.rt-row-between { justify-content: space-between; }
label.rt-row { cursor: pointer; transition: background-color 140ms ease; }
label.rt-row:hover { background: var(--rt-surface-2); }
.rt-stack { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.rt-hint { color: var(--rt-ink-3); font-size: 11.5px; line-height: 1.45; }
.rt-switch { position: relative; display: inline-block; width: 36px; height: 21px; flex: none; }
.rt-switch input { position: absolute; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rt-switch .rt-track {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rt-field);
  border-radius: 999px;
  background: var(--rt-surface-3);
  pointer-events: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.rt-switch .rt-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--rt-ink-3);
  box-shadow: 0 1px 2px rgb(0 0 0 / .3);
  transition: transform 160ms cubic-bezier(.3,1.4,.5,1), background-color 160ms ease;
}
.rt-switch input:checked + .rt-track { border-color: var(--rt-gold-line); background: var(--rt-gold-soft); }
.rt-switch input:checked + .rt-track::after { background: var(--rt-gold); transform: translateX(15px); }
.rt-switch input:focus-visible + .rt-track { outline: 2px solid var(--rt-gold); outline-offset: 2px; }
.rt-profile-card { display: flex; align-items: center; gap: 12px; }
.rt-profile-card strong { color: var(--rt-ink); font-size: 14.5px; font-weight: 620; }
.rt-status-word { color: var(--rt-warn); font-size: 12px; font-weight: 650; }
.rt-status-word.is-active { color: var(--rt-ok); }
.rt-help { margin: 0; padding: 4px 14px 14px; }
.rt-help dt { margin-top: 15px; color: var(--rt-ink); font-size: 13px; font-weight: 620; }
.rt-help dd { margin: 3px 0 0; color: var(--rt-ink-2); font-size: 12.5px; line-height: 1.5; }
.rt-empty { padding: 28px 20px; color: var(--rt-ink-3); font-size: 12.5px; line-height: 1.55; text-align: center; }
.rt-empty strong { display: block; margin-bottom: 5px; color: var(--rt-ink-2); font-size: 13.5px; font-weight: 620; }
.rt-empty span { display: block; }
.rt-watch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px 12px 14px;
}
.rt-watch::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rt-ok);
}
.rt-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  color: var(--rt-ink-3);
  background: linear-gradient(160deg, var(--rt-surface-3), var(--rt-surface-2));
  box-shadow: inset 0 0 0 1px var(--rt-rule-2), 0 1px 2px rgb(0 0 0 / .3);
  font-size: 15px;
  font-weight: 700;
}
.rt-watch-main { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.rt-watch-name { overflow: hidden; color: var(--rt-ink); font-size: 14.5px; font-weight: 620; letter-spacing: -.012em; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.rt-watch-meta { display: flex; align-items: center; gap: 8px; color: var(--rt-ink-3); font-size: 11px; }
.rt-pips { display: inline-flex; align-items: center; gap: 3px; }
.rt-pip { width: 12px; height: 3px; border-radius: 2px; background: var(--rt-rule-2); }
.rt-pip-ok { background: var(--rt-ok); }
.rt-event {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
}
.rt-event + .rt-event { border-top: 1px solid var(--rt-rule); }
.rt-event:first-child { animation: rt-event-in 180ms ease both; }
@keyframes rt-event-in { from { opacity: 0; transform: translateY(-4px); } }
.rt-event-when { width: 38px; flex: none; color: var(--rt-ink-3); font-size: 11px; text-align: right; }
.rt-event-body { flex: 1; min-width: 0; }
.rt-event-who { color: var(--rt-ink); font-weight: 620; }
.rt-event-what { color: var(--rt-ink-2); }

.rt-history {
  z-index: 1;
  width: 100%;
  height: 588px;
  overflow: hidden;
  border: 1px solid var(--rt-rule-2);
  border-radius: 13px;
  box-shadow: var(--rt-edge), var(--rt-lift);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-12px) scale(.985);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 220ms var(--ease);
}
.rt-history.is-open { opacity: 1; pointer-events: auto; transform: none; }
.rt-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 82px;
  padding: 16px 16px 13px;
  border-bottom: 1px solid var(--rt-rule);
  background: linear-gradient(180deg, var(--rt-surface-2), var(--rt-surface));
}
.rt-history-title-row { display: flex; align-items: center; gap: 8px; }
.rt-history h2 { margin: 0; color: var(--rt-ink); font-size: 18px; font-weight: 620; letter-spacing: -.025em; }
.rt-history-head p { margin: 3px 0 0; color: var(--rt-ink-3); font-size: 11.5px; }
#demo-history-close { font-size: 19px; line-height: 1; }
.rt-history-controls { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--rt-rule); background: var(--rt-ground); }
.rt-search { position: relative; display: flex; flex: 1; align-items: center; }
.rt-search > span { position: absolute; left: 10px; z-index: 1; color: var(--rt-ink-3); font-size: 18px; pointer-events: none; transform: translateY(-1px); }
.rt-search input { padding-left: 31px !important; }
.rt-segmented { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--rt-rule-2); border-radius: 9px; background: var(--rt-surface-2); }
.rt-seg { padding: 4px 8px; border: 1px solid transparent; border-radius: 6px; color: var(--rt-ink-3); background: transparent; font-size: 11px; font-weight: 600; }
.rt-seg[aria-checked="true"] { border-color: var(--rt-rule-2); color: var(--rt-ink); background: var(--rt-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.rt-history-list { height: calc(100% - 143px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--rt-rule-2) transparent; scrollbar-width: thin; }
.rt-history-empty { padding: 62px 20px; color: var(--rt-ink-3); font-size: 12.5px; text-align: center; }
.rt-history-entry { display: flex; gap: 13px; padding: 14px 15px; transition: background-color 140ms ease; }
.rt-history-entry:hover { background: var(--rt-surface-2); }
.rt-history-entry + .rt-history-entry { border-top: 1px solid var(--rt-rule); }
.rt-history-time { width: 70px; flex: none; padding-top: 2px; color: var(--rt-ink-3); font-size: 10.5px; }
.rt-history-entry-body { flex: 1; min-width: 0; }
.rt-history-entry-body strong { color: var(--rt-ink); font-size: 14px; font-weight: 620; }
.rt-history-entry ul { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 0; padding: 0; list-style: none; }
.rt-history-entry li { position: relative; padding-left: 16px; color: var(--rt-ink-2); font-size: 12.5px; line-height: 1.45; }
.rt-history-entry li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 3px; border-radius: 2px; background: var(--rt-rule-2); }
.rt-history-entry li[data-kind="identity"]::before { background: var(--rt-gold); }
.rt-history-entry li[data-kind="social"]::before { background: var(--rt-ok); }
.rt-history-entry li[data-kind="items"]::before { background: var(--rt-warn); }
.rt-history-entry li[data-kind="status"]::before { background: var(--rt-crit); }

.rt-onboarding {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(13,14,13,.88);
  backdrop-filter: blur(5px);
  transition: opacity 180ms ease, visibility 180ms ease;
}
.rt-onboarding.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.rt-onboarding-card {
  width: min(340px, 100%);
  padding: 22px;
  border: 1px solid var(--rt-rule-2);
  border-radius: 13px;
  color: var(--rt-ink);
  background: var(--rt-surface);
  box-shadow: var(--rt-edge), 0 24px 60px -16px rgb(0 0 0 / .7);
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
.rt-onboarding-card h2 { margin: 8px 0 8px; color: var(--rt-ink); font-size: 19px; font-weight: 620; letter-spacing: -.02em; }
.rt-onboarding-card p { margin: 0 0 17px; color: var(--rt-ink-2); font-size: 12.5px; line-height: 1.55; }
.rt-onboarding-card label { display: block; margin-bottom: 6px; color: var(--rt-ink-2); font-size: 12px; font-weight: 600; }
.rt-onboarding-error { min-height: 19px; padding-top: 4px; color: var(--rt-crit); font-size: 11.5px; }
.rt-start-btn { width: 100%; margin-top: 9px; }

@media (max-width: 900px) {
  .demo-stage, .demo-stage:has(.rt-history.is-open) { grid-template-columns: minmax(0, 380px); gap: 0; }
  .rt-popup { width: 100%; }
  .rt-history { position: absolute; z-index: 3; inset: 20px; width: auto; height: 588px; transform: translateY(10px) scale(.985); transform-origin: center; }
  .rt-history.is-open { transform: none; }
}
@media (max-width: 540px) {
  .demo-stage { min-height: 606px; padding: 8px; border-radius: 18px; }
  .rt-popup { height: 588px; }
  .rt-history { inset: 8px; height: 588px; }
  .rt-history-controls { align-items: stretch; flex-direction: column; }
  .rt-segmented { align-self: flex-start; }
  .rt-history-list { height: calc(100% - 191px); }
  .rt-onboarding { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-stage, .demo-stage *, .demo-stage *::before, .demo-stage *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Billing toggle -------------------------------------------------------
   Research consensus is that a monthly/annual switch is the single highest
   impact element on a pricing page. Built as two real radios so it is
   keyboard reachable and announced, with the visual pill drawn behind. */
.billing { display: flex; justify-content: center; margin: 0 0 1.6rem; }
.billing-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); }
.billing-switch label { position: relative; cursor: pointer; }
.billing-switch input { position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; }
.billing-switch span { display: block; padding: .5rem 1.05rem; border-radius: 999px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted);
  white-space: nowrap; }
.billing-switch input:checked + span { background: var(--signal); color: var(--signal-ink);
  font-weight: 600; }
.billing-switch input:focus-visible + span { outline: 2px solid var(--signal);
  outline-offset: 2px; }
.billing-note { display: block; margin-top: .55rem; text-align: center;
  font-family: var(--mono); font-size: .66rem; color: var(--signal); }

.price-sub { display: block; margin-top: -.7rem; margin-bottom: 1.2rem;
  font-family: var(--mono); font-size: .68rem; color: var(--muted); min-height: 1.1em; }

/* --- Honest limits -------------------------------------------------------
   Stated plainly next to the price rather than buried in terms. Naming a
   constraint before someone pays is what makes the rest of the page credible. */
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .9rem; margin: 1.2rem 0 0; }
.limits > div { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1rem; background: rgba(255,255,255,.015); }
.limits strong { display: block; font-size: .84rem; margin-bottom: .3rem; color: var(--bone); }
.limits span { font-size: .8rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 720px) {
  .billing-switch span { padding: .5rem .8rem; font-size: .68rem; }
}

/* A row that is not a tier difference but a flat no. Spans the three plan
   columns because the answer is the same in all of them, and says why: a
   pricing page that names what it cannot do is easier to trust on what it
   can. */
.compare .never td:first-child { color: var(--bone-soft); }
.compare .never td:last-child { color: var(--muted); font-size: .8rem; }
.compare .grp em { font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--muted); font-family: var(--sans); font-size: .74rem; }

/* --- In-card feature lists ------------------------------------------------
   Every plan renders the SAME rows, so a reader compares by scanning across
   rather than holding three different lists in their head. A row that is not
   in a plan still appears, crossed and dimmed: absence is information.

   Numeric rows carry a fill bar showing that plan's share of the highest
   value on offer, which turns "10 profiles" into something you can see. */
.pf { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex;
  flex-direction: column; gap: .58rem; }
.pf li { display: grid; grid-template-columns: .95rem 1fr; gap: .55rem;
  align-items: start; font-size: .82rem; color: var(--bone-soft); line-height: 1.35; }
/* The tick and cross carry the in-plan/not-in-plan reading on their own, so
   they stay visible rather than leaving the strikethrough to do that work
   alone. Manrope's subset stops short of U+2713/U+2717, so these fall back to
   the system UI face; the fixed column keeps labels aligned either way. */
.pf .mark { display: block; font-size: .8rem; line-height: 1.35; color: var(--signal); }
.pf .pf-group { display: block; }
.pf .pf-group > span:first-child { display: none; }
.pf li.off { color: var(--muted); }
.pf li.off .mark { color: #6b726a; }
.pf li.off .pf-label { text-decoration: line-through; text-decoration-color: #4d534c; }
.pf .pf-label { display: block; }
.pf .pf-bar { display: block; height: 2px; margin-top: .34rem; border-radius: 2px;
  background: rgba(242,240,232,.12); overflow: hidden; }
.pf .pf-bar i { display: block; height: 100%; background: var(--signal); border-radius: 2px; }
.pf-group { margin-top: .5rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pf-group:first-child { margin-top: 0; }

.price-card .pf + .btn { margin-top: 1.4rem; }
.plan-cta { margin-top: 1.3rem; }

/* Fill widths as classes: the build forbids inline styles and the CSP
   would drop them anyway. Rounded to 5%% steps. */
.pf-bar i.f5 { width: 5%; }
.pf-bar i.f10 { width: 10%; }
.pf-bar i.f15 { width: 15%; }
.pf-bar i.f20 { width: 20%; }
.pf-bar i.f25 { width: 25%; }
.pf-bar i.f30 { width: 30%; }
.pf-bar i.f35 { width: 35%; }
.pf-bar i.f40 { width: 40%; }
.pf-bar i.f45 { width: 45%; }
.pf-bar i.f50 { width: 50%; }
.pf-bar i.f55 { width: 55%; }
.pf-bar i.f60 { width: 60%; }
.pf-bar i.f65 { width: 65%; }
.pf-bar i.f70 { width: 70%; }
.pf-bar i.f75 { width: 75%; }
.pf-bar i.f80 { width: 80%; }
.pf-bar i.f85 { width: 85%; }
.pf-bar i.f90 { width: 90%; }
.pf-bar i.f95 { width: 95%; }
.pf-bar i.f100 { width: 100%; }

/* Installation and task-focused content, September 2026. */
.hero h1 { font-size: clamp(3.4rem, 5.3vw, 5.6rem); line-height: 1; }
.intent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.intent-card { border-top: 1px solid var(--line-strong); padding: 1.8rem 0; }
.intent-card h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.25; margin: 1rem 0; }
.intent-card p, .section-followup { color: var(--bone-soft); max-width: 65ch; }
.intent-card a { display: block; width: fit-content; color: var(--signal); margin-top: .85rem; text-underline-offset: .25em; }
.section-followup { margin-top: 1rem; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; }
.quick-answer p:last-child { margin-bottom: 0; }
@media(max-width: 680px) { .intent-grid { grid-template-columns: 1fr; gap: .25rem; } .hero h1 { font-size: clamp(3rem, 12vw, 4.5rem); } }

.desktop-install-help { display: none; }
@media(max-width: 680px) {
  /* Phone visitors are the majority of head-term clicks and cannot install a
     Chrome extension. Give them a real path instead of a footnote. */
  .desktop-install-help { display: block; margin-top: 1.1rem; padding: .95rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255,255,255,.03); font-size: .85rem; color: var(--bone-soft); }
  .desktop-install-help p { margin: 0 0 .7rem; }
  .desktop-install-help strong { color: var(--bone); }
  .desktop-install-help .btn { margin-right: .4rem; }
}

/* ---------------------------------------------------------------------------
   Motion that carries meaning.
   The old hero had a breathing lime orb and a rotating radar behind a static
   mock. Both were decoration: they moved, but they told a visitor nothing
   about what RoTrail does. These components animate the actual product loop
   instead -- a check cycle running, a value being replaced, a request leaving
   the browser -- so the movement is the explanation. Everything below is
   switched off under prefers-reduced-motion at the end of this block.
--------------------------------------------------------------------------- */

/* The check cycle. RoTrail's whole premise is a scheduled re-read, so the
   hero shows one running rather than asserting it in a bullet. */
.check-meter { display: flex; align-items: center; gap: .6rem; margin-left: auto; font-family: var(--mono); font-size: .6rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.check-meter-track { position: relative; width: 54px; height: 3px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.check-meter-fill { position: absolute; inset: 0; transform-origin: left center; background: var(--signal); animation: check-cycle 8s linear infinite; }
@keyframes check-cycle { 0% { transform: scaleX(0); } 92% { transform: scaleX(1); } 92.01%,100% { transform: scaleX(0); } }

/* A detected change is a replacement, so the sample event performs one:
   the old value is struck through and the new value arrives after it. */
.diff-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.diff-old { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,120,120,.7); }
.diff-arrow { color: var(--muted); }
.diff-new { color: var(--signal); animation: diff-in .5s var(--ease) both; }
@keyframes diff-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Where a request actually goes. This replaces the rotating radar, which
   implied a sweep of the platform that RoTrail does not perform. */
.flow-map { display: grid; gap: 0; width: min(100%, 330px); }
.flow-node { position: relative; padding: .95rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #151a15; }
.flow-node strong { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--signal); }
.flow-node span { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.flow-node.is-local { border-color: rgba(200,255,90,.35); }
.flow-pipe { position: relative; justify-self: center; width: 1px; height: 46px; background: var(--line-strong); overflow: hidden; }
.flow-pipe::after { content: ''; position: absolute; left: -1px; width: 3px; height: 14px; border-radius: 99px; background: var(--signal); animation: flow-pulse 3.4s var(--ease) infinite; }
.flow-pipe.is-return::after { animation-name: flow-pulse-up; background: var(--blue); }
@keyframes flow-pulse { from { top: -16px; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } to { top: 46px; opacity: 0; } }
@keyframes flow-pulse-up { from { top: 46px; opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } to { top: -16px; opacity: 0; } }

/* The signal ledger draws itself in as it is read, which keeps a long list
   from landing as one undifferentiated wall. */
.ledger-row { position: relative; }
.ledger-row::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--signal); opacity: .5; transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease); }
.signal-ledger.visible .ledger-row::before { transform: scaleX(1); }
.signal-ledger.visible .ledger-row:nth-child(2)::before { transition-delay: .07s; }
.signal-ledger.visible .ledger-row:nth-child(3)::before { transition-delay: .14s; }
.signal-ledger.visible .ledger-row:nth-child(4)::before { transition-delay: .21s; }
.signal-ledger.visible .ledger-row:nth-child(5)::before { transition-delay: .28s; }
.signal-ledger.visible .ledger-row:nth-child(6)::before { transition-delay: .35s; }
.signal-ledger.visible .ledger-row:nth-child(7)::before { transition-delay: .42s; }
.signal-ledger.visible .ledger-row:nth-child(8)::before { transition-delay: .49s; }

/* Plan limits count up once, so "2 profiles, 5 items, $0" is read as a
   number rather than skimmed as a heading. */
.plan-figures { display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem; margin: 1.6rem 0 1.9rem; }
.plan-figure strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 3.9rem); line-height: 1; color: var(--signal); font-variant-numeric: tabular-nums; }
.plan-figure span { display: block; margin-top: .3rem; color: var(--muted); font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }

/* Facts that used to sit in a bulleted strip now read as a short table,
   which is easier to scan and does not look like generated filler. */
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; margin-top: 1.7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); }
.fact-row div { padding: .85rem .95rem; background: var(--ink); }
.fact-row dt { margin: 0; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.fact-row dd { margin: .3rem 0 0; color: var(--bone); font-size: .85rem; font-weight: 650; }
.fact-row a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 720px) {
  .plan-figures { gap: 1.2rem 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .check-meter-fill, .flow-pipe::after { animation: none; }
  .check-meter-fill { transform: scaleX(.65); }
  .flow-pipe::after { display: none; }
  .diff-new { animation: none; }
  .ledger-row::before { transition: none; transform: scaleX(1); }
}

.page-note { margin-top: 1.5rem; color: var(--muted); font-family: var(--mono); font-size: .72rem; line-height: 1.6; }

/* On a phone the headline was starting a full screen-third down, which pushes
   the install button below the fold on shorter devices. */
@media (max-width: 680px) {
  .hero { padding-top: 2rem; }
  .site-header .nav-wrap { padding-block: .35rem; }
}

/* Field Notes comparison tables: existing palette, keyboard-scrollable on mobile. */
.article-body { min-width: 0; }
.article-body .table-wrap { max-width: 100%; overflow-x: auto; margin: 1.5rem 0; }
.article-body .table-wrap table { display: table; width: 100%; border-collapse: collapse; font-size: .85rem; line-height: 1.6; }
.article-body caption { text-align: left; color: var(--muted); padding-bottom: .65rem; }
.article-body th, .article-body td { min-width: 9rem; padding: .8rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { color: var(--bone); background: rgba(200,255,90,.04); }
.article-body .table-wrap:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.article-aside { max-height: calc(100vh - 112px); overflow-y: auto; }
@media (max-width: 900px) { .article-aside { max-height: none; overflow-y: visible; } }