@charset "UTF-8";
/* ==========================================================================
   Sugar Baby Chicago — sugarbabychicago.com
   Chicago Metropolitan Glamour × Lakefront Romance × Architectural Luxury
   × After-Dark Chemistry

   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons & links
   6.  Header / navigation
   7.  Hero patterns
   8.  Editorial & media blocks
   9.  Member (profile) cards
   10. Neighborhood modules
   11. Spot / lifestyle / tip cards
   12. Chat & chatroom UI
   13. Lists, callouts, checklists
   14. FAQ & accordions
   15. Filters, tabs & tags
   16. Blog editorial
   17. Forms
   18. Footer
   19. Motion & utilities
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */

:root {
  /* Brand palette */
  --midnight: #1e2a38;      /* Midnight Chicago Blue */
  --midnight-70: rgba(30, 42, 56, 0.7);
  --midnight-08: rgba(30, 42, 56, 0.08);
  --panel: #243040;         /* raised surface on dark */
  --panel-2: #2d3e52;       /* selected surface on dark */
  --merlot: #7d4354;        /* romantic accent */
  --merlot-dark: #6b3849;
  --champagne: #b89a70;     /* restrained luxury detail */
  --ivory: #f6f2ec;         /* architectural ivory */
  --concrete: #d9d2c8;      /* warm concrete */
  --rose: #c69aa3;          /* dusty rose */
  --lake: #dce4e7;          /* lake mist */
  --charcoal: #29292b;      /* primary text */

  /* Text on light surfaces */
  --ink: var(--charcoal);
  --ink-70: rgba(41, 41, 43, 0.7);
  --ink-65: rgba(41, 41, 43, 0.65);
  --ink-55: rgba(41, 41, 43, 0.55);
  --ink-40: rgba(41, 41, 43, 0.4);

  /* Text on dark surfaces */
  --paper: #ffffff;
  --paper-70: rgba(255, 255, 255, 0.7);
  --paper-60: rgba(255, 255, 255, 0.6);
  --paper-45: rgba(255, 255, 255, 0.45);
  --paper-30: rgba(255, 255, 255, 0.3);
  --hairline: rgba(255, 255, 255, 0.12);

  /* Type */
  --display: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Architectural radii — small and restrained, never pill-shaped */
  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 3px;

  /* Rhythm */
  --wrap: 1280px;
  --gutter: clamp(1.25rem, 4vw, 1.5rem);
  --nav-h: 64px;
  --section-y: clamp(3.5rem, 8vw, 5.5rem);

  --shadow-nav: 0 1px 8px rgba(30, 42, 56, 0.06);
  --shadow-card: 0 12px 32px -18px rgba(30, 42, 56, 0.4);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. RESET & BASE ---------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Long tokens (email addresses, hyphenated place names) must never widen a phone */
p, li, h1, h2, h3, h4, dd, dt, figcaption { overflow-wrap: break-word; }

img,
picture,
svg,
video { display: block; max-width: 100%; }

img { height: auto; background-color: var(--concrete); }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; padding: 0; }

/* Visible, brand-consistent focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--midnight);
  color: #fff;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  border-radius: var(--r-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

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

/* Icon sprite */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 3. TYPOGRAPHY ------------------------------------------------------------ */

/* Spectral carries more x-height and a sturdier stem than the Didone it
   replaced, so the scale is eased back slightly and the weight sits at 600. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.375rem, 5.9vw, 4rem); }
h2 { font-size: clamp(1.8125rem, 4vw, 2.875rem); }
h3 { font-size: clamp(1.25rem, 2.3vw, 1.6875rem); line-height: 1.2; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.66;
  color: var(--ink-65);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  line-height: 1.5;
}
.article-meta a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.on-dark .lede,
.section--dark .lede { color: var(--paper-60); }

.serif-em {
  font-style: normal;
  color: var(--rose);
}
.serif-em--champagne { color: var(--champagne); }

/* Eyebrow: hairline rule + tracked-out label, used as a section signature */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.75rem;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--champagne);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.rule {
  width: 3rem;
  height: 1px;
  background: var(--champagne);
  border: 0;
  margin: 0 0 1.5rem;
}
.rule--merlot { background: var(--merlot); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { text-align: center; max-width: 42rem; margin-inline: auto; }
.section-head p { margin-top: 0.9rem; }

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

/* 4. LAYOUT PRIMITIVES ----------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 60rem; }
.wrap--reading { max-width: 46rem; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section--flush-top { padding-top: 0; }

.section--ivory { background: var(--ivory); }
.section--white { background: #fff; }
.section--lake { background: var(--lake); }
.section--concrete { background: var(--concrete); }

.section--dark,
.on-dark {
  background: var(--midnight);
  color: var(--paper-70);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.hairline-top { border-top: 1px solid var(--concrete); }
.hairline-bottom { border-bottom: 1px solid var(--concrete); }

main { padding-top: var(--nav-h); }
body[data-nav="overlay"] main { padding-top: 0; }

/* Generic responsive grids */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--tight { gap: 0.625rem; }

/* Asymmetric editorial split — the site's signature composition */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--media-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.split--text-lead { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.split--top { align-items: start; }
.split__media--second { order: 2; }

@media (max-width: 860px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .split__media--second { order: 0; }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5. BUTTONS & LINKS ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.btn-sm { padding: 0.6rem 1.25rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }

.btn-merlot { background: var(--merlot); color: #fff; }
.btn-merlot:hover { background: var(--merlot-dark); }

.btn-midnight { background: var(--midnight); color: #fff; }
.btn-midnight:hover { background: #29384a; }

.btn-champagne { background: var(--champagne); color: var(--midnight); font-weight: 600; }
.btn-champagne:hover { background: #a8895e; }

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

.btn-outline-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }

.btn-outline-champagne { border-color: rgba(184, 154, 112, 0.5); color: var(--champagne); }
.btn-outline-champagne:hover { background: rgba(184, 154, 112, 0.12); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn-row--center { justify-content: center; }

/* Text link with a traveling arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--merlot);
  border-bottom: 1px solid rgba(125, 67, 84, 0.35);
  padding-bottom: 2px;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease);
}
.link-arrow:hover { gap: 0.85rem; border-color: var(--merlot); }
.link-arrow .icon { width: 0.85em; height: 0.85em; }

.link-arrow--light { color: var(--champagne); border-bottom-color: rgba(184, 154, 112, 0.35); }
.link-arrow--light:hover { border-color: var(--champagne); }

.link-arrow--ink { color: var(--midnight); border-bottom-color: var(--midnight-08); }
.link-arrow--ink:hover { border-color: rgba(30, 42, 56, 0.4); }

/* Inline contextual link inside body copy */
.text-link {
  color: var(--merlot);
  border-bottom: 1px solid rgba(125, 67, 84, 0.3);
  transition: border-color 0.2s var(--ease);
}
.text-link:hover { border-bottom-color: var(--merlot); }
.on-dark .text-link,
.section--dark .text-link {
  color: var(--champagne);
  border-bottom-color: rgba(184, 154, 112, 0.4);
}
.on-dark .text-link:hover,
.section--dark .text-link:hover { border-bottom-color: var(--champagne); }

/* 6. HEADER / NAVIGATION --------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--midnight-08);
  box-shadow: var(--shadow-nav);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
/* Over a dark hero the bar starts invisible and resolves on scroll */
body[data-nav="overlay"] .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
}

.brand { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--midnight);
  transition: color 0.3s var(--ease);
}
.brand-city {
  margin-top: 2px;
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
}

.nav-menu { display: flex; align-items: center; gap: 1.75rem; }
.nav-links { display: flex; align-items: center; gap: 1.75rem; }

.nav-links a {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--midnight);
  transition: color 0.25s var(--ease);
}
.nav-links a:hover { color: var(--merlot); }
.nav-links a[aria-current="page"] {
  color: var(--merlot);
  border-bottom: 1px solid var(--merlot);
  padding-bottom: 2px;
}

body[data-nav="overlay"] .site-header:not(.is-scrolled) .brand-name,
body[data-nav="overlay"] .site-header:not(.is-scrolled) .nav-links a,
body[data-nav="overlay"] .site-header:not(.is-scrolled) .nav-toggle { color: #fff; }
body[data-nav="overlay"] .site-header:not(.is-scrolled) .nav-links a:hover { color: var(--rose); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--midnight);
  /* 44px minimum touch target */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  margin-right: -0.5rem;
}
.nav-toggle .icon { width: 1.375rem; height: 1.375rem; }
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Seven primary links need a tighter rhythm before the burger takes over */
@media (min-width: 941px) and (max-width: 1150px) {
  .nav-menu, .nav-links { gap: 1.15rem; }
  .nav-links a { font-size: 0.75rem; }
}

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.25rem;
    background: var(--midnight);
    border-top: 1px solid var(--hairline);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a,
  body[data-nav="overlay"] .site-header:not(.is-scrolled) .nav-links a {
    display: block;
    padding: 0.9rem var(--gutter);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links a[aria-current="page"] { color: var(--champagne); border-bottom-color: rgba(255,255,255,0.06); }
  .nav-menu .btn { margin: 1rem var(--gutter) 0; }
}

/* 7. HERO PATTERNS --------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--midnight);
  color: #fff;
  overflow: hidden;
}
/* Full-bleed opening screen. The overlay nav floats on top, so the hero owns the
   whole viewport; dvh stops mobile browser chrome from cropping it. */
.hero--tall {
  min-height: 100vh;   /* fallback for browsers without dvh */
  min-height: 100dvh;
  /* Bottom pad scales with the viewport so the copy sits in the lower third
     rather than sinking to the floor on a tall screen. */
  padding-block: calc(var(--nav-h) + 4rem) clamp(6rem, 18vh, 13rem);
}
.hero--mid { min-height: 34rem; padding-block: 9rem 3.5rem; }
.hero--short { min-height: 26rem; padding-block: 8rem 3rem; }

/* Phones: the opening copy centres and lifts clear of the bottom edge */
@media (max-width: 640px) {
  .hero--tall { padding-block: calc(var(--nav-h) + 2rem) clamp(5rem, 15vh, 8.5rem); }
  .hero--tall .hero__copy { max-width: none; text-align: center; }
  .hero--tall .eyebrow,
  .hero--tall .btn-row,
  .hero--tall .hero__note { justify-content: center; }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.hero__media--soft { opacity: 0.3; }
.hero__media--strong { opacity: 0.6; }

/* The homepage hero uses an image composed around the copy, so it can carry a
   lighter scrim than general editorial heroes. */
.hero--home .hero__media { opacity: 0.58; }
.hero.hero--home::before {
  background:
    linear-gradient(to top, rgba(30, 42, 56, 0.82) 4%, rgba(30, 42, 56, 0.32) 50%, rgba(30, 42, 56, 0.04) 100%),
    linear-gradient(to right, rgba(30, 42, 56, 0.62), rgba(30, 42, 56, 0.08) 72%);
}

@media (max-width: 640px) {
  .hero--home .hero__media { opacity: 0.62; }
  .hero.hero--home::before {
    background: linear-gradient(to top, rgba(30, 42, 56, 0.86) 8%, rgba(30, 42, 56, 0.34) 62%, rgba(30, 42, 56, 0.1) 100%);
  }
}

/* Two-axis scrim keeps display type legible over any photograph */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--midnight) 4%, rgba(30, 42, 56, 0.5) 48%, rgba(30, 42, 56, 0.12) 100%),
    linear-gradient(to right, rgba(30, 42, 56, 0.75), rgba(30, 42, 56, 0) 72%);
}

.hero__inner { position: relative; width: 100%; }
.hero__copy { max-width: 34rem; }
.hero--wide .hero__copy { max-width: 46rem; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero .lede { color: var(--paper-70); margin-bottom: 2rem; }

.hero__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--paper-45);
}
.hero__note .icon { width: 0.8125rem; height: 0.8125rem; }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-30);
}
.hero__scroll .icon {
  width: 0.85rem;
  height: 0.85rem;
  animation: nudge 2s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Compact page banner for utility pages */
.page-banner {
  background: var(--midnight);
  color: var(--paper-60);
  padding-block: clamp(3rem, 7vw, 4.5rem);
}
.page-banner h1 { color: #fff; }
.page-banner p { margin-top: 1rem; max-width: 40rem; }
.page-banner .lede { color: var(--paper-60); }
.page-banner .eyebrow { margin-top: 1.25rem; }
/* Clears the fixed bar on pages that let the nav sit over a dark banner */
.page-banner--under-nav { padding-top: calc(var(--nav-h) + clamp(2.5rem, 5vw, 3.5rem)); }

/* Breadcrumbs */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-block: 1rem;
}
.crumbs a { color: var(--ink-55); }
.crumbs a:hover { color: var(--merlot); }
.crumbs li { display: flex; align-items: center; gap: 0.4rem; }
.crumbs li + li::before { content: "/"; color: var(--concrete); }
.crumbs [aria-current="page"] { color: var(--champagne); }
.crumbs--light { color: var(--paper-30); }
.crumbs--light a { color: var(--paper-45); }
.crumbs--light a:hover { color: var(--champagne); }
.crumbs--light li + li::before { color: rgba(255, 255, 255, 0.2); }

/* 8. EDITORIAL & MEDIA BLOCKS ---------------------------------------------- */

.media {
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--concrete);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.media--zoom:hover img { transform: scale(1.05); }
.media--tall { aspect-ratio: 4 / 5; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--landscape { aspect-ratio: 4 / 3; }
.media--wide { aspect-ratio: 16 / 9; }
.media--panorama { aspect-ratio: 21 / 9; }

/* Layered mosaic used in the "why Chicago" editorial */
.mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0.625rem;
  aspect-ratio: 1 / 1.05;
}
.mosaic > :first-child { grid-row: span 2; }
@media (max-width: 560px) {
  .mosaic { aspect-ratio: 1 / 1.2; }
}

.figure-caption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--ink-40);
  letter-spacing: 0.02em;
}
.on-dark .figure-caption { color: var(--paper-30); }

/* Full-bleed cinematic band */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--midnight);
  color: var(--paper-60);
  padding-block: clamp(4.5rem, 10vw, 7rem);
}
.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  filter: brightness(1.08) saturate(0.9);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(30, 42, 56, 0.98) 0%,
    rgba(30, 42, 56, 0.88) 34%,
    rgba(30, 42, 56, 0.48) 58%,
    rgba(30, 42, 56, 0.10) 100%
  );
}
.band h2 { color: #fff; }
.band__copy { max-width: 36rem; }

/* Dark inset panel that sits inside a light section */
.panel {
  background: var(--midnight);
  color: var(--paper-60);
  border-radius: var(--r-md);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.panel h2, .panel h3, .panel h4 { color: #fff; }

.panel--ivory {
  background: #fff;
  color: var(--ink-65);
  border: 1px solid var(--concrete);
}
.panel--ivory h2, .panel--ivory h3, .panel--ivory h4 { color: var(--midnight); }

/* Hairline-separated column set (no boxy cards) */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--concrete);
  border-radius: var(--r-md);
  overflow: hidden;
}
.columns > * {
  background: #fff;
  padding: clamp(1.5rem, 3vw, 2rem);
}
.columns h3 { margin-bottom: 1.1rem; }

/* Numbered editorial step */
.step-index {
  font-size: 0.6875rem;
  letter-spacing: 0.25em;
  color: rgba(184, 154, 112, 0.65);
  margin-bottom: 0.5rem;
}

/* Pull quote */
.pull-quote {
  margin: 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--champagne);
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--midnight);
}
.on-dark .pull-quote, .section--dark .pull-quote, .panel .pull-quote { color: #fff; }
.pull-quote cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.panel .pull-quote cite, .on-dark .pull-quote cite { color: var(--paper-30); }

/* 9. MEMBER (PROFILE) CARDS ------------------------------------------------ */

.member-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
}
.member-grid--8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.member-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.member-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) { .member-grid--8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .member-grid, .member-grid--8, .member-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .panel .member-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

.member-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--concrete);
  isolation: isolate;
}
.member-card__media { position: relative; aspect-ratio: 3 / 4; }
.member-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) saturate(0.82);
  transform: scale(1.04);
  transition: transform 0.6s var(--ease);
}
.member-card:hover .member-card__media img { transform: scale(1.08); }

/* Member photos remain intentionally private until a visitor joins. */
.member-card__lock {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  background: rgba(30, 42, 56, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  box-shadow: 0 0.4rem 1.2rem rgba(10, 16, 24, 0.28);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(4px);
}
.member-card__lock .icon { width: 0.9rem; height: 0.9rem; }
@media (max-width: 720px) {
  .member-card__lock {
    top: 28%;
    width: 2rem;
    height: 2rem;
  }
  .member-card__lock .icon { width: 0.8rem; height: 0.8rem; }
}
.member-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* The body block occupies roughly the bottom third, so the scrim has to stay
     strong that far up or white text lands on a bright patch of the photo. */
  background: linear-gradient(to top, rgba(30, 42, 56, 0.96) 4%, rgba(30, 42, 56, 0.88) 26%, rgba(30, 42, 56, 0.5) 46%, rgba(30, 42, 56, 0.12) 72%, rgba(30, 42, 56, 0));
}

.member-card__flags {
  position: absolute;
  inset: 0.6rem 0.6rem auto;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}

.role-tag {
  font-size: 0.625rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-xs);
  white-space: nowrap;
}
.role-tag--daddy { background: var(--champagne); color: var(--midnight); }
.role-tag--baby { background: var(--merlot); color: #fff; }

.verified-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  padding: 0.2rem 0.4rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--midnight);
  border-radius: var(--r-xs);
}
.verified-tag .icon { width: 0.65rem; height: 0.65rem; }

.member-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0.85rem;
  color: #fff;
}
.member-card__name {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}
.member-card__name strong {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}
.member-card__name span { font-size: 0.8125rem; color: var(--paper-70); }

.online-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-size: 0.625rem;
  color: #6ee7b7;
}
.online-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
}

.member-card__area {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--champagne);
  margin-bottom: 0.5rem;
}
.member-card__area .icon { width: 0.6rem; height: 0.6rem; }

.member-card__intro {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--paper-70);
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.chip {
  font-size: 0.6875rem;
  padding: 0.2rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper-70);
  border-radius: var(--r-xs);
}

.member-note {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--ink-40);
}
.on-dark .member-note, .section--dark .member-note, .panel .member-note { color: var(--paper-30); }

/* 10. NEIGHBORHOOD MODULES ------------------------------------------------ */

.hood-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}
.hood-mosaic > :first-child { grid-column: span 2; grid-row: span 2; }

@media (max-width: 860px) {
  .hood-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hood-mosaic > :first-child { grid-column: span 2; grid-row: span 1; }
  /* The lead card eats a whole row, so an even total orphans the last card */
  .hood-mosaic > :last-child:nth-child(even) { grid-column: span 2; }
}
@media (max-width: 520px) {
  .hood-mosaic { grid-template-columns: minmax(0, 1fr); }
  .hood-mosaic > * {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .hood-mosaic > :first-child,
  .hood-mosaic > :last-child:nth-child(even) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

.hood {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-md);
  min-height: 11rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--midnight);
  color: var(--paper-70);
}
.hood--feature { min-height: 21rem; padding: clamp(1.75rem, 4vw, 3rem); }

.hood__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.hood:hover .hood__media { opacity: 0.42; transform: scale(1.05); }
.hood::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(30, 42, 56, 0.96), rgba(30, 42, 56, 0.76) 55%, rgba(30, 42, 56, 0.52));
}
.hood--merlot::before { background: linear-gradient(to top, rgba(58, 31, 45, 0.96), rgba(77, 42, 61, 0.76) 55%, rgba(58, 31, 45, 0.52)); }
.hood--forest::before { background: linear-gradient(to top, rgba(31, 45, 30, 0.96), rgba(42, 61, 41, 0.76) 55%, rgba(31, 45, 30, 0.52)); }
.hood--lake::before { background: linear-gradient(to top, rgba(26, 37, 53, 0.96), rgba(35, 48, 74, 0.76) 55%, rgba(26, 37, 53, 0.52)); }
.hood--plum::before { background: linear-gradient(to top, rgba(50, 30, 42, 0.96), rgba(68, 40, 58, 0.76) 55%, rgba(50, 30, 42, 0.52)); }
.hood--graphite::before { background: linear-gradient(to top, rgba(41, 41, 43, 0.96), rgba(58, 58, 62, 0.76) 55%, rgba(41, 41, 43, 0.52)); }

.hood__tag {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 0.35rem;
}
.hood h3 { color: #fff; margin-bottom: 0.5rem; }
.hood--feature h3 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.hood p { font-size: 0.8125rem; line-height: 1.6; max-width: 30rem; margin: 0; }
.hood__link {
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--champagne);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hood:hover .hood__link { gap: 0.7rem; }

/* Map-inspired neighborhood index */
.hood-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.hood-index li { background: var(--midnight); }
.hood-index a {
  display: block;
  padding: 1.1rem 1.25rem;
  transition: background-color 0.25s var(--ease);
}
.hood-index a:hover { background: var(--panel); }
.hood-index__name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.25rem;
}
.hood-index__name .icon { width: 0.75rem; height: 0.75rem; color: var(--champagne); }
.hood-index__meta { font-size: 0.6875rem; color: var(--paper-45); letter-spacing: 0.04em; }

/* 11. SPOT / LIFESTYLE / TIP CARDS ----------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-md);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.card:hover {
  border-color: rgba(184, 154, 112, 0.5);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.card__media { overflow: hidden; background: var(--concrete); aspect-ratio: 16 / 10; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: clamp(1.25rem, 2.5vw, 1.6rem); flex: 1; }
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.card h3 { font-size: 1.25rem; }
.card__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  color: var(--champagne);
  margin-bottom: 0.5rem;
}
.card__meta .icon { width: 0.65rem; height: 0.65rem; }
.card__vibe {
  font-size: 0.6875rem;
  color: var(--ink-55);
  letter-spacing: 0.04em;
  margin-bottom: 0.65rem;
}
.card p { font-size: 0.8125rem; line-height: 1.65; color: var(--ink-65); }

.card--feature { grid-column: span 2; }
.card--feature .card__media { aspect-ratio: 21 / 9; }
.card--feature h3 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
@media (max-width: 860px) { .card--feature { grid-column: span 2; } }
@media (max-width: 560px) { .card--feature { grid-column: span 1; } }

.card__footer {
  padding: 0 clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.6rem);
  font-size: 0.75rem;
  color: var(--ink-40);
}

/* Tip card — flat, hairline-bordered, no photography */
.tip {
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 1.9rem);
  transition: border-color 0.3s var(--ease);
}
.tip:hover { border-color: rgba(184, 154, 112, 0.5); }
.tip h3 { font-size: 1.1875rem; margin: 0.75rem 0 0.7rem; }
.tip p { font-size: 0.8125rem; line-height: 1.7; color: var(--ink-65); margin: 0; }

.badge {
  display: inline-block;
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-xs);
  background: rgba(125, 67, 84, 0.1);
  color: var(--merlot);
}
.badge--champagne { background: rgba(184, 154, 112, 0.16); color: #8a6f45; }
.badge--midnight { background: var(--midnight-08); color: var(--midnight-70); }
.badge--outline-light {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  color: var(--paper-60);
}

/* Icon-led feature cards (trust rows, principles and guidance grids) */
.grid > .feature {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(30, 42, 56, 0.12);
  border-top: 2px solid var(--champagne);
  border-radius: var(--r-md);
  box-shadow: 0 16px 36px -32px rgba(30, 42, 56, 0.55);
}
.section--white .grid > .feature { background: var(--ivory); }
.section--lake .grid > .feature { background: rgba(255, 255, 255, 0.58); }
.section--dark .grid > .feature,
.on-dark .grid > .feature,
.panel .grid > .feature {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: var(--champagne);
  box-shadow: none;
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--champagne);
  margin-bottom: 1.1rem;
  background: rgba(184, 154, 112, 0.13);
  border: 1px solid rgba(184, 154, 112, 0.28);
  border-radius: 50%;
}
.section--dark .feature__icon,
.on-dark .feature__icon,
.panel .feature__icon { background: rgba(184, 154, 112, 0.1); }
.feature__icon .icon { width: 1.25rem; height: 1.25rem; }
.feature h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--midnight);
  margin-bottom: 0.55rem;
  letter-spacing: 0;
  line-height: 1.35;
}
.on-dark .feature h3, .panel .feature h3, .section--dark .feature h3 { color: #fff; }
.feature p { font-size: 0.875rem; line-height: 1.7; color: var(--ink-65); margin: 0; }
.on-dark .feature p, .panel .feature p, .section--dark .feature p { color: var(--paper-70); }

@media (max-width: 560px) {
  .grid > .feature { padding: 1.25rem; }
  .feature__icon { margin-bottom: 0.9rem; }
}

/* Fact / detail block with champagne rule */
.fact {
  border-left: 2px solid var(--champagne);
  padding-left: 1.1rem;
}
.fact__label {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--midnight);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.fact p { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-55); margin: 0; }
.on-dark .fact__label, .panel .fact__label, .section--dark .fact__label { color: #fff; }
.on-dark .fact p, .panel .fact p, .section--dark .fact p { color: var(--paper-45); }
.fact--merlot { border-left-color: var(--merlot); }

/* Comparison layout (day/night, summer/winter, do/don't) */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--concrete);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compare > * { background: #fff; padding: clamp(1.5rem, 3vw, 2rem); }
.compare__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.compare__label .icon { width: 0.9rem; height: 0.9rem; }
.compare--dark { background: var(--hairline); }
.compare--dark > * { background: var(--panel); color: var(--paper-60); }
@media (max-width: 640px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* 12. CHAT & CHATROOM UI --------------------------------------------------- */

.chat-thread { display: flex; flex-direction: column; gap: 0.75rem; }
.bubble {
  max-width: min(72%, 30rem);
  padding: 0.7rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.6;
}
.bubble--them { align-self: flex-start; background: var(--panel-2); color: var(--paper-70); }
.bubble--me { align-self: flex-end; background: var(--merlot); color: #fff; }
.bubble__who {
  display: block;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}

/* Full chatroom product surface */
.chatroom {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  gap: 1rem;
  height: clamp(34rem, calc(100vh - var(--nav-h) - 3rem), 44rem);
}
@media (max-width: 900px) {
  .chatroom { grid-template-columns: minmax(0, 1fr); height: auto; }
}

.chat-sidebar { display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; }

.chat-search {
  background: var(--panel);
  border-radius: var(--r-md);
  padding: 1rem;
}
.chat-search__field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
}
.chat-search__field .icon { width: 0.9rem; height: 0.9rem; color: var(--paper-30); }
.chat-search__field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
}
.chat-search__field input::placeholder { color: var(--paper-30); }

.chat-list-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-30);
  padding-inline: 0.25rem;
}

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
@media (max-width: 900px) { .chat-list { max-height: 22rem; } }
.chat-list::-webkit-scrollbar { width: 4px; }
.chat-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }

.chat-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem;
  text-align: left;
  background: transparent;
  border-radius: var(--r-sm);
  transition: background-color 0.2s var(--ease);
}
.chat-person:hover { background: var(--panel); }
.chat-person[aria-pressed="true"],
.chat-person.is-active { background: var(--panel-2); }
.chat-person__avatar { position: relative; flex: none; }
.chat-person__avatar img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.chat-person__avatar[data-online="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #34d399;
  border: 2px solid var(--midnight);
}
.chat-person__body { flex: 1; min-width: 0; }
.chat-person__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.chat-person__name { color: #fff; font-size: 0.875rem; font-weight: 500; }
.chat-person__top .icon { width: 0.7rem; height: 0.7rem; color: var(--champagne); flex: none; }
.chat-person__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--paper-30);
}
.chat-person__meta .icon { width: 0.55rem; height: 0.55rem; }
.chat-person__preview {
  font-size: 0.6875rem;
  color: var(--paper-45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 900px) { .chat-panel { min-height: 32rem; } }

.chat-panel__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--hairline);
}
.chat-panel__id { flex: 1; min-width: 0; }
.chat-panel__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
}
.chat-panel__sub {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: var(--paper-45);
}
.chat-panel__sub .icon { width: 0.6rem; height: 0.6rem; }
.chat-panel__sub .is-online { color: #6ee7b7; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  color: var(--paper-45);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.icon-btn:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.icon-btn .icon { width: 0.85rem; height: 0.85rem; }

.chat-panel__strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: rgba(30, 42, 56, 0.45);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chat-panel__bio {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--paper-30);
  max-width: 22rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 700px) { .chat-panel__bio { display: none; } }

.chat-log {
  flex: 1;
  min-height: 12rem;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.chat-log::-webkit-scrollbar { width: 4px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }

.chat-compose { padding: 1rem 1.25rem; border-top: 1px solid var(--hairline); }
.chat-compose__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--midnight);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease);
}
.chat-compose__field:focus-within { border-color: rgba(184, 154, 112, 0.5); }
.chat-compose__field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
}
.chat-compose__field input::placeholder { color: var(--paper-30); }
.chat-compose__send { color: var(--champagne); display: inline-flex; transition: color 0.2s var(--ease); }
.chat-compose__send:hover { color: #fff; }
.chat-compose__send .icon { width: 1rem; height: 1rem; }
.chat-compose__note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.28);
}

/* 13. LISTS, CALLOUTS, CHECKLISTS ------------------------------------------ */

.ticks { display: grid; gap: 0.7rem; }
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-65);
}
.ticks .icon {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.3rem;
  flex: none;
  color: var(--champagne);
}
/* .hood is a dark card that can sit inside a light section, so it needs the
   light treatment on its own, not via an ancestor. */
.on-dark .ticks li, .panel .ticks li, .section--dark .ticks li, .hood .ticks li { color: var(--paper-70); }
.ticks--merlot .icon { color: var(--merlot); }
.ticks--rose .icon { color: var(--rose); }
.ticks--warn .icon { color: #e11d48; }

/* Dotted lifestyle list */
.dots { display: grid; gap: 0.6rem; }
.dots li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-65);
}
.dots li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55rem;
  border-radius: 50%;
  background: var(--champagne);
  flex: none;
}
.section--dark .dots li, .on-dark .dots li, .panel .dots li { color: var(--paper-60); }
.on-dark .dots li, .panel .dots li { color: var(--paper-60); }

/* Boxed checklist row */
.checklist { display: grid; gap: 0.6rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-70);
}
.checklist .icon { width: 0.95rem; height: 0.95rem; margin-top: 0.15rem; flex: none; color: var(--champagne); }
.checklist--warn .icon { color: #e11d48; }
.checklist--warn li { border-left: 2px solid rgba(225, 29, 72, 0.35); }

/* Callout */
.callout {
  border-left: 2px solid var(--champagne);
  background: rgba(184, 154, 112, 0.1);
  padding: 0.85rem 1.1rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-70);
}
.callout strong { color: var(--midnight); }
.callout--dark {
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper-60);
}
.callout--dark strong { color: #fff; }
.callout--merlot { border-left-color: var(--merlot); background: rgba(125, 67, 84, 0.08); }
.callout--warn { border-left-color: #e11d48; background: rgba(225, 29, 72, 0.07); }

/* Do / don't */
.verdict {
  background: #fff;
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 1.9rem);
  border-left: 2px solid var(--concrete);
}
.verdict--do { border-left-color: #059669; }
.verdict--dont { border-left-color: #e11d48; }
.verdict__label {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.verdict--do .verdict__label { color: #047857; }
.verdict--dont .verdict__label { color: #be123c; }
.verdict li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-70);
  margin-bottom: 0.6rem;
}
.verdict li:last-child { margin-bottom: 0; }
.verdict .icon { width: 0.9rem; height: 0.9rem; margin-top: 0.2rem; flex: none; }
.verdict--do .icon { color: #059669; }
.verdict--dont .icon { color: #e11d48; }

/* 14. FAQ & ACCORDIONS ----------------------------------------------------- */

.faq { display: grid; gap: 0.375rem; }

.faq-item {
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-md);
  overflow: hidden;
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 2.5vw, 1.5rem);
  cursor: pointer;
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--midnight);
  transition: background-color 0.2s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { background: var(--ivory); }
.faq-item > summary .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--champagne);
  transition: transform 0.25s var(--ease);
}
.faq-item[open] > summary .icon { transform: rotate(180deg); }
.faq-item__answer {
  padding: 1rem clamp(1.1rem, 2.5vw, 1.5rem) 1.35rem;
  border-top: 1px solid var(--concrete);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-65);
}
.faq-item__answer p { margin-bottom: 0.8rem; }

.faq--dark .faq-item { background: var(--panel); border-color: var(--hairline); }
.faq--dark .faq-item > summary { color: #fff; }
.faq--dark .faq-item > summary:hover { background: var(--panel-2); }
.faq--dark .faq-item__answer { border-top-color: var(--hairline); color: var(--paper-60); }

/* 15. FILTERS, TABS & TAGS ------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.filterbar__label {
  width: 100%;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 0.15rem;
}
.filter {
  padding: 0.45rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-sm);
  color: var(--ink-55);
  transition: all 0.25s var(--ease);
}
.filter:hover { border-color: rgba(30, 42, 56, 0.3); color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--midnight);
  border-color: var(--midnight);
  color: #fff;
}

/* Segmented control (inset pill group) */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ivory);
  border-radius: var(--r-sm);
}
.segmented .filter {
  border: 0;
  background: none;
  font-size: 0.6875rem;
  padding: 0.35rem 0.9rem;
}
.segmented .filter[aria-pressed="true"] { background: var(--midnight); color: #fff; }
.segmented--dark { background: rgba(255, 255, 255, 0.06); }
.segmented--dark .filter { color: var(--paper-45); }
.segmented--dark .filter:hover { color: #fff; }
.segmented--dark .filter[aria-pressed="true"] { background: var(--merlot); color: #fff; }
.segmented--fill { display: flex; width: 100%; }
.segmented--fill .filter { flex: 1; text-align: center; }

.empty-state {
  padding: 3rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-40);
}
.empty-state[hidden] { display: none; }

/* 16. BLOG EDITORIAL ------------------------------------------------------- */

.journal-lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  min-height: 26rem;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--midnight);
  color: var(--paper-60);
}
.journal-lead__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}
.journal-lead:hover .journal-lead__media { transform: scale(1.04); opacity: 0.5; }
.journal-lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(30, 42, 56, 0.92), rgba(30, 42, 56, 0.35));
}
.journal-lead h2 { color: #fff; max-width: 34rem; margin-bottom: 0.9rem; }
.journal-lead p { max-width: 30rem; font-size: 0.9375rem; }

/* Horizontal story row — deliberately not a 3-column WordPress grid */
.story {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
  border-bottom: 1px solid var(--concrete);
}
.story:first-of-type { border-top: 1px solid var(--concrete); }
.story__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--concrete); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.story:hover .story__media img { transform: scale(1.05); }
.story h3 { margin: 0.5rem 0 0.5rem; }
.story p { font-size: 0.875rem; color: var(--ink-65); margin-bottom: 0.8rem; }
@media (max-width: 640px) {
  .story { grid-template-columns: minmax(0, 1fr); }
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.topic-list li {
  background: var(--midnight);
  padding: 1.1rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--paper-60);
}
.topic-list strong { display: block; color: #fff; font-weight: 500; margin-bottom: 0.2rem; }

/* 17. FORMS ---------------------------------------------------------------- */

.form-field { margin-bottom: 0.9rem; }
.form-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
}
.input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: var(--r-sm);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.2s var(--ease);
}
.input::placeholder { color: var(--ink-40); }
.input:focus { outline: none; border-color: var(--champagne); box-shadow: 0 0 0 3px rgba(184, 154, 112, 0.15); }

.auth-card {
  background: var(--ivory);
  border-radius: var(--r-md);
  padding: clamp(1.75rem, 4vw, 2.25rem);
}
.role-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.role-choice__option {
  position: relative;
  display: block;
  padding: 0.85rem 0.5rem;
  text-align: center;
  font-size: 0.8125rem;
  border: 1px solid var(--concrete);
  border-radius: var(--r-sm);
  color: var(--ink-55);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.role-choice__option:hover { border-color: rgba(30, 42, 56, 0.4); }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice input:checked + .role-choice__option { background: var(--midnight); border-color: var(--midnight); color: #fff; }
.role-choice input#role-baby:checked + .role-choice__option { background: var(--merlot); border-color: var(--merlot); }
.role-choice input:focus-visible + .role-choice__option { outline: 2px solid var(--champagne); outline-offset: 2px; }

.form-note { font-size: 0.6875rem; color: var(--ink-40); line-height: 1.6; }

/* 18. FOOTER --------------------------------------------------------------- */

.site-footer { background: var(--midnight); color: var(--paper-45); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 2.5rem);
  padding-block: clamp(3rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 860px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

.footer-brand__name {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
}
.footer-brand__tag {
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0.15rem 0 1rem;
}
.footer-brand p { font-size: 0.8125rem; line-height: 1.7; color: rgba(255, 255, 255, 0.5); }

.footer-col h2 {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--champagne); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.1rem;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.3);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-bottom a:hover { color: rgba(255, 255, 255, 0.6); }

.age-note {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.3);
  margin-top: 1.1rem;
}

/* 19. MOTION & UTILITIES --------------------------------------------------- */

.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

.stack-sm > * + * { margin-top: 0.75rem; }
.stack > * + * { margin-top: 1.25rem; }
.stack-lg > * + * { margin-top: 2rem; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.mt-5 { margin-top: 4rem; }
.mb-2 { margin-bottom: 1.25rem; }
.mb-3 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 3rem; }

.measure { max-width: 38rem; }
.measure-wide { max-width: 46rem; }
.center-x { margin-inline: auto; }

[hidden] { display: none !important; }

@media print {
  .site-header, .site-footer, .hero__scroll, .filterbar, .chat-compose { display: none; }
  body { background: #fff; color: #000; }
}

/* 20. PAGE COMPOSITIONS ---------------------------------------------------- */

/* Role selector — two tall, deliberately unmatched panels */
.hood--role {
  min-height: 27rem;
  justify-content: space-between;
}
.hood--role .hood__media { opacity: 0.52; }
.hood--role:hover .hood__media { opacity: 0.6; }
.hood--role::before {
  background: linear-gradient(to top, rgba(30, 42, 56, 0.86), rgba(30, 42, 56, 0.54) 55%, rgba(30, 42, 56, 0.24));
}
.hood--role.hood--merlot::before {
  background: linear-gradient(to top, rgba(58, 31, 45, 0.86), rgba(77, 42, 61, 0.54) 55%, rgba(58, 31, 45, 0.24));
}
.hood--role h3 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; }
.hood--role .rule { margin-bottom: 1.25rem; }
.hood--role p { color: var(--paper-60); font-size: 0.9375rem; }
.hood--role .ticks { margin: 2rem 0 1.25rem; }
.hood--rose .hood__tag,
.hood--rose .hood__link { color: var(--rose); }
.hood--rose .rule { background: var(--rose); }

/* Hairline-divided step grid on dark */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.step-grid > li {
  background: var(--midnight);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.step-grid > li.is-cta {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-grid .is-cta h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}
@media (max-width: 860px) { .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .step-grid { grid-template-columns: minmax(0, 1fr); } }

/* Chatroom preview panel used on marketing pages */
.avatar-sm { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.chat-preview .chat-panel__head { padding: 0 0 0.9rem; }
.chat-preview .chat-thread { padding-top: 1.25rem; }

/* Comparison typography */
.compare h3 { margin-bottom: 0.9rem; }
.compare p { font-size: 0.875rem; line-height: 1.75; color: var(--ink-65); }
.compare--dark p { color: var(--paper-60); }
.compare__label--warm { color: #8a6f45; }
.compare__label--cool { color: #4a6b82; }
.compare__label--merlot { color: var(--merlot); }
.compare__label--muted { color: var(--ink-40); }
.compare__label--good { color: #047857; }
.compare__label--bad { color: #be123c; }

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Sticky in-page navigation for long editorial pages */
.jump-nav { position: sticky; top: calc(var(--nav-h) + 1.25rem); }
@media (max-width: 860px) { .jump-nav { position: static; } }
.jump-nav ol { display: grid; gap: 0.5rem; }
.jump-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--paper-60);
  transition: color 0.2s var(--ease);
}
.jump-nav a:hover { color: var(--champagne); }
.jump-nav .icon { width: 0.65rem; height: 0.65rem; flex: none; color: var(--champagne); }
.jump-nav--light a { color: var(--ink-55); }
.jump-nav--light a:hover { color: var(--merlot); }
.jump-nav__title {
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-40);
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--concrete);
}

/* Long editorial page with a sticky contents rail */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .guide-layout { grid-template-columns: minmax(0, 1fr); } }

/* Long-form neighborhood entry */
.hood-entry {
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--concrete);
}
.hood-entry:last-of-type { border-bottom: 0; margin-bottom: 0; }
.hood-entry__subtitle {
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 0.4rem;
}
.hood-entry h2, .hood-entry h3 { margin-bottom: 1.1rem; }
/* Neighborhood entries are h3 under a section h2, but read as the page's landmarks */
.hood-entry > h3 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; }

/* Long-form policy prose (privacy, terms) */
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: 0.9rem;
  font-size: clamp(1.375rem, 2.4vw, 1.625rem);
}
.prose h3 { margin-top: 1.75rem; margin-bottom: 0.6rem; font-size: 1.0625rem; }
.prose p, .prose li { font-size: 0.9375rem; line-height: 1.8; color: var(--ink-70); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin-top: 1rem; padding-left: 1.15rem; list-style: disc; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--champagne); }
.legal-meta {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--concrete);
  font-size: 0.75rem;
  color: var(--ink-40);
}

/* Sign-in / join page shell */
.auth-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 3rem;
  background: var(--midnight);
}
.auth-shell__inner { width: 100%; max-width: 26rem; }
.auth-mark { text-align: center; margin-bottom: 1.75rem; }
.auth-mark__name { font-family: var(--display); font-size: 1.75rem; font-weight: 700; color: #fff; }
.auth-mark__tag {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--champagne);
}
.auth-aside {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: var(--paper-45);
}
.auth-aside li { display: flex; align-items: flex-start; gap: 0.6rem; }
.auth-aside .icon { width: 0.85rem; height: 0.85rem; margin-top: 0.2rem; flex: none; color: var(--champagne); }

/* Timeline-style step list (how it works) */
.walkthrough { counter-reset: step; }
.walkthrough > .split { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.walkthrough > .split:last-child { margin-bottom: 0; }