/* Section layout for the alternative landing page. Hairline rules and full
 * bleed grids do the structural work here; there are no cards and no shadows. */

/* ── Header ───────────────────────────────────────────────────────────── */
.head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.head.scrolled{border-bottom-color:var(--line)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;
  height:84px}
.brand{display:flex;align-items:center;gap:12px;font:700 16px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase}
.brand img{width:30px;height:30px}
.head nav{display:flex;align-items:center;gap:32px}
.head nav a.navlink{font:500 12px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-60)}
.head nav a.navlink:hover{color:var(--ink)}
/* The DE/EN switch is styled in base.css, which the privacy statement shares.
 * Here it only has to keep its place when the section links are dropped on a
 * narrow screen - a reader who cannot read the page needs it more than the
 * anchors, not less. */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* One wash of brand behind the headline. It is the only thing on this page
 * that is not a flat colour, and it stops the top of the page reading as a
 * white sheet with type on it. */
.hero{padding:clamp(56px,9vw,120px) 0 0;position:relative;overflow:hidden}
.hero .wrap{padding-bottom:clamp(40px,6vw,72px)}
.hero::before{content:"";position:absolute;inset:-34% 0 auto;height:720px;
  background:radial-gradient(52% 46% at 22% 0%,rgba(11,71,180,.10),transparent 70%);
  pointer-events:none}
.hero .wrap{position:relative}
.hero h1{margin:0 0 28px}
.hero h1 .accent{color:var(--brand)}
.hero .lead{margin-top:18px;font-size:18px;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 18px}
/* The one line that says what the plant gets out of it, rather than what the
   product is. It comes first under the headline and is the largest text after
   it: a reader who leaves after four seconds should leave knowing this much.
   The sentence explaining *how* sits under it, deliberately smaller. */
.hero-value{margin-top:32px;font:700 clamp(22px,2.4vw,30px)/1.3 var(--sans);
  letter-spacing:-.02em;color:var(--brand);max-width:34ch}

/* ── Marquee strip ────────────────────────────────────────────────────── */
/* The ticker is the first colour after the hero: a dark bar that separates
 * the headline from the product and gives the eye somewhere to land. */
.marquee{background:var(--brand-ink);color:var(--paper);
  margin-top:clamp(48px,7vw,88px);overflow:hidden;padding:18px 0}
.marquee-track{display:flex;gap:56px;width:max-content;
  animation:slide 38s linear infinite}
.marquee-track span{font:500 12px/1 var(--mono);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap}
.marquee-track span::after{content:"/";margin-left:56px;color:var(--accent-2)}
/* The second copy of the claims only exists so the slide can loop seamlessly.
 * It is one repetition, not content: hidden from assistive tech in the markup,
 * and dropped entirely when the strip does not move. */
.marquee-dup{display:contents}

@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;
    row-gap:12px}
  .marquee-dup{display:none}
}

/* ── Generic section ──────────────────────────────────────────────────── */
section{padding:clamp(64px,9vw,128px) 0}
section.tight{padding-top:clamp(40px,6vw,80px)}
.sec-head{display:grid;gap:24px;margin-bottom:clamp(46px,6vw,76px);max-width:900px}
.sec-head h2{margin:0}

/* Two variants on the section head, so the page does not open every section
 * the same way: the statement and its explanation side by side, and the
 * centred one. Both collapse back to the stacked default under 900px. */
.sec-head-two{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);align-items:end}
.sec-head-mid{justify-items:center;text-align:center;margin-inline:auto}
.sec-head-mid .h-rule::after{margin-inline:auto;background:var(--accent-2)}

/* ── Colour band ──────────────────────────────────────────────────────── */
/* One full-bleed band, on the four functions. It was flat brand blue and that
 * was a mistake at that size - a whole section of saturated colour is what
 * the eye fights, however right the colour is. This is a deep indigo-violet
 * instead: dark enough to be restful, saturated enough to be a colour rather
 * than another near-white, and out of the navy family the closing section
 * uses so the two do not read as the same block twice. */
/* The pale companion to the band above: same family, low enough to sit under
 * a dark section without the two competing. */
.band-soft{background:var(--band-soft)}
.band-soft .timeline::before{background:var(--accent-3)}
.js-reveal .band-soft .timeline .tl .num{background:var(--band-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent-3)}

.band-solid{background:var(--band);color:var(--paper)}
.band-solid .lead{color:rgba(255,255,255,.72)}
.band-solid .fn{border-bottom-color:rgba(255,255,255,.22)}
.band-solid .functions{border-top-color:rgba(255,255,255,.22)}
.band-solid .fn .n{color:var(--accent-3)}
.band-solid .fn p{color:rgba(255,255,255,.72)}
.band-solid .fn .stat span{color:var(--accent-3);opacity:.8}
.band-solid .h-rule::after{background:var(--accent-3)}
/* The rule each row draws as it arrives has to be light here or it vanishes
   into the band. reveal.css is linked after this file and sets that colour at
   equal specificity, so the override has to out-specify it rather than just
   restate it. */
.js-reveal .band-solid .fn::after{background:var(--accent-3)}

/* ── Numbered function grid (create / distribute / learn / scale) ─────── */
.functions{border-top:1px solid var(--line)}
.fn{display:grid;grid-template-columns:88px minmax(0,1fr) 210px;gap:32px;
  padding:42px 0;border-bottom:1px solid var(--line);align-items:start}
/* The big numerals sit in the mono on purpose: the page's identity lives in
 * its mono microtype (navlinks, marquee, stats, week labels), and the loudest
 * numbers on the page are where that face earns its keep. */
.fn .n{font:700 34px/1 var(--mono);color:var(--brand)}
.fn h3{font:700 26px/1.05 var(--sans);letter-spacing:-.03em;text-transform:uppercase;
  margin-bottom:10px}
.fn p{color:var(--ink-60);max-width:56ch}
.fn .stat{text-align:right}
.fn .stat b{display:block;font:700 40px/1 var(--mono)}
.fn .stat span{font:500 10px/1.4 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-40)}

/* ── Split feature blocks ─────────────────────────────────────────────── */
.split{display:grid;gap:clamp(28px,4vw,56px);align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.split .figure.portrait .device-phone{max-width:330px}
.split .body h2{margin:0 0 22px}
.split ul{list-style:none;margin-top:28px;display:grid;gap:16px}
.split li{display:flex;gap:12px;color:var(--ink-60);font-size:16px}
.split li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:8px;
  background:var(--brand)}
.split.reverse .figure{order:2}

/* ── Device frames ───────────────────────────────────────── */
/* Every product screenshot says which screen it is. Both frames are lifted
 * from the main landing page (static/css/product/) on purpose, so the two
 * takes present the product identically even where they disagree about
 * everything else: a soft-cornered pane under a wide shadow for the desktop
 * views, a black handset for the driver views.
 *
 * This is the page's one sanctioned exception to "hairlines, no shadows" -
 * the frames are the product, not page furniture, and matching / matters
 * more here than internal consistency of the treatment.
 */
.device{position:relative;background:var(--paper)}
.device img{display:block;width:100%}

/* Desktop: exactly the .shot treatment from the main page - rounded pane,
 * hairline edge, one deep shadow. No browser chrome; the screenshot is of an
 * application, and drawing a fake title bar around it only adds furniture. */
.device-desktop{border-radius:16px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}

/* Phone: a black chassis with an even bezel, a dynamic island and a home
 * indicator. Black rather than brand blue for the same reason the main page
 * gives - a coloured bezel makes the shot inside read as a graphic instead of
 * as a handset. */
.device-phone{background:var(--bezel);border-radius:38px;padding:10px;
  max-width:300px;margin:0 auto;box-shadow:var(--shadow)}
.device-phone img{border-radius:29px}
.device-phone::before,.device-phone::after{content:"";position:absolute;
  left:50%;transform:translateX(-50%)}
.device-phone::before{top:20px;width:76px;height:20px;border-radius:999px;
  background:var(--bezel)}
.device-phone::after{bottom:20px;width:98px;height:4px;border-radius:999px;
  background:rgba(255,255,255,.85)}

/* ── Feature tiles ────────────────────────────────────────────────────── */
/* Used twice: the three problem tiles, and the six-up "in detail" grid. The
 * 1px gap over a --line background is what draws the rules between them, so a
 * row of any length keeps the same hairline lattice. */
/* Square corners on purpose: everything structural on this page is square -
 * buttons, rows, bullets, rules - and rounding the one grid made it read as a
 * SaaS card. The device frames keep their radius; they are the exception. */
.tiles{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  overflow:hidden;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{background:var(--paper);padding:34px 30px}
/* The icon stands on the page with nothing behind it. The chip element is
   kept as the spacing box only - a filled tile behind a line icon was the
   one piece of decoration on this page that was not carrying anything. */
.tile .chip{display:block;margin-bottom:18px}
.tile h3{font:700 15px/1.2 var(--sans);letter-spacing:.02em;text-transform:uppercase;
  margin:18px 0 10px}
.tile p{color:var(--ink-60);font-size:15.5px}
.tile .ic{width:24px;height:24px;stroke:var(--brand);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
/* The second grid's icons take the logo's lilac, which is what tells the two
   tile grids apart. Declared after .tile .ic: same specificity, so order is
   what decides. */
.tiles-detail .ic{stroke:var(--accent)}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
/* The questions operators actually open with. Native <details>, so it works
 * with no JS at all and the browser owns the open/closed state - there is no
 * module behind this section and there should not be one. The marker is the
 * page's own hairline chevron rather than the platform triangle. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{position:relative;list-style:none;cursor:pointer;
  padding:26px 48px 26px 0;font:600 19px/1.35 var(--sans);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand)}
.faq summary::after{content:"";position:absolute;right:10px;top:32px;
  width:11px;height:11px;border-right:1.6px solid var(--ink-40);
  border-bottom:1.6px solid var(--ink-40);transform:rotate(45deg);
  transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:36px}
.faq .a{padding:0 48px 28px 0;color:var(--ink-60);max-width:70ch}

/* ── Timeline ─────────────────────────────────────────────────────────── */
/* Same shape as the main page's rollout - numbered circles on a line, centred
 * text under each - but driven by arrival rather than by a loop: the brand
 * line grows across the four weeks once the block is reached, and each week
 * fills its circle and reveals its text as the line gets there, so the plan
 * reads in the order it happens. Hover any week to overtake the line; a
 * reader who wants week 4 first should not have to wait for it.
 *
 * All of it hangs off `.js-reveal ... .is-in`, which reveal.js sets, so with
 * no JS, an old browser or prefers-reduced-motion the timeline is simply
 * there: grey line, four filled circles, all four weeks readable. The delays
 * are the line's own timing, and the geometry matters: the line does NOT
 * span the timeline - it runs from the FIRST circle's centre to the LAST's
 * (inset 12.5% each side), so over its 3.6s it crosses the circles at 0/3,
 * 1/3, 2/3 and 3/3 of its run: 0s, 1.2s, 2.4s, 3.6s. (The delays were once
 * computed as 12.5%..87.5% of the width the line does not have, which had
 * every circle filling at the wrong moment.)
 *
 * The line grows LINEAR on purpose: those delays are the linear crossing
 * times, so any easing on tl-grow makes the line arrive at a circle at a
 * different moment than the circle fills. If the easing or the line's insets
 * ever change, the four delays below have to be recomputed. The circle's own
 * fill is kept short for the same reason: it should read as the line hitting
 * it, not as a slow fade after.
 */
.timeline{position:relative;display:grid;margin-top:clamp(30px,4vw,54px);
  grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.timeline::before{content:"";position:absolute;top:19px;left:12.5%;right:12.5%;
  height:1.5px;background:var(--line)}
.tl-line{position:absolute;top:19px;left:12.5%;right:12.5%;height:1.5px;
  background:var(--brand);transform:scaleX(1);transform-origin:left center}
.js-reveal .timeline .tl-line{transform:scaleX(0)}
.js-reveal .timeline.is-in .tl-line{
  animation:tl-grow 3.6s linear forwards}
@keyframes tl-grow{to{transform:scaleX(1)}}

.tl{position:relative;text-align:center}
.tl .num{position:relative;z-index:1;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;margin:0 auto 20px;
  background:var(--brand);color:var(--paper);font:600 14px/1 var(--mono)}
.tl .wk{display:block;font:500 10px/1 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.tl h3{font:700 18px/1.2 var(--sans);text-transform:uppercase;letter-spacing:-.01em;
  margin:12px 0 10px}
.tl p{color:var(--ink-60);font-size:15.5px}

/* Waiting state, only while JS is driving the line. The circle is an outline
   until the line reaches it, then it fills - that is what makes the line feel
   like it is doing something rather than sliding over finished work. */
.js-reveal .timeline .tl .num{background:var(--paper);color:var(--ink-40);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.js-reveal .timeline .tl h3,
.js-reveal .timeline .tl p{opacity:0;transform:translateY(6px)}
.js-reveal .timeline.is-in .tl .num{background:var(--brand);color:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--brand);
  transition:background .18s ease-out,color .18s ease-out,box-shadow .18s ease-out}
.js-reveal .timeline.is-in .tl h3,
.js-reveal .timeline.is-in .tl p{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s ease}
.js-reveal .timeline.is-in .tl:nth-of-type(1) :is(.num,h3,p){transition-delay:0s}
.js-reveal .timeline.is-in .tl:nth-of-type(2) :is(.num,h3,p){transition-delay:1.2s}
.js-reveal .timeline.is-in .tl:nth-of-type(3) :is(.num,h3,p){transition-delay:2.4s}
.js-reveal .timeline.is-in .tl:nth-of-type(4) :is(.num,h3,p){transition-delay:3.6s}
/* Hover overtakes the line, for any week, at any point in the run. */
.js-reveal .timeline .tl:hover :is(.num,h3,p){transition-delay:0s}
.js-reveal .timeline .tl:hover h3,
.js-reveal .timeline .tl:hover p{opacity:1;transform:none}
.js-reveal .timeline .tl:hover .num{background:var(--brand);color:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--brand)}

@media (prefers-reduced-motion:reduce){
  .js-reveal .timeline .tl h3,
  .js-reveal .timeline .tl p{opacity:1;transform:none;transition:none}
  .js-reveal .timeline .tl .num{background:var(--brand);color:var(--paper);
    box-shadow:none}
  .js-reveal .timeline .tl-line{transform:scaleX(1)}
}

/* ── Closing ──────────────────────────────────────────────────────────── */
.close{background:var(--brand-ink);color:var(--paper);text-align:center}
.close h2{margin-bottom:22px}
.close .lead{color:#b7c1d6;margin:0 auto}
.close .cta{margin-top:34px;display:flex;gap:16px;justify-content:center;
  flex-wrap:wrap;align-items:center}
.book-hidden{display:none}
/* The address sits in this note, under the button, rather than beside it -
 * same shape as the main page's closing section. One call to action, and the
 * way to write instead reads as a footnote to it rather than as a second,
 * competing button. */
.book-note{margin-top:18px;font-size:14px;color:#96a2ba;max-width:44em;
  margin-inline:auto}
/* The address gets its own line rather than trailing the confirmation
   sentence - it is the alternative to the button, not a footnote to how the
   confirmation arrives. */
.book-write{margin-top:8px;font-size:14px;color:#96a2ba}
.book-write a{color:#b3a6d4}
.formnote{margin-top:26px;font:500 12px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:#b7c1d6}
.formnote a{color:#b3a6d4}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:28px 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  justify-content:space-between}
footer span{font:700 13px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
footer nav{display:flex;gap:22px}
footer nav a{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60)}
footer nav a:hover{color:var(--ink)}
/* The Campus Founders mark and one line for the two programmes Wayvio won
 * there. Footer furniture, not a section: same size as the links beside it. */
footer .award{display:flex;align-items:center;gap:14px}
footer .award img{height:22px;width:auto}
footer .award-note{font:500 11px/1.3 var(--mono);letter-spacing:.08em;
  text-transform:none;color:var(--ink-60)}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* The header carries four letterspaced links, the language pill and a button;
 * in German that row is wider than in English. Two steps down before the
 * links are dropped: tighter tracking first, then the links go and the pill
 * and button stay - a reader who cannot read the page needs the language
 * switch more than the anchors, not less. */
@media (max-width:1020px){
  .head nav{gap:18px}
  .head nav a.navlink{letter-spacing:.1em}
}
@media (max-width:820px){
  .head nav a.navlink{display:none}
}
/* Phone header. With the anchors gone the row still holds the wordmark, the
 * language pill and the demo button, and at phone widths that is wider than
 * the screen: left alone the pill lands ON the wordmark and the button clips
 * the pill. Under 520px everything in the row shrinks together; under 350px
 * the wordmark goes entirely - the logo keeps the brand, and a readable
 * language switch and demo button matter more than the word next to it. */
@media (max-width:520px){
  .head .wrap{height:64px}
  .brand{font-size:13px;letter-spacing:.1em;gap:8px}
  .brand img{width:24px;height:24px}
  .head nav{gap:10px}
  .lang button{padding:6px 9px;font-size:11px}
  .head .btn-sm{padding:9px 11px;font-size:10px;letter-spacing:.08em}
}
@media (max-width:350px){
  .brand-word{display:none}
}
/* The display floor (40px) was sized against the metrics-compatible fallback
 * faces; SF Pro runs a touch wider and the longest German hero line can clip
 * on the narrowest phones. Below 370px the size scales with the viewport
 * instead of sitting on the floor - at 370px the two are the same size, so
 * nothing jumps at the boundary. */
@media (max-width:370px){
  .display{font-size:11vw}
}
@media (max-width:900px){
  .sec-head-two{grid-template-columns:minmax(0,1fr)}
  .fn{grid-template-columns:56px minmax(0,1fr);gap:18px}
  .fn .stat{grid-column:2;text-align:left}
  .fn .stat b{font-size:32px}
  .split{grid-template-columns:minmax(0,1fr)}
  .split.reverse .figure{order:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* The line choreography is drawn for one row of four columns; once the grid
   * wraps, the line crosses only the top row and the delays keep the lower
   * weeks invisible for seconds with no hover to overtake them. On narrow
   * screens the line goes and the weeks are simply there. */
  .timeline::before,.tl-line{display:none}
  .js-reveal .timeline .tl h3,
  .js-reveal .timeline .tl p{opacity:1;transform:none}
  .js-reveal .timeline .tl .num,
  .js-reveal .band-soft .timeline .tl .num{background:var(--brand);
    color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--brand)}
  .js-reveal .timeline.is-in .tl:nth-of-type(n) :is(.num,h3,p){transition-delay:0s}
}
@media (max-width:560px){
  .tiles{grid-template-columns:minmax(0,1fr)}
  .timeline{grid-template-columns:minmax(0,1fr)}
}