/* Palma Guide 2026 refinement layer: calm service UI with a strict type scale. */
:root {
  /* Primitives */
  --v3-white: #fff;
  --v3-ink: #14251f;
  --v3-ink-soft: #63736d;
  --v3-ink-faint: #81908b;
  --v3-green-950: #123f35;
  --v3-green-900: #0d4f40;
  --v3-green-700: #11705a;
  --v3-green-100: #dcefe9;
  --v3-green-50: #eff7f4;
  --v3-lime: #dff05a;
  --v3-lime-soft: #e8f681;
  --v3-surface: #f4f7f5;
  --v3-line: #e2e9e6;
  --v3-blue: #356f91;
  --v3-blue-soft: #e8f1f5;
  --v3-clay: #9a6642;
  --v3-clay-soft: #f5ede6;
  --v3-plum: #745f82;
  --v3-plum-soft: #f0ebf3;
  --v3-red: #b5525c;
  --v3-red-soft: #f7e9eb;

  /* Existing semantic aliases */
  --ink: var(--v3-ink);
  --muted: var(--v3-ink-soft);
  --green: var(--v3-green-700);
  --green-deep: var(--v3-green-900);
  --green-dark: var(--v3-green-950);
  --lime: var(--v3-lime);
  --surface: var(--v3-surface);
  --line: var(--v3-line);
  --white: var(--v3-white);
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--v3-ink) 4%, transparent);
  --shadow-md: 0 14px 40px color-mix(in srgb, var(--v3-ink) 10%, transparent);

  /* Type scale */
  --v3-regular: 400;
  --v3-medium: 500;
  --v3-semibold: 600;
  --v3-bold: 700;
  --v3-section-title: 1.75rem;
  --v3-card-title: .9375rem;
}

html, body { background: var(--v3-line); }
body {
  color: var(--v3-ink);
  font-weight: var(--v3-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { text-wrap: pretty; }
svg { stroke-width: 1.7; }
.mobile-site { background: var(--v3-white); box-shadow: 0 36px 90px color-mix(in srgb, var(--v3-ink) 17%, transparent); }

/* Header */
.topbar {
  min-height: 4.5rem;
  background: color-mix(in srgb, var(--v3-white) 96%, transparent);
  border-bottom-color: var(--v3-line);
  backdrop-filter: blur(18px);
}
.brand-mark { width: 2.45rem; height: 2.45rem; color: var(--v3-green-700); border-color: var(--v3-green-100); background: var(--v3-green-50); }
.brand-mark svg { width: 1.8rem; height: 1.8rem; stroke-width: 2; }
.brand strong { color: var(--v3-green-950); font-size: 1.45rem; font-weight: var(--v3-bold); letter-spacing: -.045em; }
.brand small { margin-top: .32rem; color: var(--v3-ink-soft); font-size: .525rem; font-weight: var(--v3-medium); letter-spacing: .075em; }
.top-actions button { width: 2.6rem; height: 2.6rem; color: var(--v3-ink); }
.top-actions button:hover { background: var(--v3-surface); }
.top-actions svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; }

/* Hero */
.hero { height: 30rem; background: var(--v3-green-950); }
.hero > img { filter: saturate(.76) contrast(.98); }
.hero-shade { background: linear-gradient(180deg, color-mix(in srgb, var(--v3-green-950) 24%, transparent), color-mix(in srgb, var(--v3-green-950) 46%, transparent) 46%, color-mix(in srgb, var(--v3-green-950) 94%, transparent)); }
.hero-badge {
  color: color-mix(in srgb, var(--v3-white) 88%, transparent);
  background: color-mix(in srgb, var(--v3-green-950) 28%, transparent);
  border-color: color-mix(in srgb, var(--v3-white) 24%, transparent);
  font-size: .625rem;
  font-weight: var(--v3-medium);
  backdrop-filter: blur(10px);
}
.hero-badge span { background: var(--v3-lime); box-shadow: none; }
.hero-copy { inset: auto 1.45rem 1.55rem; }
.hero-copy > span { color: var(--v3-lime-soft); font-size: .6875rem; font-weight: var(--v3-semibold); letter-spacing: .12em; }
.hero h1 { margin: .6rem 0 .8rem; font-size: clamp(2.55rem, 9vw, 3.25rem); line-height: 1.01; font-weight: var(--v3-semibold); letter-spacing: -.048em; }
.hero h1 em { color: var(--v3-lime-soft); }
.hero p { margin-bottom: 1.25rem; color: color-mix(in srgb, var(--v3-white) 88%, transparent); font-size: .9375rem; line-height: 1.55; }
.button-yellow, .button-glass { min-height: 3.15rem; border-radius: .75rem; font-size: .8125rem; font-weight: var(--v3-semibold); }
.button-yellow { color: var(--v3-green-950); background: var(--v3-lime); box-shadow: none; }
.button-glass { background: color-mix(in srgb, var(--v3-white) 8%, transparent); border-color: color-mix(in srgb, var(--v3-white) 50%, transparent); }

/* Directory shortcuts */
.shortcuts { padding: 1.5rem 1rem 1.35rem; background: var(--v3-white); }
.shortcut-grid { gap: .6rem; }
.shortcut {
  min-height: 7.5rem;
  gap: .75rem;
  color: var(--v3-ink);
  background: var(--v3-surface);
  border-color: transparent;
  border-radius: 1rem;
  box-shadow: none;
}
.shortcut:hover { border-color: var(--v3-line); background: var(--v3-white); box-shadow: none; }
.shortcut .icon-box { width: 2.75rem; height: 2.75rem; border-radius: .875rem; }
.shortcut .icon-box svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.75; }
.shortcut > span:last-child { font-size: .75rem; line-height: 1.35; font-weight: var(--v3-medium); }
.tone-blue, .tone-sky, .tone-cyan { --tone: var(--v3-blue); --tone-bg: var(--v3-blue-soft); }
.tone-coral, .tone-rose { --tone: var(--v3-red); --tone-bg: var(--v3-red-soft); }
.tone-indigo, .tone-violet { --tone: var(--v3-plum); --tone-bg: var(--v3-plum-soft); }
.tone-orange, .tone-amber { --tone: var(--v3-clay); --tone-bg: var(--v3-clay-soft); }
.tone-green, .tone-mint { --tone: var(--v3-green-700); --tone-bg: var(--v3-green-50); }
.premium-shortcut { color: var(--v3-white); background: var(--v3-green-950); border-color: var(--v3-green-950); box-shadow: none; }
.premium-shortcut:hover { background: var(--v3-green-900); border-color: var(--v3-green-900); }
.premium-shortcut .icon-box { color: var(--v3-green-100); background: color-mix(in srgb, var(--v3-white) 8%, transparent); border-color: color-mix(in srgb, var(--v3-white) 14%, transparent); }
.premium-shortcut small { color: var(--v3-green-100); font-size: .5rem; font-weight: var(--v3-semibold); letter-spacing: .1em; }
.publish-cta { min-height: 4rem; color: var(--v3-white); background: var(--v3-green-700); border-radius: 1rem; box-shadow: none; }
.publish-cta strong { font-size: .9375rem; font-weight: var(--v3-semibold); }
.publish-icon { color: var(--v3-green-950); background: var(--v3-lime); }

/* Content hierarchy */
.block { margin-top: 2.75rem; }
.section-heading { margin-bottom: 1rem; }
.section-heading > div > small { color: var(--v3-green-700); font-size: .625rem; font-weight: var(--v3-semibold); letter-spacing: .1em; }
.section-heading h2 { font-size: var(--v3-section-title); line-height: 1.15; font-weight: var(--v3-semibold); letter-spacing: -.035em; }
.section-heading button { color: var(--v3-green-700); font-size: .75rem; font-weight: var(--v3-medium); }
.chips { margin-bottom: .9rem; }
.chips button { color: var(--v3-ink-soft); background: var(--v3-surface); font-size: .75rem; font-weight: var(--v3-medium); }
.chips .active { color: var(--v3-white); background: var(--v3-green-700); }

/* Market pulse */
.pulse { background: var(--v3-green-950); border-radius: 1.25rem; box-shadow: none; }
.pulse-icon { color: var(--v3-green-950); background: var(--v3-lime); }
.pulse-title h2 { font-size: 1.125rem; font-weight: var(--v3-semibold); letter-spacing: -.02em; }
.pulse-title p { color: var(--v3-green-100); }
.metrics { gap: .45rem; }
.metrics article { color: var(--v3-white); background: color-mix(in srgb, var(--v3-white) 8%, transparent); border: 1px solid color-mix(in srgb, var(--v3-white) 14%, transparent); box-shadow: none; }
.metrics b { font-size: 1.125rem; font-weight: var(--v3-semibold); }
.metrics span { color: var(--v3-green-100); }
.metrics small { font-weight: var(--v3-medium); }
.up { color: var(--v3-lime-soft); }
.down { color: var(--v3-red-soft); }
.pulse-more { background: color-mix(in srgb, var(--v3-white) 8%, transparent); border-color: color-mix(in srgb, var(--v3-white) 14%, transparent); font-weight: var(--v3-medium); }

/* Editorial and listing cards */
.publication, .property, .questions { border-color: var(--v3-line); box-shadow: none; }
.publication-copy h3 { font-size: var(--v3-card-title); line-height: 1.35; font-weight: var(--v3-semibold); letter-spacing: -.015em; }
.publication-copy p, .listing-cta p { color: var(--v3-ink-soft); line-height: 1.5; }
.publication-copy > small, .publication-copy > div, .property small, .questions p { color: var(--v3-ink-faint); }
.badge { padding: .35rem .6rem; font-size: .5625rem; font-weight: var(--v3-semibold); }
.badge.blue { background: var(--v3-blue); }
.badge.yellow { color: var(--v3-green-950); background: var(--v3-lime-soft); }
.company-grid article { min-height: 9.25rem; background: var(--v3-surface); border-color: transparent; box-shadow: none; }
.company-grid b { font-weight: var(--v3-semibold); }
.company-grid small { color: var(--v3-ink-soft); }
.logo { font-weight: var(--v3-bold); }
.red-logo { background: var(--v3-red); }
.palm-logo { color: var(--v3-green-700); background: var(--v3-green-100); }
.city-logo { color: var(--v3-blue); background: var(--v3-blue-soft); }
.build-logo { color: var(--v3-clay); background: var(--v3-clay-soft); }

/* Video */
.main-video { border-radius: 1.25rem; box-shadow: none; }
.video-shade { background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--v3-ink) 90%, transparent)); }
.play { width: 3.75rem; height: 3.75rem; background: color-mix(in srgb, var(--v3-green-950) 30%, transparent); border-width: 1.5px; backdrop-filter: blur(8px); }
.video-copy small { color: var(--v3-lime-soft); font-weight: var(--v3-semibold); }
.video-copy h3 { font-size: 1.5rem; line-height: 1.1; font-weight: var(--v3-semibold); letter-spacing: -.035em; }
.video-copy p { color: color-mix(in srgb, var(--v3-white) 88%, transparent); }
.mini-videos h3 { line-height: 1.4; font-weight: var(--v3-medium); }

/* Listings and questions */
.property section b { font-size: 1.125rem; line-height: 1.2; font-weight: var(--v3-semibold); letter-spacing: -.015em; }
.property h3 { line-height: 1.4; font-weight: var(--v3-medium); }
.property p { color: var(--v3-ink-soft); }
.wide-button { color: var(--v3-green-700); border-color: var(--v3-line); font-weight: var(--v3-semibold); }
.listing-cta { background: var(--v3-green-50); border-color: var(--v3-green-100); border-radius: 1.25rem; box-shadow: none; }
.listing-cta > img { filter: saturate(.8); }
.listing-cta > div > span { color: var(--v3-green-700); font-weight: var(--v3-semibold); }
.listing-cta h2 { font-size: 1.3rem; line-height: 1.2; font-weight: var(--v3-semibold); letter-spacing: -.025em; }
.question-icon { width: 2.45rem; height: 2.45rem; }
.q0 { color: var(--v3-green-700); background: var(--v3-green-50); }
.q1 { color: var(--v3-blue); background: var(--v3-blue-soft); }
.q2 { color: var(--v3-clay); background: var(--v3-clay-soft); }
.q3 { color: var(--v3-plum); background: var(--v3-plum-soft); }
.questions h3 { line-height: 1.4; font-weight: var(--v3-medium); }

/* Offers and premium */
.promo { border: 1px solid var(--v3-line); box-shadow: none; }
.promo > span { background: color-mix(in srgb, var(--v3-white) 88%, transparent); }
.promo small { font-weight: var(--v3-medium); }
.promo h3 { line-height: 1.25; font-weight: var(--v3-semibold); }
.promo p { line-height: 1.5; }
.promo button { font-weight: var(--v3-semibold); }
.promo-yellow { color: var(--v3-ink); background: var(--v3-green-50); }
.promo-blue { color: var(--v3-ink); background: var(--v3-blue-soft); }
.premium { background: var(--v3-green-950); border-radius: 1.25rem; box-shadow: none; }
.premium > img { filter: saturate(.8); }
.premium-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--v3-green-950) 96%, transparent), color-mix(in srgb, var(--v3-green-950) 82%, transparent) 48%, color-mix(in srgb, var(--v3-green-950) 24%, transparent)); }
.premium-copy > span { color: var(--v3-green-100); font-weight: var(--v3-semibold); }
.premium h2 { font-size: 1.9rem; line-height: 1.08; font-weight: var(--v3-semibold); letter-spacing: -.04em; }
.premium p { color: color-mix(in srgb, var(--v3-white) 88%, transparent); line-height: 1.6; }
.premium button { color: var(--v3-green-950); background: var(--v3-green-100); font-weight: var(--v3-semibold); }
.subscribe { background: var(--v3-green-700); box-shadow: none; }
.subscribe > svg { color: var(--v3-lime-soft); }
.subscribe h2 { line-height: 1.2; font-weight: var(--v3-semibold); letter-spacing: -.02em; }
.subscribe p, .subscribe > small { color: var(--v3-green-100); }
.subscribe form button { color: var(--v3-green-950); background: var(--v3-lime); font-weight: var(--v3-semibold); }

/* Footer and navigation */
footer { background: var(--v3-ink); }
.footer-brand b { color: var(--v3-green-100); font-size: 1.35rem; font-weight: var(--v3-bold); }
.footer-brand p, .footer-links span, .copyright, .photo-credit { color: color-mix(in srgb, var(--v3-white) 54%, transparent); }
.footer-links b { font-weight: var(--v3-semibold); }
.photo-credit a { color: var(--v3-green-100); }
.bottom-nav { min-height: 4.65rem; background: color-mix(in srgb, var(--v3-white) 96%, transparent); border-top-color: var(--v3-line); box-shadow: 0 -8px 28px color-mix(in srgb, var(--v3-ink) 7%, transparent); }
.bottom-nav button { min-height: 3.5rem; color: var(--v3-ink-faint); font-weight: var(--v3-regular); }
.bottom-nav .selected { color: var(--v3-green-700); font-weight: var(--v3-medium); }
.bottom-nav .create { color: var(--v3-ink); }
.bottom-nav .create > span { width: 3.1rem; height: 3.1rem; margin-top: -1.7rem; color: var(--v3-white); background: var(--v3-green-700); box-shadow: 0 10px 28px color-mix(in srgb, var(--v3-ink) 14%, transparent); }
.bottom-nav .create b { font-weight: var(--v3-medium); }

@media (max-width: 400px) {
  .topbar { min-height: 4.25rem; padding-inline: .9rem; }
  .brand strong { font-size: 1.35rem; }
  .brand small { font-size: .48rem; }
  .brand-mark { width: 2.3rem; height: 2.3rem; }
  .hero h1 { font-size: 2.45rem; }
  .shortcuts { padding-inline: .75rem; }
  .shortcut-grid { gap: .45rem; }
  .shortcut { min-height: 7.15rem; }
  .shortcut .icon-box { width: 2.55rem; height: 2.55rem; }
  .shortcut > span:last-child { font-size: .6875rem; }
  .block { margin-inline: .75rem; }
  .section-heading h2 { font-size: 1.5rem; }
  .metrics b { font-size: 1rem; }
  .premium h2 { font-size: 1.7rem; }
}