/*
 * de-press.co overrides — loaded AFTER main.css via <link> (never via bundler).
 * Only product-specific additions live here; original rules stay untouched.
 * Prefix: dp- (de-press).
 * Tokens are 1:1 from main.css: bg #131417, text #fff, accent #fff,
 * fonts Gilroy (headings) / Heebo (body).
 */

/* --- /safety (crisis page): self-contained, readable regardless of theme --- */

.dp-safety {
  min-height: 100vh;
  background-color: #131417;
  color: #fff;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

.dp-safety__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 8vh 24px 12vh;
}

.dp-safety__tag {
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.5;
  margin: 0 0 24px;
}

.dp-safety h1 {
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.1;
  margin: 0 0 24px;
  font-weight: 700;
}

.dp-safety__lead {
  font-size: 18px;
  color: #fff;
  opacity: 0.8;
  margin: 0 0 40px;
}

.dp-safety h2 {
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-size: 22px;
  margin: 48px 0 16px;
  font-weight: 700;
}

.dp-safety p {
  margin: 0 0 16px;
  color: #fff;
  opacity: 0.8;
}

.dp-safety ol {
  margin: 0 0 16px;
  padding-left: 22px;
  color: #fff;
  opacity: 0.8;
}

.dp-safety ol li {
  margin-bottom: 12px;
}

.dp-safety__phones {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0 8px;
}

.dp-safety__phone {
  display: inline-block;
  padding: 14px 22px;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.dp-safety__phone:hover {
  background-color: #fff;
  color: #131417;
}

.dp-safety__note {
  font-size: 14px;
  opacity: 0.5;
}

.dp-safety__back {
  display: inline-block;
  margin-top: 56px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  padding-bottom: 2px;
}

/* ==========================================================================
   Privacy — factual data inventory (adapted from GDPR-docs/PRIVACY.md).
   Full site page (renderPage): header/menu/footer/cookie + the island with
   the about pose (types.ts PAGE_STATES). Content styles mirror the about-page
   tokens from main.css — those are scoped [data-router-view="about"], so
   privacy keeps its own block here.
   ========================================================================== */

[data-router-view="privacy"] {
  padding-top: 260px;
  padding-bottom: 240px;
}

@media (max-width: 47.99em) {
  [data-router-view="privacy"] {
    padding-top: 115px;
    padding-bottom: 160px;
  }
}

.privacy-header,
.privacy-section {
  max-width: 720px;
}

.privacy-headline {
  margin-bottom: 30px;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  font-size: 0.6428571429rem;
  letter-spacing: 0.4em;
  line-height: 1;
  text-transform: uppercase;
}

.privacy-headline--blue {
  color: rgba(187, 194, 229, 0.5);
}

.privacy-title {
  margin: 0;
  font-family: GT Sectra Display, Times, Georgia, serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  font-size: 5.7142857143rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

@media (max-width: 47.99em) {
  .privacy-title {
    font-size: 3.5714285714rem;
  }
}

@media (max-width: 21.865em) {
  .privacy-title {
    font-size: 2.8571428571rem;
  }
}

.privacy-lead {
  margin: 30px 0 0;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.6428571429rem;
  line-height: 1.5217391304;
  color: rgba(160, 168, 220, 0.7);
}

.privacy-subtitle {
  margin: 0 0 30px;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2857142857rem;
  letter-spacing: 0;
  color: #fff;
}

.privacy-section {
  margin-top: 120px;
}

@media (max-width: 47.99em) {
  .privacy-section {
    margin-top: 80px;
  }
}

.privacy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7857142857;
  color: rgba(160, 168, 220, 0.7);
}

.privacy-list li {
  position: relative;
  padding-left: 26px;
}

.privacy-list li + li {
  margin-top: 18px;
}

.privacy-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(187, 194, 229, 0.5);
}

.privacy-text {
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7857142857;
  color: rgba(160, 168, 220, 0.7);
}

.privacy-more {
  display: inline-block;
  /* Same breathing room as the "Принципы" button (home-about-link). */
  margin-top: 35px;
}

/* Scene layering mirrors about: the island stays behind the content column
   in the hero and slides away behind it on scroll. */
:not(.menu-open) [data-page="privacy"] .scene-root-inner {
  z-index: -1;
}

@media (max-width: 64.365em) {
  :not(.menu-open) [data-page="privacy"] .scene-root-inner {
    z-index: 0;
  }
}

/* ==========================================================================
   EXPERIMENT — scene lighting without baked art.
   The island's look is baked (Tripo "night" matcap), so the page plays the same
   environment: cold violet-blue night ambient + the faintest amber breath
   low behind the model. Art overlays are hidden, ambiance is pure CSS.
   Rollback: delete this block (the PNG-art variant lives on variant/dawn-art).
   ========================================================================== */

/* 1) baked art overlays off (markup intact — no legacy JS references break) */
.home-background,
.home-about-background,
.site-menu-back img {
  display: none !important;
}

/* 2) fixed ambient layer: light that belongs to the camera, under all content
      (body:after is the site grain at z 1100; the island canvas sits at z 991) */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(
      46% 30% at 50% 78%,
      rgba(240, 196, 140, 0.12),
      rgba(240, 196, 140, 0) 100%
    ),
    radial-gradient(
      80% 26% at 50% 102%,
      rgba(214, 166, 120, 0.1),
      rgba(214, 166, 120, 0) 70%
    ),
    radial-gradient(
      90% 70% at 50% 30%,
      rgba(104, 120, 185, 0.1),
      rgba(104, 120, 185, 0) 100%
    ),
    radial-gradient(
      130% 100% at 50% 50%,
      rgba(6, 8, 14, 0) 55%,
      rgba(6, 8, 14, 0.45) 100%
    );
}

/* 3) the last section owns the horizon: dawn rises behind the ground fade */
.home-about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      60% 34% at 46% 100%,
      rgba(240, 196, 140, 0.13),
      rgba(240, 196, 140, 0) 100%
    ),
    radial-gradient(
      95% 55% at 50% 115%,
      rgba(214, 166, 120, 0.1),
      rgba(214, 166, 120, 0) 75%
    );
}

/* --- home: «Так это устроено» — чуть ближе к кейсам ------------------------
   Desktop (no-touchevents ≥64.375em) разделяет секции хвостовой полупросвет
   кейсов: .home-cases padding-bottom: calc(50vh − 85px). Укорачиваем его на
   12vh — секция about подтягивается к кейсам; остальное (padding-top секции,
   мобильные отступы 120/80px) не трогаем. Якоря острова считаются из живых
   DOM-rect на рантайме (island.onResize), позы следуют за сдвигом сами. --- */
@media (min-width: 64.375em) {
  .no-touchevents .home-cases {
    padding-bottom: calc(38vh - 85px);
  }
}

/* ==========================================================================
   REBRAND TYPOGRAPHY — family remap.
   This file loads after main.css, so re-declaring the same families wins:
     "GT Sectra Display" -> Playfair Display (display serif: home hero, …)
     "Gilroy"            -> Fira Sans (headings / UI)
     "Heebo"             -> Fira Sans (body)
   Every existing rule keeps working — zero selector overrides.
   Rollback: delete this block (original @font-face stay untouched in main.css).
   ========================================================================== */

/* --- GT Sectra Display -> Playfair Display (variable 400–900) --- */
@font-face {
  font-family: "GT Sectra Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "GT Sectra Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../assets/fonts/PlayfairDisplay-var-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Gilroy -> Fira Sans --- */
@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Gilroy";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Heebo -> Fira Sans (100 and 300 map onto the Light 300 file) --- */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-300-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-300-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
    U+FFFD;
}

@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/FiraSans-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- header logo as a text wordmark ("de-press" + ".co" on line 2) --- */
/* The anchor is a flex container; kill its UA underline at the source,
   otherwise it paints through the text items. SVG-only logo never needed it. */
.site-header-logo {
  text-decoration: none;
}

.dp-logo {
  display: block;
  font-family: Gilroy, Helvetica, Arial, sans-serif; /* -> Fira Sans via remap */
  font-weight: 700;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #fff; /* home theme — mirrors the old .site-header-logo svg{fill:#fff} */
}

.dp-logo-tld {
  display: block;
}

/* --- home hero: app link (link--under inside .home-hero-content) -----------
   Hero animates every span (opacity/translateY, staggered delays) and its
   .in-view end-state out-specifies .link--under's own line transform, which
   would flatten the overdraw and kill the hover shrink. Re-assert both.
   Lines stay white (roadmap p.3; the global red->white flip is p.7). --- */
.home-app-link .link-line,
.home-app-link .link-line--anim {
  background-color: #fff;
}

/* CTA sits below the sub-hero paragraph with the same breathing room
   as the "Принципы" link (home-about-link). The anchor is inline by
   default, so vertical margins would not apply. */
.home-app-link {
  display: inline-block;
  margin-top: 35px;
}

/* The hero paints every anchor with the container's lavender (inherited via
   .home-hero-content a { color: inherit }) and dims it to white/70% on
   hover — the social-list treatment. This button must look exactly like
   "Принципы" (home-about-link): solid white at rest AND on hover; only the
   underline answers the pointer. .home-hero-content a wins the class/element
   tie over .home-app-link, so re-assert with the doubled class. */
.home-app-link.link--under {
  color: #fff;
}

.no-touchevents .home-app-link.link--under:focus,
.no-touchevents .home-app-link.link--under:hover {
  color: #fff;
}

/* Hero's span rules (.in-view.home-hero .home-hero-content span, plus the
   nth-child stagger) out-specify .link-line's own transition and delay the
   line's hover response by .5s+. Re-assert the plain .link-line transition
   so the hover shrink answers immediately, like "Принципы". */
html:not(.disable-motion) .home-hero-content .home-app-link .link-line {
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: 0s;
}

html:not(.disable-motion)
  .in-view.home-hero
  .home-hero-content
  .home-app-link
  .link-line,
html:not(.disable-motion)
  .in-view.home-hero
  .home-hero-content
  .home-app-link
  .link-line--anim {
  -webkit-transform: translateX(-20%) scaleX(1.2);
  transform: translateX(-20%) scaleX(1.2);
}

/* !important: the hero span-intro cascade (translateY(80px) <-> in-view
   variants) kept winning over plain specificity here and the line either
   responded late or not at all. This link's hover must always answer
   instantly, like the footer "Принципы". */
.no-touchevents .home-app-link.link--under:hover .link-line,
.no-touchevents .home-app-link.link--under:focus .link-line {
  -webkit-transform: translateX(0) scaleX(1) !important;
  transform: translateX(0) scaleX(1) !important;
}

html:not(.disable-motion)
  .no-touchevents
  .in-view.home-hero
  .home-app-link.link--under:hover
  .link-line,
html:not(.disable-motion)
  .no-touchevents
  .in-view.home-hero
  .home-app-link.link--under:focus
  .link-line {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translateX(0) scaleX(1);
}

/* --- home hero: fx slogan box (roadmap p.2) --------------------------------
   The legacy fx title box (width 269px, fixed height 404px) was tuned for
   the old four-word slogan — one short word per line. The new slogan has
   longer lines (two-word groups, words up to ~557px at the 120px display
   size) and stacks 4-6 lines, so the fixed height overflowed onto the lead
   paragraph. Desktop: widen the box and let the height follow the stack.
   Mobile: shrink the type so the longest localized word fits a 390px
   viewport. --- */
@media (min-width: 64.375em) {
  .home-hero-title {
    height: auto;
    /* 800px: «в одиночестве» / "in solitude" lines of the p.16 slogan must
       hold on one line at the 120px display size; shorter locales are
       unaffected (width only decides where lines wrap). */
    width: 800px;
    /* p.18: legacy main.css pushed the box right (margin-left:22.4%) and
       ragged the lines right (text-align:right) for the old short slogan.
       The new slogan sits flush at the .center left edge, lines left-aligned;
       wrapping is untouched (width still decides it). */
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 50.9275em) {
  .home-hero-title {
    /* min(): the longest localized word (~5.5x the font size, e.g.
       "одиночестве") must stay inside the content box on 320-430px phones. */
    font-size: min(4.5714285714rem, 13.8vw);
  }
}

/* --- home hero: legacy per-word kerning vs the new slogan (roadmap p.2) -----
   main.css kerned the fx words for the old four-word slogan "We/Make/Good/
   Shit": -14px on word 1 and -4px on word 2 (desktop: -23px/-8px plus
   top:6px and margin-right:15px). Back then every word sat on its own line,
   so a negative trailing letter-spacing never pulled a neighbour. The new
   slogan wraps words WITHIN a line and the trailing space drags the next
   word into the previous one — "You|don't", "Aquí|no", "Hier|musst",
   "Tutaj|nie", "Тут|ти" collide on mobile; desktop shows a subtler -8px
   pull. Return words 1-2 to the title's own tracking (-.04em); the
   html[lang] -2px first-word overrides for ru/zh/ja/ko (specificity 0,3,1)
   stay in charge, and the last-word kerning is kept (line-final, harmless). */
.home-hero-title .fx-word:first-of-type,
.home-hero-title .fx-word:nth-of-type(2) {
  letter-spacing: inherit;
}

/* --- menu curtain slogan: DON'T CRY ALONE (roadmap p.6) --------------------
   The legacy slot held a pre-typeset PNG wordmark (baseline.png, 104x184,
   shown 52px wide, white, right-ragged). It is now real text — selectable and
   translatable. Legacy main.css scoped the reveal animation and phone hiding
   to .site-menu-content img, so those slots are mirrored here: same keyframes/
   timing/.6s delay as the old img and the same max-width breakpoint for
   display:none. The serif family goes through the rebrand remap below. */
.site-menu-slogan {
  display: block;
  margin: 0 0 55px auto;
  max-width: 150px;
  color: #fff;
  font-family: "GT Sectra Display", Times, Georgia, serif;
  font-weight: 500;
  font-size: 1.1428571429rem;
  line-height: 1.1;
  text-align: right;
  text-transform: uppercase;
  opacity: 0;
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}

.menu-open .site-menu-slogan {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-animation-name: uba4b19ff;
  animation-name: uba4b19ff;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.menu-close .site-menu-slogan {
  -webkit-transform: none;
  transform: none;
  opacity: 1;
}

@media (max-width: 50.9275em) {
  .site-menu-slogan {
    display: none;
  }
}

/* --- footer wordmark: WE MAKE GOOD SHIT → DON'T CRY ALONE (plan A1) ---------
   The legacy slot held svg.baseline — a pre-typeset wordmark (letter paths,
   45px wide, white, pushed right on desktop through .site-footer-title).
   It is now real text — selectable and translatable. Same treatment as
   .site-menu-slogan above: the serif family goes through the rebrand remap;
   desktop right alignment comes from .site-footer-title (text-align:right at
   >=50.9375em), mobile keeps the legacy left position. The dormant
   .site-footer-title .baseline rules in main.css (base + per-theme fills)
   target nothing anymore — legacy case-theme coloring returns under B3 if
   the redesigned palettes want it. */
.site-footer-slogan {
  display: block;
  color: #fff;
  font-family: "GT Sectra Display", Times, Georgia, serif;
  font-weight: 500;
  font-size: 1.1428571429rem;
  line-height: 1.1;
  text-transform: uppercase;
}

/* --- preloader (visible again) + page-transition curtain -------------------
   The ported main.css ships no .site-loader rules ("preloader UI removed");
   the DOM stub and the loader runtime (runtime/loader.ts) are intact, so the
   preloader is restored here: a flat navy cover with the SVG progress ring.
   Colors: the same curtain navy as the menu (#0c101b, main.css base color) —
   the menu curtain is flat by design (no gradient).
   Ring geometry: r=65 → circumference 2π·65 = 130π ≈ 408.407 — the exact
   scale the loader runtime tweens in (dashoffset = (130 − 130·p)·π). --- */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1150;
  display: grid;
  place-items: center;
  background-color: #0c101b;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.site-loader.is-visible {
  opacity: 1;
}

.site-loader.is-hidden {
  opacity: 0;
}

/* Direct page opens: the cover is up from the very first paint (the inline
   boot-state script in app/(legacy)/layout.tsx sets this before the markup
   parses); the loader runtime takes over with `is-visible`, `is-hidden`
   ends the cover. */
html.dp-boot-load .site-loader:not(.is-hidden) {
  opacity: 1;
}

.site-loader-content {
  display: grid;
  place-items: center;
}

/* The tree-island mark centered inside the ring: the legacy .site-loader-sprite
   slot (an empty span that ships without any CSS) carries the white logo and
   shares the content grid cell with the progress ring, so both stay concentric. */
.site-loader-sprite {
  grid-area: 1 / 1;
  width: 68px;
  height: 68px;
  background: url("/static/assets/images/loader/logo.png") center / contain no-repeat;
}

.site-loader-progress {
  grid-area: 1 / 1;
}

.site-loader-progress svg {
  display: block;
  width: 136px;
  height: 136px;
}

.site-loader-stroke {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 2;
}

.site-loader-percent {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 408.407px;
  stroke-dashoffset: 408.407px;
  transform: rotate(-90deg);
  transform-origin: 68px 68px;
}

/* --- page-transition curtain -----------------------------------------------
   The same flat curtain as the menu, driven across the full page load:
   leave — an internal link covers the screen (dp-nav-cover) and navigates;
   enter — the inline boot-state script sets dp-nav-in before first paint,
   boot swaps it to dp-nav-out after the loader completes (+0.3s hold). --- */
.page-curtain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 1200;
  background-color: #0c101b;
  transform: translateX(-100%);
  pointer-events: none;
}

html.dp-nav-in .page-curtain {
  transform: translateX(0);
  pointer-events: auto;
}

html.dp-nav-cover .page-curtain {
  animation: dp-curtain-in 0.8s cubic-bezier(0.86, 0, 0.07, 1) both;
  pointer-events: auto;
}

html.dp-nav-out .page-curtain {
  animation: dp-curtain-out 0.8s cubic-bezier(0.86, 0, 0.07, 1) both;
  pointer-events: auto;
}

@keyframes dp-curtain-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes dp-curtain-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* ------------------------------------------------------------------ */
/* i18n: 10-locale switcher + CJK fallbacks + cyrillic hero kerning   */
/* ------------------------------------------------------------------ */

/* The switcher now holds 10 languages; let long endonyms fit. */
.site-footer-languages ul {
  width: auto;
  min-width: 94px;
}

/* Fira Sans / Playfair Display carry no CJK glyphs — provide system
   fallbacks so zh/ja/ko render with proper native faces. */
html[lang="zh"] body,
html[lang="ja"] body,
html[lang="ko"] body {
  font-family: "Fira Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Noto Sans CJK JP", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html[lang="zh"] .fx-parent,
html[lang="ja"] .fx-parent,
html[lang="ko"] .fx-parent {
  font-family: "Playfair Display", "Hiragino Mincho ProN", "Yu Mincho",
    "Songti SC", "STSong", "Noto Serif CJK SC", "Noto Serif CJK JP",
    "Nanum Myeongjo", serif !important;
}

/* The -14/-23px squeeze on the hero's first word was kerned for "We";
   cyrillic and CJK glyphs would overlap. */
html[lang="ru"] .home-hero-title .fx-word:first-of-type,
html[lang="zh"] .home-hero-title .fx-word:first-of-type,
html[lang="ja"] .home-hero-title .fx-word:first-of-type,
html[lang="ko"] .home-hero-title .fx-word:first-of-type {
  letter-spacing: -2px;
}
/* ------------------------------------------------------------------ */

/* --- home cases: feelings («Если ты…») --------------------------------------
   The card is the message now: the feeling word (.home-cases-name) and the
   quiet tool offer (.link--caret) are visible on desktop too — main.css hides
   both for no-touch. Scenes are stacked, so they join the legacy scene
   choreography main.css gives only to .home-cases-headline/.home-cases-line:
   invisible while the scene is inactive, faded in on is-visible, faded out on
   leave. */

.no-touchevents .home-cases-name,
.no-touchevents .home-cases-content .link--caret {
  display: block;
}

html:not(.disable-motion).no-touchevents .home-cases-name,
html:not(.disable-motion).no-touchevents .home-cases-content .link--caret {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1),
    transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}

html:not(.disable-motion).no-touchevents .home-cases-scene.is-visible .home-cases-name,
html:not(.disable-motion).no-touchevents .home-cases-scene.is-visible .home-cases-content .link--caret {
  opacity: 1;
  transform: translateY(0);
}

html.disable-motion.no-touchevents .home-cases-scene:not(.is-visible) .home-cases-name,
html.disable-motion.no-touchevents .home-cases-scene:not(.is-visible) .home-cases-content .link--caret {
  display: none;
}

/* --- home cases, desktop trigger list: two-line names keep the gap -------------
   .home-cases-list li (main.css) has a FIXED height sized for a single text line
   (140px = line-height 60px + 80px of air / 130px = 60 + 70 on the narrow
   desktop). When a case name wraps to two lines, its text boxes (~120px) eat
   that air and the next trigger sits right under the case. Switch the items to
   flow layout: height follows the content, while the former air becomes a
   constant bottom margin (140−60=80px / 130−60=70px). One-line items stay
   pixel-identical (60px text + 80px margin = the old 140px track); two-line
   items grow by their extra line and keep the same gap to the next case. --- */

@media (min-width: 64.375em) {
  .no-touchevents .home-cases-list li {
    height: auto;
    margin-bottom: 80px;
  }
}

@media (min-width: 64.375em) and (max-width: 91.24em) {
  .no-touchevents .home-cases-list li {
    margin-bottom: 70px;
  }
}

/* --- footer: «Тишина./Эмпатия./Забота.» — только десктоп ---------------------
   Отзыв (UI-1): на мобилке три адресных блока футера убраны на всех страницах.
   Breakpoint — тот же, на котором .site-footer-block и так складывается в
   столбик. HTML/словари не тронуты: ключи common.word.* живут на contact
   (имена стран), блоки остаются в DOM для десктопа. */

@media (max-width: 47.99em) {
  .site-footer-block--address {
    display: none;
  }
}

/* --- home/мобайл: без шва между секцией about и футером ---------------------
   Видовой амбиент (body::before, эксперимент-блок выше) подсвечивает зону
   футера, а собственные слои секции обрываются посреди страницы: непрозрачный
   тёмный «грунт» .home-about::after (main.css, градиент к #0c101b) кончается
   сразу после кнопки «Принципы» (на мобайле padding-bottom: 0), а «рассвет»
   .home-about::before отцентрован на нижней кромке секции — оба дают резкую
   горизонтальную границу. На мобайле оба псевдоэлемента уступают место:
   секция и футер делят один непрерывный фон body + амбиент. Десктоп
   («последняя секция владеет горизонтом») не тронут. --- */
@media (max-width: 47.99em) {
  .home-about::after,
  .home-about::before {
    content: none;
  }
}

/* --- футер/мобайл: тире-разделитель и адрес — отдельными строками ------------
   Отзыв (UI-3): на мобилке «Хочешь помочь проекту — напиши: — адрес» слито в
   одну строку. Разделительная линия (a:before) и адрес ставятся столбиком
   под призывом: линия по центру (своей ширины: 10px ≤28.115em / 28px выше),
   адрес строкой ниже. Разметка/словари не тронуты (вариант подтверждён
   пользователем). Десктоп не затронут — flex space-between остаётся. --- */
@media (max-width: 47.99em) {
  .site-footer-contact a {
    display: block;
    margin-top: 12px;
  }

  .site-footer-contact a:before {
    display: block;
    margin: 0 auto 10px;
  }
}
/* ==========================================================================
   SUPPORT — de-press.co/support: the open treasury page. The content column
   mirrors privacy (720px, same type scale); the wallet plate and its copy
   button are the only new shapes.
   ========================================================================== */

[data-router-view="support"] {
  padding-top: 260px;
  padding-bottom: 240px;
}

@media (max-width: 47.99em) {
  [data-router-view="support"] {
    padding-top: 115px;
    padding-bottom: 160px;
  }
}

.support-header,
.support-section {
  max-width: 720px;
}

.support-headline {
  margin-bottom: 30px;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  font-size: 0.6428571429rem;
  letter-spacing: 0.4em;
  line-height: 1;
  text-transform: uppercase;
}

.support-headline--blue {
  color: rgba(187, 194, 229, 0.5);
}

.support-title {
  margin: 0;
  font-family: GT Sectra Display, Times, Georgia, serif;
  font-weight: 500;
  font-style: normal;
  color: #fff;
  font-size: 5.7142857143rem;
  letter-spacing: -0.04em;
  line-height: 1;
}

@media (max-width: 47.99em) {
  .support-title {
    font-size: 3.5714285714rem;
  }
}

@media (max-width: 21.865em) {
  .support-title {
    font-size: 2.8571428571rem;
  }
}

.support-lead {
  margin: 30px 0 0;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 1.6428571429rem;
  line-height: 1.5217391304;
  color: rgba(160, 168, 220, 0.7);
}

.support-subtitle {
  margin: 0 0 30px;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2857142857rem;
  letter-spacing: 0;
  color: #fff;
}

.support-section {
  margin-top: 120px;
}

@media (max-width: 47.99em) {
  .support-section {
    margin-top: 80px;
  }
}

.support-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7857142857;
  color: rgba(160, 168, 220, 0.7);
}

.support-list li {
  position: relative;
  padding-left: 26px;
}

.support-list li + li {
  margin-top: 18px;
}

.support-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(187, 194, 229, 0.5);
}

.support-text {
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7857142857;
  color: rgba(160, 168, 220, 0.7);
}

/* The two gateway plates — name, note, compact address, copy + QR. */
.support-wallet {
  position: relative;
  margin-top: 35px;
  padding: 30px 32px;
  border: 1px solid rgba(160, 168, 220, 0.2);
}

.support-wallet + .support-wallet {
  margin-top: 30px;
}

.support-wallet-name {
  margin: 0 0 12px;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.support-wallet-text {
  margin: 0;
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7857142857;
  color: rgba(160, 168, 220, 0.7);
}

/* Compact 4+4 address; a click anywhere on the line copies the full string
   (the runtime reads it from the plate's data-address). */
.support-wallet-address {
  margin: 22px 0 0;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.2142857143rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: #fff;
  cursor: pointer;
}

.support-wallet-actions {
  margin-top: 24px;
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.support-wallet-copy {
  padding: 14px 26px;
  border: 1px solid rgba(187, 194, 229, 0.5);
  background: none;
  font-family: Gilroy, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.6428571429rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

.support-wallet-copy:hover,
.support-wallet-copy.is-copied {
  border-color: #fff;
}

.support-wallet-copy.is-copied {
  color: rgba(187, 194, 229, 0.9);
}

.support-wallet-qr-wrap {
  position: relative;
  display: inline-flex;
}

.support-wallet-qr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  padding: 0;
  border: 1px solid rgba(187, 194, 229, 0.5);
  background: none;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s;
}

.support-wallet-qr:hover,
.support-wallet-qr[aria-expanded="true"] {
  border-color: #fff;
}

/* The scanner pop floats above the button on a white plate so a phone
   camera reads it straight off the dark page. */
.support-wallet-qr-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(160, 168, 220, 0.2);
}

/* Scene layering mirrors privacy: the island stays behind the content column
   in the hero and slides away behind it on scroll. */
:not(.menu-open) [data-page="support"] .scene-root-inner {
  z-index: -1;
}

@media (max-width: 64.365em) {
  :not(.menu-open) [data-page="support"] .scene-root-inner {
    z-index: 0;
  }
}

/* --- UI-6: северное сияние — аврора-слой сверху справа (home + меню) ---------
   PNG-градиенты about/contact перекрашены под aurora borealis (пурпурная
   кромка сверху → бирюза → зелёные шторы снизу, тёмно-навий небосвод и
   полупрозрачные края сохранены). Тот же набор (decorations/aurora-*.png —
   перекрашенный about) добавлен слоем сверху справа на главную и в меню
   (виден при menu-open/menu-close, поверх .site-menu-back z 990, под
   .site-menu-panel z 999). Слой декоративный: pointer-events: none. */

[data-router-view="home"] .home-aurora {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  pointer-events: none;
}

.site-menu-aurora {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 991;
  pointer-events: none;
  transition: opacity 0s;
  opacity: 0;
}

.menu-close .site-menu-aurora,
.menu-open .site-menu-aurora {
  opacity: 1;
}


/* --- сцена: плавное появление/уход острова -----------------------------------
   Island.onScroll снимает .scene-root.is-visible, когда скролл проходит
   последнюю ключевую точку состояния (у всех поз финальный кейпоинт имеет
   visible: false) — на нижнем экране страницы остров исчезал мгновенно:
   main.css переключает opacity 0↔1 без transition. Тайминг и изинг — те же,
   что у .home-cases-scene выше по файлу (is-visible choreography). */

.scene-root {
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* --- 404: страница не найдена -------------------------------------------------
   Оригинальная страница (в легаси 404 не существовало). Сцена — поза контактов
   (PAGE_STATES["not-found"] → CAREERS_STATE), фон — контактные PNG.
   Типографика — по образцу [data-router-view="contact"] из main.css
   (GT Sectra Display) и .home-hero-title (fx-заголовок «404.» с пер-буквенным
   reveal на .in-view). Локаль разрешает клиентская обёртка
   (components/pages/not-found-client.tsx) из первого сегмента URL. */

[data-router-view="not-found"] {
  position: relative;
  padding-top: 330px;
  padding-bottom: 110px;
}

[data-router-view="not-found"] .center {
  position: relative;
}

[data-router-view="not-found"] .nf-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

[data-router-view="not-found"] .nf-title {
  margin-bottom: 70px;
  font-family: GT Sectra Display, Times, Georgia, serif;
  font-weight: 700;
  font-style: normal;
  color: #fff;
  font-size: 8.5714285714rem;
  letter-spacing: -0.04em;
  line-height: 0.8916666667;
}

[data-router-view="not-found"] .nf-typed {
  height: 150px;
  max-width: 540px;
  margin-bottom: 60px;
  font-family: GT Sectra Display, Times, Georgia, serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: 3.5714285714rem;
  line-height: 1;
}

[data-router-view="not-found"] .nf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 25px 45px;
}

[data-router-view="not-found"] .nf-actions .link--caret {
  color: #fff;
}

[data-router-view="not-found"] .nf-actions .svg {
  fill: #fff;
}

[data-router-view="not-found"] .nf-write {
  font-family: Heebo, Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: rgba(160, 168, 220, 0.7);
  font-size: 0.9285714286rem;
  line-height: 1.9;
  text-decoration: none;
  transition: color 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.no-touchevents [data-router-view="not-found"] .nf-write:focus,
.no-touchevents [data-router-view="not-found"] .nf-write:hover {
  color: #fff;
}

@media (max-width: 50.9275em) {
  [data-router-view="not-found"] {
    padding-top: 200px;
    padding-bottom: 0;
  }

  [data-router-view="not-found"] .nf-title {
    margin-bottom: 50px;
    font-size: 5.7142857143rem;
  }

  [data-router-view="not-found"] .nf-typed {
    margin-bottom: 40px;
  }
}

@media (max-width: 37.49em) {
  [data-router-view="not-found"] {
    padding-top: 160px;
  }
}

@media (max-width: 21.865em) {
  [data-router-view="not-found"] .nf-title {
    font-size: 3.9285714286rem;
  }
}