:root {
  color-scheme: dark;
  --public-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --public-color-canvas: #11110f;
  --public-color-surface: #1b1b18;
  --public-color-text: #f7f3eb;
  --public-color-text-soft: #d4cfc5;
  --public-color-muted: #b9b4aa;
  --public-color-action: #ff9f0a;
  --public-color-action-strong: #f57c00;
  --public-color-border: rgba(255, 171, 36, 0.24);
  --public-color-border-subtle: rgba(255, 255, 255, 0.09);
  --public-color-focus: #ffb21a;
  --public-control-min-height: 50px;
  --public-control-radius: 14px;
  --public-panel-radius: 24px;
  --public-focus-ring-width: 3px;
  --public-focus-ring-offset: 3px;
  --public-motion-duration-fast: 140ms;
  --public-motion-easing-standard: cubic-bezier(.2, .8, .2, 1);
  --public-document-copy: #cbc5b9;
  --public-document-meta: #8f8a80;
  --public-notice-surface: #2b2110;
  --public-notice-text: #ffd36b;
  font-family: var(--public-font-family);
  color: var(--public-color-text);
  background: var(--public-color-canvas);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: radial-gradient(circle at 50% 0, rgba(255, 139, 0, .12), transparent 34rem), var(--public-color-canvas); }
a { color: inherit; }
.seo-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; padding: 12px max(22px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid var(--public-color-border); background: rgba(17, 17, 15, .92); backdrop-filter: blur(18px); }
.seo-brand { display: flex; min-width: 0; align-items: center; gap: 12px; text-decoration: none; }
.seo-brand img { width: 54px; height: 54px; object-fit: contain; }
.seo-brand span { display: grid; min-width: 0; gap: 2px; }
.seo-brand strong { font-size: 17px; white-space: nowrap; }
.seo-brand small, footer, .seo-zone small { color: var(--public-color-muted); }
.seo-phone { display: inline-flex; min-height: 42px; flex: 0 0 auto; align-items: center; justify-content: center; padding: 11px 16px; border: 1px solid var(--public-color-border); border-radius: 999px; color: #fff; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; text-decoration: none; white-space: nowrap; }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.seo-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 330px); gap: 32px; align-items: stretch; padding: 76px 0 44px; }
.seo-hero__copy { padding: 18px 0; }
.seo-eyebrow { margin: 0 0 12px; color: var(--public-color-action); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
h1, h2, p { text-wrap: pretty; }
h1 { max-width: 820px; margin: 0; font-size: clamp(38px, 7vw, 76px); line-height: .98; letter-spacing: -.045em; }
h2 { margin: 0 0 16px; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.seo-lead { max-width: 760px; margin: 24px 0 0; color: var(--public-color-text-soft); font-size: clamp(17px, 2.2vw, 22px); line-height: 1.55; }
.seo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.seo-actions a { min-height: var(--public-control-min-height); padding: 15px 20px; border-radius: var(--public-control-radius); font-weight: 850; text-align: center; text-decoration: none; }
.seo-primary { color: #17130c; background: linear-gradient(135deg, #ffc13b, var(--public-color-action)); box-shadow: 0 14px 34px rgba(245, 124, 0, .2); }
.seo-secondary { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.045); }
.seo-zone { display: flex; flex-direction: column; justify-content: flex-end; min-height: 330px; padding: 28px; overflow: hidden; border: 1px solid var(--public-color-border); border-radius: 28px; background: radial-gradient(circle at 78% 16%, rgba(255, 158, 0, .36), transparent 36%), linear-gradient(145deg, #231a0f, #171714); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.seo-zone::before { content: "⌖"; margin-bottom: auto; color: var(--public-color-action); font-size: 52px; }
.seo-zone strong { font-size: clamp(42px, 6vw, 68px); letter-spacing: -.06em; }
.seo-zone span { margin: 2px 0 14px; font-weight: 750; }
.seo-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 30px 0; }
.seo-content article, .seo-faq, .seo-related { padding: clamp(24px, 4vw, 38px); border: 1px solid var(--public-color-border-subtle); border-radius: var(--public-panel-radius); background: var(--public-color-surface); }
.seo-content ul, .seo-content ol { display: grid; gap: 13px; margin: 22px 0; padding-left: 22px; color: #eee8dd; line-height: 1.5; }
.seo-content article > p:last-child { color: var(--public-color-muted); line-height: 1.6; }
.seo-faq { margin: 18px 0; }
.seo-faq > div { display: grid; gap: 10px; }
details { padding: 18px 20px; border: 1px solid var(--public-color-border-subtle); border-radius: 16px; background: rgba(255,255,255,.025); }
summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; cursor: pointer; list-style: none; font-weight: 800; }
summary::-webkit-details-marker { display: none; }
summary::after { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; content: ""; transform: rotate(45deg); transform-origin: center; transition: transform var(--public-motion-duration-fast) var(--public-motion-easing-standard); }
details p { margin: 12px 0 0; color: var(--public-color-muted); line-height: 1.6; }
.seo-related { margin: 18px 0 50px; }
.seo-related > div { display: flex; flex-wrap: wrap; gap: 10px; }
.seo-related a { padding: 11px 14px; border: 1px solid var(--public-color-border); border-radius: 999px; color: #efe9df; font-size: 14px; text-decoration: none; }
.seo-related a[aria-current="page"] { color: #17130c; background: var(--public-color-action); }
footer { display: flex; justify-content: space-between; gap: 18px; padding: 26px max(22px, calc((100vw - 1120px) / 2)); border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; }

.seo-brand,
summary {
  transition: color var(--public-motion-duration-fast) var(--public-motion-easing-standard);
}

.seo-phone,
.seo-secondary {
  transition:
    color var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    border-color var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    background-color var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    transform var(--public-motion-duration-fast) var(--public-motion-easing-standard);
}

.seo-related a,
details {
  transition:
    color var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    border-color var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    background-color var(--public-motion-duration-fast) var(--public-motion-easing-standard);
}

.seo-primary {
  transition:
    box-shadow var(--public-motion-duration-fast) var(--public-motion-easing-standard),
    transform var(--public-motion-duration-fast) var(--public-motion-easing-standard);
}

details[open] {
  border-color: var(--public-color-border);
  background-color: color-mix(in srgb, var(--public-color-action) 6%, transparent);
}

details[open] summary { color: var(--public-color-action); }
details[open] summary::after { transform: rotate(225deg); }

@media (hover: hover) and (pointer: fine) {
  .seo-brand:hover,
  summary:hover { color: var(--public-color-action); }
  .seo-phone:hover,
  .seo-secondary:hover,
  .seo-related a:not([aria-current="page"]):hover {
    border-color: var(--public-color-action);
    background-color: color-mix(in srgb, var(--public-color-action) 8%, transparent);
  }
  .seo-primary:hover {
    box-shadow: 0 16px 38px color-mix(in srgb, var(--public-color-action-strong) 28%, transparent);
    transform: translateY(-1px);
  }
}

.seo-actions a:active,
.seo-phone:active { transform: translateY(1px); }

:is(a, summary):focus-visible {
  outline: var(--public-focus-ring-width) solid var(--public-color-focus);
  outline-offset: var(--public-focus-ring-offset);
}

html.public-theme-light {
  color-scheme: light;
  --public-font-family: system-ui, sans-serif;
  --public-color-canvas: #f5f5f3;
  --public-color-surface: #fff;
  --public-color-text: #20201e;
  --public-color-text-soft: #3f3f3a;
  --public-color-muted: #5c5c57;
  --public-color-action: #b46b00;
  --public-color-action-strong: #8d5300;
  --public-color-border: #b46b00;
  --public-color-border-subtle: #deded8;
  --public-color-focus: #9b5c00;
  --public-control-radius: 12px;
  --public-document-copy: #343430;
  --public-document-meta: #5c5c57;
  --public-notice-surface: #fff4df;
  --public-notice-text: #20201e;
}

body.public-document:not(.public-document--loyalty) {
  --public-color-text: #f5f1e8;
  --public-color-action: #efa91e;
  --public-color-focus: #efa91e;
}

body.public-document {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 18px 64px;
  color: var(--public-color-text);
  background: var(--public-color-canvas);
  font: 16px/1.55 var(--public-font-family);
}
.public-document main { box-sizing: border-box; width: 100%; max-width: 820px; margin: 0 auto; padding: 0; overflow-wrap: anywhere; }
.public-document--loyalty { max-width: none; padding: 0; }
.public-document--loyalty main { padding: 24px 18px 48px; }
.public-document .notice { padding: 14px 16px; border: 1px solid var(--public-color-action); border-radius: var(--public-control-radius); color: var(--public-notice-text); background: var(--public-notice-surface); }
.public-document h1 { max-width: none; margin: 28px 0 8px; font-size: clamp(28px, 7vw, 42px); line-height: 1.05; letter-spacing: normal; }
.public-document--loyalty h1 { margin: .67em 0; font-size: 28px; line-height: 1.2; }
.public-document h2 { margin: 28px 0 16px; font-size: 19px; line-height: 1.2; letter-spacing: normal; }
.public-document--loyalty h2 { font-size: 20px; }
.public-document :is(p, li) { color: var(--public-document-copy); }
.public-document .meta { color: var(--public-document-meta); font-size: 13px; }
.public-document a { color: var(--public-color-action); }
.public-document .third-party-notice { margin: 12px 0; }
.public-document .third-party-notice summary { overflow-wrap: anywhere; }
.public-document .third-party-notice pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.public-document table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }
.public-document :is(th, td) {
  padding: 10px 8px;
  overflow-wrap: anywhere;
  border: 1px solid var(--public-color-border-subtle);
  text-align: left;
  vertical-align: top;
}

@media (forced-colors: active) {
  :is(a, summary):focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .seo-brand,
  .seo-phone,
  .seo-actions a,
  .seo-related a,
  details,
  summary,
  summary::after { transition: none; }
  .seo-primary:hover,
  .seo-actions a:active,
  .seo-phone:active { transform: none; }
}
@media (max-width: 720px) {
  .seo-header { gap: 8px; min-height: 72px; padding: 9px 12px; }
  .seo-brand img { width: 46px; height: 46px; }
  .seo-brand { gap: 8px; }
  .seo-brand strong { font-size: 14px; }
  .seo-brand small { font-size: 10px; }
  .seo-phone { min-height: 38px; padding: 9px 10px; font-size: 12px; }
  main { width: min(100% - 24px, 620px); }
  .seo-hero { grid-template-columns: 1fr; gap: 14px; padding: 40px 0 24px; }
  .seo-hero__copy { padding: 0; }
  h1 { font-size: clamp(37px, 12vw, 58px); }
  .seo-zone { min-height: 230px; padding: 22px; border-radius: 22px; }
  .seo-content { grid-template-columns: 1fr; padding-top: 18px; }
  .seo-content article, .seo-faq, .seo-related { padding: 22px; border-radius: 20px; }
  footer { flex-direction: column; padding: 22px 16px; }
}

@media (max-width: 360px) {
  .seo-brand img { width: 42px; height: 42px; }
  .seo-brand strong { font-size: 13px; }
  .seo-brand small { display: none; }
  .seo-phone { min-height: 34px; padding: 8px; font-size: 11px; }
}
