
/* Layout: the download plate first, then the route in three waypoints, then answers to what usually goes wrong. */
.dl{margin-top:clamp(28px,4vw,44px);padding:clamp(26px,3.6vw,44px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center;background:radial-gradient(80% 140% at 100% 0,#5a3f1a55,#0000 60%),linear-gradient(180deg,#17120cf2,#0e0b08f2)}
.dl h2{font-size:clamp(30px,3.2vw,42px);color:#eceff1}
.facts{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:12px;font-size:15px;color:#cfc8bb}
.facts b{color:#f3ecdc;font-weight:600}
.dl-act{display:grid;gap:10px;justify-items:stretch}
.dl-act small{font-size:13px;color:#b9b1a2;text-align:left;line-height:1.35;max-width:38ch}

.route{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:clamp(56px,7vw,88px)}
.route::before{content:"";position:absolute;top:36px;left:16.67%;right:16.67%;height:6px;margin-top:-3px;background:radial-gradient(circle,#e0b35a 1.6px,#e0b35a00 2.2px) 0 50%/13px 6px repeat-x;opacity:.85}
.wp{display:grid;justify-items:center;text-align:center;gap:10px;align-content:start}
.wp-mark{position:relative;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin:10px 0 18px;transform:rotate(45deg);background:linear-gradient(135deg,#15523f,#0a2019);box-shadow:inset 0 0 0 1px #e0b35a,inset 0 0 0 4px #0a2019,inset 0 0 0 5px #e0b35a70,0 10px 20px -8px #000}
.wp-mark span{transform:rotate(-45deg);font:400 24px/1 var(--f-carve)}
.wp h3{font-size:28px;color:#eceff1;text-shadow:0 2px 12px #000}
.wp p{font-size:15px;color:#c8cfd3;max-width:32ch;text-shadow:0 1px 8px #000}

.faq{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq h2{font-size:clamp(34px,4vw,50px);text-transform:uppercase;letter-spacing:.04em;color:#eceff1}
.faq>div>p{margin-top:12px;font-size:16px;color:#c3cacd}
.qa{border-top:1px solid #e0b35a33}
.qa details{border-bottom:1px solid #e0b35a33}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 2px;font-size:17px;font-weight:600;color:#eef1f2}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:10px;height:10px;flex:none;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.qa summary:hover{color:var(--gold-hi)}
.qa details p{padding:0 2px 18px;font-size:15px;color:#c8cfd3;max-width:62ch}
@media (max-width:900px){.dl{grid-template-columns:minmax(0,1fr)}.faq{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .route{grid-template-columns:minmax(0,1fr);gap:26px}
  .route::before{top:30px;bottom:30px;left:36px;right:auto;width:6px;height:auto;margin:0 0 0 -3px;background:radial-gradient(circle,#e0b35a 1.6px,#e0b35a00 2.2px) 50% 0/6px 13px repeat-y}
  .wp{grid-template-columns:72px minmax(0,1fr);justify-items:start;text-align:left;gap:4px 16px}
  .wp-mark{grid-row:span 2;margin:10px}
  .wp h3{align-self:end}
}
.patch{font-size:14px;font-weight:600;color:var(--gold-hi);text-decoration:underline;text-decoration-color:#e0b35a66;text-underline-offset:.22em}
.patch:hover{text-decoration-color:var(--gold)}
