/* Small refinements to the existing YouTube Shield layout. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --yt-red: #e52b21;
  --yt-red-hover: #c91e17;
  --bg-primary: #f0f0f0;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --header-bg: rgba(255, 255, 255, .96);
  --modal-window-bg: #ffffff;
  --modal-inner-card: #f2f2f2;
}

[data-theme="dark"] {
  --bg-primary: #181818;
  --bg-card: #212121;
  --bg-card-hover: #282828;
  --header-bg: rgba(33, 33, 33, .96);
  --modal-window-bg: #212121;
  --modal-inner-card: #2d2d2d;
}

.hero-section { background: var(--bg-card); }
header, .lang-select, .theme-toggle-btn, .feature-card, .pricing-card,
.pricing-card.highlight-trial, .faq-card, .legal-document,
.modal-window, .modal-group-card { border: 0; }
.feature-card, .pricing-card, .faq-card, .legal-document { box-shadow: 0 5px 22px rgba(0, 0, 0, .035); }
[data-theme="dark"] :is(.feature-card, .pricing-card, .faq-card, .legal-document) { box-shadow: 0 5px 22px rgba(0, 0, 0, .12); }
.feature-card:hover, .pricing-card:hover, .faq-card:hover, .modal-group-card:hover { border: 0; }
.pricing-card.highlight-trial { box-shadow: 0 5px 22px rgba(229, 43, 33, .12); }
.pricing-card.highlight-trial .pricing-plan-name { color: var(--yt-red); }
.modal-group-card { box-shadow: none; }
.modal-top-bar, .legal-effective { border-bottom: 0; }
.faq-answer { border-left: 0; padding-left: 0; }
.lang-select, .theme-toggle-btn { background: var(--modal-inner-card); }
.lang-select:hover, .lang-select:focus, .theme-toggle-btn:hover { border: 0; }

.hero-section { min-height: min(760px, 78vh); }
.hero-shield-img { width: 124px; height: 124px; }
.section-eyebrow { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.section-title { font-size: clamp(27px, 3vw, 34px); line-height: 1.17; }
.section-header { margin-bottom: 38px; }
.feature-card, .pricing-card, .faq-card { border-radius: 18px; }
.feature-card { padding: 27px 22px; }
.feature-desc { line-height: 1.58; }
.pricing-card { min-height: 230px; }
.pricing-saving { align-self: center; display: inline-flex; align-items: center; min-height: 26px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--yt-red) 10%, var(--bg-primary)); color: var(--yt-red); font-size: 12px; font-weight: 800; }
.pricing-terms { max-width: 780px; margin: 24px auto 0; color: var(--text-muted); text-align: center; font-size: 12px; line-height: 1.5; }
.catalog-help { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: -8px 0 20px; }
.modal-grid { gap: 10px; }
.modal-group-card { padding: 13px 17px; }
.modal-group-content { max-height: 5000px; }
.modal-list li { margin-bottom: 11px; line-height: 1.5; }
.modal-list li strong { display: inline; }
.modal-window { scrollbar-color: var(--border-card-hover) transparent; }
:is(button, a, select):focus-visible { outline: 3px solid var(--yt-red); outline-offset: 3px; }

@media (max-width: 700px) {
  .hero-section { min-height: 0; padding-top: 66px; padding-bottom: 66px; }
  .hero-shield-img { width: 104px; height: 104px; }
  section { padding-top: 68px; padding-bottom: 68px; }
  .section-header { margin-bottom: 28px; }
  .modal-window { width: min(100%, 640px); padding: 22px 18px; max-height: 92dvh; }
  .catalog-help { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}