/* The pitch pages: index.html, students.html, business.html (October 2026).
   Lars, 2026-10-28: the landing page has to make people curious, not explain;
   a banner, the reason, then the app shown moving, and a door for each kind of
   person. Type is large and short; every claim stands over a picture of it.
   The pictures are mounted into [data-v] slots by v-landing.js, v-students.js
   and v-business.js, which load before site.js so its reveals and glyphs reach
   what they build. */

/* Nothing on these pages may make the page wider than the window: a page that
   can slide sideways shows every picture off centre. clip, not hidden, so main
   is no scroll container and the landing's pinned scene still sticks. */
main { overflow-x: clip; }

/* ---------------------------------------------------------------- The banner */
/* Lars, 2026-10-29: the title, then the mountain with its peak reaching up into
   it, then who it is for. --hs is the title's size and --rw the mountain's
   width, both set here so the lede under it can reach into its mist too. */
.banner { --hs: clamp(54px, 11.4vw, 168px); --rw: min(1400px, 122vw); position: relative; padding: calc(var(--bar-h) + clamp(56px, 8vw, 104px)) 0 0; text-align: center; overflow: hidden; }
.banner .sky, .banner .sky-tint { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.banner-in { position: relative; z-index: 2; }
.banner-h {
  font-size: var(--hs); line-height: .9; letter-spacing: -.055em; font-weight: 700;
  text-wrap: balance; margin-inline: auto;
}
.banner-h span { display: inline-block; }
/* The words arrive one after another, the way a slogan is read out. */
.js .banner-h span { opacity: 0; transform: translateY(.18em); filter: blur(10px); animation: say-in 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .22s + .1s); }
@keyframes say-in { to { opacity: 1; transform: none; filter: none; } }
.banner-lede {
  margin: clamp(24px, 3vw, 36px) auto 0; max-width: 42ch; text-wrap: balance;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45; color: var(--ink-2);
  text-shadow: 0 1px 18px rgba(0, 0, 0, .8);
}
.banner-get { margin-top: clamp(26px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; }
.banner-get .hero-meta { margin: 0; color: var(--ink-3); font-size: 15px; }
/* Wider than the window, centred by equal negative margins rather than left:
   50% and a translate (whose untranslated box reaches far past the right edge),
   and clipped at its hero's sides: overflow there let Safari slide the whole
   page sideways, which put every picture off centre. */
.banner .range, .aud-hero .range {
  position: relative; max-width: none; width: var(--rw);
  margin-left: calc(50% - var(--rw) / 2); margin-right: 0;
}
.banner .range { z-index: 1; margin-top: calc(var(--hs) * -.5 - var(--rw) * .01); }
/* It rises into place under the words as they are read out. */
.js .banner .range { animation: range-up 1.8s var(--ease) .3s both; }
@keyframes range-up { from { opacity: 0; transform: translateY(12%); filter: blur(12px); } }
/* The lede starts in the mist at the mountain's foot. */
.banner-foot .banner-lede { margin-top: calc(var(--rw) * -.03); }

/* The two doors in the banner: who it is for, in the size of a headline. */
.door-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
  max-width: 900px; margin: clamp(36px, 4.6vw, 60px) auto 0; text-align: left;
}
.door-link {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px);
  border-radius: 24px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, rgba(170, 210, 255, .1), rgba(170, 210, 255, .03));
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -50px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  transition: transform .35s var(--ease), border-color .3s ease, box-shadow .4s var(--ease);
}
.door-link:hover { transform: translateY(-3px); border-color: rgba(190, 225, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 30px 80px -30px rgba(47, 123, 255, .55); }
.door-link b { font-family: var(--display); font-weight: 700; font-size: clamp(25px, 2.9vw, 38px); line-height: 1; letter-spacing: -.035em; padding-right: 40px; }
.door-link span { font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.4; color: var(--ink-2); }
.door-link svg { position: absolute; right: clamp(20px, 2.4vw, 28px); top: clamp(22px, 2.6vw, 32px); width: 22px; height: 22px; color: var(--ice); transition: transform .3s var(--ease); }
.door-link:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- A stage
   One claim, centred, and its picture under it at full width. */
.stage { position: relative; padding-top: clamp(128px, 16vw, 224px); }
.stage-head { text-align: center; }
.stage-h {
  font-size: clamp(40px, 6.4vw, 92px); line-height: .96; letter-spacing: -.045em; font-weight: 700;
  max-width: 16ch; margin-inline: auto; text-wrap: balance;
}
.stage-h span { display: inline-block; }
.stage-p {
  margin: clamp(18px, 2vw, 26px) auto 0; max-width: 44ch; text-wrap: balance;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2);
}
.stage-v { position: relative; margin-top: clamp(44px, 6vw, 84px); container-type: inline-size; }
/* A picture that wants the whole width of the window, past the measure. */
.stage-v.bleed { width: 100%; }
.stage-more { display: flex; justify-content: center; margin-top: clamp(26px, 3vw, 40px); }
.stage-more .more { margin: 0; }

/* The turn: short lines that land one after another. */
.chain { list-style: none; padding: 0; margin: clamp(56px, 7vw, 104px) auto 0; text-align: center; }
.chain li {
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}
.chain li + li { margin-top: .12em; }
.chain li.dim { color: var(--ink-3); }
.chain li.ice { color: var(--ice); }
.chain-after { margin: clamp(28px, 3.4vw, 44px) auto 0; max-width: 40ch; text-align: center; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); text-wrap: balance; }

/* ---------------------------------------------------------------- The doors, large */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(44px, 6vw, 80px); }
.door {
  position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, rgba(170, 210, 255, .08), rgba(170, 210, 255, .02));
  border: 1px solid var(--rim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 90px -50px rgba(0, 0, 0, .9);
  transition: transform .4s var(--ease), border-color .3s ease, box-shadow .4s var(--ease);
}
.door:hover { transform: translateY(-4px); border-color: rgba(190, 225, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 100px -40px rgba(47, 123, 255, .55); }
.door-v { position: relative; height: clamp(240px, 30vw, 380px); container-type: inline-size; overflow: hidden; }
.door-t { padding: clamp(20px, 2.4vw, 32px); padding-top: clamp(14px, 1.6vw, 22px); }
.door-t h3 { font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.04em; }
.door-t p { margin-top: 12px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: var(--ink-2); max-width: 36ch; }
.door-t .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; color: var(--ice); }
.door-t .go svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.door:hover .go svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- An audience page's hero */
.aud-hero { position: relative; padding: calc(var(--bar-h) + clamp(56px, 8vw, 104px)) 0 0; text-align: center; overflow: hidden; overflow: clip visible; }
.aud-hero h1 {
  font-size: clamp(46px, 8.4vw, 124px); line-height: .92; letter-spacing: -.05em; font-weight: 700;
  max-width: 13ch; margin-inline: auto; text-wrap: balance;
}
.aud-hero h1 span { display: inline-block; }
.js .aud-hero h1 span { opacity: 0; transform: translateY(.18em); filter: blur(10px); animation: say-in 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .2s + .1s); }
.aud-hero .banner-lede { max-width: 40ch; }
.aud-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: clamp(22px, 2.6vw, 32px); font-weight: 600; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.aud-tag img { width: 24px; height: 24px; border-radius: 6px; }
.aud-hero .range { --rw: min(1300px, 118vw); z-index: 0; margin-top: clamp(10px, 2vw, 30px); opacity: .9; }
.aud-hero + .stage { padding-top: clamp(40px, 6vw, 90px); }

/* The small print under a picture: where to get it, what is still to come. */
.stage-fine { margin: clamp(18px, 2vw, 26px) auto 0; max-width: 60ch; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.stage-fine a { color: var(--ink-2); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* A statement as big as the banner, for the one thing a page must leave behind. */
.manifest { padding-top: clamp(128px, 16vw, 224px); text-align: center; }
.manifest p {
  font-family: var(--display); font-weight: 700; font-size: clamp(38px, 6.4vw, 96px); line-height: .98; letter-spacing: -.045em;
  max-width: 15ch; margin-inline: auto; text-wrap: balance;
}
.manifest p + p { margin-top: .2em; }
.manifest p.dim { color: var(--ink-3); }
.manifest .chain-after { margin-top: clamp(28px, 3.4vw, 44px); }

/* The hard questions, under a page's pictures. */
.asks-sec { padding-top: clamp(112px, 14vw, 190px); }
.asks-sec .qa-list { max-width: 820px; margin: clamp(36px, 4.4vw, 60px) auto 0; }

@media (max-width: 760px) {
  .door-row { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
  .doors { grid-template-columns: minmax(0, 1fr); }
  .banner { --rw: 200vw; }
  .aud-hero .range { --rw: 190vw; }
}
@media (prefers-reduced-motion: reduce) {
  .js .banner-h span, .js .aud-hero h1 span { opacity: 1; transform: none; filter: none; animation: none; }
  .door-link, .door, .door-link:hover, .door:hover { transform: none; }
  .js .banner .range { animation: none; }
}