/* Sporvasyon Landing v3 — premium, Apple-clean, original-site depth */
:root{
  --canvas:#F2F2F5; --surface:#FFFFFF; --surface-2:#EBEBF0;
  --ink:#0B0B0C; --ink-contrast:#FFFFFF; --muted:#55555B;
  --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.16);
  --brand:#00A884; --brand-strong:#007A60; --brand-soft:#E6F7F2;
  --success:#00876c; --danger:#D92D20; --warning:#B54708; --info:#3B5BDB;
  --radius-control:12px; --radius-card:20px; --radius-sheet:28px; --radius-hero:32px;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.10);
  --shadow-float:0 1px 2px rgba(0,0,0,.05), 0 24px 60px -24px rgba(0,0,0,.25);
  --shadow-deep:0 40px 100px -30px rgba(0,0,0,.45), 0 12px 30px -16px rgba(0,0,0,.18);
  --topbar-h:64px; --shell:1180px; --section-y:96px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --app-teal:#00A884; --app-bg:#F2F2F5; --app-card:#FFFFFF;
}
html.dark{
  --canvas:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E;
  --ink:#F5F5F7; --ink-contrast:#0B0B0C; --muted:#A1A1A6;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --brand:#2FD3A8; --brand-strong:#2FD3A8; --brand-soft:rgba(47,211,168,.14);
  --success:#2FD3A8; --danger:#FF6B60; --warning:#F5A524; --info:#8DA2FB;
  --shadow-soft:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.55);
  --shadow-float:0 1px 2px rgba(0,0,0,.5), 0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-deep:0 40px 100px -20px rgba(0,0,0,.85);
  --app-bg:#1C1C1E; --app-card:#2C2C2E;
}
*,*::before,*::after{box-sizing:border-box;}
html{height:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; min-height:100%; font-family:var(--font); color:var(--ink);
  background:var(--canvas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; font-synthesis:none;
}
img{max-width:100%; display:block;}
button,input,select,textarea{font:inherit; color:inherit;}
a{color:var(--brand-strong);} html.dark a{color:var(--brand);}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
[hidden]{display:none !important;}

/* type */
.t-display{font-size:clamp(40px,7vw,72px); font-weight:700; letter-spacing:-.045em; line-height:1.02; font-synthesis:none; margin:0;}
.t-large{font-size:clamp(32px,4.5vw,48px); font-weight:700; letter-spacing:-.035em; line-height:1.08; font-synthesis:none; margin:0;}
.t-title{font-size:clamp(26px,3vw,36px); font-weight:700; letter-spacing:-.03em; line-height:1.15; font-synthesis:none; margin:0;}
.t-headline{font-size:17px; font-weight:600; letter-spacing:-.015em; line-height:1.35; font-synthesis:none; margin:0;}
.t-body{font-size:17px; line-height:1.55; letter-spacing:-.01em; color:var(--muted); margin:0;}
.t-sub{font-size:13px; line-height:1.45; color:var(--muted); margin:0;}
.t-foot{font-size:12px; line-height:1.4; color:var(--muted); margin:0;}
.t-caps{font-size:12px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-strong); margin:0 0 12px;}
html.dark .t-caps{color:var(--brand);}
.grad-text{
  background:linear-gradient(120deg, var(--brand-strong), #0B0B0C 55%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html.dark .grad-text{background:linear-gradient(120deg, var(--brand), #F5F5F7 60%); -webkit-background-clip:text; background-clip:text; color:transparent;}

.shell{width:min(var(--shell),100%); margin-inline:auto; padding-left:20px; padding-right:20px; min-width:0;}
@media(min-width:600px){ .shell{padding-left:28px; padding-right:28px;} }
@media(min-width:768px){ .shell{padding-left:40px; padding-right:40px;} }

/* ===== topbar — identical to help v5 / landing v2.2 ===== */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  background:color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{height:100%; display:flex; align-items:center; gap:12px; min-width:0;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink) !important; min-width:0; flex-shrink:0;}
.brand-mark{
  width:40px; height:40px; border-radius:30%; background:#0B0B0C; display:grid; place-items:center; flex-shrink:0;
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.25);
}
html.dark .brand-mark{background:#fff;}
.brand-mark img{width:22px; height:22px; object-fit:contain;}
html.dark .brand-mark img{filter:invert(1);}
.brand-text{display:none; min-width:0;}
@media(min-width:480px){ .brand-text{display:block;} }
.brand-text strong{display:block; font-size:15px; font-weight:600; letter-spacing:-.02em;}
.brand-text span{display:block; font-size:11px; color:var(--muted);}
.top-spacer{flex:1; min-width:0;}
.top-nav{display:flex; align-items:center; gap:2px; flex-shrink:0;}
.top-link{
  display:inline-flex; align-items:center; text-decoration:none; color:var(--muted) !important;
  font-size:12px; font-weight:600; padding:6px 8px; border-radius:999px; white-space:nowrap;
}
@media(min-width:768px){ .top-link{font-size:13px; padding:8px 10px;} }
.top-link:hover{color:var(--ink) !important; background:color-mix(in srgb, var(--ink) 5%, transparent);}
.nav-more{display:none; position:relative;}
.nav-more > button.icon-btn{width:40px;height:40px;}
.nav-dropdown{
  display:none; position:absolute; right:0; top:calc(100% + 6px); min-width:180px; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-float);
  padding:6px; flex-direction:column; gap:2px;
}
.nav-more.open .nav-dropdown{display:flex;}
.nav-dropdown a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--ink) !important; font-size:13px; font-weight:600;
}
.nav-dropdown a:hover{background:color-mix(in srgb, var(--ink) 5%, transparent);}
.icon-btn{
  width:40px; height:40px; border-radius:999px; border:0; background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer; flex-shrink:0;
}
.icon-btn:hover{background:color-mix(in srgb, var(--ink) 6%, transparent);}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; border-radius:999px; border:0; cursor:pointer; text-decoration:none !important;
  background:var(--ink); color:var(--ink-contrast) !important; font-size:13px; font-weight:650; letter-spacing:-.01em;
  box-shadow:var(--shadow-soft); white-space:nowrap; flex-shrink:0;
}
.btn-primary:hover{filter:brightness(1.08);}
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--line-strong); cursor:pointer; text-decoration:none !important;
  background:transparent; color:var(--ink) !important; font-size:14px; font-weight:650;
}
.btn-secondary:hover{background:color-mix(in srgb, var(--ink) 4%, transparent);}
.btn-lg{height:52px; padding:0 26px; font-size:15px; border-radius:16px;}
.btn-xl{height:56px; padding:0 28px; font-size:16px; border-radius:18px;}
.btn-block{width:100%;}
.top-cta .cta-short{display:none;}
.top-nav .top-link.top-compact{display:none;}
@media(max-width:899px){
  .top-nav .top-link.hide-narrow{display:none;}
  .top-nav .top-link.top-compact{display:inline-flex;}
  .top-cta{display:none;}
  .nav-more{display:block;}
}
@media(max-width:379px){
  .top-nav .top-link{display:none !important;}
}

/* sections */
.section{padding:var(--section-y) 0; position:relative;}
@media(max-width:767px){ :root{--section-y:72px;} }
.section-head{max-width:720px; margin-bottom:48px;}
@media(min-width:768px){ .section-head{margin-bottom:64px;} }
.section-head .t-title,.section-head .t-large{margin:0 0 16px; color:var(--ink);}
.section-head .t-body{max-width:560px;}
.section-head.center{text-align:center; margin-inline:auto;}
.section-head.center .t-body{margin-inline:auto;}

/* reveal */
html.js-anim .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
html.js-anim .reveal.in{opacity:1; transform:none;}
.reveal-d1{transition-delay:.08s;} .reveal-d2{transition-delay:.16s;} .reveal-d3{transition-delay:.24s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ===== HERO ===== */
.hero{padding:48px 0 24px; position:relative; overflow:hidden;}
@media(min-width:960px){ .hero{padding:72px 0 40px;} }
.hero-glow{
  position:absolute; inset:auto; left:50%; top:-12%; width:900px; height:900px;
  transform:translateX(-50%); border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, color-mix(in srgb, var(--brand) 22%, transparent), transparent 68%);
  filter:blur(40px);
}
.hero-inner{position:relative; z-index:1; text-align:center; max-width:920px; margin:0 auto 48px;}
.hero-pill{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid var(--line);
  backdrop-filter:blur(12px); font-size:13px; font-weight:600; color:var(--muted); margin-bottom:28px;
  box-shadow:var(--shadow-soft);
}
.hero-pill i{color:var(--brand-strong); font-size:16px;}
.hero-inner .t-display{margin-bottom:20px;}
.hero-inner .t-body{font-size:clamp(16px,2vw,20px); max-width:640px; margin:0 auto 32px;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:28px;}
.trust-row{
  display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; align-items:center;
}
.trust-item{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted);
}
.trust-item i{color:var(--brand-strong); font-size:16px;}
html.dark .trust-item i{color:var(--brand);}

/* hero product stage */
.hero-stage{position:relative; z-index:1; max-width:1320px; margin:0 auto; padding:8px 0 40px; overflow:visible;}
.stage-scene{isolation:isolate;}
.stage-scene{
  position:relative; display:grid; place-items:center; min-height:480px; background:transparent;
}
@media(min-width:900px){ .stage-scene{min-height:720px;} }
.stage-browser{
  width:min(1180px,96%); border-radius:18px; overflow:hidden; background:var(--surface);
  border:1px solid var(--line);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.28), 0 6px 16px -10px rgba(0,0,0,.12);
  transform:perspective(1600px) rotateY(-6deg) rotateX(3deg) translateX(-3%);
  transition:transform .8s var(--ease);
}
html.dark .stage-browser{
  box-shadow:0 22px 48px -24px rgba(0,0,0,.65), 0 8px 20px -12px rgba(0,0,0,.4);
}
@media(max-width:899px){
  .stage-browser{transform:none; width:100%;}
}
.stage-phone{
  position:absolute; right:1%; bottom:-4%; width:min(300px,28vw); z-index:3;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.22));
  transform:translateY(0); animation:none; opacity:1 !important;
}
html.dark .stage-phone{
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.55));
}
.stage-phone .phone{
  box-shadow:0 10px 28px -12px rgba(0,0,0,.28), 0 2px 8px -4px rgba(0,0,0,.12);
}
html.dark .stage-phone .phone{
  box-shadow:0 12px 32px -12px rgba(0,0,0,.55), 0 2px 8px -4px rgba(0,0,0,.3);
}
@media(max-width:899px){
  .stage-phone{position:relative; right:auto; bottom:auto; width:min(260px,78%); margin:28px auto 0; animation:none;}
  .stage-scene{display:flex; flex-direction:column; align-items:center;}
}
@media(min-width:1400px){
  .stage-phone{width:320px; right:0; bottom:-4%;}
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.stage-phone{animation:none;}}

/* browser chrome */
.browser{
  background:var(--surface); border-radius:16px; overflow:hidden; border:1px solid var(--line);
}
.browser-bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--surface-2); border-bottom:1px solid var(--line);
}
.browser-dots{display:flex; gap:6px;}
.browser-dots span{width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--ink) 18%, transparent);}
.browser-url{
  flex:1; height:28px; border-radius:8px; background:var(--surface); border:1px solid var(--line);
  display:flex; align-items:center; padding:0 12px; font-size:11px; color:var(--muted); font-weight:600;
}
.browser-body{background:var(--app-bg); min-height:560px;}

/* ===== PANEL MOCK (faithful to panel v3) ===== */
.panel-shell{display:grid; grid-template-columns:220px 1fr; min-height:560px; font-size:12.5px;}
@media(max-width:700px){ .panel-shell{grid-template-columns:1fr;} .panel-side{display:none;} }
.panel-side{
  background:color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  border-right:1px solid var(--line); padding:14px 10px; display:flex; flex-direction:column; gap:4px;
}
.ps-brand{display:flex; align-items:center; gap:8px; padding:4px 8px 14px; font-weight:700; font-size:12px;}
.ps-brand .sv{
  width:26px; height:26px; border-radius:8px; background:#0B0B0C; color:#fff;
  display:grid; place-items:center; font-size:10px; font-weight:800;
}
html.dark .ps-brand .sv{background:#fff; color:#0B0B0C;}
.ps-brand small{display:block; font-weight:500; color:var(--muted); font-size:10px;}
.ps-search{
  margin:0 4px 10px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; padding:0 10px; color:var(--muted); gap:6px; font-size:11px;
}
.ps-group{font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 10px 4px;}
.ps-item{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color:var(--muted);
  font-weight:600; cursor:pointer; border:0; background:transparent; width:100%; text-align:left; font-size:12px;
}
.ps-item i{font-size:15px;}
.ps-item[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-soft);}
.ps-item[aria-selected="true"] i{color:var(--app-teal);}
.panel-main{padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0;}
.pm-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.pm-head h3{margin:0; font-size:20px; font-weight:700; letter-spacing:-.03em;}
.pm-head p{margin:4px 0 0; font-size:11px; color:var(--muted);}
.pm-actions{display:flex; gap:8px; align-items:center;}
.pm-btn{
  height:32px; padding:0 12px; border-radius:999px; border:0; background:var(--app-teal); color:#fff;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; gap:4px; cursor:pointer;
}
.pm-more{width:32px; height:32px; border-radius:999px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer;}
.pm-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:12px; min-width:0;}
@media(max-width:900px){ .pm-grid{grid-template-columns:1fr;} }
.pm-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 14px;
  box-shadow:var(--shadow-soft); min-width:0;
}
.pm-card h4{margin:0 0 10px; font-size:12px; font-weight:700;}
.pm-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line);}
.pm-row:first-of-type{border-top:0;}
.av{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; flex-shrink:0; background:var(--brand-soft); color:var(--brand-strong);
}
.pm-row .nm{font-size:12px; font-weight:650; flex:1; min-width:0;}
.pm-row .mt{font-size:10px; color:var(--muted);}
.chip-sm{
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.chip-ok{background:#E6F7F2; color:#007A60;} .chip-warn{background:#FFF4E5; color:#B54708;}
.chip-bad{background:#FEE4E2; color:#D92D20;} .chip-info{background:#EEF2FF; color:#3B5BDB;}
html.dark .chip-ok{background:rgba(47,211,168,.15); color:#2FD3A8;}
html.dark .chip-warn{background:rgba(245,165,36,.15); color:#F5A524;}
html.dark .chip-bad{background:rgba(255,107,96,.15); color:#FF6B60;}
html.dark .chip-info{background:rgba(141,162,251,.15); color:#8DA2FB;}
.kpi-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px 12px;}
.kpi b{display:block; font-size:18px; font-weight:750; letter-spacing:-.03em;}
.kpi span{font-size:10px; color:var(--muted); font-weight:600;}
.week-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;}
.day-col{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px; min-width:0;}
.day-col .d{font-size:10px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.cls{font-size:9px; font-weight:650; padding:4px 5px; border-radius:6px; background:var(--brand-soft); color:var(--brand-strong); margin-bottom:4px; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.2; word-break:break-word;}
.tbl{width:100%; border-collapse:collapse;}
.tbl th{font-size:10px; text-align:left; color:var(--muted); font-weight:650; padding:6px 8px; border-bottom:1px solid var(--line);}
.tbl td{padding:8px; border-bottom:1px solid var(--line); font-size:11px; vertical-align:middle;}
.tbl tr:last-child td{border-bottom:0;}
.pay-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px;}
@media(max-width:700px){ .pay-kpis{grid-template-columns:repeat(2,1fr);} .week-grid{grid-template-columns:repeat(4,1fr);} }

/* ===== PHONE MOCK (always real-app LIGHT theme; site .dark must not leak) ===== */
.phone{
  /* Device chrome */
  background:#0B0B0C; border-radius:36px; padding:10px; position:relative;
  box-shadow:var(--shadow-deep); aspect-ratio:9/19.2; width:100%;
  /* App token set — fixed light, matches store screenshots */
  --ink:#0B0B0C;
  --ink-contrast:#FFFFFF;
  --muted:#55555B;
  --line:rgba(0,0,0,.08);
  --surface:#FFFFFF;
  --surface-2:#EBEBF0;
  --canvas:#F2F2F5;
  --app-bg:#F2F2F5;
  --app-card:#FFFFFF;
  --app-teal:#00A884;
  --shadow-soft:0 1px 2px rgba(0,0,0,.04);
  color:#0B0B0C;
  color-scheme:light;
}
html.dark .phone{background:#0B0B0C;} /* frame stays black; screen stays light via tokens above */
.phone-screen{
  background:var(--app-bg); border-radius:28px; overflow:hidden; height:100%;
  display:flex; flex-direction:column; position:relative;
  color:var(--ink);
}
.phone-notch{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); width:90px; height:24px;
  background:#0B0B0C; border-radius:20px; z-index:5;
}
.phone-status{
  display:flex; justify-content:space-between; align-items:center; padding:12px 16px 2px; font-size:12px; font-weight:700;
  position:relative; z-index:2; color:var(--ink); letter-spacing:-.01em;
}
.phone-status .st-right{display:flex; align-items:center; gap:4px; font-size:11px;}
.phone-status .st-right i{font-size:13px; line-height:1;}
.phone-body{flex:1; overflow:hidden; padding:4px 12px 0; position:relative; z-index:1; color:var(--ink);}
.phone-dock{
  margin:8px 10px 12px; padding:8px 6px; border-radius:22px; background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06); display:flex; justify-content:space-around; align-items:center;
  backdrop-filter:blur(16px); box-shadow:0 8px 24px -12px rgba(0,0,0,.2);
}
.dock-btn{
  display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:transparent;
  color:var(--muted); font-size:9px; font-weight:650; cursor:pointer; padding:4px 8px; border-radius:14px;
}
.dock-btn i{font-size:18px;}
.dock-btn[aria-selected="true"]{color:var(--app-teal); background:color-mix(in srgb, var(--app-teal) 12%, transparent);}
.ph-title{font-size:22px; font-weight:800; letter-spacing:-.03em; margin:4px 0 2px; color:var(--ink);}
.ph-sub{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0;}
.ph-greet{font-size:18px; font-weight:750; margin:6px 0 12px; color:var(--ink);}
.ph-greet em{font-style:normal; color:var(--app-teal);}
.ph-stats{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px;}
.ph-stat{
  background:var(--app-card); border-radius:16px; padding:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.04);
}
.ph-stat .ic{width:28px; height:28px; border-radius:10px; display:grid; place-items:center; margin-bottom:8px; font-size:14px;}
.ph-stat b{display:block; font-size:26px; font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--ink);}
.ph-stat span{font-size:10px; color:var(--muted); font-weight:600;}
.ph-sec{font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:4px 0 8px;}
.ph-perf{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px;}
.ph-perf > div{
  background:var(--app-card); border-radius:12px; padding:8px 4px; text-align:center;
  border:1px solid rgba(0,0,0,.04); font-size:9px; color:var(--muted); font-weight:650;
}
.ph-perf i{display:block; font-size:16px; margin-bottom:4px;}
.ph-card{
  background:var(--app-card); border-radius:16px; padding:12px; margin-bottom:8px;
  border:1px solid rgba(0,0,0,.04); box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.ph-seg{display:flex; background:rgba(0,0,0,.05); border-radius:12px; padding:3px; margin-bottom:10px;}
.ph-seg button{
  flex:1; border:0; background:transparent; padding:8px; border-radius:10px; font-size:11px; font-weight:700;
  color:var(--muted); cursor:pointer;
}
.ph-seg button.active{background:var(--app-card); color:var(--app-teal); box-shadow:var(--shadow-soft);}
.ph-days{display:flex; gap:6px; overflow:hidden; margin-bottom:12px;}
.ph-day{
  flex:0 0 44px; height:54px; border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background:var(--app-card); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--muted);
}
.ph-day.on{background:var(--app-teal); color:#fff; border-color:var(--app-teal);}
.ph-day b{font-size:15px; line-height:1.1;}
.ph-empty{text-align:center; padding:28px 10px; color:var(--muted); font-size:12px; font-weight:600;}
.ph-empty i{font-size:36px; display:block; margin-bottom:8px; opacity:.4;}
.ph-pay-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;}
.ph-pay-head b{font-size:13px;}
.ph-bar{height:6px; border-radius:99px; background:rgba(0,0,0,.08); overflow:hidden; margin:8px 0;}
.ph-bar > i{display:block; height:100%; background:var(--app-teal); border-radius:99px;}
.ph-inst{display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid rgba(0,0,0,.05); font-size:11px;}
.ph-inst .n{
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; flex-shrink:0;
}
.ph-inst .n.ok{background:#E6F7F2; color:#007A60;}
.ph-inst .n.bad{background:#FEE4E2; color:#D92D20;}
.ph-inst .n.wait{background:#EEF2FF; color:#3B5BDB;}
.podium{display:flex; align-items:flex-end; justify-content:center; gap:8px; padding:16px 4px 8px; min-height:140px;}
.pod{
  flex:1; max-width:70px; background:var(--app-card); border-radius:14px 14px 8px 8px; text-align:center; padding:10px 4px;
  border:1px solid rgba(0,0,0,.06); position:relative;
}
.pod.p1{height:110px; border-color:#F5A524; order:2;}
.pod.p2{height:86px; order:1;} .pod.p3{height:72px; order:3;}
.pod .rk{width:24px; height:24px; border-radius:50%; margin:-20px auto 6px; display:grid; place-items:center; font-weight:800; font-size:11px; color:#fff;}
.pod.p1 .rk{background:#F5A524;} .pod.p2 .rk{background:#8E8E93;} .pod.p3 .rk{background:#CD7F32;}
.pod .nm{font-size:11px; font-weight:750;} .pod .mt{font-size:9px; color:var(--muted);}

/* ===== FEATURE STORY (sticky) ===== */
.story{display:grid; gap:80px;}
.story-row{
  display:grid; gap:40px; align-items:center;
}
@media(min-width:960px){
  .story-row{grid-template-columns:1fr 1fr; gap:64px;}
  .story-row.reverse .story-copy{order:2;}
  .story-row.reverse .story-visual{order:1;}
}
.story-copy .t-title{margin-bottom:14px;}
.story-copy .t-body{margin-bottom:20px;}
.story-list{list-style:none; padding:0; margin:0; display:grid; gap:12px;}
.story-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--muted); line-height:1.45;}
.story-list i{
  width:28px; height:28px; border-radius:10px; background:var(--brand-soft); color:var(--brand-strong);
  display:grid; place-items:center; flex-shrink:0; font-size:14px; margin-top:1px;
}
.story-visual{position:relative; min-height:420px;}
.visual-frame{
  border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-deep); padding:0; min-height:400px;
}
.visual-frame > .panel-shell, .visual-frame .pm-dense{min-height:400px;}
.story-visual .visual-frame{padding:0;}
.story-visual .visual-frame.pad{padding:22px;}
.visual-glow{
  position:absolute; inset:-20% -10%; background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%);
  pointer-events:none; z-index:0;
}
.story-visual > *{position:relative; z-index:1;}

/* ===== BENTO FEATURES ===== */
.bento{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media(min-width:700px){
  .bento{grid-template-columns:repeat(6,1fr);}
  .bento .b1{grid-column:span 3;} .bento .b2{grid-column:span 3;}
  .bento .b3{grid-column:span 2;} .bento .b4{grid-column:span 2;} .bento .b5{grid-column:span 2;}
  .bento .b6{grid-column:span 6;}
}
@media(min-width:1000px){
  .bento .b1{grid-column:span 3; grid-row:span 1;}
  .bento .b2{grid-column:span 3; grid-row:span 1;}
  .bento .b3{grid-column:span 2;}
  .bento .b4{grid-column:span 2;}
  .bento .b5{grid-column:span 2;}
  .bento .b6{grid-column:span 6;}
}
.bento-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sheet);
  padding:28px; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  min-width:0; display:flex; flex-direction:column; gap:12px;
}
.bento-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-float);}
@media(prefers-reduced-motion:reduce){.bento-card:hover{transform:none;}}
.bento-card .icon-tile{
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-size:22px; color:#fff; flex-shrink:0;
}
.bento-card h3{margin:0; font-size:20px; font-weight:750; letter-spacing:-.02em;}
.bento-card p{margin:0; font-size:14px; line-height:1.5; color:var(--muted);}
.bento-card.b1{display:flex; flex-direction:column; gap:12px;}
.bento-card.b1 .bento-copy{display:flex; flex-direction:column; gap:12px; height:100%;}
.bento-card.b1 .store-row{margin-top:auto; padding-top:8px;}
.bento-card.b2{display:flex; flex-direction:column; gap:12px;}

/* ===== DARK BAND (mobile showcase) ===== */
.band-dark{
  background:#0B0B0C; color:#F5F5F7; padding:calc(var(--section-y) + 12px) 0; position:relative; overflow:hidden;
}
html.dark .band-dark{background:#0A0A0B; border-block:1px solid var(--line);}
.band-dark .t-caps{color:var(--brand);}
.band-dark .t-large,.band-dark .t-title{color:#fff;}
.band-dark .t-body{color:rgba(255,255,255,.68);}
.band-dark .reveal, .band-dark .reveal.in, .band-dark .phone-stack{
  opacity:1 !important;
}
.band-dark .reveal, .band-dark .reveal.in{ transform:none !important; }
.band-dark .phone-stack .phone{ opacity:1 !important; background:#0B0B0C; }
.band-dark .phone-stack .phone-screen,
.band-dark .phone-stack .phone-body{ opacity:1 !important; }
.band-dark .phone-stack .ph-front{
  box-shadow:0 0 0 1px rgba(0,168,132,.25), 0 40px 80px rgba(0,0,0,.6), 0 0 60px rgba(0,168,132,.2);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
}
/* Back phones: slight dim only — keep content crisp/legible */
.band-dark .phone-stack .ph-back-left{
  filter:brightness(.94) drop-shadow(0 24px 48px rgba(0,0,0,.5));
}
.band-dark .phone-stack .ph-back-right{
  filter:brightness(.92) drop-shadow(0 24px 48px rgba(0,0,0,.5));
}
.band-glow{
  position:absolute; width:720px; height:720px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(0,168,132,.45), rgba(0,168,132,.08) 45%, transparent 70%);
  right:5%; top:50%; transform:translateY(-50%); filter:blur(8px); z-index:0;
}
.band-glow-2{
  position:absolute; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(47,211,168,.25), transparent 70%);
  left:10%; bottom:-10%; filter:blur(30px);
}
.mobile-showcase{display:grid; gap:48px; align-items:center; position:relative; z-index:1; min-width:0;}
.mobile-showcase > *{min-width:0; max-width:100%;}
@media(max-width:959px){ .mobile-showcase .store-row{width:100%;} .mobile-showcase .phone-tabs{max-width:100%;} }
@media(min-width:960px){ .mobile-showcase{grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr); gap:40px 48px;} }
.phone-stack{
  position:relative; height:640px; width:100%; max-width:760px; margin:0 auto;
  opacity:1 !important;
}
@media(max-width:959px){ .phone-stack{height:480px; max-width:360px;} }
.phone-stack .phone{
  position:absolute; opacity:1 !important; transition:transform .5s var(--ease), filter .5s var(--ease);
}
.phone-stack .ph-back-left{
  width:240px; left:0; top:72px; z-index:1;
  transform:rotate(-14deg) translateX(-18px);
  filter:brightness(.94) drop-shadow(0 24px 48px rgba(0,0,0,.5));
}
.phone-stack .ph-back-right{
  width:240px; right:0; top:88px; z-index:1;
  transform:rotate(14deg) translateX(18px);
  filter:brightness(.92) drop-shadow(0 24px 48px rgba(0,0,0,.5));
}
.phone-stack .ph-front{
  width:300px; left:50%; top:8px; z-index:3;
  transform:translateX(-50%);
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.55));
}
@media(max-width:959px){
  .phone-stack .ph-back-left, .phone-stack .ph-back-right{display:none;}
  .phone-stack .ph-front{
    width:min(280px,86%); left:50%; right:auto; top:0;
    transform:translateX(-50%);
  }
  .phone-stack{height:560px; max-width:min(320px,100%); overflow:hidden; margin:0 auto;}
}
.phone-tabs{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px;
  margin-top:20px; max-width:100%; width:100%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:6px; overflow:visible;
}
.phone-tabs button{
  border:1px solid transparent; background:transparent; color:rgba(255,255,255,.78);
  padding:9px 6px; border-radius:10px; font-size:12px; font-weight:650; cursor:pointer;
  min-width:0; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:clip;
}
.phone-tabs button[aria-selected="true"]{background:#fff; color:#0B0B0C; border-color:transparent;}
@media(min-width:960px){
  .phone-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
  .phone-tabs button{font-size:12.5px; padding:9px 8px;}
}
@media(min-width:1400px){
  /* Wide left column: 5-up single row pills */
  .phone-tabs{
    display:flex; flex-wrap:wrap; gap:8px;
    background:transparent; border:none; border-radius:0; padding:0;
  }
  .phone-tabs button{
    border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.75); border-radius:999px; padding:8px 16px; font-size:12.5px;
    flex:0 0 auto; overflow:visible;
  }
  .phone-tabs button[aria-selected="true"]{background:#fff; color:#0B0B0C; border-color:#fff;}
}
@media(max-width:420px){
  .phone-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .phone-tabs button{font-size:11px; padding:8px 4px;}
}
.store-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px;}
.store-row img{height:40px; width:auto;}

/* ===== ROLES ===== */
.roles{display:grid; gap:16px;}
@media(min-width:800px){ .roles{grid-template-columns:repeat(3,1fr);} }
.role-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sheet);
  padding:28px; box-shadow:var(--shadow-soft); min-width:0;
}
.role-card .icon-tile{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-size:22px; color:#fff; margin-bottom:16px;}
.role-card h3{margin:0 0 8px; font-size:20px; font-weight:750;}
.role-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}

/* ===== SOLUTIONS ===== */
.sol-layout{display:grid; gap:32px;}
@media(min-width:960px){ .sol-layout{grid-template-columns:320px 1fr; gap:48px; align-items:start;} }
.sol-tabs{display:flex; flex-direction:column; gap:8px;}
@media(max-width:959px){
  .sol-tabs{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    flex-direction:unset; overflow:visible; padding-bottom:0;
  }
  .sol-tab{min-width:0; width:100%;}
}
.sol-tab{
  text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:16px;
  padding:16px 18px; cursor:pointer; color:var(--ink); min-width:160px;
}
.sol-tab[aria-selected="true"]{border-color:var(--ink); box-shadow:var(--shadow-soft);}
.sol-tab strong{display:block; font-size:15px; font-weight:750; margin-bottom:4px;}
.sol-tab span{font-size:12px; color:var(--muted); line-height:1.4;}
.sol-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sheet);
  padding:32px; box-shadow:var(--shadow-soft); min-width:0;
}
.sol-panel h3{margin:0 0 12px; font-size:24px; font-weight:750; letter-spacing:-.02em;}
.sol-panel ul{margin:0; padding:0; list-style:none; display:grid; gap:12px;}
.sol-panel li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:15px; line-height:1.45;}
.sol-panel li i{color:var(--brand-strong); font-size:18px; flex-shrink:0; margin-top:2px;}

/* ===== STEPS ===== */
.steps{display:grid; gap:16px;}
@media(min-width:900px){ .steps{grid-template-columns:repeat(3,1fr);} }
.step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sheet);
  padding:28px; position:relative; min-width:0;
}
.step .num{
  width:40px; height:40px; border-radius:14px; background:var(--ink); color:var(--ink-contrast);
  display:grid; place-items:center; font-weight:800; font-size:16px; margin-bottom:18px;
}
.step h3{margin:0 0 8px; font-size:18px; font-weight:750;}
.step p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}

/* ===== PLAN ===== */
.plan-wrap{max-width:520px; margin:0 auto;}
.plan-box{
  background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:40px 36px;
  box-shadow:var(--shadow-float); text-align:center; position:relative; overflow:hidden;
}
.plan-box::before{
  content:""; position:absolute; inset:0 auto auto 0; width:100%; height:4px;
  background:linear-gradient(90deg, var(--brand), var(--ink));
}
.plan-box .price{font-size:clamp(22px,3vw,28px); font-weight:750; letter-spacing:-.03em; margin:8px 0 6px;}
.plan-box ul{list-style:none; padding:0; margin:24px 0; text-align:left; display:grid; gap:12px;}
.plan-box li{display:flex; gap:10px; align-items:flex-start; font-size:15px; font-weight:550;}
.plan-box li i{color:var(--brand-strong); font-size:18px; flex-shrink:0;}

/* ===== DOCS ===== */
.docs{display:grid; gap:16px;}
@media(min-width:800px){ .docs{grid-template-columns:repeat(3,1fr);} }
.doc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sheet);
  padding:28px; display:flex; flex-direction:column; gap:12px; min-width:0; box-shadow:var(--shadow-soft);
}
.doc-card .icon-tile{width:48px; height:48px; border-radius:16px; display:grid; place-items:center; font-size:22px; color:#fff;}
.doc-card h3{margin:0; font-size:18px; font-weight:750;}
.doc-card p{margin:0; color:var(--muted); font-size:14px; flex:1;}
.doc-card .meta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px;}
.doc-card .meta a{font-weight:650; text-decoration:none; color:var(--ink) !important;}
.doc-card .meta a:hover{color:var(--brand-strong) !important;}

/* ===== FAQ ===== */
.faq{max-width:760px;}
details.faq-item{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:0 20px; margin-bottom:10px;
}
details.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 0; font-weight:700; font-size:15px; letter-spacing:-.01em;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:"+"; font-size:20px; color:var(--muted); font-weight:500;}
details.faq-item[open] summary::after{content:"–";}
details.faq-item .ans{padding:0 0 18px; color:var(--muted); font-size:14px; line-height:1.55;}
.faq-more{margin-top:24px;}

/* ===== CONTACT ===== */
.contact-grid{display:grid; gap:40px;}
@media(min-width:900px){ .contact-grid{grid-template-columns:1fr 1fr; gap:64px; align-items:start;} }
.form{display:grid; gap:16px;}
.field label{display:block; font-size:13px; font-weight:650; margin-bottom:6px;}
.field input{
  width:100%; height:48px; border-radius:14px; border:1px solid var(--line); background:var(--surface);
  padding:0 14px; font-size:15px; min-width:0;
}
.field input:focus{outline:2px solid var(--brand); outline-offset:1px;}
.contact-meta{display:grid; gap:12px; margin-top:8px;}
.contact-meta div{font-size:14px; color:var(--muted);}
.contact-meta strong{color:var(--ink); font-weight:650;}
.cta-band{
  background:var(--ink); color:var(--ink-contrast); border-radius:28px; padding:48px 36px; text-align:center;
  box-shadow:var(--shadow-float);
}
.cta-band h2{margin:0 0 12px; font-size:clamp(26px,3vw,36px); font-weight:750; letter-spacing:-.03em; color:inherit;}
.cta-band p{margin:0 0 24px; color:color-mix(in srgb, var(--ink-contrast) 70%, transparent); font-size:16px;}
.cta-band .btn-primary{background:var(--ink-contrast); color:var(--ink) !important;}

/* ===== FOOTER ===== */
.site-foot{padding:56px 0 40px; border-top:1px solid var(--line);}
.foot-grid{display:grid; gap:32px;}
@media(min-width:700px){ .foot-grid{grid-template-columns:1.2fr 1fr; align-items:start;} }
.foot-links{display:flex; flex-wrap:wrap; gap:8px 18px; align-content:flex-start;}
.foot-links a{text-decoration:none; color:var(--muted) !important; font-size:13px; font-weight:600;}
.foot-links a:hover{color:var(--ink) !important;}

/* ===== MODALS ===== */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.45); display:none;
  align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface); color:var(--ink); border-radius:24px; max-width:560px; width:100%;
  max-height:min(80vh,720px); overflow:auto; padding:28px; box-shadow:var(--shadow-deep); border:1px solid var(--line);
}
.modal h2{margin:0 0 12px; font-size:22px; font-weight:750;}
.modal p,.modal li{font-size:14px; color:var(--muted); line-height:1.55;}
.modal-close{
  float:right; width:36px; height:36px; border-radius:999px; border:0; background:var(--surface-2);
  cursor:pointer; display:grid; place-items:center;
}

/* utility */
.icon-tile{display:inline-grid; place-items:center;}
.hide-mobile{display:none;}
@media(min-width:900px){ .hide-mobile{display:inline-flex;} }

.sol-visual{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);}
.sol-panel{display:flex; flex-direction:column;}
.band-dark .store-row img{filter:none;}
.hero-stage .stage-browser{outline:1px solid color-mix(in srgb, var(--ink) 6%, transparent);}

/* ===== v3.1 phone fidelity ===== */
.ph-home-title{font-size:26px; font-weight:800; letter-spacing:-.04em; color:var(--ink); margin:2px 0 0; line-height:1.1;}
.ph-gym{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0;}
.ph-stat .lbl{display:block; font-size:11px; font-weight:650; color:var(--ink); margin-top:2px; line-height:1.2;}
.ph-stat .sub{display:block; font-size:10px; font-weight:550; color:var(--muted); line-height:1.2;}
.ph-perf > div{display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px;}
.ph-perf .pv{font-size:13px; font-weight:800; color:var(--ink); line-height:1;}
.ph-perf .pl{font-size:8px; font-weight:750; letter-spacing:.04em; color:var(--muted);}
.ph-part .ph-part-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.ph-part .ph-part-top .cap{font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.ph-part .wod{font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.02em;}
.ph-part .prev{font-size:11px; color:var(--muted); font-weight:600;}
.ph-part .bars{display:flex; align-items:flex-end; gap:3px; height:28px; margin-top:8px;}
.ph-part .bars i{display:block; width:5px; border-radius:2px; background:#7C3AED; opacity:.85;}
.ph-bell{position:absolute; right:14px; top:36px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--ink);}
.roles-alt{display:grid; gap:0; border:1px solid var(--line); border-radius:28px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow-float);}
.roles-alt .role-row{display:grid; gap:16px; padding:28px 28px; border-top:1px solid var(--line); align-items:center;}
.roles-alt .role-row:first-child{border-top:0;}
@media(min-width:800px){ .roles-alt .role-row{grid-template-columns:180px 1fr; gap:28px;} }
.roles-alt .role-row .icon-tile{width:56px; height:56px; border-radius:18px; display:grid; place-items:center; font-size:24px; color:#fff; margin-bottom:10px;}
.roles-alt h3{margin:0 0 6px; font-size:20px; font-weight:750;}
.roles-alt p{margin:0; color:var(--muted); font-size:14px; line-height:1.5;}
.feature-marquee{display:flex; flex-wrap:wrap; gap:10px; margin:28px 0 0;}
.feature-marquee span{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:13px; font-weight:650; color:var(--muted);
  box-shadow:var(--shadow-soft);
}
.feature-marquee i{color:var(--brand-strong);}


/* ===== v3.4 additions ===== */
svg.ico{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.15em; flex-shrink:0;}
.ps-item svg.ico{width:18px; height:18px;}
.icon-tile svg.ico{width:24px; height:24px;}

/* Hide scrollbars but keep scroll on every horizontal scroller */
.sol-tabs, .ph-days, .hscroll, [data-hscroll]{
  scrollbar-width:none; -ms-overflow-style:none;
}
.sol-tabs::-webkit-scrollbar,
.phone-tabs::-webkit-scrollbar,
.ph-days::-webkit-scrollbar,
.hscroll::-webkit-scrollbar,
[data-hscroll]::-webkit-scrollbar{display:none; width:0; height:0;}

/* Store buttons (self-designed, no badge images) */
.store-row{display:flex; flex-wrap:wrap; gap:12px; align-items:stretch;}
.store-btn{
  display:inline-flex; align-items:center; gap:12px;
  min-width:180px; height:52px; padding:8px 16px 8px 14px;
  border-radius:12px; text-decoration:none !important;
  background:#0B0B0C; color:#fff !important;
  border:1px solid #0B0B0C;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.store-btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(0,0,0,.45);}
.store-btn:focus-visible{outline:2px solid var(--brand); outline-offset:3px;}
html.dark .store-btn{
  background:rgba(255,255,255,.92); color:#0B0B0C !important; border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
}
html.dark .store-btn:hover{background:#fff;}
.band-dark .store-btn{
  background:rgba(255,255,255,.96); color:#0B0B0C !important; border-color:rgba(255,255,255,.18);
}
.band-dark .store-btn:hover{background:#fff;}
.store-logo{width:26px; height:26px; flex-shrink:0;}
.store-logo-play{width:22px; height:24px;}
.store-btn-text{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.store-btn-text small{font-size:10px; font-weight:600; opacity:.78; letter-spacing:.01em;}
.store-btn-text strong{font-size:15px; font-weight:750; letter-spacing:-.02em;}

/* bento phone visual removed in v3.6 */
  
}

/* Mock fit: fixed design width + scale into frame */
.mock-fit{
  width:100%; overflow:hidden; position:relative;
  container-type:inline-size; container-name:mock;
  max-width:100%;
}
.mock-fit-inner{
  width:720px; transform-origin:top left;
  /* fallback scale; JS fine-tunes */
  transform:scale(calc(100cqi / 720));
}
@supports not (width:1cqi){
  .mock-fit-inner{transform:scale(.72);}
}
.visual-frame .mock-fit{min-height:360px;}
.browser-body .mock-fit{min-height:560px;}
.week-grid{gap:5px;}
.day-col{padding:6px;}
.cls{font-size:9px; padding:4px 5px; letter-spacing:-.01em; max-width:100%; overflow:visible; text-overflow:clip; white-space:normal; display:block; line-height:1.2;}
.pay-kpis .kpi{min-width:0; overflow:hidden;}
.pay-kpis .kpi b{font-size:13px; letter-spacing:-.03em; white-space:nowrap;}
.pay-kpis .kpi span{font-size:10px; white-space:nowrap;}


/* v35: no ellipsis in mocks */
.panel-shell, .mock-fit, .phone, .visual-frame, .browser-body {
  --mock-ellipsis: clip;
}
.panel-shell *, .mock-fit *, .phone *, .visual-frame *, 
.cls, .day-col .d, .kpi b, .kpi span, .pm-row .nm, .pm-row .mt {
  text-overflow: clip !important;
  overflow: visible;
}
.cls { white-space: normal !important; }


/* v36 hero shadow containment — no grey band under stage */
.hero{background:var(--bg);}
.hero-stage{overflow:visible;}
.stage-scene{
  /* clip only the soft shadow bleed without cutting the phone */
  padding-bottom:28px; margin-bottom:-8px;
}


/* v36 bento balance — content-sized equal cards, no empty phone column */
.bento-card.b1, .bento-card.b2{min-height:0;}
.bento-card.b1 .store-row{margin-top:16px; padding-top:0;}
.bento .b1 .store-btn, .bento .b1 .store-btn{min-width:0;}
@media(min-width:1000px){
  .bento-card.b1, .bento-card.b2{height:100%;}
}