/* deploy/landing/src/styles.css — the DentiumOS landing (ticket landing-page/05). Paper and teal, flat,
   one light theme. A normal page with a calm flow: one idea per section, generous air, a hairline
   between sections at most. Nothing in this file moves. The only motion is the
   hero loop's fade in landing.js. build.mjs rewrites each asset: URL to its hashed file. */

/* ── Fonts (OFL, self-hosted; licences in assets/fonts/) ─────────────────────────────────────── */
@font-face {
  font-family: "Golos Text";
  src: url("/assets/golos-text-cyrillic-wght-normal-17d048ca.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("/assets/golos-text-latin-wght-normal-9a69d0aa.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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: "Source Serif 4";
  src: url("/assets/source-serif-4-cyrillic-wght-normal-25e85aef.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/source-serif-4-latin-wght-normal-c1df4596.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* ── Tokens ──────────────────────────────────────────────────────────────────────────────────── */
:root {
  --ground: #F3F7F7;
  --paper: #FFFFFF;
  --ink: #16353A;
  --ink-soft: #4B6569;
  --teal: #006E78;
  --teal-deep: #005861;
  --line: #D9E6E6;
  --line-strong: #B5CACA;
  --hover: #E4EEEE;
  --gutter: clamp(16px, 4vw, 56px);
  --header-h: 72px;
  --max: 1120px;
  --air: max(64px, 12vh);
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
a {
  color: inherit;
}
h1,
h2 {
  text-wrap: balance;
}
h1,
h2,
p,
li,
summary {
  overflow-wrap: break-word;
  min-width: 0;
}
p {
  text-wrap: pretty;
}
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* ── Type ────────────────────────────────────────────────────────────────────────────────────── */
.kicker {
  margin: 0;
  color: var(--teal);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
h1,
h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
}
h1 {
  margin-top: 16px;
  font-size: clamp(2.25rem, min(0.8rem + 6.2vw, 1rem + 6vh), 4.25rem);
  line-height: 1.04;
}
h2 {
  margin-top: 12px;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  max-width: 18em;
}
/* The one accent word of a headline: Source Serif 4, upright (no italic face is shipped). */
h1 em,
h2 em {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: -0.01em;
}
.lede {
  margin: 20px 0 0;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

/* ── Calls to action ─────────────────────────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 32px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
}
.btn-primary {
  background: var(--teal);
  color: #fff;
}
.btn-primary:hover {
  background: var(--teal-deep);
}
.btn-secondary {
  border-color: var(--teal);
  color: var(--teal);
}
.btn-secondary:hover {
  background: var(--hover);
}
.phone,
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}
.phone {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.phone:hover {
  text-decoration: underline;
}
.text-link {
  color: var(--teal);
  text-decoration: underline;
}
.text-link:hover {
  color: var(--teal-deep);
}

/* ── Header ──────────────────────────────────────────────────────────────────────────────────── */
/* The header lies over the top of the hero, so the loop's ground runs to the top of the page and no
   edge shows between the page ground and the decoded video ground (#EFF5F4). */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}
.brand {
  display: block;
  padding-block: 6px;
}
.brand img,
.footer-lockup {
  width: auto;
  height: 27.6px; /* u = 1.2 px on a phone, above the 23 px minimum of the lockup */
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.nav-link:hover {
  background: var(--hover);
}
.nav-login {
  border-color: var(--line-strong);
}

/* ── Hero: the loop behind the live headline ────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  /* Landscape: the hero is never squarer than 1.65:1. At that aspect the loop's ink starts at
     0.50·W (films/dentiumos-hero/CRITIQUE.md), so it never reaches the copy in the left half. */
  min-height: max(640px, min(100svh, calc(100vw / 1.65)));
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--ground);
}
.hero-media {
  position: absolute;
  inset: 0;
}
.hero-poster img,
.hero-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}
/* The poster stays under the loop. landing.js sets the loop's opacity from 0 to 1 with one spring
   once it plays; the decoded ground (#EFF5F4) and the poster differ by a few levels only. */
.hero-loop {
  opacity: 0;
}
.hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  padding-block: clamp(32px, 6vh, 80px);
}
.hero-copy {
  max-width: min(36rem, calc(50vw - var(--gutter) - 24px));
}
.hero-sub {
  margin: 24px 0 0;
  max-width: 32rem;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}
/* Portrait: the copy owns the top 58 % of the hero, the loop's shapes the bottom. */
@media (orientation: portrait) {
  /* Never wider than 0.593:1, so the loop's ink stays below the top 58 % (CRITIQUE.md). */
  .hero {
    min-height: max(54rem, 100svh, calc(100vw * 1.69));
  }
  .hero-poster img,
  .hero-loop {
    object-position: 50% 100%;
  }
  .hero-inner {
    align-items: flex-start;
    padding-top: clamp(16px, 3vh, 48px);
  }
  .hero-copy {
    max-width: 36rem;
  }
  .hero-sub {
    margin-top: 18px;
  }
  .hero .actions {
    margin-top: 24px;
  }
}
/* A narrow or squarish landscape screen (a phone on its side, a tablet, a 5:4 monitor) has no room
   for the copy and the loop side by side: the hero shows the copy alone, and landing.js loads no
   loop. Side by side needs 1024 px and an aspect of 3:2 or wider. A phone under 360 px is too
   narrow for the copy above the loop. */
@media (orientation: landscape) and (max-width: 1023px), (orientation: landscape) and (max-aspect-ratio: 3/2), (max-width: 359px) {
  .hero {
    min-height: 0;
  }
  .hero-media {
    display: none;
  }
  .hero-copy {
    max-width: 36rem;
  }
}

/* ── Sections: one idea each, one screen of air, a hairline between ─────────────────────────── */
.section {
  padding-block: var(--air);
  border-top: 1px solid var(--line);
}
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.note {
  max-width: 38rem;
  margin: calc(-1 * clamp(16px, 2.5vw, 28px)) 0 clamp(32px, 5vw, 56px);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
/* A real screen in a plain rounded frame. */
.frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.frame img {
  width: 100%;
}

/* The film */
.film {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
/* The poster (a <picture>, one file per orientation) shows until the visitor taps play; then the
   video takes its place in the same box. */
.film-poster img,
.film-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper);
}
.film-video {
  object-fit: contain; /* a film started in one orientation keeps its frame after a rotation */
}
@media (orientation: portrait) {
  .film {
    max-width: 420px;
  }
  .film-poster img,
  .film-video {
    aspect-ratio: 9 / 16;
  }
}
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.film-play-icon {
  width: 76px;
  height: 76px;
  padding: 20px 18px 20px 22px;
  border-radius: 50%;
  background: var(--teal);
  fill: #fff;
}
.film-play:hover .film-play-icon {
  background: var(--teal-deep);
}

/* Everything for the practice: the 34 lines as plain text in columns */
.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: clamp(20px, 4vw, 48px);
}
.feature-list li {
  padding-block: 6px;
  break-inside: avoid;
  font-size: 1rem;
  line-height: 1.45;
}
@media (min-width: 900px) {
  .feature-list {
    columns: 3;
  }
  .feature-list li {
    font-size: 1.0625rem;
  }
}

/* Trust: four plain lines */
.trust-list {
  max-width: 44rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-list li {
  padding-block: 8px;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

/* FAQ */
.faq-list {
  max-width: 50rem;
  border-top: 1px solid var(--line);
}
.faq {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 20px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--teal);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq[open] summary::after {
  content: "\2212";
}
.faq p {
  max-width: 44rem;
  margin: 0 0 24px;
  color: var(--ink-soft);
}

/* Closing: the Viber button and the number. On a phone the button is a full-width block. */
.closing h2 {
  margin-top: 0;
}
.actions-closing {
  margin-top: 0;
}
.closing-mail {
  margin: 20px 0 0;
}
.closing-mail a {
  font-weight: 600;
}
@media (max-width: 599px) {
  .actions-closing {
    flex-direction: column;
    align-items: stretch;
  }
  .actions-closing .btn {
    width: 100%;
  }
  .actions-closing .phone {
    justify-content: center;
  }
}

/* Footer: the lockup, „Вход", the language link, © DentiumOS */
.site-footer {
  padding-block: 40px;
  border-top: 1px solid var(--line);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.footer-meta {
  margin: 0 0 0 auto;
  color: var(--ink-soft);
  font-size: 0.875rem;
}
@media (max-width: 599px) {
  .footer-meta {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Wider screens: the lockup at its public size (34.5 px, u = 1.5), and more air. */
@media (min-width: 960px) {
  :root {
    --header-h: 84px;
    --air: max(112px, 20vh);
  }
  .brand img {
    height: 34.5px;
  }
}