/* Pedro's header, matched to his original checkout: one dark bar with his name,
   "Need help?" and "Secure checkout". CSS only, because the engine's header
   holds just the logo. */
.site-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 6px 16px; text-align: left;
  background: #0e0f12; color: #f4f5f2;
  font: 400 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 10px max(16px, calc((100% - 1040px) / 2 + 16px));
}
.site-head .logo { order: 1; content: url("/img/header-name.svg"); height: 22px; max-height: none; width: auto; }
.site-head::before { order: 2; content: "Need help? pedro@ppmartins.com"; }
.site-head::after { order: 3; content: "\1F512  Secure checkout"; }
/* The original went straight from that bar to the page, with no second strip. */
.co-strip, .co-secure { display: none; }

/* ---------------------------------------------------------------------------
   The signed books checkout: the Lens checkout layout (checkout.html) with the copy from 11-signed-books.md section 2. The engine writes
   the checkout and its words, so this file only restyles it: words the engine
   fixes are hidden (font-size: 0) and Pedro's words are drawn in their place.
   Stripe's card box, the add-on tick box, the live total and the terms tick
   box keep working exactly as the engine wrote them.
   --------------------------------------------------------------------------- */
body:has(main.co) { background: #f3f6f2; }
main.co {
  --p-ink: #15161a; --p-muted: #5d616b; --p-deep: #0e0f12; --p-on-deep: #f4f5f2;
  --p-accent: #1f9d5c; --p-accent-dark: #167a47; --p-line: rgba(21,22,26,.12);
  --p-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --p-head: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: var(--p-ink); font: 400 17px/1.55 var(--p-font);
}
main.co .co-wrap { max-width: 1040px; padding: 0 16px 30px; }

/* Layout: intro across the top, form card left, "What opens for you" right,
   the quote under the form and the guarantee under the list. */
main.co .co-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: auto auto auto auto auto auto 1fr auto auto;
  column-gap: 20px; row-gap: 0; padding-bottom: 10px;
}
main.co .co-form, main.co .co-recap { display: contents; }
main.co .co-head { grid-column: 1 / -1; grid-row: 1; text-align: center; max-width: 680px; margin: 0 auto; padding: 26px 0 28px; }
main.co .co-card { grid-column: 1; grid-row: 2 / span 6; }
main.co .co-recap h2 { grid-column: 2; grid-row: 2; }
main.co .co-includes { grid-column: 2; grid-row: 3; }
main.co .co-price { grid-column: 2; grid-row: 4; }
main.co .co-kicker { grid-column: 2; grid-row: 5; }
main.co .co-gtee { grid-column: 2; grid-row: 6; }
main.co .co-grid::before { grid-column: 1; grid-row: 8; }
main.co .co-grid::after { grid-column: 1; grid-row: 9; }

/* Intro */
main.co .co-eyebrow { font-size: 0; margin: 0 0 8px; padding: 0; background: none; color: var(--p-accent-dark); }
main.co .co-eyebrow::before { content: "Final step"; font: 700 13px/1.3 var(--p-font); letter-spacing: .12em; text-transform: uppercase; }
main.co .co-head h1 { font-size: 0; margin: 0; }
main.co .co-head h1::before { content: "Your signed copy is three working days from the post office"; display: block; color: var(--p-ink); font: 700 clamp(26px, 5.6vw, 38px)/1.18 var(--p-head); margin: 0 0 8px; }
main.co .co-head h1::after { content: ""; display: none; color: var(--p-muted); font: 400 17px/1.55 var(--p-font); }

/* Cards */
main.co .co-card, main.co .co-gtee, main.co .co-grid::before {
  background: #fff; border: 1px solid var(--p-line); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(10,20,15,.10); padding: 20px; margin-bottom: 16px;
}
main.co .co-card { display: flex; flex-direction: column; }
main.co .co-card > * { order: 5; }
main.co .co-card > h2:first-of-type { order: 0; font-size: 0; margin: 0 0 14px; }
main.co .co-card > h2:first-of-type::before { content: "Your details and payment"; display: block; font: 700 21px/1.25 var(--p-head); color: var(--p-ink); margin: 0 0 10px; }
main.co .co-card > h2:first-of-type::after { content: "Use the email you want everything sent to."; display: block; font: 400 15px/1.55 var(--p-font); color: var(--p-muted); }
main.co .co-card > h2:not(:first-of-type) { display: none; }
main.co #custEmail { order: 1; }
main.co #custName { order: 2; }
main.co .co-card .field { min-height: 48px; border: 1px solid var(--p-line); border-radius: 10px; padding: 10px 12px; font: 400 17px/1.55 var(--p-font); margin: 0 0 12px; }
main.co #payment-element { margin: 0 0 14px; }

/* The add-on, in the original's dashed box */
main.co .co-bump { border: 2px dashed var(--p-accent); background: #fff8f3; border-radius: 12px; padding: 14px; margin: 0 0 14px; }
main.co .co-bump:has(input:checked) { border-style: solid; background: #fff8f3; }
main.co .co-bump-title { font-size: 0; margin: 0 0 8px; }
main.co .co-bump-title::before { content: "Yes, add it \00B7  +"; font: 700 15px/1 var(--p-font); }
main.co .co-bump-title .co-bump-price { font: 700 15px/1 var(--p-font); }
main.co .co-bump-title { display: inline-block; align-self: flex-start; background: var(--p-deep); color: var(--p-on-deep); border-radius: 999px; padding: 12px 14px; }
main.co .co-bump-title .co-bump-price { color: var(--p-on-deep); background: none; padding: 0; margin: 0; border-radius: 0; }
main.co .co-bump-blurb { font-size: 15px; color: var(--p-ink); margin: 0; }

/* The live total stays (it changes when the add-on is ticked); the line list goes */
main.co .summary { display: none; }
main.co .co-card .total { font: 700 17px/1.4 var(--p-font); border-top: 1px solid var(--p-line); padding-top: 10px; margin: 0; }
main.co .consent { font-size: 14.5px; }

/* The button */
main.co #payBtn { font-size: 0; min-height: 56px; padding: 16px 22px; border-radius: 999px; background: var(--p-accent); box-shadow: 0 8px 22px rgba(31,157,92,.30); }
main.co #payBtn:hover, main.co #payBtn:focus-visible { background: var(--p-accent-dark); }
main.co #payBtn::before { content: "Send me my signed copy"; font: 700 19px/1.25 var(--p-font); color: #fff; }
main.co #payBtn .arw { display: none; }

/* Under the button */
main.co .co-trust { font-size: 0; margin: 10px 0 0; display: block; }
main.co .co-trust span { display: none; }
main.co .co-trust::before { content: "Next, you'll tell me where to send it."; display: block; text-align: center; font: 400 14px/1.55 var(--p-font); color: var(--p-muted); }
main.co .warn { font-size: 0; margin: 12px 0 0; text-align: left; }
main.co .warn::before { content: "Shipping included worldwide. Outside the EU, import fees may apply on delivery."; font: 400 13px/1.55 var(--p-font); color: var(--p-muted); }
main.co .co-gline { display: none; }

/* No quote on this checkout */
main.co .co-grid::before, main.co .co-grid::after { display: none !important; }
/* (Lens quote styles below are unused here) */
main.co .co-grid::before { content: "\201C And if he ever tries to sell you something\2026  You BUY!\201D"; font: italic 18px/1.45 var(--p-head); color: var(--p-ink); border-bottom: 0; border-radius: 14px 14px 0 0; margin-bottom: 0; padding-bottom: 6px; box-shadow: none; }
main.co .co-grid::after { content: "George Ten, on Pedro"; display: block; margin-top: -1px; background: #fff; border: 1px solid var(--p-line); border-top: 0; border-radius: 0 0 14px 14px; padding: 0 20px 20px; margin-bottom: 16px; font: 400 14px/1.4 var(--p-font); color: var(--p-muted); box-shadow: 0 22px 30px -16px rgba(10,20,15,.14); }

/* "What opens for you": one card made of four pieces */
main.co .co-recap h2, main.co .co-includes, main.co .co-price, main.co .co-kicker { background: #fff; border-left: 1px solid var(--p-line); border-right: 1px solid var(--p-line); margin: 0; padding: 0 20px; }
main.co .co-recap h2 { border-top: 1px solid var(--p-line); border-radius: 14px 14px 0 0; padding-top: 20px; font-size: 0; }
main.co .co-recap h2::before { content: "What you get"; display: block; font: 700 21px/1.25 var(--p-head); color: var(--p-ink); margin: 0 0 10px; }
main.co .co-includes { list-style: none; display: block; }
main.co .co-includes li { display: block; position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--p-line); margin: 0; font-size: 17px; line-height: 1.55; }
main.co .co-includes li svg { display: none; }
main.co .co-includes li::before { content: "\2713"; position: absolute; left: 4px; top: 10px; color: var(--p-accent-dark); font-weight: 700; }
main.co .co-price { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; color: var(--p-ink); font: 700 19px/1.4 var(--p-font); padding-top: 12px; }
main.co .co-price::before { content: "Total today"; text-align: left; }
main.co .co-price { background-image: linear-gradient(var(--p-ink), var(--p-ink)); background-size: calc(100% - 40px) 2px; background-position: 20px 6px; background-repeat: no-repeat; padding-top: 18px; text-align: right; }
main.co .co-price small { grid-column: 2; display: block; font: 400 14px/1.4 var(--p-font); color: var(--p-muted); }
main.co .co-price small::after { content: " \00B7  shipping included"; }
main.co .co-kicker { font-size: 0; border-bottom: 1px solid var(--p-line); border-radius: 0 0 14px 14px; padding: 14px 20px 20px; margin-bottom: 16px; box-shadow: 0 22px 30px -16px rgba(10,20,15,.14); }
main.co .co-kicker::before { content: url("/img/trust-chips.svg"); display: block; }

/* The guarantee, with the 30-day seal */
main.co .co-gtee { display: flex; gap: 14px; align-items: flex-start; color: var(--p-ink); }
main.co .co-gtee .t { flex: 0 0 64px; height: 64px; border-radius: 50%; background: var(--p-deep); display: grid; place-items: center; font-size: 0; margin: 0; }
main.co .co-gtee .t::before { content: "30\A days"; white-space: pre; text-align: center; color: var(--p-on-deep); font: 700 13px/1.1 var(--p-font); }
main.co .co-gtee p { font-size: 15px; line-height: 1.55; color: var(--p-ink); }

/* Footer, as in the original */
body:has(main.co) .site-foot { text-align: center; font-size: 13px; color: var(--p-muted, #5d616b); padding: 10px 0 30px; }
body:has(main.co) .site-foot .foot-links a[href="/refund"], body:has(main.co) .site-foot .foot-links a[href^="mailto:"], body:has(main.co) .site-foot .foot-biz { display: none; }
body:has(main.co) .site-foot .foot-links a { color: #5d616b; margin: 0 6px; }
body:has(main.co) .site-foot::after { content: "\00A9  Pedro Martins"; display: block; font-size: 13px; color: #5d616b; margin-top: 8px; }

/* Phones: one column, in the original's order */
@media (max-width: 820px) {
  main.co .co-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  main.co .co-head, main.co .co-card, main.co .co-recap h2, main.co .co-includes, main.co .co-price, main.co .co-kicker, main.co .co-gtee, main.co .co-grid::before, main.co .co-grid::after { grid-column: 1; grid-row: auto; }
  main.co .co-head { order: 0; } main.co .co-card { order: 1; }
  main.co .co-grid::before { order: 2; } main.co .co-grid::after { order: 3; }
  main.co .co-recap h2 { order: 4; } main.co .co-includes { order: 5; } main.co .co-price { order: 6; }
  main.co .co-kicker { order: 7; } main.co .co-gtee { order: 8; }
}


/* The second gift option reads "Yes, add them" (11-signed-books.md section 2). */
main.co .co-bump:has(input[data-id="gift-3"]) .co-bump-title::before { content: "Yes, add them \00B7  +"; }