/* DRYVE preview — experience pass 6.6. New components are isolated from legacy styles. */
:root{--xp-white:#eff7f4;--xp-mint:#64e5d5;--xp-ink:#091719;--xp-stroke:rgba(111,220,204,.19);--xp-soft:#b0cbc5}
.nav .shell.header-inner{grid-template-columns:minmax(126px,1fr) auto minmax(150px,1fr)}
.nav nav{gap:23px}
.nav .top-cta{white-space:nowrap}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.nav .menu-toggle{display:none;background:transparent;border:1px solid var(--xp-stroke);color:var(--xp-white);border-radius:9px;width:42px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.nav .menu-toggle span{display:block;width:17px;height:2px;background:var(--xp-mint);border-radius:2px}
.nav .menu-toggle:focus-visible,.showcase-tab:focus-visible,.metric-tab:focus-visible,.coach-step:focus-visible,.mobile-download-link:focus-visible{outline:2px solid var(--xp-mint);outline-offset:3px}
.section.interactive-showcase,.section.progress-lab,.section.coach-experience{position:relative;isolation:isolate;overflow:hidden}
.section.interactive-showcase>.shell,.section.progress-lab>.shell,.section.coach-experience>.shell{position:relative;z-index:1}
.section.interactive-showcase{
  padding:110px 0 120px;
  background:
    radial-gradient(ellipse 45% 62% at 85% 40%,rgba(40,185,161,.18),transparent 81%),
    repeating-linear-gradient(130deg,transparent 0 178px,rgba(116,229,215,.035) 179px,transparent 180px),
    linear-gradient(119deg,#071315,#0b2324 57%,#071618);
  border-top:1px solid rgba(120,233,217,.16);
}
.interactive-showcase .showcase-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,6vw,100px);align-items:center}
.interactive-showcase h2,.progress-lab h2,.coach-experience h2{
  font-size:clamp(43px,5.5vw,76px);line-height:.98;font-weight:950;letter-spacing:-.055em;
  margin:21px 0 23px;
}
.interactive-showcase h2 em,.progress-lab h2 em,.coach-experience h2 em{font-style:normal;color:var(--xp-mint)}
.interactive-showcase .xp-intro,.progress-lab .xp-intro,.coach-experience .xp-intro{
  font-size:15px;line-height:1.78;color:var(--xp-soft);max-width:515px;margin:0 0 26px;
}
.showcase-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:33px}
.showcase-tab{
  text-align:left;padding:19px 19px 17px;
  background:rgba(13,40,40,.54);color:var(--xp-white);
  border:1px solid rgba(109,194,182,.24);border-radius:12px;
  cursor:pointer;min-height:86px;transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.showcase-tab small{display:block;color:var(--xp-mint);font-size:9px;letter-spacing:1.8px;font-weight:800;margin-bottom:8px}
.showcase-tab strong{display:block;font-size:14px;font-weight:850;letter-spacing:.01em}
.showcase-tab[aria-selected="true"]{background:linear-gradient(145deg,rgba(31,124,111,.39),rgba(11,48,45,.82));border-color:rgba(101,236,216,.8);box-shadow:inset 0 0 0 1px rgba(101,236,216,.10)}
@media(hover:hover){.showcase-tab:hover{border-color:rgba(119,230,212,.63);transform:translateY(-2px)}}
.showcase-detail{margin-top:24px;min-height:96px}
.showcase-detail strong{display:block;font-size:20px;letter-spacing:-.02em}
.showcase-detail p{max-width:470px;margin:8px 0 0;font-size:13px;line-height:1.7;color:#acc7c1}
.showcase-stage{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.showcase-stage:before{content:"";position:absolute;pointer-events:none;inset:10%;background:rgba(50,203,179,.21);filter:blur(82px);border-radius:50%}
.showcase-device{
  position:relative;z-index:1;width:min(100%,490px);padding:19px;
  background:linear-gradient(145deg,#142e2d,#081719 75%);
  border:1px solid rgba(125,237,216,.25);border-radius:28px;
  box-shadow:0 32px 95px rgba(0,0,0,.34),inset 0 1px rgba(155,246,226,.10);
}
.showcase-device-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:21px;margin-bottom:15px}
.showcase-device-header .device-label{color:#c8e3dd;font-size:10px;font-weight:850;letter-spacing:1.4px}
.showcase-device-header .device-counter{color:var(--xp-mint);font-size:10px;letter-spacing:1.2px;font-weight:800}
.showcase-screen{height:500px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(127,208,195,.17);background:radial-gradient(ellipse at 50% 52%,rgba(21,84,78,.24),#071315 75%);border-radius:17px}
.showcase-screen img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 20px 26px rgba(0,0,0,.22))}
.showcase-screen img.is-changing{opacity:.38;transform:scale(.986)}
.showcase-screen img{transition:opacity .16s ease,transform .16s ease}
.showcase-disclaimer{font-size:10px!important;line-height:1.6!important;color:#9eb9b2!important;margin:15px 4px 0!important;text-align:center}
.section.progress-lab{
  padding:112px 0;
  background:
    radial-gradient(ellipse 55% 75% at -10% 50%,rgba(46,182,157,.19),transparent 76%),
    linear-gradient(120deg,#081a1c,#0c2022 72%,#0b1719);
  border-top:1px solid rgba(105,224,206,.12)
}
.progress-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,7vw,110px);align-items:center}
.progress-lab .progress-graphic{background:linear-gradient(140deg,rgba(20,55,53,.93),rgba(11,27,31,.95));border:1px solid rgba(121,222,207,.29);border-radius:23px;padding:28px;box-shadow:0 30px 75px rgba(0,0,0,.20);min-width:0}
.metric-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.metric-head strong{font-size:15px}
.metric-head span{font-size:10px;letter-spacing:1.6px;color:var(--xp-mint);font-weight:800}
.metric-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:23px}
.metric-tab{
  background:#112c2b;border:1px solid rgba(118,212,197,.23);color:#bed9d3;
  border-radius:7px;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer;
}
.metric-tab[aria-pressed="true"]{background:var(--xp-mint);color:#08211d;border-color:var(--xp-mint)}
.metric-subtitle{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:18px}
.metric-subtitle strong{font-size:26px;letter-spacing:-.03em}
.metric-subtitle span{font-size:11px;color:#9bbeb4}
.metric-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:end;height:235px;border-bottom:1px solid rgba(123,216,203,.2);padding:0 4px 9px}
.metric-bar-col{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:8px;min-width:0}
.metric-bar-value{font-size:10px;color:#dbf5ef;font-weight:800;text-align:center;white-space:nowrap}
.metric-bar-track{height:190px;width:100%;display:flex;align-items:end;justify-content:center;border-radius:6px;background:rgba(99,223,204,.035);overflow:hidden}
.metric-bar-fill{display:block;width:100%;max-width:55px;height:var(--pct,10%);min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#7ef4e2,#249f91);box-shadow:0 0 20px rgba(96,230,211,.20);transform-origin:bottom}
.metric-week{font-size:10px;letter-spacing:.2px;color:#98bdb4;padding:10px 0 0}
.metric-legend{font-size:11px!important;line-height:1.6!important;color:#93b9b0!important;margin:19px 0 0!important}
.progress-lab .progress-copy{min-width:0}
.progress-lab .progress-points{display:grid;gap:12px;margin-top:26px}
.progress-points div{border-left:2px solid rgba(100,229,213,.7);padding:6px 0 6px 15px}
.progress-points strong{display:block;color:#f0f7f4;font-size:14px}
.progress-points span{display:block;color:#a5c4bb;font-size:12px;margin-top:6px;line-height:1.6}
.metric-bars.is-ready .metric-bar-fill{animation:metric-grow .82s cubic-bezier(.2,.7,.2,1) both}
@keyframes metric-grow{from{transform:scaleY(.08)}to{transform:scaleY(1)}}
.section.coach-experience{padding:105px 0;background:radial-gradient(ellipse 48% 75% at 26% 49%,rgba(43,152,138,.15),transparent 80%),linear-gradient(120deg,#0a181a,#0b2526 80%);border-top:1px solid rgba(105,224,206,.14)}
.coach-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,90px);align-items:center}
.coach-image-stage{position:relative;min-width:0;display:flex;align-items:center;justify-content:center}
.coach-image-stage:before{content:"";position:absolute;width:70%;height:77%;border-radius:50%;background:rgba(39,197,168,.20);filter:blur(80px)}
.coach-image-frame{position:relative;border-radius:26px;border:1px solid rgba(99,223,206,.22);padding:20px;width:min(100%,420px);background:linear-gradient(135deg,#122b2d,#071619);box-shadow:0 29px 75px rgba(0,0,0,.26)}
.coach-image-frame img{display:block;width:100%;height:auto;max-height:410px;object-fit:contain;object-position:center;border-radius:13px}
.coach-image-frame figcaption{color:#a8d1c7;font-size:10px;margin-top:16px;line-height:1.6;letter-spacing:.2px}
.coach-steps{display:grid;gap:10px;margin-top:25px}
.coach-step{width:100%;display:flex;text-align:left;align-items:center;gap:17px;padding:17px 19px;border-radius:12px;border:1px solid rgba(112,215,199,.20);background:rgba(16,51,49,.45);cursor:pointer;color:#e8f6f1;transition:background .2s ease,border-color .2s ease}
.coach-step-number{font-size:11px;font-weight:900;color:var(--xp-mint);letter-spacing:1px}
.coach-step strong{display:block;font-size:14px;margin-bottom:5px}
.coach-step small{display:block;font-size:11px;line-height:1.4;color:#b0cac2}
.coach-step[aria-pressed="true"]{background:rgba(32,118,104,.30);border-color:rgba(98,229,210,.73)}
.coach-step-detail{min-height:70px;padding:15px 0 0}
.coach-step-detail strong{color:var(--xp-mint);font-size:13px}
.coach-step-detail p{font-size:12px;line-height:1.7;color:#accbc2;margin:6px 0}
.reveal{opacity:1;transform:none}
.motion-ready .reveal:not(.in-view){opacity:0;transform:translateY(20px)}
.motion-ready .reveal{transition:opacity .6s ease,transform .6s ease}
.motion-ready .reveal.in-view{opacity:1;transform:none}
.mobile-download-link{display:none}
@media(max-width:1100px){
  .nav nav{gap:15px}
  .interactive-showcase .showcase-layout,.progress-layout,.coach-layout{gap:35px}
  .showcase-screen{height:455px}
}
@media(max-width:850px){
  .nav .shell.header-inner{grid-template-columns:auto 1fr;gap:12px}
  .nav .menu-toggle{display:inline-flex}
  .nav nav{display:none;position:absolute;z-index:50;top:calc(100% - 1px);left:0;right:0;padding:20px max(20px,calc((100vw - 650px)/2));background:#071618;border-bottom:1px solid #31564e;box-shadow:0 20px 35px rgba(0,0,0,.3)}
  .nav nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .nav nav a{display:block;padding:13px 0;border-bottom:1px solid rgba(103,213,196,.12);font-size:13px}
  .interactive-showcase .showcase-layout,.progress-layout,.coach-layout{grid-template-columns:1fr;gap:34px}
  .section.interactive-showcase,.section.progress-lab,.section.coach-experience{padding:80px 0}
  .interactive-showcase h2,.progress-lab h2,.coach-experience h2{font-size:clamp(46px,7vw,72px)}
  .showcase-stage{max-width:540px;margin:auto;width:100%}
  .progress-lab .progress-copy{grid-row:1}
  .progress-graphic{max-width:650px}
  .coach-image-stage{grid-row:2}
  .coach-image-frame{max-width:380px}
}
@media(max-width:600px){
  .section.interactive-showcase,.section.progress-lab,.section.coach-experience{padding:64px 0}
  .interactive-showcase h2,.progress-lab h2,.coach-experience h2{font-size:clamp(42px,10.7vw,60px)}
  .showcase-tabs{gap:9px}
  .showcase-tab{padding:14px 12px;min-height:75px}
  .showcase-tab strong{font-size:12px}
  .showcase-tab small{font-size:8px}
  .showcase-device{padding:12px;border-radius:20px}
  .showcase-screen{height:375px;border-radius:13px}
  .showcase-device-header{padding:0 3px}
  .progress-lab .progress-graphic{padding:16px;border-radius:17px}
  .metric-bars{gap:7px;height:198px}
  .metric-bar-track{height:155px}
  .metric-bar-value,.metric-week{font-size:9px}
  .metric-subtitle strong{font-size:21px}
  .coach-image-frame{padding:14px;border-radius:18px}
  .coach-step{padding:13px}
  .coach-image-frame img{max-height:330px}
  .mobile-download-link{
    display:flex;position:fixed;z-index:100;align-items:center;justify-content:center;gap:12px;
    left:14px;right:14px;bottom:max(12px,env(safe-area-inset-bottom));
    min-height:50px;border-radius:10px;background:#65e6d4;color:#06231e;
    font-size:12px;font-weight:900;letter-spacing:1.2px;text-align:center;
    box-shadow:0 10px 32px rgba(0,0,0,.42);transform:translateY(calc(100% + 40px));
    transition:transform .24s ease;
  }
  .mobile-download-link.is-visible{transform:translateY(0)}
  .footer{padding-bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-ready .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .metric-bars.is-ready .metric-bar-fill{animation:none}
  .showcase-screen img,.mobile-download-link{transition:none}
}


/* v6.7: accurate, legible Coach presentation based on genuine DRYVE captures.
   Section-only replacement: the current user's actual app data is an example, not a live feed. */
.coach-experience .coach-layout{align-items:center;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr)}
.coach-experience .coach-copy .xp-intro{max-width:565px}
.coach-live-frame{
  width:min(100%,485px);min-width:0;position:relative;overflow:hidden;
  border:1px solid rgba(109,222,206,.28);border-radius:26px;
  background:#111314;box-shadow:0 30px 74px rgba(0,0,0,.30),0 0 66px rgba(30,190,168,.07);
  padding:0;
}
.coach-app-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:17px 23px;background:#0b2020;border-bottom:1px solid rgba(110,216,199,.17);
  font-size:10px;font-weight:900;letter-spacing:1.8px;color:#d8f7f0;
}
.coach-app-active{font-size:9px;color:#60e1d2;white-space:nowrap;letter-spacing:1.2px}
.coach-app-body{padding:23px 24px 25px;min-height:425px}
.coach-ui-view[hidden],.showcase-coach-preview[hidden],#showcase-image[hidden]{display:none!important}
.coach-ui-view.is-active{animation:coach-fade-in .22s ease both}
@keyframes coach-fade-in{from{opacity:.5;transform:translateY(7px)}to{opacity:1;transform:none}}
.coach-ui-heading{font-size:27px;font-weight:950;letter-spacing:-.035em;line-height:1.1;color:#f5fbf8}
.coach-ui-subhead{font-size:15px;line-height:1.5;color:#b9bebc;margin:7px 0 22px}
.coach-ui-label{display:block;margin:15px 0 11px;color:#b7c2bf;font-size:10px;font-weight:850;letter-spacing:2px;line-height:1.6}
.coach-ui-card{
  border:1px solid rgba(218,233,226,.18);background:#242424;
  border-radius:17px;padding:16px 17px 17px;margin:0 0 17px;
  box-shadow:0 8px 23px rgba(0,0,0,.13);
}
.coach-ui-card.teal{border-left:4px solid #31b9c1}
.coach-ui-card.purple{border-left:4px solid #a280eb}
.coach-ui-card.orange{border-left:4px solid #ef8242}
.coach-ui-card strong{display:block;color:#f5f5f4;font-size:15px;line-height:1.5;font-weight:850}
.coach-ui-card p{color:#c4c7c6;font-size:12.5px;line-height:1.65;margin:8px 0 0}
.coach-ui-card p b{color:#fff}
.coach-ui-card .coach-ui-label{margin:0 0 6px;color:#45c0bd;font-size:9px}
.coach-ui-cta{
  display:block;margin:15px 0 0;padding:10px 12px;border-radius:10px;
  text-align:center;background:#32b9c1;color:#041516;font-size:12px;font-weight:900;
}
.coach-ui-prompt{
  width:fit-content;margin:9px 0 20px auto;background:#31b9c1;
  color:#031819;padding:13px 17px;border-radius:14px 14px 3px 14px;
  font-size:13px;line-height:1.4;font-weight:800;
}
.coach-ui-targets{display:grid;margin-top:13px;border-top:1px solid #3f5451}
.coach-ui-targets>div{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:10px 0;border-bottom:1px solid rgba(197,231,222,.10);
  font-size:12px;line-height:1.4;color:#d9e8e2;
}
.coach-ui-targets b{white-space:nowrap;color:#79e6d4}
.coach-ui-bottom{
  display:flex;justify-content:space-around;gap:6px;border-top:1px solid #363e3c;
  padding:12px 7px 12px;background:#1a1b1c;color:#999c9b;font-size:8px;
  font-weight:850;letter-spacing:.55px;
}
.coach-ui-bottom strong{color:#31c1c5}
.coach-ui-disclaimer{margin:0!important;background:#0a191a;padding:10px 15px;
  text-align:center;color:#92b6af!important;font-size:10px!important;line-height:1.5!important}
.coach-experience .coach-readonly-note{max-width:530px;margin:19px 0 0;color:#99bab2;
 font-size:11px;line-height:1.7}
.coach-experience .coach-step-detail{min-height:76px;padding-top:21px}
.coach-experience .coach-step-detail strong{font-size:14px}
.coach-experience .coach-step-detail p{font-size:12px;line-height:1.65}
.showcase-coach-preview{
  display:flex;flex-direction:column;justify-content:center;
  width:min(100%,375px);min-height:80%;gap:12px;align-self:center;
  background:#191b1c;border-radius:18px;border:1px solid #36514e;
  padding:24px;color:#f2faf7;box-shadow:0 24px 52px rgba(0,0,0,.26);
}
.showcase-coach-preview>.coach-ui-label{font-size:9px;margin:0 0 7px;color:#79e2d5}
.showcase-coach-preview>strong{font-size:19px;line-height:1.2}
.showcase-coach-preview>p{color:#c9d5d0;font-size:13px;line-height:1.6;margin:0}
.showcase-coach-next{
  display:block;border-radius:9px;padding:12px 15px;margin:4px 0 11px;
  background:#37bfc1;color:#041819;font-size:13px;font-weight:900;text-align:center;
}
.showcase-coach-progress{
  display:flex;justify-content:space-between;gap:8px;
  border-radius:10px;background:#283331;padding:13px 14px;margin-bottom:10px;
  font-size:11px;font-weight:800;color:#b4c9c2;
}
.showcase-coach-progress strong{color:#f0c467;font-size:15px;white-space:nowrap}
@media(max-width:900px){
  .coach-experience .coach-layout{grid-template-columns:1fr;gap:35px}
  .coach-experience .coach-image-stage{grid-row:2}
  .coach-live-frame{max-width:480px}
}
@media(max-width:520px){
  .coach-live-frame{border-radius:18px}
  .coach-app-header{padding:12px 15px;font-size:9px}
  .coach-app-active{font-size:8px}
  .coach-app-body{padding:19px 15px;min-height:390px}
  .coach-ui-card{padding:14px 15px;border-radius:14px}
  .coach-ui-card strong{font-size:14px}
  .coach-ui-card p{font-size:12px}
  .coach-ui-bottom{font-size:7px}
  .showcase-coach-preview{padding:18px;min-height:80%}
  .showcase-coach-preview>strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.coach-ui-view.is-active{animation:none}}


/* v6.8 tier clarity: an intentional premium zone set apart from included analytics. */
.section.pro-analytics{
 position:relative;isolation:isolate;overflow:hidden;
 padding:110px 0 112px;
 background:
 radial-gradient(ellipse 46% 65% at 75% 42%,rgba(63,160,151,.18),transparent 75%),
 linear-gradient(125deg,#0b1d20 0%,#0b2222 55%,#0a1518 100%);
 border-top:1px solid rgba(107,219,204,.2);
 border-bottom:1px solid rgba(107,219,204,.12);
}
.section.pro-analytics:before{
 content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
 background:repeating-linear-gradient(137deg,transparent 0 190px,rgba(103,235,214,.05) 191px,transparent 192px);
}
.pro-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(35px,6vw,95px);align-items:center;position:relative;z-index:1}
.pro-copy{min-width:0}
.pro-analytics h2{font-size:clamp(45px,5.7vw,77px);line-height:.98;font-weight:950;letter-spacing:-.055em;margin:20px 0 24px}
.pro-analytics h2 em{font-style:normal;color:var(--xp-mint)}
.pro-description{font-size:15px;color:#b4d0c8;line-height:1.78;max-width:540px;margin:0 0 25px}
.pro-feature-lines{display:grid;gap:0;border-top:1px solid rgba(124,222,207,.20);margin:28px 0 23px}
.pro-feature-lines>div{
 display:grid;grid-template-columns:31px minmax(0,1fr);column-gap:13px;
 padding:14px 0;border-bottom:1px solid rgba(124,222,207,.16);
}
.pro-feature-lines>div>span{color:var(--xp-mint);font-size:10px;letter-spacing:1px;font-weight:800;padding-top:3px;grid-row:span 2}
.pro-feature-lines strong{color:#f0f7f4;font-size:14px;font-weight:850}
.pro-feature-lines small{display:block;color:#a9c4bc;font-size:12px;line-height:1.5;margin-top:5px}
.pro-tier-note{font-size:11px;line-height:1.7;color:#9ebbb1;margin:0}
.pro-tier-note strong{color:var(--xp-mint);letter-spacing:.8px}
.pro-visual{min-width:0}
.pro-ui{background:linear-gradient(142deg,rgba(19,40,42,.94),rgba(7,21,25,.99));border:1px solid rgba(102,226,204,.28);padding:25px;border-radius:24px;box-shadow:0 32px 79px rgba(0,0,0,.28);min-width:0}
.pro-ui-top{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#bdd9d2;font-size:10px;font-weight:900;letter-spacing:1.1px}
.pro-ui-top strong{border:1px solid rgba(104,233,213,.55);border-radius:999px;padding:8px 13px;color:var(--xp-mint);font-size:12px;letter-spacing:1.4px}
.pro-ui-title{font-size:clamp(22px,2.6vw,32px);font-weight:950;letter-spacing:-.04em;line-height:1.04;color:#f0f7f4;margin:25px 0 8px}
.pro-ui-subtitle{color:#a3c4bb;font-size:12px;line-height:1.6;margin:0 0 24px}
.pro-ui-row{padding:22px 0;border-top:1px solid rgba(112,213,200,.18)}
.pro-ui-row>div:first-child{margin-bottom:13px}
.pro-ui-row span{color:var(--xp-mint);display:block;font-size:10px;letter-spacing:1.5px;font-weight:800;margin-bottom:8px}
.pro-ui-row strong{display:block;font-size:14px;color:#e4f2ed}
.pro-ui-bars{display:flex;align-items:flex-end;gap:10px;height:100px;justify-content:space-between;padding:4px 5px 0}
.pro-ui-bars i{width:19%;height:var(--level);background:linear-gradient(to bottom,#69edd8,#228d86);border-radius:5px 5px 2px 2px;opacity:.9}
.pro-ui-graph{display:block;width:100%;height:82px;max-width:300px;margin:auto;overflow:visible}
.pro-ui-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:19px;border-top:1px solid rgba(112,213,200,.18)}
.pro-ui-bottom span{font-size:9px;letter-spacing:.8px;padding:9px 11px;color:#b1d2c9;background:rgba(55,118,108,.19);border-radius:6px;font-weight:800}
.pro-ui-disclaimer{font-size:10px;color:#92b6ac;text-align:center;line-height:1.6;margin:14px 0 0}
@media(max-width:850px){
 .section.pro-analytics{padding:80px 0}
 .pro-layout{grid-template-columns:1fr;gap:38px}
 .pro-ui{max-width:600px;margin:0 auto}
 .pro-visual{width:100%}
}
@media(max-width:600px){
 .section.pro-analytics{padding:65px 0}
 .pro-analytics h2{font-size:clamp(43px,10.8vw,64px)}
 .pro-description{font-size:14px}
 .pro-ui{padding:18px;border-radius:18px}
 .pro-ui-title{font-size:26px}
 .pro-ui-top{font-size:9px}
 .pro-ui-graph{height:65px}
}