/* Pilot Interview Handbook — the order page.
   Loads on top of style.css, so the palette, fonts and buttons are the ones
   from the landing page. Only what is unique to checkout lives here.

   Layout rule of this page: nothing that is not the order. No topic links,
   no FAQ jumps, no second call to action competing with the button. */

.co-shell{max-width:1000px; margin:0 auto; padding:38px 22px 90px;}

.co-head{margin-bottom:26px;}
.co-head h1{font-size:31px; color:#fff; margin-bottom:8px;}
.co-head p{color:var(--text-dim); font-size:14.5px; max-width:56ch;}
.co-back{
  font-family:'IBM Plex Mono', monospace; font-size:12px;
  color:var(--text-faint); display:inline-block; margin-bottom:18px;
}
.co-back:hover{color:var(--amber);}

.co-grid{display:grid; grid-template-columns:1fr 370px; gap:26px; align-items:start;}

/* ---------- the lines in the order ---------- */
.co-box{
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:20px 22px; margin-bottom:16px;
}
.co-box h2{
  font-size:12px; font-family:'IBM Plex Mono', monospace; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint);
  margin-bottom:16px;
}

/* Each purchase gets its own card. As plain rows with a divider they read as
   one paragraph of small print; boxed, someone can see at a glance how many
   things they are about to pay for. */
.co-line{
  display:flex; gap:16px; align-items:flex-start;
  padding:16px 18px; margin-bottom:10px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  transition:border-color .15s ease;
}
.co-line:last-child{margin-bottom:0;}
.co-line:hover{border-color:#2E4064;}
.co-line-main{flex:1; min-width:0;}
.co-line-title{font-family:'Space Grotesk', sans-serif; font-size:16.5px; font-weight:600; color:#fff;}
.co-line-blurb{font-size:13px; color:var(--text-dim); line-height:1.5; margin-top:4px; max-width:46ch;}
.co-line-side{text-align:right; flex-shrink:0;}
.co-line-price{font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:600; color:var(--text);}
.co-line-drop{
  display:block; margin-top:7px; background:none; border:0; cursor:pointer;
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-faint);
}
.co-line-drop:hover{color:#E2679F;}

/* what a line actually opens up */
.co-caps{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.co-caps span{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.05em;
  text-transform:uppercase; color:#7FD99A;
  background:rgba(127,217,154,0.09); border:1px solid rgba(127,217,154,0.28);
  border-radius:20px; padding:3px 9px;
}

/* ---------- the money-saving nudge ----------
   This is the highest-value thing on the page for both sides — it raises the
   order and it stops someone paying more than they need to. As a quiet tinted
   box it was read straight past, so it now arrives with a bounce and keeps a
   slow glow. Both are switched off for anyone who asked for less motion. */
.co-swap{
  position:relative; overflow:hidden;
  border:2px solid var(--amber); background:linear-gradient(180deg,
    rgba(242,169,59,0.16), rgba(242,169,59,0.06));
  border-radius:8px; padding:20px 22px; margin-bottom:18px;
  animation:swap-in .55s cubic-bezier(.2,.8,.3,1.25) both,
            swap-glow 3.4s ease-in-out 1.1s infinite;
}
@keyframes swap-in{
  0%{opacity:0; transform:translateY(12px) scale(.97);}
  55%{opacity:1; transform:translateY(-5px) scale(1.015);}
  75%{transform:translateY(1px) scale(.998);}
  100%{opacity:1; transform:none;}
}
@keyframes swap-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(242,169,59,0), 0 12px 30px -18px rgba(0,0,0,.8);}
  50%{box-shadow:0 0 0 5px rgba(242,169,59,0.11), 0 14px 34px -14px rgba(242,169,59,0.45);}
}
.co-swap-head{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
.co-swap-tag{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--bg); background:var(--amber);
  border-radius:20px; padding:4px 11px; font-weight:700;
}
/* the number is the argument — it gets to be the biggest thing in the box */
.co-swap-save{
  font-family:'Space Grotesk', sans-serif; font-size:26px; font-weight:700;
  color:var(--amber-bright); line-height:1;
}
.co-swap p{font-size:14.5px; color:var(--text); line-height:1.55; margin-bottom:14px;}
.co-swap b{color:var(--amber-bright);}
.co-swap-btn{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase;
  background:var(--amber); color:var(--bg); border:0; border-radius:var(--radius);
  padding:13px 20px; cursor:pointer; width:100%;
  transition:background .15s ease, transform .15s ease;
}
.co-swap-btn:hover{background:var(--amber-bright); transform:translateY(-1px);}
@media (prefers-reduced-motion:reduce){ .co-swap{animation:none;} }

/* ---------- things they could still add ----------
   Marked as extras rather than sitting in the same weight as the course, so
   nobody has to work out which of these is the actual product. */
.co-offer{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px; margin-bottom:10px; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--line);
  border-left:3px solid #3E7CB1; border-radius:5px;
}
.co-offer:last-child{margin-bottom:0;}
.co-offer-tag{
  display:inline-block; margin-bottom:5px;
  font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--sky-bright);
  border:1px solid rgba(91,155,213,0.4); background:rgba(91,155,213,0.1);
  border-radius:20px; padding:2px 9px;
}
.co-offer-title{font-family:'Space Grotesk', sans-serif; font-size:14.5px; font-weight:600; color:var(--text);}
.co-offer-blurb{font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:3px; max-width:44ch;}
.co-offer-add{
  font-family:'IBM Plex Mono', monospace; font-size:12px; font-weight:600;
  white-space:nowrap; cursor:pointer;
  background:transparent; color:var(--amber); border:1px solid rgba(242,169,59,0.5);
  border-radius:var(--radius); padding:10px 15px;
}
.co-offer-add:hover{background:rgba(242,169,59,0.12); border-color:var(--amber);}

/* ---------- the summary column ---------- */
.co-sum{position:sticky; top:96px;}
.co-sum-row{
  display:flex; justify-content:space-between; gap:12px;
  font-size:13.5px; color:var(--text-dim); padding:7px 0;
}
.co-sum-row .v{color:var(--text);}
.co-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  border-top:1px solid var(--line); margin-top:10px; padding-top:14px;
}
.co-total-label{font-size:13.5px; color:var(--text-dim);}
.co-total-value{font-family:'Space Grotesk', sans-serif; font-size:30px; font-weight:700; color:#fff;}
.co-total-note{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--text-faint); margin-top:6px;}

.co-pay{
  display:block; width:100%; text-align:center; margin-top:16px;
  font-family:'IBM Plex Mono', monospace; font-size:13.5px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase;
  background:var(--amber); color:var(--bg); border:0; border-radius:var(--radius);
  padding:16px 20px; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.co-pay:hover:not(:disabled){background:var(--amber-bright); transform:translateY(-1px);}
.co-pay:disabled{opacity:0.45; cursor:not-allowed;}

.co-secure{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:10px; padding:8px 10px; border-radius:var(--radius);
  background:rgba(127,217,154,0.07); border:1px solid rgba(127,217,154,0.22);
  font-size:11.5px; color:#A9DFC2; text-align:center; line-height:1.4;
}
.co-note{
  font-size:12.5px; color:var(--text-faint); line-height:1.55;
  text-align:center; margin-top:11px;
}
.co-note a{color:var(--amber); text-decoration:underline;}

/* the honest answer while Stripe is not wired up */
.co-msg{
  display:none; margin-top:14px; border-radius:var(--radius);
  border:1px solid rgba(242,169,59,0.4); background:rgba(242,169,59,0.08);
  padding:13px 15px; font-size:13px; color:var(--text); line-height:1.55;
}
.co-msg.on{display:block;}
.co-msg strong{display:block; color:var(--amber-bright); margin-bottom:4px;}

/* ---------- discount code ----------
   A quiet link until it is clicked. A visible empty "promo code" box makes
   people leave to hunt for one, and they do not come back. */
.co-code{margin-top:14px; border-top:1px solid var(--line); padding-top:12px;}
.co-code-open{
  background:none; border:0; cursor:pointer; padding:0;
  font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  letter-spacing:0.05em; color:var(--text-faint);
}
.co-code-open:hover{color:var(--amber);}
.co-code-form{display:none; gap:8px; margin-top:10px;}
.co-code-form.on{display:flex;}
.co-code-form input{
  flex:1; min-width:0;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--text); padding:10px 12px;
  font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:0.06em;
  text-transform:uppercase;
}
.co-code-form input:focus{outline:none; border-color:var(--amber);}
.co-code-form button{
  flex-shrink:0; cursor:pointer;
  background:transparent; color:var(--text-dim);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; font-family:'IBM Plex Mono', monospace; font-size:12px;
}
.co-code-form button:hover{border-color:var(--amber); color:var(--amber);}
.co-code-msg{font-size:12.5px; line-height:1.5; margin-top:8px; display:none;}
.co-code-msg.on{display:block;}
.co-code-msg.bad{color:#F3B9DC;}

.co-code-live{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; padding:9px 11px; border-radius:var(--radius);
  background:rgba(127,217,154,0.09); border:1px solid rgba(127,217,154,0.3);
  font-size:12.5px; color:#A9DFC2;
}
.co-code-live b{font-family:'IBM Plex Mono', monospace; letter-spacing:0.08em; color:#7FD99A;}
.co-code-live button{
  background:none; border:0; cursor:pointer; color:var(--text-faint);
  font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase;
}
.co-code-live button:hover{color:#E2679F;}
.co-sum-row.cut{color:#7FD99A;}
.co-sum-row.cut .v{color:#7FD99A;}

/* reassurance, kept next to the button where the doubt happens */
.co-trust{margin-top:16px; border-top:1px solid var(--line); padding-top:14px;}
.co-trust div{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12.5px; color:var(--text-dim); line-height:1.5; padding:5px 0;
}
.co-trust i{font-style:normal; color:#7FD99A; flex-shrink:0;}

/* ---------- after payment ---------- */
.co-steps{counter-reset:cost;}
.co-step{
  display:flex; gap:13px; align-items:flex-start; padding:9px 0;
  font-size:13.5px; color:var(--text-dim); line-height:1.55;
}
.co-step b{color:var(--text); font-weight:600;}
.co-step-n{
  counter-increment:cost; flex-shrink:0;
  width:22px; height:22px; border-radius:50%;
  border:1px solid var(--line); background:var(--panel-2);
  font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--amber);
  display:flex; align-items:center; justify-content:center;
}
.co-step-n::before{content:counter(cost);}

/* ---------- empty basket = the chooser ---------- */
.co-empty h2{font-family:'Space Grotesk', sans-serif; font-size:20px; color:#fff;
  letter-spacing:-0.01em; text-transform:none; margin-bottom:6px;}
.co-empty > p{font-size:14px; color:var(--text-dim); margin-bottom:20px; max-width:52ch;}
.co-pick{
  display:flex; gap:16px; align-items:flex-start; justify-content:space-between;
  border:1px solid var(--line); background:var(--panel-2);
  border-radius:6px; padding:18px 20px; margin-bottom:12px; flex-wrap:wrap;
}
/* The recommendation is first in the list and heavier on the page. Sitting
   second, in the same weight as the cheaper option, it was a footnote. */
.co-pick.best{
  border:2px solid var(--amber);
  background:linear-gradient(180deg, rgba(242,169,59,0.13), rgba(242,169,59,0.04));
  padding:22px 24px; margin-bottom:16px;
  box-shadow:0 14px 34px -18px rgba(242,169,59,0.5);
}
.co-pick-tag{
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--bg); background:var(--amber);
  border-radius:20px; padding:4px 11px; font-weight:700;
  display:inline-block; margin-bottom:9px;
}
.co-pick-title{font-family:'Space Grotesk', sans-serif; font-size:17px; font-weight:600; color:#fff;}
.co-pick.best .co-pick-title{font-size:21px;}
.co-pick-blurb{font-size:13px; color:var(--text-dim); line-height:1.5; margin-top:4px; max-width:44ch;}
.co-pick.best .co-pick-blurb{font-size:14px; color:var(--text);}
.co-pick-side{text-align:right; flex-shrink:0;}
.co-pick-price{font-family:'Space Grotesk', sans-serif; font-size:22px; font-weight:700; color:#fff; display:block; margin-bottom:9px;}
.co-pick.best .co-pick-price{font-size:30px; color:var(--amber-bright);}
.co-pick-go{
  cursor:pointer; white-space:nowrap;
  background:var(--amber); color:var(--bg); border:0; border-radius:var(--radius);
  padding:13px 20px;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700;
  letter-spacing:0.03em; text-transform:uppercase;
  transition:background .15s ease, transform .15s ease;
}
.co-pick-go:hover{background:var(--amber-bright); transform:translateY(-1px);}

@media (max-width:900px){
  .co-grid{grid-template-columns:1fr;}
  .co-sum{position:static;}
  .co-head h1{font-size:26px;}
}