/*
  Stops marketing site
  Pure CSS, no JavaScript. Light and dark follow the system setting.
*/

:root {
  --accent: #ff2d55;
  --accent-deep: #d6224a;
  --accent-soft: rgba(255, 45, 85, 0.14);
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --hairline: rgba(0, 0, 0, 0.08);
  --glass: rgba(255, 255, 255, 0.72);
  --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25), 0 10px 20px -10px rgba(0, 0, 0, 0.12);
  --radius: 28px;
  --max: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #ff375f;
    --bg: #000000;
    --bg-elevated: #121214;
    --text: #f5f5f7;
    --text-secondary: #98989d;
    --hairline: rgba(255, 255, 255, 0.1);
    --glass: rgba(40, 40, 44, 0.72);
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 10px 20px -10px rgba(0, 0, 0, 0.6);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--accent-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  a {
    color: var(--accent);
  }
}

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

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* MARK: - Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 19px;
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.nav-links {
  display: flex;
  gap: 26px;
  font-size: 14px;
}

.nav-links a {
  color: var(--text-secondary);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 640px) {
  .nav-links .optional {
    display: none;
  }
}

/* MARK: - Light / dark icon swap */

.icon-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .icon-light {
    display: none;
  }

  .icon-dark {
    display: block;
  }
}

/* MARK: - Hero */

.hero {
  padding: 96px 0 40px;
  text-align: center;
  overflow: hidden;
}

.hero-icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 28px;
  filter: drop-shadow(0 18px 30px rgba(52, 199, 89, 0.28));
}

.hero h1 {
  font-size: clamp(44px, 8vw, 84px);
  font-weight: 700;
}

.hero h1 .accent {
  color: var(--accent);
}

.hero .lede {
  font-size: clamp(19px, 2.4vw, 24px);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 22px auto 0;
}

.hero .trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 34px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-deep);
}

.hero .trust-shield {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-color-scheme: dark) {
  .hero .trust {
    color: var(--accent);
  }
}

/* App Store badge first, "See what it does" underneath. */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.button-primary {
  background: var(--text);
  color: var(--bg);
}

.button-primary:hover {
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4);
}

.button-secondary {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  .button-primary {
    color: #000;
  }

  .button-secondary {
    color: var(--accent);
  }
}

/* The official App Store badge: black on light pages, white on dark. */
.appstore-badge {
  display: inline-flex;
  transition: transform 0.2s ease;
}

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

.appstore-badge img {
  display: block;
  height: 50px;
  width: auto;
}

.apple-logo {
  width: 18px;
  height: 22px;
  fill: currentColor;
}

.platforms {
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* MARK: - Phones */

.devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  margin-top: 72px;
  perspective: 1600px;
}

/* Apple's iPhone 18 Pro bezel (1350 x 2760) drawn over the screenshot, so the
   frame, Dynamic Island and buttons are the real device's. The shadow follows
   the bezel's outline rather than a box. */
.phone {
  position: relative;
  flex: none;
  width: 290px;
  aspect-ratio: 1350 / 2760;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
}

.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/bezel-silver.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .phone {
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.7));
  }

  .phone::after {
    background-image: url("images/bezel-black.png");
  }
}

.phone.side {
  width: 250px;
  opacity: 0.96;
}

.phone.side.left {
  transform: rotateY(14deg) translateX(20px);
}

.phone.side.right {
  transform: rotateY(-14deg) translateX(-20px);
}

@media (max-width: 900px) {
  .phone.side {
    display: none;
  }
}

/* The bezel's screen opening: 1206 x 2622 at 72, 69, exactly an iPhone 18 Pro
   screenshot. The corners are rounded a little tighter than the opening's
   (about 190 px) so the screenshot tucks under the black border and never
   shows past the frame's outer edge. */
.screen {
  position: absolute;
  left: 5.333%;
  top: 2.5%;
  width: 89.333%;
  height: 95%;
  border-radius: 15.34% / 7.06%;
  overflow: hidden;
  background: #000;
}

/* A screenshot from the app, filling the screen under the bezel. */
.shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* MARK: - Sections */

section {
  padding: 110px 0;
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}

.eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
  margin-bottom: 12px;
}

@media (prefers-color-scheme: dark) {
  .eyebrow {
    color: var(--accent);
  }
}

.section-head h2 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
}

.section-head p {
  margin-top: 18px;
  font-size: 20px;
  color: var(--text-secondary);
}

/* Alternating feature rows */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 120px;
}

.feature:last-child {
  margin-bottom: 0;
}

.feature.flip .feature-copy {
  order: 2;
}

.feature-copy h3 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  margin-bottom: 18px;
}

.feature-copy > p {
  font-size: 19px;
  color: var(--text-secondary);
}

.feature-copy ul {
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}

.feature-copy li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}

.feature-copy li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.feature-visual {
  display: flex;
  justify-content: center;
}

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 90px;
  }

  .feature.flip .feature-copy {
    order: 0;
  }
}

/* Two phones in one feature visual: the second stands in front, overlapping
   the first, which sits back a little higher and smaller. */
.phone-pair {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.phone-pair .phone {
  width: min(250px, 38vw);
}

.phone-pair .phone.back {
  margin-right: calc(-0.3 * min(250px, 38vw));
  transform: translateY(-32px) scale(0.92);
  transform-origin: bottom right;
  opacity: 0.96;
}

.phone-pair .phone.front {
  position: relative;
  z-index: 1;
}

/* Floating patches showcase */
.patch-cloud {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
}

.patch-cloud img {
  position: absolute;
  width: 34%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.25));
  animation: float 7s ease-in-out infinite;
}

.patch-cloud img:nth-child(1) { left: 4%; top: 6%; transform: rotate(-9deg); }
.patch-cloud img:nth-child(2) { left: 36%; top: 0; animation-delay: -1s; }
.patch-cloud img:nth-child(3) { left: 66%; top: 10%; transform: rotate(8deg); animation-delay: -2s; }
.patch-cloud img:nth-child(4) { left: 0; top: 40%; transform: rotate(5deg); animation-delay: -3s; }
.patch-cloud img:nth-child(5) { left: 33%; top: 34%; width: 38%; animation-delay: -4s; z-index: 2; }
.patch-cloud img:nth-child(6) { left: 68%; top: 44%; transform: rotate(-6deg); animation-delay: -5s; }
.patch-cloud img:nth-child(7) { left: 14%; top: 70%; transform: rotate(-4deg); animation-delay: -2.5s; }
.patch-cloud img:nth-child(8) { left: 52%; top: 72%; transform: rotate(7deg); animation-delay: -1.5s; }

@keyframes float {
  50% {
    translate: 0 -10px;
  }
}

/* A small "Pro" mark after a feature heading, for features in Stops Pro. */
.pro-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(-4px);
}

@media (prefers-color-scheme: dark) {
  .pro-tag {
    color: var(--accent);
  }
}

/* MARK: - Platform showcase */

/* A sideways scroller, one device per card, snapping to each. The side
   padding lines the first card up with the page's content column, and the
   next card peeks in from the edge so it reads as scrollable without a hint. */
.platform-scroller {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 24px max(24px, calc((100% - var(--max)) / 2 + 24px)) 56px;
  scroll-padding-inline: max(24px, calc((100% - var(--max)) / 2 + 24px));
  margin-bottom: 56px;
}

.platform-scroller::-webkit-scrollbar {
  display: none;
}

.platform-scroller:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.platform {
  flex: none;
  scroll-snap-align: start;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Every device sits on the same baseline, whatever its shape. */
.platform-visual {
  height: 540px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.platform .phone {
  width: 260px;
}

.platform figcaption {
  max-width: 320px;
}

.platform figcaption strong {
  display: block;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.platform figcaption span {
  color: var(--text-secondary);
  font-size: 16px;
}

/* Devices other than the iPhone, built like .phone: the element has the bezel
   image's proportions, the bezel is drawn over it by ::after, and .screen sits
   in the bezel's transparent opening (measured from the PNG's alpha). */
.device {
  position: relative;
  flex: none;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
}

@media (prefers-color-scheme: dark) {
  .device {
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.7));
  }
}

.device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}

.device .screen {
  position: absolute;
  overflow: hidden;
  background: #000;
}

/* Until a screenshot replaces it, the screen shows a tint and the device's
   name. To fill one in, drop an <img class="shot"> inside .screen and remove
   the "placeholder" class and data-label. */
.device.placeholder .screen {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 45, 85, 0.22), transparent 60%),
    radial-gradient(90% 90% at 90% 100%, rgba(255, 45, 85, 0.12), transparent 60%),
    #2a2a2e;
  display: grid;
  place-items: center;
}

.device.placeholder .screen::after {
  content: attr(data-label);
  color: rgba(255, 255, 255, 0.55);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* iPad Air 13-inch, landscape. Bezel 2980 x 2300, opening 2732 x 2048 at
   124, 126. The black border is thick, so the screen overshoots a little. */
.device.ipad {
  width: 620px;
  aspect-ratio: 2980 / 2300;
}

.device.ipad::after {
  background-image: url("images/bezel-ipad.png");
}

.device.ipad .screen {
  left: 3.9%;
  top: 5.2%;
  width: 92.2%;
  height: 89.6%;
  border-radius: 2.4% / 3.2%;
}

/* iMac 24-inch. Bezel 4760 x 4050 including the stand, opening 4480 x 2520
   at 140, 150. The opening's edge is a hairline, so the screen matches it. */
.device.mac {
  width: 600px;
  aspect-ratio: 4760 / 4050;
}

.device.mac::after {
  background-image: url("images/bezel-mac.png");
}

.device.mac .screen {
  left: 2.94%;
  top: 3.7%;
  width: 94.12%;
  height: 62.22%;
  border-radius: 0;
}

/* iPhone Duo, closed: the outer screen. Bezel 1574 x 2194, opening 1398 x 2032
   at 88, 81. The frame is thin at the top and bottom, so the screen matches
   the opening closely. Star White in both modes: Night Sky vanishes against
   the dark background. */
.device.duo-closed {
  width: 250px;
  aspect-ratio: 1574 / 2194;
}

.device.duo-closed::after {
  background-image: url("images/bezel-duo-closed.png");
}

.device.duo-closed .screen {
  left: 5.59%;
  top: 3.69%;
  width: 88.82%;
  height: 92.62%;
  /* Tight corners on the hinge side, round ones on the free edge, as the
     opening is cut. */
  border-radius: 3% 12% 12% 3% / 2% 8% 8% 2%;
}

/* iPhone Duo, open, in landscape: the inner display. Bezel 3093 x 2247 (the
   portrait bezel turned a quarter), opening 2853 x 2007 at 120, 120. */
.device.duo-open {
  width: 680px;
  aspect-ratio: 3093 / 2247;
}

.device.duo-open::after {
  background-image: url("images/bezel-duo-open-landscape.png");
}

.device.duo-open .screen {
  left: 3.88%;
  top: 5.34%;
  width: 92.24%;
  height: 89.32%;
  border-radius: 6.5% / 9%;
}

/* The Duo section: the open phone alone, since the Everywhere scroller
   already shows it closed. */
.duo-pair {
  display: flex;
  justify-content: center;
}

@media (max-width: 760px) {
  .duo-pair .device.duo-open {
    width: 88vw;
  }
}

/* Apple Watch Ultra 3 with its band. Bezel 600 x 960, opening 422 x 514 at
   89, 223, inside a thick black border. */
.device.watch {
  width: 230px;
  aspect-ratio: 600 / 960;
}

.device.watch::after {
  background-image: url("images/bezel-watch.png");
}

.device.watch .screen {
  left: 14.3%;
  top: 22.8%;
  width: 71.4%;
  height: 54.4%;
  border-radius: 17% / 14%;
}

@media (max-width: 900px) {
  .platform-visual {
    height: 460px;
  }

  .platform .phone {
    width: 200px;
  }

  .device.ipad {
    width: min(520px, 86vw);
  }

  .device.mac {
    width: min(520px, 86vw);
  }

  .device.watch {
    width: 200px;
  }
}

/* MARK: - Plans */

.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.plan {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--hairline);
}

.plan.pro {
  border-color: var(--accent);
}

.plan h3 {
  font-size: 26px;
  margin-bottom: 18px;
}

.plan.pro h3 {
  color: var(--accent);
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.plan.pro li {
  color: var(--text);
}

.prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.price strong {
  display: block;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.price span {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}

.price-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .prices {
    grid-template-columns: 1fr;
  }
}

/* MARK: - Grid of smaller features */

.alt {
  background: var(--bg-elevated);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--hairline);
}

.alt .card {
  background: var(--bg);
}

.card .glyph {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: 18px;
}

@media (prefers-color-scheme: dark) {
  .card .glyph {
    color: var(--accent);
  }
}

.card .glyph svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card h3 {
  font-size: 21px;
  margin-bottom: 8px;
}

.card p {
  color: var(--text-secondary);
  font-size: 16px;
}

/* MARK: - Privacy band */

.privacy-band {
  text-align: center;
}

.privacy-band .shield {
  width: 84px;
  height: 84px;
  margin: 0 auto 26px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-deep));
  box-shadow: 0 20px 40px -14px rgba(31, 157, 69, 0.6);
}

.privacy-band .shield svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.pill {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--bg-elevated);
  font-size: 15px;
  font-weight: 500;
}

/* MARK: - Final call to action */

.final {
  text-align: center;
  padding-bottom: 130px;
}

.final .hero-icon {
  width: 96px;
  height: 96px;
}

.final h2 {
  font-size: clamp(36px, 6vw, 60px);
  margin-bottom: 18px;
}

.final p {
  font-size: 20px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

/* MARK: - Footer */

footer {
  border-top: 1px solid var(--hairline);
  padding: 36px 0 48px;
  font-size: 13px;
  color: var(--text-secondary);
}

footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

footer nav {
  display: flex;
  gap: 22px;
}

footer a {
  color: var(--text-secondary);
}

/* Language menu, written by Tools/localize_site.py. Opens upwards from the footer. */

.lang-menu {
  position: relative;
  flex-basis: 100%;
}

footer details.lang-menu {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}

footer .lang-menu summary {
  font-size: inherit;
  font-weight: 400;
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  color: var(--text-secondary);
}

footer .lang-menu summary::after {
  content: none;
}

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

.lang-menu summary svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.lang-menu ul {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 8px;
  list-style: none;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.lang-menu li a {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--text);
}

.lang-menu li a:hover {
  background: var(--accent-soft);
}

.lang-menu li a[aria-current] {
  color: var(--accent-deep);
  font-weight: 600;
}

/* MARK: - Document pages (privacy, support) */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 110px;
}

.doc h1 {
  font-size: clamp(38px, 6vw, 56px);
  margin-bottom: 12px;
}

.doc .updated {
  color: var(--text-secondary);
  margin-bottom: 44px;
}

.doc h2 {
  font-size: 26px;
  margin: 48px 0 14px;
}

.doc p,
.doc li {
  color: var(--text-secondary);
}

.doc p + p {
  margin-top: 14px;
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin-bottom: 8px;
}

.doc strong {
  color: var(--text);
}

.summary {
  padding: 26px 28px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text);
}

.summary p {
  color: var(--text);
  font-size: 19px;
}

/* FAQ uses <details>, which opens and closes without JavaScript. */
details {
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}

summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

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

summary::after {
  content: "+";
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s ease;
}

details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  margin-top: 12px;
}

.contact-card {
  margin-top: 56px;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  text-align: center;
}

.contact-card h2 {
  margin-top: 0;
}

.contact-card p {
  margin-bottom: 22px;
}

/* MARK: - Guides */

.breadcrumb {
  font-size: 15px;
  margin-bottom: 18px;
}

.doc .lede {
  font-size: 20px;
  color: var(--text-secondary);
  margin-bottom: 22px;
}

.guide-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0 !important;
  margin: 0 0 8px;
}

.guide-facts li {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.guide-facts li.pro {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-color: transparent;
}

@media (prefers-color-scheme: dark) {
  .guide-facts li.pro {
    color: var(--accent);
  }
}

/* Numbered steps, each with an optional phone beside it. */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0 !important;
  margin: 8px 0 0;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: start;
  padding: 30px 0;
  margin: 0 !important;
  border-top: 1px solid var(--hairline);
}

.step:not(:has(.phone)) {
  grid-template-columns: 1fr;
}

.step h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 21px;
  color: var(--text);
  margin-bottom: 10px;
}

.step h3::before {
  content: counter(step);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  transform: translateY(-2px);
}

.step p + p,
.step p + ul,
.step ul + p {
  margin-top: 10px;
}

.step .phone {
  width: 220px;
}

@media (max-width: 680px) {
  .step {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .step .phone {
    width: 240px;
    margin: 0 auto;
  }
}

.note {
  margin-top: 28px;
  padding: 20px 24px;
  border-radius: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
}

.note p {
  font-size: 16px;
}

.guide-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.guide-list a {
  display: block;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--bg-elevated);
  border: 1px solid var(--hairline);
  color: var(--text);
}

.guide-list a:hover {
  text-decoration: none;
  border-color: var(--accent);
}

.guide-list strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.guide-list span {
  display: block;
  color: var(--text-secondary);
  font-size: 15px;
}

.guide-list .tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  .guide-list .tag {
    color: var(--accent);
  }
}