/* The preorder pages: one idea at a time. Ceramic for the decision, dark for the depth, the same render throughout */
.po h1,.po h2{margin:0;font-weight:420;letter-spacing:-.025em;line-height:1.04}
.po .top{position:absolute}
.light{--bg:#F3F1ED;   /* the ceramic as its images decode, so no edge shows */
  --fg:#1c1e1a;--dim:rgba(28,30,26,.66);--faint:rgba(28,30,26,.46);--line:rgba(28,30,26,.14);--teal:#1F8A72;color-scheme:light;background:var(--bg);color:var(--fg)}
.light .arc{stroke:#1F8A72}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:16px 34px;background:var(--fg);color:var(--bg);font:450 16px/1 var(--sans);cursor:pointer;transition:transform .25s var(--out),opacity .25s var(--out)}
.btn:hover{opacity:.86}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5;cursor:progress}
.fine{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.fine a,.more:hover{text-decoration:underline;text-underline-offset:3px}
.soft{color:var(--faint)}
.msg{min-height:1.4em;margin-top:10px;font-size:14px;color:var(--dim)}
.msg:empty{display:none}
.msg.err{color:#b4532f}
.intro-fine{padding:0 22px 18px;text-align:center;font-size:12px;line-height:1.4;color:var(--faint)}

/* the intro */
.intro-page{min-height:100svh}
.intro{min-height:100svh;display:grid;grid-template-rows:1fr auto auto;overflow:hidden}
.intro-copy{align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(34px,6.4vh,84px) 22px 8px;animation:rise .9s var(--out) both}
.intro-mark svg{display:block;height:clamp(24px,3.2vh,32px);width:auto}
.intro h1{margin-top:clamp(18px,3vh,28px);font-size:clamp(2.6rem,5.6vw,5.2rem);font-weight:300}
.intro-copy p{margin-top:16px;font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.45;color:var(--dim)}
.intro .btn{margin-top:clamp(22px,3.6vh,34px)}
.more{margin-top:16px;font-size:16px;color:var(--teal)}
.intro-art img,.l-end-art img{width:100%;height:auto}
/* the row unrolls from flat to bent */
.intro-art img{animation:unroll 1.7s var(--out) .15s both}
@keyframes unroll{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* the decision */
.reserve{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:center;max-width:1320px;margin:0 auto;padding-top:84px;padding-bottom:40px}
.reserve-art img{width:100%;height:auto}
.reserve h1{font-size:clamp(2.3rem,4.2vw,3.9rem);font-weight:300}
.amount{margin-top:22px;font-size:clamp(3rem,5.4vw,5rem);line-height:1;font-weight:300;letter-spacing:-.03em}
.amount small{font-size:.3em;letter-spacing:0;color:var(--dim)}
.expect{margin-top:12px;font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.45;color:var(--dim)}
.deal{list-style:none;margin:24px 0 26px;padding:0;display:grid;gap:9px;line-height:1.45;color:var(--dim)}
.deal strong{font-weight:500;color:var(--fg)}

@media (max-width:860px){
  .reserve{grid-template-columns:minmax(0,1fr);padding-top:64px}
  .reserve-art{max-width:420px;margin:0 auto}
  .reserve .btn{width:100%}
  /* the row is too wide for a phone: show it large, and start from the bent end */
  .intro-art{padding:0;overflow:hidden}
  .intro-art img{width:190%;max-width:none;margin-left:-90%}
}
@media (prefers-reduced-motion:reduce){.intro-copy,.intro-art img{animation:none}}