/*
  rilo — marketing site.

  One page, no build step, no dependencies, no requests off this origin. That
  last one is not a performance decision: the page claims we do not track
  anyone, and a page that phones a CDN to say so is not making the claim.

  Palette is sampled from the brand renders in design/assets rather than picked
  by eye, so the page and the app icon are the same blue.
*/

:root {
  --blue: #0475fa;
  --blue-deep: #0a4fc4;
  --purple: #7b3dfa;
  --purple-deep: #5a1fd0;
  --green: #07cc7f;
  --yellow: #febe00;
  --red: #fe4c6a;

  --ink: #16204a;
  --ink-soft: #4a5480;
  --paper: #ffffff;
  --mist: #f3f5fd;
  --line: #e2e6f5;

  /* The schema section. Dark on purpose — it is the one place the page stops
     being a brochure and shows you the database. */
  --lab: #101a3d;
  --lab-2: #182451;
  --lab-line: #2b3a70;
  --lab-text: #dfe4f7;
  --lab-dim: #93a0cc;

  --radius: 24px;
  --radius-lg: 34px;
  --shadow: 0 18px 40px -18px rgba(22, 32, 74, 0.35);
  --shadow-lg: 0 34px 70px -28px rgba(22, 32, 74, 0.5);
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui,
    -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

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

a {
  color: var(--blue-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2.5rem, 46rem);
  margin-inline: auto;
}

section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
}

h1,
h2,
h3 {
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
}

h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 1.1rem;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--ink-soft);
}

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin: 0 0 0.9rem;
}

/* ---------------------------------------------------------------- header -- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-head .mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-head .mark img.icon {
  width: 34px;
  border-radius: 10px;
}

.site-head .mark img.word {
  width: 74px;
}

.site-head nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 1.9rem);
  font-size: 0.9375rem;
  font-weight: 700;
}

.site-head nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-head nav a:hover {
  color: var(--blue-deep);
}

@media (max-width: 44rem) {
  .site-head nav a.hide-sm {
    display: none;
  }
}

/* Language. Four short words rather than a flag or a dropdown: a flag is a
   country and not a language, and a dropdown hides three of the four. */
.langs {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-left: 0.2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.lang-link {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0.75;
}

.lang-link.is-current {
  color: var(--blue-deep);
  opacity: 1;
}

.site-head nav a.lang-link:hover {
  opacity: 1;
}

/* Written-out names by default; the codes only come out where space is short. */
.lang-short {
  display: none;
}

@media (max-width: 56rem) {
  /* Keep the switcher; drop the section links it would otherwise crowd. */
  .site-head nav a[href^="#"] {
    display: none;
  }

  /* Four language names are wider than a phone. In the header they become EN
     NL FR ES — the accessible name is still the full word, so this is a change
     of width and not of meaning. The footer has room and keeps the names. */
  .site-head .lang-full {
    display: none;
  }

  .site-head .lang-short {
    display: inline;
  }

  .site-head {
    gap: 0.5rem;
    padding-inline: 1rem;
  }

  .site-head nav {
    gap: 0.85rem;
  }

  .site-head .mark img.word {
    width: 62px;
  }

  .langs {
    gap: 0.6rem;
    margin-left: 0;
    padding-left: 0.75rem;
  }
}

/* Smallest phones still in use. The icon alone is enough of a mark once the
   wordmark stops fitting beside four language codes — better to drop it
   deliberately than to let the bar wrap into two lines. */
@media (max-width: 22.5rem) {
  .site-head .mark img.word {
    display: none;
  }

  .site-head {
    padding-inline: 0.75rem;
  }

  .site-head nav {
    gap: 0.7rem;
  }
}

.lang-foot {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  font-size: 0.875rem;
}

.lang-foot-link {
  color: var(--lab-dim);
  text-decoration: none;
  font-weight: 700;
}

.lang-foot-link.is-current {
  color: #fff;
}

a.lang-foot-link:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  /* Named, because the art column cancels it out to sit flush on the join. */
  --hero-pad-b: clamp(5rem, 10vw, 8rem);

  position: relative;
  color: #fff;
  background: linear-gradient(150deg, #0475fa 0%, #4a56f6 46%, #7b3dfa 100%);
  padding-block: clamp(3.5rem, 8vw, 6rem) var(--hero-pad-b);
  /* Not clipped: the artwork's lowest paw is allowed out, onto the section
     below. The blooms that used to need the clipping have their own layer. */
}

/* The blooms live in a clipped layer of their own rather than on the section,
   so that clipping them does not also clip the mascot. */
.hero-glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Soft light blooms, so the gradient reads as a lit room rather than a ramp. */
.hero-glow::before,
.hero-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
}

.hero-glow::before {
  width: 34rem;
  height: 34rem;
  top: -14rem;
  right: -10rem;
  background: radial-gradient(circle, rgba(254, 190, 0, 0.55), transparent 65%);
}

.hero-glow::after {
  width: 30rem;
  height: 30rem;
  bottom: -16rem;
  left: -12rem;
  background: radial-gradient(circle, rgba(7, 204, 127, 0.4), transparent 65%);
}

.hero > .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 60rem) {
  .hero > .wrap {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero .wordmark {
  width: clamp(150px, 26vw, 208px);
  margin-bottom: 0.4rem;
}

.hero .tagline {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 1.6rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 5.6vw, 3.65rem);
  margin-bottom: 1.1rem;
}

.hero .lede {
  color: rgba(255, 255, 255, 0.9);
  max-width: 34rem;
}

.hero .status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.9rem 0.4rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}

.hero .status .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(254, 190, 0, 0.25);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: var(--yellow);
  color: #3b2a00;
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, 0.55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -14px rgba(0, 0, 0, 0.55);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-ink {
  background: var(--ink);
  color: #fff;
}

.btn-ink:hover {
  transform: translateY(-2px);
}

/* Hero art: the mascot, one scene card, a couple of stickers. */

/* One image: the family, the phone and the call from grandma already in it,
   so there is nothing to float on top.

   The artwork is cut off flat at the bottom — the family has no feet. Left
   floating in the middle of the gradient that reads as a mistake, so the image
   is pulled down to sit exactly on the join with the section below. The cut
   then lands on a real edge and reads as the family standing behind it. That
   is also why there is no drop shadow: a shadow would trace the cut and give
   the whole trick away. */
.hero-art {
  display: flex;
  justify-content: center;
  align-self: end;
  margin-bottom: calc(-1 * var(--hero-pad-b));
}

.hero-art .mascot {
  width: 100%;
  max-width: 34rem;
  /* Pushed down by exactly the height that hangs below the artwork's solid
     edge, measured at build time. A transform percentage is relative to the
     element's own size, so this stays correct at every width — which a pixel
     offset could not, the image being scaled. */
  transform: translateY(var(--overhang, 0));
}

@media (min-width: 60rem) {
  .hero-art .mascot {
    max-width: none;
  }
}

/* --------------------------------------------------------------- promise -- */

.promises {
  background: var(--mist);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}

.promise-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.promise {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: 0 10px 24px -18px rgba(22, 32, 74, 0.5);
}

.promise .badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 0.9rem;
}

.promise .badge svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.promise h3 {
  margin-bottom: 0.35rem;
}

.promise p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.bg-green {
  background: var(--green);
}
.bg-purple {
  background: var(--purple);
}
.bg-blue {
  background: var(--blue);
}
.bg-red {
  background: var(--red);
}

/* ------------------------------------------------------------------ how -- */

.frames {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 3rem;
}

.frame {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem 1.7rem;
  background: var(--mist);
  border: 1px solid var(--line);
}

.frame .step {
  position: absolute;
  top: -18px;
  left: 1.6rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 8px 18px -8px rgba(4, 117, 250, 0.9);
}

.frame:nth-child(2) .step {
  background: var(--purple);
  box-shadow: 0 8px 18px -8px rgba(123, 61, 250, 0.9);
}

.frame:nth-child(3) .step {
  background: var(--green);
  box-shadow: 0 8px 18px -8px rgba(7, 204, 127, 0.9);
}

/* A tinted panel per step, sized identically, with the cut-out floating on it.
   Uniform aspect ratio matters more than filling the box: the source stickers
   are different shapes, and stretching them to match would be obvious. */
.frame-art {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  display: grid;
  place-items: center;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
  overflow: hidden;
}

/* White pad + rounded corner = the die-cut border these stickers were drawn
   with. It also settles the two that are scenes rather than silhouettes: the
   straight edge where the crop met the artwork now reads as the sticker's own
   edge instead of a mistake. Fixed height, free width, so the three read as a
   set even though the source art is three different shapes. */
/* Bounded on both axes rather than given a fixed height. A fixed height only
   works while every source image is the same shape: the fox-parents crop is
   nearly square where the others are wide, so it grew past the panel. Capping
   both dimensions means whichever one runs out first decides the size, and no
   future crop can escape its box either. */
.frame-art img {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  background: #fff;
  padding: 7px;
  border-radius: 15px;
  box-shadow: 0 12px 22px -12px rgba(22, 32, 74, 0.5);
}

.art-blue {
  background: linear-gradient(155deg, #d7e7ff, #b9d3ff);
}

.art-purple {
  background: linear-gradient(155deg, #e6dcff, #cfbcff);
}

.art-green {
  background: linear-gradient(155deg, #cdf4e4, #a8ecd0);
}

.frame h3 {
  margin: 0.4rem 0 0.4rem;
}

.frame p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.pull {
  margin-top: 2.6rem;
  padding: 1.6rem 1.8rem;
  border-left: 5px solid var(--yellow);
  background: linear-gradient(90deg, rgba(254, 190, 0, 0.12), transparent 70%);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
}

.pull p {
  margin: 0;
}

/* ------------------------------------------------------------------ keep -- */

/* The landing page's version of the privacy story: three plain sentences and a
   door to the real thing. The schema itself lives on /technical/, because a
   database on the front page asks every visitor to be the kind of reader who
   wants one. */

.keep {
  background: var(--mist);
}

.keep-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 2.6rem;
}

.keep-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem 1.6rem;
  box-shadow: 0 10px 24px -18px rgba(22, 32, 74, 0.5);
}

.keep-card h3 {
  margin-bottom: 0.5rem;
}

.keep-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.keep-cta {
  margin-top: 2.4rem;
  padding: 1.8rem;
  border-radius: var(--radius);
  background: var(--lab);
  color: var(--lab-text);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  justify-content: space-between;
}

.keep-cta p {
  margin: 0;
  flex: 1 1 22rem;
  color: var(--lab-dim);
}

.keep-cta .btn-ink {
  background: var(--yellow);
  color: #3b2a00;
  flex: 0 0 auto;
}

/* ------------------------------------------------------- technical page -- */

.tech-head {
  background: var(--paper);
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.tech-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  margin-bottom: 1.1rem;
}

.tech-head .lede {
  color: var(--ink);
  font-weight: 600;
}

.tech-head p:last-child {
  color: var(--ink-soft);
  margin-bottom: 0;
}

.how-contacts {
  background: var(--mist);
}

.how-contacts p {
  color: var(--ink-soft);
}

.how-contacts h2 {
  margin-bottom: 1.4rem;
}

.tech-foot {
  background: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}

/* ---------------------------------------------------------------- schema -- */

.schema {
  background: var(--lab);
  color: var(--lab-text);
  position: relative;
}

.schema h2 {
  color: #fff;
}

.schema .eyebrow {
  color: var(--yellow);
}

.schema .lede {
  color: var(--lab-dim);
}

.tables {
  display: grid;
  gap: 1rem;
  margin-top: 2.6rem;
}

@media (min-width: 52rem) {
  .tables {
    grid-template-columns: 1fr 1fr;
  }
}

.tbl {
  border: 1px solid var(--lab-line);
  border-radius: 18px;
  background: var(--lab-2);
  overflow: hidden;
}

.tbl > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--lab-line);
  background: rgba(255, 255, 255, 0.03);
}

.tbl > header .name {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
}

.life {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.life.keeps {
  background: rgba(4, 117, 250, 0.22);
  color: #a9caff;
  border: 1px solid rgba(4, 117, 250, 0.5);
}

.life.goes {
  background: rgba(7, 204, 127, 0.16);
  color: #7ff0c0;
  border: 1px solid rgba(7, 204, 127, 0.45);
}

.tbl ul {
  margin: 0;
  padding: 0.8rem 1.1rem 0.9rem;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.8438rem;
  line-height: 1.9;
}

.tbl li {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tbl li b {
  font-weight: 600;
  color: #fff;
  min-width: 9.5rem;
}

.tbl li span {
  color: var(--lab-dim);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1 1 12rem;
}

.tbl > footer {
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--lab-line);
  color: var(--lab-dim);
  font-size: 0.9063rem;
  line-height: 1.55;
  background: rgba(0, 0, 0, 0.14);
}

.not-stored {
  margin-top: 2.2rem;
  border: 1px dashed var(--lab-line);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
}

.not-stored h3 {
  color: #fff;
  margin-bottom: 0.9rem;
}

.not-stored ul {
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.not-stored li {
  font-family: var(--mono);
  font-size: 0.8125rem;
  padding: 0.32rem 0.7rem;
  border-radius: 8px;
  background: rgba(254, 76, 106, 0.14);
  border: 1px solid rgba(254, 76, 106, 0.4);
  color: #ffc2cd;
  text-decoration: line-through;
  text-decoration-color: rgba(254, 76, 106, 0.75);
}

.not-stored p {
  margin: 0;
  color: var(--lab-dim);
}

.source-note {
  margin-top: 1.6rem;
  font-size: 0.875rem;
  color: var(--lab-dim);
}

.source-note code {
  font-family: var(--mono);
  color: #fff;
}

/* ------------------------------------------------------------- cant / do -- */

.cant {
  background: var(--paper);
}

.cant-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: 2.6rem;
}

.cant-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.cant-card h3 {
  margin-bottom: 0.4rem;
}

.cant-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

.cant-card .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------- approval -- */

.approval {
  background: var(--mist);
}

.approval-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

@media (min-width: 56rem) {
  .approval-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* A mock of the adult-to-child approval screen. Built in markup rather than
   screenshotted so it stays sharp, resizes, and can be read by a screen
   reader — the wording is the point of the screen. */
.phone {
  width: min(100%, 20rem);
  margin-inline: auto;
  border-radius: 38px;
  padding: 0.7rem;
  background: #2c3550;
  box-shadow: var(--shadow-lg);
}

.phone-screen {
  border-radius: 30px;
  background: #55606b;
  color: #fff;
  padding: 1.4rem 1.2rem 1.2rem;
}

.phone-screen .kicker {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 0.9rem;
}

.phone-screen h4 {
  margin: 0 0 0.7rem;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.phone-screen .consequence {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.phone-screen .consequence b {
  color: #fff;
}

.phone-screen .flag {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.8438rem;
  line-height: 1.45;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  margin-bottom: 1rem;
}

.phone-screen .check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.8438rem;
  line-height: 1.45;
  margin-bottom: 1.1rem;
}

.phone-screen .box {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin-top: 1px;
}

.phone-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.phone-buttons span {
  text-align: center;
  padding: 0.7rem 0.4rem;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.875rem;
  white-space: nowrap;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.phone-buttons .wait {
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------- others -- */

.involved {
  background: var(--paper);
}

.involved-list {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.involved-list li {
  display: grid;
  gap: 0.2rem 1.1rem;
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius);
  background: var(--mist);
}

.involved-list .who {
  grid-column: 1;
  font-weight: 800;
}

.involved-list .what {
  grid-column: 2;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

/* ------------------------------------------------------------------ paid -- */

.money {
  background: linear-gradient(150deg, #0475fa 0%, #5a4bf8 55%, #7b3dfa 100%);
  color: #fff;
  text-align: center;
}

.money h2 {
  color: #fff;
  margin-bottom: 1.1rem;
}

.money p {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

.money .big {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 1.6rem 0 0;
  color: #fff;
}

/* ------------------------------------------------------------------- faq -- */

.faq {
  background: var(--paper);
}

.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0;
}

.faq details:first-of-type {
  border-top: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 2.5rem 1.05rem 0;
  font-weight: 800;
  font-size: 1.0625rem;
  position: relative;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}

.faq details p {
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
  padding-right: 1rem;
}

/* ---------------------------------------------------------------- footer -- */

.site-foot {
  background: var(--lab);
  color: var(--lab-dim);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  font-size: 0.9375rem;
}

.foot-top {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 46rem) {
  .foot-top {
    grid-template-columns: 1.2fr 1fr;
  }
}

.site-foot img.word {
  width: 92px;
  margin-bottom: 1rem;
}

.site-foot a {
  color: #fff;
  text-decoration-color: var(--yellow);
}

.foot-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.foot-note {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--lab-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-size: 0.875rem;
}

.foot-note p {
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  background: #fff;
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  font-weight: 800;
}

/* --------------------------------------------------------------- not found -- */

/* Deliberately quiet. Somebody who lands here followed a link that no longer
   goes anywhere, and the useful thing is a way back, not an apology. */
.notfound {
  padding: clamp(4rem, 12vw, 9rem) 0;
  text-align: center;
}

.notfound h1 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  letter-spacing: -0.02em;
}

.notfound p {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
  font-size: 1.1rem;
}