/* ============================================================
   NEWSLETTER — page-specific styles. Tokens only.
   Desktop values measured from Figma 8274:1931; mobile 9377:51.
   ============================================================ */

/* ---------- SECTION RHYTHM ----------
   Desktop seams measured from Figma content edges:
   hero→read-by 99 · read-by→raving 80 · raving→included 80 ·
   included→archive 80 · archive→authors 80 · authors→cta 108 · cta→footer 130.
   Mobile: 44 / 68 / 80 / 80 / 80 / 80 / 40 (measured from 9377:51). */
@media (min-width: 768px) {
  #read-by { margin-top: 99px; }
  #raving, #included, #archive, #authors { margin-top: var(--bh-space-80); }
  #subscribe { margin-top: 108px; padding-bottom: 130px; }
}
@media (max-width: 767px) {
  #read-by { margin-top: 44px; }
  #raving { margin-top: 68px; }
  #included, #archive, #authors, #subscribe { margin-top: var(--bh-m-section-rhythm); }
  #subscribe { padding-bottom: var(--bh-space-40); }
}

/* ---------- Announcement bar (shared chrome, matches home) ---------- */
.bh-announce {
  background: var(--bh-dark);
  padding-block: 9px;
  text-align: center;
}
.bh-announce p {
  font-size: var(--bh-fs-fine);
  font-weight: var(--bh-w-semibold);
  line-height: 17px; /* Figma: announce bar 35px = 9 + 17 + 9 */
  color: rgba(255,255,255,0.92);
}
@media (max-width: 767px) {
  .bh-announce { padding-inline: var(--bh-space-16); }
  .bh-announce p { font-size: 11px; }
}

/* ---------- Dropdown internals (shared chrome, matches home) ---------- */
.bh-dd-cols { display: flex; gap: var(--bh-space-30); align-items: stretch; }
.bh-dd-col { flex: 1 1 220px; min-width: 0; }
.bh-dd-colhead { display: flex; align-items: center; gap: var(--bh-space-12); margin-bottom: var(--bh-space-12); color: inherit; text-decoration: none; }
.bh-dd-product { display: block; font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 17px; color: var(--bh-ink); }
.bh-dd-sub { display: block; font-size: 12px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-dd-rule { border: 0; border-top: 1px solid #EFECF3; margin: var(--bh-space-12) 0; }
.bh-dd-tile--lg { width: 40px; height: 40px; }
.bh-dd-tile--xl { width: 64px; height: 64px; }
.bh-dd-item .bh-dd-tile { width: 34px; height: 34px; }
.bh-dd-about .bh-dd-item .bh-dd-tile, .bh-dd-resources .bh-dd-item .bh-dd-tile { width: 40px; height: 40px; }
.bh-dd-item .bh-dd-name { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
/* keep name + ADD-ON pill on ONE line; long names without a pill may still wrap (review A2) */
.bh-dd-item { display: flex; align-items: center; flex-wrap: nowrap; }
.bh-dd-item:has(.bh-tag--addon) .bh-dd-name { white-space: nowrap; }
.bh-dd-item .bh-tag--addon {
  flex: 0 0 auto; white-space: nowrap;
  /* same chip as the mobile drill rows (review A2) */
  background: #F2F1F4; border: none; border-radius: var(--bh-r-6);
  padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium);
  letter-spacing: 0; text-transform: none; color: #828794;
}
.bh-dd-featured--crm { min-height: 390px; }
.bh-dd-featured-btn { min-width: 150px; height: 44px; padding-block: 0; font-size: 15px; }
.bh-dd-about, .bh-dd-resources {
  border-radius: var(--bh-r-20);   /* was 24 - off the 8/12/16/20 scale */
}
.bh-dd-eyebrow {
  font-size: 11px; font-weight: var(--bh-w-bold); letter-spacing: 1px;
  text-transform: uppercase; color: #99A2B3; margin-bottom: var(--bh-space-12);
}
.bh-dd-eyebrow--white { color: var(--bh-white); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-eyebrow--pink { color: var(--bh-pink); letter-spacing: 1.5px; font-size: 12px; }
.bh-dd-item { position: relative; }
.bh-dd-item .bh-tag--addon { margin-left: var(--bh-space-8); }

.bh-dd-featured {
  flex: 0 0 340px; border-radius: var(--bh-r-16); overflow: hidden;
  position: relative; display: flex; flex-direction: column;
  padding: var(--bh-space-24); gap: var(--bh-space-12);
}
.bh-dd-featured--crm {
  background: linear-gradient(233.8deg, #4C1D95 14.5%, var(--bh-violet) 85.5%);
  position: relative;
}
.bh-dd-featured--crm::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.10; mix-blend-mode: multiply;
}
.bh-dd-featured--crm > * { position: relative; z-index: 1; }
.bh-dd-featured-title { font-family: var(--bh-font-display); font-weight: var(--bh-w-xbold); font-size: 24px; color: var(--bh-white); }
.bh-dd-featured-title--lg { font-size: 30px; max-width: 380px; }
.bh-dd-featured-desc { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-medium); color: var(--bh-white-85); }
.bh-dd-featured-btn { background: var(--bh-white); color: #6D28D9; margin-top: auto; align-self: flex-start; padding: var(--bh-space-12) var(--bh-space-24); }
.bh-dd-featured--news, .bh-dd-featured--pillow { padding: 0; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--bh-r-20); }
.bh-dd-featured--pillow { flex: 1 1 auto; }
.bh-dd-featured-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bh-dd-featured-overlay {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--bh-space-12);
  justify-content: flex-end; height: 100%; min-height: 300px; padding: var(--bh-space-24);
  background: linear-gradient(180deg, rgba(20,13,31,0) 35%, rgba(20,13,31,0.92) 100%);
  border-radius: inherit;
}
.bh-dd-featured--pillow .bh-dd-featured-overlay {
  justify-content: center; align-items: flex-start;
  background: linear-gradient(90deg, rgba(26,15,36,0.94) 0%, rgba(26,15,36,0.72) 42%, rgba(26,15,36,0) 72%);
}
.bh-dd-featured--news .bh-dd-featured-title { font-size: 20px; }
.bh-dd-featured-link { font-size: 13px; font-weight: var(--bh-w-bold); color: var(--bh-pink); }
/* PMI news card — exact Figma spec (8528:2979 / 2981 / 2982 / 2983):
   32px side padding, 35px bottom, eyebrow 16 above the title, title 44 above the link,
   eyebrow + link both #F24476. */
.bh-dd-featured--news .bh-dd-featured-overlay {
  gap: 0; padding: var(--bh-space-24) var(--bh-space-32) 35px;
}
.bh-dd-featured--news .bh-dd-eyebrow--pink { color: var(--bh-pink); margin-bottom: var(--bh-space-16); }
.bh-dd-featured--news .bh-dd-featured-title { margin-bottom: 44px; }
/* the whole card is the hit area; the "Read the story" link carries it */
.bh-dd-featured--news { position: relative; }
.bh-dd-featured--news .bh-dd-featured-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bh-dd-featured--pillow .bh-btn { align-self: flex-start; }
/* nav dropdown: extra air above the Pillow Talk Subscribe button (2026-08-27) */
.bh-dd-featured--pillow .bh-dd-featured-overlay .bh-btn { margin-top: var(--bh-space-12); }

/* ---------- Mobile menu internals (shared chrome, matches home) ---------- */
.bh-mm-list { padding: var(--bh-space-16) var(--bh-space-24) 0; }
.bh-mm-list a {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; border-bottom: 1px solid #ECECEF;
  font-size: 22px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
}
.bh-mm-chev { font-size: 24px; font-weight: var(--bh-w-medium); color: var(--bh-body); }
.bh-drill { padding: 0 var(--bh-space-20) var(--bh-space-24); }
.bh-drill-header { margin: 0 calc(-1 * var(--bh-space-20)) var(--bh-space-16); }
.bh-drill-back {
  font-size: 18px; font-weight: var(--bh-w-semibold); color: var(--bh-ink);
  padding-block: var(--bh-space-12);
}
.bh-drill-title { font-size: 26px; font-weight: var(--bh-w-xbold); color: var(--bh-ink); margin-bottom: var(--bh-space-16); }
.bh-drill-group {
  font-size: 12px; font-weight: var(--bh-w-xbold); letter-spacing: 0.6px;
  color: #828794; text-transform: uppercase; margin: var(--bh-space-20) 0 var(--bh-space-12);
}
.bh-drill-row { display: flex; align-items: center; gap: var(--bh-space-12); padding-block: var(--bh-space-8); }
.bh-drill-name { display: block; font-size: 16px; font-weight: var(--bh-w-semibold); color: var(--bh-ink); }
.bh-drill-desc { display: block; font-size: 12.5px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-tag--addon-m { background: #F2F1F4; border-radius: var(--bh-r-6); padding: 3px 7px; font-size: 10px; font-weight: var(--bh-w-medium); color: #828794; }
.bh-drill-card {
  display: block; border-radius: 18px; padding: var(--bh-space-24);
  margin-top: var(--bh-space-24); position: relative; overflow: hidden;
}
.bh-drill-card--crm { background: linear-gradient(90deg, var(--bh-violet) 0%, #6D32D5 100%); }
.bh-drill-card--news { background: var(--bh-dark); }
.bh-drill-card--pillow { background: var(--bh-dark); }
.bh-drill-card-eyebrow { font-size: 11px; font-weight: var(--bh-w-xbold); letter-spacing: 1px; color: rgba(255,255,255,0.85); margin-bottom: var(--bh-space-8); }
.bh-drill-card-eyebrow--pink { color: var(--bh-pink); }
.bh-drill-card-title { display: flex; align-items: center; gap: var(--bh-space-12); font-size: 20px; font-weight: var(--bh-w-xbold); color: var(--bh-white); margin-bottom: var(--bh-space-8); }
.bh-drill-card-desc { font-size: 13.5px; color: var(--bh-white-85); margin-bottom: var(--bh-space-12); }
.bh-drill-card-link { font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); color: var(--bh-pink); }
.bh-drill-card-btn { padding: 9px var(--bh-space-16); font-size: 13px; border-radius: 10px; display: inline-flex; }
.bh-mm-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 18px 0 22px;
  border-bottom: 1px solid #ECECEF;
}
.bh-mm-header img { height: 22.8px; width: auto; }
.bh-mm-header-right { display: flex; align-items: center; gap: var(--bh-space-12); }
.bh-mm-cta { padding: 10px var(--bh-space-16); border-radius: 10px; font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-semibold); }
.bh-mm-close { font-size: 20px; color: var(--bh-ink); padding: var(--bh-space-8); line-height: 1; }
.bh-mobile-menu {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ---------- Shared page helpers ---------- */
.accent-text { color: var(--bh-accent); }

/* ---------- Hero (Figma 8404:2–8, 11128:7896) ---------- */
.hero { padding-top: 51px; }
.hero-inner { position: relative; min-height: 481px; }
.hero-copy { max-width: 620px; margin-left: var(--bh-space-40); }
.hero-eyebrow { letter-spacing: 2px; }
.hero-h1 {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black);
  font-size: 57px; letter-spacing: -1.8px; line-height: 1.04; /* fills the 620 column (review O3) */
  color: var(--bh-ink); margin-top: 22px; max-width: 620px;
}
.hero-sub {
  font-size: 18px; line-height: 1.5; color: var(--bh-body);
  margin-top: var(--bh-space-24); max-width: 500px; position: relative; z-index: 1; /* review O3 */
}
.hero-art {
  display: block; position: absolute; top: -46px; right: -65px;
  width: 730px; pointer-events: none;
}
.hero-art img { width: 100%; height: auto; }
.hero-form {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin: 36px 0 0 var(--bh-space-40); position: relative; z-index: 1;
}
.hero-field { width: 300px; }
.hero-input {
  height: 56px; padding-block: 0; border-radius: var(--bh-r-btn);
  border-color: #E1E1E8; font-size: 15px;
}
.hero-submit {
  width: 160px; min-width: 0; height: 56px; padding: 0;
  border-radius: var(--bh-r-btn); font-size: 16px;
}
.hero-success { width: 100%; color: var(--bh-green-deep); font-weight: var(--bh-w-semibold); }
@media (max-width: 1023px) {
  .hero { padding-top: var(--bh-space-32); }
  .hero-inner { min-height: 0; display: flex; flex-direction: column; }
  .hero-copy, .hero-form { margin-left: 0; }
  .hero-h1 { font-size: 33px; letter-spacing: -1px; line-height: 37px; margin-top: 16px; }
  .hero-h1 .hero-break { display: none; }
  .hero-sub { font-size: 16px; line-height: 22px; margin-top: 16px; max-width: 232px; }
  .hero-art {
    position: static; width: calc(100% + 12px); max-width: 358px;
    margin: -66px -12px 0 auto; z-index: 0;   /* Figma bleeds the art 12px past the text column */
  }
  .hero-form { margin-top: 28px; flex-direction: column; gap: 14px; }
  .hero-field, .hero-submit { width: 100%; }
  .hero-input, .hero-submit { height: 50px; font-size: 16px; }
  .hero-submit { font-size: 15px; }
}

/* ---------- Read by (Figma 8274:2008–2014) ---------- */
.readby-eyebrow {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-xbold);
  font-size: var(--bh-fs-fine); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--bh-body); text-align: center;
}
.readby-logos {
  display: grid; grid-template-columns: repeat(6, 140px);
  justify-content: space-between; align-items: center;
  max-width: 1200px; margin: var(--bh-space-32) auto 0;
}
ul.readby-logos { padding: 0; list-style: none; }
.readby-logos img { width: 140px; height: 52px; object-fit: contain; margin-inline: auto; }
@media (max-width: 767px) {
  .readby-eyebrow { font-size: 11px; letter-spacing: 1.2px; line-height: 15px; }
  .readby-logos {
    grid-template-columns: repeat(3, 92px); justify-content: center;
    gap: var(--bh-space-16) var(--bh-space-20); margin-top: var(--bh-space-16);
  }
  .readby-logos img { width: 92px; height: 34px; }
}

/* ---------- Critics are raving (Figma 8274:2015–2034) ---------- */
.raving-h2 { font-size: 52px; letter-spacing: -1.8px; }
.quote-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-30);
  max-width: 1260px; margin: 50px auto 0;
}
ul.quote-grid { padding: 0; list-style: none; }
.quote-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-20); box-shadow: var(--bh-shadow-lift);
  padding: var(--bh-space-16) 28px var(--bh-space-24);
  min-height: 300px;
}
.quote-mark {
  font-family: var(--bh-font-display); font-weight: var(--bh-w-black);
  font-size: 64px; line-height: 1; color: var(--bh-accent);
  height: 70px; display: block;
}
.quote-text {
  font-size: 16px; font-weight: var(--bh-w-semibold); line-height: 26px;
  color: var(--bh-ink); margin-top: 10px;
}
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: var(--bh-space-30); }
.quote-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.quote-name { display: block; font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold); color: var(--bh-ink); }
.quote-role { display: block; font-size: 12px; color: var(--bh-body); margin-top: 2px; }
@media (max-width: 1023px) {
  .raving-h2 { font-size: 24px; letter-spacing: -0.5px; }
  .quote-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .quote-card {
    min-height: 0; border-radius: var(--bh-r-16); border-color: #E5E8EE;
    box-shadow: var(--bh-shadow-card); padding: var(--bh-space-20) 22px var(--bh-space-20);
  }
  .quote-mark { font-size: 34px; height: 24px; }
  .quote-text { font-weight: var(--bh-w-medium); line-height: 22px; margin-top: var(--bh-space-12); }
  .quote-by { padding-top: var(--bh-space-12); }
  .quote-avatar { width: 38px; height: 38px; }
  .quote-name { font-size: var(--bh-fs-fine); }
}

/* ---------- Included: the two editions (Figma 8274:2052–2083) ---------- */
.included-h2 { font-size: 48px; letter-spacing: -1.6px; }
.edition-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bh-space-40);
  margin-top: 68px;
}
ul.edition-grid { padding: 0; list-style: none; }
.ed-card { border-radius: var(--bh-r-20); padding: 22px; height: 100%; }
.ed-card--commentary { background: linear-gradient(90deg, #521728 0%, #952A49 50%, var(--bh-pink) 100%); }
.ed-card--innovations { background: linear-gradient(90deg, #341654 0%, #6E359E 50%, var(--bh-violet) 100%); }
.ed-inner {
  background: var(--bh-white); border-radius: var(--bh-r-20);
  padding: var(--bh-space-40) 44px var(--bh-space-24);
  height: 100%; display: flex; flex-direction: column; align-items: flex-start;
}
.ed-eyebrow {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-xbold);
  font-size: var(--bh-fs-fine); letter-spacing: 1.5px; text-transform: uppercase;
}
.ed-card--commentary .ed-eyebrow, .ed-card--commentary .ed-check { color: var(--bh-pink); }
.ed-card--innovations .ed-eyebrow, .ed-card--innovations .ed-check { color: var(--bh-violet); }
.ed-card--commentary .ed-check { background: var(--bh-pink); }
.ed-card--innovations .ed-check { background: var(--bh-violet); }
.ed-card--commentary .ed-cta { background: var(--bh-pink); }
.ed-card--innovations .ed-cta { background: var(--bh-violet); }
.ed-title { font-size: 42px; letter-spacing: -1px; line-height: 1.15; margin-top: 12px; }
.ed-list { display: flex; flex-direction: column; gap: var(--bh-space-24); margin-top: 52px; }
ul.ed-list { padding: 0; list-style: none; }
.ed-item {
  display: flex; align-items: center; gap: var(--bh-space-16);
  font-size: 17px; font-weight: var(--bh-w-medium); color: var(--bh-ink);
}
.ed-check {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  color: var(--bh-white) !important;
  font-size: var(--bh-fs-body-sm); font-weight: var(--bh-w-bold); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.ed-cta {
  margin-top: 58px; min-width: 206px; height: 56px; padding-block: 0;
  color: var(--bh-white); font-size: 15px; box-shadow: var(--bh-shadow-card);
}
@media (max-width: 1023px) {
  .included-h2 { font-size: 24px; letter-spacing: -0.5px; }
  .edition-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .ed-card { border-radius: var(--bh-r-16); padding: 12px; }
  .ed-inner { border-radius: var(--bh-r-12); padding: var(--bh-space-20) var(--bh-space-20) 22px; }
  .ed-eyebrow { font-size: 11px; letter-spacing: 1.2px; }
  .ed-title { font-size: 24px; letter-spacing: -0.5px; margin-top: var(--bh-space-8); }
  .ed-list { gap: var(--bh-space-12); margin-top: var(--bh-space-12); }
  .ed-item { font-size: 15px; font-weight: var(--bh-w-regular); gap: 10px; }
  .ed-check { width: 22px; height: 22px; font-size: 12px; }
  .ed-cta { width: 150px; min-width: 0; height: 40px; padding-inline: 0; font-size: var(--bh-fs-body-sm); margin-top: var(--bh-space-20); }
}

/* ---------- Archive (Figma 8274:2035–2051) ---------- */
.archive-h2 { font-size: 52px; letter-spacing: -1.8px; }
.archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bh-space-30);
  max-width: 1260px; margin: 50px auto 0;
}
ul.archive-grid { padding: 0; list-style: none; }
.arch-card {
  display: flex; flex-direction: column; height: 100%;
  background: var(--bh-white); border: 1px solid var(--bh-border);
  border-radius: var(--bh-r-20); box-shadow: var(--bh-shadow-lift);
  padding: var(--bh-space-16) var(--bh-space-16) 18px;
  transition: transform var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease);
}
.arch-card:hover { transform: translateY(-4px); }
.arch-cover { width: 100%; height: 192px; object-fit: cover; border-radius: var(--bh-r-12); }
.arch-title {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-bold);
  font-size: 20px; line-height: 1.3; letter-spacing: -0.2px;
  color: var(--bh-ink); margin: var(--bh-space-20) var(--bh-space-8) 0;
}
.arch-desc { font-size: 14.5px; line-height: 22px; color: var(--bh-body); margin: var(--bh-space-8) var(--bh-space-8) 0; }
.arch-meta {
  font-size: 12.5px; font-weight: var(--bh-w-semibold); color: var(--bh-body);
  margin: auto var(--bh-space-8) 0; padding-top: var(--bh-space-20);
}
@media (max-width: 1023px) {
  .archive-h2 { font-size: 24px; letter-spacing: -0.5px; }
  .archive-grid { grid-template-columns: 1fr; gap: var(--bh-space-16); margin-top: var(--bh-space-16); }
  .arch-card { border-radius: var(--bh-r-16); border-color: #E5E8EE; box-shadow: var(--bh-shadow-card); padding: var(--bh-space-16); }
  .arch-cover { height: 162px; }
  .arch-title { font-size: 18px; margin-inline: 0; }
  .arch-desc { font-size: 16px; line-height: 23px; margin-inline: 0; }
  .arch-meta { font-size: 12px; margin-inline: 0; padding-top: var(--bh-space-8); }
}

/* ---------- Authors (Figma 8274:2084–2095) ---------- */
.authors-h2 { font-size: 44px; letter-spacing: -1.4px; }
.authors-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 100px;
  max-width: 1060px; margin: 44px auto 0;
}
ul.authors-grid { padding: 0; list-style: none; }
.author { display: flex; flex-direction: column; align-items: center; text-align: center; }
.author-photo { width: 224px; height: 224px; border-radius: var(--bh-r-20); object-fit: cover; }
.author-name { font-family: var(--bh-font-display); font-weight: var(--bh-w-bold); font-size: 24px; letter-spacing: -0.5px; margin-top: var(--bh-space-20); } /* review O4 */
.author-role { font-size: 15px; font-weight: var(--bh-w-medium); color: var(--bh-body); margin-top: var(--bh-space-8); }
.author-writes {
  font-family: var(--bh-font-body); font-weight: var(--bh-w-xbold);
  font-size: var(--bh-fs-fine); letter-spacing: 0.78px; text-transform: uppercase;
  color: var(--bh-pink); margin-top: 6px;
}
.author--innovations .author-writes { color: var(--bh-violet); }
.author-bio {
  width: 540px; max-width: 100%; margin: var(--bh-space-20) -30px 0;
  font-size: 15.5px; line-height: 1.55; color: var(--bh-body);
}
@media (max-width: 1023px) {
  .authors-h2 { font-size: 24px; letter-spacing: -0.5px; }
  .authors-grid { grid-template-columns: 1fr; gap: var(--bh-space-32); max-width: none; margin-top: var(--bh-space-16); }
  .author {
    align-items: stretch; text-align: left; overflow: hidden;
    background: var(--bh-white); border-radius: var(--bh-r-16);
    box-shadow: var(--bh-shadow-card);
  }
  .author-photo { width: 100%; height: 360px; border-radius: 0; object-position: top center; }
  .author-name { font-weight: var(--bh-w-black); font-size: 20px; margin: 18px var(--bh-space-20) 0; }
  .author-role { font-size: var(--bh-fs-body-sm); margin: 5px var(--bh-space-20) 0; }
  .author-writes { font-size: 11px; margin: 5px var(--bh-space-20) 0; }
  .author-bio { width: auto; font-size: 16px; line-height: 1.5; margin: var(--bh-space-16) var(--bh-space-20) var(--bh-space-20); }
}

/* ---------- Subscribe CTA band (Figma 8326:2778 / 9506:111) ---------- */
.cta-band {
  border-radius: var(--bh-r-20);
  background:
    linear-gradient(343deg, var(--bh-violet) 0%, rgba(168,85,247,0) 52%),
    linear-gradient(17deg, var(--bh-pink) 0%, rgba(242,68,118,0) 44%),
    #28182E;
  padding: 72px var(--bh-space-40);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--bh-shadow-lift);
}
.cta-h { font-size: 46px; letter-spacing: -1.4px; line-height: 1.15; color: var(--bh-white); }
.cta-sub { font-size: 18px; font-weight: var(--bh-w-medium); color: rgba(255,255,255,0.90); margin-top: var(--bh-space-16); max-width: 1040px; }
.cta-btn {
  margin-top: 34px; min-width: 264px; height: 66px; padding-block: 0;
  background: var(--bh-white); color: var(--bh-ink); font-size: 18px;
  box-shadow: 0px 6px 16px rgba(102,26,77,0.18);
}
@media (max-width: 1023px) {
  .cta-band { border-radius: var(--bh-r-16); padding: var(--bh-space-32) var(--bh-space-16); box-shadow: none; }
  .cta-h { font-size: 24px; letter-spacing: -0.5px; }
  .cta-sub { font-size: 16px; font-weight: var(--bh-w-regular); line-height: 23px; color: #CCC7D9; margin-top: var(--bh-space-12); }
  .cta-btn { margin-top: var(--bh-space-12); min-width: 180px; height: 50px; font-size: 15px; }
}

/* ---------- Footer page-level tweaks (matches home) ---------- */
.bh-footer-tagline { font-size: var(--bh-fs-body-sm); color: rgba(244,242,248,0.75); }
.bh-footer-social { display: flex; gap: var(--bh-space-16); align-items: flex-end; margin-top: var(--bh-space-8); }
/* social glyph art has differing heights — normalise so baselines align (review A6) */
.bh-footer-social a { display: inline-flex; align-items: flex-end; }
/* keep each glyph at its designed size; only align their baselines (review A6) */
.bh-footer-social img { display: block; }
/* the narrow "f" makes the f→YouTube gap read wider than in→f even at equal
   spacing, so YouTube is pulled in optically (review A6) */
.bh-footer-social a:last-child { margin-left: -5px; }
.bh-footer-brand { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bh-footer-form { display: flex; gap: var(--bh-space-8); align-items: flex-start; flex-wrap: wrap; }
.bh-footer-form .bh-field { width: 220px; }
.bh-footer-input { width: 100%; height: 44px; padding-block: 0; border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-signup { height: 44px; min-width: 120px; padding: 0 var(--bh-space-24); border-radius: var(--bh-r-8); font-size: 13px; }
.bh-footer-legal { display: flex; gap: var(--bh-space-30); }
@media (max-width: 767px) {
  .bh-footer-form { width: 100%; }
  .bh-footer-form .bh-field { width: 100%; }
  .bh-footer-input { width: 100%; height: 46px; }
  .bh-footer-signup { width: 100%; height: 46px; }
  .bh-footer-tagline { font-size: 16px; }
  .bh-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* === logo strip - width-proof grid (2026-08-26, W02) ===
   repeat(6, 140px) is a hard 840px floor and overflows a 720px container at 768.
   Let the tracks shrink instead. */
.readby-logos { grid-template-columns: repeat(6, minmax(0, 140px)); }
.readby-logos img { max-width: 100%; }
@media (min-width: 768px) and (max-width: 1023px) {
  .readby-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bh-space-16); }
  .readby-logos img { width: 100%; max-width: 110px; height: 40px; }
}

/* === width-proof layout (2026-08-26, W10) ===
   .authors-grid `1fr 1fr` hit the same min-content floor (+60px at 1024), and
   .hero-art is a fixed 730px absolutely-positioned block that pokes past the right
   edge from 1024 all the way to 1400 -- which includes 1366, the most common laptop
   width in the wild. */
/* scoped to >=1024: unscoped it overrode the mobile 1fr rule above and put two columns on
   phones. W10 only ever needed it for the 1024-1400 min-content floor. */
@media (min-width: 1024px) {
  .authors-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.author { min-width: 0; }
.hero-art { width: min(730px, 52vw); }
@media (min-width: 768px) and (max-width: 1279px) {
  .authors-grid { gap: 48px; }
}

/* === card hit area - A10 plan/editorial/press (2026-08-26) ===
   Lior's call: these cards become fully tappable, matching the story cards. The link
   already inside each card is stretched to the card's box rather than a new anchor
   being added, so each card still exposes exactly one target. */
.ed-card { position: relative; }
.ed-card a[href] { position: static; }
.ed-card a[href]::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* === logo rows - contain, centred, optically even (2026-08-26) ===
   The 140x52 boxes were already equal; what looked uneven was the INK inside them -
   a wide wordmark fills the box while a round crest uses a third of it, so the gaps
   between the marks vary even though the cells do not. Capping each logo by its own
   shape evens out the visual weight. Also centred so a short last row is centred. */
.readby-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--bh-space-24) var(--bh-space-30);
}
.readby-logos > * { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.readby-logos img {
  width: auto; height: auto;
  max-height: 30px;          /* wordmarks are limited by height */
  max-width: 116px;          /* and wide ones by width, so neither dominates */
  object-fit: contain;
  margin-inline: 0;
}
/* the round crest reads much heavier than a wordmark at the same height */
.readby-logos img[src*="logo-croskey"], .readby-logos img[src*="crest"] { max-height: 38px; }
@media (max-width: 767px) {
  .readby-logos { gap: var(--bh-space-16) var(--bh-space-20); }
  .readby-logos img { max-height: 24px; max-width: 88px; }
}

/* === hero art must not be chopped at the window edge (2026-08-26, W21) ===
   right:-65px against a gutter that is only 24px at 1024 and 40px at 1280, so the art
   overhung the window by 41px through the whole 1024-1280 band and 22px at 1366.
   Pull in to 16px and remove the same 49px from the width: the left edge is exactly
   where it was, and nothing is cut. Above 1420 the gutter is wider than the original
   pull, so the designed bleed is left alone. */
@media (min-width: 1024px) and (max-width: 1420px) {
  .hero-art { right: -16px; width: min(681px, 52vw - 49px); }
}

/* THE ART NOW FITS THE WINDOW, BUT AT 1024 IT LANDS ON THE COPY. Measured at 1024 the
   sub-copy's right edge is 564 and the artwork starts at 533 - a 31px overlap, and the
   word "No" of "No fluff, no pitch." is painted behind the conveyor. It only happens in
   this band: at 1100 the gap is already +5 and it grows from there. Capping the sub-copy
   so it wraps before the art is the smaller change; moving the art would undo W21. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero-sub { max-width: 390px; }
}

/* === newsletter hero - horizontal band under the CTA (2026-08-26) ===
   The art was a 730px block absolutely positioned beside the copy, pulled out past the
   container and clipped by the window (W10/W21). As a full-width band under the form it
   needs none of that: static, 100% wide, and it cannot be sliced by anything.
   These rules override the absolute positioning that still lives earlier in this file. */
.hero-art {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  margin: var(--bh-space-40) auto 0;
  right: auto; top: auto;
  pointer-events: none;
}
.hero-art img { width: 100%; height: auto; display: block; }
.hero-inner { display: block; }
.hero-copy { max-width: 760px; }
.hero-sub { max-width: 620px; }
/* hero band matched to Figma 12035:7558 (2026-08-27) */
/* Figma draws the band 1200 wide at x=120 of 1440. .hero-art fills the section's 1280
   container, which put it at 1280/x=80. Capping and centring lands it on x=120 exactly.
   Below 768 the container is already narrower than the cap, so mobile is untouched. */
.hero-art { max-width: 1200px; }
@media (max-width: 767px) {
  .hero-art { margin-top: var(--bh-space-24); width: 100%; max-width: none; }
}

/* mobile hero order - clay band above the form, per Figma 9425:111 (2026-08-27) */
@media (max-width: 767px) {
  .hero-inner { display: flex; flex-direction: column; }
  .hero-copy { order: 0; }
  .hero-art  { order: 1; margin-top: 8px; }
  .hero-form { order: 2; margin-top: 25px; }
}