/* OKNO Wave 2 — content-shell (destination pages + hub card sections).
   Version 20260726w2shell1. Additive layer over okno-typography.css + okno-card-system.css.
   Zero runtime JS. Light theme (static mirror is light-only). Cards themselves are styled
   by okno-card-system.css — this file only lays out the hero band, section headings and grids. */

.okno-w2{max-width:1040px;margin:0 auto;padding:24px 20px 64px;box-sizing:border-box}
.okno-w2 *{box-sizing:border-box}

/* ---- hero band ---- */
.okno-w2-hero{margin:0 0 8px}
.okno-w2-hero__media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#eef3f8;margin:0 0 22px}
.okno-w2-hero__media picture,.okno-w2-hero__media img{display:block;width:100%;height:100%}
.okno-w2-hero__media img{object-fit:cover}
.okno-w2-hero__eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5a6472;background:#eef3f8;border:1px solid #dde5ee;border-radius:999px;padding:5px 12px;margin:0 0 14px}
.okno-w2-hero__title{font-size:32px;line-height:1.18;color:#141b26;margin:0 0 16px;font-weight:800;letter-spacing:-.01em}
.okno-w2-hero__lead{font-size:18px;line-height:1.55;color:#3a4653;margin:0 0 14px;max-width:66ch}
.okno-w2-hero__note{font-size:14.5px;line-height:1.5;color:#5a6472;margin:0 0 20px;max-width:66ch}
.okno-w2-cta{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15.5px;font-weight:700;color:#fff;background:#2F8CFF;border:0;border-radius:10px;padding:12px 22px;cursor:pointer;text-decoration:none;transition:background .15s ease}
.okno-w2-cta:hover{background:#1f7bef}
.okno-w2-cta:focus-visible{outline:3px solid #9cc7ff;outline-offset:2px}

/* ---- content sections ---- */
.okno-w2-section{margin:44px 0 0}
.okno-w2-section__title{font-size:22px;line-height:1.25;font-weight:800;color:#141b26;margin:0 0 18px}
.okno-w2-group{margin:28px 0 0}
.okno-w2-group:first-of-type{margin-top:0}
.okno-w2-group__title{font-size:17px;line-height:1.3;font-weight:700;color:#20293a;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid #e6ecf3}

/* related block sits a little apart */
.okno-w2-related{margin-top:52px;padding-top:36px;border-top:1px solid #e6ecf3}

/* R1 §4: compact-related variant — title-led, content-height (no forced equal outer height),
   no media reservation. Cards align to the top of the row so short cards never stretch into blanks. */
.okno-w2-crel-grid{align-items:start}
.okno-w2-crel{min-height:0}
.okno-w2-crel > .ok-card__body{padding:16px 18px;gap:4px}
.okno-w2-crel .ok-card__title{margin:0}

/* hub card section appended to existing indexed hubs (purely additive, self-contained) */
.okno-w2-hubcards{max-width:1040px;margin:8px auto 56px;padding:36px 20px 0;border-top:1px solid #e6ecf3;box-sizing:border-box}
.okno-w2-hubcards .okno-w2-section{margin-top:0}

/* keep a preserved B1 hero comfortable inside the new hub body */
.okno-w2 .okno-b1-hero{margin:0 0 22px;border-radius:16px;overflow:hidden}

/* R3 §3: Wave 2 image-card media crops to 3/2 (slightly narrower than the 1.6:1 source) so the per-asset
   object-position (e.g. B1-NOT-01 right center) actually biases the visible window toward the subject
   instead of the composition's negative-space edge. Applies only to cards that HAVE media (no-media cards
   have no .ok-card__media element). */
.okno-w2 .ok-card__media, .okno-w2-hubcards .ok-card__media{aspect-ratio:3/2}

@media (max-width:640px){
  .okno-w2{padding:18px 16px 48px}
  .okno-w2-hero__media{aspect-ratio:4/5;border-radius:14px}
  .okno-w2-hero__title{font-size:26px}
  .okno-w2-hero__lead{font-size:16.5px}
  .okno-w2-section__title{font-size:20px}
}
@media (max-width:360px){
  .okno-w2-hero__title{font-size:23px}
}