/* فوق تحت — marketing site, V2 design
   Tokens and values come from design-handoff/v2/README.md ("Design Tokens",
   "Landing page") and the prototype "Foug Ta7at - Landing.dc.html", whose
   inline styles are the exact values used here.
   V2 is flat and rounded: radii from the token scale, no hard shadows, no
   decorative rotations.
   All directional CSS uses logical properties so one layout serves RTL and LTR. */

:root {
  --cream: #FFF8E9;
  --royal: #3A50A2;
  --navy: #252872;
  --yellow: #F2D857;
  --ok: #3FB37F;
  --pass: #E5484D;
  --white: #FFFFFF;
  --royal-hover: #33489a;
  --rec-off: #4a4f86;
  --video: repeating-linear-gradient(45deg, #2e3a80 0 10px, #33408a 10px 20px);

  /* Display face: Lalezar in Arabic, Bungee in English. Arabic is never set
     in Bungee (no Arabic glyphs), so anything that can carry Arabic in
     either language (card words, deck names, the صح/طوّف cards) names
     Lalezar directly instead of using this token. */
  --disp: Lalezar, sans-serif;
  --body: "IBM Plex Sans Arabic", system-ui, sans-serif;

  --h1: clamp(46px, 13vw, 64px);
  --sub: clamp(22px, 6vw, 26px);
  --h2: 40px;
}

html[lang="en"] {
  --disp: Bungee, Lalezar, sans-serif;
  --h1: clamp(30px, 9vw, 46px);
  --sub: 15px;
  --h2: clamp(26px, 7.4vw, 40px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* room for the fixed download bar */
  padding-bottom: 76px;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
a:hover { color: var(--royal); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 { font-weight: 400; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
/* .word-card and .result set display, which would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
img { max-width: 100%; }

/* ---------- animation ---------- */
@keyframes v2-bob { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-8px) rotate(3deg); } }
@keyframes v2-pop { 0% { transform: scale(.94); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes v2-up {
  0%, 20%  { transform: rotate(0); }
  45%, 70% { transform: rotate(-14deg) translateY(-6px); }
  100%     { transform: rotate(0); }
}
@keyframes v2-down {
  0%, 20%  { transform: rotate(0); }
  45%, 70% { transform: rotate(14deg) translateY(6px); }
  100%     { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
  padding: 12px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(37, 40, 114, .08);
}

.site-logo { display: flex; align-items: center; text-decoration: none; }
.site-logo img { height: 44px; width: auto; display: block; }

.site-nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.nav-pill {
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: var(--navy);
}
.nav-pill:hover { background: var(--yellow); color: var(--navy); }

/* On a phone the four pills take their own row under logo + switch. */
@media (max-width: 719px) {
  .site-nav { order: 3; width: 100%; justify-content: center; }
}

.lang-switch {
  display: flex;
  background: var(--white);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
}
.lang-btn--ar { padding: 5px 14px 2px; font-family: Lalezar, sans-serif; font-size: 16px; }
.lang-btn--en { padding: 6px 14px 4px; font-family: Bungee, sans-serif; font-size: 12px; }
.lang-btn.is-on { background: var(--navy); color: var(--white); }

/* ---------- shared bits ---------- */
.section-title {
  margin: 0 0 4px;
  font-family: var(--disp);
  font-weight: 400;
  font-size: var(--h2);
  line-height: 1.3;
}
.section-sub { margin: 0 0 24px; font-weight: 500; font-size: 15px; opacity: .8; }

.store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: var(--white);
  border-radius: 16px;
  padding: 12px 22px;
  text-decoration: none;
}
.store-btn:hover { background: var(--royal); color: var(--white); }
.store-btn__mark { width: 26px; height: 26px; flex: none; }
.store-btn__text { text-align: start; }
.store-btn__small { display: block; font-size: 11px; opacity: .8; }
.store-btn__big { display: block; font-family: Bungee, sans-serif; font-size: 17px; line-height: 1.3; }

.status-pill {
  background: var(--yellow);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- 1. hero ---------- */
.hero { padding: 44px 18px 56px; }
.hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: center;
}

.hero__pitch {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.hero__mascot {
  width: 130px;
  height: auto;
  animation: v2-bob 2s ease-in-out infinite alternate;
}
.hero__title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  font-size: var(--h1);
  line-height: 1.25;
  color: var(--navy);
}
.hero__tagline {
  margin: 0;
  font-family: var(--disp);
  font-size: var(--sub);
  line-height: 1.4;
  color: var(--royal);
}
.hero__body {
  margin: 0;
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 500;
  text-wrap: pretty;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

/* ---------- the round demo ---------- */
.demo {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.demo__chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 460px;
}
.deck-chip {
  border: 0;
  border-radius: 999px;
  padding: 5px 14px 2px;
  background: var(--white);
  color: var(--navy);
  font-family: Lalezar, sans-serif;
  font-size: 15px;
}
.deck-chip.is-on { background: var(--navy); color: var(--white); }

/* An iPhone 16 Pro on its side: 19.5:9 screen, titanium band, thin black
   bezel, Dynamic Island at the top of the phone (which is the left edge
   held landscape) and the side buttons on the long edges. The hardware is
   placed with physical left/right on purpose: a phone doesn't mirror when
   the page switches language, only its screen content does. */
.demo { container-type: inline-size; }
.phone {
  --r: clamp(24px, 7.4cqw, 38px);
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 3px;
  border-radius: var(--r);
  background: linear-gradient(160deg, #d9d6cf 0%, #8f8b83 22%, #c9c5bd 48%, #77736c 74%, #bdb9b1 100%);
  box-shadow: 0 18px 36px rgba(37, 40, 114, .22), 0 3px 8px rgba(37, 40, 114, .18);
  transform: rotate(1.2deg);
  transition: transform .22s ease-out;
}
/* down = correct, up = pass, the same direction the app reads off the sensor */
.phone.is-down { transform: rotate(9deg); }
.phone.is-up { transform: rotate(-9deg); }

.phone__bezel {
  padding: clamp(5px, 1.5cqw, 8px);
  border-radius: calc(var(--r) - 3px);
  background: #0b0b0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.phone__btn {
  position: absolute;
  height: 4px;
  background: linear-gradient(#a9a59d, #6f6b64);
}
.phone__btn--power   { top: -3px; left: 23%; width: 15%; border-radius: 3px 3px 0 0; }
.phone__btn--camera  { top: -3px; left: 64%; width: 8%;  border-radius: 3px 3px 0 0; }
.phone__btn--action  { bottom: -3px; left: 17%; width: 5%;  border-radius: 0 0 3px 3px; }
.phone__btn--vol-up  { bottom: -3px; left: 26%; width: 10%; border-radius: 0 0 3px 3px; }
.phone__btn--vol-down{ bottom: -3px; left: 38%; width: 10%; border-radius: 0 0 3px 3px; }

.phone__island {
  position: absolute;
  z-index: 2;
  left: 2.2%;
  top: 50%;
  height: 31%;
  aspect-ratio: 37 / 126;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #000;
}

.screen {
  position: relative;
  aspect-ratio: 19.5 / 9;
  border-radius: calc(var(--r) - 3px - clamp(5px, 1.5cqw, 8px));
  background: var(--royal);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
}
.screen.is-flash-ok { background: var(--ok); }
.screen.is-flash-pass { background: var(--pass); }

.screen__pill {
  position: absolute;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 8px;
  padding: 2px 10px 0;
  font-family: Lalezar, sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}
.screen__timer { top: 12px; inset-inline-end: 9%; font-size: 18px; transition: background .2s; }
.screen__timer.is-low { background: var(--pass); color: var(--white); }
.screen__deck {
  top: 12px;
  inset-inline-start: 9%;
  font-size: 15px;
  max-width: calc(100% - 90px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen__rule { bottom: 12px; font-size: 13px; }
.screen__rule--ok { inset-inline-start: 9%; }
.screen__rule--pass { inset-inline-end: 9%; }

.screen__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 10%;
}

.start-btn {
  border: 0;
  border-radius: 14px;
  background: var(--yellow);
  color: var(--navy);
  padding: 8px 26px 3px;
  font-family: Lalezar, sans-serif;
  font-size: 26px;
}
.start-btn:active, .again-btn:active, .answer-btn:active, .store-btn:active, .sticky-bar__cta:active { transform: scale(.97); }

.word-card {
  background: var(--navy);
  border-radius: 18px;
  padding: 12px 26px 6px;
  max-width: 80%;
  text-align: center;
  animation: v2-pop .18s ease-out;
}
.word-card__word {
  font-family: Lalezar, sans-serif;
  font-size: var(--word-size, 38px);
  line-height: 1.3;
  color: var(--white);
}

.result { display: flex; gap: 12px; align-items: center; }
.result__score {
  background: var(--navy);
  border-radius: 16px;
  padding: 6px 18px 2px;
  text-align: center;
  color: var(--white);
}
.result__count {
  display: block;
  font-family: Lalezar, sans-serif;
  font-size: 34px;
  line-height: 1.3;
  color: var(--yellow);
}
.result__label { font-size: 11px; font-weight: 700; }
.again-btn {
  border: 0;
  border-radius: 12px;
  background: var(--yellow);
  color: var(--navy);
  padding: 8px 16px 3px;
  font-family: Lalezar, sans-serif;
  font-size: 19px;
}

.demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.answer-btn {
  border: 0;
  border-radius: 12px;
  color: var(--white);
  padding: 9px 16px 5px;
  font-family: Lalezar, sans-serif;
  font-size: 17px;
}
.answer-btn--ok { background: var(--royal); }
.answer-btn--pass { background: var(--navy); }
.answer-btn:disabled { opacity: .45; cursor: default; }
.score-pill {
  background: var(--white);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
}
.demo__hint { margin: 0; font-size: 12px; font-weight: 500; opacity: .75; text-align: center; }

/* ---------- 2. how to play ---------- */
.how {
  background: var(--navy);
  color: var(--white);
  padding: 56px 18px;
  scroll-margin-top: 80px;
}
.how__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.how__steps { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.how__steps .section-title { margin-bottom: 6px; }
.step {
  background: var(--royal);
  color: var(--white);
  border-radius: 16px;
  padding: 16px 18px 12px;
  font-family: Lalezar, sans-serif;
  font-size: 19px;
  line-height: 1.4;
}
.step--key { background: var(--yellow); color: var(--navy); }

.how__tilt {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.tilt__demos { display: flex; justify-content: center; gap: 28px; }
.tilt__demo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tilt-card {
  width: 110px;
  height: 62px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Lalezar, sans-serif;
  font-size: 22px;
}
.tilt-card--ok { background: var(--yellow); color: var(--navy); animation: v2-down 2.2s ease-in-out infinite; }
.tilt-card--pass { background: var(--royal); color: var(--white); animation: v2-up 2.2s ease-in-out infinite; }
.tilt__caption { font-weight: 700; font-size: 13px; }
.tilt__note { margin: 0; max-width: 34ch; font-size: 12px; line-height: 1.7; opacity: .7; text-align: center; }

/* ---------- 3. categories ---------- */
.decks {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 18px 10px;
  scroll-margin-top: 80px;
}
.deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
/* Two columns on a phone, as the app's own chooser has. */
@media (max-width: 459px) {
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.deck-tile {
  position: relative;
  height: 190px;
  border: 0;
  border-radius: 18px;
  background: var(--royal);
  color: var(--white);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.deck-tile:hover { background: var(--royal-hover); }
.deck-tile.is-on { box-shadow: 0 0 0 4px var(--yellow); }

.badge {
  position: absolute;
  top: 10px;
  border-radius: 7px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.6;
  white-space: nowrap;
}
.badge--count { inset-inline-end: 10px; background: var(--yellow); color: var(--navy); }
.badge--paid { inset-inline-start: 10px; background: var(--navy); color: var(--yellow); }

.deck-tile__art {
  flex: 1;
  min-height: 60px;
  width: 100%;
  max-width: 80%;
  margin-top: 22px;
  object-fit: contain;
  display: block;
}
.deck-tile__name {
  font-family: Lalezar, sans-serif;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.deck-tile__sample {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  opacity: .9;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 459px) {
  .deck-tile { height: 170px; padding: 10px; }
  .deck-tile__name { font-size: 19px; }
  .badge { top: 8px; padding: 2px 6px; font-size: 10px; }
  .badge--count { inset-inline-end: 8px; }
  .badge--paid { inset-inline-start: 8px; }
}

.decks__foot { margin: 16px 0 0; font-size: 13px; opacity: .75; }

/* ---------- 4. record the round ---------- */
.rec-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 18px 10px;
  scroll-margin-top: 80px;
}
.rec {
  background: var(--royal);
  color: var(--white);
  border-radius: 28px;
  padding: 30px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
}
.rec__copy {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.rec__pill {
  background: var(--yellow);
  color: var(--navy);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
  font-size: 12px;
}
.rec__title {
  margin: 0;
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(26px, 7.4vw, 34px);
  line-height: 1.3;
}
.rec__body { margin: 0; font-size: 15px; line-height: 1.75; opacity: .9; max-width: 46ch; }
.rec__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rec__point { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 500; }
.rec__bullet { flex: none; width: 18px; height: 18px; border-radius: 9px; background: var(--yellow); margin-top: 3px; }

.rec__toggle {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
}
.rec__toggle.is-on { background: var(--yellow); color: var(--navy); }
.rec__track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--navy);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 2px;
}
.rec__toggle.is-on .rec__track { justify-content: flex-end; }
.rec__knob { width: 16px; height: 16px; border-radius: 8px; background: var(--yellow); }

.rec__media { flex: 1 1 280px; min-width: 0; display: flex; justify-content: center; }
.video-plate {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  border: 5px solid var(--rec-off);
  background: var(--video);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .2s;
}
.video-plate.is-on { border-color: var(--yellow); }
.video-plate__play {
  width: 58px;
  height: 58px;
  border-radius: 29px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The play triangle points with reading direction, like the prototype's. */
.video-plate__tri {
  width: 0;
  height: 0;
  border-inline-start: 18px solid var(--navy);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-inline-start: 4px;
}
.video-plate__caption {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--yellow);
}
.video-plate:not(.is-on) .video-plate__caption { color: #c9cbe6; }

/* ---------- 5. get the game ---------- */
.get {
  margin-top: 56px;
  background: var(--yellow);
  padding: 54px 18px;
  scroll-margin-top: 80px;
}
.get__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.get__mascot { width: 110px; height: auto; }
.get .section-title { margin: 0; }
.get__body { margin: 0; max-width: 40ch; font-size: 16px; font-weight: 500; line-height: 1.7; }
.get__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.play-plate {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 16px;
  padding: 12px 22px;
  text-align: start;
}
.play-plate .store-btn__small { opacity: .7; }
.get__note {
  background: var(--navy);
  color: var(--yellow);
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- 6. footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding: 34px 18px 40px;
}
.site-footer__row {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.site-footer__logo { height: 52px; width: auto; display: block; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.footer-link { color: var(--cream); font-size: 14px; }
.footer-link:hover { color: var(--yellow); }
.site-footer__note {
  max-width: 1120px;
  margin: 20px auto 0;
  opacity: .7;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- sticky download bar ---------- */
.sticky-bar {
  position: fixed;
  bottom: 12px;
  inset-inline: 12px;
  z-index: 40;
  background: var(--navy);
  color: var(--white);
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(37, 40, 114, .25);
}
.sticky-bar__text { font-weight: 700; font-size: 13px; line-height: 1.4; }
.sticky-bar__cta {
  background: var(--yellow);
  color: var(--navy);
  border-radius: 12px;
  padding: 8px 16px 4px;
  text-decoration: none;
  white-space: nowrap;
  font-family: Lalezar, sans-serif;
  font-size: 17px;
}
.sticky-bar__cta:hover { color: var(--navy); }

/* ---------- privacy policy page ---------- */
/* Generated markup, see scripts/build-privacy-page.ts. Styled after the V2
   app's privacy screen: navy page, royal section cards with yellow titles,
   a yellow contact card. */
body.policy-page { background: var(--navy); color: var(--white); padding-bottom: 0; }

.policy {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 18px 48px;
}
.policy__title {
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.3;
  color: var(--white);
}
.policy__updated {
  margin: 4px 0 18px;
  font-weight: 700;
  font-size: 13px;
  opacity: .7;
}
.policy__intro {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  text-wrap: pretty;
}

.policy__section,
.policy__contact {
  background: var(--royal);
  border-radius: 18px;
  padding: 18px 18px 16px;
  margin-bottom: 14px;
}
.policy__contact { background: var(--yellow); color: var(--navy); }

.policy__heading {
  margin: 0 0 8px;
  font-family: Lalezar, sans-serif;
  font-size: 19px;
  line-height: 1.4;
  color: var(--yellow);
}
.policy__contact .policy__heading { color: var(--navy); }
.policy__line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.75;
  text-wrap: pretty;
}
.policy__line:last-child { margin-bottom: 0; }
.policy__contact a { color: var(--navy); font-weight: 700; }

.policy__back { margin: 26px 0 0; font-weight: 700; font-size: 14px; }
.policy__back a { color: var(--yellow); }
.policy__back a:hover { color: var(--white); }