/* Home page. Ported from mockups/index.html (the design reference); the markup is src/pages/home.tsx,
   the script assets/js/home.js. Everything above the "Additions" block is the mockup's CSS as is. */

:root {
  --blue: #142099;
  --navy: #0F176C;
  --ink: #011420;
  --fg: #fff;
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .16);
  --sans: "Thmanyah Sans", system-ui, -apple-system, sans-serif;
  --display: "Thmanyah Serif Display", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.2, 1.25, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; } /* inherited, so it also reaches elements reset with all: unset */
html { background: var(--blue); }
body {
  margin: 0; background: var(--blue); color: var(--fg);
  font-family: var(--sans); font-size: 18px; line-height: 1.85;
  font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.locked { overflow: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; }
bdi { unicode-bidi: isolate; }
/* the Riyal sign is Thmanyah's «ر.س» ligature (src/ui/icons.tsx), so it keeps the surrounding font */
.riyal { unicode-bidi: isolate; white-space: nowrap; }
.wrap { max-width: 920px; margin-inline: auto; padding-inline: 28px; }

/* ───────── Header ───────── */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; padding-inline: max(28px, calc((100vw - 1000px) / 2));
  background: var(--blue); transition: box-shadow .2s; /* solid, no fade: a hairline appears once the page scrolls (site.js) */
}
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.mono { display: block; width: 40px; height: 40px; position: relative; z-index: 2; }
.mono img { display: block; width: 100%; height: 100%; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9); }
.top nav { display: flex; gap: 30px; align-items: center; }
.top nav a { text-decoration: none; color: var(--muted); font-size: 16px; transition: color .2s; display: inline-flex; align-items: center; gap: 7px; }
.top nav a:hover { color: #fff; }
.soon-chip {
  font-size: 11px; font-weight: 500; line-height: 1; padding: 4px 7px 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8);
}
.menu-btn { display: none; }

/* Mobile menu, modelled on cohere.com */
.mnav {
  position: fixed; inset: 0; z-index: 40; background: var(--blue);
  display: flex; flex-direction: column; padding: 108px 24px calc(28px + env(safe-area-inset-bottom));
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s;
}
.mnav nav { display: flex; flex-direction: column; }
.mnav nav a {
  font-size: 32px; font-weight: 500; line-height: 1.25; padding-block: 14px; text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.mnav nav a .soon-chip { font-size: 13px; padding: 5px 10px 4px; vertical-align: 0; }
.mnav .mnav-ctas { margin-top: auto; display: grid; gap: 12px; opacity: 0; transition: opacity .4s var(--ease); }
.mnav .mpill {
  display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px;
  font-size: 19px; font-weight: 500; text-decoration: none;
}
.mpill.outline { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85); }
.mpill.solid { background: #fff; color: var(--blue); }
.menu-open .mnav { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
.menu-open .mnav nav a { opacity: 1; transform: none; }
.menu-open .mnav nav a:nth-child(1) { transition-delay: .06s; }
.menu-open .mnav nav a:nth-child(2) { transition-delay: .11s; }
.menu-open .mnav nav a:nth-child(3) { transition-delay: .16s; }
.menu-open .mnav nav a:nth-child(4) { transition-delay: .21s; }
.menu-open .mnav .mnav-ctas { opacity: 1; transition-delay: .28s; }

/* ───────── Hero stage ───────── */
.hero { position: relative; height: 190svh; }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.layer { position: absolute; inset: 0; pointer-events: none; }

/* Ghost layouts: invisible boxes the script measures to find start/end positions */
.layout-start { position: absolute; inset: 0; visibility: hidden; pointer-events: none; --H: min(17svh, 10vw); }
.layout-start > div { position: absolute; left: 50%; transform: translateX(-50%); }
/* Wordmark lines (img/wordmark-1.svg, -2.svg) keep the lockup's geometry: equal widths,
   line 2 is 1.2308× as tall as line 1. --name-gap is the space between them, in line-1 heights
   (the lockup's own .4769, tightened) */
:root { --name-gap: .22; }
.g-w1 { height: var(--H); aspect-ratio: 3.6; }
.g-w2 { height: calc(var(--H) * 1.2308); aspect-ratio: 2.925; }
.layout-start .g-w1 { top: 14svh; }
.layout-start .g-w2 { top: calc(14svh + var(--H) * (1 + var(--name-gap))); }
.layout-start .g-por { bottom: 0; height: 77svh; aspect-ratio: 1600 / 1535; }
.layout-start .g-cta { top: 71svh; width: min(380px, 82vw); height: 56px; }

.layout-end {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding-top: 64px;
}
.end-inner { width: min(1000px, calc(100% - 56px)); display: grid; grid-template-columns: 1fr auto; gap: 72px; align-items: center; }
.end-text { display: flex; flex-direction: column; align-items: flex-start; }
.end-name { display: flex; flex-direction: column; align-items: flex-start; --H: 66px; margin-bottom: 30px; }
.end-name .g-w2 { margin-top: calc(var(--H) * var(--name-gap)); }
.g-phone { height: clamp(500px, 76svh, 680px); aspect-ratio: 1800 / 3680; }
.statement { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.1vw, 40px); line-height: 1.45; margin: 0 0 14px; max-width: 560px; }
.sub { color: var(--muted); max-width: 520px; margin: 0; }
.g-cta-end { visibility: hidden; margin-top: 32px; }

.pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  height: 52px; padding-inline: 26px 22px; border-radius: 999px;
  font-size: 17px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pill .arr { display: inline-block; transition: transform .3s var(--ease); }
.pill:hover .arr { transform: translateX(-5px); }
.ctas .pill { position: absolute; pointer-events: auto; height: auto; }
.ctas.light .pill { background: #fff; color: var(--blue); box-shadow: 0 14px 34px -14px rgba(1, 20, 32, .55); }
.ctas.dark .pill { background: var(--blue); color: #fff; }

.word { position: absolute; background: currentColor; -webkit-mask: var(--mark) 0 0 / 100% 100% no-repeat; mask: var(--mark) 0 0 / 100% 100% no-repeat; }
.word.w1 { --mark: url(/assets/img/wordmark-1.svg); }
.word.w2 { --mark: url(/assets/img/wordmark-2.svg); }
.names.light { color: #fff; } .names.dark { color: var(--blue); }

.me-bg, .me-fg { position: absolute; left: 0; top: 0; }
.me-bg { background: var(--blue); z-index: 3; }
.me-fg { z-index: 5; pointer-events: none; }
.me-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.portrait { position: absolute; display: block; height: auto; user-select: none; -webkit-user-drag: none; }
.badge {
  position: absolute; top: -9%; left: -9%; width: 38%; aspect-ratio: 1; border-radius: 50%;
  background: #FF3B30; color: #fff; display: grid; place-items: center;
  font-family: system-ui, sans-serif; font-weight: 600; font-size: var(--badge-fs, 12px); line-height: 1;
  transform: scale(0); transition: transform .45s var(--spring);
}
.badged .badge { transform: scale(1); }
.names { z-index: 4; } .me-fg { z-index: 5; } .ctas { z-index: 6; }

.hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255, 255, 255, .8); pointer-events: none;
}
.hint .bar { width: 134px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .85); animation: nudge 2.2s var(--ease) infinite 2s; }
@keyframes nudge { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-6px); } }
.hint .m { display: none; }

/* Intro (first load only). It holds on its first frame until home.js has the images in and has placed
   everything (.ready), so it plays from the start instead of popping in halfway through. */
.intro .word { animation: wipe 1.1s var(--ease) both; }
.intro .word.w2 { animation-delay: .18s; }
.intro .portrait { animation: rise 1.2s var(--ease) .25s both; }
.intro .ctas .pill { animation: pop .8s var(--spring) 1s both; }
.intro .hint { animation: fade 1s ease 1.6s both; }
.stage.intro:not(.ready) * { animation-play-state: paused; } /* after the shorthands above (they reset it), at their specificity */
.stage:not(.ready) .copy { visibility: hidden; } /* sits in the end layout, so it would flash mid-screen until home.js fades it */
@keyframes wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes rise { from { opacity: .01; transform: translateY(5%); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

/* ───────── Phone ───────── */
/* img/iphone-frame.webp is 1800 × 3680 px, so 1cqw = 18 frame px.
   Screen opening x 95–1705, y 91–3587 (corner ≈ 255); Dynamic Island x 651–1149, y 150–293. */
.phone { position: absolute; z-index: 1; transform-origin: 0 0; container-type: inline-size; pointer-events: none; }
.phone::before { content: ""; position: absolute; inset: .76% 1.8%; border-radius: 17.5cqw; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .65); }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.landed .phone { pointer-events: auto; }
.screen {
  --icon: 13.8cqw;
  position: absolute; left: 5.28cqw; top: 5.06cqw; width: 89.44cqw; height: 194.22cqw; isolation: isolate;
  overflow: hidden; border-radius: 14.2cqw; box-shadow: 0 0 0 .6cqw #fff; /* fills the frame's anti-aliased inner edge */
  background: #fff;
  color: var(--ink); font-family: var(--sans); line-height: 1.4;
}
/* Status bar, from Apple's iOS UI kit (393pt screen, so 1pt ≈ .2276cqw): "9:41" is SF Pro Semibold 17pt
   outlined to a path, the glyphs are the kit's cellular, Wi-Fi and battery. Each side is centred in its ear,
   24pt from the screen edge and 14pt from the island. The layout is mirrored, as on an iPhone set to Arabic. */
.sb {
  position: absolute; inset: 0 0 auto; height: 14.48cqw; z-index: 3; padding: 0 5.46cqw;
  display: grid; grid-template-columns: 1fr calc(var(--isl, 27.67cqw) + 6.37cqw) 1fr; align-items: center; justify-items: center;
  color: #000; transition: grid-template-columns .5s var(--ease), opacity .25s;
}
.screen.la .sb { --isl: 51.67cqw; } /* the ears make room for the compact Live Activity */
.screen.la-x .sb { opacity: 0; } /* and the expanded one covers the status bar */
.sb svg { display: block; fill: currentColor; overflow: visible; }
.sb-time { width: 8.07cqw; height: 2.73cqw; }
.sb-icons { grid-column: 3; display: flex; align-items: center; }
.sb-cell { width: 4.37cqw; height: 2.78cqw; margin-inline-end: 1.37cqw; transition: width .5s var(--ease), margin .5s var(--ease), opacity .2s; }
.sb-wifi { width: 3.9cqw; height: 2.81cqw; margin-inline-end: 1.37cqw; }
.sb-bat { width: 6.22cqw; height: 2.96cqw; }
/* with a Live Activity in the island there is room for two indicators, so the cellular bars step aside */
.screen.la .sb-cell { width: 0; margin: 0; opacity: 0; }

/* Live Activity: the countdown to the cohort, laid out per Apple's HIG.
   The island is drawn here, not by the frame image, so the Live Activity is one black shape;
   only the camera lens sits on top of it.
   Compact, as in Apple's diagram: content inside a pill inset by .285 of the island's height, centred on the
   midline (the figures, not the Arabic descenders) and inset .4 of the height from each rounded end.
   Each side is at most 52pt (12cqw).
   Expanded (shown for the alert), 371pt wide: content stays inside an even 3cqw margin whose corners are
   concentric with the island's (10.5 − 3 = 7.5cqw). The mark and the countdown share one line in the two
   top corners, each nestled against that inner curve; the title and the date run below. */
.island {
  --la: #8E9AFF;
  position: absolute; top: 3.27cqw; left: 50%; transform: translateX(-50%); z-index: 6;
  width: 27.67cqw; height: 7.94cqw; border-radius: 3.97cqw; background: #000; color: #fff; overflow: hidden;
  transition: width .5s var(--spring), height .5s var(--spring), border-radius .5s var(--spring);
}
.camera {
  position: absolute; left: 51.83cqw; top: 4.44cqw; width: 5.56cqw; height: 5.56cqw; z-index: 7; pointer-events: none;
  background: url(/assets/img/island-camera.webp) 0 0 / 100% 100%;
}
.island.compact { width: 51.67cqw; cursor: pointer; }
.island.expanded { width: 84.4cqw; height: 26.4cqw; border-radius: 10.5cqw; cursor: pointer; }
.la-mark, .la-count { position: absolute; opacity: 0; transition: opacity .3s, top .5s var(--spring), right .5s var(--spring), left .5s var(--spring), width .5s var(--spring), height .5s var(--spring), font-size .5s var(--spring); }
.la-mark {
  top: 2.27cqw; right: 3.2cqw; width: 5.17cqw; height: 3.4cqw; background: var(--la);
  -webkit-mask: url(/assets/img/monogram-mark.svg) center / contain no-repeat; mask: url(/assets/img/monogram-mark.svg) center / contain no-repeat;
}
.la-count { top: 0; left: 3.2cqw; height: 7.94cqw; display: flex; align-items: center; gap: .6cqw; color: var(--la); font-size: 3.1cqw; font-weight: 600; line-height: 1; white-space: nowrap; }
.la-count b { font-size: 1em; font-weight: 700; font-variant-numeric: tabular-nums; transition: font-size .5s var(--spring); }
.compact .la-mark, .compact .la-count, .expanded .la-mark, .expanded .la-count { opacity: 1; }
.expanded .la-mark { top: 5.2cqw; right: 5.2cqw; width: 7cqw; height: 4.6cqw; }
.expanded .la-count { top: 3.95cqw; left: 5.2cqw; gap: .8cqw; font-size: 3.3cqw; } /* the figures centred on the mark's line */
.expanded .la-count b { font-size: 6.2cqw; }
.la-body {
  position: absolute; top: 11.6cqw; right: 5.2cqw; width: 74cqw; display: flex; flex-direction: column; gap: .8cqw;
  line-height: 1.35; opacity: 0; transition: opacity .15s;
}
.la-body b { font-size: 3.9cqw; font-weight: 600; }
.la-body span { font-size: 3.1cqw; font-weight: 500; color: rgba(255, 255, 255, .6); }
.expanded .la-body { opacity: 1; transition: opacity .3s .2s; }

.home { position: absolute; inset: 0; }
.grid { display: grid; grid-template-columns: repeat(4, var(--icon)); justify-content: space-evenly; row-gap: 4.6cqw; padding: 18cqw 1.5cqw 0; }
.app { all: unset; display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.app .icon { display: block; width: var(--icon); height: var(--icon); border-radius: calc(var(--icon) * .2237); position: relative; transition: transform .35s var(--spring); }
.app .icon img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.app:not(.me):active .icon { transform: scale(.9); }
.app .lbl { font-size: 2.9cqw; color: #1a1d2b; font-weight: 500; white-space: nowrap; }
.app.me .icon { visibility: hidden; background: var(--blue); }
.app.me .me-mini { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.app.me .me-mini img { position: absolute; width: 92%; height: auto; left: 4%; bottom: 0; border-radius: 0; }
.landed .app.me .icon { visibility: visible; }
.landed .me-bg, .landed .me-fg { visibility: hidden; }

.widget {
  display: block; margin: 5.5cqw 6.6cqw 0; padding: 4.6cqw 5cqw 4cqw; border-radius: 6cqw; text-decoration: none;
  background: var(--blue); color: #fff;
  box-shadow: 0 2cqw 5cqw -2cqw rgba(15, 23, 108, .5); transition: transform .35s var(--spring);
}
.widget:active { transform: scale(.97); }
.wg-top { display: flex; align-items: center; justify-content: space-between; font-size: 3cqw; color: rgba(255, 255, 255, .7); }
.wg-chip { background: rgba(255, 255, 255, .14); color: #fff; padding: .6cqw 2.4cqw; border-radius: 99px; font-weight: 500; }
.wg-title { font-family: var(--display); font-weight: 700; font-size: 5cqw; line-height: 1.35; margin-top: 2.6cqw; }
.wg-count { display: flex; align-items: baseline; gap: 2cqw; margin-top: 1.4cqw; }
.wg-count b { font-family: var(--display); font-size: 12cqw; line-height: 1; }
.wg-count span { font-size: 3.4cqw; color: rgba(255, 255, 255, .8); }

.dock {
  position: absolute; left: 2.8cqw; right: 2.8cqw; bottom: 2.8cqw; height: 21cqw; border-radius: 8.5cqw;
  background: rgba(230, 232, 245, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; gap: 6.4cqw;
}
.dock .app .icon { display: grid; place-items: center; }
.dock .app .icon svg { width: 52%; height: 52%; }
.ic-mail { background: #0A6CFF; }

/* Context menu, iOS haptic-touch style */
.ctx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* The blurs stay fixed and only fade: animating a backdrop blur makes Safari redo it every frame.
   Closed, they are hidden outright, so they cost nothing while the hero plays. */
.ctx-backdrop {
  position: absolute; inset: 0; background: rgba(240, 242, 252, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.ctx.open { pointer-events: auto; }
.ctx.open .ctx-backdrop { opacity: 1; visibility: visible; transition: opacity .3s; }
.ctx-lift { position: absolute; left: 0; top: 0; opacity: 0; width: var(--icon); height: var(--icon); border-radius: calc(var(--icon) * .2237); overflow: hidden; transform: scale(1); transition: transform .4s var(--spring); box-shadow: 0 3cqw 6cqw -2cqw rgba(1, 20, 32, .4); }
.ctx-lift img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
.ctx-lift img.on { visibility: visible; }
.ctx-lift.me { background: var(--blue); }
.ctx-lift img.me { inset: auto auto 0 4%; width: 92%; height: auto; }
.ctx.open .ctx-lift { transform: scale(1.08); opacity: 1; }
.ctx-menu {
  position: absolute; left: 0; top: 0; width: 62cqw; border-radius: 4.5cqw; overflow: hidden;
  background: rgba(250, 250, 253, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6cqw 14cqw -4cqw rgba(1, 20, 32, .35), 0 0 0 .3cqw rgba(1, 20, 32, .06);
  transform: scale(.4); opacity: 0; visibility: hidden; transition: transform .45s var(--spring), opacity .2s, visibility 0s .45s;
  font-size: clamp(7px, 3.1cqw, 13px); line-height: 1.45; /* scales with the phone; the floor only stops it shrinking past legibility */
}
.ctx.open .ctx-menu { transform: none; opacity: 1; visibility: visible; transition: transform .45s var(--spring), opacity .2s; }
.ctx-menu .h { padding: 3.2cqw 4cqw; border-bottom: .3cqw solid rgba(1, 20, 32, .08); }
.ctx-menu .h b { display: block; font-size: 1.08em; }
.ctx-menu .h span { color: rgba(1, 20, 32, .55); font-size: .92em; }
.ctx-menu .r { display: flex; justify-content: space-between; gap: 3cqw; padding: 2.6cqw 4cqw; border-bottom: .3cqw solid rgba(1, 20, 32, .06); text-decoration: none; color: var(--ink); }
.ctx-menu .r:last-child { border-bottom: 0; }
.ctx-menu a.r:hover { background: rgba(20, 32, 153, .06); }
.ctx-menu .r i { font-style: normal; color: rgba(1, 20, 32, .45); }
.ctx-menu .r.go { color: var(--blue); font-weight: 500; }

/* ───────── Sections ───────── */
.sec { display: grid; grid-template-columns: 170px 1fr; gap: 32px; padding-block: 88px; }
.sec + .sec { border-top: 1px solid var(--line); }
.label { margin: 0; font-size: 15px; font-weight: 500; line-height: 2; color: var(--muted); align-self: start; position: sticky; top: 96px; }
main .sec:first-child { padding-top: 120px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0; }
.stats dt { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.3; }
.stats dt small { font-size: 17px; font-weight: 500; }
.stats dt .to { font-size: 18px; color: var(--muted); margin-inline: 4px; }
.stats dd { margin: 8px 0 0; font-size: 14px; line-height: 1.65; color: var(--muted); }

.course { display: block; text-decoration: none; border-radius: 20px; padding: 32px; background: var(--navy); box-shadow: inset 0 0 0 1px var(--line); transition: transform .35s var(--ease); }
.course:hover { transform: translateY(-2px); }
.course-top { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.chip { font-size: 13px; font-weight: 500; padding: 2px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; }
.course h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.4; margin: 16px 0 8px; }
.course p { color: var(--muted); margin: 0 0 20px; max-width: 500px; }
.meta { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 6px 0; font-size: 15px; color: var(--muted); }
.meta li + li::before { content: "·"; margin-inline: 12px; }
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.price { display: flex; align-items: baseline; gap: 14px; }
.price strong { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; }
.price strong .riyal { font-size: 30px; margin-inline-end: 6px; }
.price s { color: var(--muted); font-size: 16px; }
.price .split { font-size: 14px; color: var(--muted); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--blue); padding: 11px 22px; border-radius: 999px; font-weight: 500; font-size: 17px; text-decoration: none; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.course:hover .btn .arr { transform: translateX(-4px); }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 140px 1fr auto 20px; gap: 16px; align-items: baseline;
  padding-block: 15px; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease);
}
a.row { text-decoration: none; grid-template-columns: 1fr auto; }
.row:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.rows > li:first-child .row { padding-top: 0; }
.row .co { font-weight: 500; }
.exp .row { align-items: center; }
.exp .co { display: inline-flex; align-items: center; gap: 12px; }
.exp .co img, .exp .co .ic-ph { flex: none; width: 28px; height: 28px; border-radius: 6.3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); }
.exp .co .ic-ph { display: grid; place-items: center; background: rgba(255, 255, 255, .12); font-size: 14px; line-height: 1; }
.row .role, .row .when { color: var(--muted); }
.row .when { font-size: 15px; }
.row:hover { padding-inline-start: 8px; }
.plus { position: relative; width: 12px; height: 12px; align-self: center; }
/* 1.5px strokes are drawn as a band inside a whole-pixel box: a 1.5px box snaps to 4 or 5 device pixels
   depending on where the row lands, so the strokes would vary in weight from row to row */
.plus::before, .plus::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 5.25px, var(--muted) 0 6.75px, transparent 0); transition: transform .4s var(--ease); }
.plus::after { transform: rotate(90deg); }
.open > .row .plus::after { transform: rotate(0deg); }
.open > .row .plus::before { transform: rotate(180deg); }
.panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.open > .panel { grid-template-rows: 1fr; }
.panel-inner { overflow: hidden; }
.panel-inner > div { padding: 18px 0 26px; padding-inline-start: 156px; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .45s var(--ease); }
.open > .panel .panel-inner > div { opacity: 1; transform: none; transition-delay: .12s; }
.panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.panel li { position: relative; padding-inline-start: 18px; }
.panel li::before { content: ""; position: absolute; right: 0; top: calc(.8em - 1.25px); width: 6px; height: 4px; background: linear-gradient(transparent 1.25px, var(--muted) 0 2.75px, transparent 0); }
.open > .row { border-bottom-color: transparent; }
.rows > li.open { border-bottom: 1px solid var(--line); }

footer .sec { padding-bottom: 140px; }
.email { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 30px); text-decoration: none; display: inline-block; margin-bottom: 16px; }
.email:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; }
.links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: var(--line); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: currentColor; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .wrap { padding-inline: 20px; }
  .top { height: 68px; padding-inline: 20px; }
  .top nav { display: none; }
  .menu-btn {
    all: unset; display: block; position: relative; z-index: 2; width: 40px; height: 40px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-btn span { position: absolute; right: 8px; height: 1.8px; border-radius: 2px; background: #fff; transition: transform .45s var(--ease), width .45s var(--ease), top .45s var(--ease); }
  .menu-btn span:nth-child(1) { top: 15px; width: 24px; }
  .menu-btn span:nth-child(2) { top: 23px; width: 15px; }
  .menu-open .menu-btn span:nth-child(1) { top: 19px; width: 24px; transform: rotate(45deg); }
  .menu-open .menu-btn span:nth-child(2) { top: 19px; width: 24px; transform: rotate(-45deg); }

  .hero { height: 180svh; }
  .layout-start { --H: min(9.5svh, 19.5vw); }
  .layout-start .g-w1 { top: 15svh; }
  .layout-start .g-w2 { top: calc(15svh + var(--H) * (1 + var(--name-gap))); }
  .layout-start .g-por { height: auto; width: 122vw; }
  /* at least 20px above the hint (76px up, ~40px tall), which short screens like Safari's with its bars would put it on */
  .layout-start .g-cta { top: auto; bottom: max(15svh, 136px); width: min(320px, 84vw); height: 54px; }

  /* the stack fills the screen and the phone takes what is left, so it is always shown whole;
     on short screens (under ~840px) the spacing and the wordmark tighten so the phone keeps a useful size */
  .layout-end { align-items: stretch; padding-top: clamp(80px, 10.9svh, 92px); padding-bottom: 24px; }
  .end-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3.55svh, 30px); width: calc(100% - 40px); }
  .end-text { align-items: center; text-align: center; }
  .end-name { align-items: center; --H: clamp(40px, 6.6svh, 56px); margin-bottom: clamp(16px, 3.1svh, 26px); }
  .statement { font-size: clamp(20px, 2.85svh, 24px); margin: 0; max-width: 330px; }
  .sub { display: none; }
  .g-cta-end { margin-top: clamp(14px, 2.6svh, 22px); }
  .g-phone { flex: 0 1 auto; min-height: 0; height: min(159.5vw, 675px); width: auto; } /* at most 78vw (330px) wide */
  .hint { bottom: 76px; }
  .hint .d { display: none; } .hint .m { display: inline; }

  .sec { grid-template-columns: 1fr; gap: 20px; padding-block: 60px; }
  main .sec:first-child { padding-top: 80px; }
  .label { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .course { padding: 24px; }
  .course-foot { flex-direction: column; align-items: stretch; }
  .course-foot .btn { justify-content: center; }
  .row { grid-template-columns: 1fr auto 12px; gap: 2px 12px; }
  .row .role { grid-column: 1 / 2; grid-row: 2; font-size: 15px; }
  /* the + sits on the first line with the icon, the name and the date, flush with the end of the dividers */
  .row .plus { grid-row: 1; grid-column: 3; }
  .panel-inner > div { padding-inline-start: 0; }
  .exp .row .role, .exp .panel-inner > div { padding-inline-start: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ───────── Additions for the CMS-driven page ───────── */
/* several courses stack */
.course + .course { margin-top: 20px; }
/* courses section with nothing to show */
.empty { color: var(--muted); }
.empty p { margin: 0; }
.empty a { color: #fff; }
/* an experience row without details, and an article that isn't out yet: not clickable */
.row.static, .row.soon { cursor: default; }
.row.static:hover, .row.soon:hover { padding-inline-start: 0; }
.row.soon { grid-template-columns: 1fr auto; }
/* «all articles» under the list */
.more { display: inline-block; margin-top: 22px; font-size: 16px; }