/* Landing-only styles. Loaded after app.css to keep product pages untouched. */

.page-landing{
  --landing-accent:#22c55e;
  --landing-accent-2:#16a34a;
  --landing-accent-3:#84cc16;
}

.page-landing{
  background: var(--bg);
  overflow-x: clip;
}

.theme-light.page-landing,
.theme-system.page-landing{
  background:
    linear-gradient(180deg, #fbfdfb 0%, #f6faf7 44%, #f8faf8 100%);
}

.theme-dark.page-landing{
  background:
    linear-gradient(180deg, #07110b 0%, var(--bg) 44%, #08130c 100%);
}

.page-landing main.container{
  max-width: 1180px;
  overflow: clip;
}

.page-landing .section{
  padding-top: clamp(48px, 7vw, 92px);
  padding-bottom: clamp(48px, 7vw, 92px);
}

.page-landing .section + .section{
  border-top: 0;
}

.page-landing .section:not(.hero){
  position: relative;
}

.page-landing .section:not(.hero)::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--landing-accent) 16%, var(--border)), transparent);
  opacity:.55;
  pointer-events:none;
}

.page-landing .topbar{
  background: color-mix(in oklab, var(--topbar) 82%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.page-landing .nav a{
  color: color-mix(in oklab, var(--landing-accent) 78%, var(--text));
  font-weight: 650;
}

.page-landing .nav a:hover{
  background: color-mix(in oklab, var(--landing-accent) 8%, transparent);
  color: var(--landing-accent);
}

.page-landing .hero{
  position: relative;
  min-height: calc(100dvh - 86px);
  align-items: center;
  padding-top: clamp(34px, 5vw, 78px);
  padding-bottom: clamp(34px, 5vw, 78px);
}

.page-landing .hero::before{
  content:"";
  position:absolute;
  inset: -56px 0 auto;
  height: min(520px, 62vh);
  pointer-events:none;
  background:
    radial-gradient(620px 280px at 72% 20%, color-mix(in oklab, var(--landing-accent) 10%, transparent), transparent 68%),
    radial-gradient(480px 240px at 18% 16%, color-mix(in oklab, var(--landing-accent) 6%, transparent), transparent 72%);
  opacity: .9;
}

@media (min-width: 960px){
  .page-landing .section{
    padding-top: clamp(46px, 5.2vw, 68px);
    padding-bottom: clamp(46px, 5.2vw, 68px);
  }

  .page-landing .hero{
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .9fr);
    align-items: center;
    min-height: auto;
    padding-top: clamp(32px, 4vw, 54px);
    padding-bottom: clamp(38px, 4.4vw, 58px);
  }

  .page-landing .hero-visual-stack{
    align-self: center;
    gap: 14px;
  }

  .page-landing .hero-photo{
    min-height: 210px;
    max-height: 260px;
  }

  .page-landing .hero-visual-stack .product-mockup{
    padding: 16px;
  }

  .page-landing .hero-visual-stack .coach-card{
    padding: 14px;
  }

  .page-landing .hero-visual-stack .coach-card strong{
    font-size: 19px;
  }

  .page-landing .hero-visual-stack .metric-card,
  .page-landing .hero-visual-stack .macro-card{
    padding: 10px;
  }
}

.page-landing .hero-copy{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.page-landing .h-title{
  max-width: 13ch;
  font-size: clamp(38px, 6vw, 74px);
  line-height: .96;
  letter-spacing: -.045em;
}

.page-landing .h-title .accent{
  color: transparent;
  background: linear-gradient(135deg, var(--landing-accent), var(--landing-accent-3) 72%);
  -webkit-background-clip: text;
  background-clip: text;
}

.page-landing .h-sub{
  max-width: 58ch;
  font-size: clamp(16px, 1.45vw, 19px);
}

.page-landing .hero-primary{
  background: linear-gradient(135deg, var(--landing-accent), var(--landing-accent-2) 58%, #15803d);
  box-shadow: 0 18px 42px color-mix(in oklab, var(--landing-accent) 28%, transparent);
}

.page-landing .hero-secondary{
  border: 1px solid color-mix(in oklab, var(--text) 14%, var(--border));
}

.page-landing .hero-chips{
  max-width: 580px;
}

.page-landing .hero-chip{
  background: color-mix(in oklab, var(--card) 72%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.page-landing .hero-visual-stack{
  position:relative;
  min-width:0;
  display:grid;
  gap: 16px;
}

.page-landing .photo-placeholder{
  position:relative;
  min-height: 260px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 6px;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in oklab, var(--landing-accent) 22%, var(--border));
  background:
    linear-gradient(180deg, transparent 20%, rgba(0,0,0,.48) 100%),
    radial-gradient(120px 180px at 72% 35%, color-mix(in oklab, var(--landing-accent) 28%, transparent), transparent 72%),
    linear-gradient(135deg, #132719, #284331 48%, #101b14);
  color:#fff;
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
  background-position: center;
  background-size: cover;
}

.page-landing .photo-placeholder[data-image]{
  background-position: center;
  background-size: cover;
}

.page-landing .photo-placeholder[data-image]::after{
  content:"";
  display:none;
}

.page-landing .photo-placeholder[data-image]::before{
  display:none;
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/hero-training.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.58) 100%),
    url('/assets/img/landing/hero-training.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/workout-session.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.54) 100%),
    url('/assets/img/landing/workout-session.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/nutrition-lifestyle.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.50) 100%),
    url('/assets/img/landing/nutrition-lifestyle.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/mobile-coach.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.56) 100%),
    url('/assets/img/landing/mobile-coach.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/progress-mood.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.55) 100%),
    url('/assets/img/landing/progress-mood.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/coach-client.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.55) 100%),
    url('/assets/img/landing/coach-client.webp');
}

.page-landing .photo-placeholder[data-image="/assets/img/landing/final-training.webp"]{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.58) 100%),
    url('/assets/img/landing/final-training.webp');
}

.theme-light.page-landing .photo-placeholder,
.theme-system.page-landing .photo-placeholder{
  box-shadow: 0 18px 46px rgba(21,128,61,.12);
}

.page-landing .photo-placeholder::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(70px 70px at 62% 22%, rgba(255,255,255,.36), transparent 62%),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.14) 36% 39%, transparent 40% 100%);
  opacity:.9;
}

.page-landing .photo-placeholder::after{
  content:"фото будет добавлено";
  position:absolute;
  top: 14px;
  left: 14px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.page-landing .photo-placeholder > *{
  position:relative;
  z-index:1;
}

.page-landing .photo-placeholder span{
  color: color-mix(in oklab, var(--landing-accent) 65%, #fff);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.page-landing .photo-placeholder strong{
  max-width: 16ch;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}

.page-landing .hero-photo{
  min-height: 230px;
}

.page-landing .hero-photo strong{
  max-width: 13ch;
}

.page-landing .product-mockup{
  isolation: isolate;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 28px;
  background:
    linear-gradient(145deg, color-mix(in oklab, var(--card) 90%, transparent), color-mix(in oklab, var(--surface) 96%, transparent)),
    var(--card);
  border-color: color-mix(in oklab, var(--landing-accent) 32%, var(--border));
  box-shadow:
    0 26px 64px rgba(0,0,0,.18),
    0 0 0 1px color-mix(in oklab, var(--landing-accent) 8%, transparent) inset;
}

.theme-light.page-landing .product-mockup,
.theme-system.page-landing .product-mockup{
  box-shadow:
    0 22px 58px rgba(21,128,61,.12),
    0 0 0 1px color-mix(in oklab, var(--landing-accent) 10%, transparent) inset;
}

.page-landing .product-mockup::after{
  content:"";
  position:absolute;
  inset: 10% -12% auto auto;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in oklab, var(--landing-accent) 32%, transparent), transparent 68%);
  filter: blur(10px);
  z-index: 0;
}

.page-landing .product-screen{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.page-landing .product-status{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--panel) 78%, transparent);
  border: 1px solid var(--border);
}

.page-landing .product-status span,
.page-landing .metric-card span,
.page-landing .macro-card span{
  color: var(--muted);
  font-size: 12px;
}

.page-landing .product-status strong,
.page-landing .macro-card strong{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-landing .coach-card{
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(360px 170px at 100% 0%, color-mix(in oklab, var(--landing-accent) 24%, transparent), transparent 62%),
    color-mix(in oklab, var(--landing-accent) 10%, var(--panel));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 30%, var(--border));
}

.page-landing .coach-card__tag{
  display:inline-flex;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--landing-accent);
  background: color-mix(in oklab, var(--landing-accent) 14%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-landing .coach-card strong{
  display:block;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: 21px;
  line-height: 1.15;
}

.page-landing .coach-card p{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.page-landing .product-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.page-landing .metric-card,
.page-landing .macro-card{
  padding: 12px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
}

.page-landing .metric-card strong{
  display:block;
  margin-top: 4px;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: 20px;
  line-height: 1;
}

.page-landing .metric-card--accent{
  background: color-mix(in oklab, var(--landing-accent) 12%, var(--panel));
  border-color: color-mix(in oklab, var(--landing-accent) 28%, var(--border));
}

.page-landing .macro-card{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.page-landing .macro-bars{
  display:grid;
  gap: 7px;
}

.page-landing .macro-bars i{
  display:block;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--landing-accent) var(--w), color-mix(in oklab, var(--chip) 74%, transparent) var(--w));
}

.page-landing .product-heat{
  grid-auto-flow: column;
  overflow: hidden;
}

.page-landing .section-kicker{
  display:inline-flex;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--landing-accent);
  background: color-mix(in oklab, var(--landing-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 24%, var(--border));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-landing .benefits-grid{
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 760px){
  .page-landing .benefits-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px){
  .page-landing .benefits-grid{
    grid-template-columns: 1.15fr repeat(2, minmax(0, .92fr));
  }
}

.page-landing .benefit-card{
  min-height: 220px;
  position: relative;
  overflow: hidden;
  padding: 20px;
  gap: 12px;
  background:
    radial-gradient(300px 170px at 100% 0%, color-mix(in oklab, var(--landing-accent) 7%, transparent), transparent 64%),
    color-mix(in oklab, var(--card) 94%, transparent);
  border-color: color-mix(in oklab, var(--landing-accent) 14%, var(--border));
  box-shadow: 0 12px 30px rgba(0,0,0,.045);
}

.page-landing .benefit-card:hover{
  border-color: color-mix(in oklab, var(--landing-accent) 38%, var(--border));
}

@media (min-width: 760px){
  .page-landing .benefit-card--wide{
    grid-column: span 2;
  }
}

@media (min-width: 1040px){
  .page-landing .benefit-card--wide{
    grid-row: span 2;
    grid-column: auto;
    min-height: 456px;
  }
}

.page-landing .benefit-card .feature-ico{
  background: color-mix(in oklab, var(--landing-accent) 14%, var(--chip));
  color: var(--landing-accent);
  border-color: color-mix(in oklab, var(--landing-accent) 28%, var(--border));
}

.page-landing .benefit-label{
  color: var(--landing-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.page-landing .benefit-card h3{
  max-width: 18ch;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.12;
}

.page-landing .benefit-card p{
  font-size: 14px;
}

.page-landing .benefit-list{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style:none;
}

.page-landing .benefit-list li{
  padding: 7px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--landing-accent) 10%, var(--chip));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 20%, var(--border));
  color: var(--text);
  font-size: 12px;
}

.page-landing .lifestyle-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}

@media (min-width: 860px){
  .page-landing .lifestyle-grid{
    grid-template-columns: 1.2fr .8fr;
  }

  .page-landing .lifestyle-card--large{
    grid-row: span 2;
  }
}

.page-landing .lifestyle-card{
  display:grid;
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 16%, var(--border));
  box-shadow: 0 12px 32px rgba(0,0,0,.045);
}

.page-landing .lifestyle-card .photo-placeholder{
  min-height: 220px;
  box-shadow:none;
}

.page-landing .lifestyle-card--large .photo-placeholder{
  min-height: 420px;
}

.page-landing .lifestyle-card span:not(.photo-placeholder span){
  color: var(--landing-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.page-landing .lifestyle-card h3{
  margin: 4px 0 6px;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height:1.08;
}

.page-landing .lifestyle-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.page-landing .day-control{
  display:grid;
  gap: clamp(22px, 4vw, 44px);
  align-items:center;
}

.page-landing .day-control > *,
.page-landing .day-visual,
.page-landing .dash-preview,
.page-landing .phone-preview{
  min-width: 0;
}

@media (min-width: 980px){
  .page-landing .day-control{
    grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  }
}

.page-landing .day-points{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  max-width: 560px;
}

.page-landing .day-points span{
  padding: 8px 11px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--landing-accent) 10%, var(--chip));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 20%, var(--border));
  color: var(--text);
  font-size: 13px;
}

.page-landing .day-visual{
  position:relative;
  min-height: 520px;
  display:grid;
  align-items:center;
}

.page-landing .day-visual::before{
  content:"";
  position:absolute;
  inset: 8% 2% 10% 12%;
  border-radius: 42px;
  background:
    radial-gradient(circle at 25% 18%, color-mix(in oklab, var(--landing-accent) 16%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in oklab, var(--landing-accent) 7%, transparent), transparent 62%);
  filter: blur(1px);
}

.page-landing .dash-preview,
.page-landing .phone-preview{
  position:relative;
  z-index:1;
  border: 1px solid color-mix(in oklab, var(--landing-accent) 22%, var(--border));
  background: color-mix(in oklab, var(--card) 91%, transparent);
  box-shadow: 0 22px 56px rgba(0,0,0,.16);
}

.theme-light.page-landing .dash-preview,
.theme-light.page-landing .phone-preview,
.theme-system.page-landing .dash-preview,
.theme-system.page-landing .phone-preview{
  box-shadow: 0 18px 48px rgba(21,128,61,.10);
}

.page-landing .dash-preview{
  width: min(100%, 620px);
  padding: clamp(16px, 2vw, 22px);
  border-radius: 28px;
  display:grid;
  gap: 14px;
}

.page-landing .dash-preview__top,
.page-landing .dash-preview__focus,
.page-landing .dash-preview__cards{
  display:grid;
  gap: 12px;
}

.page-landing .dash-preview__top{
  grid-template-columns: 1fr auto;
  align-items:center;
}

.page-landing .dash-preview__top span,
.page-landing .dash-preview__focus span,
.page-landing .mini-widget span,
.page-landing .phone-preview__head span{
  color: var(--muted);
  font-size: 12px;
}

.page-landing .dash-preview__top strong,
.page-landing .dash-preview__focus strong,
.page-landing .mini-widget strong,
.page-landing .phone-preview__head strong{
  display:block;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-landing .dash-preview__top b{
  width: 58px;
  height: 58px;
  display:grid;
  place-items:center;
  border-radius: 18px;
  background: color-mix(in oklab, var(--landing-accent) 14%, var(--panel));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 28%, var(--border));
  color: var(--landing-accent);
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-landing .dash-preview__focus{
  grid-template-columns: auto 1fr;
  align-items:center;
  padding: 15px;
  border-radius: 22px;
  background:
    radial-gradient(320px 160px at 0% 0%, color-mix(in oklab, var(--landing-accent) 18%, transparent), transparent 64%),
    var(--panel);
  border: 1px solid var(--border);
}

.page-landing .dash-preview__focus p{
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.page-landing .exercise-figure{
  width: 76px;
  height: 76px;
  position:relative;
  border-radius: 22px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--landing-accent) 22%, var(--chip)), var(--chip));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 28%, var(--border));
}

.page-landing .exercise-figure i{
  position:absolute;
  display:block;
  background: var(--landing-accent);
  border-radius: 999px;
}

.page-landing .exercise-figure i:nth-child(1){ width:38px; height:8px; left:19px; top:18px; transform:rotate(-12deg); }
.page-landing .exercise-figure i:nth-child(2){ width:8px; height:38px; left:34px; top:21px; }
.page-landing .exercise-figure i:nth-child(3){ width:46px; height:8px; left:15px; bottom:17px; transform:rotate(10deg); }

.page-landing .dash-preview__cards{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-landing .mini-widget{
  padding: 13px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .mini-widget strong{
  margin: 5px 0 10px;
  font-size: 18px;
}

.page-landing .mini-widget i{
  display:block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--landing-accent) var(--w), color-mix(in oklab, var(--chip) 78%, transparent) var(--w));
}

.page-landing .mini-widget--streak{
  background: color-mix(in oklab, var(--landing-accent) 10%, var(--panel));
}

.page-landing .week-strip{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 10px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .week-strip span{
  height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--chip) 76%, transparent);
}

.page-landing .week-strip .is-done{ background: color-mix(in oklab, var(--landing-accent) 50%, var(--chip)); }
.page-landing .week-strip .is-now{ background: var(--landing-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--landing-accent) 16%, transparent); }

.page-landing .phone-preview{
  width: 210px;
  min-height: 390px;
  position:absolute;
  right: 0;
  bottom: 6px;
  padding: 18px 14px 14px;
  border-radius: 34px;
}

.page-landing .phone-preview__bar{
  width: 68px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--text) 28%, transparent);
}

.page-landing .phone-preview__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
}

.page-landing .phone-ring{
  width: 118px;
  height: 118px;
  margin: 22px auto;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: conic-gradient(var(--landing-accent) 0 82%, color-mix(in oklab, var(--chip) 88%, transparent) 0);
  position:relative;
}

.page-landing .phone-ring::after{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: inherit;
  background: var(--card);
}

.page-landing .phone-ring span{
  position:relative;
  z-index:1;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-weight: 800;
  font-size: 24px;
}

.page-landing .phone-list{
  display:grid;
  gap: 9px;
}

.page-landing .phone-list span{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
}

.page-landing .phone-list b{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--landing-accent);
  flex: 0 0 auto;
}

.page-landing .phone-action{
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 16px;
  text-align:center;
  font-size: 13px;
  font-weight: 800;
  background: var(--landing-accent);
  color: #052e16;
}

.page-landing .lifestyle-split{
  display:grid;
  gap: clamp(22px, 4vw, 42px);
  align-items:center;
}

@media (min-width: 900px){
  .page-landing .lifestyle-split{
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
  }
}

.page-landing .lifestyle-split__photo{
  min-height: 420px;
}

.page-landing .life-stats{
  display:grid;
  gap: 10px;
  max-width: 560px;
}

.page-landing .life-stats span{
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in oklab, var(--landing-accent) 7%, var(--card));
  border: 1px solid color-mix(in oklab, var(--landing-accent) 18%, var(--border));
  color: var(--muted);
}

.page-landing .life-stats strong{
  color: var(--text);
}

@media (max-width: 780px){
  .page-landing .day-visual{
    min-height: 0;
    gap: 16px;
  }

  .page-landing .day-visual::before{ inset: 6% 0 8%; }

  .page-landing .phone-preview{
    position:relative;
    right:auto;
    bottom:auto;
    width: min(100%, 300px);
    min-height: 0;
    justify-self:center;
  }
}

@media (max-width: 560px){
  .page-landing .dash-preview__focus,
  .page-landing .dash-preview__cards{
    grid-template-columns: 1fr;
  }

  .page-landing .exercise-figure{
    width: 64px;
    height: 64px;
  }
}

.page-landing .proof-section{
  position:relative;
}

.page-landing .proof-head{
  max-width: 760px;
}

.page-landing .proof-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}

@media (min-width: 760px){
  .page-landing .proof-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px){
  .page-landing .proof-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.page-landing .proof-card{
  position:relative;
  overflow:hidden;
  min-width: 0;
  min-height: 260px;
  display:flex;
  flex-direction:column;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(260px 160px at 100% 0%, color-mix(in oklab, var(--landing-accent) 8%, transparent), transparent 66%),
    color-mix(in oklab, var(--card) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 17%, var(--border));
  box-shadow: 0 12px 32px rgba(0,0,0,.055);
}

.page-landing .proof-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 18px auto;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--landing-accent) 8%, transparent);
  filter: blur(2px);
  pointer-events:none;
}

.page-landing .proof-card__top{
  display:flex;
  flex-direction:column;
  gap: 4px;
}

.page-landing .proof-card__top span{
  color: var(--landing-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.page-landing .proof-card__top strong{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: 20px;
  line-height: 1.12;
}

.page-landing .proof-card p{
  margin: auto 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.page-landing .proof-calendar{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .proof-calendar i{
  height: 48px;
  border-radius: 14px;
  background: color-mix(in oklab, var(--chip) 80%, transparent);
}

.page-landing .proof-calendar .is-on{ background: color-mix(in oklab, var(--landing-accent) 38%, var(--chip)); }
.page-landing .proof-calendar .is-now{ background: var(--landing-accent); }

.page-landing .proof-macros{
  display:grid;
  gap: 10px;
  padding: 15px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .proof-macros span{
  display:block;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--chip) 76%, transparent);
  overflow:hidden;
}

.page-landing .proof-macros b{
  display:block;
  height:100%;
  width: var(--w);
  border-radius: inherit;
  background: var(--landing-accent);
}

.page-landing .proof-chart{
  min-height: 122px;
  display:flex;
  align-items:end;
  gap: 9px;
  padding: 14px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .proof-chart i{
  flex:1;
  height: var(--h);
  min-height: 28px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, var(--landing-accent), color-mix(in oklab, var(--landing-accent-2) 70%, #052e16));
}

.page-landing .proof-clients{
  display:grid;
  gap: 9px;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.page-landing .proof-clients span{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:center;
  gap: 10px;
}

.page-landing .proof-clients b{
  width: 34px;
  height: 34px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: color-mix(in oklab, var(--landing-accent) 16%, var(--chip));
  color: var(--landing-accent);
  font-size: 12px;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-landing .proof-clients i{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--landing-accent) 62%, color-mix(in oklab, var(--chip) 76%, transparent) 62%);
}

.page-landing .people-grid{
  display:grid;
  gap: 16px;
  margin-top: 26px;
}

@media (min-width: 820px){
  .page-landing .people-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-landing .people-card{
  margin:0;
  display:grid;
  gap: 14px;
  padding: 14px;
  border-radius: 28px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 16%, var(--border));
}

.page-landing .people-card .photo-placeholder{
  min-height: 300px;
  box-shadow:none;
}

.page-landing .people-card figcaption{
  display:grid;
  gap: 6px;
  padding: 0 4px 4px;
}

.page-landing .people-card strong{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: clamp(18px, 2vw, 24px);
  line-height:1.15;
}

.page-landing .people-card span{
  color: var(--landing-accent);
  font-size: 12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.page-landing .access-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}

@media (min-width: 900px){
  .page-landing .access-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items:stretch;
  }
}

.page-landing .access-card{
  display:flex;
  flex-direction:column;
  min-width: 0;
  gap: 14px;
  padding: 22px;
  border-radius: 26px;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 16%, var(--border));
  box-shadow: 0 12px 32px rgba(0,0,0,.045);
}

.page-landing .access-card--active{
  background:
    radial-gradient(320px 180px at 100% 0%, color-mix(in oklab, var(--landing-accent) 12%, transparent), transparent 65%),
    color-mix(in oklab, var(--card) 96%, transparent);
  border-color: color-mix(in oklab, var(--landing-accent) 34%, var(--border));
}

.page-landing .access-card__badge{
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--landing-accent);
  background: color-mix(in oklab, var(--landing-accent) 11%, transparent);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 20%, var(--border));
  font-size: 12px;
  font-weight: 800;
}

.page-landing .access-card h3{
  margin: 0;
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
  font-size: 28px;
  line-height: 1.05;
}

.page-landing .access-card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.page-landing .access-card ul{
  display:grid;
  gap: 9px;
  margin: 0 0 auto;
  padding: 0;
  list-style:none;
  color: var(--text);
  font-size: 14px;
}

.page-landing .access-card li{
  display:flex;
  gap: 8px;
  align-items:center;
}

.page-landing .access-card li::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--landing-accent);
  flex: 0 0 auto;
}

.page-landing .access-card .btn{
  width: 100%;
  text-align:center;
}

.page-landing .final-cta{
  display:grid;
  min-width: 0;
  gap: 22px;
  text-align:left;
  background:
    radial-gradient(520px 240px at 100% 0%, color-mix(in oklab, var(--landing-accent) 16%, transparent), transparent 68%),
    color-mix(in oklab, var(--card) 96%, transparent);
}

@media (min-width: 860px){
  .page-landing .final-cta{
    grid-template-columns: minmax(0, 1fr) minmax(220px, .36fr) minmax(280px, .48fr);
    align-items:center;
  }
}

.page-landing .final-cta h2{
  max-width: 760px;
}

.page-landing .final-cta p{
  margin-left:0;
  margin-right:0;
}

.page-landing .final-cta .hero-cta{
  justify-content:flex-start;
}

.page-landing .final-cta__photo{
  min-height: 280px;
}

.page-landing .cta-week{
  padding: 16px;
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid color-mix(in oklab, var(--landing-accent) 24%, var(--border));
}

.page-landing .cta-week__head{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.page-landing .cta-week__head span,
.page-landing .cta-week__note{
  color: var(--muted);
  font-size: 12px;
}

.page-landing .cta-week__head strong{
  font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter;
}

.page-landing .cta-week__days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.page-landing .cta-week__days i{
  min-height: 46px;
  display:grid;
  place-items:center;
  border-radius: 13px;
  background: color-mix(in oklab, var(--chip) 80%, transparent);
  color: var(--muted);
  font-style:normal;
  font-size: 12px;
  font-weight: 800;
}

.page-landing .cta-week__days .is-on{
  background: color-mix(in oklab, var(--landing-accent) 28%, var(--chip));
  color: var(--text);
}

.page-landing .cta-week__days .is-now{
  background: var(--landing-accent);
  color: #052e16;
}

.page-landing .cta-week__note{
  margin-top: 12px;
}

@media (max-width: 720px){
  .page-landing main.container{
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-landing .section{
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .page-landing .section:not(.hero)::before{
    opacity:.38;
  }

  .page-landing .hero{
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 32px;
  }

  .page-landing .hero::before{
    height: 360px;
    opacity: .55;
  }

  .page-landing .h-title{
    max-width: 13ch;
    font-size: clamp(34px, 12vw, 48px);
    letter-spacing: -.035em;
  }

  .page-landing .h-sub{
    font-size: 16px;
  }

  .page-landing .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-landing .product-mockup,
  .page-landing .dash-preview,
  .page-landing .phone-preview,
  .page-landing .photo-placeholder,
  .page-landing .benefit-card,
  .page-landing .lifestyle-card,
  .page-landing .people-card,
  .page-landing .proof-card,
  .page-landing .access-card,
  .page-landing .cta-card{
    border-radius: 20px;
  }

  .page-landing .hero-photo,
  .page-landing .lifestyle-card .photo-placeholder,
  .page-landing .lifestyle-card--large .photo-placeholder,
  .page-landing .lifestyle-split__photo,
  .page-landing .people-card .photo-placeholder,
  .page-landing .final-cta__photo{
    min-height: 220px;
  }

  .page-landing .proof-card,
  .page-landing .access-card{
    min-height: 0;
    padding: 16px;
  }

  .page-landing .proof-calendar i,
  .page-landing .week-strip span{
    height: 34px;
    border-radius: 10px;
  }

  .page-landing .cta-week__days i{
    min-height: 38px;
    border-radius: 10px;
    font-size: 11px;
  }
}

@media (max-width: 420px){
  .page-landing .top-actions{
    gap: 8px;
  }

  .page-landing .topbar{
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-landing .brand{
    font-size: 20px;
  }

  .page-landing .top-actions .theme-btn,
  .page-landing .top-actions .btn.small.subtle{
    display:none;
  }

  .page-landing .top-actions .btn.small{
    padding: 9px 12px;
    border-radius: 12px;
  }

  .page-landing .product-status{
    align-items:flex-start;
    flex-direction:column;
  }

  .page-landing .hero-chip,
  .page-landing .day-points span{
    width: 100%;
    justify-content:center;
  }

  .page-landing .product-grid,
  .page-landing .cta-week__days,
  .page-landing .week-strip,
  .page-landing .proof-calendar{
    gap: 5px;
  }

  .page-landing .metric-card,
  .page-landing .macro-card,
  .page-landing .mini-widget{
    padding: 10px;
  }

  .page-landing .metric-card strong,
  .page-landing .mini-widget strong{
    font-size: 16px;
  }

  .page-landing .coach-card strong,
  .page-landing .proof-card__top strong{
    font-size: 18px;
  }

  .page-landing .access-card h3{
    font-size: 24px;
  }

  .page-landing .photo-placeholder{
    padding: 14px;
  }

  .page-landing .photo-placeholder strong{
    font-size: 22px;
  }
}

@media (max-width: 360px){
  .page-landing main.container{
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-landing .h-title{
    font-size: 32px;
  }

  .page-landing .product-grid,
  .page-landing .dash-preview__cards{
    grid-template-columns: 1fr;
  }

  .page-landing .cta-week__days i,
  .page-landing .week-strip span,
  .page-landing .proof-calendar i{
    min-height: 30px;
    height: 30px;
    font-size: 10px;
  }
}

/* Trainer landing. Scoped separately so the main landing and app pages stay untouched. */
.page-trainer-landing{
  --trainer-accent:#22c55e;
  --trainer-accent-2:#16a34a;
  --trainer-accent-3:#84cc16;
  --trainer-ink:#052e16;
  background:radial-gradient(760px 360px at 90% -8%, color-mix(in oklab, var(--trainer-accent) 18%, transparent), transparent 64%), linear-gradient(180deg, #fbfdfb 0%, #f5faf6 46%, #f8faf8 100%);
  overflow-x:clip;
}
.theme-dark.page-trainer-landing{ background:radial-gradient(760px 360px at 90% -8%, color-mix(in oklab, var(--trainer-accent) 16%, transparent), transparent 64%), linear-gradient(180deg, #07110b 0%, var(--bg) 46%, #08130c 100%); }
.page-trainer-landing .trainer-landing-topbar{ background:color-mix(in oklab, var(--topbar) 84%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.page-trainer-landing .trainer-brand{ display:inline-flex; align-items:center; }
.page-trainer-landing .nav a{ color:color-mix(in oklab, var(--trainer-accent-2) 72%, var(--text)); font-weight:700; }
.page-trainer-landing .nav a:hover{ background:color-mix(in oklab, var(--trainer-accent) 9%, transparent); color:var(--trainer-accent-2); }
.page-trainer-landing .trainer-top-cta,.page-trainer-landing .trainer-l-primary{ background:linear-gradient(135deg, var(--trainer-accent), var(--trainer-accent-2) 58%, #15803d); color:#fff; box-shadow:0 16px 36px color-mix(in oklab, var(--trainer-accent) 26%, transparent); }
.page-trainer-landing .trainer-l-secondary{ border:1px solid color-mix(in oklab, var(--text) 14%, var(--border)); }
.trainer-landing-shell{ max-width:1180px; overflow:clip; }
.trainer-l-hero,.trainer-l-section,.trainer-l-mid-cta,.trainer-l-final{ position:relative; }
.trainer-l-hero{ display:grid; gap:26px; align-items:center; padding-top:clamp(30px, 5vw, 64px); padding-bottom:clamp(44px, 7vw, 86px); }
.trainer-l-hero::before{ content:""; position:absolute; inset:-40px -18px auto; height:min(520px, 58vh); pointer-events:none; background:radial-gradient(520px 220px at 18% 12%, color-mix(in oklab, var(--trainer-accent) 8%, transparent), transparent 72%), radial-gradient(620px 280px at 88% 18%, color-mix(in oklab, var(--trainer-accent) 12%, transparent), transparent 68%); opacity:.9; }
.trainer-l-hero > *,.trainer-l-section > *,.trainer-l-mid-cta > *,.trainer-l-final > *{ position:relative; z-index:1; min-width:0; }
.trainer-l-kicker{ display:inline-flex; width:fit-content; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:color-mix(in oklab, var(--trainer-accent) 11%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 22%, var(--border)); color:var(--trainer-accent-2); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.trainer-l-hero h1,.trainer-l-section h2,.trainer-l-mid-cta h2,.trainer-l-final h2{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; letter-spacing:-.04em; line-height:1; color:var(--text); }
.trainer-l-hero h1{ max-width:15ch; margin:16px 0 14px; font-size:clamp(38px, 10vw, 72px); }
.trainer-l-hero p,.trainer-l-section-head p,.trainer-l-mid-cta p,.trainer-l-final p,.trainer-l-mobile-copy p{ max-width:64ch; margin:0; color:var(--muted); font-size:clamp(16px, 1.5vw, 19px); line-height:1.58; }
.trainer-l-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.trainer-l-actions .btn{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; text-align:center; }
.trainer-l-demo-strip{ display:flex; width:fit-content; max-width:100%; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding:10px; border-radius:18px; background:color-mix(in oklab, var(--card) 86%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 22%, var(--border)); box-shadow:0 12px 34px rgba(21,128,61,.08); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.trainer-l-demo-strip span{ flex:1 1 100%; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.trainer-l-demo-strip strong,.trainer-l-demo-strip code{ min-width:0; font-size:13px; }
.trainer-l-demo-strip code,.trainer-l-demo-login code,.trainer-l-demo-details code{ padding:5px 8px; border-radius:10px; background:color-mix(in oklab, var(--trainer-accent) 11%, var(--chip)); color:var(--trainer-accent-2); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight:800; }
.trainer-l-chips,.trainer-l-mobile-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.trainer-l-chips span,.trainer-l-mobile-list span{ display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; background:color-mix(in oklab, var(--card) 76%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 18%, var(--border)); color:var(--text); font-size:13px; font-weight:700; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.trainer-l-chips span::before,.trainer-l-mobile-list span::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--trainer-accent); flex:0 0 auto; }
.trainer-l-hero__visual{ display:grid; gap:14px; }
.trainer-l-photo{ position:relative; overflow:hidden; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; padding:18px; border-radius:28px; color:#fff; border:1px solid color-mix(in oklab, var(--trainer-accent) 24%, var(--border)); background:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.62) 100%), radial-gradient(220px 180px at 74% 28%, color-mix(in oklab, var(--trainer-accent) 36%, transparent), transparent 72%), radial-gradient(120px 160px at 22% 18%, rgba(255,255,255,.16), transparent 72%), linear-gradient(135deg, #102417, #254b32 48%, #08140d); box-shadow:0 18px 46px rgba(0,0,0,.16); }
.trainer-l-photo[data-image]{ background-position:center; background-size:cover; }
.trainer-l-photo[data-image]::before,.trainer-l-photo[data-image]::after{ display:none; }
.trainer-l-photo[data-image="/assets/img/trainer/hero-trainer.webp"]{ background-image:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.58) 100%), url('/assets/img/trainer/hero-trainer.webp'); }
.trainer-l-photo[data-image="/assets/img/trainer/client-dashboard.webp"]{ background-image:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.56) 100%), url('/assets/img/trainer/client-dashboard.webp'); }
.trainer-l-photo[data-image="/assets/img/trainer/mobile-coaching.webp"]{ background-image:linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.54) 100%), url('/assets/img/trainer/mobile-coaching.webp'); }
.trainer-l-photo[data-image="/assets/img/trainer/cta-bg.webp"]{ background-image:linear-gradient(90deg, rgba(5,46,22,.72) 0%, rgba(5,46,22,.34) 54%, rgba(5,46,22,.12) 100%), url('/assets/img/trainer/cta-bg.webp'); }
.trainer-l-photo::before{ content:""; position:absolute; inset:18% auto auto 58%; width:120px; height:180px; border-radius:64px 64px 28px 28px; background:radial-gradient(circle at 50% 20%, #f3d0b7 0 18px, transparent 19px), linear-gradient(180deg, color-mix(in oklab, var(--trainer-accent) 64%, #0f172a), #0f172a); opacity:.72; transform:rotate(-8deg); }
.trainer-l-photo::after{ content:""; position:absolute; right:18px; bottom:70px; width:76px; height:108px; border-radius:18px; border:2px solid rgba(255,255,255,.55); background:linear-gradient(180deg, rgba(255,255,255,.24), transparent), repeating-linear-gradient(180deg, rgba(255,255,255,.28) 0 7px, transparent 7px 15px); opacity:.66; }
.trainer-l-photo > *{ position:relative; z-index:1; }
.trainer-l-photo span{ color:color-mix(in oklab, var(--trainer-accent) 62%, #fff); font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.trainer-l-photo strong{ max-width:15ch; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; font-size:clamp(24px, 3vw, 36px); line-height:1; }
.trainer-l-photo small{ max-width:34ch; color:rgba(255,255,255,.78); font-size:11px; line-height:1.35; }
.trainer-l-product,.trainer-l-show-panel,.trainer-l-phone{ border:1px solid color-mix(in oklab, var(--trainer-accent) 24%, var(--border)); background:color-mix(in oklab, var(--card) 92%, transparent); box-shadow:0 22px 58px rgba(21,128,61,.12); }
.trainer-l-product{ padding:14px; border-radius:28px; }
.trainer-l-window-head{ display:flex; align-items:center; gap:7px; margin-bottom:12px; color:var(--muted); font-size:12px; font-weight:700; }
.trainer-l-window-head i{ width:9px; height:9px; border-radius:999px; background:var(--trainer-accent); }
.trainer-l-window-head i:nth-child(1){ background:#ef4444; }
.trainer-l-window-head i:nth-child(2){ background:#f59e0b; }
.trainer-l-dashboard{ display:grid; gap:12px; }
.trainer-l-client-list,.trainer-l-client-card{ display:grid; gap:10px; min-width:0; }
.trainer-l-client-list{ padding:12px; border-radius:20px; background:var(--panel); border:1px solid var(--border); }
.trainer-l-client-list b,.trainer-l-client-head span,.trainer-l-show-top strong{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; }
.trainer-l-client-list > span{ display:grid; gap:2px; padding:10px; border-radius:14px; background:color-mix(in oklab, var(--chip) 70%, transparent); border:1px solid transparent; }
.trainer-l-client-list .is-active{ border-color:color-mix(in oklab, var(--trainer-accent) 34%, var(--border)); background:color-mix(in oklab, var(--trainer-accent) 10%, var(--panel)); }
.trainer-l-client-list strong,.trainer-l-client-list em{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trainer-l-client-list em{ color:var(--muted); font-size:12px; font-style:normal; }
.trainer-l-client-card{ padding:14px; border-radius:20px; background:radial-gradient(260px 160px at 100% 0%, color-mix(in oklab, var(--trainer-accent) 12%, transparent), transparent 70%), var(--panel); border:1px solid var(--border); }
.trainer-l-client-head,.trainer-l-show-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.trainer-l-client-head b,.trainer-l-show-top span{ flex:0 0 auto; padding:6px 9px; border-radius:999px; background:color-mix(in oklab, var(--trainer-accent) 14%, transparent); color:var(--trainer-accent-2); font-size:11px; font-weight:800; text-transform:uppercase; }
.trainer-l-metrics,.trainer-l-show-card{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.trainer-l-metrics i,.trainer-l-show-card div{ display:grid; gap:4px; padding:10px; border-radius:14px; background:var(--card); border:1px solid var(--border); font-style:normal; }
.trainer-l-metrics span,.trainer-l-show-card span{ color:var(--muted); font-size:11px; }
.trainer-l-metrics strong,.trainer-l-show-card strong{ font-size:14px; line-height:1.1; }
.trainer-l-chart{ min-height:120px; display:flex; align-items:end; gap:8px; padding:12px; border-radius:18px; background:var(--card); border:1px solid var(--border); }
.trainer-l-chart i{ flex:1; min-height:22px; height:var(--h); border-radius:999px 999px 8px 8px; background:linear-gradient(180deg, var(--trainer-accent), color-mix(in oklab, var(--trainer-accent-2) 70%, #0f172a)); }
.trainer-l-timeline{ display:grid; gap:7px; }
.trainer-l-timeline span,.trainer-l-signal{ display:flex; gap:9px; align-items:center; padding:9px 10px; border-radius:14px; background:color-mix(in oklab, var(--chip) 60%, transparent); color:var(--text); font-size:12px; }
.trainer-l-timeline span::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--trainer-accent); flex:0 0 auto; }
.trainer-l-section{ padding-top:clamp(46px, 7vw, 82px); padding-bottom:clamp(46px, 7vw, 82px); }
.trainer-l-section::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--trainer-accent) 18%, var(--border)), transparent); opacity:.58; }
.trainer-l-section-head{ display:grid; gap:12px; max-width:820px; }
.trainer-l-section h2,.trainer-l-mid-cta h2,.trainer-l-final h2{ margin:0; max-width:880px; font-size:clamp(30px, 6.5vw, 56px); }
.trainer-l-problem-grid,.trainer-l-feature-grid,.trainer-l-trust-grid,.trainer-l-seo-grid,.trainer-l-audience-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:24px; }
.trainer-l-problem-grid article,.trainer-l-feature-card,.trainer-l-trust-grid article,.trainer-l-seo-grid article,.trainer-l-audience-grid article{ display:grid; gap:9px; padding:18px; border-radius:22px; background:color-mix(in oklab, var(--card) 94%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 15%, var(--border)); box-shadow:0 12px 32px rgba(0,0,0,.045); transition:transform .18s ease, border-color .18s ease, background-color .18s ease; }
.trainer-l-problem-grid article:hover,.trainer-l-feature-card:hover,.trainer-l-trust-grid article:hover,.trainer-l-seo-grid article:hover,.trainer-l-audience-grid article:hover{ transform:translateY(-2px); border-color:color-mix(in oklab, var(--trainer-accent) 34%, var(--border)); }
.trainer-l-problem-grid strong,.trainer-l-trust-grid strong,.trainer-l-feature-card h3,.trainer-l-seo-grid strong,.trainer-l-audience-grid strong{ margin:0; font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; font-size:20px; line-height:1.12; }
.trainer-l-problem-grid p,.trainer-l-feature-card p,.trainer-l-trust-grid p,.trainer-l-seo-grid p,.trainer-l-audience-grid p{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.trainer-l-intro .trainer-l-section-head,.trainer-l-crm .trainer-l-section-head,.trainer-l-audience .trainer-l-section-head{ max-width:900px; }
.trainer-l-crm{ border-radius:30px; padding-left:clamp(16px, 3vw, 28px); padding-right:clamp(16px, 3vw, 28px); background:radial-gradient(620px 260px at 100% 0%, color-mix(in oklab, var(--trainer-accent) 10%, transparent), transparent 70%); }
.trainer-l-compare{ display:grid; gap:12px; margin-top:24px; }
.trainer-l-compare article{ display:grid; gap:10px; padding:12px; border-radius:24px; background:color-mix(in oklab, var(--card) 94%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 18%, var(--border)); box-shadow:0 14px 36px rgba(21,128,61,.07); }
.trainer-l-compare article > div{ display:grid; gap:7px; padding:14px; border-radius:18px; background:var(--panel); border:1px solid var(--border); }
.trainer-l-compare article > div:last-child{ border-color:color-mix(in oklab, var(--trainer-accent) 28%, var(--border)); background:color-mix(in oklab, var(--trainer-accent) 8%, var(--panel)); }
.trainer-l-compare span{ width:fit-content; padding:5px 8px; border-radius:999px; background:color-mix(in oklab, var(--text) 8%, transparent); color:var(--muted); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.trainer-l-compare article > div:last-child span{ background:color-mix(in oklab, var(--trainer-accent) 14%, transparent); color:var(--trainer-accent-2); }
.trainer-l-compare p{ margin:0; color:var(--text); font-size:14px; line-height:1.48; }
.trainer-l-feature-card div{ width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:var(--trainer-accent-2); background:color-mix(in oklab, var(--trainer-accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 22%, var(--border)); }
.trainer-l-demo-panel{ display:grid; gap:14px; margin-top:24px; padding:16px; border-radius:30px; border:1px solid color-mix(in oklab, var(--trainer-accent) 24%, var(--border)); background:radial-gradient(560px 260px at 100% 0%, color-mix(in oklab, var(--trainer-accent) 13%, transparent), transparent 68%), color-mix(in oklab, var(--card) 94%, transparent); box-shadow:0 20px 52px rgba(21,128,61,.10); }
.trainer-l-demo-login{ display:grid; gap:10px; align-content:start; padding:16px; border-radius:22px; background:var(--panel); border:1px solid color-mix(in oklab, var(--trainer-accent) 18%, var(--border)); }
.trainer-l-demo-login span{ color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.trainer-l-demo-login strong{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; font-size:clamp(18px, 3vw, 24px); line-height:1.1; overflow-wrap:anywhere; }
.trainer-l-demo-login .btn{ width:100%; min-height:46px; margin-top:4px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; }
.trainer-l-demo-clients{ display:grid; gap:10px; }
.trainer-l-demo-client{ display:grid; gap:10px; padding:14px; border-radius:20px; background:color-mix(in oklab, var(--surface) 92%, transparent); border:1px solid var(--border); }
.trainer-l-demo-client > div:first-child{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.trainer-l-demo-client strong{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; font-size:18px; line-height:1.1; }
.trainer-l-demo-client span{ color:var(--muted); font-size:12px; overflow-wrap:anywhere; text-align:right; }
.trainer-l-demo-client p{ margin:0; color:var(--muted); font-size:14px; line-height:1.48; }
.trainer-l-demo-client > div:last-child{ display:flex; flex-wrap:wrap; gap:7px; }
.trainer-l-demo-client b{ padding:6px 9px; border-radius:999px; background:var(--chip); color:var(--text); font-size:11px; line-height:1; }
.trainer-l-demo-client.is-good{ border-color:color-mix(in oklab, var(--trainer-accent) 34%, var(--border)); background:color-mix(in oklab, var(--trainer-accent) 8%, var(--surface)); }
.trainer-l-demo-client.is-mid{ border-color:color-mix(in oklab, var(--warn) 30%, var(--border)); }
.trainer-l-demo-client.is-risk{ border-color:color-mix(in oklab, var(--danger) 32%, var(--border)); background:color-mix(in oklab, var(--danger) 5%, var(--surface)); }
.trainer-l-demo-details{ border-radius:18px; background:color-mix(in oklab, var(--chip) 58%, transparent); border:1px solid color-mix(in oklab, var(--trainer-accent) 14%, var(--border)); overflow:hidden; }
.trainer-l-demo-details summary{ cursor:pointer; padding:13px 14px; color:var(--text); font-weight:800; list-style:none; }
.trainer-l-demo-details summary::-webkit-details-marker{ display:none; }
.trainer-l-demo-details summary::after{ content:"+"; float:right; color:var(--trainer-accent-2); }
.trainer-l-demo-details[open] summary::after{ content:"-"; }
.trainer-l-demo-details div{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 14px; color:var(--muted); font-size:13px; }
.trainer-l-demo-details p{ flex:1 1 100%; margin:0; }
.trainer-l-demo-details span{ padding:7px 9px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:var(--text); overflow-wrap:anywhere; }
.trainer-l-mid-cta,.trainer-l-final{ display:grid; gap:20px; align-items:center; padding:clamp(22px, 4vw, 34px); border-radius:30px; border:1px solid color-mix(in oklab, var(--trainer-accent) 26%, var(--border)); background:radial-gradient(520px 240px at 100% 0%, color-mix(in oklab, var(--trainer-accent) 16%, transparent), transparent 68%), color-mix(in oklab, var(--card) 96%, transparent); box-shadow:0 20px 52px rgba(21,128,61,.10); }
.trainer-l-mid-cta .btn{ width:100%; min-height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; }
.trainer-l-showcase-grid,.trainer-l-mobile{ display:grid; gap:18px; align-items:center; margin-top:24px; }
.trainer-l-photo--dashboard{ min-height:360px; }
.trainer-l-show-panel{ display:grid; gap:12px; padding:16px; border-radius:28px; }
.trainer-l-signal b{ flex:0 0 auto; width:74px; color:var(--trainer-accent-2); font-size:12px; }
.trainer-l-signal span{ min-width:0; color:var(--text); font-size:14px; }
.trainer-l-signal.is-hot{ background:color-mix(in oklab, var(--trainer-accent) 12%, var(--chip)); border:1px solid color-mix(in oklab, var(--trainer-accent) 28%, var(--border)); }
.trainer-l-signal.is-warn b{ color:var(--warn); }
.trainer-l-show-card{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.trainer-l-mobile{ margin-top:0; }
.trainer-l-phone-wrap{ position:relative; min-height:540px; display:grid; align-items:center; }
.trainer-l-photo--mobile{ min-height:430px; }
.trainer-l-phone{ position:absolute; right:8px; bottom:18px; width:min(78vw, 292px); display:grid; gap:10px; padding:18px; border-radius:34px; }
.trainer-l-phone > i{ width:58px; height:5px; justify-self:center; border-radius:999px; background:color-mix(in oklab, var(--text) 16%, transparent); }
.trainer-l-phone strong{ font-family:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, Inter; font-size:22px; }
.trainer-l-phone-status{ width:fit-content; padding:6px 9px; border-radius:999px; color:var(--trainer-accent-2); background:color-mix(in oklab, var(--trainer-accent) 13%, transparent); font-size:12px; font-weight:800; }
.trainer-l-phone div{ display:grid; gap:2px; padding:11px; border-radius:16px; background:var(--panel); border:1px solid var(--border); }
.trainer-l-phone b{ font-size:12px; color:var(--muted); }
.trainer-l-phone em{ color:var(--text); font-style:normal; font-weight:800; }
.trainer-l-phone a{ display:grid; place-items:center; min-height:42px; border-radius:14px; background:linear-gradient(135deg, var(--trainer-accent), var(--trainer-accent-2)); color:#fff; font-weight:800; }
.trainer-l-faq{ display:grid; gap:10px; margin-top:24px; }
.trainer-l-faq details{ border:1px solid color-mix(in oklab, var(--trainer-accent) 16%, var(--border)); border-radius:18px; background:color-mix(in oklab, var(--card) 94%, transparent); overflow:hidden; }
.trainer-l-faq summary{ cursor:pointer; padding:16px 18px; color:var(--text); font-weight:800; list-style:none; }
.trainer-l-faq summary::-webkit-details-marker{ display:none; }
.trainer-l-faq summary::after{ content:"+"; float:right; color:var(--trainer-accent-2); }
.trainer-l-faq details[open] summary::after{ content:"-"; }
.trainer-l-faq details > div{ padding:0 18px 17px; color:var(--muted); font-size:14px; line-height:1.58; }
.trainer-l-final{ margin-top:clamp(24px, 4vw, 40px); margin-bottom:20px; }
.trainer-l-photo--cta{ min-height:260px; }
.trainer-l-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:20px 0 24px; color:var(--muted); font-size:13px; }
.trainer-l-footer nav{ display:flex; gap:14px; flex-wrap:wrap; }
.trainer-l-footer a{ color:var(--muted); }
.trainer-l-footer a:hover{ color:var(--text); }
@media (min-width: 760px){
  .trainer-l-problem-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trainer-l-feature-grid,.trainer-l-trust-grid,.trainer-l-seo-grid,.trainer-l-audience-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trainer-l-seo-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .trainer-l-compare article{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trainer-l-demo-panel{ grid-template-columns:minmax(220px, .48fr) minmax(0, 1fr); align-items:start; }
  .trainer-l-demo-details{ grid-column:1 / -1; }
  .trainer-l-dashboard{ grid-template-columns:minmax(150px, .45fr) minmax(0, 1fr); }
  .trainer-l-mid-cta{ grid-template-columns:minmax(0, 1fr) auto; }
  .trainer-l-mid-cta .btn{ width:auto; min-width:210px; }
}
@media (min-width: 980px){
  .trainer-l-hero{ grid-template-columns:minmax(0, .92fr) minmax(460px, 1.08fr); gap:clamp(32px, 5vw, 58px); }
  .trainer-l-hero h1{ font-size:clamp(48px, 5.2vw, 68px); }
  .trainer-l-hero__visual{ align-self:center; }
  .trainer-l-photo--hero{ min-height:280px; }
  .trainer-l-feature-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .trainer-l-problem-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .trainer-l-trust-grid,.trainer-l-audience-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .trainer-l-demo-clients{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .trainer-l-showcase-grid,.trainer-l-mobile,.trainer-l-final{ grid-template-columns:minmax(0, .95fr) minmax(380px, 1.05fr); gap:clamp(24px, 4vw, 46px); }
  .trainer-l-final{ grid-template-columns:minmax(260px, .42fr) minmax(0, 1fr); }
}
@media (max-width: 720px){
  .trainer-landing-shell{ padding-left:14px; padding-right:14px; }
  .trainer-l-section{ padding-top:40px; padding-bottom:40px; }
  .trainer-l-hero h1{ letter-spacing:-.035em; }
  .trainer-l-actions .btn,.trainer-l-mid-cta .btn{ width:100%; }
  .trainer-l-demo-strip{ width:100%; }
  .trainer-l-product,.trainer-l-show-panel,.trainer-l-photo,.trainer-l-mid-cta,.trainer-l-final{ border-radius:22px; }
  .trainer-l-metrics{ grid-template-columns:1fr; }
  .trainer-l-demo-client > div:first-child{ display:grid; gap:4px; }
  .trainer-l-demo-client span{ text-align:left; }
  .trainer-l-chart{ min-height:96px; }
  .trainer-l-phone-wrap{ min-height:500px; }
  .trainer-l-phone{ right:0; width:min(84vw, 286px); }
}
@media (max-width: 420px){
  .page-trainer-landing .top-actions{ gap:8px; }
  .page-trainer-landing .top-actions .theme-btn,.page-trainer-landing .top-actions .btn.small.subtle{ display:none; }
  .page-trainer-landing .top-actions .btn.small{ padding:9px 11px; border-radius:12px; }
  .trainer-l-demo-strip strong,.trainer-l-demo-strip code{ flex:1 1 100%; }
  .trainer-l-chips span,.trainer-l-mobile-list span{ width:100%; justify-content:center; }
  .trainer-l-show-card{ grid-template-columns:1fr; }
  .trainer-l-signal{ align-items:flex-start; flex-direction:column; gap:3px; }
}
@media (prefers-reduced-motion: reduce){
  .page-trainer-landing *,.page-trainer-landing *::before,.page-trainer-landing *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}