/* Schibsted Grotesk, variable 400 to 700, hosted with the site (SIL Open Font License, fonts/OFL.txt) */
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/SchibstedGrotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/SchibstedGrotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* the cognition style, shared by every page of an iteration: tokens, themes, type, controls, the logo and the footer */
:root {
  --lavender: #D8D0E8;
  --pink: #FFDFF3;
  --black: #161515;
  --deep: #17152B;
  --white: #FFFFFF;
  --sand: #F2EAD9;
  --iris: #6256A7;
  --coral: #E8613F;
  --human: #F38F79;
  --pulse: #D9F56A;
  --font: 'Schibsted Grotesk', 'Helvetica Neue', Arial, ui-sans-serif, system-ui, sans-serif;
  --gut: 16px;
  --max: 1728px;
  --ease-ui: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.45, 0, .25, 1);
  --ease-rise: cubic-bezier(.2, 1.22, .35, 1);
  --ease-pop: cubic-bezier(.3, 1.55, .5, 1);
  --ease-sink: cubic-bezier(.55, 0, .8, .35);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ground: var(--lavender);
  --ink: var(--black);
  color-scheme: light;
}
@media (min-width: 810px) { :root { --gut: 24px; } }
@media (min-width: 1280px) { :root { --gut: 32px; } }

/* one ground, one ink per section */
.t-lav { --ground: var(--lavender); --ink: var(--black); --muted: rgba(22,21,21,.64); --faint: rgba(22,21,21,.15); --field: var(--white); --logo: var(--black); }
.t-pink { --ground: var(--pink); --ink: var(--black); --muted: rgba(22,21,21,.66); --faint: rgba(22,21,21,.15); --field: var(--white); --logo: var(--black); }
.t-white { --ground: var(--white); --ink: var(--black); --muted: rgba(22,21,21,.6); --faint: rgba(22,21,21,.15); --field: var(--white); --logo: var(--black); }
.t-sand { --ground: var(--sand); --ink: var(--black); --muted: rgba(22,21,21,.62); --faint: rgba(22,21,21,.15); --field: var(--white); --logo: var(--black); }
.t-deep { --ground: var(--deep); --ink: var(--lavender); --muted: rgba(216,208,232,.66); --faint: rgba(216,208,232,.15); --field: var(--deep); --logo: var(--lavender); }
.t-night { --ground: var(--black); --ink: var(--lavender); --muted: rgba(216,208,232,.66); --faint: rgba(216,208,232,.15); --field: var(--black); --logo: var(--pink); }
.t-black { --ground: var(--black); --ink: var(--pink); --muted: rgba(255,223,243,.72); --faint: rgba(255,223,243,.15); --field: var(--black); --logo: var(--pink); }
.t-pulse { --ground: var(--black); --ink: var(--pulse); --muted: rgba(217,245,106,.66); --faint: rgba(217,245,106,.15); --field: var(--black); }
.band { background: var(--ground); color: var(--ink); }

* { box-sizing: border-box; }
/* behind the page (what a phone shows past the top and bottom, and under its browser bars): the first
   section's colour above, the footer's Core Black below. Safari on iPhone paints all of that with the
   page's own background, so the background is the top colour (Pink, or lavender where the page opens on
   lavender) and turns Core Black past the middle of the page (type/edges.js sets at-end) */
html { scroll-behavior: smooth; --top: var(--pink); background: var(--top); }
html.top-lav { --top: var(--lavender); }
html.at-end { background: var(--black); }
body { margin: 0; background: transparent; color: var(--black); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[hidden] { display: none !important; }
p, h1, h2, h3, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type scale */
.display { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.heading { font-size: clamp(30px, 3.7vw, 48px); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.list { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance; }
.title { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.small { font-size: 14px; line-height: 1.45; }
.meta { font-size: 12px; line-height: 1.4; color: var(--muted); }
.muted { color: var(--muted); }
.label { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }

/* icons */
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons start with the arrow; 4px corners */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border: 1px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--ground); font: inherit; font-size: 16px; line-height: 20px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn .i { transition: transform .16s var(--ease-ui); }
.btn:hover .i, .btn:focus-visible .i { transform: translateX(3px); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--faint); }
.tlink { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; }
.tlink span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.tlink:hover span { text-decoration-thickness: 2px; }
.tlink .i { transition: transform .16s var(--ease-ui); }
.tlink:hover .i, .tlink:focus-visible .i { transform: translateX(3px); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* fields */
.fieldset { display: grid; gap: 8px; min-width: 0; }
.field { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 4px; background: var(--field); color: var(--ink); font: inherit; font-size: 16px; letter-spacing: inherit; }
.t-lav .field, .t-pink .field, .t-white .field, .t-sand .field { color: var(--black); }
.t-black .field, .t-night .field, .t-deep .field, .t-pulse .field { color: var(--ink); }   /* a dark card inside a light band keeps its own ink */
.field::placeholder { color: inherit; opacity: .55; }
.field[aria-invalid="true"] { border-width: 2px; padding: 0 11px; }
.msg { display: flex; gap: 8px; align-items: center; font-size: 14px; }

/* the mark and the logo: Core Black or Soft Lavender only */
.mark { fill: none; stroke: currentColor; stroke-width: var(--mw, 2.2); stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
.logo { flex: none; display: inline-flex; align-items: center; gap: .28em; font-size: 24px; line-height: 1; letter-spacing: -.03em; text-decoration: none; color: var(--logo, var(--black)); white-space: nowrap; }
.logo .mark { height: 1.02em; width: auto; aspect-ratio: 56 / 48; --mw: 2.4; }

/* the top bar */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.nav__end { display: flex; align-items: center; gap: 24px; }
.nav__link { text-decoration: none; }
.nav__link:hover, .nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 560px) { .nav__end { gap: 16px; } .nav__end .nav__link:not(:only-child) { display: none; } }

/* the demo waitlist form */
/* the waitlist form: the field and its button are one unit, as tall as each other; the block keeps its own height
   (it never stretches to the column beside it) */
.join { display: grid; gap: 12px; min-width: 0; align-content: start; }
.join .fieldset { align-content: start; gap: 12px; }
.join__row { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--ink); border-radius: 4px; background: var(--field); overflow: hidden; }
.join__row:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.join__row:has(.field[aria-invalid="true"]) { box-shadow: inset 4px 0 0 var(--ink); }   /* the guide: a 4px ink bar on the left when invalid */
.join__row .field { flex: 1 1 auto; height: 56px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; font-size: 18px; }
.join__row .field:focus-visible { outline: none; }
.join__row .field[aria-invalid="true"] { border: 0; padding: 0 16px 0 20px; }
.join__row .btn { flex: none; border: 0; border-radius: 0; padding: 0 24px 0 18px; font-size: 18px; }
@media (max-width: 600px) { .join__row .field { height: 56px; font-size: 18px; padding: 0 12px; } .join__row .btn { padding: 0 16px 0 12px; font-size: 16px; } }
.join__done { display: grid; gap: 12px; align-content: start; }

/* footer: Soft Lavender on Core Black, an official logo pair */
.ft { display: grid; gap: 56px; padding-block: 64px 28px; }
.ft__top { display: grid; gap: 32px; }
.ft__call { display: grid; gap: 20px; align-content: start; }
.ft__nav { display: grid; gap: 10px; align-content: start; }
.ft__nav a { text-decoration: none; }
.ft__nav a:hover, .ft__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ft__big { font-size: clamp(56px, 13vw, 208px); gap: .26em; justify-self: start; }
.ft__big .mark { height: 1.02em; width: auto; aspect-ratio: 56 / 48; --mw: 2.1; }
@media (min-width: 900px) { .ft__big .mark { --mw: 1.2; } }
.ft__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--ink); font-size: 14px; }
@media (min-width: 900px) { .ft__top { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gut); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}