/* ---------- Tokens ---------- */
  :root {
    --navy-900: #0b1733;
    --navy-800: #11204a;
    --navy-700: #1a2a5a;
    --ink-900:  #0e1530;
    --ink-700:  #2a3556;
    --ink-500:  #5a6586;
    --ink-400:  #8089a6;
    --line:     #e6e8f0;
    --line-2:   #eef0f6;
    --bg:       #f6f4ea;        /* warm cream behind hex pattern */
    --card:     #ffffff;
    --gold-500: #d4a437;
    --gold-600: #b88822;
    --gold-100: #f5ead0;
    --ribbon:   #2a3a8c;
    --shadow-sm: 0 1px 2px rgba(14, 21, 48, .06);
    --shadow-md: 0 8px 24px rgba(14, 21, 48, .08);
    --shadow-lg: 0 20px 48px rgba(14, 21, 48, .10);
    --secondary: #616471;
    --accent-gold: #C6A257;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    font-size: 16px;
    font-weight: 400;
    text-rendering: optimizeLegibility;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; }

  /* ---------- Header (kept) ---------- */
  .site-header {
    background: var(--navy-900);
    color: #fff;
    position: sticky; top: 0; z-index: 50;
  }
  .site-header__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    position: relative;
  }
  @media (min-width: 640px) {
    .site-header__inner { padding: 18px 24px; }
  }
  @media (min-width: 920px) {
    .site-header__inner { padding: 25px 0; }
  }
  .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .brand__mark {
    height: 42px; width: auto; flex: none;
    object-fit: contain;
    display: block;
  }
  @media (min-width: 640px) {
    .brand__mark { height: 48px; }
  }
  .brand__text {
    font-weight: 800; font-size: 13px; letter-spacing: .06em;
    line-height: 1.15;
  }
  .brand__text span {
    display: block; font-weight: 500; font-size: 10.5px;
    color: #b9c2dd; letter-spacing: .04em; margin-top: 2px;
  }

  .nav { display: none; }
  .nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
  .nav__list a {
    font-size: 12px; font-weight: 400; letter-spacing: 1.6px;
    color: #e7ebf7; padding: 8px 2px; position: relative;
  }
  .nav__list a:hover { color: #fff; }
  .nav__list a:hover::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: var(--gold-500); border-radius: 2px;
  }

  /* Mobile menu (off-canvas drawer) */
  .nav.is-open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--navy-800);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    padding: 8px 16px 16px;
    animation: navSlide .18s ease-out;
  }
  .nav.is-open .nav__list {
    flex-direction: column;
    gap: 0;
  }
  .nav.is-open .nav__list li {
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .nav.is-open .nav__list li:last-child { border-bottom: 0; }
  .nav.is-open .nav__list a {
    display: block;
    padding: 14px 4px;
    font-size: 13px;
  }
  .nav.is-open .nav__list a:hover::after { display: none; }
  @keyframes navSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  body.nav-open { overflow: hidden; }

  .header-cta {
    display: none;
    align-items: center; gap: 8px;
    padding: 10px 22px;
    border: 1.5px solid var(--accent-gold);
    color: #fff;
    background: transparent;
    border-radius: 999px;
    font-weight: 700; font-size: 12.5px; letter-spacing: .1em;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  .header-cta:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: #fff;
  }

  /* Subscribe CTA: solid gold + bell (static), animated shine sweep on hover */
  .header-cta--sub {
    position: relative; overflow: hidden;
    cursor: pointer; font-family: inherit; line-height: 1; white-space: nowrap;
    letter-spacing: .05em;
    background: #e5bc59;
    border-color: #e5bc59;
    color: #0e1530;
    box-shadow: 0 4px 14px rgba(229,188,89,.3);
  }
  .header-cta--sub:hover {
    background: #efcb6f; border-color: #efcb6f; color: #0e1530;
    box-shadow: 0 6px 22px rgba(229,188,89,.42);
  }
  .header-cta__bell,
  .header-cta__full,
  .header-cta__short { position: relative; z-index: 1; }
  .header-cta__bell { flex: none; }
  .header-cta--sub::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45px; z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.6) 50%, transparent);
    transform: skewX(-20deg) translateX(-60px);
    opacity: 0; pointer-events: none;
  }
  .header-cta--sub:hover::after { animation: ctaShine .75s ease; }
  @keyframes ctaShine {
    0%   { opacity: 0; transform: skewX(-20deg) translateX(-60px); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: skewX(-20deg) translateX(260px); }
  }
  @media (prefers-reduced-motion: reduce) { .header-cta--sub:hover::after { animation: none; } }
  .header-cta__full { display: none; }
  .header-cta__short { display: inline; }
  @media (min-width: 1040px) {
    .header-cta__full { display: inline; }
    .header-cta__short { display: none; }
  }

  /* Mobile drawer subscribe item (the pill CTA is hidden below 880) */
  .nav__subscribe { display: block; }
  .nav__subscribe-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    margin-top: 10px; padding: 13px 16px;
    background: #e5bc59; color: #0e1530; border: 0; border-radius: 10px;
    font: 800 13px/1 'Inter', sans-serif; letter-spacing: .04em; cursor: pointer;
  }
  .nav__subscribe-btn svg { flex: none; }
  @media (min-width: 880px) { .nav__subscribe { display: none; } }

/* ============================================================
   Subscribe popup ("Alert me when 2027 opens")
============================================================ */
.subm { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; }
.subm[hidden] { display: none; }
.subm__backdrop {
  position: absolute; inset: 0;
  background: rgba(14, 21, 48, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s ease;
}
.subm.is-open .subm__backdrop { opacity: 1; }
.subm__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: #fff;
  border: 1px solid var(--line, #e7e3d6);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(14, 21, 48, .22);
  padding: 30px 30px 26px;
  color: var(--ink-900, #0e1530);
  transform: translateY(12px) scale(.98); opacity: 0;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.subm.is-open .subm__dialog { transform: none; opacity: 1; }
.subm__x {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: #f4f2ea; color: var(--ink-500, #5a6586);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.subm__x:hover { background: #ece8da; color: var(--ink-900, #0e1530); }

.subm__panel { position: relative; }
.subm__eyebrow {
  display: inline-block;
  font: 700 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600, #b88822); margin-bottom: 11px;
}
.subm__title {
  margin: 0 0 8px; font-size: 21px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.008em; color: var(--ink-900, #0e1530);
}
.subm__lead { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-500, #5a6586); }
.subm__form { margin: 0; }
.subm__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subm__row { display: flex; gap: 8px; }
.subm__input {
  flex: 1 1 auto; min-width: 0;
  padding: 11px 14px; border-radius: 9px;
  border: 1px solid var(--line, #d9d4c4);
  background: #fff; color: var(--ink-900, #0e1530);
  font: 400 14px/1.2 'Inter', system-ui, sans-serif;
}
.subm__input::placeholder { color: #97a0b8; }
.subm__input:focus {
  outline: 0; border-color: var(--gold-500, #d4a437);
  box-shadow: 0 0 0 3px rgba(212,164,55,.18);
}
.subm__submit {
  flex: none; padding: 11px 20px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--gold-500, #d4a437); color: #0e1530;
  font: 700 13px/1 'Inter', system-ui, sans-serif; letter-spacing: .01em;
  white-space: nowrap; transition: background .15s ease, transform .1s ease;
}
.subm__submit:hover { background: var(--gold-600, #c69428); }
.subm__submit:active { transform: translateY(1px); }
.subm__submit:disabled { opacity: .6; cursor: default; }
.subm__msg { margin: 10px 0 0; font-size: 12.5px; color: #b4361f; }
.subm__fine { margin: 12px 0 0; font-size: 11.5px; color: var(--ink-400, #8a93ab); line-height: 1.5; }

.subm__panel--success { text-align: center; padding: 8px 0 4px; }
.subm__check {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 14px;
  background: #f6efd9; color: var(--gold-600, #b88822);
  border: 1px solid #e8d9a8;
}
.subm__done { margin-top: 16px; width: 100%; }

body.subm-open { overflow: hidden; }

@media (max-width: 520px) {
  .subm__dialog { padding: 26px 20px 22px; }
  .subm__title { font-size: 20px; }
  .subm__row { flex-direction: column; }
  .subm__submit { width: 100%; padding: 12px; }
}

  .menu-btn {
    width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--secondary);
    background: transparent; color: #fff;
    display: grid; place-items: center;
    transition: background .15s ease, border-color .15s ease;
  }
  .menu-btn:hover { background: rgba(255,255,255,.06); border-color: var(--accent-gold); }
  .menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: var(--accent-gold); }

  @media (min-width: 880px) {
    .nav { display: block; }
    .header-cta { display: inline-flex; }
    .menu-btn { display: none; }
  }

  /* ---------- Background pattern (kept) ---------- */
  .hex-bg {
    position: relative;
    background-color: var(--bg);
    background-image: url("https://awards.thehackernews.com/wp-content/themes/awards/assets/images/single-winner-bg.webp");
    background-repeat: repeat;
    background-position: center top;
    background-size: cover;
  }

  /* ---------- Layout ---------- */
  .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 16px;
    position: relative;
  }
  @media (min-width: 640px) {
    .container { padding: 0 24px; }
  }
  @media (min-width: 920px) {
    .container { padding: 0 32px; }
  }

  /* ---------- Hero / company card ---------- */
  .hero { padding: 22px 0 28px; }
  @media (min-width: 640px) {
    .hero { padding: 32px 0 28px; }
  }
  .profile-card {
    background: var(--card);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    position: relative;
  }
  .profile-card__top {
    display: flex;
    flex-direction: column;
    background:
      radial-gradient(circle at 12% 0%, rgba(212,164,55,.18), transparent 40%),
      radial-gradient(circle at 88% 0%, rgba(42,58,140,.16), transparent 45%),
      linear-gradient(180deg, #0e1c40 0%, #142457 100%);
    color: #fff;
    /* CRITICAL: padding-bottom MUST equal the body's negative margin-top
       (-48 / -80). That alignment makes the content area end exactly at
       the logo's top edge, so the title's auto-margin centering produces
       visually equal gaps between (ribbon → title) and (title → logo). */
    padding: 22px 18px 48px;
    min-height: 240px;
    position: relative;
  }
  .crumbs {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: #c9d2ed; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
  }
  .crumbs span { opacity: .7; }
  .crumbs svg { width: 12px; height: 12px; opacity: .6; }

  .ribbon {
    display: inline-flex; align-items: center; gap: 6px;
    /* No auto margin — the title's auto top/bottom margins handle the
       centering. Auto on ribbon was competing with the title's autos and
       creating an extra gap below the ribbon. */
    margin: 0;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    padding: 5px 10px 5px 6px;
    border-radius: 999px;
    font-size: 9.5px; font-weight: 500; letter-spacing: .06em;
    /* Mobile: ribbon spans full width. The medal moves down below this row
       via .award-medal-img { top: 50px } so it doesn't share horizontal
       space with the ribbon. Tablet+ keeps the medal inline next to it. */
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: flex-start;
  }
  @media (min-width: 640px) {
    .ribbon {
      font-size: 12px; letter-spacing: .12em;
      padding: 6px 12px 6px 8px; gap: 8px;
      max-width: none;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
  }
  .ribbon__dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(212,164,55,.25);
  }

  .nomination-title {
    /* auto top/bottom margins center the title within the flex column. The
       parent's padding-bottom matches the body's logo overlap, so the
       content area ends exactly at the logo's top edge → centering inside
       this column = equal visible gaps above and below. */
    margin: auto 0;
    /* Mobile right-pad clears the 120px medal + 12px offset. Desktop
       overrides below bump it back up. */
    padding: 12px 136px 12px 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.3;
    text-wrap: balance;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .award-title {
    /* mobile: flows under nomination title in the blue area */
    margin-top: 14px;
    padding-right: 130px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.25;
    color: #eed17f;
  }
  .award-title span {
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
  }
  .award-title span::after {
    content: "";
    position: absolute;
    left: -4px; right: -4px; bottom: -2px;
    height: 12px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23eed17f' stop-opacity='0'/><stop offset='.12' stop-color='%23eed17f'/><stop offset='.5' stop-color='%23eed17f'/><stop offset='.88' stop-color='%23eed17f'/><stop offset='1' stop-color='%23eed17f' stop-opacity='0'/></linearGradient></defs><path d='M4 14 Q 110 -2 216 14' stroke='url(%23g)' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
  }
  @media (min-width: 640px) {
    .nomination-title { font-size: 28px; padding: 14px 200px 14px 0; line-height: 1.3; font-weight: 600; }
    /* tablet+: pin to vertical center of profile-id row, left-pad to clear the logo, right-pad to clear medal.
       Font-size stays 16px at every breakpoint (was 18px / 20px). */
    .award-title {
      position: absolute;
      left: 32px; right: 32px;
      bottom: 24px;
      margin-top: 0;
      padding-left: 154px;  /* logo width (130) + gap (24) */
      padding-right: 220px; /* clear medal */
    }
  }
  @media (min-width: 920px) {
    .nomination-title { font-size: 28px; padding: 14px 240px 14px 0; line-height: 1.3; font-weight: 600; }
    .award-title {
      left: 40px; right: 40px;
      bottom: 32px;
      padding-left: 168px; /* logo 140 + gap 28 */
      padding-right: 260px;
    }
  }

  .profile-card__body {
    padding: 0 18px 24px;
    margin-top: -48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .profile-id {
    /* Flex (not grid) so the logo + tag column are ALWAYS side-by-side at every
       viewport. Grid templates were inheriting odd values from old cached CSS.
       Flex with a fixed-basis logo + flex-grow text is harder to break. */
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
  }
  .profile-id > .logo-slot { flex: 0 0 auto; }
  .profile-id > .profile-id__text { flex: 1 1 auto; }
  .logo-slot {
    width: 96px; height: 96px; flex: none;
    background: #fff;
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    overflow: hidden;
    position: relative;
  }
  .logo-slot img { width: 78%; height: 78%; object-fit: contain; }

  /* align-items: flex-end so tags sit at the bottom of the logo's vertical area
     (in the white card, below the dark/white boundary) instead of being half-
     stuck in the dark hero overlap. */
  .profile-id__text { min-width: 0; width: 100%; display: flex; align-items: flex-end; min-height: 130px; padding-bottom: 4px; }
  .eyebrow {
    font-size: 11.5px; font-weight: 700; letter-spacing: .22em;
    color: var(--gold-600); text-transform: uppercase;
  }
  .profile-name {
    margin: 6px 0 12px;
    font-size: 24px; font-weight: 700; letter-spacing: -.005em;
    line-height: 1.2;
    color: var(--ink-900);
    text-wrap: balance;
  }
  .profile-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .tag {
    /* Mobile: more compact pills. Tablet+ bumps them back up below. */
    font-size: 11px; font-weight: 600;
    padding: 3px 10px;
    background: #faf8f1;
    border: 1px solid var(--gold-500);
    border-radius: 999px;
    color: var(--ink-900);
    white-space: nowrap;
  }
  @media (min-width: 640px) {
    .profile-tags { gap: 8px; }
    .tag { font-size: 13px; padding: 5px 14px; }
  }
  .tag--primary {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
  }

  /* Category breadcrumb (alternative to the .profile-tags pills above).
     Clean text, no boxes. "All Winners" is the quiet link; the category is bold
     dark and the subcategory is gold since it's the actual award. */
  .profile-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 600; line-height: 1.4;
  }
  .profile-crumbs__sep { color: var(--gold-500); font-weight: 400; font-size: 16px; }
  .profile-crumbs__item { color: var(--ink-900); font-weight: 700; }
  .profile-crumbs__item--current { color: var(--gold-600); font-weight: 700; }
  /* Lift the breadcrumb up off the bottom edge a touch (stays in the white
     area; full centering would push it up into the dark navy band where the
     dark text vanishes). */
  .profile-id__text:has(.profile-crumbs) { padding-bottom: 18px; }

  /* meta row */
  .meta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
  }
  .meta {
    display: flex; align-items: center; gap: 10px;
    min-width: 0;
  }
  .meta__icon {
    width: 38px; height: 38px; flex: none;
    border-radius: 10px;
    background: #f4f1e1;
    color: var(--gold-600);
    display: grid; place-items: center;
  }
  .meta__icon svg { width: 18px; height: 18px; }
  .meta__label {
    font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    color: var(--ink-400); text-transform: uppercase;
  }
  .meta__val {
    font-size: 13px; font-weight: 500; color: var(--ink-900);
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .meta__val a:hover { color: var(--gold-600); }

  .award-medal-img {
    /* Mobile: medal sits BELOW the ribbon row, in the top-right corner of
       the dark hero. Title still pads on the right since the medal is in
       the title's vertical band. Tablet/desktop break out of this clamp. */
    position: absolute;
    top: 56px; right: 10px;
    width: auto; height: auto;
    max-height: 120px;
    max-width: 120px;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
  }
  @media (min-width: 640px) {
    .award-medal-img {
      top: 18px; right: 28px; bottom: 18px;
      width: auto;
      height: calc(100% - 36px);
      max-height: none;        /* fill the hero height, don't clamp */
      max-width: 320px;        /* still cap horizontal so it can't push the title */
    }
  }
  @media (min-width: 920px) {
    .award-medal-img {
      top: 22px; right: 36px; bottom: 22px;
      width: auto;
      height: calc(100% - 44px);
      max-height: none;
      max-width: 380px;
    }
  }

  /* stats strip */
  .stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .stat {
    background: #fff;
    padding: 14px 14px;
  }
  .stat__num {
    font-size: 22px; font-weight: 800; color: var(--ink-900);
    letter-spacing: -.01em;
  }
  .stat__num span { color: var(--gold-600); }
  .stat__label {
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    color: var(--ink-400); text-transform: uppercase;
    margin-top: 2px;
  }

  @media (min-width: 640px) {
    /* padding-bottom 80 = body margin-top -80; required for equal title gaps */
    .profile-card__top { padding: 30px 32px 80px; min-height: 300px; }
    .profile-card__body { padding: 0 32px 28px; margin-top: -80px; }
    .profile-id { gap: 24px; }
    .profile-id__text { min-height: 130px; }
    .logo-slot { width: 130px; height: 130px; }
    .profile-name { font-size: 32px; }
    .meta-row { grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
  }
  @media (min-width: 920px) {
    .hero { padding: 44px 0 32px; }
    /* padding-bottom 80 = body margin-top -80; required for equal title gaps */
    .profile-card__top { padding: 38px 40px 80px; min-height: 300px; }
    .profile-card__body { padding: 0 40px 36px; }
    .profile-id { gap: 20px; }
    .profile-id__text { min-height: 130px; }
    .logo-slot { width: 140px; height: 140px; }
    .meta-row { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---------- Main content layout ---------- */
  .main { padding: 8px 0 80px; position: relative; }

  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* sidebar removed — layout stays single column at all widths */

  /* content column */
  .content {
    background: #fff;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    overflow: hidden;
  }

  /* tabs */
  .tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line);
    min-height: 56px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--ink-500);
    font-weight: 500; font-size: 14px;
    letter-spacing: .01em;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    line-height: 1;
    transition: color .15s ease, border-color .15s ease;
  }
  .tab[aria-selected="true"], .tab:hover {
    color: var(--ink-900);
  }
  .tab[aria-selected="true"] {
    border-bottom-color: var(--gold-500);
    font-weight: 600;
  }
  @media (min-width: 640px) {
    .tabs { padding: 0 28px; gap: 8px; min-height: 64px; }
    .tab { padding: 0 18px; font-size: 15px; }
  }

  .section { padding: 22px 18px; border-bottom: 1px solid var(--line-2); }
  .section:last-child { border-bottom: 0; }
  @media (min-width: 640px) {
    .section { padding: 32px 32px; }
  }

  .section__head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
  }
  .section__num {
    width: 28px; height: 28px; flex: none;
    border-radius: 8px;
    background: var(--gold-100);
    color: var(--gold-600);
    font-size: 12px; font-weight: 800;
    display: grid; place-items: center;
    letter-spacing: .02em;
  }
  .section__title {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: var(--ink-900); letter-spacing: -.005em;
  }
  @media (min-width: 640px) {
    .section__title { font-size: 22px; }
  }

  .prose p {
    color: var(--ink-700);
    font-size: 14.5px;            /* mobile-first; tablet+ bumps to 16px */
    line-height: 1.65;
    margin: 0 0 14px;
    text-wrap: pretty;
    font-weight: 400;
  }
  .prose p:last-child { margin-bottom: 0; }
  /* Inline headings inside the content sections (vendor/admin can include
     h2-h6; h1 is also covered defensively even though the sanitizer
     strips it). Single 18px/700 for any heading depth. */
  .prose h1, .prose h2, .prose h3,
  .prose h4, .prose h5, .prose h6 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-900);
    margin: 22px 0 10px;
    letter-spacing: -.005em;
  }
  .prose > h1:first-child,
  .prose > h2:first-child,
  .prose > h3:first-child,
  .prose > h4:first-child,
  .prose > h5:first-child,
  .prose > h6:first-child { margin-top: 0; }
  .prose .lead {
    color: var(--ink-900);
    font-weight: 500;
  }
  .prose ul, .prose ol {
    margin: 0 0 14px;
    padding-left: 22px;
    color: var(--ink-700);
    font-size: 14.5px;            /* mobile-first; tablet+ bumps to 16px */
    line-height: 1.65;
    font-weight: 400;
  }
  .prose ul li, .prose ol li { margin-bottom: 8px; }
  .prose ul li::marker, .prose ol li::marker { color: var(--gold-600); }
  .prose strong { color: var(--ink-900); font-weight: 700; }
  @media (min-width: 640px) {
    .prose p, .prose ul, .prose ol { font-size: 16px; line-height: 1.75; }
  }
  .prose mark {
    background: linear-gradient(180deg, transparent 60%, var(--gold-100) 60%);
    color: inherit;
    padding: 0 2px;
  }
  /* Tables inside section bodies — clear bordered grid. Vendor / admin
     content may include a comparison table; without these rules the
     cells just sit there as borderless text columns. */
  .prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 18px;
    /* Match the surrounding prose font sizes so the table doesn't visually
       jump (prose p/ul/ol is 14.5px on mobile, 16px on tablet+). */
    font-size: 14.5px;
    line-height: 1.6;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
  }
  .prose thead { background: #faf8f1; }
  .prose th, .prose td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--line);
    color: var(--ink-700);
    /* Inherit table's font-size so th and td are the same size — only
       weight + background differentiate them. */
    font-size: inherit;
    line-height: inherit;
  }
  .prose th {
    font-weight: 700;
    color: var(--ink-900);
    background: #faf8f1;
    letter-spacing: .01em;
  }
  .prose tbody tr:nth-child(even) td { background: #fbfaf3; }
  .prose tbody tr:hover td { background: #fffbef; }
  /* Horizontally scrollable on narrow mobile so wide tables don't blow out
     the layout. */
  .prose table {
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
  @media (min-width: 640px) {
    .prose table { display: table; overflow-x: visible; font-size: 16px; }
    .prose th, .prose td { padding: 12px 16px; }
  }

  /* features grid */
  .features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
  }
  @media (min-width: 640px) {
    .features { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  }
  .feature {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px;
    background: #fff;
    transition: border-color .15s ease, transform .15s ease;
  }
  .feature:hover { border-color: var(--gold-500); transform: translateY(-2px); }
  .feature__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ink-900);
    color: var(--gold-500);
    display: grid; place-items: center;
    margin-bottom: 12px;
  }
  .feature__icon svg { width: 18px; height: 18px; }
  .feature__title {
    margin: 0 0 4px;
    font-size: 15px; font-weight: 700;
    color: var(--ink-900);
  }
  .feature__body {
    margin: 0; font-size: 13.5px; color: var(--ink-500);
    line-height: 1.55;
  }

  /* differentiators (numbered list) */
  .diffs { display: grid; gap: 14px; margin-top: 6px; }
  .diff {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r-md);
    background: #faf8f1;
    border: 1px solid var(--line-2);
  }
  .diff__num {
    width: 42px; height: 42px; border-radius: 12px;
    background: #fff;
    color: var(--gold-600);
    font-weight: 800; font-size: 18px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
  }
  .diff__title {
    margin: 0 0 4px; font-size: 15px; font-weight: 700;
    color: var(--ink-900);
  }
  .diff__body { margin: 0; color: var(--ink-700); font-size: 14px; line-height: 1.6; }

  /* share strip */
  .share {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line-2);
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  }
  .share__label {
    font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-400);
  }
  .share__icons { display: flex; gap: 10px; flex-wrap: wrap; }
  .share__btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #faf8f1;
    border: 1px solid var(--line);
    color: var(--ink-700);
    display: grid; place-items: center;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
  }
  .share__btn:hover {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: #fff;
    transform: translateY(-2px);
  }
  .share__btn:focus-visible {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px rgba(212,164,55,.25);
  }
  .share__btn svg { width: 16px; height: 16px; }
  .share__btn.is-copied {
    background: var(--gold-100);
    color: var(--gold-600);
    border-color: var(--gold-500);
  }

  /* gallery — up to 5 equal images, fully responsive */
  .gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 6px;
  }
  .gallery img {
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
  }
  @media (min-width: 520px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 760px) {
    .gallery { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 1000px) {
    .gallery { grid-template-columns: repeat(5, 1fr); gap: 14px; }
    .gallery img { aspect-ratio: 1/1; }
  }

  /* quote */
  .quote {
    background: var(--ink-900);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
    margin-top: 6px;
  }
  .quote::before {
    content: "“";
    position: absolute;
    top: -20px; right: 14px;
    font-size: 140px;
    font-family: Georgia, serif;
    color: var(--gold-500);
    opacity: .25;
    line-height: 1;
  }
  .quote__text {
    font-size: 16px; line-height: 1.6;
    font-weight: 500;
    margin: 0 0 14px;
    color: #fff;
  }
  .quote__author {
    display: flex; align-items: center; gap: 12px;
  }
  .quote__avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    display: grid; place-items: center;
    color: var(--ink-900);
    font-weight: 800;
  }
  .quote__name { font-size: 13px; font-weight: 700; color: #fff; }
  .quote__role { font-size: 12px; color: #c9d2ed; }

  /* ---------- Sidebar ---------- */
  .sidebar {
    display: grid; gap: 16px;
    position: sticky; top: 88px;
    align-self: start;
  }
  .side-card {
    background: #fff;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    border: 1px solid var(--line);
  }
  .side-card__title {
    font-size: 11px; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-400);
    margin: 0 0 14px;
  }

  .award-block { display: flex; gap: 14px; align-items: center; }
  .award-block img { width: 84px; height: auto; flex: none; }
  .award-block__text { min-width: 0; }
  .award-block__name {
    font-size: 14px; font-weight: 800; color: var(--ink-900); line-height: 1.25;
  }
  .award-block__sub {
    font-size: 12.5px; color: var(--ink-500); margin-top: 4px;
  }

  .info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .info-list li {
    display: grid; grid-template-columns: 32px 1fr; gap: 10px;
    align-items: flex-start;
  }
  .info-list .meta__icon { width: 32px; height: 32px; }
  .info-list .meta__icon svg { width: 14px; height: 14px; }

  .cta-card {
    background:
      linear-gradient(180deg, #142457 0%, #0b1733 100%);
    color: #fff;
    border-radius: var(--r-lg);
    padding: 22px;
    position: relative;
    overflow: hidden;
  }
  .cta-card::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 90% 0%, rgba(212,164,55,.25), transparent 50%),
      radial-gradient(circle at 10% 100%, rgba(212,164,55,.15), transparent 50%);
    pointer-events: none;
  }
  .cta-card > * { position: relative; }
  .cta-card__title {
    margin: 0 0 6px; font-size: 18px; font-weight: 800;
    line-height: 1.25;
  }
  .cta-card__body {
    margin: 0 0 14px; font-size: 13.5px; color: #c9d2ed; line-height: 1.55;
  }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 700; font-size: 13px;
    border: 0;
    transition: transform .12s ease, box-shadow .15s ease;
  }
  .btn--gold {
    background: var(--gold-500);
    color: var(--ink-900);
    box-shadow: 0 4px 14px rgba(212,164,55,.4);
  }
  .btn--gold:hover { transform: translateY(-1px); }
  .btn--ghost {
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    padding: 9px 16px;
  }
  .btn--ghost:hover { border-color: #fff; }
  .btn--full { width: 100%; }
  .btn svg { width: 14px; height: 14px; }

  .judges {
    display: flex; align-items: center; gap: 8px;
    margin-top: 14px;
  }
  .judges__avatars { display: flex; }
  .judges__avatars span {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid #142457;
    background: linear-gradient(135deg, #d4a437, #f6d77d);
  }
  .judges__avatars span + span { margin-left: -8px; }
  .judges__text { font-size: 11.5px; color: #c9d2ed; }

  /* Related card */
  .related-list { display: grid; gap: 12px; }
  .related {
    display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
    padding: 10px; border-radius: 10px;
    border: 1px solid transparent;
  }
  .related:hover { border-color: var(--line); background: #faf8f1; }
  .related__logo {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(135deg, #e8e3cc, #d6cda5);
    display: grid; place-items: center;
    color: var(--ink-500);
  }
  .related__logo svg { width: 18px; height: 18px; opacity: .7; }
  .related__name { font-size: 13.5px; font-weight: 700; color: var(--ink-900); }
  .related__cat { font-size: 11.5px; color: var(--ink-400); }
  .related__arrow { color: var(--ink-400); }
  .related:hover .related__arrow { color: var(--gold-600); }

  /* ---------- Footer ---------- */
  .footer {
    background: #fff;
    color: var(--ink-700);
    padding: 56px 0 0;
    position: relative;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 36px;
  }
  .footer-col__title {
    margin: 0 0 14px;
    font-size: 14px; font-weight: 800; letter-spacing: .08em;
    color: var(--ink-900); text-transform: uppercase;
  }
  .footer-about__text {
    margin: 0 0 22px;
    font-size: 14px; line-height: 1.7;
    color: var(--ink-700);
    max-width: 38ch;
  }
  .nominate-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 36px;
    border-radius: 999px;
    background: linear-gradient(180deg, #cfa961 0%, #a37f3c 100%);
    color: #fff;
    font-weight: 800; font-size: 13.5px; letter-spacing: .12em;
    border: 0;
    box-shadow: 0 6px 18px rgba(163,127,60,.35);
    transition: transform .12s ease, box-shadow .15s ease;
  }
  .nominate-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(163,127,60,.45); }

  .footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 24px;
    /* Parent .footer-top is itself a grid with stretch-by-default cells; without
       these the rows here inflate to fill the tallest column, leaving huge
       vertical gaps between menu items. */
    align-self: start;
    align-content: start;
    grid-auto-rows: min-content;
  }
  .footer-links a {
    display: block;
    font-size: 14.5px; font-weight: 500;
    color: var(--ink-700);
    padding: 2px 0;
  }
  .footer-links a:hover { color: var(--gold-600); }

  .footer-brand {
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-start;
  }
  /* SVG brand logos in the footer right column */
  .footer-brand__hn-img {
    height: 28px;
    width: auto;
    display: block;
  }
  .footer-brand__awards-img {
    height: 48px;
    width: auto;
    display: block;
  }

  .footer-bottom {
    border-top: 1px solid var(--line);
    padding: 14px 0 18px;
    display: flex; flex-direction: column; gap: 8px;
    align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--ink-500);    /* mobile compact */
    text-align: center;
  }
  .footer-bottom__links { display: flex; gap: 14px; }
  .footer-bottom__links a { color: #4a5a8c; }
  .footer-bottom__links a:hover { color: var(--gold-600); }

  /* Mobile compact footer: hide the menu column + the brand-logo column,
     leave only the About block + the slim footer-bottom. */
  .footer-links, .footer-brand { display: none; }

  @media (min-width: 760px) {
    .footer { padding-top: 72px; }
    .footer-top {
      grid-template-columns: 1.2fr 1.4fr 1fr;
      gap: 48px;
      padding-bottom: 56px;
    }
    .footer-links { display: grid; }    /* restore the menu column */
    .footer-brand { display: flex; }    /* restore the logo column */
    .footer-bottom {
      flex-direction: row;
      padding: 22px 0 28px;
      font-size: 13px;
      text-align: left;
    }
  }

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