/* Standardiste : « Pendant votre absence ».
   Papier et encre : imprimé en carmin, écrit à l'encre bleu-noir.
   Tout ce que l'assistant écrit ou dit est composé en Besley italique.
   WebKit : pas de `filter` sur un ancêtre d'élément masqué (.slip), pas de calque fixe à
   z-index négatif ; les ombres du carnet sont des box-shadow. */

@font-face {
  font-family: "Besley";
  src: url("fonts/besley-roman.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Besley";
  src: url("fonts/besley-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FBFAF6;       /* papier machine */
  --sheet: #FFFFFF;       /* fiche bristol, feuille vierge */
  --ink: #1D2545;         /* encre bleu-noir */
  --ink-2: #4D546E;       /* encre délavée, textes secondaires */
  --carmine: #B5144B;     /* l'imprimé du carnet de messages */
  --carmine-deep: #8E0B39;
  --slip: #F7D6DD;        /* le papier rose du carnet */
  --slip-under: #EEC3CD;  /* le feuillet du dessous */
  --rule: rgba(29, 37, 69, .14);
  --rule-strong: rgba(29, 37, 69, .3);
  --slip-rule: rgba(181, 20, 75, .32);

  --serif: "Besley", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --margin: 3.75rem;      /* marge des horodatages */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html:not(.js) .needs-js { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.55 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg { display: block; }
input, textarea, button { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 24px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1.15 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--primary { background: var(--carmine); border-color: var(--carmine); color: #fff; }
.btn--primary:hover { background: var(--carmine-deep); border-color: var(--carmine-deep); color: #fff; }
.btn[disabled] { cursor: progress; opacity: .7; }
.btn--block { width: 100%; }

/* Lien d'action discret : un bouton qui a l'air d'un lien souligné de carmin. */
.text-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 .9375rem/1.3 var(--sans);
  text-decoration: underline;
  text-decoration-color: var(--carmine);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.text-button:hover { text-decoration-thickness: 2.5px; }
.text-button .icon { color: var(--carmine); }

/* ---------- En-tête ---------- */

.site-header { border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 1.4375rem/1 var(--serif);
  letter-spacing: -.012em;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark { width: 28px; height: 28px; flex: none; overflow: visible; }
.brand-box { fill: none; stroke: var(--ink); stroke-width: 1.8; }
.brand-tick {
  fill: none;
  stroke: var(--carmine);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--carmine); }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  font: 600 .9375rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.header-call .icon { color: var(--carmine); }
.header-call:hover { border-color: var(--ink); }

/* ---------- Haut de page ---------- */

.hero {
  padding-block: clamp(36px, 5vw, 80px) clamp(72px, 9vw, 128px);
  overflow-x: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.hero-title {
  font-size: clamp(2.625rem, 1rem + 3.8vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  max-width: 15ch;
}
.hero-lead {
  margin-top: 28px;
  max-width: 34rem;
  font-size: clamp(1.125rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.5;
}
.hero-for {
  margin-top: 28px;
  max-width: 34rem;
  font-size: .9375rem;
  color: var(--ink-2);
}

/* Le bouton vers les appels d'exemple. */
.hero-listen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 36px;
  max-width: 40rem;
}
.hero-listen p { flex: 1 1 15rem; font-size: .9375rem; color: var(--ink-2); }

.hero-call {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px 36px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  max-width: 40rem;
}
.call {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.call-label { font-size: .9375rem; color: var(--ink-2); }
.call-number {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding-bottom: 10px;
  font: 500 clamp(1.875rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--serif);
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  background: linear-gradient(var(--carmine), var(--carmine)) left bottom / 100% 2px no-repeat;
  transition: background-size .2s;
}
.call:hover .call-number { background-size: 100% 4px; }
.call-number .icon { width: .72em; height: .72em; color: var(--carmine); stroke-width: 1.6; }

/* Le message téléphonique. Toutes ses mesures suivent sa largeur (unités cqi). */
.slip-stage {
  container-type: inline-size;
  width: 100%;
  max-width: 29rem;
  justify-self: end;
}
.slip-pad { position: relative; }
.slip-pad::before {
  /* le feuillet suivant du carnet, en dessous ; il porte l'ombre du carnet (un filtre d'ombre
     sur le parent d'un élément masqué s'affiche en noir dans Safari) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--slip-under);
  transform: rotate(1.6deg) translate(1.2%, .8%);
  box-shadow: 0 1px 1px rgba(29, 37, 69, .14), 0 16px 22px rgba(29, 37, 69, .14);
}
.slip {
  position: relative;
  padding: 9cqi 7.5cqi 6.5cqi;
  border-radius: 3px;
  background: var(--slip);
  transform: rotate(-1.6deg);
  /* bord détaché du carnet : une rangée de demi-trous */
  -webkit-mask:
    radial-gradient(circle at 50% 0, #0000 1.05cqi, #000 calc(1.05cqi + .5px)) 0 0 / 3.4cqi 2.4cqi repeat-x,
    linear-gradient(#000 0 0) 0 2.4cqi / 100% 100% no-repeat;
          mask:
    radial-gradient(circle at 50% 0, #0000 1.05cqi, #000 calc(1.05cqi + .5px)) 0 0 / 3.4cqi 2.4cqi repeat-x,
    linear-gradient(#000 0 0) 0 2.4cqi / 100% 100% no-repeat;
}

.slip-head {
  padding-bottom: 2.6cqi;
  margin-bottom: 4.6cqi;
  border-bottom: .45cqi solid var(--carmine);
}
.slip-title {
  font: italic 600 6.6cqi/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--carmine);
}
.slip-sub {
  margin-top: 1.6cqi;
  font: 500 3.1cqi/1 var(--sans);
  color: var(--carmine);
}

.slip-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4cqi 5cqi;
}
.slip-fields > div {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 2.4cqi;
  min-width: 0;
  padding-bottom: .9cqi;
  border-bottom: .25cqi solid var(--slip-rule);
}
.slip-fields > .half { grid-column: auto; }
.slip dt,
.slip-label {
  flex: none;
  font: 500 3.1cqi/1 var(--sans);
  color: var(--carmine);
  white-space: nowrap;
}
.slip dd { min-width: 0; }

.fill {
  display: inline-block;
  padding-right: .2em;
  margin-right: -.2em;
  font: italic 400 4.6cqi/1.15 var(--serif);
  color: var(--ink);
  white-space: nowrap;
}
.slip-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 2.8cqi 5.5cqi;
  margin: 5.2cqi 0 4.6cqi;
  padding: 0;
  list-style: none;
}
.slip-boxes li {
  display: flex;
  align-items: center;
  gap: 2cqi;
  font: 500 3.1cqi/1 var(--sans);
  color: var(--carmine);
  white-space: nowrap;
}

.slip-message .slip-label { display: block; margin-bottom: .4cqi; }
.slip-line {
  display: flex;
  align-items: flex-end;
  height: 8.2cqi;
  padding-bottom: .9cqi;
  border-bottom: .25cqi solid var(--slip-rule);
}
.slip-taken {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 2.4cqi;
  margin-top: 5cqi;
}

.slip-status {
  display: grid;
  justify-items: start;
  margin-top: 6cqi;
  padding-left: 1.5cqi;
  font-size: .9375rem;
  color: var(--ink-2);
}
.slip-status-load { display: grid; }
.st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; }
.st .icon { color: var(--carmine); }
/* L'invitation à appeler, après le dernier appel d'exemple. */
.invite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--carmine);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.invite .icon { color: var(--carmine); }

/* Case à cocher du carnet, réutilisée partout ; la coche déborde comme à la main. */
.box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--carmine);
  border-radius: 2px;
}
.box .tick {
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 26px;
  height: 26px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slip .box { width: 4.2cqi; height: 4.2cqi; border-width: .4cqi; border-radius: .5cqi; }
.slip .box .tick { left: -.3cqi; bottom: -.3cqi; width: 6.2cqi; height: 6.2cqi; }

/* Le remplissage de l'exemple, au chargement : un seul moment animé. */
@media (prefers-reduced-motion: no-preference) {
  .slip-face--example .fill {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
    animation: write var(--t, .45s) cubic-bezier(.35, .1, .35, 1) forwards;
    animation-delay: calc(.7s + var(--i) * .3s);
  }
  .slip-face--example .tick path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tick .32s ease-out forwards;
    animation-delay: calc(.7s + var(--i) * .3s);
  }
  .st--writing { animation: fade-out .3s ease forwards 4s; }
  .st--writing .icon { animation: nib .6s ease-in-out 6 alternate; }
  .st--sent { opacity: 0; animation: fade-in .4s ease forwards 4.15s; }
}
@media (prefers-reduced-motion: reduce) {
  .st--writing { display: none; }
}
@keyframes write {
  to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
@keyframes tick { to { stroke-dashoffset: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes nib { to { transform: translateX(3px) rotate(-6deg); } }
/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 9vw, 136px); }
.section + .section { border-top: 1px solid var(--rule); }
.section h2 {
  font-size: clamp(2rem, 1.35rem + 2.1vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.018em;
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 16px clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.section-head p { max-width: 38ch; color: var(--ink-2); }

/* ---------- L'appel : trois pistes ---------- */

.call-section { border-top: 1px solid var(--rule); }

/* Les onglets : trois colonnes sous un filet d'encre, comme les étapes et les tarifs. */
.call-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  scroll-margin-top: 20px;
}
.call-tab {
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 18px 16px 20px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.call-tab + .call-tab {
  padding-left: clamp(14px, 2.4vw, 32px);
  border-left: 1px solid var(--rule);
}
.call-tab::before {
  /* l'onglet ouvert : le filet d'encre passe au carmin */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 5px;
  background: var(--carmine);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.call-tab:hover,
.call-tab[aria-selected="true"] { color: var(--ink); }
.call-tab[aria-selected="true"]::before { transform: scaleX(1); }
.call-tab-trade {
  font: 500 clamp(1.1875rem, 1rem + .8vw, 1.5rem)/1.15 var(--serif);
  letter-spacing: -.01em;
}
.call-tab-what { font-size: .9375rem; }

/* Un appel. Sans JavaScript, les trois se suivent sous leur titre. */
.scene-title { font: 500 1.75rem/1.15 var(--serif); }
.js .scene-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
}
html:not(.js) .scene + .scene {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.scene-context { margin-top: 22px; max-width: 60ch; }

/* Le lecteur. La lecture à gauche, les trois pistes, puis sous elles l'heure et le son dans la
   colonne des noms, la position et la phrase en cours sous les ondes. */
.player {
  --label: 12.5rem;   /* colonne des noms de piste */
  --x0: var(--label); /* où commence le temps dans une piste, */
  --x1: 20px;         /* et où il finit, depuis le bord droit */
  --lane: 76px;
  --track: 52px;
  --cue: 36px;
  --rise: 28px;       /* du haut des ondes de la 3e piste jusque dans la 2e */
  display: grid;
  grid-template-columns: auto var(--label) minmax(0, 1fr);
  grid-template-areas:
    "play lanes lanes"
    ".    time  seek"
    ".    mute  line"
    ".    .     after"
    ".    cap   cap";
  column-gap: 20px;
  margin-top: 28px;
}
html:not(.js) .player { display: block; margin-top: 20px; }
.player-audio { display: block; width: 100%; max-width: 30rem; }
.js .player-audio { display: none; }

.player-play {
  grid-area: play;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-top: calc((var(--lane) - 60px) / 2 + 8px);
  border: 0;
  border-radius: 50%;
  background: var(--carmine);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s;
}
.player-play:hover { background: var(--carmine-deep); }
.player-play:focus-visible { border-radius: 50%; }
.glyph { grid-area: 1 / 1; width: 26px; height: 26px; fill: currentColor; }
.glyph--pause,
.player[data-state="playing"] .glyph--play { display: none; }
.player[data-state="playing"] .glyph--pause { display: block; }

.player-scroll {
  grid-area: lanes;
  min-width: 0;
  padding-top: 8px; /* la place de la tête de lecture, qui dépasse des pistes */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.lanes {
  position: relative;
  display: grid;
  gap: 6px;
  /* jamais moins de 18 px par seconde : en dessous, les pistes défilent */
  min-width: calc(var(--x0) + var(--x1) + var(--dur, 36) * 18px);
  cursor: pointer;
}
.lane {
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  align-items: center;
  height: var(--lane);
  padding-right: var(--x1);
  border-radius: 8px;
  background: var(--lane-bg);
  color: var(--lane-ink);
}
/* Qui appelle : l'encre. L'assistant : le papier rose du carnet. Ce qu'il fait : le bristol. */
.lane--caller { --lane-bg: #E7EAF3; --lane-ink: var(--ink); --lane-dot: rgba(29, 37, 69, .4); }
.lane--ai { --lane-bg: var(--slip); --lane-ink: var(--carmine); --lane-dot: rgba(181, 20, 75, .45); }
.lane--third { --lane-bg: #EFEBE0; --lane-ink: var(--ink-2); --lane-dot: rgba(77, 84, 110, .45); }
.lane-name {
  padding: 0 14px 0 20px;
  color: var(--ink);
  font: 600 .9375rem/1.25 var(--sans);
}
.lane--ai .lane-name { color: var(--carmine-deep); font: italic 600 1.125rem/1.2 var(--serif); }
.lane-track {
  position: relative;
  height: var(--track);
  /* le silence : une ligne pointillée */
  background: radial-gradient(circle, var(--lane-dot) 1px, transparent 1.4px) 0 50% / 7px 4px repeat-x;
}

/* Une prise de parole : des barres à la hauteur du son, espacées sur sa durée. */
.wave {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lane-bg);
}
.wave i {
  flex: none;
  width: 2.5px;
  min-height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* Ce que l'assistant fait derrière : un cartouche de bristol, relié à sa piste par une flèche
   qui descend (il demande) et, s'il attend une réponse, une qui remonte. */
.cue {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--cue);
  margin-top: calc(var(--cue) / -2);
  padding: 0 12px 0 10px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--carmine);
  border-radius: 3px;
  background: var(--sheet);
  color: var(--ink);
  font: 600 .875rem/1 var(--sans);
  white-space: nowrap;
  box-shadow: 0 1px 1px rgba(29, 37, 69, .05), 0 8px 14px -10px rgba(29, 37, 69, .4);
}
.cue .icon { color: var(--carmine); }
.hook {
  position: absolute;
  z-index: 1;
  top: calc(var(--rise) * -1);
  width: 9px;
  height: calc(var(--rise) + (var(--track) - var(--cue)) / 2);
  margin-left: -4.5px;
  color: var(--carmine);
}
.hook::before {
  content: "";
  position: absolute;
  left: 3.75px;
  top: 0;
  bottom: 5px;
  width: 1.5px;
  background: currentColor;
}
.hook::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 9px;
  height: 7px;
  background: currentColor;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
          clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.hook--back::before { top: 5px; bottom: 0; }
.hook--back::after {
  top: 0;
  bottom: auto;
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
          clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
/* La mise en relation : posée sur la piste de l'assistant, elle relie les deux autres. */
.cue--link::before,
.cue--link::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: calc(var(--rise) + (var(--track) - var(--cue)) / 2);
  margin-left: -.75px;
  background: var(--carmine);
}
.cue--link::before { bottom: 100%; }
.cue--link::after { top: 100%; }

/* Pendant l'écoute, ce qui n'est pas encore arrivé reste pâle ; au repos, tout est à l'encre. */
.wave i,
.cue,
.hook { transition: opacity .18s ease-out; }
.player:not([data-state="idle"]) .wave i:not(.on) { opacity: .26; }
.player:not([data-state="idle"]) .cue:not(.on),
.player:not([data-state="idle"]) .hook:not(.on) { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .call-tab::before { transition: transform .22s ease-out; }
  .player:not([data-state="idle"]) .cue.on { animation: stamp .28s ease-out; }
}
@keyframes stamp {
  from { transform: scale(1.14) rotate(-2.5deg); }
}

.playhead {
  position: absolute;
  top: -4px;
  bottom: 0;
  left: calc(var(--x0) + (100% - var(--x0) - var(--x1)) * var(--p, 0));
  z-index: 2;
  width: 1.5px;
  margin-left: -.75px;
  background: var(--ink);
  pointer-events: none;
}
.playhead::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3.75px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.player[data-state="idle"] .playhead { display: none; }

.player-time {
  grid-area: time;
  align-self: center;
  padding-left: 20px;
  font: 500 .9375rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.player-seek {
  grid-area: seek;
  -webkit-appearance: none;
          appearance: none;
  width: calc(100% - var(--x1));
  height: 28px;
  margin: 8px 0 0;
  background: transparent;
  cursor: pointer;
}
.player-seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--carmine), var(--carmine)) 0 0 / var(--fill, 0%) 100% no-repeat, var(--rule-strong);
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--carmine);
}
.player-seek::-moz-range-track { height: 3px; border-radius: 2px; background: var(--rule-strong); }
.player-seek::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--carmine); }
.player-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--carmine);
}
.player-mute {
  grid-area: mute;
  align-self: start;
  justify-self: start;
  margin: 10px 0 0 20px;
}

/* La phrase en cours : ce qu'on entend, pour qui écoute sans le son. */
.player-line {
  grid-area: line;
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 6.75rem;
  padding: 12px var(--x1) 0 0;
}
.player-who { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.player-who:empty { display: none; }
.player-says { max-width: 58ch; font-size: 1.125rem; line-height: 1.4; }
.player-line[data-kind="ai"] .player-says { font: italic 400 1.3125rem/1.4 var(--serif); }
.player-line[data-kind="event"] .player-says,
.player-line:not([data-kind]) .player-says { color: var(--ink-2); }
.player-after { grid-area: after; padding-bottom: 8px; }
.player-caption {
  grid-area: cap;
  padding: 14px 0 0 20px;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-2);
}
html:not(.js) .player-caption { margin-top: 12px; padding-left: 0; border-top: 0; }

/* Sous le lecteur : l'appel écrit, et le résumé reçu. */
.scene-detail {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}
.scene-sub { margin: 0 0 12px; font: 500 1.375rem/1.25 var(--serif); }
.scene-aside { position: sticky; top: 32px; }
.row.is-now .row-time { color: var(--carmine); font-weight: 700; }
.row.is-now .row-who { color: var(--carmine-deep); }

.call-note {
  margin-top: 24px;
  font-size: .9375rem;
  color: var(--ink-2);
  max-width: 44ch;
}

.log {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.log::before {
  /* la marge rouge du bloc-notes */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--margin) + 10px);
  width: 1px;
  background: var(--carmine);
  opacity: .5;
}
.row {
  display: grid;
  grid-template-columns: var(--margin) minmax(0, 1fr);
  column-gap: 21px;
  padding-block: 13px;
}
.row-time {
  padding-top: .5rem;
  font: 500 .8125rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  text-align: right;
}
.row-who {
  margin-bottom: 4px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.row-says { max-width: 62ch; }
.row--ai .row-says {
  font: italic 400 clamp(1.1875rem, 1.05rem + .45vw, 1.375rem)/1.45 var(--serif);
}
.row--caller .row-says { font-size: 1.0625rem; }
.row-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: .15rem;
  font-size: .9375rem;
  color: var(--ink-2);
}
.row-event .icon { color: var(--carmine); }
.row--action,
.row--mail { padding-block: 18px; }

/* Ce que l'assistant fait dans l'outil du client : une fiche bristol. */
.record {
  max-width: 40rem;
  padding: 14px 20px 10px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(29, 37, 69, .05), 0 10px 22px -16px rgba(29, 37, 69, .3);
}
.record-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--carmine);
  font-size: .9375rem;
  font-weight: 600;
}
.record-head .icon { color: var(--carmine); }
.record-fields > div,
.mail-head > div,
.mail-fields > div {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 2px 14px;
  padding: 8px 0;
}
.record-fields > div + div { border-top: 1px solid rgba(29, 37, 69, .09); }
.record-fields dt { font-size: .875rem; color: var(--ink-2); padding-top: .1em; }
.record-fields dd { font-size: .9375rem; }

.stamp {
  display: inline-block;
  padding: 4px 9px 5px;
  border: 1.5px solid var(--carmine);
  border-radius: 3px;
  color: var(--carmine);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  transform: rotate(-2deg);
}

/* Le résumé par e-mail : le message rose d'aujourd'hui. */
.mail {
  max-width: 40rem;
  padding: 20px 24px 14px;
  border-radius: 3px;
  background: var(--slip);
  box-shadow: 0 1px 1px rgba(29, 37, 69, .08), 0 14px 26px -18px rgba(29, 37, 69, .4);
}
.mail-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--carmine);
  font: italic 600 1.375rem/1.2 var(--serif);
  color: var(--carmine);
}
.mail-title .icon { width: 1em; height: 1em; }
.mail-head { padding-block: 6px; border-bottom: 1.5px solid var(--carmine); }
.mail-head > div { padding: 5px 0; }
.mail-fields > div + div { border-top: 1px solid var(--slip-rule); }
.mail dt { font-size: .875rem; font-weight: 500; color: var(--carmine); padding-top: .15em; }
.mail-head dd { font-size: .9375rem; }
.mail-fields dd { font: italic 400 1.0625rem/1.45 var(--serif); }

/* ---------- Métiers : trois feuillets du même carnet ---------- */

.pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 10px solid var(--carmine-deep);
  border-radius: 4px 4px 3px 3px;
  background: var(--slip);
  box-shadow: 0 1px 1px rgba(29, 37, 69, .08), 0 22px 40px -28px rgba(29, 37, 69, .45);
}
.leaf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.6vw, 36px);
}
.leaf + .leaf::before {
  /* la ligne de perforation entre deux feuillets */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -3px;
  width: 6px;
  background: radial-gradient(circle, var(--paper) 0 1.6px, transparent 2.1px) 50% 6px / 6px 11px repeat-y;
}
.leaf-trade {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 1rem/1.3 var(--sans);
}
.leaf-trade .icon { color: var(--carmine); }
.leaf-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .45em;
  font-family: var(--serif);
}
.leaf-day { font-style: italic; font-size: 1.25rem; color: var(--carmine); }
.leaf-hour {
  font-size: clamp(2.625rem, 1.9rem + 1.9vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.025em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.leaf-context {
  flex-basis: 100%;
  margin-top: 6px;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-2);
}
.leaf-text { font-size: 1rem; line-height: 1.55; }
.leaf-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--slip-rule);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--carmine);
}

/* ---------- Comment ça démarre ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step { padding-top: 22px; border-top: 2px solid var(--ink); }
.step-num {
  display: block;
  font: italic 500 3.5rem/1 var(--serif);
  color: var(--carmine);
}
.step h3 { margin: 18px 0 10px; font: 500 1.375rem/1.25 var(--serif); }
.step p { font-size: 1rem; max-width: 36ch; }

/* ---------- Ce qu'il fait ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.facts li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem;
}
.facts .icon { width: 1.4rem; height: 1.4rem; margin-top: .05em; color: var(--carmine); }
.facts strong { font-weight: 600; }
.facts .fact--connected { grid-column: 1 / -1; }
.facts .fact--connected p { max-width: 70ch; }

/* ---------- Tarifs ---------- */

.promise {
  justify-self: end;
  align-self: center;
  max-width: 22rem;
  padding: 12px 18px;
  border: 2px solid var(--carmine);
  border-radius: 4px;
  outline: 1px solid var(--carmine);
  outline-offset: 3px;
  color: var(--carmine);
  font: italic 600 1.125rem/1.35 var(--serif);
  transform: rotate(-2deg);
}
.section-head .promise { color: var(--carmine); max-width: 22rem; }

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  border-top: 2px solid var(--ink);
}
.plan {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 30px clamp(20px, 3vw, 44px) 4px 0;
}
.plan + .plan {
  padding-left: clamp(20px, 3vw, 44px);
  border-left: 1px solid var(--rule-strong);
}
.plan-name { font: 500 1.75rem/1.1 var(--serif); }
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 18px;
}
.plan-amount {
  font: 500 clamp(3.25rem, 2.4rem + 2.8vw, 5.25rem)/.95 var(--serif);
  letter-spacing: -.035em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.plan-amount--quote {
  align-self: flex-end;
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  font-style: italic;
  letter-spacing: -.015em;
}
.plan-unit { font-size: 1rem; font-weight: 500; color: var(--ink-2); }
.plan-quota {
  display: grid;
  gap: 2px;
  margin-top: 16px;
  font: italic 400 1.1875rem/1.35 var(--serif);
}
.plan-quota strong { font-style: normal; font-weight: 600; }
.plan-list {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: 1rem;
}
.plan-list li { display: flex; align-items: flex-start; gap: 12px; }
.plan-list .icon { margin-top: .2em; color: var(--carmine); stroke-width: 2.2; }
.plan .btn { justify-self: start; align-self: end; margin-top: 26px; }
.plans-note {
  margin-top: 36px;
  font-size: 1rem;
  color: var(--ink-2);
}

/* ---------- Questions ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 20px 0;
  list-style: none;
  cursor: pointer;
  font: 500 1.25rem/1.35 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { margin-top: .2em; color: var(--carmine); transition: transform .2s; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { max-width: 62ch; padding: 0 0 22px; font-size: 1.0625rem; }

/* ---------- Être rappelé ---------- */

.callback-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 40px clamp(40px, 6vw, 96px);
  align-items: start;
}
.callback-intro > p { margin-top: 24px; max-width: 36ch; }
.callback-intro .callback-alt { color: var(--ink-2); font-size: 1rem; }
.callback-alt a {
  color: var(--carmine);
  font-weight: 600;
  text-underline-offset: 4px;
}

.sheet {
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: 3px;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(29, 37, 69, .06), 0 22px 44px -28px rgba(29, 37, 69, .4);
}
.field {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 16px;
  min-width: 0;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}
.field > label,
.field legend {
  font-size: .9375rem;
  font-weight: 500;
  color: var(--carmine);
}
.field input:not([type="radio"]),
.field textarea {
  width: 100%;
  min-width: 0;
  padding: 6px 2px;
  border: 0;
  border-bottom: 1.5px solid var(--ink-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: italic 400 1.25rem/1.3 var(--serif);
}
.field [aria-invalid="true"] { border-bottom: 2px solid var(--carmine-deep); }
.field-error {
  grid-column: 2;
  margin-top: 6px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--carmine-deep);
}
.field--choices { display: block; margin-bottom: 26px; }
.field--choices legend { float: left; width: 6.5rem; margin: 2px 16px 0 0; padding: 0; }
.field--choices .field-error { clear: both; margin-left: calc(6.5rem + 16px); padding-top: 4px; }
.choices { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1rem;
  cursor: pointer;
}
.choice input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--carmine);
  border-radius: 2px;
  background: var(--sheet);
  cursor: pointer;
}
.choice input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--ink);
  -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
  transition: transform .12s ease-out;
}
.choice input:checked::before { transform: scale(1); }
.field--message { grid-template-columns: minmax(0, 1fr); }
.field--message > label { margin-bottom: 4px; }
.field--message .field-error { grid-column: 1; }
.field textarea {
  display: block;
  min-height: calc(2.1rem * 3);
  resize: vertical;
  border-bottom: 0;
  line-height: 2.1rem;
  /* un bloc de lignes, comme le message du carnet */
  background: linear-gradient(transparent calc(2.1rem - 1.5px), var(--ink-2) 0) 0 0 / 100% 2.1rem;
  background-origin: content-box;
  background-clip: content-box;
}
.optional { font-weight: 400; color: var(--ink-2); }
.form-privacy { margin-top: 14px; font-size: .875rem; color: var(--ink-2); }
.form-status { margin-top: 10px; font-size: .9375rem; font-weight: 500; color: var(--carmine-deep); }
.form-status:empty { display: none; }
.form-status a { color: inherit; }

.callback-done { display: grid; justify-items: start; gap: 10px; }
.callback-done:focus { outline: none; }
.callback-done-title { font: italic 600 2rem/1.1 var(--serif); }
.box--large { width: 26px; height: 26px; margin-bottom: 8px; }
.box--large .tick { width: 36px; height: 36px; }

/* ---------- Pied de page ---------- */

.site-footer {
  padding-block: 44px 52px;
  border-top: 1px solid var(--rule);
  font-size: .9375rem;
  color: var(--ink-2);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: start;
}
.brand--footer { font-size: 1.25rem; }
.made-by { margin-top: 14px; }
.footer-legal { font-style: normal; line-height: 1.65; }
.footer-legal a,
.footer-links a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Mentions légales ---------- */

.legal { max-width: 44rem; padding-block: clamp(48px, 7vw, 96px); }
.legal-back {
  display: inline-block;
  margin-bottom: 28px;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration-color: var(--carmine);
  text-underline-offset: 4px;
}
.legal h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.legal h2 { margin-top: 44px; font: 500 1.5rem/1.2 var(--serif); }
.legal p,
.legal address { margin-top: 12px; font-style: normal; font-size: 1.0625rem; }
.legal a { text-decoration-color: var(--carmine); text-underline-offset: 3px; }

/* ---------- Écrans moyens ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .slip-stage { justify-self: end; max-width: 27rem; margin-right: 2%; }
  .hero-title { max-width: 16ch; font-size: clamp(2.625rem, 1rem + 6vw, 4rem); }
  .plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .plan { grid-row: auto; grid-template-rows: none; padding-right: 0; }
  .plan + .plan {
    margin-top: 28px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
  }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact--connected { grid-column: auto; }
}

@media (max-width: 1040px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  /* Le lecteur : les noms passent au-dessus des ondes, les commandes au-dessus des pistes. */
  .player {
    --label: 0px;
    --x0: 12px;
    --x1: 12px;
    --lane: auto;
    --track: 44px;
    --cue: 32px;
    --rise: 46px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "play  time  mute"
      "lanes lanes lanes"
      "seek  seek  seek"
      "line  line  line"
      "after after after"
      "cap   cap   cap";
    column-gap: 14px;
    align-items: center;
  }
  .player-play { width: 52px; height: 52px; margin: 0 0 6px; }
  .player-time { padding-left: 0; margin-bottom: 6px; }
  .player-mute { align-self: center; margin: 0 0 6px; }
  .lane {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 8px var(--x1) 10px var(--x0);
  }
  .lane-name,
  .lane--ai .lane-name {
    position: sticky;
    left: var(--x0);
    justify-self: start;
    padding: 0;
    font-size: .875rem;
    line-height: 1.25rem;
    white-space: nowrap;
  }
  .player-seek { width: 100%; }
  .player-line { min-height: 8.5rem; padding-right: 0; }
  .player-caption { padding-left: 0; }
  .scene-detail { grid-template-columns: minmax(0, 1fr); }
  .scene-aside { position: static; }
  .scene-aside .mail,
  .call-note { max-width: 40rem; }
  .pad { grid-template-columns: minmax(0, 1fr); }
  .leaf + .leaf::before {
    top: -3px;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 6px;
    background: radial-gradient(circle, var(--paper) 0 1.6px, transparent 2.1px) 6px 50% / 11px 6px repeat-x;
  }
  .leaf-box { margin-top: 0; }
}

/* ---------- Petits écrans ---------- */

@media (max-width: 760px) {
  :root { --margin: 2.75rem; }
  body { font-size: 1.0625rem; }
  .nav { display: none; }
  .header-call { margin-left: auto; }
  .header-inner { min-height: 64px; gap: 16px; }
  .slip-stage { justify-self: start; max-width: 28rem; margin-right: 0; }
  .section-head,
  .callback-grid { grid-template-columns: minmax(0, 1fr); }
  .promise { justify-self: start; }
  .row { column-gap: 14px; }
  .log::before { left: calc(var(--margin) + 7px); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  /* Onglets à la largeur de leur nom : « Chauffagiste » ne tient pas dans un tiers d'écran. */
  .call-tabs { grid-template-columns: repeat(3, auto); }
  .call-tab { padding: 14px 8px 16px 0; }
  .call-tab + .call-tab { padding-left: 10px; }
  .call-tab-trade { font-size: clamp(.9375rem, 4.4vw, 1.1875rem); }
  .call-tab-what { font-size: .8125rem; }
  .record-fields > div,
  .mail-head > div,
  .mail-fields > div { grid-template-columns: minmax(0, 1fr); }
  .record,
  .mail { padding-inline: 16px; }
  .field { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .field-error { grid-column: 1; }
  .field--choices legend { float: none; width: auto; margin-bottom: 10px; }
  .field--choices .field-error { margin-left: 0; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .slip-pad::before { transform: rotate(1.1deg) translate(.8%, .6%); }
  .slip { transform: rotate(-1.1deg); }
  .header-call { padding: 9px 10px; font-size: .875rem; }
  .brand { font-size: 1.3125rem; }
  .hero-call .btn,
  .hero-listen .btn { width: 100%; }
}

/* Très petits écrans : le nom et le numéro de l'en-tête tiennent sur la largeur. */
@media (max-width: 360px) {
  .header-inner { gap: 8px; }
  .brand { gap: 6px; font-size: 1.125rem; }
  .brand-mark { width: 22px; height: 22px; }
  .header-call { gap: 6px; padding: 8px; font-size: .8125rem; }
}