/* The foundation every page builds on: the tokens of the indigo palette
   (docs/design-brief.md, D-10), the self-hosted fonts, the reset, the
   typography and the controls. The sections of the landing and the form get
   their own rules on top of this; the admin panel gets nothing beyond the
   tokens (D-2). Styles live only here: the policy of FR-26 forbids <style>
   and style="" in the HTML. */

:root {
  --bg: #f1f2f6;
  --surface: #fafbfd;
  --ink: #16171c;
  --ink-rgb: 22 23 28;
  --accent: #2f3a72;
  --accent-rgb: 47 58 114;
  --soft: rgb(47 58 114 / 0.09);
  --line: rgb(22 23 28 / 0.12);
  --on-accent: #fbfaf8;
  --err: #a02020;
  --err-rgb: 160 32 32;
  --muted: rgb(var(--ink-rgb) / 0.68);
  --sans: Manrope, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* Fonts are served by the site itself: the policy of FR-26 allows nothing
   else. Manrope is a variable font, one file covers every weight the pages
   use; the Cyrillic and Latin subsets are separate so the browser fetches
   only what the text on the page needs. Licences: the OFL files next to the
   fonts. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/Manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset */

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

html {
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0 auto;
  padding: 3rem 1rem 4rem;
  max-width: 44rem;
  color: var(--ink);
  font: 300 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The scripts show and hide blocks with the attribute alone; no display rule
   below may win over it. */
[hidden] {
  display: none !important;
}

/* Typography */

h1,
h2,
h3 {
  margin: 0 0 1rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: 38px;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

h2 {
  margin-top: 3rem;
  font-size: clamp(26px, 3.4vw, 44px);
}

h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition:
    color 0.35s ease,
    opacity 0.35s ease;
}

a:hover {
  color: var(--ink);
}

/* The small caption in the monospace face: labels of fields, headers of
   tables, the tags above sections. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A block whose text is still to come; the markup keeps the class as the
   sign of a placeholder. */
.stub {
  color: var(--muted);
}

/* Focus: the outline the mockup switches off is the only sign of the
   keyboard on the page. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Controls */

input,
textarea,
button,
select {
  font-family: inherit;
  font-size: inherit;
}

label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: rgb(var(--ink-rgb) / 0.42);
}

textarea {
  resize: vertical;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: var(--accent);
}

button {
  padding: 14px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    opacity 0.35s ease;
}

button:hover {
  opacity: 0.9;
}

button:disabled {
  background: rgb(var(--ink-rgb) / 0.1);
  color: rgb(var(--ink-rgb) / 0.62);
  cursor: not-allowed;
  opacity: 1;
}

/* Form: the pieces the login form of the admin panel and the request form
   share. The request form gets its own layout in a later task. */
.field {
  margin-bottom: 1.25rem;
}

.contacts {
  margin: 0 0 1.25rem;
  padding: 0;
  border: 0;
}

.contacts legend {
  margin-bottom: 14px;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--ink-rgb) / 0.75);
}

.consent label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.hint {
  margin: 0.75rem 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.error {
  margin: 0.5rem 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--err);
}

/* Motion: the mockup's keyframes, for the sections and the form that come
   later. Transitions live on links and buttons only: a transition on every
   element would delay the errors of the form. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

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

  html {
    scroll-behavior: auto;
  }
}

/* Landing: the sections of docs/design/landing.dc.html, ported by hand. The
   rules are scoped by the classes of index.html, so the admin panel and the
   policy page keep the narrow column of the foundation. */

/* The landing runs edge to edge: each section carries its own gutter of
   clamp(20px, 5vw, 72px), so the column of the foundation is switched off on
   this body alone. */
body.landing {
  --topbar-h: 64px;

  max-width: none;
  padding: 0;
}

/* The margins of the foundation give way to the gaps of the components. The
   selector is kept at the weight of a bare tag, so a component that wants a
   margin of its own wins with one class. */
:where(.landing) h1,
:where(.landing) h2,
:where(.landing) h3,
:where(.landing) p {
  margin: 0;
}

.brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* The monospace note that keeps its case: captions of images, footnotes. */
.mono-note {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* The number of a step or an audience: monospace, wide-set, never uppercase. */
.num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* Top bar: sticks to the top of the window on the whole page. It stands
   before the first screen, since position: sticky is caged by the overflow
   of the screen that clips the canvas; the screen slides under it by the
   height of the bar, so the drawing still runs behind the name as in the
   mockup. The bar is transparent at rest and takes the surface and the line
   of the mockup panel once the page is scrolled: landing.js sets the class.
   The height is fixed by --topbar-h of the body, so the first screen and the
   anchors below can count on it. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  height: var(--topbar-h);
  padding: 0 clamp(20px, 5vw, 72px);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.topbar.is-stuck {
  border-color: var(--line);
  background: var(--surface);
}

.topbar-name {
  display: flex;
  flex-shrink: 0;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

.topbar-link {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.topbar-link-short {
  display: none;
}

/* A jump to an anchor stops short of the bar, so the heading stays in view. */
main > section {
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}

/* First screen */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(88vh, 820px);
  margin-top: calc(-1 * var(--topbar-h));
  padding-top: var(--topbar-h);
  overflow: hidden;
}

/* The canvas takes the whole screen; landing.js draws the field of particles
   on it later. The veil above it fades the drawing under the text. */
.hero-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgb(255 255 255 / 0) 68%);
  pointer-events: none;
}

.hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  max-width: 1180px;
  padding: clamp(40px, 7vw, 96px) clamp(20px, 5vw, 72px) clamp(56px, 8vw, 110px);
}

/* The lines of the first screen rise one after another on load; the last
   frame is the resting state, so the text stays visible without a script. */
.hero-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  animation: rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both;
}

.hero-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.hero-title {
  max-width: 16ch;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  animation: rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s both;
}

.hero-lead {
  max-width: 52ch;
  margin-top: clamp(22px, 3vw, 32px);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgb(var(--ink-rgb) / 0.72);
  animation: rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: clamp(34px, 4.5vw, 52px);
  animation: rise 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.46s both;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cta:hover {
  color: var(--on-accent);
  opacity: 0.9;
  transform: translateY(-2px);
}

.cta-arrow {
  font-family: var(--mono);
  font-size: 13px;
}

/* Sections */

.section {
  padding: clamp(76px, 10vw, 150px) clamp(20px, 5vw, 72px);
  background: linear-gradient(
    180deg,
    rgb(var(--ink-rgb) / 0) 0%,
    rgb(var(--ink-rgb) / 0.03) 50%,
    rgb(var(--ink-rgb) / 0) 100%
  );
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.section-title {
  margin-bottom: clamp(36px, 5vw, 60px);
}

/* A hatched box that holds the place of an image until the photo arrives;
   the caption in the corner names what goes there. */
.portrait {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 4 / 5;
  max-height: 520px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: repeating-linear-gradient(
    135deg,
    rgb(var(--ink-rgb) / 0.05) 0 8px,
    rgb(var(--ink-rgb) / 0.02) 8px 16px
  );
}

.portrait-square {
  aspect-ratio: 1;
  max-height: 460px;
}

/* Audiences */

.audiences {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 88px);
}

/* A thin line fading to the right opens every article, like the steps. */
.audience {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  background: linear-gradient(90deg, var(--line), rgb(var(--ink-rgb) / 0) 72%) no-repeat top
    left / 100% 1px;
}

.audience .portrait {
  flex: 1 1 300px;
}

.audience-col {
  display: flex;
  flex: 1.35 1 340px;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 30px);
  min-width: 0;
}

/* The second audience puts the picture between two halves of the cloud. */
.audience-split {
  gap: clamp(24px, 3vw, 44px);
}

.audience-split .audience-col {
  flex: 1 1 240px;
  gap: 20px;
}

.audience-split .portrait {
  flex: 1 1 260px;
}

.audience-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.audience-num {
  color: var(--accent);
}

.audience-head h3 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The pills are text, not links: no pointer, no hover (brief §11). The four
   sizes carry the rhythm of the cloud; the accent one is the loudest question,
   the dashed one holds the place of a question still to be written. */
.pill {
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 17px;
  color: rgb(var(--ink-rgb) / 0.8);
}

.pill-s {
  padding: 9px 15px;
  font-size: 15px;
  color: rgb(var(--ink-rgb) / 0.72);
}

.pill-l {
  padding: 12px 18px;
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
}

.pill-xl {
  padding: 13px 20px;
  font-size: 21px;
  font-weight: 400;
}

.pill-accent {
  border-color: var(--accent);
  background: var(--soft);
  color: var(--accent);
  font-weight: 400;
}

.pill-stub {
  padding: 8px 14px;
  border-style: dashed;
  font-size: 13.5px;
  color: var(--muted);
}

.cloud-note {
  font-size: 10.5px;
}

/* Steps */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 22px;
  background: linear-gradient(90deg, var(--line), rgb(var(--ink-rgb) / 0) 80%) no-repeat top
    left / 100% 1px;
}

.step p {
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 0.72);
}

/* About */

.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.about .portrait {
  width: 100%;
  max-width: 420px;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-text p {
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: rgb(var(--ink-rgb) / 0.75);
}

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin-top: 6px;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fact-value {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--accent);
}

/* FAQ: the question is a button so that landing.js can fold the answer;
   until it does, every answer stays open and the button says so. */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--line);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  text-align: left;
}

.faq-q:hover {
  color: var(--accent);
  opacity: 1;
}

.faq-sign {
  flex: none;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--muted);
}

.faq-a p {
  max-width: 60ch;
  padding-bottom: 24px;
  font-size: 15px;
  line-height: 1.65;
  color: rgb(var(--ink-rgb) / 0.72);
}

/* Request: the words on the left, the form on a card on the right. The form
   and the thank-you note share the cell; the script shows one of them. */
.request {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.request-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.request-intro h2 {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.request-intro p {
  max-width: 44ch;
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 0.75);
}

.request-card {
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}

/* The form is a column with gaps; the margins of the foundation's pieces are
   switched off so the gap alone sets the rhythm. The display rules below sit
   on elements the script hides with the attribute: the foundation's
   [hidden] { display: none !important } wins over them. */
#request-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

#request-form .field {
  margin: 0;
}

#request-form .contacts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.request .consent label {
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--ink-rgb) / 0.75);
}

.submit-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
}

.submit-group .hint,
.submit-group .error {
  margin: 0;
}

/* The script empties the hint instead of hiding it; an empty line would
   still take a slot of the gap. */
#hint:empty {
  display: none;
}

#submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 24px;
  font-size: 16px;
}

/* D-7: while the request is in flight the button reads «Отправляем…» and
   carries a ring that spins; with reduced motion the foundation stops the
   ring and it stays as a static mark. */
#submit.is-sending::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1.5px solid rgb(var(--ink-rgb) / 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

#thanks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 3vw, 40px) 0;
  animation: fadeUp 0.35s ease both;
}

.thanks-mark {
  width: 34px;
  height: 34px;
  color: var(--accent);
}

#thanks h3 {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

#thanks p {
  font-size: 15px;
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 0.75);
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 72px);
}

.footer-name {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer a {
  font-size: 14px;
  text-decoration: none;
}

/* Narrow screens: one column everywhere. Every audience reads as title,
   picture, then the whole cloud: the columns of the article dissolve and
   their children take their turn in the order the reader expects. The first
   screen follows the mobile frame of the mockup: the veil fades from the
   bottom, the text sits under the drawing, and the link of the top bar
   shortens to one word, so the name and the caption keep a single line. */
@media (max-width: 860px) {
  .audience,
  .audience-split {
    flex-direction: column;
    gap: 22px;
  }

  .audience-col {
    display: contents;
  }

  .audience-head {
    order: 1;
  }

  .audience .portrait {
    order: 2;
  }

  .cloud {
    order: 3;
  }

  .cloud-note {
    order: 4;
  }
}

@media (max-width: 720px) {
  .hero-veil {
    background: linear-gradient(180deg, rgb(255 255 255 / 0) 46%, var(--bg) 76%);
  }

  .hero-body {
    justify-content: flex-end;
  }

  .topbar-link-long {
    display: none;
  }

  .topbar-link-short {
    display: inline;
  }

  .cta {
    width: 100%;
    justify-content: center;
    padding: 17px 22px;
    font-size: 16px;
  }
}

/* Landing motion: the rules landing.js switches on by class. Nothing here
   applies to the bare markup, so a page without the script hides nothing
   (brief §9); the reduced-motion rule of the foundation stops the animations. */

/* A section waits below its place until it enters the viewport. The class
   arrives from the script, and the script does not add it when the visitor
   asks for less motion or the observer is missing. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* The answer of the FAQ rises as it opens; the class is set once at start,
   and the keyframes run again each time the attribute hidden goes away. */
.faq-a.faq-a-live {
  animation: fadeUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* The pills of the cloud drift up and down, each at its own pace: five
   periods spread across the cloud by position, the negative delay starts
   them at different phases so the cloud never moves as one. The pills are
   not interactive (brief §11): the pointer does nothing to them. */
.cloud .pill {
  animation: float 8.3s ease-in-out -1.54s infinite;
}

.cloud .pill:nth-child(5n + 1) {
  animation-duration: 6.5s;
  animation-delay: 0s;
}

.cloud .pill:nth-child(5n + 2) {
  animation-duration: 7.4s;
  animation-delay: -0.77s;
}

.cloud .pill:nth-child(5n + 4) {
  animation-duration: 9.2s;
  animation-delay: -2.31s;
}

.cloud .pill:nth-child(5n + 5) {
  animation-duration: 10s;
  animation-delay: -3.08s;
}

/* The admin panel: a table of requests needs more room than the landing, so
   the wider page is asked for by the body of admin.html alone. */
body.wide {
  max-width: 68rem;
}

/* The login form does not need the width the table asks for. */
#login-form {
  max-width: 26rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}

.toolbar label {
  margin: 0;
}

.toolbar select {
  width: auto;
  padding: 10px 12px;
  font-size: 14px;
}

.toolbar button {
  margin-left: auto;
  padding: 10px 18px;
  font-size: 14px;
}

/* Below the width of the table the page scrolls the table, not itself. */
.table-wrap {
  overflow-x: auto;
}

table {
  min-width: 58rem;
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 14px;
  font-weight: 400;
}

/* Fixed layout plus a break inside the word: a question of any length grows
   the row in height and never in width. */
#requests {
  table-layout: fixed;
}

th,
td {
  padding: 0.75rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

/* The question takes whatever the named columns leave. */
.col-time {
  width: 7rem;
}

.col-name {
  width: 8rem;
}

.col-contacts {
  width: 12rem;
}

.col-delivery {
  width: 9rem;
}

.col-handled {
  width: 7rem;
}

.col-action {
  width: 11rem;
}

/* The button of the mark sits inside a cell, so it takes the whole width of
   the column and wraps its own text instead of widening the table. */
button.mark {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
}

/* FR-13: a request the owner was never told about is visible at a glance. */
tr.failed {
  background: rgb(var(--err-rgb) / 0.07);
}

.undelivered {
  color: var(--err);
  font-weight: 600;
}

/* Policy page: a long text in one column. The rules are scoped by the class
   on the body of privacy.html, so the header and the headings of the landing
   keep their own scale. */
body.policy {
  padding-top: 1.5rem;
}

.policy-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: clamp(3rem, 8vw, 5rem);
}

.policy-brand {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
}

.policy-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The link of the header wears the monospace caption like the links of the
   mockup; a class of .eyebrow would paint it muted instead of accent. */
.policy-head a {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.policy-head a:hover {
  text-decoration: underline;
}

/* The text column: the measure of a document, not of the landing. The words
   of a future policy include addresses and links, so they may break. */
body.policy main {
  max-width: 64ch;
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: break-word;
}

body.policy h1 {
  margin-bottom: 1.5rem;
  font-size: clamp(32px, 5vw, 46px);
  text-wrap: balance;
}

body.policy h2 {
  margin-top: 2.75rem;
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.15;
}

body.policy h3 {
  margin-top: 2rem;
}

body.policy p,
body.policy ul,
body.policy ol {
  margin: 0 0 1.1rem;
}

body.policy ul,
body.policy ol {
  padding-left: 1.4rem;
}

body.policy li {
  margin-bottom: 0.45rem;
  padding-left: 0.2rem;
}

body.policy li::marker {
  color: var(--muted);
}

body.policy li > ul,
body.policy li > ol {
  margin: 0.45rem 0 0;
}

body.policy .stub {
  font-size: 18px;
  font-weight: 300;
}

/* The way back sits under the text, separated from it by the line of the
   mockup. */
.policy-back {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

@media (max-width: 480px) {
  body.policy {
    padding-top: 1.25rem;
  }

  body.policy h2 {
    margin-top: 2.25rem;
  }
}