/* ============================================================
   Christmas Toy Slider — official site
   Look: lamplit toy-shop ledger. Warm pine, brass, deep green,
   candy red. Layout runs on a horizontal "shelf rail" motif
   rather than the usual stacked marketing blocks.
   ============================================================ */

:root{
  --pine-900:#140d08;
  --pine-800:#1e130b;
  --pine-700:#2a1a0f;
  --pine-600:#3a2415;
  --pine-500:#4d301c;
  --wood:#6b4426;
  --brass:#c9973f;
  --brass-hi:#f0cd7e;
  --brass-lo:#8a6423;
  --paper:#f4e6c6;
  --paper-2:#e8d5ab;
  --ink:#3c2410;
  --holly:#1d6144;
  --holly-hi:#2b8a60;
  --berry:#a8232c;
  --berry-hi:#cf3a3f;
  --frost:#9fc7e8;
  --snow:#eef5fb;

  --shell:min(1220px, 92vw);
  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;

  --serif:"Cinzel", "Playfair Display", Georgia, "Times New Roman", serif;
  --script:"Mountains of Christmas", "Cinzel", Georgia, serif;
  --body:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:86px}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  color:#e6d5b6;
  background:var(--pine-900);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--brass-hi); text-decoration:none}
a:hover{color:#ffe6ac}

/* ---------- ambient snow + lamp glow ---------- */
.ambient{position:fixed; inset:0; pointer-events:none; z-index:0}
.ambient__lamp{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
}
.ambient__lamp--a{width:52vw; height:52vw; left:-14vw; top:-12vw;
  background:radial-gradient(circle,#8a5a1e,transparent 68%)}
.ambient__lamp--b{width:44vw; height:44vw; right:-12vw; top:38vh;
  background:radial-gradient(circle,#1c4f6b,transparent 70%)}
.ambient__lamp--c{width:40vw; height:40vw; left:22vw; bottom:-16vw;
  background:radial-gradient(circle,#5b2020,transparent 72%)}
#snow{position:fixed; inset:0; z-index:1; pointer-events:none}

/* ============================================================
   TOP NAV — sticky brass rail. Legal links live here, up top,
   as a right-hand "Documents" cluster.
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:60;
  background:linear-gradient(180deg,rgba(20,13,8,.97),rgba(20,13,8,.88));
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,151,63,.34);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.nav__in{
  width:var(--shell); margin:0 auto;
  display:flex; align-items:center; gap:22px;
  height:74px; min-width:0;
}
.nav__brand{display:flex; align-items:center; gap:11px; flex:0 1 auto; min-width:0}
.nav__brand img{height:40px; width:auto}
.nav__brandtext{
  font-family:var(--serif); font-weight:700; font-size:15px;
  letter-spacing:.06em; color:var(--paper); line-height:1.1;
  text-transform:uppercase;
}
.nav__brandtext small{display:block; font-size:10px; letter-spacing:.2em;
  color:var(--brass); font-weight:600}

.nav__sheet{display:flex; align-items:center; gap:22px; flex:1 1 auto}
.nav__links{display:flex; gap:4px; margin-left:8px; flex:1 1 auto}
.nav__links a{
  font-size:13.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:#c3ab86;
  padding:9px 13px; border-radius:var(--r-sm);
  transition:color .18s, background .18s;
}
.nav__links a:hover{color:var(--brass-hi); background:rgba(201,151,63,.1)}

/* legal cluster, top-right */
.nav__docs{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.nav__docs::before{
  content:"Legal"; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:#7d6849; margin-right:9px; font-weight:700;
}
.nav__docs a{
  font-size:12.5px; font-weight:600; color:#b39a74;
  padding:7px 11px; border-radius:var(--r-sm);
  border:1px solid transparent; transition:.18s;
}
.nav__docs a:hover{color:var(--paper); border-color:rgba(201,151,63,.42);
  background:rgba(201,151,63,.09)}

/* The toggle draws its own bars rather than relying on a glyph, so it renders
   identically no matter which fallback font the device supplies. */
.nav__burger{
  display:none; background:none; border:1px solid rgba(201,151,63,.4);
  border-radius:var(--r-sm); width:42px; height:38px; cursor:pointer;
  position:relative; padding:0;
}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after{
  position:absolute; left:50%; width:20px; height:2px; border-radius:2px;
  background:var(--brass-hi); transform:translateX(-50%);
  transition:transform .2s, opacity .2s;
}
.nav__burger span{top:50%; margin-top:-1px}
.nav__burger span::before,.nav__burger span::after{content:""; left:0; transform:none}
.nav__burger span::before{top:-6px}
.nav__burger span::after{top:6px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{top:0; transform:rotate(45deg)}
.nav.is-open .nav__burger span::after{top:0; transform:rotate(-45deg)}

/* ============================================================
   BUTTONS — carved wood plaques
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--serif); font-weight:700; font-size:15px;
  letter-spacing:.09em; text-transform:uppercase;
  padding:15px 30px; border-radius:var(--r-md);
  border:2px solid var(--brass-lo);
  box-shadow:0 5px 0 rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .13s, box-shadow .13s, filter .18s;
  cursor:pointer;
}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.42)}
.btn--green{background:linear-gradient(180deg,#2b8a60,#155038); color:#fff5dd}
.btn--green:hover{filter:brightness(1.12); color:#fff}
.btn--red{background:linear-gradient(180deg,#cf3a3f,#7d1a20); color:#fff2e0}
.btn--red:hover{filter:brightness(1.12); color:#fff}
.btn--wood{background:linear-gradient(180deg,#5a3a20,#301c0e); color:var(--brass-hi)}
.btn--wood:hover{filter:brightness(1.18)}

/* ============================================================
   HERO — asymmetric: phone tilted left, copy right of it,
   sitting on a wooden shelf edge that runs off-screen.
   ============================================================ */
.hero{
  position:relative; z-index:2;
  padding:64px 0 0;
  background:
    linear-gradient(180deg,rgba(20,13,8,.72),rgba(20,13,8,.9) 62%,var(--pine-900)),
    url("../assets/img/bg-workshop.jpg") center 18%/cover no-repeat;
}
.hero__in{
  width:var(--shell); margin:0 auto;
  display:grid; grid-template-columns:0.92fr 1.08fr; gap:52px; align-items:center;
  padding-bottom:96px;
}
.hero__stage{position:relative; display:flex; justify-content:center; min-width:0}
.hero__copy{min-width:0}

/* Device frame.
   The shots are 1284x2778, so the frame is sized from a height cap and the
   width follows from that ratio — never the other way round, or the screen
   inside would be squeezed. */
.phone{
  --shot-h:600px;
  position:relative;
  height:calc(var(--shot-h) + 18px);
  width:calc(var(--shot-h) * 1284 / 2778 + 18px);
  border-radius:36px;
  background:linear-gradient(160deg,#2c1c10,#120b06);
  padding:9px;
  border:1px solid rgba(201,151,63,.4);
  box-shadow:0 34px 70px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.11);
}
.phone img{border-radius:28px; width:100%; height:100%; object-fit:contain}
.phone::after{
  content:""; position:absolute; left:50%; top:16px; transform:translateX(-50%);
  width:74px; height:6px; border-radius:99px; background:#0a0603;
}
.phone--tilt{transform:rotate(-4.5deg)}

/* floating toy stickers around the hero phone */
.toy{position:absolute; width:92px; filter:drop-shadow(0 12px 22px rgba(0,0,0,.6));
  animation:bob 5.4s ease-in-out infinite}
.toy--a{left:-52px; top:14%; animation-delay:-.4s}
.toy--b{right:-30px; top:-4%; width:96px; animation-delay:-1.9s}
.toy--c{left:-44px; bottom:9%; width:86px; animation-delay:-3.1s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-5deg)}
  50%{transform:translateY(-15px) rotate(5deg)}}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass); margin:0 0 18px;
}
.eyebrow::before{content:""; width:34px; height:2px; background:var(--brass); opacity:.65}

.hero__logo{margin:0 0 20px; width:100%; max-width:490px; height:auto}
.hero h1{margin:0; max-width:100%}
.lede{font-size:19px; line-height:1.66; color:#dcc7a2; max-width:52ch; margin:0 0 26px}
.lede b{color:var(--brass-hi); font-weight:700}

.hero__actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}

/* fact chips on a brass rail */
.rail{display:flex; gap:0; flex-wrap:wrap; border-top:1px solid rgba(201,151,63,.28);
  padding-top:20px}
.rail__item{padding-right:30px; margin-right:30px; border-right:1px solid rgba(201,151,63,.2)}
.rail__item:last-child{border-right:0; margin-right:0; padding-right:0}
.rail__n{font-family:var(--serif); font-size:29px; font-weight:800;
  color:var(--brass-hi); line-height:1}
.rail__l{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#9d8763; font-weight:700; margin-top:5px}

/* ============================================================
   SHELF DIVIDER — a wooden plank with brackets
   ============================================================ */
.plank{
  position:relative; z-index:2; height:22px;
  background:linear-gradient(180deg,#7b4f2b,#43280f 55%,#2a180a);
  box-shadow:0 8px 26px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,220,160,.28);
  border-top:1px solid rgba(255,214,150,.28);
}
.plank::before,.plank::after{
  content:""; position:absolute; top:100%; width:26px; height:34px;
  background:linear-gradient(180deg,#5c391c,#291708);
  clip-path:polygon(0 0,100% 0,44% 100%);
}
.plank::before{left:11%} .plank::after{right:11%}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.sec{position:relative; z-index:2; padding:96px 0}
.sec__in{width:var(--shell); margin:0 auto}
.sec--dark{background:linear-gradient(180deg,var(--pine-900),var(--pine-800))}
.sec--wood{
  background:
    linear-gradient(180deg,rgba(20,13,8,.93),rgba(20,13,8,.97)),
    url("../assets/img/bg-workshop.jpg") center/cover fixed;
}

.head{max-width:70ch; margin:0 0 52px}
.head--center{margin-left:auto; margin-right:auto; text-align:center}
.head h2{
  font-family:var(--serif); font-size:clamp(30px,4.2vw,46px); font-weight:800;
  line-height:1.12; margin:0 0 15px; color:var(--paper);
  letter-spacing:.01em;
}
.head h2 em{font-style:normal; color:var(--brass-hi)}
.head p{font-size:18px; color:#c4ae8b; margin:0}

/* ============================================================
   HOW IT WORKS — numbered rail, 4 steps left to right
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  position:relative}
.steps::before{
  content:""; position:absolute; left:6%; right:6%; top:38px; height:2px;
  background:linear-gradient(90deg,transparent,var(--brass-lo) 12%,var(--brass) 50%,var(--brass-lo) 88%,transparent);
  opacity:.55;
}
.step{padding:0 20px; text-align:center; position:relative}
.step__n{
  width:76px; height:76px; margin:0 auto 20px;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:27px; font-weight:800; color:var(--pine-900);
  background:radial-gradient(circle at 34% 28%,var(--brass-hi),var(--brass) 52%,var(--brass-lo));
  border-radius:50%;
  border:3px solid var(--pine-800);
  box-shadow:0 8px 24px rgba(0,0,0,.6), inset 0 -3px 8px rgba(0,0,0,.28);
  position:relative; z-index:1;
}
.step h3{font-family:var(--serif); font-size:19px; margin:0 0 9px; color:var(--paper);
  letter-spacing:.03em}
.step p{font-size:15.5px; color:#b8a382; margin:0; line-height:1.6}

/* ============================================================
   SPLIT TYPES — the three ways a gift is cut. Little diagram cards.
   ============================================================ */
.cuts{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px}
.cut{
  background:linear-gradient(170deg,rgba(58,36,21,.9),rgba(26,16,9,.94));
  border:1px solid rgba(201,151,63,.3);
  border-radius:var(--r-lg); padding:28px 26px 26px;
  box-shadow:0 16px 40px rgba(0,0,0,.42);
}
.cut__grid{
  width:112px; height:112px; margin:0 auto 20px;
  display:grid; gap:5px; padding:6px;
  background:rgba(0,0,0,.4); border-radius:12px;
  border:2px solid rgba(201,151,63,.34);
}
.cut__grid span{background:rgba(201,151,63,.14); border-radius:5px}
.cut__grid span.on{background:linear-gradient(160deg,var(--holly-hi),var(--holly));
  box-shadow:inset 0 0 0 1px rgba(255,230,180,.28)}
.cut--lr .cut__grid{grid-template-columns:1fr 1fr; grid-template-rows:1fr}
.cut--tb .cut__grid{grid-template-columns:1fr; grid-template-rows:1fr 1fr}
.cut--q  .cut__grid{grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr}
.cut h3{font-family:var(--serif); font-size:19px; margin:0 0 8px; color:var(--brass-hi);
  text-align:center}
.cut p{font-size:15px; color:#b09a79; margin:0; text-align:center; line-height:1.58}
.cut__tag{display:block; text-align:center; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:#7f6a4a; margin-top:12px; font-weight:700}

/* ============================================================
   SCREENS — horizontal scroll shelf of phones
   ============================================================ */
.shelf{
  display:flex; gap:30px; overflow-x:auto; padding:12px 0 42px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--brass-lo) transparent;
}
.shelf::-webkit-scrollbar{height:9px}
.shelf::-webkit-scrollbar-track{background:rgba(0,0,0,.4); border-radius:99px}
.shelf::-webkit-scrollbar-thumb{background:var(--brass-lo); border-radius:99px}
.shelf__card{flex:0 0 auto; scroll-snap-align:center; text-align:center; max-width:260px}
.shelf__card .phone{--shot-h:520px; transition:transform .3s}
.shelf__card:hover .phone{transform:translateY(-11px)}
.shelf__card h4{font-family:var(--serif); font-size:17px; margin:20px 0 5px;
  color:var(--brass-hi); letter-spacing:.05em}
.shelf__card p{font-size:14.5px; color:#a48f6e; margin:0; padding:0 6px; line-height:1.55}
.hint{font-size:13px; color:#7f6a4a; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; font-weight:700}

/* ============================================================
   CHAPTERS — stacked ledger rows with a chapter numeral
   ============================================================ */
.chapters{border-top:1px solid rgba(201,151,63,.26)}
.chap{
  display:grid; grid-template-columns:112px 1fr auto; gap:30px; align-items:center;
  padding:30px 8px; border-bottom:1px solid rgba(201,151,63,.18);
  transition:background .22s, padding-left .22s;
}
.chap:hover{background:rgba(201,151,63,.055); padding-left:20px}
.chap__no{
  font-family:var(--serif); font-size:46px; font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--brass); text-align:center;
}
.chap:hover .chap__no{color:var(--brass-hi); -webkit-text-stroke:0}
.chap h3{font-family:var(--serif); font-size:24px; margin:0 0 7px; color:var(--paper);
  letter-spacing:.04em}
.chap p{margin:0; font-size:16px; color:#b09a79; max-width:60ch}
.chap__meta{text-align:right; white-space:nowrap}
.chap__meta b{display:block; font-family:var(--serif); font-size:21px;
  color:var(--brass-hi)}
.chap__meta span{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#7f6a4a; font-weight:700}
.chap__board{
  display:inline-block; margin-top:9px; font-size:12px; font-weight:700;
  letter-spacing:.1em; color:var(--holly-hi);
  border:1px solid rgba(43,138,96,.5); border-radius:99px; padding:3px 11px;
}

/* ============================================================
   TOY CASE — the 20 gifts, as a display cabinet
   ============================================================ */
.case{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:26px; border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(58,36,21,.62),rgba(20,13,8,.86));
  border:2px solid rgba(201,151,63,.34);
  box-shadow:inset 0 2px 20px rgba(0,0,0,.6), 0 20px 50px rgba(0,0,0,.44);
}
.case__slot{
  aspect-ratio:1; display:grid; place-items:center; gap:6px;
  background:rgba(0,0,0,.32); border-radius:var(--r-md);
  border:1px solid rgba(201,151,63,.18);
  padding:12px; transition:transform .22s, border-color .22s;
}
.case__slot:hover{transform:translateY(-6px); border-color:rgba(201,151,63,.55)}
.case__slot img{width:74%; filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
.case__slot span{font-size:11.5px; letter-spacing:.11em; text-transform:uppercase;
  color:#9a855f; font-weight:700; text-align:center}
.case__slot--text{
  /* The remaining twelve toys are listed as text rather than shown, so these
     three tiles share the last row evenly instead of leaving square gaps. */
  aspect-ratio:auto; padding:18px 14px;
  font-family:var(--serif); font-size:14.5px; color:#b09a79; text-align:center;
  line-height:1.5; letter-spacing:.03em;
}
.case__slot--text:first-of-type{grid-column:span 1}

/* ============================================================
   FEATURES — two-column ledger cards
   ============================================================ */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px}
.card{
  background:linear-gradient(168deg,rgba(244,230,198,.055),rgba(0,0,0,.3));
  border:1px solid rgba(201,151,63,.26);
  border-left:3px solid var(--brass);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:28px 26px;
  transition:transform .2s, border-left-color .2s;
}
.card:hover{transform:translateX(6px); border-left-color:var(--berry-hi)}
.card__ico{width:44px; margin-bottom:16px; filter:drop-shadow(0 5px 10px rgba(0,0,0,.5))}
.card h3{font-family:var(--serif); font-size:19px; margin:0 0 10px; color:var(--brass-hi);
  letter-spacing:.03em}
.card p{margin:0; font-size:15.5px; color:#b8a382; line-height:1.62}

/* ============================================================
   FAQ — accordion on parchment
   ============================================================ */
.faq{max-width:840px; margin:0 auto}
.qa{
  border-bottom:1px solid rgba(201,151,63,.22);
}
.qa summary{
  cursor:pointer; list-style:none; padding:22px 46px 22px 4px; position:relative;
  font-family:var(--serif); font-size:18px; color:var(--paper); letter-spacing:.02em;
  transition:color .18s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brass-hi)}
.qa summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:25px; color:var(--brass); line-height:1; transition:transform .22s;
}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.qa p{margin:0 0 24px; font-size:16px; color:#b8a382; padding-right:46px; line-height:1.68}

/* ============================================================
   CLOSING CALL — parchment banner
   ============================================================ */
.finale{
  width:var(--shell); margin:0 auto; text-align:center;
  background:linear-gradient(170deg,var(--paper),var(--paper-2));
  border-radius:var(--r-lg); padding:62px 40px;
  border:3px solid var(--brass-lo);
  box-shadow:0 26px 64px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.35);
  position:relative;
}
.finale::before,.finale::after{
  content:""; position:absolute; width:56px; height:56px;
  border:3px solid var(--brass-lo); opacity:.55;
}
.finale::before{left:16px; top:16px; border-right:0; border-bottom:0;
  border-radius:12px 0 0 0}
.finale::after{right:16px; bottom:16px; border-left:0; border-top:0;
  border-radius:0 0 12px 0}
.finale h2{font-family:var(--serif); font-size:clamp(28px,4vw,42px); color:var(--ink);
  margin:0 0 14px; font-weight:800}
.finale p{font-size:18px; color:#6a4a26; margin:0 auto 30px; max-width:56ch}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:2;
  background:var(--pine-900); border-top:1px solid rgba(201,151,63,.26);
  padding:52px 0 34px; margin-top:96px;
}
.foot__in{width:var(--shell); margin:0 auto;
  display:flex; justify-content:space-between; gap:36px; flex-wrap:wrap}
.foot__brand img{height:44px; margin-bottom:14px}
.foot__brand p{margin:0; font-size:14.5px; color:#8d7855; max-width:40ch; line-height:1.6}
.foot__cols{display:flex; gap:56px; flex-wrap:wrap}
.foot__col h5{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 14px; font-weight:800}
.foot__col a{display:block; font-size:14.5px; color:#a48f6e; padding:4px 0}
.foot__col a:hover{color:var(--brass-hi)}
.foot__bar{
  width:var(--shell); margin:38px auto 0; padding-top:22px;
  border-top:1px solid rgba(201,151,63,.16);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:13px; color:#7a6749;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .phone{--shot-h:520px}
  .hero__in{grid-template-columns:1fr; gap:44px; text-align:center; padding-bottom:76px}
  .hero__stage{order:-1}
  .eyebrow{justify-content:center}
  .hero__logo{margin-inline:auto}
  .lede{margin-inline:auto}
  .hero__actions{justify-content:center}
  .rail{justify-content:center}
  .toy--a,.toy--c{display:none}
  .case{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(2,1fr); gap:40px 0}
  .steps::before{display:none}
  .cuts{grid-template-columns:1fr}
  .head--center{text-align:center}
}

@media (max-width:800px){
  /* Both nav groups collapse into one dropdown sheet, so the bar keeps only
     the brand and the toggle no matter how many links there are. */
  .nav__sheet{
    display:none;
    position:absolute; top:74px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(20,13,8,.99); padding:10px 6vw 20px;
    border-bottom:1px solid rgba(201,151,63,.3);
    box-shadow:0 18px 40px rgba(0,0,0,.6);
  }
  .nav.is-open .nav__sheet{display:flex}
  .nav__links,.nav__docs{flex-direction:column; align-items:stretch; gap:0; margin:0}
  .nav__docs::before{margin:16px 0 2px}
  .nav__links a,.nav__docs a{
    padding:13px 4px; border:0; border-bottom:1px solid rgba(201,151,63,.12);
  }
  .nav__burger{display:block; margin-left:auto; flex:0 0 auto}
  .nav__brandtext{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .chap{grid-template-columns:64px 1fr; gap:18px}
  .chap__no{font-size:32px}
  .chap__meta{grid-column:2; text-align:left; margin-top:6px}
  .foot__in{flex-direction:column}
  .foot__cols{gap:34px}
}

@media (max-width:560px){
  .case{grid-template-columns:repeat(2,1fr)}
  .phone{--shot-h:440px}
  .shelf__card .phone{--shot-h:430px}
  body{font-size:16px}
  .sec{padding:70px 0}
  .steps{grid-template-columns:1fr}
  .nav__brandtext small{display:none}
  .finale{padding:44px 24px}
  .rail__item{padding-right:20px; margin-right:20px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}