/* Playbook checkout. A standalone page: the order on an Ink panel, the form on
   white, matching the approved mockup. Stripe renders the card field inside
   #payment-element; its look is set by the appearance object in index.js. */
:root{
  --ink:#1C1D19; --bone:#F3EFE4; --rose:#D7B7AD; --blush:#EFE1DA;
  --sand:#C3BAA6; --stone:#6A655A; --muted:#8A857A; --line:#3A3B36;
  --field:#DDDDDD; --error:#B42318;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit}

.co{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.co__summary{background:var(--ink);color:var(--bone)}
.co__inner{width:100%;max-width:560px;padding:64px 48px}
.co__summary .co__inner{margin-left:auto}
.co__form .co__inner{margin-right:auto}

.co__logo{display:inline-block;margin-bottom:56px}
.co__logo img{display:block;height:22px;width:auto}
.co__eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);margin-bottom:14px}
.co__pay{font-size:16px;color:var(--sand);margin-bottom:6px}
.co__amount{font-size:44px;font-weight:600;letter-spacing:-.02em;margin-bottom:40px;min-height:1.2em}

.co__item{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid var(--line)}
.co__cover{flex:none;width:58px;height:74px;background:var(--bone);border-radius:3px;padding:8px 6px;display:flex;flex-direction:column;justify-content:space-between}
.co__cover i{display:block;height:3px;width:70%;background:var(--rose)}
.co__cover b{font-size:6px;line-height:1.2;font-weight:600;color:var(--ink)}
.co__item-text{flex:1}
.co__item-text h1{font-size:16px;font-weight:600;line-height:1.35;margin-bottom:4px}
.co__item-text p{font-size:13px;line-height:1.5;color:var(--muted)}
.co__item-amount{font-size:15px;font-weight:600;white-space:nowrap}

.co__totals div{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--blush)}
.co__totals .co__total{border:0;font-weight:600;color:var(--bone)}
.co__back{margin-top:40px;font-size:13px}
.co__back a{color:var(--sand);text-underline-offset:3px}

.co__form h2{font-size:18px;font-weight:600;margin:0 0 12px}
.co__form h2:not(:first-child){margin-top:30px}
.co__label{display:block;font-size:14px;color:#444;margin-bottom:8px}
.co__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.co__input{display:block;width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--field);border-radius:6px;padding:13px 14px}
.co__input::placeholder{color:#999}
.co__input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.co__input[aria-invalid="true"]{border-color:var(--error)}
.co__hint{font-size:12px;color:var(--stone);margin-top:8px;line-height:1.5}
.co__payment{min-height:150px}

.co__error{margin-top:18px;font-size:14px;color:var(--error);line-height:1.5}
.co__pay-btn{display:block;width:100%;margin-top:24px;border:0;border-radius:6px;padding:16px;background:var(--ink);color:var(--bone);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.co__pay-btn:disabled{opacity:.55;cursor:default}
.co__pay-btn:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
.co__fine{font-size:12px;line-height:1.6;color:var(--muted);text-align:center;margin-top:16px}
.co__fine a{color:var(--ink);text-decoration-color:var(--rose);text-underline-offset:3px}

/* Thank-you page shares the shell. */
.co__done h2{font-size:22px;margin-bottom:14px}
.co__done p{font-size:15px;line-height:1.6;color:#333;margin-bottom:14px}
.co__done .co__pay-btn{display:inline-block;width:auto;padding:14px 22px;text-decoration:none;margin-top:10px}

@media (max-width:900px){
  .co{grid-template-columns:1fr}
  .co__inner{max-width:none;padding:40px 24px}
  .co__summary .co__inner,.co__form .co__inner{margin:0}
  .co__logo{margin-bottom:32px}
  .co__amount{font-size:36px;margin-bottom:28px}
}