/* SiriusRx design system.
   Quiet luxury: deep navy, a luminous teal, a restrained star gold, on warm bone.
   One stylesheet for the whole site so a page costs one request and caches once. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/inter-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/fonts/newsreader-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --navy:#1F3A5F; --navy-800:#16304F; --navy-900:#10233A;
  --teal:#2E9CA6;          /* brand mark colour. Never carries small text. */
  --teal-ink:#19737B;      /* text-safe teal. 4.94:1 on bone-2, the WORST background
                              it sits on. Checking it against bone alone was how the
                              4.48 on bone-2 slipped through. */
  --teal-btn:#1E7C85;      /* white on this is 4.9:1 */
  --gold:#8A651D;          /* kicker TEXT. 5.0:1 on bone. */
  --gold-bright:#B98A2E;   /* decorative only, never carries text */
  --gold-soft:#F3E7CC;
  --ink:#12283F; --body:#4A5A6B; --muted:#5B6C7D;  /* 4.80:1 on bone-2, the darkest surface it sits on */
  --bone:#FBF9F5; --bone-2:#F5F1EA; --paper:#ffffff;
  --line:#E6E0D6; --line-soft:#EFEAE1;
  --maxw:1140px; --radius:18px;
  --shadow:0 1px 2px rgba(18,40,63,.04),0 14px 40px rgba(18,40,63,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bone);color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,'Times New Roman',serif;color:var(--ink);font-weight:400;line-height:1.14;margin:0 0 .5em;letter-spacing:-.012em}
h1{font-size:clamp(2.35rem,5.4vw,4rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.42rem);line-height:1.25}
h4{font-size:1.06rem;font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-.008em}
p{margin:0 0 1.15em}
a{color:var(--teal-ink);text-underline-offset:3px}
a:hover{color:var(--navy)}
img,svg{max-width:100%}
:where(a,button,summary,input,textarea):focus-visible{outline:3px solid var(--teal-btn);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-inline:auto}
.eyebrow{font-family:'Inter',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-ink);margin:0 0 .85rem}
.lede{font-size:clamp(1.08rem,1.7vw,1.22rem);color:var(--body)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:12px 18px;border-radius:8px;box-shadow:var(--shadow)}

/* announcement */
.announce{background:var(--navy-900);color:#D8E4EE;font-size:.85rem;text-align:center;padding:9px 16px}
.announce a{color:#8FD5DD;font-weight:600}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:rgba(251,249,245,.9);backdrop-filter:saturate(1.5) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:86px;padding:12px 24px}  /* keeps .wrap's 24px gutter: 'padding:12px 0' zeroed it, so the header sat flush to the
     viewport edge on mobile and 24px wider than every section on desktop */
/* The lockup is an SVG of real Inter outlines, not live text, so it renders identically
   everywhere and does not depend on the webfont having loaded. The tagline is baked in with its
   letter-spacing solved to match the wordmark width exactly, which is what justifies the block.
   Two cuts: the full lockup, and a wordmark-only cut for narrow screens where a baked tagline
   would be about five pixels tall. */
.lockup{display:flex;align-items:center;gap:15px;text-decoration:none;flex-shrink:0}
.lockup-star{width:54px;height:54px;display:block;flex-shrink:0}
.lockup picture{display:block;line-height:0}
.lockup-full{height:46px;width:auto;display:block}
.lockup-txt{display:flex;flex-direction:column;line-height:1.05}
.wordmark{font-family:'Newsreader',serif;font-size:1.72rem;font-weight:600;color:var(--navy);letter-spacing:-.018em}
.lockup-tag{font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink);margin-top:3px}
.nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.nav-btn{display:none}
.nav a{font-size:.93rem;font-weight:500;color:var(--navy);text-decoration:none}
.nav a:hover{color:var(--teal-ink)}
.nav a[aria-current="page"]{color:var(--teal-ink);font-weight:600}
/* .nav a is more specific than .btn-primary, so without this the header CTA renders
   navy on teal at 2.33:1. Found by Lighthouse, not by the palette audit, because the
   failure is a specificity collision rather than a colour choice. */
.nav a.btn-primary{color:#fff}
.nav a.btn-primary:hover{color:#fff}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Inter',sans-serif;font-weight:600;font-size:.97rem;text-decoration:none;border-radius:999px;padding:.78rem 1.5rem;border:1px solid transparent;cursor:pointer;transition:background-color .16s ease,transform .16s ease,border-color .16s ease}
.btn-primary{background:var(--teal-btn);color:#fff}
.btn-primary:hover{background:#186a72;color:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--navy);background:var(--paper)}
.btn-ghost:hover{border-color:var(--teal-btn);color:var(--teal-ink)}
.btn-sm{padding:.55rem 1.15rem;font-size:.9rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 460px at 50% -12%,#EAF4F5 0%,rgba(234,244,245,0) 60%),linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 100%);border-bottom:1px solid var(--line)}
.hero-inner{padding:74px 24px 62px;text-align:center;max-width:900px;margin:0 auto;position:relative;z-index:1}
.hero h1{margin-bottom:.42em}
.hero .lede{max-width:640px;margin:0 auto 2rem}
.hero .cta-row{justify-content:center}
.hero-note{margin:1.5rem 0 0;font-size:.9rem;color:var(--muted)}
.starfield{position:absolute;inset:0;pointer-events:none;opacity:.5}

/* sections */
section{padding:78px 0}
.sec-bone2{background:var(--bone-2);border-block:1px solid var(--line)}
.sec-paper{background:var(--paper);border-block:1px solid var(--line)}
.sec-navy{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-900) 100%);color:#C7D6E4}
.sec-navy h2,.sec-navy h3{color:#fff}
.sec-navy .eyebrow{color:#8FD5DD}
/* The trust strip sets color:var(--ink) for its usual bone background. On the navy band that
   rendered dark-navy-on-navy at about 1.1:1 — effectively invisible. Lighthouse did not flag
   it (gradient background), so the colours are pinned explicitly here. */
.sec-navy .trust li{color:#E3ECF4}
.sec-navy .trust svg{stroke:#8FD5DD}
.sec-head{max-width:680px;margin:0 0 44px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{margin:0;font-size:1.05rem}

/* cards + grids */
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
a.card{display:block;text-decoration:none;color:var(--body);transition:transform .16s ease,border-color .16s ease}
a.card:hover{transform:translateY(-2px);border-color:var(--teal)}
a.card h3{color:var(--ink)}
.card .ico{width:46px;height:46px;border-radius:13px;background:#EAF4F5;display:grid;place-items:center;margin-bottom:18px}
.card .ico svg{width:23px;height:23px;stroke:var(--teal-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more{font-weight:600;color:var(--teal-ink);font-size:.94rem}

/* steps */
.steps{counter-reset:s}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px}
.step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:700;margin-bottom:16px}
.step h3{font-size:1.14rem;margin-bottom:.35em}
.step p{margin:0;font-size:.96rem}

/* trust strip */
.trust{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));list-style:none;margin:0;padding:0}
.trust li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;font-weight:500;color:var(--ink)}
.trust svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;stroke:var(--teal-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
/* min-width:560px used to force a horizontal scroll inside a container that was only 522px wide
   at 1440px, so the right-hand column was clipped on desktop as well as mobile. Cells wrap now
   and the table is given the full content width. */
.tbl-wrap table{min-width:0}
caption{text-align:left;padding:18px 22px 0;color:var(--muted);font-size:.86rem}
th,td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:0}
th[scope="row"]{font-weight:600;color:var(--ink)}

/* figure / illustrative viz */
figure{margin:0}
.viz{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.viz figcaption{font-size:.85rem;color:var(--muted);margin-top:14px}
.illus-tag{display:inline-block;font-family:'Inter',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#7A5E14;background:var(--gold-soft);border-radius:999px;padding:4px 11px;margin-bottom:14px}

/* founders */
.person{display:flex;gap:18px;align-items:flex-start}
.person .avatar{width:58px;height:58px;border-radius:50%;background:linear-gradient(150deg,#E6F1F3,#F3E7CC);display:grid;place-items:center;font-family:'Newsreader',serif;font-size:1.3rem;color:var(--navy);flex-shrink:0}
.person h3{margin-bottom:.15em;font-size:1.15rem}
.person .role{font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);font-weight:600;margin:0 0 .6em}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-weight:600;color:var(--ink);position:relative;font-size:1.03rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:31px;width:10px;height:10px;border-right:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 0 22px;max-width:760px}
.faq .ans p:last-child{margin-bottom:0}

/* article */
.article-body{max-width:720px}
.article-body h2{font-size:clamp(1.5rem,2.4vw,1.95rem);margin-top:2em}
.article-body h3{margin-top:1.6em}
.article-body ul,.article-body ol{padding-left:1.25em;margin:0 0 1.15em}
.article-body li{margin-bottom:.5em}
.meta{font-size:.88rem;color:var(--muted);margin:0 0 2rem}
.meta .sep{opacity:.5;padding:0 .5rem}
.reviewer-slot{font-size:.86rem;color:var(--muted);border-left:3px solid var(--line);padding:2px 0 2px 14px;margin:0 0 2rem}
.callout{background:#EAF4F5;border:1px solid #CFE6E9;border-radius:14px;padding:20px 22px;margin:2rem 0}
.callout p:last-child{margin-bottom:0}
.callout strong{color:var(--ink)}
.refs{font-size:.9rem}
.refs ol{padding-left:1.2em}
.refs li{margin-bottom:.7em}
.disclaimer{font-size:.87rem;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:44px}

/* published date: sits under the byline, inherits .meta colour so it cannot drift from it */
.post-date{display:inline-block;margin-top:.35rem}

/* share row. First-party only: inline SVG, no widget scripts, no icon CDN, which is what keeps
   the security page's "no third party requests" claim true. */
.share{border-top:1px solid var(--line);margin-top:44px;padding-top:22px}
.share-head{font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.share-row{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;
  font-size:.88rem;line-height:1;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 16px;cursor:pointer;text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease}
.share-btn:hover{border-color:var(--teal,#2E9CA6);color:var(--teal,#2E9CA6)}
.share-btn:focus-visible{outline:2px solid var(--teal,#2E9CA6);outline-offset:2px}
.share-btn[data-copied]{border-color:var(--teal,#2E9CA6);color:var(--teal,#2E9CA6);background:#EAF4F5}
.share-icon{flex:0 0 auto}
.share-note{font-size:.82rem;color:var(--muted);margin:.9rem 0 0}

/* blog search + filters + progressive reveal. Design tokens only, no new colours. */
.blog-controls{margin:52px 0 26px}
.search-field{position:relative;max-width:420px}
.search-label{display:block;font-family:'Inter',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.search-input{width:100%;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 38px 11px 14px}
.search-input::placeholder{color:var(--muted)}
.search-input:focus-visible{outline:2px solid var(--teal,#2E9CA6);outline-offset:2px;
  border-color:var(--teal,#2E9CA6)}
.search-input::-webkit-search-cancel-button{display:none}
.search-clear{position:absolute;right:6px;bottom:5px;width:30px;height:30px;line-height:1;
  font-size:1.25rem;color:var(--muted);background:none;border:0;border-radius:8px;cursor:pointer}
.search-clear:hover{color:var(--ink)}
.search-clear:focus-visible{outline:2px solid var(--teal,#2E9CA6);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.chip{font-family:'Inter',sans-serif;font-size:.84rem;line-height:1;color:var(--body);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px;cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease}
.chip:hover{border-color:var(--teal,#2E9CA6);color:var(--teal,#2E9CA6)}
.chip:focus-visible{outline:2px solid var(--teal,#2E9CA6);outline-offset:2px}
.chip.is-on{background:var(--navy,#1F3A5F);border-color:var(--navy,#1F3A5F);color:#fff}
.result-count{font-size:.85rem;color:var(--muted);margin:14px 0 0}
.load-more-wrap{text-align:center;margin:34px 0 0}
.empty-state{border:1px solid var(--line);border-radius:14px;padding:26px;text-align:center;
  color:var(--muted);margin-top:8px}
.empty-state strong{color:var(--ink)}
.fmt-legend{margin:46px 0 0;padding:22px 0 0;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted)}
.fmt-legend .eyebrow{margin:0 0 .9rem}
.fmt-legend div{margin:0 0 .7rem}
.fmt-legend dt{display:inline;font-weight:600;color:var(--ink)}
.fmt-legend dd{display:inline;margin:0}
.fmt-legend dt::after{content:" — "}
@media (max-width:640px){.search-field{max-width:100%}}

/* resource cards */
.kicker{font-family:'Inter',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.kicker.teal{color:var(--teal-ink)}

/* contact / waitlist */
.capture{background:linear-gradient(165deg,var(--navy) 0%,var(--navy-900) 100%);color:#C7D6E4;text-align:center}
.capture h2{color:#fff}
.capture p{max-width:560px;margin-inline:auto;color:#BDCEE0}
.capture .mail{color:#fff;font-weight:600}

/* footer */
.site-footer{background:var(--navy-900);color:#9DB2C6;font-size:.92rem;padding:56px 0 34px}
/* This was `1.4fr repeat(auto-fit,minmax(150px,1fr))`. An auto-repeat track cannot sit beside a
   flexible track, so the whole declaration was invalid and dropped: the footer computed to a
   single 1092px column and all five blocks stacked in a left rail. Explicit tracks instead. */
.foot-grid{display:grid;gap:40px 36px;grid-template-columns:1.7fr repeat(4,minmax(0,1fr));
  align-items:start;margin-bottom:44px}
.foot-brand{max-width:34ch}
.foot-brand p{margin-top:14px}
.foot-col h3{margin-top:2px}
.foot-wordmark{height:44px;width:auto;display:block;margin-bottom:4px}
.site-footer h3{color:#fff;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#B9CBDC;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.foot-brand .wordmark{color:#fff;font-size:1.4rem}
.foot-brand .lockup-tag{color:#8FD5DD}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);padding-top:26px;font-size:.84rem;color:#8398AE}
.foot-copy{margin-top:18px;color:#8398AE;font-size:.84rem}
/* Was max-width:88ch, which computed to 746px inside a 1140px footer and left a third of the
   width empty. Full footer measure now. Long lines at this size need more leading, hence the
   line-height bump; on a very wide monitor a two-column split would read better still. */
.foot-legal p{margin:0 0 .9em;max-width:none;line-height:1.75}
.foot-legal p:last-child{margin-bottom:0}

@media (max-width:1080px){
  /* the brand block stops being a peer of the link columns before the columns get too narrow */
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px}
  .foot-brand{grid-column:1 / -1;max-width:52ch}
}
@media (max-width:720px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr;gap:28px}
}

@media (max-width:860px){
  .lockup-tag{display:none}
  /* <picture> swaps the file; the height rule is what resizes it */
  .lockup-full{height:26px}
  .nav a{font-size:.98rem}
  /* The bar becomes two rows: lockup + menu button, then the nav itself. With JS off the nav
     simply stays on that second row, stacked and fully reachable — nothing is hidden behind a
     control that cannot be operated. With JS on, .js collapses it behind the button. */
  .bar{flex-wrap:wrap;row-gap:0}
  .nav-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:1px solid var(--line);
    border-radius:999px;padding:9px 15px;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:600;
    color:var(--navy);cursor:pointer}
  .nav-btn:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
  .nav-btn-bars{display:flex;flex-direction:column;gap:3px}
  .nav-btn-bars span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px}
  .nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:14px;margin:0 -24px;padding-left:24px;padding-right:24px}
  .nav a{padding:13px 2px;border-top:1px solid var(--line)}
  .nav a.btn-primary{border-top:0;margin-top:12px;text-align:center;padding:13px 20px}
  .js .nav{display:none}
  .js .nav.open{display:flex}
}
@media (max-width:640px){
  section{padding:58px 0}
  .hero-inner{padding:52px 20px 48px}
  .bar{min-height:72px}
  .lockup-star{width:42px;height:42px}
  .lockup-full{height:23px}
  .wordmark{font-size:1.45rem}
  .card{padding:26px 22px}
}


/* Headings balance their line lengths instead of dropping a single orphan word onto the last
   line. Supported in current Chrome, Safari and Firefox; where it is not, headings fall back to
   normal wrapping, which is what they did before. `pretty` is used for the long lede and body
   paragraphs, where balancing every line would look artificial but an orphan still reads badly. */
h1,h2,h3,h4,h5,h6,.wordmark,.sec-head h2,.hero h1{text-wrap:balance}
.lede,.hero-inner p,.sec-head p,figcaption,caption{text-wrap:pretty}

/* ── care model comparison ─────────────────────────────────────────────────────────────────── */
.care-model{max-width:76ch}
.care-table{margin-top:38px}
.cmp table{table-layout:fixed}
.cmp th[scope="row"]{width:22%}
.cmp thead th:nth-child(2),.cmp thead th:nth-child(3),
.cmp td{width:39%}
.cmp th,.cmp td{hyphens:auto;overflow-wrap:anywhere}
.cmp td:last-child{color:var(--ink);font-weight:500}

/* Below the point where three columns stop being readable, each row becomes its own block and
   the column names come back as inline labels. A horizontal scrollbar hides the comparison,
   which is the entire content of this table. */
@media (max-width:720px){
  .cmp table,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmp tr{border-bottom:1px solid var(--line);padding:6px 0 12px}
  .cmp tr:last-child{border-bottom:0}
  .cmp th[scope="row"]{width:auto;padding:16px 20px 6px;font-size:.76rem;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);font-weight:600}
  .cmp td{border-bottom:0;padding:5px 20px 5px 20px;display:grid;grid-template-columns:1fr;gap:2px}
  .cmp td::before{content:attr(data-label);font-size:.72rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--teal-ink);font-weight:600}
  .cmp td:last-child::before{color:var(--gold)}
  /* once `table` is display:block the caption loses its table-caption box and shrink-wraps
     to the longest word, so it needs an explicit block of its own */
  .cmp caption{display:block;width:100%;box-sizing:border-box;padding:18px 20px 6px}
}

/* Markdown posts may use blockquotes; the migrated ten do not, so this had no style and rendered
   as an unexplained indent. */
.article-body blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--teal);
  color:var(--ink);font-style:italic}
.article-body blockquote p{margin:0}
.article-body pre{background:var(--bone-2);border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;overflow-x:auto;font-size:.88rem}
.article-body code{background:var(--bone-2);border-radius:4px;padding:1px 5px;font-size:.9em}
.article-body pre code{background:none;padding:0}


/* ── waitlist form ─────────────────────────────────────────────────────────────────────────── */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 40px 34px;box-shadow:0 1px 2px rgba(16,35,58,.04),0 8px 30px rgba(16,35,58,.05)}
.form-head{margin-bottom:30px}
.form-head h2{margin:0 0 8px}
.form-head p{margin:0;color:var(--body)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{margin-bottom:26px;border:0;padding:0;min-width:0}
.field-half{max-width:320px}
.field label,.field legend{display:block;font-family:'Inter',sans-serif;font-size:.92rem;
  font-weight:600;color:var(--ink);margin-bottom:8px;padding:0}
.req{color:var(--teal-ink)}
.opt{font-weight:400;color:var(--muted);font-size:.86rem}
.field-hint{margin:8px 0 0;font-size:.85rem;color:var(--muted)}
.field input[type=text],.field input[type=email],.field textarea,.field select{
  width:100%;box-sizing:border-box;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:104px}
.field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F7183' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:12px;padding-right:40px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal-ink);
  box-shadow:0 0 0 3px rgba(46,156,166,.18)}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#9B2C2C}
.field-error,.form-error{margin:8px 0 0;font-size:.86rem;color:#9B2C2C;font-weight:500}
.form-error{margin-top:18px}

.choices{display:grid;gap:12px}
/* `.field label{display:block}` is (0,1,1) and was beating a bare `.choice` at (0,1,0), so the
   checkbox stacked above its text instead of sitting beside it. Matched at equal specificity. */
.field label.choice{display:flex;gap:13px;align-items:flex-start;padding:15px 17px;
  border:1px solid var(--line);border-radius:12px;background:var(--bone);cursor:pointer;
  margin-bottom:0;font-weight:400;transition:border-color .15s,background .15s}
.field label.choice:hover{border-color:var(--teal)}
.choice input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--teal-btn);flex-shrink:0}
.field label.choice:has(input:checked){border-color:var(--teal-ink);background:var(--callout)}
.field label.choice:has(input:focus-visible){box-shadow:0 0 0 3px rgba(46,156,166,.18)}
.choice-body{display:flex;flex-direction:column;gap:3px}
.choice-title{font-family:'Inter',sans-serif;font-weight:600;font-size:.95rem;color:var(--ink)}
.choice-note{font-size:.86rem;color:var(--muted)}

.form-foot{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  border-top:1px solid var(--line-soft);padding-top:26px}
.btn-lg{padding:15px 30px;font-size:1rem}
.form-reassure{margin:0;font-size:.88rem;color:var(--muted);max-width:56ch}

/* Honeypot. Off-screen rather than display:none, because some bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-done{text-align:center;padding:52px 40px}
.done-mark svg{width:56px;height:56px;margin-bottom:18px}
.done-mark circle{fill:none;stroke:var(--teal);stroke-width:2}
.done-mark path{fill:none;stroke:var(--teal-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.form-done h2{margin:0 0 12px}
.form-done p{margin:0 auto;max-width:52ch;color:var(--body)}
.done-note{margin-top:16px !important;font-size:.9rem;color:var(--muted)}
.alt-contact{margin-top:26px;text-align:center;color:var(--muted);font-size:.94rem}

@media (max-width:640px){
  .form-card{padding:28px 22px 26px}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-done{padding:40px 22px}
}