/* ============================================================
   MITHRA 2026 — Interior page components
   Page hero · tabs · timeline · use-cases · proof · arch diagram
   ============================================================ */

/* ---------- interior page hero ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(56px,7vw,96px) 0 clamp(56px,7vw,92px); }
/* Topic-blob atmospheric glow behind an interior hero. Palette comes from an
   orb-* class on the same element (those classes only set --c1..--c5). Subtle:
   large, heavily blurred, low opacity, bleeding from the right behind content. */
.hero-blob {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 80vw); aspect-ratio: 1; border-radius: 50%;
  right: clamp(-240px, -7vw, -120px); top: 50%; transform: translateY(-50%);
  background:
    radial-gradient(58% 58% at 32% 30%, var(--c1, #6aa8ff) 0%, transparent 70%),
    radial-gradient(58% 58% at 70% 28%, var(--c4, #6aa8ff) 0%, transparent 72%),
    radial-gradient(62% 62% at 70% 72%, var(--c3, #2f6bff) 0%, transparent 74%),
    radial-gradient(58% 58% at 30% 72%, var(--c5, #2f6bff) 0%, transparent 72%),
    radial-gradient(82% 82% at 50% 50%, var(--c2, #2f6bff) 0%, transparent 72%);
  filter: blur(90px) saturate(1.25);
  opacity: .4;
}
@media (max-width: 860px){ .hero-blob { opacity: .28; right: -34%; width: 520px; } }
.page-hero.bg-dark-grad .lede { color: rgba(255,255,255,.78); }
.page-hero-tiles { position: absolute; inset: 0 0 0 auto; width: 34%; background-image: url('../assets/bg-dotgrid.png'); background-size: 26px; opacity: .5; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
@media (max-width: 860px){ .page-hero-tiles { display: none; } }
.page-hero .container { position: relative; z-index: 1; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; }
@media (max-width: 940px){ .page-hero-grid { grid-template-columns: 1fr; gap: 44px; } }
.page-hero-center { max-width: 860px; margin: 0 auto; text-align: center; }
.page-hero .h1 { font-size: clamp(36px,5vw,64px); }

/* ---------- tabs ---------- */
.tabs-nav { display: flex; gap: 8px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--soft-border); border-radius: var(--radius-pill); padding: 6px; width: fit-content; max-width: 100%; }
@media (max-width: 700px){ .tabs-nav { border-radius: var(--radius); } }
.tab-btn { border: none; background: none; padding: 12px 22px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--slate); transition: .2s var(--ease); white-space: nowrap; }
.tab-btn:hover { color: var(--really-blue); }
.tab-btn.active { background: var(--really-blue); color: #fff; }
.tab-panels { margin-top: 40px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .4s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.anim-off .tab-panel.active { animation: none; }
.tab-panel .split { align-items: center; }
.tab-panel .fdn-split { grid-template-columns: 0.85fr 1.15fr; }
@media (max-width: 992px){ .tab-panel .fdn-split { grid-template-columns: 1fr; gap: 32px; } }
.tab-body .pill { margin-bottom: 18px; }
.tab-num { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--cool-water); letter-spacing: .1em; }

/* ---------- architecture diagram ---------- */
.arch { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: 20px; align-items: center; }
@media (max-width: 940px){ .arch { grid-template-columns: 1fr; gap: 14px; text-align: center; } }
/* stacked variant — for the diagram in the constrained platform hero column */
.arch.arch-stack { grid-template-columns: 1fr; gap: 14px; max-width: 420px; }
.arch.arch-stack .arch-arrow { transform: rotate(90deg); justify-self: center; }
.arch.arch-stack .arch-node { justify-content: flex-start; }
.arch-col { display: flex; flex-direction: column; gap: 10px; }
.arch-node { background: #fff; border: 1px solid var(--soft-border); border-radius: 12px; padding: 13px 16px; font-weight: 600; font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-xs); }
.arch-node .dot { flex: 0 0 auto; }
.arch-core { background: var(--deep-ocean); color: #fff; border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-blue); position: relative; overflow: hidden; }
.arch-core .ac-tiles { position: absolute; inset: 0; background-image: url('../assets/bg-dotgrid.png'); background-size: 30px; opacity: .2; }
.arch-core img { height: 30px; margin: 0 auto 14px; position: relative; }
.arch-core b { font-family: var(--font-head); font-size: 19px; display: block; position: relative; }
.arch-core span { font-size: 13px; color: rgba(255,255,255,.72); position: relative; display: block; margin-top: 6px; }
.arch-arrow { color: var(--clear-sky); display: grid; place-items: center; }
.arch-arrow svg { width: 26px; height: 26px; }
@media (max-width: 940px){ .arch-arrow { transform: rotate(90deg); } }
.arch-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 4px; }
.bg-dark .arch-label, .bg-dark-grad .arch-label { color: var(--clear-sky); }

/* ---------- timeline ---------- */
.timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; counter-reset: tl; }
@media (max-width: 860px){ .timeline { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px){ .timeline { grid-template-columns: 1fr; } }
.tl-step { position: relative; }
.tl-num { width: 46px; height: 46px; border-radius: 50%; background: var(--really-blue); color: #fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 19px; margin-bottom: 18px; position: relative; z-index: 1; }
.tl-step::before { content: ""; position: absolute; top: 23px; left: 46px; right: -24px; height: 2px; background: var(--soft-border); }
.tl-step:last-child::before { display: none; }
@media (max-width: 860px){ .tl-step:nth-child(2n)::before { display: none; } }
@media (max-width: 520px){ .tl-step::before { display: none; } }
.tl-step .tl-when { font-size: 12px; font-weight: 600; color: var(--cool-water); letter-spacing: .06em; text-transform: uppercase; }
.tl-step h4 { font-size: 19px; margin: 6px 0 10px; font-family: var(--font-head); }
.tl-step p { color: var(--slate); font-size: 15px; }
/* dark-background context (e.g. implementation path on a dark section) */
.bg-dark .tl-step h4, .bg-dark-grad .tl-step h4 { color: #fff; }
.bg-dark .tl-step p, .bg-dark-grad .tl-step p { color: rgba(255,255,255,.72); }
.bg-dark .tl-step .tl-when, .bg-dark-grad .tl-step .tl-when { color: var(--clear-sky); }
.bg-dark .tl-step::before, .bg-dark-grad .tl-step::before { background: rgba(255,255,255,.18); }

/* ---------- use-case columns ---------- */
.uc-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px){ .uc-cols { grid-template-columns: 1fr; } }
.uc-col { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); padding: 32px; }
.uc-col .uc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.uc-col .uc-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--off-white); color: var(--really-blue); display: grid; place-items: center; }
.uc-col .uc-ic svg { width: 22px; height: 22px; }
.uc-col h3 { font-size: 19px; }
.uc-list li { display: flex; gap: 11px; padding: 10px 0; border-top: 1px solid var(--soft-border-2); font-size: 15px; color: var(--ink); }
.uc-list li:first-child { border-top: none; }
.uc-list .ic { width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; margin-top: 3px; }

/* ---------- proof band ---------- */
.proof-band { text-align: center; max-width: 900px; margin: 0 auto; }
.proof-band blockquote { font-family: var(--font-head); font-weight: 600; font-size: clamp(24px,3vw,38px); line-height: 1.28; letter-spacing: -.02em; margin: 24px 0; }
.proof-band .pb-author { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.proof-band .pb-author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.proof-band .pb-author span { text-align: left; font-size: 15px; color: var(--slate); }
.proof-band .pb-author b { display: block; font-family: var(--font-head); color: var(--ink); }
.bg-dark .proof-band .pb-author b, .bg-dark-grad .proof-band .pb-author b { color: #fff; }
.bg-dark .proof-band .pb-author span, .bg-dark-grad .proof-band .pb-author span { color: rgba(255,255,255,.72); }
.quote-mark { font-family: var(--font-head); font-size: 60px; line-height: .5; color: var(--clear-sky); }

/* ---------- trust badges ---------- */
.trust-badges { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.trust-badge { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--soft-border); border-radius: var(--radius-pill); background: #fff; font-weight: 600; font-size: 15px; color: var(--ink); }
.trust-badge .ic { width: 20px; height: 20px; color: var(--green); }
.trust-badge--cert { text-decoration: none; color: inherit; padding: 10px 22px; gap: 12px; transition: border-color .15s, box-shadow .15s; }
.trust-badge--cert:hover { border-color: var(--really-blue); box-shadow: var(--shadow-2); }
.bg-dark .trust-badge, .bg-dark-grad .trust-badge { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }

/* ---------- feature row visual ---------- */
.feat-visual { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--soft-border); box-shadow: var(--shadow-md); background: #fff; }
.feat-visual img { width: 100%; display: block; }
.feat-list { display: grid; gap: 14px; margin-top: 24px; }
.feat-list li { display: flex; gap: 12px; align-items: flex-start; }
.feat-list .ic { width: 22px; height: 22px; color: var(--really-blue); flex: 0 0 auto; margin-top: 2px; }
.feat-list b { font-family: var(--font-head); font-weight: 600; display: block; font-size: 16px; }
.feat-list span { color: var(--slate); font-size: 15px; }

/* ---------- mini stat row ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
@media (max-width: 760px){ .stat-row { grid-template-columns: 1fr 1fr; gap: 32px 16px; } }
.stat-cell { text-align: center; }

/* ---------- pyramid ---------- */
.pyramid-wrap { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.pyramid-wrap img { width: 100%; display: block; }
/* built-from-scratch maturity pyramid */
.pyr { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: stretch; }
.pyr-zones { display: flex; flex-direction: column; gap: 6px; }
.pyr-zone { position: relative; display: flex; align-items: center; justify-content: center; border-left: 2px solid; border-radius: 2px; padding: 4px 0; }
.pyr-zone span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pyr-zone.z-intel { border-color: var(--really-blue); flex-grow: 2; } .pyr-zone.z-intel span { color: var(--really-blue); }
.pyr-zone.z-found { border-color: var(--cool-water); flex-grow: 2; } .pyr-zone.z-found span { color: var(--cool-water); }
.pyr-zone.z-raw { border-color: var(--clear-sky); flex-grow: 1; } .pyr-zone.z-raw span { color: #5a8fd6; }
.pyr-tiers { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pyr-tier { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-radius: 9px; color: #fff; min-height: 66px; box-sizing: border-box; }
.pyr-tier .pt-n { font-family: var(--font-head); font-weight: 800; font-size: 20px; opacity: .5; flex: 0 0 auto; width: 18px; text-align: center; }
.pyr-tier .pt-tx b { font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.15; display: block; }
.pyr-tier .pt-tx span { font-size: 11.5px; opacity: .82; display: block; margin-top: 3px; line-height: 1.3; }
.pyr-tier.dark-txt { color: #1f2733; }
.pyr-tier.dark-txt .pt-n { opacity: .4; }
.pyr-tier.dark-txt .pt-tx span { opacity: .68; }
.pyr-tier .badge-mithra { margin-left: auto; flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; padding: 3px 8px; }
.pl5 { background: #001D6C; } .pl4 { background: #0F62FE; } .pl3 { background: #4589FF; }
.pl2 { background: #9CC0FF; } .pl1 { background: #CFE0FF; }

/* ---------- CTA band (light variant) ---------- */
.cta-band { border-radius: var(--radius-lg); padding: clamp(40px,5vw,64px); text-align: center; position: relative; overflow: hidden; }

/* ---------- forms ---------- */
.form-card { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); padding: clamp(28px,4vw,40px); box-shadow: var(--shadow-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px){ .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.field label .req { color: var(--coral); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--border-cool, #C4C6D0); border-radius: var(--radius-sm); background: #fff;
  transition: border-color .15s, box-shadow .15s; width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--really-blue); box-shadow: 0 0 0 3px rgba(15,98,254,.15); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-success { display: none; text-align: center; padding: 20px; }
.form-success.show { display: block; }
.form-success .ic { width: 56px; height: 56px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; margin: 0 auto 18px; }
.form-success .ic svg { width: 30px; height: 30px; }

/* what-happens-next panel */
.next-panel { background: var(--deep-ocean); color: #fff; border-radius: var(--radius-lg); padding: clamp(28px,4vw,40px); position: relative; overflow: hidden; }
.next-panel .np-tiles { position: absolute; inset: 0 0 0 auto; width: 45%; background-image: url('../assets/bg-dotgrid.png'); background-size: 30px; opacity: .2; -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.next-panel > * { position: relative; }
.np-step { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); }
.np-step:first-of-type { border-top: none; }
.np-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(120,169,255,.18); color: var(--clear-sky); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.np-step b { font-family: var(--font-head); font-size: 16px; display: block; margin-bottom: 3px; }
.np-step p { color: rgba(255,255,255,.7); font-size: 14px; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px){ .price-grid { grid-template-columns: 1fr; } }
.price-card { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.price-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.price-card.featured { border: 2px solid var(--really-blue); box-shadow: var(--shadow-md); }
.price-card .pc-badge { align-self: flex-start; }
.price-card h3 { font-size: 24px; margin: 14px 0 6px; }
.price-card .pc-sub { color: var(--slate); font-size: 14px; margin-bottom: 20px; }
.price-card ul { display: grid; gap: 11px; margin-bottom: 24px; }
.price-card li { display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; }
.price-card li .ic { width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.price-card .pc-best { font-size: 13px; color: var(--slate); border-top: 1px solid var(--soft-border-2); padding-top: 16px; margin-bottom: 20px; }
.price-card .btn { margin-top: auto; }

/* ---------- case studies + filter ---------- */
.filter-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.filter-chip { border: 1px solid var(--soft-border); background: #fff; padding: 9px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; color: var(--slate); transition: .18s var(--ease); }
.filter-chip:hover { border-color: var(--cool-water); color: var(--really-blue); }
.filter-chip.active { background: var(--really-blue); color: #fff; border-color: var(--really-blue); }
.cs-card { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.cs-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.cs-card .cs-logo { height: 62px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; align-self: flex-start; margin: -8px 0 14px -4px; }
.cs-card .cs-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.cs-card h3 { font-size: 18px; margin-bottom: 8px; }
.cs-card .cs-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cool-water); margin-top: 14px; }
.cs-card p { color: var(--slate); font-size: 14.5px; margin-top: 4px; }
.cs-card .arrow-link { margin-top: 20px; font-size: 14.5px; }

/* contact detail blocks */
.contact-detail { display: grid; gap: 20px; }
.contact-detail .cd-item { display: flex; gap: 14px; }
.contact-detail .cd-ic { width: 42px; height: 42px; border-radius: 11px; background: var(--off-white); color: var(--really-blue); display: grid; place-items: center; flex: 0 0 auto; }
.contact-detail .cd-ic svg { width: 21px; height: 21px; }
.contact-detail b { font-family: var(--font-head); display: block; margin-bottom: 4px; }
.contact-detail p, .contact-detail a { color: var(--slate); font-size: 15px; }

/* team / office */
.office-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--soft-border); }
.office-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.office-card .oc-body { padding: 20px 24px; }
.office-card .oc-body b { font-family: var(--font-head); font-size: 18px; }
.office-card .oc-body span { color: var(--slate); font-size: 14px; display: block; margin-top: 3px; }

/* ---------- legal / prose ---------- */
.legal-hero { background: var(--off-white); border-bottom: 1px solid var(--soft-border); padding: clamp(48px,6vw,72px) 0 clamp(32px,4vw,44px); }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 24px; margin: 40px 0 14px; }
.prose h3 { font-size: 18px; margin: 26px 0 10px; }
.prose p { color: var(--slate); margin-bottom: 14px; }
.prose ul.bullets { list-style: disc; padding-left: 22px; margin-bottom: 16px; color: var(--slate); }
.prose ul.bullets li { padding: 4px 0; }
.prose a { font-weight: 600; }
.prose .updated { font-size: 14px; color: var(--slate-light); }
.dl-card { display: flex; align-items: center; gap: 20px; margin: 28px 0 8px; padding: 22px 24px; border: 1px solid var(--soft-border); border-radius: 12px; background: var(--off-white); flex-wrap: wrap; }
.dl-card-ic { flex: none; width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid var(--soft-border); display: grid; place-items: center; color: var(--really-blue); }
.dl-card-ic .ic { width: 19px; height: 19px; }
.dl-card-body { flex: 1; min-width: 220px; }
.dl-card-body h3 { margin: 0 0 4px; font-size: 17px; }
.dl-card-body p { margin: 0; font-size: 14px; color: var(--slate); }
.dl-card .btn { flex: none; }

/* ---------- 404 ---------- */
.err-wrap { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; position: relative; overflow: hidden; }
.err-wrap .err-tiles { position: absolute; inset: 0; background-image: url('../assets/bg-tile.png'); background-size: 240px; opacity: .06; }
.err-code { font-family: var(--font-head); font-weight: 800; font-size: clamp(90px,16vw,180px); line-height: .9; color: var(--really-blue); letter-spacing: -.04em; }

/* ============ ROADSHOW ============ */
.rs-stats { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }
.rs-stat { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); background: rgba(255,255,255,.05); }
.rs-stat b { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; }
.rs-stat span { font-size: 13.5px; color: rgba(255,255,255,.72); }

.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.event-card { display: grid; grid-template-columns: 96px 1fr; background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--deep-ocean); color: #fff; padding: 20px 8px; text-align: center; position: relative; overflow: hidden; }
.event-date::after { content:""; position:absolute; inset:0; background-image:url('../assets/bg-dotgrid.png'); background-size:30px; opacity:.18; }
.event-date .ed-month { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--clear-sky); position: relative; }
.event-date .ed-day { font-family: var(--font-head); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -.02em; position: relative; }
.event-body { padding: 22px 24px 20px; display: flex; flex-direction: column; }
.event-loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cool-water); }
.event-loc .ic { width: 15px; height: 15px; flex: 0 0 auto; }
.event-body h3 { font-family: var(--font-head); font-size: 20px; line-height: 1.2; letter-spacing: -.01em; margin: 8px 0 0; }
.event-body p { color: var(--slate); font-size: 14px; line-height: 1.5; margin-top: 8px; }
.event-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.event-tag { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); background: var(--off-white); border: 1px solid var(--soft-border); border-radius: var(--radius-sm); padding: 4px 9px; }
.event-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--soft-border-2); }

/* past events — compact timeline rows */
.past-list { display: flex; flex-direction: column; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.past-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 20px; padding: 20px 26px; border-bottom: 1px solid var(--soft-border-2); }
.past-row:last-child { border-bottom: none; }
.past-when { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--really-blue); }
.past-when span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--slate-light); margin-top: 2px; }
.past-main b { font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.past-main span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--slate); margin-top: 3px; }
.past-main span .ic { width: 13px; height: 13px; }
.past-flag { font-size: 12px; font-weight: 600; color: var(--slate-light); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.past-flag .ic { width: 14px; height: 14px; }
@media (max-width: 720px){
  .event-grid { grid-template-columns: 1fr; }
  .past-row { grid-template-columns: 84px 1fr; }
  .past-flag { grid-column: 2; justify-self: start; }
}

/* ============ RESOURCES (gated library) ============ */
.gate-card { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 30px 30px 32px; }
.gate-card .gate-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--off-white); color: var(--really-blue); margin-bottom: 16px; }
.gate-card .gate-ic .ic { width: 22px; height: 22px; }
.gate-note { font-size: 12.5px; color: var(--slate-light); margin-top: 14px; line-height: 1.5; }
.gate-included { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.gate-included li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink); }
.gate-included li .ic { width: 18px; height: 18px; color: var(--color-success, #2E7D32); flex: 0 0 auto; margin-top: 2px; }

.res-lib { transition: filter .35s var(--ease); }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.res-tile { background: #fff; border: 1px solid var(--soft-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.res-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.res-tile-thumb { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; background: linear-gradient(135deg, var(--deep-ocean), #00114a); overflow: hidden; }
.res-tile-thumb::after { content:""; position:absolute; inset:0; background-image:url('../assets/bg-dotgrid.png'); background-size:34px; opacity:.16; }
.res-tile-thumb .rt-logo { height: 30px; filter: brightness(0) invert(1); opacity: .9; position: relative; z-index: 1; }
.res-play { position: absolute; z-index: 2; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.16); backdrop-filter: blur(2px); border: 1.5px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; transition: transform .2s var(--ease), background .2s; }
.res-play .ic { width: 26px; height: 26px; }
.res-tile button.res-open:hover .res-play { transform: scale(1.08); background: rgba(255,255,255,.26); }
.res-tile-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.res-kindrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.res-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cool-water); display: inline-flex; align-items: center; gap: 6px; }
.res-tag .ic { width: 14px; height: 14px; }
.res-dur { font-size: 12.5px; color: var(--slate-light); }
.res-tile-body h3 { font-family: var(--font-head); font-size: 18px; line-height: 1.28; margin: 11px 0 8px; }
.res-tile-body p { font-size: 14px; color: var(--slate); line-height: 1.5; }
.res-open { margin-top: auto; padding-top: 18px; text-align: left; background: none; border: none; cursor: pointer; font: inherit; }
.res-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--really-blue); }
.res-cta .ic { width: 16px; height: 16px; }
.res-tile.is-soon .res-tile-thumb { background: var(--off-white); }
.res-tile.is-soon .res-tile-thumb::after { opacity: .5; }
.res-tile.is-soon .rt-soon { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-light); position: relative; z-index: 1; }
.res-soon-cta { color: var(--slate-light); }

/* locked state: blur + lock chip on play button, click scrolls to gate */
.res-lib.locked .res-tile:not(.is-soon) .res-tile-thumb { filter: saturate(.7) brightness(.92); }
.res-lib.locked .res-tile:not(.is-soon) .res-play { background: rgba(11,21,51,.5); border-color: rgba(255,255,255,.35); }
.res-lib.locked .res-tile:not(.is-soon) .res-cta::before { content: ""; }
.lock-badge { position: absolute; z-index: 3; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(11,21,51,.62); color: #fff; display: none; place-items: center; }
.lock-badge .ic { width: 15px; height: 15px; }
.res-lib.locked .res-tile:not(.is-soon) .lock-badge { display: grid; }

/* video lightbox */
.res-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8,15,38,.82); backdrop-filter: blur(3px); }
.res-modal.open { display: flex; }
.res-modal-inner { width: min(960px, 100%); }
.res-modal-frame { position: relative; aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.res-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.res-modal-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: #fff; }
.res-modal-cap b { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.res-modal-close { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--radius-pill); padding: 9px 16px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.res-modal-close:hover { background: rgba(255,255,255,.2); }
.res-modal-close .ic { width: 16px; height: 16px; }
@media (max-width: 720px){ .res-grid { grid-template-columns: 1fr; } }

/* ---------- resources 2026: featured-in strip, covers, article tiles, filters ---------- */
.featured-in-wrap { text-align: center; }
.featured-in-lead { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-light); }
.featured-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 40px; margin-top: 22px; }
.fi-mark { font-family: var(--font-head); font-weight: 700; font-size: clamp(15px,1.6vw,19px); color: var(--slate); opacity: .6; transition: color .2s var(--ease), opacity .2s var(--ease); white-space: nowrap; text-decoration: none; line-height: 1.1; }
a.fi-mark:hover { opacity: 1; color: var(--really-blue); }

/* featured 2-up */
.res-grid--feature { grid-template-columns: 1fr 1fr; gap: 24px; }
.res-feature .res-tile-body h3 { font-size: 22px; }
@media (max-width: 760px){ .res-grid--feature { grid-template-columns: 1fr; } }

/* youtube cover thumbs */
.res-tile-thumb.has-cover { background: #0b1533; }
.res-tile-thumb .rt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .4s var(--ease); }
.res-tile-thumb.has-cover::after { opacity: .08; }
.res-tile button.res-open:hover .rt-cover { transform: scale(1.04); }
.res-tile-thumb.has-cover .res-play { background: rgba(11,21,51,.5); border-color: rgba(255,255,255,.6); }

/* tile wrapper button: full-bleed, no UA padding (so video thumbs align with article thumbs) */
.res-tile > button.res-open { width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; flex: 1 1 auto; text-align: left; background: none; border: none; cursor: pointer; font: inherit; }

/* article / press tiles (link-out) */
a.res-tile { text-decoration: none; color: inherit; }
.rt-article { background: linear-gradient(135deg, #0b1533, #00114a); }
.rt-article--cpo { background: linear-gradient(135deg, #10204d, #25337d); }
.rt-article--aop { background: linear-gradient(135deg, #0e2a3a, #0b4a5e); }
.rt-article--scape { background: linear-gradient(135deg, #0c2e2a, #0a4a3b); }
.rt-article--mag { background: linear-gradient(135deg, #2a1140, #4d1f78); }
.rt-article--dir { background: linear-gradient(135deg, #1a2236, #36436a); }
.rt-pub { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; color: #fff; font-size: clamp(20px,2.4vw,26px); letter-spacing: .003em; text-align: center; padding: 0 20px; line-height: 1.12; }
.res-ext { position: absolute; z-index: 2; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.42); color: #fff; display: grid; place-items: center; transition: background .2s var(--ease); }
.res-ext .ic { width: 15px; height: 15px; }
a.res-tile:hover .res-ext { background: rgba(255,255,255,.3); }
.res-tile-body > .res-cta.res-cta--push { margin-top: auto; padding-top: 18px; }

/* filter row + empty state */
.res-filter { margin: 4px 0 34px; }
.res-empty { text-align: center; color: var(--slate); font-size: 15px; margin-top: 32px; }