/* Visual identity layer v2: type, atmosphere, depth, motion. Loaded last; colours come from theme variables. */
:root{--font-display:Arial,'Helvetica Neue',Helvetica,sans-serif;--font-text:Arial,'Helvetica Neue',Helvetica,sans-serif;--glow:#d2f56a;--glow-soft:#d2f56a1c;--surface-hi:#ffffff0e;--surface-lo:#ffffff02;--lift:0 22px 44px -22px #000b,0 1px 0 #ffffff0c inset}
html.light{--glow:#8fc72f;--glow-soft:#a9dc4a26;--surface-hi:#ffffffd9;--surface-lo:#ffffff00;--lift:0 20px 40px -24px #34452b45,0 1px 0 #fff inset}
body,button,input,select,textarea{font-family:var(--font-text)}

/* ---------- type ---------- */
h1,h2,.hero h2,.auth h1,.ob h1,.demo h1,.first-run h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
.page-heading h1{font-size:clamp(32px,5.6vw,54px);line-height:1.05;letter-spacing:-.035em;font-weight:800}
.card h2{font-size:clamp(19px,2.8vw,24px);font-weight:700;letter-spacing:-.02em}
.hero h2{font-size:clamp(34px,6vw,56px);line-height:1.02;font-weight:800;letter-spacing:-.04em}
.metric strong,.ow-kpi strong,.demo-target strong,.demo-stats strong,.community-count strong,.mini strong,[data-timer-face],.wk-center strong{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.eyebrow,.hero-kicker{font-weight:600;letter-spacing:.16em}
button,.nav-link,#bottom-nav a{font-family:var(--font-text);font-weight:600}

/* ---------- atmosphere ---------- */
body{background:radial-gradient(1000px 560px at 90% -10%,var(--glow-soft),transparent 62%),radial-gradient(800px 600px at -12% 24%,color-mix(in srgb,var(--accentdark) 34%,transparent),transparent 64%),var(--bg);background-attachment:fixed}
body:before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:url(/static/grain.png);opacity:.5;mix-blend-mode:soft-light}
html.light body:before{opacity:.35}
.topbar,.layout,main,#bottom-nav,.mini{position:relative;z-index:1}
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
#bottom-nav{position:fixed;z-index:40}.mini{position:fixed;z-index:35}

/* ---------- surfaces ---------- */
.card{background:linear-gradient(180deg,var(--surface-hi),var(--surface-lo)),var(--panel);box-shadow:var(--lift);border-color:color-mix(in srgb,var(--line) 88%,var(--glow) 5%)}
.program-card,.news-entry,.community-card,.metric,.ld-feature{transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s}
@media(hover:hover){.program-card:hover,.news-entry:hover,.community-card:hover,.metric:hover,.ld-feature:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--glow) 50%,var(--line));box-shadow:0 26px 48px -22px #000c,0 0 0 1px color-mix(in srgb,var(--glow) 22%,transparent)}}
.page-heading .eyebrow:before{content:'';width:26px;height:3px;border-radius:3px;background:var(--glow);box-shadow:0 0 14px var(--glow)}
.page-heading .eyebrow{display:inline-flex;align-items:center;gap:10px}

/* ---------- hero ---------- */
.card.hero{--mx:78%;--my:18%;background:radial-gradient(520px 340px at var(--mx) var(--my),color-mix(in srgb,var(--glow) 24%,transparent),transparent 64%),repeating-linear-gradient(115deg,transparent 0 26px,#d2f56a07 26px 28px),linear-gradient(135deg,#1d3d2b 0%,#12261b 58%,#0c1a12 100%);border-color:#d2f56a33;box-shadow:0 40px 70px -34px #000d,0 0 0 1px #d2f56a14 inset;min-height:320px}
.hero h2 em{font-style:normal;background:linear-gradient(95deg,#f2ffb2,#c4ee52 55%,#8fd13a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .hero-kicker{color:#d4eca4}
.hero .primary{background:linear-gradient(180deg,#eaff94,#c6ec55);box-shadow:0 14px 32px -10px #d2f56a99,0 1px 0 #fffa inset;font-family:var(--font-text)}
.hero .session-letter,.hero .track-lines{display:none}
.hero .session-art{background:radial-gradient(ellipse at 50% 55%,#d2f56a1f,transparent 66%)}
.session-art-label{letter-spacing:.18em;font-weight:600}
.session-art-name{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#eef8d8}

/* weekly ring */
.wk{position:relative;width:clamp(150px,14vw,196px);aspect-ratio:1;margin-bottom:6px;filter:drop-shadow(0 0 28px #d2f56a33)}
.wk-ring{width:100%;height:100%;overflow:visible}
.wk-track{fill:none;stroke:#ffffff14;stroke-width:11}
.wk-bar{fill:none;stroke:url(#wk-grad);stroke-width:11;stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1)}
.wk-done .wk-bar{filter:drop-shadow(0 0 8px #d2f56a)}
.wk-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:0}
.wk-center strong{font-size:clamp(40px,4.6vw,58px);line-height:1;color:#f4ffc6}
.wk-center span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#bcd2a2;margin-top:4px}
@media(max-width:760px){
  .wk{width:84px;margin:0;grid-row:1/3;filter:none}.wk-center strong{font-size:26px}.wk-center span{font-size:9px;margin-top:0}
  .wk-track,.wk-bar{stroke-width:13}
}

/* ---------- buttons ---------- */
button.primary,a.primary{background:linear-gradient(180deg,color-mix(in srgb,var(--action) 100%,#fff 24%),var(--action));box-shadow:0 10px 24px -10px color-mix(in srgb,var(--action) 85%,transparent),0 1px 0 #ffffff88 inset;transition:transform .15s,box-shadow .2s,filter .2s}
@media(hover:hover){button.primary:hover,a.primary:hover{transform:translateY(-2px);filter:brightness(1.05)}}
button.secondary{background:linear-gradient(180deg,var(--surface-hi),var(--surface-lo)),var(--panel2);border:1px solid color-mix(in srgb,var(--line) 80%,var(--glow) 8%)}
.auth-tabs button.secondary{border:0;background:transparent}

/* ---------- navigation ---------- */
#bottom-nav{background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid color-mix(in srgb,var(--line) 80%,var(--glow) 12%);box-shadow:0 24px 44px -16px #000d}
.nav-link.active{background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 24%,transparent),color-mix(in srgb,var(--glow) 8%,transparent));box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 38%,transparent),0 10px 26px -12px var(--glow)}
html.light .nav-link.active{color:var(--ink)}
html.light #bottom-nav{background:color-mix(in srgb,var(--ink) 94%,transparent);border-color:#ffffff14}
html.light #bottom-nav a,html.light #bottom-nav button{color:#d9e4cf}
html.light #bottom-nav .active,html.light #bottom-nav [aria-current]{color:var(--ink)}

/* ---------- data ---------- */
.metric{position:relative;overflow:hidden}
.metric:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--glow),transparent 80%)}
.chart .line{filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--accent) 55%,transparent))}
.community-count{background:radial-gradient(360px 200px at 100% 0,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%),linear-gradient(135deg,#1d3d2b,#13281d)}
.community-count strong{font-size:clamp(44px,9vw,64px);background:linear-gradient(180deg,#f4ffc6,#a9de42);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{border:1px solid color-mix(in srgb,var(--line) 70%,var(--glow) 12%)}
.pill.accent{background:color-mix(in srgb,var(--glow) 18%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--glow) 40%,transparent)}

/* ---------- auth + landing ---------- */
.auth{background:radial-gradient(460px 280px at 100% 0,var(--glow-soft),transparent 70%),linear-gradient(180deg,var(--surface-hi),var(--surface-lo)),var(--panel);box-shadow:0 50px 90px -44px #000e,0 0 0 1px #d2f56a10 inset}
.auth h1{font-size:clamp(34px,9vw,48px);line-height:1.04}
.auth h1:after{content:'';display:block;width:72px;height:4px;border-radius:4px;margin-top:16px;background:linear-gradient(90deg,var(--glow),transparent)}
.landing h2{font-size:clamp(22px,4.2vw,32px)}
.ld-feature,.ld-steps li{background:linear-gradient(180deg,var(--surface-hi),var(--surface-lo)),var(--panel);box-shadow:var(--lift)}
.ld-ico{background:linear-gradient(135deg,color-mix(in srgb,var(--glow) 32%,transparent),var(--accentdark));box-shadow:0 0 0 1px color-mix(in srgb,var(--glow) 32%,transparent)}
.ld-final{background:radial-gradient(520px 260px at 50% 0,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%),var(--accentdark)}
.ld-shots{gap:22px}
.ld-shots img{border:6px solid #0b110d;border-radius:34px;box-shadow:0 40px 60px -34px #000e,0 0 0 1px #ffffff18,0 0 60px -20px color-mix(in srgb,var(--glow) 40%,transparent)}
@media(min-width:900px){.ld-shots figure:nth-child(even){transform:translateY(34px)}}

/* ---------- motion ---------- */
@media(prefers-reduced-motion:no-preference){
  #app>*{animation:fb-rise .6s cubic-bezier(.2,.7,.2,1) both}
  #app>*:nth-child(2){animation-delay:.06s}#app>*:nth-child(3){animation-delay:.12s}#app>*:nth-child(4){animation-delay:.18s}#app>*:nth-child(n+5){animation-delay:.24s}
  @keyframes fb-rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
  .hero .status-dot{animation:fb-pulse 2.2s ease-in-out infinite}
  @keyframes fb-pulse{50%{box-shadow:0 0 0 7px #d2f56a00,0 0 14px #d2f56a}}
}
.card.hero{position:relative}.card.hero>*{position:relative;z-index:1}
@media(max-width:760px){
  .card.hero .session-art{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;row-gap:2px;padding:18px 20px;border-top:1px solid #d2f56a22;background:linear-gradient(90deg,#d2f56a14,transparent 70%)}
  .card.hero .session-art .wk{grid-column:1;grid-row:1/3}
  .card.hero .session-art .session-art-label{grid-column:2;grid-row:1;align-self:end;text-align:left;font-size:10px}
  .card.hero .session-art .session-art-name{grid-column:2;grid-row:2;align-self:start;text-align:left;font-size:15px}
  .card.hero .session-art .cycle-steps{grid-column:3;grid-row:1/3}
}

/* ---------- workout focus ---------- */
.set-clock-ring{background:conic-gradient(from 0deg,var(--glow) var(--clock-progress,0%),#ffffff14 var(--clock-progress,0%))!important;box-shadow:0 0 60px -14px color-mix(in srgb,var(--glow) 55%,transparent),0 0 0 1px #ffffff0d;transition:background .3s}
.set-clock-ring:before{inset:13px;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--panel2) 90%,transparent),var(--panel))}
.set-clock-ring strong{font-size:clamp(60px,17vw,84px);letter-spacing:-.05em;background:linear-gradient(180deg,#fff,#cfe8a0);-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .set-clock-ring strong{background:none;color:var(--text)}
.set-clock-ring span{letter-spacing:.2em;color:var(--accent)}
.focus-media{background:linear-gradient(180deg,#ffffff0d,#ffffff03),#0e1610;border:1px solid color-mix(in srgb,var(--line) 80%,var(--glow) 10%);border-radius:24px;padding:10px;box-shadow:var(--lift)}
.focus-media .exercise-phases{margin:0 auto;gap:6px}
.focus-media .still-exercise,.exercise-phases-portrait .still-exercise{border-radius:14px;background:#0b110d}
.focus-media figcaption,.exercise-phases figcaption{color:#b7c8b0;font-size:11px;letter-spacing:.04em}
.focus-sets button[data-action=select-set],.focus-sets button[data-action=add-set]{border-radius:16px;min-width:48px;min-height:48px;font-family:var(--font-display);font-weight:700}
.focus-workout h1,.focus-workout h2{font-size:clamp(26px,7vw,38px);letter-spacing:-.04em}
.set-clock-ring:before{background:color-mix(in srgb,var(--panel) 100%,var(--panel2) 0%)!important;background-image:radial-gradient(circle at 50% 30%,#ffffff0a,transparent 70%)!important}
.focus-media,.focus-media figure,.focus-media .exercise-phases{background-color:transparent!important}
.focus-media .exercise-phases{padding:0}
.focus-media .exercise-phases figure{display:grid;gap:6px;background:transparent}
.focus-media .still-exercise,.focus-media .exercise-phases-portrait .still-exercise{object-fit:cover!important;aspect-ratio:3/4!important;width:100%;max-height:none;border-radius:14px}

/* ================= motion layer ================= */
@media(prefers-reduced-motion:no-preference){
  /* top loading bar */
  .route-bar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:100;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,transparent,var(--glow),#fff);box-shadow:0 0 14px var(--glow);opacity:0;pointer-events:none}
  .route-bar.run{opacity:1;transform:scaleX(.82);transition:transform 6s cubic-bezier(.1,.7,.2,1)}
  .route-bar.done{opacity:0;transform:scaleX(1);transition:transform .25s ease-out,opacity .45s .2s}

  /* bars and charts */
  progress{transition:none}
  .chart-draw polyline{stroke-dasharray:1;stroke-dashoffset:1;animation:fb-draw 1.3s cubic-bezier(.3,.7,.2,1) .15s forwards}
  .chart-draw .area{opacity:0;animation:fb-fade .9s ease .9s forwards}
  .chart-draw circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:fb-pop .4s cubic-bezier(.3,1.6,.5,1) 1.1s forwards}
  .chart-draw .chart-last{opacity:0;animation:fb-fade .5s ease 1.3s forwards}
  @keyframes fb-draw{to{stroke-dashoffset:0}}
  @keyframes fb-fade{to{opacity:1}}
  @keyframes fb-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

  /* scroll reveal */
  .rv{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);animation:none!important}
  .rv.rv-in{opacity:1;transform:none}

  /* ripple */
  .has-ripple{position:relative;overflow:hidden}
  .ripple{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);border-radius:50%;background:radial-gradient(circle,#ffffff66,#ffffff00 66%);transform:scale(0);animation:fb-ripple .6s ease-out forwards;pointer-events:none}
  @keyframes fb-ripple{to{transform:scale(1);opacity:0}}

  /* bottom nav pill */
  #bottom-nav{position:fixed}
  .nav-pill{position:absolute;top:8px;bottom:8px;left:0;width:var(--w,0);transform:translateX(var(--x,0));border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 100%,#fff 18%),var(--glow));box-shadow:0 10px 26px -8px color-mix(in srgb,var(--glow) 90%,transparent);transition:transform .45s cubic-bezier(.3,1.25,.4,1),width .45s cubic-bezier(.3,1.25,.4,1);z-index:0;pointer-events:none}
  #bottom-nav>a,#bottom-nav>button{position:relative;z-index:1}
  #bottom-nav .nav-link.active,#bottom-nav a.active{background:transparent!important;box-shadow:none!important;color:var(--ink)}
  #bottom-nav .active .nav-icon,#bottom-nav .active svg{animation:fb-hop .5s cubic-bezier(.3,1.6,.5,1)}
  @keyframes fb-hop{0%{transform:translateY(5px) scale(.8)}100%{transform:none}}

  /* hero life */
  .card.hero:before{content:'';position:absolute;right:-12%;top:-35%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d2f56a2e,transparent 66%);animation:fb-breathe 7s ease-in-out infinite;pointer-events:none;z-index:0}
  @keyframes fb-breathe{50%{transform:scale(1.18);opacity:.6}}
  .wk{animation:fb-float 6s ease-in-out infinite}
  @keyframes fb-float{50%{transform:translateY(-6px)}}
  .wk-done .wk-bar{animation:fb-glow 2.4s ease-in-out infinite}
  @keyframes fb-glow{50%{filter:drop-shadow(0 0 16px #d2f56a)}}
  .hero .primary{position:relative;overflow:hidden}
  .hero .primary:after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffffaa,transparent);transform:skewX(-20deg);animation:fb-shine 5.5s ease-in-out 2s infinite}
  @keyframes fb-shine{0%,70%{left:-60%}100%{left:130%}}
  .confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}

  /* workout */
  .set-clock-ring{animation:fb-ringglow 3s ease-in-out infinite}
  @keyframes fb-ringglow{50%{box-shadow:0 0 84px -10px color-mix(in srgb,var(--glow) 70%,transparent),0 0 0 1px #ffffff12}}

  /* dialogs and toast */
  dialog[open]{animation:fb-dialog .34s cubic-bezier(.2,.9,.3,1.1)}
  dialog[open]::backdrop{animation:fb-fade-in .3s ease}
  @keyframes fb-dialog{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes fb-fade-in{from{opacity:0}to{opacity:1}}
  #toast{transition:transform .45s cubic-bezier(.3,1.4,.4,1),opacity .3s}

  /* landing */
  .ld-shots figure img{animation:fb-float 8s ease-in-out infinite}
  .ld-shots figure:nth-child(2) img{animation-delay:-2s}.ld-shots figure:nth-child(3) img{animation-delay:-4s}.ld-shots figure:nth-child(4) img{animation-delay:-6s}
  .ld-ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
  .ld-feature:hover .ld-ico{transform:rotate(-8deg) scale(1.12)}
  .auth-tabs button{transition:background-color .25s,color .25s,transform .15s}
  .metric-mark{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}.metric:hover .metric-mark{transform:scale(1.18) rotate(-6deg)}
  .pill.accent{animation:none}
  a,button{-webkit-tap-highlight-color:transparent}
}

/* Arial's diagonal arrow is hairline thin; thicken the brand arrow glyphs so they match the heavy type */
.metric-icon,.news-entry>b,.community-arrow,.community-symbol,.auth-art,.ob-logo,.metric-mark,.ld-ico{-webkit-text-stroke:1.6px currentColor;font-weight:800}
.metric-icon{display:inline-block;transform:translateY(-.04em)}
svg.arr{display:inline-block;vertical-align:-.12em;width:1em;height:1em;-webkit-text-stroke:0}
.metric-icon svg.arr{width:.8em;height:.8em;margin-left:.06em}
.community-symbol svg.arr,.auth-art svg.arr,.ob-logo svg.arr{width:1em;height:1em}
.news-entry>b{display:grid;place-items:center;font-size:24px}
.metric-icon,.news-entry>b,.community-arrow,.community-symbol,.auth-art,.ob-logo,.metric-mark,.ld-ico{-webkit-text-stroke:0}

/* auth tabs: two equal, vertically centred segments that never wrap */
.auth .auth-tabs{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:4px;padding:4px;margin:20px 0}
.auth .auth-tabs button{margin:0;width:100%;height:auto;min-height:50px;padding:0 8px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;font-size:clamp(13px,3.9vw,16px);line-height:1.1;border-radius:12px}

/* accessibility: secondary text in the light theme must reach WCAG AA (4.5:1) on every surface */
html.light{--muted:#5f6b61}