:root {
  --onespot:       #5B59D6;
  --paua:          #1C1A5F;
  --onespot-dark:  #4745C7;
  --gradelink:     #2A5991;
  --soft-lavander-tint: #F1F1FC;
  --card:          white;
  --text:          black;

  --radius-lg: 1rem;
  --radius-md: 0.8rem;
  --shadow-card: 0 0.25rem 1.5rem rgba(91, 89, 214, 0.10);

  --font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "League Spartan", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body,
button,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
}

button, input, textarea, select { font-family: inherit; }

/* ---------------------------------------------------- universal headings
   Only four heading levels exist: h1-h4. The .h3 and .h4 classes give the same
   look to elements that can't be a real heading tag (e.g. inside a button).
   Contexts below override size, colour and layout only, never the font. */
h1, h2, h3, h4,
.h3, .h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}

h1, h2 { line-height: 1; color: var(--onespot-dark); }
h3, h4, .h3, .h4 { line-height: 1.2; color: var(--onespot-dark); }

/* Fluid sizes: smallest = mobile minimum, largest = desktop maximum
   (H1 32-80px, H2 24-58px, H3 20-48px, H4 18-22px). The middle value is a
   straight line between 375px wide and the width where the maximum is hit
   (H1 hits 80px and H2 hits 58px and H3 hits 48px at 1280px; H4 at 1440px). */
h1 { font-size: clamp(2.5rem, 1.464rem + 4.42vw, 5rem); }
h2 { font-size: clamp(2.125rem, 1.503rem + 2.652vw, 3.625rem); }
h3, .h3 { font-size: clamp(1.75rem, 1.232rem + 2.21vw, 3rem); }
h4, .h4 { font-size: clamp(1.25rem, 0.939rem + 1.326vw, 2rem); }

.hidden { display: none !important; }

/* ---------------------------------------------------------------- banner */

.proposal-banner {
  background: var(--gradelink);
  color: #FFFFFF;
  padding: 1.5rem 7%;
}

.proposal-banner__inner {
  max-width: 73.75rem;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.proposal-banner p { margin: 0; }

.banner-text {
  font-size: 14px;
  line-height: 1.55;
  color: #FFFFFF;
  text-align: center;
}

/* ----------------------------------------------------- bands + container */

/* Universal section size */
.section { padding: 6rem 7%; }

.band {
  position: relative;
  padding: 6rem 7%;
}

.band > .container,
.band > .container--hero { position: relative; z-index: 1; }

/* 01 — hero: top-to-bottom fade from white to pale lavender to orchid to indigo (heading + image only),
   ending flat. */
.band--hero {
  /* Not a straight 4-stop ramp: colours are blended in oklab with eased stops,
     and an orchid glow sits behind the phones so the middle has some depth. */
  background:
    linear-gradient(to bottom, #FFFFFF 0%, #E3E3F8 42%, #B96FD6 70%, var(--onespot-dark) 100%);
  background:
    radial-gradient(ellipse 55% 35% at 50% 66%, rgba(185, 111, 214, 0.45) 0%, rgba(185, 111, 214, 0) 100%),
    linear-gradient(in oklab to bottom,
      #FFFFFF 0%,
      #FFFFFF 18%,
      #F0F0FB 30%,
      #E3E3F8 42%,
      color-mix(in oklab, #E3E3F8 55%, #B96FD6) 58%,
      color-mix(in oklab, #5B59D6 40%, #5B59D6) 74%,
      #4745C7 90%,
      var(--onespot-dark) 100%);
  padding-top: 8rem;      /* space between the banner and the headline */
  padding-bottom: 8rem;   /* extra height: room under the phones for the fade */
  z-index: 2;
}

/* Cloud texture over the gradient at 10% opacity. Sits under the content
   (the container has z-index 1) and above the gradient. */
.band--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://pub-80f93f5ac63a4eeabbce9d7f2b8d4e7f.r2.dev/sites/c20d0202-3525-476d-8409-3728f33430f3/1784329364887-footer%20cloudy%20background%202026%20final.webp") center / cover no-repeat;
  opacity: 0.4;
  pointer-events: none;
}

/* The bottom of the hero fades to white. Sits inside the hero, above the
   gradient and cloud texture but under the content (container is z-index 1). */
.band--hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 24rem;
  /* smoothstep easing: starts and ends gently, so there's no visible band */
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.000) 0%,
    rgba(255, 255, 255, 0.028) 10%,
    rgba(255, 255, 255, 0.104) 20%,
    rgba(255, 255, 255, 0.216) 30%,
    rgba(255, 255, 255, 0.352) 40%,
    rgba(255, 255, 255, 0.500) 50%,
    rgba(255, 255, 255, 0.648) 60%,
    rgba(255, 255, 255, 0.784) 70%,
    rgba(255, 255, 255, 0.896) 80%,
    rgba(255, 255, 255, 0.972) 90%,
    rgba(255, 255, 255, 1.000) 100%);
  pointer-events: none;
}

/* No extra gap under the phones image inside the hero. */
.band--hero .option-block__media--wide { margin-bottom: 0; }
.band--hero .section-head { margin-bottom: 5rem; }   /* space between the headline and the hero photo */

/* Hero breakpoint: at 1500px and below the hero image runs the full width of the
   screen. The section's side padding and the container cap (90%) come off, and
   the heading keeps its own 7% side padding so the text doesn't touch the edges. */
@media (max-width: 1500px) {
  .band--hero { padding-left: 0; padding-right: 0; }
  .band--hero .container--hero { max-width: 100%; }   /* beats the plain .container--hero rule further down */
  .band--hero .option-block--bare { padding-left: 0; padding-right: 0; }   /* beats the 560px .option-block padding */
  .band--hero .section-head { padding-left: 7%; padding-right: 7%; }
}

/* 01a — Gradelink Connect + Standalone: white, fading toward the bottom to the lavender tint */
.band--apps-rest {
  padding-top: 0;
  padding-bottom: 0;
  background: linear-gradient(to bottom,
    #FFFFFF 0%,
    #FFFFFF 40%,
    color-mix(in srgb, var(--soft-lavander-tint) 25%, #FFFFFF) 60%,
    color-mix(in srgb, var(--soft-lavander-tint) 60%, #FFFFFF) 80%,
    var(--soft-lavander-tint) 100%);
}

/* 01b — Centralize and streamline (copied from onespotapps.com).
   The pricing section below already has 6rem of top padding, so the gap
   between the two sections is that 6rem, not 12rem. */
/* Background: lavender tint at the top, fading to white toward the bottom. */
.section--centralize {
  padding-bottom: 0;
  background: linear-gradient(to bottom,
    var(--soft-lavander-tint) 0%,
    color-mix(in srgb, var(--soft-lavander-tint) 60%, #FFFFFF) 25%,
    color-mix(in srgb, var(--soft-lavander-tint) 25%, #FFFFFF) 55%,
    color-mix(in srgb, var(--soft-lavander-tint) 8%, #FFFFFF) 80%,
    #FFFFFF 100%);
}

.centralize {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 8%;
}

@media (max-width: 760px) {
  .centralize { grid-template-columns: minmax(0, 1fr); }
}

.centralize__item {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);   /* icon beside the heading */
  gap: 0.75rem 4%;
  align-items: center;
}

.centralize__item img {
  display: block;
  width: 6.25rem;
  height: 6.25rem;
  margin: 0;
}

.centralize__item h4 {
  margin: 0;
  width: 100%;
}

/* Copy runs full width under the icon + heading row. */
.centralize__item p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 16px;
}

/* 03 — soft lavender: the pricing heading and the calculator card */
.band--calc {
  /* the cloud image fades up into white at the top of the section */
  background:
    linear-gradient(to bottom,
      #FFFFFF 0%,
      rgba(255, 255, 255, 0.92) 12%,
      rgba(255, 255, 255, 0.75) 28%,
      rgba(255, 255, 255, 0.5) 45%,
      rgba(255, 255, 255, 0.28) 62%,
      rgba(255, 255, 255, 0.12) 80%,
      rgba(255, 255, 255, 0) 100%) top / 100% 32rem no-repeat,
    #E1E0FF url("https://pub-80f93f5ac63a4eeabbce9d7f2b8d4e7f.r2.dev/sites/c20d0202-3525-476d-8409-3728f33430f3/1784329364887-footer%20cloudy%20background%202026%20final.webp") center / cover no-repeat;
}

.band--footer {
  background: var(--gradelink);
  padding: 3rem 7%;   /* top and bottom match */
}

.container {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0;
}

/* Hero-only container */
.container--hero {
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}

/* ------------------------------------------------------ section headings */

.section-head { text-align: center; margin-bottom: 3rem; }

.section-head h1,
.section-head h3 {
  margin: 0 0 0.875rem;
  text-wrap: balance;
}

/* Section 01 has no subtitle, so drop the gap the heading reserves for one. */
.section-head h1:last-child,
.section-head h3:last-child { margin-bottom: 0; }

.section-head__sub {
  max-width: 45rem;
  margin: 0 auto;
  font-size: inherit;   /* follows body */
  color: inherit;       /* follows body */
}

/* ================= SECTION 03 + 04 — PRICE + CALCULATOR ================= */

.pricing-head {
  max-width: 56.25rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.pricing-head__kicker {
  margin: 0 0 1rem;
  font-size: 18px;
  color: #000000;
}

.pricing-head h3 {
  margin: 0;
  text-wrap: balance;
}

.pricing-head h3 em { font-style: italic; }

/* ------------------------------------------------------------ calculator */

.calc {
  font-family: var(--font-body);   /* everything in the calculator is Montserrat */
  width: 100%;
  max-width: 56.25rem;
  margin: 0 auto;
  padding: 1.5rem 4%;
  background: transparent;   /* same lavender as the section: no visible edge */
  border-radius: 20px;
}

.calc__card > h3 {
  margin: 0 0 1.25rem;
  text-align: left;
  color: var(--paua);
}

.calc__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 2.5rem;
  align-items: start;
  padding: 3.5rem 5% 1.5rem;   /* top = the 3.5rem of space under the content (1.5rem padding + 2rem margin) */
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.10);
}

.calc__card > h3,
.calc__question,
.calc__slider,
.calc__cost { grid-column: 1; }

.calc__title { font-size: clamp(1.875rem, 1.642rem + 0.995vw, 2.4375rem); }

.calc__question {
  display: block;
  text-align: left;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--onespot-dark);
}

.calc__slider { margin: 2.5rem 0; }

.calc__range {
  display: block;
  width: 100%;
  height: 0.5rem;
  margin: 0;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #E1E0FF;
  cursor: grab;
}

.calc__range:active { cursor: grabbing; }

.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--onespot);
  cursor: grab;
  transition: transform 0.2s ease;
}

.calc__range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--onespot);
  cursor: grab;
  transition: transform 0.2s ease;
}

.calc__range:active::-webkit-slider-thumb { cursor: grabbing; }
.calc__range:active::-moz-range-thumb { cursor: grabbing; }
.calc__range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc__range::-moz-range-thumb:hover { transform: scale(1.1); }

.calc__range:focus-visible {
  outline: 0.1875rem solid var(--onespot);
  outline-offset: 0.75rem;
}

/* Plain body-style copy inside the calculator (same values as the body rule). */
.calc__count,
.calc__cost-label,
.calc__per,
.calc__includes {
  margin: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}

.calc__count { text-align: center;  margin-top: 0.5rem}

.calc__count output {
  margin-right: 0.5rem;
  font-weight: 600;
  color: var(--onespot);
}

.calc__cost {
  margin: 0 0 2rem;
  text-align: center;
}

.calc__total {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 1.4rem 0;
  line-height: 1;
}

.calc__amount {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--onespot-dark);
}

.calc__per[hidden] { display: none; }

.calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.3125rem;   /* 21px + the text's own leading = same visible gap as above "Total Savings" */
}

.btn {
  flex: 1 1 9rem;
  padding: 0.8rem 4%;
  border: 0.0625rem solid var(--onespot);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn[hidden] { display: none; }

.btn--primary { background: var(--onespot); color: #FFFFFF; }
.btn--primary:hover { background: var(--onespot-dark); border-color: var(--onespot-dark); }

.btn--ghost { background: #FFFFFF; color: var(--onespot); }
.btn--ghost:hover { background: var(--soft-lavander-tint); }

.btn:focus-visible {
  outline: 0.1875rem solid var(--onespot);
  outline-offset: 0.1875rem;
}

.calc__savings {
  margin: 1rem 0 0;
  font-size: 20px;
  font-weight: 600;
  color: #1CA660;
}

/* savings breakdown (collapsible) */

/* Right-hand column: the $48 price, then the savings breakdown,
   top-aligned with the question. */
.calc__aside {
  grid-column: 2;
  grid-row: 1 / span 5;
  align-self: start;
}

.calc__price {
  margin: 0 0 1.5rem;
  text-align: center;
}

.calc__price-amount {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(56px, 6vw, 76px);
  line-height: 1;
  color: var(--onespot-dark);
}

.calc__price-per {
  margin: 0.5rem 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  padding-bottom: 1rem;
  color: var(--onespot-dark);
}

.calc__alt {
  margin: 1rem 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.calc__alt[hidden] { display: none; }

.calc__alt a {
  color: var(--onespot);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
}

.calc__alt a:hover { color: var(--paua); }

.calc__breakdown { margin: 0; }

/* The phones photo sits under "per year, per enrolled student" and steps
   aside when the Savings Breakdown is open (pricing.js toggles [hidden]). */
.calc__media {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin-top: 0.5rem;   /* gap under "per year, per enrolled student" */
  margin-bottom: 0;     /* cancels the browser's default figure margin under the photo */
  max-height: 16rem;
  overflow: hidden;
  opacity: 1;
  transition:
    max-height .6s cubic-bezier(.22, 1, .36, 1),
    opacity .35s ease-out,
    visibility 0s linear 0s;
}

/* eases out of view while the Savings Breakdown drops down */
.calc__media.is-collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height .6s cubic-bezier(.22, 1, .36, 1),
    opacity .35s ease-out,
    visibility 0s linear .6s;
}

.calc__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: 15rem;
  margin: 0;
  object-fit: contain;
  object-position: center;
  /* the artwork carries more empty space on its left than its right (the
     phones' shadow runs to the edge), so nudge it back to true centre */
  transform: translateX(-10%);
}

.calc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 -0.0625rem;
  padding: 0.75rem 4%;
  background: #F0FDF4;
  border: 1px solid #A7F3D0;
  border-radius: 12px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
}

.calc__toggle[aria-expanded="true"] { border-radius: 12px 12px 0 0; }

.calc__toggle:focus-visible {
  outline: 0.1875rem solid var(--onespot);
  outline-offset: 0.1875rem;
}

.calc__toggle .h4 {
  font-family: var(--font-body);
  font-size: 16px;
  color: #1E7E34;
}

.calc__toggle-icon {
  font-size: 18px;
  color: var(--text);
  transition: transform 0.2s ease;
}

.calc__toggle[aria-expanded="true"] .calc__toggle-icon { transform: rotate(180deg); }

.calc__details {
  height: 0;
  overflow: hidden;
  background: #F0FDF4;
  box-shadow: inset 0 0 0 0.0625rem #A7F3D0;
  border-radius: 0 0 12px 12px;
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
}

.calc__details[hidden] { display: none; }

.calc__details p {
  margin: 0;
  padding: 0.75rem 5%;
  font-size: 14px;
  line-height: 1.5;
  color: #1E7E34;
}

.calc__discount {
  height: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
  font-size: 16px;
  color: var(--onespot);
  opacity: 0;
  transform: translateY(-0.375rem);
  transition:
    height .45s cubic-bezier(.22, 1, .36, 1),
    margin-top .45s cubic-bezier(.22, 1, .36, 1),
    opacity .35s ease-out,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}

.calc__discount.is-shown {
  margin-top: 1rem;
  opacity: 1;
  transform: none;
}

/* price <-> "Contact Us" */
.calc__cost.is-swapping { animation: costSettle .45s ease-out; }

@keyframes costSettle {
  from { opacity: 0.35; transform: translateY(0.375rem); }
  to   { opacity: 1;    transform: none; }
}

/* ==================== SECTION 01 — THE APP (screens/options) ==================== */

.option-block {
  background: var(--card);
  border: 0.0625rem solid var(--soft-lavander-tint);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 2.25rem 3.5%;
  margin-bottom: 1.75rem;
}

.option-block:last-child { margin-bottom: 0; }

/* Frameless variant: no card background, border, shadow or padding. */
.option-block--bare {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Gradelink Connect: text-only, centred stack in the style of the
   "Powered by Stripe" section on onespotapps.com/billing. The hero above it
   (image + caption) is a separate .option-block--bare and is not affected. */
.option-block--stripe { text-align: center; }

.option-block--stripe .option-block__body {
  display: grid;
  gap: 1rem;
  margin: 0 auto;
}

/* Onespot logo centred above the "Gradelink Connect" heading. */
.connect-logo {
  display: block;
  height: 4rem;
  width: auto;
  margin: 0 auto;
}

.option-block--stripe h2 {
  margin: 0 0 1rem;
}

/* Paragraph copy reflects the body's colour and font size (inherited, so
   changing them on body changes these too). */
.option-block--stripe .option__lede,
.option-block--stripe .option__body-text {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
}

.option-block--upgrade {
  background: var(--onespot);
  color: #FFFFFF;
  border-radius: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.option-block--upgrade h3 { color: #FFFFFF; }

/* Two-up layout: media beside the copy. Used for the portrait-ish App Store
   shot; the wide four-phone image gets the full width instead. */
.option-block--split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 5rem;
  align-items: center;
}

@media (max-width: 1000px) {
  .option-block--split { grid-template-columns: 1fr; gap: 2.5rem; }
  /* stacked: more side padding. Two classes so it also beats the 560px
     .option-block padding (6%) that comes later in the file. */
  .option-block.option-block--upgrade { padding-left: 10%; padding-right: 10%; }
}

/* ------------------------------------------------------------------ media */

.option-block__media { margin: 0; }

.option-block__media--wide { margin-bottom: 1.75rem; }

.option-block__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

/* Tagline between "Gradelink Connect" and "Standalone custom app": looks like
   an h3 (size, font and line-height 1 come from the universal .h3 class) but
   regular weight, in --paua. */
.tagline-text {
  font-weight: 400;
  color: var(--paua);
  text-align: center;
  padding: 3rem 0;
  text-wrap: balance;
}

.option-block__media--shot { margin: 0; }

.option-block__media--shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  /* drop-shadow follows the photo's curved outline (box-shadow would draw a square one) */
  filter: drop-shadow(0 0.625rem 1.25rem rgba(0, 0, 0, 0.3));
}

/* ------------------------------------------------------------------- copy */

.option-block__body { min-width: 0; }

.option-block h3 {
  margin: 0 0 0.75rem;
}

.option__lede {
  margin: 0 0 1.125rem;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
}

.option__body-text {
  margin: 0 0 0.875rem;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}

.option__body-text:last-child { margin-bottom: 0; }

/* In the full-width block the copy sits under the image, so cap the measure —
   otherwise lines run the whole container and get hard to read. The cap goes
   on the body so the lede and the paragraphs wrap to the same width. */
.option-block:not(.option-block--split) .option-block__body { max-width: 51.25rem; }

.option__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6875rem;
}

.option__list li {
  position: relative;
  padding-left: 6%;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
}

.option__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--onespot);
}

.option-block--upgrade .option__list li::before { background: #FFFFFF; }

/* Standalone custom app copy takes the body's font and size, and the card's
   white colour (inherited from .option-block--upgrade). */
.option-block--upgrade .option__lede,
.option-block--upgrade .option__list li {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- footer */

/* Footer copy uses the shared .banner-text class (same size, colour and alignment as the banner). */
.band--footer p { margin: 0; max-width: 47.5rem; margin-inline: auto; }

/* ------------------------------------------------- two-column alignment */

/* Side by side, the right column is stretched to the height of the left one,
   and the phones photo takes whatever room is left. That makes the closed
   Savings Breakdown, and the opened dropdown that replaces the photo, end on
   the same line as "Total Savings". */
@media (min-width: 761px) {
  .calc__aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;            /* = the bottom margin of .calc__cost */
  }

  .calc__price {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .calc__media {
    position: relative;
    flex: 1 1 0;
    min-height: 10rem;
    max-height: none;
    padding: 0;
    transition:
      min-height .6s cubic-bezier(.22, 1, .36, 1),
      opacity .35s ease-out,
      visibility 0s linear 0s;
  }

  .calc__media.is-collapsed {
    min-height: 0;
    max-height: none;
    transition:
      min-height .6s cubic-bezier(.22, 1, .36, 1),
      opacity .35s ease-out,
      visibility 0s linear .6s;
  }

  .calc__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 760px) {
  .calc__card { grid-template-columns: minmax(0, 1fr); }
  /* Stacked: the price block ($48, phones photo, "One single price…") moves to the
     top, above "Calculate Your Cost". The aside stops being a box of its own so
     its two parts can be ordered separately: price first, Savings Breakdown last. */
  .calc__aside { display: contents; }
  .calc__price { order: -1; margin-bottom: 3.5rem; }
  .calc__breakdown { margin-top: 0.625rem; }
  /* a bit bigger photo while stacked (was 16rem box / 15rem image) */
  .calc__media { max-height: 20rem; }
  .calc__media img { height: 19rem; }
}

@media (max-width: 560px) {
  .calc { padding-left: 3%; padding-right: 3%; }
  .calc__card { padding-left: 6%; padding-right: 6%; }
  .option-block { padding-left: 6%; padding-right: 6%; }

  /* phones photo while stacked on narrow screens */
  .calc__media { max-height: 21rem; }
  .calc__media img { height: 20rem; margin-top: 0; }
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .calc__toggle-icon, .btn, .calc__media, .calc__details, .calc__discount { transition: none; }
  .calc__cost.is-swapping { animation: none; }
}