/*
  Trapeze — component stylesheet.

  The color tokens themselves live in theme.json (palette slugs) and are
  exposed by WordPress as --wp--preset--color--*. Here we map them to short
  local aliases and then style the visual patterns that compose the site.

  Color semantics:
    --orange  Action      Primary CTAs only
    --lime    Value       Savings, AI picks, key-word underscore, checklists
    --pink    People      Occasions, testimonials, human moments
    --teal    Product     App UI, the AI in callouts and sequences
    --navy    Trust       Body text, nav, dark anchor sections
*/

/* Sunborn (display face). Also declared in theme.json so the editor picks it
   up — duplicated here so the front-end loads it even if theme.json font
   resolution lags. */
@font-face {
  font-family: "Sunborn";
  src: url("../fonts/sunborn.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root{
  --teal:       var(--wp--preset--color--teal);
  --teal-deep:  var(--wp--preset--color--teal-deep);
  --teal-mist:  var(--wp--preset--color--teal-mist);
  --navy:       var(--wp--preset--color--navy);
  --navy-mid:   var(--wp--preset--color--navy-mid);
  --pink:       var(--wp--preset--color--pink);
  --pink-soft:  var(--wp--preset--color--pink-soft);
  --orange:     var(--wp--preset--color--orange);
  --orange-soft:var(--wp--preset--color--orange-soft);
  --lime:       var(--wp--preset--color--lime);
  --lime-soft:  var(--wp--preset--color--lime-soft);
  --cream:      var(--wp--preset--color--cream);
  --bg:         var(--wp--preset--color--bg);
  --muted:      var(--wp--preset--color--muted);
  --border:     var(--wp--preset--color--border);
}

/* Kill WordPress's default block-gap between top-level page sections
   so adjacent colored sections (pink, navy, etc.) butt right up against
   each other without a stripe of body background showing through. */
.wp-site-blocks > *, main.wp-block-group > *{ margin-block:0 !important; margin-top:0 !important; margin-bottom:0 !important }
.wp-site-blocks{ padding:0 !important }
main.wp-block-group{ padding:0 !important; margin:0 !important }
.tz-section + .tz-section, section + section{ margin-top:0 !important }

/* ----- BASE TYPOGRAPHY ----- */
body{ -webkit-font-smoothing:antialiased; line-height:1.6 }
.is-style-display, .has-display-font-family{ font-family:"Sunborn","DM Sans",sans-serif !important; font-weight:900; letter-spacing:-0.02em; line-height:1.02 }

/* Reset default <p> margins on utility paragraph classes that are used as
   icons/numbers/eyebrows. Lets wp:paragraph render these without spacing surprises. */
p.tz-eyebrow, p.tz-n, p.tz-ico, p.tz-num, p.tz-tic, p.lead{ margin:0 }
p.tz-eyebrow{ display:block } /* keep spacing rhythm under headings */
p.lead{ margin-bottom:32px }
p.tz-num{ margin-bottom:8px }

.tz-eyebrow{ font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal-deep); display:inline-block }
.tz-eyebrow.is-people{ color:var(--pink) }
.tz-eyebrow.is-action{ color:var(--orange) }
.tz-eyebrow.is-value{ color:var(--navy) }
.tz-eyebrow.on-dark{ color:var(--teal) }

/* Lime key-word underscore */
.tz-hl{ position:relative; display:inline-block }
.tz-hl::after{ content:""; position:absolute; left:-2px; right:-2px; bottom:6px; height:18px; background:var(--lime); z-index:-1; border-radius:6px }
.tz-hl.is-tight::after{ height:14px; bottom:4px }

/* ----- BUTTONS -----
   The .tz-btn classes apply two ways:
   (a) On a standalone <a class="tz-btn ..."> — used in raw nav HTML and patterns.
   (b) On a wp:button block: <div class="wp-block-button tz-btn ..."><a class="wp-block-button__link">.
       In that case, visual styling has to live on the INNER __link because
       theme.json's elements.button already styles it (would otherwise create
       "box in a box"). Outer wrapper is just a transparent positioning shell.
*/

/* shared visual */
a.tz-btn,
.wp-block-button.tz-btn .wp-block-button__link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit; font-weight:600; font-size:15px;
  padding:14px 22px; border-radius:14px;
  text-decoration:none; transition:transform .15s ease;
  border:none; cursor:pointer;
}
.wp-block-button.tz-btn .wp-block-button__link{ padding:14px 22px !important; border-radius:14px !important }
a.tz-btn:hover, .wp-block-button.tz-btn:hover .wp-block-button__link{ transform:translateY(-1px) }
.wp-block-button.tz-btn{ margin:0 }

/* Primary (orange action) */
a.tz-btn-primary{ background:var(--orange); color:#fff }
.wp-block-button.tz-btn-primary .wp-block-button__link{ background-color:var(--orange) !important; color:#fff !important; border:none !important }

/* Ghost (outlined) */
a.tz-btn-ghost{ background:transparent; color:var(--navy); border:1.5px solid var(--navy) }
.wp-block-button.tz-btn-ghost .wp-block-button__link{ background-color:transparent !important; color:var(--navy) !important; border:1.5px solid var(--navy) !important }
a.tz-btn-ghost.is-on-dark, .wp-block-button.tz-btn-ghost.is-on-dark .wp-block-button__link{ color:#fff !important; border-color:rgba(255,255,255,.35) !important }

/* Dark / Light variants */
a.tz-btn-dark{ background:var(--navy); color:#fff }
.wp-block-button.tz-btn-dark .wp-block-button__link{ background-color:var(--navy) !important; color:#fff !important; border:none !important }
a.tz-btn-light{ background:#fff; color:var(--navy); border:1.5px solid var(--border) }
.wp-block-button.tz-btn-light .wp-block-button__link{ background-color:#fff !important; color:var(--navy) !important; border:1.5px solid var(--border) !important }

/* Nav CTA — slightly smaller padding so it fits in a 64–72px nav bar */
a.tz-nav-cta{ padding:10px 16px; font-size:14px }

/* ----- HEADER / NAV — left-grouped logo + menu, actions pushed right ----- */
.tz-nav{ position:sticky; top:0; background:#fff; border-bottom:1px solid var(--border); z-index:50 }
.tz-nav .tz-inner{ display:flex; align-items:center; gap:48px; height:88px; max-width:1280px; margin:0 auto; padding:0 32px; justify-content:flex-start }
.tz-logo{ display:inline-flex; align-items:center; text-decoration:none; color:var(--navy); flex:0 0 auto }
.tz-logo img, .tz-logo svg{ height:52px; width:auto; display:block }
/* On the dark footer, render the logo white via a CSS filter so the same SVG works in both contexts. Footer logo a touch smaller. */
.tz-footer .tz-logo img, .tz-footer .tz-logo svg{ height:36px; filter:brightness(0) invert(1) }
.tz-nav ul.tz-menu{ display:flex; gap:32px; list-style:none; margin:0; padding:0; flex:0 0 auto }
.tz-nav li{ list-style:none }
.tz-nav a{ color:var(--navy); text-decoration:none; font-weight:600; font-size:15px; opacity:.9 }
.tz-nav a:hover{ opacity:1; color:var(--teal-deep) }
.tz-nav a.active, .tz-nav .current-menu-item a{ opacity:1; color:var(--teal-deep); font-weight:700 }
.tz-nav-actions{ display:flex; gap:12px; align-items:center; margin-left:auto !important; flex:0 0 auto }
.tz-nav-login{ color:var(--navy); text-decoration:none; font-weight:600; font-size:15px }
.tz-nav-login:hover{ color:var(--teal-deep) }
.tz-mobile-only{ display:none }

/* ----- HERO ----- */
.tz-hero{ padding:96px 0 80px; background:linear-gradient(180deg,var(--teal-mist) 0%,#fff 100%); position:relative; overflow:hidden }
.tz-hero.is-centered{ text-align:center; padding:120px 0 80px }
.tz-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; max-width:1200px; margin:0 auto; padding:0 32px }
.tz-hero h1{ font-size:clamp(48px,6vw,74px); margin:18px 0 22px; font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; line-height:1.02; letter-spacing:-0.02em }
.tz-hero.is-centered h1{ font-size:clamp(56px,7vw,88px) }
.tz-hero .lead{ font-size:19px; color:var(--navy); opacity:.78; max-width:520px; margin:0 0 32px }
.tz-hero.is-centered .lead{ margin:0 auto 32px }
.tz-hero-cta{ display:flex; gap:14px; align-items:center; flex-wrap:wrap }
.tz-hero.is-centered .tz-hero-cta{ justify-content:center }
.tz-hero-meta{ margin-top:36px; display:flex; gap:28px; align-items:center; color:var(--navy); font-size:13px; opacity:.78; flex-wrap:wrap }
.tz-hero-meta strong{ color:var(--navy); opacity:1 }
.tz-hero-meta .star{ color:var(--pink) }

.tz-hero-right{ position:relative }
.tz-hero-visual{ position:relative; aspect-ratio:4/5; border-radius:28px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(30,58,95,.35); background:#ddd }
.tz-hero-visual img{ width:100%; height:100%; object-fit:cover; display:block }
.tz-hero-chips{ position:absolute; inset:0; pointer-events:none }
.tz-hero-chips > .tz-hero-chip{ pointer-events:auto }

/* People-tinted hero used by occasion landing pages */
.tz-hero-people{ background:linear-gradient(180deg,var(--pink-soft) 0%,#fff 100%) }
.tz-page-head{ padding:96px 0 40px }
.tz-page-body{ padding:0 0 96px }
.tz-post-hero-section{ padding:0 0 64px }
.tz-post-hero-section .tz-post-hero-img img,
.tz-post-hero-section .wp-block-post-featured-image img{ border-radius:24px }

/* CTA section uses pulled-in top, pushed-out bottom */
.tz-section.is-cta{ padding:64px 0 96px }

/* How-it-works section heading override */
.tz-how-h{ font-size:46px !important; margin:12px 0 36px !important }
.tz-hero-chip{ position:absolute; background:#fff; border-radius:18px; padding:14px 16px; box-shadow:0 18px 40px -18px rgba(30,58,95,.35); display:flex; align-items:center; gap:12px; font-size:13px }
.tz-hero-chip .tz-dot{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-size:16px; font-weight:700 }
.tz-hero-chip.is-action{ top:24px; left:-26px }
.tz-hero-chip.is-action .tz-dot{ background:var(--orange-soft); color:var(--orange) }
.tz-hero-chip.is-product{ bottom:80px; right:-30px }
.tz-hero-chip.is-product .tz-dot{ background:var(--teal-mist); color:var(--teal-deep) }
.tz-hero-chip.is-value{ bottom:-20px; left:30px }
.tz-hero-chip.is-value .tz-dot{ background:var(--lime-soft); color:var(--navy); border:1px solid var(--lime) }
.tz-hero-chip label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; display:block }
.tz-hero-chip b{ display:block; color:var(--navy); font-weight:600 }

/* ----- STATS RIBBON — same grid math as the why-cards below (20px gap,
   28px internal padding) so the stat numbers align with the card headings
   column-for-column. ----- */
.tz-ribbon{ background:var(--navy); color:#fff; padding:40px 0 }
.tz-ribbon-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important; max-width:1200px; margin:0 auto; padding:0 32px; align-items:start }
.tz-stat{ padding:0 28px !important; border:none !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; text-align:left; gap:8px }
.tz-stat > *{ margin:0 !important }
.tz-stat .tz-n{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:42px; line-height:1; display:block }
.tz-stat p:not(.tz-n){ color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.06em; text-transform:none }
.tz-stat small{ color:rgba(255,255,255,.6); font-size:12px; letter-spacing:.06em }
.tz-stat.is-product .tz-n{ color:var(--teal) }
.tz-stat.is-value   .tz-n{ color:var(--lime) }
.tz-stat.is-people  .tz-n{ color:var(--pink) }
.tz-stat.is-action  .tz-n{ color:var(--orange) }

/* ----- SECTION SHELL ----- */
.tz-section{ padding:96px 0 }
.tz-section.is-bg{ background:var(--bg) }
.tz-section.is-people{ background:var(--pink-soft) }
.tz-section.is-product{ background:var(--teal-mist) }
.tz-section.is-value{ background:var(--lime-soft) }
.tz-section.is-action{ background:var(--orange-soft) }
.tz-section.is-cream{ background:var(--cream) }
.tz-section.is-dark{ background:var(--navy); color:#fff }
.tz-section.is-dark h2,.tz-section.is-dark h3,.tz-section.is-dark h4{ color:#fff }

/* Lock every grid item to its column AND zero out any WordPress block-gap
   margin that gets injected between siblings. The block-gap margin was
   pushing cards 2 and 3 down while card 1 (no preceding sibling) stayed
   at the top — making the row appear misaligned. */
.tz-why-grid > *, .tz-occ-grid > *, .tz-ribbon-grid > *,
.tz-topic-grid > *, .tz-posts-grid > *{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  align-self:stretch !important;
  margin:0 !important;
  margin-block:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-inline:0 !important;
}
.tz-why-grid > *, .tz-occ-grid > *, .tz-topic-grid > *{
  height:100% !important;
}
/* How-it-works grid: only zero margins, don't stretch items — the phone
   should size to its content, not to the height of the 4-step column. */
.tz-how-grid > *{
  margin:0 !important;
  align-self:center !important;
}
.tz-occ .tz-photo{ width:100% !important; height:220px !important; flex-shrink:0 !important }

/* Hide the hero meta bar (★★★★★ 4.9 / 120+ destinations / Real-time pricing)
   — already-saved pages still have this markup; CSS hides it everywhere. */
.tz-hero-meta{ display:none !important }
.tz-wrap{ max-width:1200px; margin:0 auto; padding:0 32px }
.tz-section-head{ text-align:center; max-width:680px; margin:0 auto 56px }
.tz-section-head.is-left{ text-align:left; max-width:none; display:flex; justify-content:space-between; align-items:end; margin-bottom:36px }
.tz-section-head h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(36px,4vw,48px); margin:12px 0 12px; line-height:1.05; letter-spacing:-0.02em }
.tz-section-head p{ color:var(--muted); font-size:17px; margin:0 }

/* ----- WHY GRID (4 cards, icon color = semantic role) ----- */
.tz-why-grid{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important; align-items:stretch !important }
.tz-why-card{ background:#fff !important; border:1px solid var(--border); border-radius:20px; padding:28px; transition:transform .2s ease, box-shadow .2s ease; display:flex !important; flex-direction:column !important; align-items:flex-start; height:100% !important; align-self:stretch !important }
.tz-why-card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(30,58,95,.15) }
.tz-why-card > *{ margin:0 }
.tz-why-card .tz-ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin:0 0 18px !important; font-size:22px; color:#fff; font-weight:700; flex:0 0 auto }
.tz-why-card h3{ font-family:"DM Sans",system-ui,sans-serif; font-size:18px; margin:0 0 8px; font-weight:700; letter-spacing:0; text-transform:none }
.tz-why-card p{ font-size:14.5px; color:var(--navy); opacity:.72; margin:0; line-height:1.55 }
.tz-why-card.is-value   .tz-ico{ background:var(--lime); color:var(--navy); border:1px solid var(--navy) }
.tz-why-card.is-product .tz-ico{ background:var(--teal-deep) }
.tz-why-card.is-action  .tz-ico{ background:var(--orange) }
.tz-why-card.is-people  .tz-ico{ background:var(--pink) }

/* ----- OCCASION CARDS (pink-soft section, white cards w/ pink tag)
   Every dimension locked with !important so all 3 cards start at the
   same Y and have the same height/photo geometry. */
.tz-occ-grid{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important; align-items:stretch !important; align-content:start !important }
.tz-occ{ border-radius:24px; display:flex !important; flex-direction:column !important; background:#fff; border:1px solid rgba(30,58,95,.08); position:relative; height:100% !important; align-self:stretch !important; overflow:visible }
.tz-occ .tz-photo{ position:relative; width:100% !important; height:220px !important; min-height:220px !important; max-height:220px !important; flex:0 0 220px !important; background:var(--bg); border-radius:24px 24px 0 0; overflow:hidden }
.tz-occ .tz-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.tz-occ .tz-tag{ position:absolute; top:16px; left:16px; background:var(--pink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; white-space:nowrap; z-index:3; pointer-events:none }
.tz-occ .tz-copy{ padding:28px; display:flex; flex-direction:column; gap:10px; flex:1 }
.tz-occ h3{ font-family:"DM Sans",system-ui,sans-serif; font-weight:700; font-size:20px; margin:0; line-height:1.25; color:var(--navy); letter-spacing:0; text-transform:none }
.tz-occ p{ font-size:14.5px; color:var(--navy); opacity:.78; margin:0; flex:1 }
.tz-occ a{ color:var(--pink); font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; text-transform:none; letter-spacing:0 }
.tz-occ a::after{ content:"→" }

/* ----- HOW IT WORKS (navy section with sequential teal steps) ----- */
.tz-how-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center }
.tz-how-steps{ display:flex; flex-direction:column; gap:32px; position:relative }
.tz-how-steps::before{ content:""; position:absolute; left:17px; top:36px; bottom:36px; width:2px; background:repeating-linear-gradient(to bottom,var(--teal) 0,var(--teal) 4px,transparent 4px,transparent 10px); opacity:.5; z-index:0 }
.tz-step{ display:grid !important; grid-template-columns:36px 1fr !important; gap:18px !important; align-items:start !important; position:relative }
.tz-step .tz-n{ width:36px !important; height:36px !important; border-radius:50% !important; background:var(--teal); color:var(--navy); font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:15px; display:grid !important; place-items:center !important; position:relative; z-index:1; box-shadow:0 0 0 6px var(--navy); margin:0 !important; line-height:1 !important }
/* The h4 line-height matches the circle height so the number and the
   heading text sit on the same horizontal line — "1 Get inspired" reads
   as one row. Zero margin on the inner wrapper so nothing pushes the
   heading off the circle's baseline. */
.tz-step > .wp-block-group{ margin:0 !important; padding:0 !important }
.tz-step h4, .tz-step .wp-block-heading{ margin:0 0 4px !important; font-size:18px !important; font-weight:700 !important; line-height:36px !important; font-family:"DM Sans",system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; color:#fff !important }
.tz-step p{ margin:0 !important; color:rgba(255,255,255,.72); font-size:15px; line-height:1.5 }

/* Phone preview — iPhone-style device frame.
   Dark titanium bezel + dynamic island. Phone sizes to its content so
   there's no empty bezel below the cards. */
.tz-phone{
  max-width:320px;
  margin:0 auto;
  background:linear-gradient(140deg,#2c3340 0%,#1a1f2c 50%,#2c3340 100%) !important;
  padding:12px !important;
  border-radius:48px !important;
  position:relative;
  height:auto !important;
  align-self:start !important;
  box-shadow:
    0 50px 90px -25px rgba(0,0,0,.75),
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    inset 0 -3px 6px rgba(0,0,0,.5) !important;
}
/* dynamic island */
.tz-phone::before{
  content:""; position:absolute;
  top:22px; left:50%;
  transform:translateX(-50%);
  width:110px; height:30px;
  background:#000;
  border-radius:18px;
  z-index:5;
}
/* lock button on the right edge */
.tz-phone::after{
  content:""; position:absolute;
  top:130px; right:-2px;
  width:3px; height:78px;
  background:linear-gradient(90deg, #1f2536 0%, #6a7488 50%, #1f2536 100%);
  border-radius:0 2px 2px 0;
}
.tz-phone-inner{
  background:#fff !important;
  padding:64px 20px 24px !important;
  border-radius:38px !important;
  box-shadow:none !important;
  display:flex !important; flex-direction:column !important;
  gap:12px; color:var(--navy);
  position:relative;
}
.tz-phone-inner small{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-deep); font-weight:700 }
.tz-phone-h{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:24px; line-height:1.05; color:var(--navy) }
.tz-phone-p{ font-size:13px; color:var(--muted); margin-bottom:6px }
.tz-ph-card{ background:var(--bg) !important; border:1px solid var(--border); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--navy) }
.tz-ph-card .tz-pico{ width:32px; height:32px; border-radius:9px; background:var(--teal-mist); color:var(--teal-deep); display:grid; place-items:center; flex-shrink:0 }
.tz-ph-card b{ display:block; font-size:14px; color:var(--navy) }
.tz-ph-card span{ font-size:12px; color:var(--muted) }

/* ----- DEEP HOW-IT-WORKS PAGE STEP SECTIONS ----- */
.tz-step-section{ padding:120px 0; position:relative; overflow:hidden }
.tz-step-section .tz-num{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:96px; line-height:1; display:block; margin-bottom:8px; opacity:.9 }
.tz-step-section h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:54px; margin:0 0 20px; line-height:1.02; letter-spacing:-0.02em }
.tz-step-section .tz-body{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; max-width:1200px; margin:0 auto; padding:0 32px }
.tz-step-section p.lead{ font-size:18px; line-height:1.6; color:var(--navy); opacity:.78; margin:0 0 28px; max-width:520px }
.tz-step-section ul.tz-bullets{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px }
.tz-step-section ul.tz-bullets li{ position:relative; padding-left:36px; font-size:15px; line-height:1.5; color:var(--navy) }
.tz-step-section ul.tz-bullets li::before{ content:"✓"; position:absolute; left:0; top:1px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-size:13px; font-weight:700; color:#fff }
.tz-step-section.is-product{ background:var(--teal-mist) }
.tz-step-section.is-product .tz-num{ color:var(--teal-deep) }
.tz-step-section.is-product ul.tz-bullets li::before{ background:var(--teal-deep) }
.tz-step-section.is-value{ background:var(--lime-soft) }
.tz-step-section.is-value .tz-num{ color:var(--navy) }
.tz-step-section.is-value ul.tz-bullets li::before{ background:var(--navy) }
.tz-step-section.is-people{ background:var(--pink-soft) }
.tz-step-section.is-people .tz-num{ color:var(--pink) }
.tz-step-section.is-people ul.tz-bullets li::before{ background:var(--pink) }
.tz-step-section.is-action{ background:var(--orange-soft) }
.tz-step-section.is-action .tz-num{ color:var(--orange) }
.tz-step-section.is-action ul.tz-bullets li::before{ background:var(--orange) }

/* step-visual card */
.tz-step-visual{ position:relative; aspect-ratio:5/4; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 24px 60px -28px rgba(30,58,95,.35); padding:28px; display:flex; flex-direction:column; gap:14px }
.tz-sv-head{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:600 }
.tz-sv-head .tz-dot{ width:8px; height:8px; border-radius:50%; background:var(--teal-deep); display:inline-block; margin-right:6px }
.tz-sv-title{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:24px; color:var(--navy); line-height:1.1 }

/* journey-arc preview at top of How-it-works */
.tz-journey{ padding:64px 0 24px; background:#fff }
.tz-journey-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; position:relative; max-width:1200px; margin:0 auto; padding:0 32px }
.tz-journey-grid::before{ content:""; position:absolute; top:32px; left:12%; right:12%; height:2px; background:repeating-linear-gradient(90deg,var(--navy) 0,var(--navy) 6px,transparent 6px,transparent 12px); opacity:.25; z-index:0 }
.tz-j-node{ position:relative; z-index:1 }
.tz-j-node .tz-dot{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:26px; color:#fff; box-shadow:0 0 0 6px #fff }
.tz-j-node.is-product .tz-dot{ background:var(--teal-deep) }
.tz-j-node.is-value   .tz-dot{ background:var(--lime); color:var(--navy); border:2px solid var(--navy) }
.tz-j-node.is-people  .tz-dot{ background:var(--pink) }
.tz-j-node.is-action  .tz-dot{ background:var(--orange) }
.tz-j-node h4{ font-size:15px; font-weight:700; margin:0; letter-spacing:.04em; text-transform:uppercase; color:var(--navy); font-family:"DM Sans",sans-serif }
.tz-j-node small{ display:block; color:var(--muted); font-size:13px; margin-top:6px }

/* ----- COMPARISON TABLE ----- */
.tz-table{ border-radius:24px; overflow:hidden; border:1px solid var(--border); background:#fff; box-shadow:0 16px 50px -20px rgba(30,58,95,.15) }
.tz-table-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; align-items:stretch }
.tz-table-row > *{ padding:20px 22px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); font-size:14.5px; display:flex; align-items:center }
.tz-table-row > *:last-child{ border-right:none }
.tz-table-row.is-head > *{ font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--bg); align-items:flex-end; min-height:80px }
.tz-table-row.is-head .tz-you{ background:var(--navy); color:#fff }
.tz-table-row.is-head .tz-you small{ display:block; font-weight:400; letter-spacing:.04em; text-transform:none; font-size:11px; color:var(--lime); margin-top:4px }
.tz-table-row:last-child > *{ border-bottom:none }
.tz-table-row .tz-label{ font-weight:600; color:var(--navy); background:var(--bg) }
.tz-table-row .tz-you{ background:rgba(204,255,102,.18) }
.tz-tick{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--teal-deep); color:#fff; font-size:13px; font-weight:700 }
.tz-cross{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#eee; color:#aaa; font-size:13px }
.tz-partial{ font-size:13px; color:var(--muted) }

/* ----- PULL QUOTE (people speaking → pink-soft) ----- */
.tz-quote{ padding:96px 0; background:var(--pink-soft); position:relative }
.tz-quote::before{ content:"\201C"; position:absolute; left:50%; top:32px; transform:translateX(-50%); font-family:"Sunborn","DM Sans",sans-serif; font-size:140px; color:var(--pink); line-height:1; opacity:.5 }
.tz-quote blockquote, .tz-quote .tz-quote-text{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:500; font-size:clamp(24px,3vw,36px); line-height:1.25; color:var(--navy); max-width:820px; margin:0 auto; text-align:center; padding-top:64px }
.tz-quote blockquote em, .tz-quote .tz-quote-text em{ font-style:normal; background:linear-gradient(transparent 60%,var(--lime) 60%); padding:0 2px }
.tz-quote cite, .tz-quote .tz-quote-cite{ display:block; text-align:center; margin-top:28px; font-size:14px; color:var(--muted); font-style:normal }
.tz-quote cite b, .tz-quote .tz-quote-cite b, .tz-quote .tz-quote-cite strong{ color:var(--navy); font-weight:600 }

/* ----- TRAPEZE TIP (teal-mist callout — product appearing inline)
   The "T" badge is a CSS pseudo-element so the pattern markup stays clean. */
.tz-tip{ position:relative; margin:40px 0; padding:24px 28px 24px 76px; background:var(--teal-mist); border-left:4px solid var(--teal-deep); border-radius:0 14px 14px 0; font-size:16px; line-height:1.6 }
.tz-tip::before{ content:"T"; position:absolute; top:24px; left:28px; width:32px; height:32px; border-radius:8px; background:var(--teal-deep); color:#fff; display:grid; place-items:center; font-weight:900; font-size:14px; font-family:"Sunborn","DM Sans",sans-serif }
.tz-tip h4{ font-family:"DM Sans",system-ui,sans-serif; font-weight:700; font-size:14px; margin:0 0 6px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-deep) }
.tz-tip p{ margin:0; color:var(--navy); font-size:15.5px }

/* ----- CHECKLIST (lime-soft — value: the smart picks) ----- */
.tz-checklist{ margin:40px 0; padding:28px 32px; background:var(--lime-soft); border:1.5px solid var(--lime); border-radius:18px }
.tz-checklist h4{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:18px; margin:0 0 16px; display:flex; align-items:center; gap:10px }
.tz-checklist h4::before{ content:"✓"; width:26px; height:26px; border-radius:50%; background:var(--navy); color:var(--lime); font-size:14px; display:grid; place-items:center; font-weight:700; font-family:"DM Sans",sans-serif }
.tz-checklist ul{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px }
.tz-checklist li{ display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; font-size:15px; line-height:1.5 }
.tz-checklist li::before{ content:""; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--navy); margin-top:5px }

/* ----- BLOG POST READING ----- */
.tz-post-progress{ position:sticky; top:88px; height:3px; background:transparent; z-index:49 }
.tz-post-progress::before{ content:""; display:block; width:38%; height:100%; background:var(--lime) }
.tz-post-head{ padding:64px 0 40px; text-align:center }
.tz-crumb{ font-size:13px; color:var(--muted); margin-bottom:18px }
.tz-crumb a{ color:var(--muted); text-decoration:none }
.tz-post-pill{ display:inline-flex; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:7px 14px; border-radius:999px; margin-bottom:24px }
.tz-post-pill.is-practical{ background:var(--navy); color:#fff }
.tz-post-pill.is-itinerary{ background:var(--teal); color:var(--navy) }
.tz-post-pill.is-guide   { background:var(--orange); color:#fff }
.tz-post-pill.is-people  { background:var(--pink); color:#fff }
.tz-post-pill.is-value   { background:var(--lime); color:var(--navy) }
.tz-post-head h1{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-0.02em; margin:0 0 22px; max-width:880px; margin-left:auto; margin-right:auto }
.tz-post-deck{ font-size:20px; color:var(--navy); opacity:.75; max-width:640px; margin:0 auto 32px }
.tz-byline{ display:inline-flex; align-items:center; gap:14px; font-size:14px; color:var(--muted); background:var(--bg); padding:10px 18px 10px 12px; border-radius:999px; border:1px solid var(--border) }
.tz-byline .tz-av{ width:36px; height:36px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px }
.tz-byline b{ color:var(--navy); font-weight:600 }
.tz-byline .tz-mid-dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); display:inline-block; margin:0 6px }

.tz-post-hero-img{ aspect-ratio:21/9; border-radius:24px; overflow:hidden; background:#ddd; box-shadow:0 30px 80px -30px rgba(30,58,95,.35) }
.tz-post-hero-img img{ width:100%; height:100%; object-fit:cover; display:block }
.tz-post-cap{ margin-top:10px; font-size:12px; color:var(--muted); text-align:center; letter-spacing:.04em }

.tz-toc{ border:1px solid var(--border); border-radius:18px; padding:24px 28px; margin:0 0 40px; background:#fff }
.tz-toc h5{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:14px; margin:0 0 12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.tz-toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px }
.tz-toc ol li{ counter-increment:toc; display:flex; gap:10px; font-size:15px }
.tz-toc ol li::before{ content:counter(toc,decimal-leading-zero) "."; color:var(--teal-deep); font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:14px; flex-shrink:0 }
.tz-toc ol li a{ color:var(--navy); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:1px }
.tz-toc ol li a:hover{ border-color:var(--navy) }

/* Article body styles applied via .entry-content for native WP post content */
.entry-content{ font-size:18px; line-height:1.75; color:var(--navy) }
.entry-content p{ margin:0 0 22px }
.entry-content > p:first-of-type::first-letter{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:64px; float:left; line-height:.9; padding:6px 12px 0 0; color:var(--navy) }
.entry-content h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:34px; line-height:1.15; letter-spacing:-0.015em; margin:56px 0 18px; scroll-margin-top:90px }
.entry-content h3{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:700; font-size:22px; margin:36px 0 12px }
.entry-content a:not(.wp-element-button):not(.wp-block-button__link):not(.tz-btn):not(.tz-dest-card):not(.tz-dest-post){ color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px }
.entry-content .wp-block-button__link,
.entry-content a.wp-element-button{ color:#fff !important; text-decoration:none !important }
.entry-content strong{ color:var(--navy); font-weight:700 }
.entry-content ul{ padding-left:20px; margin:0 0 24px }
.entry-content ul li{ margin-bottom:8px }
.entry-content blockquote{ margin:48px 0; padding:32px; background:var(--pink-soft); border-radius:24px; font-family:"Sunborn","DM Sans",sans-serif; font-weight:500; font-size:24px; line-height:1.3; color:var(--navy) }
.entry-content blockquote cite{ display:block; margin-top:14px; font-size:13px; color:var(--muted); font-style:normal; font-family:"DM Sans",sans-serif; font-weight:400 }

/* Mid-article CTA */
.tz-midcta{ margin:64px 0; background:var(--navy); color:#fff; border-radius:24px; padding:40px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center }
.tz-midcta h3{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:28px; margin:0 0 8px; color:#fff; line-height:1.1 }
.tz-midcta p{ margin:0; color:rgba(255,255,255,.78); font-size:15px; max-width:480px }

/* Share strip */
.tz-share{ margin:32px 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); gap:16px; flex-wrap:wrap }
.tz-share .tz-tags{ display:flex; gap:8px; flex-wrap:wrap }
.tz-share .tz-tag{ padding:5px 11px; border-radius:999px; border:1px solid var(--border); font-size:12px; font-weight:500; color:var(--navy); text-decoration:none }
.tz-share .tz-icons{ display:flex; gap:8px }
.tz-share .tz-icons a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border); display:grid; place-items:center; color:var(--navy); text-decoration:none; font-size:14px }

/* Author card */
.tz-author{ margin:48px 0 0; padding:32px; background:var(--bg); border-radius:20px; display:grid; grid-template-columns:80px 1fr; gap:24px; align-items:start; border:1px solid var(--border) }
.tz-author .tz-av{ width:80px; height:80px; border-radius:50%; background:var(--pink); color:#fff; display:grid; place-items:center; font-weight:700; font-size:30px; font-family:"Sunborn","DM Sans",sans-serif }
.tz-author small{ display:block; font-size:12px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; font-weight:600 }
.tz-author h4{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:22px; margin:0 0 8px }
.tz-author p{ margin:0 0 14px; font-size:15px; color:var(--navy); opacity:.78 }
.tz-author .tz-links{ display:flex; gap:14px; font-size:13px }
.tz-author .tz-links a{ color:var(--teal-deep); text-decoration:none; font-weight:600 }

/* ----- BLOG INDEX ----- */
.tz-cats{ background:#fff; border-bottom:1px solid var(--border); position:sticky; top:88px; z-index:40 }
.tz-cats-inner{ display:flex; gap:10px; padding:18px 32px; overflow-x:auto; align-items:center; justify-content:flex-start; max-width:1200px; margin:0 auto; scrollbar-width:none }
.tz-cats-inner::-webkit-scrollbar{ display:none }
.tz-cat{ flex-shrink:0; padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; border:1.5px solid var(--border); background:#fff; color:var(--navy); cursor:pointer; letter-spacing:.02em; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .15s ease }
.tz-cat:hover{ border-color:var(--navy) }
.tz-cat.is-on{ background:var(--navy); color:#fff; border-color:var(--navy) }
.tz-cat .tz-ct{ color:var(--muted); font-weight:500; font-size:12px }
.tz-cat.is-on .tz-ct{ color:rgba(255,255,255,.7) }

.tz-feat-card{ display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; background:var(--cream); border-radius:28px; padding:48px; position:relative; overflow:hidden }
.tz-feat-card::before{ content:"FEATURED"; position:absolute; top:24px; left:48px; font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--muted) }
.tz-feat-card .tz-copy{ padding-top:24px }
.tz-feat-card .tz-feat-pill{ display:inline-flex; background:var(--navy); color:#fff; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:16px }
.tz-feat-card h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:48px; line-height:1.05; margin:0 0 16px }
.tz-feat-card .tz-img{ aspect-ratio:4/3; border-radius:18px; overflow:hidden; box-shadow:0 20px 50px -20px rgba(30,58,95,.3) }
.tz-feat-card .tz-img img{ width:100%; height:100%; object-fit:cover; display:block }

/* ----- BLOG INDEX / ARCHIVE — left-aligned editorial layout, 2-col grid so a small post set never strands an empty column ----- */
.tz-blog-hero{ padding:88px 0 48px !important; background:#fff !important; border-bottom:1px solid var(--border) }
.tz-blog-hero .tz-wrap,
.tz-blog-feed .tz-wrap{ max-width:1200px; margin:0 auto; padding:0 32px; text-align:left }
.tz-blog-hero .tz-wrap > *{ margin-left:0 !important; margin-right:auto !important; text-align:left }
.tz-blog-hero .tz-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal-deep); margin:0 0 14px !important }
.tz-blog-h1{ font-family:"Sunborn","DM Sans",sans-serif !important; font-weight:900 !important; font-size:clamp(56px,7vw,84px) !important; line-height:.95 !important; margin:0 0 22px !important; letter-spacing:-0.02em !important; color:var(--navy) !important; text-align:left !important }
.tz-blog-hero .lead{ font-size:19px; line-height:1.55; color:var(--navy); opacity:.78; max-width:640px; margin:0 !important; text-align:left !important }

.tz-blog-feed{ padding:56px 0 96px !important }
.tz-blog-feed .wp-block-query, .tz-blog-feed .wp-block-post-template{ margin:0 !important; width:100% !important }
.tz-posts-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:56px 48px !important; list-style:none !important; padding:0 !important; margin:0 !important; width:100% !important }
.tz-posts-grid > *{ margin:0 !important; width:100% !important; max-width:100% !important }
.tz-post{ display:flex !important; flex-direction:column !important; gap:14px; background:transparent; border:none; padding:0; text-align:left }
.tz-post > *{ margin:0 !important }
.tz-post .tz-img{ aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, var(--teal-mist) 0%, var(--pink-soft) 50%, var(--lime-soft) 100%); position:relative }
/* Featured image fills the card via absolute positioning — no universal child
   selector this time, so the pill (a sibling span) keeps its own auto sizing. */
.tz-post .tz-img .wp-block-post-featured-image{
  position:absolute !important; inset:0 !important; margin:0 !important; padding:0 !important; width:100% !important; height:100% !important; display:block !important; z-index:1;
}
.tz-post .tz-img .wp-block-post-featured-image a{ display:block !important; width:100% !important; height:100% !important }
.tz-post .tz-img .wp-block-post-featured-image img,
.tz-post .tz-img img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important; max-width:none !important; transition:transform .4s ease;
}
.tz-post:hover .tz-img img{ transform:scale(1.04) }

/* Pill overlays the image at top-left — explicit auto sizing so it stays a chip */
.tz-post .tz-img .tz-post-pill{
  position:absolute !important; top:12px; left:12px; z-index:3;
  width:auto !important; height:auto !important; margin:0 !important;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  display:inline-flex !important; align-items:center;
}
.tz-post .wp-block-post-date, .tz-post .wp-block-post-date time{ font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-weight:600 }
.tz-post .wp-block-post-title{ font-family:"Sunborn","DM Sans",sans-serif !important; font-weight:900 !important; font-size:clamp(26px, 2.4vw, 32px) !important; line-height:1.1 !important; margin:0 !important; letter-spacing:-0.015em }
.tz-post .wp-block-post-title a{ color:var(--navy); text-decoration:none }
.tz-post .wp-block-post-title a:hover{ color:var(--teal-deep) }
.tz-post .wp-block-post-excerpt, .tz-post .wp-block-post-excerpt__excerpt{ font-size:14.5px; color:var(--muted); margin:0 !important; line-height:1.55 }
.tz-post .tz-pill{ position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:#fff; color:var(--navy) }
.tz-post .tz-pill.is-practical{ background:var(--navy); color:#fff }
.tz-post .tz-pill.is-itinerary{ background:var(--teal); color:var(--navy) }
.tz-post .tz-pill.is-guide{ background:var(--orange); color:#fff }
.tz-post .tz-pill.is-people{ background:var(--pink); color:#fff }
.tz-post .tz-pill.is-value{ background:var(--lime); color:var(--navy) }
.tz-post h3{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:22px; line-height:1.18; margin:4px 0 6px }
.tz-post p{ font-size:14.5px; color:var(--muted); margin:0; line-height:1.55 }
.tz-post .tz-meta{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); margin-top:6px }
.tz-post .tz-meta b{ color:var(--navy); font-weight:600 }

.tz-pager{ display:flex; justify-content:center; gap:8px; margin-top:64px }
.tz-pager a{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; border:1.5px solid var(--border); font-weight:600; color:var(--navy); text-decoration:none; font-size:14px }
.tz-pager a.is-on, .tz-pager .current{ background:var(--navy); color:#fff; border-color:var(--navy) }

/* topic tiles (semantic) */
.tz-topic-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.tz-topic{ border-radius:20px; padding:32px; display:flex; flex-direction:column; gap:12px; min-height:200px; text-decoration:none; transition:transform .2s ease }
.tz-topic:hover{ transform:translateY(-3px) }
.tz-topic .tz-tic{ font-size:32px }
.tz-topic h4{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:22px; margin:0; line-height:1.1 }
.tz-topic small{ font-size:13px; opacity:.85; margin-top:auto }
.tz-topic.is-practical{ background:var(--navy); color:#fff }
.tz-topic.is-practical h4{ color:#fff }
.tz-topic.is-people{ background:var(--pink); color:#fff }
.tz-topic.is-people h4{ color:#fff }
.tz-topic.is-product{ background:var(--teal); color:var(--navy) }
.tz-topic.is-value{ background:var(--lime); color:var(--navy); border:2px solid var(--navy) }

/* ----- NEWSLETTER (value → lime-soft) ----- */
.tz-news{ padding:96px 0; background:var(--lime-soft); position:relative }
.tz-news-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center }
.tz-news h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(36px,4vw,48px); margin:14px 0 16px; line-height:1.05 }
.tz-news p{ font-size:17px; color:var(--navy); opacity:.78; margin:0 0 28px; max-width:480px }
.tz-form{ display:flex; gap:10px; flex-wrap:wrap }
.tz-form input{ flex:1; min-width:240px; padding:16px 20px; border-radius:14px; border:1.5px solid var(--navy); font-family:inherit; font-size:15px; background:#fff; color:var(--navy) }
.tz-form button{ padding:16px 24px; border-radius:14px; border:none; background:var(--navy); color:#fff; font-family:inherit; font-weight:600; font-size:15px; cursor:pointer }
.tz-news small{ display:block; margin-top:14px; color:var(--muted); font-size:13px }

/* ----- FAQ (single column — intro stacked above the accordion) ----- */
.tz-faq-grid{ display:flex; flex-direction:column; gap:48px; align-items:stretch; max-width:820px; margin:0 auto }
.tz-faq-grid > div:first-child{ text-align:center }
.tz-faq h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:42px; margin:12px 0 16px; line-height:1.02; letter-spacing:-0.02em }
.tz-acc{ border-radius:18px; overflow:hidden; border:1px solid var(--border); background:#fff }
.tz-acc-row{ border-bottom:1px solid var(--border) }
.tz-acc-row:last-child{ border-bottom:none }
.tz-acc-row[open]{ background:var(--bg) }
.tz-acc-row summary{ padding:22px 24px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:17px; cursor:pointer; list-style:none; gap:24px }
.tz-acc-row summary::-webkit-details-marker{ display:none }
.tz-acc-row summary::after{ content:"+"; color:var(--teal-deep); font-size:24px; font-weight:400; flex-shrink:0; transition:transform .15s ease }
.tz-acc-row[open] summary::after{ content:"–" }
.tz-acc-row > p, .tz-acc-row > .wp-block-paragraph{ padding:0 24px 22px; margin:0; color:var(--navy); opacity:.78; font-size:15.5px; line-height:1.6 }

/* ----- CTA CARD ----- */
.tz-cta-card{ background:var(--navy); color:#fff; border-radius:32px; padding:64px; display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:48px; position:relative; overflow:hidden }
.tz-cta-card h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:46px; margin:0 0 16px; color:#fff; line-height:1.02; letter-spacing:-0.02em }
.tz-cta-card p{ color:rgba(255,255,255,.78); margin:0 0 24px; max-width:480px }
.tz-cta-card .tz-actions{ display:flex; gap:12px; flex-wrap:wrap }
.tz-cta-visual{ background:var(--navy); border-radius:20px; aspect-ratio:1; position:relative; overflow:hidden }
.tz-cta-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }

/* ----- FOOTER ----- */
.tz-footer{ padding:56px 0 40px; background:var(--navy); color:rgba(255,255,255,.7); font-size:14px }
.tz-footer .tz-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap; max-width:1200px; margin:0 auto; padding:0 32px }
.tz-footer .tz-cols{ display:grid; grid-template-columns:repeat(3,minmax(140px,auto)); gap:48px }
.tz-footer h5{ color:#fff; font-size:13px; margin:0 0 12px; text-transform:uppercase; letter-spacing:.1em }
.tz-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px }
.tz-footer a{ color:rgba(255,255,255,.7); text-decoration:none }
.tz-footer .tz-brand .tz-logo{ color:#fff }
.tz-footer .tz-brand .tz-logo-mark{ background:var(--teal); color:var(--navy) }
.tz-footer .tz-brand p{ margin-top:14px; max-width:280px }
.tz-footer .tz-legal{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; display:flex; justify-content:space-between; max-width:1200px; margin-left:auto; margin-right:auto; padding-left:32px; padding-right:32px; flex-wrap:wrap; gap:16px }

/* =====================================================================
   RESPONSIVE — mobile-first overrides applied at three breakpoints:
   <= 1024px  large tablet  (mild adjustments)
   <= 768px   tablet/large mobile (stack 2-col grids, mobile nav)
   <= 480px   phone (single column, tighter padding/type)
   ===================================================================== */

/* Mobile nav (toggle is always in the DOM; visibility flips at <=768px) */
.tz-nav-toggle{ position:absolute; opacity:0; pointer-events:none; width:0; height:0 }
.tz-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; padding:8px; width:40px; height:40px; border-radius:8px; user-select:none }
.tz-burger:hover{ background:var(--bg) }
.tz-burger span{ display:block; height:2px; width:22px; background:var(--navy); border-radius:1px; transition:transform .2s ease, opacity .2s ease }

/* ----- OCCASIONS PAGE — audience deep-dives (couples / solo / groups) -----
   Hero is left-aligned with jump links. Each audience gets a full-width
   colored band, a 2-col grid (copy + product mockup), and alternates so
   the visual side switches per section. The mockups are CSS-only — they
   show the actual product differentiator (vibe selector, safety filters,
   shared trip + cost split) so the page reads as substance, not marketing. */
.tz-aud-hero{ padding:88px 0 56px; background:var(--cream) }
.tz-aud-hero .tz-wrap > *{ text-align:left }
.tz-aud-hero .tz-eyebrow{ margin:0 0 14px !important; color:var(--pink) }
.tz-aud-hero h1{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(48px,6vw,76px); line-height:.98; letter-spacing:-0.02em; margin:0 0 20px; color:var(--navy); max-width:900px }
.tz-aud-hero .lead{ font-size:19px; line-height:1.55; color:var(--navy); opacity:.78; max-width:640px; margin:0 0 28px }
.tz-aud-jump{ display:flex; flex-wrap:wrap; gap:10px }
.tz-aud-jump a{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:#fff; border:1.5px solid var(--border); color:var(--navy); font-size:13px; font-weight:600; text-decoration:none; transition:border-color .15s ease, transform .15s ease }
.tz-aud-jump a:hover{ border-color:var(--navy); transform:translateY(-1px) }
.tz-aud-jump .tz-dot{ width:8px; height:8px; border-radius:50% }
.tz-aud-jump .tz-dot.is-people{ background:var(--pink) }
.tz-aud-jump .tz-dot.is-product{ background:var(--teal-deep) }
.tz-aud-jump .tz-dot.is-action{ background:var(--orange) }

.tz-aud{ padding:96px 0; scroll-margin-top:96px }
.tz-aud.is-people{ background:var(--pink-soft) }
.tz-aud.is-product{ background:var(--teal-mist) }
.tz-aud.is-action{ background:var(--orange-soft) }
.tz-aud-grid{ display:grid !important; grid-template-columns:1.05fr 1fr; gap:72px; align-items:center }
.tz-aud.is-alt .tz-aud-grid{ grid-template-columns:1fr 1.05fr }
.tz-aud-copy > *{ margin:0 0 16px !important }
.tz-aud-copy .tz-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase }
.tz-aud-copy .tz-eyebrow.is-people{ color:var(--pink) }
.tz-aud-copy .tz-eyebrow.is-product{ color:var(--teal-deep) }
.tz-aud-copy .tz-eyebrow.is-action{ color:var(--orange) }
.tz-aud-copy h2{ font-family:"Sunborn","DM Sans",sans-serif !important; font-weight:900 !important; font-size:clamp(34px,3.6vw,46px) !important; line-height:1.02 !important; letter-spacing:-0.02em !important; margin:0 0 14px !important; color:var(--navy) }
.tz-aud-copy p{ color:var(--navy); opacity:.78; font-size:17px; line-height:1.55 }
.tz-aud-copy .wp-block-buttons{ margin-top:8px !important }

.tz-aud-feats{ list-style:none; padding:0; margin:24px 0 8px !important; display:flex; flex-direction:column; gap:20px }
.tz-aud-feats li{ display:flex; gap:16px; align-items:flex-start }
.tz-aud-feats li div{ flex:1; min-width:0 }
.tz-aud-feats li b{ display:block; font-size:16px; color:var(--navy); font-weight:700; margin-bottom:4px }
.tz-aud-feats li p{ font-size:14.5px; color:var(--navy); opacity:.72; margin:0; line-height:1.55 }
.tz-feat-ic{ width:38px; height:38px; border-radius:11px; flex:0 0 38px; display:grid; place-items:center; font-size:17px; color:#fff }
.tz-feat-ic.is-people{ background:var(--pink) }
.tz-feat-ic.is-product{ background:var(--teal-deep) }
.tz-feat-ic.is-action{ background:var(--orange) }

/* Product mockups — CSS-only cards that hint at the actual feature */
.tz-aud-mock{ background:#fff; border-radius:24px; padding:24px; box-shadow:0 30px 60px -30px rgba(30,58,95,.25); border:1px solid rgba(30,58,95,.06); display:flex; flex-direction:column; gap:18px }
.tz-mock-head{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--navy) }
.tz-mock-head b{ font-weight:700 }
.tz-mock-tag{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#fff }
.tz-mock-tag.is-people{ background:var(--pink) }
.tz-mock-tag.is-product{ background:var(--teal-deep) }
.tz-mock-tag.is-action{ background:var(--orange) }

.tz-mock-chips{ display:flex; flex-wrap:wrap; gap:8px }
.tz-mock-chips span{ font-size:12.5px; padding:8px 12px; border-radius:999px; border:1.5px solid var(--border); color:var(--navy); opacity:.55; font-weight:600 }
.tz-mock-chips span.is-on{ background:var(--pink-soft); border-color:var(--pink); color:var(--navy); opacity:1 }

.tz-mock-card{ display:flex; gap:14px; align-items:center; background:var(--bg); border-radius:16px; padding:12px }
.tz-mock-img{ width:84px; height:84px; border-radius:12px; flex-shrink:0 }
.tz-mock-card-body small{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:4px }
.tz-mock-card-body b{ display:block; font-size:15px; color:var(--navy); font-weight:700; margin-bottom:4px }
.tz-mock-meta{ font-size:13px; color:var(--muted) }

.tz-mock-safety{ display:flex; flex-direction:column; gap:10px }
.tz-safe-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--navy); background:var(--teal-mist); border-radius:12px; padding:12px 14px }
.tz-tick{ width:22px; height:22px; border-radius:50%; background:var(--teal-deep); color:#fff; display:grid; place-items:center; font-size:13px; flex-shrink:0 }

.tz-mock-avs{ display:flex; align-items:center }
.tz-mock-avs .tz-av{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; border:2.5px solid #fff; margin-left:-8px }
.tz-mock-avs .tz-av:first-child{ margin-left:0 }
.tz-mock-feed{ display:flex; flex-direction:column; gap:8px }
.tz-feed-row{ font-size:13.5px; color:var(--navy); background:var(--bg); border-radius:12px; padding:11px 14px; line-height:1.4 }
.tz-feed-row b{ font-weight:700 }
.tz-feed-row em{ font-style:normal; color:var(--orange); font-weight:600 }
.tz-feed-row.is-split{ display:flex; justify-content:space-between; align-items:center; background:var(--orange-soft); color:var(--navy) }
.tz-feed-row.is-split b{ color:var(--orange); font-weight:700 }

/* ----- FOUNDER (people → pink accent) ----- */
.tz-founder{ padding:96px 0 }
.tz-founder .tz-eyebrow{ margin-bottom:20px }
.tz-founder-head{ display:flex; align-items:center; gap:40px; margin-bottom:48px }
.tz-founder-portrait{ width:180px; height:180px; flex-shrink:0; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 10px 40px rgba(13,27,62,.15); background:var(--navy) }
.tz-founder-name{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:40px; line-height:1.1; margin:0 0 8px; color:var(--navy) }
.tz-founder-role{ margin:0; font-size:16px; color:var(--muted) }
.tz-founder-bio{ max-width:720px }
.tz-founder-bio p{ margin:0 0 20px; font-size:17px; line-height:1.75; color:var(--navy); opacity:.82 }
.tz-founder-bio em{ font-style:italic; font-weight:600; opacity:1 }
.tz-founder-meta{ max-width:720px; margin-top:40px; padding-top:28px; border-top:1px solid var(--border); font-size:14px; color:var(--muted) }
.tz-founder-meta p{ margin:0 0 8px }
.tz-founder-meta strong{ color:var(--navy); font-weight:600 }
.tz-founder-cta{ margin-top:40px }

/* ===== <= 1024px ===== */
@media (max-width:1024px){
  .tz-section, .tz-step-section, .tz-aud{ padding:72px 0 }
  .tz-section.is-cta{ padding:48px 0 72px }
  .tz-step-section .tz-num{ font-size:72px }
  .tz-how-h{ font-size:36px !important; margin-bottom:28px !important }
  .tz-step-section h2{ font-size:42px }
  .tz-section-head h2, .tz-cta-card h2, .tz-feat-card h2, .tz-news h2{ font-size:clamp(28px,4vw,40px) }
  .tz-feat-card h2{ font-size:36px }
  .tz-aud-grid, .tz-aud.is-alt .tz-aud-grid{ grid-template-columns:1fr !important; gap:48px }
  .tz-aud-hero{ padding:64px 0 40px }
  .tz-aud-hero h1{ font-size:clamp(40px,5.5vw,60px) }
  .tz-blog-hero{ padding:64px 0 36px !important }
  .tz-blog-h1{ font-size:clamp(44px,6vw,64px) !important; margin:0 0 18px !important }
}

/* ===== <= 768px ===== */
@media (max-width:768px){

  /* --- Founder --- */
  .tz-founder{ padding:64px 0 }
  .tz-founder-head{ flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:36px }
  .tz-founder-portrait{ width:140px; height:140px }
  .tz-founder-name{ font-size:32px }
  .tz-founder-bio p{ font-size:16px }

  /* --- Nav --- */
  .tz-nav .tz-inner{ height:72px; padding:0 20px; flex-wrap:nowrap }
  .tz-logo img{ height:38px }
  .tz-burger{ display:flex; order:99 }
  .tz-nav-login{ display:none }
  .tz-nav-cta{ font-size:13px !important; padding:10px 14px !important }
  .tz-nav ul.tz-menu{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--border);
    flex-direction:column; gap:0;
    padding:8px 24px 16px;
    box-shadow:0 12px 24px -12px rgba(30,58,95,.18);
  }
  .tz-nav ul.tz-menu li{ padding:14px 0; border-bottom:1px solid var(--border); font-size:16px }
  .tz-nav ul.tz-menu li:last-child{ border-bottom:none }
  .tz-nav .tz-mobile-only{ display:list-item }
  .tz-nav-toggle:checked ~ .tz-inner ul.tz-menu{ display:flex }
  /* hamburger → X when checked */
  .tz-nav-toggle:checked ~ .tz-inner .tz-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .tz-nav-toggle:checked ~ .tz-inner .tz-burger span:nth-child(2){ opacity:0 }
  .tz-nav-toggle:checked ~ .tz-inner .tz-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

  /* --- Spacing --- */
  .tz-section, .tz-step-section{ padding:56px 0 }
  .tz-section.is-cta{ padding:32px 0 56px }
  .tz-quote{ padding:64px 0 }
  .tz-quote::before{ font-size:96px; top:24px }
  .tz-news{ padding:56px 0 }

  /* --- Hero --- */
  .tz-hero{ padding:56px 0 48px }
  .tz-hero.is-centered{ padding:80px 0 56px }
  .tz-hero-grid{ grid-template-columns:1fr; gap:40px; padding:0 24px }
  .tz-hero h1{ font-size:clamp(38px,8vw,56px) }
  .tz-hero.is-centered h1{ font-size:clamp(42px,9vw,64px) }
  .tz-hero .lead{ font-size:17px }
  /* Hide decorative chips on mobile — they overflow the viewport */
  .tz-hero-chips{ display:none }
  .tz-hero-visual{ aspect-ratio:3/2 }
  .tz-hero-meta{ gap:14px 20px; font-size:12px }

  /* --- Stats ribbon: 2x2 grid --- */
  .tz-ribbon-grid{ grid-template-columns:repeat(2,1fr) !important; gap:24px 16px }
  .tz-stat .tz-n{ font-size:32px }

  /* --- Card grids (base rules use !important, so overrides must too) --- */
  .tz-why-grid, .tz-topic-grid{ grid-template-columns:repeat(2,1fr) !important; gap:16px }
  .tz-occ-grid{ grid-template-columns:1fr !important; gap:20px }
  .tz-journey-grid{ grid-template-columns:repeat(2,1fr); gap:24px 16px }
  .tz-posts-grid{ grid-template-columns:1fr !important; gap:40px !important }

  /* --- Sections that were two-column --- */
  .tz-how-grid, .tz-news-grid, .tz-step-section .tz-body, .tz-cta-card{
    grid-template-columns:1fr !important; gap:40px
  }
  .tz-step-section{ padding:64px 0 }
  .tz-step-section .tz-num{ font-size:56px; margin-bottom:0 }
  .tz-step-section h2{ font-size:32px }
  .tz-how-h{ font-size:32px !important; margin-bottom:24px !important }

  /* --- Featured blog card --- */
  .tz-feat-card{ grid-template-columns:1fr; padding:32px; gap:24px }
  .tz-feat-card::before{ left:32px }
  .tz-feat-card h2{ font-size:28px }
  .tz-feat-card .tz-copy{ padding-top:48px }

  /* --- CTA card --- */
  .tz-cta-card{ padding:36px; gap:32px }
  .tz-cta-card h2{ font-size:32px }
  .tz-cta-card .tz-cta-visual{ display:none }

  /* --- Comparison table: horizontal scroll --- */
  .tz-table{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .tz-table-row{ grid-template-columns:1.4fr 1fr 1fr 1fr; min-width:640px; font-size:13px }
  .tz-table-row > *{ padding:14px 16px }

  /* --- FAQ --- */
  .tz-faq-grid{ gap:32px }

  /* --- Blog post --- */
  .tz-post-head{ padding:48px 20px 32px }
  .tz-post-head h1{ font-size:clamp(32px,7vw,48px) }
  .tz-post-deck{ font-size:17px }
  .entry-content{ font-size:17px; padding:0 20px }
  .entry-content > p:first-of-type::first-letter{ font-size:48px }
  .entry-content h2{ font-size:26px; margin:40px 0 14px }
  .tz-midcta{ grid-template-columns:1fr; padding:28px; gap:20px; text-align:center }
  .tz-author{ grid-template-columns:1fr; text-align:center; padding:24px }
  .tz-author .tz-av{ margin:0 auto }
  .tz-author .tz-links{ justify-content:center }

  /* --- Footer --- */
  .tz-footer .tz-row{ flex-direction:column; gap:32px }
  .tz-footer .tz-cols{ grid-template-columns:1fr 1fr; gap:24px }
  .tz-footer .tz-legal{ flex-direction:column; gap:8px; text-align:center }

  /* --- Buttons stack --- */
  .tz-hero-cta .tz-btn, .tz-cta-card .tz-actions .tz-btn{ width:100% }
  .tz-hero-cta .tz-btn .wp-block-button__link, .tz-cta-card .tz-actions .tz-btn .wp-block-button__link{ width:100%; justify-content:center }

  /* --- Section heads --- */
  .tz-section-head.is-left{ flex-direction:column; align-items:flex-start; gap:16px }

  /* --- Reading progress bar offset for taller header --- */
  .tz-post-progress{ top:72px }
  .tz-nav{ height:auto }

  /* --- Sticky category nav: header is 72px tall on mobile, not 88px --- */
  .tz-cats{ top:72px }
  .tz-cats-inner{ padding:14px 20px; gap:8px }
  .tz-cat{ padding:8px 14px; font-size:12.5px }

  /* --- Blog index hero + feed --- */
  .tz-blog-hero{ padding:48px 0 28px !important }
  .tz-blog-hero .tz-wrap, .tz-blog-feed .tz-wrap{ padding:0 20px }
  .tz-blog-h1{ font-size:clamp(38px,9vw,52px) !important; margin:0 0 14px !important }
  .tz-blog-hero .lead{ font-size:16px }
  .tz-blog-feed{ padding:40px 0 64px !important }
  .tz-posts-grid{ gap:36px !important }
  .tz-post .tz-img{ aspect-ratio:16/10 }
  .tz-post .wp-block-post-title{ font-size:22px !important }

  /* --- Occasions audience hero + sections --- */
  .tz-aud-hero{ padding:48px 0 32px }
  .tz-aud-hero .tz-wrap{ padding:0 20px }
  .tz-aud-hero h1{ font-size:clamp(34px,8.5vw,46px); margin:0 0 14px }
  .tz-aud-hero .lead{ font-size:16px; margin:0 0 22px }
  .tz-aud-jump{ gap:8px }
  .tz-aud-jump a{ padding:8px 13px; font-size:12.5px }
  .tz-aud{ padding:56px 0; scroll-margin-top:72px }
  .tz-aud .tz-wrap{ padding:0 20px }
  .tz-aud-grid{ gap:36px }
  .tz-aud-copy h2{ font-size:clamp(26px,7vw,34px) !important }
  .tz-aud-copy p{ font-size:16px }
  .tz-aud-feats{ margin:18px 0 4px !important; gap:16px }
  .tz-aud-feats li b{ font-size:15px }
  .tz-aud-feats li p{ font-size:14px }
  .tz-aud-mock{ padding:18px; border-radius:20px; gap:14px }
  .tz-mock-card{ padding:10px }
  .tz-mock-img{ width:64px; height:64px }
  .tz-mock-chips span{ font-size:11.5px; padding:6px 10px }
  .tz-mock-avs .tz-av{ width:32px; height:32px; font-size:12px }
  .tz-feed-row{ font-size:13px }

  /* --- Home hero chips wrap their text instead of overflowing --- */
  .tz-hero .tz-hero-visual{ max-width:100%; height:auto }
}

/* ===== <= 480px ===== */
@media (max-width:480px){
  .tz-section, .tz-step-section{ padding:48px 0 }
  .tz-section.is-cta{ padding:24px 0 48px }
  .tz-hero{ padding:48px 0 32px }
  .tz-hero.is-centered{ padding:64px 0 48px }
  .tz-hero h1, .tz-hero.is-centered h1{ font-size:clamp(34px,9vw,44px) }
  .tz-section-head h2{ font-size:28px }
  .tz-step-section h2{ font-size:28px }
  .tz-faq h2{ font-size:28px }
  .tz-step-section .tz-num{ font-size:44px }
  .tz-stat .tz-n{ font-size:28px }
  .tz-ribbon-grid{ grid-template-columns:1fr !important; gap:20px }
  .tz-stat{ border-left:none; padding-left:0 }
  .tz-why-grid, .tz-topic-grid, .tz-posts-grid{ grid-template-columns:1fr !important }
  .tz-journey-grid{ grid-template-columns:1fr }
  .tz-cta-card{ padding:28px; border-radius:24px }
  .tz-cta-card h2{ font-size:26px }
  .tz-feat-card{ padding:24px; border-radius:20px }
  .tz-feat-card h2{ font-size:24px }
  .tz-quote blockquote, .tz-quote .tz-quote-text{ padding-top:48px }
  .tz-footer{ padding:40px 0 24px }
  .tz-footer .tz-cols{ grid-template-columns:1fr }
  .tz-news h2{ font-size:28px }
  .tz-form input{ min-width:0; width:100% }
  .tz-form button{ width:100% }
  .tz-toc ol{ grid-template-columns:1fr }
  .tz-checklist ul{ grid-template-columns:1fr }
  .tz-pager a{ width:36px; height:36px; font-size:13px }
  .tz-post-pill{ font-size:10px }
  .tz-post-head h1{ font-size:32px }

  /* --- Occasions audience sections on small phones --- */
  .tz-aud{ padding:44px 0 }
  .tz-aud-hero{ padding:36px 0 24px }
  .tz-aud-hero h1{ font-size:clamp(30px,9vw,40px) }
  .tz-aud-copy h2{ font-size:clamp(24px,8vw,30px) !important }
  .tz-aud-mock{ padding:16px }
  .tz-mock-head{ font-size:14px }
  .tz-mock-chips{ gap:6px }
  .tz-mock-chips span{ font-size:11px; padding:5px 9px }
  .tz-safe-row{ font-size:13px; padding:10px 12px }

  /* --- Blog index --- */
  .tz-blog-hero{ padding:36px 0 20px !important }
  .tz-blog-h1{ font-size:clamp(32px,10vw,42px) !important }
  .tz-blog-feed{ padding:32px 0 56px !important }
}

/* ==========================================================================
   Destinations — region explorer index + single guide pages
   ========================================================================== */

/* --- Index hero & region quick-nav --- */
.tz-dest-hero{ padding:104px 0 56px }
.tz-region-nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:34px }
.tz-region-nav a{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background:#fff; border:1.5px solid var(--border); color:var(--navy); font-weight:600; font-size:14px;
  text-decoration:none; transition:border-color .15s ease, transform .15s ease;
}
.tz-region-nav a:hover{ border-color:var(--navy); transform:translateY(-1px) }

/* --- Region sections + destination cards --- */
.tz-dest-region{ padding:40px 0 8px; scroll-margin-top:84px }
.tz-dest-region:last-of-type{ padding-bottom:72px }
.tz-dest-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.tz-dest-card{
  display:flex; flex-direction:column; border-radius:20px; overflow:hidden; background:#fff;
  border:1px solid var(--border); text-decoration:none; color:inherit;
  box-shadow:0 10px 30px -22px rgba(30,58,95,.4); transition:transform .18s ease, box-shadow .18s ease;
}
.tz-dest-card:hover{ transform:translateY(-4px); box-shadow:0 26px 54px -26px rgba(30,58,95,.55) }
.tz-dest-photo{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--teal-mist) }
.tz-dest-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.tz-dest-card:hover .tz-dest-photo img{ transform:scale(1.06) }
.tz-dest-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,58,95,0) 38%,rgba(30,58,95,.72) 100%) }
.tz-dest-cap{ position:absolute; left:16px; right:16px; bottom:13px; z-index:1; color:#fff; display:flex; flex-direction:column; line-height:1.15 }
.tz-dest-name{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:24px; letter-spacing:-0.01em; text-shadow:0 2px 14px rgba(30,58,95,.5) }
.tz-dest-country{ font-size:13px; font-weight:600; opacity:.92; margin-top:2px }
.tz-dest-country::before{ content:"\1F4CD"; margin-right:5px }
.tz-dest-body{ display:flex; flex-direction:column; gap:14px; padding:16px 18px 18px; flex:1 }
.tz-dest-tag{ color:var(--navy); opacity:.82; font-size:14.5px; line-height:1.45; flex:1 }
.tz-dest-readmore{ color:var(--teal-deep); font-weight:700; font-size:14px }
.tz-dest-card:hover .tz-dest-readmore span{ margin-left:4px }
.tz-dest-readmore span{ transition:margin-left .15s ease }

/* --- Single guide page --- */
.tz-dest-guide-hero{ position:relative; min-height:clamp(340px,46vw,480px); overflow:hidden; display:flex; align-items:flex-end }
.tz-dest-guide-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.tz-dest-guide-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(30,58,95,.05) 0%,rgba(30,58,95,.35) 45%,rgba(30,58,95,.86) 100%) }
.tz-dest-guide-hero-inner{ position:relative; z-index:1; color:#fff; width:100%; max-width:1120px; margin:0 auto; padding:0 32px 44px }
.tz-dest-guide-hero-inner h1{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(44px,7vw,80px); margin:10px 0 0; line-height:1.0; letter-spacing:-0.02em; text-shadow:0 2px 24px rgba(30,58,95,.55) }
.tz-eyebrow.on-dark{ color:#fff; opacity:.92 }
.tz-dest-hero-tag{ font-size:clamp(17px,2.2vw,21px); font-weight:600; margin:12px 0 22px; max-width:620px; text-shadow:0 1px 14px rgba(30,58,95,.5) }
.tz-dest-hero-cta{ box-shadow:0 16px 40px -16px rgba(30,58,95,.7) }

.tz-dest-guide{ padding:44px 0 72px }
.tz-dest-guide .tz-wrap{ max-width:760px }
.tz-dest-guide .lead{ font-size:20px; color:var(--navy); opacity:.88; margin:0 0 26px; line-height:1.55 }
.tz-dest-guide h2{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:clamp(26px,3vw,32px); margin:42px 0 14px; letter-spacing:-0.01em }
.tz-dest-guide p{ color:var(--navy); opacity:.82; line-height:1.6 }

/* facts strip (scoped to beat .entry-content ul defaults) */
.tz-dest-guide .tz-dest-facts{ list-style:none; margin:0 0 30px; padding:16px 8px; display:flex; flex-wrap:wrap; gap:14px 0;
  background:var(--teal-mist); border:1px solid var(--border); border-radius:16px }
.tz-dest-guide .tz-dest-facts li{ flex:1 1 0; min-width:140px; margin:0; padding:0 20px; display:flex; flex-direction:column; gap:4px;
  border-left:1px solid rgba(30,58,95,.12) }
.tz-dest-guide .tz-dest-facts li:first-child{ border-left:none }
.tz-fact-k{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--teal-deep) }
.tz-fact-v{ font-size:15.5px; font-weight:600; color:var(--navy); line-height:1.3 }

/* inline figure */
.tz-dest-figure{ margin:8px 0 30px; border-radius:20px; overflow:hidden; box-shadow:0 24px 56px -30px rgba(30,58,95,.5); background:var(--teal-mist) }
.tz-dest-figure img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }

/* things-to-do accordion */
.tz-do-intro{ font-size:15px; color:var(--navy); opacity:.7; margin:0 0 16px }
.tz-do-list{ display:grid; gap:12px; margin:0 }
.tz-do-row{ border:1px solid var(--border); border-radius:16px; background:#fff; overflow:hidden; transition:box-shadow .15s ease }
.tz-do-row[open]{ box-shadow:0 20px 48px -30px rgba(30,58,95,.55) }
.tz-do-row summary{ display:flex; align-items:center; gap:14px; padding:16px 20px; cursor:pointer; list-style:none;
  font-weight:600; color:var(--navy); font-size:16.5px; line-height:1.35 }
.tz-do-row summary::-webkit-details-marker{ display:none }
.tz-do-row summary:hover{ background:var(--bg) }
.tz-do-check{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--teal-deep); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700 }
.tz-do-title{ flex:1 }
.tz-do-row summary::after{ content:"+"; flex-shrink:0; font-size:26px; font-weight:400; line-height:1; color:var(--teal-deep) }
.tz-do-row[open] summary::after{ content:"\2013" }
.tz-do-body{ display:grid; grid-template-columns:300px 1fr; gap:28px; padding:16px 22px 26px 60px; align-items:start }
.tz-do-left{ display:flex; flex-direction:column; gap:14px }
.tz-do-photo{ margin:0; border-radius:14px; overflow:hidden; background:var(--teal-mist);
  box-shadow:0 14px 34px -22px rgba(30,58,95,.5) }
.tz-do-photo img{ display:block; width:100%; aspect-ratio:7/5; object-fit:cover }
.tz-do-overview{ font-size:15.5px; color:var(--navy); margin:0; line-height:1.55; font-weight:500 }
.tz-do-facts{ margin:0; display:grid; gap:14px }
.tz-do-facts > div{ position:relative; padding-left:14px }
.tz-do-facts > div::before{ content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:3px; background:var(--teal-mist) }
.tz-do-facts dt{ font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--teal-deep); margin-bottom:3px }
.tz-do-facts dd{ margin:0; font-size:14.5px; color:var(--navy); opacity:.82; line-height:1.55 }

/* Know before you go — practical info grid */
.tz-dest-practical{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 0 }
.tz-practical-item{ display:flex; gap:14px; align-items:flex-start; padding:18px; background:#fff;
  border:1px solid var(--border); border-radius:16px }
.tz-practical-icon{ flex-shrink:0; width:40px; height:40px; border-radius:12px; background:var(--teal-mist);
  display:grid; place-items:center; font-size:20px; line-height:1 }
.tz-practical-text strong{ display:block; font-size:15px; color:var(--navy); font-weight:700; margin-bottom:4px }
.tz-practical-text p{ margin:0; font-size:14.5px; color:var(--navy); opacity:.82; line-height:1.55 }

/* Get inspired — related blog posts */
.tz-dest-posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:6px 0 0 }
.tz-dest-post{ display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--border); text-decoration:none; color:inherit;
  box-shadow:0 10px 30px -22px rgba(30,58,95,.4); transition:transform .18s ease, box-shadow .18s ease }
.tz-dest-post:hover{ transform:translateY(-3px); box-shadow:0 22px 48px -26px rgba(30,58,95,.5) }
.tz-dest-post-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--teal-mist) }
.tz-dest-post-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease }
.tz-dest-post:hover .tz-dest-post-img img{ transform:scale(1.06) }
.tz-dest-post-body{ display:flex; flex-direction:column; gap:8px; padding:15px 16px 17px; flex:1 }
.tz-dest-post-body strong{ font-size:15.5px; color:var(--navy); font-weight:700; line-height:1.3 }
.tz-dest-post-x{ font-size:13.5px; color:var(--navy); opacity:.72; line-height:1.5; flex:1 }
.tz-dest-post-more{ font-size:13px; font-weight:700; color:var(--teal-deep) }

@media (max-width:640px){
  .tz-dest-practical{ grid-template-columns:1fr }
  .tz-dest-posts{ grid-template-columns:1fr }
}

/* CTA band */
.tz-dest-cta-band{ margin:48px 0 0; padding:26px 28px; border-radius:20px;
  background:linear-gradient(120deg,var(--navy),var(--teal-deep)); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
.tz-dest-cta-copy{ display:flex; flex-direction:column; gap:4px }
.tz-dest-cta-copy strong{ font-family:"Sunborn","DM Sans",sans-serif; font-weight:900; font-size:21px; color:#fff }
.tz-dest-cta-copy span{ color:#fff; opacity:.85; font-size:15px }
.tz-dest-cta-band .tz-btn{ flex-shrink:0 }

.tz-dest-back{ margin-top:40px; padding-top:24px; border-top:1px solid var(--border) }
.tz-dest-back a{ color:var(--teal-deep); font-weight:600; text-decoration:none }

@media (max-width:860px){
  .tz-dest-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  /* accordion stacks: photo + description, then the three sections */
  .tz-do-body{ grid-template-columns:1fr; gap:16px; padding:14px 18px 22px }
  .tz-do-left{ gap:12px }
  .tz-do-photo img{ aspect-ratio:16/9 }
  /* destination guide: tighten for phones (iOS + Android) */
  .tz-dest-guide{ padding:32px 0 56px }
  .tz-dest-guide .tz-wrap{ padding:0 20px }
  .tz-dest-guide-hero-inner{ padding:0 20px 30px }
  .tz-dest-guide-hero-inner h1{ font-size:clamp(34px,9vw,52px) }
  .tz-dest-hero-tag{ font-size:16px; margin:10px 0 18px }
  .tz-dest-hero-cta{ width:100%; justify-content:center }
  .tz-do-row summary{ padding:14px 16px; font-size:15.5px; gap:12px }
  .tz-dest-figure img{ aspect-ratio:4/3 }
  .tz-dest-guide h2{ margin-top:34px }
}
@media (max-width:560px){
  .tz-dest-grid{ grid-template-columns:1fr }
  .tz-dest-guide-hero{ min-height:300px }
  .tz-dest-facts li{ flex-basis:50%; border-left:none }
  .tz-dest-cta-band{ flex-direction:column; align-items:flex-start; padding:22px }
  .tz-dest-cta-band .tz-btn{ width:100%; justify-content:center }
}
@media (max-width:400px){
  .tz-dest-facts li{ flex-basis:100% }
}