/* Страница «Прогноз на день» (/prognoz-na-den/). Префикс классов cdf-
   Исходник вёрстки: pen/prognoz-na-den-handoff-2026-09-12/forecast.css
   Отличия от исходника:
   - @font-face для Inter убраны: шрифт объявлен глобально в common.css;
   - PT Serif объявлен с латинским подмножеством, как на /produkty/, иначе
     латиница в заголовках падает на Georgia и ломает утверждённую композицию;
   - правила .cdf-preview убраны: этот класс нужен только автономным макетам;
   - ссылкам поднята специфичность, иначе их перекрашивает colors.css,
     который грузится асинхронно и применяется позже этого файла;
   - в конце добавлены стрелки переключения месяцев и блок «Статьи по теме». */

.cdf-page,
.cdf-page * {
  box-sizing: border-box;
}

/* PT Serif — тот же сериф, что на заголовках /produkty/, самохост woff2 */
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Regular-cyrillic.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Regular-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Italic-cyrillic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "PT Serif";
    src: url(/local/templates/furniture_gray/assets/fonts/PTSerif-Italic-latin.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.cdf-page {
  --cdf-ink: #181821;
  --cdf-muted: #676775;
  --cdf-blue: #476eea;
  --cdf-blue-soft: #eaf0ff;
  --cdf-violet: #8858d8;
  --cdf-violet-soft: #f5efff;
  --cdf-green: #218863;
  --cdf-green-soft: #eaf8f1;
  --cdf-rose: #c24b6e;
  --cdf-rose-soft: #fff0f4;
  --cdf-line: #e7e5ee;
  --cdf-surface: #ffffff;
  --cdf-navy: #142f86;
  --cdf-orange: #ff7b19;
  color: var(--cdf-ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.cdf-page__container {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}

.cdf-page__hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 32px;
  background:
    radial-gradient(circle at 86% 15%, rgba(219, 192, 255, 0.78), transparent 24rem),
    radial-gradient(circle at 9% 88%, rgba(174, 205, 255, 0.78), transparent 28rem),
    #f7f7ff;
}

.cdf-page__zodiac {
  position: absolute;
  z-index: 0;
  top: 18px;
  right: max(-120px, calc((100vw - 1200px) / 2 - 120px));
  width: min(30vw, 380px);
  height: auto;
  opacity: 0.76;
  pointer-events: none;
}

.cdf-page__hero::after {
  position: absolute;
  right: -88px;
  top: -110px;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(71, 110, 234, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 58px rgba(71, 110, 234, 0.05), 0 0 0 116px rgba(136, 88, 216, 0.04);
  content: "";
  pointer-events: none;
}

.cdf-page__eyebrow {
  margin: 0 0 12px;
  color: var(--cdf-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-page__title {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(42px, 5.45vw, 72px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.cdf-page__title span {
  display: block;
  margin-top: 8px;
  padding-bottom: 0.08em;
  background: linear-gradient(92deg, var(--cdf-blue), var(--cdf-violet));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.cdf-page__byline {
  margin: 24px 0 40px;
  color: var(--cdf-muted);
  font-size: 15px;
}

.cdf-pending-preview .cdf-page__hero {
  padding-bottom: 52px;
}

.cdf-pending-preview .cdf-page__title {
  max-width: 820px;
  font-size: clamp(42px, 5vw, 64px);
}

.cdf-pending-preview .cdf-page__zodiac {
  top: 12px;
  right: max(-90px, calc((100vw - 1200px) / 2 - 80px));
  width: min(27vw, 340px);
  opacity: 0.58;
}

.cdf-date-nav {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 20px 50px rgba(42, 42, 76, 0.08);
}

.cdf-date-nav__item {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 16px;
  color: var(--cdf-ink);
  text-align: center;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

a.cdf-date-nav__item:hover {
  border-color: #d9d6e5;
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

a.cdf-date-nav__item:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.35);
  outline-offset: 2px;
}

.cdf-date-nav__item--current {
  background: var(--cdf-ink);
  color: #ffffff;
}

.cdf-date-nav__direction {
  color: var(--cdf-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cdf-date-nav__item--current .cdf-date-nav__direction {
  color: #bfc8ff;
}

.cdf-date-nav__date {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.cdf-forecast {
  position: relative;
  overflow: hidden;
  padding: 76px 0 56px;
  background:
    radial-gradient(circle at 5% 12%, rgba(197, 218, 255, 0.42), transparent 28rem),
    radial-gradient(circle at 96% 83%, rgba(230, 211, 255, 0.48), transparent 30rem),
    #fbfbfe;
}

.cdf-forecast__heading {
  margin-bottom: 36px;
}

.cdf-forecast__heading h2 {
  max-width: 680px;
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.cdf-forecast__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.88fr);
  gap: 22px;
  align-items: start;
}

.cdf-forecast__rail {
  display: grid;
  gap: 16px;
}

.cdf-luck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  align-items: center;
  gap: 18px;
  min-height: 174px;
  overflow: hidden;
  padding: 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 12%, rgba(186, 166, 255, 0.5), transparent 9rem),
    linear-gradient(135deg, #493bb2 0%, #6550d1 58%, #8065df 100%);
  box-shadow: 0 18px 42px rgba(73, 59, 178, 0.2);
  color: #ffffff;
}

.cdf-luck::after {
  position: absolute;
  right: 30%;
  bottom: -43px;
  width: 110px;
  height: 110px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  content: "";
}

.cdf-luck__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cdf-luck__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdf-luck__eyebrow span {
  color: #ffb08d;
}

.cdf-luck__value {
  margin-top: 8px;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cdf-luck__note {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.cdf-luck__meter {
  position: relative;
  z-index: 1;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cdf-orange) calc(var(--cdf-luck) * 1%), rgba(255, 255, 255, 0.15) 0);
}

.cdf-luck__meter::after {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #4436a4;
  content: "";
}

.cdf-luck__meter-value {
  position: absolute;
  z-index: 1;
  font-size: 0;
}

.cdf-luck__meter-value::after {
  color: #ffffff;
  content: "✦";
  font-size: 28px;
}

.cdf-forecast__story {
  position: relative;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--cdf-line);
  border-radius: 28px;
  background: var(--cdf-surface);
  box-shadow: 0 22px 70px rgba(38, 38, 65, 0.07);
}

.cdf-forecast__copy {
  padding: clamp(30px, 4vw, 50px);
}

.cdf-forecast__copy p {
  margin: 0;
  color: #353440;
  font-size: 17px;
  line-height: 1.7;
}

.cdf-forecast__copy p + p {
  margin-top: 1em;
}

.cdf-advice__card {
  padding: 24px;
  border: 1px solid rgba(49, 48, 60, 0.06);
  border-radius: 22px;
}

.cdf-advice__card--do {
  background: var(--cdf-green-soft);
}

.cdf-advice__card--avoid {
  background: var(--cdf-rose-soft);
}

.cdf-advice__heading {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.cdf-advice__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.cdf-advice__card--do .cdf-advice__icon {
  color: var(--cdf-green);
}

.cdf-advice__card--avoid .cdf-advice__icon {
  color: var(--cdf-rose);
}

.cdf-advice__heading h3 {
  margin: 2px 0 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.15;
}

.cdf-advice__card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cdf-advice__card li {
  position: relative;
  padding: 11px 14px 11px 32px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: #34343e;
  font-size: 14px;
  line-height: 1.45;
}

.cdf-advice__card li::before {
  position: absolute;
  top: calc(11px + 0.725em);
  left: 14px;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.5;
}

.cdf-advice__card li + li {
  margin-top: 7px;
}

.cdf-ai {
  padding: 0 0 104px;
  background: #fbfbfe;
}

.cdf-ai__banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  min-height: 390px;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 15%, rgba(107, 150, 255, 0.5), transparent 18rem),
    radial-gradient(circle at 64% 110%, rgba(151, 103, 225, 0.5), transparent 20rem),
    var(--cdf-navy);
  box-shadow: 0 28px 80px rgba(20, 47, 134, 0.18);
  color: #ffffff;
}

.cdf-ai__content {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(40px, 6vw, 68px);
}

.cdf-ai__eyebrow {
  margin: 0 0 18px;
  color: #cfdbff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cdf-ai__eyebrow span {
  color: #ffad70;
}

.cdf-ai__content h2 {
  max-width: 680px;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.cdf-ai__content h2 span {
  display: block;
  margin-top: 7px;
  color: #d8c8ff;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.cdf-ai__availability {
  max-width: 590px;
  margin: 22px 0 0;
  color: #cbd8ff;
  font-size: 16px;
  line-height: 1.55;
}

.cdf-ai__bonus {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.cdf-ai__bonus span {
  color: #f1a095;
}

.cdf-ai__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.cdf-ai__button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.cdf-ai__button span {
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.cdf-ai__button--primary {
  background: var(--cdf-orange);
}

.cdf-ai__button--secondary {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(255, 255, 255, 0.08);
}

.cdf-ai__button:hover {
  transform: translateY(-2px);
}

.cdf-ai__button--primary:hover {
  background: #ff8b37;
}

.cdf-ai__button--secondary:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.14);
}

.cdf-ai__button:focus-visible {
  outline: 3px solid rgba(255, 186, 135, 0.72);
  outline-offset: 3px;
}

.cdf-ai__visual {
  position: relative;
  min-height: 390px;
}

.cdf-ai__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 370px;
  height: 370px;
  border: 2px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  transform: translate(-40%, -50%);
}

.cdf-ai__orbit::before,
.cdf-ai__orbit::after {
  position: absolute;
  border: 1px solid rgba(184, 203, 255, 0.2);
  border-radius: 50%;
  content: "";
}

.cdf-ai__orbit::before {
  inset: 38px;
}

.cdf-ai__orbit::after {
  inset: 82px;
}

.cdf-ai__dialogue {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(390px, calc(100% - 28px));
  flex-direction: column;
  gap: 17px;
  transform: translate(-54%, -50%);
}

.cdf-ai__message {
  position: relative;
  box-shadow: 0 24px 54px rgba(3, 13, 51, 0.2);
}

.cdf-ai__message--question {
  align-self: flex-end;
  width: 82%;
  padding: 16px 18px 17px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px 22px 7px 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(205, 193, 255, 0.1));
  backdrop-filter: blur(9px);
}

.cdf-ai__message-label {
  display: block;
  margin-bottom: 11px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdf-ai__question-copy {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.cdf-ai__message--answer {
  align-self: flex-start;
  width: 100%;
  padding: 20px 21px 19px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 26px 26px 26px 8px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.96), rgba(235, 228, 255, 0.91));
  color: var(--cdf-navy);
  box-shadow: 0 28px 64px rgba(3, 13, 51, 0.28);
}

.cdf-ai__message-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #485b98;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cdf-ai__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff9b55, #d5b6ff);
  box-shadow: 0 8px 20px rgba(57, 46, 141, 0.2);
  color: #ffffff;
  font-size: 15px;
}

.cdf-ai__message-copy {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.45;
}

.cdf-ai__message-copy > span {
  display: block;
  margin-top: 10px;
}

.cdf-ai__continuation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 10px;
  border: 1px solid rgba(45, 68, 145, 0.13);
  border-radius: 999px;
  background: rgba(57, 78, 154, 0.07);
  color: #5365a0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cdf-ai__continuation > span {
  font-size: 14px;
  line-height: 1;
}

.cdf-ai__spark {
  position: absolute;
  z-index: 2;
  color: #ffb47c;
  line-height: 1;
}

.cdf-ai__spark--one {
  top: 56px;
  left: 7%;
  font-size: 29px;
}

.cdf-ai__spark--two {
  right: 8%;
  bottom: 52px;
  color: #c5b3ff;
  font-size: 20px;
}

.cdf-compare {
  position: relative;
  overflow: hidden;
  padding: 0 0 112px;
  background: #fbfbfe;
}

.cdf-compare::before {
  position: absolute;
  bottom: -190px;
  left: -170px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(198, 218, 255, 0.4);
  filter: blur(80px);
  content: "";
  pointer-events: none;
}

.cdf-compare::after {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(251, 251, 254, 0), #fbfbfe 92%);
  content: "";
  pointer-events: none;
}

.cdf-compare__header {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin-bottom: 40px;
}

.cdf-compare__eyebrow {
  margin: 0 0 13px;
  color: var(--cdf-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-compare__header h2 {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.cdf-compare__header h2 span {
  display: block;
  color: #6859df;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: -0.03em;
}

.cdf-compare__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 22px;
}

.cdf-compare__card {
  position: relative;
  display: flex;
  min-height: 400px;
  overflow: hidden;
  flex-direction: column;
  padding: clamp(30px, 4vw, 46px);
  border-radius: 30px;
}

.cdf-compare__card::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: clamp(30px, 4vw, 46px);
  width: 116px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #6e91f2, #a9c5ff);
  content: "";
}

.cdf-compare__card--general {
  border: 1px solid #d9e2f7;
  background:
    radial-gradient(circle at 92% 12%, rgba(168, 198, 255, 0.38), transparent 15rem),
    linear-gradient(145deg, #ffffff, #edf3ff);
  box-shadow: 0 24px 70px rgba(48, 73, 144, 0.09);
}

.cdf-compare__card--personal {
  background:
    radial-gradient(circle at 91% 2%, rgba(211, 180, 255, 0.4), transparent 17rem),
    radial-gradient(circle at 10% 110%, rgba(83, 127, 255, 0.42), transparent 19rem),
    #1a3288;
  box-shadow: 0 28px 76px rgba(20, 47, 134, 0.18);
  color: #ffffff;
}

.cdf-compare__card--personal::before {
  background: linear-gradient(90deg, #ff9d62, #d7bdff);
}

.cdf-compare__card--personal::after {
  position: absolute;
  right: -86px;
  bottom: -106px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(255, 255, 255, 0.035), 0 0 0 88px rgba(199, 183, 255, 0.035);
  content: "";
  pointer-events: none;
}

.cdf-compare__card-top {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 90px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.cdf-compare__label {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(71, 110, 234, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #6171a2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cdf-compare__card--personal .cdf-compare__label {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #cdd8ff;
}

.cdf-compare__star-map {
  position: absolute;
  z-index: 0;
  top: 92px;
  right: -18px;
  width: min(54%, 300px);
  height: auto;
  color: #577be5;
  opacity: 0.14;
  pointer-events: none;
}

.cdf-compare__card--personal .cdf-compare__star-map {
  color: #ded5ff;
  opacity: 0.16;
  transform: scaleX(-1);
}

.cdf-compare__star-map path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.cdf-compare__star-map circle {
  fill: currentColor;
}

.cdf-compare__symbol {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  place-items: center;
  border: 1px solid rgba(71, 110, 234, 0.2);
  border-radius: 50%;
}

.cdf-compare__symbol::before,
.cdf-compare__symbol::after {
  position: absolute;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.18;
}

.cdf-compare__symbol::before {
  inset: 10px;
}

.cdf-compare__symbol::after {
  inset: 21px;
}

.cdf-compare__symbol > span {
  position: relative;
  z-index: 1;
  color: var(--cdf-blue);
  font-size: 20px;
}

.cdf-compare__symbol--personal {
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.cdf-compare__symbol--personal > span {
  color: #ffae75;
}

.cdf-compare__card h3 {
  position: relative;
  z-index: 1;
  min-height: 50px;
  margin: 20px 0 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.cdf-compare__copy {
  position: relative;
  z-index: 1;
  min-height: 58px;
  max-width: 520px;
  margin: 16px 0 18px;
  color: #4f5364;
  font-size: 16px;
  line-height: 1.65;
}

.cdf-compare__card--personal .cdf-compare__copy {
  color: #e1e7ff;
}

.cdf-compare__range {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 86px;
  grid-template-columns: minmax(116px, 0.72fr) minmax(0, 1fr);
  grid-template-areas:
    "badge copy"
    "value copy";
  align-items: center;
  gap: 3px 16px;
  margin: 0 0 18px;
  padding: 13px 16px 14px;
  border: 1px solid rgba(71, 110, 234, 0.13);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 26px rgba(48, 73, 144, 0.06);
}

.cdf-compare__range-badge {
  grid-area: badge;
  align-self: end;
  color: #6573a0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-compare__range strong {
  grid-area: value;
  align-self: start;
  color: #294cae;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.cdf-compare__range-copy {
  grid-area: copy;
  display: flex;
  min-height: 44px;
  align-self: stretch;
  align-items: center;
  padding-left: 16px;
  border-left: 1px solid rgba(71, 110, 234, 0.14);
  color: #626b8c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.cdf-compare__range--personal {
  border-color: rgba(255, 177, 121, 0.44);
  background: linear-gradient(110deg, rgba(255, 143, 77, 0.2), rgba(222, 205, 255, 0.12));
  box-shadow: inset 3px 0 0 #ff9f64, 0 14px 32px rgba(3, 13, 51, 0.14);
}

.cdf-compare__range--personal .cdf-compare__range-badge {
  color: #ffc49e;
}

.cdf-compare__range--personal strong {
  color: #ffffff;
}

.cdf-compare__range--personal .cdf-compare__range-copy {
  border-left-color: rgba(255, 255, 255, 0.18);
  color: #e3e8ff;
}

.cdf-compare__tags {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}

.cdf-compare__tags span {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid rgba(71, 110, 234, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #53608d;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.cdf-compare__tags span::before {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #7f9df1;
  content: "";
}

.cdf-compare__card--personal .cdf-compare__tags span {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.cdf-compare__card--personal .cdf-compare__tags span::before {
  background: #ffae75;
}

.cdf-compare__data {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 0 0;
  color: #667098;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
}

.cdf-compare__data-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  background: #dfe8ff;
}

.cdf-compare__card--personal .cdf-compare__data {
  color: #cdd8ff;
}

.cdf-compare__card--personal .cdf-compare__data-icon {
  background: #ffae75;
}

.cdf-compare__data-icon::before,
.cdf-compare__data-icon--plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1.5px;
  border-radius: 999px;
  background: #365dcc;
  content: "";
  transform: translate(-50%, -50%);
}

.cdf-compare__data-icon--plus::before,
.cdf-compare__data-icon--plus::after {
  background: #1a3288;
}

.cdf-compare__data-icon--plus::after {
  width: 1.5px;
  height: 8px;
}

.cdf-plus {
  padding: 0 0 112px;
  background: #fbfbfe;
}

.cdf-plus__banner {
  position: relative;
  display: grid;
  min-height: 560px;
  overflow: hidden;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  border: 1px solid #ddd9ed;
  border-radius: 32px;
  background:
    radial-gradient(circle at 3% 95%, rgba(204, 221, 255, 0.78), transparent 24rem),
    radial-gradient(circle at 91% 4%, rgba(239, 195, 209, 0.8), transparent 24rem),
    linear-gradient(135deg, #f8f9ff, #f3edff 56%, #fff5f0);
  box-shadow: 0 28px 80px rgba(35, 48, 105, 0.11);
}

.cdf-plus__content {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(44px, 6vw, 70px) clamp(42px, 6vw, 72px) clamp(44px, 6vw, 70px) clamp(26px, 4vw, 48px);
}

.cdf-plus__eyebrow {
  margin: 0 0 17px;
  color: #5367ae;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-plus__eyebrow span {
  color: #ff8654;
}

.cdf-plus__content h2 {
  max-width: 650px;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.cdf-plus__content h2 span {
  display: block;
  margin-top: 7px;
  color: #6859df;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.cdf-plus__copy {
  margin: 22px 0 0;
  color: #5f6272;
  font-size: 16px;
  line-height: 1.55;
}

.cdf-plus__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.cdf-plus__bonus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 126, 76, 0.22);
  border-radius: 999px;
  background: rgba(255, 133, 85, 0.09);
  color: #9a4f38;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.cdf-plus__bonus span {
  color: #ff7b4c;
}

.cdf-plus__button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 15px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2948ad 0%, #6352d7 100%);
  box-shadow: 0 14px 30px rgba(54, 65, 169, 0.24);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.cdf-plus__button:hover {
  background: linear-gradient(135deg, #213e9e 0%, #5543ca 100%);
  transform: translateY(-2px);
}

.cdf-plus__button:focus-visible {
  outline: 3px solid rgba(104, 89, 223, 0.35);
  outline-offset: 3px;
}

.cdf-plus__button > span {
  color: #ffad79;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}

.cdf-plus__visual {
  position: relative;
  min-height: 560px;
}

.cdf-plus__orbit {
  position: absolute;
  border: 1px solid rgba(76, 103, 194, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.cdf-plus__orbit--outer {
  bottom: -138px;
  left: -116px;
  width: 430px;
  height: 430px;
  box-shadow: 0 0 0 58px rgba(91, 119, 211, 0.035);
}

.cdf-plus__orbit--inner {
  top: 38px;
  right: -62px;
  width: 190px;
  height: 190px;
  box-shadow: 0 0 0 34px rgba(137, 96, 218, 0.035);
}

.cdf-plus__spark {
  position: absolute;
  z-index: 2;
  top: 48px;
  left: 10%;
  color: #ff9665;
  font-size: 26px;
  line-height: 1;
}

.cdf-plus__panel {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 50px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 30px 70px rgba(41, 50, 105, 0.16);
  backdrop-filter: blur(12px);
  transform: translate(-45%, -50%) rotate(-1.25deg);
}

.cdf-plus__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: #596798;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-plus__panel-head strong {
  padding: 6px 9px;
  border-radius: 999px;
  background: #ece7ff;
  color: #6859df;
  font-size: 10px;
}

.cdf-plus__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.cdf-plus__timeline::before {
  position: absolute;
  top: 7px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, #ff9564, #9c8aea);
  content: "";
}

.cdf-plus__timeline-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #7b7d8d;
  text-align: center;
}

.cdf-plus__timeline-item i {
  width: 15px;
  height: 15px;
  border: 4px solid #f4f2ff;
  border-radius: 50%;
  background: #a79ae6;
  box-shadow: 0 0 0 1px rgba(104, 89, 223, 0.22);
}

.cdf-plus__timeline-item--active i {
  background: #ff8d5b;
  box-shadow: 0 0 0 1px rgba(255, 125, 74, 0.3), 0 0 0 5px rgba(255, 141, 91, 0.09);
}

.cdf-plus__timeline-item small {
  margin-top: 9px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
}

.cdf-plus__preview {
  margin-top: 24px;
  padding: 18px;
  border-radius: 19px;
  background:
    radial-gradient(circle at 94% 4%, rgba(205, 185, 255, 0.3), transparent 8rem),
    #213e9b;
  box-shadow: 0 16px 34px rgba(29, 58, 147, 0.18);
}

.cdf-plus__preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cdf-plus__preview-head {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
}

.cdf-plus__preview-head > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff925f, #c9b7ff);
  font-size: 13px;
}

.cdf-plus__preview-head > div {
  display: grid;
  gap: 2px;
}

.cdf-plus__preview-head strong {
  font-size: 12px;
  line-height: 1.2;
}

.cdf-plus__preview-head small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cdf-plus__potential {
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.cdf-plus__preview-copy {
  display: -webkit-box;
  overflow: hidden;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cdf-plus__event {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.cdf-plus__event span {
  color: #ffbf9d;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cdf-plus__event strong {
  color: #ffffff;
  font-size: 10px;
  line-height: 1.35;
}

.cdf-plus__trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.cdf-plus__trend {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 11px;
  background: rgba(189, 204, 255, 0.12);
}

.cdf-plus__trend span {
  color: #c8d4ff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cdf-plus__trend strong {
  color: #ffffff;
  font-size: 9px;
  line-height: 1.3;
}

.cdf-seo {
  position: relative;
  overflow: hidden;
  padding: 88px 0 100px;
  background:
    radial-gradient(circle at 4% 16%, rgba(201, 217, 255, 0.34), transparent 25rem),
    radial-gradient(circle at 96% 84%, rgba(231, 211, 255, 0.3), transparent 24rem),
    #f7f8fd;
}

.cdf-seo::before {
  position: absolute;
  top: 88px;
  right: -150px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(104, 89, 223, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(104, 89, 223, 0.025);
  content: "";
  pointer-events: none;
}

.cdf-seo__shell {
  position: relative;
  z-index: 1;
}

.cdf-seo__header {
  max-width: 1040px;
  margin-bottom: 30px;
}

.cdf-seo__header h2 {
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.cdf-seo__header > p {
  max-width: 920px;
  margin: 18px 0 0;
  color: #626575;
  font-size: 17px;
  line-height: 1.65;
}

.cdf-seo__layout {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.cdf-seo__articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.cdf-seo__article {
  position: relative;
  min-height: 100%;
  padding: 34px 38px 38px;
  border: 1px solid rgba(213, 218, 237, 0.92);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(224, 215, 255, 0.25), transparent 15rem),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 52px rgba(43, 54, 107, 0.065);
}

.cdf-seo__article:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0, rgba(255, 220, 218, 0.28), transparent 15rem),
    rgba(255, 255, 255, 0.84);
}

.cdf-seo__article::before {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8e5b, #8465e6);
  box-shadow: 0 0 0 5px rgba(111, 92, 220, 0.07);
  content: "";
}

.cdf-seo__article h3 {
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.cdf-seo__article > p:last-child {
  margin: 15px 0 0;
  color: #666978;
  font-size: 15px;
  line-height: 1.7;
}

.cdf-seo__aside {
  min-width: 0;
}

.cdf-seo__links {
  padding: 10px;
  border: 1px solid rgba(215, 220, 239, 0.94);
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(237, 243, 255, 0.9), rgba(248, 242, 255, 0.9) 54%, rgba(255, 241, 237, 0.86)),
    rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 42px rgba(43, 54, 107, 0.055);
}

.cdf-seo__links ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cdf-seo__link-row {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px 13px 16px;
  border: 1px solid rgba(220, 225, 242, 0.96);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.82);
  color: #324987;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

.cdf-seo__link-row > span:last-child {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 50%;
  background: rgba(112, 91, 220, 0.09);
  color: #7658d4;
  font-size: 16px;
}

a.cdf-seo__link-row {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

a.cdf-seo__link-row:hover {
  border-color: #c7d2f1;
  background: #fff;
  transform: translateY(-1px);
}

a.cdf-seo__link-row:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.28);
  outline-offset: 2px;
}

.cdf-calendar-trigger {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

.cdf-calendar-trigger__button {
  display: inline-grid;
  min-height: 48px;
  align-items: center;
  grid-template-columns: 21px auto auto 16px;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(71, 110, 234, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 26px rgba(44, 69, 144, 0.09);
  color: #334a94;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.cdf-calendar-trigger__button:hover {
  border-color: rgba(71, 110, 234, 0.38);
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.cdf-calendar-trigger__button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.cdf-calendar-trigger__button small {
  padding-left: 10px;
  border-left: 1px solid #dce2f4;
  color: #777c91;
  font-size: 11px;
  font-weight: 600;
}

.cdf-calendar-trigger__arrow {
  color: #795bd1;
  font-size: 15px;
  transition: transform 160ms ease;
}

.cdf-calendar-trigger__button[aria-expanded="true"] .cdf-calendar-trigger__arrow {
  transform: rotate(180deg);
}

.cdf-calendar {
  position: fixed;
  inset: 0;
  width: min(760px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 40px);
  margin: auto;
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(190, 213, 255, 0.52), transparent 20rem),
    radial-gradient(circle at 100% 100%, rgba(226, 204, 255, 0.5), transparent 21rem),
    #f8f8ff;
  box-shadow: 0 34px 100px rgba(24, 35, 89, 0.28);
  color: var(--cdf-ink);
}

.cdf-calendar::backdrop {
  background: rgba(18, 25, 61, 0.42);
  backdrop-filter: blur(7px);
}

.cdf-calendar__shell {
  position: relative;
  padding: 28px;
}

.cdf-calendar__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.cdf-calendar__eyebrow {
  margin: 0 0 6px;
  color: var(--cdf-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-calendar__header h2 {
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.cdf-calendar__close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid #dce1f0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: #5d6276;
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.cdf-calendar__card {
  padding: 22px;
  border: 1px solid #dfe4f3;
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(42, 57, 116, 0.08);
}

.cdf-calendar__toolbar {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e9f2;
}

.cdf-calendar__toolbar time {
  color: var(--cdf-ink);
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 27px;
  line-height: 1.1;
  text-align: center;
}

.cdf-calendar-trigger__button:focus-visible,
.cdf-calendar__close:focus-visible,
.cdf-calendar__days a:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.32);
  outline-offset: 3px;
}

.cdf-calendar__weekdays,
.cdf-calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.cdf-calendar__weekdays {
  margin-top: 20px;
}

.cdf-calendar__weekdays span {
  color: #878a98;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.cdf-calendar__days {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

/* месяцы лежат в разметке все сразу, видим только текущий.
   Без этого правила display: grid выше перебивает атрибут hidden
   и календарь разворачивается в ленту из двенадцати сеток */
.cdf-calendar__days[hidden] {
  display: none;
}

.cdf-calendar__days li {
  min-width: 0;
}

.cdf-calendar__days a,
.cdf-calendar__days time,
.cdf-calendar__days li > span {
  display: grid;
  min-height: 48px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 13px;
  color: #393b48;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.cdf-calendar__days a {
  background: rgba(244, 247, 255, 0.86);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.cdf-calendar__days a:hover {
  border-color: #cbd5f4;
  background: #edf2ff;
  color: #2948ad;
  transform: translateY(-2px);
}

.cdf-calendar__weekend a {
  color: #7758bd;
}

.cdf-calendar__day--disabled > span {
  background: rgba(247, 247, 251, 0.58);
  color: #b8bac5;
  cursor: default;
}

.cdf-calendar__days time[aria-current="date"] {
  position: relative;
  background: linear-gradient(135deg, #2948ad, #6b55d9);
  box-shadow: 0 9px 22px rgba(64, 69, 177, 0.22);
  color: #ffffff;
}

.cdf-calendar__days time[aria-current="date"]::after {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffac79;
  content: "";
}

.cdf-calendar__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: #707382;
  font-size: 11px;
  line-height: 1.4;
}

.cdf-calendar__note > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2948ad, #6b55d9);
  box-shadow: 0 0 0 3px rgba(91, 78, 205, 0.1);
}

.cdf-pending {
  padding: 72px 0 112px;
  background: #fbfbfe;
}

.cdf-pending__card {
  position: relative;
  display: grid;
  min-height: 450px;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  border: 1px solid #dddff0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 2% 100%, rgba(187, 214, 255, 0.48), transparent 24rem),
    radial-gradient(circle at 96% 4%, rgba(239, 199, 220, 0.62), transparent 24rem),
    linear-gradient(135deg, #f9faff, #f3efff 58%, #fff6f1);
  box-shadow: 0 28px 80px rgba(38, 49, 106, 0.11);
}

.cdf-pending__content {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: clamp(42px, 6vw, 70px);
}

.cdf-pending__eyebrow {
  margin: 0 0 15px;
  color: #5267ad;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-pending__eyebrow span {
  color: #ff8654;
}

.cdf-pending__content h2 {
  max-width: 690px;
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  font-size: clamp(38px, 4.7vw, 58px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.cdf-pending__content h2 span {
  display: block;
  margin-top: 10px;
  color: #6859df;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.cdf-pending__copy {
  max-width: 590px;
  margin: 22px 0 0;
  color: #5f6272;
  font-size: 16px;
  line-height: 1.6;
}

.cdf-pending__actions {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}

.cdf-pending__button {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 15px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2948ad 0%, #6352d7 100%);
  box-shadow: 0 14px 30px rgba(54, 65, 169, 0.24);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.cdf-pending__button:hover {
  background: linear-gradient(135deg, #213e9e 0%, #5543ca 100%);
  transform: translateY(-2px);
}

.cdf-pending__button:focus-visible {
  outline: 3px solid rgba(104, 89, 223, 0.35);
  outline-offset: 3px;
}

.cdf-pending__button > span {
  color: #ffad79;
  font-size: 19px;
  line-height: 1;
}

.cdf-pending__bonus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(255, 126, 76, 0.22);
  border-radius: 999px;
  background: rgba(255, 133, 85, 0.09);
  color: #9a4f38;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.cdf-pending__bonus span {
  color: #ff7b4c;
}

.cdf-pending__visual {
  position: relative;
  min-height: 450px;
}

.cdf-pending__orbit {
  position: absolute;
  border: 1px solid rgba(82, 104, 190, 0.13);
  border-radius: 50%;
}

.cdf-pending__orbit--one {
  top: 34px;
  right: -54px;
  width: 360px;
  height: 360px;
  box-shadow: 0 0 0 46px rgba(107, 85, 217, 0.035);
}

.cdf-pending__orbit--two {
  right: 120px;
  bottom: -104px;
  width: 230px;
  height: 230px;
}

.cdf-pending__spark {
  position: absolute;
  top: 54px;
  right: 15%;
  color: #ff9461;
  font-size: 25px;
}

.cdf-pending__status-card {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 48%;
  width: min(330px, calc(100% - 46px));
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 24px 60px rgba(41, 50, 105, 0.16);
  backdrop-filter: blur(12px);
  transform: translate(-50%, -58%) rotate(-1.5deg);
}

.cdf-pending__status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #5c6898;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cdf-pending__status-head strong {
  padding: 5px 8px;
  border-radius: 999px;
  background: #ece8ff;
  color: #6859df;
  font-size: 9px;
}

.cdf-pending__status-body {
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  margin-top: 18px;
  border-radius: 17px;
  background: linear-gradient(145deg, #2343a5, #5e51cb);
  color: #ffffff;
}

.cdf-pending__loader {
  display: flex;
  gap: 7px;
}

.cdf-pending__loader i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.42;
}

.cdf-pending__loader i:nth-child(2) {
  opacity: 0.68;
}

.cdf-pending__loader i:nth-child(3) {
  background: #ffb184;
  opacity: 1;
}

.cdf-pending__status-body strong {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdf-pending__ready-card {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 58px;
  display: flex;
  width: min(270px, calc(100% - 60px));
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 16px;
  background: rgba(31, 57, 148, 0.92);
  box-shadow: 0 18px 38px rgba(32, 51, 132, 0.22);
  color: #ffffff;
  transform: rotate(1.5deg);
}

.cdf-pending__ready-card > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff925f, #c9b7ff);
}

.cdf-pending__ready-card div {
  display: grid;
  gap: 2px;
}

.cdf-pending__ready-card small {
  color: #bdcaff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdf-pending__ready-card strong {
  font-size: 11px;
  line-height: 1.3;
}


@media (max-width: 960px) {
  .cdf-page__hero {
    padding-top: 56px;
  }

  .cdf-forecast__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-forecast__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cdf-luck {
    grid-column: 1 / -1;
  }

  .cdf-ai__banner {
    grid-template-columns: minmax(0, 1.1fr) minmax(240px, 0.9fr);
  }

  .cdf-compare__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-compare__card {
    min-height: 360px;
  }

  .cdf-plus__banner {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  }

  .cdf-plus__panel {
    width: min(350px, calc(100% - 38px));
    padding: 20px;
    transform: translate(-49%, -48%) rotate(-1deg);
  }

  .cdf-seo__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-seo__articles {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-pending__card {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-pending__content {
    padding: 52px 48px 24px;
  }

  .cdf-pending__visual {
    min-height: 390px;
  }

}

@media (max-width: 760px) {
  .cdf-seo__links ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .cdf-page__container {
    width: min(100% - 32px, 1200px);
  }

  .cdf-page__hero {
    padding-top: 40px;
  }

  .cdf-page__title {
    font-size: 40px;
    line-height: 1.02;
  }

  .cdf-page__zodiac {
    top: 138px;
    right: -104px;
    width: 260px;
    opacity: 0.2;
  }

  .cdf-pending-preview .cdf-page__title {
    max-width: none;
    font-size: 40px;
  }

  .cdf-pending-preview .cdf-page__zodiac {
    top: 142px;
    right: -112px;
    width: 240px;
    opacity: 0.16;
  }

  .cdf-page__byline {
    margin: 20px 0 28px;
  }

  .cdf-date-nav {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .cdf-date-nav__item {
    min-height: 58px;
    flex-direction: row;
    gap: 8px;
    border-radius: 13px;
  }

  .cdf-date-nav__date {
    margin-top: 0;
  }

  .cdf-forecast {
    padding: 56px 0 72px;
  }

  .cdf-forecast__story,
  .cdf-advice__card {
    border-radius: 20px;
  }

  .cdf-forecast__rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-luck {
    grid-template-columns: minmax(0, 1fr) 100px;
    min-height: 150px;
    padding: 22px;
  }

  .cdf-luck__meter {
    width: 96px;
    height: 96px;
  }

  .cdf-luck__meter::after {
    width: 74px;
    height: 74px;
  }

  .cdf-ai {
    padding-bottom: 72px;
  }

  .cdf-ai__banner {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .cdf-compare__card::before {
    left: 26px;
  }

  .cdf-ai__content {
    padding: 36px 26px 18px;
  }

  .cdf-ai__content h2 {
    font-size: 38px;
  }

  .cdf-ai__actions {
    flex-direction: column;
    margin-top: 28px;
  }

  .cdf-ai__button {
    width: 100%;
  }

  .cdf-ai__visual {
    min-height: 410px;
  }

  .cdf-ai__orbit {
    width: 280px;
    height: 280px;
    transform: translate(-50%, -46%);
  }

  .cdf-ai__dialogue {
    width: min(326px, calc(100% - 34px));
    gap: 14px;
    transform: translate(-54%, -47%);
  }

  .cdf-ai__message--question {
    width: 84%;
    padding: 13px 15px 14px;
  }

  .cdf-ai__message--answer {
    width: 92%;
    padding: 17px 18px;
  }

  .cdf-ai__message-copy {
    margin-top: 13px;
    font-size: 14px;
  }

  .cdf-ai__continuation {
    margin-top: 13px;
  }

  .cdf-compare {
    padding-bottom: 76px;
  }

  .cdf-compare__header {
    margin-bottom: 26px;
  }

  .cdf-compare__header h2 {
    font-size: 38px;
  }

  .cdf-compare__card {
    min-height: 0;
    padding: 26px;
    border-radius: 24px;
  }

  .cdf-compare__card-top {
    min-height: 72px;
  }

  .cdf-compare__symbol {
    width: 66px;
    height: 66px;
    flex-basis: 66px;
  }

  .cdf-compare__card h3 {
    min-height: 74px;
    margin-top: 16px;
    font-size: 34px;
  }

  .cdf-compare__copy {
    min-height: 96px;
    margin: 14px 0 18px;
    font-size: 15px;
  }

  .cdf-compare__range {
    min-height: 94px;
    grid-template-columns: minmax(102px, 0.72fr) minmax(0, 1fr);
    gap: 3px 12px;
    padding: 13px 14px;
  }

  .cdf-compare__range strong {
    font-size: 26px;
  }

  .cdf-compare__range-copy {
    padding-left: 12px;
    font-size: 12px;
  }

  .cdf-compare__tags span {
    height: 48px;
    padding-inline: 10px;
    font-size: 11px;
  }

  .cdf-plus {
    padding-bottom: 76px;
  }

  .cdf-plus__banner {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .cdf-plus__content {
    order: 1;
    padding: 36px 26px 24px;
  }

  .cdf-plus__content h2 {
    font-size: 38px;
  }

  .cdf-plus__button {
    width: 100%;
  }

  .cdf-plus__visual {
    min-height: 480px;
    order: 2;
  }

  .cdf-plus__panel {
    width: min(340px, calc(100% - 38px));
    padding: 19px;
    transform: translate(-50%, -48%) rotate(-1deg);
  }

  .cdf-plus__spark {
    top: 18px;
    left: 9%;
  }

  .cdf-plus__timeline {
    margin-top: 24px;
  }

  .cdf-plus__preview {
    margin-top: 20px;
    padding: 16px;
  }

  .cdf-plus__preview-copy {
    -webkit-line-clamp: 2;
  }

  .cdf-seo {
    padding: 68px 0 74px;
  }

  .cdf-seo__header {
    margin-bottom: 28px;
  }

  .cdf-seo__header h2 {
    font-size: 38px;
  }

  .cdf-seo__header > p {
    margin-top: 16px;
    font-size: 15px;
  }

  .cdf-seo__article {
    padding: 27px 25px 29px;
    border-radius: 22px;
  }

  .cdf-seo__article::before {
    display: none;
  }

  .cdf-seo__article h3 {
    font-size: 24px;
  }

  .cdf-seo__links {
    padding: 9px;
    border-radius: 19px;
  }

  .cdf-seo__links ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-calendar-trigger {
    justify-content: stretch;
    margin-top: 12px;
  }

  .cdf-calendar-trigger__button {
    width: 100%;
    grid-template-columns: 21px minmax(0, 1fr) auto 14px;
    padding-inline: 15px;
    text-align: left;
  }

  .cdf-calendar-trigger__button small {
    padding-left: 8px;
    font-size: 10px;
  }

  .cdf-calendar {
    width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 24px;
  }

  .cdf-calendar__shell {
    padding: 20px 14px 18px;
  }

  .cdf-calendar__header {
    margin-bottom: 16px;
  }

  .cdf-calendar__header h2 {
    font-size: 30px;
  }

  .cdf-calendar__close {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 21px;
  }

  .cdf-calendar__card {
    padding: 16px 12px;
    border-radius: 19px;
  }

  .cdf-calendar__toolbar {
    padding-bottom: 16px;
  }

  .cdf-calendar__toolbar time {
    font-size: 21px;
  }

  .cdf-calendar__weekdays,
  .cdf-calendar__days {
    gap: 5px;
  }

  .cdf-calendar__weekdays {
    margin-top: 19px;
  }

  .cdf-calendar__weekdays span {
    font-size: 9px;
  }

  .cdf-calendar__days {
    margin-top: 9px;
  }

  .cdf-calendar__days a,
  .cdf-calendar__days time {
    min-height: 40px;
    border-radius: 10px;
    font-size: 13px;
  }

  .cdf-calendar__days time[aria-current="date"]::after {
    right: 5px;
    top: 5px;
    width: 4px;
    height: 4px;
  }

  .cdf-pending {
    padding: 56px 0 76px;
  }

  .cdf-pending__card {
    border-radius: 24px;
  }

  .cdf-pending__content {
    padding: 36px 24px 18px;
  }

  .cdf-pending__content h2 {
    font-size: 38px;
  }

  .cdf-pending__copy {
    font-size: 15px;
  }

  .cdf-pending__button {
    width: 100%;
  }

  .cdf-pending__visual {
    min-height: 350px;
  }

  .cdf-pending__status-card {
    width: min(310px, calc(100% - 38px));
    padding: 18px;
    transform: translate(-50%, -60%) rotate(-1deg);
  }

  .cdf-pending__ready-card {
    right: 7%;
    bottom: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdf-page a,
  .cdf-page button {
    scroll-behavior: auto;
    transition: none;
  }
}

/* ===================================================================
   Дополнения к исходной вёрстке
   =================================================================== */

/* colors.css грузится асинхронно и красит a:link в свой синий уже после
   этого файла. Поднимаем специфичность везде, где цвет ссылки задан. */
.cdf-page a.cdf-date-nav__item {
  color: var(--cdf-ink);
}

.cdf-page a.cdf-ai__button,
.cdf-page a.cdf-plus__button,
.cdf-page a.cdf-pending__button {
  color: #ffffff;
}

.cdf-page a.cdf-seo__link-row {
  color: #324987;
}

.cdf-page .cdf-calendar__days a {
  color: #393b48;
}

.cdf-page .cdf-calendar__days a:hover {
  color: #2948ad;
}

/* Переключение месяцев. В макете его нет, но без него с сентябрьской страницы
   некуда уйти: ссылка ведёт на первый готовый день соседнего месяца. */
.cdf-calendar__toolbar {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
}

.cdf-calendar__month-nav {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid #e7e9f2;
  border-radius: 12px;
  background: #ffffff;
  color: #2948ad;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.cdf-calendar__month-nav {
  cursor: pointer;
  padding: 0;
}

.cdf-calendar__month-nav:hover:not([disabled]) {
  border-color: #cbd5f4;
  background: #f2f5ff;
}

.cdf-calendar__month-nav:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.32);
  outline-offset: 3px;
}

.cdf-calendar__month-nav[disabled] {
  border-color: #eef0f6;
  background: rgba(247, 247, 251, 0.58);
  color: #c2c4d0;
  cursor: default;
}

/* Блок «Статьи по теме» под страницей. Разметка виджета старая, поэтому
   правила перенесены сюда из home_styles.css и style.css прежнего шаблона:
   тянуть ради подвала 58 КБ стилей главной незачем. */
.new-main {
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.55;
}

.new-main .two-color-bg {
  background: linear-gradient(90deg, #f8f9fd 0%, #f8f9fd 50%, #fff 50%, #fff 100%);
}

.new-main .block-8 {
  padding: 50px;
}

.new-main .forecast__title {
  color: #000000;
  font-size: 40px;
  font-weight: 500;
  line-height: 160%;
  text-align: center;
}

.new-main .forecast__title_articles {
  margin-bottom: 64px;
}

.new-main .block-8 .glide__arrow {
  position: absolute;
  top: 32%;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: 0 0;
  cursor: pointer;
}

.new-main .block-8 .glide__arrow--left {
  left: -35px;
}

.new-main .block-8 .glide__arrow--right {
  right: -35px;
}

.new-main .block-8 .slide-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 600;
}

.new-main .block-8 .slide-inner img {
  display: block;
  width: 250px;
  height: 165px;
  border-radius: 8px;
  object-fit: cover;
}

.new-main .block-8 .slide-inner a {
  width: 260px;
  max-width: 260px;
  padding: 5px;
  color: #333;
  text-decoration: none;
}

@media (max-width: 991px) {
  .new-main .block-8 {
    padding-top: 0;
  }
}

@media (max-width: 560px) {
  .cdf-calendar__toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .cdf-calendar__month-nav {
    width: 40px;
    height: 40px;
  }

  .new-main .block-8 {
    padding: 0 20px 40px;
  }

  .new-main .forecast__title {
    font-size: 26px;
    line-height: 130%;
  }

  .new-main .forecast__title_articles {
    margin-bottom: 27px;
  }
}

/* Сводка раздела: ближайшие даты и из чего состоит прогноз.
   Своей вёрстки в пакете нет — блок собран из тех же приёмов, что соседние. */
.cdf-hub {
  padding: 56px 0 8px;
}

.cdf-hub__heading {
  margin-bottom: 24px;
}

.cdf-hub__heading h2 {
  margin: 0;
  color: var(--cdf-ink);
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.15;
}

.cdf-hub__dates {
  display: grid;
  margin: 0 0 40px;
  padding: 0;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  list-style: none;
}

.cdf-hub__date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px;
  border: 1px solid var(--cdf-line);
  border-radius: 16px;
  background: var(--cdf-surface);
  gap: 12px;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.cdf-page a.cdf-hub__date {
  color: var(--cdf-ink);
}

.cdf-page a.cdf-hub__date:hover {
  border-color: #c7d2f1;
  background: #f7f9ff;
  transform: translateY(-1px);
}

.cdf-hub__date:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.32);
  outline-offset: 3px;
}

.cdf-hub__date-label {
  font-size: 17px;
  font-weight: 600;
}

.cdf-hub__date-note {
  color: var(--cdf-muted);
  font-size: 13px;
  white-space: nowrap;
}

.cdf-hub__empty {
  margin: 0 0 40px;
  color: var(--cdf-muted);
  font-size: 16px;
}

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

.cdf-hub__card {
  padding: 24px;
  border: 1px solid var(--cdf-line);
  border-radius: 20px;
  background: #f9fafe;
}

.cdf-hub__card h3 {
  margin: 0 0 10px;
  color: var(--cdf-ink);
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
}

.cdf-hub__card p {
  margin: 0;
  color: var(--cdf-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .cdf-hub {
    padding-top: 36px;
  }

  .cdf-hub__dates {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-hub__card {
    padding: 20px;
  }
}

/* Баннер ИИ-астролога работает как разделитель между блоками, а не как
   самостоятельный экран: полноразмерный вариант забирал почти весь скролл.
   Одинаковый и на сводке, и на странице даты. */
.cdf-page .cdf-ai {
  padding-bottom: 48px;
}

.cdf-page .cdf-ai__banner {
  min-height: 0;
  /* правая колонка была под декоративный диалог, он скрыт ниже */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-radius: 24px;
}

.cdf-page .cdf-ai__content {
  display: grid;
  align-items: center;
  padding: 28px clamp(24px, 3vw, 36px);
  gap: 4px 24px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cdf-page .cdf-ai__eyebrow {
  margin: 0;
  grid-column: 1;
}

.cdf-page .cdf-ai__content h2 {
  max-width: none;
  grid-column: 1;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}

.cdf-page .cdf-ai__content h2 span {
  display: inline;
}

.cdf-page .cdf-ai__availability {
  margin: 6px 0 0;
  grid-column: 1;
}

.cdf-page .cdf-ai__bonus {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  margin: 0;
}

.cdf-page .cdf-ai__actions {
  grid-column: 2;
  grid-row: 3 / span 2;
  align-self: center;
  margin: 0;
}

/* Декоративный диалог — самая высокая часть баннера, из-за него блок
   растягивался на целый экран */
.cdf-page .cdf-ai__visual {
  display: none;
}

@media (max-width: 760px) {
  .cdf-page .cdf-ai__banner,
  .cdf-page .cdf-ai__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .cdf-page .cdf-ai__bonus,
  .cdf-page .cdf-ai__actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 16px;
  }
}

/* ===================================================================
   Единый стиль с витриной продуктов
   =================================================================== */

/* Иконки одной краской: маска плюс currentColor, как .pr-ico на /produkty/ */
.cdf-ico {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  vertical-align: -3px;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
}

.cdf-ico--sparkles {
  -webkit-mask-image: url(/local/templates/furniture_gray/images/forecast/icon-sparkles.svg);
  mask-image: url(/local/templates/furniture_gray/images/forecast/icon-sparkles.svg);
}

.cdf-ico--check {
  -webkit-mask-image: url(/local/templates/furniture_gray/images/forecast/icon-check.svg);
  mask-image: url(/local/templates/furniture_gray/images/forecast/icon-check.svg);
}

.cdf-ico--cross {
  -webkit-mask-image: url(/local/templates/furniture_gray/images/forecast/icon-cross.svg);
  mask-image: url(/local/templates/furniture_gray/images/forecast/icon-cross.svg);
}


/* Заголовок первого экрана: на витрине он 46px, здесь доходил до 72px
   и выбивался из общей типографики сайта */
.cdf-page__hero {
  padding-top: 40px;
  padding-bottom: 28px;
}

.cdf-page__title {
  font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.18;
}

.cdf-page__title span {
  margin-top: 2px;
}

.cdf-page__byline {
  font-size: 15px;
}

/* Выделение сегодняшнего дня в сводке */
.cdf-hub__date--today {
  border-color: var(--cdf-blue);
  background: var(--cdf-blue-soft);
  box-shadow: 0 6px 18px rgba(71, 110, 234, 0.16);
}

.cdf-page a.cdf-hub__date--today {
  color: var(--cdf-navy);
}

.cdf-hub__date--today .cdf-hub__date-label {
  font-weight: 700;
}

.cdf-hub__date--today .cdf-hub__date-note {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cdf-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
}

.cdf-hub__card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cdf-hub__card .cdf-ico {
  color: var(--cdf-blue);
}

/* Карточка и чипы по образцу витрины продуктов.
   На /produkty/ иконка лежит в квадратной подложке над заголовком
   (.pr-audio__icon, 96×96, фон #F1EFF0, радиус 16), а не строкой рядом с ним. */
.cdf-card-icon {
  display: grid;
  width: 72px;
  height: 72px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #f1eff0;
  place-items: center;
}

.cdf-card-icon .cdf-ico {
  width: 32px;
  height: 32px;
  vertical-align: baseline;
}

.cdf-hub__card,
.cdf-advice__card {
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: #fbfaf9;
}

.cdf-hub__card h3,
.cdf-advice__card h3 {
  display: block;
  margin: 0;
  color: var(--cdf-ink);
  font-family: "Inter", Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

.cdf-hub__card p {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.cdf-advice__heading {
  display: block;
  margin-bottom: 14px;
}

.cdf-advice__card--do .cdf-card-icon {
  background: var(--cdf-green-soft);
  color: var(--cdf-green);
}

.cdf-advice__card--avoid .cdf-card-icon {
  background: var(--cdf-rose-soft);
  color: var(--cdf-rose);
}

.cdf-hub__card .cdf-card-icon {
  color: var(--cdf-blue);
}

/* Быстрые даты: отдельные пилюли, как .pr-chip в шапке витрины,
   вместо слитной панели с тёмной вставкой */
.cdf-date-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  gap: 12px;
}

.cdf-date-nav__item {
  display: inline-flex;
  align-items: baseline;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(49, 45, 58, 0.06);
  gap: 8px;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
  transition: box-shadow 160ms ease, background-color 160ms ease;
}

.cdf-page a.cdf-date-nav__item:hover {
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(49, 45, 58, 0.14);
  transform: none;
}

.cdf-date-nav__direction {
  color: var(--cdf-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.cdf-date-nav__date {
  font-size: 15px;
  font-weight: 600;
}

.cdf-date-nav__item--current {
  background: var(--cdf-navy);
  box-shadow: 0 6px 18px rgba(20, 47, 134, 0.22);
  color: #ffffff;
}

.cdf-date-nav__item--current .cdf-date-nav__direction {
  color: rgba(255, 255, 255, 0.72);
}

/* Воздух между секциями: плашки упирались в баннер */
.cdf-hub {
  padding-bottom: 56px;
}

.cdf-forecast {
  padding-bottom: 56px;
}

.cdf-page .cdf-ai {
  padding-top: 8px;
  padding-bottom: 56px;
}

.cdf-compare,
.cdf-plus {
  padding-top: 8px;
}

@media (max-width: 560px) {
  .cdf-card-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
  }

  .cdf-card-icon .cdf-ico {
    width: 26px;
    height: 26px;
  }

  .cdf-date-nav__item {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* Хлебные крошки: тот же размер и разделитель, что на витрине продуктов.
   Микроразметку не дублируем — BreadcrumbList уже уходит в JSON-LD. */
.cdf-crumbs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  gap: 8px;
  color: var(--cdf-muted);
  font-size: 13px;
  line-height: 1.3;
}

.cdf-page .cdf-crumbs a {
  color: var(--cdf-ink);
  text-decoration: none;
}

.cdf-page .cdf-crumbs a:hover {
  text-decoration: underline;
}

.cdf-crumbs a:focus-visible {
  outline: 3px solid rgba(71, 110, 234, 0.32);
  outline-offset: 3px;
}

.cdf-crumbs [aria-current="page"] {
  color: var(--cdf-muted);
}

/* ===================================================================
   Размеры и отступы по витрине продуктов
   =================================================================== */

/* Контейнер: та же ширина и боковые поля, что у .pr-page .inner-container */
.cdf-page__container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (max-width: 700px) {
  .cdf-page__container {
    padding-inline: 15px;
  }
}

/* Заголовки секций доходили до 62px — на витрине они 38px */
.cdf-forecast__heading h2,
.cdf-compare__header h2,
.cdf-plus__content h2,
.cdf-seo__header h2,
.cdf-ai__content h2,
.cdf-pending__content h2,
.cdf-hub__heading h2 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cdf-calendar__header h2 {
  font-size: 24px;
  line-height: 1.2;
}

/* Основной текст: 16px с тем же интерлиньяжем, что у .pr-hero__sub */
.cdf-forecast__copy p,
.cdf-seo__header p,
.cdf-seo__article p,
.cdf-compare__copy,
.cdf-pending__copy {
  font-size: 16px;
  line-height: 1.55;
}

.cdf-seo__article h3,
.cdf-compare__card h3 {
  font-size: 19px;
  line-height: 1.3;
}

.cdf-advice__card li,
.cdf-hub__card p,
.cdf-compare__tags span,
.cdf-ai__availability,
.cdf-plus__copy {
  font-size: 15px;
  line-height: 1.55;
}

/* Крупная цифра потенциала занимала 56px — соразмерно уменьшаем блок */
.cdf-luck__value {
  font-size: 40px;
}

.cdf-luck__meter {
  width: 92px;
  height: 92px;
}

/* Ровный ряд одинаковых пилюль: даты и выбор другой даты в одну линию.
   В исходной вёрстке пилюля была двухэтажной (направление над датой),
   поэтому здесь снимаем flex-direction: column — иначе иконка встаёт над текстом */
.cdf-date-nav__item {
  flex-direction: row;
  min-height: 44px;
  padding: 0 18px;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.cdf-date-nav__item--off {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
  color: var(--cdf-muted);
}

.cdf-date-nav__item--pick {
  border: 1px solid #dfe3f3;
  background: transparent;
  box-shadow: none;
  color: var(--cdf-navy);
  cursor: pointer;
  font-family: inherit;
}

.cdf-date-nav__item--pick svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.cdf-date-nav__item--pick:hover {
  border-color: #c7d2f1;
  background: #ffffff;
}

.cdf-date-nav__item--pick[aria-expanded="true"] {
  border-color: var(--cdf-blue);
}

@media (max-width: 560px) {
  .cdf-date-nav__item {
    flex: 0 1 auto;
    justify-content: center;
    padding: 0 14px;
    font-size: 14px;
  }
}

/* Ряд дат стоял вплотную к подписи автора: отдельного контейнера
   у кнопки календаря больше нет, отступ задаём самому ряду */
.cdf-date-nav {
  margin: 20px 0 0;
}


/* ===================================================================
   Раскладка блока прогноза
   ===================================================================
   Потенциал дня стоит рядом с текстом, как в макете, а парные списки
   переехали вниз во всю ширину: в узкой колонке они были вдвое выше
   текста и оставляли под ним пустую половину экрана. */
.cdf-forecast__layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px 28px;
  align-items: start;
}

.cdf-forecast__story {
  grid-column: 1;
  grid-row: 1;
}

.cdf-forecast__copy {
  /* карточка сама держит ширину строки, поля чуть скромнее исходных */
  padding: clamp(24px, 3vw, 36px);
}

.cdf-forecast__copy p + p {
  margin-top: 16px;
}

.cdf-luck {
  grid-column: 2;
  grid-row: 1;
  /* колонка под круг была 122px под прежний размер индикатора: из-за неё
     подпись переносилась на две строки, а круг уезжал вправо */
  grid-template-columns: minmax(0, 1fr) 92px;
  min-height: 0;
  padding: 24px;
  gap: 16px;
}

/* Списки — парой во всю ширину, чтобы их можно было сравнить взглядом */
.cdf-advice {
  display: grid;
  grid-column: 1 / -1;
  margin-top: 8px;
  gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cdf-advice__card {
  align-content: start;
}

@media (max-width: 960px) {
  .cdf-forecast__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* в одну колонку элементы идут в порядке разметки: оценка дня, текст, списки */
  .cdf-forecast__story,
  .cdf-luck,
  .cdf-advice {
    grid-column: auto;
    grid-row: auto;
  }

}

@media (max-width: 760px) {
  .cdf-advice {
    grid-template-columns: minmax(0, 1fr);
  }
}