/* Wieve landing · brand v2 (C:\dev\Wieve\brand-v2\brand.json)
   Onest (display + UI) and IBM Plex Mono (labels). Ink and chalk carry the brand; evidence colours
   appear only as marks inside the widgets. */

@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/onest-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/onest-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Onest"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/onest-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --ink: #0B0B0C;
  --chalk: #F4F4F1;
  --paper: #FFFFFF;
  --g300: #C4C4C1;
  --g400: #9F9E9C;
  --g600: #585856;
  --line: #DEDEDB;
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(20px, 5vw, 96px);
  --settle: cubic-bezier(.2, .8, .2, 1);
  /* the dot-ground: 24 px grid, 1.4 px dots at 16%, dots at 12/12 of each cell */
  --ground-ink: radial-gradient(circle, rgba(11, 11, 12, .16) 0 .7px, transparent 1.05px) 0 0 / 24px 24px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground-ink), var(--chalk); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ink); color: var(--chalk); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--chalk); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--ink); color: var(--chalk); font: 500 16px/1 var(--sans); text-decoration: none; white-space: nowrap; transition: background-color .18s var(--settle), transform .1s; }
.btn:hover { background: #1B1B19; }
.btn:active { transform: scale(.985); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn span { display: inline-block; white-space: pre; }
/* the hero CTA is the one raised thing on the page: a soft ink shadow under it and an arrow that leans forward on hover */
.btn-cta { gap: 10px; padding: 0 20px 0 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(11, 11, 12, .24), 0 6px 12px -4px rgba(11, 11, 12, .3), 0 18px 32px -14px rgba(11, 11, 12, .38);
  transition: background-color .18s var(--settle), transform .18s var(--settle), box-shadow .18s var(--settle); }
.btn-cta:hover { transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 3px rgba(11, 11, 12, .24), 0 10px 18px -4px rgba(11, 11, 12, .32), 0 26px 40px -14px rgba(11, 11, 12, .42); }
.btn-cta:active { transform: translateY(1px) scale(.985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(11, 11, 12, .3), 0 3px 6px -3px rgba(11, 11, 12, .3); }
.btn-arrow { flex: none; transition: transform .18s var(--settle); }
.btn-cta:hover .btn-arrow, .btn-cta:focus-visible .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn-cta, .btn-arrow { transition: none; } .btn-cta:hover, .btn-cta:hover .btn-arrow, .btn-cta:focus-visible .btn-arrow { transform: none; } }

/* ---------- nav ---------- */
.site-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 80px; }
/* the header runs edge to edge (small fixed margins); the hero below stays a compact centred block */
.site-nav .wrap { max-width: none; padding-inline: clamp(20px, 3vw, 48px); }
.brand { display: inline-flex; border-radius: 6px; }
/* lockup.svg is optically aligned and symmetric about the letters' centre: 34 px tall = 30 px mark, 17.6 px x-height */
.brand img { height: 34px; width: auto; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 2fr) auto minmax(0, 3fr); padding: 92px 0 40px; overflow: hidden; background: var(--ground-ink), var(--chalk); }
/* headline, visuals, subline and CTA are one group: the subline sits a fixed step under the visuals, and the
   whole group sits a little above the middle of the screen (2 parts of the spare height above, 3 below) */
/* fixed sizes (they don't scale with the window): two 440 px columns, an 84 px headline, 440 px visuals.
   Each row pairs one line of the headline with one visual of the same width, so neither side outweighs the other. */
.hero-in { display: grid; grid-row: 2; grid-template-columns: repeat(2, 440px); justify-content: center; grid-template-rows: auto auto auto; column-gap: 48px; row-gap: 20px; align-items: center; }
/* desktop. Row 1: "Study less," | W2 (above "learn more."). Row 2: W1 (under "Study less,") | "learn more.". Row 3: subline + CTA */
.hero-h1 { grid-column: 1 / -1; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; align-items: center;
  margin: 0; font: 700 84px / .95 var(--sans); letter-spacing: -.02em; white-space: nowrap; color: var(--ink); }
.h-study { grid-column: 1; grid-row: 1; justify-self: start; }
.h-learn { grid-column: 2; grid-row: 2; justify-self: end; }
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

.hw { position: relative; width: 100%; }
.hw svg { display: block; margin-left: -8px; overflow: visible; }
.hw-study { grid-column: 1; grid-row: 2; min-height: 176px; }
.hw-learn { grid-column: 2; grid-row: 1; justify-self: end; min-height: 168px; }

.hero-foot { grid-column: 1 / -1; grid-row: 3; justify-self: center; display: grid; gap: 22px; justify-items: center; text-align: center; margin-top: 28px; }
.hero-lede { margin: 0; max-width: 36ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--g600); text-wrap: pretty; }
.hero-lede .w { display: inline-block; }

.pause { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 6;
  width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; }
.pause[hidden] { display: none; }
.pause svg { width: 14px; height: 14px; fill: currentColor; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: block; }

/* ---------- intro cover ---------- */
/* a transparent layer for the animated headline; the live <h1> stays hidden until it has landed on it */
.hero-cover { display: none; position: absolute; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.intro .hero-cover, .intro-hold .hero-cover { display: block; }
.hero-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro .hero-h1, .intro-hold .hero-h1 { opacity: 0; }
.intro .site-nav .brand, .intro .site-nav .btn, .intro .hero-foot, .intro .pause { opacity: 0; }
.intro .site-nav, .intro .hero-foot { pointer-events: none; }

/* ---------- small screens ---------- */
@media (max-width: 1039px) {
  .nav-in { height: 68px; }
  .brand img { height: 30px; }
  .hero { display: block; padding: 96px 0 64px; }
  .hero-in { grid-template-columns: minmax(0, 440px); row-gap: 0; align-items: start; }
  .hero-h1 { grid-row: 1 / 4; }
  .h-study { grid-column: 1; grid-row: 1; }
  .h-learn { grid-column: 1; grid-row: 3; }
  .hero-h1 { font-size: 56px; }
  .h-learn { margin-top: 8px; }
  .hw-study { grid-column: 1; grid-row: 2; margin: 28px 0 20px; min-height: 174px; }
  .hw-learn { grid-column: 1; grid-row: 4; justify-self: end; margin-top: 32px; min-height: 168px; }
  .hero-foot { grid-column: 1; grid-row: 5; margin-top: 36px; }
  .hero-in { grid-template-rows: none; }
}
@media (max-width: 359px) { .hero-h1 { font-size: 48px; } }