/* ==========================================================================
   Trame — Landing page styles
   Palette: navy #021d38, orange #fb9b37, sand #e7d5bd, sky #dbf3ff,
            olive #b1a317, walnut #7b5c3a, white #ffffff

   Layout: flexbox everywhere, widths in %, type and spacing in rem
   (relative to the browser's font size) so the page scales with the screen.
   ========================================================================== */

:root {
  --navy: #021d38;
  --navy-soft: #0a3357;
  --navy-border: #1a4a73;
  --orange: #fb9b37;
  --orange-dark: #e07f1c;
  --sand: #e7d5bd;
  --sky: #dbf3ff;
  --olive: #b1a317;
  --walnut: #7b5c3a;
  --white: #ffffff;
  --ink: #1c1d1b;
  --ink-soft: #4a453d;
  --ink-on-dark: #c9d3de;

  --bg: var(--white);
  --bg-alt: #faf6ef;
  --border: #e7e0d3;

  --font-display: var(--font-body);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius-sm: 0.625rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999rem;

  --shadow-card: 0 0.25rem 1rem rgba(2, 29, 56, 0.08);
  --shadow-lift: 0 0.75rem 2rem rgba(2, 29, 56, 0.14);
  --shadow-pop:
    0 0 0 1px rgba(251, 155, 55, 0.4),
    0 0.375rem 0.5rem rgba(2, 29, 56, 0.35),
    0 1rem 1.25rem -0.25rem rgba(2, 29, 56, 0.55),
    0.75rem 0.75rem 0 0 var(--navy);

  --gap: 1.75rem;

  /* Real values are measured by the script in index.html; these are fallbacks */
  --header-h: 4.9rem;
  --trust-h: 3.3rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }
/* In-page links land just below the sticky header (so "Le produit" returns to the very top) */
#top, main [id] { scroll-margin-top: var(--header-h); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 1rem; color: var(--navy); }
p { margin: 0 0 1rem; }
strong, b { font-weight: 800; }
ul { margin: 0; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
  width: min(90%, calc(100% - 3rem)); /* at least 24px of side margin on phones */
  max-width: 71.25rem;
  margin: 0 auto;
}
.section-narrow { width: 66%; margin: 0 auto; }
.center { text-align: center; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 0.75rem;
}
.eyebrow.center { display: block; }
.eyebrow-on-dark { color: var(--orange); }

.lead, .section-lead {
  font-size: 1.125rem;
  color: var(--ink-soft);
  width: 100%;
}
.section-lead { max-width: 80%; }
.center .section-lead, .section-lead.center { margin-left: auto; margin-right: auto; }
.on-dark { color: var(--ink-on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.9375rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--orange);
  color: var(--navy);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); }
.btn-small { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: #f5ece4;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  gap: 1.5rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.logo-icon { height: 2rem; width: auto; flex-shrink: 0; }
.logo-wordmark { height: 2rem; width: auto; }
.footer-brand .logo-icon { height: 1.75rem; }
.main-nav {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 400;
}
.main-nav a { color: var(--ink-soft); }
.main-nav a:hover { color: var(--navy); }
.main-nav a[aria-current="page"] { display: none; }

/* ---------- Weave backgrounds ---------- */
.hero {
  background: var(--bg-alt) url("illustrations/trame-weave.svg") center / 62% auto repeat;
}
/* The final CTA sits on the frayed weave, as in the app: one row of the
   frayed tile along the top so its fringe is the section's edge, and the
   same weave without the fringe (::before) filling the rest, so the fringe
   doesn't repeat down the section. */
.final-cta {
  position: relative;
  isolation: isolate;
  background: url("illustrations/frayed-weave.png") left top / 402px 203px repeat-x;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 203px 0 0 0;
  z-index: -1;
  background: url("illustrations/frayed-weave-body.png") left top / 402px 195px repeat;
}

/* ---------- Cards on the weave (fully opaque) ---------- */
.hero-copy, .cta-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-pop);
}

/* ---------- Hero ---------- */
/* Header + hero + trust strip fill exactly one screen on load */
.hero {
  display: flex;
  flex-direction: column;
  padding: 2rem 0 3.5rem;
  min-height: calc(100vh - var(--header-h) - var(--trust-h));
  min-height: calc(100svh - var(--header-h) - var(--trust-h));
}
.hero-grid { flex: 1 1 auto; }
.hero-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch; /* text card and illustration share the same height */
  justify-content: space-between; /* the remaining 7% is the gap */
}
.hero-copy { flex: 0 0 33%; min-width: 0; padding: 2rem 1.75rem; justify-content: center; }
.hero-illustration { flex: 0 0 60%; position: relative; }
.hero h1 { font-size: clamp(1.5rem, 1.6vw + 0.75rem, 2.25rem); width: 100%; }
.hero-copy .btn { white-space: normal; text-align: center; }
.hero-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sky);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
/* Never taller than the space above the trust strip (hero padding: 2rem top, 3.5rem bottom) */
.hero-illustration { max-height: calc(100svh - var(--header-h) - var(--trust-h) - 5.5rem); }
/* Absolutely positioned so the image fills the row instead of dictating its height */
.hero-illustration img, .hero-illustration video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem 0 0.75rem;
}
.waitlist-form input[type="email"] {
  flex: 1 1 55%;
  min-width: 0;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--white);
  color: var(--ink);
}
.waitlist-form .btn { flex: 1 1 auto; }
.waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--orange);
}
.waitlist-form-dark input[type="email"] {
  border-color: var(--navy-border);
  background: var(--navy-soft);
  color: var(--white);
}
.waitlist-form-dark input[type="email"]::placeholder { color: var(--ink-on-dark); }

.fine-print { font-size: 0.8125rem; color: var(--ink-soft); margin: 0; }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--navy);
  color: var(--white);
  padding: 1rem 0;
}
.trust-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 400;
}

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section-alt { background: var(--bg-alt); }
.section h2 { font-size: clamp(1.625rem, 2vw + 0.75rem, 2rem); }
.section-cta { margin-top: 3rem; display: flex; justify-content: center; }
.section-cta .waitlist-form { width: 60%; justify-content: center; }

/* ---------- Card rows (features, steps, security) ---------- */
.feature-grid, .steps-grid, .security-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: 3rem;
}
.feature-card, .step, .security-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
}

/* ---------- Feature cards ---------- */
.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.feature-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1.25rem;
  aspect-ratio: 1 / 1;
}
.feature-illustration img { width: 100%; height: 100%; object-fit: cover; }
.feature-illustration .img-bottom { object-position: center bottom; }
.feature-card h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }
.feature-card p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

/* ---------- Steps ---------- */
.step { align-items: center; text-align: center; padding: 0 2%; }
.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.step p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }

/* ---------- Security (dark) ---------- */
.section-dark {
  background: var(--navy);
  color: var(--white);
}
.security-card {
  background: var(--navy-soft);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
}
.security-icon { font-size: 1.75rem; margin-bottom: 0.75rem; align-self: center; }
.security-card h3 { color: var(--white); font-size: 1.125rem; margin-bottom: 0.5rem; }
.security-card p { color: var(--ink-on-dark); font-size: 0.906rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.5rem;
}
.faq-item summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.375rem;
  color: var(--orange-dark);
  margin-left: 1rem;
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p { margin: 0.875rem 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---------- Final CTA ---------- */
.final-cta .container { display: flex; justify-content: center; }
.cta-card {
  width: 70%;
  align-items: center;
  position: relative;
  /* Warm glow: an opaque radial wash inside, a pulsing halo behind (::before) */
  background: radial-gradient(ellipse at 50% 0%, #fff3e2 0%, var(--white) 70%);
}
/* The container is the stacking context, so the halo sits above the weave but below the card */
.final-cta { overflow: hidden; }
.final-cta .container { position: relative; z-index: 0; }
.cta-card::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(251, 155, 55, 0.85), rgba(251, 155, 55, 0.35) 55%, rgba(219, 243, 255, 0) 100%);
  filter: blur(2rem);
  animation: cta-glow 3.5s ease-in-out infinite;
}
@keyframes cta-glow {
  0%, 100% { opacity: 0.7; transform: scale(0.97); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-card::before { animation: none; }
}
.final-cta h2 { font-size: clamp(1.75rem, 2vw + 0.875rem, 2.125rem); }
.final-cta .section-lead { margin-left: auto; margin-right: auto; }
.final-cta .waitlist-form { justify-content: center; width: 85%; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--ink-on-dark);
  padding: 2.5rem 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.625rem; font-weight: 800; color: var(--white); }
.footer-brand p { margin: 0; font-size: 0.875rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.875rem; }
.footer-nav a:hover { color: var(--white); }
.footer-copyright { width: 100%; font-size: 0.78rem; margin: 0.5rem 0 0; opacity: 0.7; }

/* ---------- Legal page ---------- */
.legal-page { padding: 4rem 0 6rem; }
.legal-page .section-narrow { display: flex; flex-direction: column; }
.legal-page h1 { font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.25rem); }
.legal-page h2 { font-size: 1.375rem; margin-top: 2.5rem; }
.legal-page p, .legal-page li { color: var(--ink-soft); font-size: 0.97rem; }
.legal-page ul { margin: 0 0 1rem 1.25rem; padding: 0; }
.legal-page li { margin-bottom: 0.5rem; }
.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.5rem 0 2.5rem;
  padding: 1rem;
  background: var(--bg-alt);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.legal-nav a {
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--navy);
}
.legal-nav a:hover { background: var(--sand); }
.legal-section { scroll-margin-top: 6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); margin-top: 2rem; }
.legal-section:first-of-type { border-top: none; margin-top: 0; }
.back-link { align-self: flex-start; margin-bottom: 1.5rem; font-weight: 800; color: var(--navy); }
.back-link:hover { color: var(--orange-dark); }

/* ---------- Responsive ---------- */
/* iPad: the text card overlaps the top-left corner of the illustration */
@media (min-width: 641px) and (max-width: 1024px) {
  .hero-grid { justify-content: flex-start; }
  .hero-copy {
    flex: 0 0 44%;
    align-self: flex-start;
    position: relative;
    z-index: 2;
    margin-right: -8%;      /* slides over the illustration's left edge */
    margin-bottom: 1.5rem;  /* the illustration continues below the card */
  }
  .hero-illustration {
    flex: 1 1 0;
    margin-top: 1.5rem;     /* the card sticks out above the illustration */
  }
  .hero { padding-bottom: 2rem; }
}
/* Short screens (small laptops): tighten the hero so the trust strip stays above the fold */
@media (min-width: 641px) and (max-height: 920px) {
  .hero { padding: 1.25rem 0 1.5rem; }
  .hero-copy { padding: 1.5rem 1.5rem; }
  .hero .eyebrow { margin-bottom: 0.5rem; }
  .hero h1 { font-size: clamp(1.4rem, 1.2vw + 0.7rem, 1.9rem); margin-bottom: 0.75rem; }
  .hero .lead { font-size: 1rem; margin-bottom: 0; }
  .hero .waitlist-form { margin: 1.25rem 0 0.5rem; gap: 0.5rem; }
  .hero .waitlist-form input[type="email"], .hero .waitlist-form .btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .hero-illustration { max-height: calc(100svh - var(--header-h) - var(--trust-h) - 2.75rem); }
}
/* Very short windows: smaller hero text so the card still fits above the trust strip */
@media (min-width: 641px) and (max-height: 700px) {
  .hero { padding: 1rem 0 1rem; }
  .hero-copy { padding: 1.25rem 1.5rem; }
  .hero h1 { font-size: clamp(1.25rem, 1vw + 0.7rem, 1.6rem); margin-bottom: 0.5rem; }
  .hero .lead { font-size: 0.9375rem; line-height: 1.5; }
  .hero .waitlist-form { margin: 1rem 0 0.5rem; }
  .hero .fine-print { font-size: 0.75rem; }
  .hero-illustration { max-height: calc(100svh - var(--header-h) - var(--trust-h) - 2rem); }
}
@media (min-width: 641px) and (max-height: 620px) {
  .hero-copy { padding: 1rem 1.25rem; }
  .hero .eyebrow { margin-bottom: 0.25rem; }
  .hero .lead { font-size: 0.875rem; line-height: 1.45; }
  .hero .waitlist-form { margin: 0.75rem 0 0.25rem; }
}
@media (max-width: 1100px) {
  .trust-inner { gap: 0.75rem 1.5rem; font-size: 0.8125rem; }
  .main-nav { gap: 1.25rem; }
  .main-nav a { white-space: nowrap; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
}
@media (max-width: 900px) {
  .feature-card, .security-card { flex-basis: calc((100% - var(--gap)) / 2); }
  .step { flex-basis: 100%; }
  .steps-grid { gap: 2.5rem; }
  .section-narrow { width: 85%; }
  .cta-card, .section-cta .waitlist-form { width: 90%; }
}
@media (max-width: 640px) {
  .main-nav { display: none; }
  .hero { background-size: 150% auto; }
  .btn-small { white-space: normal; text-align: center; }
  .logo-icon, .logo-wordmark { height: 1.625rem; }
  .header-inner { gap: 0.75rem; }
  .header-inner .btn-small { padding: 0.5rem 0.875rem; font-size: 0.8125rem; max-width: 50%; }
  .section { padding: 4rem 0; }
  .feature-card, .security-card { flex-basis: 100%; }
  /* Narrow text sections keep the same side margins as every other section */
  .section-narrow { width: min(90%, calc(100% - 3rem)); }
  .cta-card, .section-cta .waitlist-form,
  .final-cta .waitlist-form, .section-lead { width: 100%; max-width: 100%; }
  .hero-copy, .cta-card { padding: 1.75rem 1.25rem; }
  /* Smaller offset shadow so the right margin doesn't look narrower than the left */
  :root {
    --shadow-pop:
      0 0 0 1px rgba(251, 155, 55, 0.4),
      0 0.25rem 0.375rem rgba(2, 29, 56, 0.3),
      0 0.75rem 1rem -0.25rem rgba(2, 29, 56, 0.5),
      0.5rem 0.5rem 0 0 var(--navy);
  }
  .hero-grid { flex-direction: column; align-items: stretch; gap: 2.5rem; }
  /* Stacked: image, then the card below it, never overlapping */
  .hero-copy { position: static; top: auto; margin: 0; }
  .hero-illustration { margin: 0; }
  .hero-copy, .hero-illustration { flex-basis: auto; }
  .hero-illustration { order: -1; }
  .hero { min-height: 0; }
  .hero-illustration img, .hero-illustration video { position: static; height: auto; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form input[type="email"], .waitlist-form .btn { width: 100%; flex-basis: auto; }
  .trust-inner { gap: 0.75rem 1.5rem; font-size: 0.8125rem; }
}

/* ---------- Mobile feature stack (driven by feature-stack.js) ---------- */
.stack-counter { display: none; }
@media (max-width: 640px) {
  #fonctionnalites { overflow-x: clip; } /* rotated cards must not cause sideways scroll */
  .feature-grid.is-stack {
    display: block;
    position: relative;
    width: 88%;
    margin: 3rem auto 0;
  }
  .is-stack .feature-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform-origin: 90% 90%;
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.3s ease;
    touch-action: pan-y; /* vertical swipes still scroll the page */
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
  }
  .is-stack .feature-card.is-dragging { transition: none; cursor: grabbing; }
  .is-stack .feature-card img { pointer-events: none; -webkit-user-drag: none; }
  .stack-counter {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin: 1.5rem 0 0;
  }
  .stack-counter[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-stack .feature-card { transition: opacity 0.2s ease; }
}

/* ---------- 404 page ---------- */
/* The press fills the whole page area below the header; the content card sits on top of it */
.error-page {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh; /* no header on this page: the press fills the whole screen */
  min-height: 100svh;
  padding: 3rem 0;
  overflow: hidden;
}
.error-content {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
}
.error-copy {
  width: 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-pop);
}
.error-code {
  font-size: clamp(7rem, 16vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  margin: 0 0 1rem;
  color: var(--navy);
  text-shadow: 0.05em 0.05em 0 var(--orange);
}
.error-title { font-size: 1.375rem; font-weight: 800; color: var(--navy); margin-bottom: 0.75rem; }
.error-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }

/* ---------- Notice page (desinscription.html): one calm card, no animation ---------- */
.notice-page {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem 0;
  background: var(--bg-alt);
}
.notice-card {
  max-width: 34rem;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-pop);
}
.notice-page > .container { min-width: 0; }
.notice-logo { display: block; width: fit-content; margin-bottom: 1.75rem; }
/* The site's orange label is 2.9:1 on this white card; a darker orange reaches 5.2:1 (WCAG AA). */
.notice-card .eyebrow { color: #a8580b; }
.notice-logo img { display: block; height: 2.5rem; width: auto; }
.notice-title { font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem); line-height: 1.2; color: var(--navy); margin: 0 0 1rem; }
.notice-small { font-size: 0.9375rem; color: var(--ink-soft); margin: 0 0 1.5rem; }
.notice-small a { color: var(--navy); font-weight: 800; }
@media (max-width: 640px) {
  .notice-page { padding: 2rem 0; }
  .notice-card { padding: 1.75rem 1.25rem; }
  .notice-card .btn { flex: 1 1 100%; }
}

/* Printing press animation, recoloured in the Trame palette */
.press * { border: 0; box-sizing: border-box; margin: 0; padding: 0; }
.press {
  --paper: var(--white);
  --paper-shade: var(--sand);
  --ink: var(--navy);
  background: var(--sky);
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-size: clamp(1rem, 2vw, 1.75rem); /* scales the whole machine with the screen */
  color: var(--ink);
  line-height: 1.5;
  --press-x: 70%; /* where the machine sits: right of the card on desktop */
  --press-y: 50%;
}
.press .sheet { overflow: hidden; }
.press .sheet, .press .sheet:before, .press .roll { position: absolute; }
.press .sheet, .press .roll { top: var(--press-y); left: var(--press-x); }
.press .sheet {
  width: 4em;
  height: 6em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg);
}
.press .sheet:before {
  animation: print 0.5s ease-in-out infinite;
  background:
    linear-gradient(#0000 5.2em, currentColor 5.2em 5.3em, #0000 5.3em 5.5em) 0.4em 0 / 3.2em 6em,
    linear-gradient(#0000 5.5em, currentColor 5.5em 5.7em, #0000 5.7em) 0.6em 0 / 2.8em 6em,
    linear-gradient(90deg, var(--paper) 0.4em, #0000 0.4em 1.9em, var(--paper) 1.9em 2.1em, #0000 2.1em 3.6em, var(--paper) 3.6em) 0 0 / 4em 6em,
    repeating-linear-gradient(var(--paper) 0 0.4em, #0000 0.4em 5em, var(--paper) 5em 6em, #0000 6em) 0 0 / 4em 6em,
    linear-gradient(#0000 3.4em, currentColor 3.4em) 100% 0 / 50% 6em,
    repeating-linear-gradient(currentColor 0 0.2em, var(--paper) 0.2em 0.4em) 0 0 / 4em 6em;
  background-repeat: repeat-y;
  color: var(--ink);
  content: "";
  display: block;
  top: -6em;
  left: 0;
  width: 100%;
  height: calc(100% + 6em);
}
.press .sheet:nth-child(1):before,
.press .sheet:nth-child(5):before { color: var(--paper-shade); }
.press .sheet:nth-child(n + 7):nth-child(-n + 9) { height: 0.4em; }
.press .sheet:nth-child(1) {
  height: 42em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-17.4em, 9.4em) rotateX(-90deg);
}
.press .sheet:nth-child(3) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-2.5em, -2.5em);
}
.press .sheet:nth-child(5) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-0.5em, -0.7em) rotateX(-75deg);
}
.press .sheet:nth-child(7) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(1.7em, -1.85em) rotateX(-15deg);
}
.press .sheet:nth-child(7):before { background-position-y: 5.2em; }
.press .sheet:nth-child(8) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(1.7em, -1.5em) rotateX(15deg);
}
.press .sheet:nth-child(8):before { background-position-y: 4.8em; }
.press .sheet:nth-child(9) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(1.6em, -1.05em) rotateX(45deg);
}
.press .sheet:nth-child(9):before { background-position-y: 4.4em; }
.press .sheet:nth-child(10):before,
.press .sheet:nth-child(11):before { background-position-y: 4em; }
.press .sheet:nth-child(10) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-0.5em, 1.95em) rotateX(75deg);
}
.press .sheet:nth-child(11) {
  height: 29em;
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-2.5em, 19.25em);
}
.press .roll {
  background-color: var(--orange);
  background-image: radial-gradient(1em 2em at 0.5em 50%, var(--orange-dark) 49%, #0000 50%);
  border-radius: 0.5em 0.5em 0.5em 0.5em / 1em 1em 1em 1em;
  width: 8em;
  height: 2em;
}
.press .roll:nth-child(2) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-3em, -4.5em) skewX(-22.5deg);
}
.press .roll:nth-child(4) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-2em, -0.5em) skewX(-22.5deg);
}
.press .roll:nth-child(6) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(1em, -1em) skewX(-22.5deg);
}
.press .roll:nth-child(12) {
  transform: translate(-50%, -50%) rotateX(-45deg) rotateZ(-45deg) translate(-2em, 4.45em) skewX(-22.5deg);
}
@keyframes print {
  from { transform: translateY(0); }
  to   { transform: translateY(6em); }
}
@media (prefers-reduced-motion: reduce) {
  .press .sheet:before { animation: none; }
}
@media (max-width: 900px) {
  /* Card on top, machine below it */
  .error-page { justify-content: flex-start; }
  .error-copy { width: 100%; }
  .press { --press-x: 50%; --press-y: 78%; }
}
@media (max-width: 640px) {
  .error-page { padding: 2rem 0 3rem; min-height: 58rem; }
  .press { --press-y: 84%; }
  .error-copy { padding: 1.75rem 1.25rem; }
  .error-code { font-size: clamp(5rem, 30vw, 7rem); }
  .error-actions .btn { flex: 1 1 100%; }
}

/* ---------- Error page (5xx): paper airplane crash ---------- */
.crash-scene { position: absolute; inset: 0; background: var(--sky); }

/* The card sits above the plane, so the plane appears from behind it */
.error-copy { position: relative; z-index: 1; }

/* Plane, ground and puffs are positioned in % of the content area (card + space to its right) */
.crash-ground {
  position: absolute;
  left: 52%;
  right: 0;
  top: 97%;
  height: 0.25rem;
  border-radius: 1rem;
  background: var(--navy);
  opacity: 0.2;
}
/* Motion is split over three layers so each gets its own easing:
   .crash-x = horizontal travel, .crash-y = vertical arc (gravity) + charring, .crash-plane = pitch + impact.
   Everything shares one 7s cycle:
     0-3.15s flight (0-45%) · 3.15s impact · 3.35-4.4s dust puffs (48-63%)
     4.4-6.4s fire (63-91%) · 6.4-6.9s fire dies and the wreck fades (91-99%) · relaunch */
.crash-x, .crash-y { position: absolute; top: 0; left: 0; }
.crash-x { bottom: 0; width: 0; animation: plane-x 7s 0.3s linear infinite both; }
.crash-y {
  animation-name: plane-y, plane-char;
  animation-duration: 7s;
  animation-delay: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* The paper chars while it burns */
@keyframes plane-char {
  0%, 63% { filter: none; }
  72%     { filter: sepia(0.5) brightness(0.8); }
  90%     { filter: sepia(0.6) brightness(0.42); }
  100%    { filter: sepia(0.6) brightness(0.42); }
}
.crash-plane {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(4rem, 7vw, 6.5rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  overflow: visible;
  filter: drop-shadow(0.4rem 0.6rem 0 rgba(2, 29, 56, 0.15));
  animation: plane-pitch 7s 0.3s linear infinite both; /* keyframes: crash-keyframes.css (generated) */
}
.crash-plane__wing { fill: var(--white); }
.crash-plane__body { fill: #fff3e2; }
.crash-plane__wing, .crash-plane__body, .crash-plane__fold {
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.crash-plane__fold { fill: none; }
.crash-puff {
  position: absolute;
  left: 80%;
  top: 94%;
  width: clamp(1.25rem, 2vw, 1.75rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0.15rem rgba(2, 29, 56, 0.12);
  opacity: 0;
  animation: puff 7s 0.3s infinite both;
}
.crash-puff--left  { --puff-x: -160%; --puff-y: -100%; }
.crash-puff--up    { --puff-x: 15%;   --puff-y: -200%; width: clamp(1.6rem, 2.6vw, 2.25rem); }
.crash-puff--right { --puff-x: 180%;  --puff-y: -90%; }

/* Impact at 3.15s (45%); the puffs rise 0.2s later (3.35s = 47.9%) and are gone by 4.4s (62.9%) */
@keyframes puff {
  0%, 47.5% { opacity: 0; transform: translate(0, 0) scale(0); }
  48.9%     { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: ease-out; }
  62.9%     { opacity: 0; transform: translate(var(--puff-x), var(--puff-y)) scale(1.7); }
  100%      { opacity: 0; }
}

/* Fire: bursts up once the dust has settled (4.4s), flickers, then dies with the wreck */
.crash-fire {
  position: absolute;
  left: 80%;
  top: 92%;
  width: clamp(5rem, 9vw, 8rem);
  aspect-ratio: 1;
  translate: -50% -78%;          /* the base of the flames engulfs the wreck */
  transform-origin: 50% 100%;
  opacity: 0;
  animation: fire-life 7s 0.3s infinite both;
}
.crash-flame {
  position: absolute;
  left: 50%;
  bottom: 0;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50% 0 50% 50%;  /* teardrop; rotated so the point faces up */
  transform-origin: 50% 70%;
  animation: flicker 0.4s ease-in-out infinite alternate;
}
.crash-flame--outer {
  width: 78%;
  background: var(--orange-dark);
  box-shadow: 0 0 1.5rem 0.4rem rgba(251, 155, 55, 0.55);
}
.crash-flame--mid  { width: 56%; background: var(--orange); animation-duration: 0.32s; animation-delay: -0.1s; }
.crash-flame--core { width: 32%; background: #ffe3a3; animation-duration: 0.26s; animation-delay: -0.2s; }
.crash-smoke {
  position: absolute;
  left: 50%;
  bottom: 70%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(2, 29, 56, 0.45);
  animation: smoke 1.4s ease-out infinite;
}
.crash-smoke--late { animation-delay: -0.7s; --smoke-drift: -60%; }

@keyframes fire-life {
  0%, 62.9% { opacity: 0; transform: scale(0); }
  66%       { opacity: 1; transform: scale(1.12); }   /* catches */
  68%       { opacity: 1; transform: scale(1); }
  88%       { opacity: 1; transform: scale(1); }
  92%       { opacity: 0.85; transform: scale(0.8); } /* dies down */
  98%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes flicker {
  0%   { transform: rotate(-45deg) scale(1, 1); }
  50%  { transform: rotate(-40deg) scale(1.08, 0.94); }
  100% { transform: rotate(-50deg) scale(0.94, 1.1); }
}
@keyframes smoke {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0.7; }
  100% { transform: translate(var(--smoke-drift, 10%), -260%) scale(1.5); opacity: 0; }
}

@media (max-width: 900px) {
  .error-content { padding-bottom: 11rem; }
  .crash-x { animation-name: plane-x-stacked; }
  .crash-y { animation-name: plane-y-stacked, plane-char; }
  .crash-plane { animation-name: plane-pitch-stacked; }
  .crash-ground { left: 35%; top: 98.5%; }
  .crash-puff { left: 74%; top: 97%; }
  .crash-fire { left: 74%; top: 96%; }
}
@media (prefers-reduced-motion: reduce) {
  .crash-x { animation: none; left: 80%; }
  .crash-y { animation: none; top: 93%; }
  .crash-plane { animation: none; transform: rotate(133deg) scale(1.12, 0.6); }
  .crash-puff, .crash-fire { animation: none; }
}

/* ---------- Contact popup (contact-popup.js) ---------- */
.contact-dialog {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  max-width: 92vw;
}
.contact-dialog::backdrop {
  background: rgba(2, 29, 56, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.contact-dialog[open] .e-card { animation: contact-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes contact-pop {
  from { opacity: 0; transform: translateY(1rem) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* Card with rotating waves, after the reference, in the cream and tan tones of the palette */
.e-card {
  position: relative;
  width: min(24rem, 92vw);
  max-height: 92vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-alt);
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
}
.e-card .wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 40rem;
  height: 50rem;
  margin-left: -50%;
  margin-top: -80%;
  opacity: 0.7;
  border-radius: 40%;
  background: linear-gradient(744deg, var(--sand), #d9bf9c 60%, #f5ece4);
  animation: wave 55s infinite linear;
}
.e-card .wave:nth-child(2),
.e-card .wave:nth-child(3) { top: 22rem; }
.e-card .wave:nth-child(2) { animation-duration: 50s; }
.e-card .wave:nth-child(3) { animation-duration: 45s; }
.e-card.playing .wave { animation-duration: 3000ms; }
.e-card.playing .wave:nth-child(2) { animation-duration: 4000ms; }
.e-card.playing .wave:nth-child(3) { animation-duration: 5000ms; }
@keyframes wave {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.contact-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
.contact-close:hover { background: var(--sand); }
.contact-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1.75rem 1.75rem;
  color: var(--navy);
  overflow-y: auto; /* scrolls on short screens instead of overflowing */
}
.contact-icon { width: 3rem; height: auto; margin-bottom: 0.75rem; }
.contact-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.375rem; }
.contact-text { font-size: 0.9375rem; margin: 0 0 1.25rem; }

.contact-form { display: flex; flex-direction: column; width: 100%; text-align: left; }
.contact-label { font-size: 0.8125rem; font-weight: 800; margin: 0 0 0.3rem 0.25rem; }
.contact-input {
  width: 100%;
  margin-bottom: 0.875rem;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--ink);
}
.contact-textarea { border-radius: var(--radius-md); resize: vertical; min-height: 6.5rem; }
.contact-input:focus { outline: none; border-color: var(--walnut); }
.contact-send { width: 100%; margin-top: 0.25rem; }
.contact-send:disabled { opacity: 0.6; cursor: wait; }

.contact-feedback { min-height: 1.25rem; margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 800; }
.contact-feedback.is-error { color: #b3261e; }
.contact-direct { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--ink-soft); }
.contact-address { font-weight: 800; color: var(--navy); user-select: all; word-break: break-all; }
.contact-copy {
  margin-left: 0.25rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}
.contact-copy:hover { background: var(--sand); }

@media (prefers-reduced-motion: reduce) {
  .e-card .wave { animation: none; }
  .contact-dialog[open] .e-card { animation: none; }
}

/* ---------- Scroll reveal for section labels and titles (reveal.js) ---------- */
/* Only applied when the script runs, so the text stays visible without JavaScript */
.reveal {
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s ease-out, filter 1s ease-out;
  will-change: opacity, filter;
}
.reveal.is-visible { opacity: 1; filter: blur(0); }

/* Section titles unfold letter by letter from a hinge at the top of each letter
   (after React Bits' FoldText: hinge top, 0.65s per letter, 45ms stagger, perspective 700px) */
.fold-word { display: inline-block; white-space: nowrap; }
.fold-seg { display: inline-block; perspective: 700px; }
.fold-piece {
  display: inline-block;
  transform-origin: 50% 0%;
  transform: rotateX(-92deg);
  opacity: 0;
  filter: brightness(0.45);                      /* crease shading while folded */
  backface-visibility: hidden;
  transition-property: transform, opacity, filter;
  transition-duration: 0.65s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); /* ~ GSAP power3.out */
  transition-delay: calc(var(--i) * 45ms + var(--fold-delay, 0s));
}
.fold--after-label { --fold-delay: 0.25s; }
.fold.is-visible .fold-piece { transform: none; opacity: 1; filter: none; }

/* ---------- Sign-up thank-you popup (signup-toast.js) ---------- */
.signup-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1000;
  width: min(26rem, calc(100% - 3rem));
  padding: 1.5rem 1.75rem 1.625rem;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, calc(-50% + 1rem));
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.signup-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}
.signup-toast .eyebrow { display: block; margin-bottom: 0.375rem; }
.signup-toast-title {
  margin: 0 1.5rem 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--navy);
}
.signup-toast-body { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-soft); }
.signup-toast-hint { margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.55; font-weight: 800; color: var(--navy); }
.signup-toast-close {
  position: absolute;
  top: 0.75rem;
  right: 0.875rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.signup-toast-close:hover, .signup-toast-close:focus-visible { background: var(--sand); }
.signup-toast--error .eyebrow { color: #b3261e; }

@media (max-width: 640px) {
  .signup-toast { padding: 1.25rem 1.25rem 1.375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .signup-toast, .signup-toast.is-visible { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   Pricing page
   ========================================================================== */

/* ---------- Pricing hero ---------- */
.pricing-hero { padding-bottom: 3.5rem; }
.pricing-h1 { font-size: clamp(2rem, 3vw + 0.75rem, 3rem); margin-bottom: 1rem; }

/* ---------- Pricing cards ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

/* Each card spans the grid's five rows (tier, price, tagline, divider,
   features, options) through subgrid, so these line up across the four
   columns. Browsers without subgrid fall back to the flex column below. */
.pricing-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.875rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-card);
  position: relative;
}

@supports (grid-template-rows: subgrid) {
  .pricing-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.pricing-card--featured {
  border-color: var(--orange);
  box-shadow: var(--shadow-lift), 0 0 0 2px var(--orange);
  z-index: 2;
  transform: translateY(-0.75rem);
}

.pricing-card--dark {
  background: var(--navy);
  border-color: var(--navy-border);
  color: var(--white);
}

.pricing-badge {
  position: absolute;
  top: -0.9375rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-tier {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.625rem;
}
.pricing-card--dark .pricing-tier { color: var(--orange); }

.pricing-price { margin-bottom: 0.75rem; line-height: 1; }
.pricing-amount {
  font-size: 2.125rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
}
.pricing-card--dark .pricing-amount { color: var(--white); }
.pricing-period { font-size: 0.875rem; color: var(--ink-soft); font-weight: 400; }
.pricing-card--dark .pricing-period { color: var(--ink-on-dark); }

.pricing-tagline {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 1.25rem;
  flex: 0 0 auto;
}
.pricing-card--dark .pricing-tagline { color: var(--ink-on-dark); }

.pricing-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 1.125rem;
}
.pricing-card--dark .pricing-divider { border-color: var(--navy-border); }

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  margin-bottom: 1.5rem;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.pricing-features li::before {
  content: '✓';
  font-weight: 800;
  color: var(--orange-dark);
  flex-shrink: 0;
  margin-top: 0.05em;
}
.pricing-card--dark .pricing-features li { color: var(--ink-on-dark); }
.pricing-card--dark .pricing-features li::before { color: var(--orange); }

.pricing-addons-hint {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.875rem;
}
.pricing-addons-hint ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pricing-addons-hint li {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}
.pricing-addons-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0.25rem 0 0.125rem;
}
.pricing-addons-label:first-child { margin-top: 0; }
.pricing-card--dark .pricing-addons-hint { border-color: var(--navy-border); }
.pricing-card--dark .pricing-addons-hint li { color: var(--ink-on-dark); }
.pricing-card--dark .pricing-addons-label { color: var(--orange); }

.pricing-footnote {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 2rem;
}

.pricing-card .btn { white-space: normal; text-align: center; }

.pricing-split-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 2.5rem auto 0;
  max-width: 52rem;
  background: linear-gradient(135deg, #fff8ee 0%, #fff3e2 100%);
  border: 2px solid var(--orange);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.pricing-split-icon { font-size: 1.625rem; flex-shrink: 0; margin-top: 0.05em; }
.pricing-split-notice p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.5;
}
.pricing-split-notice strong { color: var(--navy); }

@media (max-width: 640px) {
  .pricing-split-notice { gap: 0.75rem; padding: 1rem 1.125rem; }
  .pricing-split-icon { font-size: 1.375rem; }
}

/* Button variant for dark cards */
.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: var(--navy-border);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }

/* Large button variant */
.btn-large { padding: 1.125rem 3rem; font-size: 1.0625rem; }

/* ---------- Add-ons section ---------- */
.addon-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin-top: 3rem;
}
.addon-card {
  flex: 1 1 calc((100% - 3 * var(--gap)) / 4);
  min-width: 14rem;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
}
.addon-icon { font-size: 2rem; margin-bottom: 0.625rem; }
.addon-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  line-height: 1;
}
.addon-price span { font-size: 0.875rem; font-weight: 400; color: var(--ink-soft); }
.addon-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.addon-card p { font-size: 0.9375rem; color: var(--ink-soft); margin: 0; }
.addon-included { font-size: 0.8125rem !important; color: var(--orange-dark) !important; margin-top: 0.875rem !important; font-weight: 800; }

/* ---------- Comparison table ---------- */
.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.compare-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
}
.compare-table thead th {
  background: var(--navy);
  color: var(--white);
  padding: 1rem 1rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.875rem;
  white-space: nowrap;
}
.compare-table thead th:first-child { text-align: left; min-width: 12rem; border-radius: var(--radius-md) 0 0 0; }
.compare-table thead th:last-child { border-radius: 0 var(--radius-md) 0 0; }
.compare-table thead th.col-featured { background: var(--orange); color: var(--navy); }
.compare-table tbody td,
.compare-table tbody th[scope="row"] {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.compare-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--ink-soft);
}
.compare-table tbody td {
  text-align: center;
  color: var(--ink-soft);
}
.compare-table td.col-featured { background: rgba(251, 155, 55, 0.07); }
.compare-table .compare-group td {
  background: var(--bg-alt);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border);
}
.compare-table .compare-group td.col-featured { background: rgba(251, 155, 55, 0.07); }
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th { border-bottom: none; }
.compare-table tbody tr:not(.compare-group):hover td,
.compare-table tbody tr:not(.compare-group):hover th { background: var(--bg-alt); }
.compare-table tbody tr:not(.compare-group):hover td.col-featured { background: rgba(251, 155, 55, 0.12); }
.compare-em { font-weight: 800; color: var(--navy); }
.compare-dash { color: var(--ink-soft); font-size: 1.125rem; }
.compare-addon-price { display: block; font-size: 0.8em; }
.compare-addon-price:empty { display: none; }
.compare-wrap:focus-visible,
.tier-card-mobile summary:focus-visible {
  outline: 3px solid var(--orange-dark);
  outline-offset: 2px;
}
.tier-card-mobile summary:focus-visible { outline-offset: -3px; }

/* ---------- Mobile comparison cards ---------- */
.compare-cards {
  display: none; /* flex on mobile via media query below */
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 2rem;
}

.tier-card-mobile {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tier-card-mobile summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}
.tier-card-mobile summary::-webkit-details-marker { display: none; }

.tcm-name {
  flex: 1;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tcm-price {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.tcm-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
}
.tcm-chevron::after {
  content: '›';
  display: inline-block;
  font-size: 1.25rem;
  color: var(--orange-dark);
  line-height: 1;
  transition: transform 0.2s ease;
}
.tier-card-mobile[open] .tcm-chevron::after { transform: rotate(90deg); }

.tcm-features {
  margin: 0;
  padding: 0.75rem 1.125rem 1rem;
  border-top: 1px solid var(--border);
}
.tcm-group {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0.875rem 0 0.5rem;
  padding: 0;
}
.tcm-group:first-child { margin-top: 0.25rem; }
.tcm-features dd {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin: 0 0 0.3rem;
  padding: 0;
  color: var(--ink-soft);
}
.tcm-features dd::before { flex-shrink: 0; font-weight: 800; }
.ti-yes { color: var(--ink); }
.ti-yes::before { content: '✓'; color: var(--orange-dark); }
.ti-no { opacity: 0.75; }
.ti-no::before { content: '—'; color: var(--ink-soft); }
.ti-note { color: var(--navy); }
.ti-note::before { content: '◎'; color: var(--navy); font-size: 0.75rem; }
.ti-addon { color: var(--walnut); }
.ti-addon::before { content: '＋'; color: var(--walnut); }

/* Dark tier card (Mosaïque) */
.tcm--featured { border-color: var(--orange); }
.tcm--featured summary { background: rgba(251, 155, 55, 0.07); }
.tcm--dark { border-color: var(--navy-border); }
.tcm--dark summary { background: var(--navy); }
.tcm--dark .tcm-name { color: var(--white); }
.tcm--dark .tcm-price { color: var(--ink-on-dark); }
.tcm--dark .tcm-chevron::after { color: var(--orange); }
.tcm--dark .tcm-features {
  background: var(--navy-soft);
  border-color: var(--navy-border);
}
.tcm--dark .tcm-group { color: var(--orange); }
.tcm--dark .tcm-features dd { color: var(--ink-on-dark); }
.tcm--dark .ti-yes { color: var(--white); }
.tcm--dark .ti-yes::before { color: var(--orange); }
.tcm--dark .ti-note { color: var(--sky); }
.tcm--dark .ti-note::before { color: var(--sky); }
.tcm--dark .ti-addon { color: var(--sand); }
.tcm--dark .ti-addon::before { color: var(--sand); }
.tcm--dark .ti-no { color: var(--ink-on-dark); opacity: 0.75; }

/* Pricing page responsive */
@media (max-width: 960px) {
  /* Tablet: 2 x 2 */
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-card--featured { transform: none; }
  .addon-card { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-card, .addon-card { flex-basis: 100%; max-width: 100%; }
  .pricing-card--featured { transform: none; }
  .pricing-h1 { font-size: clamp(1.75rem, 6vw + 0.5rem, 2.5rem); }
  .compare-wrap { display: none; }
  .compare-cards { display: flex; }
}

/* Cookie consent banner (consent.js). Refuser and Accepter share one style on purpose:
   the CNIL asks for refusing to be as easy and visible as accepting. */
.cookie-banner {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 900;
  width: min(26rem, calc(100% - 2rem));
  padding: 1.25rem 1.375rem;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  font-family: var(--font-body);
}
.cookie-banner[hidden] { display: none; }
.cookie-title { margin: 0 0 0.375rem; font-weight: 800; color: var(--navy); }
.cookie-text { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }
.cookie-text a { color: var(--navy); text-decoration: underline; }
.cookie-actions { display: flex; gap: 0.625rem; }
.cookie-actions .btn { flex: 1 1 0; }