/* =========================================================
   Earthnotes — marketing homepage
   Hand-written CSS. Light premium aesthetic. No framework.
   ========================================================= */

:root {
  /* surfaces */
  --surface:           #f6f9fc;   /* near-white, faint cool tint */
  --surface-elev:      #ffffff;
  --surface-low:       #eef3f8;
  --surface-tint:      #e7f1f8;   /* whisper of brand blue */

  /* text */
  --ink:               #0d1418;
  --ink-soft:          #2a3338;
  --ink-mute:          #5b6770;
  --ink-faint:         #8a949b;

  /* lines */
  --line:              #e2e7ed;
  --line-soft:         #edf0f4;

  /* brand — derived from the EarthNotes app icon:
     stand ≈ #201020 (near-black anchor), globe ≈ #1098CA (blue),
     highlights ≈ #F0F0F0. The site's CTAs and accents now read as
     the same brand as the icon people have on their phones. */
  --brand:             #131b20;   /* deep, slightly cool near-black */
  --brand-ink:         #ffffff;
  --accent:            #1098ca;   /* signature brand blue */
  --accent-soft:       #d6ecf6;   /* pale blue for soft fills */
  --accent-deep:       #0a5e80;   /* darker brand blue for hovers/text */

  /* dark section */
  --dark-bg:           #0b1a22;   /* deep blue-leaning charcoal */
  --dark-bg-2:         #11252f;
  --dark-ink:          #eaf2f6;
  --dark-ink-mute:     rgba(234, 242, 246, 0.82);
  --dark-line:         rgba(255, 255, 255, 0.10);

  /* utility */
  --radius-sm:         8px;
  --radius:            14px;
  --radius-lg:         22px;
  --radius-xl:         28px;

  --shadow-sm:         0 1px 2px rgba(13, 20, 24, 0.04), 0 1px 1px rgba(13, 20, 24, 0.03);
  --shadow:            0 6px 24px -8px rgba(13, 20, 24, 0.12), 0 2px 6px rgba(13, 20, 24, 0.05);
  --shadow-lg:         0 30px 60px -24px rgba(13, 20, 24, 0.25), 0 8px 24px -10px rgba(13, 20, 24, 0.12);

  --container:         1180px;
  --space-section:     clamp(72px, 9vw, 128px);

  --ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: 'Manrope', sans-serif; letter-spacing: -0.02em; }
p { margin: 0; }

.skip-link {
  position: absolute; left: -10000px; top: 0;
  background: var(--brand); color: var(--brand-ink);
  padding: 10px 16px; border-radius: 8px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Horizontal breathing room scales with viewport. At ~390px the
     header logo/button were sitting too close to the screen edge;
     bumped from 28/36 to 32/44 with an extra step at >=1024 for
     comfortable side margins on laptops/desktops. */
  padding: 0 32px;
}
@media (min-width: 720px) {
  .container { padding: 0 44px; }
}
@media (min-width: 1024px) {
  .container { padding: 0 56px; }
}

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 248, 250, 0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.site-header[data-scrolled="true"] {
  background: rgba(247, 248, 250, 0.92);
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  /* Mirror .nav-actions padding-right so the header logo doesn't sit
     flush against the container edge on wider viewports. */
  padding-left: 4px;
}
@media (min-width: 720px) {
  .brand { padding-left: 12px; }
}
.brand-mark {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--accent);
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.brand-word { font-size: 19px; }

.nav-links {
  display: none;
  gap: 28px;
}
.nav-links a {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
  transition: color 160ms var(--ease);
}
.nav-links a:hover { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Extra right breathing room so the primary CTA doesn't visually
     touch the page edge at wider viewports — the .container padding
     gives section gutters, but the nav benefits from a little more. */
  padding-right: 4px;
}
@media (min-width: 720px) {
  .nav-actions { padding-right: 12px; }
}

@media (min-width: 880px) {
  .nav-links { display: inline-flex; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 160ms var(--ease), background 160ms var(--ease),
              color 160ms var(--ease), box-shadow 160ms var(--ease),
              border-color 160ms var(--ease);
  white-space: nowrap;
}
.btn-lg { padding: 16px 26px; font-size: 15px; border-radius: 999px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 10px 22px -12px rgba(14, 42, 35, 0.55);
}
.btn-primary:hover {
  background: #122e26;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 18px 28px -14px rgba(14, 42, 35, 0.7),
    0 0 0 4px rgba(26, 136, 112, 0.08);
}
.btn-primary:active { transform: translateY(0); }

.btn-outline {
  background: var(--surface-elev);
  color: var(--ink);
  border-color: var(--line);
}
.btn-outline:hover {
  border-color: #c8cdd2;
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(13,20,24,0.16);
}
.btn-outline:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
}
.btn-ghost:hover { color: var(--ink); background: rgba(13,20,24,0.05); }

/* ---------- typography ---------- */
.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 18px;
}
.eyebrow-dark { color: var(--accent-deep); }
.eyebrow-on-dark { color: #79d4bc; }

/* Hero typography hierarchy — three tiers, biggest on top:
   1) .hero-headline  "Location, Location, Location"
   2) .hero-question  "So why are your conversations everywhere else?"
   3) .lead           supporting paragraph
   On wide screens .hero-headline is forced onto a single row via
   white-space: nowrap; on mobile it wraps naturally to keep the
   font size readable. */
.hero-headline {
  font-family: 'Manrope', sans-serif;
  /* Mobile + tablet (<980px = single-column hero): force one line
     by nowrapping and sizing the font to fit "Location, Location,
     Location" in the available container width. 5.5vw with a 42px
     cap keeps the headline on one line down to ~360px viewport
     width while still feeling like a hero on mid-sized tablets. */
  font-size: clamp(20px, 5.5vw, 42px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 18px;
  text-wrap: balance;
  white-space: nowrap;
}
@media (min-width: 980px) {
  .hero-headline {
    /* Two-column hero kicks in at 980px — copy column is roughly
       half-width, so the long headline can't fit on one line at
       the larger desktop font size. Allow natural wrap to two
       lines and let the font scale up. */
    white-space: normal;
    font-size: clamp(28px, 3.6vw, 44px);
  }
}

.hero-question {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(20px, 3.2vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-soft);
  margin: 0 0 22px;
  text-wrap: balance;
  max-width: 22ch;
}
.hero-question-accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(110deg, var(--accent-deep) 0%, var(--accent) 60%, #2bb597 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The italic slant pushes the right edge of the last glyph (the ?)
     past background-clip:text's tight bounding box, so the question
     mark gets clipped on the right. inline-block + a sliver of right
     padding gives the slant somewhere to land without clipping. */
  display: inline-block;
  padding-right: 0.12em;
}

.display {
  font-size: clamp(38px, 5.6vw, 68px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
  max-width: 18ch;
}
.display-accent {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(110deg, var(--accent-deep) 0%, var(--accent) 60%, #2bb597 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 720px) {
  .display { max-width: 14ch; }
  .display-accent { display: block; }
}

.h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 18px;
}
.h2-on-dark { color: var(--dark-ink); }

.h3 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  margin: 36px 0 12px;
  color: var(--ink);
}

.lead {
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 620px;
}
/* Hero tagline sits between .hero-question and .lead -- punchier than
   the body lead, lighter than the gradient question. Two short sentences
   that bridge the rhetorical question to the value prop. */
.hero-tagline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 620px;
  text-wrap: balance;
}
.body-lg {
  font-size: 17px;
  color: var(--ink-mute);
  line-height: 1.6;
}

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-sub  { color: var(--ink-mute); font-size: 17px; max-width: 580px; margin: 4px auto 0; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0 var(--space-section);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -10% -10% auto auto;
  width: 60%;
  height: 60%;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(26, 136, 112, 0.10), transparent 65%),
    radial-gradient(40% 40% at 20% 30%, rgba(86, 167, 142, 0.06), transparent 70%);
  filter: blur(20px);
  z-index: 0;
}
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1fr 1.15fr; }
  /* When the hero's right column holds the 60-second commercial,
     widen it further so the player reads as the primary visual. */
  .hero-grid:has(.hero-media--video) { grid-template-columns: 1fr 1.35fr; }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 32px;
  font-size: 13px;
  color: var(--ink-mute);
}
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(26, 136, 112, 0.12);
}

/* hero media: isolated so the final screenshot can swap in */
.hero-media {
  position: relative;
  padding: 18px;
}
/* Variant when the hero's right column carries the 60-second
   commercial instead of the UX mockup. The video player itself
   already has aspect-ratio 16/9 + shadow + border-radius; we just
   need to let it fill the column without the surrounding mockup
   chrome (chevron dots, .hero-media-frame's 4/3 aspect, etc). */
.hero-media--video {
  padding: 0;
}
.hero-media--video .video-frame {
  max-width: none;
}
/* Mobile: bleed the video to the edges of the viewport by canceling
   .container's horizontal padding (32px <720, 44px 720–1023). The
   video-player rounds its own corners — at full bleed those corners
   sit on the screen edge, which looks more polished than a tiny
   inset frame on a 390px phone. */
@media (max-width: 979px) {
  .hero-media--video {
    margin-left: -32px;
    margin-right: -32px;
  }
  .hero-media--video .video-player {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}
@media (min-width: 720px) and (max-width: 979px) {
  .hero-media--video {
    margin-left: -44px;
    margin-right: -44px;
  }
}
@media (min-width: 980px) {
  /* Push the player slightly beyond the column edge on the right so
     it reads larger against the headline. */
  .hero-media--video {
    margin-right: calc(-1 * clamp(8px, 2vw, 32px));
  }
}
/* The UX mockup, now relocated into the "video-section" slot below
   the hero, lives inside .hero-showcase so it centers within the
   wider container without spanning the full 1180px. */
.hero-showcase {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.hero-showcase .hero-media {
  padding: 0;
}
.hero-media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--surface-elev);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
/* The mockup card is positioned absolutely inside the frame. At
   wider viewports 4:3 gives plenty of height for the card's content
   (header + tabs + two message bubbles + PDF chip + reply input).
   As the viewport narrows the frame shrinks proportionally and the
   card content -- which has a near-fixed pixel height -- overflows
   the frame's bottom edge. Loosen the aspect ratio to portrait at
   narrow widths so the frame grows tall enough to contain the card. */
@media (max-width: 980px) {
  .hero-media-frame { aspect-ratio: 4 / 5; }
}
@media (max-width: 540px) {
  .hero-media-frame { aspect-ratio: 3 / 5; }
}
.hero-media-chrome {
  position: absolute; top: 12px; left: 14px;
  display: flex; gap: 6px;
  z-index: 2;
}
.hero-media-chrome span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #d8dde2;
}
.hero-media-chrome span:nth-child(1) { background: #f3a3a3; }
.hero-media-chrome span:nth-child(2) { background: #f3d59b; }
.hero-media-chrome span:nth-child(3) { background: #a8d8b9; }

.hero-media-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ----- Composed Earthnotes mockup (provisional hero) -----
   This block is a stand-in for the final product screenshot.
   Replace the contents of .hero-media-frame with a single <img>
   tagged id="hero-image" when the real asset is available. */
.hero-mockup {
  position: absolute;
  inset: 0;
  background: #e8edef;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.hero-map {
  width: 100%; height: 100%;
  display: block;
}

.mockup-pin {
  position: absolute;
  left: 27%;
  top: 72.5%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(13, 20, 24, 0.32));
}
.mockup-pin-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,152,202,0.40), rgba(16,152,202,0) 65%);
  animation: mockup-pulse 2.6s ease-in-out infinite;
}
.mockup-pin-icon {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
@keyframes mockup-pulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.7); opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-pin-ring { animation: none; }
}

.mockup-card {
  position: absolute;
  top: 9%;
  right: 5%;
  width: 68%;
  max-width: 400px;
  padding: 14px 14px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow:
    0 24px 48px -20px rgba(13,20,24,0.32),
    0 8px 18px -10px rgba(13,20,24,0.18),
    inset 0 1px 0 rgba(255,255,255,0.9);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  animation: mockup-float 6.5s ease-in-out infinite;
  transform-origin: center;
  opacity: 0;
  animation: mockup-card-in 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms forwards,
             mockup-float 6.5s ease-in-out 920ms infinite;
}
@keyframes mockup-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mockup-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-card { animation: none; opacity: 1; }
}
/* --- Mockup card mirrors the real EarthNotes app drawer ---
   Property header (bookmark + address + share), acreage/SF row,
   tab row (Chat is active with a badge), conversation back row,
   message bubble, reply input. Keeps the visual rhythm of the app
   itself rather than a generic site-context card. */
.mockup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  min-width: 0;
}
.mockup-card-icon {
  color: var(--ink-mute);
  flex-shrink: 0;
}
.mockup-card-addr {
  flex: 1;
  text-align: center;
  font-weight: 800;
  font-size: 11.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-card-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 10px;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.mockup-card-stat-label {
  font-weight: 600;
  color: var(--ink-mute);
}
.mockup-card-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
  font-size: 10px;
}
.mockup-tab {
  color: var(--ink-faint);
  font-weight: 600;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.mockup-tab--active {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mockup-tab--active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -7px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
.mockup-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}
.mockup-conv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.mockup-conv-back {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
.mockup-conv-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  letter-spacing: 0.01em;
}
.mockup-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.mockup-msg-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-grid; place-items: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
/* Second-speaker avatar variant -- matches .mockup-avatar--b in the
   conversation chrome header so RK is the warm/copper tone and JD is
   the brand blue. Keeps the two-sided thread visually distinct. */
.mockup-msg-avatar--alt { background: #c0894d; }
.mockup-msg-body { min-width: 0; flex: 1; }
.mockup-msg-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.mockup-msg-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.mockup-msg-time {
  font-size: 9px;
  color: var(--ink-faint);
}
.mockup-msg-bubble {
  display: inline-block;
  padding: 7px 11px;
  background: var(--surface-low);
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink);
}

/* PDF attachment chip that follows the JD bubble -- mirrors how the
   real app surfaces files inside a thread (file thumbnail + filename
   + size). Built from inline elements so there's no extra asset
   request; the "page" + corner fold + red PDF badge is enough to
   read as a document at this tiny scale. */
.mockup-msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px 6px 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.mockup-msg-attachment-thumb {
  position: relative;
  width: 26px;
  height: 32px;
  flex-shrink: 0;
}
.mockup-msg-attachment-page {
  position: absolute;
  inset: 0;
  background: #f5f7fa;
  border: 1px solid #d8dee5;
  border-radius: 3px;
}
.mockup-msg-attachment-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #d8dee5 50%, transparent 50%);
  border-top-right-radius: 3px;
}
.mockup-msg-attachment-badge {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  background: #d93025;
  color: #fff;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
}
.mockup-msg-attachment-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mockup-msg-attachment-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.mockup-msg-attachment-sub {
  font-size: 8.5px;
  color: var(--ink-faint);
  line-height: 1.2;
  margin-top: 1px;
}
.mockup-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px 7px 7px;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.mockup-reply-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.mockup-reply-placeholder {
  flex: 1;
  font-size: 10px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-reply-send {
  color: var(--accent);
  flex-shrink: 0;
}
.mockup-avatars { display: inline-flex; flex-shrink: 0; }
.mockup-avatar {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-grid; place-items: center;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  margin-left: -6px;
}
.mockup-avatar:first-child { margin-left: 0; }
.mockup-avatar--a { background: var(--brand); }
.mockup-avatar--b { background: #c0894d; }
.mockup-avatar--c { background: #6e7a82; }

.mockup-chip {
  position: absolute;
  left: 5%;
  bottom: 10%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: 0 10px 22px -10px rgba(13,20,24,0.22);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  opacity: 0;
  animation: chip-in 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 1100ms forwards;
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-chip { animation: none; opacity: 1; }
}
.mockup-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #d97742;
  box-shadow: 0 0 0 3px rgba(217, 119, 66, 0.18);
  animation: chip-dot-breathe 2.6s ease-in-out infinite;
}
@keyframes chip-dot-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 119, 66, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(217, 119, 66, 0.05); }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-chip-dot { animation: none; }
}

/* compact mockup at narrow widths */
@media (max-width: 720px) {
  .mockup-card {
    width: 70%;
    right: 4%;
    top: 6%;
    padding: 10px 12px;
  }
  .mockup-card-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
  .mockup-card-addr { white-space: normal; font-size: 11px; }
  .mockup-pill { font-size: 8.5px; padding: 3px 6px; }
  .mockup-card-note {
    font-size: 11px;
    line-height: 1.35;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mockup-card-attach { display: none; }
  .mockup-card-meta { padding-top: 8px; }
  .mockup-meta-time { font-size: 9.5px; }
  .mockup-avatar { width: 18px; height: 18px; font-size: 8px; }

  .mockup-chip {
    font-size: 10px;
    padding: 6px 10px;
    left: 4%;
    bottom: 6%;
  }
  .mockup-pin { left: 22%; top: 76%; }
}

.hero-media-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow);
  white-space: nowrap;
}
.hero-media-pin--a { top: 8%; left: -10px; }
.hero-media-pin--b { bottom: 4%; right: -10px; }
.pin-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(26, 136, 112, 0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
.pin-dot--alt { background: #d97742; box-shadow: 0 0 0 4px rgba(217, 119, 66, 0.18); animation-delay: 800ms; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,152,202,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(16,152,202,0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .pin-dot, .pin-dot--alt { animation: none; }
}

/* ---------- LOGO STRIP ---------- */
.logos {
  padding: 44px 0;
  background: var(--surface-elev);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.logos-eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 26px;
  font-weight: 600;
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 32px;
}
@media (min-width: 1024px) {
  /* On desktop, force all 9 logos onto one row by disabling wrap
     and letting the row use the full container width. JLL had been
     dropping to a second row by itself, which looked half-finished. */
  .logo-row {
    flex-wrap: nowrap;
    gap: clamp(16px, 2.4vw, 32px);
  }
}
.logo-row li {
  display: inline-flex;
  transition: transform 280ms var(--ease);
  flex-shrink: 0;
}
.logo-row li:hover { transform: translateY(-2px); }
.logo-row img {
  height: 28px;
  width: auto;
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.82;
  /* mix-blend mode knocks out the white backgrounds on the new PNGs
     so they sit on the page surface without a visible box around each
     logo. Works because the host surface is light. */
  mix-blend-mode: multiply;
  transition: opacity 280ms var(--ease), filter 280ms var(--ease);
}
.logo-row li:hover img { opacity: 1; filter: grayscale(0%); }
/* Blackstone's official brand mark is white serif lettering inside a
   solid black box. The default mix-blend-mode: multiply (used to knock
   out white backgrounds on the other logos) would make the white
   lettering invisible against the page, so render Blackstone with
   normal blending. The grayscale filter inherited from .logo-row img
   is a no-op since the mark is already mono. Drop opacity below the
   peer 0.82 so the saturated black box fades toward a mid-gray and
   sits at roughly the same visual weight as the line-art logos. */
.logo-row .logo-blackstone img {
  mix-blend-mode: normal;
  opacity: 0.55;
  /* Original 2.55:1 box; wordmark only fills the lower ~36%, so it
     needs more total height than peers to render the type at the same
     optical size. */
  height: 36px;
}
.logo-row .logo-blackstone:hover img { opacity: 0.85; }
/* HCA's logo is low-density red type that washes out under the
   shared 0.82 opacity + multiply chain. Bump opacity so it reads at
   roughly the same weight as its neighbors. */
.logo-row .logo-hca img { opacity: 1; }
/* CBRE renders ~111px wide at the shared 28px height (4:1 aspect),
   which makes it visually dominate. Shrink so it sits closer to its
   peers' weight. */
.logo-row .logo-cbre img { height: 22px; }
.logo-row .logo-colliers img { height: 34px; }
.logo-row .logo-wawa img {
  height: 34px;
  /* Optical lift -- the Wawa PNG carries extra padding below the
     mark, so center-alignment seats it lower than its peers. */
  transform: translateY(-3px);
}
/* 7-Eleven's mark is near-square -- at the shared 28px height it's
   only ~29px wide and looks shrunken next to the wordmarks. */
.logo-row .logo-7eleven img { height: 36px; }

/* ---------- VIDEO SECTION ---------- */
.video-section {
  padding: var(--space-section) 0;
  background: var(--surface);
}
/* When the video opens the section without an eyebrow/headline, the
   poster needs more presence to anchor the page itself. Tighten the
   top padding so the player sits closer to the social-proof strip
   above, and widen the frame. */
.video-section--lead {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: var(--space-section);
}
.video-frame {
  max-width: 980px;
  margin: 0 auto;
}
.video-frame--lg {
  max-width: 1180px;
}
.video-player {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.video-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease), filter 300ms var(--ease);
}
.video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
  transition: background 300ms var(--ease);
}
.video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  display: grid; place-items: center;
  box-shadow:
    0 20px 40px -10px rgba(0,0,0,0.4),
    0 0 0 8px rgba(255,255,255,0.18);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.video-play::before,
.video-play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  pointer-events: none;
  animation: video-pulse 2.6s ease-out infinite;
}
.video-play::after { animation-delay: 1.1s; }
@keyframes video-pulse {
  0%   { opacity: 0.65; transform: scale(0.92); }
  100% { opacity: 0;    transform: scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .video-play::before, .video-play::after { animation: none; opacity: 0; }
}
.video-play svg { transform: translateX(2px); position: relative; z-index: 1; }
.video-caption {
  position: absolute;
  left: 22px; bottom: 18px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.9;
}
.video-player:hover .video-poster { transform: scale(1.04); }
.video-player:hover .video-play   { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 24px 50px -12px rgba(0,0,0,0.5), 0 0 0 10px rgba(255,255,255,0.2); }
.video-player:focus-visible       { outline: 3px solid var(--accent); outline-offset: 4px; }

.video-player.is-playing .video-poster,
.video-player.is-playing .video-overlay,
.video-player.is-playing .video-play,
.video-player.is-playing .video-caption { display: none; }

.video-player video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: #000;
}

@media (prefers-reduced-motion: reduce) {
  .video-player:hover .video-poster { transform: none; }
  .video-player:hover .video-play   { transform: translate(-50%, -50%); }
}

/* ---------- SPLIT (behavior change) ---------- */
.split {
  padding: var(--space-section) 0;
  background: var(--surface-low);
}
.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (min-width: 940px) {
  /* Section 4 now hosts the compound .propthreads visual on the
     right -- map + property card overlay + threads index + share
     footer. That layout needs significantly more horizontal room
     than the previous single-thread mock, so the grid favors the
     visual side. */
  .split-grid { grid-template-columns: 1fr 1.55fr; }
}
.split-copy .eyebrow { color: var(--accent-deep); }

.check-list {
  display: grid;
  gap: 14px;
  margin-top: 28px;
  max-width: 520px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 500;
}
.check {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-top: 2px;
}
/* Two-tier check item: bold title on the first line, lighter
   supporting line below it. Used in the "Where real estate people
   think together" list. .check-list li can still hold plain text
   (no .check-text wrapper) for simpler one-line items elsewhere. */
.check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-title { color: var(--ink); font-weight: 600; }
.check-sub { color: var(--ink-mute); font-weight: 400; font-size: 14px; line-height: 1.45; }

.split-visual { display: grid; gap: 22px; }

/* Card: property thread */
.card {
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 320ms var(--ease),
              box-shadow 320ms var(--ease),
              border-color 320ms var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: #d5dadf;
  box-shadow:
    0 22px 44px -22px rgba(13,20,24,0.22),
    0 8px 18px -10px rgba(13,20,24,0.10);
}

.card-property-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.card-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--accent-deep);
  color: #fff;
  border-radius: 10px;
}
.card-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.card-sub   { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute); margin-top: 2px; font-weight: 600; }

.property {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
}
.property-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.property-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.badge-active {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-deep);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
}

.thread { display: grid; gap: 10px; }
.thread-row { display: flex; gap: 10px; }
.avatar {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 2px;
}
.avatar-alt { background: #c0894d; }
.bubble {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  flex: 1;
}
.bubble p { margin-bottom: 8px; }
.bubble p:last-child { margin-bottom: 0; }
.bubble-soft { background: var(--accent-soft); border-color: rgba(16,152,202,0.18); color: var(--accent-deep); }
.bubble-soft p { margin: 0; }
.attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 6px 8px;
  background: var(--surface-low);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

/* ---------- PROPERTY HUB (split-section right column) ----------
   Compound mock: outer card containing a 2-column main grid
   (map + property card overlay on the left, threads index on the
   right) with a share-this-property footer spanning both columns.
   Replaces the earlier .map-thread block. */
.propthreads {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 18px 36px -18px rgba(13,20,24,0.22),
    0 0 0 1px rgba(13,20,24,0.06);
}
.propthreads-main {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .propthreads-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

/* --- Map column (left) --- */
.propthreads-map {
  position: relative;
  background: #e6ecef;
  min-height: 360px;
  overflow: hidden;
  /* Perspective on the column establishes the 3D camera for the
     tilted map stage inside. */
  perspective: 1200px;
  perspective-origin: 50% 35%;
}
@media (min-width: 720px) {
  .propthreads-map {
    border-right: 1px solid var(--line-soft);
  }
}
/* Tilted plane: the SVG + pin live on this surface so they share a
   single 3D camera tilt. Slight rotateX gives the map a Google-
   Maps-style angled view; the pivot is below the visual centre so
   the lower edge stays close to the viewer. preserve-3d is
   required so the pin's counter-rotation works in the same 3D
   space rather than being flattened to 2D. */
.propthreads-map-stage {
  position: absolute;
  inset: 0;
  transform: rotateX(18deg);
  transform-origin: 50% 60%;
  transform-style: preserve-3d;
  will-change: transform;
}
.propthreads-map-svg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
/* Pin sits on the lower-left lobe of the highlighted parcel
   (~46% left / ~60% top). The rotateX(-18deg) cancels the stage
   tilt for the pin BODY so it appears to stand vertically while
   its BASE stays anchored to the tilted parcel surface. */
.propthreads-pin {
  position: absolute;
  left: 42%;
  top: 60%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -100%) rotateX(-18deg);
  transform-origin: 50% 100%;
  z-index: 2;
  pointer-events: none;
}
.propthreads-pin-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(16,152,202,0.25);
  animation: propthreadsPinPulse 2.4s ease-out infinite;
}
.propthreads-pin-icon {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(13,20,24,0.40));
}
@keyframes propthreadsPinPulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  70%  { transform: scale(1.6);  opacity: 0;    }
  100% { transform: scale(1.6);  opacity: 0;    }
}

/* Floating property card overlay. Positioned top-right because the
   highlighted parcel + pin sit on the left side of the map (~46%);
   anchoring the card on the right keeps the pin and parcel
   outline visible alongside the card details. */
.propthreads-card {
  position: absolute;
  top: 14px;
  right: 14px;
  left: auto;
  width: calc(100% - 28px);
  max-width: 240px;
  z-index: 3;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px 10px;
  box-shadow:
    0 14px 28px -14px rgba(13,20,24,0.30),
    0 0 0 1px rgba(13,20,24,0.06);
}
.propthreads-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.propthreads-card-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.propthreads-card-head .badge-active {
  font-size: 9px;
  padding: 3px 7px;
  flex-shrink: 0;
}
.propthreads-card-list {
  margin: 0 0 8px;
  padding: 8px 0 4px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}
.propthreads-card-list > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.propthreads-card-list dt {
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1px;
}
.propthreads-card-list dd {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.propthreads-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: 0.01em;
  width: 100%;
}
.propthreads-card-link:hover { text-decoration: underline; }

/* Summary strip pinned to the bottom of the map. */
.propthreads-summary {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  list-style: none;
  margin: 0;
  padding: 8px 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  box-shadow:
    0 10px 20px -12px rgba(13,20,24,0.25),
    0 0 0 1px rgba(13,20,24,0.05);
  backdrop-filter: blur(4px);
}
.propthreads-summary li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2px 4px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.propthreads-summary li:last-child { border-right: 0; }
.propthreads-summary-val {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.propthreads-summary-lbl {
  font-family: 'Manrope', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* --- Threads column (right) --- */
.propthreads-threads {
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
}

/* --- Share footer (spans both columns) --- */
.propthreads-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #fafdfe 0%, #f4f7f9 100%);
}
.propthreads-share-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.propthreads-share-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.propthreads-share-sub {
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: 1.3;
}
.propthreads-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--accent-deep);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: default;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -8px rgba(16,152,202,0.55);
}

/* Narrow layouts: stack the share footer and let the property card
   shrink a touch so it doesn't crowd the pin. */
@media (max-width: 540px) {
  .propthreads-map { min-height: 320px; }
  .propthreads-card { max-width: none; }
  .propthreads-card-list { grid-template-columns: 1fr; }
  .propthreads-summary { grid-template-columns: repeat(3, 1fr); row-gap: 6px; }
  .propthreads-summary li:nth-child(3) { border-right: 0; }
  .propthreads-share {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .propthreads-share-btn { justify-content: center; }
}

/* "Threads on this property" header inside .propthreads-threads */
.threadlist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 4px;
}
.threadlist-title {
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.threadlist-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--accent-deep);
  color: #ffffff;
  border: 0;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: default;
}

.threadlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.threadlist-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  transition: background 200ms var(--ease);
}
.threadlist-row + .threadlist-row { margin-top: 2px; }
.threadlist-row:hover { background: var(--surface-low); }
@media (prefers-reduced-motion: reduce) {
  .threadlist-row { transition: none; }
}

/* Left anchor of each row -- the privacy indicator. Replaces the
   stacked-avatar block that used to live here. Sized to match the
   row visual weight so the grid stays aligned. Lock = private,
   people = shared/team. Avatars themselves are now inline on the
   names line. */
.threadlist-row-icon {
  flex-shrink: 0;
  align-self: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: var(--ink-mute);
  background: var(--surface-low);
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.threadlist-row-icon--private {
  color: #7a5b14;
  background: rgba(240,168,48,0.12);
  box-shadow: inset 0 0 0 1px rgba(240,168,48,0.30);
}
.threadlist-row-icon svg {
  display: block;
}

/* Stacked overlapping avatars -- now inline on the names line just
   before the participant names. Smaller than the row-anchor size
   so they balance visually with the 11px names text. Person-
   specific colors so a returning participant is recognisable
   across rows. */
.threadlist-avatars {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.threadlist-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  display: inline-grid;
  place-items: center;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: -6px;
  box-shadow: 0 0 0 1px rgba(13,20,24,0.06);
}
.threadlist-avatar:first-child { margin-left: 0; }
.threadlist-avatar--mj { background: var(--brand);   }    /* Mark Johnson    -- brand blue */
.threadlist-avatar--rk { background: #c0894d;        }    /* Rachel Kim      -- warm copper */
.threadlist-avatar--tp { background: #3a9b7a;        }    /* Tom Patel       -- teal/green */
.threadlist-avatar--sp { background: #b16d8b;        }    /* Sarah Petersen  -- soft mauve */
.threadlist-avatar--ml { background: #6e7a82;        }    /* Maya Lopez      -- slate */
.threadlist-avatar--jd { background: #5d6fb8;        }    /* Jane Davis      -- indigo */

.threadlist-row-body {
  min-width: 0; /* lets the children truncate cleanly */
}
.threadlist-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.threadlist-row-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.threadlist-row-time {
  font-size: 10.5px;
  color: var(--ink-faint);
  flex-shrink: 0;
}
.threadlist-row-preview {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Meta line (between title and preview): avatars then names text. */
.threadlist-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  min-width: 0;
}
.threadlist-row-names {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-soft);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Status pill on the right edge. Color-coded to the dot. */
.threadlist-status {
  flex-shrink: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  align-self: center;
}
.threadlist-status--active   { background: rgba(16,152,202,0.12);  color: #0c7a9e; }
.threadlist-status--review   { background: rgba(240,168,48,0.14);  color: #946007; }
.threadlist-status--awaiting { background: rgba(192,137,77,0.14);  color: #8a5d2a; }
.threadlist-status--closed   { background: rgba(180,188,196,0.20); color: #5d6975; }

/* Footer "View all threads (12) →" link */
.threadlist-foot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px 12px 2px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.threadlist-foot:hover { text-decoration: underline; }

@media (max-width: 540px) {
  .threadlist-row { grid-template-columns: auto 1fr; gap: 8px; padding: 8px 10px; }
  .threadlist-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
  .threadlist-row-top { flex-wrap: wrap; }
}

/* Quote card inside split */
.card-quote {
  position: relative;
  background: linear-gradient(180deg, var(--surface-elev), #fafdfb);
  border-left: 3px solid var(--accent);
  padding: 22px 22px 22px 24px;
}
.quote-mark { color: var(--accent); opacity: 0.5; margin-bottom: 10px; }
.card-quote blockquote {
  margin: 0 0 14px;
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.quote-attrib {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-mute);
}
.quote-attrib strong { color: var(--ink); display: block; font-size: 13px; }
.quote-org { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }
.quote-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8d4d0, #97a9a3);
}

/* ---------- DARK SECTION ---------- */
.dark-section {
  position: relative;
  padding: var(--space-section) 0;
  background:
    linear-gradient(180deg, #08161e 0%, #0b1a22 30%, #0b1a22 100%);
  color: var(--dark-ink);
  overflow: hidden;
}
.dark-section::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121,212,188,0.25), transparent);
  pointer-events: none;
}
.dark-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 65% at 88% 22%, rgba(26, 136, 112, 0.32), transparent 60%),
    radial-gradient(45% 55% at 8% 82%, rgba(45, 110, 90, 0.30), transparent 65%),
    radial-gradient(30% 40% at 60% 60%, rgba(121, 212, 188, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 32%);
}
.dark-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (min-width: 940px) {
  .dark-grid { grid-template-columns: 1.1fr 1fr; }
}

.pillar-list { display: block; }
.pillar {
  display: flex;
  gap: 18px;
  margin-top: 36px;
}
.pillar-list .pillar:first-child { margin-top: 36px; }
.pillar-rule {
  width: 2px;
  background: linear-gradient(180deg, #79d4bc, rgba(121, 212, 188, 0.2));
  border-radius: 2px;
  flex-shrink: 0;
}
.pillar-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--dark-ink);
}
.pillar-body { color: var(--dark-ink-mute); font-size: 15px; line-height: 1.6; max-width: 480px; }

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
}
.audience-card {
  --mx: 50%;
  --my: 50%;
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: 22px;
  backdrop-filter: blur(6px);
  overflow: hidden;
  isolation: isolate;
  transition: transform 360ms var(--ease),
              background 360ms var(--ease),
              border-color 360ms var(--ease),
              box-shadow 360ms var(--ease);
}
.audience-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx) var(--my),
                              rgba(121, 212, 188, 0.18),
                              transparent 65%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.audience-card > * { position: relative; z-index: 1; }
.audience-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.065);
  border-color: rgba(121, 212, 188, 0.42);
  box-shadow:
    0 20px 40px -22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.audience-card:hover::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .audience-card, .audience-card::before { transition: none; }
}
.audience-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #79d4bc;
  margin-bottom: 10px;
}
.audience-card p { color: var(--dark-ink-mute); font-size: 14px; line-height: 1.55; }

/* Sub-paragraph that sits between the dark-section H2 and the
   pillar list. Used by the "Connect dots faster." section to carry
   the framing sentence ("Every conversation, file, and decision
   stays tied to the parcel..."). */
.dark-sub {
  color: var(--dark-ink-mute);
  font-size: 15px;
  line-height: 1.6;
  max-width: 480px;
  margin-top: 18px;
}

/* 2x2 grid of feature tiles (right column of the dark section).
   Smaller / quieter than .audience-card -- icon + single-line
   headline only, no body copy. Reads as a quick-scan summary of
   the four product capabilities. */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
.feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius);
  padding: 22px;
  isolation: isolate;
  transition: transform 360ms var(--ease),
              background 360ms var(--ease),
              border-color 360ms var(--ease);
}
.feature-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.065);
  border-color: rgba(121, 212, 188, 0.42);
}
.feature-card-icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(121, 212, 188, 0.10);
  color: #79d4bc;
  margin-bottom: 16px;
}
.feature-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-ink);
  margin: 0;
  letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) {
  .feature-card { transition: none; }
}

/* Bottom tagline that closes the dark section. Two-clause line --
   first half is the matter-of-fact "everything in one place"
   statement, second half is the outcome in the accent green so the
   eye lands on it. */
.dark-tagline {
  position: relative;
  z-index: 1;
  margin: clamp(40px, 6vw, 64px) auto 0;
  text-align: center;
  font-size: clamp(14px, 1.3vw, 16px);
  color: var(--dark-ink-mute);
  letter-spacing: 0.01em;
}
.dark-tagline-accent {
  color: #79d4bc;
  font-weight: 600;
  margin-left: 6px;
}

/* ---------- PULL QUOTE ---------- */
.pull-quote {
  padding: var(--space-section) 0;
  background: var(--surface);
  text-align: center;
}
.pull-quote-inner { max-width: 820px; margin: 0 auto; }
.pull-quote-mark {
  color: var(--accent);
  opacity: 0.55;
  margin: 0 auto 32px;
}
.pull-quote-text {
  margin: 0 0 44px;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pull-quote-attrib {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.pull-quote-attrib strong { display: block; font-size: 14px; color: var(--ink); font-weight: 700; }
.pull-quote-org { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin-top: 2px; }
.pull-quote-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: grid; place-items: center;
  letter-spacing: 0.04em;
}

/* ---------- FINAL CTA ---------- */
.final-cta {
  padding: 0 0 var(--space-section);
  background: var(--surface);
}
.cta-card {
  position: relative;
  margin: 0 auto;
  max-width: 1100px;
  background:
    linear-gradient(140deg, #11252f 0%, #0a1820 55%, #0b1a22 100%);
  color: var(--dark-ink);
  border-radius: var(--radius-xl);
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 60px 100px -40px rgba(8, 22, 18, 0.55),
    0 24px 48px -22px rgba(8, 22, 18, 0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.cta-card::after {
  content: "";
  position: absolute;
  top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(121,212,188,0.30), transparent);
  pointer-events: none;
}
.cta-card-glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 45% at 82% 18%, rgba(26, 136, 112, 0.40), transparent 70%),
    radial-gradient(42% 55% at 8% 92%, rgba(35, 90, 75, 0.32), transparent 70%),
    radial-gradient(30% 40% at 50% 50%, rgba(121, 212, 188, 0.07), transparent 70%);
  pointer-events: none;
}
.cta-card-inner { position: relative; text-align: center; }
.cta-headline { max-width: 720px; margin-left: auto; margin-right: auto; }
.cta-sub {
  color: var(--dark-ink-mute);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 36px;
}
.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.badge-link {
  display: inline-flex;
  transition: transform 220ms var(--ease), filter 220ms var(--ease);
  border-radius: 10px;
}
.badge-link img { height: 54px; width: auto; display: block; }
.badge-link:hover { transform: translateY(-2px); filter: brightness(1.08); }

.cta-foot {
  margin-top: 24px;
  color: var(--dark-ink-mute);
  font-size: 14px;
}
.cta-foot a {
  color: #79d4bc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: #f1f3f6;
  border-top: 1px solid var(--line);
  padding-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 40px;
}
@media (min-width: 820px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
.footer-brand { grid-column: 1 / -1; max-width: 360px; }
@media (min-width: 820px) { .footer-brand { grid-column: auto; } }
.footer-blurb {
  margin-top: 14px;
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.footer-col h6 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--ink-mute);
  transition: color 160ms var(--ease);
}
.footer-col a:hover { color: var(--ink); }

.footer-badges { display: grid; gap: 8px; }
.badge-link-sm img { height: 38px; }

/* Social row under the brand blurb. Inline SVGs use currentColor so
   color/hover states match the rest of the footer link styling. */
.footer-social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--ink-mute);
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.footer-social a:hover {
  color: var(--ink);
  background: rgba(13, 20, 24, 0.06);
}
.footer-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Brand maxim — Pasteur-adjacent flourish above the copyright bar.
   Intentionally quiet (small, low-contrast, italic) so it reads as
   an under-the-breath tagline rather than competing copy. */
.footer-maxim {
  margin-top: 48px;
  padding: 0 0 8px;
  display: flex;
  justify-content: center;
}
.footer-maxim-text {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-faint);
}

.footer-bar {
  margin-top: 16px;
  padding: 24px 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-mute);
}
.footer-bar-links { display: inline-flex; gap: 18px; }
.footer-bar-links a:hover { color: var(--ink); }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — applied to items inside a parent that has data-stagger.
   Parent JS sets is-in on each child with a small incremental delay. */
.stagger-child {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
  will-change: opacity, transform;
}
.stagger-child.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger-child { opacity: 1; transform: none; transition: none; }
}

/* ---------- focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- small responsive tweaks ---------- */
@media (max-width: 640px) {
  /* the inside-frame mockup carries the message on small screens;
     hide the outside floating pins to reduce clutter */
  .hero-media-pin { display: none; }
  .nav-actions .btn-ghost { display: none; }
  .footer-bar { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* =========================================================
   Login modal — opened by Download buttons on desktop. Mirrors
   the landing3 auth flow (email-code + Google + Apple OAuth)
   without leaving landing5.
   ========================================================= */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-modal[hidden] { display: none; }
.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 26, 34, 0.55);
  backdrop-filter: blur(6px);
}
.login-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface-elev);
  border-radius: var(--radius-lg);
  box-shadow:
    0 32px 64px -28px rgba(13, 20, 24, 0.45),
    0 12px 28px -14px rgba(13, 20, 24, 0.28);
  padding: 28px 28px 24px;
  color: var(--ink);
  animation: login-modal-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes login-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.login-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.login-modal-close:hover { background: var(--surface-low); color: var(--ink); }
.login-modal-title {
  margin: 0 0 6px;
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.login-modal-sub {
  margin: 0 0 18px;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.5;
}
.login-modal-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.login-modal-form input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  outline: none;
  transition: border-color 160ms var(--ease);
}
.login-modal-form input:focus {
  border-color: var(--accent);
}
.login-modal-primary {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 160ms var(--ease);
}
.login-modal-primary:hover { opacity: 0.9; }
.login-modal-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.login-modal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--ink-faint);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-modal-divider::before,
.login-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.login-modal-oauth {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login-modal-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.login-modal-oauth-btn:hover {
  border-color: var(--ink-faint);
  background: var(--surface-low);
}
.login-modal-back {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-mute);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.login-modal-back:hover { color: var(--ink); }
.login-modal-codehint {
  margin: 0 0 14px;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.5;
}
.login-modal-msg {
  margin: 12px 0 0;
  min-height: 18px;
  font-size: 13px;
  color: var(--ink-mute);
}
.login-modal-msg.error { color: #b91c1c; }
.login-modal-msg.success { color: var(--accent-deep); }