/* Dystra AI — marketing site visual system v2 (enterprise SaaS pattern) */
:root{
  --red:#FE2041; --red-d:#E0122F;
  --ink:#0E0E0F; --ink-2:#1A1A1C; --char:#232326;
  --text:#18181A; --muted:#55555B; --line:#E4E1DC;
  --canvas:#FAF8F5; --tint:#F1EEEA; --white:#fff;
  --on-dark:#F5F3F0; --on-dark-2:#C9C6C1;
  --r-xl:6px; --r-lg:4px; --r-md:3px; --r-sm:2px;
  --wrap:1240px;
  --display:"Inter Tight","Inter",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 30px 60px -20px rgba(14,14,15,.35),0 10px 24px -12px rgba(14,14,15,.2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.6;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;color:inherit}
p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:2px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}

/* Utility bar */
.utility{background:var(--ink);color:var(--on-dark);font-size:13.5px}
.utility-inner{display:flex;justify-content:center;gap:24px;align-items:center;min-height:44px;text-align:center}
.utility strong{font-weight:600}
.utility a{color:#fff;font-weight:600;text-underline-offset:4px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.88);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(0,0,0,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:84px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:152px;height:auto;display:block}
.nav-links{display:flex;align-items:center;justify-content:space-between;flex:1;gap:24px}
.nav-center{display:flex;gap:36px;margin:0 auto}
.nav-center a{text-decoration:none;font-size:15.5px;font-weight:500;color:var(--text)}
.nav-center a:hover{color:var(--red-d)}
.nav-ctas{display:flex;gap:10px}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:.5rem 1.1rem;font:500 15px var(--body);cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:2px;font:600 15.5px/1 var(--body);text-decoration:none;padding:14px 24px;border:1.5px solid transparent;transition:background .15s,transform .15s,border-color .15s;white-space:nowrap}
.btn-lg{padding:18px 32px;font-size:16.5px}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-d);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(14,14,15,.2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-onDark{border-color:rgba(255,255,255,.4);color:#fff}
.btn-onDark:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* Kickers & display */
.kicker{font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:22px;display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:7px;height:7px;flex:none;background:var(--red);transform:rotate(45deg)}
.kicker-light{color:var(--on-dark)}
.display{font-size:clamp(36px,4.4vw,60px);line-height:1.04;letter-spacing:-.035em;font-weight:600}
.lead{font-size:19px;line-height:1.6;color:var(--muted);max-width:620px;margin-top:24px}
.head-center{text-align:center;max-width:900px;margin:0 auto 72px}
.head-center .lead{margin-left:auto;margin-right:auto}

/* Stages */
.hero-shell,.section-band{padding:16px 16px 0}
.stage{border-radius:var(--r-xl);overflow:hidden;position:relative;max-width:1480px;margin:0 auto}
.stage-dark{background:var(--ink);color:var(--on-dark)}
.stage-dark .lead{color:var(--on-dark-2)}

/* Hero */
.hero{min-height:720px;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding:96px 88px;color:#fff;
  background:radial-gradient(1200px 600px at 85% 20%,#3a2a26 0%,transparent 60%),radial-gradient(900px 700px at 10% 110%,#2a2a2e 0%,transparent 60%),linear-gradient(135deg,#121214 0%,#1b1a1c 50%,#0c0c0d 100%)}
.hero-scene{position:absolute;inset:0;pointer-events:none}
.scene-racks{position:absolute;right:-5%;top:0;bottom:0;width:65%;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.06) 118px 122px),repeating-linear-gradient(180deg,transparent 0 86px,rgba(255,255,255,.05) 86px 90px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%);transform:perspective(900px) rotateY(-18deg);transform-origin:right}
.scene-glow{position:absolute;width:520px;height:520px;right:12%;top:18%;border-radius:50%;background:radial-gradient(circle,rgba(254,32,65,.28),transparent 65%);filter:blur(30px)}
.hero-copy{position:relative;z-index:2}
.hero h1{font-size:clamp(48px,6.2vw,84px);line-height:.98;letter-spacing:-.045em;font-weight:600;color:#fff}
.hero .h1-sec{font-size:clamp(40px,4.8vw,66px);line-height:1.02}
.hero-lead{font-size:19px;line-height:1.6;color:#DAD7D2;max-width:540px;margin-top:28px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.hero-sec{grid-template-columns:1fr;min-height:560px}
.hero-sec .hero-copy{max-width:860px}

.hero-ui{position:relative;z-index:2;height:520px}
.float{position:absolute;background:#fff;color:var(--text);border-radius:var(--r-md);box-shadow:var(--shadow);padding:18px 20px}
.f-head{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dot{width:7px;height:7px;transform:rotate(45deg);background:var(--red);display:inline-block}
.f-inbox{top:56px;left:0;width:250px}
.f-title{font:600 18px var(--display);letter-spacing:-.01em}
.f-meta{font-size:14px;color:var(--muted)}
.f-lines{top:150px;right:0;width:400px;padding:20px 22px}
.ln{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.ln b{display:block;font-size:15px;font-weight:600}
.ln small{color:var(--muted);font-size:13px}
.ln em{font-style:normal;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:2px;white-space:nowrap}
.ok{background:#EDEBE7;color:#2B2B2E}
.warn{background:#FFE4E8;color:#A3001A}
.f-gate{bottom:30px;left:40px;display:flex;gap:14px;align-items:center;background:var(--ink-2);color:#fff;border:1px solid rgba(255,255,255,.12)}
.f-gate b{display:block;font-size:15px}
.f-gate small{color:var(--on-dark-2);font-size:13px}
.gate-ico{width:36px;height:36px;border-radius:2px;background:var(--red);display:grid;place-items:center;font-weight:700}

/* Trust row */
.trust{padding-top:56px;padding-bottom:24px;display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:center}
.trust-label{font:600 12.5px/1.5 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.trust-row{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.trust-row li{font:600 18px var(--display);letter-spacing:-.01em;color:#2B2B2E;display:flex;align-items:center;gap:10px}
.trust-row li::before{content:"";width:7px;height:7px;flex:none;background:var(--red);transform:rotate(45deg)}

/* Sections */
.section{padding:128px 0}
.section-tint{background:var(--tint)}
.section-band + .section,.section + .section-band{}
.section-band{padding-top:16px;padding-bottom:16px}
.band{padding:120px 88px}

/* Problem */
.problem-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px}
.pcard{background:var(--white);border-radius:var(--r-lg);padding:44px 40px;min-height:340px;display:flex;flex-direction:column;border:1px solid var(--line)}
.pcard-tall{background:linear-gradient(160deg,#fff 0%,#F4EFEA 100%)}
.pcard-dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.pcard-dark p{color:var(--on-dark-2)}
.pnum{font:600 14px var(--display);color:var(--red-d);margin-bottom:auto}
.pcard-dark .pnum{color:#FF6A80}
.pcard h3{font-size:28px;line-height:1.12;letter-spacing:-.025em;font-weight:600;margin-top:64px}
.pcard p{color:var(--muted);margin-top:16px;font-size:16px}

/* Feature (editorial split) */
.feature{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
.feature-rev .feature-copy{order:2}
.feature-copy .btn{margin-top:36px}
.scene{position:relative;border-radius:var(--r-xl);min-height:560px;padding:72px 48px 48px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.scene .scene-warm{background:radial-gradient(500px 360px at 80% 10%,rgba(254,32,65,.16),transparent 70%),linear-gradient(150deg,#E8E2DB 0%,#D8D1C8 60%,#CFC6BB 100%)}
.scene-warm::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 96px,rgba(14,14,15,.045) 96px 99px);pointer-events:none}
.panel{position:relative;background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);padding:24px 26px}
.panel-head{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:12px}
.match{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:16px 0;border-top:1px solid var(--line);align-items:center}
.match small{display:block;color:var(--muted);font-size:12.5px}
.match b{font-size:15px;font-weight:600}
.match span{font-size:14.5px;color:var(--ink);background:#F6F3EF;border-radius:2px;padding:8px 12px}
.float-chip{position:relative;align-self:flex-end;margin-top:-18px;margin-right:-8px;padding:12px 16px;font-size:14px;font-weight:600;display:flex;gap:10px;align-items:center}

.steps{list-style:none;padding:0;margin:96px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:56px 48px;border-top:1px solid #D9D4CD;padding-top:56px}
.steps span{font:600 14px var(--display);color:var(--red-d)}
.steps h3{font-size:22px;letter-spacing:-.02em;margin:14px 0 10px;line-height:1.2}
.steps p{color:var(--muted);font-size:16px}
.steps strong{color:var(--ink)}

/* Agent dark scene */
.scene-night{background:radial-gradient(500px 400px at 20% 0%,rgba(254,32,65,.22),transparent 70%),linear-gradient(160deg,#26262A,#151517);border:1px solid rgba(255,255,255,.08);gap:18px}
.bubble{border-radius:4px;padding:20px 22px;max-width:88%;font-size:15.5px;line-height:1.55}
.bubble-q{align-self:flex-end;background:#fff;color:var(--ink);border-bottom-right-radius:0}
.bubble-a{background:#2E2E33;color:var(--on-dark);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:0}
.opt{display:flex;gap:12px;background:rgba(255,255,255,.06);border-radius:2px;padding:10px 14px;margin-top:10px;font-size:14.5px}
.opt b{color:#fff;white-space:nowrap}
.opt span{color:var(--on-dark-2)}
.bubble-a small{display:block;margin-top:12px;color:#ABA7A1;font-size:12.5px}
.ticks{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px}
.ticks li{color:var(--on-dark-2);font-size:15.5px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.ticks b{display:block;color:#fff;font:600 17px var(--display);margin-bottom:6px}

/* List stage */
.list-stage{background:#fff;border-radius:var(--r-xl);padding:16px 48px;border:1px solid var(--line)}
.li-row{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;padding:32px 0;border-top:1px solid var(--line)}
.li-row:first-child{border-top:0}
.li-row h3{font-size:21px;letter-spacing:-.02em;line-height:1.25}
.li-row p{color:var(--muted);font-size:16px}
.list-numbered{counter-reset:n}
.list-numbered .li-row h3::before{counter-increment:n;content:"0" counter(n);display:block;font-size:14px;color:var(--red-d);margin-bottom:8px}

/* Bento */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{background:#fff;border-radius:var(--r-lg);padding:44px 40px;border:1px solid var(--line);min-height:280px;display:flex;flex-direction:column;justify-content:flex-end}
.bcard-wide{grid-column:span 2}
.bcard h3{font-size:30px;letter-spacing:-.03em;line-height:1.1}
.bcard p{color:var(--muted);margin-top:14px;max-width:520px}
.bcard-dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink);justify-content:space-between}
.bcard-dark p{color:var(--on-dark-2)}

/* Compare */
.table-stage{background:#fff;border-radius:var(--r-xl);border:1px solid var(--line);overflow-x:auto;padding:12px 16px}

/* ROI */
.roi{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line)}
.roi-inputs{background:#fff;padding:56px}
.slider-row+.slider-row{margin-top:36px}
.slider-row label{display:flex;justify-content:space-between;gap:16px;font-weight:500;font-size:16px;margin-bottom:14px}
.slider-row output{font:600 18px var(--display);color:var(--ink)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:2px;background:#E6E2DC;outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:2px;background:#fff;border:6px solid var(--red);box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:2px;background:#fff;border:6px solid var(--red);cursor:pointer}
.roi-result{background:radial-gradient(420px 300px at 90% 0%,rgba(254,32,65,.25),transparent 70%),var(--ink);color:#fff;padding:56px;display:flex;flex-direction:column}
.roi-pre{color:var(--on-dark-2)}
.big{font:600 clamp(64px,7vw,104px)/1 var(--display);letter-spacing:-.05em;margin:12px 0 36px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.big small{font-size:20px;letter-spacing:-.01em;color:var(--on-dark-2);font-weight:500}
.roi-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r-sm);overflow:hidden;margin-bottom:36px}
.roi-stats div{background:#18181A;padding:18px 20px}
.roi-stats span{display:block;font-size:13.5px;color:#B5B1AB}
.roi-stats strong{font:600 26px var(--display);letter-spacing:-.02em}
.span2{grid-column:1/-1}
.roi-result .btn{align-self:flex-start;margin-top:auto}

/* Integrations */
.erp-row{list-style:none;margin:56px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.erp-row li{background:#fff;border:1px solid var(--line);border-radius:2px;padding:14px 24px;font:600 16px var(--display);color:#2B2B2E}

/* Cohort */
.cohort{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center;background:radial-gradient(700px 500px at 100% 100%,rgba(254,32,65,.28),transparent 60%),var(--ink)}
.cohort .btn{margin-top:40px}
.cohort-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.cohort-list li{display:flex;gap:18px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-md);padding:24px;font-size:17px;color:var(--on-dark)}
.cohort-list span{flex:none;width:32px;height:32px;border-radius:2px;background:var(--red);color:#fff;display:grid;place-items:center;font:600 14px var(--display)}

/* FAQ */
.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.faq-layout>div:first-child{position:sticky;top:120px}
.faq-item{border-top:1px solid #D9D4CD}
.faq-item:last-child{border-bottom:1px solid #D9D4CD}
.faq-item h3{font-size:inherit}
.faq-item button{width:100%;background:none;border:0;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:28px 0;font:600 20px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.sign{flex:none;width:36px;height:36px;border-radius:2px;border:1.5px solid #CFC9C1;position:relative}
.sign::before,.sign::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.sign::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.faq-item[data-open=true] .sign{background:var(--ink);border-color:var(--ink)}
.faq-item[data-open=true] .sign::before,.faq-item[data-open=true] .sign::after{background:#fff}
.faq-item[data-open=true] .sign::after{transform:translate(-50%,-50%) rotate(0)}
[data-faq-panel]{display:none;padding:0 60px 28px 0;color:var(--muted)}
.faq-item[data-open=true] [data-faq-panel]{display:block}
[data-faq-panel] a{color:var(--red-d)}

/* Security */
.claim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.claim{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;min-height:300px;display:flex;flex-direction:column}
.claim-wide{grid-column:span 2;background:linear-gradient(160deg,#fff,#F3EEE8)}
.claim-tag{align-self:flex-start;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:7px 12px;border-radius:2px;margin-bottom:auto}
.claim h3{font-size:26px;letter-spacing:-.025em;line-height:1.15;margin-top:56px}
.claim p{color:var(--muted);margin-top:14px;font-size:16px;max-width:600px}
.notyet{display:grid;gap:14px}
.ny-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:28px}
.ny-row h3{font-size:22px;color:#fff}
.ny-row p{color:var(--on-dark-2);margin-top:8px;font-size:15.5px}
.ny-badge{flex:none;font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);color:#fff;padding:7px 12px;border-radius:2px}

/* Footer */
.footer{padding:128px 0 48px}
.footer-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;padding-bottom:96px;border-bottom:1px solid #D9D4CD}
.footer-cta .btn{justify-self:start;margin-top:24px}
.footer-cta>.btn{justify-self:end}
.footer-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:32px;font-size:14.5px;color:var(--muted)}
.footer-links{display:flex;gap:24px}
.footer-links a{text-decoration:none;color:var(--ink);font-weight:500}

/* Responsive */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;padding:72px 48px}
  .hero-ui{height:500px}
  .feature,.cohort,.faq-layout{grid-template-columns:1fr;gap:56px}
  .feature-rev .feature-copy{order:0}
  .band{padding:88px 48px}
  .problem-grid,.claim-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr;gap:24px}
  .faq-layout>div:first-child{position:static}
}
@media (max-width:860px){
  .nav-toggle{display:inline-block}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--canvas);flex-direction:column;align-items:stretch;padding:16px 24px 28px;border-bottom:1px solid var(--line)}
  .nav-links[data-open=true]{display:flex}
  .nav-center{flex-direction:column;gap:0;margin:0}
  .nav-center a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav-ctas{flex-direction:column}
  .utility-inner{font-size:12.5px;gap:12px}
}
@media (max-width:680px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  .hero-shell,.section-band{padding:10px 10px 0}
  .stage{border-radius:4px}
  .hero{padding:56px 24px;min-height:0}
  .hero-ui{height:auto;display:grid;gap:14px;padding-top:44px}
  .float{position:relative;inset:auto;width:auto}
  .section{padding:88px 0}
  .band{padding:64px 24px}
  .problem-grid,.claim-grid,.bento,.steps,.ticks,.roi,.footer-cta{grid-template-columns:1fr}
  .bcard-wide,.claim-wide{grid-column:auto}
  .scene{padding:64px 18px 24px;min-height:0}
  .match,.li-row{grid-template-columns:1fr;gap:8px}
  .list-stage{padding:8px 24px}
  .roi-inputs,.roi-result{padding:32px 24px}
  .footer-cta>.btn{justify-self:start}
  .head-center{margin-bottom:48px}
}
/* polish */
.brand img{width:128px}
.f-gate{bottom:-10px;left:20px}
.f-lines{top:140px}
.trust{grid-template-columns:240px 1fr}
.trust-row{flex-wrap:nowrap;gap:20px}
.trust-row li{font-size:16px;white-space:nowrap}
@media (max-width:1080px){.trust-row{flex-wrap:wrap}}
@media (max-width:680px){.f-gate{bottom:auto;left:auto}}
.claim-grid .claim:last-child{grid-column:1/-1;min-height:240px}
@media (max-width:1080px){.claim-grid .claim:last-child{grid-column:auto}}
@media (max-width:680px){.trust{padding-top:48px}}

/* ---- Micro-animations (Nov 2026) ---- */
.btn{transition:background .2s,transform .2s ease,border-color .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(14,14,15,.35)}
.pcard,.bcard,.claim,.cohort-list li,.ny-row,.erp-row li{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.pcard:hover,.bcard:hover,.claim:hover,.erp-row li:hover{transform:translateY(-3px);border-color:rgba(254,32,65,.45);box-shadow:0 14px 30px -18px rgba(14,14,15,.3)}
.kicker::before,.trust-row li::before{transition:transform .3s ease}
.kicker:hover::before{transform:rotate(135deg)}
.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.in{opacity:1;transform:none}
@keyframes dy-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:dy-float 6s ease-in-out infinite}
.float:nth-of-type(2){animation-delay:-3s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js-reveal .reveal{opacity:1;transform:none}
}

/* ---- Margin viz ---- */
.mviz{margin:40px 0 0;padding:22px 22px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:3px}
.mviz-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px;font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.mviz-val{letter-spacing:.04em;text-transform:none;font-size:14px;color:#fff}
.mviz-val b{font:700 30px/1 var(--display);letter-spacing:-.02em;margin-right:2px}
.mviz-track{position:relative;height:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 25%),rgba(255,255,255,.06);border-radius:2px}
.mviz-risk{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(135deg,rgba(254,32,65,.22) 0 6px,transparent 6px 12px)}
.mviz-fill{position:absolute;left:0;top:5px;bottom:5px;width:var(--w);background:linear-gradient(90deg,#fff,#E9E5E0);border-radius:1px;transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1) .2s}
.mviz-fill::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;background:var(--red);transform:translateY(-50%) rotate(45deg)}
.mviz-floor{position:absolute;top:-10px;bottom:-10px;width:2px;background:var(--red);transition:transform .7s cubic-bezier(.2,.7,.2,1) .9s,opacity .5s .9s}
.mviz-floor em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font:600 11.5px var(--body);font-style:normal;white-space:nowrap;color:#fff;background:var(--red);padding:4px 7px;border-radius:2px}
.mviz-scale{display:flex;justify-content:space-between;margin-top:10px;font:500 11.5px var(--body);color:rgba(255,255,255,.45)}
.mviz-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:12.5px;color:rgba(255,255,255,.7)}
.mviz-legend span{display:flex;align-items:center;gap:8px}
.mviz-legend i{width:12px;height:12px;display:inline-block}
.k-fill{background:#fff}.k-floor{background:var(--red);width:3px!important}.k-risk{background:repeating-linear-gradient(135deg,rgba(254,32,65,.6) 0 3px,transparent 3px 6px)}
.mviz.pre .mviz-fill{transform:scaleX(0)}
.mviz.pre .mviz-floor{transform:translateY(-14px);opacity:0}
@media (prefers-reduced-motion:reduce){.mviz.pre .mviz-fill{transform:none}.mviz.pre .mviz-floor{transform:none;opacity:1}}

/* ---- Compare table ---- */
.table-stage{padding:0}
.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:960px;font-size:15px;table-layout:fixed}
.compare th,.compare td{padding:22px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line);line-height:1.45}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{height:88px;font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#F6F3EF;border-bottom:1px solid var(--line);vertical-align:bottom}
.compare tbody th{font:600 16px/1.3 var(--display);color:var(--ink);width:19%}
.compare td{color:var(--muted)}
.compare tbody tr:hover td:not(.hl),.compare tbody tr:hover th{background:#FBFAF8}
.compare .hl{width:21%;background:#FFF5F7;color:var(--ink);font-weight:600;border-left:2px solid var(--red);border-right:2px solid var(--red);position:relative}
.compare td.hl{padding-left:44px}
.compare td.hl::before{content:"";position:absolute;left:20px;top:50%;width:8px;height:8px;background:var(--red);transform:translateY(-50%) rotate(45deg)}
.compare thead .hl{background:#fff;border-top:4px solid var(--red);vertical-align:middle}
.compare tbody tr:last-child .hl{border-bottom:2px solid var(--red)}
.compare-logo{display:block;width:114px;height:auto}