/* ==========================================================================
   Simulateur Photovoltaïque — Normes Rénovation
   Tokens copied from the design system + simulator component styles.
   ========================================================================== */
@font-face{
  font-family:'Anton';
  src:url('../assets/Anton-Regular.ttf') format('truetype');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --nr-white:#FFFFFF; --nr-sky:#38B6FF; --nr-yellow:#FFDE59; --nr-teal:#294352;
  --nr-teal-deep:#1A2D38; --nr-teal-soft:#3D5C6F; --nr-teal-mist:#6B8294;
  --nr-sky-deep:#1F8FD9; --nr-sky-soft:#8FD4FF; --nr-sky-mist:#E5F4FF;
  --nr-yellow-deep:#E6C13B; --nr-yellow-soft:#FFEC9C; --nr-yellow-mist:#FFF8DC;
  --nr-bone:#FAFBFC; --nr-cream:#F2F4F6;
  --nr-stone-100:#E5E9ED; --nr-stone-200:#D2D8DE; --nr-stone-300:#B0B8C0;
  --nr-stone-400:#828D97; --nr-stone-500:#5C6770; --nr-ink:#14202A;
  --nr-success:#2D7A4F; --nr-danger:#D64545;

  --fg:var(--nr-teal); --fg-muted:var(--nr-stone-500); --fg-soft:var(--nr-stone-400);
  --border:var(--nr-stone-200); --border-strong:var(--nr-stone-300);

  --font-display:'Anton','Arial Narrow',Impact,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --sh-1:0 1px 2px rgba(41,67,82,.06),0 1px 1px rgba(41,67,82,.04);
  --sh-2:0 4px 12px rgba(41,67,82,.08),0 2px 4px rgba(41,67,82,.04);
  --sh-3:0 12px 32px rgba(41,67,82,.14),0 4px 8px rgba(41,67,82,.06);
  --sh-card:0 8px 24px rgba(41,67,82,.10);
  --sh-glow-sky:0 8px 32px rgba(56,182,255,.35);

  --grad-teal-sky:linear-gradient(135deg,var(--nr-teal) 0%,var(--nr-sky) 100%);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body); color:var(--nr-ink); background:var(--nr-cream);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
img{display:block;max-width:100%}
button{font-family:inherit}

.frame{
  min-height:100vh; width:100%;
  display:flex; flex-direction:column;
  transition:max-width .35s var(--ease);
  margin:0 auto; background:var(--nr-cream);
}

/* ===== App shell ================================================= */
.app-scroll{ flex:1; display:flex; flex-direction:column; }

.topbar{
  background:var(--nr-white); border-bottom:1px solid var(--nr-stone-100);
  padding:14px 40px; flex-shrink:0;
}
.topbar-inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar .logo{ height:46px; width:auto; }
.topbar-actions{ display:flex; align-items:center; gap:10px; }
.retour-btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid var(--border); background:#fff; border-radius:999px;
  padding:9px 16px; font:600 13px/1 var(--font-body); color:var(--fg);
  text-decoration:none; transition:.18s var(--ease); white-space:nowrap;
}
.retour-btn:hover{ border-color:var(--nr-teal); color:var(--nr-teal); }
.help-btn{
  border:1.5px solid var(--border); background:#fff; border-radius:999px;
  padding:9px 16px; display:flex; align-items:center; gap:8px;
  font:600 13px/1 var(--font-body); color:var(--fg); cursor:pointer;
  transition:.18s var(--ease);
}
.help-btn:hover{ border-color:var(--nr-sky); color:var(--nr-sky); }
.help-btn .q{
  width:18px;height:18px;border-radius:50%;background:var(--nr-sky);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:11px;
}

/* ===== Phase progress (3 macro-phases) ========================== */
.phases{
  background:var(--grad-teal-sky); padding:20px 28px 26px;
  display:flex; align-items:flex-start; justify-content:center; gap:0;
  flex-shrink:0; position:relative;
}
.phase{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:0 1 200px; position:relative; z-index:2;
}
.phase .dot{
  width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55); color:rgba(255,255,255,.85);
  display:grid;place-items:center; font:700 16px/1 var(--font-body);
  background:transparent; transition:.25s var(--ease);
}
.phase .plabel{
  font:600 13px/1.2 var(--font-body); color:rgba(255,255,255,.8);
  text-align:center; letter-spacing:.01em;
}
.phase.done .dot{ background:var(--nr-white); border-color:#fff; color:var(--nr-teal); }
.phase.active .dot{ background:var(--nr-white); border-color:#fff; color:var(--nr-teal); box-shadow:0 0 0 5px rgba(255,255,255,.22); }
.phase.active .plabel{ color:#fff; font-weight:700; }
.phase-line{
  flex:1 1 auto; height:2px; background:rgba(255,255,255,.4); max-width:120px;
  margin-top:19px; z-index:1;
}

/* micro step counter under phases */
.microbar{
  background:var(--nr-white); flex-shrink:0;
  border-bottom:1px solid var(--nr-stone-100);
  padding:10px 28px; display:flex; align-items:center; gap:14px;
}
.microbar .track{ flex:1; height:6px; border-radius:99px; background:var(--nr-stone-100); overflow:hidden; }
.microbar .fill{ height:100%; background:var(--nr-sky); border-radius:99px; transition:width .4s var(--ease); }
.microbar .count{ font:700 12px/1 var(--font-body); color:var(--fg-muted); letter-spacing:.04em; white-space:nowrap; }

/* ===== Stage / card ============================================= */
.stage{
  flex:1; display:flex; align-items:flex-start; justify-content:center;
  padding:40px 28px 56px; background:var(--nr-cream);
}
.card{
  width:100%; max-width:760px; background:var(--nr-white);
  border-radius:28px; box-shadow:var(--sh-card);
  padding:40px 44px 36px; position:relative;
  opacity:1;
}
.card--landing{
  max-width:1160px;
  padding:36px;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(255,222,89,.22), transparent 26%),
    radial-gradient(circle at left center, rgba(56,182,255,.12), transparent 28%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%);
}
.card.anim{ animation:cardIn .42s var(--ease); }
@keyframes cardIn{ from{transform:translateY(10px)} to{transform:none} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:700 11px/1 var(--font-body); text-transform:uppercase;
  letter-spacing:.18em; color:var(--nr-sky); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--nr-sky); }

.card h1{
  font-family:var(--font-display); font-weight:400;
  font-size:34px; line-height:1.08; letter-spacing:-.01em;
  text-transform:uppercase; color:var(--nr-teal); margin:0 0 12px;
  text-wrap:balance;
}
.card h1 .hl{
  background:linear-gradient(180deg,transparent 58%,var(--nr-yellow) 58% 92%,transparent 92%);
  padding:0 2px;
}
.card .sub{
  font:400 16px/1.5 var(--font-body); color:var(--fg-muted);
  margin:0 0 24px; max-width:54ch;
}
.card .sub b{ color:var(--nr-teal); font-weight:600; }
.card .note{
  font:italic 400 13.5px/1.5 var(--font-body); color:var(--nr-stone-400);
  margin:14px 0 0;
}
.inline-alert{
  margin:0 0 18px; padding:12px 14px; border-radius:14px;
  border:1px solid rgba(214,69,69,.28); background:#FFF3F3; color:#B63535;
  font:600 13px/1.45 var(--font-body);
}

.landing-step{
  position:relative;
}
.landing-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
  gap:22px;
  align-items:start;
}
.landing-copy{
  min-width:0;
  padding:8px 4px 4px;
}
.landing-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(56,182,255,.11);
  color:var(--nr-sky-deep);
  font:700 11px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.landing-kicker::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--nr-yellow);
  box-shadow:0 0 0 5px rgba(255,222,89,.25);
}
.landing-copy h1{
  margin-top:18px;
  font-size:48px;
  line-height:.98;
}
.landing-copy .sub{
  max-width:58ch;
  font-size:17px;
  margin-bottom:0;
}
.landing-proof-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.landing-proof{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(56,182,255,.18);
  box-shadow:var(--sh-1);
  color:var(--nr-teal);
  font:600 13px/1.2 var(--font-body);
}
.landing-proof svg{
  width:17px;
  height:17px;
  color:var(--nr-sky);
  flex-shrink:0;
}
.landing-stat-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top:20px;
}
.landing-stat-card{
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(239,247,252,.96) 100%);
  border:1px solid rgba(41,67,82,.08);
  padding:18px 16px;
  box-shadow:var(--sh-1);
}
.landing-stat-card strong{
  display:block;
  font-family:var(--font-display);
  font-size:32px;
  line-height:1;
  color:var(--nr-teal);
}
.landing-stat-card span{
  display:block;
  margin-top:7px;
  font:600 12px/1.45 var(--font-body);
  color:var(--fg-muted);
}
.landing-benefits{
  display:grid;
  gap:12px;
  margin-top:20px;
}
.landing-benefit{
  display:grid;
  grid-template-columns:56px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(41,67,82,.08);
  box-shadow:var(--sh-1);
}
.landing-benefit-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--nr-teal);
  color:#fff;
}
.landing-benefit h3{
  margin:0;
  font:700 17px/1.2 var(--font-body);
  color:var(--nr-teal);
}
.landing-benefit p{
  margin:8px 0 0;
  font:400 14px/1.55 var(--font-body);
  color:var(--fg-muted);
}
.landing-form-card{
  position:relative;
  padding:24px;
  border-radius:26px;
  background:linear-gradient(180deg, #16313E 0%, #254758 100%);
  color:#fff;
  box-shadow:0 24px 60px rgba(26,45,56,.22);
}
.landing-form-card::before{
  content:'';
  position:absolute;
  inset:auto -40px -70px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,222,89,.14);
  filter:blur(8px);
}
.landing-form-top,
.landing-form-card .inline-alert,
.landing-form-card .actions,
.landing-helper,
.landing-field,
.landing-mini-steps{
  position:relative;
  z-index:1;
}
.landing-form-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);
  font:700 11px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
}
.landing-form-card h2{
  margin:16px 0 0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:34px;
  line-height:1.02;
  text-transform:uppercase;
  color:#fff;
}
.landing-form-card p{
  margin:10px 0 0;
  font:400 14px/1.6 var(--font-body);
  color:rgba(255,255,255,.78);
}
.landing-field{
  margin-top:20px;
}
.landing-field label{
  color:#fff;
}
.landing-input-group{
  border-radius:16px;
  box-shadow:0 10px 28px rgba(10,20,30,.18);
}
.landing-input{
  min-height:60px;
  border-color:rgba(255,255,255,.16);
}
.landing-input-icon{
  min-width:56px;
  border-radius:16px 0 0 16px;
}
.landing-mini-steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
}
.landing-mini-step{
  min-height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  padding:12px 12px 10px;
  color:rgba(255,255,255,.72);
  font:600 12px/1.35 var(--font-body);
}
.landing-mini-step span{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-bottom:8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font:700 12px/1 var(--font-body);
}
.landing-mini-step.active{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.landing-helper{
  margin:14px 0 0;
  font:400 12.5px/1.55 var(--font-body);
  color:rgba(255,255,255,.72);
}

/* ===== Buttons ================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:0; cursor:pointer; border-radius:14px;
  font:700 15px/1 var(--font-body); padding:17px 24px;
  transition:.18s var(--ease); width:100%;
}
.btn--primary{ background:var(--nr-sky); color:#fff; box-shadow:var(--sh-glow-sky); }
.btn--primary:hover{ background:var(--nr-sky-deep); transform:translateY(-1px); }
.btn--primary:active{ transform:translateY(0) scale(.99); }
.btn--primary:disabled{ background:var(--nr-stone-200); color:#fff; box-shadow:none; cursor:not-allowed; transform:none; }
.btn--teal{ background:var(--nr-teal); color:#fff; box-shadow:var(--sh-2); }
.btn--teal:hover{ background:var(--nr-teal-deep); transform:translateY(-1px); }
.btn--yellow{ background:var(--nr-yellow); color:var(--nr-teal); box-shadow:var(--sh-2); }
.btn--yellow:hover{ background:var(--nr-yellow-deep); }
.btn .arrow{ font-size:18px; line-height:0; }

.actions{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.backlink{
  background:none; border:0; cursor:pointer; align-self:center;
  font:600 14px/1 var(--font-body); color:var(--fg-muted);
  padding:6px 8px; transition:.15s var(--ease);
}
.backlink:hover{ color:var(--nr-teal); }

/* ===== Readout box (result strip) ============================== */
.readout{
  border:1.5px solid var(--nr-sky); border-radius:18px;
  padding:18px 22px; text-align:center; background:var(--nr-sky-mist);
  margin-top:6px;
}
.readout .lbl{ font:500 15px/1.4 var(--font-body); color:var(--nr-teal-soft); }
.readout .big{ font-family:var(--font-display); font-weight:400; font-size:34px; color:var(--nr-teal); line-height:1.1; margin-top:4px; text-transform:uppercase; }
.readout .big small{ font-family:var(--font-body); font-size:18px; font-weight:600; }

/* ===== Map ===================================================== */
.map-wrap{
  position:relative; border-radius:18px; overflow:hidden;
  box-shadow:var(--sh-2); border:1px solid var(--border);
  background:#1a1a1a; aspect-ratio:16/11; width:100%;
}
.map{
  position:absolute; inset:0;
  background-image:url('../assets/aerial.png');
  background-size:cover; background-position:center;
  user-select:none; touch-action:none;
}
.map.real-map{ background:none; }
.map.draw{ cursor:crosshair; }
.map.pan{ cursor:grab; }
.map.pan.grabbing{ cursor:grabbing; }

.draw-svg{ position:absolute; inset:0; pointer-events:none; }
.poly-fill{ fill:rgba(56,182,255,.25); stroke:var(--nr-sky); stroke-width:3; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.poly-fill.valid{ fill:rgba(45,122,79,.22); stroke:var(--nr-success); }
.poly-edge{ stroke:var(--nr-sky); stroke-width:3; stroke-dasharray:7 6; fill:none; vector-effect:non-scaling-stroke; }
.poly-edge.sel{ stroke:var(--nr-danger); stroke-width:5; stroke-dasharray:none; cursor:pointer; }
.poly-edge.hit{ stroke:transparent; stroke-width:18; fill:none; cursor:pointer; pointer-events:stroke; vector-effect:non-scaling-stroke; }
.vertex{ fill:#fff; stroke:var(--nr-success); stroke-width:3.5; vector-effect:non-scaling-stroke; }
.panel-cell{ fill:rgba(20,32,42,.82); stroke:rgba(255,255,255,.18); stroke-width:.5; vector-effect:non-scaling-stroke; }

.map-pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-100%);
  pointer-events:none; z-index:3; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.map-pin--red svg{ width:48px; height:60px; }
.surface-bubble{
  position:absolute; background:#fff; color:var(--nr-teal);
  font:700 13px/1 var(--font-body); padding:6px 12px; border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.25); pointer-events:none;
  transform:translate(-50%,-50%); white-space:nowrap; z-index:4;
}
.map-hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(20,32,42,.9); color:#fff; backdrop-filter:blur(6px);
  padding:11px 18px; border-radius:12px; font:600 13px/1.3 var(--font-body);
  display:flex; align-items:center; gap:10px; pointer-events:none;
  max-width:88%; text-align:center; z-index:4;
}
.map-hint .pulse{ width:9px;height:9px;border-radius:50%;background:var(--nr-sky);box-shadow:0 0 0 4px rgba(56,182,255,.4);animation:pulse 1.6s infinite;flex-shrink:0; }
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(56,182,255,.4)}50%{box-shadow:0 0 0 9px rgba(56,182,255,0)}}

.map-tools{ position:absolute; left:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:5; }
.map-tools button{
  width:40px;height:40px;border-radius:11px;border:0;background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18); display:grid;place-items:center;
  cursor:pointer;color:var(--nr-teal); transition:.14s var(--ease);
}
.map-tools button:hover{ color:var(--nr-sky); transform:translateX(2px); }

.map-style-switch{
  position:absolute; top:14px; right:14px; z-index:6;
  display:inline-flex; gap:4px; padding:4px;
  background:rgba(255,255,255,.96); border-radius:999px; box-shadow:var(--sh-2);
}
.map-style-switch button{
  border:0; background:transparent; color:var(--nr-teal); cursor:pointer;
  padding:10px 14px; border-radius:999px; font:700 12px/1 var(--font-body);
  transition:.16s var(--ease);
}
.map-style-switch button.active{
  background:var(--nr-teal); color:#fff;
}

.step-layout{
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start;
}
.step-map-full{
  width:100%;
}
.step-sidecard{
  border:1px solid var(--border); background:linear-gradient(180deg,#fff 0%, #F8FBFF 100%);
  border-radius:22px; padding:18px; box-shadow:var(--sh-1);
}
.step-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:74px; height:32px;
  padding:0 12px; border-radius:999px; background:var(--nr-sky-mist); color:var(--nr-sky);
  font:700 12px/1 var(--font-body); text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;
}
.step-demo{
  border-radius:22px; overflow:hidden; background:#1F2E5A; aspect-ratio:25/32;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.step-demo svg{ width:100%; height:100%; display:block; }
.step-demo-title{
  margin-top:14px; font:700 16px/1.2 var(--font-body); color:var(--nr-teal);
}
.step-demo-copy{
  margin-top:8px; font:400 13px/1.55 var(--font-body); color:var(--fg-muted);
}
.step-mapcol{ min-width:0; }

.tutorial-modal{
  position:absolute; inset:0; z-index:40;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
}
.tutorial-backdrop{
  position:absolute; inset:0; background:rgba(20,32,42,.50);
  backdrop-filter:blur(4px);
}
.tutorial-card{
  position:relative; z-index:1; width:min(760px, calc(100vw - 42px));
  border-radius:28px; background:rgba(255,255,255,.96);
  box-shadow:0 24px 80px rgba(20,32,42,.24);
  padding:22px 22px 20px; text-align:center;
  animation:tutorialIn .28s var(--ease);
}
@keyframes tutorialIn{
  from{ transform:translateY(12px) scale(.98); opacity:0; }
  to{ transform:translateY(0) scale(1); opacity:1; }
}
.tutorial-close{
  border:0; background:none; cursor:pointer; color:var(--nr-sky);
  font:700 15px/1 var(--font-body); margin-bottom:14px;
}
.tutorial-icon-close{
  position:absolute; top:16px; right:16px;
  width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:#fff; color:var(--nr-teal); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sh-1);
  transition:.16s var(--ease);
}
.tutorial-icon-close:hover{
  color:var(--nr-sky); border-color:var(--nr-sky);
}
.tutorial-visual{
  border-radius:24px; overflow:hidden; background:#1F2E5A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  aspect-ratio: 38 / 26;
}
.tutorial-visual svg,
.tutorial-visual img{ width:100%; height:100%; display:block; object-fit:cover; }
.tutorial-visual--gif{
  background:#D9E2EC;
}
.tutorial-title{
  margin-top:16px; font:800 18px/1.2 var(--font-body); color:var(--nr-teal);
}
.tutorial-step-badge{
  margin-top:16px; color:var(--nr-sky); font:700 11px/1 var(--font-body);
  letter-spacing:.16em; text-transform:uppercase;
}
.tutorial-step-badge + .tutorial-title{
  margin-top:10px;
}
.tutorial-copy{
  margin-top:10px; font:400 14px/1.55 var(--font-body); color:var(--fg-muted);
}

.stat--warn .v{ color:var(--fg-muted)!important; font-size:22px!important; }

.no-fit-alert{
  padding:24px 20px 20px;
  text-align:center;
}
.no-fit-icon{
  width:56px; height:56px; border-radius:999px;
  background:#FFF3CD; color:#B45309;
  display:grid; place-items:center;
  margin:0 auto 14px;
  box-shadow:inset 0 0 0 1.5px rgba(180,83,9,.18);
}
.no-fit-title{
  font:700 18px/1.2 var(--font-body);
  color:var(--nr-teal);
  margin:0 0 10px;
}
.no-fit-copy{
  font:400 14px/1.6 var(--font-body);
  color:var(--fg-muted);
  max-width:380px;
  margin:0 auto 8px;
}
.no-fit-actions{
  display:flex; flex-direction:column; gap:10px;
  max-width:340px; margin:18px auto 0;
}

.success-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:32px 20px 28px;
  animation:tutorialIn .28s var(--ease);
}
.success-mark{
  width:80px;
  height:80px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#E8F8EF 0%,#D7F4E3 100%);
  color:#1F9D5C;
  box-shadow:inset 0 0 0 1px rgba(31,157,92,.12), 0 8px 24px rgba(31,157,92,.14);
}
.success-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 12px;
  border-radius:999px;
  background:var(--nr-sky-mist);
  color:var(--nr-sky-deep);
  font:700 11px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.success-title{
  margin:16px 0 0;
  font:800 26px/1.1 var(--font-body);
  color:var(--nr-teal);
}
.success-copy{
  margin:12px auto 0;
  max-width:400px;
  font:400 15px/1.6 var(--font-body);
  color:var(--fg-muted);
}
.success-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  max-width:420px;
  margin-top:28px;
}
.btn--ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 18px;
  border-radius:999px;
  font:600 15px/1 var(--font-body);
  background:transparent;
  color:var(--fg-muted);
  border:none;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  transition:.18s var(--ease);
}
.btn--ghost:hover{ color:var(--nr-teal); }

.suggest-wrap{ position:relative; }
.suggest-list{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:25;
  display:none; background:#fff; border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--sh-3); overflow:hidden;
}
.suggest-list.open{ display:block; }
.suggest-item{
  width:100%; border:0; background:#fff; text-align:left; cursor:pointer;
  padding:14px 16px; display:flex; flex-direction:column; gap:5px;
  border-bottom:1px solid var(--nr-stone-100);
}
.suggest-item:last-child{ border-bottom:0; }
.suggest-item:hover{
  background:var(--nr-sky-mist);
}
.suggest-main{
  font:600 14px/1.3 var(--font-body); color:var(--nr-teal);
}
.suggest-sub{
  font:400 12px/1.35 var(--font-body); color:var(--fg-soft);
}

/* ===== Option chips / cards ==================================== */
.opt-grid{ display:grid; gap:14px; margin-top:8px; }
.opt-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.opt-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.opt-grid.cols-2{ grid-template-columns:repeat(2,1fr); }

.chip{
  border:1.5px solid var(--border); background:#fff; border-radius:16px;
  padding:22px 14px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:.16s var(--ease); color:var(--nr-teal);
}
.chip:hover{ border-color:var(--nr-sky); transform:translateY(-2px); box-shadow:var(--sh-2); }
.chip.sel{ background:var(--nr-teal); color:#fff; border-color:var(--nr-teal); }
.chip.sel .chip-ico{ color:#fff; }
.chip.sel .chip-sub{ color:rgba(255,255,255,.7); }
.chip-ico{ color:var(--nr-sky); }
.chip-val{ font-family:var(--font-display); font-weight:400; font-size:26px; line-height:1; text-transform:uppercase; }
.chip-lbl{ font:600 15px/1.2 var(--font-body); }
.chip-sub{ font:400 12px/1.3 var(--font-body); color:var(--fg-soft); }

/* round count options (vehicles) */
.round-grid{ display:flex; gap:14px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.round{
  width:74px;height:74px;border-radius:50%;border:2px solid var(--border);
  background:#fff; cursor:pointer; color:var(--nr-teal);
  font-family:var(--font-display); font-weight:400; font-size:26px;
  display:grid;place-items:center; transition:.16s var(--ease);
}
.round:hover{ border-color:var(--nr-sky); transform:translateY(-2px); }
.round.sel{ background:var(--nr-teal); border-color:var(--nr-teal); color:#fff; }

/* ===== Inputs ================================================== */
.field{ margin-top:14px; }
.field label{ display:block; font:600 14px/1 var(--font-body); color:var(--nr-teal); margin-bottom:8px; }
.input, .selectbox select{
  width:100%; border:1.5px solid var(--border); border-radius:12px;
  padding:15px 16px; font:500 16px var(--font-body); color:var(--nr-ink); background:#fff;
}
.input::placeholder{ color:var(--nr-stone-300); }
.input:focus, .selectbox select:focus{ outline:0; border-color:var(--nr-sky); box-shadow:0 0 0 3px var(--nr-sky-mist); }
.input-group{ display:flex; }
.input-group .input{ border-radius:12px 0 0 12px; border-right:0; }
.input-group .unit{
  display:grid; place-items:center; padding:0 20px; background:var(--nr-sky); color:#fff;
  font:700 15px var(--font-body); border-radius:0; min-width:64px;
}
.input-group .selectbox{ position:relative; }
.input-group .selectbox select{
  border-radius:0 12px 12px 0; border-left:0; background:var(--nr-sky-mist); min-width:96px; cursor:pointer; appearance:none; padding-right:36px;
}
.input-group .selectbox::after{ content:''; position:absolute; right:14px; top:50%; width:7px;height:7px; border-right:2px solid var(--nr-teal); border-bottom:2px solid var(--nr-teal); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.divider-or{ display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--nr-sky); font-weight:700; }
.divider-or::before,.divider-or::after{ content:''; flex:1; height:2px; background:var(--nr-sky-soft); border-radius:2px; }
.section-q{ font-family:var(--font-display); font-weight:400; font-size:21px; text-transform:uppercase; color:var(--nr-teal); margin:26px 0 14px; line-height:1.15; }

/* ===== Roof illustration ====================================== */
.roof-illo{
  display:grid;
  place-items:center;
  margin:6px 0 22px;
  padding:10px 0 2px;
}
.roof-illo svg{
  width:min(100%, 320px);
  height:auto;
}
.roof-ridge-svg{ width:min(300px,90vw); height:auto; display:block; }
.ridge-path{ transition: d .3s cubic-bezier(.4,0,.2,1); }

/* ===== Step 2: panel counter ================================== */
.counter{ display:grid; grid-template-columns:58px 1fr 58px; gap:10px; margin-top:8px; }
.counter button{
  height:58px;border-radius:14px;border:1.5px solid var(--border);background:#fff;
  font-size:26px;color:var(--nr-teal);cursor:pointer; display:grid;place-items:center; transition:.15s var(--ease);
}
.counter button:hover:not(:disabled){ border-color:var(--nr-sky); color:var(--nr-sky); }
.counter button:disabled{ opacity:.35; cursor:not-allowed; }
.counter .disp{ height:58px;border-radius:14px;background:var(--nr-teal);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px; }
.counter .disp b{ font-family:var(--font-display); font-weight:400; font-size:28px; }
.counter .disp span{ font:600 12px var(--font-body); color:#9bb8c8; text-transform:uppercase; letter-spacing:.06em; }

/* ===== Results dashboard ====================================== */
.results-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:18px 0 16px;
  align-items:start;
}
.result-map-card,
.result-adjust-card{
  border:1px solid var(--border);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--sh-1);
}
.result-map-card{ padding:18px; }
.result-adjust-card{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  overflow:hidden;
}
.result-map-card .map-wrap{
  aspect-ratio:16/11;
  margin-top:6px;
}
.result-map-chip{
  position:absolute;
  top:14px;
  left:14px;
  z-index:6;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--nr-teal);
  font:700 12px/1 var(--font-body);
  box-shadow:var(--sh-2);
}
.result-map-note{
  margin:12px 0 0;
  font:400 13px/1.55 var(--font-body);
  color:var(--fg-muted);
}
.result-map-note.is-warning{
  color:var(--nr-danger);
  font-weight:600;
}
.result-adjust-row1{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  column-gap:20px;
  row-gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid var(--nr-stone-100);
}
.result-title-block{
  min-width:0;
  max-width:680px;
}
.result-kicker{
  font:700 11px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--nr-sky);
}
.result-config-title{
  margin:8px 0 0;
  font:700 22px/1.15 var(--font-body);
  color:var(--nr-teal);
}
.result-status-pill{
  grid-column:1;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:start;
  min-width:88px;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  background:var(--nr-yellow-mist);
  border:1px solid var(--nr-yellow);
  color:var(--nr-teal);
  font:700 12px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.result-counter{
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:0;
  flex-shrink:0;
  align-self:start;
  max-width:100%;
}
.result-counter-note,
.result-kit-note{
  margin:0;
  font:400 13px/1.55 var(--font-body);
  color:var(--fg-muted);
}
.result-adjust-foot{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:flex-start;
  gap:16px;
  padding-top:12px;
  margin-top:12px;
  border-top:1px solid var(--nr-stone-100);
}
.result-adjust-foot > *{
  min-width:0;
}
.kit-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:0;
}
.kit-card{
  min-width:0;
  border:1.5px solid var(--border);
  border-radius:16px;
  background:#fff;
  color:var(--nr-teal);
  text-align:left;
  padding:15px 15px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
  cursor:pointer;
  transition:.16s var(--ease);
}
.kit-card:hover:not(:disabled){
  border-color:var(--nr-sky);
  box-shadow:var(--sh-2);
  transform:translateY(-2px);
}
.kit-card.sel{
  border-color:var(--nr-teal);
  background:linear-gradient(180deg, #FFFFFF 0%, #F2FBFF 100%);
  box-shadow:var(--sh-2);
}
.kit-card:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.kit-card-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:var(--nr-sky-mist);
  color:var(--nr-sky-deep);
  font:700 10px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.kit-card-kwc{
  font-family:var(--font-display);
  font-size:28px;
  line-height:1;
}
.kit-card-home{
  font:700 14px/1.25 var(--font-body);
}
.kit-card-meta{
  font:500 12px/1.45 var(--font-body);
  color:var(--fg-muted);
}

.res-hero{
  background:var(--grad-teal-sky); border-radius:22px; padding:26px;
  color:#fff; margin-bottom:18px; text-align:center;
}
.res-hero .loc{ font:500 13px/1.4 var(--font-body); color:rgba(255,255,255,.8); display:flex;align-items:center;justify-content:center;gap:6px; margin-bottom:14px; }
.res-hero .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.res-hero .stat .v{ font-family:var(--font-display); font-weight:400; font-size:30px; line-height:1; }
.res-hero .stat .k{ font:600 11px/1.3 var(--font-body); color:rgba(255,255,255,.78); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.res-hero .stat .v small{ font-family:var(--font-body); font-size:14px; font-weight:600; }

.metric{
  display:flex; align-items:center; gap:14px; padding:15px 16px;
  border:1px solid var(--border); border-radius:14px; margin-bottom:10px; background:#fff;
  transition:.16s var(--ease);
}
.metric:hover{ border-color:var(--nr-sky-soft); box-shadow:var(--sh-1); }
.metric .mi{ width:46px;height:46px;border-radius:12px; background:var(--nr-sky-mist); color:var(--nr-sky); display:grid;place-items:center; flex-shrink:0; }
.metric .mk{ font:600 11px/1 var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:4px; }
.metric .mv{ font-family:var(--font-display); font-weight:400; font-size:23px; color:var(--nr-teal); line-height:1; }
.metric .mv small{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--nr-sky); margin-left:4px; }
.metric.hl{ background:var(--nr-yellow-mist); border-color:var(--nr-yellow); }
.metric.hl .mi{ background:var(--nr-yellow); color:var(--nr-teal); }

.savings-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.savings-row .sv{ border:1px solid var(--border); border-radius:14px; padding:14px 10px; text-align:center; }
.savings-row .sv .k{ font:600 11px/1 var(--font-body); text-transform:uppercase; letter-spacing:.05em; color:var(--fg-muted); }
.savings-row .sv .v{ font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--nr-success); margin-top:6px; }

.chart-card{ border:1px solid var(--border); border-radius:16px; padding:18px; margin:14px 0; }
.chart-card .ck{ font:600 11px/1 var(--font-body); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-muted); margin-bottom:14px; }
.chart{ display:grid; grid-template-columns:repeat(12,1fr); align-items:end; gap:5px; height:110px; }
.chart .bar{ background:var(--nr-stone-200); border-radius:4px 4px 0 0; transition:.2s var(--ease); }
.chart .bar.s{ background:var(--nr-sky); }
.chart .bar.m{ background:var(--nr-teal-soft); }
.chart .bar:hover{ filter:brightness(1.06); }
.chart-months{ display:grid; grid-template-columns:repeat(12,1fr); gap:5px; margin-top:8px; font:600 9px/1 var(--font-body); color:var(--fg-soft); text-align:center; }

.callout{
  background:var(--nr-teal); color:#fff; border-radius:16px; padding:20px 22px; margin:16px 0; text-align:center;
}
.callout .big{ font-family:var(--font-display); font-weight:400; font-size:26px; text-transform:uppercase; line-height:1.1; }
.callout .big .y{ color:var(--nr-yellow); }
.callout p{ margin:8px 0 0; font:400 13px/1.5 var(--font-body); color:rgba(255,255,255,.82); }

.eco-row{ display:flex; gap:12px; margin:14px 0; }
.eco-row .eco{ flex:1; border:1px solid var(--border); border-radius:14px; padding:16px; text-align:center; }
.eco-row .eco .v{ font-family:var(--font-display); font-weight:400; font-size:24px; color:var(--nr-success); line-height:1; }
.eco-row .eco .k{ font:500 12px/1.4 var(--font-body); color:var(--fg-muted); margin-top:6px; }

/* lead form */
.lead{ border-top:1px solid var(--nr-stone-100); margin-top:24px; padding-top:24px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1/-1; }
.consent{ display:flex; gap:10px; align-items:flex-start; margin-top:14px; font:400 12.5px/1.5 var(--font-body); color:var(--fg-muted); }
.consent input{ margin-top:3px; }

/* ===== Loading ================================================= */
.loader{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:40px 0; }
.spinner{ width:64px;height:64px;border-radius:50%;border:5px solid var(--nr-stone-100);border-top-color:var(--nr-sky);animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader .lt{ font-family:var(--font-display); font-weight:400; font-size:24px; text-transform:uppercase; color:var(--nr-teal); }
.loader .ls{ font:400 14px var(--font-body); color:var(--fg-muted); }

/* ==========================================================================
   STEP 1 — CONVERSION LANDING PAGE
   ========================================================================== */
body.landing .phases,
body.landing .microbar{ display:none; }
body.landing .stage{ padding:0; display:block; background:var(--nr-white); }
body.landing #card{
  max-width:none; width:100%; background:transparent;
  border-radius:0; box-shadow:none; padding:0; animation:none; overflow:visible;
}
body.landing.is-mobile .frame{ height:auto; min-height:840px; }

.lp{ width:100%; }
.lp section{ animation:lpIn .5s var(--ease) both; }
@keyframes lpIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

.lp-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  max-width:1240px; margin:0 auto; padding:56px 40px 64px;
}
.lp-hero-text .eyebrow{ margin-bottom:18px; }
.lp-hero h1{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(38px,4.4vw,62px); line-height:.98; letter-spacing:-.01em;
  color:var(--nr-teal); margin:0 0 20px; text-wrap:balance;
}
.lp-hero h1 .hl{
  background:linear-gradient(180deg,transparent 56%,var(--nr-yellow) 56% 92%,transparent 92%);
  padding:0 4px;
}
.lp-hero .lp-sub{
  font:400 18px/1.55 var(--font-body); color:var(--fg-muted);
  margin:0 0 28px; max-width:46ch;
}
.lp-hero .lp-sub b{ color:var(--nr-teal); font-weight:600; }

.addr-cta{
  display:flex; align-items:stretch; gap:0; background:#fff;
  border:2px solid var(--nr-teal); border-radius:16px; overflow:hidden;
  box-shadow:var(--sh-3); max-width:560px;
}
.addr-cta:focus-within{
  border-color:var(--nr-sky);
  box-shadow:0 0 0 4px var(--nr-sky-mist), var(--sh-3);
}
.addr-cta .pin{
  display:grid; place-items:center; padding:0 4px 0 18px; color:var(--nr-sky); flex-shrink:0;
}
.addr-cta input{
  flex:1; border:0; outline:0; background:transparent; min-width:0;
  font:500 16px var(--font-body); color:var(--nr-ink); padding:18px 12px;
}
.addr-cta input::placeholder{ color:var(--nr-stone-300); }
.addr-cta button{
  flex-shrink:0; border:0; cursor:pointer; background:var(--nr-sky); color:#fff;
  font:700 15px var(--font-body); padding:0 24px; display:flex; align-items:center; gap:9px;
  transition:.18s var(--ease);
}
.addr-cta button:hover{ background:var(--nr-sky-deep); }
.addr-cta button:disabled{ background:var(--nr-stone-300); cursor:not-allowed; }
.addr-cta button .arrow{ font-size:18px; }
.lp-alert{ max-width:560px; margin-top:14px; }

.cta-trust{
  display:flex; flex-wrap:wrap; gap:18px; margin:16px 2px 0;
  font:600 13.5px var(--font-body); color:var(--nr-teal-soft);
}
.cta-trust span{ display:inline-flex; align-items:center; gap:7px; }
.cta-trust .ck{ color:var(--nr-success); display:grid; place-items:center; }

.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--nr-cream); border:1px solid var(--nr-stone-100); border-radius:999px;
  padding:9px 15px; font:700 12px var(--font-body); color:var(--nr-teal);
  text-transform:uppercase; letter-spacing:.04em;
}
.badge svg{ color:var(--nr-sky); }
.badge.gold{ background:var(--nr-yellow-mist); border-color:var(--nr-yellow-soft); }
.badge.gold svg{ color:var(--nr-yellow-deep); }

.lp-hero-media{ position:relative; aspect-ratio:1/1; max-height:520px; }
.lp-hero-media .panel{
  position:absolute; inset:0; border-radius:28px; overflow:hidden;
  background:var(--grad-teal-sky); box-shadow:var(--sh-3);
}
.lp-hero-media .panel::before{
  content:''; position:absolute; inset:0;
  background:url('../assets/aerial.png') center/cover; opacity:.32; mix-blend-mode:luminosity;
}
.lp-hero-media .panel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(41,67,82,.25) 0%, rgba(41,67,82,.65) 100%);
}
.teaser{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-3deg);
  width:78%; background:#fff; border-radius:20px; box-shadow:var(--sh-3);
  padding:22px 22px 20px; z-index:2;
}
.teaser .tk{ font:700 10px/1 var(--font-body); text-transform:uppercase; letter-spacing:.16em; color:var(--nr-sky); margin-bottom:10px; }
.teaser .tbig{ font-family:var(--font-display); font-weight:400; font-size:40px; line-height:1; color:var(--nr-teal); text-transform:uppercase; }
.teaser .tbig small{ font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--nr-success); }
.teaser .tsub{ font:500 13px var(--font-body); color:var(--fg-muted); margin-top:4px; }
.teaser .tbars{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; align-items:end; height:46px; margin-top:16px; }
.teaser .tbars i{ background:var(--nr-stone-200); border-radius:2px 2px 0 0; display:block; }
.teaser .tbars i.s{ background:var(--nr-sky); }
.float-pill{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:11px 16px; border-radius:999px; font:700 13px var(--font-body);
  box-shadow:var(--sh-2);
}
.float-pill.gold{ background:var(--nr-yellow); color:var(--nr-teal); top:7%; right:-2%; transform:rotate(3deg); }
.float-pill.glass{
  bottom:9%; left:-3%; background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(12px);
}

.lp-band{ background:var(--nr-cream); padding:56px 40px; }
.lp-band.teal{ background:var(--nr-teal); }
.lp-band--soft{ background:linear-gradient(180deg, #F8FBFD 0%, #F2F5F8 100%); }
.lp-inner{ max-width:1100px; margin:0 auto; }
.lp-center{ text-align:center; }
.lp-center .eyebrow{ justify-content:center; }
.lp-h2{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(28px,3vw,40px); line-height:1.04; color:var(--nr-teal);
  margin:12px 0 0; letter-spacing:-.01em;
}
.lp-band.teal .lp-h2{ color:#fff; }
.steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.s3{
  background:#fff; border:1px solid var(--nr-stone-100); border-radius:20px;
  padding:30px 26px; text-align:left; position:relative;
}
.s3 .s3n{
  font-family:var(--font-display); font-weight:400; font-size:20px;
  width:42px;height:42px;border-radius:12px; background:var(--nr-sky-mist); color:var(--nr-sky);
  display:grid;place-items:center; margin-bottom:18px;
}
.s3 .s3i{ position:absolute; top:28px; right:26px; color:var(--nr-stone-200); }
.s3 h3{ font:700 18px var(--font-body); color:var(--nr-teal); margin:0 0 8px; }
.s3 p{ font:400 14.5px/1.5 var(--font-body); color:var(--fg-muted); margin:0; }

.how-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
  margin-top:38px;
}
.how-card{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--nr-stone-100);
  background:#fff;
  box-shadow:var(--sh-1);
  text-align:left;
}
.how-media{
  aspect-ratio: 16 / 11;
  background:#DCE8F2;
}
.how-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.how-body{
  padding:20px 20px 22px;
}
.how-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--nr-sky-mist);
  color:var(--nr-sky);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1;
}
.how-body h3{
  margin:14px 0 0;
  font:800 20px/1.2 var(--font-body);
  color:var(--nr-teal);
}
.how-body p{
  margin:10px 0 0;
  font:400 14.5px/1.6 var(--font-body);
  color:var(--fg-muted);
}

.stats4{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat4{ text-align:center; color:#fff; }
.stat4 .v{ font-family:var(--font-display); font-weight:400; font-size:clamp(34px,4vw,52px); line-height:1; }
.stat4 .v .y{ color:var(--nr-yellow); }
.stat4 .k{ font:600 13px/1.4 var(--font-body); color:rgba(255,255,255,.75); margin-top:8px; }

.lp-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin-top:38px;
}
.lp-benefit-card{
  padding:28px 24px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--nr-stone-100);
  box-shadow:var(--sh-1);
  text-align:left;
}
.lp-benefit-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--nr-sky-mist);
  color:var(--nr-sky-deep);
}
.lp-benefit-card h3{
  margin:18px 0 0;
  font:700 18px/1.2 var(--font-body);
  color:var(--nr-teal);
}
.lp-benefit-card p{
  margin:10px 0 0;
  font:400 14.5px/1.6 var(--font-body);
  color:var(--fg-muted);
}

.lp-info-box{
  padding:34px 36px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--nr-stone-100);
  box-shadow:var(--sh-1);
}
.lp-info-intro{
  margin:20px 0 0;
  max-width:760px;
  font:500 16px/1.65 var(--font-body);
  color:var(--nr-teal-soft);
}
.lp-info-copy{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.lp-info-copy p{
  margin:0;
  font:400 15px/1.75 var(--font-body);
  color:var(--fg-muted);
}

.lp-offers-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  margin-top:34px;
}
.lp-offer-card{
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:26px;
  border:1px solid var(--nr-stone-100);
  background:#F6F9FB;
  box-shadow:var(--sh-1);
  transition:.2s var(--ease);
}
.lp-offer-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh-2);
}
.lp-offer-media{
  position:absolute;
  inset:0;
}
.lp-offer-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.lp-offer-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,45,56,.08) 0%, rgba(26,45,56,.70) 58%, rgba(26,45,56,.96) 100%);
}
.lp-offer-content{
  position:absolute;
  inset:auto 0 0 0;
  z-index:1;
  padding:24px;
}
.lp-offer-content h3{
  margin:0;
  color:#fff;
  font:800 24px/1.15 var(--font-body);
  text-wrap:balance;
}
.lp-offer-content p{
  margin:10px 0 0;
  color:rgba(255,255,255,.9);
  font:400 14px/1.55 var(--font-body);
}
.lp-offer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.lp-offer-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  cursor:pointer;
  border-radius:14px;
  padding:11px 16px;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font:800 13px/1 var(--font-body);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  transition:.16s var(--ease);
}
.lp-offer-btn:hover{
  background:rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
}
.lp-offer-btn--ghost{
  background:rgba(255,255,255,.08);
}

.lp-hero-promo{
  border-radius:28px; overflow:hidden; box-shadow:var(--sh-card);
  align-self:stretch; min-height:340px;
}
.lp-hero-promo img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:28px;
}
.lp-footer{
  text-align:center; padding:22px 40px 32px;
  font:400 12px/1.5 var(--font-body); color:var(--fg-soft);
  border-top:1px solid var(--nr-stone-100); background:var(--nr-white);
}

.lp-final-cta{
  padding:56px 40px 18px;
  background:var(--nr-white);
}
.lp-final-cta-inner{
  max-width:980px;
  margin:0 auto;
  padding:34px 36px;
  border-radius:30px;
  background:linear-gradient(135deg, var(--nr-teal) 0%, var(--nr-sky) 100%);
  color:#fff;
  text-align:center;
  box-shadow:var(--sh-3);
}
.lp-final-cta-inner .eyebrow{
  color:#fff;
  justify-content:center;
}
.lp-final-cta-inner .eyebrow::before{
  background:var(--nr-yellow);
}
.lp-final-cta-inner .lp-h2{
  color:#fff;
}
.lp-final-cta-inner p{
  max-width:700px;
  margin:16px auto 0;
  font:400 16px/1.65 var(--font-body);
  color:rgba(255,255,255,.82);
}
.lp-final-btn{
  margin-top:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:0 24px;
  border-radius:16px;
  border:0;
  cursor:pointer;
  background:var(--nr-yellow);
  color:var(--nr-teal);
  font:800 15px/1 var(--font-body);
  box-shadow:var(--sh-2);
  transition:.16s var(--ease);
}
.lp-final-btn:hover{
  transform:translateY(-1px);
  background:var(--nr-yellow-deep);
}

body.landing.is-mobile .lp-hero,
.lp.narrow .lp-hero{ grid-template-columns:1fr; gap:30px; padding:28px 20px 36px; }
body.landing.is-mobile .lp-hero-promo,
.lp.narrow .lp-hero-promo{ min-height:240px; }
body.landing.is-mobile .teaser,
.lp.narrow .teaser{ width:80%; padding:18px 18px 16px; }
body.landing.is-mobile .teaser .tbig,
.lp.narrow .teaser .tbig{ font-size:34px; }
body.landing.is-mobile .float-pill.glass,
.lp.narrow .float-pill.glass{ bottom:5%; left:4%; }
body.landing.is-mobile .float-pill.gold,
.lp.narrow .float-pill.gold{ top:4%; right:3%; }
body.landing.is-mobile .addr-cta,
.lp.narrow .addr-cta{ flex-direction:column; border-radius:16px; }
body.landing.is-mobile .addr-cta .pin,
.lp.narrow .addr-cta .pin{ display:none; }
body.landing.is-mobile .addr-cta input,
.lp.narrow .addr-cta input{ padding:16px 18px; border-bottom:1px solid var(--nr-stone-100); }
body.landing.is-mobile .addr-cta button,
.lp.narrow .addr-cta button{ padding:15px; justify-content:center; }
body.landing.is-mobile .steps3,
.lp.narrow .steps3{ grid-template-columns:1fr; gap:14px; }
body.landing.is-mobile .how-grid,
.lp.narrow .how-grid{ grid-template-columns:1fr; gap:14px; }
body.landing.is-mobile .lp-benefits-grid,
.lp.narrow .lp-benefits-grid{ grid-template-columns:1fr; gap:14px; }
body.landing.is-mobile .lp-offers-grid,
.lp.narrow .lp-offers-grid{ grid-template-columns:1fr; gap:14px; }
body.landing.is-mobile .stats4,
.lp.narrow .stats4{ grid-template-columns:1fr 1fr; gap:24px 16px; }
body.landing.is-mobile .lp-band,
.lp.narrow .lp-band{ padding:40px 20px; }
body.landing.is-mobile .lp-final-cta,
.lp.narrow .lp-final-cta{ padding:40px 20px 12px; }
body.landing.is-mobile .lp-info-box,
.lp.narrow .lp-info-box{ padding:26px 22px; }
body.landing.is-mobile .lp-final-cta-inner,
.lp.narrow .lp-final-cta-inner{ padding:28px 22px; }
body.landing.is-mobile .lp-footer,
.lp.narrow .lp-footer{ padding:18px 20px 28px; }

/* ===== Responsive (mobile) ===================================== */
.frame.mobilewidth .topbar,
body.is-mobile .topbar{ padding:12px 16px; }
.frame.mobilewidth .topbar-inner,
body.is-mobile .topbar-inner{ gap:10px; }
.frame.mobilewidth .topbar .logo,
body.is-mobile .topbar .logo{ height:30px; }
.frame.mobilewidth .help-btn span:not(.q),
body.is-mobile .help-btn span:not(.q){ display:none; }
.frame.mobilewidth .help-btn,
body.is-mobile .help-btn{ padding:8px; }
.frame.mobilewidth .retour-btn,
body.is-mobile .retour-btn{ font-size:0; padding:8px 10px; }
.frame.mobilewidth .retour-btn::before,
body.is-mobile .retour-btn::before{ content:'←'; font-size:14px; }

.frame.mobilewidth .phases,
body.is-mobile .phases{ padding:14px 14px 18px; }
.frame.mobilewidth .phase .dot,
body.is-mobile .phase .dot{ width:32px;height:32px;font-size:14px; }
.frame.mobilewidth .phase .plabel,
body.is-mobile .phase .plabel{ font-size:11px; }
.frame.mobilewidth .phase-line,
body.is-mobile .phase-line{ max-width:40px; margin-top:15px; }

.frame.mobilewidth .stage,
body.is-mobile .stage{ padding:18px 14px 32px; }
.frame.mobilewidth .card,
body.is-mobile .card{ padding:26px 20px 24px; border-radius:22px; }
.frame.mobilewidth .card--landing,
body.is-mobile .card--landing{ padding:22px 16px 20px; }
.frame.mobilewidth .card h1,
body.is-mobile .card h1{ font-size:26px; }
.frame.mobilewidth .card .sub,
body.is-mobile .card .sub{ font-size:15px; }
.frame.mobilewidth .landing-hero,
body.is-mobile .landing-hero{ grid-template-columns:1fr; gap:16px; }
.frame.mobilewidth .landing-copy h1,
body.is-mobile .landing-copy h1{ font-size:32px; }
.frame.mobilewidth .landing-stat-grid,
body.is-mobile .landing-stat-grid{ grid-template-columns:1fr; }
.frame.mobilewidth .landing-mini-steps,
body.is-mobile .landing-mini-steps{ grid-template-columns:1fr; }
.frame.mobilewidth .landing-proof-row,
body.is-mobile .landing-proof-row{ flex-direction:column; }
.frame.mobilewidth .landing-benefit,
body.is-mobile .landing-benefit{ grid-template-columns:48px minmax(0, 1fr); }
.frame.mobilewidth .landing-benefit-icon,
body.is-mobile .landing-benefit-icon{ width:48px; height:48px; }
.frame.mobilewidth .opt-grid.cols-4,
body.is-mobile .opt-grid.cols-4{ grid-template-columns:repeat(2,1fr); }
.frame.mobilewidth .opt-grid.cols-3,
body.is-mobile .opt-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
.frame.mobilewidth .form-grid,
body.is-mobile .form-grid{ grid-template-columns:1fr; }
.frame.mobilewidth .res-hero .stat .v,
body.is-mobile .res-hero .stat .v{ font-size:24px; }
.frame.mobilewidth .results-layout,
body.is-mobile .results-layout{ grid-template-columns:1fr; }
.frame.mobilewidth .kit-grid,
body.is-mobile .kit-grid{ grid-template-columns:repeat(2,1fr); }
.frame.mobilewidth .result-adjust-row1,
body.is-mobile .result-adjust-row1{ grid-template-columns:1fr; }
.frame.mobilewidth .result-counter,
body.is-mobile .result-counter{ grid-column:1; grid-row:auto; }
.frame.mobilewidth .result-adjust-foot,
body.is-mobile .result-adjust-foot{ grid-template-columns:1fr; }
.frame.mobilewidth .map-hint,
body.is-mobile .map-hint{ display:none; }

/* genuine narrow viewport (non-toggled) */
@media (max-width:680px){
  .topbar{ padding:12px 16px; }
  .topbar .logo{ height:30px; }
  .help-btn span:not(.q){ display:none; }
  .help-btn{ padding:8px; }
  .retour-btn{ font-size:0; padding:8px 10px; }
  .retour-btn::before{ content:'←'; font-size:14px; }
  .phases{ padding:14px 14px 18px; }
  .phase .dot{ width:32px;height:32px;font-size:14px; }
  .phase .plabel{ font-size:11px; }
  .phase-line{ max-width:40px; margin-top:15px; }
  .stage{ padding:18px 14px 32px; }
  .card{ padding:26px 20px 24px; border-radius:22px; }
  .card--landing{ padding:22px 16px 20px; }
  .card h1{ font-size:26px; }
  .landing-hero{ grid-template-columns:1fr; gap:16px; }
  .landing-copy h1{ font-size:32px; }
  .landing-stat-grid{ grid-template-columns:1fr; }
  .landing-mini-steps{ grid-template-columns:1fr; }
  .landing-proof-row{ flex-direction:column; }
  .landing-benefit{ grid-template-columns:48px minmax(0, 1fr); }
  .landing-benefit-icon{ width:48px; height:48px; }
  .opt-grid.cols-4,.opt-grid.cols-3{ grid-template-columns:repeat(2,1fr); }
  .form-grid{ grid-template-columns:1fr; }
  .step-layout{ grid-template-columns:1fr; }
  .step-sidecard{ order:2; }
  .step-mapcol{ order:1; }
  .map-style-switch button{ padding:9px 12px; }
  .map-hint{ display:none; }
  .tutorial-modal{ padding:16px; }
  .tutorial-card{ width:min(520px, calc(100vw - 32px)); padding:18px 18px 18px; }
  .results-layout{ grid-template-columns:1fr; }
  .kit-grid{ grid-template-columns:repeat(2,1fr); }
  .result-adjust-row1{ grid-template-columns:1fr; }
  .result-counter{ grid-column:1; grid-row:auto; }
  .result-adjust-foot{ grid-template-columns:1fr; }

  .lp-hero{ grid-template-columns:1fr; gap:30px; padding:26px 18px 34px; }
  .lp-hero-media{ order:-1; max-height:330px; aspect-ratio:4/3; }
  .teaser{ width:80%; padding:18px 18px 16px; }
  .teaser .tbig{ font-size:34px; }
  .float-pill.glass{ bottom:5%; left:4%; }
  .float-pill.gold{ top:4%; right:3%; }
  .addr-cta{ flex-direction:column; }
  .addr-cta .pin{ display:none; }
  .addr-cta input{ padding:16px 18px; border-bottom:1px solid var(--nr-stone-100); }
  .addr-cta button{ padding:15px; justify-content:center; }
  .steps3{ grid-template-columns:1fr; gap:14px; }
  .how-grid{ grid-template-columns:1fr; gap:14px; }
  .lp-benefits-grid{ grid-template-columns:1fr; gap:14px; }
  .lp-offers-grid{ grid-template-columns:1fr; gap:14px; }
  .stats4{ grid-template-columns:1fr 1fr; gap:24px 16px; }
  .lp-final-cta{ padding:38px 18px 10px; }
  .lp-info-box{ padding:26px 22px; }
  .lp-final-cta-inner{ padding:28px 22px; }
  .aides-card{ grid-template-columns:1fr; padding:30px 22px; gap:20px; }
  .lp-band,.lp-aides{ padding:38px 18px; }
}