/* ==========================================================================
   TRAVEL OBSESSED TX — CANONICAL THEME STYLESHEET
   travel-obsessed-library-test · v2.0.0
   --------------------------------------------------------------------------
   This file is the single source of truth for how the site looks.

   Before changing anything here, read DESIGN-SYSTEM.md.

   RULES THAT ARE NOT NEGOTIABLE
     1. Nine visible colours in light mode — eight neutrals and teals plus the
        expressive pink — plus one error red. Nothing else.
     2. Readable content is ink. Muted is for genuinely secondary text only.
     3. Never white text on bright teal. Bright-teal fills carry ink labels.
     4. No page-specific stylesheets, no per-template <style> blocks, no second
        palette. There is exactly one token layer and it is below; library.css
        aliases onto it and owns no colour values of its own.
     5. Dark mode is a token swap. If a component needs its own dark rule,
        that component is wrong — fix the component, not the theme.

   STRUCTURE
     1  Token layer — light
     2  Token layer — dark
     3  Base
     4  Layout
     5  Type roles
     6  Buttons
     7  Cards
     8  Callouts
     9  CTA sections
    10  Stats
    11  FAQ
    12  Split / figure
    13  Lists
    14  Table
    15  Forms
    16  Proof / testimonial
    17  Navigation + wordmark
    18  Footer
    19  Ghost / Koenig content
    20  Utilities
    21  Legacy bridge — see the long note above section 21
   ========================================================================== */

/* ---------- 1. TOKEN LAYER — light -------------------------------------
   EIGHT visible colours. Every semantic role below maps to one of them.
   White · Ink #1c1a17 · Muted #6a6456 · Bright teal #15bea5 ·
   Deep teal #0d7263 · Mint #eef8f5 · Cool neutral #f6f7f7 · Border #e4e7e6
   Plus exactly one justified exception: #b3402a for error/warning states.  */
:root{
  color-scheme: light dark;

  /* surfaces */
  --color-page-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-alt:#eef8f5;     /* mint — callouts, standard CTA, tint cards, footer */
  --color-surface-mute:#f6f7f7;    /* cool neutral — zebra rows, structural panels      */

  /* text — readable content is ALWAYS ink */
  --color-text:#1c1a17;            /* body, headings, lists, FAQ answers, form help     */
  --color-text-muted:#6a6456;      /* captions, dates, metadata, minor legal ONLY       */

  /* line work */
  --color-border:#e4e7e6;          /* every hairline                                    */
  --color-field-border:#6a6456;    /* input outlines — needs 3:1, so it uses muted      */

  /* brand */
  --color-accent:#15bea5;          /* bright teal — button fills, rules, marks          */
  --color-accent-deep:#0d7263;     /* deep teal — links, eyebrows, high-emphasis band    */
  --color-link:#0d7263;

  /* buttons — bright teal NEVER carries white text */
  --color-btn-primary-bg:#15bea5;
  --color-btn-primary-text:#1c1a17;
  --color-on-deep:#ffffff;         /* white is permitted on deep teal only              */

  /* state — the one justified extra colour */
  --color-critical:#b3402a;

  /* Pink — the expressive accent. Approved production colour, second in the
     accent hierarchy: teal is the primary brand accent, pink is the occasional
     one. Used sparingly and on purpose, for personality, emphasis and special
     branded details. It is NOT a button default, NOT a body-text colour, and
     NOT a substitute for teal. #ff66c4 measures 2.64:1 on white, so it can
     carry a mark but never readable text on a light ground — exactly the same
     constraint as bright teal. See DESIGN-SYSTEM.md § Colour. */
  --color-accent-pink:#ff66c4;

  /* focus + media */
  --color-focus:#1c1a17;
  --color-scrim:28,26,23;          /* ink, as rgb channels for the CTA scrim            */

  /* type */
  --font-display:var(--gh-font-heading,'Bricolage Grotesque',Georgia,serif);
  --font-body:var(--gh-font-body,'Inter',system-ui,-apple-system,sans-serif);
  --size-h1:clamp(28px,6.8vw,44px);
  --size-h2:clamp(22px,5.2vw,30px);
  --size-h3:clamp(18px,3.2vw,21px);
  --size-h4:16px;
  --size-lead:clamp(17px,4.4vw,19px);
  --size-body:17px;
  --size-small:14.5px;
  --size-eyebrow:13px;
  --size-button:15px;
  --size-nav:14px;
  --size-label:13px;
  --size-micro:12px;      /* tracked-out uppercase micro-labels          */
  --size-micro-lg:12.5px; /* the same role one notch up, used below 761px  */
  --size-stat:26px;       /* the big number in a stat block               */
  --size-numeral:24px;    /* step / row numerals in a numbered sequence   */
  --size-wordmark:20px;   /* the wordmark lockup, and its sub-400px size  */
  --size-wordmark-sm:18px;
  /* the Bluey headline strips are a signature component: long single-line
     phrases that cannot take the h1 clamp's 28px floor on a narrow phone
     without overflowing. This is their own documented role. */
  --size-strip-tight:clamp(19px,5.6vw,28px);
  /* the display statement: above h2, below h1 */
  --size-statement:clamp(28px,5.6vw,40px);

  /* sparkle — exactly three sizes, no others. See DESIGN-SYSTEM.md § Sparkles. */
  --sparkle-sm:14px; --sparkle-md:22px; --sparkle-lg:34px;
  --size-caption:13.5px;

  /* spacing */
  --space-2xs:4px; --space-xs:8px;  --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px;
  --space-3xl:64px; --space-4xl:96px;

  /* widths */
  --w-page:1040px; --w-wide:900px; --w-measure:680px; --w-narrow:560px;
  --gutter:20px;

  /* form / structure */
  --radius:0;
  --border-hair:1px; --border-rail:4px; --border-emphasis:2px;
  /* The rule is an editorial graphic, not a tick. The old clamp floored at
     96px and 22vw never reached it below 437px, so every phone width rendered
     an identical 96px dash — 27% of the measure. This lands near 42% on a
     phone and grows properly on desktop. */
  /* Fallback only. The real width is set per-rule in totx.js, to 75% of the
     headline it belongs to — see DESIGN-SYSTEM.md § "The rule belongs to its
     headline". The old clamp topped out at 200px from a 527px viewport up,
     which made every rule on the site identical regardless of the headline
     above it: a 974px headline and a 161px one both got 200px. */
  --rule-w:clamp(140px,42vw,340px); --rule-h:4px;
  --btn-height:52px; --btn-height-compact:44px;
  --btn-pad-x:30px; --btn-pad-x-compact:22px; --btn-max-mobile:340px;
  --cta-scrim:.60;                 /* lightest scrim that still holds AA on a blown-out sky */
  --cta-ratio:21/9;                /* desktop */
  --cta-ratio-mobile:4/3;
  --shadow-lift:0 2px 12px rgba(28,26,23,.07);
  --t-fast:.15s ease; --t-base:.2s ease;
  --z-nav:100; --z-backdrop:98; --z-drawer:99; --z-modal:200;
}
@media(min-width:761px){ :root{ --gutter:26px; } }

/* ---------- 2. TOKEN LAYER — dark ---------------------------------------
   The SAME eight roles, one value each. No second palette.
   Bright teal and the button treatment are identical to light mode.       */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --color-page-bg:#1c1a17;       /* ink becomes the ground                */
    --color-surface:#262220;
    --color-surface-alt:#103029;   /* mint role, deepened                   */
    --color-surface-mute:#201d1a;
    --color-text:#f6f3ef;
    --color-text-muted:#a9a196;
    --color-border:#38332d;
    --color-field-border:#a9a196;
    --color-accent:#15bea5;        /* unchanged                             */
    --color-accent-deep:#5fe0c7;   /* links lighten on dark                 */
    --color-link:#5fe0c7;
    --color-btn-primary-bg:#15bea5;
    --color-btn-primary-text:#1c1a17;   /* identical to light mode          */
    --color-critical:#e8836b;
    --color-accent-pink:#ff8ad4;   /* 8.13:1 on the dark ground; already a Library value */
    --color-focus:#5fe0c7;
    --color-scrim:12,10,9;
  }
}
:root[data-theme="dark"]{
  --color-page-bg:#1c1a17; --color-surface:#262220;
  --color-surface-alt:#103029; --color-surface-mute:#201d1a;
  --color-text:#f6f3ef; --color-text-muted:#a9a196;
  --color-border:#38332d; --color-field-border:#a9a196;
  --color-accent:#15bea5; --color-accent-deep:#5fe0c7; --color-link:#5fe0c7;
  --color-btn-primary-bg:#15bea5; --color-btn-primary-text:#1c1a17;
  --color-critical:#e8836b; --color-accent-pink:#ff8ad4;
  --color-focus:#5fe0c7; --color-scrim:12,10,9;
}

/* ---------- 3. BASE ------------------------------------------------------ */
*{box-sizing:border-box}
:root{color:var(--color-text)}
/* buttons do not inherit colour — without this they fall back to UA black */
button,input,select,textarea{color:inherit;font-family:inherit}
body{
  margin:0; background:var(--color-page-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--size-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
@media(max-width:760px){ body{ line-height:1.75 } }

h1,h2,h3,h4{
  font-family:var(--font-display); color:var(--color-text);
  text-wrap:balance; margin:0;
}
h1{font-size:var(--size-h1);font-weight:800;line-height:1.06;letter-spacing:-.022em;margin:0 0 var(--space-md)}
h2{font-size:var(--size-h2);font-weight:800;line-height:1.15;letter-spacing:-.018em;margin:0 0 var(--space-sm)}
h3{font-size:var(--size-h3);font-weight:700;line-height:1.30;letter-spacing:-.010em;margin:0 0 var(--space-xs)}
h4{font-size:var(--size-h4);font-weight:700;line-height:1.35;margin:0 0 var(--space-xs)}
p{margin:0 0 var(--space-md);text-wrap:pretty}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- 4. LAYOUT --------------------------------------------------- */
.totx-section{padding:var(--space-2xl) var(--gutter)}
/* same doubling rule as .sec — a section stacked on another does not repeat
   its neighbour's padding */
.totx-section + .totx-section:not(.totx-section--tint){padding-top:0}
.totx-section--compact{padding:var(--space-xl) var(--gutter)}
.totx-section--major{padding:var(--space-3xl) var(--gutter)}
.totx-section--tint{background:var(--color-surface-alt)}
.totx-section--mute{background:var(--color-surface-mute)}
@media(min-width:761px){
  .totx-section{padding:var(--space-3xl) var(--gutter)}
  .totx-section--compact{padding:var(--space-2xl) var(--gutter)}
  .totx-section--major{padding:var(--space-4xl) var(--gutter)}
}
.totx-inner{max-width:var(--w-page);margin-inline:auto}
.totx-inner--wide{max-width:var(--w-wide)}
.totx-inner--measure{max-width:var(--w-measure)}
.totx-inner--narrow{max-width:var(--w-narrow)}

/* ---------- 5. TYPE ROLES ----------------------------------------------- */
.totx-eyebrow{
  font-family:var(--font-body); font-size:var(--size-eyebrow); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  color:var(--color-accent-deep); margin:0 0 var(--space-sm);
}
@media(max-width:760px){ .totx-eyebrow{font-size:var(--size-micro-lg)} }
/* .totx-rule shares the decorative-rule definition — see section 21. */
.totx-lead{
  font-size:var(--size-lead); font-weight:400; line-height:1.6;
  color:var(--color-text); margin:0 0 var(--space-lg); max-width:var(--w-measure);
}
.totx-prose{max-width:var(--w-measure)}
.totx-prose--narrow{max-width:var(--w-narrow)}
.totx-prose--wide{max-width:var(--w-wide)}
.totx-small{font-size:var(--size-small);line-height:1.55;color:var(--color-text)}
/* muted is reserved for genuinely secondary information */
.totx-meta{font-size:var(--size-small);line-height:1.55;color:var(--color-text-muted)}
.totx-caption{font-size:var(--size-caption);line-height:1.5;color:var(--color-text-muted);margin:var(--space-xs) 0 0}
.totx-center{text-align:center}
.totx-center .totx-lead,.totx-center .totx-prose{margin-inline:auto}

/* ---------- 6. BUTTONS -------------------------------------------------- */
.totx-btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  gap:var(--space-xs);
  min-height:var(--btn-height); padding:0 var(--btn-pad-x);
  background:var(--color-btn-primary-bg); color:var(--color-btn-primary-text);
  font-family:var(--font-body); font-size:var(--size-button); font-weight:600;
  line-height:1.2; letter-spacing:.01em; text-decoration:none;
  border:0; border-radius:var(--radius); cursor:pointer;
  text-wrap:balance; transition:background var(--t-fast),transform var(--t-fast);
}
/* hover steps down the brand ramp: bright teal + ink → deep teal + white.
   Both states pass AA and no extra colour is introduced. */
.totx-btn:hover{background:var(--color-accent-deep);color:var(--color-on-deep);text-decoration:none}
.totx-btn:active{transform:translateY(1px)}
.totx-btn:focus-visible,.totx-btn.is-focus{outline:3px solid var(--color-focus);outline-offset:2px}
.totx-btn[disabled],.totx-btn.is-disabled{opacity:.45;pointer-events:none;cursor:not-allowed}

.totx-btn--secondary{
  background:transparent; color:var(--color-accent-deep);
  border:1.5px solid var(--color-accent); padding:0 calc(var(--btn-pad-x) - 2px);
}
.totx-btn--secondary:hover{background:var(--color-surface-alt);color:var(--color-accent-deep)}

.totx-btn--text{
  min-height:var(--btn-height-compact); padding:0 0 3px;
  background:transparent; color:var(--color-accent-deep);
  font-size:var(--size-small); font-weight:600;
  border-bottom:2px solid var(--color-accent);
}
.totx-btn--text:hover{background:transparent;border-bottom-color:var(--color-accent-deep)}

.totx-btn--compact{min-height:var(--btn-height-compact);padding:0 var(--btn-pad-x-compact);font-size:14px}
.totx-btn--compact.totx-btn--secondary{padding:0 calc(var(--btn-pad-x-compact) - 2px)}

/* group — stacked buttons use gap, never margin */
.totx-btn-group{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}

/* MOBILE CTA RULE — lives in the component, not the page */
@media(max-width:760px){
  .totx-btn--block,
  .totx-cta .totx-btn,
  .totx-btn-group--cta .totx-btn{
    display:flex; width:100%; max-width:var(--btn-max-mobile); margin-inline:auto;
  }
  .totx-btn-group--cta{flex-direction:column;align-items:stretch}
}

/* ---------- 7. CARDS ---------------------------------------------------- */
.totx-card{
  background:var(--color-surface); border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius); padding:var(--space-lg) var(--space-lg);
  display:flex; flex-direction:column; gap:var(--space-sm);
}
@media(min-width:761px){ .totx-card{padding:var(--space-lg) var(--space-lg)} }
.totx-card--rail{border:var(--border-hair) solid var(--color-border);border-top:var(--border-rail) solid var(--color-accent)}
.totx-card--tint{background:var(--color-surface-alt);border-color:transparent}
.totx-card--flat{border:0;padding:0;background:transparent}
.totx-card > *:last-child{margin-bottom:0}
.totx-card .totx-btn{align-self:flex-start;margin-top:auto}
.totx-card h3{margin:0}
/* v2.2.0 — `:not(.kick)`, the same specificity defect `.guide p` had:
   `.totx-card p` (0,2,0) out-specified `.kick` (0,1,0), so an eyebrow
   inside a card rendered at 14.5px instead of the documented 13px. A more
   specific rule quietly winning a fight nobody had checked. */
.totx-card p:not(.kick){margin:0;font-size:var(--size-small);line-height:1.6;color:var(--color-text)}
.totx-card > .kick{margin:0 0 var(--space-2xs)}

.totx-grid{display:grid;gap:var(--space-md)}
@media(min-width:761px){
  .totx-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .totx-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .totx-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .totx-grid{gap:var(--space-lg)}
}
@media(min-width:1000px){
  .totx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .totx-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 8. CALLOUTS ------------------------------------------------- */
.totx-callout{
  background:var(--color-surface-alt); border-left:var(--border-rail) solid var(--color-accent-deep);
  padding:var(--space-md) var(--space-lg); margin:0 0 var(--space-lg);
}
.totx-callout > *:last-child{margin-bottom:0}
.totx-callout--note{background:var(--color-surface-mute);border-left-color:var(--color-border)}
.totx-callout--critical{background:var(--color-surface-mute);border-left-color:var(--color-critical)}
.totx-callout--opinion{background:var(--color-surface-alt);border-left-color:var(--color-accent)}
.totx-callout-label{
  font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-deep);display:block;margin:0 0 var(--space-xs);
}
.totx-callout--critical .totx-callout-label{color:var(--color-critical)}
.totx-callout--note .totx-callout-label{color:var(--color-text)}

/* ---------- 9. CTA SECTION ---------------------------------------------- */
.totx-cta{
  background:var(--color-surface-alt);
  padding:var(--space-2xl) var(--gutter); text-align:left;
}
@media(min-width:761px){ .totx-cta{padding:var(--space-3xl) var(--gutter)} }
.totx-cta-inner{max-width:var(--w-narrow);margin-inline:auto}
.totx-cta h2{margin:0 0 var(--space-sm)}
.totx-cta p{color:var(--color-text);margin:0 0 var(--space-lg)}

.totx-cta--deep{background:var(--color-accent-deep);border-color:var(--color-accent-deep)}
.totx-cta--deep h2,.totx-cta--deep p{color:var(--color-on-deep)}
.totx-cta--deep .totx-rule{background:var(--color-on-deep)}
.totx-cta--deep .totx-eyebrow{color:var(--color-on-deep)}

/* MAJOR CTA — photographic band with a fixed scrim.
   The solid --color-media-bg sits underneath so the band never flashes white
   while the photo loads, and the scrim is a token so contrast can't drift. */
.totx-cta--media{
  border:0; position:relative; isolation:isolate;
  background-color:var(--color-text);
  background-image:var(--cta-image); background-size:cover;
  background-position:center 55%; background-repeat:no-repeat;
}
.totx-cta--media::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(var(--color-scrim),var(--cta-scrim));
}
.totx-cta--media h2,.totx-cta--media p{color:var(--color-on-deep)}
.totx-cta--media .totx-eyebrow{color:var(--color-on-deep)}
.totx-cta--media .totx-rule{background:var(--color-accent)}
/* the band keeps a deliberate shape rather than being sized by its copy */
@media(min-width:761px){ .totx-cta--media{min-height:clamp(360px,34vw,460px);display:flex;align-items:center} }

/* ---------- 10. STATS --------------------------------------------------- */
.totx-stats{
  display:flex;flex-wrap:wrap;
  border-top:var(--border-hair) solid var(--color-text);
  border-bottom:var(--border-hair) solid var(--color-text);
}
.totx-stat{
  flex:1 1 50%; padding:var(--space-md) var(--space-lg);
  border-right:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
}
.totx-stat:nth-child(2n){border-right:0}
.totx-stat:nth-last-child(-n+2){border-bottom:0}
.totx-stat b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--size-stat);line-height:1.1;color:var(--color-text)}
.totx-stat span{display:block;font-size:var(--size-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-top:var(--space-2xs)}
@media(min-width:761px){
  .totx-stat{flex:1;border-bottom:0}
  .totx-stat:nth-child(2n){border-right:var(--border-hair) solid var(--color-border)}
  .totx-stat:last-child{border-right:0}
}

/* ---------- 11. FAQ ----------------------------------------------------- */
.totx-faq{max-width:var(--w-measure)}
.totx-faq-item{border-top:var(--border-hair) solid var(--color-border)}
.totx-faq-item:last-child{border-bottom:var(--border-hair) solid var(--color-border)}
.totx-faq-item > summary{
  list-style:none; cursor:pointer; display:flex; gap:var(--space-md);
  align-items:flex-start; justify-content:space-between;
  padding:var(--space-md) 0; min-height:var(--btn-height);
  font-family:var(--font-display); font-weight:700; font-size:var(--size-h3);
  line-height:1.3; color:var(--color-text);
}
/* the question text is its own block so headline balancing and the orphan
   guard can measure it — a flex container's scrollWidth is not a reliable
   overflow signal once a pseudo-element is in the row */
.totx-faq-q{display:block;flex:1 1 auto;min-width:0;text-wrap:balance}
.totx-faq-item > summary::-webkit-details-marker{display:none}
.totx-faq-item > summary::after{
  content:''; flex:0 0 12px; width:12px; height:12px; margin-top:8px;
  border-right:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent);
  transform:rotate(45deg); transition:transform var(--t-base);
}
.totx-faq-item[open] > summary::after{transform:rotate(-135deg)}
.totx-faq-item > summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px}
.totx-faq-body{padding:0 0 var(--space-md)}
.totx-faq-body > *:last-child{margin-bottom:0}

/* ---------- 12. SPLIT / FIGURE ------------------------------------------ */
.totx-split{display:grid;gap:var(--space-lg);align-items:center}
@media(min-width:761px){ .totx-split{grid-template-columns:1fr 1fr;gap:var(--space-xl)} }
.totx-split--reverse .totx-split-media{order:2}
@media(max-width:760px){ .totx-split--reverse .totx-split-media{order:0} }
.totx-figure{margin:0}
.totx-figure img,.totx-figure .totx-ph{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius);
}
/* empty image slot — ships, so it uses the approved palette and no gradient */
.totx-ph{
  background:var(--color-surface-alt);
  border:var(--border-hair) dashed var(--color-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-accent-deep);font-size:var(--size-micro);letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}

/* ---------- 13. LISTS --------------------------------------------------- */
.totx-list{list-style:none;margin:0 0 var(--space-md);padding:0;max-width:var(--w-measure)}
.totx-list li{position:relative;padding:0 0 var(--space-sm) 28px;color:var(--color-text)}
.totx-list li::before{
  content:'';position:absolute;left:0;top:12px;width:12px;height:var(--border-rail);
  background:var(--color-accent);
}
.totx-steps{list-style:none;margin:0;padding:0;max-width:var(--w-measure)}
.totx-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-md);
  padding:var(--space-md) 0;border-top:var(--border-hair) solid var(--color-border);
}
.totx-steps li:last-child{border-bottom:var(--border-hair) solid var(--color-border)}
.totx-steps .n{font-family:var(--font-display);font-weight:800;font-size:var(--size-numeral);color:var(--color-accent);line-height:1.1}
.totx-steps b{display:block;color:var(--color-text);font-weight:600;margin-bottom:var(--space-2xs)}
/* v2.2.0 — step copy is readable content, so it is body type. It was at
   --size-small/1.55, which is the Small role: correct for a caption, wrong
   for a sentence a client has to follow. Line-height is inherited so the
   documented 1.70 / 1.75-on-mobile applies rather than a third value. */
.totx-steps p{margin:0;font-size:var(--size-body);color:var(--color-text)}

/* ---------- 14. TABLE --------------------------------------------------- */
.totx-table-wrap{overflow-x:auto;max-width:var(--w-wide)}
.totx-table{border-collapse:collapse;width:100%;min-width:480px;font-size:var(--size-small)}
.totx-table th{
  font-family:var(--font-display);font-size:var(--size-micro);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-accent-deep);text-align:left;
  padding:var(--space-sm) var(--space-md);
  border-bottom:var(--border-emphasis) solid var(--color-text);background:transparent;
}
.totx-table td{padding:var(--space-sm) var(--space-md);border-bottom:var(--border-hair) solid var(--color-border);color:var(--color-text)}
.totx-table tbody tr:nth-child(even){background:var(--color-surface-mute)}

/* ---------- 15. FORMS --------------------------------------------------- */
.totx-form{max-width:var(--w-narrow);display:flex;flex-direction:column;gap:var(--space-md)}
.totx-field{display:flex;flex-direction:column;gap:var(--space-2xs)}
.totx-label{
  font-size:var(--size-label);font-weight:600;letter-spacing:.04em;color:var(--color-text);
}
.totx-input,.totx-select,.totx-textarea{
  font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--color-text);
  background:var(--color-surface);
  border:var(--border-hair) solid var(--color-field-border);border-radius:var(--radius);
  padding:14px var(--space-md);min-height:var(--btn-height);width:100%;
}
.totx-textarea{min-height:120px;resize:vertical}
/* Any bare select in theme content adopts the field treatment, so a native
   control never renders in the browser's default grey. */
select:not([class]),input:not([class]):not([type=hidden]),textarea:not([class]),
.page-tracker select,.page-tracker input:not([class]),.page-tracker textarea:not([class]),
#dcht-app select,#dcht-app input:not([class]),#dcht-app textarea:not([class]){
  font-family:var(--font-body);font-size:16px;line-height:1.4;color:var(--color-text);
  background:var(--color-surface);
  border:var(--border-hair) solid var(--color-field-border);border-radius:var(--radius);
  padding:12px var(--space-md);min-height:var(--btn-height-compact);
}
select:not([class]):focus-visible,input:not([class]):focus-visible,textarea:not([class]):focus-visible,
.page-tracker select:focus-visible,#dcht-app select:focus-visible,
.page-tracker input:not([class]):focus-visible,#dcht-app input:not([class]):focus-visible{
  outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent-deep);
}
.totx-input::placeholder,.totx-textarea::placeholder{color:var(--color-text-muted);opacity:1}
.totx-input:focus-visible,.totx-select:focus-visible,.totx-textarea:focus-visible{
  outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent-deep);
}
.totx-hint{font-size:var(--size-caption);color:var(--color-text)}
.totx-field--error .totx-input{border-color:var(--color-critical);border-width:var(--border-emphasis)}
.totx-error{font-size:var(--size-caption);color:var(--color-critical);font-weight:600}

/* ---------- 16. PROOF / TESTIMONIAL ------------------------------------- */
.totx-proof{
  border-left:var(--border-rail) solid var(--color-accent);
  padding:var(--space-xs) 0 var(--space-xs) var(--space-lg);
  max-width:var(--w-measure);margin:0 0 var(--space-lg);
}
.totx-proof blockquote{margin:0 0 var(--space-sm);font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);line-height:1.35;color:var(--color-text);text-wrap:balance}
.totx-proof cite{font-style:normal;font-size:var(--size-small);color:var(--color-text-muted)}


/* ---------- 17b. SITE NAVIGATION ----------------------------------------
   Container-query driven, so the same component collapses correctly whether
   it is the page nav or sitting inside a 390px demo frame.
   Every label used below already exists in site-nav.hbs — no new copy.     */
.totx-mnav{container-type:inline-size;position:relative;background:var(--color-surface);border-bottom:var(--border-hair) solid var(--color-border)}
.totx-mnav-bar{max-width:var(--w-page);margin-inline:auto;padding:var(--space-sm) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
/* CANONICAL WORDMARK — one component, used everywhere it appears.
   The space between "Obsessed" and "TX" is a REAL text node, so the element's
   text content, copy-paste and search-engine text all read "Travel Obsessed TX".
   An earlier revision replaced it with `margin-left:.26em`, which looked right
   but silently renamed the business to "Travel ObsessedTX" everywhere the DOM
   text is read rather than looked at.

   The reason the margin was introduced still stands: a whitespace-only text
   node is discarded the moment a parent becomes a flex container, which is how
   the open drawer once rendered "Travel ObsessedTX". The protection is not the
   margin — it is `display:inline-block` below, the rule in CLAUDE.md, and the
   acceptance test that asserts BOTH the text content and the rendered gap.
   Never give this element display:flex or inline-flex.                        */
.totx-wordmark{
  display:inline-block; font-family:var(--font-display); font-weight:800;
  font-size:var(--size-wordmark); line-height:1.2; letter-spacing:-.01em; padding-block:10px;
  color:var(--color-text); text-decoration:none; white-space:nowrap;
}
.totx-wordmark-tx{color:var(--color-accent)}
.totx-mnav-desk{display:flex;gap:var(--space-lg);align-items:center;white-space:nowrap}
.totx-mnav-desk a{white-space:nowrap}
.totx-mnav-desk a:not([class*="btn"]){font-size:var(--size-nav);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-xs) 0}
.totx-mnav-desk a:hover{color:var(--color-accent-deep)}
.totx-burger{display:none;color:var(--color-text);width:48px;height:48px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.totx-burger span{display:block;width:22px;height:2px;background:var(--color-text);transition:transform var(--t-base),opacity var(--t-base)}
.totx-mnav.is-open .totx-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.totx-mnav.is-open .totx-burger span:nth-child(2){opacity:0}
.totx-mnav.is-open .totx-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.totx-drawer{display:none;position:fixed;inset:0;z-index:var(--z-drawer);background:var(--color-page-bg);overflow-y:auto;padding:0 var(--gutter) var(--space-xl)}
.totx-mnav--contained{position:static}
.totx-mnav--contained .totx-drawer{position:absolute}
.totx-mnav.is-open .totx-drawer{display:block}
.totx-drawer-top{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:var(--space-sm) 0;border-bottom:var(--border-hair) solid var(--color-border);margin-bottom:var(--space-md)}
.totx-drawer-close{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--color-text);font-size:var(--size-stat);line-height:1}
.totx-drawer .totx-btn{display:flex;width:100%;max-width:var(--btn-max-mobile);margin:0 auto var(--space-sm)}
.totx-drawer-login{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:var(--size-small);font-weight:600;color:var(--color-accent-deep);text-decoration:none;margin:0 auto var(--space-md)}
.totx-drawer-login:hover{color:var(--color-text)}
.totx-drawer-group{border-bottom:var(--border-hair) solid var(--color-border)}
.totx-drawer-group > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 var(--space-2xs);font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--color-text)}
.totx-drawer-group > summary::-webkit-details-marker{display:none}
.totx-drawer-group > summary::after{content:'';width:9px;height:9px;flex:0 0 9px;border-right:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);transform:rotate(45deg);transition:transform var(--t-base)}
.totx-drawer-group[open] > summary::after{transform:rotate(-135deg)}
.totx-drawer-group > summary:focus-visible{outline:3px solid var(--color-focus);outline-offset:-3px}
.totx-drawer-links{padding:0 0 var(--space-xs)}
.totx-drawer-links a{display:flex;align-items:center;min-height:44px;padding:0 0 0 var(--space-md);font-size:var(--size-small);color:var(--color-text);text-decoration:none}
.totx-drawer-links a:hover{color:var(--color-accent-deep)}
.totx-drawer-flat{display:flex;align-items:center;min-height:48px;padding:0 var(--space-2xs);font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--color-text);text-decoration:none;border-bottom:var(--border-hair) solid var(--color-border)}
.totx-drawer-flat:hover{color:var(--color-accent-deep)}

/* --- nav: masthead, wordmark logo, desktop dropdowns -------------------- */
.totx-mast{
  max-width:var(--w-page);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:var(--space-xs) var(--gutter);
  border-bottom:var(--border-hair) solid var(--color-border);
  font-size:var(--size-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-muted);
}
@media(max-width:760px){ .totx-mast span:last-child{display:none} }
.totx-wordmark-logo{height:40px;width:auto;display:inline-block;vertical-align:middle;margin-right:var(--space-sm)}
@media(max-width:760px){ .totx-wordmark-logo{height:34px} }
.totx-mnav-link{font-size:var(--size-nav);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-xs) 0;white-space:nowrap}
.totx-mnav-link:hover{color:var(--color-accent-deep)}
/* v2.2.9 — the signed-in client link. The long selector is required:
   `.totx-mnav-desk a:not([class*="btn"])` is (0,2,1) and sets colour on every
   desktop nav link, so a plain .class rule loses to it. That container rule is
   itself the §9a violation (a component setting type on its children); fixing
   it properly would restyle the whole nav and was not in scope here.
   v2.2.8 — the signed-in client link. A'Dell asked for it in pink so a client
   can find their way back at a glance. It is the only pink text in the nav.
   NOTE: --color-accent-pink (#ff66c4) is 2.64:1 on white and does not meet
   WCAG AA for text (4.5:1). #c9007a would, at 5.58:1, and still reads pink.
   Left as the brand pink by instruction; see CHANGELOG v2.2.8. */
.totx-mnav-desk a.totx-mnav-link.totx-mnav-sa,.totx-mnav-link.totx-mnav-sa{color:var(--color-accent-pink);font-weight:600}
.totx-mnav-desk a.totx-mnav-link.totx-mnav-sa:hover,.totx-mnav-link.totx-mnav-sa:hover{color:var(--color-accent-pink);text-decoration:underline}
a.totx-drawer-login.totx-mnav-sa{color:var(--color-accent-pink);font-weight:600}
.totx-mnav-client{font-weight:600;color:var(--color-accent-deep)}
.totx-drop{position:relative}
.totx-drop-btn{
  font-family:var(--font-body);font-size:var(--size-nav);font-weight:500;
  color:var(--color-text);background:none;border:0;padding:var(--space-xs) 0;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
}
.totx-drop-btn:hover{color:var(--color-accent-deep)}
.totx-caret{
  width:7px;height:7px;flex:0 0 7px;
  border-right:2px solid var(--color-accent);border-bottom:2px solid var(--color-accent);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base);
}
.totx-drop.is-open .totx-caret{transform:rotate(-135deg) translateY(-2px)}
.totx-drop-menu{
  display:none;position:absolute;top:100%;left:calc(var(--space-md) * -1);
  background:var(--color-surface);border:var(--border-hair) solid var(--color-border);
  padding:var(--space-xs) 0;min-width:200px;z-index:var(--z-nav);
  box-shadow:var(--shadow-lift);
}
.totx-drop.is-open .totx-drop-menu{display:block}
.totx-drop-menu a{
  display:flex;align-items:center;min-height:44px;padding:0 var(--space-md);
  font-size:var(--size-small);color:var(--color-text);text-decoration:none;white-space:nowrap;
}
.totx-drop-menu a:hover{background:var(--color-surface-alt);color:var(--color-accent-deep)}
.totx-drawer-last{border-bottom:0}
.totx-drawer[hidden]{display:none}

/* The nav collapses at 1100px, not at the 760px mobile breakpoint. This was a
   deliberate, commented decision in v1.7.6: below ~1100px the full menu cannot
   sit beside the wordmark without overlapping it or shrinking the type past
   readable. Preserved here. */
@container (max-width: 1100px){
  .totx-mnav-desk{display:none}
  .totx-burger{display:flex}
  .totx-wordmark-logo{margin-right:var(--space-xs)}
}
/* On the narrowest phones the logo mark plus the wordmark plus the burger do
   not fit on one line. The logo mark drops out; the WORDMARK ITSELF is
   untouched, so its composition still matches the drawer exactly. */
@container (max-width: 400px){
  .totx-wordmark-logo{display:none}
  /* smaller type needs a little more padding to hold the 44px touch target */
  .totx-wordmark{font-size:var(--size-wordmark-sm);padding-block:12px}
}

/* ---------- 17. FOOTER treatment ---------------------------------------- */
.totx-nav{background:var(--color-surface);border-bottom:var(--border-hair) solid var(--color-border)}
.totx-nav-inner{
  max-width:var(--w-page);margin-inline:auto;padding:var(--space-md) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
}

.totx-nav-links{display:flex;gap:var(--space-lg);align-items:center;flex-wrap:wrap}
.totx-nav-links a{font-size:var(--size-nav);font-weight:500;color:var(--color-text);text-decoration:none;padding:var(--space-xs) 0}
.totx-nav-links a:hover{color:var(--color-accent-deep)}
.totx-footer{background:var(--color-surface-alt);padding:var(--space-2xl) var(--gutter) var(--space-lg)}
.totx-footer-inner{max-width:var(--w-page);margin-inline:auto;display:grid;gap:var(--space-lg)}
@media(min-width:761px){ .totx-footer-inner{grid-template-columns:repeat(3,1fr);gap:var(--space-xl)} }
.totx-footer h4{font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-deep);margin:0 0 var(--space-sm)}
.totx-footer a{display:block;font-size:var(--size-small);color:var(--color-text);text-decoration:none;padding:var(--space-xs) 0;min-height:44px;line-height:1.6}
.totx-footer a:hover{color:var(--color-accent-deep);text-decoration:underline}
.totx-footer-legal{max-width:var(--w-page);margin:var(--space-lg) auto 0;padding-top:var(--space-md);border-top:var(--border-hair) solid var(--color-border);text-align:center;font-size:var(--size-caption);color:var(--color-text-muted)}


/* --- the real footer (.tof-*), tokenised ------------------------------- */
/* The footer announces itself with its own ground colour, so it does not also
   need a wide band of empty page above it. */
.tof{background:var(--color-surface-alt);color:var(--color-text);margin-top:var(--space-lg)}
@media(min-width:761px){ .tof{margin-top:var(--space-2xl)} }
.tof a{text-decoration:none}
/* The footer photography is a ribbon, not a gallery.

   Six across is right on a desktop — it reads as a band of photography under
   the page. On a phone six across is roughly 65px of photograph each, which
   is decorative noise. Two on a phone, three on a tablet, six on a desktop.

   Pass 2 took the three-across all the way up and turned the footer into a
   3×2 mosaic that dominated the page. The height cap below keeps the desktop
   ribbon restrained: square crops on small screens where there is room for
   them, a shallow band on desktop where there is not. */
/* The footer photography is a ribbon, not a gallery — and it has to survive
   both extremes. Six square tiles on a phone are decorative noise; six tiles
   held to a square inside a 240px desktop column left each one floating at
   130px with 110px of dead space beside it, which is what made the desktop
   strip look tiny and gappy. (The square came from `aspect-ratio:1/1` sitting
   after the desktop override and quietly winning.)

   Two across on a phone, three on a tablet, six on a desktop — and the tiles
   fill their column at every width. Shallow enough to stay a ribbon. */
.tof-igrow{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.tof-igrow span{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/2;                    /* shallower than the square it was */
  background:var(--color-surface-alt);
}
.tof-igrow img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-base)}
.tof-igrow span:hover img{transform:scale(1.05)}
@media(min-width:641px){ .tof-igrow{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1000px){
  .tof-igrow{grid-template-columns:repeat(6,1fr)}
  /* fills the column, shallow enough to read as a band under the page */
  .tof-igrow span{aspect-ratio:auto;height:clamp(120px,11vw,170px)}
}
@media (prefers-reduced-motion:reduce){ .tof-igrow img,.tof-igrow span:hover img{transition:none;transform:none} }
.tof-cols{
  max-width:var(--w-page);margin-inline:auto;display:grid;grid-template-columns:1fr;
  gap:0;padding:var(--space-2xl) var(--gutter) var(--space-lg);
}
.tof-col{border-top:var(--border-hair) solid var(--color-border);padding-top:var(--space-md);margin-top:var(--space-md)}
.tof-col:first-child{border-top:0;padding-top:0;margin-top:0}
.tof-col h4{
  font-family:var(--font-body);font-size:var(--size-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-deep);
  margin:0 0 var(--space-sm);
}
.tof-col a{
  display:flex;align-items:center;min-height:44px;
  font-size:var(--size-small);color:var(--color-text);font-weight:500;line-height:1.5;
}
.tof-col a:hover{color:var(--color-accent-deep);text-decoration:underline}
@media(min-width:861px){
  .tof-cols{grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
  .tof-col{border-top:0;border-left:var(--border-hair) solid var(--color-border);padding:0 0 0 var(--space-lg);margin-top:0}
  .tof-col:first-child{border-left:0;padding-left:0}
}
.tof-nlwrap{max-width:var(--w-page);margin-inline:auto;padding:0 var(--gutter) var(--space-lg)}
.tof-nl{
  border:var(--border-hair) solid var(--color-accent);background:var(--color-surface);
  display:grid;grid-template-columns:1fr;gap:var(--space-lg);align-items:center;
  padding:var(--space-lg);text-align:left;
}
@media(min-width:861px){
  .tof-nl{grid-template-columns:auto 1fr 1.7fr;text-align:left;padding:var(--space-lg) var(--space-xl)}
}
.tof-nl-logo{height:60px;width:auto;display:block;margin-inline:auto}
@media(min-width:861px){ .tof-nl-logo{height:70px;margin-inline:0} }
.tof-nl .pitch{
  font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:var(--size-h2);line-height:1.05;color:var(--color-accent-deep);margin:0;
}
.tof-nl form{display:grid;grid-template-columns:1fr;gap:var(--space-sm);margin:0}
@media(min-width:861px){ .tof-nl form{grid-template-columns:1fr 1fr auto} }
.tof-nl input{
  border:var(--border-hair) solid var(--color-field-border);
  background:var(--color-surface);color:var(--color-text);
  padding:14px var(--space-md);font-size:16px;font-family:var(--font-body);
  min-height:var(--btn-height);border-radius:var(--radius);
}
.tof-nl input::placeholder{color:var(--color-text-muted);opacity:1}
.tof-nl input:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-accent-deep)}
.tof-nl input:user-invalid{border-color:var(--color-critical);border-width:var(--border-emphasis)}
/* the newsletter submit is the canonical primary button, not a variant */
.tof-nl button{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);
  border:0;font-weight:600;font-size:var(--size-button);letter-spacing:.01em;
  line-height:1.2;min-height:var(--btn-height);padding:0 var(--btn-pad-x);
  cursor:pointer;border-radius:var(--radius);font-family:var(--font-body);
}
.tof-nl button:hover{background:var(--color-accent-deep);color:var(--color-on-deep)}

/* --- .totx-btn--caps : the uppercase-label modifier -----------------------
   The button component owns size, fill, height and weight. It does NOT own
   capitalisation. v1.7.6 rendered the newsletter submit as "SUBSCRIBE", and
   standardising the component silently re-rendered published copy as
   "Subscribe" — a typographic decision reaching into words it does not own.

   This modifier restores that treatment as a documented, reusable option
   rather than a one-off override, so any button that was published uppercase
   can stay uppercase without reintroducing a bespoke button.

   It sets tracking with the uppercase, because uppercase without extra
   letter-spacing sets badly at small sizes.                                 */
.totx-btn--caps{ text-transform:uppercase; letter-spacing:.06em; }
.tof-nl button:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.tof-nl-msg{
  font-size:var(--size-small);color:var(--color-accent-deep);font-weight:600;
  padding:var(--space-xs) var(--gutter) 0;max-width:var(--w-page);margin-inline:auto;
}
.tof-legal{
  border-top:var(--border-hair) solid var(--color-border);text-align:center;
  font-size:var(--size-caption);letter-spacing:.04em;color:var(--color-text-muted);
  padding:var(--space-md) var(--gutter) var(--space-lg);
}
.tof-legal a{color:var(--color-text-muted);margin:0 var(--space-xs)}
.tof-legal a:hover{color:var(--color-accent-deep)}

/* --- Ghost default-layout chrome (posts) -------------------------------
   default.hbs is a Casper-derived shell reached only by post.hbs. In v1.7.6
   it had no styling at all, because the stylesheet it linked did not exist,
   so its header buttons rendered as native browser controls. These rules put
   that chrome on the design system without changing any of its markup.
   NOTE: posts therefore still use a DIFFERENT header from the rest of the
   site. Unifying them means swapping this header for {{> site-nav}}, which
   would remove the "Subscribe" nav link — a copy change, so it is not done
   here. See the QA notes.                                                 */
.gh-outer{padding-inline:var(--gutter)}
.gh-inner{max-width:var(--w-page);margin-inline:auto}
.gh-head{background:var(--color-surface);border-bottom:var(--border-hair) solid var(--color-border)}
.gh-head-inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
  padding:var(--space-sm) 0;flex-wrap:wrap;
}
.gh-head-brand,.gh-head-brand-wrapper{display:flex;align-items:center;gap:var(--space-sm)}
.gh-head-logo{
  font-family:var(--font-display);font-weight:800;font-size:var(--size-wordmark);letter-spacing:-.01em;
  color:var(--color-text);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
}
.gh-head-logo img{height:40px;width:auto;display:block}
.gh-head-menu{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.gh-head-menu ul{display:flex;gap:var(--space-lg);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.gh-head-menu a{
  font-size:var(--size-nav);font-weight:500;color:var(--color-text);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.gh-head-menu a:hover{color:var(--color-accent-deep)}
.gh-head-actions,.gh-head-members{display:flex;align-items:center;gap:var(--space-md)}
.gh-head-link{
  font-size:var(--size-nav);font-weight:600;color:var(--color-accent-deep);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.gh-icon-btn,.gh-search,.gh-burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;
  color:var(--color-text);border-radius:var(--radius);
}
.gh-icon-btn:hover,.gh-search:hover,.gh-burger:hover{color:var(--color-accent-deep)}
.gh-icon-btn:focus-visible,.gh-search:focus-visible,.gh-burger:focus-visible{
  outline:3px solid var(--color-focus);outline-offset:2px;
}
.gh-icon-btn svg,.gh-search svg{width:20px;height:20px;fill:currentColor}
.gh-burger{position:relative}
.gh-burger::before,.gh-burger::after{
  content:'';position:absolute;left:11px;width:22px;height:2px;background:currentColor;
}
.gh-burger::before{top:17px}
.gh-burger::after{top:25px}
.gh-btn,.gh-head-btn,.gh-primary-btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--btn-height-compact);padding:0 var(--btn-pad-x-compact);
  background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);
  font-family:var(--font-body);font-size:14px;font-weight:600;line-height:1.2;
  text-decoration:none;border:0;border-radius:var(--radius);cursor:pointer;white-space:nowrap;
}
.gh-btn:hover,.gh-head-btn:hover,.gh-primary-btn:hover{
  background:var(--color-accent-deep);color:var(--color-on-deep);
}
.gh-btn:focus-visible,.gh-head-btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
/* post body */
.gh-canvas{max-width:var(--w-measure);margin-inline:auto;padding-inline:var(--gutter)}
.post-title,.gh-canvas h1{margin-top:var(--space-2xl)}
.author-list,.gh-comments{max-width:var(--w-measure);margin:var(--space-2xl) auto 0;padding-inline:var(--gutter)}
.author-list-title,.gh-comments-title{
  font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);color:var(--color-text);
  margin:0 0 var(--space-sm);
}
.author-list ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-md);flex-wrap:wrap}
.post-author-link{color:var(--color-link);text-decoration:none;font-weight:600}
.gh-comments-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md)}
.gh-comments-count{font-size:var(--size-small);color:var(--color-text-muted)}
.site-cover{position:relative}
.cover-image{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.cover-content{padding:var(--space-lg) var(--gutter);text-align:left}
.cover-logo{max-height:60px;width:auto;margin:0 auto var(--space-sm)}
.cover-description{font-size:var(--size-lead);color:var(--color-text);max-width:var(--w-narrow);margin-inline:auto}
.site-content{min-height:40vh}

/* ==========================================================================
   19. GHOST / KOENIG CONTENT
   Styling for content authored in Ghost's editor. Applies inside .totx-prose,
   which is what page.hbs and post.hbs wrap {{content}} in.
   Previously this existed only inside .pb-body in library.css, so ordinary
   Ghost pages and posts rendered essentially unstyled.
   ========================================================================== */
.totx-prose > *:first-child{margin-top:0}
.totx-prose > *:last-child{margin-bottom:0}
.totx-prose h2{margin-top:var(--space-xl)}
.totx-prose h3{margin-top:var(--space-lg)}
.totx-prose ul,.totx-prose ol{margin:0 0 var(--space-md);padding-left:var(--space-lg)}
.totx-prose li{margin-bottom:var(--space-xs)}
.totx-prose blockquote{
  margin:var(--space-lg) 0;padding:var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-left:var(--border-rail) solid var(--color-accent);
  font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);
  line-height:1.35;color:var(--color-text);
}
.totx-prose blockquote > *:last-child{margin-bottom:0}
.totx-prose hr{border:0;border-top:var(--border-hair) solid var(--color-border);margin:var(--space-xl) 0}
.totx-prose figure{margin:var(--space-lg) 0}
.totx-prose figcaption{
  font-size:var(--size-caption);line-height:1.5;color:var(--color-text-muted);
  margin-top:var(--space-xs);text-align:left;
}
.totx-prose img{width:100%;height:auto;border-radius:var(--radius)}
.totx-prose table{border-collapse:collapse;width:100%;font-size:var(--size-small);margin:var(--space-lg) 0}
/* Ghost content tables carry the author's own words. They get the theme's
   type and rules, but never a text-transform — uppercasing an author's header
   is a rendering-level rewrite of published copy. */
.totx-prose th{
  font-family:var(--font-display);font-size:var(--size-small);font-weight:800;letter-spacing:normal;
  text-transform:none;color:var(--color-text);text-align:left;
  padding:var(--space-sm) var(--space-md);
  border-bottom:var(--border-emphasis) solid var(--color-text);background:transparent;
}
.totx-prose td{padding:var(--space-sm) var(--space-md);border-bottom:var(--border-hair) solid var(--color-border)}
.totx-prose tbody tr:nth-child(even){background:var(--color-surface-mute)}
.totx-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--color-surface-mute);border:var(--border-hair) solid var(--color-border);
  padding:1px 5px;
}
.totx-prose pre{
  background:var(--color-surface-mute);border:var(--border-hair) solid var(--color-border);
  padding:var(--space-md);overflow-x:auto;margin:var(--space-lg) 0;
}
.totx-prose pre code{background:none;border:0;padding:0}

/* Koenig cards */
.kg-width-wide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw}
.kg-width-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
@media(min-width:1101px){
  .totx-prose .kg-width-wide{margin-left:calc(50% - 45vw);margin-right:calc(50% - 45vw);max-width:90vw}
}
.kg-image{max-width:100%;height:auto}
.kg-image-card{margin:var(--space-lg) auto}
.kg-gallery-container{display:flex;flex-direction:column;max-width:100%;gap:var(--space-2xs)}
.kg-gallery-row{display:flex;flex-direction:row;justify-content:center;gap:var(--space-2xs)}
.kg-gallery-image{flex:1 1 auto}
.kg-gallery-image img{width:100%;height:100%;object-fit:cover;display:block}
.kg-card-hascaption figcaption{margin-top:var(--space-xs)}
.kg-callout-card{
  display:flex;gap:var(--space-sm);
  background:var(--color-surface-alt);border-left:var(--border-rail) solid var(--color-accent-deep);
  padding:var(--space-md) var(--space-lg);margin:var(--space-lg) 0;
}
.kg-callout-card > div:last-child{flex:1}
.kg-callout-card p{margin:0}
.kg-bookmark-card{margin:var(--space-lg) 0}
.kg-bookmark-container{
  display:flex;text-decoration:none;color:inherit;
  background:var(--color-surface);border:var(--border-hair) solid var(--color-border);
  padding:var(--space-md) var(--space-lg);gap:var(--space-md);
}
.kg-bookmark-title{font-family:var(--font-display);font-weight:700;color:var(--color-text);margin-bottom:var(--space-2xs)}
.kg-bookmark-description{font-size:var(--size-small);color:var(--color-text)}
.kg-bookmark-metadata{font-size:var(--size-caption);color:var(--color-text-muted);margin-top:var(--space-xs)}
.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover}
.kg-button-card{margin:var(--space-lg) 0}
.kg-btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--btn-height);padding:0 var(--btn-pad-x);
  background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);
  font-family:var(--font-body);font-size:var(--size-button);font-weight:600;
  line-height:1.2;letter-spacing:.01em;text-decoration:none;border-radius:var(--radius);
}
.kg-btn:hover{background:var(--color-accent-deep);color:var(--color-on-deep)}
.kg-embed-card{margin:var(--space-lg) 0}
.kg-embed-card iframe{max-width:100%}
.kg-toggle-card{border-top:var(--border-hair) solid var(--color-border);padding:var(--space-md) 0}
.kg-toggle-heading{display:flex;justify-content:space-between;gap:var(--space-md);cursor:pointer}
.kg-toggle-card-heading{font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);margin:0}

/* ==========================================================================
   20. UTILITIES
   ========================================================================== */
/* Accessible text that is present for assistive technology and invisible on
   screen. Used for form labels so the visible published wording is unchanged. */
.totx-sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Honeypot. Hidden from sight and from assistive technology, but still a real
   field a bot will fill in. Never use display:none — many bots skip those. */
.totx-hp{
  position:absolute !important;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}
.totx-nowrap{white-space:nowrap}
.totx-keep{white-space:nowrap}
.totx-center{text-align:center}
.totx-hide{display:none !important}
@media(max-width:760px){ .totx-hide\@mobile{display:none !important} }
@media(min-width:761px){ .totx-hide\@desktop{display:none !important} }

/* ==========================================================================
   21. LEGACY BRIDGE
   --------------------------------------------------------------------------
   WHY THIS EXISTS, AND WHEN IT GOES AWAY

   v1.7.6 grew a shared vocabulary of short class names — .lead, .rule, .sec,
   .kick, .btn, .stat, .cap, .dek, .strip, .final — which every template
   re-declared in its own <style> block with slightly different values. That
   re-declaration was the single largest source of visual drift in the theme.

   The markup using those names is published content. Renaming classes across
   twenty templates would mean touching content markup, and content is frozen.
   So instead of renaming, this layer POINTS the old names at the canonical
   components. .lead is no longer "whatever this page decided a lead is" — it
   is exactly .totx-lead, everywhere, defined once.

   This is not a compatibility shim to be tolerated. It is the mapping table
   that makes the design system authoritative over markup we are not allowed
   to rewrite. It is complete, it is tested, and it has no page-specific
   branches.

   FOR NEW WORK: use the canonical .totx-* classes. Do not use the names in
   this section. They exist to hold the old pages to the system, not to give
   new pages a second vocabulary. See CLAUDE.md.
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
.wrap,.page{max-width:var(--w-page);margin-inline:auto}
.sec{padding:var(--space-2xl) var(--gutter);max-width:var(--w-page);margin-inline:auto}
@media(min-width:761px){ .sec{padding:var(--space-3xl) var(--gutter)} }
/* ---- EDITORIAL ALIGNMENT: LEFT BY DEFAULT -----------------------------
   `.center` is kept as a class name because it is published markup on twenty
   templates, but it no longer centres editorial text. Headings, eyebrows,
   leads, prose, CTA copy, FAQ and section headings and their decorative rules
   all set left, at every width. Centring survives only inside contained
   functional components — a button label, a stat value, a comparison box —
   where it belongs to the box rather than to the prose.               */
.sec.center,.center{text-align:left}
.sec.center .lead,.sec.center .dek,.center .lead,.center .dek{margin-inline:0}
/* On a phone, centred running text is hard to read, so headings and copy go
   left together. Nothing is left half-centred the way it was in v1.7.6. */
/* A button that is followed by something needs air after it. On the sailing
   calendar the "Add to Calendar" button sat flush against the note box below
   it — a 0px gap — because the button carries no bottom margin and the note
   carries no top margin. Neither is wrong on its own; together they glue. */
.btn + *, .cta + *, .totx-btn + *, .btn-outline + *, .pbtn + *,
.vv-cta + *, .btn-primary + *{ margin-top:var(--space-lg) }

/* A padded block's first and last child must not add their own margin on top
   of that block's padding. One visual gap was being paid for up to four times:
   the last paragraph's margin, the section's bottom padding, the next
   section's top padding, and the next heading's top margin. This kills the
   first and last of those everywhere, at every width. */
.sec > *:last-child, .strip > *:last-child, .final > *:last-child,
.vv-final > *:last-child, .callout > *:last-child, .band > *:last-child,
.herocard > *:last-child, .totx-section > *:last-child,
.explain > *:last-child, .wrap > *:last-child, .page > *:last-child,
.site-content > *:last-child{ margin-bottom:0 }
.sec > *:first-child, .strip > *:first-child, .final > *:first-child,
.callout > *:first-child, .band > *:first-child, .herocard > *:first-child,
.totx-section > *:first-child{ margin-top:0 }

/* Two stacked sections each pay a full pad, so the gap between one
   paragraph and the next heading is the sum of both — 128px on desktop and
   96px on a phone before anything else contributes. A section that paints a
   background or draws a top rule keeps its own padding, because there the
   padding is the inside of a band rather than the gap between two things. */
.sec + .sec:not(.is-tint):not(.is-topline):not(.strip):not(.final):not(.band):not(.callout){
  padding-top:0;
}
.strip + .sec,.final + .sec,.band + .sec,.callout + .sec{ padding-top:var(--space-xl) }
/* A band supplies its own inside padding, so the section that runs into it
   should not also pay a full bottom pad — that pairing was the largest
   remaining dead zone on desktop, at roughly 128px of nothing. */
.sec:has(+ .strip), .sec:has(+ .final), .sec:has(+ .band),
.sec:has(+ .callout), .sec:has(+ .resources), .sec:has(+ .vv-final){
  padding-bottom:var(--space-md);
}
@media(min-width:761px){
  .strip + .sec,.final + .sec,.band + .sec,.callout + .sec{ padding-top:var(--space-2xl) }
}

/* ---- mobile vertical rhythm -------------------------------------------
   Every section paid a full 48px top AND bottom, so two stacked sections put
   ~110px of nothing between one paragraph and the next heading. That is
   token-compliant and still wrong: the tokens were being applied twice to the
   same piece of empty space.

   On a phone the section pad drops a step, and a plain section stacked on
   another does not repeat its neighbour's padding. A section that paints a
   background or draws a top rule keeps its own, because there the padding is
   the inside of a band rather than the gap between two things.            */
@media(max-width:760px){
  .sec{padding:var(--space-xl) var(--gutter)}

}

/* --- type --------------------------------------------------------------- */
.kick,.vv-kick,.wpg-kick,.vkick,.rl,.jlabel,.explabel,.subh,.hero-chip,
.tag,.lbl,.gsec-eyebrow,.pb-eyebrow{
  font-family:var(--font-body);font-size:var(--size-eyebrow);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.5;
  color:var(--color-accent-deep);margin:0 0 var(--space-sm);
}
@media(max-width:760px){
  .kick,.vv-kick,.wpg-kick,.vkick,.rl,.jlabel,.explabel,.subh,.hero-chip,
  .tag,.lbl,.gsec-eyebrow,.pb-eyebrow{font-size:var(--size-micro-lg)}
}
.lead,.dek,.vv-lead,.hlead,.sub,.pitch{
  font-size:var(--size-lead);font-weight:400;line-height:1.6;
  color:var(--color-text);margin:0 0 var(--space-lg);max-width:var(--w-measure);
}
.wpg-p,.totx-body,.qa p,.vv-q p,.step p,.area .ad,.d,.i{
  font-size:var(--size-body);line-height:1.7;color:var(--color-text);
  margin:0 0 var(--space-md);
}
@media(max-width:760px){ .wpg-p,.totx-body,.qa p,.vv-q p,.step p{line-height:1.75} }
.cap,.caption{
  font-size:var(--size-caption);line-height:1.5;color:var(--color-text-muted);
  margin:var(--space-xs) 0 0;font-style:normal;
}
.sm,.small{font-size:var(--size-small);line-height:1.55;color:var(--color-text)}

/* The about-page meta line. v1.7.6 renders it uppercase and tracked out; the
   rebuild dropped the rule, which turned "DISNEY CRUISE LINE TRAVEL AGENT ·
   TEXAS · TRAVEL OBSESSED TX" into sentence case. */
.page-about .sub,.ab .sub{
  font-size:var(--size-small);color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.08em;margin:var(--space-md) 0 0;
}

/* .st is a step label, not an eyebrow. v1.7.6 renders it in the display face
   at 15px in sentence case; an earlier v2.0.0 revision folded it into the
   eyebrow group above, which uppercased "Apple Calendar", "Outlook" and the
   Royal Caribbean step labels. */
.st{
  font-family:var(--font-display);font-weight:800;font-size:var(--size-button);
  letter-spacing:normal;text-transform:none;line-height:1.4;
  color:var(--color-text);margin:0 0 var(--space-xs);
}

/* --- 6b. THE SPARKLE ----------------------------------------------------
   An occasional personality flourish, and the third and last level of the
   accent hierarchy: teal is the core brand, pink is the occasional expressive
   accent, the sparkle is the occasional flourish.

   THREE SIZES. There is no fourth, and no arbitrary width. A sparkle is
   decorative, so it is always aria-hidden and never sits over readable text.

   NEVER ANIMATED. No transition, no keyframes, no transform on hover. If a
   sparkle moves, it has stopped being a mark and started being a distraction.

   Colour comes from the caller — pink by preference, bright teal as the
   secondary option, mint ONLY on a dark, deep-teal or photographic ground.
   Deep teal, ink and multicolour clusters are not permitted. Full rules and
   the reasoning are in DESIGN-SYSTEM.md § Sparkles.                          */
.totx-sparkle{position:absolute;pointer-events:none;z-index:4;line-height:0}
.totx-sparkle svg{display:block;width:100%;height:auto}
.totx-sparkle.is-sm{width:var(--sparkle-sm)}
.totx-sparkle.is-md{width:var(--sparkle-md)}
.totx-sparkle.is-lg{width:var(--sparkle-lg)}
/* a sparkle set beside text rather than parked in a corner */
.totx-sparkle.is-inline{position:static;display:inline-block;vertical-align:-1px;margin-left:var(--space-xs)}
/* motion is never correct for this component, so it is refused at the source */
.totx-sparkle,.totx-sparkle svg,.lib-sparks i,.lib-sparks svg{
  animation:none!important;transition:none!important;
}

/* --- numbered step indicator: the one round thing -----------------------
   `--radius` is 0 and cards, buttons and surfaces are square. A numbered
   process marker is the documented exception: a filled badge carrying a
   numeral reads as a step when it is a disc and as a button when it is a
   square, and it was being mistaken for one.

   This is NOT permission for rounded cards or buttons anywhere else. It
   applies only to a small filled badge whose entire content is a step number.
   Plain numerals that are not filled badges — the inquiry, Virgin Voyages and
   Royal Caribbean `01 / 02 / 03` numerals — stay as they are; they are
   typography, not markers.                                                 */
.totx-step-num,.page-payment .pcard .num{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--color-accent);color:var(--color-btn-primary-text);
  font-family:var(--font-display);font-weight:800;font-size:var(--size-body);
}

/* --- standalone links are tap targets ----------------------------------- */
/* A link that ends a card or a step is not an inline prose link — it is the
   thing you tap. v1.7.6 left these at their text height (16–20px). The design
   system's minimum is 44px and the fix is padding, never a larger font, so the
   type scale and the published words are both untouched. */
.guide > a, .step > a, .dlink > a, .crumb > a, .jgrid > a,
.author-list > a, .tof-legal > a,
/* a featured related-content item is the same row link at split scale, so it
   takes the same tap target — it measured 156x20 without this */
.totx-split > div > a{
  display:inline-flex; align-items:center; min-height:var(--btn-height-compact);
}
#dcht-app .actions > a.shop, #dcht-app .name > button.befirst{
  min-height:var(--btn-height-compact);
}
#dcht-app .search .js-search{ min-height:var(--btn-height-compact); }

/* --- the decorative rule: five classes, one definition ------------------
   ALIGNMENT IS INHERITED, NOT LISTED. The rule is an inline-block, so it
   simply follows its container's text-align: centred sections centre it,
   left sections leave it left. The previous version was display:block with a
   hand-maintained `margin-inline:auto` list that named `.rule` and nothing
   else — which is why the inquiry hero's `.hrule` and the Virgin Voyages
   `.vv-rule` sat hard left inside visibly centred compositions. A list that
   has to be kept in sync with another list will always drift; this cannot.

   Alignment is a block-level margin, not an inline-block flowing in a line
   box — an earlier attempt at inline-block made the rule share a line with a
   preceding badge on Royal Caribbean.

   The centring list below is EXHAUSTIVE and derived from what actually
   renders centred, not guessed. An acceptance check asserts that every rule
   inside a `text-align:center` container is visually centred, so if a new
   centred container appears the test fails rather than the page quietly
   looking wrong. That is what went missing before: the width list named five
   classes and the centring list named one, so `.hrule` and `.vv-rule` sat
   hard left inside visibly centred compositions.                          */
.rule,.hrule,.vv-rule,.wpg-rule,.totx-rule{
  display:block;
  width:var(--rule-w);height:var(--rule-h);background:var(--color-accent);
  border-radius:var(--radius);margin:var(--space-md) 0 var(--space-lg);
}
/* The rule marks the start of a SECTION, not the fact that a heading happened.
   Under an h3 subhead it was repeating the same 200px mark within one screen
   of the h2's — two identical stamps doing no hierarchy work. Section headings
   only: h1 and h2, plus the paragraphs that stand in for an h2 in a conversion
   strip. */
h3 + .rule, h3 + .hrule, h3 + .vv-rule, h3 + .wpg-rule, h3 + .totx-rule,
h4 + .rule, h4 + .hrule, h4 + .totx-rule{ display:none }

/* Always centred, at every width. */
.rule.is-center, .totx-rule--center{ margin-inline:auto }
/* Centred from 761px up. Below that these containers go left-aligned, because
   centred running text is hard to read on a phone — and a rule must always
   match its container, never float centred above left-aligned copy. */
/* The inquiry hero is the reverse case: a deliberately centred composition on
   a phone. Eyebrow, headline and rule read as one centred lockup there. */
/* escape hatch for a rule whose container is not itself centred */
.rule.is-center,.totx-rule--center,.totx-cta .totx-rule{
  display:block;margin-inline:auto;
}

/* --- buttons: seventeen implementations, one component ------------------ */
.btn,.cta,.vv-cta,.totx-primary-cta,.pbtn,.btn-primary,.btn-lg,
.btn-storefront,.btn-nav,.pp-offer-btn,.shop-store-btn,.tn-m-book{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  gap:var(--space-xs);min-height:var(--btn-height);padding:0 var(--btn-pad-x);
  background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);
  font-family:var(--font-body);font-size:var(--size-button);font-weight:600;
  line-height:1.2;letter-spacing:.01em;text-decoration:none;
  border:0;border-radius:var(--radius);cursor:pointer;text-wrap:balance;
  transition:background var(--t-fast),transform var(--t-fast);
}
.btn:hover,.cta:hover,.vv-cta:hover,.totx-primary-cta:hover,.pbtn:hover,
.btn-primary:hover,.btn-lg:hover,.btn-storefront:hover,.btn-nav:hover,
.pp-offer-btn:hover,.shop-store-btn:hover,.tn-m-book:hover{
  background:var(--color-accent-deep);color:var(--color-on-deep);text-decoration:none;
}
.btn:active,.cta:active,.vv-cta:active,.totx-primary-cta:active{transform:translateY(1px)}
.btn:focus-visible,.cta:focus-visible,.vv-cta:focus-visible,.totx-primary-cta:focus-visible,
.pbtn:focus-visible,.btn-primary:focus-visible,.btn-storefront:focus-visible,
.btn-nav:focus-visible,.pp-offer-btn:focus-visible{
  outline:3px solid var(--color-focus);outline-offset:2px;
}
.btn.sm,.cta.sm,.btn-nav,.btn.compact{
  min-height:var(--btn-height-compact);padding:0 var(--btn-pad-x-compact);font-size:14px;
}
/* outline variants: full button geometry plus the secondary treatment, so they
   work whether or not the element also carries .btn */
.btn-outline,.btn-ghost,.tn-book{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--btn-height);padding:0 calc(var(--btn-pad-x) - 2px);
  font-family:var(--font-body);font-size:var(--size-button);font-weight:600;
  line-height:1.2;letter-spacing:.01em;text-decoration:none;
  border-radius:var(--radius);cursor:pointer;text-wrap:balance;
}
.btn-outline,.btn-ghost,.tn-book{
  background:transparent;color:var(--color-accent-deep);
  border:1.5px solid var(--color-accent);
}
.btn-outline:hover,.btn-ghost:hover,.tn-book:hover{
  background:var(--color-surface-alt);color:var(--color-accent-deep);
}
/* standalone CTAs centre themselves and their labels on a phone */
@media(max-width:760px){
  .strip .btn,.strip .cta,.final .btn,.final .cta,.vv-final .vv-cta,
  .totx-cta .btn,.totx-cta .cta,.ab .btn,.center > .btn,.center > .cta{
    display:flex;width:100%;max-width:var(--btn-max-mobile);margin-inline:auto;
  }
}

/* --- bands: strip / final / band → the standard mint CTA ---------------- */
.strip,.final,.vv-final,.band,.callout,.resources{
  background:var(--color-surface-alt);
  /* No ink rules. The mint ground is the separation; a full-width black line
     above and below turned every band into a boxed landing-page module. */
  padding:var(--space-2xl) var(--gutter);text-align:left;margin:0;
}
@media(max-width:760px){ .strip,.final,.vv-final,.band,.callout,.resources{padding:var(--space-xl) var(--gutter)} }
@media(min-width:761px){ .strip,.final,.vv-final,.band,.callout,.resources{padding:var(--space-3xl) var(--gutter)} }
.strip > *,.final > *,.vv-final > *,.callout > *{max-width:var(--w-narrow);margin-inline:0}
.strip h2,.final h2,.vv-final h2,.callout h2,.resources h2{color:var(--color-text);margin:0 0 var(--space-sm)}
.strip p,.final p,.vv-final p,.callout p{color:var(--color-text);margin:0 0 var(--space-lg)}
/* Editorial blocks inside a band are left-aligned now, so there is no centring
   to defend. The Pass-2 specificity fix that lived here is gone with the
   centring it existed to protect; the acceptance check that asserts it remains,
   and simply has nothing to flag while nothing editorial is centred. */
/* Centred from 761px up. Below that these containers go left-aligned, because
   centred running text is hard to read on a phone — and a rule must always
   match its container, never float centred above left-aligned copy. */
/* The inquiry hero is the reverse case: a deliberately centred composition on
   a phone. Eyebrow, headline and rule read as one centred lockup there. */
/* escape hatch for a rule whose container is not itself centred */
.rule.is-center,.totx-rule--center,.totx-cta .totx-rule{
  display:block;margin-inline:auto;
}

/* --- buttons: seventeen implementations, one component ------------------ */
.btn,.cta,.vv-cta,.totx-primary-cta,.pbtn,.btn-primary,.btn-lg,
.btn-storefront,.btn-nav,.pp-offer-btn,.shop-store-btn,.tn-m-book{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  gap:var(--space-xs);min-height:var(--btn-height);padding:0 var(--btn-pad-x);
  background:var(--color-btn-primary-bg);color:var(--color-btn-primary-text);
  font-family:var(--font-body);font-size:var(--size-button);font-weight:600;
  line-height:1.2;letter-spacing:.01em;text-decoration:none;
  border:0;border-radius:var(--radius);cursor:pointer;text-wrap:balance;
  transition:background var(--t-fast),transform var(--t-fast);
}
.btn:hover,.cta:hover,.vv-cta:hover,.totx-primary-cta:hover,.pbtn:hover,
.btn-primary:hover,.btn-lg:hover,.btn-storefront:hover,.btn-nav:hover,
.pp-offer-btn:hover,.shop-store-btn:hover,.tn-m-book:hover{
  background:var(--color-accent-deep);color:var(--color-on-deep);text-decoration:none;
}
.btn:active,.cta:active,.vv-cta:active,.totx-primary-cta:active{transform:translateY(1px)}
.btn:focus-visible,.cta:focus-visible,.vv-cta:focus-visible,.totx-primary-cta:focus-visible,
.pbtn:focus-visible,.btn-primary:focus-visible,.btn-storefront:focus-visible,
.btn-nav:focus-visible,.pp-offer-btn:focus-visible{
  outline:3px solid var(--color-focus);outline-offset:2px;
}
.btn.sm,.cta.sm,.btn-nav,.btn.compact{
  min-height:var(--btn-height-compact);padding:0 var(--btn-pad-x-compact);font-size:14px;
}
/* outline variants: full button geometry plus the secondary treatment, so they
   work whether or not the element also carries .btn */
.btn-outline,.btn-ghost,.tn-book{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:var(--btn-height);padding:0 calc(var(--btn-pad-x) - 2px);
  font-family:var(--font-body);font-size:var(--size-button);font-weight:600;
  line-height:1.2;letter-spacing:.01em;text-decoration:none;
  border-radius:var(--radius);cursor:pointer;text-wrap:balance;
}
.btn-outline,.btn-ghost,.tn-book{
  background:transparent;color:var(--color-accent-deep);
  border:1.5px solid var(--color-accent);
}
.btn-outline:hover,.btn-ghost:hover,.tn-book:hover{
  background:var(--color-surface-alt);color:var(--color-accent-deep);
}
/* standalone CTAs centre themselves and their labels on a phone */
@media(max-width:760px){
  .strip .btn,.strip .cta,.final .btn,.final .cta,.vv-final .vv-cta,
  .totx-cta .btn,.totx-cta .cta,.ab .btn,.center > .btn,.center > .cta{
    display:flex;width:100%;max-width:var(--btn-max-mobile);margin-inline:auto;
  }
}

/* --- bands: strip / final / band → the standard mint CTA ---------------- */
.strip,.final,.vv-final,.band,.callout,.resources{
  background:var(--color-surface-alt);
  /* No ink rules. The mint ground is the separation; a full-width black line
     above and below turned every band into a boxed landing-page module. */
  padding:var(--space-2xl) var(--gutter);text-align:left;margin:0;
}
@media(max-width:760px){ .strip,.final,.vv-final,.band,.callout,.resources{padding:var(--space-xl) var(--gutter)} }
@media(min-width:761px){ .strip,.final,.vv-final,.band,.callout,.resources{padding:var(--space-3xl) var(--gutter)} }
.strip > *,.final > *,.vv-final > *,.callout > *{max-width:var(--w-narrow);margin-inline:0}
.strip h2,.final h2,.vv-final h2,.callout h2,.resources h2{color:var(--color-text);margin:0 0 var(--space-sm)}
.strip p,.final p,.vv-final p,.callout p{color:var(--color-text);margin:0 0 var(--space-lg)}
/* …and the same again, element-qualified.

   `.strip > *` is one class (0,1,0). The rules above it that style the band's
   contents — `.strip h2`, `.final p` and friends — are class-plus-element
   (0,1,1), and they set the `margin` shorthand, which resets margin-inline to
   0. So the more specific rule silently won and every closing-CTA heading and
   paragraph sat hard against the left edge of a visibly centred band, on five
   pages. `:is()` here takes the specificity of its most specific argument, so
   this matches (0,1,1) and wins on order.

   This is the same failure as the decorative rule: a centring declaration that
   loses a specificity fight it was never checked against. The acceptance suite
   now asserts that a width-constrained block inside a centred container is
   actually centred. */
.strip > :is(h1,h2,h3,h4,p,ul,ol,div,figure,blockquote),
.final > :is(h1,h2,h3,h4,p,ul,ol,div,figure,blockquote),
.vv-final > :is(h1,h2,h3,h4,p,ul,ol,div,figure,blockquote),
.callout > :is(h1,h2,h3,h4,p,ul,ol,div,figure,blockquote),
.band > :is(h1,h2,h3,h4,p,ul,ol,div,figure,blockquote),
{
  margin-inline:auto;
}

/* The lead line of a promo band. Four templates carried this as an inline
   style with a hard-coded family and a 20px or 22px size; it is one component. */
.strip .lede-line,.final .lede-line,.vv-final .lede-line,.callout .lede-line,.lede-line{
  font-family:var(--font-display);font-weight:800;font-size:var(--size-h2);
  line-height:1.2;color:var(--color-text);
  margin:0 0 var(--space-xs);
}

/* --- cards, rows and hairlines ----------------------------------------- */
.step,.author,.note,.room,.cmpcol,.fitcol,.jump,.qbox,.pcard,
.timebox,.embedwrap,.formcard,.herocard,.shop-card,.ccard,.qfn{
  background:var(--color-surface);border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-lg);
}
/* The inset callout: a tinted block with a teal rail, sitting INSIDE the
   content column. Unlike the full-bleed bands (.strip/.band/.callout), which
   are supposed to butt straight up against the section above them, this one
   is an object on the page and needs air around it — with no top margin its
   tint edge collided with whatever preceded it, which on the calendar page
   put the mint hard against the bottom of the "Add to Calendar" button. */
.note,.schedbox,.transfer,.wpg,.qfn{
  background:var(--color-surface-alt);border:0;
  border-left:var(--border-rail) solid var(--color-accent-deep);
  padding:var(--space-md) var(--space-lg);
  margin-block:var(--space-lg);
}
/* first thing in its container has nothing above it to clear */
.note:first-child,.schedbox:first-child,.transfer:first-child,
.wpg:first-child,.qfn:first-child{ margin-top:0 }
.row,.r,.nrow,.vv-row,.area,.si,.guide,.dlink,.penrow,.cmprow,.trow{
  border-top:var(--border-hair) solid var(--color-border);
  padding:var(--space-md) 0;
}
.row.first,.nrow.first,.vv-row.first,.vv-q.first,.area:first-child{border-top-width:var(--border-hair)}

/* --- stat bars ---------------------------------------------------------- */
.stats,.vv-stats{
  display:flex;flex-wrap:wrap;
  border-top:var(--border-hair) solid var(--color-text);
  border-bottom:var(--border-hair) solid var(--color-text);
  margin:var(--space-lg) 0;
}
.stat,.vv-stat{
  flex:1 1 50%;padding:var(--space-md) var(--space-lg);
  border-right:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
}
.stat:nth-child(2n),.vv-stat:nth-child(2n){border-right:0}
.stat:nth-last-child(-n+2),.vv-stat:nth-last-child(-n+2){border-bottom:0}
/* A stat cell is a contained functional component, so centring belongs to the
   box rather than to the prose — the documented exception to editorial-left.
   The value has to dominate its label, and the label needs a measure that
   does not strand its last word ("…A DELUXE VERANDAH"). */
.stat,.vv-stat,.totx-stat{text-align:center}
.stat b,.vv-stat b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:var(--size-h2);line-height:1.05;letter-spacing:-.018em;
  color:var(--color-text);text-wrap:balance;
}
.stat span,.vv-stat span{
  display:block;font-size:var(--size-micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-text-muted);
  margin:var(--space-xs) auto 0;line-height:1.4;max-width:18ch;text-wrap:balance;
}
@media(min-width:761px){
  .stat,.vv-stat{flex:1;border-bottom:0}
  .stat:nth-child(2n),.vv-stat:nth-child(2n){border-right:var(--border-hair) solid var(--color-border)}
  .stat:last-child,.vv-stat:last-child{border-right:0}
}

/* --- FAQ / disclosure --------------------------------------------------- */
/* A measure-limited block of LEFT-ALIGNED content hangs from the content
   gutter, it does not centre in the column. `margin-inline:auto` centres the
   BOX while the text inside stays left, so the block starts at an edge
   nothing else on the page shares — a phantom indent. See DESIGN-SYSTEM.md,
   "A measure is a width, not a position". */
.qa,.faqwrap,.faq{max-width:var(--w-measure);margin-inline:0}
/* .qa is a FAQ list wrapper on some pages and a single item on others, so the
   divider goes on its children rather than the wrapper. */
.qa > div,.qa > details{border-top:var(--border-hair) solid var(--color-border);padding:var(--space-md) 0}
.qa > div:last-child,.qa > details:last-child{border-bottom:var(--border-hair) solid var(--color-border)}
.qa h3,.q h3,.vv-q h3,.faq-item summary,.shipset summary{
  font-family:var(--font-display);font-weight:700;font-size:var(--size-h3);
  line-height:1.3;color:var(--color-text);margin:0 0 var(--space-xs);
}
.qa p,.q p,.vv-q p{font-size:var(--size-body);line-height:1.7;color:var(--color-text)}
.q,.vv-q,.faq-item{border-top:var(--border-hair) solid var(--color-border);padding:var(--space-md) 0}
.shipset,.faq-item{border:0;border-top:var(--border-hair) solid var(--color-border)}
.shipset summary,.faq-item summary{cursor:pointer;list-style:none;min-height:var(--btn-height);display:flex;align-items:center}
.shipset summary::-webkit-details-marker,.faq-item summary::-webkit-details-marker{display:none}

/* --- figures ------------------------------------------------------------ */
.fig,.vv-heroimg,.ph{margin:var(--space-lg) 0}
.fig img,.vv-heroimg img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
/* Wider crop on larger screens. v1.7.6 pinned these to 360px inline, which
   worked out around 2.7:1 on desktop; 3/2 there would be a 690px-tall hero. */
@media(min-width:761px){
  .fig img,.vv-heroimg img{aspect-ratio:21/9}
  .fig.tall img{aspect-ratio:16/9}
}
.fig.tall img{aspect-ratio:4/3}
.fig figcaption,.cap{font-size:var(--size-caption);color:var(--color-text-muted);margin-top:var(--space-xs)}

/* --- tables ------------------------------------------------------------- */
.tblwrap,.schedwrap{overflow-x:auto;max-width:var(--w-wide);margin:var(--space-lg) 0}
.tblwrap table,.schedwrap table,.sched,.cmp{border-collapse:collapse;width:100%;font-size:var(--size-small)}
.sched th,.cmp th,.tblwrap th{
  font-family:var(--font-display);font-size:var(--size-micro);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--color-accent-deep);text-align:left;
  padding:var(--space-sm) var(--space-md);
  border-bottom:var(--border-emphasis) solid var(--color-text);background:transparent;
}
/* Only the DCL sailing tables were uppercase in v1.7.6. The Royal Caribbean
   comparison table and the generic .tblwrap tables were sentence case, and
   uppercasing them rewrote published words at the rendering layer. */
.cmp th,.tblwrap th{
  font-family:var(--font-body);font-size:var(--size-small);font-weight:700;
  letter-spacing:normal;text-transform:none;color:var(--color-text);
}
.sched td,.cmp td,.tblwrap td{
  padding:var(--space-sm) var(--space-md);
  border-bottom:var(--border-hair) solid var(--color-border);color:var(--color-text);
}
.sched tbody tr:nth-child(even),.cmp tbody tr:nth-child(even),.tblwrap tbody tr:nth-child(even){
  background:var(--color-surface-mute);
}

/* --- comparison box subhead -------------------------------------------
   `.fitcol h4` / `.cmpcol h4` label the two halves of a comparison. They were
   inheriting the h4 body size and disappearing into the list beneath them.
   They are subheads: display face, clearly above list copy, and centred
   inside their own box — centring here belongs to the component, not to the
   prose, the same exception the stat cell gets. */
.fitcol > h4, .cmpcol > h4, .totx-compare-col > h4{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--size-h3); line-height:1.25; letter-spacing:-.012em;
  color:var(--color-text); text-align:center;
  margin:0 0 var(--space-md); padding-bottom:var(--space-sm);
  border-bottom:var(--border-hair) solid var(--color-border);
}
@media(min-width:761px){
  .fitcol > h4, .cmpcol > h4, .totx-compare-col > h4{ font-size:21px }
}

/* --- utility modules are compact, not feature sections ------------------
   "Jump to what you need" is a table of contents. It was carrying full card
   padding and feature-section link heights, which made a nine-link index as
   tall as a content section. */
.jump{
  padding:var(--space-md) var(--space-lg);
}
.jump .jlabel{ margin:0 0 var(--space-xs) }
/* Compact on desktop where this is an index; still a 44px tap target on a
   phone, where it is something you actually press. */
.jgrid > a{
  min-height:var(--btn-height-compact); padding:var(--space-xs) 0;
  display:flex; align-items:center;
  font-size:var(--size-small); line-height:1.45;
  border-top:0;
  border-bottom:var(--border-hair) solid var(--color-border);
}

/* --- contained conversion modules are centred compositions --------------
   Editorial content is left-aligned. A dedicated conversion block is not
   editorial: heading, supporting line and button are one centred lockup, on
   desktop and on mobile alike.

   The test is content, not class name — a band that contains a call to action
   IS a conversion module, and `:has()` lets the rule find them all rather than
   relying on a hand-kept list that will drift. `.final` and `.totx-cta` are
   conversion modules by definition.

   The test has a second half, and it matters: a conversion lockup is a
   heading, ONE supporting line and a button. A band carrying two or more
   paragraphs of prose is editorial writing that happens to end in a link, and
   centring it would be centring article prose — the thing we are not doing.
   Royal Caribbean's $50-credit band is the case that proved it: four sentences
   across two paragraphs, and half-applied centring left four different left
   edges inside one module.

   `.lede-line` and `.kick` are excluded from that count because they are
   headings and eyebrows that happen to be marked up as paragraphs — Galveston
   and the schedule page both open a conversion strip with one. Counting them
   as prose would have thrown two real conversion lockups out of the rule. */
:is(.final,
    .totx-cta,
    .strip:has(> :is(.cta,.btn,.btn-outline)),
    .callout:has(> :is(.cta,.btn)),
    .band:has(> :is(.cta,.btn)),
    .vv-final:has(> :is(.cta,.vv-cta,.btn)),
    .resources:has(> .cta)
   ):not(:has(> p:not(.lede-line):not(.kick) ~ p:not(.lede-line):not(.kick))){
  text-align:center;
}
:is(.final,
    .totx-cta,
    .strip:has(> :is(.cta,.btn,.btn-outline)),
    .callout:has(> :is(.cta,.btn)),
    .band:has(> :is(.cta,.btn)),
    .vv-final:has(> :is(.cta,.vv-cta,.btn))
   ):not(:has(> p:not(.lede-line):not(.kick) ~ p:not(.lede-line):not(.kick))) > *{
  margin-inline:auto;
}

/* --- how much air a tinted band owes its last line ----------------------
   Symmetric padding is right for a conversion band: the button is the point of
   the section and needs room beneath it to read as a target rather than as the
   floor of the box.

   It is wrong everywhere else. A band that ends in a grid of items, a caption
   or an image already carries trailing space inside its own content — the
   item's line-height, the caption's descender, the grid's last row. Adding a
   full 64px under that leaves a mint field with nothing in it, which is what
   the homepage Resources module and the deck-chair caption were doing.

   Same content test as the centring rule above, inverted: no contained call to
   action means no reason for the deep bottom pad.

   The amount travels in a custom property rather than in competing
   `padding-bottom` declarations, so the cases below set a value instead of
   fighting each other's specificity. */
.strip,.final,.vv-final,.band,.callout,.resources{
  --band-tail:var(--space-xl);
  padding-bottom:var(--band-tail);
}
@media(min-width:761px){
  .strip,.final,.vv-final,.band,.callout,.resources{ --band-tail:var(--space-3xl) }
}
/* content-ended band: no contained call to action, so no deep pad */
.strip:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
.band:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
.callout:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
.resources:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)){
  --band-tail:var(--space-lg);
}
@media(min-width:761px){
  .strip:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
  .band:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
  .callout:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)),
  .resources:not(:has(> .cta)):not(:has(> .btn)):not(:has(> .btn-outline)){
    --band-tail:var(--space-xl);
  }
}
/* a caption is the end of its picture, not a paragraph in its own right, so a
   band that finishes on one closes up tighter still, at every width */
.band:not(:has(> .cta)):not(:has(> .btn)):has(> .cap:last-child),
.strip:not(:has(> .cta)):not(:has(> .btn)):has(> .cap:last-child){
  --band-tail:var(--space-lg);
}
/* .resources was never added to the last-child margin reset, so the guides
   grid contributed its own bottom margin on top of the pad */
.resources > *:last-child{ margin-bottom:0 }
.resources > *:first-child{ margin-top:0 }

/* --- paired resource items end on the same line -------------------------
   Two related-story items whose headings and copy wrap to different depths
   were leaving their links at different heights, so the pair read as a
   misalignment rather than as two items. The copy column becomes a flex
   column and the link is pushed to its foot, which lines the links up while
   letting the heading and body above them run to whatever length they need.

   Desktop only: in a single column there is no pair to align, and stretching
   there would only add empty space inside each item. The thumbnail keeps its
   own top alignment so it never stretches to the row height. */
@media(min-width:761px){
  .guides{ align-items:stretch }
  .guide{ align-items:start }
  .guide-thumb{ align-self:start }
  .guide > div:last-child{ display:flex; flex-direction:column; height:100% }
  .guide > div:last-child > a:last-child{ margin-top:auto }
}

/* --- the display statement ---------------------------------------------
   A short stacked value statement — "Same price / Less stress / Better
   decisions / Best trip ever" — is the loudest line on its screen and has to
   outrank the ordinary section heading that follows it. As an h2 it was
   rendering at the same size as every other h2 and losing its authority.

   Named role, so the next one does not become another one-page font-size
   exception. Left-aligned like all editorial type; the eyebrow above it stays
   small so the contrast does the work. */
.totx-statement{
  font-family:var(--font-display); font-weight:800;
  font-size:var(--size-statement); line-height:1.04; letter-spacing:-.024em;
  color:var(--color-text); text-align:left; text-wrap:balance;
  margin:0 0 var(--space-md);
}

/* --- related content: two components, both compact ---------------------
   Both of these were falling through to the generic card: a white box with
   24px of padding, which turned a one-line link into a large empty panel and
   a two-item reading list into text floating in a mint field.            */

/* A. the compact related link — a row of three, mint, one line each. */
.relcard{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-sm);
  background:var(--color-surface-alt);
  border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);
  padding:var(--space-sm) var(--space-md);
  min-height:var(--btn-height); text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:var(--size-small);
  line-height:1.35; color:var(--color-text);
}
.relcard:hover{ border-color:var(--color-accent); }
.relcard .ar{ color:var(--color-accent-deep); font-weight:800; flex:0 0 auto; }

/* B. the related story — magazine-style thumbnail beside copy, not a card. */
.guide{
  display:grid; grid-template-columns:96px 1fr; gap:var(--space-md);
  align-items:start; background:none; border:0; padding:0;
}
.guide-thumb{
  width:96px; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:var(--radius); background:var(--color-surface-mute);
}
.guide .tag{ margin:0 0 var(--space-2xs) }
.guide h3{ margin:0 0 var(--space-2xs) }
/* `:not(.tag)` because `.guide p` (0,2,0) was quietly out-specifying `.tag`
   (0,1,0), so the eyebrow inside a related-content item rendered at 14.5px
   instead of the documented 13px / 12.5px mobile. Same defect shape as
   `.strip h2` beating `.strip > *`: a more specific rule winning a fight
   nobody had checked. This is on the homepage too, not only Squared Away. */
.guide p:not(.tag){ margin:0 0 var(--space-xs); font-size:var(--size-small); color:var(--color-text) }
/* the link sits inside the copy column now, so this is a descendant selector */
.guide a,
/* the featured item at split scale reads as the same link as its siblings */
.totx-split > div > a{ display:inline-flex; align-items:center; min-height:var(--btn-height-compact);
  font-size:var(--size-small); font-weight:600; color:var(--color-accent-deep) }
@media(max-width:520px){
  .guide{ grid-template-columns:72px 1fr; gap:var(--space-sm) }
  .guide-thumb{ width:72px }
}

/* --- grids -------------------------------------------------------------- */
.cols2,.guides,.rgrid,.relgrid,.rooms,.cmp2,.fit,.jgrid,.gallery,.speclist,
.biogrid,.intro,.split,.bio-grid,.tgrid,.steps{display:grid;gap:var(--space-md)}
@media(min-width:761px){
  .cols2,.guides,.rgrid,.relgrid,.rooms,.cmp2,.fit,.jgrid,.biogrid,.intro,
  .split,.bio-grid,.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xl)}
  .gallery,.tgrid,.speclist{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg)}

  /* COLUMN COUNT FOLLOWS ITEM COUNT.
     A generic 2-up applied to a three-item module leaves an obvious hole in
     the bottom-right — the Concierge staterooms, the Galveston related links
     and the sailing-calendar steps all had one. `:has()` lets the grid read
     its own content instead of us guessing. */
  .guides:has(> :nth-child(3):last-child),
  .relgrid:has(> :nth-child(3):last-child),
  .steps:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);
  }
}
@media(min-width:1000px){
  /* the stateroom cards carry more copy, so they wait for a wider measure
     before going three across; below this they stack rather than sit 2 + hole */
  .rooms:has(> :nth-child(3):last-child){
    grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-lg);
  }
}
@media(min-width:761px) and (max-width:999px){
  .rooms:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}

/* ROWS SIZE TO THEIR CONTENT.
   Grid items stretch by default, so in a 2×2 of bare text rows the short item
   inherits the tall item's height and the eye reads a dead zone beneath it —
   which is what the homepage value grid was doing between items 1/2 and 3/4.
   Boxed components keep stretching, because there the box edges should line
   up; text rows do not. */
/* Comparison boxes size to their own content too. Forcing the three-item box
   to match the five-item box left roughly 200px of empty panel, which reads as
   a mistake rather than as symmetry. They share a top edge; that is enough. */
/* `.guides` is deliberately absent: its items stretch on desktop so the two
   CTA links can share a baseline (see the paired-resource rule above). The
   items have no background, so stretching is invisible apart from that. */
.rgrid,.intro,.split,.jgrid,.biogrid,.bio-grid,.steps,
.fit,.cmp2{align-items:start}
@media(max-width:760px){ .guides{align-items:start} }
/* A table of contents is not a feature section. The generic grid gap put 32px
   between every link row on top of each row's own divider, so a nine-link
   index stood as tall as a content section. Rows sit directly under one
   another; the divider is the separation. */
.jgrid{ row-gap:0; column-gap:var(--space-2xl) }
@media(min-width:761px){ .jgrid{ row-gap:0; column-gap:var(--space-2xl) }
  .jgrid > a{ min-height:0 } }
/* the value grid's rows follow their content; a tighter row gap keeps the
   pairs reading as one block */
.rgrid{ row-gap:var(--space-lg) }
@media(min-width:761px){ .rgrid{ row-gap:var(--space-lg) } }
.gallery img,.tgrid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}


/* ==========================================================================
   22. PAGE COMPONENTS
   --------------------------------------------------------------------------
   Genuinely page-specific layout that no shared component covers: bespoke
   grids, one-off editorial devices, and the hair-tool tracker application UI.
   Every rule here is scoped to a page body class so it cannot leak, and every
   value is a token. This section shrank from ~2,135 lines of per-template CSS
   to what you see below, because the shared vocabulary moved to sections 1-21.

   Adding to this section is a last resort. Read CLAUDE.md first.
   ========================================================================== */

/* ==========================================================================
   GROUP A — MIGRATED PAGE CSS
   bluey · home · about-adell · galveston-guide
   --------------------------------------------------------------------------
   Everything here is what survived the migration into screen.css v2.0.0.
   Rules that sections 1-21 of screen.css already provide are gone, not
   re-declared. No :root, no @font-face, no @import, no !important.
   Every rule is scoped to its page (body class, or the page's own .ab / .bl
   ancestor) so nothing can leak site-wide.
   Load AFTER screen.css.
   ========================================================================== */


/* --- bluey ---------------------------------------------------------------
   body.page-bluey · markup also uses .bl and the .totx-* editorial set.     */

/* section fields. The page uses .totx-on-white / .totx-on-mint rather than
   the canonical --tint / --mute modifiers, so those two names are mapped
   onto the same surfaces instead of the markup being rewritten. */
.page-bluey .totx-on-white{background:var(--color-page-bg)}
.page-bluey .totx-on-mint{background:var(--color-surface-alt)}
/* measure variant of the canonical .totx-inner */
.page-bluey .totx-section.is-measure > .totx-inner{max-width:var(--w-measure)}
/* containing block for the decorative sparkles parked in each section */
.page-bluey .totx-section > .totx-inner,
.page-bluey .totx-dark-break > .totx-inner{position:relative}

/* oversized editorial statement — the page's "say it louder" voice */
.page-bluey .totx-statement{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h1);
  line-height:1.1; letter-spacing:-.025em; color:var(--color-text);
  margin:var(--space-xl) 0 var(--space-lg); max-width:var(--w-wide);
}
.page-bluey .totx-statement.is-small{font-size:var(--size-h2)}
/* two-line statement: the second line sits under the first, not on top of it */
.page-bluey .stmt-1{margin:var(--space-md) 0 var(--space-2xs)}
.page-bluey .stmt-2{margin:0 0 var(--space-lg);color:var(--color-accent-deep)}

/* HEADLINE STRIPS (signature) — straight, never rotated, ragged right,
   staggered left offsets. Reserved for 2-4 moments per page. */
.page-bluey .totx-strips{margin:0 0 var(--space-lg)}
.page-bluey .totx-strip{
  position:relative; z-index:3; display:table;
  background:var(--color-surface);
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h1);
  line-height:1.1; letter-spacing:-.022em; color:var(--color-text);
  padding:var(--space-xs) var(--space-md) var(--space-sm);
  margin-bottom:var(--space-xs);
  border-radius:var(--radius); box-shadow:var(--shadow-lift);
}
.page-bluey .totx-strip:last-child{margin-bottom:0}
.page-bluey .totx-strip.is-1{margin-left:0}
.page-bluey .totx-strip.is-2{margin-left:var(--space-xl)}
.page-bluey .totx-strip.is-3{margin-left:var(--space-3xl)}
@media(max-width:760px){
  .page-bluey .totx-strip.is-2{margin-left:var(--space-sm)}
  .page-bluey .totx-strip.is-3{margin-left:var(--space-lg)}
  /* nowrap keeps each hero strip a single phrase on a phone */
  .page-bluey .bl-hero .totx-strip{white-space:nowrap}
}
/* Below ~360px the longest strip plus its stagger no longer fits. The stagger
   collapses first, and the strips are allowed to shrink with the viewport, so
   the hero never pushes the page sideways. */
@media(max-width:400px){
  .page-bluey .totx-strip.is-2,
  .page-bluey .totx-strip.is-3{margin-left:0}
  .page-bluey .totx-strip{font-size:var(--size-strip-tight);padding:var(--space-2xs) var(--space-sm) var(--space-xs)}
}

/* SPARKLES — absolute (.is-decor + a corner) for negative space, or inline
   beside an eyebrow where they can never collide with anything. */
/* the sparkle is a theme component, not a Bluey component — see section 6b */
.page-bluey .totx-sparkle.sp-tr{top:0;right:0}
.page-bluey .totx-sparkle.sp-bl{bottom:0;left:0}
/* below 900px there is no negative space left for the absolute ones to sit in */
@media(max-width:900px){ .page-bluey .totx-sparkle.is-decor{display:none} }

/* HOT TAKE — a confident editorial aside, not a warning box. The v1 version
   was a near-black field with white copy; the system has no dark content
   blocks, so it is now the tint field with a teal edge. */
.page-bluey .totx-hot-take{
  background:var(--color-surface-alt); color:var(--color-text);
  border-left:var(--border-rail) solid var(--color-accent);
  padding:var(--space-lg); max-width:var(--w-measure);
}
/* bright-teal chip carries the ink label, never white */
.page-bluey .totx-ht-label{
  display:inline-block; font-family:var(--font-display);
  font-size:var(--size-eyebrow); font-weight:800; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-btn-primary-text); background:var(--color-accent);
  padding:var(--space-2xs) var(--space-sm); margin:0 0 var(--space-sm);
}
.page-bluey .totx-ht-say{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h3);
  line-height:1.3; color:var(--color-text); margin:0;
}

/* "DARK BREAK" — in name only. Same punctuation role, on tint, because a
   near-black content band is not in the system. */
.page-bluey .totx-dark-break{background:var(--color-surface-alt);color:var(--color-text);padding:var(--space-4xl) var(--gutter)}
.page-bluey .totx-big{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h1);
  line-height:1.02; letter-spacing:-.03em; color:var(--color-text);
  margin:0 0 var(--space-md);
}
@media(max-width:900px){ .page-bluey .totx-dark-break{padding:var(--space-3xl) var(--gutter)} }
/* Same trailing-space rule as the homepage bands, applied to this page's own
   tinted section names. A tint that ends on a paragraph was leaving ~110px of
   empty mint below the last line. The white sections are untouched: there the
   padding IS the rhythm between sections, not a field around the content.
   The CTA test looks at descendants here because this page wraps its content
   in .totx-inner rather than placing children directly in the section. */
.page-bluey .totx-dark-break:not(:has(.cta)):not(:has(.btn)):not(:has(.totx-btn)),
.page-bluey .totx-on-mint:not(:has(.cta)):not(:has(.btn)):not(:has(.totx-btn)){
  padding-bottom:var(--space-xl);
}
@media(max-width:900px){
  .page-bluey .totx-dark-break:not(:has(.cta)):not(:has(.btn)):not(:has(.totx-btn)),
  .page-bluey .totx-on-mint:not(:has(.cta)):not(:has(.btn)):not(:has(.totx-btn)){
    padding-bottom:var(--space-lg);
  }
}

/* HERO + CAPTURE — photo with the tint panel pulled up over its lower edge */
.page-bluey .bl-hero{position:relative}
.page-bluey .bl-hero-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 55%}
.page-bluey .bl-hero-panel{
  position:relative; z-index:2; background:var(--color-surface-alt);
  margin:calc(var(--space-lg) * -1) var(--space-md) 0;
  padding:var(--space-lg) var(--space-md);
}
.page-bluey .bl-sub{
  font-family:var(--font-display); font-weight:700; font-size:var(--size-h3);
  line-height:1.3; color:var(--color-text); margin:var(--space-md) 0 var(--space-sm);
}
/* the Jotform embed card */
.page-bluey .bl-form{
  background:var(--color-surface);
  border:var(--border-hair) solid var(--color-border);
  border-top:var(--border-rail) solid var(--color-accent);
  padding:var(--space-md);
}
/* min-height reserves space so the third-party iframe does not shift the page */
.page-bluey .bl-form-embed{width:100%;border:0;display:block;min-height:190px}

/* PROOF LINE — four numbers under the "about me" copy */
.page-bluey .proofline{
  display:flex; flex-wrap:wrap;
  border-top:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
}
.page-bluey .proofline div{
  flex:1 0 50%; padding:var(--space-md) var(--space-sm);
  border-right:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
}
.page-bluey .proofline div:nth-child(2n){border-right:0}
.page-bluey .proofline div:nth-last-child(-n+2){border-bottom:0}
.page-bluey .proofline b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--size-h2);line-height:1;color:var(--color-text)}
.page-bluey .proofline span{display:block;margin-top:var(--space-xs);font-size:var(--size-eyebrow);text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);line-height:1.4}

/* INSTAGRAM STRIP — quiet, sits under the hero */
.page-bluey .bl-ig{
  border-top:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
  margin:var(--space-xl) var(--gutter) 0;
}
.page-bluey .bl-ig a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) 0;text-decoration:none;color:var(--color-text)}
.page-bluey .bl-ig svg{flex:0 0 auto;width:var(--space-lg);height:var(--space-lg);color:var(--color-accent-deep)}
.page-bluey .bl-ig .t{font-family:var(--font-display);font-weight:800;font-size:var(--size-h4);line-height:1.25;margin:0}
.page-bluey .bl-ig .s{font-size:var(--size-caption);line-height:1.4;color:var(--color-text-muted);margin:var(--space-2xs) 0 0}
.page-bluey .bl-ig a:hover .t{color:var(--color-accent-deep)}

/* 27 DECISIONS — the gridlines are the container showing through 1px gaps,
   so the whole thing reads as one field you take in at a glance. */
.page-bluey .decgrid{
  margin:var(--space-lg) 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--border-hair); background:var(--color-border);
  border:var(--border-hair) solid var(--color-border);
}
.page-bluey .decgrid li{
  background:var(--color-surface); margin:0; padding:var(--space-sm);
  display:flex; align-items:center;
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h4);
  line-height:1.25; color:var(--color-text);
}
/* the closing cell spans the row and takes the tint so it lands as a punchline */
.page-bluey .decgrid li.declast{grid-column:1 / -1;background:var(--color-surface-alt);padding:var(--space-md) var(--space-sm)}

/* THREE-PART SYSTEM — two plain steps then the hot take */
.page-bluey .flow{margin:var(--space-xl) 0 0}
.page-bluey .flowstep{padding:var(--space-md);margin-bottom:var(--space-sm);background:var(--color-surface);border:var(--border-hair) solid var(--color-border)}
.page-bluey .flowstep .t{font-family:var(--font-display);font-size:var(--size-eyebrow);font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--color-accent-deep);margin:0 0 var(--space-xs)}
.page-bluey .flowstep .l{font-family:var(--font-display);font-weight:800;font-size:var(--size-h3);line-height:1.25;margin:0}
/* the hot take runs full width inside the flow rather than to the measure */
.page-bluey .flowht{margin-bottom:var(--space-sm);max-width:none}

/* full-bleed photo band */
.page-bluey .band img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 50%}

/* RABBIT HOLES — image-led link cards */
.page-bluey .cards{display:grid;grid-template-columns:1fr;gap:var(--space-lg);margin:var(--space-lg) 0 0}
.page-bluey .card{display:block;text-decoration:none;color:inherit}
.page-bluey .card img{width:100%;aspect-ratio:3/2;object-fit:cover}
/* "read more" affordance, matching the canonical text button */
.page-bluey .card .go{font-size:var(--size-small);font-weight:600;color:var(--color-accent-deep);border-bottom:var(--border-emphasis) solid var(--color-accent);padding-bottom:2px}
.page-bluey .card:hover .go{border-bottom-color:var(--color-accent-deep)}

/* PLAIN LINK LIST under the cards */
.page-bluey .plainlinks{margin:var(--space-lg) 0 0;border-top:var(--border-hair) solid var(--color-border)}
.page-bluey .plainlinks a{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-md); padding:var(--space-md) 0;
  border-bottom:var(--border-hair) solid var(--color-border);
  text-decoration:none; color:var(--color-text);
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h3); line-height:1.3;
}
.page-bluey .plainlinks a span{color:var(--color-accent-deep)}
.page-bluey .plainlinks a:hover{color:var(--color-accent-deep)}

/* wider screens: the page stays a single column on purpose */
@media(min-width:761px){
  .page-bluey .bl-hero-media img{aspect-ratio:auto;height:540px;max-width:var(--w-page);margin-inline:auto;object-position:center 95%}
  .page-bluey .bl-hero-panel{max-width:var(--w-measure);margin:calc(var(--space-md) * -1) auto 0;padding:var(--space-xl)}
  .page-bluey .band img{aspect-ratio:auto;height:380px}
  .page-bluey .proofline div{flex:1 1 0;min-width:150px;border-bottom:0}
  .page-bluey .proofline div:nth-child(2n){border-right:var(--border-hair) solid var(--color-border)}
  .page-bluey .proofline div:last-child{border-right:0}
  .page-bluey .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-bluey .decgrid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:var(--w-wide)}
  .page-bluey .decgrid li,.page-bluey .decgrid li.declast{padding:var(--space-md)}
  .page-bluey .bl-ig,.page-bluey .bl-endcap{max-width:var(--w-measure);margin-inline:0}
}
/* v2.0.0 — four across started at 1000px, which gives each card a 225px
   measure. "Disney Cruises from Galveston" needs 240px to keep its last three
   words together, so every card heading orphaned between 1000 and 1240. The
   fourth column now waits until the cards are wide enough to hold their own
   headings. Rule 8: fix the layout, not the words. */
@media(min-width:1240px){
  .page-bluey .cards{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* --- home ----------------------------------------------------------------
   body.page-home                                                            */

/* HERO CARD — sits over the bottom-left of the hero photo on desktop only */
.page-home .hero{position:relative}
/* A 430px-tall hero on a 390px phone pushed the eyebrow, headline and the
   whole proposition below the fold. Square on a phone, unchanged on desktop.
   object-position holds the funnel and the Mickey mark in the crop. */
.page-home .hero img{width:100%;height:430px;object-fit:cover;object-position:center 52%}
@media(max-width:760px){
  .page-home .hero img{height:auto;aspect-ratio:1/1;object-position:center 46%}
}
.page-home .herocard{
  position:absolute; left:var(--space-xl); bottom:var(--space-xl);
  background:var(--color-surface); padding:var(--space-lg);
  max-width:440px;
}
@media(max-width:760px){ .page-home .herocard{position:static;max-width:none} }
/* v1.7.6 pinned this card at 440px, which leaves the H1 a 392px measure — 30px
   short of what "Cruise Travel Agent" needs to sit together, so the headline
   ended on two words at every desktop width. Rule 8 says fix the layout, not
   the words: the card gets 40px more from 761px up and the orphan resolves. */
@media(min-width:761px){ .page-home .herocard{max-width:480px} }

/* this page has no section wrapper, so its blocks carry their own gutter */
.page-home .intro,.page-home .split,.page-home .gallery{padding:var(--space-xl) var(--gutter)}
.page-home .reasons,.page-home .faq{padding:var(--space-xl) var(--gutter) var(--space-xs)}
.page-home .stats{margin-inline:var(--gutter)}
/* the two numbered sections open on a full-width ink hairline */
/* was an ink rule on every section — the site read as stacked boxes rather
   than one continuous editorial page. Neutral hairline, and only where a
   transition genuinely needs marking. */
.page-home .sec,.page-home .reasons{border-top:var(--border-hair) solid var(--color-border)}

/* inline tick list under the lead */
/* Four short proof claims. v1.7.6 set these at 13px inside one paragraph, held
   apart by &nbsp; pairs and a <br>; at the system's body size that wraps in the
   middle of a claim. The words are untouched — each claim is now its own
   inline-block so it can only break between claims, never inside one. */
.page-home .checks{
  font-size:var(--size-small);color:var(--color-text);line-height:1.7;
  margin:0 0 var(--space-md);display:flex;flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-lg);
}
.page-home .checks br{display:none}
.page-home .checks .check{display:inline-block}
.page-home .checks .c{color:var(--color-accent-deep);font-weight:700}

/* italic supporting line under a section title */
.page-home .isub{font-family:var(--font-body);font-style:italic;font-size:var(--size-lead);color:var(--color-text);margin:0 0 var(--space-md)}

.page-home .split img{width:100%;height:260px;object-fit:cover}

/* numbered rows: big numeral, then the point */
.page-home .row{display:grid;grid-template-columns:auto 1fr;gap:var(--space-lg)}
.page-home .row .n{font-family:var(--font-display);font-weight:800;font-size:var(--size-h2);color:var(--color-accent);line-height:1.1}
.page-home .row b{font-size:var(--size-h4);align-self:center}
.page-home .r{display:grid;grid-template-columns:auto 1fr;gap:var(--space-md)}
.page-home .r .n{font-family:var(--font-display);font-weight:800;font-size:var(--size-h3);color:var(--color-accent);line-height:1.1}
.page-home .r p{margin:var(--space-2xs) 0 0;font-size:var(--size-small);line-height:1.55;color:var(--color-text)}


/* --- about A'Dell --------------------------------------------------------
   body.page-about · every rule is already scoped by the page's own .ab       */

.ab .fig{margin-inline:var(--gutter);overflow:hidden}
.ab .stats{margin-inline:var(--gutter)}
/* this page centres its stat cells; the canonical bar is left-aligned */
.ab .stat{text-align:center}

/* areas of expertise: centred block, left-reading rows */
.ab .areas{max-width:var(--w-measure);margin:var(--space-md) 0 0;text-align:left}
.ab .area .an{font-family:var(--font-display);font-weight:800;font-size:var(--size-h4);color:var(--color-text);margin:0 0 var(--space-2xs)}

/* SOCIAL LIST — bordered tint links, centred under the bio */
.ab .social{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap;margin-top:var(--space-md)}
.ab .social a{
  font-size:var(--size-small); font-weight:600; color:var(--color-accent-deep);
  text-decoration:none; background:var(--color-surface-alt);
  border:var(--border-hair) solid var(--color-border); border-radius:var(--radius);
  padding:var(--space-sm) var(--space-md);
}
/* bright teal carries the ink label on hover, never white */
.ab .social a:hover{background:var(--color-accent);color:var(--color-btn-primary-text);border-color:var(--color-accent)}


/* --- galveston guide -----------------------------------------------------
   body.page-galveston                                                       */

/* figures on this page are inset by the page gutter rather than full-bleed */
.page-galveston .fig{margin:var(--space-lg) var(--gutter)}
/* the verdict is railed rather than boxed */
.page-galveston .sec.verdict{border-left:var(--border-rail) solid var(--color-accent-deep)}
/* byline and the credentials line that follows it */
.page-galveston .byline{font-size:var(--size-caption);color:var(--color-text-muted);margin:var(--space-md) 0 var(--space-xs)}

/* QUICK FACTS — a two-column definition table inside a hairline box */
.page-galveston .qf{max-width:var(--w-measure);margin:var(--space-lg) 0 0;border:var(--border-hair) solid var(--color-border)}
.page-galveston .qf .r{
  display:grid; grid-template-columns:160px 1fr; gap:var(--space-md);
  padding:var(--space-sm) var(--space-md); font-size:var(--size-small); text-align:left;
}
.page-galveston .qf .r:first-child{border-top:0}
.page-galveston .qf .r .k{font-family:var(--font-display);font-weight:800;font-size:var(--size-eyebrow);text-transform:uppercase;letter-spacing:.05em;color:var(--color-accent-deep)}
.page-galveston .qf .r .v{color:var(--color-text);line-height:1.5}
@media(max-width:760px){ .page-galveston .qf .r{grid-template-columns:1fr;gap:var(--space-2xs)} }

/* WHAT PEOPLE GET WRONG — the .wpg block itself is canonical; these are the
   wrapper and the opening line, which are not */
.page-galveston .wpgwrap{padding:var(--space-md) var(--gutter);max-width:var(--w-wide);margin-inline:0}
.page-galveston .wpg-open{
  font-family:var(--font-display); font-weight:700; font-size:var(--size-h3);
  line-height:1.4; color:var(--color-text);
  margin:0 0 var(--space-sm); max-width:var(--w-measure);
}

/* RELATED READING */
.page-galveston .rel{max-width:var(--w-measure);margin:var(--space-lg) 0 0;padding-inline:var(--gutter)}
/* the card is canonical; only the label/arrow arrangement is not */
.page-galveston .relcard{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.page-galveston .relcard .ar{color:var(--color-accent-deep);font-weight:800;flex:0 0 auto}

/* ==========================================================================
   GROUP B — MIGRATED PAGE CSS
   travel-obsessed-library-test
   --------------------------------------------------------------------------
   Six legacy per-page <style> blocks, reduced to the rules screen.css does
   NOT already provide, rewritten onto the token layer and scoped to the page
   body class so nothing can leak site-wide.

   Everything here assumes screen.css (sections 1-21) loads first. Nothing in
   this file re-declares a component the legacy bridge already owns: no
   :root, no @font-face, no buttons, eyebrows, leads, rules, bands, stats,
   cards, rows, FAQ type, figures, tables or grids.

   See groupB-notes.md for what was dropped and why.
   ========================================================================== */


/* --- concierge ---------------------------------------------------------- */
/* body.page-concierge, wrapper .rc-page */

/* byline + updated stamp: genuinely secondary metadata, so muted is correct */
.page-concierge .byline{
  text-align:left; font-size:var(--size-small); line-height:1.55;
  color:var(--color-text-muted); margin:var(--space-md) 0 var(--space-xs);
}
.page-concierge .stamp{
  display:inline-block; font-size:var(--size-caption); font-weight:600;
  color:var(--color-text-muted); margin:var(--space-2xs) 0 var(--space-xs);
}

/* figure is the positioning context for the overlay caption below */
.page-concierge .fig{position:relative; overflow:hidden; margin:var(--space-xs) var(--space-lg) var(--space-lg)}
/* .cap here is an IN-IMAGE overlay, not the bridge's below-image caption, so
   it keeps its own positioning and sits on an ink scrim rather than muted ink */
.page-concierge .fig .cap{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:var(--space-md) var(--space-lg) var(--space-sm);
  color:var(--color-on-deep); font-size:var(--size-caption); font-style:italic;
  background:linear-gradient(transparent,rgba(var(--color-scrim),.72));
  text-align:left;
}

/* jump nav: the box itself is a bridge card; only its measure is page work */
.page-concierge .jump{max-width:var(--w-measure); margin-inline:auto}
.page-concierge .jlabel{text-align:left}
.page-concierge .jgrid a{
  display:block; padding:var(--space-xs) 0;
  border-top:var(--border-hair) solid var(--color-border);
  font-size:var(--size-small); font-weight:600;
  color:var(--color-text); text-decoration:none;
}
.page-concierge .jgrid a:hover{color:var(--color-accent-deep)}

/* "what you get" checklist — two-column hairline list, not a bridge grid */
.page-concierge .getlist{
  display:grid; grid-template-columns:1fr; gap:0 var(--space-lg);
  max-width:640px; margin:var(--space-md) 0 0; text-align:left;
}
.page-concierge .gi{
  display:flex; gap:var(--space-xs); padding:var(--space-xs) 0;
  border-top:var(--border-hair) solid var(--color-border);
  font-size:var(--size-small); line-height:1.5; color:var(--color-text);
}
.page-concierge .gi .k{flex:none; font-weight:800; color:var(--color-accent)}

/* ambient video band: the iframe is oversized and centred so a 16:9 embed
   covers a fixed-height band. Ink underneath is the sanctioned backdrop
   colour for media, and the iframe is not interactive. */
.page-concierge .vband{
  position:relative; height:400px; overflow:hidden;
  margin:var(--space-xs) var(--space-lg) var(--space-lg);
  background:var(--color-text);
}
.page-concierge .vband iframe{
  position:absolute; top:50%; left:50%;
  width:177.78vh; height:56.25vw; min-width:100%; min-height:100%;
  transform:translate(-50%,-50%); border:0; pointer-events:none;
}

/* room cards keep their accent rail; the rest of the card is the bridge's */
.page-concierge .room{border-top:var(--border-rail) solid var(--color-accent)}
.page-concierge .room .t{
  font-size:var(--size-eyebrow); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--color-accent-deep);
}
.page-concierge .room .n{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h4);
  line-height:1.15; margin:var(--space-2xs) 0;
}
.page-concierge .room .s{
  font-size:var(--size-caption); text-transform:uppercase; letter-spacing:.05em;
  color:var(--color-text-muted); margin-bottom:var(--space-xs);
}

/* 130-day comparison: the winning column is tinted */
.page-concierge .cmpcol.win{background:var(--color-surface-alt); border-color:var(--color-accent)}
.page-concierge .cmprow:first-of-type{border-top:0}
.page-concierge .cmprow b{font-family:var(--font-display); font-weight:800; color:var(--color-accent-deep)}
.page-concierge .cmprow span{display:block; font-size:var(--size-caption); color:var(--color-text-muted)}

/* fit columns: marker + copy on one line, marker colour carries yes/no */
.page-concierge .fitcol .i{
  display:flex; gap:var(--space-xs); padding:var(--space-2xs) 0;
  line-height:1.5;
}
.page-concierge .fitcol .i .m{flex:none; font-weight:800}
.page-concierge .fitcol.yes .i .m{color:var(--color-accent)}
.page-concierge .fitcol.no .i .m{color:var(--color-critical)}

/* "what moves the number" definition list */
.page-concierge .vars{max-width:var(--w-measure); margin:var(--space-md) 0 0; text-align:left}
.page-concierge .var{
  display:grid; grid-template-columns:1fr; gap:var(--space-sm);
  padding:var(--space-sm) 0; border-top:var(--border-hair) solid var(--color-border);
  align-items:baseline;
}
.page-concierge .var:first-child{border-top:0}
.page-concierge .var .k{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-caption);
  letter-spacing:.06em; color:var(--color-accent-deep);
}

/* cancellation penalty ladder */
.page-concierge .pen{max-width:460px; margin:var(--space-xs) 0 0; text-align:left}
.page-concierge .penrow:first-child{border-top:0}
.page-concierge .penrow b{
  font-family:var(--font-display); font-weight:800; color:var(--color-accent-deep);
  display:inline-block; min-width:66px;
}
.page-concierge .pennote{
  max-width:520px; margin:var(--space-md) 0 0; text-align:left;
  font-size:var(--size-small); line-height:1.55; color:var(--color-text-muted);
}

/* transfer callout: bridge supplies the mint + rail, this is only the layout */
.page-concierge .transfer{
  max-width:820px; margin-inline:0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-md);
}
.page-concierge .transfer .tt{
  font-family:var(--font-display); font-weight:800; font-size:var(--size-h3);
  margin-bottom:var(--space-2xs);
}
.page-concierge .transfer .td{font-size:var(--size-small); line-height:1.5; color:var(--color-text); max-width:560px}

/* FAQ: the bridge sizes .qa type but gives .qa no divider, so the hairline
   between questions is still page work. Answers stay ink at body size. */
.page-concierge .faqwrap{margin-inline:0}
.page-concierge .qa{border-top:var(--border-hair) solid var(--color-border); padding:var(--space-md) 0}
.page-concierge .qa:first-of-type{border-top:0}

@media(min-width:761px){
  .page-concierge .getlist{grid-template-columns:1fr 1fr}
  .page-concierge .var{grid-template-columns:120px 1fr}
}
@media(max-width:760px){
  .page-concierge .fig,.page-concierge .vband{margin-left:var(--space-md); margin-right:var(--space-md)}
  .page-concierge .vband{height:230px}
  .page-concierge .var .k{margin-bottom:calc(var(--space-2xs) * -1)}
}


/* --- dcl schedule ------------------------------------------------------- */
/* body.page-dcl, wrapper .rc-page */

.page-dcl .stamp{
  display:inline-block; font-size:var(--size-caption); font-weight:600;
  letter-spacing:.03em; color:var(--color-text-muted); margin:var(--space-2xs) 0 var(--space-md);
}

/* Google Calendar embed — the iframe has no intrinsic height */
.page-dcl .embed{margin:var(--space-xs) var(--space-lg) 0; border:var(--border-hair) solid var(--color-border); overflow:hidden}
.page-dcl .embed iframe{width:100%; height:640px; border:0; display:block}

.page-dcl .fig{margin:var(--space-xs) var(--space-lg) var(--space-xl)}

/* related-reading rows: the bridge supplies the hairline + padding */
.page-dcl .dlinks{max-width:720px; margin:var(--space-xs) 0 0; text-align:left}
.page-dcl .dlink{font-size:var(--size-small)}
.page-dcl .dlink:first-child{border-top:0}

/* per-ship sailing tables. Everything about .sched's type, zebra and hairlines
   comes from the bridge; these are the calendar-specific bits only. */
.page-dcl .schedwrap{text-align:left}
.page-dcl .sched td{vertical-align:top}          /* itinerary cells wrap to 3+ lines */
.page-dcl .shipset > summary{padding:var(--space-sm) var(--space-md); background:var(--color-surface-alt)}
.page-dcl .shipset > summary::-webkit-details-marker{display:none}
.page-dcl .shipset > summary .ct{                 /* sailing count — metadata */
  font-family:var(--font-body); font-weight:500; font-size:var(--size-caption);
  color:var(--color-text-muted); margin-left:var(--space-xs);
}
.page-dcl .shipset[open] > summary{border-bottom:var(--border-hair) solid var(--color-border)}
.page-dcl .shipset .sched{margin:0}
/* keep table cells aligned with the summary text above them */
.page-dcl .shipset .sched th:first-child,
.page-dcl .shipset .sched td:first-child{padding-left:var(--space-md)}

@media(max-width:760px){
  .page-dcl .embed,.page-dcl .fig{margin-left:var(--space-md); margin-right:var(--space-md)}
  .page-dcl .embed iframe{height:520px}
}


/* --- virgin voyages ----------------------------------------------------- */
/* body.page-vv, wrapper .vv */

.page-vv .vv{max-width:var(--w-page); margin-inline:auto}
.page-vv .vv-hero{padding:var(--space-xl) var(--space-xl) var(--space-md); text-align:left}
/* .vv-heroimg is the <img> itself, so it needs its own crop; the clamp
   replaces the old fixed 360px/240px pair */
.page-vv .vv-heroimg{
  width:100%; height:clamp(240px,42vw,360px); object-fit:cover; display:block;
  background:var(--color-surface-alt);
}
.page-vv .vv-fine{font-size:var(--size-caption); font-style:italic; color:var(--color-text-muted)}

/* v2.0.0 — this was a flat 32px inset at every width. On a 375px phone that
   spends 64px of the line on padding and left the FAQ heading 13px short of
   holding its last three words together. Mobile takes the standard gutter. */
.page-vv .vv-sec{padding:var(--gutter)}
@media(min-width:761px){ .page-vv .vv-sec{padding:var(--space-xl)} }
.page-vv .vv-sec.line{border-top:var(--border-hair) solid var(--color-text)}

/* what's included / what's not — two hairline lists side by side */
.page-vv .vv-inc{display:grid; grid-template-columns:1fr; gap:0 var(--space-xl)}
.page-vv .vv-inc h3{
  font-size:var(--size-eyebrow); font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; color:var(--color-accent-deep);
  border-top:var(--border-hair) solid var(--color-border);
  padding-top:var(--space-xs); margin:0 0 var(--space-xs);
}
.page-vv .vv-inc ul{margin:0; padding:0; list-style:none}
.page-vv .vv-inc li{
  font-size:var(--size-small); line-height:1.6; color:var(--color-text);
  padding:var(--space-xs) 0; border-bottom:var(--border-hair) solid var(--color-border);
}

.page-vv .vv-gal{display:grid; grid-template-columns:1fr; gap:var(--space-md)}
.page-vv .vv-gal img{
  width:100%; height:300px; object-fit:cover; display:block;
  background:var(--color-surface-alt);
}

/* numbered "how it works" rows — bridge draws the row, this is the numeral */
/* v1.7.6 laid this out as a two-column grid with a 20px gap. The rebuild left
   .vv-row as a plain block, so the numeral and the sentence ran together and
   the step read "01Tap". Same failure as the wordmark: a layout change that
   silently removed the separation between two elements. */
.page-vv .vv-row{display:grid; grid-template-columns:auto 1fr; gap:var(--space-lg); align-items:baseline}
.page-vv .vv-row .vv-n{font-family:var(--font-display); font-weight:800; font-size:var(--size-numeral); color:var(--color-accent)}
.page-vv .vv-row b{font-size:var(--size-h4)}

@media(min-width:761px){
  .page-vv .vv-inc,.page-vv .vv-gal{grid-template-columns:1fr 1fr}
}


/* --- royal caribbean ---------------------------------------------------- */
/* body.page-rc, wrapper .rc-page */

.page-rc .fig{position:relative; overflow:hidden; margin:var(--space-xs) var(--space-lg) var(--space-xl)}
/* in-image overlay caption, same technique as concierge */
.page-rc .fig .cap{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:var(--space-md) var(--space-md) var(--space-sm);
  color:var(--color-on-deep); font-size:var(--size-caption); font-weight:500;
  background:linear-gradient(transparent,rgba(var(--color-scrim),.72));
}

.page-rc .band{margin:var(--space-xl) var(--space-lg); padding:var(--space-lg); text-align:left}

/* "where you are now" timeline: .tline is the rail the dots sit on, so the
   grid has to out-stack it. Four stops on desktop, two on a phone. */
.page-rc .time{position:relative}
.page-rc .tline{
  position:absolute; top:9px; left:12%; right:12%; height:2px;
  background:var(--color-border); z-index:1;
}
.page-rc .time .tgrid{
  grid-template-columns:1fr 1fr; gap:var(--space-xl) var(--space-xs);
  position:relative; z-index:2;
}
/* 4-across only once the columns are wide enough for the headings. At 768px
   four columns gave 157px each, which forced two-word tails on the longer
   stop names — a layout problem, not a wrapping one. */
@media(min-width:1000px){
  .page-rc .time .tgrid{grid-template-columns:repeat(4,1fr); gap:var(--space-xs)}
}
@media(max-width:760px){
  .page-rc .tline{display:none}
  .page-rc .fig,.page-rc .band,.page-rc .rc-transfer{margin-left:var(--space-md); margin-right:var(--space-md)}
}
@media(max-width:440px){
  .page-rc .time .tgrid{grid-template-columns:1fr}
}

/* numbered value rows — bridge draws the row, this is the numeral.
   v1.7.6 laid these out as a two-column grid; without that the numeral runs
   straight into the copy beside it, so the grid comes back here. */
.page-rc .nrow{display:grid; grid-template-columns:auto 1fr; gap:var(--space-md); align-items:center}
.page-rc .nrow .n{font-family:var(--font-display); font-weight:800; font-size:var(--size-numeral); color:var(--color-accent)}
.page-rc .nrow p{margin:0}
/* section labels sit centred above their heading */
.page-rc .subh{text-align:left; margin-top:var(--space-xl)}

/* the h1's parenthetical closing line — genuinely secondary, so muted */
.page-rc .rc-aside{font-size:.5em; font-weight:500; letter-spacing:0; color:var(--color-text-muted)}

/* onboard-credit badge under the headline: tint chip, teal edge, ink label.
   Bright teal is the border here, never the field behind the words. */
.page-rc .rc-badge{
  display:inline-block; background:var(--color-surface-alt);
  border:var(--border-hair) solid var(--color-accent); border-radius:var(--radius);
  color:var(--color-text); font-size:var(--size-eyebrow); font-weight:700;
  line-height:1.4; text-align:center;
  padding:var(--space-xs) var(--space-md); margin:var(--space-md) auto var(--space-2xs);
}

/* byline + credit line: secondary metadata, as on concierge and galveston */
.page-rc .byline{
  text-align:left; font-size:var(--size-caption); line-height:1.55;
  color:var(--color-text-muted); margin:var(--space-lg) 0 var(--space-md);
}

/* a reading measure inside a full-width .sec */
.page-rc .measure{max-width:var(--w-measure); margin-inline:0}

/* section fields and hairlines that used to be inline attributes */
.page-rc .sec.is-tint{background:var(--color-surface-alt)}
.page-rc .sec.is-topline{border-top:var(--border-hair) solid var(--color-text)}

/* the perk band opens on an accent rail and holds its copy to the measure */
.page-rc .band.is-perk{border-top:var(--border-rail) solid var(--color-accent)}
/* The measure hangs from the band's left edge, not from its centre. Centring
   the paragraph BLOCK while its text stayed left-aligned put the copy on a
   third left edge, separate from the heading above it and the button below. */
.page-rc .band p{max-width:var(--w-measure); margin-inline:0}
.page-rc .band .btn{margin-top:var(--space-md)}

/* caution eyebrow — the one justified extra colour, in place of the old orange */
.page-rc .kick.is-caution{color:var(--color-critical)}
/* the run-in lead of the critical callout carries the same colour */
.page-rc .totx-callout--critical b{color:var(--color-critical)}
/* the card already spaces its children, so the eyebrow drops its own margin */
.page-rc .totx-card .kick{margin-bottom:0}

/* first column of a comparison table reads as the row label */
.page-rc .tblwrap td:first-child{font-weight:600}

/* transfer callout: the bridge's .note supplies the tint and the rail —
   this is only the layout that sits the button beside the copy */
.page-rc .rc-transfer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-md); margin:0 var(--space-lg) var(--space-xl);
}
.page-rc .rc-transfer h3{margin:0 0 var(--space-2xs)}
.page-rc .rc-transfer p{margin:0; font-size:var(--size-small); line-height:1.5; max-width:var(--w-measure)}

/* PAYWALL — functional, not decorative. .rc-blur withholds the ship names
   from non-clients (blurred, unselectable, not hit-testable) and .rc-stamp
   is the label that says why. The stamp is the one place white sits on the
   critical colour, which is sanctioned: it is not bright teal. */
.page-rc .rc-veil{position:relative}
.page-rc .rc-blur{
  font-size:var(--size-small); font-weight:600; line-height:1.7;
  color:var(--color-text); margin:0;
  filter:blur(5px); -webkit-user-select:none; user-select:none; pointer-events:none;
}
.page-rc .rc-stamp{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:var(--color-critical); color:var(--color-on-deep);
  border:var(--border-emphasis) solid var(--color-surface);
  font-family:var(--font-display); font-weight:800; font-size:var(--size-small);
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  padding:var(--space-xs) var(--space-lg); box-shadow:var(--shadow-lift);
  pointer-events:none;
}

/* timeline stops: one dot per stage, the current one filled */
.page-rc .tstop{position:relative; text-align:center; padding:0 var(--space-xs)}
.page-rc .tdot{
  width:14px; height:14px; border-radius:50%; position:relative; z-index:2;
  background:var(--color-surface); border:3px solid var(--color-border);
  margin:0 auto var(--space-md);
}
.page-rc .tdot.is-now{background:var(--color-accent); border-color:var(--color-accent)}
.page-rc .tnow{
  font-size:var(--size-eyebrow); font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-accent-deep); margin:0 0 var(--space-2xs);
}
.page-rc .tstop h3{font-size:var(--size-h4); line-height:1.2; margin:0 0 var(--space-xs)}
.page-rc .tstop p{font-size:var(--size-caption); line-height:1.5; color:var(--color-text); margin:0}


/* --- inquiry ------------------------------------------------------------ */
/* body.page-inquiry (no wrapper scope class of its own) */

/* photo hero with the headline card overlapping it on desktop */
.page-inquiry .hero{position:relative; background:var(--color-surface-alt)}
.page-inquiry .hero img{width:100%; height:300px; object-fit:cover; object-position:center 45%}
.page-inquiry .herocard{position:absolute; left:var(--space-xl); bottom:var(--space-xl); max-width:470px; text-align:left}

.page-inquiry .explain{padding:var(--space-xl) var(--space-xl) var(--space-xs); max-width:780px; margin-inline:0}
.page-inquiry .sec .sec-title,
.page-inquiry .explore .sec-title{text-align:left}

/* checkmark points list */
.page-inquiry .points{list-style:none; margin:0; padding:0}
.page-inquiry .points li{
  position:relative; padding:var(--space-sm) 0 var(--space-sm) var(--space-xl);
  border-top:var(--border-hair) solid var(--color-border);
  font-size:var(--size-body); line-height:1.6; color:var(--color-text);
}
.page-inquiry .points .c{position:absolute; left:0; top:var(--space-md); color:var(--color-accent); font-weight:800}

/* the form frame. Anchor offset keeps the "back to the form" jump clear of
   the sticky nav; the accent rail marks it as the primary action on the page. */
.page-inquiry .formwrap{padding:var(--space-lg) var(--space-xl) var(--space-2xs); scroll-margin-top:80px}
.page-inquiry .formcard{
  max-width:840px; margin-inline:auto;
  border-top:var(--border-rail) solid var(--color-accent);
  border-radius:var(--radius); box-shadow:var(--shadow-lift);
}
.page-inquiry .formsub{
  max-width:520px; margin:0 0 var(--space-md); text-align:left;
  font-size:var(--size-small); line-height:1.5; color:var(--color-text-muted);
}
.page-inquiry .formsub b{color:var(--color-accent-deep)}
.page-inquiry .loadnote{
  text-align:center; font-size:var(--size-caption); font-style:italic;
  color:var(--color-text-muted); margin:0 0 var(--space-sm);
}
.page-inquiry .page-content{font-size:var(--size-body); line-height:1.7; color:var(--color-text)}
.page-inquiry .page-content p{margin:0 0 var(--space-md)}
/* JotForm ships its own inline width on the iframe it injects; these are the
   only !important declarations kept in this file, and they are load-bearing. */
.page-inquiry .page-content iframe,
.page-inquiry .page-content .jotform-form,
.page-inquiry .page-content [id^="JotFormIFrame"]{
  width:100% !important; min-width:0 !important; max-width:100% !important;
  border:none; display:block;
}

/* numbered "what happens next" rows */
.page-inquiry .row .n{font-family:var(--font-display); font-weight:800; font-size:var(--size-numeral); color:var(--color-accent); line-height:1}
.page-inquiry .row p{margin:var(--space-2xs) 0 0; font-size:var(--size-small); line-height:1.5; color:var(--color-text)}

/* read-more list */
.page-inquiry .explore{padding:var(--space-xl) var(--space-xl) var(--space-2xl); text-align:left; max-width:var(--w-measure); margin-inline:0}
.page-inquiry .xlinks{margin-top:var(--space-xs)}
.page-inquiry .xlinks a{
  display:block; padding:var(--space-md) var(--space-2xs);
  border-top:var(--border-hair) solid var(--color-border);
  font-family:var(--font-display); font-weight:600; font-size:var(--size-h4);
  color:var(--color-accent-deep); text-decoration:none;
}
.page-inquiry .xlinks a:hover{color:var(--color-text)}

@media(max-width:760px){
  /* the hero photo is dropped on a phone and the card becomes plain copy */
  .page-inquiry .hero img{display:none}
  .page-inquiry .herocard{
    position:static; max-width:none; background:transparent; border:0;
    padding:var(--space-lg) var(--space-lg) var(--space-sm); text-align:left;
  }
  .page-inquiry .explain{padding:var(--space-lg) var(--space-md) var(--space-2xs)}
  .page-inquiry .formwrap{padding:var(--space-md) var(--space-sm) var(--space-2xs)}
  .page-inquiry .explore{padding:var(--space-lg) var(--space-md) var(--space-xl)}
}


/* --- email signup ------------------------------------------------------- */
/* body.page-email-signup */

.page-email-signup .formsec{padding:var(--space-3xl) var(--space-lg) var(--space-xl); text-align:left}

/* inline signup form: two fields and the button share one row until they
   can't. Field outline uses --color-field-border, not --color-border: an
   input needs 3:1 against the page and a hairline does not meet it. */
/* Three controls, one row. Flex-wrap alone let "First name" take the full
   520px and pushed the email field and button onto a second line, so the
   composition ended on a lopsided two-row block. A grid keeps the two fields
   equal and gives the button a column sized to its label.

   Two things were wrong here and both were mine. `auto` inside a row capped at
   560px is not "size to the label" — the two 1fr fields ate 536px and left the
   button 93px, so "Sign Me Up" wrapped onto three lines. `max-content` reserves
   the label's real width first, and the measure gives the row room to do it.

   And `margin-inline:auto` centred the BOX while its contents stayed left, so
   the form began 216px right of the headline above it — the same phantom
   indent as the bullets and the explore block on this page. It hangs at the
   gutter now, like everything else in this column. */
.page-email-signup .formrow{
  display:grid; grid-template-columns:1fr 1fr max-content; gap:var(--space-xs);
  max-width:var(--w-measure); margin-inline:0; align-items:stretch;
}
.page-email-signup .formrow button{ white-space:nowrap }
@media(max-width:560px){
  .page-email-signup .formrow{grid-template-columns:1fr}
}
.page-email-signup .formrow input[type=text],
.page-email-signup .formrow input[type=email]{
  flex:1 1 200px; padding:var(--space-md); font-size:16px;
  font-family:var(--font-body); background:var(--color-surface);
  color:var(--color-text);
  border:var(--border-hair) solid var(--color-field-border); border-radius:var(--radius);
}
.page-email-signup .formrow input::placeholder{color:var(--color-text-muted); opacity:1}
.page-email-signup .formrow input[type=text]:focus-visible,
.page-email-signup .formrow input[type=email]:focus-visible{
  outline:3px solid var(--color-focus); outline-offset:1px;
  border-color:var(--color-accent-deep);
}
/* status line for the signup script — reserves its height so the form
   doesn't jump when a message appears */
.page-email-signup .subline{font-size:var(--size-caption); color:var(--color-text-muted); margin-top:var(--space-sm); min-height:16px}

/* A measure-limited block inside a left-aligned section hangs from the content
   gutter. `margin-inline:auto` centred the BOX while its text stayed left,
   which put this list on its own phantom left edge 256px in from the heading
   above it. Same defect as the Royal Caribbean credit band in Pass 4. */
.page-email-signup .bullets{list-style:none; margin:var(--space-lg) 0 0; padding:0; max-width:480px; text-align:left}
.page-email-signup .bullets li{
  position:relative; padding:var(--space-xs) 0 var(--space-xs) var(--space-lg);
  border-top:var(--border-hair) solid var(--color-border);
  font-size:var(--size-small); color:var(--color-text);
}
.page-email-signup .bullets li::before{content:"\2713"; position:absolute; left:0; color:var(--color-accent); font-weight:800}

/* clamp replaces the old 200px/160px pair so the banner has one definition */
.page-email-signup .skinnybanner{
  width:100%; height:clamp(160px,26vw,200px); object-fit:cover;
  object-position:center 15%; margin-top:var(--space-xl);
}

/* about callout — a plain surface band between two hairlines */
.page-email-signup .secondary{
  background:var(--color-surface);
  border-top:var(--border-hair) solid var(--color-border);
  border-bottom:var(--border-hair) solid var(--color-border);
  padding:var(--space-xl) var(--space-lg); text-align:left;
}
.page-email-signup .secondary .inner{max-width:540px; margin-inline:0}
/* geometry now comes from the canonical .btn-outline in section 21; this page
   only needs the width cap so a long label wraps rather than stretching */
.page-email-signup .btn-outline{max-width:320px}

.page-email-signup .explore{padding:var(--space-xl) var(--space-lg) var(--space-2xl); text-align:left; max-width:var(--w-measure); margin-inline:0}
.page-email-signup .xlinks{margin-top:var(--space-xs)}
.page-email-signup .xlinks a{
  display:block; padding:var(--space-md) var(--space-2xs);
  border-top:var(--border-hair) solid var(--color-border);
  font-family:var(--font-display); font-weight:600; font-size:var(--size-h4);
  color:var(--color-accent-deep); text-decoration:none; text-wrap:balance;
}
.page-email-signup .xlinks a:hover{color:var(--color-text)}

@media(max-width:760px){
  .page-email-signup .formsec{padding:var(--space-2xl) var(--space-md) var(--space-lg)}
  .page-email-signup .secondary{padding:var(--space-xl) var(--space-md)}
  .page-email-signup .explore{padding:var(--space-lg) var(--space-md) var(--space-xl)}
  .page-email-signup .formrow{flex-direction:column; align-items:stretch}
  .page-email-signup .formrow input[type=text],
  .page-email-signup .formrow input[type=email]{flex:none}
  .page-email-signup .xlinks a{font-size:var(--size-small); padding:var(--space-sm) var(--space-2xs)}
}

/* ==========================================================================
   GROUP C — MIGRATED PAGE CSS
   travel-obsessed-library-test
   --------------------------------------------------------------------------
   Source templates:
     custom-shop.hbs              -> .page-shop
     custom-payment.hbs           -> .page-payment
     custom-privacy-policy.hbs    -> .page-privacy
     custom-terms-of-service.hbs  -> .page-tos
     page.hbs                     -> .page-ghost
     custom-hair-tool-tracker.hbs -> .page-tracker / #dcht-app
       (partials/tracker-restyle.hbs is MERGED into the tracker block below —
        it is not a separate layer any more and no !important survives)

   Everything here is what screen.css sections 1-21 do NOT already provide.
   No :root, no @font-face, no @import, no Fira Sans, no tan/beige, no
   nav/footer rules (the real nav emits .tn-*, the real footer emits .tof-*).
   Every value is a token. Loads AFTER screen.css.

   See groupC-notes.md for what was deleted and why.
   ========================================================================== */


/* ==========================================================================
   SHOP  ·  .page-shop  ·  custom-shop.hbs
   ========================================================================== */

.page-shop .shop-hero{
  background:var(--color-surface-mute);
  border-bottom:var(--border-hair) solid var(--color-border);
  padding:var(--space-2xl) var(--gutter);
}
.page-shop .shop-hero-inner{max-width:var(--w-wide);margin-inline:auto}
/* filled category chip — ink label, never white, on bright teal */
.page-shop .shop-tag{
  display:inline-block;background:var(--color-accent);color:var(--color-btn-primary-text);
  font-size:var(--size-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);
  margin-bottom:var(--space-md);
}
.page-shop .shop-hero p{max-width:var(--w-measure)}

.page-shop .shop-body{max-width:var(--w-wide);margin-inline:auto;padding:var(--space-2xl) var(--gutter) var(--space-3xl)}
/* section divider label — eyebrow role, so it takes the eyebrow colour */
.page-shop .shop-section-label{
  font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-deep);
  margin-bottom:var(--space-md);padding-bottom:var(--space-sm);
  border-bottom:var(--border-hair) solid var(--color-border);
}

/* the storefront card grid — four across, the one genuinely unique layout here */
.page-shop .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);margin-bottom:var(--space-2xl)}
/* .shop-card is in the legacy bridge card list, so only the differences remain.
   padding:0 is required: the bridge pads the card and the image must go edge to edge. */
.page-shop .shop-card{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  background:var(--color-surface-alt);border-color:var(--color-border);
  text-decoration:none;color:inherit;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.page-shop .shop-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-lift)}
.page-shop .shop-card-img-wrap{background:var(--color-surface);aspect-ratio:1/1;overflow:hidden}
.page-shop .shop-card-img{width:100%;height:100%;object-fit:cover;display:block}
.page-shop .shop-card-body{padding:var(--space-sm) var(--space-md);display:flex;flex-direction:column}
.page-shop .shop-card-link{display:inline-block;font-size:var(--size-micro);font-weight:700;color:var(--color-accent-deep)}

/* the "see everything" tile — deep teal is the one fill that carries white */
.page-shop .shop-card-more{background:var(--color-accent-deep);border-color:var(--color-accent-deep)}
.page-shop .shop-card-more:hover{border-color:var(--color-accent-deep);box-shadow:none}
.page-shop .shop-card-more-body{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:var(--space-lg);height:100%;
}
.page-shop .shop-card-more .shop-card-title{color:var(--color-on-deep);font-size:var(--size-body);font-weight:700;margin-bottom:var(--space-xs)}
.page-shop .shop-card-more .shop-card-note{color:var(--color-on-deep);font-size:var(--size-caption);line-height:1.5}
.page-shop .shop-card-more .shop-card-link{color:var(--color-on-deep);margin-top:var(--space-md);font-size:var(--size-caption)}

/* storefront CTA row */
.page-shop .storefront-cta{
  background:var(--color-surface-mute);border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-xl);
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-lg);margin-bottom:var(--space-md);
}
.page-shop .storefront-cta p{margin:0;font-weight:600;line-height:1.45}
.page-shop .storefront-cta p span{display:block;font-weight:400;font-size:var(--size-small);color:var(--color-text-muted);margin-top:var(--space-2xs)}

/* affiliate disclosure — genuinely secondary legal copy, so muted is correct */
.page-shop .shop-disclaimer{font-size:var(--size-caption);color:var(--color-text-muted);line-height:1.65;margin-bottom:var(--space-lg)}

.page-shop .shop-final-cta{border-top:var(--border-hair) solid var(--color-border);padding:var(--space-2xl) 0 var(--space-md)}
.page-shop .shop-final-cta-sub{margin:0 0 var(--space-xl)}
/* The card grid carried its width and an `auto` margin as an inline style
   left over from v1.7.6, which centred it 98px right of the paragraph above.
   The width is a real constraint and belongs here; the centring was not. */
.page-shop .shop-final-cta-cards{
  display:grid; grid-template-columns:1fr; gap:var(--space-md);
  max-width:520px; margin-inline:0;
}
.page-shop .shop-cta-card{
  display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--space-lg);border-radius:var(--radius);text-decoration:none;
}
.page-shop .shop-cta-card-light{background:var(--color-surface-alt);border:var(--border-hair) solid var(--color-border)}
.page-shop .shop-cta-card-label{
  font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-deep);margin-bottom:var(--space-xs);
}
.page-shop .shop-cta-card-title{font-family:var(--font-display);font-size:var(--size-h3);font-weight:700;line-height:1.25;color:var(--color-text);margin-bottom:var(--space-md)}
.page-shop .shop-cta-card-btn{display:inline-block;font-size:var(--size-caption);font-weight:700;color:var(--color-accent-deep)}

@media(max-width:760px){
  .page-shop .shop-grid{grid-template-columns:1fr}
  .page-shop .storefront-cta{flex-direction:column;align-items:flex-start}
}


/* ==========================================================================
   PAYMENT  ·  .page-payment  ·  custom-payment.hbs
   ========================================================================== */

/* smooth jump to the embedded form; scoped to this page only */
html:has(body.page-payment){scroll-behavior:smooth}
.page-payment #totx-form-start{scroll-margin-top:var(--space-lg)}

/* hero centres itself, then goes left on a phone like the rest of the site */
.page-payment .pay-hero{max-width:var(--w-measure);margin-inline:auto;padding:var(--space-2xl) var(--gutter) var(--space-xs);text-align:left}
.page-payment .pagewrap{max-width:var(--w-measure);margin-inline:auto;padding:var(--space-xs) var(--gutter) var(--space-xl)}

/* two ways to pay */
.page-payment .paychoice{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);margin:var(--space-md) 0 var(--space-xs)}
/* .pcard is a bridge card; only the column layout that pins the button is left */
.page-payment .pcard{display:flex;flex-direction:column;padding:var(--space-md)}
.page-payment .pcard .pchecks{flex:1 0 auto}
.page-payment .pcard .head{
  display:flex;align-items:center;gap:var(--space-sm);
  padding-bottom:var(--space-sm);margin-bottom:var(--space-sm);
  border-bottom:var(--border-hair) solid var(--color-border);min-height:64px;
}
/* step numeral — bright teal fill, ink numeral, square like everything else */
.page-payment .pcard .num{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--color-accent);color:var(--color-btn-primary-text);
  font-family:var(--font-display);font-weight:800;font-size:var(--size-body);
  display:flex;align-items:center;justify-content:center;
}
.page-payment .pcard p{font-size:var(--size-small);line-height:1.6;color:var(--color-text);margin:0 0 var(--space-xs)}
.page-payment .pchecks div{font-size:var(--size-small);line-height:1.55;color:var(--color-text);margin:0 0 var(--space-xs);display:flex;gap:var(--space-xs)}
.page-payment .pchecks .c{color:var(--color-accent-deep);font-weight:700;flex:none}
/* .pbtn is a bridge button; it only needs to sit at the card foot, full width */
.page-payment .pcard .pbtn{margin-top:auto;align-self:stretch}

/* the big authorization callout — .schedbox is a bridge tint panel already */
.page-payment .schedbox-head{
  font-family:var(--font-display);font-weight:800;font-size:var(--size-h3);
  letter-spacing:.01em;color:var(--color-accent-deep);margin-bottom:var(--space-xs);
}
.page-payment .schedbox ol{margin:var(--space-sm) 0 var(--space-sm) var(--space-md);padding:0;font-size:var(--size-small);line-height:1.65;color:var(--color-text)}
.page-payment .schedbox ol li{margin-bottom:var(--space-xs)}
.page-payment .schedbox-foot{margin:var(--space-sm) 0 var(--space-2xs)}

/* when to submit — .timebox is a bridge card, plus a deep-teal rail */
.page-payment .timebox{border-left:var(--border-rail) solid var(--color-accent-deep);margin-top:var(--space-sm)}
.page-payment .timebox-head{font-family:var(--font-display);font-weight:800;font-size:var(--size-h3);color:var(--color-text);margin-bottom:var(--space-xs)}
.page-payment .timebox ul{list-style:none;margin:0;padding:0}
.page-payment .timebox ul li{position:relative;padding:var(--space-xs) 0 var(--space-xs) var(--space-lg);font-size:var(--size-small);line-height:1.6;color:var(--color-text)}
.page-payment .timebox ul li::before{content:'\2713';position:absolute;left:0;top:var(--space-xs);color:var(--color-accent-deep);font-weight:700}

/* non-blocking weekend/holiday flag, injected by the page script */
.page-payment .totx-datewarn{
  display:none;color:var(--color-critical);background:var(--color-surface-mute);
  border-left:var(--border-rail) solid var(--color-critical);
  font-size:var(--size-caption);font-weight:600;
  padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);max-width:var(--w-narrow);
}

/* .embedwrap is a bridge card; only its label is page-specific */
.page-payment .embedlabel{
  font-size:var(--size-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-accent-deep);margin:0 0 var(--space-md);
  display:flex;align-items:center;gap:var(--space-xs);
}

@media(max-width:760px){
  .page-payment .pay-hero{padding:var(--space-lg) var(--gutter) var(--space-2xs);text-align:left}
  .page-payment .paychoice{grid-template-columns:1fr}
  /* card copy goes back to full body size on a phone */
  .page-payment .pcard p,
  .page-payment .pchecks div,
  .page-payment .schedbox ol,
  .page-payment .timebox ul li{font-size:var(--size-body);line-height:1.6}
}


/* ==========================================================================
   LEGAL  ·  .page-privacy + .page-tos
   custom-privacy-policy.hbs, custom-terms-of-service.hbs
   (the two source sheets were byte-identical)
   ========================================================================== */

.page-privacy .legal-header,
.page-tos .legal-header{
  background:var(--color-surface-mute);
  border-bottom:var(--border-hair) solid var(--color-border);
  padding:var(--space-2xl) var(--gutter);text-align:left;
}
/* v2.2.6 — the "Legal" chip was removed from both pages at A'Dell's request,
   and its styling with it. The <h1> says what the page is. */
/* effective date — genuinely secondary metadata */
.page-privacy .legal-header p,
.page-tos .legal-header p{font-size:var(--size-small);color:var(--color-text-muted);margin:0}

.page-privacy .legal-wrap,
.page-tos .legal-wrap{max-width:var(--w-measure);margin-inline:auto;padding:var(--space-2xl) var(--gutter) var(--space-3xl)}
/* each clause opens with a hairline separator; the first one does not */
.page-privacy .legal-body h2,
.page-tos .legal-body h2{
  margin:var(--space-2xl) 0 var(--space-sm);padding-top:var(--space-2xl);
  border-top:var(--border-hair) solid var(--color-border);
}
.page-privacy .legal-body h2:first-of-type,
.page-tos .legal-body h2:first-of-type{margin-top:0;padding-top:0;border-top:0}


/* ==========================================================================
   GHOST PAGE  ·  .page-ghost  ·  page.hbs
   ========================================================================== */

.page-ghost .page-wrap{max-width:var(--w-measure);margin-inline:auto;padding:var(--space-2xl) var(--gutter) var(--space-3xl)}
.page-ghost .page-title{margin-bottom:var(--space-lg)}

/* Ghost/Koenig content wrapper. screen.css section 19 targets .totx-prose, which
   this template does not use, so the list and flow rules are restated here.
   See groupC-notes.md: adding totx-prose to this div retires this block. */
.page-ghost .page-content > *:last-child{margin-bottom:0}
.page-ghost .page-content ul,
.page-ghost .page-content ol{margin:0 0 var(--space-md);padding-left:var(--space-lg)}
.page-ghost .page-content li{margin-bottom:var(--space-xs)}

/* JotForm's embed script writes width/min-width inline on the iframe it injects.
   Inline styles beat any normal declaration, so !important is load-bearing here
   and is the only !important left in this file. */
.page-ghost .page-content iframe,
.page-ghost .page-content [id^="JotFormIFrame"]{
  width:100% !important;
  min-width:unset !important;
  max-width:100% !important;
  border:0;
}


/* ==========================================================================
   HAIR TOOL TRACKER  ·  .page-tracker + #dcht-app
   custom-hair-tool-tracker.hbs  +  partials/tracker-restyle.hbs (merged)
   ========================================================================== */

/* --- article hero (outside the app) ------------------------------------- */
/* photographic backdrop, so ink is the plate colour the image sits on */
.page-tracker .article-hero{height:420px;background:var(--color-text);position:relative;overflow:hidden}
.page-tracker .article-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.65;display:block}
.page-tracker .article-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--color-scrim),.72) 0%,rgba(var(--color-scrim),.2) 60%,transparent 100%);
}
.page-tracker .article-hero-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:var(--space-xl) var(--gutter);max-width:var(--w-wide);margin-inline:auto;
}
/* unfilled over the photo — a teal chip on a dark image never held contrast */
.page-tracker .article-tag{
  display:inline-block;background:transparent;border:0;padding:0;
  color:var(--color-on-deep);font-size:var(--size-micro);font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;margin-bottom:var(--space-sm);
}
.page-tracker .article-hero-content h1{color:var(--color-on-deep);line-height:1.18;margin-bottom:var(--space-sm)}
.page-tracker .article-hero-meta{color:var(--color-on-deep);font-size:var(--size-label)}
.page-tracker .article-hero-meta span{margin-right:var(--space-md)}

@media(max-width:640px){
  .page-tracker .article-hero{height:340px}
  .page-tracker .article-hero-content{padding:var(--space-lg) var(--space-md)}
}

/* --- app shell ----------------------------------------------------------- */
/* These six legacy custom properties stay ONLY because inline styles inside
   custom-hair-tool-tracker.hbs still reference them and that markup is frozen.
   Each is an alias onto a design token — no new colour enters the theme. */
#dcht-app{
  --ink:var(--color-text);
  --muted:var(--color-text-muted);
  --ok:var(--color-accent-deep);
  --low:var(--color-critical);
  --med:var(--color-critical);
  --high:var(--color-critical);
  /* denser than the site's 1.7 — this is application chrome, not running text */
  line-height:1.55;
  /* full-bleed break-out of the page column */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
#dcht-app .wrap{padding:0 var(--gutter)}
#dcht-app main{padding:var(--space-md) 0 var(--space-3xl)}

/* --- intro band ---------------------------------------------------------- */
#dcht-app .intro-band{border-bottom:var(--border-hair) solid var(--color-border);padding:var(--space-xl) 0 var(--space-lg)}
#dcht-app .lede{font-size:var(--size-lead);line-height:1.6;color:var(--color-text);max-width:var(--w-measure);margin:0 0 var(--space-lg)}

#dcht-app .paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-sm);align-items:stretch}
#dcht-app .path{
  display:flex;flex-direction:column;padding:var(--space-md);
  background:var(--color-surface-mute);
  border:var(--border-hair) solid var(--color-border);border-radius:var(--radius);
}
/* the two panels are told apart by edge and tint, not by a slab of fill */
#dcht-app .path-search{background:var(--color-surface);border-color:var(--color-accent-deep)}
#dcht-app .path-alt{background:var(--color-surface-alt);border-color:var(--color-accent)}
#dcht-app .path-head{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}
#dcht-app .path-ic{
  width:34px;height:34px;flex:0 0 auto;border-radius:var(--radius);
  background:var(--color-accent);color:var(--color-btn-primary-text);
  display:flex;align-items:center;justify-content:center;
}
#dcht-app .path-ic svg{width:18px;height:18px}
#dcht-app .path h2{margin:0;font-size:var(--size-h3)}
#dcht-app .path p{flex:1;margin:0 0 var(--space-sm);font-size:var(--size-small);color:var(--color-text)}
/* whichever control ends the panel is pinned to its foot so the pair line up */
#dcht-app .path .search,
#dcht-app .path .btn-lg{margin-top:auto}

#dcht-app .search{
  display:flex;align-items:center;background:var(--color-surface);
  border:var(--border-hair) solid var(--color-field-border);border-radius:var(--radius);
  padding:var(--space-sm);
}
/* 16px literal, exactly as section 15 does: anything smaller zooms on iOS */
#dcht-app .search input{border:0;outline:0;font-size:16px;width:100%;background:transparent;color:var(--color-text);font-family:inherit}
#dcht-app .search input::placeholder{color:var(--color-text-muted);opacity:1}
#dcht-app .search svg{flex:0 0 auto;margin-right:var(--space-xs);color:var(--color-accent-deep)}

#dcht-app .hero-stats{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-md);font-size:var(--size-label);color:var(--color-text-muted)}
#dcht-app .hero-stats b{color:var(--color-accent-deep);font-weight:800;font-size:var(--size-body);margin-right:var(--space-2xs)}

/* --- filter bar ---------------------------------------------------------- */
/* top:0, not 62px — the theme nav is not sticky, so there is nothing to clear */
#dcht-app .filterbar{
  background:var(--color-surface-mute);
  border-bottom:var(--border-hair) solid var(--color-border);
  position:sticky;top:0;z-index:20;
}
#dcht-app .filterbar .wrap{padding:var(--space-sm) var(--gutter)}
#dcht-app .fbar{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap}
#dcht-app .sel{
  font-family:inherit;font-size:var(--size-small);padding:var(--space-xs) var(--space-sm);
  border:var(--border-hair) solid var(--color-field-border);border-radius:var(--radius);
  background:var(--color-surface);color:var(--color-text);cursor:pointer;min-width:140px;
}
#dcht-app .sel:hover{border-color:var(--color-accent-deep)}

/* --- results header ------------------------------------------------------ */
#dcht-app .resbar{display:flex;justify-content:space-between;align-items:baseline;margin:var(--space-2xs) 0;gap:var(--space-xs);flex-wrap:wrap}
#dcht-app .resbar h2{margin:0;font-size:var(--size-h3)}
#dcht-app .resbar .count{color:var(--color-text-muted);font-size:var(--size-caption)}
#dcht-app .sortlbl{font-size:var(--size-label);color:var(--color-text-muted)}
#dcht-app .scorenote{font-size:var(--size-micro);color:var(--color-text-muted);margin:0 0 var(--space-sm)}
#dcht-app .scorenote b{color:var(--color-text);font-weight:600}

/* --- results table ------------------------------------------------------- */
#dcht-app .list{border:var(--border-hair) solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-surface)}
#dcht-app .head{
  display:grid;grid-template-columns:80px minmax(0,1fr) 128px 128px 96px 18px;
  gap:var(--space-sm);padding:var(--space-xs) var(--space-md);
  background:var(--color-surface-mute);border-bottom:var(--border-hair) solid var(--color-border);
  font-size:var(--size-micro);text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-muted);font-weight:700;
}
/* border-top:0 cancels the bridge's .row hairline — rows are separated below */
#dcht-app .row{
  display:grid;grid-template-columns:80px minmax(0,1fr) 128px 128px 96px 18px;
  gap:var(--space-sm);align-items:center;padding:var(--space-sm) var(--space-md);
  border-top:0;border-bottom:var(--border-hair) solid var(--color-border);
  cursor:pointer;transition:background var(--t-fast);
}
#dcht-app .row:last-child{border-bottom:0}
#dcht-app .row:hover{background:var(--color-surface-mute)}

#dcht-app .thumb{border-radius:var(--radius);overflow:hidden;background:var(--color-surface-alt);border:var(--border-hair) solid var(--color-border);flex:0 0 auto}
#dcht-app .thumb-row{width:80px;height:80px}
#dcht-app .thumb-big{width:230px;height:175px}
#dcht-app .thumb img{width:100%;height:100%;object-fit:contain;background:var(--color-surface);display:block}
#dcht-app .thumb-ph{width:100%;height:100%;align-items:center;justify-content:center;color:var(--color-accent-deep)}

#dcht-app .name{min-width:0}
#dcht-app .name .nm{font-weight:600;color:var(--color-text);font-size:var(--size-button);line-height:1.25;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dcht-app .name .type{font-size:var(--size-micro);color:var(--color-text-muted);font-weight:500;display:block;margin-top:var(--space-2xs)}
#dcht-app .name .meta{font-size:var(--size-micro);color:var(--color-text-muted);margin-top:var(--space-2xs);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- meters -------------------------------------------------------------- */
#dcht-app .meter{min-width:0}
#dcht-app .meter-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2xs);gap:var(--space-2xs) var(--space-xs)}
/* v2.0.0 — `white-space:nowrap` here pushed the label past the right edge at
   320px. The label may wrap; the row keeps them apart with a gap instead. */
#dcht-app .meter-lab{font-size:var(--size-micro);color:var(--color-text-muted);font-weight:600;min-width:0}
#dcht-app .meter-val{font-weight:800;font-size:var(--size-caption);color:var(--color-text);white-space:nowrap}
#dcht-app .meter-track{height:7px;border-radius:var(--radius);background:var(--color-border);overflow:hidden}
#dcht-app .meter-fill{height:100%;border-radius:var(--radius)}
/* good news is brand teal; every level of bad news is the one error colour —
   the bar width and the label beside it carry low / medium / high */
#dcht-app .fill-works,
#dcht-app .fill-none{background:var(--color-accent)}
#dcht-app .fill-low,
#dcht-app .fill-med,
#dcht-app .fill-high{background:var(--color-critical)}
#dcht-app .meter-sub{margin-top:var(--space-2xs);font-size:var(--size-micro);color:var(--color-text-muted)}

/* --- rules chip ---------------------------------------------------------- */
/* width/height/background reset the bridge's decorative .rule bar, which would
   otherwise flatten this text chip into a 4px teal line */
#dcht-app .rule{
  display:inline-block;width:auto;height:auto;background:none;
  font-size:var(--size-micro);font-weight:700;letter-spacing:.02em;
  padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);
  margin:var(--space-2xs) 0 0;
}
#dcht-app .rule-ok{background:var(--color-surface-alt);color:var(--color-accent-deep)}
#dcht-app .rule-warn{background:var(--color-surface-mute);color:var(--color-text)}
#dcht-app .rule-no{background:var(--color-surface-mute);color:var(--color-critical)}
#dcht-app .detail .rule{font-size:var(--size-micro);padding:var(--space-2xs) var(--space-sm);margin:0 0 var(--space-xs)}
#dcht-app .rule-note{font-size:var(--size-caption);color:var(--color-text-muted);margin:0 0 var(--space-sm)}

/* --- row actions --------------------------------------------------------- */
#dcht-app .actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs);justify-self:start;min-width:0}
#dcht-app .shop{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  background:var(--color-accent);color:var(--color-btn-primary-text);
  text-decoration:none;padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius);font-size:var(--size-label);font-weight:700;white-space:nowrap;
}
#dcht-app .shop:hover{background:var(--color-accent-deep);color:var(--color-on-deep)}
#dcht-app .shop svg{width:14px;height:14px}
#dcht-app .befirst{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  background:transparent;color:var(--color-accent-deep);
  border:1.5px solid var(--color-accent);border-radius:var(--radius);
  padding:var(--space-2xs) var(--space-xs);font-size:var(--size-micro);font-weight:600;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  margin-top:var(--space-2xs);align-self:flex-start;
}
#dcht-app .befirst:hover{background:var(--color-surface-alt)}
#dcht-app .chev{color:var(--color-text-muted);transition:transform var(--t-fast);justify-self:center}
#dcht-app .row.open .chev{transform:rotate(180deg)}
#dcht-app .reviews-cta{
  display:inline-flex;align-items:center;gap:var(--space-2xs);margin-top:var(--space-2xs);
  background:var(--color-surface-alt);color:var(--color-accent-deep);
  border:var(--border-hair) solid var(--color-accent);border-radius:var(--radius);
  padding:var(--space-2xs) var(--space-sm);font-size:var(--size-micro);font-weight:800;
  line-height:1.35;cursor:pointer;white-space:nowrap;align-self:flex-start;
}
#dcht-app .reviews-cta:hover{background:var(--color-accent);color:var(--color-btn-primary-text)}
#dcht-app .reviews-cta .revchev{transition:transform var(--t-fast)}
#dcht-app .row.open .reviews-cta .revchev{transform:rotate(180deg)}

/* --- expanded detail ----------------------------------------------------- */
#dcht-app .detail{display:none;padding:0 var(--space-md) var(--space-md);border-bottom:var(--border-hair) solid var(--color-border);background:var(--color-surface-mute)}
#dcht-app .detail.open{display:block}
#dcht-app .detail-inner{display:flex;gap:var(--space-md);padding-top:var(--space-xs);flex-wrap:wrap}
#dcht-app .detail .info{flex:1;min-width:260px}
#dcht-app .scoreline{display:flex;gap:var(--space-lg);flex-wrap:wrap;margin:0 0 var(--space-sm)}
#dcht-app .scorebox .big{font-size:var(--size-h2);font-weight:800;line-height:1}
/* margin shorthand also clears the bridge's .cap top margin */
#dcht-app .scorebox .cap{font-size:var(--size-micro);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin:0 0 var(--space-2xs)}

#dcht-app .report{border:var(--border-hair) solid var(--color-border);background:var(--color-surface);border-radius:var(--radius);padding:var(--space-xs) var(--space-sm);margin-bottom:var(--space-xs)}
#dcht-app .rhead{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--size-micro);color:var(--color-text-muted);margin-bottom:var(--space-2xs);flex-wrap:wrap}
#dcht-app .rhead .rby{font-weight:700;color:var(--color-text)}
#dcht-app .rhead .dt{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  background:var(--color-surface-mute);border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-2xs) var(--space-xs);
  white-space:nowrap;color:var(--color-text);
}
#dcht-app .rhead .dt-l{color:var(--color-text-muted);font-weight:700;text-transform:uppercase;font-size:var(--size-micro);letter-spacing:.05em}
#dcht-app .rnote{font-size:var(--size-small);color:var(--color-text);margin:0}
#dcht-app .rphoto{margin-top:var(--space-xs);max-width:150px;border-radius:var(--radius);border:var(--border-hair) solid var(--color-border);cursor:zoom-in}
#dcht-app .cam{color:var(--color-accent-deep);font-weight:600;white-space:nowrap}
#dcht-app .photo-tag{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  background:var(--color-surface-alt);color:var(--color-accent-deep);
  font-size:var(--size-micro);font-weight:700;padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);
}

/* --- status badges ------------------------------------------------------- */
#dcht-app .badge{
  font-size:var(--size-micro);font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  padding:var(--space-2xs) var(--space-xs);border-radius:var(--radius);white-space:nowrap;
}
#dcht-app .badge.ok{background:var(--color-surface-alt);color:var(--color-accent-deep)}
#dcht-app .badge.no{background:var(--color-surface-mute);color:var(--color-text)}
#dcht-app .badge.conf{background:var(--color-surface-mute);color:var(--color-critical)}

/* --- photo zoom ---------------------------------------------------------- */
/* an overlay may keep a translucent ink scrim */
#dcht-app .zoom-bg{
  position:fixed;inset:0;background:rgba(var(--color-scrim),.85);
  display:none;align-items:center;justify-content:center;
  z-index:calc(var(--z-modal) + 1);cursor:zoom-out;padding:var(--space-md);
}
#dcht-app .zoom-bg.open{display:flex}
#dcht-app .zoom-bg img{max-width:92%;max-height:92%;border-radius:var(--radius);box-shadow:0 10px 40px rgba(var(--color-scrim),.5)}

/* --- empty state, disclaimer -------------------------------------------- */
#dcht-app .empty{text-align:center;color:var(--color-text-muted);padding:var(--space-2xl) var(--space-md);font-size:var(--size-h4)}
#dcht-app .link-btn{background:none;border:0;color:var(--color-link);font-weight:600;cursor:pointer;font-family:inherit;font-size:inherit;text-decoration:underline}
#dcht-app .disclaimer{
  font-size:var(--size-label);color:var(--color-text-muted);
  background:var(--color-surface-mute);border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);padding:var(--space-md);margin-top:var(--space-lg);
}

/* --- fix bar, share card ------------------------------------------------- */
#dcht-app .fixbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  flex-wrap:wrap;margin:var(--space-md) 0 0;padding:var(--space-sm) var(--space-md);
  background:var(--color-surface-alt);border:var(--border-hair) solid var(--color-border);
  border-radius:var(--radius);
}
#dcht-app .fixbar-txt{color:var(--color-text);font-size:var(--size-button)}
#dcht-app .fixbar-btn{width:auto;flex:0 0 auto;text-decoration:none}

#dcht-app .sharecta{margin:var(--space-xl) 0 0}
#dcht-app .sharecta-card{
  background:var(--color-surface-alt);border:var(--border-hair) solid var(--color-accent);
  border-radius:var(--radius);padding:var(--space-xl) var(--space-lg);
  text-align:center;max-width:var(--w-narrow);margin-inline:auto;
}
#dcht-app .sharecta-emoji{font-size:var(--size-h2);display:block;margin:0 0 var(--space-xs)}
#dcht-app .sharecta-card h2{margin:0 0 var(--space-xs)}
#dcht-app .sharecta-card p{margin:0 0 var(--space-md);color:var(--color-text);font-size:var(--size-button)}
#dcht-app .sharecta-btn{width:auto;display:inline-flex;align-items:center}
/* the bridge supplies every other button property; .btn-lg only fills its column */
#dcht-app .btn-lg{width:100%}

/* --- FAQ ----------------------------------------------------------------- */
#dcht-app .faq{margin-top:var(--space-xl);max-width:var(--w-wide)}
#dcht-app .faq h2{margin:0 0 var(--space-2xs)}
#dcht-app .faq .faq-sub{color:var(--color-text-muted);font-size:var(--size-small);margin:0 0 var(--space-sm)}
/* :last-of-type, not :last-child — a .faq-sub paragraph closes the section, so
   :last-child never matched and the list ran off without a closing hairline */
#dcht-app .faq-item:last-of-type{border-bottom:var(--border-hair) solid var(--color-border)}
#dcht-app .faq-item h3{margin:0 0 var(--space-2xs);font-size:var(--size-h4)}
#dcht-app .faq-item p{margin:0;font-size:var(--size-small);color:var(--color-text);line-height:1.65}

/* --- submit modal -------------------------------------------------------- */
#dcht-app .modal-bg{
  display:none;position:fixed;inset:0;background:rgba(var(--color-scrim),.55);
  z-index:var(--z-modal);align-items:flex-start;justify-content:center;
  padding:var(--space-xl) var(--space-md);overflow:auto;
}
#dcht-app .modal-bg.open{display:flex}
#dcht-app .modal{
  background:var(--color-surface);border-radius:var(--radius);
  max-width:var(--w-narrow);width:100%;padding:var(--space-lg);
  box-shadow:0 20px 60px rgba(var(--color-scrim),.3);
}
#dcht-app .modal h2{margin:0 0 var(--space-2xs)}
#dcht-app .modal .sub{margin:0 0 var(--space-md);color:var(--color-text-muted);font-size:var(--size-small);font-weight:400}
#dcht-app .x{float:right;cursor:pointer;border:0;background:none;font-size:var(--size-h2);color:var(--color-text-muted);line-height:1}

#dcht-app .field{margin-bottom:var(--space-sm)}
#dcht-app .field label{display:block;font-size:var(--size-label);font-weight:700;margin-bottom:var(--space-2xs)}
/* 16px literal, as section 15 does: anything smaller zooms the form on iOS */
#dcht-app .field input,
#dcht-app .field select,
#dcht-app .field textarea{
  width:100%;border:var(--border-hair) solid var(--color-field-border);
  border-radius:var(--radius);padding:var(--space-sm);font-family:inherit;font-size:16px;
}
#dcht-app .field textarea{min-height:64px;resize:vertical}
#dcht-app .field .hint{font-size:var(--size-micro);color:var(--color-text-muted);margin-top:var(--space-2xs)}

#dcht-app .radio-row{display:flex;gap:var(--space-xs);flex-wrap:wrap}
#dcht-app .radio-row label{
  flex:1;min-width:110px;border:var(--border-hair) solid var(--color-field-border);
  border-radius:var(--radius);padding:var(--space-xs);text-align:center;
  cursor:pointer;font-weight:600;font-size:var(--size-caption);
}
#dcht-app .radio-row input{display:none}
#dcht-app .radio-row label:has(input:checked){border-color:var(--color-accent);background:var(--color-accent);color:var(--color-btn-primary-text)}
/* the radio itself is display:none, so the label has to show the focus ring */
#dcht-app .radio-row label:has(input:focus-visible){outline:3px solid var(--color-focus);outline-offset:2px}
#dcht-app .modal .modal-actions{display:flex;gap:var(--space-xs);justify-content:flex-end;margin-top:var(--space-xs)}

/* --- closing CTA band and app footer ------------------------------------- */
/* .cta collides with the bridge's button component, which would turn this
   whole band into a 52px teal pill. The first four declarations undo that. */
#dcht-app .cta{
  display:block;min-height:0;text-align:left;cursor:auto;
  font-size:inherit;font-weight:inherit;letter-spacing:normal;
  background:var(--color-surface-alt);color:var(--color-text);
  padding:var(--space-xl) 0;border-radius:var(--radius);
}
#dcht-app .cta:hover{background:var(--color-surface-alt);color:var(--color-text)}
#dcht-app .cta:active{transform:none}
#dcht-app .cta .wrap{text-align:center}
#dcht-app .cta h2{margin:0 0 var(--space-xs)}
#dcht-app .cta p{margin:0 auto var(--space-md);color:var(--color-text);font-size:var(--size-h4);max-width:var(--w-narrow)}
#dcht-app .cta-btns{display:flex;gap:var(--space-sm);justify-content:center;flex-wrap:wrap}
#dcht-app .cta-btn{width:auto;text-decoration:none;display:inline-flex;align-items:center}

#dcht-app footer{
  background:var(--color-surface-alt);color:var(--color-text);
  padding:var(--space-lg) 0;font-size:var(--size-caption);text-align:center;
  border-top:var(--border-hair) solid var(--color-border);
}

/* --- app narrow layout ---------------------------------------------------
   640px, not the theme's 760px: this is where the six-column result row runs
   out of width, which is a property of the row, not of the page. */
@media(max-width:640px){
  #dcht-app .paths{grid-template-columns:1fr}
  #dcht-app .head{display:none}
  #dcht-app .row{grid-template-columns:140px 1fr 1fr;row-gap:var(--space-sm);column-gap:var(--space-sm);align-items:start;position:relative}
  #dcht-app .row > *:nth-child(1){grid-column:1;grid-row:1/3;align-self:start}
  #dcht-app .thumb-row{width:140px;height:140px}
  #dcht-app .thumb-big{width:150px;height:120px}
  #dcht-app .row > .name{grid-column:2/4;grid-row:1;min-width:0}
  #dcht-app .name .befirst{white-space:normal;text-align:left}
  #dcht-app .row > *:nth-child(3){grid-column:2/3;grid-row:2;min-width:0}
  #dcht-app .row > *:nth-child(4){grid-column:3/4;grid-row:2;min-width:0}
  #dcht-app .meter-top{flex-direction:column;align-items:flex-start;gap:var(--space-2xs)}
  #dcht-app .meter-val{font-size:var(--size-button)}
  #dcht-app .row > .actions{grid-column:1/4;grid-row:3;justify-self:end;flex-direction:row;justify-content:flex-end;align-items:center;gap:var(--space-xs)}
  #dcht-app .row > .chev{position:absolute;top:var(--space-sm);right:var(--space-sm)}
}