/* ============================================================================
   XINNACE v3 — page-security.css
   The "security" artifact's own stylesheet, verbatim, less the 29 chrome rules
   that base.css now owns for every page, and less --maxw / --gutter / --head-h,
   which are shared so the bar and the column do not change between pages.
   Loads AFTER base.css, so everything here wins. Regenerate, do not edit.
   ========================================================================== */


/* ==========================================================================
   XINNACE security & trust — same token system as the other pages.
   Navy on header, hero and footer; body alternates white and grey.

   EDITORIAL RULES carried over from security.php — keep them:
   1. Every statement describes what the platform does TODAY, not the roadmap.
   2. No absolute claims ("nobody", "never", "end to end", "everything").
   3. Where a control does not exist it is NAMED as absent, never softened.
      Do not promote anything out of the "not in place yet" card until the
      control is real AND tested.
   ========================================================================== */

:root{
  --ground:#07111F;
  --surface:#101E31;
  --surface-2:#152640;
  --line:#223651;
  --line-2:#39516D;
  --ink:#F5F8FC;
  --ink-soft:#C9D4E2;
  --ink-faint:#AFBDD0;
  --brand:#12B5AB;
  --brand-2:#0FA39A;
  --on-brand:#041816;
  --eyebrow:#46D0C7;
  --warn:#F59331;
  --ease:cubic-bezier(.22,.61,.36,1);
  --f-display:"Poppins","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.light{
  --ground:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F2F6FA;
  --line:#DCE6EF;
  --line-2:#C3D2E0;
  --ink:#172235;
  --ink-soft:rgba(23,34,53,.72);
  --ink-faint:#617086;
  --eyebrow:#0E8F87;
  --brand:#1C8A83;
  --brand-2:#146D67;
  --on-brand:#FFFFFF;
  --warn:#AF620C;
  background:var(--ground);
  color:var(--ink);
}
.light--white{--ground:#FFFFFF;--surface:#FFFFFF;}
.light--grey{--ground:#EFF3F8;--surface:#FFFFFF;--line:#DCE5EE;}
*,*::before,*::after{box-sizing:border-box;}
body{
  margin:0;background:#07111F;color:#F5F8FC;
  font-family:var(--f-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px;}
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;margin:0;text-wrap:balance;}
h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;}
h2{font-size:clamp(25px,3.1vw,36px);line-height:1.14;}
h3{font-size:20px;letter-spacing:-.022em;line-height:1.3;}
p{margin:0;}
.eyebrow{
  font-family:var(--f-body);font-stretch:75%;font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--eyebrow);
  display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--line-2);flex:none;}
.lede{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.66;color:var(--ink-soft);max-width:70ch;}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.rv.is-in{opacity:1;transform:none;}
/* ---------- hero ---------- */
.phero{position:relative;overflow:hidden;background:#07111F;padding:clamp(50px,6.2vw,82px) 0 clamp(44px,5.4vw,66px);}
.comb{position:absolute;pointer-events:none;color:#12B5AB;}
.comb--r{right:0;top:-26px;width:min(372px,38vw);}
.comb--l{left:0;bottom:-44px;width:min(280px,29vw);}
.comb polygon{transform-box:fill-box;transform-origin:center;
  animation:hexLock 1.05s cubic-bezier(.22,1.06,.36,1) backwards;}
@keyframes hexLock{
  from{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rz,0deg)) scale(.84);}
}
.comb__lit{opacity:0;animation:hexCharge 2.6s ease-out .95s forwards;}
@keyframes hexCharge{0%{opacity:0;}40%{opacity:.85;}100%{opacity:.45;}}
@media (max-width:760px){
  .comb--r{width:196px;top:-40px;opacity:.6;}
  .comb--l{width:142px;bottom:-58px;opacity:.48;}
}
.phero__in{position:relative;display:flex;flex-direction:column;gap:20px;align-items:flex-start;}
/* control summary — the skim line, before the detail */
.chips{display:flex;flex-wrap:wrap;gap:9px;padding-top:8px;list-style:none;margin:0;}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;
  border:1px solid #223651;border-radius:999px;background:#101E31;
  font-family:var(--f-body);font-stretch:75%;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#C9D4E2;
}
.chip svg{width:15px;height:15px;flex:none;color:#12B5AB;}
/* ---------- sections ---------- */
.sec{padding:clamp(56px,6.6vw,88px) 0;scroll-margin-top:calc(var(--head-h) + 10px);}
.sec__head{max-width:74ch;display:flex;flex-direction:column;gap:13px;margin-bottom:clamp(30px,3.8vw,44px);}
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:900px){.tgrid{grid-template-columns:1fr;}}
.tcard{
  background:var(--surface);border:1px solid var(--line);border-radius:15px;
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.tcard:hover{border-color:var(--brand);transform:translateY(-3px);}
.tcard__ico{
  width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--brand) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);
  color:var(--brand);
}
.tcard__ico svg{width:21px;height:21px;}
.tcard > p{font-size:15.4px;color:var(--ink-soft);}
.tcard ul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.tcard li{position:relative;padding-left:18px;font-size:14.6px;color:var(--ink-soft);line-height:1.6;}
.tcard li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:8px;
  background:var(--brand);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);}
.tcard li strong{color:var(--ink);font-weight:600;}
.tcard a{color:var(--brand);font-weight:600;}
/* same specificity trap as .legal a — keep button labels legible */
.tcard .btn--primary{color:#FFFFFF;}
/* The gaps card is deliberately marked in the warning hue and given its own
   section rather than buried at the bottom of a list. */
.tcard--flag{border-color:var(--warn);}
.tcard--flag .tcard__ico{background:color-mix(in srgb,var(--warn) 15%,transparent);
  border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn);}
.tcard--flag li::before{background:var(--warn);}
.tcard--flag:hover{border-color:var(--warn);}
/* callout */
.callout{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.callout__row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .comb polygon{animation:none;}
  .comb__lit{opacity:.42;animation:none;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
.tcard code{font-family:var(--f-body);font-size:.92em;background:var(--surface-2);
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;}