/* ============================================================
   order.html — format selection / checkout
   ============================================================ */

.ord-body{background:var(--paper)}

/* ── nav ──────────────────────────────────────────────── */
.ord-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(26,29,40,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ord-nav__in{display:flex; align-items:center; justify-content:space-between; gap:20px; height:62px}
.ord-back{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  color:var(--body-dark); text-decoration:none; font-size:14.5px; font-weight:500;
  transition:color .18s ease;
}
.ord-back:hover{color:var(--accent-lt)}
.ord-nav__title{
  font-family:var(--f-display); font-size:16px; color:#EDF2F7; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.ord-nav__title em{font-style:normal; color:var(--mute-dark)}
@media (max-width:560px){.ord-nav__title{display:none}}

/* ── head ─────────────────────────────────────────────── */
.ord-main{padding-block:clamp(44px,6.5vw,80px) clamp(56px,8vw,100px)}
.ord-head{max-width:640px; margin-bottom:clamp(36px,5vw,56px)}
.ord-h1{font-size:clamp(30px,4.6vw,48px); letter-spacing:-.026em; margin:0 0 18px; text-wrap:balance}
.ord-lede{font-size:clamp(16px,1.8vw,18.5px); color:var(--body); max-width:52ch; margin:0}

/* ── format cards ─────────────────────────────────────── */
.ord-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:20px; align-items:stretch;
}
.fmt{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(24px,3.2vw,32px);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.fmt:hover{transform:translateY(-3px); box-shadow:0 18px 38px -22px rgba(26,29,40,.4)}
@media (prefers-reduced-motion:reduce){.fmt:hover{transform:none}}

.fmt--feature{
  border-color:rgba(95,168,208,.55);
  box-shadow:0 0 0 1px rgba(95,168,208,.28), 0 20px 44px -26px rgba(95,168,208,.5);
  background:linear-gradient(178deg,#F7FBFE,#FFF 46%);
}
.fmt--feature:hover{box-shadow:0 0 0 1px rgba(95,168,208,.4), 0 24px 50px -26px rgba(95,168,208,.6)}

.fmt__flag{
  align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#08131C; background:var(--accent);
  padding:5px 11px; border-radius:999px; margin-bottom:20px;
}
.fmt__flag--quiet{background:var(--paper-2); color:var(--mute); font-weight:600}

.fmt__name{font-size:26px; margin:0; letter-spacing:-.015em}
.fmt__price{
  font-family:var(--f-display); font-size:clamp(42px,5.6vw,52px); font-weight:600;
  color:var(--ink); line-height:1; letter-spacing:-.035em; margin:10px 0 0;
  font-variant-numeric:tabular-nums;
}
.fmt--feature .fmt__price{color:#2C6F98}
.fmt__cur{font-size:.55em; vertical-align:.42em; margin-right:1px; letter-spacing:0}
.fmt__note{font-size:14px; color:var(--mute); margin:8px 0 0}

.fmt__list{margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1}
.fmt__list li{
  position:relative; padding-left:25px; font-size:15px; line-height:1.55; color:var(--body);
}
.fmt__list li::before{
  content:""; position:absolute; left:2px; top:.52em;
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); opacity:.42;
}
.fmt--feature .fmt__list li::before{opacity:1}

.fmt__btn{justify-content:center; width:100%; margin-top:26px; min-height:52px}
.btn--outline{
  border-color:#C2CCD9; color:var(--ink); background:transparent;
}
.btn--outline:hover{border-color:var(--ink); background:var(--ink); color:var(--paper); transform:translateY(-2px)}
.btn--outline:hover .btn__price{opacity:.8}

.fmt__sub{font-size:12.5px; color:var(--mute); text-align:center; margin:12px 0 0; min-height:1em}
.fmt__sub--warn{color:var(--alarm); font-weight:600}

/* disabled state when checkout link is unconfigured */
.btn--pending{
  background:var(--paper-2) !important; color:var(--mute) !important;
  box-shadow:none !important; cursor:not-allowed; border-color:var(--line) !important;
}
.btn--pending:hover{transform:none !important; background:var(--paper-2) !important}

/* ── trust ────────────────────────────────────────────── */
.trust{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,36px);
  margin:clamp(40px,5.5vw,64px) 0 0; padding:clamp(26px,3.6vw,34px) 0 0;
  border-top:1px solid var(--line);
}
.trust li{font-size:14.5px; line-height:1.6; color:var(--body)}
.trust strong{
  display:block; font-family:var(--f-ui); font-size:12px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink); margin-bottom:8px;
}

/* ── bulk ─────────────────────────────────────────────── */
.bulk{
  margin-top:clamp(44px,6vw,72px); padding:clamp(28px,4vw,40px);
  background:var(--ink); border-radius:var(--r); color:var(--body-dark);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(22px,3vw,40px);
  align-items:center;
  background-image:radial-gradient(560px 320px at 90% 0%, rgba(95,168,208,.16), transparent 66%);
}
@media (max-width:720px){.bulk{grid-template-columns:1fr}}
.bulk h2{color:#F7FAFD; font-size:clamp(21px,2.8vw,27px); margin:0 0 12px}
.bulk p{margin:0; font-size:15.5px; line-height:1.68; max-width:58ch}
.bulk .btn--outline{border-color:rgba(255,255,255,.32); color:#EDF2F7; white-space:nowrap}
.bulk .btn--outline:hover{background:#fff; color:var(--ink); border-color:#fff}

/* ── faq ──────────────────────────────────────────────── */
.faq{margin-top:clamp(48px,6.5vw,80px); max-width:760px}
.faq__h{font-size:clamp(22px,3vw,30px); margin:0 0 22px}
.qa{border-top:1px solid var(--line); padding:2px 0}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 0; position:relative;
  font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.45;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+"; position:absolute; right:4px; top:50%; translate:0 -50%;
  font-family:var(--f-display); font-size:24px; font-weight:400; color:var(--accent);
  transition:transform .22s ease; line-height:1;
}
.qa[open] summary::after{transform:rotate(45deg)}
.qa summary:hover{color:#2C6F98}
.qa p{
  margin:0 0 20px; padding-right:34px; font-size:15.5px; line-height:1.7; color:var(--body);
}
.qa em{font-style:italic}
@media (prefers-reduced-motion:reduce){.qa summary::after{transition:none}}

/* ── ground corrections ───────────────────────────────────
   .eyebrow--accent and --mute are tuned for the dark sections on
   index.html. The order page puts them on light paper / the dark
   nav respectively, so both need the opposite-ground token. */
.ord-head .eyebrow--accent{color:var(--accent-ink)}
.ord-head .eyebrow--accent .dot{
  background:var(--accent-ink);
  box-shadow:0 0 0 4px rgba(44,111,152,.16);
}

/* ── format not yet purchasable ────────────────────────── */
.fmt--soon{opacity:.72}
.fmt--soon:hover{opacity:1}
.fmt__flag--soon{background:var(--paper-2); color:var(--alarm-deep); font-weight:700}