/* Shared styling for the two catalog pages: the product page (/application-manager
 * and /bundles) and the post-checkout confirmation (/purchase-complete).
 *
 * Same palette and shell as the Rescue Kit's post-purchase pages, deliberately —
 * a buyer moves between these screens inside one purchase, and a change of visual
 * language mid-flow reads as "am I still on the right site?" at the exact moment
 * a card number has just been typed.
 *
 * Everything a price or a date appears in is plain text at a readable size. There
 * are no strikethrough-and-explosion price treatments here: the savings line says
 * what it saves in words, because a bundle that has to shout is a bundle nobody
 * has checked the arithmetic on.
 */

:root{
  --paper:#FAF7F0; --paper-line:#E4DECF; --ink:#23303F; --ink-soft:#5B6672;
  --pen:#4E7A6C; --pen-soft:#EDF3F0; --gold:#B9922F; --white:#fff; --warn:#9A3B2E;
}
*{ box-sizing:border-box; } html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:760px; margin:0 auto; padding:26px 22px 72px; }
header.top{ text-align:center; margin-bottom:8px; }
.brand{ font-family:'Caveat',cursive; font-weight:700; font-size:38px; color:var(--ink); text-decoration:none; display:inline-block; }
.brand .dot{ color:var(--pen); }

h1{ font-size:28px; line-height:1.25; margin:0 0 12px; letter-spacing:-0.015em; }
h2{ font-size:20px; margin:0 0 10px; }
h3{ font-size:16px; margin:0 0 8px; }
p{ margin:0 0 14px; }
a{ color:var(--pen); }
.soft{ color:var(--ink-soft); }
.small{ font-size:13px; color:var(--ink-soft); line-height:1.5; }
.lede{ font-size:17px; color:var(--ink-soft); margin-bottom:26px; }

.card{ background:var(--white); border:1px solid var(--paper-line); border-radius:10px; padding:24px; margin:0 0 20px; }

.price{ font-size:30px; font-weight:700; margin:0 0 2px; letter-spacing:-0.02em; }
.price .was{ font-size:16px; font-weight:400; color:var(--ink-soft); text-decoration:line-through; margin-left:8px; }
.price-sub{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; }

/* What is in a bundle, one line per product. The same list the account page
   shows after purchase (spec §9), so what was promised and what was delivered are
   recognisably the same list rather than two differently-worded ones. */
.includes{ list-style:none; padding:0; margin:0 0 16px; }
.includes li{ padding:9px 0; border-top:1px solid var(--paper-line); display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.includes li:first-child{ border-top:0; }
.includes .name{ font-weight:600; }
.includes .state{ margin-left:auto; font-size:13px; color:var(--ink-soft); }
.includes .state.revoked{ color:var(--warn); }

.savings{ background:var(--pen-soft); border:1px solid #cfe0d9; border-radius:8px; padding:10px 12px; font-size:13.5px; margin:0 0 16px; }

/* Every disclosure §8 specifies, verbatim, above the button rather than below it.
   A renewal disclosed under the control that starts the renewal has been
   technically shown and practically hidden. */
.disclosures{ margin:0 0 16px; padding:0; list-style:none; }
.disclosures li{ font-size:13px; color:var(--ink-soft); border-left:3px solid var(--paper-line); padding:2px 0 2px 12px; margin:0 0 10px; }

.email-row{ margin:0 0 12px; }
.email-row label{ display:block; font-size:13px; color:var(--ink-soft); margin-bottom:5px; }
.email-row input{ width:100%; padding:11px 12px; font-size:15px; font-family:inherit; border:1px solid var(--paper-line); border-radius:6px; background:var(--white); color:var(--ink); min-height:44px; }
.email-row input:focus{ outline:2px solid var(--pen); outline-offset:1px; }

.cta{ display:inline-block; width:100%; background:var(--ink); color:#fff; border:0; border-radius:6px; padding:14px 20px; font-size:15.5px; font-weight:600; font-family:inherit; cursor:pointer; min-height:48px; }
.cta:hover{ background:#111c28; }
.cta:disabled{ opacity:.55; cursor:default; }
.cta.secondary{ background:transparent; color:var(--ink); border:1px solid var(--paper-line); }

.status{ font-size:13.5px; margin:10px 0 0; min-height:20px; }
.status.error{ color:var(--warn); }

.unavailable{ background:#FBF6E8; border:1px solid #E8DCBC; border-radius:8px; padding:12px 14px; font-size:13.5px; }

.renewal{ font-size:13.5px; color:var(--ink-soft); margin:12px 0 0; }
.refund-line{ font-size:13px; color:var(--ink-soft); margin:10px 0 0; }