/* ============================================================
   Prague Guitar Academy — styles
   Every value here comes from tokens.css. Change design there.
   ============================================================ */

/* --- reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
/* With display:contents the <source> tags become zero-width flex/grid items,
   so gaps get counted between them too. Take them out of layout. */
source { display: none; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: var(--lh-head); text-wrap: balance; }

:where(a, button):focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pink); color: var(--white);
  padding: var(--s-xs) var(--s-sm); font-weight: var(--w-bold);
}
.skip:focus { left: 0; }

/* --- layout primitives ------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide  { max-width: var(--page-wide); }
.wrap--prose { max-width: calc(var(--prose) + 2 * var(--gutter)); }

.section { padding-block: var(--s-xl); }
.section--tight { padding-block: var(--s-lg); }
.section--dark  { background: var(--black); color: var(--on-dark); }
.section--plum  { background: var(--plum);  color: var(--on-dark); }
.section--pink  { background: var(--pink);  color: var(--on-dark); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--plum h1, .section--plum h2, .section--plum h3,
.section--pink h1, .section--pink h2, .section--pink h3 { color: var(--on-dark); }

/* Two-column split that collapses on its own.
   auto-fit + minmax means no breakpoint is needed. */
.split {
  display: grid;
  gap: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  align-items: center;
}
.split--top { align-items: start; }

/* --- buttons ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  background: var(--pink); color: var(--white);
  font-weight: var(--w-bold); font-size: var(--t-nav);
  line-height: 1;
  text-decoration: none; text-transform: uppercase;
  padding: 1.25rem 2.5rem;
  border-radius: var(--radius-pill);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover  { background: var(--pink-dark); }
.btn:active { transform: translateY(1px); }
.btn__arrow { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; }

/* --- header banner ---------------------------------------- */
.banner {
  min-height: clamp(9rem, 4rem + 22vw, 22rem);
  background-image: image-set(url("../assets/img/header.avif") type("image/avif"),
                              url("../assets/img/header.webp") type("image/webp"));
  background-color: var(--black);
  background-size: cover;
  background-position: 50% 50%;
}
@supports not (background-image: image-set(url("x.avif") type("image/avif"))) {
  .banner { background-image: url("../assets/img/header.jpg"); }
}

/* The live site swaps in a separately-composed banner on phones
   (PGA-webheader-mobile2.jpg). The desktop crop puts the wordmark
   far right, so `cover` on a narrow screen cuts it in half. */
@media (max-width: 767px) {
  .banner {
    /* live is 244px tall at 375 wide = 65vw */
    min-height: clamp(13rem, 65vw, 20rem);
    background-image: image-set(url("../assets/img/header-mobile.avif") type("image/avif"),
                                url("../assets/img/header-mobile.webp") type("image/webp"));
  }
  @supports not (background-image: image-set(url("x.avif") type("image/avif"))) {
    .banner { background-image: url("../assets/img/header-mobile.jpg"); }
  }
}

/* --- navigation ------------------------------------------- */
.nav { background: var(--white); border-bottom: 1px solid var(--rule); }
.nav__inner {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--s-xs) var(--s-lg);
  padding-block: var(--s-sm);
}
.nav a {
  text-decoration: none; text-transform: uppercase;
  font-weight: var(--w-semi); font-size: var(--t-nav);
  color: var(--ink);
  padding-block: var(--s-3xs);
  border-bottom: 2px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav a:hover { color: var(--pink); }
.nav a[aria-current="page"] { color: var(--pink); border-bottom-color: var(--pink); }

/* --- hero -------------------------------------------------- */
.hero { background: var(--black); color: var(--on-dark); padding-block: var(--s-xl); }
/* the original's hero columns are 536 / 604 of a 1140 container, not 50/50 */
.hero .wrap { padding-inline: 0; }
.hero__inner { grid-template-columns: 47.0175% 52.9825%; gap: 0; }
.hero__inner > * { padding-inline: 10px; }
.hero__title {
  font-size: var(--t-hero); font-weight: var(--w-bold);
  line-height: 1.2; text-transform: uppercase;
}
.hero__lead {
  font-size: var(--t-lead); font-weight: var(--w-semi);
  line-height: 1.1; margin-top: var(--s-md);
}
.hero__aside { display: flex; flex-direction: column; align-items: center; gap: var(--s-md); }
.hero__phone {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  color: var(--on-dark); text-decoration: none;
  font-weight: var(--w-regular); font-size: var(--t-nav); line-height: 1.7;
}
.hero__phone svg { color: var(--phone-icon); width: 1.125rem; height: 1.125rem; }
.hero__phone:hover { color: var(--pink); }

/* --- question cards ---------------------------------------
   The original is a full-bleed band: a black panel inset from the
   left edge, and a photo panel running to the right edge.
   At 1440 those measure 200 / 592 / 648 px, i.e. 14% / 41% / 45%. */
.qband { display: grid; grid-template-columns: max(0px, 24.75vw - 156px) 1fr 45%; }
.qband__pad   { background: transparent; }
.qband__panel { color: var(--on-dark); display: grid; align-content: center; }
/* the four rows are stacked colour stripes: black, plum, pink, black */
.qcard--black { background: var(--black); }
.qcard--plum  { background: var(--plum);  }
.qcard--pink  { background: var(--pink);  }
.qband__photo {
  background-image: image-set(url("../assets/img/concert.avif") type("image/avif"),
                              url("../assets/img/concert.webp") type("image/webp"));
  background-color: var(--black);
  background-size: cover; background-position: 50% 50%;
}
@supports not (background-image: image-set(url("x.avif") type("image/avif"))) {
  .qband__photo { background-image: url("../assets/img/concert.jpg"); }
}
.qcard { display: flex; align-items: center; gap: 20px;
         padding: 25px; }
.qcard img { width: 5.4375rem; height: auto; flex: 0 0 auto; }
.qcard p { font-size: var(--t-card); font-weight: var(--w-semi);
           color: var(--on-dark); line-height: 1.7; }

/* The "you can play guitar" follow-on is a full-bleed 50/50 band: copy
   inset 150px on the left, guitarist flush to the right edge. */
.darkband { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.darkband__copy { padding: var(--s-xl) var(--s-md) var(--s-xl) clamp(var(--s-md), 10.4vw, 9.375rem); }
.darkband__art  { display: flex; justify-content: flex-end; align-self: start; }
.darkband__art img { width: min(39.8125rem, 44.24vw); height: auto; }
@media (max-width: 767px) {
  .darkband { grid-template-columns: 1fr; }
  .darkband__copy { padding: var(--s-lg) var(--s-md); }
  .darkband__art { justify-content: center; }
  .darkband__art img { width: min(100%, 24rem); }

  /* This button sits in a left-aligned paragraph, which is right
     on desktop but leaves it hard against the left edge here. */
  .darkband__copy p:has(.btn) { text-align: center; }

  /* On the live site the photo follows "…no special talent"
     directly, before the copy. Source order is copy-then-art
     because that is right on desktop, so swap it here only. */
  .darkband__art  { order: -1; }
}

/* --- prose ------------------------------------------------- */
.storybox {
  max-width: 50rem; margin-inline: auto;
  border: 2px solid var(--rule-strong);
  padding: var(--s-md) clamp(var(--s-sm), 1vw, 0.75rem);
}
.prose p + p { margin-top: var(--s-md); }
.prose strong { font-weight: var(--w-bold); }
.prose .accent { color: var(--pink); font-weight: var(--w-bold); }
.prose--center { text-align: center; }

/* --- statement band --------------------------------------- */
.statement { text-align: start; }
.statement h2 {
  font-size: var(--t-h2); font-weight: var(--w-bold);
  text-transform: uppercase; line-height: 1.2;
}
.statement p {
  font-size: var(--t-sub); font-weight: var(--w-semi);
  margin-top: var(--s-sm); color: var(--on-dark-soft);
}

/* The guitarist rises exactly 85px into the plum band above it. The art
   column carries no top padding, so this is a plain negative margin. */
.lift-photo { margin-top: -5.3125rem; }
@media (max-width: 767px) { .lift-photo { margin-top: 0; } }

/* --- benefit list ----------------------------------------- */
.ticks { display: grid; gap: var(--s-sm); margin-top: var(--s-lg); }
.ticks li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-sm);
  align-items: start; font-size: var(--t-body);
}
.ticks svg { width: 1.4em; height: 1.4em; color: var(--pink); margin-top: .1em; }

/* --- full-bleed photo ------------------------------------- */
.photoband img {
  width: 100%; height: clamp(12rem, 8rem + 22vw, 26rem);
  object-fit: cover; border-radius: var(--radius);
}

/* --- edge-bleeding black panels ---------------------------
   Section 9 runs 432→1440 (bleeds right), section 10 runs
   0→1008 (bleeds left). Both are 70% of the viewport.       */
.bleed { display: grid; }
.bleed--right { grid-template-columns: 30% 70%; }
.bleed--left  { grid-template-columns: 70% 30%; }
.bleed__panel {
  background: var(--black); color: var(--on-dark);
  padding: var(--s-lg) var(--s-lg) var(--s-lg) var(--s-xl);
}
.bleed--left .bleed__panel { padding-inline: var(--s-xl) var(--s-lg); }
.bleed__side { background: transparent; }
.bleed { position: relative; }

/* The original hides the in-panel photos on desktop and shows a single
   large one that overlaps the panel's right edge (x=720, w=600 at 1440). */
.panel-photo { max-width: min(100%, 34rem); height: auto; border-radius: var(--radius);
               margin-top: var(--s-md); }
.overlap-photo {
  position: absolute; left: 50%; top: 50%; transform: translateY(-50%);
  width: min(37.5rem, 42vw); height: auto; z-index: 1;
}
/* Section 8's photo laps over the panel's left edge. It is anchored to the
   Q&A block (not the panel) so it always clears the heading above it. */
.lap-left {
  position: absolute; top: 0; right: calc(100% + 38px);
  width: min(35.625rem, 39.6vw); height: auto; z-index: 2;
  border-radius: var(--radius); max-width: none;
}
@media (max-width: 1024px) { .lap-left { display: none; } }
@media (max-width: 1024px) { .overlap-photo { display: none; } }
@media (min-width: 1025px) {
  .panel-photo { display: none; }
  .wyg-title { display: none; }   /* hidden on desktop in the original */
  /* keep the copy clear of the overlapping photo */
  .bleed--left .bleed__panel > :not(.overlap-photo, .benefits) { max-width: 40rem; }
}

.objections { display: grid; gap: var(--s-md); margin-top: var(--s-lg); }
@media (min-width: 1025px) {
  /* original: panel starts 432, Q&A column starts 674 — 24% of the panel */
  .objections { margin-left: 24%; position: relative; }
}
.objection h3 {
  font-size: var(--t-card); font-weight: var(--w-semi);
  color: var(--on-dark);
}
.objection p {
  margin-top: var(--s-2xs); color: var(--on-dark);
  font-size: var(--t-ans); font-weight: var(--w-semi);
}
.objection p b { font-weight: var(--w-semi); color: var(--pink); }

/* --- benefits (what you get) ------------------------------ */
.benefits { display: grid; gap: var(--s-lg); margin-top: var(--s-lg);
             max-width: 35.25rem; }           /* 564px, as the original */
.benefit { display: grid; grid-template-columns: auto 1fr; gap: 20px;
           align-items: center;               /* icon centred on the copy */
           padding-inline: 25px 24px; }
.benefit img { width: clamp(4rem, 3.375rem + 3.125vw, 6.1875rem); height: auto; }
.benefit h3 { font-size: var(--t-card); font-weight: var(--w-bold);
              color: var(--pink); line-height: 1.7; }
.benefit p { margin-top: var(--s-2xs); color: var(--on-dark);
            font-size: var(--t-benefit); font-weight: var(--w-semi);
            line-height: 1.7; }

/* --- FAQ --------------------------------------------------- */
.faq__title { text-align: center; font-size: var(--t-h2); font-weight: var(--w-bold); }
.faq__item { padding-block: var(--s-lg); }
.faq__grid {
  display: grid; gap: var(--s-md) var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  align-items: center;
}
.faq__q {
  font-size: var(--t-h3); font-weight: var(--w-semi);
  line-height: 1.2;
}
.faq__a { font-size: var(--t-body); }
.faq__a a { color: var(--white); font-weight: var(--w-bold); text-decoration: underline; }
.section--pink .faq__a a { color: var(--black); }
.faq__media { display: flex; justify-content: center; align-items: center; gap: var(--s-md); }
.faq__media img { border-radius: var(--radius); }
.faq__media--icons img { width: clamp(3.5rem, 3.071rem + 2.143vw, 5rem); height: auto; }
.faq__media--icons img.is-lg { width: clamp(3.75rem, 3.214rem + 2.679vw, 5.625rem); }
.faq__media--map img   { width: clamp(4.5rem, 3.768rem + 3.66vw, 7.0625rem); height: auto; }

/* --- testimonials ----------------------------------------- */
.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  max-width: var(--page-wide);
  margin-inline: auto;
  /* the original paints black behind the left 44% of this band */
  background: linear-gradient(270deg, var(--white) 56%, var(--black) 56%);
}
.reviews__panel {
  background: var(--black); color: var(--on-dark);
  padding: var(--s-xl) var(--s-lg);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s-md); text-align: center;
}
.reviews__panel h2 { font-size: var(--t-h3); font-weight: var(--w-semi); }
.reviews__badge {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16);
  border-radius: 10px; padding: var(--s-sm) var(--s-md);
  text-decoration: none; transition: background var(--fast) var(--ease);
}
.reviews__badge:hover { background: rgb(255 255 255 / .13); }
.reviews__score { font-size: 2.125rem; font-weight: var(--w-black); line-height: 1; }
.reviews__meta { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.reviews__stars { color: var(--star); letter-spacing: 2px; line-height: 1; }
.reviews__count { color: var(--on-dark-soft); font-size: var(--t-small); }
.reviews__all {
  color: var(--pink); font-weight: var(--w-bold); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color var(--fast) var(--ease);
}
.reviews__all:hover { border-bottom-color: var(--pink); }

.reviews__stage {
  background: var(--white); padding: var(--s-lg) var(--s-md);
  display: flex; flex-direction: column; gap: var(--s-md); justify-content: center;
}
.reviews__quote { width: 4rem; color: var(--pink); opacity: .3; margin-inline: auto; }
.reviews__track {
  display: flex; gap: var(--s-md);
  /* start, not stretch: a stretched card pushes its footer down
     with margin-top:auto, leaving a large gap on shorter reviews. */
  align-items: flex-start;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  transition: height var(--slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) { .reviews__track { transition: none; } }
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 100%; scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; gap: var(--s-sm);
}
.review__stars { color: var(--star); font-size: 1.2rem; letter-spacing: 3px; line-height: 1; }
.review__text { color: var(--ink); }
.review__foot { display: flex; align-items: center; gap: var(--s-sm); margin-top: auto; flex-wrap: wrap; }
.review__avatar {
  width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: 50%;
  background: var(--pink); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-black);
}
.review__who { display: flex; flex-direction: column; line-height: 1.35; }
.review__who b { font-weight: var(--w-bold); }
.review__who span { font-size: var(--t-small); color: var(--ink-soft); }
.review__src {
  margin-left: auto; font-size: var(--t-micro); font-weight: var(--w-bold);
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.review__src:hover { color: var(--pink); border-bottom-color: var(--pink); }

.reviews__nav { display: flex; align-items: center; gap: var(--s-sm); }
.reviews__arrow {
  width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.reviews__arrow:hover { background: var(--pink); border-color: var(--pink); color: var(--white); }
.reviews__dots { display: flex; gap: var(--s-3xs); flex-wrap: wrap; }
.reviews__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--black); opacity: .2; cursor: pointer;
  transition: opacity var(--fast) var(--ease), background var(--fast) var(--ease);
}
.reviews__dots button[aria-current="true"] { opacity: 1; background: var(--pink); }

/* --- closing CTA ------------------------------------------ */
.cta { text-align: center; }
.cta__panel {
  background: var(--plum); color: var(--on-dark);
  padding: var(--s-xl) clamp(var(--s-md), 10.4167vw, 9.375rem);
  max-width: var(--page); margin-inline: auto;
}
.cta h2 {
  font-size: var(--t-hero); font-weight: var(--w-semi);
  text-transform: uppercase; line-height: 1.2;
  /* balance would even the two lines out and pull words down; the original
     fills line one ("…Prague - Contact Me") and lets line two be short. */
  text-wrap: wrap;
}
.cta .btn { margin-top: var(--s-lg); }

/* --- socials ---------------------------------------------- */
.socials { text-align: center; }
.socials h2 { font-size: var(--t-h3); font-weight: var(--w-bold); color: var(--pink); }
.socials__row {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 5px; margin-top: var(--s-md);
}
.socials__row a { color: var(--pink); display: block; }
.socials__row svg { width: clamp(4.5rem, 3.36rem + 5.7vw, 7.375rem); height: auto; }
/* the original uses Elementor's wobble-vertical */
.socials__row a:hover, .socials__row a:focus { animation: pga-wobble 1s ease-in-out 1; }
@keyframes pga-wobble {
  16.65% { transform: translateY(8px); }
  33.30% { transform: translateY(-6px); }
  49.95% { transform: translateY(4px); }
  66.60% { transform: translateY(-2px); }
  83.25% { transform: translateY(1px); }
  100%   { transform: translateY(0); }
}

/* --- footer ----------------------------------------------- */
.footer {
  background-color: var(--black); color: var(--on-dark);
  background-image: image-set(url("../assets/img/footer-bg.avif") type("image/avif"),
                              url("../assets/img/footer-bg.webp") type("image/webp"));
  background-size: cover; background-position: 50% 50%;
  padding-block: var(--s-xl);
}
@supports not (background-image: image-set(url("x.avif") type("image/avif"))) {
  .footer { background-image: url("../assets/img/footer-bg.png"); }
}
.footer__grid {
  display: grid; gap: var(--s-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  text-align: center;
}
.footer__item img { width: clamp(3rem, 2.52rem + 2.41vw, 4.6875rem); height: auto; margin-inline: auto; }
.footer__item h2 {
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--pink); margin-top: var(--s-xs);
  text-transform: uppercase; letter-spacing: .05em;
}
.footer__item p, .footer__item a {
  margin-top: var(--s-3xs); color: var(--on-dark);
  text-decoration: none; font-size: var(--t-small);
}
.footer__item a:hover { color: var(--pink); }

/* --- tuition page head ------------------------------------ */
/* The pricing block is capped well inside the 1140 page so the
   cards keep their original width. The heading and lead sit in
   the same column, otherwise their left edge would not line up
   with the first card. */
.wrap--narrow { max-width: calc(52rem + 2 * var(--gutter)); }

/* The nav already labels this page "Prices" and highlights it,
   so a visible <h1>Prices</h1> would say it twice. The heading
   carries the one fact the nav cannot instead; the <title> keeps
   "Prices" for the tab and for search. Left-aligned to match the
   homepage, which left-aligns its headings deliberately. */
/* Styled as body copy, not a headline: the original line is
   16px/400 in grey, and it reads as a quiet note above the
   cards. It stays an <h1> for structure and search, but a
   heading here would shout in a way the original never does. */
.tuition__title {
  margin-bottom: var(--s-lg);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

/* --- routing note (above the cards) ------------------------
   The one fact that changes which card you click, so it sits
   before them. Tinted rather than plain text because a grey
   line above a grid of colour is invisible.                */
.tguide {
  display: flex;
  gap: var(--s-xs);
  align-items: flex-start;
  margin-bottom: var(--s-md);
  padding: var(--s-sm);
  background: var(--pink-tint);
  border-left: 4px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.tguide svg {
  flex: 0 0 auto;
  width: 1.25rem; height: 1.25rem;
  margin-top: .2rem;
  color: var(--pink);
}
.tguide b { font-weight: var(--w-bold); }
.tguide a { color: var(--pink-dark); }

/* --- tuition notes (below the cards) -----------------------
   Three columns on the same rhythm as the card grid, so the
   block lines up with the cards above instead of introducing
   a second geometry. The rule marks where products end and
   supporting information begins.                           */
.tnotes {
  display: grid;
  /* same gap as .tiers, so the three notes land exactly under
     the three cards rather than nearly under them. */
  gap: var(--s-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: var(--s-lg);
  padding-top: var(--s-lg);
  border-top: 1px solid var(--rule);
}
.tnote { margin: 0; }
.tnote svg {
  display: block;
  width: 1.5rem; height: 1.5rem;
  margin-bottom: var(--s-2xs);
  color: var(--pink);
}
.tnote h2 {
  margin: 0 0 var(--s-3xs);
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.tnote p {
  margin: 0;
  font-size: var(--t-ans);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.tnote a { color: var(--pink); }
.tnote a:hover { color: var(--pink-dark); }

/* --- price cards (tuition) --------------------------------
   One custom property, --tier, drives each card's border,
   bars and button. --tier-grad is optional and only the
   Semester card sets it.                                   */
.tiers {
  display: grid;
  gap: var(--s-sm);
  /* 16rem min gives exactly 3 across inside the 52rem column
     below, which puts the cards back at the original ~265px
     rather than stretching them to fill 1140. */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 16.5rem));
  /* start, not center: the column above is already centred on the
     page, and centring the tracks inside it knocks the first card
     a pixel out of line with the heading. */
  justify-content: start;
  list-style: none;
}
/* Let the card fill its grid cell so cards in a row end level,
   whatever the bullet text does. */
.tiers > li { display: flex; }
.tiers > li > .tier { flex: 1 1 auto; }

.tier {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--tier);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tier:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

.tier--ink      { --tier: var(--card-ink); }
.tier--pink     { --tier: var(--pink); }
.tier--purple   { --tier: var(--card-purple); }
.tier--soft     { --tier: var(--card-pink-soft); }
.tier--semester {
  --tier: var(--card-pink-hot);
  --tier-grad: linear-gradient(90deg, var(--card-plum-deep), var(--card-pink-hot));
}

.tier__name {
  margin: var(--s-sm) var(--s-sm) 0;
  padding: .55rem 1rem;
  border-radius: var(--radius);
  background: var(--tier-grad, var(--tier));
  color: var(--white);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  text-align: center;
}
.tier__price {
  margin-top: var(--s-sm);
  padding: var(--s-xs) var(--s-sm);
  background: var(--tier-grad, var(--tier));
  color: var(--white);
  font-weight: var(--w-black);
  font-size: var(--t-h2);
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.tier__list {
  flex: 1 1 auto;
  margin: 0;
  padding: var(--s-sm) var(--s-sm) 0 calc(var(--s-sm) + 1.1em);
  font-size: var(--t-ans);
  line-height: var(--lh-body);
}
.tier__list li + li { margin-top: var(--s-2xs); }
.tier__meta { display: none; }
.tier__chev { display: none; }

.tier__cta {
  margin: var(--s-sm);
  padding: .7rem 1rem;
  border: 2px solid var(--tier);
  border-radius: var(--radius-pill);
  color: var(--tier);
  font-weight: var(--w-bold);
  font-size: var(--t-body);
  text-align: center;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.tier:hover .tier__cta { background: var(--tier); color: var(--white); }

/* ============================================================
   Only two layout breakpoints in the whole stylesheet.
   Everything above is fluid or auto-fitting.
   ============================================================ */

/* Below this, side-by-side content stacks and the hero centres. */
@media (max-width: 767px) {
  .qband, .bleed--right, .bleed--left { grid-template-columns: 1fr; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-lg); }
  .hero .wrap { padding-inline: var(--gutter); }
  .qcard img { width: 4.25rem; }
  .qband__pad, .bleed__side { display: none; }
  .qband__photo { min-height: 14rem; }
  .bleed__panel { padding-inline: var(--s-md); }
  /* White, not transparent, and with room above it: the live site
     separates the testimonials from the black band above with a
     white stripe. `background: none` here previously let the dark
     panel run straight into the black section. */
  .reviews { background: var(--white); padding-top: var(--s-lg); }
  .hero__inner { text-align: center; }
  .hero__lead  { margin-inline: auto; }
  .hero__aside { align-items: center; }
  .reviews__stage { padding-inline: var(--s-md); }
  .qcard { flex-direction: row; }
  .faq__grid { text-align: center; }
  .benefit { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  /* live uses 110px icons on a phone — bigger than desktop's 99 */
  .benefit img { width: 110px; }
  .review__src { margin-left: 0; }
}

/* Above this the question cards sit two-up beside the photo. */
@media (min-width: 900px) {
  .questions__grid { grid-template-columns: 1fr; }
  .benefits { gap: var(--s-lg); }
}

/* The live site puts this photo between the heading and the
   objections, inset inside the black panel. On desktop it has
   to be a grid sibling instead, so — following the same
   .overlap-photo / .panel-photo pattern used elsewhere in this
   file — there are two copies and the viewport picks one. */
.in-panel-photo { display: none; }
@media (max-width: 767px) {
  .bleed--right > picture > .panel-photo { display: none; }
  .in-panel-photo {
    display: block;
    width: 100%; height: auto;
    margin-block: var(--s-sm);
  }
}

/* Phone-sized button. The live site's is 224x42; ours inherited
   desktop padding (20/40) and a 20px arrow, giving 275x60. */
@media (max-width: 767px) {
  .btn { padding: .8125rem 1.75rem; }
  .btn__arrow { width: 1rem; height: 1rem; }
}

/* ============================================================
   A third breakpoint, added deliberately.

   The rest of this stylesheet avoids breakpoints because
   auto-fit handles reflow. It cannot handle this one: below
   ~640px a tall card has to become a compact row, and that is
   a change of structure, not of column count. The threshold is
   also where 2 cards stop fitting, so we never show a single
   full-width card.

   Six stacked cards are ~2400px of scrolling and you can only
   ever see one, which defeats the point — choosing a package
   is a comparison. As rows they are ~70px each, so all six sit
   within about a screen and can actually be compared.
   ============================================================ */
@media (max-width: 639px) {
  /* The 16.5rem column cap is a desktop concern (stops cards
     stretching). As rows they must span the full width. */
  .tiers { grid-template-columns: 1fr; }

  .tier {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    column-gap: var(--s-sm);
    row-gap: .1rem;
    padding: var(--s-sm);
    border-left: 6px solid var(--tier);
  }
  .tier:hover { transform: none; }

  .tier__name {
    grid-column: 1; grid-row: 1;
    margin: 0; padding: 0;
    background: none;
    color: var(--ink);
    font-size: var(--t-body);
    text-align: start;
  }
  .tier__price {
    grid-column: 2; grid-row: 1 / span 2;
    margin: 0; padding: 0;
    background: none;
    color: var(--tier);
    font-size: var(--t-h3);
  }
  .tier__meta {
    grid-column: 1; grid-row: 2;
    display: block;
    font-size: var(--t-small);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .tier__chev {
    grid-column: 3; grid-row: 1 / span 2;
    display: block;
    width: .5rem; height: .5rem;
    border-right: 2px solid var(--ink-soft);
    border-bottom: 2px solid var(--ink-soft);
    transform: rotate(-45deg);
  }
  .tier__list, .tier__cta { display: none; }
}