:root{
  --demo-ink:#101827;
  --demo-muted:#5d6877;
  --demo-line:#dbe2ea;
  --demo-soft:#f4f7fa;
  --demo-panel:#ffffff;
  --demo-primary:#17243f;
  --demo-primary-strong:#0d1527;
  --demo-accent:#635bff;
  --demo-accent-soft:#eeedff;
  --demo-success:#176b4c;
  --demo-success-soft:#eaf6f0;
  --demo-shadow:0 22px 55px rgba(20,31,50,.09);
}

.demo-commercial-shell{
  position:relative;
  width:min(1260px,100%);
  margin:0 auto;
  display:grid;
  gap:22px;
  padding:0 0 48px;
  color:var(--demo-ink);
}

body.auth-body:has(.demo-commercial-shell){
  display:block;
  min-height:100vh;
  background:#f2f5f7;
}

.auth-container:has(.demo-commercial-shell){
  display:block;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding:20px;
}

.demo-commercial-shell *{box-sizing:border-box}

.demo-commercial-hero,
.demo-tour-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(300px,.52fr);
  gap:28px;
  padding:clamp(26px,4vw,48px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 84% 8%,rgba(99,91,255,.34),transparent 30%),
    linear-gradient(145deg,#10182a 0%,#182640 58%,#111a2e 100%);
  box-shadow:var(--demo-shadow);
}

.demo-commercial-hero:after,
.demo-tour-hero:after{
  content:"";
  position:absolute;
  right:-90px;
  bottom:-150px;
  width:360px;
  height:360px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  box-shadow:
    0 0 0 44px rgba(255,255,255,.025),
    0 0 0 88px rgba(255,255,255,.018);
  pointer-events:none;
}

.demo-hero-copy,
.demo-commercial-hero>aside,
.demo-tour-hero>div,
.demo-tour-hero>aside{position:relative;z-index:1}

.demo-kicker,
.demo-section-index,
.demo-context-label,
.demo-summary-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.demo-kicker{color:#c9c6ff}
.demo-kicker:before{
  content:"";
  width:24px;
  height:2px;
  border-radius:2px;
  background:#8f89ff;
}

.demo-commercial-hero h1,
.demo-tour-hero h1{
  max-width:790px;
  margin:16px 0 18px;
  font-size:clamp(2rem,3.7vw,3.55rem);
  line-height:1.03;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.demo-hero-lead{
  max-width:760px;
  margin:0;
  color:#d6ddea;
  font-size:clamp(.98rem,1.25vw,1.1rem);
  line-height:1.65;
}

.demo-value-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.demo-value-grid>div{
  min-height:112px;
  padding:17px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(8px);
}

.demo-value-grid strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
  font-size:.96rem;
}

.demo-value-grid span{
  color:#bac5d7;
  font-size:.86rem;
  line-height:1.52;
}

.demo-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:17px;
  margin-top:21px;
}

.demo-safe-note{
  color:#aeb9ca;
  font-size:.86rem;
}

.demo-hero-context{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:22px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
}

.demo-context-label{margin-bottom:18px;color:#b7b3ff}

.demo-path{
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

.demo-path li{
  position:relative;
  display:grid;
  grid-template-columns:38px 1fr;
  gap:13px;
  min-height:72px;
  color:#9fadbf;
}

.demo-path li:not(:last-child):after{
  content:"";
  position:absolute;
  left:18px;
  top:39px;
  bottom:3px;
  width:1px;
  background:rgba(255,255,255,.14);
}

.demo-path li>span{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:37px;
  height:37px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#aab5c5;
  background:#1a2740;
  font-size:.78rem;
  font-weight:850;
}

.demo-path strong{
  display:block;
  margin:2px 0 5px;
  color:#dce4ef;
  font-size:.92rem;
}

.demo-path small{
  color:#9fadbf;
  line-height:1.4;
}

.demo-path li.is-active>span,
.demo-path li.is-complete>span{
  color:#fff;
  border-color:#8680ff;
  background:var(--demo-accent);
  box-shadow:0 0 0 5px rgba(99,91,255,.14);
}

.demo-path li.is-active strong,
.demo-path li.is-complete strong{color:#fff}

.demo-current-role,
.demo-protection-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:11px;
  padding:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(8,14,27,.26);
}

.demo-current-role div{display:grid;gap:2px}
.demo-current-role small,
.demo-current-role span,
.demo-protection-card span{color:#aab5c6;font-size:.78rem}
.demo-current-role strong,
.demo-protection-card strong{color:#fff;font-size:.9rem}

.demo-protection-card{
  display:grid;
  align-items:initial;
}

.demo-section{
  padding:clamp(24px,4vw,42px);
  border:1px solid var(--demo-line);
  border-radius:24px;
  background:var(--demo-panel);
  box-shadow:0 12px 34px rgba(20,31,50,.055);
  scroll-margin-top:24px;
}

.demo-section.compact{padding-top:34px}

.demo-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.demo-section-index{margin-bottom:8px;color:var(--demo-accent)}

.demo-section-heading h2,
.demo-commercial-footer h2{
  max-width:780px;
  margin:0;
  font-size:clamp(1.55rem,2.8vw,2.55rem);
  line-height:1.12;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.demo-section-heading p{
  max-width:720px;
  margin:9px 0 0;
  color:var(--demo-muted);
}

.demo-selection-status{
  flex:0 0 auto;
  padding:9px 12px;
  border:1px solid #cfccff;
  border-radius:999px;
  color:#4e47c5;
  background:var(--demo-accent-soft);
  font-size:.8rem;
}

.demo-persona-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:13px;
}

.demo-persona-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:392px;
  padding:18px;
  border:1px solid var(--demo-line);
  border-radius:18px;
  background:#fff;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.demo-persona-card:hover{
  transform:translateY(-3px);
  border-color:#b9b5ff;
  box-shadow:0 14px 30px rgba(32,39,74,.08);
}

.demo-persona-card.is-selected{
  border-color:#8580ff;
  background:linear-gradient(180deg,#f7f6ff,#fff 38%);
  box-shadow:0 0 0 3px rgba(99,91,255,.11);
}

.demo-persona-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.demo-avatar{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(145deg,var(--demo-primary),#344a76);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.05em;
}

.demo-avatar.small{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--demo-accent);
}

.demo-role-status{
  color:#737f8d;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:right;
}

.demo-persona-copy{margin-top:20px}
.demo-persona-copy small{color:#7a8593;font-size:.75rem}
.demo-persona-copy h3{margin:3px 0 8px;font-size:1.18rem}
.demo-persona-copy p{
  min-height:82px;
  margin:0;
  color:var(--demo-muted);
  font-size:.88rem;
  line-height:1.48;
}

.demo-point-list{
  display:grid;
  gap:7px;
  margin:17px 0 21px;
  padding:0;
  list-style:none;
  color:#3f4b5b;
  font-size:.8rem;
}

.demo-point-list li{
  position:relative;
  padding-left:18px;
}

.demo-point-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--demo-accent);
  box-shadow:0 0 0 3px var(--demo-accent-soft);
}

.demo-persona-card form{margin-top:auto}

.demo-primary-button,
.demo-secondary-button,
.demo-card-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:43px;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:11px;
  font:inherit;
  font-size:.86rem;
  font-weight:820;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.demo-primary-button{
  color:#fff;
  background:var(--demo-accent);
  box-shadow:0 10px 22px rgba(99,91,255,.22);
}

.demo-primary-button:hover{
  color:#fff;
  transform:translateY(-1px);
  background:#554de8;
  box-shadow:0 14px 25px rgba(99,91,255,.28);
}

.demo-secondary-button,
.demo-card-button{
  color:var(--demo-primary);
  border-color:#cfd7e1;
  background:#fff;
}

.demo-secondary-button:hover,
.demo-card-button:hover{
  color:var(--demo-primary);
  border-color:#aaa5ff;
  background:#f7f6ff;
}

.demo-card-button{width:100%}
.demo-primary-button.full,
.demo-secondary-button.full{width:100%}

.demo-text-link{
  color:inherit;
  font-size:.86rem;
  font-weight:800;
  text-underline-offset:4px;
}

.demo-commercial-hero .demo-text-link{color:#d9e0ea}

.demo-scenario-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:15px;
}

.demo-scenario-card{
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:20px;
  border:1px solid var(--demo-line);
  border-radius:19px;
  background:linear-gradient(180deg,#fff,#fbfcfd);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.demo-scenario-card:hover{
  transform:translateY(-3px);
  border-color:#b9b5ff;
  box-shadow:0 16px 34px rgba(28,36,65,.08);
}

.demo-scenario-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.demo-scenario-header>div{
  display:flex;
  align-items:center;
  gap:8px;
}

.demo-scenario-number{
  font-size:1.55rem;
  font-weight:900;
  letter-spacing:-.04em;
  color:#c8ccd4;
}

.demo-role-chip,
.demo-duration{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:800;
}

.demo-role-chip{
  color:#4b45be;
  border:1px solid #d0cdff;
  background:var(--demo-accent-soft);
}

.demo-duration{
  color:#687483;
  background:#f0f3f6;
}

.demo-scenario-card h3{
  margin:0 0 19px;
  font-size:1.22rem;
  line-height:1.17;
  letter-spacing:-.02em;
}

.demo-scenario-detail,
.demo-scenario-result{
  margin-bottom:15px;
}

.demo-scenario-detail small,
.demo-scenario-result small,
.demo-tour-value small,
.demo-step-content small{
  display:block;
  margin-bottom:5px;
  color:#7b8694;
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.demo-scenario-detail p,
.demo-scenario-result p{
  margin:0;
  color:var(--demo-muted);
  font-size:.86rem;
  line-height:1.5;
}

.demo-scenario-result{
  padding:13px;
  border-radius:12px;
  background:var(--demo-success-soft);
}

.demo-scenario-result p{color:#2c5b48}
.demo-scenario-card form{margin-top:auto}

.demo-commercial-footer{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:28px;
  align-items:end;
  padding:32px 36px;
  border-radius:22px;
  color:#fff;
  background:var(--demo-primary);
}

.demo-commercial-footer p{
  margin:0;
  color:#b9c4d3;
  line-height:1.65;
}

.demo-tour-hero{
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
}

.demo-tour-meta{
  display:flex;
  align-items:center;
  gap:12px;
}

.demo-tour-value{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
}

.demo-tour-value>div{
  padding:15px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:15px;
  background:rgba(255,255,255,.055);
}

.demo-tour-value small{
  color:#aab5c7;
  letter-spacing:.04em;
  text-transform:none;
}

.demo-tour-value strong{
  display:block;
  color:#fff;
  font-size:.9rem;
  line-height:1.5;
}

.demo-tour-summary{
  align-self:center;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:rgba(255,255,255,.07);
}

.demo-summary-label{color:#bbb7ff}

.demo-tour-summary p{
  margin:12px 0 20px;
  color:#fff;
  font-size:1.05rem;
  line-height:1.55;
}

.demo-tour-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  align-items:start;
}

.demo-steps{
  display:grid;
  gap:13px;
}

.demo-step{
  display:grid;
  grid-template-columns:60px minmax(0,1fr);
  gap:16px;
  padding:19px;
  border:1px solid var(--demo-line);
  border-radius:17px;
  background:#fff;
}

.demo-step-number{
  display:grid;
  place-items:center;
  align-self:start;
  width:52px;
  height:52px;
  border-radius:15px;
  color:#fff;
  background:var(--demo-primary);
  font-size:.9rem;
  font-weight:900;
}

.demo-step-content h3{
  margin:0 0 7px;
  font-size:1.04rem;
}

.demo-step-content p{
  margin:0 0 14px;
  color:var(--demo-muted);
}

.demo-presenter-guide{
  position:sticky;
  top:22px;
  padding:22px;
  border:1px solid #d7d4ff;
  border-radius:18px;
  background:linear-gradient(180deg,#f4f3ff,#fff);
}

.demo-presenter-guide h3{
  margin:10px 0 14px;
  font-size:1.05rem;
  line-height:1.35;
}

.demo-presenter-guide ul{
  display:grid;
  gap:9px;
  margin:0 0 18px;
  padding-left:18px;
  color:var(--demo-muted);
  font-size:.85rem;
}

.demo-alert{margin:0}

@media(max-width:1180px){
  .demo-persona-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .demo-persona-card{min-height:360px}
}

@media(max-width:980px){
  .auth-container:has(.demo-commercial-shell){
    padding:14px;
  }

  .demo-commercial-shell{
    width:100%;
  }

  .demo-commercial-hero,
  .demo-tour-hero,
  .demo-commercial-footer{
    grid-template-columns:1fr;
  }

  .demo-value-grid{grid-template-columns:1fr}
  .demo-hero-context{justify-content:flex-start}
  .demo-scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-tour-layout{grid-template-columns:1fr}
  .demo-presenter-guide{position:static}
}

@media(max-width:720px){
  .auth-container:has(.demo-commercial-shell){
    padding:10px;
  }

  .demo-commercial-shell{
    width:100%;
    gap:16px;
    padding-top:0;
  }

  .demo-commercial-hero,
  .demo-tour-hero{
    gap:24px;
    padding:24px 20px;
    border-radius:21px;
  }

  .demo-commercial-hero h1,
  .demo-tour-hero h1{
    font-size:2.15rem;
  }

  .demo-section{
    padding:22px 16px;
    border-radius:20px;
  }

  .demo-section-heading{
    display:grid;
    align-items:start;
  }

  .demo-selection-status{justify-self:start}

  .demo-persona-grid,
  .demo-scenario-grid,
  .demo-tour-value{
    grid-template-columns:1fr;
  }

  .demo-persona-card,
  .demo-scenario-card{
    min-height:0;
  }

  .demo-persona-copy p{min-height:0}

  .demo-commercial-footer{
    padding:26px 20px;
  }

  .demo-step{
    grid-template-columns:44px minmax(0,1fr);
    padding:15px;
  }

  .demo-step-number{
    width:40px;
    height:40px;
    border-radius:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  .demo-persona-card,
  .demo-scenario-card,
  .demo-primary-button,
  .demo-secondary-button,
  .demo-card-button{
    transition:none;
  }
}


/* FTC Demo Optical — Jornada Guiada V0.1.2 */
.demo-journey-home .demo-commercial-hero{
  grid-template-columns:minmax(0,1.48fr) minmax(290px,.52fr);
  min-height:0;
}

.demo-journey-hero h1{
  max-width:760px;
  font-size:clamp(2rem,3.35vw,3.25rem);
}

.demo-start-panel{
  position:relative;
  z-index:1;
  align-self:center;
  padding:22px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:rgba(255,255,255,.065);
}

.demo-start-flow{
  display:grid;
  gap:13px;
  margin:16px 0 18px;
}

.demo-start-flow>div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:center;
}

.demo-start-flow>div>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  color:#fff;
  background:#635bff;
  font-size:.78rem;
  font-weight:900;
}

.demo-start-flow p{
  margin:0;
  color:#c5cfdd;
  font-size:.86rem;
  line-height:1.42;
}

.demo-start-flow strong{color:#fff}

.demo-group-stack{display:grid;gap:30px}

.demo-scenario-group{
  display:grid;
  gap:14px;
}

.demo-scenario-group:not(:first-child){
  padding-top:28px;
  border-top:1px solid var(--demo-line);
}

.demo-group-heading h3{
  margin:0;
  font-size:1.25rem;
  letter-spacing:-.02em;
}

.demo-group-heading p{
  margin:5px 0 0;
  color:var(--demo-muted);
  font-size:.88rem;
}

.demo-scenario-grid-guided{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.demo-guided-card{
  min-height:440px;
  position:relative;
}

.demo-guided-card.is-recommended{
  border-color:#8b85ff;
  box-shadow:0 0 0 3px rgba(99,91,255,.10),0 18px 38px rgba(31,37,72,.09);
}

.demo-recommended-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:max-content;
  margin:-7px 0 13px;
  padding:6px 9px;
  border-radius:999px;
  color:#fff;
  background:#635bff;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.03em;
}

.demo-recommended-badge.inline{
  margin:0;
}

.demo-auto-perspective{
  display:grid;
  gap:3px;
  margin:0 0 18px;
  padding:11px 12px;
  border:1px solid #e0e4eb;
  border-radius:12px;
  background:#f7f8fa;
}

.demo-auto-perspective span{
  color:#7b8694;
  font-size:.66rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.demo-auto-perspective strong{
  color:#263244;
  font-size:.8rem;
  line-height:1.35;
}

.demo-perspective-section{
  padding:0;
  overflow:hidden;
}

.demo-perspective-details>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:25px 30px;
  cursor:pointer;
  list-style:none;
}

.demo-perspective-details>summary::-webkit-details-marker{display:none}

.demo-perspective-details>summary span:first-child{
  display:grid;
  gap:4px;
}

.demo-perspective-details>summary small{
  color:#635bff;
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.10em;
}

.demo-perspective-details>summary strong{
  font-size:1.15rem;
}

.demo-summary-action{
  color:#635bff;
  font-size:.8rem;
  font-weight:850;
}

.demo-perspective-details[open] .demo-summary-action{
  font-size:0;
}

.demo-perspective-details[open] .demo-summary-action:after{
  content:"Fechar opções";
  font-size:.8rem;
}

.demo-perspective-intro{
  padding:0 30px 14px;
  color:var(--demo-muted);
}

.demo-perspective-intro p{
  max-width:760px;
  margin:0;
}

.demo-perspective-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:0 30px 30px;
}

.demo-perspective-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:16px;
  border:1px solid var(--demo-line);
  border-radius:15px;
  background:#fff;
}

.demo-perspective-card small{
  color:#7a8593;
  font-size:.72rem;
}

.demo-perspective-card h3{
  margin:4px 0 8px;
  font-size:1rem;
}

.demo-perspective-card p{
  margin:0 0 15px;
  color:var(--demo-muted);
  font-size:.8rem;
  line-height:1.45;
}

.demo-perspective-card form{margin-top:auto}

.demo-commercial-footer-compact{
  align-items:center;
  padding:26px 32px;
}

.demo-commercial-footer-compact h2{
  font-size:clamp(1.35rem,2.2vw,2rem);
}

.demo-preparation-hero{
  grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);
}

.demo-preparation-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.demo-preparation-meta span{
  padding:6px 9px;
  border-radius:999px;
  color:#dce3ed;
  background:rgba(255,255,255,.09);
  font-size:.72rem;
  font-weight:800;
}

.demo-preview-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.demo-preview-steps article{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  padding:17px;
  border:1px solid var(--demo-line);
  border-radius:16px;
  background:#fff;
}

.demo-preview-steps article>span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  color:#fff;
  background:#17243f;
  font-size:.78rem;
  font-weight:900;
}

.demo-preview-steps h3{
  margin:0 0 5px;
  font-size:.95rem;
}

.demo-preview-steps p{
  margin:0;
  color:var(--demo-muted);
  font-size:.82rem;
  line-height:1.45;
}

.demo-preparation-actions{
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:23px;
}

.demo-text-link.dark{color:#17243f}

.demo-completion-card{
  display:grid;
  justify-items:center;
  padding:clamp(30px,6vw,72px);
  border:1px solid var(--demo-line);
  border-radius:26px;
  text-align:center;
  background:#fff;
  box-shadow:var(--demo-shadow);
}

.demo-completion-mark{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-bottom:18px;
  border-radius:20px;
  color:#fff;
  background:#176b4c;
  font-size:1.8rem;
  font-weight:900;
}

.demo-completion-card h1{
  margin:14px 0 12px;
  font-size:clamp(2rem,4vw,3.3rem);
  letter-spacing:-.04em;
}

.demo-completion-lead{
  max-width:760px;
  margin:0;
  color:var(--demo-muted);
  font-size:1rem;
  line-height:1.6;
}

.demo-completion-lead strong{
  color:#17243f;
}

.demo-completion-result{
  width:min(780px,100%);
  margin:28px 0;
  padding:22px;
  border-radius:18px;
  background:#eaf6f0;
}

.demo-completion-result small{
  color:#176b4c;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.demo-completion-result h2{
  margin:8px 0;
  font-size:1.35rem;
}

.demo-completion-result p{
  margin:0;
  color:#315b4a;
}

.demo-completion-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.demo-completion-actions form{margin:0}

@media(max-width:1120px){
  .demo-scenario-grid-guided{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .demo-perspective-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:800px){
  .demo-journey-home .demo-commercial-hero,
  .demo-preparation-hero{
    grid-template-columns:1fr;
  }

  .demo-preview-steps{
    grid-template-columns:1fr;
  }

  .demo-perspective-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .demo-scenario-grid-guided,
  .demo-perspective-grid{
    grid-template-columns:1fr;
  }

  .demo-guided-card{
    min-height:0;
  }

  .demo-perspective-details>summary{
    align-items:flex-start;
    padding:20px;
  }

  .demo-perspective-intro{
    padding:0 20px 13px;
  }

  .demo-perspective-grid{
    padding:0 20px 20px;
  }

  .demo-preparation-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .demo-preparation-actions form,
  .demo-preparation-actions .demo-primary-button{
    width:100%;
  }
}