/* IronCastle — shared brand tokens & chrome */
:root{
  --bg:#fafaf7;--bg-2:#f3f2ec;--bg-card:#ffffff;
  --line:rgba(20,28,44,.10);--line-2:rgba(20,28,44,.18);
  --ink:#0a1424;--ink-2:#2c3850;--ink-3:#5a667c;--ink-4:#8b94a6;
  --red:#e23b54;--red-2:#c92847;--red-soft:#fdecef;
  --crit:#d6213a;--high:#c4571a;--med:#9c7a06;--low:#1a6fa8;--ok:#157f3d;
  --sans:"Inter Tight",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --serif:"Fraunces",serif;
  --max:1240px;--pad:40px;
}
@media(max-width:700px){:root{--pad:20px}}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}

/* rail */
.rail{display:flex;align-items:center;max-width:var(--max);margin:0 auto;padding:22px var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line)}
.rail .dot{width:6px;height:6px;border-radius:999px;background:var(--red);margin-right:8px;display:inline-block}
.rail .sp{margin:0 16px;color:var(--ink-4)}
.rail .end{margin-left:auto}

/* nav */
.nav{max-width:var(--max);margin:0 auto;padding:28px var(--pad);display:flex;align-items:center;gap:40px}
.brand{display:inline-flex;align-items:center;gap:12px}
.wm{font-weight:500;font-size:22px;letter-spacing:-0.02em;color:var(--ink)}
.nav-links{display:flex;gap:32px;margin:0 auto}
.nav-links a{font-size:14px;color:var(--ink-2);font-weight:400;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a:hover,.nav-links a.active{border-bottom-color:var(--ink);color:var(--ink)}
.nav-cta{display:flex;gap:14px;align-items:center}
@media(max-width:880px){.nav-links{display:none}.nav-cta a:first-child{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:4px;font-size:14px;font-weight:500;letter-spacing:-0.005em;border:1px solid transparent;transition:all .15s ease;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{background:#000}
.btn-ghost{color:var(--ink);border-color:var(--line-2);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-text{color:var(--ink);border:none;padding:0;height:auto;border-bottom:1px solid var(--ink);border-radius:0;padding-bottom:1px}

/* page header */
.phead{max-width:var(--max);margin:0 auto;padding:80px var(--pad) 40px;border-bottom:1px solid var(--line)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow .num{color:var(--red-2);font-weight:500;padding-right:12px;margin-right:4px;border-right:1px solid var(--line-2)}
.h1{font-weight:300;font-size:clamp(48px,7vw,96px);line-height:.96;letter-spacing:-0.045em;margin:24px 0 0;max-width:18ch;text-wrap:balance}
.h1 em{font-style:italic;font-weight:400;color:var(--red-2);font-family:var(--serif);letter-spacing:-0.02em}
.lede{font-size:19px;line-height:1.5;color:var(--ink-2);max-width:60ch;margin:32px 0 0}

.h2{font-weight:300;font-size:clamp(32px,4.4vw,56px);line-height:1;letter-spacing:-0.035em;margin:0;text-wrap:balance;max-width:24ch}
.h2 em{font-style:italic;font-weight:400;color:var(--red-2);font-family:var(--serif)}
.h3{font-size:22px;font-weight:400;letter-spacing:-0.02em;margin:0}

.section{max-width:var(--max);margin:0 auto;padding:96px var(--pad)}
.section-head{display:grid;grid-template-columns:.5fr 1fr;gap:60px;align-items:end;margin-bottom:64px}
@media(max-width:800px){.section-head{grid-template-columns:1fr;gap:24px;margin-bottom:40px}}
.sec-meta{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.sec-meta b{color:var(--red-2);display:block;font-weight:500;margin-bottom:8px}
.sec-lede{font-size:17px;line-height:1.55;color:var(--ink-2);margin-top:20px;max-width:52ch}

/* footer */
footer.foot{max-width:var(--max);margin:60px auto 0;padding:60px var(--pad) 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;border-top:1px solid var(--line)}
@media(max-width:800px){footer.foot{grid-template-columns:1fr 1fr}}
.foot-brand .desc{color:var(--ink-3);font-size:14px;line-height:1.55;margin:18px 0 22px;max-width:32ch}
.foot-brand .iso{display:flex;gap:8px;flex-wrap:wrap}
.iso span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 10px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2)}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink-3);margin:0 0 18px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.foot-col a{color:var(--ink-2);font-size:14px}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{max-width:var(--max);margin:0 auto;padding:24px var(--pad) 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--ink-3);font-size:13px;gap:12px;flex-wrap:wrap}
.foot-bottom a{color:var(--ink-2)}

/* utility cards/lists */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
@media(max-width:700px){.grid-2{grid-template-columns:1fr}}
.cell{padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column}
.grid-3 .cell:nth-child(3n){border-right:none}
.grid-2 .cell:nth-child(2n){border-right:none}
@media(max-width:900px){.grid-3 .cell{border-right:none}}
@media(max-width:700px){.grid-2 .cell{border-right:none}}
.cell .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:24px}
.cell .p{color:var(--ink-2);font-size:15px;line-height:1.55;margin:14px 0 22px}
.cell ul{list-style:none;padding:0;margin:auto 0 0;display:flex;flex-direction:column;gap:8px}
.cell li{font-size:13px;color:var(--ink-3);padding-left:16px;position:relative}
.cell li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--ink-3)}

/* fcta */
.fcta{max-width:var(--max);margin:80px auto 0;padding:100px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1.4fr auto;gap:60px;align-items:end}
@media(max-width:800px){.fcta{grid-template-columns:1fr;gap:32px}}
.fcta-h{font-size:clamp(40px,5.6vw,80px);font-weight:300;letter-spacing:-0.04em;line-height:.96;margin:0;max-width:14ch}
.fcta-h em{font-style:italic;color:var(--red-2);font-weight:400;font-family:var(--serif)}
.fcta .ctas{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.fcta .ctas .btn{height:52px;padding:0 28px;font-size:15px}
.fcta .ctas .meta{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* shield mark inline */
.mark{flex-shrink:0}

/* ============ Dark theme — Cursor Dark Midnight palette ============ */
/* Sitewide tokens flip when body[data-mode="dark"] is set. Page-specific
   dark overrides (product specimen, charts, etc.) still live in each page's
   inline style block — they read these tokens and only need to override
   structure/shadows, not colours. */
body[data-mode="dark"]{
  --bg:        #0d1117;          /* editor / page background */
  --bg-2:      #161b22;          /* elevated surface — tabs, cards, dropdowns */
  --bg-card:   #161b22;
  --line:      rgba(240,246,252,0.08);
  --line-2:    rgba(240,246,252,0.14);

  --ink:       #e6edf3;          /* primary text */
  --ink-2:     #c9d1d9;          /* body text */
  --ink-3:     #8b949e;          /* muted text */
  --ink-4:     #6e7681;          /* placeholder / very faint */

  --red:       #ff4d6a;          /* brand red, brightened for dark contrast */
  --red-2:     #ff6b80;
  --red-soft:  rgba(255,77,106,0.10);

  /* keep severity colors functional on dark — slight brightness lift */
  --crit:      #ff5468;
  --high:      #f08a3e;
  --med:       #d4a627;
  --low:       #4ea8ff;
  --ok:        #3fb968;
}
@media(prefers-color-scheme:dark){
  /* Auto-apply when no explicit data-mode is set */
  body:not([data-mode="light"]):not([data-mode]){
    --bg:        #0d1117;
    --bg-2:      #161b22;
    --bg-card:   #161b22;
    --line:      rgba(240,246,252,0.08);
    --line-2:    rgba(240,246,252,0.14);
    --ink:       #e6edf3;
    --ink-2:     #c9d1d9;
    --ink-3:     #8b949e;
    --ink-4:     #6e7681;
    --red:       #ff4d6a;
    --red-2:     #ff6b80;
    --red-soft:  rgba(255,77,106,0.10);
  }
}

/* ============ Mobile polish (cross-page) ============ */
@media(max-width:880px){
  html,body{overflow-x:hidden;max-width:100vw}
}
@media(max-width:700px){
  /* tighter section rhythm */
  .section{padding:64px var(--pad)}
  .section-head{margin-bottom:32px;gap:16px}
  .phead{padding:60px var(--pad) 36px}
  .h1{font-size:clamp(36px,12vw,56px);line-height:1.0;max-width:14ch;letter-spacing:-0.04em}
  .h2{font-size:clamp(28px,8vw,40px);max-width:18ch;line-height:1.05;letter-spacing:-0.03em}
  .lede{font-size:16.5px;margin-top:20px}
  .sec-lede{font-size:15.5px}

  /* footer + final CTA */
  .fcta{margin-top:60px;padding:64px var(--pad)}
  .fcta-h{font-size:clamp(32px,9vw,46px);max-width:none}
  footer.foot{grid-template-columns:1fr;gap:32px;padding:48px var(--pad) 28px;margin-top:40px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding:20px var(--pad) 28px;font-size:12px}

  /* utility grids — single column on phones */
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-3 .cell,.grid-2 .cell{border-right:none;padding:32px 24px}

  /* horizontal-scroll any table inside .legal (subprocessors, cookies, etc.) */
  .legal table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border:1px solid var(--line);border-radius:4px}
  .legal table thead,.legal table tbody{display:table;width:max-content;min-width:100%}
  .legal table.sp td.nm,.legal table.ck td.nm{min-width:120px}

  /* legal TOC — single column */
  .legal .toc ol{columns:1 !important}

  /* hero buttons stack */
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.hero-ctas .btn-text{justify-content:center;text-align:center}

  /* prevent inline code / mono labels from forcing horizontal scroll */
  code,.mono,pre{word-break:break-word;overflow-wrap:anywhere}
  pre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* tablet refinements */
@media(max-width:880px) and (min-width:701px){
  .section{padding:80px var(--pad)}
  footer.foot{grid-template-columns:1fr 1fr;gap:32px}
}
