/* ═══════════════════════════════════════════════════════════════
   EKIA MIRROR · Modo Web de la identidad v5.1 "Antes del amanecer"
   Secuencia del amanecer: noche → lila → oro → ámbar → naranja →
   coral → magenta → lima. El ámbar es el sol y el acento principal.
   Magenta y lima juntos no pasan del 3 % de la superficie.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --noche:        #0C0A1B;
  --noche-azul:   #14112E;
  --noche-alta:   #1D1940;
  --lila-hondo:   #3A2F63;
  --lila:         #9A8BD8;
  --oro:          #FFC85C;
  --ambar:        #F5941E;
  --naranja:      #FF7034;
  --coral:        #FF5A5F;
  --magenta:      #D9338C;
  --lima:         #B6E24A;
  --crema:        #FAF5EC;
  --crema-suave:  #D9D2E4;
  --tinta-suave:  #9C93B8;
  --linea:        rgba(154,139,216,.22);
  --linea-fuerte: rgba(154,139,216,.42);

  --amanecer: linear-gradient(135deg, var(--oro) 0%, var(--ambar) 45%, var(--naranja) 100%);

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;

  --sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:'Playfair Display', Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--noche);
  color:var(--crema);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* El sol antes del amanecer: se queda al fondo, muy tenue. */
.sun{
  position:fixed; inset:auto 0 auto 50%;
  top:-38vh; transform:translateX(-50%);
  width:min(1200px,140vw); aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 62%, rgba(245,148,30,.16) 0%, rgba(245,148,30,.06) 32%, transparent 62%),
    radial-gradient(circle at 50% 78%, rgba(154,139,216,.13) 0%, transparent 58%);
  pointer-events:none; z-index:0;
}

/* ── Estructura de pasos ────────────────────────────────────── */
.step{ display:none; position:relative; z-index:1; padding:64px 20px 96px; }
.step--active{ display:block; animation:rise .55s ease both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }

.wrap{ max-width:1060px; margin:0 auto; }
.wrap--narrow{ max-width:720px; }
.center{ text-align:center; }

/* ── Tipografía ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lila); margin:0 0 14px;
}
.display{
  font-size:clamp(34px,5.6vw,58px); line-height:1.05; font-weight:800;
  letter-spacing:-.025em; margin:0 0 22px; color:var(--crema);
  text-wrap:balance;
}
.h1{ font-size:clamp(27px,3.8vw,40px); line-height:1.14; font-weight:700; letter-spacing:-.02em; margin:0 0 16px; text-wrap:balance; }
.h2{ font-size:clamp(21px,2.6vw,27px); line-height:1.24; font-weight:600; margin:0 0 12px; }
.h3{ font-size:19px; font-weight:600; margin:0 0 8px; }
.lede{ font-size:clamp(16px,1.9vw,19px); color:var(--crema-suave); margin:0 0 32px; max-width:62ch; }
.body{ color:var(--crema-suave); margin:0 0 12px; }
.micro{ font-size:13.5px; color:var(--tinta-suave); margin:10px 0 0; line-height:1.5; }
.mono{ font-family:var(--mono); font-size:12.5px; color:var(--tinta-suave); }
.opt{ color:var(--tinta-suave); font-weight:400; }

/* ── Botones ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:16px; font-weight:600;
  padding:14px 28px; border-radius:99px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn--primary{ background:var(--amanecer); color:#231404; box-shadow:0 8px 30px -12px rgba(245,148,30,.85); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 38px -12px rgba(245,148,30,.95); }
.btn--ghost{ background:transparent; color:var(--crema); border-color:var(--linea-fuerte); }
.btn--ghost:hover{ border-color:var(--lila); background:rgba(154,139,216,.08); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ── Tarjetas ───────────────────────────────────────────────── */
.card{
  background:linear-gradient(180deg, rgba(29,25,64,.72) 0%, rgba(20,17,46,.72) 100%);
  border:1px solid var(--linea);
  border-radius:var(--r-l);
  padding:26px;
  margin:0 0 20px;
  backdrop-filter:blur(6px);
}

/* ── Formularios ────────────────────────────────────────────── */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:28px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:13.5px; font-weight:500; color:var(--crema-suave); letter-spacing:.01em; }
.field input[type=text], .field input[type=email], .field input[type=tel]{
  background:rgba(12,10,27,.65); border:1px solid var(--linea-fuerte);
  border-radius:var(--r-s); color:var(--crema);
  font-family:var(--sans); font-size:16.5px; padding:13px 15px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{ color:#6E6690; }
.field input:focus{ outline:none; border-color:var(--ambar); box-shadow:0 0 0 3px rgba(245,148,30,.16); }
.form-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.field-error{ color:var(--coral); font-size:13.5px; margin:2px 0 0; }

.consent{ gap:12px; border-top:1px solid var(--linea); padding-top:18px; }
.check{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--crema-suave); cursor:pointer; line-height:1.45; }
.check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--ambar); flex:0 0 auto; }

/* ── Escaneo ────────────────────────────────────────────────── */
.scan-orb{ position:relative; width:96px; height:96px; margin:20px auto 30px; }
.scan-orb span{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--ambar); opacity:0; animation:pulse 2.4s ease-out infinite;
}
.scan-orb span:nth-child(2){ animation-delay:.8s; border-color:var(--naranja); }
.scan-orb span:nth-child(3){ animation-delay:1.6s; border-color:var(--lila); }
@keyframes pulse{ 0%{ transform:scale(.35); opacity:.9 } 100%{ transform:scale(1); opacity:0 } }

.scan-steps{ list-style:none; padding:0; margin:24px auto 8px; max-width:400px; text-align:left; }
.scan-steps li{
  font-size:15px; color:var(--tinta-suave); padding:7px 0 7px 30px; position:relative; opacity:.35;
  transition:opacity .4s ease, color .4s ease;
}
.scan-steps li::before{
  content:''; position:absolute; left:6px; top:15px; width:8px; height:8px;
  border-radius:50%; background:var(--lila-hondo); transition:background .4s ease;
}
.scan-steps li.on{ opacity:1; color:var(--crema); }
.scan-steps li.on::before{ background:var(--ambar); box-shadow:0 0 12px var(--ambar); }

/* ── Fotografía exterior ────────────────────────────────────── */
.sources{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 26px; }
.source{
  display:flex; align-items:center; gap:9px; font-size:13.5px;
  border:1px solid var(--linea); border-radius:99px; padding:7px 15px 7px 12px;
  color:var(--crema-suave); background:rgba(20,17,46,.5);
}
.source .dot{ width:8px; height:8px; border-radius:50%; background:var(--lila-hondo); flex:0 0 auto; }
.source.available .dot{ background:var(--lima); box-shadow:0 0 9px rgba(182,226,74,.7); }
.source.insufficient .dot{ background:var(--oro); }
.source.unavailable .dot{ background:#453D6B; }
.source.error .dot{ background:var(--coral); }
.source small{ color:var(--tinta-suave); font-size:12px; }

.obs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:26px; }
.obs{
  border:1px solid var(--linea); border-radius:var(--r-m); padding:16px 18px;
  background:rgba(20,17,46,.45);
}
.obs .tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lila); display:block; margin-bottom:7px;
}
.obs p{ margin:0; font-size:15px; color:var(--crema); line-height:1.5; }
.obs .read{ margin-top:7px; font-size:13.5px; color:var(--tinta-suave); }

.card--tech .issues{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:9px; }
.card--tech .issues li{ font-size:14.5px; color:var(--crema-suave); padding-left:20px; position:relative; }
.card--tech .issues li::before{ content:''; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--coral); }

.bridge{
  margin-top:40px; padding:32px; border-radius:var(--r-l);
  background:linear-gradient(135deg, rgba(58,47,99,.55), rgba(20,17,46,.5));
  border:1px solid var(--linea-fuerte); text-align:center;
}
.bridge-title{ font-size:clamp(19px,2.4vw,25px); font-weight:600; margin:0 0 8px; }
.bridge-sub{ color:var(--crema-suave); margin:0 0 22px; }

/* ── Preguntas ──────────────────────────────────────────────── */
.progress{ height:3px; background:rgba(154,139,216,.16); border-radius:99px; margin-bottom:26px; overflow:hidden; }
.progress-bar{ height:100%; width:0; background:var(--amanecer); border-radius:99px; transition:width .45s cubic-bezier(.4,0,.2,1); }

.q{ animation:rise .35s ease both; }
.q-label{ font-size:clamp(20px,2.8vw,28px); font-weight:600; line-height:1.24; margin:0 0 8px; letter-spacing:-.015em; }
.q-help{ color:var(--tinta-suave); font-size:14.5px; margin:0 0 22px; }
.options{ display:grid; gap:11px; margin-bottom:12px; }
.opt-btn{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  background:rgba(20,17,46,.55); border:1px solid var(--linea);
  border-radius:var(--r-m); padding:15px 18px; color:var(--crema);
  font-family:var(--sans); font-size:16px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.opt-btn:hover{ border-color:var(--linea-fuerte); transform:translateX(2px); }
.opt-btn .mark{
  width:19px; height:19px; border-radius:50%; border:1.5px solid var(--linea-fuerte);
  flex:0 0 auto; position:relative; transition:border-color .15s ease;
}
.opt-btn.multi .mark{ border-radius:5px; }
.opt-btn[aria-pressed="true"]{ border-color:var(--ambar); background:rgba(245,148,30,.11); }
.opt-btn[aria-pressed="true"] .mark{ border-color:var(--ambar); background:var(--ambar); }
.opt-btn[aria-pressed="true"] .mark::after{
  content:''; position:absolute; inset:4px; border-radius:inherit; background:var(--noche);
}
.q-extra{ margin-top:18px; }
.q-extra label{ display:block; font-size:14px; color:var(--crema-suave); margin-bottom:7px; }
.q-extra input{
  width:100%; background:rgba(12,10,27,.65); border:1px solid var(--linea-fuerte);
  border-radius:var(--r-s); color:var(--crema); font-family:var(--sans); font-size:16px; padding:12px 15px;
}
.q-extra input:focus{ outline:none; border-color:var(--ambar); }
.q-nav{ display:flex; gap:12px; align-items:center; margin-top:26px; }
.q-optional-note{ font-size:13px; color:var(--tinta-suave); margin-top:14px; }

/* ── Resultados ─────────────────────────────────────────────── */
.disclaimer{
  font-size:14.5px; color:var(--crema-suave); border-left:2px solid var(--lila);
  padding-left:16px; margin:0 0 34px; max-width:64ch;
}
.areas{ display:grid; gap:16px; margin-bottom:34px; }
.area{
  border:1px solid var(--linea); border-radius:var(--r-l); padding:24px 26px;
  background:rgba(20,17,46,.45); position:relative; overflow:hidden;
}
.area.primary{ border-color:rgba(245,148,30,.5); background:linear-gradient(135deg, rgba(245,148,30,.10), rgba(20,17,46,.6)); padding-top:44px; }
.area-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.area-title{ font-size:clamp(18px,2.2vw,23px); font-weight:600; margin:0 0 4px; letter-spacing:-.015em; }
.area-related{ font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--lila); }
.area-score{ font-size:clamp(34px,5vw,46px); font-weight:800; line-height:1; letter-spacing:-.03em; }
.area-score small{ font-size:14px; font-weight:400; color:var(--tinta-suave); margin-left:3px; }
.area-track{ height:6px; border-radius:99px; background:rgba(154,139,216,.16); margin:18px 0 12px; overflow:hidden; }
.area-fill{ height:100%; width:0; border-radius:99px; transition:width .9s cubic-bezier(.4,0,.2,1); }
.area-meta{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:14px; }
.area-band{ font-weight:600; }
.area-conf{ color:var(--tinta-suave); font-size:13.5px; }
.area-toggle{
  background:none; border:0; color:var(--lila); font-family:var(--sans); font-size:13.5px;
  cursor:pointer; padding:0; margin-top:14px; text-decoration:underline; text-underline-offset:3px;
}
.area-detail{ margin-top:16px; border-top:1px solid var(--linea); padding-top:16px; display:grid; gap:11px; }
.area-detail .row{ display:grid; grid-template-columns:1fr auto; gap:6px 16px; font-size:14px; }
.area-detail .row b{ font-weight:500; }
.area-detail .row .pts{ font-family:var(--mono); font-size:12.5px; color:var(--tinta-suave); white-space:nowrap; }
.area-detail .row .ev{ grid-column:1 / -1; font-size:13px; color:var(--tinta-suave); border-left:2px solid var(--linea); padding-left:11px; }
.badge{
  position:absolute; top:0; left:0; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; background:var(--amanecer); color:#231404;
  padding:6px 16px; border-radius:0 0 12px 0; font-weight:700;
}

.reco{
  border-radius:var(--r-l); padding:32px; margin-bottom:34px;
  background:linear-gradient(135deg, rgba(58,47,99,.6), rgba(20,17,46,.55));
  border:1px solid var(--linea-fuerte);
}
.reco h3{ font-size:clamp(22px,3vw,30px); font-weight:700; margin:6px 0 16px; letter-spacing:-.02em; }
.reco .block{ margin-top:22px; }
.reco .block .eyebrow{ margin-bottom:7px; }
.reco .system{
  margin-top:24px; padding:18px 20px; border-radius:var(--r-m);
  background:rgba(217,51,140,.10); border:1px solid rgba(217,51,140,.32);
  font-size:15px; color:var(--crema);
}
.reco .conf{ margin-top:22px; font-size:13.5px; color:var(--tinta-suave); }

/* ── Microdemos ─────────────────────────────────────────────── */
.demo{ border:1px solid var(--linea-fuerte); border-radius:var(--r-l); padding:28px; margin-bottom:34px; background:rgba(20,17,46,.5); }
.demo-title{ font-size:clamp(20px,2.5vw,26px); font-weight:600; margin:6px 0 20px; letter-spacing:-.015em; }

.compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.compare-col{ border:1px solid var(--linea); border-radius:var(--r-m); padding:20px; background:rgba(12,10,27,.45); }
.compare-col.after{ border-color:rgba(245,148,30,.45); background:linear-gradient(160deg, rgba(245,148,30,.10), rgba(12,10,27,.45)); }
.compare-col .eyebrow{ margin-bottom:12px; }
.compare-col .headline{ font-size:20px; font-weight:600; line-height:1.3; margin:0 0 8px; }
.compare-col .sub{ font-size:15px; color:var(--crema-suave); margin:0; }
.compare-found{ display:grid; gap:9px; margin-top:14px; }
.compare-found div{ font-size:13.5px; color:var(--tinta-suave); }
.compare-found b{ color:var(--crema-suave); font-weight:500; }

.flow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.flow-col{ border:1px solid var(--linea); border-radius:var(--r-m); padding:20px; background:rgba(12,10,27,.45); }
.flow-col.after{ border-color:rgba(182,226,74,.4); }
.flow-steps{ list-style:none; padding:0; margin:14px 0 0; }
.flow-steps li{
  position:relative; padding:11px 0 11px 26px; font-size:15px; color:var(--crema-suave);
  border-left:1.5px solid var(--linea-fuerte); margin-left:6px;
}
.flow-steps li::before{
  content:''; position:absolute; left:-5px; top:17px; width:8px; height:8px; border-radius:50%;
  background:var(--lila);
}
.flow-steps li.manual{ color:var(--crema); }
.flow-steps li.manual::before{ background:var(--coral); box-shadow:0 0 10px rgba(255,90,95,.6); }
.flow-col.after .flow-steps li::before{ background:var(--lima); }
.flow-steps li:last-child{ border-left-color:transparent; }
.flow-note{ margin-top:18px; font-size:14px; color:var(--crema-suave); }
.flow-note b{ color:var(--coral); }

.chat{ border:1px solid var(--linea); border-radius:var(--r-m); background:rgba(12,10,27,.55); overflow:hidden; }
.chat-head{ padding:14px 18px; border-bottom:1px solid var(--linea); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chat-head .who{ font-weight:600; font-size:15px; }
.chat-head .demo-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#231404; background:var(--oro); padding:3px 10px; border-radius:99px; font-weight:700; }
.chat-log{ padding:18px; display:grid; gap:12px; min-height:120px; max-height:340px; overflow-y:auto; }
.msg{ max-width:82%; padding:11px 15px; border-radius:14px; font-size:15px; line-height:1.5; }
.msg.me{ justify-self:end; background:rgba(154,139,216,.18); border:1px solid var(--linea); }
.msg.bot{ justify-self:start; background:rgba(245,148,30,.10); border:1px solid rgba(245,148,30,.28); }
.msg.bot.ungrounded{ background:rgba(20,17,46,.7); border-color:var(--linea); color:var(--tinta-suave); }
.msg .src{ display:block; margin-top:6px; font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-suave); }
.chat-suggest{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.chat-suggest button{
  font-family:var(--sans); font-size:13.5px; color:var(--crema-suave); cursor:pointer;
  background:rgba(20,17,46,.7); border:1px solid var(--linea); border-radius:99px; padding:7px 14px;
}
.chat-suggest button:hover{ border-color:var(--ambar); color:var(--crema); }
.chat-form{ display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--linea); }
.chat-form input{
  flex:1; background:rgba(12,10,27,.7); border:1px solid var(--linea-fuerte); border-radius:99px;
  color:var(--crema); font-family:var(--sans); font-size:15px; padding:11px 17px;
}
.chat-form input:focus{ outline:none; border-color:var(--ambar); }
.chat-form button{ border-radius:99px; padding:11px 20px; font-size:15px; }

.demo-foot{ margin-top:18px; font-size:13.5px; color:var(--tinta-suave); border-left:2px solid var(--lila); padding-left:14px; }
.demo-label{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--oro); border:1px solid rgba(255,200,92,.4);
  border-radius:99px; padding:3px 11px;
}

/* ── Oferta ─────────────────────────────────────────────────── */
.cta-block{ text-align:center; padding:36px 0 8px; }
.offer-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:18px; margin-bottom:30px; }
.card--offer{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.card--offer-main{ border-color:rgba(245,148,30,.45); background:linear-gradient(150deg, rgba(245,148,30,.10), rgba(20,17,46,.7)); }
.offer-kicker{ font-size:19px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em; }
.offer-name{ font-family:var(--mono); font-size:13px; color:var(--lila); margin:0 0 12px; letter-spacing:.04em; }
.offer-name strong{ color:var(--oro); }
.card--offer .btn{ margin-top:14px; }
.card--pdf{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; border-color:rgba(182,226,74,.35); }
.card--pdf .btn{ margin-top:14px; }

.closing{
  font-family:var(--serif); font-style:italic; font-size:clamp(20px,2.6vw,27px);
  color:var(--oro); text-align:center; margin:44px auto 0; max-width:22ch; line-height:1.35;
}

/* ── Bloque EKIA (hero) ─────────────────────────────────────── */
.ekia-block{
  margin-top:56px; padding-top:40px; border-top:1px solid var(--linea);
}
.claim{
  font-size:clamp(20px,2.6vw,26px); font-weight:600; line-height:1.3;
  letter-spacing:-.015em; margin:0 0 26px; max-width:24ch;
  background:var(--amanecer); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--oro);
}
.journey{ list-style:none; padding:0 0 0 22px; margin:0 0 26px; border-left:1.5px solid var(--linea-fuerte); }
.journey li{
  position:relative; padding:5px 0; color:var(--crema-suave); font-size:16.5px;
}
.journey li::before{
  content:''; position:absolute; left:-27px; top:15px; width:7px; height:7px;
  border-radius:50%; background:var(--lila-hondo);
}
.journey li:last-child::before{ background:var(--ambar); box-shadow:0 0 10px var(--ambar); }
.tech-last{
  font-family:var(--mono); font-size:14px; color:var(--oro); margin-top:20px;
  letter-spacing:.01em;
}

.foot{
  position:relative; z-index:1; border-top:1px solid var(--linea);
  padding:32px 20px 48px; text-align:center; color:var(--tinta-suave); font-size:14px;
}
.foot strong{ color:var(--crema-suave); }
.foot .mono{ font-size:11px; opacity:.6; margin-top:10px; }

/* ── Modo incrustado en WordPress ───────────────────────────── */
/* Dentro del iframe la altura la marca el contenido, no la ventana,
   y los márgenes exteriores los pone Elementor. */
.is-embedded body{ overflow-x:hidden; }
.is-embedded .step{ padding-top:40px; padding-bottom:56px; }
/* El halo del amanecer se queda `fixed` a propósito: si se hace
   `absolute`, su altura entra en el scrollHeight del documento y el
   iframe se queda 350 px más alto de lo que ocupa el contenido. */

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:760px){
  body{ font-size:16px; }
  .step{ padding:44px 18px 72px; }
  .form{ grid-template-columns:1fr; }
  .compare, .flow, .offer-grid{ grid-template-columns:1fr; }
  .area-head{ flex-direction:row; }
  .obs-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .q-nav .btn{ width:auto; }
  .form-actions .btn{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}