/* AI NetRiva — site styles.
   Extracted from the approved design so every page shares one cached stylesheet
   instead of repeating an inline <style> block per page. The token set, type
   scale and component rules below are the design's; the additions are the
   components the extra pages need (pricing table, prose, changelog, tables).

   Deliberately light-only. The design commits to a light page with one dark
   band; bolting on a dark theme would diverge from what was approved. */

@import url('/fonts/fonts.css');

:root{
  --page:#fff; --tint:#F4F7FA; --line:#E2E6EE; --hair:#F3F5F9; --rule:#D3DAE6;
  --ink:#101521; --body:#59637A; --meta:#667284;
  --accent:#0B7F8C; --accent-tint:#E9F6F7;
  --violet:#6B4FD8; --violet-tint:#F1EEFC;
  --up:#17A863; --warn:#8A5B00; --warn-dot:#E0A020; --down:#D92D36; --down-tint:#FFF3F3;
  --dark:#101521; --dark-2:#1A2130; --dark-line:#2A3345; --dark-body:#9AA5B8; --dark-cyan:#4CD7E0;
  --ui:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --pad:44px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.6 var(--ui);-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:var(--accent);text-decoration:none}
a:hover{color:#09656F}
h1,h2,h3,h4{margin:0;font-family:var(--display);letter-spacing:-.025em;font-weight:600}
p{margin:0}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:780px}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--meta);line-height:1.7}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:50}
.skip:focus{left:0;color:#fff}

/* header */
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--hair)}
.bar{display:flex;align-items:center;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand .ai{color:var(--accent)}
nav.top{display:flex;align-items:center;gap:24px;margin-left:auto}
nav.top a:not(.btn){font-size:13.5px;font-weight:500;color:var(--body)}
nav.top a:not(.btn):hover{color:var(--ink)}
/* :not(.btn) matters. The Download button is .btn-ink — dark background, white
   text — and on /download/ it also carries aria-current. Without the exclusion
   this rule repainted its text var(--ink) on a var(--ink) background, so the
   button rendered as a solid black block with the word invisible inside it. */
nav.top a[aria-current=page]:not(.btn){color:var(--ink)}
/* The current-page button still needs to say so, just not by erasing itself. */
nav.top a.btn-ink[aria-current=page]{background:#1D2637;color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:10px;font-size:14.5px;font-weight:600;border:1px solid transparent;cursor:pointer;font-family:var(--ui);transition:background .15s,border-color .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#09656F;color:#fff}
.btn-ghost{border-color:var(--rule);color:#39415A;background:#fff}
.btn-ghost:hover{background:var(--tint);color:var(--ink)}
.btn-ink{background:var(--ink);color:#fff;padding:9px 17px;font-size:13px;border-radius:8px}
.btn-ink:hover{background:#1D2637;color:#fff}
.btn-cyan{background:var(--dark-cyan);color:#07090D}
.btn-cyan:hover{background:#6FE2EA;color:#07090D}

/* hero */
.hero{background:linear-gradient(180deg,#fff,var(--tint));border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center;padding-block:88px 76px}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:1.08;text-wrap:balance}
.hero p.lede{font-size:18px;color:var(--body);max-width:460px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* page header (inner pages) */
.pagehead{background:linear-gradient(180deg,#fff,var(--tint));border-bottom:1px solid var(--line);padding-block:56px 48px}
.pagehead h1{font-size:clamp(28px,3.8vw,42px);line-height:1.1;text-wrap:balance}
.pagehead p{font-size:17px;color:var(--body);max-width:620px;margin-top:14px}

/* live card */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(16,21,33,.09);padding:26px;display:flex;flex-direction:column;gap:18px}
.card-head{display:flex;align-items:center;justify-content:space-between}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--meta)}
.live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;color:#0F7A47}
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tally b{display:block;font-family:var(--display);font-size:30px;font-weight:600;line-height:1}
.tally span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--meta)}
.bar-split{display:flex;height:7px;border-radius:4px;overflow:hidden;background:#EDF0F6}
.rows{border-top:1px solid var(--hair)}
.row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row .name{flex:1;font-size:13.5px;font-weight:500}
.row .val{font-family:var(--mono);font-size:12px;color:var(--body)}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.up{background:var(--up)}.dot.warn{background:var(--warn-dot)}.dot.down{background:var(--down);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.assist{padding:14px;background:var(--violet-tint);border:1px solid #DED8F5;border-radius:10px;font-size:13px;line-height:1.6;color:#39415A}
.assist b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--violet);font-weight:500;margin-bottom:6px}

/* features */
.section{padding:72px 0}
.section.tight{padding:48px 0}
.section-head{display:flex;flex-direction:column;gap:12px;max-width:620px;margin-bottom:44px}
.section-head h2{font-size:clamp(26px,3vw,34px)}
.section-head p{font-size:16px;color:var(--body)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature{display:flex;flex-direction:column;gap:11px}
.ico{width:38px;height:38px;border-radius:10px;background:var(--accent-tint);display:flex;align-items:center;justify-content:center}
.ico.v{background:var(--violet-tint)}
.ico.d{background:var(--down-tint)}
.feature h3{font-size:17px}
.feature p{font-size:14px;color:var(--body);line-height:1.7}

/* panel */
.panel{margin:0 0 64px;padding:48px;background:var(--tint);border:1px solid var(--line);border-radius:16px;display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center}
.panel.solo{grid-template-columns:1fr}
.panel h2{font-size:clamp(24px,2.6vw,30px)}
.panel p{font-size:15.5px;color:var(--body);max-width:400px;margin-top:12px}
.dl{display:flex;flex-direction:column;gap:10px}
.dl a.file,.dl .file{display:flex;align-items:center;gap:12px;padding:15px 18px;background:#fff;border:1px solid var(--rule);border-radius:11px;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .06s}
.dl a.file:hover{border-color:var(--accent);box-shadow:0 6px 18px rgba(16,21,33,.08);color:var(--ink)}
.dl a.file:active{transform:translateY(1px)}
.dl .t{display:flex;flex-direction:column;min-width:0}
.dl .t strong{font-size:14px;font-weight:600}
.dl .t span{font-family:var(--mono);font-size:11px;color:var(--meta)}
.dl .meta a{color:#09656F}
.panel .dl .meta{font-size:11.5px;margin-top:4px;max-width:none}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tier{display:flex;flex-direction:column;gap:14px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:14px}
.tier.pick{border-color:var(--accent);box-shadow:0 14px 40px rgba(11,127,140,.13)}
.tier .devices{font-family:var(--display);font-size:22px;font-weight:600}
.tier .price{display:flex;align-items:baseline;gap:6px}
.tier .price b{font-family:var(--display);font-size:38px;font-weight:600;line-height:1}
.tier .price span{font-family:var(--mono);font-size:11.5px;color:var(--meta)}
.tier .sku{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--meta)}
.tier .btn{margin-top:auto}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--accent-tint);color:#09656F;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.badge.v{background:var(--violet-tint);color:var(--violet)}
.badge.n{background:#FFF6E5;color:var(--warn)}

/* trial band: the one non-purchase call to action on the pricing page. Sits
   below the grid so buying reads as the default and trying is the deliberate
   alternative, rather than six cards all saying "free". */
.trialband{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:24px;padding:26px 28px;border:1px solid var(--line);background:var(--tint);border-radius:14px}
.trialband h2{font-size:20px}
.trialband p{font-size:14.5px;color:var(--body);margin-top:8px;max-width:580px}
.trialband .btn{margin-left:auto;flex-shrink:0}
/* Once wrapped, margin-left:auto would strand the button against the right
   edge on its own row, which reads as a mistake rather than a choice. */
@media(max-width:700px){.trialband .btn{margin-left:0;width:100%}}

/* consent row. The checkbox keeps its native size and hit area -- a restyled
   one that loses the focus ring or the keyboard toggle is worse than a plain
   one, and this is a control whose state has to be obvious at a glance. */
.checkrow{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--dark-body);line-height:1.6;padding:2px 0}
.checkrow input[type=checkbox]{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--dark-cyan)}
.checkrow label{cursor:pointer}
.checkrow a{color:var(--dark-cyan)}

/* generic table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hair)}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--meta);font-weight:500;background:var(--tint)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);white-space:nowrap}

/* prose */
.prose{max-width:720px;display:flex;flex-direction:column;gap:18px;font-size:15.5px;color:var(--body);line-height:1.75}
.prose h2{font-size:24px;color:var(--ink);margin-top:22px}
.prose h3{font-size:17.5px;color:var(--ink);margin-top:14px}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose code{font-family:var(--mono);font-size:13px;background:var(--tint);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink)}
.prose pre{margin:0;overflow-x:auto;background:var(--dark);color:#E7ECF5;border-radius:11px;padding:18px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.65}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
.prose blockquote{margin:0;padding:14px 18px;background:var(--accent-tint);border-left:3px solid var(--accent);border-radius:0 9px 9px 0;color:#2A3B44}
.callout{padding:16px 18px;border:1px solid var(--line);background:var(--tint);border-radius:11px;font-size:14.5px;line-height:1.7;color:var(--body)}
.callout.warn{background:#FFF9EC;border-color:#F0E0BC}
.callout b{color:var(--ink)}

/* two-column content split (licence page). A class rather than an inline
   grid-template-columns, so it can collapse at the breakpoint below -- a
   hardcoded 1fr 1fr squashes both columns to ~150px on a phone. */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

/* changelog */
.release{display:grid;grid-template-columns:170px 1fr;gap:28px;padding:26px 0;border-top:1px solid var(--hair)}
.release:first-of-type{border-top:0}
.release .when{display:flex;flex-direction:column;gap:6px}
.release .when b{font-family:var(--display);font-size:19px;font-weight:600}
.release ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:14.5px;color:var(--body);line-height:1.7}

/* forms */
.formcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;max-width:520px}
.formcard form{gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:600;color:var(--ink)}
.formcard input,.formcard textarea{background:#fff;border:1px solid var(--rule);color:var(--ink)}
.formcard input:focus,.formcard textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(11,127,140,.14)}
.formcard input::placeholder,.formcard textarea::placeholder{color:#9AA3B4}
.formcard .formnote{color:var(--body)}

/* contact band */
.contact{background:var(--dark);color:#F4F6FA;padding:60px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.contact h2{font-size:clamp(24px,2.4vw,28px)}
.contact p{font-size:15px;color:var(--dark-body);max-width:360px;margin-top:14px}
.contact .mail{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:13.5px;color:var(--dark-cyan)}
form{display:flex;flex-direction:column;gap:10px}
.pair{display:flex;gap:10px}
.pair>*{flex:1;min-width:0}
input,textarea{width:100%;padding:12px 14px;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:9px;font:13.5px/1.5 var(--ui);color:#F4F6FA}
input::placeholder,textarea::placeholder{color:var(--dark-body)}
input:focus,textarea:focus{outline:none;border-color:var(--dark-cyan);box-shadow:0 0 0 3px rgba(76,215,224,.16)}
textarea{min-height:96px;resize:vertical}
form .btn{align-self:flex-start}
.formnote{font-size:12.5px;color:var(--dark-body);min-height:18px}
/* Honeypot: a real person never fills this, a naive bot fills every field. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
footer{padding:22px 0;border-top:1px solid var(--hair)}
.foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--meta)}
.foot nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.foot a{color:var(--meta)}
.foot a:hover{color:var(--ink)}

@media (max-width:940px){
  :root{--pad:24px}
  .hero-grid{grid-template-columns:1fr;gap:40px;padding-block:56px 48px}
  .hero p.lede{max-width:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .panel{grid-template-columns:1fr;padding:32px}
  .contact-grid{grid-template-columns:1fr;gap:32px}
  .twocol{grid-template-columns:1fr;gap:32px}
  .formcard{max-width:none}
  nav.top a:not(.btn){display:none}
  .section{padding:52px 0}
  .release{grid-template-columns:1fr;gap:12px}
}
@media (max-width:620px){
  .features{grid-template-columns:1fr;gap:24px}
  .tiers{grid-template-columns:1fr}
  .pair{flex-direction:column}
  .foot nav{margin-left:0;gap:16px}
}