/* Five-MP application: the existing homepage palette, cards and controls. */
.five-mp-page{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--deep);
}
.five-mp-page .topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  flex-shrink:0;width:100%;max-width:1180px;gap:14px;
  padding:12px 22px 4px;margin:0 auto;
}
.five-mp-page .topbar .side{display:flex;align-items:center;gap:6px}
.five-mp-page .topbar .side.right{justify-content:flex-end}
.five-mp-page .topbar .emblem{justify-self:center}
.five-mp-page .topbar .emblem img{height:64px;width:auto;display:block}
.five-mp-page .topbar a.nav{
  color:var(--ink);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.five-mp-page #root{
  flex-shrink:0;width:100%;max-width:744px;margin: auto;
  padding:24px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left));
}
.five-mp-page #root>section{width:100%;margin:0 auto}
.five-mp-page #s-hero{
  max-width:680px;border:1px solid var(--rule);border-radius:var(--card-radius);
  background:var(--card);padding:32px 36px;text-align:center;
}
.five-mp-page .hero5{padding:0}
.five-mp-page .eyebrow{
  color:var(--gold);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;
}
.five-mp-page .hero5 h1{
  font-family:var(--serif);font-size:clamp(34px,4.4vw,48px);font-weight:600;
  line-height:1.06;letter-spacing:-.015em;text-transform:none;
  text-wrap:balance;max-width:560px;margin:0 auto 18px;
}
.five-mp-page .hero5 .tag{font-size:16px;line-height:1.6;max-width:550px}
.five-mp-page .heropanel{
  max-width:550px;margin:24px auto 0;padding:0;border:0;border-radius:0;background:none;
}
.five-mp-page .heropanel p{font-size:15px;line-height:1.65;color:var(--muted)}
.five-mp-page .heropanel .meta{font-size:12px;line-height:1.6;margin:18px 0 14px;letter-spacing:0}
.five-mp-page .btn{
  display:block;width:100%;max-width:400px;min-height:52px;margin-inline:auto;
  padding:15px 18px;border:1px solid var(--gold);border-radius:var(--card-radius);
  background:var(--action-background);
  color:var(--deep);font:600 16px/1.35 var(--sans);letter-spacing:.01em;
  box-shadow:0 12px 30px -18px rgba(201,169,110,.5);
}
.five-mp-page .btn.ghost{background:transparent;color:var(--gold);box-shadow:none}
.five-mp-page .gate,.five-mp-page .videostub,.five-mp-page .qitem,
.five-mp-page .mpcard,.five-mp-page .situation-result,.five-mp-page .cta{
  background:var(--card);border-color:var(--rule);border-radius:var(--card-radius);
}
.five-mp-page .gate{max-width:620px;margin:0 auto;padding:28px}
.five-mp-page .thanks{padding-top:0}
.five-mp-page .thanks h2,.five-mp-page .gate h2,.five-mp-page .res h2{
  font-weight:600;text-wrap:balance;
}
.five-mp-page .gate .btn{max-width:none}
.five-mp-page .opts button{border-radius:12px}
.five-mp-page .opts button.on{background:linear-gradient(180deg,var(--gold),var(--goldDim));color:var(--deep)}
.five-mp-page .foot{
  flex-shrink:0;width:100%;max-width:800px;margin:0 auto;
  font-size:12px;line-height:1.6;padding:14px 20px max(20px,env(safe-area-inset-bottom));
}
@media(min-width:700px) and (max-height:760px){
  .five-mp-page .topbar .emblem img{height:48px}
  .five-mp-page #root{padding-block:16px}
  .five-mp-page #s-hero{padding:24px 30px}
  .five-mp-page .hero5 h1{font-size:40px;margin-bottom:14px}
  .five-mp-page .eyebrow{margin-bottom:12px}
  .five-mp-page .hero5 .tag{font-size:15px}
  .five-mp-page .heropanel{margin-top:16px}
  .five-mp-page .heropanel p{font-size:14px}
  .five-mp-page .heropanel .meta{margin:12px 0}
  .five-mp-page .foot{font-size:11px;padding-top:10px;padding-bottom:14px}
}
@media(max-width:1080px){
  .five-mp-page .topbar{grid-template-columns:44px 1fr 44px;gap:10px}
  .five-mp-page .topbar .side{display:none}
  .five-mp-page .topbar .emblem{grid-column:2}
  .five-mp-page .topbar .mburger{display:flex;grid-column:3;justify-self:end;margin-left:0}
}
@media(max-width:600px){
  .five-mp-page .topbar{padding:12px 18px 0;min-height:68px}
  .five-mp-page .topbar .emblem img{height:56px}
  .five-mp-page #root{padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left))}
  .five-mp-page #s-hero{padding:28px 22px}
  .five-mp-page .hero5 h1{font-size:36px;line-height:1.08}
  .five-mp-page .heropanel{margin-top:20px}
  .five-mp-page .heropanel p{font-size:16px}
  .five-mp-page .gate{padding:24px 20px}
}
@media(max-width:359px){
  .five-mp-page #s-hero{padding:24px 18px}
  .five-mp-page .hero5 h1{font-size:32px}
}