:root {
  --background:#fbfcfe;
  --foreground:#152b52;
  --card:#fff;
  --card-foreground:#152b52;
  --popover:#fff;
  --popover-foreground:#152b52;
  --primary:#1948bd;
  --primary-foreground:#fff;
  --secondary:#edf2fa;
  --secondary-foreground:#152b52;
  --muted:#edf2fa;
  --muted-foreground:#566780;
  --accent:#eef2fa;
  --accent-foreground:#152b52;
  --destructive:#b42318;
  --border:#d4ddeb;
  --input:#bdcada;
  --ring:#1948bd;
  --radius:0rem;
  --blue:#1948bd;
  --ink:#152b52;
  --yellow:#e9f675;
  --line:#d4ddeb}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  background:var(--background);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px}
a {
  color:inherit;
  text-decoration:none}
button,
input,
textarea {
  font:inherit}
button,
a,
input,
textarea {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
button:disabled {
  cursor:wait;
  opacity:.6}
a,
button {
  transition:background .18s, color .18s, transform .18s}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-offset:4px;
  outline:3px solid #779cff}
p,
h1,
h2,
h3,
blockquote {
  margin:0}
h1,
h2,
h3 {
  font-weight:500}
p {
  line-height:1.65}
::selection {
  background:var(--yellow);
  color:var(--ink)}
.container {
  width:min(1280px, 100% - 112px);
  margin:auto}
.site-header {
  z-index:20;
  border-bottom:1px solid var(--line);
  background:#fbfcfe;
  position:sticky;
  top:0}
.header-inner {
  align-items:center;
  gap:34px;
  height:88px;
  display:flex}
.brand {
  white-space:nowrap;
  letter-spacing:-1px;
  align-items:center;
  gap:10px;
  font-size:24px;
  font-weight:700;
  display:flex}
.brand-period {
  color:var(--blue);
  margin-left:-10px}
.brand-symbol {
  background:var(--blue);
  color:#fff;
  letter-spacing:-3px;
  justify-content:center;
  align-items:center;
  width:33px;
  height:33px;
  margin-right:1px;
  padding-right:4px;
  font-size:23px;
  line-height:1;
  display:flex}
.brand-symbol span {
  color:var(--yellow);
  font-weight:400}
.desktop-nav {
  gap:26px;
  margin-left:auto;
  font-size:14px;
  display:flex}
.desktop-nav a:hover {
  color:var(--blue);
  text-underline-offset:6px;
  text-decoration:underline}
.header-cta {
  border:1px solid var(--blue);
  color:var(--blue);
  align-items:center;
  gap:18px;
  padding:13px 17px;
  font-size:14px;
  font-weight:600;
  display:flex}
.header-cta:hover {
  background:var(--blue);
  color:#fff}
.menu-toggle,
.mobile-nav {
  display:none}
.eyebrow,
.drawing-id,
.hero-footnote,
.hero-baseline,
.side-note,
.principle-number,
.timeline-date,
.revision,
.timeline-header,
.sample-label,
.small-pill,
.schedule-header>span,
.schedule-sample,
.schedule-legend,
.footer-bottom {
  letter-spacing:.055em;
  font-family:Courier New, monospace;
  font-size:12px;
  line-height:1.5}
.eyebrow {
  text-transform:uppercase;
  align-items:center;
  gap:12px;
  display:flex}
.section-number {
  color:var(--blue);
  border:1px solid;
  padding:1px 5px;
  font-size:12px}
.hero {
  background:var(--blue);
  color:#fff;
  background-image:none;
  position:relative}
.hero-topline {
  color:#d6e1ff;
  justify-content:space-between;
  align-items:center;
  padding-top:36px;
  display:flex}
.hero-topline .eyebrow:before {
  content:"";
  background:var(--yellow);
  width:6px;
  height:6px}
.drawing-id {
  color:#c1d1f6;
  font-size:12px}
.hero-grid {
  grid-template-columns:1.5fr 1fr;
  align-items:center;
  gap:64px;
  padding:63px 0 64px;
  display:grid}
.hero h1 {
  letter-spacing:-3.5px;
  max-width:750px;
  font-size:clamp(45px, 4.7vw, 68px);
  font-weight:500;
  line-height:1.07}
.hero h1 span {
  color:var(--yellow)}
.hero-description {
  color:#e0e8fc;
  max-width:515px;
  margin-top:27px;
  font-size:18px;
  line-height:1.65}
.hero-actions {
  flex-wrap:wrap;
  gap:12px;
  margin-top:32px;
  display:flex}
.button {
  border:1px solid #0000;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  min-height:54px;
  padding:17px 20px;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  display:inline-flex}
.button svg {
  flex-shrink:0}
.button:hover {
  transform:translateY(-2px)}
.button-yellow {
  background:var(--yellow);
  color:var(--ink)}
.button-yellow:hover {
  background:#f2ff9f}
.button-outline {
  color:#fff;
  background:0 0;
  border-color:#afc4fc}
.button-outline:hover {
  background:#ffffff15}
.button-blue {
  background:var(--blue);
  color:#fff}
.button-blue:hover {
  background:#123793}
.hero-footnote {
  color:#d0ddfd;
  letter-spacing:0;
  margin-top:20px}
.hero-baseline {
  color:#d0dcfa;
  letter-spacing:0;
  border-top:1px solid #ffffff35;
  justify-content:space-between;
  align-items:center;
  padding:19px 0;
  display:flex}
.hero-baseline a {
  gap:24px;
  display:flex}
.hero-baseline a:hover {
  color:var(--yellow)}
.section {
  padding:100px 0}
.section h2 {
  letter-spacing:-1.7px;
  font-size:clamp(34px, 3.2vw, 46px);
  line-height:1.13}
.section h2 span {
  color:var(--blue)}
.approach>.container {
  grid-template-columns:1fr 3fr;
  column-gap:40px;
  display:grid}
.side-note {
  color:#65758b;
  letter-spacing:0;
  margin-top:27px}
.approach-content h2 {
  margin-bottom:25px;
  font-size:clamp(30px, 3vw, 43px)}
.approach-content>p {
  max-width:760px;
  font-size:19px}
.approach-content .secondary-copy {
  color:#5e6e83;
  max-width:700px;
  margin-top:14px;
  font-size:16px}
.principles {
  border-top:1px solid var(--line);
  grid-column:1/-1;
  grid-template-columns:repeat(3, 1fr);
  margin-top:65px;
  display:grid}
.principles article {
  padding:27px 32px 0 0}
.principles article+article {
  border-left:1px solid var(--line);
  padding-left:32px}
.principle-number {
  color:var(--blue);
  font-size:14px}
.principles h3 {
  letter-spacing:-.5px;
  margin:19px 0 13px;
  font-size:21px;
  font-weight:500;
  line-height:1.25}
.principles p {
  color:#5c6d84;
  font-size:16px}
.coach {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#f0f4fa}
.section-heading {
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:54px;
  display:flex}
.section-heading .eyebrow {
  margin-bottom:25px}
.section-heading>p {
  color:#586c85;
  max-width:335px;
  font-size:16px}
.coach-grid {
  grid-template-columns:1fr 1.3fr;
  gap:100px;
  display:grid}
.stat>span {
  letter-spacing:-8px;
  color:var(--blue);
  font-size:112px;
  font-weight:500;
  line-height:1;
  display:block}
.stat .stat-plus {
  vertical-align:top;
  letter-spacing:-3px;
  margin-left:7px;
  font-size:64px;
  font-weight:400;
  line-height:1.4;
  display:inline-block}
.stat>p {
  color:#48617e;
  margin-top:15px;
  font-size:16px}
.small-stats {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:27px;
  padding:24px 0;
  display:grid}
.small-stats strong {
  color:var(--blue);
  font-size:32px;
  font-weight:500;
  line-height:1.4;
  display:block}
.small-stats p {
  color:#566780;
  font-size:14px}
.coach-note {
  margin-top:33px}
.coach-note h3 {
  letter-spacing:-.7px;
  max-width:330px;
  margin-bottom:15px;
  font-size:24px;
  line-height:1.25}
.coach-note p {
  color:#566780;
  margin-top:14px;
  font-size:16px}
.timeline-header {
  text-transform:uppercase;
  color:#566780;
  border-bottom:1px solid #a9bcd6;
  grid-template-columns:105px 1fr;
  padding:0 0 14px;
  display:grid}
.timeline-row {
  border-bottom:1px solid #d4ddea;
  grid-template-columns:105px 1fr;
  gap:0;
  padding:23px 0;
  display:grid}
.timeline-date {
  color:#49617e;
  letter-spacing:0;
  padding-top:2px;
  font-size:12px}
.revision {
  float:right;
  color:#4c6688;
  margin-left:8px;
  font-size:11px;
  line-height:2;
  display:block}
.timeline-row h3 {
  margin-bottom:7px;
  font-size:18px;
  font-weight:600;
  line-height:1.35}
.timeline-row p {
  color:#566780;
  font-size:15px;
  line-height:1.6}
.students {
  background:#e9f675;
  padding:60px 0 65px}
.students-heading {
  justify-content:space-between;
  align-items:center;
  gap:20px;
  display:flex}
.sample-label {
  color:#4b571f;
  letter-spacing:0;
  font-size:12px}
.testimonial {
  grid-template-columns:140px 1fr;
  gap:60px;
  margin:39px 0 0;
  display:grid}
.student-avatar {
  letter-spacing:-4px;
  border:1px solid #8e9c51;
  justify-content:center;
  align-items:center;
  width:140px;
  height:150px;
  font-size:64px;
  font-weight:400;
  display:flex}
.testimonial blockquote {
  letter-spacing:-.8px;
  max-width:960px;
  font-size:clamp(25px, 2.7vw, 36px);
  line-height:1.35}
.student-byline {
  gap:18px;
  margin-top:25px;
  font-size:14px;
  font-weight:600;
  display:flex}
.student-byline span {
  color:#53602e;
  font-weight:400}
.story-details {
  color:#52602c;
  gap:20px;
  margin-top:13px;
  font-size:12px;
  display:flex}
.story-details span+span {
  border-left:1px solid #a3b064;
  padding-left:20px}
.carousel-controls {
  justify-content:flex-end;
  align-items:center;
  gap:16px;
  margin-top:24px;
  display:flex}
.carousel-controls button {
  background:0 0;
  border:1px solid #8e9c51;
  padding:8px}
.programme-grid {
  grid-template-columns:1fr 1fr;
  gap:24px;
  display:grid}
.programme-card {
  border:1px solid #c8d4e4;
  flex-direction:column;
  padding:30px;
  display:flex;
  position:relative}
.programme-card:before {
  content:"";
  background:var(--blue);
  width:40px;
  height:2px;
  position:absolute;
  top:-1px;
  left:-1px}
.programme-top {
  justify-content:space-between;
  align-items:center;
  gap:16px;
  display:flex}
.programme-top .eyebrow {
  color:#4e6380;
  font-size:11px}
.small-pill {
  border:1px solid var(--line);
  letter-spacing:0;
  padding:4px 8px;
  font-size:12px}
.programme-card h3 {
  letter-spacing:-1px;
  margin-top:32px;
  font-size:33px;
  line-height:1.1}
.programme-description {
  color:#586b83;
  max-width:460px;
  margin-top:20px;
  font-size:16px}
.programme-card ul {
  margin:27px 0 35px;
  padding:0;
  list-style:none}
.programme-card li {
  align-items:center;
  gap:11px;
  margin:13px 0;
  font-size:15px;
  line-height:1.4;
  display:flex}
.programme-card li svg {
  width:16px;
  height:16px;
  color:var(--blue);
  flex-shrink:0}
.programme-bottom {
  border-top:1px solid var(--line);
  margin-top:auto;
  padding-top:25px}
.price {
  letter-spacing:-1px;
  font-size:32px}
.price span {
  letter-spacing:0;
  color:#586b83;
  font-size:14px}
.price-text {
  font-size:28px}
.price-text span {
  letter-spacing:-.5px;
  font-size:20px}
.programme-bottom .button {
  width:100%;
  margin-top:20px}
.other-request {
  background:#eef3fa;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  margin-top:24px;
  padding:25px 30px;
  display:flex}
.other-request h3 {
  margin-bottom:6px;
  font-size:19px}
.other-request p {
  color:#586b83;
  max-width:750px;
  font-size:14px}
.other-request a {
  white-space:nowrap;
  color:var(--blue);
  border-bottom:1px solid var(--blue);
  align-items:center;
  gap:20px;
  padding-bottom:5px;
  font-size:15px;
  font-weight:600;
  display:flex}
.joining {
  border-top:1px solid var(--line);
  grid-template-columns:.65fr 1fr 1fr 1fr;
  gap:35px;
  margin-top:55px;
  padding-top:30px;
  display:grid}
.joining .eyebrow {
  align-self:start}
.joining>div>span {
  color:var(--blue);
  font:12px Courier New, monospace}
.joining h3 {
  margin:12px 0 9px;
  font-size:17px;
  font-weight:600}
.joining p {
  color:#5c6d84;
  font-size:14px}
.register {
  color:#fff;
  background:#112d60}
.register-grid {
  grid-template-columns:1fr 1.1fr;
  align-items:start;
  gap:80px;
  display:grid}
.register .section-number {
  color:var(--yellow)}
.schedule-side>.eyebrow {
  color:#c9d8f4}
.schedule-side>h2 {
  letter-spacing:-3.5px;
  margin:30px 0 23px;
  font-size:76px}
.schedule-side>h2 span {
  color:var(--yellow)}
.schedule-side>p {
  color:#c5d2e9;
  max-width:395px;
  font-size:17px}
.schedule-header {
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  margin-top:47px;
  display:flex}
.schedule-header h3 {
  letter-spacing:-.5px;
  font-size:20px}
.schedule-header>span {
  color:#d5def0;
  letter-spacing:0;
  font-size:11px}
.schedule-side>.schedule-sample {
  color:#bccce6;
  max-width:100%;
  margin:9px 0 18px;
  font:12px/1.6 Courier New, monospace}
.schedule-table {
  color:#fff;
  width:100%;
  font-size:14px}
.schedule-table th,
.schedule-table td {
  text-align:center;
  white-space:nowrap;
  color:#d5e0f5;
  border:1px solid #ffffff30;
  padding:12px 6px;
  font-size:13px;
  font-weight:400}
.schedule-table th {
  font-family:Courier New, monospace}
.schedule-table tr:hover {
  background:#ffffff05}
.slot-status {
  text-transform:uppercase;
  letter-spacing:0;
  padding:4px 5px;
  font:11px/1.4 Courier New, monospace;
  display:inline-block}
.slot-status.open,
.slot-status.limited {
  color:var(--yellow);
  cursor:pointer;
  background:0 0;
  border:1px solid #b8cd71;
  min-height:34px}
.slot-status.open:hover, .slot-status.limited:hover, .slot-status.selected {
  background:var(--yellow);
  color:#122e60}
.slot-status.full {
  color:#b7c8e0;
  border:1px solid #647b9d}
.slot-status.consultation {
  color:#d3dff4}
.empty-slot {
  color:#7c94b9}
.schedule-legend {
  color:#b8cbe6;
  letter-spacing:0;
  flex-wrap:wrap;
  gap:8px 17px;
  margin-top:16px;
  font-size:11px;
  display:flex}
.access-note {
  border-top:1px solid #ffffff30;
  margin-top:32px;
  padding-top:25px}
.access-note h3 {
  color:#eef3ff;
  margin-bottom:8px;
  font-size:16px;
  font-weight:500}
.access-note p {
  color:#bacce5;
  font-size:14px}
.registration-card {
  color:var(--ink);
  background:#fff;
  padding:33px}
.form-heading {
  justify-content:space-between;
  align-items:center;
  gap:16px;
  display:flex}
.form-heading h3 {
  letter-spacing:-.7px;
  font-size:24px;
  line-height:1.2}
.form-heading .eyebrow {
  white-space:nowrap;
  color:#5d718a;
  font-size:10px}
.form-intro {
  color:#5d6e84;
  margin:10px 0 28px;
  font-size:14px}
.field-grid {
  grid-template-columns:1fr 1fr;
  gap:21px 16px;
  display:grid}
.field {
  color:#2c4262;
  flex-direction:column;
  gap:8px;
  min-width:0;
  font-size:14px;
  display:flex}
.field.full {
  grid-column:1/-1}
.field input,
.field textarea {
  width:100%;
  min-width:0;
  color:var(--ink);
  background:#fbfcfe;
  border:1px solid #c7d3e4;
  border-radius:0;
  padding:12px 13px;
  font-size:16px;
  line-height:1.35}
.field input {
  height:47px}
.field input::placeholder, .field textarea::placeholder {
  color:#738196;
  font-size:14px}
.field input:focus, .field textarea:focus {
  border-color:var(--blue)}
.field textarea {
  resize:vertical;
  min-height:95px}
.honeypot {
  width:1px;
  height:1px;
  position:absolute;
  left:-10000px;
  overflow:hidden}
fieldset {
  border:0;
  min-width:0;
  margin:25px 0 0;
  padding:0}
legend {
  margin-bottom:11px;
  font-size:14px}
legend span {
  color:#697b92;
  margin-left:10px;
  font-size:12px}
.choice-grid {
  grid-template-columns:1fr 1fr;
  gap:8px;
  display:grid}
.choice {
  cursor:pointer;
  border:1px solid #ccd7e6;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:11px 10px;
  font-size:13px;
  line-height:1.35;
  display:flex}
.choice.active {
  color:var(--blue);
  border-color:var(--blue);
  background:#f0f4ff}
.choice button {
  flex-shrink:0;
  width:15px;
  height:15px}
.availability-choices {
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:8px;
  display:grid}
.goals-field {
  margin-top:25px}
.submit-button {
  width:100%;
  margin-top:25px}
.form-note {
  color:#65758b;
  margin-top:14px;
  font-size:12px;
  line-height:1.6}
.form-error {
  color:#a11d15;
  background:#fff1f0;
  margin-top:16px;
  padding:12px;
  font-size:14px}
.success-state {
  flex-direction:column;
  align-items:flex-start;
  gap:23px;
  min-height:650px;
  padding:35px 0;
  display:flex}
.success-icon {
  background:var(--yellow);
  color:var(--blue);
  padding:18px;
  display:inline-flex}
.success-state h3 {
  letter-spacing:-2px;
  font-size:43px;
  line-height:1.15}
.success-state p {
  font-size:16px}
.success-state .secondary-copy {
  color:#65758b;
  font-size:14px}
.success-state .button {
  margin-top:20px}
.site-footer {
  background:#fbfcfe;
  padding:48px 0 22px}
.footer-top {
  align-items:center;
  gap:70px;
  display:flex}
.footer-brand {
  letter-spacing:-1.5px;
  font-size:34px;
  font-weight:600;
  line-height:1.2}
.footer-brand span {
  color:var(--blue)}
.footer-top>p {
  color:#5b6f89;
  font-size:14px;
  line-height:1.5}
.back-top {
  color:var(--blue);
  margin-left:auto;
  font-size:13px}
.footer-bottom {
  border-top:1px solid var(--line);
  color:#63758d;
  letter-spacing:0;
  justify-content:space-between;
  gap:20px;
  margin-top:42px;
  padding-top:22px;
  font-size:11px;
  display:flex}
.skip-link {
  z-index:50;
  background:var(--yellow);
  color:var(--ink);
  padding:15px;
  position:fixed;
  top:-100px;
  left:20px}
.skip-link:focus {
  top:10px}
@media (width>=1500px) {
  .hero h1 {
    font-size:72px}
  .hero-grid {
    padding:80px 0}
  .hero-description {
    font-size:19px}
}
@media (width<=1190px) {
  .container {
    width:calc(100% - 72px)}
  .header-inner {
    gap:20px}
  .brand {
    font-size:21px}
  .desktop-nav {
    gap:18px}
  .header-cta {
    gap:8px;
    padding:12px}
  .hero-grid {
    grid-template-columns:1.25fr 1fr;
    gap:35px}
  .hero h1 {
    letter-spacing:-2.8px;
    font-size:54px}
  .hero-actions {
    gap:10px}
  .hero-actions .button {
    padding:14px;
    font-size:13px}
  .coach-grid {
    gap:60px}
  .register-grid {
    gap:40px}
  .registration-card {
    padding:25px}
  .form-heading .eyebrow {
    display:none}
  .programme-top {
    flex-wrap:wrap;
    gap:10px}
  .joining {
    gap:25px}
  .schedule-header {
    flex-direction:column;
    gap:5px}
  .section {
    padding:80px 0}
}
@media (width<=960px) {
  .desktop-nav {
    display:none}
  .header-cta {
    margin-left:auto}
  .menu-toggle {
    color:var(--blue);
    background:0 0;
    border:0;
    justify-content:center;
    align-items:center;
    padding:9px;
    display:flex}
  .mobile-nav {
    border-top:1px solid var(--line);
    flex-direction:column;
    gap:0;
    padding:10px 36px 25px;
    display:flex}
  .mobile-nav a {
    padding:12px 0;
    font-size:16px}
  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:30px;
    padding:50px 0}
  .hero h1 {
    letter-spacing:-2px;
    font-size:46px}
  .hero-description {
    font-size:16px}
  .hero-actions {
    flex-direction:column;
    align-items:stretch}
  .hero-actions .button {
    font-size:14px}
  .hero-footnote {
    font-size:11px}
  .drawing-id {
    display:none}
  .approach>.container {
    grid-template-columns:1fr}
  .section-intro {
    justify-content:space-between;
    margin-bottom:30px;
    display:flex}
  .side-note {
    margin:0}
  .principles {
    margin-top:45px}
  .principles article {
    padding-right:20px}
  .principles article+article {
    padding-left:20px}
  .principles h3 {
    font-size:19px}
  .principles p {
    font-size:15px}
  .coach-grid {
    grid-template-columns:1fr 1.1fr;
    gap:35px}
  .timeline-row,
  .timeline-header {
    grid-template-columns:80px 1fr}
  .revision {
    display:none}
  .timeline-row h3 {
    font-size:17px}
  .testimonial {
    grid-template-columns:100px 1fr;
    gap:35px}
  .student-avatar {
    width:100px;
    height:115px;
    font-size:50px}
  .testimonial blockquote {
    font-size:27px}
  .programme-card {
    padding:24px}
  .programme-card h3 {
    font-size:29px}
  .programme-description {
    font-size:15px}
  .joining {
    grid-template-columns:repeat(3, 1fr)}
  .joining>.eyebrow {
    grid-column:1/-1}
  .register-grid {
    grid-template-columns:1fr;
    gap:40px}
  .schedule-side>h2 {
    font-size:64px}
  .schedule-side>p {
    max-width:550px}
  .schedule-header {
    flex-direction:row}
  .registration-card {
    padding:34px}
  .schedule-table th,
  .schedule-table td {
    padding:15px 10px}
  .form-heading .eyebrow {
    display:block}
  .success-state {
    min-height:450px}
  .footer-top {
    gap:35px}
  .footer-brand {
    font-size:29px}
}
@media (width<=640px) {
  .container {
    width:calc(100% - 40px)}
  .header-inner {
    gap:10px;
    height:73px}
  .brand {
    font-size:21px}
  .brand-symbol {
    width:29px;
    height:29px;
    font-size:21px}
  .header-cta {
    display:none}
  .menu-toggle {
    margin-left:auto}
  .mobile-nav {
    padding:10px 20px 20px}
  .hero-topline {
    padding-top:26px}
  .hero-topline .eyebrow {
    letter-spacing:.01em;
    gap:8px;
    font-size:10px}
  .hero-grid {
    grid-template-columns:1fr;
    gap:38px;
    padding:39px 0}
  .hero h1 {
    letter-spacing:-2.2px;
    font-size:clamp(39px, 9.9vw, 59px);
    line-height:1.08}
  .hero-description {
    margin-top:23px;
    font-size:17px}
  .hero-actions {
    flex-direction:column;
    gap:12px;
    margin-top:25px}
  .hero-actions .button {
    padding:16px 18px;
    font-size:14px}
  .hero-footnote {
    font-size:11px}
  .hero-baseline {
    align-items:flex-start;
    gap:18px;
    font-size:11px}
  .hero-baseline>span {
    max-width:145px}
  .hero-baseline a {
    text-align:right;
    gap:12px;
    max-width:135px}
  .section {
    padding:60px 0}
  .section h2 {
    letter-spacing:-1.4px;
    font-size:34px}
  .section-intro {
    gap:20px}
  .side-note {
    font-size:11px}
  .approach-content h2 {
    font-size:31px;
    line-height:1.2}
  .approach-content>p {
    font-size:17px}
  .principles {
    grid-template-columns:1fr;
    margin-top:35px}
  .principles article,
  .principles article+article {
    border-left:0;
    border-bottom:1px solid var(--line);
    padding:24px 0}
  .principles article:last-child {
    border-bottom:0;
    padding-bottom:0}
  .principles h3 {
    margin:12px 0;
    font-size:21px}
  .principles p {
    font-size:16px}
  .section-heading {
    margin-bottom:35px;
    display:block}
  .section-heading>p {
    max-width:none;
    margin-top:22px}
  .section-heading .eyebrow {
    margin-bottom:20px}
  .coach-grid {
    grid-template-columns:1fr;
    gap:42px}
  .stat>span {
    font-size:100px}
  .coach-note h3 {
    max-width:none}
  .timeline-row,
  .timeline-header {
    grid-template-columns:90px 1fr}
  .timeline-row h3 {
    font-size:18px}
  .timeline-row p {
    font-size:15px}
  .students-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:14px}
  .sample-label {
    font-size:11px}
  .testimonial {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:28px}
  .student-avatar {
    letter-spacing:-2px;
    width:65px;
    height:65px;
    font-size:33px}
  .testimonial blockquote {
    font-size:27px;
    line-height:1.4}
  .student-byline {
    flex-direction:column;
    gap:1px;
    margin-top:23px}
  .story-details {
    flex-direction:column;
    gap:7px}
  .story-details span+span {
    border-left:0;
    padding-left:0}
  .programme-grid {
    grid-template-columns:1fr;
    gap:20px}
  .programme-card {
    padding:25px}
  .programme-card h3 {
    margin-top:27px;
    font-size:31px}
  .programme-top {
    flex-wrap:nowrap}
  .programme-top .eyebrow {
    font-size:10px}
  .small-pill {
    font-size:11px}
  .programme-description {
    font-size:16px}
  .programme-card li {
    font-size:14px}
  .other-request {
    padding:25px;
    display:block}
  .other-request a {
    margin-top:20px;
    display:inline-flex}
  .joining {
    grid-template-columns:1fr;
    gap:27px;
    margin-top:35px}
  .joining h3 {
    margin:9px 0}
  .joining p {
    font-size:15px}
  .schedule-side>h2 {
    font-size:65px}
  .schedule-header {
    flex-direction:column}
  .schedule-side>.schedule-sample {
    font-size:11px}
  .schedule-table th,
  .schedule-table td {
    padding:12px 4px;
    font-size:12px}
  .slot-status {
    padding:4px;
    font-size:10px}
  .registration-card {
    padding:24px 20px}
  .form-heading h3 {
    font-size:23px}
  .form-heading .eyebrow {
    display:none}
  .field-grid {
    grid-template-columns:1fr;
    gap:19px}
  .field.full {
    grid-column:auto}
  .choice {
    padding:11px 9px;
    font-size:13px}
  .availability-choices {
    gap:6px}
  .availability-choices .choice {
    gap:6px;
    padding:10px 7px;
    font-size:12px}
  .form-note {
    font-size:12px}
  .footer-top {
    flex-wrap:wrap;
    align-items:flex-start;
    gap:24px}
  .footer-brand {
    width:100%;
    font-size:32px}
  .footer-top>p {
    font-size:14px}
  .back-top {
    margin-top:5px;
    font-size:13px}
  .footer-bottom {
    flex-direction:column;
    gap:10px;
    margin-top:27px;
    padding-top:20px}
  .footer-bottom>span:nth-child(2) {
    display:none}
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto}
  *,
  :before, :after {
    transition:none!important;
    animation:none!important}
}
.hero-grid {
  grid-template-columns:minmax(0, 1fr) 292px;
  align-items:start;
  gap:70px}
.hero h1 {
  max-width:900px}
.motion-accessory {
  color:#edf2ff;
  background:#ffffff0f;
  border:1px solid #ffffff38;
  align-self:start;
  width:100%;
  padding:22px 24px 24px}
.motion-slides {
  display:grid}
.motion-slide {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  grid-area:1/1;
  align-self:start;
  min-width:0;
  transition:opacity .65s, transform .85s cubic-bezier(.22, 1, .36, 1), visibility .65s;
  transform:translateY(5px)}
.motion-slide.is-current {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:.2s;
  transform:translateY(0)}
.motion-slide blockquote {
  letter-spacing:-.15px;
  font-family:Georgia, Times New Roman, serif;
  font-size:20px;
  font-weight:400;
  line-height:1.43}
.motion-source {
  color:#bfcff0;
  text-underline-offset:4px;
  margin-top:14px;
  font:11px/1.5 Courier New, monospace;
  display:inline-block}
.motion-source:hover {
  color:#fff;
  text-decoration:underline}
.hero,
.register {
  isolation:isolate;
  background-image:none;
  position:relative;
  overflow:hidden}
.hero>.container,
.register>.container {
  z-index:2;
  position:relative}
.hero>.ambient-background,
.register>.ambient-background {
  pointer-events:none;
  z-index:1;
  contain:paint;
  position:absolute;
  inset:0;
  overflow:hidden}
.ambient-wash {
  transform-origin:50%;
  position:absolute;
  inset:-18%;
  animation-play-state:paused!important}
.ambient-wash-one {
  background:radial-gradient(65% 30% at 72% 38%, #629aeb99 0%, #4076d660 27%, #3266cd24 56%, #0000 82%), radial-gradient(62% 52% at 25% 80%, #07194bd9 0%, #0b256b85 37%, #0000 78%), radial-gradient(38% 60% at 90% 92%, #4a80cf70 0%, #0000 76%);
  animation:19s ease-in-out -6s infinite alternate atmosphere-drift}
.ambient-wash-two {
  background:radial-gradient(62% 24% at 35% 52%, #629dde78 0%, #467dcc35 40%, #0000 78%), radial-gradient(46% 70% at 82% 22%, #061d66a6 0%, #102c7040 45%, #0000 82%);
  animation:27s ease-in-out -15s infinite alternate atmosphere-undertow}
.ambient-background[data-running=true] .ambient-wash {
  animation-play-state:running!important}
.register .ambient-wash-one {
  animation-delay:-11s}
.register .ambient-wash-two {
  animation-delay:-21s}
@keyframes atmosphere-drift {
  0% {
    opacity:.7;
    transform:translate(-12%, -7%)rotate(-12deg)scale(1.03)}
  48% {
    opacity:.94;
    transform:translate(2%, 8%)rotate(4deg)scale(1.12)}
  to {
    opacity:.78;
    transform:translate(12%, -4%)rotate(13deg)scale(1.02)}
}
@keyframes atmosphere-undertow {
  0% {
    opacity:.55;
    transform:translate(10%, 9%)rotate(12deg)scale(1.08)}
  57% {
    opacity:.85;
    transform:translate(-9%, -6%)rotate(-8deg)scale(1.02)}
  to {
    opacity:.65;
    transform:translate(-4%, 11%)rotate(-15deg)scale(1.14)}
}
@media (width>=1500px) {
  .hero-grid {
    grid-template-columns:minmax(0, 1fr) 310px;
    gap:90px}
}
@media (width<=1190px) {
  .hero-grid {
    grid-template-columns:minmax(0, 1fr) 265px;
    gap:45px}
  .motion-slide blockquote {
    font-size:19px}
}
@media (width<=960px) {
  .hero-grid {
    grid-template-columns:minmax(0, 1fr) 240px;
    gap:32px}
  .motion-slide blockquote {
    font-size:18px}
  .hero-actions {
    align-items:flex-start}
  .hero-actions .button {
    min-width:238px}
  .hero-footnote {
    max-width:300px}
}
@media (width<=640px) {
  .hero-grid {
    grid-template-columns:1fr;
    gap:35px}
  .hero-actions {
    align-items:stretch}
  .motion-accessory {
    justify-self:end;
    max-width:315px}
  .motion-slide blockquote {
    font-size:18px}
  .ambient-wash-two {
    display:none}
}
@media (prefers-reduced-motion:reduce) {
  .ambient-wash {
    animation:none!important}
  .motion-slide {
    transition:none!important;
    transform:none!important}
}
.selection-summary {
  border-top:1px solid var(--line);
  color:#4e6380;
  overflow-wrap:anywhere;
  flex-direction:column;
  gap:5px;
  margin-top:16px;
  padding-top:13px;
  font-size:14px;
  line-height:1.6;
  display:flex}
.selection-summary-label {
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#65758b;
  font:11px/1.4 Courier New, monospace}
.selection-summary strong {
  color:var(--blue);
  font-weight:600}
.availability-choices .choice.selection-arrived {
  animation:1.15s ease-out selection-arrival}
@keyframes selection-arrival {
  0% {
    background:#e9f675;
    box-shadow:0 0 0 3px #e9f67580}
  45% {
    background:#eef5c7;
    box-shadow:0 0 0 3px #e9f67530}
  to {
    background:#f0f4ff;
    box-shadow:0 0 #0000}
}
@media (prefers-reduced-motion:reduce) {
  .availability-choices .choice.selection-arrived {
    animation:none!important}
}
@media (width<=640px) {
  .section-intro {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:28px}
  .section-intro .side-note {
    text-align:left;
    margin:0}
}
.wordmark {
  letter-spacing:-1.15px;
  gap:0;
  font-size:25px;
  font-weight:750}
.wordmark-stop {
  background:var(--blue);
  flex-shrink:0;
  width:7px;
  height:7px;
  margin:12px 0 0 5px;
  display:inline-block}
.desktop-nav,
.header-cta,
.back-top {
  font-size:16px}
.story-hero {
  background-color:var(--blue)}
.story-inner {
  padding-top:72px;
  padding-bottom:65px}
.story-hero h1 {
  letter-spacing:-3.6px;
  max-width:1100px;
  font-size:clamp(52px, 5.8vw, 86px);
  font-weight:500;
  line-height:1.06}
.story-hero h1 span {
  color:var(--yellow)}
.story-resolution {
  max-width:680px;
  margin-top:40px}
.story-objection {
  letter-spacing:-.6px;
  color:#dce6ff;
  max-width:520px;
  font-size:clamp(23px, 2.3vw, 32px);
  line-height:1.4}
.story-answer {
  letter-spacing:-1px;
  color:#fff;
  font-size:clamp(29px, 3vw, 42px);
  line-height:1.2}
.story-answer span {
  color:var(--yellow)}
.story-actions {
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  max-width:680px;
  margin-top:24px;
  display:flex}
.story-actions>p {
  color:#dce6ff;
  max-width:520px;
  font-size:18px;
  line-height:1.55}
.story-actions .button {
  min-width:240px;
  padding:18px 23px;
  font-size:16px}
.atmosphere-control {
  z-index:2;
  color:#dce6ff;
  background:0 0;
  border:0;
  border-radius:50%;
  justify-content:center;
  align-items:center;
  width:36px;
  height:36px;
  display:flex;
  position:absolute;
  bottom:14px;
  right:16px}
.atmosphere-control:hover {
  background:#ffffff18}
.approach>.container {
  display:block}
.approach-content {
  max-width:880px}
.approach-content>p {
  font-size:18px}
.approach-content .secondary-copy {
  font-size:17px}
.principles h3 {
  margin-top:0}
.timeline-date,
.timeline-row p {
  font-size:16px}
.timeline-row {
  grid-template-columns:110px minmax(0, 1fr)}
.timeline-date {
  line-height:1.5}
.timeline-row:first-child {
  padding-top:0}
.students h2 {
  font-size:32px}
.student-byline {
  font-size:16px;
  font-weight:400;
  line-height:1.5}
.programme-top {
  justify-content:flex-start}
.small-pill {
  color:#5c6d84;
  border:0;
  padding:0;
  font:16px/1.4 Arial, Helvetica, sans-serif}
.price span,
.programme-card li,
.other-request p,
.other-request a {
  font-size:16px}
.joining {
  grid-template-columns:repeat(3, 1fr)}
.joining>h3 {
  grid-column:1/-1;
  margin:0;
  font-size:24px}
.joining p,
.joining h3 {
  font-size:16px}
.joining>h3 {
  font-size:24px}
.schedule-header>span,
.schedule-side>.schedule-sample,
.schedule-table th,
.schedule-table td {
  letter-spacing:0;
  font:16px/1.5 Arial, Helvetica, sans-serif}
.schedule-header {
  flex-wrap:wrap;
  gap:8px}
.schedule-side>.schedule-sample {
  color:#cbd8ee;
  margin:10px 0 20px}
.schedule-table .slot-status {
  text-transform:none;
  min-height:36px;
  padding:7px;
  font:14px/1.4 Arial, Helvetica, sans-serif}
.access-note p,
.access-note h3 {
  font-size:16px}
.form-heading {
  margin-bottom:27px}
.field,
legend,
.choice,
.availability-choices .choice,
.selection-summary,
.field input::placeholder, .field textarea::placeholder {
  font-size:16px}
legend span {
  font-size:14px}
.form-note {
  color:#5c6d84;
  font-size:16px}
.success-state .secondary-copy,
.footer-top>p,
.back-top {
  font-size:16px}
.footer-brand {
  font-size:32px}
.site-footer {
  padding:44px 0}
.preview-register {
  color:var(--blue);
  margin-left:auto;
  font-size:16px}
.concept-page {
  padding:40px 0 60px}
.concept-intro {
  margin:48px 0 25px}
.concept-intro h1 {
  letter-spacing:-1.4px;
  font-size:42px;
  line-height:1.15}
.concept-intro p {
  color:#5c6d84;
  margin-top:12px;
  font-size:17px}
.concept-sizes {
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:35px;
  display:flex}
.concept-sizes .choice {
  padding:12px 18px}
.concept-grid {
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:32px;
  margin-bottom:40px;
  display:grid}
.concept-grid h2 {
  margin-bottom:8px;
  font-size:25px;
  line-height:1.3}
.concept-grid section>p {
  color:#5c6d84;
  margin-bottom:22px;
  font-size:16px}
.concept-frame {
  border:1px solid var(--line);
  background:#edf2fa;
  width:100%;
  position:relative;
  overflow:hidden}
.concept-frame iframe {
  transform-origin:0 0;
  border:0;
  margin:auto;
  display:block}
@media (width>=1600px) {
  .story-inner {
    padding-top:90px;
    padding-bottom:80px}
  .story-resolution {
    margin-top:48px}
  .story-actions {
    margin-top:24px}
}
@media (width<=1190px) {
  .desktop-nav {
    gap:18px}
  .desktop-nav a {
    font-size:14px}
  .wordmark {
    font-size:24px}
  .story-inner {
    padding-top:60px;
    padding-bottom:60px}
  .story-hero h1 {
    font-size:67px}
  .story-resolution {
    gap:40px}
}
@media (width<=960px) {
  .story-hero h1 {
    letter-spacing:-2.5px;
    font-size:58px}
  .story-resolution {
    gap:30px;
    margin-top:40px}
  .story-objection {
    font-size:26px}
  .story-answer {
    font-size:34px}
  .story-actions {
    gap:24px;
    margin-top:24px}
  .timeline-row {
    grid-template-columns:100px minmax(0, 1fr)}
}
@media (width<=640px) {
  .wordmark {
    letter-spacing:-1px;
    font-size:24px}
  .wordmark-stop {
    width:6px;
    height:6px;
    margin-top:10px}
  .story-inner {
    padding-top:43px;
    padding-bottom:50px}
  .story-hero h1 {
    letter-spacing:-1.7px;
    font-size:clamp(36px, 9vw, 48px);
    line-height:1.09}
  .story-resolution {
    margin-top:30px;
    display:block}
  .story-objection {
    letter-spacing:-.3px;
    max-width:350px;
    font-size:21px;
    line-height:1.4}
  .story-answer {
    letter-spacing:-.7px;
    margin-top:22px;
    font-size:30px;
    line-height:1.2}
  .story-actions {
    align-items:stretch;
    gap:20px;
    margin-top:22px}
  .story-actions>p {
    max-width:340px;
    font-size:16px;
    line-height:1.5}
  .story-actions .button {
    width:100%;
    min-width:0;
    padding:16px 20px}
  .desktop-break {
    display:none}
  .approach-content h2 {
    font-size:34px}
  .approach-content>p {
    font-size:17px}
  .timeline-row {
    grid-template-columns:90px minmax(0, 1fr);
    gap:10px}
  .timeline-date {
    font-size:14px}
  .timeline-row p {
    font-size:16px}
  .students h2 {
    font-size:28px}
  .testimonial {
    margin-top:28px}
  .programme-card h3 {
    margin-top:20px}
  .small-pill {
    font-size:16px}
  .joining {
    grid-template-columns:1fr;
    gap:24px}
  .joining p {
    font-size:16px}
  .schedule-header {
    align-items:flex-start}
  .schedule-header>span,
  .schedule-side>.schedule-sample {
    font-size:16px}
  .schedule-table th,
  .schedule-table td {
    padding:10px 3px;
    font-size:14px}
  .schedule-table .slot-status {
    padding:6px 4px;
    font-size:13px}
  .choice-grid {
    grid-template-columns:1fr}
  .choice {
    padding:12px}
  .availability-choices .choice {
    flex-grow:0;
    flex-basis:calc(50% - 8px);
    padding:10px;
    font-size:16px}
  legend span {
    margin:6px 0 0;
    font-size:14px;
    display:block}
  .registration-card {
    padding:25px 20px}
  .form-note {
    font-size:16px}
  .footer-brand {
    font-size:30px}
  .footer-top>p {
    font-size:16px}
  .preview-register {
    display:none}
  .concept-grid {
    grid-template-columns:1fr;
    gap:40px}
  .concept-intro h1 {
    font-size:34px}
  .concept-page {
    padding-top:25px}
  .concept-sizes {
    gap:8px}
  .concept-sizes .choice {
    padding:10px;
    font-size:14px}
}
.coach-sequence {
  max-width:900px}
.coach-stats {
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:32px;
  margin:44px 0 0;
  padding:0 0 36px;
  display:grid}
.coach-stats>div {
  flex-direction:column;
  gap:10px;
  min-width:0;
  display:flex}
.coach-stats dt {
  color:#566780;
  font-size:16px;
  line-height:1.4}
.coach-stats dd {
  letter-spacing:-2px;
  color:var(--blue);
  order:-1;
  margin:0;
  font-size:clamp(40px, 4vw, 56px);
  font-weight:500;
  line-height:1.05}
.coach-introduction {
  max-width:680px;
  margin-top:48px}
.coach-introduction h3 {
  letter-spacing:-.7px;
  text-wrap:balance;
  font-size:clamp(24px, 2.4vw, 30px);
  line-height:1.3}
.coach-introduction p {
  color:#566780;
  margin-top:16px;
  font-size:18px;
  line-height:1.65}
.coach-achievements {
  margin-top:52px}
.coach-achievements>h3 {
  color:#4a5c74;
  margin-bottom:14px}
.coach-achievements ol {
  margin:20px 0 0;
  padding:0;
  list-style:none}
.coach-achievements li {
  border-top:1px solid var(--line);
  grid-template-columns:140px minmax(0, 1fr);
  gap:24px;
  padding:24px 0;
  display:grid}
.achievement-date {
  color:#566780;
  font-size:16px;
  line-height:1.5}
.coach-achievements h4 {
  margin:0;
  font-size:20px;
  font-weight:600;
  line-height:1.4}
.coach-achievements li p {
  color:#566780;
  margin-top:5px;
  font-size:16px;
  line-height:1.5}
@media (width<=640px) {
  .story-actions .button {
    text-align:left;
    gap:12px;
    padding:16px}
  .coach-stats {
    gap:16px;
    margin-top:32px;
    padding-bottom:28px}
  .coach-stats dd {
    letter-spacing:-1.5px;
    font-size:40px}
  .coach-stats dt {
    font-size:16px}
  .coach-introduction {
    margin-top:32px}
  .coach-introduction p {
    font-size:17px}
  .coach-achievements {
    margin-top:36px}
  .coach-achievements li {
    grid-template-columns:1fr;
    gap:8px;
    padding:22px 0}
}
.principles.principles-standalone {
  border-top:0;
  margin-top:0}
.word-arcs {
  margin:26px 0 2px;
  padding:4px 0}
.word-arcs-stage {
  justify-content:center;
  display:flex;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, #0000, #000 6% 94%, #0000);
  mask-image:linear-gradient(90deg, #0000, #000 6% 94%, #0000)}
.word-arcs-stage svg {
  flex:none;
  width:100%;
  min-width:760px;
  height:auto;
  display:block}
.word-arc-beam {
  fill:#aebc6a}
.word-arc-text {
  fill:#4a5722;
  letter-spacing:.01em;
  font-size:22px}
.word-arc-text .is-anchor {
  fill:#23300a;
  font-weight:600}
.word-arc-text tspan[lang=vi] {
  fill:#7a6520}
.word-arc-text tspan[lang=vi].is-anchor {
  fill:#5a4a10}
.review-grid {
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:20px;
  margin-top:30px;
  padding-bottom:34px;
  display:grid}
.review-card {
  --stair:0px;
  --rise-delay:0s;
  opacity:0;
  height:392px;
  transform:translate3d(0, calc(var(--stair) + 34px), 0);
  transition:opacity .4s ease-out var(--rise-delay), transform .52s cubic-bezier(.16, 1, .3, 1) var(--rise-delay);
  position:relative}
.review-card[data-shown] {
  opacity:1;
  transform:translate3d(0, var(--stair), 0)}
.review-card:nth-child(5n+1) {
  --stair:30px;
  --rise-delay:0s}
.review-card:nth-child(5n+2) {
  --stair:12px;
  --rise-delay:60ms}
.review-card:nth-child(5n+3) {
  --stair:0px;
  --rise-delay:.12s}
.review-card:nth-child(5n+4) {
  --stair:12px;
  --rise-delay:.18s}
.review-card:nth-child(5n+5) {
  --stair:30px;
  --rise-delay:.24s}
.review-card:hover, .review-card:focus-within {
  z-index:8}
.review-card-inner {
  background:#fff;
  border:1px solid #cbd884;
  flex-direction:column;
  gap:15px;
  height:100%;
  padding:22px;
  transition:height .45s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
  display:flex;
  position:absolute;
  inset:0 0 auto}
.review-card:hover .review-card-inner, .review-card:focus-within .review-card-inner {
  height:auto;
  min-height:100%;
  box-shadow:0 18px 44px #28340c38}
.review-card .student-avatar {
  letter-spacing:-1px;
  width:54px;
  height:58px;
  color:var(--ink);
  border-color:#c2d07a;
  flex-shrink:0;
  font-size:23px;
  font-weight:500}
.review-card blockquote {
  color:#25344d;
  flex:1;
  min-height:0;
  font-size:15px;
  line-height:1.6;
  position:relative;
  overflow:hidden}
.review-card blockquote:after {
  content:"";
  pointer-events:none;
  background:linear-gradient(#fff0, #fff);
  height:3.4em;
  transition:opacity .35s;
  position:absolute;
  inset:auto 0 0}
.review-card:hover blockquote, .review-card:focus-within blockquote {
  flex:none;
  overflow:visible}
.review-card:hover blockquote:after, .review-card:focus-within blockquote:after {
  opacity:0}
.review-card figcaption {
  color:var(--ink);
  border-top:1px solid #e2e9c6;
  flex-shrink:0;
  padding-top:14px;
  font-size:15px;
  font-weight:600}
.review-school {
  color:#6b7a92;
  margin-top:3px;
  font-size:14px;
  font-weight:400;
  display:block}
.student-byline {
  font-weight:600}
@media (width<=1190px) {
  .review-grid {
    grid-template-columns:repeat(4, minmax(0, 1fr))}
  .review-card:nth-child(n) {
    --stair:0px;
    --rise-delay:0s}
  .review-card:nth-child(4n+1) {
    --stair:24px;
    --rise-delay:0s}
  .review-card:nth-child(4n+2) {
    --stair:6px;
    --rise-delay:65ms}
  .review-card:nth-child(4n+3) {
    --stair:6px;
    --rise-delay:.13s}
  .review-card:nth-child(4n+4) {
    --stair:24px;
    --rise-delay:.195s}
}
@media (width<=960px) {
  .review-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr))}
  .review-card:nth-child(n) {
    --stair:0px;
    --rise-delay:0s}
  .review-card:nth-child(3n+1) {
    --stair:20px;
    --rise-delay:0s}
  .review-card:nth-child(3n+2) {
    --stair:0px;
    --rise-delay:70ms}
  .review-card:nth-child(3n+3) {
    --stair:20px;
    --rise-delay:.14s}
}
.reviews-toggle {
  color:#2f3b12;
  background:0 0;
  border:1px solid #8e9c51;
  align-items:center;
  gap:12px;
  margin-top:22px;
  padding:13px 18px;
  font-size:16px;
  font-weight:600;
  display:none}
.reviews-toggle:hover {
  background:#dfee5c}
.review-digest {
  display:none}
.review-digest b {
  color:var(--ink);
  font-weight:700}
.digest-gap {
  color:#8c9a63;
  letter-spacing:.06em}
.review-prompt {
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#5b6a2d;
  margin-top:2px;
  font:12px/1.5 Courier New, monospace;
  display:none}
.review-open {
  z-index:3;
  background:0 0;
  border:0;
  padding:0;
  display:none;
  position:absolute;
  inset:0}
.review-open:focus-visible {
  outline-offset:-3px;
  outline:3px solid #779cff}
@media (hover:none) {
  .review-card {
    height:auto}
  .review-card-inner {
    height:auto;
    min-height:0;
    padding-bottom:18px;
    position:static}
  .review-card blockquote {
    flex:none;
    font-size:16px;
    line-height:1.62;
    overflow:visible}
  .review-card blockquote:after, .review-grid:not([data-all]) .review-card:nth-child(n+5) {
    display:none}
  .reviews-toggle {
    display:inline-flex}
  .review-full {
    clip-path:inset(50%);
    white-space:nowrap;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    position:absolute;
    overflow:hidden}
  .review-digest,
  .review-prompt,
  .review-open {
    display:block}
}
.review-dialog {
  width:min(560px, 100% - 28px);
  max-height:min(84vh, 780px);
  color:var(--ink);
  background:#fff;
  border:1px solid #b7c672;
  padding:0}
.review-dialog[open] {
  flex-direction:column;
  display:flex}
.review-dialog::backdrop {
  background:#161e08a8}
.review-dialog-head {
  border-bottom:1px solid #e2e9c6;
  flex:none;
  align-items:center;
  gap:14px;
  padding:16px 16px 14px;
  display:flex}
.review-dialog .student-avatar {
  letter-spacing:-1px;
  border-color:#c2d07a;
  flex:none;
  width:50px;
  height:54px;
  font-size:21px;
  font-weight:500}
.review-dialog-who {
  min-width:0}
.review-dialog-name {
  font-size:17px;
  font-weight:600;
  line-height:1.3}
.review-dialog-close {
  width:48px;
  height:48px;
  color:var(--ink);
  background:#fff;
  border:1px solid #cbd884;
  flex:none;
  justify-content:center;
  align-items:center;
  margin-left:auto;
  display:inline-flex}
.review-dialog-close:hover {
  background:#eef5c7}
.review-dialog blockquote {
  -webkit-overflow-scrolling:touch;
  color:#25344d;
  flex:1;
  min-height:0;
  padding:20px 18px;
  font-size:17px;
  line-height:1.72;
  overflow-y:auto}
.review-dialog-foot {
  border-top:1px solid #e2e9c6;
  flex:none;
  padding:14px 16px 16px}
.review-dialog-foot .button {
  justify-content:center;
  width:100%}
.coach-introduction {
  gap:42px;
  display:grid}
.coach-introduction article {
  max-width:700px}
.coach-introduction .coach-teammates {
  color:#68809b;
  margin-top:15px;
  font-size:15px;
  line-height:1.75}
.coach-achievements .achievement-more {
  color:#697d96;
  margin-top:22px;
  font-size:16px;
  line-height:1.6}
.results-toggle {
  color:var(--blue);
  background:0 0;
  border:1px solid #b6c4d8;
  align-items:center;
  gap:12px;
  margin-top:24px;
  padding:13px 18px;
  font-size:16px;
  font-weight:600;
  display:inline-flex}
.results-toggle:hover {
  background:#e5ecf7}
.platform-list {
  grid-template-columns:repeat(auto-fit, minmax(272px, 1fr));
  gap:14px;
  margin:34px 0 0;
  padding:0;
  list-style:none;
  display:grid}
.platform-list li {
  border:1px solid var(--line);
  background:#fff;
  flex-direction:column;
  gap:9px;
  padding:19px 21px 21px;
  display:flex}
.platform-before {
  color:#8b98ab;
  font-size:14px;
  line-height:1.5;
  -webkit-text-decoration:line-through #c3cddb;
  text-decoration:line-through #c3cddb;
  text-decoration-thickness:1px}
.platform-after {
  color:var(--ink);
  align-items:flex-start;
  gap:10px;
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  display:flex}
.platform-after svg {
  color:var(--blue);
  flex:none;
  margin-top:4px}
.programme-price {
  letter-spacing:-.8px;
  margin-top:16px;
  font-size:25px;
  line-height:1.2}
.programme-price span {
  letter-spacing:.045em;
  color:#586b83;
  margin-top:9px;
  font:12px/1.5 Courier New, monospace;
  display:block}
.programme-card ul {
  margin:24px 0 30px}
.programme-card li {
  align-items:flex-start;
  line-height:1.55}
.programme-card li svg {
  margin-top:3px}
.programme-best {
  color:#5a6d85;
  margin-bottom:6px;
  font-size:14px;
  line-height:1.65}
.programme-best strong {
  color:var(--ink);
  font-weight:600}
.shoutout-name {
  color:var(--blue);
  font-weight:600}
.visually-hidden {
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  position:absolute;
  overflow:hidden}
.programmes .section-heading {
  margin-bottom:26px}
.programme-priority {
  color:#5c6d84;
  max-width:900px;
  margin:0 0 36px;
  font-size:16px;
  line-height:1.75}
.field-label {
  flex-wrap:wrap;
  align-items:baseline;
  gap:9px;
  display:flex}
.field-label em {
  color:#697b92;
  font-size:14px;
  font-style:normal}
@media (width<=640px) {
  .word-arcs {
    margin-top:22px}
  .word-arc-text {
    font-size:31px}
  .review-grid {
    grid-template-columns:1fr;
    gap:14px;
    margin-top:24px;
    padding-bottom:0}
  .review-card:nth-child(n) {
    --stair:0px;
    --rise-delay:0s}
  .review-card-inner {
    gap:12px;
    padding:16px}
  .review-card .student-avatar {
    width:44px;
    height:48px;
    font-size:19px}
  .coach-introduction {
    gap:32px}
  .programme-priority {
    margin-bottom:30px;
    font-size:16px}
  .platform-list {
    gap:10px;
    margin-top:26px}
  .platform-list li {
    padding:16px 17px 18px}
}
@media (prefers-reduced-motion:reduce) {
  .word-arcs-stage {
    -webkit-mask-image:none;
    mask-image:none}
  .review-card {
    opacity:1;
    transform:none;
    transition:none!important}
  .review-card-inner {
    transition:none!important}
}
@property --tw-translate-x {
  syntax:"*";
  inherits:false;
  initial-value:0}
@property --tw-translate-y {
  syntax:"*";
  inherits:false;
  initial-value:0}
@property --tw-translate-z {
  syntax:"*";
  inherits:false;
  initial-value:0}
@property --tw-rotate-x {
  syntax:"*";
  inherits:false}
@property --tw-rotate-y {
  syntax:"*";
  inherits:false}
@property --tw-rotate-z {
  syntax:"*";
  inherits:false}
@property --tw-skew-x {
  syntax:"*";
  inherits:false}
@property --tw-skew-y {
  syntax:"*";
  inherits:false}
@property --tw-scroll-snap-strictness {
  syntax:"*";
  inherits:false;
  initial-value:proximity}
@property --tw-space-x-reverse {
  syntax:"*";
  inherits:false;
  initial-value:0}
@property --tw-border-style {
  syntax:"*";
  inherits:false;
  initial-value:solid}
@property --tw-leading {
  syntax:"*";
  inherits:false}
@property --tw-font-weight {
  syntax:"*";
  inherits:false}
@property --tw-tracking {
  syntax:"*";
  inherits:false}
@property --tw-ordinal {
  syntax:"*";
  inherits:false}
@property --tw-slashed-zero {
  syntax:"*";
  inherits:false}
@property --tw-numeric-figure {
  syntax:"*";
  inherits:false}
@property --tw-numeric-spacing {
  syntax:"*";
  inherits:false}
@property --tw-numeric-fraction {
  syntax:"*";
  inherits:false}
@property --tw-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000}
@property --tw-shadow-color {
  syntax:"*";
  inherits:false}
@property --tw-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%}
@property --tw-inset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000}
@property --tw-inset-shadow-color {
  syntax:"*";
  inherits:false}
@property --tw-inset-shadow-alpha {
  syntax:"<percentage>";
  inherits:false;
  initial-value:100%}
@property --tw-ring-color {
  syntax:"*";
  inherits:false}
@property --tw-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000}
@property --tw-inset-ring-color {
  syntax:"*";
  inherits:false}
@property --tw-inset-ring-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000}
@property --tw-ring-inset {
  syntax:"*";
  inherits:false}
@property --tw-ring-offset-width {
  syntax:"<length>";
  inherits:false;
  initial-value:0}
@property --tw-ring-offset-color {
  syntax:"*";
  inherits:false;
  initial-value:#fff}
@property --tw-ring-offset-shadow {
  syntax:"*";
  inherits:false;
  initial-value:0 0 #0000}
@property --tw-outline-style {
  syntax:"*";
  inherits:false;
  initial-value:solid}
@property --tw-duration {
  syntax:"*";
  inherits:false}
@property --tw-ease {
  syntax:"*";
  inherits:false}
@property --tw-content {
  syntax:"*";
  inherits:false;
  initial-value:""}
@property --tw-scale-x {
  syntax:"*";
  inherits:false;
  initial-value:1}
@property --tw-scale-y {
  syntax:"*";
  inherits:false;
  initial-value:1}
@property --tw-scale-z {
  syntax:"*";
  inherits:false;
  initial-value:1}
@keyframes spin {
  to {
    transform:rotate(360deg)}
}
@keyframes pulse {
  50% {
    opacity:.5}
}
@keyframes enter {
  0% {
    opacity:var(--tw-enter-opacity, 1);
    transform:translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0));
    filter:blur(var(--tw-enter-blur, 0))}
}
@keyframes exit {
  to {
    opacity:var(--tw-exit-opacity, 1);
    transform:translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0));
    filter:blur(var(--tw-exit-blur, 0))}
}
@keyframes accordion-down {
  0% {
    height:0}
  to {
    height:var(--radix-accordion-content-height, var(--accordion-panel-height, auto))}
}
@keyframes accordion-up {
  0% {
    height:var(--radix-accordion-content-height, var(--accordion-panel-height, auto))}
  to {
    height:0}
}
@keyframes caret-blink {
  0%,
  70%,
  to {
    opacity:1}
  20%,
  50% {
    opacity:0}
}
@keyframes scroll-fade-reveal-b {
  0% {
    --scroll-fade-b:var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%,  calc(var(--spacing) * 10))))}
  to {
    --scroll-fade-b:0px}
}
@keyframes scroll-fade-reveal-s {
  0% {
    --scroll-fade-s:0px}
  to {
    --scroll-fade-s:var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%,  calc(var(--spacing) * 10))))}
}
@keyframes scroll-fade-reveal-e {
  0% {
    --scroll-fade-e:var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%,  calc(var(--spacing) * 10))))}
  to {
    --scroll-fade-e:0px}
}
@keyframes tw-shimmer {
  0% {
    background-position:100% 0}
  to {
    background-position:0 0}
}


/* ==========================================================================
   Additions for the no-build rebuild.
   Everything above this line is the design as extracted from the deployed
   site. The rules below replace behaviour that the old React component
   library used to supply.
   ========================================================================== */

/* The mobile nav is display:flex under 960px, which beats the browser's
   default [hidden] rule — so make hidden win wherever we use it. */
[hidden] {
  display: none !important;
}

/* Achievements are grouped one entry per year. The other tournaments from a
   year sit under that year's headline result, and a year that has no headline
   result is hidden outright until the "See more results" button sets data-all
   on the list. */
.coach-achievements ol:not([data-all]) li[data-extra],
.coach-achievements ol:not([data-all]) .achievement-extras {
  display: none;
}

.coach-achievements .achievement-extras {
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

/* Reset what .coach-achievements li sets up for the outer year rows. */
.coach-achievements .achievement-extras li {
  border-top: 0;
  gap: 0;
  padding: 0;
  display: block;
  color: #566780;
  font-size: 16px;
  line-height: 1.5;
}

.achievement-extra-event {
  color: #697d96;
  font-size: 15px;
}

/* Principles can run to more than one paragraph; the global reset zeroes
   every p margin, so space them here. */
.principles article p + p {
  margin-top: 14px;
}

/* ---- Multi-paragraph blocks -------------------------------------------
   The Vietnamese copy runs to several paragraphs in places the English uses
   one. The global reset zeroes every p margin, so space them here. Applies
   to both languages, so the two stay visually identical in structure. */

.principles article p + p,
.coach-introduction article p + p,
.platform-heading p + p,
.programme-description p + p,
.programme-priority + .programme-priority,
.other-request p + p,
.joining div p + p,
.schedule-side > p + p,
.access-note p + p {
  margin-top: 13px;
}

/* .programme-description used to be the paragraph itself; it now wraps them. */
.programme-description p {
  color: inherit;
  font-size: inherit;
}

/* Second "best for" paragraph carries no label, so it needs the gap. */
.programme-best + .programme-best {
  margin-top: 11px;
}

.programme-note {
  color: #6d7f96;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.55;
}

/* Spacing between the notes and the media that sits between them. */
.coach-introduction + .progress-figure {
  margin-top: 42px;
}

.progress-figure + .coach-introduction {
  margin-top: 42px;
}

@media (width<=960px) {
  .coach-introduction + .progress-figure,
  .progress-figure + .coach-introduction {
    margin-top: 32px;
  }
}

/* ---- Language switcher ------------------------------------------------
   Two static pages, so this is just a link. The current language is shown
   as plain text and the other one as the link. */

/* .desktop-nav already carries margin-left:auto, which pushes this whole
   group right — a second auto margin here would split them apart instead. */
/* A segmented control rather than two bits of small grey text: the current
   language is filled in brand blue, the other reads as a button. */
.lang-switch {
  border: 1px solid var(--blue);
  align-items: stretch;
  display: flex;
}

/* Nav labels must never wrap mid-phrase ("The / approach"); tighten the
   spacing instead, since the switcher costs horizontal room. */
.desktop-nav a,
.header-cta {
  white-space: nowrap;
}

@media (width<=1180px) {
  .header-inner {
    gap: 20px;
  }

  .desktop-nav {
    gap: 18px;
  }
}

/* The nav has to collapse earlier than the original 960px: the switcher takes
   real space now, and the Vietnamese labels are longer than the English
   ("Đăng ký quan tâm" vs "Register interest"). Without this the header
   overflows the page on /vi/ between 960px and ~1120px.
   Raised from 1120px to 1250px when "Questions" became the sixth nav item.
   With the tightened gaps at the end of this file, the English header needs
   1137px of the 1168px available at 1280px — so it fits from ~1250px up, and
   below that the hamburger takes over for both languages. */
@media (width<=1250px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    color: var(--blue);
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 9px;
    display: flex;
  }

  /* .desktop-nav carried the margin-left:auto that pushed the right-hand
     group over; with it hidden, the switcher takes that job. */
  .lang-switch {
    margin-left: auto;
  }

  /* The base rule is display:none, and the original stylesheet only turns
     the menu back on below 960px — so it needs enabling here too, or the
     hamburger would open nothing. */
  .mobile-nav {
    border-top: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 10px 36px 25px;
    display: flex;
  }

  .mobile-nav a {
    padding: 12px 0;
    font-size: 16px;
  }
}

.lang-switch .lang-current,
.lang-switch a {
  letter-spacing: 0.08em;
  justify-content: center;
  align-items: center;
  min-width: 42px;
  padding: 9px 11px;
  font: 700 13px/1 Courier New, monospace;
  display: inline-flex;
}

.lang-switch .lang-current {
  color: #fff;
  background: var(--blue);
  font-weight: 700;
}

.lang-switch a {
  color: var(--blue);
  background: #fff;
}

.lang-switch a:hover {
  color: var(--ink);
  background: var(--yellow);
}

/* The header CTA had margin-left:auto under 960px to push itself right; the
   switcher now owns that, so don't let both claim the space. */
@media (width<=960px) {
  .header-cta {
    margin-left: 0;
  }
}

/* The switcher lives in the header at every width, so the mobile menu has
   no language row of its own. */

/* ---- Reviews carousel -------------------------------------------------
   Eleven full reviews side by side was a wall of text. Instead the cards sit
   in one horizontal, snapping, looping track and each shows only that
   review's highlights. The full text stays in the DOM (.review-full) for the
   dialog and for screen readers.

   The original stylesheet styles these cards as a five-column grid with
   staggered reveals, so most of this is unwinding that. */

/* Three cards at a time on desktop, one on mobile, two in between. Cards are
   sized from the track width, so a whole number always fits — change --cards
   and the width follows. */
.review-carousel {
  --cards: 3;
  --card-gap: 16px;
  margin-top: 30px;
  margin-inline: auto;
}

/* Two cards would be ~430px each here; three would be too cramped. */
@media (width<=1100px) {
  .review-carousel {
    --cards: 2;
    max-width: 880px;
  }
}

@media (width<=760px) {
  .review-carousel {
    --cards: 1;
    max-width: 420px;
  }
}

/* Controls centred under the centred band. */
.review-nav {
  justify-content: center;
}

.review-track {
  gap: var(--card-gap);
  padding: 4px 0 10px;
  display: flex;
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* html{scroll-behavior:smooth} must not apply here: the loop repositions
     the track instantly and would otherwise animate across the whole set. */
  scroll-behavior: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.review-track::-webkit-scrollbar {
  display: none;
}

.review-track:focus-visible {
  outline-offset: 4px;
  outline: 3px solid #779cff;
}

/* Undo the grid card: fixed 392px height, absolute inner, reveal transform
   and the nth-child staircase. */
.review-carousel .review-card {
  --stair: 0px;
  --rise-delay: 0s;
  flex: 0 0 auto;
  width: calc((100% - (var(--cards) - 1) * var(--card-gap)) / var(--cards));
  /* .review-card is a <figure>, which the browser gives margin: 1em 40px by
     default. The original grid absorbed that; here those 40px sides would
     add 80px to every card and break the "exactly N per view" maths. */
  margin: 0;
  height: auto;
  opacity: 1;
  transform: none;
  transition: none;
  scroll-snap-align: start;
}

.review-carousel .review-card-inner {
  height: auto;
  min-height: 236px;
  padding-bottom: 18px;
  position: static;
}

/* No clipping or fade: the digest is short enough to show in full. */
.review-carousel .review-card blockquote {
  flex: 1;
  overflow: visible;
  font-size: 16px;
  line-height: 1.6;
}

.review-carousel .review-card blockquote::after {
  display: none;
}

.review-carousel .review-card:hover .review-card-inner,
.review-carousel .review-card:focus-within .review-card-inner {
  height: auto;
}

/* Show the trimmed highlights, keep the full quote for the dialog only. */
.review-carousel .review-full {
  clip-path: inset(50%);
  white-space: nowrap;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.review-carousel .review-digest,
.review-carousel .review-prompt {
  display: block;
}

.review-carousel .review-open {
  display: block;
}

/* Reviewer photos. The avatar box keeps its size and border; the photo fills
   it and is cropped to fit, so portraits and square crops both work. */
.student-avatar.has-photo {
  padding: 0;
  overflow: hidden;
}

.student-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Faces sit above centre in most portraits, so bias the crop upwards
     without going all the way to the top edge. */
  object-position: center 28%;
  display: block;
}

/* A photo needs more room than two initials did. */
.review-carousel .review-card .student-avatar {
  width: 68px;
  height: 72px;
}

.review-nav {
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  display: flex;
}

.review-arrow {
  width: 46px;
  height: 46px;
  color: #2f3b12;
  background: 0 0;
  border: 1px solid #8e9c51;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.review-arrow:hover {
  background: #dfee5c;
}

.review-count {
  letter-spacing: 0.055em;
  color: #5b6a2d;
  font: 12px/1.5 Courier New, monospace;
}

@media (width<=640px) {
  .review-carousel .review-card-inner {
    min-height: 0;
  }
}

/* ---- Programme cards --------------------------------------------------
   The two cards have descriptions and feature lists of different lengths, so
   as plain flex columns each one stacks on its own and the rows drift out of
   line. Subgrid makes both cards share the grid's row tracks, so the pill,
   title, price, description, list and footer each start at the same height
   in both cards — every track sized to whichever card needs more room.
   Copy is untouched; only the empty space moves.

   The card has exactly seven children (the photo is the first), hence
   seven rows. If you add or remove one, update both numbers below. */
@supports (grid-template-rows: subgrid) {
  .programme-grid {
    grid-template-rows: repeat(7, auto);
  }

  .programme-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
  }

  /* margin-top:auto did the bottom-pinning under flex; the row track
     handles it now. */
  .programme-card .programme-bottom {
    margin-top: 0;
  }
}

/* ---- "Not the usual debate class" -------------------------------------
   The description sits under the heading rather than off to the right, and
   the nine points are a two-column comparison table instead of nine boxes. */

.platform-heading {
  display: block;
  margin-bottom: 38px;
}

.platform-heading p {
  max-width: 660px;
  margin-top: 18px;
  color: #586c85;
  font-size: 17px;
}

.platform-compare {
  width: 100%;
  margin-top: 0;
  overflow-x: auto;
}

.platform-table {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-collapse: collapse;
}

.platform-table th {
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: #6d7f96;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  font: 12px/1.5 Courier New, monospace;
  font-weight: 400;
  text-align: left;
  width: 50%;
}

.platform-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 20px;
  vertical-align: top;
  width: 50%;
}

.platform-table th + th,
.platform-table td + td {
  border-left: 1px solid var(--line);
}

.platform-table tbody tr:last-child td {
  border-bottom: 0;
}

.platform-table tbody tr:hover {
  background: #f7f9fd;
}

/* On a phone a two-column table of sentences is unreadable, so each row
   stacks: the old way struck through, the new way beneath it. */
@media (width<=640px) {
  .platform-heading p {
    font-size: 16px;
  }

  .platform-table,
  .platform-table tbody,
  .platform-table tr,
  .platform-table td {
    display: block;
    width: auto;
  }

  .platform-table thead {
    display: none;
  }

  .platform-table tr {
    border-bottom: 1px solid var(--line);
    padding: 15px 17px;
  }

  .platform-table tbody tr:last-child {
    border-bottom: 0;
  }

  .platform-table td,
  .platform-table td + td {
    border: 0;
    border-left: 0;
    padding: 0;
  }

  .platform-table td + td {
    margin-top: 9px;
  }
}

/* Was a Tailwind utility wrapper on the schedule table. */
.schedule-table-wrap {
  width: 100%;
  overflow-x: auto;
}

/* Native radio/checkbox in place of the old component-library controls,
   sized to match what the .choice layout expects. */
.choice input[type="radio"],
.choice input[type="checkbox"] {
  accent-color: var(--primary);
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ---- Progress chart ---------------------------------------------------
   Two series over cumulative rounds: win rate in brand blue, speaker
   average in the olive used by the students section. Drawn as inline SVG
   by progress.pl, so there is no charting library and no JS involved. */

/* .progress-figure is a <figure>, which the browser gives margin: 1em 40px
   by default — that silently narrowed the chart by 80px. Set it explicitly. */
.progress-figure {
  margin: 38px 0 0;
}

.progress-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
}

/* Even odds — the line the whole chart is measured against. */
.chart-grid.is-even {
  stroke: #aab8cc;
  stroke-dasharray: 3 4;
}

.chart-period {
  stroke: #e4eaf3;
  stroke-width: 1;
}

.chart-tick {
  letter-spacing: 0.055em;
  fill: #6d7f96;
  font: 12px/1 Courier New, monospace;
}

.chart-tick.is-speaks {
  fill: #5b6a2d;
}

.chart-period-label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: #8b98ab;
  font: 11px/1 Courier New, monospace;
}

.chart-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line.is-win {
  stroke: var(--blue);
  stroke-width: 2.5;
}

.chart-line.is-speaks {
  stroke: #8e9c51;
  stroke-width: 2;
}

.chart-legend {
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 22px;
  display: flex;
}

.chart-key {
  letter-spacing: 0.055em;
  align-items: center;
  gap: 9px;
  color: #566780;
  font: 12px/1 Courier New, monospace;
  display: inline-flex;
}

.chart-key:before {
  content: "";
  width: 22px;
  height: 3px;
  display: inline-block;
}

.chart-key.is-win:before {
  background: var(--blue);
}

.chart-key.is-speaks:before {
  background: #8e9c51;
}

.chart-note {
  max-width: 660px;
  margin-top: 18px;
  color: #6d7f96;
  font-size: 15px;
}

@media (width<=640px) {
  .chart-note {
    font-size: 14px;
  }

  .chart-period-label {
    display: none;
  }
}

/* Blocks-of-ten view: each bar is one block's own win rate. */
.chart-bar {
  fill: var(--blue);
  fill-opacity: 0.82;
}

.chart-bar:hover {
  fill-opacity: 1;
}

/* A block at 90%+ or 20%-, worth being able to spot. */
.chart-bar.is-high {
  fill: #0f3796;
}

.chart-bar.is-low {
  fill: #b42318;
  fill-opacity: 0.9;
}

.blocks-chart .chart-line.is-speaks {
  stroke-width: 2.5;
}

.chart-key.is-bar:before {
  background: var(--blue);
  height: 11px;
}

/* Per-period view: a labelled bar per semester, with the win rate printed on
   it so the chart reads without tracing back to an axis. */
.chart-value {
  letter-spacing: 0.04em;
  fill: var(--blue);
  font: 700 13px/1 Courier New, monospace;
}

.chart-period-count {
  letter-spacing: 0.05em;
  fill: #9aa7b8;
  font: 10px/1 Courier New, monospace;
}

.chart-dot {
  fill: #8e9c51;
}

.periods-chart .chart-bar {
  fill-opacity: 0.9;
}

/* The lines draw themselves left to right and loop, animated by SMIL inside
   the SVG (see progress.pl) so each line can use its own exact path length.
   app.js freezes them for anyone who prefers reduced motion. */

.chart-axis-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: #8b98ab;
  font: 11px/1 Courier New, monospace;
}


/* ---- Coach column alignment -------------------------------------------
   The coach column sits flush to the container's left edge: notes, chart,
   stats and achievements all share the same left axis, which is how the
   rest of the page is aligned. (This was briefly centred; reverted.) */

.coach-sequence,
.coach-introduction,
.coach-achievements,
.coach-stats,
.progress-figure {
  margin-inline: 0;
}

/* Contact link in the footer. Until the registration form has somewhere to
   post, this is the way to reach a human, so it sits alongside "Back to top"
   rather than being buried. It takes the auto margin that pushed "Back to
   top" right, and "Back to top" then trails it. */
.footer-contact {
  color: var(--blue);
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-contact:hover {
  text-decoration: underline;
}

.footer-top .footer-contact + .back-top {
  margin-left: 0;
}

@media (width<=760px) {
  .footer-top .footer-contact {
    margin-left: 0;
  }
}

/* Same link inside the note under the submit button. */
.form-note a {
  color: var(--blue);
  text-decoration: underline;
}

/* The hero offer line is a sentence, not the short couplet it replaced, so it
   wraps. Balanced wrapping keeps it from leaving one orphaned word. */
.story-objection {
  text-wrap: balance;
}

.hero-credential {
  max-width: 52ch;
}

/* ---- FAQ ---------------------------------------------------------------
   Sits between the dark register section and the footer, so it stays on the
   page background — two dark blocks in a row would flatten the rhythm.
   Heading column on the left, answers on the right, collapsing to one
   column on narrow screens. */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: start;
  gap: 80px;
}

.faq-side h2 {
  margin-bottom: 18px;
}

.faq-side > p {
  color: #586c85;
  max-width: 300px;
  font-size: 16px;
}

.faq-contact {
  color: var(--blue);
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
}

.faq-contact:hover {
  text-decoration: underline;
}

/* Each question is a <details>, so it works with no JavaScript. */
.faq-item {
  border-top: 1px solid var(--line);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-item > summary {
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  display: flex;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.4px;
}

/* Safari draws its own disclosure triangle unless this is suppressed. */
.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary:hover {
  color: var(--blue);
}

.faq-item > summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* A plus that becomes a minus, drawn from two bars so it needs no icon. */
.faq-marker {
  flex: 0 0 auto;
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: 5px;
}

.faq-marker::before,
.faq-marker::after {
  content: "";
  background: var(--blue);
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  transform: translateY(-50%);
}

.faq-marker::after {
  transform: translateY(-50%) rotate(90deg);
  transition: opacity .18s ease, transform .18s ease;
}

.faq-item[open] .faq-marker::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0);
}

.faq-answer {
  padding: 0 0 26px;
  max-width: 62ch;
}

.faq-answer p {
  color: #4a5c74;
  font-size: 16px;
  line-height: 1.65;
}

.faq-answer p + p {
  margin-top: 14px;
}

@media (width<=900px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-side > p {
    max-width: none;
  }
}

@media (width<=640px) {
  .faq-item > summary {
    font-size: 17px;
    gap: 16px;
  }

  .faq-answer p {
    font-size: 15px;
  }
}

/* ---- Header spacing for six nav items ---------------------------------
   "Questions" was the sixth item, and at the original spacing the header
   ran past the container in both languages — measured at 1280px: English
   57px over, Vietnamese 99px over. Reclaimed by tightening the three gaps
   rather than by cutting a nav label, since the labels are the site's
   voice. Vietnamese also got shorter nav labels in translations.js.

   Scoped to the widths where the desktop nav is actually shown. Unscoped,
   these override the narrower breakpoints' own header spacing — which put
   the burger button 4px past the viewport at 375px. */

@media (width>=1251px) {
  .desktop-nav {
    gap: 18px;
  }

  .header-inner {
    gap: 22px;
  }

  .header-cta {
    gap: 12px;
    padding: 13px 14px;
  }
}

/* Grid items default to min-width:auto, so a wide child can force its
   column past the container instead of scrolling inside it. The schedule
   table is 432px at its narrowest — the Vietnamese status labels ("Còn chỗ"
   against "open") make it ~100px wider than the English one — so on /vi/ at
   375px the whole left column stretched to 432px and .register's overflow
   clipped the intro text and the table's right edge. With min-width:0 the
   column takes the container's width and the table scrolls in its own
   wrapper, which already has overflow-x:auto for exactly this. */
.register-grid > * {
  min-width: 0;
}

/* ---- Photographs -------------------------------------------------------
   Sources are in ~/Documents/Photos; the web copies in public/photos were
   made with, for example:
     sips -Z 1400 -s format jpeg -s formatOptions 76 in.jpg --out band.jpg
   Nothing here puts text on top of an image: at the opacity needed to see a
   photograph, body copy sitting on it loses contrast line by line. */

/* The hero photograph carries a blue scrim heavy enough to keep the
   headline and the yellow button legible. Set as a background rather than an
   <img> so the scrim and the image scale together. */
.hero {
  background-image:
    linear-gradient(105deg, rgba(14, 38, 92, .93) 0%, rgba(20, 54, 140, .8) 55%, rgba(25, 72, 189, .62) 100%),
    url(photos/hero.jpg);
  background-position: center right;
  background-size: cover;
}

/* The ambient washes were the hero's only texture; with a photograph behind
   them they compete, so they are dialled back rather than removed. */
.hero .ambient-background {
  opacity: .35;
}

/* Chapter break between the approach and the programmes. Full bleed, so it
   deliberately ignores the container width.

   The height scales with the width so the crop stays the same shape at any
   size, rather than turning into a letterbox slice on a wide screen. The
   photograph has the four faces across its middle, so it is positioned at
   45% — a centred crop cut the tops of their heads, and anchoring to the top
   filled the band with ceiling and whiteboard. */
.photo-band {
  /* Proportional to the width, with no upper cap. A clamp() was wrong here:
     capping the height while `cover` keeps scaling the image with the window
     means the wider the screen, the smaller the slice of photograph on show —
     520px of a 1152px-tall cover is 45% of the frame and cuts the students'
     hands off, where the same 520px at 1180px wide showed 57% and did not.
     44vw keeps two thirds of the frame visible at every width. */
  height: max(320px, 44vw);
  background-position: center 50%;
  background-size: cover;
}

/* A photograph of each class, at the top of its own card. It is the card's
   first subgrid row, hence the row-count comment above.

   The photo runs out to the card's edges, so it has to cancel the card's
   padding — and that padding changes at two breakpoints (30 / 24 / 25px).
   Mirroring it in a variable keeps the two in step; hard-coding -30px left
   the photo hanging 4px over each edge on a phone. */
.programme-card {
  --card-pad: 30px;
}

@media (width<=960px) {
  .programme-card {
    --card-pad: 24px;
  }
}

@media (width<=640px) {
  .programme-card {
    --card-pad: 25px;
  }
}

/* Tall enough to show the room rather than a letterbox slice of it, and
   anchored to the top of the frame: these photographs have the whiteboard
   and people's heads in the upper half, which a centred crop cut off. */
.programme-photo {
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
  width: calc(100% + 2 * var(--card-pad));
  max-width: calc(100% + 2 * var(--card-pad));
  border-bottom: 1px solid var(--line);
}

/* Photographs behind the principles were tried and removed: at any opacity
   low enough to keep body copy readable they were invisible, and at any
   opacity where the image read, the text contrast shifted line by line as
   the paragraph crossed light and dark parts of the photograph. */

@media (width<=760px) {
  /* Stacked cards are narrower, so the same crop shows less; a shorter
     photograph keeps the card from opening with a wall of image. */
  .programme-photo {
    height: 210px;
  }
}

/* Price, format and time in the hero. Small and monospace like the site's
   other metadata, so it reads as a fact rather than a second headline. */
.hero-terms {
  color: #cdd9f5;
  letter-spacing: .055em;
  margin-top: 10px;
  font-family: Courier New, monospace;
  font-size: 12px;
  line-height: 1.6;
}

@media (width<=640px) {
  .hero-terms {
    font-size: 11px;
  }
}

/* The comparison table and the principles are both dense, left-aligned text
   blocks with no heading between them, so a full 100px + 100px of section
   padding read as a hole in the page — 252px from the last table row to the
   first principle. Scoped with :has() to this pairing rather than set on the
   sections outright: if the running order in build.pl changes again, the rule
   stops applying instead of leaving a section short of air. */
#platform:has(+ #why) {
  padding-bottom: 60px;
}

#platform + #why {
  padding-top: 24px;
}

@media (width<=1190px) {
  #platform:has(+ #why) {
    padding-bottom: 48px;
  }

  #platform + #why {
    padding-top: 20px;
  }
}

/* ---- The full-review dialog on phones ---------------------------------
   It was sized with 84vh. On mobile browsers vh refers to the viewport as
   it is with the URL bar hidden, so the dialog could be taller than the
   area actually on screen: a <dialog> is centred, so the head and footer
   were pushed off both edges and the quote was readable through a slot a
   line or two high. dvh tracks the visible area instead. The plain vh line
   stays first as a fallback for browsers without dvh. */
@media (width<=640px) {
  .review-dialog {
    width: min(560px, 100% - 20px);
    max-height: min(84vh, 780px);
    max-height: min(88dvh, 780px);
  }

  /* The head and foot are fixed height, so every pixel taken off them is a
     pixel given to the quote. */
  .review-dialog-head {
    gap: 10px;
    padding: 12px 12px 10px;
  }

  .review-dialog .student-avatar {
    width: 42px;
    height: 46px;
    font-size: 18px;
  }

  .review-dialog-close {
    width: 40px;
    height: 40px;
  }

  .review-dialog blockquote {
    padding: 16px 14px;
    font-size: 16px;
    line-height: 1.68;
  }

  .review-dialog-foot {
    padding: 10px 12px 12px;
  }
}

/* ---- Essays ------------------------------------------------------------
   Long-form Vietnamese prose at /vi/essays/. A narrow measure, larger type
   and more leading than the marketing pages: these are read start to finish,
   not scanned. The chrome is deliberately thinner — no motion carousel, no
   language switcher, since there is no English version to switch to. */

.essay-body {
  background: var(--background);
}

.essay-header {
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.essay-header-inner {
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  display: flex;
}

.essay-header .brand {
  font-size: 21px;
}

.essay-nav {
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-size: 14px;
  display: flex;
}

.essay-nav a:hover {
  color: var(--blue);
  text-underline-offset: 6px;
  text-decoration: underline;
}

.essay-nav .essay-cta {
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 8px 14px;
  font-weight: 500;
}

.essay-nav .essay-cta:hover {
  color: #fff;
  background: var(--blue);
  text-decoration: none;
}

/* ---- the index */
.essay-index {
  padding: 72px 0 96px;
}

.essay-index h1 {
  letter-spacing: -2px;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.08;
}

.essay-index-lead {
  color: #586c85;
  max-width: 46ch;
  margin-top: 14px;
  font-size: 18px;
}

.essay-list {
  max-width: 760px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}

.essay-list li {
  border-top: 1px solid var(--line);
}

.essay-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.essay-list a {
  padding: 26px 0;
  display: block;
}

.essay-list h2 {
  letter-spacing: -.6px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.3;
}

.essay-list a:hover h2 {
  color: var(--blue);
}

.essay-list p {
  color: #4a5c74;
  max-width: 62ch;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
}

.essay-meta {
  color: #7c8da4;
  letter-spacing: .055em;
  margin-top: 12px;
  font-family: Courier New, monospace;
  font-size: 12px;
  display: block;
}

/* ---- a single essay */
.essay {
  padding: 56px 0 96px;
}

.essay-article {
  max-width: 680px;
}

.essay-back {
  color: #65758b;
  letter-spacing: .055em;
  font-family: Courier New, monospace;
  font-size: 12px;
}

.essay-back:hover {
  color: var(--blue);
}

.essay-article h1 {
  letter-spacing: -1.6px;
  margin-top: 22px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.14;
}

.essay-article > .essay-meta {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 14px 0 26px;
}

.essay-article h2 {
  letter-spacing: -.8px;
  margin: 46px 0 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.3;
}

.essay-article p {
  color: #25344d;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.75;
}

.essay-article h2 + p {
  margin-top: 14px;
}

.essay-article ul {
  margin: 20px 0 0;
  padding-left: 22px;
}

.essay-article li {
  color: #25344d;
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.7;
}

.essay-article strong {
  font-weight: 600;
}

/* ---- previous / next */
.essay-prevnext {
  border-top: 1px solid var(--line);
  gap: 20px;
  margin-top: 60px;
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.essay-prevnext a {
  color: var(--foreground);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

.essay-prevnext a:hover {
  color: var(--blue);
}

.essay-prevnext span {
  color: #7c8da4;
  letter-spacing: .055em;
  margin-bottom: 6px;
  font-family: Courier New, monospace;
  font-size: 11px;
  font-weight: 400;
  display: block;
}

.essay-next {
  text-align: right;
}

/* Only one of the two is present on the first and last essay, so the next
   link has to be told to stay on the right. */
.essay-prevnext .essay-next:only-child {
  grid-column: 2;
}

@media (width<=640px) {
  .essay-article p,
  .essay-article li {
    font-size: 17px;
  }

  .essay-nav {
    gap: 14px;
    font-size: 13px;
  }

  .essay-nav .essay-cta {
    padding: 7px 11px;
  }

  .essay-prevnext {
    grid-template-columns: 1fr;
  }

  .essay-next,
  .essay-prevnext .essay-next:only-child {
    text-align: left;
    grid-column: 1;
  }
}

/* On the essay index: the English pages link here, and the essays are in
   Vietnamese, so an English reader is told before they start reading. */
.essay-index-note {
  color: #7c8da4;
  letter-spacing: .055em;
  margin-top: 10px;
  font-family: Courier New, monospace;
  font-size: 12px;
}

/* =========================================================================
   Essay teaser on the main pages. Deliberately quiet: three titles and a
   link, sitting between "why" and the registration form, so it reads as a
   note on the way down rather than a second thing being sold.
   ========================================================================= */
.essays-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  align-items: start;
  gap: 80px;
}

.essays-teaser-side h2 {
  margin-bottom: 18px;
}

.essays-teaser-side > p {
  color: #586c85;
  max-width: 300px;
  font-size: 16px;
}

.essays-teaser-note {
  margin-top: 10px;
  font-size: 14px;
}

.essays-teaser-all {
  color: var(--blue);
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
}

.essays-teaser-all:hover {
  text-decoration: underline;
}

.essays-teaser-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.essays-teaser-list > li {
  border-top: 1px solid var(--line);
}

.essays-teaser-list > li:last-child {
  border-bottom: 1px solid var(--line);
}

.essays-teaser-list > li > a {
  color: inherit;
  padding: 22px 0;
  display: block;
}

.essays-teaser-list h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
}

.essays-teaser-list > li > a:hover h3 {
  color: var(--blue);
}

.essays-teaser-list p {
  color: #586c85;
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.essays-teaser-list .essay-meta {
  margin-top: 10px;
}

/* Stacked, the heading block and the list are one column: the side column's
   max-width would otherwise leave the lead text short of the list below it. */
@media (width<=900px) {
  .essays-teaser-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .essays-teaser-side > p {
    max-width: none;
  }
}

/* On a phone the three blurbs ran to 1.3 screens, which is a lot of reading
   for a signpost sitting directly above the registration form. Two lines is
   enough to tell someone whether the essay is for them. */
@media (width<=640px) {
  .essays-teaser-list p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }
}

/* The review dialog on phones: one scrolling surface, not a nested one.
   ------------------------------------------------------------------------
   It used to be a flex column — fixed head, fixed foot, blockquote with
   flex: 1 and its own overflow. That relies on the browser resolving a
   flex-grow child inside a container whose height is auto but capped by
   max-height, and Safari resolves it to almost nothing: the quote collapsed
   to a one-line slot you had to scroll inside, which is what was reported on
   an iPhone while Chrome showed 16 to 21 lines.

   So on narrow screens the dialog itself scrolls and the quote is laid out at
   its natural height, which no flex resolution can collapse. The head and
   foot stick to the edges so the name and the button stay reachable. */
@media (width<=640px) {
  .review-dialog[open] {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .review-dialog-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
  }

  .review-dialog blockquote {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  .review-dialog-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
  }
}