:root{
  --black:#0b0d10;
  --ink:#111827;
  --muted:#747f8d;
  --line:#e8ebef;
  --soft:#f7f8fa;
  --blue:#246bfe;
  --green:#19b982;
  --white:#fff;
  --radius:22px;
  --shadow:0 20px 60px rgba(17,24,39,.07)
}
*{box-sizing:border-box}
html,body{margin:0;background:#f6f7f9;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit} button{cursor:pointer}
body{padding-bottom:76px}
.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 26px;gap:24px;position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--black);min-width:230px}
.brand img{width:44px;height:44px;border-radius:12px}
.brand strong{font-size:18px;letter-spacing:-.05em}.brand strong span{color:var(--blue)}
.brand small{display:block;font-size:8px;letter-spacing:.15em;color:#9aa3af;font-weight:900;margin-top:2px}
.context{margin:auto;display:flex;align-items:center;gap:9px}.live{width:7px;height:7px;background:var(--green);border-radius:50%}
.context small,.context b{display:block}.context small{font-size:8px;color:#a0a8b3;text-transform:uppercase;letter-spacing:.1em}.context b{font-size:12px;margin-top:2px}
.top-actions{display:flex;gap:8px;min-width:230px;justify-content:flex-end}
.btn{border:0;border-radius:11px;padding:10px 14px;font-size:12px;font-weight:850}.btn-light{background:#f1f3f6;color:#4b5563}.btn-black{background:var(--black);color:#fff}.full{width:100%}
.progressbar{height:58px;background:#fff;border-bottom:1px solid var(--line);display:grid;grid-template-columns:230px 1fr 75px;align-items:center;padding:0 26px;gap:24px;position:sticky;top:76px;z-index:25}
.progress-meta{display:flex;align-items:center;gap:9px}.progress-meta>span{display:grid;place-items:center;width:31px;height:31px;background:var(--black);color:#fff;border-radius:9px;font-size:11px;font-weight:900}
.progress-meta small,.progress-meta b{display:block}.progress-meta small{font-size:7px;color:#9ca5b0;letter-spacing:.12em;font-weight:900}.progress-meta b{font-size:11px;margin-top:1px}
.progress-line{height:2px;background:#e7eaf0;position:relative}.progress-line i{position:absolute;left:0;top:0;bottom:0;width:7.69%;background:var(--black);transition:.3s}
.progress-count{text-align:right;font-size:11px;color:#a0a8b3}.progress-count b{color:#111827}
main{max-width:1240px;margin:auto;padding:38px 26px 34px}
.step{display:none;animation:fade .22s ease}.step.active{display:block}@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen{background:#fff;border:1px solid var(--line);border-radius:28px;padding:42px;min-height:650px;box-shadow:0 10px 35px rgba(17,24,39,.035)}
.screen-dark{background:var(--black);border-color:var(--black);color:#fff}
.eyebrow{font-size:10px;color:var(--blue);letter-spacing:.16em;font-weight:950;margin-bottom:16px}.eyebrow.light{color:#7fb2ff}
h1{font-size:50px;line-height:1.02;letter-spacing:-.055em;margin:0;color:#0d1117} .screen-dark h1{color:#fff}
.headline-row{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:50px;margin-bottom:34px}.headline-row p{margin:0 0 4px;color:var(--muted);font-size:15px;line-height:1.65}
.intro-screen{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;overflow:hidden;position:relative}
.intro-screen:after{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.04);border-radius:50%;right:-240px;top:-210px;box-shadow:0 0 0 80px rgba(255,255,255,.018),0 0 0 160px rgba(255,255,255,.01)}
.intro-copy{position:relative;z-index:2}.intro-copy h1 span{color:#8eb9ff}.intro-copy>p{max-width:680px;color:#9da9b9;line-height:1.7;font-size:15px}
.intro-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.intro-form label{border-bottom:1px solid rgba(255,255,255,.13);padding:9px 0}.intro-form span{display:block;font-size:8px;color:#737f90;text-transform:uppercase;letter-spacing:.11em;font-weight:900}.intro-form input{border:0;background:transparent;color:#fff;width:100%;outline:none;padding:7px 0 2px;font-size:14px;font-weight:700}
.intro-mark{position:relative;z-index:2;border-left:1px solid rgba(255,255,255,.09);padding-left:42px}.intro-mark img{width:96px;height:96px;border-radius:25px;display:block;margin-bottom:30px}.intro-mark small,.intro-mark b,.intro-mark span{display:block}.intro-mark small{font-size:9px;color:#728096;letter-spacing:.1em;text-transform:uppercase}.intro-mark b{font-size:28px;letter-spacing:-.04em;margin:6px 0}.intro-mark span{font-size:13px;color:#93a1b4}
.sequence{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:19px;overflow:hidden}.sequence article{background:#fff;padding:27px;min-height:190px}.sequence span{font-size:9px;color:#a0a8b3;font-weight:900}.sequence b{display:block;font-size:17px;margin:33px 0 8px}.sequence p{font-size:12px;color:#84909f;line-height:1.55}
.note{margin-top:18px;border:1px solid var(--line);border-radius:17px;padding:17px 19px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fbfcfd}.note small,.note b{display:block}.note small{font-size:8px;color:var(--blue);font-weight:950;letter-spacing:.11em}.note b{font-size:13px;margin-top:3px}.note label{font-size:11px;color:#5d6979;display:flex;gap:8px;align-items:center}.note.compact{margin-top:26px}
.manifesto{border:1px solid var(--line);border-radius:22px;overflow:hidden}.manifesto-logo{background:var(--black);padding:30px}.manifesto-logo img{height:90px;max-width:100%;object-fit:contain}.manifesto-grid{display:grid;grid-template-columns:repeat(3,1fr)}.manifesto-grid article{padding:28px;border-right:1px solid var(--line)}.manifesto-grid article:last-child{border-right:0}.manifesto-grid small{font-size:9px;color:#9ca5b1;font-weight:900}.manifesto-grid b{display:block;font-size:18px;margin:20px 0 7px}.manifesto-grid p{font-size:12px;color:#8591a0;line-height:1.55}
.form-shell{display:grid;grid-template-columns:1fr 260px;gap:28px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.wide{grid-column:1/-1}.field span{display:block;font-size:10px;font-weight:850;color:#647184;margin-bottom:7px}.field input,.field textarea,.field select{width:100%;border:1px solid #dfe4ea;background:#fff;border-radius:11px;padding:12px 13px;outline:none;color:#1f2937}.field textarea{min-height:88px;resize:vertical}.field input:focus,.field textarea:focus,.field select:focus{border-color:#9ab9ff;box-shadow:0 0 0 3px rgba(36,107,254,.07)}
.form-side{border-left:1px solid var(--line);padding-left:26px}.form-side>small{font-size:8px;color:#929daa;font-weight:950;letter-spacing:.11em}
.chips{display:flex;flex-wrap:wrap;gap:7px}.form-side .chips{margin-top:13px}.chips button{border:1px solid #dfe4ea;background:#fff;border-radius:999px;padding:8px 10px;color:#596679;font-size:11px;font-weight:750}.chips button.active{background:var(--black);border-color:var(--black);color:#fff}
.journey-clean{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;margin:46px 0}.journey-clean article{padding:22px;border-top:1px solid var(--black);min-height:130px}.journey-clean article span{font-size:9px;color:#8d97a5;text-transform:uppercase;letter-spacing:.1em;font-weight:900}.journey-clean article b{display:block;margin-top:26px;font-size:15px}.journey-clean i{width:40px;height:1px;background:#cbd2dc}.question{border-top:1px solid var(--line);padding-top:24px}.question small{font-size:8px;color:var(--blue);font-weight:950;letter-spacing:.1em}.question h3{font-size:20px;letter-spacing:-.03em;margin:7px 0 13px}
.fundamentals{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:44px}.fundamentals article{padding:22px 18px;border:1px solid var(--line);border-radius:17px;min-height:210px}.fundamentals span{display:inline-block;font-size:9px;color:#8c98a6;font-weight:900}.fundamentals b{display:block;font-size:16px;margin:45px 0 7px}.fundamentals p{font-size:11px;color:#8793a2;line-height:1.55}
.diagnostic-hero{display:grid;grid-template-columns:260px 1fr;gap:24px;background:#f7f8fa;border:1px solid var(--line);border-radius:22px;padding:24px}.score-block{background:var(--black);color:#fff;border-radius:17px;padding:24px}.score-block small{font-size:8px;color:#778396;font-weight:900;letter-spacing:.1em}.score-block strong{font-size:72px;letter-spacing:-.08em;line-height:1;display:inline-block;margin-top:30px}.score-block>span{font-size:14px;color:#818da0}.score-block p{font-size:11px;color:#94a0b1;margin-top:14px}.diagnostic-bars{display:flex;flex-direction:column;justify-content:center;gap:13px}.bar-row{display:grid;grid-template-columns:145px 1fr 145px;gap:14px;align-items:center}.bar-row>span{font-size:11px;font-weight:750;color:#556174}.bar-row i{height:6px;background:#e3e7ec;border-radius:999px;overflow:hidden}.bar-row i b{display:block;height:100%;background:var(--black);border-radius:999px}.bar-row select{border:0;background:#fff;border-radius:9px;padding:9px 10px;color:#556174;font-size:10px}
.showroom-title{display:flex;justify-content:space-between;align-items:end;margin:30px 0 12px}.showroom-title small,.showroom-title b{display:block}.showroom-title small{font-size:8px;color:#98a3af;font-weight:950;letter-spacing:.1em}.showroom-title b{font-size:14px;margin-top:4px}.showroom-title>span{font-size:10px;color:#9aa4b0}
.showroom{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.site-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}.site-window{height:230px;padding:12px}.site-window.light{background:#f3f5f7}.site-window.dark{background:#101216}.site-window.warm{background:#eee7dc}.site-browser{height:22px;background:#fff;border-radius:8px 8px 0 0;display:flex;align-items:center;gap:4px;padding:0 7px}.site-browser i{width:5px;height:5px;border-radius:50%;background:#cbd2da}.site-nav{height:32px;background:rgba(255,255,255,.9);margin-top:1px}.site-main{height:150px;background:rgba(255,255,255,.94);display:grid;grid-template-columns:1fr .8fr;gap:8px;padding:16px}.dark .site-main,.dark .site-nav{background:#171a20}.site-main div{padding-top:9px}.site-main b,.site-main span{display:block;border-radius:4px;background:#cfd6df;margin-bottom:7px}.dark .site-main b,.dark .site-main span{background:#3d444f}.site-main b{height:10px;width:78%}.site-main b:nth-child(2){width:58%}.site-main span{height:5px;width:66%}.site-main button{width:62px;height:20px;border:0;border-radius:5px;background:var(--blue)}.site-main aside{border-radius:9px;background:linear-gradient(145deg,#1f2937,#246bfe)}.warm .site-main aside{background:linear-gradient(145deg,#4b4036,#c49758)}.site-info{padding:14px}.site-info small,.site-info b{display:block}.site-info small{font-size:8px;color:#9aa4af;font-weight:900;letter-spacing:.1em}.site-info b{font-size:13px;margin:4px 0 10px}.site-info input{border:0;border-top:1px solid var(--line);padding-top:9px;width:100%;outline:none;color:#667386;font-size:10px}
.builder{display:grid;grid-template-columns:360px 1fr;gap:22px}.tree-side{border:1px solid var(--line);border-radius:20px;padding:20px}.tree-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tree-head small{font-size:8px;color:#98a3af;font-weight:950;letter-spacing:.1em}.tree-head span{font-size:10px;color:#8792a0}.root-page{background:var(--black);color:#fff;border-radius:11px;padding:12px;text-align:center;font-size:12px;font-weight:900}.branches{display:flex;flex-direction:column;gap:7px;margin-top:10px}.branch{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:8px 9px}.branch input{border:0;outline:none;width:100%;font-size:11px;color:#4f5d70}.branch button{border:0;background:#f3f4f6;border-radius:7px;width:24px;height:24px;color:#8f99a5}.add-page{width:100%;margin-top:9px;border:1px dashed #cfd6df;background:#fff;border-radius:10px;padding:9px;font-size:10px;font-weight:850;color:#637083}.wireframe{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}.wire-top{height:34px;background:#eef1f4;display:flex;align-items:center;gap:5px;padding:0 10px}.wire-top i{width:6px;height:6px;border-radius:50%;background:#cbd2da}.wire-top span{margin-left:8px;font-size:8px;color:#949eaa}.wire-nav{height:48px;margin:14px;background:#f1f3f6;border-radius:9px}.wire-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;margin:14px}.wire-copy,.wire-image{height:230px;border-radius:14px}.wire-copy{background:#f7f8fa;padding:32px}.wire-copy b,.wire-copy span{display:block;background:#dfe4ea;border-radius:5px;margin-bottom:9px}.wire-copy b{height:17px;width:70%}.wire-copy b:nth-child(2){width:52%}.wire-copy span{height:6px;width:80%}.wire-copy button{width:80px;height:28px;border:0;background:var(--black);border-radius:7px;margin-top:10px}.wire-image{background:linear-gradient(145deg,#151a22,#246bfe 70%,#27c99a)}.wire-sections{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px}.wire-sections i{height:80px;background:#f3f5f7;border-radius:10px}
.value-layout{display:grid;grid-template-columns:1fr 310px;gap:22px}.catalogue{border:1px solid var(--line);border-radius:19px;overflow:hidden}.ref-card{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:15px 17px;background:#fff;border-bottom:1px solid var(--line)}.ref-card:last-child{border-bottom:0}.ref-card small,.ref-card b{display:block}.ref-card small{font-size:8px;color:#9aa4b0;font-weight:900}.ref-card b{font-size:12px;margin-top:2px}.ref-price{text-align:right}.ref-price strong,.ref-price span{display:block}.ref-price strong{font-size:13px}.ref-price span{font-size:8px;color:#9ca5b0}.value-summary{background:var(--black);color:#fff;border-radius:19px;padding:22px;align-self:start;position:sticky;top:155px}.value-summary>small{font-size:8px;color:#7e8a9c;font-weight:950;letter-spacing:.1em}.value-summary>div{display:flex;justify-content:space-between;align-items:end;margin-top:24px}.value-summary span{font-size:10px;color:#8995a6}.value-summary b{font-size:22px}.value-summary hr{border:0;border-top:1px solid rgba(255,255,255,.09);margin:22px 0}.value-summary .total b{font-size:31px}.value-summary p{font-size:10px;color:#8390a1;line-height:1.5;margin-top:24px}
.reveal-screen{padding:48px}.reveal-head{max-width:760px;margin-bottom:30px}.reveal-head h1 span{color:#8cb7ff}.reveal-head p{color:#919dad;line-height:1.65}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pack{position:relative;background:#fff;color:#111827;border-radius:18px;padding:22px;border:2px solid transparent}.pack.selected{border-color:#6ea3ff;box-shadow:0 0 0 5px rgba(36,107,254,.12)}.best{position:absolute;right:16px;top:-11px;background:var(--blue);color:#fff;border-radius:999px;padding:6px 9px;font-size:8px;font-weight:950;letter-spacing:.1em}.pack-header{display:flex;justify-content:space-between;align-items:end}.pack-header small{font-size:9px;font-weight:950;letter-spacing:.1em;color:#657285}.pack-header b{font-size:30px;letter-spacing:-.05em}.pack-header b span{font-size:10px;color:#8b96a4;letter-spacing:0}.pack-setup{margin:13px 0;background:#f4f6f8;border-radius:9px;padding:8px 9px;font-size:9px;color:#7a8797}.pack-setup strong{color:#172033}.pack>p{font-size:11px;color:#7d8999;line-height:1.5;min-height:34px}.pack ul{list-style:none;padding:12px 0 0;margin:13px 0 0;border-top:1px solid var(--line)}.pack li{position:relative;padding:4px 0 4px 17px;font-size:10px;color:#48566a;line-height:1.35}.pack li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}.pack button{width:100%;margin-top:14px;border:1px solid #dce2e9;background:#f5f6f8;border-radius:10px;padding:9px;font-size:10px;font-weight:900}.pack.selected button{background:var(--black);color:#fff;border-color:var(--black)}.fineprint{font-size:9px;color:#748195;margin-top:12px}
.commitments{display:grid;grid-template-columns:1fr 1fr;gap:14px}.commitments>div{border:1px solid var(--line);border-radius:20px;padding:25px}.commitments>div>small{font-size:8px;color:#929daa;font-weight:950;letter-spacing:.1em}.commitments label,.dark-side p{display:flex;gap:8px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);font-size:11px;line-height:1.45}.commitments label:last-child,.dark-side p:last-child{border-bottom:0}.dark-side{background:var(--black);color:#fff;border-color:var(--black)!important}.dark-side>small{color:#7e899a!important}.dark-side p{border-color:rgba(255,255,255,.08);color:#c8d0da}
.validation-grid{display:grid;grid-template-columns:1.05fr .75fr;gap:45px;align-items:start}.selection{display:inline-block;background:#edf3ff;color:var(--blue);border-radius:999px;padding:6px 9px;font-size:8px;font-weight:950;letter-spacing:.1em}.validation-copy h1{margin-top:14px}.lead{font-size:14px;line-height:1.65;color:#7f8a99;max-width:700px}.price-pair{display:flex;align-items:center;gap:13px;margin:30px 0 18px}.price-pair>div{border:1px solid var(--line);border-radius:16px;padding:17px 20px;min-width:180px}.price-pair .black{background:var(--black);color:#fff;border-color:var(--black)}.price-pair small,.price-pair b,.price-pair span{display:block}.price-pair small{font-size:8px;color:#8c97a5;font-weight:900;letter-spacing:.08em}.price-pair b{font-size:26px;margin:5px 0}.price-pair span{font-size:8px;color:#9aa4b0}.price-pair i{font-style:normal;color:#a0a8b3}.summary-tags{display:flex;flex-wrap:wrap;gap:6px}.summary-tags span{background:#f0f3f6;border-radius:999px;padding:7px 9px;font-size:9px;color:#5b6879;font-weight:750}.proposal{border:1px solid var(--line);border-radius:20px;padding:22px;background:#fff;box-shadow:var(--shadow)}.proposal-title{display:flex;align-items:center;gap:10px;margin-bottom:18px}.proposal-title img{width:42px;height:42px;border-radius:11px}.proposal-title small,.proposal-title b{display:block}.proposal-title small{font-size:7px;color:#98a2ad;font-weight:950;letter-spacing:.1em}.proposal-title b{font-size:13px;margin-top:2px}.proposal .field{margin-top:12px}.prototype{display:block;text-align:center;font-size:8px;color:#a0a8b2;margin-top:8px}
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:19px;overflow:hidden;margin-top:38px}.timeline article{background:#fff;padding:24px;min-height:190px}.timeline span{font-size:8px;color:var(--blue);font-weight:950;letter-spacing:.08em}.timeline b{display:block;font-size:15px;margin:36px 0 7px}.timeline p{font-size:10px;color:#8691a0;line-height:1.5}.finish{margin-top:18px;background:var(--black);color:#fff;border-radius:18px;padding:20px;display:flex;align-items:center;gap:13px}.finish img{width:48px;height:48px;border-radius:13px}.finish small,.finish b{display:block}.finish small{font-size:8px;color:#7f8a9b;font-weight:950;letter-spacing:.1em}.finish b{font-size:16px;margin-top:3px}
.footer{position:fixed;left:0;right:0;bottom:0;height:70px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px;z-index:35}.footer>div{font-size:10px;color:#9aa4af;font-weight:850}.footer>div span{color:#1f2937}
.commercial-panel{position:fixed;right:-410px;top:0;width:400px;height:100vh;background:#fff;z-index:60;box-shadow:-24px 0 70px rgba(15,23,42,.15);transition:.25s}.commercial-panel.open{right:0}.commercial-panel header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 20px}.commercial-panel header small,.commercial-panel header b{display:block}.commercial-panel header small{font-size:8px;color:#98a2ad;font-weight:950;letter-spacing:.1em}.commercial-panel header button{border:0;background:#f1f3f6;border-radius:9px;width:32px;height:32px;font-size:18px}.panel-body{padding:20px}.coach{border-left:2px solid var(--line);padding:4px 0 4px 13px;margin-bottom:17px}.coach:first-child{border-color:var(--blue)}.coach small{font-size:8px;color:#929daa;font-weight:950;letter-spacing:.1em}.coach p{font-size:11px;color:#5f6c7d;line-height:1.55;margin:6px 0 0}.panel-body>.field{margin:18px 0}.quick-pack{border-top:1px solid var(--line);padding-top:14px}.quick-pack>small{font-size:8px;color:#929daa;font-weight:950;letter-spacing:.1em}.quick-pack>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:9px 0 12px}.quick-pack button{border:1px solid var(--line);background:#f4f6f8;border-radius:9px;padding:9px;font-size:10px;font-weight:900}.quick-pack button.active{background:var(--black);color:#fff}.toast{position:fixed;left:50%;bottom:-70px;transform:translateX(-50%);background:var(--black);color:#fff;border-radius:10px;padding:11px 14px;font-size:10px;font-weight:800;z-index:80;transition:.22s}.toast.show{bottom:86px}
@media(max-width:950px){
 .topbar{padding:0 14px}.context{display:none}.brand,.top-actions{min-width:auto}.top-actions #saveBtn{display:none}
 .progressbar{grid-template-columns:1fr 55px;padding:0 14px}.progress-line{display:none}
 main{padding:20px 12px}.screen{padding:26px;min-height:auto}.intro-screen,.headline-row,.form-shell,.diagnostic-hero,.builder,.value-layout,.validation-grid{grid-template-columns:1fr}.intro-mark{border-left:0;border-top:1px solid rgba(255,255,255,.09);padding:25px 0 0}.intro-form,.form-grid{grid-template-columns:1fr}.wide{grid-column:auto}.form-side{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}
 .sequence,.fundamentals,.showroom,.packs,.commitments,.timeline{grid-template-columns:1fr}.journey-clean{grid-template-columns:1fr}.journey-clean i{display:none}.manifesto-grid{grid-template-columns:1fr}.manifesto-grid article{border-right:0;border-bottom:1px solid var(--line)}.manifesto-grid article:last-child{border-bottom:0}
 .headline-row{gap:8px}.headline-row p{margin-top:0}.bar-row{grid-template-columns:110px 1fr}.bar-row select{grid-column:1/-1}.value-summary{position:static}.price-pair{flex-direction:column;align-items:stretch}.price-pair i{text-align:center}
 h1{font-size:38px}.commercial-panel{width:min(92vw,400px)}
}


/* ==========================================================
   V4.1 — MODE "SLIDE" RESPONSIVE
   Objectif : chaque étape occupe le viewport sans faire
   descendre toute la page. Le contenu s'adapte à la hauteur.
   ========================================================== */

html, body {
  height: 100%;
}

body {
  overflow: hidden;
  padding-bottom: 0;
}

.app {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 76px 58px minmax(0, 1fr) 70px;
  overflow: hidden;
}

.topbar,
.progressbar,
.footer {
  position: relative;
  top: auto;
  bottom: auto;
}

main {
  width: 100%;
  max-width: 1240px;
  min-height: 0;
  height: 100%;
  margin: 0 auto;
  padding: clamp(12px, 2vh, 24px) 26px;
  overflow: hidden;
}

.step {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.step.active {
  display: block;
  height: 100%;
}

.screen {
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d5dbe3 transparent;
  padding: clamp(24px, 3.3vh, 42px);
}

.screen::-webkit-scrollbar {
  width: 6px;
}

.screen::-webkit-scrollbar-thumb {
  background: #d5dbe3;
  border-radius: 999px;
}

/* Hauteur adaptative : on compacte progressivement le contenu,
   sans le déformer ni changer les proportions. */
h1 {
  font-size: clamp(34px, min(4.1vw, 5.4vh), 50px);
}

.headline-row {
  margin-bottom: clamp(18px, 3vh, 34px);
}

.intro-screen {
  min-height: 0;
}

.intro-mark img {
  width: clamp(68px, 9vh, 96px);
  height: clamp(68px, 9vh, 96px);
}

.sequence article {
  min-height: clamp(132px, 19vh, 190px);
  padding: clamp(18px, 2.5vh, 27px);
}

.manifesto-logo {
  padding: clamp(18px, 2.8vh, 30px);
}

.manifesto-logo img {
  height: clamp(58px, 8.5vh, 90px);
}

.manifesto-grid article {
  padding: clamp(18px, 2.7vh, 28px);
}

.fundamentals {
  margin-top: clamp(22px, 4vh, 44px);
}

.fundamentals article {
  min-height: clamp(155px, 22vh, 210px);
  padding: clamp(16px, 2.4vh, 22px) 18px;
}

.fundamentals b {
  margin-top: clamp(24px, 5vh, 45px);
}

.site-window {
  height: clamp(168px, 25vh, 230px);
}

.site-main {
  height: calc(100% - 55px);
}

.wire-copy,
.wire-image {
  height: clamp(160px, 26vh, 230px);
}

.timeline article {
  min-height: clamp(135px, 20vh, 190px);
  padding: clamp(17px, 2.5vh, 24px);
}

.timeline b {
  margin-top: clamp(18px, 4vh, 36px);
}

/* Les pages les plus chargées restent "slide", avec uniquement
   un très léger scroll interne si l'écran est vraiment trop bas. */
.value-summary {
  top: 0;
}

/* Écrans portables 13/14 pouces et fenêtres moins hautes */
@media (max-height: 850px) and (min-width: 951px) {
  .app {
    grid-template-rows: 66px 50px minmax(0, 1fr) 62px;
  }

  .topbar {
    height: 66px;
  }

  .progressbar {
    height: 50px;
  }

  .footer {
    height: 62px;
  }

  .brand img {
    width: 38px;
    height: 38px;
  }

  main {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .screen {
    padding: 24px 30px;
    border-radius: 22px;
  }

  .eyebrow {
    margin-bottom: 10px;
  }

  .headline-row {
    margin-bottom: 18px;
  }

  .intro-copy > p,
  .headline-row p,
  .lead {
    font-size: 12.5px;
    line-height: 1.48;
  }

  .intro-form {
    margin-top: 17px;
  }

  .sequence article {
    min-height: 138px;
  }

  .sequence b {
    margin-top: 20px;
  }

  .manifesto-logo img {
    height: 56px;
  }

  .manifesto-grid article {
    padding: 18px 22px;
  }

  .manifesto-grid b {
    margin-top: 13px;
  }

  .journey-clean {
    margin: 25px 0;
  }

  .journey-clean article {
    min-height: 98px;
    padding: 15px;
  }

  .journey-clean article b {
    margin-top: 15px;
  }

  .fundamentals {
    margin-top: 22px;
  }

  .fundamentals article {
    min-height: 145px;
    padding: 15px;
  }

  .fundamentals b {
    margin-top: 23px;
  }

  .diagnostic-hero {
    padding: 16px;
  }

  .score-block {
    padding: 18px;
  }

  .score-block strong {
    font-size: 55px;
    margin-top: 16px;
  }

  .showroom-title {
    margin: 18px 0 9px;
  }

  .site-window {
    height: 158px;
  }

  .site-main {
    height: 102px;
    padding: 11px;
  }

  .site-info {
    padding: 10px 12px;
  }

  .wire-nav {
    height: 37px;
    margin: 10px;
  }

  .wire-hero {
    margin: 10px;
  }

  .wire-copy,
  .wire-image {
    height: 150px;
  }

  .wire-copy {
    padding: 20px;
  }

  .wire-sections {
    margin: 10px;
  }

  .wire-sections i {
    height: 52px;
  }

  .ref-card {
    padding: 10px 14px;
  }

  .value-summary {
    padding: 17px;
  }

  .value-summary > div {
    margin-top: 15px;
  }

  .value-summary hr {
    margin: 15px 0;
  }

  .reveal-screen {
    padding: 25px 30px;
  }

  .reveal-head {
    margin-bottom: 18px;
  }

  .pack {
    padding: 16px;
  }

  .pack > p {
    min-height: 0;
    margin: 9px 0;
  }

  .pack ul {
    margin-top: 8px;
    padding-top: 8px;
  }

  .pack li {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .pack button {
    margin-top: 9px;
  }

  .commitments > div {
    padding: 18px 22px;
  }

  .commitments label,
  .dark-side p {
    padding: 9px 0;
  }

  .timeline article {
    min-height: 130px;
    padding: 17px;
  }

  .timeline b {
    margin: 20px 0 5px;
  }

  .finish {
    margin-top: 12px;
    padding: 14px 17px;
  }
}

/* Très faible hauteur : priorité à l'affichage complet,
   le scroll reste limité à la carte centrale si nécessaire. */
@media (max-height: 700px) and (min-width: 951px) {
  .app {
    grid-template-rows: 60px 46px minmax(0, 1fr) 58px;
  }

  .topbar { height: 60px; }
  .progressbar { height: 46px; }
  .footer { height: 58px; }

  .screen {
    padding: 18px 24px;
  }

  h1 {
    font-size: 32px;
  }

  .intro-mark img {
    width: 60px;
    height: 60px;
    margin-bottom: 16px;
  }

  .showroom-title > span,
  .fineprint {
    display: none;
  }
}

/* Mobile : on garde le responsive vertical classique.
   La page peut défiler car c'est plus naturel sur téléphone. */
@media (max-width: 950px) {
  body {
    overflow: auto;
  }

  .app {
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .topbar {
    position: sticky;
    top: 0;
  }

  .progressbar {
    position: sticky;
    top: 76px;
  }

  main {
    height: auto;
    overflow: visible;
    padding: 20px 12px 90px;
  }

  .step,
  .step.active {
    height: auto;
  }

  .screen {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .footer {
    position: fixed;
    bottom: 0;
  }
}