/* Fitness.Ai canonical stylesheet.
   Generated from the approved 31.08.2026 visual baseline and organized as
   ordered production layers. The document loads this file only. */
@layer foundation, layout, refinement, audit;

/* foundation */
@layer foundation {
  :root{--bg:#030711;--bg2:#07111f;--panel:#0c1725;--panel2:#111f2d;--text:#f4f8fb;--muted:#a7b7c4;--line:rgba(112,182,222,.18);--blue:#149cff;--cyan:#24d6ff;--green:#3de0a5;--warm:#ff9e49;--white:#f7fafc;--ink:#07111d;--radius:28px;--shadow:0 24px 80px rgba(0,0,0,.32);--wrap:100%}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:82px}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  button,input,select,textarea{font:inherit}
  .wrap{width:min(calc(100% - 56px),var(--wrap));margin-inline:auto}
  .skip{position:fixed;z-index:200;left:18px;top:-90px;padding:12px 18px;background:#fff;color:#000;border-radius:12px}
  .skip:focus{top:18px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .top{position:fixed;inset:0 0 auto;z-index:100;height:72px;border-bottom:1px solid transparent;transition:background-color .24s,border-color .24s,box-shadow .24s}
  .top.is-on{background:rgba(3,7,17,.8);border-color:rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.22);backdrop-filter:blur(22px)}
  .top-inner{height:72px;display:flex;align-items:center;gap:34px}
  .brand{display:flex;align-items:center;gap:10px;min-width:max-content;font-weight:800;font-size:22px;letter-spacing:-.03em}
  .brand img{width:44px;height:44px;object-fit:contain}
  .dot{color:var(--blue)}
  .menu{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.2vw,36px);flex:1}
  .menu a{font-size:13px;font-weight:600;white-space:nowrap;color:rgba(255,255,255,.78);transition:color .2s}
  .menu a:hover{color:#fff}
  .tools{display:flex;align-items:center;gap:12px;min-width:max-content}
  .lang{width:72px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:var(--muted)}
  .lang button{border:0;background:none;color:inherit;padding:2px;cursor:pointer;font-size:10px}
  .lang button.is-on{color:#fff;font-weight:800}
  .theme{width:102px;height:36px;border:1px solid rgba(76,162,235,.35);border-radius:99px;background:rgba(9,17,29,.72);color:#e6eff7;display:flex;align-items:center;justify-content:space-between;padding:0 10px;cursor:pointer}
  .theme i{width:30px;height:18px;border-radius:99px;background:linear-gradient(90deg,#ffad52,#157de5);position:relative}
  .theme i:after{content:"";position:absolute;width:14px;height:14px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;transition:transform .24s}
  .theme span{font-size:11px}
  .btn{height:48px;padding:0 22px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:750;font-size:14px;border:1px solid transparent;white-space:nowrap;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-main{background:linear-gradient(135deg,#16b7ff,#0877f1 62%,#4054ec);color:#fff;box-shadow:0 10px 34px rgba(0,132,255,.34)}
  .btn-main:hover{box-shadow:0 14px 40px rgba(0,132,255,.46)}
  .btn-ghost{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.04);color:#fff}
  .btn-ghost b{width:23px;height:23px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:9px}
  .top-cta{height:42px;padding-inline:18px}
  .burger{display:none;border:0;background:none;width:40px;height:40px;padding:8px;cursor:pointer}
  .burger span{display:block;height:2px;background:#fff;margin:5px 0}
  .hero{min-height:735px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);background:#020711}
  .hero-sky,.hero-sky>*{position:absolute;inset:0;pointer-events:none}
  .hero-sky{background:linear-gradient(90deg,#120b08 0,#06101c 44%,#020816 100%)}
  .sunset{inset:auto auto -25% -15%;width:60%;height:90%;background:radial-gradient(circle at 38% 55%,rgba(255,186,90,.9) 0 1.5%,rgba(244,108,38,.35) 12%,rgba(98,31,17,.25) 40%,transparent 68%),linear-gradient(165deg,transparent 52%,rgba(255,105,34,.18) 54%,transparent 70%);filter:blur(2px)}
  .night{left:36%;background:radial-gradient(ellipse at 60% 36%,rgba(0,123,255,.18),transparent 48%),linear-gradient(168deg,transparent 64%,rgba(13,70,129,.25) 65%,rgba(4,13,30,.9) 88%)}
  .stars{opacity:.28;background-image:radial-gradient(#fff 0.6px,transparent .7px);background-size:43px 43px}
  .moon-orb{inset:118px 8% auto auto;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d7efff,#4779a8 44%,#142a48 64%,transparent 66%);box-shadow:0 0 50px rgba(102,171,255,.3)}
  .hero-grid{position:relative;z-index:2;min-height:735px;display:grid;grid-template-columns:minmax(460px,.82fr) minmax(610px,1.18fr);align-items:center}
  .hero-copy{padding-top:54px;position:relative;z-index:4}
  .eyebrow,.kicker{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border:1px solid rgba(255,255,255,.16);border-radius:7px;background:rgba(255,255,255,.05);text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:750;color:#dce9f4}
  .hero h1{font-size:clamp(54px,4.65vw,72px);line-height:1.04;letter-spacing:-.052em;margin:22px 0 18px;max-width:760px}
  .hero h1 em{font-style:normal;color:var(--blue);text-shadow:0 0 35px rgba(0,149,255,.26)}
  .lead{max-width:560px;font-size:18px;color:#c2d0da;margin:0}
  .hero-cta{display:flex;gap:18px;margin-top:34px}
  .hero-cta .btn{min-width:190px;height:52px}
  .trust{display:flex;gap:28px;list-style:none;margin:18px 0 0;padding:0;color:#b5c3ce;font-size:12px}
  .trust li:before{content:"✓";color:var(--green);margin-right:7px}
  .stage{height:690px;position:relative;margin-top:50px;transform:translateX(5%);isolation:isolate}
  .stage:before{content:"";position:absolute;inset:6% -6% 0 3%;background:radial-gradient(ellipse at 68% 50%,rgba(0,136,255,.26),transparent 50%);z-index:-1}
  .stage img{position:absolute;width:min(760px,63vw);height:min(760px,63vw);max-width:none;object-fit:cover;inset:50% auto auto 50%;transform:translate(-50%,-50%) scale(.98);opacity:0;mix-blend-mode:screen;filter:contrast(1.08) saturate(1.12);mask-image:radial-gradient(ellipse 62% 64% at 52% 49%,#000 44%,rgba(0,0,0,.84) 58%,transparent 76%);transition:opacity 1.15s ease,transform 1.15s ease}
  .stage img.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .circuit{position:absolute;z-index:3;height:1px;background:linear-gradient(90deg,transparent,#14a9ff);box-shadow:0 0 8px #18aaff}
  .circuit:after{content:"";position:absolute;right:-5px;top:-4px;width:8px;height:8px;border:1px solid #6bd6ff;border-radius:50%;box-shadow:0 0 10px #18aaff}
  .circuit-a{left:11%;top:38%;width:18%}
  .circuit-b{left:18%;top:42%;width:26%}
  .pulse-line{position:absolute;z-index:5;bottom:72px;left:42%;right:6%;height:2px;background:linear-gradient(90deg,transparent,#159cff 28%,#87eaff 75%,transparent);box-shadow:0 0 14px #139cff}
  .pulse-line span{position:absolute;left:0;top:-45px;width:180px;height:90px;clip-path:polygon(0 49%,34% 49%,44% 12%,53% 86%,61% 49%,100% 49%,100% 52%,62% 52%,53% 92%,44% 17%,35% 52%,0 52%);background:#4abfff;filter:drop-shadow(0 0 8px #0af)}
  .pulse-line i{position:absolute;right:0;top:-15px;width:30px;height:30px;border-radius:50%;background:#b7f3ff;box-shadow:0 0 0 9px rgba(21,164,255,.2),0 0 0 20px rgba(21,164,255,.1),0 0 28px #0af}
  .features{position:relative;z-index:6;background:#07101b}
  .feature-grid{display:grid;grid-template-columns:1fr 1fr;max-width:none;margin:auto;box-shadow:0 -30px 80px rgba(0,0,0,.25)}
  .feature{min-height:260px;display:grid;grid-template-columns:1fr minmax(240px,.78fr);align-items:stretch;overflow:hidden;position:relative}
  .feature-copy{padding:38px clamp(32px,5vw,80px);position:relative;z-index:2}
  .num{color:#139aff;font-size:14px;font-weight:800;display:block;margin-bottom:10px}
  .feature-icon{position:absolute;left:clamp(12px,2vw,30px);top:82px;color:#1ca8ff;font-size:28px}
  .feature h3{font-size:23px;line-height:1.15;margin:0 0 13px;letter-spacing:-.02em}
  .feature p{margin:0;max-width:410px;font-size:14px;line-height:1.55}
  .feature-dark{background:linear-gradient(135deg,#02060c,#0b1b2f);color:#f3f8fc}
  .feature-dark p{color:#bdcad4}
  .feature-light{background:linear-gradient(135deg,#f7faff,#dfe8f3);color:#08111d}
  .feature-light p{color:#40515f}
  .feature-visual{position:relative;min-width:0;overflow:hidden}
  .feature-visual:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
  .feature-dark .feature-visual:before{background:linear-gradient(90deg,#071322 0,transparent 48%)}
  .feature-light .feature-visual:before{background:linear-gradient(90deg,#eef4fa 0,transparent 48%)}
  .feature-visual img{position:absolute;width:220px;max-width:none;right:8%;top:18px;border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.3)}
  .dashboard-crop img,.progress-crop img{width:250px;top:26px}
  .list-crop img{top:15px}
  .reminder-crop img{top:14px}
  .exercise-crop img{top:22px}
  .feature:nth-child(3),.feature:nth-child(4){direction:rtl}
  .feature:nth-child(3)>*,.feature:nth-child(4)>*{direction:ltr}
  .feature:nth-child(3) .feature-visual img,.feature:nth-child(4) .feature-visual img{right:auto;left:8%}
  .feature:nth-child(3) .feature-visual:before,.feature:nth-child(4) .feature-visual:before{transform:scaleX(-1)}
  .block{padding:110px 0}
  .section-head{text-align:center;max-width:760px;margin:0 auto 54px}
  .section-head h2,.price-copy h2,.faq h2,.contact h2{font-size:clamp(36px,4vw,52px);line-height:1.08;letter-spacing:-.045em;margin:16px 0}
  .how{background:radial-gradient(circle at 50% 110%,rgba(18,116,255,.16),transparent 45%),#030711}
  .flow{display:grid;grid-template-columns:repeat(5,1fr);padding:0;margin:0;list-style:none;position:relative}
  .flow:before{content:"";position:absolute;left:8%;right:8%;top:54px;height:1px;background:linear-gradient(90deg,transparent,#198cff,#32d4ff,transparent)}
  .flow li{text-align:center;padding:0 22px;position:relative}
  .flow li>b{font-size:11px;color:#159cff;position:absolute;top:1px;left:50%;transform:translateX(-50%)}
  .flow li>span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:24px auto 18px;background:#081728;border:1px solid rgba(34,172,255,.42);color:#45cfff;font-size:25px;box-shadow:0 0 28px rgba(14,155,255,.16)}
  .flow h3{margin:0 0 8px}
  .flow p{font-size:13px;color:var(--muted);margin:0}
  .pricing{padding-top:40px;background:linear-gradient(180deg,#030711,#071526 58%,#06101d)}
  .price-shell{border:1px solid rgba(121,194,237,.2);border-radius:38px;padding:46px;background:linear-gradient(145deg,rgba(5,12,22,.96),rgba(9,28,49,.94));box-shadow:var(--shadow);position:relative;overflow:hidden}
  .price-shell:before{content:"";position:absolute;width:550px;height:550px;right:-20%;top:-50%;background:radial-gradient(circle,rgba(23,131,255,.22),transparent 65%)}
  .price-copy{max-width:780px;position:relative}
  .price-copy p:not(.kicker){color:var(--muted)}
  .compare{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;position:relative;margin:32px 0 18px}
  .compare article{border:1px solid rgba(255,255,255,.1);border-radius:19px;background:rgba(255,255,255,.035);padding:24px;min-height:245px}
  .compare-label{font-weight:800}
  .save-xl{font-size:52px;line-height:1;color:#59db37;font-weight:850;margin:24px 0 5px;letter-spacing:-.04em}
  .compare small{color:var(--muted)}
  .yes,.no{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;list-style:none;padding:0;margin:22px 0 0;color:#c5d1da;font-size:13px}
  .yes li:before{content:"✓";color:#1fb6ff;margin-right:8px}
  .no li:before{content:"×";color:#72808c;margin-right:8px}
  .coach-cost{font-size:24px;color:#d9e1e7}
  .save-year{display:flex;gap:15px;align-items:center;color:var(--muted)}
  .save-year strong{font-size:27px;color:#59db37}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .plan{padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(7,16,28,.82);position:relative}
  .plan:nth-child(2){border-color:rgba(27,167,255,.56);box-shadow:0 0 35px rgba(0,135,255,.12)}
  .plan-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .plan-top b{font-size:17px}
  .plan-top span{font-weight:800}
  .eco{color:var(--muted);font-size:12px;margin-top:22px}
  
  .vs,.disc{font-size:12px;color:var(--muted);margin:4px 0}
  .plan .btn{width:100%;margin-top:18px}
  .muted-note{text-align:center;color:var(--muted);font-size:12px;margin:16px 0 0}
  .app-showcase{min-height:690px;padding:95px 0 0;position:relative;overflow:hidden;background:linear-gradient(110deg,#2d140c 0,#07111d 39%,#041122 100%)}
  .app-bg{position:absolute;inset:0;background:radial-gradient(circle at 6% 61%,rgba(255,156,68,.7) 0 1%,rgba(255,96,27,.25) 10%,transparent 31%),radial-gradient(circle at 90% 42%,rgba(15,113,231,.3),transparent 43%),linear-gradient(156deg,transparent 48%,rgba(43,119,194,.18) 49%,transparent 68%)}
  .app-grid{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;min-height:595px}
  .app-copy{padding-bottom:70px}
  .app-copy h2{font-size:clamp(44px,4.4vw,64px);line-height:1.04;letter-spacing:-.045em;margin:18px 0 22px}
  .app-copy>p:not(.eyebrow){max-width:420px;color:#c2cdd6}
  .app-note{display:flex;gap:12px;margin-top:26px}
  .app-note span{padding:8px 13px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:12px}
  .phones{height:560px;position:relative}
  .phone{position:absolute;margin:0;width:245px;height:500px;border:7px solid #17202b;border-radius:40px;background:#05090e;padding:6px;overflow:hidden;box-shadow:0 28px 60px rgba(0,0,0,.5);transform-origin:bottom}
  .phone:before{content:"";position:absolute;z-index:2;top:10px;left:50%;transform:translateX(-50%);width:54px;height:12px;border-radius:9px;background:#030609}
  .phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:29px}
  .phone-1{left:2%;bottom:-34px;transform:rotate(-4deg);z-index:1}
  .phone-2{left:26%;bottom:-8px;z-index:4}
  .phone-3{left:50%;bottom:-35px;transform:rotate(2deg);z-index:3}
  .phone-4{left:74%;bottom:-62px;transform:rotate(5deg);z-index:2}
  .faq{background:#07111e}
  .faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
  .section-note{color:var(--muted)}
  .faq-list{border-top:1px solid var(--line)}
  details{border-bottom:1px solid var(--line);padding:22px 0}
  summary{cursor:pointer;font-size:19px;font-weight:750;list-style:none;display:flex;justify-content:space-between;gap:20px}
  summary:after{content:"+";color:#2eddb5;font-size:24px}
  details[open] summary:after{content:"−"}
  details p{color:var(--muted);margin:12px 50px 0 0}
  .contact{padding-top:40px;background:linear-gradient(180deg,#07111e,#dbe4ef)}
  .contact-shell{display:grid;grid-template-columns:.72fr 1.28fr;border-radius:34px 34px 0 0;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.28)}
  .contact-copy{padding:52px;background:linear-gradient(135deg,#071725 50%,rgba(255,145,66,.28)),radial-gradient(circle at 94% 40%,#8d472a,transparent 40%);min-height:460px}
  .contact-copy>p:not(.kicker){color:#c2d0d9;max-width:400px}
  .points{list-style:none;padding:0;margin:28px 0}
  .points li{margin:10px 0;color:#dce7ed}
  .points li:before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #28cfff;border-radius:50%;color:#2bcaff;margin-right:10px;font-size:11px}
  .form{background:#f2f6fb;color:#0a1320;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
  .form label{display:grid;gap:6px;font-size:12px;font-weight:700}
  .form .two{display:grid;grid-template-columns:1fr 1fr;gap:15px;grid-column:1/-1}
  .form>label:nth-of-type(1){grid-column:1}
  .form>label:nth-of-type(2){grid-column:2;grid-row:2/4}
  .form input,.form select,.form textarea{width:100%;border:1px solid #c7d2df;border-radius:7px;background:#fff;color:#08111d;padding:12px 14px;min-height:44px}
  .form textarea{resize:vertical;min-height:129px}
  .form .check{display:flex;grid-column:1/-1;grid-template-columns:20px 1fr;align-items:flex-start;font-weight:500;line-height:1.45}
  .check input{width:18px;min-height:18px;margin:1px 0}
  .check a{color:#0878dd;text-decoration:underline}
  .form button{grid-column:1/-1}
  .status{grid-column:1/-1;margin:0;min-height:22px;font-size:13px}
  .status.ok{color:#078e64}
  .status.bad{color:#c52f3e}
  .hp{position:absolute;left:-9999px}
  .foot{background:#030b15;padding:38px 0 22px;border-top:1px solid rgba(255,255,255,.08)}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:45px}
  .foot-grid h3{font-size:13px;margin:0 0 14px}
  .foot-grid>div>a:not(.brand){display:block;color:#9dabb6;font-size:12px;margin:8px 0}
  .foot-brand p{color:#8596a3;font-size:12px;max-width:240px}
  .foot-end{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);margin-top:26px;padding-top:18px;color:#71818e;font-size:11px}
  .page{min-height:78vh;padding:130px 0 90px;background:radial-gradient(circle at 50% 0,rgba(11,125,223,.13),transparent 28%)}
  .page>.wrap>h1,.legal h1{font-size:clamp(42px,5vw,68px);line-height:1.05;letter-spacing:-.04em;max-width:1000px}
  .legal{max-width:940px}
  .legal h2{font-size:24px;margin:40px 0 12px}
  .legal h3{margin-top:28px}
  .legal p,.legal li{color:#becbd4}
  .legal a{color:#3bbfff;text-decoration:underline}
  .legal dl{display:grid;grid-template-columns:230px 1fr;gap:10px 20px}
  .legal dt{color:var(--muted)}
  .legal dd{margin:0}
  .seller{max-width:940px;margin-top:40px;padding:30px;border:1px solid var(--line);border-radius:22px;background:var(--panel)}
  :focus-visible{outline:3px solid #43caff;outline-offset:3px}
  html[data-theme="light"]{--bg:#edf2f7;--bg2:#f6f8fb;--panel:#fff;--panel2:#edf3f8;--text:#0a1420;--muted:#526475;--line:rgba(16,81,124,.18);--shadow:0 24px 80px rgba(42,66,91,.18)}
  html[data-theme="light"] body{background:var(--bg);color:var(--text)}
  html[data-theme="light"] .top.is-on{background:rgba(247,250,253,.88);border-color:rgba(15,72,110,.12)}
  html[data-theme="light"] .top.is-on .menu a,html[data-theme="light"] .top.is-on .brand{color:#08131f}
  html[data-theme="light"] .top.is-on .lang button.is-on{color:#07111d}
  html[data-theme="light"] .top.is-on .theme{background:#fff;color:#152433}
  html[data-theme="light"] .theme i:after{transform:translateX(12px)}
  html[data-theme="light"] .how,html[data-theme="light"] .faq{background:#edf2f7}
  html[data-theme="light"] .flow li>span{background:#fff}
  html[data-theme="light"] .pricing{background:linear-gradient(180deg,#edf2f7,#dfe9f3)}
  html[data-theme="light"] .price-shell{background:linear-gradient(145deg,#fff,#e8f1fa);color:#08131f}
  html[data-theme="light"] .compare article,html[data-theme="light"] .plan{background:rgba(255,255,255,.72);border-color:rgba(25,105,155,.2)}
  html[data-theme="light"] .yes,html[data-theme="light"] .no{color:#344958}
  html[data-theme="light"] .page{background:radial-gradient(circle at 50% 0,rgba(28,150,242,.16),transparent 27%),#eef3f8}
  html[data-theme="light"] .seller{background:#fff}
  
  
  
  
  
  
  
  
  
  .chart-legend{display:grid;gap:7px;font-size:12px;color:#b9c7d1}
  .chart-legend>span{display:flex;align-items:center;gap:5px}
  .chart-legend i{width:18px;height:10px;border-radius:3px;display:inline-block;margin-right:3px}
  .legend-coach{background:#85909a}
  .legend-pro{background:#148dff;box-shadow:0 0 12px rgba(20,141,255,.45)}
  
  
  
  .chart-line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.09)}
  .line-1{top:0}
  .line-2{top:33%}
  .line-3{top:66%}
  .chart-bar{position:relative;width:60px;height:100%;display:flex;align-items:flex-end}
  .chart-bar i{display:block;width:100%;border-radius:7px 7px 0 0;transition:height .9s cubic-bezier(.2,.75,.2,1)}
  .chart-bar-coach i{height:78%;background:linear-gradient(180deg,#9aa3aa,#5d646a)}
  .chart-bar-pro i{height:12%;background:linear-gradient(180deg,#19a6ff,#086ce8);box-shadow:0 0 20px rgba(20,141,255,.28)}
  .chart-axis{position:absolute;bottom:9px;left:0;right:0;margin:0;text-align:center;color:var(--muted);font-size:11px}
  
  
  html[data-theme="light"] .chart-legend{color:#344a5a}
  html[data-theme="light"] .chart-line{background:rgba(25,78,116,.15)}
  
  .top>.wrap:not(.top-inner){height:72px;display:flex;align-items:center;gap:34px}
  .top>.wrap:not(.top-inner) .menu{flex:1}
  .top>.wrap:not(.top-inner) .tools{margin-left:auto}
  .hero{color:#f4f8fb}
  .top:not(.is-on){color:#fff}
  .hero-grid,.hero-copy,.lead{min-width:0;max-width:100%}
  .lead{overflow-wrap:anywhere}
  .theme-event{position:fixed;inset:0;z-index:500;pointer-events:none;overflow:hidden;opacity:0;background:linear-gradient(180deg,rgba(3,8,20,.05),rgba(255,115,35,.34));}
  .theme-event .theme-horizon{position:absolute;inset:auto -10% -22% -10%;height:55%;background:radial-gradient(ellipse at 18% 0,rgba(255,224,143,.95),rgba(245,105,35,.52) 25%,transparent 62%);filter:blur(8px)}
  .theme-event .theme-sun{position:absolute;left:14%;bottom:-120px;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle,#fffbd0 0 18%,#ffd265 43%,#ff8a32 72%);box-shadow:0 0 35px #ffd36c,0 0 110px 42px rgba(255,122,42,.65)}
  .theme-event.sunrise{animation:theme-flash 1.45s ease both}
  .theme-event.sunrise .theme-sun{animation:sun-rise 1.45s cubic-bezier(.2,.72,.2,1) both}
  .theme-event.sunset{animation:theme-flash 1.45s ease both;background:linear-gradient(180deg,rgba(20,67,125,.15),rgba(136,48,22,.55),rgba(2,7,17,.92))}
  .theme-event.sunset .theme-sun{animation:sun-set 1.45s cubic-bezier(.4,0,.8,.3) both}
  @keyframes theme-flash{0%,100%{opacity:0}16%,72%{opacity:1}}
  @keyframes sun-rise{0%{bottom:-120px;transform:scale(.7)}70%{bottom:58%;transform:scale(1)}100%{bottom:74%;transform:scale(.8)}}
  @keyframes sun-set{0%{bottom:72%;transform:scale(.8)}65%{bottom:8%;transform:scale(1.05)}100%{bottom:-130px;transform:scale(.65)}}
  .feature-light{background:linear-gradient(135deg,#3a170f 0%,#713019 46%,#b45625 100%);color:#fff7ed}
  .feature-light p{color:#f0c9b2}
  .feature-light .feature-visual:before{background:linear-gradient(90deg,#6d2d18 0,rgba(109,45,24,.62) 30%,transparent 70%)}
  .feature{min-height:285px}
  .dashboard-crop img{width:290px;top:-52px}
  .adapt-technique-crop img{width:245px;top:-36px}
  .progress-crop img{width:205px;top:-24px;right:13%}
  .feature:nth-child(3) .feature-visual:before{background:linear-gradient(90deg,#b75a27 0,rgba(183,90,39,.58) 33%,transparent 72%)}
  .section-head .btn-video{margin-top:22px}
  .btn-video{border:1px solid rgba(46,199,255,.42);background:linear-gradient(135deg,rgba(8,34,57,.9),rgba(27,91,139,.72));color:#eefbff;box-shadow:0 12px 38px rgba(0,133,225,.16)}
  .btn-video>span:first-child{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#16a9ff;color:#fff;font-size:10px}
  .flow-visual{gap:16px}
  .flow-visual:before{top:121px;left:6%;right:6%}
  .flow-visual li{padding:0 8px}
  .flow-visual li>b{top:-8px}
  .flow-visual figure{width:154px;height:218px;margin:18px auto 20px;border:5px solid #142333;border-radius:25px;background:#050a10;overflow:hidden;position:relative;box-shadow:0 18px 42px rgba(0,0,0,.35),0 0 0 1px rgba(62,181,240,.15);z-index:1}
  .flow-visual figure:before{content:"";position:absolute;z-index:2;top:5px;left:50%;transform:translateX(-50%);width:34px;height:7px;border-radius:6px;background:#02070b}
  .flow-visual figure img{width:100%;height:100%;object-fit:cover;object-position:top}
  .flow-visual li:nth-child(3) figure img{object-position:center top}
  .flow-visual h3{font-size:17px}
  .flow-visual p{font-size:12px}
  .video-dialog{width:min(920px,calc(100% - 30px));padding:0;border:1px solid rgba(62,190,255,.28);border-radius:24px;background:#07111d;color:#f5f9fc;box-shadow:0 35px 120px rgba(0,0,0,.65)}
  .video-dialog::backdrop{background:rgba(1,5,12,.82);backdrop-filter:blur(12px)}
  .video-dialog-head{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.1)}
  .video-dialog-head button{width:38px;height:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:25px;cursor:pointer}
  .video-dialog video{display:block;width:100%;max-height:76vh;background:#000}
  .contact{background:linear-gradient(180deg,#07111e,#07101a)}
  .form{background:linear-gradient(145deg,#0e1a28,#101f2f);color:#edf7fb}
  .form input,.form select,.form textarea{background:#07111c;color:#edf7fb;border-color:rgba(92,174,218,.32)}
  .form input::placeholder,.form textarea::placeholder{color:#8497a6}
  .contact-shell{border:1px solid rgba(78,168,220,.18)}
  html[data-theme="light"] .hero{color:#0b1622}
  html[data-theme="light"] .hero-sky{background:linear-gradient(90deg,#fff3df 0%,#dcefff 39%,#07172c 48%,#020816 100%)}
  html[data-theme="light"] .hero .lead,html[data-theme="light"] .hero .trust{color:#384d5b}
  html[data-theme="light"] .hero .btn-ghost{color:#102131;border-color:rgba(11,37,55,.48);background:rgba(255,255,255,.22)}
  html[data-theme="light"] .top:not(.is-on) .brand{color:#07131f}
  html[data-theme="light"] .feature-light{background:linear-gradient(135deg,#ffe6c9 0%,#e49a61 50%,#b75928 100%);color:#2b130b}
  html[data-theme="light"] .feature-light p{color:#512b1e}
  html[data-theme="light"] .feature-light .feature-visual:before{background:linear-gradient(90deg,#e19a62 0,rgba(225,154,98,.58) 32%,transparent 72%)}
  html[data-theme="light"] .feature-dark{background:linear-gradient(135deg,#d8e7f3,#b9d1e1);color:#09141e}
  html[data-theme="light"] .feature-dark p{color:#344d5d}
  html[data-theme="light"] .feature-dark .feature-visual:before{background:linear-gradient(90deg,#c4d9e7 0,rgba(196,217,231,.64) 32%,transparent 72%)}
  html[data-theme="light"] .flow-visual figure{border-color:#c6d7e5;box-shadow:0 16px 38px rgba(48,82,110,.2)}
  html[data-theme="light"] .btn-video{background:linear-gradient(135deg,#e9f6ff,#bedff4);color:#092033;border-color:#65b9e8}
  html[data-theme="light"] .contact{background:linear-gradient(180deg,#edf3f8,#d5e0e9)}
  html[data-theme="light"] .contact-shell{border-color:rgba(37,92,126,.16)}
  html[data-theme="light"] .contact-copy{background:linear-gradient(135deg,#e7f0f7 46%,rgba(220,128,68,.36)),radial-gradient(circle at 94% 40%,#d79a70,transparent 40%);color:#0a1621}
  html[data-theme="light"] .contact-copy>p:not(.kicker),html[data-theme="light"] .points li{color:#3d5362}
  html[data-theme="light"] .form{background:#f4f8fb;color:#09141f}
  html[data-theme="light"] .form input,html[data-theme="light"] .form select,html[data-theme="light"] .form textarea{background:#fff;color:#09141f;border-color:#c3d3df}
  .dashboard-crop:before{background:linear-gradient(90deg,#071322 0,rgba(7,19,34,.25) 22%,transparent 48%)}
  .dashboard-crop img{filter:brightness(1.16) contrast(1.04)}
  .progress-crop:before{background:linear-gradient(90deg,#8f3d1d 0,rgba(143,61,29,.2) 24%,transparent 52%)}
  .progress-crop img{filter:brightness(1.18) contrast(1.05)}
  .stage img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 84%,rgba(0,0,0,.88) 88%,transparent 94%);mask-image:radial-gradient(circle at 50% 50%,#000 0 84%,rgba(0,0,0,.88) 88%,transparent 94%);clip-path:inset(5% round 50%)}
  .flow-visual{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:18px;max-width:1180px;overflow:visible;padding:12px 8px 34px;margin-inline:auto}
  .flow-visual:before{display:none}
  .flow-visual li,.flow-visual li:nth-child(n){display:block;min-width:0;padding:0 7px;text-align:center}
  .flow-visual li>b,.flow-visual li:nth-child(n)>b{left:50%;top:-8px}
  .flow-visual figure,.flow-visual li:nth-child(n) figure{width:min(172px,100%);height:244px;margin:18px auto 20px;cursor:zoom-in;transition:transform .24s,box-shadow .24s}
  .flow-visual figure:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(0,0,0,.5),0 0 0 1px rgba(62,181,240,.35)}
  .flow-visual figure:focus-visible{outline:3px solid #43caff;outline-offset:4px}
  .flow-visual h3,.flow-visual li:nth-child(n) h3{margin:0 0 8px;font-size:16px}
  .flow-visual p,.flow-visual li:nth-child(n) p{margin:0;font-size:12px}
  .screen-preview{width:min(620px,calc(100% - 28px));max-width:none;max-height:94vh;margin:auto;padding:12px;border:1px solid rgba(84,196,255,.35);border-radius:28px;background:rgba(4,12,22,.92);color:#f4f9fc;overflow:visible;box-shadow:0 38px 130px rgba(0,0,0,.75)}
  .screen-preview::backdrop{background:rgba(0,4,10,.76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .screen-preview img{width:auto;max-width:100%;height:auto;max-height:82vh;margin:auto;border-radius:21px;cursor:zoom-out}
  .screen-preview p{margin:10px 10px 2px;text-align:center;font-weight:750}
  .screen-preview-close{position:absolute;z-index:3;right:-12px;top:-12px;width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:#0b1a28;color:#fff;font-size:27px;line-height:1;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.45)}
  body.preview-open{overflow:hidden}
  html[data-theme="light"] .screen-preview{background:rgba(236,245,251,.96);color:#091620;border-color:rgba(30,128,184,.32)}
  html[data-theme="light"] .screen-preview-close{background:#fff;color:#0b1b28;border-color:rgba(18,77,111,.25)}
  
  .feature-light{background:linear-gradient(135deg,#253746 0%,#405b70 52%,#66839a 100%);color:#f6fbff}
  .feature-light p{color:#d8e5ee}
  .feature-light .feature-visual:before,.feature:nth-child(3) .feature-visual:before,.progress-crop:before{background:linear-gradient(90deg,#435f74 0,rgba(67,95,116,.68) 34%,transparent 74%)}
  html[data-theme="light"] .feature-light{background:linear-gradient(135deg,#e4edf4 0%,#cad9e4 50%,#adc2d2 100%);color:#0b1924}
  html[data-theme="light"] .feature-light p{color:#344c5d}
  html[data-theme="light"] .feature-light .feature-visual:before,html[data-theme="light"] .feature:nth-child(3) .feature-visual:before,html[data-theme="light"] .progress-crop:before{background:linear-gradient(90deg,#c5d6e2 0,rgba(197,214,226,.7) 34%,transparent 74%)}
  .hero-sky{background:linear-gradient(90deg,#080c13 0%,#07111d 43%,#020816 100%);transition:background 1s ease}
  .hero-sky .mountains{inset:0 42% 0 0;width:auto;height:auto;background-image:linear-gradient(90deg,rgba(3,7,13,.08),rgba(3,8,16,.14) 72%,rgba(2,8,20,.94)),url('/assets/hero/mountain-valley-v2.png');background-size:cover;background-position:center bottom;opacity:.88;filter:brightness(.82) saturate(.88) contrast(1.08);-webkit-mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%);transition:filter 1.15s ease,opacity 1.15s ease}
  .hero-sky .sunset{inset:auto auto 9% 18%;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle,#fffbd0 0 17%,#ffd46d 42%,#ff8832 72%);box-shadow:0 0 30px #ffd46d,0 0 92px 36px rgba(255,124,42,.56);filter:none;opacity:.95;transition:bottom 1.05s cubic-bezier(.2,.75,.2,1),left 1.05s ease,transform 1.05s ease,box-shadow 1.05s ease}
  .hero-sky .night{left:36%;transition:opacity 1s ease}
  .hero-sky .stars,.hero-sky .moon-orb{transition:opacity 1s ease,transform 1s ease}
  html[data-theme="light"] .hero-sky{background:linear-gradient(90deg,#dbeaf2 0%,#bcd5e5 43%,#0a1930 58%,#03091a 100%)}
  html[data-theme="light"] .hero-sky .mountains{opacity:1;filter:brightness(1.48) saturate(.72) contrast(.88)}
  html[data-theme="light"] .hero-sky .sunset{bottom:67%;left:16%;transform:scale(.84);box-shadow:0 0 40px #fff4a7,0 0 140px 58px rgba(255,226,135,.56)}
  html[data-theme="light"] .hero-sky .night{opacity:.42}
  html[data-theme="light"] .hero-sky .stars,html[data-theme="light"] .hero-sky .moon-orb{opacity:.12;transform:translateY(-8px)}
  .theme-event{background:transparent}
  .theme-event .theme-horizon{inset:0;height:auto;background:radial-gradient(circle at 18% 72%,rgba(255,248,199,.92),rgba(255,190,96,.5) 18%,rgba(103,176,229,.22) 45%,transparent 74%);filter:blur(16px);z-index:1}
  .theme-event .theme-sun{z-index:2;left:16%;width:104px;height:104px}
  .theme-event.sunrise{animation:theme-reveal-v2 1.8s ease both;background:linear-gradient(180deg,rgba(181,221,248,.08),rgba(255,221,148,.34));mix-blend-mode:screen}
  .theme-event.sunrise .theme-sun{animation:sun-rise-v2 1.8s cubic-bezier(.16,.72,.2,1) both}
  .theme-event.sunset{animation:theme-dim-v2 1.8s ease both;background:linear-gradient(180deg,rgba(10,34,69,.12),rgba(111,54,38,.42),rgba(1,6,15,.9))}
  .theme-event.sunset .theme-horizon{background:radial-gradient(circle at 18% 70%,rgba(255,165,73,.58),rgba(86,49,45,.4) 25%,rgba(3,10,23,.75) 68%)}
  .theme-event.sunset .theme-sun{animation:sun-set-v2 1.8s cubic-bezier(.4,0,.78,.34) both}
  @keyframes theme-reveal-v2{0%,100%{opacity:0}18%{opacity:.5}42%,66%{opacity:1}82%{opacity:.42}}
  @keyframes theme-dim-v2{0%,100%{opacity:0}14%{opacity:.34}42%,72%{opacity:1}86%{opacity:.45}}
  @keyframes sun-rise-v2{0%{bottom:-130px;transform:scale(.62)}58%{bottom:48%;transform:scale(1.08)}100%{bottom:77%;transform:scale(.78)}}
  @keyframes sun-set-v2{0%{bottom:76%;transform:scale(.78)}62%{bottom:10%;transform:scale(1.08)}100%{bottom:-140px;transform:scale(.58)}}
  .stage img{transition:opacity .68s ease,transform .68s ease;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 80%,rgba(0,0,0,.82) 84%,transparent 91%);mask-image:radial-gradient(circle at 50% 50%,#000 0 80%,rgba(0,0,0,.82) 84%,transparent 91%);clip-path:inset(7% round 45%)}
  .stage{isolation:auto;background:transparent}
  .stage:before{display:none}
  .stage img{mix-blend-mode:screen;clip-path:none;transition:opacity .32s ease,transform .32s ease;-webkit-mask-image:radial-gradient(ellipse 58% 60% at 52% 49%,#000 0 70%,rgba(0,0,0,.88) 79%,transparent 91%);mask-image:radial-gradient(ellipse 58% 60% at 52% 49%,#000 0 70%,rgba(0,0,0,.88) 79%,transparent 91%)}
  .theme{width:142px;height:38px;padding:0 11px;border-color:rgba(32,145,235,.58);background:rgba(5,13,24,.76);box-shadow:inset 0 0 18px rgba(16,96,165,.1)}
  .theme span{font-size:10px;color:#dbe7ef;transition:color .3s,opacity .3s}
  .theme i{width:42px;height:22px;border:1px solid rgba(81,177,242,.45);background:linear-gradient(90deg,rgba(255,163,66,.28),rgba(18,78,139,.72));box-shadow:inset 0 0 12px rgba(0,0,0,.35)}
  .theme i:after{width:18px;height:18px;left:2px;top:1px;background:radial-gradient(circle,#fffbd7 0 20%,#ffd06a 48%,#ff982e 78%);box-shadow:0 0 9px #ffd06a,0 0 18px rgba(255,153,49,.65);transform:translateX(18px);transition:transform 1.4s cubic-bezier(.2,.75,.2,1),box-shadow .7s}
  .theme-to-light .theme i:after,html[data-theme="light"] .theme i:after{transform:translateX(0)}
  .theme-to-dark .theme i:after{transform:translateX(18px)}
  html[data-theme="light"] .theme{background:rgba(246,251,255,.82);border-color:rgba(31,129,191,.38)}
  html[data-theme="light"] .theme span{color:#203645}
  .theme-to-light .theme span:first-child,html[data-theme="light"] .theme span:first-child,.theme-to-dark .theme span:last-child,html:not([data-theme="light"]):not(.theme-to-light) .theme span:last-child{color:#fff;font-weight:800}
  .hero-sky .mountains{transition:filter 1.45s cubic-bezier(.2,.72,.2,1),opacity 1.45s ease}
  .hero-sky .sunset{z-index:2;left:18%;bottom:8%;width:64px;height:64px;transition:left 1.45s cubic-bezier(.2,.72,.2,1),bottom 1.45s cubic-bezier(.2,.72,.2,1),transform 1.45s ease,box-shadow 1.45s ease}
  .hero-sky .moon-orb{z-index:1;opacity:1;transition:opacity .85s ease .45s,transform 1.2s ease}
  .theme-to-light .hero-sky .mountains,html[data-theme="light"] .hero-sky .mountains{opacity:1;filter:brightness(1.5) saturate(.72) contrast(.86)}
  .theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:80%;bottom:70%;transform:scale(.9);box-shadow:0 0 44px #fff5ad,0 0 160px 68px rgba(255,226,135,.62)}
  .theme-to-light .hero-sky .moon-orb,html[data-theme="light"] .hero-sky .moon-orb{opacity:0;transform:translateY(-12px) scale(.78)}
  .theme-to-dark .hero-sky .mountains{opacity:.88;filter:brightness(.82) saturate(.88) contrast(1.08)}
  .theme-to-dark .hero-sky .sunset{left:18%;bottom:8%;transform:scale(1);box-shadow:0 0 30px #ffd46d,0 0 92px 36px rgba(255,124,42,.56)}
  .theme-to-dark .hero-sky .moon-orb{opacity:1;transform:none}
  .theme-event .theme-sun{opacity:0}
  .theme-event.sunrise,.theme-event.sunset{animation-duration:2s}
  .theme-event.sunrise{mix-blend-mode:screen;background:radial-gradient(circle at 72% 18%,rgba(255,250,205,.42),rgba(154,209,241,.2) 36%,transparent 72%)}
  .theme-event.sunset{background:linear-gradient(180deg,rgba(9,30,62,.08),rgba(74,50,48,.28),rgba(1,6,15,.86))}
  .theme-event.sunrise .theme-horizon{background:radial-gradient(circle at 50% 45%,rgba(255,248,205,.72),rgba(255,213,139,.34) 28%,rgba(139,199,234,.16) 54%,transparent 78%)}
  .feature-library,.feature:nth-child(4).feature-library{direction:ltr;grid-template-columns:minmax(142px,.72fr) minmax(230px,1.22fr) minmax(112px,.58fr);align-items:center;gap:10px;padding:20px 18px 0}
  .feature-library .feature-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:28px 12px}
  .feature-library .feature-icon{display:none}
  .library-screen{position:relative;margin:0;overflow:hidden;background:#05090e;border:4px solid #17293a;box-shadow:0 18px 42px rgba(0,0,0,.46)}
  .library-screen img,.feature:nth-child(4) .library-screen img{position:relative;inset:auto;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:top;border-radius:inherit;box-shadow:none}
  .library-primary{justify-self:start;align-self:end;width:148px;height:254px;border-radius:24px 24px 0 0}
  .library-search{justify-self:end;width:116px;height:212px;border-radius:21px 21px 0 0;opacity:.72;filter:blur(1.8px) brightness(.68) saturate(.75);transform:translate(10px,18px) scale(.98);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%)}
  .feature-library:after{content:"";position:absolute;z-index:1;right:-5%;top:0;width:34%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(5,15,27,.24))}
  html[data-theme="light"] .feature-library:after{background:linear-gradient(90deg,transparent,rgba(107,136,157,.2))}
  .feature:first-child{grid-template-columns:minmax(250px,1fr) minmax(250px,.95fr)}
  .dashboard-crop{margin-left:-52px;overflow:visible}
  .dashboard-crop:before{transform:translateX(-18px);background:linear-gradient(90deg,#071322 0,rgba(7,19,34,.58) 20%,transparent 51%)}
  .dashboard-crop img{width:285px;right:-5%;top:-22px}
  .adapt-technique-crop img{width:218px;top:6px;left:2%;right:auto}
  .adapt-technique-crop:before{background:linear-gradient(270deg,#435f74 0,rgba(67,95,116,.28) 24%,transparent 54%)}
  html[data-theme="light"] .dashboard-crop:before{background:linear-gradient(90deg,#c4d9e7 0,rgba(196,217,231,.55) 20%,transparent 51%)}
  .feature-library,.feature:nth-child(4).feature-library{display:block;min-height:310px;padding:0;direction:ltr}
  .feature-library .feature-copy{height:100%;min-height:310px;padding:34px 142px 30px 204px;justify-content:center}
  .library-screen{position:absolute;bottom:0;z-index:1}
  .library-primary{left:15px;width:194px;height:292px;border-radius:27px 27px 0 0}
  .library-search{right:-9px;width:170px;height:258px;border-radius:24px 24px 0 0;opacity:.88;filter:blur(.7px) brightness(.84) saturate(.9);transform:translate(0,13px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%);mask-image:linear-gradient(90deg,transparent 0,#000 16%)}
  .feature-library .feature-copy{position:relative;z-index:2}
  .feature-library:after{z-index:1;width:31%;background:linear-gradient(90deg,transparent,rgba(5,15,27,.12))}
  .rutube-mark{position:absolute;z-index:4;right:9px;top:10px;padding:4px 7px;border-radius:7px;background:linear-gradient(135deg,#00efcf,#8149ff 58%,#ff4f8b);color:#fff;font-size:9px;font-weight:900;letter-spacing:.06em;line-height:1;box-shadow:0 5px 18px rgba(0,0,0,.5)}
  .flow-visual figure,.flow-visual li:nth-child(n) figure{margin-top:0}
  .flow-visual h3,.flow-visual li:nth-child(n) h3{min-height:42px;display:flex;align-items:flex-start;justify-content:center}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .stage img{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0 77%,rgba(0,0,0,.56) 82%,transparent 88%);mask-image:radial-gradient(circle at 50% 50%,#000 0 77%,rgba(0,0,0,.56) 82%,transparent 88%);filter:contrast(1.08) saturate(1.12)}
  .theme-event{z-index:499}
  .theme-event .theme-sun{opacity:1;width:118px;height:118px;left:12%;bottom:-145px;box-shadow:0 0 44px #ffd56b,0 0 145px 58px rgba(255,151,55,.72)}
  .theme-event.sunrise{animation:theme-page-light 2s ease both}
  .theme-event.sunrise .theme-sun{animation:sun-page-rise 2s cubic-bezier(.18,.72,.18,1) both}
  .theme-event.sunset{animation:theme-page-dark 2s ease both}
  .theme-event.sunset .theme-sun{animation:sun-page-set 2s cubic-bezier(.35,0,.72,.3) both}
  @keyframes sun-page-rise{0%{left:10%;bottom:-145px;transform:scale(.58);opacity:.3}28%{left:20%;bottom:12%;transform:scale(1.05);opacity:1}72%{left:69%;bottom:64%;transform:scale(.9);opacity:1}100%{left:82%;bottom:78%;transform:scale(.72);opacity:.82}}
  @keyframes sun-page-set{0%{left:82%;bottom:78%;transform:scale(.72);opacity:.82}34%{left:67%;bottom:62%;transform:scale(.92);opacity:1}75%{left:19%;bottom:10%;transform:scale(1.08);opacity:1}100%{left:10%;bottom:-145px;transform:scale(.58);opacity:.28}}
  @keyframes theme-page-light{0%,100%{opacity:0}16%{opacity:.45}46%,76%{opacity:1}90%{opacity:.35}}
  @keyframes theme-page-dark{0%,100%{opacity:0}15%{opacity:.35}44%,78%{opacity:1}91%{opacity:.42}}
  .feature-library,.feature:nth-child(4).feature-library{min-height:330px}
  .feature-library .feature-copy{min-height:330px;padding:34px 30px 30px 242px}
  .feature-library:before{content:"";position:absolute;z-index:2;left:184px;top:0;width:92px;height:100%;pointer-events:none;background:linear-gradient(90deg,rgba(5,14,25,.9),rgba(5,14,25,.42) 42%,transparent);filter:blur(5px)}
  .library-primary{left:12px;width:224px;height:320px}
  .library-search{right:-24px;width:214px;height:294px;z-index:1;opacity:.92;filter:blur(.38px) brightness(.9) saturate(.96);-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.38) 17%,#000 36%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.38) 17%,#000 36%)}
  .feature-library:after{right:-7%;width:38%;background:linear-gradient(90deg,transparent,rgba(5,15,27,.08))}
  html[data-theme="light"] .feature-library:before{background:linear-gradient(90deg,rgba(198,216,230,.88),rgba(198,216,230,.4) 42%,transparent)}
  .stage img{clip-path:inset(11%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%),linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .flow-visual li,.flow-visual li:nth-child(n){display:flex;flex-direction:column;align-items:center}
  .flow-visual h3,.flow-visual li:nth-child(n) h3{order:1;min-height:48px;margin:0 0 12px;align-items:flex-end}
  .flow-visual figure,.flow-visual li:nth-child(n) figure{order:2;margin:0 auto 18px;cursor:default;transform-origin:center center;transition:transform .42s cubic-bezier(.2,.75,.2,1),box-shadow .42s ease,filter .42s ease}
  .flow-visual p,.flow-visual li:nth-child(n) p{order:3}
  .flow-visual figure:hover{z-index:20;transform:translateY(-8px) scale(1.14);filter:brightness(1.06);box-shadow:0 34px 72px rgba(0,0,0,.62),0 0 0 1px rgba(62,181,240,.48),0 0 34px rgba(25,148,232,.22)}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .hero{background:#020711}
  .hero-sky{background:linear-gradient(105deg,#241208 0%,#081522 42%,#020817 100%);transition:background 1.45s ease}
  .hero-sky .night{left:32%;opacity:.78}
  .stage{isolation:isolate;overflow:visible;transform:translateX(1%)}
  .stage img.hero-integrated{display:block;inset:50% auto auto 48%;width:min(1120px,100vw);height:auto;max-width:none;object-fit:contain;opacity:1;mix-blend-mode:normal;clip-path:none;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 24px 48px rgba(0,0,0,.34)) saturate(1.04);transform:translate(-50%,-50%);animation:hero-integrated-breathe 4.2s ease-in-out infinite}
  .stage img.hero-integrated.is-on{opacity:1;transform:translate(-50%,-50%)}
  .stage .circuit{z-index:4;animation:circuit-current 1.7s ease-in-out infinite}
  .stage .circuit-b{animation-delay:.55s}
  .pulse-line{background-size:220% 100%;animation:pulse-current 1.65s linear infinite}
  .pulse-line span{animation:pulse-wave 1.65s ease-in-out infinite}
  .pulse-line i{animation:pulse-node 1.65s ease-in-out infinite}
  @keyframes hero-integrated-breathe{0%,100%{filter:drop-shadow(0 24px 48px rgba(0,0,0,.34)) saturate(1.02)}50%{filter:drop-shadow(0 28px 62px rgba(0,123,255,.28)) saturate(1.1)}}
  @keyframes circuit-current{0%,100%{opacity:.42;filter:brightness(.8)}48%{opacity:1;filter:brightness(1.5)}}
  @keyframes pulse-current{0%{background-position:110% 0}100%{background-position:-110% 0}}
  @keyframes pulse-wave{0%,100%{opacity:.58;filter:drop-shadow(0 0 5px #0af)}50%{opacity:1;filter:drop-shadow(0 0 14px #45d7ff)}}
  @keyframes pulse-node{0%,100%{transform:scale(.82);box-shadow:0 0 0 7px rgba(21,164,255,.16),0 0 20px #0af}50%{transform:scale(1.14);box-shadow:0 0 0 13px rgba(21,164,255,.22),0 0 0 25px rgba(21,164,255,.08),0 0 40px #55ddff}}
  html[data-theme="light"] .hero-sky{background:linear-gradient(105deg,#fff0d4 0%,#c9e2ef 42%,#e9f6ff 100%)}
  html[data-theme="light"] .hero-sky .night{opacity:.1}
  html[data-theme="light"] .hero-sky .stars{opacity:.08}
  html[data-theme="light"] .stage img.hero-integrated{filter:drop-shadow(0 25px 50px rgba(37,88,126,.22)) brightness(1.08) saturate(.9)}
  html[data-theme="light"] .pulse-line{opacity:.72}
  .stage img.hero-integrated{width:min(980px,90vw);left:55%}
  .hero-sky .moon-orb{inset:62px 1.4% auto auto;width:62px;height:62px}
  .theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{left:92%;bottom:82%;transform:scale(.84)}
  .pulse-line{left:50%}
  .feature:nth-child(3) .list-crop img{width:236px;left:2%;top:4px}
  .feature-library .feature-copy{padding-right:118px}
  .library-search{right:-30px;filter:blur(.72px) brightness(.84) saturate(.9);-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 34%,#000 66%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 34%,#000 66%)}
  .flow-visual h3,.flow-visual li:nth-child(n) h3{white-space:nowrap;font-size:clamp(11px,1.25vw,14px);min-height:34px}
  .form button:disabled{opacity:.42;filter:grayscale(.55);cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .flow-visual figure,.flow-visual li:nth-child(n) figure{cursor:zoom-in}
  .screen-preview{cursor:zoom-out}
  .screen-preview::backdrop{background:rgba(0,4,10,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .app-showcase{padding-top:24px;min-height:630px}
  .app-grid{min-height:600px;align-items:start;padding-top:38px}
  .price-shell{ --ring-pro-a:#0d6fa5; --ring-pro-b:#123d72; --ring-coach-a:#08788e; --ring-coach-b:#123c65; --ring-1-a:#0c667d; --ring-1-b:#103356; --ring-3-a:#2055a0; --ring-3-b:#142f69; --ring-12-a:#087d78; --ring-12-b:#0d425c; --ring-edge:rgba(74,201,255,.65); --ring-copy:#f4f9fc; --ring-muted:#b9cbd7; --ring-saving:#62ef91; }
  html[data-theme="light"] .price-shell{ --ring-pro-a:#d7effa; --ring-pro-b:#9cc6e3; --ring-coach-a:#d5f1f2; --ring-coach-b:#9ccfd7; --ring-1-a:#d9eef4; --ring-1-b:#a7cddd; --ring-3-a:#dce7fb; --ring-3-b:#aebfe9; --ring-12-a:#d6f0eb; --ring-12-b:#a1d4cb; --ring-edge:rgba(21,126,184,.58); --ring-copy:#09243b; --ring-muted:#405c70; --ring-saving:#087c52; }
  .price-copy{max-width:none}
  .price-copy h2{max-width:none;text-wrap:balance}
  .price-copy>p:last-child{max-width:920px}
  .pricing-note{margin:4px auto 0;max-width:900px;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}
  .pricing-compact{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.68fr) minmax(0,1.16fr) minmax(0,1.08fr); gap:14px; margin-top:28px; }
  .compact-price-card{ position:relative; min-width:0; min-height:318px; overflow:hidden; border:1px solid rgba(116,182,228,.2); border-radius:22px; background:linear-gradient(150deg,rgba(15,31,49,.96),rgba(5,14,25,.98)); box-shadow:inset 0 1px rgba(255,255,255,.04),0 16px 34px rgba(0,0,0,.24); transition:transform 200ms ease-out,border-color 200ms ease-out,box-shadow 200ms ease-out; }
  .compact-price-card:hover{ transform:translateY(-4px); border-color:rgba(51,181,255,.48); box-shadow:inset 0 1px rgba(255,255,255,.06),0 20px 42px rgba(0,0,0,.3),0 0 24px rgba(25,143,221,.12); }
  .compact-pro-card{padding:22px;background:radial-gradient(circle at 15% 0,rgba(22,143,235,.17),transparent 46%),linear-gradient(150deg,rgba(14,31,50,.98),rgba(5,14,25,.99))}
  .compact-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .compact-card-head h3,
.compact-chart-card h3{margin:0;font-size:18px;line-height:1.15}
  .compact-card-head p{margin:5px 0 0;color:#2aaeff;font-size:11px;font-weight:750}
  .term-switch{display:flex;flex:0 0 auto;gap:3px;padding:3px;border:1px solid rgba(74,173,233,.28);border-radius:12px;background:rgba(1,10,19,.46)}
  .term-switch button{min-width:34px;height:28px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:#91a9b9;font:800 10px/1 inherit;cursor:pointer;transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}
  .term-switch button:hover:not(:disabled){color:#fff;background:rgba(25,150,232,.18)}
  .term-switch button.is-on{background:linear-gradient(135deg,#10a6ef,#1766ee);color:#fff;box-shadow:0 4px 15px rgba(16,137,236,.3)}
  .term-switch button:focus-visible{outline:2px solid #65d9ff;outline-offset:2px}
  .term-switch button:disabled{opacity:.35;cursor:not-allowed}
  .compact-main-price{display:flex;align-items:baseline;gap:7px;margin:24px 0 0}
  .compact-main-price strong{font-size:clamp(30px,2.6vw,38px);line-height:1;letter-spacing:-.045em}
  .compact-main-price span{color:#8fa7b7;font-size:10px}
  .compact-effective{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:13px 0 0;padding-bottom:13px;border-bottom:1px solid rgba(116,182,228,.13);color:#8fa7b7;font-size:10px}
  .compact-effective strong{color:#dceaf2;font-size:12px;white-space:nowrap}
  .compact-benefits{display:grid;gap:7px;margin:16px 0 0;padding:0;list-style:none;color:#bfced8;font-size:11px;line-height:1.25}
  .compact-benefits li{position:relative;padding-left:17px}
  .compact-benefits-positive li:before,.compact-benefits-negative li:before{position:absolute;left:0;top:0;font-weight:900}
  .compact-benefits-positive li:before{content:"✓";color:#1faeff}
  .compact-benefits-negative li:before{content:"×";color:#708493}
  
  
  
  .compact-saving-period{margin-top:8px;color:#9bb0be;font-size:11px}
  .compact-saving-average{display:grid;gap:6px;width:100%;margin-top:25px;padding-top:20px;border-top:1px solid rgba(124,189,230,.15);color:#8fa6b5;font-size:10px}
  .compact-saving-average strong{color:#66df3e;font-size:20px}
  .compact-coach-card{padding:22px;background:radial-gradient(circle at 82% 32%,rgba(25,124,196,.2),transparent 48%),linear-gradient(150deg,#101f30,#07121e)}
  
  .compact-coach-price{display:block;margin-top:24px;font-size:clamp(25px,2.2vw,32px);line-height:1;letter-spacing:-.035em}
  .compact-coach-card .compact-benefits{margin-top:24px}
  .compact-trainer{position:absolute;z-index:1;right:-3%;bottom:-3%;width:47%;height:90%;object-fit:contain;object-position:right bottom;filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));pointer-events:none}
  .compact-coach-card:after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,transparent 46%,rgba(7,18,30,.12) 63%,rgba(7,18,30,.05));pointer-events:none}
  .compact-chart-card{padding:22px;background:linear-gradient(150deg,rgba(18,37,57,.98),rgba(5,15,26,.99))}
  .compact-chart-period{margin:5px 0 0;color:#8fa7b7;font-size:11px}
  .compact-chart-legend{display:grid;gap:6px;margin-top:14px;color:#aebfca;font-size:10px}
  .compact-chart-legend>span{display:flex;align-items:center;gap:4px;min-width:0}
  .compact-chart-legend i{display:inline-block;width:13px;height:8px;margin-right:3px;border-radius:3px}
  .legend-trainer{background:#87939d}
  .legend-pro{background:#138fff;box-shadow:0 0 9px rgba(19,143,255,.4)}
  
  .compact-bar{display:block;width:48px;border-radius:7px 7px 0 0;transition:height 220ms ease-out}
  .compact-bar-trainer{height:100%;background:linear-gradient(#9ca7af,#626b72)}
  .compact-bar-pro{height:var(--bar-size,12%);background:linear-gradient(#16a7ff,#0870e6);box-shadow:0 0 18px rgba(19,143,255,.25)}
  .compact-chart-saving{position:absolute;z-index:2;right:17px;top:102px;display:grid;gap:4px;padding:9px 11px;border:1px solid rgba(104,230,69,.42);border-radius:10px;background:linear-gradient(145deg,rgba(32,105,36,.88),rgba(48,143,34,.94));color:#d9f6d1;font-size:9px}
  .compact-chart-saving strong{color:#8aff64;font-size:17px;white-space:nowrap}
  .pricing-note{position:relative;z-index:2;margin:17px 0 0;text-align:center;color:var(--muted);font-size:11px}
  html[data-theme="light"] .compact-price-card{border-color:rgba(23,100,151,.2);background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(220,234,244,.96));box-shadow:inset 0 1px #fff,0 16px 32px rgba(48,78,100,.13);color:#0b1b28}
  html[data-theme="light"] .compact-pro-card{background:radial-gradient(circle at 15% 0,rgba(44,161,230,.14),transparent 46%),linear-gradient(150deg,#fff,#e3eff7)}
  
  html[data-theme="light"] .compact-coach-card{background:radial-gradient(circle at 82% 32%,rgba(36,146,218,.2),transparent 50%),linear-gradient(150deg,#f8fcff,#dceaf3)}
  html[data-theme="light"] .compact-chart-card{background:linear-gradient(150deg,#f7fbfe,#dbeaf4)}
  html[data-theme="light"] .compact-card-head p{color:#087cc7}
  html[data-theme="light"] .term-switch{background:rgba(255,255,255,.66);border-color:rgba(21,112,171,.24)}
  html[data-theme="light"] .term-switch button{color:#486273}
  html[data-theme="light"] .compact-effective,html[data-theme="light"] .compact-main-price span,html[data-theme="light"] .compact-saving-period,html[data-theme="light"] .compact-saving-average,html[data-theme="light"] .compact-chart-period{color:#526b7b}
  html[data-theme="light"] .compact-effective strong{color:#153144}
  html[data-theme="light"] .compact-benefits{color:#344f60}
  html[data-theme="light"] .compact-coach-card:after{background:linear-gradient(90deg,transparent 48%,rgba(222,237,246,.08))}
  html[data-theme="light"] .compact-chart-legend{color:#405968}
  
  .hero-sky .stars{display:none;background:none}
  .hero-sky .sunset{ left:-15%; bottom:-25%; transform:scale(1); transition:left 2s cubic-bezier(.2,.72,.18,1),bottom 2s cubic-bezier(.2,.72,.18,1),transform 2s cubic-bezier(.2,.72,.18,1),opacity .7s ease; }
  html.theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{left:92%;bottom:82%;transform:scale(.84)}
  html.theme-to-dark .hero-sky .sunset{left:-15%;bottom:-25%;transform:scale(1)}
  .hero-sky,.hero,.top,.how,.pricing,.price-shell,.faq,.contact,.foot{ transition:background-color .72s ease,background .72s ease,color .62s ease,border-color .62s ease,box-shadow .62s ease; }
  html.theme-switching body:after{ content:""; position:fixed; inset:0; z-index:498; pointer-events:none; opacity:0; background:radial-gradient(circle at 72% 18%,rgba(255,238,178,.68),rgba(255,176,78,.2) 31%,transparent 66%); animation:theme-illumination 2s ease-in-out both; }
  html.theme-to-dark body:after{background:radial-gradient(circle at 72% 18%,rgba(121,183,233,.2),rgba(20,48,78,.26) 42%,rgba(1,5,12,.28) 74%)}
  @keyframes theme-illumination{0%,100%{opacity:0}38%,62%{opacity:.72}}
  .theme-event{visibility:hidden}
  .theme-event.sunrise,.theme-event.sunset{visibility:visible}
  .how.block{padding:56px 0 62px}
  .how .section-head{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px 24px; max-width:1180px; margin:0 auto 32px; padding-top:0; text-align:left; }
  .how .section-head .kicker{grid-column:1;grid-row:1;justify-self:start;margin:0}
  .how .section-head h2{grid-column:1/-1;grid-row:2;margin:0;text-align:center}
  .how .section-head .btn-video{ position:static; grid-column:2; grid-row:1; width:auto; height:36px; margin:0; padding:0 12px; border-radius:11px; font-size:11px; }
  .how .flow-visual{padding-top:2px;padding-bottom:12px}
  html[data-theme="light"] .top{color:#0a1b29}
  html[data-theme="light"] .top:not(.is-on), html[data-theme="light"] .top.is-on{background:rgba(246,250,253,.88);border-color:rgba(18,79,118,.14);box-shadow:0 10px 34px rgba(42,71,91,.12);backdrop-filter:blur(22px)}
  html[data-theme="light"] .top .brand, html[data-theme="light"] .top .menu a, html[data-theme="light"] .top .lang, html[data-theme="light"] .top .lang button, html[data-theme="light"] .top .lang button.is-on{color:#102535}
  html[data-theme="light"] .top .menu a:hover{color:#006fb8}
  html[data-theme="light"] .top .theme{background:rgba(255,255,255,.9);color:#153244;border-color:rgba(19,105,162,.32)}
  html[data-theme="light"] .hero .eyebrow, html[data-theme="light"] .how .kicker, html[data-theme="light"] .pricing .kicker, html[data-theme="light"] .faq .kicker{background:rgba(255,255,255,.68);border-color:rgba(20,84,126,.24);color:#17364a}
  html[data-theme="light"] .hero h1{color:#0a1722;text-shadow:0 2px 18px rgba(255,255,255,.7)}
  html[data-theme="light"] .hero .lead{color:#314b5c}
  html[data-theme="light"] .how .flow-visual h3, html[data-theme="light"] .faq h2, html[data-theme="light"] .faq summary{color:#102536}
  html[data-theme="light"] .how .flow-visual p, html[data-theme="light"] .faq details p{color:#455f70}
  .feature:first-child .dashboard-crop img{top:-48px}
  .flow-visual figure,.flow-visual li:nth-child(n) figure{ transform:translate3d(0,0,0) scale(1); transform-origin:center center; backface-visibility:hidden; will-change:transform; transition:transform .62s cubic-bezier(.22,.75,.2,1),box-shadow .62s ease,filter .62s ease; }
  .screen-preview{display:flex;flex-direction:column;align-items:center;gap:10px}
  .screen-preview:not([open]){display:none}
  .screen-preview p{order:1;margin:2px 46px 0;text-align:center;font-size:18px;line-height:1.25}
  .screen-preview img{order:2}
  .term-control{display:grid;flex:0 0 auto;justify-items:end;gap:5px}
  .term-caption{color:#9bb0be;font-size:9px;font-weight:750;line-height:1;text-transform:uppercase;letter-spacing:.08em}
  .term-switch button{min-width:28px;padding-inline:5px}
  html[data-theme="light"] .term-caption{color:#526b7b}
  .google-play-soon{ display:inline-flex; align-items:center; gap:10px; min-height:46px; margin-top:24px; padding:0 18px; border:1px solid rgba(118,177,216,.28); border-radius:12px; background:rgba(4,13,23,.58); color:#c8d5de; font-weight:750; cursor:not-allowed; opacity:.72; }
  .play-market-icon{width:22px;height:24px;clip-path:polygon(0 0,100% 50%,0 100%);background:conic-gradient(from 28deg at 36% 50%,#ffd24a 0 24%,#f64d55 0 49%,#3b82f6 0 74%,#38d990 0);filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
  main .btn, main .feature, main .compact-price-card, main .flow-visual figure, main .phone, main .faq-list details, main .contact-shell, main .form input, main .form select, main .form textarea, main .google-play-soon{ transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .48s ease,border-color .48s ease,filter .48s ease,background-color .72s ease; }
  html[data-theme="light"] main .btn:not(:disabled):hover, html[data-theme="light"] main .feature:hover, html[data-theme="light"] main .compact-price-card:hover, html[data-theme="light"] main .phone:hover, html[data-theme="light"] main .faq-list details:hover, html[data-theme="light"] main .contact-shell:hover{ border-color:rgba(0,126,220,.8); box-shadow:0 18px 42px rgba(33,91,132,.22),0 0 0 2px rgba(0,142,235,.36),0 0 34px rgba(0,142,235,.28); }
  html[data-theme="light"] main .flow-visual figure:hover{ box-shadow:0 30px 72px rgba(30,79,112,.28),0 0 0 2px rgba(0,142,235,.55),0 0 38px rgba(0,142,235,.32); }
  .price-shell{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  .price-shell:before{display:none}
  .compact-coach-card{grid-column:1;grid-row:1}
  .compact-pro-card{grid-column:2;grid-row:1}
  .compact-chart-card{grid-column:3;grid-row:1}
  
  .pricing-compact{grid-template-columns:minmax(0,1.16fr) minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,.68fr)}
  .term-switch{gap:9px;padding:0;border:0;background:transparent;border-radius:0}
  .term-switch button{position:relative;min-width:auto;height:24px;padding:0 2px;border-radius:0;background:transparent;box-shadow:none;color:#839baa}
  .term-switch button.is-on{color:#20adff;background:transparent;box-shadow:none}
  .term-switch button.is-on:after{content:"";position:absolute;left:2px;right:2px;bottom:0;height:2px;border-radius:2px;background:#20adff;box-shadow:0 0 9px rgba(32,173,255,.72)}
  html[data-theme="light"] .term-switch{border:0;background:transparent}
  html[data-theme="light"] .term-switch button.is-on{color:#007ec8}
  html[data-theme="light"] .term-switch button.is-on:after{background:#008edc;box-shadow:0 0 10px rgba(0,142,220,.46)}
  .theme-event .theme-sun{display:none}
  .hero-sky .sunset{ z-index:3;left:18%;bottom:8%;width:64px;height:64px;opacity:1; transition:left 2s cubic-bezier(.18,.72,.18,1),bottom 2s cubic-bezier(.18,.72,.18,1),transform 2s ease,box-shadow 2s ease; }
  .hero-sky .moon-orb{z-index:2;right:1.2%;top:54px;opacity:1;transform:none;transition:opacity .72s ease .65s,transform .9s ease .55s}
  html.theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:91%;bottom:82%;transform:scale(.82)}
  html.theme-to-light .hero-sky .moon-orb,html[data-theme="light"] .hero-sky .moon-orb{opacity:0;transform:scale(.72)}
  html.theme-to-dark .hero-sky .sunset{left:18%;bottom:8%;transform:scale(1)}
  html.theme-to-dark .hero-sky .moon-orb{opacity:1;transform:none;transition-delay:1.05s}
  .theme-event{background:transparent;mix-blend-mode:normal}
  .theme-event .theme-horizon{inset:0;filter:none;opacity:0}
  .theme-event.sunrise .theme-horizon{background:radial-gradient(circle at 72% 16%,rgba(255,244,193,.42),rgba(255,205,120,.18) 34%,rgba(194,225,244,.16) 58%,transparent 82%);animation:site-light-wash 2s ease both}
  .theme-event.sunset .theme-horizon{background:radial-gradient(circle at 72% 16%,rgba(149,195,228,.18),rgba(42,67,92,.24) 46%,rgba(1,6,14,.46) 82%);animation:site-dark-wash 2s ease both}
  @keyframes site-light-wash{0%{opacity:0}38%{opacity:.5}78%{opacity:.28}100%{opacity:0}}
  @keyframes site-dark-wash{0%{opacity:0}42%{opacity:.36}82%{opacity:.24}100%{opacity:0}}
  body,.features,.feature,.how,.pricing,.app-showcase,.faq,.contact,.contact-shell,.foot,.compact-price-card{ transition:background-color 1.02s ease,background 1.02s ease,color 1.02s ease,border-color 1.02s ease,box-shadow 1.02s ease; }
  html[data-theme="light"] .app-showcase{background:linear-gradient(110deg,#fff0df 0,#eaf3f8 40%,#d8ebf7 100%)}
  html[data-theme="light"] .app-bg{background:radial-gradient(circle at 7% 61%,rgba(255,178,91,.52) 0 2%,rgba(255,139,55,.22) 12%,transparent 32%),radial-gradient(circle at 88% 40%,rgba(38,139,222,.2),transparent 44%),linear-gradient(156deg,transparent 48%,rgba(67,142,201,.13) 49%,transparent 68%)}
  html[data-theme="light"] .app-copy h2{color:#10202d;text-shadow:0 2px 18px rgba(255,255,255,.72)}
  html[data-theme="light"] .app-copy>p:not(.eyebrow){color:#354e5e}
  html[data-theme="light"] .app-copy .eyebrow{color:#17364a;background:rgba(255,255,255,.62);border-color:rgba(20,84,126,.24)}
  html[data-theme="light"] .google-play-soon{background:rgba(255,255,255,.7);border-color:rgba(26,107,161,.28);color:#3c5565}
  html[data-theme="light"] .foot{background:#e5eef5;border-color:rgba(20,77,113,.16);color:#132b3b}
  html[data-theme="light"] .foot .brand,html[data-theme="light"] .foot-grid h3{color:#102737}
  html[data-theme="light"] .foot-grid>div>a:not(.brand){color:#38576b}
  html[data-theme="light"] .foot-brand p,html[data-theme="light"] .foot-end{color:#536f80}
  html[data-theme="light"] .foot-end{border-color:rgba(20,77,113,.16)}
  html[data-theme="light"] .hero-sky:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(235,244,249,.5) 0%,rgba(229,241,248,.34) 38%,transparent 62%)}
  .hero-cta{flex-direction:column;align-items:stretch;gap:11px;width:min(250px,100%)}
  .hero-cta .btn{width:100%;min-width:0}
  .hero-sky .sunset{ z-index:3; left:18%; bottom:-9%; width:72px; height:72px; opacity:0; border-radius:50%; background:radial-gradient(circle,rgba(255,255,232,.98) 0 10%,rgba(255,220,112,.94) 23%,rgba(255,157,57,.66) 43%,rgba(255,132,42,.2) 57%,transparent 73%); filter:blur(.35px); box-shadow:0 0 34px rgba(255,214,111,.9),0 0 105px 42px rgba(255,161,64,.36); transition:left 2s cubic-bezier(.18,.72,.18,1),bottom 2s cubic-bezier(.18,.72,.18,1),opacity .72s ease,transform 2s ease,box-shadow 2s ease; }
  .hero-sky .sunset:after{ content:""; position:absolute; inset:-36px; border-radius:50%; background:repeating-conic-gradient(from 0deg,rgba(255,214,113,.18) 0 3deg,transparent 3deg 15deg); filter:blur(8px); opacity:.78; -webkit-mask-image:radial-gradient(circle,transparent 0 31%,#000 50%,transparent 74%); mask-image:radial-gradient(circle,transparent 0 31%,#000 50%,transparent 74%); }
  .hero-sky .moon-orb{ z-index:2; inset:92px 2% auto auto; width:68px; height:68px; opacity:1; border-radius:50%; background: radial-gradient(circle at 30% 31%,rgba(53,80,106,.42) 0 7%,transparent 8%), radial-gradient(circle at 64% 56%,rgba(47,72,98,.42) 0 10%,transparent 11%), radial-gradient(circle at 43% 72%,rgba(51,79,105,.34) 0 6%,transparent 7%), radial-gradient(circle at 37% 34%,rgba(235,247,252,.94),rgba(120,163,195,.74) 46%,rgba(45,76,107,.28) 67%,transparent 76%); filter:blur(.2px); box-shadow:0 0 24px rgba(168,213,241,.5),0 0 66px 22px rgba(71,133,181,.18); transform:none; transition:opacity .72s ease .55s,transform .9s ease .45s; }
  html.theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{left:calc(98% - 72px);bottom:calc(100% - 164px);opacity:1;transform:scale(.96);box-shadow:0 0 42px rgba(255,245,178,.94),0 0 125px 52px rgba(255,214,113,.42)}
  html.theme-to-dark .hero-sky .sunset{left:18%;bottom:-9%;opacity:0;transform:scale(.72)}
  html.theme-to-light .hero-sky .moon-orb, html[data-theme="light"] .hero-sky .moon-orb{opacity:0;transform:scale(.72)}
  html.theme-to-dark .hero-sky .moon-orb{opacity:1;transform:none;transition-delay:1.12s}
  .theme-event .theme-sun{display:none}
  html[data-theme="light"] .theme span:first-child, html.theme-to-light .theme span:first-child{color:#153244;opacity:1;text-shadow:none}
  html[data-theme="light"] .theme span:last-child, html.theme-to-light .theme span:last-child{color:#607786;opacity:.82}
  .phones,.phone,.phone img{transition:none}
  .contact-shell{border:0;border-radius:0;box-shadow:none}
  .faq-list details{ height:154px; overflow:hidden; transform:none; box-shadow:none; }
  .faq-list details p{ max-height:0; margin-top:0; overflow:hidden; opacity:0; transform:translateY(-10px); transition:max-height .42s cubic-bezier(.2,.75,.2,1),opacity .32s ease,transform .42s cubic-bezier(.2,.75,.2,1),margin-top .42s ease; }
  .faq-list details[open] p{max-height:82px;margin-top:12px;opacity:1;transform:none}
  .flow-viewport{position:relative;overflow:hidden;margin-inline:-18px;padding-inline:18px}
  .flow-viewport:before,.flow-viewport:after{ content:""; position:absolute; z-index:7; top:0; bottom:0; width:11%; pointer-events:none; opacity:0; transition:opacity .35s ease; backdrop-filter:blur(4px); }
  .flow-viewport:before{left:0;background:linear-gradient(90deg,var(--bg) 8%,rgba(2,8,18,.55) 56%,transparent)}
  .flow-viewport:after{right:0;background:linear-gradient(270deg,var(--bg) 8%,rgba(2,8,18,.55) 56%,transparent)}
  .flow-viewport.has-left:before,.flow-viewport.has-right:after{opacity:1}
  html[data-theme="light"] .flow-viewport:before{background:linear-gradient(90deg,#edf4f8 8%,rgba(237,244,248,.56) 56%,transparent)}
  html[data-theme="light"] .flow-viewport:after{background:linear-gradient(270deg,#edf4f8 8%,rgba(237,244,248,.56) 56%,transparent)}
  .flow.flow-visual{ display:flex; grid-template-columns:none; max-width:none; margin:0; gap:18px; overflow-x:auto; overflow-y:visible; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; padding:18px 8px 44px; }
  .flow.flow-visual::-webkit-scrollbar{display:none}
  .flow.flow-visual:before{display:none}
  .flow.flow-visual li{ display:flex; flex:0 0 calc((100% - 54px)/4.45); min-width:210px; padding:0 0 10px; text-align:center; }
  .flow.flow-visual h3{width:100%;min-height:48px;white-space:normal;font-size:16px}
  .flow.flow-visual p{width:100%;min-height:66px}
  .flow.flow-visual figure{flex:0 0 auto}
  .screen-preview{position:relative}
  .screen-preview-nav{ position:absolute; z-index:4; top:50%; width:46px; height:64px; border:1px solid rgba(70,190,255,.58); border-radius:14px; background:rgba(4,18,31,.82); color:#fff; font-size:38px; line-height:1; cursor:pointer; transform:translateY(-50%); box-shadow:0 0 24px rgba(19,157,236,.25); }
  .screen-preview-prev{left:-62px}
  .screen-preview-next{right:-62px}
  .theme{overflow:hidden}
  .theme i:after{ transition:transform .68s cubic-bezier(.2,.78,.18,1),box-shadow .68s ease; }
  .theme span{ font-weight:700; transition:color .68s ease,opacity .68s ease,text-shadow .68s ease; }
  html:not([data-theme="light"]) .theme span:first-child{color:#9fb1bf;opacity:.62}
  html:not([data-theme="light"]) .theme span:last-child{color:#fff;opacity:1}
  html[data-theme="light"] .theme span:first-child{color:#17364a;opacity:1}
  html[data-theme="light"] .theme span:last-child{color:#607786;opacity:.62}
  html.theme-to-light:not([data-theme="light"]) .theme i:after{transform:translateX(18px)}
  html.theme-to-dark[data-theme="light"] .theme i:after{transform:translateX(0)}
  html.theme-to-light:not([data-theme="light"]) .theme span:first-child{color:#9fb1bf;opacity:.62}
  html.theme-to-light:not([data-theme="light"]) .theme span:last-child{color:#fff;opacity:1}
  html.theme-to-dark[data-theme="light"] .theme span:first-child{color:#17364a;opacity:1}
  html.theme-to-dark[data-theme="light"] .theme span:last-child{color:#607786;opacity:.62}
  html.theme-switching .theme{pointer-events:none}
  .hero-sky .night{background:transparent;opacity:0}
  .hero-sky:after{content:none}
  html[data-theme="light"] .hero-sky:after{content:""}
  .hero-sky .moon-orb{transition:opacity .9s ease,transform .9s ease}
  html.theme-to-dark .hero-sky .moon-orb{ opacity:1; transform:none; transition-delay:1.78s; }
  html.theme-to-dark[data-theme="light"] .hero-sky .sunset{ left:18%; bottom:-9%; opacity:0; transform:scale(.72); transition-duration:2s; }
  .how.block{padding-top:36px;padding-bottom:24px}
  .how .section-head{margin-bottom:18px}
  .flow.flow-visual{padding-bottom:18px}
  .pricing{padding-top:24px;padding-bottom:26px}
  .price-shell{padding-top:26px;padding-bottom:22px}
  .pricing-compact{margin-bottom:0}
  .app-showcase{padding-top:18px;min-height:600px}
  .app-grid{min-height:565px}
  .faq.block{padding-top:30px;padding-bottom:28px}
  .contact.block{padding-top:20px;padding-bottom:0;background:#07111e}
  .contact-shell{background:transparent;overflow:visible}
  .contact-copy,.contact .form{background:transparent}
  .contact-copy{min-height:0;padding-top:32px;padding-bottom:30px}
  .contact .form{padding-top:30px;padding-bottom:30px}
  .foot{margin-top:0}
  html[data-theme="light"] .contact.block{background:#edf2f7}
  html[data-theme="light"] .contact-copy,html[data-theme="light"] .contact .form{background:transparent}
  .phones,.phone,.phone img{transition:none}
  body.preview-open{position:fixed;top:var(--preview-body-top);left:0;right:0;width:100%;overflow:hidden}
  .screen-preview[open]{animation:preview-dialog-in .42s cubic-bezier(.18,.78,.18,1) both}
  .screen-preview img,.screen-preview p{transition:opacity .19s ease,transform .19s ease,filter .19s ease}
  .screen-preview.preview-exit-next img,.screen-preview.preview-exit-next p{opacity:0;transform:translateX(-48px) scale(.97);filter:blur(3px)}
  .screen-preview.preview-exit-prev img,.screen-preview.preview-exit-prev p{opacity:0;transform:translateX(48px) scale(.97);filter:blur(3px)}
  .screen-preview.preview-enter-next img,.screen-preview.preview-enter-next p{animation:preview-enter-next .42s cubic-bezier(.18,.78,.18,1) both}
  .screen-preview.preview-enter-prev img,.screen-preview.preview-enter-prev p{animation:preview-enter-prev .42s cubic-bezier(.18,.78,.18,1) both}
  .screen-preview-nav{transition:transform .34s cubic-bezier(.2,.75,.2,1),box-shadow .34s ease,border-color .34s ease,background-color .34s ease}
  @keyframes preview-dialog-in{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes preview-enter-next{from{opacity:0;transform:translateX(48px) scale(.97);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  @keyframes preview-enter-prev{from{opacity:0;transform:translateX(-48px) scale(.97);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
  .faq-list details{height:142px}
  .faq-list details[open] p{max-height:76px}
  .pulse-line{display:none}
  .hero{border-bottom:0}
  .how,.contact{ position:relative; isolation:isolate; background: radial-gradient(circle at 7% 58%,rgba(255,140,62,.54) 0 1%,rgba(221,82,25,.22) 12%,transparent 33%), radial-gradient(circle at 92% 40%,rgba(21,120,235,.28),transparent 42%), linear-gradient(112deg,#2c140d 0%,#081421 39%,#041324 100%); }
  .contact.block{ background: radial-gradient(circle at 8% 54%,rgba(255,145,66,.62) 0 1%,rgba(226,86,29,.24) 13%,transparent 34%), radial-gradient(circle at 92% 36%,rgba(21,120,235,.26),transparent 42%), linear-gradient(112deg,#32170f 0%,#0b1621 39%,#041324 100%); }
  .how>*{position:relative;z-index:1}
  .pricing{ background:linear-gradient(180deg,#030812 0%,#071526 58%,#06101d 100%); }
  .faq{ background: radial-gradient(circle at 88% 14%,rgba(28,126,231,.16),transparent 34%), linear-gradient(180deg,#030812 0%,#071526 58%,#06101d 100%); }
  .contact-shell,.contact-copy,.contact .form{ border:0; box-shadow:none; background:transparent; }
  html[data-theme="light"] .how, html[data-theme="light"] .contact{ background: radial-gradient(circle at 7% 58%,rgba(255,165,86,.62) 0 1%,rgba(230,125,59,.24) 13%,transparent 34%), radial-gradient(circle at 92% 40%,rgba(57,139,220,.18),transparent 44%), linear-gradient(112deg,#fff0df 0%,#eaf3f8 41%,#d8ebf7 100%); }
  html[data-theme="light"] .contact.block{ background: radial-gradient(circle at 8% 54%,rgba(255,169,91,.66) 0 1%,rgba(231,129,63,.25) 13%,transparent 35%), radial-gradient(circle at 92% 36%,rgba(57,139,220,.18),transparent 44%), linear-gradient(112deg,#fff0df 0%,#eaf3f8 41%,#d8ebf7 100%); }
  html[data-theme="light"] .contact .kicker{ color:#173246; border-color:rgba(31,91,129,.28); background:rgba(255,255,255,.44); }
  html[data-theme="light"] .pricing, html[data-theme="light"] .faq{ background:linear-gradient(180deg,#edf5fa 0%,#dbe8f1 56%,#edf3f7 100%); }
  .pricing-title{display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap}
  .pricing-brand{display:inline-flex;white-space:nowrap}
  .pricing-brand .dot{color:var(--blue);text-shadow:0 0 26px rgba(0,153,255,.24)}
  .feature, .feature:hover, html[data-theme="light"] .feature, html[data-theme="light"] .feature:hover{ transform:none; filter:none; box-shadow:none; outline:0; transition:none; }
  main .feature, main .feature:hover, html[data-theme="light"] main .feature, html[data-theme="light"] main .feature:hover{ transform:none; filter:none; box-shadow:none; outline:0; transition:none; }
  .pricing-title{display:block;white-space:nowrap}
  .pricing-brand,.pricing-brand span{display:inline;white-space:nowrap}
  .phone{ border:0; padding:0; background:transparent; box-shadow:0 22px 46px rgba(0,0,0,.38); }
  .phone:before{display:none}
  .phone img{border-radius:34px}
  html.theme-toggle-light .theme i:after, html[data-theme="light"] .theme i:after{transform:translateX(0)}
  html.theme-toggle-dark .theme i:after, html:not([data-theme="light"]):not(.theme-toggle-light) .theme i:after{transform:translateX(18px)}
  html.theme-toggle-light .theme span:first-child{color:#fff;opacity:1}
  html.theme-toggle-light .theme span:last-child{color:#9fb1bf;opacity:.62}
  html.theme-toggle-dark .theme span:first-child{color:#607786;opacity:.62}
  html.theme-toggle-dark .theme span:last-child{color:#fff;opacity:1}
  .hero-sky{z-index:0}
  .hero-grid{z-index:3}
  .hero-sky .sunset{z-index:0;border:0;outline:0;filter:none}
  .hero-sky .sunset:after{opacity:.52;mix-blend-mode:screen}
  .hero-sky .moon-orb{z-index:1}
  .how.block{padding-bottom:0}
  .how .flow-viewport{margin-bottom:0}
  .flow.flow-visual{padding-bottom:2px}
  .app-showcase{padding-top:0}
  .app-grid{padding-top:8px;min-height:570px}
  .phones{pointer-events:none}
  .phones,.phone,.phone img{transition:none;animation:none}
  .faq-list details{height:150px}
  .faq-list details p{ font-size:12px; line-height:1.42; transition:max-height .78s cubic-bezier(.2,.72,.2,1),opacity .62s ease,transform .78s cubic-bezier(.2,.72,.2,1),margin-top .78s ease; }
  .faq-list details[open] p{max-height:88px;margin-top:8px}
  .pricing-compact{ margin-top:18px; align-items:stretch; }
  .compact-card-head h3,
.compact-chart-card h3{ font-size:18px; line-height:1.15; white-space:nowrap; }
  
  
  
  .compact-coach-price{ margin-top:20px; font-size:clamp(22px,1.75vw,27px); white-space:nowrap; }
  .compact-coach-card .compact-benefits{ width:62%; margin-top:18px; }
  .compact-pro-card .compact-benefits{ gap:5px; margin-top:12px; font-size:10.5px; line-height:1.2; }
  html[data-theme-target="light"] .theme i:after{ transform:translateX(0); }
  html[data-theme-target="dark"] .theme i:after{ transform:translateX(18px); }
  html:not([data-theme-target])[data-theme="light"] .theme i:after{ transform:translateX(0); }
  html:not([data-theme-target]):not([data-theme="light"]) .theme i:after{ transform:translateX(18px); }
  .hero-sky .moon-orb{ top:76px; right:0; }
  html.theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{ left:calc(100% - 70px); bottom:calc(100% - 148px); }
  .phone, .phone img{ border-radius:0; overflow:visible; }
  .faq-list details{ height:128px; padding:16px 0; }
  .faq-list summary{ font-size:16px; line-height:1.25; }
  .faq-list details p{ font-size:11.2px; line-height:1.34; margin-right:24px; }
  .faq-list details[open] p{ max-height:76px; margin-top:7px; }
  html.theme-switching[data-theme-target="light"] .theme i:after{ transform:translateX(0); }
  html.theme-switching[data-theme-target="dark"] .theme i:after{ transform:translateX(18px); }
  html.theme-switching[data-theme-target="light"] .theme span:first-child{ color:#17364a; opacity:1; }
  html.theme-switching[data-theme-target="light"] .theme span:last-child{ color:#607786; opacity:.62; }
  html.theme-switching[data-theme-target="dark"] .theme span:first-child{ color:#9fb1bf; opacity:.62; }
  html.theme-switching[data-theme-target="dark"] .theme span:last-child{ color:#fff; opacity:1; }
  .flow-viewport:before, .flow-viewport:after{ -webkit-backdrop-filter:none; backdrop-filter:none; filter:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%); }
  
  .phone, .phone img{ border-radius:18px; overflow:visible; }
  .flow-visual figure, .flow-visual li:nth-child(n) figure{ border:0; background:transparent; box-shadow:none; }
  .flow-visual figure:before, .flow-visual li:nth-child(n) figure:before{ display:none; }
  .phone{ border-radius:30px; overflow:hidden; }
  .phone img{ border-radius:30px; overflow:hidden; }
  
  
  @media (max-width:1180px){.wrap{width:min(calc(100% - 36px),var(--wrap))}.menu{gap:13px}.menu a{font-size:11px}.top-cta{display:none}.hero-grid{grid-template-columns:.8fr 1.2fr}.hero h1{font-size:55px}.feature{grid-template-columns:1fr 210px}.feature-copy{padding:32px}.feature-icon{display:none}.phone{width:215px;height:450px}.phone-1{left:0}.phone-2{left:24%}.phone-3{left:48%}.phone-4{left:72%} .feature-library,.feature:nth-child(4).feature-library{grid-template-columns:126px minmax(205px,1fr) 94px;padding-inline:14px;gap:7px}.library-primary{width:126px;height:232px}.library-search{width:94px;height:186px}.feature-library .feature-copy{padding-inline:10px} .feature:first-child{grid-template-columns:minmax(235px,1fr) minmax(225px,.92fr)}.dashboard-crop img{width:268px}.feature-library .feature-copy{padding-left:186px;padding-right:126px}.library-primary{width:178px}.library-search{width:153px} .feature-library .feature-copy{padding-left:220px;padding-right:26px}.library-primary{width:204px}.library-search{width:194px}.feature-library:before{left:168px} .stage img.hero-integrated{width:min(1040px,104vw);left:50%}}
  @media (max-width:900px){.top-inner{gap:18px}.menu{position:fixed;top:72px;left:18px;right:18px;display:none;flex-direction:column;align-items:stretch;padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(4,12,22,.96);box-shadow:var(--shadow)}.menu.open{display:flex}.menu a{font-size:15px;padding:8px}.burger{display:block}.hero{min-height:720px}.hero-grid{grid-template-columns:1fr;min-height:720px}.hero-copy{padding-top:125px;align-self:start}.hero h1{font-size:clamp(45px,8vw,62px);max-width:650px}.lead{max-width:500px}.stage{position:absolute;right:-180px;bottom:-90px;width:690px;height:620px;opacity:.6}.pulse-line{left:35%;bottom:55px}.feature-grid{grid-template-columns:1fr}.feature{min-height:240px}.feature:nth-child(3){grid-row:4}.flow{grid-template-columns:1fr;max-width:600px;margin:auto}.flow:before{top:0;bottom:0;left:31px;right:auto;width:1px;height:auto}.flow li{text-align:left;display:grid;grid-template-columns:64px 1fr;column-gap:20px;padding:0 0 28px}.flow li>b{left:31px;top:21px}.flow li>span{grid-row:1/3;grid-column:1;margin:0}.flow h3,.flow p{grid-column:2}.plans{grid-template-columns:1fr}.app-grid{grid-template-columns:1fr}.app-copy{padding-bottom:30px}.phones{width:900px;gap:35px}.contact-shell{grid-template-columns:1fr}.form{grid-template-columns:1fr}.form>label:nth-of-type(1),.form>label:nth-of-type(2){grid-column:1;grid-row:auto}.foot-grid{grid-template-columns:1.5fr repeat(2,1fr)}.foot-brand{grid-row:span 2} .flow-visual:before{left:52px;top:0}.flow-visual li{display:grid;grid-template-columns:104px 1fr;grid-template-rows:auto auto;gap:4px 18px;padding:14px 0}.flow-visual li>b{left:52px;top:6px}.flow-visual figure{grid-column:1;grid-row:1/3;width:94px;height:132px;margin:0}.flow-visual h3{grid-column:2;grid-row:1;margin-top:22px}.flow-visual p{grid-column:2;grid-row:2}.section-head .btn-video{width:100%;max-width:320px} .flow-visual{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-visual li,.flow-visual li:nth-child(n){display:block;padding:0 6px}.flow-visual figure,.flow-visual li:nth-child(n) figure{width:min(144px,100%);height:204px}.flow-visual li>b,.flow-visual li:nth-child(n)>b{left:50%;top:-8px} .wrap{width:min(calc(100% - 32px),var(--wrap))} .hero-copy{max-width:660px} .features .feature-copy{padding:34px clamp(28px,7vw,62px)} .app-showcase{min-height:0;padding:78px 0 48px} .app-grid{display:block;min-height:0} .app-copy{padding-bottom:32px} .phones{position:relative;left:auto;bottom:auto;width:100%;height:auto;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:10px 8px 26px;transform:none;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#168fe0 rgba(75,143,184,.14)} .phones .phone{position:relative;left:auto;bottom:auto;transform:none;flex:0 0 220px;width:220px;height:450px;scroll-snap-align:center} .phones::-webkit-scrollbar{height:7px}.phones::-webkit-scrollbar-track{background:rgba(75,143,184,.14);border-radius:99px}.phones::-webkit-scrollbar-thumb{background:#168fe0;border-radius:99px} .contact-shell{border-radius:28px;overflow:hidden} .hero-sky .mountains{inset:0;width:100%;opacity:.7;background-position:42% bottom;-webkit-mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%)}.hero-sky .sunset{left:12%}html[data-theme="light"] .hero-sky .sunset{left:10%} .theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:76%;bottom:72%} .feature-library,.feature:nth-child(4).feature-library{grid-template-columns:150px minmax(260px,1fr) 120px;padding-inline:clamp(24px,7vw,62px);gap:16px}.library-primary{width:150px;height:250px}.library-search{width:116px;height:210px} .feature:first-child{grid-template-columns:minmax(0,1fr) 280px}.dashboard-crop{margin-left:-34px}.dashboard-crop img{width:290px}.adapt-technique-crop img{width:220px;left:8%}.feature-library .feature-copy{padding-left:220px;padding-right:150px}.library-primary{left:32px;width:205px;height:296px}.library-search{right:18px;width:176px;height:262px} .feature-library .feature-copy{padding-left:238px;padding-right:40px}.library-primary{left:28px;width:220px}.library-search{right:8px;width:205px}.feature-library:before{left:194px}.how .section-head h2{white-space:normal}.flow-visual h3,.flow-visual li:nth-child(n) h3{min-height:44px} .stage img.hero-integrated{width:900px;left:50%;top:54%}.stage{right:-205px;bottom:-80px} .stage img.hero-integrated{width:min(900px,86vw);left:57%} .hero-sky .moon-orb{right:1%;top:54px} .theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:93%;bottom:84%} .feature:nth-child(3) .list-crop img{width:232px;left:1%;top:5px} .feature-library .feature-copy{padding-right:104px} .stage img.hero-integrated{width:820px;left:52%;top:54%} .hero-sky .moon-orb{right:12px;top:76px} .theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:89%;bottom:82%} .feature:nth-child(3) .list-crop img{width:220px;left:2%;top:8px} .feature-library .feature-copy{padding-right:122px}           .app-showcase{padding-top:18px}.app-grid{padding-top:28px}          .pricing-compact{grid-template-columns:repeat(2,minmax(0,1fr))} .compact-price-card{min-height:310px} .how.block{padding:48px 0 52px} .how .section-head{margin-bottom:28px} html[data-theme="light"] .menu{background:rgba(246,250,253,.97);border-color:rgba(18,79,118,.16)} .compact-coach-card{order:1}.compact-pro-card{order:2}.compact-chart-card{order:3} .compact-coach-card,
.compact-pro-card,
.compact-chart-card{grid-column:auto;grid-row:auto} .flow.flow-visual li{flex-basis:calc((100% - 36px)/2.55);min-width:230px} .hero-sky .moon-orb{top:82px;right:16px} html.theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:calc(100% - 88px);bottom:calc(100% - 160px)} .hero,.hero-grid{min-height:720px} .how.block,.pricing,.faq.block{padding-top:36px;padding-bottom:32px} .app-showcase{padding-top:28px} .contact-copy,.contact .form{padding-block:28px} .hero,.hero-grid{min-height:700px} .app-copy{padding-top:18px} .app-copy h2{white-space:normal;font-size:clamp(34px,7vw,46px)} .phones{margin-top:0} .hero,.hero-grid{height:auto;min-height:700px} .app-grid{padding-top:18px} .phones{margin-top:0}}
  @media (max-width:600px){.wrap{width:min(calc(100% - 28px),var(--wrap))}.top,.top-inner{height:64px}.brand{font-size:18px}.brand img{width:36px;height:36px}.tools{gap:7px}.lang{width:60px}.theme{width:62px;height:34px}.theme span{display:none}.hero{min-height:760px}.hero-grid{min-height:760px}.hero-copy{padding-top:106px;text-align:left}.eyebrow{font-size:9px}.hero h1{font-size:clamp(40px,12vw,48px);line-height:1.02;margin-top:18px}.lead{font-size:16px}.hero-cta{flex-direction:column;align-items:stretch;max-width:310px;gap:10px;margin-top:26px}.hero-cta .btn{min-width:0}.trust{flex-direction:column;gap:4px}.stage{width:600px;height:540px;right:-250px;bottom:-85px}.pulse-line{left:18%;right:0}.moon-orb{width:50px;height:50px;right:8%;top:90px}.feature{min-height:225px;grid-template-columns:1fr 145px}.feature-copy{padding:28px 18px}.feature h3{font-size:19px}.feature p{font-size:12px}.feature-visual img{width:170px;right:-22px}.feature:nth-child(3) .feature-visual img,.feature:nth-child(4) .feature-visual img{left:-22px}.block{padding:76px 0}.section-head h2,.price-copy h2,.faq h2,.contact h2{font-size:32px}.price-shell{width:100%;border-radius:0;padding:30px 18px}.compare{grid-template-columns:1fr}.yes,.no{grid-template-columns:1fr}.save-xl{font-size:42px}.app-showcase{padding-top:70px;min-height:730px}.app-grid{min-height:660px}.app-copy h2{font-size:42px}.phones{width:760px;height:430px;position:absolute;left:14px;bottom:-24px}.phone{width:220px;height:450px}.contact{padding-bottom:0}.contact-shell{width:100%;border-radius:0}.contact-copy{padding:38px 24px;min-height:350px}.form{padding:24px;display:grid}.form .two{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr;gap:28px}.foot-brand{grid-column:1/-1;grid-row:auto}.foot-end{flex-direction:column;gap:8px}.page{padding-top:105px}.legal h1,.page>.wrap>h1{font-size:38px}.legal dl{grid-template-columns:1fr}.legal dd{margin-bottom:12px} .hero h1{font-size:40px}.stage{right:-100px;opacity:.72} .feature{grid-template-columns:1fr 140px}.dashboard-crop img{width:220px;top:-32px;right:-26px}.progress-crop img{width:172px;top:-12px;right:-16px}.adapt-technique-crop img{width:190px;top:-18px;right:-32px}.theme-event .theme-sun{left:10%;width:78px;height:78px}.video-dialog{border-radius:18px}.video-dialog-head{height:54px;padding-inline:14px}.flow-visual li{grid-template-columns:92px 1fr;gap:4px 14px}.flow-visual figure{width:84px;height:120px}.flow-visual li>b{left:42px}.flow-visual:before{left:42px} .flow-visual{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px;padding-inline:0}.flow-visual li,.flow-visual li:nth-child(n){padding-inline:4px}.flow-visual figure,.flow-visual li:nth-child(n) figure{width:min(132px,100%);height:188px}.screen-preview{padding:8px;border-radius:22px}.screen-preview img{max-height:79vh;border-radius:17px}.screen-preview-close{right:-4px;top:-14px} .wrap{width:min(calc(100% - 22px),var(--wrap))} .block{padding-block:68px} .hero,.hero-grid{min-height:710px} .hero-copy{padding-top:98px} .hero h1{font-size:clamp(38px,11vw,46px)} .lead{font-size:15px;line-height:1.5} .stage{width:540px;height:500px;right:-190px;bottom:-72px} .price-shell{width:min(calc(100% - 18px),var(--wrap));padding:26px 18px;border-radius:24px}      .plans{gap:11px} .plan{padding:19px}  .feature{min-height:255px;grid-template-columns:minmax(0,1fr) 132px} .features .feature-copy{padding:27px 18px} .feature h3{font-size:19px} .feature p{font-size:12.5px;line-height:1.48} .feature-visual img{right:2%} .feature:nth-child(3) .feature-visual img,.feature:nth-child(4) .feature-visual img{left:2%} .exercise-duo{gap:3px;padding-inline:2px}.exercise-duo figure{width:61px;height:130px;border-width:2px;border-radius:13px}.exercise-duo figure img,.feature:nth-child(4) .exercise-duo figure img{border-radius:10px} .app-showcase{padding-top:66px} .app-copy h2{font-size:38px} .phones .phone{flex-basis:190px;width:190px;height:390px;border-radius:32px} .phone img{border-radius:23px} .contact-copy{padding:34px 22px;min-height:0} .form{padding:22px 18px} .foot-grid{gap:24px 18px} .hero-sky .mountains{opacity:.58;background-position:36% bottom}.hero-sky .sunset{width:52px;height:52px;left:10%;bottom:7%}.theme-event .theme-sun{left:10%;width:78px;height:78px}html[data-theme="light"] .hero-sky .sunset{bottom:70%} .theme{width:62px;height:34px;padding-inline:7px}.theme i{width:40px}.theme span{display:none}.theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:72%;bottom:74%} .feature-library,.feature:nth-child(4).feature-library{min-height:280px;grid-template-columns:88px minmax(0,1fr) 72px;gap:8px;padding:18px 8px 0}.library-primary{width:88px;height:184px;border-width:3px;border-radius:17px 17px 0 0}.library-search{width:72px;height:150px;border-width:3px;border-radius:15px 15px 0 0;transform:translate(5px,18px);filter:blur(1.5px) brightness(.65) saturate(.72)}.feature-library .feature-copy{padding:18px 4px}.feature-library h3{font-size:18px}.feature-library p{font-size:11px;line-height:1.42} .feature:first-child{grid-template-columns:minmax(0,1fr) 145px}.dashboard-crop{margin-left:-22px}.dashboard-crop img{width:205px;right:-28px;top:-8px}.adapt-technique-crop img{width:158px;left:-18px;top:10px}.feature-library,.feature:nth-child(4).feature-library{min-height:300px}.feature-library .feature-copy{min-height:300px;padding:26px 82px 24px 116px}.library-primary{left:8px;width:108px;height:218px}.library-search{right:-8px;width:98px;height:190px;filter:blur(.55px) brightness(.86)}.rutube-mark{right:5px;top:7px;font-size:7px;padding:3px 5px}.flow-visual h3,.flow-visual li:nth-child(n) h3{min-height:0}.theme-event .theme-sun{width:88px;height:88px} .feature-library,.feature:nth-child(4).feature-library{min-height:315px}.feature-library .feature-copy{min-height:315px;padding:26px 24px 24px 126px}.library-primary{left:6px;width:126px;height:244px}.library-search{right:-18px;width:122px;height:218px}.feature-library:before{left:96px;width:58px}.flow-visual h3,.flow-visual li:nth-child(n) h3{min-height:40px;font-size:15px}.flow-visual figure:hover{transform:translateY(-5px) scale(1.07)} .stage img.hero-integrated{width:760px;left:50%;top:56%}.stage{right:-265px;bottom:-70px}.pulse-line{left:23%} .stage img.hero-integrated{width:690px;left:50%;top:56%} .hero-sky .moon-orb{right:8px;top:68px;width:50px;height:50px} .theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:86%;bottom:80%} .feature:nth-child(3) .list-crop img{width:170px;left:-11px;top:12px} .feature-library .feature-copy{padding-right:78px} .library-search{right:-22px;filter:blur(.85px) brightness(.82) saturate(.86)} .flow-visual h3,.flow-visual li:nth-child(n) h3{font-size:11px;letter-spacing:-.025em}    .how.block{padding:40px 0 44px} .how .section-head{gap:14px 10px;margin-bottom:24px} .how .section-head h2{white-space:normal;font-size:30px} .how .section-head .btn-video{height:34px;padding-inline:10px;font-size:10px} .feature:first-child .dashboard-crop img{top:-26px} .screen-preview p{font-size:15px;margin-inline:36px} .google-play-soon{margin-top:18px} .hero-copy{transform:none} html.theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:82%;bottom:80%} .hero-cta{width:min(310px,100%)} .flow-viewport{margin-inline:-8px;padding-inline:8px} .flow.flow-visual{gap:14px;padding-bottom:34px} .flow.flow-visual li{flex-basis:68%;min-width:220px} .faq-list details{height:176px} .faq-list details[open] p{max-height:104px} .hero-sky .moon-orb{top:78px;right:12px;width:54px;height:54px} html.theme-to-light .hero-sky .sunset,html[data-theme="light"] .hero-sky .sunset{left:calc(100% - 66px);bottom:calc(100% - 148px)} .screen-preview-nav{width:38px;height:54px;background:rgba(4,18,31,.9)} .screen-preview-prev{left:8px}.screen-preview-next{right:8px} .faq-list details{height:176px} .faq-list details[open] p{max-height:108px} .contact.block{padding-top:10px} .faq-list details{height:176px} .faq-list details[open] p{max-height:112px} .hero,.hero-grid{ height:710px; min-height:710px; } .hero-copy{padding-top:92px} .hero-copy{z-index:20} .lead{max-width:320px} .hero h1{font-size:clamp(36px,11vw,46px)} .stage{ width:570px; height:500px; right:-278px; bottom:-32px; } .stage img.hero-integrated{ width:700px; top:55%; } .hero-sky .moon-orb{top:72px;right:4px} html.theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{ left:calc(100% - 58px); bottom:calc(100% - 132px); } .app-showcase{min-height:700px;padding-top:0} .app-grid{min-height:700px;padding-top:18px} .app-copy{padding-top:0;padding-bottom:0} .app-copy h2{font-size:clamp(31px,9vw,40px);line-height:1.08} .app-copy>p:not(.eyebrow){max-width:300px;margin-top:12px} .google-play-soon{margin-top:16px} .phones{ left:0; bottom:-36px; margin-top:0; } .faq.block{padding-top:54px;padding-bottom:54px} .faq-grid{gap:22px} .faq-list details{height:142px;padding:15px 0} .faq-list details p{font-size:11.2px;line-height:1.34} .faq-list details[open] p{max-height:90px} .hero-copy, .hero h1, .hero h1 em, .lead, .section-head h2, .price-copy h2, .pricing-title, .app-copy, .app-copy h2{ width:100%; max-width:100%; white-space:normal; overflow-wrap:anywhere; } .hero h1{ font-size:clamp(32px,9.2vw,38px); letter-spacing:-.04em; } .hero h1 em{display:block} .lead{font-size:14px;line-height:1.5} .how .section-head h2{ font-size:29px; line-height:1.08; } .pricing-title, .price-copy h2{ font-size:clamp(34px,10vw,42px); line-height:1.06; } .pricing-compact{ display:grid; grid-template-columns:1fr; gap:14px; width:100%; overflow:visible; } .compact-price-card{ width:100%; min-width:0; min-height:0; } .compact-coach-card,
.compact-pro-card,
.compact-chart-card{min-height:330px} .compact-card-head h3,
.compact-chart-card h3{font-size:19px} .app-copy h2{ font-size:clamp(29px,8.8vw,37px); letter-spacing:-.035em; } .faq-list details{ height:120px; padding:13px 0; } .faq-list summary{ font-size:15px; line-height:1.22; } .faq-list details p{ font-size:10.5px; line-height:1.28; margin-right:18px; } .faq-list details[open] p{ max-height:78px; margin-top:6px; } html, body, main{ max-width:100%; overflow-x:clip; } .hero .lead{ width:320px; max-width:calc(100vw - 28px); } .how .section-head, .how .section-head h2, .app-copy, .app-copy h2{ width:100%; max-width:100%; min-width:0; } .how .section-head h2{ font-size:clamp(23px,6.8vw,27px); line-height:1.08; overflow-wrap:break-word; } .app-copy h2{ font-size:clamp(24px,7vw,29px); line-height:1.08; overflow-wrap:break-word; } .app-showcase, .app-grid{ min-height:620px; } .phones{ top:275px; bottom:auto; } .faq-list details{ height:114px; min-height:114px; } .faq-list summary{ min-width:0; gap:10px; white-space:normal; overflow-wrap:anywhere; display:grid; grid-template-columns:minmax(0,1fr) auto; } .faq-list summary::after{flex:0 0 auto} .faq-list details p{ font-size:10.2px; line-height:1.24; } .faq-list details[open] p{max-height:72px} .contact, .contact-shell, .contact-copy, .contact .form, .contact .form label, .contact .form>*{ width:100%; max-width:100%; min-width:0; } .contact{overflow:hidden} .contact .form{ grid-template-columns:minmax(0,1fr); padding-inline:24px; } .contact .form input, .contact .form select, .contact .form textarea{ width:100%; max-width:100%; min-width:0; } .contact .check, .contact .check span{ min-width:0; overflow-wrap:anywhere; } .contact .check{ display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; } .phone,.phone img{border-radius:26px}}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none;transition-duration:.01ms}.stage img:not(.is-on){display:none}   .compact-price-card,.compact-bar,.term-switch button{transition:none} .theme-event.sunrise{animation:theme-page-light 2s ease both} .theme-event.sunrise .theme-sun{animation:sun-page-rise 2s cubic-bezier(.18,.72,.18,1) both} .theme-event.sunset{animation:theme-page-dark 2s ease both} .theme-event.sunset .theme-sun{animation:sun-page-set 2s cubic-bezier(.35,0,.72,.3) both} html.theme-switching body:after{animation:theme-illumination 2s ease-in-out both} .hero-sky .sunset{transition-duration:2s}}
  @media (min-width:901px){.hero-grid{grid-template-columns:minmax(540px,.92fr) minmax(600px,1.08fr)}.hero h1{font-size:clamp(54px,4.1vw,60px)} .flow{grid-template-columns:repeat(6,1fr)}.flow-visual h3{font-size:16px} .how .section-head{max-width:1180px}.how .section-head h2{font-size:clamp(35px,3.8vw,50px);white-space:nowrap} .app-grid{grid-template-columns:minmax(300px,.56fr) minmax(0,1.44fr)} .app-copy{max-width:380px;padding-right:28px} .price-shell{width:min(calc(100% - 24px),1536px)} .price-copy{max-width:none} .price-copy h2,.price-copy>p:not(.kicker){white-space:nowrap} .price-copy h2{font-size:clamp(34px,4vw,52px)}                   .app-grid{grid-template-columns:minmax(290px,.48fr) minmax(0,1.52fr)} .app-copy{max-width:330px;padding-right:34px} .app-copy h2{font-size:clamp(42px,4vw,58px)} .faq-grid{grid-template-columns:1fr;gap:28px} .faq-heading{max-width:760px} .faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 38px;border-top:1px solid var(--line)} .faq-list details{align-self:start} .how .section-head{position:relative;padding-top:48px} .how .section-head .btn-video{position:absolute;top:0;right:0;width:auto;height:38px;margin:0;padding:0 14px;font-size:12px;border-radius:11px} .how .section-head .btn-video>span:first-child{width:20px;height:20px;font-size:8px}                     .app-copy{padding-top:12px}.app-copy h2{white-space:nowrap}.phones{margin-top:0} .how .section-head{padding-top:52px} .how .section-head .btn-video{top:0;right:0;height:36px;padding-inline:12px;font-size:11px}                          .price-shell{overflow:visible}                                                 .hero-copy{padding-top:0;transform:translateY(-56px)} .hero h1{max-width:650px;margin:16px 0 14px;font-size:clamp(50px,4.05vw,60px)} .hero h1>em{white-space:nowrap} .hero .lead{max-width:525px} .hero-cta{margin-top:25px} .feature-grid{grid-template-columns:repeat(12,minmax(0,1fr))} .feature:nth-child(1),.feature:nth-child(5){grid-column:span 7} .feature:nth-child(2),.feature:nth-child(3),.feature:nth-child(6){grid-column:span 5} .feature:nth-child(4){grid-column:span 7} .feature:nth-child(1){grid-template-columns:minmax(300px,1.22fr) minmax(230px,.78fr)} .feature:nth-child(2){grid-template-columns:minmax(250px,1fr) minmax(170px,.58fr)} .feature:nth-child(3){grid-template-columns:minmax(160px,.58fr) minmax(250px,1fr)} .feature:nth-child(5){grid-template-columns:minmax(310px,1.22fr) minmax(230px,.78fr)} .feature:nth-child(6){grid-template-columns:minmax(250px,1fr) minmax(165px,.56fr)} .feature:nth-child(2) .feature-copy,.feature:nth-child(6) .feature-copy{padding-left:32px;padding-right:20px} .feature:nth-child(3) .feature-copy{padding:34px 22px} .feature:nth-child(2) .feature-visual:before{background:linear-gradient(90deg,rgba(67,95,116,.42),transparent 34%)} html[data-theme="light"] .feature:nth-child(2) .feature-visual:before{background:linear-gradient(90deg,rgba(197,214,226,.45),transparent 34%)} .hero,.hero-grid{min-height:770px} .stage{height:720px} .pulse-line{bottom:0;z-index:20} .feature:nth-child(3){grid-template-columns:minmax(238px,1fr) minmax(150px,.62fr)} .feature:nth-child(3) .feature-copy{padding-left:7px;padding-right:16px} .feature:nth-child(4) .feature-copy{padding-right:176px} .feature:nth-child(4) .library-search{right:2px;bottom:18px;transform:none;width:224px;height:314px} .feature:nth-child(6){grid-template-columns:minmax(218px,.86fr) minmax(205px,.72fr)} .feature:nth-child(6) .feature-copy{padding-left:28px;padding-right:8px} .feature:nth-child(6) .progress-crop img{right:-12px;width:226px} .hero,.hero-grid{min-height:720px} .stage{height:700px;margin-top:34px} .app-grid{align-items:start} .app-copy{align-self:start;padding-top:34px;padding-bottom:0;width:940px;position:relative;z-index:7} .app-copy h2{font-size:clamp(30px,3.25vw,48px);line-height:1.08;white-space:nowrap;margin:14px 0 14px} .app-copy>p:not(.eyebrow){max-width:420px} .phones{margin-top:96px} .hero,.hero-grid{min-height:682px;height:682px} .stage{height:666px;margin-top:16px} .features{margin-top:0} .app-copy{padding-top:10px} .phones{margin-top:58px} .compact-price-card{min-height:354px} .hero,.hero-grid{ height:620px; min-height:620px; } .stage{ height:620px; margin-top:0; } .stage img.hero-integrated{ top:56%; width:min(900px,86vw); } .features{margin-top:0} .app-grid{ min-height:540px; padding-top:4px; align-items:start; } .app-copy{ min-height:520px; padding-top:8px; display:flex; flex-direction:column; align-items:flex-start; } .app-copy h2{ margin:10px 0 0; } .app-copy>p:not(.eyebrow){ margin-top:150px; max-width:310px; } .google-play-soon{margin-top:24px} .phones{margin-top:22px} .hero-copy>.eyebrow{transform:translateY(26px)} .pricing-compact{ grid-template-columns:minmax(0,1.16fr) minmax(0,1.06fr) minmax(0,1.02fr) minmax(0,.76fr); }}
  @media (min-width:901px) and (max-width:1200px){.hero-grid{grid-template-columns:.8fr 1.2fr}.hero h1{font-size:55px}}
  @media (max-width:360px){.flow-visual{grid-template-columns:1fr}.flow-visual figure,.flow-visual li:nth-child(n) figure{width:146px;height:206px}}
  @media (max-width:1280px){.wrap{width:min(calc(100% - 40px),var(--wrap))} .price-shell{padding:38px}    .app-copy h2{font-size:clamp(42px,4.5vw,56px)}}
  @media (max-width:1024px){.block{padding-block:88px} .section-head{margin-bottom:42px} .price-shell{padding:32px}    .contact-copy{padding:42px} .foot-grid{gap:28px}}
  @media (max-width:820px){    .price-copy{max-width:650px}}
  @media (max-width:420px){.top-inner{gap:8px}.tools{gap:5px}.lang{width:52px}.theme{width:50px;padding-inline:7px}.burger{width:36px;padding:7px} .brand{gap:7px;font-size:17px}.brand img{width:34px;height:34px} .hero h1{font-size:38px}.hero-cta{max-width:none}.hero-cta .btn{width:100%} .trust{font-size:11px} .section-head h2,.price-copy h2,.faq h2,.contact h2{font-size:30px} .feature{grid-template-columns:minmax(0,1fr) 112px}.features .feature-copy{padding-inline:16px}.feature p{font-size:12px} .dashboard-crop img{width:178px;right:-34px}.progress-crop img{width:154px;right:-32px}.adapt-technique-crop img{width:164px;right:-42px}.reminder-crop img{width:164px;right:-34px} .price-shell{width:calc(100% - 12px);padding-inline:15px} .form .two{gap:12px}.foot-grid{grid-template-columns:1fr}.foot-brand{grid-column:auto} .screen-preview p{font-size:13px}}
  @media (max-height:760px) and (min-width:901px){.hero,.hero-grid{min-height:650px}.stage{height:610px;margin-top:68px}.hero-copy{padding-top:74px}.hero h1{margin-block:17px 14px}.hero-cta{margin-top:25px}}
  @media (hover:hover) and (pointer:fine){.flow-visual figure:hover{z-index:30;transform:translateY(-10px) scale(2.5);filter:brightness(1.06);box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 0 1px rgba(62,181,240,.55),0 0 42px rgba(25,148,232,.3)} .flow-visual figure:hover{z-index:30;transform:translateY(-7px) scale(1.5);filter:brightness(1.05);box-shadow:0 34px 78px rgba(0,0,0,.66),0 0 0 1px rgba(62,181,240,.5),0 0 36px rgba(25,148,232,.24)} .flow-visual figure:hover{transform:translateY(-7px) scale(1.5)} .flow-visual figure:hover{transform:translate3d(0,-7px,0) scale(1.5)} main .btn:not(:disabled):hover, main .feature:hover, main .compact-price-card:hover, main .phone:hover, main .faq-list details:hover, main .contact-shell:hover{ transform:translateY(-4px) scale(1.012); border-color:rgba(55,190,255,.68); box-shadow:0 20px 52px rgba(0,0,0,.32),0 0 0 1px rgba(65,195,255,.36),0 0 30px rgba(25,158,239,.24); } main .form input:hover,main .form select:hover,main .form textarea:hover{ border-color:rgba(55,190,255,.7); box-shadow:0 0 0 1px rgba(65,195,255,.28),0 0 22px rgba(25,158,239,.2); } main .feature:hover{ transform:none; border-color:rgba(55,190,255,.68); box-shadow:0 0 0 1px rgba(65,195,255,.34),0 0 30px rgba(25,158,239,.2); } html[data-theme="light"] main .feature:hover{ transform:none; border-color:rgba(0,126,220,.76); box-shadow:0 0 0 2px rgba(0,142,235,.3),0 0 28px rgba(0,142,235,.22); } main .phone:hover,html[data-theme="light"] main .phone:hover{ border-color:transparent; box-shadow:none; } main .phone-1:hover{transform:rotate(-4deg)} main .phone-2:hover{transform:none} main .phone-3:hover{transform:rotate(2deg)} main .phone-4:hover{transform:rotate(5deg)} main .faq-list details:hover,html[data-theme="light"] main .faq-list details:hover, main .contact-shell:hover,html[data-theme="light"] main .contact-shell:hover{ transform:none; box-shadow:none; } main .phone:hover,html[data-theme="light"] main .phone:hover{ border-color:#17202b; box-shadow:0 28px 60px rgba(0,0,0,.5); filter:none; } .screen-preview-nav:hover{border-color:#67d7ff;background:rgba(8,43,70,.94);box-shadow:0 0 0 1px rgba(83,204,255,.45),0 0 34px rgba(27,173,249,.52)} .screen-preview-prev:hover{transform:translateY(-50%) scale(1.09) translateX(-3px)} .screen-preview-next:hover{transform:translateY(-50%) scale(1.09) translateX(3px)} main .phone:hover,html[data-theme="light"] main .phone:hover{ border:0; box-shadow:0 22px 46px rgba(0,0,0,.38); transform:var(--phone-static-transform,none); } .phone-1:hover{transform:rotate(-4deg)} .phone-2:hover{transform:none} .phone-3:hover{transform:rotate(2deg)} .phone-4:hover{transform:rotate(5deg)} main .phone:hover,html[data-theme="light"] main .phone:hover{ border:0; filter:none; box-shadow:0 22px 46px rgba(0,0,0,.38); } main .flow-visual figure:hover{ z-index:30; transform:translate3d(0,-4px,0) scale(1.045); filter:brightness(1.035); border-color:rgba(55,190,255,.7); box-shadow:0 18px 46px rgba(0,0,0,.34),0 0 0 1px rgba(65,195,255,.42),0 0 30px rgba(25,158,239,.26); } html[data-theme="light"] main .flow-visual figure:hover{ border-color:rgba(0,126,220,.8); box-shadow:0 18px 42px rgba(33,91,132,.22),0 0 0 2px rgba(0,142,235,.36),0 0 34px rgba(0,142,235,.28); } main .flow-visual figure:hover{ box-shadow:0 18px 46px rgba(0,0,0,.34),0 0 0 1px rgba(65,195,255,.42),0 0 30px rgba(25,158,239,.26); } html[data-theme="light"] main .flow-visual figure:hover{ box-shadow:0 18px 42px rgba(33,91,132,.22),0 0 0 2px rgba(0,142,235,.36),0 0 34px rgba(0,142,235,.28); }}
  @media (max-width:700px){  .faq-list{grid-template-columns:1fr}}
  @media (min-width:860px){                                 .ring-center-default,.ring-center-active{width:100%} .ring-center-default[hidden],.ring-center-active[hidden]{display:none} .ring-center h3{margin:0;font-size:clamp(16px,1.5vw,20px);line-height:1.1} .ring-center-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:15px} .ring-center-rows span{min-width:0} .ring-center-rows small{display:block;color:#9fb9c9;font-size:clamp(8.5px,.75vw,10px);line-height:1.1;white-space:nowrap} html[data-theme="light"] .ring-center-rows small{color:#4d6b7e} .ring-center-rows strong{display:block;margin-top:4px;color:#65ef93;font-size:clamp(11px,1.05vw,14px);line-height:1.1;white-space:nowrap} html[data-theme="light"] .ring-center-rows strong{color:#087c52} .ring-center-default p{max-width:210px;margin:13px auto 0;color:#a8bdca;font-size:clamp(8.5px,.76vw,10.5px);line-height:1.3;text-wrap:balance} html[data-theme="light"] .ring-center-default p{color:#486678} .ring-center-active{display:flex;flex-direction:column;align-items:center} .ring-center-active strong{margin-top:12px;color:#65ef93;font-size:clamp(25px,2.45vw,34px);line-height:1;white-space:nowrap} html[data-theme="light"] .ring-center-active strong{color:#087c52} .ring-center-active span{margin-top:8px;font-size:clamp(11px,.95vw,13px);font-weight:750} .ring-center-active small{margin-top:5px;color:#a8bdca;font-size:clamp(10px,.85vw,12px)} html[data-theme="light"] .ring-center-active small{color:#486678}                                            }
  @media (max-width:859px){                       .ring-center-default,.ring-center-active{width:100%;text-align:center}.ring-center-default[hidden],.ring-center-active[hidden]{display:none} .ring-center h3{margin:0;font-size:20px}.ring-center-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:520px;margin:18px auto 0}.ring-center-rows small{display:block;color:#a9bfcd;font-size:11px}.ring-center-rows strong{display:block;margin-top:4px;color:#65ef93;font-size:16px}.ring-center-default p{margin:16px auto 0;color:#a9bfcd;font-size:11px}.ring-center-active{display:flex;flex-direction:column;align-items:center}.ring-center-active strong{margin-top:12px;color:#65ef93;font-size:32px}.ring-center-active span{margin-top:6px;font-weight:750}.ring-center-active small{margin-top:5px;color:#a9bfcd} html[data-theme="light"] .ring-center-rows small,html[data-theme="light"] .ring-center-default p,html[data-theme="light"] .ring-center-active small{color:#486678}html[data-theme="light"] .ring-center-rows strong,html[data-theme="light"] .ring-center-active strong{color:#087c52}        }
  @media (max-width:560px){    .ring-center-rows{gap:4px}.ring-center-rows strong{font-size:14px} .price-copy h2{font-size:clamp(30px,10vw,44px)}}
  @media (max-width:680px){.pricing-compact{grid-template-columns:1fr;gap:12px;margin-top:22px} .compact-price-card{min-height:0} .compact-pro-card,.compact-coach-card,.compact-chart-card{padding:20px}  .compact-coach-card{min-height:310px} .compact-chart-card{min-height:320px} .compact-card-head{gap:8px} .term-switch button{min-width:32px;padding-inline:5px} .compact-main-price strong{font-size:34px}  .compact-trainer{width:48%;height:86%}  .compact-coach-card .compact-benefits{max-width:none;width:68%} .compact-coach-price{font-size:25px}}
  @media (min-width:601px) and (max-width:900px){.hero,.hero-grid{ height:720px; min-height:720px; } .hero-copy{padding-top:108px} .stage{ width:680px; height:590px; right:-80px; bottom:-38px; } .stage img.hero-integrated{ width:740px; top:54%; } .hero-sky .moon-orb{top:78px;right:8px} html.theme-to-light .hero-sky .sunset, html[data-theme="light"] .hero-sky .sunset{ left:calc(100% - 66px); bottom:calc(100% - 146px); } .app-grid{min-height:650px;padding-top:16px} .app-copy{max-width:430px} .phones{margin-top:14px} .faq-list details{height:136px}}
  @media (max-width:430px){.stage{ right:-330px; opacity:.58; } .hero-cta{max-width:none} .flow-viewport, .flow-track{max-width:100vw} .app-copy>p:not(.eyebrow){font-size:15px;line-height:1.5}}
  @media (max-width:400px){.how .section-head h2{font-size:23px} .app-copy h2{font-size:24px} .price-copy h2, .pricing-title{font-size:31px}}
}

/* layout */
@layer layout {
  :root{--u:clamp(.74px,min(.052083vw,.092593vh),1.42px);--rail:clamp(22px,3.35vw,104px);--ink:#eff7ff;--text:#c4d4e2;--cold:#06101d;--line:rgba(101,184,238,.24);--blue:#159dff;--green:#54e96b}
  html{background:var(--cold)}
  body{background:var(--cold);color:var(--ink);font-size:calc(15 * var(--u));transition:background-color 1.1s ease,color 1.1s ease}
  .wrap{max-width:none;width:100%;padding-inline:var(--rail)}
  .block{padding-block:calc(66 * var(--u))}
  .top{height:calc(70 * var(--u));background:rgba(3,10,19,.7);backdrop-filter:blur(18px);transition:background-color 1s ease,border-color 1s ease}
  .top-inner{height:100%;gap:calc(24 * var(--u))}
  .brand{font-size:calc(23 * var(--u))}
  .brand img{width:calc(44 * var(--u));height:calc(44 * var(--u))}
  .menu{gap:clamp(12px,1.5vw,30px)}
  .menu a{font-size:calc(12.5 * var(--u))}
  .tools{margin-left:auto}
  .theme{width:calc(110 * var(--u));height:calc(37 * var(--u));transition:background-color 1s ease,color 1s ease,border-color 1s ease}
  .theme i:after{transition:transform .48s cubic-bezier(.2,.8,.2,1),background .48s,box-shadow .48s}
  .top-cta{display:none}
  .theme-event{display:none}
  .hero{min-height:clamp(650px,51vw,1010px);height:auto;padding-top:calc(70 * var(--u));overflow:hidden;background:#030914}
  .hero-sky{background:linear-gradient(105deg,#1b0d08 0%,#071522 43%,#020917 100%);transition:background 1.3s ease}
  .mountains{background:url('/assets/hero/mountain-valley-v2.png') left bottom/58% auto no-repeat;opacity:.72}
  .night{left:29%}
  .hero-grid{min-height:calc(650 * var(--u));grid-template-columns:43% 57%;align-items:center}
  .hero-copy{padding-top:calc(10 * var(--u))}
  .hero h1{max-width:calc(520 * var(--u));margin:calc(18 * var(--u)) 0 calc(16 * var(--u));font-size:clamp(38px,4.25vw,calc(74 * var(--u)))}
  .lead{max-width:calc(460 * var(--u));font-size:calc(18 * var(--u))}
  .hero-cta{flex-direction:column;align-items:flex-start;gap:calc(12 * var(--u));margin-top:calc(28 * var(--u))}
  .hero-cta .btn{min-width:calc(250 * var(--u));height:calc(52 * var(--u))}
  .stage{height:100%;min-height:calc(600 * var(--u));margin:0;transform:none;overflow:visible}
  .stage:before,.circuit{display:none}
  .stage img.hero-integrated{z-index:3;width:min(100%,calc(1050 * var(--u)));height:auto;left:50%;top:52%;transform:translate(-48%,-50%);mix-blend-mode:normal;mask-image:none;-webkit-mask-image:none;clip-path:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.26))}
  .pulse-line{left:46%;right:var(--rail);bottom:calc(34 * var(--u))}
  .hero-sky .sunset,.hero-sky .moon-orb{z-index:1;left:calc(100% - var(--rail) - 34px);top:calc(73 * var(--u));right:auto;bottom:auto}
  .hero-sky .sunset{width:calc(64 * var(--u));height:calc(64 * var(--u));opacity:0;transform:translate(-50%,900%);background:radial-gradient(circle,#fffbd7 0 9%,#ffd56e 17%,#ff9c3d 43%,rgba(255,137,40,.25) 66%,transparent 72%);box-shadow:0 0 38px rgba(255,181,74,.66);transition:opacity .35s ease}
  .hero-sky .moon-orb{width:calc(65 * var(--u));height:calc(65 * var(--u));transform:translateX(-50%);background:radial-gradient(circle at 35% 28%,#dcefff 0 8%,transparent 9%),radial-gradient(circle at 63% 58%,#6d8ba9 0 9%,transparent 10%),radial-gradient(circle at 37% 65%,#7893ac 0 7%,transparent 8%),radial-gradient(circle at 50% 49%,#b9d2e4 0 39%,#557590 64%,#18304a 76%,transparent 77%)}
  .features{background:#07101b}
  .feature-grid{max-width:none;margin:0;display:grid;grid-template-columns:3fr 2fr;grid-template-areas:'one two' 'three four' 'five six'}
  .feature{min-height:calc(285 * var(--u));grid-template-columns:minmax(0,1fr) minmax(180px,43%)}
  .feature:nth-child(1){grid-area:one}
  .feature:nth-child(2){grid-area:two}
  .feature:nth-child(3){grid-area:three}
  .feature:nth-child(4){grid-area:four}
  .feature:nth-child(5){grid-area:five}
  .feature:nth-child(6){grid-area:six}
  .feature-copy{align-self:center;padding:calc(34 * var(--u)) var(--rail);padding-right:calc(24 * var(--u))}
  .feature:nth-child(even) .feature-copy{padding-left:calc(28 * var(--u))}
  .feature h3{font-size:calc(25 * var(--u))}
  .feature p{font-size:calc(15 * var(--u))}
  .feature-visual img{width:calc(340 * var(--u));right:-7%}
  .dashboard-crop img{width:calc(365 * var(--u));top:46%}
  .feature-library{grid-template-columns:31% 35% 34%}
  .feature-library .feature-copy{padding-left:calc(18 * var(--u));padding-right:calc(12 * var(--u))}
  .library-screen img{width:calc(370 * var(--u))}
  .library-search{opacity:.65;filter:blur(1.2px)}
  .feature,.feature *{transition:none}
  .feature:hover{box-shadow:none;transform:none}
  .how{background:linear-gradient(108deg,#713019 0%,#14151e 43%,#063668 100%);padding-block:calc(58 * var(--u))}
  .section-head{min-height:calc(150 * var(--u))}
  .section-head .kicker{left:0;top:0}
  .section-head h2{max-width:calc(850 * var(--u));margin:calc(36 * var(--u)) auto 0;font-size:calc(40 * var(--u))}
  .btn-video{right:0;top:0;bottom:auto}
  .flow-viewport{margin-top:calc(24 * var(--u))}
  .flow-viewport:before,.flow-viewport:after{width:10%}
  .flow{gap:calc(34 * var(--u));padding:calc(10 * var(--u)) 0 calc(16 * var(--u))}
  .flow li{flex-basis:calc(175 * var(--u))}
  .flow figure{width:calc(132 * var(--u));height:calc(260 * var(--u));border-radius:calc(18 * var(--u));background:transparent;box-shadow:none;transition:transform .38s cubic-bezier(.22,.61,.36,1),filter .38s,box-shadow .38s}
  .flow figure:hover{z-index:7;transform:scale(1.13);box-shadow:0 0 0 1px rgba(86,211,255,.75),0 15px 35px rgba(5,24,43,.38);filter:brightness(1.09)}
  .screen-preview{padding:46px 56px 22px}
  .screen-preview p{top:12px}
  .screen-preview-nav{transition:transform .2s,box-shadow .2s}
  .screen-preview-nav:hover{transform:scale(1.1);box-shadow:0 0 22px rgba(29,177,255,.35)}
  .pricing{background:radial-gradient(circle at 82% 14%,rgba(22,93,158,.22),transparent 27%),linear-gradient(135deg,#06101c,#071928 60%,#082848)}
  .price-shell{padding-top:calc(18 * var(--u));padding-bottom:calc(42 * var(--u))}
  .price-copy{margin-bottom:calc(30 * var(--u))}
  .price-copy h2{font-size:calc(45 * var(--u))}
  .pricing-compact{grid-template-columns:1.2fr .9fr 1.18fr 1.28fr;gap:calc(16 * var(--u))}
  .compact-price-card{min-height:calc(340 * var(--u));padding:calc(24 * var(--u));border:1px solid var(--line);border-radius:calc(20 * var(--u));background:linear-gradient(145deg,rgba(14,43,69,.97),rgba(5,19,34,.95))}
  .compact-price-card h3{font-size:calc(21 * var(--u));white-space:nowrap}
  .term-switch button{border:0;background:none}
  
  
  
  
  
  .compact-coach-card{padding-right:calc(105 * var(--u))}
  .compact-coach-price{font-size:calc(26 * var(--u));white-space:nowrap}
  .compact-trainer{width:calc(170 * var(--u));height:calc(260 * var(--u));right:calc(-9 * var(--u))}
  .compact-chart-saving{right:calc(18 * var(--u));top:calc(105 * var(--u))}
  .pricing-note{margin-top:calc(16 * var(--u))}
  .app-showcase{padding-block:calc(52 * var(--u));background:linear-gradient(117deg,#6b2d19 0%,#121621 42%,#06396c 100%)}
  .app-grid{min-height:calc(430 * var(--u));grid-template-columns:32% 68%}
  .app-copy h2{white-space:nowrap;font-size:calc(37 * var(--u))}
  .phones{height:calc(430 * var(--u))}
  .phone{overflow:hidden;border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;box-shadow:none;outline:none}
  .phone img{border-radius:calc(20 * var(--u)) calc(20 * var(--u)) 0 0;box-shadow:none}
  .phones,.phone,.phone img{transition:none}
  .faq{background:radial-gradient(circle at 90% 0,rgba(18,80,134,.18),transparent 30%),linear-gradient(135deg,#06101d,#071c31)}
  .faq-grid{grid-template-columns:30% 70%}
  .faq-list{grid-template-columns:1fr 1fr}
  .faq-list details p{font-size:calc(12 * var(--u));transition:max-height .45s ease,padding .45s ease}
  .contact{background:linear-gradient(116deg,#70311d 0%,#111621 44%,#06396c)}
  .contact-shell{grid-template-columns:34% 66%;min-height:calc(390 * var(--u));padding-block:calc(32 * var(--u))}
  .contact-shell:before,.contact-shell:after{display:none}
  .form .check{grid-column:1/-1;display:flex;align-items:flex-start;width:100%}
  .foot{background:#030b15}
  html[data-theme='light']{--ink:#09233a;--text:#23445d;--cold:#e9f4fa;--line:rgba(35,125,183,.28)}
  html[data-theme='light'] body{background:#eaf4fa}
  html[data-theme='light'] .top{background:rgba(240,248,252,.9);color:#08223b}
  html[data-theme='light'] .menu a{color:#16364d}
  html[data-theme='light'] .theme{background:#f8fcff;color:#17344a}
  html[data-theme='light'] .theme i:after{transform:translateX(calc(13 * var(--u)));background:#fff6cd;box-shadow:0 0 13px #ffbf57}
  html[data-theme='light'] .hero-sky{background:linear-gradient(105deg,#f5dcc0,#d3e7f0 43%,#effaff)}
  html[data-theme='light'] .hero h1{color:#071f34}
  html[data-theme='light'] .hero-sky .night{opacity:.07}
  html[data-theme='light'] .hero-sky .moon-orb{opacity:0;transform:translate(-50%,-15%)}
  html[data-theme='light'] .hero-sky .sunset{opacity:1;transform:translate(-50%,0)}
  html[data-theme='light'] .feature-dark{background:#dceaf2;color:#0b263b}
  html[data-theme='light'] .feature-light{background:#bad0df;color:#0b263b}
  html[data-theme='light'] .pricing{background:linear-gradient(135deg,#e7f4fa,#d6eaf4 60%,#c3dbe9)}
  html[data-theme='light'] .compact-price-card{color:#0a2a42;background:linear-gradient(145deg,#fbfeff,#dcecf5)}
  html[data-theme='light'] .compact-price-card h3,
html[data-theme='light'] .compact-main-price strong,
html[data-theme='light'] .compact-coach-price{color:#09243b}
  html[data-theme='light'] .app-showcase{background:linear-gradient(117deg,#f7dcc6,#e7f0f3 44%,#bddcf0)}
  html[data-theme='light'] .faq{background:linear-gradient(135deg,#e5f2f8,#cfe3ee)}
  html[data-theme='light'] .contact{background:linear-gradient(116deg,#f5dbc8,#e7f0f4 44%,#c4e0f2)}
  html[data-theme='light'] .foot{background:#dbeaf2;color:#25475d}
  html.theme-to-light .moon-orb{animation:moonOut 1.95s ease forwards}
  html.theme-to-light .sunset{animation:sunRise 1.95s cubic-bezier(.2,.75,.22,1) forwards}
  html.theme-to-dark .sunset{opacity:1;animation:sunSet 1.95s cubic-bezier(.5,.02,.72,.2) forwards}
  html.theme-to-dark .moon-orb{opacity:0;animation:moonIn 1.95s ease forwards}
  @keyframes sunRise{0%{opacity:0;left:18%;top:84%;transform:translate(-50%,50%) scale(.55)}30%{opacity:1}100%{opacity:1;left:calc(100% - var(--rail) - 34px);top:calc(73 * var(--u));transform:translate(-50%,0) scale(1)}}
  @keyframes sunSet{0%{opacity:1;left:calc(100% - var(--rail) - 34px);top:calc(73 * var(--u));transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;left:18%;top:84%;transform:translate(-50%,50%) scale(.55)}}
  @keyframes moonOut{0%,45%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translate(-50%,-18%)}}
  @keyframes moonIn{0%,55%{opacity:0;transform:translate(-50%,-15%)}100%{opacity:1;transform:translateX(-50%)}}
  @media (max-width:1080px){.hero-grid{grid-template-columns:46% 54%}.pricing-compact{grid-template-columns:1fr 1fr}.app-grid{grid-template-columns:36% 64%}.app-copy h2{white-space:normal}}
  @media (max-width:760px){:root{--rail:18px}.menu{position:fixed;top:var(--m-header-total);left:auto;right:8px;display:none;flex-direction:column;align-items:stretch;box-sizing:border-box;width:min(50vw,230px);padding:8px;gap:2px;background:#07111f;border:1px solid rgba(101,184,238,.20);border-radius:0 0 0 16px;box-shadow:0 16px 34px rgba(0,0,0,.28)}.menu.open{display:flex}.burger{display:block}.hero{min-height:690px}.hero-grid{display:block;min-height:620px}.hero-copy{padding-top:75px;max-width:60%}.hero h1{font-size:clamp(36px,10vw,56px)}.stage{position:absolute;right:-160px;bottom:-10px;width:74%;height:520px;min-height:0}.stage img.hero-integrated{width:660px;top:57%}.pulse-line{left:30%;right:0;bottom:18px}.feature-grid{grid-template-columns:1fr;grid-template-areas:'one' 'two' 'three' 'four' 'five' 'six'}.feature-library{grid-template-columns:35% 43% 22%}.section-head{min-height:142px;text-align:left}.section-head h2{margin-top:45px;font-size:32px}.btn-video{top:auto;bottom:0}.pricing-compact{grid-template-columns:1fr}.app-grid,.faq-grid,.contact-shell{grid-template-columns:1fr}.phones{height:350px;justify-content:center}.faq-list{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}.form .two{grid-template-columns:1fr}.menu a{display:flex;align-items:center;min-height:38px;padding:5px 9px;font-size:14px;line-height:1.15}}
  @media (max-width:480px){.stage{right:-235px;width:85%}.hero-copy{max-width:76%}.hero h1{font-size:37px}.foot-grid{grid-template-columns:1fr}.phones{height:290px}.app-copy h2{font-size:29px}}
  @media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}
}

/* refinement */
@layer refinement {
  .hero-sky .mountains{ inset:0 42% 0 0; width:auto; height:auto; background-image:linear-gradient(90deg,rgba(3,7,13,.08),rgba(3,8,16,.14) 72%,rgba(2,8,20,.94)),url('/assets/hero/mountain-valley-v2.png'); background-size:cover; background-position:center bottom; opacity:.88; filter:brightness(.82) saturate(.88) contrast(1.08); mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%); -webkit-mask-image:linear-gradient(90deg,#000 0 78%,transparent 100%); }
  html[data-theme='light'] .hero-sky .mountains{opacity:1;filter:brightness(1.48) saturate(.72) contrast(.88)}
  :root{--content-rail:max(24px,calc((100vw - min(1440px,94vw))/2))}
  .wrap{width:calc(100% - (var(--content-rail) * 2));max-width:none}
  .theme{position:relative;isolation:isolate}
  .theme i:after{transition:transform .5s cubic-bezier(.2,.72,.2,1),box-shadow .5s ease;transform:translateX(18px)}
  html[data-theme='light'] .theme i:after{transform:translateX(0)}
  html[data-theme-target='light'] .theme i:after{transform:translateX(0)}
  html[data-theme-target='dark'] .theme i:after{transform:translateX(18px)}
  html:not([data-theme='light']) .theme span:first-child{color:#9fb1bf;opacity:.62}
  html:not([data-theme='light']) .theme span:last-child{color:#fff;opacity:1;font-weight:800}
  html[data-theme='light'] .theme span:first-child{color:#153244;opacity:1;font-weight:800}
  html[data-theme='light'] .theme span:last-child{color:#607786;opacity:.62}
  html[data-theme-target='light'] .theme span:first-child{color:#153244;opacity:1;font-weight:800}
  html[data-theme-target='light'] .theme span:last-child{color:#607786;opacity:.62}
  html[data-theme-target='dark'] .theme span:first-child{color:#9fb1bf;opacity:.62}
  html[data-theme-target='dark'] .theme span:last-child{color:#fff;opacity:1;font-weight:800}
  .hero-sky .sunset,.hero-sky .moon-orb{left:auto;right:calc(var(--content-rail) + 12px);top:78px;bottom:auto;z-index:1;transform:none}
  .hero-sky .sunset{width:68px;height:68px;opacity:0;filter:blur(.15px);box-shadow:0 0 42px rgba(255,182,73,.72),0 0 98px rgba(255,195,97,.3)}
  .hero-sky .moon-orb{width:68px;height:68px;opacity:1;box-shadow:0 0 42px rgba(120,181,241,.28)}
  html[data-theme='light']:not(.theme-to-light):not(.theme-to-dark) .hero-sky .sunset{opacity:1;animation:none}
  html[data-theme='light']:not(.theme-to-light):not(.theme-to-dark) .hero-sky .moon-orb{opacity:0;animation:none}
  html.theme-to-light .hero-sky .sunset{animation:landing-sunrise 2s cubic-bezier(.18,.72,.18,1) both}
  html.theme-to-light .hero-sky .moon-orb{animation:landing-moon-out 2s ease both}
  html.theme-to-dark .hero-sky .sunset{opacity:1;animation:landing-sunset 2s cubic-bezier(.35,0,.72,.3) both}
  html.theme-to-dark .hero-sky .moon-orb{animation:landing-moon-in 2s ease both}
  @keyframes landing-sunrise{0%{opacity:0;right:calc(82% - var(--content-rail));top:86%;transform:scale(.56)}28%{opacity:1}100%{opacity:1;right:calc(var(--content-rail) + 12px);top:78px;transform:scale(1)}}
  @keyframes landing-sunset{0%{opacity:1;right:calc(var(--content-rail) + 12px);top:78px;transform:scale(1)}72%{opacity:1}100%{opacity:0;right:calc(82% - var(--content-rail));top:86%;transform:scale(.56)}}
  @keyframes landing-moon-out{0%,38%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.72)}}
  @keyframes landing-moon-in{0%,65%{opacity:0;transform:scale(.72)}100%{opacity:1;transform:scale(1)}}
  .hero-sky .sunset,.hero-sky .moon-orb{opacity:1;background:transparent;box-shadow:none;overflow:visible}
  .hero-sky .sunset:after{display:none}
  .hero-sky .sunset:before,.hero-sky .moon-orb:before{content:"";position:absolute;inset:0;display:block;border-radius:50%}
  .hero-sky .sunset:before{background:radial-gradient(circle,#fffdeb 0 12%,#ffd96e 30%,#ff9b37 55%,rgba(255,139,42,.2) 72%,transparent 75%);box-shadow:0 0 36px rgba(255,188,75,.9),0 0 96px rgba(255,195,90,.48);opacity:0;transform:translate(calc(-78vw + var(--content-rail)),430px) scale(.56);will-change:transform,opacity}
  .hero-sky .moon-orb:before{background:radial-gradient(circle at 31% 28%,#e7f5ff 0 8%,transparent 9%),radial-gradient(circle at 65% 36%,#7691aa 0 8%,transparent 9%),radial-gradient(circle at 43% 64%,#718da7 0 7%,transparent 8%),radial-gradient(circle at 62% 71%,#5f7d99 0 7%,transparent 8%),radial-gradient(circle at 50% 48%,#d8e8f2 0 40%,#6d8aa3 65%,#233d58 82%,transparent 84%);box-shadow:0 0 34px rgba(140,199,255,.38);opacity:1;transform:scale(1);will-change:transform,opacity}
  html[data-theme='light']:not(.theme-to-light):not(.theme-to-dark) .hero-sky .sunset:before{opacity:1;transform:none}
  html[data-theme='light']:not(.theme-to-light):not(.theme-to-dark) .hero-sky .moon-orb:before{opacity:0;transform:scale(.72)}
  html:not([data-theme='light']):not(.theme-to-light):not(.theme-to-dark) .hero-sky .sunset:before{opacity:0;transform:translate(calc(-78vw + var(--content-rail)),430px) scale(.56)}
  html.theme-to-light .hero-sky .sunset:before{animation:landing-sun-orb-rise 2s cubic-bezier(.18,.72,.18,1) both}
  html.theme-to-light .hero-sky .moon-orb:before{animation:landing-moon-orb-out 2s ease both}
  html.theme-to-dark .hero-sky .sunset:before{animation:landing-sun-orb-set 2s cubic-bezier(.35,0,.72,.3) both}
  html.theme-to-dark .hero-sky .moon-orb:before{animation:landing-moon-orb-in 2s ease both}
  @keyframes landing-sun-orb-rise{0%{opacity:0;transform:translate(calc(-78vw + var(--content-rail)),430px) scale(.56)}25%{opacity:1}100%{opacity:1;transform:none}}
  @keyframes landing-sun-orb-set{0%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0;transform:translate(calc(-78vw + var(--content-rail)),430px) scale(.56)}}
  @keyframes landing-moon-orb-out{0%,35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.72)}}
  @keyframes landing-moon-orb-in{0%,62%{opacity:0;transform:scale(.72)}100%{opacity:1;transform:scale(1)}}
  .hero{min-height:clamp(590px,46vw,760px);border-bottom:0}
  .hero-grid{min-height:clamp(590px,46vw,760px)}
  .stage{min-height:100%;height:100%}
  .stage img.hero-integrated{top:auto;bottom:0;transform:translateX(-48%)}
  .features{margin-top:0;padding-top:0}
  .features-kicker{display:inline-flex;margin:18px var(--content-rail) 14px}
  .feature-grid{padding-inline:var(--content-rail);grid-template-columns:repeat(5,minmax(0,1fr));grid-template-areas:'one one one two two' 'three three four four four' 'five five five six six'}
  .feature{min-width:0}
  .feature-copy{padding-left:clamp(20px,2.5vw,42px);padding-right:clamp(20px,2.5vw,42px)}
  .feature-library .feature-copy{position:relative;z-index:5;width:38%;margin-left:31%;padding:clamp(20px,2vw,32px);background:linear-gradient(90deg,rgba(3,12,24,.9),rgba(3,12,24,.62),rgba(3,12,24,.05))}
  .feature-library .library-primary{left:2%;width:28%;height:92%;z-index:3}
  .feature-library .library-search{right:-1%;width:31%;height:88%;opacity:.6;filter:blur(.8px) brightness(.86);z-index:2}
  html[data-theme='light'] .feature-library .feature-copy{background:linear-gradient(90deg,rgba(202,221,234,.96),rgba(202,221,234,.74),rgba(202,221,234,.06))}
  #flow-viewport,.flow-viewport{margin-inline:0;padding-inline:0;background:transparent;isolation:auto;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 92%,transparent 100%)}
  #flow-viewport:before,#flow-viewport:after,.flow-viewport:before,.flow-viewport:after{display:none}
  #pricing .pricing-compact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,1.8vw,30px);align-items:stretch}
  
  #pricing .compact-price-card{min-width:0;width:auto;min-height:340px}
  #pricing .compact-coach-card{order:1}
  #pricing .compact-pro-card{order:2}
  #pricing .compact-chart-card{order:3}
  #pricing .compact-chart-card{display:grid;grid-template-columns:minmax(122px,.82fr) minmax(0,1.18fr);grid-template-rows:auto auto 1fr;column-gap:14px;position:relative;padding:clamp(22px,2vw,32px)}
  #pricing .compact-chart-card:before{content:"";grid-row:1 / 4;grid-column:1;width:min(100%,168px);aspect-ratio:1;align-self:center;justify-self:center;border-radius:50%;background:conic-gradient(#159dff 0 26%,#2867ef 26% 57%,#21c2d1 57% 78%,#0d526e 78% 100%);box-shadow:0 0 0 5px rgba(237,249,255,.72),0 14px 30px rgba(8,105,191,.2)}
  #pricing .compact-chart-card:after{content:"";position:absolute;left:calc(clamp(22px,2vw,32px) + 14px);top:50%;width:calc(min(100%,168px) - 28px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:var(--cold);box-shadow:inset 0 0 0 1px var(--line)}
  #pricing .compact-chart-card h3,
#pricing .compact-chart-period,
#pricing .compact-chart-legend,
#pricing .compact-chart-saving{grid-column:2}
  #pricing .compact-chart-saving{grid-column:1;grid-row:1 / 4;position:relative;z-index:1;width:min(100%,132px);margin:0;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  #pricing .compact-chart-saving span{font-size:11px;line-height:1.2}
  #pricing .compact-chart-saving strong{font-size:clamp(20px,2vw,30px);line-height:1.05}
  .app-showcase{padding-block:34px;min-height:0}
  .app-grid{min-height:440px;grid-template-columns:minmax(280px,31%) minmax(0,69%);align-items:center;overflow:hidden}
  .app-copy{position:relative;z-index:5;align-self:center;width:auto;padding:0}
  .app-copy h2{max-width:440px;white-space:normal;margin:10px 0 18px}
  .app-copy>p:not(.eyebrow){max-width:350px}
  .phones{height:440px;margin:0;align-self:end;overflow:visible}
  .phone,.phone img{border-radius:14px 14px 0 0}
  .contact{padding-block:28px;min-height:0}
  .contact-shell{min-height:300px;padding-block:18px;align-items:center}
  .contact-copy{padding-block:18px}
  .contact .form{padding-block:12px}
  .hero,.hero-grid{min-height:clamp(560px,43vw,700px)}
  .hero{padding-top:0;overflow:hidden}
  .hero-grid{align-items:stretch}
  .hero-copy{padding-top:clamp(116px,9vw,150px);align-self:start}
  .stage{overflow:visible}
  .stage img.hero-integrated{ width:min(116%,1120px); max-width:none; left:53%; top:auto; bottom:-1px; transform:translateX(-50%); animation:none; }
  .pulse-line{display:none}
  .features{padding-top:0;margin-top:0}
  .features-kicker{display:none}
  .feature:first-child .feature-copy{padding-top:clamp(48px,4.4vw,66px)}
  .feature-section-label{ position:absolute; top:clamp(16px,1.5vw,24px); left:clamp(20px,2.5vw,42px); margin:0; z-index:4; }
  .theme,.theme *{transition:color .28s ease,opacity .28s ease,background-color .28s ease}
  .theme i:after{transition:transform .42s cubic-bezier(.2,.8,.2,1),box-shadow .42s ease}
  html[data-theme-target='light'] .theme i:after{transform:translateX(0)}
  html[data-theme-target='dark'] .theme i:after{transform:translateX(18px)}
  html.theme-to-light .hero-sky .sunset,html.theme-to-light .hero-sky .moon-orb, html.theme-to-dark .hero-sky .sunset,html.theme-to-dark .hero-sky .moon-orb{animation:none}
  .hero-sky .sunset,.hero-sky .moon-orb{z-index:1;pointer-events:none}
  .hero-sky .sunset:before,.hero-sky .moon-orb:before{animation-duration:2s;animation-fill-mode:both}
  .flow-visual li,.flow-visual figure{overflow:visible}
  .flow-visual figure{background:transparent;box-shadow:none;filter:none;transition:transform .32s cubic-bezier(.2,.7,.2,1),filter .32s ease,box-shadow .32s ease}
  #pricing .pricing-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2vw,30px)}
  
  #pricing .compact-price-card{min-height:360px}
  #pricing .compact-chart-card{ display:grid; grid-template-columns:132px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:clamp(14px,1.5vw,22px); align-items:start; overflow:hidden; }
  #pricing .compact-chart-card:before{ content:""; grid-column:1; grid-row:1 / 4; width:132px; height:132px; align-self:center; justify-self:center; border-radius:50%; background:conic-gradient(#22c3ff 0 31%,#176df1 31% 66%,#13bdb5 66% 81%,#0c5878 81% 100%); box-shadow:0 0 0 4px rgba(236,250,255,.55),0 12px 28px rgba(10,131,235,.22); }
  #pricing .compact-chart-card:after{display:none}
  #pricing .compact-chart-card h3,
#pricing .compact-chart-period,
#pricing .compact-chart-legend{grid-column:2}
  #pricing .compact-chart-saving{ position:relative; z-index:2; grid-column:1; grid-row:1 / 4; align-self:center; justify-self:center; width:104px; height:104px; margin:0; padding:0; border:0; border-radius:50%; background:var(--cold); box-shadow:none; color:var(--text); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
  #pricing .compact-chart-saving span{font-size:10px;line-height:1.15}
  #pricing .compact-chart-saving strong{color:#4ee35c;font-size:18px;line-height:1.1;white-space:normal}
  
  #pricing .compact-bar{ display:block; width:100%; height:16px; min-height:16px; border-radius:999px; transform-origin:left center; transition:width .35s ease; }
  #pricing .compact-bar-trainer{width:100%;background:linear-gradient(90deg,#97a4af,#687781)}
  #pricing .compact-bar-pro{width:var(--bar-size,18%);background:linear-gradient(90deg,#19b9ff,#1d63ee)}
  .app-showcase{overflow:hidden}
  .app-grid{grid-template-columns:minmax(300px,33%) minmax(0,67%);min-height:430px;overflow:visible}
  .app-copy{max-width:400px}
  .app-copy>p:not(.eyebrow){max-width:340px}
  .phones{ width:100%; height:400px; margin:0; align-self:end; overflow:visible; }
  .phone,.phone img{border-radius:12px 12px 0 0}
  .theme-event{ display:block; position:fixed; inset:0; z-index:90; visibility:hidden; pointer-events:none; opacity:0; background:transparent; }
  .theme-event .theme-sun{display:none}
  .theme-event .theme-horizon{ position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at 72% 17%,rgba(255,248,206,.52),rgba(255,216,138,.22) 28%,rgba(137,199,235,.11) 54%,transparent 76%); }
  .theme-event.sunrise,.theme-event.sunset{visibility:visible}
  .theme-event.sunrise{animation:page-dawn 2s ease-in-out both}
  .theme-event.sunrise .theme-horizon{animation:hero-light-wash 2s ease-in-out both}
  .theme-event.sunset{animation:page-dusk 2s ease-in-out both}
  .theme-event.sunset .theme-horizon{background:radial-gradient(ellipse at 72% 17%,rgba(164,204,233,.2),rgba(67,76,92,.18) 42%,rgba(1,7,17,.38) 76%);animation:hero-dark-wash 2s ease-in-out both}
  @keyframes page-dawn{0%,100%{opacity:0}22%,68%{opacity:1}}
  @keyframes page-dusk{0%,100%{opacity:0}20%,70%{opacity:1}}
  @keyframes hero-light-wash{0%,100%{opacity:0}28%,68%{opacity:1}}
  @keyframes hero-dark-wash{0%,100%{opacity:0}25%,66%{opacity:1}}
  .app-grid{align-items:end}
  .phones{ position:relative; width:100%; height:400px; margin:0; transform:none; overflow:visible; }
  .phone{ width:min(23%,220px); height:auto; aspect-ratio:245 / 500; padding:0; border:0; background:transparent; overflow:hidden; border-radius:14px 14px 0 0; box-shadow:0 18px 38px rgba(0,0,0,.28); }
  .phone:before{display:none}
  .phone img{width:100%;height:100%;object-fit:cover;border-radius:14px 14px 0 0}
  .phone-1{left:0;bottom:0}
  .phone-2{left:25.5%;bottom:0}
  .phone-3{left:51%;bottom:0}
  .phone-4{left:76.5%;bottom:0}
  #pricing .compact-chart-card{ display:grid; grid-template-columns:150px minmax(0,1fr); grid-template-rows:auto auto 1fr; min-height:360px; padding:clamp(22px,2vw,32px); }
  #pricing .compact-chart-card:before{ position:absolute; left:clamp(22px,2vw,32px); top:92px; width:140px; height:140px; margin:0; background:conic-gradient(#22c3ff 0 31%,#176df1 31% 66%,#13bdb5 66% 81%,#0c5878 81% 100%); }
  #pricing .compact-chart-card h3{grid-column:1 / -1;grid-row:1}
  #pricing .compact-chart-period{display:none}
  #pricing .compact-chart-legend{grid-column:2;grid-row:2;align-self:start;margin:24px 0 0}
  
  #pricing .compact-chart-saving{ position:absolute; left:calc(clamp(22px,2vw,32px) + 18px); top:110px; width:104px; height:104px; background:linear-gradient(145deg,var(--panel),var(--panel2)); }
  html[data-theme='light'] #pricing .compact-chart-saving{background:linear-gradient(145deg,#f8fcff,#d8e9f3)}
  .hero-sky .sunset,.hero-sky .moon-orb{display:none}
  .theme{ min-width:150px; height:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:999px; border:1px solid color-mix(in srgb,var(--blue) 52%,var(--line)); background:color-mix(in srgb,var(--panel) 82%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
  .theme i{ width:42px; height:28px; display:flex; flex:0 0 42px; overflow:hidden; border-radius:999px; background:linear-gradient(90deg,#f6c665 0 50%,#132c48 50% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 0 14px rgba(55,156,255,.2); }
  .theme i:after{display:none}
  .theme-half{position:relative;display:block;width:50%;height:100%;overflow:hidden}
  .theme-half{transition:opacity .35s ease,filter .35s ease}
  .theme-half:before{content:"";position:absolute;top:3px;width:22px;height:22px;border-radius:50%}
  .theme-half-sun:before{left:2px;background:radial-gradient(circle,#fffde5 0 17%,#ffd15d 35%,#fb9632 68%,transparent 72%);box-shadow:0 0 11px rgba(255,180,58,.88)}
  .theme-half-moon:before{right:2px;background:radial-gradient(circle at 31% 28%,#eef8ff 0 9%,transparent 10%),radial-gradient(circle at 66% 38%,#708da6 0 8%,transparent 9%),radial-gradient(circle at 48% 67%,#5f7e9b 0 7%,transparent 8%),radial-gradient(circle,#daeaf6 0 46%,#63809b 72%,#24415f 100%);box-shadow:0 0 9px rgba(129,190,255,.35)}
  .theme-day,.theme-night{font-size:13px;line-height:1;transition:color .35s ease,opacity .35s ease,font-weight .35s ease}
  html:not([data-theme='light']) .theme-day,html[data-theme-target='dark'] .theme-day{color:#8fa2b3;opacity:.62;font-weight:600}
  html:not([data-theme='light']) .theme-night,html[data-theme-target='dark'] .theme-night{color:#fff;opacity:1;font-weight:800}
  html[data-theme='light'] .theme-day,html[data-theme-target='light'] .theme-day{color:#123349;opacity:1;font-weight:800}
  html[data-theme='light'] .theme-night,html[data-theme-target='light'] .theme-night{color:#61798a;opacity:.62;font-weight:600}
  html:not([data-theme='light']) .theme-half-sun,html[data-theme-target='dark'] .theme-half-sun{opacity:.32;filter:saturate(.5)}
  html:not([data-theme='light']) .theme-half-moon,html[data-theme-target='dark'] .theme-half-moon{opacity:1;filter:saturate(1.08)}
  html[data-theme='light'] .theme-half-sun,html[data-theme-target='light'] .theme-half-sun{opacity:1;filter:saturate(1.08)}
  html[data-theme='light'] .theme-half-moon,html[data-theme-target='light'] .theme-half-moon{opacity:.32;filter:saturate(.5)}
  .theme-event{z-index:120}
  .theme-event .theme-sun{ display:block; position:fixed; left:22vw; top:62vh; width:58px; height:58px; border-radius:50%; opacity:0; background:radial-gradient(circle,#fffde7 0 16%,#ffd66e 34%,#ff9b36 59%,rgba(255,139,42,.22) 74%,transparent 78%); box-shadow:0 0 36px rgba(255,185,71,.9),0 0 92px rgba(255,195,90,.43); will-change:left,top,width,height,opacity,transform; }
  .theme-event.sunrise .theme-sun{animation:theme-sunrise-to-switch 2s cubic-bezier(.2,.76,.18,1) both}
  .theme-event.sunset .theme-sun{animation:theme-sunset-to-horizon 2s cubic-bezier(.35,0,.72,.3) both}
  @keyframes theme-sunrise-to-switch{ 0%{left:22vw;top:62vh;width:58px;height:58px;opacity:0;transform:scale(.74)} 18%{opacity:1} 100%{left:calc(100vw - var(--content-rail) - 96px);top:18px;width:28px;height:28px;opacity:1;transform:scale(1)} }
  @keyframes theme-sunset-to-horizon{ 0%{left:calc(100vw - var(--content-rail) - 96px);top:18px;width:28px;height:28px;opacity:1;transform:scale(1)} 72%{opacity:1} 100%{left:22vw;top:62vh;width:58px;height:58px;opacity:0;transform:scale(.74)} }
  .feature-section-label,.how .section-head .kicker,.pricing .price-copy .kicker, .app-showcase .eyebrow,.faq .faq-heading .kicker,.contact .contact-copy .kicker{ display:inline-flex; align-items:center; width:max-content; min-height:30px; margin:0; padding:0 12px; border:1px solid color-mix(in srgb,var(--blue) 30%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--panel) 82%,transparent); color:var(--text); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); font-weight:800; letter-spacing:.08em; }
  html[data-theme='light'] .feature-section-label,html[data-theme='light'] .how .section-head .kicker, html[data-theme='light'] .pricing .price-copy .kicker,html[data-theme='light'] .app-showcase .eyebrow, html[data-theme='light'] .faq .faq-heading .kicker,html[data-theme='light'] .contact .contact-copy .kicker{ background:rgba(255,255,255,.72); border-color:rgba(24,87,123,.25); color:#15344a; }
  .how .section-head,.pricing .price-copy,.app-copy,.faq-heading,.contact-copy{padding-top:clamp(18px,2vw,30px)}
  .how .section-head h2,.pricing .price-copy h2,.app-copy h2,.faq-heading h2,.contact-copy h2{margin-top:clamp(16px,1.8vw,24px)}
  :root{--content-rail:clamp(20px,3.4vw,96px)}
  .wrap,.feature-grid{ box-sizing:border-box; width:calc(100% - (var(--content-rail) * 2)); max-width:none; margin-inline:auto; }
  .feature-grid{padding-inline:0}
  .feature-icon{display:none}
  .feature{min-height:clamp(230px,16vw,336px)}
  .feature h3{font-size:clamp(20px,1.42vw,28px)}
  .feature p{font-size:clamp(13px,.92vw,17px)}
  .feature-copy{padding:clamp(26px,2.5vw,52px)}
  .feature:first-child .feature-copy{padding-top:clamp(62px,4vw,86px)}
  .theme{ min-width:0; height:34px; padding:0; gap:8px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .theme i{ width:30px; height:30px; flex-basis:30px; overflow:hidden; border-radius:50%; background:linear-gradient(90deg,#f6c665 0 50%,#132c48 50% 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 10px rgba(55,156,255,.16); }
  .theme-half{width:50%;height:100%}
  .theme-half:before{top:4px;width:22px;height:22px}
  .theme-half-sun:before{left:-4px}
  .theme-half-moon:before{right:-4px}
  .theme-day,.theme-night{font-size:13px}
  .theme-event .theme-sun{transform:translate(-50%,-50%)}
  @keyframes theme-sunrise-to-switch{ 0%{left:22vw;top:62vh;width:58px;height:58px;opacity:0;transform:translate(-50%,-50%) scale(.74)} 18%{opacity:1} 100%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:30px;height:30px;opacity:1;transform:translate(-50%,-50%) scale(1)} }
  @keyframes theme-sunset-to-horizon{ 0%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:30px;height:30px;opacity:1;transform:translate(-50%,-50%) scale(1)} 72%{opacity:1} 100%{left:22vw;top:62vh;width:58px;height:58px;opacity:0;transform:translate(-50%,-50%) scale(.74)} }
  .feature:first-child .dashboard-crop img{top:-92px}
  .feature:nth-child(5) .reminder-crop img{ width:clamp(205px,17vw,310px); height:auto; top:clamp(4px,.6vw,12px); right:clamp(1%,2vw,5%); }
  .feature:nth-child(6) .progress-crop img{ width:clamp(230px,18vw,330px); height:auto; top:clamp(-10px,-.5vw,0px); right:clamp(-1%,1vw,3%); }
  .feature-library{isolation:isolate;overflow:hidden}
  .feature-library .feature-copy{ width:42%; margin:0; padding:clamp(30px,3.2vw,54px); background:linear-gradient(90deg,rgba(3,12,24,.96) 0%,rgba(3,12,24,.9) 76%,rgba(3,12,24,0) 100%); z-index:5; }
  .feature-library .library-primary{ left:auto; right:clamp(17%,15vw,22%); bottom:0; width:clamp(205px,18vw,340px); height:92%; z-index:4; }
  .feature-library .library-search{ left:auto; right:clamp(-2%,0vw,0%); bottom:clamp(2px,.8vw,12px); width:clamp(185px,16vw,300px); height:84%; opacity:.54; filter:blur(.65px) brightness(.8); z-index:3; }
  html[data-theme='light'] .feature-library .feature-copy{ background:linear-gradient(90deg,rgba(221,235,244,.98) 0%,rgba(221,235,244,.9) 76%,rgba(221,235,244,0) 100%); }
  .contact .contact-shell{ box-sizing:border-box; width:calc(100% - (var(--content-rail) * 2)); max-width:none; margin-inline:auto; }
  :root{--content-rail:clamp(20px,3.4vw,96px)}
  html body .top .top-inner, html body #hero .hero-grid, html body #features .feature-grid, html body #how > .wrap, html body #pricing > .wrap, html body #app .wrap.app-grid, html body #faq > .wrap, html body #contact > .wrap, html body .foot > .wrap{ box-sizing:border-box; width:calc(100% - (var(--content-rail) * 2)); max-width:none; margin-inline:auto; }
  :root{--content-rail:clamp(22px,4.1vw,124px)}
  html,body{overflow-x:hidden}
  html body .top .top-inner, html body #hero .hero-grid, html body #features .feature-grid, html body #how > .wrap, html body #pricing > .wrap, html body #app .wrap.app-grid, html body #faq > .wrap, html body #contact > .wrap, html body .foot > .wrap{ box-sizing:border-box; width:calc(100% - (var(--content-rail) * 2)); max-width:none; margin-inline:auto; }
  .theme{ min-width:164px; height:36px; padding:0; gap:8px; justify-content:center; border:0; outline:0; border-radius:0; background:transparent; box-shadow:none; white-space:nowrap; }
  .theme i{ width:30px; height:30px; flex:0 0 30px; overflow:hidden; border:0; border-radius:50%; background:url('/assets/theme-sun-moon.png') center/cover no-repeat; box-shadow:none; }
  .theme .theme-half{display:none}
  .theme .theme-day,.theme .theme-night{ font-size:clamp(10px,.78vw,12px); line-height:1; }
  #features .feature:first-child .dashboard-crop img{top:-126px}
  #features .feature:nth-child(5) .reminder-crop img{ width:clamp(175px,14vw,270px); height:auto; top:0; right:clamp(1%,2vw,5%); }
  #features .feature:nth-child(6) .progress-crop img{ width:clamp(190px,14.5vw,270px); height:auto; top:clamp(-6px,-.35vw,0px); right:clamp(-1%,1vw,3%); }
  #features .feature-library{ isolation:isolate; overflow:hidden; }
  #features .feature-library .feature-copy{ position:absolute; inset:0 auto 0 0; width:43%; margin:0; padding:clamp(30px,3.2vw,54px); z-index:5; background:linear-gradient(90deg,rgba(3,12,24,.98) 0%,rgba(3,12,24,.93) 80%,rgba(3,12,24,0) 100%); }
  #features .feature-library .library-primary{ position:absolute; left:auto; right:clamp(17%,15vw,22%); bottom:0; width:clamp(205px,18vw,340px); height:94%; z-index:4; }
  #features .feature-library .library-search{ position:absolute; left:auto; right:clamp(-2%,0vw,1%); bottom:clamp(3px,.7vw,11px); width:clamp(185px,16vw,300px); height:78%; opacity:.56; filter:blur(.65px) brightness(.79); z-index:3; }
  html[data-theme='light'] #features .feature-library .feature-copy{ background:linear-gradient(90deg,rgba(221,235,244,.98) 0%,rgba(221,235,244,.93) 80%,rgba(221,235,244,0) 100%); }
  #contact .contact-shell{ box-sizing:border-box; width:calc(100% - (var(--content-rail) * 2)); max-width:none; margin-inline:auto; }
  html body #features .feature-grid{padding-inline:0}
  .theme{ min-width:154px; height:36px; padding:0 2px; gap:7px; justify-content:center; white-space:nowrap; overflow:visible; border:0; outline:0; background:transparent; box-shadow:none; }
  .theme i{ width:30px; height:30px; flex:0 0 30px; border:0; border-radius:50%; overflow:hidden; background:url('assets/theme-sun-moon.png') center/cover no-repeat; box-shadow:none; }
  .theme .theme-half{display:none}
  .theme .theme-day,.theme .theme-night{font-size:11px;line-height:1}
  #pricing .compact-chart-card{ display:grid; grid-template-columns:clamp(138px,12vw,184px) minmax(0,1fr); grid-template-rows:auto 1fr; gap:0 clamp(18px,1.7vw,30px); min-height:clamp(320px,24vw,400px); padding:clamp(22px,2vw,34px); overflow:hidden; }
  #pricing .compact-chart-card::before{ content:''; position:absolute; left:clamp(24px,2.1vw,38px); top:50%; width:clamp(132px,11.2vw,176px); aspect-ratio:1; border-radius:50%; transform:translateY(-36%); background:conic-gradient(from -36deg,#18bde8 0 26%,#126cff 26% 60%,#1ab7ae 60% 82%,#104d73 82% 100%); -webkit-mask:radial-gradient(circle,transparent 0 47%,#000 48%); mask:radial-gradient(circle,transparent 0 47%,#000 48%); box-shadow:0 14px 28px rgba(14,121,225,.2); z-index:0; }
  #pricing .compact-chart-card h3{grid-column:1 / -1;grid-row:1;position:relative;z-index:2;margin:0}
  #pricing .compact-chart-period{display:none}
  #pricing .compact-chart-legend{ grid-column:2; grid-row:2; align-self:start; margin:clamp(18px,1.8vw,28px) 0 0; position:relative; z-index:2; }
  
  
  #pricing .compact-bar-trainer{background:linear-gradient(90deg,#92a0ac,#c9d2da)}
  #pricing .compact-bar-pro{background:linear-gradient(90deg,#0f65f7,#1cbcf2)}
  #pricing .compact-chart-saving{ left:clamp(37px,3.2vw,57px); top:50%; width:clamp(106px,8.8vw,140px); height:clamp(106px,8.8vw,140px); padding:12px; transform:translateY(-36%); border:clamp(5px,.5vw,8px) solid var(--panel); border-radius:50%; background:var(--panel); box-shadow:none; z-index:1; }
  :root{--content-rail:clamp(22px,4.1vw,124px)}
  html,body{overflow-x:hidden}
  html body .top .top-inner, html body #hero .hero-grid, html body #features .feature-grid, html body #how > .wrap, html body #pricing > .wrap, html body #app .wrap.app-grid, html body #faq > .wrap, html body #contact > .wrap, html body .foot > .wrap{ width:calc(100% - var(--content-rail)*2); max-width:none; margin-inline:auto; box-sizing:border-box; }
  .theme{min-width:164px;height:36px;padding:0;gap:8px;justify-content:center;border:0;outline:0;border-radius:0;background:transparent;box-shadow:none;white-space:nowrap}
  .theme i{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:50%;overflow:hidden;background:url('/assets/theme-sun-moon.png') center/cover no-repeat;box-shadow:none}
  .theme .theme-half{display:none}
  .theme .theme-day,.theme .theme-night{font-size:clamp(10px,.78vw,12px);line-height:1}
  #features .feature:first-child .dashboard-crop img{top:-126px}
  #features .feature:nth-child(5) .reminder-crop img{width:clamp(175px,14vw,270px);height:auto;top:0;right:clamp(1%,2vw,5%)}
  #features .feature:nth-child(6) .progress-crop img{width:clamp(190px,14.5vw,270px);height:auto;top:clamp(-6px,-.35vw,0px);right:clamp(-1%,1vw,3%)}
  #features .feature-library{isolation:isolate;overflow:hidden}
  #features .feature-library .feature-copy{position:absolute;inset:0 auto 0 0;width:43%;margin:0;padding:clamp(30px,3.2vw,54px);z-index:5;background:linear-gradient(90deg,rgba(3,12,24,.98) 0%,rgba(3,12,24,.93) 80%,rgba(3,12,24,0) 100%)}
  #features .feature-library .library-primary{position:absolute;left:auto;right:clamp(17%,15vw,22%);bottom:0;width:clamp(205px,18vw,340px);height:94%;z-index:4}
  #features .feature-library .library-search{position:absolute;left:auto;right:clamp(-2%,0vw,1%);bottom:clamp(3px,.7vw,11px);width:clamp(185px,16vw,300px);height:78%;opacity:.56;filter:blur(.65px) brightness(.79);z-index:3}
  html[data-theme='light'] #features .feature-library .feature-copy{background:linear-gradient(90deg,rgba(221,235,244,.98) 0%,rgba(221,235,244,.93) 80%,rgba(221,235,244,0) 100%)}
  #contact .contact-shell{box-sizing:border-box;width:calc(100% - var(--content-rail)*2);max-width:none;margin-inline:auto}
  html body .top .top-inner, html body #hero .hero-grid, html body #features .feature-grid, html body #how > .wrap, html body #pricing > .wrap, html body #app .wrap.app-grid, html body #faq > .wrap, html body #contact > .wrap, html body .foot > .wrap{ padding-inline:0; }
  html body #features .feature-grid{padding-block:0}
  #features .feature:first-child .dashboard-crop img{top:-154px}
  #features .feature:nth-child(5) .reminder-crop img{ width:clamp(160px,12.8vw,238px); top:-3px; }
  #features .feature:nth-child(6) .progress-crop img{ width:clamp(178px,13vw,244px); top:-10px; }
  .top .tools{margin-left:auto}
  .theme{justify-content:flex-end;min-width:158px}
  .theme i{position:relative;display:flex;isolation:isolate;background:transparent}
  .theme .theme-half{display:block;position:relative;width:50%;height:100%;overflow:hidden;background-image:url('/assets/theme-sun-moon.png');background-size:200% 100%;background-repeat:no-repeat;transition:filter .5s ease,opacity .5s ease,box-shadow .5s ease}
  .theme .theme-half-sun{background-position:left center;border-radius:50% 0 0 50%}
  .theme .theme-half-moon{background-position:right center;border-radius:0 50% 50% 0}
  html:not([data-theme='light']) .theme-half-sun{filter:brightness(.52) saturate(.45);opacity:.58}
  html:not([data-theme='light']) .theme-half-moon{filter:brightness(1.24) saturate(1.16);opacity:1;box-shadow:-2px 0 8px rgba(130,205,255,.72)}
  html[data-theme='light'] .theme-half-sun{filter:brightness(1.17) saturate(1.18);opacity:1;box-shadow:2px 0 8px rgba(255,186,65,.72)}
  html[data-theme='light'] .theme-half-moon{filter:brightness(.48) saturate(.42);opacity:.58}
  .hero-sky .sunset,.hero-sky .moon-orb{display:block}
  .hero-sky .mountains{z-index:2}
  .hero-sky .sunset{z-index:1}
  html.theme-to-dark body:after,.theme-event.sunset .theme-horizon{display:none}
  html[data-theme='light'].theme-to-dark .hero-sky .sunset{left:18%;bottom:-9%;opacity:1;transform:scale(.86);transition:left 1.72s cubic-bezier(.2,.72,.18,1),bottom 1.72s cubic-bezier(.2,.72,.18,1),opacity .22s linear 1.52s,transform 1.72s cubic-bezier(.2,.72,.18,1)}
  html[data-theme='light'].theme-to-dark .hero-sky .moon-orb{opacity:0;transform:scale(.72);transition-delay:0s}
  html:not([data-theme='light']):not(.theme-to-light) .hero-sky .sunset{opacity:0}
  #contact .contact-shell{width:100%;max-width:none;margin:0}
  #faq > .wrap,#contact > .wrap,.foot > .wrap{width:calc(100% - var(--content-rail)*2);max-width:none;margin-inline:auto}
  #faq .faq-grid,#contact .contact-shell,.foot .foot-grid,.foot .foot-end{box-sizing:border-box;width:100%}
  #how.block{padding-top:clamp(26px,2.2vw,38px)}
  #pricing.block{padding-block:clamp(30px,2.8vw,46px)}
  #app.app-showcase{padding-top:clamp(22px,2.2vw,38px);padding-bottom:clamp(20px,2vw,34px)}
  #app .app-grid{min-height:0}
  #app .app-title{white-space:nowrap;font-size:clamp(28px,2.55vw,50px);letter-spacing:-.045em}
  #app .app-title-brand{color:inherit}
  .app-title-brand .dot{color:var(--blue)}
  #faq .faq-heading h2,#contact .contact-copy h2{font-size:clamp(32px,3.25vw,54px);line-height:1.06}
  #contact .contact-copy{padding-left:0}
  #features .feature:first-child .dashboard-crop img{width:clamp(190px,15vw,280px);top:-92px;right:clamp(0%,1vw,3%)}
  #features .feature:nth-child(2) .adapt-technique-crop img{width:clamp(162px,13vw,238px);top:6px;right:clamp(-1%,1vw,3%)}
  #features .feature:nth-child(3) .list-crop img{width:clamp(170px,13vw,230px);top:10px;left:auto;right:clamp(-2%,1vw,4%)}
  #features .feature-library .library-primary{right:clamp(19%,16vw,24%);width:clamp(188px,16.5vw,310px);height:88%}
  #features .feature-library .library-search{right:0;bottom:clamp(18px,2vw,30px);width:clamp(170px,14.5vw,270px);height:70%}
  #pricing .compact-main-price{margin:clamp(18px,1.8vw,28px) 0 4px}
  #pricing .compact-main-price strong{font-size:clamp(28px,2.55vw,46px);line-height:1}
  #pricing .compact-total-price{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;color:var(--muted);font-size:13px}
  #pricing .compact-total-price strong{color:var(--ink);font-size:clamp(16px,1.35vw,22px)}
  #pricing .compact-effective{display:none}
  #pricing .compact-chart-saving{left:clamp(24px,2.1vw,38px);top:50%;transform:translateY(-36%)}
  #pricing .compact-coach-card .compact-trainer{right:0;bottom:0;height:72%;width:auto;max-width:42%;object-fit:contain;object-position:right bottom}
  .hero-sky .sunset,.hero-sky .moon-orb, .hero-sky .sunset::before,.hero-sky .moon-orb::before, .hero-sky .sunset::after{display:none}
  .theme-event{z-index:120;background:transparent;mix-blend-mode:normal;pointer-events:none}
  .theme-event .theme-horizon{display:none}
  .theme-event.sunrise,.theme-event.sunset{visibility:visible;animation:none}
  .theme-event .theme-sun{display:block;left:18vw;top:clamp(420px,58vh,680px);width:58px;height:58px;opacity:0;transform:translate(-50%,-50%) scale(.74)}
  .theme-event.sunrise .theme-sun{animation:theme-sunrise-to-switch 2s cubic-bezier(.2,.76,.18,1) both}
  .theme-event.sunset .theme-sun{animation:theme-sunset-to-horizon 2s cubic-bezier(.35,0,.72,.3) both}
  @keyframes theme-sunrise-to-switch{ 0%{left:18vw;top:clamp(420px,58vh,680px);width:58px;height:58px;opacity:0;transform:translate(-50%,-50%) scale(.74)} 18%{opacity:1} 100%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:30px;height:30px;opacity:1;transform:translate(-50%,-50%) scale(1)} }
  @keyframes theme-sunset-to-horizon{ 0%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:30px;height:30px;opacity:1;transform:translate(-50%,-50%) scale(1)} 70%{opacity:1} 100%{left:18vw;top:clamp(420px,58vh,680px);width:58px;height:58px;opacity:0;transform:translate(-50%,-50%) scale(.74)} }
  :root{--content-rail:clamp(22px,4.1vw,96px)}
  html body .top .top-inner, html body #hero .hero-grid, html body #features .feature-grid, html body #how > .wrap, html body #pricing > .wrap, html body #app > .wrap, html body #faq > .wrap, html body #contact > .wrap, html body .foot > .wrap{width:calc(100% - var(--content-rail)*2);max-width:none;margin-inline:auto;padding-inline:0;box-sizing:border-box}
  .top .tools{margin-left:auto;justify-content:flex-end}
  .theme{min-width:156px;justify-content:flex-end}
  #contact .contact-shell,#contact .form,#contact .contact-copy,.foot .foot-grid,.foot .foot-end{width:100%;max-width:none;box-sizing:border-box}
  #contact .contact-shell{margin:0}
  #features .feature{overflow:hidden}
  #features .feature::before,#features .feature-visual::before{content:none;display:none}
  #features .feature:first-child .feature-copy{position:relative;z-index:3}
  #features .feature:first-child .dashboard-crop img{width:clamp(182px,13.4vw,246px);top:-54px;right:clamp(1%,2vw,5%)}
  #features .feature:nth-child(2) .adapt-technique-crop img{width:clamp(150px,11.8vw,210px);top:14px;right:clamp(1%,2vw,5%)}
  #features .feature:nth-child(3) .list-crop img{width:clamp(152px,11.8vw,208px);top:22px;right:clamp(1%,2vw,5%);left:auto}
  #features .feature-library .feature-copy{position:absolute;inset:0 auto 0 0;width:42%;margin:0;padding:clamp(28px,3vw,48px);background:linear-gradient(90deg,rgba(3,12,24,.98) 0%,rgba(3,12,24,.91) 78%,transparent 100%)}
  html[data-theme='light'] #features .feature-library .feature-copy{background:linear-gradient(90deg,rgba(221,235,244,.98) 0%,rgba(221,235,244,.91) 78%,transparent 100%)}
  #features .feature-library .library-primary{left:auto;right:clamp(19%,16vw,24%);bottom:0;width:clamp(180px,15.5vw,286px);height:86%}
  #features .feature-library .library-search{left:auto;right:0;bottom:clamp(20px,2vw,32px);width:clamp(160px,13.5vw,248px);height:66%}
  #how.block{padding-top:clamp(20px,1.8vw,32px);padding-bottom:clamp(26px,2.2vw,38px)}
  #pricing.block{padding-top:clamp(26px,2.2vw,40px);padding-bottom:clamp(26px,2.2vw,40px)}
  #app.app-showcase{padding-top:clamp(20px,1.8vw,32px);padding-bottom:0}
  #app .app-grid{min-height:0;align-items:end}
  #app .app-copy{padding-bottom:clamp(34px,3.2vw,58px)}
  #app .app-title,#faq .faq-heading h2,#contact .contact-copy h2{font-size:clamp(24px,2.05vw,38px);line-height:1.06;letter-spacing:-.04em}
  #app .app-title{white-space:nowrap;max-width:none}
  #app .app-title-brand .dot{color:var(--blue)}
  #app .phones{height:clamp(340px,27vw,470px);margin:0;overflow:hidden}
  #app .phone{transform:scale(.86);transform-origin:center bottom}
  #pricing .compact-main-price{margin:clamp(16px,1.5vw,24px) 0 4px}
  #pricing .compact-main-price strong{font-size:clamp(28px,2.45vw,44px);line-height:1}
  #pricing .compact-total-price{display:flex;gap:8px;align-items:baseline;margin:0 0 14px;color:var(--muted)}
  #pricing .compact-total-price strong{color:var(--ink);font-size:clamp(16px,1.3vw,21px)}
  #pricing .compact-effective{display:none}
  #pricing .compact-chart-saving{left:clamp(24px,2.1vw,38px);top:50%;transform:translateY(-36%)}
  #pricing .compact-coach-card .compact-trainer{right:0;bottom:0;height:74%;width:auto;max-width:40%;object-fit:contain;object-position:right bottom}
  @media (max-width:900px){:root{--content-rail:20px} .hero,.hero-grid{min-height:640px} .stage{height:520px;min-height:0;bottom:0} .stage img.hero-integrated{bottom:0} .feature-grid{grid-template-columns:1fr;grid-template-areas:'one' 'two' 'three' 'four' 'five' 'six'} #pricing .pricing-compact{grid-template-columns:1fr 1fr} #pricing .compact-chart-card{grid-column:1/-1} .app-grid{grid-template-columns:1fr;min-height:620px} .app-copy{padding-top:10px} .phones{height:390px;margin-top:0} .hero,.hero-grid{min-height:640px} .hero-copy{padding-top:94px} .stage img.hero-integrated{width:min(980px,110vw);left:52%} .feature-section-label{top:16px} #pricing .pricing-compact{grid-template-columns:1fr 1fr} #pricing .compact-chart-card{grid-column:1/-1} .app-grid{grid-template-columns:1fr;min-height:620px} .phones{width:100%;height:360px;transform-origin:center bottom} .phones{height:360px;transform:none;overflow-x:auto;overflow-y:hidden;display:flex;gap:14px;padding:8px 4px 20px} .phone{position:relative;left:auto;bottom:auto;flex:0 0 170px;width:170px;height:347px;aspect-ratio:auto} :root{--content-rail:20px} .wrap,.feature-grid{width:calc(100% - 40px)} .feature-grid{padding:0} .feature-library .feature-copy{width:100%;background:linear-gradient(180deg,rgba(3,12,24,.94),rgba(3,12,24,.18))} .feature-library .library-primary{right:18%;width:48%} .feature-library .library-search{right:-3%;width:42%} .contact .contact-shell{width:calc(100% - (var(--content-rail) * 2))} :root{--content-rail:20px} #features .feature-library .feature-copy{ position:relative; width:100%; min-height:46%; background:linear-gradient(180deg,rgba(3,12,24,.95),rgba(3,12,24,.22)); } #features .feature-library .library-primary{right:18%;width:48%} #features .feature-library .library-search{right:-3%;width:42%} #contact .contact-shell{width:calc(100% - (var(--content-rail) * 2))} .theme{min-width:132px;height:32px;gap:5px} .theme i{width:28px;height:28px;flex-basis:28px} .theme .theme-day,.theme .theme-night{font-size:11px} #pricing .compact-chart-card{grid-template-columns:132px minmax(0,1fr)} :root{--content-rail:20px} .theme{min-width:132px;height:32px;gap:5px} .theme i{width:28px;height:28px;flex-basis:28px} .theme .theme-day,.theme .theme-night{font-size:11px} #features .feature-library .feature-copy{position:relative;width:100%;min-height:46%;background:linear-gradient(180deg,rgba(3,12,24,.95),rgba(3,12,24,.22))} #features .feature-library .library-primary{right:18%;width:48%} #features .feature-library .library-search{right:-3%;width:42%} #contact .contact-shell{width:calc(100% - var(--content-rail)*2)} #hero.hero,#hero .hero-grid{min-height:auto;height:auto} #hero .hero-copy{padding-top:clamp(84px,16vw,132px)} #features .feature:first-child .dashboard-crop img{top:-96px} .theme{min-width:132px} #contact .contact-shell{width:100%} #app .app-title{white-space:normal} :root{--content-rail:20px} .theme{min-width:132px} #app .app-title{white-space:normal} #app .phones{height:360px;overflow:visible} #app .phone{transform:scale(.72)} #features .feature-library .feature-copy{position:relative;width:100%;min-height:46%} #features .feature-library .library-primary{right:18%;width:48%} #features .feature-library .library-search{right:-3%;width:42%}}
  @media (max-width:600px){:root{--content-rail:16px} .hero,.hero-grid{min-height:650px} .hero-copy{padding-top:76px} .hero-sky .sunset,.hero-sky .moon-orb{right:18px;top:76px;width:54px;height:54px} #pricing .pricing-compact{grid-template-columns:1fr} #pricing .compact-chart-card{grid-column:auto;grid-template-columns:115px minmax(0,1fr)} .app-grid{min-height:570px}.phones{height:320px} .contact-shell{min-height:0} .hero,.hero-grid{min-height:670px} .hero-copy{padding-top:92px;max-width:72%} .stage img.hero-integrated{width:750px;left:56%} #pricing .pricing-compact{grid-template-columns:1fr} #pricing .compact-chart-card{grid-column:auto;grid-template-columns:124px minmax(0,1fr)} .app-grid{min-height:590px} .phones{height:300px;transform-origin:center bottom} .theme{min-width:128px;height:40px;padding-inline:9px;gap:6px} .theme i{width:38px;flex-basis:38px;height:26px} .theme-day,.theme-night{font-size:12px} .theme-event .theme-sun{left:18vw;top:66vh} @keyframes theme-sunrise-to-switch{0%{left:18vw;top:66vh;width:52px;height:52px;opacity:0;transform:scale(.74)}18%{opacity:1}100%{left:calc(100vw - var(--content-rail) - 84px);top:12px;width:26px;height:26px;opacity:1;transform:scale(1)}} @keyframes theme-sunset-to-horizon{0%{left:calc(100vw - var(--content-rail) - 84px);top:12px;width:26px;height:26px;opacity:1;transform:scale(1)}72%{opacity:1}100%{left:18vw;top:66vh;width:52px;height:52px;opacity:0;transform:scale(.74)}} :root{--content-rail:16px} .wrap,.feature-grid{width:calc(100% - 32px)} .feature{min-height:225px} .theme{height:32px;gap:6px} .theme i{width:28px;height:28px;flex-basis:28px} .theme-day,.theme-night{font-size:12px} @keyframes theme-sunrise-to-switch{ 0%{left:18vw;top:66vh;width:52px;height:52px;opacity:0;transform:translate(-50%,-50%) scale(.74)} 18%{opacity:1} 100%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:28px;height:28px;opacity:1;transform:translate(-50%,-50%) scale(1)} } @keyframes theme-sunset-to-horizon{ 0%{left:var(--theme-orb-left);top:var(--theme-orb-top);width:28px;height:28px;opacity:1;transform:translate(-50%,-50%) scale(1)} 72%{opacity:1} 100%{left:18vw;top:66vh;width:52px;height:52px;opacity:0;transform:translate(-50%,-50%) scale(.74)} }}
  @media (hover:hover) and (pointer:fine){.flow-visual li:hover figure,.flow-visual figure:hover{ z-index:8; transform:translateY(-5px) scale(1.14); filter:brightness(1.08); box-shadow:0 0 0 1px rgba(81,206,255,.7),0 16px 34px rgba(0,128,255,.24); }}
  @media (min-width:901px){.hero,.hero-grid{min-height:clamp(590px,45vw,730px)} .stage img.hero-integrated{ left:auto; right:clamp(-250px,-16vw,-120px); bottom:-1px; width:auto; height:calc(100% + 8px); max-width:none; transform:none; } .hero,.hero-grid{min-height:clamp(590px,42vw,860px)} .hero-grid{ grid-template-columns:minmax(360px,.92fr) minmax(480px,1.08fr); column-gap:clamp(0px,1.8vw,34px); } .hero-copy{padding-top:clamp(76px,4.8vw,118px)} .hero-copy h1{font-size:clamp(48px,3.45vw,72px);max-width:680px} .hero-copy .lead{font-size:clamp(16px,1.05vw,20px);max-width:540px} .stage{height:100%;min-height:0;margin-top:0;transform:none} .stage img.hero-integrated{ left:50%; right:auto; bottom:0; width:min(100%,clamp(560px,45vw,980px)); height:auto; max-height:calc(100% + 6px); object-fit:contain; transform:translateX(-50%); } .hero,.hero-grid{min-height:clamp(570px,40vw,820px)} .hero-grid{grid-template-columns:minmax(360px,.9fr) minmax(500px,1.1fr)} .hero-copy{padding-top:clamp(68px,4.2vw,102px)} .stage img.hero-integrated{ left:56%; width:min(136%,clamp(660px,56vw,1220px)); height:auto; max-height:none; bottom:-2px; transform:translateX(-50%); } #hero.hero,#hero .hero-grid{ min-height:clamp(630px,46vw,940px); height:clamp(630px,46vw,940px); } #hero .hero-grid{ grid-template-columns:minmax(350px,.74fr) minmax(510px,1.26fr); column-gap:clamp(18px,2vw,50px); } #hero .hero-copy{ position:relative; z-index:3; align-self:start; padding-top:clamp(118px,7.5vw,164px); padding-bottom:clamp(30px,4vw,72px); } #hero .hero-copy h1{max-width:650px} #hero .stage{ height:100%; min-height:0; overflow:hidden; } #hero .stage img.hero-integrated{ left:59%; right:auto; bottom:0; width:auto; height:min(100%,clamp(575px,45vw,900px)); max-height:none; object-fit:contain; transform:translateX(-50%); } .hero,.hero-grid{min-height:clamp(630px,43vw,900px)} .hero-grid{ grid-template-columns:minmax(390px,.84fr) minmax(510px,1.16fr); column-gap:clamp(20px,2vw,48px); } .hero-copy{padding-top:clamp(124px,8.3vw,180px);align-self:start} .hero-copy h1{max-width:640px} .stage{overflow:hidden} .stage img.hero-integrated{ left:62%; right:auto; bottom:0; width:min(175%,clamp(900px,66vw,1500px)); height:auto; max-height:calc(100% - 2px); object-fit:contain; transform:translateX(-50%); } #hero.hero,#hero .hero-grid{min-height:clamp(630px,46vw,940px);height:clamp(630px,46vw,940px)} #hero .hero-grid{grid-template-columns:minmax(350px,.74fr) minmax(510px,1.26fr);column-gap:clamp(18px,2vw,50px)} #hero .hero-copy{position:relative;z-index:3;align-self:start;padding-top:clamp(118px,7.5vw,164px);padding-bottom:clamp(30px,4vw,72px)} #hero .hero-copy h1{max-width:650px} #hero .stage{height:100%;min-height:0;overflow:hidden} #hero .stage img.hero-integrated{left:59%;right:auto;bottom:0;width:auto;height:min(100%,clamp(575px,45vw,900px));max-height:none;object-fit:contain;transform:translateX(-50%)} #hero.hero,#hero .hero-grid{ min-height:clamp(660px,49vw,980px); height:clamp(660px,49vw,980px); } #hero .hero-grid{ grid-template-columns:minmax(350px,.72fr) minmax(520px,1.28fr); } #hero .hero-copy{ padding-top:clamp(132px,8.7vw,188px); align-self:start; } #hero .stage img.hero-integrated{ left:57%; height:clamp(680px,55vw,1060px); max-width:none; } #hero.hero,#hero .hero-grid{min-height:clamp(620px,47vw,880px);height:clamp(620px,47vw,880px)} #hero .hero-grid{grid-template-columns:minmax(370px,.8fr) minmax(530px,1.2fr);column-gap:clamp(20px,2.2vw,48px)} #hero .hero-copy{padding-top:clamp(100px,6.7vw,138px)} #hero .stage{display:flex;align-items:flex-end;justify-content:center;overflow:hidden} #hero .stage img.hero-integrated{position:relative;inset:auto;display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;transform:none} #hero.hero,#hero .hero-grid{height:clamp(620px,46vw,860px);min-height:clamp(620px,46vw,860px)} #hero .hero-grid{grid-template-columns:minmax(360px,.8fr) minmax(540px,1.2fr);column-gap:clamp(22px,2.2vw,50px)} #hero .hero-copy{padding-top:clamp(88px,5.8vw,124px);z-index:3} #hero .hero-copy .eyebrow{margin-top:0} #hero .stage{display:flex;align-items:flex-end;justify-content:center;overflow:hidden} #hero .stage img.hero-integrated{position:relative;inset:auto;display:block;width:100%;height:auto;max-width:100%;max-height:100%;object-fit:contain;object-position:center bottom;transform:none}}
  @media (min-width:1700px){.hero,.hero-grid{min-height:clamp(730px,42vw,920px)} .hero-copy{padding-top:clamp(142px,8vw,180px)} .hero-copy h1{font-size:clamp(56px,4.2vw,86px)} .stage img.hero-integrated{height:calc(100% + 12px)} .hero,.hero-grid{min-height:clamp(720px,38vw,900px)} .hero-copy{padding-top:clamp(92px,5.1vw,132px)} .hero-copy h1{font-size:clamp(58px,3.25vw,76px)}}
}

/* audit */
/* Canonical landing layout: shared geometry, pricing cards, themes and responsive rules. */
  :root { --content-rail: clamp(22px, 4.1vw, 96px); --app-light-surface: linear-gradient(117deg, #f7dcc6 0%, #e7f0f3 44%, #bddcf0 100%); }
  .top .top-inner, #hero .hero-grid, #features .feature-grid, #how > .wrap, #pricing > .wrap, #app > .wrap, #faq > .wrap, #contact > .wrap, .foot > .wrap { box-sizing: border-box; width: calc(100% - var(--content-rail) * 2); max-width: none; margin-inline: auto; padding-inline: 0; }
  .top .tools { margin-left: auto; justify-content: flex-end; }
  button.theme, html[data-theme='light'] button.theme, html.theme-to-light button.theme, html.theme-to-dark button.theme { min-width: 156px; height: 36px; padding: 0; gap: 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; justify-content: flex-end; }
  .theme i { position: relative; display: flex; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
  .theme i::after, .theme .theme-half::before { display: none; }
  .theme .theme-half { position: relative; display: block; width: 50%; height: 100%; overflow: hidden; background-image: url('/assets/theme-sun-moon.png'); background-repeat: no-repeat; background-size: 200% 100%; transition: filter .45s ease, opacity .45s ease, box-shadow .45s ease; }
  .theme .theme-half-sun { background-position: left center; border-radius: 50% 0 0 50%; }
  .theme .theme-half-moon { background-position: right center; border-radius: 0 50% 50% 0; }
  html:not([data-theme='light']) .theme-half-sun { opacity: .5; filter: brightness(.55) saturate(.42); }
  html:not([data-theme='light']) .theme-half-moon { opacity: 1; filter: brightness(1.2) saturate(1.1); box-shadow: -2px 0 8px rgba(131, 205, 255, .72); }
  html[data-theme='light'] .theme-half-sun { opacity: 1; filter: brightness(1.13) saturate(1.12); box-shadow: 2px 0 8px rgba(255, 187, 65, .72); }
  html[data-theme='light'] .theme-half-moon { opacity: .5; filter: brightness(.55) saturate(.42); }
  .hero-sky .sunset, .hero-sky .moon-orb, .hero-sky .sunset::before, .hero-sky .moon-orb::before, .hero-sky .sunset::after { display: none; }
  html.theme-to-dark body::after, .theme-event, .theme-event .theme-horizon, .theme-event .theme-sun { display: none; }
  #features .feature { overflow: hidden; }
  #features .feature::before, #features .feature-visual::before { content: none; display: none; }
  #features .feature:first-child .feature-copy { position: relative; z-index: 3; }
  #features .feature:first-child .dashboard-crop img { width: clamp(182px, 13.4vw, 246px); top: -54px; right: clamp(1%, 2vw, 5%); }
  #features .feature:nth-child(2) .adapt-technique-crop img { width: clamp(150px, 11.8vw, 210px); top: 14px; right: clamp(1%, 2vw, 5%); }
  #features .feature:nth-child(3) .list-crop img { width: clamp(152px, 11.8vw, 208px); top: 22px; right: clamp(1%, 2vw, 5%); left: auto; }
  #features .feature-library .feature-copy { position: absolute; inset: 0 auto 0 0; width: 42%; margin: 0; padding: clamp(28px, 3vw, 48px); background: linear-gradient(90deg, rgba(3, 12, 24, .98) 0%, rgba(3, 12, 24, .91) 78%, transparent 100%); }
  html[data-theme='light'] #features .feature-library .feature-copy { background: linear-gradient(90deg, rgba(221, 235, 244, .98) 0%, rgba(221, 235, 244, .91) 78%, transparent 100%); }
  #features .feature-library .library-primary { left: auto; right: clamp(19%, 16vw, 24%); bottom: 0; width: clamp(180px, 15.5vw, 286px); height: 86%; }
  #features .feature-library .library-search { left: auto; right: 0; bottom: clamp(20px, 2vw, 32px); width: clamp(160px, 13.5vw, 248px); height: 66%; }
  .feature-section-label, .how .section-head .kicker, .pricing .price-copy .kicker, .app-showcase .eyebrow, .faq .faq-heading .kicker, .contact .contact-copy .kicker { font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: .08em; }
  #features .feature-library .library-search { bottom: 0; height: 74%; filter: blur(.28px) brightness(.88); }
  #features .feature:nth-child(6) .progress-crop img { top: 0; width: clamp(164px, 12.2vw, 220px); right: clamp(1%, 2vw, 5%); }
  #features .feature:nth-child(3) .list-crop img { width: clamp(208px, 15.8vw, 286px); top: -62px; right: clamp(-2%, 1vw, 3%); }
  #features .feature:nth-child(5) .reminder-crop img { width: clamp(212px, 16vw, 288px); top: -78px; right: clamp(0%, 1.5vw, 4%); }
  #features .feature:nth-child(6) .progress-crop img { width: clamp(198px, 14.8vw, 268px); top: -68px; right: clamp(0%, 1.5vw, 4%); }
  #features .feature-library .library-search { bottom: 14px; height: 72%; filter: blur(.12px) brightness(.9); }
  #how.block { padding-top: clamp(20px, 1.8vw, 32px); padding-bottom: clamp(26px, 2.2vw, 38px); }
  #pricing.block { padding-top: clamp(26px, 2.2vw, 40px); padding-bottom: clamp(26px, 2.2vw, 40px); }
  #app.app-showcase { padding-top: clamp(20px, 1.8vw, 32px); padding-bottom: 0; }
  #app .app-grid { min-height: 0; align-items: end; }
  #app .app-copy { padding-bottom: clamp(34px, 3.2vw, 58px); }
  #app .app-title, #faq .faq-heading h2, #contact .contact-copy h2 { font-size: clamp(24px, 2.05vw, 38px); line-height: 1.06; letter-spacing: -.04em; }
  #app .app-title { max-width: none; white-space: nowrap; }
  #app .app-title-brand .dot { color: var(--blue); }
  #app .app-grid { grid-template-columns: minmax(300px, .36fr) minmax(0, .64fr); overflow: hidden; }
  #app .phones { position: relative; justify-self: end; width: min(100%, 690px); height: clamp(340px, 27vw, 470px); margin: -42px 0 0; overflow: visible; display: flex; align-items: flex-end; justify-content: flex-end; gap: 0; }
  #app .phones .phone { position: relative; left: auto; right: auto; bottom: auto; flex: 0 0 clamp(112px, 10.5vw, 164px); width: clamp(112px, 10.5vw, 164px); height: auto; margin-left: -8px; transform-origin: center bottom; }
  #app .phones .phone-1 { z-index: 2; transform: rotate(-4deg) scale(.93); }
  #app .phones .phone-2 { z-index: 5; transform: translateY(-8px) rotate(-1deg) scale(1); }
  #app .phones .phone-3 { z-index: 3; transform: rotate(2deg) scale(.94); }
  #app .phones .phone-4 { z-index: 1; transform: rotate(5deg) scale(.92); }
  #pricing .compact-main-price { margin: clamp(16px, 1.5vw, 24px) 0 4px; }
  #pricing .compact-main-price strong { font-size: clamp(28px, 2.45vw, 44px); line-height: 1; }
  #pricing .compact-total-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; color: var(--muted); }
  #pricing .compact-total-price strong { color: var(--ink); font-size: clamp(16px, 1.3vw, 21px); }
  #pricing .compact-effective { display: none; }
  #pricing .compact-chart-saving { left: clamp(24px, 2.1vw, 38px); top: 50%; transform: translateY(-36%); }
  #pricing .compact-coach-card .compact-trainer { right: 0; bottom: 0; width: auto; height: 79%; max-width: 42%; object-fit: contain; object-position: right bottom; }
  #contact .contact-shell, #contact .contact-copy, #contact .form, .foot .foot-grid, .foot .foot-end { box-sizing: border-box; width: 100%; max-width: none; }
  #contact .contact-shell { margin: 0; }
  #contact .contact-copy { padding-left: 0; }
  #faq .faq-list { width: 100%; max-width: none; }
  #pricing .compact-chart-card { --audit-ring-size: clamp(132px, 11.2vw, 176px); --audit-ring-left: clamp(24px, 2.1vw, 38px); --audit-saving-size: clamp(106px, 8.8vw, 140px); }
  #pricing .compact-chart-card::before { left: var(--audit-ring-left); top: 50%; width: var(--audit-ring-size); transform: translateY(-36%); }
  #pricing .compact-chart-saving { left: calc(var(--audit-ring-left) + (var(--audit-ring-size) - var(--audit-saving-size)) / 2); top: 50%; width: var(--audit-saving-size); height: var(--audit-saving-size); transform: translateY(-36%); }
  #contact .contact-shell { align-items: start; }
  #contact .contact-copy { align-self: start; padding-top: 0; }
  #features .feature:nth-child(2) .adapt-technique-crop img { width: clamp(184px, 14.2vw, 250px); top: 6px; right: clamp(-1%, 1vw, 3%); }
  #features .feature:nth-child(3) .list-crop img { width: clamp(190px, 14.4vw, 254px); top: -52px; right: clamp(0%, 1vw, 3%); }
  #features .feature-library .library-primary { right: clamp(18%, 14vw, 22%); top: 0; bottom: auto; width: clamp(210px, 17.5vw, 322px); height: 100%; }
  #features .feature-library .library-search { right: -1%; top: 8px; bottom: auto; width: clamp(190px, 15.5vw, 282px); height: 78%; filter: blur(.08px) brightness(.92); }
  #app .app-grid { grid-template-columns: minmax(300px, .36fr) minmax(0, .64fr); overflow: hidden; }
  #app .phones { width: min(100%, 710px); height: clamp(420px, 32vw, 540px); margin: -116px 0 0; }
  #app .phones .phone { flex: 0 0 clamp(122px, 11.1vw, 174px); width: clamp(122px, 11.1vw, 174px); }
  #pricing .compact-chart-card { --audit-ring-size: clamp(132px, 11.2vw, 176px); --audit-ring-left: 50px; --audit-saving-size: clamp(106px, 8.8vw, 140px); }
  #pricing .compact-chart-card::before { position: absolute; left: var(--audit-ring-left); top: 58%; width: var(--audit-ring-size); transform: translateY(-50%); }
  #pricing .compact-chart-saving { position: absolute; left: calc(var(--audit-ring-left) + var(--audit-ring-size) / 2); top: 58%; width: var(--audit-saving-size); height: var(--audit-saving-size); transform: translate(-50%, -50%); z-index: 3; }
  #faq .faq-heading { align-self: start; padding-top: 0; }
  #faq .faq-list { width: 100%; max-width: none; }
  #faq .faq-list details { position: relative; }
  #faq .faq-list summary { padding-right: 28px; }
  #faq .faq-list summary::after { position: absolute; right: 0; }
  #pricing .compact-chart-saving { left: calc(var(--audit-ring-left) + var(--audit-ring-size) / 2 - 38px); }
  #pricing .compact-coach-card .compact-trainer { height: 84%; max-width: 44%; }
  #pricing .compact-chart-saving { left: calc(var(--audit-ring-left) + var(--audit-ring-size) / 2); right: auto; bottom: auto; }
  #how .flow-visual li:first-child { align-items: flex-start; }
  #how .flow-visual li:first-child figure { margin-left: 0; }
  #faq .faq-list { width: auto; max-width: 100%; min-width: 0; }
  #pricing .compact-chart-card { --audit-ring-left: 22px; }
  #pricing .compact-chart-saving { justify-self: auto; grid-column: auto; }
  :is(.feature-section-label, #how .kicker, #pricing .kicker, #app .eyebrow, #faq .kicker, #contact .kicker) { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px; border: 1px solid rgba(31, 166, 255, .62); border-radius: 9px; background: rgba(5, 17, 30, .66); color: #e8f4ff; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
  :root { --audit-section-title: clamp(30px, 2.45vw, 42px); --audit-card-title: clamp(22px, 1.7vw, 28px); --audit-body-copy: 16px; }
  #how .section-head h2, #pricing .price-copy h2, #app .app-title, #faq .faq-heading h2, #contact .contact-copy h2 { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: var(--audit-section-title); line-height: 1.08; }
  #features .feature h3 { font-size: var(--audit-card-title); line-height: 1.14; }
  #features .feature-library .feature-copy p { font-size: var(--audit-body-copy); line-height: 1.32; }
  #features .feature p, #app .app-copy > p:not(.eyebrow), #how .flow-visual p, #pricing .price-copy > p:not(.kicker), #contact .contact-copy > p:not(.kicker) { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: var(--audit-body-copy); line-height: 1.5; }
  #pricing .compact-coach-card .compact-trainer { transform: scale(1.3); transform-origin: right bottom; right: -10%; bottom: -5%; }
  :is(.feature-section-label, #how .kicker, #pricing .kicker, #app .eyebrow, #faq .kicker, #contact .kicker) { min-height: 27px; padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 750; letter-spacing: .13em; }
  #contact { padding-bottom: 0; }
  #contact .contact-shell, #contact .contact-copy { min-height: 0; }
  #faq .faq-list details { height: 116px; min-height: 116px; padding: 12px 0; }
  #faq .faq-list details p { font-size: 12px; line-height: 1.3; margin-top: 6px; }
  #faq .faq-list details[open] p { max-height: 64px; }
  #contact .form { padding: 0; }
  .top .menu a { font-size: 14px; font-weight: 700; }
  #features .feature-section-label { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 750; letter-spacing: .13em; line-height: 1; }
  #features .feature:first-child .dashboard-crop img { width: clamp(194px, 14.2vw, 260px); }
  #app .app-copy { align-self: start; padding-top: 0; }
  #app .app-copy > .eyebrow { margin-top: 0; font: inherit; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .13em; line-height: 1; }
  #pricing .compact-chart-card { --audit-ring-left: 0px; --audit-card-inset: clamp(22px, 2vw, 32px); }
  #pricing .compact-chart-card::before { left: var(--audit-ring-left); }
  #pricing .compact-chart-saving { left: calc(var(--audit-card-inset) + var(--audit-ring-left) + var(--audit-ring-size) / 2); right: auto; transform: translate(-50%, -50%); }
  .top .menu a { font-size: 14px; font-weight: 400; }
  #features .feature-section-label, #app .app-copy > .eyebrow { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 750; line-height: 1.55; letter-spacing: .13em; }
  #how .flow-visual li:first-child { align-items: center; }
  #how .flow-visual li:first-child figure { margin-inline: auto; }
  #how .flow-visual p { max-width: 158px; min-height: 0; font-size: 12px; line-height: 1.35; text-align: center; }
  #app.app-showcase { clip-path: inset(0 0 12px 0); margin-bottom: -12px; }
  #faq .faq-list { width: calc(100% - 16px); margin-right: 16px; }
  html[data-theme='light'] #features .feature-dark, html[data-theme='light'] #features .feature-light { background: linear-gradient(135deg, #edf6fb 0%, #d4e6f1 100%); color: #0b2a40; }
  html[data-theme='light'] #features .feature-dark p, html[data-theme='light'] #features .feature-light p { color: #35566b; }
  html[data-theme='light'] #features .feature::before { background: inherit; }
  html[data-theme='light'] #hero .hero-copy h1 { color: #f7fbff; text-shadow: 0 2px 18px rgba(1, 14, 28, .58); }
  html[data-theme='light'] #hero .hero-copy .lead { color: #eef7ff; text-shadow: 0 1px 12px rgba(1, 14, 28, .65); }
  html[data-theme='light'] #hero .hero-copy .eyebrow { color: #f7fbff; background: rgba(6, 22, 38, .68); border-color: rgba(175, 222, 255, .5); }
  :is(.feature-section-label, #how .kicker, #pricing .kicker, #app .eyebrow, #faq .kicker, #contact .kicker) { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: .13em; }
  .theme i { overflow: visible; }
  .theme .theme-half { box-shadow: none; }
  html[data-theme='light'] .theme-half-sun { box-shadow: 0 0 4px 2px rgba(255, 180, 76, .48); }
  html:not([data-theme='light']) .theme-half-moon { box-shadow: 0 0 4px 2px rgba(130, 205, 255, .46); }
  .theme i, .theme .theme-half { background-image: none; background-color: transparent; box-shadow: none; }
  .theme .theme-half::before { content: ""; display: block; position: absolute; top: 4px; width: 22px; height: 22px; border-radius: 50%; }
  .theme .theme-half-sun::before { left: 1px; background: radial-gradient(circle, #fffde5 0 17%, #ffd15d 35%, #fb9632 68%, transparent 72%); }
  .theme .theme-half-moon::before { right: 1px; background: radial-gradient(circle at 31% 28%, #eef8ff 0 9%, transparent 10%), radial-gradient(circle at 66% 38%, #708da6 0 8%, transparent 9%), radial-gradient(circle at 48% 67%, #5f7e9b 0 7%, transparent 8%), radial-gradient(circle, #daeaf6 0 46%, #63809b 72%, #24415f 100%); }
  html[data-theme='light'] .theme .theme-half-sun, html:not([data-theme='light']) .theme .theme-half-moon { box-shadow: none; }
  html[data-theme='light'] .theme-half-sun::before { box-shadow: 0 0 4px 2px rgba(255, 180, 76, .48); }
  html:not([data-theme='light']) .theme-half-moon::before { box-shadow: 0 0 4px 2px rgba(130, 205, 255, .46); }
  html[data-theme='light'] #features { background: #edf6fb; }
  html[data-theme='light'] :is(#features .feature-section-label, #how .kicker, #pricing .kicker, #app .eyebrow, #faq .kicker, #contact .kicker) { color: #17364a; background: rgba(255, 255, 255, .88); border-color: rgba(20, 84, 126, .42); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: .13em; }
  .theme i { overflow: visible; border-radius: 50%; }
  .theme .theme-half { width: 50%; height: 30px; overflow: hidden; }
  .theme .theme-half::before { top: 4px; width: 22px; height: 22px; box-shadow: none; }
  .theme .theme-half-sun::before { left: 4px; }
  .theme .theme-half-moon::before { left: -11px; right: auto; }
  html[data-theme='light'] .theme i { box-shadow: 0 0 4px 2px rgba(255, 180, 76, .48); }
  html:not([data-theme='light']) .theme i { box-shadow: 0 0 4px 2px rgba(130, 205, 255, .46); }
  html:not([data-theme='light']) :is(#features .feature-section-label, #how .kicker, #pricing .kicker, #app .eyebrow, #faq .kicker, #contact .kicker) { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: rgba(255, 255, 255, .05); color: #dce9f4; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
  #features .feature:first-child .num { transform: translateY(-10px); }
  #pricing .compact-coach-card .compact-trainer { right: 3%; transform: scale(1.36); }
  #app .app-points { max-width: 430px; margin: 26px 0 0; }
  #app .app-points li { margin: 7px 0; font-size: 13px; line-height: 1.32; }
  html[data-theme='light'] #hero .hero-cta .btn-ghost { color: #f7fbff; background: rgba(4, 23, 40, .74); border-color: rgba(227, 244, 255, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
  #features .feature-library .feature-copy, html[data-theme='light'] #features .feature-library .feature-copy { background: transparent; }
  #features .feature-library::before { display: none; background: none; }
  #app .phones, #app .phones .phone, #app .phones figure { background: transparent; box-shadow: none; }
  #app .phones::before, #app .phones::after, #app .phones .phone::before, #app .phones .phone::after { content: none; display: none; background: none; box-shadow: none; }
  #pricing .compact-coach-card .compact-trainer { right: -14px; transform: scale(1.36); transform-origin: right bottom; }
  #pricing .compact-chart-card { --trainer-share: 85.7%; --trainer-color: #2abfd1; --pro-color: #176df1; display: grid; grid-template-rows: auto auto minmax(176px, 1fr); grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 378px; padding: 24px 26px; overflow: hidden; position: relative; }
  #pricing .compact-chart-card h3 { grid-row: 1; margin: 0; }
  #pricing .compact-chart-card::before { content: ""; position: absolute; left: 50%; top: auto; bottom: 8px; width: 164px; height: 164px; border-radius: 50%; transform: translateX(-50%); background: conic-gradient(from -36deg, var(--trainer-color) 0 var(--trainer-share), var(--pro-color) var(--trainer-share) 100%); -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%); mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%); z-index: 1; }
  #pricing .compact-chart-period{ display: none; }
  #pricing .compact-chart-rows { grid-row: 2; display: grid; gap: 9px; }
  #pricing .compact-chart-row { display: grid; grid-template-columns: minmax(104px, .88fr) minmax(0, 1.12fr); grid-template-areas: "legend scale"; grid-template-rows: 32px; align-items: center; gap: 12px; min-width: 0; }
  #pricing .compact-chart-legend { grid-area: legend; grid-column: 1; grid-row: 1; align-self: center; position: static; display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 13px; line-height: 1.2; white-space: nowrap; }
  #pricing .compact-chart-legend i { display: block; width: 15px; height: 10px; flex: 0 0 auto; border-radius: 4px; background: var(--trainer-color); }
  #pricing .compact-chart-legend .legend-pro { background: var(--pro-color); }
  #pricing .compact-bar-track { grid-area: scale; grid-column: 2; grid-row: 1; align-self: center; display: flex; align-items: center; width: 100%; height: 28px; overflow: hidden; border-radius: 999px; background: rgba(126, 157, 181, .15); }
  #pricing .compact-bar { position: static; display: flex; align-items: center; justify-content: center; width: var(--bar-size, 100%); min-width: 42px; height: 100%; margin: 0; border-radius: 999px; transition: width .25s ease; }
  #pricing .compact-bar-trainer { background: linear-gradient(90deg, #31c9d4, #159fc8); }
  #pricing .compact-bar-pro { background: linear-gradient(90deg, #0f75f7, #22b8ee); }
  #pricing .compact-bar b { color: #fff; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; }
  #pricing .compact-chart-ring-area { grid-row: 3; min-height: 176px; position: static; }
  #pricing .compact-chart-saving { position: absolute; left: 50%; top: auto; bottom: 34px; width: 112px; height: 112px; margin: 0; padding: 0 10px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; border-radius: 50%; background: var(--bg); color: var(--ink); z-index: 2; }
  #features, html[data-theme='light'] #features { background: transparent; }
  #features .feature-grid { width: min(100%, var(--wrap)); max-width: var(--wrap); margin-left: auto; margin-right: auto; background: var(--bg); box-shadow: none; }
  html[data-theme='light'] #features .feature-grid { background: #e4f1f8; }
  #pricing .compact-chart-saving span { font-size: 12px; font-weight: 700; line-height: 1.15; }
  #pricing .compact-chart-saving strong { margin-top: 7px; color: #39e4b6; font-size: 20px; line-height: 1; white-space: nowrap; }
  #features .feature-grid { row-gap: 8px; }
  #features .feature:nth-child(2) .adapt-technique-crop { align-self: start; overflow: visible; background: transparent; box-shadow: none; }
  #features .feature:nth-child(2) .adapt-technique-crop::before { content: none; display: none; background: none; }
  #features .feature:nth-child(2) .adapt-technique-crop img { top: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #features .feature-library .library-primary { right: 102px; }
  #pricing .compact-chart-card::before { content: none; display: none; }
  #pricing .compact-chart-ring-area { position: relative; min-height: 190px; }
  #pricing .compact-chart-ring-area::before { content: ""; position: absolute; left: 50%; top: 62%; width: 164px; height: 164px; border-radius: 50%; transform: translate(-50%, -50%); background: conic-gradient(from -36deg, var(--trainer-color) 0 var(--trainer-share), var(--pro-color) var(--trainer-share) 100%); -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%); mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%); z-index: 1; }
  #pricing .compact-chart-saving { left: 50%; top: 62%; right: auto; bottom: auto; transform: translate(-50%, -50%); z-index: 2; }
  @media (min-width: 901px){#hero.hero, #hero .hero-grid { min-height: clamp(620px, 46vw, 860px); height: clamp(620px, 46vw, 860px); } #hero .hero-grid { grid-template-columns: minmax(360px, .8fr) minmax(540px, 1.2fr); column-gap: clamp(22px, 2.2vw, 50px); } #hero .hero-copy { align-self: start; padding-top: clamp(96px, 6.5vw, 132px); z-index: 3; } #hero .stage { display: flex; align-items: flex-end; justify-content: center; height: 100%; min-height: 0; overflow: hidden; } #hero .stage img.hero-integrated { position: relative; inset: auto; display: block; width: 100%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; transform: none; } #hero.hero, #hero .hero-grid { min-height: clamp(560px, 42vw, 760px); height: clamp(560px, 42vw, 760px); } #hero .hero-grid { grid-template-columns: minmax(360px, .73fr) minmax(620px, 1.27fr); column-gap: clamp(20px, 2vw, 42px); } #hero .hero-copy { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(92px, 7vw, 136px) 0 clamp(42px, 4vw, 78px); } #hero .hero-copy h1 { margin-top: clamp(18px, 1.6vw, 28px); } #hero .hero-copy .lead { margin-top: clamp(18px, 1.5vw, 26px); } #hero .stage img.hero-integrated { width: min(100%, 920px); height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } #hero.hero, #hero .hero-grid { min-height: clamp(500px, 37vw, 620px); height: clamp(500px, 37vw, 620px); } #hero .hero-copy { justify-content: flex-start; padding-top: clamp(68px, 4.8vw, 86px); padding-bottom: 30px; } #hero .hero-copy .eyebrow { display: inline-flex; width: max-content; align-self: flex-start; } #hero .hero-copy h1 { margin-top: clamp(22px, 1.9vw, 30px); } #hero .stage img.hero-integrated { align-self: flex-end; } #features .feature-library .feature-copy { padding-top: clamp(18px, 1.6vw, 26px); } #features .feature-library .library-search { top: 6px; bottom: 0; height: auto; filter: blur(.06px) brightness(.92); } #app .phones { height: clamp(500px, 36vw, 590px); margin-top: -250px; } #app .phones .phone { flex-basis: clamp(130px, 11.8vw, 184px); width: clamp(130px, 11.8vw, 184px); } #hero .hero-copy { padding-top: clamp(108px, 8vw, 128px); } #hero .hero-copy .eyebrow { margin-top: 0; } #hero .stage img.hero-integrated { position: relative; top: -26px; } #features .feature-library .feature-copy { padding-top: 14px; padding-bottom: 14px; } #features .feature-library .feature-copy h3 { margin-top: 10px; margin-bottom: 12px; } #features .feature-library .feature-copy p { font-size: clamp(14px, .92vw, 16px); line-height: 1.35; } #app .phones { margin-top: -350px; } #features .feature-grid { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: 0; } #features .feature:first-child .feature-copy, #features .feature:nth-child(5) .feature-copy { padding-left: var(--content-rail); } #features .feature:first-child .feature-section-label { left: var(--content-rail); } #features .feature:nth-child(2) .feature-visual img, #features .feature:nth-child(6) .feature-visual img { right: var(--content-rail); } #features .feature:nth-child(3) .feature-visual img { left: var(--content-rail); right: auto; } #features .feature-library .library-search { right: var(--content-rail); } #features .feature-library .feature-copy { width: 48%; padding: 14px 16px; } #features .feature-library .feature-copy h3 { font-size: clamp(20px, 1.4vw, 25px); line-height: 1.12; margin: 8px 0 9px; } #features .feature-library .feature-copy p { font-size: clamp(12px, .8vw, 14px); line-height: 1.28; } #hero .stage img.hero-integrated { top: -8px; } #app .phones .phone { flex-basis: clamp(155px, 13vw, 205px); width: clamp(155px, 13vw, 205px); margin-left: -24px; } #app .phones .phone-1 { transform: rotate(-3deg) scale(1.15); } #app .phones .phone-2 { transform: translateY(-8px) rotate(-1deg) scale(1.24); } #app .phones .phone-3 { transform: rotate(2deg) scale(1.16); } #app .phones .phone-4 { transform: rotate(4deg) scale(1.12); } #features .feature:first-child .feature-copy, #features .feature:nth-child(5) .feature-copy { padding-left: 0; } #features .feature:first-child .feature-section-label { left: 0; } #features .feature:nth-child(3) .feature-visual img { left: 0; } #features .feature:nth-child(6) .feature-visual img { right: 0; } #features .feature-library .library-primary { right: 60px; } #features .feature-library .library-search { right: 0; } #features .feature-library .feature-copy { padding-top: 0; } #features .feature-library .feature-copy .num { margin-bottom: 2px; } #features .feature-library .feature-copy h3 { margin-top: 2px; } #hero .stage img.hero-integrated { width: 103%; max-width: none; left: 3%; } #features .feature { z-index: 0; isolation: isolate; } #features .feature::before { content: ""; display: block; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background: inherit; } #features .feature:first-child .feature-section-label { top: 0; } #features .feature-library .feature-copy { inset: auto auto auto 0; top: 50%; height: auto; min-height: 0; transform: translateY(-50%); padding-top: 0; } #features .feature-library .library-primary { right: 90px; } #app .phones { transform: translateX(-32px); } #pricing .price-shell { padding-top: 0; } #pricing .price-copy { padding-top: 0; } #features .feature-copy { align-self: center; display: flex; flex-direction: column; justify-content: center; } #features .feature h3 { font-size: clamp(20px, 1.48vw, 24px); } #features .feature p { font-size: 14px; line-height: 1.45; } #features .feature-library .feature-copy p { font-size: 14px; line-height: 1.36; } #features .feature-library .library-primary { right: 110px; } #how .section-head h2 { transform: translateY(-12px); }}
  @media (max-width: 900px){:root { --content-rail: 20px; } .theme { min-width: 132px; } #app .app-title { white-space: normal; } #app .app-grid { grid-template-columns: 1fr; } #app .phones { width: 100%; height: 360px; margin-top: 0; overflow: visible; } #app .phones .phone-1 { transform: rotate(-3deg) scale(.78); } #app .phones .phone-2 { transform: translateY(-6px) rotate(-1deg) scale(.84); } #app .phones .phone-3 { transform: rotate(2deg) scale(.79); } #app .phones .phone-4 { transform: rotate(4deg) scale(.76); } #features .feature-library .feature-copy { position: relative; width: 100%; min-height: 46%; } #features .feature-library .library-primary { right: 18%; width: 48%; } #features .feature-library .library-search { right: -3%; width: 42%; } #app .app-grid { grid-template-columns: 1fr; } #app .phones { width: 100%; height: 360px; margin-top: 0; } #pricing .compact-chart-card { min-height: 350px; }}


/* Canonical landing layout: shared geometry, pricing cards, themes and responsive rules. */
  #pricing .compact-price-card { min-height: 0; }
  #pricing .compact-price-card { --compact-card-top: 22px; }
  #pricing .compact-pro-card, #pricing .compact-coach-card { padding-top: var(--compact-card-top); }
  #pricing .compact-chart-card { padding: var(--compact-card-top) 26px 24px; }
  #pricing .compact-pro-card { padding-right: clamp(132px, 11vw, 168px); }
  #pricing .compact-pro-brand { margin: 0; font-size: 18px; line-height: 1.15; }
  #pricing .compact-pro-brand .dot { color: var(--blue); }
  #pricing .compact-pro-card .compact-price-line, #pricing .compact-pro-card .compact-benefits { position: relative; z-index: 2; }
  #pricing .compact-pro-card .term-control { position: absolute; z-index: 3; top: 22px; right: 20px; }
  #pricing .compact-price-line { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 16px; margin-right: calc(20px - clamp(132px, 11vw, 168px)); padding-bottom: 0; border-bottom: 0; }
  #pricing .compact-price-line .compact-main-price, #pricing .compact-price-line .compact-total-price { margin: 0; }
  #pricing .compact-price-line .compact-total-price { justify-content: flex-end; text-align: right; }
  #pricing .compact-pro-card .compact-benefits { gap: 4px; margin-top: 12px; font-size: 10px; line-height: 1.18; }
  #pricing .compact-pro-shot { position: absolute; z-index: 1; top: 118px; right: 14px; width: clamp(110px, 9.5vw, 142px); margin: 0; overflow: hidden; border: 1px solid rgba(127, 203, 255, .26); border-radius: 18px; background: #07121d; box-shadow: 0 14px 28px rgba(0, 0, 0, .34); opacity: .72; }
  #pricing .compact-pro-shot img { display: block; width: 100%; height: 100%; aspect-ratio: 41 / 84; object-fit: cover; object-position: center top; filter: none; transform: scale(1.025); }
  
  #pricing .compact-coach-frequency { margin: 5px 0 0; color: #2aaeff; font-size: 11px; font-weight: 750; white-space: nowrap; }
  #pricing .compact-coach-meta { display: flex; align-items: end; justify-content: space-between; width: 151.515%; max-width: none; margin-top: 16px; }
  #pricing .compact-coach-meta > p { margin: 0; white-space: nowrap; }
  #pricing .compact-coach-meta .compact-coach-price { margin: 0 0 0 auto; color: var(--ink); font-size: clamp(16px, 1.3vw, 21px); line-height: 1; letter-spacing: 0; text-align: right; white-space: nowrap; }
  #pricing .compact-coach-card .compact-benefits { width: 100%; gap: 5px; margin-top: 16px; font-size: 10px; line-height: 1.2; }
  #pricing .pricing-note { margin-left: 0; text-align: left; }
  #pricing .compact-coach-card .compact-trainer { transform: scale(1.18); }
  #faq .faq-list details { height: auto; min-height: 116px; }
  #faq .faq-list details p { font-size: 10.7px; }
  #faq .faq-list details[open] p { max-height: 96px; }
  :root { --audit-card-title: clamp(20px, 1.45vw, 24px); --audit-body-copy: 15px; }
  #features .feature:nth-child(2) .adapt-technique-crop img { width: clamp(172px, 12.8vw, 226px); right: 18px; }
  #features .feature:nth-child(3) .list-crop img { width: clamp(172px, 12.8vw, 226px); top: -32px; right: 18px; }
  html[data-theme='light'] :is(#app.app-showcase, #how, #contact.block) { background: var(--app-light-surface); }
  html[data-theme='light'] #how .section-head h2, html[data-theme='light'] #how .flow-visual h3, html[data-theme='light'] #contact h2 { color: #10202d; text-shadow: none; }
  html[data-theme='light'] #how .flow-visual p, html[data-theme='light'] #contact .contact-copy > p:not(.kicker), html[data-theme='light'] #contact .points li { color: #354e5e; text-shadow: none; }
  html[data-theme='light'] #how .flow-visual li > b { color: #10202d; }
  #features .feature-library .library-primary { right: 116px; }
  #features .feature:nth-child(6) .progress-crop { overflow: visible; }
  #features .feature:nth-child(6) .progress-crop img { width: clamp(184px, 13.6vw, 238px); right: 8px; }
  #app .phones { width: 100%; max-width: none; height: clamp(440px, 33vw, 620px); transform: translateX(-32px); transform-origin: center bottom; }
  #app .phones .phone { width: clamp(155px, 13vw, 205px); flex-basis: clamp(155px, 13vw, 205px); height: auto; aspect-ratio: 41 / 84; }
  @media (max-width: 900px) { :root { --page-x: 20px; } .wrap, .top-inner { padding-inline: var(--page-x); } #features .feature-grid { width: calc(100% - var(--page-x) * 2); } #pricing .compact-pro-card { padding-right: 20px; } #pricing .compact-pro-card .term-control { top: 20px; right: 20px; } #pricing .compact-pro-shot { position: relative; top: auto; right: auto; width: 126px; margin: 14px 0 0 auto; }  #app .phones { height: auto; min-height: 0; margin-top: 0; padding: 8px 4px 20px; overflow-x: auto; overflow-y: hidden; display: flex; gap: 14px; transform: none; } #app .phones .phone { position: relative; left: auto; bottom: auto; flex: 0 0 clamp(170px, 27vw, 220px); width: clamp(170px, 27vw, 220px); height: auto; aspect-ratio: 41 / 84; transform: none; } }
  @media (max-width: 600px) { :root { --page-x: 16px; } #app .phones .phone { flex-basis: 190px; width: 190px; } }

/* Shared horizontal rail for the full-width content sections. */
#features .feature-grid,
#contact > .contact-shell,
.foot > .foot-grid,
.foot > .foot-end {
  box-sizing: border-box;
  width: calc(100% - var(--content-rail) * 2);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 600px) {
  :root { --content-rail: 16px; }
}


/* DESKTOP-FEATURES-CANONICAL-01
   Final accepted desktop Header / Features / Pricing
   dependencies consolidated from historical point/cosmetic fixes.
*/
@media (min-width:901px){

  /* HEADER */

  .top,
  .top-inner,
  .top .top-inner,
  .brand,
  .top .brand{
    overflow:visible;
  }

  .top .brand{
    height:72px;
    min-height:72px;

    padding:0;
    margin:0;

    display:flex;
    align-items:center;

    line-height:normal;
  }

  .top .brand img{
    position:relative;
    inset:auto;

    display:block;
    flex:0 0 44px;

    width:44px;
    height:44px;
    max-width:44px;
    max-height:44px;

    margin:0;
    padding:0;

    object-fit:contain;
    object-position:50% 50%;

    overflow:visible;

    clip:auto;
    clip-path:none;

    mask:none;
    -webkit-mask:none;

    transform:translateY(1px);
  }


  /* FEATURE 01 */

  #features .feature:first-child .dashboard-crop img{
    left:auto;
    right:0;
  }


  /* FEATURE 02 */

  #features .feature:nth-child(2) .adapt-technique-crop{
    position:relative;

    left:auto;
    right:0;

    overflow:visible;
  }

  #features .feature:nth-child(2) .adapt-technique-crop img{
    left:auto;
    right:-1px;
    top:0;
  }


  /* FEATURE 03 */

  #features .feature:nth-child(3){
    direction:ltr;

    grid-template-columns:
      calc(clamp(188px,13.2vw,236px) + 16px)
      minmax(0,1fr);

    column-gap:0;
  }

  #features .feature:nth-child(3) .list-crop{
    direction:ltr;

    grid-column:1;
    grid-row:1;

    position:relative;

    width:100%;
    min-width:0;

    overflow:visible;
  }

  #features .feature:nth-child(3) .list-crop img{
    left:0;
    right:auto;

    top:-50px;

    width:clamp(188px,13.2vw,236px);
    max-width:none;
  }

  #features .feature:nth-child(3) .feature-copy{
    direction:ltr;

    grid-column:2;
    grid-row:1;

    min-width:0;
    box-sizing:border-box;

    padding-left:0;
    padding-right:clamp(16px,1.4vw,28px);
  }


  /* FEATURE 04 */

  #features .feature:nth-child(4).feature-library{
    position:relative;
    overflow:hidden;
  }

  #features .feature:nth-child(4).feature-library .feature-copy{
    position:relative;
    z-index:3;

    box-sizing:border-box;
    min-width:0;

    width:
      calc(100% - clamp(330px,24vw,430px));

    max-width:
      calc(100% - clamp(330px,24vw,430px));

    padding-left:clamp(18px,1.4vw,28px);
    padding-right:18px;
  }

  #features .feature:nth-child(4).feature-library .library-screen{
    position:absolute;

    bottom:0;
    z-index:2;

    margin:0;
    padding:0;

    background:transparent;

    border:0;
    border-radius:22px 22px 0 0;

    outline:0;
    box-shadow:none;

    overflow:hidden;
  }

  #features .feature:nth-child(4).feature-library .library-screen img{
    display:block;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    min-width:0;
    max-width:none;
    min-height:0;
    max-height:none;

    margin:0;
    padding:0;

    object-fit:cover;
    object-position:center top;

    background:transparent;

    border:0;
    border-radius:inherit;

    outline:0;
    box-shadow:none;

    transform:none;
  }

  #features .feature:nth-child(4).feature-library .library-primary{
    left:auto;
    right:clamp(132px,9.2vw,170px);
    bottom:0;

    width:clamp(190px,13.8vw,230px);
    height:clamp(245px,17.2vw,295px);

    min-width:0;
    max-width:none;
    min-height:0;
    max-height:none;

    z-index:2;

    background:transparent;

    border:0;
    outline:0;
    box-shadow:none;

    transform:none;
  }

  #features .feature:nth-child(4).feature-library .library-search{
    left:auto;
    right:0;
    bottom:0;

    width:clamp(185px,13.4vw,225px);
    height:clamp(245px,17.2vw,295px);

    min-width:0;
    max-width:none;
    min-height:0;
    max-height:none;

    z-index:1;

    background:transparent;

    border:0;
    outline:0;
    box-shadow:none;

    opacity:.38;

    transform:none;
  }


  /* FEATURE 05 */

  #features .feature:nth-child(5) .reminder-crop img{
    top:-108px;
  }


  /* PRICING DEPENDENCIES */

  #pricing .compact-coach-card{
    position:relative;
    overflow:hidden;
  }

  #pricing .compact-coach-card .compact-trainer{
    position:absolute;

    z-index:1;

    right:-8px;
    bottom:-8px;

    width:auto;

    height:calc(100% - 126px);

    max-width:32%;
    max-height:calc(100% - 126px);

    object-fit:contain;
    object-position:right bottom;

    transform:none;
    transform-origin:right bottom;

    pointer-events:none;
  }

  #pricing .compact-coach-meta,
  #pricing .compact-coach-meta .compact-coach-price{
    position:relative;
    z-index:6;
  }

  #pricing .compact-coach-meta > p:first-child{
    font-size:clamp(16px,1.3vw,21px);

    line-height:1;
    font-weight:500;
  }

  #pricing .compact-coach-meta .compact-coach-price{
    font-size:clamp(28px,2.45vw,44px);

    line-height:1;

    font-weight:800;

    letter-spacing:-.03em;
  }
}


/* FEATURE 04 <=1699px alignment */

@media (min-width:901px) and (max-width:1699px){

  #features .feature:nth-child(4).feature-library .library-primary,
  #features .feature:nth-child(4).feature-library .library-search{
    position:absolute;

    top:0;
    bottom:0;

    height:auto;
    max-height:none;

    margin-top:0;
    margin-bottom:0;

    align-self:auto;
    justify-self:auto;

    transform:none;
  }

  #features .feature:nth-child(4).feature-library .library-primary img,
  #features .feature:nth-child(4).feature-library .library-search img{
    top:0;
    bottom:auto;

    width:100%;
    height:100%;

    margin:0;

    object-fit:cover;
    object-position:top;

    transform:none;
  }
}


/* FEATURE 05 / 06 RIGHT EDGE */

@media (min-width:901px) and (hover:hover) and (pointer:fine){

  #features .feature:nth-child(5) .reminder-crop img,
  #features .feature:nth-child(6) .progress-crop img{
    right:0;
  }
}

/* END DESKTOP-FEATURES-CANONICAL-01 */


/* DESKTOP-LEGACY-SCOPE-CANONICAL-01
   Explicit replacement for the historical accidental
   desktop scope. Preserves existing >=901px cascade
   from HOW through the pre-PNG legal blocks.
*/
@media (min-width:901px){

/* ==========================================================
   HOW FINAL02 — 2026-09-04

   Canonical desktop HOW implementation.

   Wide desktop:
   - 7 complete stages are visible;
   - stage 8 remains naturally offscreen;
   - real horizontal overflow remains;
   - app.js edge autoscroll remains unchanged.

   Visual edges:
   - fade is owned by fixed .flow-shell;
   - blur is feathered with mask-image;
   - no rectangular visible blur boundary.

   Hover:
   - subtle screenshot enlargement restored;
   - no cyan frame.
   ========================================================== */

@media (min-width:901px){

  /* --------------------------------------------------------
     SECTION — preserve accepted geometry
     -------------------------------------------------------- */

  #how.block{
    min-height:0;
    padding-top:clamp(24px,1.8vw,34px);
    padding-bottom:clamp(10px,.8vw,16px);
  }

  #how > .wrap{
    display:flex;
    flex-direction:column;

    width:calc(100% - var(--content-rail) * 2);
    max-width:none;
    min-height:0;

    margin-inline:auto;
    padding-inline:0;

    box-sizing:border-box;
  }

  /* --------------------------------------------------------
     HEADER — preserve accepted left rail
     -------------------------------------------------------- */

  #how .section-head{
    position:relative;

    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;

    align-items:center;

    width:100%;
    max-width:none;
    min-height:0;

    gap:12px 20px;

    margin:0 0 clamp(14px,1vw,20px);
    padding:0;

    text-align:left;
  }

  #how .section-head .kicker{
    position:static;

    grid-column:1;
    grid-row:1;

    justify-self:start;

    margin:0;

    transform:none;
  }

  #how .section-head .btn-video{
    position:static;

    grid-column:2;
    grid-row:1;

    justify-self:end;

    width:auto;
    height:36px;

    margin:0;
    padding:0 13px;

    transform:none;
  }

  #how .section-head h2{
    position:static;

    grid-column:1 / -1;
    grid-row:2;

    width:100%;
    max-width:none;

    margin:0;
    padding:0;

    text-align:left;

    font-size:clamp(34px,3.15vw,52px);
    line-height:1.06;

    transform:none;
  }

  /* --------------------------------------------------------
     OUTER FIXED SHELL
     -------------------------------------------------------- */

  #how .flow-shell{
    position:relative;

    width:100%;
    max-width:100%;
    min-width:0;

    isolation:isolate;
  }

  /*
     Старые pseudo-elements scroll-container полностью выключены.
  */
  #how .flow-viewport::before,
  #how .flow-viewport::after{
    content:none;
    display:none;
  }

  /* --------------------------------------------------------
     REAL SCROLL CONTAINER
     app.js продолжает работать именно с ним.
     -------------------------------------------------------- */

  #how .flow-viewport{
    position:relative;
    z-index:1;

    width:100%;
    max-width:100%;

    margin:0;
    padding:0;

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-mask-image:none;
    mask-image:none;

    scrollbar-width:none;
    -ms-overflow-style:none;

    overscroll-behavior-inline:contain;
    scroll-behavior:smooth;
  }

  #how .flow-viewport::-webkit-scrollbar{
    display:none;

    width:0;
    height:0;
  }

  /* --------------------------------------------------------
     FEATHERED BLUR
     --------------------------------------------------------

     ВАЖНО:
     backdrop-filter больше не заканчивается резкой
     прямоугольной вертикальной границей.

     Сам pseudo-element постепенно исчезает через mask-image.
     Поэтому вместе с ним плавно исчезает и blur.
     -------------------------------------------------------- */

  #how .flow-shell::before,
  #how .flow-shell::after{
    content:"";

    position:absolute;
    z-index:50;

    top:-2px;
    bottom:-2px;

    width:clamp(72px,5.2vw,126px);

    pointer-events:none;

    opacity:0;

    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);

    transition:opacity .26s ease;
  }

  /* LEFT */

  #how .flow-shell::before{
    left:0;

    background:
      linear-gradient(
        90deg,
        rgba(83,34,21,.22) 0%,
        rgba(61,31,25,.10) 32%,
        rgba(32,24,27,.035) 60%,
        transparent 100%
      );

    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,.96) 18%,
        rgba(0,0,0,.72) 42%,
        rgba(0,0,0,.34) 68%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        90deg,
        #000 0%,
        rgba(0,0,0,.96) 18%,
        rgba(0,0,0,.72) 42%,
        rgba(0,0,0,.34) 68%,
        transparent 100%
      );
  }

  /* RIGHT */

  #how .flow-shell::after{
    right:0;

    background:
      linear-gradient(
        270deg,
        rgba(4,55,101,.22) 0%,
        rgba(7,43,77,.10) 32%,
        rgba(7,29,52,.035) 60%,
        transparent 100%
      );

    -webkit-mask-image:
      linear-gradient(
        270deg,
        #000 0%,
        rgba(0,0,0,.96) 18%,
        rgba(0,0,0,.72) 42%,
        rgba(0,0,0,.34) 68%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        270deg,
        #000 0%,
        rgba(0,0,0,.96) 18%,
        rgba(0,0,0,.72) 42%,
        rgba(0,0,0,.34) 68%,
        transparent 100%
      );
  }

  /*
     JS уже корректно выставляет:
       has-left
       has-right
  */

  #how .flow-shell:has(#flow-viewport.has-left)::before{
    opacity:1;
  }

  #how .flow-shell:has(#flow-viewport.has-right)::after{
    opacity:1;
  }

  /* LIGHT THEME */

  html[data-theme="light"] #how .flow-shell::before{
    background:
      linear-gradient(
        90deg,
        rgba(247,214,185,.26) 0%,
        rgba(243,225,210,.11) 34%,
        rgba(238,233,229,.035) 62%,
        transparent 100%
      );
  }

  html[data-theme="light"] #how .flow-shell::after{
    background:
      linear-gradient(
        270deg,
        rgba(198,227,245,.27) 0%,
        rgba(215,232,242,.11) 34%,
        rgba(229,238,243,.035) 62%,
        transparent 100%
      );
  }

  /* --------------------------------------------------------
     TRACK
     -------------------------------------------------------- */

  #how .flow.flow-visual{
    --how-gap:clamp(12px,.8vw,18px);

    display:flex;

    width:max-content;
    min-width:100%;
    max-width:none;

    align-items:flex-start;

    gap:var(--how-gap);

    /*
      Небольшой вертикальный запас нужен только для hover scale.
      Он не создаёт старую большую пустую область.
    */
    margin:0;
    padding:10px 0 12px;

    overflow:visible;
  }

  #how .flow.flow-visual::before{
    display:none;
    content:none;
  }

  #how .flow.flow-visual > li,
  #how .flow.flow-visual > li:nth-child(n){
    display:flex;

    flex:0 0 clamp(225px,14.5vw,270px);

    flex-direction:column;
    align-items:center;

    min-width:225px;

    margin:0;
    padding:0;

    overflow:visible;

    text-align:center;
  }

  /* TITLE */

  #how .flow-visual h3,
  #how .flow-visual li:nth-child(n) h3{
    order:1;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    width:100%;
    min-height:34px;

    margin:0 0 7px;
    padding:0;

    text-align:center;

    font-size:clamp(13px,.92vw,16px);
    line-height:1.15;

    white-space:normal;
  }

  /* SCREEN */

  #how .flow-visual figure,
  #how .flow-visual li:nth-child(n) figure{
    --how-screen-radius:clamp(28px,1.75vw,42px);

    order:2;

    position:relative;
    z-index:2;

    width:clamp(205px,12.8vw,245px);
    height:auto;

    margin:0 auto 8px;
    padding:0;

    overflow:hidden;

    border:0;
    outline:0;

    border-radius:var(--how-screen-radius);

    background:transparent;

    box-shadow:none;

    line-height:0;

    -webkit-clip-path:
      inset(0 round var(--how-screen-radius));

    clip-path:
      inset(0 round var(--how-screen-radius));

    transform:
      translate3d(0,0,0)
      scale(1);

    transform-origin:center center;

    backface-visibility:hidden;

    will-change:transform;

    transition:
      transform .34s cubic-bezier(.2,.72,.2,1),
      filter .34s ease;
  }

  #how .flow-visual figure > img,
  #how .flow-visual li:nth-child(n) figure > img{
    display:block;

    width:100%;
    height:auto;
    max-width:100%;

    margin:0;
    padding:0;

    object-fit:contain;
    object-position:center top;

    border-radius:var(--how-screen-radius);

    -webkit-clip-path:
      inset(0 round var(--how-screen-radius));

    clip-path:
      inset(0 round var(--how-screen-radius));
  }

  /* CAPTION */

  #how .flow-visual p,
  #how .flow-visual li:nth-child(n) p{
    order:3;

    width:100%;
    max-width:245px;
    min-height:0;

    margin:0;
    padding:0;

    text-align:center;

    font-size:12px;
    line-height:1.35;
  }

  /* --------------------------------------------------------
     FULLSCREEN NAV — keep vertical centre fixed
     -------------------------------------------------------- */

  .screen-preview-nav{
    top:50%;

    transform:translateY(-50%);
  }

  .screen-preview-prev:hover{
    transform:
      translate3d(-3px,-50%,0)
      scale(1.09);
  }

  .screen-preview-next:hover{
    transform:
      translate3d(3px,-50%,0)
      scale(1.09);
  }
}


/* ==========================================================
   WIDE DESKTOP / NORMAL 100%

   Не 8 экранов.
   Ровно 7 полноценных колонок занимают доступную ширину.
   Восьмой естественно остаётся справа за viewport.

   Это специально создаёт горизонтальный overflow даже
   на ultrawide и делает edge interaction осмысленным.
   ========================================================== */

@media (min-width:1800px){

  #how .flow.flow-visual{
    /*
       Контейнер равен viewport.
       Восьмой flex-item физически создаёт scrollWidth.
    */
    width:100%;
    min-width:100%;
  }

  #how .flow.flow-visual > li,
  #how .flow.flow-visual > li:nth-child(n){
    /*
       Семь карточек + шесть gaps = ровно доступная ширина.
       Восьмая карточка уходит вправо.
    */
    flex:
      0 0
      calc(
        (100% - (var(--how-gap) * 6))
        / 7
      );

    min-width:0;
  }

  /*
     Телефон увеличивается вместе с колонкой,
     но сохраняется разумный верхний предел.
  */
  #how .flow-visual figure,
  #how .flow-visual li:nth-child(n) figure{
    width:min(
      88%,
      310px
    );
  }

  #how .flow-visual h3,
  #how .flow-visual li:nth-child(n) h3{
    min-height:34px;

    font-size:clamp(12px,.76vw,15px);
  }

  #how .flow-visual p,
  #how .flow-visual li:nth-child(n) p{
    width:min(94%,250px);
    max-width:250px;

    font-size:clamp(11px,.66vw,13px);
  }
}


/* ==========================================================
   HOVER
   ========================================================== */

@media (min-width:901px) and (hover:hover) and (pointer:fine){

  #how .flow-visual figure:hover{
    z-index:30;

    border:0;
    outline:0;

    /*
       Видимое, но аккуратное увеличение.
       Без рамки и без прыжка разметки.
    */
    transform:
      translate3d(0,-5px,0)
      scale(1.075);

    filter:
      brightness(1.045)
      saturate(1.015);

    box-shadow:none;
  }
}

/* ==========================================================
   FEATURE 04 — WIDE DESKTOP ALIGNMENT

   The already accepted <=1699px geometry is extended ONLY
   to >=1700px, because fullscreen 100% crosses that breakpoint.

   150/175% existing behaviour is untouched.
   ========================================================== */

@media (min-width:1700px) {

  #features .feature:nth-child(4).feature-library .library-primary,
  #features .feature:nth-child(4).feature-library .library-search {
    position:absolute;

    top:0;
    bottom:0;

    height:auto;
    max-height:none;

    margin-top:0;
    margin-bottom:0;

    align-self:auto;
    justify-self:auto;

    transform:none;
  }

  #features .feature:nth-child(4).feature-library .library-primary img,
  #features .feature:nth-child(4).feature-library .library-search img {
    position:absolute;

    top:0;
    right:0;
    bottom:auto;
    left:0;

    width:100%;
    height:100%;

    margin:0;

    object-fit:cover;
    object-position:top;

    transform:none;
  }

}

/* PRICING FINAL08 — mirrored Coach/Pro DOM, alpha-tight trainer asset, exact shared rails */
@media (min-width: 901px) {
  #pricing .pricing-compact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.15vw, 22px);
    align-items: stretch;
  }

  #pricing .compact-coach-card { order: 1; }
  #pricing .compact-pro-card { order: 2; }
  #pricing .compact-chart-card { order: 3; }

  #pricing .compact-price-card {
    min-width: 0;
    min-height: clamp(420px, 22.5vw, 500px);
  }

  #pricing .compact-coach-card,
  #pricing .compact-pro-card {
    --p-edge: clamp(16px, 1vw, 20px);
    --p-gap: clamp(10px, .7vw, 14px);
    --p-left: calc(50% - var(--p-gap));
    --p-media-top: clamp(132px, 7.1vw, 150px);
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: var(--p-edge);
    container-type: inline-size;
  }

  #pricing .compact-card-head {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--p-gap);
    min-width: 0;
  }

  #pricing .compact-card-head > div:first-child {
    position: relative;
    z-index: 6;
    width: var(--p-left);
    max-width: var(--p-left);
    min-width: 0;
  }

  #pricing .compact-card-head h3,
  #pricing .compact-coach-head h3 {
    margin: 0;
    font-size: clamp(16px, .95vw, 19px);
    line-height: 1.15;
    white-space: nowrap;
  }

  #pricing .compact-card-head p,
  #pricing .compact-coach-frequency {
    margin: 5px 0 0;
    color: #2aaeff;
    font-size: clamp(10.5px, .68vw, 12px);
    line-height: 1.15;
    font-weight: 750;
  }

  #pricing .compact-coach-frequency {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  #pricing .compact-price-line,
  #pricing .compact-coach-price-line {
    position: relative;
    z-index: 7;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: baseline;
    column-gap: clamp(10px, .8vw, 16px);
    width: 100%;
    min-width: 0;
    margin: clamp(16px, .95vw, 19px) 0 0;
    padding: 0;
    border: 0;
  }

  #pricing .compact-main-price {
    min-width: 0;
    margin: 0;
  }

  #pricing .compact-price-line .compact-main-price strong,
  #pricing .compact-price-line .compact-coach-price,
  #pricing .compact-coach-price-line .compact-main-price strong,
  #pricing .compact-coach-price-line .compact-coach-price {
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: clamp(20px, 4.85cqi, 36px);
    line-height: 1;
    font-weight: 520;
    letter-spacing: -.035em;
    white-space: nowrap;
  }

  #pricing .compact-total-price,
  #pricing .compact-coach-total {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    justify-self: end;
    gap: clamp(5px, .4vw, 8px);
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    text-align: right;
    white-space: nowrap;
  }

  #pricing .compact-total-price span,
  #pricing .compact-coach-total span {
    color: var(--muted);
    font-size: clamp(10px, .65vw, 12px);
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
  }

  #pricing .compact-total-price strong,
  #pricing .compact-coach-total strong {
    color: var(--ink);
    font-size: clamp(13px, .9vw, 17px);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  #pricing .compact-coach-card .compact-benefits,
  #pricing .compact-pro-card .compact-benefits {
    position: relative;
    z-index: 6;
    box-sizing: border-box;
    inline-size: var(--p-left);
    width: var(--p-left);
    max-inline-size: var(--p-left);
    max-width: var(--p-left);
    min-width: 0;
    margin: clamp(15px, .9vw, 18px) 0 0;
    padding: 0;
    gap: clamp(5px, .35vw, 7px);
    color: var(--text);
    font-size: clamp(11.5px, .72vw, 14px);
    line-height: 1.22;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  #pricing .compact-coach-card .compact-benefits li,
  #pricing .compact-pro-card .compact-benefits li {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding-left: clamp(14px, .9vw, 17px);
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  #pricing .compact-pro-shot,
  #pricing .compact-trainer-zone {
    position: absolute;
    z-index: 3;
    top: var(--p-media-top);
    right: var(--p-edge);
    bottom: 0;
    left: auto;
    box-sizing: border-box;
    width: calc(50% - var(--p-edge));
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
  }

  #pricing .compact-pro-shot {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    border-radius: clamp(14px, 1vw, 18px) clamp(14px, 1vw, 18px) 0 0;
  }

  #pricing .compact-pro-shot img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 0 0 auto;
    object-fit: contain;
    object-position: right bottom;
    border-radius: inherit;
    filter: none;
    transform: none;
  }

  #pricing .compact-trainer-zone {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
  }

  #pricing .compact-trainer-zone .compact-trainer {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: right bottom;
    transform: none;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.48));
    pointer-events: none;
  }

  #pricing .compact-pro-card .term-control {
    position: absolute;
    z-index: 8;
    top: var(--p-edge);
    right: var(--p-edge);
    width: max-content;
    margin: 0;
    padding: 0;
    justify-items: end;
    text-align: right;
  }

  #pricing .compact-pro-card .term-caption {
    width: 100%;
    margin: 0;
    text-align: right;
  }

  #pricing .compact-pro-card .term-switch {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
  }

  #pricing .term-switch button {
    min-width: 24px;
    height: 24px;
    padding: 0 5px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
  }

  #pricing .term-switch button.is-on,
  #pricing .term-switch button[aria-pressed="true"] {
    color: #40c2ff;
    background: rgba(32,173,255,.10);
    box-shadow: 0 0 12px rgba(32,173,255,.28), inset 0 0 10px rgba(32,173,255,.08);
    font-weight: 900;
  }

  #pricing .term-switch button.is-on::after,
  #pricing .term-switch button[aria-pressed="true"]::after {
    content: none;
    display: none;
  }

  html[data-theme="light"] #pricing .term-switch button.is-on,
  html[data-theme="light"] #pricing .term-switch button[aria-pressed="true"] {
    color: #007ec8;
    background: rgba(0,142,220,.09);
    box-shadow: 0 0 12px rgba(0,142,220,.20), inset 0 0 10px rgba(0,142,220,.06);
  }

  #pricing .compact-coach-card::after {
    background: linear-gradient(90deg, transparent 47%, rgba(7,18,30,.08) 66%, rgba(7,18,30,.02));
  }

  #pricing .compact-chart-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: clamp(9px, .7vw, 12px);
    min-height: clamp(420px, 22.5vw, 500px);
    padding: clamp(18px, 1.35vw, 24px);
    overflow: hidden;
  }

  #pricing .compact-chart-card::before {
    content: none;
    display: none;
  }

  #pricing .compact-chart-rows {
    grid-row: 2;
    display: grid;
    gap: clamp(7px, .55vw, 10px);
    min-width: 0;
  }

  #pricing .compact-chart-row {
    display: grid;
    grid-template-columns: minmax(132px, .9fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(10px, .8vw, 14px);
    min-width: 0;
  }

  #pricing .compact-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: clamp(12px, .78vw, 14px);
    line-height: 1.15;
    white-space: nowrap;
  }

  #pricing .compact-chart-discount {
    margin-left: 2px;
    color: var(--pro-color, #176df1);
    font-weight: 850;
    white-space: nowrap;
  }

  #pricing .compact-bar-track {
    display: flex;
    align-items: center;
    width: 100%;
    height: clamp(24px, 1.7vw, 30px);
    overflow: visible;
    border-radius: 999px;
    background: transparent;
  }

  #pricing .compact-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bar-size, 100%);
    min-width: max-content;
    height: 100%;
    padding-inline: clamp(9px, .7vw, 13px);
    border-radius: 999px;
  }

  #pricing .compact-bar b {
    overflow: visible;
    color: #fff;
    font-size: clamp(10px, .7vw, 12.5px);
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
  }

  #pricing .compact-chart-ring-area {
    position: relative;
    grid-row: 3;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  #pricing .compact-chart-ring-area::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: auto;
    height: calc(100% - 8px);
    max-height: 300px;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from -36deg, var(--trainer-color) 0 var(--trainer-share), var(--pro-color) var(--trainer-share) 100%);
    -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
    mask: radial-gradient(circle, transparent 0 54%, #000 55% 100%);
  }

  #pricing .compact-chart-saving {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    width: auto;
    height: 68%;
    max-height: 204px;
    aspect-ratio: 1;
    margin: 0;
    padding: 7%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-rows: auto auto;
    place-content: center;
    place-items: center;
    row-gap: clamp(5px, 3cqi, 8px);
    overflow: hidden;
    border-radius: 50%;
    background: var(--bg);
    color: var(--ink);
    text-align: center;
    container-type: inline-size;
  }

  #pricing .compact-chart-saving span,
  #pricing .compact-chart-saving strong {
    position: static;
    inset: auto;
    transform: none;
    display: block;
    width: max-content;
    max-width: 92%;
    margin: 0 auto;
    text-align: center;
    white-space: nowrap;
  }

  #pricing .compact-chart-saving span {
    font-size: clamp(14px, 9.5cqi, 21px);
    font-weight: 780;
    line-height: 1;
  }

  #pricing .compact-chart-saving strong {
    color: #39e4b6;
    font-size: clamp(25px, 19cqi, 42px);
    font-weight: 820;
    line-height: 1;
  }

  html[data-theme="light"] #pricing .compact-chart-discount {
    color: color-mix(in srgb, var(--pro-color, #176df1) 82%, #06243b 18%);
  }

  @media (max-width: 1500px) {
    #pricing .compact-price-card,
    #pricing .compact-chart-card {
      min-height: clamp(448px, 34vw, 520px);
    }

    #pricing .compact-coach-card,
    #pricing .compact-pro-card {
      --p-edge: 14px;
      --p-gap: 8px;
      --p-media-top: 132px;
    }

    #pricing .compact-price-line .compact-main-price strong,
    #pricing .compact-price-line .compact-coach-price,
    #pricing .compact-coach-price-line .compact-main-price strong,
    #pricing .compact-coach-price-line .compact-coach-price {
      font-size: clamp(19px, 4.45cqi, 29px);
    }

    #pricing .compact-card-head p,
    #pricing .compact-coach-frequency {
      font-size: 10.5px;
    }

    #pricing .compact-total-price span,
    #pricing .compact-coach-total span {
      font-size: 10px;
    }

    #pricing .compact-total-price strong,
    #pricing .compact-coach-total strong {
      font-size: 13px;
    }

    #pricing .compact-coach-card .compact-benefits,
    #pricing .compact-pro-card .compact-benefits {
      font-size: 11.5px;
      line-height: 1.2;
      gap: 5px;
    }

    #pricing .compact-chart-row {
      grid-template-columns: minmax(105px, .95fr) minmax(0, 1.25fr);
    }

    #pricing .compact-chart-legend {
      font-size: 12px;
      gap: 5px;
    }
  }

  @media (max-width: 1150px) {
    #pricing .compact-price-card,
    #pricing .compact-chart-card {
      min-height: 520px;
    }

    #pricing .compact-coach-card,
    #pricing .compact-pro-card {
      --p-media-top: 136px;
    }

    #pricing .compact-price-line .compact-main-price strong,
    #pricing .compact-price-line .compact-coach-price,
    #pricing .compact-coach-price-line .compact-main-price strong,
    #pricing .compact-coach-price-line .compact-coach-price {
      font-size: clamp(18px, 4.2cqi, 24px);
    }

    #pricing .compact-coach-card .compact-benefits,
    #pricing .compact-pro-card .compact-benefits {
      font-size: 11px;
    }
  }
}

@media (max-width: 900px) {
  #pricing .compact-coach-card .compact-card-head,
  #pricing .compact-coach-card .compact-price-line {
    position: relative;
    z-index: 4;
  }

  #pricing .compact-coach-card .compact-price-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
  }

  #pricing .compact-coach-card .compact-main-price {
    margin: 0;
  }

  #pricing .compact-coach-card .compact-coach-price {
    font-size: 25px;
    line-height: 1;
    font-weight: 520;
    white-space: nowrap;
  }

  #pricing .compact-coach-card .compact-benefits {
    position: relative;
    z-index: 4;
    width: 68%;
    max-width: 68%;
  }

  #pricing .compact-trainer-zone {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 0;
    width: 40%;
    height: calc(100% - 126px);
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }

  #pricing .compact-trainer-zone .compact-trainer {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }
}

/* ==========================================================
   PRICING FINAL08-COSMETIC03B — 2026-09-06
   ONLY:
   - media begins at exact first benefit-row top on desktop;
   - clean coach background, no coach overlay/spotlight;
   - four rounded corners on Pro phone;
   - discount beside monthly Pro price;
   - saving-period line in ring;
   - single Pricing section background (transparent price-shell);
   - readable light-theme term hover;
   - theme labels match header navigation typography.
   ========================================================== */

html body #pricing > .price-shell {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html body #pricing > .price-shell::before,
html body #pricing > .price-shell::after {
  content: none;
  display: none;
}

#pricing .compact-coach-card,
html:not([data-theme="light"]) #pricing .compact-coach-card {
  background: linear-gradient(150deg, #101f30, #07121e);
  background-image: linear-gradient(150deg, #101f30, #07121e);
}

html[data-theme="light"] #pricing .compact-coach-card {
  background: linear-gradient(150deg, #f8fcff, #dceaf3);
  background-image: linear-gradient(150deg, #f8fcff, #dceaf3);
}

#pricing .compact-coach-card:after,
#pricing .compact-coach-card::after,
html[data-theme="light"] #pricing .compact-coach-card:after,
html[data-theme="light"] #pricing .compact-coach-card::after {
  content: none;
  display: none;
  background: none;
  box-shadow: none;
}

@media (min-width: 901px) {
  #pricing .compact-pro-shot,
  #pricing .compact-trainer-zone {
    top: var(--pricing-media-y, var(--p-media-top));
    bottom: 0;
    height: auto;
  }

  #pricing .compact-pro-shot {
    --pricing-phone-radius: clamp(14px, 1vw, 18px);
    overflow: hidden;
    border-radius: var(--pricing-phone-radius);
    clip-path: inset(0 round var(--pricing-phone-radius));
    background: transparent;
  }

  #pricing .compact-pro-shot img {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--pricing-phone-radius);
    object-fit: contain;
    object-position: right top;
    clip-path: inset(0 round var(--pricing-phone-radius));
  }

  #pricing .compact-trainer-zone,
  #pricing .compact-trainer-zone .compact-trainer {
    background: transparent;
    box-shadow: none;
  }

  #pricing .compact-trainer-zone .compact-trainer {
    object-position: right top;
  }

  #pricing .compact-pro-card .compact-main-price {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(6px, .45vw, 9px);
    font-size: clamp(20px, 4.85cqi, 36px);
    line-height: 1;
    white-space: nowrap;
  }

  #pricing .compact-pro-card .compact-price-line .compact-main-price > strong,
  #pricing .compact-pro-card .compact-price-line .compact-main-price > .compact-chart-discount {
    display: inline;
    margin: 0;
    font-size: 1em;
    line-height: 1;
  }

  #pricing .compact-pro-card .compact-price-line .compact-main-price > .compact-chart-discount {
    color: var(--pro-color, #176df1);
    font-weight: 850;
  }

  html[data-theme="light"] #pricing .compact-pro-card .compact-price-line .compact-main-price > .compact-chart-discount {
    color: color-mix(in srgb, var(--pro-color, #176df1) 82%, #06243b 18%);
  }

  #pricing .compact-chart-saving {
    grid-template-rows: auto auto auto;
  }

  #pricing .compact-chart-saving-period {
    position: static;
    display: block;
    width: max-content;
    max-width: 92%;
    margin: 0 auto;
    color: var(--muted);
    font-size: clamp(10px, 6.3cqi, 13px);
    font-weight: 500;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

}

@media (min-width: 901px) and (max-width: 1500px) {
  #pricing .compact-pro-card .compact-main-price {
    font-size: clamp(19px, 4.45cqi, 29px);
  }
}

@media (min-width: 901px) and (max-width: 1150px) {
  #pricing .compact-pro-card .compact-main-price {
    font-size: clamp(18px, 4.2cqi, 24px);
  }
}

html[data-theme="light"] #pricing .term-switch button:not(:disabled):hover {
  color: #486273;
}

html[data-theme="light"] #pricing .term-switch button.is-on:hover,
html[data-theme="light"] #pricing .term-switch button[aria-pressed="true"]:hover {
  color: #007ec8;
}

.top .theme > .theme-day,
.top .theme > .theme-night {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

html:not([data-theme="light"]) .top .theme > .theme-day {
  font-weight: 400;
}

html:not([data-theme="light"]) .top .theme > .theme-night {
  font-weight: 700;
}

html[data-theme="light"] .top .theme > .theme-day {
  font-weight: 700;
}

html[data-theme="light"] .top .theme > .theme-night {
  font-weight: 400;
}

html[data-theme-target="dark"] .top .theme > .theme-day {
  font-weight: 400;
}

html[data-theme-target="dark"] .top .theme > .theme-night {
  font-weight: 700;
}

html[data-theme-target="light"] .top .theme > .theme-day {
  font-weight: 700;
}

html[data-theme-target="light"] .top .theme > .theme-night {
  font-weight: 400;
}

/* ==========================================================
   UX03 — restore HOW/Pricing JS + keep Hero smooth + no Pricing card hover + cosmetic cleanup
   2026-09-07
   Scope:
   - keep accepted Features 50/50 -> 40/60 -> 50/50;
   - keep accepted HOW hover clearance;
   - keep smooth Hero CTA hover;
   - remove Pricing-card hover movement/animation completely;
   - slightly reduce HOW screenshot corner clipping;
   - remove trainer media shadow/spotlight residue;
   - force four-corner clipping on Pricing phone.
   ========================================================== */

#features,
#how,
#pricing,
#app,
#faq,
#contact {
  scroll-margin-top: 88px;
}

@media (min-width: 901px) {
  #features .feature-grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-template-areas:
      "one one one one one two two two two two"
      "three three three three four four four four four four"
      "five five five five five six six six six six";
  }

  /* Pricing cards: no hover animation and no hover geometry change. */
  #pricing .compact-price-card {
    transform: none;
    filter: none;
    will-change: auto;
    transition:
      background-color 1.02s ease,
      background 1.02s ease,
      color 1.02s ease;
  }

  #pricing .compact-price-card:hover {
    transform: none;
    filter: none;
    border-color: rgba(116,182,228,.20);
    box-shadow:
      inset 0 1px rgba(255,255,255,.04),
      0 16px 34px rgba(0,0,0,.24);
  }

  html[data-theme="light"] #pricing .compact-price-card:hover {
    border-color: rgba(23,100,151,.20);
    box-shadow:
      inset 0 1px #fff,
      0 16px 32px rgba(48,78,100,.13);
  }

  /* Hero buttons keep the accepted smooth +7.5% motion. */
  #hero .hero-cta .btn {
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
    transition:
      transform .38s cubic-bezier(.2,.72,.2,1),
      filter .38s ease,
      box-shadow .38s ease,
      border-color .38s ease;
  }

  #hero .hero-cta .btn:hover {
    position: relative;
    z-index: 20;
    transform: translate3d(0, -5px, 0) scale(1.075);
    filter: brightness(1.045) saturate(1.015);
  }

  /* Remove every CSS-created shadow/background from the trainer media zone. */
  #pricing .compact-trainer-zone,
  #pricing .compact-trainer-zone .compact-trainer {
    background: transparent;
    background-image: none;
    box-shadow: none;
  }

  #pricing .compact-trainer-zone .compact-trainer {
    filter: none;
  }

  /* Remove the coach-only spotlight from the card itself. */
  #pricing .compact-coach-card,
  html:not([data-theme="light"]) #pricing .compact-coach-card {
    background: linear-gradient(150deg, rgba(15,31,49,.96), rgba(5,14,25,.98));
    background-image: linear-gradient(150deg, rgba(15,31,49,.96), rgba(5,14,25,.98));
  }

  html[data-theme="light"] #pricing .compact-coach-card {
    background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(220,234,244,.96));
    background-image: linear-gradient(150deg, rgba(255,255,255,.96), rgba(220,234,244,.96));
  }

  /* Force the real PNG box itself to clip all four corners. */
  html body #pricing .compact-pro-card .compact-pro-shot {
    overflow: hidden;
    border-radius: clamp(11px, .78vw, 15px);
    clip-path: inset(0 round clamp(11px, .78vw, 15px));
  }

  html body #pricing .compact-pro-card .compact-pro-shot > img {
    display: block;
    overflow: hidden;
    border-radius: clamp(11px, .78vw, 15px);
    clip-path: inset(1px round clamp(11px, .78vw, 15px));
    -webkit-clip-path: inset(1px round clamp(11px, .78vw, 15px));
    transform: translateZ(0);
  }
}

/* UX06 — HOW per-asset crop + true edge blur + smooth video CTA
   2026-09-07
   Scope only:
   - preserve accepted HOW geometry/hover/autoscroll/fullscreen;
   - keep items 2–6 at the accepted UX05 right crop;
   - stop cutting the phone body on items 1/7/8;
   - restore real backdrop blur without visible vertical seams;
   - keep Pricing Pro phone sharp;
   - make Video CTA use independently animated translate/scale.
*/

/* ----------------------------------------------------------
   2. HOW real feathered edge blur
   Pseudo-elements extend beyond the viewport-side edge.
   Their only visible termination is the masked inner edge,
   eliminating the Chromium zoom seam.
   ---------------------------------------------------------- */

#how .flow-shell {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

#how .flow-shell::before,
#how .flow-shell::after {
  content: "";
  position: absolute;
  z-index: 50;
  top: -8px;
  bottom: -8px;
  width: calc(var(--content-rail) + clamp(170px, 10vw, 260px));
  opacity: 0;
  pointer-events: none;
  background: rgba(5, 18, 31, .055);
  -webkit-backdrop-filter: blur(10px) saturate(.96);
  backdrop-filter: blur(10px) saturate(.96);
  -webkit-filter: none;
  filter: none;
  transform: none;
  transition: opacity .28s ease;
  will-change: opacity;
}

#how .flow-shell::before {
  left: calc(0px - var(--content-rail) - 96px);
  -webkit-mask-image:
    linear-gradient(90deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,.54) 72%,
      rgba(0,0,0,.20) 88%,
      transparent 100%);
  mask-image:
    linear-gradient(90deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,.54) 72%,
      rgba(0,0,0,.20) 88%,
      transparent 100%);
}

#how .flow-shell::after {
  right: calc(0px - var(--content-rail) - 96px);
  -webkit-mask-image:
    linear-gradient(270deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,.54) 72%,
      rgba(0,0,0,.20) 88%,
      transparent 100%);
  mask-image:
    linear-gradient(270deg,
      #000 0%,
      #000 42%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,.54) 72%,
      rgba(0,0,0,.20) 88%,
      transparent 100%);
}

#how .flow-shell:has(#flow-viewport.has-left)::before {
  opacity: 1;
}

#how .flow-shell:has(#flow-viewport.has-right)::after {
  opacity: 1;
}

html[data-theme="light"] #how .flow-shell::before,
html[data-theme="light"] #how .flow-shell::after {
  background: rgba(224, 239, 248, .08);
}

/* ----------------------------------------------------------
   3. Pricing phone stays sharp — accepted UX05 behavior
   ---------------------------------------------------------- */

html body #pricing .compact-pro-card .compact-pro-shot {
  opacity: 1;
  filter: none;
  -webkit-filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: transparent;
  mix-blend-mode: normal;
}

html body #pricing .compact-pro-card .compact-pro-shot > img {
  opacity: 1;
  filter: none;
  -webkit-filter: none;
  mix-blend-mode: normal;
}

/* ----------------------------------------------------------
   4. Video CTA
   Use individual translate/scale properties so legacy .btn
   transform hover rules cannot make the animation jump.
   ---------------------------------------------------------- */

#how .section-head .btn-video {
  position: relative;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  transform: none;
  translate: 0 0;
  scale: 1;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: translate, scale;
  transition:
    translate .38s cubic-bezier(.2,.72,.2,1),
    scale .38s cubic-bezier(.2,.72,.2,1),
    filter .38s ease,
    box-shadow .38s ease,
    border-color .38s ease;
}

#how .section-head .btn-video:hover {
  z-index: 20;
  transform: none;
  translate: 0 -5px;
  scale: 1.075;
  filter: brightness(1.045) saturate(1.015);
}


/* RELOAD01 — native hash reload is instant; accepted UX smooth-scroll remains JS-driven
   -------------------------------------------------------------------------------
   Header/footer smooth scrolling is implemented by scrollToAnchor() in app.js.
   Native CSS smooth scrolling is disabled so browser hash restoration on Ctrl+F5
   cannot animate against asynchronous Pricing/layout initialization.
*/
html {
  scroll-behavior: auto;
}


/* RELOAD02 — initial fragment guard
   Prevent the browser from painting an intermediate anchor position while
   above-the-fold layout is still settling. Normal header/footer navigation
   remains handled by the accepted JS scrollToAnchor() implementation.
*/
html.reload02-anchor-pending {
  scroll-behavior: auto;
  overflow-anchor: none;
}

html.reload02-anchor-pending body {
  visibility: hidden;
  overflow-anchor: none;
}


/* DESKTOP-UI-CANONICAL-01
   Consolidated accepted desktop/tablet Hero, App and FAQ state.
   Mobile <=900px is intentionally untouched.
*/
@media (min-width:901px){

  /* HEADER */

  #top .top-inner{
    box-sizing:border-box;
    width:calc(100% - var(--content-rail) * 2);
    max-width:none;
    margin-inline:auto;
    padding-inline:0;
  }

  #top .tools{
    margin-left:auto;
    margin-right:0;
    padding-right:0;
    justify-content:flex-end;
  }

  #top #theme{
    flex:0 0 auto;
    margin-right:0;
  }


  /* HERO */

  #hero .stage{
    position:relative;
    box-sizing:border-box;

    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    margin:0;
    padding:64px 0 0;

    overflow:hidden;
    display:block;
  }

  #hero .stage img.hero-integrated{
    position:static;
    display:block;

    box-sizing:border-box;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    margin:0;

    object-fit:contain;
    object-position:right bottom;

    transform:none;
  }


  /* APP */

  #app.app-showcase{
    box-sizing:border-box;

    clip-path:none;
    margin-bottom:0;

    padding-top:clamp(18px,1.8vw,30px);
    padding-bottom:0;

    overflow:hidden;
    overflow-anchor:none;
  }

  #app .app-grid{
    box-sizing:border-box;

    grid-template-columns:
      minmax(0,50%)
      minmax(0,50%);

    grid-template-rows:minmax(0,1fr);

    column-gap:clamp(24px,3vw,58px);

    height:clamp(500px,36vw,550px);
    min-height:clamp(500px,36vw,550px);

    padding-top:0;

    align-items:stretch;
    overflow:hidden;
  }

  #app .app-copy{
    grid-column:1;

    box-sizing:border-box;

    width:100%;
    min-width:0;
    max-width:100%;

    align-self:stretch;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;

    padding:
      0
      0
      clamp(26px,2.4vw,42px);
  }

  #app .app-copy > .eyebrow{
    margin-top:0;
  }

  #app .app-title{
    width:100%;
    max-width:100%;
    white-space:normal;
  }

  #app .app-points{
    width:100%;
    max-width:100%;
    margin-top:26px;
  }

  #app .app-points li{
    width:100%;
    max-width:100%;

    margin:8px 0;

    font-size:
      var(
        --ui-final01-copy-size,
        clamp(13px,.72vw,14px)
      );

    line-height:1.38;

    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:none;
  }


  /* Common crop viewport for all four phones. */

  #app .phones{
    grid-column:2;

    position:relative;
    display:block;

    box-sizing:border-box;

    width:100%;
    max-width:100%;
    min-width:0;

    height:100%;
    min-height:0;

    margin:0;
    padding:0;

    align-self:stretch;
    justify-self:stretch;

    overflow:hidden;

    transform:none;
  }


  /* One width-driven four-phone composition. */

  #app .phones-stage{
    position:absolute;

    right:4%;
    bottom:-1.6rem;

    width:min(94%,45rem);

    height:auto;
    max-height:none;

    aspect-ratio:1.52 / 1;

    margin:0;

    transform:none;
    transform-origin:right bottom;
  }

  #app .phones-stage .phone{
    position:absolute;

    bottom:0;

    height:auto;
    max-width:none;
    min-width:0;

    margin:0;

    aspect-ratio:41 / 84;

    transform-origin:center bottom;
  }

  #app .phones-stage .phone > img{
    display:block;

    width:100%;
    height:auto;

    max-width:100%;

    margin:0;
  }

  #app .phones-stage .phone-1{
    left:3%;
    right:auto;

    width:27%;
    z-index:2;

    transform:
      rotate(-3deg)
      scale(.94);
  }

  #app .phones-stage .phone-2{
    left:24%;
    right:auto;

    width:30%;
    z-index:5;

    transform:
      translateY(-8px)
      rotate(-1deg)
      scale(1.03);
  }

  #app .phones-stage .phone-3{
    left:49%;
    right:auto;

    width:27%;
    z-index:3;

    transform:
      rotate(2deg)
      scale(.95);
  }

  #app .phones-stage .phone-4{
    left:70%;
    right:auto;

    width:29%;
    z-index:1;

    transform:
      rotate(4deg)
      scale(1);
  }


  /* FAQ */

  #faq.faq.block{
    overflow:hidden;
    padding-top:clamp(18px,1.8vw,30px);
  }

  #faq .faq-heading{
    padding-top:0;
  }

  #faq .faq-heading > .kicker{
    margin-top:0;
  }

  #faq .faq-list{
    --ui-final02-faq-row:
      clamp(138px,8vw,156px);

    grid-template-rows:
      repeat(
        3,
        var(--ui-final02-faq-row)
      );

    grid-auto-flow:row;

    grid-auto-rows:
      var(--ui-final02-faq-row);

    align-content:start;
  }

  #faq .faq-list details{
    box-sizing:border-box;

    width:100%;

    height:
      var(--ui-final02-faq-row);

    min-height:
      var(--ui-final02-faq-row);

    max-height:
      var(--ui-final02-faq-row);

    padding:
      clamp(14px,1.05vw,17px)
      0;

    overflow:hidden;
    transform:none;
  }

  #faq .faq-list summary{
    min-width:0;
  }

  #faq .faq-list details > p,
  #faq .faq-list details[open] > p{
    display:block;

    max-height:0;

    margin:0 50px 0 0;

    overflow:hidden;
    opacity:0;

    transform:translateY(-7px);

    color:var(--muted);

    font-size:
      var(
        --ui-final01-copy-size,
        clamp(13px,.72vw,14px)
      );

    line-height:1.38;

    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;

    pointer-events:none;

    transition:
      max-height .42s cubic-bezier(.2,.72,.2,1),
      margin-top .42s cubic-bezier(.2,.72,.2,1),
      opacity .30s ease,
      transform .42s cubic-bezier(.2,.72,.2,1);
  }

  #faq .faq-list details.faq-expanded > p{
    margin-top:8px;

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;
  }

  #faq .faq-list details[open] summary::after{
    content:"+";
  }

  #faq .faq-list details.faq-expanded summary::after{
    content:"−";
  }
}


/* High-zoom desktop spacing.
   App height already uses the canonical width-driven rule. */
@media (min-width:901px) and (max-width:1180px){

  #app .app-copy{
    padding-bottom:1.35rem;
  }

  #app .app-title{
    margin-bottom:.9rem;
  }

  #app .app-points{
    margin-top:1rem;
  }

  #app .app-points li{
    margin-top:.28rem;
    margin-bottom:.28rem;
  }

  #app .google-play-soon{
    margin-top:1.05rem;
  }
}

/* END DESKTOP-UI-CANONICAL-01 */


/* LEGAL-FINAL01-A — legal page visual normalization
   Does not change accepted landing section geometry.
*/

.page {
  padding-top: clamp(104px, 8vw, 132px);
}

.page .legal {
  max-width: none;
}

.page .legal h1 {
  width: min(100%, 980px);
  max-width: 980px;

  margin: 0 0 clamp(34px, 3vw, 48px);

  font-size: clamp(34px, 3vw, 48px);
  line-height: 1.08;
  letter-spacing: -.035em;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.page .legal h2 {
  margin-top: clamp(28px, 2.4vw, 38px);
  margin-bottom: 10px;

  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.2;
}

.page .legal p,
.page .legal li {
  max-width: none;
  font-size: clamp(14px, .92vw, 16px);
  line-height: 1.62;
}

.page .legal p[id^="seller-inline"] {
  color: var(--text);
}

.page + .foot .foot-end,
.page ~ .foot .foot-end {
  justify-content: flex-start;
}

@media (min-width: 901px) {
  .page > .wrap,
  .page .legal {
    box-sizing: border-box;
    width: calc(100% - var(--content-rail) * 2);
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* LEGAL-FINAL02 — legal cleanup + dynamic brand
   Legal desktop/tablet typography only.
*/

.page .legal h1 {
  width: min(100%, 1180px);
  max-width: 1180px;

  margin-bottom: clamp(26px, 2.2vw, 36px);

  font-size: clamp(28px, 2.15vw, 38px);
  line-height: 1.1;
  letter-spacing: -.025em;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.page .legal h2 {
  margin-top: clamp(22px, 1.8vw, 30px);
  margin-bottom: 8px;

  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.22;
}

/* LEGAL-FINAL03 — heading flow + light contrast
   Legal pages only.
   Main landing geometry is untouched.
*/

/*
 * No artificial H1 width ceiling.
 * Wrapping is now determined only by the actual content rail.
 */
.page .legal h1 {
  width: 100%;
  max-width: none;

  margin-bottom: clamp(26px, 2.2vw, 36px);

  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -.024em;

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/*
 * Slightly smaller legal section headings.
 */
.page .legal h2 {
  margin-top: clamp(22px, 1.8vw, 30px);
  margin-bottom: 8px;

  font-size: 18px;
  line-height: 1.24;
}

/*
 * Light theme: explicit readable legal palette.
 */
html[data-theme="light"] .page .legal h1,
html[data-theme="light"] .page .legal h2,
html[data-theme="light"] .page .legal h3 {
  color: #102638;
}

html[data-theme="light"] .page .legal p,
html[data-theme="light"] .page .legal li,
html[data-theme="light"] .page .legal dd {
  color: #29485f;
}

html[data-theme="light"] .page .legal a {
  color: #006b9f;
  text-decoration-color: currentColor;
}

html[data-theme="light"] .page .legal a:hover {
  color: #004f78;
}

}



/* DESKTOP-PNG-LAYOUT-FINAL-01
   Scope: desktop only.
   Final geometry after unified PNG screenshots.
*/
@media (min-width:901px){

  /* ------------------------------------------------------
     FEATURES 06
     Previous desktop tuning raised this image to -92px.
     New PNG needs 16px less upward translation.
     ------------------------------------------------------ */
  #features .feature:nth-child(6) .progress-crop img{
    top:-76px;
  }


  /* ------------------------------------------------------
     HOW
     PNG files now share one geometry.
     flow-viewport is the ONLY scroll container.
     ------------------------------------------------------ */

  #how .flow-viewport{
    width:100%;

    overflow-x:auto;
    overflow-y:visible;

    scrollbar-width:none;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  #how .flow-viewport::-webkit-scrollbar{
    display:none;
  }

  #how .flow.flow-visual{
    display:flex;

    width:100%;
    max-width:none;

    gap:18px;

    margin:0;
    padding:0 8px 44px;

    overflow:visible;

    scroll-behavior:auto;
  }

  /*
   * 6 full screenshots + approximately half of #7.
   * Six inter-card gaps are visible before half of card #7:
   *
   *   6.5 cards + 6 * 18px
   */
  #how .flow.flow-visual > li{
    /*
     * 6 full cards + 1/2 of card #7.
     *
     * Do NOT use division inside calc().
     * 1 / 6.5 = 0.1538461538.
     */
    --how-card-width:
      calc(15.38461538% - 17.84615385px);

    display:flex;
    flex-direction:column;

    flex:
      0
      0
      var(--how-card-width);

    width:var(--how-card-width);
    min-width:var(--how-card-width);
    max-width:var(--how-card-width);

    padding:0 0 10px;

    text-align:center;
  }

  #how .flow.flow-visual > li > h3{
    order:1;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    width:100%;
    min-height:34px;

    margin:0 0 7px;

    font-size:16px;

    white-space:normal;
  }

  #how .flow.flow-visual > li > figure{
    order:2;

    position:relative;

    flex:0 0 auto;

    box-sizing:border-box;

    width:100%;
    height:auto;
    aspect-ratio:560 / 1199;

    margin:0 auto;

    overflow:visible;

    border:0;
    border-radius:0;

    background:transparent;
    box-shadow:none;

    transform:none;
    clip-path:none;
  }

  #how .flow.flow-visual > li > figure::before,
  #how .flow.flow-visual > li > figure::after{
    content:none;
    display:none;
  }

  #how .flow.flow-visual > li > figure > img{
    position:static;

    display:block;

    width:100%;
    height:100%;
    max-width:100%;
    max-height:100%;

    margin:0;

    object-fit:contain;
    object-position:center center;

    border:0;
    border-radius:0;

    transform:none;
    clip-path:none;

    background:transparent;
    box-shadow:none;
  }

  #how .flow.flow-visual > li > p{
    order:3;

    width:100%;

    margin-top:12px;
  }
  /*
   * Reserve physical space for the 5% hover growth.
   * transform itself does not affect document flow, therefore
   * these margins prevent overlap with h3 above and p below.
   */
  #how .flow.flow-visual > li > figure{
    margin-top:14px;
    margin-bottom:14px;

    transform:none;
    transform-origin:center center;

    transition:
      transform .22s ease;
  }

  #how .flow.flow-visual > li > figure:hover{
    transform:scale(1.05);
    transform-origin:center center;

    filter:none;
    box-shadow:none;

    z-index:5;
  }



  /* ------------------------------------------------------
     CONTACT

     Desktop form:
       row 1 = Name / Email
       row 2 = Topic / Message
       row 3 = Consent / Message
       row 4 = Submit  / Message

     Result:
       - consent and button have same width as Name/Topic;
       - message bottom = submit button bottom.
     ------------------------------------------------------ */

  #faq > .faq-grid,
  #contact > .contact-shell{
    display:grid;

    grid-template-columns:
      34%
      66%;

    column-gap:0;
  }

  #faq .faq-heading,
  #contact .contact-copy{
    grid-column:1;
  }

  #faq .faq-list,
  #contact #contact-form{
    grid-column:2;

    width:100%;
    max-width:none;
    min-width:0;
  }

  #faq .faq-list{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    column-gap:15px;
    row-gap:0;

    margin:0;
    padding:0;
  }


  #contact #contact-form{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    grid-template-rows:
      auto
      auto
      auto
      auto
      auto;

    column-gap:15px;
    row-gap:15px;

    align-items:stretch;
  }

  #contact #contact-form > .two{
    grid-column:1 / -1;
    grid-row:1;

    display:grid;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr);

    gap:15px;
  }

  /* Topic */
  #contact #contact-form > label:nth-of-type(1){
    grid-column:1;
    grid-row:2;
  }

  /* Message */
  #contact #contact-form > label:nth-of-type(2){
    grid-column:2;
    grid-row:2 / 5;

    display:grid;
    grid-template-rows:auto minmax(0,1fr);

    min-height:0;
  }

  #contact #contact-form > label:nth-of-type(2) textarea{
    box-sizing:border-box;

    height:100%;
    min-height:0;

    resize:none;
  }

  /* Consent */
  #contact #contact-form > .check{
    grid-column:1;
    grid-row:3;

    display:grid;

    grid-template-columns:
      18px
      minmax(0,1fr);

    gap:10px;

    width:100%;
    max-width:100%;

    margin:0;

    align-items:start;
  }

  #contact #contact-form > .check > input{
    width:18px;
    height:18px;
    min-height:18px;

    margin:1px 0 0;
  }

  /* Submit */
  #contact #contact-submit{
    grid-column:1;
    grid-row:4;

    width:100%;
    max-width:100%;

    margin:0;
  }

  #contact #contact-status{
    grid-column:1;
    grid-row:5;

    margin:0;
  }
}
/* END DESKTOP-PNG-LAYOUT-FINAL-01 */


/* MOBILE-LEGAL-CANONICAL-01
   Legal pages only.
   Smartphone layout is isolated from desktop/tablet legal typography.
*/
@media (max-width:767px){

  body .page{
    padding-top:
      calc(
        var(--m-header-total, 64px)
        + 18px
      );
  }

  body .page > .legal{
    box-sizing:border-box;

    width:calc(100% - 32px);
    max-width:none;

    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }

  body .page .legal h1{
    width:100%;
    max-width:none;

    margin:
      0
      0
      22px;

    font-size:clamp(24px,6.8vw,29px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.025em;

    white-space:normal;
    overflow-wrap:break-word;
    word-break:normal;
  }

  body .page .legal h2{
    margin-top:24px;
    margin-bottom:8px;

    font-size:18px;
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.015em;
  }

  body .page .legal h3{
    margin-top:20px;
    margin-bottom:7px;

    font-size:16px;
    line-height:1.25;
  }
}
/* END MOBILE-LEGAL-CANONICAL-01 */


/* Mobile DOM */
.m-hero,
.m-features {
  display:none;
}

@media (max-width:767px) {

  /* Mobile header */
  :root {
    --m-header-h:64px;
    --m-header-safe:env(safe-area-inset-top, 0px);
    --m-header-total:calc(var(--m-header-h) + var(--m-header-safe));
  }

  .top {
    position:fixed;
    top:0;
    right:0;
    bottom:auto;
    left:0;

    z-index:100;

    box-sizing:border-box;

    width:100%;
    height:var(--m-header-total);

    padding-top:var(--m-header-safe);

    background:#03101d;
    border-bottom:1px solid rgba(255,255,255,.08);

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .top.is-on {
    background:#03101d;
    border-bottom-color:rgba(255,255,255,.08);
    box-shadow:0 8px 24px rgba(0,0,0,.22);

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  html[data-theme="light"] .top,
  html[data-theme="light"] .top.is-on {
    background:#f6fafc;
    border-bottom-color:rgba(18,79,118,.14);
    box-shadow:0 8px 24px rgba(42,71,91,.12);

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .top .top-inner {
    height:var(--m-header-h);
  }

  .top .wrap {
    width:100%;
    max-width:none;
    padding-left:10px;
    padding-right:2px;
  }

  .top .tools {
    margin-left:auto;
    margin-right:0;
    padding-right:0;
  }

  #burger {
    margin-left:5px;
    margin-right:0;
  }


  /* Hero */
  #hero > .hero-grid,
  #hero > .pulse-line {
    display:none;
  }

  #hero.hero {
    position:relative;
    height:auto;
    min-height:0;

    margin:var(--m-header-total) 0 0;
    padding:0;

    overflow:hidden;
  }

  #hero > .hero-sky {
    position:absolute;
    inset:0;
    display:block;
  }

  #hero .m-hero {
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    margin:0;
    padding:var(--m-section-top) 8px 0;
  }

  #hero .m-section-tag {
    position:relative;
    z-index:50;

    display:inline-flex;

    visibility:visible;
    opacity:1;

    transform:none;

    box-sizing:border-box;

    max-width:calc(100vw - (var(--content-rail) * 2));

    margin:
      0
      0
      7px
      calc(var(--content-rail) - 8px);

    color:#f5f9fc;
    background:rgba(4,14,26,.68);
  }

  #hero .m-hero-title {
    position:relative;
    z-index:50;
    display:block;
    visibility:visible;
    opacity:1;
    transform:none;
    width:100%;
    margin:0 0 5px;
    color:#f7fbff;
font-weight:800;
    line-height:1.05;
    letter-spacing:-.025em;
    white-space:nowrap;
  }

  #hero .m-hero-title span {
    color:#f7fbff;
  }

  #hero .m-hero-title em {
    display:inline;
    background:linear-gradient(90deg,#13baff 0%,#247aff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    font-style:normal;
  }

  #hero .m-hero-main {
    position:relative;
    display:grid;
    grid-template-columns:40% 60%;
    align-items:stretch;
    width:100%;
    height:202px;
    min-height:202px;
    margin:0;
    padding:0;
  }

  #hero .m-hero-copy {
    position:relative;
    z-index:10;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    height:100%;
    padding:0 7px 0 0;
  }

  #hero .m-hero-copy p {
    margin:0;
    color:rgba(244,248,252,.90);
    font-size:clamp(12px,3.25vw,13.5px);
    line-height:1.36;
  }

  #hero .m-hero-art {
    position:relative;
    z-index:5;
    width:100%;
    height:202px;
    margin:0;
    padding:0;
    background:transparent;
    overflow:visible;
  }

  #hero .m-hero-art img {
    position:absolute;
    right:-10vw;
    bottom:0;
    display:block;
    width:auto;
    height:94%;
    max-width:none;
    max-height:none;
    margin:0;
    background:transparent;
    object-fit:contain;
    object-position:right bottom;
    transform:none;
  }

  #hero .m-hero-cta {
    position:relative;
    z-index:30;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    width:100%;
    margin:0;
    padding:0 0 8px;
  }

  #hero .m-hero-cta .btn {
    width:100%;
    min-width:0;
    height:35px;
    padding:0 6px;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
  }

  #hero .m-hero-cta .btn b {
    width:18px;
    height:18px;
    flex:0 0 18px;
    font-size:7px;
  }


  /* Features */
  #features > .feature-grid {
    display:none;
  }

  #features .m-features {
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }

  #features .m-feature {
    --m-font:clamp(12px,3.25vw,13.5px);
    position:relative;
    display:grid;
    align-items:stretch;
    width:100%;
    height:clamp(300px,80vw,344px);
    margin:0;
    padding:0;
    overflow:hidden;
  }

  #features .m-feature-dark {
    background:#03101d;
    color:#f4f8fb;
  }

  #features .m-feature-light {
    background:linear-gradient(90deg,#496980 0%,#7895aa 100%);
    color:#f8fbff;
  }

  #features .m-feature-copy-left {
    grid-template-columns:45% 55%;
  }

  #features .m-feature-copy-right {
    grid-template-columns:55% 45%;
  }

  #features .m-feature-copy {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    min-width:0;
    height:100%;
    padding:16px 13px;
  }

  #features .m-feature-num,
  #features .m-feature h3,
  #features .m-feature p {
    font-size:var(--m-font);
  }

  #features .m-feature-num {
    margin:0 0 10px;
    color:#0daaff;
    font-weight:800;
    line-height:1;
  }

  #features .m-feature h3 {
    margin:0 0 11px;
    font-weight:800;
    line-height:1.24;
    letter-spacing:-.015em;
  }

  #features .m-feature p {
    margin:0;
    font-weight:400;
    line-height:1.42;
  }

  #features .m-feature-first .m-feature-tag {
    position:absolute;
    z-index:20;
    top:var(--m-section-top);
    left:var(--content-rail);
    color:#f4f8fb;
    background:rgba(5,16,28,.28);
  }


  /* Media crop base */
  #features .m-feature-media {
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:transparent;
    overflow:hidden;
  }

  #features .m-feature-media img {
    display:block;
    margin:0;
    max-width:none;
    max-height:none;
    background:transparent;
  }


  /* 01 */
  #features .m-feature:nth-child(1) .m-feature-media img {
    position:absolute;
    top:-15%;
    right:0;
    width:100%;
    height:auto;
    border-radius:12px 12px 0 0;
  }


  /* 02 */
  #features .m-feature:nth-child(2) .m-feature-media img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
    border-radius:0;
  }


  /* 03 */
  #features .m-feature:nth-child(3) .m-feature-media img {
    position:absolute;
    top:-18%;
    right:0;
    width:100%;
    height:auto;
    border-radius:12px 12px 0 0;
  }


  /* 05: greeting fully removed, start at Strength reserve */
  #features .m-feature:nth-child(5) .m-feature-media img {
    position:absolute;
    top:calc(-25% + 4px);
    right:0;
    width:100%;
    height:auto;
    border-radius:12px 12px 0 0;
  }


  /* 06: Journal aligned close to top, preserve two graphs */
  #features .m-feature:nth-child(6) .m-feature-media img {
    position:absolute;
    top:calc(-9% - 12px);
    left:-2%;
    width:104%;
    height:auto;
    border-radius:12px 12px 0 0;
  }


  /* 04 = 60 / 40 */
  #features .m-feature-library {
    grid-template-columns:60% 40%;
  }

  #features .m-library-media {
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background:transparent;
    overflow:hidden;
  }

  #features .m-library-media figure {
    position:absolute;
    margin:0;
    padding:0;
    background:transparent;
    overflow:visible;
  }

  #features .m-library-media figure:first-child {
    z-index:3;
    top:auto;
    bottom:0;
    left:0;
    width:61%;
    height:100%;
  }

  #features .m-library-media figure:first-child img {
    position:absolute;
    top:auto;
    bottom:-3.5%;
    left:0;
    width:100%;
    height:auto;
    border-radius:12px 12px 0 0;
  }

  /* Second screen: same bottom line, more overlap, no right crop */
  #features .m-library-media figure:nth-child(2) {
    z-index:2;
    right:0;
    bottom:0;
    width:64%;
    height:92%;
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.15) 9%,
      #000 24%,
      #000 100%
    );
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.15) 9%,
      #000 24%,
      #000 100%
    );
  }

  #features .m-library-media figure:nth-child(2) img {
    position:absolute;
    right:0;
    bottom:-3.5%;
    width:100%;
    height:auto;
    border-radius:12px 12px 0 0;
  }

  #features .m-library-media figure:nth-child(2)::before {
    content:"";
    position:absolute;
    z-index:5;
    top:0;
    bottom:0;
    left:0;
    width:18%;
    background:linear-gradient(
      90deg,
      rgba(73,105,128,.78),
      rgba(73,105,128,0)
    );
    filter:blur(5px);
    pointer-events:none;
  }
}


@media (max-width:380px) {

  #hero .m-hero-main,
  #hero .m-hero-art {
    height:188px;
    min-height:188px;
  }

  

  #features .m-feature {
    --m-font:12px;
    height:296px;
  }

  #features .m-feature-copy {
    padding-inline:10px;
  }

}



/* MOBILE-PREVIEW-NAV-FINAL-01
   Fullscreen HOW arrows are statically anchored to the dialog.
   Tap/hover/focus/active must never alter their position.
*/
@media (max-width:767px){

  .screen-preview{
    position:fixed;
  }

  .screen-preview .screen-preview-nav{
    position:absolute;

    top:50%;
    bottom:auto;

    width:30px;
    height:42px;

    margin:0;
    padding:0;

    transform:translateY(-50%);

    transition:none;
    animation:none;

    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .screen-preview .screen-preview-prev{
    left:5px;
    right:auto;
  }

  .screen-preview .screen-preview-next{
    left:auto;
    right:5px;
  }

  .screen-preview .screen-preview-nav:hover,
  .screen-preview .screen-preview-nav:focus,
  .screen-preview .screen-preview-nav:focus-visible,
  .screen-preview .screen-preview-nav:active{
    top:50%;
    bottom:auto;

    transform:translateY(-50%);

    margin:0;
  }
}
/* END MOBILE-PREVIEW-NAV-FINAL-01 */


/* MOBILE-HOW-02: separate mobile HOW */
.m-how{
  display:none;
}

@media (max-width:767px){

  /* Desktop HOW off on phone */
  #how > .wrap{
    display:none;
  }

  #how .m-how{
    display:block;
    width:100%;
    margin:0;
    padding:0;
  }

  #how.how.block{
    width:100%;
    margin:0;
    padding:var(--m-section-top) 0 26px;
    overflow:hidden;
  }

  #how .m-how-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    gap:10px 10px;
    align-items:center;
    width:100%;
    padding:0 12px;
    margin:0 0 16px;
  }

  #how .m-how-tag{
    grid-column:1;
    grid-row:1;
    justify-self:start;
  }

  #how .m-how-video{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    height:30px;
    min-height:30px;
    padding:0 9px;
    margin:0;
    gap:6px;
    border-radius:9px;
    font-size:9.5px;
    white-space:nowrap;
  }

  #how .m-how-video > span:first-child{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    font-size:7px;
  }

  #how .m-how-head h2{
    grid-column:1 / -1;
    grid-row:2;
    width:100%;
    margin:0;
    padding:0;
font-weight:800;
    line-height:1.08;
    letter-spacing:-.035em;
    text-align:left;
  }

  #how .m-how-viewport{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 12px 2px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  #how .m-how-viewport::-webkit-scrollbar{
    display:none;
  }

  #how .m-how-track{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:max-content;
    margin:0;
    padding:0;
    list-style:none;
  }

  #how .m-how-card{
    display:grid;
    grid-template-rows:34px auto 52px;
    align-items:start;
    justify-items:center;
    flex:0 0 calc((100vw - 44px) / 2.5);
    width:calc((100vw - 44px) / 2.5);
    margin:0;
    padding:0;
    scroll-snap-align:start;
    text-align:center;
  }

  #how .m-how-card h3{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    height:34px;
    margin:0;
    padding:0 2px 3px;
    font-size:clamp(9.5px,2.45vw,11px);
    font-weight:800;
    line-height:1.08;
    text-align:center;
  }

  #how .m-how-card figure{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:470 / 973;
    height:auto;
    margin:0;
    padding:0;
    overflow:hidden;
    border:0;
    border-radius:clamp(11px,3vw,15px);
    background:transparent;
    box-shadow:none;
    cursor:zoom-in;
    pointer-events:auto;
    touch-action:auto;
    -webkit-tap-highlight-color:transparent;
  }

  #how .m-how-card figure img{
    position:absolute;
    top:0;
    left:50%;
    display:block;
    width:auto;
    height:100%;
    max-width:100%;
    max-height:none;
    margin:0;
    padding:0;
    transform:translateX(-50%);
    object-fit:contain;
    object-position:center top;
    border:0;
    border-radius:inherit;
    clip-path:none;
    background:transparent;
    box-shadow:none;
    pointer-events:none;
  }

  #how .m-how-card p{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    min-height:50px;
    margin:0;
    padding:7px 2px 0;
    font-size:clamp(8.5px,2.2vw,10px);
    line-height:1.25;
    text-align:center;
    color:var(--muted);
  }
}

@media (min-width:768px){
  #how .m-how{
    display:none;
  }
}

/* MOBILE-FEATURE04-CANONICAL */
@media (max-width:767px){

  #features .m-feature-library{
    grid-template-columns:60% 40%;
  }

  #features .m-library-media{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    isolation:isolate;
  }

  #features .m-library-media figure{
    position:absolute;
    bottom:0;

    display:block;

    height:100%;

    margin:0;
    padding:0;

    overflow:visible;

    visibility:visible;
    opacity:1;

    -webkit-mask-image:none;
    mask-image:none;
  }

  #features .m-library-media figure:first-child{
    z-index:3;
    left:0;
    width:63.5%;
  }

  #features .m-library-media figure:nth-child(2){
    z-index:2;
    left:40%;
    width:59%;
  }

  #features .m-library-media figure img{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;

    max-width:none;
    max-height:none;

    margin:0;
    padding:0;

    object-fit:contain;
    object-position:center bottom;

    visibility:visible;
    opacity:1;

    border:0;
    border-radius:0;

    background:transparent;

    transform:none;
  }

  #features .m-library-media figure:nth-child(2) img{
    transform:translateY(6.9%);
  }

  #features .m-library-media figure:nth-child(2)::before{
    display:none;
    content:none;
  }
}

/* MOBILE-PRICING-CANONICAL-01 */

.m-pricing{
  display:none;
}

@media (max-width:767px){

  /* Section */

  #pricing.pricing.block{
    width:100%;
    margin:0;
    padding:var(--m-section-top) 0 26px;
    overflow:hidden;
  }

  #pricing > .price-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 12px;
  }

  #pricing .price-copy{
    width:100%;
    margin:0 0 18px;
    padding:0;
  }

  #pricing .price-copy .kicker{
    margin:0 0 13px;
  }

  #pricing .pricing-title{
    margin:0;

line-height:1.05;
    letter-spacing:-.035em;
  }

  #pricing .price-copy > p:not(.kicker){
    max-width:95%;

    margin:13px 0 0;

    font-size:clamp(15px,4.1vw,18px);
    line-height:1.4;
  }


  /* Mobile vs desktop */

  #pricing #pricing-compact{
    display:none;
  }

  #pricing .m-pricing{
    display:grid;

    width:100%;

    gap:14px;

    margin:0;
    padding:0;
  }


  /* Shared card */

  #pricing .m-price-card{
    position:relative;

    width:100%;
    min-width:0;

    margin:0;
    padding:18px;

    overflow:hidden;

    border:1px solid rgba(94,176,232,.28);
    border-radius:18px;

    background:
      linear-gradient(
        145deg,
        rgba(13,46,71,.94),
        rgba(5,25,42,.97)
      );

    color:var(--ink);
  }

  #pricing .m-price-card h3,
  #pricing .m-price-card p{
    margin:0;
  }

  #pricing .m-benefits{
    display:grid;

    gap:4px;

    margin:0;
    padding:0;

    list-style:none;

    font-size:clamp(10.5px,2.85vw,12px);
    line-height:1.08;
  }

  #pricing .m-benefits li{
    position:relative;

    margin:0;
    padding-left:18px;
  }

  #pricing .m-benefits-negative li::before,
  #pricing .m-benefits-positive li::before{
    position:absolute;

    left:0;
    top:0;

    font-weight:900;
  }

  #pricing .m-benefits-negative li::before{
    content:"×";
    color:#74899a;
  }

  #pricing .m-benefits-positive li::before{
    content:"✓";
    color:#23aaff;
  }


  /* ====================================================
     TRAINER
     100% header
     100% price
     50/50 body
     ==================================================== */

  #pricing .m-coach-card{
    padding-bottom:0;
  }

  #pricing .m-coach-head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    width:100%;

    gap:8px;

    margin:0;
    padding:0;
  }

  #pricing .m-coach-head h3{
    width:100%;

    margin:0;

    font-size:clamp(20px,5.8vw,26px);
    line-height:1.05;
  }

  #pricing .m-coach-frequency{
    display:block;

    width:100%;

    margin:0;

    color:#24aaff;

    font-size:clamp(11px,3vw,13px);
    font-weight:700;
    line-height:1.12;
  }


  /* Full-width price rail */

  #pricing .m-coach-price-row{
    display:grid;

    grid-template-columns:
      minmax(0,1fr)
      max-content;

    align-items:end;

    width:100%;

    gap:12px;

    margin:17px 0 0;
    padding:0 0 11px;

    border-bottom:
      1px solid rgba(255,255,255,.10);
  }

  #pricing .m-coach-monthly{
    min-width:0;
  }

  #pricing .m-coach-monthly strong{
    display:block;

    font-size:clamp(24px,6.7vw,31px);
    line-height:.96;
    letter-spacing:-.035em;

    white-space:nowrap;
  }

  #pricing .m-coach-total{
    display:flex;

    flex-direction:column;
    align-items:flex-end;

    min-width:max-content;

    gap:4px;

    text-align:right;
  }

  #pricing .m-coach-total span{
    color:var(--muted);

    font-size:10.5px;
    line-height:1;

    white-space:nowrap;
  }

  #pricing .m-coach-total strong{
    font-size:17px;
    font-weight:800;
    line-height:1;

    white-space:nowrap;
  }


  /* Exact 50 / 50 body */

  #pricing .m-coach-body{
    position:relative;

    display:grid;

    grid-template-columns:
      minmax(0,50%)
      minmax(0,50%);

    align-items:stretch;

    width:100%;

    min-height:330px;

    margin:0;
    padding:0;

    overflow:hidden;
  }

  #pricing .m-coach-body > .m-benefits{
    width:100%;

    padding:8px 7px 4px 0;
  }

  #pricing .m-coach-media{
    position:relative;

    width:100%;
    height:100%;

    min-width:0;

    margin:0;
    padding:0;

    overflow:hidden;

    background:transparent;
  }

  #pricing .m-coach-media img{
    position:absolute;

    right:-4%;
    bottom:0;

    display:block;

    width:108%;
    height:100%;

    max-width:none;
    max-height:none;

    object-fit:contain;
    object-position:right bottom;

    background:transparent;
  }


  /* ====================================================
     PRO
     ==================================================== */

  #pricing .m-pro-card{
    padding:18px 18px 0;
  }

  #pricing .m-pro-top{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:12px;
  }

  #pricing .m-pro-top > div:first-child{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:8px;
  }

  #pricing .m-pro-brand{
    font-size:clamp(20px,6vw,27px);
    line-height:1;
  }

  #pricing .m-pro-brand .dot{
    color:#24aaff;
  }

  #pricing .m-pro-subtitle{
    margin:0;

    color:#24aaff;

    font-size:clamp(12px,3.4vw,14px);
    font-weight:750;
  }

  #pricing .m-term-control{
    flex:0 0 auto;

    text-align:center;
  }

  #pricing .m-term-caption{
    display:block;

    margin-bottom:6px;

    color:var(--muted);

    font-size:9px;
    font-weight:800;
    line-height:1;
    letter-spacing:.1em;
  }

  #pricing .m-term-switch{
    display:grid;

    grid-template-columns:repeat(3,32px);

    gap:3px;
  }

  #pricing .m-term-switch button{
    position:relative;

    width:32px;
    height:30px;

    padding:0;

    border:0;
    border-radius:8px;

    background:transparent;

    color:#8ba0b3;

    font:inherit;
    font-size:14px;
    line-height:30px;
  }

  #pricing .m-term-switch button[aria-pressed="true"]{
    color:#fff;

    background:
      linear-gradient(
        135deg,
        rgba(18,166,241,.96),
        rgba(47,103,246,.96)
      );

    box-shadow:
      inset 0 0 0 1px rgba(104,213,255,.22),
      0 4px 12px rgba(0,104,235,.18);
  }

  #pricing .m-term-switch button:disabled{
    opacity:.35;
  }


  /* Pro price rail */

  #pricing .m-pro-price-row{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    width:100%;

    gap:10px;

    margin-top:18px;
  }

  #pricing .m-pro-price-row > p{
    display:flex;

    align-items:baseline;

    gap:7px;

    min-width:0;

    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-size:clamp(24px,7vw,31px);
    font-weight:700;
    line-height:.98;
    letter-spacing:-.025em;
  }

  #pricing .m-pro-price-row > p > strong,
  #pricing .m-pro-price-row > p > strong{
    color:#fff;

    font:inherit;
    letter-spacing:inherit;

    white-space:nowrap;
  }

  #pricing .m-pro-discount{
    color:#24aaff;

    font-family:inherit;
    font-size:clamp(14px,4vw,16px);
    font-weight:700;
    line-height:1;
    letter-spacing:-.01em;

    padding-bottom:0;

    white-space:nowrap;
  }

  #pricing .m-pro-period{
    flex:0 0 auto;

    text-align:right;
  }

  #pricing .m-pro-period span,
  #pricing .m-pro-period strong{
    display:block;

    white-space:nowrap;
  }

  #pricing .m-pro-period span{
    color:var(--muted);

    font-size:12px;
    line-height:1;
  }

  #pricing .m-pro-period strong{
    margin-top:4px;

    font-size:18px;
    font-weight:800;
    line-height:1;
  }


  /* Pro 56 / 44 body */

  #pricing .m-pro-body{
    position:relative;

    display:grid;

    grid-template-columns:
      minmax(0,56%)
      minmax(0,44%);

    min-height:340px;

    margin-top:10px;
  }

  #pricing .m-pro-body > .m-benefits{
    position:relative;
    z-index:2;

    padding:0 5px 4px 0;
    gap:2px;
    line-height:1.03;
  }

  #pricing .m-pro-media{
    position:absolute;
    z-index:1;

    right:0;
    bottom:0;

    width:44%;
    height:100%;

    margin:0;

    overflow:visible;

    background:transparent;
  }

  /*
   * Source is JPEG, not alpha PNG.
   * Do NOT zoom/crop it blindly.
   */
  #pricing .m-pro-media img{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    margin:0;

    object-fit:contain;
    object-position:center bottom;

    background:transparent;
  }


  /* ====================================================
     COMPARISON — preserve accepted visual geometry
     ==================================================== */

  #pricing .m-chart-card{
    --trainer-share:85.7%;
    --trainer-color:#2abfd1;
    --pro-color:#176df1;

    padding:20px 18px 18px;
  }

  #pricing .m-chart-card > h3{
    font-size:clamp(18px,5.4vw,24px);
    line-height:1.05;
  }

  #pricing .m-chart-rows{
    display:grid;

    gap:11px;

    margin-top:17px;
  }

  #pricing .m-chart-row{
    display:grid;

    grid-template-columns:
      minmax(90px,.8fr)
      minmax(0,1.2fr);

    align-items:center;

    gap:10px;
  }

  #pricing .m-chart-legend{
    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

    font-size:clamp(11px,3.1vw,13px);
    line-height:1.1;

    white-space:nowrap;
  }

  #pricing .m-chart-legend i{
    display:block;

    flex:0 0 15px;

    width:15px;
    height:10px;

    border-radius:4px;
  }

  #pricing .m-legend-trainer{
    background:var(--trainer-color);
  }

  #pricing .m-legend-pro{
    background:var(--pro-color);
  }

  #pricing .m-bar-track{
    display:flex;

    align-items:center;

    width:100%;
    height:30px;

    overflow:hidden;

    border-radius:999px;

    background:rgba(126,157,181,.15);
  }

  #pricing .m-bar{
    display:flex;

    align-items:center;
    justify-content:center;

    width:var(--bar-size,100%);
    min-width:47px;
    height:100%;

    border-radius:999px;

    transition:width .25s ease;
  }

  #pricing .m-bar-trainer{
    background:
      linear-gradient(90deg,#31c9d4,#159fc8);
  }

  #pricing .m-bar-pro{
    background:
      linear-gradient(90deg,#0f75f7,#22b8ee);
  }

  #pricing .m-bar b{
    padding:0 7px;

    color:#fff;

    font-size:11px;
    font-weight:800;
    line-height:1;

    white-space:nowrap;
  }

  #pricing .m-chart-ring-area{
    position:relative;

    min-height:230px;

    margin-top:7px;
  }

  #pricing .m-chart-ring-area::before{
    content:"";

    position:absolute;

    left:50%;
    top:51%;

    width:190px;
    height:190px;

    border-radius:50%;

    transform:translate(-50%,-50%);

    background:
      conic-gradient(
        from -36deg,
        var(--trainer-color) 0 var(--trainer-share),
        var(--pro-color) var(--trainer-share) 100%
      );

    -webkit-mask:
      radial-gradient(
        circle,
        transparent 0 54%,
        #000 55% 100%
      );

    mask:
      radial-gradient(
        circle,
        transparent 0 54%,
        #000 55% 100%
      );
  }

  #pricing .m-chart-saving{
    position:absolute;

    left:50%;
    top:51%;

    display:flex;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:124px;
    height:124px;

    padding:0 9px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:#050b16;

    color:#fff;

    text-align:center;
  }

  #pricing .m-chart-saving span{
    font-size:13px;
    font-weight:700;
    line-height:1.14;
  }

  #pricing .m-chart-saving strong{
    margin-top:7px;

    color:#39e4b6;

    font-size:22px;
    line-height:1;

    white-space:nowrap;
  }

  #pricing .m-chart-saving small{
    margin-top:7px;

    color:#fff;

    font-size:10px;
    line-height:1;
  }

  #pricing .pricing-note{
    width:100%;

    margin:14px 0 0;
    padding:0 2px;

    color:var(--muted);

    font-size:11px;
    line-height:1.35;
  }


  /* Light */

  html[data-theme="light"] #pricing .m-price-card{
    background:
      linear-gradient(
        145deg,
        rgba(244,250,255,.98),
        rgba(225,240,250,.98)
      );

    border-color:rgba(34,103,148,.22);
  }

  html[data-theme="light"] #pricing .m-chart-saving{
    background:#eef7fd;
    color:#17364a;
  }

  html[data-theme="light"] #pricing .m-coach-monthly strong,
  html[data-theme="light"] #pricing .m-coach-total strong,
  html[data-theme="light"] #pricing .m-pro-price-row > p > strong,
  html[data-theme="light"] #pricing .m-pro-period strong{
    color:#17364a;
  }


  /* Narrow phones */

  @media (max-width:390px){

    #pricing > .price-shell{
      padding-inline:10px;
    }

    #pricing .m-price-card{
      padding-left:14px;
      padding-right:14px;
    }

    #pricing .m-coach-price-row{
      gap:8px;
    }

    #pricing .m-coach-monthly strong{
      font-size:24px;
    }

    #pricing .m-coach-total span{
      font-size:10px;
    }

    #pricing .m-coach-total strong{
      font-size:15px;
    }

    #pricing .m-coach-body{
      min-height:320px;
    }

    #pricing .m-pro-price-row > p{
      font-size:24px;
    }

    #pricing .m-pro-period span{
      font-size:11px;
    }

    #pricing .m-pro-period strong{
      font-size:17px;
    }

    #pricing .m-term-switch{
      grid-template-columns:repeat(3,30px);
    }

    #pricing .m-term-switch button{
      width:30px;
      height:29px;

      line-height:29px;
    }

    #pricing .m-chart-row{
      grid-template-columns:
        minmax(82px,.75fr)
        minmax(0,1.25fr);
    }
  }
}


/* MOBILE-UI-CANONICAL-01 */
@media (max-width:767px){

  :root{
    --m-section-top:8px;
    --m-section-title-size:clamp(20px,5.3vw,22px);
    --m-section-badge-size:10.5px;
  }

  /* Shared mobile section badges */
  html body #hero .m-section-tag,
  html body #features .m-feature-tag,
  html body #how .kicker,
  html body #pricing .kicker,
  html body #app .eyebrow,
  html body #faq .kicker,
  html body #contact .kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    align-self:flex-start;
    justify-self:start;

    width:max-content;
    max-width:calc(100% - 20px);
    min-height:22px;

    margin-left:0;
    margin-right:auto;

    padding:4px 10px;

    border:1px solid rgba(169,200,223,.34);
    border-radius:7px;

    background:rgba(255,255,255,.05);
    color:#dce9f4;

    font-family:
      Inter,
      ui-sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Arial,
      sans-serif;

    font-size:var(--m-section-badge-size);
    font-style:normal;
    font-weight:700;
    line-height:1;
    letter-spacing:.12em;

    text-align:center;
    text-transform:uppercase;
    white-space:nowrap;
  }

  /*
   * Canonical mobile badge rail.
   * Target = original Hero badge physical left edge: 8px.
   */
  :root{
    --m-badge-left:8px;
  }

  html body #hero .m-section-tag{
    margin-left:0;
    margin-right:0;
  }

  html body #features .m-feature-first .m-feature-tag{
    left:var(--m-badge-left);
    margin-left:0;
    margin-right:0;
  }

  html body #how .m-how-tag{
    margin-left:calc(var(--m-badge-left) - 12px);
    margin-right:0;
  }

  html body #pricing .price-copy > .kicker{
    margin-left:calc(var(--m-badge-left) - 12px);
    margin-right:0;
  }

  html body #app .m-app-copy > .eyebrow,
  html body #faq .faq-heading > .kicker,
  html body #contact .contact-copy > .kicker{
    margin-left:calc(var(--m-badge-left) - var(--content-rail));
    margin-right:0;
  }

  @media (max-width:390px){
    html body #pricing .price-copy > .kicker{
      margin-left:calc(var(--m-badge-left) - 10px);
    }
  }


  /* Shared mobile section titles */
  html body #hero .m-hero-title,
  html body #how .m-how-head h2,
  html body #pricing .pricing-title,
  html body #app .m-app-title,
  html body #faq .faq-heading h2,
  html body #contact .contact-copy h2{
    font-family:
      Inter,
      ui-sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Arial,
      sans-serif;

    font-size:var(--m-section-title-size);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.035em;

    text-align:center;

    margin-left:auto;
    margin-right:auto;
  }

  html body #hero .m-hero-title{
    width:100%;
    max-width:100%;
    margin-top:9px;
    margin-bottom:5px;
    white-space:nowrap;
    letter-spacing:-.045em;
  }

  html body #hero .m-hero-title span,
  html body #hero .m-hero-title em{
    display:inline;
    white-space:nowrap;
  }

  html body #how .m-how-head h2,
  html body #pricing .pricing-title,
  html body #app .m-app-title,
  html body #faq .faq-heading h2,
  html body #contact .contact-copy h2{
    white-space:normal;
  }

  /* FAQ */
  html body #faq.faq.block{
    padding-top:var(--m-section-top);
    padding-bottom:28px;
  }

  html body #faq > .faq-grid{
    display:block;
    width:calc(100% - (var(--content-rail) * 2));
    max-width:none;
    margin:0 auto;
    padding:0;
  }

  html body #faq .faq-heading{
    width:100%;
    margin:0 0 12px;
    padding:0;
  }

  html body #faq .faq-heading > .kicker{
    margin-left:0;
    margin-right:auto;
  }

  html body #faq .faq-heading h2{
    margin-top:14px;
    margin-bottom:14px;
  }

  html body #faq .faq-list{
    display:block;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--line);
  }

  html body #faq .faq-list details{
    position:relative;
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    margin:0;
    padding:14px 0;
    overflow:visible;
    border-bottom:1px solid var(--line);
    background:transparent;
    transform:none;
    box-shadow:none;
  }

  html body #faq .faq-list summary{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    padding:0 34px 0 0;

    background:transparent;

    font-size:clamp(15px,4vw,17px);
    line-height:1.25;
    white-space:normal;

    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }

  html body #faq .faq-list summary:active,
  html body #faq .faq-list summary:focus{
    background:transparent;
  }

  html body #faq .faq-list summary:focus-visible{
    outline:1px solid rgba(52,191,255,.65);
    outline-offset:4px;
    border-radius:4px;
  }

  html body #faq .faq-list summary::after{
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    content:"+";
  }

  html body #faq .faq-list details[open] summary::after{
    content:"−";
  }

  html body #faq .faq-list details > p,
  html body #faq .faq-list details[open] > p{
    display:block;
    max-height:0;
    margin:0 34px 0 0;
    overflow:hidden;

    opacity:0;
    transform:translateY(-6px);

    color:var(--muted);

    font-size:clamp(12px,3.25vw,13.5px);
    line-height:1.42;

    pointer-events:none;

    transition:
      max-height .34s cubic-bezier(.2,.72,.2,1),
      margin-top .34s cubic-bezier(.2,.72,.2,1),
      opacity .25s ease,
      transform .34s cubic-bezier(.2,.72,.2,1);
  }

  html body #faq .faq-list details[open] > p{
    max-height:320px;
    margin-top:8px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }

  /* Contact */
  html body #contact.contact.block{
    padding-top:var(--m-section-top);
    padding-bottom:26px;
  }

  html body #contact > .contact-shell{
    display:grid;
    grid-template-columns:minmax(0,1fr);

    box-sizing:border-box;

    width:calc(100% - (var(--content-rail) * 2));
    max-width:none;
    min-height:0;

    margin:0 auto;
    padding:0;

    align-items:start;
    overflow:visible;
  }

  html body #contact .contact-copy{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
    align-self:start;
    text-align:left;
  }

  html body #contact .contact-copy > .kicker{
    margin-left:0;
    margin-right:auto;
  }

  html body #contact .contact-copy h2{
    width:100%;
    margin-top:14px;
    margin-bottom:16px;
    text-align:center;
  }

  html body #contact .contact-copy > p:not(.kicker){
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    font-size:clamp(14px,3.8vw,16px);
    line-height:1.5;
    text-align:left;
  }

  html body #contact .contact-copy .points,
  html body #contact .contact-copy .points li{
    box-sizing:border-box;
    width:100%;
    max-width:none;
  }

  html body #contact .form{
    display:grid;
    grid-template-columns:minmax(0,1fr);

    box-sizing:border-box;

    width:100%;
    max-width:none;
    min-width:0;

    margin:20px 0 0;
    padding:0;
    gap:15px;
  }

  html body #contact .form .two{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    width:100%;
    min-width:0;
    gap:15px;
    grid-column:1;
  }

  html body #contact .form > label,
  html body #contact .form .two > label{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
    grid-column:1;
    grid-row:auto;
  }

  html body #contact .form input,
  html body #contact .form select,
  html body #contact .form textarea{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-width:0;
  }

  html body #contact .form .check{
    display:grid;
    grid-template-columns:20px minmax(0,1fr);

    box-sizing:border-box;

    width:100%;
    max-width:none;
    min-width:0;

    margin:0;
    padding:0;
    column-gap:10px;

    align-items:start;
    justify-content:start;
    justify-items:start;

    text-align:left;
    grid-column:1;
  }

  html body #contact .form .check > input{
    width:18px;
    height:18px;
    min-height:18px;
    margin:2px 0 0;
    padding:0;
    justify-self:start;
  }

  html body #contact .form .check > span{
    display:block;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
    text-align:left;
  }

  html body #contact .form > button,
  html body #contact .form > .status{
    grid-column:1;
    width:100%;
  }
}
/* END MOBILE-UI-CANONICAL-01 */

/* MOBILE-APP-CANONICAL-01 */

/* Desktop/tablet: mobile tree is inert. */
#app .m-app{
  display:none;
}

@media (max-width:767px){

  #app.app-showcase{
    min-height:0;
    padding-top:0;
  }

  #app .app-grid{
    display:none;
  }

  #app .m-app{
    position:relative;
    z-index:2;

    display:block;
    box-sizing:border-box;

    width:calc(100% - (var(--content-rail) * 2));
    max-width:none;

    margin:0 auto;

    /* Minimal top air before section badge. */
    padding:var(--m-section-top) 0 0;
  }

  #app .m-app-copy{
    position:relative;
    z-index:3;

    width:100%;
    min-width:0;

    margin:0;
    padding:0;

    /* Copy itself is not globally centered:
       section badge stays on the common left rail. */
    text-align:left;
  }

  /* Section badge = same left alignment as other section badges. */
  #app .m-app-copy > .eyebrow{
    margin-left:0;
    margin-right:auto;
  }

  #app .m-app-title{
    width:100%;
    max-width:100%;

    margin:12px auto 0;

    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.035em;

    white-space:normal;
    text-align:center;
  }

  #app .m-app-title .dot{
    color:var(--blue);
  }

  #app .m-app-points{
    width:100%;
    max-width:100%;

    margin:20px 0 0;
    padding:0;

    list-style:none;
    text-align:left;
  }

  #app .m-app-points li{
    position:relative;

    margin:8px 0;
    padding-left:28px;

    font-size:clamp(13px,3.55vw,15px);
    line-height:1.3;
  }

  #app .m-app-points li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:0;

    color:#20a7f2;
    font-weight:800;
  }

  /* Center the BUTTON itself. */
  #app .m-app-play{
    display:flex;
    align-items:center;

    width:max-content;
    max-width:100%;

    margin:18px auto 0;
  }

  /*
   * Mobile viewport for the exact accepted desktop composition.
   *
   * The actual composition keeps the desktop 1.72:1 coordinate
   * system and desktop phone positions/transforms.
   *
   * Extra 9px stage safety allows tilted edge phones to finish
   * visually ~2–3px from the physical viewport edge.
   */
  #app .m-app-phones{
    position:relative;

    width:calc(100% + (var(--content-rail) * 2));
    height:auto;
    aspect-ratio:1.52 / 1;

    margin:
      14px
      calc(var(--content-rail) * -1)
      0;

    overflow:hidden;
  }

  #app .m-app-stage{
    position:absolute;

    left:9px;
    top:8px;
    bottom:0;

    width:calc(100% - 18px);

    margin:0;
    padding:0;

    transform:none;
    transform-origin:center bottom;
  }

  #app .m-app-phone{
    position:absolute;

    bottom:0;

    height:auto;
    max-width:none;
    min-width:0;

    margin:0;
    padding:0;

    aspect-ratio:41 / 84;

    transform-origin:center bottom;
  }

  #app .m-app-phone img{
    display:block;

    width:100%;
    height:auto;
    max-width:100%;

    margin:0;

    background:transparent;
  }

  /*
   * EXACT accepted desktop composition.
   * Only its coordinate system is scaled to mobile width.
   */

  /* #1 — smaller, behind #2. */
  #app .m-app-phone-1{
    left:3%;
    right:auto;

    width:27%;

    z-index:2;

    transform:rotate(-3deg) scale(.94);
  }

  /* #2 — dominant/front; overlaps #1 and #3. */
  #app .m-app-phone-2{
    left:24%;
    right:auto;

    width:30%;

    z-index:5;

    transform:translateY(-8px) rotate(-1deg) scale(1.03);
  }

  /* #3 — smaller, partially below #2 and above #4. */
  #app .m-app-phone-3{
    left:49%;
    right:auto;

    width:27%;

    z-index:3;

    transform:rotate(2deg) scale(.95);
  }

  /* #4 — larger rear-right phone, exactly like desktop. */
  #app .m-app-phone-4{
    left:67.4%;
    right:auto;

    width:29%;

    z-index:1;

    transform:rotate(4deg) scale(1);
  }
}

/* END MOBILE-APP-CANONICAL-01 */