/* Keywicket public site: design direction "Wattle Dusk" (chosen 18 Oct 2026). Generated from the design mock-up
   sources, then maintained here. Tokens: light, dark (system or toggle), and light for print. */
:root{--bg:#ffffff;--tint:#f2f1f8;--card:#ffffff;--text:#1b1a3a;--soft:#4d4b6a;--primary:#383c97;--on-primary:#ffffff;--rule:#d8d6e6;--control:#7b7998;--night:#0d0f2c;--night-2:#2a2368;--glow:#f2c14e;--on-night:#f7f5ff;--night-soft:#cdc8ef;--night-rule:#4d4590;--night-cta:#f2c14e;--night-cta-ink:#15122e;--night-link:#f6d27e;--slab:#15173f;--on-slab:#f7f5ff;--slab-soft:#cdc8ef;--accent:#f2c14e;--accent-deep:#8a5d00;--issue:#b3241c;--passed:#008a70;--guided:#6d2f92;--na-line:#6e7290;--issue-tile:#b3241c;--passed-tile:#00735e;--guided-tile:#6d2f92;--tile-ink:#ffffff;--blocked:#a3221b;--blocked-bg:#fbe9e6;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0e1026;--tint:#15173a;--card:#1b1d43;--text:#eceaf8;--soft:#b3b0d4;--primary:#b3b6ff;--on-primary:#14162e;--rule:#34346a;--control:#8381b0;--night:#07081c;--night-2:#221c58;--glow:#f2c14e;--on-night:#f7f5ff;--night-soft:#cdc8ef;--night-rule:#433c86;--night-cta:#f2c14e;--night-cta-ink:#15122e;--night-link:#f6d27e;--slab:#1d1a4c;--on-slab:#f7f5ff;--slab-soft:#cdc8ef;--accent:#f2c14e;--accent-deep:#f2c14e;--issue:#e16b5b;--passed:#3fa895;--guided:#af79d2;--na-line:#9599bd;--issue-tile:#e16b5b;--passed-tile:#3fa895;--guided-tile:#af79d2;--tile-ink:#14162e;--blocked:#f39d90;--blocked-bg:#3d211d;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0e1026;--tint:#15173a;--card:#1b1d43;--text:#eceaf8;--soft:#b3b0d4;--primary:#b3b6ff;--on-primary:#14162e;--rule:#34346a;--control:#8381b0;--night:#07081c;--night-2:#221c58;--glow:#f2c14e;--on-night:#f7f5ff;--night-soft:#cdc8ef;--night-rule:#433c86;--night-cta:#f2c14e;--night-cta-ink:#15122e;--night-link:#f6d27e;--slab:#1d1a4c;--on-slab:#f7f5ff;--slab-soft:#cdc8ef;--accent:#f2c14e;--accent-deep:#f2c14e;--issue:#e16b5b;--passed:#3fa895;--guided:#af79d2;--na-line:#9599bd;--issue-tile:#e16b5b;--passed-tile:#3fa895;--guided-tile:#af79d2;--tile-ink:#14162e;--blocked:#f39d90;--blocked-bg:#3d211d;color-scheme:dark}
@media print{:root,:root[data-theme="dark"],:root:not([data-theme="light"]){--bg:#ffffff;--tint:#f2f1f8;--card:#ffffff;--text:#1b1a3a;--soft:#4d4b6a;--primary:#383c97;--on-primary:#ffffff;--rule:#d8d6e6;--control:#7b7998;--night:#0d0f2c;--night-2:#2a2368;--glow:#f2c14e;--on-night:#f7f5ff;--night-soft:#cdc8ef;--night-rule:#4d4590;--night-cta:#f2c14e;--night-cta-ink:#15122e;--night-link:#f6d27e;--slab:#15173f;--on-slab:#f7f5ff;--slab-soft:#cdc8ef;--accent:#f2c14e;--accent-deep:#8a5d00;--issue:#b3241c;--passed:#008a70;--guided:#6d2f92;--na-line:#6e7290;--issue-tile:#b3241c;--passed-tile:#00735e;--guided-tile:#6d2f92;--tile-ink:#ffffff;--blocked:#a3221b;--blocked-bg:#fbe9e6;color-scheme:light}}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"),url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/public-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/public-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:96%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Public Sans Fallback";src:local("Arial");size-adjust:101%;ascent-override:95%;descent-override:22%;line-gap-override:0%}

/* ================= Keywicket public site: shared structure for all three directions ================= */
:root{--serif:"Newsreader","Newsreader Fallback",Georgia,serif;--sans:"Public Sans","Public Sans Fallback",Arial,sans-serif;--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:.75rem;--arch:2rem;--wrap:78rem;--measure:64ch;
  --ease-door:cubic-bezier(.45,.05,.25,1);--ease-out:cubic-bezier(.22,.7,.25,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;font-variant-numeric:lining-nums;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.55rem + 4.2vw,4.6rem);letter-spacing:-.028em;line-height:1.02}
h2{font-size:clamp(1.95rem,1.4rem + 2vw,3rem);letter-spacing:-.022em}
h3{font-size:1.28rem;letter-spacing:-.01em;line-height:1.2}
strong{font-weight:600}
a{color:var(--c-link,var(--primary));text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
code{font-family:var(--mono);font-size:.86em;overflow-wrap:anywhere}
:focus-visible{outline:3px solid var(--c-focus,var(--primary));outline-offset:3px;border-radius:.25rem}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;flex:none;vertical-align:-.15em}
.ic-lg{width:28px;height:28px}
.num{font-variant-numeric:lining-nums tabular-nums}
.soft{color:var(--c-soft,var(--soft))}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1rem}
@media (min-width:48rem){.wrap{padding:0 2rem}}
.skip{position:absolute;left:1rem;top:-5rem;z-index:20;background:var(--card);color:var(--text);padding:.6rem 1rem;border-radius:var(--r)}
.skip:focus{top:3.5rem}

/* ---------- tones: every band sets its own local colours, components read --c-* ---------- */
.tone-bg,.tone-tint,.tone-day{--c-bg:var(--bg);--c-text:var(--text);--c-soft:var(--soft);--c-link:var(--primary);--c-rule:var(--rule);--c-card:var(--card);
  --c-btn:var(--primary);--c-btn-ink:var(--on-primary);--c-ghost:var(--control);--c-focus:var(--primary);--c-eyebrow:var(--primary)}
.tone-tint{--c-bg:var(--tint)}
.tone-slab{--c-bg:var(--slab);--c-text:var(--on-slab);--c-soft:var(--slab-soft);--c-link:var(--on-slab);--c-rule:color-mix(in srgb,var(--on-slab) 24%,var(--slab));
  --c-card:color-mix(in srgb,var(--on-slab) 6%,var(--slab));--c-btn:var(--on-slab);--c-btn-ink:var(--slab);--c-ghost:var(--slab-soft);--c-focus:var(--on-slab);--c-eyebrow:var(--slab-soft)}
.tone-night{--c-bg:var(--night);--c-text:var(--on-night);--c-soft:var(--night-soft);--c-link:var(--night-link);--c-rule:var(--night-rule);
  --c-card:color-mix(in srgb,var(--on-night) 6%,var(--night-2));--c-btn:var(--night-cta);--c-btn-ink:var(--night-cta-ink);--c-ghost:var(--night-soft);--c-focus:var(--on-night);--c-eyebrow:var(--night-link)}
.tone-bg,.tone-tint,.tone-slab,.tone-night,.tone-day{background:var(--c-bg);color:var(--c-text)}
.band{padding:clamp(3.5rem,7vw,6.5rem) 0;position:relative}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.45rem;border-radius:999px;font:600 1rem/1.2 var(--sans);text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .15s,border-color .15s,transform .15s var(--ease-out)}
.btn-hero,.btn-solid{background:var(--c-btn);color:var(--c-btn-ink)}
.btn-hero:hover,.btn-solid:hover{background:color-mix(in srgb,var(--c-btn) 86%,var(--c-text));text-decoration:none}
.btn-ghost{color:var(--c-text);border-color:var(--c-ghost);background:transparent}
.btn-ghost:hover{border-color:var(--c-text)}
.btn-small{min-height:2.5rem;padding:.45rem 1.05rem;font-size:.94rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.more{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none;color:var(--c-link)}
.more:hover{text-decoration:underline}
.more .ic{transition:transform .15s var(--ease-out)}
.more:hover .ic{transform:translateX(3px)}

/* ---------- utility strip, header ---------- */
.utility{font-size:.88rem;background:color-mix(in srgb,var(--night) 70%,#000);color:var(--on-night)}
.utility-in{display:flex;justify-content:space-between;align-items:center;gap:.25rem 1rem;flex-wrap:wrap;min-height:2.4rem;padding-top:.3rem;padding-bottom:.3rem}
.utility a{color:var(--on-night);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.utility a:hover{text-decoration:underline}
.utility :focus-visible{outline-color:var(--on-night)}
.top{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-bg>span{position:absolute;inset:0}
.site-header{position:relative}
.header-in{display:flex;align-items:center;gap:.5rem 2rem;min-height:4.5rem;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem}
.home-link{display:inline-flex;color:var(--c-text);margin-right:auto}
.home-link .kw-lockup{display:block}
.kw-lockup{color:inherit}
.kw-lockup .kw-door{fill:var(--logo-door,var(--primary))}
.tone-night .kw-lockup,.tone-slab .kw-lockup{--logo-door:#a9aeff}
.tone-night .kw-lockup{color:#e8e9f5}
.nav{display:flex;flex-wrap:wrap;gap:.1rem 1.6rem}
.nav a{display:inline-block;color:var(--c-text);text-decoration:none;padding:.45rem 0;border-bottom:2px solid transparent;font-weight:400}
.nav a:hover{border-bottom-color:var(--c-ghost)}
.nav a[aria-current="page"]{border-bottom-color:var(--c-link);font-weight:600}
.header-actions{display:flex;align-items:center;gap:.9rem}
.signin{color:var(--c-text);text-decoration:none;font-weight:600;font-size:.95rem}
.signin:hover{text-decoration:underline}
.theme-toggle{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--c-ghost);background:transparent;color:var(--c-text);cursor:pointer}
@media (max-width:47.99rem){.site-header nav{order:3;width:100%}.nav{gap:.1rem 1.1rem}.signin{display:none}.header-actions .btn-small{display:none}}

/* ---------- eyebrow, section heads ---------- */
.eyebrow{display:flex;align-items:center;gap:.6rem;font:600 .8rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--c-eyebrow);margin-bottom:1rem}
.eyebrow::before{content:"";flex:none;width:.6rem;height:.85rem;border-radius:.3rem .3rem .1rem .1rem;background:currentColor}
.section-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head h2{margin-bottom:.9rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.section-lede{font-size:1.15rem;line-height:1.55;color:var(--c-soft);max-width:var(--measure)}
.lede{font-size:clamp(1.12rem,1rem + .4vw,1.3rem);line-height:1.55;max-width:38rem;color:var(--c-soft)}

/* ---------- hero ---------- */
.hero{padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(5.5rem,9vw,8rem)}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:62rem){.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:4rem}}
.hero h1{max-width:13ch;margin-bottom:1.5rem}
.ticks{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin-top:2rem;font-size:.95rem}
.ticks li{display:inline-flex;align-items:center;gap:.45rem}
.ticks .ic{color:var(--c-eyebrow)}

/* ---------- read-only request log (a product depiction: always on the normal card surface) ---------- */
.reqlog{--c-text:var(--text);--c-soft:var(--soft);--c-focus:var(--primary);background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:1.25rem;padding:1.25rem 1.25rem 1.1rem;box-shadow:0 30px 60px -36px rgba(8,10,40,.55)}
.reqlog-head{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.85rem;border-bottom:1px solid var(--rule);margin-bottom:.5rem;font-size:.9rem}
.reqlog-title{font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.reqlog-tenant{color:var(--soft);overflow-wrap:anywhere;text-align:right}
@media (max-width:30rem){.reqlog-head{flex-direction:column;gap:.15rem}.reqlog-tenant{text-align:left}}
.reqlog-lines{font-family:var(--mono);font-size:.8rem;margin-bottom:1rem}
.reqlog-lines li{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:.6rem;align-items:baseline;padding:.55rem .35rem;border-bottom:1px dashed var(--rule)}
.reqlog-lines li:last-child{border-bottom:0}
.method{font-weight:700;color:var(--primary)}
.req-url{overflow-wrap:break-word;min-width:0}
.req-host{color:var(--soft)}
.req-result{color:var(--soft);display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.reqlog-lines li.is-blocked{background:var(--blocked-bg);border-radius:.5rem;border-bottom-color:transparent;margin-top:.35rem}
.is-blocked .method,.is-blocked .req-result{color:var(--blocked);font-weight:700}
.is-blocked .req-url{text-decoration:line-through;color:var(--soft)}
.reqlog figcaption{font-size:.92rem;color:var(--soft);line-height:1.5}

/* ---------- facts panel ---------- */
.facts{position:relative;z-index:2;margin-top:clamp(-4.5rem,-6vw,-3rem);background:linear-gradient(to bottom,transparent 50%,var(--facts-under,var(--bg)) 50%)}
.facts-panel{background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);padding:1.75rem 1.5rem;box-shadow:0 24px 50px -36px rgba(8,10,40,.5)}
@media (min-width:48rem){.facts-panel{padding:2.25rem 2.5rem}}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
@media (min-width:60rem){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.35rem}
.stat dd{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,2rem + 2vw,3.6rem);line-height:1;letter-spacing:-.03em;color:var(--primary)}
.stat dt{font-size:.95rem;color:var(--soft);max-width:22ch}
.platforms{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.95rem}
.platforms p{color:var(--soft);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.platforms ul{display:flex;flex-wrap:wrap;gap:.5rem}
.platforms li{padding:.35rem .85rem;border:1px solid var(--rule);border-radius:999px;font-weight:600}

/* ---------- proof ---------- */
.proof-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:62rem){.proof-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4.5rem}}
.proof-points{display:grid;gap:1.25rem;margin-bottom:2rem;counter-reset:pp}
.proof-points li{position:relative;padding-left:3rem;counter-increment:pp}
.proof-points li::before{content:counter(pp);position:absolute;left:0;top:.05rem;width:2rem;height:2.3rem;border-radius:1rem 1rem .3rem .3rem;border:1.5px solid var(--c-ghost);display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem}
.proof-points h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:.25rem}
.proof-points p{color:var(--c-soft)}

/* ---------- enforcement flow diagram ---------- */
.flow{background:var(--c-card);border:1px solid var(--c-rule);border-radius:1.5rem;padding:1.5rem}
.flow-grid{position:relative;display:grid;gap:1rem}
@media (min-width:40rem){.flow-grid{grid-template-columns:1fr 1.25fr 1fr;align-items:stretch;gap:1rem}}
.flow-node,.flow-gate{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border-radius:1rem;border:1px solid var(--c-rule);background:var(--c-bg)}
.flow-gate{align-items:center;text-align:center;border-radius:4rem 4rem 1rem 1rem;border-width:1.5px;border-color:var(--c-ghost);padding-top:1.25rem}
.flow-symbol{color:var(--c-text);--logo-door:var(--c-link)}
.flow-symbol .kw-door{fill:var(--c-link)}
.flow-k{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--c-soft)}
.flow-node strong,.flow-gate strong{font-size:1rem;line-height:1.3}
.flow-s{font-size:.86rem;color:var(--c-soft);line-height:1.45}
.lane{position:relative;height:1.9rem;display:flex;align-items:center}
@media (min-width:40rem){.lane{grid-column:1/-1}}
.lane-track{position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,var(--c-ghost) 0 6px,transparent 6px 11px)}
.lane-write .lane-track{right:50%}
.packet{position:absolute;top:50%;width:.8rem;height:.8rem;margin-top:-.4rem;border-radius:50%;background:var(--c-link);left:calc(100% - .8rem)}
.lane-write .packet{background:var(--blocked);left:calc(50% - 1.6rem)}
.lane-tag{position:relative;font:700 .72rem/1 var(--mono);padding:.3rem .5rem;border-radius:.4rem;background:var(--c-bg);border:1px solid var(--c-rule)}
.lane-stop{position:absolute;left:calc(50% - .65rem);top:50%;margin-top:-.65rem;width:1.3rem;height:1.3rem;color:var(--blocked);background:var(--c-bg);border-radius:50%;display:grid;place-items:center}
.tone-slab .lane-stop,.tone-night .lane-stop{color:#f39d90}
.tone-slab .lane-write .packet,.tone-night .lane-write .packet{background:#f39d90}
.lane-stop .ic{width:1.3rem;height:1.3rem}
.flow figcaption{display:grid;gap:.4rem;margin-top:1rem;font-size:.92rem;color:var(--c-soft)}
.fc-item{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:.55rem;align-items:start}
.fc-item .ic{color:var(--c-link);margin-top:.2rem}
.fc-item strong{color:var(--c-text)}

/* ---------- checks ---------- */
.ccards{display:grid;gap:1rem}
@media (min-width:44rem){.ccards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.ccards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}.ccard-wide{grid-column:span 2}}
.ccard{display:flex;flex-direction:column;gap:.6rem;padding:1.6rem 1.5rem 1.4rem;background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);transition:transform .2s var(--ease-out),box-shadow .2s,border-color .2s}
.ccard:hover{transform:translateY(-3px);border-color:var(--control);box-shadow:0 18px 36px -28px rgba(8,10,40,.55)}
.ccard-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.ccard-n{font-family:var(--serif);font-weight:500;font-size:3rem;line-height:1;letter-spacing:-.03em;color:var(--primary)}
.ccard-split{font-size:.82rem;font-weight:600;color:var(--soft);text-align:right}
.ccard h3{margin-top:.2rem}
.ccard p{color:var(--soft)}
.ccard-eg{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule);display:grid;gap:.3rem;font-size:.88rem}
.ccard-eg li{display:flex;gap:.5rem}
.ccard-eg li::before{content:"";flex:none;width:.4rem;height:.55rem;margin-top:.45rem;border-radius:.2rem .2rem .05rem .05rem;background:var(--primary)}
@media (min-width:64rem){.ccard-wide .ccard-eg{grid-template-columns:1fr 1fr}}
.gap-demo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.4rem 0 .2rem;font-size:.9rem}
.gd-k{width:100%;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.gd-row{display:flex;flex-direction:column;padding:.55rem .85rem;border:1px solid var(--rule);border-radius:.7rem;background:var(--tint)}
.gd-plat{font-size:.78rem;color:var(--soft)}
.gd-state{font-weight:600}
.gd-bad{border-color:var(--issue);border-style:dashed}
.gd-link{width:1.5rem;height:2px;background:repeating-linear-gradient(90deg,var(--control) 0 4px,transparent 4px 7px)}
.alongside{display:flex;gap:1rem;align-items:flex-start;margin-top:2.5rem;max-width:52rem;font-size:1.05rem;color:var(--c-soft)}
.alongside .ic{color:var(--c-link)}

/* ---------- steps ---------- */
.steps{position:relative;display:grid;gap:2rem;margin-bottom:2.25rem}
@media (min-width:48rem){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
.steps-line{display:none}
@media (min-width:48rem){.steps-line{display:block;position:absolute;top:1.4rem;left:3.25rem;right:calc(33.3% - 2rem);height:2px;background:var(--c-ghost);transform-origin:left center;opacity:.6}}
.steps li{position:relative}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:2.6rem;height:2.95rem;border-radius:1.3rem 1.3rem .35rem .35rem;background:var(--c-btn);color:var(--c-btn-ink);font-family:var(--serif);font-size:1.3rem;margin-bottom:1.1rem;box-shadow:0 0 0 6px var(--c-bg)}
.steps h3{margin-bottom:.45rem}
.steps p{color:var(--c-soft)}

/* ---------- report ---------- */
.report-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:62rem){.report-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:4.5rem}}
.rpoints{display:grid;gap:1.15rem}
.rpoints li{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.75rem}
.rpoints .tick{width:1.6rem;height:1.6rem;padding:.25rem;border-radius:50%;background:color-mix(in srgb,var(--c-link) 16%,transparent);color:var(--c-link)}
.rpoints h3{font-family:var(--sans);font-weight:600;font-size:1.05rem;letter-spacing:0;margin-bottom:.15rem}
.rpoints p{color:var(--c-soft)}
.cover{max-width:36rem;margin:0 auto;width:100%}
.cover-sheet{--o-issue:#e16b5b;--o-passed:#3fa895;--o-na:#9599bd;--cv-text:#f3f4ff;--cv-soft:#c3c6ee;--cv-rule:rgba(195,198,238,.32);
  position:relative;background:linear-gradient(160deg,var(--cover-a,#191c4c),var(--cover-b,#262a6e));color:var(--cv-text);border-radius:1.25rem;padding:1.6rem 1.5rem 1.5rem;box-shadow:0 30px 60px -34px rgba(8,10,40,.6);border:1px solid var(--cv-rule)}
@media (min-width:36rem){.cover-sheet{padding:2rem 2.1rem 1.8rem}}
.cover-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--cv-rule);margin-bottom:1.5rem;font-family:var(--serif);font-size:1.05rem}
.cover-head .kw-lockup{color:#e8e9f5;--logo-door:#a9aeff}
.cover-grid{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem;gap:1rem 1.25rem;align-items:end}
.cover-domain{font-family:var(--serif);font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);line-height:1.05;letter-spacing:-.02em}
.cover-sub{color:var(--cv-soft);font-size:.86rem;margin-top:.35rem}
.cover-sum{font-family:var(--serif);font-size:1.02rem;line-height:1.4;margin-top:.9rem}
.cover-arch{position:relative;width:8.5rem;height:9rem}
.arch-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arch-line{fill:none;stroke:var(--cv-soft);stroke-width:1.2;vector-effect:non-scaling-stroke}
.arch-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:.9rem}
.arch-score{font-family:var(--serif);font-weight:500;font-size:3.6rem;line-height:.95;letter-spacing:-.03em}
.arch-band{font-weight:600;font-size:.88rem}
.arch-band span{font-weight:400;color:var(--cv-soft)}
.bscale{position:relative;margin:1.5rem 0 2.1rem;padding-top:.65rem}
.bs-track{display:flex;gap:3px}
.bs-seg{position:relative;height:7px;border-radius:4px;background:rgba(195,198,238,.28)}
.bs-critical{flex:40}.bs-poor{flex:25}.bs-fair{flex:20}.bs-good{flex:16}
.bs-seg.is-current{background:var(--cv-text)}
.bs-label{position:absolute;top:12px;left:0;font-size:.72rem;color:var(--cv-soft);white-space:nowrap}
.bs-good .bs-label{left:auto;right:0}
.bs-seg.is-current .bs-label{color:var(--cv-text);font-weight:600}
@media (max-width:30rem){.bs-seg:not(.is-current) .bs-label{display:none}}
.bs-marker{position:absolute;top:0;left:69%;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top:7px solid var(--cv-text)}
.cover-bar{padding-top:1rem;border-top:1px solid var(--cv-rule)}
.gatebar{display:flex;align-items:flex-end;gap:2px;height:3rem;border-radius:1.4rem 1.4rem 3px 3px;overflow:hidden;margin-bottom:.7rem}
.slat{flex:1 1 0;height:100%;transform-origin:bottom center}
.cover .s-issue{background:var(--o-issue)}.cover .s-passed{background:var(--o-passed)}
.cover .s-na{box-shadow:inset 0 0 0 1px var(--o-na);background:repeating-linear-gradient(135deg,var(--o-na) 0 1px,transparent 1px 5px)}
.legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.86rem}
.legend li{display:inline-flex;align-items:center;gap:.35rem}
.cover .o-issue{color:var(--o-issue)}.cover .o-passed{color:var(--o-passed)}.cover .o-na{color:var(--o-na)}
.cover-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem 1rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--cv-rule)}
.cover-facts dt{font-size:.74rem;color:var(--cv-soft);line-height:1.3}
.cover-facts dd{font-family:var(--serif);font-size:1.2rem}
.sample-note{display:flex;align-items:center;gap:.45rem;justify-content:center;margin-top:.9rem;font-size:.86rem;color:var(--c-soft)}

/* ---------- trust tiles ---------- */
.tiles{display:grid;gap:1rem;margin-bottom:2.25rem}
@media (min-width:44rem){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.tile{padding:1.5rem;border:1px solid var(--c-rule);border-radius:1.25rem;background:var(--c-card)}
.tile .ic{color:var(--c-link);margin-bottom:.9rem}
.tile h3{margin-bottom:.4rem}
.tile p{color:var(--c-soft);font-size:.98rem}

/* ---------- pricing ---------- */
.pricing-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:62rem){.pricing-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem}}
.pricing .section-head{margin-bottom:1.25rem}
.fine{font-size:.9rem;color:var(--c-soft);max-width:52ch}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:1rem}
.plan{padding:1.35rem 1.35rem 1.2rem;border:1px solid var(--rule);border-radius:1.4rem 1.4rem var(--r) var(--r);background:var(--card);color:var(--text)}
.plan-free{border:2px solid var(--primary)}
.plan h3{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0;margin-bottom:.6rem}
.plan-amt{font-family:var(--serif);font-weight:500;font-size:2.2rem;letter-spacing:-.03em;line-height:1}
.plan-cad{color:var(--soft);font-size:.9rem}
.plan-lim{color:var(--soft);font-size:.92rem;margin-top:.5rem;font-weight:600}

/* ---------- final CTA ---------- */
.cta{overflow:hidden;isolation:isolate;text-align:center}
.cta-in{max-width:52rem}
.cta h2{font-size:clamp(2.2rem,1.5rem + 2.8vw,3.6rem);margin-bottom:1rem}
.cta .section-lede{margin:0 auto}
.cta .actions{justify-content:center}
.cta-bg{position:absolute;left:0;right:0;bottom:-4.5rem;display:flex;justify-content:center;z-index:-1;opacity:.07;color:var(--c-text)}
.cta-symbol{width:min(30rem,95vw);height:auto}
.cta-symbol .kw-door{fill:currentColor}

/* ---------- footer ---------- */
.site-footer{padding:4rem 0 2.5rem;font-size:.95rem}
.f-top{display:grid;gap:2.5rem}
@media (min-width:56rem){.f-top{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:4rem}}
.f-brand p{max-width:40ch;margin-top:1rem}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:2rem}
.f-head{font:600 .8rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.09em;color:var(--c-soft);margin-bottom:.9rem}
.f-cols ul{display:grid;gap:.6rem}
.f-cols a{color:var(--c-text);text-decoration:none}
.f-cols a:hover{text-decoration:underline}
.f-legal{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--c-rule);font-size:.86rem;color:var(--c-soft)}
.f-legal p{max-width:90ch;margin-bottom:.4rem}

/* ---------- Security page ---------- */
.top-page .page-hero{padding:clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,4.5rem)}
.crumb ol{display:flex;gap:.5rem;font-size:.9rem;color:var(--c-soft);margin-bottom:1.5rem}
.crumb li+li::before{content:"/";margin-right:.5rem}
.crumb a{color:var(--c-text)}
.page-hero h1{font-size:clamp(2.4rem,1.6rem + 3.2vw,4rem);margin-bottom:1.1rem;max-width:16ch}
.page-hero .meta{font-size:.9rem;color:var(--c-soft);margin-top:1rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border:1px solid var(--c-ghost);border-radius:999px;font-size:.9rem;font-weight:600}
.chips .ic{color:var(--c-eyebrow)}
.sec-layout{display:grid;gap:2.5rem;padding-top:3rem;padding-bottom:4.5rem}
@media (min-width:64rem){.sec-layout{grid-template-columns:15rem minmax(0,1fr);gap:4rem}}
.toc{font-size:.92rem}
@media (min-width:64rem){.toc{position:sticky;top:1.5rem;align-self:start}}
.toc-h{font:600 .8rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:.75rem}
.toc ol{display:grid;gap:.1rem;border-left:2px solid var(--rule)}
.toc a{display:block;padding:.35rem .9rem;margin-left:-2px;border-left:2px solid transparent;color:var(--text);text-decoration:none}
.toc a:hover{border-left-color:var(--primary);color:var(--primary)}
@media (max-width:63.99rem){.toc ol{columns:2;column-gap:1rem;border-left:0}.toc li{break-inside:avoid}.toc a{padding:.3rem 0;border-left:0}}
@media (max-width:36rem){.toc ol{columns:1}}
.sec-article{max-width:52rem;min-width:0}
.sec-block{padding-bottom:2.75rem;margin-bottom:2.75rem;border-bottom:1px solid var(--rule)}
.sec-block:last-child{border-bottom:0}
.sec-block h2{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.3rem);margin-bottom:1rem}
.sec-block h3{margin:1.75rem 0 .75rem}
.sec-block p{max-width:var(--measure);margin-bottom:1rem}
.pair{display:grid;gap:1rem}
@media (min-width:40rem){.pair{grid-template-columns:1fr 1fr}}
.pair-card{padding:1.5rem;border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);background:var(--card)}
.pair-card h3{margin:0 0 .6rem}
.pair-card p{margin:0}
.pair-never{border:2px solid var(--primary)}
.table-wrap{margin:.5rem 0 1.5rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card);overflow:hidden}
.table{width:100%;border-collapse:collapse;font-size:.94rem}
.table caption{text-align:left;font-weight:600;padding:.9rem 1rem .6rem}
.table th,.table td{text-align:left;vertical-align:top;padding:.75rem 1rem;border-top:1px solid var(--rule)}
.table thead th{font-size:.82rem;color:var(--soft);font-weight:600}
.table tbody th{font-weight:600;width:38%}
.table code{font-size:.86rem;font-weight:600;overflow-wrap:anywhere}
.tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.tag{font-size:.74rem;font-weight:600;padding:.12rem .5rem;border-radius:999px;border:1px solid var(--control);color:var(--soft);white-space:nowrap}
.tag-opt{border-color:var(--primary);color:var(--primary)}
@media (max-width:40rem){
  .stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .stack tr{display:block;padding:.75rem 1rem;border-top:1px solid var(--rule)}
  .stack th,.stack td{display:block;width:auto!important;border:0;padding:.15rem 0}
  .stack td::before{content:attr(data-label);display:block;font-size:.76rem;font-weight:600;color:var(--soft)}
}
.nevers{display:grid;gap:1rem}
@media (min-width:40rem){.nevers{grid-template-columns:1fr 1fr}}
.nv{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.8rem;padding:1.2rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.nv-ic{width:1.4rem;height:1.4rem;color:var(--primary)}
.nv h3{margin:0 0 .3rem;font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0}
.nv p{margin:0;color:var(--soft);font-size:.95rem}
.sec-block .flow{--c-bg:var(--bg);--c-card:var(--tint);--c-text:var(--text);--c-soft:var(--soft);--c-link:var(--primary);--c-rule:var(--rule);--c-ghost:var(--control);margin:.5rem 0 1.5rem}
.region{display:flex;gap:1rem;align-items:center;padding:1.25rem 1.4rem;margin-bottom:1.25rem;border-radius:1.25rem;background:var(--tint);border:1px solid var(--rule)}
.region-ic{width:2rem;height:2rem;color:var(--primary)}
.region p{margin:0}
.region-k{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.region-v{font-family:var(--serif);font-size:1.8rem;line-height:1.15}
.region-n{font-size:.9rem;color:var(--soft)}
.protect{display:grid;gap:.6rem}
.protect li{display:grid;grid-template-columns:1.4rem minmax(0,1fr);gap:.6rem;max-width:var(--measure)}
.protect .tick{width:1.4rem;height:1.4rem;padding:.2rem;border-radius:50%;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary)}
.nots{padding-left:1.2rem;list-style:disc}
.nots li{margin-bottom:.4rem;max-width:var(--measure)}


/* ---------- motion framework: plays once per reveal ---------- */
@media all{
  .js [data-reveal]:not(.hero):not(.page-hero):not(.is-in){opacity:0}
  .js [data-reveal].is-in:not(.hero):not(.page-hero){animation:kw-rise .7s var(--ease-out) both}
  .js .hero:not(.is-in) .hero-copy>*,.js .page-hero:not(.is-in) .wrap>*{opacity:0}
  .js .hero.is-in .hero-copy>*,.js .page-hero.is-in .wrap>*{animation:kw-rise .75s var(--ease-out) both}
  .hero-copy>:nth-child(2),.page-hero .wrap>:nth-child(2){animation-delay:.08s!important}
  .hero-copy>:nth-child(3),.page-hero .wrap>:nth-child(3){animation-delay:.16s!important}
  .hero-copy>:nth-child(4),.page-hero .wrap>:nth-child(4){animation-delay:.24s!important}
  .hero-copy>:nth-child(5),.page-hero .wrap>:nth-child(5){animation-delay:.32s!important}
  .page-hero .wrap>:nth-child(6){animation-delay:.4s!important}
  /* staggered groups */
  :is(.stats,.ccards,.tiles,.proof-points,.rpoints,.plans,.nevers,.steps)>:nth-child(2){animation-delay:.07s!important}
  :is(.stats,.ccards,.tiles,.proof-points,.rpoints,.plans,.nevers,.steps)>:nth-child(3){animation-delay:.14s!important}
  :is(.stats,.ccards,.tiles,.proof-points,.rpoints,.plans,.nevers,.steps)>:nth-child(4){animation-delay:.21s!important}
  :is(.stats,.ccards,.tiles,.proof-points,.rpoints,.plans,.nevers,.steps)>:nth-child(5){animation-delay:.28s!important}
  :is(.stats,.ccards,.tiles,.proof-points,.rpoints,.plans,.nevers,.steps)>:nth-child(6){animation-delay:.35s!important}
  /* how it works: the connector draws as the steps arrive */
  .js .steps:has(li.is-in) .steps-line{animation:kw-grow 1.1s var(--ease-door) .15s both}
  /* enforcement flow: a read passes through, a write stops at the gate */
  .js .flow.is-in .lane-read .packet{animation:kw-pass 1.6s var(--ease-door) .5s both}
  .js .flow.is-in .lane-write .packet{animation:kw-stop 1.1s var(--ease-door) 1.4s both}
  .js .flow.is-in .lane-stop{animation:kw-pop .35s var(--ease-out) 2.4s both}
  /* report: the arch is drawn, the slats rise, the marker settles on the score */
  .js .cover.is-in .arch-line{stroke-dasharray:1;animation:kw-draw 1.2s var(--ease-door) .2s both}
  .js .cover.is-in .slat{animation:kw-slat .32s var(--ease-out) both}
  .js .cover.is-in .bs-marker{animation:kw-marker 1s var(--ease-out) .5s both}
  .cover .slat:nth-child(n){animation-delay:.6s}
  .cover .slat:nth-child(n+4){animation-delay:.66s}.cover .slat:nth-child(n+8){animation-delay:.72s}
  .cover .slat:nth-child(n+12){animation-delay:.78s}.cover .slat:nth-child(n+16){animation-delay:.84s}
  .cover .slat:nth-child(n+20){animation-delay:.9s}.cover .slat:nth-child(n+24){animation-delay:.96s}.cover .slat:nth-child(n+28){animation-delay:1.02s}
}
@keyframes kw-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kw-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes kw-pass{from{left:0;opacity:0}12%{opacity:1}to{left:calc(100% - .8rem)}}
@keyframes kw-stop{from{left:0;opacity:0}15%{opacity:1}to{left:calc(50% - 1.6rem)}}
@keyframes kw-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes kw-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kw-slat{from{transform:scaleY(0)}to{transform:none}}
@keyframes kw-marker{from{left:0}to{left:69%}}

/* Motion plays for every visitor (decision 19 October 2026). The "Pause background motion" button stops the endless motion (WCAG 2.2.2). */

/* Print: light tokens (set in the token block), no chrome, no motion, dark bands become white */
@media print{
  .utility,.site-header,.skip,.theme-toggle,.ambient-toggle,.cta,.toc,.hero-bg,.cta-bg{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal],.hero-copy>*,.page-hero .wrap>*{opacity:1!important}
  .tone-night,.tone-slab,.tone-tint,.tone-day,.top{--c-bg:#fff;--c-text:#1a1d3b;--c-soft:#4b4f6e;--c-link:#383c97;--c-rule:#d5d7e5;--c-card:#fff;--c-ghost:#7a7e9c;--c-eyebrow:#383c97;--c-btn:#383c97;--c-btn-ink:#fff;background:#fff!important;color:#1a1d3b}
  .tone-night .kw-lockup{color:#1a1d3b}
  .band{padding:1.5rem 0}
  .facts{margin-top:0}
  .ccard,.tile,.plan,.cover,.nv,.table-wrap,.proof-points li,.steps li{break-inside:avoid}
  .cover-sheet,.slat,.step-n,.reqlog-lines li.is-blocked{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:inherit}
  @page{size:A4;margin:14mm}
}

/* ================= components for the new copy ================= */
.hero-note{margin-top:1.4rem;font-size:.95rem;color:var(--c-soft);max-width:36rem}

/* why identity: six risk cards */
.rcards{display:grid;gap:1rem}
@media (min-width:44rem){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64rem){.rcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}}
.rcard{display:flex;flex-direction:column;gap:.55rem;padding:1.6rem 1.5rem 1.35rem;background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);transition:transform .2s var(--ease-out),box-shadow .2s,border-color .2s}
.rcard:hover{transform:translateY(-3px);border-color:var(--control);box-shadow:0 18px 36px -28px rgba(8,10,40,.55)}
.rcard>.ic{color:var(--primary);margin-bottom:.35rem}
.rcard p{color:var(--soft)}
.rcard-ids{margin-top:auto!important;padding-top:.85rem;border-top:1px solid var(--rule);font:600 .76rem/1.5 var(--mono);color:var(--soft);letter-spacing:.01em}

/* proof and fix: points + example finding */
.pf-grid{display:grid;gap:3rem;align-items:start}
@media (min-width:62rem){.pf-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4.5rem}}
.finding{max-width:40rem;margin:0 auto;width:100%}
.fd-label{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;color:var(--c-soft);margin-bottom:.7rem}
.fd-card{background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:1.25rem;overflow:hidden;box-shadow:0 30px 60px -38px rgba(8,10,40,.55)}
.fd-head{--fd-ink:#eef0ff;--fd-soft:#c3c6ee;background:linear-gradient(160deg,#1b1e4e,#262a6e);color:var(--fd-ink);padding:1.4rem 1.5rem 1.6rem;border-radius:0 0 var(--arch) var(--arch)}
.fd-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.8rem;font-size:.86rem}
.fd-rid{color:var(--fd-soft);font-weight:600}
.fd-head h3{font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);margin-bottom:.4rem}
.fd-sum{color:var(--fd-soft)}
.sev{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;line-height:1;padding:.32rem .6rem .32rem .5rem;border-radius:999px;border:1px solid #c3c6ee;background:#ffffff;color:#1a1d3b;white-space:nowrap}
.sev .notch{color:#a3221b}
.notch .on{fill:currentColor}.notch .off{fill:none;stroke:currentColor;stroke-width:.7;opacity:.55}
.fd-body{padding:1.25rem 1.5rem 1.5rem}
.fd-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:1rem}
.fd-table th,.fd-table td{text-align:left;vertical-align:top;padding:.6rem .5rem;border-bottom:1px solid var(--rule)}
.fd-table thead th{font-size:.78rem;color:var(--soft);font-weight:600;border-bottom:1.5px solid var(--text)}
.fd-table tbody th{font-weight:600}
.found-val{font-family:var(--serif);font-size:1.3rem;font-weight:500;text-decoration:underline;text-decoration-color:var(--issue);text-decoration-thickness:2px;text-underline-offset:.22em}
.fd-dl{display:grid;gap:.75rem;font-size:.95rem}
.fd-dl dt{font-weight:600}
.fd-dl dd{color:var(--soft)}
.fd-cap{margin-top:.8rem;font-size:.86rem;color:var(--c-soft)}

/* four steps */
@media (min-width:48rem){.steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}.steps-4 .steps-line{display:none}}
@media (min-width:64rem){.steps-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}.steps-4 .steps-line{display:block;right:calc(25% - 1rem)}}

/* who it helps + report cover */
.who-grid{display:grid;gap:3rem;align-items:center}
@media (min-width:62rem){.who-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4.5rem}}
.audiences{display:grid;gap:0}
.audiences li{padding:1.25rem 0;border-top:1px solid var(--c-rule)}
.audiences li:last-child{border-bottom:1px solid var(--c-rule)}
.audiences h3{margin-bottom:.35rem}
.audiences p{color:var(--c-soft)}

/* coverage columns */
.pcols{display:grid;gap:2rem}
@media (min-width:60rem){.pcols{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}}
.pcol h3{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--c-text);margin-bottom:.25rem}
.pcol-n{font-family:var(--serif);font-size:2.4rem;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.pcol-unit{font-family:var(--sans);font-size:.9rem;letter-spacing:0;color:var(--c-soft)}
.pcol li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--c-rule)}
.pcol li .num{font-weight:600;color:var(--c-soft)}

/* alongside: feature list */
.apts{display:grid;gap:2rem 2.5rem}
@media (min-width:48rem){.apts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72rem){.apts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.apt{padding-top:1.1rem;border-top:2px solid var(--c-link)}
.apt dt{font-family:var(--serif);font-weight:500;font-size:1.22rem;letter-spacing:-.01em;margin-bottom:.4rem}
.apt dd{margin:0;color:var(--c-soft)}
@media (min-width:64rem){.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* How it works page */
.gets{display:grid;gap:1rem}
@media (min-width:40rem){.gets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.get{padding:1.3rem 1.35rem;border:1px solid var(--rule);border-radius:1.4rem 1.4rem var(--r) var(--r);background:var(--card)}
.get h3{margin:0 0 .35rem!important;font-size:1.15rem}
.get p{margin:0!important;color:var(--soft);font-size:.97rem}
.timeline{position:relative;display:grid;gap:1.75rem;margin-top:1.5rem}
.tl-line{position:absolute;left:1.2rem;top:1.5rem;bottom:1.5rem;width:2px;background:var(--rule);transform-origin:top center}
.tl-item{position:relative;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1.1rem}
.tl-n{position:relative;z-index:1;display:grid;place-items:center;width:2.4rem;height:2.7rem;border-radius:1.2rem 1.2rem .3rem .3rem;background:var(--primary);color:var(--on-primary);font-family:var(--serif);font-size:1.15rem;box-shadow:0 0 0 5px var(--bg)}
.tl-item h3{margin:.35rem 0 .45rem!important}
.tl-item p{margin-bottom:.6rem!important}
.bandscale{display:flex;gap:4px;margin:1.25rem 0 1.25rem}
.band-seg{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem .6rem;border-top:6px solid var(--primary);background:var(--tint);border-radius:.3rem .3rem .6rem .6rem;min-width:0}
.band-seg.bs-critical{flex:40;border-top-color:color-mix(in srgb,var(--primary) 35%,var(--tint))}.band-seg.bs-poor{flex:25;border-top-color:color-mix(in srgb,var(--primary) 55%,var(--tint))}
.band-seg.bs-fair{flex:20;border-top-color:color-mix(in srgb,var(--primary) 78%,var(--tint))}.band-seg.bs-good{flex:16}
.band-name{font-weight:600;font-size:.92rem}
.band-range{font-size:.8rem;color:var(--soft)}
.table-narrow{max-width:22rem}
@media (max-width:30rem){.bandscale{flex-direction:column}.band-seg{flex:none!important}}

@media all{
  :is(.rcards,.apts,.gets,.pcols,.audiences)>:nth-child(2){animation-delay:.07s!important}
  :is(.rcards,.apts,.gets,.pcols,.audiences)>:nth-child(3){animation-delay:.14s!important}
  :is(.rcards,.apts,.gets)>:nth-child(4){animation-delay:.21s!important}
  :is(.rcards,.apts,.gets)>:nth-child(5){animation-delay:.28s!important}
  :is(.rcards,.apts,.gets)>:nth-child(6){animation-delay:.35s!important}
  .js .timeline:has(.tl-item.is-in) .tl-line{animation:d-tl 1.4s var(--ease-door) both}
  .js .bandscale.is-in .band-seg{animation:kw-slat .45s var(--ease-out) both;transform-origin:bottom}
  .js .bandscale.is-in .band-seg:nth-child(2){animation-delay:.08s}.js .bandscale.is-in .band-seg:nth-child(3){animation-delay:.16s}.js .bandscale.is-in .band-seg:nth-child(4){animation-delay:.24s}
  .js .finding.is-in .found-val{animation:d-underline .8s var(--ease-out) .5s both}
}
@keyframes d-tl{from{transform:scaleY(0)}to{transform:none}}
@keyframes d-underline{from{text-decoration-color:transparent}to{text-decoration-color:var(--issue)}}
@media print{.rcard,.get,.tl-item,.pcol,.apt,.finding{break-inside:avoid}.fd-head{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ===== Direction 2: Wattle Dusk. A deeper night field, a warm wattle accent, and the gate opening onto light. ===== */
.top.tone-night,.cta.tone-night{background:radial-gradient(85% 55% at 72% 112%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 62%),linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.hero-ambient{inset:-20%!important;background:radial-gradient(30% 26% at 70% 70%,color-mix(in srgb,var(--glow) 10%,transparent),transparent 70%)}
.hero-slats{right:55%!important;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--on-night) 3%,transparent) 0 1px,transparent 1px 72px)}
.site-header{border-bottom:1px solid color-mix(in srgb,var(--night-rule) 60%,transparent)}
.eyebrow::before{background:var(--accent)}
.tone-bg .eyebrow,.tone-tint .eyebrow{color:var(--primary)}
.hero h1{font-size:clamp(2.7rem,1.5rem + 4.6vw,4.9rem);max-width:13.5ch}
.btn-hero,.tone-night .btn-solid{box-shadow:0 10px 30px -12px color-mix(in srgb,var(--accent) 60%,transparent)}

/* the gate illustration */
.hero-gate{position:relative;max-width:30rem;margin:0 auto;aspect-ratio:1/1}
.hg-svg{width:100%;height:100%;overflow:visible}
.hg-slat{fill:color-mix(in srgb,var(--on-night) 15%,transparent)}
.hg-s0,.hg-s4{fill:color-mix(in srgb,var(--on-night) 11%,transparent)}
.hg-opening{fill:url(#hglight)}
.hg-arch{fill:none;stroke:color-mix(in srgb,var(--night-link) 70%,transparent);stroke-width:.5}
.hg-door{fill:#a9aeff;d:path("M45.5 76.8 L55.5 82.5 L55.5 103.5 L45.5 107.8 Z")}
@media (max-width:30rem){.hero-gate{max-width:21rem}}
.hero{position:relative}
.ambient-toggle{position:absolute;right:1rem;top:1rem;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--night-soft);background:color-mix(in srgb,var(--night) 70%,transparent);color:var(--on-night);font:600 .8rem/1.2 var(--sans);cursor:pointer}
.ambient-toggle:focus-visible{outline-color:var(--on-night)}

.facts{--facts-under:var(--bg);padding-bottom:clamp(3rem,6vw,5rem)}
.facts-panel{border-top:4px solid var(--accent)}
.stat dd{color:var(--text)}
.rcard{border-top:3px solid var(--primary)}
.rcard>.ic{color:var(--text)}
.apt{border-top-color:var(--accent)}
.tone-bg .apt,.tone-tint .apt{border-top-color:var(--primary)}
.prooffix.tone-slab{background:radial-gradient(60% 80% at 85% 50%,color-mix(in srgb,#6c5ce0 22%,transparent),transparent 70%),var(--slab)}
.cover-sheet{--cover-a:#1d1850;--cover-b:#2c2470}
.prooffix .fd-head{background:linear-gradient(160deg,#241e60,#33297a)}
.hg-cap{display:flex;gap:.6rem;align-items:flex-start;max-width:30rem;margin:1.25rem auto 0;font-size:.92rem;color:var(--c-soft)}
.hg-cap .ic{margin-top:.2rem;color:var(--c-eyebrow)}
.plan-free{border-color:var(--accent)}
:root:not([data-theme="dark"]) .plan-free{border-color:var(--primary)}
.cta-bg{opacity:.07}
.site-footer.tone-night{background:var(--night);border-top:1px solid var(--night-rule)}

/* ---- motion: the slats rise, the arch is traced, the door swings ajar and light spills through ---- */
@media all{
  .js .hero.is-in .hg-slat{transform-box:fill-box;transform-origin:bottom;animation:kw-slat .7s var(--ease-out) both}
  .js .hero.is-in .hg-s1{animation-delay:.08s}.js .hero.is-in .hg-s2{animation-delay:.16s}.js .hero.is-in .hg-s3{animation-delay:.24s}.js .hero.is-in .hg-s4{animation-delay:.32s}
  .js .hero.is-in .hg-arch{stroke-dasharray:1;animation:kw-draw 1.4s var(--ease-door) .3s both}
  .js .hero.is-in .hg-door{animation:d2-door 1.2s var(--ease-door) .9s both}
  .js .hero.is-in .hg-opening{animation:d2-light 1.4s ease-out 1.1s both}
  .js .hero.is-in :is(.hg-halo,.hg-beam){animation:d2-light 1.4s ease-out 1.3s both}
  /* the one ambient effect: a slow drift of the dusk light, pausable */
  .js .top .hero-ambient{animation:d2-drift 38s ease-in-out 3s infinite alternate}
  .js .top.is-paused .hero-ambient{animation-play-state:paused}
}
@keyframes d2-door{from{d:path("M45 76.5 L75 76.5 L75 108 L45 108 Z")}to{d:path("M45.5 76.8 L55.5 82.5 L55.5 103.5 L45.5 107.8 Z")}}
@keyframes d2-light{from{opacity:0}to{opacity:1}}
@keyframes d2-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-9%,-4%) scale(1.12)}}
@media (max-width:61.99rem){.ambient-toggle{position:static;margin:2rem 0 0 1rem}}

/* ================= Round 2: hero graphic alternatives and the accordion (Wattle Dusk) ================= */
/* Outcome colours on the dusk field use the dark-mode outcome values in both themes (the field is dark in both). */
.top{--o-issue:#e16b5b;--o-issue-soft:#f39d90;--o-passed:#3fa895;--o-ink:#14122e}
.stat-pre{font-family:var(--sans);font-weight:600;font-size:.42em;letter-spacing:0;color:var(--soft);margin-right:.2em;vertical-align:.35em}
.hx{width:24px;height:24px;flex:none}
.hx .ill-ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hx-sm{width:18px;height:18px}

.alt{position:relative;max-width:32rem;margin:0 auto;aspect-ratio:1/1}
.alt-gate{position:absolute;inset:14%}
.alt .hg-svg{width:100%;height:100%;overflow:visible;display:block}

/* ---------- B. Orbit ---------- */
.orbit-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orbit-ring{fill:none;stroke:url(#obg);stroke-width:1.4;opacity:.75}
.orbit-dots{fill:none;stroke:var(--night-soft);stroke-width:1.1;stroke-dasharray:.1 5;stroke-linecap:round;opacity:.6;transform:scale(1.08);transform-origin:center}
.orbit-inner{fill:color-mix(in srgb,var(--glow) 6%,transparent);stroke:var(--night-rule);stroke-width:1}
.orbit-comet{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 91;opacity:0;transform:rotate(-90deg);transform-origin:center}
.alt-b .alt-gate{inset:30%}
.ob{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.35rem;transform:translate(-50%,-50%)}
.ob1{left:50%;top:9%}.ob2{left:85.5%;top:29.5%}.ob3{left:85.5%;top:70.5%}.ob4{left:50%;top:91%}.ob5{left:14.5%;top:70.5%}.ob6{left:14.5%;top:29.5%}
.ob-dot{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;color:var(--on-night);border:2px solid transparent;
  background:linear-gradient(color-mix(in srgb,var(--on-night) 6%,var(--night-2)),color-mix(in srgb,var(--on-night) 6%,var(--night-2))) padding-box,conic-gradient(from 200deg,#f2c14e,#b3b6ff,#6c5ce0,#f2c14e) border-box}
.ob-label{position:absolute;top:100%;margin-top:.35rem;font-size:.82rem;font-weight:600;color:var(--on-night);white-space:nowrap;padding:.1rem .45rem;border-radius:.4rem;background:color-mix(in srgb,var(--night) 70%,transparent)}
.ob1 .ob-label{top:auto;bottom:100%;margin:0 0 .35rem}
.ob-orbit{position:absolute;inset:0}
.ob-in{position:relative;display:flex;flex-direction:column;align-items:center}
@media (max-width:30rem){.ob-dot{width:2.8rem;height:2.8rem}.ob-label{font-size:.74rem}}

/* ---------- motion for the alternatives (all play once) ---------- */
@media all{
  /* B */
  .js .hero.is-in .orbit-ring{stroke-dasharray:1;animation:kw-draw 1.4s var(--ease-door) .4s both}
  .js .hero.is-in .orbit-dots{animation:r2-fade 1s ease-out .9s both}
  .js .hero.is-in .orbit-comet{animation:r2-comet 2.6s var(--ease-door) 1.2s both}
  .js .hero.is-in .ob{animation:r2-pop .45s var(--ease-out) both}
  .js .hero.is-in .ob1{animation-delay:1.3s}.js .hero.is-in .ob2{animation-delay:1.7s}.js .hero.is-in .ob3{animation-delay:2.1s}
  .js .hero.is-in .ob4{animation-delay:2.5s}.js .hero.is-in .ob5{animation-delay:2.9s}.js .hero.is-in .ob6{animation-delay:3.3s}
}
@keyframes r2-tag{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@keyframes r2-fade{from{opacity:0}}
@keyframes r2-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes r2-comet{0%{opacity:0;stroke-dashoffset:100}10%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}

/* ================= Accordion: Why identity is where to start ================= */
.why-acc .section-head{max-width:48rem}
.acc-grid{display:grid;gap:2.5rem}
@media (min-width:56rem){.acc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:4rem;align-items:start}}
.acc{border-bottom:1px solid var(--rule)}
.acc-item{position:relative;border-top:1px solid var(--rule)}
@media (min-width:56rem){.acc-item.is-open::before{content:"";position:absolute;left:-1.1rem;top:1.15rem;bottom:1.15rem;width:3px;border-radius:2px;background:var(--accent)}}
.acc-h{margin:0;font:inherit}
.acc-btn{display:flex;align-items:center;gap:1rem;width:100%;min-height:3.5rem;padding:1.1rem 0;border:0;background:none;color:var(--text);text-align:left;cursor:pointer;font:500 clamp(1.15rem,1rem + .6vw,1.4rem)/1.25 var(--serif);letter-spacing:-.01em}
.acc-btn:hover .acc-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.acc-num{flex:none;width:1.75rem;font:600 .8rem/1 var(--sans);letter-spacing:.06em;color:var(--soft);font-variant-numeric:tabular-nums}
.acc-title{flex:1}
.acc-plus{position:relative;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;border:1.5px solid var(--control);transition:background-color .2s,border-color .2s}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:2px;margin:-1px 0 0 -.4rem;border-radius:1px;background:var(--text);transition:transform .25s var(--ease-out)}
.acc-plus::after{transform:rotate(90deg)}
.acc-btn[aria-expanded="true"] .acc-plus{background:var(--primary);border-color:var(--primary)}
.acc-btn[aria-expanded="true"] .acc-plus::before,.acc-btn[aria-expanded="true"] .acc-plus::after{background:var(--on-primary)}
.acc-btn[aria-expanded="true"] .acc-plus::after{transform:rotate(0)}
.acc-panel{padding:0 0 1.35rem 2.75rem}
.acc-panel p{color:var(--soft);max-width:52ch}
.acc-ill-inline{display:none}
@media (max-width:55.99rem){.acc-ill-inline{display:block;margin-top:1rem}.acc-panel{padding-left:0}}
.acc-foot{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-size:.95rem;color:var(--soft)}
.acc-foot .ic{color:var(--primary)}
.acc-figure{display:none}
@media (min-width:56rem){.acc-figure{display:grid;position:sticky;top:2rem}}
.ill{grid-area:1/1;opacity:0;visibility:hidden}
.ill.is-active{opacity:1;visibility:visible}
@media all{
  .ill{transition:opacity .45s ease,visibility 0s linear .45s}
  .ill.is-active{transition:opacity .45s ease,visibility 0s}
  .acc.is-enhanced .acc-item.is-open .acc-panel{animation:r2-fade .35s ease-out both}
}
/* illustration kit */
.ill-svg{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 30px 60px -38px rgba(8,10,40,.6)}
.ill-svg .ill-ic{fill:none;stroke:#f7f5ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ill-svg .ill-ic-dark{stroke:#1b1a3a}
.ill-svg .ill-ic-dim{stroke:#cdc8ef;opacity:.7}
.tok-c{fill:#241e5c;stroke:#4d4590;stroke-width:1.5}
.tok-flag .tok-c{stroke:#e16b5b;stroke-width:2}
.tok-pass .tok-c{stroke:#3fa895;stroke-width:2}
.tok-accent .tok-c{stroke:#f2c14e;stroke-width:2}
.tok-accent .ill-ic{stroke:#f6d27e}
.b-flag{fill:#e16b5b}.b-pass{fill:#3fa895}
.b-mark{fill:none;stroke:#14122e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.b-dot{fill:#14122e}
.t-lab{font:500 13.5px var(--sans);fill:#cdc8ef}
.t-mid{fill:#f6d27e;font-weight:600}
.ln{fill:none;stroke:#7d74c4;stroke-width:1.6}
.ln-dash{stroke-dasharray:5 5}
.ln-flag{stroke:#e16b5b}
.chip rect{fill:#1b1748;stroke:#5a52a0}
.chip text{font:600 13.5px var(--sans);fill:#f7f5ff}
.chip-flag rect{stroke:#e16b5b}.c-tri{fill:#e16b5b}
.chip-pass rect{stroke:#3fa895}
.bg-arch{fill:none;stroke:rgba(205,200,239,.12);stroke-width:1.5}
.mg-slats rect{fill:rgba(247,245,255,.16)}
.mg-arch{fill:none;stroke:#f2c14e;stroke-opacity:.65;stroke-width:1.3;vector-effect:non-scaling-stroke}
.mg-door{fill:#a9aeff}.mg-light{fill:#f2c14e;opacity:.45}.mg-shut{fill:rgba(247,245,255,.38)}
.card{fill:#f7f5ff}
.t-card{font:500 13px var(--sans);fill:#1b1a3a}.t-card-b{font-weight:600}
.btn-allow{fill:#f2c14e}.t-allow{font:600 13px var(--sans);fill:#15122e}
.btn-cancel{fill:none;stroke:#7b7998}.t-cancel{font:600 13px var(--sans);fill:#4d4b6a}
.cursor{fill:#f7f5ff;stroke:#15122e;stroke-width:1.2}
.acct{fill:rgba(247,245,255,.05);stroke:#5a52a0;stroke-dasharray:4 4}
.t-acct{font:500 12px var(--sans);fill:#cdc8ef}
@media print{.acc-panel[hidden]{display:block!important}.acc-figure{display:none!important}.acc-ill-inline{display:block}}
/* Story pieces in the illustrations. Without motion they show the end of each story: the badges, the red
   outline on the approved app, the forgotten accounts' "still on" lights. Beads and ripples only exist in motion. */
.flow{fill:none;stroke:#f6d27e;stroke-width:8;stroke-linecap:round;stroke-dasharray:.5 200;stroke-dashoffset:4;opacity:0}
.ripple{fill:none;stroke:#e16b5b;stroke-width:2;opacity:0}
.ill-consent .ripple{stroke:#f2c14e}
.card-hit{fill:none;stroke:#e16b5b;stroke-width:3}
.on-dot{fill:#3fa895}
.on-halo{fill:none;stroke:#3fa895;stroke-width:1.5;opacity:0}
.mg-glow{fill:#f2c14e;opacity:.45}

/* Accordion illustrations: each plays its short story when its item opens (desktop figure and the phone inline
   copy), once the section has been seen, and starts again when another item is chosen. Every animation is finite.
   It plays for every visitor; without JavaScript the end state above is shown. */
@media all{
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) :is(.tok,.badge,.chip,.cardg,.cursor,.btn-allow,.acard,.ripple,.on-dot,.on-halo,.mg){transform-box:fill-box;transform-origin:center}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .bg-arch{stroke-dasharray:720;animation:ill-draw-long 1.6s var(--ease-out) both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .chip{animation:ill-rise .6s var(--ease-out) var(--chip,2.8s) both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .badge{animation:ill-badge .45s var(--ease-out) var(--hit,2s) both,ill-pulse .9s ease-in-out calc(var(--hit,2s) + .55s) 2}

  /* 1. Admin without strong MFA: the stolen password travels to the admin. No strong MFA, so nothing stops it. */
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin{--hit:2.3s;--chip:2.9s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .tok{animation:ill-pop .5s var(--ease-out) .15s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .tok-shield{animation-delay:.35s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .tok-accent{animation-delay:.6s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .ln:not(.ln-dash){stroke-dasharray:300;animation:ill-draw .7s var(--ease-out) .45s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .ln-dash{animation:ill-fade .4s ease .85s both,ill-flow .8s linear 1s 4}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .fl-1{animation:ill-travel 1.25s cubic-bezier(.45,0,.55,1) 1.1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .ripple{animation:ill-ripple 1s ease-out 2.3s forwards}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .tok-flag .tok-c{animation:ill-hit 1s ease 2.3s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-admin .tok-shield .tok-c{animation:ill-warn 1.6s ease 2.2s}

  /* 2. Apps and AI tools: their links to mail, files and people draw, then data streams out to them. */
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps{--hit:2.6s;--chip:3.1s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .tok{animation:ill-pop .5s var(--ease-out) .1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps g.tok:nth-of-type(2){animation-delay:.25s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .tok-data{animation-delay:.6s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps g.tok:nth-of-type(4){animation-delay:.72s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps g.tok:nth-of-type(5){animation-delay:.84s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .data-labs{animation:ill-fade .5s ease .9s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln{stroke-dasharray:300;animation:ill-draw .8s var(--ease-out) .45s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln:nth-of-type(3){animation-delay:.52s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln:nth-of-type(4){animation-delay:.59s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln:nth-of-type(5){animation-delay:.66s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln:nth-of-type(6){animation-delay:.73s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .ln:nth-of-type(7){animation-delay:.8s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .flow{animation:ill-travel-rev 1.05s cubic-bezier(.45,0,.55,1) 1.35s 2 both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .fl-2{animation-delay:1.5s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .fl-3{animation-delay:1.65s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .fl-4{animation-delay:1.42s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .fl-5{animation-delay:1.57s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .fl-6{animation-delay:1.72s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .tok-data .tok-c{animation:ill-gold 2.6s ease 1.2s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-apps .tok-flag .tok-c{animation:ill-hit 1s ease 2.6s}

  /* 3. Service accounts, app secrets and AI agents: they sign straight in, again and again, and the door opens. */
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi{--hit:2.4s;--chip:3.2s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .mg{animation:ill-rise .6s var(--ease-out) .1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .tok{animation:ill-pop .5s var(--ease-out) .3s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi g.tok:nth-of-type(2){animation-delay:.45s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi g.tok:nth-of-type(3){animation-delay:.6s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .ln:not(.ln-dash){stroke-dasharray:300;animation:ill-draw .7s var(--ease-out) .75s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .ln-dash{animation:ill-fade .4s ease .8s both,ill-flow .8s linear 1s 4}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .flow{animation:ill-travel 1s cubic-bezier(.45,0,.55,1) 1.2s 3 both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .fl-2{animation-delay:1.45s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .fl-3{animation-delay:1.7s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .mg-door{animation:ill-mgdoor 1.1s cubic-bezier(.45,.05,.25,1) 1.9s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi :is(.mg-glow,.mg-light){animation:ill-fade 1s ease 2s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-nhi .mg-light{animation:ill-fade 1s ease 2s both,ill-glow 1.4s ease-in-out 3s 2}

  /* 4. Anyone can approve an app: the phishing email leads to a consent screen, the cursor clicks Allow, the app is in. */
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent{--hit:2.8s;--chip:3.2s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .tok{animation:ill-pop .5s var(--ease-out) .1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .ln-dash{animation:ill-fade .4s ease .4s both,ill-flow .8s linear .5s 2}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .fl-1{animation:ill-travel .7s cubic-bezier(.45,0,.55,1) .6s both,ill-travel-rev .7s ease-in-out 3s 2}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .cardg{animation:ill-pop .5s var(--ease-out) 1.05s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .cursor{animation:ill-cursor 1.2s cubic-bezier(.3,.7,.3,1) 1.45s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .btn-allow{animation:ill-press .3s ease 2.45s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .ripple{animation:ill-ripple .8s ease-out 2.5s forwards}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-consent .card-hit{animation:ill-fade .5s ease 2.75s both}

  /* 5. Forgotten accounts: nobody signs in and they go quiet, but each one is still switched on. */
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten{--chip:3.1s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard{animation:ill-rise .55s var(--ease-out) .1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-2{animation-delay:.25s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-3{animation-delay:.4s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .tok{animation:ill-dormant 1.2s ease 1.2s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .on-dot{animation:ill-badge .45s var(--ease-out) 2.1s both}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-2 .on-dot{animation-delay:2.25s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-3 .on-dot{animation-delay:2.4s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .on-halo{animation:ill-halo 1.5s ease-out 2.4s 3}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-2 .on-halo{animation-delay:2.55s}
  :is(.js .acc-figure.is-in .ill.is-active,.js .acc.is-in .acc-item.is-open .acc-ill-inline) .ill-forgotten .acard-3 .on-halo{animation-delay:2.7s}
}
.ill-forgotten .tok{opacity:.4}
@keyframes ill-pop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes ill-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ill-fade{from{opacity:0}}
@keyframes ill-draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes ill-draw-long{from{stroke-dashoffset:720}to{stroke-dashoffset:0}}
@keyframes ill-flow{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes ill-pulse{0%,100%{transform:none}50%{transform:scale(1.3)}}
@keyframes ill-badge{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.25)}to{opacity:1;transform:none}}
@keyframes ill-travel{0%{stroke-dashoffset:4;opacity:0}12%,88%{opacity:1}to{stroke-dashoffset:-100;opacity:0}}
@keyframes ill-travel-rev{0%{stroke-dashoffset:-100;opacity:0}12%,88%{opacity:1}to{stroke-dashoffset:4;opacity:0}}
@keyframes ill-ripple{from{opacity:.9;transform:none}to{opacity:0;transform:scale(1.75)}}
@keyframes ill-halo{from{opacity:.9;transform:none}to{opacity:0;transform:scale(2.6)}}
@keyframes ill-hit{0%,100%{fill:#241e5c}30%{fill:#6a2a48}}
@keyframes ill-warn{0%,100%{stroke:#4d4590}20%,70%{stroke:#e16b5b}}
@keyframes ill-gold{0%,100%{stroke:#4d4590}15%,80%{stroke:#f2c14e}}
@keyframes ill-cursor{0%{opacity:0;transform:translate(80px,52px)}20%{opacity:1}78%{transform:none}88%{transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes ill-press{0%,100%{transform:none}50%{transform:scale(.9)}}
@keyframes ill-glow{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes ill-dormant{from{opacity:1}to{opacity:.4}}
@keyframes ill-mgdoor{from{d:path("M45 76.5 L75 76.5 L75 108 L45 108 Z")}to{d:path("M46.5 77 L62 82.5 L62 103.5 L46.5 107.5 Z")}}

/* Hero, larger screens with a mouse: the six areas turn slowly around the ring (each one turns back, so its
   label stays upright), and the wicket door swings open once onto warm light, which then breathes gently.
   Phones keep the hero still. The "Pause background motion" button pauses all of it. */
@media (min-width:64rem) and (hover:hover){
  .js .hero.is-in .hg-door{animation:d2-door 3.4s cubic-bezier(.45,.05,.25,1) 1.2s both}
  .js .hero.is-in .hg-opening{animation:d2-light 3.4s ease-in-out 1.5s both}
  .js .hero.is-in .hg-halo{transform-box:fill-box;transform-origin:50% 70%;animation:d2-light 3.6s ease-in-out 2s both,hg-breathe 6s ease-in-out 5.6s infinite alternate}
  .js .hero.is-in .hg-beam{animation:d2-light 3.6s ease-in-out 2.2s both,hg-breathe-beam 6s ease-in-out 5.8s infinite alternate}
  .js .hero.is-in .ob-orbit{animation:ob-turn 100s linear infinite}
  .js .hero.is-in .ob-in{animation:ob-turn 100s linear infinite reverse}
  .js .hero.is-in .ob1 .ob-label{top:100%;bottom:auto;margin:.35rem 0 0}
  .js .top.is-paused :is(.ob-orbit,.ob-in,.hg-halo,.hg-beam,.hg-door,.hg-opening){animation-play-state:paused}
}
@keyframes ob-turn{from{transform:none}to{transform:rotate(360deg)}}
@keyframes hg-breathe{from{opacity:1;transform:none}to{opacity:.62;transform:scale(.93)}}
@keyframes hg-breathe-beam{from{opacity:1}to{opacity:.6}}


/* ================= Keywicket additions for the real site ================= */
/* The slow dusk drift is for larger screens only: none on phones (saves battery, less distraction). */
@media (max-width:47.99rem){.js .top .hero-ambient{animation:none!important}.ambient-toggle{display:none!important}}
.hero-visual .alt{max-width:30rem}
/* Logo images (the public site uses the built lockups) */
.home-link img,.f-brand img{display:block;height:1.9rem;width:auto}
.logo-dark{display:none}
.tone-night .logo-light{display:none}.tone-night .logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .f-brand .logo-light{display:none}:root:not([data-theme="light"]) .f-brand .logo-dark{display:block}}
:root[data-theme="dark"] .f-brand .logo-light{display:none}:root[data-theme="dark"] .f-brand .logo-dark{display:block}
.site-footer.tone-night .f-brand .logo-light{display:none}.site-footer.tone-night .f-brand .logo-dark{display:block}
.theme-toggle-icon{width:1rem;height:1rem;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);border:2px solid currentColor}

/* Document pages: prose, legal, pricing, contact, status */
.doc{padding-top:clamp(2rem,4vw,3rem);padding-bottom:clamp(3rem,6vw,5rem)}
.prose{max-width:48rem}
.prose-wide{max-width:66rem}
.prose h2{font-size:clamp(1.6rem,1.25rem + 1.3vw,2.2rem);margin:2.4rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3,.prose .h3{font-size:1.25rem;margin:1.6rem 0 .6rem}
.prose p,.prose ul,.prose ol,.prose dl{margin:0 0 1rem;max-width:var(--measure)}
.prose ul,.prose ol:not(.steps):not(.plans){padding-left:1.25rem;list-style:disc}
.prose ol:not(.steps):not(.plans){list-style:decimal}
.prose li{margin-bottom:.4rem}
.prose code{background:var(--tint);padding:.1em .35em;border-radius:.35rem}
.legal h2{font-size:1.45rem}
.summary-pair{display:grid;gap:1rem;margin:0 0 2rem}
@media (min-width:40rem){.summary-pair{grid-template-columns:1fr 1fr}}
.summary-pair section{padding:1.4rem 1.5rem;border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);background:var(--card)}
.summary-pair section:last-child{border:2px solid var(--primary)}
.summary-pair h2{margin:0 0 .5rem!important;font-size:1.3rem}
.summary-pair p{margin:0}
.table-scroll{overflow-x:auto;margin:.75rem 0 1.5rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.table-scroll .table{min-width:36rem}
.table-permissions code{background:none;padding:0}
.perm-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.tag-optional{border-color:var(--primary);color:var(--primary)}
.prose>.table{max-width:24rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)}
.muted{color:var(--soft)}
.small{font-size:.9rem}
.signature{margin-top:1.5rem;padding:1rem;border:1px dashed var(--control);border-radius:var(--r)}
.prose .plans{list-style:none;padding:0;margin:1.5rem 0}
.plan-price{margin:0 0 .25rem!important}
.plan-amount{font-family:var(--serif);font-weight:500;font-size:2.2rem;letter-spacing:-.03em;line-height:1}
.plan-cadence,.plan-limit{color:var(--soft)}
.plan-limit{font-weight:600}
.status-list{display:grid;gap:.6rem;margin:1.5rem 0}
.status-row{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:var(--card);border:1px solid var(--rule);border-radius:var(--r)}
.status-ok{color:var(--passed);font-weight:600}
.status-bad{color:var(--blocked);font-weight:600}
.steps-detailed{grid-template-columns:1fr!important}
.points{display:grid;gap:1.5rem 2.5rem;margin:1.5rem 0}
@media (min-width:48rem){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
.points dt{font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-bottom:.3rem}
.points dd{margin:0;color:var(--soft)}
.points-tight{grid-template-columns:1fr!important}
.page-hero .chips{margin-top:1.25rem}

/* ================= Plans page ================= */
.plans-page{display:grid;gap:clamp(3rem,6vw,4.75rem)}
.plans-page>*{min-width:0}
.bill-switch{border:0;margin:0 0 -1.25rem;padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.bill-opts{position:relative;display:inline-flex;gap:.2rem;padding:.3rem;border:1px solid var(--rule);border-radius:999px;background:var(--tint)}
.bill-opts input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.bill-opts label{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.45rem 1.25rem;border-radius:999px;font-weight:600;cursor:pointer;color:var(--soft);transition:background-color .2s,color .2s,box-shadow .2s}
.bill-opts label:hover{color:var(--text)}
.bill-opts input:checked+label{background:var(--card);color:var(--text);box-shadow:0 8px 20px -12px rgba(8,10,40,.5),0 0 0 1px var(--rule)}
.bill-opts input:focus-visible+label{outline:3px solid var(--primary);outline-offset:2px}
.bill-save{padding:.15rem .6rem;border-radius:999px;background:var(--accent);color:#15122e;font-size:.78rem;font-weight:700;white-space:nowrap}
.bill-note{font-size:.88rem;color:var(--soft);text-align:center}
.bill-y,.bill-y-inline{display:none}
.plans-page.is-annual .bill-m,.plans-page.is-annual .bill-m-inline,
.plans-page:has(#bill-annual:checked) .bill-m,.plans-page:has(#bill-annual:checked) .bill-m-inline{display:none}
.plans-page.is-annual .bill-y,.plans-page:has(#bill-annual:checked) .bill-y{display:block}
.plans-page.is-annual .bill-y-inline,.plans-page:has(#bill-annual:checked) .bill-y-inline{display:inline}
@keyframes pp-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.plans-page :is(.bill-m,.bill-y){animation:pp-in .35s var(--ease-out)}

.pcards{display:grid;grid-template-columns:1fr;gap:1.6rem 1.1rem;align-items:stretch}
@media (min-width:40rem){.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:75rem){.pcards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcard{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:1.75rem 1.5rem 1.5rem;background:var(--card);color:var(--text);border:1px solid var(--rule);border-radius:var(--arch) var(--arch) var(--r) var(--r);box-shadow:0 24px 50px -40px rgba(8,10,40,.5)}
.pcard-feature{border:2px solid var(--accent);box-shadow:0 30px 60px -36px color-mix(in srgb,var(--accent) 60%,transparent)}
.pcard-ent{background:linear-gradient(180deg,var(--tint),var(--card) 55%)}
.pc-ribbon{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);white-space:nowrap;padding:.22rem .85rem;border-radius:999px;background:var(--accent);color:#15122e;font-size:.78rem;font-weight:700}
.pc-name{font-family:var(--serif);font-size:1.75rem;letter-spacing:-.02em;line-height:1.1}
.pc-for{color:var(--soft);margin-top:-.55rem}
.pc-price{min-height:10.4rem}
@media (max-width:40rem){.pc-price{min-height:0}}
.pc-amount{display:flex;align-items:baseline;flex-wrap:wrap;gap:.1rem .45rem}
.pc-amt{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,2.1rem + 1vw,2.9rem);line-height:1;letter-spacing:-.035em;color:var(--primary)}
.pc-amt-text{font-size:clamp(2.1rem,1.85rem + .8vw,2.55rem)}
.pc-per{color:var(--soft);font-weight:600}
.pc-note{font-size:.9rem;color:var(--soft);margin-top:.5rem}
.pc-hint{margin-top:.55rem;font-size:.86rem;font-weight:600;color:var(--accent-deep)}
.pc-save,.save-pct,.save-tag{display:inline-block;border-radius:999px;background:color-mix(in srgb,var(--accent) 30%,var(--card));color:var(--text);font-weight:700}
.pc-save{margin-top:.6rem;padding:.3rem .75rem;font-size:.86rem}
.pc-limit{padding:.55rem .8rem;border-radius:.6rem;background:var(--tint);font-weight:600;font-size:.92rem}
.pcard-ent .pc-limit{background:var(--card);border:1px solid var(--rule)}
.pc-feats{display:grid;gap:.55rem;font-size:.95rem}
.pc-feats li,.msp-rules li{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.6rem;align-items:start}
.pc-feats .ic,.msp-rules .ic{margin-top:.32rem;color:var(--passed)}
.pc-cta{margin-top:auto;width:100%}
.pcard-feature .btn-solid{--c-btn:var(--accent);--c-btn-ink:#15122e}

.pp-h{font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);margin-bottom:1.25rem}
.pp-lede{color:var(--c-soft,var(--soft));font-size:1.08rem}
.pp-fine{margin-top:1rem;font-size:.88rem;color:var(--soft)}
.pp-more{margin-top:1rem;font-weight:600}
.pp-more a{display:inline-flex;align-items:center;gap:.4rem}
.save-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem}
.save-card{padding:1.25rem 1.3rem;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.save-plan{font-weight:700}
.save-compare{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.55rem 0 .65rem;font-family:var(--serif);font-size:1.55rem;line-height:1.1}
.save-old{color:var(--soft);text-decoration:line-through;text-decoration-thickness:1.5px}
.save-new{color:var(--primary);font-weight:500}
.save-compare .ic{color:var(--soft)}
.save-pct{padding:.22rem .65rem;font-size:.85rem}
.save-tag{margin-left:.35rem;padding:.12rem .5rem;font-size:.76rem;white-space:nowrap}

.msp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.25rem;margin-bottom:1.5rem}
.msp-head>div{max-width:46rem}
.msp-head .pp-h{margin-bottom:.75rem}
.msp-table tbody th{width:28%}
.msp-table td strong{font-family:var(--serif);font-size:1.4rem;font-weight:500;color:var(--primary)}
.msp-grid{display:grid;gap:1.25rem}
@media (min-width:56rem){.msp-grid{grid-template-columns:1.35fr 1fr;align-items:start}}
.msp-rules{display:grid;gap:.9rem}
.msp-example{padding:1.4rem 1.5rem;border-radius:var(--arch) var(--arch) var(--r) var(--r);background:var(--tint);border:1px solid var(--rule)}
.msp-ex-h{font-weight:700}
.msp-ex-mix{color:var(--soft);font-size:.92rem;margin:.2rem 0 1rem}
.msp-ex-sums{display:grid;gap:.75rem}
.msp-ex-sums div{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.25rem 1rem;padding-top:.75rem;border-top:1px solid var(--rule)}
.msp-ex-sums dt{font-size:.92rem}
.msp-ex-sums dd{font-family:var(--serif);font-size:1.4rem;color:var(--primary);white-space:nowrap}
.msp-ex-sums div:last-child dd{color:var(--soft);text-decoration:line-through;text-decoration-thickness:1.5px}

.mcp-sec{padding:clamp(1.75rem,4vw,2.75rem);border-radius:var(--arch) var(--arch) var(--r) var(--r);color:var(--on-night);
  background:radial-gradient(70% 90% at 100% 110%,color-mix(in srgb,var(--glow) 24%,transparent),transparent 62%),linear-gradient(160deg,var(--night) 0%,var(--night-2) 100%)}
.mcp-sec .pp-h{color:var(--on-night)}
.mcp-in{display:grid;gap:2rem}
@media (min-width:56rem){.mcp-in{grid-template-columns:1.25fr 1fr;align-items:center}}
.mcp-plans{display:grid}
.mcp-plans li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid var(--night-rule);text-align:right}
.mcp-plans li:last-child{border-bottom:1px solid var(--night-rule)}
.mcp-p{font-weight:700;text-align:left}

.cmp-wrap{position:relative;overflow-x:auto;border:1px solid var(--rule);border-radius:1rem;background:var(--card)}
.cmp{width:100%;min-width:54rem;border-collapse:separate;border-spacing:0;font-size:.93rem}
.cmp th,.cmp td{padding:.75rem 1rem;text-align:center;vertical-align:middle;border-top:1px solid var(--rule)}
.cmp thead th,.cmp thead td{border-top:0}
.cmp thead th{font-family:var(--serif);font-size:1.2rem;font-weight:500;padding:1.15rem 1rem .9rem;white-space:nowrap}
.cmp tbody th[scope="row"]{position:sticky;left:0;z-index:1;text-align:left;font-weight:500;min-width:15rem;background:var(--card)}
.cmp .cmp-group th{text-align:left;font:700 .76rem/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--primary);background:var(--tint);padding:.65rem 1rem}
.cmp .cmp-feature{background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.cmp thead th.cmp-feature{box-shadow:inset 0 4px 0 var(--accent)}
.cmp-yes .ic{width:1.15rem;height:1.15rem;color:var(--passed);vertical-align:middle}
.cmp-no{color:var(--control);font-weight:600}

.faq{display:grid;gap:.6rem;max-width:54rem}
.faq details{border:1px solid var(--rule);border-radius:.9rem;background:var(--card);padding:0 1.2rem}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.25rem;padding:.75rem 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1;color:var(--primary);transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.15rem;color:var(--soft)}
@media print{.bill-switch{display:none}.bill-y,.bill-y-inline{display:block!important}.cmp{min-width:0}}
.pricing-more{margin-top:1.25rem}
.pricing-more .btn{gap:.45rem}
.pricing .fine+.fine{margin-top:.75rem}