/* BenchScope — benchscope.nhsd.nl
   Static HTML + CSS. No framework, no build step, no JavaScript.
   Built from design handoff: landing option 1b, app icon 7d. */

/* ---------------------------------------------------------------- tokens */

:root {
  --bg:        #0A0C0E;
  --surface:   #141719;
  --surface2:  #16191C;
  --line:      rgba(186, 196, 180, .16);
  --ink:       #F2F5F0;
  --muted:     #BAC4B4;
  --accent:    #66C733;
  --accent-ink:#66C733;
  --frame:     #22262A;
  --stripe:    rgba(186, 196, 180, .10);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad: 64px;          /* container side padding */
  --maxw: 1120px;
}

/* Dark is the default; the light set overrides every token.
   --accent never changes (the brand green is one colour); only green *text*
   darkens, because #66C733 as text on the light ground is 2.3:1. */
@media (prefers-color-scheme: light) {
  :root {
    --bg:        #F4F6F2;
    --surface:   #FFFFFF;
    --surface2:  #EAEEE6;
    --line:      rgba(10, 12, 14, .14);
    --ink:       #14181A;
    --muted:     #4A5450;
    --accent:    #66C733;
    --accent-ink:#2F6E12;
    --frame:     #D5DACF;
    --stripe:    rgba(10, 12, 14, .07);
  }
}

/* ------------------------------------------------------------- baselines */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; }

a {
  color: var(--accent-ink);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .85;
}

/* The handoff's hover dim is kept on the dark ground, where --accent-ink at
   .85 is still 6.8:1. On the light ground the same dim puts #2F6E12 at
   4.24:1, under the brief's 4.5:1 floor, so the underline carries the hover
   on its own there. */
@media (prefers-color-scheme: light) {
  a:hover { opacity: 1; }
}

:focus-visible {
  outline: 2px solid #66C733;
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  z-index: 10;
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------- shared */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Full-bleed banded section: background and hairlines span the viewport,
   the content inside stays in the container. */
.band {
  background: var(--surface2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.band--open-bottom { border-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}

.lead-text { color: var(--muted); }

/* Screenshot / photo plates. 10px radius, intrinsic size set on the tag so
   the layout never shifts while they load. */
.shot {
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: var(--stripe);
}

/* ---------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--line); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.lockup:hover { text-decoration: none; opacity: 1; }

/* The icon keeps its own dark tile in both themes — it is the app icon,
   not a glyph, so it does not invert on the light background. */
.lockup .mark {
  width: 20px;
  height: 20px;
  border-radius: 8px;
  flex: none;
  display: block;
}

.lockup .wordmark {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.022em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15px;
}
.site-nav a { color: var(--muted); }

/* ------------------------------------------------------------------ hero */

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 64px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 72px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

h1 {
  font-size: 60px;
  line-height: 1.03;
  font-weight: 650;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.cta-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* In review: not a link and not a button — a disabled plate.
   When the listing is live this is replaced by Apple's official badge SVG
   wrapped in an <a>, and .cta-note is removed. */
.btn-appstore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 16px;
  font-weight: 550;
  cursor: not-allowed;
}

.cta-link { font-size: 16px; }

.cta-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.hero-media {
  display: flex;
  justify-content: flex-end;
}

/* The only shadow in the design. */
.phone {
  width: 270px;
  padding: 7px;
  background: var(--frame);
  border-radius: 32px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  flex: none;
}
.phone img {
  width: 100%;
  height: auto;
  border-radius: 25px;
  background: var(--stripe);
}

/* --------------------------------------------------------------- problem */

.problem .wrap {
  padding-top: 56px;
  padding-bottom: 56px;
}

.problem p {
  font-size: 30px;
  line-height: 1.32;
  letter-spacing: -.02em;
  max-width: 42ch;
}
.problem .dim { color: var(--muted); }

/* -------------------------------------------------------------- features */

.features .wrap {
  padding-top: 96px;
  padding-bottom: 100px;
}

.features .eyebrow { margin-bottom: 40px; }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
}

.tile--lead {
  grid-column: 1 / -1;
  padding: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.tile--lead .copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tile--lead h3 {
  font-size: 36px;
  line-height: 1.08;
  font-weight: 640;
  letter-spacing: -.03em;
}

.tile--lead p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 44ch;
}

.tile--small {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.tile--small h3 {
  font-size: 23px;
  line-height: 1.15;
  font-weight: 620;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}

.tile--small p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
}

/* ------------------------------------------------------------- real work */

.realwork .wrap {
  padding-top: 80px;
  padding-bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.realwork .intro {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 56ch;
  margin-top: 16px;
}

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.figures figure { margin: 0; }

.figures figcaption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

/* --------------------------------------------------------------- pricing */

.pricing .wrap {
  padding-top: 84px;
  padding-bottom: 84px;
}

.price-card {
  padding: 44px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.price-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.price-lead {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 640;
  letter-spacing: -.03em;
}

/* Add when the listing is live: €5,99 · one-time (price to be confirmed).
   <p class="price-tag">€5,99 · one-time</p> */
.price-tag {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent-ink);
  margin-top: 14px;
}

.price-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.price-right p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------- privacy */

.privacy .wrap {
  padding-top: 8px;
  padding-bottom: 80px;
}

.privacy-block {
  border-top: 1px solid var(--line);
  padding-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.privacy-lead {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 620;
  letter-spacing: -.03em;
  max-width: 30ch;
}

.privacy-block .note {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  background: var(--surface2);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.site-footer .wrap {
  padding-top: 36px;
  padding-bottom: 44px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
}

.footer-made { color: var(--muted); }

/* ------------------------------------------------- support / privacy docs */

.doc .wrap {
  padding-top: 72px;
  padding-bottom: 88px;
}

.doc article { max-width: 680px; }

.doc h1 {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 640;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.doc .standfirst {
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 8px;
}

.doc .updated {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.doc h2 {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 620;
  letter-spacing: -.02em;
  margin-top: 52px;
  margin-bottom: 18px;
}

.doc h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-top: 34px;
  margin-bottom: 8px;
}

.doc p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}

.doc ul {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--muted);
}

.doc li {
  font-size: 19px;
  line-height: 1.7;
  margin-bottom: 8px;
}

.doc strong { color: var(--ink); font-weight: 600; }

.doc .divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 52px 0 0;
}

/* ----------------------------------------------------------- 760–1120 px */

@media (max-width: 1120px) {
  :root { --pad: 40px; }
}

/* Hero stacks before the rest, at ~900px, and the feature grid drops to two. */
@media (max-width: 980px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .hero-media { justify-content: flex-start; }

  h1 { font-size: 48px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tile--lead {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 36px;
  }
  .tile--lead h3 { font-size: 30px; }

  .price-cols { gap: 36px; }
  .price-lead { font-size: 34px; }
}

/* ---------------------------------------------------------------- <760 px */

@media (max-width: 760px) {
  :root { --pad: 20px; }

  body { font-size: 17px; }

  .site-header .wrap {
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .lockup .mark { width: 18px; height: 18px; }
  .site-nav {
    gap: 20px;
    font-size: 14px;
    flex-wrap: wrap;
  }
  /* Hit targets: every tappable element at least 44px tall. */
  .site-nav a,
  .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hero .wrap {
    padding-top: 32px;
    padding-bottom: 36px;
    gap: 32px;
  }

  h1 {
    font-size: 38px;
    line-height: 1.04;
    letter-spacing: -.03em;
  }

  .hero-sub { font-size: 17px; }

  /* The CTA sits above the screenshot on the first screen at 390pt. */
  .cta-block { align-self: stretch; }
  .cta-row {
    width: 100%;
    gap: 16px;
  }
  .btn-appstore {
    width: 100%;
    min-height: 52px;
  }
  .cta-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .hero-media { justify-content: center; }
  .phone {
    width: 100%;
    max-width: 320px;
  }

  .problem .wrap {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .problem p {
    font-size: 21px;
    line-height: 1.35;
  }

  .features .wrap {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .features .eyebrow { margin-bottom: 24px; }

  .tiles { grid-template-columns: minmax(0, 1fr); }

  .tile--lead { padding: 26px; gap: 24px; }
  .tile--lead h3 { font-size: 26px; }
  .tile--lead p { font-size: 17px; }

  .tile--small { padding: 22px; gap: 20px; }
  .tile--small h3 { font-size: 21px; }

  .realwork .wrap {
    padding-top: 36px;
    padding-bottom: 36px;
    gap: 24px;
  }
  .realwork .intro { font-size: 17px; }
  .figures {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .pricing .wrap {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .price-card { padding: 26px; gap: 22px; }
  .price-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .price-lead { font-size: 28px; }
  .price-right p { font-size: 17px; }

  .privacy .wrap { padding-bottom: 36px; }
  .privacy-block { padding-top: 36px; gap: 14px; }
  .privacy-lead { font-size: 26px; }
  .privacy-block .note { font-size: 17px; }

  .site-footer .wrap {
    padding-top: 24px;
    padding-bottom: 32px;
    gap: 8px;
  }
  .footer-links { gap: 20px; }

  .doc .wrap {
    padding-top: 36px;
    padding-bottom: 44px;
  }
  .doc h1 { font-size: 30px; }
  .doc .standfirst { font-size: 17px; }
  .doc h2 { font-size: 21px; margin-top: 40px; }
  .doc h3 { font-size: 17px; }
  .doc p, .doc li { font-size: 17px; }
}

/* Respect a reduced-motion preference for the only thing that could move:
   native anchor jumps stay instant, which is what the brief asks for. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}