:root {
  --ink: #0e2433;
  --paper: #f2f5f3;
  --sea: #1f6f78;
  --flare: #ff6b2c;
  --primary: rgb(13, 110, 253);
  --primary-hover: rgb(11, 94, 215);
  --mist: #dfe7e6;

  --ink-70: rgb(14 36 51 / 0.72);
  --ink-12: rgb(14 36 51 / 0.12);
  --paper-70: rgb(242 245 243 / 0.72);
  --paper-15: rgb(242 245 243 / 0.15);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius: 1rem;
  --radius-sm: 0.6rem;
  --container: 88rem;
  --header-h: 5.5rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-stretch: 112%;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.5rem 1rem; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--flare); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) { .container { padding-inline: 1.5rem; } }

.icon {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 1.6rem; height: 1.6rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 600 0.95rem/1 var(--font-body);
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: 1rem 1.5rem; font-size: 1rem; }
.btn-flare { background: var(--primary); color: #fff; }
.btn-flare:hover { background: var(--primary-hover); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sea { background: var(--sea); color: #fff; }
.btn-sea:hover { background: #185d65; color: #fff; }
.btn-save { background: #1e9e50; color: #fff; }
.btn-save:hover { background: #187f40; color: #fff; }

.text-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 2rem; font-weight: 600; color: var(--sea); text-decoration: none;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background:
    linear-gradient(rgb(242 245 243 / 0.78), rgb(242 245 243 / 0.72)),
    url("/images/br-header.webp") center 69% / cover no-repeat;
  background-color: var(--paper);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--ink-12); }

.share-button { padding: 0.7rem 1rem; border: 1px solid rgb(14 36 51 / 0.18); background: #3ccfcf; color: var(--ink); cursor: pointer; box-shadow: 0 5px 16px rgb(14 36 51 / 0.2); }
.share-button:hover { border-color: var(--ink); background: #63dada; color: var(--ink); box-shadow: 0 7px 20px rgb(14 36 51 / 0.26); }
.share-button .icon { width: 1.2rem; height: 1.2rem; stroke-width: 2.25; }

.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 800 1.2rem/1 var(--font-display); font-stretch: 112%;
  text-decoration: none; color: var(--ink); letter-spacing: -0.01em;
}
.brand-logo { display: block; height: 3rem; width: auto; }

.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1px solid var(--ink-12); background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.nav {
  position: absolute; z-index: 55; top: calc(100% - 0.5rem); right: max(1rem, calc((100vw - var(--container)) / 2));
  display: flex; flex-direction: column; gap: 0;
  width: min(14.5rem, calc(100vw - 2rem)); max-height: calc(100dvh - var(--header-h) - 1rem);
  padding: 0.65rem 0.8rem 0.85rem;
  overflow-y: auto;
  border: 1px solid var(--ink-12); border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 20px 45px rgb(14 36 51 / 0.28);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav a:not(.btn) {
  color: var(--ink); font: 600 1rem/1.3 var(--font-body); font-stretch: normal;
  text-align: right; text-decoration: none; padding: 0.85rem 0; border-bottom: 1px solid var(--ink-12);
}
.nav-directory-trigger { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink-12); }
.nav .nav-directory-trigger > a { flex: 1; border: 0; }
.nav-directory-trigger button { display: inline-grid; width: 2.5rem; padding: 0; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.nav-directory-trigger button span { width: 0.55rem; height: 0.55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.18s; }
.nav-directory.is-open .nav-directory-trigger button span { transform: translateY(0.15rem) rotate(225deg); }
.nav-directory-dropdown { display: none; padding: 0.25rem 0 0.45rem; }
.nav-directory.is-open .nav-directory-dropdown { display: flex; flex-direction: column; }
.nav .nav-directory-dropdown a:not(.btn) { padding: 0.65rem 0.75rem; border: 0; border-radius: var(--radius-sm); color: var(--ink-70); font-size: 0.88rem; font-weight: 500; }
.nav .nav-directory-dropdown a:not(.btn):hover { background: var(--mist); color: var(--ink); }
.nav-actions { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 0.65rem; margin-top: 0.85rem; }
.nav-actions > .btn { width: 100%; }
.nav-cta { align-self: auto; }
.nav .nav-account { display: inline-flex; flex: 0 0 2.75rem; align-items: center; justify-content: center; align-self: center; width: 2.75rem; height: 2.75rem; padding: 0; overflow: hidden; border: 1px solid var(--ink-12); border-radius: 50%; background: var(--mist); color: var(--ink); font-size: 0; line-height: 0; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.nav-account > .material-symbols-outlined { display: block; flex: none; font-size: 1.65rem; line-height: 1; }
.nav .nav-account:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
.nav .nav-account.is-authenticated { background: var(--sea); color: #fff; }
.nav-user-menu { position: relative; }
.nav-user-menu summary { list-style: none; cursor: pointer; }
.nav-user-menu summary::-webkit-details-marker { display: none; }
.nav-user-menu[open] .nav-account { border-color: var(--primary); box-shadow: 0 0 0 3px rgb(13 110 253 / 0.18); }
.nav-user-dropdown { position: absolute; z-index: 60; top: calc(100% + 0.65rem); right: 0; width: 11rem; padding: 0.45rem; border: 1px solid var(--ink-12); border-radius: 0.8rem; background: var(--paper); box-shadow: 0 18px 45px -22px rgb(14 36 51 / 0.6); }
.nav-user-dropdown::before { content: ""; position: absolute; top: -0.35rem; right: 1rem; width: 0.65rem; height: 0.65rem; border-top: 1px solid var(--ink-12); border-left: 1px solid var(--ink-12); background: var(--paper); transform: rotate(45deg); }
.nav .nav-user-dropdown a:not(.btn), .nav-user-dropdown button { display: flex; width: 100%; align-items: center; padding: 0.7rem 0.8rem; border: 0; border-radius: 0.55rem; background: transparent; color: var(--ink); font: 500 0.9rem/1.2 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.nav .nav-user-dropdown a:not(.btn):hover, .nav-user-dropdown button:hover { background: var(--mist); color: var(--ink); }
.nav-user-dropdown form { margin: 0; padding-top: 0.25rem; border-top: 1px solid var(--ink-12); }

@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav {
    position: static; flex-direction: row; align-items: center; gap: clamp(0.75rem, 1.5vw, 1.5rem);
    width: auto; height: auto; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none;
  }
  .nav a:not(.btn) {
    font: 500 0.95rem/1 var(--font-body); padding: 0; border: 0; color: var(--ink-70); text-align: left;
    transition: color 0.2s ease;
  }
  .nav a:not(.btn):hover { color: var(--ink); }
  .nav-directory { position: relative; }
  .nav-directory-trigger { align-items: center; gap: 0.3rem; border: 0; }
  .nav-directory-trigger button { width: 1.5rem; height: 1.5rem; border-radius: 50%; }
  .nav-directory-trigger button:hover { background: var(--mist); }
  .nav-directory-trigger button span { width: 0.42rem; height: 0.42rem; }
  .nav-directory-dropdown { position: absolute; z-index: 70; top: calc(100% + 0.65rem); left: 50%; width: 13rem; padding: 0.45rem; border: 1px solid var(--ink-12); border-radius: 0.8rem; background: #fff; box-shadow: 0 18px 45px -22px rgb(14 36 51 / 0.6); transform: translateX(-50%); }
  .nav-directory-dropdown::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 0.7rem; }
  .nav-directory:hover .nav-directory-dropdown, .nav-directory:focus-within .nav-directory-dropdown, .nav-directory.is-open .nav-directory-dropdown { display: flex; flex-direction: column; }
  .nav .nav-directory-dropdown a:not(.btn) { padding: 0.7rem 0.8rem; border-radius: 0.55rem; color: var(--ink); font: 500 0.9rem/1.2 var(--font-body); }
  .nav-actions { flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 0; }
  .nav-actions > .btn { width: auto; }
  .nav .nav-account { align-self: auto; padding: 0; border: 1px solid var(--ink-12); color: var(--ink); }
  .nav .nav-account:hover { border-color: var(--primary); background: var(--primary); color: #fff; }
  .nav .nav-account.is-authenticated { background: var(--sea); color: #fff; }
  .nav-cta { margin-top: 0; }
}

/* Eyebrows */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 0.8rem/1 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sea);
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--flare); }
.eyebrow-light { color: var(--mist); }

/* Hero */
.hero { padding-block: 2.5rem 4rem; overflow: hidden; }
.hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) {
  .hero { padding-block: 4rem 85px; }
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.hl {
  color: var(--sea);
  background-image: linear-gradient(var(--flare), var(--flare));
  background-repeat: no-repeat;
  background-size: 100% 0.14em;
  background-position: 0 92%;
}

.lede { margin-top: 1.5rem; font-size: 1.125rem; color: var(--ink-70); max-width: 34rem; }

.store-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-points {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
  font-size: 0.925rem; font-weight: 500; color: var(--ink-70);
}
.hero-points li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-points .icon { color: var(--sea); }

.hero-visual { position: relative; padding: 0 0 2rem 0; }
.hero-photo {
  width: 100%; aspect-ratio: 5 / 6; object-fit: cover;
  border-radius: 1.5rem;
  margin-left: auto;
  max-width: 30rem;
}
@media (min-width: 600px) { .hero-visual { padding-left: 4rem; } }

.phone {
  position: absolute; left: 0; bottom: 0;
  width: min(15.5rem, 64%);
  padding: 0.55rem;
  background: var(--ink);
  border-radius: 2rem;
  box-shadow: 0 30px 60px -20px rgb(14 36 51 / 0.55);
}
.phone-screen {
  background: var(--paper);
  border-radius: 1.5rem;
  padding: 1.1rem 1rem 1rem;
}
.phone-top { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.85rem; }
.phone-label { font: 800 1.05rem/1.1 var(--font-display); font-stretch: 112%; }
.phone-boat { font-size: 0.75rem; color: var(--ink-70); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.checklist li {
  position: relative;
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.8rem; line-height: 1.3; font-weight: 500;
  padding: 0.5rem 0.6rem;
  background: var(--mist);
  border-radius: 0.6rem;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.checklist li::before {
  content: ""; flex: none;
  width: 1rem; height: 1rem; border-radius: 0.3rem;
  border: 2px solid var(--ink-70);
  background-repeat: no-repeat; background-position: center; background-size: 0.7rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.checklist li.is-done { color: var(--ink-70); background: transparent; }
.checklist li.is-done::before {
  background-color: var(--sea); border-color: var(--sea);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f5f3' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.phone-progress { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.35rem; }
.progress-track { height: 0.4rem; border-radius: 999px; background: var(--mist); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--flare); border-radius: inherit; transition: width 0.5s ease; }
.progress-text { font-size: 0.7rem; font-weight: 600; color: var(--ink-70); }

.slip-tag {
  position: absolute; right: 1rem; top: 1rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.6rem 0.85rem;
  background: var(--paper);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px -12px rgb(14 36 51 / 0.45);
}
.slip-k { font: 800 0.85rem/1.1 var(--font-display); font-stretch: 112%; }
.slip-v { font-size: 0.72rem; color: var(--ink-70); }

/* Sections */
.section { padding-block: 4.5rem; }
.home-page .section { padding-block: 3.5rem; }
.home-page #features { padding-top: 2rem; }
@media (min-width: 960px) {
  .section { padding-block: 6.5rem; }
  .home-page .section { padding-block: 5rem; }
  .home-page #features { padding-top: 3rem; }
}
.section-tint { background: var(--mist); }

.section-head { max-width: 42rem; margin-bottom: 2.5rem; }
.section-head h2, .business-copy h2, .cta h2 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800; letter-spacing: -0.025em;
}

/* Tabs */
.tab-list {
  position: relative;
  display: inline-flex;
  padding: 0.3rem;
  border-radius: 999px;
  background: var(--mist);
  margin-bottom: 2.5rem;
}
.tab-list [role="tab"] {
  position: relative; z-index: 1;
  font: 600 0.95rem/1 var(--font-body);
  padding: 0.8rem 1.25rem;
  border: 0; background: none; color: var(--ink-70);
  border-radius: 999px; cursor: pointer;
  transition: color 0.25s ease;
}
.tab-list [role="tab"][aria-selected="true"] { color: var(--paper); }
.tab-indicator {
  position: absolute; top: 0.3rem; bottom: 0.3rem; left: 0;
  border-radius: 999px; background: var(--ink);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tab-panel { animation: panel-in 0.4s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.feature-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px;
  background: var(--ink-12);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: 1.75rem;
  background: var(--paper);
  transition: background-color 0.25s ease;
}
.feature:hover { background: color-mix(in srgb, var(--paper) 50%, var(--mist)); }
.feature .icon-lg { color: var(--sea); margin-bottom: 0.5rem; }
.feature h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; }
.feature p { color: var(--ink-70); font-size: 0.975rem; }

/* Directory */
.dir-grid { display: grid; gap: 1.5rem; }
@media (min-width: 680px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dir-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.dir-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
}
.dir-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dir-card:hover img { transform: scale(1.04); }
.dir-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; position: relative; background: var(--paper); }
.dir-kicker { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea); }
.dir-body h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.dir-body p:last-child { color: var(--ink-70); font-size: 0.975rem; }

/* Boat listings */
.section-head-split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }

.boat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 600px) { .boat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .boat-grid { grid-template-columns: repeat(4, 1fr); } }

.boat-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.boat-card:hover { border-color: transparent; box-shadow: 0 20px 40px -24px rgb(14 36 51 / 0.45); }
.boat-media { position: relative; overflow: hidden; }
.boat-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.boat-card:hover .boat-media img { transform: scale(1.05); }
.boat-badge {
  position: absolute; left: 0.75rem; top: 0.75rem;
  font-size: 0.72rem; font-weight: 600;
  padding: 0.35rem 0.6rem; border-radius: 999px;
  background: var(--paper); color: var(--ink);
}
.boat-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem 1.15rem 1.25rem; }
.boat-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.boat-price { font: 800 1.45rem/1.1 var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; }
.boat-seller { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea); white-space: nowrap; }
.boat-title { font-family: var(--font-body); font-stretch: normal; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.boat-specs { font-size: 0.875rem; color: var(--ink-70); }
.boat-loc { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem; font-size: 0.875rem; color: var(--ink-70); }
.boat-loc .icon { color: var(--flare); }

.quick-types {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 2rem; font-size: 0.925rem;
}
.quick-types span { font-weight: 600; margin-right: 0.25rem; }
.quick-types a {
  text-decoration: none; font-weight: 500;
  padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--mist);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.quick-types a:hover { background: var(--ink); color: var(--paper); }

/* Boat search page */
.nav a[aria-current="page"] { color: var(--ink); }
.search-hero { padding-block: 2.5rem 2rem; background: var(--mist); }
@media (min-width: 960px) { .search-hero { padding-block: 3.5rem 2.75rem; } }
.search-hero h1 { font-size: clamp(2.3rem, 6vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; }
.search-hero .lede { margin-top: 1rem; }
.directory-image-hero {
  --directory-hero-image: none;
  display: flex; min-height: 20rem; align-items: center;
  background:
    linear-gradient(90deg, rgb(7 28 45 / 0.92) 0%, rgb(14 36 51 / 0.76) 43%, rgb(14 36 51 / 0.28) 100%),
    var(--directory-hero-image) center / cover no-repeat;
  color: #fff;
}
.directory-image-hero h1 { color: #fff; text-shadow: 0 2px 14px rgb(0 0 0 / 0.42); }
.directory-image-hero .lede { max-width: 42rem; color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 8px rgb(0 0 0 / 0.45); }
.directory-image-hero .eyebrow { color: rgb(255 255 255 / 0.82); }
.directory-image-hero .eyebrow::before { background: #fff; }
.directory-image-hero .btn-flare { border: 1px solid rgb(255 255 255 / 0.3); box-shadow: 0 10px 26px rgb(0 0 0 / 0.25); }
.directory-hero-service-provider { --directory-hero-image: url("/images/service.webp"); background-position: center 55%; }
.directory-hero-boat-storage { --directory-hero-image: url("/images/storage.webp"); background-position: center 52%; }
.directory-hero-marina { --directory-hero-image: url("/images/dealer-broker.webp"); background-position: center 55%; }
.directory-hero-dealer-broker { --directory-hero-image: url("/images/destination.webp"); background-position: center 48%; }
.directory-hero-bodies-of-water { --directory-hero-image: url("/images/bodies-of-water.webp"); background-position: center 48%; }
@media (max-width: 700px) {
  .directory-image-hero { min-height: 18rem; background-image: linear-gradient(90deg, rgb(7 28 45 / 0.92), rgb(14 36 51 / 0.62)), var(--directory-hero-image); }
}

.search-bar {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.75rem; max-width: 40rem;
  padding: 0 1.1rem;
  background: var(--paper);
  border: 2px solid transparent;
  border-radius: 999px;
  transition: border-color 0.2s ease;
}
.search-bar:focus-within { border-color: var(--ink); }
.search-bar .icon { color: var(--ink-70); width: 1.25rem; height: 1.25rem; }
.search-bar input {
  flex: 1; min-width: 0; height: 3.4rem;
  border: 0; background: transparent; outline: none;
  font: 500 1rem var(--font-body); color: var(--ink);
}
.search-bar input::placeholder { color: var(--ink-70); }

.search-bar-split {
  flex-direction: column; align-items: stretch; gap: 0;
  max-width: 60rem; padding: 0.4rem;
  border-radius: var(--radius);
}
.search-field {
  display: flex; align-items: center; gap: 0.6rem;
  min-width: 0; padding: 0 0.8rem;
  border-radius: var(--radius-sm);
}
.search-field + .search-field { border-top: 1px solid var(--ink-12); }
.search-field input { height: 3.1rem; }
.search-field .icon-pin { color: var(--flare); }
.search-field-radius select {
  flex: 1; height: 3.1rem; padding-right: 1.6rem;
  border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2433' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.2rem center / 0.9rem no-repeat;
  font: 600 0.95rem var(--font-body); color: var(--ink);
  appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
}
.locate-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px;
  background: var(--mist); color: var(--ink); cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.locate-btn .icon { width: 1.1rem; height: 1.1rem; color: inherit; }
.locate-btn:hover { background: var(--ink); color: var(--paper); }
.locate-btn:focus-visible, .search-field-radius select:focus-visible { outline: 3px solid var(--flare); outline-offset: 2px; }
.locate-btn[aria-busy="true"] .icon { animation: locate-spin 1s linear infinite; }
@keyframes locate-spin { to { transform: rotate(360deg); } }
.search-submit { margin-top: 0.4rem; width: 100%; }

@media (min-width: 760px) {
  .search-bar-split { flex-direction: row; align-items: center; border-radius: 999px; padding: 0.35rem 0.35rem 0.35rem 0.4rem; }
  .search-field { flex: 1.2; }
  .search-field-loc { flex: 1.2; }
  .search-field-radius { flex: 0 0 11rem; }
  .search-field + .search-field { border-top: 0; border-left: 1px solid var(--ink-12); }
  .search-submit { margin-top: 0; width: auto; }
}

.loc-status { min-height: 1.4rem; margin-top: 0.6rem; font-size: 0.875rem; color: var(--ink-70); }
.loc-status.is-error { color: #b4361a; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.active-filters[hidden] { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem 0.4rem 0.85rem; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper); cursor: pointer;
  font: 500 0.85rem var(--font-body);
  transition: background-color 0.2s ease;
}
.pill .icon { width: 0.9rem; height: 0.9rem; color: var(--paper-70); }
.pill:hover { background: var(--sea); }
.pill:focus-visible { outline: 3px solid var(--flare); outline-offset: 2px; }
.active-filters .link-btn { margin-left: 0.35rem; }

.boat-loc span { min-width: 0; }
.boat-distance { margin-left: auto; padding-left: 0.5rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

.search-section { padding-block: 2rem 4.5rem; }
.search-layout { display: grid; gap: 2rem; align-items: start; }
.email-capture { margin-block: 1.5rem; padding: 1.5rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.email-capture h2 { margin-bottom: 0.5rem; font-size: clamp(1.25rem, 3vw, 1.65rem); }
.email-capture > p { color: var(--ink-70); }
.email-capture-form { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; }
.email-capture-form input[type="email"] { flex: 1 1 15rem; min-width: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
.email-capture .field-hint { margin-top: 0.75rem; }
.listing-alerts { display: grid; gap: 1rem; padding-block: 1rem 2.5rem; }
@media (min-width: 900px) { .listing-alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.category-links, .listing-links { content-visibility: auto; contain-intrinsic-size: auto 22rem; padding-block: 2.5rem; border-top: 1px solid var(--ink-12); background: var(--mist); }
.category-links-grid, .listing-links-grid { display: grid; gap: 2rem; }
.category-links h2, .listing-links h2 { margin-bottom: 0.8rem; font-size: 1.1rem; }
.category-links ul, .listing-links ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.category-links a, .listing-links a { color: var(--sea); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.category-links a:hover, .listing-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 720px) { .category-links-grid, .listing-links-grid { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 960px) { .search-layout { grid-template-columns: 17rem 1fr; gap: 2.5rem; } }

.filter-panel {
  position: fixed; inset: 0; z-index: 60;
  overflow-y: auto;
  background: var(--paper);
  padding: 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.filter-panel.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 960px) {
  .filter-panel {
    position: sticky; top: calc(var(--header-h) + 1.5rem); inset: auto; z-index: auto;
    overflow: visible;
    padding: 1.5rem;
    background: var(--paper);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    box-shadow: 0 24px 48px -32px rgb(14 36 51 / 0.45);
    opacity: 1; visibility: visible; transform: none;
  }
  .filter-done, .filter-toggle { display: none !important; }
}

.filters { display: flex; flex-direction: column; }
.filters > * + * { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-12); }
.filter-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; padding-bottom: 0.25rem; }
.filter-head h2 { font-size: 1.3rem; font-weight: 800; }
.filter-head .link-btn {
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: var(--mist); color: var(--ink);
  font-size: 0.8rem; text-align: center; text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.filter-head .link-btn:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.link-btn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 0.875rem var(--font-body); color: var(--sea);
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

.filter-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.directory-availability-filter { display: flex; align-items: center; gap: 0.45rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--mist); color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.directory-toggle { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem; border-radius: var(--radius-sm); background: var(--mist); color: var(--ink); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.directory-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.directory-toggle-track { position: relative; flex: 0 0 2.5rem; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: rgb(14 36 51 / 0.28); transition: background 0.18s; }
.directory-toggle-track::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(14 36 51 / 0.3); transition: transform 0.18s; }
.directory-toggle input:checked + .directory-toggle-track { background: var(--primary); }
.directory-toggle input:checked + .directory-toggle-track::after { transform: translateX(1.1rem); }
.directory-toggle input:focus-visible + .directory-toggle-track { outline: 3px solid rgb(13 110 253 / 0.25); outline-offset: 2px; }
.directory-inventory-filter { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); }
.directory-inventory-filter legend { margin-bottom: 0.15rem; font-size: 0.85rem; font-weight: 700; }
.directory-feature-filter { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.directory-feature-filter label { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; }
.directory-hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.directory-hero-content .btn { flex: none; text-align: center; }
@media (min-width: 800px) { .directory-hero-content { flex-direction: row; align-items: center; justify-content: space-between; } }
.save-search-panel { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ink-12); }
.save-search-panel .btn { width: 100%; }
.filters legend, .filters .legend { display: block; padding: 0; margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sea); }
.filter-group legend { margin-bottom: 0.6rem; }
.filter-group > .legend { margin-bottom: 0; }
.filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.filters input[type="search"],
.filters input[type="text"],
.filters input[type="number"],
.filters input:not([type]),
.filters select,
.sort select {
  width: 100%; height: 2.75rem;
  padding: 0 0.85rem;
  font: 500 0.925rem var(--font-body); color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm);
}
.filters input::placeholder { color: var(--ink-70); }
.filters select, .sort select {
  padding-right: 2rem;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2433' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.7rem center / 0.9rem no-repeat;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.filters input:hover, .filters select:hover, .sort select:hover { border-color: var(--ink-70); }
.filters input:focus, .filters select:focus, .sort select:focus {
  outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2);
}

.field-pair { display: flex; align-items: center; gap: 0.5rem; }
.field-pair label { flex: 1; min-width: 0; }
.field-pair > span { font-size: 0.85rem; color: var(--ink-70); }

.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip input, .segmented input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.8rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  background: var(--mist); color: var(--ink);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip em { font-style: normal; font-size: 0.75rem; color: var(--ink-70); }
.chip input:checked + span { background: var(--ink); color: var(--paper); }
.chip input:checked + span em { color: var(--paper-70); }
.chip input:focus-visible + span, .segmented input:focus-visible + span { outline: 3px solid var(--flare); outline-offset: 2px; }

.segmented { display: flex; padding: 0.25rem; border-radius: 999px; background: var(--mist); }
.segmented label { flex: 1; }
.segmented span {
  display: block; text-align: center; cursor: pointer;
  padding: 0.55rem 0.5rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-70);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.segmented input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 2px 6px -2px rgb(14 36 51 / 0.3); }

.filter-done { position: sticky; bottom: 0; width: 100%; }

.results { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.results-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.results-count strong { font: 800 1.2rem/1 var(--font-display); font-stretch: 112%; }
.results-count span { color: var(--ink-70); font-size: 0.85rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1rem; }
.pagination a { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; align-items: center; justify-content: center; padding: 0.55rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-weight: 600; text-decoration: none; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination a[aria-current="page"] { border-color: var(--primary); background: var(--primary); color: #fff; }
.results-tools { display: flex; align-items: center; gap: 0.5rem; }
.sort select { width: auto; border-radius: 999px; }
.filter-toggle { padding-block: 0.6rem; border-width: 1px; border-color: var(--ink-12); }
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.35rem;
  border-radius: 999px; background: var(--flare); color: var(--ink);
  font-size: 0.72rem; font-weight: 700;
}
.filter-badge[hidden] { display: none; }

@media (min-width: 1040px) { .boat-grid-results { grid-template-columns: repeat(3, 1fr); } }

.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: 2.5rem 1.75rem; border-radius: var(--radius); background: var(--mist);
}
.empty-state[hidden] { display: none; }
.empty-state h2 { font-size: 1.5rem; font-weight: 800; }
.empty-state p { color: var(--ink-70); }
.empty-state .btn { margin-top: 0.5rem; }

.sell-cta {
  display: flex; flex-direction: column; gap: 1.25rem;
  margin-top: 1.5rem; padding: 1.75rem;
  border-radius: var(--radius); background: var(--ink); color: var(--paper);
}
.sell-cta h2 { font-size: 1.5rem; font-weight: 800; }
.sell-cta p { margin-top: 0.4rem; color: var(--paper-70); max-width: 32rem; }
.sell-cta .btn-flare:hover { background: var(--primary-hover); color: #fff; }
.sell-cta .btn { align-self: flex-start; }
@media (min-width: 720px) {
  .sell-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 2.25rem; }
  .sell-cta .btn { align-self: center; flex: none; }
}

/* Business */
.section-dark { background: var(--ink); color: var(--paper); }
.business-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .business-grid { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.business-copy p { margin-top: 1.25rem; color: var(--paper-70); font-size: 1.075rem; max-width: 30rem; }
.business-copy .btn { margin-top: 2rem; }
.section-dark .btn-flare:hover { background: var(--primary-hover); color: #fff; }

.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--paper-15);
}
.price-row:last-child { border-bottom: 1px solid var(--paper-15); }
.price-row h3 { font-size: 1.2rem; font-weight: 800; }
.price-row div p { margin-top: 0.3rem; color: var(--paper-70); font-size: 0.925rem; }
.price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.price strong {
  font: 800 clamp(2rem, 5vw, 2.75rem)/1 var(--font-display); font-stretch: 112%;
  color: var(--flare); letter-spacing: -0.02em;
}
.price span { font-size: 0.8rem; color: var(--paper-70); margin-top: 0.3rem; }

/* FAQ */
.faq-wrap { max-width: 50rem; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ink-12); }
.faq details { border-bottom: 1px solid var(--ink-12); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  list-style: none; cursor: pointer;
  padding: 1.35rem 0;
  font: 600 1.075rem/1.4 var(--font-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2433' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--flare); }
.faq details p { padding-bottom: 1.35rem; color: var(--ink-70); max-width: 40rem; }

/* CTA */
.cta { padding-block: 0 4.5rem; }
.cta-inner {
  display: flex; flex-direction: column; gap: 2rem;
  padding: 2.5rem 1.75rem;
  border-radius: 1.5rem;
  background:
    linear-gradient(100deg, rgb(7 34 55 / 0.9) 0%, rgb(13 110 253 / 0.62) 52%, rgb(14 36 51 / 0.5) 100%),
    url("/images/br-header.webp") center 58% / cover no-repeat;
  color: #fff;
  box-shadow: 0 28px 65px -35px rgb(14 36 51 / 0.8);
}
.cta-inner h2 { color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.35); }
.cta-inner p { margin-top: 0.75rem; max-width: 30rem; color: rgb(255 255 255 / 0.92); font-size: 1.075rem; text-shadow: 0 1px 8px rgb(0 0 0 / 0.4); }
.cta .store-buttons { margin-top: 0; }
.cta .store-btn { border: 1px solid rgb(255 255 255 / 0.22); box-shadow: 0 10px 24px rgb(0 0 0 / 0.2); }

.legal-page {
  max-width: 60rem;
  margin: 2.5rem auto;
  padding-inline: 1.25rem;
}
.legal-page header, .legal-page p, .legal-page ul { margin-bottom: 1rem; }
.legal-page h2 { margin: 2rem 0 1rem; }
.legal-page h3 { margin: 1.5rem 0 0.75rem; }
.legal-page li + li { margin-top: 0.4rem; }
@media (min-width: 900px) {
  .cta { padding-bottom: 6.5rem; }
  .cta-inner { flex-direction: row; align-items: center; justify-content: space-between; padding: 3.5rem; }
}

.store-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 1.25rem 0.7rem 1rem;
  border-radius: 0.85rem;
  background: var(--ink); color: var(--paper);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.store-btn img { display: block; width: 1.5rem; height: 1.5rem; object-fit: contain; }
.store-btn span { display: flex; flex-direction: column; font: 600 1.05rem/1.15 var(--font-body); }
.store-btn small { font-size: 0.7rem; font-weight: 500; color: var(--paper-70); }

/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: 2.5rem;
  color: var(--paper);
  background:
    linear-gradient(180deg, rgb(14 36 51 / 0.82) 0%, rgb(31 111 120 / 0.78) 100%),
    url("/images/br-header.webp") center 69% / cover no-repeat;
  background-color: var(--sea);
}
.footer-inner { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 800px) { .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer .brand { color: var(--paper); }
.site-footer .brand-logo { filter: brightness(0) invert(1); }
.brand-small { font-size: 1rem; }
.brand-small .brand-logo { height: 2.5rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer-nav a { text-decoration: none; font-size: 0.925rem; color: rgb(242 245 243 / 0.85); font-weight: 500; }
.footer-nav a:hover { color: #fff; }
.copyright { font-size: 0.875rem; color: rgb(242 245 243 / 0.75); }

/* Listing card link */
.boat-card { position: relative; }
.boat-link { color: inherit; text-decoration: none; }
.boat-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.boat-link:focus-visible { outline: none; }
.boat-card:has(.boat-link:focus-visible) { outline: 3px solid var(--flare); outline-offset: 3px; }
.boat-card:hover .boat-title { text-decoration: underline; text-underline-offset: 3px; }

/* Detail page */
.detail { padding-top: calc(var(--header-h) + 1.25rem); padding-bottom: 5rem; }
.detail-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 0.5rem 1.5rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.925rem; color: var(--ink); text-decoration: none; }
.back-link:hover { color: var(--sea); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--ink-70); }
.breadcrumb li + li::before { content: "/"; margin-right: 0.35rem; color: var(--ink-12); }
.breadcrumb li:empty { display: none; }
.breadcrumb a { color: var(--ink-70); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

.detail-layout { display: flex; flex-direction: column; gap: 2rem; }
.detail-layout[hidden] { display: none; }
@media (min-width: 960px) {
  .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 3rem; align-items: start; }
}
.detail-content { display: flex; flex-direction: column; gap: 2.5rem; min-width: 0; }
.detail-media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--mist); aspect-ratio: 4 / 3; touch-action: pan-y; cursor: grab; user-select: none; }
.detail-media.is-dragging { cursor: grabbing; }
.detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.gallery-nav { position: absolute; z-index: 2; top: 0; bottom: 0; width: 22%; padding: 0 1rem; border: 0; background: transparent; color: #fff; font: 400 3.5rem/1 var(--font-body); text-shadow: 0 2px 8px rgb(0 0 0 / 0.8); cursor: pointer; opacity: 0.8; transition: opacity 0.15s, background 0.15s; }
.gallery-nav:hover, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.gallery-nav-prev { left: 0; text-align: left; }
.gallery-nav-next { right: 0; text-align: right; }
.gallery-nav-prev:hover, .gallery-nav-prev:focus-visible { background: linear-gradient(90deg, rgb(0 0 0 / 0.38), transparent); }
.gallery-nav-next:hover, .gallery-nav-next:focus-visible { background: linear-gradient(270deg, rgb(0 0 0 / 0.38), transparent); }
.boat-gallery { display: flex; flex-direction: column; gap: 0.75rem; }
.gallery-thumbnails { display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.15rem 0.15rem 0.4rem; scrollbar-width: thin; }
.gallery-thumbnail { flex: 0 0 5.25rem; width: 5.25rem; height: 4rem; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--mist); cursor: pointer; opacity: 0.72; }
.gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbnail:hover { opacity: 1; }
.gallery-thumbnail[aria-pressed="true"] { border-color: var(--primary); opacity: 1; box-shadow: 0 0 0 2px rgb(13 110 253 / 0.18); }
.gallery-thumbnail:focus-visible { outline: 3px solid rgb(13 110 253 / 0.35); outline-offset: 2px; }
.detail-media .boat-badge { top: 1rem; left: 1rem; }
.detail-head { display: flex; flex-direction: column; gap: 0.6rem; }
.detail-head h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.05; text-wrap: balance; }
.detail-loc { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-70); }
.detail-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.detail-price { font-family: var(--font-display); font-stretch: 112%; font-weight: 800; font-size: clamp(1.75rem, 3.5vw, 2.25rem); color: var(--ink); }
.share-btn { display: inline-flex; align-items: center; gap: 0.45rem; }

.detail-section { display: flex; flex-direction: column; gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--ink-12); }
.detail-section h2 { font-size: 1.35rem; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--ink-12); border: 1px solid var(--ink-12); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-grid div { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem; background: var(--paper); }
.spec-grid dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-70); }
.spec-grid dd { margin: 0; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.detail-desc { max-width: 65ch; line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.formatted-content > :first-child { margin-top: 0; }
.formatted-content > :last-child { margin-bottom: 0; }
.formatted-content p, .formatted-content ul, .formatted-content ol { margin: 0.8rem 0; }
.formatted-content ul, .formatted-content ol { padding-left: 1.4rem; }
.formatted-content a { color: var(--sea); text-decoration: underline; text-underline-offset: 0.15em; }
.formatted-content img { max-width: 100%; height: auto; }
.feature-heading { font-family: var(--font-body); font-stretch: normal; font-size: 1rem; font-weight: 600; margin-top: 0.5rem; }
.feature-list { display: grid; grid-template-columns: 1fr; gap: 0.6rem 1.5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .feature-list { grid-template-columns: 1fr 1fr; } }
.feature-list li { display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.45; }
.feature-list li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.45rem; border-radius: 50%; background: var(--flare); }

.contact-card { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: 0 24px 48px -32px rgb(14 36 51 / 0.45); scroll-margin-top: calc(var(--header-h) + 1rem); }
@media (min-width: 960px) { .contact-card { position: sticky; top: calc(var(--header-h) + 1.25rem); } }
.contact-card h2 { font-size: 1.3rem; }
.seller { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink-12); }
.seller-business { flex-direction: column; align-items: flex-start; }
.seller-avatar { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 700; letter-spacing: 0.02em; }
.seller-photo { display: block; width: 100%; max-width: 20rem; height: auto; max-height: 8rem; padding: 0.25rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; object-fit: contain; }
.seller-photo[hidden] { display: none; }
.seller-name { font-weight: 600; color: var(--ink); }
.seller-kind { font-size: 0.85rem; color: var(--ink-70); }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form[hidden] { display: none; }
.contact-form .field { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-form label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.contact-form .optional { font-weight: 400; color: var(--ink-70); }
.contact-form input,
.contact-form textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; transition: border-color 0.15s, box-shadow 0.15s; }
.contact-form textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }
.contact-form [aria-invalid="true"] { border-color: #b4321f; }
.field-error { font-size: 0.8rem; color: #b4321f; min-height: 0; }
.field-error:empty { display: none; }
.quick-asks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.quick-asks button { font: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--ink-12); background: var(--mist); color: var(--ink); cursor: pointer; }
.quick-asks button:hover { border-color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 0.875rem; color: var(--ink-70); }
.form-status:empty { display: none; }
.form-status.is-error { color: #b4321f; }
.contact-submit { width: 100%; justify-content: center; }
.contact-submit:disabled { opacity: 0.7; cursor: progress; }
.form-fine { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--ink-70); }
.contact-success { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-block: 0.5rem; outline: none; }
.contact-success[hidden] { display: none; }
.contact-success .icon-lg { width: 2.5rem; height: 2.5rem; color: var(--sea); }
.contact-success h3 { font-size: 1.25rem; }
.contact-success p { line-height: 1.55; color: var(--ink-70); }

.detail-similar { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--ink-12); }
.detail-similar[hidden] { display: none; }
.detail-similar h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.detail-missing { margin-block: 3rem; }
.detail-missing h1 { font-size: 1.75rem; }

.contact-bar { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--ink-12); box-shadow: 0 -12px 30px -20px rgb(14 36 51 / 0.5); transition: transform 0.25s ease; }
.contact-bar[hidden] { display: none; }
.contact-bar.is-hidden { transform: translateY(110%); }
.contact-bar-info { min-width: 0; }
.contact-bar-price { font-weight: 800; color: var(--ink); }
.contact-bar-title { font-size: 0.8rem; color: var(--ink-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 960px) { .contact-bar { display: none !important; } }
@media (max-width: 959px) { .detail-page .site-footer { padding-bottom: 6rem; } }

.sell { position: relative; padding-block: clamp(3rem, 7vw, 6rem); overflow: hidden; }
.admin-page .sell { padding-top: clamp(1rem, 3vw, 2rem); }
.admin-page .directory-toggle { margin-top: 0.75rem; }
.admin-tabs { display: flex; gap: 0.25rem; margin: 1.25rem 0; border-bottom: 1px solid var(--ink-12); }
.admin-tabs a { padding: 0.55rem 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--ink-70); text-decoration: none; border-bottom: 2px solid transparent; }
.admin-tabs a:hover { color: var(--sea); }
.admin-tabs a.is-active { color: var(--ink); border-bottom-color: var(--flare); }
.admin-billing .sell > .container, .admin-plans .sell > .container { max-width: 90%; }
.admin-billing .sell > .container > .sell-card, .admin-plans .sell > .container > .sell-card { max-width: none; }
.admin-billing-search { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.admin-billing-search .search-field { flex: 0 1 22rem; }
.admin-billing-search .search-field input { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--paper); border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); padding: 0.55rem 0.85rem; }
.admin-billing-search .search-field input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }

/* User billing page */
.billing-page { padding-top: 1.5rem; }
.billing-page .billing-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--ink-12); }
.billing-page .billing-actions { border-top: 0; padding-top: 0; }
.billing-status-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; }
.billing-status-badge.is-active { background: #e8f5e9; color: #1e7e34; }
.billing-status-badge.is-warning { background: #fff8e1; color: #9c6b00; }
.billing-status-badge.is-error { background: #fdecea; color: #b4321f; }
.billing-status-badge.is-muted { background: var(--mist); color: var(--ink-70); }
.billing-plans { display: grid; gap: 1rem; margin-top: 1rem; }
.billing-onetime-heading { margin-top: 1.75rem; margin-bottom: 0; font-size: 1rem; color: var(--ink-60); font-weight: 600; }
.billing-onetime-heading + .billing-plans { margin-top: 0.5rem; }

.plan-toast { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: rgb(255 255 255 / 0.7); animation: plan-toast-out 5s ease forwards; }
@keyframes plan-toast-out { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.billing-plan { border: 1px solid var(--ink-12); border-radius: var(--radius-sm); padding: 1.25rem; background: rgb(255 255 255 / 0.5); }
.billing-plan h3 { margin-bottom: 0.35rem; }
.billing-plan-price { font-weight: 700; color: var(--sea); margin-bottom: 0.5rem; }
.billing-plan form { margin-top: 0.75rem; }
.billing-plan-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.billing-qty { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-70); }
.billing-qty input { width: 5rem; font: inherit; padding: 0.45rem 0.6rem; border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.billing-qty input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }
.billing-secure-note { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; margin-bottom: 2rem; font-size: 0.85rem; color: var(--ink-70); }
.billing-stripe-logo { flex: 0 0 auto; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; color: #635BFF; text-decoration: none; }
.billing-stripe-logo:hover { text-decoration: underline; text-underline-offset: 3px; }
.sell::before { content: ""; position: absolute; z-index: -1; top: -18rem; right: -14rem; width: 38rem; height: 38rem; border-radius: 50%; background: rgb(31 111 120 / 0.08); }
.sell-intro { max-width: 48rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sell-intro .eyebrow { margin-bottom: 0.35rem; }
.sell-intro h1 { max-width: 44rem; margin-top: 0; font-size: clamp(2.25rem, 5.5vw, 4rem); letter-spacing: -0.035em; }
.sell-intro > p:last-child { max-width: 42rem; margin-top: 1.15rem; font-size: 1.075rem; color: var(--ink-70); }
.sell-layout { display: grid; gap: 1.5rem; align-items: start; }
.sell-card, .sell-panel { border: 1px solid var(--ink-12); border-radius: 1.25rem; background: rgb(255 255 255 / 0.48); box-shadow: 0 24px 60px -42px rgb(14 36 51 / 0.55); }
.sell-card { padding: clamp(1.35rem, 4vw, 2.25rem); }
.sell-card > h1 { margin-top: 0.45rem; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.sell-card > h2, .sell-card-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.sell-card-lead, .sell-card > h1 + p { margin-top: 0.65rem; color: var(--ink-70); }
.sell-card > .contact-form { margin-top: 1.5rem; }
.sell-card .contact-form > .btn { align-self: flex-start; }
.sell > .container > .sell-card { max-width: 38rem; margin-inline: auto; }
.sell-card > .account-alert-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ink-12); }
.sell-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink-12); }
.sell-aside { display: flex; flex-direction: column; gap: 1rem; }
.sell-panel { padding: 1.35rem; }
.sell-panel h2 { font-size: 1.15rem; }
.sell-panel > p { margin-top: 0.65rem; font-size: 0.9rem; color: var(--ink-70); }
.account-alert { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; padding: 1.15rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius); }
.account-alert.is-warning { border-color: rgb(255 107 44 / 0.35); background: rgb(255 107 44 / 0.1); }
.account-alert.is-info { border-color: rgb(31 111 120 / 0.3); background: rgb(31 111 120 / 0.09); }
.account-alert > .icon { margin-top: 0.1rem; color: var(--flare); }
.account-alert-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.55rem; min-width: 0; }
.account-alert-title { font-weight: 700; color: var(--ink); }
.account-alert-body > p:not(.account-alert-title):not(.account-alert-note) { color: var(--ink-70); }
.account-alert-note, .field-hint { font-size: 0.8rem; line-height: 1.45; color: var(--ink-70); }
.account-terms { margin: 1rem auto 0; text-align: center; }
.account-alert-actions, .listing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-sm { padding: 0.6rem 0.85rem; font-size: 0.85rem; }
.link-btn { padding: 0; border: 0; background: none; color: var(--sea); font: 600 0.875rem/1.3 var(--font-body); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.link-btn:hover { color: var(--ink); }
.listing-form { gap: 1.75rem; }
.listing-form fieldset { min-width: 0; margin: 0; padding: 0 0 1.75rem; border: 0; border-bottom: 1px solid var(--ink-12); }
.listing-form fieldset:last-of-type { padding-bottom: 0; border-bottom: 0; }
.listing-form legend { width: 100%; margin-bottom: 1rem; padding: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; }
.form-grid { display: grid; gap: 1rem; }
.contact-form select { width: 100%; appearance: none; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2433' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 0.8rem center / 1rem no-repeat; border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); padding: 0.7rem 2.4rem 0.7rem 0.85rem; }
.contact-form select:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }
.input-prefix { display: flex; align-items: center; overflow: hidden; border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); background: var(--paper); transition: border-color 0.15s, box-shadow 0.15s; }
.input-prefix:focus-within { border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }
.input-prefix > span { padding-left: 0.85rem; color: var(--ink-70); }
.input-prefix input { border: 0; box-shadow: none !important; padding-left: 0.35rem; }
.listing-actions { padding-top: 0.25rem; }
.form-status.is-success { color: var(--sea); }
.listing-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.listing-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--ink-12); font-size: 0.875rem; }
.listing-list li span { flex: none; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--mist); color: var(--ink-70); font-size: 0.75rem; font-weight: 600; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid-loc { grid-template-columns: minmax(0, 1.5fr) minmax(6rem, 0.65fr) minmax(7rem, 0.75fr); }
}
@media (min-width: 880px) {
  .sell-layout { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr); gap: 2rem; }
  .sell-layout:has(> .sell-card + .sell-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; }
  .sell-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 639px) {
  .sell { padding-top: 2.25rem; }
  .sell-card { border-radius: var(--radius); }
  .listing-actions .btn { width: 100%; }
}

.account-shell { min-height: 70vh; padding: 3.5rem 0 5rem; background: linear-gradient(180deg, rgb(228 242 242 / 0.75), var(--paper) 28rem); }
.account-hero { max-width: 48rem; margin-bottom: 2rem; }
.helm-hero { --directory-hero-image: url("/images/helm-hero.jpg"); background-position: center 62%; }
.account-hero h1 { margin-top: 0.45rem; font-size: clamp(2.5rem, 7vw, 4.8rem); }
.account-hero > p:not(.eyebrow) { max-width: 38rem; margin-top: 0.8rem; color: var(--ink-70); }
.account-hero-compact h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
.account-back { display: inline-block; margin-top: 1rem; color: var(--sea); font-weight: 600; }
.helm-grid, .profile-grid { display: grid; gap: 1.5rem; }
.helm-nav { align-self: start; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.helm-action { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--ink-12); color: var(--ink); text-decoration: none; transition: background 0.15s, color 0.15s; }
.helm-action[hidden], .helm-menu-link[hidden], .helm-sale-actions .btn[hidden] { display: none; }
.helm-action:last-child { border-bottom: 0; }
.helm-action:hover { background: var(--mist); }
.helm-action > .material-symbols-outlined { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; background: rgb(13 110 253 / 0.1); color: var(--primary); font-size: 1.15rem; }
.helm-action span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 0.15rem; }
.helm-action strong { font-size: 0.9rem; }
.helm-action small { color: var(--ink-70); font-size: 0.78rem; line-height: 1.4; }
.helm-menu-bar { border-bottom: 1px solid var(--ink-12); background: var(--paper); box-shadow: var(--shadow-sm); }
.helm-menu-bar + .account-shell { padding-top: 1.5rem; }
.helm-menu-bar + .sell { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.helm-menu-bar-inner { display: flex; flex-wrap: wrap; align-items: stretch; }
.helm-menu-link { position: relative; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-right: 1px solid var(--ink-12); color: var(--ink); font-size: 0.9rem; font-weight: 600; text-decoration: none; transition: background 0.15s, color 0.15s; }
.helm-menu-link:first-child { margin-left: -1rem; border-left: 1px solid var(--ink-12); }
.helm-menu-link:hover, .helm-menu-link:focus-visible { background: var(--mist); }
.helm-menu-link.is-current { background: rgb(13 110 253 / 0.1); color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.helm-menu-link.is-current > .material-symbols-outlined { background: var(--primary); color: #fff; }
.helm-menu-link > .material-symbols-outlined { display: grid; flex: 0 0 1.8rem; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: rgb(13 110 253 / 0.1); color: var(--primary); font-size: 1.05rem; }
.helm-menu-link small { position: absolute; z-index: 80; top: calc(100% + 0.5rem); left: 50%; width: max-content; max-width: 16rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); background: var(--ink); color: #fff; font-size: 0.78rem; font-weight: 400; line-height: 1.4; white-space: normal; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, 0.25rem); transition: opacity 0.15s, transform 0.15s; }
.helm-menu-link:hover small, .helm-menu-link:focus-visible small { opacity: 1; transform: translate(-50%, 0); }
.helm-menu-link:first-child small { left: 0; transform: translate(0, 0.25rem); }
.helm-menu-link:first-child:hover small, .helm-menu-link:first-child:focus-visible small { transform: translate(0, 0); }
.helm-menu-link:last-child small { right: 0; left: auto; transform: translate(0, 0.25rem); }
.helm-menu-link:last-child:hover small, .helm-menu-link:last-child:focus-visible small { transform: translate(0, 0); }
.helm-summary, .helm-listings, .account-empty { padding: 1.4rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.helm-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.helm-summary h2 { font-size: 1.2rem; }
.helm-summary p { color: var(--ink-70); overflow-wrap: anywhere; }
.helm-summary form { margin-top: 0.35rem; }
.helm-listings { margin-top: 1.5rem; }
.helm-listings .section-heading { margin-bottom: 1.25rem; }
.helm-listing-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.helm-listing-list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--ink-12); }
.helm-listing-list li > span:first-child { display: flex; flex-direction: column; gap: 0.25rem; }
.helm-listing-list small { color: var(--ink-70); }
.helm-boat-row { align-items: flex-start !important; }
.helm-boat-image { flex: 0 0 6rem; width: 6rem; height: 4.5rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.helm-boat-details { display: flex; flex: 1 1 12rem; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.helm-sale-actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 0.65rem; }
.helm-sale-actions form { margin: 0; }
.helm-fleet-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.65rem; }
.helm-grand-totals { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.todo-total { padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--mist); font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.todo-total-open { background: rgb(232 245 233); color: rgb(25 110 50); }
.todo-total-scheduled { background: rgb(255 248 230); color: rgb(140 100 0); }
.todo-total-completed { background: rgb(227 242 253); color: rgb(15 80 150); }
.helm-boat-todo-counts { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.5rem; }
.helm-list-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 0.65rem; }
.helm-list-form label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--ink-70); font-size: 0.75rem; font-weight: 600; }
.helm-list-form input { width: 9rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; color: var(--ink); }
.listing-state { padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--mist); color: var(--sea); font-size: 0.78rem; font-weight: 700; }
.account-empty { box-shadow: none; color: var(--ink-70); }
.account-empty a { display: inline-block; margin-top: 0.5rem; color: var(--sea); font-weight: 600; }
.profile-grid .sell-card { align-self: start; }
.associate-business-page, .associate-business-page .sell-card, .associate-business-page .contact-form, .associate-business-page .field { text-align: left; }
.associate-business-page .directory-toggle { align-self: stretch; justify-content: flex-start; text-align: left; }
.business-details-card { max-width: 56rem; }
.business-photo-preview { width: min(100%, 18rem); max-height: 12rem; object-fit: contain; object-position: left center; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; }
.business-management-photo { width: 100%; height: 10rem; margin-bottom: 1rem; object-fit: contain; object-position: center; border: 0; background: transparent; }
.workspace-tabs { border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.workspace-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.5rem; padding: 0.5rem; border-bottom: 1px solid var(--ink-12); overflow-x: auto; }
.workspace-tab-list { display: flex; flex: 0 0 auto; align-items: center; gap: 0.25rem; min-width: 0; overflow-x: auto; }
.workspace-tab-list button { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.65rem 0.85rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-70); font: 600 0.88rem/1 var(--font-body); cursor: pointer; }
.workspace-tab-list button .tab-count { padding: 0.15rem 0.4rem; border-radius: 999px; background: var(--mist); font-size: 0.7rem; }
.workspace-tab-list button[aria-selected="true"] { background: var(--primary); color: #fff; }
.workspace-tab-list button[aria-selected="true"] .tab-count { background: rgb(255 255 255 / 0.2); }
.workspace-toolbar .workspace-add-tab { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.65rem 0.85rem; border: 0; border-radius: var(--radius-sm); background: var(--sea); color: #fff; font: 600 0.88rem/1 var(--font-body); cursor: pointer; }
.workspace-toolbar .workspace-add-tab:hover { background: #185d65; }
.workspace-toolbar .workspace-add-tab > span { font-size: 1rem; }
.workspace-search-inline { flex: 1 1 auto; min-width: 10rem; }
.workspace-search-inline input { width: 100%; height: 2.4rem; padding: 0 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
.todo-view-toggle { display: inline-flex; align-items: center; padding: 0.25rem; margin: 0; border-radius: 999px; background: var(--mist); gap: 0.15rem; }
.todo-view-toggle button { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-70); cursor: pointer; }
.todo-view-toggle button .material-symbols-outlined { font-size: 1.35rem; }
.todo-view-toggle button[aria-selected="true"] { background: var(--primary); color: #fff; }
.workspace-tab-panel { padding: clamp(1rem, 3vw, 1.5rem); }
@media (max-width: 720px) {
  .workspace-search-inline { min-width: 6rem; }
  .workspace-tab-list button { padding: 0.55rem 0.65rem; font-size: 0.82rem; }
  .todo-view-toggle button { width: 2.1rem; height: 2.1rem; }
}
.workspace-tab-panel[hidden] { display: none; }
.provider-picker { position: relative; display: flex; flex-direction: column; gap: 0.35rem; }
.todo-vessel-heading { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.todo-vessel-heading img { flex: 0 0 4rem; width: 4rem; height: 3rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.todo-vessel-heading h2 { margin: 0; }
.provider-picker-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.provider-picker-label { display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; }
.provider-picker-label .optional { font-size: 0.78rem; }
.provider-add-link { display: inline; flex: none; font-size: 0.78rem; text-decoration-skip-ink: none; }
.provider-picker input[type="search"] { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
.provider-selection { color: var(--sea); font-size: 0.8rem; font-weight: 600; }
.provider-search-results { position: absolute; z-index: 20; top: 100%; right: 0; left: 0; max-height: 14rem; overflow-y: auto; padding: 0.35rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow); }
.provider-search-results button { display: block; width: 100%; padding: 0.6rem; border: 0; border-radius: 0.35rem; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.provider-search-results button:hover { background: var(--mist); }
.boat-workspace-grid { display: grid; gap: 1.5rem; }
.boat-workspace-grid > main { display: flex; min-width: 0; flex-direction: column; gap: 1.5rem; }
.workspace-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.workspace-section { padding: 1.25rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.workspace-section .section-heading { margin-bottom: 1rem; }
.workspace-section .section-heading > span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--mist); color: var(--sea); font-size: 0.78rem; font-weight: 700; }
.boat-workspace-hero { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); align-items: center; gap: 1.5rem; max-width: none; }
.boat-workspace-hero > img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--mist); object-fit: cover; box-shadow: var(--shadow-sm); }
.boat-workspace-hero > div { min-width: 0; }
.boat-workspace-hero-thumbnail { grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.boat-workspace-hero-thumbnail > img { width: auto; max-width: 6rem; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }
.service-task-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.service-task { display: flex; height: 100%; flex-direction: column; gap: 0.5rem; padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; }
.service-task[hidden] { display: none; }
.service-task.is-scheduled { background: rgb(255 248 230 / 0.55); }
.service-task.is-complete { background: #e8f5e9; border-color: rgb(31 111 120 / 0.22); }
.service-task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.service-task-row h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.service-task > .service-task-edit-link, .service-task > .completed-edit-button { display: flex; width: 100%; justify-content: center; }
.completed-task-summary { display: flex; flex-direction: column; gap: 0.5rem; }
.completed-task-summary h3 { margin: 0; font-size: 1rem; }
.completed-task-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; margin: 0; font-size: 0.85rem; color: var(--ink-70); }
.completed-task-summary dl > div { display: contents; }
.completed-task-summary dt { font-weight: 600; color: var(--ink); }
.completed-task-summary dd { margin: 0; }
.service-task-category { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; width: 100%; font-size: 0.78rem; color: var(--ink-70); text-align: left; justify-items: start; }
.service-task-thumb-row { align-items: flex-start; }
.service-task-thumb { position: relative; display: inline-block; width: 5rem; height: 3.75rem; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: var(--mist); }
.service-task-thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-task-thumb-count { position: absolute; right: 0.15rem; bottom: 0.15rem; padding: 0.05rem 0.35rem; border-radius: 999px; background: rgb(14 36 51 / 0.75); color: #fff; font-size: 0.65rem; font-weight: 700; }
.service-task-notes { width: 100%; color: var(--ink-70); font-size: 0.85rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.service-task-footer { margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--ink-12); font-size: 0.78rem; color: var(--ink-70); }
.service-task-dates { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.75rem; width: 100%; font-size: 0.78rem; color: var(--ink-70); text-align: left; justify-items: start; }
.date-label { font-weight: 600; }
.date-value { white-space: nowrap; }
.service-task-boat { display: inline-flex; align-items: center; gap: 0.65rem; flex: 1; min-width: 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.service-task-boat:hover { color: var(--sea); }
.service-task-boat img { flex: 0 0 3.5rem; width: 3.5rem; height: 2.6rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.service-task-boat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--ink-70); font-size: 0.78rem; }
.completed-stars { color: #e49500; letter-spacing: 0.08em; }
.todo-photo-row { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; }
.todo-photo-row.is-uploading { opacity: 0.6; pointer-events: none; }
.todo-photo-item { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.todo-photo-upload { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.3rem; color: var(--ink-70); font-size: 0.76rem; font-weight: 700; }
.todo-photo-upload input { width: 100%; font: 500 0.8rem/1.2 var(--font-body); }
.todo-photo-upload small { font-weight: 500; }
.todo-photo-dropzone { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 7.5rem; padding: 1rem; border: 2px dashed var(--ink-24); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-70); text-align: center; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; }
.todo-photo-dropzone .material-symbols-outlined { font-size: 2rem; color: var(--sea); }
.todo-photo-dropzone strong { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.todo-photo-dropzone span { font-size: 0.78rem; }
.todo-photo-dropzone.is-dragover { background: rgb(31 111 120 / 0.08); border-color: var(--sea); }
.todo-reference-photos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.65rem; }
.todo-reference-photos a { flex: 0 0 5rem; width: 5rem; height: 3.75rem; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: var(--mist); }
.todo-reference-photos img { width: 100%; height: 100%; object-fit: cover; }
.todo-reference-photos form { display: flex; align-items: center; }
@media (max-width: 520px) { .todo-photo-row { align-items: stretch; flex-direction: column; } .todo-reference-photos { max-width: 100%; } }
.task-save-button { align-self: stretch; margin-top: auto; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgb(14 36 51 / 0.6); backdrop-filter: blur(2px); }
.modal-card { position: relative; max-width: 24rem; width: calc(100% - 2rem); padding: 1.25rem; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.modal-card h3 { margin-bottom: 0.5rem; }
.modal-card p { margin-bottom: 1rem; color: var(--ink-70); }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }

/* ToDo table view */
.todo-table-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; }
.todo-table { width: 100%; min-width: 76rem; border-collapse: collapse; font-size: 0.85rem; }
.todo-table th { position: sticky; top: 0; z-index: 1; padding: 0.55rem 0.75rem; background: var(--mist); color: var(--ink-70); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.todo-table td { padding: 0.55rem 0.75rem; border-top: 1px solid var(--ink-12); vertical-align: middle; }
.todo-table tbody tr:hover td { background: rgb(31 111 120 / 0.05); }
.todo-table tr.is-scheduled td { background: rgb(255 248 230 / 0.55); }
.todo-table tr.is-complete td { background: #e8f5e9; }
.todo-table tr.is-inactive td { color: var(--ink-70); opacity: 0.65; }
.todo-table tr[hidden] { display: none; }
.todo-table .todo-description-cell { max-width: 16rem; font-weight: 600; }
.todo-table .todo-description-cell .todo-description, .todo-table .todo-notes-cell .todo-notes { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-table .todo-notes-cell { max-width: 14rem; color: var(--ink-70); }
.todo-table .todo-date-cell, .todo-table .todo-type-cell, .todo-table .todo-provider-cell, .todo-table .todo-actor-cell { color: var(--ink-70); white-space: nowrap; }
.todo-table .todo-dates-cell { min-width: 7.5rem; font-size: 0.8rem; color: var(--ink-70); text-align: left; }
.todo-dates-cell div { display: flex; gap: 0.35rem; white-space: nowrap; }
.todo-dates-cell span { font-weight: 600; }
.todo-table .todo-provider-cell { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.todo-table .todo-thumb-cell { width: 4.25rem; text-align: center; }
.todo-thumb-link { position: relative; display: inline-block; width: 3.25rem; height: 2.45rem; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: var(--mist); }
.todo-thumb-link img { width: 100%; height: 100%; object-fit: cover; }
.todo-thumb-count { position: absolute; right: 0.1rem; bottom: 0.1rem; padding: 0.05rem 0.3rem; border-radius: 999px; background: rgb(14 36 51 / 0.75); color: #fff; font-size: 0.65rem; font-weight: 700; }
.alltodos-page .todo-view-cards { max-height: 60vh; overflow-y: auto; padding-right: 0.25rem; }
.alltodos-page .todo-view-table { min-width: 0; }
.alltodos-page .service-task-list { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.alltodos-page .service-task-content { display: flex; min-height: 0; max-height: 18rem; flex-direction: column; gap: 0.5rem; overflow-y: auto; padding-right: 0.25rem; }
.alltodos-page .service-task-content .service-task-notes { display: block; overflow: visible; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
@media (max-width: 900px) { .alltodos-page .service-task-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .alltodos-page .service-task-list { grid-template-columns: minmax(0, 1fr); } }
.load-more-sentinel { padding: 1rem; color: var(--ink-70); font-size: 0.85rem; text-align: center; }
.load-more-cell { padding: 1rem; color: var(--ink-70); font-size: 0.85rem; text-align: center; }
.todo-boat-thumb { display: block; width: 3.5rem; height: 2.6rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.todo-boat-thumb-cell { text-align: center; }
.todo-boat-cell { min-width: 12rem; max-width: 16rem; }
.todo-boat-link { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.todo-boat-link:hover { color: var(--sea); }
.todo-boat-link img { flex: 0 0 3.5rem; width: 3.5rem; height: 2.6rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.todo-boat-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-table .todo-edit-cell a { padding: 0.45rem 0.65rem; font-size: 0.78rem; }
.todo-photo-count { display: inline-flex; align-items: center; gap: 0.2rem; color: var(--ink-70); font-size: 0.8rem; text-decoration: none; }
.todo-photo-count .material-symbols-outlined { font-size: 1.05rem; }
.todo-photo-count:hover { color: var(--sea); }

.crew-list { margin: 0.8rem 0; padding: 0; list-style: none; }
.crew-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid var(--ink-12); }
.crew-list span { display: flex; min-width: 0; flex-direction: column; }
.crew-list small { overflow-wrap: anywhere; color: var(--ink-70); }
.add-crew-form { margin-top: 1rem; }
.crew-boat-group { padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: rgb(223 231 230 / 0.42); }
.crew-boat-group + .crew-boat-group { margin-top: 1rem; }
.crew-boat-group .crew-list { margin: 0.85rem 0 0 1rem; padding-left: 0.9rem; border-left: 3px solid rgb(31 111 120 / 0.3); }
.crew-vessel-heading { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--ink-12); }
.crew-vessel-heading img { flex: 0 0 4.5rem; width: 4.5rem; height: 3.4rem; border-radius: var(--radius-sm); background: var(--mist); object-fit: cover; }
.crew-vessel-heading span { display: flex; min-width: 0; flex-direction: column; gap: 0.2rem; }
.crew-vessel-heading h3 { font-size: 1rem; }
.crew-vessel-heading small { color: var(--ink-70); }
.sold-boats { background: rgb(223 231 230 / 0.35); }
@media (max-width: 600px) { .boat-workspace-hero { grid-template-columns: 1fr; } .boat-workspace-hero > img { max-height: 14rem; } .boat-workspace-hero-thumbnail { grid-template-columns: auto 1fr; } .boat-workspace-hero-thumbnail > img { max-width: 4.5rem; max-height: none; } }
@media (min-width: 900px) { .boat-workspace-grid { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .workspace-sidebar { position: sticky; top: calc(var(--header-h) + 1rem); } }
.saved-searches-card { margin-top: 1.5rem; }
.saved-search-list { display: flex; flex-direction: column; margin: 1rem 0 0; padding: 0; list-style: none; }
.saved-search-list li { border-top: 1px solid var(--ink-12); }
.saved-search-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; color: var(--ink); text-decoration: none; }
.saved-search-list a:hover { color: var(--primary); }
.saved-search-list span { color: var(--ink-70); font-size: 0.78rem; }
.contact-form input:disabled { background: var(--mist); color: var(--ink-70); cursor: not-allowed; }
.dir-grid > a.dir-card { color: inherit; text-decoration: none; }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; }
.provider-card { display: flex; min-width: 0; overflow: hidden; flex-direction: column; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s; }
.provider-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.provider-media { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--mist), #fff); }
.provider-media img { width: 100%; height: 100%; object-fit: cover; }
.dealer-card .provider-media { position: relative; padding: 0; background: #fff; }
.dealer-card .provider-media img { position: absolute; inset: 1rem; display: block; width: calc(100% - 2rem); height: calc(100% - 2rem); object-fit: contain; }
.provider-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 1.15rem; }
.provider-card-body .dir-kicker { margin-bottom: 0.45rem; }
.provider-card-body h2 { font-size: 1.15rem; line-height: 1.2; }
.provider-card-body > p:not(.dir-kicker) { display: -webkit-box; margin-top: 0.65rem; overflow: hidden; color: var(--ink-70); font-size: 0.9rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.provider-card-body > span { margin-top: auto; padding-top: 1rem; color: var(--sea); font-size: 0.82rem; font-weight: 600; }
.provider-detail { min-height: 70vh; padding: 2rem 0 5rem; }
.provider-detail-layout { display: grid; gap: 2rem; }
.provider-detail-main { display: flex; min-width: 0; flex-direction: column; gap: 2rem; }
.provider-detail-main h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); }
.provider-detail-logo { display: flex; max-height: 16rem; padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; }
.provider-detail-logo img { width: 100%; height: auto; max-height: 14rem; object-fit: contain; }
.provider-description { max-width: 70ch; line-height: 1.65; }
.provider-services { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.provider-services li { padding: 0.45rem 0.7rem; border-radius: 999px; background: var(--mist); color: var(--sea); font-size: 0.85rem; font-weight: 600; }
.inventory-filter { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: rgb(223 231 230 / 0.3); }
.inventory-dimensions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.75rem; }
.inventory-filter label { display: flex; flex-direction: column; gap: 0.3rem; color: var(--ink-70); font-size: 0.76rem; font-weight: 700; }
.inventory-filter input[type="number"] { width: 100%; padding: 0.6rem 0.65rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: 500 0.9rem/1.2 var(--font-body); }
.inventory-filter fieldset { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; margin: 0; padding: 0; border: 0; }
.inventory-filter legend { width: 100%; margin-bottom: 0.2rem; font-size: 0.78rem; font-weight: 700; }
.inventory-filter fieldset label { flex-direction: row; align-items: center; color: var(--ink); font-weight: 500; }
.inventory-filter-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.65rem; border-top: 1px solid var(--ink-12); color: var(--ink-70); font-size: 0.8rem; }
.storage-unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.storage-unit-card { padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.storage-unit-card h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.storage-rent { margin-bottom: 0.85rem; color: var(--ink); font: 800 1.35rem/1 var(--font-display); }
.storage-rent span { margin-left: 0.3rem; color: var(--ink-70); font: 500 0.75rem/1 var(--font-body); }
.storage-unit-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.8rem; margin: 0; }
.storage-unit-card dl > div { display: flex; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--ink-12); font-size: 0.78rem; }
.storage-unit-card dt { color: var(--ink-70); }
.storage-unit-card dd { margin: 0; font-weight: 700; }
.provider-info-card { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.4rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-sm); }
.provider-info-card h2 { font-size: 1.3rem; }
.provider-info-card h3 { font-size: 1rem; }
.provider-info-card address, .provider-info-card p, .provider-contacts { display: flex; flex-direction: column; gap: 0.25rem; color: var(--ink-70); font-style: normal; }
.provider-info-card a:not(.btn) { color: var(--sea); overflow-wrap: anywhere; }
.provider-hours, .provider-contacts { padding-top: 1rem; border-top: 1px solid var(--ink-12); }
.provider-hours dl { margin: 0.65rem 0 0; }
.provider-hours dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; font-size: 0.85rem; }
.provider-hours dd { margin: 0; color: var(--ink-70); }
.provider-contacts > p { margin-top: 0.75rem; }
.provider-inquiry { display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--ink-12); }
.provider-inquiry > p { color: var(--ink-70); font-size: 0.85rem; line-height: 1.45; }
.provider-inquiry .contact-form { margin-top: 0.25rem; }
.location-map-card { overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; }
.location-map { z-index: 0; width: 100%; height: 13rem; background: var(--mist); }
.location-map-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; font-size: 0.78rem; }
.location-map-footer span { color: var(--ink-70); }
.location-map-footer a { color: var(--sea); font-weight: 700; text-decoration: none; }
.location-map-footer a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .provider-detail-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .provider-info-card { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.state-panel { align-self: start; overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.state-panel h2 { padding: 1rem; border-bottom: 1px solid var(--ink-12); font-size: 1.05rem; }
.state-panel nav { display: flex; max-height: 32rem; flex-direction: column; overflow-y: auto; }
.state-panel a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--ink-12); color: var(--ink); font-size: 0.88rem; text-decoration: none; }
.state-panel a:hover { background: var(--mist); }
.state-panel a[aria-current="page"] { background: var(--primary); color: #fff; font-weight: 700; }
.state-panel small { color: inherit; opacity: 0.72; }
.state-select-form { display: none; padding: 1rem; }
.state-select-form label { display: block; margin-bottom: 0.4rem; color: var(--ink); font-size: 0.82rem; font-weight: 700; }
.state-select-form select { width: 100%; padding: 0.7rem 2.25rem 0.7rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); background: #fff; color: var(--ink); font: 500 1rem/1.2 var(--font-body); }
.water-results-column { display: flex; min-width: 0; flex-direction: column; gap: 1.25rem; }
.directory-search { padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.directory-search > label { display: block; margin-bottom: 0.45rem; font-size: 0.82rem; font-weight: 700; }
.directory-search > div { display: flex; gap: 0.65rem; }
.directory-search input { min-width: 0; flex: 1; padding: 0.7rem 0.8rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
.water-detail { min-height: 70vh; padding: 2rem 0 5rem; }
.water-detail-card { overflow: hidden; border: 1px solid var(--ink-12); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.water-detail-card > figure { width: 100%; max-height: 32rem; margin: 0; overflow: hidden; aspect-ratio: 16 / 8; background: var(--mist); }
.water-detail-card > figure img { width: 100%; height: 100%; object-fit: cover; }
.water-detail-body { padding: clamp(1.5rem, 4vw, 3rem); }
.water-detail-body h1 { font-size: clamp(2.3rem, 7vw, 5rem); }
.water-state { margin-top: 0.5rem; color: var(--ink-70); font-weight: 600; }
.water-detail-body .detail-section { margin-top: 2rem; }
.water-nearby { margin-top: 3rem; }
.water-business-group + .water-business-group { margin-top: 2.5rem; }
.water-business-group .section-heading { margin-bottom: 1rem; }
.water-business-group .section-heading h3 { font-size: 1.35rem; }
.water-business-group .section-heading a { color: var(--sea); font-weight: 600; }
.water-business-empty { padding: 1rem; border: 1px dashed var(--ink-12); border-radius: var(--radius-sm); background: rgb(223 231 230 / 0.35); color: var(--ink-70); }
.associate-business-btn { margin-top: 1rem; }
.compact-provider-card .provider-media { aspect-ratio: 16 / 7; }
.directory-search + .results { margin-top: 0; }
.water-media { position: relative; }
.placeholder-watermark { display: none; position: absolute; right: 0.65rem; bottom: 0.65rem; padding: 0.35rem 0.55rem; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 999px; background: rgb(14 36 51 / 0.78); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; backdrop-filter: blur(4px); }
.water-placeholder .placeholder-watermark { display: inline-flex; }
@media (max-width: 899px) {
  .water-layout { display: flex; flex-direction: column; }
  .state-panel nav { max-height: 20rem; }
}
@media (max-width: 700px) {
  .state-panel nav { display: none; }
  .state-select-form { display: block; }
  .directory-search > div { flex-direction: column; }
}
@media (min-width: 900px) {
  .water-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .state-panel { position: sticky; top: calc(var(--header-h) + 1rem); }
}
@media (min-width: 800px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .helm-grid { grid-template-columns: minmax(13rem, 0.5fr) minmax(0, 3.6fr) minmax(14rem, 1.1fr); align-items: start; }
  .helm-grid .helm-listings { margin-top: 0; }
  .helm-grid .helm-nav { position: sticky; top: calc(var(--header-h) + 1rem); }
}

.cookie-banner { position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; left: 1rem; display: flex; max-width: 52rem; margin-inline: auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; box-shadow: 0 20px 55px rgb(14 36 51 / 0.3); }
.cookie-banner[hidden] { display: none; }
.cookie-banner strong { display: block; margin-bottom: 0.25rem; }
.cookie-banner p { color: var(--ink-70); font-size: 0.85rem; line-height: 1.45; }
.cookie-actions { display: flex; flex: none; gap: 0.6rem; }
@media (max-width: 600px) { .cookie-banner { align-items: stretch; flex-direction: column; } .cookie-actions .btn { flex: 1; } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* The List */
.thelist-items { margin: 0.8rem 0; padding: 0; list-style: none; }
.thelist-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; border-top: 1px solid var(--ink-12); }
.thelist-item:first-child { border-top: 0; }
.thelist-item form { display: contents; }
.thelist-item-main { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.thelist-item-main small { color: var(--ink-70); }
.thelist-item-name { overflow-wrap: anywhere; }
.thelist-item-name.is-acquired { color: var(--ink-70); text-decoration: line-through; }
.acquired-toggle { flex: 0 0 auto; padding: 0.15rem; border: 0; background: none; cursor: pointer; }
.acquired-badge { display: inline-grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; background: #1e9e50; color: #fff; }
.acquired-badge svg { width: 1rem; height: 1rem; }
.acquired-badge-open { background: transparent; box-shadow: inset 0 0 0 2px var(--ink-12); }
.acquired-toggle:hover .acquired-badge-open, .acquired-toggle:focus-visible .acquired-badge-open { box-shadow: inset 0 0 0 2px #1e9e50; }
.thelist-add-form { display: flex; flex-direction: row; align-items: flex-end; gap: 0.75rem; margin-top: 1.25rem; }
.sell-card .contact-form.thelist-add-form { flex-direction: row; align-items: flex-end; }
.sell-card .contact-form.thelist-add-form > .btn { align-self: flex-end; margin-bottom: 0; }
.thelist-item-entry { margin-top: 0 !important; }
.thelist-items-heading { margin-top: 1.5rem; }
.thelist-invite-form { margin-top: 0 !important; }
.thelist-invite-form .field { align-items: flex-start; text-align: left; }
.thelist-details-card { margin-bottom: 1.5rem; }
.thelist-members-heading { margin-top: 1.5rem; margin-bottom: 0.4rem; padding-bottom: 0; border-bottom: 0; }
.thelist-details-card > h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.thelist-date-fields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.thelist-date-fields label small { color: var(--ink-70); font-weight: 400; }
.thelist-add-form .field { flex: 1; }
.thelist-add-form .field input { width: 100%; }
.thelist-meta { color: var(--ink-70); font-size: 0.85rem; }
.crew-list .member-attendance, .crew-list .member-actions { display: inline-flex; flex-direction: row; align-items: center; gap: 0.4rem; }
.member-attendance { margin-left: auto; }
.member-actions form { display: inline-flex; margin: 0; }
.attendance-icon, .attendance-action { display: inline-grid; width: 1.65rem; height: 1.65rem; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #fff; }
.attendance-icon svg, .attendance-action svg { width: 1rem; height: 1rem; }
.attendance-action { cursor: pointer; transition: transform 0.15s, filter 0.15s; }
.attendance-action:hover { filter: brightness(0.9); transform: translateY(-1px); }
.attendance-icon.is-attending, .attendance-action.is-attending { background: #1e9e50; }
.attendance-icon.is-declined, .attendance-action.is-declined { background: #c4382b; }
.attendance-icon.is-pending { background: var(--mist); color: var(--ink-70); font-size: 0.8rem; font-weight: 700; }
.thelist-delete { margin-top: 1.5rem; }
@media (max-width: 600px) { .sell-card .contact-form.thelist-add-form { align-items: stretch; flex-direction: column; } .sell-card .contact-form.thelist-add-form > .btn { align-self: stretch; } .thelist-date-fields { grid-template-columns: 1fr; } }

/* Rex Radar */
.radar-heading h1 { display: inline-flex; align-items: center; gap: 0.5rem; }
.radar-empty { margin-top: 1rem; }
.radar-empty p + p { margin-top: 0.5rem; }
.radar-list { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.5rem; }
.radar-group > h2 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.radar-cards { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.radar-card { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; }
.radar-card-main { min-width: 0; }
.radar-card-main h3 { font-size: 1.15rem; overflow-wrap: anywhere; }
.radar-criteria { color: var(--ink-70); font-size: 0.92rem; margin-top: 0.35rem; overflow-wrap: anywhere; }
.radar-meta { color: var(--ink-70); font-size: 0.82rem; margin-top: 0.35rem; }
.radar-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; width: 100%; }
.radar-rename-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 14rem; min-width: 0; }
.radar-rename-form input { flex: 1; min-width: 8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
.radar-delete { color: #c4382b; }
.radar-about { padding: 1rem; border: 1px solid var(--ink-12); border-radius: var(--radius); background: #fff; margin-top: 1rem; }
.radar-about p { margin: 0; color: var(--ink-70); font-size: 0.95rem; }
.radar-picker { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--ink-12); }
.radar-picker > .legend { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sea); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.radar-picker .material-symbols-outlined { font-size: 1.15rem; }
.radar-picker select { width: 100%; height: 2.75rem; padding: 0 2rem 0 0.85rem; border: 1px solid rgb(14 36 51 / 0.28); border-radius: var(--radius-sm); appearance: none; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e2433' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 0.7rem center / 0.9rem no-repeat; color: var(--ink); font: 500 0.925rem var(--font-body); cursor: pointer; }
.radar-picker select:hover { border-color: var(--ink-70); }
.radar-picker select:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2); }
.radar-save-panel { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--ink-12); }
.radar-save-panel p { font-size: 0.88rem; color: var(--ink-70); margin-bottom: 0.5rem; }
.radar-description { display: flex; align-items: flex-start; gap: 0.45rem; }
.radar-description > .material-symbols-outlined { flex: none; color: var(--primary); font-size: 1.3rem; }
.radar-save-panel form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.radar-save-panel input { flex: 1; min-width: 8rem; padding: 0.55rem 0.75rem; border: 1px solid var(--ink-12); border-radius: var(--radius-sm); font: inherit; }
@media (min-width: 700px) {
  .radar-cards { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }
}

/* Boat image gallery (listing photos) */
.boat-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.75rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.boat-gallery-item { border: 1px solid var(--ink-12); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.boat-gallery-item.is-primary { border-color: var(--sea); }
.boat-gallery-view > summary { display: block; position: relative; cursor: pointer; list-style: none; }
.boat-gallery-view > summary::-webkit-details-marker { display: none; }
.boat-gallery-view img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.boat-gallery-view .boat-gallery-large { aspect-ratio: auto; max-height: 32rem; object-fit: contain; background: var(--ink); }
.boat-gallery-missing { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; width: 100%; font-size: 2.5rem; color: var(--ink-70); background: rgb(14 36 51 / 0.05); }
.boat-gallery-badge { position: absolute; left: 0.4rem; top: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--sea); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.boat-gallery-actions { display: flex; justify-content: space-between; padding: 0.25rem 0.4rem; }
.boat-gallery-actions .link-btn { padding: 0.15rem 0.3rem; font-size: 0.95rem; line-height: 1; }
.boat-gallery-add { cursor: pointer; margin-bottom: 0.5rem; }
.boat-gallery-item.is-empty { border-style: dashed; border-width: 2px; }
.boat-gallery-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; aspect-ratio: 4 / 3; padding: 0.5rem; text-align: center; cursor: pointer; color: var(--ink-70); }
.boat-gallery-slot:hover, .boat-gallery-slot.is-over { color: var(--sea); background: rgb(31 111 120 / 0.06); }
.boat-gallery-slot.is-over { outline: 2px solid var(--sea); outline-offset: -2px; }
.boat-gallery-slot-icon { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.boat-gallery-slot-text { font-size: 0.78rem; line-height: 1.2; }
.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; }
.engine-row { margin-bottom: 0.75rem; }
.engine-row + .engine-row { padding-top: 0.75rem; border-top: 1px dashed var(--ink-12); }

/* Confirm modal */
.br-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.br-modal[hidden] { display: none; }
.br-modal-backdrop { position: absolute; inset: 0; background: rgb(14 36 51 / 0.55); }
.br-modal-card { position: relative; width: min(24rem, calc(100vw - 2rem)); padding: 1.5rem; border-radius: var(--radius); background: #fff; box-shadow: 0 18px 50px rgb(14 36 51 / 0.35); }
.br-modal-message { margin: 0 0 1.25rem; font-size: 1rem; color: var(--ink); }
.br-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* Searchable state select */
.state-select { position: relative; }
.state-select-input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid rgb(14 36 51 / 0.28);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.state-select-input:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgb(31 111 120 / 0.2);
}
.state-select-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgb(14 36 51 / 0.15);
  z-index: 50;
}
.state-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.95rem;
}
.state-select-option:hover,
.state-select-option.is-selected {
  background: rgb(31 111 120 / 0.1);
}
.state-select-option.is-selected {
  font-weight: 600;
}
.state-select-option[hidden] { display: none; }
.state-select-name { color: var(--ink); }
.state-select-abbr { color: var(--ink-70); font-size: 0.82em; font-weight: 500; }
.filters .state-select-input,
.state-select-form .state-select-input {
  padding: 0.6rem 0.75rem;
}
.filter-group .state-select,
.filters .state-select { width: 100%; }