/* coconut.com V2 ("Sun & Lagoon") - NET-DS 1.0 structure, coconut palette.
   Loaded only when COCO_V2 is on (html[data-cv2]). Re-skins existing markup; never hides a feature.
   Light is the default; dark follows the OS unless the visitor picks (html[data-cv2-theme]). */

/* ---------- 1. tokens (NET-DS names) ---------- */
html[data-cv2] {
  --ds-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-font-display: 'Cormorant Garamond', 'Cormorant', Garamond, Georgia, serif;
  --ds-font-ui: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ds-fs-xs: 12px; --ds-fs-sm: 14px; --ds-fs-md: 16px; --ds-fs-lg: 18px; --ds-fs-xl: 22px;
  --ds-fs-2xl: clamp(26px, 3.4vw, 38px); --ds-fs-3xl: clamp(40px, 6.4vw, 72px);
  --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 16px; --ds-s5: 20px; --ds-s6: 24px; --ds-s8: 32px; --ds-s10: 40px; --ds-s12: 48px; --ds-s16: 64px;
  --ds-gutter: 16px; --ds-maxw: 72rem;
  --ds-r-sm: 10px; --ds-r-md: 14px; --ds-r-lg: 18px; --ds-r-xl: 22px; --ds-r-full: 999px;
  --ds-tap: 44px; --ds-header-h: 64px; --ds-tabbar-h: 60px;
  --ds-ease: cubic-bezier(.2,.7,.3,1); --ds-dur-1: 120ms; --ds-dur-2: 200ms; --ds-dur-3: 320ms;

  /* light: sand, deep-lagoon ink, lagoon teal, sun gold, sunset coral */
  --ds-bg: #fbf7f0; --ds-surface: #ffffff; --ds-surface-2: #f5eee3; --ds-surface-3: #ece2d2;
  --ds-ink: #0c2830; --ds-ink-2: #2f4c55; --ds-ink-3: #4f6268;
  --ds-line: #e8decf; --ds-line-2: #cfc0a8;
  --ds-accent: #0a736d; --ds-accent-2: #075f5a; --ds-on-accent: #ffffff; --ds-accent-soft: #dcf0ec; --ds-accent-ink: #075f5a;
  --ds-sun: #f5b23a; --ds-on-sun: #2a1a00; --ds-sun-soft: #fdf0d6;
  --ds-coral: #e4603f; --ds-coral-ink: #b2421f; --ds-coral-soft: #fbe5dc;
  --ds-focus: #0a736d;
  --ds-ok: #2c6e4c; --ds-warn: #8a4b12; --ds-danger: #a8301f;
  --ds-shadow-1: 0 1px 2px rgba(12,40,48,.06), 0 8px 24px -16px rgba(12,40,48,.22);
  --ds-shadow-2: 0 2px 6px rgba(12,40,48,.06), 0 22px 44px -24px rgba(12,40,48,.32);
  --ds-shadow-3: 0 30px 70px -30px rgba(12,40,48,.45);
  --ds-glass: rgba(251,247,240,.82);
  --ds-scrim: rgba(6,22,27,.5);
  --ds-hero-glow: radial-gradient(1200px 500px at 85% -10%, rgba(245,178,58,.22), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(11,122,116,.12), transparent 60%);
  --cv2-hero-img: url(/cv2/img/cv2-hero-1600.webp);
  --cv2-hero-img-s: url(/cv2/img/cv2-hero-800.webp);
  --cv2-hero-shade: linear-gradient(90deg, rgba(251,247,240,.96) 0%, rgba(251,247,240,.86) 34%, rgba(251,247,240,.2) 64%, rgba(251,247,240,0) 80%);
  --cv2-hero-shade-s: linear-gradient(180deg, rgba(251,247,240,.25) 0%, rgba(251,247,240,.82) 46%, var(--ds-bg) 100%);
  color-scheme: light;
}
/* dark: lagoon night */
@media (prefers-color-scheme: dark) {
  html[data-cv2]:not([data-cv2-theme="light"]) {
    --ds-bg: #07171c; --ds-surface: #0e2228; --ds-surface-2: #142b32; --ds-surface-3: #1b353d;
    --ds-ink: #f4eee3; --ds-ink-2: #cdd7d6; --ds-ink-3: #9aacad;
    --ds-line: #213a41; --ds-line-2: #31505a;
    --ds-accent: #43c7b6; --ds-accent-2: #6ad6c8; --ds-on-accent: #032320; --ds-accent-soft: #10343a; --ds-accent-ink: #6ad6c8;
    --ds-sun: #ffc25c; --ds-on-sun: #2a1a00; --ds-sun-soft: #2e2716;
    --ds-coral: #ff8a68; --ds-coral-ink: #ff9b7c; --ds-coral-soft: #3a211b;
    --ds-focus: #6ad6c8; --ds-ok: #6fcf9a; --ds-warn: #f2b56b; --ds-danger: #ff8e7e;
    --ds-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
    --ds-shadow-2: 0 2px 6px rgba(0,0,0,.3), 0 22px 44px -24px rgba(0,0,0,.7);
    --ds-shadow-3: 0 30px 70px -30px rgba(0,0,0,.8);
    --ds-glass: rgba(7,23,28,.8); --ds-scrim: rgba(0,0,0,.6);
    --ds-hero-glow: radial-gradient(1200px 500px at 85% -10%, rgba(255,140,104,.16), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(67,199,182,.12), transparent 60%);
    --cv2-hero-img: url(/cv2/img/cv2-night-1600.webp);
    --cv2-hero-img-s: url(/cv2/img/cv2-night-800.webp);
    --cv2-hero-shade: linear-gradient(90deg, rgba(7,23,28,.95) 0%, rgba(7,23,28,.8) 34%, rgba(7,23,28,.2) 66%, rgba(7,23,28,0) 82%);
    --cv2-hero-shade-s: linear-gradient(180deg, rgba(7,23,28,.2) 0%, rgba(7,23,28,.8) 46%, var(--ds-bg) 100%);
    color-scheme: dark;
  }
}
html[data-cv2][data-cv2-theme="dark"] {
  --ds-bg: #07171c; --ds-surface: #0e2228; --ds-surface-2: #142b32; --ds-surface-3: #1b353d;
  --ds-ink: #f4eee3; --ds-ink-2: #cdd7d6; --ds-ink-3: #9aacad;
  --ds-line: #213a41; --ds-line-2: #31505a;
  --ds-accent: #43c7b6; --ds-accent-2: #6ad6c8; --ds-on-accent: #032320; --ds-accent-soft: #10343a; --ds-accent-ink: #6ad6c8;
  --ds-sun: #ffc25c; --ds-on-sun: #2a1a00; --ds-sun-soft: #2e2716;
  --ds-coral: #ff8a68; --ds-coral-ink: #ff9b7c; --ds-coral-soft: #3a211b;
  --ds-focus: #6ad6c8; --ds-ok: #6fcf9a; --ds-warn: #f2b56b; --ds-danger: #ff8e7e;
  --ds-shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -16px rgba(0,0,0,.6);
  --ds-shadow-2: 0 2px 6px rgba(0,0,0,.3), 0 22px 44px -24px rgba(0,0,0,.7);
  --ds-shadow-3: 0 30px 70px -30px rgba(0,0,0,.8);
  --ds-glass: rgba(7,23,28,.8); --ds-scrim: rgba(0,0,0,.6);
  --ds-hero-glow: radial-gradient(1200px 500px at 85% -10%, rgba(255,140,104,.16), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(67,199,182,.12), transparent 60%);
  --cv2-hero-img: url(/cv2/img/cv2-night-1600.webp);
  --cv2-hero-img-s: url(/cv2/img/cv2-night-800.webp);
  --cv2-hero-shade: linear-gradient(90deg, rgba(7,23,28,.95) 0%, rgba(7,23,28,.8) 34%, rgba(7,23,28,.2) 66%, rgba(7,23,28,0) 82%);
  --cv2-hero-shade-s: linear-gradient(180deg, rgba(7,23,28,.2) 0%, rgba(7,23,28,.8) 46%, var(--ds-bg) 100%);
  color-scheme: dark;
}
@media (min-width: 640px) { html[data-cv2] { --ds-gutter: 24px; } }
@media (prefers-reduced-motion: reduce) { html[data-cv2] { --ds-dur-1: 0ms; --ds-dur-2: 0ms; --ds-dur-3: 0ms; } }

/* ---------- 2. legacy tokens -> NET-DS (repaints every existing page at once) ---------- */
html[data-cv2], html[data-cv2] body, html[data-cv2] :root {
  --bg: var(--ds-bg); --panel: var(--ds-surface); --panel2: var(--ds-surface-2);
  --ink: var(--ds-ink); --ink2: var(--ds-ink-2); --muted: var(--ds-ink-3);
  --line: var(--ds-line); --line-strong: var(--ds-line-2); --chip: var(--ds-surface-2);
  --accent: var(--ds-accent); --accent-ink: var(--ds-on-accent); --accent-soft: var(--ds-accent-soft);
  --secondary: var(--ds-accent-ink); --secondary-soft: var(--ds-accent-soft); --warm: var(--ds-sun);
  --good: var(--ds-ok); --ok: var(--ds-ok); --warn: var(--ds-warn); --bad: var(--ds-danger);
  --shadow: rgba(12,40,48,.08); --hero: var(--ds-hero-glow), var(--ds-bg);
  --card-bg: var(--ds-surface); --card-radius: var(--ds-r-lg);
  --e-card: var(--ds-shadow-1); --e-raised: var(--ds-shadow-2); --e-overlay: var(--ds-shadow-3);
  --r-sm: var(--ds-r-sm); --r-md: var(--ds-r-md); --r-lg: var(--ds-r-lg);
  --rLift: 0px;
}

/* ---------- 3. base ---------- */
html[data-cv2] body {
  background: var(--ds-hero-glow), var(--ds-bg) !important;
  background-attachment: fixed !important;
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}
html[data-cv2] body > :is(.wrap, .xw) { background: transparent; }
html[data-cv2] :focus-visible { outline: 2px solid var(--ds-focus) !important; outline-offset: 2px; }
html[data-cv2] h1:not(.h2-hero h1) {
  font-family: var(--ds-font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.04;
  color: var(--ds-ink); font-size: var(--ds-fs-3xl);
}
html[data-cv2] h2 { font-family: var(--ds-font-display); font-weight: 600; color: var(--ds-ink); letter-spacing: -.005em; }
html[data-cv2] :is(.lede, .lead > p, .upd) { color: var(--ds-ink-2); font-size: var(--ds-fs-lg); line-height: 1.6; max-width: 44rem; }
html[data-cv2] ::selection { background: var(--ds-sun); color: var(--ds-on-sun); }
html[data-cv2] input:not([type=checkbox]):not([type=radio]), html[data-cv2] select, html[data-cv2] textarea {
  font-size: max(16px, 1em); background: var(--ds-surface); color: var(--ds-ink); border-color: var(--ds-line-2);
  border-radius: var(--ds-r-md);
}
html[data-cv2] input::placeholder, html[data-cv2] textarea::placeholder { color: var(--ds-ink-3); }

/* ---------- 4. header + tab bar ---------- */
.cv2-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--ds-ink); color: var(--ds-bg) !important; padding: 10px 14px; border-radius: 10px; }
.cv2-skip:focus { left: 8px; }
.cv2-hdr {
  position: sticky; top: 0; z-index: 900; height: var(--ds-header-h);
  background: var(--ds-glass); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--ds-line);
}
.cv2-hdr-row { max-width: var(--ds-maxw); margin: 0 auto; height: 100%; padding: 0 var(--ds-gutter); display: flex; align-items: center; gap: 18px; }
.cv2-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ds-ink) !important; flex: none; min-height: var(--ds-tap); }
.cv2-sun { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe08a, var(--ds-sun) 55%, var(--ds-coral) 100%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ds-sun) 22%, transparent); }
.cv2-word { font-family: var(--ds-font-display); font-weight: 700; font-size: 27px; letter-spacing: .01em; line-height: 1; }
.cv2-nav { display: none; gap: 2px; align-items: center; margin-left: 8px; }
.cv2-navlink { color: var(--ds-ink-2) !important; text-decoration: none; font: 500 14px/1 var(--ds-font-sans); padding: 15px 13px; border-radius: var(--ds-r-full); transition: background var(--ds-dur-1), color var(--ds-dur-1); white-space: nowrap; }
.cv2-navlink:hover { background: var(--ds-surface-2); color: var(--ds-ink) !important; }
.cv2-navlink[aria-current=page] { background: var(--ds-surface); color: var(--ds-ink) !important; box-shadow: inset 0 0 0 1px var(--ds-line-2); }
.cv2-hdr-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cv2-iconbtn, .cv2-hdr-end .h2-ib, .cv2-hdr-end .installbtn {
  width: 44px; height: 44px; min-width: 44px; display: inline-grid; place-items: center; border-radius: 50%;
  background: transparent; border: 1px solid var(--ds-line-2); color: var(--ds-ink); cursor: pointer; padding: 0; position: relative;
}
.cv2-hdr-end .installbtn { width: auto; padding: 0 12px; border-radius: var(--ds-r-full); font: 600 13px var(--ds-font-sans); }
.cv2-iconbtn svg, .cv2-hdr-end .h2-ib svg { width: 19px; height: 19px; }
.cv2-iconbtn:hover, .cv2-hdr-end .h2-ib:hover { background: var(--ds-surface-2); }
.cv2-i-moon { display: none; }
html[data-cv2-theme=dark] .cv2-i-sun { display: none; }
html[data-cv2-theme=dark] .cv2-i-moon { display: block; }
@media (prefers-color-scheme: dark) { html:not([data-cv2-theme=light]) .cv2-i-sun { display: none; } html:not([data-cv2-theme=light]) .cv2-i-moon { display: block; } }
.cv2-pill, .cv2-hdr-end .h2-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--ds-r-full);
  font: 600 14px/1 var(--ds-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--ds-line-2); background: transparent; color: var(--ds-ink) !important;
}
.cv2-pill-acc { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent) !important; }
.cv2-pill-acc:hover { background: var(--ds-accent-2); }
.cv2-pill-ghost:hover, .cv2-hdr-end .h2-btn:hover { background: var(--ds-surface-2); }
.cv2-hide-s { display: none; }
@media (min-width: 640px) { .cv2-hide-s { display: inline-flex; } }
@media (min-width: 1024px) { .cv2-nav { display: flex; } }
/* phones: the tab bar has "You", so the header drops Sign in and keeps the page's own buttons */
@media (max-width: 639px) {
  .cv2-hdr-end #cv2-acct { display: none; }
  .cv2-hdr-end .installbtn .ilabel { display: none; }
  .cv2-hdr-end .installbtn { width: 44px; padding: 0; border-radius: 50%; }
  .cv2-hdr-end .h2-btn { padding: 0 13px; }
  .cv2-hdr-row { gap: 10px; }
  .cv2-hdr-end { gap: 6px; }
}
@media (max-width: 359px) { .cv2-word { font-size: 21px; } .cv2-sun { width: 18px; height: 18px; } .cv2-hdr-row { padding: 0 12px; } }
@media (max-width: 380px) { .cv2-word { font-size: 23px; } .cv2-hdr-row { gap: 10px; } .cv2-hdr-end { gap: 6px; } .cv2-pill { padding: 0 12px; } }

.cv2-tabbar {
  position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; margin: 0 !important; z-index: 890; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--ds-glass); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  border-top: 1px solid var(--ds-line);
}
.cv2-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--ds-ink-3) !important; font: 600 11px/1 var(--ds-font-sans); min-height: var(--ds-tap); }
.cv2-tab svg { width: 22px; height: 22px; }
.cv2-tab[aria-current=page] { color: var(--ds-accent-ink) !important; }
.cv2-tab[aria-current=page] svg { stroke-width: 2.3; }
@media (min-width: 1024px) { .cv2-tabbar { display: none; } }
@media (max-width: 1023px) {
  html[data-cv2] body { padding-bottom: calc(var(--ds-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  html[data-cv2] { --rLift: var(--ds-tabbar-h); }
  html[data-cv2] .ca-fab { bottom: calc(var(--ds-tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* every page styles bare `nav` and its logo row as a sticky cream bar (with !important); V2's header is the only sticky bar */
html[data-cv2] .cv2-hdr, html[data-cv2] .cv2-tabbar { background: var(--ds-glass) !important; -webkit-backdrop-filter: saturate(160%) blur(16px) !important; backdrop-filter: saturate(160%) blur(16px) !important; }
html[data-cv2] .cv2-nav { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
html[data-cv2] nav:not(.cv2-nav):not(.cv2-tabbar):not(.jump), html[data-cv2] .wrap > .gnav, html[data-cv2] .wrap > .top, html[data-cv2] .h2-head {
  background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; position: static !important; min-height: 0 !important;
}
/* the page's own logo rows: the new header carries the logo, the page keeps its links */
html[data-cv2] :is(.top .homelink, .xtop > .brand, .gnav > .homelink, .c > .mark, a.homelink:has(> img.logoimg), a.mark:has(> img.logoimg)) { display: none !important; }
html[data-cv2] body > .cv2-hdr { justify-self: stretch; align-self: start; }
html[data-cv2] .top { justify-content: flex-end; border: 0; padding: 14px 0 0; margin: 0; background: none; }
html[data-cv2] .top:not(:has(> :not(.homelink))) { display: none; }
html[data-cv2] :is(.top .back, .top .home) { font: 600 14px var(--ds-font-sans); color: var(--ds-accent-ink); text-decoration: none; }
html[data-cv2] .xtop { justify-content: flex-start; padding: 14px 0 0; border: 0; background: none; }
html[data-cv2] .gnav { justify-content: flex-end; }
html[data-cv2] .h2-top { display: none !important; }

/* ---------- 5. shared components on existing pages ---------- */
html[data-cv2] :is(.wrap, .xw) { max-width: var(--ds-maxw); padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }
html[data-cv2] .crumb { font: 500 13px var(--ds-font-sans); color: var(--ds-ink-3); letter-spacing: .02em; }
html[data-cv2] .crumb a { color: var(--ds-ink-2); text-decoration: none; }
html[data-cv2] :is(.kick, .h2-eyebrow) { font: 700 12px/1.2 var(--ds-font-sans) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--ds-accent-ink) !important; }
html[data-cv2] :is(button, .btn, .h2-btn, .xbtn, .sharebtn, .go, .alt) { font-family: var(--ds-font-sans); }
html[data-cv2] :is(.xbtn, .sharebtn) {
  border-radius: var(--ds-r-full); border: 1px solid var(--ds-line-2); background: var(--ds-surface); color: var(--ds-ink) !important;
  min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none;
}
html[data-cv2] :is(.xbtn.pri, .cta .go, .pl-go, button.primary, .h2-btn.primary) {
  background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: var(--ds-on-accent) !important;
  border-radius: var(--ds-r-full) !important; box-shadow: none; background-image: none !important;
}
html[data-cv2] .cta .alt { border-radius: var(--ds-r-full) !important; border: 1px solid var(--ds-line-2) !important; background: var(--ds-surface) !important; color: var(--ds-ink) !important; }

/* chips: places / events country pills */
html[data-cv2] :is(.rg a, .jump a, .counts b, .near a, .tags i, .xfil a, .xfil button) {
  border-radius: var(--ds-r-full) !important; border: 1px solid var(--ds-line) !important; background: var(--ds-surface) !important;
  color: var(--ds-ink) !important; box-shadow: none !important; transition: border-color var(--ds-dur-1), transform var(--ds-dur-1);
}
html[data-cv2] :is(.rg a, .near a):hover { border-color: var(--ds-accent) !important; transform: translateY(-1px); }
html[data-cv2] .jump { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; padding: 12px !important; }
html[data-cv2] .counts b { font-weight: 700; }
html[data-cv2] .counts b i { color: var(--ds-ink-3); font-style: normal; font-weight: 500; }
html[data-cv2] .rg h2 { font-size: var(--ds-fs-2xl); }

/* link cards (place page "Where to stay" etc.) */
html[data-cv2] .lnks a, html[data-cv2] .blk .lnks > * {
  background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-shadow-1); transition: transform var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2), border-color var(--ds-dur-2);
}
html[data-cv2] .lnks a:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-2); border-color: var(--ds-accent) !important; }
html[data-cv2] .blk { border-top: 1px solid var(--ds-line); padding-top: 28px; margin-top: 28px; }
html[data-cv2] .blk h2 { font-size: var(--ds-fs-2xl); }

/* footers */
html[data-cv2] :is(.h2-foot, .site-foot, footer.sfoot) { background: #06161b !important; color: #d9e2e1; }
html[data-cv2] :is(.h2-foot, .site-foot) a { color: #f4eee3 !important; }
html[data-cv2] :is(.h2-foot, .site-foot) b { color: var(--ds-sun) !important; letter-spacing: .14em; }

/* ---------- 6. HOME ----------
   The hero stays a photograph with light type (the Ask kit is built for it); V2 swaps in the new
   lagoon art (golden hour in light mode, blue hour in dark), a lagoon-tinted shade and a cleaner composer. */
html[data-cv2] .h2-hero-ph { background: var(--cv2-hero-img) 70% 55% / cover no-repeat; }
html[data-cv2] .h2-hero-ph picture { display: none; }
html[data-cv2] .h2-hero::after {
  background: linear-gradient(100deg, rgba(4,30,36,.92) 0%, rgba(4,30,36,.8) 38%, rgba(4,30,36,.3) 66%, rgba(4,30,36,.05) 100%),
              linear-gradient(180deg, rgba(4,30,36,.45), transparent 30%),
              linear-gradient(0deg, rgba(4,30,36,.65), transparent 42%) !important;
}
html[data-cv2] .h2-hero h1 { font-weight: 600; }
html[data-cv2] .h2-askwrap {
  border-radius: var(--ds-r-xl) !important; background: rgba(4,30,36,.62) !important;
  border: 1px solid rgba(255,214,160,.32) !important;
  box-shadow: 0 0 0 6px rgba(245,178,58,.06), 0 30px 60px -20px rgba(0,0,0,.55) !important;
}
@media (max-width: 760px) {
  html[data-cv2] .h2-hero-ph { background-image: var(--cv2-hero-img-s); background-position: 72% center; }
  html[data-cv2] .h2-hero::after { background: linear-gradient(180deg, rgba(4,30,36,.8) 0%, rgba(4,30,36,.86) 42%, rgba(4,30,36,.95) 100%) !important; }
}html[data-cv2] .h2-sec { padding-top: 56px; }
html[data-cv2] .h2-sechead h2 { font-size: var(--ds-fs-2xl); }
html[data-cv2] :is(.h2-card, .w-esc-c) { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1) !important; overflow: hidden; }
html[data-cv2] :is(.h2-card, .w-esc-c):hover { box-shadow: var(--ds-shadow-2) !important; transform: translateY(-2px); }

/* cv2 home add-ons (built by cv2.js from links that already exist) */
.cv2-moods { max-width: var(--ds-maxw); margin: 0 auto; padding: 56px var(--ds-gutter) 8px; }
.cv2-sechead { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cv2-sechead .cv2-h2 { margin: 6px 0 0; font: 600 var(--ds-fs-2xl)/1.1 var(--ds-font-display); color: var(--ds-ink); letter-spacing: -.005em; }
.cv2-eyebrow { font: 700 12px/1.2 var(--ds-font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ds-accent-ink); }
.cv2-more { font: 600 14px var(--ds-font-sans); color: var(--ds-accent-ink) !important; text-decoration: none; white-space: nowrap; }
.cv2-mood-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .cv2-mood-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cv2-mood { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--ds-r-lg); overflow: hidden; text-decoration: none; color: #fff !important; box-shadow: var(--ds-shadow-1); background: var(--ds-surface-3); }
.cv2-mood img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-dur-3) var(--ds-ease); }
.cv2-mood:hover img { transform: scale(1.04); }
.cv2-mood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(4,18,22,.78) 100%); }
.cv2-mood span { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; }
.cv2-mood b { display: block; font: 600 clamp(20px, 2.2vw, 26px)/1.1 var(--ds-font-display); }
.cv2-mood i { display: block; font: 500 13px/1.35 var(--ds-font-sans); font-style: normal; opacity: .92; margin-top: 4px; }

.cv2-tools { max-width: var(--ds-maxw); margin: 0 auto; padding: 48px var(--ds-gutter) 8px; }
.cv2-tool-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .cv2-tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cv2-tool-grid { grid-template-columns: repeat(4, 1fr); } }
.cv2-tool { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--ds-r-lg); background: var(--ds-surface); border: 1px solid var(--ds-line); text-decoration: none; color: var(--ds-ink) !important; box-shadow: var(--ds-shadow-1); transition: transform var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2); }
.cv2-tool:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-2); }
.cv2-tool-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.cv2-tool-ic.sun { background: var(--ds-sun-soft); color: var(--ds-warn); }
.cv2-tool-ic.coral { background: var(--ds-coral-soft); color: var(--ds-coral-ink); }
.cv2-tool-ic svg { width: 24px; height: 24px; }
.cv2-tool b { display: block; font: 700 15px/1.3 var(--ds-font-sans); }
.cv2-tool span { display: block; font: 400 14px/1.45 var(--ds-font-sans); color: var(--ds-ink-3); margin-top: 3px; }

/* ---------- 7. PLACES index ---------- */
html[data-cv2] body:has(.rg) .wrap > h1 { margin-top: 18px; }
.cv2-banner { position: relative; border-radius: var(--ds-r-xl); overflow: hidden; min-height: 240px; margin: 18px 0 22px; display: flex; align-items: flex-end; box-shadow: var(--ds-shadow-2); background: var(--ds-surface-3); }
.cv2-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv2-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,18,22,.72), rgba(4,18,22,.1) 70%); }
.cv2-banner > div { position: relative; z-index: 1; padding: 26px; color: #fff; max-width: 34rem; }
.cv2-banner .cv2-eyebrow { color: var(--ds-sun) !important; }
.cv2-banner h1 { color: #fff !important; margin: 8px 0 8px; font-size: clamp(38px, 5.5vw, 64px); }
.cv2-banner p, html[data-cv2] .cv2-banner .lede { margin: 0; font: 400 16px/1.55 var(--ds-font-sans); color: #eef3f2 !important; max-width: 36rem; }
.cv2-banner::after { background: linear-gradient(90deg, rgba(4,18,22,.86) 0%, rgba(4,18,22,.62) 50%, rgba(4,18,22,.18) 100%) !important; }
@media (max-width: 639px) { .cv2-banner .lede { font-size: 15px; } .cv2-banner > div { padding: 20px; } }

/* ---------- 8. PLACE page ---------- */
html[data-cv2] .hero.shot { border-radius: var(--ds-r-xl) !important; overflow: hidden; box-shadow: var(--ds-shadow-2); }
html[data-cv2] .hero.shot figcaption h1 { color: #fff !important; font-size: clamp(44px, 7vw, 80px); }
html[data-cv2] .score { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-1); }
html[data-cv2] .score > b { font-family: var(--ds-font-display); color: var(--ds-accent-ink) !important; }
html[data-cv2] .facts > div { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-lg) !important; }
html[data-cv2] .facts b { font-family: var(--ds-font-display); color: var(--ds-ink) !important; }
html[data-cv2] .strip .day { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-md) !important; color: var(--ds-ink); }
html[data-cv2] .strip .day b { color: var(--ds-ink) !important; }
html[data-cv2] .strip .day :is(u, s) { color: var(--ds-ink-3) !important; }

/* ---------- 9. PRICING ---------- */
html[data-cv2] .lead h1 { margin-top: 18px; }
html[data-cv2] .pl { background: var(--ds-surface) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-xl) !important; box-shadow: var(--ds-shadow-1) !important; }
html[data-cv2] .pl.pop { border: 2px solid var(--ds-accent) !important; box-shadow: var(--ds-shadow-3) !important; background: var(--ds-surface) !important; }
html[data-cv2] .pl-flag { background: var(--ds-sun) !important; color: var(--ds-on-sun) !important; border-radius: var(--ds-r-full) !important; }
html[data-cv2] .pl-price { font-family: var(--ds-font-display); color: var(--ds-ink) !important; }
html[data-cv2] .pl-hero { background: var(--ds-surface-2) !important; border-radius: var(--ds-r-md) !important; }
html[data-cv2] .pl-hero b { color: var(--ds-accent-ink) !important; }
html[data-cv2] .pl-soon { background: var(--ds-surface-3) !important; color: var(--ds-ink-2) !important; border-radius: var(--ds-r-full) !important; background-image: none !important; border: 0 !important; }
html[data-cv2] .codebox { background: var(--ds-surface-2) !important; border: 1px solid var(--ds-line) !important; border-radius: var(--ds-r-xl) !important; }
html[data-cv2] .faq :is(summary, h3) { font-family: var(--ds-font-sans); }

/* ---------- 10. newsletter band (every page) ---------- */
html[data-cv2] .nl-band { background: var(--ds-surface-2) !important; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); color: var(--ds-ink) !important; }
html[data-cv2] .nl-band h2 { color: var(--ds-ink) !important; }
html[data-cv2] .nl-band p { color: var(--ds-ink-2) !important; }
html[data-cv2] .nl-band button { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border-color: var(--ds-accent) !important; }

/* ---------- 11. account / sign in ---------- */
html[data-cv2] body > div > .c { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-xl); box-shadow: var(--ds-shadow-2); margin-top: 28px; }

/* ---------- 12. fixes from the e2e contrast/overflow pass ---------- */
html[data-cv2] .h2-badge { background: #c2331f !important; color: #fff !important; }
html[data-cv2] :is(.pl-perks li.no i, li.no > i) { color: var(--ds-ink-3) !important; }
html[data-cv2] .pl-go.ghost { background: transparent !important; color: var(--ds-ink) !important; border: 1px solid var(--ds-line-2) !important; }
html[data-cv2] .pl-buy { background: none !important; }
/* footers and the dark callout under legal pages are always dark: light text on them, in both themes */
html[data-cv2] .cv2-darkfoot { color: #cfdad9 !important; }
html[data-cv2] .cv2-darkfoot a:not(.cv2-pill):not([class*="share"]) { color: #f4eee3 !important; }
html[data-cv2] .cv2-darkfoot :is(h2, h3, h4, b, strong) { color: #f4eee3; }
/* classic view chips (hard-coded white) */
html[data-cv2] .wf-chip { background: var(--ds-surface) !important; color: var(--ds-ink) !important; border-color: var(--ds-line-2) !important; }
html[data-cv2] .wf-chip:has(input:checked) { background: var(--ds-accent-soft) !important; border-color: var(--ds-accent) !important; }html[data-cv2] .cv2-hdr.cv2-hdr-fixed { position: fixed !important; top: 0; left: 0; right: 0; width: auto; margin: 0; }
html[data-cv2] .cv2-hdr-end [hidden] { display: none !important; }
/* Turnstile "human check could not finish" hint (TS2-1014) is inline-coloured for a light card */
html[data-cv2] [style*="180, 35, 24"], html[data-cv2] [style*="b42318"], html[data-cv2] [style*="B42318"] { color: var(--ds-danger) !important; }
@media (max-width: 359px) { .cv2-hdr-row { gap: 6px; } .cv2-hdr-end { gap: 4px; } .cv2-hdr-end .h2-btn { padding: 0 10px; } }/* the home hero keeps its own light-on-photo type (gradient h1), whatever the theme */
html[data-cv2] .h2-hero .h2-eyebrow { color: #ffc25c !important; }
html[data-cv2] .h2-hero .h2-eyebrow::before { background: #ffc25c !important; }
html[data-cv2] .h2-hero h1 { font-family: var(--ds-font-display); }

/* =================== v2.1 (2026-10-15): simpler home, Ask explainer, card images, CLS =================== */
/* header text uses the optional-display copies of the fonts: no late reflow (CLS) */
.cv2-word { font-family: 'cv2 Display', 'Cormorant Garamond', Georgia, serif; }
.cv2-navlink, .cv2-pill, .cv2-tab, .cv2-hdr-end .h2-btn { font-family: 'cv2 Sans', 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important; }
@media (min-width: 1024px) and (max-width: 1180px) { .cv2-navlink { padding-left: 9px; padding-right: 9px; } .cv2-hide-s { display: none; } }

/* HOME: hero + one Ask box, then three short sections. The rest moved (Tools sheet, /tools, /how-it-works). */
html[data-cv2-page=home] :is(main .h2-sec, .g-story, .h2-welcome, .w-badges, .h2-hero .lead2, .h2-hero .lead-q) { display: none !important; }
html[data-cv2-page=home] .h2-hero { min-height: 0 !important; align-items: flex-start !important; }
html[data-cv2-page=home] .h2-hero-in { padding-top: clamp(28px, 6vh, 64px) !important; padding-bottom: 36px !important; }
html[data-cv2-page=home] .h2-hero .h2-eyebrow { text-transform: none !important; letter-spacing: .06em !important; font-size: 14px !important; }
html[data-cv2-page=home] .h2-hero p.lead { font-size: clamp(17px, 1.6vw, 20px) !important; font-weight: 400 !important; margin: 0 0 18px !important; max-width: 34ch; color: #f4eee3 !important; }
html[data-cv2-page=home] .h2-hero .h2-note { font-size: 13px; opacity: .9; }
/* the Ask kit mounts after load: reserve its measured height (v2.1 chips) so nothing below it jumps */
html[data-cv2-page=home] .h2-ask { min-height: 424px; }
@media (max-width: 479px) { html[data-cv2-page=home] .h2-ask { min-height: 459px; } }
@media (max-width: 400px) { html[data-cv2-page=home] .h2-ask { min-height: 476px; } }
@media (max-width: 359px) { html[data-cv2-page=home] .h2-ask { min-height: 521px; } }
.cv2-howbtn { background: rgba(255,194,92,.16) !important; border-color: rgba(255,194,92,.55) !important; color: #ffe2a8 !important; }
.cv2-sechead { align-items: center; }
.cv2-sechead-end { display: flex; align-items: center; gap: 12px; flex: none; }
.cv2-ask { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--ds-r-full); border: 1px solid var(--ds-line-2); background: var(--ds-surface); color: var(--ds-ink); font: 600 14px var(--ds-font-sans); cursor: pointer; }
.cv2-ask span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-accent); color: var(--ds-on-accent); font-size: 12px; font-weight: 800; }
.cv2-ask:hover { border-color: var(--ds-accent); }
.cv2-how, .cv2-escapes { max-width: var(--ds-maxw); margin: 0 auto; padding: 40px var(--ds-gutter) 8px; }
.cv2-moods { padding-top: 40px; }
.cv2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .cv2-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.cv2-steps li { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-1); }
.cv2-steps li b { font: 700 16px/1.3 var(--ds-font-sans); color: var(--ds-ink); }
.cv2-steps li > span:last-child { grid-column: 2; font: 400 14px/1.45 var(--ds-font-sans); color: var(--ds-ink-3); }
.cv2-step-ic { grid-row: span 2; position: relative; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ds-sun-soft); color: var(--ds-warn); }
.cv2-steps li:nth-child(2) .cv2-step-ic { background: var(--ds-accent-soft); color: var(--ds-accent-ink); }
.cv2-steps li:nth-child(3) .cv2-step-ic { background: var(--ds-coral-soft); color: var(--ds-coral-ink); }
.cv2-step-ic svg { width: 26px; height: 26px; }
.cv2-step-ic i { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--ds-ink); color: var(--ds-bg); font: 800 12px/22px var(--ds-font-sans); text-align: center; font-style: normal; }
.cv2-esc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .cv2-esc-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.cv2-esc { display: flex; flex-direction: column; border-radius: var(--ds-r-lg); overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); text-decoration: none; color: var(--ds-ink) !important; transition: transform var(--ds-dur-2) var(--ds-ease), box-shadow var(--ds-dur-2); }
.cv2-esc:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-2); }
.cv2-esc-ph { display: block; aspect-ratio: 3 / 2; background: linear-gradient(135deg, #0a736d, #f5b23a); }
.cv2-esc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv2-esc-tx { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; min-height: 92px; }
.cv2-esc-tx b { font: 600 20px/1.15 var(--ds-font-display); }
.cv2-esc-tx i { font: 500 13px var(--ds-font-sans); font-style: normal; color: var(--ds-ink-3); }
.cv2-esc-wx { font: 600 13px/1.4 var(--ds-font-sans); font-style: normal; color: var(--ds-accent-ink); margin-top: 4px; }
.cv2-esc-wx .p { color: var(--ds-coral-ink); }
/* guided starts, moved into the Tools sheet */
.h2-tools .cv2-guided { margin: 8px 0 16px; padding: 0 !important; }
.h2-tools .cv2-guided .h2-cards { grid-template-columns: repeat(2, 1fr) !important; }

/* Ask Coconut: the explainer is always one tap away */
html[data-cv2] .ca-fab { background: var(--ds-accent) !important; color: var(--ds-on-accent) !important; border-color: var(--ds-accent) !important; box-shadow: 0 14px 34px -14px rgba(10,115,109,.7) !important; min-height: 50px !important; font-weight: 700 !important; }
/* "What's new" card: a compact toast that never covers the page */
html[data-cv2] body > div[role="status"][style*="translateX(-50%)"] {
  width: min(360px, calc(100vw - 24px)) !important; padding: 10px 12px !important; font-size: 13px !important; line-height: 1.4 !important; border-radius: 14px !important;
  bottom: calc(var(--rLift, 0px) + 78px) !important;
}
html[data-cv2] body > div[role="status"][style*="translateX(-50%)"] > b { font-size: 1.05rem !important; }
html[data-cv2] body > div[role="status"][style*="translateX(-50%)"] > span:first-of-type:not(:last-child) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-cv2] body > div[role="status"][style*="translateX(-50%)"] > span:last-child { margin-top: 6px !important; }
html[data-cv2] body > div[role="status"][style*="translateX(-50%)"] > span:last-child > * { min-height: 36px !important; }

/* PLACE PAGES: every card gets a picture. The box is reserved by CSS from first paint (no shift);
   cv2.js only sets --cv2-ci. Without an image (or before it loads) the card shows the lagoon-to-sun gradient. */
html[data-cv2] .lnks a { padding: 0 14px 14px !important; overflow: hidden; display: flex !important; flex-direction: column; }
html[data-cv2] .lnks a::before { content: ""; display: block; aspect-ratio: 16 / 9; margin: 0 -14px 10px; background: var(--cv2-ci, none) center / cover no-repeat, linear-gradient(135deg, #0a736d 0%, #43c7b6 45%, #f5b23a 100%); }
html[data-cv2] .near { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
html[data-cv2] .near a { display: block !important; padding: 0 12px 10px !important; border-radius: var(--ds-r-md) !important; overflow: hidden; font-weight: 600; }
html[data-cv2] .near a::before { content: ""; display: block; aspect-ratio: 3 / 2; margin: 0 -12px 8px; background: var(--cv2-ci, none) center / cover no-repeat, linear-gradient(135deg, #0a736d, #f5b23a); }
/* any destination photo that fails to load: a painted card instead of a hole */
.cv2-imgfail { background: linear-gradient(135deg, #0a736d 0%, #43c7b6 45%, #f5b23a 100%) !important; position: relative; }
.cv2-imgfail::after { content: attr(data-cv2-name); position: absolute; left: 10px; bottom: 8px; color: #fff; font: 600 15px/1.2 var(--ds-font-display); text-shadow: 0 1px 6px rgba(0,0,0,.35); }
img.cv2-hide { visibility: hidden !important; }/* header geometry does not depend on font metrics (a late font can't move it: CLS) */
.cv2-logo { width: 136px; }
@media (max-width: 359px) { .cv2-logo { width: 118px; } }
.cv2-navlink { text-align: center; }
.cv2-nav a[href="/"] { width: 52px; } .cv2-nav a[href="/places"] { width: 72px; } .cv2-nav a[href="/map"] { width: 112px; }
.cv2-nav a[href="/plan"] { width: 62px; } .cv2-nav a[href="/tools"] { width: 62px; } .cv2-nav a[href="/how-it-works"] { width: 116px; } .cv2-nav a[href="/help"] { width: 58px; }
@media (min-width: 1024px) and (max-width: 1180px) { .cv2-nav a { padding-left: 4px !important; padding-right: 4px !important; } }
.cv2-hdr-end .cv2-pill-ghost { width: 128px; } .cv2-hdr-end #cv2-acct { min-width: 92px; } .cv2-hdr-end #h2-tools-btn { width: 72px; justify-content: center; }/* the Ask Coconut sheet and the Tools sheet sit above the V2 header and tab bar */
html[data-cv2] .ca-wrap { z-index: 1000 !important; }
html[data-cv2] .h2-tools { z-index: 1000 !important; }
.cv2-hdr, .cv2-hdr *, .cv2-tabbar, .cv2-tabbar *, .cv2-how *, .cv2-moods *, .cv2-escapes * { box-sizing: border-box; }
html[data-cv2] .ca-fab i { color: inherit !important; opacity: .9; }
/* phones: picture cards stay short (thumbnail left, text right) so a place page is not a wall */
@media (max-width: 639px) {
  html[data-cv2] .lnks a { display: grid !important; grid-template-columns: 76px 1fr; column-gap: 12px; align-items: center; padding: 10px !important; min-height: 96px; }
  html[data-cv2] .lnks a::before { grid-row: 1 / span 3; width: 76px; height: 76px; aspect-ratio: auto; margin: 0; border-radius: 12px; }
  html[data-cv2] .lnks a > * { grid-column: 2; }
}