/* Ley Choon — Portable LED Traffic Light
   Self-contained marketing + booking page. Brand: forest green + company red,
   traffic-light triad as the accent system. Fonts: Sora (display) / Outfit (text). */

:root{
  --ink:#0e1512; --ink-2:#39433d; --ink-3:#6b756e;
  --paper:#ffffff; --paper-2:#f5f7f5; --paper-3:#ecefec;
  --line:rgba(14,21,18,.10); --line-2:rgba(14,21,18,.16);
  --green:#0b7a3b; --green-d:#075c2c; --green-soft:rgba(11,122,59,.10);
  --amber:#f5a300; --red:#d1122b;
  --shadow:0 1px 2px rgba(14,21,18,.05), 0 12px 34px -18px rgba(14,21,18,.28);
  --sans:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp:'Sora', var(--sans);
  --wrap:1180px;
}

*{box-sizing:border-box}
/* hidden 属性必须压过组件自身的 display，否则 display:flex/grid 会让它继续显示 */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body.gated{overflow:hidden}

body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55;
}
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%}

.eyebrow{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:600; margin:0 0 14px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-weight:600; font-size:15px; padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s; white-space:nowrap}
.btn--sm{padding:9px 18px; font-size:14px}
.btn--full{width:100%}
.btn--solid{background:var(--ink); color:#fff}
.btn--solid:hover{transform:translateY(-1px); background:#000}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{background:var(--paper-2); border-color:var(--ink)}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:14px clamp(18px,4vw,44px); backdrop-filter:saturate(140%) blur(12px);
  background:rgba(255,255,255,.78); border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s}
.nav.is-stuck{border-color:var(--line); box-shadow:0 6px 20px -18px rgba(0,0,0,.5)}
.nav__brand{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:800; font-size:16px; letter-spacing:.02em}
.nav__name{margin-left:4px}
.nav__dot{width:9px; height:9px; border-radius:50%; display:inline-block}
.nav__dot--r{background:var(--red)} .nav__dot--a{background:var(--amber)} .nav__dot--g{background:var(--green)}
.nav__links{display:flex; gap:26px; margin-left:auto; font-size:14.5px; color:var(--ink-2); font-weight:500}
.nav__links a:hover{color:var(--ink)}
.nav__actions{display:flex; align-items:center; gap:12px}
.lang{background:none; border:1px solid var(--line-2); color:var(--ink-2); font-family:var(--sans);
  font-size:13px; font-weight:600; padding:7px 12px; border-radius:999px; cursor:pointer}
.lang:hover{border-color:var(--ink); color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative; min-height:calc(100vh - 60px); display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; gap:40px; padding:clamp(30px,6vh,80px) clamp(18px,4vw,44px) 80px; max-width:var(--wrap); margin:0 auto; overflow:hidden}
.hero__glow{position:absolute; inset:auto -10% -30% auto; width:60%; height:70%; z-index:-1;
  background:radial-gradient(closest-side, var(--green-soft), transparent 70%); filter:blur(20px)}
.hero__title{font-size:clamp(46px,8vw,88px); font-weight:800; margin:0 0 20px}
.hero__sub{font-size:clamp(16px,1.6vw,19px); color:var(--ink-2); max-width:36ch; margin:0 0 30px}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap}
.hero__stats{display:flex; gap:34px; margin-top:46px}
.hero__stats div{display:flex; flex-direction:column}
.hero__stats b{font-family:var(--disp); font-size:26px; font-weight:700}
.hero__stats span{font-size:13px; color:var(--ink-3)}
.hero__scroll{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); width:22px; height:36px;
  border:2px solid var(--line-2); border-radius:12px}
.hero__scroll span{position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:2px; background:var(--ink-3);
  transform:translateX(-50%); animation:scroll 1.6s ease infinite}
@keyframes scroll{0%{opacity:0; top:6px}40%{opacity:1}100%{opacity:0; top:16px}}

/* ---------- signal illustration ---------- */
.hero__visual{display:flex; justify-content:center}
.signal{position:relative; display:flex; flex-direction:column; align-items:center}
.signal--sm{transform:scale(.82)}
.signal__head{position:relative; width:118px; padding:16px 0; border-radius:22px; background:linear-gradient(#20262a,#12171a);
  display:flex; flex-direction:column; align-items:center; gap:15px; box-shadow:0 26px 60px -26px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06)}
.lamp{width:64px; height:64px; border-radius:50%; background:#2a3034; position:relative; transition:all .35s ease;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6)}
.lamp--r{background:#3a2326}.lamp--a{background:#3a3320}.lamp--g{background:#20362a}
.lamp.on-r,.lamp--r.is-on{background:radial-gradient(circle at 40% 35%,#ff6a75,var(--red)); box-shadow:0 0 26px 4px rgba(209,18,43,.6)}
.lamp.on-a,.lamp--a.is-on{background:radial-gradient(circle at 40% 35%,#ffce6b,var(--amber)); box-shadow:0 0 26px 4px rgba(245,163,0,.55)}
.lamp.on-g,.lamp--g.is-on{background:radial-gradient(circle at 40% 35%,#5be08c,var(--green)); box-shadow:0 0 26px 4px rgba(11,122,59,.55)}
.signal__count{font-family:var(--disp); font-weight:700; font-size:22px; color:#ff5b68; letter-spacing:.06em;
  background:#160c0e; padding:4px 12px; border-radius:8px; margin-top:2px; min-width:52px; text-align:center; box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.signal__pole{width:12px; height:120px; background:repeating-linear-gradient(180deg,#f2a900 0 22px,#111 22px 44px)}
.signal__base{width:150px; height:16px; border-radius:6px 6px 3px 3px; background:repeating-linear-gradient(90deg,#f2a900 0 24px,#111 24px 48px)}

/* ---------- bands ---------- */
.band{max-width:var(--wrap); margin:0 auto; padding:clamp(64px,10vh,120px) clamp(18px,4vw,44px)}
.band--dark{max-width:none; background:var(--paper-2)}
.band--dark .band__head p{color:var(--ink-2)}
.band--soft{max-width:none; background:var(--paper-2)}
.band--tint{max-width:none; margin:0; background:var(--paper-2)}
.band__head{max-width:640px; margin:0 auto clamp(40px,6vh,64px); text-align:center}
.band__head h2{font-size:clamp(30px,4.4vw,46px); margin:0 0 16px}
.band__head p{font-size:clamp(15px,1.5vw,18px); color:var(--ink-2)}
.band--soft, .band--dark{margin:0}

/* ---------- value cards ---------- */
.cards{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.card{padding:26px 22px; border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow)}
.card__ic{width:44px; height:44px; border-radius:12px; background:var(--green-soft); color:var(--green);
  display:grid; place-items:center; font-size:22px; margin-bottom:16px}
.card h3{font-size:18px; margin:0 0 8px}
.card p{font-size:14.5px; color:var(--ink-2)}

/* ---------- feature rows ---------- */
.feature{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:clamp(30px,6vw,80px); padding:clamp(48px,8vh,96px) clamp(18px,4vw,44px)}
.feature--rev .feature__media{order:2}
.feature__media{display:flex; justify-content:center; align-items:center; min-height:280px;
  background:radial-gradient(closest-side,var(--paper-2),transparent); border-radius:24px}
.feature__copy h2{font-size:clamp(26px,3.4vw,38px); margin:0 0 16px}
.feature__copy p{font-size:16px; color:var(--ink-2); max-width:44ch}
.control-box{width:210px; padding:22px; border-radius:18px; background:linear-gradient(#1c2226,#0f1417); color:#fff; box-shadow:var(--shadow)}
.control-box__row{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.cb-led{width:16px;height:16px;border-radius:50%}
.cb-led--r{background:var(--red); box-shadow:0 0 12px var(--red)} .cb-led--a{background:var(--amber)} .cb-led--g{background:#2a3a30}
.cb-num{margin-left:auto; font-family:var(--disp); font-size:30px; color:#ff5b68; letter-spacing:.08em}
.control-box__btns{display:flex; gap:8px}
.control-box__btns span{flex:1; text-align:center; padding:8px 0; border-radius:8px; background:rgba(255,255,255,.08); font-size:13px; font-weight:600}

/* ---------- specs ---------- */
.specs{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px)}
.specs__group h3{font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-d); margin:0 0 18px; font-family:var(--sans); font-weight:600}
.specs dl{margin:0}
.specs dl > div{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--line)}
.specs dt{color:var(--ink-3); font-size:14px}
.specs dd{margin:0; font-size:14.5px; color:var(--ink)}
.specs__note{max-width:var(--wrap); margin:28px auto 0; text-align:center; color:var(--ink-3); font-size:13.5px}

/* ---------- pricing ---------- */
.price-grid{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.price{padding:28px 24px; border:1px solid var(--line); border-radius:20px; background:var(--paper); position:relative}
.price--hl{border-color:var(--green); box-shadow:0 20px 46px -26px rgba(11,122,59,.5)}
.price--hl::after{content:'★'; position:absolute; top:18px; right:20px; color:var(--green)}
.price--buy{background:var(--ink); color:#fff; border-color:var(--ink)}
.price__tag{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px}
.price--buy .price__tag{color:#9aa49d}
.price__amt{font-family:var(--disp); font-weight:700; font-size:38px; letter-spacing:-.02em; display:flex; align-items:baseline; gap:2px}
.price__cur{font-size:20px; font-weight:600}
.price__per{font-size:13px; font-weight:500; color:var(--ink-3); margin-left:6px; align-self:flex-end}
.price--buy .price__per{color:#9aa49d}
.price__note{font-size:14px; color:var(--ink-2); margin-top:12px}
.price--buy .price__note{color:#c3ccc5}
.price-grid__foot{max-width:var(--wrap); margin:26px auto 0; text-align:center; color:var(--ink-3); font-size:13.5px}

/* ---------- gallery ---------- */
.gallery{max-width:var(--wrap); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.shot{margin:0; border-radius:16px; overflow:hidden; cursor:pointer; background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.shot:hover{transform:translateY(-3px); box-shadow:0 24px 50px -24px rgba(14,21,18,.4)}
.shot img{display:block; width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; padding:16px; transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{padding:12px 16px; font-size:13.5px; font-weight:600; color:var(--ink-2); border-top:1px solid var(--line)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center;
  padding:30px; background:rgba(238,242,246,.94); backdrop-filter:blur(4px)}
.lightbox__inner{margin:0; max-width:min(880px,92vw); display:flex; flex-direction:column; gap:14px}
.lightbox__inner img{max-width:100%; max-height:78vh; object-fit:contain; background:#fff; border-radius:14px}
.lightbox__inner figcaption{color:var(--ink); text-align:center; font-size:14.5px}
.lightbox__close{position:absolute; top:18px; right:22px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:#fff; color:var(--ink); font-size:26px; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(12,20,32,.12)}
.lightbox__close:hover{background:var(--paper-2)}

/* ---------- booking ---------- */
.booking{max-width:1020px; margin:0 auto; display:grid; grid-template-columns:1.35fr .95fr; gap:22px; align-items:stretch}
.booking__panel{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:var(--shadow)}
.seg{display:inline-flex; background:var(--paper-3); border-radius:999px; padding:4px; margin-bottom:22px}
.seg__btn{border:none; background:none; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink-2);
  padding:9px 22px; border-radius:999px; cursor:pointer; transition:.2s}
.seg__btn.is-on{background:var(--paper); color:var(--ink); box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
.daterow{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; margin-bottom:18px}
.datefield{border:1px solid var(--line-2); border-radius:14px; padding:12px 16px; cursor:default}
.datefield.is-active{border-color:var(--ink); box-shadow:0 0 0 3px var(--green-soft)}
.datefield span{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.datefield b{font-family:var(--disp); font-size:16px; font-weight:600}
.daterow__arrow{color:var(--ink-3)}
.cal__nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal__nav button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper);
  cursor:pointer; font-size:18px; color:var(--ink-2)}
.cal__nav button:hover{border-color:var(--ink); color:var(--ink)}
.cal__months{display:flex; gap:clamp(20px,6vw,90px); font-family:var(--disp); font-weight:600; font-size:15px}
.cal__grids{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,4vw,32px)}
@media (max-width:560px){ .cal__grids{grid-template-columns:1fr} .cal__grids .cal__month:nth-child(2){display:none} .cal__months span:nth-child(2){display:none} }
.cal__month{}
.cal__dow,.cal__days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal__dow span{text-align:center; font-size:11px; color:var(--ink-3); padding:6px 0}
.cal__day{aspect-ratio:1; border:none; background:none; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  cursor:pointer; border-radius:9px; position:relative}
.cal__day:disabled{color:var(--paper-3); cursor:not-allowed}
.cal__day.is-empty{visibility:hidden}
.cal__day:not(:disabled):hover{background:var(--paper-2)}
.cal__day.in-range{background:var(--green-soft); border-radius:0}
.cal__day.is-start,.cal__day.is-end{background:var(--ink); color:#fff}
.cal__day.is-start{border-radius:9px 0 0 9px}.cal__day.is-end{border-radius:0 9px 9px 0}
.cal__day.is-start.is-end{border-radius:9px}
.booking__side{display:flex; flex-direction:column; gap:22px; min-height:0}
.qtycard__label{display:flex; flex-direction:column; gap:3px}
.qtycard__label > span{font-size:14.5px; color:var(--ink-2)}
.qtycard__label small{font-size:11.5px; color:var(--ink-3); line-height:1.4; max-width:34ch}
.qtycard{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--paper);
  border:1px solid var(--line); border-radius:22px; padding:18px 24px; box-shadow:var(--shadow)}
.qty__ctl{display:flex; align-items:center; gap:16px; flex-shrink:0}
.qty__ctl button{width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); font-size:18px; cursor:pointer}
.qty__ctl b{font-family:var(--disp); font-size:18px; min-width:20px; text-align:center}

.summary{background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:var(--shadow);
  flex:1 1 auto; display:flex; flex-direction:column}
.summary__mode{font-family:var(--disp); font-weight:700; font-size:19px; margin:0 0 18px}
.summary__lines{display:flex; flex-direction:column; gap:12px; min-height:22px; font-size:14px; color:var(--ink-2)}
.summary__lines .ln{display:flex; justify-content:space-between; gap:12px}
.summary__lines .ln b{color:var(--ink); font-weight:600}
.summary__total{display:flex; justify-content:space-between; align-items:baseline; margin:auto 0 10px; padding-top:20px; border-top:1px solid var(--line)}
.summary__total span{font-size:14px; color:var(--ink-2)}
.summary__total b{font-family:var(--disp); font-size:28px; font-weight:700}
.summary__hint{font-size:13px; color:var(--ink-3); margin:0 0 16px}
.summary__wa{display:block; text-align:center; margin-top:10px; font-size:14px; font-weight:600; color:var(--green)}
.summary__fine{font-size:11.5px; color:var(--ink-3); margin-top:14px; line-height:1.5}

/* ---------- footer ---------- */
.foot{background:var(--paper-2); border-top:1px solid var(--line); color:var(--ink-2); text-align:center; padding:48px 20px}
.foot__brand{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--ink); font-family:var(--disp); margin-bottom:12px}
.foot p{font-size:14px; margin:4px 0}
.foot__fine{font-size:12px; color:var(--ink-3)}
.foot__link{color:var(--green); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .hero__scroll span{animation:none} }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; min-height:auto; text-align:center; padding-top:40px}
  .hero__sub{margin-left:auto; margin-right:auto}
  .hero__cta,.hero__stats{justify-content:center}
  .hero__visual{margin-top:36px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature--rev .feature__media{order:0}
  .specs{grid-template-columns:1fr}
  .booking{grid-template-columns:1fr}
  .summary{position:static}
  .nav__links{display:none}
}
@media (max-width:520px){
  .cards,.price-grid,.gallery{grid-template-columns:1fr}
  .hero__stats{gap:22px}
}

/* ---------- checkout ---------- */
.checkout__h{font-family:var(--disp); font-size:19px; font-weight:700; margin:0 0 20px}
/* 左栏容器：预订面板与详情面板共用同一格 */
.booking__left{position:relative; min-width:0}
.booking__panel--details{display:flex; flex-direction:column}
.panel__back{display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  background:none; border:0; padding:0; margin:0 0 14px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink-3); transition:color .2s}
.panel__back:hover{color:var(--ink)}
.summary__pay{margin:12px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.f{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:var(--ink-2); grid-column:1/-1}
.f > span{display:block}
.f--half{grid-column:auto}
.f i{font-style:normal; font-weight:400; color:var(--ink-3); margin-left:4px}
.f input, .f select{font-family:var(--sans); font-size:15px; font-weight:400; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line-2); border-radius:11px; background:var(--paper); outline:none;
  transition:border-color .2s, box-shadow .2s; width:100%}
.f input:focus, .f select:focus{border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft)}
.f input[aria-invalid="true"]{border-color:var(--red); box-shadow:0 0 0 3px rgba(209,18,43,.10)}
@media (max-width:1040px){ .fgrid{grid-template-columns:1fr} .f--half{grid-column:1/-1} }
.checkout__err{margin:16px 0 0; font-size:14px; font-weight:600; color:var(--red)}
.checkout__fallback{margin-top:16px; padding:13px 15px; border-radius:12px; font-size:14px;
  background:rgba(245,163,0,.10); border:1px solid rgba(245,163,0,.28); color:var(--ink-2)}
.checkout__fallback a{font-weight:600; text-decoration:underline}

.cancelmsg{max-width:1020px; margin:0 auto 18px; padding:14px 16px; border-radius:12px; font-size:14.5px;
  background:rgba(245,163,0,.10); border:1px solid rgba(245,163,0,.28); color:var(--ink-2)}
.cancelmsg a{font-weight:600; text-decoration:underline}

/* ---------- confirmation / invoice ---------- */
.confirm{max-width:1020px; margin:0 auto; background:var(--paper); border:1px solid var(--line);
  border-radius:22px; padding:32px 30px; box-shadow:var(--shadow)}
.confirm__head{display:flex; gap:15px; align-items:flex-start; margin-bottom:24px}
.confirm__tick{flex:none; width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center; font-size:19px; font-weight:700}
.confirm__head h3{font-family:var(--disp); font-size:21px; margin:0 0 5px}
.confirm__head p{font-size:14.5px; color:var(--ink-3); margin:0}
.confirm__cta{display:flex; flex-wrap:wrap; gap:11px; margin-top:22px}

.inv{border:1px solid var(--line); border-radius:14px; padding:24px}
.invhead{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; padding-bottom:18px;
  border-bottom:1px solid var(--line); margin-bottom:18px}
.invhead h3{font-family:var(--disp); font-size:17px; margin:0 0 4px}
.invhead .m{font-size:12.5px; color:var(--ink-3); text-align:right; line-height:1.7}
.paid{display:inline-block; margin-top:5px; font-size:11px; font-weight:700; letter-spacing:.08em;
  color:var(--green); background:var(--green-soft); padding:3px 9px; border-radius:5px}
.invbill{font-size:13px; color:var(--ink-2); margin-bottom:16px; line-height:1.8}
.invt{width:100%; border-collapse:collapse; font-size:13.5px}
.invt th{text-align:left; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:0 10px 9px 0; border-bottom:1px solid var(--line)}
.invt td{padding:12px 10px 12px 0; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.invt .amt{text-align:right; white-space:nowrap; color:var(--ink); font-weight:600}
.invtot{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px;
  font-family:var(--disp); font-weight:700; font-size:18px}
.invmeta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px;
  color:var(--ink-3); line-height:1.75}

@media print{
  body>*:not(#confirm){display:none !important}
  .confirm{border:0; box-shadow:none; padding:0; margin:0; max-width:none}
  .confirm__head, .confirm__cta{display:none !important}
  .inv{border:0; padding:0}
}

/* ---------- 站点条：回主站 + 横向跳板块 ---------- */
/* ---------- 面板切换：左栏两步互斥，右侧报价始终可见 ---------- */
.booking__panel{transition:opacity .24s ease, transform .24s ease}
.booking__panel.is-out{opacity:0; transform:translateY(-8px) scale(.995); pointer-events:none}
.booking{transition:opacity .26s ease, transform .26s ease}
.booking.is-out{opacity:0; transform:translateY(-10px) scale(.99); pointer-events:none}
@keyframes panelIn{from{opacity:0; transform:translateY(20px) scale(.985)} to{opacity:1; transform:none}}
.panel-in{animation:panelIn .42s cubic-bezier(.2,.75,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .booking{transition:none}
  .booking.is-out{opacity:0; transform:none}
  .panel-in{animation:none}
}