/* Homepage sections: hero, search card, trust strip, categories, editorial, steps. */

.hero { position: relative; min-height: 715px; display: flex; align-items: center; overflow: hidden; color: var(--white); background: var(--hero-base); }
.hero-image {
  position: absolute;
  inset: 0;
  /* Fallback first; image-set lets the browser pick by viewport and DPR. */
  background: url("/media/hero-1280.jpg") center 48% / cover;
  background-image: -webkit-image-set(url("/media/hero-800.jpg") 1x, url("/media/hero-1280.jpg") 1.5x, url("/media/hero-1920.jpg") 2x);
  background-image: image-set(url("/media/hero-800.jpg") 1x, url("/media/hero-1280.jpg") 1.5x, url("/media/hero-1920.jpg") 2x);
  filter: saturate(1.14) contrast(1.04);
  transform: scale(1.03);
}
.hero-tint { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--hero-tint-near), .94) 0%, rgba(var(--hero-tint-far), .74) 47%, rgba(var(--hero-tint-far), .30) 100%), linear-gradient(0deg, rgba(var(--hero-tint-near), .68), rgba(var(--hero-tint-near), .10) 64%); }
/* The overlay header is out of flow (absolute, 76px tall starting 32px down), so
   the hero copy has to clear it explicitly. At 58px the eyebrow started 2px inside
   the header band, 4px below the logo. 118px leaves a clear gap. */
.hero-shell { position: relative; z-index: 1; width: min(var(--shell-width), calc(100% - 48px)); margin: 118px auto 0; }
.hero-copy { width: 570px; margin-bottom: 22px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 600; letter-spacing: -.04em; line-height: .98; }
h1 { margin-bottom: 16px; font-size: clamp(3.25rem, 5vw, 4.55rem); }
h2 { margin-bottom: 18px; font-size: clamp(2.25rem, 4vw, 3.5rem); }
h1 em, h2 em { color: var(--yellow); font-style: italic; }
.hero-lede { max-width: 470px; margin-bottom: 0; color: var(--overlay-white-90); font-size: 16px; line-height: 1.7; }
.hero-proof { display: flex; gap: 22px; margin-top: 17px; }
.hero-proof span { display: grid; gap: 1px; padding-left: 12px; border-left: 1px solid var(--overlay-white-35); }
.hero-proof strong { color: var(--yellow-soft); font-size: 12px; }
.hero-proof small { color: rgba(255,255,255,.64); font-size: 10px; }
.hero-quicklinks { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 14px; }
.hero-quicklinks a { color: var(--overlay-white-80); border-bottom: 1px solid var(--overlay-white-35); font-size: 10px; font-weight: 700; }
.hero-quicklinks a span { margin-left: 6px; color: var(--yellow); }
.hero-quicklinks a:hover { color: var(--yellow-soft); border-color: var(--yellow-soft); }
/* Hero search. Rebuilt from a measured audit of the previous version: 10px labels,
   13px values, 20px-tall controls inside 47px boxes, zero gap between fields, and a
   date input that was 1x1px so the picker had a one-pixel hit area. Fields are now
   discrete rounded targets with real type sizes and full-height controls. */
.search-card {
  position: relative;
  width: 100%;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--ink);
  background: rgba(255, 255, 255, .98);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(3, 42, 33, .25);
}
.search-card-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
}
.search-card-intro strong { display: block; font-size: var(--text-lg); letter-spacing: -.02em; }
.search-kicker {
  margin: 0 0 var(--space-1);
  color: var(--orange);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.demo-chip {
  padding: 6px 10px;
  color: var(--green-700);
  background: var(--surface-mint);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 800;
  white-space: nowrap;
}

.search-tabs {
  display: flex;
  gap: var(--space-6);
  height: 46px;
  border-bottom: 1px solid var(--border);
}
.search-tab {
  position: relative;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  font-size: var(--text-base);
  font-weight: 700;
}
.search-tab.active { color: var(--green-700); }
.search-tab.active::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--orange);
  border-radius: 4px 4px 0 0;
  content: "";
}

/* One connected bar, not four floating boxes. The previous pass gave each field a
   transparent background and a transparent border, which removed the structure the
   hairline dividers used to provide -- it read as loose text in white space.
   Destination is widest because it carries the longest values (resort names). */
.search-form {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr .95fr .8fr auto;
  align-items: stretch;
  gap: 0;
  margin: var(--space-5) 0 var(--space-4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(3, 42, 33, .04);
}

.search-field {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background 140ms ease;
}
.search-field:first-child { border-radius: 13px 0 0 13px; }
.search-field:hover { background: var(--surface-sunk); }
.search-field:focus-within {
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--green-700);
  border-radius: 13px;
}

.field-label {
  display: block;
  margin: 0;
  color: var(--text-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* The row fills the remaining field height so the control itself -- not just the
   wrapping label -- is a large target. Clicking a select then opens it directly
   rather than merely focusing it. */
.field-input { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-2); }
.field-icon {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  color: var(--orange);
  background: var(--surface-warm);
  border-radius: var(--radius-round);
  font-size: 14px;
}
.field-input input,
.field-input button,
.field-input select {
  min-width: 0;
  flex: 1;
  align-self: stretch;
  height: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-size: var(--text-md);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.field-input select { appearance: none; text-overflow: ellipsis; }
.field-input select:invalid,
.field-input select option[value=""] { color: var(--text-muted); }
.field-input input[hidden], .field-input select[hidden] { display: none; }
.field-input input::placeholder { color: var(--text-muted); opacity: 1; }
.field-chevron { flex: 0 0 auto; color: var(--green-700); font-size: 15px; }

/* The whole field is the date target, not a one-pixel input. The native control is
   transparent but full-size; .date-display renders the formatted value beneath it. */
#date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.date-display {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-submit, .dark-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  color: var(--white);
  background: var(--orange);
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 800;
}
.search-submit { min-height: 72px; margin: 0; padding: 0 26px; border-radius: 0 13px 13px 0; }
.search-submit:hover, .dark-button:hover { background: var(--orange-dark); }
.search-submit span:last-child, .dark-button span:last-child, .light-button span:last-child { font-size: 19px; line-height: 0; }

.search-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-subtle);
  font-size: var(--text-sm);
}
.search-suggestions span { margin-right: var(--space-1); font-weight: 600; }
.search-suggestions button {
  min-height: 34px;
  padding: 7px 13px;
  color: var(--green-700);
  background: var(--surface-mint);
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 700;
}
.search-suggestions button:hover { color: var(--white); background: var(--green-700); }
.search-note { width: 100%; margin-top: var(--space-1); color: var(--text-subtle); font-size: var(--text-xs); }

.guest-popover {
  position: absolute;
  z-index: 3;
  top: 128px;
  right: 20%;
  width: 300px;
  padding: var(--space-3) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.guest-popover > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.guest-popover > div:last-child { border: 0; }
.guest-popover strong, .guest-popover small { display: block; }
.guest-popover strong { font-size: var(--text-base); }
.guest-popover small { color: var(--text-subtle); font-size: var(--text-sm); }
.stepper { display: flex; align-items: center; gap: var(--space-3); }
.stepper button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--green-700);
  background: var(--surface-mint);
  border: 1px solid var(--border);
  border-radius: var(--radius-round);
  font-size: 16px;
}
.stepper button:hover { color: var(--white); background: var(--green-700); }
.stepper output { min-width: 18px; text-align: center; font-size: var(--text-md); font-weight: 700; }
.trust-strip { width: min(1180px, calc(100% - 48px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 auto; padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.trust-strip > div { display: flex; align-items: center; gap: 11px; }
.trust-strip strong, .trust-strip small { display: block; }
.trust-strip strong { font-size: 12px; }
.trust-strip small { margin-top: 2px; color: var(--text-subtle); font-size: 10px; }
.trust-mark { display: grid; width: 31px; height: 31px; place-items: center; color: var(--orange); background: var(--surface-warm); border-radius: 50%; font-size: 16px; }
.trust-rate { justify-content: flex-end; gap: 10px !important; }
.trust-rate strong { color: var(--green); font-family: Fraunces, Georgia, serif; font-size: 32px; letter-spacing: -.05em; }
.trust-rate span { color: var(--text-muted); font-size: 10px; }
.trust-rate span small { display: block; margin-top: 3px; color: var(--text-on-dark); font-size: 9px; }
.trust-rate b { display: block; margin-top: 2px; color: var(--orange); font-size: 11px; letter-spacing: 2px; }
.section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.explore-section { padding: 105px 0 96px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 38px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading.compact { margin-bottom: 22px; }
.text-link { color: var(--green); font-size: 12px; font-weight: 800; }
.text-link span { margin-left: 10px; color: var(--orange); font-size: 17px; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-card { position: relative; min-height: 174px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 21px; color: var(--white); border: 1px solid rgba(255,255,255,.25); border-radius: 17px; isolation: isolate; }
.category-card::before { position: absolute; z-index: -2; inset: 0; background: linear-gradient(0deg, rgba(3,30,22,.88), rgba(3,30,22,.04) 72%), linear-gradient(135deg, rgba(3,30,22,.18), transparent 55%); content: ""; }
.category-card::after { position: absolute; z-index: -3; inset: 0; background: var(--card-image) center / cover; transition: transform 300ms ease; content: ""; }
.category-card:hover::after { transform: scale(1.06); }
.category-card:nth-child(1), .category-card:nth-child(6) { min-height: 222px; }
.category-card:nth-child(1) { grid-row: span 2; }
.category-card:nth-child(6) { grid-column: span 2; }
.category-card h3 { margin: 0 0 4px; font-family: "DM Sans", Arial, sans-serif; font-size: 16px; letter-spacing: -.02em; }
.category-card p { max-width: 210px; margin: 0; color: var(--overlay-white-80); font-size: 11px; line-height: 1.45; }
.category-icon { position: absolute; top: 17px; left: 17px; display: grid; width: 32px; height: 32px; place-items: center; color: var(--white); background: var(--overlay-white-20); border: 1px solid var(--overlay-white-35); border-radius: 50%; backdrop-filter: blur(7px); font-size: 15px; }
.popular-section { padding-bottom: 104px; }
.section-note { margin: 7px 0 0; color: var(--text-subtle); font-size: 10px; }
.section-controls { display: flex; gap: 9px; }
.circle-button { display: grid; width: 36px; height: 36px; place-items: center; color: var(--green); background: transparent; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 16px; }
.circle-button:hover:not(:disabled) { color: var(--white); background: var(--green); border-color: var(--green); }
.circle-button:disabled { opacity: .35; cursor: default; }
.location-tabs { display: flex; gap: 9px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.location-tabs::-webkit-scrollbar { display: none; }
.location-tab { flex: 0 0 auto; padding: 8px 16px; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 99px; font-size: 11px; font-weight: 700; }
.location-tab.active, .location-tab:hover { color: var(--white); background: var(--green); border-color: var(--green); }
.provider-avatar-mini { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; color: var(--white); background: var(--green); border-radius: 50%; font-size: 8px; font-weight: 800; letter-spacing: .04em; }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: 104px; }
.editorial-card { position: relative; min-height: 345px; overflow: hidden; padding: 43px 45px; color: var(--white); border-radius: 16px; }
.editorial-copy { position: relative; z-index: 1; max-width: 270px; }
.editorial-copy h2 { margin-bottom: 16px; font-size: 2.65rem; }
.editorial-copy p:not(.eyebrow) { margin-bottom: 24px; color: var(--overlay-white-80); font-size: 12px; line-height: 1.65; }
.editorial-green { background: var(--green-700); }
.editorial-blue { background: var(--blue); }
.light-button { display: inline-flex; align-items: center; gap: 17px; padding: 0; color: var(--white); background: transparent; border: 0; font-size: 11px; font-weight: 800; }
.light-button:hover { color: var(--yellow-pale); }
.editorial-sun { position: absolute; right: -25px; bottom: -75px; width: 275px; height: 275px; border: 38px solid rgba(245,201,75,.78); border-radius: 50%; box-shadow: 0 0 0 54px rgba(245,201,75,.1); }
.editorial-sun::after { position: absolute; right: -11px; top: -89px; width: 80px; height: 210px; background: rgba(3,54,40,.3); border-radius: 50%; transform: rotate(36deg); content: ""; }
.editorial-palm { position: absolute; right: 35px; bottom: -58px; color: rgba(255,255,255,.17); font-size: 260px; font-family: Georgia, serif; line-height: 1; transform: rotate(-28deg); }
.concierge-banner { position: relative; display: flex; width: min(1180px, calc(100% - 48px)); align-items: center; gap: 30px; margin: 0 auto 107px; padding: 43px 58px; color: var(--white); background: var(--green-dark); border-radius: 17px; overflow: hidden; }
.concierge-banner::after { position: absolute; right: -55px; bottom: -150px; width: 430px; height: 430px; border: 60px solid rgba(238,119,75,.13); border-radius: 50%; content: ""; }
.concierge-icon { display: grid; width: 63px; height: 63px; flex: 0 0 63px; place-items: center; color: var(--yellow); background: rgba(255,255,255,.1); border: 1px solid rgba(245,201,75,.44); border-radius: 50%; font-size: 27px; }
.concierge-banner > div:nth-child(2) { position: relative; z-index: 1; flex: 1; }
.concierge-banner h2 { margin-bottom: 11px; font-size: 2.55rem; }
.concierge-banner p:not(.eyebrow) { max-width: 525px; margin-bottom: 0; color: var(--overlay-white-70); font-size: 12px; }
.concierge-banner .light-button { position: relative; z-index: 1; flex: 0 0 auto; padding: 13px 17px; border: 1px solid var(--overlay-white-35); border-radius: 8px; }
.steps-section { padding-bottom: 112px; }
.section-heading.centered { display: block; max-width: 530px; margin-right: auto; margin-left: auto; text-align: center; }
.section-lede { margin: 21px auto 0; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px; text-align: center; }
.steps-grid article { position: relative; padding: 26px 34px 0; border-top: 1px solid var(--line); }
.step-number { position: absolute; top: 14px; left: 0; color: var(--orange); font-family: Fraunces, Georgia, serif; font-size: 12px; }
.step-icon { width: 47px; height: 47px; display: grid; place-items: center; margin: 0 auto 19px; color: var(--green); background: var(--green-pale); border-radius: 50%; font-size: 21px; }
.steps-grid h3 { margin-bottom: 8px; font-size: 15px; }
.steps-grid p { margin: 0; color: var(--text-subtle); font-size: 11px; line-height: 1.6; }
.vendor-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 78px max(24px, calc((100% - 1180px) / 2)); background: var(--surface-sand); }
.vendor-cta h2 { margin: 0; font-size: 3rem; }
.vendor-cta > div:last-child { max-width: 345px; }
.vendor-cta p:not(.eyebrow) { margin-bottom: 22px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.dark-button { background: var(--green-dark); }
.full-width { width: 100%; }
.modal { width: min(730px, calc(100% - 28px)); max-height: min(790px, calc(100vh - 30px)); padding: 0; color: var(--ink); background: var(--cream); border: 0; border-radius: 16px; box-shadow: 0 25px 80px rgba(4, 41, 32, .3); }
.modal::backdrop { background: rgba(5, 33, 26, .68); backdrop-filter: blur(3px); }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 16px; display: grid; width: 35px; height: 35px; place-items: center; color: var(--green-dark); background: var(--overlay-white-70); border: 0; border-radius: 50%; font-size: 24px; line-height: 1; }
.modal-padding { padding: 48px 48px 43px; }
.modal h2 { max-width: 490px; margin-bottom: 12px; font-size: 3rem; }
.modal-lede { max-width: 460px; margin-bottom: 28px; color: var(--text-muted); font-size: 13px; }
.stacked-form { display: grid; gap: 15px; }
.stacked-form label { display: grid; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 800; }
.stacked-form input, .stacked-form select, .stacked-form textarea { width: 100%; padding: 12px 13px; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 7px; outline: 0; font-size: 12px; resize: vertical; }
.stacked-form input:focus, .stacked-form select:focus, .stacked-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(13,107,80,.12); }
.form-note { margin: -3px 0 0; color: var(--text-subtle); font-size: 9px; }
.listing-modal { width: min(820px, calc(100% - 28px)); }
.listing-detail-hero { position: relative; height: 270px; overflow: hidden; }
.listing-detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.listing-detail-hero::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 32, 24, .65), transparent 60%); content: ""; }
.listing-detail-hero-copy { position: absolute; z-index: 1; right: 30px; bottom: 23px; left: 30px; color: var(--white); }
.listing-detail-hero-copy .eyebrow { color: var(--yellow); }
.listing-detail-hero-copy h2 { margin: 0; font-size: 2.3rem; }
.detail-body { padding: 29px 35px 34px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 17px; }
.detail-meta span { padding: 6px 9px; color: var(--green); background: var(--green-pale); border-radius: 99px; font-size: 10px; font-weight: 700; }
.detail-columns { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; }
.detail-body h3 { margin-bottom: 8px; font-size: 14px; }
.detail-body p { color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.detail-points { display: grid; gap: 7px; margin: 17px 0 22px; padding: 0; list-style: none; color: var(--ink-soft); font-size: 11px; }
.detail-points li::before { margin-right: 8px; color: var(--orange); content: "✓"; font-weight: 800; }
.booking-box { padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 11px; }
.booking-box h3 { margin-bottom: 13px; }
.booking-box label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--text-subtle); font-size: 10px; font-weight: 700; }
.booking-box input, .booking-box select { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; }
.booking-total { display: flex; align-items: center; justify-content: space-between; margin: 14px 0; padding-top: 13px; border-top: 1px solid var(--line); font-size: 11px; }
.booking-total strong { color: var(--green-dark); font-size: 18px; }
.booking-box .dark-button { width: 100%; }
.booking-note { margin: 9px 0 0; color: var(--text-subtle); font-size: 9px; line-height: 1.45; }
.trip-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; }
.trip-card strong, .trip-card small { display: block; }
.trip-card strong { font-size: 12px; }
.trip-card small { margin-top: 3px; color: var(--text-subtle); font-size: 10px; }
.trip-status { padding: 5px 8px; color: var(--green); background: var(--green-pale); border-radius: 99px; font-size: 9px; font-weight: 800; }
.empty-trips { padding: 24px 0 5px; color: var(--text-muted); font-size: 12px; }

/* Shown when a search matches nothing. It has to read as a next step, not a wall. */
.no-results {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.no-results-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--orange);
  background: var(--surface-warm);
  border-radius: var(--radius-round);
  font-size: 24px;
}
.no-results h3 { margin: 0; font-size: var(--text-xl); }
.no-results p { max-width: 46ch; margin: 0; color: var(--text-muted); font-size: var(--text-base); line-height: 1.6; }
.no-results-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.outline-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  color: var(--green-800);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 800;
}
.outline-button:hover { background: var(--surface-mint); border-color: var(--green-700); }