/* LogiPattes — static site stylesheet.
   Palette derived from mobile/lib/core/theme/app_theme.dart (paw-blue charter). */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-var.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --paw-blue: #2e9bd6;
  --paw-blue-dark: #1b6ca8;
  --paw-blue-deep: #114a75;
  --paw-blue-light: #cde8f6;
  --paw-sky: #eaf5fc;
  --warm-amber: #f2a65a;
  --warm-amber-dark: #d98836;
  --bg: #f6f9fc;
  --surface: #ffffff;
  --ink: #1e3248;
  --ink-soft: #5c6f80;
  --success: #4caf87;
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-sm: 0 2px 10px rgba(17, 74, 117, 0.08);
  --shadow: 0 14px 40px rgba(17, 74, 117, 0.12);
  --shadow-lg: 0 24px 70px rgba(17, 74, 117, 0.18);
  --grad: linear-gradient(135deg, #2e9bd6 0%, #1b6ca8 100%);
  --grad-warm: linear-gradient(135deg, #f2a65a 0%, #d98836 100%);
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Anchored sections must clear the 72px sticky header. */
[id] {
  scroll-margin-top: 90px;
}

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

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}

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

a {
  color: var(--paw-blue-dark);
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(46, 155, 214, 0.14);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.brand svg,
.brand img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 8px rgba(46, 155, 214, 0.35));
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.95rem;
  transition: color 0.15s ease;
}

.site-nav a:hover {
  color: var(--paw-blue-dark);
}

/* ---------- Nav dropdown (Fonctionnalités) ---------- */

.nav-item.has-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-toggle .caret {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.nav-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid rgba(46, 155, 214, 0.16);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

/* A padded bridge keeps the menu open while the pointer travels to it. */
.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}

.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-item.has-menu:hover .caret,
.nav-item.has-menu:focus-within .caret {
  transform: rotate(180deg);
}

.nav-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 11px;
  transition: background 0.12s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: rgba(46, 155, 214, 0.08);
}

.nav-menu .mi-title {
  display: block;
  color: var(--ink);
  font-weight: 800;
  font-size: 0.94rem;
}

.nav-menu .mi-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.82rem;
}

/* ---------- Burger menu (mobile / narrow) ---------- */

.nav-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.nav-burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-open .nav-burger span:nth-child(1) {
  transform: translateY(9.75px) rotate(45deg);
}

.nav-open .nav-burger span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-burger span:nth-child(3) {
  transform: translateY(-9.75px) rotate(-45deg);
}

@media (max-width: 960px) {
  .nav-burger {
    display: flex;
  }
  /* The nav becomes a dropdown panel under the sticky header, toggled by the
     burger. The Fonctionnalités submenu is always expanded inside it — no
     hover on touch. */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px 22px 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid rgba(46, 155, 214, 0.14);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .site-header.nav-open .site-nav {
    display: flex;
  }
  .site-nav > a:not(.btn) {
    padding: 13px 4px;
    font-size: 1rem;
    border-top: 1px solid rgba(46, 155, 214, 0.1);
  }
  .site-nav .btn {
    margin-top: 14px;
    justify-content: center;
  }
  .nav-item.has-menu {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-item.has-menu::after {
    display: none;
  }
  .nav-toggle {
    padding: 13px 4px 6px;
    font-size: 1rem;
  }
  .nav-toggle .caret {
    display: none;
  }
  .nav-menu,
  .nav-item.has-menu:hover .nav-menu,
  .nav-item.has-menu:focus-within .nav-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }
  .nav-menu a {
    padding: 8px 10px;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  font-size: 1rem;
  /* <button class="btn"> must look exactly like <a class="btn">. */
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 26px rgba(46, 155, 214, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(46, 155, 214, 0.5);
}

.btn-ghost {
  background: var(--surface);
  color: var(--paw-blue-dark);
  box-shadow: inset 0 0 0 2px var(--paw-blue-light), var(--shadow-sm);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px var(--paw-blue), var(--shadow-sm);
}

.site-nav .btn {
  padding: 10px 20px;
  font-size: 0.92rem;
  color: #fff;
}

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

.hero {
  position: relative;
  padding: 72px 0 88px;
  overflow: hidden;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
}

.hero::before {
  width: 560px;
  height: 560px;
  background: rgba(46, 155, 214, 0.18);
  top: -180px;
  right: -120px;
}

.hero::after {
  width: 420px;
  height: 420px;
  background: rgba(242, 166, 90, 0.16);
  bottom: -160px;
  left: -140px;
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--paw-blue-light);
  box-shadow: var(--shadow-sm);
  color: var(--paw-blue-dark);
  font-weight: 800;
  font-size: 0.86rem;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .tagline {
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  max-width: 520px;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.hero-trust {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 700;
}

.hero-trust span::before {
  content: "✓ ";
  color: var(--success);
  font-weight: 800;
}

/* Hero visual: photo + floating app-like cards */

.hero-visual {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  z-index: 0;
}

/* Round photo with decorative arcs + dots, matching the pension site's hero */
.hero-photo {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  margin: 0 auto;
}

.photo-ring {
  position: absolute;
  inset: -26px;
  width: calc(100% + 52px);
  height: calc(100% + 52px);
  max-width: none;
  pointer-events: none;
}

.doodle {
  position: absolute;
  z-index: 0;
  width: 54px;
  opacity: 0.9;
  pointer-events: none;
}

.doodle-star {
  top: -10px;
  right: 4%;
}

.doodle-bone {
  bottom: 6%;
  left: -3%;
  transform: rotate(-18deg);
}

.float-card {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  animation: floaty 5s ease-in-out infinite;
}

.float-card .big {
  font-size: 1.4rem;
}

.float-card small {
  display: block;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.78rem;
}

.float-card .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(76, 175, 135, 0.2);
}

.fc-1 {
  top: 8%;
  left: -6%;
}

.fc-2 {
  bottom: 14%;
  right: -4%;
  animation-delay: 1.6s;
}

.fc-3 {
  bottom: -4%;
  left: 8%;
  animation-delay: 3s;
}

@keyframes floaty {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float-card {
    animation: none;
  }
}

/* Narrow screens: the decorations are pushed OUT to the edges of the photo box
   (which now follows the photo itself) so they never cover the dog. */
@media (max-width: 620px) {
  .hero-visual {
    max-width: min(74vw, 320px);
  }

  .hero-actions {
    gap: 18px 12px;
  }

  .fc-1 {
    top: -2%;
    left: -10%;
  }

  .fc-2 {
    bottom: -2%;
    right: -10%;
  }

  .fc-3 {
    display: none;
  }

  .float-card {
    padding: 9px 13px;
    font-size: 0.8rem;
    gap: 8px;
    border-radius: 14px;
  }

  .float-card .big {
    font-size: 1.15rem;
  }

  .float-card small {
    font-size: 0.72rem;
  }

  .doodle {
    width: 40px;
  }

  .doodle-star {
    top: -16px;
    right: -8%;
  }

  .doodle-bone {
    bottom: -4%;
    left: -8%;
  }
}

/* ---------- Activities band (brand line-art icons) ---------- */

.activities {
  background: var(--surface);
  border-top: 1px solid rgba(46, 155, 214, 0.1);
  border-bottom: 1px solid rgba(46, 155, 214, 0.1);
  padding: 34px 0;
}

.activities .container {
  display: flex;
  justify-content: center;
  gap: 20px 56px;
  flex-wrap: wrap;
  align-items: center;
}

.activities .lead {
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 0.95rem;
}

.activity {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 1rem;
  color: var(--ink);
}

.activity img {
  width: 52px;
  height: 52px;
}

/* Mobile: one activity per line, left-aligned — wrapped inline items made a
   ragged, hard-to-read block. */
@media (max-width: 680px) {
  .activities .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .activities .lead {
    align-self: center;
    text-align: center;
    margin-bottom: 2px;
  }
  .activity {
    width: 100%;
    gap: 14px;
  }
  .activity img {
    width: 40px;
    height: 40px;
    flex: none;
  }
}

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

.section {
  padding: 88px 0;
}

.section-tight {
  padding-top: 0;
}

.section-title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.section-sub {
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto 52px;
}

/* ---------- Features grid ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.feature {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(46, 155, 214, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.feature .icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--paw-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
  color: var(--paw-blue-dark);
}

.icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature:nth-child(3n + 2) .icon {
  background: #fdf1e3;
}

.feature h3 {
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.feature p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Features: magazine bento grid ----------
   One tall tile (fiches, rounded centered screenshot) next to a 2x2 of
   compact tiles, closed by a full-width dark band. */
.bento {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  grid-template-areas:
    "tall a b"
    "tall c d"
    "wide wide wide";
  gap: 18px;
}

.btile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 26px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid rgba(46, 155, 214, 0.14);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.btile.tall { grid-area: tall; }
.btile.area-a { grid-area: a; }
.btile.area-b { grid-area: b; }
.btile.area-c { grid-area: c; }
.btile.area-d { grid-area: d; }
.btile.wide { grid-area: wide; }

.btile.tint {
  background: linear-gradient(160deg, #e9f5fc 0%, var(--paw-sky) 60%, #dceefa 100%);
  border-color: transparent;
}

.btile.sand {
  background: #fdf3e7;
  border-color: #f6e2c8;
}

.btile.sand .icon {
  background: #fbe8d2;
  color: var(--warm-amber-dark);
}

.btile .icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--paw-sky);
  color: var(--paw-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btile h3 {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 14px 0 8px;
}

.btile.tall h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}

.btile p {
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.btile .card-link {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--paw-blue-dark);
  text-decoration: none;
}

.btile .card-link:hover {
  text-decoration: underline;
}

.bshot {
  width: 100%;
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #e3edf5;
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.bshot img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top left;
}

/* Fiches tile: the dogs-list screenshot shows whole, centered and rounded
   like every other tile screenshot. */
.btile.tall .bshot img {
  height: auto;
}

/* Closing band: dark blue, text + screenshot side by side. */
.btile.deep {
  background: linear-gradient(135deg, #17578a 0%, var(--paw-blue-deep) 100%);
  border-color: transparent;
}

.btile.deep.wide {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 32px;
  align-items: center;
  padding: 34px 38px;
}

.btile.deep h3 {
  color: #fff;
}

.btile.deep p {
  color: #b9d5ea;
}

.btile.deep .icon {
  background: rgba(255, 255, 255, 0.14);
  color: #8ecdf2;
}

.btile.deep .bstat {
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--warm-amber);
  margin-top: 4px;
}

.btile.deep .bshot {
  margin-top: 0;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

.btile.deep .bshot img {
  height: 210px;
  object-position: top;
}

@media (max-width: 980px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tall a"
      "tall b"
      "c d"
      "wide wide";
  }
}

@media (max-width: 640px) {
  .bento {
    grid-template-columns: 1fr;
    grid-template-areas: "tall" "a" "b" "c" "d" "wide";
  }
  .btile.deep.wide {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

/* ---------- Showcase (photo + stats) ---------- */

.showcase {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.showcase img {
  width: 100%;
  height: 440px;
  object-fit: cover;
}

.showcase .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(75deg, rgba(17, 74, 117, 0.82) 0%, rgba(17, 74, 117, 0.35) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6vw, 72px);
  color: #fff;
}

.showcase h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
  line-height: 1.25;
  max-width: 480px;
  margin-bottom: 14px;
}

.showcase p {
  max-width: 440px;
  opacity: 0.92;
  font-size: 1.02rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 22px;
  margin-top: -54px;
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px, 4vw, 56px);
}

.stat {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
  text-align: center;
}

.stat .num {
  font-size: 1.9rem;
  font-weight: 800;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat .label {
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 0.92rem;
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 20px;
}

.gallery .cell {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery .cell:hover img {
  transform: scale(1.06);
}

.gallery .tall {
  grid-row: span 2;
}

.gallery .wide {
  grid-column: span 2;
}

.gallery .quote {
  background: var(--grad);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.4;
}

.gallery .quote .paw {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

@media (max-width: 820px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
  }
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.step {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(46, 155, 214, 0.1);
  position: relative;
}

.step .num {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 1.15rem;
  box-shadow: 0 8px 20px rgba(46, 155, 214, 0.35);
}

.step h3 {
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 7px;
}

.step p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Platforms ---------- */

.platforms {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.platform {
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(46, 155, 214, 0.12);
  padding: 12px 26px;
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
}

.platform svg {
  width: 22px;
  height: 22px;
  fill: var(--paw-blue-dark);
}

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

.contact-cta {
  text-align: center;
  margin-top: 6px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

.contact-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(46, 155, 214, 0.1);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.contact-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--paw-sky);
  color: var(--paw-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 14px;
}

.contact-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.contact-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.contact-card a.link {
  font-weight: 800;
  color: var(--paw-blue-dark);
  text-decoration: none;
  font-size: 1.05rem;
}

.contact-card a.link:hover {
  text-decoration: underline;
}

/* Contact page: cards side by side on top, form below — everything spans the
   full container width like the rest of the site. */
.contact-cards.wide {
  max-width: none;
  margin: 0 0 28px;
}

.contact-form {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(46, 155, 214, 0.1);
  padding: 30px 28px;
  display: grid;
  gap: 16px;
}

.contact-form label {
  font-weight: 800;
  font-size: 0.9rem;
  display: grid;
  gap: 6px;
}

.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  border: 1.5px solid var(--paw-blue-light);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bg);
  transition: border-color 0.15s ease;
  width: 100%;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--paw-blue);
  background: var(--surface);
}

.contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.contact-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 560px) {
  .contact-form .row {
    grid-template-columns: 1fr;
  }
}

.contact-form button {
  border: none;
  cursor: pointer;
  justify-self: start;
  font-family: inherit;
}

.contact-form button:disabled,
button.btn:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}

/* Honeypot: visually removed but still focusable by naive bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-weight: 700;
  font-size: 0.95rem;
  display: none;
}

.form-status.ok {
  display: block;
  color: var(--success);
}

.form-status.err {
  display: block;
  color: #c0392b;
}

/* ---------- « Essayer LogiPattes » (collecte de prospects) ---------- */

.trial-box {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 18px 44px;
  align-items: start;
}

.trial-pitch h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 12px;
}

.trial-pitch p {
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 18px;
}

.trial-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.trial-points li {
  position: relative;
  padding-left: 28px;
  font-weight: 600;
  line-height: 1.45;
}

.trial-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paw-blue-light);
  box-shadow: inset 0 0 0 4px var(--paw-blue);
}

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

/* ---------- Newsletter ---------- */

.newsletter {
  padding: 26px 0 60px;
}

.newsletter-box {
  background: var(--paw-sky);
  border: 1px solid rgba(46, 155, 214, 0.16);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 14px 32px;
  align-items: center;
}

.newsletter-box h2 {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.newsletter-box > div > p {
  color: var(--ink-soft);
}

.newsletter-box form {
  display: flex;
  gap: 10px;
}

.newsletter-box input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--paw-blue-light);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}

.newsletter-box input[type="email"]:focus {
  outline: none;
  border-color: var(--paw-blue);
  box-shadow: 0 0 0 3px rgba(46, 155, 214, 0.18);
}

.newsletter-box .form-status {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 760px) {
  .newsletter-box {
    grid-template-columns: 1fr;
    padding: 28px 22px;
  }
  .newsletter-box form {
    flex-direction: column;
  }
  .newsletter-box form .btn {
    justify-content: center;
  }
}

/* ---------- Newsletter popup (landing) ---------- */

.nl-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 42, 61, 0.45);
  backdrop-filter: blur(3px);
}

.nl-popup-overlay[hidden] {
  display: none;
}

.nl-popup {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 38px 34px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(15, 42, 61, 0.3);
  animation: nl-popup-in 0.35s ease-out;
}

@keyframes nl-popup-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.nl-popup h2 {
  font-size: 1.4rem;
  margin: 14px 0 8px;
}

.nl-popup > p {
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.nl-popup form {
  display: flex;
  gap: 10px;
}

.nl-popup input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--paw-blue-light);
  background: var(--surface);
  font: inherit;
  color: var(--ink);
}

.nl-popup input[type="email"]:focus {
  outline: none;
  border-color: var(--paw-blue);
  box-shadow: 0 0 0 3px rgba(46, 155, 214, 0.18);
}

.nl-popup .form-status {
  margin: 10px 0 0;
}

.nl-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  border: 0;
  background: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.nl-popup-close:hover {
  color: var(--ink);
}

.nl-popup-refuse {
  border: 0;
  background: none;
  margin-top: 14px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

.nl-popup-refuse:hover {
  color: var(--ink);
}

@media (max-width: 520px) {
  .nl-popup {
    padding: 32px 22px 22px;
  }
  .nl-popup form {
    flex-direction: column;
  }
  .nl-popup form .btn {
    justify-content: center;
  }
}

/* ---------- Final CTA ---------- */

.cta-final {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.cta-final img {
  width: 100%;
  height: 380px;
  object-fit: cover;
}

.cta-final .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 74, 117, 0.55) 0%, rgba(17, 74, 117, 0.78) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  padding: 24px;
}

.cta-final h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  max-width: 620px;
  line-height: 1.25;
}

.cta-final p {
  opacity: 0.92;
  max-width: 520px;
}

.cta-final .btn {
  background: #fff;
  color: var(--paw-blue-dark);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

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

/* ---------- Footer ---------- */

.site-footer {
  background: #12283c;
  color: #b9cad8;
  margin-top: 88px;
  padding: 54px 0 34px;
  font-size: 0.93rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 38px;
}

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

.site-footer .brand {
  color: #fff;
  margin-bottom: 12px;
}

.footer-tagline {
  max-width: 300px;
}

.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 12px;
}

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

.site-footer a {
  color: #b9cad8;
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: #8fa5b8;
}

/* Legal pages reuse the simple flat footer */
.site-footer .container.simple {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-direction: row !important;
  gap: 22px;
  flex-wrap: wrap;
}

/* ---------- Feature detail pages ---------- */

/* Photo banner under the header (feature/blog/contact pages): full-width
   image, title on a darkening gradient. The banner keeps the 5.5:1 ratio of
   the pre-cropped files in assets/img/banners/ (whole animal framed at crop
   time), so the browser never re-crops them on desktop. */
.page-banner {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}


.page-banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 42, 64, 0.15) 0%, rgba(17, 42, 64, 0.62) 78%);
}

.page-banner .container {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: #fff;
  /* Top padding keeps a band of photo visible when a long title makes the
     section grow beyond its min-height (small screens). */
  padding-top: 110px;
  padding-bottom: 30px;
}

.page-banner h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 820px;
  margin: 0 auto;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.page-banner p {
  margin: 8px auto 0;
  max-width: 720px;
  font-weight: 600;
  opacity: 0.93;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

/* Wide screens only: with min-height the aspect-ratio would transfer into a
   min-WIDTH and overflow small screens. */
@media (min-width: 1021px) {
  .page-banner {
    aspect-ratio: 5.5 / 1;
    min-height: 0;
  }
  /* Short band: the title sits LEFT so the animal (framed on the right of
     every banner file) stays clear of it, and the text block never forces
     the section taller than the file ratio (which would re-crop the photo). */
  .page-banner .container {
    text-align: left;
    padding-top: 36px;
    padding-bottom: 24px;
  }
  .page-banner h1 {
    margin: 0;
    max-width: 660px;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  }
  .page-banner p {
    margin-left: 0;
    max-width: 620px;
  }
}


@media (max-width: 680px) {
  .page-banner {
    min-height: 240px;
  }
  .page-banner .container {
    padding-top: 84px;
  }
  .page-banner p {
    font-size: 0.92rem;
  }
}

.browser-frame {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(46, 155, 214, 0.14);
}

.browser-frame .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--paw-sky);
  border-bottom: 1px solid rgba(46, 155, 214, 0.14);
}

.browser-frame .bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paw-blue-light);
}

.browser-frame .bar span:first-child {
  background: var(--warm-amber);
}

.browser-frame img {
  width: 100%;
  display: block;
}

/* Feature-page screenshots: centered 80% frame with floating accents
   (reuses the hero's .float-card / .doodle / floaty animation). */
.screen-showcase {
  position: relative;
  width: 80%;
  margin: 30px auto 0;
}

.screen-showcase .doodle,
.screen-showcase .float-card {
  z-index: 2;
}

/* Extra float-card anchors so positions vary from one screenshot to the next. */
.screen-showcase .sc-tr {
  top: -4%;
  right: -3%;
}

.screen-showcase .sc-mr {
  top: 40%;
  right: -5%;
  animation-delay: 0.9s;
}

.screen-showcase .sc-bl {
  bottom: -5%;
  left: -4%;
  animation-delay: 1.8s;
}

.screen-showcase .sc-ml {
  top: 42%;
  left: -6%;
  animation-delay: 2.4s;
}

/* Tighter gap between a showcased screenshot and the feature explanations. */
.showcase-section {
  padding-bottom: 42px;
}

@media (max-width: 760px) {
  .screen-showcase {
    width: 100%;
  }
}

/* Narrow screens: the accents hang OFF the frame (above its title bar, below its
   bottom edge) instead of sitting on the screenshot; the mid-height ones, which
   can only land in the middle of the image, are dropped. */
@media (max-width: 620px) {
  .screen-showcase {
    margin-top: 48px;
    z-index: 0;
  }

  .screen-showcase .browser-frame {
    position: relative;
    z-index: 1;
  }

  .screen-showcase .doodle {
    z-index: 0;
  }

  .screen-showcase .doodle-star {
    top: -44px;
    right: -2%;
  }

  .screen-showcase .doodle-bone {
    bottom: -44px;
    left: -2%;
  }

  .screen-showcase .fc-1,
  .screen-showcase .sc-tr {
    top: -28px;
    bottom: auto;
  }

  .screen-showcase .fc-2,
  .screen-showcase .sc-bl {
    top: auto;
    bottom: -30px;
  }

  .screen-showcase .fc-1,
  .screen-showcase .sc-bl {
    left: -4%;
    right: auto;
  }

  .screen-showcase .fc-2,
  .screen-showcase .sc-tr {
    left: auto;
    right: -4%;
  }

  .screen-showcase .sc-mr,
  .screen-showcase .sc-ml {
    display: none;
  }
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.feature-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 0;
}

@media (max-width: 560px) {
  .feature-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .feature-cta .btn {
    justify-content: center;
  }
}

.feature a.card-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--paw-blue-dark);
  text-decoration: none;
}

.feature a.card-link:hover {
  text-decoration: underline;
}

/* ---------- Guided setup (parcours de configuration) ---------- */

/* Two columns: the benefits on one side, the device stack on the other. */
.setup-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 52px;
  align-items: center;
  margin-top: 36px;
}

/* Inside the split the heading follows its column, not the page centre. */
.setup-split .section-title {
  text-align: left;
}

.setup-points {
  display: grid;
  gap: 24px;
}

.setup-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.setup-point .icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--paw-sky);
  color: var(--paw-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.setup-point .icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.setup-point h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 5px;
}

.setup-point p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Browser screenshot with the phone capture overlapping its bottom-left. */
.setup-visual {
  position: relative;
  padding-bottom: 44px;
}

.phone-frame {
  position: relative;
  background: var(--paw-blue-deep);
  border: 7px solid var(--paw-blue-deep);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.phone-frame img {
  display: block;
  width: 100%;
  border-radius: 23px;
}

/* The guided-setup screenshots carry their width/height attributes (the frames
   keep their place while the lazy image loads), so the rendered height has to
   follow the fluid width instead of the attribute. */
.phone-frame img,
.browser-frame img[width] {
  height: auto;
}

.setup-visual .phone-frame {
  position: absolute;
  left: -5%;
  bottom: 0;
  width: 27%;
}

@media (max-width: 900px) {
  .setup-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .setup-visual {
    /* Explicit width: auto margins would otherwise shrink the frame to the
       size of a not-yet-loaded lazy screenshot. */
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
}

@media (max-width: 700px) {
  .setup-visual .phone-frame {
    left: 0;
    width: 30%;
  }
}

/* Same phone frame shown on its own, next to a block of text. */
.phone-frame.solo {
  width: 100%;
  max-width: 258px;
  margin: 0 auto;
}

/* Line-art icon inside a float card (this section uses no emoji). */
.float-card .big svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--paw-blue-dark);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The 11 steps as a timeline; the optional ones stay discreet. */
.setup-timeline {
  list-style: none;
  counter-reset: tl-step;
  display: grid;
  row-gap: 0;
  max-width: 860px;
  margin: 36px auto 0;
}

.tl-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding-left: 56px;
  padding-bottom: 22px;
  counter-increment: tl-step;
}

/* The connecting line is drawn per step, so a column can close on its own. */
.tl-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--paw-blue-light);
}

.tl-step:first-child::before {
  top: 22px;
}

.tl-step:last-child::before {
  bottom: auto;
  height: 22px;
}

/* Step number, from the CSS counter — no hand-written digits in the markup. */
.tl-step::after {
  content: counter(tl-step);
  position: absolute;
  left: 29px;
  top: 27px;
  z-index: 2;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--paw-blue);
  color: #fff;
  font-size: 0.69rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--paw-blue-light);
  background: var(--surface);
  color: var(--paw-blue-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.tl-dot svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl-label {
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--ink);
}

/* A step that links to its feature page: the whole row is the target. */
.tl-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.tl-link:hover .tl-label {
  color: var(--paw-blue-dark);
}

.tl-link:hover .tl-dot {
  border-color: var(--paw-blue);
  background: var(--paw-sky);
}

.tl-step.is-opt .tl-dot {
  border-style: dotted;
  border-color: rgba(46, 155, 214, 0.35);
}

.tl-step.is-opt .tag {
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm-amber-dark);
}

/* Desktop: two columns filled top-to-bottom (6 steps, then 5). */
@media (min-width: 1021px) {
  .setup-timeline {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 48px;
  }

  .tl-step:nth-child(6)::before {
    bottom: auto;
    height: 22px;
  }

  .tl-step:nth-child(7)::before {
    top: 22px;
  }
}

.setup-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-top: 16px;
}

/* ---------- Legal pages ---------- */

.legal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 860px;
  margin: 56px auto 0;
  padding: 48px clamp(24px, 5vw, 60px);
}

.legal h1 {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.legal .updated {
  color: var(--ink-soft);
  font-size: 0.88rem;
  margin-bottom: 30px;
}

.legal h2 {
  font-size: 1.24rem;
  font-weight: 800;
  margin: 32px 0 10px;
}

.legal h3 {
  font-size: 1.04rem;
  font-weight: 800;
  margin: 20px 0 8px;
}

.legal p,
.legal li {
  font-size: 0.97rem;
  margin-bottom: 10px;
}

.legal ul {
  padding-left: 22px;
  margin-bottom: 14px;
}

.legal .placeholder {
  background: #fff4e5;
  border: 1px dashed var(--warm-amber-dark);
  border-radius: 6px;
  padding: 1px 6px;
  color: #8a5a1e;
}

/* ---------------------------------------------------------------- blog */

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

.post-card {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.post-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.post-card .body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card .tag {
  align-self: flex-start;
  background: var(--paw-sky);
  color: var(--paw-blue-dark);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 999px;
}

.post-card h2 {
  font-size: 1.18rem;
  line-height: 1.35;
}

.post-card h2 a {
  color: var(--ink);
  text-decoration: none;
}

.post-card h2 a:hover {
  color: var(--paw-blue-dark);
}

.post-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  flex: 1;
}

.post-card .meta {
  color: var(--ink-soft);
  font-size: 0.83rem;
}

.post {
  /* Same content width as every other page (.container), client decision. */
  max-width: 1140px;
  margin: 0 auto;
  padding: 34px 24px 10px;
}

.post .meta {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 26px;
}

.post h2 {
  font-size: 1.5rem;
  color: var(--paw-blue-deep);
  margin: 38px 0 14px;
}

.post h3 {
  font-size: 1.15rem;
  margin: 26px 0 10px;
}

.post p,
.post li {
  font-size: 1.02rem;
  margin-bottom: 12px;
}

.post ul,
.post ol {
  padding-left: 24px;
  margin-bottom: 16px;
}

.post figure {
  margin: 28px auto;
  max-width: 520px;
}

.post figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.post figcaption {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 8px;
  text-align: center;
}

.post table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 22px;
  font-size: 0.95rem;
}

.post th,
.post td {
  border: 1px solid var(--paw-blue-light);
  padding: 9px 12px;
  text-align: left;
}

.post th {
  background: var(--paw-sky);
  color: var(--paw-blue-deep);
}

.post-essentials {
  background: var(--paw-sky);
  border-left: 5px solid var(--paw-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin: 26px 0;
}

.post-essentials h2 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--paw-blue-deep);
}

.post-essentials li {
  font-size: 0.98rem;
  margin-bottom: 6px;
}

.post-cta {
  background: var(--grad);
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 34px 0;
  text-align: center;
}

.post-cta.warm {
  background: var(--grad-warm);
}

.post-cta h2,
.post-cta h3 {
  color: #fff;
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.post-cta p {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 16px;
}

.post-cta .btn {
  background: #fff;
  color: var(--paw-blue-dark);
  font-weight: 800;
}

.post-cta.warm .btn {
  color: var(--warm-amber-dark);
}

.post details {
  background: var(--surface);
  border: 1px solid var(--paw-blue-light);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
}

.post summary {
  font-weight: 800;
  cursor: pointer;
  color: var(--paw-blue-deep);
}

.post details p {
  margin: 10px 0 0;
}

.post .sources {
  border-top: 1px solid var(--paw-blue-light);
  margin-top: 40px;
  padding-top: 18px;
}

.post .sources p,
.post .sources li {
  font-size: 0.85rem;
  color: var(--ink-soft);
}