/* 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; } }

/* ===========================================================================
   MOBILE READABILITY AND TOUCH LAYER
   ---------------------------------------------------------------------------
   Roughly 40% of search impressions are phones, and phones rank BETTER than
   desktop (avg position 8.6 vs 11.1) while converting worse. The desktop
   design leans on small mono labels (.6rem-.78rem = 9.6px-12.5px) for its
   technical character. That reads as texture on a 27" display and as
   unreadable on a 375px phone.

   This layer sets two floors on small screens without touching the desktop
   design: a legible minimum text size, and a 44px minimum touch target on
   controls that stand alone. Inline links inside prose keep their natural
   size - WCAG exempts them, and padding them out would wreck paragraph
   rhythm.
   ========================================================================= */

@media (max-width: 900px) {

  /* --- 1. Text size floor ------------------------------------------------
     Every mono label class below sat between 9.6px and 12.5px. They carry
     real information (publish dates, plan captions, table headers, status
     words), so they move to 12.5px minimum. Letter-spacing eases back
     slightly because tracked-out uppercase costs width we no longer have. */
  .eyebrow { font-size: .8rem; letter-spacing: .08em; }
  .window-status,
  .monitor-meta small,
  .monitor-pill,
  .activity-head,
  .event time,
  .ledger-index, .ledger-state,
  .quote-panel footer,
  .footer-col h3,
  .footer-bottom,
  .price-label,
  .support-card .tag,
  .support-card a,
  .blog-card .kicker,
  .blog-card .card-meta,
  .article-meta,
  .article-body th,
  .quick-answer strong,
  .answer-card strong,
  .article-aside h2,
  .dashboard-nav-label,
  .stat span,
  .stat strong.plan-badge,
  .inline-status,
  .gain,
  .plan-headline .cap,
  .compare thead th,
  .compare .grp td { font-size: .79rem; letter-spacing: .06em; }

  .event p,
  .privacy-core,
  .price small,
  .status-note,
  .article-aside a,
  .article-related-links a,
  .source-note,
  .subtle,
  .profile-line p,
  .key-box-body p,
  .field,
  .compare .never td:last-child,
  .compare .grp em,
  .pf li,
  .pf .mark { font-size: .84rem; }

  /* Body copy and list text get a touch more room to breathe. */
  .article-body p, .article-body li { line-height: 1.68; }

  /* --- 2. Touch targets --------------------------------------------------
     44px is the accessible minimum. These are standalone controls, not
     inline prose links. */
  .menu-toggle { width: 46px; height: 46px; }
  .btn-sm { min-height: 44px; padding: .7rem .9rem; }
  .desktop-nav.open a { min-height: 44px; display: flex; align-items: center; }
  .faq-question { min-height: 44px; }
  .article-aside a { padding: .5rem 0; }
  .article-related-links a { padding: .7rem .95rem; }
  .footer-col a, .footer-bottom a { display: inline-block; padding: .35rem 0; }
  .intent-card a, .section-followup a { display: inline-block; padding: .45rem 0; }
  .blog-card a { min-height: 44px; display: flex; align-items: center; }

  /* --- 3. Hero scale -----------------------------------------------------
     .hero h1 resolved to 48px and .page-hero h1 to ~64px at 375px, with
     line-height .9. That pushed the install CTA below the fold on the page
     that most needs it above the fold. */
  .hero h1 { font-size: clamp(2.35rem, 9.5vw, 3.1rem); line-height: .98; letter-spacing: -.035em; }
  .page-hero h1 { font-size: clamp(2.2rem, 9vw, 2.9rem); line-height: 1.02; letter-spacing: -.03em; }
  .hero-lede { font-size: 1rem; }

  /* --- 4. Wide tables ----------------------------------------------------
     Tables already scroll inside their own container, but nothing told the
     reader that. A soft right-edge fade plus momentum scrolling does. */
  .article-body table {
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .article-body th, .article-body td { white-space: nowrap; }
}

/* Very small phones (<=390px) still need the hero to clear the fold. */
@media (max-width: 390px) {
  .hero h1 { font-size: clamp(2.1rem, 8.8vw, 2.5rem); }
  .page-hero h1 { font-size: clamp(2rem, 8.4vw, 2.4rem); }
  .hero { padding-top: 3rem; }
}

/* The extension simulation mimics a compact browser panel, so its type is
   deliberately tight. Below 680px that tips from "compact" into "cannot
   read", so each step moves up to a legible floor while keeping the
   panel's internal proportions.

   Scoped to 900px, not 680px: that is where the layout already collapses to
   a single column, and a 768px tablet is a touch device reading the same
   9.6px labels a phone was. */
@media (max-width: 900px) {
  .rt-label, .rt-chip { font-size: 12px; letter-spacing: .08em; }
  .rt-watch-meta, .rt-event-when, .rt-seg { font-size: 12px; }
  .rt-msg, .rt-status-word, .rt-onboarding-card label { font-size: 12.5px; }
  .rt-btn-sm { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .rt-seg { padding: 7px 10px; }
}

/* Stragglers caught by re-measuring the rendered page rather than reading the
   stylesheet: these sit in the hero simulation and the local-vs-cloud flow
   diagram, where the type was tuned for a wide canvas. */
@media (max-width: 900px) {
  .page-note { font-size: .82rem; }
  .check-meter { font-size: .74rem; letter-spacing: .05em; }
  .flow-node strong { font-size: .8rem; letter-spacing: .05em; }
  .flow-node span { font-size: .85rem; }
  .event-icon { font-size: .8rem; width: 36px; height: 36px; }

  /* Standalone links needed a little more than .45rem to clear 44px. */
  .intent-card a, .section-followup a,
  .article-aside a, .footer-col a { padding-block: .62rem; }
  .brand { min-height: 44px; }
}

/* Final pass, driven by measuring every page type at 375px rather than by
   reading selectors. min-height on an inline-flex box is deterministic here;
   padding alone kept landing at 40-41px because it compounds with whatever
   line-height the link inherited. */
@media (max-width: 900px) {
  /* inline-flex collapses these into one run when the source has them as
     block-level list links, so the ones that stack keep `flex` and only the
     genuinely inline ones get `inline-flex`. */
  .article-aside a { display: flex; align-items: center; min-height: 44px; }
  /* footer links were block + fit-content so the hover target matched the
     text; keep that width rather than stretching them across the column. */
  .footer-col a { display: flex; align-items: center; width: fit-content; min-height: 44px; }
  .desktop-nav a { display: flex; align-items: center; min-height: 44px; }
  .support-card a,
  .intent-card a,
  .section-followup a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .support-card a { margin-top: .6rem; }

  /* Pricing controls: the billing toggle is the page's main interaction and
     was rendering at 10.9px. The 720px rule above is more specific, so these
     restate the selector rather than relying on the cascade. */
  .billing-switch span { font-size: .82rem; padding: .7rem 1rem; }
  .billing-note, .price-sub { font-size: .82rem; }
  .check-meter { font-size: .79rem; }
  .demo-disclosure { font-size: .82rem; }

  /* The demo page is a real, tappable simulation, not a picture of one, so
     its controls take the same 44px floor as the rest of the site. Widths
     stay auto so the panel keeps its shape. */
  .rt-btn, .rt-btn-sm, .rt-seg { min-height: 44px; }
  .rt-icon-btn { min-width: 44px; min-height: 44px; }
  .rt-chip, .rt-label { font-size: 12.5px; }
  .rt-panel p, .demo-note p { font-size: .82rem; }
}

/* Last three, found by walking the DOM path rather than guessing selectors:
   the homepage plan figures, and two demo-panel controls sitting 1px under
   the 44px floor because rt-icon-btn/rt-seg set an explicit height. */
@media (max-width: 900px) {
  .plan-figure span { font-size: .82rem; }
  .rt-status span, .rt-status .rt-btn { font-size: 12.5px; }
  .rt-history-head p { font-size: .82rem; }
  .rt-icon-btn, .rt-seg { height: 44px; }
}

/* The demo controls landed at 43px: rt-seg/rt-icon-btn set an explicit height
   that box-sizing then trims by their 1px border. Setting both height and
   min-height removes the ambiguity. The byline link on article pages is the
   last inline control that reads as standalone. */
@media (max-width: 900px) {
  .rt-icon-btn, .rt-seg { height: 46px; min-height: 46px; box-sizing: border-box; }
  .article-meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* .floating-note is display:none under 680px, so it slipped past the sweep
   above and stayed at 10.4px on tablets, where it is still on screen. */
@media (min-width: 681px) and (max-width: 900px) {
  .floating-note { font-size: .8rem; width: 200px; }
}

/* Chrome Web Store rating, shown beside the install CTA. Google requires a
   marked-up aggregateRating to be visible on the page, and the numbers are
   the real listing's, linked to it so a reader can check them. */
.store-rating { margin: .9rem 0 0; color: var(--muted); font-family: var(--mono); font-size: .78rem; line-height: 1.5; }
.store-rating strong { color: var(--bone); }
.store-rating-stars { color: var(--signal); letter-spacing: .06em; }
.store-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }
.store-rating a:hover { color: var(--signal); }
@media (max-width: 900px) { .store-rating { font-size: .8rem; } }