/* Keel. Direction A, "the sheet": one paper sheet on a grey ground, giant wordmark on top,
   copy and the one action bottom left, the hand-drawn figure as the image bottom right. */

@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  /* black card stock on a darker table; type is the white of the paper figure */
  --ground: oklch(10.5% 0.004 70);
  --paper: oklch(15.5% 0.005 70);
  --ink: oklch(94% 0.008 85);
  --ink-soft: oklch(66% 0.008 85);
  --hair: oklch(32% 0.006 85);
  --error: oklch(72% 0.13 30);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --m: clamp(10px, 1.6vw, 24px);
  --pad: clamp(18px, 3vw, 44px);
  color-scheme: dark;
}
@view-transition { navigation: auto; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the sheet ---------- */
.sheet {
  position: relative;
  margin: var(--m);
  height: calc(100dvh - 2 * var(--m));
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: var(--pad);
  overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tick { position: absolute; width: 9px; height: 9px; border: 0 solid var(--ink-soft); }
.tick.tl { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.tick.tr { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.tick.bl { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.tick.br { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }

.word {
  grid-column: 1 / -1; grid-row: 1;
  margin: 0 0 0 -.04em;
  font-weight: 900;
  font-size: clamp(96px, 30vw, 440px);
  line-height: .78;
  letter-spacing: -.055em;
  text-decoration: none;
  view-transition-name: word;
  width: max-content;
}
.meta { grid-column: 1 / -1; grid-row: 2; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-soft); margin-top: clamp(12px, 2vh, 22px); view-transition-name: meta; }
.meta b { color: var(--ink); font-weight: 500; }

.copy { grid-column: 1; grid-row: 4; align-self: end; display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 28px); max-width: 30em; min-width: 0; }
.blurb { margin: 0; font-size: clamp(16px, 1.15vw + 9px, 21px); line-height: 1.5; font-weight: 500; letter-spacing: -.005em; text-wrap: pretty; }
.blurb span { color: var(--ink-soft); }

.fig { grid-column: 2; grid-row: 3 / 5; align-self: end; justify-self: end; width: clamp(150px, 26vw, 380px); aspect-ratio: 3 / 4; margin: 0 -2% -3% 0; }

.cta {
  display: inline-flex; align-items: center; gap: .6em;
  background: var(--ink); color: var(--paper);
  font: 500 16px/1 var(--sans); letter-spacing: .005em;
  padding: 15px 22px; min-height: 48px; border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s;
}
.cta .arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.cta:hover .arrow, .cta:focus-visible .arrow { transform: translateX(3px); }
.cta:active { transform: scale(.98); }
.cta[disabled] { opacity: .6; cursor: progress; }
/* not ready yet (no complete number): looks off, but stays focusable so Enter still explains what's missing */
.cta[aria-disabled="true"] { opacity: .35; cursor: default; }
.cta[aria-disabled="true"] .arrow { transform: none; }
.cta[aria-disabled="true"]:active { transform: none; }

.small { font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.small a { text-decoration: none; padding-block: 10px; }
.small a:hover { text-decoration: underline; }
.links { display: flex; flex-wrap: wrap; gap: 4px 14px; }

@media (max-width: 640px) {
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .fig { grid-column: 1; grid-row: 3; justify-self: end; align-self: center; width: auto; height: 100%; max-height: 30vh; min-height: 0; }
}

/* ---------- mascot (three.js, mascot.js) ---------- */
.mascot { view-transition-name: mascot; }
.mascot canvas { display: block; width: 100%; height: 100%; }

/* ---------- start ---------- */
.form { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 18px); }
.lead { margin: 0; font-size: clamp(17px, 1.2vw + 10px, 22px); line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.phone { display: grid; grid-template-columns: auto minmax(0, 1fr); border-bottom: 1.5px solid var(--ink); }
.phone select, .phone input { font: 500 18px/1.2 var(--sans); color: var(--ink); background: transparent; border: 0; border-radius: 0; padding: 12px 0; min-width: 0; min-height: 48px; }
.phone select { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--hair); appearance: none; -webkit-appearance: none; cursor: pointer; }
.phone input::placeholder { color: var(--hair); }
.phone input:focus, .phone select:focus { outline: none; }
.phone:focus-within { border-bottom-width: 2.5px; margin-bottom: -1px; }
.phone input[aria-invalid="true"] { color: var(--error); }
.error { margin: 0; font-size: 14px; color: var(--error); min-height: 1.4em; }
.consent { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }
.consent a { padding-block: 6px; }
.done { margin: 0; font-size: clamp(20px, 1.6vw + 12px, 28px); line-height: 1.25; font-weight: 500; }
.done span { color: var(--ink-soft); }

/* ---------- legal pages ---------- */
.doc-wrap { margin: var(--m); background: var(--paper); min-height: calc(100dvh - 2 * var(--m)); position: relative; }
.doc { max-width: 40em; padding: var(--pad); font-size: 16px; line-height: 1.6; }
.doc .word-sm { display: inline-block; font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.05em; text-decoration: none; margin-bottom: 40px; }
.doc h1 { font-weight: 700; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 16px; }
.doc h2 { font-weight: 700; font-size: 16px; margin: 32px 0 6px; }
.doc p, .doc li { margin: 0 0 12px; }
.doc .short { font-size: 18px; font-weight: 500; }
.doc .stamp { color: var(--ink-soft); margin-top: 32px; }
.doc > nav { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--hair); }