/* Generated by scripts/generate.mjs — edit source files in styles/ */

/* ── tokens.css ── */
/*
 * Design tokens for Super! TV Italy
 *
 * Extracted from webplex source:
 *   packages/lib/webplex-experiences-configs/experiences/gae-dls/config/supertv-intl-paladin/it/
 *     emotion.default.js  — brand colors, typography, corners
 *     theme.default.js    — font families, logo, page background
 *
 * getPaladinSpacer(n) = n × 6px  (from packages/dls/theme/layout/paladin/spacer.js)
 * Breakpoints: small=660px, medium=980px, xlarge=1600px
 *              (from packages/dls/theme/breakpoints/breakpoints.js)
 */

:root {
  /* ── Brand colors (emotion.default.js → colors.dark) ── */
  --color-brand-01:     #49365E;   /* dark purple  */
  --color-brand-02:     #9B81B6;   /* light purple */
  --color-brand-03:     #2DD6AE;   /* teal         */

  /* UI surfaces */
  --color-ui-bg:        #FFFFFF;   /* page background (theme.default.js) */
  --color-ui-01:        #F6F6F6;   /* card background */
  --color-ui-02:        #EAEAEA;
  --color-ui-03:        #DBDBDB;
  --color-ui-dark:      #242424;   /* dark surface (nav.01-bg) */
  --color-ui-darker:    #3B3B3B;   /* nav.02-bg   */

  /* Text */
  --color-text-01:      #FFFFFF;   /* on-dark text */
  --color-text-02:      #8B8B8B;   /* secondary text */
  --color-text-03:      #000000;   /* on-light text */

  /* Interactive (emotion.default.js → colors.dark.interactive) */
  --color-link:         #FF0082;
  --color-link-hover:   #FF5BAF;

  /* Image overlay colors */
  --color-img-white:    #FFFFFF;
  --color-img-black:    #000000;

  /* Info chip */
  --color-info-bg:      #FFEB3B;
  --color-info-text:    #000000;

  /* ── Typography (emotion.default.js → typography.paladin) ── */
  --font-primary:   'Neue Plak Text', sans-serif;
  --font-secondary: 'Roc Grotesk', sans-serif;
  --font-display:   'Neue Plak Black', sans-serif;

  /* Named text styles */
  --text-pico:    700  12px/13.44px var(--font-primary);
  --text-nano:    800  14px/15.68px var(--font-display);
  --text-micro:   800  16px/17.92px var(--font-display);
  --text-milli:   800  24px/26.88px var(--font-secondary);
  --text-kilo:    800  28px/31.36px var(--font-secondary);
  --text-mega:    800  36px/40.32px var(--font-secondary);
  --text-giga:    800  42px/47.04px var(--font-secondary);
  --text-tera:    800  54px/54px    var(--font-secondary);
  --text-p1:      400  14px/21px    var(--font-primary);
  --text-p2:      400  16px/24px    var(--font-primary);
  --text-p3:      400  18px/27px    var(--font-primary);

  /* ── Spacing: getPaladinSpacer(n) = n × 6px ── */
  --s1:    6px;    /* spacer(1)  */
  --s2:   12px;    /* spacer(2)  */
  --s3:   18px;    /* spacer(3)  */
  --s4:   24px;    /* spacer(4)  */
  --s5:   30px;    /* spacer(5)  */
  --s6:   36px;    /* spacer(6)  */
  --s7:   42px;    /* spacer(7)  */
  --s8:   48px;    /* spacer(8)  */
  --s10:  60px;    /* spacer(10) */
  --s12:  72px;    /* spacer(12) */
  --s14:  84px;    /* spacer(14) */
  --s16:  96px;    /* spacer(16) */
  --s18: 108px;    /* spacer(18) */
  --s30: 180px;    /* spacer(30) */
  --s360: 2160px;  /* spacer(360) — max content width */
  --s400: 2400px;  /* spacer(400) — max wrapper width */
  --s124: 744px;   /* spacer(124) — spotlight height */

  /* ── Borders (emotion.default.js → corners) ── */
  --radius-ui:    4px;    /* ui corner radius    */
  --radius-label: 16px;   /* label corner radius */
  --radius-btn:   80px;   /* button corner radius */

  /* ── Shadows (emotion.default.js → shadows.dark) ── */
  --shadow-01: 0px  2px  4px 0px rgba(0,0,0,0.2);
  --shadow-02: 0px  4px  8px 0px rgba(0,0,0,0.2);
  --shadow-03: 0px  6px 12px 0px rgba(0,0,0,0.2);
  --shadow-04: 0px 12px 24px 0px rgba(0,0,0,0.2);

  /* ── z-index scale ── */
  --z-base:  1;
  --z-high:  10;
  --z-over:  100;
  --z-modal: 200;
}

/* Mobile overrides (< 660px) */
@media (max-width: 660px) {
  :root {
    --text-mega: 800 24px/26.88px var(--font-secondary);
    --text-giga: 800 28px/31.36px var(--font-secondary);
    --text-tera: 800 36px/40.32px var(--font-secondary);
  }
}

/* ── base.css ── */
/*
 * Base styles — reset, fonts, icon font
 * Extracted from webplex base-*.css (packages/apps/webplex-app)
 */

/* ── Fonts used by supertv.it ── */
@font-face { font-family:'Roc Grotesk';     src:url('/fonts/RocGrotesk-Black.woff2') format('woff2'); font-weight:900; font-display:swap }

@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextRegular_normal_normal.woff2')           format('woff2'); font-weight:400; font-style:normal;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextBold_normal_normal.woff2')              format('woff2'); font-weight:700; font-style:normal;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextItalic_italic_normal.woff2')            format('woff2'); font-weight:400; font-style:italic;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextBoldItalic_italic_normal.woff2')        format('woff2'); font-weight:700; font-style:italic;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextSemiBold_normal_normal.woff2')          format('woff2'); font-weight:600; font-style:normal;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextSemiBoldItalic_italic_normal.woff2')    format('woff2'); font-weight:600; font-style:italic;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextBlack_normal_normal.woff2')             format('woff2'); font-weight:900; font-style:normal;  font-display:swap }
@font-face { font-family:'Neue Plak Text'; src:url('/fonts/NeuePlakTextBlackItalic_italic_normal.woff2')       format('woff2'); font-weight:900; font-style:italic;  font-display:swap }
@font-face { font-family:'Neue Plak Black'; src:url('/fonts/NeuePlakBlack_normal_normal.woff2')                format('woff2'); font-weight:900; font-style:normal;  font-display:swap }

/* Icon font (global-icons — from base.css) */
@font-face {
  font-family: 'global-icons';
  font-display: swap;
  src: url('/fonts/global-icons.woff2') format('woff2'),
       url('/fonts/global-icons.woff')  format('woff');
}

/* ── Reset (from webplex base.css) ── */
*, *::before, *::after { box-sizing: border-box }

html {
  font-size: 62.5%;  /* 1rem = 10px */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  overscroll-behavior-y: none;
  font-family: var(--font-primary);
  background: var(--color-ui-bg);
  color: var(--color-text-03);
}

h1, h2, h3, h4, h5, h6, p {
  font-weight: inherit;
  font-style: inherit;
  padding: 0;
  margin: 0;
  word-wrap: break-word;
  max-width: 100%;
}

a { background-color: transparent; text-decoration: none; color: inherit }
a:active, a:hover { outline: 0 }

button {
  background: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

img { content-visibility: visible; display: block; max-width: 100%; height: auto }
ul  { margin: 0; padding: 0 }

:focus-visible { outline: auto 1px; outline-color: var(--color-brand-01) }


/* ── components/header.css ── */
/*
 * PaladinHeader styles
 * Source: packages/dls/components/organisms/PaladinHeader/PaladinHeader.styled.js
 *
 * StyledHeaderWrapper:   position:fixed, transparent, min-height:spacer(16)=96px
 * StyledHeaderContainer: padding 0 spacer(5)=30px, medium: spacer(8)=48px
 * StyledHeaderSection:   gap spacer(4)=24px, medium: spacer(7)=42px
 * Background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%)
 *   when sticky: nav.01-bg (#242424) with backdrop-filter blur
 */

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-over);
  min-height: 96px;    /* spacer(16) */
  display: flex;
  align-items: center;

  /* gradient background fades to transparent at bottom — overlays hero */
  background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
}

.site-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
  padding: 0 30px;   /* spacer(5) */
  position: relative;
  z-index: var(--z-high);
}

@media (min-width: 980px) {   /* medium */
  .site-header__container { padding: 0 48px }   /* spacer(8) */
}

.site-header__logo {
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 38px;
  width: auto;
}

.site-header__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;   /* spacer(4) */
}

@media (min-width: 980px) {
  .site-header__nav { gap: 42px }   /* spacer(7) */
}

.site-header__nav a {
  color: var(--color-text-01);
  font: var(--text-nano);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.site-header__nav a:hover { opacity: 1 }

/* ── components/hero.css ── */
/*
 * PaladinHero styles
 * Source: packages/dls/components/molecules/PaladinHero/PaladinHero.styled.js
 *
 * StyledHeroWrapper:        position:relative, overflow:hidden
 * StyledPaginationWrapper:  flex column-reverse mobile / column desktop
 * StyledPagination:         bottom spacer(6)=36px mobile, spacer(12)=72px small+
 * Hero card:                full-viewport image, content overlaid at bottom
 *
 * Swiper styles extracted verbatim from PaladinHero.styled.js (swiperCoreStyles const)
 */

/* ── Swiper core (from swiperCoreStyles in PaladinHero.styled.js) ── */
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  overflow: hidden;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  pointer-events: none;
}

.swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity }
.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; z-index: 1 }

/* ── Hero wrapper (StyledHeroWrapper) ── */
.hero {
  position: relative;
  overflow: hidden;
}

/* ── Hero image fills full height ── */
.hero__picture {
  display: block;
  width: 100%;
}

.hero__picture img {
  width: 100%;
  height: 56vw;
  min-height: 400px;
  max-height: 100vh;
  object-fit: cover;
  display: block;
}

/* ── Gradient overlay + content (from the hero card HTML structure) ── */
.hero__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

/* ── Text content at bottom-left ── */
.hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 5%;
  padding-bottom: 36px;   /* spacer(6) */
  color: var(--color-text-01);
  max-width: 2160px;      /* spacer(360) */
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 660px) {   /* small */
  .hero__content { padding-bottom: 72px }   /* spacer(12) */
}

.hero__title {
  font: var(--text-mega);
  margin-bottom: 12px;   /* spacer(2) */
}

@media (min-width: 980px) {   /* medium */
  .hero__title { font: var(--text-giga) }
}

.hero__description {
  font: var(--text-p2);
  max-width: 560px;
  opacity: 0.9;
}

/* ── Pagination bullets (StyledPagination) ── */
.hero__pagination {
  text-align: center;
  position: relative;
  bottom: 36px;    /* spacer(6) */
  z-index: 1;
  max-width: 2160px;   /* spacer(360) */
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 660px) {
  .hero__pagination {
    text-align: right;
    bottom: 72px;   /* spacer(12) */
  }
}

.swiper-pagination-bullet {
  display: inline-block;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  width: 12px;    /* spacer(2) */
  height: 12px;
  background: var(--color-text-01);
  opacity: 0.4;
  border-radius: 100%;
  margin: 0 12px;
  cursor: pointer;
}

.swiper-pagination-bullet-active { opacity: 1; box-shadow: var(--shadow-01) }

/* ── components/grid.css ── */
/*
 * PaladinGrid + PaladinContentCard + BodyModuleSelector styles
 * Sources:
 *   packages/dls/components/molecules/PaladinGrid/PaladinGrid.styled.js
 *   packages/dls/components/molecules/PaladinContentCard/PaladinContentCard.styled.js
 *   packages/dls/components/organisms/PaladinFlexBody/elements/BodyModuleSelector/BodyModuleSelector.styled.js
 *   packages/dls/components/atoms/PaladinBodySpacer/PaladinBodySpacer.styled.js
 */

/* ── PaladinBodySpacer (StyledPaladinBodySpacer) ── */
.body-spacer {
  padding: 0;
  gap: 24px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

@media (min-width: 980px) {
  .body-spacer { gap: 36px }
}

/* ── Grid wrapper (GridWrapper from BodyModuleSelector) ── */
.grid-wrapper {
  padding: 36px 24px 24px 36px;
}

@media (min-width: 980px) {
  .grid-wrapper {
    padding: 48px 72px 24px 72px;
    margin: 0 auto;
    max-width: 2400px;
  }
}

/* ── Section title: StyledGridHeaderTitle uses PaladinMilli
   milli = fontFamily:secondary(Roc Grotesk), 800, 24px, uppercase, lineHeight:26.88px
   color: dark.obj.01 = #000000
   Source: packages/dls/components/molecules/PaladinGrid/elements/Header/Header.styled.js */
.section-title {
  font-family: var(--font-secondary);
  font-size: 24px;
  font-weight: 800;
  line-height: 26.88px;
  text-transform: uppercase;
  color: var(--color-text-03);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;   /* spacer(1) */
  margin-bottom: 12px;
}

/* ── PaladinGrid (StyledPaladinGrid + StyledGrid) ── */
.paladin-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;    /* spacer(3) */
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 1600px) {
  .paladin-grid { max-width: 2160px }   /* spacer(360) */
}

.paladin-grid__list {
  display: grid;
  gap: 12px;    /* spacer(2) */
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
}

@media (max-width: 660px) {
  .paladin-grid__list { grid-template-columns: 1fr }
}

.paladin-grid__item { list-style: none }

/* ── Card (PaladinContentCardWrapper) ── */
.card {
  display: flex;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  position: relative;
  border-radius: var(--radius-ui);
  align-items: center;
  flex-direction: column;
  background: var(--color-ui-01);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.card:hover img,
.card:focus-visible img { transform: scale(1.1) }

.card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  border-radius: var(--radius-ui) var(--radius-ui) 0 0;
}

/* StyledMetaWrapper: padding spacer(2)=12px, gap spacer(1)=6px */
.card__body {
  padding: 12px;
  gap: 6px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Card title: StyledPrimaryMetaTitle uses getPaladinTypography('p2-inline-bold')
   p2-inline-bold = fontFamily:tertiary("Neue Plak Black"), fontSize:16px, fontWeight:800, lineHeight:23.6px
   Source: packages/dls/components/molecules/PaladinContentCard/elements/Meta/Meta.styled.js */
.card__title {
  font-family: var(--font-display);   /* "Neue Plak Black" = typography.paladin.font.tertiary */
  font-size: 16px;                    /* p2.fontSize */
  font-weight: 800;                   /* p2-bold.fontWeight */
  line-height: 23.6px;               /* p2-inline-bold lineHeight */
  color: var(--color-text-03);
  margin-bottom: 4px;
}

/* StyledPrimaryMetaDescription: p2-inline = Neue Plak Text, 400, 16px, 23.6px
   color: dark.obj.01 = #000000
   Source: Meta.styled.js */
.card__description {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 23.6px;
  color: var(--color-text-03);   /* dark.obj.01 = #000000 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── components/spotlight.css ── */
/*
 * PaladinValueSpotlight styles
 * Source: packages/dls/components/molecules/PaladinValueSpotlight/PaladinValueSpotlight.styled.js
 *
 * StyledValueSpotlight:           flex-col mobile, flex-row small+; bg=black; color=white; margin-top spacer(8)=48px
 * StyledValueSpotlightWrapper:    max-width spacer(400)=2400px; row small+, height spacer(124)=744px small+
 * StyledValueSpotlightImageWrapper: absolute small+; covers full area
 * StyledGradientOverlayWrapper:   gradient to-top mobile, to-right (or left) small+
 * StyledValueSpotlightCopy:       50% width small+; centered text; padding 5% / spacer(30)=180px medium+
 * StyledDesktopTitle (PaladinGiga): hidden mobile, flex small+
 */

.spotlight {
  margin-top: 48px;    /* spacer(8) */
  width: 100%;
  color: var(--color-img-white);
  display: flex;
  flex-direction: column;
  background: var(--color-img-black);
}

@media (min-width: 660px) {   /* small */
  .spotlight { flex-direction: row }
}

/* Inner wrapper — constrains max width, manages row layout */
.spotlight__wrapper {
  max-width: 2400px;   /* spacer(400) */
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;           /* spacer(3) */
  margin: 0 auto;
}

@media (min-width: 660px) {
  .spotlight__wrapper {
    flex-direction: row;
    height: 744px;   /* spacer(124) */
  }
}

/* Background image — fills right 2/3 */
.spotlight__image-wrapper {
  width: 100%;
  margin: 0 auto;
  max-width: 2400px;
  position: relative;
}

@media (min-width: 660px) {
  .spotlight__image-wrapper {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: flex;
    justify-content: flex-end;
  }
}

.spotlight__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 660px) {
  .spotlight__image { width: 66.667% }
}

/* Gradient overlay — to top on mobile, to right on desktop */
.spotlight__overlay {
  position: absolute;
  inset: 0;
  max-width: 2400px;
  margin: 0 auto;
  background-image: linear-gradient(
    to top,
    var(--color-img-black) 33.333%,
    transparent 66.667%
  );
}

@media (min-width: 660px) {
  .spotlight__overlay {
    background-image: linear-gradient(
      to right,
      var(--color-img-black) 33.333%,
      transparent 66.667%
    );
  }
}

/* Text content — left 50% on desktop */
.spotlight__copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;   /* spacer(3) */
  position: relative;
  z-index: var(--z-high);
  padding: 0 5% 36px 5%;   /* spacer(6) bottom */
}

@media (min-width: 660px) {
  .spotlight__copy {
    width: 50%;
    padding: 0 5%;
  }
}

@media (min-width: 980px) {
  .spotlight__copy { padding: 0 180px }   /* spacer(30) */
}

/* Title — hidden on mobile (shown inside image gradient), visible on desktop */
.spotlight__title {
  display: none;
  font: var(--text-giga);
}

@media (min-width: 660px) {
  .spotlight__title { display: flex }
}

/* Subtitle — PaladinMicro = text-micro (micro token includes textTransform: uppercase) */
.spotlight__subtitle {
  font: var(--text-micro);
  text-transform: uppercase;
  width: 100%;
  pointer-events: none;
}

/* Body copy — PaladinP2 with 4-line clamp */
.spotlight__description {
  font: var(--text-p2);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  pointer-events: none;
}

/* ── components/footer.css ── */
/*
 * PaladinFooter styles
 * Sources:
 *   PaladinFooter.styled.js          — StyledWrapper: bg dark.nav.01-bg, padding spacer(10)/spacer(18)
 *   elements/Navigation/             — StyledWrapper: margin-bottom spacer(4)/spacer(7)
 *   elements/NavigationItem/         — Element (PaladinPico): margin 0 spacer(3) spacer(6); small+: spacer(3)
 *   elements/Logo/Logo.styled.js     — StyledWrapper: margin-top spacer(10), margin-bottom spacer(6)
 *   elements/Copyright/Copyright.styled.js — color dark.nav.01-link-enabled, font-weight normal
 */

.site-footer {
  background: var(--color-ui-dark);   /* dark.nav.01-bg base = #242424 */
  color: var(--color-text-01);
  text-align: center;
  padding: 60px 0;   /* spacer(10) */
}

@media (min-width: 660px) {
  .site-footer { padding-bottom: 108px }   /* spacer(18) */
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* StyledWrapper (Navigation): margin-bottom spacer(4)=24px; small+: spacer(7)=42px */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

@media (min-width: 660px) {
  .site-footer__nav { margin-bottom: 42px }
}

/* Element (NavigationItem — PaladinPico): margin 0 spacer(3)=18px spacer(6)=36px; small+: margin-bottom spacer(3)=18px */
.site-footer__nav a {
  color: var(--color-link);   /* dark.nav.01-link-enabled = #FF0082 */
  font: var(--text-pico);     /* pico = Neue Plak Text 12px/13.44px 700 */
  display: inline-block;
  margin: 0 18px 36px;
  transition: color 0.2s;
}

@media (min-width: 660px) {
  .site-footer__nav a { margin-bottom: 18px }
}

.site-footer__nav a:hover { color: var(--color-link-hover) }

/* StyledWrapper (Logo): margin-top spacer(10)=60px, margin-bottom spacer(6)=36px */
.site-footer__logo {
  display: block;
  margin-top: 60px;
  margin-bottom: 36px;
}

/* StyledWrapper (Copyright): color dark.nav.01-link-enabled, font-weight normal */
.site-footer__copyright {
  font: var(--text-pico);
  font-weight: 400;
  color: var(--color-link);
}

/* ── components/legal.css ── */
/*
 * Legal page and Info/article page styles
 * Sources: PaladinInfoPage, PaladinFlexArticle component patterns
 *          (emotion colors + standard paladin typography)
 */

/* ── Legal page ── */
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  /* top padding clears the fixed .site-header (min-height: 96px) so it doesn't cover the h1 */
  padding: calc(var(--s16) + var(--s8)) 30px 96px;
}

.legal-page h1 {
  font: var(--text-giga);
  color: var(--color-text-03);
  margin-bottom: 36px;   /* spacer(6) */
}

.legal-section { margin-bottom: 24px }   /* spacer(4) */

.legal-section h2 {
  font: var(--text-kilo);
  color: var(--color-text-03);
  margin-bottom: 12px;
}

.legal-section h3 {
  font: var(--text-milli);
  color: var(--color-text-03);
  margin: 18px 0 6px;
}

.legal-section p {
  font: var(--text-p2);
  color: var(--color-text-02);
  margin-bottom: 12px;
}

.legal-section a {
  color: var(--color-link);
  text-decoration: underline;
}

.legal-section ul,
.legal-section ol {
  padding-left: 24px;
  margin-bottom: 12px;
}

.legal-section li {
  font: var(--text-p2);
  color: var(--color-text-02);
  margin-bottom: 6px;
}