:root {
  --fg: #0f172a;
  --bg: #ffffff;
  --primary: #1e293b;
  --accent: #f97316;
  --grad-from: #1e293b;
  --grad-to: #f97316;
  --muted: #64748b;
  --border: #e5e7eb;
  --surface: #f8fafc;
  --font-heading: "Noto Serif", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  /* Sticky-footer scaffold: full-height flex column so the footer
     (margin-top:auto) sinks to the viewport bottom on short pages
     instead of floating mid-page. Full-width children (header/hero/
     footer) stretch; max-width content (article / article-index /
     layout-slot--pageBody) stays centred via its own margin:auto. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary);
  margin: 1.5em 0 0.5em;
}
h1 { font-size: 2.5rem; margin-top: 0; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
p { margin: 0.75em 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
blockquote { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--muted); }
/* Tables (S-10). The wrapper owns horizontal overflow so a wide table
   scrolls inside its own box instead of making the whole page scroll
   sideways. Tables carry per-cell data-label (the column header), which the
   mobile rule below uses to restack each row as a labelled card. */
.table-scroll-ly1p { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; margin: 0; }
th, td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
th { background: var(--surface); font-weight: 600; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 45%, transparent); }
.callout-ly1p { border-left: 4px solid; padding: 0.75rem 1rem; margin: 1rem 0; border-radius: 4px; }
.callout--info-ly1p    { border-color: #2563eb; background: #eff6ff; }
.callout--warning-ly1p { border-color: #d97706; background: #fffbeb; }
.callout--pro-tip-ly1p { border-color: #10b981; background: #ecfdf5; }
.callout--note-ly1p    { border-color: #6b7280; background: var(--surface); }
.pros-cons-ly1p { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pros-ly1p li::marker { content: '✔  '; color: #10b981; }
.cons-ly1p li::marker { content: '✗  '; color: #ef4444; }
.faq-ly1p dt { font-weight: 600; margin-top: 1rem; }
.faq-ly1p dd { margin-left: 0; color: var(--muted); }
.missing-operator-ly1p {
  border: 1px dashed #f59e0b; background: #fffbeb;
  padding: 0.5rem 0.75rem; border-radius: 4px;
  color: #92400e; font-family: monospace; font-size: 0.85em;
}
/* Sticky header. CSS-only — position: sticky keeps the header pinned
   to the viewport while content scrolls, with a translucent backdrop
   so brand keeps visible without obscuring text below. Both the
   pre-Wave-R fallback (.site-header-ly1p) and the section-block slot
   wrapper (.layout-slot--header-ly1p) get the treatment so layout-builder
   and default sites look consistent. */
.site-header-ly1p,
.layout-slot--header-ly1p {
  position: sticky; top: 0; z-index: 50;
  /* --header-bg is set per-site (layout editor → headerBackground). When
     unset (NULL-config fallback sites) it's the translucent-white sticky
     look. */
  background: var(--header-bg, rgba(255, 255, 255, 0.92));
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
}
.site-header-ly1p {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  /* Full-bleed bar, but inset the CONTENT so the logo + nav line up with
     the centred 1100px content column below. pageBody is max-width:1100px
     centred AND has a 1.5rem inner padding, so the inset must add that
     same 1.5rem (otherwise the header content sits 1.5rem wider on each
     side than the content column). max() keeps the gutter on narrow
     viewports where the calc goes negative. */
  padding: 0.85rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem));
  border-bottom: 1px solid var(--border);
}
.site-name-ly1p {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-heading); font-weight: 700;
  font-size: 1.25rem; color: var(--header-fg, var(--primary)); text-decoration: none;
}
.site-name-ly1p .logo-ly1p {
  height: 40px; width: 40px; object-fit: contain; border-radius: 6px;
  /* white chip so a white-background logo stays visible on any header */
  background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.article-ly1p {
  max-width: 760px; margin: 2.5rem auto 4rem; padding: 0 1.5rem;
}
/* Default index-page layout (rendered when the site has no pageBody
   slot blocks defined — operator left it bare). The slot wrapper
   .layout-slot--pageBody-ly1p already enforces max-width when section
   blocks ARE configured; this rule covers the fallback path. */
.article-index-ly1p {
  max-width: 880px; margin: 3rem auto 4rem; padding: 0 1.5rem;
}
.article-index-ly1p > h1 {
  font-size: 2.5rem; margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.article-index-ly1p > h1::after {
  content: ''; display: block; width: 3rem; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 0.75rem;
}
.article-list-ly1p { list-style: none; padding: 0; }
.article-card-ly1p {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.25rem 0; border-bottom: 1px solid var(--border);
}
/* Hover = highlight only, no layout shift (a padding/transform shift made
   the card content visibly jump). Title link colour-shifts via the rule
   below; card-variant border/shadow highlight lives in EXTRA_BLOCK_CSS. */
.article-card__body-ly1p { flex: 1 1 auto; min-width: 0; }
.article-card-ly1p h2 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.article-card-ly1p h2 a { color: var(--primary); }
.article-card-ly1p h2 a:hover { color: var(--accent); text-decoration: none; }
.article-card-ly1p p { margin: 0; color: var(--muted); font-size: 0.95em; }
/* article-card thumbnails (shared: index list + article-list-grid block) */
.article-card__thumb-ly1p {
  flex: 0 0 auto; width: 168px; aspect-ratio: 16 / 10;
  border-radius: 8px; overflow: hidden; background: var(--surface, #eee);
}
.article-card__thumb-ly1p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__thumb--ph-ly1p {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, hsl(var(--thumb-h, 220) 52% 42%), hsl(calc(var(--thumb-h, 220) + 38) 58% 52%));
}
.article-card__thumb--ph-ly1p span { font-size: 2.25rem; font-weight: 800; color: rgba(255,255,255,0.9); line-height: 1; }
@media (max-width: 560px) {
  .article-card-ly1p { flex-direction: column; }
  .article-card__thumb-ly1p { width: 100%; }

  /* Restack a labelled table as one card per row (S-10). Squeezing 5+
     columns into a phone width made comparison tables unreadable; each row
     becomes a stack of "Label: value" pairs instead. Only applies to tables
     that have headers to label with (.table--stacked-ly1p). */
  .table--stacked-ly1p { border: 0; }
  .table--stacked-ly1p thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table--stacked-ly1p tbody tr {
    display: block; margin: 0 0 0.75rem; border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; background: var(--surface);
  }
  .table--stacked-ly1p tbody tr:last-child { margin-bottom: 0; }
  .table--stacked-ly1p tbody td, .table--stacked-ly1p tbody th {
    display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between;
    border: 0; border-bottom: 1px solid var(--border); padding: 0.55rem 0.8rem; background: none;
  }
  .table--stacked-ly1p tbody tr > *:last-child { border-bottom: 0; }
  .table--stacked-ly1p tbody td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
    flex: 0 0 40%; font-size: 0.85em;
  }
  /* Row-header cell (comparison tables put the operator name here). */
  .table--stacked-ly1p tbody th[scope="row"] { font-weight: 700; background: var(--surface); }
}
.site-footer-ly1p {
  padding: 1.5rem 2rem; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.875rem; text-align: center;
  /* auto top-margin pins the footer to the bottom of the flex-column
     body on short pages; on long pages there's no free space so it sits
     right after the content. */
  margin-top: auto;
}

.article__title-ly1p { font-size: 2rem; margin-top: 0; }
.operator-row-ly1p { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin: 0.75rem 0; }
.operator-row-ly1p .logo-ly1p { height: 40px; width: auto; }
/* hero-operator = a featured operator card: logo + name on the left, the
   bonus CTA pushed to the right. Sits in the centred hero/content column. */
.hero-operator-ly1p { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 0.75rem 0; background: var(--surface); }
.hero-operator-ly1p .logo-ly1p { height: 56px; width: auto; border-radius: 8px; }
.hero-operator-ly1p .name-ly1p { margin: 0; font-size: 1.5rem; }
.hero-operator-ly1p .rating-ly1p { color: var(--muted); font-size: 0.95rem; }
.hero-operator-ly1p .cta--hero-ly1p { margin-left: auto; padding: 0.6em 1.4em; font-size: 1.05em; }
.podium-ly1p { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; padding: 0; list-style: none; }
.podium__slot-ly1p { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; text-align: center; }
.podium__slot-ly1p .logo-ly1p { height: 40px; width: auto; }
.cta-ly1p { display: inline-block; background: var(--accent); color: white; padding: 0.4em 0.9em; border-radius: 4px; text-decoration: none; font-weight: 600; }
.ai-image-ly1p figcaption, .image-ly1p figcaption { font-size: 0.85em; color: var(--muted); margin-top: 0.25rem; }
.lede-ly1p { color: var(--muted); font-style: italic; }

/* ===== Wave R section blocks — emitted by render-section-blocks.ts-ly1p =====
 * Active only on sites with sites.layout_config-ly1p set. When unset, the
 * pre-Wave-R fallback chrome (.site-header-ly1p / .site-name-ly1p / .site-footer-ly1p
 * from baseSiteCss) renders instead.
 */

/* slot wrappers */
.layout-slot-ly1p { width: 100%; }
.layout-slot--header-ly1p { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); border-bottom: 1px solid var(--border); background: var(--header-bg, var(--surface)); }
.layout-slot--footer-ly1p { padding: 2rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); margin-top: auto; }
.article-layout-ly1p { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; align-items: start; }
/* Inside the two-column layout the article column owns its width, so drop
   the standalone centring/padding it uses on sidebar-less pages. */
.article-layout-ly1p > .article-ly1p { max-width: none; margin: 2.5rem 0 4rem; padding: 0; }
/* The rail follows the reader down the page (the spec's "фиксированный блок
   справа от контента при скроле"). align-self:start + sticky is what makes a
   grid child stick rather than stretch to the row height. */
.article-layout-ly1p > .layout-slot--sidebar-ly1p { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 900px) {
  /* Not enough width for a rail — stack it under the article and let it
     scroll with the page again. */
  .article-layout-ly1p { grid-template-columns: 1fr; padding: 0 1rem; }
  .article-layout-ly1p > .article-ly1p { margin: 2rem 0; }
  .article-layout-ly1p > .layout-slot--sidebar-ly1p { position: static; max-height: none; overflow: visible; }
}
.layout-slot--sidebar-ly1p { padding: 1rem 1.5rem; background: var(--surface); border-radius: 6px; }
/* Hero slot is centred to the content column like pageBody, so card-style
   blocks (hero-operator, podium, ai-image) sit in the column instead of
   sprawling edge-to-edge. A full-bleed hero-banner escapes this via the
   negative-margin trick below. */
.layout-slot--hero-ly1p { padding: 0 1.5rem; max-width: 1100px; margin: 0 auto 2rem; }
.layout-slot--pageBody-ly1p { padding: 0 1.5rem; max-width: 1100px; margin: 0 auto; }

/* site-logo (4 variants) */
.site-logo-ly1p { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--header-fg, var(--primary)); }
/* White chip behind the logo so a logo generated on a white background
   (the common case) stays visible on ANY header colour — framed on light
   headers, a clean badge on dark/branded ones. */
.site-logo__img-ly1p { height: 40px; width: 40px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.site-logo--logo-only-ly1p .site-logo__name-ly1p { display: none; }
.site-logo--logo-only-ly1p .site-logo__img-ly1p { height: 48px; width: 48px; }
.site-logo--name-only-ly1p .site-logo__img-ly1p { display: none; }
.site-logo--name-below-ly1p { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.site-logo--name-below-ly1p .site-logo__name-ly1p { font-size: 1rem; }

/* site-nav */
.site-nav-ly1p ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav-ly1p a { color: var(--header-fg, var(--fg)); text-decoration: none; font-weight: 500; padding: 0.25rem 0; border-bottom: 2px solid transparent; transition: border-color 120ms ease; }
.site-nav-ly1p a:hover { border-bottom-color: var(--accent); text-decoration: none; }

/* hero-banner */
/* Full-bleed: escape the centred hero slot so the banner image spans the
   whole viewport width (the deliberate full-width hero look). */
.hero-banner-ly1p { position: relative; padding: 4rem 2rem; text-align: center; color: var(--fg); overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hero-banner--bg-primary-ly1p { background: var(--primary); color: white; }
.hero-banner--bg-accent-ly1p { background: var(--accent); color: white; }
.hero-banner--bg-primary-ly1p .hero-banner__title-ly1p,
.hero-banner--bg-accent-ly1p .hero-banner__title-ly1p { color: white; }
.hero-banner--bg-gradient-ly1p { background: linear-gradient(135deg, var(--grad-from), var(--grad-to)); color: white; }
.hero-banner--bg-gradient-ly1p .hero-banner__title-ly1p { color: white; }
.hero-banner--bg-hero-image-ly1p { color: white; }
.hero-banner--bg-hero-image-ly1p::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; }
.hero-banner--bg-hero-image-ly1p .hero-banner__inner-ly1p { position: relative; z-index: 1; }
.hero-banner--bg-hero-image-ly1p .hero-banner__title-ly1p { color: white; }
/* hero image used as the default background (any mode except solid). The
   overlay keeps text legible over an arbitrary photo; gradient mode tints
   the photo with the brand gradient instead of flat black. */
.hero-banner--has-image-ly1p { color: white; }
.hero-banner--has-image-ly1p::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: none; }
.hero-banner--has-image-ly1p .hero-banner__inner-ly1p { position: relative; z-index: 1; }
.hero-banner--has-image-ly1p .hero-banner__title-ly1p { color: white; }
.hero-banner--bg-gradient-ly1p.hero-banner--has-image-ly1p::before { background: linear-gradient(135deg, color-mix(in srgb, var(--grad-from) 65%, transparent), color-mix(in srgb, var(--grad-to) 55%, transparent)); }
.hero-banner__inner-ly1p { max-width: 760px; margin: 0 auto; }
.hero-banner__title-ly1p { font-size: 2.75rem; margin: 0 0 0.5rem; }
.hero-banner__sub-ly1p { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.9; }
.hero-banner__cta-ly1p { display: inline-block; background: var(--accent); color: white; padding: 0.65rem 1.5rem; border-radius: 6px; font-weight: 600; text-decoration: none; transition: transform 120ms ease; }
.hero-banner__cta-ly1p:hover { transform: translateY(-1px); text-decoration: none; }
.hero-banner--bg-gradient-ly1p .hero-banner__cta-ly1p,
.hero-banner--bg-hero-image-ly1p .hero-banner__cta-ly1p,
.hero-banner--has-image-ly1p .hero-banner__cta-ly1p,
.hero-banner--bg-primary-ly1p .hero-banner__cta-ly1p,
.hero-banner--bg-accent-ly1p .hero-banner__cta-ly1p { background: white; color: var(--primary); }

/* article-list-grid (multiple variants — grid / list / cards) */
/* variants match the schema enum: compact | card | full (default card).
   'card' = grid of bordered cards (thumb on top); 'compact' = tight list
   (thumb left, base row); 'full' = spacious stacked (thumb on top). */
.article-list--card-ly1p { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; padding: 0; }
.article-list--compact-ly1p, .article-list--full-ly1p { padding: 0; }
.article-card--card-ly1p { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; transition: border-color 140ms ease, box-shadow 140ms ease; flex-direction: column; align-items: stretch; }
.article-card--card-ly1p:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
.article-card--card-ly1p .article-card__thumb-ly1p { width: 100%; }
.article-card--compact-ly1p { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.article-card--compact-ly1p .article-card__thumb-ly1p { width: 96px; aspect-ratio: 1 / 1; }
.article-card--full-ly1p { padding: 1.5rem 0; border-bottom: 1px solid var(--border); flex-direction: column; align-items: stretch; }
.article-card--full-ly1p .article-card__thumb-ly1p { width: 100%; aspect-ratio: 16 / 9; }
.article-card--card-ly1p h3, .article-card--compact-ly1p h3, .article-card--full-ly1p h3 { margin: 0 0 0.4rem; font-size: 1.125rem; }
.article-card--card-ly1p h3 a, .article-card--compact-ly1p h3 a, .article-card--full-ly1p h3 a { color: var(--primary); }
.article-card--card-ly1p p, .article-card--compact-ly1p p, .article-card--full-ly1p p { margin: 0; font-size: 0.9rem; color: var(--muted); }

/* featured-article — bigger spotlight card */
.featured-article-ly1p { background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; margin: 1.5rem 0; }
.featured-article-ly1p h2 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.featured-article-ly1p h2 a { color: var(--primary); }
.featured-article-ly1p p { margin: 0; font-size: 1.05rem; color: var(--fg); }

/* newsletter-cta */
.newsletter-cta-ly1p { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0; text-align: center; }
.newsletter-cta-ly1p h3 { margin: 0 0 1rem; }
.newsletter-cta__form-ly1p { display: flex; gap: 0.5rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.newsletter-cta__form-ly1p input[type="email"] { flex: 1 1 220px; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.newsletter-cta__form-ly1p button { background: var(--accent); color: white; border: none; padding: 0.65rem 1.25rem; border-radius: 6px; font-weight: 600; cursor: pointer; }
.newsletter-cta__form-ly1p button:hover { filter: brightness(1.05); }

/* author-bio */
.author-bio-ly1p { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; }
.author-bio__avatar-ly1p { grid-row: span 3; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author-bio-ly1p h4 { margin: 0; font-size: 1.05rem; }
.author-bio-ly1p p { margin: 0.25rem 0 0.5rem; font-size: 0.95rem; color: var(--muted); }
.author-bio__socials-ly1p { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.author-bio__social-ly1p { font-size: 0.85rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); color: var(--fg); text-transform: capitalize; text-decoration: none; }
.author-bio__social-ly1p:hover { background: var(--accent); color: white; border-color: var(--accent); text-decoration: none; }

/* footer-links */
.footer-links-ly1p { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; max-width: 1100px; margin: 0 auto; }
.footer-links__col-ly1p h5 { margin: 0 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg); }
.footer-links__col-ly1p ul { list-style: none; padding: 0; margin: 0; }
.footer-links__col-ly1p li { margin: 0.4rem 0; }
.footer-links__col-ly1p a { color: var(--muted); font-size: 0.9rem; }
.footer-links__col-ly1p a:hover { color: var(--accent); }

/* footer-disclaimer */
.footer-disclaimer-ly1p { max-width: 1100px; margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.825rem; color: var(--muted); text-align: center; }
.footer-disclaimer-ly1p strong { color: var(--fg); }

/* rich fallback footer (sites with no configured footer slot) */
.site-footer--rich-ly1p { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.site-footer--rich-ly1p .site-footer__name-ly1p { font-weight: 700; color: var(--fg); font-size: 1.05rem; }
.site-footer--rich-ly1p .site-footer__tagline-ly1p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.site-footer--rich-ly1p .footer-disclaimer-ly1p { width: 100%; }
.site-footer--rich-ly1p .site-footer__legal-ly1p { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* bonus-badges */
.bonus-badges-ly1p { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0; }
.bonus-badge-ly1p { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 120px; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.bonus-badge__icon-ly1p { font-size: 1.5rem; line-height: 1; }
.bonus-badge__value-ly1p { font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: var(--primary); }
.bonus-badge__label-ly1p { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }

/* offer-hero */
.offer-hero-ly1p { border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; margin: 1.5rem 0; text-align: center; background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%); }
.offer-hero__inner-ly1p { max-width: 640px; margin: 0 auto; }
.offer-hero__eyebrow-ly1p { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--accent); margin: 0 0 0.5rem; font-weight: 700; }
.offer-hero__headline-ly1p { font-size: 2.5rem; margin: 0 0 0.75rem; color: var(--primary); }
.offer-hero__sub-ly1p { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.5rem; }
.offer-hero__cta-ly1p { display: inline-block; background: var(--accent); color: #fff; padding: 0.8rem 2rem; border-radius: 8px; font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.offer-hero__cta-ly1p:hover { filter: brightness(1.05); text-decoration: none; }
.offer-hero__fine-ly1p { font-size: 0.75rem; color: var(--muted); margin: 1rem 0 0; }

/* operator-tiles */
.operator-tiles-ly1p { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.operator-tile-ly1p { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.operator-tile-ly1p:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,0.10); text-decoration: none; }
.operator-tile__logo-ly1p { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.operator-tile__bonus-ly1p { font-size: 0.8rem; color: var(--muted); text-align: center; }

/* operator-placeholder — stub for Phase 3.2 operator binding */
.operator-placeholder-ly1p { padding: 1rem; border: 1px dashed var(--muted); border-radius: 6px; color: var(--muted); font-style: italic; text-align: center; margin: 1rem 0; }

/* rating-table (S-03) — the site's assigned rating, ordered brand cards */
.rating-table-ly1p { margin: 1.5rem 0; }
.rating-table__heading-ly1p { font-size: 1.5rem; margin: 0 0 1rem; color: var(--primary); }
.rating-table__list-ly1p { display: flex; flex-direction: column; gap: 0.75rem; }
.rating-card-ly1p { display: grid; grid-template-columns: auto 56px 1fr auto auto; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.rating-card__rank-ly1p { font-weight: 700; color: var(--accent); font-size: 1.05rem; min-width: 1.2em; text-align: center; }
.rating-card__logo-ly1p { height: 40px; width: 56px; object-fit: contain; }
.rating-card__logo--ph-ly1p { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--bg); color: var(--muted); font-weight: 700; }
.rating-card__name-ly1p { font-weight: 600; color: var(--fg); }
.rating-card__bonus-ly1p { color: var(--muted); font-size: 0.9rem; }
.rating-card__cta-ly1p { display: inline-block; background: var(--accent); color: #fff; padding: 0.55rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.rating-card__cta-ly1p:hover { filter: brightness(1.05); text-decoration: none; }
.rating-card__score-ly1p { font-weight: 700; color: var(--primary); white-space: nowrap; }
@media (max-width: 640px) {
  .rating-card-ly1p { grid-template-columns: auto 44px 1fr; row-gap: 0.5rem; }
  .rating-card__cta-ly1p, .rating-card__score-ly1p { grid-column: 2 / -1; justify-self: start; }
}

/* site-type chrome (spec: Типы Сайтов) */
/* Scroll-snap rail — the swipe feel of a carousel with no runtime JS. */
.rail-ly1p { margin: 1.5rem 0; }
.rail__heading-ly1p { font-size: 1.35rem; margin: 0 0 0.75rem; color: var(--primary); }
.rail__track-ly1p { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.rail__item-ly1p { flex: 0 0 auto; scroll-snap-align: start; width: 132px; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; text-align: center; text-decoration: none; color: var(--fg); }
.rail__item-ly1p img { width: 132px; height: 132px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.rail__item-ly1p span { font-size: 0.8rem; color: var(--muted); }
.rail__item--logo-ly1p { width: auto; }
.rail__item--logo-ly1p img { width: auto; height: 44px; padding: 0.4rem 0.8rem; object-fit: contain; }

/* game-stats — reuses the responsive table rules from S-10a */
.game-stats-ly1p { margin: 1.5rem 0; }
.game-stats__heading-ly1p { font-size: 1.35rem; margin: 0 0 0.75rem; color: var(--primary); }
.game-stats-ly1p th[scope="row"] { width: 40%; background: var(--surface); }

/* game-demo */
.game-demo-ly1p { margin: 1.5rem 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); }
.game-demo-ly1p iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
.game-demo--placeholder-ly1p { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; }
.game-demo__poster-ly1p { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-demo__label-ly1p { position: relative; z-index: 1; background: var(--accent); color: #fff; padding: 0.7rem 1.6rem; border-radius: 999px; font-weight: 700; }

/* header CTA (Login / PLAY) */
.header-cta-ly1p { background: var(--accent); color: #fff; padding: 0.5rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.header-cta-ly1p:hover { filter: brightness(1.05); text-decoration: none; }

/* Sticky navbar — the spec asks for a header that stays on scroll. */
.layout-slot--header-ly1p { position: sticky; top: 0; z-index: 50; }

/* cta-button (S-10): operator-placed CTA inside the article body */
.cta-block-ly1p { margin: 1.5rem 0; }
.cta-block--center-ly1p { text-align: center; }
.cta-block--full-ly1p .cta-ly1p { display: block; text-align: center; }
.cta-block__fine-ly1p { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--muted); }

/* author-bio extras (S-10): job title + last-updated line */
.author-bio__role-ly1p { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted); }
.author-bio__updated-ly1p { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--muted); }
.author-bio__updated-ly1p time { background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 0.15rem 0.5rem; border-radius: 999px; }

/* home-content (S-08) — article body published into the home page */
.home-content-ly1p { max-width: 1100px; margin: 0 auto 2rem; padding: 0 1.5rem; }
@media (max-width: 640px) { .home-content-ly1p { padding: 0 1rem; } }

/* cookie-banner (S-15) — fixed consent bar, dismissed via localStorage */
.cookie-banner-ly1p { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1.25rem; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
.cookie-banner-ly1p[hidden] { display: none; }
.cookie-banner__text-ly1p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.cookie-banner__link-ly1p { color: var(--accent); }
.cookie-banner__accept-ly1p { background: var(--accent); color: #fff; border: 0; padding: 0.5rem 1.4rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.cookie-banner__accept-ly1p:hover { filter: brightness(1.05); }

/* floating-banner (S-12) — promo, bottom-right desktop / bottom mobile */
.floating-banner-ly1p { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9998; max-width: 320px; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); }
.floating-banner-ly1p[hidden] { display: none; }
.floating-banner__close-ly1p { position: absolute; top: 0.35rem; right: 0.55rem; background: none; border: 0; font-size: 1.15rem; line-height: 1; color: var(--muted); cursor: pointer; }
.floating-banner__heading-ly1p { margin: 0 0 0.35rem; font-weight: 700; color: var(--primary); font-size: 0.95rem; }
.floating-banner__text-ly1p { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--muted); }
.floating-banner__cta-ly1p { display: inline-block; background: var(--accent); color: #fff; padding: 0.55rem 1.2rem; border-radius: 8px; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.floating-banner__cta-ly1p:hover { filter: brightness(1.05); text-decoration: none; }
@media (max-width: 640px) {
  .floating-banner-ly1p { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
}

/* mobile */
@media (max-width: 640px) {
  .layout-slot--header-ly1p { padding: 0.75rem 1rem; }
  .layout-slot--pageBody-ly1p { padding: 0 1rem; }
  .layout-slot--hero-ly1p { padding: 0 1rem; }
  .hero-operator-ly1p { flex-direction: column; align-items: flex-start; }
  .hero-operator-ly1p .cta--hero-ly1p { margin-left: 0; }
  .hero-banner-ly1p { padding: 2.5rem 1.25rem; }
  .hero-banner__title-ly1p { font-size: 1.875rem; }
  .author-bio-ly1p { grid-template-columns: 1fr; text-align: center; }
  .author-bio__avatar-ly1p { grid-row: auto; margin: 0 auto; }
}

:root { --header-bg: var(--surface); --header-fg: var(--fg); }