@font-face {
  font-family: "Spline Sans";
  src: url("/fonts/spline-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Calso — shared styles.
   Light only, to match the app: every main screen is hardcoded #FEFDFD with
   StatusBar style="dark". Palette, radii and type from src/constants/theme.ts,
   src/global.css and the screen-level classNames in src/app/. */

:root {
  --bg: #fefdfd;
  --bg-alt: #f4f4f6;
  --card: #ffffff;
  --text: #000000;
  --text-2: #4a4a52;
  /* text-3/4 assombris : les anciens #8a8a90 et #a0a0a8 tombaient a 3.1:1 et
     2.4:1 sur --bg-alt, sous le minimum AA de 4.5:1 pour du texte courant.
     Verifie : text-3 6.2:1 et text-4 4.9:1 sur le fond le plus clair comme
     sur le plus sombre du site. La hierarchie 2 > 3 > 4 est preservee. */
  --text-3: #5a5a62;
  --text-4: #6a6a72;
  --border: #ededef;
  --line: #f1f1f3;

  /* Couleurs macro : decoratives uniquement. Sur nos fonds clairs elles
     plafonnent a 2.7:1, donc jamais en texte. */
  --protein: #f4685c;
  --carbs: #f0a424;
  --fat: #f7c948;
  /* Leurs equivalents lisibles, pour quand l'accent doit porter du texte. */
  --protein-ink: #b83c32;
  --carbs-ink: #8a5800;
  /* Teintes de fond, pour remplacer les bandeaux lateraux colores. */
  --protein-wash: #fdf1f0;
  --carbs-wash: #fdf5e7;

  /* Motion. Deceleration exponentielle : arrivee franche, pas de rebond. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-feedback: 130ms;
  --t-state: 220ms;
  --t-focal: 680ms;

  --r-card: 20px;
  --r-lg: 28px;
  --r-btn: 999px;
  --wrap: 1080px;
  --doc: 820px;

  --font-display: "Spline Sans", Inter, ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.05);
}

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

/* Le defilement doux est une preference, pas un defaut : il declenche des
   nausees chez les personnes sensibles au mouvement. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Les parties qu'on ne dessine pas portent aussi le design. Laissees aux
   valeurs par defaut, elles appartiennent au navigateur, pas a Calso. */
::selection {
  background: #ffd9d4;
  color: var(--text);
}

:root {
  caret-color: var(--protein-ink);
  scrollbar-color: #d6d6db transparent;
  scrollbar-width: thin;
}

/* Anneau de focus unique pour tout le site. Auparavant aucun element n'en
   definissait : la navigation au clavier heritait du contour du navigateur. */
:focus-visible {
  outline: 2px solid var(--protein-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Les chiffres s'alignent en colonne plutot que de danser. */
.num,
.doc td,
.meta {
  font-variant-numeric: tabular-nums;
}

img {
  max-width: 100%;
  height: auto;
}

/* Longueurs de lignes : `balance` egalise les titres courts, `pretty` evite
   les orphelins en fin de paragraphe. Sans lui, le chapeau de la section
   « Straight about the numbers » laissait « is. » seul sur sa ligne. */
h1,
h2,
h3,
.chip,
/* Les chapeaux font une ou deux lignes : `balance` les repartit a egalite.
   `pretty` ne travaille que la derniere ligne et laissait « is. » orphelin. */
.kicker {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 26px;
}

/* Colonne resserree pour les sections de texte long. */
.wrap-narrow {
  max-width: 820px;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(254, 253, 253, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.5px;
  margin-right: auto;
  flex-shrink: 0;
}

.brand img {
  width: 25px;
  height: 29px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  gap: 22px;
}

.nav a.link {
  text-decoration: none;
  font-size: 15px;
  color: var(--text-3);
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.nav a.link:hover,
.nav a.link[aria-current="page"] {
  color: var(--text);
}

.nav-store {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }
}

@media (max-width: 620px) {
  .nav-store {
    display: none;
  }
}

/* ---------- store buttons ---------- */

.store {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 13px;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
  white-space: nowrap;
}

.store:hover {
  opacity: 0.87;
}

.store svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.store small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.72;
  text-transform: uppercase;
}

.store b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.store-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-store .store {
  padding: 6px 12px 6px 10px;
}

.nav-store .store b {
  font-size: 13.5px;
}

.nav-store .store small {
  font-size: 11px;
}

/* ---------- hero ---------- */

.hero {
  padding: 62px 0 24px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: 7px 16px 7px 12px;
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.chip .dots {
  display: inline-flex;
  gap: 4px;
}

.chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

/* Pastilles macro du chip. Classes plutot qu'attributs style= inline,
   pour que la CSP puisse interdire style-src 'unsafe-inline'. */
.dot-protein {
  background: var(--protein);
}

.dot-carbs {
  background: var(--carbs);
}

.dot-fat {
  background: var(--fat);
}

.hero h1 {
  font-size: clamp(36px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 16px;
}

.hero p.lead {
  color: var(--text-2);
  font-size: 18px;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 26px;
}

.hero-shot {
  justify-self: center;
}

/* demo1-hero.png is demo1.png cropped to the phone — the original has ~35%
   white margin baked in, which made it read small at any box size. */
.hero-shot img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78vh;
}

.sub {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-4);
  letter-spacing: -0.2px;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero p.lead {
    margin-inline: auto;
  }
  .store-row {
    justify-content: center;
  }
  .hero-shot {
    order: -1;
  }
  /* 62vh occupait 503 px sur un iPhone 812 px : le texte d'accroche et
     l'unique bouton tombaient respectivement 2 px et 140 px SOUS la ligne de
     flottaison, mesure au navigateur. Le premier ecran mobile ne montrait
     donc qu'une photo de telephone sans contexte. A 36vh, la proposition de
     valeur et le bouton tiennent dans le premier ecran. */
  .hero-shot img {
    max-width: 320px;
    max-height: 36vh;
  }
}

/* ---------- generic section ---------- */

section.band {
  background: var(--bg-alt);
}

.section {
  padding: 62px 0;
}

.section h2 {
  text-align: center;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  line-height: 1.15;
}

.section .kicker {
  text-align: center;
  color: var(--text-3);
  margin: 0 auto 34px;
  max-width: 52ch;
  font-size: 16.5px;
}

/* ---------- steps ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
}

.card h3 {
  font-size: 19.5px;
  margin: 14px 0 7px;
  letter-spacing: -0.35px;
}

.card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.num {
  width: 34px;
  height: 34px;
  border-radius: var(--r-btn);
  background: var(--text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}

.dot {
  width: 42px;
  height: 42px;
  border-radius: var(--r-btn);
  display: grid;
  place-items: center;
  font-size: 20px;
}

/* ---------- split (phone + list) ---------- */

.split {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 44px;
  align-items: center;
}

.split-shot {
  justify-self: center;
}

.split-shot img {
  width: 100%;
  max-width: 260px;
  display: block;
}

.rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 17px 20px;
}

.row h3 {
  margin: 0 0 4px;
  font-size: 19px;
  letter-spacing: -0.015em;
}

.row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
}

@media (max-width: 800px) {
  .split {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .split-shot img {
    max-width: 220px;
  }
}

/* ---------- honesty callout ----------
   Le bandeau lateral colore (border-left: 4px) etait le marqueur le plus
   reconnaissable d'interface generee. Remplace par une bordure pleine et un
   fond teinte de la meme teinte : la couleur porte toujours le sens, sans la
   languette. L'etiquette en petites capitales espacees etait l'autre tic ;
   c'est desormais un vrai titre, qui se suffit. */

.callout {
  border-radius: var(--r-card);
  padding: 22px 24px;
  margin: 26px 0;
  background: var(--protein-wash);
  border: 1px solid #f6ded9;
}

.callout p {
  color: var(--text-2);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout .tag {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--protein-ink);
  margin: 0 0 8px;
}

.callout.ai {
  background: var(--carbs-wash);
  border-color: #f4e4c6;
}

.callout.ai .tag {
  color: var(--carbs-ink);
}

/* `plain` s'assoit sur un fond deja teinte : on retombe sur la carte neutre
   pour que les deux encadres ne se marchent pas dessus. */
.callout.plain {
  background: var(--card);
  border: 1px solid var(--border);
}

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

.faq {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 20px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 30px 16px 0;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.3px;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 23px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-3);
  border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  transform: rotate(-135deg);
  top: 26px;
}

.faq details p {
  margin: 0 0 16px;
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ---------- legal document ---------- */

.doc {
  max-width: var(--doc);
  padding-top: 46px;
  padding-bottom: 20px;
}

.doc h1 {
  font-size: clamp(30px, 6vw, 42px);
  letter-spacing: -0.028em;
  margin: 0 0 8px;
  line-height: 1.1;
}

.meta {
  color: var(--text-3);
  font-size: 15px;
  margin: 0 0 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

/* Echelle : 16 / 20 / 25px, soit une marche constante de 1.25. Auparavant
   h3 (17px) depassait le corps (16.5px) de 3% : pas une hierarchie. */
.doc h2 {
  font-size: 25px;
  letter-spacing: -0.022em;
  margin: 38px 0 10px;
  scroll-margin-top: 84px;
}

.doc h3 {
  font-size: 20px;
  margin: 26px 0 6px;
  letter-spacing: -0.015em;
}

.doc p,
.doc li {
  color: var(--text-2);
  font-size: 16px;
}

.doc li {
  margin-bottom: 7px;
}

.doc strong {
  color: var(--text);
  font-weight: 600;
}

.doc ul {
  padding-left: 22px;
}

.doc code {
  background: var(--bg-alt);
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 13.5px;
}

/* wide tables scroll inside themselves rather than the page */
.doc .table-scroll {
  overflow-x: auto;
  margin: 18px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 520px;
}

.doc th,
.doc td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-2);
  line-height: 1.5;
}

.doc th {
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--bg-alt);
  white-space: nowrap;
}

.doc tr:last-child td {
  border-bottom: none;
}

.toc {
  background: var(--bg-alt);
  border-radius: var(--r-card);
  padding: 20px 24px;
  margin-bottom: 34px;
}

.toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 26px;
}

.toc li {
  font-size: 15px;
  margin-bottom: 5px;
  break-inside: avoid;
  color: var(--text-2);
}

.toc a {
  color: var(--text-2);
  text-decoration: none;
}

.toc a:hover {
  color: var(--text);
}

@media (max-width: 560px) {
  .toc ol {
    columns: 1;
  }
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--border);
  margin-top: 70px;
  padding: 44px 0 40px;
  background: var(--bg-alt);
}

.footer-cols {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 34px;
}

.footer h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-4);
  margin: 0 0 14px;
  font-weight: 600;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 15px;
}

.footer a:hover {
  color: var(--text);
}

.footer .blurb {
  color: var(--text-3);
  font-size: 14.5px;
  max-width: 34ch;
  margin: 12px 0 18px;
}

.footer-base {
  max-width: var(--wrap);
  margin: 34px auto 0;
  padding: 20px 26px 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
}

.footer-base .copy {
  color: var(--text-4);
  font-size: 14px;
  margin-right: auto;
}

@media (max-width: 760px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
  .footer-cols > :first-child {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Mouvement
   Zero JavaScript : la CSP du site interdit tout script (default-src 'none').
   Tout ce qui suit tient en CSS, donc rien ne peut echouer au chargement et
   laisser la page vide.
   Regle qui gouverne ce bloc : l'etat par defaut est l'etat final. Les
   animations partent d'un `from` avec `backwards`, jamais d'un contenu masque
   par defaut — un navigateur sans animation-timeline, un onglet en arriere-plan
   ou un moteur de rendu sans scroll affiche la page complete.
   ========================================================================== */

/* ---------- moment focal : le scan du hero ----------
   Le geste de Calso, c'est viser une assiette et voir les chiffres se
   resoudre. Une seule bande lumineuse traverse le telephone a l'arrivee,
   dans les teintes macro, puis les trois pastilles du chip s'allument dans
   l'ordre proteines / glucides / lipides. Un seul moment auteur, pas un
   fondu-montee generique repete a chaque section. */

.hero-shot {
  position: relative;
  overflow: hidden;
}

.hero-shot::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(244, 104, 92, 0.13) 42%,
    rgba(240, 164, 36, 0.1) 58%,
    transparent 100%
  );
  /* Le degrade s'eteint sur les bords pour epouser la silhouette du
     telephone au lieu de poser un rectangle par-dessus. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  transform: translateY(-120%);
  animation: scan-sweep 1500ms var(--ease-out) 260ms 1 both;
}

@keyframes scan-sweep {
  from {
    transform: translateY(-120%);
  }
  to {
    transform: translateY(340%);
  }
}

/* Les pastilles macro s'allument derriere le passage du scan. */
.chip i {
  animation: dot-ignite var(--t-focal) var(--ease-out) both;
}

.chip i.dot-protein {
  animation-delay: 620ms;
}
.chip i.dot-carbs {
  animation-delay: 710ms;
}
.chip i.dot-fat {
  animation-delay: 800ms;
}

/* Pas d'opacite ici, contrairement aux autres proprietes animees du site :
   cette animation n'est derriere aucun `@supports` et porte un delai de 620 a
   800 ms avec fill-mode `both`. Animer l'opacite rendait donc les pastilles
   invisibles pendant la premiere seconde et demie, et une capture, une
   impression ou un rendu fige pris avant la fin du delai les perdait. Seule
   l'echelle bouge : l'element est visible a tout instant. */
@keyframes dot-ignite {
  from {
    transform: scale(0.35);
  }
  to {
    transform: scale(1);
  }
}

/* ---------- continuite : la nav signale qu'on a quitte le haut ---------- */

.nav::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.05);
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nav::after {
      animation: nav-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 120px;
    }

    @keyframes nav-lift {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  }
}

/* ---------- sequence : les trois etapes ----------
   L'echelonnement est legitime ici parce que la section EST une liste
   ordonnee de trois etapes. Il n'est applique nulle part ailleurs : relire
   chaque section comme une liste echelonnee est precisement le reflexe
   uniforme a eviter. Decalage total plafonne a ~240 ms d'equivalent. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid-3 .card {
      animation: step-in linear both;
      animation-timeline: view();
    }
    .grid-3 .card:nth-child(1) {
      animation-range: entry 5% entry 62%;
    }
    .grid-3 .card:nth-child(2) {
      animation-range: entry 11% entry 68%;
    }
    .grid-3 .card:nth-child(3) {
      animation-range: entry 17% entry 74%;
    }

    @keyframes step-in {
      from {
        transform: translateY(16px);
      }
      to {
        transform: none;
      }
    }
  }
}

/* ---------- retours d'interaction ----------
   Aucun de ces etats n'existait : survol par simple opacite, et rien du tout
   au clavier ni a l'appui. */

.nav a.link {
  transition: color var(--t-feedback) var(--ease-out);
}

.store {
  transition:
    transform var(--t-feedback) var(--ease-out),
    box-shadow var(--t-state) var(--ease-out);
}

.store:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.store:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 80ms;
}

.card,
.row {
  transition:
    border-color var(--t-state) var(--ease-out),
    box-shadow var(--t-state) var(--ease-out),
    transform var(--t-state) var(--ease-out);
}

.rows .row:hover,
.grid-3 .card:hover {
  border-color: #e0e0e4;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.faq summary {
  transition: color var(--t-feedback) var(--ease-out);
}

.faq summary:hover {
  color: var(--protein-ink);
}

.faq summary:hover::after {
  border-color: var(--protein-ink);
}

.footer a,
.toc a {
  transition: color var(--t-feedback) var(--ease-out);
}

/* Le depliage de la FAQ : la fleche tournait deja, le panneau sautait. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--t-state) var(--ease-out),
        content-visibility var(--t-state) allow-discrete;
      interpolate-size: allow-keywords;
    }
    .faq details[open]::details-content {
      block-size: auto;
    }
  }
}

/* ---------- mouvement reduit ----------
   Reduire, pas supprimer : les changements de couleur qui confirment une
   action restent lisibles, seul le deplacement dans l'espace disparait. */

@media (prefers-reduced-motion: reduce) {
  .hero-shot::after {
    animation: none;
    opacity: 0;
  }

  .chip i {
    animation: none;
  }

  .store:hover,
  .store:active,
  .rows .row:hover,
  .grid-3 .card:hover {
    transform: none;
  }

  .faq summary::after {
    transition: none;
  }
}