/* ==========================================================================
   Sunset Retreat Cabin — Modern Luxury Design System
   ========================================================================== */

:root {
  /* Color Tokens */
  --bg-twilight: #14101A;
  --bg-card-dark: #1F1926;
  --bg-warm: #F6F1EA;
  --bg-paper: #FFFFFF;
  --bg-cream: #FAF6EE;
  
  --primary-accent: #D97745; /* Sunset Terracotta */
  --primary-hover: #C56535;
  --primary-accent-a11y: #B85529; /* Darker terracotta — meets WCAG AA 4.5:1 for text/buttons on light backgrounds */
  --primary-hover-a11y: #A34A22;
  --accent-gold: #E59F4A;
  --accent-olive: #4F5D4B;
  
  --text-main: #27212B;
  --text-muted: #685E6E;
  --text-light: #F7F4F0;
  
  --border-light: rgba(39, 33, 43, 0.08);
  --border-dark: rgba(255, 255, 255, 0.12);
  
  --shadow-sm: 0 4px 12px rgba(20, 16, 26, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 16, 26, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 16, 26, 0.12);
  --shadow-glow: 0 0 30px rgba(217, 119, 69, 0.25);
  
  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Transitions & Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 999px;
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg-cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Typography Defaults */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-main);
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container Scale */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.max-w-760 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.text-center { text-align: center; }
.text-success { color: #2B8A3E; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

/* Section Spacing */
.section-padding {
  padding: 100px 0;
}

.bg-warm { background-color: var(--bg-warm); }
.bg-paper { background-color: var(--bg-paper); }

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-accent-a11y);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.section-subtitle, .section-lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.7;
}

/* Announcement Bar */
.announcement-bar {
  background: var(--bg-twilight);
  color: var(--text-light);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-dark);
  height: 42px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* The track holds two identical groups and travels exactly -50%, so the
   moment it finishes, group 2 sits precisely where group 1 began and the
   restart is invisible. width:max-content stops flex squeezing the items
   to fit, which would break that alignment. */
.ticker-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: ticker 45s linear infinite;
}

/* Moving text you cannot stop is unreadable, and fails WCAG 2.2.2. */
.announcement-bar:hover .ticker-track,
.announcement-bar:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker-group {
  display: flex;
  gap: 3rem;
  padding-right: 3rem;
}

.ticker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 600;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* No motion: stack the messages and drop the duplicate, so everything is
   still readable rather than clipped by the fixed height. */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar {
    height: auto;
    padding: 10px 0;
  }

  .ticker-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .ticker-group {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 2rem;
    padding-right: 0;
  }

  .ticker-group:nth-child(2) { display: none; }
}

.star-badge {
  color: var(--accent-gold);
}

/* The "/10" alongside the score — present so the number can't be misread as
   a 5-point scale, but quiet enough not to compete with it. */
.rating-scale {
  /* Relative to the score, but never below 11px — this is what tells a reader
     4.82 and 9.5 are different scales. */
  font-size: max(0.75em, 11px);
  opacity: 0.75;
  font-weight: 500;
}

.separator { opacity: 0.4; }
.highlight-text { color: var(--accent-gold); }

/* Header & Sticky Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition-normal);
  padding: 16px 0;
}

.site-header.scrolled {
  box-shadow: var(--shadow-sm);
  padding: 12px 0;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  flex-direction: column;
}

.logo-title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.1;
}

.logo-subtitle {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-accent-a11y);
  font-weight: 700;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  position: relative;
  padding: 6px 0;
  transition: var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--primary-accent);
  transition: var(--transition-fast);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary-accent-a11y);
  color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background-color: var(--primary-hover-a11y);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: var(--border-light);
  color: var(--text-main);
}

.btn-outline:hover {
  background: var(--bg-warm);
  border-color: var(--text-main);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: #FFFFFF;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 1rem;
}

.btn-sm {
  padding: 8px 16px;
  font-size: 0.82rem;
}

.btn-full {
  width: 100%;
}

/* Mobile Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-main);
  cursor: pointer;
  padding: 6px;
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 85%;
  max-width: 380px;
  height: 100vh;
  background: var(--bg-twilight);
  color: var(--text-light);
  z-index: 200;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateX(100%);
  transition: var(--transition-normal);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.mobile-drawer.active {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 16px;
}

.close-drawer {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
}

.mobile-link {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-light);
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  padding: 120px 0 80px 0;
  overflow: hidden;
}

.hero-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 8s ease-out;
  transform: scale(1.05);
}

.hero-bg.active {
  opacity: 1;
  transform: scale(1);
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(20, 16, 26, 0.45) 0%, rgba(20, 16, 26, 0.85) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 860px;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  /* Wraps between items on a narrow screen. Without this the pill cannot
     wrap, so each item is squeezed instead and the text breaks inside it —
     which detached the star from its score on a phone. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 24px;
}

.rating { color: var(--accent-gold); }

/* A score and the platform it belongs to are one thing; never split them
   across two lines. */
.pill-item {
  white-space: nowrap;
}

/* Once the pill wraps, a divider can end up stranded at the end of a line
   with nothing after it. CSS cannot know where the break lands, so below the
   width where wrapping starts the dividers go and the gap separates instead. */
@media (max-width: 700px) {
  .hero-badge-pill .pill-divider { display: none; }
  .hero-badge-pill { gap: 4px 16px; }
}
.pill-divider { opacity: 0.4; }

.hero-title {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  color: #FFFFFF;
  line-height: 1.1;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 36px;
  max-width: 680px;
  font-weight: 300;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 60px;
}

/* Sits directly under the hero buttons. Someone deciding whether to click
   needs the reason to click, not three sections further down. */
.hero-cta-note {
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-gold);
  letter-spacing: 0.01em;
  /* The hero cycles three photographs. Small gold type survives the dark
     ones on the overlay alone, but not a bright one — the shadow makes it
     legible whichever is showing. */
  text-shadow: 0 1px 3px rgba(20, 16, 26, 0.85);
}

.hero-pills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 32px;
}

.hero-pill {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(20, 16, 26, 0.5);
  backdrop-filter: blur(8px);
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-pill i {
  color: var(--primary-accent-a11y);
  margin-top: 2px;
  flex-shrink: 0;
}

.hero-pill div {
  display: flex;
  flex-direction: column;
}

.hero-pill strong {
  font-size: 0.9rem;
  font-weight: 600;

}

.hero-pill span {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 24px;
  right: 40px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cue-line {
  width: 40px;
  height: 1px;
  background: #FFFFFF;
}

/* Quote Card */
.quote-card {
  background: var(--bg-paper);
  padding: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  margin-top: 40px;
}

.quote-card p {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--text-main);
  margin-bottom: 12px;
}

.quote-author {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-accent-a11y);
}

/* Feature Cards Grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 32px;
  margin-top: 50px;
}

.feature-card {
  background: var(--bg-paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.feature-image-wrapper {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.feature-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.feature-card:hover .feature-image-wrapper img {
  transform: scale(1.06);
}

.feature-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(20, 16, 26, 0.75);
  backdrop-filter: blur(6px);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.feature-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.feature-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-warm);
  color: var(--primary-accent-a11y);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.feature-content p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.highlight-card {
  background: var(--bg-twilight);
  color: var(--text-light);
  justify-content: center;
}

.highlight-card h3 { color: var(--text-light); }
.highlight-card p { color: rgba(255, 255, 255, 0.75); }
.highlight-card .feature-icon {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-gold);
}
.highlight-card .btn-outline {
  color: var(--text-light);
  border-color: rgba(255, 255, 255, 0.3);
}
.highlight-card .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--text-light);
}

/* Space Section & Bedroom Config Selector */
.guest-config-selector {
  display: flex;
  justify-content: center;
  margin: 40px 0 50px 0;
}

.config-tabs {
  display: flex;
  background: var(--bg-paper);
  padding: 6px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.config-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 28px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: var(--transition-fast);
}

.config-tab span {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.config-tab small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.config-tab.active {
  background: var(--primary-accent-a11y);
}

.config-tab.active span, .config-tab.active small, .config-tab.active i {
  color: #FFFFFF;
}

.space-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.space-card {
  background: var(--bg-paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.space-card-img {
  position: relative;
  height: 260px;
}

.space-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-type-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: var(--primary-accent-a11y);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-full);
}

.alt-badge {
  background: var(--bg-twilight);
}

.space-card-body {
  padding: 32px;
}

.space-card-body h3 {
  font-size: 1.75rem;
  margin-bottom: 6px;
}

.room-spec {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-accent-a11y);
  margin-bottom: 14px;
}

.room-amenities {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.room-amenities li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.room-amenities i {
  color: var(--primary-accent-a11y);
  width: 18px;
}

.full-width-card {
  grid-column: 1 / -1;
}

.space-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.space-card-grid .space-card-img {
  height: 100%;
}

.kitchen-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

.spec-item i {
  color: var(--primary-accent-a11y);
}

/* Gallery Section */
.gallery-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.gallery-tab {
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-fast);
}

.gallery-tab.active, .gallery-tab:hover {
  background: var(--text-main);
  color: #FFFFFF;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 40px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Guest Moments are portrait social graphics, 9:16 and 2:3, with text running
   close to the edges. Cover-cropping those into the 4:3 tile keeps the middle
   third and throws away the headline and the signature, so they are contained
   inside the tile instead and the surround is filled rather than left white. */
.gallery-item[data-category="guests"] img {
  object-fit: contain;
  background: var(--bg-twilight);
}

/* Video tiles look identical to photo tiles until you hover, which is too late
   to know one will start playing. A permanent corner badge marks them. */
.gallery-item[data-video]::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(20, 16, 26, 0.72) center/9px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M0 0l9 5.5L0 11z' fill='%23fff'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(20, 16, 26, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
  text-align: center;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Extras Section */
/* Two up. Four cards in a three-column auto-fit grid leaves one stranded on
   its own row, and these cards carry a price table that wants the width. */
.extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 40px;
}

@media (max-width: 820px) {
  .extras-grid { grid-template-columns: 1fr; }
}

.extra-card {
  background: var(--bg-paper);
  padding: 36px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Descriptions differ in length, so without this the buttons land at
   different heights across a row. Pushing the button down gives the row one
   clean bottom edge and leaves each price block next to the text it prices,
   rather than floating. */
.extra-card .btn {
  margin-top: auto;
}

.extra-icon {
  width: 50px;
  height: 50px;
  background: var(--bg-warm);
  color: var(--primary-accent-a11y);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* A price on the card is the difference between an information section and
   something a guest actually buys. */
.extra-menu {
  list-style: none;
  margin: 16px 0 20px;
  border-top: 1px solid var(--border-light);
  /* The card is align-items:flex-start, so without this the list shrinks to
     its content and the prices float mid-card instead of sitting on the right
     edge. A price list needs both columns pinned. */
  align-self: stretch;
}

.extra-menu li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.extra-menu b {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-accent-a11y);
}

.extra-price {
  margin: 14px 0 20px;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-muted);
}

.extra-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.extra-card p {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* Location Section */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.location-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 30px;
}

.location-highlights {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.loc-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.loc-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-warm);
  color: var(--primary-accent-a11y);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loc-item strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 2px;
}

.loc-item span {
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Local guide — named places, three columns
   -------------------------------------------------------------------------- */
.local-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 32px 40px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--border-light);
}

.local-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin-bottom: 18px;
  color: var(--text-main);
}

.local-col h3 svg {
  width: 20px;
  height: 20px;
  color: var(--primary-accent-a11y);
  flex-shrink: 0;
}

.local-col ul {
  list-style: none;
}

.local-col li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}

.local-col li:last-child { border-bottom: 0; }

.local-col strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 3px;
  color: var(--text-main);
}

.local-col span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.map-card-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  height: 420px;
}

.map-card-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.map-overlay-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(20, 16, 26, 0.85);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-overlay-badge i {
  color: var(--primary-accent-a11y);
}

/* Reviews Section */
/* --------------------------------------------------------------------------
   Booking.com score, category breakdown and quoted reviews
   -------------------------------------------------------------------------- */
.review-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 32px;
  max-width: 820px;
  margin: 0 auto 40px;
  padding: 24px 28px;
  background: var(--bg-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.review-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 28px;
  border-right: 1px solid var(--border-light);
}

.review-score-badge strong {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-accent-a11y);
}

.review-score-badge span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}

.review-score-bars {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 8px 28px;
  list-style: none;
}

.review-score-bars li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.review-score-bars b {
  font-weight: 700;
  color: var(--text-main);
}

.review-score-note {
  flex-basis: 100%;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Two up, not auto-fit. Four quotes across a 1240px container gives three
   then a lone orphan; a 2x2 block reads as a set, and quotes this long want
   the extra width anyway. */
.review-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 56px;
}

@media (max-width: 700px) {
  .review-quotes { grid-template-columns: 1fr; }
}

.review-quote {
  background: var(--bg-paper);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--primary-accent-a11y);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}

.review-quote p {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--text-main);
  margin-bottom: 16px;
}

.review-quote p::before { content: '\201C'; }
.review-quote p::after  { content: '\201D'; }

.review-quote cite {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
}

.review-quote cite span {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.review-guestbook-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 28px;
  color: var(--text-main);
}

@media (max-width: 600px) {
  .review-score-badge {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 16px;
    width: 100%;
  }

  .review-score-bars {
    grid-template-columns: repeat(2, auto);
  }
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
  margin-top: 40px;
}

.review-card {
  background: var(--bg-paper);
  padding: 12px 12px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.review-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  display: block;
}

.review-author {
  text-align: center;
}

.review-author strong {
  display: block;
  font-size: 0.95rem;
}

.review-author span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* House Rules Grid */
.rules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

.rules-card {
  background: var(--bg-paper);
  padding: 36px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.rules-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.rules-header i {
  color: var(--primary-accent-a11y);
}

.rules-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rules-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.rules-list i {
  margin-top: 3px;
  flex-shrink: 0;
}

/* Footer */
.site-footer {
  background: var(--bg-twilight);
  color: var(--text-light);
  padding: 80px 0 30px 0;
  border-top: 1px solid var(--border-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border-dark);
}

.footer-logo .logo-title { color: #FFFFFF; }
.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 16px 0;
  max-width: 320px;
}

.footer-badges {
  display: flex;
  gap: 10px;
}

.f-badge {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.footer-links-col h4 {
  color: #FFFFFF;
  font-size: 1.1rem;
  margin-bottom: 20px;
}

.footer-links-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-col a, .footer-links-col li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition-fast);
}

/* The text is only 18px tall, which is a poor thumb target. Pad the anchor
   rather than growing the type, so the hit area grows and the design does
   not. The gap shrinks to compensate, keeping the column the same height. */
.footer-links-col a {
  display: inline-block;
  padding: 6px 0;
}

.footer-links-col ul:has(a) {
  gap: 2px;
}

.footer-links-col a:hover {
  color: var(--primary-accent-a11y);
}

.contact-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 30px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Lifted slightly off the copyright line so it reads as a credit rather than
   more small print. The span becomes the anchor when the site is live. */
.footer-credit span {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

@media (max-width: 600px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 8, 14, 0.92);
}

.lightbox-container {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-content img,
.lightbox-content video {
  max-width: 85vw;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}

/* The portrait clips are 9:16. Left to itself a video element keeps its own
   intrinsic width, so cap it well short of the viewport or a phone-shot clip
   opens taller than the screen and the controls land off the bottom. */
.lightbox-content video {
  width: auto;
  height: 75vh;
  background: #000;
}

.lightbox-caption {
  color: var(--text-light);
  margin-top: 16px;
  font-size: 1rem;
  text-align: center;
}

.lightbox-close, .lightbox-nav {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #FFFFFF;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.lightbox-close:hover, .lightbox-nav:hover {
  background: var(--primary-accent);
}

.lightbox-close {
  position: absolute;
  top: -60px;
  right: 0;
}

.lightbox-prev {
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .desktop-nav { display: none; }
  .mobile-menu-toggle { display: block; }
  .space-card-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
}

/* Small phones. At 320px the brand, the CTA and the burger together are wider
   than the viewport, and the CTA — the one thing on the page that has a job —
   is what gets clipped. Shrink the brand instead. */
/* Stacked, full-width hero buttons on a phone.

   .btn is white-space:nowrap, so "Check Availability & Book Direct" could not
   shrink and ran 40px off the right of a 320px screen — the primary call to
   action on the site, clipped. Full width also gives a far bigger thumb
   target than a pill sized to its text. */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    white-space: normal;
    /* The flex box centres the text block, but the lines inside it are still
       left-aligned, so a wrapped second word hangs off to the left. */
    text-align: center;
    padding-left: 18px;
    padding-right: 18px;
  }
}

@media (max-width: 400px) {
  .hero-badge-pill {
    font-size: 0.78rem;
    gap: 3px 8px;
    padding: 8px 14px;
  }

  .logo-title { font-size: 1.3rem; }
  .logo-subtitle { display: none; }

  /* Hiding the subtitle leaves the logo link 23px tall. Padding restores a
     usable target without making the header taller — the CTA button is what
     sets the header height. */
  .brand-logo { padding: 7px 0; }

  .nav-cta {
    padding: 10px 14px;
    font-size: 0.78rem;
  }

  .header-actions { gap: 8px; }
  .container { padding: 0 16px; }
}

@media (max-width: 768px) {
  .hero-title { font-size: 2.6rem; }
  .section-title { font-size: 2.2rem; }
  .space-details-grid, .rules-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .config-tabs { width: 100%; }
  .config-tab { flex: 1; padding: 12px 10px; }
}

/* ==========================================================================
   Sticky Mobile Booking Bar
   --------------------------------------------------------------------------
   Phone only. Sits above the header (100) so it is never scrolled over, but
   below the mobile drawer (200) and the lightbox (300) so both still cover it.
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  /* env() resolves to 0 without viewport-fit=cover, which this site does not
     set; the max() keeps a sane pad now and picks up the inset for free if
     that meta is ever added. */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: var(--bg-twilight);
  border-top: 1px solid var(--border-dark);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}

.sticky-cta-price {
  line-height: 1.15;
  color: var(--text-light);
}

.sticky-cta-price strong {
  display: block;
  font-size: 1.05rem;
}

.sticky-cta-price span {
  font-size: 0.78rem;
  opacity: 0.75;
}

/* .btn sets white-space: nowrap, which is what keeps this on one line at
   320px — the label and the price are sized to fit that together. */
.sticky-cta .btn {
  padding: 12px 18px;
  font-size: 0.92rem;
}

@media (max-width: 768px) {
  .sticky-cta {
    display: flex;
  }

  .sticky-cta.visible {
    transform: translateY(0);
  }

  /* The bar is fixed, so without this it would sit on top of the last of the
     footer instead of below it. Added by script.js, so a no-JS visit does not
     get padding for a bar that never appears. */
  body.has-sticky-cta {
    padding-bottom: 78px;
  }
}

/* The drawer is 85% wide, so the bar would otherwise peek out beside it. */
.sticky-cta.drawer-open {
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta {
    transition: none;
  }
}

/* ==========================================================================
   Meet the Hosts
   --------------------------------------------------------------------------
   The dark band between the reviews and the house rules. Sections either side
   alternate warm/paper, so this one takes the twilight background rather than
   forcing two matching neighbours together.
   ========================================================================== */
.host-section {
  background: var(--bg-twilight);
  color: var(--text-light);
}

.host-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.host-portrait {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.host-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.host-copy .section-title {
  color: var(--text-light);
  margin-bottom: 24px;
}

/* The eyebrow is terracotta for contrast on light sections; on this one that
   sits too close to the background, so it takes the lighter gold. */
.host-copy .section-eyebrow {
  color: var(--accent-gold);
}

.host-copy p {
  color: var(--text-light);
  opacity: 0.86;
  margin-bottom: 18px;
  line-height: 1.75;
}

.host-closer {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  opacity: 1 !important;
  border-left: 3px solid var(--primary-accent);
  padding-left: 20px;
}

.host-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--border-dark);
}

.host-proof strong {
  font-family: var(--font-serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent-gold);
}

.host-proof span {
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.8;
}

@media (max-width: 820px) {
  .host-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 520px;
  }

  /* Portrait first on a phone: the face is what earns the read. Capped so a
     2:3 photo does not take a whole screen before the words start. */
  .host-portrait {
    max-height: 400px;
  }

  .host-portrait img {
    object-position: center 20%;
  }
}

/* ==========================================================================
   FAQ
   --------------------------------------------------------------------------
   Native <details>, so every answer is in the page for search engines and
   for anyone who hits ctrl-F, without a line of JavaScript holding it up.
   ========================================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 16px 28px;
  margin-top: 40px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  align-content: start;
}

.faq-item {
  background: var(--bg-paper);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0 22px;
  height: fit-content;
  transition: box-shadow var(--transition-fast);
}

.faq-item[open] {
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-main);
  cursor: pointer;
  padding: 20px 34px 20px 0;
  position: relative;
  list-style: none;
}

/* Safari still paints its own triangle without this. */
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--primary-accent-a11y);
  border-bottom: 2px solid var(--primary-accent-a11y);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--primary-accent-a11y);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.faq-item p {
  color: var(--text-muted);
  line-height: 1.7;
  padding-bottom: 22px;
  margin: 0;
}

/* The saving, spelled out. A percentage is a claim; two numbers side by side
   is an argument the reader finishes themselves. */
.rate-compare {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 14px;
  font-size: 0.95rem;
}

.rate-compare .was {
  text-decoration: line-through;
  opacity: 0.65;
}

.rate-compare .now {
  font-weight: 700;
  color: var(--primary-accent-a11y);
}

/* The two flagship features, directly under the emotional headline. */
.hero-features {
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--accent-gold);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}

/* Drive times. Nobody outside Antrim can place Portglenone, and this is the
   question that gets answered before someone decides, not after. */
.drive-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 22px 0 4px;
  padding: 0;
}

.drive-times li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.drive-times strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--primary-accent-a11y);
}

.drive-times span {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 400px) {
  .drive-times { gap: 8px; }
  .drive-times li { padding: 8px 12px; flex: 1 1 auto; }
  .drive-times span { white-space: normal; }
}

/* ==========================================================================
   How to Pay Less — the owner's own post, set as type
   --------------------------------------------------------------------------
   Dark band, same treatment as the host section. Sits between the house rules
   (paper) and the FAQ (warm), so the alternation either side still holds.
   ========================================================================== */
.value-section {
  background: var(--bg-twilight);
  color: var(--text-light);
}

.value-section .section-title { color: var(--text-light); }
.value-section .section-eyebrow { color: var(--accent-gold); }
.value-section .section-subtitle { color: var(--text-light); opacity: 0.72; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px 36px;
  margin-top: 44px;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.value-item {
  padding-left: 18px;
  border-left: 2px solid var(--primary-accent);
}

.value-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 7px;
  color: var(--accent-gold);
}

.value-item p {
  color: var(--text-light);
  opacity: 0.82;
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
}

.legal-page h1 { margin-bottom: 6px; }

.legal-updated {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.legal-lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--text-main);
  padding-bottom: 8px;
}

.legal-page h2 {
  font-size: 1.5rem;
  margin: 36px 0 10px;
}

.legal-page p,
.legal-page li {
  color: var(--text-muted);
  line-height: 1.75;
}

.legal-page p { margin-bottom: 14px; }

.legal-page ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-page li { margin-bottom: 6px; }

.legal-page a {
  color: var(--primary-accent-a11y);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-back {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

.legal-back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  text-decoration: none;
}

.legal-back svg { width: 17px; height: 17px; }

/* Screen-reader-only, for the rates table caption. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}