/*! ===========================================================================
    css/pass2-structure.bundle.css — Pass 2 structure layer (2026-08-04)

    Registered LAST in data/assets_registry.json so it wins the cascade over
    public-shell-2026 and tgz-unified-2026 without specificity escalation.

    Two jobs:
      1. THE ONE PARTNER COMPONENT. Every disclosed partner module on the site
         (.tpPartnerCatalog) now renders as the same quiet strip: small eyebrow,
         one scroll row of compact chip-cards, one caption-size disclosure. The
         old treatment was a 224px-tall card grid on a legacy --tgz-signal-*
         palette with a 2.15rem heading — an ad break wearing a different
         design system. Everything below derives from --tgz-ui-* tokens only.
      2. Structure for the pages rebuilt in this pass: /webcams/, the weather +
         live-ocean spot indexes, the retreat detail component, /book/{persona},
         food chips, /site-index/, /stories/ and the compare routes.

    Rules: 375px first, no horizontal page scroll (wide things scroll inside
    their own container), >=44px tap targets, visible focus, both themes,
    RTL-safe (logical properties where direction matters).
    ======================================================================== */

/* ---------------------------------------------------------------------------
   1. THE ONE PARTNER COMPONENT
   ------------------------------------------------------------------------ */
.tpPartnerCatalog {
  display: grid;
  gap: var(--tgz-ui-space-sm, 10px);
  margin-block: var(--tgz-ui-space-xl, 28px);
  padding: var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-surface, #fffaf1);
  box-shadow: none;
  max-width: 100%;
}
.tpPartnerCatalogHead { display: grid; gap: 3px; max-width: 68ch; }
.tpPartnerCatalogHead > span,
.tpPartnerCatalogCard > span {
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .68rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tgz-ui-teal, #0c7a76);
}
.tpPartnerCatalogHead h2 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.02rem, 3.2vw, 1.25rem);
  line-height: 1.2;
  font-weight: var(--tgz-ui-weight-black, 850);
  letter-spacing: -.02em;
  color: var(--tgz-ui-text, #172235);
}
/* The lead carries real verification duties (currency, baggage, board rules),
   so it stays in the DOM and stays readable — it is clamped, not deleted. */
.tpPartnerCatalogHead p {
  margin: 0;
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .82rem;
  line-height: 1.45;
  font-weight: 450;
  color: var(--tgz-ui-muted, #647083);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* One row of chips that scrolls inside itself — the page never scrolls sideways. */
.tpPartnerCatalogGrid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);
  gap: var(--tgz-ui-space-xs, 6px);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-block-end: 2px;
}
.tpPartnerCatalogCard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 0;
  min-width: 0;
  padding: var(--tgz-ui-space-sm, 10px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-card, #fff);
  scroll-snap-align: start;
}
.tpPartnerCatalogCard.isLocal {
  border-color: var(--tgz-ui-teal, #0c7a76);
  background: var(--tgz-ui-secondary, #fff2dd);
}
.tpPartnerCatalogCard.isPending { border-style: dashed; }
/* The <h3> repeated the partner name already shown in the eyebrow above it.
   Hidden visually, kept for the accessibility tree and for the heading outline. */
.tpPartnerCatalogCard h3 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.tpPartnerCatalogCard p {
  margin: 0;
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 450;
  color: var(--tgz-ui-muted, #647083);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tpPartnerCatalogCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block-start: auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-xs, 8px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .82rem;
  font-weight: var(--tgz-ui-weight-bold, 760);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.tpPartnerCatalogCta.isPrimary {
  border-color: var(--tgz-ui-primary, #10233a);
  background: var(--tgz-ui-primary, #10233a);
  color: var(--tgz-ui-primary-text, #fff);
}
.tpPartnerCatalogDisclosure {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .72rem;
  line-height: 1.4;
  color: var(--tgz-ui-muted, #647083);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tpPartnerCatalogDisclosure:hover,
.tpPartnerCatalogDisclosure:focus-within { -webkit-line-clamp: unset; }

/* 375px: the strip has to read as part of the page, not as an ad break. Measured
   at 375x812 — the same module used to stack four 224px-min-height cards, i.e.
   roughly 950px of ad before the next paragraph. `.section` from the shell layer
   also injects its own block padding here, which is why this resets it. */
@media (max-width: 700px) {
  .tpPartnerCatalog {
    gap: var(--tgz-ui-space-xs, 6px);
    padding-block: var(--tgz-ui-space-sm, 10px);
    margin-block: var(--tgz-ui-space-lg, 20px);
  }
  .tpPartnerCatalogGrid { grid-auto-columns: minmax(172px, 1fr); }
  .tpPartnerCatalogCard { padding: 8px 10px; gap: 3px; }
  .tpPartnerCatalogCta { min-height: 44px; padding: 6px 10px; font-size: .8rem; }
}

/* Stay22 hotel cards keep their photo + price (that IS the answer on a stay
   page), but the head follows the same quiet scale as the strip above. */
.stay22Cards, .gygSection { margin-block: var(--tgz-ui-space-xl, 28px); }
.stay22CardsHead h2, .gygSectionHead h2 {
  font-size: clamp(1.02rem, 3.2vw, 1.25rem) !important;
  line-height: 1.2 !important;
}
.stay22CardsHead p, .gygSectionHead p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.stay22CardsStale {
  margin: var(--tgz-ui-space-xxs, 4px) 0 0;
  color: var(--tgz-ui-accent, #a95c1e);
  font-weight: var(--tgz-ui-weight-semibold, 650);
}
.stay22CardsStale small { font-size: .78rem; }

/* ---------------------------------------------------------------------------
   2. SHARED SPOT INDEX (weather hub + live-ocean) — plain-HTML link grids
   ------------------------------------------------------------------------ */
.tgzSpotGridSection { margin-block: var(--tgz-ui-space-lg, 20px); }
.tgzSpotGridHead { display: grid; gap: 4px; max-width: 62ch; margin-block-end: var(--tgz-ui-space-sm, 10px); }
.tgzSpotGridHead h2 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tgz-ui-text, #172235);
}
.tgzSpotGridHead p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tgz-ui-muted, #647083);
}
/* 140px, not 160px: inside .oceanLockPanel the usable width at 375px is 299px,
   and 160px forced a single column — 21 cards became a 1600px list. Measured. */
.tgzSpotGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzSpotCard {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  min-height: 44px;
  padding: 10px 11px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  text-decoration: none;
}
.tgzSpotCard b {
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: .95rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.tgzSpotCard span, .tgzSpotCard small {
  font-size: .74rem;
  line-height: 1.25;
  color: var(--tgz-ui-muted, #647083);
}
.tgzSpotCardNow {
  font-style: normal;
  font-size: .78rem;
  font-weight: var(--tgz-ui-weight-bold, 760);
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzSpotCardNow small { color: inherit; font-weight: 500; }
.tgzSpotCard:hover { border-color: var(--tgz-ui-line-strong, #c6a77f); }
.tgzSpotCard.is-active {
  border-color: var(--tgz-ui-teal, #0c7a76);
  background: var(--tgz-ui-secondary, #fff2dd);
}
.tgzSpotGridFoot { margin: var(--tgz-ui-space-sm, 10px) 0 0; }
/* Text chip — the ONLY way /webcams/ is surfaced on forecast + ocean routes. */
.tgzSpotGridChip, .tgzWebcamChip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  font-size: .84rem;
  font-weight: var(--tgz-ui-weight-bold, 760);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   3. /webcams/
   ------------------------------------------------------------------------ */
.tgzWebcamsMain { display: grid; gap: var(--tgz-ui-space-lg, 20px); padding-block: var(--tgz-ui-space-lg, 20px) var(--tgz-ui-space-xl, 28px); }
.tgzWebcamsHero { display: grid; gap: var(--tgz-ui-space-xs, 6px); max-width: 68ch; }
.tgzWebcamsEyebrow {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzWebcamsHero h1 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.65rem, 7vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--tgz-ui-text, #172235);
}
.tgzWebcamsLead { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--tgz-ui-muted, #647083); }
.tgzWebcamsNote, .tgzWebcamsCredit, .tgzWebcamsEmpty {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--tgz-ui-muted, #647083);
}
.tgzWebcamsEmpty {
  padding: var(--tgz-ui-space-md, 14px);
  border: 1px dashed var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
}
.tgzWebcamsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: var(--tgz-ui-space-sm, 10px);
}
.tgzWebcamCard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: var(--tgz-ui-space-sm, 10px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
}
.tgzWebcamCard img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
}
.tgzWebcamCard h2, .tgzWebcamCard h3 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--tgz-ui-text, #172235);
  overflow-wrap: anywhere;
}
.tgzWebcamMeta { margin: 0; font-size: .76rem; line-height: 1.35; color: var(--tgz-ui-muted, #647083); }
.tgzWebcamCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-xs, 8px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  font-size: .84rem;
  font-weight: var(--tgz-ui-weight-bold, 760);
  text-decoration: none;
}
.tgzWebcamsNext { display: grid; gap: var(--tgz-ui-space-sm, 10px); }
.tgzWebcamsNext h2 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.15;
  color: var(--tgz-ui-text, #172235);
}
.tgzWebcamsNextGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzWebcamsNextGrid a {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 12px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  text-decoration: none;
}
.tgzWebcamsNextGrid b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: .98rem; }
.tgzWebcamsNextGrid span { font-size: .8rem; line-height: 1.4; color: var(--tgz-ui-muted, #647083); }

/* ---------------------------------------------------------------------------
   4. RETREAT DETAIL COMPONENT (/retreats/{persona}/)
   ------------------------------------------------------------------------ */
.tgzRetreatBadges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tgz-ui-space-xs, 6px);
  margin-block: var(--tgz-ui-space-sm, 10px);
}
.tgzRetreatBadge {
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: rgba(10, 18, 28, .52);
  backdrop-filter: blur(6px);
  color: #fff;
}
.tgzRetreatBadge span { font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.tgzRetreatBadge b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: .96rem; line-height: 1.1; }
.tgzRetreatBadge small { font-size: .66rem; opacity: .82; }

.tgzRetreatMain { display: grid; gap: var(--tgz-ui-space-xl, 28px); padding-block: var(--tgz-ui-space-lg, 20px); }
.tgzRetreatSection { display: grid; gap: var(--tgz-ui-space-sm, 10px); min-width: 0; }
.tgzRetreatSection > h2 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.028em;
  color: var(--tgz-ui-text, #172235);
}
.tgzRetreatSection--prose p { margin: 0; max-width: 68ch; font-size: 1rem; line-height: 1.65; color: var(--tgz-ui-muted, #647083); }

.tgzRetreatIncluded {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzRetreatIncluded__item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: var(--tgz-ui-space-sm, 10px) var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
}
.tgzRetreatIncluded__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-secondary, #fff2dd);
  color: var(--tgz-ui-accent, #a95c1e);
  font-size: .78rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.tgzRetreatIncluded__item p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--tgz-ui-text, #172235); }

.tgzRetreatDay { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tgzRetreatDay__step {
  display: grid;
  grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
  gap: var(--tgz-ui-space-md, 14px);
  padding-block: var(--tgz-ui-space-sm, 10px);
  border-block-start: 1px solid var(--tgz-ui-line, #e4d4bf);
}
.tgzRetreatDay__step:first-child { border-block-start: 0; }
.tgzRetreatDay__step b {
  font-family: var(--tgz-ui-font-body, Inter, sans-serif);
  font-size: .82rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--tgz-ui-teal, #0c7a76);
  padding-block-start: 2px;
}
.tgzRetreatDay__step p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--tgz-ui-text, #172235); }

.tgzRetreatFaq { display: grid; gap: var(--tgz-ui-space-xs, 6px); }
.tgzRetreatFaq__item {
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  overflow: hidden;
}
.tgzRetreatFaq__item > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--tgz-ui-space-md, 14px);
  font-weight: var(--tgz-ui-weight-bold, 760);
  color: var(--tgz-ui-text, #172235);
}
.tgzRetreatFaq__item > summary::-webkit-details-marker { display: none; }
.tgzRetreatFaq__item > summary::after {
  content: "+";
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
  color: var(--tgz-ui-teal, #0c7a76);
  font-weight: 850;
}
.tgzRetreatFaq__item[open] > summary::after { content: "\2013"; }
.tgzRetreatFaq__item > p { margin: 0; padding: 0 var(--tgz-ui-space-md, 14px) var(--tgz-ui-space-md, 14px); font-size: .93rem; line-height: 1.6; color: var(--tgz-ui-muted, #647083); }

.tgzRetreatRelated {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzRetreatRelated__card {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 12px var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  text-decoration: none;
}
.tgzRetreatRelated__card b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: 1rem; line-height: 1.2; }
.tgzRetreatRelated__card span { font-size: .82rem; line-height: 1.4; color: var(--tgz-ui-muted, #647083); }

/* Sticky CTA — mobile only. On desktop the hero button is still on screen.
   Two things already live at the bottom of every mobile page: the site quick-nav
   (z 6500, 62px tall, sitting ~70px off the bottom) and the back-to-top button
   (z 6510, bottom:98px, right:12px). Measured at 375x812 rather than guessed. The
   bar is parked clear of the quick-nav, and the back-to-top button is suppressed
   on this page type — two competing floating affordances in the same corner is
   worse than not having one of them. */
.tgzRetreatStickyCta { display: none; }
@media (max-width: 860px) {
  .tgzRetreatStickyCta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 6400;
    display: grid;
    gap: 2px;
    justify-items: center;
    padding: 10px 12px 10px;
    margin-block-end: calc(var(--tgz-quicknav-height, 62px) + 16px + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--tgz-ui-line, #e4d4bf);
    background: var(--tgz-ui-surface, #fffaf1);
    box-shadow: 0 -8px 24px rgba(23, 34, 53, .10);
  }
  .tgzRetreatStickyCta .btn { width: 100%; min-height: 46px; }
  .tgzRetreatStickyCta small { font-size: .7rem; line-height: 1.3; text-align: center; color: var(--tgz-ui-muted, #647083); }
  .tgzRetreatPage .tgzBackTop { display: none !important; }
  .tgzRetreatPage .tgzRetreatMain { padding-block-end: 180px; }
}

/* ---------------------------------------------------------------------------
   5. /book/{persona} — conversion page
   ------------------------------------------------------------------------ */
.tgzBookPersonaPage .tgzRetreatBadges { margin-block: var(--tgz-ui-space-sm, 10px) 0; }
/* Off the hero photo here, so the badges take the page's own surface. */
.tgzBookPersonaPage .tgzRetreatBadge {
  border-color: var(--tgz-ui-line, #e4d4bf);
  background: var(--tgz-ui-surface-alt, #f4eadc);
  backdrop-filter: none;
  color: var(--tgz-ui-text, #172235);
}
.tgzBookPersonaPage .tgzRetreatBadge span { color: var(--tgz-ui-teal, #0c7a76); opacity: 1; }
.tgzBookPersonaPage .tgzRetreatBadge small { color: var(--tgz-ui-muted, #647083); opacity: 1; }
.tgzBookPersonaSteps {
  list-style: none;
  counter-reset: bookstep;
  margin: var(--tgz-ui-space-md, 14px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzBookPersonaSteps > li {
  counter-increment: bookstep;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: var(--tgz-ui-space-sm, 10px) var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tgz-ui-text, #172235);
}
.tgzBookPersonaSteps > li::before {
  content: counter(bookstep);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-secondary, #fff2dd);
  color: var(--tgz-ui-accent, #a95c1e);
  font-size: .76rem;
  font-weight: 850;
}
.tgzBookPersonaDetail {
  display: grid;
  gap: 3px;
  margin-block-start: var(--tgz-ui-space-md, 14px);
  min-height: 44px;
  padding: 12px var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
  color: var(--tgz-ui-text, #172235);
  text-decoration: none;
}
.tgzBookPersonaDetail b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: 1rem; }
.tgzBookPersonaDetail span { font-size: .82rem; line-height: 1.4; color: var(--tgz-ui-muted, #647083); }
.tgzBookPersonaRelated { margin-block-start: var(--tgz-ui-space-md, 14px); }

/* ---------------------------------------------------------------------------
   6. FOOD ROUTE CARDS — tag dump -> chips, source line -> badge
   ------------------------------------------------------------------------ */
.tgzFoodUseCase {
  display: block;
  margin: 0 0 3px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzFoodChips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: var(--tgz-ui-space-xs, 6px) 0 0;
  padding: 0;
  list-style: none;
}
.tgzFoodChip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
  color: var(--tgz-ui-muted, #647083);
  font-size: .72rem;
  font-weight: var(--tgz-ui-weight-semibold, 650);
  line-height: 1.3;
  white-space: nowrap;
}
.tgzFoodSourceBadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: var(--tgz-ui-space-xs, 6px) 0 0;
  padding: 3px 9px;
  border: 1px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: transparent;
  color: var(--tgz-ui-teal, #0c7a76);
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.35;
}
.tgzFoodSourceBadge::before { content: "\2713"; font-size: .78rem; }
.tgzFoodClamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   7. /site-index/ — filter + collapsible families
   ------------------------------------------------------------------------ */
.tgzIndexFilter { display: grid; gap: 5px; margin-block: var(--tgz-ui-space-md, 14px); max-width: 480px; }
.tgzIndexFilter label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tgz-ui-teal, #0c7a76); }
.tgzIndexFilter input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  font: inherit;
  font-size: 1rem;
}
.tgzIndexFilterCount { font-size: .8rem; color: var(--tgz-ui-muted, #647083); }
.tgzIndexGroup {
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  margin-block-end: var(--tgz-ui-space-xs, 6px);
  overflow: hidden;
}
.tgzIndexGroup > summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px var(--tgz-ui-space-md, 14px);
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tgz-ui-text, #172235);
}
.tgzIndexGroup > summary::-webkit-details-marker { display: none; }
.tgzIndexGroup > summary::after {
  content: "+";
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzIndexGroup[open] > summary::after { content: "\2013"; }
.tgzIndexGroup__count { font-size: .76rem; font-weight: 650; color: var(--tgz-ui-muted, #647083); }
.tgzIndexGroup[hidden] { display: none !important; }
.tgzIndexEmpty { padding: var(--tgz-ui-space-md, 14px); color: var(--tgz-ui-muted, #647083); }

/* ---------------------------------------------------------------------------
   8. /stories/ — designed empty state
   ------------------------------------------------------------------------ */
.tgzStoriesEmpty {
  display: grid;
  gap: var(--tgz-ui-space-xs, 6px);
  justify-items: start;
  padding: var(--tgz-ui-space-lg, 20px);
  border: 1px dashed var(--tgz-ui-line-strong, #c6a77f);
  border-radius: var(--tgz-ui-radius-lg, 24px);
  background: var(--tgz-ui-surface-alt, #f4eadc);
}
.tgzStoriesEmpty h3 {
  margin: 0;
  font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  line-height: 1.2;
  color: var(--tgz-ui-text, #172235);
}
.tgzStoriesEmpty p { margin: 0; max-width: 56ch; font-size: .95rem; line-height: 1.55; color: var(--tgz-ui-muted, #647083); }
.tgzStoriesEmpty__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block-start: var(--tgz-ui-space-xs, 6px);
  padding: 10px 16px;
  border-radius: var(--tgz-ui-radius-xs, 8px);
  background: var(--tgz-ui-primary, #10233a);
  color: var(--tgz-ui-primary-text, #fff);
  font-weight: var(--tgz-ui-weight-bold, 760);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   9. COMPARE / DECISION COMPONENTS (tamraght-vs-agadir + the 4 compare routes)
   ------------------------------------------------------------------------ */
.tgzCompareWrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
}
.tgzCompareTable { width: 100%; min-width: 520px; border-collapse: collapse; }
.tgzCompareTable th, .tgzCompareTable td {
  padding: 11px var(--tgz-ui-space-md, 14px);
  border-block-start: 1px solid var(--tgz-ui-line, #e4d4bf);
  text-align: start;
  vertical-align: top;
  font-size: .9rem;
  line-height: 1.45;
}
.tgzCompareTable thead th {
  border-block-start: 0;
  background: var(--tgz-ui-surface-alt, #f4eadc);
  color: var(--tgz-ui-teal, #0c7a76);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tgzCompareTable tbody th { font-weight: 800; color: var(--tgz-ui-text, #172235); }
.tgzCompareTable td { color: var(--tgz-ui-muted, #647083); }

.tgzChooseCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--tgz-ui-space-xs, 6px);
  margin-block-start: var(--tgz-ui-space-md, 14px);
}
.tgzChooseCard {
  display: grid;
  gap: 5px;
  align-content: start;
  padding: var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
}
.tgzChooseCard b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: 1.02rem; line-height: 1.2; color: var(--tgz-ui-text, #172235); }
.tgzChooseCard p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--tgz-ui-muted, #647083); }

/* Reused by the four differentiated compare routes. */
.tgzTimeline { list-style: none; margin: var(--tgz-ui-space-md, 14px) 0 0; padding: 0; display: grid; gap: 0; }
.tgzTimeline > li {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: var(--tgz-ui-space-md, 14px);
  padding-block: var(--tgz-ui-space-sm, 10px);
  border-block-start: 1px solid var(--tgz-ui-line, #e4d4bf);
}
.tgzTimeline > li:first-child { border-block-start: 0; }
.tgzTimeline b {
  font-size: .8rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  color: var(--tgz-ui-teal, #0c7a76);
  padding-block-start: 2px;
}
.tgzTimeline span { font-size: .94rem; line-height: 1.55; color: var(--tgz-ui-text, #172235); }

/* ---------------------------------------------------------------------------
   10. QUALITY FLOOR
   ------------------------------------------------------------------------ */
.tgzWebcamsPage, .tgzRetreatPage { overflow-x: hidden; }
.tgzSpotCard:focus-visible,
.tgzWebcamCta:focus-visible,
.tgzSpotGridChip:focus-visible,
.tgzWebcamChip:focus-visible,
.tgzRetreatRelated__card:focus-visible,
.tgzBookPersonaDetail:focus-visible,
.tpPartnerCatalogCta:focus-visible,
.tgzWebcamsNextGrid a:focus-visible,
.tgzStoriesEmpty__cta:focus-visible {
  outline: 3px solid var(--tgz-ui-focus, #0f8f8a);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tgzSpotCard, .tgzWebcamCard, .tpPartnerCatalogCard { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   11. DARK THEME. The tokens already flip, so only the two places that use a
       literal (the hero badge scrim and the partner strip surface) need help.
   ------------------------------------------------------------------------ */
/* Verified at 375x812 with the theme actually toggled, not assumed.
   The !important flags are deliberate and are how the rest of this codebase does
   theming: css/theme-phase407.bundle.css alone carries 786 of them, and several
   light-mode component rules (e.g. `.related a{background:linear-gradient(...#fff)}`
   in core-pre-base) have no dark counterpart, so without the flag anchors in these
   components painted white on a dark page. The token
   values are restated as literals here because on some routes (/live-ocean/ is
   the one that caught this) the --tgz-ui-* fallbacks were what actually painted,
   leaving white cards on a dark page. Both attribute hooks the site uses are
   covered: data-theme and data-theme-mode. */
:where(html[data-theme="dark"], html[data-theme-mode="dark"]) {
  --tgz-p2-card: #101f29;
  --tgz-p2-surface: #0d1a22;
  --tgz-p2-surface-alt: #132530;
  --tgz-p2-line: #29404b;
  --tgz-p2-line-strong: #4b6a73;
  --tgz-p2-text: #f7efe3;
  --tgz-p2-muted: #b7c2c4;
  --tgz-p2-accent: #d58b43;
}
html[data-theme="dark"] .tgzRetreatBadge,
html[data-theme-mode="dark"] .tgzRetreatBadge {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(4, 12, 18, .62) !important;
}
html[data-theme="dark"] :is(.tpPartnerCatalog, .tgzStoriesEmpty, .tgzWebcamsEmpty),
html[data-theme-mode="dark"] :is(.tpPartnerCatalog, .tgzStoriesEmpty, .tgzWebcamsEmpty) {
  background: var(--tgz-p2-surface, #0d1a22) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
}
html[data-theme="dark"] :is(.tpPartnerCatalogCard, .tpPartnerCatalogCta, .tgzSpotCard, .tgzSpotGridChip, .tgzWebcamChip, .tgzWebcamCard, .tgzWebcamCta, .tgzRetreatIncluded__item, .tgzRetreatFaq__item, .tgzRetreatRelated__card, .tgzBookPersonaSteps > li, .tgzChooseCard, .tgzCompareWrap, .tgzWebcamsNextGrid a, .tgzIndexGroup, .tgzIndexFilter input),
html[data-theme-mode="dark"] :is(.tpPartnerCatalogCard, .tpPartnerCatalogCta, .tgzSpotCard, .tgzSpotGridChip, .tgzWebcamChip, .tgzWebcamCard, .tgzWebcamCta, .tgzRetreatIncluded__item, .tgzRetreatFaq__item, .tgzRetreatRelated__card, .tgzBookPersonaSteps > li, .tgzChooseCard, .tgzCompareWrap, .tgzWebcamsNextGrid a, .tgzIndexGroup, .tgzIndexFilter input) {
  background: var(--tgz-p2-card, #101f29) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
}
html[data-theme="dark"] :is(.tgzSpotCard.is-active, .tgzBookPersonaDetail, .tgzRetreatIncluded__mark, .tgzBookPersonaSteps > li::before, .tgzRetreatFaq__item > summary::after, .tgzIndexGroup > summary::after, .tpPartnerCatalogCard.isLocal, .tgzFoodChip, .tgzCompareTable thead th),
html[data-theme-mode="dark"] :is(.tgzSpotCard.is-active, .tgzBookPersonaDetail, .tgzRetreatIncluded__mark, .tgzBookPersonaSteps > li::before, .tgzRetreatFaq__item > summary::after, .tgzIndexGroup > summary::after, .tpPartnerCatalogCard.isLocal, .tgzFoodChip, .tgzCompareTable thead th) {
  background: var(--tgz-p2-surface-alt, #132530) !important;
  border-color: var(--tgz-p2-line-strong, #4b6a73) !important;
}
html[data-theme="dark"] :is(.tgzSpotCard span, .tgzSpotCard small, .tgzWebcamMeta, .tgzRetreatRelated__card span, .tgzBookPersonaDetail span, .tgzChooseCard p, .tgzCompareTable td, .tgzWebcamsNextGrid span, .tgzWebcamsLead, .tgzWebcamsNote, .tgzWebcamsCredit, .tpPartnerCatalogHead p, .tpPartnerCatalogCard p, .tpPartnerCatalogDisclosure, .tgzFoodChip),
html[data-theme-mode="dark"] :is(.tgzSpotCard span, .tgzSpotCard small, .tgzWebcamMeta, .tgzRetreatRelated__card span, .tgzBookPersonaDetail span, .tgzChooseCard p, .tgzCompareTable td, .tgzWebcamsNextGrid span, .tgzWebcamsLead, .tgzWebcamsNote, .tgzWebcamsCredit, .tpPartnerCatalogHead p, .tpPartnerCatalogCard p, .tpPartnerCatalogDisclosure, .tgzFoodChip) {
  color: var(--tgz-p2-muted, #b7c2c4) !important;
}
html[data-theme="dark"] .tgzRetreatStickyCta,
html[data-theme-mode="dark"] .tgzRetreatStickyCta {
  background: var(--tgz-p2-surface, #0d1a22) !important;
  border-block-start-color: var(--tgz-p2-line, #29404b);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not([data-theme-mode="light"]) .tgzRetreatBadge {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(4, 12, 18, .62) !important;
  }
}

/* ---------------------------------------------------------------------------
   12. RTL. Logical properties cover most of it; these are the exceptions.
   ------------------------------------------------------------------------ */
html[dir="rtl"] .tgzRetreatDay__step b,
html[dir="rtl"] .tgzTimeline b { direction: ltr; unicode-bidi: isolate; text-align: end; }
html[dir="rtl"] .tgzCompareTable th,
html[dir="rtl"] .tgzCompareTable td { text-align: right; }

/* ---------------------------------------------------------------------------
   13. DARK THEME, LAST WORD.
   Anchor-based cards (.tgzRetreatRelated__card, .tgzSpotGridChip,
   .tgzWebcamCta, .tgzWebcamsNextGrid a, .tpPartnerCatalogCta) kept painting
   white on a dark page even with !important on the block above: something in
   the older layers wins for <a> specifically, and it is not introspectable at
   runtime (Chrome omits var()-shorthand backgrounds from cssText, so the rule
   cannot be identified from the page). Rather than keep hunting it, these
   selectors are qualified with `html … body a…` so they outrank anything that
   is not an id, and they use the background-color longhand so a shorthand
   cannot reset them. Verified at 375x812 with the theme toggled.
   ------------------------------------------------------------------------ */
html[data-theme="dark"] body a.tgzRetreatRelated__card,
html[data-theme-mode="dark"] body a.tgzRetreatRelated__card,
html[data-theme="dark"] body a.tgzSpotCard,
html[data-theme-mode="dark"] body a.tgzSpotCard,
html[data-theme="dark"] body a.tgzSpotGridChip,
html[data-theme-mode="dark"] body a.tgzSpotGridChip,
html[data-theme="dark"] body a.tgzWebcamChip,
html[data-theme-mode="dark"] body a.tgzWebcamChip,
html[data-theme="dark"] body a.tgzWebcamCta,
html[data-theme-mode="dark"] body a.tgzWebcamCta,
html[data-theme="dark"] body a.tpPartnerCatalogCta,
html[data-theme-mode="dark"] body a.tpPartnerCatalogCta,
html[data-theme="dark"] body a.tgzBookPersonaDetail,
html[data-theme-mode="dark"] body a.tgzBookPersonaDetail,
html[data-theme="dark"] body .tgzWebcamsNextGrid a,
html[data-theme-mode="dark"] body .tgzWebcamsNextGrid a {
  background-color: #101f29 !important;
  background-image: none !important;
  border-color: #29404b !important;
  color: #f7efe3 !important;
}
html[data-theme="dark"] body a.tgzSpotCard.is-active,
html[data-theme-mode="dark"] body a.tgzSpotCard.is-active,
html[data-theme="dark"] body a.tgzBookPersonaDetail,
html[data-theme-mode="dark"] body a.tgzBookPersonaDetail {
  background-color: #132530 !important;
  border-color: #4b6a73 !important;
}
html[data-theme="dark"] body a.tpPartnerCatalogCta.isPrimary,
html[data-theme-mode="dark"] body a.tpPartnerCatalogCta.isPrimary {
  background-color: #71d7c2 !important;
  border-color: #71d7c2 !important;
  color: #071015 !important;
}

/* ============================================================================
   PARTNER STRIP DENSITY — 2026-08-04 (owner: the strip is still too tall at
   375px). Target ~220px for the whole section on a phone, down from ~314px.
   Everything here is scoped to .tpPartnerCatalog so the shared .fold component
   keeps its normal size everywhere else, and the 44px tap floor is preserved.
   ============================================================================ */
@media (max-width: 600px) {
  .tpPartnerCatalog { padding: 8px 0; gap: 5px; }

  /* The intro disclosure summary wrapped to two 25px lines inside 32px of
     padding — 83px to say one sentence. One line, tighter box. */
  .tpPartnerCatalog > .fold { margin: 8px 0; }
  /* core-pre-base.bundle.css sets `details.fold summary{padding:16px 18px
     !important}` globally, so this scoped override has to answer in kind. */
  .tpPartnerCatalog > details.fold > summary {
    padding: 9px 12px !important;
    font-size: .94rem;
    line-height: 1.28;
    gap: 8px;
  }

  /* One-line body clamp: the card's job is partner + benefit + action, and the
     second line was always the same qualifier the disclosure repeats below. */
  .tpPartnerCatalogCard { padding: 7px 10px; }
  .tpPartnerCatalogCard > p {
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }
  /* Focus/hover still reveals the full sentence — nothing is lost, only folded. */
  .tpPartnerCatalogCard:hover > p,
  .tpPartnerCatalogCard:focus-within > p {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  /* Tap floor is not negotiable. */
  .tpPartnerCatalogCta { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   14. WAVE B.3a — /book/ CONSULTATION-CALL DESK (EN-gated markup, law #22).
   The hub's job flipped: book a call first, the self-serve ribbon sits below.
   Same tokens + dark-theme conventions as sections 5/11 above.
   ------------------------------------------------------------------------ */
.tgzCallDesk { margin-block-start: var(--tgz-ui-space-md, 14px); }
.tgzCallGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--tgz-ui-space-md, 14px);
  align-items: start;
}
@media (max-width: 860px) { .tgzCallGrid { grid-template-columns: 1fr; } }

.tgzCallCard {
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-block-start: 4px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  padding: var(--tgz-ui-space-md, 14px) clamp(14px, 3vw, 22px) clamp(14px, 3vw, 20px);
}
.tgzCallKicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzCallCard h2 { margin: 6px 0 4px; font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); }
.tgzCallLead { margin: 0 0 var(--tgz-ui-space-sm, 10px); color: var(--tgz-ui-muted, #647083); font-size: .95rem; line-height: 1.5; }
.tgzCallForm label small { display: block; color: var(--tgz-ui-muted, #647083); font-weight: 400; }

.tgzCallChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
  margin: var(--tgz-ui-space-sm, 10px) 0 0;
  padding: 0;
  min-inline-size: 0;
}
.tgzCallChips legend { flex-basis: 100%; padding: 0; margin: 0 0 2px; font-weight: 700; font-size: .9rem; }
.tgzCallChips legend small { font-weight: 400; color: var(--tgz-ui-muted, #647083); }
.tgzCallChip { position: relative; display: inline-flex; }
.tgzCallChip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tgzCallChip span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-surface, #fffaf1);
  color: var(--tgz-ui-text, #172235);
  font-size: .88rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.tgzCallChip input:checked + span {
  border-color: var(--tgz-ui-teal, #0c7a76);
  box-shadow: inset 0 0 0 1px var(--tgz-ui-teal, #0c7a76);
  background: var(--tgz-ui-secondary, #fff2dd);
}
.tgzCallChip input:focus-visible + span {
  outline: 2px solid var(--tgz-ui-teal, #0c7a76);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .tgzCallChip span { transition: none; } }

.tgzCallTrust {
  margin: var(--tgz-ui-space-sm, 10px) 0 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: 0 var(--tgz-ui-radius-sm, 10px) var(--tgz-ui-radius-sm, 10px) 0;
  background: var(--tgz-ui-surface-alt, #f4eadc);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--tgz-ui-text, #172235);
}

.tgzCallSteps {
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-surface, #fffaf1);
  padding: var(--tgz-ui-space-md, 14px);
}
.tgzCallSteps h3 { margin: 0 0 8px; font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: 1.05rem; }
.tgzCallSteps ol {
  list-style: none;
  counter-reset: callstep;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tgz-ui-space-xs, 6px);
}
.tgzCallSteps ol > li {
  counter-increment: callstep;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: var(--tgz-ui-space-sm, 10px) var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--tgz-ui-text, #172235);
}
.tgzCallSteps ol > li::before {
  content: counter(callstep);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-secondary, #fff2dd);
  color: var(--tgz-ui-accent, #a95c1e);
  font-size: .76rem;
  font-weight: 850;
}
.tgzCallCred, .tgzCallWa { margin: var(--tgz-ui-space-sm, 10px) 0 0; font-size: .85rem; line-height: 1.5; color: var(--tgz-ui-muted, #647083); }
.tgzCallWa a { color: var(--tgz-ui-teal, #0c7a76); font-weight: 700; }
.tgzCallSelfServe { margin-block-end: var(--tgz-ui-space-sm, 10px); }
.tgzCallSelfServe h2 { margin: 0 0 4px; }
.tgzCallSelfServe p { margin: 0; color: var(--tgz-ui-muted, #647083); font-size: .92rem; }

/* Dark theme — same recipe as the section-11 blocks above. */
html[data-theme="dark"] :is(.tgzCallCard, .tgzCallSteps, .tgzCallSteps ol > li),
html[data-theme-mode="dark"] :is(.tgzCallCard, .tgzCallSteps, .tgzCallSteps ol > li) {
  background: var(--tgz-p2-card, #101f29) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
}
html[data-theme="dark"] .tgzCallCard,
html[data-theme-mode="dark"] .tgzCallCard {
  border-block-start-color: #71d7c2 !important;
}
html[data-theme="dark"] .tgzCallChip span,
html[data-theme-mode="dark"] .tgzCallChip span {
  background: var(--tgz-p2-surface, #0d1a22) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
}
html[data-theme="dark"] .tgzCallChip input:checked + span,
html[data-theme-mode="dark"] .tgzCallChip input:checked + span {
  background: var(--tgz-p2-surface-alt, #132530) !important;
  border-color: #71d7c2 !important;
  box-shadow: inset 0 0 0 1px #71d7c2;
}
html[data-theme="dark"] .tgzCallChip input:focus-visible + span,
html[data-theme-mode="dark"] .tgzCallChip input:focus-visible + span {
  outline-color: #71d7c2;
}
html[data-theme="dark"] .tgzCallSteps ol > li::before,
html[data-theme-mode="dark"] .tgzCallSteps ol > li::before {
  background: var(--tgz-p2-surface-alt, #132530) !important;
  border: 1px solid var(--tgz-p2-line-strong, #4b6a73);
}
html[data-theme="dark"] .tgzCallTrust,
html[data-theme-mode="dark"] .tgzCallTrust {
  background: var(--tgz-p2-surface-alt, #132530) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
  border-inline-start-color: #71d7c2 !important;
}
html[data-theme="dark"] :is(.tgzCallLead, .tgzCallCred, .tgzCallWa, .tgzCallChips legend small, .tgzCallForm label small, .tgzCallSelfServe p),
html[data-theme-mode="dark"] :is(.tgzCallLead, .tgzCallCred, .tgzCallWa, .tgzCallChips legend small, .tgzCallForm label small, .tgzCallSelfServe p) {
  color: var(--tgz-p2-muted, #b7c2c4) !important;
}
html[data-theme="dark"] :is(.tgzCallKicker, .tgzCallWa a),
html[data-theme-mode="dark"] :is(.tgzCallKicker, .tgzCallWa a) {
  color: #71d7c2 !important;
}

/* ---------------------------------------------------------------------------
   15. WAVE C.2 — THE DAY DESK (law #32 D2, EN-gated markup).
   Own day-trip inventory sold above the affiliate blocks; same tokens + dark
   recipe as sections 5/14.
   ------------------------------------------------------------------------ */
.tgzDayDesk { margin-block-start: var(--tgz-ui-space-md, 14px); }
.tgzDayDesk__head { margin-block-end: var(--tgz-ui-space-sm, 10px); }
.tgzDayDesk__kicker {
  display: inline-block;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tgz-ui-teal, #0c7a76);
}
.tgzDayDesk__head h2 { margin: 4px 0; font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); }
.tgzDayDesk__head p { margin: 0; color: var(--tgz-ui-muted, #647083); font-size: .92rem; line-height: 1.5; }
.tgzDayDesk__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--tgz-ui-space-sm, 10px);
}
.tgzDayDesk__card {
  display: grid;
  gap: 6px;
  padding: var(--tgz-ui-space-sm, 10px) var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
}
.tgzDayDesk__card b { font-family: var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); font-size: 1.02rem; }
.tgzDayDesk__price { font-weight: 850; color: var(--tgz-ui-teal, #0c7a76); }
.tgzDayDesk__price small { font-weight: 600; color: var(--tgz-ui-muted, #647083); }
.tgzDayDesk__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-teal, #0c7a76);
  color: #fff;
  font: 850 .88rem/1 Inter, system-ui, sans-serif;
  text-decoration: none;
}
.tgzDayDesk__cta:focus-visible { outline: 2px solid var(--tgz-ui-teal, #0c7a76); outline-offset: 2px; }
.tgzDayDesk__foot { margin: var(--tgz-ui-space-sm, 10px) 0 0; font-size: .85rem; line-height: 1.5; color: var(--tgz-ui-muted, #647083); }
.tgzDayDesk__foot a { color: var(--tgz-ui-teal, #0c7a76); font-weight: 700; }

html[data-theme="dark"] .tgzDayDesk__card,
html[data-theme-mode="dark"] .tgzDayDesk__card {
  background: var(--tgz-p2-card, #101f29) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
}
html[data-theme="dark"] :is(.tgzDayDesk__head p, .tgzDayDesk__foot, .tgzDayDesk__price small),
html[data-theme-mode="dark"] :is(.tgzDayDesk__head p, .tgzDayDesk__foot, .tgzDayDesk__price small) {
  color: var(--tgz-p2-muted, #b7c2c4) !important;
}
html[data-theme="dark"] :is(.tgzDayDesk__kicker, .tgzDayDesk__price, .tgzDayDesk__foot a),
html[data-theme-mode="dark"] :is(.tgzDayDesk__kicker, .tgzDayDesk__price, .tgzDayDesk__foot a) {
  color: #71d7c2 !important;
}
html[data-theme="dark"] .tgzDayDesk__cta,
html[data-theme-mode="dark"] .tgzDayDesk__cta {
  background: #71d7c2 !important;
  border-color: #71d7c2 !important;
  color: #031316 !important;
}

/* C.3 — arrival-desk variants of the day-desk card (text + quiet-link cards). */
.tgzDayDesk__text { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--tgz-ui-muted, #647083); }
.tgzDayDesk__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tgz-ui-teal, #0c7a76);
  font-weight: 800;
  text-decoration: none;
}
.tgzDayDesk__link:hover, .tgzDayDesk__link:focus-visible { text-decoration: underline; outline: none; }
html[data-theme="dark"] .tgzDayDesk__text,
html[data-theme-mode="dark"] .tgzDayDesk__text { color: var(--tgz-p2-muted, #b7c2c4) !important; }
html[data-theme="dark"] .tgzDayDesk__link,
html[data-theme-mode="dark"] .tgzDayDesk__link { color: #71d7c2 !important; }

/* C.7 — concierge table lane on the food routes. */
.tgzFoodConcierge {
  margin: var(--tgz-ui-space-sm, 10px) 0 0;
  padding: 10px 12px;
  border-inline-start: 3px solid var(--tgz-ui-teal, #0c7a76);
  border-radius: 0 var(--tgz-ui-radius-sm, 10px) var(--tgz-ui-radius-sm, 10px) 0;
  background: var(--tgz-ui-surface-alt, #f4eadc);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tgz-ui-text, #172235);
}
.tgzFoodConcierge a { color: var(--tgz-ui-teal, #0c7a76); font-weight: 800; }
html[data-theme="dark"] .tgzFoodConcierge,
html[data-theme-mode="dark"] .tgzFoodConcierge {
  background: var(--tgz-p2-surface-alt, #132530) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
  border-inline-start-color: #71d7c2 !important;
}
html[data-theme="dark"] .tgzFoodConcierge a,
html[data-theme-mode="dark"] .tgzFoodConcierge a { color: #71d7c2 !important; }

/* --- Photo cards for every desk. Was scoped to the --ocean modifier, which
   left 7 of 8 own-inventory desks as walls of text -- the single biggest
   reason the money surfaces read as generic. The rule only bites on cards
   that actually carry an .tgzDayDesk__img, so desks without art are
   unaffected. Fixed aspect-ratio reserves the box before the image arrives
   (zero CLS). --- */
.tgzDayDesk__img {
  display: block;
  /* Sized explicitly, on purpose. Two earlier attempts were wrong:
     `width: calc(100% + 28px)` was clamped by the global
     `img,svg,video,canvas,iframe{max-width:100%}` reset, and dropping the width
     to rely on `justify-self:stretch` does not stretch a replaced element --
     the <img> fell back to its intrinsic width="640" and blew the grid out to
     1917px on a 1692px viewport. width:100% + max-width:100% is deterministic
     at every container size; the card keeps a small inset instead of a full
     bleed, which is the right trade for never overflowing. */
  width: 100%;
  max-width: 100%;
  margin: 0 0 4px;
  /* Fully rounded now that the image is inset rather than bleeding to the
     card edge (the old rule rounded only the top two corners). */
  border-radius: var(--tgz-ui-radius-sm, 12px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- Wave 5 (2026-08-16) — GYG themed inventory chips inside .gygSection. --- */
.gygThemeChips { margin: 10px 0 4px; font-size: .88rem; color: var(--tgz-ui-muted, #647083); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gygThemeChips b { font-weight: 800; color: var(--tgz-ui-text, #172235); }
.gygThemeChips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf); border-radius: var(--tgz-ui-radius-pill, 999px);
  background: var(--tgz-ui-card, #fff); color: var(--tgz-ui-teal, #0c7a76);
  font-weight: 700; text-decoration: none;
}
.gygThemeChips a:hover, .gygThemeChips a:focus-visible { border-color: var(--tgz-ui-teal, #0c7a76); }
html[data-theme="dark"] .gygThemeChips b, html[data-theme-mode="dark"] .gygThemeChips b { color: var(--tgz-p2-text, #eef4f3) !important; }
html[data-theme="dark"] .gygThemeChips a, html[data-theme-mode="dark"] .gygThemeChips a { background: transparent; color: #71d7c2 !important; }

/* --- Founder / "who you are booking with" card ---------------------------
   Owner: this needed a real card, not the generic desk head. A person card:
   monogram + name + role on one row, the bio under it, then two actions.
   The three payment-safety bullets were removed at the owner's request; only
   the deposit-terms link remains. Lives here (global bundle) because the card
   renders on /packages/, /build/, /surf-camps/, /retreats/ and the homepage.
   ------------------------------------------------------------------------ */
.tgzFounderCard{
  display:grid;gap:10px;
  margin-block:12px;padding:14px;
  border:1px solid var(--tgz-ui-line,#e4d4bf);
  border-radius:var(--tgz-ui-radius-lg,24px);
  background:linear-gradient(180deg,var(--tgz-ui-surface,#fffaf1),var(--tgz-ui-card,#fff));
  box-shadow:0 10px 30px -22px rgba(15,40,60,.55)}
.tgzFounderCard__top{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center}
.tgzFounderCard__avatar{
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:var(--tgz-ui-primary,#10233a);color:#fff;
  font:850 15px/1 "Inter Tight",Inter,system-ui,sans-serif;letter-spacing:.04em}
.tgzFounderCard__id{display:grid;gap:1px;min-width:0}
.tgzFounderCard__kicker{
  font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:900;
  color:var(--tgz-ui-accent,#a95c1e)}
.tgzFounderCard__name{
  font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:1.02rem;line-height:1.15;color:var(--tgz-ui-text,#172235)}
.tgzFounderCard__role{font-size:11.5px;line-height:1.25;color:var(--tgz-ui-muted,#647083)}
.tgzFounderCard__bio{
  margin:0;font-size:.88rem;line-height:1.45;color:var(--tgz-ui-text,#172235)}
.tgzFounderCard__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.tgzFounderCard__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:9px 16px;border-radius:var(--tgz-ui-radius-pill,999px);
  background:var(--tgz-ui-teal,#0c7a76);border:1px solid var(--tgz-ui-teal,#0c7a76);
  color:#fff;text-decoration:none;font-weight:850;font-size:.86rem;
  transition:transform .12s ease,box-shadow .2s ease}
.tgzFounderCard__cta:hover{box-shadow:0 8px 20px -12px rgba(12,122,118,.8)}
.tgzFounderCard__cta:active{transform:scale(.98)}
.tgzFounderCard__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:12px;font-weight:700;color:var(--tgz-ui-muted,#647083)}
[dir="rtl"] .tgzFounderCard__avatar{letter-spacing:0}
@media (min-width:620px){
  .tgzFounderCard{padding:18px 20px;gap:12px}
  .tgzFounderCard__avatar{width:54px;height:54px;font-size:17px}
  .tgzFounderCard__name{font-size:1.15rem}
  .tgzFounderCard__bio{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .tgzFounderCard__cta{transition:none}
}

/* /money/ converter (2026-08-21) — one compact tool row; tokens + dark like the
   desk components above. dir=ltr on the wrapper keeps number entry sane in RTL. */
.tgzFxTool {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tgz-ui-space-sm, 10px);
  margin-top: 14px;
  padding: var(--tgz-ui-space-md, 14px);
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-md, 18px);
  background: var(--tgz-ui-card, #fff);
}
.tgzFxField { display: grid; gap: 4px; }
.tgzFxField span { font: 700 .78rem/1 Inter, system-ui, sans-serif; color: var(--tgz-ui-muted, #647083); text-transform: uppercase; letter-spacing: .04em; }
.tgzFxField input, .tgzFxField select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--tgz-ui-line, #e4d4bf);
  border-radius: var(--tgz-ui-radius-sm, 12px);
  background: var(--tgz-ui-card, #fff);
  color: var(--tgz-ui-text, #172235);
  font: 700 1rem/1.2 Inter, system-ui, sans-serif;
}
.tgzFxField input { width: 130px; }
.tgzFxField input:focus-visible, .tgzFxField select:focus-visible { outline: 2px solid var(--tgz-ui-teal, #0c7a76); outline-offset: 2px; }
.tgzFxOut { flex: 1 1 200px; min-height: 44px; display: inline-flex; align-items: center; font: 850 1.15rem/1.2 var(--tgz-ui-font-display, 'Inter Tight', Inter, sans-serif); color: var(--tgz-ui-teal, #0c7a76); }
html[data-theme="dark"] .tgzFxTool,
html[data-theme-mode="dark"] .tgzFxTool {
  background: var(--tgz-p2-card, #101f29) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
}
html[data-theme="dark"] :is(.tgzFxField input, .tgzFxField select),
html[data-theme-mode="dark"] :is(.tgzFxField input, .tgzFxField select) {
  background: var(--tgz-p2-card, #101f29) !important;
  border-color: var(--tgz-p2-line, #29404b) !important;
  color: var(--tgz-p2-text, #f7efe3) !important;
}
html[data-theme="dark"] .tgzFxField span,
html[data-theme-mode="dark"] .tgzFxField span { color: var(--tgz-p2-muted, #b7c2c4) !important; }
html[data-theme="dark"] .tgzFxOut,
html[data-theme-mode="dark"] .tgzFxOut { color: #71d7c2 !important; }

/* Machine-layer move 02b redesign (2026-08-23): the destination-page offer
   strip as a proper card — same token + dark pattern as .tgzDayDesk above. */
.tgzOfferStrip{margin-block:var(--tgz-ui-space-md,14px)}
.tgzOfferStrip>.container{display:grid;gap:8px;max-width:860px;padding:var(--tgz-ui-space-md,14px) var(--tgz-ui-space-lg,18px);border:1px solid var(--tgz-ui-line,#e4d4bf);border-radius:var(--tgz-ui-radius-md,18px);background:var(--tgz-ui-card,#fff);color:var(--tgz-ui-text,#172235)}
.tgzOfferStrip h2{margin:0;font-family:var(--tgz-ui-font-display,'Inter Tight',Inter,sans-serif);font-size:1.06rem;line-height:1.3}
.tgzOfferStrip>.container>p{margin:0;color:var(--tgz-ui-muted,#647083);font-size:.93rem;line-height:1.55}
.tgzOfferStrip__cta{margin-top:2px}
.tgzOfferStrip__cta a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 18px;border-radius:var(--tgz-ui-radius-pill,999px);background:var(--tgz-ui-teal,#0c7a76);color:#fff;font:850 .88rem/1 Inter,system-ui,sans-serif;text-decoration:none}
.tgzOfferStrip__cta a:focus-visible{outline:2px solid var(--tgz-ui-teal,#0c7a76);outline-offset:2px}
.tgzOfferStrip__alt{font-size:.85rem}
.tgzOfferStrip__alt a{color:var(--tgz-ui-teal,#0c7a76);font-weight:700}
html[data-theme="dark"] .tgzOfferStrip>.container,
html[data-theme-mode="dark"] .tgzOfferStrip>.container{background:var(--tgz-p2-card,#101f29)!important;border-color:var(--tgz-p2-line,#29404b)!important;color:var(--tgz-p2-text,#f7efe3)!important}
html[data-theme="dark"] .tgzOfferStrip>.container>p,
html[data-theme-mode="dark"] .tgzOfferStrip>.container>p{color:var(--tgz-p2-muted,#b7c2c4)!important}
html[data-theme="dark"] .tgzOfferStrip__alt a,
html[data-theme-mode="dark"] .tgzOfferStrip__alt a{color:#71d7c2!important}
html[data-theme="dark"] .tgzOfferStrip__cta a,
html[data-theme-mode="dark"] .tgzOfferStrip__cta a{background:#71d7c2!important;color:#0b1a22!important}

/* what-to-pack checklist (2026-08-23 menu audit) — the page finally carries a
   real list. One item per line, aligned; compact cards in tgz-ui tokens. */
.tgzPackGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
@media (max-width:760px){.tgzPackGrid{grid-template-columns:1fr}}
.tgzPackCard{background:var(--tgz-ui-card,#fff);border:1px solid var(--tgz-ui-line,#e4d4bf);border-radius:16px;padding:14px 16px}
.tgzPackCard > b{display:block;font:850 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--tgz-ui-accent,#a95c1e);margin-bottom:8px}
.tgzPackList{margin:0;padding:0 0 0 18px;display:grid;gap:6px}
.tgzPackList li{font:550 13.5px/1.45 Inter,system-ui,sans-serif;color:var(--tgz-ui-ink,#2b2419)}
html[data-theme="dark"] body .tgzPackCard,
html[data-theme-mode="dark"] body .tgzPackCard{background:var(--tgz-p2-card,#101f29);border-color:var(--tgz-p2-line,rgba(255,255,255,.12))}
html[data-theme="dark"] body .tgzPackCard > b,
html[data-theme-mode="dark"] body .tgzPackCard > b{color:#ffd89c}
html[data-theme="dark"] body .tgzPackList li,
html[data-theme-mode="dark"] body .tgzPackList li{color:var(--tgz-p2-ink,#f2ede4)}