/*
 * Alternative landing page - "Statement".
 * English only, and deliberately louder than static/css/product/: oversized
 * uppercase display type with tight tracking, hairline rules instead of cards,
 * three different heading registers rather than one repeated. It is a second take on the same
 * product, not a replacement - product.html and its stylesheets are untouched.
 *
 * Palette: the same one, from the mark in static/img/wayvio-logo.svg
 * (see static/css/product/base.css, issue #146). The layout is the loud part;
 * the colour stays ours, so the two pages read as one company. --brand does
 * the work an accent does here - headline word, numbers, rules, bullets - and
 * --accent (the logo's lilac dot) stays on small marks only.
 *
 * Motion rule, and it is the opposite of the main page's: this page reveals
 * its content as it is scrolled to. That is the whole point of the take -
 * see static/js/product-alt/reveal.js for what is and is not allowed. Nothing
 * is *scrubbed* by scroll position: elements are told once, on entry, to play
 * a fixed local transition. Everything is inert under prefers-reduced-motion,
 * and everything is visible with no JS at all.
 */
:root{
  --brand:#0b47b4; --brand-2:#0a3a94; --brand-ink:#0b1b3d;
  /* The logo is not one blue and one lilac: the mark carries a lilac dot
     (#7d6e9e) and two lighter lilacs in its chevrons (#9b84be, #c9c4dd).
     All three are tokens here so the page can use the whole scheme rather
     than the square and nothing else. Values are the logo's, verbatim. */
  --accent:#7d6e9e; --accent-2:#9b84be; --accent-3:#c9c4dd;
  --ink:#1b2333; --ink-60:#586479; --ink-40:#8892a6; --line:#e5e2ee;
  /* The pale surfaces are lavender, not pale blue. A near-white blue next to
     the brand blue reads as a washed-out version of it and glares; taking the
     hue across to the logo's lilac side keeps the surfaces quiet and still
     inside the mark's palette. Saturation stays low - these are surfaces, not
     accents. */
  --paper:#ffffff; --tint:#f7f5fa; --tint-2:#ece7f3;
  /* The one full-bleed band on the page. Flat brand blue across a whole
     section was too much of it at once - at that size it is the saturation
     the eye fights, not the hue. A pale surface was the other extreme and
     read as nothing. So: a deep indigo-violet, the logo's lilac taken down
     to a dark, low-chroma solid. It carries light type comfortably, it is a
     real colour rather than another near-white, and it is a different family
     from the navy the closing section uses, so the two dark blocks do not
     read as a repeat. */
  --band:#332c52;
  /* The softer band, for the rollout. Same lilac family as --band, kept pale
     so a second coloured section does not compete with the dark one. */
  --band-soft:#efeaf8;
  /* Device frames only - see the "Device frames" block in sections.css for
     why this page carries a bezel colour and a shadow at all. */
  --bezel:#000000;
  --shadow:0 40px 80px -40px rgba(11,27,61,.34), 0 8px 24px -12px rgba(11,27,61,.13);
  /* How far a revealed block travels, and how long it takes. One pair of
     values for the whole page, so nothing drifts out of step. */
  --rise:22px; --reveal:.82s cubic-bezier(.22,.61,.36,1);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
::selection{background:var(--accent-3);color:var(--brand-ink)}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* Display type: the whole personality of this page lives in these three rules. */
.display{font-weight:700;text-transform:uppercase;line-height:.92;
  letter-spacing:-.045em;font-size:clamp(40px,9vw,116px)}
.display-sm{font-weight:700;text-transform:uppercase;line-height:.95;
  letter-spacing:-.04em;font-size:clamp(30px,5.4vw,64px)}

/* Three heading registers, deliberately not one.
 *
 * A page that says every heading the same way stops being read after the
 * third one - the eye learns the shape and skips it. So: `.display-sm` for
 * the loud statements (the problem, the deployment promise, the closing
 * question), `.h-rule` for the two grid sections that introduce a list, and
 * `.h-sentence` for the blocks that are talking rather than announcing. Same
 * type family and the same tight tracking throughout, so the page is still
 * one voice; only the volume changes. */
.h-rule{font-weight:700;text-transform:uppercase;line-height:.95;
  letter-spacing:-.035em;font-size:clamp(26px,4vw,46px)}
.h-rule::after{content:"";display:block;width:96px;height:3px;
  background:var(--brand);margin-top:22px}
.h-sentence{font-weight:600;line-height:1.1;letter-spacing:-.03em;
  font-size:clamp(27px,3.6vw,42px);max-width:18ch}

/* The middle hero line was an OUTLINE (-webkit-text-stroke on a transparent
 * fill) until it met a Mac. SF Pro is a variable font whose glyphs are built
 * from overlapping path components, and text-stroke draws every contour, the
 * internal ones included - so on macOS every stroked letter showed lines
 * crossing INSIDE the glyph. Spacing was innocent: loosening the tracking
 * and disabling kerning were both tried and changed nothing, which is what
 * gave the mechanism away. No spacing can fix a glyph's own overlapping
 * contours, so the hollow treatment is retired for a filled lilac line -
 * same three-tone hierarchy, renders identically on every platform. Do not
 * reintroduce -webkit-text-stroke on any system-stack text. */
.display .soft{color:var(--accent-2)}
.lead{font-size:19px;color:var(--ink-60);max-width:62ch}

/* The DE/EN switch, shared by both public pages: this file is linked by the
 * landing page and by the privacy statement, so the pill lives here rather
 * than once in each page's own stylesheet. */
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{border:0;background:none;padding:7px 12px;cursor:pointer;
  color:var(--ink-40);font:600 12px/1 var(--sans)}
.lang button[aria-pressed="true"]{background:var(--brand);color:#fff}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;
  background:var(--ink);color:var(--paper);font:600 12px/1 var(--sans);
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);
  transition:background .18s ease,color .18s ease}
.btn:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-sm{padding:11px 18px;font-size:11px}
.btn-invert{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn-invert:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}