/* CYBERSOL — shared chrome for static utility/legal pages (Privacy, Responsible
   Disclosure, 404). Plain CSS + native disclosure (<details>) — no React, no Babel,
   no CDN runtime. Pairs with the global tokens in ../styles.css. */

body{margin:0;background:var(--bg-base);color:var(--text-body);overflow-x:hidden;font-family:var(--font-body)}
.site{max-width:100%;overflow:hidden}
.mono{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
a{color:var(--accent-text)}a:hover{color:#fff}
*{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

/* skip link */
.skip-link{position:absolute;left:12px;top:-64px;z-index:200;background:var(--accent);color:#fff;font-weight:600;font-size:.9375rem;padding:.6rem 1rem;border-radius:var(--r-sm);text-decoration:none;transition:top var(--t)}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
#main-content{scroll-margin-top:88px}

/* buttons */
.btn{font-family:var(--font-body);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;text-decoration:none;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t-fast),box-shadow var(--t);white-space:nowrap;line-height:1}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px}
.btn-sm{padding:.5rem .875rem;font-size:.8125rem}
.btn-lg{padding:.9375rem 1.75rem;font-size:1rem}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--ink-1);border-color:var(--line-3)}
.btn-secondary:hover{border-color:var(--accent);color:#fff;background:rgba(236,237,245,.06);transform:translateY(-2px)}
/* Disabled: the submit button spends the whole "Sending…" state disabled but was
   styled identically to an enabled one, cursor:pointer included. Presentation only —
   the disabled attribute and aria-busy already did the real work. */
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.btn-primary:disabled:hover{background:var(--accent);border-color:var(--accent)}

/* nav — native disclosure, no JS */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem clamp(20px,5vw,64px);border-bottom:1px solid var(--line-2);background:rgba(7,7,26,.72);backdrop-filter:saturate(140%) blur(8px)}
.nav-logo{height:17px;display:block}
.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links > a{font-family:var(--font-body);font-size:.9375rem;font-weight:500;color:var(--ink-1);text-decoration:none;transition:color var(--t)}
.nav-links > a:hover,.nav-links > a[aria-current="page"]{color:var(--ink-0)}
.nav-links a:focus-visible,.nav-svc summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:2px;color:var(--ink-0)}
.nav-svc{position:relative}
.nav-svc summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-family:var(--font-body);font-size:.9375rem;font-weight:500;color:var(--ink-1);transition:color var(--t)}
.nav-svc summary::-webkit-details-marker{display:none}
.nav-svc[open] summary,.nav-svc summary:hover{color:var(--ink-0)}
.nav-svc-caret{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t)}
.nav-svc[open] .nav-svc-caret{transform:rotate(-135deg) translateY(-1px)}
.nav-svc-panel{position:absolute;top:calc(100% + 14px);left:-16px;min-width:290px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.5rem;display:flex;flex-direction:column;z-index:60}
.nav-svc-panel a{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .85rem;border-radius:var(--r-sm);color:var(--ink-1);text-decoration:none;transition:background var(--t)}
.nav-svc-panel a:hover,.nav-svc-panel a:focus-visible{background:var(--surface-3);outline:none}
.nav-svc-panel .np-t{font-family:var(--font-body);font-weight:600;font-size:.9375rem;color:var(--ink-0)}
.nav-svc-panel .np-d{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.nav-cta .btn{white-space:nowrap}
/* Header CTA only — the site-wide .btn focus ring is left alone. */
.nav .btn:focus-visible{outline-color:var(--accent-text)}
.nav-mobile{display:none}

/* mobile disclosure nav */
.nav-burger{display:none}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:block;position:relative}
  .nav-burger summary{list-style:none;display:flex;flex-direction:column;gap:4px;background:rgba(7,7,26,.35);border:1px solid var(--line-2);border-radius:var(--r-sm);cursor:pointer;padding:9px 8px}
  .nav-burger summary::-webkit-details-marker{display:none}
  .nav-burger summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
  .nav-burger summary span{width:20px;height:1.5px;background:var(--ink-0)}
  .nav-mobile{display:flex;flex-direction:column;gap:.35rem;position:absolute;top:100%;left:0;right:0;background:var(--surface-1);border-bottom:1px solid var(--line-2);padding:1.5rem clamp(20px,5vw,64px);z-index:60}
  .nav-mobile a{color:var(--ink-1);font-family:var(--font-body);font-size:1.0625rem;padding:.55rem 0;text-decoration:none}
  .nav-mobile a[aria-current="page"]{color:var(--ink-0)}
  .nav-mobile a:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px;color:var(--ink-0)}
  .nav-mobile .nm-group{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:.9rem 0 .1rem}
  .nav-mobile .btn{margin-top:1rem}
}

/* document body */
.doc{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,110px) clamp(20px,5vw,64px) clamp(56px,8vw,120px)}
.doc-eyebrow{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.doc-eyebrow::before{content:"";width:28px;height:1px;background:var(--accent-text)}
.doc h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.25rem,5vw,3.5rem);line-height:1.04;letter-spacing:-.035em;color:var(--ink-0);margin:1.25rem 0 0}
.doc-meta{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:1.25rem 0 0}
.doc-lead{font-family:var(--font-body);font-size:1.125rem;line-height:1.65;color:var(--ink-2);max-width:64ch;margin:1.75rem 0 0;text-wrap:pretty}
.doc section{margin-top:clamp(40px,5vw,64px)}
.doc h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,2.4vw,1.875rem);letter-spacing:-.02em;color:var(--ink-0);margin:0 0 1rem;scroll-margin-top:88px}
.doc h3{font-family:var(--font-display);font-weight:700;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink-0);margin:1.75rem 0 .6rem}
.doc p{font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;color:var(--ink-1);max-width:68ch;margin:0 0 1.1rem;text-wrap:pretty}
.doc ul,.doc ol{margin:0 0 1.1rem;padding-left:1.25rem;max-width:68ch}
.doc li{font-family:var(--font-body);font-size:1.0625rem;line-height:1.7;color:var(--ink-1);margin:0 0 .5rem}
.doc strong{color:var(--ink-0);font-weight:600}
.doc code{font-family:var(--font-mono);font-size:.9em;color:var(--ink-0);overflow-wrap:anywhere;word-break:break-word}
.doc hr{border:0;border-top:1px solid var(--line-2);margin:clamp(40px,5vw,64px) 0}
.doc-note{border-left:2px solid var(--line-3);padding:.25rem 0 .25rem 1.1rem;color:var(--ink-2);font-size:.9375rem;line-height:1.6;max-width:66ch}
.doc a{color:var(--accent-text)}
.doc a:hover{color:#fff}
/* legal metadata: definition list for company / registration details */
.doc-dl{margin:0 0 1.1rem;max-width:68ch;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:.6rem 1.5rem}
.doc-dl dt{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.7;padding-top:.15rem}
.doc-dl dd{font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--ink-1);margin:0;overflow-wrap:break-word}
@media(max-width:520px){.doc-dl{grid-template-columns:1fr;gap:.15rem 0}.doc-dl dd{margin-bottom:.85rem}}

/* footer */
.footer{border-top:1px solid var(--line-2);padding:clamp(48px,6vw,80px) clamp(20px,5vw,64px) 2.5rem;max-width:var(--maxw);margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.2fr 2fr;gap:3rem}
.footer-brand img{height:16px}
.footer-brand p{color:var(--ink-3);font-size:.9375rem;line-height:1.6;max-width:34ch;margin:1.1rem 0 0}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
/* align-items:flex-start, not the default stretch: these anchors are flex items,
   so blockification was overriding the display:inline-block that tokens/base.css
   sets on .footer-col a, and every link filled the whole column. The hit area
   then covered empty space far to the right of the text. Starting them keeps the
   clickable box on the words; base.css's padding-block holds the 24px target. */
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:.85rem}
.footer-col .mono{color:var(--ink-3);margin-bottom:.3rem}
.footer-col a{color:var(--ink-2);font-size:.9375rem;text-decoration:none}
.footer-col a:hover{color:var(--ink-0)}
.footer-col a:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:2px;color:var(--ink-0)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:clamp(40px,5vw,72px);padding-top:1.5rem;border-top:1px solid var(--line-1)}
.footer-bottom .mono{color:var(--ink-3)}
@media(max-width:860px){.footer-top{grid-template-columns:1fr}.footer-cols{grid-template-columns:1fr 1fr}}

/* 404 */
.notfound{max-width:var(--maxw);margin:0 auto;padding:clamp(64px,11vw,140px) clamp(20px,5vw,64px) clamp(72px,12vw,160px);display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.notfound-eyebrow{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.18em;color:var(--ink-3)}
.notfound h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.25rem,5vw,3.5rem);letter-spacing:-.035em;line-height:1.04;color:var(--ink-0);margin:0}
.notfound p{font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;color:var(--ink-2);max-width:42ch;margin:0;text-wrap:pretty}
.notfound-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.75rem}
@media(max-width:400px){.notfound-actions{flex-direction:column;align-items:stretch;width:100%}.notfound-actions .btn{width:100%}}