/*
 * rem-master.css
 * Real Estate Moguls — Master Stylesheet
 * Version 1.3.0 (Phase 2 — Dark-Luxury Editorial Component Library)
 *
 * Authority:  #0D1B2A (Authority Navy)
 * Primary:    #29ABE2 (Mogul Blue)
 * Accent:     #C9A84C (Mogul Gold, structural use only)
 * Background: #F2F4F7 (Platinum)
 * Vital:      #EBF8FF (Blue Tint callout)
 * Text:       #4A5568 (Slate)
 * Border:     #E2E5E9 (Border Gray)
 *
 * Display type: Afacad 500 / 600 / 700 via Google Fonts
 * Body type:    Avenir Next system stack (Doc 08 \u00a75.2)
 *
 * Depends on: functions.php rem_inject_critical_css (priority 5)
 *             functions.php rem_inject_design_system (priority 1, fonts + vars)
 *
 * Protected contracts honored: class names .rem-ghl-form-embed and the
 * attribute data-rem-lazy-src are required by inc/performance.php and are
 * referenced, never renamed.
 */


/* ============================================================
   01  SECTION SYSTEM
   Light and dark alternating sections drive the editorial rhythm.
   Never place two consecutive sections of the same mode without a
   composed reason (Executive Plan v2 \u00a75.2).
   ============================================================ */

.rem-sec,
.rem-sec-alt,
.rem-sec-vital,
.rem-sec-dark {
  padding: 96px 40px;
  position: relative;
}

.rem-sec        { background: #fff; color: var(--authority); }
.rem-sec-alt    { background: var(--background); color: var(--authority); }
.rem-sec-vital  { background: var(--vital); color: var(--authority); }
.rem-sec-dark   { background: var(--authority); color: #fff; }

.rem-sec-dark h1,
.rem-sec-dark h2,
.rem-sec-dark h3,
.rem-sec-dark h4,
.rem-sec-dark h5,
.rem-sec-dark h6 { color: #fff; }

.rem-sec-dark p  { color: rgba(255,255,255,.78); }
.rem-sec-dark a  { color: var(--primary); }
.rem-sec-dark a:hover { color: #fff; }

/* Container widths — 12-column editorial grid anchors */
.rem-inn  { max-width: 1200px; margin: 0 auto; }
.rem-wide { max-width: 1440px; margin: 0 auto; }
.rem-mid  { max-width: 880px;  margin: 0 auto; }
.rem-nrw  { max-width: 680px;  margin: 0 auto; }


/* ============================================================
   02  TYPOGRAPHY SCALE
   Afacad for display. Avenir Next for body.
   Weights restricted to 500 / 600 / 700 per Doc 08 \u00a75.1.
   ============================================================ */

.rem-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(58px, 7vw, 98px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--authority);
}
.rem-sec-dark .rem-display { color: #fff; }

.rem-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(42px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--authority);
  margin-bottom: 20px;
}

.rem-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--authority);
  margin-bottom: 18px;
}
.rem-sec-dark .rem-h1,
.rem-sec-dark .rem-h2 { color: #fff; }

.rem-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--authority);
  margin-bottom: 14px;
}

.rem-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--authority);
  margin-bottom: 12px;
}

.rem-body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--slate);
}

.rem-body-lt {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
}

.rem-body-lead {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.65;
  color: var(--slate);
  font-weight: 400;
}

.rem-caption {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}


/* ============================================================
   03  EYEBROW LABELS
   All-caps, tracked wide, Afacad SemiBold.
   Used above H1 and H2 for category and metadata tagging.
   ============================================================ */

.rem-eye {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.rem-eye-lt   { color: var(--primary); }
.rem-eye-gold { color: var(--accent); }
.rem-eye-slate { color: var(--slate); }
.rem-sec-dark .rem-eye { color: var(--primary); }


/* ============================================================
   04  PULL QUOTE
   Structural prestige element. Gold left border on dark;
   blue left border on light. No shadow, no decoration.
   ============================================================ */

.rem-pull {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.35;
  color: var(--authority);
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 28px;
  margin: 36px 0;
  max-width: 720px;
}

.rem-sec-dark .rem-pull {
  color: #fff;
  border-left-color: var(--accent);
}


/* ============================================================
   05  BUTTON SYSTEM
   Sharp corners (radius: 3px). Three variants per context.
   Sizing scales on viewport; padding stays generous.
   ============================================================ */

.rem-btn {
  display: inline-block;
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rad-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}

.rem-btn:hover  { transform: translateY(-1px); }
.rem-btn:active { transform: translateY(0); }

.rem-btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.rem-btn-primary:hover {
  background: var(--primary-dk);
  border-color: var(--primary-dk);
  color: #fff;
}

/*
 * Ghost button — compound selector raises specificity to (0,2,0) so the
 * rule beats any single-class-plus-element override such as `.rem-sec-dark a`
 * at (0,1,1). The ghost variant is used on dark backgrounds and any
 * descendant-anchor inheritance rule could otherwise mask the text.
 * Phase 2 Step 3 punch list fix (2026-04-11).
 */
.rem-btn.rem-btn-ghost,
a.rem-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.6);
}
.rem-btn.rem-btn-ghost:hover,
a.rem-btn-ghost:hover {
  background: #fff;
  color: var(--authority);
  border-color: #fff;
}

.rem-btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.rem-btn-outline:hover {
  background: var(--primary);
  color: #fff;
}

.rem-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  cursor: pointer;
}
.rem-btn-text:hover { border-bottom-color: var(--primary); }


/* ============================================================
   06  CARD SYSTEM
   Base card for generic content. Variants for member, article,
   and podcast episode. Dark card variant for dark sections.
   ============================================================ */

.rem-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 28px 26px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.rem-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -12px rgba(13,27,42,.18);
}

.rem-card-dk {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(41,171,226,.2);
  border-radius: var(--rad-card);
  padding: 28px 26px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.rem-card-dk:hover {
  transform: translateY(-4px);
  border-color: rgba(41,171,226,.5);
  box-shadow: 0 0 0 1px rgba(41,171,226,.4), 0 16px 40px -12px rgba(0,0,0,.4);
}

/* Member card — 3:4 editorial portrait */
.rem-member-card { text-align: left; }
.rem-member-card__portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--rad-card);
  margin-bottom: 16px;
  background: var(--background);
}
.rem-member-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.rem-member-card:hover .rem-member-card__portrait img {
  transform: scale(1.03);
}
.rem-member-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--authority);
  margin-bottom: 6px;
}
.rem-sec-dark .rem-member-card__name { color: #fff; }
.rem-member-card__specialty {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 4px;
}
.rem-member-card__city {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--slate);
}
.rem-sec-dark .rem-member-card__city { color: rgba(255,255,255,.64); }

/* Article card — 3:2 editorial image */
.rem-article-card { display: block; text-decoration: none; }
.rem-article-card__image {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--rad-card);
  margin-bottom: 18px;
  background: var(--background);
}
.rem-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.rem-article-card:hover .rem-article-card__image img {
  transform: scale(1.03);
}
.rem-article-card__category {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.rem-article-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  color: var(--authority);
  margin-bottom: 10px;
}
.rem-article-card:hover .rem-article-card__title { color: var(--primary); }
.rem-article-card__excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rem-article-card__meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--slate);
}

.rem-sec-dark .rem-article-card__title   { color: #fff; }
.rem-sec-dark .rem-article-card__excerpt { color: rgba(255,255,255,.72); }
.rem-sec-dark .rem-article-card__meta    { color: rgba(255,255,255,.56); }

/* Episode card — 1:1 podcast artwork */
.rem-episode-card { display: block; text-decoration: none; }
.rem-episode-card__artwork {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rad-card);
  margin-bottom: 16px;
  background: var(--authority);
}
.rem-episode-card__artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.rem-episode-card:hover .rem-episode-card__artwork img {
  transform: scale(1.03);
}
.rem-episode-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--authority);
  margin-bottom: 6px;
}
.rem-sec-dark .rem-episode-card__title { color: #fff; }
.rem-episode-card__host {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--slate);
}
.rem-sec-dark .rem-episode-card__host { color: rgba(255,255,255,.64); }


/* ============================================================
   07  GRID PATTERNS
   Utility grids used by homepage sections and archive listings.
   ============================================================ */

.rem-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.rem-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rem-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

.rem-grid-editorial {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
}


/* ============================================================
   08  HERO
   Full-viewport hero for homepage and category landing pages.
   Dark overlay sits between background image and text content.
   ============================================================ */

.rem-hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 40px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--authority);
  color: #fff;
  overflow: hidden;
}

.rem-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.rem-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,27,42,.62) 0%, rgba(13,27,42,.82) 100%);
}

.rem-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.rem-hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(46px, 6.5vw, 82px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 16ch;
  margin-bottom: 28px;
}

.rem-hero__subline {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  max-width: 56ch;
  margin-bottom: 40px;
}

.rem-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rem-hero__indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 12px;
}
.rem-hero__indicator::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: rgba(255,255,255,.8);
  transform: translateX(-50%);
  border-radius: 1px;
}


/* ============================================================
   09  FOOTER
   Two-column layout per v1.3.1 brand correction. Authority Navy
   background, 1px Mogul Gold top rule. Brand column carries the
   logo, tagline, About link, operator credit, and social channels.
   Editorial column lists the seven content categories only.
   Bottom bar: copyright on the left, single "Apply as a Guest"
   link on the right.
   ============================================================ */

.rem-footer {
  background: var(--authority);
  color: rgba(255,255,255,.72);
  padding: 72px 40px 40px;
  border-top: 1px solid var(--accent);
}

.rem-footer__grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  margin-bottom: 48px;
}

.rem-footer__brand img {
  height: 48px;
  width: auto;
  margin-bottom: 20px;
}
.rem-footer__brand p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.6);
  max-width: 40ch;
  margin: 0 0 14px;
}

/* About link below the tagline — text link, not a button */
.rem-footer__about-link {
  margin: 0 0 18px !important;
  max-width: none !important;
}
.rem-footer__about-link a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.rem-footer__about-link a:hover {
  color: #fff;
  border-bottom-color: var(--accent);
}

.rem-footer__operator {
  font-size: 14px !important;
  color: rgba(255,255,255,.42) !important;
  max-width: none !important;
}

.rem-footer__col h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.rem-footer__col ul { list-style: none; margin: 0; padding: 0; }
.rem-footer__col li { margin-bottom: 10px; }
.rem-footer__col a {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s ease;
}
.rem-footer__col a:hover { color: #fff; }

/* Social channels — now rendered inside the Brand column */
.rem-footer__brand .rem-footer__socials {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}
.rem-footer__socials {
  display: flex;
  gap: 16px;
}
.rem-footer__socials a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.56);
  text-decoration: none;
  transition: color .2s ease;
}
.rem-footer__socials a:hover { color: #fff; }

.rem-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rem-footer__bottom p {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,.48);
  margin: 0;
}

.rem-footer__apply {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.rem-footer__apply:hover {
  color: #fff;
  border-bottom-color: var(--primary);
}


/* ============================================================
   10  FORMS — native AJAX (Pattern A, guest and host only)
   Guest and host forms submit through rem_submit_guest and
   rem_submit_host AJAX handlers. Preserve all name attributes
   and the remForms script contract. Visual markup only here.
   ============================================================ */

.rem-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}

.rem-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rem-form-field label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}

.rem-form-field input[type="text"],
.rem-form-field input[type="email"],
.rem-form-field input[type="tel"],
.rem-form-field input[type="url"],
.rem-form-field select,
.rem-form-field textarea {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--authority);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rad-btn);
  padding: 12px 16px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rem-form-field input:focus,
.rem-form-field select:focus,
.rem-form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41,171,226,.18);
}

.rem-form-field textarea { min-height: 120px; resize: vertical; }

.rem-form__submit { align-self: flex-start; }

.rem-form__notice {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 16px;
  border-radius: var(--rad-btn);
  border: 1px solid var(--border);
  background: var(--vital);
  color: var(--authority);
  display: none;
}
.rem-form__notice.is-visible { display: block; }
.rem-form__notice.is-error   { background: #FEE;      border-color: #E53E3E; color: #9B2C2C; }
.rem-form__notice.is-success { background: #E6FFFA;   border-color: #38A169; color: #1A4731; }


/* ============================================================
   11  GHL IFRAME EMBED (Pattern B — all new form surfaces)
   Applies to listing inquiry, listing interest, script
   submission, referral network, email capture. The container
   class and data-rem-lazy-src attribute are contracts honored
   by inc/performance.php IntersectionObserver.
   ============================================================ */

.rem-ghl-form-embed {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rad-card);
  padding: 24px;
  min-height: 320px;
  position: relative;
}
.rem-sec-dark .rem-ghl-form-embed {
  background: rgba(255,255,255,.04);
  border-color: rgba(41,171,226,.2);
}
.rem-ghl-form-embed iframe {
  width: 100%;
  border: 0;
  display: block;
  min-height: 320px;
}
.rem-ghl-form-embed__loading {
  position: absolute;
  inset: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--slate);
  pointer-events: none;
}


/* ============================================================
   12  METADATA, BYLINES, BADGES
   ============================================================ */

.rem-meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.rem-sec-dark .rem-meta { color: rgba(255,255,255,.56); }

.rem-meta__sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: .5;
}

.rem-byline {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--slate);
}
.rem-byline strong { color: var(--authority); font-weight: 600; }
.rem-sec-dark .rem-byline strong { color: #fff; }

.rem-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
  border: 1px solid currentColor;
  color: var(--primary);
}
.rem-badge--gold    { color: var(--accent); }
.rem-badge--authority { background: var(--authority); color: #fff; border-color: var(--authority); }


/* ============================================================
   12.5  HOMEPAGE REDESIGN (v1.4.1)
   Six-section public homepage. Component scope only — no
   overrides to the section system, typography scale, or shared
   card components above.

   Sections (file-based numbering retained with gaps):
     S01  Editorial Hero             .rem-hp-hero + __grid/__lead/__rail
     S02  Marquee Declaration        .rem-marquee
     S04  Editorial by Category      .rem-ed-row (per-category sub-brand)
     S05  Episode Feed               .rem-episodes + .rem-episode-card-new
     S07  Platform Statement         .rem-statement
     S08  Email Capture              .rem-capture

   Retired in v1.4.1:
     - S03 Professional Roster (.rem-roster*)  — platform does not
       show professionals on the public homepage
     - S06 Studio Madison Image Row (.rem-imgrow-new*) — Studio
       Madison is only communicated to invited guests and members

   Retired in v1.4.0 but dropped here:
     - v1.4.0's "Editorial Lead + 3 Supporting" treatment
       (.rem-editorial-lead, .rem-editorial__supporting,
       .rem-article-card-sm) replaced by v1.4.1 editorial-by-category

   All sections live under .rem-homepage on front-page.php. Brand
   tokens (--primary, --accent, --authority, --background, --vital,
   --dark, --font-display, --font-body) are consumed as-is and are
   not re-defined here.
   ============================================================ */

.rem-homepage--v141 { position: relative; }
/* v1.4.0 shell class retained for backwards-compat on any cached page. */
.rem-homepage--v14  { position: relative; }

/* --- Shared admin-only setup notices (used by S03, S05, S06, S08) --- */
.rem-admin-notice {
  border: 1px dashed rgba(41,171,226,.5);
  padding: 32px;
  border-radius: var(--rad-card);
  background: rgba(41,171,226,.04);
}
.rem-admin-notice--dark {
  border-color: rgba(201,168,76,.35);
  background: rgba(255,255,255,.02);
}
.rem-admin-notice code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  padding: 2px 6px;
  background: rgba(13,27,42,.08);
  border-radius: 3px;
}
.rem-sec-dark .rem-admin-notice code,
.rem-admin-notice--dark code {
  background: rgba(255,255,255,.08);
  color: var(--accent);
}

/* --- S01 Editorial Hero ------------------------------------- */
/*
 * Full-viewport editorial hero. The lead post (most recent article)
 * drives a 2-column layout on desktop: lead column (7fr) with title,
 * deck, byline, and "Read the story" link; rail column (5fr) with up
 * to three smaller recent-article cards. Below 900px the rail stacks
 * under the lead. The lead post's featured image renders as the hero
 * background behind a navy scrim for legibility.
 */

.rem-hp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 40px 64px;
  background: var(--authority);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.rem-hp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
}
.rem-hp-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 105deg ≈ 3:30→9:30 clock direction: transparent upper-left
     (photo shows through), darkens toward lower-right.
     Bottom wash ensures text readability at the lower-left. */
  background:
    linear-gradient(105deg, rgba(13,27,42,.08) 0%, rgba(13,27,42,.25) 35%, rgba(13,27,42,.82) 75%),
    linear-gradient(to top, rgba(13,27,42,.88) 0%, rgba(13,27,42,.35) 40%, transparent 65%);
}
.rem-hp-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.rem-hp-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  align-items: end;
}

/* --- Lead ------------------------------------------------------- */

.rem-hp-hero__lead {
  display: block;
  max-width: 640px;
}
.rem-hp-hero__lead-cat {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  margin: 0 0 14px;
}
.rem-hp-hero__lead-cat:hover { color: #fff; }
.rem-hp-hero__lead-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 14px;
  text-wrap: balance;
}
.rem-hp-hero__lead-title a {
  color: inherit;
  text-decoration: none;
}
.rem-hp-hero__lead-title a:hover { color: var(--accent); }
.rem-hp-hero__lead-deck {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 48ch;
  margin: 0 0 18px;
}
.rem-hp-hero__lead-meta {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.7);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.rem-hp-hero__sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: .6;
}
.rem-hp-hero__lead-read {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(201,168,76,.5);
  transition: color 200ms, border-color 200ms;
}
.rem-hp-hero__lead-read:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* --- Rail ------------------------------------------------------- */

.rem-hp-hero__rail {
  border-left: 1px solid rgba(201,168,76,.22);
  padding-left: 36px;
}
.rem-hp-hero__rail-eye {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 24px;
}
.rem-hp-hero__rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rem-hp-hero__rail-card {
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 22px;
}
.rem-hp-hero__rail-card:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.rem-hp-hero__rail-link {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 18px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}
.rem-hp-hero__rail-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.04);
}
.rem-hp-hero__rail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.rem-hp-hero__rail-link:hover .rem-hp-hero__rail-media img { transform: scale(1.04); }
.rem-hp-hero__rail-body { min-width: 0; }
.rem-hp-hero__rail-cat {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.rem-hp-hero__rail-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}
.rem-hp-hero__rail-link:hover .rem-hp-hero__rail-title { color: var(--accent); }
.rem-hp-hero__rail-date {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,.66);
}

/* --- Empty state ------------------------------------------------ */

.rem-hp-hero__empty {
  max-width: 900px;
}
.rem-hp-hero__empty-eye {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.rem-hp-hero__empty-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 6vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 24px;
  max-width: 20ch;
  text-wrap: balance;
}

.rem-hp-hero__indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 22px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 12px;
}
.rem-hp-hero__indicator::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 2px;
  height: 6px;
  background: rgba(255,255,255,.85);
  transform: translateX(-50%);
  border-radius: 1px;
}

/* --- S02 Marquee Declaration -------------------------------- */

.rem-marquee {
  background: var(--authority);
  color: #fff;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(201,168,76,.18);
  border-bottom: 1px solid rgba(201,168,76,.18);
  padding: 40px 32px;
}
.rem-marquee__inner { max-width: 1280px; text-align: center; }
.rem-marquee__line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--accent);
  margin: 0;
  text-transform: none;
  text-wrap: balance;
}

/* --- S03 Professional Roster: RETIRED in v1.4.1 ------------- */
/* The .rem-roster* component block was removed. Professionals
   do not appear on the public homepage in v1.4.1. File-based
   section numbering is preserved (S03 slot vacant) so future
   reinstatement is a drop-in. */

/* --- S04 Editorial by Category (v1.4.3 sub-brand rows) ------ */
/*
 * Each category renders as its own full-bleed <section class="rem-ed-row">
 * with an alternating dark/light background AND a per-category accent
 * color driven by a rem-ed-row--<slug> modifier. Every row reads like
 * its own editorial desk within the Real Estate Moguls newsroom.
 *
 * Eyebrow (v1.4.3): a stacked two-line block — a large display number
 * on top, then a horizontal rule + uppercase label + desk identity
 * ("The Craft Core", "The Ambition Engine", etc.) on the second line.
 *
 * Heading:   tagline — "Moguls Sell.", "Moguls Grow.", "Moguls Focus."
 * Deck:      short editorial brief copy aligned with the REM brief.
 * View-all:  per-category accent underline.
 * Grid:      3-up .rem-ed-card with per-category hover accent.
 *
 * Brand colors consumed:
 *   - Authority Navy  --authority   dark row bg
 *   - Platinum        --background  light row bg
 *   - Mogul Gold      --accent      default accent on dark rows
 *   - Mogul Blue      --primary     default accent on light rows
 *   - --ed-accent:    per-category accent variable (scoped per row)
 */

.rem-ed-row {
  position: relative;
  padding: 56px 40px;
  /* Per-category accent color override. Each rem-ed-row--<slug>
     modifier redefines --ed-accent below for a distinct sub-brand
     identity. The default falls back to gold on dark rows and blue
     on light rows through .rem-ed-row--light / --dark below. */
  --ed-accent: var(--accent);
}
.rem-ed-row__inner {
  max-width: 1440px;
  margin: 0 auto;
}

/* Background tones. Alternates dark/light by index. */
.rem-ed-row--light {
  background: var(--background);
  color: var(--authority);
  --ed-accent: var(--primary);
}
.rem-ed-row--dark {
  background: var(--authority);
  color: #fff;
  --ed-accent: var(--accent);
}

/* Per-category sub-brand accent overrides. Each category maps to a
   distinct accent color that drives its numbered eyebrow, horizontal
   rule, heading treatment, view-all link, and card hover. See the
   detailed per-category treatment block further down this file. */
.rem-ed-row--sell      { --ed-accent: var(--accent); }   /* gold — craft */
.rem-ed-row--grow      { --ed-accent: var(--primary); }  /* blue — ambition */
.rem-ed-row--mind      { --ed-accent: #9BD4EE; }         /* sky blue — quiet reflection */
.rem-ed-row--market    { --ed-accent: var(--primary); }  /* blue — data authority */
.rem-ed-row--invest    { --ed-accent: var(--accent); }   /* gold — wealth */
.rem-ed-row--money     { --ed-accent: #B08E3B; }         /* warmer gold — stewardship */
.rem-ed-row--community { --ed-accent: var(--primary); }  /* blue — industry/social */
.rem-ed-row--podcasts  { --ed-accent: #7EC8E3; }         /* vital blue — audio */

/* Default decorative top rule — a hairline seam between rows. Each
   category below may override ::before for its own decorative effect
   (data strip, gold double-rule, side rail, etc). */
.rem-ed-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, calc(100% - 80px));
  height: 1px;
  background: rgba(13,27,42,.08);
}
.rem-ed-row--dark::before {
  background: rgba(255,255,255,.12);
}

/* --- Header --------------------------------------------------- */

.rem-ed-row__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}
.rem-ed-row__headline { max-width: 860px; }

/* The eyebrow is now a stacked two-line block: a big display number
   on top, then a horizontal rule and the uppercase label + desk
   identity on the second line. This gives every category a stronger
   editorial rhythm than the v1.4.2 inline eyebrow. */
.rem-ed-row__eyewrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.rem-ed-row__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ed-accent);
  opacity: 0.92;
}
.rem-ed-row__eye {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--ed-accent);
}
.rem-ed-row__rule {
  display: inline-block;
  width: 44px;
  height: 2px;
  background: var(--ed-accent);
  flex-shrink: 0;
}
.rem-ed-row__sep {
  display: inline-block;
  opacity: .45;
  font-weight: 400;
}
.rem-ed-row__label {
  letter-spacing: 0.24em;
}
.rem-ed-row__desk {
  letter-spacing: 0.18em;
  font-weight: 500;
  opacity: .72;
}
.rem-ed-row--light .rem-ed-row__desk { color: var(--slate); }
.rem-ed-row--dark  .rem-ed-row__desk { color: rgba(255,255,255,.72); }

.rem-ed-row__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.rem-ed-row--light .rem-ed-row__heading { color: var(--authority); }
.rem-ed-row--dark  .rem-ed-row__heading { color: #fff; }

.rem-ed-row__deck {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  max-width: 68ch;
}
.rem-ed-row--light .rem-ed-row__deck { color: var(--slate); }
.rem-ed-row--dark  .rem-ed-row__deck { color: rgba(255,255,255,.82); }

.rem-ed-row__view-all {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  color: var(--ed-accent);
  transition: opacity 200ms, transform 200ms;
}
.rem-ed-row__view-all:hover {
  opacity: .8;
  transform: translateX(2px);
}

/* --- Grid ----------------------------------------------------- */

.rem-ed-row__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rem-ed-row--empty .rem-ed-row__inner { max-width: 900px; }

/* --- Editorial card (used inside .rem-ed-row__grid) ----------- */

.rem-ed-card {
  display: flex;
  flex-direction: column;
}
.rem-ed-card__media {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  background: var(--background);
  margin-bottom: 12px;
}
.rem-ed-row--dark .rem-ed-card__media {
  background: rgba(255,255,255,.04);
}
.rem-ed-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.rem-ed-card__media:hover img { transform: scale(1.03); }

.rem-ed-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 13px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13,27,42,.82);
  border: 1px solid var(--ed-accent);
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.rem-ed-row--light .rem-ed-card__badge {
  background: rgba(255,255,255,.92);
  color: var(--authority);
}

.rem-ed-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin: 0 0 6px;
}
.rem-ed-card__title a { text-decoration: none; transition: color 180ms; }
.rem-ed-row--light .rem-ed-card__title a { color: var(--authority); }
.rem-ed-row--dark  .rem-ed-card__title a { color: #fff; }
.rem-ed-card__title a:hover { color: var(--ed-accent); }

.rem-ed-card__excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rem-ed-row--light .rem-ed-card__excerpt { color: var(--slate); }
.rem-ed-row--dark  .rem-ed-card__excerpt { color: rgba(255,255,255,.72); }

.rem-ed-card__meta {
  font-family: var(--font-body);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.rem-ed-row--light .rem-ed-card__meta { color: var(--slate); }
.rem-ed-row--dark  .rem-ed-card__meta { color: rgba(255,255,255,.6); }
.rem-ed-card__sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  background: currentColor;
  border-radius: 50%;
  opacity: .5;
}

/* ============================================================
   S04 per-category sub-brand treatments (v1.4.5)
   ============================================================
   Each editorial desk is its own brand within the REM newsroom —
   distinct background, card presentation, typographic personality,
   and visual energy. Every row should feel like turning to a new
   section of a premium real estate magazine.

   v1.4.5 fixes: per-category mode map in PHP now guarantees the
   correct dark/light class per row. Every category block below
   also sets explicit text colors on all key elements as a safety
   net, so contrast is always correct regardless of position.

   Card treatments: each category now gets a distinctive card
   presentation — playbook entries (GROW), wire-feed horizontal
   cards (MARKET), elevated white tiles (MONEY), translucent
   roster cards (COMMUNITY), etc. — not just accent swaps.       */

/* --- 01 SELL · The Closing Floor --------------------------------
   Feature layout. Dark navy with a gold craft-line at top. Lead
   card uses a tall editorial crop. Gold badge, heavy headline.
   Magazine-cover energy on the closing floor. */

.rem-ed-row--sell {
  padding: 56px 40px;
  background: linear-gradient(170deg, #0d1b2a 0%, #112233 40%, #0d1b2a 100%);
}
.rem-ed-row--sell::before {
  height: 4px;
  background: var(--accent);
  opacity: .92;
}
.rem-ed-row--sell::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1440px, calc(100% - 80px));
  height: 1px;
  background: var(--accent);
  opacity: .38;
}
.rem-ed-row--sell .rem-ed-row__heading {
  color: #fff;
  letter-spacing: -0.028em;
  font-weight: 800;
}
.rem-ed-row--sell .rem-ed-row__deck  { color: rgba(255,255,255,.78); }
.rem-ed-row--sell .rem-ed-row__desk  { color: rgba(255,255,255,.55); }
.rem-ed-row--sell .rem-ed-row__label { font-weight: 800; }
.rem-ed-row--sell .rem-ed-card__title a   { color: #fff; }
.rem-ed-row--sell .rem-ed-card__excerpt   { color: rgba(255,255,255,.72); }
.rem-ed-row--sell .rem-ed-card__meta      { color: rgba(255,255,255,.55); }
.rem-ed-row--sell .rem-ed-card__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--authority);
  font-weight: 800;
}
.rem-ed-row--sell .rem-ed-card__media { border-radius: 4px; }
.rem-ed-row--sell .rem-ed-card__media::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  opacity: .7;
}

/* --- 02 GROW · The Growth Lab ---------------------------------
   Platinum with blue radial glow. Cards with a bold blue left
   border and white background — playbook entries that lift on
   hover. Forward-leaning italic headline. Corner bracket decor. */

.rem-ed-row--grow {
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, rgba(41,171,226,.12), transparent 62%),
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(41,171,226,.05), transparent 65%),
    var(--background);
}
.rem-ed-row--grow .rem-ed-row__heading {
  color: var(--authority);
  font-style: italic;
  letter-spacing: -0.022em;
}
.rem-ed-row--grow .rem-ed-row__deck { color: var(--slate); }
.rem-ed-row--grow .rem-ed-row__desk { color: var(--slate); }
.rem-ed-row--grow::after {
  content: "";
  position: absolute;
  top: 40px; right: 40px;
  width: 120px; height: 120px;
  border-top: 2px solid rgba(41,171,226,.22);
  border-right: 2px solid rgba(41,171,226,.22);
  pointer-events: none;
}
/* GROW cards — playbook entries */
.rem-ed-row--grow .rem-ed-card {
  background: #fff;
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 24px 24px 24px 20px;
  box-shadow: 0 2px 16px rgba(13,27,42,.06);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms;
}
.rem-ed-row--grow .rem-ed-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(13,27,42,.10);
}
.rem-ed-row--grow .rem-ed-card__media  { border-radius: 0 6px 6px 0; margin-bottom: 16px; }
.rem-ed-row--grow .rem-ed-card__title a  { color: var(--authority); }
.rem-ed-row--grow .rem-ed-card__excerpt  { color: var(--slate); }
.rem-ed-row--grow .rem-ed-card__meta     { color: var(--slate); }
.rem-ed-row--grow .rem-ed-card__badge {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- 03 MIND · The Inner Edge --------------------------------
   Navy with vital-blue vignette. Centered header. Cards with
   rounded corners, centered text, generous breathing room.
   A journal, not a feed — the quiet section. */

.rem-ed-row--mind {
  padding: 56px 40px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(126,200,227,.08), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(126,200,227,.05), transparent 70%),
    var(--authority);
}
.rem-ed-row--mind::before { background: transparent; }
.rem-ed-row--mind .rem-ed-row__headline {
  max-width: 820px;
}
.rem-ed-row--mind .rem-ed-row__heading {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.018em;
  font-size: clamp(28px, 3vw, 40px);
}
.rem-ed-row--mind .rem-ed-row__deck {
  color: rgba(255,255,255,.78);
  max-width: 64ch;
}
.rem-ed-row--mind .rem-ed-row__desk  { color: rgba(255,255,255,.55); }
/* MIND cards — journal entries, airy with rounded corners */
.rem-ed-row--mind .rem-ed-card       { text-align: left; }
.rem-ed-row--mind .rem-ed-card__media {
  border-radius: 16px;
  aspect-ratio: 4 / 3;
}
.rem-ed-row--mind .rem-ed-card__title a  { color: #fff; }
.rem-ed-row--mind .rem-ed-card__excerpt {
  color: rgba(255,255,255,.68);
}
.rem-ed-row--mind .rem-ed-card__meta {
  color: rgba(255,255,255,.5);
}
.rem-ed-row--mind .rem-ed-card__badge {
  background: rgba(155,212,238,.18);
  border-color: rgba(155,212,238,.35);
  color: #9BD4EE;
  backdrop-filter: blur(8px);
}

/* --- 04 MARKET · The Intelligence Wire -----------------------
   Platinum with a navy data-strip header. On desktop, cards go
   HORIZONTAL — a wire-feed layout with image left, text right.
   Monospace accents, sharp edges, ruled borders. Bloomberg
   meets your local MLS in a way that screams credibility. */

.rem-ed-row--market {
  padding-top: 56px;
  background: var(--background);
}
/* Data-strip ticker removed per v1.6.3 directive */
.rem-ed-row--market::before {
  display: none;
}
.rem-ed-row--market .rem-ed-row__heading { color: var(--authority); }
.rem-ed-row--market .rem-ed-row__deck   { color: var(--slate); }
.rem-ed-row--market .rem-ed-row__desk {
  color: var(--slate);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
}
/* MARKET cards — wire-feed items, sharp edges, ruled borders */
.rem-ed-row--market .rem-ed-card__media  { border-radius: 0; }
.rem-ed-row--market .rem-ed-card__title a { color: var(--authority); font-weight: 700; }
.rem-ed-row--market .rem-ed-card__title   { font-size: 21px; line-height: 1.3; }
.rem-ed-row--market .rem-ed-card__excerpt { color: var(--slate); }
.rem-ed-row--market .rem-ed-card__meta {
  color: var(--slate);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.rem-ed-row--market .rem-ed-card__badge {
  background: var(--authority);
  border-color: var(--authority);
  color: rgba(255,255,255,.9);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
}
/* MARKET wire-feed horizontal cards — desktop only */
@media (min-width: 1025px) {
  .rem-ed-row--market .rem-ed-row__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rem-ed-row--market .rem-ed-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 16px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(13,27,42,.10);
    align-items: start;
  }
  .rem-ed-row--market .rem-ed-card:first-child {
    border-top: 1px solid rgba(13,27,42,.10);
  }
  .rem-ed-row--market .rem-ed-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: 1 / 1;
    margin-bottom: 0;
  }
  .rem-ed-row--market .rem-ed-card__title   { grid-column: 2; grid-row: 1; }
  .rem-ed-row--market .rem-ed-card__excerpt { grid-column: 2; grid-row: 2; }
  .rem-ed-row--market .rem-ed-card__meta    { grid-column: 2; grid-row: 3; align-self: end; }
}

/* --- 05 INVEST · The Portfolio Room --------------------------
   Deep navy gradient. Gold double-rule top + bottom frame. Duo
   layout — fewer, bigger moves. Thin gold border on cards.
   Private-wealth publication aesthetic. */

.rem-ed-row--invest {
  padding: 56px 40px;
  background: linear-gradient(180deg, #0d1b2a 0%, #0a1621 100%);
}
.rem-ed-row--invest::before {
  height: 2px;
  background: var(--accent);
  opacity: .85;
  width: 100%; left: 0;
  transform: none;
}
.rem-ed-row--invest::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  opacity: .85;
}
.rem-ed-row--invest .rem-ed-row__heading {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.028em;
}
.rem-ed-row--invest .rem-ed-row__deck  { color: rgba(255,255,255,.78); }
.rem-ed-row--invest .rem-ed-row__label,
.rem-ed-row--invest .rem-ed-row__desk {
  letter-spacing: 0.38em;
  color: rgba(255,255,255,.55);
}
/* INVEST cards — gold-bordered portfolio entries */
.rem-ed-row--invest .rem-ed-card {
  border: 1px solid rgba(201,168,76,.22);
  border-radius: 4px;
  padding: 20px 20px 24px;
  background: rgba(255,255,255,.02);
}
.rem-ed-row--invest .rem-ed-card__media { border-radius: 3px; }
.rem-ed-row--invest .rem-ed-card__title a  { color: #fff; letter-spacing: -0.01em; }
.rem-ed-row--invest .rem-ed-card__excerpt  { color: rgba(255,255,255,.68); }
.rem-ed-row--invest .rem-ed-card__meta     { color: rgba(255,255,255,.5); }
.rem-ed-row--invest .rem-ed-card__badge {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

/* --- 06 MONEY · The Wealth Playbook --------------------------
   Off-white. Cards become elevated white tiles with rounded
   corners, soft shadow, and a gold accent bar at the image
   base. Ledger entries — organized, trustworthy, clean. */

.rem-ed-row--money {
  background: #F6F7F9;
}
.rem-ed-row--money::before {
  height: 1px;
  background: rgba(176,142,59,.35);
}
.rem-ed-row--money .rem-ed-row__heading {
  color: var(--authority);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.rem-ed-row--money .rem-ed-row__deck { color: var(--slate); }
.rem-ed-row--money .rem-ed-row__desk { color: var(--slate); }
/* MONEY cards — elevated white ledger tiles */
.rem-ed-row--money .rem-ed-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 12px rgba(13,27,42,.05), 0 1px 3px rgba(13,27,42,.04);
  transition: box-shadow 280ms, transform 280ms;
}
.rem-ed-row--money .rem-ed-card:hover {
  box-shadow: 0 8px 28px rgba(13,27,42,.09), 0 2px 6px rgba(13,27,42,.05);
  transform: translateY(-3px);
}
.rem-ed-row--money .rem-ed-card__media {
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 3px solid #B08E3B;
}
.rem-ed-row--money .rem-ed-card__title   { padding: 20px 24px 0; }
.rem-ed-row--money .rem-ed-card__title a { color: var(--authority); }
.rem-ed-row--money .rem-ed-card__excerpt { color: var(--slate); padding: 0 24px; }
.rem-ed-row--money .rem-ed-card__meta    { color: var(--slate); padding: 0 24px 20px; }
.rem-ed-row--money .rem-ed-card__badge {
  background: rgba(176,142,59,.12);
  border-color: rgba(176,142,59,.35);
  color: #8A6F2A;
}

/* --- 07 INDUSTRY · The Moguls Room ---------------------------
   Navy with a 4px Mogul Blue vertical rail. Cards with subtle
   blue-tinted translucent backgrounds. Solid blue badges.
   The section that says "this is who's in the room." */

.rem-ed-row--community {
  padding-left: 64px;
  background: var(--authority);
}
.rem-ed-row--community::before {
  width: 4px; height: 100%;
  top: 0; left: 0;
  transform: none;
  background: var(--primary);
}
.rem-ed-row--community .rem-ed-row__heading {
  color: #fff;
  letter-spacing: -0.022em;
}
.rem-ed-row--community .rem-ed-row__deck { color: rgba(255,255,255,.78); }
.rem-ed-row--community .rem-ed-row__desk { color: rgba(255,255,255,.55); }
/* COMMUNITY cards — translucent blue roster entries */
.rem-ed-row--community .rem-ed-card {
  background: rgba(41,171,226,.06);
  border: 1px solid rgba(41,171,226,.14);
  border-radius: 8px;
  padding: 16px 16px 20px;
}
.rem-ed-row--community .rem-ed-card__media { border-radius: 6px; }
.rem-ed-row--community .rem-ed-card__title a  { color: #fff; }
.rem-ed-row--community .rem-ed-card__excerpt  { color: rgba(255,255,255,.68); }
.rem-ed-row--community .rem-ed-card__meta     { color: rgba(255,255,255,.5); }
.rem-ed-row--community .rem-ed-card__badge {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- 08 PODCAST · The Mic Room --------------------------------
   Deep navy with blue radial glow. Feature layout. Play button
   overlays on thumbnails. Wider rounded corners for a podcast-
   app feel. Pill-shaped translucent blue badges. */

.rem-ed-row--podcasts {
  background:
    radial-gradient(ellipse 80% 60% at 12% 18%, rgba(41,171,226,.18), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 82%, rgba(126,200,227,.08), transparent 65%),
    var(--authority);
}
.rem-ed-row--podcasts::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126,200,227,.3) 30%,
    rgba(41,171,226,.4) 50%,
    rgba(126,200,227,.3) 70%,
    transparent 100%);
  height: 1px;
}
.rem-ed-row--podcasts .rem-ed-row__heading { color: #fff; }
.rem-ed-row--podcasts .rem-ed-row__deck   { color: rgba(255,255,255,.78); }
.rem-ed-row--podcasts .rem-ed-row__desk   { color: rgba(255,255,255,.55); }
/* PODCAST cards — episode feel, app-like roundness */
.rem-ed-row--podcasts .rem-ed-card__media { border-radius: 10px; }
.rem-ed-row--podcasts .rem-ed-card__title a  { color: #fff; }
.rem-ed-row--podcasts .rem-ed-card__excerpt  { color: rgba(255,255,255,.68); }
.rem-ed-row--podcasts .rem-ed-card__meta     { color: rgba(255,255,255,.5); }
.rem-ed-row--podcasts .rem-ed-card__badge {
  background: rgba(41,171,226,.25);
  border-color: rgba(41,171,226,.45);
  color: #B8E4F5;
  backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 6px 14px;
}
/* Play button — circle + triangle on every podcast thumbnail */
.rem-ed-row--podcasts .rem-ed-card__media::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(41,171,226,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform 300ms cubic-bezier(.2,.7,.2,1), background 300ms;
}
.rem-ed-row--podcasts .rem-ed-card__media::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  z-index: 2;
  width: 0; height: 0;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transition: border-left-color 300ms;
}
.rem-ed-row--podcasts .rem-ed-card__media:hover::after {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--accent);
}
.rem-ed-row--podcasts .rem-ed-card__media:hover::before {
  border-left-color: var(--authority);
}
/* Feature-layout small cards — smaller play button */
@media (min-width: 1025px) {
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__media::after,
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__media::after {
    width: 40px; height: 40px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__media::before,
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__media::before {
    border-left-width: 11px;
    border-top-width: 7px;
    border-bottom-width: 7px;
    transform: translate(-32%, -50%);
  }
}


/* ============================================================
   S04 layout variants (v1.4.5)
   ============================================================
   Three grid structures: uniform (3 equal), feature (1 large +
   2 small), duo (2 equal large). The layout is declared per
   category in hp-s04.php via the rem-ed-row--layout-<variant>
   modifier and the template's posts_per_page adapts to match. */

/* --- Default uniform layout (override of base grid). Already
   in place above as .rem-ed-row__grid. Kept here for clarity. */

/* --- Feature layout ---------------------------------------
   1 large card (spans 2 rows in the left column) +
   2 stacked smaller cards in the right column.
   Only applies at >=1025px. Below that, collapses gracefully
   back to the default 2-col / 1-col responsive grid. */
@media (min-width: 1025px) {
  .rem-ed-row--layout-feature .rem-ed-row__grid {
    grid-template-columns: 1.62fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px 28px;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(1) .rem-ed-card__media {
    aspect-ratio: 16 / 10;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(1) .rem-ed-card__title {
    font-size: clamp(28px, 2.6vw, 36px);
    margin-bottom: 14px;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(1) .rem-ed-card__excerpt {
    font-size: 18px;
    line-height: 1.65;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2),
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) {
    flex-direction: row;
    gap: 20px;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__media,
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__media {
    aspect-ratio: 1 / 1;
    flex: 0 0 140px;
    margin-bottom: 0;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__title,
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__title {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__excerpt,
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__excerpt {
    display: none;
  }
}

/* --- Duo layout -------------------------------------------
   2 equal large cards. Fewer, bigger moves — used for INVEST
   to signal that wealth decisions are higher-stakes and less
   frequent than everyday tactical sells. */
@media (min-width: 1025px) {
  .rem-ed-row--layout-duo .rem-ed-row__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .rem-ed-row--layout-duo .rem-ed-card__media {
    aspect-ratio: 16 / 9;
  }
  .rem-ed-row--layout-duo .rem-ed-card__title {
    font-size: clamp(26px, 2.4vw, 32px);
    margin-bottom: 14px;
  }
  .rem-ed-row--layout-duo .rem-ed-card__excerpt {
    font-size: 17px;
    line-height: 1.65;
  }
}

/* ============================================================
   S04 per-category editorial layouts (v1.4.6)
   ============================================================
   Per-category grid and card overrides that transform how each
   desk presents its cards on desktop. These rules sit AFTER the
   generic layout variant block so they win by cascade.

   The goal: no two sections should present cards the same way
   when scrolling the homepage. Overlay heroes, staggered grids,
   wire-feed horizontals, hero spotlights, and elevated tiles
   create the editorial variety of a premium magazine.           */

/* --- Feature layout global fix: sidebar card overflow -------- */
@media (min-width: 1025px) {
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2),
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) {
    min-width: 0;
    overflow: hidden;
  }
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(2) .rem-ed-card__meta,
  .rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card:nth-child(3) .rem-ed-card__meta {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* --- 01 SELL: overlay hero — lead card is a magazine cover ----
   The feature layout's lead card becomes a full-bleed image with
   a gradient scrim and overlaid headline. Sidebar cards stay
   compact. The effect: a Vanity Fair cover for real estate. */
@media (min-width: 1025px) {
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px 36px;
  }
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    margin-bottom: 0;
    border-radius: 0;
    z-index: 0;
  }
  /* Gradient scrim replaces the gold accent line on the lead card */
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__media::after {
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, transparent 10%, rgba(13,27,42,.55) 50%, rgba(13,27,42,.92) 100%);
    opacity: 1;
    z-index: 1;
  }
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__badge {
    z-index: 3;
  }
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__title,
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__excerpt,
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__meta {
    position: relative;
    z-index: 2;
  }
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__title {
    font-size: clamp(28px, 2.8vw, 38px);
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
  }
  .rem-ed-row--sell.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__excerpt {
    text-shadow: 0 1px 8px rgba(0,0,0,.2);
    max-width: 48ch;
  }
}
/* SELL micro-touch: gold underline on title hover */
.rem-ed-row--sell .rem-ed-card__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* --- 02 GROW: cards aligned, hover arrow reinforces "next move" energy. */
/* GROW micro-touch: arrow indicator on hover */
.rem-ed-row--grow .rem-ed-card__title a::after {
  content: " \2192";
  opacity: 0;
  transition: opacity 200ms;
  color: var(--primary);
}
.rem-ed-row--grow .rem-ed-card:hover .rem-ed-card__title a::after {
  opacity: 1;
}

/* --- 03 MIND: default 3-column centered layout ----------------
   v1.5.2: Hero spotlight removed. MIND now uses the base 3-col
   uniform grid with its centered text + rounded-corner card
   treatment defined in the per-category block above. This keeps
   each section fitting in one viewport. */

/* --- 04 MARKET: zebra tint on wire-feed ----------------------
   The horizontal wire-feed is already unique. Alternating
   background tints add a news-terminal zebra-stripe effect. */
@media (min-width: 1025px) {
  .rem-ed-row--market .rem-ed-card:nth-child(even) {
    background: rgba(13,27,42,.018);
  }
}

/* --- 05 INVEST: asymmetric duo + gold hover glow -------------
   The duo layout tilts asymmetric — the lead card gets 25% more
   width. Hover triggers a gold inner glow on the card frame,
   reinforcing the wealth-tier premium aesthetic. */
@media (min-width: 1025px) {
  .rem-ed-row--invest.rem-ed-row--layout-duo .rem-ed-row__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: 32px;
  }
}
.rem-ed-row--invest .rem-ed-card {
  transition: border-color 280ms, box-shadow 280ms;
}
.rem-ed-row--invest .rem-ed-card:hover {
  border-color: rgba(201,168,76,.45);
  box-shadow: 0 0 0 1px rgba(201,168,76,.12) inset, 0 8px 32px rgba(0,0,0,.18);
}

/* --- 06 MONEY: wide lead emphasis ----------------------------
   The lead card gets 40% more column width, creating an
   editorial hierarchy within the ledger tiles. The gold accent
   bar thickens on the lead card for emphasis. */
@media (min-width: 1025px) {
  .rem-ed-row--money .rem-ed-row__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 28px;
  }
  .rem-ed-row--money .rem-ed-card:first-child .rem-ed-card__title {
    padding-top: 24px;
    font-size: clamp(24px, 2.2vw, 30px);
  }
  .rem-ed-row--money .rem-ed-card:first-child .rem-ed-card__media {
    border-bottom-width: 4px;
  }
}

/* --- 07 COMMUNITY: default 3-column uniform layout -----------
   v1.5.2: Mosaic removed (3:4 portrait was too tall, broke UX).
   COMMUNITY now uses the base 3-col uniform grid. Its translucent
   blue card treatment defined in the per-category block above
   already makes the section visually distinct. */

/* --- 08 PODCAST: wide featured episode + 2 standard ----------
   Completely overrides the broken feature layout. The lead card
   becomes a full-width horizontal hero (image left, text right).
   Cards 2/3 reset to vertical and sit side-by-side below.
   The effect: a podcast app's featured-episode layout. */
@media (min-width: 1025px) {
  /* Override the generic feature grid */
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
  }
  /* Lead card: full-width horizontal hero */
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 36px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: 16 / 9;
    flex: auto;
    margin-bottom: 0;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__title {
    font-size: clamp(26px, 2.6vw, 36px);
    margin-bottom: 14px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__excerpt {
    display: block;
    font-size: 17px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__meta {
    align-self: end;
  }
  /* Reset sidebar cards from broken horizontal to clean vertical */
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(2),
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(3) {
    flex-direction: column;
    gap: 0;
    grid-column: auto;
    grid-row: auto;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(2) .rem-ed-card__media,
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(3) .rem-ed-card__media {
    aspect-ratio: 16 / 10;
    flex: auto;
    margin-bottom: 20px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(2) .rem-ed-card__title,
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(3) .rem-ed-card__title {
    font-size: 22px;
    margin-bottom: 10px;
  }
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(2) .rem-ed-card__excerpt,
  .rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:nth-child(3) .rem-ed-card__excerpt {
    display: block;
    font-size: 15px;
  }
}


/* ============================================================
   S04 section pairing — DEPRECATED v1.5.1
   ============================================================
   Pairing system removed. All sections now render full-width
   with unique per-category layouts. The CSS below is inert —
   .rem-ed-pair and .rem-ed-row--paired are no longer emitted
   by hp-s04.php. Retained for backwards-compat with cached
   pages; safe to remove after one cache cycle.
   ============================================================ */

/* --- Pair container ----------------------------------------- */
.rem-ed-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2px;
}
.rem-ed-pair > .rem-ed-row--paired:only-child {
  grid-column: 1 / -1;
}
/* Breathing room between section groups (v1.5.0) */
.rem-ed-pair + .rem-ed-pair {
  margin-top: 40px;
}
.rem-ed-pair + .rem-ed-row:not(.rem-ed-row--paired),
.rem-ed-row:not(.rem-ed-row--paired) + .rem-ed-pair {
  margin-top: 40px;
}

/* --- Desktop: compact editorial paired halves --------------- */
@media (min-width: 1025px) {

  /* Generous padding — editorial breathing room without billboard spacing. */
  .rem-ed-row--paired {
    padding: 52px 36px;
  }
  .rem-ed-row--paired .rem-ed-row__inner {
    max-width: none;
  }

  /* ---- HEADER: magazine label bar --------------------------
     No number. Compact 2-line deck restored in v1.4.9.
     Tight eyebrow + heading + deck + link on a compact strip. */

  .rem-ed-row--paired .rem-ed-row__num {
    display: none;
  }
  .rem-ed-row--paired .rem-ed-row__eyewrap {
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-bottom: 8px;
  }
  .rem-ed-row--paired .rem-ed-row__eye {
    font-size: 11px;
    letter-spacing: 0.18em;
    gap: 8px;
  }
  .rem-ed-row--paired .rem-ed-row__rule {
    width: 22px;
    height: 1.5px;
  }
  .rem-ed-row--paired .rem-ed-row__head {
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px;
    margin-bottom: 20px;
  }
  .rem-ed-row--paired .rem-ed-row__heading {
    font-size: clamp(22px, 2.2vw, 30px);
    margin-bottom: 0;
    line-height: 1.15;
  }
  .rem-ed-row--paired .rem-ed-row__deck {
    font-size: 13px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    margin-bottom: 0;
    opacity: 0.72;
    max-width: 48ch;
  }
  .rem-ed-row--paired .rem-ed-row__view-all {
    font-size: 11px;
    padding-bottom: 3px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  /* ---- GRID: single column, tight gap ---------------------- */
  .rem-ed-row--paired .rem-ed-row__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ---- CARDS: horizontal by default ------------------------
     120px square image left, title + meta right. Compact enough
     to show both cards in one glance. */
  .rem-ed-row--paired .rem-ed-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 16px;
    align-items: start;
  }
  .rem-ed-row--paired .rem-ed-card .rem-ed-card__media {
    grid-row: 1 / -1;
    aspect-ratio: 1;
    margin: 0;
  }
  .rem-ed-row--paired .rem-ed-card__title {
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .rem-ed-row--paired .rem-ed-card__excerpt {
    font-size: 13px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
  }
  .rem-ed-row--paired .rem-ed-card__meta {
    font-size: 11px;
    align-self: end;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .rem-ed-row--paired .rem-ed-card__badge {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.14em;
  }

  /* ---- Reset feature & duo layouts ------------------------- */
  .rem-ed-row--paired.rem-ed-row--layout-feature .rem-ed-row__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .rem-ed-row--paired.rem-ed-row--layout-feature .rem-ed-row__grid > .rem-ed-card {
    grid-column: auto;
    grid-row: auto;
  }
  .rem-ed-row--paired.rem-ed-row--layout-duo .rem-ed-row__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ---- Disable staggers ------------------------------------ */
  .rem-ed-row--paired.rem-ed-row--grow .rem-ed-row__grid > .rem-ed-card:nth-child(2),
  .rem-ed-row--paired.rem-ed-row--community .rem-ed-row__grid > .rem-ed-card:nth-child(2) {
    transform: none;
  }

  /* =========================================================
     PER-CATEGORY PAIRED EDITORIAL VARIETY
     Each pair contrasts left vs right card presentation for
     maximum visual variety per scroll.
     ========================================================= */

  /* --- GROW: compact playbook entries ----------------------- */
  .rem-ed-row--paired.rem-ed-row--grow .rem-ed-card {
    padding: 14px 14px 14px 12px;
    border-left-width: 3px;
  }
  .rem-ed-row--paired.rem-ed-row--grow .rem-ed-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.45;
  }
  .rem-ed-row--paired.rem-ed-row--grow::after {
    width: 48px;
    height: 48px;
    top: 16px;
    right: 16px;
  }

  /* --- MIND: rounded media, height-balanced with GROW --------
     v1.4.9: spotlight removed to fix uneven GROW/MIND heights.
     Both sections now use horizontal cards. MIND differentiates
     with softer rounded media. */
  .rem-ed-row--paired.rem-ed-row--mind .rem-ed-card .rem-ed-card__media {
    border-radius: 10px;
  }

  /* --- INVEST: mini overlay hero + compact below ------------ */
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    padding: 18px;
    min-height: 180px;
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0;
    z-index: 0;
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    height: auto;
    background: linear-gradient(180deg, transparent 10%, rgba(13,27,42,.82) 100%);
    z-index: 1;
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__badge {
    z-index: 3;
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__title,
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__meta {
    position: relative;
    z-index: 2;
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__title {
    font-size: 18px;
    text-shadow: 0 1px 6px rgba(0,0,0,.3);
  }
  .rem-ed-row--paired.rem-ed-row--invest .rem-ed-card:first-child .rem-ed-card__excerpt {
    display: none;
  }

  /* --- MONEY: horizontal ledger lines, gold accent bar ------ */
  .rem-ed-row--paired.rem-ed-row--money .rem-ed-card {
    border-radius: 8px;
  }
  .rem-ed-row--paired.rem-ed-row--money .rem-ed-card .rem-ed-card__media {
    border-bottom: none;
    border-right: 2px solid #B08E3B;
    border-radius: 0;
  }
  .rem-ed-row--paired.rem-ed-row--money .rem-ed-card__title {
    padding: 0;
  }
  .rem-ed-row--paired.rem-ed-row--money .rem-ed-card__excerpt {
    display: none;
    padding: 0;
  }
  .rem-ed-row--paired.rem-ed-row--money .rem-ed-card__meta {
    padding: 0;
  }

  /* --- COMMUNITY: tighter blue rail, compact roster --------- */
  .rem-ed-row--paired.rem-ed-row--community {
    padding-left: 44px;
  }
  .rem-ed-row--paired.rem-ed-row--community::before {
    width: 3px;
  }
  .rem-ed-row--paired.rem-ed-row--community .rem-ed-card__excerpt {
    display: none;
  }

  /* --- PODCASTS: compact episodes, smaller play buttons ------ */
  .rem-ed-row--paired.rem-ed-row--podcasts .rem-ed-card .rem-ed-card__media {
    border-radius: 6px;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts .rem-ed-card .rem-ed-card__media::after {
    width: 32px;
    height: 32px;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts .rem-ed-card .rem-ed-card__media::before {
    border-left-width: 8px;
    border-top-width: 5px;
    border-bottom-width: 5px;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts .rem-ed-card__excerpt {
    display: none;
  }

  /* --- PODCASTS: override v1.4.6 feature layout in paired mode -
     The v1.4.6 `.rem-ed-row--podcasts.rem-ed-row--layout-feature`
     selectors at (0,4,0) specificity beat the generic paired card
     defaults at (0,2,0). These overrides at (0,5,0) force the
     compact horizontal card layout back into effect when paired. */
  .rem-ed-row--paired.rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-row__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 16px;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child {
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 0 16px;
    grid-column: auto;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    aspect-ratio: 1;
    margin: 0;
    flex: unset;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__title {
    font-size: 17px;
  }
  .rem-ed-row--paired.rem-ed-row--podcasts.rem-ed-row--layout-feature .rem-ed-card:first-child .rem-ed-card__excerpt {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Responsive: collapse pairs to single column ------------ */
@media (max-width: 1024px) {
  .rem-ed-pair {
    grid-template-columns: 1fr;
  }
}


/* Backwards-compat: v1.4.1 .rem-editorial / .rem-ed-cat classes are
   retired in v1.4.2 but we retain empty aliases so any cached page
   or transient that still references them does not crash the cascade. */
.rem-editorial, .rem-ed-cat { display: block; }

/* --- S05 Episode Feed --------------------------------------- */

.rem-episodes {
  background: var(--authority);
  color: #fff;
  padding: 56px 40px;
}
.rem-episodes__inner { max-width: 1280px; margin: 0 auto; }
.rem-episodes__head { margin-bottom: 28px; }
.rem-episodes__eye {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.rem-episodes__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.rem-episodes__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.rem-episode-card-new {
  display: block;
  text-decoration: none;
  color: inherit;
}
.rem-episode-card-new__art {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  margin-bottom: 20px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.5);
}
.rem-episode-card-new__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.rem-episode-card-new:hover .rem-episode-card-new__art img { transform: scale(1.03); }
.rem-episode-card-new__series {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
}
.rem-episode-card-new__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}
.rem-episode-card-new__meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,.68);
  margin: 0;
}

/* --- S06 Studio Madison Image Row: RETIRED in v1.4.1 -------- */
/* The .rem-imgrow-new* component block was removed. Studio
   Madison is only communicated to potential guests and members
   and stays on the backend. File-based section numbering is
   preserved (S06 slot vacant). */

/* --- S07 Platform Statement --------------------------------- */

.rem-statement {
  background: var(--authority);
  color: #fff;
  padding: 56px 40px;
}
.rem-statement__inner {
  max-width: 1440px;
  margin: 0 auto;
  text-align: left;
}
.rem-statement__eye {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}
.rem-statement__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 28px;
}
.rem-statement__body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
  max-width: 72ch;
  margin: 0 0 18px;
}
.rem-statement__body:last-child { margin-bottom: 0; }

/* --- S08 Email Capture -------------------------------------- */

.rem-capture {
  background: var(--background);
  color: var(--authority);
  padding: 56px 40px;
}
.rem-capture__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 64px;
  align-items: center;
}
.rem-capture--empty .rem-capture__inner {
  display: block;
  max-width: 760px;
}
.rem-capture__copy {}
.rem-capture__eye {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 14px;
}
.rem-capture__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--authority);
  margin: 0 0 20px;
}
.rem-capture__body {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--slate);
  margin: 0;
  max-width: 56ch;
}
.rem-capture__form { width: 100%; }
.rem-capture__embed {
  max-width: none;
  width: 100%;
}

/* --- Native fallback form (v1.4.2) --------------------------- */

.rem-capture__native {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rem-capture__native-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.rem-capture__native-field {
  display: flex;
  flex-direction: column;
}
.rem-capture__native-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--authority);
  margin-bottom: 6px;
}
/* v1.4.2 legacy class kept for any cached template still referencing it. */
.rem-capture__native-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.rem-capture__native-input {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(13,27,42,.18);
  border-radius: 3px;
  background: #fff;
  color: var(--authority);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  transition: border-color 180ms, box-shadow 180ms;
}
.rem-capture__native-input::placeholder { color: rgba(13,27,42,.42); }
.rem-capture__native-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41,171,226,.18);
}
.rem-capture__native-submit {
  white-space: nowrap;
  padding: 18px 28px;
  margin-top: 4px;
  width: 100%;
  font-size: 15px;
  letter-spacing: 0.12em;
}
/* Two-column fields on wider form columns (desktop) */
@media (min-width: 720px) {
  .rem-capture__native-fields {
    grid-template-columns: 1fr 1.4fr;
    gap: 16px;
  }
}
.rem-capture__honey {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.rem-capture__fine {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(13,27,42,.55);
  margin: 6px 0 0;
}
.rem-capture__flash {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 3px;
}
.rem-capture__flash--ok {
  color: #0a5d2a;
  background: #e7f6ec;
  border: 1px solid #bde4c7;
}
.rem-capture__flash--err {
  color: #7a1b1b;
  background: #fbecec;
  border: 1px solid #f2c9c9;
}
.rem-capture__admin-hint {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed rgba(41,171,226,.5);
  background: rgba(41,171,226,.04);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
}
.rem-capture__admin-hint code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(13,27,42,.08);
  padding: 2px 6px;
  border-radius: 2px;
}

/* --- Homepage responsive tiers ------------------------------ */

@media (max-width: 1200px) {
  .rem-hp-hero__grid      { gap: 48px; }
  .rem-ed-row__grid       { gap: 24px; }
  .rem-ed-row__heading    { font-size: clamp(24px, 2.8vw, 36px); }
  .rem-ed-row__num        { font-size: clamp(22px, 2.4vw, 28px); }
}

@media (max-width: 1024px) {
  .rem-hp-hero            { padding: 110px 32px 64px; }
  .rem-hp-hero__grid      { grid-template-columns: 1fr; gap: 0; }

  /* ── Mobile hero: image-forward layout ──
     Replace the 105deg desktop scrim with a straight-down gradient using
     viewport-height stops.  vh units in gradient positions are absolute
     distances from the gradient start, so the image stays visible in
     the top ~40vh regardless of total section height. */
  .rem-hp-hero__bg         { background-position: center top; bottom: auto; height: 70vh; }
  .rem-hp-hero__scrim {
    background:
      linear-gradient(to bottom,
        transparent        0vh,
        rgba(13,27,42,.04) 18vh,
        rgba(13,27,42,.18) 38vh,
        rgba(13,27,42,.65) 54vh,
        rgba(13,27,42,.96) 63vh,
        #0D1B2A            66vh
      );
  }
  .rem-hp-hero__lead {
    min-height: calc(100svh - 180px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: none;
  }
  .rem-hp-hero__rail      { border-left: 0; padding-left: 0; border-top: 1px solid rgba(201,168,76,.22); padding-top: 36px; margin-top: 48px; }

  .rem-ed-row             { padding: 48px 32px; }
  .rem-ed-row__head       { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .rem-ed-row__view-all   { justify-self: start; }
  .rem-ed-row__grid       { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Per-category tier overrides */
  .rem-ed-row--market     { padding-top: 48px; }
  .rem-ed-row--community  { padding-left: 32px; }
  .rem-ed-row--mind       { padding: 48px 32px; }
  .rem-ed-row--invest     { padding: 48px 32px; }
  /* v1.4.5 card treatment overrides */
  .rem-ed-row--grow .rem-ed-card { padding: 20px 20px 20px 16px; }
  .rem-ed-row--invest .rem-ed-card { padding: 16px 16px 20px; }
  .rem-ed-row--community .rem-ed-card { padding: 14px 14px 18px; }
  .rem-ed-row--money .rem-ed-card__title { padding: 16px 20px 0; }
  .rem-ed-row--money .rem-ed-card__excerpt { padding: 0 20px; }
  .rem-ed-row--money .rem-ed-card__meta { padding: 0 20px 16px; }

  .rem-marquee            { border-top: 0; }

  .rem-episodes           { padding: 48px 32px; }
  .rem-statement          { padding: 56px 32px; }
  .rem-capture            { padding: 48px 32px; }
  .rem-capture__inner     { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 900px) {
  .rem-hp-hero            { padding: 100px 24px 56px; min-height: auto; }
  .rem-hp-hero__lead       { min-height: calc(100svh - 160px); }
  .rem-hp-hero__lead-title { font-size: clamp(22px, 5vw, 36px); }

  .rem-marquee            { min-height: 128px; padding: 32px 24px; }

  .rem-ed-row             { padding: 44px 24px; }
  .rem-ed-row__head       { margin-bottom: 20px; }
  .rem-ed-row__heading    { font-size: clamp(22px, 5vw, 32px); }
  .rem-ed-row__num        { font-size: clamp(20px, 4vw, 26px); }

  /* Per-category tier overrides */
  .rem-ed-row--market     { padding-top: 44px; }
  .rem-ed-row--community  { padding-left: 24px; }
  .rem-ed-row--mind       { padding: 44px 24px; }
  .rem-ed-row--invest     { padding: 44px 24px; }
  .rem-ed-row--sell       { padding: 44px 24px; }

  .rem-episodes           { padding: 44px 24px; }
  .rem-episodes__head     { margin-bottom: 24px; }
  .rem-episodes__row      { grid-template-columns: 1fr; gap: 40px; max-width: 520px; margin: 0 auto; }

  .rem-statement          { padding: 48px 24px; }
  .rem-capture            { padding: 44px 24px; }
}

@media (max-width: 640px) {
  .rem-hp-hero            { padding: 88px 20px 48px; min-height: auto; }
  .rem-hp-hero__lead       { min-height: calc(100svh - 140px); }
  .rem-hp-hero__rail      { padding-top: 28px; }
  .rem-hp-hero__rail-link { grid-template-columns: 92px 1fr; gap: 16px; }
  .rem-hp-hero__rail-title { font-size: 20px; }
  .rem-hp-hero__lead-read { width: 100%; justify-content: center; }
  .rem-hp-hero__indicator { display: none; }

  .rem-marquee            { min-height: 112px; padding: 24px 20px; }

  .rem-ed-row             { padding: 40px 20px; }
  .rem-ed-row__grid       { grid-template-columns: 1fr; gap: 24px; }
  .rem-ed-row__heading    { font-size: clamp(20px, 6vw, 30px); }
  .rem-ed-row__num        { font-size: 22px; }
  .rem-ed-row__eye        { gap: 8px; font-size: 12px; letter-spacing: 0.18em; }
  .rem-ed-row__rule       { width: 28px; }
  .rem-ed-card__title     { font-size: 18px; }

  /* Per-category tier overrides */
  .rem-ed-row--market     { padding-top: 40px; }
  .rem-ed-row--community  { padding-left: 20px; }
  .rem-ed-row--mind       { padding: 40px 20px; }
  .rem-ed-row--invest     { padding: 40px 20px; }
  .rem-ed-row--sell       { padding: 40px 20px; }
  .rem-ed-row--grow::after { top: 24px; right: 24px; width: 72px; height: 72px; }
  /* v1.4.5 card treatment overrides */
  .rem-ed-row--grow .rem-ed-card { padding: 16px 16px 16px 14px; border-left-width: 3px; }
  .rem-ed-row--invest .rem-ed-card { padding: 14px 14px 18px; }
  .rem-ed-row--community .rem-ed-card { padding: 12px 12px 16px; }
  .rem-ed-row--mind .rem-ed-card__media { border-radius: 10px; }
  .rem-ed-row--money .rem-ed-card__title { padding: 14px 16px 0; }
  .rem-ed-row--money .rem-ed-card__excerpt { padding: 0 16px; }
  .rem-ed-row--money .rem-ed-card__meta { padding: 0 16px 14px; }

  .rem-episodes           { padding: 40px 20px; }
  .rem-episode-card-new__title { font-size: 20px; }

  .rem-statement          { padding: 44px 20px; }

  .rem-capture            { padding: 40px 20px; }
  .rem-capture__inner     { gap: 36px; }
  .rem-capture__native-row { grid-template-columns: 1fr; }
  .rem-capture__native-fields { grid-template-columns: 1fr; gap: 12px; }
  .rem-capture__native-submit { width: 100%; }
}

@media (max-width: 375px) {
  .rem-hp-hero            { padding: 80px 16px 40px; }
  .rem-ed-row             { padding: 36px 16px; }
  .rem-ed-row--market     { padding-top: 36px; }
  .rem-ed-row--community  { padding-left: 16px; }
  .rem-episodes           { padding: 56px 16px; }
  .rem-statement          { padding: 64px 16px; }
  .rem-capture            { padding: 56px 16px; }
}


/* ============================================================
   13  UTILITIES
   ============================================================ */

.rem-mt-0 { margin-top: 0 !important; }
.rem-mt-8 { margin-top: 8px; }
.rem-mt-16 { margin-top: 16px; }
.rem-mt-24 { margin-top: 24px; }
.rem-mt-32 { margin-top: 32px; }
.rem-mt-48 { margin-top: 48px; }
.rem-mb-0 { margin-bottom: 0 !important; }
.rem-mb-8 { margin-bottom: 8px; }
.rem-mb-16 { margin-bottom: 16px; }
.rem-mb-24 { margin-bottom: 24px; }
.rem-mb-32 { margin-bottom: 32px; }
.rem-mb-48 { margin-bottom: 48px; }

.rem-tc { text-align: center; }
.rem-tl { text-align: left; }
.rem-tr { text-align: right; }

.rem-visually-hidden {
  position: absolute !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
  width: 1px;
  height: 1px;
}


/* ============================================================
   14  RESPONSIVE
   Mobile-first override tiers at 1024, 900, 640, 375.
   ============================================================ */

@media (max-width: 1024px) {
  /* Footer grid stays 2fr 1fr at 1024px (v1.3.1 two-column layout).
     Collapses to single column at 900px below. */
  .rem-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .rem-grid-editorial { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .rem-sec,
  .rem-sec-alt,
  .rem-sec-vital,
  .rem-sec-dark { padding: 72px 32px; }

  .rem-hero { padding: 100px 32px 72px; }

  .rem-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .rem-grid-4 { grid-template-columns: repeat(2, 1fr); }

  .rem-footer { padding: 64px 32px 32px; }
  .rem-footer__grid { grid-template-columns: 1fr; gap: 40px; margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .rem-sec,
  .rem-sec-alt,
  .rem-sec-vital,
  .rem-sec-dark { padding: 64px 24px; }

  .rem-hero { padding: 88px 24px 64px; min-height: 92vh; }
  .rem-hero__ctas { flex-direction: column; align-items: flex-start; }
  .rem-hero__ctas .rem-btn { width: 100%; text-align: center; }

  .rem-grid-2,
  .rem-grid-3,
  .rem-grid-4 { grid-template-columns: 1fr; gap: 24px; }

  .rem-btn { padding: 14px 24px; font-size: 14px; }

  .rem-footer { padding: 56px 24px 32px; }
  .rem-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 375px) {
  .rem-sec,
  .rem-sec-alt,
  .rem-sec-vital,
  .rem-sec-dark { padding: 56px 20px; }
  .rem-hero { padding: 80px 20px 56px; }
}


/* ============================================================
   15  SINGLE + ARCHIVE (Phase 2 Step 4)
   Editorial article single (.rem-single__*) and category/taxonomy
   archive (.rem-arc-*) templates. Both consume the card, grid,
   button, and section system components defined above.
   ============================================================ */

/* --- Single article hero image / placeholder --- */
.rem-single__hero-img {
  width: 100%;
  max-height: 520px;
  overflow: hidden;
  margin-top: calc(var(--band-h) + var(--nav-h));
}
.rem-single__hero-img img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}
.rem-single__hero-placeholder {
  width: 100%;
  height: 280px;
  background: var(--authority);
  margin-top: calc(var(--band-h) + var(--nav-h));
}

/* --- Article header --- */
.rem-single__header {
  max-width: 920px;
  padding: 64px 40px 40px;
  margin: 0 auto;
}
.rem-single__header .rem-eye-primary { color: var(--primary); }

.rem-single__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--authority);
  max-width: 760px;
  margin: 14px 0 28px;
}

.rem-single__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.rem-single__byline-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--background);
}
.rem-single__byline-avatar img,
.rem-single__byline-avatar .rem-single__byline-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.rem-single__byline-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rem-single__byline-name {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--authority);
  text-decoration: none;
}
.rem-single__byline-name strong { font-weight: 600; }
.rem-single__byline-name:hover { color: var(--primary); }

/* --- Article body --- */
.rem-single__body {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 40px 64px;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.75;
  color: var(--slate);
}
.rem-single__body > * + * { margin-top: 24px; }
.rem-single__body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  color: var(--authority);
  margin-top: 48px;
  margin-bottom: 0;
}
.rem-single__body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--authority);
  margin-top: 36px;
  margin-bottom: 0;
}
.rem-single__body p { margin-bottom: 0; }
.rem-single__body a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rem-single__body a:hover { color: var(--primary-dk); }
.rem-single__body strong { font-weight: 600; color: var(--authority); }
.rem-single__body ul,
.rem-single__body ol {
  padding-left: 24px;
}
.rem-single__body ul li { list-style: disc; margin-bottom: 8px; }
.rem-single__body ol li { list-style: decimal; margin-bottom: 8px; }

.rem-single__body img,
.rem-single__body figure img {
  width: 100%;
  height: auto;
  border-radius: var(--rad-card);
  margin: 32px 0;
}
.rem-single__body figcaption {
  font-size: 15px;
  color: var(--slate);
  margin-top: 8px;
  text-align: center;
}

.rem-single__body blockquote,
.rem-single__body .rem-pull {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--authority);
  border-left: 3px solid var(--primary);
  padding: 8px 0 8px 24px;
  margin: 32px 0;
  max-width: 100%;
}

/* --- Share row --- */
.rem-single__share {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 40px;
  text-align: center;
  border-top: 1px solid var(--border);
}
.rem-single__share .rem-eye { margin-bottom: 18px; }
.rem-single__share-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rem-single__share-row .rem-btn { padding: 12px 22px; font-size: 14px; }

/* --- Author card band on Platinum --- */
.rem-single__author {
  background: var(--background);
  padding: 64px 40px;
}
.rem-single__author-inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 920px;
}
.rem-single__author-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
}
.rem-single__author-portrait img,
.rem-single__author-portrait .rem-single__author-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.rem-single__author-body { flex: 1; }
.rem-single__author-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  color: var(--authority);
  margin: 6px 0 6px;
}
.rem-single__author-title,
.rem-single__author-co {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
.rem-single__author-body .rem-btn-text { margin-top: 14px; }

/* --- Related block --- */
.rem-single__related {
  padding-top: 72px;
  padding-bottom: 72px;
}

/* --- Archive hero bar --- */
.rem-arc-hero {
  min-height: 280px;
  padding-top: calc(var(--band-h) + var(--nav-h) + 48px);
  padding-bottom: 48px;
  display: flex;
  align-items: center;
}
.rem-arc-hero .rem-inn { width: 100%; }
.rem-arc-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 12px 0 0;
}
.rem-arc-hero__desc {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.7);
  max-width: 640px;
  margin-top: 16px;
}
.rem-arc-hero__desc p { color: rgba(255,255,255,.7); margin: 0; }

/* Archive hero — optional background image + gradient overlay.
   Triggered by .rem-arc-hero--has-image (added by archive.php when the
   category has a rem_category_image_url term meta value). The ::before
   pseudo-element runs a navy-to-gold gradient across the image so the
   title/breadcrumb stay legible while the right edge warms into brand
   gold — the "sun from the right" effect. .rem-inn is lifted above the
   overlay with z-index:1. */
.rem-arc-hero--has-image {
  background-color: var(--authority);
  background-size: cover;
  background-position: center;
  position: relative;
}
.rem-arc-hero--has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(13,27,42,0.95) 0%,
    rgba(13,27,42,0.80) 40%,
    rgba(13,27,42,0.45) 68%,
    rgba(201,168,76,0.28) 100%
  );
  pointer-events: none;
}
.rem-arc-hero--has-image .rem-inn {
  position: relative;
  z-index: 1;
}

.rem-breadcrumb {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 10px;
}
.rem-breadcrumb a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.rem-breadcrumb a:hover { color: #fff; }

/* --- Archive grid --- */
.rem-arc-grid { padding-top: 72px; padding-bottom: 72px; }

/* --- Pagination --- */
.rem-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 48px 0 16px;
}
.rem-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: var(--rad-btn);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rem-pagination .page-numbers:hover {
  background: var(--primary);
  color: #fff;
}
.rem-pagination .page-numbers.current {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.rem-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--slate);
}
.rem-pagination .page-numbers.dots:hover {
  background: transparent;
  color: var(--slate);
}

/* --- Responsive adjustments for single + archive --- */
@media (max-width: 900px) {
  .rem-single__header { padding: 48px 24px 32px; }
  .rem-single__body { padding: 12px 24px 48px; font-size: 19px; }
  .rem-single__share { padding: 40px 24px; }
  .rem-single__author { padding: 48px 24px; }
  .rem-single__author-inner { gap: 24px; }
  .rem-single__author-portrait { width: 72px; height: 72px; }
  .rem-arc-hero { min-height: 240px; padding-top: calc(var(--band-h) + var(--nav-h) + 32px); }
  .rem-arc-grid { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 640px) {
  .rem-single__body { font-size: 18px; }
  .rem-single__author-inner { flex-direction: column; gap: 16px; }
  .rem-single__share-row { gap: 8px; }
  .rem-single__share-row .rem-btn { padding: 10px 18px; }
}


/* ============================================================
   16  INTERIOR PAGES + MYCONNECT (Phase 2 Step 5)
   Generic interior page template (about, membership, directory,
   member-dashboard, shows, event-host-guide) and the standalone
   MyConnect Card template at /{username}/.
   ============================================================ */

/* --- Interior page hero bar --- */
.rem-page-hero {
  min-height: 280px;
  padding-top: calc(var(--band-h) + var(--nav-h) + 48px);
  padding-bottom: 48px;
  display: flex;
  align-items: center;
}
.rem-page-hero .rem-inn { width: 100%; }
.rem-page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 12px 0 0;
}

/* --- Interior page body --- */
.rem-page-body { padding: 64px 0; }
.rem-page-body .rem-inn {
  max-width: 820px;
  padding: 0 40px;
}
.rem-page-body p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--slate);
  margin-bottom: 18px;
}
.rem-page-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  color: var(--authority);
  margin-top: 40px;
  margin-bottom: 14px;
}
.rem-page-body h2:first-child { margin-top: 0; }
.rem-page-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--authority);
  margin-top: 32px;
  margin-bottom: 10px;
}
.rem-page-body strong { font-weight: 600; color: var(--authority); }
.rem-page-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rem-page-body a:hover { color: var(--primary-dk); }
.rem-page-body ul,
.rem-page-body ol {
  padding-left: 24px;
  margin-bottom: 18px;
}
.rem-page-body ul li { list-style: disc; margin-bottom: 8px; color: var(--slate); }
.rem-page-body ol li { list-style: decimal; margin-bottom: 8px; color: var(--slate); }

/* --- Directory grid spacing --- */
.rem-directory__grid { margin-top: 48px; }

/* --- Dashboard status block --- */
.rem-dashboard__status {
  background: var(--background);
  padding: 32px;
  border-radius: var(--rad-card);
  margin-top: 32px;
  max-width: 560px;
}
.rem-dashboard__status .rem-eye { margin-bottom: 12px; }
.rem-dashboard__status h2,
.rem-dashboard__status .rem-h3 { margin-top: 0; margin-bottom: 8px; }
.rem-dashboard__status p { margin-bottom: 8px; }
.rem-dashboard__status p:last-child { margin-bottom: 0; }

/* --- Event host guide facts table --- */
.rem-host-guide__facts {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px 24px;
  padding: 24px;
  background: var(--background);
  border-radius: var(--rad-card);
  margin: 0 0 32px;
}
.rem-host-guide__facts dt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.rem-host-guide__facts dd {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--authority);
  margin: 0;
}

/* --- MyConnect Card standalone template --- */
.rem-myconnect-page { background: var(--background); }
.rem-myconnect {
  min-height: 100vh;
  background: var(--background);
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.rem-myconnect__header {
  height: 200px;
  background: var(--authority);
  position: relative;
}
.rem-myconnect__portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  overflow: hidden;
  background: var(--authority);
  display: block;
  margin: -60px auto 0;
  position: relative;
  z-index: 1;
}
.rem-myconnect__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rem-myconnect__body {
  text-align: center;
  padding: 24px 32px 64px;
  background: #fff;
  flex: 1;
}
.rem-myconnect__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--authority);
  margin: 16px 0 6px;
}
.rem-myconnect__title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 4px;
}
.rem-myconnect__co {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--slate);
  margin: 0;
}
.rem-myconnect__divider {
  width: 120px;
  height: 1px;
  background: var(--accent);
  margin: 24px auto;
}
.rem-myconnect__bio {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--slate);
  max-width: 520px;
  margin: 0 auto 28px;
  text-align: center;
}
.rem-myconnect__body .rem-btn-primary { margin: 0 auto; }

.rem-myconnect__socials {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 28px 0 0;
}
.rem-myconnect__socials a {
  color: var(--authority);
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}
.rem-myconnect__socials a:hover { color: var(--primary); }

.rem-myconnect__badge {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.rem-myconnect__badge a {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.rem-myconnect__badge a:hover { color: var(--primary); }

/* MyConnect responsive */
@media (max-width: 640px) {
  .rem-myconnect__header { height: 160px; }
  .rem-myconnect__portrait { width: 100px; height: 100px; margin-top: -50px; }
  .rem-myconnect__name { font-size: 28px; }
  .rem-myconnect__body { padding: 24px 24px 48px; }
}

/* Interior page responsive */
@media (max-width: 900px) {
  .rem-page-hero { min-height: 240px; padding-top: calc(var(--band-h) + var(--nav-h) + 32px); }
  .rem-page-body { padding: 48px 0; }
  .rem-page-body .rem-inn { padding: 0 24px; }
  .rem-host-guide__facts { grid-template-columns: 1fr; gap: 4px 0; }
  .rem-host-guide__facts dt { margin-top: 12px; }
  .rem-host-guide__facts dt:first-child { margin-top: 0; }
}


/* ============================================================
   17  GUEST + HOST APPLICATION PAGES (Phase 2 Step 6)
   Two-column visual shell wrapping the preserved Pattern A native
   AJAX form markup. Form field selectors and the rem-native-form
   class are honored as the contract for js/rem-forms.js (protected).
   ============================================================ */

.rem-apply__grid {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 56px;
  align-items: start;
  padding: 56px 0 16px;
}

.rem-apply__copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--authority);
  margin: 12px 0 18px;
}
.rem-apply__copy p { margin-bottom: 14px; }

.rem-apply__list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
.rem-apply__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
}
.rem-apply__list li::before {
  content: "·";
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 28px;
  line-height: 1;
  color: var(--primary);
  font-weight: 700;
}

.rem-apply__form-wrap {
  position: sticky;
  top: calc(var(--band-h) + var(--nav-h) + 24px);
}
.rem-apply__form-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  color: var(--authority);
  margin: 0 0 4px;
}
.rem-apply__form-sub {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--slate);
  margin: 0 0 24px;
}

/* Native form internals shipped by template-page-guest.php and
   template-page-host.php. Names match the v1.1.6.7 contract that
   js/rem-forms.js consumes. Do not rename any selector here without
   matching protected JS updates. */
.rem-native-form .rem-step + .rem-step { display: none; }
.rem-native-form .rem-step[hidden] { display: none; }
.rem-step-legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--authority);
  margin-bottom: 16px;
  padding: 0;
}
.rem-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.rem-field-row--split > .rem-field-group { flex: 1; }
.rem-field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}
.rem-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 6px;
}
.rem-input,
.rem-select,
.rem-textarea {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--authority);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--rad-btn);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.rem-input:focus,
.rem-select:focus,
.rem-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(41,171,226,.18);
}
.rem-textarea { min-height: 110px; resize: vertical; }

.rem-step-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}
.rem-step-nav--split { justify-content: space-between; }

.rem-step-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 8px;
}
.rem-step-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width .3s ease;
}
.rem-step-indicator {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}

.rem-form-fine {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  margin: 14px 0 0;
}
.rem-form-error {
  background: #FEE;
  border: 1px solid #E53E3E;
  color: #9B2C2C;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px;
  border-radius: var(--rad-btn);
  margin-top: 14px;
}

.rem-form-success {
  text-align: center;
  padding: 32px 16px;
}
.rem-form-success-mark {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--vital);
  color: var(--primary);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
}
.rem-form-success-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--authority);
  margin: 0 0 10px;
}
.rem-form-success-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  margin: 0;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive: stack columns at 900px, form first */
@media (max-width: 900px) {
  .rem-apply__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 8px;
  }
  .rem-apply__form-wrap {
    position: static;
    order: -1;
  }
  .rem-apply__copy { order: 0; }
}
@media (max-width: 640px) {
  .rem-field-row--split { flex-direction: column; gap: 0; }
  .rem-step-nav { flex-direction: column-reverse; align-items: stretch; }
  .rem-step-nav .rem-btn { width: 100%; text-align: center; }
}


/* ============================================================
   18  PRINT
   Minimal. Hide nav, band, footer. Use body font throughout.
   ============================================================ */

@media print {
  .rem-band,
  .rem-nav,
  .rem-footer,
  .rem-hero__indicator,
  .rem-nav-cta { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .rem-sec,
  .rem-sec-alt,
  .rem-sec-vital,
  .rem-sec-dark {
    background: #fff !important;
    color: #000 !important;
    padding: 24pt 0;
  }
  .rem-display,
  .rem-h1,
  .rem-h2,
  .rem-h3,
  .rem-h4 { color: #000 !important; }
  a { color: #000; text-decoration: underline; }
}