/* Marty Talks website. Colours follow the app's Palette.swift. */
:root {
  color-scheme: light;

  --navy: #061858;          /* Palette.navy */
  --navy-soft: #1a2858;
  --blue: #1283f5;          /* Palette.speakBlue */
  --blue-light: #4aa6ff;    /* Palette.speakBlueLight */
  --sky: #ceeafd;           /* Palette.glowBlue */
  --sky-pale: #e8f2ff;      /* Palette.lightBlue */
  --cream: #fcf4ce;         /* Palette.glowYellow */
  --lavender: #ece4fb;
  --yellow: #ffc233;
  --page: #f5f6fd;

  /* The pastel ground under the home page, where one section meets the next:
     sky → pale lavender → lavender-blue → lavender → warm ivory, then a faint blush. */
  --b0: #dceafd;
  --b1: #e2edfd;
  --b2: #eeedf8;
  --b3: #edf0fb;
  --b4: #efedf5;
  --b5: #faf6f1;
  --b6: #fbf2f1;

  /* One family for headings and text: Onest has no Bulgarian locl forms, so
     lang="bg" keeps the standard Cyrillic shapes. Headings use its real 700. */
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Nunito", var(--font-body);

  --gutter: clamp(20px, 5vw, 72px);
  --header-h: 88px;

  --section-pad: clamp(56px, 6vw, 96px);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Links to a section land below the fixed header. */
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nowrap {
  white-space: nowrap;
}

/* Blue emphasis in headings: colour only, never italic. */
.accent {
  color: var(--blue);
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1392px);
  margin-inline: auto;
}

/* Header */

/* As on the Proofy site: fixed and clear at the top of the page; once the page
   scrolls it gets a frosted white backing (.scrolled), and it slides away while
   scrolling down and back on a scroll up (.is-hidden). Both set by script.js.
   Transform only, so a change of direction reverses from where it is. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  background: transparent;
  transform: translateY(0);
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.37s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header.scrolled {
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 10px 30px rgb(6 24 88 / 0.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

/* Hidden, it drops its shadow and ignores the pointer; keyboard focus brings it back. */
.site-header.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;
  pointer-events: none;
  transition: background-color 0.25s, box-shadow 0.25s, transform 0.24s cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-hidden {
    transition: background-color 0.25s, box-shadow 0.25s;
  }
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 1.875rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}

.brand-mark {
  width: 48px;
  height: 48px;
  margin-top: -6px;
}

.nav-links {
  display: flex;
  gap: clamp(32px, 4.6vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: inline-block;
  padding-block: 8px;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--blue);
}

/* On a page with a current item the other links step back (Proofy's rule). */
.nav-links:has(a[aria-current]) a:not([aria-current]):not(:hover) {
  color: rgb(6 24 88 / 0.65);
}

.menu-toggle {
  display: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.6vw, 72px);
}

/* Language: a filled pill with the current language's code; it opens a white card
   with this page in every language the site has (script.js). No edges, fill only. */
.lang {
  position: relative;
}

.lang-title {
  display: none;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  color: var(--navy);
  font: 600 0.9375rem/1 var(--font-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}

.lang-toggle:hover,
.lang.open .lang-toggle {
  background: rgb(255 255 255 / 0.95);
}

.lang-toggle:focus-visible {
  border-radius: 999px;
}

.lang-chevron {
  transition: transform 0.2s;
}

.lang.open .lang-chevron {
  transform: rotate(180deg);
}

.lang-list {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 184px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 44px rgb(6 24 88 / 0.14);
}

@media (min-width: 721px) {
  .js .lang:not(.open) .lang-list {
    display: none;
  }
}

.lang-list a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.lang-list a:hover {
  background: var(--sky-pale);
  color: var(--blue);
}

.lang-list a[aria-current] {
  color: var(--blue);
  font-weight: 600;
}

/* Without JavaScript the languages are a plain row of links beside the menu. */
.no-js .lang-toggle {
  display: none;
}

.no-js .lang-list {
  position: static;
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

@keyframes nav-row-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-open .site-nav li,
  .nav-open .lang {
    animation: none;
  }

  .site-nav,
  .menu-bars i {
    transition: none !important;
  }
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(720px, min(100svh, 1040px));
  padding-top: var(--header-h);
  overflow: hidden;
  background: linear-gradient(180deg, var(--b0) 0%, var(--b1) 100%);
}

/* The landscape fills the hero below the header, so the menu sits on the plain
   ground; its calm left side carries the words. It fades in at the top and its
   lavender-blue clouds dissolve at the bottom into the ground (--b1). */
.hero-sky {
  --fade: clamp(90px, 12vw, 180px);
  --fade-in: clamp(48px, 6vw, 96px);
  position: absolute;
  inset: var(--header-h) 0 0;
  z-index: -1;
  background: #e6effd;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--fade-in) * 0.2),
    rgb(0 0 0 / 0.3) calc(var(--fade-in) * 0.4),
    rgb(0 0 0 / 0.62) calc(var(--fade-in) * 0.6),
    rgb(0 0 0 / 0.88) calc(var(--fade-in) * 0.8),
    #000 var(--fade-in),
    #000 calc(100% - var(--fade)),
    rgb(0 0 0 / 0.88) calc(100% - var(--fade) * 0.8),
    rgb(0 0 0 / 0.62) calc(100% - var(--fade) * 0.6),
    rgb(0 0 0 / 0.3) calc(100% - var(--fade) * 0.4),
    rgb(0 0 0 / 0.08) calc(100% - var(--fade) * 0.2),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--fade-in) * 0.2),
    rgb(0 0 0 / 0.3) calc(var(--fade-in) * 0.4),
    rgb(0 0 0 / 0.62) calc(var(--fade-in) * 0.6),
    rgb(0 0 0 / 0.88) calc(var(--fade-in) * 0.8),
    #000 var(--fade-in),
    #000 calc(100% - var(--fade)),
    rgb(0 0 0 / 0.88) calc(100% - var(--fade) * 0.8),
    rgb(0 0 0 / 0.62) calc(100% - var(--fade) * 0.6),
    rgb(0 0 0 / 0.3) calc(100% - var(--fade) * 0.4),
    rgb(0 0 0 / 0.08) calc(100% - var(--fade) * 0.2),
    transparent 100%);
}

.hero-sky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 100%;
}

.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding-block: clamp(24px, 4vh, 48px);
}

.hero-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.hero-title .line,
.hero-lead .line {
  display: block;
}

.hero-title .line {
  white-space: nowrap;
}

.hero-title .dot {
  color: var(--yellow);
}

.hero-lead {
  margin: clamp(24px, 3.4vh, 36px) 0 clamp(28px, 4vh, 40px);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-soft);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  padding: 0 30px 0 32px;
  border-radius: 999px;
  /* One flat blue, as in the design; deep enough for white text at 4.5:1. */
  background: #1273e6;
  box-shadow: 0 12px 28px rgb(18 131 245 / 0.3);
  color: #fff;
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
}

.button:hover {
  background: #0d64cc;
}

.button:focus-visible {
  border-radius: 999px;
}

.button-arrow {
  flex: none;
}


/*
  The scene: the tablet, the screenshot seen through its opening, and the
  boy with the mascots in front. Measured on a 1000 × 740 grid so the
  boy's fingertip (72.1% × 24.2% of characters.webp) lands on the screen.
*/

.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1000 / 740;
}

.tablet {
  position: absolute;
  top: 0;
  left: 27%;
  width: 72%;
  aspect-ratio: 1137 / 866;
  filter: drop-shadow(0 28px 36px rgb(6 24 88 / 0.22));
}

/* tablet-frame.webp has a 1024 × 768 (exactly 4:3) opening at 56,49.
   The screenshot box is 1032 × 774 at 52,46: still 4:3, tucked 4 px under the bezel. */
.tablet-screen {
  position: absolute;
  left: 4.5734%;
  top: 5.3118%;
  width: 90.7652%;
  height: 89.3764%;
  object-fit: cover;
  background: var(--sky-pale);
}

.tablet-frame {
  position: relative;
  width: 100%;
}

.characters {
  position: absolute;
  left: 0;
  top: 42.97%;
  width: 70%;
}

.hero-tagline {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 4px var(--gutter) clamp(40px, 5vh, 64px);
  /* A supporting line: about 27% smaller than before, well under the headings. */
  font-weight: 600;
  font-size: clamp(1.375rem, 0.85rem + 1.5vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--navy);
  /* Lifts the line off the river and hills behind it. */
  text-shadow: 0 0 28px rgb(255 255 255 / 0.95), 0 0 10px rgb(255 255 255 / 0.8);
}

/* Narrower screens: words and button first, then the scene below. */

@media (max-width: 960px) {
  .hero {
    min-height: 0;
  }

  /* The tall landscape sits at the bottom, under the scene; plain sky above it. */
  .hero-sky {
    background: linear-gradient(100deg, #cfe9fe 0%, #bfe1fd 100%);
  }

  .hero-sky img {
    position: absolute;
    left: 0;
    bottom: 0;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
    mask-image: linear-gradient(to bottom, transparent, #000 22%);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .hero-copy {
    padding-block: 28px 8px;
  }

  .scene {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --header-h: 72px;
  }

  .brand-name {
    font-size: 1.625rem;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  /* Phones: one round frosted button; the menu opens as a full-height sheet under
     the header, large links one under another (as on the Proofy site). */
  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    margin-right: -4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.6);
    box-shadow: 0 6px 20px rgb(6 24 88 / 0.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    color: var(--navy);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s, box-shadow 0.25s;
  }

  .js .menu-toggle:hover {
    background: rgb(255 255 255 / 0.85);
  }

  .menu-toggle:focus-visible {
    border-radius: 50%;
  }

  /* Three bars; the bottom one starts short. Open, they turn into a cross. */
  .menu-bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }

  .menu-bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s;
  }

  .menu-bars i:nth-child(1) { top: 0; }
  .menu-bars i:nth-child(2) { top: 6px; }
  .menu-bars i:nth-child(3) { top: 12px; left: 6px; }

  .nav-open .menu-bars i {
    transition: top 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s, left 0.3s, opacity 0.2s;
  }

  .nav-open .menu-bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav-open .menu-bars i:nth-child(2) { opacity: 0; }
  .nav-open .menu-bars i:nth-child(3) { top: 6px; left: 0; transform: rotate(-45deg); }

  /* While open the header turns solid, so it and the sheet read as one surface. */
  .site-header.nav-open {
    background: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.nav-locked,
  html.nav-locked body {
    overflow: hidden;
  }

  /* The sheet hangs from the whole header, not from the centred row. */
  .js .header-inner {
    position: static;
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding: 6px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background:
      radial-gradient(ellipse 90% 45% at 0% 100%, rgb(206 234 253 / 0.6), transparent 70%),
      #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s;
  }

  .js .nav-links {
    flex-direction: column;
    gap: 0;
  }

  .js .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 2px;
    border-bottom: 1px solid rgb(6 24 88 / 0.08);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  /* A small chevron at the end of each row. */
  .js .nav-links a::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.35;
    transition: opacity 0.2s, transform 0.2s;
  }

  .js .nav-links a:hover::after,
  .js .nav-links a[aria-current]::after {
    opacity: 0.9;
  }

  .js .nav-links a:hover::after {
    transform: translateX(3px) rotate(45deg);
  }

  /* The rows arrive one after another. */
  .js .nav-open .nav-links li {
    animation: nav-row-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .js .nav-open .nav-links li:nth-child(2) { animation-delay: 0.04s; }
  .js .nav-open .nav-links li:nth-child(3) { animation-delay: 0.08s; }

  /* In the sheet the languages are always open: a row of pills under the links,
     the current one solid blue. */
  .js .site-nav {
    display: block;
  }

  .js .lang {
    margin-top: 32px;
  }

  .js .nav-open .lang {
    animation: nav-row-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
  }

  .js .lang-toggle {
    display: none;
  }

  .js .lang-title {
    display: block;
    margin: 0 2px 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgb(6 24 88 / 0.6);
  }

  .js .lang .lang-list {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .js .lang-list a {
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--sky-pale);
    font-size: 1.0625rem;
  }

  .js .lang-list a[aria-current] {
    background: var(--blue);
    color: #fff;
  }

  /* Without JavaScript the links stay visible under the logo. */
  .no-js .header-inner {
    flex-wrap: wrap;
    padding-block: 12px;
  }

  .no-js .site-nav,
  .no-js .nav-links {
    flex-wrap: wrap;
    gap: 4px 20px;
  }

  .hero-title {
    font-size: clamp(2.5rem, 11.5vw, 3.5rem);
  }

  .hero-lead {
    font-size: 1.125rem;
  }

  .button {
    width: 100%;
    justify-content: center;
    gap: 12px;
    padding-inline: 20px;
    font-size: 1.0625rem;
  }

  /* Edge to edge on a phone, so the tablet stays big enough to read. */
  .scene {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
}

/* Sections below the hero: alternating words and pictures. */

/*
  One continuous pastel ground: each section paints a soft gradient whose top
  colour is exactly the previous section's bottom colour (--b1 … --b5), so no
  seam shows. Each landscape then dissolves into it at the top and bottom
  through its own alpha (--fade-top / --fade-bottom, set per section to suit
  the picture). Nothing is laid over the artwork, and the figures, devices,
  cards and text sit on their own layers, untouched.
*/
.feature {
  --fade-top: clamp(72px, 9vw, 140px);
  --fade-bottom: clamp(64px, 8vw, 120px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--section-pad);
}

.feature-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* An eased ramp (not a straight line), so the fade has no visible start or end. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--fade-top) * 0.2),
    rgb(0 0 0 / 0.3) calc(var(--fade-top) * 0.4),
    rgb(0 0 0 / 0.62) calc(var(--fade-top) * 0.6),
    rgb(0 0 0 / 0.88) calc(var(--fade-top) * 0.8),
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    rgb(0 0 0 / 0.88) calc(100% - var(--fade-bottom) * 0.8),
    rgb(0 0 0 / 0.62) calc(100% - var(--fade-bottom) * 0.6),
    rgb(0 0 0 / 0.3) calc(100% - var(--fade-bottom) * 0.4),
    rgb(0 0 0 / 0.08) calc(100% - var(--fade-bottom) * 0.2),
    transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0,
    rgb(0 0 0 / 0.08) calc(var(--fade-top) * 0.2),
    rgb(0 0 0 / 0.3) calc(var(--fade-top) * 0.4),
    rgb(0 0 0 / 0.62) calc(var(--fade-top) * 0.6),
    rgb(0 0 0 / 0.88) calc(var(--fade-top) * 0.8),
    #000 var(--fade-top),
    #000 calc(100% - var(--fade-bottom)),
    rgb(0 0 0 / 0.88) calc(100% - var(--fade-bottom) * 0.8),
    rgb(0 0 0 / 0.62) calc(100% - var(--fade-bottom) * 0.6),
    rgb(0 0 0 / 0.3) calc(100% - var(--fade-bottom) * 0.4),
    rgb(0 0 0 / 0.08) calc(100% - var(--fade-bottom) * 0.2),
    transparent 100%);
}

/* Section grounds and fades, tuned to each picture's own edge colours. */

/* Hills: sky at the top, pale blue clouds at the bottom. */
.feature-choices {
  --fade-top: clamp(96px, 11vw, 170px);
  background: linear-gradient(180deg, var(--b1) 0%, #e6eefc 55%, var(--b2) 100%);
}

/* Room: a warm shelf at the top, lavender clouds at the bottom. */
.feature-world {
  --fade-top: clamp(96px, 11vw, 160px);
  --fade-bottom: clamp(80px, 9vw, 140px);
  background: linear-gradient(180deg, var(--b2) 0%, #f1edf7 50%, var(--b3) 100%);
}

/* Path: sky (and a bright sun on the right) at the top, grey-lavender clouds below. */
.feature-day {
  --fade-top: clamp(96px, 11vw, 170px);
  --fade-bottom: clamp(72px, 9vw, 130px);
  background: linear-gradient(180deg, var(--b3) 0%, #eaf0fb 50%, var(--b4) 100%);
}

.feature-help {
  background: linear-gradient(180deg, var(--b4) 0%, #f5f0f6 55%, var(--b5) 100%);
}

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

.feature-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.feature-title .line,
.feature-lead .line {
  display: block;
}

/* Each heading line stays whole beside its picture („Голямо значение.“). */
@media (min-width: 961px) {
  .feature-title .line {
    white-space: nowrap;
  }
}

.feature-title .dot {
  color: var(--yellow);
}

.feature-lead {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy-soft);
}

/* Art boxes size their contents in container units, so every layer scales together. */
.feature-art {
  position: relative;
  container-type: inline-size;
}

/* An app card: the app's own picture with its word under it. */
.word-card,
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  box-shadow:
    0 18px 36px -18px rgb(6 24 88 / 0.35),
    0 2px 6px rgb(6 24 88 / 0.06);
  color: var(--navy);
  font-weight: 700;
}

/* 1. Малки избори */

.feature-choices .feature-bg {
  object-position: 70% 100%;
}

.art-choices {
  aspect-ratio: 1.3;
}

.choices-figure {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76%;
  container-type: inline-size;
}

.choices-mascots {
  width: 100%;
}

/* The blank card's face, measured in s1-mascots.webp (between the blue hands). */
.held-card {
  position: absolute;
  left: 10.58%;
  top: 47.04%;
  width: 49.38%;
  height: 41.81%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  color: var(--navy);
  font-size: 5cqw;
  font-weight: 700;
  line-height: 1;
}

.held-card img {
  height: 64%;
  width: auto;
}

.word-card {
  position: absolute;
  gap: 1.2cqw;
  width: 19%;
  padding: 2.2cqw 2.2cqw 1.8cqw;
  border-radius: 2.6cqw;
  font-size: max(0.75rem, 2.3cqw);
  line-height: 1;
}

.word-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.word-card-apple {
  top: 4%;
  right: 20%;
  transform: rotate(-7deg);
}

/* The app's „Да“ picture is only 119 px, so it stays small inside its card. */
.word-card-yes {
  top: 25%;
  right: 4%;
  width: 16%;
  transform: rotate(8deg);
}

.word-card-yes img {
  width: 70%;
  margin-block: 15% 12%;
}

/* 2. Неговият свят: picture on the left, words on the right. */

.feature-world {
  padding-bottom: 0;
}

.feature-world .feature-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: end;
}

.feature-world .feature-art {
  order: -1;
}

.feature-world .feature-copy {
  align-self: center;
}

.feature-world .feature-bg {
  object-position: 0% 50%;
}

/* The hand runs to the bottom of the section. */
.art-world {
  aspect-ratio: 1 / 0.86;
}

.phone {
  position: absolute;
  top: 0;
  left: 8%;
  width: 56%;
}

/* In s2-phone.webp the forearm leaves the picture at its bottom-right corner
   (the phone itself stops at 58% of the height). Only that last stretch of the
   arm dissolves, downwards and towards the right edge; phone, screen, fingers
   and thumb stay fully opaque. */
.phone-frame {
  position: relative;
  width: 100%;
  -webkit-mask-image:
    linear-gradient(to bottom, #000 76%, rgb(0 0 0 / 0.55) 87%, rgb(0 0 0 / 0.15) 94%, transparent 99%),
    linear-gradient(to left, transparent 0, rgb(0 0 0 / 0.5) 6%, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 76%, rgb(0 0 0 / 0.55) 87%, rgb(0 0 0 / 0.15) 94%, transparent 99%),
    linear-gradient(to left, transparent 0, rgb(0 0 0 / 0.5) 6%, #000 14%);
  mask-composite: intersect;
}

/* s2-phone.webp (973 × 1514) has a rounded hole at 230,18 (386 × 854); the
   screenshot fills it at full height and loses about 4 px of each side margin,
   never stretched. */
.phone-screen {
  position: absolute;
  left: 23.638%;
  top: 1.189%;
  width: 39.671%;
  height: 56.407%;
  object-fit: cover;
  background: var(--sky-pale);
}

/* Dynamic Island over the screenshot, where the generated phone had it. */
.phone-island {
  position: absolute;
  z-index: 1;
  left: 37.205%;
  top: 2.114%;
  width: 12.539%;
  height: 2.312%;
  border-radius: 999px;
  background: #000;
}

.photo-card {
  position: absolute;
  top: 24%;
  left: 52%;
  width: 30%;
  margin: 0;
  padding: 1.6cqw;
  border-radius: 3cqw;
  background: #fff;
  box-shadow: 0 24px 40px -18px rgb(6 24 88 / 0.4);
  transform: rotate(6deg);
}

.photo-card img {
  width: 100%;
  border-radius: 2cqw;
}

.photo-spark {
  position: absolute;
  top: 13%;
  left: 52%;
  width: 7%;
  color: var(--blue-light);
}

/* 3. По-ясно какво предстои */

.feature-day .feature-grid {
  grid-template-areas:
    "copy steps"
    "art  steps";
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.feature-day .feature-copy {
  grid-area: copy;
}

.feature-day .feature-bg {
  object-position: 0% 100%;
}

.steps {
  grid-area: steps;
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 52px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  position: relative;
  gap: 10px;
  padding: 10px 10px 14px;
  border-radius: 22px;
  font-size: clamp(0.875rem, 0.7rem + 0.4vw, 1.125rem);
}

.step img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  background: #f3f7ff;
}

.step:first-child img {
  object-fit: contain;
  padding: 10%;
}

/* Arrow between the steps. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 42%;
  right: calc(-0.5 * clamp(28px, 3.4vw, 52px) - 11px);
  width: 22px;
  height: 22px;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.art-day {
  grid-area: art;
}

.walkers {
  width: min(100%, 520px);
  filter: drop-shadow(0 18px 14px rgb(6 24 88 / 0.18));
}

/* 4. Тук сме */

.feature-help {
  padding-block: clamp(48px, 5vw, 72px) clamp(40px, 5vw, 72px);
}

/* A soft lavender glow behind the mascots, over the section's ground. */
.feature-help::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(38% 55% at 80% 55%, rgb(236 228 251 / 0.9), rgb(236 228 251 / 0) 70%);
}

.feature-help .feature-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
}

/* „Помощ и въпроси“, „Свържете се с нас“: plain text links with an arrow,
   rendered only once their pages exist. */
.help-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.help-links a {
  color: var(--blue);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.help-links a:hover {
  color: var(--navy);
}

.huggers {
  width: min(100%, 360px);
  margin-inline: auto;
}

/* Footer: compact, on the page colour. */

/* Continues the ground from the last section: warm ivory into a faint blush. */
.site-footer {
  background: linear-gradient(180deg, var(--b5) 0%, var(--b6) 100%);
  color: var(--navy);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 28px;
}

.site-footer .brand-name {
  font-size: 1.5rem;
}

.site-footer .brand-mark {
  width: 40px;
  height: 40px;
}

/* The legal links and © together on the right. */
.footer-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
}

.footer-links {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover,
.footer-links a[aria-current="page"] {
  color: var(--blue);
}

.footer-copy {
  margin: 0;
  color: var(--navy-soft);
  font-size: 0.875rem;
}

@media (max-width: 960px) {
  .feature-grid,
  .feature-world .feature-grid,
  .feature-help .feature-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Words first on narrow screens, then the picture. */
  .feature-world .feature-art {
    order: 0;
  }

  .feature-art {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .feature-choices .feature-bg {
    object-position: 85% 100%;
  }

  .feature-world .feature-bg {
    object-position: 10% 50%;
  }

  .feature-day .feature-grid {
    grid-template-areas:
      "copy"
      "steps"
      "art";
    grid-template-columns: minmax(0, 1fr);
  }

  .steps {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .art-day {
    width: min(100%, 520px);
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  :root {
    --section-pad: 48px;
  }

  .feature-help {
    padding-block: 40px 24px;
  }

  .huggers {
    width: min(82%, 320px);
  }

  /* Pictures run edge to edge on a phone so the cards and screen stay readable. */
  .feature-art {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }

  .choices-figure {
    width: 82%;
  }

  .steps {
    gap: 22px;
  }

  .step {
    gap: 6px;
    padding: 6px 6px 10px;
    border-radius: 16px;
    font-size: 0.8125rem;
  }

  .step img {
    border-radius: 11px;
  }

  .step:not(:last-child)::after {
    right: -19px;
    width: 16px;
    height: 16px;
  }

}

/* Help page (pomosht.html) */

.nav-links a[aria-current="page"] {
  color: var(--blue);
  font-weight: 600;
}

/* Inner pages (Help, Contact, and later Privacy and Terms) sit on plain white;
   only the hero keeps the pastel sky. */
.inner-page,
.inner-page .site-footer {
  background: #fff;
}

/* The hills start below the header (the menu sits on the plain ground), fade in
   at the top and dissolve at the bottom. Under them the ground runs from sky to
   white, so the hero ends white before the content. */
.help-hero {
  --fade-top: clamp(48px, 6vw, 96px);
  --fade-bottom: clamp(80px, 10vw, 150px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-h) + 8px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--b0) 0%, var(--b1) calc(100% - var(--fade-bottom)), #fff 100%);
}

.help-hero .feature-bg {
  top: var(--header-h);
  height: calc(100% - var(--header-h));
  object-position: 85% 70%;
}

.help-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(16px, 4vw, 64px);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--navy-soft);
  font-size: 0.9375rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: rgb(6 24 88 / 0.4);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--blue);
}

.help-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.help-lead {
  margin: 18px 0 0;
  color: var(--navy-soft);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  font-weight: 500;
}

.help-art {
  position: relative;
  width: min(100%, 460px);
  justify-self: end;
  container-type: inline-size;
}

/* „?“ on the blank card the blue mascot holds (same face measurements as .held-card). */
.help-art .held-card {
  font-size: 22cqw;
  color: var(--blue);
}

.help-body {
  padding: 16px 0 clamp(48px, 6vw, 88px);
}

/* One readable column for the topics and answers. */
.help-content {
  width: min(100% - 2 * var(--gutter), 920px);
  margin-inline: auto;
}

.help-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  list-style: none;
}

/* Category pills: secondary navigation, never like the main CTA. Pale blue on the
   white page, no edge or border; the current section (aria-current, set by
   script.js) is a medium-light blue. One weight for every state, so labels never
   change width. */
.help-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: #e6effc;
  color: #25365e;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.help-tabs a:hover {
  background: #d9e8fb;
}

/* After :hover and more specific, so hovering never undoes the current state. */
.help-tabs a[aria-current="location"] {
  background: #a9cff5;
  color: #103b70;
}

.help-tabs a[aria-current="location"]:hover {
  background: #9bc5ef;
}

.help-tabs a:focus-visible {
  border-radius: 999px;
}

.faq-group {
  scroll-margin-top: 24px;
}

.faq-group + .faq-group {
  margin-top: clamp(40px, 5vw, 64px);
}

.faq-group-title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.faq {
  border-bottom: 1px solid rgb(6 24 88 / 0.1);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--blue);
}

/* Plus that turns into a minus when the answer is open. */
.faq summary::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--blue), var(--blue)) center / 20px 2.5px no-repeat,
    linear-gradient(var(--blue), var(--blue)) center / 2.5px 20px no-repeat;
}

.faq[open] summary::after {
  background: linear-gradient(var(--blue), var(--blue)) center / 20px 2.5px no-repeat;
}

.faq-answer {
  padding: 0 0 22px;
  color: var(--navy-soft);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
  margin: 0 0 12px;
  max-width: 68ch;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

.faq-answer li + li {
  margin-top: 4px;
}

.faq-answer strong {
  color: var(--navy);
  font-weight: 600;
}

.faq-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 640px;
  margin: 18px 0 4px;
  padding: 0;
  list-style: none;
}

.faq-cards li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow:
    0 14px 28px -18px rgb(6 24 88 / 0.35),
    0 2px 6px rgb(6 24 88 / 0.06);
  color: var(--navy);
  font-size: 1rem;
  font-weight: 700;
}

.faq-cards img {
  width: min(100%, 120px);
}

@media (max-width: 720px) {
  .help-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-art {
    width: min(78%, 320px);
    justify-self: center;
  }

  .help-tabs {
    gap: 10px;
  }

  .help-tabs a {
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.9375rem;
  }

  .faq-cards {
    gap: 10px;
  }

  .faq-cards li {
    padding: 10px 6px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .help-tabs a,
  .faq summary,
  .breadcrumb a {
    transition: color 0.15s ease, background-color 0.15s ease;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .button {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .nav-links a,
  .lang-list a,
  .help-links a,
  .footer-links a {
    transition: color 0.15s ease;
  }

  .button:hover {
    transform: translateY(-1px);
  }
}

/* Contact page: the help page's hero, then the form beside a lavender card. */

.help-title .dot {
  color: var(--yellow);
}

/* An envelope on the blank card the blue mascot holds. */
.held-envelope {
  width: 52%;
  height: auto;
  color: var(--blue);
}

.contact-body {
  padding: 16px 0 clamp(48px, 6vw, 88px);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.contact-title {
  margin: 0 0 24px;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

.field label {
  font-size: 1.0625rem;
  font-weight: 600;
}

.field-hint {
  font-weight: 500;
  color: var(--navy-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  border: 0;
  border-radius: 14px;
  background: #ebf2fd;
  color: var(--navy);
  font: inherit;
  font-size: 1.0625rem;
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.field ::placeholder {
  color: rgb(6 24 88 / 0.45);
}

.field select {
  appearance: none;
  padding-right: 52px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23061858' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center / 22px no-repeat,
    #ebf2fd;
}

/* The prompt option reads like a placeholder until a topic is chosen. */
.field select:invalid {
  color: rgb(6 24 88 / 0.45);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 2px;
  border-radius: 14px;
}

.contact-form .button {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.form-error {
  margin: -6px 0 18px;
  color: #c0263a;
  font-weight: 600;
}

.contact-aside {
  overflow: hidden;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: linear-gradient(180deg, #efedfb 0%, #f3f0fb 100%);
  color: var(--navy-soft);
}

.aside-title {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
}

.contact-aside p {
  margin: 0;
  font-size: 1.0625rem;
}

.contact-aside hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid rgb(6 24 88 / 0.12);
}

.aside-huggers {
  width: min(100%, 300px);
  margin: 24px auto 0;
}

.contact-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 4vw, 48px);
  border-radius: 28px;
  background: var(--sky-pale);
}

.contact-help-title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  font-weight: 700;
}

.contact-help a {
  color: var(--blue);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.contact-help a:hover {
  color: var(--navy);
}

@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Privacy page: the help page's hero and pills, then numbered sections. */

/* A shield with a lock on the blank card the blue mascot holds. */
.held-shield {
  width: 40%;
  height: auto;
  color: var(--blue);
}

.policy-section {
  scroll-margin-top: 24px;
  padding: clamp(24px, 3vw, 32px) 0;
}

/* A hairline between sections, as between the help page's questions. */
.policy-section + .policy-section {
  border-top: 1px solid rgb(6 24 88 / 0.1);
}

.policy-section:first-of-type {
  padding-top: 0;
}

.policy-title {
  display: flex;
  gap: 0.35em;
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.policy-number {
  flex: none;
}

.policy-text {
  padding-left: 1.6em;
  color: var(--navy-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.policy-text > * {
  margin: 0;
}

.policy-text > * + * {
  margin-top: 12px;
}

.policy-text ul {
  padding-left: 1.2em;
}

.policy-text li + li {
  margin-top: 8px;
}

.policy-text strong {
  color: var(--navy);
  font-weight: 600;
}

.policy-text a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}

.policy-text a:hover {
  color: var(--navy);
}

#kontakt {
  scroll-margin-top: 24px;
}

@media (max-width: 720px) {
  .policy-text {
    padding-left: 0;
  }
}

/* Terms page: the privacy page's layout; lines and a check on the held card. */
.held-doc {
  width: 52%;
  height: auto;
  color: var(--blue);
}