/**
 * Shared top navigation styles.
 *
 * Extracted from _mockups/nav-premium-v2.html (winning variants):
 *   - Dropdown Style C       — Horoscopes, Tarot, Numerology
 *   - Mega-menu B            — Deep Readings
 *   - Premium CTA T1/T3/T4/T5 — admin toggles via Config::premiumCtaVariant()
 *   - Moon widget (waxing-crescent SVG)
 *   - Mobile State-1 hamburger row (moon + site name + burger)
 *   - Mobile sub-icons as bare glyphs (no blue boxes)
 *
 * Mockup demo prefixes (.dd-c, .mm-b, .cta--t1, etc.) are preserved so there's
 * no collision with other site styles.
 */

/* CSS custom properties scoped to the header so they don't leak site-wide. */
.site-header,
.mobile-menu {
  --teal-dark:#0f3b3b;
  --teal-mid:#245c5c;
  --teal-light:#97cdca;
  --teal-lighter:#e7f6f5;
  --gold:#e4b862;
  --gold-dark:#d49a40;
  --gold-deep:#a97a26;
  --plum:#4b3a55;
  --plum-soft:#5c3358;
  --cream:#f6f3ee;
  --nav-border:#e0d9d0;
  --fire:#c94a1a;
  --earth:#5e7b5e;
  --air:#6c5cb5;
  --water:#2a7a88;
}

/* ============= HEADER BAR ============= */
.site-header{background:#fbfbfa;border-bottom:1px solid var(--nav-border);position:relative;overflow:visible}
.site-header .header-bar{max-width:1200px;margin:0 auto;padding:0.4rem 1rem 1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:150px;column-gap:1.25rem}
.site-header .header-left,
.site-header .header-right{display:flex;align-items:center;gap:1rem;width:100%}
.site-header .main-nav{display:flex;align-items:center;gap:1.7rem}
.site-header .header-left .main-nav{margin-left:auto;margin-right:auto}
.site-header .header-right .main-nav{margin-left:auto;margin-right:auto}
.site-header .logo img{display:block;width:123px;height:auto;max-height:91px;object-fit:contain}
.site-header .logo img.site-logo--mobile{display:none}
.site-header .nav-item,
.site-header .main-nav > a{font-size:1.02rem;font-weight:600;line-height:1;text-decoration:none;background:none;border:none;cursor:pointer;color:#111;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem 0;white-space:nowrap;font-family:'Inter',sans-serif}
.site-header .nav-item:hover,
.site-header .main-nav > a:hover{color:var(--teal-dark)}
.site-header .nav-item[aria-current="page"],
.site-header .main-nav > a[aria-current="page"]{color:var(--teal-dark)}
.site-header .dropdown{position:relative}
.site-header .dropdown > .dd-c,
.site-header .dropdown > .mm-b{display:none}
.site-header .dropdown:hover > .dd-c,
.site-header .dropdown:focus-within > .dd-c,
.site-header .dropdown.is-open > .dd-c,
.site-header .dropdown:hover > .mm-b,
.site-header .dropdown:focus-within > .mm-b,
.site-header .dropdown.is-open > .mm-b{display:grid}
/* Invisible bridge so moving mouse from button down into dropdown
   doesn't break :hover across the .65rem margin gap. */
.site-header .dropdown > .dd-c::before{content:"";position:absolute;left:0;right:0;top:-.8rem;height:.8rem;background:transparent}
.site-header .dropdown > .mm-b::before{content:"";position:absolute;left:0;right:0;top:-1.2rem;height:1.2rem;background:transparent}
/* Extend button hitbox down so cursor stays on .dropdown during traversal. */
.site-header .dropdown > .nav-item{padding-bottom:.8rem;margin-bottom:-.8rem}

/* ============= MOON WIDGET ============= */
#moon-phase-widget{display:flex;flex-direction:column;align-items:center;gap:.15rem;text-align:center}
#moon-phase-svg{width:100px;height:100px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
#moon-phase-svg svg{width:100%;height:100%;display:block}
#moon-phase-text{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.15rem;color:#0f3b3b;letter-spacing:.01em;line-height:1.2;margin-top:-.65rem}
#moon-phase-widget .moon-sub{display:flex;width:100%;justify-content:center;gap:.25rem;align-items:center;font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;color:rgba(15,59,59,.85);line-height:1.2;text-align:center}
#moon-phase-widget #moon-in-text{color:#5c3358}
.moon-glyph{font-size:1.25rem;line-height:1;vertical-align:middle;text-shadow:0 0 3px rgba(0,0,0,0.06);font-family:'Inter','Montserrat',system-ui,sans-serif}
#moon-sign-glyph{font-weight:500}
.moon-glyph[data-element="fire"]{color:#c94a1a}
.moon-glyph[data-element="earth"]{color:#5e7b5e}
.moon-glyph[data-element="air"]{color:#6c5cb5}
.moon-glyph[data-element="water"]{color:#2a7a88}

/* ============= CTA BUTTONS (T1/T3/T4/T5 + Dashboard) ============= */
.bch-cta-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1.1rem;border-radius:999px;font-family:'Inter',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background .2s ease}
.bch-cta-btn:hover{transform:translateY(-1px)}
.bch-cta-btn__spark{font-size:.95em;line-height:1}

/* T1 — Dark teal pill, gold text */
.cta--t1{background:#0f3b3b;color:#e4b862;border:1px solid #0f3b3b;box-shadow:0 6px 18px rgba(15,59,59,.22)}
.cta--t1:hover{background:#0c3030}
.cta--t1 .bch-cta-btn__spark{color:#e4b862}

/* T3 — Split button: teal body + gold tab */
.cta--t3{padding:0;background:#0f3b3b;color:#fff;border:1px solid #0f3b3b;overflow:hidden;box-shadow:0 6px 18px rgba(15,59,59,.22);line-height:1;gap:0}
.cta--t3 .body,.cta--t3 .tab{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.cta--t3 .body{padding:.75rem 1rem .75rem 1.05rem}
.cta--t3 .tab{padding:.75rem 1rem;background:linear-gradient(135deg,#e4b862 0%,#d49a40 100%);color:#0f3b3b;font-weight:700;border-left:1px solid rgba(0,0,0,.08)}

/* T4 — Gold solid with dark teal spark */
.cta--t4{background:linear-gradient(135deg,#e4b862 0%,#d49a40 100%);color:#0f3b3b;border:1px solid #d49a40;box-shadow:0 6px 18px rgba(212,154,64,.35)}
.cta--t4 .bch-cta-btn__spark{color:#0f3b3b;text-shadow:0 1px 0 rgba(255,255,255,.4)}

/* T5 — Glassy teal outline with animated gold star */
.cta--t5{background:linear-gradient(180deg,rgba(151,205,202,.14),rgba(151,205,202,.04));color:#0f3b3b;border:1.5px solid #245c5c;backdrop-filter:blur(4px)}
.cta--t5 .bch-cta-btn__spark{color:#a97a26;animation:bch-cta-twinkle 1.8s ease-in-out infinite}
@keyframes bch-cta-twinkle{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

/* Dashboard state */
.cta--dashboard{background:#0f3b3b;color:#fff;border:1px solid #0f3b3b}
.cta--dashboard:hover{background:#0c3030}

/* ============= DROPDOWN STYLE C ============= */
.dd-c{position:absolute;top:100%;left:0;background:#fff;border:1px solid #e0d9d0;border-radius:.9rem;width:520px;z-index:999;box-shadow:0 22px 50px rgba(15,59,59,.18);padding:1rem;margin-top:.65rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* Right-aligned variant when anchored on right side */
.header-right .dd-c{left:auto;right:0}
.dd-c .col h5{font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;color:#245c5c;margin:0 0 .5rem;font-weight:700}
.dd-c .col a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .5rem;font-size:.88rem;font-weight:600;color:#0f3b3b;text-decoration:none;border-radius:.4rem}
.dd-c .col a:hover{background:#f6f3ee}
.dd-c .col a .arr{opacity:.45;font-size:.9rem;transition:transform .15s,opacity .15s}
.dd-c .col a:hover .arr{opacity:1;transform:translateX(2px);color:#a97a26}
.dd-c .featured{grid-column:1 / -1;background:linear-gradient(135deg,#091c1c 0%,#0b2020 55%,#0a1e1e 100%);color:#fff;border-radius:.7rem;padding:.95rem 1.1rem;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:.4rem 1rem;align-items:center;text-decoration:none;border:1.5px solid #d4b87e;position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(212,184,126,.25),0 8px 20px rgba(10,30,30,.3)}
.dd-c .featured::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#e4b862 20%,#d4b87e 50%,#e4b862 80%,transparent);opacity:.9}
.dd-c .featured .fg{font-size:1.55rem;color:#e4b862;flex-shrink:0;align-self:center;grid-row:1/3;grid-column:1}
.dd-c .featured .ft{font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.15;color:#f0ebe0;display:block;text-align:left;grid-row:1;grid-column:2}
.dd-c .featured .fs{font-size:.92rem;color:#f5d789;letter-spacing:.01em;display:block;font-style:italic;text-align:right;font-family:'Fraunces',serif;font-weight:500;grid-row:2;grid-column:2}

/* ============= MEGA-MENU B (Deep Readings) ============= */
.mm-b{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e0d9d0;border-radius:1rem;width:820px;z-index:999;box-shadow:0 28px 60px rgba(15,59,59,.22);padding:0;margin-top:.65rem;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden}
.mm-b .feat{background:linear-gradient(135deg,#091c1c 0%,#0b2020 55%,#0a1e1e 100%);color:#f0ebe0;padding:1.3rem;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;position:relative;border-right:1px solid rgba(201,169,110,.25);overflow:hidden;text-decoration:none}
.mm-b .feat::before{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,#C9A96E 30%,#97cdca 60%,#C9A96E 80%,transparent);opacity:.6}
.mm-b .feat::after{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;background:radial-gradient(circle,rgba(201,169,110,.11) 0%,transparent 65%);border-radius:50%;pointer-events:none}
.mm-b .feat .kicker{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;background:linear-gradient(135deg,#245c5c 0%,#1e4f4f 100%);border:1px solid rgba(201,169,110,.35);font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#e4b862;font-weight:700;padding:.32rem .65rem;border-radius:999px;margin-bottom:.9rem;position:relative;box-shadow:0 2px 6px rgba(10,30,30,.4)}
.mm-b .feat h5{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:1.55rem;line-height:1.15;margin:0 0 .7rem;position:relative;color:#f0ebe0}
.mm-b .feat h5 em{color:#d4b87e;font-style:italic}
.mm-b .feat p{font-size:.86rem;line-height:1.5;color:rgba(240,235,224,.82);margin:0;position:relative;font-family:'Inter',sans-serif}
.mm-b .feat .foot{position:relative;margin-top:.35rem}
.mm-b .feat .price-row{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.35rem;position:relative}
.mm-b .feat .price-row .n{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:700;color:#C9A96E;line-height:1}
.mm-b .feat .price-row .l{font-size:.78rem;color:rgba(240,235,224,.7)}
.mm-b .feat .go{display:inline-block;background:linear-gradient(135deg,#d4b87e,#C9A96E);color:#0f3b3b;padding:.7rem 1.3rem;border-radius:999px;font-weight:700;font-size:.88rem;text-decoration:none;position:relative;box-shadow:0 6px 18px rgba(201,169,110,.32);transition:transform .15s}
.mm-b .feat .go:hover{transform:translateY(-1px)}
.mm-b .list{padding:1.2rem 1.1rem;display:flex;flex-direction:column;gap:.35rem;background:#fff;align-items:stretch}
.mm-b .list .ribbon{display:inline-flex;align-items:center;gap:.4rem;align-self:center;background:linear-gradient(135deg,#245c5c 0%,#1e4f4f 100%);border:1px solid rgba(201,169,110,.35);color:#e4b862;font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;padding:.38rem .8rem;border-radius:999px;margin:.1rem 0 .85rem;box-shadow:0 2px 6px rgba(10,30,30,.15);text-decoration:none}
.mm-b .list a{display:flex;align-items:center;justify-content:space-between;padding:.55rem .65rem;border-radius:.55rem;text-decoration:none;color:#0f3b3b;font-weight:600;font-size:.92rem;gap:.5rem;transition:background .15s;min-height:40px}
.mm-b .list a:hover{background:#f6f3ee}
.mm-b .list a .lbl{display:flex;align-items:center;gap:.65rem;font-family:'Inter',sans-serif;font-weight:600;font-size:.88rem;color:#0f3b3b;font-style:normal}
.mm-b .list a .em{width:24px;display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;color:#0f3b3b}
.mm-b .list a .p{background:linear-gradient(135deg,#fdf5e3,#f5e9ca);color:#a97a26;font-weight:700;font-size:.72rem;padding:.22rem .55rem;border-radius:999px;border:1px solid rgba(201,169,110,.3);line-height:1;align-self:center;white-space:nowrap}
.mm-b .list .upsell{margin-top:.5rem;padding-top:.6rem;border-top:1px dashed rgba(201,169,110,.3)}
.mm-b .list .upsell a{background:linear-gradient(135deg,#fdf6e8,#f8eed1);color:#a97a26;border:1px solid rgba(201,169,110,.45);box-shadow:0 2px 8px rgba(201,169,110,.15)}
.mm-b .list .upsell a:hover{background:linear-gradient(135deg,#f8eed1,#f0e2b8);transform:translateY(-1px)}
.mm-b .list .upsell a .p{background:linear-gradient(135deg,#e4b862,#d49a40);color:#0f3b3b;border-color:#d49a40}

/* ============= MOBILE ============= */
.site-header .hamburger{display:none;width:34px;height:34px;flex-direction:column;justify-content:center;gap:4px;padding:8px;border:none;background:none;cursor:pointer}
.site-header .hamburger span{display:block;height:2px;background:#0f3b3b;border-radius:2px}
.site-header .mobile-menu{display:none}

/* Mobile rows (top logo + collapsible moon/burger) — hidden on desktop */
.site-header .mobile-bar,
.site-header .mobile-bar-top{display:none}

@media (max-width: 900px){
  .site-header{position:sticky;top:0;z-index:1000}
  .site-header .header-bar{grid-template-columns:1fr;min-height:auto;padding:0;column-gap:0}
  .site-header .header-left,
  .site-header .header-right,
  .site-header .header-center,
  .site-header .main-nav,
  .site-header #moon-phase-widget{display:none}

  .site-header .mobile-bar-top{display:flex !important;align-items:center;justify-content:center;padding:.55rem .75rem;grid-column:1 / -1;min-height:56px;background:#fbfbfa}
  .site-header .mobile-bar-top a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;line-height:0}
  /* Explicit height (not max-height) + width so SVGs without intrinsic px
     dimensions always render in flex parents. */
  .site-header .mobile-bar-top img.site-logo--mobile{display:block !important;height:44px;width:auto;max-width:75vw}

  .site-header .mobile-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .75rem;border-top:1px solid var(--nav-border);grid-column:1 / -1;max-height:56px;opacity:1;overflow:hidden;transition:max-height .25s ease,opacity .2s ease,padding .25s ease,border-color .2s ease}
  .site-header.is-condensed .mobile-bar{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-color:transparent}
  .site-header .mobile-bar .mob-moon{display:flex;align-items:center;gap:.6rem;min-width:0;flex:1}
  .site-header .mobile-bar .mob-moon .svg-wrap{width:36px;height:36px;flex-shrink:0}
  .site-header .mobile-bar .mob-moon .svg-wrap svg{width:100%;height:100%;display:block}
  .site-header .mobile-bar .mob-moon .txt{line-height:1.15;min-width:0}
  .site-header .mobile-bar .mob-moon .phase{font-family:'Montserrat',sans-serif;font-weight:700;font-size:.8rem;color:#0f3b3b;white-space:nowrap}
  .site-header .mobile-bar .mob-moon .sign{font-size:.7rem;color:#5c3358;font-weight:600;white-space:nowrap}
  .site-header .hamburger{display:inline-flex;flex-shrink:0}

  .site-header .mobile-menu{display:none;flex-direction:column;background:#fbfbfa;border-top:1px solid var(--nav-border);padding:.5rem 0;grid-column:1 / -1;max-height:calc(100vh - 120px);overflow-y:auto}
  .site-header .mobile-menu.open{display:flex}
  .site-header .mobile-parent,
  .site-header .mobile-menu .mobile-link{padding:.85rem 1.1rem;border-bottom:1px solid rgba(151,205,202,.18);font-weight:600;color:#0f3b3b;display:flex;justify-content:space-between;align-items:center;background:none;border-left:none;border-right:none;border-top:none;text-align:left;font-family:'Inter',sans-serif;font-size:1rem;cursor:pointer;text-decoration:none}
  .site-header .mobile-sublinks{display:none;padding:.5rem 1.1rem;background:#f6f3ee;flex-direction:column;gap:.4rem}
  .site-header .mobile-sublinks.open{display:flex}
  /* Bare-glyph icons — no blue boxes */
  .site-header .mobile-sublinks a{text-decoration:none;color:#0f3b3b;font-size:.9rem;font-weight:600;padding:.45rem .25rem;display:flex;align-items:center;gap:.7rem}
  .site-header .mobile-sublinks a .ic{width:20px;display:inline-flex;align-items:center;justify-content:center;color:#245c5c;font-size:1rem;flex-shrink:0;background:none;border:none}
  .site-header .mobile-link--premium,
  .site-header .mobile-link--dashboard{margin:1rem;background:linear-gradient(135deg,#091c1c 0%,#0b2020 55%,#0a1e1e 100%);color:#f0ebe0;padding:1.1rem 1rem;border-radius:.9rem;text-align:center;display:block;border:1px solid rgba(201,169,110,.3);box-shadow:0 10px 28px rgba(10,30,30,.35);justify-content:center;font-weight:700}

  /* Mobile invitation-card CTA (pulled from _mockups/nav-premium-v2.html .mob-cta). */
  .site-header .mob-cta{display:block;margin:1rem;padding:1.15rem 1.05rem 1.25rem;background:linear-gradient(135deg,#091c1c 0%,#0b2020 55%,#0a1e1e 100%);color:#f0ebe0;border:1px solid rgba(201,169,110,.3);border-radius:.9rem;text-align:center;text-decoration:none;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(10,30,30,.35)}
  .site-header .mob-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:1.5px;background:linear-gradient(90deg,transparent,#C9A96E 30%,var(--teal-light) 60%,#C9A96E 80%,transparent);opacity:.6}
  .site-header .mob-cta::after{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(201,169,110,.12) 0%,transparent 65%);border-radius:50%;pointer-events:none}
  .site-header .mob-cta .eye{font-family:'Montserrat',sans-serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#C9A96E;font-weight:700;margin-bottom:.55rem;display:block;position:relative}
  .site-header .mob-cta .tt{font-family:'Fraunces',serif;font-style:italic;font-weight:700;font-size:1.15rem;line-height:1.2;color:#f0ebe0;display:block;margin-bottom:.35rem;position:relative}
  .site-header .mob-cta .ss{font-size:.72rem;color:rgba(240,235,224,.78);display:block;margin-bottom:.75rem;position:relative}
  .site-header .mob-cta .btn{display:inline-block;background:linear-gradient(135deg,#d4b87e,#C9A96E);color:var(--teal-dark);padding:.55rem 1.1rem;border-radius:999px;font-weight:700;font-size:.85rem;box-shadow:0 6px 18px rgba(201,169,110,.3);position:relative}
}

@media (min-width: 901px){
  .site-header .mobile-bar,
  .site-header .mobile-bar-top,
  .site-header .mobile-menu,
  .site-header .hamburger{display:none !important}
}

/* ─── My Readings CTA variants (purchaser state — Spec 4a) ───────────────── */

/* T1: dark plain pill with crescent moon glyph (default) */
.bch-cta-btn.cta--myr-t1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #0f3b3b;
    color: #97cdca;
    border: 1px solid rgba(151, 205, 202, 0.4);
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.bch-cta-btn.cta--myr-t1:hover {
    background: #134848;
    border-color: rgba(151, 205, 202, 0.7);
    color: #fff;
}
.bch-cta-btn.cta--myr-t1 .bch-cta-btn__spark {
    font-size: 16px;
    line-height: 1;
    color: #c9a85d;
}

/* T3: split button — teal body + gold tab (mirrors .cta--t3) */
.bch-cta-btn.cta--myr-t3 {
    padding: 0;
    gap: 0;
    line-height: 1;
    background: #0f3b3b;
    color: #fff;
    border: 1px solid #0f3b3b;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(15, 59, 59, .22);
}
.bch-cta-btn.cta--myr-t3:hover { background: #0c3030; }
.bch-cta-btn.cta--myr-t3 .body,
.bch-cta-btn.cta--myr-t3 .tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bch-cta-btn.cta--myr-t3 .body {
    padding: .75rem 1rem .75rem 1.05rem;
    color: #fff;
    font-weight: 600;
}
.bch-cta-btn.cta--myr-t3 .tab {
    padding: .75rem 1rem;
    background: linear-gradient(135deg, #e4b862 0%, #d49a40 100%);
    color: #0f3b3b;
    font-weight: 700;
    border-left: 1px solid rgba(0, 0, 0, .08);
}

/* T4: bordered/outline with subtle gold accent */
.bch-cta-btn.cta--myr-t4 {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: transparent;
    color: #c9a85d;
    border: 1.5px solid #c9a85d;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.bch-cta-btn.cta--myr-t4:hover {
    background: #c9a85d;
    color: #0f3b3b;
}

/* ── Returning-user "Log in" sub-link under primary CTA ──────────────────────
   Tiny text-link absolutely positioned below the "Try Free" button so the
   button stays vertically centered with the nav (no flex-column reflow). */
.bch-cta-stack {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.bch-cta-sublink {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    color: #0f3b3b;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 0.02em;
    line-height: 1;
    transition: color .15s;
    white-space: nowrap;
}
/* Two-tone: dim the question so the action ("Sign in") pops */
.bch-cta-sublink .q {
    opacity: 0.6;
    font-weight: 400;
}
.bch-cta-sublink .u {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}
.bch-cta-sublink:hover { color: #245c5c; }
.bch-cta-sublink:hover .q { opacity: 0.8; }

/* Mobile: matching sub-link below the trial card. Larger font + tap-target
   padding (≥44px height) for accessibility compliance. */
.mob-login-sublink {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 14px 18px;
    color: #0f3b3b;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: 0.02em;
}
.mob-login-sublink .q {
    opacity: 0.6;
    font-weight: 400;
}
.mob-login-sublink .u {
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}
.mob-login-sublink:hover { color: #245c5c; }
.mob-login-sublink:hover .q { opacity: 0.8; }
