/* Moolank 365 brand theme: the night sky, mountains and gold foil from the logo and banner.
   Loaded last so it restyles the whole app without touching layout code. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Tiro Devanagari Hindi";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/tiro-devanagari-hindi-devanagari-400-normal.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}

:root{
  --ink:#050a16;
  --gold:#d8a94f;
  --gold-hi:#f6dc94;
  --gold-foil:linear-gradient(176deg,#fff5d2 0%,#f6dc94 24%,#d8a94f 52%,#a8762c 70%,#f2cf7a 92%);
  --gold-edge:linear-gradient(135deg,#f9e3a6 0%,#b8862f 30%,#f6dc94 55%,#8f6224 78%,#e9c46f 100%);
  --glass-deep:rgba(6,12,28,.74);
  --display:"Cormorant Garamond","Tiro Devanagari Hindi","Noto Serif Devanagari",Georgia,serif;
}
html,body{background:var(--ink)}

/* ---------- The sky ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;
  background:
    linear-gradient(180deg,rgba(5,10,22,.72) 0%,rgba(5,10,22,.38) 26%,rgba(5,10,22,.08) 50%,rgba(5,10,22,.8) 76%,var(--ink) 90%),
    url(assets/theme/sky.webp) center top/auto 86svh no-repeat,
    var(--ink);
}
body::after{
  content:"";position:fixed;z-index:0;pointer-events:none;
  top:-6svh;left:-120px;width:300px;height:440px;
  background:url(assets/theme/zodiac-a.webp) right top/contain no-repeat;
  opacity:.28;will-change:transform;
  -webkit-mask-image:radial-gradient(closest-side at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 45%,#000 55%,transparent 100%);
  animation:m365-turn 240s linear infinite;transform-origin:30% 45%;
}
@keyframes m365-turn{to{transform:rotate(360deg)}}
@media(min-width:760px){
  body::before{background:
    linear-gradient(180deg,rgba(5,10,22,.25) 0%,rgba(5,10,22,.05) 30%,rgba(5,10,22,.7) 70%,var(--ink) 92%),
    url(assets/theme/sky-wide.webp) center top/cover no-repeat,var(--ink)}
  body::after{left:-40px;width:380px;height:560px;opacity:.3}
}
#app{position:relative;z-index:1}
.top{z-index:10!important}
.nav{z-index:20!important}

/* Landing page sits on the sky too */
.lp{background:transparent!important}
.lp-mobile-action{background:rgba(5,10,22,.88)!important;backdrop-filter:blur(16px);border-top:1px solid rgba(246,220,148,.3)!important}
.lp-orbit-label{background:rgba(5,10,22,.8)}

/* ---------- Type ---------- */
body{font-variant-numeric:lining-nums}
h1,h2,h3,.foil,.reading,b{font-feature-settings:"lnum" 1}
h1,h2,h3,.reading,.lp-hero h1{font-family:var(--display);font-weight:600;letter-spacing:0}
h1{font-size:clamp(34px,9vw,52px);line-height:1.04}
h2{line-height:1.08}
h1 em,h2 em,.lp-hero h1 em{font-style:italic;font-weight:500;background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.foil{background:var(--gold-foil)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;filter:drop-shadow(0 2px 10px rgba(216,169,79,.25))}
.eyebrow,.lp-eyebrow{letter-spacing:.24em;color:var(--gold-hi);font-weight:600}
.greet .eyebrow::before,.lp-hero .lp-eyebrow::before{content:"✦";display:inline-block;margin-right:.7em;color:var(--gold);letter-spacing:0;font-size:1.05em;transform:translateY(-.04em)}
html[lang=hi] h1,html[lang=hi] h2,html[lang=hi] h3{font-family:"Tiro Devanagari Hindi","Noto Serif Devanagari",var(--display);font-weight:400;line-height:1.3}

/* The share card stays exactly as it was */
.card{--display:"Bodoni Moda","Noto Serif Devanagari","Bodoni 72","Didot",Georgia,serif}
.card .foil{background:none!important;color:var(--gold-hi)!important;-webkit-text-fill-color:var(--gold-hi);filter:none}

/* ---------- Brand mark ---------- */
.brandmark{border-radius:50%;box-shadow:0 0 0 1px rgba(246,220,148,.55),0 0 18px rgba(216,169,79,.35)}
.brand b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.01em;background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand b span{-webkit-text-fill-color:currentColor;color:var(--gold-hi);opacity:.85}

/* ---------- Header and nav: dark glass with a gold hairline ---------- */
.top{background:linear-gradient(180deg,rgba(5,10,22,.92),rgba(5,10,22,.72));border-bottom:0;backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.top::after,.nav::before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(246,220,148,.65),transparent)}
.top::after{bottom:0}
.nav{background:rgba(5,10,22,.88);border-top:0;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.nav::before{top:0}
.nav button[aria-current=page]{color:var(--gold-hi)!important;background:linear-gradient(180deg,rgba(246,220,148,.16),rgba(216,169,79,.06));box-shadow:inset 0 0 0 1px rgba(246,220,148,.28)}

/* ---------- Gold-framed glass: panels, cards, tiles ---------- */
.panel,.askbox,.nx-area,.jy-tile,.pitem,.ask-mini,.nx-slots-wrap,.jy-q-mini,.lp-reveal-form,.lp-personality,.welcome-form{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(12,22,46,.80),rgba(6,12,28,.86)) padding-box,
    linear-gradient(140deg,rgba(249,227,166,.70),rgba(184,134,47,.18) 34%,rgba(246,220,148,.10) 60%,rgba(216,169,79,.55)) border-box!important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,240,200,.06)!important;
}
.mecard .card,.mecard>*{box-shadow:0 0 0 1px rgba(246,220,148,.45),0 24px 60px -24px rgba(0,0,0,.95),0 0 40px -10px rgba(216,169,79,.28)}

/* ---------- Buttons ---------- */
.btn-saffron,.lp-primary,.bigday-cta{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#fbe7ad 0%,#f0c66f 38%,#c9963f 78%,#e4b85f 100%)!important;
  color:#1a1003!important;border:0!important;
  box-shadow:inset 0 1px 0 rgba(255,250,230,.9),inset 0 -2px 0 rgba(120,80,20,.45),0 10px 28px -12px rgba(216,169,79,.75)!important;
  text-shadow:0 1px 0 rgba(255,240,200,.45);
}
.btn-saffron::after,.lp-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);animation:m365-shine 4.8s ease-in-out 1.2s infinite;
}
@keyframes m365-shine{0%,62%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.btn-saffron:active,.lp-primary:active{transform:translateY(1px) scale(.99)}
.btn-ghost{
  border:1px solid transparent!important;color:var(--gold-hi)!important;
  background:linear-gradient(180deg,rgba(14,24,48,.82),rgba(7,13,30,.88)) padding-box,var(--gold-edge) border-box!important;
}
.btn-ghost:hover{filter:brightness(1.12)}
.bonus-pill,.nx-chip[aria-pressed=true],.nx-slot[aria-pressed=true]{background:var(--gold-foil);color:#1a1003;border-color:transparent}

/* ---------- Inputs ---------- */
.input,.sel,select.input{background:rgba(4,9,20,.72)!important;border:1px solid rgba(246,220,148,.22)!important}
.input:focus,.sel:focus{border-color:rgba(246,220,148,.7)!important;box-shadow:0 0 0 3px rgba(216,169,79,.18)!important}

/* ---------- More below ---------- */
.more-below{background:linear-gradient(180deg,#fbe7ad,#d9a54c)!important;color:#1a1003!important;border-color:rgba(255,245,215,.8)!important}

/* ---------- Sheets ---------- */
.sheet .body{border:1px solid transparent!important;background:linear-gradient(180deg,#0d1832,#060c1c) padding-box,var(--gold-edge) border-box!important}

@media (prefers-reduced-motion:reduce){body::after,.btn-saffron::after,.lp-primary::after{animation:none}}
html[lang=hi] .brand b{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:600!important}

/* ---------- Engraved buttons: coin rim, guilloche lines, filigree ends, letterpress type ---------- */
.btn-saffron,.lp-primary,.btn-ghost{position:relative;isolation:isolate}
.btn-saffron::before,.lp-primary::before,.btn-ghost::before{
  content:"";position:absolute;inset:4px;border-radius:inherit;pointer-events:none;z-index:-1;
}
/* gold: a groove cut 4px inside the edge, and fine engraved arcs across the metal */
.btn-saffron::before,.lp-primary::before{
  border:1px solid rgba(104,66,14,.55);
  box-shadow:0 1px 0 rgba(255,246,214,.75),inset 0 1px 0 rgba(255,246,214,.55);
  background:
    repeating-radial-gradient(ellipse 120% 90% at 50% 135%,rgba(110,70,14,.13) 0 .6px,transparent .6px 3.4px),
    repeating-linear-gradient(90deg,rgba(255,250,232,.05) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
.btn-saffron,.lp-primary{
  font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.14em!important;font-size:15px!important;
  color:#3b2405!important;
  text-shadow:0 1px 0 rgba(255,244,210,.8),0 -1px 0 rgba(90,55,10,.35)!important;
}
html[lang=hi] .btn-saffron,html[lang=hi] .lp-primary{font-family:"Tiro Devanagari Hindi",var(--body)!important;text-transform:none;letter-spacing:.02em!important;font-size:16px!important}
/* filigree flourishes either side of the label on full-width buttons */
.btn-saffron.btn-block,.lp-primary{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cg fill='none' stroke='%235c3a0a' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M2 6h22'/%3E%3Cpath d='M24 6c4-5 9-5 12 0-3 5-8 5-12 0z'/%3E%3Ccircle cx='40' cy='6' r='1.6' fill='%235c3a0a'/%3E%3Cpath d='M8 3.5q4 2.5 8 0M8 8.5q4-2.5 8 0' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E") left 12px center/36px 10px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cg fill='none' stroke='%235c3a0a' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M42 6H20'/%3E%3Cpath d='M20 6c-4-5-9-5-12 0 3 5 8 5 12 0z'/%3E%3Ccircle cx='4' cy='6' r='1.6' fill='%235c3a0a'/%3E%3Cpath d='M36 3.5q-4 2.5-8 0M36 8.5q-4-2.5-8 0' stroke-width='.6'/%3E%3C/g%3E%3C/svg%3E") right 12px center/36px 10px no-repeat,
    linear-gradient(180deg,#fdebb6 0%,#f0c66f 36%,#c48f39 74%,#e7bc63 100%)!important;
}
@media(max-width:360px){.btn-saffron.btn-block,.lp-primary{background:linear-gradient(180deg,#fdebb6 0%,#f0c66f 36%,#c48f39 74%,#e7bc63 100%)!important}}
/* ghost: an inner engraved hairline and tiny stars set in the corners */
.btn-ghost::before{
  border:1px solid rgba(246,220,148,.22);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23e9c46f'/%3E%3C/svg%3E") left 5px top 5px/7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23e9c46f'/%3E%3C/svg%3E") right 5px top 5px/7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23e9c46f'/%3E%3C/svg%3E") left 5px bottom 5px/7px 7px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0l1 4 4 1-4 1-1 4-1-4-4-1 4-1z' fill='%23e9c46f'/%3E%3C/svg%3E") right 5px bottom 5px/7px 7px no-repeat;
  opacity:.85;
}
.btn-ghost{text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn-ghost{font-family:"Cormorant Garamond",Georgia,serif!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.12em!important;font-size:14.5px!important;
  background:linear-gradient(180deg,rgba(16,28,60,.92),rgba(6,12,30,.94)) padding-box,var(--gold-edge) border-box!important}
html[lang=hi] .btn-ghost{font-family:"Tiro Devanagari Hindi",var(--body)!important;text-transform:none;letter-spacing:.02em!important;font-size:15px!important}
.two .btn-ghost{letter-spacing:.06em!important;padding-inline:10px;white-space:normal;line-height:1.15}.btn-saffron.btn-block,.lp-primary{padding-inline:50px;white-space:nowrap}

/* ---------- Mobile safety net: nothing may widen the page ---------- */
html,body{max-width:100%;overflow-x:clip}
.btn,.btn-ghost,.btn-saffron{max-width:100%;min-width:0}
.two>*,.profile-grid>*,.profile-content>*,.report-details,.report-details>*,.panel>*{min-width:0}
.btn-saffron.btn-block,.lp-primary{white-space:normal}
@media(max-width:380px){.btn-saffron,.lp-primary{letter-spacing:.1em!important;font-size:14px!important}.btn-ghost{letter-spacing:.06em!important;font-size:13.5px!important}.btn-saffron.btn-block,.lp-primary{padding-inline:44px}}

/* ---------- Comfortable taps (40px+) ---------- */
.avatar{min-width:40px;min-height:40px}
.language-switch{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;padding-inline:12px}
.infolinks a,.lp-footer a,.footer a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:44px;padding:4px 6px}
.lp-gallery-controls button{min-width:44px;min-height:44px}
.nx-chip{min-height:36px;padding:6px 12px}
.seg button,.nx-seg button{min-width:44px;min-height:40px}

/* ---------- Readable small text ---------- */
.eyebrow,.lp-eyebrow{font-size:max(11px,.69rem)}
.mhead .tagr,.number-tile>span,.number-tile>small,.band,.footer span,.jy-q-main>small,.minis small,.mini small{font-size:11px}
.bigday-ring small{font-size:9.5px}
html[lang=hi] .eyebrow,html[lang=hi] .lp-eyebrow{font-size:12.5px;letter-spacing:.06em}
html[lang=hi] :is(.mhead .tagr,.number-tile>span,.number-tile>small,.band,.footer span,.jy-q-main>small,.minis small,.mini small,small){font-size:12px}
html[lang=hi] .bigday-ring small{font-size:11px}
.brand b span{font-size:11px}
.lp-orbit-label{font-size:8px}
.lp-demo-top span{font-size:11px}
.compat .cn,.daily-note{font-size:11.5px}
.report-details small,.panel small,.trait small,div>small{font-size:max(11px,1em)}
.nx-plan .bigday-ring small,.bigday-ring small{font-size:9.5px}
html[lang=hi] :is(.lp-demo-top span,.compat .cn,.daily-note){font-size:12.5px}
html[lang=hi] .nx-plan .bigday-ring small{font-size:11px}

/* Cheaper phones: no constant motion behind the content */
@media (max-width:480px){body::after{animation-duration:420s}}
@media (prefers-reduced-motion:reduce),(max-width:480px) and (update:slow){body::after{animation:none}}