/* ==========================================================================
   Photon Academy home page 2027 look. Loaded after home-2026.css.
   Hero with 3D school papers, class finder band, reviews band with the 3D drum,
   app section, Photon Resources window. Plain CSS, transforms only.
   ========================================================================== */
.hm-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Hero ---------- */
.hm-hero27 {
  padding: 0;
}
.hm-hero27__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 680px;
  min-height: 786px;
}
.hm-hero27__l {
  min-width: 0;
  padding: 36px 60px 40px max(var(--s26-gut), calc((100vw - 1240px) / 2));
  display: flex;
  flex-direction: column;
}
.hm-hero27 .hm-hero__eb {
  margin: 0;
}
.hm-hero27 h1 {
  margin: 18px 0 0;
  font-size: clamp(44px, 4.72vw, 68px);
  line-height: 1.04;
  font-weight: 480;
  letter-spacing: -0.022em;
}
.hm-hero27 h1 em {
  color: var(--goldt);
}
.hm-hero27 .hm-hero__body {
  margin-top: 20px;
}
.hm-hero27 .hm-lede {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.55;
}
.hm-hero27 .hm-hero__cta {
  margin-top: 26px;
}
.hm-hero27 .hm-hero__cta .hm-cta-row {
  margin-top: 0;
  gap: 12px 14px;
  align-items: center;
}
.hm-hero27 .s26-btn--gold {
  height: 58px;
  padding-inline: 28px;
  font-size: 17.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(138, 90, 0, 0.9);
}
.hm-hero27 .s26-wa {
  height: 58px;
  padding: 0 24px;
  border: 1.5px solid #c5cedb;
  border-radius: 3px;
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 16.5px;
  font-weight: 600;
}
.hm-hero27 .s26-wa:hover {
  border-color: var(--ink);
}
.hm-hero27 .s26-wa .t {
  border-bottom: 0;
  box-shadow: none;
  text-decoration: none;
}
.hm-hero27__sub {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.hm-hero27__sub .hm-rs,
.hm-hero27__sub .hm-hero__path {
  margin: 0;
  font-size: 14px;
}
.hm-hero27__sub .hm-hero__path {
  font-size: 15px;
  font-weight: 600;
}
.hm-founder {
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  text-decoration: none;
  color: var(--ink);
}
.hm-founder:hover .hm-founder__u {
  color: var(--ink);
}
.hm-founder__who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.hm-founder__who img {
  width: 68px;
  height: 68px;
  flex: none;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 3px;
}
.hm-founder__k {
  display: block;
  font: 600 12px/1.2 var(--fu);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.hm-founder__n {
  display: block;
  margin-top: 3px;
  font: 500 22px/1.15 var(--fd);
}
.hm-founder__s {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--ink2);
}
.hm-founder__sc {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hm-founder__num {
  font: 500 38px/1 var(--fd);
}
.hm-founder__r {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hm-founder__u {
  font-size: 13.5px;
  color: var(--ink2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.hm-hero27 .hm-ledger {
  margin-top: 0;
  border-top: 0;
  padding-top: 16px;
}
.hm-hero27 .hm-ledger li {
  padding: 0 10px 0 0;
}
.hm-hero27 .hm-ledger li + li {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.hm-hero27 .hm-ledger .hm-fg {
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
}
.hm-hero27 .hm-ledger .hm-fg--t {
  font-style: normal;
  font-size: 22px;
}
.hm-hero27 .hm-ledger .hm-fg--t .hm-fc {
  margin-top: 4px;
  font-family: var(--fu);
  font-size: 13.5px;
  color: var(--ink2);
  letter-spacing: 0;
}
.hm-hero27 .hm-ledger .hm-fc {
  margin-top: 4px;
  font-size: 13.5px;
  display: block;
}

/* ---------- Stage and 3D papers ---------- */
.hm-stage {
  position: relative;
  overflow: hidden;
  background: #0D1F3C; background: radial-gradient(540px 440px at 58% 44%, #1B3A6B 0%, #0D1F3C 72%);
  color: #fff;
  min-width: 0;
}
.hm-stage__tag {
  position: absolute;
  left: 44px;
  top: 24px;
  margin: 0;
  z-index: 3;
  font: italic 400 24px/1.22 var(--fd);
  color: #fff;
}
.hm-stage__tag em {
  color: var(--gold);
}
.hm-pp {
  --W: 620px;
  --H: 620px;
  --L: 44px;
  --T: 150px;
  --rx: 8deg;
  --ry: -22deg;
  --sc: 1;
  --dx: 42px;
  --dy: -56px;
  --dz: -110px;
  --ct: 568px;
  --tx: 0deg;
  --ty: 0deg;
  position: relative;
  width: var(--W);
  height: var(--H);
  margin: -6px 0 0 30px;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  color: var(--ink);
}
.hm-pp__tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  transform: rotateX(var(--tx)) rotateY(var(--ty));
}
.hm-pp__float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: hmFloat 10s ease-in-out infinite;
}
.hm-pp__stack {
  position: absolute;
  left: var(--L);
  top: var(--T);
  width: 300px;
  height: 400px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(var(--sc));
}
.hm-sheet {
  --d: 0;
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 26px 50px -18px rgba(2, 8, 22, 0.62), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
  transform: translate3d(calc(var(--d) * var(--dx)), calc(var(--d) * var(--dy)), calc(var(--d) * var(--dz)));
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.8s;
}
.hm-sheet[data-d="0"] {
  --d: 0;
  background: #fff;
}
.hm-sheet[data-d="1"] {
  --d: 1;
  background: #e7ecf3;
}
.hm-sheet[data-d="2"] {
  --d: 2;
  background: #d5dde9;
}
.hm-sheet[data-d="3"] {
  --d: 3;
  background: #c3cedd;
}
.hm-sheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 16px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hm-sheet__bar span + span {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
}
.hm-sheet__b {
  padding: 16px 20px 0;
}
.hm-sheet__b p {
  margin: 0;
}
.hm-sheet__k {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink2);
}
.hm-sheet__t {
  margin-top: 6px !important;
  font: 560 30px/1.05 var(--fd);
  letter-spacing: -0.01em;
}
.hm-sheet__l {
  margin-top: 3px !important;
  font-size: 13px;
  color: var(--ink2);
}
.hm-sheet__rows {
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.hm-sheet__r {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.32;
  font-weight: 500;
}
.hm-sheet__r span:first-child {
  padding-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--goldt);
}
.hm-sheet__f {
  margin-top: 10px !important;
  font: italic 400 12.5px/1.35 var(--fd);
  color: var(--ink2);
}
.hm-pp__chips {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--ct);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.hm-pp__lbl {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c7d2e3;
}
.hm-chip {
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  border-radius: 4px;
  font: 600 14px var(--fu);
  cursor: pointer;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  transition: background-color 0.25s, color 0.25s;
}
.hm-chip:hover {
  border-color: #fff;
}
.hm-chip:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.hm-chip[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.hm-stage__foot {
  position: relative;
  margin: 0 44px;
  padding: 14px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hm-stage__two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.hm-stage__two p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #dce4f0;
}
.hm-stage__two strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.hm-stage .hm-hero__small {
  margin: 12px 0 0;
  max-width: none;
  font-size: 13px;
  line-height: 1.45;
  color: #c7d2e3;
}
.hm-stage .hm-hero__small strong {
  color: #fff;
}
.hm-stage .hm-hero__small a {
  color: #fff;
}

@keyframes hmFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translate3d(0, -7px, 0) rotateX(1.1deg) rotateY(2.4deg);
  }
}

/* ---------- Class finder band ---------- */
.hm-findband {
  padding: 56px 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.hm-findband .hm-hero__find {
  margin: 0;
}
.hm-findband .s26-fx {
  box-shadow: 0 30px 50px -40px rgba(13, 31, 60, 0.5);
}
/* Compact finder (QA 12 Nov): title sits on top of the choices, the choices
   wrap side by side, the result keeps its own column. */
@media (min-width: 760px) {
  .hm-findband .s26-fx {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: stretch;
  }
  .hm-findband .s26-fx__body {
    display: contents;
  }
  .hm-findband .s26-fx__h {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 4px 14px;
    padding: 24px 28px 0;
  }
  .hm-findband .s26-fx__c {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 16px 20px;
    padding: 18px 28px 26px;
  }
  .hm-findband .s26-fx__c > [data-st="p"],
  .hm-findband .s26-fx__c > [data-st="sc"] {
    flex: 1 1 auto;
  }
  .hm-findband .s26-fx__c > [data-st="s"],
  .hm-findband .s26-fx__c > .s26-fx__row,
  .hm-findband .s26-fx__c > .s26-fx__go {
    flex: 1 1 100%;
  }
  .hm-findband .s26-fx__r {
    grid-column: 2;
    grid-row: 1 / 3;
    padding: 24px 28px;
    border-left: 1px solid var(--line);
    border-top: 0;
  }
  .hm-findband .s26-fx__a {
    margin-top: 16px;
  }
  .hm-findband .s26-fx__k {
    margin-top: 16px;
  }
  .hm-findband .s26-fx__k dt {
    padding: 8px 0;
  }
  .hm-findband .s26-fx__k dd {
    padding: 6px 0;
  }
}
/* Wide screens: the result splits into "act" and "facts" side by side. */
@media (min-width: 1340px) {
  .hm-findband .s26-fx {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
  .hm-findband .s26-fx__chips {
    gap: 7px;
  }
  .hm-findband .s26-fx__chip {
    padding: 0 12px;
  }
  .hm-findband .s26-fx__r {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-auto-rows: min-content;
    column-gap: 28px;
    align-content: start;
  }
  .hm-findband .s26-fx__r > * {
    grid-column: 1;
  }
  .hm-findband .s26-fx__r > .s26-fx__k {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: start;
    margin-top: 0;
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .hm-findband .s26-fx__r > .s26-fx__k .s26-fx__fee {
    white-space: normal;
  }
  .hm-findband .s26-fx__tm {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .hm-findband .s26-fx__lk {
    flex-direction: column;
    align-items: flex-start;
  }
  .hm-findband .s26-fx__lk a {
    min-height: 40px;
  }
}
@media (max-width: 599px) {
  .hm-findband {
    padding: 36px 0;
  }
}

/* ---------- Reviews band ---------- */
.hm-revband {
  background: var(--chalk);
  padding: 72px 0 68px;
  overflow: hidden;
}
.hm-rev {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.hm-rev__l {
  min-width: 0;
}
.hm-rev__l .hm-rh {
  margin-bottom: 18px;
}
.hm-rev__score {
  margin: 0;
}
.hm-rev__score a {
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--ink);
}
.hm-rev__score strong {
  font: 460 104px/0.86 var(--fd);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.hm-rev__score .hm-stars {
  width: 150px;
  height: 27px;
}
.hm-rev__g {
  display: block;
  margin-top: 9px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.hm-rev__score a {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
  justify-content: start;
}
.hm-rev__score strong {
  grid-row: 1 / 3;
}
.hm-rev__score .hm-stars {
  align-self: end;
}
.hm-rev__g {
  align-self: start;
}
.hm-revband .hm-hero__cred {
  margin: 26px 0 0;
  font: 420 25px/1.3 var(--fd);
  color: var(--ink);
}
.hm-revband .hm-hero__cred strong {
  font-weight: 600;
}
.hm-revband .hm-hero__ph {
  display: block;
  grid-area: auto;
  margin: 30px 0 0;
}
.hm-revband .hm-hero__ph img {
  width: 100%;
  max-width: 470px;
  height: 250px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 42%;
  border-radius: 3px;
}
.hm-revband .hm-hero__ph figcaption {
  margin-top: 10px;
  font: italic 400 14px/1.4 var(--fd);
  color: var(--ink2);
}
.hm-rev__r {
  position: relative;
  height: 500px;
  min-width: 0;
}
.hm-drumwrap {
  --fc-w: 236px;
  --fc-img: 268px;
  --fc-l: 20px;
  --fc-t: 136px;
  --dr-l: 286px;
  --dr-t: 110px;
  --dr-w: 318px;
  --dr-h: 400px;
  --fc-h: 148px;
  --R: 190px;
  --q: 15.5px;
  --fade: 84px;
  --tx: 0deg;
  --ty: 0deg;
  position: absolute;
  left: 50px;
  top: -74px;
  width: 620px;
  height: 620px;
}
.hm-fcard {
  position: absolute;
  left: var(--fc-l);
  top: var(--fc-t);
  width: var(--fc-w);
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 50px -26px rgba(13, 31, 60, 0.55);
  transform: perspective(1100px) rotateY(calc(9deg + var(--ty))) rotateX(var(--tx));
  transition: transform 0.3s ease-out;
}
.hm-fcard img {
  display: block;
  width: 100%;
  height: var(--fc-img);
  object-fit: cover;
  object-position: 50% 12%;
}
.hm-fcard figcaption {
  padding: 14px 16px 16px;
}
.hm-fcard span {
  display: block;
  white-space: nowrap;
}
.hm-fcard__k {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.hm-fcard__n {
  margin-top: 4px;
  font: 520 23px/1.12 var(--fd);
}
.hm-fcard__s {
  margin-top: 3px;
  font-size: 13.5px;
  color: var(--ink2);
}
.hm-drum {
  position: absolute;
  left: var(--dr-l);
  top: var(--dr-t);
  width: var(--dr-w);
  height: var(--dr-h);
  perspective: 1000px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  margin-left: -8px;
  padding-inline: 8px;
  box-sizing: content-box;
}
.hm-drum__in {
  position: absolute;
  left: 8px;
  top: calc((var(--dr-h) - var(--fc-h)) / 2);
  width: var(--dr-w);
  height: var(--fc-h);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--R) * -1));
}
.hm-drum__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: hmSpin 32s ease-in-out infinite;
}
.hm-face {
  position: absolute;
  inset: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 15px 18px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 14px 26px -18px rgba(13, 31, 60, 0.5);
  transform: rotateX(calc(var(--i) * 45deg)) translateZ(var(--R));
}
.hm-face .hm-stars {
  width: 66px;
  height: 12px;
}
.hm-face blockquote {
  margin: 8px 0 0;
  font: italic 420 var(--q) / 1.34 var(--fd);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
}
.hm-face figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-face figcaption strong {
  color: var(--ink);
  font-weight: 600;
}
@keyframes hmSpin {
  0%,
  9.5% {
    transform: rotateX(0deg);
  }
  12.5%,
  22% {
    transform: rotateX(-45deg);
  }
  25%,
  34.5% {
    transform: rotateX(-90deg);
  }
  37.5%,
  47% {
    transform: rotateX(-135deg);
  }
  50%,
  59.5% {
    transform: rotateX(-180deg);
  }
  62.5%,
  72% {
    transform: rotateX(-225deg);
  }
  75%,
  84.5% {
    transform: rotateX(-270deg);
  }
  87.5%,
  97% {
    transform: rotateX(-315deg);
  }
  100% {
    transform: rotateX(-360deg);
  }
}

/* ---------- Three ways: the photo moved up into the reviews band ---------- */
.hm-wopen {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.hm-wopen__fig {
  display: none;
}

/* ---------- Tablet (600 to 1199) ---------- */
@media (max-width: 1199px) {
  .hm-hero27__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hm-hero27__l {
    padding: 36px var(--s26-gut) 36px;
  }
  .hm-stage {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    grid-template-areas: "pp tag" "pp foot";
    grid-template-rows: auto 1fr;
    column-gap: 20px;
    padding-inline: max(0px, calc((100% - 1240px) / 2));
  }
  .hm-stage__tag {
    position: static;
    grid-area: tag;
    padding: 40px var(--s26-gut) 0 24px;
  }
  .hm-pp {
    --W: 520px;
    --H: 548px;
    --L: 24px;
    --T: 128px;
    --rx: 8deg;
    --ry: -20deg;
    --sc: 0.84;
    --dx: 34px;
    --dy: -48px;
    --dz: -96px;
    --ct: 500px;
    grid-area: pp;
    margin: 0;
  }
  .hm-stage__foot {
    grid-area: foot;
    margin: 0 var(--s26-gut) 0 24px;
    padding: 0 0 28px;
    border-top: 0;
    align-self: start;
  }
  .hm-stage__two {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hm-stage__two p {
    padding: 14px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 15.5px;
  }
  .hm-stage .hm-hero__small {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 14px;
  }
  .hm-rev {
    grid-template-columns: minmax(0, 1fr) 358px;
    gap: 24px;
    align-items: start;
  }
  .hm-rev__r {
    height: 318px;
    margin-top: 16px;
  }
  .hm-drumwrap {
    --fc-w: 136px;
    --fc-img: 156px;
    --fc-l: 0px;
    --fc-t: 40px;
    --dr-l: 148px;
    --dr-t: 6px;
    --dr-w: 210px;
    --dr-h: 306px;
    --fc-h: 124px;
    --R: 156px;
    --q: 13.5px;
    --fade: 58px;
    left: 0;
    top: 0;
    width: 358px;
    height: 318px;
  }
  .hm-fcard figcaption {
    padding: 9px 10px 11px;
  }
  .hm-fcard__n {
    font-size: 15.5px;
  }
  .hm-fcard__k {
    font-size: 10px;
  }
  .hm-fcard__s {
    font-size: 12px;
  }
  .hm-face {
    padding: 11px 13px 10px;
  }
  .hm-face__m {
    font-size: 0;
  }
  .hm-face__m::before {
    content: "Nov 2025 IB Results";
    font-size: 12px;
  }
  .hm-revband .hm-hero__cred {
    font-size: 24px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 599px) {
  .hm-hero27__l {
    padding: 24px var(--s26-gut) 28px;
  }
  .hm-hero27 h1 {
    font-size: clamp(38px, 11vw, 46px);
  }
  .hm-hero27 .hm-lede {
    font-size: 17px;
  }
  .hm-hero27 .s26-btn--gold {
    width: 100%;
    justify-content: center;
    height: 54px;
  }
  .hm-hero27 .s26-wa {
    height: 54px;
  }
  .hm-founder {
    margin-top: 20px;
    padding: 12px 0;
  }
  .hm-founder__who img {
    width: 48px;
    height: 48px;
  }
  .hm-founder__k {
    display: none;
  }
  .hm-founder__n {
    font-size: 18px;
  }
  .hm-founder__num {
    font-size: 30px;
  }
  .hm-founder__u {
    font-size: 12.5px;
  }
  .hm-stage {
    display: block;
    padding: 26px 0 0;
  }
  .hm-stage__tag {
    position: static;
    padding: 0 var(--s26-gut);
    font-size: 21px;
  }
  .hm-stage__tag br {
    display: none;
  }
  .hm-pp {
    --W: 358px;
    --H: 524px;
    --L: 6px;
    --T: 126px;
    --rx: 6deg;
    --ry: -14deg;
    --sc: 0.92;
    --dx: 3px;
    --dy: -39px;
    --dz: -80px;
    --ct: 0px;
    --tx: 0deg;
    --ty: 0deg;
    margin: 0 auto;
    max-width: 100%;
  }
  .hm-pp__lbl,
  .hm-chip__x {
    display: none;
  }
  .hm-chip {
    padding: 0 12px;
    font-size: 13.5px;
  }
  .hm-stage__foot {
    margin: 0 var(--s26-gut);
    padding: 8px 0 28px;
  }
  .hm-stage__two p,
  .hm-stage .hm-hero__small {
    font-size: 16px;
  }
  .hm-revband {
    padding: 48px 0 40px;
  }
  .hm-rev {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .hm-rev__score strong {
    font-size: 76px;
  }
  .hm-rev__score .hm-stars {
    width: 112px;
    height: 20px;
  }
  .hm-rev__g {
    font-size: 16px;
  }
  .hm-revband .hm-hero__cred {
    font-size: 21px;
    margin-top: 20px;
  }
  .hm-rev__l {
    display: contents;
  }
  .hm-rev__l .hm-rh {
    order: 1;
  }
  .hm-rev__score {
    order: 2;
  }
  .hm-revband .hm-hero__cred {
    order: 3;
  }
  .hm-rev__r {
    order: 4;
    margin: 20px auto 0;
    width: 358px;
    max-width: 100%;
  }
  .hm-revband .hm-hero__ph {
    order: 5;
    margin-top: 24px;
  }
  .hm-rev {
    display: flex;
    flex-direction: column;
  }
  .hm-revband .hm-hero__ph img {
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .hm-pp__float,
  .hm-drum__spin {
    animation: none;
  }
  .hm-sheet,
  .hm-pp__tilt,
  .hm-fcard {
    transition: none;
  }
}

/* ---------- fixes round 1 ---------- */
.hm-hero27 .hm-ledger {
  display: flex;
  justify-content: space-between;
  gap: 0;
}
.hm-hero27 .hm-ledger li {
  flex: 0 1 auto;
  white-space: nowrap;
}
.hm-hero27 .hm-ledger li + li {
  padding-left: 18px;
}
.hm-hero27 .hm-ledger .hm-fg:not(.hm-fg--t) {
  white-space: nowrap;
}
.hm-findband .s26-fx__t {
  font-size: 26px;
}

/* ---------- November band: navy, two columns ---------- */
.hm-notice--slim {
  background: var(--ink);
  color: #fff;
  border: 0;
}
.hm-notice--slim .hm-notice__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-block: 60px;
}
.hm-notice--slim .hm-notice__tag {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  align-self: end;
}
.hm-notice--slim .hm-notice__tag::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--gold);
}
.hm-notice--slim .hm-notice__tag p {
  margin: 0;
  font: 600 12.5px/1.2 var(--fu);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.hm-notice--slim .hm-notice__tag p + p::before {
  content: "· ";
}
.hm-notice--slim .hm-notice__main {
  display: contents;
}
.hm-notice--slim h2 {
  grid-column: 1;
  grid-row: 2 / 4;
  align-self: start;
  max-width: 14em;
  font: 460 clamp(30px, 2.8vw, 40px) / 1.1 var(--fd);
  letter-spacing: -0.018em;
  color: #fff;
}
.hm-notice--slim .hm-notice__main p {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #dce4f0;
  max-width: none;
}
.hm-notice--slim .hm-notice__act {
  grid-column: 2;
  grid-row: 3;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
}
.hm-notice--slim .s26-btn {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.hm-notice--slim .s26-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
}
.hm-notice--slim .s26-tl {
  color: #fff;
}
@media (max-width: 899px) {
  .hm-notice--slim .hm-notice__in {
    grid-template-columns: minmax(0, 1fr);
    padding-block: 44px;
  }
  .hm-notice--slim h2,
  .hm-notice--slim .hm-notice__main p,
  .hm-notice--slim .hm-notice__act,
  .hm-notice--slim .hm-notice__tag {
    grid-column: 1;
    grid-row: auto;
  }
  .hm-notice--slim .hm-notice__main p {
    margin-top: 16px;
  }
}

/* ---------- App section: Learning Studio card and 3D phones ---------- */
.hm-app__get--ls {
  margin-top: 22px;
}
.hm-app__get--ls .hm-app__icon {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.hm-app__ext {
  color: #fff;
}
.hm-app__stage {
  perspective: 1700px;
  max-width: 560px;
  aspect-ratio: 560 / 540;
}
.hm-app__stage .hm-app__ph {
  --z: 0px;
  width: 36.4%;
  padding: 9px;
  border-radius: 36px;
  background: #060d1c;
  box-shadow: 0 44px 70px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
}
.hm-app__stage .hm-app__ph img {
  border-radius: 28px;
}
.hm-app__ph--l {
  left: 0;
  top: 11.5%;
  transform: translateZ(140px);
}
.hm-app__ph--c {
  left: 31.8%;
  top: 1.9%;
  transform: translateZ(40px);
}
.hm-app__ph--r {
  left: auto;
  right: 0;
  top: 8.8%;
  transform: translateZ(-60px);
}
.hm-app__stage {
  transform-style: preserve-3d;
}
.hm-app__stage {
  animation: hmPhones 11s ease-in-out infinite;
}
.hm-app__stage {
  transform: rotateX(6deg) rotateY(-20deg);
}
@keyframes hmPhones {
  0%,
  100% {
    transform: rotateX(6deg) rotateY(-20deg) translate3d(0, 0, 0);
  }
  50% {
    transform: rotateX(7deg) rotateY(-16deg) translate3d(0, -8px, 0);
  }
}
@media (max-width: 1023px) {
  .hm-app__stage {
    margin-block: 36px 6px;
  }
}
@media (max-width: 599px) {
  .hm-app__stage .hm-app__ph {
    padding: 5px;
    border-radius: 24px;
  }
  .hm-app__stage .hm-app__ph img {
    border-radius: 19px;
  }
}

/* ---------- Photon Resources: window, subjects, app row ---------- */
.hm-rx {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  gap: 0;
}
.hm-win {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.hm-win__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 14px;
  background: #e6ebf2;
  border-bottom: 1px solid var(--line);
}
.hm-win__dots {
  display: flex;
  gap: 7px;
}
.hm-win__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #b9c3d2;
}
.hm-win__url {
  flex: 1;
  max-width: 340px;
  margin-inline: auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13.5px;
  text-align: center;
  color: var(--ink2);
}
.hm-win__open {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.hm-win__body {
  padding: 16px 16px 20px;
  background: #eaf0fa;
}
.hm-ex__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 31, 60, 0.12);
}
.hm-ex__tab {
  min-height: 52px;
  padding: 6px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font-family: var(--fu);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}
.hm-ex__tab:focus-visible,
.hm-ex__o:focus-visible,
.hm-ex__flip:focus-visible {
  outline: 2px solid var(--goldt);
  outline-offset: 2px;
}
.hm-ex__tab[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}
.hm-ex__v {
  display: block;
  font-size: 15.5px;
  line-height: 1.15;
  font-weight: 700;
}
.hm-ex__w {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.2;
  opacity: 0.85;
}
.hm-ex__stage {
  position: relative;
  height: 440px;
  margin-top: 18px;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  column-gap: 8px;
}
.hm-ex__iso {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  overflow: visible;
  pointer-events: none;
}
.hm-ex__pl {
  --k: 0;
  position: absolute;
  left: -46px;
  top: 192px;
  width: 300px;
  height: 190px;
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1.5px rgba(13, 31, 60, 0.16), 22px 22px 34px -18px rgba(13, 31, 60, 0.28);
  transform-origin: 50% 50%;
  transform: scale(0.56) rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--k) * 88px));
  transition: box-shadow 0.7s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 12px;
}
.hm-ex__iso {
  perspective: 1400px;
}
.hm-ex__pl.is-on {
  box-shadow: 0 0 0 3px #c9973a, 26px 26px 40px -18px rgba(13, 31, 60, 0.38);
  transform: scale(0.56) rotateX(58deg) rotateZ(-38deg) translateZ(calc(var(--k) * 88px + 26px));
}
.hm-ex__pl b {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--goldt);
}
.hm-ex__pl .l1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.hm-ex__pl .l1 i {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--ink);
  box-sizing: border-box;
}
.hm-ex__pl .l1 i.on {
  background: var(--ink);
}
.hm-ex__pl u {
  display: block;
  height: 9px;
  margin-top: 9px;
  border-radius: 5px;
  background: #d6deea;
  text-decoration: none;
}
.hm-ex__pl .l1 u {
  margin: 0;
}
.hm-ex__pl em {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
}
.hm-ex__pl .bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 110px;
  margin-top: 12px;
  border-bottom: 2px solid var(--ink);
}
.hm-ex__pl .bars i {
  width: 24px;
  background: #c7d2e3;
}
.hm-ex__pl .bars i.g {
  background: #c9973a;
}
.hm-ex__pl--d {
  background: var(--ink);
}
.hm-ex__pl--d b {
  color: #e0b25c;
}
.hm-ex__pl .ln {
  display: block;
  margin-top: 12px;
}
.hm-ex__pl .ln u {
  background: #4a5d85;
}
.hm-ex__pl .ln .btn {
  display: block;
  width: 104px;
  height: 30px;
  margin-top: 16px;
  border-radius: 8px;
  background: #e0b25c;
}
.hm-ex__pl .ring {
  position: absolute;
  right: 20px;
  top: 50px;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  background: #fff;
}
.hm-ex__pl .ring::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 26px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 4px solid #b3261e;
  border-radius: 50%;
}
.hm-ex__cards {
  position: relative;
  perspective: 1500px;
  height: 100%;
  grid-column: 2;
}
.hm-ex__back {
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.hm-ex__back--1 {
  background: #cfdbee;
  transform: translate3d(22px, -18px, -110px);
}
.hm-ex__back--2 {
  background: #dde6f4;
  transform: translate3d(11px, -9px, -55px);
}
.hm-ex__c {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 22px 24px 78px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 31, 60, 0.12), 0 34px 60px -30px rgba(13, 31, 60, 0.5);
  font-size: 15px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(70px, -8px, -240px) rotateY(-40deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.7s;
}
.hm-ex__c.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.hm-ex__c p {
  margin: 0;
}
.hm-ex__c--flip {
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
}
.hm-ex__fl {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.hm-ex__fl.is-flipped {
  transform: rotateY(180deg);
}
.hm-ex__f {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 22px 24px 78px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(13, 31, 60, 0.12), 0 34px 60px -30px rgba(13, 31, 60, 0.5);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hm-ex__f--b {
  background: var(--ink);
  color: #fff;
  transform: rotateY(180deg);
}
.hm-ex__h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12.5px;
  font-weight: 700;
}
.hm-ex__h > span:first-child {
  color: var(--goldt);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hm-ex__h .m {
  margin-left: auto;
  font-weight: 600;
  color: var(--ink2);
}
.hm-ex__h .lv {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.hm-ex__h .lv i {
  width: 4px;
  background: var(--ink);
}
.hm-ex__h .lv i:nth-child(1) { height: 7px; }
.hm-ex__h .lv i:nth-child(2) { height: 10px; }
.hm-ex__h .lv i:nth-child(3) { height: 13px; }
.hm-ex__h .lv i.d {
  height: 16px;
  background: #c7d2e3;
}
.hm-ex__t {
  margin-top: 10px !important;
  font: 560 20px/1.2 var(--fd);
  letter-spacing: -0.01em;
}
.hm-ex__c p + p {
  margin-top: 8px;
}
.hm-ex__q {
  margin-top: 14px !important;
  font-weight: 700;
}
.hm-ex__mm {
  margin-top: 12px !important;
  font-weight: 700;
}
.hm-ex__pt {
  display: flex;
  gap: 10px;
  margin-top: 10px !important;
}
.hm-ex__pt span {
  flex: 1;
}
.hm-ex__pt b {
  font-weight: 600;
  min-width: 22px;
}
.hm-ex__f--b .hm-ex__pt {
  margin-top: 6px !important;
}
.hm-ex__ms {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e0b25c;
  margin-bottom: 12px !important;
}
.hm-ex__opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.hm-ex__o {
  height: 46px;
  border-radius: 4px;
  border: 1px solid #b9c6da;
  background: #fff;
  color: var(--ink);
  font: 700 14.5px var(--fu);
  cursor: pointer;
  white-space: nowrap;
}
.hm-ex__o[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.hm-ex__o[data-o="1"][aria-pressed="true"] {
  background: #2f7d4f;
  border-color: #2f7d4f;
}
.hm-ex__fb {
  min-height: 44px;
  margin-top: 12px !important;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.4;
  background: #f4f7fc;
  color: #46526b;
}
.hm-ex__fb.ok {
  background: #e6f3ea;
  color: #1f5a37;
  font-weight: 600;
}
.hm-ex__fb.no {
  background: #fbf1dc;
  color: #6b4708;
  font-weight: 600;
}
.hm-ex__a {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  text-underline-offset: 5px;
}
.hm-ex__row {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hm-ex__row .hm-ex__a {
  position: static;
}
.hm-ex__flip {
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font: 700 14.5px var(--fu);
  cursor: pointer;
  white-space: nowrap;
}
.hm-ex__flip--b {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.hm-ex__n {
  color: var(--ink2);
}
.hm-ex__bars {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hm-ex__bars > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 52px;
  gap: 12px;
  align-items: center;
}
.hm-ex__bars span:first-child {
  font-size: 13.5px;
  font-weight: 700;
}
.hm-ex__bars .tr {
  display: block;
  height: 22px;
  border-radius: 4px;
  background: #eef2f9;
}
.hm-ex__bars .fi {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ink);
  width: 8%;
  transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hm-ex__bars .fi.g {
  background: #c9973a;
}
.hm-ex__bars div:nth-child(2) .fi {
  transition-delay: 0.3s;
}
.hm-ex__bars div:nth-child(3) .fi {
  transition-delay: 0.45s;
}
.hm-ex__c.is-on .hm-ex__bars .fi {
  width: var(--w);
}
.hm-ex__bars b {
  font-size: 20px;
  font-weight: 800;
  text-align: right;
}
.hm-ex__li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e3e9f3;
}
.hm-ex__li:last-of-type {
  border-bottom: 1px solid #e3e9f3;
}
.hm-ex__li span + span {
  color: var(--ink2);
  white-space: nowrap;
}
.hm-ex__li:first-of-type {
  margin-top: 10px !important;
}

.hm-sjg {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}
.hm-sj {
  --c: #2463a6;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(13, 31, 60, 0.14);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hm-sj.is-hot {
  transform: translateY(-6px);
  box-shadow: 0 0 0 2px var(--c), 0 22px 34px -20px rgba(13, 31, 60, 0.55);
}
.hm-sj svg {
  display: block;
  width: 100%;
  height: auto;
}
.hm-sj__b {
  padding: 12px 16px 16px;
}
.hm-sj__b p {
  margin: 0;
}
.hm-sj__n {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hm-sj__f {
  margin-top: 2px !important;
  font-size: 13px;
  color: var(--ink2);
}
.hm-sj__l {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.hm-sj__l a {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid #b9c6da;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.hm-sj__l a:hover {
  border-color: var(--c);
}
.hm-sj__l a.hm-sj__hl {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
}
.hm-sjg__cap {
  margin: 20px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--onnavy);
}
.hm-rapp {
  margin-top: 36px;
  padding: 22px 0;
  border-top: 1px solid var(--navyline);
  border-bottom: 1px solid var(--navyline);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  width: 100%;
  margin-inline: auto;
}
.hm-rapp__i {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.hm-rapp__t {
  flex: 1;
  min-width: 0;
}
.hm-rapp__t p {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.35;
}
.hm-rapp__q {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 4px;
  background: #fff;
}
.hm-rapp .s26-tl {
  color: #fff;
}
.hm-cs-d {
  animation-duration: 5s;
}
.cs-draw {
  stroke-dasharray: 330;
  animation: csDraw 5s ease-in-out infinite;
}
.cs-dot {
  animation: csDot 5s ease-in-out infinite;
}
.cs-grow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: csGrow 3.2s ease-in-out infinite;
}
.cs-fx {
  animation: csFlyX 2.8s linear infinite;
}
.cs-fy {
  animation: csFlyY 2.8s linear infinite;
}
.cs-wob {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: csWob 4.2s ease-in-out infinite;
}
.cs-sl {
  animation: csSlide 3.4s linear infinite;
}
@keyframes csDraw {
  0% { stroke-dashoffset: 330; }
  55%, 88% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 330; }
}
@keyframes csDot {
  0% { transform: translate(0, 0); }
  14% { transform: translate(30px, -22px); }
  28% { transform: translate(60px, 0); }
  42% { transform: translate(90px, 22px); }
  55%, 88% { transform: translate(120px, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes csGrow {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}
@keyframes csFlyX {
  from { transform: translateX(0); }
  to { transform: translateX(176px); }
}
@keyframes csFlyY {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.2, 0.6, 0.5, 1); }
  50% { transform: translateY(-50px); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  100% { transform: translateY(0); }
}
@keyframes csWob {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(16deg); }
}
@keyframes csSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-56px); }
}

@media (max-width: 1023px) {
  .hm-sjg {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 599px) {
  .hm-sjg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .hm-sj__b {
    padding: 10px 12px 12px;
  }
  .hm-win__bar {
    padding: 0 8px;
    gap: 8px;
  }
  .hm-win__url {
    font-size: 12.5px;
    padding: 5px 8px;
  }
  .hm-win__body {
    padding: 10px 10px 14px;
  }
  .hm-ex__w {
    display: none;
  }
  .hm-ex__v {
    font-size: 14px;
  }
  .hm-ex__tab {
    min-height: 48px;
  }
  .hm-ex__stage {
    grid-template-columns: minmax(0, 1fr);
    height: 440px;
  }
  .hm-ex__iso {
    display: none;
  }
  .hm-ex__cards {
    grid-column: 1;
  }
  .hm-ex__back--1 {
    transform: translate3d(12px, -10px, -110px);
  }
  .hm-ex__back--2 {
    transform: translate3d(6px, -5px, -55px);
  }
  .hm-ex__c,
  .hm-ex__f {
    padding: 18px 16px 74px;
    font-size: 14px;
  }
  .hm-ex__a,
  .hm-ex__row {
    left: 16px;
  }
  .hm-ex__row {
    right: 16px;
    flex-wrap: wrap;
  }
  .hm-ex__o {
    font-size: 13.5px;
  }
  .hm-rapp {
    flex-wrap: wrap;
  }
}
@media (max-width: 1023px) and (min-width: 600px) {
  .hm-ex__stage {
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .hm-ex__pl {
    left: -66px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-draw,
  .cs-dot,
  .cs-grow,
  .cs-fx,
  .cs-fy,
  .cs-wob,
  .cs-sl,
  .hm-app__stage {
    animation: none;
  }
  .hm-ex__c,
  .hm-ex__fl,
  .hm-ex__pl,
  .hm-sj,
  .hm-ex__bars .fi {
    transition: none;
  }
}

.hm-app h2 {
  max-width: 22ch;
}

/* ---------- fixes round 2 ---------- */
@media (max-width: 1199px) {
  .hm-stage {
    padding-inline: max(var(--s26-gut), calc((100% - 1240px) / 2)) 0;
  }
  .hm-stage__tag {
    padding-bottom: 22px;
  }
  .hm-face figcaption {
    font-size: 11px;
  }
  .hm-face__m::before {
    font-size: 11px;
  }
}
@media (max-width: 599px) {
  .hm-stage {
    padding-inline: 0;
  }
  .hm-founder {
    gap: 10px;
  }
  .hm-founder__who {
    flex: 1 1 auto;
    gap: 10px;
  }
  .hm-founder__who img {
    width: 44px;
    height: 44px;
  }
  .hm-founder__n {
    font-size: 17px;
    white-space: nowrap;
  }
  .hm-founder__s {
    font-size: 13px;
  }
  .hm-founder__sc {
    flex: none;
    gap: 8px;
  }
  .hm-founder__num {
    font-size: 26px;
  }
  .hm-founder__r .hm-stars {
    width: 70px;
    height: 13px;
  }
  .hm-founder__u {
    white-space: normal;
    max-width: 96px;
    font-size: 12px;
    line-height: 1.25;
  }
}

/* ---------- fixes round 3 ---------- */
.hm-sj--all {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  box-shadow: none;
}
.hm-sj--all__n {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.hm-sj--all__n span {
  font-size: 16px;
  letter-spacing: 0;
}
.hm-sj--all__t {
  font-size: 13.5px;
  line-height: 1.4;
  color: #c6cfde;
}
.hm-sj--all__l {
  font-size: 14.5px;
  font-weight: 700;
  color: #e0b25c;
}
@media (max-width: 1023px) {
  .hm-sj--all {
    display: flex;
  }
  .hm-rapp__q {
    display: none;
  }
}
@media (max-width: 599px) {
  .hm-app__stage {
    --zs: 0.45;
    overflow: visible;
  }
  .hm-app__ph--l {
    transform: translateZ(calc(140px * var(--zs)));
  }
  .hm-app__ph--c {
    transform: translateZ(calc(40px * var(--zs)));
  }
  .hm-app__ph--r {
    transform: translateZ(calc(-60px * var(--zs)));
  }
  .hm-app__stage {
    transform: rotateX(5deg) rotateY(-14deg) scale(0.92);
  }
  @keyframes hmPhones {
    0%,
    100% {
      transform: rotateX(5deg) rotateY(-14deg) scale(0.92) translate3d(0, 0, 0);
    }
    50% {
      transform: rotateX(6deg) rotateY(-11deg) scale(0.92) translate3d(0, -6px, 0);
    }
  }
}

@media (max-width: 699px) {
  .hm-hero27 .hm-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0;
    border-top: 1px solid var(--line);
    margin-top: 20px;
  }
  .hm-hero27 .hm-ledger li,
  .hm-hero27 .hm-ledger li + li {
    padding: 14px 10px 14px 0;
    border-left: 0;
    white-space: normal;
  }
  .hm-hero27 .hm-ledger li:nth-child(2n) {
    padding-left: 14px;
    border-left: 1px solid var(--line);
  }
  .hm-hero27 .hm-ledger li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

/* ---------- fixes round 4: notice tag, three ways ---------- */
.hm-notice--slim .hm-notice__tag p::before,
.hm-notice--slim .hm-notice__tag .hm-lab::before {
  display: none;
}
.hm-notice--slim .hm-notice__tag {
  gap: 8px;
}
.hm-notice--slim .hm-notice__tag p + p::before {
  display: inline;
  content: "\00b7\00a0";
}
.hm-notice--slim .hm-notice__tag::before {
  flex: none;
}
.hm-notice--slim .hm-notice__tag .hm-lab {
  padding: 0;
  border: 0;
  color: var(--gold);
}
@media (min-width: 1024px) {
  .hm-way--main {
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 30px 50px -34px rgba(13, 31, 60, 0.5);
  }
  .hm-way--main > img {
    width: 270px;
    height: 100%;
    min-height: 470px;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .hm-way--main > div {
    padding: 34px 36px 36px;
    display: flex;
    flex-direction: column;
  }
  .hm-way--main .hm-lab {
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--goldt);
    margin: 0;
  }
  .hm-way--main .hm-h3d {
    margin: 10px 0 0;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.12;
  }
  .hm-way--main > div > p:not(.hm-lab):not(.hm-small) {
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink2);
  }
  .hm-way--main .hm-ticks {
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
  .hm-way--main .hm-ticks li {
    padding: 15px 0;
    border-top: 1px solid var(--line);
    font-size: 16px;
    font-weight: 500;
  }
  .hm-way--main .hm-ticks li:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  .hm-way--main .hm-ticks li::before {
    display: none;
  }
  .hm-way--main .hm-cta-row {
    margin: 30px 0;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
  }
  .hm-way--main .hm-cta-row a:first-child {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 20px;
    border: 1.5px solid var(--ink);
    border-radius: 3px;
    text-decoration: none;
    box-shadow: none;
    background: none;
    font-size: 15.5px;
    font-weight: 600;
  }
  .hm-way--main .hm-cta-row a:first-child::after {
    display: none;
  }
  .hm-way--main .hm-cta-row a:first-child:hover {
    background: var(--ink);
    color: #fff;
  }
  .hm-way--main .hm-small {
    margin: auto 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font: italic 400 17px/1.4 var(--fd);
    color: var(--ink2);
  }
  .hm-way--also {
    border-left: 0;
    padding-left: 0;
  }
  .hm-also .hm-h3f {
    font: 600 21px/1.25 var(--fu);
    letter-spacing: 0;
  }
}
.hm-notice--slim .hm-notice__tag {
  border: 0;
  padding: 0;
}
.hm-notice--slim .hm-notice__tag .hm-lab {
  font-size: 12.5px;
}

/* ---------- Layout shift (QA 12 Nov): fallback faces matched to the real fonts ----------
   Measured width ratios of the page's own text (Instrument Sans vs Arial, Fraunces vs
   Georgia) so lines break in the same places before and after the web fonts arrive. Used below
   1024px only: on wide screens the original fallback already lines up (CLS 0.002). */
@font-face { font-family: "Instrument Sans Fallback H"; src: local("Arial"), local("ArialMT"); font-weight: 100 450; size-adjust: 99.68%; ascent-override: 95.18%; descent-override: 24.53%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback H"; src: local("Arial"), local("ArialMT"); font-weight: 451 550; size-adjust: 100.85%; ascent-override: 95.18%; descent-override: 24.53%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback H"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 551 900; size-adjust: 95.7%; ascent-override: 99.34%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback H"; src: local("Georgia"); font-weight: 100 450; size-adjust: 104.06%; ascent-override: 93.23%; descent-override: 24.31%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback H"; src: local("Georgia"); font-weight: 451 550; size-adjust: 105.65%; ascent-override: 93.23%; descent-override: 24.31%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback H"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 551 900; size-adjust: 92.86%; ascent-override: 104.29%; descent-override: 27.19%; line-gap-override: 0%; }
@media (max-width: 1023px) {
body.hm {
  --fd: "Fraunces", "Fraunces Fallback H", Georgia, "Times New Roman", serif;
  --fu: "Instrument Sans", "Instrument Sans Fallback H", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
}
/* the hero lede's second line ended right at its edge, so it rewrapped when the font arrived */
@media (min-width: 600px) {
  .hm-hero27 .hm-lede {
    max-width: 600px;
  }
}

/* ---------- QA 12 Nov: phone hero ---------- */
@media (max-width: 699px) {
  .hm-hero27 .hm-ledger {
    align-self: stretch;
  }
}
@media (max-width: 599px) {
  /* the CTA row breaks the same way with either font: WhatsApp and the
     consultation link share the second row from 375px up */
  .hm-hero27 .hm-hero__cta .hm-cta-row {
    gap: 12px;
  }
  .hm-hero27 .s26-wa {
    padding: 0 16px;
  }
  .hm-hero27 .hm-hero__eb {
    letter-spacing: 0.09em;
    font-size: 11.5px;
  }
}
@media (max-width: 374px) {
  .hm-hero27 .hm-hero__cta .s26-wa {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---------- QA 12 Nov: section polish ---------- */
@media (min-width: 760px) {
  .hm-findband {
    padding: 48px 0;
  }
}
/* November band: "Season · November 2026 exams" on one baseline */
.hm-notice--slim .hm-notice__tag {
  align-items: baseline;
}
.hm-notice--slim .hm-notice__tag::before {
  align-self: center;
}
.hm-notice--slim .hm-notice__tag p {
  line-height: 1.2;
}
/* Three ways: at 1024-1199 the card was squeezed into 520px; stack it like tablets */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hm-ways__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }
  .hm-way--also {
    border-top: 1px solid var(--line);
    padding-top: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 40px;
  }
  .hm-way--also .hm-rh {
    grid-column: 1/-1;
  }
  .hm-also + .hm-also {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}
/* wide: the tuition card stays in view beside the taller "Also from Photon" column */
@media (min-width: 1200px) {
  .hm-way--main {
    position: sticky;
    top: 104px;
  }
}
/* "Ask about your school's programme" filled its button edge to edge at 1024 */
.hm-bs__a .s26-btn {
  height: auto;
  min-height: 48px;
  padding: 10px 18px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
/* Resources band: six covers in two rows fill the right column instead of one thin strip */
@media (min-width: 1024px) {
  .hm-bridge .hm-shelf--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
    border-bottom: 0;
    margin-bottom: 18px;
  }
  .hm-bridge .hm-shelf-wrap {
    padding-top: 8px;
  }
}
/* Find us card: keep the address block together instead of spread top to bottom */
.hm-visit .hm-place {
  justify-content: center;
}
/* phone hero lede: balanced lines and a fallback tuned on this paragraph, so the
   web font arriving late does not rewrap it (layout shift) */
@font-face { font-family: "Instrument Sans Fallback Lede"; src: local("Arial"), local("ArialMT"); font-weight: 100 900; size-adjust: 101.4%; ascent-override: 95.18%; descent-override: 24.53%; line-gap-override: 0%; }
@media (max-width: 599px) {
  .hm-hero27 .hm-lede {
    text-wrap: balance;
    font-size: 17.5px;
    font-family: "Instrument Sans", "Instrument Sans Fallback Lede", system-ui, sans-serif;
  }
}
/* Reviews band, tablets: the drum sat at the top of a tall row; centre it, and let
   the founder card show its whole label */
@media (min-width: 600px) and (max-width: 1199px) {
  .hm-rev {
    align-items: center;
  }
  .hm-rev__r {
    margin-top: 0;
  }
}
@media (max-width: 1199px) {
  .hm-fcard .hm-fcard__k {
    white-space: normal;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }
}
/* Free sample chapters: keep each "·" at the end of a line, never the start */
.hm-also .hm-samples {
  line-height: 2.7;
}
.hm-also .hm-samples a {
  display: inline;
  padding: 10px 2px;
  margin: 0;
}
/* hx:intl:start  (written by tools/site2027_intl.py: change it there, then run the script) */
/* ---- international schools block ---- */
.hx-intl{margin-top:clamp(36px,4.4vw,60px)}
.hm-bs .hx-intl{padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
.hx-intl__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);gap:clamp(28px,4vw,56px);align-items:start}
.hx-intl__eb{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:600 12px/1.2 var(--fu);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.hx-intl__eb::before{content:"";flex:none;width:28px;height:2px;background:var(--gold)}
.hx-intl__h{margin:0;font:500 clamp(25px,2.5vw,34px)/1.14 var(--fd);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hx-intl__lede{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--ink2)}
.hx-intl__sub{margin:26px 0 0;font:600 17px/1.3 var(--fu);letter-spacing:0;color:var(--ink)}
.hx-intl__pts{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.hx-intl__pts li{position:relative;margin:0;padding:0 0 0 22px;font-size:15.5px;line-height:1.55;color:var(--ink2)}
.hx-intl__pts li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;background:var(--gold)}
.hx-intl__pts strong{font-weight:600;color:var(--ink)}
.hx-intl a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.hx-intl a:not([class]):hover{color:var(--goldt)}
.hx-intl__cta{margin:24px 0 0}
.hx-intl__stage{box-sizing:border-box;padding:clamp(16px,2.2vw,28px);border-radius:4px;background:#0d1f3c;background:radial-gradient(540px 440px at 58% 44%,#1b3a6b 0%,#0d1f3c 72%);perspective:1400px}
.hx-intl__tag{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;margin:0 0 14px;font:600 11.5px/1.3 var(--fu);letter-spacing:.13em;text-transform:uppercase;color:#c9d5ea}
.hx-intl__tag b{font-weight:600;color:var(--gold)}
.hx-intl__cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;transform:rotateX(3deg) rotateY(-5deg);transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hx-intl__stage:hover .hx-intl__cards{transform:none}
.hx-intl__cards li{margin:0;padding:12px 13px 13px;border-top:3px solid var(--gold);border-radius:4px;background:#fff;color:var(--ink);box-shadow:0 20px 30px -20px rgba(2,8,22,.85)}
.hx-intl__cards li::before{content:none}
.hx-intl__cards b{display:block;font:560 19px/1.1 var(--fd);letter-spacing:-.005em}
.hx-intl__cards span{display:block;margin-top:5px;font-size:12px;line-height:1.35;color:var(--ink2)}
.hx-intl__cards em{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-style:normal;font-size:12.5px;line-height:1.35}
.hx-intl__cards em i{display:block;margin-bottom:2px;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.hx-intl__nov{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:#c9d5ea}
.hx-intl__nov b{display:block;margin-bottom:3px;font:600 11.5px/1.3 var(--fu);letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.hx-intl__foot{margin-top:clamp(22px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:start}
.hx-intl__also{margin:0;max-width:62em;font-size:15px;line-height:1.6;color:var(--ink2)}
.hx-intl__more{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.hx-intl__more li{margin:0;padding:0}
.hx-intl__more li::before{content:none}
.hx-intl__note{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink2)}
.hx-intl__side{min-width:0}
.hx-intl__side .hx-intl__foot{grid-template-columns:minmax(0,1fr)}
@media (hover:none){.hx-intl__cards{transform:none}}
@media (prefers-reduced-motion:reduce){.hx-intl__cards{transition:none}}
@media (max-width:1023px){
  .hx-intl__grid{grid-template-columns:minmax(0,1fr)}
  .hx-intl__cards{transform:none}
  .hx-intl__foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  .hx-intl__lede{font-size:16px}
  .hx-intl__stage{margin-inline:calc(var(--s26-gut) * -1);border-radius:0;padding:22px var(--s26-gut) 24px}
  .hx-intl__cards{display:flex;gap:10px;margin-inline:calc(var(--s26-gut) * -1);padding:0 var(--s26-gut) 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--s26-gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hx-intl__cards::-webkit-scrollbar{display:none}
  .hx-intl__cards li{flex:0 0 min(64%,236px);scroll-snap-align:start}
  .hx-intl__cards b{font-size:18px}
  .hx-intl__tag span::after{content:" · swipe";color:var(--gold)}
}
/* ---- subject pages: "Mr Ejaz Ahmad & team" comes first on phones and tablets (the desktop hero is unchanged) ---- */
.hx-who{display:none}
@media (max-width:1023px){
  .hx-who{order:-1;display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
  .hx-who img{flex:none;width:64px;height:64px;object-fit:cover;object-position:50% 22%;border-radius:3px}
  .hx-who__t{flex:1 1 auto;min-width:0}
  .hx-who__k{display:block;font:600 11px/1.2 var(--fu);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
  .hx-who__n{display:block;margin-top:3px;font:500 21px/1.15 var(--fd)}
  .hx-who__g{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2)}
  .hx-who__g strong{font:500 26px/1 var(--fd);color:var(--ink)}
  .hx-who__st{display:block}
}
@media (max-width:599px){
  .hx-who{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:4px}
  .hx-who img{grid-column:1;grid-row:1/3;width:64px;height:64px}
  .hx-who__t{grid-column:2;grid-row:1}
  .hx-who__n{font-size:20px}
  .hx-who__g{grid-column:2;grid-row:2;flex-wrap:wrap;gap:4px 8px;font-size:12.5px}
  .hx-who__g strong{font-size:17px}
}
/* hx:intl:end */
/* hx:who:start  (written by tools/site2027_intl.py: change it there, then run the script) */
/* on phones and tablets the founder comes first in the hero; the desktop hero is unchanged */
.hm-founder__x{display:inline}
/* the name stays on one line; when the chip is too narrow the score drops to a second row instead of squeezing the name */
.hm-founder{flex-wrap:wrap}
@media (min-width:600px){.hm-founder__n{white-space:nowrap}}
@media (min-width:1200px) and (max-width:1499px){.hm-founder__x{display:none}}
@media (max-width:1023px){
  .hm-hero27__l>.hm-founder{order:-1;margin-top:0;padding-top:0;border-top:0}
  .hm-hero27__l>.hm-hero__eb{margin-top:22px}
}
@media (max-width:599px){
  .hm-hero27__l>.hm-founder{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;padding-bottom:16px}
  .hm-hero27__l>.hm-founder .hm-founder__who{display:contents}
  .hm-hero27__l>.hm-founder .hm-founder__who img{grid-column:1;grid-row:1/3;width:64px;height:64px}
  .hm-hero27__l>.hm-founder .hm-founder__who>span{grid-column:2;grid-row:1;min-width:0}
  .hm-hero27__l>.hm-founder .hm-founder__k{display:block;font-size:11px}
  .hm-hero27__l>.hm-founder .hm-founder__n{font-size:20px;white-space:normal}
  .hm-hero27__l>.hm-founder .hm-founder__s{display:none}
  .hm-hero27__l>.hm-founder .hm-founder__sc{grid-column:2;grid-row:2;flex-wrap:wrap;gap:4px 8px}
  .hm-hero27__l>.hm-founder .hm-founder__num{font-size:17px}
  .hm-hero27__l>.hm-founder .hm-founder__r{flex-direction:row;align-items:center;gap:8px}
  .hm-hero27__l>.hm-founder .hm-founder__u{max-width:none;white-space:nowrap;font-size:12.5px;line-height:1.3}
  .hm-hero27__l>.hm-founder .hm-founder__x{display:none}
}
/* hx:who:end */
/* hx:fees:start  (written by tools/site2027_fees.py: change it there, then run the script) */
.hm-fees-incl{margin:18px 0 0;padding:16px 20px;border-left:3px solid var(--gold);background:var(--chalk);font-size:16.5px;line-height:1.55;color:var(--ink)}
.hm-fees-incl small{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.hm-fees-incl a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.hm-fees .hm-perh{font-size:13.5px;color:var(--ink2);grid-column:2}
@media (max-width:899px){.hm-fees td .hm-perh{margin-top:-8px}}
/* hx:fees:end */