@charset "UTF-8";
/* Reskin for the STORE-APP order funnel — cart, confirm-order, thank-you and
   add-audio. Compiled to public/css/checkout.css (see package.json
   "build:checkout"), which the Astro passthrough carries into dist/ and
   dist.sh ships to the box as /css/checkout.css.

   WHY A SEPARATE SHEET, not the marketing site's own CSS: Astro emits one
   hashed stylesheet per page with Bulma inlined, and it styles Bulma class
   names. The funnel templates are Bootstrap-3 markup, so an inlined Bulma
   sheet would style almost nothing there. What IS shared is the design
   TOKENS — this file imports the same _cwvars.scss the marketing pages use,
   so colour and type can't drift.

   COLLISION CONTROL. Store pages load this after the store's Bootstrap-3
   app.css, so equal-specificity ties resolve here by load order. Two rules
   for editing it:

   1. Everything is scoped to `body.checkout` (set by text_page.tt from the
      page's `page_group`). That is one class MORE than app.css's `.content
      .btn`-style selectors, which is what makes those tie-breaks land, and it
      keeps every other store page untouched. It deliberately does NOT use the
      `#<pagename>-page` body id: Root.pm:147 does s/[\W\_]/-/ with no /g, so
      only the FIRST non-word character is replaced and `cart/thank_you`
      becomes `cart-thank_you-page`, underscore intact. Guessing those ids is
      how a rule silently fails to apply.

   2. app.css carries ~60 ID-scoped `#confirm-order-page ...` rules (and ~23
      for `#add-audio-page`) which outrank any class-scoped selector no matter
      what order the sheets load in — an id beats any number of classes. So
      the whole skin lives in the `funnel-skin` mixin and is emitted TWICE:
      once at `body.checkout` (enough for cart-view and thank-you, which have
      no id-scoped rules at all) and once at `body#<id>.checkout`. That prefix
      is (1,1,1) on its own; with a one-class inner selector appended it scores
      (1,2,1) and beats their (1,1,0) — an id outranks any number of classes.
      Add new rules to the mixin, never to a scope directly, or they will
      silently do nothing on checkout.

      The exception is `#confirm-order-page .text-headline{display:none}`:
      un-hiding it would be a fight over a bare `display`, so the checkout
      title is rendered inside .content as .checkout-title instead. */
/* CastingWords brand $variables + Bulma variable overrides — extracted from
   variables.scss so storenav.scss (the store-app nav fragment, which scopes
   Bulma under #cw-sitenav) can share them without pulling in the global
   body/html rules. Keep this file variables-only: anything that EMITS CSS
   belongs in variables.scss (marketing, global) or storenav.scss (store,
   scoped). */
/* colors are in /Users/nmcfarl/podcast/site/store_tt/root/css/home.less  */
/* Set your brand colors */
/* Update Bulma's global variables */
/* Update some of Bulma's component variables  */
/* Tokens that live in app.scss and ProductCard.svelte rather than in
   _cwvars.scss. Copied, not imported: app.scss is the marketing global sheet
   and another workstream owns it. If the marketing CTA colour moves, move it
   here too. */
/* The marketing site's "enterprise" band. A warmer step than $card-head, for
   panels that must read as a header or as a surface distinct from the white
   cards sitting next to them — $card-head is too close to white to do that. */
/* Upload-progress fill. _cwvars.scss carries $green as #8ad54493 — a light
   lime used at ~58% alpha; opaque and full-strength it reads acid against the
   cream. This is that hue darkened ~14% so it holds its own on the track. */
/* Bulma's .container ceiling at $widescreen with $fullhd disabled. The funnel
   had no max-width at all, so checkout sprawled edge-to-edge on a wide
   monitor while every marketing page stayed a centred column. */
/* Emission 1 — cart-view and the thank-you pages, which app.css gives no
   id-scoped rules at all. */
body.checkout {
  /* Exposed as custom properties so a later retheme (or the eventual
     Bootstrap removal) can repoint the funnel without recompiling SCSS. */
  --cw-cta: #3d2f0b;
  --cw-cta-hover: #5a4711;
  --cw-accent: #ffb718;
  --cw-link: #e79b00;
  --cw-text: #414141;
  --cw-bg: #fdf8ee;
  --cw-surface: #fbf6f2;
  --cw-card-border: #ece4d9;
  --cw-muted: #767676;
  --cw-radius: 4px;
  --cw-band: #f0e8db;
  --cw-band-border: #e2d7c4;
  --cw-lighttan: #ead4bc;
  /* ---- container rhythm ------------------------------------------------ */
  /* ---- headings -------------------------------------------------------- */
  /* The marketing subpage h1 is 44-54pt, which is right for a landing page
     and wrong above a payment form. Same family and tracking, smaller step. */
  /* `.content > h1` is a safety net: a page title that forgets .checkout-title
     silently falls through to app.css and renders in a different family and
     weight than the rest of the funnel. */
  /* ---- calls to action ------------------------------------------------- */
  /* app.css paints .content .btn with the amber accent. On the new marketing
     system amber is reserved for accents and the Recommended badge, and the
     CTA is the deep brown below — so the funnel was using the accent colour
     as its primary. .orange and .inputsubmit are the two other button classes
     the funnel templates actually use. */
  /* Brown ring, not amber. Amber on the cream page measures about 1.65:1 —
     under the 3:1 WCAG minimum for non-text indicators, on the screens where
     someone types a password and a card number. The 2px offset puts the ring
     on the surrounding surface (cream or white card), where brown is legible
     even when the button itself is brown. */
  /* Disabled has to stay visibly dead — the order button spends real time in
     this state while minutes are being validated. */
  /* Secondary action ("Add More Audio") — must not compete with Review & Pay,
     which is the primary. The markup already distinguishes them
     (.btn-secondary vs .btn-default.orange); the generic .btn rule above was
     painting both the same brown. Outline, not a second filled button.
     These rules come AFTER the block above on purpose: same specificity,
     so order is what resolves the tie. */
  /* Solid white, NOT transparent. Transparent made it adopt whatever it sat
     on — and this button sits on the cream page background, so it had no
     contrast and stopped reading as a button at all. A secondary button still
     has to be a button; it just must not outrank the primary. */
  /* Border and text both darkened: at the old values this read as an empty
     text input rather than a disabled button. */
  /* File-source tabs (File Upload / URL / Dropbox). The SELECTED tab carries
     .btn-active AND `disabled` — disabled because you cannot re-pick the tab
     you are on. Left to the generic rules that inverted the whole control:
     the current tab went grey-dead and the two you could click read as
     primary CTAs. Selected = filled; the rest = quiet outline. */
  /* Band tint, not white: these sit ON the white audio card, so a white face
     left them relying on a hairline border to look clickable. Contrast ladder
     is now brown (selected) > tan (selectable) > white (card). */
  /* Beats the :disabled rule above — one more class in the chain. */
  /* The file-picker wrapper carries `.orange`, so the CTA rule above painted
     the entire drop zone deep brown with button padding. It is a container,
     not a button — only the "Choose file" label inside it is the action. */
  /* Plain `a`, NOT the old `a:not(.btn):not(.button):not(.orange)` chain: each
     :not() contributes its argument's weight, so that selector scored (1,5,2)
     and outranked this sheet's OWN later overrides for the delete control and
     the .help links — both rendered bold amber, making "delete this item" and
     a FAQ link the loudest things on a purchasable card. The button rules
     below carry .btn/.button/.orange and still beat this on class count, so
     the :not() chain bought nothing. */
  /* ---- form controls --------------------------------------------------- */
  /* Darker border than the marketing site's #e79b00 focus: that measures
     about 2.2:1 on cream, and these are the password and card fields. The
     amber halo is kept so it still reads as the same system. */
  /* Checkbox and radio labels are option text, not field headings. Bolding
     every one turned the Options column into a wall of headings with no
     hierarchy. Field labels (Title, Speakers, Product) stay bold — they are
     .form-group > label and don't match this. */
  /* app.css marks bad input with a 2px red border; keep the signal, soften
     the treatment to match the rest of the system. */
  /* ---- line items as cards --------------------------------------------- */
  /* Mirrors the rates page's .tier card: white face, hairline border, cream
     head strip. The funnel's items were unbordered blocks on the page
     background. */
  /* Sans, not the display serif: this slot holds an uploaded filename, and
     serif figures in a hyphen-and-dot string scan badly. The serif names
     things ("Estimated Total", page titles); a filename isn't a name. */
  /* Legacy list indent inside the card body gave the item three different
     left edges — filename and total rule at the card inset, the detail list
     ~37px further in. */
  /* On the band surfaces, --cw-card-border is LIGHTER than the fill behind it,
     so these fields had no visible edge at all. */
  /* The delete affordance was a 22pt bare "x". Give it a hit area and stop it
     reading as body copy. */
  /* ---- totals + payment ------------------------------------------------ */
  /* No white face: this is a layout container holding the card/PayPal/login
     panels, and painting it white made a white box inside a white box. It
     stays transparent so the panels inside carry the surfaces.
     The #allpaymentforms selector below is what actually beats app.css's
     `#confirm-order-page #allpaymentforms{margin-top:2em}` — two ids, so a
     class-only selector loses however late it loads. */
  /* Flash messages sat on a grey plate with a soft drop shadow. */
  /* One amber signal, not two: the 1px ring plus the 4px bar put three thin
     amber rules on one screen, which made a hairline the funnel's structural
     use of a colour the marketing site only ever uses as a plane. */
  /* Checkout login. It sits inside the white payment wrapper, directly under
     the white line-item cards, so a white panel made it read as more of the
     same block — hence the band. The bottom margin is the fix for it running
     straight into the page edge. */
  /* The wrapper is just a positioning shell; without this the login box's new
     bottom margin collapses against it. */
  /* ---- cart view table -------------------------------------------------- */
  /* Was #FFF9BF, a 2007-era yellow that exists nowhere else in the system. */
  /* ---- thank-you -------------------------------------------------------- */
  /* ---- add-audio -------------------------------------------------------- */
  /* The Svelte bundle owns this page's internals; only the shell is ours. */
  /* The audio card sat on the page background at the same colour as the page,
     so only a hairline border said "this is a thing". White face, same card
     vocabulary as the line items on checkout. */
  /* Advisory links ("Is my audio difficult?"). app.css had these as
     `display:block; width:100%; clear:both; text-align:right`, so each one
     claimed a full line ABOVE the option it describes and read as detached.
     Auto width + clear:none lets the float share the line with the checkbox
     and label that follow it in the DOM. */
  /* `a.help`, not `.help` — needs to outweigh `.content a` above, or these
     inherit bold amber and the FAQ link shouts louder than the priced option
     it annotates. Muted grey also fixes amber-on-white, which measured about
     2.3:1 and fails AA. */
  /* Upload progress bar: grey track visible at rest, filling green as the
     upload runs — the bundle's own behaviour, deliberately left alone. The
     ONLY change here is rounding the corners to 2px ($radius-small).
     Both the wrapper div and the element need it: <div class="progress">
     collides with Bulma's .progress in app.css, which sets its own radius and
     `overflow:hidden`, so a radius on the element alone gets clipped square. */
  /* The product picker is the highest-value choice on the page — it was set at
     the same size as every other control. NOTE: add_audio_new.tt's own mycss
     sets this element's padding with !important, so only the type scale is
     ours to move here. */
  /* ---- responsive ------------------------------------------------------- */
}
body.checkout .content {
  max-width: 1152px;
  margin: 0 auto;
  color: var(--cw-text);
  font-size: 1rem;
  line-height: 1.5;
}
body.checkout .text-headline h1,
body.checkout .content > h1,
body.checkout .checkout-title {
  font-family: "corporate-e", serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cw-text);
  margin: 0 0 0.35em;
}
body.checkout .text-headline h2 {
  font-family: "corporate-s", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
body.checkout .checkout-title {
  width: 100%;
}
body.checkout h3 {
  font-family: "corporate-e", serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 1.6rem 0 0.5rem;
}
body.checkout .content .btn,
body.checkout .content .button,
body.checkout .content .orange,
body.checkout .content input.inputsubmit[type=submit],
body.checkout .content button.inputsubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: #fff;
  background-color: var(--cw-cta);
  font-family: "corporate-s", sans-serif;
  font-weight: bold;
  font-size: 13pt;
  padding: 10px 45px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  border: none;
  border-radius: var(--cw-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
body.checkout .content .btn:hover,
body.checkout .content .btn:focus,
body.checkout .content .button:hover,
body.checkout .content .orange:hover,
body.checkout .content input.inputsubmit[type=submit]:hover,
body.checkout .content button.inputsubmit:hover {
  color: #fff;
  background-color: var(--cw-cta-hover);
  text-decoration: none;
}
body.checkout .content .btn:focus-visible,
body.checkout .content .button:focus-visible,
body.checkout .content .orange:focus-visible,
body.checkout .content input.inputsubmit[type=submit]:focus-visible,
body.checkout .content button.inputsubmit:focus-visible {
  outline: 2px solid var(--cw-cta);
  outline-offset: 2px;
}
body.checkout .content .btn:disabled,
body.checkout .content input.inputsubmit[type=submit]:disabled,
body.checkout .content button.inputsubmit:disabled {
  background-color: #d8d0c2;
  color: #7d7566;
  cursor: not-allowed;
}
body.checkout .content .btn-secondary {
  background-color: #fff;
  color: var(--cw-cta);
  border: 1px solid var(--cw-band-border);
}
body.checkout .content .btn-secondary:hover,
body.checkout .content .btn-secondary:focus {
  background-color: var(--cw-surface);
  border-color: var(--cw-cta);
  color: var(--cw-cta);
}
body.checkout .content .btn-secondary:disabled {
  background-color: #fff;
  border-color: #cbbfa9;
  color: #8f8778;
}
body.checkout .button-group.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
body.checkout .button-group.picker .btn {
  flex: 0 1 auto;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--cw-band);
  color: var(--cw-text);
  border: 1px solid var(--cw-band-border);
  border-radius: var(--cw-radius);
}
body.checkout .button-group.picker .btn:hover {
  background-color: var(--cw-lighttan);
  border-color: var(--cw-cta);
  color: var(--cw-text);
}
body.checkout .button-group.picker .btn.btn-active,
body.checkout .button-group.picker .btn:disabled {
  background-color: var(--cw-cta);
  border-color: var(--cw-cta);
  color: #fff;
  cursor: default;
}
body.checkout .content .control-fileupload.orange {
  display: block;
  background-color: transparent;
  color: var(--cw-text);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
}
body.checkout .content input.custom-file-input.orange {
  background-color: transparent;
  box-shadow: none;
}
body.checkout .content a {
  color: var(--cw-link);
  font-weight: bold;
}
body.checkout .content a:hover {
  color: #9b6800;
  text-decoration: underline;
}
body.checkout .content input[type=text],
body.checkout .content input[type=email],
body.checkout .content input[type=password],
body.checkout .content input[type=number],
body.checkout .content select,
body.checkout .content textarea {
  background-color: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  font-family: "corporate-s", sans-serif;
  font-size: 1rem;
  color: var(--cw-text);
  box-shadow: none;
}
body.checkout .content input[type=text]:hover,
body.checkout .content input[type=email]:hover,
body.checkout .content input[type=password]:hover,
body.checkout .content select:hover,
body.checkout .content textarea:hover {
  border-color: #b5b5b5;
}
body.checkout .content input[type=text]:focus,
body.checkout .content input[type=email]:focus,
body.checkout .content input[type=password]:focus,
body.checkout .content select:focus,
body.checkout .content textarea:focus {
  outline: none;
  border-color: var(--cw-cta);
  box-shadow: 0 0 0 0.125em rgba(231, 155, 0, 0.35);
}
body.checkout .content label {
  font-family: "corporate-s", sans-serif;
  font-weight: 600;
  color: var(--cw-text);
}
body.checkout .content input[type=checkbox] + label,
body.checkout .content input[type=radio] + label {
  font-weight: normal;
}
body.checkout .content .invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 0.125em rgba(192, 57, 43, 0.18);
}
body.checkout .content .error {
  color: #c0392b;
  font-weight: 600;
}
body.checkout .content .note,
body.checkout .content .small {
  color: var(--cw-muted);
  font-size: 0.85rem;
  font-weight: normal;
}
body.checkout .item {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
body.checkout .itembar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Band, not $card-head: on a white card the cream head was so close to
     the card face that the item had no visible header at all. */
  background: var(--cw-band);
  border-bottom: 1px solid var(--cw-band-border);
  padding: 0.85rem 1.25rem;
  /* Not optional: the bar it replaces was amber with `color:white`, which
     would be invisible against this band. */
  color: var(--cw-text);
  font-size: 1rem;
}
body.checkout .itemtitle {
  font-family: "corporate-s", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cw-text);
}
body.checkout .itembody ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
body.checkout #login_form input,
body.checkout .itembar input {
  border-color: var(--cw-band-border);
}
body.checkout .itembody {
  padding: 1rem 1.25rem;
}
body.checkout .itemtotalrow {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #e8dfd0;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
body.checkout .itemtotalnumber {
  font-family: "corporate-e", serif;
  font-size: 1.2rem;
}
body.checkout .itembar .itemdelete a {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  border-radius: var(--cw-radius);
  color: var(--cw-muted);
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
}
body.checkout .itembar .itemdelete a:hover {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  text-decoration: none;
}
body.checkout .totalsection {
  text-align: right;
  font-size: 1rem;
}
body.checkout #totaldisplay {
  font-family: "corporate-e", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cw-text);
  border-top: 2px solid var(--cw-accent);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
body.checkout .paymentmethods {
  margin-left: auto;
}
body.checkout .paymentwrapper {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
body.checkout #allpaymentforms {
  margin-top: 0.5rem;
  margin-bottom: 3rem;
  padding-top: 0;
}
body.checkout #message {
  background: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-left: 4px solid var(--cw-accent);
  border-radius: var(--cw-radius);
  box-shadow: none;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--cw-text);
}
body.checkout .emptycart {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
body.checkout #login_form {
  background: var(--cw-band);
  border: 1px solid var(--cw-band-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
  margin-bottom: 2.5rem;
  /* app.css right-aligns the whole payment column
     (#confirm-order-page .paymentmethods{text-align:right}), which put these
     labels hard against the right edge above left-aligned inputs. Harmless
     when the form was bare text; obvious once it became a panel. */
  text-align: left;
}
body.checkout #login_form h4 {
  font-family: "corporate-e", serif;
  font-size: 1.1rem;
  font-weight: 600;
}
body.checkout #login_form hr {
  border: none;
  border-top: 1px solid var(--cw-band-border);
}
body.checkout #cwwrapper {
  overflow: hidden;
}
body.checkout #storeform table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  overflow: hidden;
}
body.checkout #storeform th.top {
  background: var(--cw-card-head);
  border-bottom: 1px solid var(--cw-card-border);
  padding: 0.75rem 1rem;
  font-family: "corporate-s", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
body.checkout #storeform td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e8dfd0;
  vertical-align: top;
}
body.checkout #storeform tr:last-child td {
  border-bottom: none;
}
body.checkout .surveycallout {
  background: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
  margin: 2rem 0;
}
body.checkout #root {
  width: 100%;
  margin: 0 auto;
}
body.checkout .oneaudio {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
}
body.checkout .content a.help {
  display: inline;
  float: right;
  clear: none;
  width: auto;
  margin: 0 0 0 1rem;
  padding: 0;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--cw-muted);
  text-align: right;
}
body.checkout .content a.help:hover {
  color: var(--cw-cta);
}
body.checkout div.progress,
body.checkout progress {
  border-radius: 2px;
  /* Warm track. The bundle's #999 is as off-palette as the old #008000 fill
     was — two foreign colours sitting on cream. $band-border is the hairline
     tone already used for panel edges throughout the funnel. */
  background: #e2d7c4;
}
body.checkout progress::-webkit-progress-bar {
  border-radius: 2px;
  background: #e2d7c4;
}
body.checkout progress::-webkit-progress-value {
  border-radius: 2px;
  background: #6aac26;
}
body.checkout progress::-moz-progress-bar {
  border-radius: 2px;
  background: #6aac26;
}
body.checkout .options h4 {
  font-family: "corporate-e", serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
body.checkout select.product {
  font-size: 1.15rem;
  font-weight: 600;
  height: auto;
}
@media (max-width: 768px) {
  body.checkout .content {
    padding: 1.5rem 1rem 0;
  }
  body.checkout .text-headline h1,
body.checkout .checkout-title {
    font-size: 1.9rem;
  }
  body.checkout .itembar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  body.checkout .paymentmethods,
body.checkout #allpaymentforms {
    width: 100%;
  }
  body.checkout .content .btn,
body.checkout .content .button,
body.checkout .content .orange,
body.checkout .content input.inputsubmit[type=submit] {
    width: 100%;
    padding: 12px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.checkout .content .btn,
body.checkout .content .button,
body.checkout .content .orange,
body.checkout .content input.inputsubmit[type=submit] {
    transition: none;
  }
}

/* Emission 2 — the two pages app.css DOES scope by body id. Written as one
   selector list so the declarations are emitted once. `body#id.checkout` is
   (1,2,1) against their (1,1,0), so these win; a plain `.checkout` selector
   never can, because one id outranks any number of classes.

   Add a page here if it ever grows `#<pagename>-page` rules in app.css.
   Verify the id against Root.pm:147 rather than guessing it — that s/// has
   no /g, so only the first non-word character becomes a dash. */
body#confirm-order-page.checkout,
body#add-audio-page.checkout {
  /* Exposed as custom properties so a later retheme (or the eventual
     Bootstrap removal) can repoint the funnel without recompiling SCSS. */
  --cw-cta: #3d2f0b;
  --cw-cta-hover: #5a4711;
  --cw-accent: #ffb718;
  --cw-link: #e79b00;
  --cw-text: #414141;
  --cw-bg: #fdf8ee;
  --cw-surface: #fbf6f2;
  --cw-card-border: #ece4d9;
  --cw-muted: #767676;
  --cw-radius: 4px;
  --cw-band: #f0e8db;
  --cw-band-border: #e2d7c4;
  --cw-lighttan: #ead4bc;
  /* ---- container rhythm ------------------------------------------------ */
  /* ---- headings -------------------------------------------------------- */
  /* The marketing subpage h1 is 44-54pt, which is right for a landing page
     and wrong above a payment form. Same family and tracking, smaller step. */
  /* `.content > h1` is a safety net: a page title that forgets .checkout-title
     silently falls through to app.css and renders in a different family and
     weight than the rest of the funnel. */
  /* ---- calls to action ------------------------------------------------- */
  /* app.css paints .content .btn with the amber accent. On the new marketing
     system amber is reserved for accents and the Recommended badge, and the
     CTA is the deep brown below — so the funnel was using the accent colour
     as its primary. .orange and .inputsubmit are the two other button classes
     the funnel templates actually use. */
  /* Brown ring, not amber. Amber on the cream page measures about 1.65:1 —
     under the 3:1 WCAG minimum for non-text indicators, on the screens where
     someone types a password and a card number. The 2px offset puts the ring
     on the surrounding surface (cream or white card), where brown is legible
     even when the button itself is brown. */
  /* Disabled has to stay visibly dead — the order button spends real time in
     this state while minutes are being validated. */
  /* Secondary action ("Add More Audio") — must not compete with Review & Pay,
     which is the primary. The markup already distinguishes them
     (.btn-secondary vs .btn-default.orange); the generic .btn rule above was
     painting both the same brown. Outline, not a second filled button.
     These rules come AFTER the block above on purpose: same specificity,
     so order is what resolves the tie. */
  /* Solid white, NOT transparent. Transparent made it adopt whatever it sat
     on — and this button sits on the cream page background, so it had no
     contrast and stopped reading as a button at all. A secondary button still
     has to be a button; it just must not outrank the primary. */
  /* Border and text both darkened: at the old values this read as an empty
     text input rather than a disabled button. */
  /* File-source tabs (File Upload / URL / Dropbox). The SELECTED tab carries
     .btn-active AND `disabled` — disabled because you cannot re-pick the tab
     you are on. Left to the generic rules that inverted the whole control:
     the current tab went grey-dead and the two you could click read as
     primary CTAs. Selected = filled; the rest = quiet outline. */
  /* Band tint, not white: these sit ON the white audio card, so a white face
     left them relying on a hairline border to look clickable. Contrast ladder
     is now brown (selected) > tan (selectable) > white (card). */
  /* Beats the :disabled rule above — one more class in the chain. */
  /* The file-picker wrapper carries `.orange`, so the CTA rule above painted
     the entire drop zone deep brown with button padding. It is a container,
     not a button — only the "Choose file" label inside it is the action. */
  /* Plain `a`, NOT the old `a:not(.btn):not(.button):not(.orange)` chain: each
     :not() contributes its argument's weight, so that selector scored (1,5,2)
     and outranked this sheet's OWN later overrides for the delete control and
     the .help links — both rendered bold amber, making "delete this item" and
     a FAQ link the loudest things on a purchasable card. The button rules
     below carry .btn/.button/.orange and still beat this on class count, so
     the :not() chain bought nothing. */
  /* ---- form controls --------------------------------------------------- */
  /* Darker border than the marketing site's #e79b00 focus: that measures
     about 2.2:1 on cream, and these are the password and card fields. The
     amber halo is kept so it still reads as the same system. */
  /* Checkbox and radio labels are option text, not field headings. Bolding
     every one turned the Options column into a wall of headings with no
     hierarchy. Field labels (Title, Speakers, Product) stay bold — they are
     .form-group > label and don't match this. */
  /* app.css marks bad input with a 2px red border; keep the signal, soften
     the treatment to match the rest of the system. */
  /* ---- line items as cards --------------------------------------------- */
  /* Mirrors the rates page's .tier card: white face, hairline border, cream
     head strip. The funnel's items were unbordered blocks on the page
     background. */
  /* Sans, not the display serif: this slot holds an uploaded filename, and
     serif figures in a hyphen-and-dot string scan badly. The serif names
     things ("Estimated Total", page titles); a filename isn't a name. */
  /* Legacy list indent inside the card body gave the item three different
     left edges — filename and total rule at the card inset, the detail list
     ~37px further in. */
  /* On the band surfaces, --cw-card-border is LIGHTER than the fill behind it,
     so these fields had no visible edge at all. */
  /* The delete affordance was a 22pt bare "x". Give it a hit area and stop it
     reading as body copy. */
  /* ---- totals + payment ------------------------------------------------ */
  /* No white face: this is a layout container holding the card/PayPal/login
     panels, and painting it white made a white box inside a white box. It
     stays transparent so the panels inside carry the surfaces.
     The #allpaymentforms selector below is what actually beats app.css's
     `#confirm-order-page #allpaymentforms{margin-top:2em}` — two ids, so a
     class-only selector loses however late it loads. */
  /* Flash messages sat on a grey plate with a soft drop shadow. */
  /* One amber signal, not two: the 1px ring plus the 4px bar put three thin
     amber rules on one screen, which made a hairline the funnel's structural
     use of a colour the marketing site only ever uses as a plane. */
  /* Checkout login. It sits inside the white payment wrapper, directly under
     the white line-item cards, so a white panel made it read as more of the
     same block — hence the band. The bottom margin is the fix for it running
     straight into the page edge. */
  /* The wrapper is just a positioning shell; without this the login box's new
     bottom margin collapses against it. */
  /* ---- cart view table -------------------------------------------------- */
  /* Was #FFF9BF, a 2007-era yellow that exists nowhere else in the system. */
  /* ---- thank-you -------------------------------------------------------- */
  /* ---- add-audio -------------------------------------------------------- */
  /* The Svelte bundle owns this page's internals; only the shell is ours. */
  /* The audio card sat on the page background at the same colour as the page,
     so only a hairline border said "this is a thing". White face, same card
     vocabulary as the line items on checkout. */
  /* Advisory links ("Is my audio difficult?"). app.css had these as
     `display:block; width:100%; clear:both; text-align:right`, so each one
     claimed a full line ABOVE the option it describes and read as detached.
     Auto width + clear:none lets the float share the line with the checkbox
     and label that follow it in the DOM. */
  /* `a.help`, not `.help` — needs to outweigh `.content a` above, or these
     inherit bold amber and the FAQ link shouts louder than the priced option
     it annotates. Muted grey also fixes amber-on-white, which measured about
     2.3:1 and fails AA. */
  /* Upload progress bar: grey track visible at rest, filling green as the
     upload runs — the bundle's own behaviour, deliberately left alone. The
     ONLY change here is rounding the corners to 2px ($radius-small).
     Both the wrapper div and the element need it: <div class="progress">
     collides with Bulma's .progress in app.css, which sets its own radius and
     `overflow:hidden`, so a radius on the element alone gets clipped square. */
  /* The product picker is the highest-value choice on the page — it was set at
     the same size as every other control. NOTE: add_audio_new.tt's own mycss
     sets this element's padding with !important, so only the type scale is
     ours to move here. */
  /* ---- responsive ------------------------------------------------------- */
}
body#confirm-order-page.checkout .content,
body#add-audio-page.checkout .content {
  max-width: 1152px;
  margin: 0 auto;
  color: var(--cw-text);
  font-size: 1rem;
  line-height: 1.5;
}
body#confirm-order-page.checkout .text-headline h1,
body#confirm-order-page.checkout .content > h1,
body#confirm-order-page.checkout .checkout-title,
body#add-audio-page.checkout .text-headline h1,
body#add-audio-page.checkout .content > h1,
body#add-audio-page.checkout .checkout-title {
  font-family: "corporate-e", serif;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cw-text);
  margin: 0 0 0.35em;
}
body#confirm-order-page.checkout .text-headline h2,
body#add-audio-page.checkout .text-headline h2 {
  font-family: "corporate-s", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
body#confirm-order-page.checkout .checkout-title,
body#add-audio-page.checkout .checkout-title {
  width: 100%;
}
body#confirm-order-page.checkout h3,
body#add-audio-page.checkout h3 {
  font-family: "corporate-e", serif;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 1.6rem 0 0.5rem;
}
body#confirm-order-page.checkout .content .btn,
body#confirm-order-page.checkout .content .button,
body#confirm-order-page.checkout .content .orange,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit],
body#confirm-order-page.checkout .content button.inputsubmit,
body#add-audio-page.checkout .content .btn,
body#add-audio-page.checkout .content .button,
body#add-audio-page.checkout .content .orange,
body#add-audio-page.checkout .content input.inputsubmit[type=submit],
body#add-audio-page.checkout .content button.inputsubmit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  color: #fff;
  background-color: var(--cw-cta);
  font-family: "corporate-s", sans-serif;
  font-weight: bold;
  font-size: 13pt;
  padding: 10px 45px;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  border: none;
  border-radius: var(--cw-radius);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
body#confirm-order-page.checkout .content .btn:hover,
body#confirm-order-page.checkout .content .btn:focus,
body#confirm-order-page.checkout .content .button:hover,
body#confirm-order-page.checkout .content .orange:hover,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit]:hover,
body#confirm-order-page.checkout .content button.inputsubmit:hover,
body#add-audio-page.checkout .content .btn:hover,
body#add-audio-page.checkout .content .btn:focus,
body#add-audio-page.checkout .content .button:hover,
body#add-audio-page.checkout .content .orange:hover,
body#add-audio-page.checkout .content input.inputsubmit[type=submit]:hover,
body#add-audio-page.checkout .content button.inputsubmit:hover {
  color: #fff;
  background-color: var(--cw-cta-hover);
  text-decoration: none;
}
body#confirm-order-page.checkout .content .btn:focus-visible,
body#confirm-order-page.checkout .content .button:focus-visible,
body#confirm-order-page.checkout .content .orange:focus-visible,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit]:focus-visible,
body#confirm-order-page.checkout .content button.inputsubmit:focus-visible,
body#add-audio-page.checkout .content .btn:focus-visible,
body#add-audio-page.checkout .content .button:focus-visible,
body#add-audio-page.checkout .content .orange:focus-visible,
body#add-audio-page.checkout .content input.inputsubmit[type=submit]:focus-visible,
body#add-audio-page.checkout .content button.inputsubmit:focus-visible {
  outline: 2px solid var(--cw-cta);
  outline-offset: 2px;
}
body#confirm-order-page.checkout .content .btn:disabled,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit]:disabled,
body#confirm-order-page.checkout .content button.inputsubmit:disabled,
body#add-audio-page.checkout .content .btn:disabled,
body#add-audio-page.checkout .content input.inputsubmit[type=submit]:disabled,
body#add-audio-page.checkout .content button.inputsubmit:disabled {
  background-color: #d8d0c2;
  color: #7d7566;
  cursor: not-allowed;
}
body#confirm-order-page.checkout .content .btn-secondary,
body#add-audio-page.checkout .content .btn-secondary {
  background-color: #fff;
  color: var(--cw-cta);
  border: 1px solid var(--cw-band-border);
}
body#confirm-order-page.checkout .content .btn-secondary:hover,
body#confirm-order-page.checkout .content .btn-secondary:focus,
body#add-audio-page.checkout .content .btn-secondary:hover,
body#add-audio-page.checkout .content .btn-secondary:focus {
  background-color: var(--cw-surface);
  border-color: var(--cw-cta);
  color: var(--cw-cta);
}
body#confirm-order-page.checkout .content .btn-secondary:disabled,
body#add-audio-page.checkout .content .btn-secondary:disabled {
  background-color: #fff;
  border-color: #cbbfa9;
  color: #8f8778;
}
body#confirm-order-page.checkout .button-group.picker,
body#add-audio-page.checkout .button-group.picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
body#confirm-order-page.checkout .button-group.picker .btn,
body#add-audio-page.checkout .button-group.picker .btn {
  flex: 0 1 auto;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--cw-band);
  color: var(--cw-text);
  border: 1px solid var(--cw-band-border);
  border-radius: var(--cw-radius);
}
body#confirm-order-page.checkout .button-group.picker .btn:hover,
body#add-audio-page.checkout .button-group.picker .btn:hover {
  background-color: var(--cw-lighttan);
  border-color: var(--cw-cta);
  color: var(--cw-text);
}
body#confirm-order-page.checkout .button-group.picker .btn.btn-active,
body#confirm-order-page.checkout .button-group.picker .btn:disabled,
body#add-audio-page.checkout .button-group.picker .btn.btn-active,
body#add-audio-page.checkout .button-group.picker .btn:disabled {
  background-color: var(--cw-cta);
  border-color: var(--cw-cta);
  color: #fff;
  cursor: default;
}
body#confirm-order-page.checkout .content .control-fileupload.orange,
body#add-audio-page.checkout .content .control-fileupload.orange {
  display: block;
  background-color: transparent;
  color: var(--cw-text);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: normal;
}
body#confirm-order-page.checkout .content input.custom-file-input.orange,
body#add-audio-page.checkout .content input.custom-file-input.orange {
  background-color: transparent;
  box-shadow: none;
}
body#confirm-order-page.checkout .content a,
body#add-audio-page.checkout .content a {
  color: var(--cw-link);
  font-weight: bold;
}
body#confirm-order-page.checkout .content a:hover,
body#add-audio-page.checkout .content a:hover {
  color: #9b6800;
  text-decoration: underline;
}
body#confirm-order-page.checkout .content input[type=text],
body#confirm-order-page.checkout .content input[type=email],
body#confirm-order-page.checkout .content input[type=password],
body#confirm-order-page.checkout .content input[type=number],
body#confirm-order-page.checkout .content select,
body#confirm-order-page.checkout .content textarea,
body#add-audio-page.checkout .content input[type=text],
body#add-audio-page.checkout .content input[type=email],
body#add-audio-page.checkout .content input[type=password],
body#add-audio-page.checkout .content input[type=number],
body#add-audio-page.checkout .content select,
body#add-audio-page.checkout .content textarea {
  background-color: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  font-family: "corporate-s", sans-serif;
  font-size: 1rem;
  color: var(--cw-text);
  box-shadow: none;
}
body#confirm-order-page.checkout .content input[type=text]:hover,
body#confirm-order-page.checkout .content input[type=email]:hover,
body#confirm-order-page.checkout .content input[type=password]:hover,
body#confirm-order-page.checkout .content select:hover,
body#confirm-order-page.checkout .content textarea:hover,
body#add-audio-page.checkout .content input[type=text]:hover,
body#add-audio-page.checkout .content input[type=email]:hover,
body#add-audio-page.checkout .content input[type=password]:hover,
body#add-audio-page.checkout .content select:hover,
body#add-audio-page.checkout .content textarea:hover {
  border-color: #b5b5b5;
}
body#confirm-order-page.checkout .content input[type=text]:focus,
body#confirm-order-page.checkout .content input[type=email]:focus,
body#confirm-order-page.checkout .content input[type=password]:focus,
body#confirm-order-page.checkout .content select:focus,
body#confirm-order-page.checkout .content textarea:focus,
body#add-audio-page.checkout .content input[type=text]:focus,
body#add-audio-page.checkout .content input[type=email]:focus,
body#add-audio-page.checkout .content input[type=password]:focus,
body#add-audio-page.checkout .content select:focus,
body#add-audio-page.checkout .content textarea:focus {
  outline: none;
  border-color: var(--cw-cta);
  box-shadow: 0 0 0 0.125em rgba(231, 155, 0, 0.35);
}
body#confirm-order-page.checkout .content label,
body#add-audio-page.checkout .content label {
  font-family: "corporate-s", sans-serif;
  font-weight: 600;
  color: var(--cw-text);
}
body#confirm-order-page.checkout .content input[type=checkbox] + label,
body#confirm-order-page.checkout .content input[type=radio] + label,
body#add-audio-page.checkout .content input[type=checkbox] + label,
body#add-audio-page.checkout .content input[type=radio] + label {
  font-weight: normal;
}
body#confirm-order-page.checkout .content .invalid,
body#add-audio-page.checkout .content .invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 0.125em rgba(192, 57, 43, 0.18);
}
body#confirm-order-page.checkout .content .error,
body#add-audio-page.checkout .content .error {
  color: #c0392b;
  font-weight: 600;
}
body#confirm-order-page.checkout .content .note,
body#confirm-order-page.checkout .content .small,
body#add-audio-page.checkout .content .note,
body#add-audio-page.checkout .content .small {
  color: var(--cw-muted);
  font-size: 0.85rem;
  font-weight: normal;
}
body#confirm-order-page.checkout .item,
body#add-audio-page.checkout .item {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
body#confirm-order-page.checkout .itembar,
body#add-audio-page.checkout .itembar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  /* Band, not $card-head: on a white card the cream head was so close to
     the card face that the item had no visible header at all. */
  background: var(--cw-band);
  border-bottom: 1px solid var(--cw-band-border);
  padding: 0.85rem 1.25rem;
  /* Not optional: the bar it replaces was amber with `color:white`, which
     would be invisible against this band. */
  color: var(--cw-text);
  font-size: 1rem;
}
body#confirm-order-page.checkout .itemtitle,
body#add-audio-page.checkout .itemtitle {
  font-family: "corporate-s", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cw-text);
}
body#confirm-order-page.checkout .itembody ul,
body#add-audio-page.checkout .itembody ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
body#confirm-order-page.checkout #login_form input,
body#confirm-order-page.checkout .itembar input,
body#add-audio-page.checkout #login_form input,
body#add-audio-page.checkout .itembar input {
  border-color: var(--cw-band-border);
}
body#confirm-order-page.checkout .itembody,
body#add-audio-page.checkout .itembody {
  padding: 1rem 1.25rem;
}
body#confirm-order-page.checkout .itemtotalrow,
body#add-audio-page.checkout .itemtotalrow {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid #e8dfd0;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
body#confirm-order-page.checkout .itemtotalnumber,
body#add-audio-page.checkout .itemtotalnumber {
  font-family: "corporate-e", serif;
  font-size: 1.2rem;
}
body#confirm-order-page.checkout .itembar .itemdelete a,
body#add-audio-page.checkout .itembar .itemdelete a {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  border-radius: var(--cw-radius);
  color: var(--cw-muted);
  font-size: 1rem;
  font-weight: normal;
  text-decoration: none;
}
body#confirm-order-page.checkout .itembar .itemdelete a:hover,
body#add-audio-page.checkout .itembar .itemdelete a:hover {
  background: rgba(192, 57, 43, 0.1);
  color: #c0392b;
  text-decoration: none;
}
body#confirm-order-page.checkout .totalsection,
body#add-audio-page.checkout .totalsection {
  text-align: right;
  font-size: 1rem;
}
body#confirm-order-page.checkout #totaldisplay,
body#add-audio-page.checkout #totaldisplay {
  font-family: "corporate-e", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cw-text);
  border-top: 2px solid var(--cw-accent);
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
body#confirm-order-page.checkout .paymentmethods,
body#add-audio-page.checkout .paymentmethods {
  margin-left: auto;
}
body#confirm-order-page.checkout .paymentwrapper,
body#add-audio-page.checkout .paymentwrapper {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
}
body#confirm-order-page.checkout #allpaymentforms,
body#add-audio-page.checkout #allpaymentforms {
  margin-top: 0.5rem;
  margin-bottom: 3rem;
  padding-top: 0;
}
body#confirm-order-page.checkout #message,
body#add-audio-page.checkout #message {
  background: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-left: 4px solid var(--cw-accent);
  border-radius: var(--cw-radius);
  box-shadow: none;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--cw-text);
}
body#confirm-order-page.checkout .emptycart,
body#add-audio-page.checkout .emptycart {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
}
body#confirm-order-page.checkout #login_form,
body#add-audio-page.checkout #login_form {
  background: var(--cw-band);
  border: 1px solid var(--cw-band-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
  margin-bottom: 2.5rem;
  /* app.css right-aligns the whole payment column
     (#confirm-order-page .paymentmethods{text-align:right}), which put these
     labels hard against the right edge above left-aligned inputs. Harmless
     when the form was bare text; obvious once it became a panel. */
  text-align: left;
}
body#confirm-order-page.checkout #login_form h4,
body#add-audio-page.checkout #login_form h4 {
  font-family: "corporate-e", serif;
  font-size: 1.1rem;
  font-weight: 600;
}
body#confirm-order-page.checkout #login_form hr,
body#add-audio-page.checkout #login_form hr {
  border: none;
  border-top: 1px solid var(--cw-band-border);
}
body#confirm-order-page.checkout #cwwrapper,
body#add-audio-page.checkout #cwwrapper {
  overflow: hidden;
}
body#confirm-order-page.checkout #storeform table,
body#add-audio-page.checkout #storeform table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  overflow: hidden;
}
body#confirm-order-page.checkout #storeform th.top,
body#add-audio-page.checkout #storeform th.top {
  background: var(--cw-card-head);
  border-bottom: 1px solid var(--cw-card-border);
  padding: 0.75rem 1rem;
  font-family: "corporate-s", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
body#confirm-order-page.checkout #storeform td,
body#add-audio-page.checkout #storeform td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #e8dfd0;
  vertical-align: top;
}
body#confirm-order-page.checkout #storeform tr:last-child td,
body#add-audio-page.checkout #storeform tr:last-child td {
  border-bottom: none;
}
body#confirm-order-page.checkout .surveycallout,
body#add-audio-page.checkout .surveycallout {
  background: var(--cw-surface);
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
  margin: 2rem 0;
}
body#confirm-order-page.checkout #root,
body#add-audio-page.checkout #root {
  width: 100%;
  margin: 0 auto;
}
body#confirm-order-page.checkout .oneaudio,
body#add-audio-page.checkout .oneaudio {
  background: #fff;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--cw-radius);
  padding: 1.25rem;
}
body#confirm-order-page.checkout .content a.help,
body#add-audio-page.checkout .content a.help {
  display: inline;
  float: right;
  clear: none;
  width: auto;
  margin: 0 0 0 1rem;
  padding: 0;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--cw-muted);
  text-align: right;
}
body#confirm-order-page.checkout .content a.help:hover,
body#add-audio-page.checkout .content a.help:hover {
  color: var(--cw-cta);
}
body#confirm-order-page.checkout div.progress,
body#confirm-order-page.checkout progress,
body#add-audio-page.checkout div.progress,
body#add-audio-page.checkout progress {
  border-radius: 2px;
  /* Warm track. The bundle's #999 is as off-palette as the old #008000 fill
     was — two foreign colours sitting on cream. $band-border is the hairline
     tone already used for panel edges throughout the funnel. */
  background: #e2d7c4;
}
body#confirm-order-page.checkout progress::-webkit-progress-bar,
body#add-audio-page.checkout progress::-webkit-progress-bar {
  border-radius: 2px;
  background: #e2d7c4;
}
body#confirm-order-page.checkout progress::-webkit-progress-value,
body#add-audio-page.checkout progress::-webkit-progress-value {
  border-radius: 2px;
  background: #6aac26;
}
body#confirm-order-page.checkout progress::-moz-progress-bar,
body#add-audio-page.checkout progress::-moz-progress-bar {
  border-radius: 2px;
  background: #6aac26;
}
body#confirm-order-page.checkout .options h4,
body#add-audio-page.checkout .options h4 {
  font-family: "corporate-e", serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
body#confirm-order-page.checkout select.product,
body#add-audio-page.checkout select.product {
  font-size: 1.15rem;
  font-weight: 600;
  height: auto;
}
@media (max-width: 768px) {
  body#confirm-order-page.checkout .content,
body#add-audio-page.checkout .content {
    padding: 1.5rem 1rem 0;
  }
  body#confirm-order-page.checkout .text-headline h1,
body#confirm-order-page.checkout .checkout-title,
body#add-audio-page.checkout .text-headline h1,
body#add-audio-page.checkout .checkout-title {
    font-size: 1.9rem;
  }
  body#confirm-order-page.checkout .itembar,
body#add-audio-page.checkout .itembar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  body#confirm-order-page.checkout .paymentmethods,
body#confirm-order-page.checkout #allpaymentforms,
body#add-audio-page.checkout .paymentmethods,
body#add-audio-page.checkout #allpaymentforms {
    width: 100%;
  }
  body#confirm-order-page.checkout .content .btn,
body#confirm-order-page.checkout .content .button,
body#confirm-order-page.checkout .content .orange,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit],
body#add-audio-page.checkout .content .btn,
body#add-audio-page.checkout .content .button,
body#add-audio-page.checkout .content .orange,
body#add-audio-page.checkout .content input.inputsubmit[type=submit] {
    width: 100%;
    padding: 12px 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body#confirm-order-page.checkout .content .btn,
body#confirm-order-page.checkout .content .button,
body#confirm-order-page.checkout .content .orange,
body#confirm-order-page.checkout .content input.inputsubmit[type=submit],
body#add-audio-page.checkout .content .btn,
body#add-audio-page.checkout .content .button,
body#add-audio-page.checkout .content .orange,
body#add-audio-page.checkout .content input.inputsubmit[type=submit] {
    transition: none;
  }
}

/* Wordmark plate opt-out — deliberately OUTSIDE the mixin, and named page by
   page rather than scoped to `.checkout`, so it covers exactly add-audio and
   confirm-order and not the rest of the funnel.

   storenav.scss gives every store page `background: rgb(125 125 125 / 12%)` so
   the wordmark keeps the translucent plate the lander pages get from app.scss.
   That rule STAYS — it is load-bearing on pages with busy headers. These two
   pages have a plain cream header where the plate reads as a stray grey box.

   Must out-specify `#cw-sitenav a.wordmark` (1,1,1) AND survive load order,
   because the nav's stylesheet link renders in the BODY, after this sheet.
   This is (2,2,2). */
body#add-audio-page.checkout #cw-sitenav a.wordmark,
body#confirm-order-page.checkout #cw-sitenav a.wordmark {
  background: none;
  border-radius: 0;
}