/* Demo-spine pages (checkout.html / orderdesk.html / cloud.html) — shared styles.
   Tokens from site.css; 3px line weight per the configurator convention.
   --sel blue = selection/structure, --accent orange = actions/live states. */

/* ==== shared ==== */
.dp-head{padding-top:clamp(130px,17vh,180px);margin-bottom:clamp(30px,3.6vw,48px)}
.dp-head .eyebrow{margin-bottom:clamp(18px,2.4vw,28px)}
.dp-head h2{margin-bottom:clamp(16px,2vw,24px)}
.dp-panel{border:3px solid var(--hair);padding:clamp(18px,2.2vw,26px)}
.dp-ptitle{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 16px}
.dp-ptitle.mt{margin-top:24px}
.dp-fine{font:400 9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--fg-faint);text-transform:uppercase;margin:14px 0 0}
.dp-mono{font-family:'IBM Plex Mono',monospace}
.dp-field{margin-bottom:16px}
.dp-label{display:block;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);margin:0 0 8px}
.dp-input{width:100%;box-sizing:border-box;background:transparent;border:3px solid var(--hair);color:var(--fg);
  font:400 15px 'IBM Plex Mono',monospace;padding:10px 12px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.dp-input:focus{border-color:var(--sel)}

/* ==== checkout ==== */
.co-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(16px,2vw,28px);align-items:start;margin-bottom:clamp(48px,6vw,84px)}
.co-rows{border-bottom:3px solid var(--hair-soft)}
.co-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-top:3px solid var(--hair-soft);
  font:400 13.5px 'IBM Plex Mono',monospace;color:var(--fg-dim)}
.co-row .v{color:var(--fg);text-align:right;white-space:nowrap}
.co-row.co-total{border-top:3px solid var(--hair);padding-top:16px;margin-top:4px;
  font:600 16px 'IBM Plex Mono',monospace;color:var(--fg)}
.co-row.co-total .v{color:var(--fg)}
.co-dep-lead{font-size:16px;color:var(--fg-dim);margin:0 0 18px}
.co-dep-lead b{color:var(--fg)}
.co-paygrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.co-paygrid .span2{grid-column:1/-1}
.co-place{width:100%;margin-top:6px}
.co-confirm{margin-bottom:clamp(48px,6vw,84px)}
.co-oid{font:600 clamp(30px,4.4vw,50px)/1.1 'IBM Plex Mono',monospace;color:var(--fg);letter-spacing:.02em;margin:0 0 10px}
.co-sent{font-size:17px;color:var(--fg-dim);margin:0 0 24px}
.co-cta-row{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:980px){
  .co-grid{grid-template-columns:minmax(0,1fr)}
  .co-row .v{white-space:normal}
}

/* ==== order desk ==== */
.od-wrap{padding-top:clamp(110px,14vh,150px);padding-bottom:clamp(48px,6vw,84px)}
.od-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:clamp(22px,2.6vw,34px)}
.od-head .eyebrow{margin-bottom:10px}
.od-h{font:600 clamp(30px,3.6vw,48px)/1.02 'Archivo',sans-serif;letter-spacing:-.025em;margin:0}
.od-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(16px,2vw,28px);align-items:start}
.od-table{margin-bottom:0}
.od-table tbody tr{cursor:pointer}
.od-table tbody tr:hover{background:var(--bg-raise)}
.od-table tbody tr.on{background:color-mix(in srgb, var(--sel) 12%, transparent);box-shadow:inset 5px 0 0 var(--sel)}
.od-detail-kv{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;font:400 11.5px 'IBM Plex Mono',monospace;margin-bottom:18px}
.od-detail-kv .k{color:var(--fg-faint);letter-spacing:.12em;font-size:9.5px;text-transform:uppercase}
.od-detail-kv .v{color:var(--fg);text-align:right}
.od-stages{display:flex;gap:0;margin:6px 0 20px}
.od-stage{flex:1;border:3px solid var(--hair-soft);padding:10px 6px;text-align:center;min-width:0;
  font:500 8.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
.od-stage + .od-stage{border-left:none}
.od-stage.done{color:var(--sev-policy);border-color:var(--sev-policy)}
.od-stage.done::before{content:"✓ ";font-weight:600}
.od-stage.cur{border-color:var(--sel);color:var(--sel);background:color-mix(in srgb, var(--sel) 17%, transparent);font-weight:600}
.od-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.od-btn{background:none;border:3px solid var(--hair);color:var(--fg-dim);cursor:pointer;border-radius:0;
  font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.14em;padding:10px 16px;text-transform:uppercase;
  transition:border-color .2s,color .2s}
.od-btn:hover:not(:disabled){border-color:var(--sel);color:var(--sel)}
.od-btn:disabled{opacity:.45;cursor:default}
.od-prov{font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:var(--accent);border:3px solid var(--accent);padding:10px 16px;display:inline-block}
.od-prov:hover{background:var(--accent);color:var(--accent-ink)}
@media (max-width:1120px){.od-layout{grid-template-columns:1fr}}
@media (max-width:760px){.od-stages{flex-wrap:wrap}.od-stage{flex:1 1 30%}.od-stage + .od-stage{border-left:3px solid var(--hair-soft)}}

/* ==== cloud (keynote interstitial) ==== */
.cl-deck{position:relative}
.cl-slide{display:none;min-height:100svh;flex-direction:column;justify-content:center;
  padding:110px 0 140px;cursor:pointer}
.cl-slide.on{display:flex}
.cl-kicker{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);margin:0 0 clamp(18px,2.4vw,28px)}
.cl-h{font:600 clamp(38px,6.4vw,92px)/1.0 'Archivo',sans-serif;letter-spacing:-.03em;margin:0 0 clamp(18px,2.4vw,30px);max-width:16ch}
.cl-h .hmark{color:var(--accent)}
.cl-sub{font-size:clamp(19px,1.7vw,24px);line-height:1.55;color:var(--fg-dim);max-width:60ch;margin:0}
.cl-ref{font:400 13px 'IBM Plex Mono',monospace;color:var(--fg);letter-spacing:.06em;margin-top:26px}
.cl-ref b{color:var(--accent);font-weight:600}
.cl-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(26px,3.4vw,44px);max-width:1100px}
.cl-beat{border-top:3px solid var(--hair);padding-top:16px;min-width:0}
.cl-beat-num{font:600 15px 'IBM Plex Mono',monospace;color:var(--sel);letter-spacing:.1em;margin-bottom:10px}
.cl-beat-t{font:600 17px 'Archivo',sans-serif;color:var(--fg);margin-bottom:8px}
.cl-beat-d{font-size:14.5px;line-height:1.55;color:var(--fg-dim);margin:0}
.cl-checks{list-style:none;margin:clamp(24px,3vw,38px) 0 0;padding:0;max-width:760px}
.cl-checks li{border-top:3px solid var(--hair-soft);padding:16px 0;font-size:clamp(16px,1.5vw,19px);color:var(--fg);display:flex;gap:14px;align-items:baseline}
.cl-checks li::before{content:"■";color:var(--sev-policy);font-size:10px;flex:none}
.cl-checks li b{font-weight:600}
.cl-checks .cl-check-sub{display:block;font:400 11px 'IBM Plex Mono',monospace;color:var(--fg-faint);margin-top:5px;letter-spacing:.04em}
.cl-cta{margin-top:clamp(28px,3.6vw,44px);align-self:flex-start;font-size:14px;padding:18px 30px}
.cl-ui{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:20px;
  padding:13px 16px;border-top:3px solid var(--hair-soft);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cl-dots{display:flex;gap:10px}
.cl-dot{width:12px;height:12px;box-sizing:border-box;border:3px solid var(--hair);background:none;cursor:pointer;padding:0;border-radius:0}
.cl-dot.on{border-color:var(--sel);background:var(--sel)}
.cl-count{font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:var(--fg-faint);min-width:44px;text-align:center}
.cl-nav{background:none;border:3px solid var(--hair);color:var(--fg-dim);cursor:pointer;border-radius:0;
  font:500 9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;padding:8px 14px;text-transform:uppercase;
  transition:border-color .2s,color .2s}
.cl-nav:hover:not(:disabled){border-color:var(--fg);color:var(--fg)}
.cl-nav:disabled{opacity:.35;cursor:default}
@media (max-width:760px){
  .cl-beats{grid-template-columns:1fr}
  .cl-slide{padding:100px 0 150px}
  .cl-ui{gap:12px}
}