/* ============================================================
   Bourse Prep  ·  homepage, design phase 1 (1 October 2026)

   Direction A, "Quiet institution", chosen by Usman, with two
   things borrowed from direction B: the real Today screen standing
   in the hero and stepping down into the page, and the six steps
   across the full width. Loaded by index.html only. Every rule is
   scoped to the homepage's own hx- classes, or to the shared
   classes only inside them, so no other page changes.

   Images: IMAGES.md (design phase). The hero photograph and the
   closing skyline are atmosphere, faded into the brand purple and
   never behind body text at less than WCAG AA.
   ============================================================ */

.hx{
  --hx-ink:#14101C;
  --hx-deep:#180A2B;       /* navy-950 */
  --hx-body:#2B2237;
  --hx-soft:#4A4356;       /* ink-soft */
  --hx-faint:#78707F;      /* ink-faint */
  --hx-line:#E6DEE8;       /* line */
  --hx-line-2:#D9CFDD;
  --hx-paper:#FBF8FA;      /* paper */
  --hx-paper-2:#F5EFF5;    /* paper-2 */
  --hx-orange:#D95900;     /* gold-600 */
  --hx-orange-text:#B84A00;/* gold-700 */
  --hx-peach:#FFC49A;      /* gold-300 */
  --hx-overhang:128px;
  color:var(--hx-ink);
}

/* ---------- shared pieces ---------- */

:where(.hx) > section{padding:0;}
.hx-wrap{max-width:1160px;margin:0 auto;padding:0 28px;box-sizing:border-box;}
:where(.hx) :is(h1,h2,h3){margin:0;}
:where(.hx) p{margin:0;max-width:none;}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.hx-section{padding:104px 0 0;}
.hx-head{display:flex;flex-direction:column;gap:14px;max-width:760px;}
.hx-head.is-centred{align-items:center;text-align:center;max-width:760px;margin:0 auto;}
.hx-head h2{
  font-size:clamp(28px,3.1vw,40px);line-height:1.14;letter-spacing:-.022em;font-weight:640;color:var(--hx-deep);
}
.hx-sub{font-size:17px;line-height:1.6;color:var(--hx-soft);}
.hx-head.is-centred .hx-sub{font-size:15.5px;max-width:720px;}
.hx-sub strong{color:var(--hx-ink);}

.hx-eyebrow,.hx-label{
  display:flex;align-items:center;gap:10px;
  font-size:12px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--hx-orange-text);
}
.hx-eyebrow:before{content:"";flex:none;width:22px;height:2px;background:var(--hx-orange);}
.hx-eyebrow.is-plain:before,.hx-label:before{display:none;}
.hx-eyebrow.hx-on-dark{color:var(--hx-peach);}

.hx a:not(.btn){color:var(--navy-700,#452073);text-decoration:underline;text-decoration-color:rgba(69,32,115,.35);text-underline-offset:3px;}
.hx a:not(.btn):hover{color:var(--hx-orange-text);text-decoration-color:currentColor;}

/* ---------- hero ---------- */

.hx-hero{position:relative;z-index:2;background:var(--hx-deep);color:#fff;}
.hx-hero-media{position:absolute;inset:0;overflow:hidden;}
.hx-hero-photo{
  position:absolute;inset:0;opacity:.92;
  background:url(/assets/img/site/hero-1280.webp) 74% 34% / cover no-repeat;
  background-image:image-set(url(/assets/img/site/hero-1280.webp) 1x,url(/assets/img/site/hero-1672.webp) 2x);
}
/* The tint, then the purple under the words, then the photo's own foot
   fading into the purple. The section ends on solid purple, and the Today
   screen bridges it into the page. */
.hx-hero-media:before,.hx-hero-media:after{content:"";position:absolute;inset:0;pointer-events:none;}
.hx-hero-media:before{background:#331858;mix-blend-mode:multiply;opacity:.28;}
.hx-hero-media:after{
  background:
    linear-gradient(180deg,rgba(24,10,43,.28) 0%,rgba(24,10,43,0) 26%,rgba(24,10,43,0) 52%,rgba(24,10,43,.72) 82%,#180A2B 100%),
    linear-gradient(90deg,#180A2B 0%,#180A2B 32%,rgba(24,10,43,.84) 46%,rgba(24,10,43,.3) 70%,rgba(24,10,43,.14) 100%);
}

.hx-hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px;align-items:end;
  padding-top:104px;
}
.hx-hero-copy{display:flex;flex-direction:column;gap:22px;padding-bottom:112px;}
.hx-kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--hx-peach);}
/* The small UAE flag before "Built in the UAE", as the old badge had. */
.hx-kicker-2{white-space:nowrap;}
.hx-flag{
  display:inline-block;width:18px;height:12px;margin:0 8px 0 0;vertical-align:-1px;
  border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.22);
}
.hx-hero h1{
  font-size:clamp(40px,4.4vw,60px);line-height:1.04;letter-spacing:-.032em;font-weight:680;color:#fff;
}
.hx-lede{font-size:19px;line-height:1.55;color:rgba(251,248,250,.84);}
.hx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.hx-hero .btn-lg{min-height:52px;padding:0 26px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;}
.hx-hero .btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,196,154,.42);}
.hx-hero .btn-ghost:hover{border-color:var(--hx-peach);color:#fff;background:rgba(255,255,255,.04);}
/* On solid purple: 8.2 : 1. */
.hx-note{font-size:14px;line-height:1.5;color:rgba(251,248,250,.7);max-width:460px;}

/* The Today window: B's frame, in front of the photo, stepping down into
   the page. It keeps .product-panel, .mockup-topbar and .mockup-body, the
   hooks hero-question.js needs for "Try a question". */
.hx-hero-visual{position:relative;margin-bottom:calc(-1 * var(--hx-overhang));}
.hx-hero .product-panel.hx-window{
  position:relative;margin:0;padding:0;overflow:hidden;
  background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 4px rgba(24,10,43,.10),0 44px 90px -34px rgba(24,10,43,.62),0 0 0 1px rgba(24,10,43,.04);
}
.hx-window .mockup-topbar{
  min-height:48px;padding:0 12px 0 16px;gap:12px;
  background:#fff;border-bottom:1px solid #F0EAF2;
}
.hx-window .mockup-dots span{width:9px;height:9px;background:var(--hx-line);}
.hx-window .mockup-title{font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--hx-faint);margin-right:auto;margin-left:4px;}
.hx-window .mockup-topbar{justify-content:flex-start;}
.hx-window .hq-toggle{margin-left:auto;background:var(--hx-paper-2);border-color:var(--hx-line);}
.hx-window .hq-tab{color:var(--hx-soft);}
.hx-window .hq-tab:hover{color:var(--hx-deep);}
.hx-window .hq-tab.is-on,.hx-window .hq-tab.is-on:hover{color:#fff;}
.hx-window .hq-tab:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--hx-orange);}

.hx-window .mockup-body.hx-window-body{display:block;min-height:0;grid-template-columns:none;background:#1F0E38;}
.hx-window .mockup-body.hx-window-body[hidden],.hx-window .hq-body[hidden]{display:none;}
/* The screenshot carries a light margin and rounded corners of its own.
   Show only the dark card, edge to edge. */
.hx-today{position:relative;overflow:hidden;aspect-ratio:1486/918;}
.hx-today img{
  position:absolute;display:block;max-width:none;height:auto;
  width:107.67%;left:-3.836%;top:-3.268%;
}
.hx-window .hq-body{
  min-height:0;box-sizing:border-box;
  background:linear-gradient(160deg,#2A1450 0%,#1F0E38 55%,#180A2B 100%);
  color:#fff;
}

/* ---------- the syllabus, then the numbers ---------- */

.hx-proof{background:var(--hx-paper);}
.hx-proof-grid{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px;}
.hx-proof-space{min-height:var(--hx-overhang);}
.hx-syllabus{display:flex;flex-direction:column;gap:12px;padding-top:44px;}
.hx-syllabus .hx-label{margin-bottom:2px;}
.hx-syl-main{font-size:16px;line-height:1.65;color:var(--hx-body);}
.hx-syllabus strong{color:var(--hx-ink);}
.hx-syllabus .hx-quiet{font-size:14px;line-height:1.6;color:var(--hx-soft);}

.hx-stats{
  margin:56px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--hx-line);border-bottom:1px solid var(--hx-line);
}
.hx-stats > div{
  display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;
  padding:26px 24px;border-left:1px solid var(--hx-line);
}
.hx-stats > div:first-child{padding-left:0;border-left:0;}
.hx-stats dd{margin:0;font-size:34px;line-height:1;font-weight:640;letter-spacing:-.02em;color:var(--hx-deep);font-variant-numeric:tabular-nums;}
.hx-stats dt{font-size:14px;line-height:1.4;color:var(--hx-soft);}

/* ---------- the platform ---------- */

.hx-product{padding-bottom:0;}
.hx-tabs{margin-top:36px;}
.hx-tabs .tabs-bar{
  display:flex;flex-wrap:nowrap;gap:28px;margin:0;padding:0;border-bottom:1px solid var(--hx-line);
  overflow-x:auto;scrollbar-width:none;justify-content:flex-start;background:none;border-radius:0;box-shadow:none;
}
.hx-tabs .tabs-bar::-webkit-scrollbar{display:none;}
.hx-tabs .tab-btn{
  flex:none;background:none;border:0;border-bottom:2px solid transparent;border-radius:0;box-shadow:none;
  margin:0 0 -1px;padding:0 0 14px;min-height:44px;
  font:inherit;font-size:15px;font-weight:500;color:var(--hx-soft);cursor:pointer;white-space:nowrap;
}
.hx-tabs .tab-btn:hover{color:var(--hx-deep);background:none;}
.hx-tabs .tab-btn.active{color:var(--hx-deep);font-weight:600;border-bottom-color:var(--hx-orange);background:none;}
.hx-tabs .tab-btn:focus-visible{outline:2px solid var(--hx-orange);outline-offset:4px;border-radius:2px;}
.hx-tabs .tab-panel{display:none;}
.hx-tabs .tab-panel.active{display:block;}
.hx-tabs .app-shot{
  margin:32px 0 0;max-width:none;border:1px solid var(--hx-line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 2px 4px rgba(24,10,43,.04),0 28px 60px -24px rgba(24,10,43,.22);
}
.hx-tabs .app-shot-bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;margin:0;
  background:#fff;border-bottom:1px solid #F0EAF2;
}
.hx-tabs .app-shot-bar span{width:9px;height:9px;border-radius:50%;background:var(--hx-line);}
.hx-tabs .app-shot-bar em{font-style:normal;font-size:13px;color:var(--hx-faint);margin-left:8px;}
.hx-tabs .app-shot-img{padding:0;background:#fff;}
.hx-tabs .app-shot-img img{display:block;width:100%;height:auto;}
.hx-tabs .app-shot-note{margin:14px 0 0;font-size:13px;color:var(--hx-soft);text-align:center;}

/* ---------- What is ICWIM band ---------- */

.hx-band{background:var(--hx-deep);margin-top:104px;}
.hx-band-row{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-top:56px;padding-bottom:56px;}
.hx-band-text{display:flex;flex-direction:column;gap:10px;max-width:640px;}
.hx-band h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:640;color:#fff;}
.hx-band-text p:last-child{font-size:15.5px;line-height:1.6;color:rgba(251,248,250,.72);}
.hx-band .btn{flex:none;}

/* ---------- journey: six steps on one line ---------- */

.hx-journey{background:var(--hx-paper-2);padding-bottom:104px;}
.hx-journey-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:end;}
.hx-journey-head .hx-sub{font-size:16px;max-width:460px;}
.hx-steps{
  position:relative;list-style:none;margin:48px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;
}
.hx-steps:before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--hx-line-2);}
.hx-steps li{position:relative;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;}
.hx-step-dot{
  width:19px;height:19px;border-radius:50%;box-sizing:border-box;margin-bottom:6px;
  background:var(--hx-paper-2);border:2px solid var(--hx-orange);
}
.hx-steps li.is-final .hx-step-dot{background:var(--hx-orange);box-shadow:0 0 0 5px rgba(217,89,0,.12);}
.hx-step-n{font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--hx-orange-text);}
.hx-steps h3{font-size:16px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--hx-deep);}
.hx-steps p{font-size:14px;line-height:1.6;color:var(--hx-soft);}

/* Outline buttons on this page take A's purple edge, so they read as buttons. */
.hx .btn-outline{background:#fff;border:1px solid #452073;color:#331858;}
.hx .btn-outline:hover{border-color:var(--hx-orange);color:var(--hx-deep);}

/* ---------- courses ---------- */

.hx-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:40px;}
.hx-course{
  display:flex;flex-direction:column;gap:14px;padding:30px;border:1px solid var(--hx-line);border-radius:14px;background:#fff;
}
.hx-course.is-featured{box-shadow:0 2px 4px rgba(24,10,43,.04),0 14px 34px -12px rgba(24,10,43,.14);}
.hx-course h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:var(--hx-deep);}
.hx-course p{font-size:14.5px;line-height:1.6;color:var(--hx-soft);}
.hx-tag{
  align-self:flex-start;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  padding:6px 10px;border-radius:4px;background:#F0EEF2;color:var(--hx-soft);
}
.hx-tag.is-live{background:#FFF4EC;color:var(--hx-orange-text);}
.hx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.hx-chips li{font-size:12.5px;line-height:1.2;color:var(--hx-soft);padding:5px 10px;border:1px solid var(--hx-line);border-radius:999px;}
.hx-course > .btn,.hx-course .mini-lead-form{margin-top:auto;}
.hx-course .mini-lead-form{display:flex;flex-direction:column;gap:8px;}
.hx-course .mini-lead-form input{
  height:46px;box-sizing:border-box;padding:0 12px;border:1px solid var(--hx-line);border-radius:8px;
  font:inherit;font-size:15px;color:var(--hx-ink);background:#fff;width:100%;
}
.hx-course .mini-lead-form input:focus{outline:2px solid var(--hx-orange);outline-offset:1px;border-color:transparent;}
.hx-course .form-note{font-size:12.5px;line-height:1.5;color:var(--hx-faint);margin:0;padding:0;border:0;background:none;}

/* ---------- pricing ---------- */

.hx-pricing{padding-top:112px;}
.hx-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px;align-items:stretch;}
.hx-price{
  position:relative;display:flex;flex-direction:column;gap:10px;padding:34px 30px;
  border:1px solid var(--hx-line);border-radius:14px;background:#fff;
}
.hx-price h3{font-size:17px;font-weight:600;color:var(--hx-deep);}
.hx-amount{margin-top:6px;font-size:44px;line-height:1;letter-spacing:-.02em;font-weight:640;color:var(--hx-deep);}
.hx-per{font-size:15px;font-weight:500;letter-spacing:0;color:var(--hx-soft);}
.hx-approx{font-size:14px;color:var(--hx-soft);}
.hx-day{font-size:14px;color:var(--hx-orange-text);}
.hx-price .btn{margin-top:auto;}
.hx-price > .hx-day{margin-bottom:14px;}
.hx-price.is-featured{background:var(--hx-deep);border-color:#452073;box-shadow:0 26px 60px -20px rgba(24,10,43,.35);}
.hx-price.is-featured h3,.hx-price.is-featured .hx-amount{color:#fff;}
.hx-price.is-featured .hx-per{color:rgba(251,248,250,.72);}
.hx-price.is-featured .hx-approx{color:rgba(251,248,250,.8);}
.hx-price.is-featured .hx-day{color:var(--hx-peach);}
.hx-ribbon{
  position:absolute;top:-12px;left:30px;font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:6px 10px;border-radius:4px;background:var(--hx-peach);color:var(--hx-deep);
}
.hx-includes{margin:22px auto 0;max-width:820px;text-align:center;font-size:14px;line-height:1.6;color:var(--hx-soft);}
.hx-guarantee{
  max-width:760px;margin:32px auto 0;padding:24px 28px;box-sizing:border-box;
  border:1px solid var(--hx-line);border-radius:12px;background:#fff;display:flex;flex-direction:column;gap:6px;
}
.hx-guarantee strong{font-size:16px;color:var(--hx-deep);}
.hx-guarantee p{font-size:14.5px;line-height:1.6;color:var(--hx-soft);}
.hx-ask{margin-top:18px;text-align:center;font-size:14px;color:var(--hx-soft);}

/* ---------- founder ---------- */

.hx-founder{background:var(--hx-deep);margin-top:112px;}
.hx-founder-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start;
  padding-top:88px;padding-bottom:88px;
}
.hx-founder-who{display:flex;flex-direction:column;gap:14px;}
.hx-founder h2{font-size:34px;line-height:1.16;letter-spacing:-.022em;font-weight:640;color:#fff;}
.hx-bio{font-size:14.5px;line-height:1.6;color:rgba(251,248,250,.7);}
.hx-bio strong{color:#fff;}
.hx-creds{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.hx-creds li{font-size:12.5px;line-height:1.2;padding:6px 11px;border:1px solid rgba(255,196,154,.35);border-radius:999px;color:var(--hx-peach);}
.hx-quote{
  margin:0;padding:0 0 0 28px;border-left:2px solid var(--hx-orange);
  font-size:19px;line-height:1.62;color:rgba(251,248,250,.88);quotes:none;
}

/* ---------- straight talk ---------- */

.hx-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;margin-top:36px;}
.hx-two > div{border-top:1px solid var(--hx-line);padding-top:20px;}
.hx-two h3{margin-bottom:8px;font-size:18px;font-weight:600;color:var(--hx-deep);}
.hx-two p{font-size:15px;line-height:1.65;color:var(--hx-soft);}

/* ---------- closing band ---------- */

.hx-close{position:relative;overflow:hidden;background:var(--hx-deep);margin-top:112px;}
.hx-close-media{position:absolute;inset:0;}
.hx-close-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 42%;opacity:.92;}
/* The greyscale skyline takes the brand's purple-to-orange duotone, then
   fades into purple under the words and at the top and bottom edges. */
.hx-close-media:before,.hx-close-media:after{content:"";position:absolute;inset:0;pointer-events:none;}
.hx-close-media:before{background:linear-gradient(90deg,#331858 0%,#7A3A2A 55%,#D95900 100%);mix-blend-mode:color;opacity:.9;z-index:1;}
.hx-close-media:after{
  z-index:2;
  background:
    linear-gradient(180deg,#180A2B 0%,rgba(24,10,43,.1) 38%,rgba(24,10,43,.55) 100%),
    linear-gradient(90deg,#180A2B 0%,rgba(24,10,43,.92) 30%,rgba(24,10,43,.45) 60%,rgba(24,10,43,.7) 100%);
}
.hx-close-text{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:96px;padding-bottom:96px;}
.hx-close-text > *{max-width:520px;}
.hx-close h2{font-size:clamp(32px,3.4vw,44px);line-height:1.1;letter-spacing:-.024em;font-weight:660;color:#fff;}
.hx-close p{font-size:17px;line-height:1.55;color:rgba(251,248,250,.84);}
.hx-close .btn{margin-top:8px;}
.hx-close .btn-lg{min-height:52px;padding:0 26px;font-size:16px;display:inline-flex;align-items:center;}

/* ============================================================
   Wide screens: the Today window may run a little past the text
   column into the margin, as a product screen does.
   ============================================================ */
@media (min-width:1100px){
  /* The headline may run past the text column; the window sits lower. */
  .hx-hero h1{margin-right:-110px;}
  /* "Try a question" keeps the window the size of the dashboard, so the
     hero never jumps; a long explanation scrolls inside it. */
  .hx-window .hq-body{aspect-ratio:1486/918;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;}
}
@supports not (aspect-ratio:1/1){
  @media (min-width:1100px){ .hx-window .hq-body{height:360px;} }
}
@media (min-width:1240px){
  .hx-hero .product-panel.hx-window{width:calc(100% + 56px);}
}

/* ============================================================
   Tablet: one column. The window sits under the words.
   ============================================================ */
@media (max-width:1099px){
  .hx{--hx-overhang:88px;}
  .hx-hero-grid{grid-template-columns:minmax(0,1fr);gap:48px;padding-top:88px;}
  .hx-hero-copy{padding-bottom:0;max-width:620px;}
  .hx-hero-visual{max-width:720px;width:100%;margin-left:auto;margin-right:auto;}
  .hx-hero-media:after{
    background:
      linear-gradient(180deg,rgba(24,10,43,.3) 0%,rgba(24,10,43,.2) 20%,rgba(24,10,43,.7) 42%,#180A2B 62%,#180A2B 100%),
      linear-gradient(90deg,#180A2B 0%,rgba(24,10,43,.92) 55%,rgba(24,10,43,.45) 100%);
  }
  .hx-close-media:after{
    background:
      linear-gradient(180deg,#180A2B 0%,rgba(24,10,43,.2) 38%,rgba(24,10,43,.6) 100%),
      linear-gradient(90deg,#180A2B 0%,rgba(24,10,43,.94) 45%,rgba(24,10,43,.55) 75%,rgba(24,10,43,.7) 100%);
  }
  .hx-proof-grid{grid-template-columns:minmax(0,1fr);gap:0;}
  .hx-proof-space{display:none;}
  .hx-syllabus{padding-top:calc(var(--hx-overhang) + 40px);max-width:680px;}
  .hx-stats{margin-top:48px;}
  .hx-journey-head{grid-template-columns:minmax(0,1fr);gap:16px;}
  .hx-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px;}
  .hx-steps:before{display:none;}
  .hx-course-grid,.hx-price-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-left:auto;margin-right:auto;}
  .hx-price-grid{gap:28px;}
  .hx-founder-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
}
@media (max-width:1099px) and (min-width:700px){
  .hx-steps li{padding-top:0;}
  .hx-steps li:before{content:"";position:absolute;left:19px;right:-28px;top:9px;height:1px;background:var(--hx-line-2);}
  .hx-steps li:nth-child(3n):before{display:none;}
}

/* ============================================================
   Phone. The photograph becomes a portrait crop on the figure at the
   top, the flag whole inside it; the words sit below the figure on
   solid purple; the Today window follows and steps into the page.
   ============================================================ */
@media (max-width:699px){
  .hx{--hx-overhang:56px;}
  .hx-wrap{padding:0 18px;}
  .hx-section{padding-top:72px;}
  .hx-hero-media{position:relative;inset:auto;height:auto;aspect-ratio:530/600;}
  .hx-hero-photo{background-image:url(/assets/img/site/hero-phone-530.webp);background-position:50% 12%;}
  .hx-hero-media:after{
    background:linear-gradient(180deg,rgba(24,10,43,.34) 0%,rgba(24,10,43,.08) 16%,rgba(24,10,43,.12) 46%,rgba(24,10,43,.66) 72%,#180A2B 94%,#180A2B 100%);
  }
  .hx-hero-grid{padding-top:0;margin-top:-72px;gap:36px;}
  .hx-hero-copy{gap:16px;}
  .hx-kicker{font-size:12px;line-height:1.7;}
  .hx-kicker-sep{display:none;}
  .hx-kicker-2{display:block;margin-top:2px;}
  .hx-flag{width:17px;height:11px;}
  .hx-hero h1{font-size:36px;line-height:1.06;letter-spacing:-.03em;}
  .hx-lede{font-size:16px;line-height:1.5;}
  .hx-cta{flex-direction:column;gap:10px;margin-top:4px;}
  .hx-cta .btn{width:100%;min-height:50px;}
  .hx-note{font-size:13px;}
  .hx-window .mockup-topbar{padding:0 8px 0 12px;min-height:46px;}
  .hx-window .mockup-dots{display:none;}
  .hx-window .hq-toggle{margin-left:0;}
  .hx-window .hq-tab{padding:6px 11px;font-size:.69rem;}
  .hx-window .hq-body{min-height:300px;}

  .hx-syllabus{padding-top:calc(var(--hx-overhang) + 32px);}
  .hx-stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;}
  .hx-stats > div{padding:22px 12px 20px 16px;}
  .hx-stats > div:nth-child(odd){padding-left:0;border-left:0;}
  .hx-stats > div:nth-child(-n+2){border-bottom:1px solid var(--hx-line);}
  .hx-stats dd{font-size:28px;}
  .hx-syl-main{font-size:15px;}

  .hx-head h2{font-size:28px;}
  .hx-sub{font-size:15.5px;}
  .hx-tabs{margin-top:28px;}
  /* 1 October: the row wrapped, not scrolled, so the third tab is never cut off. */
  .hx-tabs .tabs-bar{flex-wrap:wrap;gap:0 22px;}
  .hx-tabs .tab-btn{min-height:40px;padding-bottom:10px;}
  .hx-tabs .tab-btn{font-size:14.5px;}
  .hx-tabs .app-shot{margin-top:24px;border-radius:12px;}

  .hx-band{margin-top:72px;}
  .hx-band-row{flex-direction:column;align-items:stretch;gap:24px;padding-top:48px;padding-bottom:48px;}
  .hx-band h2{font-size:24px;}
  .hx-band .btn{width:100%;}

  .hx-journey{padding-bottom:72px;}
  .hx-steps{grid-template-columns:minmax(0,1fr);gap:26px;padding-left:34px;margin-top:32px;}
  .hx-steps:before{display:block;left:9px;right:auto;top:10px;bottom:10px;width:1px;height:auto;}
  .hx-steps li{gap:6px;}
  .hx-steps li:before{display:none;}
  .hx-step-dot{position:absolute;left:-34px;top:0;margin:0;}
  .hx-steps p{font-size:14.5px;}

  .hx-course{padding:24px;}
  .hx-pricing{padding-top:80px;}
  .hx-price{padding:30px 24px;}
  .hx-amount{font-size:40px;}
  .hx-guarantee{padding:20px;}
  .hx-founder{margin-top:80px;}
  .hx-founder-grid{padding-top:64px;padding-bottom:64px;gap:28px;}
  .hx-founder h2{font-size:28px;}
  .hx-quote{font-size:16.5px;padding-left:18px;}
  .hx-two{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:28px;}
  .hx-close{margin-top:80px;}
  .hx-close-media img{object-position:70% 40%;}
  .hx-close-media:after{
    background:linear-gradient(180deg,#180A2B 0%,rgba(24,10,43,.3) 26%,rgba(24,10,43,.62) 44%,rgba(24,10,43,.86) 64%,#180A2B 100%);
  }
  .hx-close-text{padding-top:200px;padding-bottom:64px;}
  .hx-close .btn{width:100%;justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .hx *{transition:none !important;}
}

/* Batch 23: a course label inside a feature card's heading (ICWIM, UAE FRR) */
.hx-course h3 .hx-tag{display:inline-block;vertical-align:middle;margin-left:6px;font-size:10px;padding:4px 7px;position:relative;top:-1px;}