/* ==========================================================
   NodeCove - v3 mockup
   Dark, a single accent color, reveal on scroll
   ========================================================== */

/* The @font-face rules are in /fonts/fonts.css, loaded by a <link>
   on every page, so they are not copied sheet by sheet. */

:root {
  --bg:        #07080e;
  --bg-2:      #0b0d16;
  --surface:   #10121f;
  --surface-2: #151829;
  --border:    #1e2136;
  --border-2:  #2a2e48;

  --text:   #eceefb;
  --text-2: #9ea1c0;
  --text-3: #63668a;

  --accent:      #8b6fff;
  --accent-soft: #a893ff;
  --accent-dim:  rgba(139, 111, 255, .14);
  /* The accent purple only contrasts at 3.6:1 on white, not enough for
     text. This darkened shade rises to 6.8:1: it is used only
     when writing in purple on a light background (white button in the hero). */
  --accent-ink:  #5b3fd6;
  --amber:       #f7931a;

  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;   --sp-6: 1.5rem;
  --sp-8: 2rem;   --sp-12: 3rem;  --sp-16: 4rem;  --sp-20: 5rem;
  --sp-24: 6rem;  --sp-32: 8rem;

  --rad:      14px;
  --rad-lg:   22px;
  --rad-full: 999px;

  --maxw: 1140px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --f-display: clamp(2.05rem, 1rem + 2.9vw, 3.4rem);
  --f-h2:      clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem);
  --f-h3:      clamp(1.2rem, 1rem + .7vw, 1.55rem);
  --f-lead:    clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --f-body:    1.0625rem;
  /* --f-md was referenced by the dropdown menu, the plan name in the
     order selector and the plan tagline, without ever having been
     declared: these three spots therefore fell back to the inherited size. */
  --f-md:      1.125rem;
  --f-sm:      .9375rem;
  --f-xs:      .8125rem;

  /* Stacks defined once in /fonts/fonts.css */
  --font: var(--nc-sans);
  --mono: var(--nc-mono);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The background is set on the document itself and the theme is declared: without this
   the browser paints its own light color while loading, and
   you see a white-blue flash between two pages. */
/* The top bar is fixed: without this reserve, an anchor drops the target
   right underneath it, hidden, and you think the link points to nothing.
   The height is not hardcoded: it varies from 67 to 90 px depending on the screen
   and the language. language.js measures the bar and sets --nc-barre; the fallback
   value only serves before the script runs. */
[id] { scroll-margin-top: calc(var(--nc-barre, 90px) + 24px); }
/* Enough space at the end of the page so the last anchors can
   actually settle under the bar instead of hitting the bottom of the document. */
body { padding-bottom: 14vh; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark; background: var(--bg);
}
/* Smooth scrolling is only armed once the page has settled, by language.js.
   On Safari, a scroll animation started while the page is still finishing
   loading is silently dropped: the jump to an anchor then failed
   to arrive, and the reader stayed at the top thinking the link
   had done nothing. On arrival the jump is now instant, and smooth scrolling
   only applies to clicks made while already reading. */
html.nc-lisse { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--f-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-6); }

/* ---------- Navigation bar ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* Elastic spacing: between 900 px and 1190 px the bar exceeded its
     own width and the plan button spilled out of the frame. */
  gap: clamp(.9rem, 2.2vw, var(--sp-8));
  padding: 1.1rem clamp(1rem, 3.4vw, 2.75rem);
  transition: background 400ms var(--ease), border-color 400ms var(--ease), backdrop-filter 400ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(7, 8, 14, .78);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--border);
}
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; gap: clamp(.8rem, 1.9vw, var(--sp-8)); font-size: var(--f-sm); color: var(--text-2); white-space: nowrap; }
.nav__links a { position: relative; transition: color 220ms var(--ease); }
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -5px;
  height: 1px; background: var(--accent); transition: right 380ms var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { right: 0; }
.nav__end { display: flex; align-items: center; gap: clamp(.5rem, 1.1vw, 1.1rem); }
.nav__account {
  font-size: var(--f-sm); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--rad-full);
  padding: .6rem clamp(.75rem, 1.2vw, 1.15rem); white-space: nowrap;
  transition: color 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}
.nav__account:hover { color: var(--text); border-color: var(--accent); background: rgba(139,111,255,.1); }
.nav__offer span { opacity: .72; font-weight: 400; }
.langs { position: relative; }
.langs__cur {
  display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--text-2); background: none; cursor: pointer;
  border: 1px solid var(--border-2); border-radius: var(--rad-full);
  padding: .38rem .6rem .38rem .48rem;
  transition: color 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}
.langs__cur:hover { color: var(--text); border-color: var(--accent); background: rgba(139,111,255,.1); }
.langs__chev { opacity: .6; transition: transform 260ms var(--ease); }
.langs__cur[aria-expanded="true"] .langs__chev { transform: rotate(180deg); }
.langs__menu {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 10.5rem;
  padding: .35rem; border: 1px solid var(--border-2); border-radius: var(--rad-md);
  background: rgba(16, 18, 31, .97); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.langs__menu[hidden] { display: none; }
.flag {
  display: inline-flex; flex: 0 0 auto; width: 20px; height: 14px;
  border-radius: 2px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16);
}
.flag svg { display: block; }
.lang {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  font-family: var(--font); font-size: var(--f-sm); text-align: left;
  color: var(--text-2); background: none; border: none; cursor: pointer;
  border-radius: var(--rad-sm); padding: .5rem .6rem;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.lang:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .05); }
.lang.is-on { color: var(--text); }
.lang:disabled { cursor: default; color: var(--text-3); }
.lang__name { white-space: nowrap; }
.lang:hover { color: var(--text-2); background: rgba(255,255,255,.04); }
.lang.is-on { color: var(--text); background: rgba(139,111,255,.16); }

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: inherit; font-size: var(--f-sm); font-weight: 500;
  padding: .78rem 1.6rem; border-radius: var(--rad-full);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 300ms var(--ease), background 300ms var(--ease),
              box-shadow 400ms var(--ease), border-color 300ms var(--ease), color 300ms var(--ease);
}
.btn--primary {
  background: #fff; color: #07080e; font-weight: 600;
  box-shadow: 0 0 0 0 rgba(255,255,255,.22), 0 10px 40px -12px rgba(139,111,255,.55);
}
.btn__brand { color: var(--accent-ink); font-weight: 700; letter-spacing: .01em; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 0 34px -4px rgba(255,255,255,.28), 0 16px 48px -14px rgba(139,111,255,.7); }
.btn--ghost { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: #fff; font-weight: 600; }
.btn--accent:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 16px 44px -14px rgba(139,111,255,.85); }
.btn--lg { padding: .95rem 2rem; font-size: 1rem; }

/* Solid purple button: reserved for the guided tour, so it stands out from the
   white purchase button without competing with it for top billing. Darkened background
   (--accent-ink): the accent purple does not carry readable white text. */
.btn--violet {
  background: var(--accent-ink); color: #fff; font-weight: 600;
  border-color: var(--accent);
}
.btn--violet:hover {
  background: #6a4ae4; color: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 40px -14px rgba(139, 111, 255, .75);
}

/* ---------- Label ---------- */

.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .4rem .95rem .4rem .7rem; border-radius: var(--rad-full);
  border: 1px solid var(--border-2); background: rgba(255,255,255,.025);
  font-size: var(--f-xs); color: var(--text-2); letter-spacing: .01em;
}
.pill__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 3px rgba(247,147,26,.16);
}

/* ---------- Hero ---------- */

/* 88svh and not 100: with full screen, there was a gap of two hundred
   pixels below the status bar before the video. The top of the video frame is now
   visible without having to scroll. */
.hero { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; transition: opacity .9s ease;
}
.hero__bg.is-on { opacity: .95; }
.hero__bg--node { background: url('/t/img/nc2-hero.jpg') no-repeat right -4% center / cover; }
.hero__bg--cove { background: url('/t/img/nc2-hero-cove.jpg') no-repeat right -4% center / cover; }
@media (prefers-reduced-motion: reduce) { .hero__bg { transition: none; } }
@media (min-width: 900px) { .hero__bg { background-size: 78% auto; background-position: right -6% center; } }
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(90% 70% at 8% 50%, rgba(7,8,14,.97) 22%, rgba(7,8,14,.55) 58%, rgba(7,8,14,0) 78%),
    linear-gradient(to top, var(--bg) 2%, rgba(7,8,14,0) 34%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 7rem; padding-bottom: 2.5rem; }
.hero__inner { max-width: 47rem; }

/* Link to the players section, below the quota table. */
.quota-game { margin-top: 1.1rem; color: var(--text-2); font-size: var(--f-sm); line-height: 1.65; }
.quota-game b { color: var(--text); font-weight: 500; }
.quota-game a { color: var(--accent-soft); }

/* ---- Disclosure menu ----------------------------------------------------
   It replaces the bar links as soon as space runs out. The panel is
   an absolute child of the fixed bar, so it always sits below it. */
.burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 2.5rem; height: 2.5rem; padding: 0 .55rem; cursor: pointer;
  background: none; border: 1px solid var(--border-2); border-radius: var(--rad-full);
  transition: border-color 240ms var(--ease), background 240ms var(--ease);
}
.burger:hover { border-color: var(--accent); background: rgba(139,111,255,.1); }
.burger span {
  display: block; height: 1.5px; width: 100%; background: var(--text);
  border-radius: 2px; transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
.burger.is-on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.is-on span:nth-child(2) { opacity: 0; }
.burger.is-on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.tuck {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column;
  padding: .6rem clamp(1rem, 3.4vw, 2.75rem) 1.1rem;
  background: rgba(7, 8, 14, .96); backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.tuck[hidden] { display: none; }
.tuck a {
  padding: .95rem .2rem; font-size: var(--f-md); color: var(--text-2);
  border-bottom: 1px solid var(--border);
  transition: color 200ms var(--ease);
}
.tuck a:last-child { border-bottom: none; }
.tuck a:hover { color: var(--text); }
.tuck__count { color: var(--accent-soft) !important; }
.tuck .langs { margin-top: .9rem; }
.tuck .langs__cur { padding: .55rem .8rem .55rem .65rem; }
.tuck .langs__menu { left: 0; right: auto; }

/* In the disclosure menu, the language selector no longer expands: the six
   languages are laid out flat. The dropdown used to end up at the bottom of a fixed
   bar, so its bottom passed under the phone's address bar, and scrolling
   the page did not bring it back since the bar does not move. The
   last language was then out of reach. */
@media (max-width: 899px) {
  /* The panel is limited to the visible height and scrolls on its own.
     100dvh follows iOS's collapsing toolbar, 100vh does not follow it. */
  .tuck {
    max-height: calc(100dvh - 4.4rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Enough to finish the run: without this margin the last language arrives
       stuck against the bottom edge of the panel. */
    padding-bottom: 1.8rem;
    /* Solid background: at 96% the hero's white button could be glimpsed behind
       the last row of languages. */
    background: #05060b;
  }
  .tuck .langs { margin-top: 1.1rem; }
  .tuck .langs__cur { display: none; }
  .tuck .langs__menu,
  .tuck .langs__menu[hidden] {
    display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
    position: static; min-width: 0; padding: 0;
    background: none; backdrop-filter: none; box-shadow: none; border: none;
  }
  .tuck .lang {
    padding: .7rem .6rem; border: 1px solid var(--border-2);
    border-radius: var(--rad-md);
  }
  .tuck .lang.is-on { border-color: var(--accent); }
}

/* Breakpoint specific to the bar: below 1200 px the six links and the
   purchase button no longer fit side by side, the button ended up
   cut off. The links then move into the disclosure menu. */
@media (max-width: 1199px) {
  .nav__links { display: none; }
  .burger { display: flex; }
}

@media (max-width: 899px) {
  .hero { min-height: auto; }
  /* Opacity is carried by .is-on only, otherwise the hidden layer would come
     back on a phone and cover the visible panel's image. Full strength here:
     the photograph is the only colour up there. */
  .hero__bg.is-on { opacity: 1; }
  /* On a phone the photograph is a band at the top, of a known height, so the
     subject can be framed whole instead of being blown up and cropped. The
     fade is expressed over that band, not over the whole hero. */
  .hero__bg {
    inset: 4.6rem 0 auto 0; height: 30rem;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 56%, rgba(0,0,0,0) 100%);
  }
  /* Each photograph is framed on its own subject: the coin sits left of centre,
     the wrapped phone sits on the right, so they need different anchors. */
  .hero__bg--node { background-position: 22% 50%; }
  /* The wrapped phone is smaller in its photograph than the coin is in the
     other one, so it is zoomed in further to read at the same size. */
  .hero__bg--cove { background-size: auto 118%; background-position: 71% 48%; }
  /* The veil is lighter than it was: it still has to make the text readable,
     but it must no longer wash the orange and violet out of the photograph. */
  .hero__veil {
    background:
      radial-gradient(130% 46% at 74% 8%, rgba(7,8,14,0) 40%, rgba(7,8,14,.3) 70%, rgba(7,8,14,.8) 92%),
      linear-gradient(to bottom, rgba(7,8,14,.42) 0%, rgba(7,8,14,.06) 12%, rgba(7,8,14,.6) 28%, rgba(7,8,14,.88) 46%, var(--bg) 62%);
  }
  /* The dots and the badge climb towards the top bar, while the heading keeps
     its own place: the gap they leave behind is given back to the heading. */
  .hero .wrap { padding-top: 6.6rem; padding-bottom: 2.4rem; }
  /* On a phone the dots would land under the buttons, at the very bottom of
     the screen, where nobody sees them. They go above the panels instead,
     right under the top bar, where they say straight away that there are two
     offers and can be tapped without scrolling. */
  .hero__inner { display: flex; flex-direction: column; }
  .hero__dots { order: -1; margin: 0 0 1.2rem; }
  /* Tighter than on a large screen, so the whole offer holds in one screen. */
  .hero__sub { margin-top: 1.2rem; }
  .hero__cta { margin-top: 1.8rem; }
  .hero__cta-lien { padding: .55rem .4rem; }
  /* On a phone the two buttons used to stack, which pushed the second one out
     of the first screen. They now share one row, half the width each, and
     their label is allowed to run onto a second line: German and Vietnamese
     labels are far longer than the French ones and would otherwise be cut.
     The link keeps its own full-width row underneath. */
  .hero .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
  .hero .hero__cta .btn {
    white-space: normal; text-align: center; padding: .72rem .6rem;
    font-size: .875rem; line-height: 1.25; min-height: 3.05rem;
  }
  /* The offer names cannot be hyphenated, and NODECOVE alone is wider than
     half of a 320 px screen at the size above: below 360 px the label shrinks
     one notch rather than pushing the page sideways. */
  .hero .hero__cta .btn { overflow-wrap: break-word; }
  .hero .hero__cta-lien { grid-column: 1 / -1; justify-content: flex-start; }
  /* The badge now sits over the brightest part of the photograph, so it needs
     its own dark backing to stay readable. */
  .hero .pill {
    background: rgba(7,8,14,.62); backdrop-filter: blur(6px); color: var(--text);
    /* Block-level so the room the badge gives up at the top is handed back
       below it: the heading and everything under it do not move.
       Trimmed by about one line so the panel sits a notch higher and the hole
       between the badge and the heading closes. */
    display: flex; width: fit-content; margin-bottom: 4.2rem;
  }
}

h1 {
  font-size: var(--f-display); font-weight: 600; line-height: 1.06;
  letter-spacing: -.03em; margin: 1.5rem 0 0; text-wrap: pretty;
}
h1 .dim { color: var(--text-3); display: block; }

/* ---- Rotating hero -------------------------------------------------------
   The two panels share one grid cell, so the block is as tall as the taller
   of the two and nothing jumps when they swap. The hidden panel stays in the
   markup but is taken out of the tab order and out of the accessibility tree,
   otherwise the keyboard would land on invisible buttons. */
.hero__slides { display: grid; }
.hero__slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease, visibility .55s;
}
.hero__slide.is-on {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; transform: none; }
}
/* The second panel's heading is an h2 so the page keeps a single h1, but it
   must read exactly like the first one. */
.hero__h1 {
  font-size: var(--f-display); font-weight: 600; line-height: 1.06;
  letter-spacing: -.03em; margin: 1.5rem 0 0; text-wrap: pretty;
}
.hero__h1 .dim { color: var(--text-3); display: block; }
/* The badge announces the heading, so it belongs to it: the default heading
   margin left a hole between the two and pushed the whole panel down by half a
   line. Tighter here only, since headings elsewhere on the page keep their
   usual breathing space. */
.hero .pill + h1, .hero .pill + .hero__h1 { margin-top: .7rem; }
/* The two panels share a box as tall as the taller one, so the shorter panel
   leaves some room above the dots. The margin stays small so that this room
   reads as breathing space and not as a hole. */
.hero__dots { display: flex; gap: .7rem; margin-top: 1.4rem; }
/* The dots have to be seen on a phone, over a dark photograph: hence a light
   grey rather than a border colour, a real height, and a glow on the active
   one. The invisible padding gives a comfortable tap target. */
.hero__dot {
  position: relative;
  width: 2.4rem; height: 6px; padding: 0; border: 0; border-radius: var(--rad-full);
  background: rgba(255,255,255,.42); cursor: pointer;
  box-shadow: 0 0 0 1px rgba(7,8,14,.55);
  transition: background .25s ease, width .25s ease, box-shadow .25s ease;
}
.hero__dot::before { content: ''; position: absolute; inset: -12px -6px; }
.hero__dot:hover { background: rgba(255,255,255,.7); }
.hero__dot.is-on {
  background: var(--accent); width: 3.6rem;
  box-shadow: 0 0 14px rgba(124,92,255,.75);
}
.hero__dot:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero__dot { transition: none; } }

/* The first line under the heading carries the argument, so it is written in
   full white and slightly larger; the second one explains, and steps back. */
.hero__sub {
  margin-top: 1.6rem; font-size: 1.16rem; color: var(--text); font-weight: 450;
  max-width: 32rem; line-height: 1.5; letter-spacing: -.005em;
}
.hero__sub--2 {
  margin-top: 1.5rem; font-size: var(--f-base); color: var(--text-3);
  font-weight: 400; line-height: 1.55;
}
.hero__sub b { color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: 2.4rem; }
/* "Understand the method" gives up its spot as a button to the guided tour and
   remains accessible as a link, aligned on the button height. */
.hero__cta-lien {
  display: inline-flex; align-items: center;
  padding: .95rem .4rem; font-size: var(--f-sm);
  color: var(--text-2); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hero__cta-lien:hover { color: var(--text); border-bottom-color: var(--accent); }
.hero__meta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1.6rem; font-size: var(--f-xs); color: var(--text-3); }
.hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__meta span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* ---------- Sections ---------- */

section { position: relative; }
.sec { padding-block: clamp(5rem, 11vw, 9rem); }
.sec--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sec--line { border-top: 1px solid var(--border); }

.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem;
}
h2 { font-size: var(--f-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.028em; }
h2 .dim { color: var(--text-3); }
h3 { font-size: var(--f-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; }
.lead { font-size: var(--f-lead); color: var(--text-2); line-height: 1.6; max-width: 44rem; }
p + p { margin-top: 1rem; }
.muted { color: var(--text-2); }
.dimtext { color: var(--text-3); font-size: var(--f-sm); }

/* ---------- Manifeste ---------- */

.manifesto { text-align: center; padding-block: 0 clamp(4rem, 9vw, 7rem); }

/* Manifesto banner. Fixed height and media as an absolute background: the visual is
   cropped by the frame, as at RetoSwap, instead of being a thumbnail placed
   in the middle of the page. Since the visual's background is pure black, it blends seamlessly
   into the site's background. */
.manifesto__stage {
  position: relative;
  height: 28.75rem;                 /* 460 px */
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.manifesto__media { position: absolute; inset: 0; z-index: 0; }
.manifesto__img, .manifesto__video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Darkening at the center: without it the title sits on light areas
   of the visual and loses readability. The edges remain untouched. */
.manifesto__stage::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(46% 58% at 50% 50%,
    rgba(7,8,14,.9) 0%, rgba(7,8,14,.5) 55%, rgba(7,8,14,0) 100%);
}
.manifesto__over {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--sp-6);
}
.manifesto__line {
  font-size: clamp(1.7rem, .9rem + 2.7vw, 3.2rem); font-weight: 500;
  line-height: 1.16; letter-spacing: -.03em; max-width: 22ch; margin-inline: auto;
  text-shadow: 0 2px 40px rgba(7,8,14,.95);
  text-wrap: balance;
}
.manifesto__body { margin-top: 2rem; max-width: 40rem; margin-inline: auto; color: var(--text-2); font-size: var(--f-lead); }
.manifesto__body strong { color: var(--text); font-weight: 500; }
.manifesto__body em { color: var(--accent-soft); font-style: normal; }
.manifesto .eyebrow { justify-content: center; }
/* This line is the punchline of the section, not a footnote: it has to read
   larger than the body above it, on a phone as well as on a wide screen. */
.manifesto__pin {
  margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  font-size: var(--f-h3); line-height: 1.4;
}
.manifesto__pin strong { color: var(--text); font-weight: 500; }

/* ---------- Dated statement ---------- */

.finding { position: relative; overflow: hidden; }
.finding__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/t/img/nc2-control.jpg') no-repeat center bottom / cover;
  opacity: .5;
}
.finding__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(7,8,14,.6) 38%, rgba(7,8,14,.86) 100%);
}
.finding .wrap { position: relative; z-index: 2; }

.timeline { margin-top: 3rem; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; }
@media (min-width: 860px) { .timeline { grid-template-columns: repeat(3, 1fr); } }
.tl {
  background: rgba(12, 14, 24, .82); backdrop-filter: blur(6px);
  padding: 1.9rem 1.7rem 2.1rem;
  transition: background 400ms var(--ease);
}
.tl:hover { background: rgba(21, 24, 41, .92); }
.tl__date { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: var(--amber); text-transform: uppercase; }
.tl h3 { margin-top: .85rem; }
.tl p { margin-top: .7rem; color: var(--text-2); font-size: var(--f-sm); }

.gap {
  margin-top: 2rem; padding: 1.5rem 1.7rem; border-radius: var(--rad);
  border: 1px solid var(--border-2); background: var(--accent-dim);
  font-size: var(--f-lead); line-height: 1.5;
}
.gap b { color: var(--accent-soft); font-weight: 600; }

/* ---------- Citation ---------- */

.quote { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.quote blockquote {
  font-size: clamp(1.35rem, .9rem + 1.7vw, 2.15rem); font-weight: 500;
  line-height: 1.3; letter-spacing: -.022em; max-width: 34ch;
}
.quote blockquote em { font-style: normal; color: var(--text-3); }
.quote__note { margin-top: 1.6rem; color: var(--text-3); font-size: var(--f-sm); max-width: 34rem; }

/* The quote now shares its line with an image: the maximum width
   of 34ch was calibrated for full width, it would cramp the text
   in a half column. */
.quote__grid blockquote { max-width: 22ch; }
@media (max-width: 939px) { .quote__grid blockquote { max-width: 34ch; } }
/* On phone, the quote is read before the image: it carries the
   message, the image only accompanies it. */
@media (max-width: 939px) { .quote__grid .split__media { order: 2; } }
.quote__grid .quote__note { max-width: none; }

/* The brand name spelled out in a heading: Node in white,
   Cove in purple, as on the crest. */
.nc-word { color: var(--text); }
.nc-word__cove { color: var(--accent-soft); }

/* ---------- Grilles image / texte ---------- */

.split { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--rev .split__media { order: 2; }
}
.split__media { border-radius: var(--rad-lg); overflow: hidden; border: 1px solid var(--border); position: relative; }
.split__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 1.2s var(--ease); }
.split__media:hover img { transform: scale(1.045); }
.split__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(139,111,255,.09), rgba(7,8,14,0) 55%);
}
.split__body > * + * { margin-top: 1.1rem; }

/* Long text column: the image accompanies the reading instead of floating
   in the middle of a column twice its height. If the browser
   does not apply sticky positioning, the image simply stays at the top. */
@media (min-width: 940px) {
  .split--track { align-items: start; }
  .split--track .split__media { position: sticky; top: calc(var(--nav-h, 88px) + 1.6rem); }
}

/* ---------- Trois affirmations ---------- */

.claims { margin-top: 2.5rem; display: grid; gap: 1px; background: var(--border); border-radius: var(--rad); overflow: hidden; border: 1px solid var(--border); }
.claim { background: var(--surface); padding: 1.5rem 1.6rem; display: flex; gap: 1.1rem; align-items: flex-start; }
.claim__n { font-family: var(--mono); font-size: .72rem; color: var(--accent); padding-top: .35rem; letter-spacing: .1em; }
.claim p { font-size: 1.0625rem; line-height: 1.5; }
.claim p b { font-weight: 600; }

details.fold {
  margin-top: 1.6rem; border: 1px solid var(--border); border-radius: var(--rad);
  background: var(--bg-2); overflow: hidden;
}
details.fold summary {
  cursor: pointer; list-style: none; padding: 1rem 1.3rem;
  font-size: var(--f-sm); color: var(--text-2);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: color 240ms var(--ease);
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary:hover { color: var(--text); }
details.fold summary::after { content: '+'; font-family: var(--mono); color: var(--accent); font-size: 1.05rem; }
details.fold[open] summary::after { content: '−'; }
details.fold .fold__body { padding: 0 1.3rem 1.3rem; color: var(--text-2); font-size: var(--f-sm); }

/* In a block that already has the --bg-2 background (the response time measurement), the
   disclosure panel needs to stand out: it is given the surfaces background. */
details.fold--light { background: var(--surface); margin-top: 1.1rem; }
/* A disclosure panel that contains a list or a table: the body already carries its
   own vertical rhythm, so the extra top margin is avoided. */
details.fold .fold__body > .kit,
details.fold .fold__body > .table-wrap { margin-top: .2rem; }
details.fold .fold__body > .quota-game:first-child { margin-top: 0; }

/* ---------- Method: three cards ---------- */

.trio { margin-top: 3rem; display: grid; gap: 1.25rem; }
@media (min-width: 880px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 1.8rem 1.6rem 2rem;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease), background 400ms var(--ease);
}
.card:hover { border-color: var(--border-2); transform: translateY(-3px); background: var(--surface-2); }
.card__tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.card h3 { margin-top: .7rem; }
.card p { margin-top: .8rem; color: var(--text-2); font-size: var(--f-sm); }

.rule {
  margin-top: 1.5rem; padding: 1.4rem 1.6rem; border-radius: var(--rad);
  border: 1px solid rgba(247,147,26,.28); background: rgba(247,147,26,.07);
  font-size: var(--f-sm); color: var(--text-2);
}
.rule b { color: #ffc477; font-weight: 600; }

/* ---------- Formules ---------- */

.plans { margin-top: 3.2rem; display: grid; gap: 1.5rem; align-items: stretch; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan {
  position: relative; border: 1px solid var(--border); border-radius: var(--rad-lg);
  background: var(--surface); padding: 2.2rem 2rem 2.4rem; display: flex; flex-direction: column;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: var(--border-2); }
.plan--hi {
  border-color: rgba(139,111,255,.42);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(139,111,255,.13), rgba(16,18,31,0) 62%),
    var(--surface);
  box-shadow: 0 30px 90px -50px rgba(139,111,255,.9);
}
.plan__name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.plan__hook {
  margin-top: .5rem;
  /* Two reserved lines: the two taglines are not the same length, and
     without this the two prices would not line up at the same height from one card to another. */
  min-height: 2.6em;
  font-size: var(--f-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.plan__kind { margin-top: .35rem; color: var(--accent-soft); font-size: var(--f-sm); font-weight: 500; }
.plan__price { margin-top: 1.5rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan__amount { font-size: clamp(2.6rem, 1.7rem + 2.6vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; line-height: 1; }
.plan__per { color: var(--text-2); font-size: var(--f-sm); }
/* The amount in the reader's currency: deliberately quieter than the euro
   figure it follows, because it is an order of magnitude and not the price.
   Placed right under the large figure, before the billing line. */
.plan__local { margin-top: .3rem; color: var(--text-3); font-size: var(--f-xs); line-height: 1.5; opacity: .85; }
.plan__local[hidden] { display: none; }
.plan__bill { margin-top: .55rem; color: var(--text-3); font-size: var(--f-xs); line-height: 1.6; }
.plan__save {
  margin-top: .55rem; display: inline-block; align-self: flex-start;
  font-size: var(--f-xs); font-weight: 500; color: #ffd79a;
  background: rgba(247,147,26,.12); border: 1px solid rgba(247,147,26,.34);
  border-radius: var(--rad-full); padding: .3rem .8rem; line-height: 1.4;
}
.plan__save[hidden] { display: none; }
.plan__alt { margin-top: .7rem; color: var(--text-3); font-size: var(--f-xs); line-height: 1.7; }
.plan ul { list-style: none; margin-top: 1.7rem; display: grid; gap: .8rem; }
.plan li { position: relative; padding-left: 1.6rem; font-size: var(--f-sm); color: var(--text-2); line-height: 1.5; }
.plan li::before {
  position: absolute; left: 0; top: .3em;
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid rgba(139,111,255,.45);
}
.plan li b { color: var(--text); font-weight: 600; }
.plan__foot { margin-top: auto; padding-top: 2rem; }
.plan__foot .btn { width: 100%; }
.plan__note { margin-top: 1rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.6; }

/* ---------- Quota ---------- */

.table-wrap { margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
th, td { text-align: left; padding: .95rem 1.3rem; border-bottom: 1px solid var(--border); }
thead th { background: var(--bg-2); color: var(--text-3); font-weight: 500; font-size: var(--f-xs); letter-spacing: .06em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--text); font-weight: 500; white-space: nowrap; }
tbody td:last-child { color: var(--text-2); }

/* ---------- What we do not do ---------- */

.nots { margin-top: 2.6rem; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; }
@media (min-width: 780px) { .nots { grid-template-columns: 1fr 1fr; } }
.not { background: var(--bg-2); padding: 1.5rem 1.6rem; }
.not__h { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.not__h span { font-family: var(--mono); color: #ff7a7a; font-size: .95rem; }
.not p { margin-top: .55rem; color: var(--text-2); font-size: var(--f-sm); }

/* Source links in the body of documentary pages used to inherit
   "a { color: inherit }": they were invisible, therefore useless. Here the
   source is the argument, it must be visible.

   :not(.btn) is essential. Without it, this rule would win over
   .btn--amber (a class selector plus an element outweighs a
   class alone) and would repaint the "Open a Freedomia account" button in
   light purple on its orange background, underlined on top. A button is not
   a source link: it keeps the color of its button. */
.not p a:not(.btn), .warn a:not(.btn), .bridge p a:not(.btn), .split__body a:not(.btn), .table-wrap td a:not(.btn) {
  color: var(--accent-soft); border-bottom: 1px solid rgba(139,111,255,.35);
}
.not p a:not(.btn):hover, .warn a:not(.btn):hover, .bridge p a:not(.btn):hover, .split__body a:not(.btn):hover, .table-wrap td a:not(.btn):hover {
  color: var(--text); border-bottom-color: var(--accent);
}

/* ---------- Appel final ---------- */

.final { text-align: center; position: relative; overflow: hidden; }
.final__glow {
  position: absolute; left: 50%; top: 30%; translate: -50% 0;
  width: min(900px, 120vw); aspect-ratio: 2/1; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(139,111,255,.20), rgba(7,8,14,0) 70%);
  filter: blur(20px);
}
.final .wrap { position: relative; z-index: 1; }
.final h2 { max-width: 20ch; margin-inline: auto; }

/* ---------- Footer ---------- */

footer { border-top: 1px solid var(--border); padding-block: 3.5rem 3rem; background: var(--bg-2); }
.foot { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .foot { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot img { height: 24px; width: auto; }
.foot p { margin-top: 1rem; color: var(--text-3); font-size: var(--f-sm); max-width: 26rem; }
.foot h4 { font-size: var(--f-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; }
.foot ul { list-style: none; margin-top: 1rem; display: grid; gap: .6rem; font-size: var(--f-sm); color: var(--text-2); }
.foot ul a:hover { color: var(--accent-soft); }
.foot__bar { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--f-xs); color: var(--text-3); }

/* ---------- Reveal on scroll ---------- */

.rv { opacity: 0; transform: translateY(26px); }
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
}
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: 110ms; }
.rv[data-d="2"] { transition-delay: 220ms; }
.rv[data-d="3"] { transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }


/* ---------- Utilitaires d'espacement ---------- */

.stack-lg { margin-top: clamp(3rem, 7vw, 5rem); }
.sub-h {
  margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: 1rem;
  font-size: var(--f-h3); font-weight: 600; letter-spacing: -.018em;
}
.clarify {
  margin-top: 1.6rem; padding: 1.1rem 1.4rem; border-radius: var(--rad);
  border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text-2); font-size: var(--f-sm);
}

/* ---------- Trois affirmations : sous-ligne ---------- */

.claim__sub { display: block; margin-top: .5rem; color: var(--text-3); font-size: var(--f-sm); line-height: 1.55; }
.fold__body p + p { margin-top: .8rem; }

/* ---------- Compatible wallets: name and platforms ---------- */

.wallet { list-style: none; margin: .9rem 0; padding: 0; display: grid; gap: 1px;
       background: var(--border); border: 1px solid var(--border);
       border-radius: var(--rad); overflow: hidden; }
.wallet li { background: var(--surface); padding: .6rem .9rem; display: flex;
          flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline;
          justify-content: space-between; }
.wallet b { color: var(--text); font-weight: 600; font-size: var(--f-sm); }
.wallet span { color: var(--text-3); font-size: var(--f-xs); text-align: right; }
@media (max-width: 560px) {
  .wallet li { display: block; }
  .wallet span { display: block; margin-top: .15rem; text-align: left; }
}

/* ---------- Method in steps ---------- */

.steps { list-style: none; margin-top: 3rem; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--rad); overflow: hidden; }
.step { background: var(--surface); padding: 1.7rem 1.7rem 1.8rem; display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; transition: background 400ms var(--ease); }
.step:hover { background: var(--surface-2); }
.step__n { font-family: var(--mono); font-size: .8rem; color: var(--accent); padding-top: .35rem; letter-spacing: .08em; }
.step__body h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.step__body p { margin-top: .7rem; color: var(--text-2); font-size: var(--f-sm); }
.step--bonus { background: var(--bg-2); }
.step--bonus .step__n { color: var(--amber); }
.tagline {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-soft); border: 1px solid rgba(139,111,255,.4); background: var(--accent-dim);
  border-radius: var(--rad-full); padding: .18rem .6rem; white-space: nowrap;
}

/* ---------- Cycle selector ---------- */

.cycle {
  margin-top: 2.2rem; display: inline-flex; flex-wrap: wrap; gap: .35rem;
  padding: .35rem; border: 1px solid var(--border); border-radius: var(--rad-full);
  background: var(--bg-2);
}
.cycle__btn {
  font-family: inherit; font-size: var(--f-sm); font-weight: 500; color: var(--text-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--rad-full);
  padding: .55rem 1.2rem; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
  transition: background 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}
.cycle__btn:hover { color: var(--text); }
.cycle__btn.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.cycle__badge { font-family: var(--mono); font-size: .68rem; color: var(--amber); letter-spacing: .04em; }
.cycle__btn.is-on .cycle__badge { color: #fff; opacity: .85; }

/* ---------- Formules : ajouts ---------- */

/* The flag is out of flow: it must not shift the name (p + p rule). */
.plan__flag + .plan__name { margin-top: 0; }
.plan__foot { display: flex; flex-direction: column; }
.plan__foot .plan__note { margin-top: 0; margin-bottom: 1rem; }
.plan__flag {
  position: absolute; top: -.75rem; left: 2rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: var(--rad-full); padding: .3rem .8rem;
}
.plan__per--none { color: var(--accent-soft); font-size: var(--f-lead); font-weight: 500; }

/* ---------- Referral: pricing table ---------- */

.tiers { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 940px) { .tiers { grid-template-columns: 1fr auto 1fr 1fr; align-items: center; } }
.tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad);
  padding: 1.5rem 1.5rem 1.6rem; text-align: center;
}
.tier--hi { border-color: rgba(139,111,255,.42); background: radial-gradient(120% 90% at 50% 0%, rgba(139,111,255,.13), rgba(16,18,31,0) 65%), var(--surface); }
.tier--soft { background: var(--bg-2); }
.tier__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); line-height: 1.5; }
.tier__rate { margin-top: .8rem; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.tier--hi .tier__rate { color: var(--accent-soft); }
.tier--soft .tier__rate { color: var(--amber); }
.tier__desc { margin-top: .6rem; color: var(--text-2); font-size: var(--f-sm); }
.tier__arrow { display: none; color: var(--text-3); font-size: 1.4rem; text-align: center; }
@media (min-width: 940px) { .tier__arrow { display: block; } }

/* ---------- Sorties ---------- */

.dests { display: grid; gap: 1.25rem; }
@media (min-width: 880px) { .dests { grid-template-columns: repeat(3, 1fr); } }
.dest {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--rad);
  padding: 1.7rem 1.6rem 1.8rem;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.dest:hover { border-color: var(--border-2); transform: translateY(-3px); }
.dest__flag { font-size: 1.6rem; line-height: 1; }
.dest h3 { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.dest p { margin-top: .8rem; color: var(--text-2); font-size: var(--f-sm); }
.dest__tag {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: #7ee0a8; border: 1px solid rgba(126,224,168,.32); background: rgba(126,224,168,.09);
  border-radius: var(--rad-full); padding: .18rem .6rem; white-space: nowrap;
}
.dest--soon { background: var(--bg-2); }
.dest--soon .dest__flag { color: var(--text-3); font-family: var(--mono); }

/* Response time measured by the visitor's browser. The badge takes the
   space left free in the card's title; the closest exit
   receives an accent border, discreet, without changing the layout. */
.dest__ms {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  color: var(--text-2); border: 1px solid var(--border-2);
  border-radius: var(--rad-full); padding: .18rem .6rem; white-space: nowrap;
}
.dest__ms--nul { color: var(--text-3); }
.dest__ms--top {
  color: var(--accent-soft); border-color: rgba(139, 111, 255, .45);
  background: var(--accent-dim);
}
.dest--proche { border-color: rgba(139, 111, 255, .45); }
.dest--proche::after {
  content: attr(data-proche);
  display: inline-block; margin-top: 1rem;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-soft);
}

/* Explanation block for the response time, above the cards. */
.lat {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--rad);
  padding: 1.6rem 1.6rem 1.7rem; margin-bottom: 1.6rem;
}
.lat__h { font-size: var(--f-h3); line-height: 1.25; }
.lat__p { margin-top: .85rem; color: var(--text-2); font-size: var(--f-sm); line-height: 1.6; }
.lat__p--warn { color: var(--amber); }
.lat__p--fine { color: var(--text-3); font-size: var(--f-xs); }
.lat__re {
  font: inherit; color: var(--accent-soft); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
  text-decoration-color: rgba(139, 111, 255, .5); text-underline-offset: 3px;
}
.lat__re:hover { color: var(--text); }

/* ---------- Hardware ---------- */

.kit { list-style: none; display: grid; gap: .85rem; }
.kit li { position: relative; padding-left: 1.6rem; color: var(--text-2); font-size: var(--f-sm); line-height: 1.55; }
.kit li::before {
  position: absolute; left: 0; top: .42em; content: ''; width: 9px; height: 9px; border-radius: 2px;
  background: rgba(247,147,26,.14); border: 1px solid rgba(247,147,26,.45);
}
.kit li b { color: var(--text); font-weight: 600; }

/* ---------- Honest warning ---------- */

.warn {
  padding: 1.3rem 1.5rem; border-radius: var(--rad);
  border: 1px solid rgba(247,147,26,.28); background: rgba(247,147,26,.07);
  color: var(--text-2); font-size: var(--f-sm);
}
.warn b { color: #ffc477; font-weight: 600; }

/* Near-black text on orange: 8.3:1, the best readability possible
   on this shade. The light purple that used to show there, due to the effect
   of the link selector fixed above, only gave 1.1:1. On hover the
   button switches to the brand purple, the text staying the same: it holds
   5.3:1 on this purple, where white would only hold 3.6:1. */
.btn--amber { background: var(--amber); color: #12100a; font-weight: 600; }
.btn--amber:hover {
  background: var(--accent);
  transform: translateY(-2px); box-shadow: 0 16px 44px -16px rgba(139,111,255,.8);
}

/* ---------- FAQ ---------- */

.faq { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.faq__cat {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-3); font-weight: 400; padding-bottom: .9rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.faq details.fold { margin-top: .7rem; }
.faq details.fold summary { font-size: var(--f-body); color: var(--text); font-weight: 500; padding: 1.05rem 1.3rem; }
.faq details.fold summary:hover { color: var(--accent-soft); }
.faq details.fold .fold__body { color: var(--text-2); font-size: var(--f-sm); }
/* A link within an answer must be visible: without this the reader misses
   the pages that carry the detail. Discreet underline, purple tint. */
.faq details.fold .fold__body a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.faq details.fold .fold__body a:hover { text-decoration-color: var(--accent-soft); }
details.fold summary { text-wrap: pretty; }
details.fold summary::after { flex: none; }

/* ---------- Film ---------- */

/* The bottom was at zero: the caption overflowed into the next section, which
   made the video look stuck to the bottom of its frame. Breathing room on both
   sides, a bit more below than above. */
.film-sec { padding-top: 1.4rem; padding-bottom: 3.4rem; }
.film { max-width: 23rem; margin-inline: auto; }
.film__eyebrow {
  text-align: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem;
}
.film__frame {
  position: relative; border-radius: var(--rad-lg); overflow: hidden;
  border: 1px solid var(--border-2); background: #05060b;
  box-shadow: 0 50px 120px -70px rgba(139,111,255,.85);
  aspect-ratio: 9 / 16;
}
.film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #05060b; }
.film__play {
  position: absolute; inset: 0; width: 100%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
  color: var(--text); background: rgba(7,8,14,.34); border: none; padding: 0;
  transition: background 320ms var(--ease), opacity 260ms var(--ease);
}
.film__play[hidden] { display: none; }
.film__play:hover { background: rgba(7,8,14,.2); }
.film__playDisc {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  color: #07080e; background: rgba(236,238,251,.94);
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.7);
  transition: transform 320ms var(--ease), background 320ms var(--ease);
}
.film__play:hover .film__playDisc { transform: scale(1.07); background: #fff; }
.film__playDisc svg { margin-left: 3px; }
.film__playTxt {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text); text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.film__cap { margin-top: 1rem; text-align: center; color: var(--text-3); font-size: var(--f-xs); }

/* ---------- Connection status line (hero) ----------
   The only remnant of the old live node card: the full card
   moved to "My account", where it is shown only to NODECOVE subscribers. Here, the
   line tells the visitor whether they are already going through a NodeCove exit. */

.live__row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
  max-width: 34rem; margin-top: 1.3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.live__loc { display: flex; align-items: center; gap: .7rem; }
.live__flag { font-size: 1.3rem; line-height: 1; }
.live__loc b { display: block; font-size: var(--f-sm); font-weight: 500; }
.live__loc em { display: block; font-style: normal; font-size: var(--f-xs); color: var(--text-3); margin-top: .15rem; }
.live__shield {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  font-size: var(--f-xs); color: #a5f3c4;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.28);
  border-radius: var(--rad-full); padding: .4rem .85rem;
}

/* ---------- Recommendation box ---------- */

.pick {
  margin-top: 1.4rem; padding: 1.3rem 1.4rem;
  border: 1px solid var(--border-2); border-left: 2px solid var(--amber, #f7931a);
  border-radius: var(--rad); background: rgba(255,255,255,.022);
}
.pick__h { font-size: var(--f-sm); font-weight: 600; margin-bottom: .6rem; }
.pick p { font-size: var(--f-sm); color: var(--text-2); line-height: 1.7; }
.pick__no { margin-top: .7rem; font-size: var(--f-xs) !important; color: var(--text-3) !important; }
.nolink { color: var(--text-3); }
.step__body a { color: var(--accent-soft); border-bottom: 1px solid rgba(139,111,255,.4); }
.step__body a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Order tunnel ---------- */

.order {
  margin-top: 2.4rem;
  padding: 1.9rem;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(139,111,255,.10), rgba(16,18,31,0) 62%), var(--surface);
}
.order__eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.order__pick { margin-top: 1.1rem; display: grid; gap: .8rem; }
@media (min-width: 720px) { .order__pick { grid-template-columns: 1fr 1fr; } }
.order__opt {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .95rem 1.1rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.order__opt:hover { border-color: var(--border-2); color: var(--text); }
.order__opt b { font-size: var(--f-md); letter-spacing: -.01em; color: var(--text); }
.order__opt em { font-style: normal; font-size: var(--f-xs); color: var(--text-3); }
.order__opt.is-on {
  border-color: rgba(139,111,255,.55);
  background: rgba(139,111,255,.11);
  color: var(--text);
}
.order__opt.is-on em { color: var(--accent-soft); }
/* ---------- Commitment duration, in the order block ---------- */
/* Three equal columns: the labels are short (1 month, 1 year, 2 years) and
   fit side by side up to 320 px, so no dropdown is needed. Each
   button carries its monthly price, which avoids scrolling back up to the table. */
.order__terms {
  margin-top: .9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
/* NODECOVE only has two durations: the two remaining buttons take up the width. */
.order__duree--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.order__term {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 4.1rem;
  padding: .55rem .4rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.order__term:hover { border-color: var(--border-2); color: var(--text); }
.order__term b { font-size: var(--f-sm); font-weight: 600; color: var(--text); white-space: nowrap; }
.order__term-price { font-family: var(--mono); font-size: .74rem; color: var(--text-3); white-space: nowrap; }
/* "per month" accompanies the amount without competing for attention: smaller
   and more discreet, it reads as a unit, not as a second value. */
.order__dur-unite { font-size: .86em; opacity: .72; }
/* The savings sit INSIDE the button, on their own line. Set as a floating
   label above the edge, it read as if it belonged to the neighboring
   button, especially on phone where the columns are tight. */
.order__term-save {
  font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .03em;
  color: var(--amber); white-space: nowrap;
}
.order__term.is-on {
  border-color: rgba(139,111,255,.55);
  background: rgba(139,111,255,.14);
  color: var(--text);
}
.order__term.is-on .order__term-price { color: var(--accent-soft); }
.order__term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On a phone, the amount and its unit no longer fit on one line inside a third
   of the width: the unit goes under the amount instead of pushing the grid
   past the card, which used to shift the three buttons off centre. */
@media (max-width: 460px) {
  .order__term { padding: .55rem .25rem; }
  .order__term-price { white-space: normal; text-align: center; line-height: 1.25; }
  .order__dur-unite { display: block; }
}
@media (max-width: 380px) {
  .order__term { min-height: 3.9rem; padding: .45rem .2rem; }
  .order__term b { font-size: var(--f-xs); }
  .order__term-price { font-size: .68rem; }
  .order__dur-unite { font-size: .8em; }
  .order__term-save { font-size: .57rem; }
}

.order__sum {
  margin-top: 1.2rem;
  font-family: var(--mono);
  font-size: var(--f-sm);
  color: var(--text);
  letter-spacing: -.01em;
}
.order__local {
  margin-top: .35rem;
  font-family: var(--mono);
  font-size: var(--f-xs);
  color: var(--text-3);
  letter-spacing: -.01em;
}
.order__local[hidden] { display: none; }
/* Said once, under the two cards. */
.plans__local-note {
  max-width: 62ch; margin: 1.6rem auto 0;
  text-align: center; color: var(--text-3);
  font-size: var(--f-xs); line-height: 1.7;
}
.plans__local-note[hidden] { display: none; }
.order__form { margin-top: 1.1rem; display: grid; gap: .7rem; }
@media (min-width: 860px) { .order__form { grid-template-columns: 1fr auto; align-items: center; } }
.order__ref {
  margin-top: .7rem; font-size: var(--f-sm); color: var(--accent-soft);
}
.order__in {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--f-sm);
}
.order__in::placeholder { color: var(--text-3); }
.order__in:focus { outline: none; border-color: var(--accent); }
.order__in.is-bad { border-color: #e0574f; }
.order__form .btn { width: 100%; justify-content: center; }
.order__err {
  margin-top: .9rem;
  font-size: var(--f-xs);
  color: #f0857d;
  line-height: 1.6;
}
.order__err.is-warn { color: var(--amber); }

/* ---------- Advice on the entered address ----------
   We only ask for an address: might as well say what we know about the
   chosen provider. Only three tones, and never a block. */
.mail-notice {
  margin-top: .75rem;
  padding: .8rem .95rem;
  border: 1px solid var(--border-2);
  border-left-width: 3px;
  border-radius: 10px;
  font-size: var(--f-xs);
  line-height: 1.65;
  color: var(--text-2);
  background: rgba(255, 255, 255, .015);
}
.mail-notice b { color: var(--text); font-weight: 600; }
.mail-avis--bien { border-left-color: #34d399; }
.mail-avis--bien b { color: #34d399; }
.mail-avis--attention { border-left-color: var(--amber); }
.mail-avis--attention b { color: var(--amber); }
.mail-avis--neutre { border-left-color: var(--border-2); }
.mail-notice a { color: var(--accent); }
.mail-notice__links { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.mail-notice__fix {
  margin-top: .5rem;
  background: none;
  border: 1px solid var(--amber);
  color: var(--amber);
  border-radius: 8px;
  padding: .35rem .7rem;
  font: inherit;
  font-family: var(--mono);
  font-size: .75rem;
  cursor: pointer;
}
.mail-notice__fix:hover { background: rgba(245, 158, 11, .1); }
.mail-aware {
  margin-top: .7rem;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  font-size: var(--f-xs);
  line-height: 1.6;
  color: var(--text-2);
  cursor: pointer;
}
.mail-aware input {
  margin-top: .18rem;
  width: 16px; height: 16px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.mail-aware.is-bad { color: var(--amber); }

.order__note { margin-top: 1rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.7; }
/* "why bitcoin only" disclosure panel in the order card:
   tighter than the FAQ disclosure panels, so as not to compete with the button. */
details.fold--order { margin-top: 1rem; background: var(--bg); }
details.fold--order summary { padding: .8rem 1.05rem; font-size: var(--f-xs); }
details.fold--order .fold__body { padding: 0 1.05rem 1.05rem; font-size: var(--f-xs); line-height: 1.75; }
details.fold--order .fold__body a { color: var(--accent); }
/* Call-out line toward the bitcoin purchase page: it is the number one
   blocking point for a new customer, it deserves its own line. */
.order__link { margin-top: 1rem; font-size: var(--f-sm); }
.order__link a { color: var(--accent); font-weight: 500; text-decoration: none; }
.order__link a:hover { text-decoration: underline; }
.order__link-sub { display: inline-block; margin-top: .3rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.7; }
.cycle__btn.is-void { opacity: .35; }

/* ---------- Status supplements ---------- */

@media (min-width: 880px) { .dests--pair { grid-template-columns: repeat(2, 1fr); } }
/* Fifth channel item: a single card on its own line, because it is the
   only recurring one and it needs two sentences of framing. */
@media (min-width: 880px) { .dests--pair .dest--large { grid-column: 1 / -1; } }
.dest__tag--off { color: var(--amber); border-color: rgba(247,147,26,.4); background: rgba(247,147,26,.1); }
.tiers__live {
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: var(--f-xs);
  color: var(--accent-soft);
  letter-spacing: -.01em;
}
.live__loc em.is-off { color: var(--amber); }
/* No NodeCove tunnel open: red, no longer amber. Amber used to say
   "caution" where it should say "no". The label changes at the same time
   as the color (see idx_js_not_protected_nodecove in index.html). */
.live__shield--off { color: #fca5a5; border-color: rgba(239,68,68,.38); background: rgba(239,68,68,.10); }
[hidden] { display: none !important; }

/* ---------- Mobile adaptation (after the base rules) ---------- */

@media (max-width: 899px) {
  .nav__links { display: none; }
  .nav { padding: .85rem 1.1rem; gap: .6rem; }
  .nav .btn { padding: .6rem 1.15rem; font-size: var(--f-xs); }
  .nav__end { gap: .45rem; }
  /* The account moves into the disclosure menu, the language does not: a visitor
     who does not read French would not guess that they need to open a menu to
     change language, whereas they recognize a flag without reading. The
     selector is therefore placed just to the left of the menu button. */
  .nav__account { display: none; }
  .nav__end > .langs { order: 3; flex: 0 0 auto; }
  .nav__end > .burger { order: 4; }
  /* The dropdown opens slightly to the left to fit within the screen. */
  .nav__end > .langs .langs__menu { right: -1.9rem; }
  /* The logo gives up a few pixels: this is what allows the selector, the purchase
     button and the menu to fit side by side on a phone screen. It must
     never be left to flex compression, which used to crush it
     until it disappeared. */
  /* Four blocks to fit within 390 px: logo, purchase button, language and menu.
     The logo must never be left to flex compression, which used to crush it
     until it disappeared: it therefore gives up a few pixels of height, and
     the purchase button tightens up, so the price stays visible without opening
     the menu. */
  .nav__logo { flex: 0 0 auto; }
  .nav__logo img { height: 15px; }
  .nav__offer span { display: none; }
  .nav .btn.nav__offer { padding: .5rem .7rem; font-size: .75rem; letter-spacing: 0; }
  .nav { padding: .85rem .85rem; gap: .4rem; }
  /* The flag alone: the language code costs twenty-four pixels that the bar
     no longer has. Each language remains named in the dropdown. */
  .nav__end > .langs .langs__code { display: none; }
  .nav__end > .langs .langs__cur { padding: .34rem .45rem; }
  .film { max-width: 19rem; }
  .film__playDisc { width: 58px; height: 58px; }
  /* On mobile the height of 15 rem did not leave room for the overline and the
     last line ended up touching the right edge, on the lightest golden area.
     A bit more breathing room, a smaller title, and a darker center. */
  .manifesto__stage { height: 17.5rem; }
  .manifesto__stage::after {
    background: radial-gradient(78% 66% at 50% 50%,
      rgba(7,8,14,.94) 0%, rgba(7,8,14,.7) 58%, rgba(7,8,14,.12) 100%);
  }
  .manifesto__over { padding-inline: var(--sp-5); }
  .manifesto__line { font-size: 1.4rem; line-height: 1.24; max-width: 19ch; }
  .film-sec { padding-top: 1.6rem; padding-bottom: 2.4rem; }
  .live__row { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .step { grid-template-columns: 1fr; gap: .5rem; padding: 1.4rem 1.3rem 1.5rem; }
  .step__n { padding-top: 0; }
  .claim { flex-direction: column; gap: .55rem; padding: 1.3rem 1.3rem 1.5rem; }
  .cycle { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; border-radius: var(--rad); }
  .cycle__btn { justify-content: center; padding: .6rem .5rem; font-size: var(--f-xs); flex-wrap: wrap; gap: .3rem; }
  .plan { padding: 2rem 1.4rem 2.2rem; }
  .plan__flag { left: 1.4rem; }
  .tl, .not, .dest, .card, .tier { padding-left: 1.3rem; padding-right: 1.3rem; }
  .gap, .rule, .warn, .clarify { padding: 1.2rem 1.3rem; }
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; }
  th, td { padding: .75rem .85rem; font-size: var(--f-xs); }
  tbody td:first-child { white-space: normal; }
  .faq details.fold summary { font-size: var(--f-sm); padding: .95rem 1.1rem; }
  .faq details.fold .fold__body { padding: 0 1.1rem 1.1rem; }
  .foot__bar { justify-content: flex-start; }
}

/* ==========================================================================
   SECONDARY PAGES
   Two standalone pages ("Protecting your keys" and "What we see about
   you") branch off from the home page so as not to lengthen it further. They
   reuse the same stylesheet, with a lighter bar: logo, back
   to home, the language selector set by language.js, and the plan. No
   disclosure menu: there are not enough links to warrant one.
   ========================================================================== */
.nav--sub .nav__links { font-size: var(--f-sm); }
/* Going back is a button, not a bare link: same outlined shape as the account
   button next to it, same violet edge on hover. The sliding underline of
   .nav__links is cancelled here, a frame and an underline at once read as two
   controls. */
.back {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--rad-full);
  padding: .6rem clamp(.75rem, 1.2vw, 1.15rem); white-space: nowrap;
  transition: color 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease);
}
.back svg { flex: none; opacity: .7; transition: transform 220ms var(--ease); }
.back:hover { color: var(--text); border-color: var(--accent); background: rgba(139,111,255,.1); }
.back:hover svg { transform: translateX(-3px); }
.nav__links a.back::after { content: none; }

/* The home page bar folds its six links into the disclosure menu below
   1200 px. The lighter bar has only one link and no menu to put it in:
   the same rule made it disappear entirely, and on phone there
   was nothing left to go back with except the logo. It is therefore kept,
   and below 700 px only the arrow is kept, for lack of space. */
@media (max-width: 1199px) {
  .nav--sub .nav__links { display: flex; }
}
@media (max-width: 899px) {
  .nav--sub .nav__account { display: inline-flex; }
}
/* Very small screens, 320 to 374 px: each block gives up a few more
   pixels, otherwise the menu button ended up cut off at the right edge. */
@media (max-width: 429px) {
  .nav { padding: .8rem .7rem; gap: .32rem; }
  .nav__logo img { height: 13px; }
  .nav .btn.nav__offer { padding: .45rem .6rem; font-size: .7rem; }
  .nav__end > .langs .langs__cur { padding: .3rem .35rem; }
  .burger { min-width: 34px; }
}
/* Screens from 320 to 344 px, the narrowest still in service, require one
   last concession on the logo. */
@media (max-width: 344px) {
  .nav__logo img { height: 11px; }
  .nav { padding: .8rem .35rem; gap: .28rem; }
}

/* Large phones, iPhone Pro Max and Android equivalents, have
   width to spare: the logo regains almost its desktop size there. */
@media (min-width: 430px) and (max-width: 559px) {
  .nav { padding: .95rem .85rem; gap: .45rem; }
  .nav__logo img { height: 18px; }
  .nav .btn.nav__offer { padding: .55rem .95rem; font-size: var(--f-xs); }
  .nav__end > .langs .langs__cur { padding: .36rem .5rem; }
}

/* From 390 px, the logo can already gain two pixels. */
@media (min-width: 390px) and (max-width: 429px) {
  .nav__logo img { height: 15px; }
}

/* From 560 px the bar breathes: the logo regains height, the purchase
   button its ease, and the language its code. */
@media (min-width: 560px) and (max-width: 899px) {
  .nav__logo img { height: 21px; }
  .nav .btn.nav__offer { padding: .6rem 1.15rem; font-size: var(--f-xs); }
  .nav__end > .langs .langs__code { display: inline; }
  .nav__end > .langs .langs__cur { padding: .38rem .6rem .38rem .48rem; }
}

@media (max-width: 699px) {
  .nav--sub .nav__account { display: none; }
  /* The arrow alone: the label is bare text within the link, we reduce it
     to nothing rather than adding a tag in ten files. The text remains
     in the page, therefore readable by a screen reader, and there is no
     extra label to translate. */
  /* The tap target stays large under the finger, even though the drawing is small. */
  .nav--sub .back {
    font-size: 0; gap: 0; padding: 0;
    justify-content: center; min-width: 34px; min-height: 40px;
  }
  .nav--sub .back svg { width: 16px; height: 13px; opacity: .85; }
}

.pg-head { padding: clamp(6rem, 12vh, 9rem) 0 clamp(2.5rem, 5vh, 4rem); }
.pg-head h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1.06; letter-spacing: -.03em; font-weight: 600;
  margin-top: 1rem;
}
.pg-head .lead { margin-top: 1.5rem; max-width: 62ch; }
.pg-head .dimtext { margin-top: 1.2rem; max-width: 62ch; }

/* Table of contents for a long page: anchors, not a menu. */
.toc { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.toc a {
  font-size: var(--f-xs); color: var(--text-2); padding: .45rem .85rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.toc a:hover { color: var(--text); border-color: var(--accent); background: rgba(139,111,255,.1); }

/* Footer of a secondary page: a single link, plain and simple. */
.pg-end { border-top: 1px solid var(--border); margin-top: clamp(4rem, 9vh, 7rem); }
.pg-end .wrap { padding-block: clamp(3rem, 7vh, 5rem); text-align: center; }
.pg-end h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: -.02em; font-weight: 600; }
.pg-end p { margin-top: .9rem; color: var(--text-2); }
.pg-end .btn { margin-top: 1.8rem; }
/* When the final block offers two exits, the margin is carried by the row,
   otherwise the first button shifts relative to the second. */
.pg-end .hero__cta { align-items: center; }
.pg-end .hero__cta .btn { margin-top: 0; }

/* Device cards on the "Protecting your keys" page. */
.specs { margin-top: 2.4rem; display: grid; gap: 1.1rem; }
@media (min-width: 860px) { .specs { grid-template-columns: 1fr 1fr; } }
.spec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rad); padding: 1.6rem 1.7rem;
}
.spec--pick { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(139,111,255,.22); }
.spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.spec h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.spec__price { font-family: var(--mono); font-size: var(--f-xs); color: var(--text-3); white-space: nowrap; }
.spec__tag {
  display: inline-block; margin-top: .8rem; font-size: var(--f-xs);
  font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-soft); border: 1px solid var(--border-2);
  border-radius: 999px; padding: .2rem .6rem;
}
.spec p { margin-top: .9rem; font-size: var(--f-sm); color: var(--text-2); line-height: 1.7; }
.spec ul { margin-top: .9rem; display: grid; gap: .5rem; }
.spec li {
  font-size: var(--f-sm); color: var(--text-2); line-height: 1.6;
  padding-left: 1.1rem; position: relative;
}
.spec li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--border-2);
}
.spec li b { color: var(--text); font-weight: 600; }

/* The six-column wallet comparison table: at this width, the
   cells become unreadable on phone. A minimum width is enforced
   and .table-wrap is left to scroll horizontally, which is
   more honest than a stacked layout that would lose the column-by-
   column comparison. */
.table-wrap--large table { min-width: 900px; }
.table-note { margin-top: 1rem; }

/* The purchase apps by region. A four-column table would force
   horizontal scrolling on phone, which is unacceptable for the
   first section read by a beginner: blocks are stacked instead. */
.zones {
  margin-top: 2.4rem; display: grid; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--rad); overflow: hidden;
}
@media (min-width: 900px) {
  .zones { grid-template-columns: 1fr 1fr; }
  /* An odd number of regions would leave an empty cell at the bottom right. */
  .zones > .zone:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.zone { background: var(--bg-2); padding: 1.4rem 1.5rem; }
.zone__h { font-weight: 600; font-size: var(--f-sm); }
.zone__app { margin-top: .15rem; font-size: 1.05rem; font-weight: 600; }
.zone__app a { color: var(--accent-soft); border-bottom: 1px solid rgba(139,111,255,.35); }
.zone__app a:hover { color: var(--text); border-bottom-color: var(--accent); }
.zone p:not(.zone__h):not(.zone__app) {
  margin-top: .7rem; color: var(--text-2); font-size: var(--f-sm); line-height: 1.65;
}
.zone__k {
  display: block; color: var(--text-3); font-size: var(--f-xs);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: .15rem;
}
.zone a { color: var(--accent-soft); border-bottom: 1px solid rgba(139,111,255,.35); }
.zone a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- Exits: calibrated summary and expandable detail ---------- */
/* Each card shows a summary of comparable length, then a disclosure panel that
   carries the jurisdiction detail. Without this, a richly documented card
   would visually overwhelm a brief card, even though they describe
   identical services. The disclosure panel reuses the "+" from the FAQ. */

.dest { display: flex; flex-direction: column; }
.dest__sum { margin-bottom: 1rem; }

details.fold--dest {
  margin-top: auto; border: 0; border-top: 1px solid var(--border);
  border-radius: 0; background: transparent; overflow: visible;
}
details.fold--dest summary {
  padding: .8rem 0 0; font-size: var(--f-xs); color: var(--text-2);
  letter-spacing: .01em;
}
details.fold--dest summary:hover { color: var(--accent-soft); }
details.fold--dest summary::after { font-size: 1rem; }
details.fold--dest .fold__body {
  padding: .6rem 0 0; font-size: var(--f-sm); color: var(--text-2);
}
details.fold--dest .fold__body p + p { margin-top: .75rem; }

/* ==========================================================
   Guided tour - start-here.html
   One step at a time, checkable, with hand-drawn diagrams
   (no app screenshots: they become outdated within three months).
   ========================================================== */

/* Progress. This is a reading convenience kept on the device, not a
   tracking measure: nothing is sent, and the page works if the browser refuses
   local storage. */
.start-prog { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 34rem; }
.start-prog__track {
  height: 6px; border-radius: var(--rad-full);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden;
}
.start-prog__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width .45s var(--ease);
}
.start-prog__txt {
  margin-top: .6rem; font-family: var(--mono);
  font-size: var(--f-xs); letter-spacing: .06em; color: var(--text-3);
}

/* A step. */
.mstep {
  border: 1px solid var(--border); border-radius: var(--rad-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.mstep + .mstep { margin-top: 1.1rem; }
.mstep:hover { border-color: var(--border-2); }
.mstep--key { border-color: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim); }

.mstep__head {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1.5rem 1.7rem 0;
}
.mstep__n {
  flex: 0 0 auto; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .12em; color: var(--accent);
}
.mstep__h { font-size: var(--f-h3); line-height: 1.25; font-weight: 600; }

.mstep__body { padding: 1rem 1.7rem 1.5rem; padding-left: calc(1.7rem + 2.4rem); }
.mstep__body > p { color: var(--text-2); font-size: var(--f-body); line-height: 1.62; }
.mstep__body > * + p, .mstep__body > .kit, .mstep__body > .warn,
.mstep__body > .mock, .mstep__body > .btn, .mstep__body > * + .mock { margin-top: .95rem; }
.mstep__body > .mock + p { margin-top: 1.3rem; }
.mstep__body > p b, .mstep__body > .kit b { color: var(--text); font-weight: 600; }
.mstep__body .warn { border-radius: var(--rad); }
/* Step 3 of the guide carries one block per zone; the button and the warning
   box set their own display, which would otherwise override [hidden]. */
.mstep [data-achat][hidden], .mstep [data-achat-pays][hidden] { display: none !important; }
/* Links within the body of a step: a source, a page of the site. They
   must stand out from the text, without blinking like a button. */
.mstep__body > p a, .mstep__body > .kit a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}
.mstep__body > p a:hover, .mstep__body > .kit a:hover { text-decoration-color: var(--accent-soft); }

/* Bridge to the full journey, placed at the end of the COVE journey: the VPN alone
   protects the connection, not the bitcoins. The block borrows the brand's
   purple and a left rule to stand out from the steps without imitating them. */
.bridge {
  margin: 1.4rem 0 0; padding: 1.5rem 1.6rem;
  border: 1px solid rgba(139, 111, 255, .3);
  border-left: 3px solid var(--accent);
  border-radius: var(--rad);
  background: rgba(139, 111, 255, .06);
  color: var(--text-2); font-size: var(--f-sm);
}
.bridge__t { margin: 0 0 .55rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.bridge p:last-child { margin-bottom: 0; }
.bridge b { color: var(--accent-soft); font-weight: 600; }
@media (max-width: 700px) { .bridge { padding: 1.2rem 1.15rem; } }

/* What the method does not do: written smaller, never hidden. */
.mstep__honest {
  margin-top: 1rem; padding-left: .9rem;
  border-left: 2px solid var(--border-2);
  font-size: var(--f-sm) !important; color: var(--text-3) !important;
}
.mstep__key-note {
  font-family: var(--mono); font-size: var(--f-xs) !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-soft) !important;
}

.mstep__foot {
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding: 1.05rem 1.7rem; border-top: 1px solid var(--border);
  background: var(--bg-2);
}
/* Two links at the foot of a step: they stay grouped on the right, the checkmark
   keeps its place on the left. */
.mstep__links {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .35rem 1.2rem; justify-content: flex-end;
}
.mstep__done {
  display: inline-flex; align-items: center; gap: .6rem;
  cursor: pointer; user-select: none;
  font-size: var(--f-sm); color: var(--text-2);
}
.mstep__done input {
  appearance: none; -webkit-appearance: none;
  width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
  border: 1.5px solid var(--border-2); border-radius: 6px;
  background: var(--surface); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.mstep__done input:hover { border-color: var(--accent); }
.mstep__done input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mstep__done input:checked { background: var(--accent); border-color: var(--accent); }
.mstep__done input:checked::after {
  content: ''; display: block;
  width: .34rem; height: .62rem; margin: .12rem auto 0;
  border: solid #0b0713; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mstep.is-fait .mstep__done { color: var(--accent-soft); }
.mstep.is-fait .mstep__n { color: var(--text-3); }
/* These links carry an action, and on a phone they sit in small type:
   --text-3 only reached 3.3:1 against the card, below what a reader can
   comfortably scan. --text-2 reaches 7.3:1. */
.mstep__more { font-size: var(--f-sm); color: var(--text-2); font-weight: 500; text-decoration: none; }
.mstep__more:hover { color: var(--accent-soft); }


/* Diagrams: phone screens drawn in CSS. */
.mock {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Screen mockups. They do not copy any screenshot, but they
   reuse its grammar: phone frame, status bar, title bar
   with the back arrow, rounded white cells, pill button. A
   newcomer must recognize their phone before reading the caption. The accent
   color changes depending on the app shown. */
.mock__t {
  margin: 0; min-width: 0; display: flex; flex-direction: column;
  --sch-a: #0a84ff; --sch-a2: #5ac8fa;
}
.mock__t--bull   { --sch-a: #d92b28; --sch-a2: #f2673f; }
.mock__t--bank { --sch-a: #6c5ce7; --sch-a2: #a29bfe; }

.mock__phone {
  flex: 1 1 auto;
  border: 5px solid #16181f; border-radius: 26px;
  background: #f2f2f7; color: #1c1c1e;
  /* The system font, as in real apps. It also avoids
     the site font's bold being synthesized within these frames. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  padding: 0 0 .55rem; overflow: hidden;
  display: flex; flex-direction: column; gap: .3rem;
  min-height: 12.5rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
/* Status bar: time on the left, the three indicators on the right, drawn. */
.mock__phone::before {
  content: '9:41';
  display: block; background: #fff;
  font-size: .56rem; font-weight: 700; letter-spacing: .01em;
  color: #1c1c1e; padding: .3rem .62rem .16rem;
  background-image:
    radial-gradient(circle, #1c1c1e 45%, transparent 46%),
    radial-gradient(circle, #1c1c1e 45%, transparent 46%),
    radial-gradient(circle, #1c1c1e 45%, transparent 46%);
  background-repeat: no-repeat;
  background-size: 3px 3px, 3px 3px, 3px 3px;
  background-position: right .62rem center, right 1.05rem center, right 1.48rem center;
}
.mock__phone > *:not(.mock__bar) { margin-inline: .5rem; }

.mock__bar {
  background: #fff; color: #1c1c1e;
  font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  text-align: center; padding: .34rem 1.5rem .46rem;
  border-bottom: 1px solid rgba(60, 60, 67, .16);
  position: relative; margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock__bar::before {
  content: '\2039'; position: absolute; left: .5rem; top: 46%;
  transform: translateY(-50%);
  font-size: 1.05rem; font-weight: 400; line-height: 1; color: var(--sch-a);
}

.mock__l {
  background: #fff; color: #1c1c1e; border-radius: 10px;
  font-size: .72rem; line-height: 1.3; padding: .42rem 1.15rem .42rem .6rem;
  position: relative;
}
.mock__l::after {
  content: '\203a'; position: absolute; right: .5rem; top: 50%;
  transform: translateY(-52%); color: #c2c2c8; font-size: .85rem; line-height: 1;
}
/* A secondary line is an indication, not a setting: no chevron. */
.mock__l--dim { color: #77777f; font-size: .68rem; }
.mock__l--dim::after { content: none; }
.mock__l--ok {
  color: #0d6b2f; background: #e4f7ea; font-weight: 600;
  padding-left: 1.25rem;
}
.mock__l--ok::after { content: none; }
.mock__l--ok::before {
  content: ''; position: absolute; left: .58rem; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: #34c759;
}

.mock__on {
  align-self: flex-start; font-size: .7rem; font-weight: 600;
  color: var(--sch-a); background: rgba(10, 132, 255, .12);
  border-radius: var(--rad-full); padding: .16rem .6rem;
}
.mock__t--bull   .mock__on { background: rgba(217, 43, 40, .12); }
.mock__t--bank .mock__on { background: rgba(108, 92, 231, .14); }

.mock__qr {
  width: 3.6rem; height: 3.6rem; align-self: center; border-radius: 6px;
  background: repeating-conic-gradient(#1c1c1e 0 25%, #fff 0 50%) 0 0 / .6rem .6rem;
  box-shadow: 0 0 0 5px #fff;
  margin-block: .35rem .25rem;
}
.mock__code {
  font-family: var(--mono); font-size: .64rem; color: #55555c;
  text-align: center; overflow: hidden; white-space: nowrap;
}
.mock__field {
  background: #fff; border: 1px solid rgba(60, 60, 67, .24); border-radius: 9px;
  padding: .34rem .5rem; font-size: .7rem; color: #48484e;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.mock__field--m { color: #1c1c1e; font-family: var(--mono); }
/* The balance card: it is the element everyone recognizes. */
.mock__total {
  font-family: var(--mono); font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--sch-a2), var(--sch-a));
  border-radius: 12px; padding: .6rem .65rem; text-align: center;
  margin-block: .1rem;
}
.mock__btn {
  margin-top: auto; text-align: center; border-radius: var(--rad-full);
  background: var(--sch-a); color: #fff; font-weight: 600;
  font-size: .72rem; padding: .4rem .5rem;
}
.mock__line { height: 6px; border-radius: 3px; background: #e2e2e8; }
.mock__line--short { width: 55%; }
.mock__t figcaption {
  margin-top: .7rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.5;
}
.mock__t figcaption b { color: var(--text-2); font-weight: 600; }

@media (max-width: 900px) {
  .mock { grid-template-columns: 1fr; gap: 1.4rem; max-width: 22rem; }
  .mock__phone { min-height: 0; }
}

/* Real screenshots, taken within the apps. They replace the
   mockups where the exact path matters: the reader must find the same
   label under their thumb. The green frame drawn on the image indicates the row to
   tap; the image is placed on a light background, since the apps shown
   are in light theme. */
.caps {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.caps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.caps__t { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.caps__t img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: #f5f5f7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.caps__t figcaption {
  margin-top: .7rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.5;
}
.caps__t figcaption b { color: var(--text-2); font-weight: 600; }
.caps__t figcaption code {
  font-family: var(--mono); font-size: .92em; color: var(--text-2);
  background: rgba(255, 255, 255, .06); border-radius: 5px; padding: .05em .3em;
}
.caps__note { margin-top: .8rem; font-size: var(--f-xs); color: var(--text-3); }

/* Standalone figures in the screen-by-screen guide: a screenshot, a caption. */
.screen { margin: 1.4rem 0 0; }
.screen img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: #f5f5f7;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.screen--narrow { max-width: 20rem; }
.ecran--large { max-width: 46rem; }
.screen figcaption {
  margin-top: .7rem; font-size: var(--f-xs); color: var(--text-3); line-height: 1.5;
}
@media (max-width: 900px) {
  .caps, .caps--3 { grid-template-columns: 1fr; gap: 1.4rem; max-width: 22rem; }
}
@media (max-width: 640px) {
  .mstep__head { padding: 1.2rem 1.15rem 0; gap: .8rem; }
  .mstep__body { padding: .85rem 1.15rem 1.2rem; }
  .mstep__foot { padding: .95rem 1.15rem; }
  .mstep__more { font-size: var(--f-xs); }
  .mstep__links { justify-content: flex-start; gap: .3rem 1rem; }
}

/* ---------- Guided walkthrough: reading markers ---------- */

/* Resume. The link only appears if a step has already been checked on this
   device; otherwise it stays hidden and tells no one anything. */
.start-resume { margin-top: 1.1rem; }
.start-resume a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--f-sm); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.start-resume a:hover { border-bottom-color: currentColor; }
.start-resume span:last-child { font-family: var(--mono); font-size: var(--f-xs); }

/* Illustrations. They give breathing room between two reading moments; they
   explain nothing on their own, so their absence breaks nothing. */
.start-art { margin-top: clamp(2.4rem, 5vw, 3.4rem); }
.start-art img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--rad-lg);
  aspect-ratio: 21 / 9; object-fit: cover; object-position: center 62%;
}
.start-art--act {
  width: 100%; max-width: var(--maxw);
  margin: clamp(1.8rem, 3.5vw, 2.6rem) auto clamp(2.2rem, 4vw, 3.2rem);
  padding-inline: var(--sp-6);
}
.start-art--act img { aspect-ratio: 21 / 8; object-fit: cover; object-position: center; }

/* Summary of the four stages. A newcomer must see the length of the path
   before committing to it, and be able to jump directly to the part that
   concerns them. */
.start-plan {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
}
.start-plan__c {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--border); border-radius: var(--rad);
  background: var(--surface); text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.start-plan__c:hover {
  border-color: var(--accent); background: var(--surface-2);
  transform: translateY(-2px);
}
.deb-plan__n {
  font-family: var(--mono); font-size: var(--f-xs);
  color: var(--accent); letter-spacing: .08em;
}
.start-plan__t { font-size: var(--f-md); font-weight: 600; color: var(--text-1); }
.start-plan__d { font-size: var(--f-xs); color: var(--text-3); line-height: 1.5; }
.start-plan__foot { margin-top: 1.1rem; max-width: 44rem; }

/* Two journeys instead of four stages: the cards are wider, so
   they carry a full sentence under the plan name. The name is in
   capitals in the document, it is not transformed in CSS. */
.start-plan--duo { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.start-plan--duo .start-plan__c { padding: 1.2rem 1.3rem 1.3rem; gap: .5rem; }
/* On these two large cards, the duration line is useful information and
   not a detail: it is therefore set in light gray, readable, instead of the dark
   gray reserved for secondary mentions. */
.start-plan--duo .start-plan__d { color: var(--text-2); }
.start-plan--duo .start-plan__t {
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  letter-spacing: .04em; color: var(--text-1);
}
/* On the two large cards, the top line states what the visitor wants,
   in plain writing: it is a sentence, not a plan name. The plan
   name moves down to the detail line, in fixed width.
   The weight and tightening match the site's headings, 600 and -.018em:
   an intermediate value like 650 does not exist in our font files,
   the browser would round it or fake it, and the heading would no longer resemble the
   other headings. */
.start-plan--duo .start-plan__t--want {
  font-family: var(--font); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.018em; line-height: 1.28;
}
.start-plan--duo .start-plan__d {
  font-family: var(--mono); letter-spacing: .04em;
}
.start-plan__s {
  font-size: var(--f-sm); color: var(--text-2); line-height: 1.55;
}
/* What sets the two plans apart is written in purple: the private node and the
   stealth VPN with NODECOVE, the stealth VPN alone with COVE. The rest of the sentence
   keeps its muted tone, so the eye catches the difference. */
.start-plan__s b { color: var(--accent-soft); font-weight: 600; }

/* Tracker stuck under the bar. It only shows once the header is scrolled
   past, so as not to duplicate the progress shown further up. */
.start-track {
  position: sticky; top: var(--nav-h, 64px); z-index: 40;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.start-track.is-on { opacity: 1; transform: none; }
.start-track__rail { height: 3px; background: var(--surface-2); }
.start-track__bar {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width .45s var(--ease);
}
.start-track__line {
  padding-block: .4rem;
  font-family: var(--mono); font-size: var(--f-xs);
  letter-spacing: .06em; color: var(--text-3);
}

@media (max-width: 900px) {
  .start-plan { grid-template-columns: repeat(2, 1fr); }
  .start-plan--duo { grid-template-columns: 1fr; }
  .start-art--act img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .start-plan { grid-template-columns: 1fr; gap: .5rem; }
  .start-plan__c { flex-direction: row; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
  .start-plan__d { flex: 1 0 100%; }
  /* On a phone, the two cards keep their column layout: the presentation
     sentence does not read next to the name, it goes underneath.
     The line break inherited from above must be canceled: in column layout, an
     item that claims 100% creates a second column on the right, and the card
     overflowed the screen. */
  .start-plan--duo .start-plan__c { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .start-plan--duo .start-plan__d,
  .start-plan--duo .start-plan__s { flex: 0 0 auto; }
  .start-art--act img { aspect-ratio: 3 / 2; }
}

/* ── A row of download links ───────────────────────────────────────────────
   Wherever the site names an app, downloads.js writes here the link that
   suits the visitor's device. The row wraps rather than overflowing: on a
   narrow phone the buttons stack. */
.dl-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.dl-row .btn { white-space: normal; text-align: center; }