/* ═══════════════════════════════════════════════════════════
   Fakturette — charcoal & sand landing page
   Self-hosted (latin subset, covers å ä ö ø æ ü):
     Archivo     variable grotesk, width axis used for display
     Newsreader  variable serif for running text
     IBM Plex Mono  labels and data
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/fonts/newsreader-var-latin.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/plexmono-latin-400.woff2") format("woff2");}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/plexmono-latin-500.woff2") format("woff2");}

/* ───────────────────────────────────────────────────────────
   Committed to one visual world: blue-black ground, steel-blue
   accent. No light variant — the dark ground is the design, so
   every colour is painted explicitly and nothing is inherited.

   Tokens are named by role, not by colour, so the palette can
   move again without the names going stale.
   ─────────────────────────────────────────────────────────── */
:root {
  --bg:       #14181C;   /* charcoal, cooled to blue-black so the accent sits right */
  --bg-2:     #1B2026;   /* raised surface, tinted further blue */
  --bg-3:     #232A31;   /* hover / expanded */
  --fg:       #E6EDF3;   /* primary text — cool, never pure white */
  --accent:   #8FC1E3;   /* pale steel blue. The bright note. Used sparingly. */
  --accent-2: #5E9CC8;   /* mid blue, for structure rather than emphasis */
  --muted:    #9CB0C2;   /* secondary text, blue-grey — lifted for weight on dark */
  --rule:     #262E36;
  --rule-2:   #37424D;
  --warn:     #E8877E;   /* semantic only: errors. Never the accent. */

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r: 4px;             /* the only corner radius on the page */

  --t-hero:  clamp(2.75rem, 7vw, 6.1rem);
  --t-h2:    clamp(1.75rem, 3.2vw, 2.7rem);
  --t-h3:    1.22rem;
  --t-body:  1.1875rem;
  --t-small: 1.0625rem;
  --t-label: .72rem;

  --gap: clamp(1rem, 2.2vw, 2.25rem);
  --pad: clamp(1.15rem, 4.5vw, 4.5rem);
  --bay: clamp(4rem, 8vw, 7.5rem);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--t-body);
  font-weight: 500;          /* serif body on a dark ground needs the extra weight */
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--bg); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--bg);
  padding: .7rem 1.1rem; border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

/* ─── primitives ───────────────────────────────────────── */
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.bay  { padding-block: var(--bay); }

.label {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.label--accent { color: var(--accent); }
.figs { font-variant-numeric: tabular-nums; }

.h2 {
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: -.022em;
  line-height: 1.02;
  margin-top: 1rem;
}
.sub { color: var(--muted); max-width: 54ch; margin-top: 1.1rem; }

/* ─── button — 4px, flat, no shadow anywhere on this page ─ */
.btn {
  display: inline-block;
  padding: 1.05rem 2rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--fg); border-color: var(--fg); }

.tlink {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  text-decoration-color: var(--rule-2);
  transition: text-decoration-color .2s ease, color .2s ease;
}
.tlink:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ═══ MASTHEAD — one text link, so the hero owns the only button ═══ */
.masthead { border-bottom: 1px solid var(--rule); }
.masthead__in {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.15rem;
}
.wordmark {
  font-family: var(--display); font-size: 1.35rem; font-weight: 800;
  font-variation-settings: "wdth" 100;
  letter-spacing: -.03em; text-decoration: none;
}
.wordmark i { font-style: normal; color: var(--accent); }
.masthead__nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.masthead__nav a {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; color: var(--muted);
  transition: color .18s ease;
}
.masthead__nav a:hover { color: var(--accent); }

/* ═══ HERO — left-aligned, one statement, one button ═══ */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.hero__main { grid-column: 1 / 9; }
.hero__rail { grid-column: 10 / 13; align-self: end; }

.hero__title {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  line-height: .95;
  letter-spacing: -.035em;
  margin-bottom: 1.75rem;
}
.hero__title em { font-style: normal; color: var(--accent); }

.hero__deck { font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--muted); max-width: 48ch; margin-bottom: 2.5rem; }
.hero__act { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.rail { border-top: 1px solid var(--rule-2); }
.rail__row { display: flex; align-items: baseline; gap: .9rem; padding-block: .85rem; border-bottom: 1px solid var(--rule); }
.rail__n {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  font-variation-settings: "wdth" 100; letter-spacing: -.02em; color: var(--accent);
  min-width: 4.2rem; font-variant-numeric: tabular-nums;
}
.rail__t { font-size: 1.0625rem; color: var(--muted); }

/* ═══ PROOF — horizontal list, hairline-divided ═══ */
.proof { border-block: 1px solid var(--rule); background: var(--bg-2); }
.proof__in { display: flex; flex-wrap: wrap; }
.proof__i {
  flex: 1 1 14rem;
  padding: 1.4rem clamp(.9rem, 2vw, 1.75rem);
  border-left: 1px solid var(--rule);
  font-size: var(--t-small);
}
.proof__i:first-child { border-left: 0; padding-left: 0; }
.proof__i b { display: block; font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .45rem; }

/* ═══ COMPARISON — the value proposition ═══ */
.cmp { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

.cmp__head, .cmp__btn {
  display: grid;
  grid-template-columns: 3.2fr 4fr 4fr 2.5rem;
  gap: var(--gap);
  align-items: start;
  text-align: left;
}
.cmp__head { padding: 0 1rem .75rem; border-bottom: 1px solid var(--rule-2); }
.cmp__h { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmp__h--us { color: var(--accent); }

.cmp__row { border-bottom: 1px solid var(--rule); }

.cmp__btn {
  width: 100%;
  padding: 1.35rem 1rem;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .18s ease;
}
.cmp__btn:hover { background: var(--bg-2); }
.cmp__row[data-open="true"] .cmp__btn { background: var(--bg-2); }

.cmp__job { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); font-variation-settings: "wdth" 100; letter-spacing: -.015em; }
.cmp__then { color: var(--muted); font-size: var(--t-small); }
.cmp__now  { color: var(--fg); font-size: var(--t-small); border-left: 2px solid var(--accent); padding-left: 1rem; }
.cmp__plan { display: block; margin-top: .4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

.cmp__sign {
  justify-self: end;
  width: 1.65rem; height: 1.65rem;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: .95rem; line-height: 1;
  color: var(--muted);
  transition: transform .22s ease, color .18s ease, border-color .18s ease;
}
.cmp__btn:hover .cmp__sign { color: var(--accent); border-color: var(--accent); }
.cmp__row[data-open="true"] .cmp__sign { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }

.cmp__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.cmp__row[data-open="true"] .cmp__panel { grid-template-rows: 1fr; }
.cmp__panel > div { overflow: hidden; }
.cmp__panel p {
  max-width: 68ch;
  padding: 0 1rem 1.5rem;
  color: var(--muted);
  font-size: var(--t-small);
}

/* ═══ CAPABILITIES — horizontal list, scrolls rather than wrapping ═══ */
.strip { border-top: 1px solid var(--rule); }
.strip__scroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--rule-2);
}
.strip__i {
  flex: 0 0 clamp(15rem, 22vw, 19rem);
  scroll-snap-align: start;
  padding: 1.6rem clamp(1rem, 2vw, 1.75rem) 1.9rem;
  border-left: 1px solid var(--rule);
}
.strip__i:first-child { border-left: 0; padding-left: 0; }
.strip__t { font-family: var(--display); font-weight: 700; font-size: 1.1rem; font-variation-settings: "wdth" 100; letter-spacing: -.012em; margin-block: .7rem .45rem; }
.strip__d { color: var(--muted); font-size: var(--t-small); }

/* ═══ PRICING — a real table, plans as columns ═══ */
.rates { margin-top: clamp(2rem, 4vw, 3rem); overflow-x: auto; }
.rates table { width: 100%; min-width: 46rem; border-collapse: collapse; text-align: left; }
.rates th, .rates td { padding: .82rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.rates thead th { border-bottom: 1px solid var(--rule-2); vertical-align: bottom; }
.rates tbody th { font-weight: 450; color: var(--fg); font-size: var(--t-small); }
.rates td { text-align: center; width: 15%; }
.rates .plan { font-family: var(--display); font-weight: 700; font-size: 1.15rem; font-variation-settings: "wdth" 100; letter-spacing: -.015em; display: block; }
.rates .price { font-family: var(--display); font-weight: 700; font-size: 2rem; font-variation-settings: "wdth" 100; letter-spacing: -.03em; display: block; margin-top: .55rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.rates .per { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-top: .25rem; }
.rates .col--pick { background: var(--bg-2); }
.rates thead .col--pick { border-top: 2px solid var(--accent-2); }
.rates .yes { color: var(--accent); }
.rates .no  { color: var(--muted); }
.rates .qty { font-family: var(--mono); font-size: .85rem; color: var(--fg); }
.rates tfoot td, .rates tfoot th { border-bottom: 0; padding-top: 1.5rem; }

/* ═══ OBJECTIONS ═══ */
.qa { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-2); }
.qa__row { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.qa__q { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); font-variation-settings: "wdth" 100; letter-spacing: -.015em; max-width: 24ch; }
.qa__a { color: var(--muted); font-size: var(--t-small); max-width: 62ch; }

/* ═══ CLOSE ═══ */
.close__in > * { grid-column: 1 / 9; }
.close__t {
  font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.5rem); font-weight: 800;
  font-variation-settings: "wdth" 110; line-height: 1; letter-spacing: -.032em;
  margin-block: 1.1rem 1.4rem;
}
.close__p { color: var(--muted); max-width: 44ch; margin-bottom: 2.25rem; }

/* ═══ FOOTER ═══ */
.foot { border-top: 1px solid var(--rule); padding-block: 2.75rem 2rem; }
.foot__in { display: flex; flex-wrap: wrap; gap: 1.75rem 3rem; align-items: baseline; justify-content: space-between; }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 1.0625rem; }
.foot__links a { text-decoration: none; color: var(--muted); transition: color .18s ease; }
.foot__links a:hover { color: var(--accent); }
.foot__end { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1040px) {
  .hero__main { grid-column: 1 / 10; }
  .hero__rail { grid-column: 1 / 8; margin-top: 3rem; }
  .close__in > * { grid-column: 1 / 11; }
  .cmp__head { display: none; }
  .cmp__btn { grid-template-columns: 1fr 2.5rem; gap: .55rem 1rem; }
  .cmp__job { grid-column: 1; }
  .cmp__sign { grid-column: 2; grid-row: 1; }
  .cmp__then, .cmp__now { grid-column: 1 / 3; }
  .cmp__then::before { content: "Now — "; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
}
@media (max-width: 700px) {
  .hero__main, .hero__rail, .close__in > * { grid-column: 1 / 13; }
  .proof__i { flex-basis: 100%; border-left: 0; padding-inline: 0; border-top: 1px solid var(--rule); }
  .proof__i:first-child { border-top: 0; }
  .qa__row { grid-template-columns: 1fr; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  .cmp__panel { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   LIVE-PAGE BLOCKS (not in the prototype)
   ═══════════════════════════════════════════════════════ */

/* ─── SEO index: profession x city ────────────────────── */
.seo { border-top: 1px solid var(--rule); padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.seo__grid { columns: 3; column-gap: clamp(1.5rem, 3vw, 3rem); margin-top: 1.75rem; }
.seo__group { break-inside: avoid; margin-bottom: 1.5rem; }
.seo__group h3 {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  padding-bottom: .4rem; margin-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.seo__group p { font-size: 1rem; line-height: 1.75; color: var(--muted); }
.seo__group a { text-decoration: none; transition: color .18s ease; }
.seo__group a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.seo__sep { color: var(--rule-2); }

/* ─── Contact dialog ──────────────────────────────────── */
.contact {
  width: min(560px, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: var(--bg-2);
  color: var(--fg);
}
.contact::backdrop { background: rgb(10 9 8 / .72); }
.contact__in { padding: clamp(1.4rem, 3vw, 2.25rem); }
.contact__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--rule-2);
}
.contact__title {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  font-variation-settings: "wdth" 100; letter-spacing: -.02em;
}
.contact__x {
  border: 0; background: none; cursor: pointer; padding: .3rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.contact__x:hover { color: var(--accent); }

.field { display: block; margin-top: 1.15rem; }
.field > span {
  display: block; font-family: var(--mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem;
}
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--t-small);
  color: var(--fg); background: var(--bg);
  border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: .7rem .85rem; transition: border-color .18s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; }

.contact__submit { margin-top: 1.5rem; width: 100%; text-align: center; cursor: pointer; }
.contact__submit[disabled] { opacity: .55; cursor: progress; }

.notice {
  margin-top: 1.15rem; padding: .75rem .9rem;
  border-left: 2px solid var(--muted); background: var(--bg);
  font-size: var(--t-small); border-radius: 0 var(--r) var(--r) 0;
}
.notice--ok  { border-left-color: var(--accent); }
.notice--err { border-left-color: var(--warn); color: var(--warn); }

.contact__open {
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--muted); text-align: left; transition: color .18s ease;
}
.contact__open:hover { color: var(--accent); }

@media (max-width: 1040px) { .seo__grid { columns: 2; } }
@media (max-width: 700px)  { .seo__grid { columns: 1; } }