/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Custom styles
   ========================================================================== */

/* Variables override to enable 1200px centered layout */
:root {
  --max-width: 1200px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --border-color: #e5e7eb;
  --bg-color: #FAF5ED;
  --white-bg: #FFF;
  --dark-green: #2E644C;
  --dark-red: #C32B09;
}

body {
  background-color: var(--bg-color);
  margin: 0;
  box-sizing: border-box;
}

/* Prevent background scroll when menu open */
body.menu-open {
  overflow: hidden;
}

/* Layout container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  /* DEBUG */
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* Simple debug border helper */
.border {
  /*border: 1px solid #ccc;*/
}

/* Header, Main, Footer backbone */
.site-header {
  background: var(--bg-color);
  /*border-bottom: 1px solid var(--border-color);*/
  position: relative;
}

.button {
  border: none;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--dark-green);
  color: var(--white-bg);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.button-sm {
  width: 176px;
  height: 40px;
  font-size: 16px;
}

.button-lg {
  width: 343px;
  height: 52px;
  font-size: 24px;
}

/* Rainbow hover animation for .button */
@keyframes rainbow-slide {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 400% 50%;
  }
}

.button:hover,
.button:focus-visible {
  /* Animated rainbow gradient */
  background-image: linear-gradient(45deg,
  /*#ff3b30, !* red *! */
  /*#ff9500, !* orange *! */
  /*#ffcc00, !* yellow *! */
  /*#34c759, !* green *! */
  /*#5ac8fa, !* light blue *! */
  /*#007aff, !* blue *! */
  /*#af52de, !* violet *! */
  /*#ff3b30 !* loop back to red *!*/
  #21A76C,
  #21A76C,
  #21A76C,
  #21A76C,
  #21A76C,
  #21A76C,
  #21A76C,
  /*#30c384, debug why it runs 3 times */
  #21A76C
);
  background-size: 400% 100%;
  animation: rainbow-slide 5s linear 1;
  color: #fff; /* ensure text remains readable */
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .button:hover,
  .button:focus-visible {
    animation: none;
    background-size: 100% 100%;
  }
}

/* Burger button */
.burger {
  display: none; /* visible on small screens */
  width: 40px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
}

.burger .burger-bar {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: #1B1A1A;
  border-radius: 1px;
}

.burger .burger-bar:nth-child(1) {
  top: 6px;
}

.burger .burger-bar:nth-child(2) {
  top: 15px;
}

.burger .burger-bar:nth-child(3) {
  top: 24px;
}

/* Mobile menu overlay/panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: none; /* toggled via .open */
  z-index: 1000;
}

.mobile-menu.open {
  display: block;
}

.mobile-menu__panel {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  width: min(375px, calc(100% - 32px));
  height: 466px;
  background: #FAF6ED;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Close vector (small square outline) */
.mobile-menu__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1.5px solid #1B1A1A;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links column */
.mobile-menu__links {
  position: absolute;
  left: 20px;
  top: 53px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mobile-link {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #3C3C3C;
  text-decoration: none;
}

.mobile-link:focus-visible {
  outline: 2px solid #2E644C;
  outline-offset: 2px;
}

/* CTA button wrapper */
.mobile-menu__cta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}


.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.site-main {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.site-footer {
  background: var(--bg-color);
  /*border-top: 1px solid var(--border-color);*/
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  color: #4b5563;
}

/* Footer layout */
.footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* equally spread */
  gap: 24px;
  padding-top: var(--space-2);
}

.footer-col {
  flex: 0 1 270px; /* per spec width */
}

.footer-title {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 0.01em;
  color: #151515;
  margin: 0 0 9px 0; /* gap: 9px */
}

.footer-text, .footer-links a {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #000;
  text-decoration: none;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Social icons row */
.social-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  height: 40px; /* as spec */
}

.social-link {
  display: inline-flex;
  width: 40px;
  height: 40px;
  color: var(--dark-green); /* overlay */
}

.social-link svg {
  display: block;
}

.footer-copy {
  margin-top: var(--space-3);
}

/* Logo */
.logo-text {
  width: 120px;
}

/* Basic responsive nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* align labels to the right */
  gap: var(--space-2);
}

.nav a {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #3C3C3C;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--dark-red);
  text-decoration: none;
}

/* Utilities */
.stack > * + * {
  margin-top: var(--space-2);
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* About section stats */
.about-stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 80px;
  flex-wrap: wrap; /* allow wrapping on small screens */
  justify-content: space-between;
  margin-top: 110px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 5px;
  max-width: 180px;
}

.stat .value {
  font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* h2 */
  font-style: normal;
  font-weight: 500;
  font-size: 50px;
  line-height: 59px;
  text-align: center;
  letter-spacing: 0.01em;
  color: #AC3A41;
}

.stat .label {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* txt2 */
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #3C3C3C;
}

/* About hero (two blocks) */
.about-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 16px;
}

.about-hero-left {
  flex: 1 1 0;
  max-width: 600px;
}

.about-title {
  margin: 0;
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 74px;
  color: #3C3C3C; /* black from spec */
  max-width: 582px;
}

.about-title i {
  font-weight: 400;
}

.about-subtitle {
  margin-top: 32px;
  margin-bottom: 52px;
  max-width: 463px;
}

.about-hero-right {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
}

.about-hero-image {
  max-width: 560px;
  width: 100%;
  height: auto;
  display: block;
}

/* About WHY block */
.about-why {
  display: flex;
  align-items: center;
  justify-content: space-between; /* put extra space between columns, not at sides */
  gap: 24px; /* small safety gap if needed */
  margin-top: 32px;
}

.about-why-left {
  width: 50%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 2px dashed #c7c7c7; /* placeholder border */
  background: transparent;
  flex: 0 0 auto; /* fixed size box */
}

.about-why-right {
  max-width: 488px; /* from spec */
  flex: 0 1 488px;
}

/* Unified section title styles */
.section-title {
  margin: 120px 0 16px 0;
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 46px;
  color: #3C3C3C;
}

.section-title--center {
  text-align: center;
}

.section-title--italic {
  font-style: italic;
  font-weight: 400;
}

/* Unified section text utilities */
.section-text {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: #3C3C3C;
}

.section-text--20-32 {
  font-size: 20px;
  line-height: 32px;
}

.section-text--24-32 {
  font-size: 24px;
  line-height: 32px;
}

/* Map existing elements to unified text styles without HTML changes */
.section-text, .why-text, .about-subtitle, .ss-text p, .ss-text li, .teacher-info-list, .review-text {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  color: #3C3C3C;
}

.section-text--20-32, .why-text, .about-subtitle, .ss-text p, .ss-text li, .teacher-info-list {
  font-size: 20px;
  line-height: 32px;
}

.section-text--24-32, .suit-card p, .faq-title {
  font-size: 24px;
  line-height: 32px;
}


/* About TEACHERS block */
.about-teachers {
  margin-top: 48px;
}

/* Removed duplicate title styles in favor of .section-title */

.teachers-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* extra space sits between columns */
  gap: 24px;
  flex-wrap: wrap;
}

.teacher {
  flex: 0 1 auto; /* from figma width */
  max-width: 48%;
}

/* Keep two columns on medium screens by allowing flexible card width */
@media (max-width: 768px) {
  .teachers-grid {
    justify-content: center;
  }

  .teacher {
    flex: 0 1 calc((100% - 24px) / 2);
    max-width: none;
  }
}

.teacher-photo {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end; /* anchor image visually to bottom */
  justify-content: center;
}

.teacher-photo img {
  max-width: 100%;
  height: auto;
}

.teacher-points {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0 0 0 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #3C3C3C;
}

.teacher-points li {
  position: relative;
  padding-left: 30px;
}

.teacher-points li + li {
  margin-top: 10px;
}

.teacher-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  background: url('../img/icon-ok.png') no-repeat center/contain;
}

/* Frame 2682: green footer under first teacher photo */
.teacher-footer {
  position: relative;
  width: 100%;
  height: 181px;
  background: #226639;
  border-radius: 50px;
  top: -50px;
  margin-bottom: -50px;
}

/* Content inside the green footer (for first teacher) */
.teacher-footer-title {
  /*position: absolute;*/
  /*left: 74px;*/
  /*top: 29px;*/
  /*width: 363px;*/
  /*height: 46px;*/
  /*margin: 0;*/
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 46px; /* identical to box height */
  color: #F5F5F5;
  text-align: center;
  margin: 0 auto;
  position: relative;
  top: 10%;
}

.teacher-footer-quote {
  /*position: absolute;*/
  /*left: 86px;*/
  /*top: 99px;*/
  /*width: 335px;*/
  /*height: 54px;*/
  margin: 0;
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 27px;
  text-align: center;
  color: #F5F5F5;
  position: relative;
  top: 20%;
  padding: 0 25px;
}

.quote-icon {
  position: absolute;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  color: #F5F5F5;
}

.quote-icon {
  display: none;
}

.quote-icon.left {
  left: 70px;
  top: 89px;
}

.quote-icon.right {
  left: 414px;
  top: 92px;
}

.teacher-info {
  margin-top: 16px;
  background-color: var(--white-bg);
  border-radius: 50px;
  padding: 25px;
}

.teacher-info p {
  text-align: center;
  font-size: 1.25em;
}

.teacher-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
}

.teacher-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.frame-2683 {
  position: relative;
  width: 100%; /* fits the 512px card width */
  max-width: 512px;
  height: 455px;
  background: #FEFBF5; /* light background */
  border-radius: 50px;
}

.frame-2668 {
  position: relative;
  width: 100%;
  height: 386px;
  background: #FEFBF5;
  border-radius: 50px;
  /* create a little top spacing inside the outer frame */
  margin-top: 16px;
}

.frame-2703 {
  position: relative;
  width: 461px;
  height: 267px;
  background: none; /* url() not provided; keeping transparent */
  border-radius: 30px;
  margin: 0 auto; /* center inside the parent */
  top: 24px; /* slight offset from top within frame-2668 */
}


/* About SUIT (courses suitability) section */
.about-suit {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* Removed duplicate title styles in favor of .section-title */

/* Teacher info list (first teacher) */
.teacher-info-list {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
}

.teacher-info-list li {
  position: relative;
  padding-left: 36px; /* room for the dot */
}

.teacher-info-list li + li {
  margin-top: 16px;
}

.teacher-info-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 10px;
  background: #3C3C3C;
  border-radius: 50%;
}


/* Suit card (compact pill row after about-suit) */
.suit-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 28px 20px 94px; /* per spec */
  gap: 24px;
  background: #FEFBF5;
  border-radius: 20px;
  max-width: 753px;
  height: auto; /* let content define height */
  margin: 24px auto 0; /* center within container */
}

.suit-card img {
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
}

.suit-card p {
  margin: 0;
  text-align: left;
}

@media (max-width: 480px) {
  .suit-card {
    padding: 16px 20px;
    gap: 16px;
  }

  .suit-card p {
    font-size: 20px;
    line-height: 28px;
  }

  .suit-row .suit-card {
    flex: 1 1 100%;
  }
}

/* Suit: row wrapper for first two compact cards */
.suit-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 16px auto 0;
  max-width: 750px;
}

/* Remove centered margins for cards placed in the row */
.suit-row .suit-card {
  margin: 0;
  max-width: none; /* allow fractional flex widths to apply */
  width: auto;
}

/* Fractional width utilities */
.suit-card.w-1-3 {
  flex: 1 1 33.333%;
  box-sizing: border-box
}

.suit-card.w-2-3 {
  flex: 1 1 66.666%;
  box-sizing: border-box
}

.suit-card.w-1-2 {
  flex: 1 1 50%;
  box-sizing: border-box
}

.suit-card.w-1-1 {
  flex: 1 1 100%;
  box-sizing: border-box
}

/* Compact variants for two new cards */
.suit-card.small {
  max-width: 290px;
  padding: 20px 32px;
  gap: 16px;
}

.suit-card.medium {
  max-width: 445px;
  padding: 20px 32px;
  gap: 16px;
}

/* Suit: extra variants for people/chemistry cards */
.suit-card.w380 { /* Frame 2677 */
  max-width: 380px;
  min-height: 185px;
  padding: 20px 32px;
  gap: 16px;
}

.suit-card.w353 { /* Frame 2679 */
  max-width: 353px;
  min-height: 185px;
  padding: 29px 32px;
  gap: 16px;
}

/* bump icon size to 50px only for these cards */
.suit-card.big-icon img {
  width: 50px;
  height: 50px;
}

/* Reviews carousel */
.reviews-carousel {
  position: relative;
  margin-top: 32px;
}

.reviews-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* room for focus outline */
}

.review-card {
  flex: 0 0 calc((100% - 24px) / 2); /* two cards per view with 24px gap */
  max-width: 590px;
  height: 684px;
  background: #FEFBF5;
  border-radius: 25px;
  position: relative;
  scroll-snap-align: start;
  box-sizing: border-box;
  padding: 32px 32px 32px 32px;
}


.review-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  left: 32px;
  top: 34px;
  background: #D9D9D9;
}

.review-name {
  position: absolute;
  left: 154px;
  top: 36px;
  margin: 0;
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 41px;
  color: #3C3C3C;
}

.review-role {
  position: absolute;
  left: 154px;
  top: 89px;
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #3C3C3C;
}

.review-text {
  position: absolute;
  left: 31px;
  top: 169px;
  width: calc(100% - 62px);
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  max-height: 480px;
  overflow: auto;
}

/* Controls arrows */
.reviews-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none; /* allow scroll by swipe/drag */
  display: none;
}

.reviews-controls button {
  pointer-events: auto; /* re-enable for buttons */
  border: none;
  color: #3C3C3C;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  font-size: 22px;
  line-height: 40px;
  cursor: pointer;
}

/*.reviews-controls button:focus {*/
/*  outline: 2px solid #111;*/
/*  outline-offset: 2px;*/
/*}*/


/* Hide horizontal scrollbar for the carousel track while keeping scroll functionality */
.reviews-track {
  scrollbar-width: none; /* Firefox */
}

.reviews-track::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Edge */
}


/* Reviews controls: replace text glyphs with rotated right-angle arrows */
.reviews-controls button {
  position: relative; /* for pseudo-element positioning */
  font-size: 0; /* hide the textual glyph, keep aria-label for a11y */
  background-color: transparent;
}

.reviews-controls button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px; /* arrow size */
  height: 16px;
  border-top: 3px solid #3c3c3c; /* draw the right-angle */
  border-right: 3px solid #3c3c3c;
  transform: translate(-50%, -50%) rotate(45deg); /* points to the right */
  margin-left: 30px;
}

.reviews-controls .reviews-prev::after {
  transform: translate(-50%, -50%) rotate(225deg); /* points to the left */
  margin-left: -30px;
}

/* FAQ (accordion) */
.faq {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  margin-bottom: 100px;
}

.faq-list {
  width: 100%;
  max-width: 800px;
}

.faq-divider {
  height: 3px;
  background: rgba(205, 214, 218, 0.25);
  margin: 0;
}

.faq-item {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.faq-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
}

.faq-title {
  flex: 1 1 auto;
  margin: 0;
}

.faq-toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
}

/* plus sign (collapsed) */
.faq-toggle::before, .faq-toggle::after {
  content: "";
  position: absolute;
  background: #3C3C3C;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.faq-toggle::before {
  width: 16px;
  height: 2px;
}

.faq-toggle::after {
  width: 2px;
  height: 16px;
}

/* Open state: show a plus rotated 45deg instead of minus */
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}

/* answer area */
.faq-answer-wrap {
  overflow: hidden;
  transition: max-height 220ms ease;
}

.faq-answer {
  padding: 16px 24px 32px;
}

.faq-answer p {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: rgba(60, 60, 67, 0.85);
}

/* extra divider between items */
.faq-item + .faq-item { /* an extra divider above each new item */
}


/* About WHY: embed styles */
.about-why-left {
  border: none;
  overflow: hidden;
}

.about-why-left iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Speed Session section */
.speed-session {
}

/* Pre-footer (logo + divider above footer) */
.pre-footer {
  margin-top: 48px;
}

.pre-footer-inner {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
}

.pre-footer-logo {
  width: 115px;
  display: block;
}

.ss-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.ss-col {
  flex: 1 1 0;
}

.ss-media {
  flex: 0 0 50%;
}

.ss-image {
  display: block;
  width: 100%;
  max-width: 590px;
  height: auto;
  aspect-ratio: 590 / 350;
  object-fit: cover;
  border-radius: 25px;
}

/* Speed session list styles to match paragraph text */
.ss-text ul {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
}

/* Prepend a dash before each item */
.ss-text li::before {
  content: "– ";
  color: #3C3C3C;
}

.ss-text li + li {
  margin-top: 0;
}

/* Sale promo (before formats) */
.sale-promo {
  margin-top: 80px; /* give air from previous section */
}

.sale-promo__inner {
  position: relative; /* for decor positioning */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.sale-promo__media {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sale-promo__image {
  width: 100%;
  /*max-width: 370px;*/
  height: auto;
}

.sale-promo__content {
  flex: 1 1 0;
  max-width: 578px; /* per spec */
}

.sale-promo__title {
  margin: 0 0 12px 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 64px; /* 133% */
  color: #3C3C3C;
}

.sale-promo__subtitle {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px; /* 160% */
  color: #3C3C3C;
}

/* decorative arrow */
.sale-promo__decor {
  display: none;
  position: absolute;
  /*bottom: -10px;*/
  top: 330px;
  right: -50px;
  width: 155px; /* ~323.68 */
  height: auto;
  transform: rotate(0deg); /* image already curved; no need to rotate */
  pointer-events: none;
  z-index: -1;
}

.sale-promo__redtext {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 56px;
  color: var(--dark-red);
  line-height: 1;
  margin: 0;
  text-align: left;
}

@media (max-width: 900px) {
  .sale-promo__title {
    font-size: 36px;
    line-height: 44px;
  }
}




/* Formats section */
.section-title--mont {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}

.formats-level {
  margin: 34px 0 24px 0;
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 41px;
  color: #3C3C3C;
}

.format-grid {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: 10px; /* per positions (266 vs 786) => ~133px gap */
  flex-wrap: wrap;
  margin-top: 24px;
}

.format-card {
  position: relative;
  max-width: min(49%, 390px);  /*min-width: 390px;*/
  min-height: 655px; /* 657/655 per spec; unify */
  background: #FEFBF5;
  border-radius: 25px;
  box-sizing: border-box;
  padding-top: 83px; /* space for header ribbon */
  padding-bottom: 88px; /* space for button area */
}

.format-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 83px;
  background: rgba(137, 184, 153, 0.24);
  border-radius: 25px 25px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: #3C3C3C;
}

.format-price {
  position: absolute;
  left: 0;
  right: 0;
  top: 515px; /* per spec 513/515 */
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 32px;
  color: var(--dark-red);
  text-decoration: line-through;
}

.format-features {
  list-style: none;
  margin: 0;
  padding: 24px 45px 0 45px; /* aligns with spec lefts */
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px; /* 200% */
  color: #3C3C3C;
}

.format-features li {
  position: relative;
  padding-left: 35px; /* room for check icon */
}

.format-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 24px;
  height: 24px;
  background: url('../img/icon-ok.png') no-repeat center/contain;
}

.format-cta-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  justify-content: center;
}

.format-cta {
  width: 315px;
  height: 52px;
  font-size: 24px;
  border-radius: 10px;
}

.footer-text a {
  color: #3C3C3C;
  text-decoration: none;
}


/* Write Us section */
.write-us {
  margin-top: 48px;
}

.write-us__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px; /* per spec */
}

.write-us__title {
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: 41px;
  color: #404040;
  margin: 0;
  text-align: center;
}

.write-us__form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 15px; /* distance between fields per spec */
  width: 100%;
  max-width: 446px; /* per spec */
}

.write-us__field { /* wrapper primarily for spacing if needed */ }

.wu-field {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  background: #FEFBF5;
  border: 1px solid #D5D5D5;
  border-radius: 10px;
  padding: 11px 27px; /* per most inputs */
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #1B1A1A;
}

.wu-field--tight {
  padding: 4px 30px; /* per first two rows in spec */
}

.wu-field::placeholder {
  color: #89898B;
}

.write-us__actions {
  margin-top: 7px; /* 15px field gap vs 22px button gap -> slight tweak */
}

.wu-submit {
  width: 100%;
  max-width: 446px; /* per spec */
  height: 52px; /* per spec */
  border-radius: 10px; /* ensure matches */
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 24px; /* per spec */
  line-height: 32px;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Modal (thank-you) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none; /* toggle with .open */
  align-items: center;
  justify-content: center;
  z-index: 1100; /* above mobile menu (1000) */
}
.modal-overlay.open { display: flex; }
.modal-dialog {
  background: #FEFBF5;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  width: min(520px, calc(100% - 48px));
  padding: 24px;
  text-align: center;
}
.modal-title {
  margin: 0 0 8px 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #3C3C3C;
}
.modal-text {
  margin: 0 0 16px 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 32px;
  color: #3C3C3C;
}
.modal-actions { margin-top: 8px; display: flex; justify-content: center; }
.modal-ok {
  min-width: 176px;
  height: 40px;
}










/* Stack cards on small phones */
@media (max-width: 480px) {
  .format-grid {
    gap: 16px;
  }

  .format-card {
    width: 100%;
  }
}


/* ================= Standardized breakpoints =================
   We consolidate custom responsive rules to three sizes: 480, 768, 1440
   1) Base: mobile-first
   2) @media (max-width: 480px) – small phones
   3) @media (max-width: 768px) – tablets/landscape phones
   4) @media (min-width: 1440px) – large desktops
*/
@media (min-width: 1440px) {
  :root {
    --max-width: 1320px;
  }
}

/* DEBUG */
/*html {*/
/*  overflow-x: scroll;*/
/*}*/

.hide {
  display: none !important;
}

/* Mobile base font size: make default font smaller on small phones */
@media (max-width: 480px) {
  html, body {
    font-size: 14px;
  }

  .nav {
    display: none;
  }

  .burger {
    display: inline-block;
  }

  .button-lg {
    display: block;
    margin: 0 auto;
  }

  .about-stats {
    gap: 32px;
  }

  .about-hero {
    flex-direction: column;
  }

  .about-hero-right {
    width: 100%;
  }

  .about-why-left {
    width: 100%;
    order: 2;
  }

  .stat .value {
    font-size: 40px;
    line-height: 48px;
  }

  .about-title {
    font-size: 36px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 24px;
  }

  body .about-subtitle {
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    max-width: 210px;
    margin: 24px auto;
  }

  .about-stats {
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
  }

  .section-title {
    margin-top: 40px;
    font-size: 24px;
    text-align: center;
  }

  .about-why {
    flex-direction: column;
    align-items: center;
  }

  .why-text {
    font-size: 14px;
    line-height: 180%;
  }

  .suit-card.small, .suit-card.medium, .suit-card.large {
    width: 100%;
    max-width: 100%;
  }

  .suit-card {
    padding: 16px 10px 16px 20px !important;
    min-height: 0 !important;
  }

  .teacher-photo {
    width: 100%;
    max-width: 100%;
  }

  .teachers-grid {
    flex-direction: column;
  }

  .teacher {
    max-width: 100%;
    flex-basis: auto;
  }

  .teacher-video {
    width: 100%;
    max-width: 100%;
  }

  .teacher-footer-title, .teacher-footer-quote {
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 100%;
    left: 0;
    top: 0;
    transform: none;
    margin-bottom: 16px;
  }

  .teacher-footer {
    height: 100%;
    border-radius: 20px;
    padding: 0 10px;
  }

  .teacher-footer-title {
    font-size: 24px;
    height: 100%;
    margin-bottom: 0;
  }

  .teacher-footer-quote {
    font-size: 14px;
    height: 100%;
    padding-bottom: 16px;
    margin-bottom: 0;
  }

  .teacher-info-list {
    font-size: 14px;
    line-height: 180%;
  }

  .teacher-info {
    border-radius: 20px;
  }

  .teacher-info p {
    margin-bottom: 0;
  }

  .teacher-video {
    border-radius: 20px;
  }

  .quote-icon {
    display: none;
  }

  .ss-row {
    flex-direction: column;
  }

  .ss-media {
    flex: 0 0 100%;
  }

  .ss-image {
    border-radius: 20px;
  }

  .ss-text p, .ss-text li {
    font-size: 14px;
    line-height: 180%;
  }

  .review-card {
    flex: 0 0 100%;
  }

  .reviews-controls {
    display: none;
  }

  .format-card {
    max-width: 100%;
  }

  .review-text {
    font-size: 14px;
    line-height: 150%;
    top: 120px;
  }

  .review-name {
    font-size: 24px;
  }

  .review-role {
    top: 75px;
    font-size: 16px;
  }

  .faq-title {
    font-size: 20px;
    font-weight: inherit;
  }

  .sale-promo__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .sale-promo__content {
    max-width: 100%;
  }

  .sale-promo__decor {
    position: relative;
    width: 80px;
    top: -150px;
    left: 135px;
    margin-bottom: -180px;
  }

  .sale-promo__title {
    text-align: center;
  }

  .sale-promo__subtitle {
    text-align: center;
  }

  .sale-promo__redtext {
    text-align: center;
  }

    .write-us__title {
    font-size: 30px;
    line-height: 36px;
  }

  .bullshit-links {
    order: 3;
  }

  .pre-footer-divider {
    display: none;
  }

  .site-main {
    padding-bottom: 0;
  }

  .footer-grid {
    flex-direction: column;
    gap: 32px;
  }

  .footer-col {
    flex: 0 0 100%;
  }

  /** {*/
  /*  border: 1px solid red;*/
  /*}*/
}










@media (min-width: 481px) and (max-width: 768px) {
  .container {
    /* DEBUG */
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }

  .site-main {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .section-title {
    margin-top: 80px;
    margin-bottom: 32px;
    font-size: 44px;
    text-align: center;
  }

  .about-why {
    flex-direction: column;
    align-items: stretch;
  }

  .about-why-right {
    max-width: 100%;
    flex: 1 1 auto;
  }

  .about-hero {
    align-items: flex-start;
  }

  .about-subtitle {
    font-size: 18px;
    line-height: 28px;
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .about-hero-right {
    width: 100%;
  }

  .about-hero-image {
    max-width: 560px;
  }

  /* Responsive: stack on small screens */
  .about-why {
    flex-direction: column;
    align-items: stretch;
  }

  /*.about-why-left {*/
  /*  width: 100%;*/
  /*  height: 220px; !* reasonable placeholder height on mobile *!*/
  /*}*/

  .about-why-left {
    width: 100%;
  }

  .about-why-right {
    max-width: none;
    flex: 1 1 auto;
  }

  .about-stats {
    justify-content: center;
  }

  .footer-grid {
    flex-direction: column;
  }

  .footer-col {
    flex-basis: auto;
  }

  .about-title {
    font-size: 42px;
    line-height: 52px;
  }

  .format-grid {
    gap: 24px;
  }

  .format-card {
    width: calc((100% - 32px) / 2);
  }

  .ss-media {
    flex: 0 0 50%;
  }

  .ss-image {
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }

  .ss-col p, .ss-col li {
    font-size: 16px;
    line-height: 24px;
  }

  .pre-footer {
    margin-top: 64px;
  }

  /* show one on tablet */
  .review-card {
    flex-basis: 100%;
    height: auto;
    min-height: 520px;
  }

  .frame-2683 {
    height: 420px;
  }

  .frame-2668 {
    height: 360px;
  }

  .frame-2703 {
    width: 85%;
    height: 240px;
  }

  .teacher-footer {
    height: 140px;
    border-radius: 35px;
  }

  .teacher-footer-title {
    font-size: 24px;
    position: relative;
    padding-top: 20px;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
  }

  .teacher-footer-quote {
    position: relative;
    font-size: 14px;
    height: 100%;
    padding: 20px 10px 0 10px;
    margin-bottom: 0;
    width: 100%;
    top: 0;
    left: 0;
  }

  .teacher-info-list {
    font-size: 14px;
    line-height: 180%;
  }

  .teacher-info {
    border-radius: 35px;
    min-height: 430px;
  }

  .teacher-info.video-container {
    min-height: 0;
  }

  .teacher-info p {
    margin-bottom: 0;
  }

  .quote-icon {
    display: none;
  }

  .section-title.section-title--italic {
    font-size: 42px;
  }

  .suit-row {
    justify-content: space-between;
  }

  .suit-card.w380 {
    max-width: 48%;
  }

  .suit-card.w380 {
    max-width: 48%;
  }

  .review-text {
    font-size: 16px;
    line-height: 180%;
    top: 140px;
  }

  .review-card {
    width: 100%;
    max-width: 100%;
  }

  .reviews-controls {
    display: none;
  }

  .sale-promo__decor {
    position: absolute;
    width: 90px;
    top: 430px;
    right: 0;
  }

  .sale-promo__title {
    text-align: center;
  }

  .sale-promo__subtitle {
    text-align: center;
  }

  .sale-promo__redtext {
    text-align: center;
  }

  .sale-promo__media {
    width: 30%;
    /*max-width: 100%;*/
  }

  .sale-promo__inner {
    align-items: flex-start;
  }

}

* {
  box-sizing: border-box;
}

/** {*/
/*  border: 1px solid red;*/
/*}*/