:root{
    /* LIGHT THEME (default) — light teal, distinctive coastal identity */
    --bg:#dceff0;
    --bg-2:#ffffff;
    --bg-3:#f4fbfb;
    --navy:#0a2540;
    --teal:#0b6976;
    --teal-bright:#0b6976;
    --coral:#e2532b;
    --coral-deep:#b83e18;
    --amber:#c88a1a;
    --ink:#0a2540;
    --muted:#4a6373;
    --muted-soft:#7a8f9c;
    --line:rgba(10,37,64,.10);
    --line-2:rgba(10,37,64,.18);
    --yellow:#ffd24d;
    --red:#d94434;
    --white:#ffffff;
    --blue:#2c74d4;
    --orange:#d67420;
    --nav-bg:rgba(220,239,240,.90);
    --nav-cta-fg:#ffffff;
    --footer-bg:#c9e0e2;
    --inner-card-bg:rgba(255,255,255,.7);
    --emphasis-fg:#0a2540;
    --safety-accent:#b83e18;
    --info-accent:#0b6976;
    --regulation-accent:#8a5c0e;
    --italic-accent:#c76419;
    --coral-tint:rgba(226,83,43,.09);
    --coral-tint-border:rgba(226,83,43,.30);
    --teal-tint:rgba(11,105,118,.08);
    --teal-tint-border:rgba(11,105,118,.30);
    --amber-tint:rgba(200,138,26,.12);
    --amber-tint-border:rgba(200,138,26,.36);
    --display:'Fraunces',Georgia,serif;
    --body:'Archivo',system-ui,sans-serif;
    --shadow-sm:0 1px 2px rgba(10,37,64,.08), 0 2px 8px rgba(10,37,64,.05);
    --shadow-md:0 8px 24px rgba(10,37,64,.11), 0 20px 50px rgba(10,37,64,.07);
    --shadow-lg:0 24px 70px rgba(10,37,64,.18);
  }

  /* DARK THEME (opt-in via toggle) — softer than near-black */
  [data-theme="dark"]{
    --bg:#152238;
    --bg-2:#1e2c44;
    --bg-3:#28374f;
    --navy:#1a3358;
    --teal:#1aa4b3;
    --teal-bright:#2cc5d6;
    --coral:#ff6a3d;
    --coral-deep:#e2532b;
    --amber:#f5b94a;
    --ink:#eef3f9;
    --muted:#a6b6c8;
    --muted-soft:#7c8fa3;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16);
    --yellow:#ffd24d;
    --red:#ff5a4d;
    --white:#f5f5f5;
    --blue:#5aa3ff;
    --orange:#ff9d3d;
    --nav-bg:rgba(21,34,56,.82);
    --nav-cta-fg:#ffffff;
    --footer-bg:#0e1a2d;
    --inner-card-bg:rgba(10,18,32,.3);
    --emphasis-fg:#d4dee8;
    --safety-accent:#ff9d7b;
    --info-accent:#2cc5d6;
    --regulation-accent:#ffd089;
    --italic-accent:#ffd089;
    --coral-tint:rgba(255,106,61,.08);
    --coral-tint-border:rgba(255,106,61,.28);
    --teal-tint:rgba(44,197,214,.06);
    --teal-tint-border:rgba(44,197,214,.28);
    --amber-tint:rgba(245,185,74,.08);
    --amber-tint-border:rgba(245,185,74,.32);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
    --shadow-md:0 8px 24px rgba(0,0,0,.32), 0 20px 50px rgba(0,0,0,.24);
    --shadow-lg:0 24px 70px rgba(0,0,0,.42);
  }

  /* Smooth transition when switching themes */
  html, body, header, footer, .article-content, .mooring-guide, .mooring-item,
  .steps, .callout, .sidebar-toc, .sidebar-related, .ask-cta, .bot, .note-band,
  .nav-cta, .nav-search, .theme-toggle, section, .learn-card, .helpful-item,
  .place, .place-body, .place-meta, .filter-bar, .chip, .filter-search input,
  .cat-hero, .prem-ad, .grid-house-ad, .app-cta, .helpful, .ask, .ask-input,
  .quick, .quick div, .quick-item, .fact, .about-side, .prompt-chip, .search-hero{
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:var(--bg)}
  body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1240px;margin:0 auto;padding:0 28px}
  h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;letter-spacing:-.01em}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em}
  .logo .dot{width:13px;height:13px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,106,61,.22), 0 0 20px rgba(255,106,61,.5)}
  nav.links{display:flex;align-items:center;gap:30px}
  nav.links a{font-weight:500;font-size:.95rem;color:var(--emphasis-fg);transition:color .2s}
  nav.links a.current{color:var(--ink)}
  nav.links a:hover{color:var(--ink)}
  .nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-weight:600;font-size:.92rem;padding:11px 20px;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s, background .2s}
  .nav-cta:hover{background:var(--coral-deep);transform:translateY(-1px)}
  .nav-search{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--emphasis-fg);background:transparent;cursor:pointer;transition:background .2s}
  .nav-search:hover{background:rgba(255,255,255,.06)}

  /* BREADCRUMB */
  .crumb{padding:22px 0 0;font-size:.86rem;color:var(--muted-soft)}
  .crumb a{color:var(--muted);transition:color .2s}
  .crumb a:hover{color:var(--ink)}
  .crumb .sep{margin:0 8px;color:var(--muted-soft);opacity:.6}
  .crumb .current{color:var(--emphasis-fg)}

  /* ISLAND HERO — full-bleed style */
  .island-hero{position:relative;margin-top:22px;border-radius:26px;overflow:hidden;min-height:520px;display:flex;align-items:flex-end;box-shadow:var(--shadow-lg)}
  .island-hero-bg{position:absolute;inset:0;background:
      linear-gradient(180deg, rgba(6,24,41,.15) 0%, rgba(6,24,41,.3) 45%, rgba(6,24,41,.9) 100%),
      url('https://boatyball.com/assets/img/top-destination/Virgin-Gorda.png') center/cover no-repeat}
  .island-hero-content{position:relative;z-index:2;padding:56px 52px;color:var(--ink);width:100%}
  .island-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--regulation-accent);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:7px 15px;border-radius:999px;backdrop-filter:blur(4px)}
  .island-eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,74,.25), 0 0 14px rgba(245,185,74,.5)}
  .island-hero-content h1{font-size:clamp(2.6rem,5.2vw,4.2rem);margin:18px 0 12px;font-weight:600;letter-spacing:-.02em;max-width:18ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}
  .island-hero-content h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .island-hero-content p.island-lede{font-size:1.15rem;max-width:56ch;color:rgba(255,255,255,.9)}
  .island-facts{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
  .ifact{background:var(--inner-card-bg);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 20px;display:flex;gap:14px;align-items:center;min-width:200px}
  .ifact .fi{font-size:1.4rem;line-height:1;flex:0 0 auto}
  .ifact .fl{color:rgba(255,255,255,.6);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
  .ifact .fv{color:var(--ink);font-size:1rem;font-weight:500;line-height:1.15}
  .ifact .fv b{color:var(--ink)}

  /* SECTIONS */
  section{padding:52px 0}
  .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:24px;flex-wrap:wrap}
  .sec-h h1,.sec-h h2{font-size:clamp(1.6rem,2.6vw,2rem);color:var(--ink)}
  .sec-h h1 em,.sec-h h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .sec-h p{color:var(--muted);font-size:.95rem;margin-top:4px;max-width:56ch}
  .sec-h .sec-count{color:var(--muted-soft);font-size:.9rem;white-space:nowrap}

  /* PREMIUM AD SLOT */
  .prem-ad{background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line-2);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;box-shadow:var(--shadow-md)}
  .prem-ad-img{position:relative;overflow:hidden;min-height:280px}
  .prem-ad-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
  .prem-ad-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,rgba(12,24,40,.6) 100%)}
  .prem-ad-body{padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
  .prem-ad-tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--regulation-accent);margin-bottom:12px}
  .prem-ad-tag::before{content:'★';color:var(--amber)}
  .prem-ad h3{font-family:var(--display);font-weight:600;font-size:1.55rem;color:var(--ink);margin-bottom:8px;line-height:1.15}
  .prem-ad .loc{color:var(--teal-bright);font-size:.82rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:6px}
  .prem-ad p{color:var(--muted);font-size:.95rem;margin-bottom:20px;line-height:1.55}
  .prem-ad .btn-p{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--coral);color:#fff;font-weight:600;font-size:.9rem;transition:background .2s, transform .2s;width:fit-content}
  .prem-ad .btn-p:hover{background:var(--coral-deep);transform:translateY(-2px)}

  /* BAYS GRID — the workhorse section */
  .bays-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .bay-card{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/11;color:var(--ink);cursor:pointer;isolation:isolate;border:1px solid var(--line);transition:transform .25s, border-color .25s}
  .bay-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .bay-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .bay-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,24,0) 30%,rgba(7,14,24,.94) 100%);z-index:1}
  .bay-card:hover img{transform:scale(1.06)}
  .bay-card .cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
  .bay-card .bay-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22);color:var(--ink);font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:14px}
  .bay-card h3{font-family:var(--display);font-weight:600;font-size:1.65rem;line-height:1.15;text-shadow:0 1px 12px rgba(0,0,0,.45)}
  .bay-card p{color:rgba(255,255,255,.85);font-size:.94rem;margin-top:6px;max-width:36ch;line-height:1.45}
  .bay-card .bay-meta{margin-top:14px;display:flex;gap:14px;flex-wrap:wrap;color:rgba(255,255,255,.75);font-size:.8rem}
  .bay-card .bay-meta span{display:inline-flex;align-items:center;gap:5px}

  /* HIGHLIGHTS row — the "best of" cross-section */
  .hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .hl-card{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .25s, border-color .25s;display:flex;flex-direction:column}
  .hl-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
  .hl-card-main{color:inherit;text-decoration:none;flex:1;display:block}
  .hl-img{position:relative;aspect-ratio:16/10;overflow:hidden}
  .hl-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .hl-card:hover .hl-img img{transform:scale(1.05)}
  .hl-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%)}
  .hl-cat{position:absolute;top:10px;left:10px;z-index:2;background:rgba(7,14,24,.72);backdrop-filter:blur(6px);color:var(--regulation-accent);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}
  .hl-body{padding:14px 16px 16px}
  .hl-body h3{font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.15;margin-bottom:4px}
  .hl-body .hbay{color:var(--teal-bright);font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}

  /* ABOUT NARRATIVE */
  .about{display:grid;grid-template-columns:1.4fr 1fr;gap:36px;align-items:start}
  .about-body{color:var(--muted);font-size:1.02rem;line-height:1.65}
  .about-body p{margin-bottom:16px}
  .about-body p:last-child{margin-bottom:0}
  .about-body b{color:var(--emphasis-fg)}
  .about-side{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:26px 28px}
  .about-side h3{font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:14px;display:flex;align-items:center;gap:9px}
  .about-side ul{list-style:none;display:flex;flex-direction:column;gap:11px}
  .about-side li{display:flex;gap:12px;font-size:.94rem;color:var(--emphasis-fg)}
  .about-side li .ck{flex:0 0 auto;color:var(--teal-bright);font-weight:700;font-size:.9rem;margin-top:3px}

  /* NEARBY ISLANDS */
  .nearby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .nearby{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;color:var(--ink);transition:transform .25s, border-color .25s;border:1px solid var(--line)}
  .nearby img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
  .nearby::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,14,24,.9) 100%);z-index:1}
  .nearby:hover img{transform:scale(1.05)}
  .nearby:hover{border-color:var(--line-2)}
  .nearby .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}
  .nearby .ct{font-family:var(--display);font-weight:600;font-size:1.15rem;line-height:1.15;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .nearby .cs{font-size:.8rem;color:rgba(255,255,255,.75);margin-top:2px}

  /* APP LOOP CTA */
  .app-cta{background:linear-gradient(135deg, var(--coral-tint), rgba(226,83,43,.05));border: 1px solid var(--coral-tint-border);border-radius:22px;padding:44px 40px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden}
  .app-cta::before{content:'';position:absolute;left:-100px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, var(--coral-tint) 0%, transparent 65%);pointer-events:none}
  .app-cta::after{content:'';position:absolute;right:-100px;bottom:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.12) 0%, transparent 65%);pointer-events:none}
  .app-cta > *{position:relative;z-index:1}
  .app-cta h2{font-size:clamp(1.5rem,2.6vw,2rem);color:var(--ink);margin-bottom:8px}
  .app-cta h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .app-cta p{color:rgba(255,255,255,.85);max-width:52ch;font-size:1rem}
  .app-cta a{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;font-weight:600;padding:14px 26px;border-radius:999px;box-shadow:var(--glow-coral);white-space:nowrap;font-size:1rem;transition:background .2s, transform .2s}
  .app-cta a:hover{background:var(--coral-deep);transform:translateY(-2px)}

  /* FOOTER */
  footer{background:var(--footer-bg);color:var(--muted);padding:56px 0 26px;margin-top:20px;border-top:1px solid var(--line)}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line)}
  .foot-brand .logo{color:var(--ink);margin-bottom:14px}
  .foot-brand p{font-size:.94rem;max-width:32ch}
  footer h4{color:var(--ink);font-family:var(--body);font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  footer ul a{font-size:.93rem;transition:color .2s}
  footer ul a:hover{color:var(--ink)}
  .foot-bottom{padding-top:24px;display:flex;justify-content:space-between;font-size:.84rem;flex-wrap:wrap;gap:10px;color:var(--muted-soft)}

  /* AI BOT */
  .bot{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);border-radius:999px;padding:10px 18px 10px 12px;cursor:pointer;transition:transform .2s}
  .bot:hover{transform:translateY(-3px)}
  .bot .ba{width:42px;height:42px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:1.3rem;position:relative}
  .bot .ba::after{content:'';position:absolute;right:1px;bottom:1px;width:11px;height:11px;border-radius:50%;background:#3ddc84;border:2px solid var(--bg-2)}
  .bot .bt b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);font-size:1rem;line-height:1.1}
  .bot .bt span{font-size:.78rem;color:var(--muted)}

  /* MOCKUP BANNER */
  .note{max-width:1240px;margin:0 auto;padding:0 28px}
  .note-band{background:var(--amber-tint);border:1px dashed rgba(245,185,74,.4);border-radius:14px;padding:14px 20px;font-size:.9rem;color:var(--regulation-accent);display:flex;gap:10px;align-items:flex-start}
  .note-band b{color:var(--emphasis-fg)}

  @media(max-width:1080px){
    .prem-ad{grid-template-columns:1fr}
    .prem-ad-img{min-height:220px}
    .bays-grid{grid-template-columns:1fr}
    .hl-grid{grid-template-columns:repeat(2,1fr)}
    .about{grid-template-columns:1fr}
    .nearby-grid{grid-template-columns:1fr 1fr}
    .island-hero-content{padding:40px 30px}
  }
  @media(max-width:720px){
    .hl-grid{grid-template-columns:1fr}
    .nearby-grid{grid-template-columns:1fr}
    .app-cta{grid-template-columns:1fr}
    .island-hero{min-height:440px}
    .island-facts .ifact{min-width:100%}
    nav.links{display:none}
  }

  /* Theme toggle — sun/moon in nav */
  .theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s, transform .2s;font-size:1.05rem;position:relative;overflow:visible}
  .theme-toggle:hover{transform:translateY(-1px)}
  html:not([data-theme="dark"]) .theme-toggle:hover{background:rgba(10,37,64,.06)}
  [data-theme="dark"] .theme-toggle:hover{background:rgba(255,255,255,.06)}
  .theme-toggle .icon-sun,.theme-toggle .icon-moon{transition:opacity .3s ease, transform .3s ease;position:absolute;line-height:1}
  .theme-toggle .icon-sun{opacity:0;transform:rotate(-40deg) scale(.7)}
  .theme-toggle .icon-moon{opacity:1;transform:rotate(0) scale(1)}
  [data-theme="dark"] .theme-toggle .icon-sun{opacity:1;transform:rotate(0) scale(1)}
  [data-theme="dark"] .theme-toggle .icon-moon{opacity:0;transform:rotate(40deg) scale(.7)}
  @keyframes hint-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(226,83,43,0); }
    50% { box-shadow: 0 0 0 6px rgba(226,83,43,.32); }
  }
  .theme-toggle.hint{animation:hint-pulse 1.5s ease-out 2}


  /* ---------- LIGHT THEME FIXES ---------- */
  html:not([data-theme="dark"]) .app-cta p,
  html:not([data-theme="dark"]) .safety p,
  html:not([data-theme="dark"]) .safety .scard p,
  html:not([data-theme="dark"]) .aeromd-head p,
  html:not([data-theme="dark"]) .aeromd-step p,
  html:not([data-theme="dark"]) .aeromd-note p,
  html:not([data-theme="dark"]) .join-cta p,
  html:not([data-theme="dark"]) .advres-left .adv-lede,
  html:not([data-theme="dark"]) .advres-fine,
  html:not([data-theme="dark"]) .advres-req,
  html:not([data-theme="dark"]) .advres-price .u,
  html:not([data-theme="dark"]) .advres-price-note,
  html:not([data-theme="dark"]) .adv-points li span,
  html:not([data-theme="dark"]) .hero p.lede,
  html:not([data-theme="dark"]) .hero-scroll,
  html:not([data-theme="dark"]) .cat-hero-inner p,
  html:not([data-theme="dark"]) .prem-ad p,
  html:not([data-theme="dark"]) .grid-house-ad p,
  html:not([data-theme="dark"]) .briefing p,
  html:not([data-theme="dark"]) .home-brief p,
  html:not([data-theme="dark"]) .top-slot p,
  html:not([data-theme="dark"]) .brief-ad p,
  html:not([data-theme="dark"]) .prem-ad-body p{
    color:var(--muted) !important;
  }

  html:not([data-theme="dark"]) .safety .scard{
    border-color:var(--line-2) !important;
  }
  html:not([data-theme="dark"]) .safety .scard .tip{
    border-top-color:var(--line) !important;
  }

  html:not([data-theme="dark"]) .safety h2,
  html:not([data-theme="dark"]) .safety .scard h3{
    color:var(--ink) !important;
  }

  html:not([data-theme="dark"]) .foot-brand p,
  html:not([data-theme="dark"]) footer p{
    color:var(--muted) !important;
  }

  html:not([data-theme="dark"]) .brief-ad,
  html:not([data-theme="dark"]) .top-slot{
    color:var(--ink);
  }


  /* ===== ISLANDS INDEX — page specific ===== */
  .isle-intro{padding:34px 0 6px;max-width:60ch}
  .isle-intro .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:rgba(11,105,118,.10);border:1px solid rgba(11,105,118,.22)}
  [data-theme="dark"] .isle-intro .eyebrow{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line-2)}
  .isle-intro h1{font-size:clamp(2.3rem,4.6vw,3.4rem);color:var(--ink);margin:16px 0 12px;font-weight:600;letter-spacing:-.02em}
  .isle-intro h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .isle-intro p{color:var(--muted);font-size:1.08rem;line-height:1.6}

  /* Tortola — the wide "start here" card */
  .isle-wide{position:relative;display:block;border-radius:24px;overflow:hidden;min-height:340px;border:1px solid var(--line);isolation:isolate;transition:transform .25s, border-color .25s;box-shadow:var(--shadow-lg)}
  .isle-wide:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .isle-wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .isle-wide:hover img{transform:scale(1.04)}
  .isle-wide::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(7,14,24,.92) 0%,rgba(7,14,24,.72) 45%,rgba(7,14,24,.15) 100%);z-index:1}
  .isle-wide .cap{position:relative;z-index:2;padding:44px 46px;max-width:60ch}
  .isle-wide .start-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;background:rgba(226,83,43,.22);border:1px solid rgba(226,83,43,.45);color:#ffd9cc;font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
  .isle-wide h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.4vw,2.7rem);color:#fff;margin:16px 0 10px;line-height:1.1;text-shadow:0 2px 20px rgba(0,0,0,.45)}
  .isle-wide p{color:rgba(255,255,255,.88);font-size:1rem;line-height:1.55;max-width:46ch}
  .isle-wide .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;color:#fff;font-weight:600;font-size:.94rem}

  /* Island grid */
  .isle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .isle{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);isolation:isolate;transition:transform .25s, border-color .25s}
  .isle:hover{transform:translateY(-4px);border-color:var(--line-2)}
  .isle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .isle:hover img{transform:scale(1.06)}
  .isle::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,24,0) 32%,rgba(7,14,24,.93) 100%);z-index:1}
  .isle .cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
  .isle .ct{font-family:var(--display);font-weight:600;font-size:1.35rem;line-height:1.15;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .isle .cs{font-size:.88rem;color:rgba(255,255,255,.8);margin-top:5px;line-height:1.45}

  /* Other islands — quiet catch-all, deliberately not a photo card */
  .isle-other{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--bg-3);border:1px dashed var(--line-2);border-radius:18px;padding:28px 32px;transition:border-color .2s, transform .2s}
  .isle-other:hover{border-color:var(--teal);transform:translateY(-2px)}
  .isle-other h3{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--ink);margin-bottom:6px}
  .isle-other p{color:var(--muted);font-size:.94rem;max-width:58ch;line-height:1.5}
  .isle-other .go{color:var(--teal);font-weight:600;font-size:.94rem;white-space:nowrap}
  [data-theme="dark"] .isle-other .go{color:var(--ink)}

  @media(max-width:980px){
    .isle-grid{grid-template-columns:repeat(2,1fr)}
    .isle-wide .cap{padding:34px 30px}
    .isle-wide::after{background:linear-gradient(180deg,rgba(7,14,24,.25) 0%,rgba(7,14,24,.9) 100%)}
  }
  @media(max-width:560px){
    .isle-grid{grid-template-columns:1fr}
    .isle-other{flex-direction:column;align-items:flex-start;gap:14px}
  }


  /* ===== BAY PAGE (from mockup 06) ===== */


  /* BAY HERO */
  .bay-hero{padding:28px 0 40px}

  .bay-hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:32px;align-items:end}

  .bay-hero-img{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:16/10;box-shadow:var(--shadow-md)}

  .bay-hero-img img{width:100%;height:100%;object-fit:cover}

  .bay-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--inner-card-bg) 100%)}

  .bay-hero-content{padding-bottom:8px}

  .bay-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-bright)}

  .bay-eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 0 3px rgba(44,197,214,.2), 0 0 14px rgba(44,197,214,.5)}

  .bay-hero-content h1{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--ink);margin:14px 0 12px;font-weight:600;letter-spacing:-.02em;line-height:1.05}

  .bay-hero-content h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .bay-lede{color:var(--muted);font-size:1.08rem;line-height:1.55;max-width:52ch}


  /* QUICK FACTS */
  .facts{margin-top:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

  .fact{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start}

  .fact .fi{font-size:1.15rem;flex:0 0 auto;line-height:1.3}

  .fact .fl{color:var(--muted-soft);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}

  .fact .fv{color:var(--ink);font-size:.94rem;font-weight:500}

  .fact .fv b{color:var(--ink)}


  /* MAP CTA */
  .map-cta-inline{margin-top:18px;display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;font-weight:600;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s, background .2s;font-size:.94rem}

  .map-cta-inline:hover{background:var(--coral-deep);transform:translateY(-2px)}

  .prem-ad .btns{display:flex;gap:10px;flex-wrap:wrap}

  .prem-ad .btn-s{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:transparent;border:1px solid var(--line-2);color:var(--ink);font-weight:600;font-size:.9rem;transition:background .2s, transform .2s}

  .prem-ad .btn-s:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}


  /* PLACE CARDS GRID */
  .places-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

  .place{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s, border-color .25s;display:flex;flex-direction:column}

  .place:hover{transform:translateY(-3px);border-color:var(--line-2)}

  .place-main{color:inherit;text-decoration:none;flex:1}

  .place-img{position:relative;aspect-ratio:16/10;overflow:hidden}

  .place-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}

  .place:hover .place-img img{transform:scale(1.05)}

  .place-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55) 100%)}

  .place-tags{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}

  .ptag{background:rgba(7,14,24,.72);backdrop-filter:blur(6px);color:var(--emphasis-fg);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.14)}

  .ptag.primary{color:var(--regulation-accent);border-color:rgba(245,185,74,.32)}

  .place-body{padding:16px 18px 12px}

  .place-body h3{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink);margin-bottom:4px;line-height:1.15}

  .place-body p{color:var(--muted);font-size:.88rem;line-height:1.45}

  .place-meta{padding:12px 18px 16px;margin-top:auto;display:flex;gap:12px;flex-wrap:wrap;color:var(--muted-soft);font-size:.78rem;border-top:1px solid var(--line)}

  .place-meta span{display:inline-flex;align-items:center;gap:5px}

  .place-meta a.ext{display:inline-flex;align-items:center;gap:5px;color:var(--teal-bright);font-weight:500;transition:color .2s}

  .place-meta a.ext:hover{color:var(--ink)}


  /* DIVE SITES — simpler list format (they're not businesses) */
  .dive-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

  .dive{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start;transition:border-color .2s, transform .2s}

  .dive:hover{border-color:var(--line-2);transform:translateY(-2px)}

  .dive .di{width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg, rgba(26,164,179,.18), rgba(26,164,179,.06));border:1px solid rgba(26,164,179,.28);display:grid;place-items:center;font-size:1.4rem;flex:0 0 auto}

  .dive .dbody{flex:1}

  .dive h3{font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink);margin-bottom:4px}

  .dive .dmeta{color:var(--muted-soft);font-size:.78rem;letter-spacing:.03em;margin-bottom:6px;text-transform:uppercase;font-weight:600}

  .dive p{color:var(--muted);font-size:.88rem;line-height:1.45}


  /* NEARBY BAYS */
  


  /* APP LOOP FOOTER CTA */
  .app-cta{background:linear-gradient(135deg, var(--coral-tint), rgba(226,83,43,.05));border: 1px solid var(--coral-tint-border);border-radius:22px;padding:44px 40px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden}

    

    

    


  /* ---------- LIGHT THEME FIXES ---------- */
  /* Translucent white text on CTA / hero / section backgrounds was designed
     for dark backgrounds. In light theme, swap to muted ink so it stays legible. */
  html:not([data-theme="dark"]) .app-cta p,
  html:not([data-theme="dark"]) .safety p,
  html:not([data-theme="dark"]) .safety .scard p,
  html:not([data-theme="dark"]) .aeromd-head p,
  html:not([data-theme="dark"]) .aeromd-step p,
  html:not([data-theme="dark"]) .aeromd-note p,
  html:not([data-theme="dark"]) .join-cta p,
  html:not([data-theme="dark"]) .advres-left .adv-lede,
  html:not([data-theme="dark"]) .advres-fine,
  html:not([data-theme="dark"]) .advres-req,
  html:not([data-theme="dark"]) .advres-price .u,
  html:not([data-theme="dark"]) .advres-price-note,
  html:not([data-theme="dark"]) .adv-points li span,
  html:not([data-theme="dark"]) .hero p.lede,
  html:not([data-theme="dark"]) .hero-scroll,
  html:not([data-theme="dark"]) .cat-hero-inner p,
  html:not([data-theme="dark"]) .prem-ad p,
  html:not([data-theme="dark"]) .grid-house-ad p,
  html:not([data-theme="dark"]) .briefing p,
  html:not([data-theme="dark"]) .home-brief p,
  html:not([data-theme="dark"]) .top-slot p,
  html:not([data-theme="dark"]) .brief-ad p,
  html:not([data-theme="dark"]) .prem-ad-body p{
    color:var(--muted) !important;
  }


  /* .safety scard tip (bottom border) also uses translucent white */
  html:not([data-theme="dark"]) .safety .scard{
    border-color:var(--line-2) !important;
  }


  /* Bottom-of-safety-section text specifically */
  html:not([data-theme="dark"]) .safety h2,
  html:not([data-theme="dark"]) .safety .scard h3{
    color:var(--ink) !important;
  }


  /* Some hero descenders and small captions use translucent white too */
  html:not([data-theme="dark"]) .foot-brand p,
  html:not([data-theme="dark"]) footer p{
    color:var(--muted) !important;
  }


  /* Card tags on place cards — moved into place-body (was: absolute over image).
     Now always visible regardless of image load state. */
  .place-tags{
    position:static !important;
    top:auto !important;
    left:auto !important;
    padding:0 !important;
    margin:0 0 10px 0 !important;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }

  .place-tags .ptag{
    background:transparent !important;
    border:1px solid var(--line-2) !important;
    color:var(--muted) !important;
    font-weight:600;
    padding:3px 10px;
    backdrop-filter:none !important;
  }

  .place-tags .ptag.primary{
    background:var(--amber-tint) !important;
    border-color:var(--amber-tint-border) !important;
    color:var(--regulation-accent) !important;
  }

  [data-theme="dark"] .place-tags .ptag{
    background:transparent !important;
    border-color:var(--line-2) !important;
    color:var(--muted) !important;
  }

  [data-theme="dark"] .place-tags .ptag.primary{
    background:var(--amber-tint) !important;
    color:var(--regulation-accent) !important;
  }

  .place-body h3{margin-top:0}


  /* Fine-tune: sponsored/curated ad banners */
  html:not([data-theme="dark"]) .brief-ad,
  html:not([data-theme="dark"]) .top-slot{
    color:var(--ink);
  }

@media(max-width:1080px){
    .bay-hero-grid{grid-template-columns:1fr}
    .prem-ad{grid-template-columns:1fr}
    .prem-ad-img{min-height:220px}
    .places-grid{grid-template-columns:repeat(2,1fr)}
    .dive-list{grid-template-columns:1fr}
    .nearby-grid{grid-template-columns:1fr 1fr}
  }
@media(max-width:720px){
    .facts{grid-template-columns:1fr}
    .places-grid{grid-template-columns:1fr}
    .nearby-grid{grid-template-columns:1fr}
    .app-cta{grid-template-columns:1fr}
    nav.links{display:none}
  }


  /* ===== CATEGORY / DIRECTORY (from mockup 07) ===== */


  /* CATEGORY HEADER */
  .cat-hero{padding:26px 0 34px;position:relative;overflow:hidden}

  .cat-hero::before{content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:900px;height:400px;background:radial-gradient(ellipse, var(--coral-tint) 0%, transparent 60%);pointer-events:none}

  .cat-hero-inner{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}

  .cat-title{flex:1;min-width:280px}

  .cat-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--regulation-accent)}

  .cat-eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,74,.22), 0 0 14px rgba(245,185,74,.5)}

  .cat-title h1{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--ink);margin:12px 0 8px;font-weight:600;letter-spacing:-.02em}

  .cat-title h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .cat-title p{color:var(--muted);font-size:1.05rem;max-width:56ch}

  .cat-count{color:var(--muted-soft);font-size:.9rem;white-space:nowrap;padding-bottom:6px}


  /* FILTER BAR */
  .filter-bar{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:32px}

  .filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

  .filter-row + .filter-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

  /* Nested bay filter — appears when a single island is selected */
  .filter-row.nested{margin-top:12px;padding-top:12px;padding-left:20px;border-top:1px dashed rgba(255,255,255,.09);position:relative}

  .filter-row.nested::before{content:'↳';position:absolute;left:0;top:14px;color:var(--muted-soft);font-size:.9rem;line-height:1}

  .filter-label{color:var(--muted-soft);font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;margin-right:8px;flex:0 0 auto}

  .chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--emphasis-fg);font-size:.86rem;font-weight:500;cursor:pointer;transition:background .2s, border-color .2s, color .2s;white-space:nowrap}

  .chip:hover{background:rgba(255,255,255,.08);border-color:var(--line-2)}

  .chip.active{background:var(--teal-tint);border-color:rgba(44,197,214,.4);color:var(--teal-bright)}

  .chip .n{color:var(--muted-soft);font-size:.78rem;font-weight:600;margin-left:2px}

  .chip.active .n{color:var(--teal-bright)}

  .chip-icon{font-size:.9rem}

  .filter-search{flex:1;min-width:240px;position:relative;margin-left:auto}

  .filter-search input{width:100%;background:var(--inner-card-bg);border:1px solid var(--line);border-radius:999px;padding:9px 14px 9px 38px;font-family:var(--body);font-size:.9rem;color:var(--ink);transition:border-color .2s}

  .filter-search input::placeholder{color:var(--muted-soft)}

  .filter-search input:focus{outline:none;border-color:var(--teal-bright)}

  .filter-search::before{content:'🔍';position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5;font-size:.85rem;pointer-events:none}


  /* PREMIUM FEATURED SLOT (top of category) */
  .prem-ad{background:linear-gradient(135deg, rgba(245,185,74,.1) 0%, rgba(13,36,58,.7) 55%, rgba(10,37,64,.6) 100%);border:1px solid rgba(245,185,74,.32);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;box-shadow:var(--shadow-md);margin-bottom:36px;position:relative}

  .prem-ad::before{content:'';position:absolute;right:-100px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(245,185,74,.14) 0%, transparent 65%);pointer-events:none;z-index:0}

  .place-loc{color:var(--teal-bright);font-size:.76rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:5px}


  /* ADVERTISE HERE HOUSE AD - inline within grid */
  .grid-house-ad{grid-column:span 3;background:linear-gradient(135deg, rgba(245,185,74,.1) 0%, rgba(13,36,58,.6) 100%);border:1px dashed rgba(245,185,74,.36);border-radius:18px;padding:26px 30px;display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}

  .grid-house-ad .ha-body{flex:1;min-width:280px}

  .grid-house-ad .a-tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--regulation-accent);margin-bottom:6px;display:inline-flex;align-items:center;gap:6px}

  .grid-house-ad .a-tag::before{content:'✨'}

  .grid-house-ad h3{font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);margin-bottom:4px}

  .grid-house-ad p{color:rgba(255,255,255,.78);font-size:.9rem}

  .grid-house-ad a{background:linear-gradient(135deg, var(--amber), #e89f28);color:#1a1207;font-weight:700;padding:11px 20px;border-radius:12px;white-space:nowrap;font-size:.9rem;transition:transform .2s, filter .2s}

  .grid-house-ad a:hover{transform:translateY(-2px);filter:brightness(1.08)}

    .grid-house-ad{grid-column:span 2}

    .grid-house-ad{grid-column:span 1}

    .filter-search{margin-left:0;width:100%}

  /* ===== PLACE DETAIL PAGE (stage 3) ===== */
  .place-hero{padding:26px 0 34px}
  .place-hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:start}
  .place-gallery{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md)}
  .place-gallery img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
  .place-thumbs{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
  .place-thumbs img{width:74px;height:56px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer;transition:border-color .2s,transform .2s}
  .place-thumbs img:hover{border-color:var(--teal);transform:translateY(-2px)}
  .place-head h1{font-size:clamp(2rem,3.8vw,3rem);color:var(--ink);margin:12px 0 10px;font-weight:600;letter-spacing:-.02em;line-height:1.08}
  .place-head h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .place-lede{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:52ch}
  .place-where{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.9rem;color:var(--muted);margin-top:14px}
  .place-where a{color:var(--teal);font-weight:600}
  [data-theme="dark"] .place-where a{color:var(--ink)}
  .sponsor-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--amber-tint);border:1px solid rgba(245,185,74,.45);color:var(--regulation-accent);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .social-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
  .social-link{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink);font-size:.88rem;font-weight:600;transition:border-color .2s,transform .2s}
  .social-link:hover{border-color:var(--teal);transform:translateY(-2px)}
  .social-link img{width:16px;height:16px;object-fit:contain}
  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .res-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);transition:transform .25s,border-color .25s;display:block}
  .res-card:hover{transform:translateY(-4px);border-color:var(--teal)}
  .res-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
  .res-card .rb{padding:16px 18px}
  .res-card .rt{font-family:var(--display);font-weight:600;font-size:1.05rem;color:var(--ink)}
  .res-card .rg{font-size:.84rem;color:var(--teal);font-weight:600;margin-top:5px}
  [data-theme="dark"] .res-card .rg{color:var(--ink)}
  @media(max-width:980px){
    .place-hero-grid{grid-template-columns:1fr;gap:24px}
    .res-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:560px){
    .res-grid{grid-template-columns:1fr}
  }


  /* ===== LEARN (mockups 08-14) ===== */


  /* ARTICLE HEADER */
  .article-header{padding:32px 0 40px;position:relative}

  .article-header::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:800px;height:300px;background:radial-gradient(ellipse, var(--coral-tint) 0%, transparent 60%);pointer-events:none}

  .article-header-inner{position:relative;max-width:820px}

  .article-eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--safety-accent)}

  .article-eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 3px rgba(255,106,61,.22), 0 0 14px rgba(255,106,61,.5)}

  .article-eyebrow .safety-badge{margin-left:8px;background:var(--coral-tint);border: 1px solid var(--coral-tint-border);color:var(--safety-accent);font-size:.65rem;padding:3px 10px;border-radius:999px;letter-spacing:.09em}

  .article-header h1{font-size:clamp(2.4rem,4.6vw,3.4rem);color:var(--ink);margin:14px 0 14px;font-weight:600;letter-spacing:-.02em;line-height:1.1}

  .article-header .lede{color:var(--muted);font-size:1.14rem;max-width:56ch;line-height:1.55}

  .article-meta{margin-top:22px;display:flex;gap:20px;color:var(--muted-soft);font-size:.86rem;flex-wrap:wrap}

  .article-meta span{display:inline-flex;align-items:center;gap:6px}


  /* ARTICLE LAYOUT — content + sidebar */
  .article-body{display:grid;grid-template-columns:1fr 260px;gap:56px;padding-bottom:60px;align-items:start}

  .article-content{max-width:720px}

  .article-content > section{margin-bottom:48px}

  .article-content > section:last-child{margin-bottom:0}

  .article-content h2{font-size:clamp(1.5rem,2.6vw,1.85rem);color:var(--ink);margin-bottom:16px;scroll-margin-top:100px}

  .article-content h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .article-content h3{font-size:1.2rem;color:var(--ink);margin-top:28px;margin-bottom:10px}

  .article-content p{color:var(--muted);font-size:1.02rem;margin-bottom:14px;line-height:1.65}

  .article-content p:last-child{margin-bottom:0}

  .article-content p b{color:var(--emphasis-fg)}

  .article-content ul{list-style:none;padding-left:0;margin-bottom:14px}

  .article-content ul li{color:var(--muted);font-size:1.02rem;line-height:1.55;padding-left:24px;position:relative;margin-bottom:10px}

  .article-content ul li::before{content:'';position:absolute;left:8px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--teal-bright)}

  .article-content ul li b{color:var(--emphasis-fg)}

  .article-content a{color:var(--teal-bright);font-weight:500;border-bottom:1px solid rgba(44,197,214,.4);transition:border-color .2s}

  .article-content a:hover{border-bottom-color:var(--teal-bright)}


  /* MOORING COLOR GUIDE */
  .mooring-guide{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:24px 0}

  .mooring-guide h3{margin-top:0;margin-bottom:16px;color:var(--ink);font-size:1.15rem}

  .mooring-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

  .mooring-item{background:var(--inner-card-bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:14px;align-items:flex-start}

  .mooring-ball{flex:0 0 auto;width:34px;height:34px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.3),inset 0 -4px 8px rgba(0,0,0,.25),inset 0 4px 8px rgba(255,255,255,.2);margin-top:2px}

  .mooring-ball.yellow{background:radial-gradient(circle at 35% 35%, #ffe07d, #d4a800)}

  .mooring-ball.blue{background:radial-gradient(circle at 35% 35%, #7ab8ff, #2c74d4)}

  .mooring-ball.orange{background:radial-gradient(circle at 35% 35%, #ffbc7d, #d4671a)}

  .mooring-ball.red{background:radial-gradient(circle at 35% 35%, #ff8579, #c73024)}

  .mooring-ball.white{background:radial-gradient(circle at 35% 35%, #ffffff, #b8c2ce)}

  .mooring-item .mtext .label{color:var(--ink);font-family:var(--display);font-weight:600;font-size:.98rem;margin-bottom:2px;line-height:1.2}

  .mooring-item .mtext .desc{color:var(--muted);font-size:.85rem;line-height:1.4}


  /* CALLOUTS */
  .callout{background:var(--coral-tint);border: 1px solid var(--coral-tint-border);border-left:4px solid var(--coral);border-radius:12px;padding:18px 22px;margin:22px 0;display:flex;gap:14px;align-items:flex-start}

  .callout .cico{font-size:1.35rem;flex:0 0 auto;line-height:1.4}

  .callout .cbody{flex:1}

  .callout .clabel{font-size:.72rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--safety-accent);margin-bottom:6px}

  .callout p{color:var(--emphasis-fg) !important;font-size:.95rem !important;margin-bottom:0 !important}

  .callout p b{color:var(--ink)}

  .callout.info{background:var(--teal-tint);border-color:rgba(44,197,214,.28);border-left-color:var(--teal-bright)}

  .callout.info .clabel{color:var(--teal-bright)}

  .callout.regulation{background:var(--amber-tint);border-color:rgba(245,185,74,.32);border-left-color:var(--amber)}

  .callout.regulation .clabel{color:var(--regulation-accent)}


  /* NUMBERED STEPS */
  .steps{background:var(--inner-card-bg);border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin:20px 0;counter-reset:step-counter}

  .steps ol{list-style:none;padding-left:0;margin:0}

  .steps ol li{counter-increment:step-counter;padding-left:44px;position:relative;margin-bottom:12px;color:var(--emphasis-fg);font-size:.98rem;line-height:1.5}

  .steps ol li:last-child{margin-bottom:0}

  .steps ol li::before{content:counter(step-counter);position:absolute;left:0;top:0;width:30px;height:30px;background:var(--teal-bright);color:#fff;font-weight:700;font-size:.85rem;border-radius:50%;display:grid;place-items:center}


  /* SIDEBAR */
  .sidebar{position:sticky;top:96px}

  .sidebar-toc{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px}

  .sidebar-toc h4{color:var(--muted-soft);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px;font-family:var(--body)}

  .sidebar-toc ul{list-style:none}

  .sidebar-toc ul li{margin-bottom:9px}

  .sidebar-toc ul a{color:var(--muted);font-size:.9rem;transition:color .2s;line-height:1.4;display:block}

  .sidebar-toc ul a:hover{color:var(--ink)}

  .sidebar-toc ul a.active{color:var(--teal-bright);font-weight:500}


  .sidebar-related{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:20px 22px}

  .sidebar-related h4{color:var(--muted-soft);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px;font-family:var(--body)}

  .sidebar-related ul{list-style:none;display:flex;flex-direction:column;gap:11px}

  .sidebar-related ul a{color:var(--emphasis-fg);font-size:.9rem;display:flex;align-items:center;gap:9px;transition:color .2s;font-weight:500}

  .sidebar-related ul a:hover{color:var(--teal-bright)}

  .sidebar-related ul a::before{content:'→';color:var(--muted-soft);flex:0 0 auto}


  /* ASK BOTTOM CTA */
  .ask-cta{background:linear-gradient(135deg, var(--coral-tint), rgba(226,83,43,.05));border: 1px solid var(--coral-tint-border);border-radius:22px;padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative;overflow:hidden;margin-bottom:60px}

  .ask-cta::before{content:'';position:absolute;left:-100px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, var(--coral-tint) 0%, transparent 65%);pointer-events:none}

  .ask-cta > *{position:relative;z-index:1}

  .ask-cta h2{font-size:1.55rem;color:var(--ink);margin-bottom:8px}

  .ask-cta h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .ask-cta p{color:rgba(255,255,255,.85);max-width:52ch;font-size:1rem}

  .ask-cta a{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;font-weight:600;padding:14px 26px;border-radius:999px;white-space:nowrap;font-size:1rem;transition:background .2s, transform .2s}

  .ask-cta a:hover{background:var(--coral-deep);transform:translateY(-2px)}


@media(max-width:980px){
    .article-body{grid-template-columns:1fr;gap:32px}
    .sidebar{position:relative;top:0;order:-1}
    .sidebar-toc{padding:16px 18px}
    .ask-cta{grid-template-columns:1fr}
    .mooring-grid{grid-template-columns:1fr}
  }
@media(max-width:720px){
    nav.links{display:none}
  }


  /* HERO */
  .hero{padding:70px 0 32px;position:relative;overflow:hidden}

  .hero::before{content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:900px;height:500px;background:radial-gradient(ellipse, rgba(44,197,214,.12) 0%, transparent 60%);pointer-events:none}

  .hero-inner{position:relative;text-align:center;max-width:760px;margin:0 auto}

  .kick{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-bright)}

  .kick .pip{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);box-shadow:0 0 0 3px rgba(44,197,214,.2), 0 0 14px rgba(44,197,214,.5)}

  .hero h1{font-size:clamp(2.6rem,5vw,4rem);color:var(--ink);margin:14px 0 16px;font-weight:600;letter-spacing:-.02em}

  .hero h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .hero p{color:var(--muted);font-size:1.14rem;max-width:56ch;margin:0 auto}


  /* ASK BOATYBALL — prominent chat surface */
  .ask{max-width:820px;margin:44px auto 0;background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line-2);border-radius:22px;padding:32px 34px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}

  .ask::before{content:'';position:absolute;left:-80px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, var(--coral-tint) 0%, transparent 65%);pointer-events:none}

  .ask::after{content:'';position:absolute;right:-90px;bottom:-70px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle, rgba(44,197,214,.12) 0%, transparent 65%);pointer-events:none}

  .ask-inner{position:relative;z-index:1}

  .ask-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}

  .ask-avatar{width:52px;height:52px;border-radius:14px;background:var(--coral);color:#fff;display:grid;place-items:center;font-size:1.6rem;position:relative;flex:0 0 auto;box-shadow:0 6px 18px rgba(255,106,61,.35)}

  .ask-avatar::after{content:'';position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#3ddc84;border:2px solid var(--bg-2)}

  .ask-header-text h2{font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--ink);line-height:1.1;margin-bottom:3px}

  .ask-header-text p{color:var(--muted);font-size:.9rem}

  .ask-input-wrap{position:relative;margin-top:18px}

  .ask-input{width:100%;background:var(--inner-card-bg);border:1px solid var(--line-2);border-radius:14px;padding:16px 60px 16px 20px;font-family:var(--body);font-size:1.02rem;color:var(--ink);transition:border-color .2s, box-shadow .2s}

  .ask-input::placeholder{color:var(--muted-soft)}

  .ask-input:focus{outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 4px var(--teal-tint)}

  .ask-send{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;background:var(--coral);color:#fff;border:none;border-radius:10px;display:grid;place-items:center;cursor:pointer;font-size:1.2rem;transition:background .2s}

  .ask-send:hover{background:var(--coral-deep)}

  .ask-suggestions{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}

  .ask-suggestions .suggest-label{font-size:.78rem;color:var(--muted-soft);align-self:center;margin-right:4px}

  .ask-suggestions a{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--emphasis-fg);font-size:.86rem;padding:7px 13px;border-radius:999px;transition:background .2s, border-color .2s}

  .ask-suggestions a:hover{background:rgba(255,255,255,.08);border-color:var(--line-2)}


  /* SECTION */
  section{padding:52px 0}


  /* LEARN TOPIC CARDS */
  .learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

  .learn-card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:32px 28px;transition:transform .25s, border-color .25s, background .25s;overflow:hidden;isolation:isolate}

  .learn-card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--bg-3)}

  .learn-card::before{content:'';position:absolute;top:-40px;right:-40px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle, var(--teal-tint) 0%, transparent 65%);pointer-events:none;z-index:0;transition:transform .5s}

  .learn-card:hover::before{transform:scale(1.4)}

  .learn-icon{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg, rgba(44,197,214,.18), rgba(44,197,214,.05));border:1px solid rgba(44,197,214,.28);display:grid;place-items:center;font-size:1.7rem;margin-bottom:20px;position:relative;z-index:1}

  .learn-card h3{font-family:var(--display);font-weight:600;font-size:1.32rem;color:var(--ink);margin-bottom:10px;line-height:1.15;position:relative;z-index:1}

  .learn-card p{color:var(--muted);font-size:.95rem;line-height:1.5;position:relative;z-index:1;margin-bottom:16px}

  .learn-card .learn-cta{position:relative;z-index:1;color:var(--teal-bright);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}

  .learn-card:hover .learn-cta{gap:10px}

  /* Special variant for safety-forward cards (using coral accent instead of teal) */
  .learn-card.safety .learn-icon{background:linear-gradient(135deg, rgba(255,106,61,.18), rgba(255,106,61,.05));border-color:rgba(255,106,61,.32)}

  .learn-card.safety .learn-cta{color:var(--safety-accent)}

  .learn-card.safety::before{background:radial-gradient(circle, rgba(255,106,61,.09) 0%, transparent 65%)}


  /* HELPFUL LINKS BAND (external references) */
  .helpful{background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line);border-radius:22px;padding:36px 40px}

  .helpful-header{margin-bottom:20px}

  .helpful-header h2{font-family:var(--display);font-size:1.4rem;color:var(--ink);margin-bottom:4px}

  .helpful-header p{color:var(--muted);font-size:.94rem}

  .helpful-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

  .helpful-item{background:var(--inner-card-bg);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;gap:12px;align-items:center;transition:border-color .2s, background .2s;color:inherit}

  .helpful-item:hover{border-color:var(--line-2);background:var(--inner-card-bg)}

  .helpful-item .hi{font-size:1.35rem;flex:0 0 auto}

  .helpful-item .ht b{color:var(--ink);display:block;font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.15;margin-bottom:2px}

  .helpful-item .ht span{color:var(--muted);font-size:.82rem}

    

    

    
@media(max-width:1080px){
    .learn-grid{grid-template-columns:repeat(2,1fr)}
    .helpful-list{grid-template-columns:1fr 1fr}
  }
@media(max-width:720px){
    .learn-grid{grid-template-columns:1fr}
    .helpful-list{grid-template-columns:1fr}
    .helpful{padding:28px 24px}
    .ask{padding:24px 22px}
    .ask-header-text h2{font-size:1.2rem}
    nav.links{display:none}
  }


  /* ===== HOMEPAGE (mockup 01) ===== */

  body.is-home h1,body.is-home h2,body.is-home h3{font-family:var(--display);font-weight:600;line-height:1.08;letter-spacing:-.01em}


  /* ---------- TOP NAV ---------- */
  header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}

  nav.links a::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--coral);transition:width .25s ease}

  nav.links a:hover::after{width:100%}


  /* ---------- HERO ---------- */
  .hero{position:relative;min-height:92vh;display:flex;align-items:center;color:var(--ink);overflow:hidden}

  .hero-bg{position:absolute;inset:0;background:
      linear-gradient(180deg, var(--inner-card-bg) 0%, var(--inner-card-bg) 40%, rgba(7,14,24,.94) 100%),
      url('https://boatyball.com/assets/img/hero/hero-img-1.png') center/cover no-repeat;
      transform:scale(1.04);}

  .hero-grain{position:absolute;inset:0;opacity:.04;background-image:radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);background-size:4px 4px;mix-blend-mode:overlay}

  /* subtle vignette to deepen the edges */
  .hero-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 30%, var(--inner-card-bg) 100%);pointer-events:none}

  .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:7px 15px;border-radius:999px;backdrop-filter:blur(6px)}

  .eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,74,.25), 0 0 14px rgba(245,185,74,.6)}

  .hero p.lede{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:46ch;margin:20px 0 0;color:rgba(255,255,255,.85);font-weight:400}


  /* primary actions */
  .actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:38px}

  .act{display:flex;align-items:center;gap:14px;border-radius:16px;padding:18px 22px;transition:transform .2s, box-shadow .2s, background .2s;cursor:pointer}

  .act .ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem}

  .act .txt b{display:block;font-family:var(--display);font-weight:600;font-size:1.18rem;line-height:1.1}

  .act .txt span{display:block;font-size:.85rem;opacity:.85;margin-top:2px}

  /* primary */
  .act.primary{background:var(--coral);color:#fff;box-shadow:var(--glow-coral);flex:1 1 320px}

  .act.primary .ico{background:rgba(255,255,255,.18)}

  .act.primary:hover{transform:translateY(-3px);background:var(--coral-deep);box-shadow:0 24px 70px rgba(255,106,61,.45)}

  .act.primary .txt b{font-size:1.4rem}

  /* secondary */
  .act.sec{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:var(--ink);backdrop-filter:blur(8px);flex:1 1 200px}

  .act.sec .ico{background:rgba(255,255,255,.1)}

  .act.sec:hover{background:rgba(255,255,255,.12);transform:translateY(-3px);border-color:rgba(255,255,255,.32)}


  .hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.7);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:7px}

  .hero-scroll .line{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:drop 1.8s ease-in-out infinite}


  /* ---------- PEACE OF MIND (new spine section) ---------- */
  .peace{position:relative}

  .peace-intro{max-width:720px;margin:0 auto 56px;text-align:center}

  .peace-intro .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}

  .peace-intro h2{font-size:clamp(2rem,4vw,3.1rem);margin:14px 0 16px;color:var(--ink);font-weight:600}

  .peace-intro h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}

  .peace-intro p{color:var(--muted);font-size:1.12rem;line-height:1.6}

  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

  .pillar{background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:30px 26px;position:relative;transition:transform .25s, border-color .25s, box-shadow .25s;display:flex;flex-direction:column}

  .pillar:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}

  .pillar .pi{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg, rgba(26,164,179,.18), rgba(26,164,179,.08));border:1px solid rgba(26,164,179,.28);display:grid;place-items:center;font-size:1.7rem;margin-bottom:20px}

  .pillar .tag{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--teal-bright);margin-bottom:8px}

  .pillar.premium .tag{color:var(--amber)}

  .pillar.premium .pi{background:linear-gradient(135deg, rgba(245,185,74,.2), var(--amber-tint));border-color:rgba(245,185,74,.3)}

  .pillar h3{font-size:1.22rem;color:var(--ink);margin-bottom:10px;line-height:1.2}

  .pillar p{font-size:.95rem;color:var(--muted);flex:1;margin-bottom:18px}

  .pillar .pl{font-weight:600;color:var(--teal-bright);font-size:.9rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}

  .pillar.premium .pl{color:var(--amber)}

  .pillar:hover .pl{gap:10px}

  .peace-cta-row{margin-top:48px;text-align:center;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;align-items:center}

  .peace-note{margin-top:24px;text-align:center;font-size:.88rem;color:var(--muted-soft);max-width:620px;margin-left:auto;margin-right:auto}

  .peace-note b{color:var(--emphasis-fg)}


  /* ---------- SECTIONS ---------- */
  /* was a bare `section` rule — scoped so it cannot affect other pages */
  body.is-home section{padding:96px 0;position:relative}

  .sec-head{max-width:640px;margin-bottom:48px}

  .sec-head .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}

  .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:12px 0 14px;color:var(--ink)}

  .sec-head p{color:var(--muted);font-size:1.08rem}


  /* ---------- HOW IT WORKS ---------- */
  .hp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}

  .hp-step{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:28px 24px 26px;position:relative;overflow:hidden;transition:transform .25s, box-shadow .25s, border-color .25s}

  .hp-step:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow-md)}

  .hp-step::before{counter-increment:s;content:'0' counter(s);position:absolute;top:14px;right:18px;font-family:var(--display);font-weight:600;font-size:2.6rem;color:rgba(255,255,255,.06);line-height:1}

  .hp-step .si{width:48px;height:48px;border-radius:13px;background:rgba(26,164,179,.12);border:1px solid rgba(26,164,179,.25);display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px}

  .hp-step h3{font-size:1.18rem;color:var(--ink);margin-bottom:7px}

  .hp-step p{font-size:.95rem;color:var(--muted)}

  .step-link{display:inline-flex;align-items:center;gap:7px;margin-top:42px;font-weight:600;color:var(--teal-bright);font-size:1rem;transition:gap .2s}

  .step-link:hover{gap:11px}


  /* ---------- BRIEFING ---------- */
  .briefing{background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line-2);border-radius:26px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;box-shadow:var(--shadow-lg);position:relative}

  .briefing::before{content:'';position:absolute;left:-100px;top:-100px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.15) 0%, transparent 70%);pointer-events:none}

  .briefing-l{padding:48px 46px;position:relative;z-index:1}

  .live-pill{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--safety-accent);background:rgba(255,106,61,.12);border: 1px solid var(--coral-tint-border);padding:6px 13px;border-radius:999px}

  .live-pill .blink{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:pulse 1.6s infinite}

  .briefing-l h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:18px 0 12px;color:var(--ink)}

  .briefing-l p{color:var(--muted);max-width:42ch;font-size:1.05rem}

  .brief-cta{display:inline-flex;align-items:center;gap:9px;margin-top:26px;background:#fff;color:var(--navy);font-weight:600;padding:13px 24px;border-radius:999px;transition:transform .2s, box-shadow .2s}

  .brief-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

  .briefing-r{background:rgba(0,0,0,.32);padding:36px 38px;border-left:1px solid var(--line-2);position:relative;z-index:1}

  .brief-date{font-size:.82rem;color:var(--muted-soft);letter-spacing:.04em;text-transform:uppercase;font-weight:600;margin-bottom:18px}

  .brief-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}

  .brief-row:last-child{border-bottom:0}

  .brief-row .bi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1.05rem;flex:0 0 auto;background:rgba(255,255,255,.05)}

  .brief-row .bl{font-size:.74rem;color:var(--muted-soft);text-transform:uppercase;letter-spacing:.07em;font-weight:600}

  .brief-row .bv{font-size:1rem;color:var(--ink);font-weight:500}

  .flag-green{color:#1f7a3d}
.flag-yellow{color:#a67a10}
.flag-red{color:#b83e18}

  [data-theme="dark"] .flag-green{color:#8fdc9c}

  [data-theme="dark"] .flag-yellow{color:#ffd24d}

  [data-theme="dark"] .flag-red{color:#ff8a73}


  /* ---------- EXPLORE ---------- */
  .explore-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px;flex-wrap:wrap}

  .tile-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:200px;gap:16px}

  .tile{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;color:var(--ink);isolation:isolate;border:1px solid var(--line)}

  .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease;filter:saturate(1.05)}

  .tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,14,24,0) 30%,rgba(7,14,24,.92) 100%);z-index:1}

  .tile:hover img{transform:scale(1.07)}

  .tile .cap{position:absolute;left:20px;bottom:18px;z-index:2}

  .tile .cap .ct{font-family:var(--display);font-weight:600;font-size:1.3rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}

  .tile .cap .cs{font-size:.82rem;opacity:.85}

  .tile.big{grid-column:span 6;grid-row:span 2}

  .tile.tall{grid-column:span 3;grid-row:span 2}

  .tile.wide{grid-column:span 6}

  .tile.sm{grid-column:span 3}

  .pill-link{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--navy);font-weight:600;padding:12px 22px;border-radius:999px;font-size:.95rem;transition:transform .2s, box-shadow .2s}

  .pill-link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}


  /* ---------- SAFETY / BOATYALARM ---------- */
  .safety{background:linear-gradient(135deg, rgba(26,164,179,.18) 0%, rgba(10,37,64,.6) 100%);border:1px solid rgba(26,164,179,.35);border-radius:26px;color:var(--ink);padding:54px 50px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}

  .safety::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.2) 0%, transparent 70%)}

  .safety::after{content:'';position:absolute;right:40px;bottom:-140px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.12) 0%, transparent 70%)}

  .safety .stext{position:relative;z-index:2}

  .safety h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:14px}

  .safety p{color:rgba(255,255,255,.88);font-size:1.06rem;max-width:48ch}

  .safety .badges{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

  .store-btn{display:inline-flex;align-items:center;gap:11px;background:#000;color:var(--ink);padding:12px 20px;border-radius:13px;font-weight:500;transition:transform .2s, background .2s;border:1px solid rgba(255,255,255,.18)}

  .store-btn:hover{transform:translateY(-2px);background:#1a1a1a}

  .store-btn .si{font-size:1.5rem}

  .store-btn small{display:block;font-size:.68rem;opacity:.7;line-height:1}

  .store-btn b{font-family:var(--display);font-size:1.05rem;font-weight:600}

  .safety .scard{position:relative;z-index:2;background:var(--inner-card-bg);border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:26px;backdrop-filter:blur(8px)}

  .safety .scard h3{font-size:1.2rem;margin-bottom:10px;display:flex;align-items:center;gap:9px;color:var(--ink)}

  .safety .scard p{font-size:.96rem;color:rgba(255,255,255,.78)}

  .safety .scard .tip{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);font-size:.9rem;color:var(--regulation-accent);font-weight:500}


  /* ---------- MEMBERSHIP ---------- */
  .member{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}

  .member-img{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3;border:1px solid var(--line-2)}

  .member-img img{width:100%;height:100%;object-fit:cover}

  .member h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--ink);margin-bottom:16px}

  .member p{color:var(--muted);font-size:1.08rem;margin-bottom:22px}

  .mlist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:28px}

  .mlist li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;color:var(--emphasis-fg)}

  .mlist .ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font-size:.8rem;margin-top:2px}

  .btn-coral{display:inline-flex;align-items:center;gap:9px;background:var(--coral);color:#fff;font-weight:600;padding:14px 28px;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s, background .2s}

  .btn-coral:hover{background:var(--coral-deep);transform:translateY(-2px);box-shadow:var(--glow-coral)}


  /* ---------- SPONSOR ---------- */
  .sponsor{text-align:center}

  .sponsor .lbl{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-soft);font-weight:600}

  .sponsor-card{margin-top:18px;background:var(--bg-2);border:1px solid var(--line);border-radius:20px;padding:36px;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;box-shadow:var(--shadow-sm)}

  .sponsor-card img{height:64px;width:auto;object-fit:contain}


  /* ---------- FOOTER ---------- */
  body.is-home footer{background:var(--footer-bg);color:var(--muted);padding:64px 0 30px;margin-top:20px;border-top:1px solid var(--line)}

  .partner-row{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:14px;opacity:.7}

  .partner-row img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.8}


  /* ---------- AI BOT LAUNCHER ---------- */
  .bot{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);border-radius:999px;padding:10px 18px 10px 12px;cursor:pointer;transition:transform .2s, border-color .2s}


  /* annotation banner */
  .note{max-width:1200px;margin:0 auto;padding:0 28px}

    

    

    

    


  /* Card tags on place cards — keep positioned but ensure they always read as UI chips.
     Original problem: when images fail to load, tags with translucent backgrounds
     looked like they collapsed onto the place name. Fix with opaque backgrounds
     and consistent placement above image area. */
  .place-tags{
    top:10px !important;
    left:10px !important;
  }
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,106,61,.6)}50%{opacity:.6;box-shadow:0 0 0 6px rgba(255,106,61,0)}}
@keyframes hint-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(226,83,43,0); }
    50% { box-shadow: 0 0 0 6px rgba(226,83,43,.32); }
  }
@media(max-width:980px){
    .hp-steps{grid-template-columns:repeat(2,1fr)}
    .pillars{grid-template-columns:repeat(2,1fr)}
    .briefing,.safety,.member{grid-template-columns:1fr}
    .briefing-r{border-left:0;border-top:1px solid var(--line-2)}
    .tile.big,.tile.tall,.tile.wide,.tile.sm{grid-column:span 6;grid-row:span 1}
    .foot-grid{grid-template-columns:1fr 1fr}
    nav.links{display:none}
  }
@media(max-width:560px){
    .tile.big,.tile.tall,.tile.wide,.tile.sm{grid-column:span 12}
    .hp-steps{grid-template-columns:1fr}
    .pillars{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .act.primary,.act.sec{flex:1 1 100%}
  }

  /* ===== BRIEFING PAGE SPACING =====
     The global rule is section{padding:52px 0} + margin-bottom:48px, which is
     right for marketing sections but leaves ~100px gaps between the briefing's
     short data blocks. These are compact, related chunks — tighten them. */
  .brief-sec{padding:0;margin-bottom:34px}
  .brief-sec:first-of-type{margin-top:8px}
  .brief-sec .facts{margin-top:0}
  .brief-sec .sec-h{margin-bottom:18px}
  .brief-sec + .brief-sec{margin-top:0}
  .brief-foot{padding:0;margin:10px 0 70px}

  /* ===== ARTICLE DOWNLOAD CTA =====
     For guides where the point of the page is to get the app. Sits directly
     under the lede so it's visible without scrolling. */
  .get-app{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
           background:var(--inner-card-bg);border:1px solid var(--line-2);border-radius:16px;
           padding:20px 24px;margin:22px 0 4px}
  .get-app .ga-text b{display:block;font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink)}
  .get-app .ga-text span{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
  .get-app .ga-btns{display:flex;gap:10px;flex-wrap:wrap}
  .get-app .store-btn{margin:0}
  @media(max-width:620px){
    .get-app{flex-direction:column;align-items:flex-start;gap:16px}
  }


  /* ===== MEMBERSHIP (mockup 02) ===== */
  [data-theme="dark"]{
    --bg:#152238;
    --bg-2:#1e2c44;
    --bg-3:#28374f;
    --navy:#1a3358;
    --teal:#1aa4b3;
    --teal-bright:#2cc5d6;
    --coral:#ff6a3d;
    --coral-deep:#e2532b;
    --amber:#f5b94a;
    --ink:#eef3f9;
    --muted:#a6b6c8;
    --muted-soft:#7c8fa3;
    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.16);
    --yellow:#ffd24d;
    --red:#ff5a4d;
    --white:#f5f5f5;
    --blue:#5aa3ff;
    --orange:#ff9d3d;
    --nav-bg:rgba(21,34,56,.82);
    --nav-cta-fg:#ffffff;
    --footer-bg:#0e1a2d;
    --inner-card-bg:rgba(10,18,32,.3);
    --emphasis-fg:#d4dee8;
    --safety-accent:#ff9d7b;
    --info-accent:#2cc5d6;
    --regulation-accent:#ffd089;
    --italic-accent:#ffd089;
    --coral-tint:rgba(255,106,61,.08);
    --coral-tint-border:rgba(255,106,61,.28);
    --teal-tint:rgba(44,197,214,.06);
    --teal-tint-border:rgba(44,197,214,.28);
    --amber-tint:rgba(245,185,74,.08);
    --amber-tint-border:rgba(245,185,74,.32);
    --shadow-sm:0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.22);
    --shadow-md:0 8px 24px rgba(0,0,0,.32), 0 20px 50px rgba(0,0,0,.24);
    --shadow-lg:0 24px 70px rgba(0,0,0,.42);
  }
  .quick, .quick div, .quick-item, .fact, .about-side, .prompt-chip, .search-hero{
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  }
  header.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .page-hero{padding:80px 0 40px;text-align:center;position:relative;overflow:hidden}
  .page-hero::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:800px;height:400px;background:radial-gradient(ellipse, rgba(26,164,179,.14) 0%, transparent 60%);pointer-events:none}
  .page-hero .kick{position:relative;font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .page-hero h1{position:relative;font-size:clamp(2.4rem,5vw,3.8rem);color:var(--ink);margin:14px 0 18px;max-width:22ch;margin-left:auto;margin-right:auto}
  .page-hero h1 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .page-hero p{position:relative;color:var(--muted);font-size:1.15rem;max-width:60ch;margin:0 auto}
  .compare-strip{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow-md)}
  .cs-col{padding:36px 34px;position:relative}
  .cs-col.free{background:var(--bg-2)}
  .cs-col.paid{background:linear-gradient(135deg, rgba(26,164,179,.14) 0%, rgba(10,37,64,.6) 100%);border-left:1px solid var(--line-2)}
  .cs-col .cs-label{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-soft)}
  .cs-col.paid .cs-label{color:var(--teal-bright)}
  .cs-col h2{font-size:1.7rem;color:var(--ink);margin:6px 0 6px;font-family:var(--display)}
  .cs-col .cs-sub{color:var(--muted);font-size:.98rem;margin-bottom:20px}
  .cs-list{list-style:none;display:flex;flex-direction:column;gap:11px}
  .cs-list li{display:flex;align-items:flex-start;gap:10px;font-size:.98rem;color:var(--emphasis-fg)}
  .cs-list .ck{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(26,164,179,.18);color:var(--teal-bright);display:grid;place-items:center;font-size:.7rem;margin-top:3px}
  .cs-list .no{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--muted-soft);display:grid;place-items:center;font-size:.7rem;margin-top:3px}
  .cs-list li.dim{color:var(--muted-soft)}
  .tier-head{text-align:center;max-width:640px;margin:0 auto 44px}
  .tier-head .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .tier-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:12px 0 14px;color:var(--ink)}
  .tier-head p{color:var(--muted);font-size:1.08rem}
  .tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .tier{background:var(--bg-2);border:1px solid var(--line-2);border-radius:22px;padding:36px 34px;position:relative;overflow:hidden;transition:transform .25s, border-color .25s, box-shadow .25s}
  .tier.solo{background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border-color:rgba(255,106,61,.32)}
  .tier:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
  .tier .role-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .tier.solo .role-pill{color:var(--regulation-accent);background:var(--coral-tint);border: 1px solid var(--coral-tint-border)}
  .tier.crew .role-pill{color:var(--teal-bright);background:rgba(26,164,179,.14);border:1px solid rgba(26,164,179,.3)}
  .tier h3{font-family:var(--display);font-size:2rem;color:var(--ink);margin:16px 0 4px;font-weight:600}
  .tier .who{color:var(--muted);font-size:1rem;margin-bottom:22px}
  .tier .price{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
  .tier .price .amount{font-family:var(--display);font-size:3.4rem;font-weight:600;color:var(--ink);line-height:1}
  .tier .price .unit{color:var(--muted);font-size:1rem}
  .tier .price-note{color:var(--muted-soft);font-size:.86rem;margin-bottom:26px}
  .tier .benefits{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
  .tier .benefits li{display:flex;align-items:flex-start;gap:11px;font-size:.98rem;color:var(--emphasis-fg)}
  .tier .benefits .ck{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font-size:.72rem;margin-top:3px;font-weight:700}
  .tier.solo .benefits .ck.reserve{background:var(--coral)}
  .tier .benefits li.limit{color:var(--muted)}
  .tier .benefits .no{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--muted-soft);display:grid;place-items:center;font-size:.9rem;margin-top:3px}
  .tier-cta{display:block;width:100%;text-align:center;font-weight:600;padding:14px;border-radius:12px;transition:transform .2s, background .2s}
  .tier.solo .tier-cta{background:var(--coral);color:#fff}
  .tier.solo .tier-cta:hover{background:var(--coral-deep);transform:translateY(-2px)}
  .tier.crew .tier-cta{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
  .tier.crew .tier-cta:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
  .tier-note{margin-top:22px;text-align:center;color:var(--muted);font-size:.94rem}
  .tier-note b{color:var(--ink)}
  .party{background:var(--bg-2);border:1px solid var(--line);border-radius:24px;padding:44px 40px}
  .party-head{margin-bottom:28px}
  .party-head .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .party-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem);color:var(--ink);margin:10px 0 6px}
  .party-head p{color:var(--muted);font-size:1rem;max-width:60ch}
  .math-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .math{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center;transition:transform .2s, border-color .2s}
  .math:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
  .math .m-size{color:var(--muted-soft);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .math .m-total{font-family:var(--display);font-size:2.2rem;color:var(--ink);font-weight:600;margin:8px 0 4px;line-height:1}
  .math .m-break{color:var(--muted);font-size:.82rem;line-height:1.35}
  .math.highlight{background:linear-gradient(135deg, rgba(26,164,179,.14), rgba(26,164,179,.04));border-color:rgba(26,164,179,.35)}
  .math.highlight .m-total{color:var(--ink)}
  .party-foot{margin-top:24px;text-align:center;color:var(--muted-soft);font-size:.9rem}
  .aeromd{background:linear-gradient(135deg, rgba(26,164,179,.16) 0%, rgba(10,37,64,.6) 100%);border:1px solid rgba(26,164,179,.35);border-radius:26px;padding:52px 48px;position:relative;overflow:hidden}
  .aeromd::before{content:'';position:absolute;right:-100px;top:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.18) 0%, transparent 65%)}
  .aeromd-head{position:relative;z-index:1;max-width:640px;margin-bottom:36px}
  .aeromd-head .kick{color:var(--teal-bright);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
  .aeromd-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--ink);margin:12px 0 14px}
  .aeromd-head p{color:rgba(255,255,255,.85);font-size:1.06rem}
  .aeromd-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:36px}
  .aeromd-steps{display:flex;flex-direction:column;gap:14px}
  .aeromd-step{background:var(--inner-card-bg);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 20px;display:flex;gap:16px;align-items:flex-start;backdrop-filter:blur(6px)}
  .aeromd-step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal);color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:1.05rem}
  .aeromd-step h4{color:var(--ink);font-family:var(--body);font-weight:600;font-size:1rem;margin-bottom:3px}
  .aeromd-step p{color:rgba(255,255,255,.7);font-size:.9rem;line-height:1.45}
  .aeromd-note{background:var(--inner-card-bg);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:22px;backdrop-filter:blur(6px)}
  .aeromd-note h4{color:var(--ink);font-family:var(--display);font-size:1.15rem;margin-bottom:10px;display:flex;align-items:center;gap:9px}
  .aeromd-note p{color:rgba(255,255,255,.78);font-size:.93rem;margin-bottom:10px}
  .aeromd-note p:last-child{margin-bottom:0}
  .aeromd-note b{color:var(--ink)}
  .aeromd-note a{color:var(--regulation-accent);text-decoration:underline;text-underline-offset:2px}
  .funds-head{text-align:center;max-width:620px;margin:0 auto 40px}
  .funds-head .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .funds-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--ink);margin:12px 0 12px}
  .funds-head p{color:var(--muted)}
  .funds{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .fund{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:28px 24px;transition:transform .25s, border-color .25s}
  .fund:hover{transform:translateY(-3px);border-color:var(--line-2)}
  .fund .fi{width:48px;height:48px;border-radius:12px;background:rgba(26,164,179,.12);border:1px solid rgba(26,164,179,.28);display:grid;place-items:center;font-size:1.4rem;margin-bottom:16px}
  .fund h3{font-size:1.12rem;color:var(--ink);margin-bottom:8px}
  .fund p{color:var(--muted);font-size:.94rem}
  .community{background:linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);border:1px solid var(--line-2);border-radius:22px;padding:44px;display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center}
  .community .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .community h2{font-size:clamp(1.7rem,2.8vw,2.3rem);color:var(--ink);margin:12px 0 12px}
  .community p{color:var(--muted);font-size:1rem;margin-bottom:22px}
  .community-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:#fff;color:var(--navy);font-weight:600;font-size:.95rem;transition:transform .2s, box-shadow .2s}
  .community-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .community-panel{background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:16px;padding:22px;font-family:var(--body)}
  .community-panel .cp-thread{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .community-panel .cp-thread:last-child{border-bottom:0}
  .community-panel .cp-av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg, var(--teal), var(--teal-bright));color:var(--ink);display:grid;place-items:center;font-weight:600;font-size:.85rem;flex:0 0 auto}
  .community-panel .cp-body b{color:var(--ink);font-size:.9rem}
  .community-panel .cp-body p{color:var(--muted);font-size:.85rem;margin:2px 0 0}
  .community-panel .cp-body span{color:var(--muted-soft);font-size:.75rem}
  .faq-head{text-align:center;max-width:620px;margin:0 auto 36px}
  .faq-head .kick{font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright)}
  .faq-head h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--ink);margin:12px 0 0}
  .faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq details{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:0;transition:border-color .2s}
  .faq details[open]{border-color:var(--line-2)}
  .faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;color:var(--ink);font-size:1.02rem;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';font-family:var(--display);font-size:1.6rem;color:var(--muted);transition:transform .2s}
  .faq details[open] summary::after{content:'−'}
  .faq .a{padding:0 24px 22px;color:var(--muted);font-size:.98rem;line-height:1.55}
  .faq .a code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:5px;font-size:.9em;color:var(--ink)}
  .faq .a b{color:var(--emphasis-fg)}
  .join-cta{background:linear-gradient(135deg, rgba(255,106,61,.16), rgba(226,83,43,.06));border: 1px solid var(--coral-tint-border);border-radius:24px;padding:56px 44px;text-align:center;position:relative;overflow:hidden}
  .join-cta::before{content:'';position:absolute;left:-100px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(255,106,61,.16) 0%, transparent 65%)}
  .join-cta::after{content:'';position:absolute;right:-100px;bottom:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(26,164,179,.14) 0%, transparent 65%)}
  .join-cta h2{position:relative;font-size:clamp(2rem,3.6vw,2.8rem);color:var(--ink);margin-bottom:12px}
  .join-cta h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .join-cta p{position:relative;color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto 28px;font-size:1.08rem}
  .bot{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:12px;background:var(--bg-2);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);border-radius:999px;padding:10px 18px 10px 12px;cursor:pointer;transition:transform .2s, border-color .2s}
  .note{max-width:1200px;margin:0 auto;padding:0 28px}
  .advres{background:linear-gradient(135deg, rgba(245,185,74,.12) 0%, rgba(13,36,58,.7) 55%, rgba(10,37,64,.6) 100%);border:1px solid rgba(245,185,74,.32);border-radius:28px;padding:56px 52px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
  .advres::before{content:'';position:absolute;left:-120px;top:-100px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle, rgba(245,185,74,.14) 0%, transparent 65%);pointer-events:none}
  .advres::after{content:'';position:absolute;right:-100px;bottom:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(255,106,61,.12) 0%, transparent 65%);pointer-events:none}
  .advres-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
  .advres-left{position:relative;z-index:1}
  .advres-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--regulation-accent);background:rgba(245,185,74,.14);border:1px solid rgba(245,185,74,.35)}
  .advres-badge .pip{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,74,.25), 0 0 14px rgba(245,185,74,.6)}
  .advres-left h2{font-size:clamp(2rem,3.6vw,2.8rem);color:var(--ink);margin:18px 0 14px;font-family:var(--display);font-weight:600}
  .advres-left h2 em{font-style:italic;color:var(--italic-accent);font-weight:500}
  .advres-left .adv-lede{color:rgba(255,255,255,.86);font-size:1.08rem;max-width:52ch;margin-bottom:26px}
  .adv-points{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
  .adv-points li{display:flex;align-items:flex-start;gap:14px;color:var(--ink);font-size:1rem;line-height:1.5}
  .adv-points .icon{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg, rgba(245,185,74,.22), var(--amber-tint));border:1px solid rgba(245,185,74,.35);display:grid;place-items:center;font-size:1.15rem;margin-top:1px}
  .adv-points li b{color:var(--ink);display:block;margin-bottom:2px;font-family:var(--body);font-weight:600;font-size:1.02rem}
  .adv-points li span{color:rgba(255,255,255,.72);font-size:.94rem}
  .advres-fine{margin-top:14px;font-size:.88rem;color:rgba(255,255,255,.6)}
  .advres-right{position:relative;z-index:1;background:var(--inner-card-bg);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:34px 32px;backdrop-filter:blur(10px)}
  .advres-scarcity{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--regulation-accent);margin-bottom:16px}
  .advres-scarcity .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:pulse-amber 1.8s infinite}
  .advres-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
  .advres-price .amt{font-family:var(--display);font-size:3.3rem;font-weight:600;color:var(--ink);line-height:1}
  .advres-price .u{color:rgba(255,255,255,.7);font-size:1.02rem}
  .advres-price-note{color:rgba(255,255,255,.6);font-size:.88rem;margin-bottom:22px}
  .advres-req{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 16px;font-size:.88rem;color:rgba(255,255,255,.75);margin-bottom:20px;display:flex;gap:10px;align-items:flex-start}
  .advres-req b{color:var(--ink)}
  .advres-cta{display:flex;flex-direction:column;gap:10px}
  .btn-amber{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(135deg, var(--amber), #e89f28);color:#1a1207;font-weight:700;padding:15px 24px;border-radius:12px;font-size:1rem;text-align:center;transition:transform .2s, box-shadow .2s, filter .2s}
  .btn-amber:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(245,185,74,.35);filter:brightness(1.08)}
  .btn-quiet{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,.75);font-weight:500;font-size:.9rem;padding:6px;text-align:center;transition:color .2s}
  .btn-quiet:hover{color:var(--ink)}
  .theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s, transform .2s;font-size:1.05rem;position:relative;overflow:visible}
  html:not([data-theme="dark"]) .prem-ad-body p{
    color:var(--muted) !important;
  }
  html:not([data-theme="dark"]) .safety .scard h3{
    color:var(--ink) !important;
  }
  html:not([data-theme="dark"]) footer p{
    color:var(--muted) !important;
  }
  html:not([data-theme="dark"]) .top-slot{
    color:var(--ink);
  }
@media(max-width:980px){
    .advres{padding:40px 28px}
    .advres-grid{grid-template-columns:1fr;gap:32px}
    .compare-strip,.tiers,.aeromd-grid,.community{grid-template-columns:1fr}
    .cs-col.paid{border-left:0;border-top:1px solid var(--line-2)}
    .math-grid{grid-template-columns:repeat(2,1fr)}
    .funds{grid-template-columns:1fr}
    nav.links{display:none}
  }
@media(max-width:560px){
    .math-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .tier{padding:28px 24px}
    .aeromd{padding:36px 24px}
    .community{padding:32px 24px}
    .join-cta{padding:40px 24px}
  }

  /* ===== ADVANCED RESERVATIONS REQUEST CTA =====
     The section explained the product but gave the reader nowhere to act.
     Primary button sits under the price, in the empty left column. */
  .advres-request{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
                  padding:15px 26px;border-radius:999px;background:var(--coral);
                  color:#fff;font-weight:700;font-size:1rem;
                  box-shadow:0 8px 24px rgba(226,83,43,.28);
                  transition:transform .2s, box-shadow .2s}
  .advres-request:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(226,83,43,.36)}
  .advres-note{margin-top:12px;font-size:.86rem;color:var(--muted);max-width:42ch;line-height:1.5}

  /* ===== BRAND LOGO =====
     Light theme is the default (data-theme="dark" is set only when toggled),
     so the BLACK logo shows by default and the WHITE one in dark mode. */
  .logo img{display:block;width:auto;height:46px}
  .logo .logo-on-dark{display:none}
  [data-theme="dark"] .logo .logo-on-light{display:none}
  [data-theme="dark"] .logo .logo-on-dark{display:block}
  .logo{gap:0}

  /* The footer is LIGHT teal (#c9e0e2) in light theme and dark (#0e1a2d) in
     dark theme, so its lockup follows the theme exactly like the nav does.
     Forcing the white mark here would make it invisible in light mode. */
  .foot-logo img{height:56px}

  @media(max-width:760px){
    .logo img{height:34px}
    .foot-logo img{height:40px}
  }

  /* ===== MOBILE MENU =====
     The .links bar is display:none at and below 980px, so under that width the
     hamburger + drawer below ARE the navigation. If the 980px cutoff ever
     moves, move the media query at the bottom of this block to match. */
  .nav-actions{display:flex;align-items:center;gap:14px}

  .nav-toggle{display:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;padding:0;place-items:center;transition:background .2s,transform .2s}
  .nav-toggle:hover{transform:translateY(-1px)}
  html:not([data-theme="dark"]) .nav-toggle:hover{background:rgba(10,37,64,.06)}
  [data-theme="dark"] .nav-toggle:hover{background:rgba(255,255,255,.06)}
  .nav-toggle-bars{display:block;position:relative;width:18px;height:13px}
  .nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .18s ease}
  .nav-toggle-bars span:nth-child(1){top:0}
  .nav-toggle-bars span:nth-child(2){top:5.5px}
  .nav-toggle-bars span:nth-child(3){top:11px}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* Desktop: drawer and backdrop are fully out of play. */
  .mobile-nav,.mobile-nav-backdrop{display:none}
  body.nav-open{overflow:hidden}

  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:6px}
  .mobile-nav-title{font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .mobile-nav-close{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center}
  .mobile-nav-links{display:flex;flex-direction:column}
  .mobile-nav-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--display);font-weight:600;font-size:1.2rem;color:var(--ink);padding:14px 2px;border-bottom:1px solid var(--line)}
  .mobile-nav-links a::after{content:'→';font-family:var(--body);font-size:.85rem;color:var(--muted-soft)}
  .mobile-nav-links a.current{color:var(--coral)}
  .mobile-nav-links a.current::after{color:var(--coral)}
  .mobile-nav-sub{display:flex;flex-wrap:wrap;gap:10px 18px;padding:18px 2px 6px}
  .mobile-nav-sub a{font-size:.9rem;color:var(--muted)}
  .mobile-nav-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--coral);color:var(--nav-cta-fg);font-weight:600;font-size:.98rem;padding:15px 20px;border-radius:999px;box-shadow:var(--shadow-sm)}

  /* 980px, not 720px: two of the blocks above already hide nav.links at 980,
     so anything narrower than that has no desktop nav to fall back on. The
     hamburger has to take over at the same width or there is a dead zone
     between 721 and 980 with no navigation at all. */
  @media(max-width:980px){
    .nav-toggle{display:grid}
    .nav-search{display:none}          /* decorative only; Search lives in the drawer */

    .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:110;background:rgba(6,16,30,.55);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
    .mobile-nav-backdrop.is-open{opacity:1;visibility:visible}

    .mobile-nav{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;right:0;z-index:120;width:min(330px,86vw);height:100dvh;padding:16px 20px calc(20px + env(safe-area-inset-bottom));background:var(--bg-2);border-left:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);visibility:hidden;transition:transform .28s cubic-bezier(.22,.61,.36,1),visibility .28s ease}
    .mobile-nav.is-open{transform:none;visibility:visible}
  }

  @media(max-width:720px){
    .nav-actions{gap:10px}
    .nav-cta{padding:10px 16px;font-size:.86rem}
  }

  @media(max-width:560px){
    .nav-cta-long{display:none}        /* "Reserve →" only — the logo needs the room */
    .nav-cta{padding:9px 14px;font-size:.82rem}
  }

  @media(prefers-reduced-motion:reduce){
    .mobile-nav,.mobile-nav-backdrop,.nav-toggle-bars span{transition:none}
  }
  /* ===== SPONSORED LISTING CARD =====
     A sponsored entry is an ordinary card in first position with a badge --
     deliberately not a banner. Keeping it in the grid means the listing stays
     scannable and the label stays next to the thing it labels. */
  .isle.is-sponsored{position:relative;border-color:var(--line-2)}
  .isle.is-sponsored .cap .sponsor-badge{margin-bottom:8px}
  .isle .cap .sponsor-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--amber-tint);border:1px solid rgba(245,185,74,.45);color:var(--regulation-accent);font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.4}

  /* ===== HOMEPAGE SPONSOR LOGO SIZING =====
     Was a fixed height:64px, which left the logo small in a card with 36px of
     padding around it. Raised to 88px.

     Capped with max-height rather than a fixed height so a wide asset scales
     down instead of overflowing: ad-voyage.png is 1140x256 (4.45:1), so at
     88px tall it renders 392px wide -- wider than a 360px phone viewport once
     the card's padding is subtracted. max-width:100% makes it shrink to fit.

     The rounded corner is for assets that ship with a baked-in white
     background (as the current one does). On the dark theme that white block
     would otherwise read as a rendering fault; rounded, it reads as a
     deliberate logo tile. Harmless on the light theme, where the card is
     already white. */
  .sponsor-card img{
    height:auto;
    width:auto;
    max-height:88px;
    max-width:100%;
    object-fit:contain;
    border-radius:10px;
  }

  @media(max-width:560px){
    .sponsor-card{padding:24px}
    .sponsor-card img{max-height:64px}
  }

  /* ─────────────────────────────────────────────────────────────────────
     PHOTO-OVERLAY TEXT — always light, in both themes.

     These elements sit on top of a photo with a dark gradient scrim over
     it. The scrim is dark regardless of theme, so the text on it has to be
     light regardless of theme too. They were inheriting color:var(--ink),
     which is near-white in dark mode but navy (#0a2540) in light mode —
     so in light mode the titles disappeared into bright photos.

     .isle and .isle-wide already hardcoded #fff for this reason; these
     four were missed.
     ───────────────────────────────────────────────────────────────────── */

  .island-hero-content,
  .island-hero-content h1,
  .bay-card,
  .bay-card h3,
  .bay-card .bay-pill,
  .nearby,
  .nearby .ct,
  .tile,
  .tile .cap .ct{
    color:#fff;
  }

  /* Stronger scrim behind the bay-card and nearby captions. The gradient
     starts at 30–40% down, so a tall title on a bright sky still lands on
     thin cover — this deepens the bottom without darkening the photo. */
  .bay-card::after{
    background:linear-gradient(180deg,rgba(7,14,24,0) 18%,rgba(7,14,24,.55) 52%,rgba(7,14,24,.95) 100%);
  }
  .nearby::after{
    background:linear-gradient(180deg,rgba(7,14,24,0) 25%,rgba(7,14,24,.55) 58%,rgba(7,14,24,.94) 100%);
  }

  /* The hero fact chips are a white-70% glass panel in light mode, so a
     white-60% label on them was invisible. Give the label real contrast in
     each theme instead of assuming a dark backdrop. */
  html:not([data-theme="dark"]) .ifact{
    background:rgba(7,14,24,.55);
    border-color:rgba(255,255,255,.18);
  }
  .ifact .fl{
    color:rgba(255,255,255,.72);
  }
  .ifact .fv,
  .ifact .fv b{
    color:#fff;
  }


  /* ─────────────────────────────────────────────────────────────────────
     SAFE-AREA INSETS

     viewport-fit=cover (added to the viewport meta so env() works at all)
     lets the page paint underneath the status bar, the home indicator and
     Safari's floating toolbar. Everything that is fixed or sticky has to
     claim its own clearance or it ends up underneath them.
     ───────────────────────────────────────────────────────────────────── */

  header.nav{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .bot{
    right:calc(24px + env(safe-area-inset-right));
    bottom:calc(24px + env(safe-area-inset-bottom));
  }
  @media(max-width:560px){
    /* The launcher sits above Safari's toolbar rather than behind it. */
    .bot{bottom:calc(16px + env(safe-area-inset-bottom))}
  }


  /* Legal links in the footer's bottom bar. Separated by middots, wrapping
     cleanly on narrow screens rather than running off the edge. */
  .foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
  .foot-legal a{color:var(--muted-soft);text-decoration:none}
  .foot-legal a:hover{color:var(--ink);text-decoration:underline}
  .foot-legal a + a::before{content:'·';margin:0 8px;color:var(--muted-soft);text-decoration:none}

  /* ---------- EVENTS CALENDAR (/calendar/) ---------- */
  .cal{padding:26px 0 80px}
  /* Date-windowed items (partial calendar/script.html) toggle `hidden`;
     component display:flex/grid would otherwise override it. */
  [data-start][hidden],[data-cal-hide-empty][hidden],.cal-pill[hidden],.cal [hidden]{display:none !important}
  .cal .is-filtered{display:none !important}
  .cal-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .cal-weekly{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin-bottom:40px}
  .cal-weekly-h{color:var(--muted-soft);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
  .cal-weekly-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 28px}
  .cal-weekly-item{display:flex;gap:12px;align-items:flex-start}
  .cal-weekly-item .cal-name{font-family:var(--display);font-size:1.12rem;color:var(--ink);font-weight:600;margin:2px 0 4px}
  .cal-month{margin-bottom:38px}
  .cal-month .sec-h{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .cal-rows{list-style:none;margin:0;padding:0}
  .cal-row{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
  .cal-row:last-child{border-bottom:0}
  .cal-row.is-now .cal-date{background:var(--coral);border-color:var(--coral)}
  .cal-row.is-now .cal-date .d,.cal-row.is-now .cal-date .w{color:#fff}
  .cal-date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:64px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
  .cal-date .d{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1;color:var(--ink)}
  .cal-date .w{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-soft);margin-top:4px}
  .cal-row.is-holiday .cal-date{background:var(--teal-tint);border-color:var(--teal-tint-border)}
  .cal-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
  .cal-ico{font-size:1.15rem;line-height:1.3;flex:0 0 auto}
  .cal-name{font-family:var(--display);font-size:1.22rem;font-weight:600;color:var(--ink);margin:0;letter-spacing:-.01em}
  .cal-name a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
  .cal-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
  .cal-pill.cal-now{background:var(--coral-tint);border:1px solid var(--coral-tint-border);color:var(--coral-deep)}
  .cal-pill.cal-prov{background:var(--amber-tint);border:1px solid var(--amber-tint-border);color:var(--regulation-accent)}
  [data-theme="dark"] .cal-pill.cal-now{color:var(--ink)}
  [data-theme="dark"] .cal-pill.cal-prov{color:var(--ink)}
  .cal-when{color:var(--muted);font-size:.88rem;font-weight:500;margin-top:4px}
  .cal-rep{color:var(--muted-soft)}
  .cal-where{color:var(--muted);font-size:.88rem;margin-top:4px}
  .cal-where a{color:var(--teal);text-decoration:none;font-weight:500}
  .cal-where a:hover{text-decoration:underline}
  .cal-impact{color:var(--ink);font-size:.95rem;line-height:1.55;margin:8px 0 0;max-width:68ch;opacity:.88}
  .cal-foot{color:var(--muted-soft);font-size:.85rem;line-height:1.6;max-width:72ch;margin-top:10px}
  .cal-foot a{color:var(--teal)}
  .cal-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .cal-card{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
  .cal-card.is-now{border-color:var(--coral-tint-border)}
  .cal-card .cal-name{font-size:1.15rem}
  .cal-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--teal);font-weight:600;text-decoration:none}
  .cal-link:hover{text-decoration:underline}
  @media (max-width:640px){
    .cal-row{grid-template-columns:52px 1fr;gap:14px}
    .cal-date{height:56px;border-radius:12px}
    .cal-date .d{font-size:1.35rem}
    .cal-weekly{padding:18px}
    .cal-row .cal-ico{display:none}
  }

  /* ---------- BAY PLANNER (/planning/busy-nights/) ----------
     Sequential teal, light→dark = quiet→busy. Dark mode has its own steps
     (busy = brighter). Text contrast ≥ 4.5:1 on every step in both themes. */
  :root{
    --bp-quietest:#F2F8F8; --bp-quietest-fg:#0a2540;
    --bp-quieter:#D3E9EB;  --bp-quieter-fg:#0a2540;
    --bp-typical:#93C7CE;  --bp-typical-fg:#0a2540;
    --bp-busier:#2C7884;   --bp-busier-fg:#ffffff;
    --bp-busiest:#0B4F5C;  --bp-busiest-fg:#ffffff;
  }
  [data-theme="dark"]{
    --bp-quietest:#24344F; --bp-quietest-fg:#e8f0f4;
    --bp-quieter:#25485C;  --bp-quieter-fg:#e8f0f4;
    --bp-typical:#2B6878;  --bp-typical-fg:#ffffff;
    --bp-busier:#4BA6B4;   --bp-busier-fg:#0a1a2c;
    --bp-busiest:#9BDCE4;  --bp-busiest-fg:#0a1a2c;
  }
  .bp{padding:26px 0 80px}
  .bp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bp-scroll{overflow-x:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:18px 18px 12px}
  .bp-scroll:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
  .bp-table{width:100%;min-width:860px;border-collapse:separate;border-spacing:4px}
  .bp-table thead th{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-soft);padding:0 6px 8px;text-align:center}
  .bp-table thead th.bp-bay,.bp-table thead th.bp-book{text-align:left}
  .bp-table tbody th.bp-bay{position:sticky;left:0;z-index:1;background:var(--bg-2);text-align:left;font-weight:600;font-size:.95rem;color:var(--ink);padding:0 14px 0 4px;white-space:nowrap}
  .bp-table th.bp-bay a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
  .bp-table th.bp-bay a:hover{border-bottom-color:var(--teal)}
  .bp-cell{height:42px;border-radius:6px;text-align:center;font-size:.8rem;font-weight:600;border:1px solid var(--line);min-width:74px}
  .lvl-quietest{background:var(--bp-quietest);color:var(--bp-quietest-fg)}
  .lvl-quieter{background:var(--bp-quieter);color:var(--bp-quieter-fg)}
  .lvl-typical{background:var(--bp-typical);color:var(--bp-typical-fg)}
  .lvl-busier{background:var(--bp-busier);color:var(--bp-busier-fg);border-color:transparent}
  .lvl-busiest{background:var(--bp-busiest);color:var(--bp-busiest-fg);border-color:transparent}
  .bp-book{font-size:.86rem;font-weight:600;padding-left:12px;white-space:nowrap;color:var(--muted)}
  .bp-book.book-at-7{color:var(--coral-deep)}
  [data-theme="dark"] .bp-book.book-at-7{color:var(--coral)}
  .bp-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:16px 4px 34px;font-size:.88rem;color:var(--ink)}
  .bp-key-h{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-soft)}
  .bp-key-i{display:inline-flex;align-items:center;gap:8px}
  .bp-sw{width:26px;height:16px;border-radius:4px;border:1px solid var(--line-2)}
  .bp-tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:28px}
  .bp-tip{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
  .bp-tip h3{font-family:var(--display);font-size:1.18rem;font-weight:600;color:var(--ink);margin:0 0 6px}
  .bp-tip p{margin:0;color:var(--muted);line-height:1.55;font-size:.95rem}
  .bp-notes{max-width:72ch}
  .bp-notes p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 10px}
  .bp-notes b{color:var(--ink)}
  .bp-notes a{color:var(--teal)}
  .bp-notes .bp-src{color:var(--muted-soft);font-size:.85rem}
  .bp-sum{display:none}
  .bp-chip{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid var(--line);margin:0 6px 6px 0}
  @media (max-width:700px){
    .bp-scroll{padding:6px 16px;overflow:visible}
    .bp-table,.bp-table tbody{display:block;min-width:0;width:auto}
    .bp-table thead,.bp-cell{display:none}
    .bp-table tr{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
    .bp-table tr:last-child{border-bottom:0}
    .bp-table tbody th.bp-bay{position:static;padding:0;white-space:normal}
    .bp-book{padding:0;text-align:right;font-size:.8rem}
    .bp-sum{display:block;grid-column:1 / -1;order:3;padding-top:6px}
  }