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

/* The page is a spreadsheet: column letters on top, row numbers down the side, highlighter colours = extracted fields. */
:root {
  --paper: #fbfcfa;
  --grid: #e6ebe8;
  --line: #d5ddd9;
  --head: #f1f4f2;
  --ink: #14231e;
  --muted: #5d6b66;
  --select: #2f6fde;
  --hl-y: #ffe45c;
  --hl-p: #ffa8d2;
  --hl-b: #a3daff;
  --hl-g: #a9f0c0;
  --gutter: 44px;
  --col: 128px;
  --top: 84px; /* bar + letters */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top) + 8px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--select); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--select); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }

/* ---- sheet chrome ---- */
.bar {
  position: sticky; top: 0; z-index: 10; height: 60px;
  display: flex; align-items: center; gap: 20px; padding: 0 16px 0 12px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.fx {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 15px; white-space: nowrap; overflow: hidden;
}
.fx i { font-family: Georgia, serif; color: var(--ink); padding-right: 12px; border-right: 1px solid var(--line); }
.bar nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.bar nav a:not(.btn) { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.bar nav a:not(.btn):hover { color: var(--ink); }

.letters {
  position: sticky; top: 60px; z-index: 9; height: 24px; display: flex; overflow: hidden;
  background: var(--head); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.letters span { flex: 0 0 var(--col); display: grid; place-items: center; border-right: 1px solid var(--line); }
.letters span:first-child { flex-basis: var(--gutter); }

.sheet {
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) var(--gutter) 0 / var(--col) 100% repeat-x,
    var(--paper);
}
.row { position: relative; padding-left: var(--gutter); border-bottom: 1px solid var(--line); }
.row::before {
  content: attr(data-row);
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--gutter);
  padding-top: 22px; text-align: center; font-size: 12px; color: var(--muted);
  background: var(--head); border-right: 1px solid var(--line);
}
.pad { padding: 80px clamp(20px, 5vw, 72px); max-width: 1220px; }
.pad.narrow { max-width: 820px; }

/* ---- type ---- */
h1 {
  font-size: clamp(46px, 8.6vw, 116px); font-weight: 800; line-height: 0.98; letter-spacing: -0.04em;
  margin: 0 0 34px; max-width: 13ch;
}
h2 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 14px; max-width: 22ch; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 60ch; margin: 0 0 28px; }
.muted { color: var(--muted); }
.note { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; }
.note.err { color: #b42318; font-weight: 500; }

/* The headline is the selected cell: blue border plus the fill handle. */
.selected { position: relative; outline: 3px solid var(--select); outline-offset: 12px; }
.selected::after {
  content: ""; position: absolute; right: -18px; bottom: -18px; width: 11px; height: 11px;
  background: var(--select); border: 2px solid #fff;
}
.hero { padding-top: 96px; padding-bottom: 88px; }
.hero h1.selected { margin-top: 12px; margin-left: 12px; }
/* Homepage hero is shorter so the scroll story peeks in on the first screen. */
.hero.home { padding-top: 64px; padding-bottom: 56px; }
.hero.home h1 { font-size: clamp(42px, 6.4vw, 92px); max-width: none; }

/* ---- controls ---- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border: 2px solid var(--ink); border-radius: 10px;
  background: var(--ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn:hover { background: #243a31; border-color: #243a31; }
.btn:disabled { opacity: 0.7; cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: #fff; }
.btn.small { padding: 7px 14px; font-size: 15px; }

input[type="email"], input:not([type]), textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 13px 15px;
}
input:focus, textarea:focus { outline: none; border-color: var(--select); box-shadow: 0 0 0 3px rgba(47, 111, 222, 0.18); }
form.join { display: flex; flex-wrap: wrap; gap: 10px; max-width: 540px; }
form.join input[type="email"] { flex: 1 1 250px; }
form.join select {
  flex: 1 1 100%; order: 2; font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 2px solid var(--line); border-radius: 10px; padding: 11px 13px;
}
form.join select:focus { outline: none; border-color: var(--select); box-shadow: 0 0 0 3px rgba(47, 111, 222, 0.18); }
form.join .btn { order: 1; }

/* ---- spreadsheet tables ---- */
.grid-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.cells { border-collapse: collapse; width: 100%; font-size: 15px; }
.cells th, .cells td { border: 1px solid var(--grid); padding: 9px 12px; text-align: left; vertical-align: top; }
.cells tr > :first-child { border-left: 0; }
.cells tr > :last-child { border-right: 0; }
.cells thead th { border-top: 0; }
.cells tbody tr:last-child td { border-bottom: 0; }
.cells th { background: var(--head); color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; padding: 3px 8px; }
.cells .n { width: 36px; background: var(--head); color: var(--muted); font-size: 12px; text-align: center; padding-left: 4px; padding-right: 4px; }
.cells .h { font-weight: 700; white-space: nowrap; }
.cells td.empty { height: 42px; }
.hl-y { background: var(--hl-y); }
.hl-p { background: var(--hl-p); }
.hl-b { background: var(--hl-b); }
.hl-g { background: var(--hl-g); }
.chip { display: inline-block; padding: 1px 8px; margin: 3px 6px 3px 0; border-radius: 5px; font-size: 14px; white-space: nowrap; }
.chip:not([class*="hl-"]) { background: var(--head); }
.uses td:nth-child(2) { width: 34%; }
.uses td:last-child { white-space: nowrap; }
.plans .num { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.plans tr.pick td:not(.n) { background: rgba(47, 111, 222, 0.07); border-top: 2px solid var(--select); border-bottom: 2px solid var(--select); }

/* ---- scroll story ---- */
.story { height: 540vh; position: relative; }
.story-stage {
  position: sticky; top: var(--top); height: calc(100svh - var(--top));
  display: grid; place-items: center; padding: 18px clamp(10px, 3vw, 40px);
}
.story-player { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(20, 35, 30, 0.5); }
.story-row::before { padding-top: 22px; }

/* ---- demo ---- */
.demo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }
.demo > *, .pair > * { min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tabs button {
  font: inherit; font-size: 14px; font-weight: 500; padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.demo textarea { width: 100%; resize: vertical; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 14px 16px; }
.demo-out label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.ask { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ask input { flex: 1 1 220px; }
.demo .cells td, .pair .cells td { white-space: nowrap; }
.sheet-name { padding: 8px 12px; font-weight: 700; border-bottom: 1px solid var(--line); }
.sheet-name::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; background: #1d7a4c; vertical-align: -1px; }
td.wait { background: linear-gradient(90deg, var(--head) 25%, #fff 50%, var(--head) 75%) 0 0 / 300% 100%; animation: shimmer 1.1s linear infinite; height: 42px; }
td.pop { animation: pop 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes shimmer { to { background-position: -150% 0; } }
@keyframes pop { from { background-color: #fff; color: transparent; } }

/* ---- use-case pages ---- */
.pair { display: grid; grid-template-columns: 1fr 1.35fr; gap: 24px; align-items: center; margin-top: 28px; }
figure.mail { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
figure.mail figcaption { display: grid; gap: 2px; color: var(--muted); font-size: 13.5px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--grid); }
figure.mail .subj { color: var(--ink); font-size: 16px; }
figure.mail p { margin: 0 0 6px; }
.fields { columns: 2; padding-left: 20px; color: var(--muted); }

/* ---- faq + footer ---- */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-weight: 700; cursor: pointer; font-size: 18px; }
.faq details p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; }
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 26px clamp(20px, 5vw, 72px) 40px calc(var(--gutter) + clamp(20px, 5vw, 72px));
  font-size: 14px; color: var(--muted);
}
.foot a { color: var(--muted); }

@media (max-width: 960px) {
  .fx { display: none; }
  .demo, .pair { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --gutter: 26px; --col: 96px; }
  .bar { gap: 12px; }
  .hide-sm { display: none; }
  .pad { padding: 56px 18px; }
  .hero { padding-top: 64px; padding-bottom: 64px; }
  .hero h1.selected { margin-left: 10px; outline-offset: 8px; }
  .selected::after { right: -14px; bottom: -14px; }
  .fields { columns: 1; }
  /* Phones: drop the row gutter and grid lines so content gets the full width. */
  .row { padding-left: 0; }
  .row::before, .letters span:first-child { display: none; }
  .sheet { background: var(--paper); }
  .foot { padding-left: 18px; }
  h2 { font-size: 28px; }
  .lede { font-size: 17px; }
  .hero h1.selected { outline-width: 2px; outline-offset: 6px; margin-left: 6px; }
  .selected::after { width: 8px; height: 8px; right: -11px; bottom: -11px; }
  /* Tables become stacked cards instead of squeezed columns. */
  .uses thead, .plans thead, .uses .n, .plans .n { display: none; }
  .uses, .plans, .uses tbody, .plans tbody, .uses tr, .plans tr, .uses td, .plans td { display: block; width: auto; }
  .uses tr, .plans tr { padding: 14px 16px; border-bottom: 1px solid var(--grid); }
  .uses tr:last-child, .plans tr:last-child { border-bottom: 0; }
  .uses td, .plans td, .uses td:nth-child(2) { border: 0; padding: 2px 0; width: auto; }
  .plans tr.pick td:not(.n) { border: 0; background: none; }
  .plans tr.pick { background: rgba(47, 111, 222, 0.07); box-shadow: inset 3px 0 0 var(--select); }
}
@media (prefers-reduced-motion: reduce) {
  td.wait, td.pop { animation: none; }
}