/* ------------------------------------------------------------------
   mryav.com — shared styles

   TYPE
   The design is set in Neue Haas Grotesk Display Pro. All eight of its
   weights install under the single family name "Neue Haas Grotesk
   Display Pro" with non-standard style names ("45 Light", "55 Roman",
   "75 Bold"), which browsers cannot map onto CSS font-weight — asking
   that family for weight 300 or 400 lands on the XXThin face, and every
   page renders hairline-thin.

   So we never name that family directly. Instead each cut is bound to
   the CSS weight it belongs to, addressed by its PostScript name, under
   the alias "Neue Haas Display". Visitors without the font fall through
   to Inter, a neo-grotesque with the same weight steps, self-hosted so
   it renders identically everywhere and contacts no third party.

   Weight mapping — 45 Light -> 300, 55 Roman -> 400, 75 Bold -> 700.

   To serve Neue Haas to visitors too, you need a webfont licence from
   Commercial Type (the desktop .ttf files in ~/Library/Fonts are not
   licensed for embedding). With one, drop the woff2 files into
   /assets/fonts and add a url() after each local() below.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Neue Haas Display";
  src: local("NeueHaasDisplay-Light"), local("Neue Haas Grotesk Display Pro 45 Light");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Neue Haas Display";
  src: local("NeueHaasDisplay-Roman"), local("Neue Haas Grotesk Display Pro 55 Roman");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Neue Haas Display";
  src: local("NeueHaasDisplay-Bold"), local("Neue Haas Grotesk Display Pro 75 Bold");
  font-weight: 700;
  font-style: normal;
}

/* Inter (SIL Open Font License 1.1) — variable, latin subset */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 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+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-sans: "Neue Haas Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #000;
  --wordmark: #202124;
  --chrome-blue: #4287f6;
  --firefox-red: #f1213e;
  --muted-opacity: 0.6;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

a {
  color: inherit;
}

/* Link that carries no underline — used where the design shows plain text */
a.plain {
  text-decoration: none;
}

a.plain:hover,
a.plain:focus-visible {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

/* ---------- Signature ---------- */

.signature {
  display: block;
  width: 25.385px;
  height: 18.374px;
  flex: none;
}

/* "Love, Yav" sign-off — pinned to the bottom-right of the viewport, so it
   stays put while the privacy policy scrolls underneath it. */
.signoff {
  position: fixed;
  right: 54px;
  bottom: 32px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 0 8px 14px;
  background: #fff;
  font-size: 15.385px;
  pointer-events: none;
}

/* ---------- Home ---------- */

.home {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.home-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.385px;
}

.home-lines p {
  margin: 0;
}

.home-greeting {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Measure-limited lines on the 404 */
.wrap-316 {
  max-width: 316px;
}

/* ---------- Anket landing ---------- */

.anket {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.anket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  max-width: 700px;
  height: 400px;
  padding: 0 16px;
}

.anket-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.wordmark {
  margin: 0;
  color: var(--wordmark);
  font-size: 59.259px;
  font-weight: 300;
  letter-spacing: -2.963px;
  white-space: nowrap;
}

.anket-copy .lede,
.anket-copy .get-it {
  margin: 0;
  width: 240px;
  font-size: 14px;
  opacity: var(--muted-opacity);
}

.store-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.store-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.store-link:hover,
.store-link:focus-visible {
  opacity: 0.85;
}

.store-link--chrome {
  background: var(--chrome-blue);
}

.store-link--edge {
  background: #000;
}

.store-link--firefox {
  background: var(--firefox-red);
}

.store-link .icon {
  display: block;
  flex: none;
  overflow: hidden;
}

.store-link .icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon--chrome {
  width: 20px;
  height: 17px;
}

.icon--edge {
  width: 18px;
  height: 17px;
}

.icon--firefox {
  width: 15px;
  height: 15px;
}

.privacy-link {
  margin: 0;
  font-size: 12px;
  opacity: var(--muted-opacity);
}

.anket-shot {
  flex: none;
  width: 412px;
  max-width: 100%;
  height: 370px;
  overflow: hidden;
}

.anket-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Privacy policy ---------- */

.policy {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
}

.policy-inner {
  width: 100%;
  max-width: 700px;
  padding: 124px 16px 120px;
}

.policy-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 7px;
}

.policy-head .wordmark {
  font-size: 37.5px;
  letter-spacing: -1.875px;
}

.policy-head .kicker {
  margin: 0;
  font-size: 14px;
  opacity: var(--muted-opacity);
}

.doc {
  max-width: 481px;
  font-size: 14px;
  opacity: var(--muted-opacity);
}

.doc h2 {
  margin: 0 0 17px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
}

.doc p {
  margin: 0 0 17px;
}

.doc ul {
  margin: 0 0 17px;
  padding: 0;
}

.doc li {
  margin: 0;
}

.doc strong {
  font-weight: 700;
}

/* Plain dash list — flush left, matching the design */
.dash-list {
  list-style: none;
}

.dash-list li::before {
  content: "- ";
}

/* Bulleted list — hanging bullet, 1.5em indent */
.bullet-list {
  list-style: disc;
  padding-left: 21px;
}

.doc a {
  color: inherit;
}

/* Link that carries no underline — used where the design shows plain text */
a.plain {
  text-decoration: none;
}

a.plain:hover,
a.plain:focus-visible {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .anket-row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    gap: 40px;
  }

  .anket-shot {
    width: 100%;
    max-width: 412px;
    height: auto;
    aspect-ratio: 412 / 370;
  }

  .wordmark {
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .policy-inner {
    padding: 72px 16px 120px;
  }

  .policy-head {
    flex-wrap: wrap;
    gap: 12px;
  }

  .policy-head .wordmark {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  /* The column runs full-width here, so the sign-off would clip a line of
     text mid-scroll. Widen its white ground into a strip and text passes
     cleanly beneath it instead. */
  .signoff {
    left: 0;
    right: 24px;
    bottom: 0;
    justify-content: flex-end;
    padding: 12px 0 16px 24px;
  }
}