/* ============================================================
   SENTINEL TEST & TAG — shared styles for content subpages.
   Mirrors the homepage design system (navy + compliance-green).
   ============================================================ */
:root{
  --ink:#0E1B2E; --ink-2:#15263B; --ink-line:rgba(255,255,255,.12);
  --paper:#ECEEEA; --card:#FFFFFF;
  --cleared:#12A150; --cleared-deep:#0B7A3B; --cleared-soft:#E3F4EA; --cleared-bright:#5FE39A;
  --amber:#E4A11B;
  --text:#141F2C; --muted:#5B6673; --line:#D8DCD4;
  --shadow:0 1px 2px rgba(14,27,46,.06), 0 12px 32px -12px rgba(14,27,46,.22);
  --r:14px; --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--text);
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Space Grotesk",sans-serif; line-height:1.1; margin:0; letter-spacing:-.02em}
a{color:var(--cleared-deep)}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:"IBM Plex Mono",monospace}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cleared-deep)}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:16px;
  padding:13px 22px; border-radius:11px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .18s ease}
.btn-go{background:var(--cleared); color:#fff; box-shadow:0 8px 20px -8px rgba(18,161,80,.6)}
.btn-go:hover{background:var(--cleared-deep)}
.btn-ghost{background:transparent; border-color:rgba(255,255,255,.28); color:#fff}
.btn-ghost:hover{border-color:#fff}
.btn-outline{background:#fff; border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--ink)}

/* header */
header{position:sticky; top:0; z-index:40; background:rgba(14,27,46,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--ink-line)}
.nav{display:flex; align-items:center; gap:24px; height:66px; color:#fff}
.brand{display:flex; align-items:center; gap:10px; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:19px; color:#fff; text-decoration:none}
.brand .sub{font-weight:400; opacity:.7; margin-left:-3px}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:15px}
.nav-links a{color:rgba(255,255,255,.82); text-decoration:none}
.nav-links a:hover{color:#fff}
.nav .btn{padding:10px 18px; font-size:15px}
@media(max-width:860px){ .nav-links{display:none} }

/* hero */
.hero{background:radial-gradient(120% 90% at 88% -10%, rgba(18,161,80,.16), transparent 55%), linear-gradient(180deg,#0E1B2E,#0B1626);
  color:#fff; padding:70px 0 76px}
.hero h1{font-size:clamp(32px,5vw,54px); font-weight:700; max-width:16ch}
.hero p.lede{font-size:19px; color:rgba(255,255,255,.8); max-width:46ch; margin:20px 0 28px}
.hero .eyebrow{color:var(--cleared-bright)}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.crumbs{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:rgba(255,255,255,.6); margin-bottom:14px}
.crumbs a{color:rgba(255,255,255,.75)}

/* sections */
section{padding:64px 0}
.sec-head{max-width:44em; margin-bottom:36px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:12px}
.sec-head p{color:var(--muted); margin:12px 0 0; font-size:18px}
.prose{max-width:70ch}
.prose h2{font-size:26px; margin:36px 0 10px}
.prose h3{font-size:20px; margin:26px 0 8px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 18px; padding-left:20px}
.prose li{margin:6px 0}
.prose .lead{font-size:19px; color:var(--muted)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){ .grid,.grid.two{grid-template-columns:1fr} }
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
.card h3{font-size:20px; margin-bottom:8px}
.card p{margin:0; color:var(--muted); font-size:15.5px}
.card .std{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--muted); margin-top:10px; display:inline-block; background:var(--paper); padding:3px 8px; border-radius:6px}
.price{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:22px; color:var(--ink); margin:6px 0}

/* on-ink section */
.on-ink{background:var(--ink); color:#fff}
.on-ink .sec-head h2{color:#fff}
.on-ink .sec-head p{color:rgba(255,255,255,.72)}
.on-ink .card{background:var(--ink-2); border-color:var(--ink-line)}
.on-ink .card h3{color:#fff}
.on-ink .card p{color:rgba(255,255,255,.68)}

/* faq */
.faq{display:grid; max-width:800px}
details{border-bottom:1px solid var(--line); padding:6px 0}
summary{cursor:pointer; list-style:none; padding:16px 0; font-family:"Space Grotesk",sans-serif; font-weight:500; font-size:18px;
  display:flex; justify-content:space-between; align-items:center}
summary::-webkit-details-marker{display:none}
summary .pm{font-family:"IBM Plex Mono",monospace; color:var(--cleared-deep)}
details p{margin:0 0 18px; color:var(--muted); font-size:16px}

/* footer */
footer{background:var(--ink); color:rgba(255,255,255,.72); padding:56px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px}
footer h4{font-family:"Space Grotesk",sans-serif; color:#fff; font-size:15px; margin:0 0 14px}
footer a{color:rgba(255,255,255,.72); text-decoration:none; display:block; margin-bottom:9px; font-size:15px}
footer a:hover{color:#fff}
.foot-note{border-top:1px solid var(--ink-line); margin-top:36px; padding-top:20px; font-family:"IBM Plex Mono",monospace;
  font-size:12px; color:rgba(255,255,255,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}
@media(max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} }

:focus-visible{outline:3px solid var(--cleared); outline-offset:2px; border-radius:4px}
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} html{scroll-behavior:auto} }