/* sbs-pkg's base stylesheet: the layout every site shares (reset, header and menu, buttons, hero,
   sections, cards, contact, shop, footer, announcement bar). build.mjs links it before each page's own
   styles.css, so a site's styles.css only needs its theme tokens (:root) and what it does differently;
   anything here can be overridden there. Every color is a theme variable or a color-mix() of one.
   Copied into the site by sbs-pkg-sync; used when sbs.config.json has "baseCss": true (new sites do). */


*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* the footer stays at the bottom on short pages */
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: var(--teal-ink);
}
h1,
h2,
h3 {
  font-family: var(--display);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}
.wrap {
  width: min(1120px, 100% - 40px);
  margin-inline: auto;
}
main {
  flex: 1;
}
.narrow {
  width: min(760px, 100% - 40px);
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--paper);
  padding: 8px 12px;
}

/* Announcement bar (data/business.json → announcement.text) */
.announce {
  margin: 0;
  padding: 10px 16px;
  background: var(--teal-ink);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Header. A palette may color the menu bar (theme.mjs preset css): --header (its background),
   --header-solid (the open menu on phones), --header-ink (text), --header-current (the current
   page's underline), --header-btn / --header-btn-ink (its buttons). Unset, it's the dark bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header, color-mix(in srgb, var(--abyss) 95%, transparent));
  color: var(--header-ink, #fff);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--header-ink, #fff);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
}
.brand-mark {
  border-radius: 10px;
  background: #fff;
  object-fit: contain; /* a tall or wide logo keeps its shape in the square */
}
/* text.header.tagline: a short line beside the name (under the logo in the sidebar preset) */
.brand-tagline {
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.8;
}
@media (max-width: 1100px) {
  .brand-tagline {
    display: none;
  }
}
.nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav a {
  color: var(--header-ink, #fff);
  text-decoration: none;
  font-weight: 500;
}
.nav a[aria-current] {
  box-shadow: inset 0 -2px 0 var(--header-current, var(--glow));
}
.nav .btn {
  background: var(--header-btn, var(--orange));
  border-color: var(--header-btn, var(--orange));
  color: var(--header-btn-ink, #fff);
}
.nav .btn:hover {
  background: color-mix(in srgb, var(--header-btn, var(--orange)) 88%, black);
}
.nav .btn-quiet {
  background: transparent;
  border-color: color-mix(in srgb, var(--header-ink, #fff) 55%, transparent);
  color: var(--header-ink, #fff);
}
.nav .btn-quiet:hover {
  background: color-mix(in srgb, var(--header-ink, #fff) 10%, transparent);
}
.nav a {
  white-space: nowrap; /* "Location / Contact" stays on one line */
}
/* a long menu (seven or more links and buttons, e.g. five pages, Book online and Call): closer
   together, no tagline, and the Menu button below 1180px instead of 820px; six links get it
   below 940px. Otherwise the menu runs off the bar and squeezes the business's name. */
.nav-row:has(.nav > a:nth-child(7)) .nav {
  gap: 14px;
  font-size: 0.95rem;
}
.nav-row:has(.nav > a:nth-child(7)) .brand-tagline {
  display: none;
}
@media (max-width: 940px) {
  .nav-row:has(.nav > a:nth-child(6)) .nav-toggle {
    display: inline-block;
  }
  .nav-row:has(.nav > a:nth-child(6)) .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav-row:has(.nav > a:nth-child(6)) .nav.open {
    display: flex;
  }
}
@media (max-width: 1180px) {
  .nav-row:has(.nav > a:nth-child(7)) .nav-toggle {
    display: inline-block;
  }
  .nav-row:has(.nav > a:nth-child(7)) .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav-row:has(.nav > a:nth-child(7)) .nav.open {
    display: flex;
  }
}
/* the open menu scrolls when it's taller than the screen below the bar (a phone on its side) */
.nav.open {
  max-height: calc(100dvh - 88px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid color-mix(in srgb, var(--header-ink, #fff) 50%, transparent);
  color: var(--header-ink, #fff);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
}
@media (max-width: 820px) {
  .nav-toggle {
    display: inline-block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 20px;
    background: var(--header-solid, var(--abyss));
  }
  .nav.open {
    display: flex;
  }
}

/* Buttons */
/* text for screen readers only, e.g. the course name after a "Book" button (runtime/app.js) */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  border: 2px solid var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.75em 1.4em;
  border-radius: 999px;
}
.nav a.btn {
  color: var(--header-btn-ink, #fff);
}
.nav a.btn-quiet {
  color: var(--header-ink, #fff);
}
.btn:hover {
  background: color-mix(in srgb, var(--orange) 88%, black);
}
.btn-sm {
  padding: 0.45em 1em;
  font-size: 0.92rem;
}
.btn-ghost,
.btn-quiet {
  background: transparent;
  border-color: color-mix(in srgb, #fff 55%, transparent);
}
.btn-ghost:hover,
.btn-quiet:hover {
  background: color-mix(in srgb, #fff 10%, transparent);
}
.btn-light {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn-light:hover {
  background: var(--sand);
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--abyss), var(--sea));
  color: #fff;
  padding: clamp(64px, 10vw, 120px) 0;
}
.hero h1 span {
  color: var(--glow);
}
/* text.home.hero.photo and .subheading: a photo under the heading, then a second heading */
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  margin: 24px 0;
  border-radius: var(--radius);
}
.hero-sub {
  margin: 0 0 12px;
  white-space: pre-line; /* the owner's line breaks */
}
.lede {
  font-size: 1.2rem;
  max-width: 44em;
  opacity: 0.92;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--glow);
  margin: 0 0 12px;
}
.eyebrow.dark {
  color: var(--teal-ink);
}

/* Sections */
.section {
  padding: clamp(56px, 8vw, 96px) 0;
}
.section.alt {
  background: var(--sand);
}
.section-head {
  max-width: 720px;
  margin-bottom: 36px;
}
.section-head p,
.intro p {
  color: var(--muted);
}
.role {
  color: var(--muted);
  font-weight: 600;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card h3 {
  font-size: 1.25rem;
}
.card p {
  color: var(--muted);
  margin: 0 0 0.6em;
}
.ticks {
  list-style: none;
  padding: 0;
}
.ticks li {
  padding-left: 1.6em;
  position: relative;
  margin: 0.35em 0;
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal-ink);
  font-weight: 700;
}

/* Contact */
.cta {
  background: linear-gradient(135deg, var(--abyss), var(--deep));
  color: #fff;
  padding: clamp(56px, 8vw, 96px) 0;
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}
.cta p {
  color: color-mix(in srgb, #fff 85%, transparent);
}
.visit h3 {
  color: var(--glow);
}
.visit address {
  font-style: normal;
  margin-bottom: 12px;
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}
.contact-list li {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, #fff 15%, transparent);
}
.contact-list span {
  min-width: 7em;
  color: color-mix(in srgb, #fff 90%, transparent);
}
/* a long email address that doesn't fit beside its label goes under it, and breaks only if it
   doesn't fit there either, instead of running past the column (and the page, on phones) */
.contact-list li {
  flex-wrap: wrap; /* as the training and club looks have it */
}
.contact-list a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.cta a:not(.btn) {
  color: #fff;
}

/* Text blocks (.prose) and content pages; scuba pages use .prose too */
.article h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}
.article-hero {
  margin: 24px 0;
}
.article-hero img {
  border-radius: var(--radius);
}
.prose {
  font-size: 1.08rem;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.gallery img {
  border-radius: 8px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}

/* Shop */
.store-link {
  font-weight: 600;
}
.shop-embed-frame iframe {
  width: 100%;
  min-height: 80vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.shop-status {
  max-width: 640px;
}
/* Shopify products (shopify.js): a card each, as many across as fit */
.shopify-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.shopify-product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.shopify-product h3 {
  margin: 0;
  font-size: 1.1rem;
}
.shopify-product h3 a {
  color: inherit;
  text-decoration: none;
}
.shopify-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}
.shopify-price {
  margin: 0;
  font-weight: 600;
}
.shopify-variant {
  display: grid;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--muted);
}
.shopify-variant select {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  font: inherit;
  color: var(--ink);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.shopify-product .btn {
  margin-top: auto;
}
.shopify-product .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.shopify-error {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.shopify-error:empty {
  display: none;
}
/* the cart bar: stays at the bottom of the screen while the store is in view */
.shopify-cartbar {
  position: sticky;
  bottom: 12px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--abyss);
  color: #fff;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--abyss) 30%, transparent);
}
.shopify-cartbar[hidden] {
  display: none;
}
.shopify-cartbar-text {
  margin: 0 auto 0 0;
  font-weight: 600;
}
.shopify-cartbar .btn-quiet {
  color: #fff;
  border-color: color-mix(in srgb, #fff 60%, transparent);
}
/* a phone: the totals on their own line, the two buttons side by side under them */
@media (max-width: 520px) {
  .shopify-cartbar-text {
    flex-basis: 100%;
  }
  .shopify-cartbar > .btn, .shopify-cartbar > span {
    flex: 1;
  }
  .shopify-cartbar .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
/* the cart dialog */
.shopify-cart {
  width: min(560px, 100% - 24px);
  max-height: calc(100vh - 24px);
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--abyss) 35%, transparent);
}
.shopify-cart::backdrop {
  background: color-mix(in srgb, var(--abyss) 60%, transparent);
}
.shopify-cart h2 {
  margin: 0 0 16px;
}
.shopify-close {
  float: right;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.shopify-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shopify-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.shopify-line img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}
.shopify-line-what {
  grid-column: 2;
  min-width: 0;
}
.shopify-line-what p {
  margin: 0;
}
.shopify-line-title {
  font-weight: 600;
}
.shopify-line-option, .shopify-cart-note {
  color: var(--muted);
  font-size: 0.9rem;
}
.shopify-line-total {
  margin: 0;
  font-weight: 600;
}
.shopify-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 12px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.shopify-qty button {
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.shopify-qty-n {
  min-width: 2ch;
  text-align: center;
}
.shopify-remove {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.shopify-cart button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.shopify-subtotal {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 1.1rem;
}
.shopify-cart-foot .btn {
  display: block;
  margin-top: 14px;
  text-align: center;
}

/* Footer */
.site-footer {
  background: var(--abyss);
  color: color-mix(in srgb, #fff 70%, transparent);
  padding: 28px 0;
  font-size: 0.92rem;
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.foot-row p {
  margin: 0;
}
.site-footer a {
  color: color-mix(in srgb, #fff 85%, transparent);
}
.social,
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.site-footer a:hover {
  color: #fff;
}

/* Home page sections (templates/starter/index.html, from data/text.json → home): quick facts,
   wave, photo + text, stats, price cards, price by group size, fees, policy cards with crosses;
   shop categories; the outline button on dark boxes; agency ratings lists. */
.cta a.link-light {
  color: var(--glow);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
}
.hero-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hero-facts li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}
.hero-facts strong {
  font-family: var(--display);
  font-size: 2.2rem;
  color: #fff;
  min-width: 4.2ch;
}
.hero-facts span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  fill: var(--paper);
}
.shop-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shop-category {
  padding: 24px 26px 24px 0;
}
.shop-category + .shop-category {
  padding-left: 26px;
  border-left: 1px solid var(--line);
}
.shop-category h3 {
  margin-bottom: 8px;
  text-transform: uppercase;
}
.shop-category p {
  margin: 0;
  color: var(--muted);
}
/* as many price cards as fit, filling the row (two or three side by side on a laptop) */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.tier {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.tier:hover {
  transform: translateY(-3px);
}
.tier-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deep);
}
.tier-body {
  padding: 24px;
}
.tier h3 {
  font-size: 1.9rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.price {
  margin: 0;
  color: var(--muted);
}
.price span {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.price-alt {
  margin: 2px 0 0;
  font-weight: 600;
  color: var(--teal-ink);
  font-size: 0.95rem;
}
.tier dl {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.tier dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  margin-top: 8px;
}
.tier dd {
  margin: 0;
}
.tier.featured {
  border-color: var(--teal);
  box-shadow:
  0 0 0 1px var(--teal),
  var(--shadow);
}
.ow {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--deep), var(--sea));
  color: #fff;
}
.ow .eyebrow {
  color: var(--glow);
}
.ow h3 {
  font-size: 2.2rem;
  text-transform: uppercase;
}
.ow p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.ow-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.ow-tier {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ow-who {
  font-weight: 600;
}
.ow-n {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.ow-tier strong {
  font-family: var(--display);
  font-size: 2.2rem;
  margin-top: 10px;
  line-height: 1;
}
.ow-tier em {
  font-style: normal;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.ow-tier a {
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}
/* for site content (Deep Adventures' agencies page lists ratings with it): no package page uses it */
.prose .ratings-list {
  columns: 2;
  column-gap: 32px;
  margin-bottom: 1.4em;
}
.prose .ratings-list li {
  break-inside: avoid;
}
@media (max-width: 620px) {
  .prose .ratings-list {
    columns: 1;
  }
}
.ow-tier.best {
  background: var(--glow);
  color: var(--abyss);
  border-color: var(--glow);
}
.ow-tier.best .ow-n, .ow-tier.best em {
  color: color-mix(in srgb, var(--abyss) 70%, transparent);
}
.fees {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.fee {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fee strong {
  font-family: var(--display);
  font-size: 1.9rem;
  line-height: 1;
}
.fee span {
  color: var(--muted);
  font-size: 0.92rem;
}
.fee.accent {
  background: color-mix(in srgb, var(--orange) 6%, white);
  border-color: color-mix(in srgb, var(--orange) 23%, white);
}
.fee.accent strong {
  color: var(--orange);
}
.policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.crosses {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.crosses li {
  padding-left: 28px;
  position: relative;
}
.crosses li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
}
.crosses li::before {
  content: "✕";
  background: #fdecec;
  color: #c0392b;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 56px;
  align-items: center;
}
.about-photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.about-photo img {
  width: 100%;
  height: auto;
}
.about .role {
  font-weight: 600;
  color: var(--teal-ink);
  margin-top: -6px;
}
.about p {
  color: color-mix(in srgb, var(--ink) 81%, var(--muted));
}
.about-stats {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.about-stats li {
  border-left: 3px solid var(--teal);
  padding-left: 12px;
}
.about-stats strong {
  display: block;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
}
.about-stats span {
  font-size: 0.85rem;
  color: var(--muted);
}
.link-light {
  color: var(--glow);
  font-weight: 600;
  text-decoration: none;
}
.btn-ghost-dark {
  background: transparent;
  color: var(--deep);
  border-color: var(--deep);
}
.btn-ghost-dark:hover {
  background: color-mix(in srgb, var(--deep) 6%, transparent);
  box-shadow: none;
}
@media (max-width: 960px) {
  .hero-grid, .ow, .about-grid {
    grid-template-columns: 1fr;
  }
  .tiers {
    grid-template-columns: 1fr 1fr;
  }
  .tiers .featured {
    grid-column: span 2;
  }
  .fees {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 620px) {
  .tiers, .fees, .policy-grid {
    grid-template-columns: 1fr;
  }
  .tiers .featured {
    grid-column: auto;
  }
  .tier-img {
    aspect-ratio: 21 / 9;
  }
  .shop-categories {
    grid-template-columns: 1fr;
  }
  .shop-category, .shop-category + .shop-category {
    padding: 18px 0;
    border-left: 0;
  }
  .shop-category + .shop-category {
    border-top: 1px solid var(--line);
  }
  .ow {
    padding: 22px;
  }
  .ow-tiers {
    grid-template-columns: 1fr;
  }
  .ow-tier {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .ow-tier strong {
    margin: 0 0 0 auto;
    font-size: 1.8rem;
  }
  .ow-tier .ow-n {
    order: 3;
    width: 100%;
  }
}
@media (min-width: 961px) {
  #highlights .post-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 961px) {
  .about-grid.flip {
    grid-template-columns: 1.25fr 1fr;
  }
}
.hero-facts strong {
  white-space: nowrap;
  flex-shrink: 0;
}
/* on a phone a long fact ("PADI · SSI · SDI") wraps between its words, smaller, rather than push
   the page sideways */
@media (max-width: 520px) {
  .hero-facts strong {
    white-space: normal;
    flex-shrink: 1;
    font-size: 1.7rem;
  }
  .hero-facts span {
    min-width: 0;
  }
}

/* Price sheet ({{…|pricesheet}}): your price beside other shops', like a printed price board */
.price-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.ps-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--line);
}
.ps-row > span {
  padding: 14px 16px;
  text-align: center;
}
.ps-row > .ps-item, .ps-head > span:first-child {
  text-align: left;
}
.ps-head {
  border-top: 0;
  background: var(--deep);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ps-head {
  align-items: stretch;
}
.ps-head > span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
}
.ps-head > span:first-child {
  justify-content: flex-start;
}
.ps-item strong {
  display: block;
  font-family: var(--display);
  font-size: 1.05rem;
}
.ps-item span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
}
.ps-price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--teal-ink);
}
.ps-compare {
  color: var(--muted);
}
.ps-save {
  font-weight: 700;
}
/* the heading row's compare and save cells keep the heading row's look */
.ps-head > :is(.ps-compare, .ps-save) {
  color: inherit;
}
.ps-head > span:nth-child(2) {
  background: color-mix(in srgb, var(--teal) 35%, var(--deep));
}
/* no column headings at all: no heading row */
.ps-head:not(:has(> span:not(:empty))) {
  display: none;
}
/* nothing compared (no other shops' prices, no savings in any row): item and price only; the
   heading row's compare and save cells hide with their columns (they stay in place, empty when
   the owner left a heading out, so the columns line up) */
.price-sheet:not(:has(.ps-row:not(.ps-head) > :is(.ps-compare, .ps-save):not(:empty))) .ps-row {
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr);
}
.price-sheet:not(:has(.ps-row:not(.ps-head) > :is(.ps-compare, .ps-save):not(:empty))) :is(.ps-compare, .ps-save) {
  display: none;
}
.price-examples {
  margin-top: 40px;
}
.price-examples h3 {
  margin: 0 0 4px;
}
.price-examples .intro {
  margin: 0 0 16px;
}
.price-sheet.compact .ps-row > span {
  padding-block: 10px;
}
.price-sheet.compact .ps-price {
  font-size: 1.05rem;
}

/* Calculator boxes ({{…|pricecalc}} in a .calc; site.js adds them up) */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.calc-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
.calc-box.is-on {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), var(--shadow);
}
.calc-box h3 {
  margin: 0;
  font-size: 1.1rem;
}
.calc-detail, .calc-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}
.calc-unit {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--teal-ink);
}
.calc-unit span {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
}
.calc-qty {
  display: flex;
  align-items: stretch;
  margin-top: auto;
  padding-top: 8px;
}
.calc-qty button {
  width: 44px;
  border: 1px solid var(--line);
  background: var(--sand);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
.calc-qty button:first-child {
  border-radius: 10px 0 0 10px;
}
.calc-qty button:last-child {
  border-radius: 0 10px 10px 0;
}
.calc-qty button:hover {
  background: var(--line);
}
.calc-qty input {
  flex: 1;
  min-width: 0;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-inline: 0;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: center;
}
.calc-qty input::-webkit-inner-spin-button, .calc-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc-qty input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc-line {
  margin: 0;
  text-align: right;
  font-weight: 700;
}
.calc-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--deep);
  color: #fff;
}
.calc-total strong {
  font-family: var(--display);
  font-size: 1.8rem;
}
.calc-min {
  flex-basis: 100%;
  text-align: right;
  font-size: 0.88rem;
  opacity: 0.85;
}
.calc-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}
@media (max-width: 620px) {
  .ps-row {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    font-size: 0.85rem;
  }
  .ps-row > span {
    padding: 10px 6px;
  }
  .ps-row > .ps-item {
    padding-left: 12px;
  }
  .ps-head {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }
  .ps-item strong {
    font-size: 0.95rem;
  }
  .ps-item span {
    font-size: 0.78rem;
  }
  .ps-price {
    font-size: 1rem;
  }
  .calc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .calc-box {
    padding: 14px;
  }
}