/* What every page of the landing shares: the tokens, the type, the nav with its language picker,
   the button, the section heading, the two kinds of card, the footer. Each page keeps only its own
   sections in a <style> of its own, loaded after this, so a page's rule wins a tie with one here.

   Loaded by landing/index.html and landing/pro/index.html as /site.css — root-relative, so it is
   the same file from bynine.ch/ and bynine.ch/pro/, and from `python3 -m http.server --directory
   landing` on a laptop. */

:root {
  --paper: #fafbf8;
  --panel: #ffffff;
  --ink: #101613;
  --muted: #5b6660;
  --line: #e4e6df;
  --line-soft: #eef0e9;

  /* the product's travel-time ramp, 10 → 60 minutes */
  --b10: #0d5c3a; --b20: #3d8f4e; --b30: #a3bf3a;
  --b40: #e0a52c; --b50: #dd6f2b; --b60: #c2352c;

  /* the app's own accent — the blue of the destination pin */
  --blue: #1f6feb;
  --blue-deep: #1857bd;

  --dark: #101613;
  --dark-2: #1a221c;
  --dark-line: #2a332c;
  --dark-muted: #96a29a;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;

  --shadow-1: 0 1px 2px rgb(16 22 19 / 0.05);
  --shadow-2: 0 1px 3px rgb(16 22 19 / 0.07), 0 12px 32px rgb(16 22 19 / 0.10);
  --shadow-3: 0 2px 8px rgb(16 22 19 / 0.08), 0 28px 70px rgb(16 22 19 / 0.16);
  --wide: 1200px;
  --nav-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #cfe0fb; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
a { color: inherit; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font: 600 12px var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 10px;
}
/* The nine squares before an eyebrow: the travel-time ramp from the top left, three by three.
   One square and eight shadows of it, which keep its rounded corners, so the markup is one empty
   `<span class="tiles">`; `.tiles.full` runs the whole ramp, 10 to 60 minutes. */
.tiles { position: relative; flex: none; width: 18px; height: 18px; }
.tiles::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 5px; height: 5px; border-radius: 1px; background: var(--b10);
  box-shadow:
    6.5px 0 var(--b20), 13px 0 var(--b30),
    0 6.5px var(--b20), 6.5px 6.5px var(--b30), 13px 6.5px var(--b40),
    0 13px var(--b30), 6.5px 13px var(--b40), 13px 13px var(--b50);
}
.tiles.full::before {
  box-shadow:
    6.5px 0 var(--b20), 13px 0 var(--b20),
    0 6.5px var(--b30), 6.5px 6.5px var(--b30), 13px 6.5px var(--b40),
    0 13px var(--b40), 6.5px 13px var(--b50), 13px 13px var(--b60);
}

/* A list whose lines each start with a tick, drawn in CSS rather than the same inline SVG copied
   into every item: a plan's list, and what a reader gets on bynine. The list sets its own indent. */
.ticks li { position: relative; }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 11px;
  border: solid var(--b20); border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
}

h1, h2 { font-family: var(--display); font-variation-settings: "opsz" 80; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 40; height: var(--nav-h);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
/* Three columns and not a flex row: the middle group has to sit against the *page's* centre, and
   with flex it would sit against the centre of whatever space the mark and the buttons left over
   — which moves every time the CTA's word gets longer in another language. */
.nav-in {
  max-width: var(--wide); margin: 0 auto; padding: 0 24px; height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.nav-mid { display: flex; align-items: center; gap: 22px; }
.nav-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.mark { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 700 18px var(--display); letter-spacing: -0.01em; }
.mark svg { display: block; }
/* one word, two beats: "by" quiet, "nine" loud — the space the name doesn't have */
.mark .by { font-weight: 480; color: var(--muted); }
.mark .nine { font-weight: 780; color: var(--blue); }
.mark .tld { font-weight: 500; color: var(--muted); }
/* Quiet by design: the one thing this page wants is the CTA, so the section links sit next to it
   without competing with it for the same weight. */
.nav-link { font: 500 14px var(--sans); color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--ink); }
/* The page you are on, said in the nav without a second colour. */
.nav-link[aria-current="page"] { color: var(--ink); }

/* ---------------------------------------------------------- language
   Each language names itself in itself — "German" is no use to somebody who only reads German —
   which is why this is the one list on the page that is never translated. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
  font: 500 13.5px var(--sans); color: var(--muted);
  padding: 7px 10px; line-height: 1;
  transition: border-color 130ms ease, color 130ms ease;
}
.lang-btn:hover { color: var(--ink); border-color: #ccd2c8; }
.lang-btn .caretdown { transition: transform 160ms ease; opacity: 0.75; }
.lang-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--blue); }
.lang-btn[aria-expanded="true"] .caretdown { transform: rotate(180deg); }

.lang-list {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 50;
  min-width: 156px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-2); padding: 5px; margin: 0;
}
.lang-list[hidden] { display: none; }
/* The list takes focus so it can hear the arrow keys, but the row under the cursor is what
   shows where you are — a ring around all four would say the whole list is the target. */
.lang-list:focus { outline: none; }
.lang-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font: 500 13.5px var(--sans); color: var(--ink);
}
.lang-list li:hover, .lang-list li.cursor { background: #f1f4ee; }
.lang-list li[aria-selected="true"] { color: var(--blue); font-weight: 620; }
/* The tick is drawn by CSS so the markup stays four plain words. */
.lang-list li[aria-selected="true"]::after { content: "✓"; font-size: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: #fff;
  border: 0; border-radius: 10px; cursor: pointer;
  font: 600 14px/1 var(--sans);
  padding: 11px 18px; text-decoration: none;
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
  box-shadow: var(--shadow-1);
}
.btn:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: none; }
/* The second button beside a first one: the same shape, without the colour. */
.btn.quiet { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.quiet:hover { border-color: #ccd2c8; background: var(--paper); }

/* The page's first lines rise into place, once. */
.rise { opacity: 0; transform: translateY(12px); animation: rise 650ms cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1 { animation-delay: 90ms; } .rise.d2 { animation-delay: 200ms; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- headings */
h2.sec {
  font-size: clamp(30px, 4vw, 48px); font-weight: 760; line-height: 1.04;
  letter-spacing: -0.025em; margin: 16px 0 12px; text-wrap: balance;
}

/* ---------------------------------------------------------------- cards
   `.fact`: a short claim with its colour mosaic. `.plan`: a price, what it is for, and a list of
   what it includes, with a button at the foot — the cards line up however long each list is. */
.fact { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; box-shadow: var(--shadow-1); }
.fact .mos { display: grid; grid-template-columns: repeat(6, 9px); gap: 2px; margin-bottom: 16px; }
.fact .mos i { width: 9px; height: 9px; border-radius: 2px; }
.fact h3 { font: 700 17.5px var(--display); letter-spacing: -0.01em; margin-bottom: 7px; }
.fact p { font-size: 14px; color: var(--muted); }
.fact p b { color: var(--ink); font-weight: 600; }
.fact .fig { font: 600 12.5px var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--line-soft); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }

.plan {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 26px 24px 28px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 14px;
}
/* The middle card is the one most people want, so it is the one that is raised.
   No "most popular" ribbon — the shadow and the blue figure already say it. */
.plan.pick { border-color: #1f6feb44; box-shadow: var(--shadow-2); }
.plan .mos { display: grid; grid-auto-flow: column; justify-content: start; gap: 3px; }
.plan .mos i { width: 10px; height: 10px; border-radius: 2px; }
.plan h3 { font: 700 18px var(--display); letter-spacing: -0.01em; }
.plan .cost { display: flex; align-items: baseline; gap: 8px; }
.plan .amount { font: 780 40px var(--display); letter-spacing: -0.03em; line-height: 1; }
.plan.pick .amount { color: var(--blue); }
.plan .per { font: 500 13px var(--sans); color: var(--muted); }
.plan .what { font-size: 14px; color: var(--muted); }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
/* Indented rather than laid out as a flex row: half of these lines have a <b> in the
   middle, and as a flex child that <b> becomes a column of its own instead of a bold
   word in a sentence. The tick before each is `.ticks`. */
.plan li { font-size: 14px; color: var(--muted); padding-left: 21px; }
.plan li b { color: var(--ink); font-weight: 600; }
.plan .go { margin-top: auto; padding-top: 8px; }
.plan .go .btn { width: 100%; justify-content: center; }

/* --------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--line-soft); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 26px 24px 34px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.foot-link { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.foot-link:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ----------------------------------------------------------- responsive */
/* The nav's two outer columns are equal, so the links sit against the page's centre; each has to
   hold the language picker and the CTA. Measured with the fonts loaded: the four links fit beside
   them from about 965px (Italian is the longest), three from about 825px (French). Below that
   the link to the page for firms goes first — the footer and the front page's card still reach
   it — and then the other three. Above a phone's width the CTA never wraps, so a near miss pushes
   the links off centre by a few pixels rather than doubling the button's height; on a phone it
   may wrap, since a button held to one line there would push the page wider than the screen. */
@media (min-width: 561px) {
  .nav-cta { white-space: nowrap; }
}
@media (max-width: 980px) {
  .nav-link.nav-pro { display: none; }
}
@media (max-width: 840px) {
  /* No links: the empty middle column goes too, so the picker and the CTA have all the room the
     mark leaves rather than half of what is left of the page. */
  .nav-link, .nav-mid { display: none; }
  .nav-in { grid-template-columns: auto 1fr; }
}
@media (max-width: 560px) {
  /* A phone's gutter: 16px, for the column, the nav and the footer alike. A page's own full-width
     blocks (a hero that is not `.wrap`) take the same in the page's own style. */
  .wrap, .nav-in, .foot-in { padding-inline: 16px; }
  /* The globe carries it alone here: "Ouvrir la carte" and "Français" side by side
     are wider than a phone, and the open list still names all four in full. */
  .lang-btn #langNow { display: none; }
  .lang-btn { padding: 7px 8px; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; opacity: 1; transform: none; }
}