:root{
  /* ======================================================================
     BRAND PALETTE — the DOCUMENTED values from PROVIRA_Coral_Logo_Package,
     2026-08-12. These supersede the numbers I sampled off the NAKIRA print
     master (#F25838 / #001346); a written brand spec beats pixel-picking.
       Primary coral  #F05B43      Deep coral   #AE3445
       Deep navy      #081D42      Light coral  #FF9D80
     Provira's cyan is RETIRED — the product mark is coral now.
     ====================================================================== */
  --navy:#081D42; --navy-8:#04122C; --coral:#F05B43; --coral-dk:#AE3445;
  /* Provira's light coral, from the same spec. Highlight only — at 2.0:1 on
     white it is never text. The cyan that used to live here is retired. */
  --provira:#FF9D80;
  --ink:#16212B; --body:#4A5763;
  /* ACCESSIBILITY, 2026-08-09. --muted was #71808D, which measured 4.06:1 on
     white and 3.84:1 on the wash — under the 4.5:1 AA threshold for text at
     these sizes. The accessibility page claims AA-checked contrast, so this is
     the claim being made true rather than retracted. */
  --muted:#64717D;
  /* --coral-text is coral for SMALL TEXT: eyebrows, numerals, required markers,
     inline labels. Brand --coral (var(--coral)) measures 2.79:1 on white and
     --coral-dk (#E1554A) 3.75:1 — both fail AA as type. This passes on white,
     both washes and the pale pink note background. Rule of thumb: --coral for
     fills and strokes, --coral-text whenever coral IS the letterform. */
  --coral-text:#C33C27;
  --line:#E2E7EC; --line-2:#EEF1F4; --wash:#F7F9FA; --wash-2:#F2F5F7; --white:#fff;
  --max:1120px; --r:10px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--body);background:var(--white);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:640;letter-spacing:-.021em;line-height:1.16}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.032em}
h2{font-size:clamp(1.55rem,2.7vw,2.15rem);letter-spacing:-.026em}
h3{font-size:1.12rem;letter-spacing:-.012em;line-height:1.35}
p{margin:0 0 1.05em}
a{color:var(--navy);text-decoration:none}
strong{color:var(--ink);font-weight:640}
em{font-style:italic}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.narrow{max-width:var(--max)}
.narrow>*{max-width:768px}
.final .wrap{max-width:var(--max)}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:34px;height:70px}
/* The brand is now the real logo lockup rather than an icon plus HTML type.
   The official lockup is stacked (emblem over NAKIRA over SOLUTIONS) and will
   not read at a 70px header height, so the header and footer use a derived
   horizontal arrangement of the same elements. The stacked original is used
   at full size on the Company page, where there is room for it. */
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:38px;width:auto;display:block}
@media(max-width:620px){.brand img{height:31px}}
.nav nav{display:flex;gap:29px}
.nav nav a{color:var(--body);font-size:.935rem;font-weight:520;padding:4px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--navy)}
.nav nav a.on{color:var(--navy);border-bottom-color:var(--coral)}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:11px 19px;border-radius:7px;
  font-size:.925rem;font-weight:600;border:1px solid var(--navy);cursor:pointer;transition:.15s}
.btn:hover{background:var(--navy-8)}
.btn.g{background:transparent;color:var(--navy);border-color:var(--line)}
.btn.g:hover{border-color:var(--navy);background:var(--wash)}
.btn.lg{padding:14px 26px;font-size:1rem}
.burger{display:none;background:none;border:0;font-size:1.4rem;color:var(--navy);cursor:pointer}
@media(max-width:900px){
  .nav nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:8px 28px 18px;border-bottom:1px solid var(--line)}
  .nav nav.open{display:flex}
  .nav nav a{padding:11px 0;border-bottom:1px solid var(--line-2)}
  .burger{display:block}
  .nav .btn{display:none}
}

/* ---------- generic sections ---------- */
section{padding:78px 0;border-top:1px solid var(--line-2)}
section.tint{background:var(--wash)}
.eyebrow{color:var(--coral-text);font-size:.735rem;font-weight:720;letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 15px}
.lede{font-size:1.16rem;color:var(--body);max-width:62ch}
.sub{font-size:1.05rem}
.fn{font-size:.795rem;color:var(--muted);line-height:1.55;border-top:1px solid var(--line);
  padding-top:13px;margin-top:26px;max-width:78ch}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#DCE4EB;border-top:0;padding:104px 0 96px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 460px at 88% -8%,rgba(242,88,56,.15),transparent 62%)}
.hero .wrap{position:relative}
.hero h1{color:#fff;max-width:19ch}
.hero .sub{color:#B9C6D2;font-size:1.2rem;max-width:57ch;margin:22px 0 34px}
.hero .btn{background:var(--coral);border-color:var(--coral);color:#1A1005}
.hero .btn:hover{background:#FF7863;border-color:#FF7863}
/* Outline buttons on ANY dark band. This was scoped to .hero only, which left
   "See how we handle data" on the dark .strip section rendering navy-on-navy —
   a 1:1 contrast ratio, i.e. a completely invisible button that still worked if
   you happened to click it. Keep every dark section listed here. */
.hero .btn.g,.strip .btn.g,.ledger .btn.g,.final.dark .btn.g{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.hero .btn.g:hover,.strip .btn.g:hover,.ledger .btn.g:hover,.final.dark .btn.g:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.cta-row{display:flex;gap:13px;flex-wrap:wrap}
.micro{margin:26px 0 0;font-size:.86rem;color:#8FA1B1;letter-spacing:.012em}
.micro b{color:#C9D5DF;font-weight:560}

/* ---------- the loop ---------- */
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;position:relative}
.loop:before{content:"";position:absolute;top:19px;left:9%;right:9%;height:2px;background:var(--line)}
.step{position:relative;padding:0 13px;text-align:left}
.dot{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--line);
  color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:.93rem;position:relative;z-index:2;margin-bottom:16px}
.step.key .dot{background:var(--coral);border-color:var(--coral);color:#1A1005;
  box-shadow:0 0 0 5px rgba(242,88,56,.14)}
.step h3{margin-bottom:6px}
.step p{font-size:.925rem;line-height:1.56;margin:0}
.step.key h3:after{content:"the human gate";display:block;color:var(--coral-text);font-size:.68rem;
  font-weight:730;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
@media(max-width:880px){
  .loop{grid-template-columns:1fr;gap:26px}
  .loop:before{top:0;bottom:0;left:18px;right:auto;width:2px;height:auto}
  .step{padding:0 0 0 0;display:grid;grid-template-columns:38px 1fr;gap:18px;align-items:start}
  .dot{margin-bottom:0}
}
.tagline{margin-top:38px;font-size:1.06rem;color:var(--ink);font-weight:560}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:880px){.grid3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:27px 25px;display:flex;flex-direction:column}
.card.on-tint{background:#fff}
.card h3{margin-bottom:9px}
.card p{font-size:.94rem;line-height:1.58;margin:0}
.card .num{color:var(--coral-text);font-size:.72rem;font-weight:730;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:11px}

/* tier cards */
.tier{display:flex;flex-direction:column}
.tier .badge{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:20px;margin-bottom:13px}
.badge.live{background:#E6F4EC;color:#1B6E43}
.badge.soon{background:var(--wash-2);color:var(--muted);border:1px solid var(--line)}
.tier h3{font-size:1.28rem}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 0}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 15px;
  font-size:.885rem;color:var(--ink);font-weight:520}
.chip.first{border-color:var(--coral);color:var(--coral-text);font-weight:620}

/* ---------- security strip ---------- */
.strip{background:var(--navy);color:#C4D0DB;border-top:0}
.strip h2{color:#fff}
.strip p{color:#AEBDC9}
.strip .status{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:.9rem;
  color:#8FA1B1;border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:6px 14px}
.strip .status i{width:6px;height:6px;border-radius:50%;background:var(--coral);display:block}

/* ---------- quote / proof ---------- */
.proof{border-left:3px solid var(--coral);padding:4px 0 4px 26px;max-width:70ch}
.proof p{font-size:1.13rem;color:var(--ink);margin:0}
.founder .proof{margin-top:20px}
.founder .proof, .proof{font-style:normal}

/* ---------- two-column compare ---------- */
.cmp{width:100%;border-collapse:collapse;margin-top:34px;font-size:.945rem}
.cmp th{text-align:left;padding:13px 16px;background:var(--wash-2);color:var(--ink);
  font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:730;border:1px solid var(--line)}
.cmp td{padding:14px 16px;border:1px solid var(--line);vertical-align:top}
.cmp tr td:first-child{color:var(--muted);width:48%}
.cmp tr td:last-child{color:var(--ink)}

/* ---------- planes ---------- */
.planes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px}
@media(max-width:880px){.planes{grid-template-columns:1fr}}
.plane{border:1px solid var(--line);border-radius:var(--r);padding:27px 25px;background:#fff}
.plane.work{border-top:3px solid var(--navy)}
.plane.learn{border-top:3px solid var(--coral)}
.plane h3{margin-bottom:10px}
.plane p{font-size:.94rem;margin:0}
.plane .tag{font-size:.7rem;font-weight:730;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}

/* ---------- honest lists ---------- */
.honest{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:36px}
@media(max-width:880px){.honest{grid-template-columns:1fr}}
.honest h3{font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;margin-bottom:16px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.honest .now h3{color:#1B6E43}
.honest .next h3{color:var(--coral-text)}
.honest ul{list-style:none;margin:0;padding:0}
.honest li{position:relative;padding-left:27px;margin-bottom:13px;font-size:.94rem;line-height:1.55}
.honest .now li:before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;
  border-left:2px solid #1B6E43;border-bottom:2px solid #1B6E43;transform:rotate(-45deg)}
.honest .next li:before{content:"";position:absolute;left:3px;top:.46em;width:9px;height:9px;
  border:2px solid var(--coral);border-radius:50%}

.klist{list-style:none;margin:22px 0 0;padding:0}
.klist li{position:relative;padding-left:20px;margin-bottom:12px}
.klist li:before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  background:var(--coral);border-radius:50%}

.note{background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--navy);
  border-radius:0 var(--r) var(--r) 0;padding:24px 26px;margin-top:34px}
.note h3{margin-bottom:8px}
.note p:last-child{margin-bottom:0}
.note p{font-size:.955rem}

/* ---------- founder ---------- */
.founder{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:start;margin-top:34px}
@media(max-width:700px){.founder{grid-template-columns:1fr;gap:22px}}
.founder img{width:180px;height:180px;border-radius:var(--r);object-fit:cover;display:block;
  border:1px solid var(--line)}

/* ---------- final cta ---------- */
.final{background:var(--wash);text-align:center}
.final h2{max-width:22ch;margin:0 auto 16px}
.final p{max-width:56ch;margin:0 auto 30px}
.final .cta-row{justify-content:center}

footer{background:var(--navy-8);color:#8397A8;padding:52px 0 40px;font-size:.885rem;border-top:0}
footer .brand img{height:42px}
/* "Powered by Provira" — the product, named separately from the company. */
.poweredby{display:flex;align-items:center;gap:11px;margin:22px 0 0}
.poweredby span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:#8FA1B1;font-weight:700}
.poweredby img{height:46px;width:auto;display:block}
footer .tag{margin:18px 0 24px;color:#A6B7C5}
footer .links{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:22px;border-top:1px solid rgba(255,255,255,.11)}
footer .links a{color:#8397A8}
footer .links a:hover{color:#fff}

/* ---------- 7-step vertical loop ---------- */
.loop7{list-style:none;margin:40px 0 0;padding:0;position:relative;max-width:860px}
.loop7:before{content:"";position:absolute;left:19px;top:14px;bottom:26px;width:2px;background:var(--line)}
.loop7 li{position:relative;display:grid;grid-template-columns:40px 1fr;gap:22px;padding-bottom:28px}
.loop7 .s{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;background:var(--navy);color:#fff;position:relative;z-index:2}
.loop7 li.base .s{background:#fff;border:2px solid var(--line);color:var(--muted)}
.loop7 li.gate .s{background:var(--coral);color:#1A1005;box-shadow:0 0 0 5px rgba(242,88,56,.14)}
.loop7 h3{margin-bottom:6px}
.loop7 h3 .gt{display:inline-block;margin-left:9px;color:var(--coral-text);font-size:.66rem;font-weight:730;
  letter-spacing:.11em;text-transform:uppercase;font-style:normal;vertical-align:2px}
.loop7 p{font-size:.955rem;margin:0 0 .5em}
.loop7 .tagme{color:var(--muted);font-size:.875rem;font-style:italic;margin:6px 0 0}
@media(max-width:640px){.loop7 li{grid-template-columns:34px 1fr;gap:16px}.loop7 .s{width:34px;height:34px;font-size:.85rem}.loop7:before{left:16px}}

/* ---------- rule lifecycle ---------- */
.life{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
@media(max-width:1000px){.life{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.life{grid-template-columns:1fr}}
.lc{border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;background:#fff;position:relative}
.lc b{display:block;font-size:.72rem;letter-spacing:.12em;color:var(--muted);font-weight:730;margin-bottom:9px}
.lc h4{margin:0 0 7px;font-size:.98rem;color:var(--ink);font-weight:640;letter-spacing:-.008em;line-height:1.3}
.lc p{margin:0;font-size:.885rem;line-height:1.52}
.lc.gate{border-color:var(--coral);background:#FFF7F6}
.lc.gate b{color:var(--coral-text)}
.lc.paid{border-color:#1B6E43;background:#F3FAF6}
.lc.paid b{color:#1B6E43}

/* ---------- three layers ---------- */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
@media(max-width:880px){.layers{grid-template-columns:1fr}}
.ly{border:1px solid var(--line);border-radius:var(--r);padding:25px 23px;background:#fff}
.ly.nat{border-top:3px solid var(--navy)}
.ly.own{border-top:3px solid var(--coral)}
.ly.net{border-top:3px solid var(--coral);border-top-style:dashed}
.ly h3{margin:0 0 9px}
.ly p{font-size:.925rem;margin:0}
.lbl{display:inline-block;font-size:.665rem;font-weight:730;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;margin-bottom:12px}
.lbl.acts{background:#E8EEF4;color:var(--navy)}
.lbl.hold{background:#FDEBE8;color:var(--coral-text)}
.pull{margin-top:34px;border-left:3px solid var(--coral);padding:6px 0 6px 26px;max-width:76ch}
.pull p{margin:0;font-size:1.14rem;color:var(--ink);font-weight:560;line-height:1.5}


/* ---------- demo page ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.opt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column}
.opt.open{border-top:3px solid var(--coral)}
.opt.gated{border-top:3px solid var(--navy)}
.opt .badge{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:14px}
.opt h3{font-size:1.28rem;margin:0 0 10px}
.opt p{font-size:.945rem}
.opt .tiny{font-size:.86rem;color:var(--muted);margin-bottom:20px}
.opt .btn{align-self:flex-start;margin-top:auto}
.auditbox{background:var(--wash);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;margin-top:30px}
.arow{display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr;gap:14px}
@media(max-width:760px){.arow{grid-template-columns:1fr 1fr}}
.arow label{display:block;font-size:.72rem;font-weight:730;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.arow input,.arow select{width:100%;margin-top:7px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;letter-spacing:normal;text-transform:none;font-weight:400}
.arow input:focus,.arow select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,19,70,.09)}
.abtns{display:flex;gap:11px;margin-top:18px}
.abtns .btn{border:1px solid var(--navy)}
#aout{margin-top:20px}
.res{border-radius:8px;padding:18px 20px;border:1px solid;font-size:.95rem}
.res .rh{font-size:.72rem;font-weight:730;letter-spacing:.1em;text-transform:uppercase;margin-bottom:9px;display:flex;gap:10px;align-items:center}
.res.deny{background:#FEF2F1;border-color:#F3C9C5}
.res.deny .rh{color:#A93A34}
.res.warn{background:#FFF8EC;border-color:#F0DCB4}
.res.warn .rh{color:#8A6300}
.res.ok{background:#F1FAF4;border-color:#C3E4CF}
.res.ok .rh{color:#1B6E43}
.res p{margin:0 0 .6em}
.res p:last-child{margin:0}
.res .fix{font-weight:600;color:var(--ink)}
.res .src{font-size:.79rem;color:var(--muted);margin-top:10px}
.pillmi{display:inline-block;font-size:.66rem;font-weight:730;letter-spacing:.08em;padding:3px 8px;border-radius:20px;
  background:#fff;border:1px solid currentColor}


/* ---------- pre-submission check pane ---------- */
.pane{margin-top:36px;border-radius:12px;overflow:hidden;box-shadow:0 18px 44px -22px rgba(15,28,42,.42);background:var(--navy)}
.pbar{display:flex;align-items:center;gap:14px;padding:13px 18px;background:#0F1F2E;border-bottom:1px solid rgba(255,255,255,.07)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#33465A;display:block}
.ptitle{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.735rem;letter-spacing:.16em;
  text-transform:uppercase;color:#8CA0B3}
.pdata{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7FD3B6;display:flex;align-items:center;gap:7px}
.pdata em{width:7px;height:7px;border-radius:50%;background:#3FBF95;display:block}
.pbody{padding:22px 20px 20px}
.ptop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.pmeta{color:#A9BACA;font-size:.95rem}.pmeta b{color:#fff;font-weight:640}
.pacts{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.pb{font:inherit;font-size:.885rem;font-weight:600;padding:10px 16px;border-radius:7px;cursor:pointer;
  background:transparent;color:#CBD8E3;border:1px solid rgba(255,255,255,.2);transition:.15s}
.pb:hover:not(:disabled){border-color:rgba(255,255,255,.45);color:#fff}
.pb:disabled{opacity:.38;cursor:default}
.pb.primary{background:var(--coral);border-color:var(--coral);color:#2A0F0A}
.pb.primary:hover:not(:disabled){background:#FF7863;border-color:#FF7863;color:#2A0F0A}
.claim{border:1px solid rgba(255,255,255,.09);border-radius:9px;margin-bottom:9px;background:rgba(255,255,255,.028);
  transition:border-color .25s,background .25s}
.claim.flag{border-color:rgba(242,88,56,.5);background:rgba(242,88,56,.07)}
.claim.ok{border-color:rgba(63,191,149,.42);background:rgba(63,191,149,.06)}
.chead{display:grid;grid-template-columns:78px 1fr auto auto;gap:14px;align-items:center;padding:14px 16px}
.ccode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;color:#fff;font-weight:600}
.cdesc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.83rem;color:#93A6B8;line-height:1.45}
.cspec{font-size:.62rem;font-weight:730;letter-spacing:.11em;text-transform:uppercase;color:#8197AA;
  border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:3px 9px;white-space:nowrap}
.cstat{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:5px;white-space:nowrap;background:rgba(255,255,255,.07);color:#9FB1C2}
.cstat.deny{background:rgba(242,88,56,.16);color:#FFB3A2}
.cstat.ok{background:rgba(63,191,149,.16);color:#8FE0C1}
.cstat.fixed{background:rgba(63,191,149,.16);color:#8FE0C1}
.cbody{display:none;padding:0 16px 16px 108px;border-top:1px solid rgba(255,255,255,.07);margin-top:2px}
.claim.open .cbody{display:block}
.cbody .lay{display:inline-block;font-size:.62rem;font-weight:730;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:20px;margin:13px 0 10px}
.lay.nat{background:rgba(255,255,255,.1);color:#BCCBD8}
.lay.learn{background:rgba(242,88,56,.18);color:#FFB3A2}
.lay.net{background:transparent;color:#FFB3A2;border:1px dashed rgba(242,88,56,.6)}
.lay.pol{background:transparent;color:#BCCBD8;border:1px solid rgba(255,255,255,.25)}
.cbody p{color:#B6C6D4;font-size:.92rem;margin:0 0 .55em;line-height:1.6}
.cbody .fixline{color:#fff;font-weight:560}
.cbody .carc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;color:#8497A8;margin-top:9px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media(max-width:700px){.tiles{grid-template-columns:1fr}.chead{grid-template-columns:64px 1fr;row-gap:8px}.cbody{padding-left:16px}}
.tile{border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:16px 18px;background:rgba(255,255,255,.03)}
.tile em{display:block;width:22px;height:3px;border-radius:3px;margin-bottom:11px;background:#4A5D70}
.tile.deny em{background:var(--coral)}.tile.clean em{background:#3FBF95}.tile.rules em{background:#DCE5EC}
.tile b{display:block;color:#fff;font-size:1.7rem;font-weight:660;letter-spacing:-.02em;line-height:1}
.tile span{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8CA0B3;margin-top:8px}
.pfoot{color:#7D91A2;font-size:.83rem;line-height:1.6;margin:18px 0 0;max-width:88ch}


/* ---------- table 4-col ---------- */
.cmp3 th:first-child,.cmp3 td:first-child{width:44%}
.cmp3 th{text-align:center}.cmp3 th:first-child{text-align:left}
.cmp3 td:not(:first-child){text-align:center;color:var(--ink);font-weight:560}
.cmp3 td em{font-style:normal;color:var(--muted);font-weight:400;font-size:.86em}
/* ---------- book form ---------- */
.bookgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:8px}
@media(max-width:900px){.bookgrid{grid-template-columns:1fr;gap:30px}}
.bookform{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.bookform h3{margin:0 0 18px}
.bookform label{display:block;font-size:.755rem;font-weight:730;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
/* The required marker is text, so it takes the type colour, not the fill. */
.bookform .req{color:var(--coral-text)}
.bookform input,.bookform select,.bookform textarea{display:block;width:100%;margin-top:7px;padding:10px 12px;
  border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
  letter-spacing:normal;text-transform:none;font-weight:400}
.bookform textarea{resize:vertical}
.bookform input:focus,.bookform select:focus,.bookform textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(0,19,70,.09)}
.formnote{font-size:.83rem;color:var(--muted);margin:14px 0 0;text-transform:none;letter-spacing:normal;font-weight:400}



.pill{display:inline-block;background:var(--wash-2);border:1px solid var(--line);border-radius:20px;
  padding:5px 13px;font-size:.79rem;color:var(--muted);font-weight:560;margin-bottom:20px}

/* ==========================================================================
   HERO RING — the closed loop, ambient
   Added 2026-08-09. Decorative (aria-hidden): every claim it makes is also
   stated in words in the "One loop, one human gate" section below, so a screen
   reader loses nothing. Motion is slow, never flashes, and stops completely
   under prefers-reduced-motion — see the block at the end of this file.

   SIZING. The ring scales continuously from a 320px phone to a 4K desktop.
   Only its POSITION changes: beside the copy on wide screens, below the copy on
   narrow ones. There is no width at which it disappears. Labels are HTML with
   their own clamped font-size, so type stays legible at every diameter — the
   reason the first version had to hide the ring under 1080px was SVG text
   shrinking with the viewBox.
   ========================================================================== */
.hero .ringwrap{position:absolute;top:50%;right:max(1.5vw,10px);transform:translateY(-50%);
  width:clamp(210px,29vw,470px);pointer-events:none;z-index:0}
.ringbox{position:relative;width:100%;aspect-ratio:1/1}
.ring{width:100%;height:auto;display:block;overflow:visible;opacity:.92}
.ring .base{fill:none;stroke:rgba(255,255,255,.11);stroke-width:2}
.ring .t{stroke:rgba(255,255,255,.10);stroke-width:2;stroke-linecap:round}
/* The filled arc of ticks is the accumulated rule set — it reads as progress
   round the dial rather than as decorative scatter. */
.ring .t.on{stroke:rgba(242,88,56,.40)}
/* The human gate. A halo rather than a stroke colour, because the node stroke
   is driven by the keyframe animation and an animation always beats a plain
   declaration — the gate would vanish for most of every cycle. */
.ring .halo{fill:none;stroke:rgba(242,88,56,.22);stroke-width:2}
.ring .halo2{fill:none;stroke:rgba(242,88,56,.40);stroke-width:2}
.ring .pulse{fill:none;stroke:var(--coral);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 9px rgba(242,88,56,.45))}
.ring .spin{transform-origin:230px 230px;animation:ringspin 16s linear infinite}
.ring .n{fill:var(--navy);stroke:rgba(255,255,255,.30);stroke-width:3;
  animation:ringnode 16s linear infinite}
@keyframes ringspin{to{transform:rotate(360deg)}}
@keyframes ringnode{
  0%{stroke:var(--coral);fill:var(--coral)}
  9%{stroke:var(--coral);fill:var(--coral)}
  26%{stroke:rgba(255,255,255,.30);fill:var(--navy)}
  100%{stroke:rgba(255,255,255,.30);fill:var(--navy)}
}

/* Labels. 32.6% is the circle radius as a fraction of the box (150 of 460). */
.rl{position:absolute;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(10px,.78vw,12.5px);font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:#9BB0C3;white-space:nowrap;line-height:1.25}
.rl.t{left:50%;transform:translateX(-50%);bottom:calc(50% + 32.6% + 9px)}
.rl.b{left:50%;transform:translateX(-50%);top:calc(50% + 32.6% + 11px);text-align:center}
.rl.r{top:50%;transform:translateY(-50%);left:calc(50% + 32.6% + 12px)}
.rl.l{top:50%;transform:translateY(-50%);right:calc(50% + 32.6% + 12px)}
.rl em{display:block;font-style:normal;font-weight:700;letter-spacing:.19em;
  color:#7892A8;font-size:.86em;margin-top:3px}

/* Wide desktop: the copy has room, so the ring can be large. */
/* 880–1240px: both narrow a little and share the row. */
@media(min-width:880px) and (max-width:1240px){
  .hero h1{max-width:16ch}
  .hero .sub{max-width:47ch;font-size:1.13rem}
  .hero .micro{max-width:47ch;line-height:1.9}
  .ring{opacity:.85}
}
/* Under 880px the copy needs the full width, so the ring leaves the flow's
   right edge and sits centred beneath the buttons instead of disappearing.
   Side labels move closer in and shrink so PREVENT/LEARN still fit a 320px
   phone without touching the viewport edges. */
@media(max-width:879px){
  .hero{padding-bottom:74px}
  .hero .ringwrap{position:static;transform:none;margin:44px auto 0;
    width:min(54vw,290px)}
  .ring{opacity:.95}
  .rl{font-size:clamp(9.5px,2.5vw,11.5px);letter-spacing:.11em}
  .rl.r{left:calc(50% + 32.6% + 8px)}
  .rl.l{right:calc(50% + 32.6% + 8px)}
}

/* ==========================================================================
   THE LEDGER — three passes, fewer caught each time
   ========================================================================== */
.ledger{background:var(--navy);color:#C6D3DE;border-top:0}
.ledger h2{color:#fff}
.ledger .eyebrow{color:var(--coral)}
.ledger .lede{color:#9FB2C2}
.lg-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:38px;margin-top:38px;align-items:start}
@media(max-width:900px){.lg-grid{grid-template-columns:1fr;gap:26px}}

.lg-pass{border-top:1px solid rgba(255,255,255,.09);padding:17px 0 15px;
  opacity:.22;transition:opacity .5s ease}
.lg-pass.show{opacity:1}
.lg-pass:first-child{border-top:0}
.lg-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.lg-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#8097AD}
.lg-count{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.76rem;letter-spacing:.06em;color:#8FA5B8;transition:color .4s ease}
.lg-pass.show .lg-count.bad{color:var(--coral)}
.lg-pass.show .lg-count.good{color:#3FBF86}
.lg-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.lg-chip{width:32px;height:16px;border-radius:4px;background:rgba(255,255,255,.10);
  transform:translateX(-9px);opacity:0;transition:opacity .34s ease,transform .34s ease,background .34s ease}
.lg-pass.show .lg-chip{opacity:1;transform:none}
.lg-pass.show .lg-chip.deny{background:var(--coral)}
.lg-gate{width:2px;height:26px;background:rgba(255,255,255,.26);margin:0 9px}
.lg-clean{width:32px;height:16px;border-radius:4px;background:rgba(255,255,255,.055)}

.lg-rules{border:1px solid rgba(255,255,255,.11);border-radius:var(--r);padding:20px 20px 16px;
  background:rgba(255,255,255,.028)}
.lg-rules h3{color:#fff;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 14px}
.lg-rule{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(7px);
  transition:opacity .45s ease,transform .45s ease}
.lg-rule:first-of-type{border-top:0}
.lg-rule.show{opacity:1;transform:none}
.lg-rule i{flex:0 0 3px;height:17px;background:var(--coral);border-radius:2px;margin-top:2px}
.lg-rule span{font-size:.9rem;color:#B6C6D4;line-height:1.45}
.lg-gated{margin:14px 0 0;font-size:.78rem;color:#8097AD;line-height:1.5}
.lg-foot{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.lg-replay{background:transparent;border:1px solid rgba(255,255,255,.30);color:#fff;
  border-radius:8px;padding:9px 16px;font:inherit;font-size:.9rem;font-weight:560;cursor:pointer}
.lg-replay:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55)}
.lg-replay:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.ledger .fn{color:#8097AD;margin-top:22px}

/* ==========================================================================
   Anyone who has asked their operating system to reduce motion gets the
   finished state immediately and nothing moves. This is not decoration —
   it is the accessibility commitment on /accessibility, honoured in code.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  .ring .spin{animation:none}
  .ring .n{animation:none;stroke:rgba(255,255,255,.30);fill:var(--navy)}
  .lg-pass,.lg-chip,.lg-rule{opacity:1!important;transform:none!important;transition:none!important}
  .lg-replay{display:none}
}


/* The Provira mark at the centre of the hero ring. Sized off the ring box, so
   it scales with the ring at every breakpoint. 30% keeps clear air between the
   mark and the four nodes. */
.ringbox .pcore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30%;height:auto;display:block;pointer-events:none}
@media(max-width:879px){.ringbox .pcore{width:34%}}

/* ==========================================================================
   PROVIRA — the product mark, used where the product is the subject
   ========================================================================== */
.provira-mark{display:block;height:96px;width:auto;margin:0 0 26px}
@media(max-width:620px){.provira-mark{height:74px}}
/* Inside the demo widget's dark chrome. */
.pbar .pmark{height:20px;width:auto;display:block;margin-right:9px}
/* The stacked official lockup, on the Company page. */
.lockup-full{display:block;max-width:340px;width:100%;height:auto;margin:0 0 30px}