/* ==========================================================================
   DomToday — responsive layer (phone + tablet)
   --------------------------------------------------------------------------
   Loaded after base.css and after ui.css (components: wordmark,
   header buttons, hero CTA). Everything here is *unlayered*, so it wins
   over the @layer utilities of base.css without `!important`.

   Hooks used in index.html (all prefixed `dt-`):
     .dt-header .dt-nav .dt-nav__links .dt-header-actions .dt-btn(--ghost|--primary) .dt-btn__icon .dt-btn__label
     .dt-hero .dt-hero-stage .dt-hero-content .dt-hero-copy .dt-hero-lead
     .dt-hero-cta-wrap .dt-hero-cta-row .dt-cta .dt-cta__icon .dt-br
     .dt-marquee  .dt-feature  .dt-video .dt-video-frame .dt-video-player .dt-play
     .dt-footer .dt-footer-title .dt-footer-cta .dt-footer-bar .dt-footer-copy .dt-footer-links
     .dt-footer-langs  .dt-lang (header language menu)

   Sections
     0. Tokens
     1. Global fixes (document scrolling, overflow clipping, focus rings)
     2. Components moved out of inline styles (identical look on desktop)
     3. Touch devices (≤1279px)
     4. Phone (≤767px)
     5. Small phone (≤360px)
     6. Short viewports (landscape phones)
     7. Motion / input preferences
   ========================================================================== */


/* 0. Tokens ---------------------------------------------------------------- */
:root {
  --dt-bg: #121212;
  --dt-accent: #FF6A2B;
  --dt-accent-2: #FF8A4D;
  --dt-gutter: 20px;
  --dt-safe-l: env(safe-area-inset-left, 0px);
  --dt-safe-r: env(safe-area-inset-right, 0px);
  --dt-safe-b: env(safe-area-inset-bottom, 0px);
}


/* 1. Global fixes ------------------------------------------------------------
   base.css makes <main> a nested scroll container (overflow-x:hidden on a
   height-constrained flex child). On phones that means the browser toolbar
   never collapses and scroll position is lost. The document scrolls instead;
   horizontal overflow is *clipped* (no scroll container is created).
   -------------------------------------------------------------------------- */
html {
  height: auto;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overflow-x: hidden; /* fallback: propagates to the viewport */
  overflow-x: clip;
}
main {
  overflow: visible;
  overflow-x: clip;
}
.dt-feature {
  overflow: visible;
  overflow-x: clip;
}



/* 2. Layout glue (formerly inline styles; buttons & wordmark live in ui.css) */
/* hero: chips box == content box, text above chips.
   base.css fixes the hero at 960px and relies on <body> having a 100%
   height to make the inner `height:100%` chain definite. With document
   scrolling that chain breaks, so the hero gets an explicit height here.
   It follows the viewport (so the copy is centred on the *visible* first
   screen, not inside an invisible 960px box) and is clamped: never shorter
   than the copy + chips need, never taller than the original 960px.
   Phones switch it to auto below. */
.dt-hero {
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  max-height: 960px;
}
.dt-hero-content {
  position: relative;
  width: 100%;
}
.dt-hero-copy,
.dt-hero-cta-wrap {
  position: relative;
  z-index: 2;
}
.dt-br {
  display: none;
}
/* registrar logos keep their individual optical heights via --h */
.reg-logo {
  height: var(--h, 26px);
}

/* video: real 16:9 ratio (base.css hard-codes 12/7 → letterboxing);
   the frame holds the player and the play button (ui.css) */
.dt-video-frame {
  position: relative;
  width: 1200px;
  max-width: 100%;
}
[data-video-section] video.dt-video-player {
  width: 100%;
  height: auto;
  aspect-ratio: auto 16 / 9;
  border: 4px solid rgba(43, 41, 44, 1);
  border-radius: 16px;
  display: block;
  background: var(--dt-bg);
}



/* 3. Touch devices (tablet + phone) ----------------------------------------- */
@media (max-width: 1279px) {
  .dt-btn {
    min-height: 44px;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* keep the hero title on two lines (as on desktop) so the side chips
     .xyz / .ai never sit on the text when the hero is viewport-high */
  .dt-hero-copy {
    max-width: 760px;
  }
  /* catalog showcase sits where the promo image used to (card is absolute) */
  .dt-showcase {
    font-size: 12px;
    margin-top: 120px; /* clears the rotated card's lower-left corner */
    margin-right: 200px;
  }
  /* under the video: the FAQ stacks, the heading on top */
  .dt-faq__in {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .dt-faq__side {
    position: static;
  }
  /* the catalog row spans from its window (centre - 330px) to the card's
     right edge (centre + 400px); the card never leaves the screen */
  .dt-feature[data-current-slide="0"] [data-slide-content] {
    right: max(20px, calc(50% - 400px));
  }
  /* demo rows (DNS, top-up): the same two edges, no arrow */
  .dt-demo-row {
    align-self: stretch;
    justify-content: space-between;
    width: auto;
    max-width: none;
    margin: 72px max(20px, calc(50% - 400px)) 0 max(20px, calc(50% - 330px));
  }
  .dt-mini {
    font-size: 12px;
  }
  .dt-demo-card {
    width: clamp(300px, calc(100% - 348px), 366px); /* keeps 48px to the window */
  }
  .dt-demo-card--left {
    margin-bottom: 60px;
  }
  .dt-demo-card--right {
    margin-top: 60px;
  }
  .dt-feature[data-current-slide="0"] .dt-demo-arrow {
    display: none;
  }
  .dt-footer-cta {
    margin-top: 44px;
  }
  .dt-footer-bar {
    margin-top: 100px;
  }
}


/* 4. Phone ------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* --- header ----------------------------------------------------------- */
  .dt-header {
    top: 10px;
    padding: 0 max(12px, var(--dt-safe-r)) 0 max(12px, var(--dt-safe-l));
  }
  .dt-nav {
    height: 56px;
    gap: 10px;
    padding: 0 8px 0 14px;
    border-radius: 16px;
  }
  /* 21px next to the round mark: logo, mark and both buttons fit a 375px phone */
  .dt-wordmark {
    font-size: 21px;
    line-height: 24px;
  }
  .dt-logo {
    min-height: 44px;
    gap: 8px;
  }
  .dt-logo__mark {
    width: 28px;
    height: 28px;
  }
  .dt-header-actions {
    gap: 8px;
  }
  .dt-btn {
    padding: 0 13px;
    gap: 7px;
  }
  .dt-btn__icon {
    width: 14px;
    height: 14px;
  }
  .dt-btn__label {
    font-size: 12.5px;
    letter-spacing: 0.08em;
  }

  /* --- hero --------------------------------------------------------------
     Full first screen: centred copy with four floating TLD chips hugging it,
     registrar marquee (80px) peeking in at the very bottom of the viewport.
     ---------------------------------------------------------------------- */
  .dt-hero {
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 0;
  }
  .dt-hero-stage[data-current-index="0"] {
    /* small enough for each of the two title lines ("Domains with history",
       "for $1 in Telegram") to stay one line: 4 broken lines looked bad */
    --heading-size: clamp(28px, 8.4vw, 40px);
    --subheading-size: clamp(16px, 4.5vw, 18px);
    height: auto;
    min-height: calc(100vh - 80px);
    min-height: calc(100svh - 80px);
    margin-top: 0;
    padding: 104px max(var(--dt-gutter), var(--dt-safe-r)) 72px max(var(--dt-gutter), var(--dt-safe-l));
    justify-content: center;
    gap: 0;
  }
  .dt-hero-content {
    height: auto;
    gap: 28px;
    align-items: center;
  }
  .dt-hero-copy {
    gap: 18px;
    max-width: 100%;
    align-items: center;
    text-align: center;
  }
  .dt-hero-copy h1 {
    line-height: 1;
    letter-spacing: 0.01em;
  }
  .dt-br {
    display: inline;
  }
  .dt-hero-lead {
    max-width: 32ch;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.74);
    text-wrap: balance; /* even lines under the centred title */
  }
  .dt-hero-cta-wrap {
    max-width: 100%;
  }
  .dt-cta {
    width: 100%;
    max-width: 360px;
    min-height: 56px;
    padding: 11px 24px 11px 12px;
    gap: 12px;
    font-size: 17px;
    border-radius: 16px;
  }
  .dt-cta__icon {
    width: 32px;
    height: 32px;
  }
  .dt-hero-cta-row::before {
    width: 86%;
    height: 150%;
    filter: blur(18px);
  }

  /* display font: thinner outline at small sizes */
  .heading--variant_scream {
    -webkit-text-stroke-width: 1.5px;
  }

  /* --- registrar marquee ------------------------------------------------- */
  .dt-marquee {
    padding-block: 28px;
    gap: 0;
  }
  .dt-marquee .companies-marquee__item {
    margin-right: 44px;
  }
  .dt-marquee .reg-logo {
    height: calc(var(--h, 26px) * 0.85);
    opacity: 0.55;
  }
  .companies-marquee-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }

  /* --- feature ("Everything you need to go live fast") -------------------- */
  .dt-feature {
    padding: 52px 0 80px; /* 80px between sections on phones */
    gap: 32px;
  }
  .dt-feature h2 .heading {
    font-size: clamp(32px, 9.6vw, 44px);
  }
  .dt-feature[data-current-slide="0"] {
    --heading-font-size: 22px;
    --subheading-font-size: 16px;
  }
  .dt-feature[data-current-slide="0"] [data-carousel-container] {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    max-width: 600px; /* landscape phones: keep the stack card-sized */
    margin: 0 auto;
    padding: 0 max(var(--dt-gutter), var(--dt-safe-r)) 0 max(var(--dt-gutter), var(--dt-safe-l));
  }
  .dt-showcase {
    order: 0;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    font-size: min(14px, calc((100vw - 2 * var(--dt-gutter)) / 25));
  }
  /* the window spans the column */
  .dt-device-wrap {
    justify-self: stretch;
  }
  .dt-device {
    width: 100%;
  }
  .dt-deal {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    font-size: 12px;
  }
  .dt-feature[data-current-slide="0"] [data-slide-content],
  .dt-demo-card {
    order: 1;
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px;
    gap: 12px;
    transform: none;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .dt-feature [data-slide-subheading],
  .dt-demo-card p {
    line-height: 1.4;
  }
  /* demo rows stack like the catalog row: window, then its card */
  .dt-demo-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-width: 600px;
    margin: 40px auto 0;
    padding: 0 max(var(--dt-gutter), var(--dt-safe-r)) 0 max(var(--dt-gutter), var(--dt-safe-l));
  }
  .dt-mini {
    order: 0;
    width: 100%;
    font-size: min(14px, calc((100vw - 2 * var(--dt-gutter)) / 25));
  }
  .dt-feature [data-carousel-container] > svg {
    display: none; /* the orange arrow only; the showcase keeps its icons */
  }

  /* --- video ("This is how it works") ------------------------------------ */
  .dt-video[data-video-section] {
    padding: 0 max(var(--dt-gutter), var(--dt-safe-r)) 0 max(var(--dt-gutter), var(--dt-safe-l));
    gap: 32px;
  }
  .dt-video-title .heading {
    font-size: clamp(32px, 9.6vw, 44px);
  }
  .dt-video-title .heading--variant_scream {
    font-size: clamp(36px, 11vw, 50px);
  }
  [data-video-section] video.dt-video-player {
    border-width: 2px;
    border-radius: 12px;
  }
  .dt-play {
    border-radius: 12px;
  }
  .dt-play__icon {
    width: 72px;
    height: 72px;
  }

  /* --- under the video: statement and FAQ ----------------------------------- */
  .dt-about {
    padding: 80px var(--dt-gutter) 0;
  }
  .dt-statement {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.3;
  }
  .dt-faq {
    padding: 80px var(--dt-gutter) 0;
  }
  .dt-faq__in {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dt-faq__side {
    position: static;
  }
  .dt-faq__title .heading {
    font-size: clamp(32px, 9.6vw, 44px);
  }
  .dt-faq__title .heading--variant_scream {
    font-size: clamp(36px, 11vw, 50px);
  }
  .dt-faq__note {
    margin-top: 18px;
    font-size: 16px;
  }
  .dt-faq__q {
    gap: 16px;
    padding: 20px 0;
    font-size: 19px;
  }
  .dt-faq__icon {
    width: 30px;
    height: 30px;
  }
  .dt-faq__a p {
    padding-right: 0;
    font-size: 16px;
  }

  /* --- footer ------------------------------------------------------------ */
  .dt-footer {
    padding: 80px max(var(--dt-gutter), var(--dt-safe-r)) 0 max(var(--dt-gutter), var(--dt-safe-l));
  }
  .dt-footer-title .heading {
    font-size: clamp(30px, 9.6vw, 44px);
  }
  .dt-footer-title .heading--variant_scream {
    font-size: clamp(34px, 11vw, 50px);
  }
  .dt-footer-cta {
    width: 100%;
    margin-top: 32px;
  }
  /* links on top, the languages, copyright last; each link is a 44px tap
     target. The header has no room for the language menu here. */
  .dt-lang {
    display: none;
  }
  .dt-footer-bar {
    flex-direction: column-reverse;
    gap: 4px;
    margin-top: 72px;
    padding: 10px 0 calc(24px + var(--dt-safe-b));
  }
  .dt-footer-langs {
    display: flex;
    gap: 24px;
  }
  .dt-footer-links a,
  .dt-footer-langs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* 5. Small phone ------------------------------------------------------------ */
/* ≤440px: mark, wordmark, two buttons and their icons no longer fit in one row → text-only buttons */
@media (max-width: 440px) {
  .dt-btn__icon {
    display: none;
  }
}
@media (max-width: 360px) {
  :root {
    --dt-gutter: 16px;
  }
  .dt-btn--ghost {
    display: none;
  }
  .dt-cta {
    font-size: 16px;
  }
}


/* 6. Short viewports -------------------------------------------------------- */
/* phones under ~740px tall: hero takes the whole screen, marquee below the fold */
@media (max-width: 767px) and (max-height: 739px) {
  .dt-hero-stage[data-current-index="0"] {
    min-height: 100vh;
    min-height: 100svh;
  }
}
/* landscape phones: no full-screen hero, no chips */
@media (max-width: 767px) and (max-height: 619px) {
  .dt-hero-stage[data-current-index="0"] {
    min-height: 0;
    padding-top: 128px;
    padding-bottom: 88px;
  }
  .tld-float {
    display: none;
  }
}


/* 7. Motion / input preferences -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .companies-marquee[data-companies-marquee] {
    animation-play-state: paused;
  }
}