/*
 * The public landing page.
 *
 * Its palette is not chosen, it is inherited: every colour below is lifted from
 * packages/ui/src/theme/themes/ruoc.json, the app's own light theme. The page
 * exists to show the app, and a marketing site in its own colours would put a
 * screenshot of one product inside a page for a different one — the seam shows
 * most at the exact place the eye goes first.
 *
 * The type is Inter for the same reason: it is what the app sets, so the
 * headline above the screenshot and the text inside it are one voice. Both
 * weights are vendored rather than pulled from Google, because the people this
 * page is for are in Russia and a font that fails to load takes the page's
 * character with it.
 */

@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Vendored";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/inter-cyrillic-800.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* The app's neutral is #f4f1e9; the page sits one step deeper on the same
     scale so that a card in the app's true surface colour reads as raised
     rather than dissolving into the background. */
  --ground: #ebe7dc;
  --paper: #fffefc;
  --ink: #141413;
  --ink-2: #5d5b54;
  --ink-3: #7f7d74;
  --rule: #d6d2c6;
  --rule-weak: #e3dfd3;
  /* App's current brand ramp (packages/ui/src/theme/themes/ruoc.json,
     CLEOCODE.md "Branding"): indigo primary/info, a step darker as the
     interactive/hover tone. Replaced the pre-rebrand terracotta. */
  --accent: #3e1bda;
  --accent-deep: #3618bf;

  --measure: 1140px;
  --step: clamp(1.5rem, 4vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter Vendored", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--step);
}

/* ---- header ---------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 0;
}

.mark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.mark-logo {
  width: 3.1rem;
  height: 3.1rem;
  display: block;
}

.top a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.top a:hover {
  color: var(--accent-deep);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
}

/* Keep the wordmark and each navigation label intact on phones and small
   tablets. 48rem rather than 44: with six links the row needs about 712px,
   and at 44rem the labels split a line before the row was allowed to wrap. */
@media (max-width: 48rem) {
  .top { flex-wrap: wrap; gap: 1rem; padding-top: 1.25rem; }
  .mark { font-size: 1.3rem; white-space: nowrap; }
  .mark-logo { width: 2.6rem; height: 2.6rem; }
  .top a { font-size: 0.8rem; white-space: nowrap; }
  .top-nav { width: 100%; flex-wrap: wrap; gap: 0.65rem 1.1rem; }
}

/*
 * On the offer and policy pages the mark is the way home. It is a link inside
 * the mark rather than the mark itself, and takes the mark's type by
 * inheritance, so the nav-link rule above and the phone sizes keep to their
 * own elements.
 */
.top .mark a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font: inherit;
  color: inherit;
  text-decoration: none;
  white-space: inherit;
}

/* ---- hero ------------------------------------------------------------ */

.hero {
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-media {
  display: none;
}

@media (min-width: 62rem) {
  .hero-split {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .hero-media {
    display: flex;
    justify-content: flex-end;
    align-self: center;
  }
}

.video-frame {
  width: 100%;
  max-width: 21rem;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 10px 40px -12px rgba(20, 20, 19, 0.28);
}

.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.25rem;
}

/*
 * The headline size belongs to the slogan, which on the landing is a .display
 * paragraph: the page's h1 is the plainer line under it, because a search
 * engine takes the h1 as what the page is about and «Опережай остальных»
 * says nothing it can match a query to. The legal and school pages keep
 * their h1 as the headline, which is why the element selector stays.
 */
h1,
.display {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}

/* Also the landing's h1, so it undoes the headline weight and tracking. */
.lede {
  margin: 1.5rem 0 0;
  max-width: 34ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  text-wrap: pretty;
  color: var(--ink-2);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icn {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/* Two lines in a button: the action, and under it the build's architecture,
   to which release.js adds version and size. The architecture is in the
   markup so the two macOS buttons are told apart before release.js answers. */
.btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.btn-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.72;
}

.cta-note {
  display: none;
  font-size: 0.87rem;
  color: var(--ink-3);
}

.cta-note.is-ready {
  display: inline;
}

/* The download button carries all three icons and shows its platform's. */
.download .btn-icn {
  display: none;
}

.download[data-platform^="mac"] .btn-icn--mac,
.download[data-platform="windows"] .btn-icn--windows,
.download[data-platform="linux"] .btn-icn--linux {
  display: block;
}

/* The builds the button is not offering: a wrong guess, a phone, another computer. */
.cta-other {
  margin: 1rem 0 0;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.cta-other a {
  color: var(--ink-2);
  text-underline-offset: 0.2em;
}

/* A dot before every link that follows a visible one, whichever link is hidden. */
.cta-other a:not([hidden]) ~ a::before {
  content: "·";
  display: inline-block;
  margin: 0 0.4em 0 0.15em; /* the space between the links makes up the rest */
  color: var(--ink-3);
}

.btn--solid {
  background: var(--ink);
  color: var(--paper);
}

.btn--solid:hover {
  background: var(--accent-deep);
}

.btn--quiet {
  border-color: var(--rule);
  color: var(--ink);
}

.btn--quiet:hover {
  border-color: var(--ink-3);
  background: var(--paper);
}

/* ---- the screenshot --------------------------------------------------- */

/*
 * Held in the app's own surface colour with a hairline, not floated on a drop
 * shadow: the window in the picture already has its own chrome, and a second
 * frame around it reads as two windows.
 */
/*
 * Wider than the text it follows, and deliberately: the prose is set to a
 * readable measure, and a screenshot held to that same measure renders the
 * app's own interface too small to read — which is the one thing this element
 * exists to do. It breaks out to the viewport rather than to the text column,
 * and stays inside the page gutter at every width.
 */
.shot {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  width: min(1440px, calc(100vw - 2 * var(--step)));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* The Агент heading introduces the app demo, so it sits close to it. */
.app-intro {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}

.app-intro h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.app-intro p {
  margin: 0.75rem auto 0;
  max-width: 52ch;
  color: var(--ink-2);
}

.app-intro + .shot {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

/*
 * The demo is the real app itself (RuocApp/demo-standalone), embedded live —
 * not a reproduction. One hairline frame around it; the app brings its own
 * chrome, so nothing else is drawn on top of it.
 */
.agent-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ground);
}
.agent-embed { width: 100%; height: 100%; border: 0; display: block; }
.demo-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.87rem;
  color: var(--ink-2);
}
.demo-caption a { color: var(--accent-deep); text-underline-offset: 0.2em; }
@media (max-width: 40rem) {
  .agent-frame { aspect-ratio: auto; height: 70vh; }
  .demo-caption { flex-direction: column; }
  .app-intro p, .section-head p, .pricing .pricing-note { text-align: left; }
  .cta .btn { flex: 1 1 100%; justify-content: center; }
  .cta { max-width: 24rem; }
}

/* ---- demo placeholder --------------------------------------------------- */

/* The app's opening layout in grey: a top bar and four columns (projects,
   chat, files, editor). Lines are <i> elements sized by .sk-wN (N tenths of
   the column), shimmering until .is-loaded fades the whole sheet out. */
.sk {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
  gap: 0.6rem;
  background: #f4f1e9;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.agent-frame.is-loaded .sk {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sk-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  flex: none;
}
.sk-bar i { height: 0.7rem; }
.sk-bar .sk-w3 { width: 5rem; }
.sk-sq { width: 1.1rem; height: 1.1rem !important; }
.sk-cols {
  display: grid;
  grid-template-columns: 20% 1fr 18% 15%;
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
}
.sk-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule-weak);
  border-radius: 10px;
  overflow: hidden;
}
.sk i,
.sk-box {
  display: block;
  height: 0.6rem;
  flex: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #e6e2d8 0%, #f0ede5 40%, #e6e2d8 80%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s linear infinite;
}
.sk-w3 { width: 30%; } .sk-w4 { width: 40%; } .sk-w5 { width: 50%; }
.sk-w6 { width: 60%; } .sk-w7 { width: 70%; } .sk-w8 { width: 80%; } .sk-w9 { width: 92%; }
.sk-gap { margin-top: 0.7rem; }
.sk-in { margin-left: 1rem; }
.sk-on { background: #e3dff3; animation: none; }
.sk-low { opacity: 0.6; }
.sk-bubble {
  align-self: flex-end;
  width: 78%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: #efebe1;
}
.sk-bubble i { background: #e2ddd1; }
.sk-compose {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
}
.sk-box {
  height: 1.5rem;
  width: 100%;
  border-radius: 8px;
}
.sk-code { gap: 0.5rem; }
.sk-code i { height: 0.5rem; }
.sk-note {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.35rem 0.8rem;
  font-size: 0.8rem;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px solid var(--rule-weak);
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes sk-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (max-width: 40rem) {
  /* The demo shows the chat alone on phones; so does its stand-in. */
  .sk-cols { grid-template-columns: 1fr; }
  .sk-side, .sk-files, .sk-code { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sk i, .sk-box { animation: none; }
}

/* ---- pricing ---------------------------------------------------------- */

/* Same treatment as the «Агент» title above the app demo. */
.section-head {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  text-align: center;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section-head p {
  margin: 0.75rem auto 0;
  max-width: 52ch;
  color: var(--ink-2);
}

.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 44rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
}

@media (min-width: 40rem) {
  .plans {
    grid-template-columns: 1fr 1fr;
  }
}

/* Three tariffs side by side need the wider page; between the two
   breakpoints the free one takes its own row above the paid pair. */
.plans--three {
  max-width: 66rem;
}

@media (min-width: 40rem) and (max-width: 61.99rem) {
  .plans--three > .plan:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .plans--three {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* Four tariffs: two rows of two at every width from a tablet up, so no card
   is left alone on a row and each keeps room for its price and text. The
   base .plans rule already makes the two columns; this only widens the pair. */
.plans--four {
  max-width: 56rem;
}

/*
 * Cards in the app's own surface colour with a hairline, like the demo frame.
 * Each card is the plan's name, price and the operator's description, then
 * the button, pinned to the bottom so the buttons line up across a row. The
 * dearest plan carries the accent border and the solid button.
 */
.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
}

.plan--top {
  border-color: var(--accent);
  background: #f5f2ff;
}

.plan h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-2);
}

.plan-price {
  margin: 0.5rem 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.plan-sum {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.plan-per {
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* The operator's sentence about what the plan is for, from the console. */
.plan-about {
  margin: 0.75rem 0 1.25rem;
  color: var(--ink-2);
  font-size: 0.95rem;
}

.plan-limit {
  margin: auto 0 1rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.plan .btn {
  justify-content: center;
  /* Pinned to the bottom, so the buttons line up across a row whatever
     the length of each description. */
  margin-top: auto;
}

.pricing-note {
  margin: 1.5rem auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: 0.87rem;
  color: var(--ink-3);
}

.pricing-note a {
  color: var(--ink-2);
}

/* ---- legal pages -------------------------------------------------------- */

/*
 * The offer and the policy are read, not scanned: one column at a text
 * measure, numbered lists the way a contract is cited ("пункт 6.2"), nothing
 * else on the page.
 */
.legal {
  max-width: 68ch;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
}

.legal h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
  white-space: normal;
}

.legal-meta {
  margin: 0.75rem 0 2rem;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.legal h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  color: var(--ink-2);
}

.legal p {
  margin: 0 0 1rem;
}

.legal ol,
.legal ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.legal li {
  margin: 0 0 0.5rem;
}

.legal li strong {
  color: var(--ink);
  font-weight: 600;
}

.legal a {
  color: var(--accent-deep);
}

/* ---- waitlist --------------------------------------------------------- */

/*
 * The last block before the footer, and the one action the page asks of a
 * visitor who is not downloading. A card in the app's own surface colour with
 * a hairline, like the demo frame above it, so the form reads as part of the
 * product rather than a widget stapled under it. The heading gets the same
 * treatment as «Агент» so the page has one voice for its section titles.
 */
.waitlist {
  margin-top: clamp(3rem, 8vw, 5.5rem);
}

.waitlist-card {
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  text-align: center;
}

.waitlist h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.waitlist-lede {
  margin: 0.75rem auto 0;
  max-width: 46ch;
  color: var(--ink-2);
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  max-width: 34rem;
  margin: 1.5rem auto 0;
}

/* The field is the same pill as the button beside it, at 16px or more so a
   phone does not zoom the page when it is focused. */
.field {
  flex: 1 1 15rem;
  min-width: 0;
  padding: 0.8rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, 0.97rem);
  line-height: 1.2;
}

.field::placeholder {
  color: var(--ink-3);
}

.field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(62, 27, 218, 0.15);
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The bot trap: off the canvas rather than display:none, since some scripts
   skip fields that are not rendered at all. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The consent the policy relies on for this address, where it is given:
   under the button, before the visitor presses it. */
.waitlist-consent {
  max-width: 34rem;
  margin: 0.9rem auto 0;
  font-size: 0.82rem;
  color: var(--ink-3);
}

.waitlist-consent a {
  color: var(--ink-2);
}

/* Feedback appears only when there is a message to show. */
.waitlist-note {
  margin: 0.9rem 0 0;
  font-size: 0.93rem;
  color: var(--ink-2);
}

.waitlist-note:empty { display: none; }

.waitlist-note.is-error {
  color: #b42318;
}

.waitlist.is-done .waitlist-form,
.waitlist.is-done .waitlist-consent {
  display: none;
}

.waitlist.is-done .waitlist-note {
  margin-top: 1.5rem;
  font-weight: 600;
  color: var(--ink);
}

/* The no-script success state: the gateway sends a plain-form submit back to
   #waitlist-done, and the note shows itself by :target with no script to
   write it. Where :has() is understood the form goes too, as it does above. */
.waitlist-done {
  display: none;
  margin: 1.5rem auto 0;
  font-weight: 600;
}

.waitlist-done:target {
  display: block;
}

.waitlist:has(.waitlist-done:target) .waitlist-form,
.waitlist:has(.waitlist-done:target) .waitlist-note,
.waitlist:has(.waitlist-done:target) .waitlist-consent {
  display: none;
}

@media (max-width: 40rem) {
  .waitlist-form .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ---- footer ----------------------------------------------------------- */

/*
 * Three columns: who sells, how to reach them, the two documents. The seller's
 * requisites are on every page rather than on a page of their own because the
 * acquiring bank, and the law on consumer rights, both want them where a
 * visitor lands.
 */
.foot {
  margin: clamp(3.5rem, 8vw, 5rem) 0 0;
  padding: 1.75rem 0 3rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2rem;
  font-size: 0.87rem;
  color: var(--ink-3);
}

@media (min-width: 46rem) {
  .foot {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.foot-name {
  color: var(--ink-2);
  font-weight: 600;
}

.foot a {
  color: var(--ink-3);
  text-decoration: none;
}

.foot a:hover {
  color: var(--accent-deep);
}

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- watch button + video modal ---------------------------------------- */
.shot:has(.watch-btn) { position: relative; }
.watch-btn {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem 0.5rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
  transition: background 0.15s ease;
}
.watch-btn:hover { background: var(--accent-deep); }
.watch-btn svg { width: 0.95rem; height: 0.95rem; }

.video-modal {
  width: min(1200px, calc(100vw - 2 * var(--step)));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #000;
  overflow: visible;
}
.video-modal::backdrop { background: rgb(20 20 19 / 0.8); }
.video-modal video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; }
.video-modal-close {
  position: absolute;
  top: -2.6rem;
  right: 0;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.video-modal-close:hover { background: rgb(255 255 255 / 0.3); }

/* ---- the questions ---------------------------------------------------- */

/*
 * The questions open one at a time, with no script: <details> elements that
 * share a name do it. The browser's marker is hidden; the summary is bold so
 * a closed list still reads as a list of questions.
 */
.faq {
  max-width: 44rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  border-top: 1px solid var(--rule-weak);
}

.faq details {
  border-bottom: 1px solid var(--rule-weak);
}

.faq summary {
  padding: 1rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent-deep);
}

.faq p {
  margin: 0 0 1.1rem;
  color: var(--ink-2);
}