/* ==========================================================================
   GigaBack site styles. No imports, no external requests: the two faces are
   self-hosted from /fonts, subset to latin and latin-ext, which is exactly
   what five European languages need. A site whose pitch is that the product
   never phones home does not get to load a font from someone else's CDN.

   Everything below is the app's design system (../DESIGN.md), which is derived
   from ressources/logo_complet.png. Values are not chosen here; they are
   carried across so the landing page and the first screen of the app are
   recognisably the same product.

   Shape rule, applied everywhere: interactive controls are full pill
   (--r-pill), panels and grids are 16px (--r), small inline objects are 10px
   (--r-sm). Nothing else.

   Colour rule: one accent, #0050F8, the blue of the wordmark's "Back". It
   appears on the hero figure, buttons, links, list markers, the plan badge and
   focus rings. Nowhere else. Green and red belong to the keep and discard
   gesture. Gold, --gold, means the paid plan and nothing else.
   ========================================================================== */

/* fonts — Gabarito carries display because it is the wordmark's own
   construction; Onest carries running text. Both SIL OFL 1.1. */

@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Gabarito-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/Gabarito-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Gabarito-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Gabarito;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/Gabarito-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Onest-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Onest-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Onest-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Onest;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Onest-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* tokens */

:root {
  color-scheme: light;

  --bg:          #f4f7ff;
  --bg-sunken:   #e9eefb;
  --surface:     #ffffff;
  --tint:        #e8f0ff;   /* opaque accent wash, used on one grid cell */
  --line:        #e2e8f7;
  --line-strong: #cfd8ee;
  --btn-line:    #8a93ab;   /* 3.1:1 on --bg, boundary of ghost controls */

  --ink:    #081028;   /* the wordmark's own ink */
  --ink-2:  #4a5573;
  --ink-3:  #5c6683;

  --accent:      #0050f8;   /* fill. identical in both themes */
  --accent-ink:  #0050f8;   /* text, links, rings. lightens in dark */

  --keep:      #0a7c2c;
  --keep-bg:   #e6f5eb;
  --discard:   #d42a1e;
  --discard-bg:#fdecea;

  --gold:      #f8d050;   /* the sun inside the icon. paid plan only */
  --gold-ink:  #081028;

  --shadow: 0 1px 2px rgba(8, 16, 40, .05), 0 12px 28px -18px rgba(8, 16, 40, .35);

  --r:      16px;
  --r-sm:   10px;
  --r-pill: 999px;

  --pad-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --gap:   clamp(1.5rem, 1rem + 2vw, 3rem);

  --sans: Onest, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --display: Gabarito, var(--sans);
}

/* Dark tokens apply on system preference unless the visitor picked light, and
   on an explicit dark pick regardless of the system. Light needs no override
   block: :root above already holds it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #070b18;
    --bg-sunken:   #0b1020;
    --surface:     #0f1526;
    --tint:        #101a35;
    --line:        #232b44;
    --line-strong: #2f3856;
    --btn-line:    #4a5578;
    --ink:    #ffffff;
    --ink-2:  #a9b4d0;
    --ink-3:  #7a85a6;
    --accent-ink: #6ea8ff;
    --keep:      #4be08a;
    --keep-bg:   #0d2a1c;
    --discard:   #ff7a6b;
    --discard-bg:#2c1512;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -18px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b18; --bg-sunken: #0b1020; --surface: #0f1526; --tint: #101a35;
  --line: #232b44; --line-strong: #2f3856; --btn-line: #4a5578;
  --ink: #ffffff; --ink-2: #a9b4d0; --ink-3: #7a85a6;
  --accent-ink: #6ea8ff;
  --keep: #4be08a; --keep-bg: #0d2a1c; --discard: #ff7a6b; --discard-bg: #2c1512;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -18px rgba(0, 0, 0, .8);
}

/* base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, .97rem + .12vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  overflow-wrap: break-word;   /* long compounds must never widen the page */
}
p, ul, ol { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent-ink); }
a:hover { text-decoration-thickness: 2px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 20;
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start .16s ease;
}
.skip:focus { inset-block-start: 1rem; }

.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2.5rem, 46rem); }

.section { padding-block: var(--pad-y); }
.section--sunken { background: var(--bg-sunken); }

.section__title {
  font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);
  letter-spacing: -.025em;
  max-width: 20ch;
}
.section__sub {
  margin-block-start: .75rem;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.eyebrow {
  margin-block-end: 1rem;
  color: var(--accent-ink);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* header */

.hdr {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
}
.hdr__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  min-height: 4rem;
  padding-block: .625rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--accent-ink);
  text-decoration: none;
}
/* The wordmark, set rather than shipped as an image: Gabarito 900 at -.04em is
   the supplied lettering's own construction, "Giga" in ink and "Back" in the
   accent, exactly as GbWordmark sets it in the app. */
.brand__name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.brand__name b { color: var(--accent-ink); font-weight: inherit; }
.brand__mark { flex: none; }

.nav { order: 3; flex-basis: 100%; }
.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--line);
  padding-block-start: .625rem;
}
.nav__link {
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}
.nav__link:hover { color: var(--ink); }

.hdr__end {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline-start: auto;
}

.tglr {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.tglr:hover { color: var(--ink); background: var(--surface); }
.tglr[hidden] { display: none; }

@media (min-width: 46rem) {
  .hdr { position: sticky; top: 0; z-index: 10; }
  .hdr__inner { flex-wrap: nowrap; }
  .nav { order: 0; flex-basis: auto; margin-inline-start: 1rem; }
  .nav__list { border-block-start: 0; padding-block-start: 0; gap: 1.75rem; }
}

/* buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8125rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform .12s ease, background-color .16s ease, border-color .16s ease;
}
.btn--sm { padding: .5rem 1rem; font-size: .875rem; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: #4d3ee0; }

.btn--ghost {
  border-color: var(--btn-line);
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink-3); }

.btn:active { transform: translateY(1px); }

/* hero */

.hero { padding-block: clamp(3rem, 1.5rem + 5vw, 5.5rem) var(--pad-y); }

.hero__inner { display: grid; gap: var(--gap); }
.hero__inner > * { min-width: 0; }

.hero__title {
  margin-block-end: 1.125rem;
  font-size: clamp(2.125rem, 1.2rem + 3.6vw, 3.625rem);
  line-height: 1.05;
  letter-spacing: -.032em;
  max-width: 16ch;
}

.lead {
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  line-height: 1.5;
  max-width: 38ch;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 2rem;
}
.cta__note {
  flex-basis: 100%;
  margin-block-start: .25rem;
  color: var(--ink-3);
  font-size: .8125rem;
  max-width: 44ch;
}

.stat__value {
  display: block;
  color: var(--accent-ink);
  font-size: clamp(3.25rem, 1.5rem + 6vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat__label {
  display: block;
  margin-block-start: .875rem;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 26ch;
}

.swipe {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-block-start: 2rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--line);
}
/* Tinted rails, no borders: they are the destinations, not buttons. The card
   is the subject, so it is taller, tilted, lifted, and framed like a photo. */
.swipe__zone {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  height: 2.75rem;
  border-radius: var(--r-sm);
}
.swipe__zone::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border: 0 solid;
  border-width: 0 0 1.75px 1.75px;
  transform: rotate(45deg);
}
.swipe__zone--discard { background: var(--discard-bg); }
.swipe__zone--discard::after { border-color: var(--discard); }
.swipe__zone--keep { background: var(--keep-bg); }
.swipe__zone--keep::after { border-width: 1.75px 1.75px 0 0; border-color: var(--keep); }
.swipe__card {
  flex: none;
  width: 3.75rem;
  height: 5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  /* white mount with a photo sitting inside it */
  background: linear-gradient(var(--line), var(--line)) no-repeat
              50% .34rem / calc(100% - .68rem) 3.5rem,
              var(--surface);
  box-shadow: var(--shadow);
  transform: rotate(-5deg);
}

@media (min-width: 56rem) {
  .hero__inner {
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .hero__aside {
    padding-inline-start: clamp(1.5rem, 4vw, 3.25rem);
    border-inline-start: 1px solid var(--line);
  }
}

/* trust band */

.trust { border-block: 1px solid var(--line); background: var(--surface); }
.trust__list {
  display: grid;
  gap: 0;
  padding: 0;
  list-style: none;
}
.trust__item { padding-block: 1.75rem; }
.trust__item + .trust__item { border-block-start: 1px solid var(--line); }
.trust__title { font-size: 1rem; letter-spacing: -.01em; }
.trust__body {
  margin-block-start: .375rem;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 42ch;
}

@media (min-width: 48rem) {
  .trust__list { grid-template-columns: repeat(3, 1fr); }
  .trust__item { padding: 2.25rem 0 2.25rem clamp(1.25rem, 2.5vw, 2rem); }
  .trust__item:first-child { padding-inline-start: 0; }
  .trust__item + .trust__item {
    border-block-start: 0;
    border-inline-start: 1px solid var(--line);
  }
}

/* feature lattice */
/* Seamless hairline grid: the container paints the lines, cells paint over.
   Spans are set here rather than in the markup, because build.mjs emits six
   identical items. Six items, six cells, never an empty one. */

.grid {
  display: grid;
  gap: 1px;
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
  overflow: hidden;
}
.cell {
  padding: clamp(1.25rem, 3vw, 1.875rem);
  background: var(--bg);
}
.cell:first-child { background: var(--tint); }
.cell__title { font-size: 1.0625rem; letter-spacing: -.012em; }
.cell:first-child .cell__title { font-size: 1.25rem; }
.cell__body {
  margin-block-start: .5rem;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 46ch;
}

@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .grid { grid-template-columns: repeat(6, 1fr); }
  .cell:nth-child(1) { grid-column: span 4; }
  .cell:nth-child(2) { grid-column: span 2; }
  .cell:nth-child(3) { grid-column: span 3; }
  .cell:nth-child(4) { grid-column: span 3; }
  .cell:nth-child(5) { grid-column: span 2; }
  .cell:nth-child(6) { grid-column: span 4; }
}

/* steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  padding: 0;
  list-style: none;
}
.step {
  counter-increment: step;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--line-strong);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: .875rem;
  color: var(--ink-3);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.step__title { font-size: 1.125rem; letter-spacing: -.015em; }
.step__body {
  margin-block-start: .5rem;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 40ch;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 0 0; }
}

/* pricing */

.plans {
  display: grid;
  gap: 1px;
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
  overflow: hidden;
}
.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bg);
}
.plan--yearly {
  background: var(--tint);
  box-shadow: inset 0 3px 0 0 var(--accent);
}
.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}
.plan__name { font-size: 1rem; letter-spacing: .01em; }
.plan__badge {
  padding: .1875rem .625rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .375rem;
  margin-block: 1rem .25rem;
}
.plan__amount {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.plan__period { color: var(--ink-2); font-size: .875rem; }
.plan__list {
  margin-block: 1.25rem 0;
  padding-inline-start: 1.1rem;
  font-size: .9375rem;
}
.plan__list li { margin-block-end: .4375rem; }
.plan__list li::marker { color: var(--accent-ink); }
.plan__note {
  margin-block-start: auto;
  padding-block-start: 1.25rem;
  color: var(--ink-3);
  font-size: .8125rem;
}

@media (min-width: 52rem) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.honesty {
  margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: 1.25rem 1.5rem;
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.0625rem;
}

/* faq */

.faq { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }

.qa { border-block-end: 1px solid var(--line); }
.qa:first-child { border-block-start: 1px solid var(--line); }

.qa__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.125rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-block-start: .45em;
  border: 0 solid var(--ink-3);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.qa[open] .qa__q::after { transform: rotate(-135deg); }
.qa__q:hover { color: var(--accent-ink); }

.qa__a {
  padding-block-end: 1.25rem;
  color: var(--ink-2);
  max-width: 68ch;
}

/* footer */

.ft {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 2rem;
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}
.ft__top { display: grid; gap: 2.5rem; }
.ft__tagline {
  margin-block: 1rem 1.5rem;
  color: var(--ink-2);
  font-size: .9375rem;
  max-width: 34ch;
}
.ft__rights {
  margin-block-start: 1.25rem;
  color: var(--ink-3);
  font-size: .8125rem;
  max-width: 40ch;
}
.ft__cols { display: grid; gap: 2rem; }
.ft__h {
  margin-block-end: .75rem;
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ft__links, .ft__langlist {
  display: grid;
  align-content: start;   /* auto rows would otherwise stretch to fill the track */
  gap: .5rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
.ft__links a, .ft__langlist a { color: var(--ink-2); text-decoration: none; }
.ft__links a:hover, .ft__langlist a:hover { color: var(--accent-ink); text-decoration: underline; }
.ft__langlist [aria-current] { color: var(--ink); font-weight: 600; }
.ft__copy {
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .ft__top { grid-template-columns: 1.2fr 1fr; gap: 3rem; }
  .ft__cols { grid-template-columns: repeat(2, 1fr); }
}

/* legal */

.legal { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--pad-y); }

.back {
  display: inline-block;
  margin-block-end: 1.5rem;
  color: var(--ink-2);
  font-size: .9375rem;
  text-decoration: none;
}
.back::before { content: "\2190"; margin-inline-end: .4rem; }
.back:hover { color: var(--accent-ink); }

.legal__title {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  letter-spacing: -.03em;
}
.legal__updated {
  margin-block-start: .75rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid var(--line);
  color: var(--ink-3);
  font-size: .875rem;
}

.legal__body { display: grid; gap: 2.5rem; margin-block-start: 2.5rem; }

.toc__h {
  margin-block-end: .875rem;
  color: var(--ink-3);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.toc__list {
  display: grid;
  align-content: start;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  font-size: .9375rem;
}
.toc__list li { counter-increment: toc; }
.toc__list li::before {
  content: counter(toc) ".";
  margin-inline-end: .4rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.toc__list a { color: var(--ink-2); text-decoration: none; }
.toc__list a:hover { color: var(--accent-ink); text-decoration: underline; }

@media (min-width: 62rem) {
  .legal__body { grid-template-columns: 15rem 1fr; gap: 4rem; }
  .toc {
    position: sticky;
    top: 6rem;
    align-self: start;
    max-height: calc(100dvh - 8rem);
    overflow-y: auto;
  }
}

.prose { max-width: 68ch; overflow-wrap: break-word; }
.prose > * + * { margin-block-start: 1.125rem; }
.prose h2 {
  margin-block-start: 2.75rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  font-size: 1.375rem;
  letter-spacing: -.02em;
  scroll-margin-top: 6rem;
}
.prose > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}
.prose h3 { margin-block-start: 2rem; font-size: 1.0625rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li { margin-block-end: .4375rem; }
.prose li::marker { color: var(--ink-3); }
.prose strong { font-weight: 650; }
.prose code {
  padding: .1rem .35rem;
  border-radius: 5px;
  background: var(--bg-sunken);
  font-size: .9em;
}
.prose pre { overflow-x: auto; padding: 1rem; border-radius: var(--r-sm); background: var(--bg-sunken); }
.prose blockquote {
  margin: 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--line-strong);
  color: var(--ink-2);
}
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9375rem;
}
.prose th, .prose td {
  padding: .625rem .875rem;
  border: 1px solid var(--line);
  text-align: start;
}
.prose th { background: var(--bg-sunken); }
.prose hr { height: 1px; margin-block: 2rem; border: 0; background: var(--line); }

/* contact */

.contact { max-width: 42rem; margin-block-start: 2.5rem; }
.contact .lead { margin-block-end: 2rem; }

/* The outcome of a submission, revealed by :target and nothing else. The
   handler redirects to #sent or #failed; with no fragment neither block
   exists on screen, which is also true for a visitor arriving fresh. */
.note { display: none; }
.note:target {
  display: block;
  margin-block-end: 2rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-inline-start-width: 3px;
  border-radius: .5rem;
  background: var(--surface);
}
.note--ok:target  { border-inline-start-color: #12bc44; }
.note--bad:target { border-inline-start-color: #f85050; }
.note__title { font-size: 1.0625rem; letter-spacing: -.01em; }
.note__body { margin-block-start: .375rem; color: var(--ink-2); }

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: .4375rem; }
.form__label { color: var(--ink-2); font-size: .9375rem; }
.form__input {
  width: 100%;
  padding: .6875rem .875rem;
  border: 1px solid var(--line-strong);
  border-radius: .5rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.form__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.form__input--area { resize: vertical; min-height: 9rem; }
.form__actions { margin-block-start: .25rem; }
.form__note { color: var(--ink-3); font-size: .875rem; }

/* The honeypot. Off-screen rather than display:none, because a robot that
   reads the computed style skips anything hidden — and left in the tab order
   it would trap a keyboard user, hence tabindex="-1" on the input itself. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__fallback {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  color: var(--ink-2);
}

/* motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}