/* ===========================================================
   Furlow Stays — shared design system
   Citrus Pop brand: gold + coral + leaf green on warm cream
   =========================================================== */

:root {
  --ocean: #3f8f5f;
  --ocean-dark: #2d6b45;
  --ocean-light: #6fc493;
  --coral: #e8722c;
  --coral-dark: #c65c1c;
  --gold: #ffc24b;
  --sand: #fffbf2;
  --sand-dark: #f0e6cd;
  --ink: #33281f;
  --ink-soft: #6b5346;
  --white: #ffffff;
  --line: #f0e6cd;

  --font-display: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 12px 32px rgba(51, 40, 31, 0.14);
  --shadow-sm: 0 4px 14px rgba(51, 40, 31, 0.10);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}
p { margin: 0 0 1em; color: var(--ink-soft); }
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 10px;
  display: block;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--coral); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--coral-dark); }
.btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.7); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-ghost { background: var(--white); color: var(--ocean); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--ocean); }
.btn-block { width: 100%; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 245, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
  /* The wordmark must never wrap. Without this it broke onto two lines twice:
     below ~430px, and again from 861px once the Owner Login link joined the
     header and took the slack out of the row. A wrapped logo reads as a
     broken page, so it wins the space and the nav gap gives way (below). */
  white-space: nowrap;
  flex: none;
}
.logo svg { display: block; flex-shrink: 0; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-links a { color: var(--ink-soft); transition: color 0.15s; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: var(--ocean); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: inline-flex;
    background: none; border: none; cursor: pointer;
    font-size: 1.6rem; color: var(--ocean);
  }
}

/* Below ~520px the wordmark, the burger and the CTA no longer fit on one row
   at full size. The logo is not allowed to wrap (see .logo), so the type and
   the button padding give way instead. Measured: this keeps scrollWidth at
   exactly the viewport width all the way down to 320px. */
@media (max-width: 519px) {
  .logo { font-size: 1.18rem; gap: 8px; }
  .nav-cta { gap: 8px; }
  .site-header .nav-cta .btn { padding: 11px 16px; font-size: 0.86rem; }
}
/* 375px (iPhone SE / mini) and the old 320px screens need one more notch.
   The mark goes before the wordmark does — the name is the thing that has
   to stay readable. */
@media (max-width: 389px) {
  .logo { font-size: 1.05rem; gap: 6px; }
  .logo svg { width: 28px; height: 17px; }
  .site-header .nav-cta .btn { padding: 10px 13px; font-size: 0.8rem; }
}
@media (max-width: 339px) {
  .logo svg { display: none; }
  .logo { font-size: 1rem; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  color: var(--white);
  background: linear-gradient(180deg, rgba(51,40,31,0.55), rgba(51,40,31,0.75)), var(--hero-img) center/cover no-repeat;
}
.hero-content { max-width: 620px; padding: 100px 0 60px; }
.hero h1 { color: var(--white); font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.hero p.lead { color: rgba(255,255,255,0.9); font-size: 1.15rem; max-width: 520px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* Search / availability card */
.search-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-top: -70px;
  position: relative;
  /* Deliberately no z-index. position:relative alone lifts this card over the
     hero background. Any z-index here opens a stacking context that traps the
     Hostaway date picker (z-index 9999) beneath .site-header (z-index 50), and
     on a phone that puts the calendar's month arrows under the sticky header
     where they cannot be tapped. */
}
.search-card .search-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 14px;
}
.search-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.search-field input, .search-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sand);
}
.widget-embed-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--sand-dark);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-top: 14px;
}
@media (max-width: 760px) {
  .search-card .search-row { grid-template-columns: 1fr 1fr; }
}

/* Sections */
section { padding: 80px 0; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Perks band */
.perks-band { background: var(--white); }
.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.perk-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--sand);
}
.perk-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--ocean);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
@media (max-width: 860px) { .perks-grid { grid-template-columns: 1fr; } }

/* Property grid */
.property-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.property-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.property-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.property-photo { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.property-photo img { width: 100%; height: 100%; object-fit: cover; }
.property-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--white);
  color: var(--ocean);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}
.property-body { padding: 18px 20px 22px; }
.property-body h3 { font-size: 1.08rem; margin-bottom: 6px; }
.property-meta { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 10px; }
.property-rating { font-size: 0.85rem; font-weight: 700; color: var(--ocean); margin-bottom: 12px; }
@media (max-width: 980px) { .property-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .property-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.testimonials { background: var(--ocean); color: var(--white); }
.testimonials h2, .testimonials .eyebrow { color: var(--white); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.testimonial-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  padding: 26px;
}
.testimonial-card .stars { color: var(--gold); margin-bottom: 12px; letter-spacing: 2px; }
.testimonial-card p { color: rgba(255,255,255,0.92); font-size: 0.98rem; }
.testimonial-name { font-weight: 700; margin-top: 14px; }
@media (max-width: 760px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Email capture */
.capture-band {
  background: var(--sand-dark);
  border-radius: var(--radius);
  padding: 50px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.capture-form { display: flex; gap: 10px; }
.capture-form input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
@media (max-width: 860px) {
  .capture-band { grid-template-columns: 1fr; padding: 34px; }
  .capture-form { flex-direction: column; }
}

/* ===========================================================
   Owner page components — added Sep 4, 2026.
   Content/strategy came from the PM project; these are that page's
   structures rebuilt in Citrus Pop rather than its own palette.
   =========================================================== */

/* Ledger strip — the four numbers under the hero */
.ledger { background: var(--sand-dark); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ledger-in { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto; }
.led { padding: 28px 24px; border-right: 1px solid var(--line); }
.led:last-child { border-right: none; }
.led .n {
  font-family: var(--font-display);
  font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ink);
}
.led .l { font-size: 0.82rem; color: var(--ink-soft); margin-top: 8px; line-height: 1.4; }
@media (max-width: 720px) {
  .ledger-in { grid-template-columns: repeat(2, 1fr); }
  .led { border-bottom: 1px solid var(--line); }
  .led:nth-child(2n) { border-right: none; }
}

/* Flagged callout — for the compliance warning. Coral rail, not the
   ocean-green used for positive/confirmatory boxes. */
.flag-box {
  border-left: 4px solid var(--coral);
  background: var(--white);
  padding: 22px 26px;
  border-radius: var(--radius-sm);
  margin-top: 26px;
  max-width: 66ch;
}
.flag-box p { margin: 0 0 12px; color: var(--ink); }
.flag-box p:last-child { margin-bottom: 0; }

/* Capacity band — dark, deliberately interrupts the page */
.capacity { background: var(--ink); color: var(--white); }
.capacity h2, .capacity h3 { color: var(--white); }
.capacity p { color: rgba(255,255,255,0.75); }
.cap-count { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.cap-count .num {
  font-family: var(--font-display);
  font-size: 4rem; font-weight: 700; line-height: 1; color: var(--gold);
}
.cap-count .cap-lab { font-size: 0.95rem; color: rgba(255,255,255,0.7); max-width: 18ch; line-height: 1.4; }

/* Fee plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  background: var(--white);
}
.plan.lead { border-color: var(--coral); border-width: 2px; }

/* Clickable plan cards — regulation.html's free/paid split, Sep 28 2026.
   The whole card is the hit area rather than a button inside it, because
   the card IS the offer. Lift and border shift on hover so it reads as
   pressable; `display:block` because an <a> is inline by default and would
   otherwise collapse inside the .plans grid. */
.plan-link {
  display: block;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.plan-link:hover {
  transform: translateY(-2px);
  border-color: var(--ocean);
  box-shadow: var(--shadow-sm);
}
.plan-link.lead:hover { border-color: var(--coral-dark); }
.plan-link .fineprint strong { color: var(--ocean); }
.plan-link.lead .fineprint strong { color: var(--coral); }

/* The header is sticky, so an anchor jump parks the target underneath it.
   Give the in-page jump targets enough margin to clear it. */
#check-address, #check, #markets { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }
.plan h3 { font-size: 1.15rem; margin-bottom: 4px; }
.plan .rate {
  font-family: var(--font-display);
  font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--coral);
}
/* Second line of a two-part price ("+ $1,200 per sleeping room") — used on the
   design page, where the fee is a formula rather than a single percentage.
   Display type at body scale, so the headline number still carries and the
   qualifier reads as part of the same price rather than as a footnote. */
.plan .rate-add {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin-top: 7px;
}
.plan .sub { font-size: 0.95rem; color: var(--ink-soft); margin: 14px 0 18px; }
.plan ul { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.plan li {
  padding: 9px 0 9px 26px; position: relative;
  border-top: 1px solid var(--sand-dark); color: var(--ink-soft);
}
.plan li:before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 9px; height: 9px; background: var(--ocean); border-radius: 50%;
}
.plan li.owner:before { background: transparent; border: 1px solid var(--line); }
.plan li.owner { color: #9a8c81; }
.plan li.key { color: var(--ink); font-weight: 700; }
.fineprint { font-size: 0.9rem; color: var(--ink-soft); margin-top: 18px; }

/* Continuity rows */
.cont { margin-top: 26px; max-width: 66ch; }
.cont div { border-top: 1px solid var(--line); padding: 16px 0; }
.cont strong { font-family: var(--font-display); font-size: 1rem; display: block; margin-bottom: 4px; color: var(--ink); }
.cont span { font-size: 0.95rem; color: var(--ink-soft); }

/* Legal disclaimer */
.disc { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-top: 22px; max-width: 78ch; line-height: 1.6; }

/* Owner services ladder (management.html) — added Sep 3, 2026.
   Numbered because these genuinely are sequential: a unit gets designed,
   then set up, then managed. The numbers encode the order of the work, not
   decoration — don't reuse this for an unordered list. */
.service-step {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.service-step:last-child { border-bottom: none; }
.service-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--coral);
  background: var(--sand-dark);
  border-radius: 50%;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-step h3 { margin-bottom: 8px; }
.service-step .service-lead { font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.service-step ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); }
.service-step li { margin-bottom: 7px; }
@media (max-width: 620px) {
  .service-step { grid-template-columns: 1fr; gap: 14px; }
  .service-num { width: 48px; height: 48px; font-size: 1.2rem; }
}

/* PM cross-sell strip */
.pm-strip {
  background: var(--ink);
  color: var(--white);
  padding: 46px 0;
}
.pm-strip .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.pm-strip h3 { color: var(--white); margin-bottom: 4px; }
.pm-strip p { color: rgba(255,255,255,0.72); margin: 0; }

/* Footer */
.site-footer {
  background: var(--ocean-dark);
  color: rgba(255,255,255,0.75);
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
}
.footer-grid h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 16px; }
.footer-grid a { display: block; color: rgba(255,255,255,0.68); font-size: 0.92rem; margin-bottom: 10px; }
.footer-grid a:hover { color: var(--white); }
.footer-logo { font-family: var(--font-display); font-size: 1.3rem; color: var(--white); margin-bottom: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* Page hero (interior pages) */
.page-hero {
  background: linear-gradient(180deg, rgba(51,40,31,0.5), rgba(51,40,31,0.68)), var(--hero-img) center/cover no-repeat;
  color: var(--white);
  padding: 130px 0 90px;
}
.page-hero h1 { color: var(--white); }
.page-hero p.lead { color: rgba(255,255,255,0.9); max-width: 560px; }
.breadcrumb { font-size: 0.85rem; margin-bottom: 18px; opacity: 0.85; }
.breadcrumb a:hover { text-decoration: underline; }

/* Amenity grid (Avalon page) */
.amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.amenity-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  text-align: left;
}
.amenity-card .amenity-icon { font-size: 1.6rem; margin-bottom: 10px; }
.amenity-card h4 { font-size: 1rem; margin-bottom: 6px; }
.amenity-card p { font-size: 0.9rem; margin: 0; }
@media (max-width: 860px) { .amenity-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .amenity-grid { grid-template-columns: 1fr; } }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.two-col img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.callout-box {
  background: var(--white);
  border: 1px dashed var(--coral);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.callout-box strong { color: var(--coral-dark); }

/* Complex photo gallery (Avalon page) */
.photo-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.photo-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}
.photo-grid-3 figure { margin: 0; }
.photo-grid-3 img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.photo-grid-3 figcaption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}
@media (max-width: 860px) {
  .photo-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .photo-grid-3 { grid-template-columns: 1fr; }
}
.photo-grid-2 figure { margin: 0; }
.photo-grid-2 img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.photo-grid-2 figcaption {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 10px;
  text-align: center;
}
/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 36px;
}
.contact-form-card h2 { margin-bottom: 6px; }
.contact-form-card > p { margin-bottom: 26px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--sand);
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Select added Sep 3, 2026 for the owner enquiry form on management.html —
   matches the input/textarea styling above so the form reads as one object. */
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5346' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field select:focus { outline: none; border-color: var(--coral); }

.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 130px; font-family: var(--font-body); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}
.form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 14px;
}
.form-note a { color: var(--coral-dark); font-weight: 700; }

.contact-info-card {
  background: var(--ocean);
  color: var(--white);
  border-radius: var(--radius);
  padding: 32px;
}
.contact-info-card h3 { color: var(--white); margin-bottom: 6px; }
.contact-info-card > p { color: rgba(255,255,255,0.82); margin: 0; }
.contact-info-list { margin-top: 22px; }
.contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.contact-info-item:first-child { border-top: none; padding-top: 0; }
.contact-info-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.contact-info-item .info-label {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.68);
  margin-bottom: 2px;
}
.contact-info-item a, .contact-info-item .info-detail {
  color: var(--white);
  font-weight: 700;
  font-size: 0.98rem;
}
.contact-info-item a:hover { text-decoration: underline; }

.contact-quicklinks {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.contact-quicklinks .eyebrow { margin-bottom: 12px; }
.contact-quicklinks a {
  display: block;
  font-weight: 700;
  color: var(--ocean);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact-quicklinks a:last-child { border-bottom: none; }
.contact-quicklinks a:hover { color: var(--coral); }
.contact-quicklinks a span { color: var(--ink-soft); font-weight: 400; display: block; font-size: 0.85rem; margin-top: 2px; }

.form-success {
  display: none;
  background: var(--sand-dark);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 20px;
}
.form-success.show { display: block; }

/* Shown when a contact-form submission actually fails, so a guest is never
   told their message went through when it didn't (the old bug: the form
   reported success while sending nothing). Coral, not the sand of success. */
.form-error {
  display: none;
  background: #fdece1;
  border: 1px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  color: var(--ink);
  margin-bottom: 20px;
}
.form-error.show { display: block; }
.form-error a { color: var(--coral); font-weight: 700; text-decoration: underline; }

@media (max-width: 760px) {
  .photo-grid-2 { grid-template-columns: 1fr; }
  .photo-grid-2 img { height: 240px; }
}

/* ===========================================================
   Guest guidebook pages (unlisted — /guides/*.html)
   Not part of the main site nav. Mobile-first: guests read
   these on their phone at the door. Reuse this block for every
   new unit/area page — copy avalon-715.html as the template.
   =========================================================== */
.guide-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.guide-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guide-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
}
.guide-brand svg { flex-shrink: 0; }
.guide-tag {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--sand-dark);
  padding: 5px 12px;
  border-radius: 999px;
}

.guide-hero {
  background: var(--ocean);
  color: var(--white);
  padding: 34px 0 46px;
}
.guide-hero .eyebrow { color: var(--gold); }
.guide-hero h1 {
  color: var(--white);
  font-size: clamp(1.6rem, 4.5vw, 2.3rem);
  margin-bottom: 8px;
}
.guide-hero p { color: rgba(255,255,255,0.85); margin: 0; max-width: 520px; }

.quickref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: -26px;
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) {
  .quickref-grid { grid-template-columns: 1fr; }
}
.quickref-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--coral);
  padding: 16px 20px;
}
.quickref-card .qr-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 6px;
  display: block;
}
.quickref-card .qr-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.quickref-card .qr-value {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}
.qr-copy {
  border: none;
  background: var(--sand-dark);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.qr-copy:hover { background: var(--line); }

.guide-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0;
}
.guide-jump a {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ocean);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 8px 14px;
  border-radius: 999px;
}
.guide-jump a:hover { border-color: var(--ocean); }

.guide-section { margin-bottom: 28px; scroll-margin-top: 16px; }
.guide-section h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.15rem;
  margin-bottom: 14px;
}
.guide-section h2 .gicon { font-size: 1.25rem; }
.guide-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
}
.guide-card .gi-row {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.guide-card .gi-row:first-child { border-top: none; padding-top: 0; }
.guide-card .gi-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}
.guide-card .gi-value { color: var(--ink); }
.guide-card ul, .guide-card ol { margin: 0; padding-left: 20px; color: var(--ink); }
.guide-card ul li, .guide-card ol li { margin-bottom: 7px; }
.guide-card ul li:last-child, .guide-card ol li:last-child { margin-bottom: 0; }
.guide-card p:last-child { margin-bottom: 0; }

.guide-emergency {
  background: var(--ink);
  color: var(--white);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.guide-emergency h3 { color: var(--white); margin-bottom: 6px; }
.guide-emergency p { color: rgba(255,255,255,0.72); margin-bottom: 18px; }

.guide-arealink {
  display: block;
  background: var(--sand-dark);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-top: 8px;
}
.guide-arealink .eyebrow { margin-bottom: 8px; }
.guide-arealink strong { font-size: 1.05rem; color: var(--ink); }
.guide-arealink span { display: block; color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }

.guide-footer {
  text-align: center;
  padding: 30px 0 40px;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* Guidebook win-back card — soft email capture + discount code,
   placed near the bottom of a unit's quick-start page so it shows up
   after the guest has what they actually came for. */
.winback-card {
  background: var(--ocean);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.winback-card h3 { color: var(--white); margin-bottom: 6px; }
.winback-card p { color: rgba(255,255,255,0.82); margin-bottom: 18px; }
.winback-form { display: flex; gap: 10px; flex-wrap: wrap; }
.winback-form input {
  flex: 1;
  min-width: 180px;
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.winback-form input:focus { outline: 2px solid var(--gold); }
.winback-success { display: none; }
.winback-success.show { display: block; }
.winback-code {
  display: inline-block;
  background: rgba(255,255,255,0.14);
  border: 1.5px dashed rgba(255,255,255,0.6);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 6px 0 16px;
}
.winback-success a.btn { margin-top: 4px; }

/* Market gallery (management.html) — added Sep 4, 2026, captioned same day.
   Shows at a glance that the portfolio isn't one market: snow, Gulf coast,
   low country. Caption sits under the photo rather than overlaid — an overlay
   needs a scrim that fights the image, and on mobile there's no hover state
   to reveal it. */
.market-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.market-grid figure { margin: 0; }
.market-grid img {
  width: 100%;
  height: auto;            /* see the note on .pillar img — the width/height
                              attributes otherwise override aspect-ratio */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease;
}
.market-grid figure:hover img { transform: translateY(-3px); }
.market-grid figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
@media (max-width: 860px) { .market-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 520px) { .market-grid { grid-template-columns: 1fr; } }

/* Hero variant for the owner page: the composite already carries a lot of
   detail, so it needs a heavier scrim than the single-photo heroes elsewhere
   or the headline stops being readable over the snow panel. */
.page-hero.hero-composite {
  background: linear-gradient(180deg, rgba(51,40,31,0.72), rgba(51,40,31,0.80)), var(--hero-img) center/cover no-repeat;
}

/* ---------------------------------------------------------------
   WHERE WE WORK — county cards on management.html, added Sep 4 2026.
   Grouped by state/province as a label, with each card a COUNTY.
   County is the right grain: short-term rental rules are municipal,
   so "Florida rules" isn't a real thing, and saying otherwise would
   undercut the complexity argument the section above it makes.
   Cards that link (a.mkt) go to that market's rules page; cards
   without one (span.mkt) are markets where we haven't written the
   page yet — build a sibling of pinellas-str-rules.html and swap
   the span for an anchor.
   --------------------------------------------------------------- */
.markets { margin-top: 34px; }
.mkt-state {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 32px 0 14px;
}
.mkt-state:first-child { margin-top: 0; }
.mkt-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mkt {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
a.mkt:hover { border-color: var(--coral); transform: translateY(-2px); }
.mkt strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
}
.mkt .mkt-towns { display: block; font-size: 0.92rem; color: var(--ink-soft); margin-top: 5px; }
.mkt .mkt-go { display: block; font-size: 0.82rem; font-weight: 700; color: var(--ocean); margin-top: 12px; }
span.mkt .mkt-go { color: var(--ink-soft); font-weight: 600; }
.mkt-row.mkt-row-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .mkt-row.mkt-row-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .mkt-row, .mkt-row.mkt-row-3 { grid-template-columns: 1fr; } }

/* Guidebook logo is a link home as of Sep 4, 2026 — a guest who lands on a
   guide has no other route to the site, and the expired-link screen has none
   at all. .guide-brand keeps its own colour so it doesn't inherit link blue. */
a.guide-brand { color: var(--ink); text-decoration: none; }
a.guide-brand:hover { color: var(--coral); }

/* ---------------------------------------------------------------
   PILLAR CARDS — the three-service overview on management.html,
   added Sep 4 2026 when that page became a hub rather than a page
   that tried to sell all three services at once.
   Each card is a whole clickable block: image, what it is, three
   things it covers, and a link into the pillar page. Keep the
   bullet lists to three or four items — the detail belongs on the
   pillar page, and a long list here rebuilds the problem the hub
   was created to solve.
   --------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.pillar {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--coral); }
/* Two non-obvious declarations below, both load-bearing:
   height:auto  — the <img> tags carry width/height ATTRIBUTES (good: they stop
     layout shift while the photo loads), but those map to a presentational
     height that BEATS aspect-ratio. Without height:auto each photo renders at
     its own intrinsic height and the three cards stop lining up. The same fix
     was applied to .market-grid img, where it had been correct only by
     coincidence — every tile there happens to be 4:3 already.
   flex:0 0 auto — .pillar is a column flexbox, so otherwise the image is a
     shrinkable flex item and the card with the least body text keeps the
     tallest photo. */
.pillar img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; flex: 0 0 auto; }
.pillar-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pillar .pill-num {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 8px;
}
.pillar h3 { font-size: 1.18rem; margin-bottom: 8px; color: var(--ink); }
.pillar > .pillar-body > p { color: var(--ink-soft); font-size: 0.94rem; margin: 0 0 16px; }
.pillar ul { list-style: none; margin: 0 0 20px; padding: 0; }
.pillar li {
  font-size: 0.89rem;
  color: var(--ink-soft);
  padding: 7px 0 7px 20px;
  position: relative;
  border-top: 1px solid var(--line);
}
.pillar li:before { content: "—"; position: absolute; left: 0; color: var(--coral); }
.pillar .pill-go {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ocean);
}
a.pillar:hover .pill-go { color: var(--coral); }
@media (max-width: 980px) { .pillars { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; } }

/* ---------------------------------------------------------------
   JURISDICTION GRID — regulation.html, added Sep 4 2026.
   Twenty-five squares, a handful highlighted. It makes the page's
   central argument faster than the paragraph next to it: there are
   many rulebooks, most say no, a few don't, and you can't tell
   which from looking.
   DELIBERATELY UNLABELLED. The tiles carry no jurisdiction names,
   so the graphic shows the SHAPE of the answer without giving the
   answer away — same rule as the rest of the regulation branch.
   Don't add names or a key that maps tiles to cities.
   --------------------------------------------------------------- */
.jgrid-wrap { margin-top: 30px; max-width: 66ch; }
.jgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 300px;
}
.jgrid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--sand-dark);
}
.jgrid i.on { background: var(--coral); }
.jkey { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-size: 0.88rem; color: var(--ink-soft); }
.jkey span { display: flex; align-items: center; gap: 8px; }
.jkey b { width: 14px; height: 14px; border-radius: 4px; background: var(--sand-dark); display: inline-block; }
.jkey b.on { background: var(--coral); }

/* ---------------------------------------------------------------
   TIMELINE — used twice: the "rules move" sequence on
   regulation.html and the turnover-day sequence on
   operations.html. Two pages that are mostly argument and process
   rather than photographs, so they needed something to look at
   that carries meaning rather than decoration.
   --------------------------------------------------------------- */
.tline { margin-top: 28px; max-width: 66ch; }
.tline > div {
  position: relative;
  padding: 0 0 24px 30px;
  border-left: 2px solid var(--line);
}
.tline > div:last-child { border-left-color: transparent; padding-bottom: 0; }
.tline > div:before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
}
.tline .when {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}
.tline strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  margin: 5px 0 5px;
}
.tline p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* Photo + text band. Used on operations.html for the Avalon density
   argument, where the aerial does more work than the paragraph. */
.figrow { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 34px; }
.figrow img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.figrow figcaption { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.figrow figure { margin: 0; }
@media (max-width: 860px) { .figrow { grid-template-columns: 1fr; gap: 26px; } }

/* Clickable market tiles — regulation.html wraps each <figure> in an <a> so an
   owner who recognises their market in a photograph can click the photograph.
   The <a> becomes the grid item, so it has to carry the layout; the figure just
   fills it. Caption keeps its own colour rather than inheriting link styling,
   and picks up the coral on hover so the whole tile reads as one target. */
.market-grid > a { display: block; color: inherit; text-decoration: none; }
.market-grid > a figure { margin: 0; }
.market-grid > a:hover img { transform: translateY(-3px); }
.market-grid > a:hover figcaption { color: var(--coral); }

/* ---------------------------------------------------------------
   ACCORDIONS — added Sep 5 2026, on regulation.html and
   operations.html. Both pages were a long scroll, punishing on
   mobile, and Glen's read was that people would drop out partway.

   Built on native <details>/<summary>: no JavaScript, keyboard
   accessible for free, works with browser find-in-page in modern
   engines, and degrades to plain visible text if anything fails.
   Don't replace it with a JS accordion.

   THE RULE FOR WHAT GETS COLLAPSED: the argument has to survive
   with everything shut. Headline claims, the numbers, the hooks
   and the calls to action stay open; the supporting detail folds
   away. If someone reads only the summaries they should still get
   the whole case — the panels are evidence, not punchlines.
   --------------------------------------------------------------- */
.accset { max-width: 66ch; margin-top: 26px; }
.acc { border-top: 1px solid var(--line); }
.acc:last-of-type { border-bottom: 1px solid var(--line); }
.acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  transition: color 0.15s ease;
}
.acc > summary:hover { color: var(--coral); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.acc[open] > summary::after { transform: rotate(-135deg); }
.acc .acc-body { padding: 2px 2px 24px; }
.acc .acc-body p { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 14px; }
.acc .acc-body p:last-child { margin-bottom: 0; }
.acc .acc-body .cont { margin-top: 0; }
.acc .acc-body .cont div:first-child { border-top: none; padding-top: 0; }
.acc .acc-body .tline { margin-top: 4px; }

/* A market card that spans the full row — used for the "somewhere else"
   catch-all at the foot of the regulation market index, so the list of
   markets doesn't read as the limit of what we'll take on. */
.mkt-wide { grid-column: 1 / -1; }

/* Small "Owner Login" link beside the header CTA. Deliberately a text link
   and NOT a second button: the CTA slot is the most valuable pixel on the
   page and two competing buttons halve the clarity of both. This is the
   standard pattern — quiet log-in, loud primary action. Hidden below 860px,
   where a duplicate inside .nav-links takes over in the burger menu. */
.nav-login {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-login:hover { color: var(--ocean); }
.nav-login svg { flex: none; }
.nav-links .mobile-only { display: none; }
@media (max-width: 860px) {
  .nav-login { display: none; }
  .nav-links .mobile-only { display: block; }
}

/* The awkward band. From 861px the burger disappears and all five nav links
   come back — adding Owner Login on top of that made the row overflow and
   the links wrap to two lines each at ~900px. Everything gives a little here
   until there is room to breathe again at 1081px. */
@media (min-width: 861px) and (max-width: 1080px) {
  .site-header .container { gap: 14px; }
  .nav-links { gap: 13px; font-size: 0.84rem; }
  .nav-login { font-size: 0.82rem; }
  .nav-cta { gap: 9px; }
  .site-header .nav-cta .btn { padding: 11px 15px; font-size: 0.84rem; }
}
@media (min-width: 1081px) { .site-header .container { gap: 24px; } }

/* A market-grid variant that stays three-across at every width. Used for the
   credibility strip above the regulation market index: three small proof
   photos read fine at thumbnail size, and stacking them on mobile added most
   of a screen of scrolling to a page that was already too long. */
.market-grid.strip { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.market-grid.strip figcaption { font-size: 0.74rem; line-height: 1.3; margin-top: 7px; }
@media (max-width: 860px) { .market-grid.strip { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (max-width: 520px) { .market-grid.strip { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Checkbox row - the checker's "I'm an agent" box (Oct 6, 2026) */
.check-row { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; line-height: 1.45; }
.check-row input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ocean); }
.perks-grid.perks-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .perks-grid.perks-grid-2 { grid-template-columns: 1fr; } }

/* County rules list on /pinellas-str-rules (Oct 9, 2026) */
.page-hero .last-checked { margin: 10px 0 14px; font-size: 0.9rem; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; }
.rule-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 40px; margin-top: 34px; }
.rule-item h3 { font-size: 1.1rem; margin: 0 0 6px; }
.rule-item p { margin: 0; max-width: 60ch; }
.rule-item .rule-src { margin-top: 6px; font-size: 0.82rem; color: var(--ink-soft); }
.rule-item .rule-src a { color: var(--ocean-dark); }
@media (max-width: 760px) { .rule-list { grid-template-columns: 1fr; } }

/* Markets on /regulation, consolidated Oct 9, 2026: one card per market with
   its photo, then a compact row for markets without a rules page. Replaces
   the photo strip + state-grouped list, which said everything twice. */
.mkt-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mkt-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.mkt-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.mkt-card img { width: 100%; height: 200px !important; max-height: 200px; object-fit: cover; display: block; }
.mkt-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.mkt-card .mkt-where { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); font-weight: 700; }
.mkt-card strong { font-size: 1.12rem; margin-top: 4px; }
.mkt-card .mkt-towns, .mkt-also-item span { font-size: 0.92rem; color: var(--ink-soft); margin-top: 6px; display: block; }
.mkt-card .mkt-go, .mkt-also-item .mkt-go { margin-top: auto; padding-top: 12px; font-size: 0.85rem; font-weight: 700; color: var(--ocean); }
.mkt-also { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 26px; border-top: 1px solid var(--line); }
.mkt-also-item { display: flex; flex-direction: column; padding: 18px 18px 4px 0; color: inherit; text-decoration: none; }
.mkt-also-item + .mkt-also-item { padding-left: 18px; border-left: 1px solid var(--line); }
.mkt-also-item strong { font-size: 0.98rem; }
.mkt-also-item:hover strong { color: var(--coral); }
@media (max-width: 960px) { .mkt-also { grid-template-columns: repeat(2, 1fr); } .mkt-also-item:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 760px) {
  .mkt-cards { grid-template-columns: 1fr; gap: 14px; }
  .mkt-card { flex-direction: row; }
  .mkt-card img { width: 110px; min-width: 110px; height: auto !important; max-height: none; align-self: stretch; }
  .mkt-card-body { padding: 14px 16px; }
}
@media (max-width: 520px) { .mkt-also { grid-template-columns: 1fr; } .mkt-also-item, .mkt-also-item + .mkt-also-item { padding-left: 0; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 14px; } }

/* "Check an address / ask us" strip on the county rules pages (Oct 10, 2026) */
.ask-strip { padding: 0; }
.ask-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border: 1px solid rgba(51,40,31,0.14); border-left: 4px solid var(--coral); background: var(--white); border-radius: var(--radius-sm); padding: 22px 26px; margin: 8px 0 8px; }
.ask-strip-inner p { margin: 0; max-width: 56ch; color: var(--ink); }
.ask-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .ask-btns { width: 100%; } .ask-btns .btn { flex: 1 1 100%; text-align: center; } }