/* ============================================================================
   FIRST OFFICE — v1
   Tokens and values taken verbatim from the design handoff.
   No border-radius anywhere. No shadows. Structure comes from 1px hairlines
   and 1px-gap grids — resist adding either back in.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --graphite: #101311;   /* page ground, dark section cells */
  --panel:    #131714;   /* cards, panels, modal */
  --bone:     #EAE6DB;   /* primary fg on dark, primary button bg */

  --bone-85: rgba(233, 229, 218, .85);
  --bone-68: rgba(233, 229, 218, .68);
  --bone-65: rgba(233, 229, 218, .65);
  --bone-60: rgba(233, 229, 218, .60);
  --bone-55: rgba(233, 229, 218, .55);
  --bone-50: rgba(233, 229, 218, .50);
  --bone-45: rgba(233, 229, 218, .45);
  --bone-40: rgba(233, 229, 218, .40);
  --bone-35: rgba(233, 229, 218, .35);
  --bone-30: rgba(233, 229, 218, .30);
  --bone-16: rgba(233, 229, 218, .16);
  --bone-12: rgba(233, 229, 218, .12);
  --bone-08: rgba(233, 229, 218, .08);
  --bone-06: rgba(233, 229, 218, .06);
  --bone-10: rgba(233, 229, 218, .10);

  /* the only accent, used sparingly, for things that need attention */
  --signal:       #C65B3B;
  --signal-text:  #D9805F;
  --event-bg:     #181310;

  /* confirmed states only */
  --confirm:      #5F8A6B;
  --confirm-text: #8FB79B;

  /* the one light section */
  --light-bg:   #EAE6DB;
  --light-fg:   #131714;
  --light-line: rgba(19, 23, 20, .2);
  --light-55:   rgba(19, 23, 20, .55);
  --light-45:   rgba(19, 23, 20, .45);
  --light-70:   rgba(19, 23, 20, .70);

  /* type */
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 112px);
}

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--graphite); }

body {
  color: var(--bone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.lp-locked { overflow: hidden; }

a { color: var(--bone); text-decoration: none; }
a:hover { color: #FFFFFF; text-decoration: underline; }

::selection { background: #B34A2F; color: var(--bone); }

button { font-family: var(--mono); }
input { font-family: var(--mono); outline: none; }
input::placeholder { color: var(--bone-35); }

:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------------------ primitives -- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.rule-top { border-top: 1px solid var(--bone-12); }

.eyebrow {
  font-family: var(--mono); font-weight: 400; font-size: 11px;
  letter-spacing: .16em; color: var(--bone-50);
  text-transform: uppercase; margin-bottom: 24px;
}

.h2 {
  font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0; max-width: 22ch; text-wrap: balance;
}

.lede {
  font-weight: 400; font-size: 16px; line-height: 1.6;
  color: var(--bone-65); margin: 0; text-wrap: pretty;
}

.label {
  font-family: var(--mono); font-weight: 400; font-size: 10px;
  letter-spacing: .14em; color: var(--bone-50);
}

/* buttons: mono, uppercase, square */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  font-family: var(--mono); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn--solid { background: var(--bone); color: var(--graphite); }
.btn--solid:hover { background: #FFFFFF; }
.btn--ghost {
  background: transparent; color: var(--bone);
  border: 1px solid var(--bone-40);
}
.btn--ghost:hover { border-color: var(--bone); background: var(--bone-06); }

.btn--nav { font-size: 11px; padding: 12px 20px; white-space: nowrap; }
.btn--lg  { font-size: 13px; padding: 18px 32px; }
.btn--md  { font-size: 12px; padding: 16px 26px; }
.btn--sm  { font-size: 11px; padding: 12px 20px; }
.btn--expert { font-size: 11px; padding: 14px 22px; align-self: flex-start; }

/* the 8×8 status square: the design's only graphic */
.sq { width: 8px; height: 8px; flex: none; display: inline-block; }
.sq--signal  { background: var(--signal); }
.sq--confirm { background: var(--confirm); }

/* two-column section */
.cols {
  display: flex; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.cols--top { align-items: flex-start; }
.cols__a { flex: 1 1 380px; min-width: 300px; }
.cols__b { flex: 1 1 420px; min-width: 300px; }

/* hairline grid: cells paint over a 1px-gap background */
.hgrid {
  display: grid; gap: 1px;
  background: var(--bone-12); border: 1px solid var(--bone-12);
}

/* -------------------------------------------------------------------- nav -- */
.nav {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  max-width: var(--container); margin: 0 auto;
  padding: 22px var(--gutter); border-bottom: 1px solid var(--bone-12);
}
.nav__brand { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.nav__word { font-weight: 600; font-size: 15px; letter-spacing: .14em; }
.nav__tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  color: var(--bone-45); text-transform: uppercase;
}

/* ------------------------------------------------------------------- hero -- */
.hero {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(48px, 6vw, 80px);
  display: flex; flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px); align-items: flex-start;
}
/* H1 scales with its own column, not the viewport: container query units */
.hero__text { flex: 1 1 380px; min-width: 300px; container-type: inline-size; }
.hero__h1 {
  font-weight: 600; font-size: clamp(28px, 10cqw, 56px); line-height: 1.1;
  letter-spacing: -.025em; margin: 0 0 24px; text-wrap: balance;
}
.hero__sub {
  font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--bone-68); margin: 0 0 36px; max-width: 46ch; text-wrap: pretty;
}
.hero__disclaimer {
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter) 56px;
  font-family: var(--mono); font-size: 10px;
  color: var(--bone-35); letter-spacing: .06em;
}

/* operating picture */
.op { flex: 1 1 460px; min-width: 300px; border: 1px solid var(--bone-16); background: var(--panel); }
.op__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--bone-12);
}
.op__status { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--bone-55); }
.op__status--alert { color: var(--signal-text); }
.op__k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--bone-50); margin-bottom: 10px; }
.op__sub { font-family: var(--mono); font-size: 11px; color: var(--bone-55); }

/* the stake, marked to the last round */
.op__mark { padding: 20px; border-bottom: 1px solid var(--bone-12); }
.op__big {
  font-family: var(--mono); font-size: 40px; letter-spacing: -.02em; line-height: 1;
  margin-bottom: 8px; font-variant-numeric: tabular-nums;
}

/* Series C sensitivity: toggles + bars */
.op__scen { padding: 18px 20px 16px; }
.op__toggles { display: flex; gap: 1px; background: var(--bone-16); border: 1px solid var(--bone-16); margin-bottom: 16px; }
.tog {
  flex: 1; background: var(--panel); color: var(--bone-60); border: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; padding: 11px 6px;
  transition: background .15s ease, color .15s ease;
}
.tog:hover { color: var(--bone); }
.tog[aria-pressed="true"] { background: var(--bone); color: var(--graphite); }

.op__chart { display: flex; align-items: flex-end; gap: 12px; height: 132px; }
.bar {
  flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 6px; cursor: pointer;
}
.bar__v { font-family: var(--mono); font-size: 11px; color: var(--bone-45); font-variant-numeric: tabular-nums; }
.bar__col { width: 100%; background: var(--bone-16); transition: height .45s ease, background .2s ease; }
.bar__k { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--bone-45); }
.bar--on .bar__col { background: var(--bone); }
.bar--on .bar__v, .bar--on .bar__k { color: var(--bone); }
.bar:hover .bar__col { background: var(--bone-40); }
.bar--on:hover .bar__col { background: var(--bone); }

.op__event-wrap { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.op__event-wrap.is-in { opacity: 1; transform: none; }
.op__event {
  display: flex; align-items: center; gap: 10px; padding: 16px 20px;
  border-top: 1px solid var(--bone-12); border-bottom: 1px solid var(--bone-12);
  background: var(--event-bg);
}
.op__event-text {
  font-family: var(--mono); font-size: 13px; color: var(--signal-text); letter-spacing: .02em;
}
.op__moves-label { padding: 18px 20px 8px; }
.op__moves { display: flex; flex-direction: column; padding: 0 20px 20px; }

.move { opacity: 0; transform: translateY(6px); }
.move.is-in { opacity: 1; transform: none; }
.move__inner {
  display: flex; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--bone-08);
}
.move__n { font-family: var(--mono); font-size: 11px; color: var(--bone-40); }
.move__t { font-size: 14px; line-height: 1.4; color: var(--bone-85); }

/* -------------------------------------------------------------- what it is -- */
.what { padding: clamp(40px, 6vw, 64px) var(--gutter) clamp(48px, 7vw, 80px); }
.what__head { margin-bottom: 28px; }
.what__h2 { font-size: clamp(22px, 2.6vw, 30px); max-width: 30ch; }
.what__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.what__cell { background: var(--graphite); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.what__cell p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--bone-65); text-wrap: pretty; }

/* ------------------------------------------------------------ trust strip -- */
.trust { border-top: 1px solid var(--bone-12); }
.trust__inner { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 32px; }
.trust__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  color: var(--signal-text); margin-bottom: 22px;
}
.trust__row {
  display: flex; flex-wrap: wrap;
  gap: 20px clamp(28px, 4vw, 56px); align-items: baseline;
}
.trust__co { font-weight: 500; font-size: 17px; color: var(--bone-75, rgba(233,229,218,.75)); letter-spacing: -.01em; }

/* --------------------------------------------------------------- 02 events -- */
.events { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ecard {
  background: var(--graphite); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px; min-height: 160px;
}
.ecard__n { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--bone-40); }
.ecard__t { font-weight: 500; font-size: 19px; line-height: 1.25; }
.ecard__d { font-size: 14px; line-height: 1.55; color: var(--bone-60); text-wrap: pretty; }

/* -------------------------------------------------------------- 03 picture -- */
.light { background: var(--light-bg); color: var(--light-fg); }
.light .eyebrow { color: var(--light-55); }
/* the connected graph: canvas, squares and hairlines, moves with the pointer */
.graph {
  position: relative; height: clamp(340px, 40vw, 480px);
  border: 1px solid var(--light-line); overflow: hidden;
}
.graph canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.light__note {
  font-size: 17px; line-height: 1.6; color: var(--light-70);
  margin: 32px 0 0; max-width: 52ch; text-wrap: pretty;
}

/* -------------------------------------------------------- 04 decision panel -- */
.panel { border: 1px solid var(--bone-16); background: var(--panel); }
.panel__head {
  padding: 24px; border-bottom: 1px solid var(--bone-12);
  display: flex; gap: 12px; align-items: flex-start;
}
.panel__head .sq { margin-top: 7px; }
.panel__title { font-weight: 500; font-size: 19px; line-height: 1.35; }
.panel__label { padding: 20px 24px 8px; }
.panel__list { display: flex; flex-direction: column; padding: 0 24px 24px; }
.panel__row {
  display: flex; gap: 16px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--bone-08);
}
.panel__n { font-family: var(--mono); font-size: 11px; color: var(--bone-40); }
.panel__t { font-size: 15px; color: var(--bone-85); }
.panel__list .btn { margin-top: 20px; align-self: flex-start; }

/* ------------------------------------------------------------- 05 experts -- */
.expert {
  border: 1px solid var(--bone-16); background: var(--panel);
  padding: 28px 24px; display: flex; flex-direction: column; gap: 18px;
}
.expert__flag { display: flex; align-items: center; gap: 10px; }
.expert__flag span:last-child {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--signal-text);
}
.expert__title { font-weight: 500; font-size: 20px; line-height: 1.4; max-width: 30ch; }

/* ------------------------------------------------------------- final + foot -- */
.final {
  max-width: 840px; margin: 0 auto;
  padding: clamp(80px, 11vw, 140px) var(--gutter);
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.final__h2 {
  font-weight: 600; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08;
  letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
.final__sub {
  font-size: 17px; line-height: 1.6; color: var(--bone-65);
  margin: 0; max-width: 44ch; text-wrap: pretty;
}
.final .btn { margin-top: 8px; }

.footer { border-top: 1px solid var(--bone-12); }
.footer__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 24px var(--gutter);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px;
}
.footer__left  { letter-spacing: .14em; color: var(--bone-45); }
.footer__right { color: var(--bone-35); }

/* ------------------------------------------------------------- diagnostic -- */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 12, 10, .82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: auto;
}
.scrim[hidden] { display: none; }

.diag {
  width: 100%; max-width: 560px; background: var(--panel);
  border: 1px solid rgba(233, 229, 218, .2);
  padding: clamp(28px, 5vw, 44px); position: relative;
}
.diag__close {
  position: absolute; top: 16px; right: 16px;
  background: transparent; border: none; color: var(--bone-50);
  cursor: pointer; font-family: var(--mono); font-size: 12px;
}
.diag__close:hover { color: var(--bone); }
.diag__step {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--bone-50); margin-bottom: 24px;
}
.diag__q {
  font-weight: 600; font-size: clamp(21px, 3vw, 26px); line-height: 1.25;
  letter-spacing: -.01em; margin-bottom: 28px;
}
.diag__h {
  font-weight: 600; font-size: clamp(22px, 3vw, 28px); line-height: 1.2;
  letter-spacing: -.01em; margin-bottom: 10px;
}
.diag__sub {
  font-size: 14px; line-height: 1.55; color: var(--bone-60); margin-bottom: 28px;
}
.diag__opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  text-align: left; cursor: pointer; background: transparent;
  border: 1px solid var(--bone-30); color: var(--bone);
  font-family: var(--mono); font-weight: 400; font-size: 13px;
  padding: 14px 16px; transition: border-color .15s ease, background .15s ease;
}
.opt:hover { border-color: rgba(233, 229, 218, .7); }
.opt[aria-pressed="true"] { border-color: var(--bone); background: var(--bone-10); }

.diag__back {
  margin-top: 24px; background: transparent; border: none;
  color: var(--bone-50); cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 0;
}
.diag__back:hover { color: var(--bone); }

.mapped { display: flex; flex-direction: column; border-top: 1px solid var(--bone-12); }
.mapped__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--bone-12);
}
.mapped__t { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.mapped__s { font-family: var(--mono); font-size: 10px; color: var(--confirm-text); }
.diag .btn--md { margin-top: 28px; }

.email-row { display: flex; gap: 8px; flex-wrap: wrap; }
.email-input {
  flex: 1 1 220px; background: var(--graphite);
  border: 1px solid var(--bone-30); color: var(--bone);
  font-family: var(--mono); font-size: 14px; padding: 15px 16px;
  transition: border-color .15s ease;
}
.email-input:focus { border-color: var(--bone); }
.email-btn {
  background: var(--bone); color: var(--graphite); border: none; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; padding: 15px 24px;
}
.email-btn:hover { background: #FFFFFF; }
.email-error {
  margin: 12px 0 0; font-family: var(--mono); font-size: 11px;
  color: var(--signal-text); min-height: 1.1em;
}
.is-busy { opacity: .6; pointer-events: none; }

.confirmed { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.confirmed span:last-child {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--confirm-text);
}

/* ------------------------------------------------------------- responsive -- */
/* The flex/grid wraps carry the layout; no breakpoint-specific layouts exist.
   These only guarantee touch targets on a phone. */
@media (max-width: 700px) {
  .btn, .opt, .tog { min-height: 44px; }
  .op__big { font-size: 34px; }
  .op__chart { gap: 8px; height: 116px; }
  .nav__tag { display: none; }
  .email-btn { min-height: 44px; flex: 1 1 100%; }
  .diag__close { position: static; display: block; margin: 0 0 16px auto; }
}