/* IronArch Brand System — site styles
   Tokens mirror the palette documented on the page itself. */

:root {
  /* Primary palette */
  --blue-100: #2E69FF;
  --blue-60: #C0D2FF;
  --blue-30: #EAF0FF;
  --navy-100: #001445;
  --navy-60: #666F87;
  --navy-30: #B2B8C7;
  /* Accents */
  --yellow-100: #FDE570;
  --verdigris-100: #56BDBD;
  --pink-100: #FF6978;
  /* Surfaces & hairlines */
  --surface-page: #EDEFF4;
  --surface-tint: #F6F8FC;
  --hairline: #E1E6F0;
  --hairline-soft: #EDEFF4;
  /* Feedback primitives — same names/values as the Design System's tokens */
  --green-feedback: #157A55;
  --red-feedback: #C62828;
  /* Feedback chrome (not part of the brand palette) */
  --ok-strong: #17714B; /* AAA badges: the design's #1F8A5B fails AA at 11px */
  --ok-border: #CDE7DA;
  --ok-surface: #F4FBF7;
  --ok-hairline: #E7F2EC;
  --err-border: #F1D8D8;
  --err-surface: #FCF5F5;
  --err-hairline: #F5E3E3;
  /* Type */
  --font-display: 'Merriweather', serif;
  --font-sans: 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); font-family: var(--font-sans); }
a { color: var(--blue-100); }
a:hover { color: var(--navy-100); }

.material-symbols-sharp { font-family: 'Material Symbols Sharp'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ---------- Navigation ---------- */
.ia-scroll { scroll-margin-top: 78px; }
.ia-navtoggle { display: none; }
.ia-navtoggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: #fff; }
.ia-navtoggle:hover { background: rgba(255, 255, 255, .16) !important; }
.ia-navsheet-grp { display: block; text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--navy-100); padding: 11px 22px; }
.ia-navsheet-grp:hover { background: #F0F3F8; color: var(--navy-100); }
.ia-navsheet-sub { display: block; text-decoration: none; font-family: var(--font-sans); font-size: 13.5px; color: var(--navy-60); padding: 8px 22px 8px 34px; }
.ia-navsheet-sub:hover { background: #F0F3F8; color: var(--navy-100); }
.ia-tocitem { display: block; text-decoration: none; font-family: var(--font-sans); font-size: 13px; color: var(--navy-60); padding: 6px 12px; border-radius: 6px; line-height: 1.35; }
.ia-tocitem:hover { color: var(--navy-100); background: var(--blue-30); }
.ia-tocsub { font-size: 12px; padding-left: 12px; color: var(--navy-100); }
.ia-tocmain { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--navy-100); }
.ia-tocdiv { height: 1px; background: var(--hairline); margin: 12px 12px 10px; }
.tocon { color: #FFFFFF !important; background: var(--blue-100); font-weight: 600 !important; }
.tocon:hover { color: #FFFFFF !important; background: #1E4FD0 !important; }

/* ---------- Page structure ---------- */
.ia-group { box-sizing: border-box; border-radius: 16px; background-color: var(--surface-tint); display: inline-block; width: 100%; }
.ia-header { padding: 64px; border-radius: 16px; background-color: var(--navy-100); width: 100%; }
.ia-part { background: var(--blue-100); padding: 30px 64px; position: relative; overflow: hidden; width: 100%; border-radius: 16px 16px 0 0; }
.ia-sec { padding: 52px 64px; width: 100%; border-bottom: 1px solid var(--hairline-soft); }

/* ---------- Typography ---------- */
.ia-h1 { font-family: var(--font-display); font-weight: 900; font-size: 58px; line-height: 1.03; color: #FFFFFF; margin: 0 0 20px; letter-spacing: -.015em; max-width: 16ch; }
.ia-h2 { font-family: var(--font-display); font-weight: 900; font-size: 38px; color: #fff; margin: 0; letter-spacing: -.01em; }
.ia-h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy-100); margin: 0 0 8px; }
.ia-lead { font-size: 15px; line-height: 1.55; color: var(--navy-60); margin: 0 0 28px; max-width: 72ch; }
.ia-note { font-size: 12px; color: var(--navy-60); margin-top: 2px; line-height: 1.4; }

/* ---------- Components ---------- */
.ia-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ia-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.ia-card { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: #fff; }
.ia-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: var(--blue-100); color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 7px; }
.ia-btn-ghost { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; background: #fff; color: var(--navy-100); border: 1px solid #D5DBE7; font-family: var(--font-sans); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 7px; }
.ia-tag { font-family: var(--font-sans); font-size: 11px; color: var(--navy-60); background: #F0F3F8; border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 10px; }
.ia-spec-chip { font-family: var(--font-sans); font-size: 12px; color: var(--navy-100); background: #fff; border: 1px solid var(--blue-60); border-radius: 6px; padding: 7px 13px; }
.ia-icontile { width: 76px; height: 76px; border: 1px solid var(--hairline-soft); border-radius: 12px; background: var(--surface-tint); display: flex; align-items: center; justify-content: center; }
.ia-iconimg { width: 38px; height: 38px; display: block; }
.ia-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.ia-do-card { border: 1px solid var(--ok-border); border-radius: 10px; overflow: hidden; background: #fff; }
.ia-dont-card { border: 1px solid var(--err-border); border-radius: 10px; overflow: hidden; background: #fff; }
.ia-do-cap { padding: 14px 18px; border-top: 1px solid var(--ok-hairline); font-size: 13px; line-height: 1.5; color: var(--navy-60); }
.ia-dont-cap { padding: 14px 18px; border-top: 1px solid var(--err-hairline); font-size: 13px; line-height: 1.5; color: var(--navy-60); }

/* ---------- Text styles ---------- */
.ia-h4 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy-100); margin: 0; }
.ia-h5 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-100); }
.ia-h6 { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy-100); }
.ia-label { font-size: 13px; font-weight: 600; color: var(--navy-100); }
.ia-body { font-size: 14px; line-height: 1.55; color: var(--navy-60); }
.ia-body-sm { font-size: 13.5px; color: var(--navy-60); line-height: 1.55; }
.ia-caption { font-family: var(--font-sans); font-size: 11px; color: var(--navy-60); }
.ia-caption-dim { font-family: var(--font-sans); font-size: 11px; color: var(--navy-30); }
.ia-tile-cap { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--navy-60); }
.ia-tile-cap-dim { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--navy-30); }
.ia-eyebrow { font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-100); }

/* ---------- More components ---------- */
.ia-symbol-lg { font-size: 32px; color: var(--navy-100); }
.ia-btn .material-symbols-sharp, .ia-btn-ghost .material-symbols-sharp { font-size: 17px; }
.ia-btn-lg { gap: 8px; font-size: 14px; padding: 11px 18px; border-radius: 8px; }
.ia-card-sm { border: 1px solid var(--hairline); border-radius: 10px; background: #fff; overflow: hidden; }
.ia-card-foot { padding: 14px 18px; border-top: 1px solid var(--hairline); }
.ia-panel { border: 1px solid var(--hairline); border-radius: 10px; padding: 26px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.ia-dl-cell { background: #fff; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.ia-icontile-dash { width: 76px; height: 76px; border: 1px dashed var(--blue-60); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.ia-icontile-dash .material-symbols-sharp { font-size: 30px; color: var(--blue-60); }
.ia-lockup { width: 100%; max-width: 300px; height: auto; display: block; }
.ia-coin { position: relative; flex-shrink: 0; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; }
.ia-coin-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ia-coin-title { font-family: var(--font-sans); font-weight: 700; font-size: 10px; color: var(--navy-100); }
.ia-coin-sub { font-family: var(--font-sans); font-weight: 400; font-size: 5.5px; color: var(--navy-60); line-height: 1.2; text-align: center; }
.ia-step-num { font-family: var(--font-display); font-weight: 900; font-size: 20px; color: var(--blue-100); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .ia-navtoggle { display: flex !important; }
  .ia-sidebar { display: none !important; }
  .ia-layout { display: block !important; padding: 0 14px !important; }
}
@media (max-width: 820px) {
  .ia-navinner { padding: 13px 20px !important; }
  .ia-header { padding: 44px 26px 34px !important; }
  .ia-h1 { font-size: 36px !important; }
  .ia-part { padding: 22px 26px !important; }
  .ia-h2 { font-size: 30px !important; }
  .ia-sec { padding: 42px 26px !important; }
  .ia-h3 { font-size: 23px !important; }
  .ia-grid2, .ia-grid3 { grid-template-columns: 1fr !important; }
  .ia-tokrow { grid-template-columns: 22px 1fr auto !important; }
  .ia-tokrole { display: none !important; }
  .ia-usebanner { padding: 32px 26px !important; }
  .ia-useh { font-size: 28px !important; }
}
@media (max-width: 600px) {
  .ia-cswatch { width: 62px !important; height: 54px !important; }
  .ia-crow-pad { padding: 0 14px !important; }
  .ia-typesample { max-width: 62vw; }
  .ia-usebanner { padding: 30px 22px !important; }
  .ia-useh { font-size: 26px !important; }
}
@media (max-width: 480px) {
  .ia-header, .ia-part, .ia-sec { padding-left: 18px !important; padding-right: 18px !important; }
  .ia-h1 { font-size: 29px !important; }
  .ia-h2 { font-size: 26px !important; }
}