@charset "utf-8";

/* Shared by the landing and the manual. Black and amber come from the logo. */
:root {
  --black: #0b0b0d;
  --black-2: #17171b;
  --black-3: #2a2a30;
  --amber: #fca311;
  --on-black: #f5f4f0;
  --on-black-soft: #b9b8b2;
  --paper: #f6f5f1;
  --paper-alt: #ecebe4;
  --panel: #ffffff;
  --ink: #131316;
  --soft: #55555e;
  --line: #dddbd3;
  --accent: #9a5a00;
  --warn-bg: #ffefd2;
  --tip-bg: #e4eefb;
  --note-bg: #ecebe4;
  --accent-fill: var(--amber);
  --band: var(--black);
  --band-2: #1c1c21;
  --band-ink: var(--on-black);
  --band-soft: var(--on-black-soft);
  --display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Golos Text', 'Segoe UI', Arial, sans-serif;
  --header: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f0f12;
    --paper-alt: #16161a;
    --panel: #1b1b20;
    --ink: #f2f1ec;
    --soft: #b3b2ac;
    --line: #2f2f36;
    --accent: #fcb13a;
    --warn-bg: #3a2b12;
    --tip-bg: #1a2c45;
    --note-bg: #24242a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body) }
img, svg { max-width: 100% }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px }
.wrap { max-width: 1240px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }
.sprite { position: absolute; width: 0; height: 0 }
.icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s }
.btn--amber { background: var(--amber); color: var(--black) }
.btn--amber:hover { background: #ffb73d }
.btn--ghost { border-color: #4a4a52; color: var(--on-black) }
.btn--ghost:hover { border-color: var(--on-black) }
.btn--large { min-height: 54px; padding: 0 26px; font-size: 17px }

.site-header { position: sticky; top: 0; z-index: 20; background: var(--black); color: var(--on-black); border-bottom: 1px solid var(--black-3) }
.site-header__row { display: flex; align-items: center; gap: 28px; height: var(--header) }
.site-logo { display: block; flex: none }
.site-logo img { display: block; width: 136px; height: 34px }
.site-nav { display: flex; gap: 24px; margin-right: auto }
.site-nav a { color: var(--on-black-soft); font-size: 15.5px; text-decoration: none; white-space: nowrap }
.site-nav a:hover { color: var(--on-black) }
.site-actions { display: flex; gap: 10px }
.menu { display: none; position: relative }
.menu summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #4a4a52; border-radius: 12px; cursor: pointer; list-style: none }
.menu summary::-webkit-details-marker { display: none }
.menu__panel { position: absolute; right: 0; top: calc(100% + 12px); display: grid; min-width: 240px; padding: 8px; background: var(--black-2); border: 1px solid var(--black-3); border-radius: 14px }
.menu__panel a { padding: 11px 14px; border-radius: 9px; color: var(--on-black); text-decoration: none }
.menu__panel a:hover { background: var(--black-3) }

.site-footer { background: var(--black); color: var(--on-black-soft); font-size: 15px }
.site-footer__row { display: flex; align-items: center; gap: 18px; padding-block: 28px }
.site-footer p { margin: 0; margin-right: auto }
.site-footer img { display: block; flex: none }
.site-footer nav { display: flex; gap: 22px }
.site-footer a { color: var(--on-black); text-decoration: none; white-space: nowrap }
.site-footer a:hover { color: var(--amber) }

.contact { background: var(--amber); color: var(--black) }
.contact__row { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: clamp(56px, 7vw, 96px) }
.contact img { display: block; width: 240px; height: 60px }
.contact h2 { max-width: 16em; margin: 26px 0 10px; font: 600 clamp(36px, 5vw, 62px)/1.08 var(--display); text-wrap: balance }
.contact p { margin: 0; font-size: 19px }
.contact__call { flex: none }
.contact__call span { display: block; font-size: 16px }
.contact__call a { color: var(--black); font: 600 clamp(32px, 4vw, 50px)/1.25 var(--display); text-decoration-thickness: 3px; text-underline-offset: 6px; white-space: nowrap }

/* Landing */
.hero { background: var(--black); color: var(--on-black); overflow: hidden }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: clamp(48px, 6vw, 84px) clamp(72px, 8vw, 112px) }
.hero h1 { margin: 0; font: 600 clamp(48px, 5.6vw, 72px)/1.12 var(--display); text-transform: uppercase; text-wrap: balance }
.plate { display: inline-block; margin-top: .1em; padding: .1em .16em .08em; border-radius: .16em; background: var(--amber); color: var(--black) }
.hero__lead { max-width: 34em; margin: 26px 0 0; color: var(--on-black-soft); font-size: 19px }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }
.hero__shots { position: relative }

.frame { overflow: hidden; margin: 0; border: 1px solid var(--black-3); border-radius: 14px; background: #f6f7fb }
.frame__bar { display: flex; gap: 7px; padding: 11px 14px; background: var(--black-2) }
.frame__bar i { width: 11px; height: 11px; border-radius: 50%; background: #4a4a52 }
.frame img { display: block; width: 100%; height: auto }
.frame--hero { width: 122%; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) }
.phone { overflow: hidden; border: 7px solid var(--black-2); border-radius: 30px; background: #f6f7fb; box-shadow: 0 24px 60px rgba(0, 0, 0, .65) }
.phone img { display: block; width: 100%; height: auto }
.phone--hero { position: absolute; left: -38px; bottom: -56px; width: 26% }

.facts { background: var(--black-2); border-top: 1px solid var(--black-3) }
.facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 0; padding-block: 24px; list-style: none; color: var(--on-black-soft) }
.facts__list b { display: block; color: var(--on-black); font: 500 24px/1.25 var(--display) }

.section { padding-block: clamp(64px, 8vw, 112px); scroll-margin-top: var(--header) }
.contact { scroll-margin-top: var(--header) }
.section h2 { margin: 0; font: 600 clamp(38px, 5vw, 62px)/1.08 var(--display); text-wrap: balance }
.section h3 { margin: 0; font: 500 26px/1.2 var(--display) }
.section p { margin: 0 }
.section__lead { max-width: 40em; margin-top: 14px !important; color: var(--soft); font-size: 19px }
.section__note { margin-top: 30px !important; color: var(--on-black-soft) }
.section--alt { background: var(--paper-alt) }
.section--dark { background: var(--black); color: var(--on-black) }
.section--dark .section__lead { color: var(--on-black-soft) }

.ledger { margin: 40px 0 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line) }
.ledger li { display: grid; grid-template-columns: 44px minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: start; padding-block: 24px; border-top: 1px solid var(--line) }
.ledger .icon { margin-top: 2px; color: var(--accent) }
.ledger p { margin-top: 4px; color: var(--soft) }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px }
.roles article { padding: 30px; border-radius: 16px; background: var(--black-2) }
.roles h3 { margin-bottom: 12px; color: var(--amber); font-size: 34px }
.roles p { color: var(--on-black-soft) }

.shift-flow { display: grid; gap: clamp(48px, 6vw, 80px); counter-reset: s; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none }
.shift-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; counter-increment: s }
.shift-step:nth-child(even) .shift-step__text { order: 2 }
.shift-step__text::before { content: counter(s); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: var(--amber); color: var(--black); font: 600 21px/1 var(--display) }
.section .shift-step__text h3 { font-size: 34px }
.section .shift-step__text p { margin-top: 14px; color: var(--soft) }
.shift-step__text b { color: var(--ink) }
.section .shift-step__more { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px }
.shift-step__more a { color: var(--accent); text-underline-offset: 3px }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none }
.tags li { padding: 5px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 14.5px }
.shift-pair { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; align-items: center }
.frame--dialog { border-color: var(--line) }

.shift-owner { margin-top: clamp(56px, 7vw, 96px); padding: clamp(24px, 4vw, 48px); border-radius: 20px; background: var(--black); color: var(--on-black) }
.shift-owner__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center }
.section .shift-owner h3 { font-size: 40px; line-height: 1.12 }
.section .shift-owner p { margin-top: 14px; color: var(--on-black-soft) }
.shift-owner .shift-step__more a { color: var(--amber) }
.shift-owner .frame { border-color: var(--black-3) }
.section .formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px }
.formula span { padding: 5px 12px; border-radius: 9px; background: var(--black-3); color: var(--on-black); font-size: 14.5px }
.formula i { color: var(--amber); font-style: normal; font-weight: 600 }
.formula .formula__result { background: var(--amber); color: var(--black); font-weight: 600 }
.section .shift-owner__hint { margin-top: 36px; color: var(--on-black); font: 500 24px/1.25 var(--display) }
.shift-owner__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px }
.frame--cap { display: flex; flex-direction: column; background: var(--black-2) }
.frame--cap figcaption { flex: 1; padding: 12px 16px; background: var(--black-2); color: var(--on-black-soft); font-size: 15px }
.frame--cap figcaption b { color: var(--on-black) }

.entry__head { display: flex; align-items: center; justify-content: space-between; gap: 40px }
.scene { flex: none; width: min(300px, 32%); height: auto }
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: t; margin: 40px 0 0; padding: 0; list-style: none }
.track li { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); counter-increment: t }
.track li::before { content: counter(t); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; background: var(--amber); color: var(--black); font: 600 21px/1 var(--display) }
.track li:not(:last-child)::after { content: "→"; position: absolute; right: -20px; top: 34px; color: var(--accent); font-weight: 600; font-size: 18px; line-height: 1 }
.track h3 { margin-bottom: 6px }
.track p { color: var(--soft); font-size: 16px }
.columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 36px; color: var(--soft) }

.hw { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; margin-top: 40px }
.hw__panel { padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel) }
.hw__kind { color: var(--accent); font-weight: 600; font-size: 15px }
.hw h3 { margin-top: 6px; font-size: 34px }
.spec { margin: 20px 0 0 }
.spec div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; padding-block: 11px; border-top: 1px solid var(--line) }
.spec dt { color: var(--soft) }
.spec dd { margin: 0 }
.hw__link { margin-top: 18px !important }
.hw__link a { color: var(--accent); text-underline-offset: 3px }

.tabs { margin-top: 36px }
.tabs__list { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.js .tabs__list { display: flex }
.tabs__list button { min-height: 44px; padding: 0 18px; border: 1px solid #4a4a52; border-radius: 12px; background: none; color: var(--on-black); font: 600 15.5px var(--body); cursor: pointer; transition: background .15s, border-color .15s }
.tabs__list button:hover { border-color: var(--on-black) }
.tabs__list button[aria-selected="true"] { border-color: var(--amber); background: var(--amber); color: var(--black) }
.tabs__panel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; align-items: start; margin-top: 32px }
.js .tabs__panel { margin-top: 0 }
.tabs__panel[hidden] { display: none }
.tabs__caption h3 { font-size: 34px }
.tabs__caption p { margin-top: 12px; color: var(--on-black-soft) }

.devices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center }
.devices__text p { margin-top: 16px; color: var(--soft) }
.devices__text h3 { margin-top: 36px; font-size: 34px }
.devices__icon { display: block; width: 96px; height: 96px; margin-top: 20px }
.frame--plain { border-color: var(--line); background: var(--black) }
.frame--plain figcaption { padding: 12px 16px; background: var(--panel); color: var(--soft); font-size: 15px }

.manual-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center }
.manual-cta .btn { margin-top: 28px }
.doors { display: grid; gap: 12px }
.door { display: block; padding: 20px 24px; border-radius: 14px; background: var(--band-2); color: var(--band-ink); text-decoration: none; transition: background .15s }
.door:hover { background: var(--black-3) }
.door b { display: block; color: var(--amber); font: 500 26px/1.2 var(--display) }
.door span { color: var(--band-soft); font-size: 15px }

.not-found { display: grid; place-content: center; justify-items: start; min-height: calc(100vh - var(--header)); padding: 32px 20px; background: var(--black); color: var(--on-black) }
.not-found h1 { margin: 0; font: 600 clamp(44px, 8vw, 84px)/1.1 var(--display) }
.not-found p { margin: 12px 0 26px; color: var(--on-black-soft) }

@media (max-width: 1100px) {
  .site-nav { display: none }
  .site-actions { margin-left: auto }
  .menu { display: block }
  .hero__grid { grid-template-columns: minmax(0, 1fr) }
  .frame--hero { width: 100% }
  .phone--hero { left: auto; right: 16px; bottom: -40px; width: 24% }
  .devices, .manual-cta, .shift-owner__intro { grid-template-columns: minmax(0, 1fr); gap: 36px }
  .shift-step { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .shift-step:nth-child(even) .shift-step__text { order: 0 }
  .tabs__panel { grid-template-columns: minmax(0, 1fr); gap: 18px }
}

@media (max-width: 860px) {
  .facts__list, .roles, .columns, .hw { grid-template-columns: minmax(0, 1fr) }
  .facts__list { gap: 14px }
  .track { grid-template-columns: minmax(0, 1fr) }
  .track li:not(:last-child)::after { content: "↓"; right: auto; top: auto; left: 38px; bottom: -21px }
  .contact__row { flex-direction: column; align-items: flex-start; gap: 28px }
  .site-footer__row { flex-wrap: wrap }
  .site-footer p { flex-basis: 70% }
}

@media (max-width: 620px) {
  body { font-size: 16px }
  .site-header__row { gap: 12px }
  .site-logo img { width: 120px; height: 30px }
  .hero h1 { font-size: min(10.6vw, 48px) }
  .hero__cta .btn { width: 100% }
  .shift-pair, .shift-owner__pair { grid-template-columns: minmax(0, 1fr) }
  .frame--dialog { max-width: 300px }
  .ledger li { grid-template-columns: 36px minmax(0, 1fr) }
  .ledger p { grid-column: 2 }
  .scene { display: none }
  .hw__panel { padding: 22px }
  .spec div { grid-template-columns: minmax(0, 1fr); gap: 2px }
  .contact__call a { font-size: 34px }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .btn, .door, .tabs__list button { transition: none }
}