/* The security page (3 November 2026, the founder: "it should be wow"). A dark hero with seven rings, one per layer of
   protection, around the shield; the stats lift over its edge; the layers stack along a line; the session runs as a
   timeline; the roadmap shows its status in the open. Light and dark themes through the site's tokens; the motion stops
   for anyone who asks for less. */
.sec-page{--sec-ink:#061d2e;--sec-warm:#ff6a52;--sec-progress:#b7791f}
:root[data-theme=dark] .sec-page{--sec-progress:#f6c453}

/* The hero */
.sec-hero{position:relative;overflow:hidden;color:#fff;padding:clamp(48px,8vw,112px) 0 clamp(88px,10vw,140px);background:linear-gradient(160deg,#061d2e 0%,#082e47 55%,#0b1f30 100%)}
.sec-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 380px at 6% 92%,rgba(62,127,193,.30),transparent 60%),radial-gradient(480px 300px at 50% 120%,rgba(121,87,173,.22),transparent 60%)}
.sec-hero-glow::after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%)}
.sec-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,72px);align-items:center}
.sec-hero .breadcrumb,.sec-hero .breadcrumb a{color:rgba(255,255,255,.72)}
.sec-hero .breadcrumb .icon{stroke:rgba(255,255,255,.5)}
.sec-hero .eyebrow{color:#ffb4a8}
.sec-hero h1{margin:.28em 0 .32em;color:#fff;font-size:clamp(38px,5.6vw,72px);line-height:1.02;letter-spacing:-.025em;max-width:13ch;background:linear-gradient(100deg,#fff 0%,#fff 55%,#ffc2b6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-lead{margin:0;max-width:44ch;color:rgba(255,255,255,.84);font-size:clamp(17px,1.55vw,20px);line-height:1.6}
.sec-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.sec-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0}
.sec-badges li{padding:8px 13px;border-radius:999px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Seven rings around the shield */
.sec-orbit{position:relative;width:min(440px,100%);aspect-ratio:1;margin-inline:auto}
.sec-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 38%,transparent);animation:secSpin 40s linear infinite}
.sec-ring::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:currentColor;box-shadow:0 0 14px currentColor,0 0 4px currentColor}
.sec-ring.r1{inset:0;color:#ff6a52;animation-duration:64s}
.sec-ring.r2{inset:5%;color:#8dbdfa;border-style:dashed;animation-duration:48s;animation-direction:reverse}
.sec-ring.r3{inset:10%;color:#77d4a7;animation-duration:38s}
.sec-ring.r4{inset:15%;color:#c0a2ec;border-style:dashed;animation-duration:30s;animation-direction:reverse}
.sec-ring.r5{inset:20%;color:#f49b9f;animation-duration:24s}
.sec-ring.r6{inset:25%;color:#ffd27a;border-style:dashed;animation-duration:19s;animation-direction:reverse}
.sec-ring.r7{inset:30%;color:#fff;animation-duration:15s}
.sec-core{position:absolute;inset:35%;display:grid;place-items:center;border-radius:50%;color:#fff;background:radial-gradient(circle at 32% 28%,#ff8a72 0%,#dc240c 58%,#8f1606 100%);animation:secPulse 4.2s ease-in-out infinite}
.sec-core .icon{width:46%;height:46%;stroke:#fff;stroke-width:1.6}
.sec-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;opacity:.8;animation:secFloat 6s ease-in-out infinite}
.sec-spark.s1{top:12%;left:8%}
.sec-spark.s2{top:78%;left:88%;animation-delay:-2s}
.sec-spark.s3{top:90%;left:22%;animation-delay:-4s}
@keyframes secSpin{to{transform:rotate(360deg)}}
@keyframes secPulse{0%,100%{box-shadow:0 0 0 10px rgba(220,36,12,.16),0 0 54px rgba(220,36,12,.5)}50%{box-shadow:0 0 0 20px rgba(220,36,12,.06),0 0 90px rgba(220,36,12,.66)}}
@keyframes secFloat{0%,100%{transform:translateY(0);opacity:.8}50%{transform:translateY(-12px);opacity:.35}}

/* The stats lift over the hero's edge */
.sec-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:-56px}
.sec-stat{padding:24px 22px;border-radius:22px;background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--shadow)}
.sec-stat strong{display:block;font-size:clamp(42px,5vw,62px);font-weight:800;line-height:1;letter-spacing:-.03em;background:linear-gradient(135deg,var(--brand) 0%,#ff8a5c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-stat span{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sec-stat p{margin:12px 0 0;color:var(--text);font-size:15px;line-height:1.5}

/* Seven layers along a line */

/* Answers: the first five show, the rest wait behind Show more (4 November 2026) */
.sec-answers .faq-list[hidden]{display:none}
.sec-answers .faq-column{min-width:0}
.sec-answers .faq-more-toggle{display:flex;justify-content:flex-start;margin-top:22px}

/* The session, step by step */
.sec-journey-band{background:var(--surface);border-block:1px solid var(--line)}
/* The line runs from the first circle's centre to the last one's (a column's width short of the whole), and the beam
   fills it to the step reached (--sec-p, from secAnimate in app.js). */
.sec-journey{--n:6;--gap:18px;--span:calc(100% - (100% - (var(--n) - 1) * var(--gap)) / var(--n));position:relative;list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gap)}
.sec-journey-5{--n:5}
.sec-journey::before,.sec-journey::after{content:"";position:absolute;top:21px;left:22px;height:3px;border-radius:3px}
.sec-journey::before{width:var(--span);background:color-mix(in srgb,var(--muted) 22%,transparent)}
.sec-journey::after{width:calc(var(--span) * var(--sec-p,1));background:linear-gradient(90deg,var(--brand),#ff7a5c 45%,var(--research));box-shadow:0 0 14px color-mix(in srgb,var(--brand) 55%,transparent);transition:width 1.05s cubic-bezier(.65,0,.35,1)}
.sec-journey li{position:relative;transition:opacity .5s var(--ease)}
.sec-journey.is-live li:not(.is-on){opacity:.5}
.sec-step{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--brand);font-weight:800;background:var(--surface-raised);border:2px solid var(--brand);box-shadow:0 0 0 6px var(--surface);transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.sec-journey li.is-on .sec-step{color:#fff;background:linear-gradient(135deg,#ff6a52,var(--brand));box-shadow:0 0 0 6px var(--surface),0 8px 24px color-mix(in srgb,var(--brand) 38%,transparent)}
.sec-journey li.is-current .sec-step{transform:scale(1.12)}
.sec-journey li.is-current .sec-step::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--brand);animation:secPing 1.25s ease-out infinite}
.sec-journey li.is-current h3{color:var(--brand)}
.sec-journey h3{margin:16px 0 6px;font-size:16px;line-height:1.3;transition:color .45s var(--ease)}
.sec-journey p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
@keyframes secPing{from{transform:scale(1);opacity:.75}to{transform:scale(1.7);opacity:0}}

/* Tiles */
.sec-heading h2{letter-spacing:-.02em}
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.sec-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sec-grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sec-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sec-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sec-tile{padding:24px;border-radius:20px;background:var(--surface-raised);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.sec-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.sec-tile:hover .sec-tile-icon{color:#fff;background:linear-gradient(135deg,#ff6a52,var(--brand))}
.sec-tile-icon{transition:background .35s var(--ease),color .35s var(--ease)}
.sec-tile-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;color:var(--brand);background:var(--tint)}
.sec-tile-icon .icon{width:22px;height:22px}
.sec-tile h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.sec-tile p{margin:0;color:var(--muted);line-height:1.6}

/* The answers keep the site's question list */
.sec-answers .faq-list summary{font-weight:700}

/* What comes next, in the open */
.sec-roadmap{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sec-roadmap li{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--surface-raised);border:1px solid var(--line)}
.sec-status{flex:none;min-width:112px;padding:7px 12px;border-radius:999px;text-align:center;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sec-roadmap .is-done .sec-status{color:var(--outreach);background:color-mix(in srgb,var(--outreach) 16%,transparent)}
.sec-roadmap .is-progress .sec-status{color:var(--sec-progress);background:color-mix(in srgb,var(--sec-progress) 16%,transparent)}
.sec-roadmap .is-planned .sec-status{color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.sec-roadmap-text{font-weight:600;line-height:1.45}

/* Report a weakness */
.sec-page .sec-report{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:28px;align-items:center;padding:clamp(28px,4.5vw,52px);border-radius:28px;color:#fff;border:0;background:radial-gradient(620px 300px at 92% 0%,rgba(255,255,255,.2),transparent 60%),linear-gradient(135deg,#dc240c 0%,#a51a07 55%,#7d1405 100%)}
.sec-page .sec-report .eyebrow{color:rgba(255,255,255,.82)}
.sec-page .sec-report .btn{background:#fff;color:#a51a07;border-color:#fff}
.sec-page .sec-report .btn:hover,.sec-page .sec-report .btn:focus-visible{background:#fff1ee;color:#7d1405;border-color:#fff1ee}
/* 4 November 2026: the morph fill that slides under every button on hover is the brand red; on this white button in the red
   band it hid the words. The band's button keeps its light hover; the fill stays off here. */
.sec-page .sec-report .btn-morph::before{display:none}
.sec-page .sec-report .btn:hover svg,.sec-page .sec-report .btn:hover .icon{color:#7d1405}
.sec-page .sec-report h2{margin:.3em 0 .4em;color:#fff;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em}
.sec-page .sec-report p{margin:0;max-width:62ch;color:rgba(255,255,255,.9);line-height:1.65}
.sec-report-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sec-report-txt{color:#fff;opacity:.85;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-decoration:underline;text-underline-offset:3px}
.sec-report-txt:hover{opacity:1}

@media (max-width:1100px){
  .sec-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-grid-4,.sec-grid-5,.sec-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-journey,.sec-journey-5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .sec-journey::before,.sec-journey::after{display:none}
}
@media (max-width:900px){
  .sec-hero-grid{grid-template-columns:1fr}
  .sec-hero h1{max-width:none}
  .sec-orbit{width:min(320px,82vw);order:-1}
  .sec-page .sec-report{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sec-stats{gap:12px;margin-top:-44px}
  .sec-stat{padding:18px 16px}
  .sec-stat p{font-size:14px}
  .sec-journey,.sec-journey-5{grid-template-columns:1fr;row-gap:0}
  .sec-grid-4,.sec-grid-5,.sec-grid-3,.sec-grid-2{grid-template-columns:1fr}
  .sec-journey li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:22px}
  .sec-journey li::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:3px;border-radius:3px;background:color-mix(in srgb,var(--muted) 22%,transparent);transition:background .6s var(--ease)}
  .sec-journey li.is-on:not(.is-current)::before{background:linear-gradient(var(--brand),#ff7a5c)}
  .sec-journey li:last-child::before{display:none}
  .sec-journey h3{margin:10px 0 4px}
  .sec-journey p{grid-column:2}
  .sec-roadmap li{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .sec-ring,.sec-core,.sec-spark,.sec-journey li.is-current .sec-step::after{animation:none!important}
  .sec-journey::after,.sec-step,.sec-journey li{transition:none}
}