/* ==========================================================================
   Bedu — landing page
   Aesthetic: desert night cartography. Deep indigo ground, sand typography,
   ember accent.

   Every colour, type family and easing value on this page arrives from the one
   authoritative token declaration, src/design-tokens/tokens.ts, by way of the
   generated artifact imported below — the same artifact src/index.css imports
   (Requirements 10.2, 10.3, 10.4). A token value therefore cannot drift between
   the app and this page, and there is no build step here to keep in sync.

   Consequences worth knowing before editing:
   - No colour literal belongs in this file. Not a hex, not rgb(), not hsl().
     scripts/generate-design-tokens.test.mjs fails the local quality gate on
     one. Where a translucent value is wanted, mix a token with `transparent`.
   - The import carries the three family stacks (--font-family-display, -body,
     -mono) but no @font-face. Fraunces, Karla and IBM Plex Mono are loaded from
     Google Fonts by a <link> in index.html, using the same URL the app uses.
   - Only landing-only values are declared locally below: the shell width, the
     corner radius, and the two hairline rules — and the hairlines are mixes of
     a token rather than values of their own.
   ========================================================================== */

@import "tokens.generated.css";

:root {
  /* Hairline rules. Derived from --bedu-sand rather than declared: a hairline
     is this page's own decoration, but its colour is not its own. */
  --line:   color-mix(in srgb, var(--bedu-sand) 13%, transparent);
  --line-2: color-mix(in srgb, var(--bedu-sand) 7%, transparent);

  /* Landing-only layout. No app counterpart, so no token. */
  --shell:  1220px;
  --r:      14px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bedu-ink);
  color: var(--bedu-sand);
  font-family: var(--font-family-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.62;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

h1 {
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 5.1rem);
  font-weight: 300;
}
h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--bedu-sand);
  position: relative;
}
h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .07em;
  height: 2px;
  background: linear-gradient(90deg, var(--bedu-accent), transparent 92%);
  opacity: .75;
}

h2 { font-size: clamp(1.85rem, 1.15rem + 2.5vw, 3.15rem); }
h3 { font-size: 1.16rem; line-height: 1.25; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.mono, .mono-label {
  font-family: var(--font-family-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-family: var(--font-family-mono);
  font-size: .715rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin: 0 0 1.15rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--bedu-accent);
  flex: none;
}

.skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: .75rem 1.15rem;
  background: var(--bedu-sand);
  color: var(--bedu-ink);
  font-size: .9rem;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--bedu-accent-up);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Film grain over everything */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .42;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  --pad-y: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: var(--pad-y) 1.4rem;
  border-radius: 999px;
  font-family: var(--font-family-body);
  font-size: .93rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform .3s var(--easing-desert), background-color .3s var(--easing-desert),
              border-color .3s var(--easing-desert), box-shadow .3s var(--easing-desert), color .3s var(--easing-desert);
}

.btn-primary {
  background: var(--bedu-sand);
  color: var(--bedu-ink);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bedu-highlight) 25%, transparent) inset,
              0 12px 30px -14px color-mix(in srgb, var(--bedu-sand) 50%, transparent);
}
.btn-primary:hover {
  background: var(--bedu-sand-up);
  transform: translateY(-2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--bedu-highlight) 30%, transparent) inset,
              0 18px 38px -14px color-mix(in srgb, var(--bedu-sand) 60%, transparent);
}

.btn-ghost {
  border-color: var(--line);
  color: var(--bedu-sand);
  background: color-mix(in srgb, var(--bedu-sand) 3%, transparent);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--bedu-sand) 34%, transparent);
  background: color-mix(in srgb, var(--bedu-sand) 7%, transparent);
  transform: translateY(-2px);
}

.btn-sm { --pad-y: .58rem; font-size: .855rem; padding-inline: 1.1rem; }
.btn-lg { --pad-y: 1.02rem; font-size: 1rem; padding-inline: 1.85rem; }

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bedu-ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--easing-desert), background-color .4s var(--easing-desert);
}
.topbar.is-stuck {
  border-bottom-color: var(--line-2);
  background: color-mix(in srgb, var(--bedu-ink) 93%, transparent);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 74px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--bedu-sand);
  margin-right: auto;
}
/*
  The mark is two-coloured: sand ridges carrying an ember star, matching the app
  Logo component. `currentColor` inside the svg therefore resolves to sand, and
  only the accent element is repainted — which works because `color` inherits,
  so a nested element can hold its own `currentColor`.
*/
.wordmark-glyph {
  width: 26px; height: 26px;
  color: var(--bedu-sand);
  display: grid;
  place-items: center;
}
.wordmark-glyph svg { width: 100%; height: 100%; }
.wordmark-glyph .glyph-accent { color: var(--bedu-accent); }
.wordmark-sm { font-size: 1.3rem; margin-right: 0; }

.topnav {
  display: flex;
  gap: 1.9rem;
  font-size: .89rem;
  color: var(--bedu-sand-dim);
}
.topnav a {
  text-decoration: none;
  position: relative;
  padding-block: .3rem;
  transition: color .25s var(--easing-desert);
}
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bedu-accent);
  transition: width .3s var(--easing-desert);
}
.topnav a:hover { color: var(--bedu-sand); }
.topnav a:hover::after { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(3.5rem, 6vw, 7rem) 0 clamp(4rem, 7vw, 8rem);
  background:
    radial-gradient(120% 85% at 12% -10%, color-mix(in srgb, var(--bedu-secondary) 50%, transparent), transparent 62%),
    radial-gradient(85% 70% at 92% 8%, color-mix(in srgb, var(--bedu-accent) 16%, transparent), transparent 58%),
    linear-gradient(180deg, var(--bedu-night) 0%, var(--bedu-ink) 78%);
  overflow: hidden;
}

.stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, color-mix(in srgb, var(--bedu-highlight) 55%, transparent), transparent),
    radial-gradient(1px 1px at 34% 12%, color-mix(in srgb, var(--bedu-highlight) 40%, transparent), transparent),
    radial-gradient(1.6px 1.6px at 62% 18%, color-mix(in srgb, var(--bedu-highlight) 50%, transparent), transparent),
    radial-gradient(1px 1px at 78% 32%, color-mix(in srgb, var(--bedu-highlight) 35%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 88% 12%, color-mix(in srgb, var(--bedu-highlight) 45%, transparent), transparent),
    radial-gradient(1px 1px at 8% 42%, color-mix(in srgb, var(--bedu-highlight) 30%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 46% 36%, color-mix(in srgb, var(--bedu-highlight) 32%, transparent), transparent),
    radial-gradient(1px 1px at 70% 52%, color-mix(in srgb, var(--bedu-highlight) 26%, transparent), transparent);
  animation: twinkle 7s ease-in-out infinite alternate;
}
.stars-soft { opacity: .6; }
@keyframes twinkle { from { opacity: .5; } to { opacity: 1; } }

.dunes {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 46%;
  pointer-events: none;
}
.dunes svg { width: 100%; height: 100%; display: block; }

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.hero-copy h1 { margin-bottom: 1.5rem; }

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--bedu-sand) 82%, transparent);
  max-width: 46ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2.1rem;
}
.hero-cta.center { justify-content: center; }

.trustline {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin: 2.1rem 0 0;
  padding: 0;
  font-family: var(--font-family-mono);
  font-size: .755rem;
  letter-spacing: .04em;
  color: var(--bedu-sand-dim);
}
.trustline li { display: flex; align-items: center; gap: .5rem; }
.trustline li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bedu-teal);
  flex: none;
}

/* ── Residency ribbon ────────────────────────────────────────────────── */

.ribbon-card {
  margin: 0;
  padding: clamp(1.3rem, 2.2vw, 1.9rem);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bedu-sand) 5.5%, transparent), color-mix(in srgb, var(--bedu-sand) 1.5%, transparent));
  backdrop-filter: blur(6px);
  box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--bedu-shadow) 95%, transparent);
}

.ribbon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.mono-label {
  font-family: var(--font-family-mono);
  font-size: .715rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
}
.ribbon-year {
  font-size: 1.6rem;
  color: var(--bedu-sand);
  letter-spacing: -.02em;
}

/* Twelve rows, one per month. One cell per day, coloured by the country
   that day is attributed to. Same shape as the app's dashboard calendar. */
.ribbon {
  display: grid;
  grid-template-columns: 1.85rem repeat(31, 1fr);
  gap: 2px;
  align-items: center;
}
.ribbon .mlab {
  font-family: var(--font-family-mono);
  font-size: .585rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  opacity: .72;
  text-align: right;
  padding-right: .45rem;
  font-style: normal;
}
.ribbon i.day {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--cell, var(--country-home));
  animation: pop .5s var(--easing-desert) both;
  animation-delay: calc(var(--i) * 1.5ms);
  transition: filter .2s var(--easing-desert), transform .2s var(--easing-desert);
}
.ribbon i.day[data-abroad="0"] { opacity: .34; }
.ribbon i.day:hover {
  filter: brightness(1.55);
  transform: scale(1.35);
}
.ribbon i.pad { visibility: hidden; }
@keyframes pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.ribbon i.day[data-abroad="0"] { animation-name: popDim; }
@keyframes popDim {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: .34; transform: scale(1); }
}

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1.05rem;
  margin: 1.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-family-mono);
  font-size: .69rem;
  letter-spacing: .05em;
  color: var(--bedu-sand-dim);
}
.legend li { display: flex; align-items: center; gap: .42rem; }
.legend i {
  width: 9px; height: 9px;
  border-radius: 2px;
  flex: none;
}
.legend i[data-swatch="home"] { background: var(--country-home); }
.legend i[data-swatch="PT"]   { background: var(--country-2); }
.legend i[data-swatch="TH"]   { background: var(--country-7); }
.legend i[data-swatch="DE"]   { background: var(--country-1); }
.legend i[data-swatch="ES"]   { background: var(--country-6); }
.legend i[data-swatch="JP"]   { background: var(--country-4); }

.ribbon-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.3rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.ribbon-stats dt {
  font-family: var(--font-family-mono);
  font-size: .655rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin-bottom: .3rem;
}
.ribbon-stats dd {
  margin: 0;
  font-size: 1.62rem;
  letter-spacing: -.03em;
  color: var(--bedu-sand);
  line-height: 1;
}
.ribbon-stats dd small { font-size: .55em; color: var(--bedu-sand-dim); }

/* ── Problem ─────────────────────────────────────────────────────────── */

.problem {
  padding: clamp(4rem, 8vw, 8.5rem) 0;
  border-top: 1px solid var(--line-2);
  background: var(--bedu-ink);
}
.problem-inner { max-width: 62rem; }
.problem h2 {
  font-size: clamp(1.6rem, 1.05rem + 2vw, 2.7rem);
  line-height: 1.22;
  letter-spacing: -.02em;
  margin-bottom: 2.4rem;
  color: color-mix(in srgb, var(--bedu-sand) 92%, transparent);
}
.scatter {
  font-style: italic;
  color: var(--bedu-accent-up);
}
.problem-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.6rem 2.6rem;
  color: color-mix(in srgb, var(--bedu-sand) 68%, transparent);
  font-size: .995rem;
}
.pull {
  font-family: var(--font-family-display);
  font-size: 1.32rem;
  line-height: 1.35;
  font-style: italic;
  color: var(--bedu-sand);
  border-left: 2px solid var(--bedu-accent);
  padding-left: 1.3rem;
}

/* ── Section heads ───────────────────────────────────────────────────── */

.sec-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.sec-sub {
  margin-top: 1.1rem;
  color: var(--bedu-dark-dim);
  font-size: 1.05rem;
}

/* ── How it works ────────────────────────────────────────────────────── */

.how {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: linear-gradient(180deg, var(--bedu-ink), var(--bedu-night));
  border-top: 1px solid var(--line-2);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  position: relative;
}

.step {
  position: relative;
  padding-top: 2.6rem;
  display: flex;
  flex-direction: column;
}
/* dotted breadcrumb trail between steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: .72rem;
  left: 3.4rem;
  right: -1.6rem;
  height: 1px;
  background-image: linear-gradient(90deg, var(--bedu-sand-dim) 0 4px, transparent 4px 10px);
  background-size: 10px 1px;
  opacity: .38;
}
.step-n {
  position: absolute;
  top: 0;
  left: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--bedu-accent);
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--bedu-accent) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bedu-accent) 7%, transparent);
}
.step h3 { margin-bottom: .8rem; }
.step p {
  color: color-mix(in srgb, var(--bedu-sand) 66%, transparent);
  font-size: .955rem;
}
.step-meta {
  font-size: .69rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin-top: auto;
  padding-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line-2);
}

/* ── Core rule + calendar ────────────────────────────────────────────── */

.core {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: var(--bedu-night);
}
.core-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.core-copy p {
  color: color-mix(in srgb, var(--bedu-sand) 70%, transparent);
  max-width: 48ch;
}
.core-copy h2 { margin-bottom: 1.5rem; }

.cal {
  margin: 0;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bedu-sand) 5%, transparent), color-mix(in srgb, var(--bedu-sand) 1.2%, transparent));
  box-shadow: 0 40px 70px -50px var(--bedu-shadow);
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: .9rem;
  letter-spacing: .02em;
}
.cal-tag {
  font-family: var(--font-family-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bedu-accent);
  padding: .22rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bedu-accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bedu-accent) 26%, transparent);
}
/*
   The example month mirrors Month_Calendar in the app (Requirement 10.8), and
   the numbers here are the app's numbers, not approximations of them:

   - Day cells carry an 80% country tint over the ground, the value
     src/lib/contrast.test.ts asserts as MONTH_CELL_TINT. Home days drop to 25%,
     because a home day encodes the absence of foreign travel and must not
     compete with the countries the colouring exists to show.
   - The day number never sits on a country fill. It renders in the mono family
     inside a ground-coloured plate, so its measured contrast pair is
     sand-on-ground.
   - Booking dots sit in that same plate, for the same reason: the pair becomes
     dot-against-ground rather than dot-against-fill.
   - The trip bar is inset by two-thirds of a column at its actual start and
     end, is rounded only on those ends, and carries a 1 px ground outline to
     separate it from the fill beneath.

   Cells sit in one row wrapper per week so the bars can be positioned against
   the row, which is how MonthlyCalendar does it with table rows.
*/
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  font-size: .63rem;
  letter-spacing: .1em;
  color: var(--bedu-sand-dim);
  opacity: .7;
  margin-bottom: 6px;
  text-align: center;
}
.cal-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cal-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal-cell {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--cal-fill, color-mix(in srgb, var(--bedu-highlight) 1.2%, transparent));
}
.cal-cell.is-empty { border-color: transparent; background: none; }

/* Foreign day: the country fill at the asserted 80% tint. */
.cal-cell.is-away {
  --cal-fill: color-mix(in srgb, var(--cal-country) 80%, var(--bedu-ink));
  border-color: transparent;
}

/* The day number and any booking dot sit directly on the cell fill, centred,
   with no separate plate — this is a simplified illustrative reference for
   how a trip sits inside a month, not a pixel match to the app's own
   MonthlyCalendar rendering. */
.cal-plate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.cal-num {
  font-family: var(--font-family-mono);
  font-size: .78rem;
  font-style: normal;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--bedu-sand);
}
.cal-dots {
  display: inline-flex;
  gap: 1px;
}
.cal-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bedu-sand);
}

.cal-key {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-family-mono);
  font-size: .67rem;
  letter-spacing: .05em;
  color: var(--bedu-sand-dim);
}
.cal-key span { display: flex; align-items: center; gap: .4rem; }
.cal-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.k-away { background: color-mix(in srgb, var(--country-2) 80%, var(--bedu-ink)); }
.k-dot {
  background: var(--bedu-accent);
  border-radius: 50% !important;
  width: 5px !important;
  height: 5px !important;
}

/* ── Feature cards ───────────────────────────────────────────────────── */

.features {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: linear-gradient(180deg, var(--bedu-night), var(--bedu-ink));
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.15rem;
}
.card {
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bedu-sand) 2.2%, transparent);
  position: relative;
  overflow: hidden;
  transition: transform .4s var(--easing-desert), border-color .4s var(--easing-desert), background-color .4s var(--easing-desert);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bedu-accent), transparent);
  opacity: 0;
  transition: opacity .4s var(--easing-desert);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line);
  background: color-mix(in srgb, var(--bedu-sand) 4.5%, transparent);
}
.card:hover::before { opacity: .8; }
.card h3 { margin-bottom: .7rem; }
.card p {
  color: color-mix(in srgb, var(--bedu-sand) 62%, transparent);
  font-size: .93rem;
}

.chip {
  display: inline-block;
  vertical-align: middle;
  margin-left: .45rem;
  font-family: var(--font-family-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bedu-gold);
  padding: .2rem .45rem;
  border: 1px solid color-mix(in srgb, var(--bedu-gold) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bedu-gold) 8%, transparent);
  position: relative;
  top: -1px;
}

/* ── Use cases ───────────────────────────────────────────────────────── */

.who {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: var(--bedu-ink);
  border-top: 1px solid var(--line-2);
}
.usecases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.uc {
  padding: 1.9rem 1.6rem;
  background: var(--bedu-ink);
  transition: background-color .4s var(--easing-desert);
}
.uc:hover { background: color-mix(in srgb, var(--bedu-night) 60%, var(--bedu-ink)); }
.uc-n {
  display: block;
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--bedu-accent);
  margin-bottom: 1rem;
  opacity: .85;
}
.uc h3 { margin-bottom: .65rem; font-size: 1.08rem; }
.uc p {
  color: color-mix(in srgb, var(--bedu-sand) 58%, transparent);
  font-size: .91rem;
}
/* Nine use cases fill a 3 x 3 grid exactly, so no cell is left hollow. */
.usecases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .usecases { grid-template-columns: 1fr; } }

/* ── Determinism ─────────────────────────────────────────────────────── */

.det {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background:
    radial-gradient(75% 100% at 78% 50%, color-mix(in srgb, var(--bedu-teal) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bedu-ink), var(--bedu-night-2));
  border-top: 1px solid var(--line-2);
}
.det-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.det-copy p {
  color: color-mix(in srgb, var(--bedu-sand) 70%, transparent);
  max-width: 48ch;
}
.det-copy h2 { margin-bottom: 1.4rem; }

.det-proof {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.9rem 1.8rem 2.1rem;
  background: color-mix(in srgb, var(--bedu-ink) 55%, transparent);
  backdrop-filter: blur(4px);
}
.proof-h {
  font-size: .655rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin: 0 0 1.5rem;
}

.pipe {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
}
.pipe li {
  display: flex;
  align-items: center;
  gap: .95rem;
  padding: .68rem 0;
  position: relative;
}
/* dotted trail joining the stages */
.pipe li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .74rem;
  top: 2.1rem;
  bottom: -.35rem;
  width: 1px;
  background-image: linear-gradient(180deg, var(--bedu-sand-dim) 0 3px, transparent 3px 8px);
  background-size: 1px 8px;
  opacity: .4;
}
.pipe-k {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bedu-teal) 45%, transparent);
  background: color-mix(in srgb, var(--bedu-teal) 10%, transparent);
  color: var(--bedu-teal);
  font-size: .6rem;
  letter-spacing: .02em;
}
.pipe-v { font-size: .95rem; color: color-mix(in srgb, var(--bedu-sand) 78%, transparent); }

.proof-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-2);
  font-size: clamp(.95rem, .85rem + .5vw, 1.16rem);
  color: var(--bedu-sand);
  flex-wrap: wrap;
  text-align: center;
}
.proof-arrow {
  color: var(--bedu-teal);
  font-size: 1.5em;
  line-height: 1;
}
.proof-note {
  margin-top: .95rem;
  font-size: .655rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bedu-teal);
  text-align: center;
}

/* ── Privacy (light inversion) ───────────────────────────────────────── */

.privacy {
  padding: clamp(4rem, 7vw, 8rem) 0;
  background:
    radial-gradient(90% 60% at 15% 0%, var(--bedu-bone-up), transparent 60%),
    var(--bedu-bone);
  color: var(--bedu-dark-ink);
}
.privacy h2, .privacy h3 { color: var(--bedu-dark-ink); }
.privacy .eyebrow { color: var(--bedu-clay); }
.privacy .eyebrow::before { background: var(--bedu-accent); }

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}
.pcard {
  padding: 1.55rem 1.45rem;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--bedu-highlight) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--bedu-dark-ink) 9%, transparent);
  transition: transform .4s var(--easing-desert), box-shadow .4s var(--easing-desert);
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px color-mix(in srgb, var(--bedu-dark-ink) 30%, transparent);
}
.pcard h3 {
  margin-bottom: .6rem;
  font-size: 1.08rem;
  display: flex;
  gap: .6rem;
  align-items: baseline;
}
.pcard h3::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bedu-teal);
  flex: none;
  transform: translateY(-2px);
}
.pcard p { color: var(--bedu-dark-dim); font-size: .93rem; }

.limits {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r);
  border: 1px dashed color-mix(in srgb, var(--bedu-dark-ink) 20%, transparent);
  background: color-mix(in srgb, var(--bedu-highlight) 35%, transparent);
}
.limits-h {
  font-family: var(--font-family-mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bedu-clay);
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.limits dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.6rem 2.2rem;
  margin: 0;
}
.limits dt {
  font-family: var(--font-family-display);
  font-size: 1.04rem;
  margin-bottom: .45rem;
  color: var(--bedu-dark-ink);
}
.limits dd { margin: 0; color: var(--bedu-dark-dim); font-size: .9rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq {
  padding: clamp(4rem, 7vw, 7.5rem) 0;
  background: var(--bedu-ink);
}
.faq-inner { max-width: 56rem; }
.faq-list { border-top: 1px solid var(--line-2); }

details {
  border-bottom: 1px solid var(--line-2);
}
summary {
  cursor: pointer;
  list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0;
  position: relative;
  font-family: var(--font-family-display);
  font-size: clamp(1.02rem, .98rem + .25vw, 1.2rem);
  color: var(--bedu-sand);
  transition: color .25s var(--easing-desert);
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--bedu-accent-up); }

.chev {
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 1.5px solid var(--bedu-sand-dim);
  border-bottom: 1.5px solid var(--bedu-sand-dim);
  transform: rotate(45deg);
  transition: transform .35s var(--easing-desert), border-color .25s var(--easing-desert);
}
details[open] .chev { transform: rotate(225deg); border-color: var(--bedu-accent); }
summary:hover .chev { border-color: var(--bedu-accent-up); }

details p {
  padding: 0 3rem 1.5rem 0;
  margin: 0;
  color: color-mix(in srgb, var(--bedu-sand) 62%, transparent);
  font-size: .955rem;
  max-width: 68ch;
  animation: fadeIn .4s var(--easing-desert) both;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Closing CTA ─────────────────────────────────────────────────────── */

.start {
  position: relative;
  padding: clamp(4.5rem, 9vw, 9rem) 0;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(90% 110% at 50% 120%, color-mix(in srgb, var(--bedu-accent) 20%, transparent), transparent 60%),
    radial-gradient(70% 90% at 50% -20%, color-mix(in srgb, var(--bedu-secondary) 55%, transparent), transparent 65%),
    var(--bedu-night);
  border-top: 1px solid var(--line-2);
}
.start-inner { position: relative; max-width: 48rem; }
.start .eyebrow { justify-content: center; }
.start h2 { margin-bottom: 1.5rem; }
.start .lede { margin-inline: auto; max-width: 52ch; }
.microcopy {
  margin-top: 1.8rem;
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--bedu-sand-dim);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer {
  padding: clamp(3rem, 5vw, 5rem) 0 2.5rem;
  background: var(--bedu-ink);
  border-top: 1px solid var(--line-2);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 4vw, 4rem);
}
.footer-name h2 {
  font-size: 1.1rem;
  font-family: var(--font-family-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin-bottom: 1.2rem;
}
.footer-name p {
  max-width: 62ch;
  color: color-mix(in srgb, var(--bedu-sand) 58%, transparent);
  font-size: .95rem;
  font-style: italic;
  font-family: var(--font-family-display);
  font-size: 1.08rem;
  line-height: 1.5;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
}
.footer-meta > p.mono {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bedu-sand-dim);
  margin: 0;
}
.footer-meta nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: .6rem;
  font-size: .88rem;
}
.footer-meta nav a {
  color: color-mix(in srgb, var(--bedu-sand) 65%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--easing-desert), border-color .25s var(--easing-desert);
}
.footer-meta nav a:hover { color: var(--bedu-sand); border-color: var(--bedu-accent); }
.footer-contact {
  margin: 0;
  font-size: .88rem;
}
.footer-contact a {
  color: color-mix(in srgb, var(--bedu-sand) 65%, transparent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--easing-desert), border-color .25s var(--easing-desert);
}
.footer-contact a:hover,
.footer-contact a:focus-visible { color: var(--bedu-sand); border-color: var(--bedu-accent); }
.copyright { margin-top: auto; font-size: .68rem; color: var(--bedu-sand-dim); opacity: .7; }

/* ── Reveal on scroll ────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--easing-desert) var(--d, 0s), transform .75s var(--easing-desert) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .topnav { display: none; }
}

/* Let the headline wrap naturally once the hard break stops helping. */
@media (max-width: 760px) {
  .br-lg { display: none; }
}

@media (max-width: 940px) {
  .hero-inner,
  .core-inner,
  .det-inner,
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .hero { padding-top: 2.5rem; }
  .core-inner { gap: 2.5rem; }
  .step:not(:last-child)::after { display: none; }
  .footer-inner { gap: 2.5rem; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 76px; }
  .ribbon { grid-template-columns: 1.5rem repeat(31, 1fr); gap: 1.5px; }
  .ribbon .mlab { font-size: .5rem; padding-right: .3rem; letter-spacing: .04em; }
  .ribbon-stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .trustline { gap: .45rem 1rem; }
  .topbar-inner { min-height: 64px; gap: 1rem; }
  .problem h2 { margin-bottom: 1.8rem; }
  .pull { font-size: 1.15rem; }
  details p { padding-right: 1rem; }
  .btn { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .topbar .btn { width: auto; }
}

/* ── Motion / contrast preferences ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .stars { animation: none; }
}

@media print {
  .grain, .stars, .dunes, .topbar { display: none; }
  body { background: var(--bedu-highlight); color: var(--bedu-shadow); }
}