/* ==========================================================================
   REBORN — SEO LANDING PAGES

   Carries the theme onto the 16 /ru/* and /en/* landing pages, which are built
   on seo-pages.css and share nothing with the rest of the site: their own
   header, footer and nav rather than the site-chrome custom elements, and a
   small vocabulary of their own (.hero, .card, .button, .fact-strip, .cta …).

   They get their own file rather than reborn-pages.css because these are the
   pages people land on cold from search — pulling in 75KB of launcher, store
   and knowledge-base rules to style a 48-class stylesheet would be the wrong
   trade on the very pages where first paint matters most.

   Load order: /seo-pages.css, then /reborn-core.css, then this file.

   seo-pages.css is almost entirely token-driven, so the remap in section 1
   does most of the work; sections 2+ only handle what it hardcoded past its
   own variables (6 ink colours, 7 near-black panels).
   ========================================================================== */

/* ===== 1. Tokens ===== */
.frontline-reborn {
  --bg: var(--reset-bg);
  --panel: var(--reset-panel);
  --panel-strong: var(--reset-panel-raised);
  --ink: var(--reset-cream);
  --muted: var(--reset-muted);
  --line: var(--reset-line-strong);
  --accent: var(--reset-ink-sun);
  --accent-2: var(--reset-ink-sky);
  --heading-font-family: Rubik, "Segoe UI", system-ui, sans-serif;
  --page-width: var(--shell-max);
}

body.frontline-reborn {
  color: var(--reset-cream);
  background:
    radial-gradient(60rem 40rem at 12% -8%, rgba(255, 192, 46, .1), transparent 65%),
    radial-gradient(52rem 38rem at 92% 4%, rgba(103, 175, 209, .09), transparent 68%),
    var(--reset-bg);
  background-attachment: fixed;
  font-family: var(--body-copy-font-family);
}

.frontline-reborn .container { width: var(--shell); max-width: none; }

/* ===== 2. Typography ===== */
.frontline-reborn :is(h1, h2, h3, h4, .price) {
  color: var(--reset-cream);
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: -.018em;
  text-transform: none;
  text-wrap: balance;
}
.frontline-reborn h1 { font-size: var(--fs-2xl); line-height: 1.08; }
.frontline-reborn h2 { font-size: var(--fs-xl); line-height: 1.14; }
.frontline-reborn h3 { font-size: var(--fs-md); line-height: 1.24; }
.frontline-reborn .lead {
  max-width: 56ch;
  color: var(--reset-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.frontline-reborn :is(.prose p, .prose li, .breadcrumbs, .hero__note, .cta p) {
  color: var(--reset-muted);
}
.frontline-reborn .prose :is(h2, h3) { margin-top: 2rem; }
.frontline-reborn a { color: var(--reset-ink-coral); }
.frontline-reborn .accent-text {
  padding-inline: .08em;
  color: var(--reset-cream);
  background-image: linear-gradient(var(--reset-sun), var(--reset-sun));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% .34em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* The mono eyebrow keeps its role but drops the orange. */
.frontline-reborn .eyebrow { color: var(--reset-ink-sun); }

/* ===== 3. Header and nav ===== */
.frontline-reborn .site-header {
  border-bottom: 1px solid var(--reset-line);
  background: var(--reset-header-bg);
  backdrop-filter: none;
}
.frontline-reborn .brand {
  color: var(--reset-cream);
  font-family: var(--heading-font-family);
  font-weight: 800;
  letter-spacing: .015em;
}
/* minilogo.png is a white glyph on transparent — invisible on a light ground,
   so it becomes the dark disc it was drawn for, as in the main site chrome. */
.frontline-reborn .brand img {
  border: 2px solid var(--reset-cream);
  border-radius: 50%;
  background: var(--reset-logo-disc);
  box-shadow: 3px 3px 0 var(--reset-shadow);
}
.frontline-reborn .desktop-nav a {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--reset-muted);
  font-family: var(--heading-font-family);
}
.frontline-reborn .desktop-nav a:hover,
.frontline-reborn .desktop-nav a[aria-current="page"] {
  border-color: var(--reset-cream);
  color: var(--reset-cream);
  background: var(--reset-panel);
}
.frontline-reborn .desktop-nav .lang-link {
  border-color: var(--reset-cream);
  color: var(--reset-cream);
}
.frontline-reborn :is(.mobile-nav summary, .mobile-nav__panel) {
  border: 1.5px solid var(--reset-cream);
  border-radius: 12px;
  color: var(--reset-cream);
  background: var(--reset-panel);
}
.frontline-reborn .mobile-nav__panel {
  box-shadow: 4px 4px 0 var(--reset-shadow);
}
.frontline-reborn .mobile-nav__panel a { color: var(--reset-cream); }
.frontline-reborn .skip-link {
  color: #2a200e;
  background: var(--reset-sun);
}

/* ===== 4. Buttons ===== */
.frontline-reborn .button {
  min-height: 46px;
  border: 1.5px solid var(--reset-cream);
  border-radius: 999px;
  color: var(--reset-cream);
  background: var(--reset-surface);
  box-shadow: 3px 3px 0 var(--reset-shadow);
  font-family: var(--heading-font-family);
  font-weight: 700;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.frontline-reborn .button--primary {
  color: #2a200e;
  background: var(--reset-sun);
}
.frontline-reborn .button--secondary { background: transparent; }
.frontline-reborn .button:hover {
  color: #2a170f;
  border-color: var(--reset-cream);
  background: var(--reset-coral);
  box-shadow: 1px 1px 0 var(--reset-shadow);
  transform: translate(2px, 2px);
}
.frontline-reborn .button:active {
  box-shadow: 0 0 0 var(--reset-shadow);
  transform: translate(3px, 3px);
}

/* ===== 5. Sections and surfaces ===== */
.frontline-reborn :is(.hero, .section) { border-bottom: 1.5px dashed var(--reset-line); }
.frontline-reborn .section--muted { background: transparent; }

/* One card recipe, cycling four accents so a grid reads as a set. */
.frontline-reborn .card {
  --card-accent: var(--reset-sun);
  border: 2px solid var(--card-accent);
  border-radius: 16px;
  color: var(--reset-cream);
  background: var(--reset-panel);
  box-shadow: 4px 4px 0 var(--reset-shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.frontline-reborn :is(.grid-2, .grid-3, .grid-4, .pricing-cards) > .card:nth-child(4n+2) { --card-accent: var(--reset-rose); }
.frontline-reborn :is(.grid-2, .grid-3, .grid-4, .pricing-cards) > .card:nth-child(4n+3) { --card-accent: var(--reset-sky); }
.frontline-reborn :is(.grid-2, .grid-3, .grid-4, .pricing-cards) > .card:nth-child(4n+4) { --card-accent: var(--reset-coral); }
.frontline-reborn .card:hover {
  box-shadow: 7px 7px 0 var(--reset-shadow);
  transform: translate(-3px, -3px);
}
.frontline-reborn .card__index {
  color: var(--reset-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Pricing tiles take the saturated fills the homepage uses. */
.frontline-reborn .pricing-cards > .card {
  --card-accent: var(--reset-cream);
  color: var(--reset-tile-ink);
  background: var(--reset-sun);
}
.frontline-reborn .pricing-cards > .card:nth-child(2) { background: var(--reset-rose); }
.frontline-reborn .pricing-cards > .card:nth-child(3) { background: var(--reset-sky); }
/* Everything inside a saturated tile takes the single dark tile ink — the
   muted grey is tuned for the page ground and drops to ~2:1 on sky and rose. */
.frontline-reborn .pricing-cards > .card :is(h2, h3, h4, p, li, ul, ol, strong,
  span, small, em, b, i, dt, dd, .price, .eyebrow, .status) {
  color: currentColor;
  opacity: 1;
}
.frontline-reborn .pricing-cards > .card .button {
  border-color: #241d14;
  color: #241d14;
  background: var(--reset-control-surface);
}
.frontline-reborn .pricing-cards > .card :is(a, button):focus-visible { outline-color: var(--reset-tile-ink); }

/* The stat strip: one hairline grid on a panel, not a black slab. */
.frontline-reborn .fact-strip {
  border: 2px solid var(--reset-cream);
  background: var(--reset-line-strong);
  box-shadow: 4px 4px 0 var(--reset-shadow);
}
.frontline-reborn .fact-strip li {
  color: var(--reset-cream);
  background: var(--reset-panel);
}

/* Artwork frame — the corner brackets were the old HUD signature. */
.frontline-reborn .media-card {
  border: 2px solid var(--reset-cream);
  border-radius: 16px;
  background: var(--reset-panel);
  box-shadow: 5px 5px 0 var(--reset-shadow);
}
.frontline-reborn .media-card::before,
.frontline-reborn .media-card::after { display: none; }
.frontline-reborn .media-card img,
.frontline-reborn .media-card video { filter: saturate(.92) contrast(1.04); }
.frontline-reborn .media-card.media-card--brand,
.frontline-reborn .media-card.media-card--brand-poster { background: #0c0d11; }
.frontline-reborn .media-card.media-card--brand img {
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}
.frontline-reborn .media-card.media-card--brand-poster video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
/* This label sits on the artwork, so it keeps a dark plate and light type. */
.frontline-reborn .media-card__label {
  border: 1px solid rgba(247, 242, 232, .3);
  color: var(--reset-on-image);
  background: rgba(20, 17, 12, .82);
}

.frontline-reborn .cta {
  border: 2px solid var(--reset-ink-sky);
  border-radius: 18px;
  color: var(--reset-cream);
  background-color: var(--reset-panel);
  background-image: radial-gradient(var(--reset-dot) 1px, transparent 1px);
  background-size: 18px 18px;
  box-shadow: 6px 6px 0 var(--reset-shadow);
}

.frontline-reborn .notice {
  border-left: 3px solid var(--reset-ink-sky);
  border-radius: 0 12px 12px 0;
  color: var(--reset-cream);
  background: var(--reset-panel);
}
.frontline-reborn .notice--warning { border-left-color: var(--reset-ink-warn); }

.frontline-reborn .status {
  border: 1.5px solid var(--reset-ink-sky);
  color: var(--reset-ink-sky);
  background: var(--reset-surface);
}
.frontline-reborn .status--planned {
  border-color: var(--reset-ink-warn);
  color: var(--reset-ink-warn);
}

.frontline-reborn .table-wrap {
  border: 2px solid var(--reset-cream);
  border-radius: 16px;
  background: var(--reset-panel);
  box-shadow: 4px 4px 0 var(--reset-shadow);
}
.frontline-reborn :is(th, td) { border-color: var(--reset-line); }
.frontline-reborn th {
  color: var(--reset-cream);
  background: var(--reset-panel-raised);
}
.frontline-reborn td { color: var(--reset-cream); }

.frontline-reborn .faq :is(details, summary) {
  border-color: var(--reset-line-strong);
  color: var(--reset-cream);
  background: transparent;
}
.frontline-reborn .faq summary { font-family: var(--heading-font-family); }

.frontline-reborn .check-list li::marker,
.frontline-reborn .check-list li::before { color: var(--reset-ink-ok); }

/* ===== 6. Footer ===== */
.frontline-reborn .site-footer {
  border-top: 1px solid var(--reset-line);
  color: var(--reset-cream);
  background: var(--reset-panel);
}
.frontline-reborn :is(.site-footer a, .footer-bottom) { color: var(--reset-muted); }
.frontline-reborn .site-footer a:hover { color: var(--reset-cream); }
.frontline-reborn .site-footer :is(h3, h4, strong) { color: var(--reset-cream); }

/* ===== 7. Theme toggle =====
   These pages have no site-chrome header, so home-theme.js mounts the button
   into .desktop-nav instead. It is a nav item here, not a floating control. */
.frontline-reborn .desktop-nav button.home-theme-toggle {
  display: inline-flex;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--reset-cream);
  border-radius: 999px;
  color: var(--reset-cream);
  background: var(--reset-surface);
  box-shadow: 3px 3px 0 var(--reset-shadow);
  cursor: pointer;
}
.frontline-reborn .desktop-nav button.home-theme-toggle:hover {
  color: #241b0c;
  background: var(--reset-sky);
  box-shadow: 1px 1px 0 var(--reset-shadow);
  transform: translate(2px, 2px);
}
.frontline-reborn .desktop-nav .home-theme-toggle__label { display: none; }

.frontline-reborn a:focus-visible,
.frontline-reborn button:focus-visible {
  outline: 3px solid var(--reset-ink-coral);
  outline-offset: 3px;
}

.frontline-reborn .public-price-table { min-width:0; table-layout:fixed; }
.frontline-reborn .public-price-table :is(th,td) { width:auto; padding:.75rem; overflow-wrap:anywhere; }
.frontline-reborn :is(#buyer-details, #catalog-status) table { min-width:0; table-layout:fixed; }
.frontline-reborn :is(#buyer-details, #catalog-status) :is(th,td) { padding:.75rem; overflow-wrap:anywhere; }
.frontline-reborn #buyer-details th:first-child { width:30%; }
.frontline-reborn #catalog-status th:nth-child(1) { width:42%; }
.frontline-reborn #catalog-status th:nth-child(2) { width:22%; }
.frontline-reborn #catalog-status th:nth-child(3) { width:36%; }
.frontline-reborn section[id] { scroll-margin-top:5rem; }