@font-face {
  font-family: "GT Walsheim Wero";
  src: url("fonts/GT-Walsheim-wero-Regular.B6B2d_Jf.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim Wero";
  src: url("fonts/GT-Walsheim-wero-Bold.a1RV7tRg.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Walsheim Wero";
  src: url("fonts/GT-Walsheim-wero-Black.B7aObPLX.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1d1c1c;
  --mint: #78e5ae;
  --mint-soft: #d7f5de;
  --yellow: #fff48d;
  --white: #fffdf8;
  --green: #15c98c;
  --green-dark: #158460;
  --navy: #0e1f35;
  --pink: #fd97fd;
  --ember: #fd8559;
  --shadow: 0 7px 0 var(--ink);
  --line: 1.5px solid var(--ink);
  --page-pad: clamp(1.25rem, 3vw, 4.5rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--yellow);
  color: var(--ink);
  font-family: "GT Walsheim Wero", Arial, Helvetica, sans-serif;
  line-height: 1.2;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

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

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

[hidden] {
  display: none !important;
}

.scroll-progress {
  background: var(--ink);
  height: 4px;
  left: 0;
  position: fixed;
  top: 0;
  transform: scaleX(0);
  transform-origin: left center;
  width: 100%;
  z-index: 90;
}

.site-header {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 28px;
  z-index: 50;
}

.logo-pill {
  align-items: center;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  box-shadow: 0 4px 0 transparent;
  display: flex;
  height: 58px;
  justify-content: center;
  padding: 0 24px;
  pointer-events: auto;
  transform: scale(1.14);
  transform-origin: center top;
  transition: background 0.4s ease, border-color 0.4s ease,
    box-shadow 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  width: auto;
}

/* discrete: once past the scroll threshold the full pastille transition runs to completion */
body.is-scrolled .logo-pill {
  background: var(--yellow);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  transform: scale(1);
}

.logo-pill img {
  width: clamp(138px, 10.3vw, 160px);
}

.section-mint {
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.26), transparent 23rem),
    linear-gradient(121deg, var(--green) -20%, #9ff0c4 52%, #eafaf0 108%);
}

.section-yellow {
  background: var(--yellow);
}

.hero {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 7rem var(--page-pad) 6rem;
  position: relative;
}

.hero-title {
  animation: hero-float 10.2s ease-in-out 1.2s infinite;
  color: var(--ink);
  font-size: clamp(3.4375rem, 9.385vw + 1.238rem, 12.5rem);
  font-weight: 800;
  letter-spacing: -0.0236em;
  line-height: 0.85;
  margin: 0;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  will-change: translate;
  z-index: 3;
}

/* Gentle continuous drift of the title, mirroring the compiled site's floating loop */
@keyframes hero-float {
  0% { translate: 0 0; }
  24.5% { translate: 6px -12px; }
  52% { translate: -4px -18px; }
  74.5% { translate: 3px -10px; }
  100% { translate: 0 0; }
}

.hero-title span {
  display: block;
}

.trial-sticker {
  position: absolute;
  right: clamp(15%, 22vw, 28%);
  top: clamp(4.4rem, 10vh, 6.8rem);
  transform: rotate(-9deg);
  width: clamp(84px, 8vw, 126px);
  z-index: 7;
}

.shift-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 8px 0 var(--ink);
  color: var(--ink);
  padding: 16px 18px;
  position: absolute;
  width: min(295px, 29vw);
  z-index: 5;
}

.shift-card--left {
  animation: float-left 5.8s ease-in-out infinite;
  bottom: 13%;
  left: 3.5%;
  transform: rotate(-3deg);
}

.shift-card--right {
  animation: float-right 7.2s ease-in-out infinite;
  bottom: 17%;
  right: 3.5%;
  transform: rotate(3deg);
}

.shift-card p {
  color: #5a6f88;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
}

.shift-card strong {
  display: block;
  font-size: 1.28rem;
  font-weight: 900;
}

.shift-card__headline {
  align-items: center;
  display: flex;
  font-size: 1.04rem;
  font-weight: 900;
  gap: 0.55rem;
}

.shift-card__amount,
.price-split {
  align-items: center;
  border-top: 1px solid #ececec;
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  padding-top: 0.65rem;
}

.shift-card__amount strong,
.price-split span:first-child {
  color: var(--green-dark);
  font-weight: 900;
}

.shift-card__amount span,
.mini-pills span {
  background: #eef7f1;
  border-radius: 999px;
  color: #2a6e4d;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.25rem 0.55rem;
}

.price-split {
  font-weight: 900;
}

.price-split span:last-child {
  color: #c95a36;
  text-decoration: line-through;
}

.mini-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.check-dot {
  align-items: center;
  background: var(--green);
  border-radius: 50%;
  color: white;
  display: inline-flex;
  font-size: 0.82rem;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.scroll-cta,
.floating-faq,
.language-toggle,
.bottom-nav,
.faq-close {
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.scroll-cta-wrap {
  bottom: 28px;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1);
  z-index: 40;
}

/* clean swap with the bottom nav: indicator slides straight down out of view */
body.is-scrolled .scroll-cta-wrap {
  pointer-events: none;
  transform: translateY(150px);
}

.scroll-cta {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 66px;
  justify-content: center;
  max-width: 66px; /* circle until the entrance widens it */
  overflow: hidden;
  padding: 0 0.95rem 0 1.75rem;
  transform: scale(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.34s;
  width: -moz-fit-content;
  width: fit-content;
}

.scroll-cta-wrap.is-in .scroll-cta {
  max-width: 480px;
  transform: scale(1);
}


.scroll-cta__inner {
  align-items: center;
  animation: cta-bob 2.2s ease-in-out infinite 1.15s;
  display: inline-flex;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s ease 0.72s;
  white-space: nowrap;
}

.scroll-cta-wrap.is-in .scroll-cta__inner {
  opacity: 1;
}

/* dips down (beckoning a scroll), returns to centre, then holds */
@keyframes cta-bob {
  0%   { transform: translateY(0); }
  27%  { transform: translateY(5px); }
  54%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.scroll-cta .round-icon {
  border-width: 1px;
  height: 44px;
  width: 44px;
}

.scroll-cta__text {
  font-size: 1.05rem;
  font-weight: 600;
}

.round-icon--arrow svg {
  display: block;
}

.round-icon {
  align-items: center;
  background: var(--yellow);
  border: var(--line);
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.hero-lines {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.hero-stars {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

/* Radial speed-lines: rays that emanate from the text and shoot outward to the edges, leaving a gap over the text.
   They burst once per cycle — JS toggles .hero.is-burst to replay them in sync with the sparkles, then pause. */
.speed-line {
  --r0: 400px;
  --r1: 660px;
  animation-name: none;
  animation-timing-function: cubic-bezier(0.33, 0.1, 0.2, 1);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  background: var(--ink);
  border-radius: 3px;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(var(--a)) translateX(var(--r0)) scaleX(0.15);
  transform-origin: left center;
}

.hero.is-burst .speed-line {
  animation-name: ray;
}

@keyframes ray {
  0%   { opacity: 0;    transform: rotate(var(--a)) translateX(var(--r0)) scaleX(0.15); }
  18%  { opacity: 0.95; transform: rotate(var(--a)) translateX(calc(var(--r0) + 24px)) scaleX(1); }
  76%  { opacity: 0.85; }
  100% { opacity: 0;    transform: rotate(var(--a)) translateX(var(--r1)) scaleX(1); }
}

/* 4-point sparkles that appear over the title, rotate, then vanish — burst in sync with the speed-lines */
.sparkle {
  animation-name: none;
  animation-duration: 3.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 0 C54 31 69 46 100 50 C69 54 54 69 50 100 C46 69 31 54 0 50 C31 46 46 31 50 0 Z" fill="%23fffefb"/></svg>') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
  height: var(--s, 32px);
  opacity: 0;
  position: absolute;
  transform: scale(0) rotate(0deg);
  width: var(--s, 32px);
}

.hero.is-burst .sparkle {
  animation-name: twinkle;
}

@keyframes twinkle {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  35%  { opacity: 1; transform: scale(1) rotate(45deg); }
  55%  { opacity: 1; transform: scale(1.05) rotate(80deg); }
  78%  { opacity: 0; transform: scale(0.2) rotate(130deg); }
  100% { opacity: 0; transform: scale(0) rotate(130deg); }
}

/* #what — bold full-bleed manifesto with a scroll-pinned headline and paper planes
   that fly across as you scroll (see setupPlaneFlight() in app.js). Replaces the old
   tilted-note + lock. Tall section = the scroll distance the pin + flight play over. */
.manifesto {
  min-height: 185vh;
  padding: 0 var(--page-pad);
  position: relative;
}

/* the headline holds (pins) in the viewport center while the section scrolls past */
.manifesto-sticky {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  position: sticky;
  top: 0;
}

.center-label,
.eyebrow {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 700;
  margin: 0 0 1.35rem;
}

.manifesto-inner {
  position: relative;
  text-align: center;
  z-index: 2;
}

.manifesto-eyebrow {
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.3rem);
  font-weight: 500;
  margin: 0 0 clamp(2rem, 1vw + 1.75rem, 3rem);
}

.manifesto-title {
  font-size: clamp(2.2rem, 7vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0 auto;
  text-transform: uppercase;
}

/* keep the headline block in place; only the lines animate in */
.reveal.manifesto-title {
  opacity: 1;
  translate: 0 0;
}

/* each phrase stays on its own row so the deliberate line breaks read cleanly */
.manifesto-title .line {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.manifesto-title.is-visible .line {
  opacity: 1;
  transform: none;
}

.manifesto-title .line:nth-child(1) {
  transition-delay: 0.04s;
}
.manifesto-title .line:nth-child(2) {
  transition-delay: 0.12s;
}
.manifesto-title .line:nth-child(3) {
  transition-delay: 0.2s;
}
.manifesto-title .line:nth-child(4) {
  transition-delay: 0.28s;
}

/* inline pink chat-bubble checkmark inside the headline (matches the compiled section) */
.manifesto-title .check-bubble {
  background: linear-gradient(150deg, var(--pink), var(--ember));
  border: var(--line);
  border-radius: 0.32em;
  box-shadow: 0.07em 0.07em 0 var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5em;
  height: 0.95em;
  margin-left: 0.28em;
  position: relative;
  vertical-align: 0.16em;
  width: 1.15em;
}

.manifesto-title .check-bubble::after {
  background: var(--ember);
  border-bottom: var(--line);
  border-left: var(--line);
  bottom: -0.16em;
  content: "";
  height: 0.3em;
  left: 0.22em;
  position: absolute;
  transform: rotate(-45deg);
  width: 0.3em;
}

/* paper planes — position:fixed so they stay in the viewport while they fly; their
   transform + opacity are driven by scroll progress in setupPlaneFlight() (app.js). */
.plane {
  height: auto;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  will-change: transform, opacity;
  z-index: 1;
}

.plane--1 {
  filter: drop-shadow(0 16px 24px rgba(29, 28, 28, 0.18));
  width: clamp(420px, 60vw, 920px);
}

.plane--2 {
  /* recolour the warm illustration toward the compiled cyan/green second plane */
  filter: hue-rotate(135deg) saturate(1.15) drop-shadow(0 14px 20px rgba(29, 28, 28, 0.16));
  width: clamp(320px, 46vw, 760px);
}

/* Tall scroll track: the inner .split-pin sticks at viewport centre, so the
   copy + assembled puzzle animate in and then "hold" while you keep scrolling
   — the same deliberate weight the FAQ blocks have. Kept a touch shorter than
   the FAQ (185vh) so the beat reads as a pause, not a stall. Desktop-only;
   collapses to a normal flowing section ≤1080px and under reduced motion. */
.split-section {
  min-height: 155vh;
  padding: 0 var(--page-pad);
  position: relative;
}

.split-pin {
  align-items: center;
  display: flex;
  min-height: 100svh;
  position: sticky;
  top: 0;
}

.split-grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 6vw, 8rem);
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr);
  width: 100%;
}

.split-copy {
  max-width: 780px;
}

.eyebrow {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.arrow-chip {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  flex: none;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.split-copy h2,
.section-heading,
.comparison-title,
.coverage-panel h2,
.faq-title,
.pricing-title,
.faq-overlay__panel h2 {
  font-size: clamp(3.1rem, 7vw, 7.5rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.84;
  margin: 0 0 2rem;
  text-transform: uppercase;
}

.split-copy p:not(.eyebrow) {
  font-size: clamp(1.06rem, 1.55vw, 1.38rem);
  font-weight: 700;
  line-height: 1.36;
  margin: 0 0 0.8rem;
  max-width: 760px;
}

/* completed isometric puzzle — the all-green assembled state lifted from the END
   of the compiled site's puzzle animation (single SVG, no missing piece). */
.puzzle-visual {
  position: relative;
  width: 100%;
}

.puzzle-complete {
  animation: puzzle-float 6s ease-in-out infinite;
  display: block;
  filter: drop-shadow(0 22px 26px rgba(29, 28, 28, 0.18));
  width: 100%;
}

@keyframes puzzle-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(-0.6deg);
  }
}

.cards-section {
  overflow: hidden;
  padding: 7rem var(--page-pad) 9rem;
}

.section-heading {
  max-width: 650px;
}

/* Heading-left + big illustrated cards on the right, mirroring the compiled
   cards-block. Each card: number badge overlapping the edge, Lottie-derived
   illustration on the left, argument copy on the right. */
.cards-block {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  margin: 0 auto;
  max-width: 1560px;
}

.cards-block-title {
  font-size: clamp(2.6rem, 4.6vw, 5.2rem);
  margin: clamp(0.5rem, 3vw, 2.5rem) 0 0;
  max-width: 13ch;
}

.cards-block-holder {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 8rem);
}

.arg-card {
  align-items: center;
  background: linear-gradient(73deg, #7af7f7 10.27%, #83f582 91.46%);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 8px 0 var(--ink);
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.05fr);
  min-height: clamp(300px, 30vw, 440px);
  padding: clamp(1.8rem, 2.6vw, 3.2rem) clamp(1.8rem, 2.8vw, 3.4rem);
  position: relative;
}

.arg-card--01 {
  transform: rotate(1.4deg);
}

.arg-card--02 {
  background: linear-gradient(221deg, #fd97fd -1.12%, #fdad70 103%);
  transform: rotate(-1.4deg);
}

.arg-card-number {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 900;
  height: 62px;
  justify-content: center;
  left: clamp(-30px, -2vw, -18px);
  position: absolute;
  top: clamp(16px, 2vw, 32px);
  width: 62px;
  z-index: 3;
}

.arg-card-visual {
  align-items: center;
  align-self: center;
  display: flex;
  height: 100%;
  justify-content: center;
}

.arg-card-visual img {
  display: block;
  height: auto;
  max-height: clamp(220px, 25vw, 370px);
  max-width: 100%;
  width: auto;
}

.arg-card-content h3 {
  font-size: clamp(1.7rem, 2.3vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.9;
  margin: 0 0 1.3rem;
  text-transform: uppercase;
}

.arg-card-content p {
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

/* Desktop scroll-hijack (added by app.js setupCardStack on wide screens):
   the section grows tall, the heading + first card pin in the viewport while
   the second card rises up and stacks over the first — mirrors the compiled
   GSAP pin. app.js drives each card's transform + opacity from scroll. */
.cards-stack-on #arguments {
  min-height: 220vh;
  overflow: visible;
  padding-bottom: 0;
  padding-top: 0;
}

.cards-stack-on #arguments .cards-block {
  align-items: center;
  margin: 0 auto;
  min-height: 100vh;
  position: sticky;
  top: 0;
}

.cards-stack-on .cards-block-title {
  margin: 0;
}

.cards-stack-on .cards-block-holder {
  display: block;
  height: clamp(440px, 62vh, 660px);
  position: relative;
}

.cards-stack-on .arg-card {
  left: 50%;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  transition: none;
  width: min(100%, 780px);
  will-change: transform, opacity;
}

.cards-stack-on .arg-card--02 {
  z-index: 2;
}

/* Yellow "noodle" chapter wipe -----------------------------------------
   A fixed full-viewport clip layer hosting the compiled "wipe transition_2"
   Lottie. app.js scrubs the animation to scroll so the yellow noodles sweep up,
   cover the screen between the puzzle and the argument cards, then recede to
   reveal card 1. The end frames are transparent, so at rest the layer shows
   nothing. z-index sits above section content (<=7) but below the fixed chrome
   (nav 40, header 50), mirroring the FAQ pill staying on top in the source. */
.chapter-wipe {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden; /* shown by app.js once the Lottie has loaded */
}

.chapter-wipe.is-ready {
  visibility: visible;
}

.chapter-wipe__lottie {
  position: absolute;
  top: 0;
  left: -0.5vw;
  width: 101vw; /* slight overscan so the slice-fit never shows a viewport edge */
  height: 100%;
}

.chapter-wipe__lottie svg {
  height: 100% !important;
  object-fit: cover;
  width: 100% !important;
}

.comparison,
.coverage {
  padding: 7rem var(--page-pad);
  text-align: center;
}

.center-label {
  text-align: center;
}

/* ===== FAQ — scroll-through question blocks (matches the compiled site) ===== */
.faq-section {
  padding: 0 var(--page-pad);
}

/* Each block is a tall scroll track; its inner pin sticks at viewport center,
   so the headline animates in and then "holds" while you keep scrolling — the
   tactactac weight from the compiled site. */
.faq-block {
  min-height: 185vh;
  position: relative;
}

.faq-block--last {
  min-height: 125vh;
}

.faq-block__pin {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 10vh 0;
  position: sticky;
  text-align: center;
  top: 0;
}

.faq-block__eyebrow {
  font-size: clamp(1rem, 0.26vw + 0.94rem, 1.25rem);
  font-weight: 500;
  margin: 0 0 clamp(1.6rem, 1vw + 1.2rem, 2.2rem);
}

.faq-block__title {
  font-size: clamp(2.9375rem, 3.43vw + 2.13rem, 6.25rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  text-transform: uppercase;
}

.faq-line {
  display: block;
}

.faq-box {
  display: inline-block;
  isolation: isolate;
  padding: 0 0.28em;
  position: relative;
}

.faq-box::before {
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  content: "";
  inset: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
  z-index: -1;
}

.faq-box--green::before {
  background: #83f582;
}

.faq-box--pink::before {
  background: #fd74fd;
}

.faq-box--blue::before {
  background: #7af7f7;
}

.faq-block__art {
  aspect-ratio: 1 / 1;
  margin-top: clamp(-2.5rem, -2vw, -1rem);
  width: clamp(190px, 22vw, 320px);
}

.faq-block__art svg {
  display: block;
  height: auto;
  width: 100%;
}

/* per-block answer button — shown on mobile (desktop uses the fixed pill) */
.faq-block__answer {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: none;
  gap: 0.8rem;
  margin-top: 1.8rem;
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
}

.faq-block__answer span:first-child {
  font-weight: 600;
}

/* fixed desktop "On a la réponse" pill — fades in while the FAQ is in view */
.faq-answer-pill {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: none;
  gap: 0.8rem;
  opacity: 0;
  padding: 0.7rem 0.7rem 0.7rem 1.4rem;
  pointer-events: none;
  position: fixed;
  right: clamp(20px, 1.6vw, 28px);
  top: 50%;
  transform: translate(24px, -50%);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  z-index: 55;
}

.faq-answer-pill span:first-child {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .faq-answer-pill {
    display: flex;
  }

  .faq-answer-pill.is-shown {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
  }
}

@media (max-width: 1023px) {
  .faq-block__answer {
    display: inline-flex;
  }
}

/* reveal: the block container stays put; its children stagger in once the
   block lands at center (setupFaqPin adds .is-visible) */
.faq-block__eyebrow,
.faq-block__title .faq-line,
.faq-block__answer {
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-block__art {
  opacity: 0;
  transform: translateY(1rem) scale(0.92);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-block.is-visible .faq-block__eyebrow,
.faq-block.is-visible .faq-block__title .faq-line,
.faq-block.is-visible .faq-block__art,
.faq-block.is-visible .faq-block__answer {
  opacity: 1;
  transform: none;
}

.faq-block.is-visible .faq-box::before {
  transform: scaleX(1);
}

.faq-block.is-visible .faq-block__title .faq-line:nth-child(1) {
  transition-delay: 0.08s;
}

.faq-block.is-visible .faq-block__title .faq-line:nth-child(2) {
  transition-delay: 0.16s;
}

.faq-block.is-visible .faq-block__title .faq-line:nth-child(3) {
  transition-delay: 0.24s;
}

.faq-block.is-visible .faq-block__art {
  transition-delay: 0.3s;
}

.comparison {
  padding-top: 3rem;
}

.comparison-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 970px;
}

.comparison-table {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 8px 0 var(--ink);
  margin: 3rem auto 0;
  max-width: 920px;
  overflow: hidden;
  text-align: left;
}

.comparison-row {
  align-items: center;
  border-top: 1px solid #e3e3dc;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.1fr 1fr 1fr;
  min-height: 58px;
  padding: 0.9rem 1.6rem;
}

.comparison-row:first-child {
  border-top: 0;
}

.comparison-row--head {
  background: var(--navy);
  color: white;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.comparison-row strong {
  font-weight: 900;
}

.comparison-row span:nth-child(2) {
  color: #8a93a0;
  text-align: center;
}

.comparison-row span:nth-child(3) {
  color: var(--green-dark);
  font-weight: 900;
  text-align: center;
}

.coverage {
  padding-top: 3rem;
}

.coverage-panel {
  background: var(--white);
  border: var(--line);
  border-radius: 6px;
  margin: 0 auto;
  max-width: 1320px;
  padding: clamp(3rem, 5vw, 6rem) var(--page-pad);
}

.coverage-panel .center-label {
  align-items: center;
  display: flex;
  justify-content: center;
}

.coverage-panel h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 820px;
}

.coverage-panel p:last-child {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.chip-cloud,
.badge-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin: 1rem auto 0;
  max-width: 900px;
}

.chip-cloud span {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  font-weight: 900;
  padding: 0.55rem 1rem;
}

.chip-cloud .chip-dark {
  background: var(--navy);
  color: white;
}

.badge-cloud {
  margin-top: 2rem;
}

.badge-cloud span {
  align-items: center;
  background: #eef7f1;
  border: 1px solid #b6e0c6;
  border-radius: 9px;
  color: #2a6e4d;
  display: inline-flex;
  font-weight: 900;
  gap: 0.55rem;
  padding: 0.65rem 0.95rem;
}

.badge-cloud i {
  background: var(--green);
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.pricing {
  overflow: hidden;
  padding: 7rem var(--page-pad) 8rem;
  text-align: center;
}

.pricing-title {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.pricing-sub {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  margin: 0 auto;
  max-width: 620px;
}

.plan-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 10px 0 var(--ink);
  margin: 3rem auto 0;
  max-width: 760px;
  padding: clamp(2rem, 4vw, 3.4rem);
  text-align: center;
}

.plan-card__head {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.plan-toggle {
  background: #eef1ec;
  border: var(--line);
  border-radius: 999px;
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.35rem;
}

.plan-toggle__opt {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.plan-toggle__opt.is-active {
  background: var(--ink);
  color: var(--white);
}

.plan-save {
  background: #d7f5de;
  border-radius: 999px;
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0.15rem 0.45rem;
}

.plan-toggle__opt.is-active .plan-save {
  background: var(--mint);
  color: var(--navy);
}

.plan-price {
  align-items: baseline;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1.9rem;
}

.plan-amount {
  font-size: clamp(3.6rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.plan-per {
  color: #5a6f88;
  font-size: 1.2rem;
  font-weight: 900;
}

.plan-note {
  color: #5a6f88;
  font-weight: 700;
  margin: 0.6rem 0 0;
  min-height: 1.2em;
}

.plan-cta {
  align-items: center;
  background: var(--ember);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  display: inline-flex;
  font-size: 1.15rem;
  font-weight: 900;
  gap: 0.9rem;
  margin: 1.9rem auto 0;
  padding: 0.7rem 0.7rem 0.7rem 1.7rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.plan-cta:hover {
  box-shadow: 0 4px 0 var(--ink);
  transform: translateY(3px);
}

.plan-cta .round-icon {
  background: var(--white);
}

/* secondary "talk to a human" action under the trial CTA — quieter white pill so
   it offers a lower-commitment path without competing with the ember button */
.plan-call {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  font-size: 1.02rem;
  font-weight: 900;
  gap: 0.6rem;
  margin: 1rem auto 0;
  padding: 0.72rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.plan-call:hover {
  box-shadow: 0 2px 0 var(--ink);
  transform: translateY(2px);
}

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

.plan-call__icon svg {
  display: block;
}

/* "test it in parallel, no risk" reassurance card under the plan card — white
   pastille on the mint pricing band so it reads as a confident closing note */
.trial-pitch {
  background: var(--white);
  border: var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 0 var(--ink);
  margin: clamp(2.4rem, 4vw, 3.4rem) auto 0;
  max-width: 760px;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.5rem, 3.5vw, 3rem);
  text-align: center;
}

.trial-pitch__eyebrow {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 0.5rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.85rem;
  text-transform: uppercase;
}

.trial-pitch__body {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.42;
  margin: 0 auto;
  max-width: 60ch;
}

.plan-fineprint {
  color: #5a6f88;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0.95rem 0 0;
}

.plan-features {
  border-top: 1px solid #e3e3dc;
  display: grid;
  gap: 1rem 2.4rem;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 2.3rem 0 0;
  text-align: left;
}

.plan-features li {
  align-items: flex-start;
  display: flex;
  font-size: 1.02rem;
  font-weight: 700;
  gap: 0.7rem;
  line-height: 1.3;
}

.plan-check {
  align-items: center;
  background: var(--green);
  border-radius: 50%;
  color: var(--white);
  display: inline-flex;
  flex: none;
  font-size: 0.8rem;
  height: 24px;
  justify-content: center;
  margin-top: 1px;
  width: 24px;
}

.site-footer {
  padding: 3rem var(--page-pad) 8rem;
  text-align: center;
}

.footer-wordmark {
  display: block;
  height: auto;
  margin: 0 auto;
  width: min(92%, 1180px);
}

.site-footer p {
  font-style: italic;
  font-weight: 500;
  margin: 2rem 0 0;
}

.site-footer p a {
  text-decoration: underline;
}

.bottom-nav,
.floating-faq,
.language-toggle {
  bottom: 28px;
  pointer-events: none;
  position: fixed;
  transition: transform 0.55s cubic-bezier(0.5, 0, 0.2, 1);
  z-index: 60;
}

.floating-faq,
.language-toggle {
  transform: translateY(150px);
}

body.is-scrolled .floating-faq,
body.is-scrolled .language-toggle {
  pointer-events: auto;
  transform: translateY(0);
}

body.is-scrolled .bottom-nav {
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.bottom-nav {
  display: flex;
  gap: clamp(1rem, 2.8vw, 2rem);
  left: 50%;
  padding: 1.1rem 2rem;
  transform: translateX(-50%) translateY(150px);
}

.bottom-nav a {
  font-weight: 900;
  white-space: nowrap;
}

.bottom-nav a:hover {
  text-decoration: underline;
}

.floating-faq {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.8rem;
  left: 30px;
  padding: 0.8rem 0.8rem 0.8rem 1.5rem;
}

.language-toggle {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  right: 24px;
}

.language-toggle a {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-weight: 900;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.language-toggle a.is-active {
  background: var(--yellow);
  border: var(--line);
}

.faq-overlay {
  inset: 0;
  position: fixed;
  z-index: 100;
}

.faq-overlay__backdrop {
  background: rgba(29, 28, 28, 0.35);
  inset: 0;
  position: absolute;
}

.faq-overlay__panel {
  background: var(--white);
  border: 2px solid var(--ink);
  inset: 22px;
  overflow-y: auto;
  padding: clamp(5rem, 10vw, 10rem) var(--page-pad) 6rem;
  position: absolute;
}

.faq-close {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.8rem;
  padding: 0.7rem 0.7rem 0.7rem 1.35rem;
  position: fixed;
  right: 42px;
  top: 42px;
  z-index: 2;
}

.faq-overlay__panel h2 {
  max-width: 950px;
}

.accordion {
  margin-top: 5rem;
}

.accordion-item {
  border-bottom: 1px solid #bbbaba;
}

.accordion-question {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 900;
  justify-content: space-between;
  padding: 1.8rem 0;
  text-align: left;
  width: 100%;
}

.accordion-question .round-icon {
  transition: transform 0.25s ease;
}

.accordion-item.is-open .accordion-question .round-icon {
  transform: rotate(180deg);
}

.accordion-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.accordion-answer > div {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 920px;
  overflow: hidden;
}

.accordion-item.is-open .accordion-answer {
  grid-template-rows: 1fr;
}

.accordion-item.is-open .accordion-answer > div {
  padding-bottom: 2rem;
}

.reveal {
  opacity: 0;
  transition: opacity 0.6s ease, translate 0.6s ease;
  translate: 0 28px;
}

.reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* SplitText-style word stagger on big headings (accent-safe: fade + slide, no clip) */
.reveal.split-ready {
  opacity: 1;
  translate: 0 0;
}

.split-ready .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-ready.is-visible .word {
  opacity: 1;
  transform: none;
}

/* Hero title: line-by-line reveal on load */
.hero-title span.line > span {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-title.is-visible span.line > span {
  opacity: 1;
  transform: none;
}

@keyframes float-left {
  0%,
  100% {
    transform: rotate(-3deg) translateY(0);
  }
  50% {
    transform: rotate(-3deg) translateY(-13px);
  }
}

@keyframes float-right {
  0%,
  100% {
    transform: rotate(3deg) translateY(0);
  }
  50% {
    transform: rotate(3deg) translateY(-15px);
  }
}

@media (max-width: 1080px) {
  .hero-title {
    font-size: clamp(4.5rem, 16vw, 8rem);
  }

  .shift-card {
    width: 250px;
  }

  .shift-card--left {
    bottom: 10%;
  }

  .shift-card--right {
    bottom: 9%;
  }

  .split-grid,
  .cards-block,
  .arg-card {
    grid-template-columns: 1fr;
  }

  /* drop the desktop pin/hold — flow as a normal stacked section */
  .split-section {
    min-height: auto;
    padding-bottom: 6rem;
    padding-top: 6rem;
  }

  .split-pin {
    display: block;
    min-height: 0;
    position: static;
  }

  .cards-block-title {
    margin: 0 0 1.5rem;
    max-width: none;
  }

  .arg-card {
    justify-items: center;
    min-height: auto;
    text-align: center;
  }

  .arg-card--01,
  .arg-card--02 {
    transform: none;
  }

  .arg-card-visual {
    height: auto;
  }

  .arg-card-visual img {
    max-height: clamp(180px, 38vw, 280px);
  }

  .puzzle-visual {
    margin: 0 auto;
    max-width: 460px;
  }
}

@media (max-width: 760px) {
  :root {
    --page-pad: 1.25rem;
  }

  .site-header {
    top: 18px;
  }

  .logo-pill {
    height: 48px;
    padding: 0 18px;
  }

  .logo-pill img {
    width: clamp(118px, 34vw, 140px);
  }

  .hero {
    min-height: 100svh;
    padding-top: 5.5rem;
  }

  .hero-title {
    font-size: clamp(2.5rem, 13vw, 5rem);
  }

  .trial-sticker {
    right: 7%;
    top: 76px;
    width: 80px;
  }

  .shift-card {
    animation: none;
    border-radius: 11px;
    padding: 0.75rem;
    width: min(212px, 64vw);
  }

  .shift-card strong {
    font-size: 1rem;
  }

  .shift-card__headline {
    font-size: 0.9rem;
  }

  .shift-card p {
    font-size: 0.72rem;
  }

  .shift-card__amount,
  .price-split {
    font-size: 0.78rem;
  }

  .shift-card--left {
    bottom: 178px;
    left: 1rem;
    transform: rotate(-3deg);
  }

  .shift-card--right {
    bottom: 88px;
    left: auto;
    right: 1rem;
    transform: rotate(3deg);
  }

  .scroll-cta {
    display: none;
  }

  .split-section,
  .cards-section,
  .faq-cards,
  .comparison,
  .coverage {
    padding-bottom: 5.5rem;
    padding-top: 5.5rem;
  }

  .manifesto {
    min-height: 165vh;
  }

  .plane--1 {
    width: clamp(300px, 92vw, 460px);
  }

  .plane--2 {
    width: clamp(230px, 72vw, 360px);
  }

  .split-grid {
    gap: 3rem;
  }

  .split-copy h2,
  .section-heading,
  .comparison-title,
  .coverage-panel h2,
  .faq-title,
  .pricing-title,
  .faq-overlay__panel h2 {
    font-size: clamp(2.7rem, 13vw, 4.2rem);
  }

  .faq-block__title {
    font-size: clamp(2rem, 8.7vw, 3.4rem);
  }

  .faq-block {
    min-height: 165vh;
  }

  .faq-block--last {
    min-height: 112vh;
  }

  .faq-block__pin {
    padding: 8vh 0;
  }

  .arg-card {
    gap: 0.6rem;
    padding: 2.6rem 1.4rem 1.9rem;
  }

  .arg-card-number {
    height: 52px;
    left: 1rem;
    top: 1rem;
    width: 52px;
  }

  .comparison-table {
    border-radius: 10px;
  }

  .comparison-row {
    column-gap: 0.5rem;
    font-size: 0.8rem;
    grid-template-columns: 0.8fr 1fr 1fr;
    padding: 0.8rem 0.85rem;
  }

  .coverage-panel {
    padding: 3rem 1rem;
  }

  .plan-features {
    gap: 0.9rem;
    grid-template-columns: 1fr;
  }

  .plan-card {
    padding: 1.6rem 1.2rem;
  }

  .footer-wordmark {
    width: 100%;
  }

  .bottom-nav {
    bottom: 18px;
    gap: 0.6rem;
    justify-content: center;
    max-width: calc(100vw - 1rem);
    overflow: hidden;
    padding: 0.78rem 0.72rem;
    width: calc(100vw - 1rem);
  }

  .bottom-nav a {
    font-size: 0.76rem;
  }

  .floating-faq,
  .language-toggle {
    display: none;
  }

  .faq-overlay__panel {
    inset: 0;
    padding-top: 5.5rem;
  }

  .faq-close {
    right: 1rem;
    top: 1rem;
  }
}

/* ===== Fist-bump section ("Passez à Shift.") — mirrors the compiled fist-bump-section ===== */
.fistbump {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  min-height: 78vh;
  overflow: hidden;
  padding: clamp(4rem, 9vw, 8rem) var(--page-pad);
  position: relative;
  text-align: center;
}

/* lone comic "spark" burst above the headline (the fists were dropped for a cleaner mark) */
.fistbump-burst {
  display: block;
  height: auto;
  pointer-events: none;
  transform: scale(0.4);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  translate: 0 0; /* override the default .reveal slide; this mark only fades + pops */
  width: clamp(6.5rem, 15vw, 10.5rem);
}

.fistbump-burst.is-visible {
  transform: scale(1);
}

.fistbump-title {
  color: var(--ink);
  font-size: clamp(2.9rem, 9vw, 8.125rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.85;
  margin: 0 auto;
  text-transform: uppercase;
}

.fistbump-title.reveal {
  opacity: 1;
  translate: 0 0;
}

.fistbump-title .line {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.fistbump-title.is-visible .line {
  opacity: 1;
  transform: none;
}

.fistbump-title .line:nth-child(1) {
  transition-delay: 0.06s;
}
.fistbump-title .line:nth-child(2) {
  transition-delay: 0.16s;
}
.fistbump-title .line:nth-child(3) {
  transition-delay: 0.26s;
}

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

  .reveal,
  .split-ready .word,
  .manifesto-title .line,
  .fistbump-title .line,
  .hero-title span.line > span,
  .faq-block__eyebrow,
  .faq-block__title .faq-line,
  .faq-block__art,
  .faq-block__answer {
    opacity: 1;
    transform: none;
    translate: 0 0;
  }

  .faq-box::before {
    transform: scaleX(1);
  }

  /* no scroll-scrubbed yellow wipe when motion is reduced */
  .chapter-wipe {
    display: none;
  }

  /* and no puzzle pin/hold — flow as a normal settled section */
  .split-section {
    min-height: auto;
  }

  .split-pin {
    min-height: 0;
    position: static;
  }

  /* keep the spark burst visible (settled) when motion is reduced */
  .fistbump-burst {
    opacity: 1;
    transform: scale(1);
  }

  .hero-lines,
  .hero-stars {
    display: none;
  }
}

/* ===================================================================
   Top-right login button — persistent account chrome on the landing
   page. White pastille with the brand ink border + hard shadow, sitting
   opposite the centered logo. Always visible (the bottom nav only
   appears on scroll), so a returning doctor can sign in from anywhere.
   =================================================================== */
.login-pill {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  font-weight: 900;
  gap: 0.55rem;
  padding: 0.62rem 1.15rem 0.62rem 0.85rem;
  position: fixed;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: 30px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 55;
}

.login-pill:hover {
  box-shadow: 0 2px 0 var(--ink);
  transform: translateY(2px);
}

.login-pill__icon {
  align-items: center;
  background: var(--mint);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.login-pill__icon svg {
  display: block;
}

@media (max-width: 760px) {
  .login-pill {
    font-size: 0.9rem;
    padding: 0.5rem 0.95rem 0.5rem 0.7rem;
    top: 20px;
  }

  .login-pill__icon {
    height: 26px;
    width: 26px;
  }
}

@media (max-width: 400px) {
  /* tight phones: collapse to just the avatar so it never crowds the logo */
  .login-pill span:not(.login-pill__icon) {
    display: none;
  }

  .login-pill {
    padding: 0.45rem;
  }
}

/* ===================================================================
   Auth / form pages (login.html + essai-gratuit.html)
   Shares the landing palette, font, ink borders and hard shadows so the
   account flow feels like one continuous product. Loaded via styles.css;
   small interactions (password reveal, FR/EN, submit feedback) live in
   auth.js.
   =================================================================== */
.auth-page {
  min-height: 100svh;
  position: relative;
}

/* fixed top bar: logo (home) on the left, back-to-site + language on the right */
.auth-header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  left: 0;
  padding: clamp(1rem, 3vw, 1.6rem) var(--page-pad);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.auth-logo img {
  display: block;
  width: clamp(118px, 12vw, 150px);
}

.auth-header__right {
  align-items: center;
  display: flex;
  gap: 0.7rem;
}

.auth-back {
  align-items: center;
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 900;
  gap: 0.45rem;
  padding: 0.58rem 1.05rem 0.58rem 0.85rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-back:hover {
  box-shadow: 0 2px 0 var(--ink);
  transform: translateY(2px);
}

.auth-back .chev {
  font-size: 1.15em;
  line-height: 1;
}

.lang-switch {
  background: var(--white);
  border: var(--line);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.28rem;
}

.lang-switch a {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 900;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.lang-switch a.is-active {
  background: var(--yellow);
  border: var(--line);
}

/* the centered stage that holds the card / split */
.auth-main {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(6.5rem, 13vh, 9.5rem) var(--page-pad) clamp(3rem, 6vh, 5rem);
  position: relative;
}

/* drifting 4-point sparkles behind the card (pure CSS, paused under reduced motion) */
.auth-deco {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.auth-spark {
  animation: auth-twinkle 5.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 0 C54 31 69 46 100 50 C69 54 54 69 50 100 C46 69 31 54 0 50 C31 46 46 31 50 0 Z" fill="%23fffefb"/></svg>') center / contain no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
  height: var(--s, 34px);
  opacity: 0;
  position: absolute;
  width: var(--s, 34px);
}

@keyframes auth-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  45% { opacity: 0.9; transform: scale(1) rotate(35deg); }
  70% { opacity: 0.5; transform: scale(0.9) rotate(70deg); }
}

/* shared card surface */
.auth-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 12px 0 var(--ink);
  padding: clamp(1.85rem, 4vw, 3rem);
  position: relative;
  width: 100%;
  z-index: 2;
}

/* login.html: a single centered card */
.auth-card--solo {
  margin: 0 auto;
  max-width: 470px;
}

.auth-eyebrow {
  align-items: center;
  background: var(--mint-soft);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  gap: 0.5rem;
  letter-spacing: 0.04em;
  margin: 0 0 1.4rem;
  padding: 0.35rem 0.85rem;
  text-transform: uppercase;
}

.auth-eyebrow i {
  background: var(--green);
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.auth-title {
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.92;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.auth-sub {
  color: #5a6f88;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.38;
  margin: 0 0 2rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field > label {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 0.9rem 1.05rem;
  transition: box-shadow 0.15s ease;
  width: 100%;
}

.field textarea {
  line-height: 1.4;
  min-height: 96px;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none"><path d="M1 1l6 6 6-6" stroke="%231d1c1c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: right 1.1rem center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-right: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9aa6b2;
  font-weight: 600;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  box-shadow: 0 0 0 3px var(--mint);
  outline: none;
}

.input-wrap {
  position: relative;
}

.input-wrap input {
  padding-right: 3.4rem;
}

.pw-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--green-dark);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: 0.4rem;
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}

.pw-toggle svg {
  display: block;
}

.auth-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
}

.auth-check {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.5rem;
}

.auth-check input {
  accent-color: var(--green);
  height: 17px;
  width: 17px;
}

.auth-link {
  color: var(--green-dark);
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-link:hover {
  color: var(--ink);
}

/* primary action — the ember pill, shared by both pages */
.btn-primary {
  align-items: center;
  background: var(--ember);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font-size: 1.12rem;
  font-weight: 900;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 0.5rem;
  padding: 1rem 1.4rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.btn-primary:hover {
  box-shadow: 0 4px 0 var(--ink);
  transform: translateY(3px);
}

.btn-primary[disabled] {
  cursor: default;
  opacity: 0.85;
}

.btn-primary .round-icon {
  background: var(--white);
}

.auth-divider {
  align-items: center;
  color: #8a93a0;
  display: flex;
  font-size: 0.76rem;
  font-weight: 900;
  gap: 0.9rem;
  letter-spacing: 0.06em;
  margin: 1.5rem 0;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  background: #dfe3dd;
  content: "";
  flex: 1;
  height: 1.5px;
}

.auth-alt {
  color: #5a6f88;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

/* when the alt line follows the form directly (signup card), give it room so it
   clears the submit button's hard shadow instead of crowding the rounded corner */
.auth-form + .auth-alt {
  margin-top: 1.6rem;
}

/* a second alt line stacked under the first (e.g. book-a-call + sign-in) */
.auth-alt--tight {
  font-size: 0.92rem;
  margin-top: 0.55rem;
}

.auth-alt a {
  color: var(--green-dark);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* live submit feedback (no backend yet) */
.auth-feedback {
  align-items: center;
  background: var(--mint-soft);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  display: none;
  font-weight: 800;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
}

.auth-feedback.is-shown {
  display: flex;
}

/* error variant of the submit feedback (failed login / signup) */
.auth-feedback--error {
  background: #ffe1d6;
}

.auth-feedback--error .round-icon {
  background: var(--ember);
}

/* gated account page (compte.html) */
.account-loading {
  color: rgba(29, 28, 28, 0.6);
  font-weight: 800;
  position: relative;
  text-align: center;
  z-index: 2;
}

.account-hello {
  margin-bottom: 0.75rem;
}

/* "what's ready / what's next" roadmap — makes the empty state feel intentional
   and exciting instead of bare. Done items get a filled green check; upcoming
   items a quiet outlined arrow. */
.account-status {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  text-align: left;
}

.account-status li {
  align-items: center;
  display: flex;
  font-size: 1.02rem;
  font-weight: 800;
  gap: 0.75rem;
}

.account-status__dot {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-size: 0.82rem;
  font-weight: 900;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.account-status li.is-done .account-status__dot {
  background: var(--green);
  color: var(--white);
}

.account-status li.is-next {
  color: rgba(29, 28, 28, 0.5);
}

.account-status li.is-next .account-status__dot {
  background: var(--white);
  border: 1.5px solid currentColor;
}

/* quiet footer row: who's signed in + an unobtrusive sign-out (the hero action
   is the forward-looking CTA above, not "log out") */
.account-foot {
  align-items: center;
  border-top: 1px solid #e3e3dc;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
}

.account-foot__email {
  color: #5a6f88;
  font-size: 0.85rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-foot .auth-link {
  flex: none;
}

.auth-feedback .round-icon {
  background: var(--green);
  border-color: var(--ink);
  color: var(--white);
  flex: none;
  height: 28px;
  width: 28px;
}

.auth-trust {
  align-items: center;
  color: #5a6f88;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  font-weight: 800;
  gap: 0.45rem 1.1rem;
  justify-content: center;
  margin-top: 1.6rem;
}

.auth-trust span {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.auth-trust i {
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  width: 8px;
}

/* essai-gratuit.html: value column on the left, signup card on the right */
.auth-split {
  align-items: center;
  display: grid;
  gap: clamp(2.25rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1180px;
  position: relative;
  width: 100%;
  z-index: 2;
}

.auth-split .auth-card {
  max-width: 540px;
}

.auth-value {
  max-width: 540px;
}

.auth-headline {
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.9;
  margin: 1.2rem 0 1.1rem;
  text-transform: uppercase;
}

.auth-value p.auth-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1.9rem;
  max-width: 46ch;
}

.auth-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.auth-benefits li {
  align-items: flex-start;
  display: flex;
  font-size: 1.05rem;
  font-weight: 800;
  gap: 0.7rem;
  line-height: 1.3;
}

.auth-benefits .plan-check {
  margin-top: 1px;
}

.auth-pricetag {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.auth-pricetag strong {
  font-size: 1.9rem;
  font-weight: 900;
}

.auth-pricetag span {
  color: rgba(29, 28, 28, 0.62);
  font-weight: 800;
}

/* playful trial sticker pinned to the signup card */
.auth-card__sticker {
  position: absolute;
  right: clamp(-14px, -1vw, -6px);
  top: clamp(-30px, -3vw, -18px);
  transform: rotate(9deg);
  width: clamp(78px, 8vw, 104px);
  z-index: 4;
}

@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
    max-width: 480px;
    text-align: center;
  }

  .auth-value {
    margin: 0 auto;
  }

  .auth-value p.auth-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .auth-benefits {
    margin: 0 auto;
    max-width: 360px;
    text-align: left;
  }

  .auth-pricetag {
    justify-content: center;
  }

  .auth-split .auth-card {
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .auth-back span:not(.chev) {
    display: none;
  }

  .auth-back {
    padding: 0.55rem 0.7rem;
  }

  .auth-card__sticker {
    width: 74px;
  }
}

/* ===================================================================
   Dashboard (tableau.html) + mobile capture (capture.html)
   Dead-simple working surfaces, same ink/cream/mint system as the site.
   =================================================================== */
.dash-page {
  background: #eafaf0;
  color: var(--ink);
  min-height: 100svh;
}

.dash-header {
  align-items: center;
  background: rgba(234, 250, 240, 0.92);
  border-bottom: 1.5px solid var(--ink);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem var(--page-pad);
  position: sticky;
  top: 0;
  z-index: 40;
}

.dash-header__brand img {
  display: block;
  width: clamp(104px, 11vw, 130px);
}

.dash-header__right {
  align-items: center;
  display: flex;
  gap: 0.9rem;
}

.dash-hello {
  font-size: 0.95rem;
  font-weight: 900;
}

.dash-hello span {
  color: #5a6f88;
}

.dash-main {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(1.4rem, 3vw, 2.4rem) var(--page-pad) 5rem;
}

.dash-grid {
  align-items: start;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

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

.panel {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 8px 0 var(--ink);
  padding: clamp(1.3rem, 2.5vw, 2rem);
}

.panel + .panel { margin-top: 0; }

.panel__head {
  align-items: baseline;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}

.panel__title {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}

.panel__hint {
  color: #5a6f88;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0.2rem 0 0;
}

.panel__refresh {
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-weight: 900;
  font-size: 0.82rem;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
}
.panel__refresh:hover { box-shadow: 0 1px 0 var(--ink); transform: translateY(2px); }

/* ---- RAMQ authorization ---- */
.ramq-fields {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 540px) { .ramq-fields { grid-template-columns: 1fr; } }
.ramq-fields .field--wide { grid-column: 1 / -1; }

.ramq-agree {
  align-items: flex-start;
  background: #f4fbf6;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  display: flex;
  font-size: 0.9rem;
  font-weight: 700;
  gap: 0.6rem;
  line-height: 1.35;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
}
.ramq-agree input { accent-color: var(--green); height: 18px; margin-top: 2px; width: 18px; flex: none; }

.ramq-done {
  align-items: center;
  color: var(--green-dark);
  display: flex;
  font-weight: 900;
  gap: 0.6rem;
}
.ramq-done .account-status__dot { background: var(--green); color: var(--white); }
.ramq-done button {
  background: none; border: 0; color: #5a6f88; cursor: pointer;
  font-weight: 900; font-size: 0.82rem; margin-left: auto; text-decoration: underline;
}

/* ---- Dropzone + pile ---- */
.dropzone {
  background: #f4fbf6;
  border: 2px dashed var(--ink);
  border-radius: 14px;
  cursor: pointer;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dropzone.is-over { background: var(--mint-soft); transform: translateY(-2px); }
.dropzone input[type="file"] { display: none; }
.dropzone__plus {
  align-items: center;
  background: var(--mint);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.dropzone__title { font-size: 1.05rem; font-weight: 900; margin: 0.7rem 0 0.2rem; }
.dropzone__sub { color: #5a6f88; font-size: 0.85rem; font-weight: 700; margin: 0; }

.dz-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; }
.dz-btn {
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-weight: 900;
  font-size: 0.85rem;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
}
.dz-btn:hover { box-shadow: 0 1px 0 var(--ink); transform: translateY(2px); }

.pile { display: flex; flex-direction: column; gap: 0.6rem; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.pile__empty { color: #8a93a0; font-weight: 700; padding: 1.2rem 0; text-align: center; }
.pile__item {
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 0.8rem;
  padding: 0.55rem 0.75rem;
}
.pile__item.is-selected { background: var(--mint-soft); }
.pile__check { accent-color: var(--green); flex: none; height: 18px; width: 18px; pointer-events: none; }
.pile__thumb {
  align-items: center;
  background: #eef1ec;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  display: flex;
  flex: none;
  font-size: 1.1rem;
  height: 42px;
  justify-content: center;
  object-fit: cover;
  overflow: hidden;
  width: 42px;
}
.pile__thumb img { height: 100%; object-fit: cover; width: 100%; }
.pile__meta { flex: 1; min-width: 0; }
.pile__name { font-size: 0.92rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pile__sub { color: #8a93a0; font-size: 0.74rem; font-weight: 700; }
.pile__badge {
  background: var(--mint-soft); border-radius: 999px; color: var(--green-dark);
  font-size: 0.66rem; font-weight: 900; padding: 0.1rem 0.45rem; text-transform: uppercase;
}
.pile__del { background: none; border: 0; color: #c95a36; cursor: pointer; flex: none; font-size: 1.1rem; font-weight: 900; padding: 0 0.3rem; }

.facturer-bar { display: flex; justify-content: flex-end; margin-top: 1.2rem; }
.facturer-btn {
  align-items: center;
  background: var(--ember);
  border: var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  cursor: pointer;
  display: inline-flex;
  font-size: 1.05rem;
  font-weight: 900;
  gap: 0.8rem;
  padding: 0.8rem 1rem 0.8rem 1.5rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.facturer-btn:hover { box-shadow: 0 4px 0 var(--ink); transform: translateY(3px); }
.facturer-btn:disabled { background: #e7eae4; box-shadow: 0 4px 0 #c8cdc4; color: #9aa6b2; cursor: default; transform: none; }
.facturer-btn .round-icon { background: var(--white); }

/* ---- QR phone capture ---- */
.qr-block { align-items: center; border-top: 1px solid #e3e3dc; display: flex; gap: 1rem; margin-top: 1.4rem; padding-top: 1.3rem; }
.qr-canvas { background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; flex: none; height: 104px; padding: 6px; width: 104px; }
.qr-text strong { display: block; font-size: 0.98rem; font-weight: 900; }
.qr-text span { color: #5a6f88; font-size: 0.84rem; font-weight: 700; }

/* ---- Claims board ---- */
.board { display: flex; flex-direction: column; gap: 1.2rem; }
.board__group-head { align-items: center; display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.board__group-title { font-size: 0.82rem; font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; }
.board__count { background: var(--ink); border-radius: 999px; color: var(--white); font-size: 0.72rem; font-weight: 900; min-width: 22px; padding: 0.1rem 0.4rem; text-align: center; }
.board__empty { color: #8a93a0; font-size: 0.85rem; font-weight: 700; padding: 0.3rem 0 0.6rem; }
.claim {
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
  padding: 0.7rem 0.9rem;
}
.claim__main { flex: 1; min-width: 0; }
.claim__label { font-size: 0.95rem; font-weight: 900; }
.claim__meta { color: #8a93a0; font-size: 0.76rem; font-weight: 700; }
.claim__pill { border: 1.5px solid var(--ink); border-radius: 999px; flex: none; font-size: 0.72rem; font-weight: 900; padding: 0.25rem 0.6rem; text-transform: uppercase; }
.claim__pill--processing { background: var(--yellow); }
.claim__pill--awaiting_ramq { background: #7af7f7; }
.claim__pill--paid { background: var(--green); color: var(--white); }
.claim__pill--failed { background: var(--ember); }

/* ---- Mobile capture page ---- */
.capture-main {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 2rem var(--page-pad) 3rem;
  text-align: center;
}
.capture-card {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 10px 0 var(--ink);
  max-width: 460px;
  padding: clamp(1.6rem, 5vw, 2.4rem);
  width: 100%;
}
.capture-shot {
  align-items: center;
  background: var(--ember);
  border: var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
  font-weight: 900;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
  padding: 1.8rem 1rem;
  width: 100%;
}
.capture-shot input { display: none; }
.capture-shot__cam {
  align-items: center; background: var(--white); border: 1.5px solid var(--ink);
  border-radius: 50%; display: inline-flex; height: 56px; justify-content: center; width: 56px;
}
.capture-sent { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.4rem; text-align: left; }
.capture-sent__item {
  align-items: center; background: #f4fbf6; border: 1.5px solid var(--ink); border-radius: 10px;
  display: flex; font-weight: 800; gap: 0.6rem; padding: 0.55rem 0.8rem;
}
.capture-sent__item .account-status__dot { background: var(--green); color: var(--white); flex: none; }
.capture-note { color: #5a6f88; font-size: 0.85rem; font-weight: 700; margin-top: 1.2rem; }

/* dashboard layout fixes: labels/spans that must stack, not run inline */
.dropzone { display: block; }
.pile__name, .pile__sub { display: block; }
.pile__sub { margin-top: 1px; }
.claim__label, .claim__meta { display: block; }
.claim__meta { margin-top: 2px; }

/* center + tidy the dashboard QR (qrcodejs injects a canvas + img into the box) */
.qr-canvas {
  align-items: center;
  background: var(--white);
  border-radius: 12px;
  display: flex;
  height: 112px;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  width: 112px;
}
.qr-canvas canvas, .qr-canvas img { display: block; height: auto; }

/* ---- account mode banner / go-live / trial ---- */
.status-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.mode-badge {
  align-items: center;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  gap: 0.45rem;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.9rem;
  text-transform: uppercase;
}
.mode-badge__dot { background: var(--ink); border-radius: 50%; height: 8px; width: 8px; }
.trial-left { color: #5a6f88; font-size: 0.92rem; font-weight: 800; }
.trial-left strong { color: var(--ink); font-weight: 900; }

.golive-head {
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0.85rem;
  text-transform: uppercase;
}
.golive-head:first-child { margin-top: 0.3rem; }
.golive-note { color: #5a6f88; font-size: 0.8rem; font-weight: 700; margin: 0.7rem 0 0; }

.board-test-note {
  background: #fff8d6;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0 0 1.1rem;
  padding: 0.6rem 0.85rem;
}

/* crisp QR: rendered at 2x, displayed at a fixed CSS size */
.qr-canvas canvas, .qr-canvas img { display: block; height: 92px !important; width: 92px !important; }

/* ---- go-live plan chooser ---- */
.plan-choices {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  margin: 1.2rem 0 1.4rem;
}
@media (max-width: 540px) { .plan-choices { grid-template-columns: 1fr; } }
.plan-choice {
  align-items: flex-start;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 6px 0 var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.2rem 1.3rem;
  position: relative;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-choice:hover { box-shadow: 0 3px 0 var(--ink); transform: translateY(3px); }
.plan-choice--best { background: var(--mint-soft); }
.plan-choice__tag {
  background: var(--ember);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  padding: 0.12rem 0.5rem;
  position: absolute;
  right: 14px;
  top: -11px;
}
.plan-choice__name { color: #5a6f88; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.plan-choice__price { font-size: 1.95rem; font-weight: 900; line-height: 1; }
.plan-choice__price small { color: #5a6f88; font-size: 0.9rem; font-weight: 800; }
.plan-choice__note { color: #5a6f88; font-size: 0.82rem; font-weight: 700; margin-top: 0.2rem; }

/* ---- États de compte RAMQ ---- */
.statements { display: flex; flex-direction: column; gap: 0.6rem; }
.statements__empty { color: #8a93a0; font-weight: 700; padding: 1.1rem 0; text-align: center; }
.statement {
  align-items: center;
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  padding: 0.8rem 1rem;
}
.statement__main { flex: 1; min-width: 0; }
.statement__period { display: block; font-size: 0.98rem; font-weight: 900; }
.statement__meta { color: #8a93a0; display: block; font-size: 0.78rem; font-weight: 700; margin-top: 2px; }
.statement__amount { color: var(--green-dark); flex: none; font-size: 1.1rem; font-weight: 900; white-space: nowrap; }
.statement__view {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  flex: none;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0.42rem 0.9rem;
}
.statement__view:hover { box-shadow: 0 1px 0 var(--ink); transform: translateY(2px); }

/* ---- États de compte: expandable cards + per-claim breakdown ---- */
.statement-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; }
.statement {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
.statement:hover { background: #f4fbf6; }
.statement__chev { color: #8a93a0; flex: none; font-size: 0.85rem; transition: transform 0.18s ease; }
.statement[aria-expanded="true"] .statement__chev { transform: rotate(180deg); }
.statement__detail { border-top: 1.5px solid #e3e3dc; padding: 0.3rem 1rem 0.85rem; }
.stmt-loading { color: #8a93a0; font-weight: 700; padding: 0.8rem 0; text-align: center; }
.stmt-lines { display: flex; flex-direction: column; }
.stmt-line { align-items: center; border-bottom: 1px solid #eef1ec; display: flex; gap: 0.8rem; padding: 0.6rem 0; }
.stmt-line:last-child { border-bottom: 0; }
.stmt-line__desc { flex: 1; font-size: 0.9rem; font-weight: 800; min-width: 0; }
.stmt-line__desc small { color: #8a93a0; display: block; font-size: 0.73rem; font-weight: 700; margin-top: 1px; }
.stmt-line__amt { flex: none; font-size: 0.92rem; font-weight: 900; white-space: nowrap; }
.stmt-line__amt--off { color: #8a93a0; }
.stmt-line__amt--off s { color: #c0c6cc; margin-right: 0.25rem; }
.stmt-line__pill { border: 1.5px solid var(--ink); border-radius: 999px; flex: none; font-size: 0.66rem; font-weight: 900; padding: 0.12rem 0.5rem; text-transform: uppercase; }
.stmt-line__pill--paid { background: var(--green); color: var(--white); }
.stmt-line__pill--rejected { background: var(--ember); }
.stmt-line__pill--adjusted { background: var(--yellow); }
.stmt-lines__foot { align-items: center; color: #8a93a0; display: flex; flex-wrap: wrap; font-size: 0.8rem; font-weight: 800; gap: 0.6rem; padding-top: 0.85rem; }

/* ---- claims: expandable cards with the AI-extracted RAMQ réclamation ---- */
.claim-card { background: var(--white); border: 1.5px solid var(--ink); border-radius: 12px; margin-bottom: 0.55rem; overflow: hidden; }
.claim { background: transparent; border: 0; border-radius: 0; cursor: pointer; margin-bottom: 0; }
.claim:hover { background: #f4fbf6; }
.claim__amount { color: var(--green-dark); flex: none; font-size: 0.95rem; font-weight: 900; white-space: nowrap; }
.claim__act { color: #5a6f88; font-weight: 700; }
.claim[aria-expanded="true"] .statement__chev { transform: rotate(180deg); }
.claim__detail { border-top: 1.5px solid #e3e3dc; padding: 0.75rem 0.9rem 0.85rem; }
.claim-fields { display: grid; gap: 0.35rem 0.9rem; grid-template-columns: auto 1fr; margin: 0; }
.claim-fields dt { color: #8a93a0; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.claim-fields dd { font-size: 0.85rem; font-weight: 800; margin: 0; }
.claim-conf {
  align-items: center;
  color: var(--green-dark);
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 800;
  gap: 0.35rem;
  margin-top: 0.8rem;
}

/* ---- RAMQ guardrail check on a claim ---- */
.claim-check { border-radius: 8px; font-size: 0.78rem; font-weight: 800; margin-top: 0.6rem; padding: 0.45rem 0.65rem; }
.claim-check--ok { background: var(--mint-soft); color: var(--green-dark); }
.claim-check--warn { background: #fff1d6; color: #9a5b00; }

/* ---- Approve-all bar above the board ---- */
.board__approvebar {
  align-items: center;
  background: var(--mint-soft);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--ink);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
}
.board__approvebar-txt { font-size: 0.86rem; font-weight: 800; }
.board__approveall {
  background: var(--green); border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink); color: var(--white); cursor: pointer; flex: none;
  font-size: 0.82rem; font-weight: 900; padding: 0.45rem 0.95rem; transition: transform .08s, box-shadow .08s;
}
.board__approveall:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.board__approveall:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---- Approval badge on the claim row ---- */
.claim__appr { border-radius: 999px; flex: none; font-size: 0.68rem; font-weight: 900; padding: 0.22rem 0.55rem; text-transform: uppercase; white-space: nowrap; }
.claim__appr--pending { background: #fff1d6; color: #9a5b00; border: 1.5px solid #e6b800; }
.claim__appr--ok { background: var(--green); color: var(--white); border: 1.5px solid var(--ink); }

/* ---- Section heading inside a claim detail ---- */
.claim-sec__h { color: #8a93a0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; margin: 0.9rem 0 0.35rem; text-transform: uppercase; }

/* ---- AI reasoning ---- */
.claim-reason { background: #f7f6f1; border-left: 3px solid var(--green); border-radius: 6px; padding: 0.5rem 0.7rem; }
.claim-reason p { font-size: 0.85rem; font-weight: 600; line-height: 1.45; margin: 0; }

/* ---- Considered codes (chosen / rejected) ---- */
.claim-considered ul { list-style: none; margin: 0; padding: 0; }
.cons { border-radius: 6px; margin-bottom: 0.35rem; padding: 0.45rem 0.6rem; }
.cons--yes { background: var(--mint-soft); }
.cons--no { background: #f4f4ef; }
.cons__code { display: block; font-size: 0.82rem; font-weight: 900; }
.cons--yes .cons__code { color: var(--green-dark); }
.cons--no .cons__code { color: #7a7a72; }
.cons__reason { display: block; font-size: 0.78rem; font-weight: 600; line-height: 1.4; margin-top: 0.15rem; color: #55554e; }

/* ---- Approve button ---- */
.claim-approve { margin-top: 0.85rem; }
.claim-approve__btn {
  background: var(--green); border: 1.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 3px 0 var(--ink); color: var(--white); cursor: pointer;
  font-size: 0.85rem; font-weight: 900; padding: 0.5rem 1.1rem; transition: transform .08s, box-shadow .08s; width: 100%;
}
.claim-approve__btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.claim-approve__btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.claim-approve--done { background: var(--mint-soft); border-radius: 8px; color: var(--green-dark); font-size: 0.82rem; font-weight: 900; padding: 0.5rem 0.7rem; text-align: center; }

/* ---- Correction chat ---- */
.claim-chat { border-top: 1.5px dashed #d8d8cf; margin-top: 0.95rem; padding-top: 0.4rem; }
.claim-chat__thread { display: flex; flex-direction: column; gap: 0.5rem; max-height: 240px; overflow-y: auto; }
.claim-chat__thread:not(:empty) { margin-bottom: 0.6rem; }
.cmsg { border-radius: 10px; max-width: 88%; padding: 0.45rem 0.65rem; }
.cmsg__who { display: block; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.03em; opacity: 0.6; text-transform: uppercase; }
.cmsg__txt { display: block; font-size: 0.85rem; font-weight: 600; line-height: 1.4; margin-top: 0.1rem; }
.cmsg--doctor { align-self: flex-end; background: var(--ink); color: var(--white); }
.cmsg--agent { align-self: flex-start; background: #f0efe8; color: var(--ink); }
.cmsg--typing .cmsg__txt { opacity: 0.6; font-style: italic; }
.claim-chat__compose { display: flex; gap: 0.5rem; }
.claim-chat__input {
  border: 1.5px solid var(--ink); border-radius: 10px; flex: 1; font-family: inherit;
  font-size: 0.85rem; padding: 0.5rem 0.65rem; resize: vertical;
}
.claim-chat__input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.claim-chat__send {
  align-self: stretch; background: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px;
  color: var(--white); cursor: pointer; flex: none; font-size: 0.82rem; font-weight: 900; padding: 0 0.9rem;
}
.claim-chat__send:disabled { opacity: 0.5; cursor: default; }