@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* Branded faces via the live site's Adobe Fonts (Typekit) kit: Halyard Display + Freight. */
@import url('https://use.typekit.net/nbc8rif.css');

/* ============================================================
   Research to Real World · shared mockup stylesheet
   Palette and faces locked to the official brand guide.
   ============================================================ */
:root{
  /* Brand palette (from the brand guide) */
  --blue:#0051ba; --blue-dark:#00408f; --blue-band:#e1eef9;
  --lightblue:#69caf0; --gold:#fab317; --red:#ff3042;
  --ink:#000000; --body:#33373D; --grey:#949ca1; --muted:#6B7280; --line:#E2E6EC;
  --surface:#F1F4F9; --white:#fff;
  --sans:halyard-display,"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --serif:freight-big-pro,"Source Serif 4",Georgia,"Times New Roman",serif;
  /* Content frame width + readable text measure (one left edge, narrower prose) */
  --content:1080px; --measure:740px; --maxw:880px;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--serif);font-size:19px;color:var(--body);line-height:1.65;background:#fff;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.sans{font-family:var(--sans)}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.01em}
a{color:var(--blue)}
img{max-width:100%}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px}
/* .narrow shares the same frame + left edge as .wrap; prose width is capped on .body */
.narrow{max-width:var(--content);margin:0 auto;padding:0 24px}
section{padding:58px 0}
.section-sm{padding:40px 0}
.center{text-align:center}
.surface{background:var(--surface)}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.11em;font-size:12.5px;font-weight:800;color:var(--blue)}
/* Type scale (1.25 / major third, 18px base) as tokens, not inline one-offs */
h1.h1,.h1{font-family:var(--sans);font-size:46px;font-weight:900;line-height:1.08;color:var(--ink);letter-spacing:-.01em;margin:0 0 14px}
h2.sec,.h2{font-family:var(--sans);font-size:38px;font-weight:800;line-height:1.12;color:var(--ink);margin:0 0 16px}
h3.h3,.h3{font-family:var(--sans);font-size:26px;font-weight:800;line-height:1.2;color:var(--ink);margin:0 0 10px}
.lead{font-size:22px;line-height:1.6;color:#23272D;max-width:var(--measure)}
.muted{color:var(--muted)}
/* Container cap utility: narrow + flush-left (use when a whole block must be narrow) */
.measure{max-width:var(--measure);margin-right:auto}
/* Body prose: the container fills the frame; text children cap at a readable
   measure and stay flush to the same left edge as the headings above them. */
.body p,.body ul,.body ol{font-size:19px;margin:0 0 20px;max-width:var(--measure)}
.body h2,.body h3,.body h4{max-width:var(--measure)}

/* "not reviewed yet" flag for new/draft pages (review chrome, not brand) */
.draft-flag{background:#fff4d6;border-bottom:1px solid #f0d98a;color:#7a5c00;font-family:var(--sans);font-size:13px;font-weight:700;text-align:center;padding:10px 16px;display:flex;gap:8px;align-items:center;justify-content:center}
.draft-flag::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.draft-flag span{font-weight:500;color:#8a6a16}

/* mockup ribbon (review chrome, not brand) */
.ribbon{background:var(--ink);color:#cdd3dd;font-family:var(--sans);font-size:13px;padding:9px 0}
.ribbon .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ribbon b{color:#fff}
.ribbon a{color:#9fc0ff;text-decoration:none;font-weight:700}
.ribbon a:hover{text-decoration:underline}

/* header */
.topbar{height:6px;background:var(--blue)}
.site-header{border-bottom:1px solid var(--line);position:relative}
.site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:18px;padding-bottom:18px;gap:20px}
.site-header .brand{justify-self:start}
.nav-cta{justify-self:end}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .name{font-family:var(--sans);font-weight:800;color:var(--ink);line-height:1.05;font-size:16px}
.gridmark{display:inline-grid;grid-template-columns:repeat(8,9px);gap:0;border:1.5px solid var(--blue);vertical-align:middle}
.gridmark span{height:9px;border:1px solid #cdd7ef}
.gridmark.lg{grid-template-columns:repeat(8,14px)}
.gridmark.lg span{height:14px}
.gridmark span.b{background:var(--blue);border-color:var(--blue)}
.gridmark span.l{background:var(--lightblue);border-color:var(--lightblue)}
.gridmark span.g{background:var(--gold);border-color:var(--gold)}
.gridmark span.r{background:var(--red);border-color:var(--red)}
.mainnav{display:flex;align-items:center;justify-content:center;gap:26px;font-family:var(--sans);font-weight:600;font-size:15px}
.mainnav a{color:var(--ink);text-decoration:none}
.mainnav a.active{color:var(--blue);font-weight:800}

/* buttons */
.btn{font-family:var(--sans);display:inline-flex;align-items:center;gap:8px;border:2px solid var(--blue);color:var(--blue);background:#fff;border-radius:999px;padding:10px 20px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;line-height:1}
.btn::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.btn.blue-dot::before{background:var(--blue)}
.btn.solid{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.solid::before{background:#fff}
.btn.on-blue{background:#fff;border-color:#fff;color:var(--blue)}
.btn.on-blue::before{background:var(--gold)}
.btn.sm{padding:8px 15px;font-size:11px}
.buy{font-family:var(--sans);border:0;background:var(--blue);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block}
.buy.ghost{background:#fff;color:var(--blue);border:2px solid var(--blue)}

/* badges */
/* Topic chip: compact, never stretches to a full-width bar (align-self stops the
   flex/grid stretch inside card bodies). Wheat is the standard topic color. */
.pill{font-family:var(--sans);display:inline-block;align-self:flex-start;width:auto;max-width:max-content;background:var(--gold);color:var(--ink);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.pill.blue{background:var(--blue);color:#fff}
.pill.soft{background:var(--blue-band);color:var(--blue-dark)}
.tag{font-family:var(--sans);font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--body);display:inline-block}
.note-flag{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#3a2c00;background:var(--gold);border-radius:5px;padding:4px 9px;display:inline-block}

/* breadcrumb */
.crumb{font-family:var(--sans);font-size:13px;color:var(--muted);padding:16px 0}
.crumb a{color:var(--blue);text-decoration:none}

/* hero variants — left-aligned by default; add .center to opt into centered */
.page-hero{background:var(--blue-band);text-align:left;padding:56px 0 62px}
.page-hero h1{font-size:46px;font-weight:900;line-height:1.08;margin:14px 0 14px;max-width:780px}
.page-hero h1 em{font-style:normal;color:var(--blue)}
.page-hero .sub{font-family:var(--sans);font-size:19px;color:var(--body);max-width:640px;margin:0}
.page-hero.center{text-align:center}
.page-hero.center h1{margin-left:auto;margin-right:auto}
.page-hero.center .sub{margin-left:auto;margin-right:auto}
.hero-split{display:grid;grid-template-columns:1.1fr 1fr;background:var(--blue-band);border-radius:0;overflow:hidden}
.hero-split .copy{padding:64px 44px}
.hero-split h1{font-size:46px;font-weight:900;line-height:1.07;margin:14px 0 16px}
.hero-split h1 em{font-style:normal;color:var(--blue)}
.hero-split p{font-size:18px;max-width:440px;margin:0 0 26px}
.hero-split .imgph{background:linear-gradient(135deg,#cdd9f4,#9db6ea);min-height:380px;display:flex;align-items:center;justify-content:center;color:#5b6b95;font-family:var(--sans);font-weight:600;font-size:13px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.tagline{font-family:var(--sans);font-size:20px;font-weight:700;color:var(--ink)}

/* grid mark divider helper — left-aligned by default; .center to opt in */
.divider{text-align:left;margin-bottom:28px}
.divider h2{margin:0 0 14px}
.divider.center{text-align:center}

/* generic grids */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

/* feature card */
.fcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.fcard .ic{width:42px;height:42px;border-radius:9px;background:var(--blue-band);display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:21px;margin-bottom:14px}
.fcard h3{font-family:var(--sans);font-size:17px;font-weight:800;margin:0 0 8px}
.fcard p{font-family:var(--sans);font-size:14px;color:var(--muted);margin:0}

/* topic / audience card */
.tcard{border:1px solid var(--line);border-radius:9px;padding:22px;text-decoration:none;display:block;background:#fff}
.tcard .t{font-family:var(--sans);font-weight:800;color:var(--ink);font-size:17px;margin-bottom:5px}
.tcard .d{font-family:var(--sans);font-size:14px;color:var(--muted)}
.tcard:hover{border-color:var(--blue)}

/* resource card */
.rcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.rcard .ph{height:120px;background:linear-gradient(135deg,#dbe4f7,#b9cbf0)}
/* No-photo icon tile (default for most cards): topic color + resource-type icon */
.rcard .tile{height:120px;display:flex;align-items:center;justify-content:center;position:relative}
.rcard .tile svg{width:40px;height:40px}
.rcard .tile .typetag{position:absolute;top:12px;left:14px;font-family:var(--sans);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.rcard .bd{padding:18px;flex:1;display:flex;flex-direction:column;gap:9px}
.rcard h3{font-family:var(--sans);font-size:19px;font-weight:800;margin:0;line-height:1.25}
.rcard p{font-size:16.5px;margin:0;flex:1}
.rcard .foot{display:flex;align-items:center;justify-content:space-between;font-family:var(--sans);font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:11px}
.rcard .price{font-family:var(--sans);font-weight:900;color:var(--ink);font-size:18px}
.logo-chip{font-family:var(--sans);font-weight:700;color:var(--blue);font-size:13px}
/* Partner attribution as the partner's logo (contained image, right-aligned).
   Falls back to the .logo-chip text when a partner has no logo (e.g. IGDIs). */
.logo-mark{display:inline-flex;align-items:center;height:24px;flex:0 0 auto}
.logo-mark img{max-height:24px;max-width:120px;width:auto;height:auto;object-fit:contain;display:block}

/* Article card (image-free): articles have no featured images, so the listing
   gets its design from a rotating brand-color top accent + topic chip + clean type. */
.acard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:10px;padding:22px 22px 20px;text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
.acard:hover{border-color:var(--blue);transform:translateY(-2px)}
.acard.c-sky{border-top-color:var(--lightblue)}
.acard.c-gold{border-top-color:var(--gold)}
.acard.c-red{border-top-color:var(--red)}
.acard h3{font-family:var(--sans);font-size:20px;font-weight:800;line-height:1.25;margin:0;color:var(--ink)}
.acard p{font-size:16px;line-height:1.55;margin:0;color:var(--body);flex:1}
.acard .meta{font-family:var(--sans);font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:9px;margin-top:8px;border-top:1px solid var(--line);padding-top:12px}
.acard .meta .sep{width:4px;height:4px;border-radius:50%;background:#c7ccd4;flex:0 0 auto}
.acard .meta .logo-mark,.acard .meta .logo-chip{margin-left:auto}
.acard .meta .logo-mark{height:22px}
.acard .meta .logo-mark img{max-height:22px;max-width:108px}
/* Featured article: full width, bigger title, thicker accent */
.acard.feature{border-top-width:6px;padding:30px 32px 26px}
.acard.feature h3{font-size:30px;line-height:1.15;margin:4px 0 0}
.acard.feature p{font-size:18px;max-width:70ch}

/* stat band + cards */
.statband{background:var(--blue);color:#fff;text-align:center}
.statband .grid4{gap:24px}
.statband .num{font-family:var(--sans);font-size:44px;font-weight:900;line-height:1}
.statband .cap{font-family:var(--sans);font-size:14px;color:#D5DEF9;margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat{background:var(--surface);border-top:3px solid var(--blue);padding:30px 18px;text-align:center}
.stat .num{font-family:var(--sans);font-size:42px;font-weight:900;color:var(--ink);line-height:1}
.stat .cap{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--body);margin-top:10px}

/* filter bar */
.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--sans)}
.filterbar .flabel{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.fchip{border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--body);background:#fff;cursor:pointer;text-decoration:none}
.fchip.active{background:var(--blue);color:#fff;border-color:var(--blue)}

/* sidebar filter */
.filtergroup{font-family:var(--sans);margin-bottom:22px}
.filtergroup h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.filtergroup label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--body);margin-bottom:7px;cursor:pointer}

/* tabs */
.tabbar{display:flex;gap:6px;border-bottom:2px solid var(--line);flex-wrap:wrap}
.tabbar button{font-family:var(--sans);border:0;background:none;padding:13px 18px;font-weight:700;font-size:15px;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabbar button.active{color:var(--blue);border-bottom-color:var(--blue)}
.tabpane{padding:22px 2px;font-size:17px}
.tabpane h4{font-family:var(--sans);font-size:16px;margin:18px 0 8px}

/* faq accordion */
.faq-item{margin-bottom:12px}
.faq-q{font-family:var(--sans);font-weight:700;font-size:17px;display:flex;justify-content:space-between;align-items:center;padding:17px 22px;border-radius:7px;cursor:pointer}
.faq-q.open{background:var(--blue);color:#fff}
.faq-q.closed{background:var(--surface);color:var(--ink)}
.faq-sign{font-size:23px;font-weight:400;line-height:1}
.faq-a{font-size:17px;padding:16px 22px 4px;color:var(--body)}

/* pull quote */
.pullquote{max-width:760px;margin:0 auto;text-align:center;padding-top:30px}
.pq-badge{width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:40px;margin:0 auto -27px;position:relative;z-index:2}
.pq-badge span{margin-top:13px}
.pq-body{background:var(--surface);border-radius:10px;padding:52px 44px 30px}
.pq-body p{font-family:var(--sans);font-size:23px;font-weight:800;color:var(--ink);line-height:1.4;margin:0 0 14px}
.pq-body cite{font-family:var(--sans);font-style:normal;font-weight:600;font-size:14px;color:var(--muted)}

/* key takeaways */
.takeaways{list-style:none;padding:0;margin:0}
.takeaways li{display:flex;gap:14px;align-items:flex-start;font-size:18px;padding:8px 0}
.check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--blue);position:relative;margin-top:4px}
.check::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* author / person */
.person{text-align:center}
.avatar{border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--lightblue));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--sans);font-weight:800}
.person .avatar{width:92px;height:92px;font-size:28px;margin:0 auto 14px}
.person .nm{font-family:var(--sans);font-weight:800;color:var(--ink);font-size:17px}
.person .ro{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:2px}
.person a{font-family:var(--sans);font-size:13px;font-weight:700;text-decoration:none;display:inline-block;margin-top:8px}
.authorbox{display:flex;gap:18px;align-items:center;background:var(--surface);border-radius:10px;padding:22px 24px}
.authorbox .avatar{width:60px;height:60px;font-size:20px;flex:0 0 auto}
.authorbox .nm{font-family:var(--sans);font-weight:800;color:var(--ink);font-size:16px}
.authorbox .ti{font-family:var(--sans);font-size:13.5px;color:var(--muted)}
.authorbox p{font-size:15px;margin:7px 0 0}

/* video */
.vthumb{height:150px;background:linear-gradient(135deg,#cdd9f4,#9db6ea);position:relative;display:flex;align-items:center;justify-content:center;border-radius:10px 10px 0 0}
.playbtn{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.playbtn::after{content:"";border-left:17px solid var(--blue);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.vcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.vcard .vb{padding:15px;font-family:var(--sans)}
.vcard .vb h3{font-size:15px;margin:0 0 6px;font-weight:800;color:var(--ink)}
.vcard .vb .meta{font-size:12px;color:var(--muted)}
.screen{aspect-ratio:16/9;background:#0a0a0a;border-radius:10px;display:flex;align-items:center;justify-content:center}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* social share */
.share{display:flex;gap:10px;align-items:center;font-family:var(--sans)}
.share .lbl{font-size:13px;font-weight:700;color:var(--muted)}
.share a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue);font-weight:800;font-size:12px;text-decoration:none}

/* search result */
.result{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.result .rthumb{flex:0 0 auto;width:90px;height:64px;border-radius:7px;background:linear-gradient(135deg,#dbe4f7,#b9cbf0)}
.result .kind{font-family:var(--sans);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--blue)}
.result h3{font-size:18px;margin:3px 0 4px;color:var(--ink)}
.result p{font-size:14px;margin:0;color:var(--body)}

/* forms */
.field{margin-bottom:16px;font-family:var(--sans)}
.field label{display:block;font-weight:700;font-size:13px;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:2px solid var(--line);border-radius:8px;padding:11px 14px;font-size:15px;font-family:var(--sans);background:#fff}
.routing-note{font-family:var(--sans);font-size:13px;color:var(--blue);background:var(--blue-band);border-radius:8px;padding:12px 16px;margin-bottom:20px;font-weight:600}

/* partners row */
.partners{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.plogo{width:160px;height:74px;background:#fff;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;color:#9aa3b2;font-size:13px;text-decoration:none;text-align:center;padding:0 8px}
.plogo:hover{border-color:var(--blue);color:var(--blue)}

/* mission band — full-width blue intro statement (left-aligned, readable measure) */
.missionband{background:var(--blue);color:#fff}
.missionband .wrap{padding-top:62px;padding-bottom:62px}
.missionband .mission{max-width:var(--measure)}
.missionband p{font-family:var(--serif);font-size:21px;line-height:1.6;color:#eaf1fb;margin:0 0 20px}
.missionband .btn{margin-top:8px}

/* cta banner */
.cta{background:var(--blue);border-radius:14px;padding:46px;text-align:center;color:#fff}
.cta h2{color:#fff;font-size:30px;font-weight:900;margin:0 0 10px}
.cta p{font-family:var(--sans);color:#D5DEF9;margin:0 0 24px}
.ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* footer */
.site-footer{background:var(--ink);color:#9aa3b2;margin-top:20px}
.site-footer .wrap{padding:48px 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}
.site-footer .name{font-family:var(--sans);color:#fff;font-weight:800;margin-bottom:10px}
.site-footer p{font-family:var(--sans);font-size:13.5px;margin:0;max-width:330px}
.site-footer h4{font-family:var(--sans);color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.site-footer a{display:block;color:#b9c0cc;font-family:var(--sans);font-size:14px;text-decoration:none;margin-bottom:9px}
.copyright{border-top:1px solid #23262d;color:#6b7280;font-family:var(--sans);font-size:12.5px;text-align:center;padding:18px}

/* two-col layouts */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.imgph{background:linear-gradient(135deg,#cdd9f4,#9db6ea);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#5b6b95;font-family:var(--sans);font-weight:600;font-size:13px;min-height:240px}
.with-aside{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start}
.detail{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.buybox{background:var(--surface);border-radius:12px;padding:26px}
.buybox .price{font-family:var(--sans);font-size:30px;font-weight:900;color:var(--ink)}
.buybox .mode{font-family:var(--sans);font-size:13px;color:var(--muted);margin-bottom:16px}
.linknote{font-family:var(--sans);font-size:12px;color:var(--muted);border:1px dashed #c3ccdb;border-radius:7px;padding:8px 11px;display:inline-block;margin-top:12px}

/* ---- Product / resource detail (Woo-style: small media left, details right) ---- */
.product{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start}
.product-media{position:sticky;top:24px}
.product-media img{display:block;width:100%;border:1px solid var(--line);border-radius:12px}
/* No-photo variant: topic-color tile + resource-type icon (most products) */
.media-tile{aspect-ratio:1/1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:20px}
.media-tile svg{width:54px;height:54px}
.media-tile .mt-type{font-family:var(--sans);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.product-info .eyebrow{margin-bottom:10px;display:block}
.product-info h1{font-family:var(--sans);font-size:44px;font-weight:900;line-height:1.1;color:var(--ink);margin:0 0 14px}
.product-info .short{font-size:19px;line-height:1.6;color:var(--body);margin:0 0 22px;max-width:54ch}
.product-price{font-family:var(--sans);font-size:30px;font-weight:900;color:var(--ink);line-height:1}
.product-mode{font-family:var(--sans);font-size:13px;color:var(--muted);margin:6px 0 20px}
.product-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.product-attrs{font-family:var(--sans);font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.product-attrs div{margin-bottom:6px}
.product-attrs b{color:var(--ink);font-weight:700}
.product-attrs a{color:var(--blue);text-decoration:none}
.product-attrs a.pill{color:var(--ink)}
.product-attrs a.pill:hover{filter:brightness(.95)}
@media(max-width:760px){
  .product{grid-template-columns:1fr;gap:24px}
  .product-media{position:static;max-width:300px}
}

@media(max-width:900px){
  .hero-split,.detail,.split,.with-aside,.statband .grid4,.grid4{grid-template-columns:1fr}
  .grid3,.stats{grid-template-columns:1fr 1fr}
}
/* ---- Resources nav dropdown (Topic / Audience) ---- */
.navwrap{position:relative}
.navwrap > a::after{content:"▾";font-size:11px;margin-left:5px;color:var(--muted)}
.navmenu{position:absolute;top:calc(100% + 12px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.14);padding:18px 22px;display:none;grid-template-columns:repeat(2,minmax(150px,1fr));gap:2px 30px;z-index:50;min-width:380px}
.navwrap:hover .navmenu,.navwrap:focus-within .navmenu{display:grid}
.navmenu .nm-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;margin:0 0 8px}
.navmenu a{display:block;font-size:14px;color:var(--ink);text-decoration:none;font-weight:600;padding:6px 0}
.navmenu a:hover{color:var(--blue)}
.navmenu .nm-all{grid-column:1 / -1;border-top:1px solid var(--line);margin-top:8px;padding-top:10px;color:var(--blue);font-weight:700}

/* Left alignment is now the default site-wide, so the old per-page .lcontent
   overrides are obsolete. Bands (stat band, CTA) stay centered by default;
   add .center / .lcontent helpers only where a specific block needs it. */

@media(max-width:900px){
  .hero-split,.detail,.split,.with-aside,.statband .grid4,.grid4{grid-template-columns:1fr}
  .grid3,.stats{grid-template-columns:1fr 1fr}
}
/* ---- Real logo (header light, footer dark) + brand dot-strip divider ---- */
.brand-logo{height:62px;width:auto;display:block}
.footer-logo{height:54px;width:auto;display:block;margin-bottom:14px}
.dotstrip{display:block;height:15px;width:auto;margin:0}      /* left by default */
.divider.center .dotstrip{margin:0 auto}                      /* centered only when opted in */

@media(max-width:680px){
  .mainnav{display:none}
  .grid2,.grid3,.stats,.statband .grid4{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr}
  .page-hero h1,.hero-split h1{font-size:32px}
  .brand-logo{height:50px}
}