/* Expedition: Hidden Wild product page. Layout comes from cw.css (the shared
   app-page components); this file re-tints them for the game's parchment and
   savanna palette and adds the steps, gallery and play button. */
.exp-page .ai-orb-1 { background:#c9a04a; opacity:.3; }
.exp-page .ai-orb-2 { background:#27402f; opacity:.6; }
.exp-page .ai-orb-3 { background:#edbe62; opacity:.14; }
.exp-page main { position:relative; }
.exp-page .cw-hero .container { gap:5rem; }
.exp-page .cw-hero h1 { max-width:16ch; }
.exp-gold { color:#edbe62; }
.exp-app-subtitle { display:block; margin-top:.2rem; font-size:.95rem; font-weight:400; color:#c4c4c4; }
.exp-page .cw-hero-stage { width:280px; aspect-ratio:660/1434; }
.exp-page .cw-hero-stage::before { background:radial-gradient(ellipse,#c9a04a44,#27402f30 45%,transparent 70%); }
.exp-page .cw-hero-slide img { border-color:#edbe6244; }
/* A raised gold control makes the game launch stand out from text links. */
.exp-play { display:inline-flex; align-items:center; justify-content:center; gap:14px; box-sizing:border-box; min-height:64px; padding:16px 30px 16px 24px; border:1px solid #ffe6a2; border-radius:12px; background:linear-gradient(180deg,#f6d585,#e5b249); color:#24301f; font-family:inherit; font-size:19px; line-height:1.25; font-weight:800; text-decoration:none; cursor:pointer; box-shadow:inset 0 1px 0 #fff2c9,0 4px 0 #8c6a2a,0 10px 28px #0005; transition:transform .15s,box-shadow .15s,background .15s; }
.exp-play:hover { background:linear-gradient(180deg,#ffe4a4,#efc262); color:#24301f; transform:translateY(-2px); box-shadow:inset 0 1px 0 #fff5d8,0 6px 0 #8c6a2a,0 12px 32px #e8b54b26; }
.exp-play:active { transform:translateY(3px); background:linear-gradient(180deg,#e8c369,#dda942); box-shadow:inset 0 2px 4px #8d692a26,0 1px 0 #8c6a2a,0 4px 12px #0004; }
.exp-play:focus-visible { outline:3px solid #fff0bd; outline-offset:7px; }
.exp-play-icon { display:block; width:26px; height:26px; flex:none; }
.exp-note,.exp-platforms { font-size:.9375rem; line-height:1.6; color:#b9c1b9; }
.exp-actions .exp-note { margin-top:1rem; }
.exp-page .cw-store-row { margin:1.75rem 0 0; }
.exp-platforms { margin-top:1.25rem; color:#dcbd83; }
.exp-how,.exp-gallery-section,.exp-end { max-width:1200px; padding-top:5rem; padding-bottom:5rem; }
.exp-how { border-top:1px solid #bb9d5633; }
.exp-section-heading { margin-bottom:2.5rem; max-width:760px; }
.exp-kicker { font-size:.875rem; letter-spacing:.15em; color:#d7b879; margin-bottom:1rem; }
.exp-section-heading h2,.exp-end h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.22; font-weight:700; margin-bottom:1rem; text-wrap:balance; }
.exp-section-heading>p:last-child { font-size:1.125rem; color:#c4c4c4; }
.exp-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.exp-steps article { padding:1.75rem 0; border-top:1px solid #bb9d5644; }
.exp-step-number { color:#d7b879; font-size:.9375rem; }
.exp-steps h3 { font-size:1.375rem; font-weight:650; margin:1rem 0 .75rem; }
.exp-steps p { font-size:1rem; color:#c4c4c4; }
.exp-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2rem; max-width:1120px; margin:auto; }
.exp-gallery figure { margin:0; min-width:0; }
.exp-gallery img { display:block; width:100%; height:auto; border-radius:24px; border:1px solid #edbe623b; box-shadow:0 18px 50px #0006; }
.exp-gallery figcaption { margin-top:1.25rem; font-size:.9375rem; color:#c4c4c4; text-align:center; }
.exp-end { text-align:center; border-top:1px solid #bb9d5633; padding-bottom:6rem; }
.exp-end .exp-play { margin:1.1rem 0 1.5rem; }
.exp-end p { color:#c4c4c4; font-size:1rem; line-height:1.65; max-width:44rem; margin:0 auto .75rem; text-wrap:pretty; }
.exp-end a:not([class]) { color:#edbe62; text-decoration:none; border-bottom:1px solid #edbe6255; transition:color .15s,border-color .15s; }
.exp-end a:not([class]):hover { color:#ffe08f; border-color:#ffe08f; }
.exp-end .exp-end-legal { margin-top:2rem; font-size:.875rem; }
.exp-end .exp-end-legal a { color:#9a9b8f; border-color:#9a9b8f55; }
.exp-end .exp-end-legal a:hover { color:#dcbd83; border-color:#dcbd83; }
@media(max-width:1000px) {
  .exp-page .cw-hero .container { gap:3rem; }
  .exp-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:620px; }
}
/* The shared site's mobile root is 10px. Keep this page's copy comfortably readable. */
@media(max-width:768px) {
  .exp-page main { font-size:16px; }
  .exp-page .cw-app-name { font-size:2.4rem; }
  .exp-app-subtitle,.exp-note,.exp-platforms,.exp-gallery figcaption { font-size:1.5rem; }
  .exp-page .cw-hero .lead { font-size:1.8rem; }
  .exp-steps { grid-template-columns:1fr; gap:1rem; }
  .exp-section-heading h2,.exp-end h2 { font-size:3rem; }
  .exp-section-heading>p:last-child,.exp-steps p,.exp-end p { font-size:1.6rem; }
  .exp-end .exp-end-legal { font-size:1.4rem; }
  .exp-steps h3 { font-size:2rem; }
  .exp-kicker,.exp-step-number { font-size:1.4rem; }
  .exp-gallery { gap:1.75rem; }
}
@media(max-width:590px) {
  .exp-page .cw-hero h1 { font-size:4.2rem; }
  .exp-page .cw-hero-stage { width:250px; }
  .exp-page .cw-hero-copy { text-align:center; }
  .exp-gallery { grid-template-columns:1fr; max-width:280px; gap:3.5rem; }
  .exp-how,.exp-gallery-section,.exp-end { padding-top:4rem; padding-bottom:4rem; }
}
@media(prefers-reduced-motion:reduce) { .exp-play { transition:none; } }