/* L'horoscope cash: every page of the site (loaded by horoscope/page_head.html), the home page and
   the free result. A straight, newspaper look rather than a mystic one: newsprint paper, black
   ink, the burnt orange of the site's flame, and the four element colours of the compatibility
   table for small touches. Every home rule is scoped to .hc or to a page holding .hc-home. */

@font-face {
  font-family: "DM Serif Horoscope";
  src: url("fonts/dmserif-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope Horoscope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono Horoscope";
  src: url("fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.hc {
  --hc-paper: #f3efe6;
  --hc-card: #fffdf8;
  --hc-ink: #16151b;
  --hc-soft: #45434d;
  --hc-muted: #5f5c66;
  --hc-line: #ddd6c8;
  --hc-line-strong: #c9c0ae;
  --hc-fire: #b5400f;
  --hc-fire-deep: #8f300a;
  --hc-fire-light: #fbe6d9;
  --hc-earth: #4d6b3c;
  --hc-earth-light: #e5ecdc;
  --hc-water: #1f5f7a;
  --hc-water-light: #dcebf1;
  --hc-air: #d9a52a;
  --hc-display: "DM Serif Horoscope", Georgia, "Times New Roman", serif;
  --hc-text: "Manrope Horoscope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hc-mono: "Plex Mono Horoscope", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--hc-text);
  color: var(--hc-ink);
  font-size: 16px;
  line-height: 1.6;
}
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc h1, .hc h2, .hc h3, .hc h4 { font-family: var(--hc-display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.06; letter-spacing: -0.01em; color: var(--hc-ink); }
.hc p { margin: 0; }
.hc a { color: var(--hc-fire-deep); }
.hc a:focus-visible, .hc button:focus-visible, .hc input:focus-visible, .hc summary:focus-visible { outline: 3px solid var(--hc-air); outline-offset: 2px; }
.hc-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.hc-kicker { font-family: var(--hc-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hc-muted); }
.hc-kicker.light { color: #d8d2c4; }
.hc-note { font-size: 0.86rem; color: var(--hc-muted); }
.hc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-sticker {
  position: absolute; z-index: 2; top: -13px; right: 18px; background: var(--hc-ink); color: #ffffff;
  font-family: var(--hc-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 4px;
}
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  padding: 14px 24px; min-height: 54px; border-radius: 10px; border: 0; cursor: pointer; text-align: center;
  background: var(--hc-fire); color: #ffffff; text-decoration: none;
}
.hc .hc-btn, .hc .hc-btn:hover { color: #ffffff; }
.hc-btn:hover { background: var(--hc-fire-deep); color: #ffffff; }
.hc-btn[disabled] { opacity: 0.6; cursor: wait; }
.hc-btn.ghost, .hc .hc-btn.ghost { background: transparent; color: var(--hc-ink); border: 2px solid var(--hc-ink); }
.hc-btn.ghost:hover, .hc .hc-btn.ghost:hover { background: var(--hc-ink); color: #ffffff; }
.hc-card { background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 14px; }
.hc-tag { width: fit-content; font-family: var(--hc-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; background: var(--hc-fire-light); color: var(--hc-fire-deep); }
.hc-tag.ink { background: var(--hc-ink); color: #ffffff; }
.hc-tag.warm { background: var(--hc-water-light); color: var(--hc-water); }
.hc-price { font-family: var(--hc-display); font-size: 2.1rem; color: var(--hc-fire-deep); white-space: nowrap; }
.hc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hc-list li { display: flex; gap: 10px; }
.hc-list li::before { content: ""; flex: 0 0 auto; width: 10px; height: 2px; margin-top: 0.8em; background: var(--hc-fire); }

/* The page around it: newsprint, the logo instead of the emoji. */
body:has(.hc-home) { background: var(--hc-ink, #16151b); }
body:has(.hc-home) .topbar { max-width: 1200px; padding: 16px max(18px, env(safe-area-inset-left, 0px)); }
body:has(.hc-home) .brand, body:has(.hc-home) .topnav a { color: #f3efe6; }
body:has(.hc-home) .footer { max-width: 1200px; }
body:has(.hc-home) main { background: #f3efe6; }
body:has(.hc-home) footer.footer { color: #d8d2c4; }
body:has(.hc-home) footer.footer a { color: #f3efe6; }

/* Hero: black band, the title, the free test, the real year next to it. */
.hc-hero { background: var(--hc-ink); color: #f3efe6; padding-block: 36px 64px; }
.hc-hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .hc-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; } }
.hc-hero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hc-hero h1 { color: #ffffff; font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.hc-hero h1 em { font-style: italic; color: #f08a4b; }
.hc-lead { font-size: 1.08rem; color: #e4ded1; max-width: 34em; }
.hc-fine { font-size: 0.88rem; color: #b9b2a3; max-width: 34em; }

.hc-form { padding: 20px; display: flex; flex-direction: column; gap: 14px; color: var(--hc-ink); border: 0; }
.hc-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.hc-form legend { font-weight: 700; font-size: 1rem; margin-bottom: 10px; padding: 0; }
.hc-signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .hc-signs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.hc-sign { position: relative; margin: 0; }
.hc-sign input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hc-sign span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 58px; padding: 6px 2px; border-radius: 10px; border: 1.5px solid var(--hc-line-strong);
  background: #ffffff; font-size: 0.78rem; font-weight: 600; line-height: 1.15; text-align: center;
}
.hc-sign i { font-style: normal; font-size: 1.3rem; line-height: 1; font-family: "Segoe UI Symbol", "Apple Symbols", var(--hc-text); }
.hc-sign input:checked + span { border-color: var(--hc-ink); background: var(--hc-ink); color: #ffffff; }
.hc-sign input:focus-visible + span { outline: 3px solid var(--hc-air); outline-offset: 2px; }
.hc-form details { font-size: 0.92rem; color: var(--hc-soft); }
.hc-form summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.hc-form input[type="date"] { margin-top: 8px; width: 100%; font: inherit; font-size: 1.05rem; padding: 11px 12px; border: 1.5px solid var(--hc-line-strong); border-radius: 10px; background: #ffffff; color: var(--hc-ink); }
.hc-form .hc-btn { width: 100%; }

.hc-show { display: flex; justify-content: center; min-width: 0; }
.hc-show-sheet { position: relative; width: min(100%, 520px); background: var(--hc-card); color: var(--hc-ink); border-radius: 14px; padding: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.hc-show-note { margin-top: 12px; font-size: 0.82rem; color: var(--hc-muted); }

/* The real examples */
.hc-sheet, .hc-year, .hc-mail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hc-sheet h4, .hc-year h4, .hc-mail h4 { font-size: 1.6rem; }
.hc-sheet > p { color: var(--hc-soft); }
.hc-chart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.hc-chart > div { border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; min-width: 0; }
.hc-chart > div:nth-child(1) { background: var(--hc-water-light); }
.hc-chart > div:nth-child(2) { background: var(--hc-earth-light); }
.hc-chart > div:nth-child(3) { background: var(--hc-fire-light); }
.hc-chart dt { font-family: var(--hc-mono); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hc-muted); }
.hc-chart dd { margin: 0; font-family: var(--hc-display); font-size: 1.2rem; line-height: 1.2; }
.hc-chart > div > span { font-size: 0.76rem; color: var(--hc-soft); }
.hc-truths { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hc-truths li { padding-left: 14px; border-left: 3px solid var(--hc-fire); font-weight: 600; }
.hc-advice { margin: 0; font-family: var(--hc-display); font-style: italic; font-size: 1.1rem; line-height: 1.35; background: var(--hc-paper); border-radius: 10px; padding: 12px 14px; }

.hc-audio { display: flex; flex-direction: column; gap: 6px; background: var(--hc-paper); border-radius: 10px; padding: 10px 12px; }
.hc-audio-label { font-family: var(--hc-mono); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--hc-muted); }
.hc-audio audio { width: 100%; }
.hc-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.hc-months li { min-width: 0; }
.hc-months details { height: 100%; border: 1px solid var(--hc-line); border-radius: 10px; background: #ffffff; }
.hc-months details[open] { grid-column: 1 / -1; }
.hc-months li:has(details[open]) { grid-column: 1 / -1; }
.hc-months summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.hc-months summary::-webkit-details-marker { display: none; }
.hc-months summary b { font-family: var(--hc-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hc-fire-deep); }
.hc-months summary span { font-size: 0.86rem; line-height: 1.4; color: var(--hc-ink); }
.hc-months summary::after { content: "Lire la suite"; font-size: 0.76rem; font-weight: 700; color: var(--hc-muted); }
.hc-months details[open] summary::after { content: "Refermer"; }
.hc-months details p { padding: 0 12px 12px; font-size: 0.9rem; color: var(--hc-soft); }

.hc-duos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hc-duo { background: #ffffff; border: 1px solid var(--hc-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.hc-duo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hc-duo-name { font-family: var(--hc-display); font-size: 1.3rem; }
.hc-score { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hc-score b { font-family: var(--hc-display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--hc-fire-deep); }
.hc-score span { font-weight: 700; }
.hc-bar { height: 6px; border-radius: 999px; background: var(--hc-paper); overflow: hidden; }
.hc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--hc-water), var(--hc-fire)); }
.hc-duo > p { color: var(--hc-soft); font-size: 0.95rem; }

.hc-mail { background: #ffffff; border: 1px solid var(--hc-line); border-top: 4px solid var(--hc-fire); border-radius: 10px; padding: 14px 16px; font-size: 0.93rem; }
.hc-mail h4 { font-size: 1.3rem; }
.hc-mail p { color: var(--hc-soft); }
.hc-mail p b { color: var(--hc-ink); }

/* The free result appears under the hero. */
.hc-result-zone { scroll-margin-top: 16px; }
.hc-result-zone:not([hidden]) { display: block; padding-block: 28px 48px; }

/* Facts band */
.hc-band { border-bottom: 1px solid var(--hc-line); background: var(--hc-card); }
.hc-band ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; gap: 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .hc-band ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hc-band li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 3px solid var(--hc-fire); }
.hc-band b { font-size: 0.98rem; }
.hc-band span { font-size: 0.86rem; color: var(--hc-soft); line-height: 1.4; }

/* What you receive: one real example per product. */
.hc-intro { padding-block: 80px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hc-intro h2 { font-size: clamp(2.1rem, 4.2vw, 3rem); max-width: 16em; }
.hc-intro p { color: var(--hc-soft); font-size: 1.05rem; max-width: 40em; }
.hc-product { padding-block: 56px; }
.hc-product.alt { background: var(--hc-card); border-block: 1px solid var(--hc-line); }
.hc-product-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .hc-product-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; }
  .hc-product.alt .hc-shot { order: 2; }
}
.hc-shot { display: flex; justify-content: center; min-width: 0; }
.hc-shot-frame { position: relative; width: min(100%, 480px); background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 14px; padding: 24px; box-shadow: 0 24px 50px rgba(22, 21, 27, 0.12); }
.hc-product.alt .hc-shot-frame { background: #ffffff; }
.hc-shot-frame.wide { width: min(100%, 600px); }
.hc-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hc-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.hc-copy h3 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.hc-copy > p { color: var(--hc-soft); font-size: 1.04rem; }
.hc-copy .hc-btn { width: fit-content; }

.hc-more { padding-block: 16px 88px; }
.hc-more-grid { display: grid; gap: 18px; align-items: start; }
@media (min-width: 860px) { .hc-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hc-tile { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.hc-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hc-tile-head strong:first-child, .hc-tile-title { font-family: var(--hc-display); font-weight: 400; font-size: 1.35rem; line-height: 1.15; }
.hc-tile-head strong + strong { color: var(--hc-fire-deep); white-space: nowrap; }
.hc-tile p { color: var(--hc-soft); font-size: 0.95rem; }
.hc-tile .hc-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: auto; }
.hc-tile a { font-weight: 700; }
.hc-tile.dark { background: var(--hc-ink); border-color: var(--hc-ink); color: #f3efe6; }
.hc-tile.dark p { color: #d8d2c4; }
.hc-tile.dark a { color: #f6a06a; }
.hc-mini { background: var(--hc-paper); border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; display: flex; flex-direction: column; gap: 6px; }
.hc-mini { gap: 10px; }
.hc-mini > p { color: var(--hc-soft); font-size: 0.88rem; }
.hc-mini .hc-chart dd { font-size: 1.02rem; }

/* How it works */
.hc-how { background: var(--hc-card); border-block: 1px solid var(--hc-line); padding-block: 80px; }
.hc-how h2 { text-align: center; font-size: clamp(2.1rem, 4vw, 2.8rem); margin-bottom: 36px; }
.hc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
@media (min-width: 860px) { .hc-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hc-steps li { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.hc-step-n { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--hc-display); font-size: 1.5rem; background: var(--hc-ink); color: #ffffff; }
.hc-steps h3 { font-size: 1.45rem; }
.hc-steps p { color: var(--hc-soft); }
.hc-steps .hc-chart { width: 100%; }
.hc-typed { font-family: var(--hc-mono); font-size: 0.95rem; background: #ffffff; border: 1.5px dashed var(--hc-line-strong); padding: 6px 12px; border-radius: 8px; }
.hc-verse { font-family: var(--hc-display); font-style: italic; font-size: 1.08rem; border-left: 3px solid var(--hc-fire); padding-left: 12px; }

/* Trust, guides, questions */
.hc-trust { padding-block: 64px; }
.hc-trust-grid { display: grid; gap: 28px; }
@media (min-width: 860px) { .hc-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.hc-trust h2 { font-size: 1.9rem; margin-bottom: 10px; }
.hc-trust p { color: var(--hc-soft); }
.hc-guides { padding-block: 0 24px; }
.hc-guides ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hc-guides a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--hc-card); border: 1px solid var(--hc-line); text-decoration: none; font-weight: 600; font-size: 0.93rem; color: var(--hc-ink); }
.hc-faq { padding-block: 40px 72px; }
.hc-faq .hc-wrap { max-width: 860px; }
.hc-faq h2 { font-size: clamp(2.1rem, 4vw, 2.8rem); margin-bottom: 20px; }
.hc-faq details { border-top: 1px solid var(--hc-line-strong); padding-block: 18px; }
.hc-faq details:last-child { border-bottom: 1px solid var(--hc-line-strong); }
.hc-faq summary { font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.hc-faq details p { margin-top: 10px; color: var(--hc-soft); }

/* Free result */
.hc-res { display: grid; gap: 22px; }
@media (min-width: 900px) { .hc-res { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.hc-res-day, .hc-res-offer { padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hc-res-day { border-top: 5px solid var(--hc-ink); }
.hc-res-offer { border: 2px solid var(--hc-fire); }
.hc-res h2 { font-size: 2rem; display: flex; align-items: center; gap: 10px; }
.hc-glyph { font-family: "Segoe UI Symbol", "Apple Symbols", var(--hc-text); font-size: 1.7rem; }
.hc-res-text { font-size: 1.12rem; line-height: 1.55; }
.hc-res-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hc-res-facts > div { background: var(--hc-paper); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; min-width: 0; }
.hc-res-facts b { font-family: var(--hc-display); font-weight: 400; font-size: 1.25rem; overflow-wrap: anywhere; }
.hc-res-facts span { font-size: 0.78rem; color: var(--hc-soft); line-height: 1.35; }
.hc-table summary { cursor: pointer; font-weight: 700; }
.hc-table-scroll { overflow-x: auto; margin-top: 10px; }
.hc-table table { border-collapse: collapse; font-size: 0.78rem; width: 100%; }
.hc-table th, .hc-table td { padding: 4px 3px; text-align: center; border-bottom: 1px solid var(--hc-line); }
.hc-table tr.mine { background: var(--hc-fire-light); font-weight: 700; }
.hc-res-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hc-res-sample { position: relative; margin-top: 8px; background: var(--hc-paper); border-radius: 12px; padding: 22px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.hc-res-sample .hc-year h4 { font-size: 1.2rem; }
.hc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--hc-line); border-radius: 10px; overflow: hidden; font-size: 0.86rem; }
.hc-compare > div { padding: 8px 10px; border-top: 1px solid var(--hc-line); }
.hc-compare > div:nth-child(-n + 2) { border-top: 0; font-weight: 700; }
.hc-compare > div:nth-child(1) { background: #ece6d9; }
.hc-compare > div:nth-child(2) { background: var(--hc-ink); color: #ffffff; }
.hc-compare .no { color: var(--hc-muted); }
.hc-res-offer .hc-btn { width: 100%; }
.hc-res-three { display: flex; flex-direction: column; gap: 3px; font-size: 0.86rem; color: var(--hc-soft); }
.hc-res-small { display: flex; gap: 14px; align-items: center; justify-content: space-between; background: var(--hc-card); border: 1px solid var(--hc-line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--hc-ink); }
.hc .hc-res-small { color: var(--hc-ink); }
.hc-res-small:hover { border-color: var(--hc-fire); }
.hc-res-small strong.price { font-family: var(--hc-display); font-weight: 400; font-size: 1.2rem; color: var(--hc-fire-deep); white-space: nowrap; }

/* Teasers on the product pages */
.hc-teaser { font-size: 15px; }
.hc-teaser .hc-sheet h4, .hc-teaser .hc-year h4 { font-size: 1.35rem; }
.teaser-carte .hc-months { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

@media (max-width: 520px) {
  .hc { font-size: 15px; }
  .hc-hero { padding-block: 14px 40px; }
  .hc-hero-text { gap: 12px; }
  .hc-hero h1 { font-size: 2.15rem; }
  .hc-lead { font-size: 0.98rem; }
  .hc-form { padding: 12px; border-radius: 12px; gap: 10px; }
  .hc-form legend { margin-bottom: 8px; }
  .hc-signs { gap: 5px; }
  .hc-sign span { min-height: 50px; font-size: 0.72rem; border-radius: 8px; }
  .hc-sign i { font-size: 1.15rem; }
  .hc-show-sheet, .hc-shot-frame { padding: 16px; }
  .hc-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-product { padding-block: 40px; }
  .hc-copy .hc-btn { width: 100%; }
  .hc-intro { padding-block: 56px 12px; }
  .hc-chart dd { font-size: 1.02rem; }
}

/* Every other page of the site (offer, pack, result, account): this file is only ever loaded by
   L'horoscope cash (horoscope/page_head.html), so the shared classes take the site's look here. */
body { background: #f3efe6; font-family: "Manrope Horoscope", system-ui, sans-serif; color: #16151b; }
h1, h2, h3, .brand { font-family: "DM Serif Horoscope", Georgia, serif; font-weight: 400; }
.topbar { max-width: 1200px; }
.brand { font-size: 1.25rem; color: #16151b; }
.brand-emoji {
  font-size: 0; width: 32px; height: 32px; flex: 0 0 auto;
  background: url("logo.svg") center / contain no-repeat;
}
.topnav a, .footer { color: #45434d; }
.card { border: 1px solid #ddd6c8; box-shadow: 0 16px 34px rgba(22, 21, 27, 0.06); }
.badge { background: #fbe6d9; color: #8f300a; }
.offer-price b, .price { font-family: "DM Serif Horoscope", Georgia, serif; font-weight: 400; color: #8f300a; }
.btn { border-radius: 10px; }
input[type="text"], input[type="email"], input[type="date"], input[type="time"], select, textarea { background: #fffdf8; border-color: #c9c0ae; }