/* AndroScore landing additions (October 2026): motion, figures band, book section, assistant.
   Added on top of the React landing by extra.js; every rule is scoped to .al-page / .ax-* so the app (/app) is untouched. */

/* ---------- hero: slow gauge spin, drawn testosterone molecule, rising particles ---------- */
.al-dark::after { animation: ax-spin 140s linear infinite; }
@keyframes ax-spin { to { transform: rotate(360deg); } }

.ax-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ax-mol { position: absolute; left: clamp(-60px, -2vw, 0px); bottom: -46px; width: clamp(240px, 26vw, 360px); height: auto; opacity: .2; color: #fff;
  animation: ax-float 9s ease-in-out infinite; }
.ax-mol path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: ax-draw 4.5s ease-out .4s forwards; }
.ax-mol .ax-acc { stroke: #eb6433; }
.ax-mol text { fill: currentColor; font: 700 11px Inter, system-ui, sans-serif; opacity: 0; animation: ax-fade 1s ease-out 3.6s forwards; }
@keyframes ax-draw { to { stroke-dashoffset: 0; } }
@keyframes ax-fade { to { opacity: 1; } }
@keyframes ax-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(-3deg); } }
.ax-dot { position: absolute; bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #eb6433; opacity: 0; animation: ax-rise linear infinite; }
.ax-dot.ax-b { background: #6fc3d8; }
@keyframes ax-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: .55; } 80% { opacity: .25; } 100% { transform: translateY(-560px) scale(1.1); opacity: 0; } }

/* calculator card: soft breathing glow */
.al-calc { position: relative; }
.al-hero .al-calc { animation: ax-glow 6s ease-in-out infinite; }
@keyframes ax-glow { 0%, 100% { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); }
  50% { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08), 0 0 60px -6px rgba(235,100,51,.35); } }

/* ---------- reveal on scroll ---------- */
.ax-r { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--ax-d, 0s); }
.ax-r.ax-in { opacity: 1; transform: none; }
.al-phone { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
@media (hover: hover) { .al-shot:hover .al-phone { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 0 0 1px #24384a, 0 50px 70px -30px rgba(16,39,55,.65); } }

/* ---------- figures band ---------- */
.ax-figs { background: #fff; padding: 0 0 clamp(48px, 7vw, 88px); }
.ax-figs-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 22px; overflow: hidden; background: #e2e8ee; box-shadow: 0 0 0 1px #e2e8ee; }
.ax-fig { background: #fff; padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 26px); }
.ax-fig b { display: block; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; color: #102737; font-variant-numeric: tabular-nums; }
.ax-fig b i { font-style: normal; color: #eb6433; }
.ax-fig span { display: block; margin-top: 10px; font-size: .9rem; line-height: 1.45; color: #4d5d70; }

/* ---------- book ---------- */
.ax-book-sec { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(60px, 9vw, 112px) 0;
  background: #0b1d2a; background-image: radial-gradient(50% 70% at 20% 50%, rgba(214,168,82,.20), transparent 70%), radial-gradient(40% 60% at 100% 0%, rgba(235,100,51,.16), transparent 70%); }
.ax-book-in { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(36px, 6vw, 84px); align-items: center; }
.ax-stage3d { perspective: 1400px; display: grid; place-items: center; padding: 10px 0 30px; }
.ax-book { position: relative; width: min(100%, 280px); aspect-ratio: 2 / 3; transform-style: preserve-3d; transform: rotateY(-24deg) rotateX(4deg);
  transition: transform .8s cubic-bezier(.2,.7,.2,1); animation: ax-bookfloat 7s ease-in-out infinite; }
.ax-book-sec:hover .ax-book { transform: rotateY(-10deg) rotateX(2deg); }
@keyframes ax-bookfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.ax-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px 6px 6px 3px; transform: translateZ(18px);
  box-shadow: inset 4px 0 8px rgba(0,0,0,.4); }
.ax-pages { position: absolute; top: 4px; bottom: 4px; right: -18px; width: 36px; transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #f3ecdc 0 1px, #d6ccb4 1px 2px); }
.ax-book::after { content: ""; position: absolute; inset: 0; transform: translateZ(-18px); background: #141414; border-radius: 3px 6px 6px 3px;
  box-shadow: 30px 40px 60px -20px rgba(0,0,0,.75); }
.ax-shine { position: absolute; inset: 0; transform: translateZ(18.5px); border-radius: 3px 6px 6px 3px; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,240,200,.28) 48%, transparent 60%); background-size: 260% 100%; animation: ax-shine 6s ease-in-out infinite; }
@keyframes ax-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.ax-book-floor { width: 70%; height: 22px; margin-top: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(4px); }

.ax-book-txt .al-eyebrow { color: #d6a852; }
.ax-book-txt h2 { margin-top: 10px; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; }
.ax-book-txt h2 small { display: block; margin-top: 8px; font-size: .5em; font-weight: 600; letter-spacing: -.01em; color: #e9cf96; }
.ax-book-txt > p { margin-top: 18px; max-width: 36em; font-size: 1.04rem; line-height: 1.7; color: rgba(255,255,255,.76); }
.ax-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.ax-chips li { border-radius: 999px; padding: 8px 14px; font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.9); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(214,168,82,.35); }
.ax-chips li b { color: #e9cf96; }
.ax-book-cta { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ax-btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 14px; padding: 13px 22px; font-weight: 700; font-size: 1rem; text-decoration: none;
  color: #1a1206; background: linear-gradient(135deg, #f0d48f, #c9963f); box-shadow: 0 14px 30px -14px rgba(214,168,82,.8); transition: transform .2s, box-shadow .2s; }
.ax-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(214,168,82,.95); }
.ax-btn:focus-visible { outline: 3px solid #f0d48f; outline-offset: 3px; }
.ax-btn svg { width: 18px; height: 18px; }
.ax-btn-ghost { color: #fff; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.ax-btn-ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.ax-pb { display: inline-flex; align-items: center; gap: 11px; border-radius: 14px; padding: 9px 18px 9px 12px; text-decoration: none; color: #102737; background: #fff;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.7); transition: transform .2s, box-shadow .2s; }
.ax-pb img { width: 30px; height: 30px; display: block; }
.ax-pb span { display: flex; flex-direction: column; font-weight: 700; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.01em; }
.ax-pb small { font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: #5f6f80; }
a.ax-pb:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -16px rgba(0,0,0,.8); }
a.ax-pb:focus-visible { outline: 3px solid #f0d48f; outline-offset: 3px; }
.ax-pb-soon { opacity: .75; }
.ax-book-txt > p.ax-book-note { margin-top: 18px; font-size: .8rem; color: rgba(255,255,255,.5); }

/* footer link */
.ax-flink { color: inherit; text-decoration: none; }

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .ax-figs-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-book-in { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .ax-book { width: min(62vw, 230px); }
}
@media (max-width: 760px) { .ax-mol { left: auto; right: -60px; bottom: 34%; width: 260px; opacity: .12; } }

@media (prefers-reduced-motion: reduce) {
  .al-dark::after, .ax-mol, .ax-dot, .al-hero .al-calc, .ax-book, .ax-shine { animation: none; }
  .ax-mol path { stroke-dashoffset: 0; animation: none; } .ax-mol text { opacity: 1; animation: none; }
  .ax-dot { display: none; }
  .ax-r { opacity: 1; transform: none; transition: none; }
  .ax-book, .al-phone, .ax-btn { transition: none; }
}

/* ---------- landing page: no white behind the page (iOS bounce / overscroll), navy under the footer ---------- */
html.ax-landing, html.ax-landing body { background: #102737; overscroll-behavior-y: none; }

/* ---------- assistant button in AndroScore green ---------- */
html.ax-landing .abr-btn { box-shadow: 0 12px 30px -8px rgba(6,40,30,.6), 0 0 0 3px rgba(16,185,129,.32); }
html.ax-landing .abr-btn:before, html.ax-landing .abr-btn:after { border-color: #34D399; }
html.ax-landing .abr-btn:focus-visible { outline-color: #10B981; }
html.ax-landing .abr-btn stop:first-child { stop-color: #4ADE80; }
html.ax-landing .abr-btn stop:last-child { stop-color: #059669; }
html.ax-landing .abr-btn rect[fill="#C9481A"] { fill: #047857; }
html.ax-landing .abr-btn line { stroke: #4ADE80; }
html.ax-landing .abr-btn .abr-isik { fill: #BBF7D0; }

/* ---------- hero fills the first screen: no white band under it; scroll cue ---------- */
.al-dark { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.al-dark > .al-hero { flex: 1 0 auto; display: flex; align-items: center; }
.al-dark > .al-hero > .al-hero-in { flex: 1; }
.ax-cue { position: absolute; left: 50%; bottom: 18px; width: 44px; height: 44px; margin-left: -22px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  animation: ax-cue 2.2s ease-in-out infinite; }
.ax-cue:hover { color: #fff; background: rgba(255,255,255,.14); }
.ax-cue:focus-visible { outline: 3px solid #eb6433; outline-offset: 3px; }
.ax-cue svg { width: 20px; height: 20px; }
@keyframes ax-cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (max-width: 960px), (max-height: 620px) { .ax-cue { display: none; } }

/* ---------- bigger, bolder AndroScore mark in the header ---------- */
.al-header .al-header-in { padding-top: 24px; padding-bottom: 22px; }
.al-header .al-brand { gap: 14px; font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 900; letter-spacing: -.045em; text-shadow: 0 6px 30px rgba(0,0,0,.35); }
.al-header .al-brand-mark { width: 64px; height: 64px; filter: drop-shadow(0 0 14px rgba(235,100,51,.55)); animation: ax-mark 4s ease-in-out infinite; }
.al-header .al-brand-mark .h-9 { width: 60px; height: 60px; }
.al-header .al-brand em { background: linear-gradient(90deg, #eb6433 0%, #ffb062 35%, #eb6433 60%, #eb6433 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ax-shimmer 5s ease-in-out infinite; }
@keyframes ax-mark { 0%, 100% { filter: drop-shadow(0 0 10px rgba(235,100,51,.4)); } 50% { filter: drop-shadow(0 0 22px rgba(235,100,51,.75)); } }
@keyframes ax-shimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@media (max-width: 760px) {
  .al-header .al-brand { font-size: 1.65rem; gap: 10px; }
  .al-header .al-brand-mark { width: 48px; height: 48px; } .al-header .al-brand-mark .h-9 { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .ax-cue, .al-header .al-brand-mark, .al-header .al-brand em { animation: none; } }

/* Free testosterone colour band on the calculator result (red / orange / gray / green) */
.al-result { transition: box-shadow .35s ease; }
.al-result[data-ax-tier="veryLow"] { box-shadow: inset 4px 0 0 #f87171, 0 10px 30px -14px rgba(248,113,113,.55); background-image: radial-gradient(80% 120% at 100% 0%, rgba(248,113,113,.30), transparent 70%); }
.al-result[data-ax-tier="low"]     { box-shadow: inset 4px 0 0 #fb923c, 0 10px 30px -14px rgba(251,146,60,.55);  background-image: radial-gradient(80% 120% at 100% 0%, rgba(251,146,60,.30), transparent 70%); }
.al-result[data-ax-tier="gray"]    { box-shadow: inset 4px 0 0 #a3b1c2, 0 10px 30px -14px rgba(163,177,194,.45); background-image: radial-gradient(80% 120% at 100% 0%, rgba(163,177,194,.22), transparent 70%); }
.al-result[data-ax-tier="normal"]  { box-shadow: inset 4px 0 0 #34d399, 0 10px 30px -14px rgba(52,211,153,.55);  background-image: radial-gradient(80% 120% at 100% 0%, rgba(52,211,153,.26), transparent 70%); }
.al-result[data-ax-tier="veryLow"] .al-result-v b { color: #fca5a5; }
.al-result[data-ax-tier="low"] .al-result-v b { color: #fdba74; }
.al-result[data-ax-tier="gray"] .al-result-v b { color: #d5dde7; }
.al-result[data-ax-tier="normal"] .al-result-v b { color: #6ee7b7; }
.al-result-v b { transition: color .3s ease; }

.ax-tier { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); }
.ax-tier-bar { position: relative; display: flex; height: 8px; border-radius: 999px; overflow: visible; }
.ax-tier-bar i { display: block; height: 100%; opacity: .45; transition: opacity .3s ease; }
.ax-tier-bar i.r { background: #f87171; border-radius: 999px 0 0 999px; }
.ax-tier-bar i.o { background: #fb923c; }
.ax-tier-bar i.g { background: #a3b1c2; }
.ax-tier-bar i.n { background: #34d399; border-radius: 0 999px 999px 0; }
.ax-tier[data-tier="veryLow"] i.r, .ax-tier[data-tier="low"] i.o, .ax-tier[data-tier="gray"] i.g, .ax-tier[data-tier="normal"] i.n { opacity: 1; }
.ax-tier-bar em { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 3px solid var(--navy, #102737); box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 2px 8px rgba(0,0,0,.35); transition: left .45s cubic-bezier(.2,.8,.2,1); }
.ax-tier-ticks { position: relative; height: 16px; margin-top: 4px; font-size: .68rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.ax-tier-ticks span { position: absolute; transform: translateX(-50%); }
.ax-tier-txt { margin: 6px 0 0; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.78); }
.ax-tier-txt b { font-weight: 700; }
.ax-tier[data-tier="veryLow"] .ax-tier-txt b { color: #fca5a5; }
.ax-tier[data-tier="low"] .ax-tier-txt b { color: #fdba74; }
.ax-tier[data-tier="gray"] .ax-tier-txt b { color: #d5dde7; }
.ax-tier[data-tier="normal"] .ax-tier-txt b { color: #6ee7b7; }
.ax-tier.ax-pop .ax-tier-txt { animation: axTierPop .45s ease; }
@keyframes axTierPop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ax-tier-bar em, .al-result, .al-result-v b { transition: none; } }

/* ---------- phones: first screen shows only the hero copy, the calculator card waits below the fold ---------- */
.ax-cue-m { display: none; }
@media (max-width: 960px) {
  .al-hero .al-hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - var(--ax-top, 114px)); min-height: calc(100svh - var(--ax-top, 114px)); padding-bottom: 76px; }
  .ax-cue-m { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
    border: 0; padding: 10px 16px 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; font: inherit; font-size: .9rem; font-weight: 600;
    color: rgba(255,255,255,.85); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); -webkit-tap-highlight-color: transparent; }
  .ax-cue-m svg { width: 18px; height: 18px; animation: ax-cue 2.2s ease-in-out infinite; }
  .al-hero .al-hero-copy h1 { margin-top: 14px; }
  .al-hero .al-hero-copy .al-lede { line-height: 1.55; }
  .al-hero .al-hero-copy > * { align-self: stretch; } .al-hero .al-hero-copy > .al-pill { align-self: flex-start; }
  .al-hero .al-stores { margin-top: 22px; }

  .ax-cue-m:focus-visible { outline: 3px solid #eb6433; outline-offset: 3px; }
}
@media (max-width: 960px) and (max-height: 700px) {
  .al-hero .al-hero-copy { padding-bottom: 62px; }
  .al-hero .al-hero-copy .al-lede { font-size: .98rem; }
  .ax-cue-m { bottom: 8px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 960px) and (max-height: 600px) { .al-hero .al-hero-copy { padding-bottom: 0; } .ax-cue-m { display: none; } }
@media (max-width: 960px) and (prefers-reduced-motion: reduce) { .ax-cue-m svg { animation: none; } }

/* ---------- laptops with short windows: hero and calculator fit the first screen ---------- */
@media (min-width: 961px) and (max-height: 900px) {
  .al-header-in { padding-top: 12px; padding-bottom: 6px; }
  .al-hero-in { padding-top: 6px; padding-bottom: 40px; }
  .al-hero h1 { margin-top: 14px; font-size: clamp(2.2rem, 3.6vw, 3rem); }
  .al-lede { margin-top: 14px; line-height: 1.55; }
  .al-hero .al-stores { margin-top: 22px; }
  .al-calc-head { padding: 16px 22px 12px; }
  .al-calc-head h2 { margin-top: 6px; font-size: 1.18rem; }
  .al-calc-head p { margin-top: 4px; font-size: .86rem; }
  .al-calc-body { padding: 14px 22px 16px; gap: 11px; }
  .al-field input { margin-top: 4px; padding: 9px 12px; }
  .al-result-empty { padding: 12px 16px; }
  .al-result { padding: 14px 18px; }
  .al-calc-foot { padding: 12px 22px 14px; }
  .al-calc-foot p { font-size: .82rem; line-height: 1.5; margin-bottom: 10px; }
  .al-calc-foot .al-store { padding-top: 9px; padding-bottom: 9px; }
}
@media (min-width: 961px) and (max-height: 720px) {
  .al-calc-foot .al-stores { display: none; }
  .al-calc-foot p { margin-bottom: 0; }
  .al-hero h1 { font-size: clamp(2.1rem, 3.3vw, 2.7rem); }
  .al-header-in { padding-top: 10px; padding-bottom: 2px; }
  .al-header .al-brand { font-size: 2rem; gap: 12px; }
  .al-header .al-brand-mark { width: 48px; height: 48px; }
  .al-header .al-brand-mark .h-9 { width: 46px; height: 46px; }
}
@media (min-width: 961px) and (max-height: 620px) {
  .al-calc-head p { display: none; }
  .al-hero-in { padding-bottom: 24px; }
}