/* The Back-to-School Essay Reset promotion — /essay-reset, /essay-reset/complete
 * and /essay-reset/upgrade/:token.
 *
 * Loaded ON TOP OF commerce.css, which carries the shell, the palette and every
 * shared component. Only what is genuinely new to this promotion is here: the
 * upgrade option cards, the three-number price line, and the download panel.
 * A buyer moves between the catalog pages and these 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.
 */

/* The upgrade block. ONE compact section, all options visible at once — the
 * brief's "do not create a sequential upsell funnel" is a layout instruction as
 * much as a routing one, and a stack of full-width cards each demanding a
 * decision is a funnel drawn vertically. */
.upgrade-section{ margin:28px 0 0; }
.upgrade-section h2{ margin:0 0 4px; }
.upgrade-section .section-note{ font-size:13.5px; color:var(--ink-soft); margin:0 0 16px; }

.options{
  display:grid; gap:14px; margin:0 0 18px;
  /* Three across where there is room, one per row on a phone. auto-fit rather
   * than a fixed count so the two-option case fills the width instead of
   * leaving a gap where a third card would have been. */
  grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
}

.option{
  background:var(--white); border:1px solid var(--paper-line); border-radius:10px;
  padding:18px; display:flex; flex-direction:column;
}
.option h3{ margin:0 0 3px; font-size:16px; }
.option .lede{ font-size:13.5px; margin:0 0 8px; }
.option .body{ font-size:14px; margin:0 0 12px; }

/* The three numbers, and only the three numbers: additional charge, usual
 * price, savings. There is deliberately no running total anywhere on the page —
 * a grand total invites somebody to re-decide the purchase they have already
 * made, which is the opposite of what this section is for. */
.option .charge{ font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0 0 2px; }
.option .compare{ font-size:13px; color:var(--ink-soft); margin:0 0 12px; }
.option .compare .was{ text-decoration:line-through; }
.option .compare .save{ color:var(--pen); font-weight:600; }

.option ul{ margin:0 0 16px; padding-left:17px; font-size:13px; color:var(--ink-soft); }
.option ul li{ margin:3px 0; }

/* Pushes the button to the bottom of every card regardless of how many bullets
 * it has, so three cards of different heights still present one row of buttons
 * rather than a staircase. */
.option .spacer{ flex:1 1 auto; }
.option .cta{ font-size:14.5px; padding:12px 14px; min-height:46px; }

/* "No thanks—take me to my Rescue Kit". A link, not a button, and below the
 * options rather than beside them: declining should be easy to find and should
 * not compete visually with the thing being offered. */
.decline{ display:block; text-align:center; font-size:14px; margin:4px 0 10px; }

.availability{ font-size:13px; color:var(--ink-soft); text-align:center; margin:0 0 8px; }

/* The download panel. "The buyer must also have a clearly visible route directly
 * to the download" — so it sits above the upgrade section, in the accent colour,
 * and is the only thing on the page styled as a primary destination. */
.download-panel{ background:var(--pen-soft); border:1px solid #cfe0d9; border-radius:10px; padding:20px 22px; margin:0 0 20px; }
.download-panel h2{ margin:0 0 6px; }
/* The download route is an <a> styled as the primary button. commerce.css's
 * .cta was written for <button>, so an anchor picks up the global link
 * underline through it — removed here rather than there, because changing the
 * shared rule would silently restyle every existing catalog page. */
a.cta{ text-decoration:none; text-align:center; }
.download-panel .cta{ background:var(--pen); }
.download-panel .cta:hover{ background:#436a5e; }
.download-panel .file-count{ font-size:13px; color:var(--ink-soft); margin:10px 0 0; }

/* The two public offers on the landing page, side by side. */
.offers{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin:0 0 22px; }
.offer{ background:var(--white); border:1px solid var(--paper-line); border-radius:10px; padding:24px; display:flex; flex-direction:column; }
.offer.featured{ border-color:var(--pen); box-shadow:0 0 0 1px var(--pen); }
/* ?offer=kit / ?offer=bundle — which of the two this visitor came for. An
 * outline rather than an autofocus: it answers "did the right button bring me
 * here" without scrolling the page or opening a keyboard over the price. */
.offer.chosen{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.offer.featured.chosen{ border-color:var(--pen); box-shadow:0 0 0 2px var(--pen); }
.offer .flag{ display:inline-block; background:var(--pen-soft); color:var(--pen); border-radius:100px; padding:3px 10px; font-size:12px; font-weight:600; margin:0 0 10px; align-self:flex-start; }

/* The two facts specific to the bundle. The access date sits directly under the
 * seat count, smaller, because it qualifies the seats rather than standing as a
 * claim of its own - and because the two cards have to read as the same shape at
 * a glance, which they stop doing the moment one of them grows a paragraph. */
/* Both cards label their contents, so "Includes" reads as the same slot on
 * each: two product names on the bundle, the delivery itself on the Kit. */
/* Sits immediately under the price, because that is where the buyer stops
 * reading. A tax note further down is one they meet after deciding. */
.offer .tax-note{ font-size:12.5px; color:var(--ink-soft); margin:-6px 0 14px; }
.offer .includes-label{ font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 6px; }
.offer .includes{ margin-bottom:12px; }
/* One sentence describing the delivery, not a list of product names. */
.offer .includes.delivery li{ border-top:0; padding-top:0; }
.offer .includes.delivery .name{ font-weight:400; }
.offer .seats{ font-size:14px; font-weight:600; margin:0 0 2px; }
.offer .access{ font-size:12.5px; color:var(--ink-soft); margin:0 0 16px; }

/* Everything true of BOTH offers, once, beneath the pair. This is where the
 * bundle card's weight went. */
.shared-terms{ border-top:1px solid var(--paper-line); padding:20px 2px 0; margin:4px 0 18px; }
.shared-terms h2{ font-size:16px; margin:0 0 12px; }
.shared-terms p{ margin:0 0 10px; font-size:14.5px; }
.shared-terms .small{ margin:10px 0 0; }
.shared-terms .refund-terms{ margin:0; }

/* Per-component refund terms. A $60 bundle carries an unconditional seven days
 * on the Kit and the Application Manager's ordinary terms on the other half, and
 * one blended sentence would be wrong about one of them. */
.refund-terms{ margin:14px 0 0; padding:0; list-style:none; }
.refund-terms li{ font-size:12.5px; color:var(--ink-soft); margin:0 0 5px; }
.refund-terms .who{ font-weight:600; color:var(--ink); }

.closed{ background:#FBF6E8; border:1px solid #E8DCBC; border-radius:10px; padding:20px 22px; margin:0 0 20px; }

@media (max-width:520px){
  .options{ grid-template-columns:1fr; }
  .offers{ grid-template-columns:1fr; }
}