:root { color-scheme: light; --paper: #f3f0e8; --ink: #292721; --muted: #69655c; --accent: #a64f35; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.masthead, .hero { max-width: 1280px; margin-inline: auto; }
.masthead { padding: 28px min(6vw, 64px) 20px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; }
.wordmark { max-width: 100%; overflow-wrap: anywhere; font-family: Georgia, serif; font-size: clamp(38px, 5vw, 72px); letter-spacing: -0.065em; line-height: 1; }
.brand-dot { color: var(--accent); }
.descriptor { color: var(--muted); font-size: 14px; }
.hero { padding: 4vh min(6vw, 64px) 36px; display: grid; grid-template-columns: 1fr 1.05fr; column-gap: min(6vw, 64px); align-content: center; min-height: calc(100svh - 120px); }
.intro { grid-column: 1; grid-row: 1; max-width: 550px; }
.eyebrow { margin: 0 0 20px; color: var(--accent); font-size: 14px; }
h1 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -0.045em; margin: 0 0 22px; }
.lead { font-size: 19px; line-height: 1.5; margin: 0 0 16px; max-width: 470px; }
.formats { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.example { margin: 0; grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 0; }
.example img { display: block; width: 100%; height: auto; border-radius: 3px; }
figcaption { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 14px; }
.action { grid-column: 1; grid-row: 2; margin-top: 26px; }
.offer { font-size: 19px; margin: 0 0 18px; }
.offer strong { font-weight: 500; }
.trial { color: var(--muted); font-size: 14px; margin: -9px 0 18px; }
.cta { display: inline-flex; min-height: 54px; padding: 16px 23px; align-items: center; justify-content: space-between; gap: 36px; background: var(--accent); color: #fff; font-size: 16px; text-decoration: none; border-radius: 3px; transition: background 160ms ease, transform 160ms ease; }
.cta span { transition: transform 160ms ease; }
.cta:hover { background: #8e402b; }
.cta:hover span { transform: translate(2px, -2px); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
.afterword { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .intro, .example, .action { animation: arrive 450ms ease-out both; }
  .example { animation-delay: 70ms; }
  .action { animation-delay: 120ms; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 720px) {
  .masthead { padding: 23px 24px 21px; gap: 12px; }
  .wordmark { font-size: 43px; }
  .descriptor { font-size: 11px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 10px 24px 24px; }
  .eyebrow { font-size: 12px; margin-bottom: 12px; }
  h1 { font-size: 38px; margin-bottom: 14px; }
  .lead { font-size: 16px; line-height: 1.45; margin-bottom: 10px; }
  .formats { font-size: 12px; line-height: 1.45; }
  .example { width: 100%; margin-top: 22px; }
  figcaption { font-size: 10px; margin-top: 8px; }
  figcaption span:last-child { display: none; }
  .action { margin-top: 21px; width: 100%; }
  .offer { font-size: 18px; }
  .cta { width: 100%; min-height: 52px; }
  .afterword { font-size: 11px; margin-top: 9px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Оба режима используют одну сохранённую разметку лендинга. */
.landing-page { display: none; }
.status-screen { min-height: 100svh; display: grid; place-items: center; padding: 36px 24px; }
.status-content { width: 100%; max-width: 440px; text-align: center; }
.status-brand { font-family: Georgia, serif; font-size: clamp(56px, 8vw, 84px); line-height: 1; letter-spacing: -.065em; margin: 0 0 52px; }
.status-content h1 { font-size: clamp(27px, 4vw, 34px); letter-spacing: -.035em; line-height: 1.2; margin: 0 0 14px; }
.status-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 28px; }
.status-content .cta { width: 100%; max-width: 300px; }
.status-content noscript .status-note { margin-top: 18px; }
.status-indicator { display: none; width: 72px; height: 2px; background: #ded8cc; overflow: hidden; margin: 0 auto 30px; }
.opening .status-indicator { display: block; }
.status-indicator span { display: block; width: 28px; height: 100%; background: var(--accent); animation: progress 1.4s ease-in-out infinite alternate; }
html[data-view="landing"] .landing-page { display: block; }
html[data-view="landing"] .status-screen { display: none; }
@keyframes progress { from { transform: translateX(0); } to { transform: translateX(44px); } }
@media (prefers-reduced-motion: reduce) { .status-indicator span { width: 100%; animation: none; } }