/* Cosmic Wisdom Horoscope — site styles.
   LINEAGE: v0.3 | 2026-10-27 | SES-0057 | REBASED on the original site chrome (bucket _holding) — exact background, header lockup, sign grid, footer. Supersedes v0.2. (c) Monarch AI Labs Ltd | private. */
  /* Layout: single-column celestial storefront — night-sky hero, offer cards, how-it-works, waitlist. Committed dark theme. */
  :root{
    --bg:#0b1026; --panel:#131b3d; --panel-2:#1a2350;
    --fg:#eef1fb; --muted:#a6aecd; --line:rgba(255,255,255,.1);
    --gold:#e6c072; --gold-soft:#f0d79a; --blue:#9db4ff;
    --maxw:1080px; color-scheme:dark;
    --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
    --body:"Mulish", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  }
  *{box-sizing:border-box}
  body{background:var(--bg); color:var(--fg); font-family:var(--body); line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden}
  /* ambient night sky */
  .sky{position:fixed; inset:0; z-index:-2; background:
    radial-gradient(1200px 700px at 78% -8%, rgba(157,180,255,.22), transparent 60%),
    radial-gradient(900px 600px at 12% 110%, rgba(230,192,114,.12), transparent 55%),
    linear-gradient(180deg,#0a0f23 0%, #0b1026 45%, #090d20 100%)}
  .stars{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.9; background-repeat:repeat; background-size:420px 420px;
    background-image:
      radial-gradient(1.4px 1.4px at 40px 60px, rgba(255,255,255,.9), transparent),
      radial-gradient(1.2px 1.2px at 160px 180px, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,.6), transparent),
      radial-gradient(1.6px 1.6px at 220px 320px, rgba(240,215,154,.8), transparent),
      radial-gradient(1px 1px at 90px 360px, rgba(255,255,255,.5), transparent),
      radial-gradient(1.2px 1.2px at 360px 260px, rgba(157,180,255,.7), transparent)}
  @media (prefers-reduced-motion:no-preference){
    .stars{animation:drift 180s linear infinite}
    @keyframes drift{to{background-position:420px 420px}}
    .twinkle b{animation:tw var(--d,3.5s) ease-in-out var(--delay,0s) infinite alternate}
    @keyframes tw{from{opacity:.12; transform:scale(.5)} to{opacity:1; transform:scale(1.15)}}}
  .twinkle{position:fixed; inset:0; z-index:-1; pointer-events:none}
  .twinkle b{position:absolute; color:var(--gold-soft); line-height:1; opacity:.55;
    text-shadow:0 0 6px currentColor, 0 0 12px rgba(230,192,114,.5)}
  .zodiac{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
  .zodiac b{position:absolute; font-family:var(--display); font-weight:600; color:var(--gold);
    opacity:.10; line-height:1; user-select:none; transform:rotate(var(--r,0deg));
    text-shadow:0 0 18px rgba(230,192,114,.4)}
  @keyframes float{from{transform:rotate(var(--r,0deg)) translateY(0); opacity:.05}
    to{transform:rotate(var(--r,0deg)) translateY(-14px); opacity:.15}}
  @media (prefers-reduced-motion:no-preference){.zodiac b{animation:float var(--fd,12s) ease-in-out var(--dl,0s) infinite alternate}}
  .wheel{position:fixed; top:50%; left:50%; width:min(88vmin,760px); height:min(88vmin,760px);
    transform:translate(-50%,-50%); z-index:-1; pointer-events:none}
  .wheel .ring{position:absolute; inset:0; border:1px solid rgba(230,192,114,.14); border-radius:50%}
  .wheel .ring.inner{inset:15%; border-color:rgba(157,180,255,.12)}
  .wheel b{position:absolute; top:50%; left:50%; font-family:var(--display); font-weight:600;
    font-size:clamp(20px,3.6vmin,36px); color:var(--gold); opacity:.24; line-height:1;
    text-shadow:0 0 12px rgba(230,192,114,.4)}
  @media (prefers-reduced-motion:no-preference){.wheel{animation:spin 260s linear infinite}
    @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}}
  /* Find-your-sign anchor */
  .anchor-line{text-align:center; color:var(--muted); min-height:1.5em; margin:0 auto 1.6rem; max-width:46ch; font-size:1.05rem}
  .anchor-line b{color:var(--gold-soft); font-family:var(--display); font-size:1.35rem; font-weight:600}
  .signgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:.7rem}
  .sign{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:1.05rem .8rem; cursor:pointer;
    display:flex; flex-direction:column; gap:.18rem; align-items:center; text-align:center; color:inherit; font:inherit;
    transition:border-color .15s ease, transform .15s ease, background .15s ease}
  .sign:hover{transform:translateY(-2px); border-color:rgba(230,192,114,.5)}
  .sign:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
  .sign .g{font-size:2.1rem; color:var(--gold); line-height:1}
  .sign .nm{font-family:var(--display); font-size:1.3rem}
  .sign .dt{font-size:.72rem; color:var(--muted); letter-spacing:.03em}
  .sign .tr{font-size:.72rem; color:var(--blue); margin-top:.15rem}
  .sign[aria-pressed="true"]{background:linear-gradient(180deg,rgba(230,192,114,.17),rgba(230,192,114,.05));
    border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, 0 12px 30px rgba(230,192,114,.2)}
  .sign[aria-pressed="true"] .g{text-shadow:0 0 16px rgba(230,192,114,.65)}
  .wrap{max-width:var(--maxw); margin-inline:auto;
    padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
  h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.05; text-wrap:balance; margin:0}
  .eyebrow{font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); font-weight:700}
  a{color:inherit}

  /* hero */
  header.hero{position:relative; overflow:hidden; text-align:left; padding-block:clamp(54px,10vh,110px) clamp(40px,6vh,72px)}
  .hero-decor{position:absolute; inset:0; z-index:0; pointer-events:none}
  .orbit{position:absolute; inset:0; width:100%; height:100%}
  .ztile{position:absolute; font-family:var(--display); font-size:clamp(70px,11vw,150px); color:#cdd6ff; opacity:.05; line-height:1}
  header.hero .wrap{position:relative; z-index:1}
  .lockup{display:flex; align-items:center; gap:1rem; margin-bottom:1.9rem; flex-wrap:wrap}
  .lk-text{display:flex; flex-direction:column; line-height:1.04}
  .brandname{font-family:var(--display); font-weight:700; font-size:clamp(1.35rem,4.2vw,2.15rem); color:var(--fg); line-height:1.02}
  .bymon{font-weight:700; letter-spacing:.08em; color:var(--muted); font-size:clamp(.66rem,1.8vw,.8rem); text-transform:uppercase; margin-top:.2rem}
  .bymon a{color:var(--gold-soft); text-decoration:none}
  .bymon a:hover{text-decoration:underline}
  .mark{display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem;
    margin-bottom:1.6rem; font-family:var(--display); font-weight:600; color:var(--fg); line-height:1.05;
    font-size:clamp(1.55rem,5.2vw,2.9rem); letter-spacing:.01em}
  .mark .orb{width:16px; height:16px; border-radius:50%;
    background:radial-gradient(circle at 32% 30%, #fff, var(--gold) 42%, #9a7b2f 100%); box-shadow:0 0 18px rgba(230,192,114,.6)}
  header.hero h1{font-size:clamp(3rem,10vw,6.2rem); letter-spacing:.01em}
  header.hero h1 .amp{color:var(--gold); font-style:italic}
  .lede{max-width:34ch; margin:1.4rem auto 0; color:var(--muted); font-size:clamp(1.05rem,2.6vw,1.3rem)}
  .cta-row{display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem}
  header.hero .lede{margin-left:0; margin-right:0}
  header.hero .cta-row{justify-content:flex-start}
  .btn{display:inline-block; border:0; cursor:pointer; font-family:var(--body); font-weight:800;
    font-size:.98rem; padding:.9rem 1.7rem; border-radius:999px; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease}
  .btn-gold{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#2a1f05; box-shadow:0 10px 30px rgba(230,192,114,.25)}
  .btn-ghost{background:transparent; color:var(--fg); border:1px solid var(--line)}
  .btn:hover{transform:translateY(-2px)}
  .btn-gold:hover{box-shadow:0 14px 38px rgba(230,192,114,.38)}

  section{padding-block:clamp(44px,7vh,78px)}
  .sec-head{text-align:center; max-width:52ch; margin-inline:auto; margin-bottom:2.6rem}
  .sec-head h2{font-size:clamp(2rem,6vw,3rem); margin-top:.5rem}
  .sec-head p{color:var(--muted); margin:.8rem auto 0}

  /* offers */
  .offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem}
  .card{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:18px;
    padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; min-width:0;
    background:
      radial-gradient(135% 120% at 0% 0%, rgba(157,180,255,.16), transparent 48%),
      linear-gradient(165deg, #223060 0%, #18224c 52%, #111839 100%)}
  .card::before{content:attr(data-wm); position:absolute; right:-.16em; bottom:-.3em; font-family:var(--display);
    font-size:8.6rem; line-height:1; color:#eaf0ff; opacity:.06; pointer-events:none; font-variant-emoji:text}
  .card::after{content:""; position:absolute; inset:0 0 auto; height:1px;
    background:linear-gradient(90deg, transparent, rgba(230,192,114,.45), transparent); opacity:.55}
  .card > *{position:relative}
  .card .glyph{color:var(--gold); line-height:0}
  .card > .glyph{display:block; text-align:center; margin:.4rem auto .7rem}
  .card > .glyph svg{width:30px; height:30px; opacity:.9; filter:drop-shadow(0 0 5px rgba(230,192,114,.25))}
  .card h3 .glyph svg{width:24px; height:24px; vertical-align:-.3em; opacity:.9}
  /* uniform header level: float the tag out of flow so every card's icon + title align (owner 19:51) */
  .offers > .card:not(.feature-center) .tag{position:absolute; top:1.5rem; left:1.5rem; margin:0; z-index:2}
  .offers > .card:not(.feature-center) > .glyph{margin-top:2.2rem}
  .card h3{font-size:1.5rem; min-height:2.4em; display:flex; align-items:center; justify-content:center; text-align:center}
  .card .desc{color:var(--muted); font-size:.96rem; flex:1}
  .price{display:flex; align-items:baseline; gap:.4rem; margin-top:.4rem}
  .price .amt{font-family:var(--display); font-size:2rem; color:var(--fg)}
  .price .per{color:var(--muted); font-size:.85rem}
  .tag{font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft);
    background:rgba(230,192,114,.12); border:1px solid rgba(230,192,114,.5);
    padding:.28rem .72rem; border-radius:999px; align-self:flex-start}
  .card .pick{margin-top:.8rem; text-align:center; background:rgba(230,192,114,.1); border:1px solid rgba(230,192,114,.35);
    color:var(--gold-soft); font-weight:800; padding:.7rem; border-radius:12px; cursor:pointer}
  .card .pick:hover{background:rgba(230,192,114,.18)}

  /* steps */
  .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.4rem; counter-reset:s}
  .step{min-width:0}
  .step .n{counter-increment:s; font-family:var(--display); font-size:2.6rem; color:var(--gold); line-height:1}
  .step .n::before{content:"0" counter(s)}
  .step h3{font-size:1.25rem; margin:.4rem 0 .3rem}
  .step p{color:var(--muted); font-size:.95rem; margin:0}

  /* waitlist */
  .join{position:relative; overflow:hidden; text-align:center; border-radius:28px; padding:clamp(32px,5vw,60px);
    background:radial-gradient(120% 150% at 50% -25%, rgba(157,180,255,.16), transparent 55%), linear-gradient(180deg, rgba(34,48,96,.5), rgba(17,24,60,.5));
    border:1px solid rgba(230,192,114,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 32px 90px -46px rgba(0,0,0,.85);
    backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
  .join form{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.4rem}
  .join input{background:rgba(10,16,40,.5); border:1px solid rgba(157,180,255,.26); color:var(--fg); font-family:var(--body);
    font-size:1rem; padding:.9rem 1.2rem; border-radius:999px; min-width:min(340px,92vw);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px)}
  .join input::placeholder{color:rgba(230,236,255,.42)}
  .join input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(230,192,114,.22), inset 0 1px 3px rgba(0,0,0,.45)}
  .join form .btn-gold{box-shadow:0 10px 34px -10px rgba(230,192,114,.55)}
  .join .ok{margin-top:1.2rem; color:var(--gold-soft); font-weight:700}
  footer{border-top:1px solid var(--line); padding-block:3rem 2.6rem; text-align:center; color:var(--fg); font-size:.85rem}
  .foot-h{font-family:var(--display); font-weight:600; color:#fff; font-size:1.3rem; margin-bottom:1.15rem}
  .foot-brands{display:flex; flex-wrap:wrap; gap:1rem 2.2rem; justify-content:center; align-items:flex-start; max-width:62ch; margin:0 auto}
  .foot-brands a{text-decoration:none; display:flex; flex-direction:column; gap:.1rem; min-width:150px; max-width:230px}
  .foot-brands a b{font-family:var(--display); color:var(--gold); font-weight:700; font-size:1.08rem; letter-spacing:.01em}
  .foot-brands a span{color:var(--fg); opacity:.82; font-size:.8rem; line-height:1.4}
  .foot-brands a:hover b{color:var(--gold-soft); text-decoration:underline}
  .foot-div{height:1px; background:linear-gradient(90deg,transparent,rgba(230,192,114,.4),transparent); max-width:460px; margin:1.9rem auto}
  .foot-brandrow{display:flex; align-items:center; justify-content:center; gap:.5rem; color:#fff; font-size:.95rem}
  .foot-trust{display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:center; align-items:center; margin:1.2rem auto 0; font-size:.82rem}
  .foot-trust a{color:var(--gold-soft); text-decoration:none}
  .foot-trust a:hover{color:var(--gold); text-decoration:underline}
  .foot-trust span{color:var(--fg); opacity:.3}
  .fine{color:var(--fg); opacity:.6; font-size:.74rem; margin-top:1.1rem}
  .topbar{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; border-bottom:1px solid var(--line)}
  .brand{display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--fg); font-family:var(--display); font-size:1.75rem}
  .brand:hover{color:var(--gold-soft)}
  .mstar{display:inline-block; vertical-align:middle; filter:drop-shadow(0 0 7px rgba(230,192,114,.4))}
  .hero-star{filter:drop-shadow(0 0 22px rgba(230,192,114,.55))}
  @keyframes turn{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:no-preference){.hero-star{animation:turn 120s linear infinite}}
  .topbar-note{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
  @media (max-width:430px){.topbar-note{display:none}}
  footer .brand-link{color:var(--gold-soft); text-decoration:none; font-weight:700}
  footer .brand-link:hover{text-decoration:underline}

/* ===================================================================
   D0/D1 functional components — grafted onto the original chrome,
   themed to the original tokens (deep purple-dark space + gold).
   SES-0057 rebase. =================================================== */

/* sticky multi-page header: original lockup (rainbow star + name + By Monarch) + nav */
.site-head{position:sticky; top:0; z-index:30; backdrop-filter:blur(8px);
  background:rgba(11,16,38,.78); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.7rem; flex-wrap:wrap}
.site-head .brand{gap:.6rem}
.site-head .hero-star{width:42px; height:42px}
.site-head .lk-text{display:flex; flex-direction:column; line-height:1.02}
.site-head .brandname{font-size:clamp(1.05rem,2.6vw,1.45rem)}
.site-head nav{display:flex; gap:1.25rem; font-size:.95rem; flex-wrap:wrap; align-items:center}
.site-head nav a{color:var(--muted); text-decoration:none}
.site-head nav a:hover{color:var(--gold-soft)}

/* generic text + components */
.muted{color:var(--muted)}
.dim{color:var(--muted); opacity:.7; font-size:.85rem}
.badge{display:inline-block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:.22rem .7rem}
.panel{background:linear-gradient(165deg,#1a2350 0%,#131b3d 60%,#111839 100%);
  border:1px solid var(--line); border-radius:16px; padding:1.5rem; margin:1.2rem 0}
.notice{border-left:3px solid var(--gold); background:rgba(230,192,114,.07);
  padding:.9rem 1.1rem; border-radius:10px; color:var(--muted); font-size:.92rem; margin:1rem 0}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; margin:1.6rem 0; align-items:stretch}
.btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#2a1f05;
  box-shadow:0 10px 30px rgba(230,192,114,.25)}
.btn-primary:hover{box-shadow:0 14px 38px rgba(230,192,114,.38)}
.btn-row{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1rem}
/* CTA buttons level + centred across offer cards */
.card .btn-row{margin-top:auto; padding-top:14px; justify-content:center}
.card .btn-row .btn{min-width:170px; text-align:center}

/* forms */
form.birth label{display:block; font-size:.85rem; color:var(--muted); margin:1rem 0 .3rem}
form.birth input,form.birth select{width:100%; padding:.72rem .9rem; border-radius:10px;
  border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--fg);
  font-family:var(--body); font-size:.95rem}
form.birth input:focus,form.birth select:focus{outline:2px solid var(--gold); outline-offset:1px}

/* chart page */
.chart-layout{display:grid; gap:26px; grid-template-columns:360px 1fr; align-items:start}
@media(max-width:820px){.chart-layout{grid-template-columns:1fr}}
.wheel-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:12px;
  aspect-ratio:1/1; max-width:560px; margin:0 auto}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--muted); margin-top:12px}
.legend i{display:inline-block; width:22px; height:0; border-top:2px solid; vertical-align:middle; margin-right:5px}
table.pos{width:100%; border-collapse:collapse; font-size:.88rem; margin-top:18px}
table.pos th,table.pos td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line)}
table.pos th{color:var(--muted); font-weight:600}
.retro{color:#ff9f6b}

/* enriched, site-specific footer (monarchxai-style legal line + site nav) */
.foot-legal{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35rem .8rem;
  color:var(--muted); font-size:.82rem; margin-bottom:1.1rem}
.foot-legal img{opacity:.95}
.foot-legal b{color:var(--fg); font-weight:700; font-family:var(--display); letter-spacing:.02em}
.foot-legal .sep{opacity:.4}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem 1.2rem;
  margin:0 auto 1.6rem; font-size:.9rem; max-width:72ch}
.foot-nav a{color:var(--gold-soft); text-decoration:none}
.foot-nav a:hover{color:var(--gold); text-decoration:underline}
.foot-social{display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:1rem; color:var(--muted); font-size:.85rem}
.foot-social a{color:var(--gold-soft); text-decoration:none}
.foot-social a:hover{color:var(--gold); text-decoration:underline}

/* centred hero (owner 11:11) */
header.hero{text-align:center}
header.hero .lede{margin-left:auto; margin-right:auto}
header.hero .cta-row{justify-content:center}

/* header sign-in CTA + newsletter checkbox guard (SES-0057) */
.site-head .nav-cta{padding:.5rem 1.15rem; font-size:.9rem; white-space:nowrap}
.join input[type=checkbox]{min-width:auto; width:18px; height:18px; padding:0}

/* offers: fixed columns so cards align in tidy columns; centre a lone last card (owner 11:38) */
.offers{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.offers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.offers{grid-template-columns:1fr}}
@media(min-width:901px){.offers .feature-center{grid-column:2}}

/* Sign-in CTA text: white against the gold (owner 11:45) — beats .site-head nav a muted colour */
.site-head nav a.nav-cta,.site-head nav a.nav-cta:hover{color:#fff;text-decoration:none;font-weight:800}

/* ambient sound toggle — low-key, bottom-left, off by default (owner 11:42) */
.amb-toggle{position:fixed; left:16px; bottom:16px; z-index:40; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line2); background:rgba(13,11,26,.55); backdrop-filter:blur(6px); cursor:pointer;
  display:grid; place-items:center; opacity:.45; transition:opacity .2s ease, transform .15s ease, border-color .2s}
.amb-toggle:hover{opacity:1; transform:translateY(-1px)}
.amb-toggle svg{width:18px; height:18px}
.amb-toggle rect{fill:var(--gold-soft)}
.amb-toggle.on{opacity:.9; border-color:rgba(230,192,114,.55)}
.amb-toggle.on rect{fill:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  .amb-toggle.on .wv{transform-box:fill-box; transform-origin:center; animation:ambeq 1.6s ease-in-out infinite}
  .amb-toggle.on .wv:nth-child(2){animation-delay:.25s}
  .amb-toggle.on .wv:nth-child(3){animation-delay:.5s}
  @keyframes ambeq{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}}

/* hero lede: use more horizontal width, easier left-to-right read (owner 11:48) */
header.hero .lede{max-width:720px}

/* section heads: use more horizontal width too (owner 11:49) */
.sec-head{max-width:760px}

/* "Your child's chart" as a full-width rectangle under the 3 columns — banner layout (owner 11:53) */
@media(min-width:561px){
  .offers .feature-center{grid-column:1 / -1; flex-direction:column; align-items:center; text-align:center; gap:.7rem}
  .offers .feature-center .fc-main{max-width:720px; display:flex; flex-direction:column; align-items:center}
  .offers .feature-center .fc-main h3{display:flex; align-items:center; justify-content:center; gap:.5rem}
  .offers .feature-center .fc-cta{display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:.2rem}
  .offers .feature-center .fc-cta .price{justify-content:center}
  .offers .feature-center .fc-cta .btn-row{margin-top:.4rem; justify-content:center}
}

/* ===== UNIFIED CTA BUTTON SYSTEM (owner 11:58) — one gold, one size/font; white on gold, gold on ghost.
   Cross-site standard; appended last so it overrides earlier .btn/.btn-gold/.btn-primary defs. ===== */
.btn{font-family:var(--body); font-weight:800; font-size:1rem; line-height:1; letter-spacing:.01em;
  padding:.85rem 1.8rem; border-radius:999px; border:1px solid transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease}
.btn-gold,.btn-primary{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#fff;
  box-shadow:0 10px 28px rgba(230,192,114,.28); text-shadow:0 1px 2px rgba(74,52,6,.45)}
.btn-gold:hover,.btn-primary:hover{color:#fff; filter:brightness(1.04); transform:translateY(-2px);
  box-shadow:0 14px 36px rgba(230,192,114,.42); text-decoration:none}
.btn-ghost{background:transparent; color:var(--gold-soft); border:1px solid rgba(230,192,114,.5); text-shadow:none}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold); transform:translateY(-2px); text-decoration:none}
.site-head .nav-cta{padding:.58rem 1.25rem; font-size:.92rem}  /* same system, trimmed for the header */

/* compact footer — same content, much less height (owner 12:02) */
footer{padding-block:1.5rem 1.3rem; margin-top:34px}
footer .foot-nav{margin:0 auto .85rem}
footer .foot-div{margin:.85rem auto}
footer .foot-brandrow{font-size:.95rem}
footer .foot-trust{margin:.65rem auto 0}

/* ===== FOG-LIGHT SHEEN on blue surfaces (owner 12:18) — break up the stark flat blue
   with a soft, barely-visible diagonal light transition; same low-key, token-based logic
   as the chrome. Keeps the existing top-left glow + gold hairline; adds a cool highlight
   (top-left) fading to a faint deepening (bottom-right) + a thin top inner-rim light.
   Applied to .card and .panel so the treatment is consistent across every blue box. ===== */
.card{
  background-image:
    radial-gradient(135% 120% at 0% 0%, rgba(157,180,255,.16), transparent 48%),
    linear-gradient(125deg, rgba(200,214,255,.055) 0%, transparent 42%, transparent 60%, rgba(120,140,220,.06) 100%),
    linear-gradient(165deg, #223060 0%, #18224c 52%, #111839 100%);
}
.panel{
  background-image:
    radial-gradient(130% 115% at 2% 0%, rgba(157,180,255,.10), transparent 52%),
    linear-gradient(125deg, rgba(200,214,255,.05) 0%, transparent 44%, transparent 60%, rgba(120,140,220,.055) 100%),
    linear-gradient(165deg, #1a2350 0%, #131b3d 60%, #111839 100%);
}
.card, .panel{ box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px -20px rgba(0,0,0,.55); }

/* ===== Funnel-card header standard (owner 12:20) — title + price ALWAYS top-centre on a
   call-to-action/sales-funnel card. Scoped to grid cards; the horizontal child banner
   (.feature-center) keeps its own row layout. ===== */
.card h3{text-align:center}
.card .price{justify-content:center}
.offers .feature-center .fc-main h3{text-align:center}
.offers .feature-center .fc-main .tag{align-self:center}

/* ===== FINE WHITE EXTERIOR HAIRLINE on all boxes (owner 12:46) — lift the edge off the dark
   so cards/panels read as defined, not stark fills. Define --line2 (was undefined → accidental
   currentColor) so accent panels match. ===== */
:root{ --line2:rgba(255,255,255,.26); }
.card, .panel{ border:1px solid rgba(255,255,255,.22); }

/* ===== WHITE body text inside boxes (owner 12:47) — follow the explainer-panel look: lift the
   muted greys to crisp white on the blue for readability. Fine print (.dim) left softer for
   hierarchy. ===== */
.card .desc, .card .muted, .card li, .panel .muted, .panel p, .panel li{ color:var(--fg); }

/* ===== themed watermark + fog on deep-blue panels (owner 27 Oct) ===== */
.panel{ position:relative; overflow:hidden; }
.panel::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(130% 90% at 88% 12%, rgba(230,192,114,.07), transparent 58%),
            radial-gradient(90% 80% at 8% 92%, rgba(130,150,230,.06), transparent 55%); }
.panel::after{ content:"\2727"; position:absolute; right:-.06em; bottom:-.2em; z-index:0;
  font-family:var(--display); font-size:9rem; line-height:1; color:rgba(230,192,114,.05); pointer-events:none; }
.panel > *{ position:relative; z-index:1; }