/* Quel Ehpad ? : home page, free result, offer forms and public pages.
   The mix (fiche, part 3): the structure of Which? (the search first, rows with a rating
   square, the independence said plainly), the matter of Oscar (a large serif set light,
   warm paper, deep ink, one accent), the motion of Hinge Health (a rounded sheet sliding
   over the hero, pill buttons, soft 500 ms rises). Colours of our report: plum and paper,
   the HAS classes in four quiet tones. Fonts served by the site (OFL): Gloock for titles
   and figures, Albert Sans for the interface. Rules are scoped to .qe, or to a page that
   holds .qe-home, .qe-res, .qe-guide or .qe-offer-form. */

@font-face {
  font-family: "Gloock QE";
  src: url("fonts/gloock-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Albert QE";
  src: url("fonts/albert-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

.qe {
  --qe-paper: #f7f2ec;
  --qe-paper-2: #efe6dd;
  --qe-card: #fffdfa;
  --qe-ink: #23171c;
  --qe-ink-2: #4d3f45;
  --qe-ink-3: #6b5a61;
  --qe-rule: rgba(35, 23, 28, 0.12);
  --qe-ring: rgba(35, 23, 28, 0.1);
  --qe-plum: #6e3550;
  --qe-plum-2: #4f2439;
  --qe-plum-3: #3b1a2b;
  --qe-plum-soft: #e9d5de;
  --qe-ga: #2f6f4a;
  --qe-gb: #5a7d2a;
  --qe-gc: #9a6410;
  --qe-gd: #a33b2b;
  --qe-display: "Gloock QE", "Iowan Old Style", Georgia, serif;
  --qe-sans: "Albert QE", "Helvetica Neue", Arial, sans-serif;
  --qe-ease: cubic-bezier(0.35, 0, 0.2, 1);
  color: var(--qe-ink);
  font-family: var(--qe-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
}
.qe *, .qe *::before, .qe *::after { box-sizing: border-box; }
.qe h1, .qe h2, .qe h3 { font-family: var(--qe-display); font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--qe-ink); }
.qe p { margin: 0 0 1rem; }
.qe a { color: var(--qe-plum); }
.qe-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Page chrome, only on our pages */
body:has(.qe-home), body:has(.qe-res), body:has(.qe-guide), body:has(.qe-offer-form) { background: #f7f2ec; }
body:has(.qe-home) .topbar { max-width: 1200px; padding: 18px 20px; }
body:has(.qe-home) .brand, body:has(.qe-res) .brand, body:has(.qe-guide) .brand, body:has(.qe-offer-form) .brand { font-family: "Gloock QE", Georgia, serif; font-weight: 400; font-size: 1.3rem; color: #23171c; letter-spacing: -0.005em; }
body:has(.qe-home) .brand-emoji, body:has(.qe-res) .brand-emoji, body:has(.qe-guide) .brand-emoji, body:has(.qe-offer-form) .brand-emoji { font-size: 0; width: 26px; height: 26px; display: inline-block; vertical-align: -6px; margin-right: 8px; background: url("logo.svg") center / contain no-repeat; }
body:has(.qe-home) .topnav a { color: #4d3f45; }
body:has(.qe-home) .footer { max-width: 1200px; color: #4d3f45; }

/* Labels */
.qe .qe-kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qe-plum); margin: 0 0 12px; display: block; }
.qe .qe-kicker.light { color: #e9c9d6; }
.qe-note { font-size: 0.875rem; color: var(--qe-ink-3); }
.qe .qe-note.light { color: #d8bfca; }
.qe-muted { color: var(--qe-ink-3); }
.qe .qe-source { font-size: 0.75rem; color: var(--qe-ink-3); margin: 16px 0 0; line-height: 1.5; }
.qe-tag { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qe-plum); margin-bottom: 14px; }

/* Cards: soft corners, a fine ring and a long quiet shadow (Oscar) */
.qe-card { background: var(--qe-card); border-radius: 16px; box-shadow: 0 0 0 1px var(--qe-ring), 0 20px 44px -30px rgba(59, 26, 43, 0.35); padding: 24px; }

/* Buttons: pills (Hinge Health) */
.qe-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--qe-plum); color: #fff; font: 600 1rem/1 var(--qe-sans); letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; transition: background 200ms var(--qe-ease), transform 200ms var(--qe-ease), box-shadow 200ms var(--qe-ease);
}
.qe a.qe-btn { color: #fff; }
.qe-btn:hover { background: var(--qe-plum-2); box-shadow: 0 10px 24px -14px rgba(59, 26, 43, 0.8); }
.qe-btn:active { transform: translateY(1px); }
.qe-btn:focus-visible { outline: 3px solid #d8a6bb; outline-offset: 2px; }
.qe-btn.ghost { background: transparent; color: var(--qe-plum); box-shadow: inset 0 0 0 1.5px var(--qe-plum); }
.qe a.qe-btn.ghost { color: var(--qe-plum); }
.qe-btn.ghost:hover { background: rgba(110, 53, 80, 0.06); }

/* The HAS class: a square with a letter, in quiet tones */
.qe-grade { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #fff; font: 700 0.95rem/1 var(--qe-sans); flex: none; }
.qe-grade.ga { background: var(--qe-ga); }
.qe-grade.gb { background: var(--qe-gb); }
.qe-grade.gc { background: var(--qe-gc); }
.qe-grade.gd { background: var(--qe-gd); }
.qe-grade.g0 { background: var(--qe-paper-2); color: var(--qe-ink-3); }
.qe-grades { list-style: none; margin: 14px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.qe-grades li { display: inline-flex; align-items: center; gap: 8px; }
.qe-grades b { font-size: 1.05rem; }
.qe-grades .qe-grades-note { font-size: 0.85rem; color: var(--qe-ink-3); }
.qe-grades.big .qe-grade { width: 36px; height: 36px; font-size: 1.1rem; border-radius: 9px; }
.qe-grades.big b { font-family: var(--qe-display); font-weight: 400; font-size: 1.6rem; }

/* The free tool */
.qe-tool { display: grid; gap: 8px; padding: 26px; background: var(--qe-card); border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(20, 8, 14, 0.6); }
.qe-tool-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.qe-tool-head h2 { font-size: 1.45rem; }
.qe-tool-head .qe-tag { margin: 0; font-size: 0.7rem; }
.qe label, .qe legend { font-size: 0.9rem; font-weight: 600; color: var(--qe-ink-2); margin-top: 6px; }
.qe input[type="text"], .qe select {
  width: 100%; min-height: 52px; padding: 12px 18px; border: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(35, 23, 28, 0.24); color: var(--qe-ink);
  font: 400 1.05rem/1.3 var(--qe-sans); appearance: none; transition: box-shadow 180ms var(--qe-ease);
}
.qe input[type="text"]:focus, .qe select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--qe-plum); }
.qe-select { position: relative; }
.qe-select::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--qe-ink-2); border-bottom: 1.5px solid var(--qe-ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.qe-radius { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qe-radius legend { width: 100%; margin-bottom: 8px; }
.qe-chip { margin: 0; cursor: pointer; }
.qe-chip input { position: absolute; opacity: 0; pointer-events: none; }
.qe-chip span { display: inline-block; padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(35, 23, 28, 0.2); font-weight: 600; font-size: 0.95rem; color: var(--qe-ink-2); transition: background 160ms var(--qe-ease), color 160ms var(--qe-ease); }
.qe-chip input:checked + span { background: var(--qe-plum); color: #fff; box-shadow: none; }
.qe-chip input:focus-visible + span { outline: 3px solid #d8a6bb; outline-offset: 2px; }
.qe-tool .qe-btn { margin-top: 12px; width: 100%; }
.qe-embed .qe-tool { box-shadow: none; padding: 0; background: transparent; }

/* Hero: deep plum, a large serif set light (Oscar), the tool in a card */
.qe-hero { background: radial-gradient(120% 90% at 10% 0%, #6e3550 0%, #4f2439 55%, #3b1a2b 100%); color: #fff; padding: 30px 0 96px; }
.qe-hero-grid { display: grid; gap: 28px; }
@media (min-width: 980px) { .qe-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr); gap: 72px; align-items: center; } .qe-hero { padding: 64px 0 132px; } }
.qe .qe-hero h1 { color: #fff; font-size: clamp(2.5rem, 6.4vw, 4.75rem); line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 22px; }
.qe .qe-lead { color: #f1dde6; font-size: 1.15rem; margin: 0; max-width: 30em; }

/* The sheet that slides over the hero (Hinge Health) */
.qe-sheet { position: relative; margin-top: -56px; background: var(--qe-paper); border-radius: 28px 28px 0 0; padding: 56px 0 72px; }
.qe-example-grid { display: grid; gap: 32px; }
@media (min-width: 960px) { .qe-example-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; } }
.qe-example-copy h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 16px; }
.qe-example-copy p { color: var(--qe-ink-2); }

/* Rows: name, price, class (Which?) */
.qe-list { list-style: none; margin: 0; padding: 0; }
.qe-list.qe-card { padding: 8px 22px; }
.qe-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 18px; align-items: center; padding: 16px 0; border-top: 1px solid var(--qe-rule); }
.qe-row:first-child { border-top: 0; }
.qe-row-main { display: grid; gap: 2px; min-width: 0; }
.qe-row-name { font-weight: 700; color: var(--qe-ink); text-decoration: none; overflow-wrap: anywhere; }
.qe a.qe-row-name { color: var(--qe-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 320ms var(--qe-ease); }
.qe a.qe-row-name:hover { background-size: 100% 1px; }
.qe-row-meta { font-size: 0.85rem; color: var(--qe-ink-3); }
.qe-row-price { display: grid; justify-items: end; text-align: right; }
.qe-row-price b { font-family: var(--qe-display); font-weight: 400; font-size: 1.3rem; color: var(--qe-plum); line-height: 1.1; white-space: nowrap; }
.qe-row-price span { font-size: 0.75rem; color: var(--qe-ink-3); }
.qe-row-grade { display: grid; justify-items: center; gap: 4px; min-width: 76px; }
.qe-row-grade span:not(.qe-grade) { font-size: 0.7rem; color: var(--qe-ink-3); text-align: center; line-height: 1.2; }

/* Band of four facts */
.qe-band { background: var(--qe-plum-3); color: #f1dde6; padding: 34px 0; }
.qe-band ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 0 auto; }
@media (min-width: 900px) { .qe-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qe-band li { display: grid; gap: 4px; border-left: 1px solid rgba(241, 221, 230, 0.25); padding-left: 16px; }
.qe-band b { font-family: var(--qe-display); font-weight: 400; font-size: 1.7rem; color: #fff; }
.qe-band span { font-size: 0.9rem; color: #d8bfca; line-height: 1.4; }

/* Steps */
.qe-how { padding: 88px 20px; }
.qe-how h2, .qe-classes h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 34px; max-width: 18em; }
.qe-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 860px) { .qe-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } }
.qe-steps li { background: var(--qe-card); border-radius: 20px; padding: 26px; box-shadow: 0 0 0 1px var(--qe-ring); }
.qe-step-n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--qe-plum-soft); color: var(--qe-plum-2); font: 400 1.4rem/1 var(--qe-display); margin-bottom: 16px; }
.qe-steps h3 { font-size: 1.35rem; margin-bottom: 8px; }
.qe-steps p { color: var(--qe-ink-2); margin: 0; }

/* The bill */
.qe-bill { background: var(--qe-paper-2); padding: 80px 0; border-radius: 28px; margin: 0 12px; }
.qe-bill-grid { display: grid; gap: 32px; }
@media (min-width: 940px) { .qe-bill-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } }
.qe-bill h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 16px; }
.qe-bill p { color: var(--qe-ink-2); }
.qe-bill-figure { margin: 0; display: grid; gap: 14px; padding: 28px; }
.qe-bill-figure figcaption { font-weight: 700; }
.qe-bill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.qe-bill-label { font-size: 0.92rem; color: var(--qe-ink-2); }
.qe-bill-row b { font-size: 0.95rem; white-space: nowrap; }
.qe-bill-bar { grid-column: 1 / -1; height: 12px; border-radius: 999px; background: var(--qe-paper-2); overflow: hidden; }
.qe-bill-bar i { display: block; height: 100%; border-radius: 999px; background: var(--qe-plum); transform-origin: left; }
.qe-bill-row + .qe-bill-row .qe-bill-bar i { background: #b27a90; }
.qe-bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--qe-rule); padding-top: 14px; }
.qe-bill-total b { font-family: var(--qe-display); font-weight: 400; font-size: 2rem; color: var(--qe-plum); }
.qe-bill-figure .qe-note { margin: 0; }

/* Products */
.qe-intro { padding: 80px 20px 12px; }
.qe-intro > * { max-width: 760px; }
.qe-intro h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 14px; }
.qe-intro p { color: var(--qe-ink-2); }
.qe-product { padding: 56px 0; }
.qe-product.alt { background: linear-gradient(180deg, #f2eae2, #efe6dd); }
.qe-product-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 940px) { .qe-product-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } .qe-product.alt .qe-shot { order: 2; } }
.qe-copy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.qe-copy-head h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.qe-price { font-family: var(--qe-display); font-size: 1.7rem; font-weight: 400; color: var(--qe-plum); white-space: nowrap; }
.qe-copy > p { color: var(--qe-ink-2); }
.qe-check-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.qe-check-list li { position: relative; padding-left: 28px; }
.qe-check-list li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 12px; height: 7px; border-left: 2px solid var(--qe-plum); border-bottom: 2px solid var(--qe-plum); transform: rotate(-45deg); }

/* Report pages shown whole, opened in large on click */
.qe-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; position: relative; }
.qe-page { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--qe-ring), 0 24px 48px -26px rgba(59, 26, 43, 0.55); transition: transform 500ms var(--qe-ease); background: #fff; }
.qe-page:nth-child(2) { transform: translateY(26px); }
.qe-page:hover { transform: translateY(-4px); }
.qe-page:nth-child(2):hover { transform: translateY(22px); }
.qe-page img { display: block; width: 100%; height: auto; }
.qe-pages-label { grid-column: 1 / -1; margin-top: 34px; font-size: 0.78rem; color: var(--qe-ink-3); }

/* The classes explained */
.qe-classes { padding: 88px 20px 40px; }
.qe-classes > p { color: var(--qe-ink-2); max-width: 46em; }
.qe-classes-grid { list-style: none; margin: 26px 0 18px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .qe-classes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qe-classes-grid li { display: grid; gap: 8px; align-content: start; }
.qe-classes-grid b { font-family: var(--qe-display); font-weight: 400; font-size: 1.25rem; }
.qe-classes-grid span:not(.qe-grade) { color: var(--qe-ink-2); font-size: 0.92rem; }

/* Comparison table */
.qe-compare { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.qe-compare th { text-align: left; font-weight: 600; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qe-ink-3); padding: 10px 8px; border-bottom: 1px solid var(--qe-rule); }
.qe-compare td { padding: 11px 8px; border-bottom: 1px solid var(--qe-rule); vertical-align: top; color: var(--qe-ink-2); }
.qe-compare td:first-child { color: var(--qe-ink); font-weight: 600; }
.qe-compare td:last-child, .qe-compare th:last-child { color: var(--qe-plum); }
.qe-compare td:last-child { font-weight: 600; }

/* Method and contact: a deep band */
.qe-trust { background: var(--qe-plum-3); color: #f1dde6; padding: 80px 0; margin-top: 60px; border-radius: 28px 28px 0 0; }
.qe-trust-grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .qe-trust-grid { grid-template-columns: 1.25fr 1fr; gap: 72px; } }
.qe .qe-trust h2 { font-size: 1.9rem; margin-bottom: 14px; color: #fff; }
.qe-trust p { color: #e3cbd5; }
.qe-trust strong { color: #fff; }

/* Public pages, FAQ */
.qe-guides { padding: 40px 0; }
.qe-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.qe-guides a { display: inline-block; padding: 10px 16px; border-radius: 999px; box-shadow: 0 0 0 1px var(--qe-ring); background: var(--qe-card); color: var(--qe-ink); font-size: 0.95rem; text-decoration: none; transition: box-shadow 200ms var(--qe-ease), color 200ms var(--qe-ease); }
.qe-guides a:hover { box-shadow: 0 0 0 1.5px var(--qe-plum); color: var(--qe-plum); }
.qe-faq { padding: 24px 0 90px; }
.qe-faq h2 { font-size: 2.1rem; margin-bottom: 18px; }
.qe-faq details { border-top: 1px solid var(--qe-rule); padding: 18px 0; max-width: 860px; }
.qe-faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.qe-faq summary::-webkit-details-marker { display: none; }
.qe-faq summary::after { content: "+"; font-family: var(--qe-display); font-size: 1.6rem; line-height: 1; color: var(--qe-plum); transition: transform 260ms var(--qe-ease); }
.qe-faq details[open] summary::after { transform: rotate(45deg); }
.qe-faq details p { color: var(--qe-ink-2); margin: 12px 0 0; max-width: 46em; }

/* Free result */
.qe-result-zone { padding: 40px 20px; scroll-margin-top: 16px; }
.qe-res { display: grid; gap: 18px; }
@media (min-width: 980px) { .qe-res { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); align-items: start; } }
.qe-res-main { padding: 28px; }
.qe-res-h { font-size: clamp(1.7rem, 3.6vw, 2.3rem); margin-bottom: 8px; }
.qe .qe-big { margin: 14px 0 4px; display: grid; gap: 2px; }
.qe-big span { font-size: 0.85rem; color: var(--qe-ink-3); }
.qe-big b { font-family: var(--qe-display); font-weight: 400; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: var(--qe-plum); }
.qe .qe-range { color: var(--qe-ink-2); margin: 6px 0 4px; }
.qe-range strong { color: var(--qe-ink); }
.qe-res-side { display: grid; gap: 14px; }
.qe-offer { display: grid; gap: 16px; padding: 28px; }
.qe-offer h2 { font-size: 1.6rem; }
.qe-offer .qe-kicker { margin: 0; }
.qe-offer .qe-btn { width: 100%; }
.qe-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; color: var(--qe-ink-3); }
.qe-small { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; text-decoration: none; color: var(--qe-ink); transition: box-shadow 220ms var(--qe-ease); }
.qe-small:hover { box-shadow: 0 0 0 1.5px var(--qe-plum); }
.qe a.qe-small { color: var(--qe-ink); }
.qe-small .qe-note { display: block; margin-top: 2px; }
.qe-small .qe-price { font-size: 1.35rem; }

/* Offer forms */
.qe-offer-form { display: grid; gap: 8px; }
.qe-offer-form details { margin-top: 8px; border-top: 1px solid var(--qe-rule); padding-top: 12px; display: grid; gap: 8px; }
.qe-offer-form summary { cursor: pointer; font-weight: 700; color: var(--qe-plum); }
.qe-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.qe-check input { margin-top: 4px; accent-color: #6e3550; }

/* Motion (Hinge Health): soft rises, once */
.qe-js .qe-reveal { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--qe-ease), transform 500ms var(--qe-ease); }
.qe-js .qe-reveal.is-in { opacity: 1; transform: none; }
.qe-steps li.qe-reveal:nth-child(2) { transition-delay: 80ms; }
.qe-steps li.qe-reveal:nth-child(3) { transition-delay: 160ms; }
.qe-js .qe-bill-figure.is-in .qe-bill-bar i { animation: qe-grow 900ms var(--qe-ease) both; }
@keyframes qe-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 560px) {
  body:has(.qe-home) .brand { font-size: 1.1rem; }
  .qe { font-size: 1rem; }
  .qe-hero { padding: 6px 0 80px; }
  .qe .qe-hero h1 { font-size: 2.35rem; margin-bottom: 12px; }
  .qe .qe-lead { font-size: 1rem; }
  .qe-hero .qe-kicker { margin-bottom: 8px; }
  .qe-tool { padding: 20px; border-radius: 18px; }
  .qe-tool-head { display: none; }
  .qe-chip span { padding: 8px 13px; }
  .qe-row { grid-template-columns: minmax(0, 1fr) auto; }
  .qe-row-grade { grid-column: 2; grid-row: 1 / span 2; }
  .qe-row-price { grid-column: 1; justify-items: start; text-align: left; }
  .qe-row-price b { font-size: 1.15rem; }
  .qe-pages { grid-template-columns: 1fr; gap: 14px; }
  .qe-page:nth-child(2), .qe-page:nth-child(2):hover { transform: none; }
  .qe-pages-label { margin-top: 4px; }
  .qe-bill { margin: 0; border-radius: 0; padding: 60px 0; }
  .qe-how, .qe-classes, .qe-intro { padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .qe-js .qe-reveal { opacity: 1; transform: none; transition: none; }
  .qe-js .qe-bill-figure.is-in .qe-bill-bar i { animation: none; }
  .qe-page, .qe-page:hover, .qe-btn { transition: none; }
}

/* Public pages and offer pages: the shared templates in the site's fonts and colours */
body:has(.qe-guide), body:has(.qe-offer-form), body:has(.qe-res) { font-family: "Albert QE", "Helvetica Neue", Arial, sans-serif; color: #23171c; font-variant-numeric: tabular-nums; }
body:has(.qe-guide) h1, body:has(.qe-guide) h2, body:has(.qe-offer-form) h1, body:has(.qe-offer-form) h2 { font-family: "Gloock QE", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
body:has(.qe-guide) h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.08; }
body:has(.qe-guide) .card, body:has(.qe-offer-form) .card { border-radius: 16px; box-shadow: 0 0 0 1px rgba(35, 23, 28, 0.1); background: #fffdfa; }
body:has(.qe-guide) .guide-table th { font-weight: 600; letter-spacing: 0.04em; color: #6b5a61; }
body:has(.qe-guide) .guide-table td a, body:has(.qe-guide) .link-list a { color: #6e3550; }
body:has(.qe-guide) .btn, body:has(.qe-offer-form) .btn { background: #6e3550; border-radius: 999px; box-shadow: none; }
body:has(.qe-guide) .source { font-size: 0.78rem; }
@media (min-width: 900px) { body:has(.qe-guide) .wrap.guide { max-width: 900px; } }
body:has(.qe-offer-form) .badge { border-radius: 999px; background: #6e3550; font-weight: 600; letter-spacing: 0.04em; }
body:has(.qe-offer-form) .offer-price b { font-family: "Gloock QE", Georgia, serif; font-weight: 400; font-size: 2.1rem; color: #6e3550; }
body:has(.qe-offer-form) .offer-price span, body:has(.qe-offer-form) ol { color: #6b5a61; }
body:has(.qe-offer-form) a:not(.btn):not(.brand):not(.teaser-zoom) { color: #6e3550; }
body:has(.qe-offer-form) input:not([type=checkbox]):not([type=radio]), body:has(.qe-offer-form) select { border: 0; box-shadow: 0 0 0 1px rgba(35, 23, 28, 0.24); border-radius: 999px; }
body:has(.qe-offer-form) :is(input, select):focus { outline: 2px solid #6e3550; outline-offset: 1px; }
body:has(.qe-offer-form) .bullets { list-style: none; padding-left: 0; }
body:has(.qe-offer-form) .bullets li { position: relative; padding-left: 28px; }
body:has(.qe-offer-form) .bullets li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 12px; height: 7px; border-left: 2px solid #6e3550; border-bottom: 2px solid #6e3550; transform: rotate(-45deg); }
@media (max-width: 420px) {
  .qe-radius { gap: 6px; flex-wrap: nowrap; }
  .qe-chip span { padding: 9px 12px; font-size: 0.92rem; white-space: nowrap; }
}
@media (max-width: 370px) {
  .qe-radius { gap: 4px; }
  .qe-chip span { padding: 8px 9px; font-size: 0.88rem; }
}
/* A table wider than the phone scrolls; its caption stays readable */
body:has(.qe-guide) .guide-table caption { position: sticky; left: 0; max-width: calc(100vw - 88px); white-space: normal; }