/* Intrados marketing surface. No raw hex here by design: every colour resolves
   through a token in tokens.css. Flat system, no gradient, shadow, blur or glow. */

/* ---- fonts ------------------------------------------------------------- */
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(/assets/fonts/ibm-plex-sans-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/assets/fonts/ibm-plex-arabic-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/assets/fonts/ibm-plex-arabic-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(/assets/fonts/ibm-plex-arabic-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/ibm-plex-mono-500.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---- base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--in-bg);color:var(--in-text);
  font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  font-size:1rem;line-height:1.7;font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
:lang(ar) body,body[dir=rtl]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;font-size:1.0625rem}
h1,h2,h3,h4{font-weight:500;margin:0}
p{margin:0}
a{color:var(--in-accent);text-decoration:none;border-bottom:1px solid var(--in-border)}
a:hover{border-bottom-color:var(--in-accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--in-accent);outline-offset:2px}
img,svg{max-width:100%}
.in-container{max-width:var(--in-container);margin:0 auto;padding:0 24px}
@media(min-width:768px){.in-container{padding:0 40px}}
.in-skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.in-skip:focus{position:fixed;width:auto;height:auto;margin:0;clip:auto;clip-path:none;
  inset-inline-start:24px;top:12px;z-index:10;background:var(--in-surface);color:var(--in-text);
  padding:8px 12px;border:1px solid var(--in-border)}

/* ---- type scale (brand.md) --------------------------------------------- */
.in-display{font-size:2.5rem;font-weight:500;letter-spacing:-.025em;line-height:1.05}
@media(min-width:768px){.in-display{font-size:3.5rem}}
.in-h2{font-size:1.5rem;letter-spacing:-.01em;line-height:1.25}
.in-h3{font-size:1.125rem;line-height:1.35}
.in-lead{font-size:1.125rem;line-height:1.65;color:var(--in-text-secondary)}
.in-small{font-size:.875rem;line-height:1.6;color:var(--in-text-secondary)}
.in-eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--in-text-muted)}
.in-mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.in-prose{max-width:34rem}

/* ---- rhythm ------------------------------------------------------------ */
.in-section{padding:64px 0}
@media(min-width:768px){.in-section{padding:96px 0}}
.in-stack-8>*+*{margin-top:8px}
.in-stack-12>*+*{margin-top:12px}
.in-stack-16>*+*{margin-top:16px}
.in-stack-24>*+*{margin-top:24px}
.in-stack-32>*+*{margin-top:32px}
.in-stack-48>*+*{margin-top:48px}

/* ---- the lit edge: top edge only, one per surface ---------------------- */
.in-surface{
  background:var(--in-surface);
  border:var(--in-hairline-w) solid var(--in-border);
  border-radius:var(--in-radius-card);
  border-top:var(--in-lit-edge-w) solid var(--in-accent-rule);
  padding:24px;
}
/* In RTL the layout mirrors but the lit edge does not: it stays on top. */

/* ---- the notch marker -------------------------------------------------- */
.in-notch-list{list-style:none;padding-left:0;margin:0}
.in-notch-list li{position:relative;padding-left:20px;line-height:1.7}
.in-notch-list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--in-notch)}
[dir=rtl] .in-notch-list li{padding-left:0;padding-right:20px}
[dir=rtl] .in-notch-list li::before{left:auto;right:0}
.in-endmark{display:block;width:8px;height:8px;background:var(--in-notch);margin-top:48px}

/* ---- buttons ----------------------------------------------------------- */
.in-btn{font:500 1rem/1 "IBM Plex Sans","IBM Plex Sans Arabic",sans-serif;border-radius:var(--in-radius-control);
  padding:0 20px;height:44px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border-bottom:none}
.in-btn--primary{background:var(--in-accent);color:var(--in-on-accent);border:none}
.in-btn--primary:hover{border-bottom:none}
.in-btn--secondary{background:transparent;color:var(--in-text-secondary);border:1px solid var(--in-border)}

/* ---- header ------------------------------------------------------------ */
.in-header{border-bottom:1px solid var(--in-border);position:sticky;top:0;background:var(--in-bg);z-index:5}
.in-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.in-logo{display:inline-flex;align-items:center;gap:14px;color:var(--in-text);text-decoration:none;border-bottom:none}
.in-logo__mark{width:32px;height:auto;flex:none}
.in-logo__word{font:500 1.25rem/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em}
.in-header__nav{display:flex;align-items:center;gap:24px}
.in-header__nav a{color:var(--in-text-secondary);border-bottom:none;font-size:.9375rem}
.in-header__nav a:hover{color:var(--in-text)}
@media(max-width:767px){.in-header__nav .in-hide-sm{display:none}}

/* ---- hero, and the Basalt band (used once per page) -------------------- */
.in-band{background:var(--in-band-bg);color:var(--in-band-text)}
.in-band .in-lead,.in-band .in-small{color:var(--in-band-muted)}
.in-band .in-eyebrow{color:var(--in-band-muted)}
.in-band h1,.in-band h2,.in-band h3{color:var(--in-band-text)}
.in-band a:not(.in-btn){color:var(--in-band-text);border-bottom-color:var(--in-band-border)}
.in-hero{padding:96px 0 64px}
@media(min-width:768px){.in-hero{padding:128px 0 96px}}

/* ---- grids ------------------------------------------------------------- */
.in-grid{display:grid;gap:24px}
.in-grid--3{grid-template-columns:1fr}
@media(min-width:768px){.in-grid--3{grid-template-columns:repeat(3,1fr)}}
.in-grid--2{grid-template-columns:1fr}
@media(min-width:768px){.in-grid--2{grid-template-columns:repeat(2,1fr)}}

/* ---- proof band -------------------------------------------------------- */
.in-proof{background:var(--in-panel)}
.in-metric__value{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:2rem;line-height:1.2;font-weight:400;display:block}
.in-metric__caption{font-size:.875rem;color:var(--in-text-secondary);display:block;margin-top:8px}

/* ---- table ------------------------------------------------------------- */
.in-table-wrap{overflow-x:auto}
table.in-table{width:100%;border-collapse:collapse;border-radius:var(--in-radius-table);
  border:1px solid var(--in-border);border-top:var(--in-lit-edge-w) solid var(--in-accent-rule)}
.in-table th,.in-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--in-border);vertical-align:top;font-size:.9375rem}
[dir=rtl] .in-table th,[dir=rtl] .in-table td{text-align:right}
.in-table th{font-weight:500;color:var(--in-text)}
.in-table tbody tr:nth-child(even){background:var(--in-panel)}
.in-table tr:last-child td{border-bottom:none}

/* ---- chip -------------------------------------------------------------- */
.in-chip{display:inline-block;background:var(--in-border);color:var(--in-text-secondary);
  border-radius:var(--in-radius-control);padding:2px 12px;font-size:.8125rem}

/* ---- footer + endorsement --------------------------------------------- */
.in-footer{border-top:1px solid var(--in-border);padding:48px 0}
.in-footer a{color:var(--in-text-secondary);border-bottom:none}
.in-footer a:hover{color:var(--in-text)}
.in-endorse{margin-top:32px}
.in-endorse__rule{display:block;height:1px;background:var(--in-mortar);margin-bottom:8px;max-width:180px}
.in-endorse__text{font:400 .8125rem/1 Inter,system-ui,sans-serif;color:var(--in-endorse-text)}

/* ---- spacing + layout utilities ---------------------------------------
   These exist because the Content-Security-Policy is `style-src 'self'` with no
   'unsafe-inline', so a style="" attribute is refused by the browser and the
   margin silently computes to 0. Every spacing value below is on the 4px scale
   brand.md defines (4, 8, 12, 16, 24, 32, 48, 64, 96, 128). */
.in-mt-8{margin-top:8px}
.in-mt-12{margin-top:12px}
.in-mt-16{margin-top:16px}
.in-mt-24{margin-top:24px}
.in-mt-32{margin-top:32px}
.in-mt-48{margin-top:48px}
.in-mt-64{margin-top:64px}
.in-muted{color:var(--in-text-muted)}
.in-panel-bg{background:var(--in-panel)}
.in-actions{margin-top:48px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.in-inline-links{display:flex;gap:24px;flex-wrap:wrap}