/*
 * Folio public homepage
 *
 * The marketing surface uses Folio's canonical Sky Soft palette and mark,
 * but keeps its own page composition separate from the shared legal and
 * institutional stylesheet. Real product screens carry the visual weight.
 */

/*
 * Palette — warm neutral ground, one blue.
 *
 * Every ground token here used to be sky-tinted (canvas #f4f9fc, surfaces
 * #e8f4fb / #d7ebf7, rules #c7ddea / #a9cadc) on top of a blue radial wash, so
 * a squint at any fold read "blue" and the accent had nothing to stand out
 * from — the panels were already the accent's own hue, just lighter. The
 * standing rule is that the accent belongs to THE primary action and the
 * current selection only, and that blue is reduced with neutrals rather than
 * with a second hue. So: warm neutral grounds and rules, the app's deep navy
 * kept for ink (it reads near-black at text sizes, and it is the same --text
 * the product ships), and the blue reserved for the download button, focus,
 * and "where you are" markers. Contrast is what carries hierarchy now.
 */
:root {
  --canvas: #f7f6f3;
  --surface: #ffffff;
  --surface-soft: #f0eee9;
  --surface-deep: #e7e3dc;
  --ink: #0c2340;
  --ink-soft: #454e57;
  --muted: #6a6e75;
  --faint: #63666c;
  --accent: #0369a1;
  --accent-strong: #075985;
  --accent-pressed: #064568;
  --line: #e3dfd8;
  --line-strong: #cec8be;
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-small: 0 8px 24px rgba(38, 32, 22, 0.07);
  --shadow-large: 0 30px 72px rgba(38, 32, 22, 0.13);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --header-height: 76px;
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 22px);
}

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: clip;
  /* No tinted wash. The ground is a flat warm neutral so the one blue on the
     page is the download button. */
  background: var(--canvas);
  color: var(--ink);
  font-family: "Assistant", "Heebo", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body {
  font-family: "IBM Plex Sans Arabic", "Assistant", system-ui, sans-serif;
}

html[lang="en"] body {
  font-family: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

img,
video {
  max-width: 100%;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
video:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

button,
a {
  font: inherit;
}

[data-lang-content] > [data-lang] {
  display: none;
}

[data-lang-content] > [data-lang].active {
  display: block;
}

.primary-nav[data-lang-content] > [data-lang].active,
.film-chapters[data-lang-content] > [data-lang].active,
.download-actions[data-lang-content] > [data-lang].active {
  display: flex;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  height: var(--header-height);
  border-block-end: 1px solid var(--line);
  background: rgba(247, 246, 243, 0.92);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.header-inner {
  width: min(1220px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.primary-nav {
  margin-inline-start: auto;
}

.primary-nav > div {
  align-items: center;
  gap: 26px;
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.primary-nav a:hover {
  color: var(--ink);
}

.primary-nav a:active {
  transform: scale(0.97);
}

.primary-nav .nav-download {
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
}

.primary-nav .nav-download:hover {
  background: var(--surface);
}

.nav-download__qualifier {
  white-space: pre;
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.lang-tab {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.lang-tab:hover {
  color: var(--ink);
}

.lang-tab:active {
  transform: scale(0.96);
}

/*
 * Selected language reads as a chip inside the segmented control, not as a
 * filled navy block. The solid version was a 44x44 slab of the darkest colour
 * on the page sitting opposite a 36px logo, so on a phone the heaviest thing
 * in the header was the language toggle and the brand came second.
 */
.lang-tab.active {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
}

main {
  display: block;
}

.hero,
.product-flow,
.journey-section,
.feature-film,
.download-section,
.principles,
.faq,
.institutions {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas:
    "copy visual"
    "proof visual";
  align-items: center;
  gap: 18px clamp(48px, 6vw, 96px);
  min-height: calc(100dvh - var(--header-height));
  padding-block: clamp(54px, 7vw, 96px) clamp(74px, 8vw, 112px);
}

.hero-copy {
  grid-area: copy;
  align-self: end;
}

/* Eyebrows are labels, not actions — they were painted in the accent, which is
   part of why every fold read blue. Neutral, with weight doing the work. */
.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.hero h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--ink);
  font-family: "Heebo", "Assistant", system-ui, sans-serif;
  font-size: clamp(52px, 5.8vw, 82px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.98;
  text-wrap: balance;
}

.hero-lede {
  max-width: 47ch;
  margin: 26px 0 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-block-start: 32px;
}

.hero-actions .primary-download {
  min-height: 54px;
  padding-inline: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: scale(0.97);
}

.button-primary {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--surface);
  box-shadow: 0 8px 20px rgba(7, 89, 133, 0.18);
}

.button-primary:hover {
  border-color: var(--accent-pressed);
  background: var(--accent-pressed);
  box-shadow: 0 12px 26px rgba(7, 89, 133, 0.23);
}

.button-secondary {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
}

.button-secondary:hover {
  border-color: var(--accent-strong);
  background: var(--surface);
}

.hero-visual {
  grid-area: visual;
  position: relative;
  min-height: 650px;
}

.campus-frame {
  position: absolute;
  inset: 0 7% 15% 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-deep);
  box-shadow: var(--shadow-large);
}

[dir="ltr"] .campus-frame {
  inset: 0 0 15% 7%;
}

.campus-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(12, 35, 64, 0.2));
  pointer-events: none;
}

.campus-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 56% center;
}

.product-window {
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: 0;
  width: min(80%, 650px);
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-large);
}

.window-bar {
  height: 30px;
  display: flex;
  align-items: center;
  padding-inline: 12px;
  border-block-end: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
}

.window-bar::before {
  content: "Folio";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.window-bar span {
  display: none;
}

.product-window img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-proof {
  grid-area: proof;
  align-self: start;
}

.hero-proof p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.product-flow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(22px, 4vw, 56px);
  min-height: 112px;
  padding: 20px clamp(22px, 3vw, 38px);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-small);
}

.product-flow::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  opacity: 0.55;
}

.flow-sources,
.flow-outcomes[data-lang-content] > [data-lang].active {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.flow-sources > span,
.flow-outcomes span {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.flow-sources b {
  font: inherit;
}

.flow-core {
  position: relative;
  z-index: 2;
  min-width: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-small);
}

.flow-core .folio-brand {
  min-height: 38px;
}

/* The phone-to-computer handoff note. It is a quiet aside under the button, not
   a second coloured panel — it used to be a blue fill with a blue accent bar,
   which made it the largest blue object in the first viewport, louder than the
   CTA it was explaining. */
.mobile-bridge {
  grid-column: 1 / -1;
  max-width: 620px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.mobile-bridge[hidden] {
  display: none;
}

.mobile-bridge > div.active {
  display: grid;
  gap: 8px;
}

.mobile-bridge strong {
  color: var(--ink);
  font-size: 17px;
}

.mobile-bridge span {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.journey-section {
  --journey-progress: 25%;
  padding-block: clamp(92px, 10vw, 142px);
}

.section-heading {
  max-width: 810px;
  margin-block-end: clamp(38px, 5vw, 60px);
}

.section-heading h2,
.download-copy h2,
.principles h2,
.faq h2,
.institutions h2 {
  margin: 0;
  color: var(--ink);
  font-family: "Heebo", "Assistant", system-ui, sans-serif;
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.06;
  text-wrap: balance;
}

.section-heading > div > p:last-child,
.download-copy > div > p:last-child,
.institutions > div > p {
  max-width: 58ch;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.7;
}

.journey {
  display: grid;
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(34px, 5vw, 70px);
}

.journey-copy[data-lang-content] > [data-lang].active {
  display: grid;
  gap: 8px;
}

.journey-step {
  position: relative;
  display: flex;
  min-height: auto;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

/*
 * Idle steps are separated from the current one by surface and edge, not by
 * dimming. The old `opacity: 0.58` pushed the label and body text of every
 * inactive step under 3:1 against the ground — hierarchy bought with
 * legibility. The current step now carries a card, a rule and a shadow; the
 * idle ones sit flat on the page at full strength.
 */
.journey-step.is-current {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow-small);
  transform: translateX(-5px);
}

[dir="ltr"] .journey-step.is-current {
  transform: translateX(5px);
}

.journey-step:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.step-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.journey-step h3 {
  max-width: 24ch;
  margin: 0;
  color: var(--ink);
  font-family: "Heebo", "Assistant", system-ui, sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.18;
  text-wrap: balance;
}

.journey-step > p:last-of-type {
  max-width: 39ch;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.journey-mobile-shot {
  display: none;
}

.journey-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-large);
}

.journey-stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: var(--journey-progress);
  height: 4px;
  background: var(--accent);
  transition: width 420ms var(--ease-out);
}

.journey-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 420ms var(--ease-out),
    transform 520ms var(--ease-out);
}

.journey-frame.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.journey-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.feature-film {
  position: relative;
  padding-block: clamp(88px, 10vw, 150px);
  border-block-start: 1px solid var(--line);
}

.film-heading {
  max-width: none;
  margin-block-end: 34px;
}

.film-heading[data-lang-content] > [data-lang].active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  align-items: end;
  gap: 34px;
}

.film-heading h2 {
  max-width: 13ch;
}

.film-heading > div > p:last-child {
  margin: 0 0 7px;
  font-size: 17px;
}

.film-shell {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--ink);
  box-shadow: var(--shadow-large);
}

.flagship-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.film-chapters {
  margin-block-start: 28px;
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}

.film-chapters > div {
  width: 100%;
}

.film-chapters button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 72px;
  padding: 13px 15px;
  border: 0;
  border-inline-end: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.film-chapters button:last-child {
  border-inline-end: 0;
}

.film-chapters button span {
  display: block;
  margin-block-end: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  direction: ltr;
}

.film-chapters button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.film-chapters button.is-active {
  background: var(--surface-soft);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.film-chapters button:active {
  transform: scale(0.98);
}

.film-context {
  margin-block-start: 24px;
}

.film-context > div.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 28px;
}

.film-context p {
  max-width: 75ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.film-context strong {
  color: var(--ink);
}

.film-context .film-tour-link,
.ipad-link,
.faq a {
  color: var(--accent-strong);
  font-weight: 700;
  text-underline-offset: 4px;
}

.film-context-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.film-context .film-tour-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}

.download-section {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr);
  align-items: center;
  gap: clamp(44px, 7vw, 104px);
  padding: clamp(46px, 6vw, 82px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.66), transparent 58%),
    var(--surface-soft);
  box-shadow: var(--shadow-small);
}

.download-copy h2 {
  max-width: 13ch;
  font-size: clamp(36px, 4vw, 58px);
}

.download-actions > div {
  flex-wrap: wrap;
  gap: 10px;
}

.download-actions .ipad-link {
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-block-start: 8px;
  font-size: 15px;
}

/* --muted (#6a6e75) measures 4.42:1 on --surface-soft, the download panel's
   ground — under AA for 13px body text. The panel gets the darker ink. */
.download-actions small {
  display: block;
  width: 100%;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.principles {
  display: block;
  padding-block: clamp(100px, 11vw, 166px);
}

.principles-heading {
  position: static;
  margin-block-end: 42px;
}

.principles h2 {
  max-width: 15ch;
  font-size: clamp(38px, 4vw, 58px);
}

.principle-list[data-lang-content] > [data-lang].active {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.principle-list article {
  display: block;
  min-height: 190px;
  padding: 28px;
  border: 0;
  background: rgba(255, 255, 255, 0.74);
}

.principle-list h3 {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.4;
}

.principle-list p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}

.faq {
  padding-block: clamp(92px, 10vw, 144px);
  border-block-start: 1px solid var(--line);
}

.faq[data-lang-content] > [data-lang].active {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(52px, 8vw, 118px);
}

.faq-heading {
  position: sticky;
  inset-block-start: calc(var(--header-height) + 40px);
}

.faq h2 {
  max-width: 10ch;
  font-size: clamp(38px, 4vw, 58px);
}

.faq-heading > p:last-child {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
}

.faq-list details {
  border-block-end: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  min-height: 72px;
  display: flex;
  align-items: center;
  padding-block: 18px;
  padding-inline-end: 42px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 2px;
  color: var(--muted);
  font-size: 25px;
  font-weight: 500;
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details p {
  max-width: 62ch;
  margin: -4px 0 22px;
  padding-inline-end: 42px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
}

.institutions {
  margin-block-end: clamp(80px, 9vw, 130px);
  padding-block: clamp(66px, 7vw, 94px);
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  text-align: center;
}

.institutions h2 {
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(36px, 4vw, 58px);
}

.institutions > div > p:last-of-type {
  margin-inline: auto;
}

.institutions .button {
  margin-block-start: 28px;
}

.site-footer {
  width: min(1180px, calc(100% - 48px));
  min-height: 110px;
  margin-inline: auto;
  padding-block: 28px 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  border-block-start: 1px solid var(--line);
}

.site-footer nav {
  display: block;
}

.site-footer nav > div.active {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer p {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
  direction: ltr;
}

.reveal-enabled [data-reveal] {
  opacity: 1;
  transform: translateY(22px);
  transition: transform 420ms var(--ease-out);
}

.reveal-enabled [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1180px) {
  .hero-copy {
    padding-inline-start: 18px;
  }

  [dir="ltr"] .hero-copy {
    padding-inline-start: 0;
    padding-inline-end: 18px;
  }
}

@media (max-width: 960px) {
  :root {
    --header-height: 70px;
  }

  .header-inner,
  .hero,
  .product-flow,
  .journey-section,
  .feature-film,
  .download-section,
  .principles,
  .faq,
  .institutions,
  .site-footer {
    width: min(100% - 36px, 760px);
  }

  /*
   * The whole nav used to be display:none below 960px, which took the only
   * persistent download action off every phone and tablet: past the first
   * screen the page had no route to the thing it exists for until the download
   * section ~5000px later. The section links go (they duplicate the page you
   * are already scrolling); the download pill stays in the sticky header.
   */
  .primary-nav > div > a:not(.nav-download) {
    display: none;
  }

  .primary-nav {
    margin-inline-start: auto;
  }

  .primary-nav .nav-download {
    padding-inline: 15px;
    font-size: 14px;
  }

  .hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "visual"
      "bridge"
      "proof";
    min-height: auto;
    padding-block: 56px 86px;
  }

  html[data-device="mobile"] .hero {
    grid-template-areas:
      "copy"
      "bridge"
      "visual"
      "proof";
  }

  .hero-copy {
    max-width: 700px;
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(48px, 9vw, 72px);
  }

  .mobile-bridge {
    grid-area: bridge;
  }

  .hero-visual {
    min-height: 620px;
    margin-block-start: 16px;
  }

  .journey {
    grid-template-columns: 1fr;
  }

  .journey-stage {
    display: none;
  }

  .journey-copy {
    min-width: 0;
  }

  .journey-copy[data-lang-content] > [data-lang].active {
    display: flex;
    gap: 14px;
    padding: 8px 2px 18px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }

  .journey-step {
    flex: 0 0 min(84%, 620px);
    min-height: auto;
    padding: 10px 10px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.66);
    opacity: 1;
    scroll-snap-align: center;
    transform: none;
  }

  .journey-step + .journey-step {
    padding-block-start: 10px;
  }

  .journey-step.is-current,
  [dir="ltr"] .journey-step.is-current {
    border-color: var(--accent);
    transform: none;
  }

  .journey-step .step-label,
  .journey-step h3,
  .journey-step > p:last-of-type {
    margin-inline: 8px;
  }

  .journey-step .step-label {
    margin-block-start: 17px;
  }

  .journey-mobile-shot {
    display: block;
    order: -1;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
  }

  .journey-mobile-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    object-position: top center;
  }

  /*
   * The four steps become a swipe track on small screens. Nothing said so: the
   * next card was simply sliced by the viewport edge, which reads as a broken
   * layout rather than "there is more this way". A position bar under the track
   * (fed by --journey-progress, the same value the desktop stage uses) says how
   * many stops there are and which one you are on.
   */
  .journey::after {
    content: "";
    display: block;
    height: 3px;
    margin-block-start: 2px;
    border-radius: 999px;
    background: linear-gradient(
      to left,
      var(--accent) 0 var(--journey-progress),
      var(--line-strong) var(--journey-progress) 100%
    );
  }

  [dir="ltr"] .journey::after {
    background: linear-gradient(
      to right,
      var(--accent) 0 var(--journey-progress),
      var(--line-strong) var(--journey-progress) 100%
    );
  }

  .download-section,
  .principles,
  .faq[data-lang-content] > [data-lang].active {
    grid-template-columns: 1fr;
  }

  .download-section {
    padding: 46px 38px;
  }

  .principles-heading,
  .faq-heading {
    position: static;
  }

  .principles h2,
  .faq h2 {
    max-width: 15ch;
  }

  .principle-list[data-lang-content] > [data-lang].active {
    grid-template-columns: 1fr;
  }

  .principle-list article {
    min-height: auto;
  }

  .faq[data-lang-content] > [data-lang].active {
    gap: 48px;
  }
}

@media (max-width: 680px) {
  :root {
    --header-height: 66px;
    --radius-lg: 22px;
  }

  body {
    font-size: 17px;
    background: var(--canvas);
  }

  .header-inner,
  .hero,
  .product-flow,
  .journey-section,
  .feature-film,
  .download-section,
  .principles,
  .faq,
  .institutions,
  .site-footer {
    width: calc(100% - 28px);
  }

  .site-header {
    background: rgba(247, 246, 243, 0.97);
  }

  /* Brand, download pill and language control have to share 366px at 390. */
  .header-inner {
    gap: 12px;
  }

  /* The control keeps its frame on mobile — stripping it left the active tab
     floating as a lone block with nothing to belong to. */
  .language-switcher {
    padding: 2px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
  }

  .lang-tab {
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 6px;
    font-size: 13px;
  }

  .hero {
    gap: 20px;
    padding-block: 26px 44px;
  }

  /*
   * 43px over an 11ch measure broke this headline onto three ragged lines with
   * a one-word orphan, and pushed everything else out of the first screen. The
   * headline now fits two lines and the fold can also carry the button and the
   * proof line.
   */
  .hero h1 {
    max-width: 16ch;
    font-size: clamp(32px, 8.8vw, 42px);
    letter-spacing: -0.035em;
    line-height: 1.08;
  }

  .hero-lede {
    margin-block-start: 13px;
    font-size: 17px;
    line-height: 1.55;
  }

  .hero-actions {
    margin-block-start: 18px;
  }

  .hero-actions .primary-download,
  .hero-actions .button-secondary {
    width: 100%;
  }

  .mobile-bridge {
    max-width: none;
    padding: 13px 15px;
  }

  .hero-visual {
    min-height: auto;
    display: grid;
    gap: 0;
  }

  .campus-frame {
    position: relative;
    order: 2;
    inset: auto;
    width: 78%;
    height: 132px;
    margin: -12px 0 0 auto;
    border-radius: 12px var(--radius-lg) var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-small);
  }

  [dir="ltr"] .campus-frame {
    inset: auto;
    margin-inline: auto 0;
  }

  .campus-frame img {
    object-position: 62% center;
  }

  .product-window {
    position: relative;
    order: 1;
    inset: auto;
    z-index: 1;
    width: 100%;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(38, 32, 22, 0.15);
  }

  .window-bar {
    height: 26px;
  }

  .hero-proof p {
    font-size: 13px;
    line-height: 1.5;
  }

  .product-flow {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 18px;
  }

  .product-flow::before {
    inset-block: 12%;
    inset-inline-start: 50%;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
  }

  .flow-core {
    justify-self: center;
  }

  .journey-section,
  .feature-film,
  .principles,
  .faq {
    padding-block: 50px;
  }

  .section-heading {
    margin-block-end: 22px;
  }

  /* Section headings were set at the same weight as the page headline, so every
     scroll re-announced itself at hero volume and the page ran to almost seven
     screens. One display size on the page; sections step down from it. */
  .section-heading h2,
  .download-copy h2,
  .principles h2,
  .faq h2,
  .institutions h2 {
    font-size: clamp(26px, 7.2vw, 34px);
    letter-spacing: -0.03em;
    line-height: 1.14;
  }

  .section-heading > div > p:last-child,
  .download-copy > div > p:last-child,
  .institutions > div > p {
    margin-block-start: 12px;
    font-size: 16px;
    line-height: 1.6;
  }

  .journey-step h3 {
    font-size: 21px;
  }

  .journey-step > p:last-of-type {
    font-size: 16px;
  }

  .film-heading[data-lang-content] > [data-lang].active {
    display: block;
  }

  .film-heading h2 {
    max-width: 20ch;
  }

  .film-heading > div > p:last-child {
    margin-block-start: 14px;
  }

  .film-shell {
    border-radius: 14px;
  }

  .film-chapters {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .film-chapters > div {
    min-width: 660px;
  }

  .film-chapters button {
    flex: 0 0 132px;
    scroll-snap-align: start;
  }

  .film-context > div.active {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .film-context-actions {
    justify-content: flex-start;
    margin-block-start: 4px;
  }

  .film-context .film-tour-link {
    white-space: normal;
  }

  .film-context .button {
    width: 100%;
  }

  .download-section {
    width: 100%;
    padding: 38px 20px;
    border-inline: 0;
    border-radius: 0;
  }

  .download-actions > div.active {
    display: grid;
    grid-template-columns: 1fr;
  }

  .download-actions .button {
    width: 100%;
  }

  .principle-list article {
    padding-block: 24px;
  }

  .faq[data-lang-content] > [data-lang].active {
    gap: 36px;
  }

  .faq-list summary {
    min-height: 60px;
    padding-inline-end: 36px;
    font-size: 16px;
  }

  .faq-list details p {
    padding-inline-end: 0;
    font-size: 15px;
  }

  .institutions {
    padding-block: 44px;
  }

  .institutions .button {
    width: 100%;
  }

  .site-footer {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 13px;
    text-align: center;
  }

  .site-footer nav {
    gap: 2px 16px;
  }
}

/* Under ~430px the header carries brand + download + three language tabs, so
   the pill drops its "free" qualifier. The word is still on the button it
   points at, on the proof line under it, and in the download section. */
@media (max-width: 430px) {
  .nav-download__qualifier {
    display: none;
  }
}

@media (max-width: 390px) {
  .header-inner,
  .hero,
  .product-flow,
  .journey-section,
  .feature-film,
  .principles,
  .faq,
  .institutions,
  .site-footer {
    width: calc(100% - 24px);
  }

  .lang-tab {
    padding-inline: 6px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .campus-frame {
    height: 150px;
  }

  .button {
    min-height: 50px;
    padding-inline: 17px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--canvas);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-enabled [data-reveal] {
    opacity: 1;
    transform: none;
  }
}