/* ==========================================================================
   Kiyi - site vitrine (kiyi.app)
   Design system de reference : kiyi-design-system.md
   Zero JavaScript, zero requete tierce, zero cookie.
   ========================================================================== */

/* --- Polices auto-hebergees (Poppins, licence SIL Open Font) --------------
   Servies depuis notre propre domaine : aucune adresse IP de visiteur n'est
   transmise a un tiers. Voir /confidentialite. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-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;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-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;
}

/* --- Jetons (mode clair) -------------------------------------------------- */

:root {
  --kiyi-coral: #E2664A;
  --kiyi-coral-deep: #D85A30;
  /* Ajout site : corail assombri pour le TEXTE sur fond blanc.
     #D85A30 sur blanc ne donne que 3,78:1 ; celui-ci donne 5,34:1. */
  --coral-ink: #B34A22;

  --grad-start: #E2664A;
  --grad-end: #F4A93A;

  --bg: #F7EFE8;
  --surface: #FFFFFF;
  --surface-2: #FFFDFB;
  --border: #EFE2D6;

  --text-strong: #3A2E2A;
  --text: #4A3E38;
  --text-2: #6E5A50;
  --text-muted: #7C6B61;

  --peach: #FBE3D8;
  --peach-soft: #FDEDE6;
  --peach-ink: #A05636;
  --amber: #FCEBCF;
  --amber-ink: #8F6210;
  --sage: #E7EEDD;
  --sage-ink: #4E6830;
  --bubble-client: #F2ECE4;

  /* Bande de rupture (section "Ce que Kiyi ne fait pas").
     Etait un brun tres sombre #221A16 : la rupture etait nette, mais le
     contraste fatiguait l'oeil sur une section entiere. Remplace par la peche
     du design system, qui marque la difference par la TEINTE plutot que par la
     luminosite. Mesure : texte #3A2E2A sur #FBE3D8 = 10,6:1, tres au-dessus des
     4,5:1 requis, et sans agression. */
  --inverse-bg: #FBE3D8;
  --inverse-text: #3A2E2A;
  --inverse-text-2: #6E5A50;
  --inverse-border: #F0C8B4;
  /* Le corail standard ne donne que 4,3:1 sur cette peche, juste sous la barre
     pour une etiquette de 11 px. Assombri a 5,4:1. */
  --inverse-eyebrow: #9E3F1C;

  --shadow-card: 0 2px 12px rgba(58, 46, 42, 0.06);
  --shadow-float: 0 10px 30px rgba(58, 46, 42, 0.14);

  --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --wrap: 1080px;
  --pad: 20px;
}

@media (min-width: 480px) { :root { --pad: 24px; } }
@media (min-width: 768px) { :root { --pad: 32px; } }

/* --- Mode sombre ---------------------------------------------------------
   Reprend le jeu sombre du design system (section 2). Le degrade projecteur
   reste identique : c'est la ou il brille le plus. */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #221A16;
    --surface: #2C231D;
    --surface-2: #2C231D;
    --border: #3A2E26;

    --text-strong: #F3E9E0;
    --text: #E0D2C7;
    --text-2: #C3B5AB;
    --text-muted: #A99A90;

    --coral-ink: #F0805E;

    --peach: #3A2A22;
    --peach-soft: #3A2A22;
    --peach-ink: #F0B45A;
    --amber: #3A2C1C;
    --amber-ink: #F0B45A;
    --sage: #283018;
    --sage-ink: #A4C078;
    --bubble-client: #362B24;

    /* En sombre, la bande "inversee" devient plus CLAIRE que la page,
       pour conserver l'intention d'inversion. */
    --inverse-bg: #33281F;
    --inverse-text: #F3E9E0;
    --inverse-text-2: #C3B5AB;
    --inverse-border: #4A3A2E;
    --inverse-eyebrow: #F0B45A;

    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.45);
  }
}

/* --- Remise a zero -------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

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

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

h1, h2, h3 { color: var(--text-strong); line-height: 1.2; margin: 0 0 12px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* --- Echelle typographique marketing (extension du design system) --------- */

.t-display   { font-size: clamp(30px, 6.5vw, 54px); font-weight: 700; letter-spacing: -0.02em; }
.t-section   { font-size: clamp(25px, 4.2vw, 36px); font-weight: 700; letter-spacing: -0.01em; }
.t-lead      { font-size: clamp(17px, 2.2vw, 20px); font-weight: 400; line-height: 1.55; }
.t-caption   { font-size: 14px; color: var(--text-2); }
.t-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--coral-ink);
  margin: 0 0 10px;
}

/* --- Structure ------------------------------------------------------------ */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

section { padding: 64px 0; }
@media (min-width: 768px) { section { padding: 88px 0; } }

.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head p { color: var(--text-2); }

/* Lien d'evitement clavier */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--coral-ink);
  padding: 12px 18px; border-radius: 999px; z-index: 100; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: scale(.98); }

.btn-primary { background: var(--kiyi-coral); color: #fff; }
.btn-primary:hover { background: var(--kiyi-coral-deep); }

.btn-outline { background: transparent; color: var(--coral-ink); border-color: var(--kiyi-coral); }
.btn-outline:hover { background: var(--peach-soft); }

/* Sur le degrade : blanc plein, texte corail assombri (design system 5.1) */
.btn-on-grad { background: #fff; color: var(--coral-ink); }
.btn-on-grad:hover { background: #FFF6F1; }

.btn-ghost-light {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.65);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.20); }

/* --- En-tete -------------------------------------------------------------- */

.site-header { position: relative; z-index: 5; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; padding-bottom: 18px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Le symbole est un fichier SVG a part (logo-kiyi.svg en couleur,
   logo-kiyi-blanc.svg en negatif sur le degrade), pour garder le vrai degrade
   corail vers ambre et le halo du point lumineux. Deux fichiers plutot qu'un
   SVG en ligne : pas de collision d'identifiants de degrade entre les instances,
   et le navigateur les met en cache. */
.brand img { height: 34px; width: auto; flex: none; display: block; }
.brand-name { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text-strong); }

.nav { display: none; gap: 28px; }
@media (min-width: 900px) { .nav { display: flex; } }
.nav a {
  color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover { color: var(--coral-ink); }

/* En-tete pose SUR le degrade du hero : tout passe en blanc */
.on-grad .brand-name { color: #fff; }
.on-grad .nav a { color: rgba(255,255,255,.92); }
.on-grad .nav a:hover { color: #fff; text-decoration: underline; }

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

.hero {
  position: relative;
  /* Degrade signature du design system, une seule fois sur la page. */
  background: linear-gradient(135deg, var(--grad-start) 0%, var(--grad-end) 100%);
  padding-bottom: 72px;
  overflow: hidden;
}

/* Voile sombre SOUS la colonne de texte uniquement.
   Sans lui, le blanc sur l'ambre #F4A93A ne donne que 2,0:1 (il faut 4,5:1).
   Avec lui, la zone de texte mesure environ 4,7:1, et l'ambre reste intact
   a droite, la ou aucun texte ne se pose. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    rgba(116, 38, 16, .46) 0%,
    rgba(116, 38, 16, .34) 44%,
    rgba(116, 38, 16, 0) 72%);
}

/* Cercles decoratifs (design system 5.4) */
.hero-deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,.10); pointer-events: none; }
.hero-deco.d1 { width: 320px; height: 320px; top: -120px; right: -80px; }
.hero-deco.d2 { width: 200px; height: 200px; bottom: -90px; left: -70px; background: rgba(255,255,255,.07); }

.hero .wrap, .hero .header-inner { position: relative; z-index: 2; }

.hero-grid { display: grid; gap: 36px; padding-top: 28px; align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 55fr 45fr; gap: 48px; padding-top: 44px; }
}

.hero-copy h1 { color: #fff; margin-bottom: 16px; text-wrap: balance; }
.hero-copy .t-lead {
  color: #fff; font-weight: 500; max-width: 30ch;
  margin-bottom: 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note {
  margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.92);
  display: flex; align-items: flex-start; gap: 8px;
}
.hero-note .dot { margin-top: 7px; }

/* --- Carte conversation (la demo du produit) ------------------------------ */

.chat {
  background: var(--surface); border-radius: 22px; padding: 16px;
  box-shadow: var(--shadow-float); border: 1px solid var(--border);
}
.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--kiyi-coral); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.chat-who { font-weight: 600; font-size: 15px; color: var(--text-strong); line-height: 1.3; }
.chat-status { font-size: 12.5px; color: var(--sage-ink); display: flex; align-items: center; gap: 6px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--sage-ink); flex: none;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.dot-light { background: #fff; }

.bubbles { display: flex; flex-direction: column; gap: 10px; }
.bubble {
  max-width: 84%; padding: 11px 14px; border-radius: 16px;
  font-size: 15px; line-height: 1.5; color: var(--text);
  animation: rise .45s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bubble:nth-child(1) { animation-delay: .05s; }
.bubble:nth-child(2) { animation-delay: .14s; }
.bubble:nth-child(3) { animation-delay: .23s; }
.bubble:nth-child(4) { animation-delay: .32s; }

.bubble.them { background: var(--bubble-client); border-bottom-left-radius: 6px; align-self: flex-start; }
.bubble.kiyi { background: var(--peach-soft); border-bottom-right-radius: 6px; align-self: flex-end; }
.bubble .tag {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--coral-ink); margin-bottom: 4px;
}
.bubble strong { color: var(--text-strong); font-weight: 600; }

/* --- Section "le probleme" : pile de bulles qui submergent ---------------- */

.flood { display: grid; gap: 28px; }
@media (min-width: 860px) { .flood { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } }

.flood-pile { position: relative; display: flex; flex-direction: column; gap: 8px; }
.flood-pile .bubble {
  background: var(--bubble-client); border-bottom-left-radius: 6px;
  align-self: flex-start; max-width: 92%; animation: none;
  box-shadow: var(--shadow-card);
}
.flood-pile .bubble:nth-child(even) { margin-left: 22px; }
.flood-pile .bubble:nth-child(3n) { margin-left: 40px; }
.flood-pile .bubble + .bubble { margin-top: -2px; }
.flood-pile .bubble.faded { opacity: .55; }
.flood-pile .bubble.fainter { opacity: .3; }

.flood-copy ul { margin: 0; padding: 0; list-style: none; }
.flood-copy li {
  padding: 14px 0; border-top: 1px solid var(--border);
  display: flex; gap: 12px; align-items: flex-start;
}
.flood-copy li:last-child { border-bottom: 1px solid var(--border); }
.flood-copy li b { color: var(--text-strong); font-weight: 600; }
.tick { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--coral-ink); }

/* --- Frise verticale "comment ca marche" (design system 5.10) ------------- */

.steps { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.steps li { position: relative; padding: 0 0 32px 52px; }
.steps li:last-child { padding-bottom: 0; }

/* la ligne qui relie les points */
.steps li::before {
  content: ''; position: absolute; left: 15px; top: 30px; bottom: -2px;
  width: 2px; background: var(--border);
}
.steps li:last-child::before { display: none; }

.steps .pin {
  position: absolute; left: 0; top: 2px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--kiyi-coral); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.steps h3 { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.steps p { color: var(--text-2); margin-bottom: 0; }

/* --- Bande a contraste inverse "ce que Kiyi ne fait pas" ------------------ */

.inverse {
  background: var(--inverse-bg); color: var(--inverse-text-2);
  border-top: 1px solid var(--inverse-border);
  border-bottom: 1px solid var(--inverse-border);
}
.inverse h2 { color: var(--inverse-text); }
.inverse .t-eyebrow { color: var(--inverse-eyebrow); }
.inverse .section-head p { color: var(--inverse-text-2); }

.nots { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.nots li { padding: 26px 0; border-top: 1px solid var(--inverse-border); }
.nots li:last-child { border-bottom: 1px solid var(--inverse-border); }
.nots b {
  display: block; color: var(--inverse-text); font-weight: 700;
  font-size: clamp(19px, 2.6vw, 23px); margin-bottom: 6px; line-height: 1.3;
}
.nots span { display: block; max-width: 62ch; }

/* --- Pour qui ------------------------------------------------------------- */

.fit { display: grid; gap: 16px; }
@media (min-width: 800px) { .fit { grid-template-columns: 1fr 1fr; gap: 20px; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card);
}
.card h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { padding: 9px 0 9px 28px; position: relative; color: var(--text-2); }
.card li::before {
  content: ''; position: absolute; left: 2px; top: 17px;
  width: 12px; height: 2px; border-radius: 2px; background: var(--kiyi-coral);
}
.card.no li::before { background: var(--text-muted); }
.card .pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
}
.pill.yes { background: var(--sage); color: var(--sage-ink); }
.pill.no  { background: var(--peach); color: var(--peach-ink); }

/* --- Questions (details/summary natif, zero JS) --------------------------- */

.faq { max-width: 780px; }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 20px 40px 20px 0; position: relative;
  font-weight: 600; font-size: 17.5px; color: var(--text-strong);
  min-height: 44px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--coral-ink); border-bottom: 2px solid var(--coral-ink);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 8px 22px 0; color: var(--text-2); max-width: 68ch; }

/* --- Appel a l'action de bas de page -------------------------------------- */

.cta-band {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; padding: 32px 24px; text-align: center;
  box-shadow: var(--shadow-card);
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band p { color: var(--text-2); max-width: 52ch; margin: 0 auto 22px; }
.cta-note { margin-top: 16px; margin-bottom: 0; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 40px 0 48px; margin-top: 24px;
  font-size: 15px; color: var(--text-2);
}
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }

.footer-legal { max-width: 56ch; }
.footer-legal .brand { margin-bottom: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 2px; }
.footer-links a {
  color: var(--text-2); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.footer-links a:hover { color: var(--coral-ink); text-decoration: underline; }
.footer-bottom {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-muted);
}

/* --- Pages legales (prose) ------------------------------------------------ */

.doc { max-width: 760px; padding-top: 40px; }
.doc h1 { font-size: clamp(28px, 5vw, 40px); font-weight: 700; margin-bottom: 8px; }
.doc .updated { color: var(--text-muted); font-size: 14px; margin-bottom: 36px; }
.doc h2 {
  font-size: 21px; font-weight: 700; margin: 40px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.doc h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--text); }
.doc ul { padding-left: 22px; margin: 0 0 16px; }
.doc li { margin-bottom: 8px; }
.doc dl { margin: 0 0 16px; }
.doc dt { font-weight: 600; color: var(--text-strong); margin-top: 14px; }
.doc dd { margin: 2px 0 0; color: var(--text-2); }

.callout {
  background: var(--peach-soft); border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 22px; margin: 0 0 28px;
}
.callout p { margin-bottom: 0; }
.callout b { color: var(--text-strong); }

.todo {
  background: var(--amber); color: var(--amber-ink);
  padding: 2px 8px; border-radius: 6px; font-weight: 600;
  font-size: .92em; white-space: nowrap;
}

/* --- 404 ------------------------------------------------------------------ */

.notfound { text-align: center; padding: 80px 0 100px; max-width: 520px; margin: 0 auto; }
.notfound h1 { font-size: clamp(28px, 5vw, 40px); margin-bottom: 12px; }
.notfound p { color: var(--text-2); margin-bottom: 26px; }

/* --- Mouvement reduit ----------------------------------------------------- */

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

/* --- Impression ----------------------------------------------------------- */

@media print {
  .site-header, .hero-deco, .cta-band, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
}