/* fiou.app, phase 4.10 fold. Direction contract: first comment in index.html. */

@font-face {
  font-family: "Nunito Fiou";
  src: url("fonts/nunito-latin.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  color-scheme: light;
  --ground: #f5f7fc;
  --ink: #0f1830;
  --ink-2: #47526b;
  --hairline: rgb(15 24 48 / 0.12);
  --cobalt: #2f5fc4;
  --cobalt-deep: #24499a;
  --cobalt-glow: #407ee5;
  --cobalt-night: #142b5e;
  --on-cobalt: #ffffff;
  --accent: var(--cobalt);
  --surface: #ffffff;
  --underline: rgb(15 24 48 / 0.3);
  --selection: rgb(47 95 196 / 0.22);
  --display: ui-rounded, "Nunito Fiou", "SF Pro Rounded", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); color: var(--ink); }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--ground);
  border-radius: 999px;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0 var(--gutter);
  max-width: 80rem;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: 800 1.375rem/1 var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { border-radius: 22%; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  font-size: 0.875rem;
}
.site-nav a:not(.btn) {
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0;
}
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; }
.site-nav .lang { font-weight: 600; letter-spacing: 0.02em; }

/* Buttons: the app's capsule, like "Je prends" */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--on-cobalt);
  font: 800 1.125rem/1 var(--display);
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 24 48 / 0.16), 0 10px 22px -10px rgb(15 24 48 / 0.35);
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--cobalt-deep); }
.btn:active { transform: translateY(1px); }
.btn-small {
  min-height: 2.75rem;
  padding: 0 1.1rem;
  font-size: 0.875rem;
  box-shadow: none;
}

/* Hero */

.hero {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [text-start] minmax(0, 34rem)
    [text-end] minmax(2rem, 5rem)
    [field-start] minmax(0, 38rem)
    minmax(var(--gutter), 1fr) [full-end];
  align-items: center;
  min-height: min(calc(100svh - 4.5rem), 58rem);
  padding-bottom: 1.5rem;
}

.pitch {
  grid-column: text-start / text-end;
  padding: 2rem 0 3rem;
}

h1 {
  margin: 0;
  font: 900 clamp(2.5rem, 1.1rem + 4.3vw, 4.5rem)/1.02 var(--display);
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 11.5em;
}
h1 .said { color: var(--accent); }

.lede {
  margin: 1.5rem 0 0;
  max-width: 38ch;
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}
.quiet {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--underline);
  padding: 0.75rem 0;
}
.quiet:hover { text-decoration-color: currentColor; }

.fine {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 0.55rem;
  font-size: 0.875rem;
  color: var(--ink);
}
.facts li { display: flex; align-items: center; gap: 0.6rem; }
.facts svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The cobalt field: the app icon's gradient and its open arc */

.field {
  grid-column: field-start / full-end;
  align-self: stretch;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40rem;
  padding: 3rem 0;
  overflow: hidden;
  border-radius: 2.75rem 0 0 2.75rem;
  background-color: var(--cobalt);
  background-image:
    radial-gradient(120% 90% at 22% 18%, var(--cobalt-glow) 0%, var(--cobalt) 42%, #1d3d82 78%, var(--cobalt-night) 100%);
  isolation: isolate;
}

/* The icon's open arc, drawn large at the field's lower right; the phone
   hides its gap, so what shows is the curve breathing out behind it. */
.arc {
  position: absolute;
  z-index: -1;
  width: min(50%, 21rem);
  right: 1%;
  bottom: 2.5rem;
  aspect-ratio: 1;
  overflow: visible;
}
.arc path {
  fill: none;
  stroke: #fff;
  stroke-width: 40;
  stroke-linecap: round;
}

/* Sized by the viewport's height too: the whole bezel always shows. */
.device {
  position: relative;
  margin: 0;
  width: clamp(15rem, min(25vw, calc((100svh - 10rem) * 1350 / 2760)), 21rem);
}

/* Apple's iPhone 18 Pro bezel (1350 x 2760), as is: never tilted, cropped,
   shadowed, animated or covered (App Store Marketing Guidelines). The
   capture fills its opening: x 72, y 69, 1206 x 2622. */
.device .bezel {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.device .screen {
  position: absolute;
  left: calc(72 / 1350 * 100%);
  top: calc(69 / 2760 * 100%);
  width: calc(1206 / 1350 * 100%);
  height: calc(2622 / 2760 * 100%);
  border-radius: 12% / 5.5%;
}

/* Motion: one moment. The arc breathes out behind the phone; the phone
   itself never moves (Apple's product images are not animated). */

@media (prefers-reduced-motion: no-preference) {
  .arc path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: exhale 1400ms var(--ease-out) 150ms both;
  }
  @keyframes exhale { from { stroke-dashoffset: 0.72; } to { stroke-dashoffset: 0; } }
}

/* Phone */

@media (max-width: 52rem) {
  .site-nav .desk { display: none; }
  .hero {
    grid-template-columns: [full-start] var(--gutter) [text-start] minmax(0, 1fr) [text-end] var(--gutter) [full-end];
    min-height: 0;
    padding-bottom: 0;
  }
  .pitch { padding: 1.25rem 0 2rem; }
  .field {
    grid-column: full-start / full-end;
    border-radius: 2rem 2rem 0 0;
    min-height: 0;
    padding: 2.5rem 0 3rem;
  }
  .device { width: min(72vw, 19rem); }
  .arc { width: 64%; right: -6%; bottom: 3rem; }
  .facts { display: none; }
}

@media (max-width: 30rem) {
  .lede-more { display: none; }
  .action { margin-top: 1.5rem; }
  .action .btn { flex: 1 1 100%; }
  .quiet { padding: 0.25rem 0; }
  .fine { margin-top: 0.75rem; }
  .site-header { min-height: 3.75rem; }
  .site-nav .btn-small { display: none; }
  .brand { font-size: 1.25rem; }
  .brand img { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------
   Below the fold. Same world: ground, navy ink, the cobalt field,
   real screens as frameless cards (no Apple bezel, so they may carry
   a shadow), capsule buttons, drawn marks.
   --------------------------------------------------------------- */

:root {
  --band: #e8eefa;
  --night: #0f1830;
  --night-ink: #eef2fb;
  --night-ink-2: #b7c2da;
  --card-radius: 11.5% / 5.3%;
  --card-ground: #ffffff;
  --shadow-card: 0 2px 4px rgb(15 24 48 / 0.08), 0 24px 48px -24px rgb(15 24 48 / 0.45);
}

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap.narrow { max-width: 46rem; }

main > section:not(.hero) { padding: clamp(4.5rem, 9vw, 8rem) 0; }

h2 {
  margin: 0;
  font: 900 clamp(2rem, 1.2rem + 2.6vw, 3.25rem)/1.06 var(--display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 {
  margin: 0;
  font: 800 1.375rem/1.2 var(--display);
}

.copy p {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.copy h2 + p { margin-top: 1.5rem; }

/* Frameless screen cards: the capture itself, corners at the display's
   radius, lifted off the page. */
.card {
  margin: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--card-ground);
  box-shadow: var(--shadow-card);
}
.card img {
  display: block;
  width: 100%;
  height: auto;
}

/* How it works: three screens, one line each */

.how { background: var(--band); }
.how h2 { max-width: 16em; }
.strip {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  align-items: start;
}
.strip li:nth-child(2) { margin-top: clamp(0rem, 4vw, 3rem); }
.strip li:nth-child(3) { margin-top: clamp(0rem, 8vw, 6rem); }
.strip .card { max-width: 19rem; margin-inline: auto; }
.step {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  max-width: 19rem;
  margin: 1.5rem auto 0;
  font: 800 1.375rem/1.25 var(--display);
  text-wrap: balance;
}
.step .n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--on-cobalt);
  font-size: 1rem;
  transform: translateY(-0.1rem);
}

/* Two-column moments */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}
.split-flip { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.card-solo { width: min(100%, 20rem); justify-self: center; }

/* What stays on the iPhone: the one dark band */

.private {
  background: var(--night);
  color: var(--night-ink);
}
.private .copy p { color: var(--night-ink-2); }
.private .copy .note {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(238 242 251 / 0.16);
  font-size: 0.875rem;
}
.private .card { box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }

/* Free and Fiou+ */

.plans h2 { max-width: 18em; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.plan {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.plan ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.plan li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.45;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.3rem;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2.25px solid var(--accent);
  border-bottom: 2.25px solid var(--accent);
  transform: rotate(-45deg);
}
.plan-plus {
  background-color: var(--cobalt);
  background-image: radial-gradient(120% 110% at 15% 10%, var(--cobalt-glow), var(--cobalt) 50%, #1d3d82);
  border-color: transparent;
  color: var(--on-cobalt);
}
.plan-plus li::before { border-color: #fff; }
.plan-plus .fine { color: rgb(255 255 255 / 0.82); margin-top: 1.5rem; }
/* Large text on a phone: the checks hang in the card's margin, so each
   line keeps a readable measure. True from about 150 % text at 390. */
.plan-grid { container-type: inline-size; }
@container (max-width: 20rem) {
  .plan {
    margin-inline: calc(var(--gutter) * -0.5);
    padding: 1.25rem 0.875rem 1.25rem 1.5rem;
  }
  .plan li { padding-left: 0; }
  .plan li::before { left: -1.05rem; }
}

/* Questions */

.faq-teaser details,
.qa details {
  border-bottom: 1px solid var(--hairline);
  padding: 1.1rem 0;
}
.faq-teaser h2 + details { margin-top: 1.5rem; border-top: 1px solid var(--hairline); }
.faq-teaser summary,
.qa summary {
  cursor: pointer;
  list-style: none;
  display: block;
  position: relative;
  padding-right: 2.25rem;
  font: 800 1.375rem/1.3 var(--display);
  /* A word too long for a phone at 200 % text breaks at its soft hyphen
     ("Intel­ligence"), or as a last resort; never mid-punctuation. */
  overflow-wrap: break-word;
}
.faq-teaser summary::-webkit-details-marker,
.qa summary::-webkit-details-marker { display: none; }
.faq-teaser summary::after,
.qa summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg) translateY(-0.2rem);
  transition: transform 200ms var(--ease-out);
}
.faq-teaser details[open] summary::after,
.qa details[open] summary::after { transform: rotate(-135deg) translateY(-0.1rem); }
.faq-teaser details p,
.qa details p { margin: 0.75rem 0 0; color: var(--ink-2); line-height: 1.6; max-width: 40rem; }
.faq-teaser .more { margin: 1.75rem 0 0; font-weight: 600; }
/* On the page's left axis like every other section, at a reading measure. */
.faq-teaser .wrap > * { max-width: 46rem; }

/* The close: the hero's field again */

.close { padding-bottom: clamp(3rem, 6vw, 5rem) !important; }
.close-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 76rem;
  margin: 0 var(--gutter);
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter);
  border-radius: 2.75rem;
  background-color: var(--cobalt);
  background-image: radial-gradient(120% 90% at 22% 18%, var(--cobalt-glow) 0%, var(--cobalt) 42%, #1d3d82 78%, var(--cobalt-night) 100%);
  color: var(--on-cobalt);
  text-align: center;
  display: grid;
  justify-items: center;
}
@media (min-width: 80rem) { .close-field { margin-inline: auto; } }
.close-field .arc { width: min(40%, 20rem); right: -3%; bottom: -12%; }
.close-icon { border-radius: 22%; box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.5); }
.close-field h2 { margin-top: 1.75rem; max-width: 14em; }
.close-field .action { justify-content: center; }
.btn-light { background: #fff; color: var(--cobalt-deep); }
.btn-light:hover { background: #e8eefa; }
.quiet-light { color: #fff; text-decoration-color: rgb(255 255 255 / 0.5); }

/* Footer */

.site-footer { padding: 2rem 0 3rem; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; padding: 0.5rem 0; }
.site-footer nav a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .fine { margin: 0; }

@media (max-width: 52rem) {
  .strip { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .strip li:nth-child(n) { margin-top: 0; }
  .strip .card { max-width: min(78vw, 19rem); }
  .split, .split-flip { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split-flip .card-solo { order: 2; }
  .card-solo { width: min(78vw, 19rem); }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .close-field { margin-inline: 0.75rem; border-radius: 2rem; }
}

/* A landscape crop of a real screen */
.card-wide { width: min(100%, 30rem); justify-self: center; border-radius: 1.25rem; }
.private .card-wide { box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7); }

/* A heading's line breaks, chosen by sentence; they wrap on their own
   only when the line itself is too long. A single word wider than a phone
   at 200 % text ("malentendu.") hyphenates, or breaks as a last resort. */
h2 .line { display: inline-block; }
h2 { hyphens: auto; overflow-wrap: break-word; }
.how h2, .plans h2, .close-field h2 { max-width: none; }
/* A heading whose lines read best stacked at every width (the English
   close, which on one line runs into the arc at 1280). */
h2.stacked .line { display: block; }

@media (max-width: 52rem) {
  /* On a phone the close's arc sits whole in the field's lower corner,
     below the links, its opening turned toward them as on the icon. Sized
     by the screen, not the text, so 200 % text keeps the same mark. */
  .close-field { padding-bottom: calc(30vw + 1rem); }
  .close-field .arc { width: 38vw; right: -4vw; bottom: -5vw; }
}

/* ---------------------------------------------------------------
   The secondary pages (FAQ, privacy, support, terms, legal notice,
   404): the same header, ground and footer; a page head, then text
   set for reading, with a sticky index on the long ones.
   --------------------------------------------------------------- */

.site-nav a[aria-current="page"] { color: var(--ink); }

.page-head { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.25rem); }
.page-head h1 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  line-height: 1.04;
  max-width: 16em;
  hyphens: auto;
  overflow-wrap: break-word;
}
.page-head .lede { max-width: 44ch; }
.page-head .fine { margin-top: 1.25rem; }

.read {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-bottom: clamp(4.5rem, 9vw, 8rem);
}
@media (min-width: 64rem) {
  .read.with-index { grid-template-columns: 13rem minmax(0, 46rem); gap: clamp(3rem, 6vw, 5.5rem); }
}

.index { font-size: 0.875rem; }
@media (min-width: 64rem) { .index { position: sticky; top: 1.5rem; align-self: start; } }
.index p { margin: 0 0 0.75rem; font-weight: 700; color: var(--ink); }
.index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.index a { display: block; padding: 0.3rem 0; color: var(--ink-2); text-decoration: none; }
.index a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 63.99rem) {
  .index { padding: 1.25rem 0; border-block: 1px solid var(--hairline); }
  .index ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0 1.5rem; }
}

.prose { min-width: 0; max-width: 46rem; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  margin: 3.25rem 0 0;
  font: 800 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--display);
  letter-spacing: -0.01em;
  scroll-margin-top: 1.5rem;
}
.prose h3 { margin: 2rem 0 0; font: 800 1.25rem/1.25 var(--display); }
.prose p, .prose ul, .prose ol { margin: 1rem 0 0; max-width: 40rem; line-height: 1.65; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a, .page-head a { color: var(--accent); text-decoration-color: currentColor; }

/* The short version, first */
.callout {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--band);
  color: var(--ink);
}
.prose .callout p, .prose .callout ul { color: var(--ink); }
.callout > :first-child { margin-top: 0; }

/* Tables: rows of a register; on a phone each row stacks, labelled. */
.prose table { width: 100%; margin: 1.5rem 0 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.prose th, .prose td { padding: 0.8rem 1rem 0.8rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hairline); }
.prose th { font-size: 0.8125rem; font-weight: 700; color: var(--ink); border-bottom-color: var(--ink-2); }
.prose td { color: var(--ink-2); }
.prose td:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 40rem) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; }
  /* Each cell carries its column name (data-label), so the header row goes. */
  .prose thead { display: none; }
  .prose tr { padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
  .prose td { padding: 0.2rem 0; border: 0; }
  .prose td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink);
  }
  .prose td + td { margin-top: 0.5rem; }
}

/* FAQ and support: the home's questions, grouped */
.qa .group + .group { margin-top: 3rem; }
.qa h2 + details { margin-top: 1.25rem; border-top: 1px solid var(--hairline); }
.qa .top { margin: 3rem 0 0; font-size: 0.875rem; }

/* Support: one way to reach a person */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin: 0 0 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 1.75rem;
  background-color: var(--cobalt);
  background-image: radial-gradient(120% 110% at 15% 10%, var(--cobalt-glow), var(--cobalt) 50%, #1d3d82);
  color: var(--on-cobalt);
}
.contact p { margin: 0; max-width: 30rem; color: var(--on-cobalt); }
.contact .address { font: 800 clamp(1.25rem, 1rem + 1vw, 1.625rem)/1.2 var(--display); overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .contact { padding: 1.25rem; }
  .contact .btn { flex: 1 1 100%; padding-inline: 1rem; text-align: center; }
}

/* Legal notice: what the publisher still has to fill in */
.todo {
  padding: 0.05em 0.3em;
  border-radius: 0.3em;
  background: rgb(245 183 0 / 0.24);
  color: var(--ink);
}
.prose address { margin: 1rem 0 0; font-style: normal; line-height: 1.75; color: var(--ink-2); }

/* Not found: the close's field, alone */
.notfound { padding: clamp(2rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.notfound h1 { margin-top: 1.75rem; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.06; max-width: none; }
.notfound .lede { margin: 1rem auto 0; color: rgb(255 255 255 / 0.86); }
.notfound .other { margin: 2rem 0 0; font-size: 0.9375rem; color: rgb(255 255 255 / 0.86); }

/* Invitation pages (join, invite): a link tapped without the app. A page
   head, then numbered steps read in the system sans, each led by the
   strip's cobalt numeral; the beta button sits under its step. Their
   titles are sentences of short words: only a soft hyphen breaks a word
   ("invi­tation", at 200 % text), never "wait-ing" at 100 %. */
.guide .page-head h1 { hyphens: manual; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
  max-width: 40rem;
}
.steps li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0 0.9rem;
  align-items: start;
  line-height: 1.55;
}
.steps .n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: -0.05rem;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--on-cobalt);
  font: 800 1rem/1 var(--display);
}
.steps p { margin: 0; }
.steps .btn { margin-top: 1rem; }
.steps + .fine {
  margin: 0;
  max-width: 40rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}
@media (max-width: 30rem) {
  .steps .btn { width: 100%; padding-inline: 1rem; }
}

/* ---------------------------------------------------------------
   Dark: the same world at night. The ground turns to deep navy, the
   ink to paper; the cobalt field, the buttons and the arc stay as
   they are (the brand). Text-coloured cobalt lightens to --accent so
   it reads on the dark ground; the screens swap to their dark
   captures (<picture> in the pages).
   --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #0b1224;
    --ink: #eef2fb;
    --ink-2: #a9b4cd;
    --hairline: rgb(238 242 251 / 0.14);
    --accent: #86a9f6;
    --surface: #141f3b;
    --underline: rgb(238 242 251 / 0.35);
    --selection: rgb(134 169 246 / 0.3);
    --band: #121c36;
    --night: #050914;
    --card-ground: #000000;
    /* A dark screen on a dark ground: a hairline ring keeps its edge. */
    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.09), 0 24px 48px -24px rgb(0 0 0 / 0.9);
  }
  .btn { box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 22px -10px rgb(0 0 0 / 0.6); }
  .private { border-block: 1px solid var(--hairline); }
  .private .card, .private .card-wide { box-shadow: var(--shadow-card); }
}