/* PAGE 24 — Device Download
   Visual direction: warm cream + charcoal + burnt orange + green
   Layout: split poster hero / departure-board selector / full-width tablet split
   Intentionally avoids previous blue/green card templates.
*/
:root{
  --ink:#211f1b;
  --charcoal:#25231f;
  --orange:#d7763c;
  --orange-soft:#f0c3a5;
  --green:#15805d;
  --cream:#f2eadc;
  --paper:#faf7f0;
  --white:#fff;
  --line:#ded7cb;
  --muted:#756f66;
  --shell:min(1180px,calc(100% - 40px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;
  line-height:1.72;
  -webkit-font-smoothing:antialiased
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.shell{width:var(--shell);margin:auto}
section{scroll-margin-top:84px}

/* header */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(250,247,240,.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.header-row{
  height:70px;
  display:flex;
  align-items:center;
  gap:22px
}
.brand img{width:140px}
.header-title{
  padding-left:20px;
  border-left:1px solid var(--line);
  color:#978d81;
  font-size:8px;
  letter-spacing:.16em;
  font-weight:900
}
.desktop-nav{
  margin-left:auto;
  display:flex;
  gap:20px
}
.desktop-nav a{
  color:#655f56;
  font-size:12px;
  font-weight:700
}
.desktop-nav a:hover{color:var(--orange)}
.header-cta{
  padding:9px 17px;
  border:1px solid var(--charcoal);
  color:var(--charcoal);
  font-size:12px;
  font-weight:900
}
.menu-toggle{
  display:none;
  margin-left:auto;
  padding:8px;
  border:0;
  background:transparent
}
.menu-toggle span{
  display:block;width:22px;height:2px;margin:5px;background:var(--charcoal)
}
.mobile-nav{
  padding:8px 20px 18px;
  background:var(--paper);
  border-top:1px solid var(--line)
}
.mobile-nav a{
  display:block;padding:9px 0;font-size:13px;font-weight:700
}

/* Hero — hard split, no card shell */
.hero{
  min-height:650px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--line)
}
.hero-left{
  display:flex;
  align-items:center;
  background:var(--charcoal);
  color:#fff
}
.hero-left-inner{
  width:min(590px,calc(100% - 50px));
  margin-left:max(25px,calc((100vw - 1180px)/2))
}
.hero-label{
  display:flex;
  align-items:center;
  gap:12px
}
.hero-label span{
  color:var(--orange-soft);
  font-family:Georgia,serif;
  font-size:24px
}
.hero-label i{
  width:42px;height:1px;background:#746c62
}
.hero-label b{
  color:#9d958b;
  font-size:8px;
  letter-spacing:.17em
}
.hero h1{
  margin:28px 0 0;
  font-size:clamp(62px,7vw,100px);
  line-height:.92;
  letter-spacing:-.065em;
  font-weight:900
}
.hero-left p{
  max-width:560px;
  margin:28px 0 0;
  color:#c0b9ae;
  font-size:15px;
  line-height:1.9
}
.hero-btn{
  width:min(100%,355px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:30px;
  padding:15px 17px;
  background:var(--orange);
  color:#fff;
  font-size:13px;
  font-weight:900
}
.hero-right{
  position:relative;
  overflow:hidden;
  background:var(--cream)
}
.hero-image-main{
  position:absolute;
  inset:72px 70px 90px 45px;
  display:grid;
  place-items:center
}
.hero-image-main img{
  width:90%;
  max-height:440px;
  object-fit:contain
}
.hero-image-caption{
  position:absolute;
  left:42px;
  bottom:34px;
  padding-left:13px;
  border-left:3px solid var(--orange)
}
.hero-image-caption span{
  display:block;
  color:#9a6b4d;
  font-size:8px;
  letter-spacing:.17em
}
.hero-image-caption strong{
  display:block;
  margin-top:3px;
  font-size:13px
}
.hero-mini{
  position:absolute;
  right:28px;
  top:38px;
  width:105px;
  height:220px;
  overflow:hidden;
  border:5px solid #fff;
  box-shadow:0 20px 44px rgba(70,50,30,.15)
}
.hero-mini img{width:100%;height:100%;object-fit:cover}

/* Selector board */
.selector{
  padding:95px 0;
  background:#fff
}
.selector-heading{
  display:grid;
  grid-template-columns:.35fr 1fr .65fr;
  gap:30px;
  align-items:end;
  margin-bottom:30px
}
.selector-heading>span{
  color:var(--orange);
  font-size:8px;
  letter-spacing:.17em;
  font-weight:900
}
.selector-heading h2,.phone-copy h2,.tablet-copy h2,.desktop-copy h2,.mosaic-head h2,.again-left h2,.faq-title h2{
  margin:0;
  font-size:clamp(38px,4.8vw,56px);
  line-height:1.05;
  letter-spacing:-.045em
}
.selector-heading p{
  margin:0;
  color:var(--muted)
}
.selector-board{
  border-top:2px solid var(--charcoal)
}
.selector-board a{
  display:grid;
  grid-template-columns:65px 1fr 190px;
  gap:20px;
  align-items:center;
  padding:19px 0;
  border-bottom:1px solid var(--line)
}
.selector-board>a>span{
  color:var(--orange);
  font-size:10px;
  font-weight:900
}
.selector-board b{
  display:block;
  font-size:17px
}
.selector-board small{
  color:#8a8278;
  font-size:10px
}
.selector-board strong{
  justify-self:end;
  font-size:11px
}
.selector-board a:hover strong{color:var(--orange)}

/* Phone */
.phone-section{
  padding:110px 0;
  background:var(--cream)
}
.phone-layout{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:80px;
  align-items:center
}
.section-kicker{
  display:block;
  margin-bottom:10px;
  color:var(--orange);
  font-size:8px;
  letter-spacing:.18em;
  font-weight:900
}
.phone-copy p,.tablet-copy p,.desktop-copy p{
  color:var(--muted)
}
.phone-links{
  display:grid;
  gap:10px;
  margin-top:26px
}
.phone-links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border-left:3px solid var(--orange)
}
.phone-links small{
  display:block;
  color:#9c7d68;
  font-size:8px;
  letter-spacing:.14em
}
.phone-links b{display:block;font-size:12px}
.phone-links span{font-size:11px;font-weight:900}
.phone-wall{
  position:relative;
  min-height:500px
}
.phone-wall figure{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#111;
  border:7px solid #fff;
  box-shadow:0 28px 58px rgba(68,48,30,.14)
}
.wall-a{
  left:16%;
  top:10px;
  width:230px;
  height:460px;
  transform:rotate(-3deg)
}
.wall-b{
  right:10%;
  top:95px;
  width:175px;
  height:350px;
  transform:rotate(5deg)
}
.phone-wall img{width:100%;height:100%;object-fit:cover}
.wall-caption{
  position:absolute;
  left:4%;
  bottom:16px;
  padding:11px 14px;
  background:var(--charcoal);
  color:#fff
}
.wall-caption b{display:block;font-size:10px}
.wall-caption span{display:block;color:#bcb4a8;font-size:8px}

/* Tablet = full-width 50/50 hard split */
.tablet-section{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:560px;
  background:var(--charcoal);
  color:#fff
}
.tablet-art{
  display:grid;
  place-items:center;
  padding:50px;
  background:#d9783f
}
.tablet-frame{
  width:94%;
  box-shadow:0 30px 65px rgba(0,0,0,.22)
}
.tablet-bar{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  background:#171613;
  color:#8f8a82;
  font-size:7px;
  letter-spacing:.14em
}
.tablet-frame img{
  width:100%;
  height:330px;
  object-fit:cover
}
.tablet-copy{
  display:flex;
  align-items:center
}
.tablet-copy-inner{
  width:min(440px,calc(100% - 50px));
  margin-left:60px
}
.section-kicker.light{color:var(--orange-soft)}
.tablet-copy p{color:#bcb4a9}
.tablet-links{
  display:grid;
  margin-top:25px;
  border-top:1px solid #4b4740
}
.tablet-links a{
  display:grid;
  grid-template-columns:120px 1fr 20px;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid #4b4740
}
.tablet-links small{color:#a69d92;font-size:8px}
.tablet-links b{font-size:11px}
.tablet-links span{justify-self:end}

/* desktop */
.desktop-section{
  padding:110px 0;
  background:#fff
}
.desktop-layout{
  display:grid;
  grid-template-columns:.67fr 1.33fr;
  gap:78px;
  align-items:center
}
.desktop-cta{
  width:min(100%,330px);
  display:flex;
  justify-content:space-between;
  margin-top:24px;
  padding:14px 16px;
  background:var(--charcoal);
  color:#fff;
  font-size:12px;
  font-weight:900
}
.desktop-art{
  position:relative;
  min-height:430px
}
.desktop-screen{
  position:absolute;
  left:0;right:45px;top:28px;
  box-shadow:0 25px 60px rgba(36,32,27,.14)
}
.desktop-screen-top{
  height:37px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 11px;
  background:var(--charcoal)
}
.desktop-screen-top span{
  width:7px;height:7px;border-radius:50%;background:#746e65
}
.desktop-screen-top b{
  margin-left:auto;
  color:#9a9288;
  font-size:7px;
  letter-spacing:.14em
}
.desktop-screen img{
  width:100%;
  height:320px;
  object-fit:cover
}
.desktop-chip{
  position:absolute;
  right:0;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:var(--orange);
  color:#fff
}
.desktop-chip img{width:34px}
.desktop-chip span{font-size:8px;letter-spacing:.14em}

/* Mosaic */
.mosaic-section{
  padding:110px 0;
  background:#efe8dc
}
.mosaic-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:35px
}
.mosaic-head span{
  color:var(--orange);
  font-size:8px;
  letter-spacing:.18em;
  font-weight:900
}
.mosaic{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:250px 250px;
  gap:10px
}
.mosaic figure{
  position:relative;
  margin:0;
  overflow:hidden;
  background:#fff
}
.mosaic-1{grid-row:1/3}
.mosaic-4{grid-column:2/4}
.mosaic img{
  width:100%;height:100%;object-fit:contain;padding:12px
}
.mosaic-1 img,.mosaic-4 img{object-fit:cover;padding:0}
.mosaic figcaption{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 9px;
  background:rgba(33,31,27,.9);
  color:#fff;
  font-size:9px
}

/* Again */
.again-section{
  padding:95px 0;
  background:var(--charcoal);
  color:#fff
}
.again-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:70px;
  align-items:center
}
.again-left>span{
  color:var(--orange-soft);
  font-size:8px;
  letter-spacing:.17em
}
.again-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.again-right a{
  min-height:86px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:17px;
  background:#302d28;
  border:1px solid #4b463e
}
.again-right a:hover{background:var(--orange)}
.again-right b{font-size:11px}

/* FAQ */
.faq-section{
  padding:100px 0;
  background:#fff
}
.faq-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:80px
}
.faq-title{
  position:sticky;
  top:105px;
  align-self:start
}
.faq-title span{
  color:var(--orange);
  font-size:8px;
  letter-spacing:.17em
}
.faq-list{border-top:2px solid var(--charcoal)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  list-style:none;
  position:relative;
  padding:20px 42px 20px 0;
  cursor:pointer;
  font-size:14px;
  font-weight:900
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";
  position:absolute;
  right:4px;top:16px;
  width:28px;height:28px;
  display:grid;place-items:center;
  background:#eee8df;
  font-size:18px;
  font-weight:400
}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{
  margin:0;
  padding:0 50px 20px 0;
  color:var(--muted);
  font-size:12px
}

/* Final */
.final-section{
  padding:25px 0 90px;
  background:#fff
}
.final-layout{
  min-height:190px;
  display:grid;
  grid-template-columns:75px 1fr 200px;
  align-items:center;
  gap:28px;
  padding:32px 36px;
  border:1px solid var(--line);
  border-left:5px solid var(--orange);
  background:var(--paper)
}
.final-icon{
  width:64px;height:64px;
  display:grid;place-items:center;
  background:#fff
}
.final-icon img{width:38px}
.final-layout>div:nth-child(2)>span{
  color:var(--orange);
  font-size:8px;
  letter-spacing:.15em
}
.final-layout h2{
  margin:4px 0 0;
  font-size:31px
}
.final-layout>a{
  display:flex;
  justify-content:space-between;
  padding:14px 16px;
  background:var(--charcoal);
  color:#fff;
  font-size:12px;
  font-weight:900
}

/* Footer */
.footer{
  padding:48px 0 70px;
  background:#eee8dd;
  border-top:1px solid var(--line)
}
.footer-row{
  display:grid;
  grid-template-columns:160px 1fr 1fr .7fr;
  gap:30px;
  align-items:start
}
.footer-row>img{width:135px}
.footer-row p,.footer-row span{
  margin:0;
  color:#7a736a;
  font-size:10px
}
.footer nav{display:grid;gap:6px}
.footer nav a{font-size:10px;color:#5e574f}
.mobile-fixed{display:none}

/* Responsive */
@media(max-width:1050px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .header-cta{margin-left:auto}
  .hero{grid-template-columns:1fr}
  .hero-left-inner{
    width:var(--shell);
    margin:0 auto;
    padding:75px 0
  }
  .hero-right{min-height:520px}
  .faq-layout{grid-template-columns:1fr}
  .faq-title{position:static}
}
@media(max-width:820px){
  :root{--shell:min(100% - 28px,1180px)}
  .header-title,.header-cta{display:none}
  .selector-heading,.phone-layout,.desktop-layout,.again-layout{grid-template-columns:1fr}
  .selector-board a{grid-template-columns:50px 1fr}
  .selector-board strong{grid-column:2;justify-self:start}
  .phone-section,.desktop-section,.mosaic-section,.faq-section{padding:75px 0}
  .tablet-section{grid-template-columns:1fr}
  .tablet-copy-inner{
    width:var(--shell);
    margin:0 auto;
    padding:55px 0
  }
  .mosaic{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto
  }
  .mosaic-1{
    grid-column:1/-1;
    grid-row:auto;
    min-height:330px
  }
  .mosaic-4{grid-column:1/-1;min-height:240px}
  .final-layout{grid-template-columns:70px 1fr}
  .final-layout>a{grid-column:1/-1}
  .footer-row{grid-template-columns:1fr}
}
@media(max-width:580px){
  body{padding-bottom:72px}
  .header-row{height:64px}
  .brand img{width:124px}
  .hero-left-inner{padding:58px 0}
  .hero h1{font-size:50px}
  .hero-left p{font-size:14px}
  .hero-right{min-height:380px}
  .hero-image-main{inset:50px 30px 70px 20px}
  .hero-mini{width:68px;height:145px;border-width:4px}
  .selector{padding:70px 0}
  .selector-heading h2,.phone-copy h2,.tablet-copy h2,.desktop-copy h2,.mosaic-head h2,.again-left h2,.faq-title h2{
    font-size:36px
  }
  .wall-a{
    left:5%;
    width:155px;height:320px
  }
  .wall-b{
    right:4%;
    width:120px;height:250px
  }
  .phone-wall{min-height:390px}
  .tablet-art{padding:28px 15px}
  .tablet-frame img{height:220px}
  .desktop-art{min-height:320px}
  .desktop-screen{right:20px}
  .desktop-screen img{height:220px}
  .desktop-chip{bottom:10px}
  .mosaic{grid-template-columns:1fr}
  .mosaic-1,.mosaic-4{grid-column:auto;min-height:270px}
  .mosaic figure{min-height:250px}
  .again-right{grid-template-columns:1fr}
  .final-layout{grid-template-columns:1fr;padding:26px 20px}
  .final-layout>a{grid-column:auto}
  .mobile-fixed{
    position:fixed;
    left:9px;right:9px;bottom:9px;
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:9px 9px 9px 12px;
    background:rgba(33,31,27,.97);
    box-shadow:0 15px 38px rgba(0,0,0,.2)
  }
  .mobile-fixed span{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    font-size:12px;
    font-weight:800
  }
  .mobile-fixed img{width:30px}
  .mobile-fixed a{
    padding:9px 14px;
    background:var(--orange);
    color:#fff;
    font-size:12px;
    font-weight:900
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}