:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #101828;
  --muted: #526176;
  --faint: #566579;
  --line: #dbe3ee;
  --navy: #0b1220;
  --navy-2: #111c2d;
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --brand-soft: #eef2ff;
  --brand-line: #c7d2fe;
  --teal: #0f766e;
  --teal-soft: #ccfbf1;
  --rose: #e64d6d;
  --shadow: 0 18px 48px rgba(15, 23, 42, .08);
  --radius: 20px;
  --max: 1180px;
}
html.dark {
  color-scheme: dark;
  --bg: #0e1725;
  --surface: #111c2d;
  --surface-2: #172437;
  --text: #e8edf5;
  --muted: #c0cada;
  --faint: #95a4b8;
  --line: #29374b;
  --brand: #818cf8;
  --brand-hover: #a5b4fc;
  --brand-soft: #20264c;
  --brand-line: #454b82;
  --teal: #5eead4;
  --teal-soft: #123d3d;
  --shadow: 0 18px 48px rgba(0, 0, 0, .24);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #818cf8; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; background: white; color: #111827; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.wrap { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 18, 32, .97); color: white; border-bottom: 1px solid rgba(148, 163, 184, .22); backdrop-filter: blur(14px); }
.nav-shell { width: min(1360px, calc(100% - 40px)); min-height: 72px; margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: white; font-weight: 750; letter-spacing: -.035em; font-size: 17px; flex-shrink: 0; }
.brand-lockup img { width: 31px; height: 36px; object-fit: contain; }
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav-link { padding: 10px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: #c6d0df; text-decoration: none; transition: background .16s, color .16s; }
.nav-link:hover, .nav-link[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; }
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.theme-switch { display: inline-flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 3px; }
.theme-button { width: 28px; height: 27px; border: 0; border-radius: 999px; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 13px; }
.theme-button[aria-pressed="true"] { background: white; color: #111827; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; min-height: 44px; padding: 11px 17px; text-decoration: none; font-size: 13.5px; font-weight: 700; line-height: 1.25; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 7px 20px rgba(79,70,229,.18); }
html.dark .btn-primary { color: #10132d; }
.btn-primary:hover { background: var(--brand-hover); color: white; }
html.dark .btn-primary:hover { color: #10132d; }
.btn-ghost { border-color: var(--line); background: var(--surface); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-on-dark { background: #fff; color: #0f172a; }
.btn-on-dark:hover { background: #e2e8f0; }
.nav-cta { padding: 10px 13px; min-height: 38px; font-size: 12.5px; background: #fff; color: #0f172a; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.05); border-radius: 10px; color: white; cursor: pointer; }
.mobile-nav { display: none; padding: 8px 20px 18px; border-top: 1px solid rgba(148,163,184,.2); }
.mobile-nav a { display: block; padding: 12px 10px; color: #e2e8f0; text-decoration: none; border-radius: 8px; font-size: 14px; }
.mobile-nav a:hover { background: rgba(255,255,255,.08); }
.mobile-nav.is-open { display: block; }
main { overflow: clip; }
.section { padding: 76px 0; }
.section-sm { padding: 52px 0; }
.section-white { background: var(--surface); border-block: 1px solid var(--line); }
.section-dark { background: var(--navy); color: var(--faint); }
.eyebrow { display: inline-flex; gap: 9px; align-items: center; margin: 0; color: var(--brand); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 3px; background: currentColor; }
.hero { padding: 86px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: 58px; align-items: center; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 18px 0 0; max-width: 760px; font-size: clamp(38px, 4.25vw, 59px); line-height: 1.04; letter-spacing: -.055em; font-weight: 800; }
h2 { margin: 12px 0 0; font-size: clamp(28px, 3vw, 39px); line-height: 1.13; letter-spacing: -.043em; font-weight: 780; }
h3 { margin: 0; font-size: 17px; line-height: 1.35; letter-spacing: -.025em; font-weight: 730; }
.lead { margin: 22px 0 0; max-width: 650px; color: var(--muted); font-size: 17px; line-height: 1.78; }
.section-intro { max-width: 760px; }
.section-intro p:not(.eyebrow) { margin: 17px 0 0; color: var(--muted); line-height: 1.8; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.micro-note { margin: 16px 0 0; color: var(--faint); font-size: 12px; line-height: 1.6; }
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.chip { display: inline-flex; align-items: center; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11.5px; font-weight: 650; line-height: 1.2; }
.hero-visual { min-width: 0; position: relative; }
.product-window { border-radius: 19px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.window-top { min-height: 53px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 17px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.window-title { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 750; }
.window-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700; }
.window-meta { font-family: "JetBrains Mono", monospace; color: var(--faint); font-size: 10px; }
.window-content { padding: 22px; }
.window-person { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 800; }
.person-info strong { display: block; font-size: 14px; }
.person-info small { display: block; margin-top: 4px; color: var(--faint); font-size: 11.5px; }
.status-pill { margin-left: auto; padding: 6px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); font-size: 10px; font-weight: 750; white-space: nowrap; }
.preview-label { margin: 18px 0 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; }
.policy-checks { display: grid; gap: 9px; }
.policy-row { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid var(--line); background: var(--bg); border-radius: 10px; }
.check-icon { width: 22px; height: 22px; display: grid; flex: 0 0 22px; place-items: center; border-radius: 7px; background: var(--teal-soft); color: var(--teal); font-size: 12px; font-weight: 800; }
.policy-row strong { display: block; font-size: 11.5px; }
.policy-row small { display: block; margin-top: 3px; color: var(--faint); font-size: 10.5px; line-height: 1.5; }
.audit-strip { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding: 12px; border-radius: 10px; background: #111c2d; color: #e2e8f0; }
.audit-strip .audit-dot { width: 7px; height: 7px; flex: 0 0 7px; background: #5eead4; border-radius: 50%; }
.audit-strip strong { font-size: 10.5px; }
.audit-strip small { display: block; margin-top: 3px; color: #a6b5c8; font-size: 9.5px; }
.illustration-note { margin: 11px 2px 0; color: var(--faint); font-size: 10.5px; line-height: 1.5; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 32px; }
.card { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.card p { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.card .card-kicker { color: var(--brand); font: 600 10px/1.5 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 13px; }
.card-icon { width: 37px; height: 37px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 800; }
.inline-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--brand); font-size: 12.5px; line-height: 1.5; font-weight: 750; text-decoration: none; }
.inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.workflow-shell { margin-top: 34px; padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.scenario-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.scenario-tab { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; padding: 10px 13px; font-size: 12px; font-weight: 700; cursor: pointer; }
.scenario-tab[aria-selected="true"] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }
.scenario-view { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 28px; padding-top: 23px; }
.scenario-copy { padding: 5px 3px; }
.scenario-copy h3 { font-size: 21px; }
.scenario-copy p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.scenario-copy .scenario-outcome { margin-top: 18px; padding: 13px 14px; border-left: 3px solid var(--teal); border-radius: 0 9px 9px 0; background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 1.7; }
.scenario-steps { counter-reset: wf-step; display: grid; gap: 10px; }
.scenario-step { display: flex; gap: 12px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.scenario-step-num { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); font: 700 11px/1 "JetBrains Mono", monospace; }
.scenario-step strong { display: block; font-size: 12px; }
.scenario-step small { display: block; margin-top: 4px; color: var(--faint); font-size: 11px; line-height: 1.55; }
.scenario-panel[hidden] { display: none; }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 15px; margin-top: 30px; }
.proof-item { padding: 20px 0; border-top: 2px solid var(--brand); }
.proof-item h3 { font-size: 15px; }
.proof-item p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.section-dark .eyebrow { color: #a5b4fc; }
.section-dark .lead, .section-dark .section-intro p:not(.eyebrow) { color: #b8c4d5; }
.section-dark h2, .section-dark h3 { color: var(--faint); }
.dark-proof-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 32px; }
.dark-proof-item { border: 1px solid rgba(148,163,184,.22); border-radius: 14px; background: rgba(255,255,255,.04); padding: 20px; }
.dark-proof-item p { color: #b8c4d5; font-size: 13px; line-height: 1.72; }
.dark-proof-item a { color: #c7d2fe; font-size: 12px; font-weight: 700; text-underline-offset: 4px; }
.protocol-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.protocol { padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 9px; font-size: 11.5px; font-weight: 700; }
.final-cta { border: 1px solid rgba(165,180,252,.22); border-radius: 19px; padding: clamp(25px, 5vw, 46px); background: linear-gradient(135deg, #111c2d, #18254a 82%, #142c3a); color: #fff; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 30px; }
.final-cta h2 { margin-top: 8px; color: #fff; }
.final-cta p { max-width: 700px; margin: 13px 0 0; color: #c1ccdc; line-height: 1.75; font-size: 14px; }
.final-cta .eyebrow { color: #a5b4fc; }
.final-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; min-width: 190px; }
.footer { padding: 30px 0; border-top: 1px solid var(--line); background: var(--surface); }
.footer-main { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 750; text-decoration: none; }
.footer-brand img { width: 24px; height: 28px; object-fit: contain; }
.footer-note { margin: 7px 0 0; color: var(--faint); font-size: 11px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--brand); }
.page-hero { padding: 76px 0 60px; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.55fr); gap: 55px; align-items: end; }
.page-hero h1 { max-width: 850px; }
.page-hero .lead { max-width: 760px; }
.side-note { border: 1px solid var(--line); border-radius: 15px; padding: 21px; background: var(--surface); }
.side-note p { color: var(--muted); line-height: 1.7; font-size: 13px; }
.founder-card { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 35px; padding: 28px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
.founder-name { font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
.founder-role { margin-top: 7px; color: var(--brand); font-size: 12px; font-weight: 700; }
.founder-card p { margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; }
.principle-number { color: var(--brand); font: 700 11px/1 "JetBrains Mono", monospace; margin-bottom: 18px; }
.table-wrap { margin-top: 29px; width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.comparison-table { border-collapse: collapse; width: 100%; min-width: 760px; text-align: left; }
.comparison-table th { padding: 15px 18px; background: var(--surface-2); color: var(--faint); text-transform: uppercase; font: 700 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .055em; }
.comparison-table td { padding: 17px 18px; border-top: 1px solid var(--line); vertical-align: top; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.comparison-table td strong { color: var(--text); font-size: 13px; }
.comparison-table td:first-child { width: 25%; }
.comparison-table td:nth-child(2) { width: 42%; }
.comparison-table td:nth-child(3) { width: 33%; }
.note { margin-top: 13px; color: var(--faint); font-size: 11px; line-height: 1.7; }
.eval-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.eval-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.eval-card p { color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.eval-card .eval-step { display: inline-flex; color: var(--brand); font: 700 10px/1 "JetBrains Mono", monospace; margin-bottom: 13px; }
.faq-list { display: grid; gap: 10px; margin-top: 27px; }
details.faq { padding: 17px 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
details.faq summary { cursor: pointer; font-size: 13.5px; font-weight: 750; list-style-position: inside; }
details.faq p { color: var(--muted); font-size: 13px; line-height: 1.8; margin: 12px 0 0 19px; max-width: 850px; }
.paper-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; }
.paper-icon { display: grid; place-items: center; width: 42px; height: 46px; flex: 0 0 42px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); font: 800 10px/1 "JetBrains Mono", monospace; }
.paper-card p { margin: 5px 0 0; color: var(--faint); font-size: 11px; line-height: 1.5; }
.paper-card a { margin-left: auto; color: var(--brand); text-decoration: none; font-weight: 750; font-size: 12px; white-space: nowrap; }
.paper-card a:hover { text-decoration: underline; }
@media (max-width: 1100px) {
  .main-nav, .nav-cta { display: none; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 820px; }
  .hero-visual { max-width: 720px; width: 100%; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .side-note { max-width: 700px; }
}
@media (max-width: 740px) {
  .wrap { width: min(var(--max), calc(100% - 36px)); }
  .nav-shell { width: calc(100% - 28px); min-height: 64px; gap: 11px; }
  .brand-lockup { font-size: 15px; gap: 7px; }
  .brand-lockup img { width: 28px; height: 32px; }
  .nav-right { gap: 7px; }
  .theme-switch { padding: 2px; }
  .theme-button { width: 25px; height: 25px; }
  .section { padding: 58px 0; }
  .section-sm { padding: 42px 0; }
  .hero { padding: 56px 0 52px; }
  h1 { font-size: clamp(36px, 9.2vw, 48px); }
  h2 { font-size: clamp(27px, 6.8vw, 34px); }
  .lead { font-size: 15.5px; line-height: 1.75; }
  .grid-3, .grid-2, .proof-grid, .dark-proof-grid, .eval-grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 19px; }
  .workflow-shell { padding: 14px; }
  .scenario-view { grid-template-columns: 1fr; gap: 15px; }
  .scenario-copy h3 { font-size: 19px; }
  .scenario-tabs { display: grid; grid-template-columns: 1fr; }
  .scenario-tab { width: 100%; text-align: left; }
  .final-cta { grid-template-columns: 1fr; gap: 20px; }
  .final-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .footer-main { flex-direction: column; align-items: flex-start; }
  .footer-nav { gap: 12px; }
  .page-hero { padding: 54px 0 44px; }
  .founder-card { grid-template-columns: 1fr; gap: 17px; padding: 20px; }
  .paper-card { align-items: flex-start; flex-wrap: wrap; }
  .paper-card a { margin-left: 56px; }
  .window-content { padding: 15px; }
  .window-top { padding: 10px 13px; }
  .status-pill { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* Extended marketing content pages */
.page-hero-simple { padding: 74px 0 56px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 75%); }
.page-hero-simple .hero-copy { max-width: 820px; }
.page-hero-simple .lead { max-width: 760px; }
.page-kicker { color: var(--faint); font-size: 12px; margin: 17px 0 0; line-height: 1.7; }
.section-anchor { scroll-margin-top: 100px; }
.catalog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 30px; }
.catalog-card { display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 5px 20px rgba(15,23,42,.025); }
.catalog-card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.catalog-card .inline-link { margin-top: auto; padding-top: 17px; }
.catalog-number { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 17px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font: 700 10px/1 "JetBrains Mono",monospace; }
.feature-group { padding: 34px 0; border-top: 1px solid var(--line); }
.feature-group-head { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 24px; align-items: start; margin-bottom: 24px; }
.feature-group-head p { max-width: 620px; margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.feature-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.feature-detail { padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.feature-detail p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.feature-detail .small-link { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--brand); font-weight: 700; text-decoration: none; }
.resource-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 28px; }
.resource-card { display: flex; flex-direction: column; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; min-height: 215px; }
.resource-card p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 10px 0 18px; }
.resource-card .inline-link { margin-top: auto; }
.resource-type { color: var(--brand); font: 700 10px/1.4 "JetBrains Mono",monospace; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 13px; }
.plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 30px; align-items: stretch; }
.plan-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--brand); box-shadow: 0 14px 35px rgba(79,70,229,.10); }
.plan-card .plan-type { color: var(--brand); font: 700 10px/1.5 "JetBrains Mono",monospace; letter-spacing: .07em; text-transform: uppercase; }
.plan-card h3 { margin-top: 11px; font-size: 22px; }
.plan-card .plan-summary { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 11px 0 20px; }
.plan-card ul { padding-left: 19px; margin: 0 0 22px; color: var(--muted); font-size: 12.5px; line-height: 1.9; }
.plan-card .btn { margin-top: auto; width: 100%; }
.pricing-note { padding: 16px 18px; margin-top: 18px; border: 1px solid var(--brand-line); border-radius: 12px; background: var(--brand-soft); color: var(--text); font-size: 12.5px; line-height: 1.75; }
.pricing-table { border-collapse: collapse; width: 100%; min-width: 920px; text-align: left; }
.pricing-table th { padding: 14px 16px; background: var(--surface-2); color: var(--faint); text-transform: uppercase; font: 700 10px/1.5 "JetBrains Mono",monospace; letter-spacing: .055em; }
.pricing-table td { padding: 15px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.pricing-table td strong { color: var(--text); }
.blog-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.blog-search { flex: 1 1 260px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.blog-filter { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.blog-filter[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 25px; }
.blog-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.blog-card-art { min-height: 130px; padding: 20px; display: flex; align-items: end; background: var(--navy-2); color: #e0e7ff; }
.blog-card-art span { font: 600 10px/1.5 "JetBrains Mono",monospace; letter-spacing: .09em; text-transform: uppercase; }
.blog-card-content { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.blog-card-content h3 { font-size: 18px; }
.blog-card-content p { color: var(--muted); font-size: 13px; line-height: 1.75; margin: 10px 0 17px; }
.blog-card-content .inline-link { margin-top: auto; }
.article-shell { width: min(780px, calc(100% - 44px)); margin-inline: auto; }
.article-hero { padding: 70px 0 42px; border-bottom: 1px solid var(--line); }
.article-hero h1 { font-size: clamp(36px,4.5vw,54px); max-width: 760px; }
.article-hero .lead { max-width: 730px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; margin-top: 20px; }
.article-tag { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 10px; }
.article-body { padding: 38px 0 72px; }
.article-body h2 { margin-top: 34px; font-size: 28px; }
.article-body h3 { margin-top: 24px; }
.article-body p, .article-body li { color: var(--muted); line-height: 1.9; font-size: 15px; }
.article-body ul, .article-body ol { padding-left: 22px; }
.article-body .article-callout { padding: 18px 20px; margin: 25px 0; border-left: 3px solid var(--brand); background: var(--surface); border-radius: 0 12px 12px 0; }
.article-body .article-callout p { margin: 0; color: var(--text); }
.article-body a { color: var(--brand); font-weight: 650; }
.article-bottom { display: flex; justify-content: space-between; gap: 18px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 35px; }
.steps-list { counter-reset: steps; display: grid; gap: 13px; margin-top: 25px; }
.step-item { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; }
.step-item::before { counter-increment: steps; content: counter(steps, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font: 700 10px/1 "JetBrains Mono",monospace; }
.step-item p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.check-list { display: grid; gap: 11px; margin-top: 24px; }
.check-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.check-row .check-box { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 1px; display: grid; place-items: center; border-radius: 6px; background: var(--teal-soft); color: var(--teal); font-size: 11px; font-weight: 800; }
.check-row p { margin: 5px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(270px,.72fr); gap: 22px; margin-top: 25px; }
.contact-panel { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.contact-panel p { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.contact-detail { padding: 14px 0; border-top: 1px solid var(--line); }
.contact-detail strong { display: block; font-size: 13px; }
.contact-detail a { display: inline-block; margin-top: 5px; color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none; }
.empty-state { display: none; padding: 20px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 12px; margin-top: 20px; }
@media (max-width: 980px) { .catalog-grid,.resource-grid,.blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .plan-grid { grid-template-columns: 1fr; } .plan-card { min-height: 0; } }
@media (max-width: 740px) { .catalog-grid,.resource-grid,.blog-grid,.feature-detail-grid { grid-template-columns: 1fr; } .feature-group-head { grid-template-columns: 1fr; gap: 8px; } .contact-grid { grid-template-columns: 1fr; } .page-hero-simple { padding: 54px 0 42px; } .article-hero { padding: 52px 0 30px; } .article-body { padding-top: 28px; } }
@media (prefers-reduced-motion: reduce) { .blog-card, .catalog-card, .btn { transition: none !important; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* Blog library and editorial diagrams */
.blog-hero-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.blog-hero-stats>div{display:flex;flex-direction:column;gap:4px;padding:13px 17px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.blog-hero-stats strong{font:700 20px/1.2 "JetBrains Mono",monospace;color:var(--text)}
.blog-hero-stats span{font-size:11px;color:var(--muted)}
.blog-library-head{display:flex;align-items:end;justify-content:space-between;gap:25px;flex-wrap:wrap}
.blog-library-head h2{margin:0;font-size:clamp(25px,3vw,34px)}
.blog-library-head>p{max-width:390px;color:var(--muted);font-size:13px;line-height:1.75;margin:0}
.blog-card-art[data-art="identity lifecycle"]{background:linear-gradient(135deg,#102b39,#176b70 90%)}
.blog-card-art[data-art="authentication passkeys"]{background:linear-gradient(135deg,#191c3a,#4b4ba5 90%)}
.blog-card-art[data-art="api protocols"]{background:linear-gradient(135deg,#142638,#27647b 90%)}
.blog-card-art[data-art="security controls"]{background:linear-gradient(135deg,#101e35,#344c78 90%)}
.blog-card-art[data-art="governance compliance"]{background:linear-gradient(135deg,#29203d,#625080 90%)}
.blog-card-art[data-art="architecture administration"]{background:linear-gradient(135deg,#20263b,#3a526d 90%)}
.blog-card-art[data-art="security engineering"]{background:linear-gradient(135deg,#172b2a,#327268 90%)}
.blog-card-art[data-art="b2b saas"]{background:linear-gradient(135deg,#172b3b,#2f6576 90%)}
.article-opening{font-size:17px!important;color:var(--text)!important;line-height:1.9!important}
.article-flow-diagram{margin:26px 0 32px;padding:20px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.article-flow-diagram figcaption{margin-bottom:16px;color:var(--faint);font:700 10px/1.5 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.article-flow-diagram ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:0;margin:0;list-style:none;counter-reset:flow-step}
.article-flow-diagram li{position:relative;min-width:0;counter-increment:flow-step}
.article-flow-diagram li:not(:last-child):after{content:"→";position:absolute;right:-15px;top:11px;color:var(--brand);font-size:16px}
.article-flow-step{display:flex;min-height:68px;align-items:center;justify-content:center;text-align:center;padding:12px;border:1px solid var(--brand-line);border-radius:10px;background:var(--brand-soft);font-size:12px;line-height:1.5;color:var(--text)}
.article-flow-step:before{content:counter(flow-step,decimal-leading-zero);align-self:flex-start;margin-right:8px;color:var(--brand);font:700 10px/1.4 "JetBrains Mono",monospace}
.article-review-box{margin:30px 0;padding:22px 24px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.article-review-box .eyebrow{margin-bottom:6px}
.article-review-box h2{margin:0 0 17px!important;font-size:23px!important}
.article-review-box ul{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.article-review-box li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:13px;line-height:1.7}
.article-check-icon{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border-radius:6px;background:var(--teal-soft);color:var(--teal);font-size:12px;font-weight:800}
@media(max-width:740px){.article-flow-diagram ol{grid-template-columns:1fr;gap:10px}.article-flow-diagram li:not(:last-child):after{content:"↓";top:auto;right:14px;bottom:-13px;z-index:2}.article-flow-step{min-height:0;justify-content:flex-start;text-align:left}.blog-library-head{align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.article-flow-step{scroll-behavior:auto}}

/* --- SVG figures in articles ------------------------------------------- */
.article-svg-figure svg{display:block;width:100%;height:auto}
.article-svg-figure .article-svg-caption{margin:14px 0 0;color:var(--faint);
  font:400 12.5px/1.6 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
.article-svg-figure{overflow-x:auto}
@media (max-width:640px){.article-svg-figure{padding:14px}}

/* --- per-post card art ------------------------------------------------- */
.blog-card-art{position:relative;align-items:stretch;padding:0;min-height:152px;overflow:hidden}
.blog-card-art .card-art-svg{width:100%;display:flex;align-items:center;padding:14px 16px}
.blog-card-art .card-art-svg svg{width:100%;height:auto;max-height:124px;display:block}

/* Raster/SVG image artwork stays fully visible in blog cards (never crop). */
.blog-card-art > img{
  display:block;
  width:100%;
  height:124px;
  max-height:124px;
  padding:14px 16px;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
  align-self:center;
  flex:0 1 auto;
}


/* Global mega-menu navigation */
.nav-shell { position: static; }
.main-nav { position: static; flex: 1 1 auto; min-width: 0; gap: 2px; margin-left: 8px; }
.nav-dropdown { position: static; }
.nav-dropdown > summary { cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-caret { display: inline-block; margin-left: 3px; color: #a7b2c4; font-size: 11px; transition: transform .16s ease; }
.nav-dropdown[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-dropdown[open] > summary, .nav-direct-active { background: rgba(255,255,255,.12); color: #fff; }
.mega-menu { display: none; position: absolute; z-index: 80; top: 100%; left: 50%; transform: translateX(-50%); width: min(1260px, calc(100vw - 40px)); max-height: min(76vh, 760px); overflow: auto; border: 1px solid var(--line); border-top: 2px solid var(--brand); border-radius: 0 0 18px 18px; background: var(--surface); color: var(--text); box-shadow: 0 26px 65px rgba(4, 10, 25, .27); }
.nav-dropdown[open] > .mega-menu { display: block; }
.mega-menu-inner { padding: 23px 25px 26px; }
.mega-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 0 2px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.mega-topline h2 { margin: 5px 0 0; font-size: 23px; line-height: 1.2; }
.mega-topline p:not(.mega-eyebrow) { margin: 7px 0 0; max-width: 600px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.mega-eyebrow { margin: 0; color: var(--brand); font: 700 9px/1.5 "JetBrains Mono",monospace; letter-spacing: .12em; text-transform: uppercase; }
.mega-all-link { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; padding: 9px 12px; border: 1px solid var(--brand-line); border-radius: 9px; background: var(--brand-soft); color: var(--brand); text-decoration: none; font-size: 12px; font-weight: 750; }
.mega-all-link:hover { background: var(--surface-2); }
.mega-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; gap: 14px; }
.mega-grid-features { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.mega-section { padding: 10px 11px 11px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); min-width: 0; }
.mega-section h3 { margin: 1px 0 10px; color: var(--text); font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.mega-link-list { display: grid; gap: 2px; }
.mega-link { display: block; min-width: 0; padding: 6px 7px; border-radius: 7px; text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 560; line-height: 1.35; overflow-wrap: anywhere; }
.mega-link:hover, .mega-link:focus-visible { color: var(--brand); background: var(--brand-soft); }
.mobile-nav { max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav-group, .mobile-subgroup { border-bottom: 1px solid rgba(148,163,184,.16); }
.mobile-nav-group > summary, .mobile-subgroup > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px; font-size: 13px; font-weight: 750; color: #f1f5f9; }
.mobile-nav-group > summary::-webkit-details-marker, .mobile-subgroup > summary::-webkit-details-marker { display: none; }
.mobile-nav-group[open] > summary, .mobile-subgroup[open] > summary { color: #c7d2fe; }
.mobile-nav-content { padding: 0 0 10px 10px; }
.mobile-index-link { display: block; margin: 0 7px 7px; padding: 9px 10px; border-radius: 8px; background: rgba(129,140,248,.14); color: #c7d2fe !important; font-size: 12px !important; font-weight: 750; }
.mobile-subgroup > summary { padding: 10px 11px; color: #cbd5e1; font-size: 12px; }
.mobile-subitems { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px; padding: 0 8px 8px; }
.mobile-sub-link { display: block; padding: 8px 7px; color: #cbd5e1; text-decoration: none; font-size: 11px; line-height: 1.4; border-radius: 6px; }
.mobile-sub-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.mobile-top-link { display: block; padding: 12px 10px; color: #e2e8f0; text-decoration: none; font-size: 13px; font-weight: 700; }

/* Category indexes and individual capability pages */
.capability-hero { padding-top: 65px; }
.capability-hero-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(260px,.7fr); gap: 54px; align-items: center; }
.capability-summary { padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.capability-summary h2 { margin-top: 10px; font-size: 21px; line-height: 1.35; }
.capability-summary p { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.capability-summary p strong { color: var(--text); }
.summary-rule { width: 44px; height: 3px; margin: 18px 0; border-radius: 3px; background: var(--brand); }
.capability-insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 30px; }
.flow-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 30px; }
.flow-step { min-width: 0; border: 1px solid var(--line); border-radius: 14px; padding: 19px; background: var(--surface); }
.flow-step-num { display: inline-flex; margin-bottom: 18px; font: 800 11px/1 "JetBrains Mono",monospace; color: var(--brand); background: var(--brand-soft); border-radius: 7px; padding: 7px 8px; }
.flow-step h3 { font-size: 14px; }
.flow-step p { margin: 9px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.checklist-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 42px; align-items: start; }
.checklist-card { padding: 23px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.checklist-card ul { padding-left: 20px; margin: 0; display: grid; gap: 12px; }
.checklist-card li { padding-left: 3px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 26px; }
.related-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-decoration: none; font-size: 12px; font-weight: 700; }
.related-card:hover { border-color: var(--brand); background: var(--brand-soft); }
.related-card-title { min-width: 0; }
.related-card-arrow { color: var(--brand); flex: 0 0 auto; }
.directory-group { margin-bottom: 54px; }
.directory-group-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.directory-group-head h2 { font-size: 27px; }
.directory-group-head > p { max-width: 510px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.directory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.directory-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color .15s ease, transform .15s ease; }
.directory-card:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.directory-card .resource-type { margin: 0 0 10px; color: var(--brand); text-transform: uppercase; letter-spacing: .07em; font: 700 9px/1.5 "JetBrains Mono",monospace; }
.directory-card h3 { font-size: 15px; }
.directory-card h3 a { text-decoration: none; }
.directory-card h3 a:hover { color: var(--brand); }
.directory-card p:not(.resource-type) { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin: 9px 0 16px; }
.directory-card .small-link { margin-top: auto; }
.footer-main-wide { display: grid; grid-template-columns: minmax(180px,1.3fr) repeat(4,minmax(130px,1fr)); align-items: start; gap: 26px; }
.footer-column { display: grid; gap: 9px; align-content: start; }
.footer-column h2, .footer-column .footer-column-label { margin: 0 0 4px; font: 700 12px/1.5 "JetBrains Mono",monospace; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.footer-column a { font-size: 14px; line-height: 1.6; color: var(--muted); text-decoration: none; }
.footer-column a:hover { color: var(--brand); }
.footer-brand-col { min-width: 0; }
@media (max-width: 1340px) { .nav-shell { gap: 12px; } .main-nav { gap: 0; margin-left: 3px; } .nav-link { padding-inline: 8px; font-size: 12px; } .nav-right { gap: 8px; } .nav-cta { padding-inline: 10px; font-size: 11.5px; } }
@media (max-width: 1190px) { .main-nav, .nav-cta { display: none !important; } .menu-toggle { display: inline-grid !important; place-items: center; } }
@media (max-width: 980px) { .capability-hero-grid, .checklist-grid { grid-template-columns: 1fr; gap: 25px; } .capability-summary { max-width: 700px; } .mega-grid-features { grid-template-columns: repeat(3,minmax(0,1fr)); } .capability-insight-grid { grid-template-columns: 1fr; } .flow-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } .related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .directory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .footer-main-wide { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .mega-topline { flex-direction: column; gap: 12px; } .mega-grid, .mega-grid-features { grid-template-columns: 1fr; } .mega-menu { width: calc(100vw - 20px); } .mega-menu-inner { padding: 14px; } .flow-steps, .related-grid, .directory-grid { grid-template-columns: 1fr; } .directory-group-head { display: block; } .directory-group-head > p { margin-top: 10px; } .footer-main-wide { grid-template-columns: 1fr; } .mobile-subitems { grid-template-columns: 1fr; } }


/* --- Icon-led mega menu: categories and submenu links ------------------ */
.wf-nav-icon-sprite { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; }
.wf-menu-icon { display: block; width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wf-nav-heading { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wf-nav-label { min-width: 0; }
.nav-link.wf-iconified-link, .nav-link { display: inline-flex; align-items: center; }
.nav-link .wf-nav-heading { gap: 7px; }
.wf-top-category-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; color: #a5b4fc; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mega-section h3 { display: flex; align-items: center; gap: 9px; min-height: 34px; margin: 0 0 11px; font-size: 11.5px; line-height: 1.35; }
.wf-nav-category-heading { width: 100%; gap: 9px; }
.wf-category-icon-box { display: inline-grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; border: 1px solid var(--brand-line); border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.wf-category-icon-box .wf-menu-icon { width: 15px; height: 15px; }
.mega-link-list { gap: 3px; }
.mega-link { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 34px; padding: 4px 6px; border: 1px solid transparent; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.wf-item-icon-box { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--faint); transition: color .14s ease, background .14s ease, border-color .14s ease; }
.wf-item-icon-box .wf-menu-icon { width: 14px; height: 14px; }
.wf-nav-item-label { min-width: 0; }
.mega-link:hover .wf-item-icon-box, .mega-link:focus-visible .wf-item-icon-box { color: var(--brand); background: var(--brand-soft); border-color: var(--brand-line); }
.mega-link:hover, .mega-link:focus-visible { border-color: var(--brand-line); }
.mobile-subgroup > summary { display: flex; align-items: center; gap: 10px; }
.mobile-subgroup > summary::after { content: ""; width: 7px; height: 7px; flex: 0 0 7px; margin: 0 4px 3px auto; border-right: 1.5px solid #94a3b8; border-bottom: 1.5px solid #94a3b8; transform: rotate(45deg); transition: transform .16s ease; }
.mobile-subgroup[open] > summary::after { margin-bottom: -3px; transform: rotate(225deg); border-color: #a5b4fc; }
.mobile-subgroup > summary .wf-nav-category-heading { flex: 1 1 auto; }
.mobile-nav-group > summary .wf-nav-heading { flex: 1 1 auto; }
.mobile-nav-group > summary .wf-top-category-icon { width: 17px; height: 17px; }
.mobile-nav a.mobile-sub-link, .mobile-nav a.mobile-index-link { display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 36px; padding: 6px 7px; }
.mobile-nav a.mobile-sub-link { color: #d2dbea; font-size: 11.5px; line-height: 1.45; }
.mobile-nav a.mobile-sub-link .wf-item-icon-box { width: 24px; height: 24px; border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.09); color: #9eadd0; }
.mobile-nav a.mobile-sub-link:hover .wf-item-icon-box, .mobile-nav a.mobile-sub-link:focus-visible .wf-item-icon-box { color: #c7d2fe; background: rgba(129,140,248,.16); border-color: rgba(165,180,252,.35); }
.mobile-nav a.mobile-index-link { display: grid; }
.mobile-nav a.mobile-index-link .wf-item-icon-box { border-color: rgba(165,180,252,.25); background: rgba(129,140,248,.16); color: #c7d2fe; }
@media (max-width: 980px) {
  .mega-grid-features { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .mega-grid, .mega-grid-features { grid-template-columns: 1fr; }
  .mobile-nav a.mobile-sub-link, .mobile-nav a.mobile-index-link { grid-template-columns: 25px minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-item-icon-box, .mobile-subgroup > summary::after { transition: none; }
}


/* Identity house visual essay */
.identity-house-figure{margin:28px 0 34px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.identity-house-figure>a{display:block;border-radius:10px;overflow:hidden;outline-offset:4px}
.identity-house-figure img{display:block;width:100%;height:auto;max-width:100%}
.identity-house-figure .article-svg-caption{margin:13px 2px 2px;color:var(--muted);font-size:12px;line-height:1.55}
.identity-house-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0 28px}
.identity-house-principles section{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.identity-house-principles h3{margin:0 0 8px;font-size:15px}
.identity-house-principles p{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
@media(max-width:640px){.identity-house-principles{grid-template-columns:1fr}.identity-house-figure{padding:9px}}

/* Nav and footer labels are navigation, not document sections: keep the look,
   drop the heading semantics so they stop competing with page content. */
.mega-title { margin: 0; font: 750 15px/1.3 inherit; color: var(--text); letter-spacing: -.01em; }


/* P6: technical article modules - reference links, code samples and verification boxes */
.technical-deep-dive{margin:34px 0 0;padding-top:6px}
.technical-deep-dive .eyebrow{margin:0 0 8px}
.technical-deep-dive h2{margin-top:24px!important;font-size:clamp(24px,2.6vw,30px)!important}
.technical-deep-dive h3{margin-top:24px!important;font-size:18px!important}
.technical-code{padding:18px 20px;margin:18px 0 24px;border:1px solid var(--line);border-radius:13px;background:var(--navy-2);color:#e2e8f0;overflow:auto;white-space:pre;tab-size:2}
.technical-code code{font:12.5px/1.75 "JetBrains Mono",ui-monospace,monospace;color:inherit}
.article-reference-list{display:grid;gap:9px}
.article-reference-list li{padding-left:2px}
.technical-note{padding:16px 18px;border:1px solid var(--brand-line);border-radius:12px;background:var(--brand-soft);color:var(--text)!important}
.technical-note strong{color:var(--text)}
@media(max-width:640px){.technical-code{padding:14px;font-size:12px}.technical-code code{font-size:11.5px}.technical-deep-dive h2{font-size:24px!important}}


/* WebFrolic 2026 experience refinement: buyer-first pathways, enquiry and editorial hierarchy */
.wf-slim-mega { grid-template-columns:repeat(3,minmax(0,1fr)); }
.wf-pricing-link { white-space:nowrap; }
.mobile-walkthrough-link { margin-top:10px; padding:13px 15px !important; border:1px solid rgba(165,180,252,.35); border-radius:11px; background:rgba(99,102,241,.18); color:#fff !important; font-weight:750; }
.hero-headline-accent { color:var(--brand); }
.hero-workflow-frame { overflow:hidden; padding:10px; border:1px solid rgba(148,163,184,.22); border-radius:22px; background:#0f1a2b; box-shadow:0 26px 65px rgba(4,10,25,.2); }
.hero-workflow-frame img { display:block; width:100%; height:auto; border-radius:15px; }
.task-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:30px; }
.task-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:22px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }
.task-card-number { display:inline-flex; align-items:center; justify-content:center; min-width:34px; min-height:29px; margin-bottom:18px; border:1px solid var(--brand-line); border-radius:8px; background:var(--brand-soft); color:var(--brand); font:700 10px/1 "JetBrains Mono",monospace; }
.task-card h3 { margin:0 0 9px; color:var(--text); font-size:16px; line-height:1.35; letter-spacing:-.025em; }
.task-card p { flex:1 1 auto; margin:0 0 18px; color:var(--muted); font-size:12.5px; line-height:1.75; }
.task-card a { color:var(--brand); font-size:12px; font-weight:750; text-decoration:none; }
.task-card a:hover { text-decoration:underline; text-underline-offset:4px; }
.contact-layout { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr); gap:24px; align-items:start; margin-top:28px; }
.contact-context { position:sticky; top:100px; padding:26px; border:1px solid var(--line); border-radius:17px; background:var(--surface-2); }
.contact-context h3 { margin:0 0 20px; font-size:19px; letter-spacing:-.03em; }
.contact-context-item { padding:15px 0; border-top:1px solid var(--line); }
.contact-context-item strong { display:block; color:var(--text); font-size:12px; }
.contact-context-item p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.7; }
.contact-email-link { display:inline-flex; margin-top:14px; color:var(--brand); font-size:12px; font-weight:750; text-decoration:none; }
.contact-form { min-width:0; padding:clamp(20px,3vw,30px); border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.contact-form-heading { margin-bottom:22px; }
.contact-form-heading h3 { margin:0 0 7px; color:var(--text); font-size:20px; letter-spacing:-.03em; }
.contact-form-heading p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
.contact-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.contact-field { display:grid; gap:7px; min-width:0; }
.contact-field > span { color:var(--text); font-size:11.5px; font-weight:750; }
.contact-field input,.contact-field select,.contact-field textarea { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); font:400 12.5px/1.5 Inter,sans-serif; }
.contact-field textarea { min-height:126px; resize:vertical; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color:var(--faint); opacity:1; }
.contact-field input:focus,.contact-field select:focus,.contact-field textarea:focus { outline:3px solid rgba(99,102,241,.2); border-color:var(--brand); }
.contact-field-full { grid-column:1/-1; }
.contact-form-note { margin:17px 0 0; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:10.5px; line-height:1.65; }
.contact-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:17px; }
.contact-form-actions .btn { cursor:pointer; }
.contact-form-status { flex:1 1 220px; margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.contact-form-status[hidden] { display:none; }
.editorial-discovery { display:grid; gap:28px; margin:30px 0 36px; }
.featured-article { display:grid; grid-template-columns:minmax(260px,.92fr) minmax(0,1.08fr); overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.featured-article-art { display:flex; align-items:center; justify-content:center; min-height:260px; padding:18px; background:linear-gradient(145deg,#101a2c,#1c3150); }
.featured-article-art img { display:block; width:100%; max-width:520px; height:auto; }
.featured-article-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(22px,4vw,38px); }
.featured-article-copy h3 { margin:7px 0 10px; font-size:clamp(21px,3vw,28px); line-height:1.2; letter-spacing:-.04em; }
.featured-article-copy h3 a { color:var(--text); text-decoration:none; }
.featured-article-copy h3 a:hover { color:var(--brand); }
.featured-article-copy > p:not(.eyebrow) { margin:0 0 20px; max-width:580px; color:var(--muted); font-size:13px; line-height:1.75; }
.reading-path-heading { max-width:720px; margin-bottom:17px; }
.reading-path-heading h2 { margin:6px 0 9px; font-size:clamp(23px,3vw,31px); }
.reading-path-heading > p:last-child { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.reading-path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.reading-path-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.reading-path-card h3 { margin:0 0 8px; color:var(--text); font-size:14px; line-height:1.35; }
.reading-path-card p { min-height:58px; margin:0 0 12px; color:var(--muted); font-size:11.5px; line-height:1.65; }
.reading-path-card ul { display:grid; gap:9px; margin:0; padding:12px 0 0; border-top:1px solid var(--line); list-style:none; }
.reading-path-card li a { color:var(--brand); font-size:11.5px; line-height:1.5; text-decoration:none; }
.reading-path-card li a:hover { text-decoration:underline; text-underline-offset:3px; }
.article-toc { margin:24px 0 30px; padding:18px 20px; border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:12px; background:var(--surface-2); }
.article-toc-title { margin:0 0 10px; color:var(--text); font-size:12px; font-weight:800; }
.article-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding-left:18px; }
.article-toc li { color:var(--brand); font-size:11.5px; line-height:1.5; }
.article-toc a { color:var(--muted); text-decoration:none; }
.article-toc a:hover { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.pc-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:-8px 0 23px; }
.pc-step { display:flex; gap:11px; align-items:flex-start; min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.pc-step-number { display:grid; place-items:center; flex:0 0 27px; width:27px; height:27px; border-radius:8px; background:var(--brand-soft); color:var(--brand); font:700 10px/1 "JetBrains Mono",monospace; }
.pc-step strong { display:block; color:var(--text); font-size:11.5px; }
.pc-step p { margin:5px 0 0; color:var(--muted); font-size:10.5px; line-height:1.55; }
@media (max-width:1100px) { .task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .reading-path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:850px) { .contact-layout { grid-template-columns:1fr; } .contact-context { position:static; } }
@media (max-width:700px) { .featured-article { grid-template-columns:1fr; } .featured-article-art { min-height:180px; } .reading-path-grid { grid-template-columns:1fr; } .reading-path-card p { min-height:0; } .pc-steps { grid-template-columns:1fr; } .article-toc ol { grid-template-columns:1fr; } }
@media (max-width:560px) { .task-grid { grid-template-columns:1fr; } .contact-form-grid { grid-template-columns:1fr; } .contact-field-full { grid-column:auto; } .contact-form-actions .btn { width:100%; } }
@media (prefers-reduced-motion:reduce) { .task-card,.featured-article { scroll-behavior:auto; transition:none; } }
/* Keep the primary header action on one line at standard desktop widths. */
.nav-right .nav-cta { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: max-content; }