/* ==========================================================================
   P&H Automations — main stylesheet
   Dark theme, single column of content centred in a 1160px container.
   ========================================================================== */

:root {
  color-scheme: dark;

  --bg: #000000;
  --panel: #0f0f14;
  --panel-soft: rgba(255, 255, 255, 0.045);
  --text: #f4f6fb;
  --muted: #9aa3b4;
  --line: rgba(255, 255, 255, 0.12);

  --accent: #2f8bff;
  --accent-cyan: #38e1ff;
  --accent-pink: #ff2fa0;
  --gradient: linear-gradient(120deg, #2f8bff 0%, #a24bff 52%, #ff2fa0 100%);

  --shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.32);
  --radius: 8px;
  --radius-pill: 999px;

  --container: min(1160px, calc(100% - 32px));
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

h2 {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3.55rem);
  font-weight: 780;
}

h3 {
  font-size: 1.12rem;
}

p {
  overflow-wrap: anywhere;
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--container);
  margin: 0 auto;
  padding: 1.4rem 0;
}

/* On the landing page the header floats over the full-height hero. */
.page-landing .site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  display: block;
  width: clamp(140px, 16vw, 210px);
  height: auto;
}

/* The auto margins claim the free space, so the nav stays centred while the
   CTA and the menu button sit together at the right edge. */
.main-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-inline: auto;
  color: var(--muted);
  font-size: 0.95rem;
}

.main-nav a {
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--text);
}

.nav-cta {
  flex-shrink: 0;
  border: 1px solid rgba(47, 139, 255, 0.55);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1rem;
  background: rgba(47, 139, 255, 0.12);
  color: var(--text);
  white-space: nowrap;
  transition: background 180ms ease, transform 180ms ease;
}

.nav-cta:hover {
  background: rgba(47, 139, 255, 0.22);
  transform: translateY(-1px);
}

/* Three-bar menu leading to the service subpages. CSS-only: it opens on
   hover, and :focus-within keeps it reachable by keyboard and by tapping the
   button on touch devices, where there is no hover at all. */

.nav-menu {
  position: relative;
  flex-shrink: 0;
}

.nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.nav-menu:hover .nav-burger,
.nav-menu:focus-within .nav-burger {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(47, 139, 255, 0.55);
}

.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 180ms ease, opacity 140ms ease;
}

/* The three bars fold into a cross while the menu is open. */
.nav-menu:hover .nav-burger span:nth-child(1),
.nav-menu:focus-within .nav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-menu:hover .nav-burger span:nth-child(2),
.nav-menu:focus-within .nav-burger span:nth-child(2) {
  opacity: 0;
}

.nav-menu:hover .nav-burger span:nth-child(3),
.nav-menu:focus-within .nav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Bridges the gap below the button so the panel survives the mouse
   travelling from the trigger down into it. */
.nav-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 260px;
  height: 0.75rem;
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 6;
  display: grid;
  gap: 0.15rem;
  min-width: 260px;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c0c12;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.nav-menu:hover .nav-menu__panel,
.nav-menu:focus-within .nav-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu__label {
  margin: 0.45rem 0 0.2rem;
  padding: 0 0.75rem;
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-menu__label:first-child {
  margin-top: 0.2rem;
}

.nav-menu__panel a {
  padding: 0.58rem 0.75rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.93rem;
  white-space: nowrap;
}

.nav-menu__panel a:hover,
.nav-menu__panel a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
}

/* ---------------------------------- Hero ---------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.hero__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

/* The neon layer sits on top. A soft circular hole follows the pointer
   (--reveal-x / --reveal-y are written by script.js) and uncovers the
   real photograph underneath. */
.hero__img--overlay {
  z-index: 1;
  -webkit-mask-image: radial-gradient(
    circle 172px at var(--reveal-x, -1000px) var(--reveal-y, -1000px),
    transparent 0,
    transparent 104px,
    #000 172px
  );
  mask-image: radial-gradient(
    circle 172px at var(--reveal-x, -1000px) var(--reveal-y, -1000px),
    transparent 0,
    transparent 104px,
    #000 172px
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: var(--container);
  min-height: 100vh;
  margin: 0 auto;
  /* The title belongs in the upper part of the frame: the hands in the
     photograph meet in the lower half, and centring it vertically put the
     text straight on top of them. The padding clears the floating header
     and leaves roughly the gap the title used to get from its margin. */
  padding: clamp(12rem, 10vh + 9rem, 15rem) 0 3rem;
}

.hero__title {
  max-width: 20ch;
  text-align: center;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 1.03;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.7);
}

/* -------------------------------- Sections -------------------------------- */

.section {
  width: var(--container);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.section--split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.section--centered {
  align-items: center;
}

.section--bordered {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section__head {
  margin-bottom: 2.1rem;
}

.section__head--wide {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 2rem;
  align-items: end;
}

.section__text {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent-cyan);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------- Buttons -------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.15rem;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

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

.btn--primary {
  background: var(--gradient);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 0 26px rgba(90, 120, 255, 0.32);
}

.btn--primary:hover {
  box-shadow: 0 0 36px rgba(160, 80, 255, 0.5);
}

.btn--block {
  width: 100%;
  border: 0;
}

/* ------------------------------- Cards / steps ---------------------------- */

.cards,
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.card,
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--panel-soft);
  box-shadow: var(--shadow-card);
}

.card {
  min-height: 260px;
}

.step {
  min-height: 220px;
}

.card__index,
.step__index {
  display: inline-block;
  margin-bottom: 1.1rem;
  color: var(--accent-cyan);
  font-weight: 800;
}

.card p,
.step p {
  color: var(--muted);
}

/* -------------------------------- Benefits -------------------------------- */

.benefits {
  display: grid;
  gap: 0.8rem;
}

.benefits p {
  margin: 0;
  border-left: 2px solid var(--accent-pink);
  padding-left: 1rem;
  color: var(--muted);
}

/* ------------------------------- Chat panel ------------------------------- */

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 390px);
  height: min(70vh, 560px);
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(47, 139, 255, 0.18), transparent 34%), #0a0a0f;
  box-shadow: var(--shadow);
}

.chat-panel__bar {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.25rem 0 1rem;
}

.chat-panel__bar span:first-child {
  width: 56px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.28);
}

.chat-panel__bar span:last-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-pink);
}

.chat-log {
  flex: 1;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  overflow-y: auto;
  padding: 0.25rem 0.35rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.bubble {
  max-width: 92%;
  margin: 0;
  border-radius: 18px;
  padding: 0.72rem 0.85rem;
  color: #eef1f5;
  font-size: clamp(0.8rem, 1.55vw, 0.92rem);
  line-height: 1.35;
  white-space: pre-wrap;
}

.bubble--bot {
  justify-self: start;
  background: #1c1d24;
}

.bubble--user {
  justify-self: end;
  background: var(--gradient);
  color: #fff;
}

.chat-log .bubble {
  animation: message-in 220ms ease;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Three bouncing dots shown while the assistant's reply is in flight. */

.bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.bubble--typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-bounce 1.1s infinite ease-in-out;
}

.bubble--typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.bubble--typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes typing-bounce {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-pill);
  padding: 0.7rem 0.95rem;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  outline: none;
}

.chat-form input:focus {
  border-color: rgba(47, 139, 255, 0.85);
}

.chat-form input:disabled {
  opacity: 0.6;
}

.chat-form__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  cursor: pointer;
  transition: transform 160ms ease;
}

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

.chat-form__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --------------------------------- Contact -------------------------------- */

.contact__links {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
  color: var(--accent-cyan);
}

.form {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--panel-soft);
  box-shadow: var(--shadow-card);
}

.form label {
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.form input,
.form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 0.82rem 0.9rem;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  outline: none;
}

.form input:focus,
.form textarea:focus {
  border-color: rgba(47, 139, 255, 0.85);
}

.form__consent {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.form__consent input {
  width: 18px;
  height: 18px;
  margin-top: 0.2rem;
}

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

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: var(--container);
  margin: 0 auto;
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer__links {
  display: flex;
  gap: 1rem;
}

.site-footer a:hover {
  color: var(--text);
}

/* ------------------------------ Legal documents --------------------------- */

.doc {
  width: min(860px, calc(100% - 32px));
  margin: 0 auto;
  padding: 5rem 0;
}

.doc h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
}

.doc h2 {
  margin-top: 2.5rem;
  font-size: 1.45rem;
}

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

.doc ul,
.doc ol {
  margin: 0.6rem 0 0;
  padding-left: 1.4rem;
}

.doc li {
  margin-bottom: 0.5rem;
}

.doc li::marker {
  color: var(--accent-cyan);
}

.doc a {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.doc__meta {
  margin-top: 3rem;
  font-size: 0.9rem;
}

.doc__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ------------------------------- Service pages ---------------------------- */

/* Subpages describing a single service. They reuse .cards / .steps /
   .benefits from the landing page and add their own hero, breadcrumbs,
   FAQ, related-services grid and closing call-to-action band. */

.service {
  width: var(--container);
  margin: 0 auto;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.4rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}

.breadcrumbs li::after {
  content: "/";
  margin-left: 0.5rem;
  opacity: 0.5;
}

.breadcrumbs li:last-child::after {
  content: "";
}

.breadcrumbs a:hover,
.breadcrumbs__current {
  color: var(--text);
}

.service-hero {
  padding: clamp(2.2rem, 5vw, 3.6rem) 0;
  border-bottom: 1px solid var(--line);
}

/* The global 1.05 line-height is too tight for Polish diacritics at this
   heading size — ą/ę/ó collide with the line above. */
.service-hero h1 {
  max-width: 18ch;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.14;
}

.service-hero__lead {
  max-width: 62ch;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.service-block {
  padding: clamp(3rem, 6vw, 5rem) 0;
}

/* Every block gets air from the one above it. Without this, a heading
   followed straight by a card grid has its descenders touching the boxes. */
.service-block > * + * {
  margin-top: 2.2rem;
}

.service-block > .eyebrow + h2 {
  margin-top: 0;
}

.service-block > h2 {
  line-height: 1.14;
}

.service-block > h2 + .service-block__lead {
  margin-top: 1.1rem;
}

.service-block__lead {
  max-width: 64ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

.btn--secondary {
  border-color: rgba(255, 255, 255, 0.2);
  background: var(--panel-soft);
  color: var(--text);
}

/* Six tracks with every card spanning two, so a trailing row of two cards is
   centred instead of hanging left. The :nth-last-child pairing limits the
   centring to a five-card grid — six cards fill two clean rows untouched. */
.cards--three {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cards--three > * {
  grid-column: span 2;
}

.cards--three > :nth-child(4):nth-last-child(2) {
  grid-column: 2 / span 2;
}

.cards--three > :nth-child(5):nth-last-child(1) {
  grid-column: 4 / span 2;
}

/* Showcase video on the video-ads page */
.video-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0a0a0f;
  box-shadow: var(--shadow);
}

.video-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-frame__caption {
  margin: 0;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
}

.faq {
  display: grid;
  gap: 0.8rem;
  max-width: 900px;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  list-style: none;
  cursor: pointer;
  font-weight: 700;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent-cyan);
  font-size: 1.35rem;
  line-height: 1;
}

.faq__item[open] .faq__question::after {
  content: "–";
}

.faq__answer {
  margin: 0;
  padding: 0 1.15rem 1.15rem;
  color: var(--muted);
}

.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1rem;
}

.related__card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
  background: var(--panel-soft);
  transition: border-color 180ms ease, transform 180ms ease;
}

.related__card:hover {
  border-color: rgba(47, 139, 255, 0.55);
  transform: translateY(-2px);
}

.related__title {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.related__text {
  color: var(--muted);
  font-size: 0.92rem;
}

.cta-band {
  display: grid;
  justify-items: start;
  gap: 1.4rem;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}

.cta-band h2 {
  line-height: 1.14;
}

.cta-band__text {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

/* -------------------------------- Responsive ------------------------------ */

/* ==========================================================================
   Flash messages — toasts pinned to the bottom-right corner
   ========================================================================== */

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100% - 40px));
}

.toast {
  --toast-edge: var(--accent);
  --toast-line: var(--line);
  --toast-bg: rgba(15, 15, 20, 0.95);

  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border: 1px solid var(--toast-line);
  border-left: 3px solid var(--toast-edge);
  border-radius: var(--radius);
  background: var(--toast-bg);
  box-shadow: var(--shadow-card);
  animation: toast-in 0.24s ease-out both;
}

.toast--success {
  --toast-edge: #34d399;
  --toast-line: rgba(52, 211, 153, 0.38);
  --toast-bg: rgba(6, 42, 33, 0.95);
}

.toast--error {
  --toast-edge: #f87171;
  --toast-line: rgba(248, 113, 113, 0.38);
  --toast-bg: rgba(50, 12, 12, 0.95);
}

.toast__text {
  margin: 0;
  flex: 1;
  font-size: 0.94rem;
}

.toast__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.toast__close:hover {
  background: var(--panel-soft);
  color: var(--text);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (max-width: 980px) {
  .main-nav {
    display: none;
  }

  /* The nav carried the auto margins that held the CTA and the menu button
     against the right edge; with it hidden, the CTA takes that over. */
  .nav-cta {
    margin-left: auto;
  }

  .section--split,
  .section__head--wide {
    grid-template-columns: 1fr;
  }

  .hero,
  .hero__inner {
    min-height: 90vh;
  }

  .cards,
  .steps,
  .cards--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Drop the six-track centring trick back to plain flow on narrow screens. */
  .cards--three > *,
  .cards--three > :nth-child(4):nth-last-child(2),
  .cards--three > :nth-child(5):nth-last-child(1) {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .site-header .nav-cta {
    display: none;
  }

  .brand img {
    width: 132px;
  }

  .hero__title {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .cards,
  .steps,
  .cards--three {
    grid-template-columns: 1fr;
  }

  .chat-panel {
    border-radius: 24px;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  /* The dots are the only signal that a reply is coming, so keep them
     running; the movement is a 4px bounce. */
  .bubble--typing span {
    animation-duration: 1.1s !important;
  }
}