/* ===========================================================================
   Astaela, shared design system
   Flat dark aesthetic: Space Grotesk + IBM Plex Mono, ONE accent colour (pink
   #ff5d8f), no gradients/glows, no gold, no violet. WebGL globe centerpiece.
   Loaded by both the landing page (/) and the tool (/app).
   =========================================================================== */

:root{
  --bg:#08090c; --bg-2:#0e1016; --surface:#12151d;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.055);
  --line-strong:rgba(255,255,255,.4);   /* form-control resting borders: clears WCAG 3:1 for UI components (~3.7:1 on --bg) */
  --text:#ecebe4; --text-2:#9aa0ad; --text-3:#868c99;   /* raised from #626877 for WCAG AA contrast (5.9:1 on --bg) */
  --accent:#ff5d8f; --accent-2:#ff86ad;
  --love:#ff5d8f; --love-2:#ff97b6; --love-glow:rgba(255,93,143,.45);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Space Grotesk", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --maxw:1600px;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--text); font:400 15px/1.6 var(--sans);
}
::selection{background:var(--accent); color:#1a0c12}
a{color:var(--accent); text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px}
.eyebrow{font:500 12px/1.4 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--text-3)}
.eyebrow .star{color:var(--accent)}

/* ---- nav (shared) -------------------------------------------------------- */
.nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(14px);
     background:linear-gradient(to bottom, rgba(8,9,12,.92), rgba(8,9,12,.66));
     border-bottom:1px solid var(--line-2)}
.nav-in{max-width:var(--maxw); margin:0 auto; padding:16px 30px;
        display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand{font:500 16px/1 var(--sans); letter-spacing:.04em; color:var(--text); border:0;
       display:inline-flex; align-items:center; gap:7px}
.brand b{color:var(--accent); font-weight:500}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
             color:var(--text-2); border:0}
.nav-links a:hover{color:var(--text)}
.nav-links a.navcta{color:var(--bg)}
/* Sign in / Account: a square, on-brand button matching the .btn family (was a pill) */
.nav-links #navAccount{white-space:nowrap; padding:10px 17px; font-size:11px; border:1px solid var(--text); border-radius:3px; background:var(--text); color:var(--bg); transition:background .15s,border-color .15s,color .15s}
.nav-links #navAccount:hover{background:var(--accent); border-color:var(--accent); color:#1a0c12}
/* Language switcher: a dropdown showing the current locale + caret; opens the other locale(s) below. */
.langsel{position:relative; display:inline-block}
.nav-links .langsel{order:5}   /* sits at the far right of the desktop header (after the CTA) */
.navlang{font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:7px 10px;
  border:1px solid rgba(255,255,255,.18); border-radius:5px; color:var(--text-2); background:transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:border-color .15s,color .15s}
.navlang:hover, .langsel[open]>.navlang{color:var(--text); border-color:rgba(255,255,255,.42)}
.langsel summary{list-style:none}
.langsel summary::-webkit-details-marker{display:none}
.langcaret{font-size:9px; line-height:1; transition:transform .18s}
.langsel[open] .langcaret{transform:rotate(180deg)}
.langmenu{position:absolute; top:calc(100% + 7px); right:0; z-index:60; min-width:100%;
  background:#0e1016; border:1px solid rgba(255,255,255,.16); border-radius:6px; padding:4px;
  display:flex; flex-direction:column; gap:2px; box-shadow:0 16px 40px -16px rgba(0,0,0,.8)}
.nav-links .langmenu .langopt{font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:9px 18px; color:var(--text-2); text-decoration:none; border-radius:4px; text-align:center}
.nav-links .langmenu .langopt:hover{background:rgba(255,255,255,.08); color:var(--text)}
/* --- hamburger + full-screen mobile menu (built by menu.js); both desktop-hidden --- */
.navburger{display:none; width:42px; height:42px; padding:0; margin-right:-6px; border:0; background:transparent;
  cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.navburger span{display:block; width:23px; height:2px; border-radius:2px; background:var(--text);
  transition:transform .26s ease, opacity .2s ease}
.navburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger.is-open span:nth-child(2){opacity:0}
.navburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.navmenu{position:fixed; inset:0; z-index:300; display:flex; flex-direction:column;
  background:var(--accent); color:#1a0c12;
  padding:calc(18px + env(safe-area-inset-top)) clamp(22px,7vw,40px) calc(30px + env(safe-area-inset-bottom));
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s ease, visibility .26s ease}
.navmenu.open{opacity:1; visibility:visible; transform:none}
html.navmenu-open{overflow:hidden}
.navmenu-top{display:flex; align-items:center; justify-content:space-between}
.navmenu-brand{font:500 17px/1 var(--sans); letter-spacing:.04em; color:#1a0c12; display:inline-flex; align-items:center; gap:7px}
.navmenu-brand b{color:#1a0c12}
.navmenu-close{width:44px; height:44px; margin-right:-8px; border:0; background:transparent; color:#1a0c12;
  font-size:22px; line-height:1; cursor:pointer; border-radius:8px; transition:background .15s}
.navmenu-close:hover{background:rgba(26,12,18,.1)}
.navmenu-links{display:flex; flex-direction:column; margin-top:clamp(26px,7vh,52px)}
.navmenu-item{font:500 clamp(26px,8vw,34px)/1.15 var(--sans); letter-spacing:-.015em; color:#1a0c12;
  padding:15px 0; border-bottom:1px solid rgba(26,12,18,.16); transition:opacity .15s}
.navmenu-item:hover, .navmenu-item:focus-visible{opacity:.58}
.navmenu-item.navmenu-cta{margin-top:24px; align-self:flex-start; border-bottom:0; border-radius:7px;
  background:#1a0c12; color:var(--accent); padding:16px 26px; font-size:clamp(18px,5.5vw,22px)}
.navmenu-item.navmenu-cta:hover{opacity:.9}
.navmenu-lang{margin-top:auto; padding-top:26px; display:flex; gap:14px}
.navmenu-langopt{font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:#1a0c12;
  border:1px solid rgba(26,12,18,.32); border-radius:6px; padding:11px 18px; transition:background .15s}
.navmenu-langopt:hover{background:rgba(26,12,18,.12)}

/* Collapse the inline nav into the hamburger menu (menu.js) from 900px down, not 680px.
   The hero stacks at 860px, so below ~900 the inline links were cramped: "How it works"
   wrapped and the language dropdown clipped at the right edge across the whole tablet band
   (681–900px). The full-screen menu.js overlay already handles every width below this. */
@media(max-width:900px){
  .nav-links{display:none}
  .navburger{display:flex}
  .nav-in{padding-left:16px; padding-right:12px}
}

/* ---- buttons ------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:9px; background:var(--text); color:var(--bg);
     border:1px solid var(--text); padding:14px 24px; font:500 12px/1 var(--mono);
     letter-spacing:.16em; text-transform:uppercase; cursor:pointer; border-radius:3px;
     transition:background .15s,border-color .15s,color .15s,transform .15s; white-space:nowrap}
.btn:hover{background:var(--accent); border-color:var(--accent); color:#1a0c12; transform:translateY(-1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#1a0c12}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; color:var(--text); border-color:var(--line)}
.btn.ghost:hover{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn.sm{padding:11px 17px; font-size:11px}
.btn.lg{padding:18px 32px; font-size:13px}
.btn .arr{transition:transform .15s}
/* Mobile: let long labels wrap and never exceed their container, so longer copy
   (e.g. French CTAs like "Révélez votre top 3, gratuitement") can't force the page
   wider than the viewport. No effect on short English labels, which still fit on one line. */
@media(max-width:680px){ .btn{ white-space:normal; max-width:100%; text-align:center } }
.btn:hover .arr{transform:translateX(3px)}
.btn:focus-visible,.pill:focus-visible,.leg:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px}
a:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px}
/* async CTA busy state: a tap on slow mobile data never looks dead */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"] .arr{animation:astaPulse 1s ease-in-out infinite}
@keyframes astaPulse{0%,100%{opacity:.35} 50%{opacity:1}}

/* ===========================================================================
   LANDING PAGE
   =========================================================================== */
.lhero{position:relative; max-width:var(--maxw); margin:0 auto; padding:0 30px;
       min-height:clamp(460px,68vh,640px); display:grid;
       grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:20px}
.lhero-copy{position:relative; z-index:3; padding:36px 0}
.lhero h1{font:500 clamp(46px,7.4vw,92px)/.96 var(--sans); letter-spacing:-.035em; margin:26px 0 0; color:var(--text)}
.lhero h1 em{font-style:normal; display:block; color:var(--accent)}
.lhero .lead{font:300 clamp(17px,2vw,21px)/1.5 var(--sans); color:var(--text-2); max-width:44ch; margin:26px 0 0}
.cta-row{display:flex; gap:16px; flex-wrap:wrap; margin-top:38px}
/* secondary hero action: a quiet mono text link, so the single pink CTA owns the hero
   (was a co-equal .btn ghost lg, which split attention on the most important screen) */
.lhero .seclink{display:inline-flex; align-items:center; align-self:center; padding:14px 6px; border:0;
  font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-2); transition:color .15s}
.lhero .seclink:hover{color:var(--accent)}
.microtrust{margin-top:26px; font:400 12px/1.7 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.microtrust b{color:var(--text-2); font-weight:500}

/* hero globe, bleeds to the right edge */
.lhero-globe{position:absolute; inset:0 -8vw 0 38%; z-index:1; pointer-events:none;
  /* graceful fallback: a soft branded glow sits BEHIND the globe canvas. When MapLibre renders, the
     opaque sphere covers it; if the canvas fails to paint (a tile/CDN hiccup) the hero shows a faint
     orb instead of a dead black rectangle. */
  background:radial-gradient(closest-side circle at 50% 45%, rgba(255,93,143,.12), rgba(255,93,143,.045) 48%, rgba(8,9,12,0) 74%)}
#globe{width:100%; height:100%}
.lhero-globe::after{content:""; position:absolute; inset:0; pointer-events:none;
   background:radial-gradient(60% 60% at 60% 50%, transparent 40%, rgba(8,9,12,.0) 60%),
              linear-gradient(to right, var(--bg) 0%, rgba(8,9,12,.0) 26%, rgba(8,9,12,0) 74%, rgba(8,9,12,.55) 100%)}
@media(max-width:860px){
  .lhero{grid-template-columns:1fr; min-height:auto; padding-top:30px}
  .lhero-copy{padding:30px 0 10px}
  .lhero-globe{position:relative; inset:auto; height:clamp(320px,52vw,460px); margin:6px -30px 0; opacity:.92}
  .lhero-globe::after{background:radial-gradient(70% 70% at 50% 45%, transparent 52%, var(--bg) 86%)}
}

/* credibility strip */
.strip{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); margin-top:8px}
.strip-in{max-width:var(--maxw); margin:0 auto; padding:26px 30px; display:flex; align-items:center;
          gap:22px 46px; flex-wrap:wrap; justify-content:space-between}
.strip .said{font:400 13px/1.5 var(--mono); letter-spacing:.04em; color:var(--text-2)}
.strip .said b{color:var(--text); font-weight:500}
.stats{display:flex; gap:30px 44px; flex-wrap:wrap}
.stat .n{font:500 26px/1 var(--sans); letter-spacing:-.02em; color:var(--text)}
.stat .l{font:500 10px/1.4 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin-top:8px}

/* generic landing section */
.block{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,5vw,72px) 30px; border-top:1px solid var(--line-2)}
.block-head{display:grid; grid-template-columns:132px 1fr; gap:34px; margin-bottom:36px}
.block-head .idx{font:500 13px/1 var(--mono); color:var(--accent)}
.block-head .rlabel{font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); margin-top:13px}
.block-head h2{font:400 clamp(28px,4vw,44px)/1.04 var(--sans); letter-spacing:-.028em; margin:0; color:var(--text); max-width:18ch}
.block-head p{font:300 18px/1.55 var(--sans); color:var(--text-2); max-width:54ch; margin:18px 0 0}
@media(max-width:680px){ .block-head{grid-template-columns:1fr; gap:14px; margin-bottom:40px}
  .block-head .rlabel{margin-top:0} }

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{border:1px solid var(--line-2); border-radius:9px; padding:30px 28px 34px; background:linear-gradient(180deg, rgba(255,255,255,.012), transparent)}
.step .sn{font:500 12px/1 var(--mono); color:var(--accent); letter-spacing:.14em}
.step h3{font:500 21px/1.2 var(--sans); letter-spacing:-.01em; margin:18px 0 10px; color:var(--text)}
.step p{font:300 15.5px/1.6 var(--sans); color:var(--text-2); margin:0}
@media(max-width:760px){ .steps{grid-template-columns:1fr} }

/* themes grid */
.themes{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.theme{position:relative; border:1px solid var(--line-2); border-radius:9px; padding:24px 22px 26px;
       background:linear-gradient(180deg, rgba(255,255,255,.014), transparent); overflow:hidden;
       transition:border-color .18s, transform .18s}
.theme:hover{border-color:var(--line); transform:translateY(-2px)}
.theme .ic{font-size:17px; color:var(--accent)}
.theme h3{font:500 17px/1.1 var(--sans); letter-spacing:.01em; margin:16px 0 8px; color:var(--text); text-transform:capitalize}
.theme p{font:400 12.5px/1.5 var(--mono); color:var(--text-3); margin:0; letter-spacing:.01em}
.theme.tall{grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end;
            background:linear-gradient(180deg, rgba(255,93,143,.05), transparent 60%); border-color:var(--line)}
.theme.tall .big{font:400 clamp(22px,2.4vw,30px)/1.12 var(--sans); letter-spacing:-.02em; color:var(--text); margin:0 0 auto}
/* featured Love card, leads the grid, rose-glow, the narrative's hero theme */
.theme.feat-love{grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-start;
   border-color:rgba(255,93,143,.42); background:rgba(255,93,143,.05)}
.theme.feat-love .ic{font-size:24px; color:var(--accent)}
.theme.feat-love h4{font-size:22px; margin-top:18px}
.theme.feat-love .big{font:400 clamp(19px,2vw,25px)/1.22 var(--sans); letter-spacing:-.018em; color:var(--text); margin:12px 0 auto}
.theme.feat-love .lovesub{font:400 12.5px/1.6 var(--mono); color:var(--text-2); margin:16px 0 20px; letter-spacing:.01em}
.theme.feat-love .btn{align-self:flex-start}
@media(max-width:860px){ .themes{grid-template-columns:repeat(2,1fr)} .theme.tall{grid-row:auto} }
@media(max-width:460px){ .themes{grid-template-columns:1fr} .theme.feat-love{grid-row:auto} }

/* pricing */
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:880px}
.price{position:relative; border:1px solid var(--line); border-radius:12px; padding:36px 34px 34px; background:var(--bg-2)}
.price.feat{border-color:rgba(255,93,143,.5); background:rgba(255,93,143,.045)}
.price .pk{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--text-3)}
.price .badge{position:absolute; top:24px; right:26px; font:500 10px/1 var(--mono); letter-spacing:.16em;
              text-transform:uppercase; color:var(--accent); border:1px solid rgba(255,93,143,.4);
              border-radius:20px; padding:6px 11px}
.price .amt{font:500 clamp(40px,5vw,56px)/1 var(--sans); letter-spacing:-.03em; color:var(--text); margin:20px 0 4px}
.price .amt small{font:500 15px/1 var(--mono); color:var(--text-3); letter-spacing:.04em; margin-left:8px}
.price .pdesc{font:300 15px/1.5 var(--sans); color:var(--text-2); margin:8px 0 24px; min-height:44px}
.price ul{list-style:none; margin:0 0 30px; padding:0; display:grid; gap:13px}
.price li{font:400 14px/1.4 var(--sans); color:var(--text-2); padding-left:26px; position:relative}
.price li::before{content:"✦"; position:absolute; left:0; top:1px; color:var(--accent); font-size:11px}
.price li.off{color:var(--text-3)} .price li.off::before{content:", "; color:var(--text-3)}
.price .btn{width:100%; justify-content:center}
@media(max-width:680px){
  .pricing{grid-template-columns:1fr}
  /* On a single-column card the absolutely-positioned badge can collide with the
     title on narrow phones; let it flow above the title instead. */
  .price .badge{position:static; display:inline-block; margin:0 0 18px}
}

/* closing CTA band */
.ctaband{max-width:var(--maxw); margin:0 auto; padding:clamp(60px,6.5vw,92px) 30px; border-top:1px solid var(--line-2);
         text-align:center}
.ctaband h2{font:400 clamp(34px,6vw,68px)/1.02 var(--sans); letter-spacing:-.03em; margin:0 auto; max-width:16ch; color:var(--text)}
.ctaband h2 em{font-style:normal; color:var(--accent)}
.ctaband p{font:300 18px/1.5 var(--sans); color:var(--text-2); margin:22px auto 38px; max-width:46ch}

/* footer */
.foot{border-top:1px solid var(--line); }
.foot-in{max-width:var(--maxw); margin:0 auto; padding:34px 30px; display:flex; justify-content:space-between;
         gap:22px; flex-wrap:wrap; font:400 11px/1.7 var(--mono); letter-spacing:.06em;
         text-transform:uppercase; color:var(--text-3)}
.foot-in a{color:var(--text-2); border:0}
.foot-in .lo{color:var(--text)} .foot-in .lo b{color:var(--accent)}

/* ===========================================================================
   APP (the tool)
   =========================================================================== */
.appwrap{max-width:var(--maxw); margin:0 auto; padding:0 30px 96px}

/* upgrade pill / access badge in the app nav */
.pill{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border-radius:3px;
      padding:9px 16px; font:500 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
      background:var(--accent); color:#1a0c12; border:1px solid var(--accent);
      transition:background .15s,transform .15s; white-space:nowrap}
.pill:hover{background:var(--accent-2); transform:translateY(-1px)}
.pill .px{font-size:12px}
.badge-access{display:inline-flex; align-items:center; gap:8px; border-radius:3px; padding:9px 15px;
      font:500 11px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
      color:var(--accent); border:1px solid rgba(255,93,143,.4); background:rgba(255,93,143,.05)}

/* app hero */
.hero{display:grid; grid-template-columns:1fr auto; align-items:end; gap:34px;
      padding:40px 0 34px; border-bottom:1px solid var(--line-2)}
.wordmark{font:500 clamp(50px,11vw,104px)/.9 var(--sans); letter-spacing:-.04em; margin:14px 0 0; color:var(--text)}
.lead{font:300 19px/1.5 var(--sans); color:var(--text-2); max-width:48ch; margin:24px 0 0}
.hud{font:400 12px/1 var(--mono); color:var(--text-2); min-width:236px}
.hrow{display:flex; justify-content:space-between; gap:26px; padding:11px 0; border-bottom:1px solid var(--line-2)}
.hrow:first-child{border-top:1px solid var(--line-2)}
.hrow span{color:var(--text-3); letter-spacing:.18em; text-transform:uppercase}
.hrow b{color:var(--text); font-weight:500}
@media(max-width:780px){ .hero{grid-template-columns:1fr; padding:40px 0 36px} .hud{display:none} }

/* sections */
.sec{display:grid; grid-template-columns:132px 1fr; gap:34px; padding:40px 0; border-top:1px solid var(--line-2)}
.rail .idx{font:500 13px/1 var(--mono); color:var(--accent); letter-spacing:.05em}
.rail .rlabel{font:500 11px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); margin-top:13px}
.sectitle{font:400 clamp(25px,3.4vw,35px)/1.04 var(--sans); letter-spacing:-.025em; margin:0 0 16px; color:var(--text)}
.lede{font:300 18px/1.55 var(--sans); color:var(--text-2); max-width:60ch; margin:0 0 30px}
@media(max-width:780px){
  .sec{grid-template-columns:1fr; gap:18px; padding:42px 0}
  .rail{display:flex; align-items:baseline; gap:16px}
  .rail .rlabel{margin-top:0}
}

/* forms */
.grid{display:grid; gap:24px 26px}
.g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:1fr 1fr}
@media(max-width:680px){ .g3,.g2{grid-template-columns:1fr 1fr} }
.field{position:relative}
.field label{display:block; font:500 10.5px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
             color:var(--text-3); margin-bottom:11px}
.field input,.field select{width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-strong);
      padding:8px 1px; font:400 16px/1.3 var(--sans); color:var(--text); border-radius:0}
.field input::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus{outline:0; border-bottom-color:var(--accent); box-shadow:0 1px 0 0 var(--accent)}
.field input:disabled{color:var(--text-3); cursor:not-allowed}
.field select{appearance:none; cursor:pointer}
.field select option{color:#15171d; background:#e9e7df}
.field.sel::after{content:"▾"; position:absolute; right:2px; bottom:10px; color:var(--text-3); pointer-events:none; font-size:12px}

/* birth-place autocomplete */
.field.place{position:relative}
.field.place::after{content:"⌕"; position:absolute; right:2px; bottom:8px; color:var(--text-3); pointer-events:none; font-size:15px}
.ac{position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:30; display:none;
    background:var(--bg-2); border:1px solid var(--line); border-radius:7px; overflow:hidden;
    max-height:298px; overflow-y:auto; box-shadow:0 22px 60px -24px rgba(0,0,0,.85)}
.ac.open{display:block}
.ac-item{display:flex; align-items:baseline; justify-content:space-between; gap:16px; width:100%;
         background:transparent; border:0; border-bottom:1px solid var(--line-2); text-align:left;
         padding:12px 16px; cursor:pointer; color:var(--text); font:400 15px/1.3 var(--sans); transition:background .1s}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.active{background:rgba(255,93,143,.12)}
.ac-name{font-weight:500}
.ac-name b{color:var(--accent); font-weight:600}
.ac-meta{font:500 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); white-space:nowrap}

.actions{display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-top:32px}
.hint{font:400 13px/1.5 var(--mono); color:var(--text-3); letter-spacing:.01em}

/* map */
.figure{position:relative; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#080b14;
        box-shadow:0 30px 90px -46px rgba(0,0,0,.85)}
#map{height:clamp(340px,52vh,680px)}   /* lower floor on phones so the globe doesn't dominate one short screen */
.figure::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:7px;
        box-shadow:inset 0 0 140px 12px rgba(0,0,0,.55)}
.caption{font:400 12px/1.5 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); margin:16px 2px 0}
.legend{display:flex; flex-wrap:wrap; gap:13px 18px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line-2)}
.leg{display:inline-flex; align-items:center; gap:9px; background:none; border:0; padding:0; cursor:pointer;
     font:500 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--text-2)}
.leg i{width:20px; height:0; border-top:2.5px solid; display:inline-block; filter:drop-shadow(0 0 4px currentColor)}
.leg.off{opacity:.3}
.leg.locked{opacity:.5} .leg.locked:hover{opacity:.8}
.leg-lock{color:var(--accent); font-size:9px; margin-left:1px}
.leg-note{margin-left:auto; font:400 11px/1 var(--mono); color:var(--text-3); letter-spacing:.16em; text-transform:uppercase}

/* tables */
table{width:100%; border-collapse:collapse; margin-top:6px}
th{text-align:left; font:500 10px/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
   color:var(--text-3); padding:0 12px 12px; border-bottom:1px solid var(--line)}
td{padding:12px; border-bottom:1px solid var(--line-2); vertical-align:baseline}
tr:last-child td{border-bottom:0}
.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums} th.num{text-align:right}
.name{font:400 15px/1.2 var(--sans); color:var(--text)}
.sub{color:var(--text-3); font:400 12px/1.4 var(--mono)}
.dot{font-size:10px; vertical-align:1px; margin-right:8px; filter:drop-shadow(0 0 3px currentColor)}
.tag{display:inline-block; font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
     color:var(--text-2); border:1px solid var(--line); border-radius:3px; padding:4px 7px}
.driver{color:var(--accent); font:500 13px/1.4 var(--mono)}

/* meta row */
.meta{display:flex; gap:42px; flex-wrap:wrap; margin-bottom:26px}
.meta .k{font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3)}
.meta .v{font:400 22px/1.1 var(--sans); margin-top:10px; color:var(--text); letter-spacing:-.01em}

.spin{font:400 13px/1.6 var(--mono); color:var(--text-3); padding:8px 0; letter-spacing:.04em}
.err{font:400 13px/1.6 var(--mono); color:#ff6f55; padding:8px 0}
.subhead{font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin:30px 0 14px}

/* colophon (app footer) */
.colophon{border-top:1px solid var(--line); margin-top:30px; padding-top:24px;
          display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
          font:400 11px/1.7 var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--text-3)}
.colophon a{color:var(--text-2); border:0}

/* ---- freemium gating ----------------------------------------------------- */
/* whole-section / control gating driven by a body class set in reflectAccess():
   free users get the hook (globe + top-3 love cities); depth + controls are paid */
body.free .pay-only{display:none !important}
body.paid .free-only{display:none !important}

/* a frosted veil that covers gated content with an unlock prompt */
.lockwrap{position:relative}
.veil{position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:16px; text-align:center; padding:30px;
      background:linear-gradient(180deg, rgba(8,9,12,.30), rgba(8,9,12,.82) 70%);
      backdrop-filter:blur(5px); border-radius:8px}
.veil .vlock{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.veil .vtitle{font:400 clamp(20px,2.6vw,28px)/1.2 var(--sans); letter-spacing:-.02em; color:var(--text); max-width:24ch}
.veil .vsub{font:400 13px/1.5 var(--mono); color:var(--text-2); max-width:40ch}
.blurred{filter:blur(3px); opacity:.5; pointer-events:none; user-select:none}
.teaser td{color:var(--text-3)}
.gate-note{display:inline-flex; align-items:center; gap:8px; margin-top:6px;
           font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
           border:1px solid rgba(255,93,143,.35); border-radius:3px; padding:7px 13px; cursor:pointer}
.gate-note:hover{background:rgba(255,93,143,.07)}
/* /account gate (signed in, not yet unlocked): a small value list + price/refund reassurance,
   mirroring the paywall sheet so the re-conversion screen actually sells. */
.gate-value{list-style:none; margin:24px auto 22px; padding:0; display:grid; gap:12px; text-align:left; max-width:400px}
.gate-value li{font:400 15px/1.45 var(--sans); color:var(--text-2); padding-left:26px; position:relative}
.gate-value li::before{content:"✦"; position:absolute; left:0; top:1px; color:var(--accent); font-size:12px}
.gate-value li b{color:var(--text); font-weight:500}
.gate-fine{margin-top:14px; font:400 12px/1.6 var(--mono); letter-spacing:.02em; color:var(--text-3)}
.gate-fine b{color:var(--text-2); font-weight:500}
.gate-fine a{color:var(--accent)}

/* "Your chart": the natal placements, shown plainly (no zodiac wheel) on the paid dashboard */
.natal{margin-top:30px; border-top:1px solid var(--line-2); padding-top:30px}
.natal-h{font:400 clamp(22px,3vw,30px)/1.1 var(--sans); letter-spacing:-.02em; color:var(--text); margin:0}
.natal-sub{font:400 13px/1.55 var(--mono); letter-spacing:.01em; color:var(--text-3); text-transform:none; margin:10px 0 24px; max-width:60ch}
.natal-angles{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:24px; max-width:560px}
.natal-angle{border:1px solid var(--line-2); border-radius:8px; padding:14px 16px; background:linear-gradient(180deg,rgba(255,93,143,.05),transparent)}
.na-k{font:500 10px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3)}
.na-v{font:400 22px/1.1 var(--sans); letter-spacing:-.01em; color:var(--accent); margin-top:9px}
.na-v small{font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--text-3); margin-left:7px}
.natal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 30px; max-width:760px}
.natal-row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-2)}
.nr-body{font:400 15px/1.2 var(--sans); color:var(--text-2)}
.nr-sign{font:500 14px/1.2 var(--mono); letter-spacing:.02em; color:var(--text)}
.nr-deg{color:var(--text-3); font-weight:400}
/* automatic plain-English reading of the big three + Midheaven */
.natal-read{margin-top:30px; padding-top:26px; border-top:1px solid var(--line-2); display:grid; gap:20px; max-width:680px}
.natal-readsub{font:500 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); margin:0}
.nr-read .nrr-k{font:500 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.nr-read .nrr-t{font:300 16px/1.6 var(--sans); color:var(--text-2); margin:9px 0 0; max-width:62ch}
.nrr-note{font:400 12px/1.55 var(--mono); letter-spacing:.01em; color:var(--text-3); text-transform:none; margin:2px 0 0}

/* ---- paywall modal ------------------------------------------------------- */
.modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:24px}
.modal.open{display:flex}
.modal-bg{position:absolute; inset:0; background:rgba(4,5,8,.74); backdrop-filter:blur(6px)}
.sheet{position:relative; z-index:1; width:min(520px,100%); border:1px solid var(--line);
       border-radius:14px; background:var(--bg-2);
       box-shadow:0 50px 130px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,93,143,.08);
       padding:38px 36px 34px; max-height:92vh; overflow:auto}
.sheet .close{position:absolute; top:16px; right:18px; background:none; border:0; cursor:pointer;
              color:var(--text-3); font:400 22px/1 var(--sans)}
.sheet .close:hover{color:var(--text)}
.sheet .mk{font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.sheet h3{font:400 clamp(26px,4vw,34px)/1.08 var(--sans); letter-spacing:-.025em; margin:16px 0 10px; color:var(--text)}
.sheet .msub{font:300 16px/1.5 var(--sans); color:var(--text-2); margin:0 0 26px}
.sheet ul{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:13px}
.sheet li{font:400 14.5px/1.4 var(--sans); color:var(--text); padding-left:27px; position:relative}
.sheet li::before{content:"✦"; position:absolute; left:0; top:1px; color:var(--accent); font-size:12px}
.sheet li small{display:block; color:var(--text-3); font:400 12px/1.4 var(--mono); margin-top:3px}
.priceline{display:flex; align-items:baseline; gap:12px; margin:0 0 22px; padding-top:22px; border-top:1px solid var(--line-2)}
.priceline .amt{font:500 44px/1 var(--sans); letter-spacing:-.03em; color:var(--text)}
.priceline .once{font:500 11px/1.3 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.sheet .btn{width:100%; justify-content:center; margin-bottom:14px}
.sheet .fine{font:400 11px/1.6 var(--mono); letter-spacing:.04em; color:var(--text-3); text-align:center}
.sheet .fine b{color:var(--text-2); font-weight:500}
.wl-priceline{font:500 12.5px/1.5 var(--mono); letter-spacing:.03em; color:var(--text-2); text-align:center; margin:2px 0 12px}
.wl-priceline b{color:var(--accent); font-weight:600}
.wl-signin{margin-top:14px; text-align:center; font:400 12.5px/1.5 var(--mono); letter-spacing:.02em; color:var(--text-3)}
.wl-link{background:none; border:0; padding:0; cursor:pointer; font:inherit; color:var(--accent); text-decoration:underline}
.wl-link:hover{color:var(--accent-2)}

/* pre-launch waitlist: email capture inside the paywall sheet */
.wl-field{margin:4px 0 12px}
.wl-field input{width:100%; background:var(--bg); border:1px solid var(--line); border-radius:7px;
   padding:14px 16px; font:400 16px/1.2 var(--sans); color:var(--text); transition:border-color .15s, box-shadow .15s}
.wl-field input::placeholder{color:var(--text-3)}
.wl-field input:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px rgba(255,93,143,.16)}
.priceline .amt small{font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); margin-left:9px}
.priceline .once s{color:var(--text-3)}
#wlErr{color:#ff6f55; text-align:center; margin:-4px 0 10px; font:400 12px/1.5 var(--mono); letter-spacing:.02em}
#wlErr:empty{display:none}

/* multi-step signup wizard (gender -> age -> email -> notify) */
.wl-prog{display:flex; gap:6px; margin:0 0 24px}
/* price bar: the plan's price stays visible on every signup step, so every signup saw it */
.wl-pricebar{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  border:1px solid var(--line); border-radius:6px; padding:12px 16px; margin:0 0 22px;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.wl-pricebar b{color:var(--accent); font:600 17px/1 var(--mono); letter-spacing:0}
.wl-pricebar .once{color:var(--text-3); text-transform:none; letter-spacing:.04em}
.wl-prog i{height:3px; flex:1; border-radius:2px; background:var(--line); transition:background .2s}
.wl-prog i.on{background:var(--accent)}
.wl-back{background:none; border:0; cursor:pointer; color:var(--text-3); padding:0 0 16px;
   font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase}
.wl-back:hover{color:var(--text)}
.wl-opts{display:grid; gap:10px; margin:22px 0 2px}
.wl-opt{width:100%; text-align:left; background:transparent; border:1px solid var(--line); border-radius:3px;
   color:var(--text); cursor:pointer; padding:15px 18px; font:400 16px/1.2 var(--sans);
   transition:border-color .12s, background .12s}
.wl-opt:hover{border-color:var(--accent); background:rgba(255,93,143,.06)}
.wl-opt.sel{border-color:var(--accent); background:rgba(255,93,143,.10)}

/* the "why this city" hook line under each free ranking result */
.why{font:400 13.5px/1.5 var(--sans); color:var(--text-2); margin-top:8px; max-width:54ch}
.why b{color:var(--accent); font-weight:500}

/* time-of-day picker (exact / morning / afternoon / evening / don't know) */
.timepick{display:flex; flex-wrap:wrap; gap:8px}
.tp-opt{background:transparent; border:1px solid var(--line); border-radius:3px; color:var(--text-2); cursor:pointer;
   padding:11px 15px; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
   transition:border-color .12s, color .12s, background .12s}
.tp-opt:hover{border-color:var(--accent); color:var(--text)}
.tp-opt.sel{border-color:var(--accent); background:rgba(255,93,143,.10); color:var(--text)}

/* toast confirmation */
.toast{position:fixed; left:50%; bottom:calc(30px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); z-index:90;
       display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid rgba(255,93,143,.45);
       border-radius:30px; padding:13px 22px; font:500 12px/1 var(--mono); letter-spacing:.08em;
       text-transform:uppercase; color:var(--text); box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
       opacity:0; pointer-events:none; transition:opacity .3s, transform .3s}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .tx{color:var(--accent); font-size:13px}

/* ---- maplibre overrides, dark console -----------------------------------
   maplibre-gl.css is injected at runtime (AFTER astaela.css), so its equal-specificity
   defaults win by source order. Without !important the popup keeps maplibre's white card
   (background:#fff) while our light text color still applies → white-on-white. !important
   on the props maplibre sets (popup bg + tip colour) keeps the dark console, like the
   .maplibregl-ctrl-group rule below already does. */
.maplibregl-popup-content{background:#10131c!important; color:var(--text); border:1px solid var(--line);
     border-radius:5px; font:400 12px/1.5 var(--mono); padding:11px 14px; box-shadow:0 12px 36px rgba(0,0,0,.6)}
.maplibregl-popup-content .ttl{font:500 13px/1.2 var(--sans)}
.maplibregl-popup-content .cap{color:var(--text-2); margin-top:3px}
.maplibregl-popup-close-button{color:var(--text-3); font-size:16px; padding:2px 6px}
.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#10131c!important}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#10131c!important}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#10131c!important}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#10131c!important}
.maplibregl-ctrl-group{background:#10131c!important; border:1px solid var(--line)!important; box-shadow:none!important; border-radius:4px!important}
.maplibregl-ctrl-group button+button{border-top:1px solid var(--line)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) brightness(.82)}
.maplibregl-ctrl-group button:hover{background:rgba(255,255,255,.06)}

/* ===========================================================================
   LANDING, conversion sections (open-loop reveal · future-pacing · FAQ · proof)
   =========================================================================== */

/* open-loop teaser: "your cities are already ranked", redacted until they start.
   Borrows the app's blur-veil so the landing previews the exact curiosity gap. */
.reveal{max-width:var(--maxw); margin:0 auto; padding:clamp(48px,5vw,72px) 30px; border-top:1px solid var(--line-2)}
.reveal-in{display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,64px); align-items:center}
.reveal h2{font:400 clamp(28px,4vw,46px)/1.04 var(--sans); letter-spacing:-.03em; margin:0; color:var(--text); max-width:15ch}
.reveal h2 em{font-style:normal; color:var(--love)}
.reveal p{font:300 18px/1.55 var(--sans); color:var(--text-2); max-width:46ch; margin:18px 0 30px}
.ranklist{position:relative; border:1px solid var(--line); border-radius:12px; background:var(--bg-2);
   padding:8px 0; overflow:hidden; box-shadow:0 30px 90px -50px rgba(0,0,0,.85)}
.rl-row{display:flex; align-items:center; gap:18px; padding:16px 26px; border-bottom:1px solid var(--line-2)}
.rl-row:last-child{border-bottom:0}
.rl-n{font:500 13px/1 var(--mono); color:var(--accent); width:16px; flex:none}
.rl-bar{height:12px; border-radius:7px; background:rgba(255,93,143,.5); width:var(--w,60%)}
.rl-sub{height:8px; border-radius:6px; background:rgba(255,255,255,.07); width:var(--w2,32%); margin-top:8px}
.rl-cell{flex:1}
.rl-row.locked{filter:blur(3.5px); opacity:.45}
.rl-row.locked .rl-bar{background:rgba(255,255,255,.10)}
.ranklist .rl-veil{position:absolute; left:0; right:0; bottom:0; height:54%; pointer-events:none;
   background:linear-gradient(180deg, transparent, var(--bg-2) 78%); display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px}
.ranklist .rl-veil span{font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
@media(max-width:760px){ .reveal-in{grid-template-columns:1fr} }

/* future-pacing / loss-aversion, the emotional peak, centred, rose→gold accent */
.feel{max-width:var(--maxw); margin:0 auto; padding:clamp(56px,6vw,84px) 30px; border-top:1px solid var(--line-2); text-align:center}
.feel .eyebrow{display:flex; justify-content:center; gap:10px}
.feel h2{font:400 clamp(30px,5.2vw,58px)/1.06 var(--sans); letter-spacing:-.032em; margin:20px auto 0; max-width:17ch; color:var(--text)}
.feel h2 em{font-style:normal; color:var(--accent)}
.feel p{font:300 clamp(17px,2vw,21px)/1.6 var(--sans); color:var(--text-2); max-width:52ch; margin:24px auto 0}

/* FAQ, objection handling, native <details> accordion (no JS, accessible) */
.faq{max-width:900px; margin:0 auto; padding:clamp(48px,5vw,72px) 30px; border-top:1px solid var(--line-2)}
.faq-head{font:400 clamp(26px,4vw,40px)/1.05 var(--sans); letter-spacing:-.028em; margin:0 0 36px; color:var(--text)}
.faq-q{border-bottom:1px solid var(--line-2)}
.faq-q summary{list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:flex-start;
   justify-content:space-between; gap:24px; font:500 18.5px/1.35 var(--sans); color:var(--text); letter-spacing:-.01em}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+"; flex:none; color:var(--accent); font:300 26px/0.8 var(--sans); transition:transform .2s}
.faq-q[open] summary::after{transform:rotate(45deg)}
.faq-q p{font:300 16px/1.65 var(--sans); color:var(--text-2); margin:0 0 24px; max-width:64ch}
.faq-q p b{color:var(--text); font-weight:500}

/* social proof, testimonial cards (PLACEHOLDER copy; replace with real quotes) */
.proof{max-width:var(--maxw); margin:0 auto; padding:clamp(44px,4.5vw,68px) 30px; border-top:1px solid var(--line-2)}
.proof-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px}
.quote{border:1px solid var(--line-2); border-radius:11px; padding:26px 24px;
   background:linear-gradient(180deg, rgba(255,255,255,.014), transparent)}
.quote .stars{color:var(--accent); font:400 13px/1 var(--mono); letter-spacing:3px}
.quote p{font:300 16px/1.55 var(--sans); color:var(--text); margin:14px 0 18px}
.quote .who{font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
@media(max-width:760px){ .proof-grid{grid-template-columns:1fr} }

/* ===========================================================================
   LEGAL, site-wide footer (links + disclaimer) and the legal content pages
   =========================================================================== */
.legalrow{display:flex; flex-wrap:wrap; align-items:center; gap:7px 13px}
.legalrow a{color:var(--text-2); border:0; font:500 11px/1.7 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.legalrow a:hover{color:var(--accent)}
.legalrow span{color:var(--text-3)}
.legalnote{max-width:var(--maxw); margin:0 auto; padding:14px 30px 0; font:400 11px/1.6 var(--mono); letter-spacing:.03em; color:var(--text-3); text-transform:none}

/* legal content pages (terms / privacy / refund) */
.legal{max-width:820px; margin:0 auto; padding:clamp(48px,5vw,72px) 30px 30px}
.legal h1{font:500 clamp(30px,4.4vw,46px)/1.05 var(--sans); letter-spacing:-.03em; margin:0 0 6px; color:var(--text)}
.legal .updated{font:500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px}
.legal .lead{font:300 18px/1.6 var(--sans); color:var(--text-2); margin:0 0 8px}
.legal h2{font:500 19px/1.3 var(--sans); letter-spacing:-.01em; margin:36px 0 10px; color:var(--text)}
.legal p, .legal li{font:300 15.5px/1.7 var(--sans); color:var(--text-2); margin:0 0 13px}
.legal ul{margin:0 0 13px; padding-left:20px}
.legal li{margin:0 0 7px}
.legal a{color:var(--accent)}
.legal b, .legal strong{color:var(--text); font-weight:500}
.legal code{font:400 13px var(--mono); background:var(--surface); border:1px solid var(--line-2); border-radius:3px; padding:1px 5px}
.legal .todo{display:block; background:rgba(255,93,143,.07); border:1px solid rgba(255,93,143,.32); border-radius:6px;
   padding:11px 14px; margin:14px 0; font:400 12.5px/1.55 var(--mono); letter-spacing:.01em; color:var(--text-2); text-transform:none}
.legal .disclaimer-box{border:1px solid var(--line); border-radius:8px; padding:18px 20px; margin:22px 0; background:var(--bg-2);
   font:400 14.5px/1.6 var(--sans); color:var(--text)}

/* ===========================================================================
   Accessibility & touch refinements (audit P2 pass)
   =========================================================================== */
/* Honour prefers-reduced-motion: neutralise non-essential animation, transitions
   and smooth-scroll (the busy-pulse, hover lifts, toast slide, anchor scrolling). */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
/* Comfortable 44px touch targets for the smaller interactive controls on touch devices. */
@media (pointer:coarse){
  .leg, .tp-opt, .btn.sm, .wl-opt{min-height:44px}
  .leg{align-items:center}
}
/* Respect the notch / home-indicator without changing desktop gutters. */
@supports (padding:max(0px)){
  .wrap, .appwrap{
    padding-left:max(30px, env(safe-area-inset-left));
    padding-right:max(30px, env(safe-area-inset-right));
  }
}

/* ===== Limited-time launch offer (injected by offer.js: home card, /app paywall, /account gate) ===== */
.offer-was{color:var(--text-3); text-decoration:line-through; font-weight:400}
.offer-badge{display:inline-block; background:var(--accent); color:#0b0c10; font:700 11px/1 var(--mono); letter-spacing:.06em; padding:5px 8px; border-radius:999px; vertical-align:middle}
.offer-timer{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:10px; font:500 12px/1.35 var(--mono); letter-spacing:.03em; color:var(--text-2)}
.offer-timer .offer-clock{color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}
.offer-dot{width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; animation:offerPulse 1.2s ease-in-out infinite}
@keyframes offerPulse{0%,100%{opacity:.3} 50%{opacity:1}}
.price.feat .offer-badge{margin:0 0 12px}
.price.feat .amt .offer-was{font-size:.6em; margin-right:.28em}
.price.feat .offer-timer{justify-content:flex-start}
.wl-pricebar .offer-was{font-size:13px; margin-right:6px}
.wl-pricebar .offer-badge{font-size:10px; padding:4px 7px; margin-left:7px}
.gate-offer{display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:0 0 12px}
.gate-offer .offer-was{font:500 13px/1 var(--mono)}
.gate-offer .offer-timer{margin-top:0; width:100%; justify-content:flex-start}