@font-face {
  font-family: Geist;
  src: url('/fonts/geist-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url('/fonts/geist-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Geist;
  src: url('/fonts/geist-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Instrument;
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Instrument;
  src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #171815;
  --body: #44453f;
  --muted: #73766d;
  --canvas: #f7f4ec;
  --surface: #fcfbf7;
  --surface-warm: #f1eee5;
  --line: rgba(23, 24, 21, .14);
  --line-strong: rgba(23, 24, 21, .28);
  --lime: #b9ff38;
  --lime-soft: #edffd1;
  --dark: #171916;
  --serif: Instrument, Georgia, serif;
  --hand: 'Bradley Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  --shell: 1280px;
  --gutter: clamp(24px, 6.25vw, 128px);
  --header-height: 84px;
  --section-space: clamp(88px, 8vw, 156px);
  --section-title: clamp(48px, 4.3vw, 78px);
  --section-lead: clamp(18px, 1.5vw, 25px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.section-shell { width: min(var(--shell), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 5;
  width: min(var(--shell), calc(100% - var(--gutter) * 2));
  height: var(--header-height);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; flex: none; align-items: center; gap: 5px; }
.brand img { width: 110px; }
.brand-team { position: relative; align-self: center; margin-top: 1px; color: var(--ink); font: 600 16px/1 Geist, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -.045em; }
.brand-team::after { position: absolute; right: 0; bottom: -4px; left: 0; height: 2px; border-radius: 2px; background: var(--lime); content: ''; }
.main-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); font-size: 14px; }
.main-nav a:hover, .footer-bottom a:hover { text-decoration: underline; text-underline-offset: 4px; }
.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 13px 23px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: #fff; }
.button-dark:hover { background: #30322d; }
.button-lime { background: var(--lime); color: var(--ink); }
.header-cta { min-height: 46px; padding: 11px 20px; white-space: nowrap; }

h1, h2, h3, p { margin-top: 0; }
h2 { font: 400 clamp(42px, 4.3vw, 68px)/.98 var(--serif); letter-spacing: -.035em; margin-bottom: 14px; }
.lead { color: var(--body); font-size: var(--section-lead); line-height: 1.45; margin: 0; }
.hand-note { color: #5c5f56; font: 400 clamp(15px, 1.2vw, 19px)/1.3 var(--hand); letter-spacing: .015em; }

/* Hero: full-bleed atmosphere and one complete first-screen composition. */
.hero.section-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  min-height: max(680px, calc(100svh - var(--header-height)));
  padding: 74px var(--gutter) 92px;
  overflow: hidden;
}
.hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: url('/patterns/topographic-lines.svg') center / cover no-repeat;
  opacity: .9;
  mask-image: radial-gradient(ellipse 73% 81% at center, transparent 34%, rgba(0, 0, 0, .38) 61%, #000 100%);
  transform: scale(1.035);
  animation: contour-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; }
.hero-content > * { animation: hero-rise .8s cubic-bezier(.2,.7,.25,1) both; }
.hero-content > .hero-agents { animation-delay: .08s; }
.hero-content > h1 { animation-delay: .2s; }
.hero-content > .hero-intro { animation-delay: .34s; }
.hero-content > .hero-button { animation-delay: .47s; }
.hero-content > .hero-price { animation-delay: .58s; }
.hero-content > .hero-subprice { animation-delay: .65s; }
.hero h1 { margin: 0 0 22px; font: 400 clamp(62px, 6.5vw, 112px)/.9 var(--serif); letter-spacing: -.045em; }
.hero-agents { display: flex; justify-content: center; margin: 0 auto clamp(18px, 2vw, 28px); padding-left: 11px; }
.hero-agent-avatar { position: relative; display: block; width: 42px; height: 42px; flex: none; margin-left: -11px; overflow: hidden; border: 2px solid #f8f6ef; border-radius: 50%; background-color: #efede5; background-image: url('/managed/agents/team-sprite.png'); background-repeat: no-repeat; background-size: 200% 200%; box-shadow: 0 4px 12px rgba(31, 32, 25, .12); animation: hero-avatar-enter .55s cubic-bezier(.2,.7,.25,1) both; }
.hero-agent-avatar:nth-child(1) { animation-delay: .16s; }
.hero-agent-avatar:nth-child(2) { animation-delay: .23s; }
.hero-agent-avatar:nth-child(3) { animation-delay: .30s; }
.hero-agent-avatar:nth-child(4) { animation-delay: .37s; }
@keyframes hero-avatar-enter { from { opacity: 0; transform: translateY(8px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hero h1 em, h2 em { font-style: italic; }
.hero-highlight { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
.hero-highlight svg { position: absolute; z-index: -1; right: -.01em; bottom: -.12em; left: -.01em; width: calc(100% + .02em); height: .13em; overflow: visible; }
.hero-highlight svg path { fill: none; stroke: var(--lime); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-arrow 1s 1.1s cubic-bezier(.25,.7,.25,1) forwards; }
.hero-intro { margin: 0 auto 27px; color: var(--body); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.5; }
.hero-button { min-height: 58px; padding: 16px 30px; }
.hero-price { margin: 27px 0 4px; font-size: 14px; font-weight: 500; }
.hero-subprice { margin: 0; color: var(--muted); font-size: 13px; }
.hero-note { position: absolute; z-index: 2; }
.note-left { left: max(8.2vw, 44px); top: 39%; transform: rotate(-8deg); animation: note-enter .8s .38s cubic-bezier(.2,.7,.25,1) both; }
.note-left::before {
  position: absolute;
  top: -200px;
  left: 0;
  content: 'L’IA\A AU SERVICE\A DE VOS\A MARCHÉS\A PUBLICS.';
  white-space: pre;
  color: #62655d;
  font: 12px/1.15 Geist, sans-serif;
  transform: rotate(8deg);
}
.note-left::after { position: absolute; top: -82px; left: -23px; width: 1px; height: 103px; background: rgba(23, 24, 21, .55); content: ''; }
.note-arrow { display: block; width: 76px; height: 58px; margin: 0 0 0 28px; overflow: visible; transform: rotate(-4deg); }
.note-arrow path { fill: none; stroke: #242720; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 170; stroke-dashoffset: 170; animation: draw-arrow 1s 1.2s ease-out forwards; }
.note-right { display: none; }
.topo { position: absolute; z-index: 1; width: 14px; height: 14px; border: 1px solid var(--lime); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(185, 255, 56, .22); animation: marker-pulse 3.8s ease-in-out infinite; }
.topo::after { position: absolute; inset: 4px; border-radius: 50%; background: #20221b; content: ''; }
.topo-left { left: 6.5%; bottom: 23%; animation-delay: .5s; }
.topo-left-low { left: 19%; bottom: 13%; animation-delay: 1.2s; }
.topo-right { right: 19%; top: 27%; animation-delay: .9s; }
.topo-right-high { right: 25%; top: 7%; animation-delay: .2s; }
.hero-cross { position: absolute; right: 3.7%; top: 76%; width: 42px; height: 42px; opacity: .48; }
.hero-cross::before, .hero-cross::after { position: absolute; top: 50%; left: 50%; width: 1px; height: 100%; background: #6d7067; content: ''; transform: translate(-50%, -50%); }
.hero-cross::after { transform: translate(-50%, -50%) rotate(90deg); }
.hero-tags { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.hero-tags span { position: absolute; min-width: 116px; padding: 14px 19px; border: 1px solid rgba(23, 24, 21, .09); border-radius: 15px; background: rgba(252, 251, 247, .88); box-shadow: 0 8px 24px rgba(31, 32, 25, .06); font-size: 12px; font-weight: 500; text-transform: uppercase; white-space: nowrap; opacity: 0; animation: tag-enter .65s cubic-bezier(.2,.7,.25,1) forwards; }
.hero-tags span:nth-child(1) { top: 9%; right: 8%; animation-delay: .55s; }
.hero-tags span:nth-child(2) { top: 42%; right: 11.5%; animation-delay: .7s; }
.hero-tags span:nth-child(3) { top: 76%; right: 8%; animation-delay: .85s; }
.hero-tags i { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--lime); }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tag-enter { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes note-enter { from { opacity: 0; transform: translate(-12px, 8px) rotate(-8deg); } to { opacity: 1; transform: translate(0, 0) rotate(-8deg); } }
@keyframes draw-arrow { to { stroke-dashoffset: 0; } }
@keyframes marker-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(185, 255, 56, .18); } 50% { box-shadow: 0 0 0 8px rgba(185, 255, 56, .08); } }
@keyframes contour-drift { from { transform: translate3d(-.35%, .15%, 0) scale(1.035); } to { transform: translate3d(.35%, -.15%, 0) scale(1.055); } }

/* 02 — The pain point remains a single wide editorial panel. */
.problem.section-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
  width: calc(100% - 24px);
  max-width: none;
  margin-block: clamp(24px, 4vw, 82px);
  min-height: clamp(604px, 32.5vw, 790px);
  margin-top: clamp(24px, 4vw, 82px);
  margin-bottom: clamp(24px, 2.5vw, 50px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
}
.problem .split-copy { align-self: center; padding: clamp(36px, 4vw, 72px) clamp(24px, 2.2vw, 46px) clamp(36px, 4vw, 72px) clamp(34px, 6.5vw, 132px); }
.problem h2 { max-width: 840px; font-size: var(--section-title); line-height: .94; }
.problem .lead { margin-bottom: 25px; }
.time-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2vw, 34px); }
.time-grid::after { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line); content: ''; }
.time-column { display: flex; flex-direction: column; gap: 11px; }
.time-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, .8vw, 14px); color: #2f302b; font-size: clamp(12px, 1vw, 17px); }
.time-column:last-child .time-row { font-size: clamp(12px, .92vw, 16px); }
.line-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.8); box-shadow: 0 3px 12px rgba(31,32,25,.025); }
.line-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.time-row b { padding: 11px 13px; border-radius: 10px; background: var(--lime-soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.fine-print { margin: 22px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.problem-image { position: relative; min-height: 100%; margin: 0; overflow: visible; }
.problem-image::after { position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface) 0%, rgba(252, 251, 247, .78) 8%, rgba(252, 251, 247, 0) 27%); content: ''; }
.problem-image img { width: 100%; height: 100%; object-fit: cover; object-position: 100% center; filter: saturate(.88) brightness(.94); }
.problem-image .hand-note { position: absolute; z-index: 1; top: 10%; left: -12%; transform: rotate(-5deg); font-size: clamp(19px, 1.65vw, 30px); line-height: 1.28; }
.problem-arrow { display: block; width: clamp(82px, 6vw, 112px); height: clamp(72px, 5vw, 96px); margin: 0 0 0 48px; overflow: visible; }
.problem-arrow path { fill: none; stroke: #171815; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
.problem.is-visible .problem-arrow path { animation: draw-arrow 1.05s .8s ease-out forwards; }
.problem .split-copy { transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.25,1); }
.problem-image { transition: opacity .85s .15s ease, transform .85s .15s cubic-bezier(.2,.7,.25,1); }
.problem.reveal-pending:not(.is-visible) .split-copy { opacity: 0; transform: translateY(20px); }
.problem.reveal-pending:not(.is-visible) .problem-image { opacity: 0; transform: translateX(28px); }
.problem.is-visible .time-row { animation: time-row-enter .55s cubic-bezier(.2,.7,.25,1) both; }
.problem.is-visible .time-column:first-child .time-row:nth-child(1) { animation-delay: .24s; }
.problem.is-visible .time-column:first-child .time-row:nth-child(2) { animation-delay: .33s; }
.problem.is-visible .time-column:first-child .time-row:nth-child(3) { animation-delay: .42s; }
.problem.is-visible .time-column:last-child .time-row:nth-child(1) { animation-delay: .3s; }
.problem.is-visible .time-column:last-child .time-row:nth-child(2) { animation-delay: .39s; }
.problem.is-visible .time-column:last-child .time-row:nth-child(3) { animation-delay: .48s; }
@keyframes time-row-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* 03 — Steps are spacious cards, then a quiet centered conclusion. */
.solution.section-shell { width: min(1840px, calc(100% - clamp(28px, 5.1vw, 104px) * 2)); }
.solution { min-height: 78svh; padding-block: clamp(62px, 3.3vw, 82px) clamp(64px, 3.5vw, 86px); }
.solution h2, .team h2, .pricing h2 { margin-bottom: 12px; }
.solution h2 { font-size: var(--section-title); line-height: .94; }
.solution .lead { font-size: var(--section-lead); line-height: 1.4; }
.process-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(34px, 3.8vw, 78px) minmax(0, 1fr) clamp(34px, 3.8vw, 78px) minmax(0, 1fr) clamp(34px, 3.8vw, 78px) minmax(0, 1fr); align-items: stretch; gap: 10px; margin-top: clamp(28px, 1.8vw, 40px); }
.process-card, .agent-card, .price-card, .commission-card, .workflow-box, .opportunity-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(252, 251, 247, .78); box-shadow: 0 8px 22px rgba(31, 32, 25, .025); }
.process-card { min-height: clamp(270px, 18vw, 370px); padding: clamp(22px, 1.5vw, 32px) clamp(22px, 2vw, 40px); }
.solution .process-card { border-radius: clamp(14px, .9vw, 19px); }
.card-icon { display: grid; width: clamp(48px, 3vw, 60px); height: clamp(48px, 3vw, 60px); margin-bottom: 18px; place-items: center; border-radius: 14px; background: var(--lime-soft); }
.card-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.process-card h3 { margin: 0 0 12px; font-size: clamp(18px, 1.35vw, 27px); line-height: 1.18; }
.process-card p, .agent-card p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 26px); line-height: 1.4; }
.process-arrow { align-self: center; color: #62685d; font-size: clamp(34px, 2.5vw, 52px); text-align: center; }
.center-note { margin: 27px 0 0; text-align: center; font: 400 clamp(28px, 1.9vw, 42px)/1.1 var(--serif); }
.center-note-highlight { color: inherit; padding: 0 .1em .06em; background-color: transparent; background-image: linear-gradient(transparent 56%, rgba(185, 255, 56, .62) 56%, rgba(185, 255, 56, .62) 91%, transparent 91%); background-position: left bottom; background-repeat: no-repeat; background-size: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.solution.is-visible .center-note-highlight { animation: marker-sweep .9s .95s cubic-bezier(.2,.7,.25,1) forwards; }
@keyframes marker-sweep { to { background-size: 100% 100%; } }
.solution .process-card, .solution .process-arrow, .solution .center-note { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.solution.reveal-pending:not(.is-visible) .process-card { opacity: 0; transform: translateY(22px) scale(.985); }
.solution.reveal-pending:not(.is-visible) .process-arrow { opacity: 0; transform: translateX(-8px); }
.solution.reveal-pending:not(.is-visible) .center-note { opacity: 0; transform: translateY(12px); }
.solution.is-visible .process-card:nth-child(1) { transition-delay: .08s; }
.solution.is-visible .process-arrow:nth-child(2) { transition-delay: .2s; }
.solution.is-visible .process-card:nth-child(3) { transition-delay: .28s; }
.solution.is-visible .process-arrow:nth-child(4) { transition-delay: .4s; }
.solution.is-visible .process-card:nth-child(5) { transition-delay: .48s; }
.solution.is-visible .process-arrow:nth-child(6) { transition-delay: .6s; }
.solution.is-visible .process-card:nth-child(7) { transition-delay: .68s; }
.solution.is-visible .center-note { transition-delay: .82s; }

/* 04 — Team cards have their own clear image-and-copy hierarchy. */
.team { padding-block: 0 var(--section-space); }
.team-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; }
.team h2 { max-width: 900px; font-size: var(--section-title); line-height: .93; }
.team-note { position: relative; margin: 0 7% 0 0; font-size: clamp(18px, 1.25vw, 25px); transform: translateY(-18px) rotate(3deg); }
.team-note-arrow { position: absolute; top: 6px; left: -112px; width: clamp(82px, 6vw, 122px); overflow: visible; color: #a6e92c; }
.team-note-arrow path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 220; stroke-dashoffset: 220; }
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: clamp(14px, 1.5vw, 26px); margin-top: clamp(20px, 1.5vw, 30px); }
.agent-card { display: flex; min-height: clamp(440px, 26vw, 535px); flex-direction: column; padding: 0 clamp(18px, 2vw, 34px) 26px; overflow: hidden; }
.avatar { position: relative; flex: none; overflow: hidden; background-color: transparent; background-image: url('/managed/agents/team-sprite.png'); background-repeat: no-repeat; background-size: 200% 200%; }
.avatar img { display: none; }
.avatar-lea { background-position: 0 0; }
.avatar-arthur { background-position: 100% 0; }
.avatar-maya { background-position: 0 100%; }
.avatar-noah { background-position: 100% 100%; }
.agent-card > .avatar { width: clamp(156px, 10.6vw, 210px); height: clamp(156px, 10.6vw, 210px); margin: clamp(12px, 1vw, 18px) auto 2px; border: 1px solid rgba(23, 24, 21, .09); border-radius: 50%; background-color: #f0eee7; box-shadow: 0 8px 20px rgba(31, 32, 25, .045); }
.agent-card h3 { width: fit-content; margin: 0 0 4px; color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 1.5vw, 28px); font-weight: 400; line-height: 1; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.agent-card .role { min-height: 2.6em; margin: 0 0 10px; color: var(--muted); font-size: clamp(15px, 1.05vw, 21px); line-height: 1.3; }
.agent-card strong { display: block; min-height: 3.66em; margin: 0 0 10px; font-size: clamp(17px, 1.2vw, 24px); line-height: 1.22; }
.team .agent-card, .team .team-note-arrow path { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1), stroke-dashoffset 1s ease; }
.team.reveal-pending:not(.is-visible) .agent-card { opacity: 0; transform: translateY(26px) scale(.985); }
.team.is-visible .agent-card:nth-child(1) { transition-delay: .08s; }
.team.is-visible .agent-card:nth-child(2) { transition-delay: .2s; }
.team.is-visible .agent-card:nth-child(3) { transition-delay: .32s; }
.team.is-visible .agent-card:nth-child(4) { transition-delay: .44s; }
.team.is-visible .team-note-arrow path { stroke-dashoffset: 0; transition-delay: .45s; }

/* 05 — Distinct, softly tinted band for the learning loop. */
.personalisation.section-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 76svh;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(48px, 6vw, 104px);
  padding: clamp(82px, 9vw, 152px) max(var(--gutter), calc((100% - var(--shell)) / 2));
  background: #f0f1e7;
}
.personalisation .split-copy, .watch .split-copy { padding: 0; }
.personalisation h2, .watch h2 { max-width: 800px; font-size: var(--section-title); line-height: .94; }
.personalisation .lead, .watch .lead { max-width: 760px; }
.check-list { display: flex; flex-direction: column; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; font-size: clamp(17px, 1.4vw, 23px); }
.check-list li { display: flex; align-items: center; gap: 14px; }
.check-icon { display: block; width: 28px; height: 28px; flex: 0 0 28px; color: var(--ink); }
.workflow-visual { position: relative; isolation: isolate; display: grid; min-height: clamp(350px, 23vw, 430px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(42px, 4.2vw, 78px); }
.workflow-box { position: relative; z-index: 1; display: flex; min-height: clamp(290px, 18vw, 355px); flex-direction: column; justify-content: center; gap: 0; padding: clamp(22px, 1.9vw, 36px); font-size: clamp(15px, 1.12vw, 22px); }
.workflow-box strong { margin-bottom: 20px; font-size: clamp(20px, 1.5vw, 28px); }
.workflow-box .profile-row { display: grid; grid-template-columns: minmax(84px, .72fr) 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(23, 24, 21, .09); color: var(--muted); line-height: 1.35; }
.workflow-box b { color: var(--ink); font-weight: 400; }
.team-mini { align-items: center; text-align: center; }
.mini-avatars { display: flex; justify-content: center; margin: 12px 0 22px; }
.mini-avatars .avatar { width: clamp(48px, 3.7vw, 72px); height: clamp(48px, 3.7vw, 72px); margin-left: clamp(-9px, -.45vw, -5px); border: 2px solid var(--surface); border-radius: 50%; background-size: 200% 200%; }
.team-mini small { max-width: 300px; color: var(--muted); font-size: clamp(15px, 1.12vw, 22px); line-height: 1.4; }
.workflow-loop { position: absolute; z-index: 0; inset: -35px 0; width: 100%; height: calc(100% + 70px); overflow: visible; pointer-events: none; }
.workflow-loop path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.workflow-mobile-link { display: none; }
.workflow-return, .workflow-feedback, .workflow-transfer { transition: stroke-dashoffset 1.25s cubic-bezier(.2,.7,.25,1); }
.workflow-feedback { transition-delay: .4s; }
.workflow-transfer { transition-delay: .78s; }
.personalisation .split-copy, .personalisation .workflow-box, .personalisation .workflow-arrow, .personalisation .check-list li { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.25,1); }
.personalisation.reveal-pending:not(.is-visible) .split-copy { opacity: 0; transform: translateY(24px); }
.personalisation.reveal-pending:not(.is-visible) .company-profile { opacity: 0; transform: translateX(-24px); }
.personalisation.reveal-pending:not(.is-visible) .team-mini { opacity: 0; transform: translateX(24px); }
.personalisation.reveal-pending:not(.is-visible) .workflow-arrow { opacity: 0; transform: translateX(-12px); }
.personalisation.reveal-pending:not(.is-visible) .check-list li { opacity: 0; transform: translateY(10px); }
.personalisation.reveal-pending:not(.is-visible) .workflow-loop path { stroke-dashoffset: 1; }
.personalisation.is-visible .company-profile { transition-delay: .12s; }
.personalisation.is-visible .workflow-return { stroke-dashoffset: 0; transition-delay: .28s; }
.personalisation.is-visible .workflow-transfer { stroke-dashoffset: 0; transition-delay: .72s; }
.personalisation.is-visible .team-mini { transition-delay: .82s; }
.personalisation.is-visible .workflow-feedback { stroke-dashoffset: 0; transition-delay: 1.12s; }
.personalisation.is-visible .check-list li:first-child { transition-delay: .18s; }
.personalisation.is-visible .check-list li:last-child { transition-delay: .32s; }
.personalisation.is-visible .workflow-box .profile-row { animation: profile-row-enter .55s both; }
.personalisation.is-visible .profile-row:nth-child(2) { animation-delay: .3s; }
.personalisation.is-visible .profile-row:nth-child(3) { animation-delay: .4s; }
.personalisation.is-visible .profile-row:nth-child(4) { animation-delay: .5s; }
.personalisation.is-visible .profile-row:nth-child(5) { animation-delay: .6s; }
.personalisation.is-visible .mini-avatars .avatar { animation: mini-agent-enter .55s both; }
.personalisation.is-visible .mini-avatars .avatar:nth-child(1) { animation-delay: 1s; }
.personalisation.is-visible .mini-avatars .avatar:nth-child(2) { animation-delay: 1.12s; }
.personalisation.is-visible .mini-avatars .avatar:nth-child(3) { animation-delay: 1.24s; }
.personalisation.is-visible .mini-avatars .avatar:nth-child(4) { animation-delay: 1.36s; }
@keyframes profile-row-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mini-agent-enter { from { opacity: 0; transform: translateY(8px) scale(.82); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* 06 — Continuous monitoring: a generous editorial split, live alert and MCP signpost. */
.watch.section-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: clamp(48px, 5vw, 96px);
  row-gap: clamp(36px, 4vw, 64px);
  padding: clamp(72px, 7vw, 112px) max(var(--gutter), calc((100% - 1800px) / 2));
}
.watch-copy { position: relative; z-index: 1; }
.watch h2 { max-width: 850px; margin-bottom: 24px; font-size: var(--section-title); line-height: .93; }
.watch-copy .lead { max-width: 790px; color: #737d8b; font-size: var(--section-lead); line-height: 1.42; }
.watch-copy mark, .mcp-copy mark { padding: .02em .22em .08em; border-radius: .28em; background: var(--lime-soft); color: var(--ink); font-weight: 600; }
.watch-benefits { display: grid; grid-template-columns: .9fr .95fr 1.55fr; align-items: center; gap: clamp(10px, 1.4vw, 24px); margin-top: clamp(30px, 3.2vw, 56px); }
.watch-benefit { display: flex; align-items: center; gap: 10px; color: #25303b; font-size: clamp(14px, 1.08vw, 20px); line-height: 1.3; }
.watch-icon { display: grid; width: clamp(46px, 3.4vw, 58px); height: clamp(46px, 3.4vw, 58px); flex: 0 0 clamp(46px, 3.4vw, 58px); place-items: center; border-radius: 15px; background: var(--lime-soft); }
.watch-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.watch-visual { position: relative; display: grid; min-height: clamp(500px, 36vw, 670px); grid-template-columns: minmax(0, 1fr) clamp(132px, 10vw, 170px); align-items: center; gap: clamp(10px, 1.2vw, 20px); }
.watch-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.watch-orbit ellipse { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-dasharray: 5 8; opacity: .7; transform-box: fill-box; transform-origin: center; animation: orbit-drift 48s linear infinite; }
.watch-rays { position: absolute; z-index: 1; top: 8%; left: 1%; display: flex; gap: 17px; align-items: flex-start; transform: rotate(-17deg); }
.watch-rays i { display: block; width: 4px; height: 42px; border-radius: 4px; background: var(--lime); transform: rotate(-28deg); animation: ray-glow 2.8s ease-in-out infinite alternate; }
.watch-rays i:nth-child(2) { height: 52px; margin-top: 24px; animation-delay: .25s; }
.watch-rays i:nth-child(3) { height: 38px; margin-top: 48px; animation-delay: .5s; }
.opportunity-card { position: relative; z-index: 2; width: min(100%, 590px); justify-self: stretch; padding: clamp(24px, 2vw, 40px); border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: 0 24px 70px rgba(31, 32, 25, .09); }
.opp-top { display: flex; align-items: center; gap: 17px; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: #26313d; }
.opp-top .avatar { width: 68px; height: 68px; border-radius: 50%; background-color: #f0eee7; }
.opp-top div { display: grid; gap: 3px; }
.opp-top strong { font-size: clamp(16px, 1.15vw, 21px); font-weight: 500; }
.opp-top small { color: #7c8490; font-size: clamp(14px, 1vw, 18px); }
.opportunity-card h3 { margin: 22px 0 8px; font-size: clamp(24px, 1.75vw, 34px); line-height: 1.17; }
.opportunity-card .opp-amount { font-size: clamp(25px, 1.7vw, 33px); }
.opp-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 25px; color: #626b77; font-size: clamp(14px, 1.05vw, 20px); }
.opp-meta span { display: inline-flex; align-items: center; gap: 10px; }
.opp-meta span + span { padding-left: 18px; border-left: 1px solid var(--line); }
.opp-meta svg { width: 25px; height: 25px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fit { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0; padding: 10px 15px; border-radius: 12px; background: var(--lime-soft); font-size: clamp(14px, 1vw, 18px); }
.fit i { width: 15px; height: 15px; border-radius: 50%; background: var(--lime); }
.watch-note-wrap { position: relative; z-index: 3; grid-column: 2; width: 100%; transform: translateY(-12%); }
.watch-note-wrap .hand-note { position: relative; font-size: clamp(18px, 1.35vw, 26px); line-height: 1.3; transform: rotate(-7deg); }
.watch-note-wrap svg { position: absolute; top: 84%; left: -38px; width: 110px; overflow: visible; transform: rotate(1deg); }
.watch-note-wrap svg path { fill: none; stroke: #35404b; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mcp-promo { grid-column: 1 / -1; display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: clamp(20px, 2.5vw, 44px); padding: clamp(22px, 2vw, 34px) clamp(28px, 2.4vw, 48px); border: 1px solid var(--line); border-radius: 20px; background: rgba(252, 251, 247, .48); }
.mcp-mark { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 16px; background: var(--dark); }
.mcp-mark img { width: 43px; height: 43px; object-fit: contain; }
.mcp-copy { padding-left: clamp(20px, 2.5vw, 48px); border-left: 1px solid var(--line-strong); }
.mcp-copy small { color: #7c8490; font-size: clamp(13px, 1.1vw, 19px); text-transform: uppercase; }
.mcp-copy p { margin: 6px 0 0; color: #45505d; font-size: clamp(16px, 1.35vw, 24px); line-height: 1.4; }
.mcp-button { min-height: 58px; padding: 14px 24px; border: 1px solid var(--line-strong); border-radius: 16px; font-size: clamp(15px, 1.1vw, 20px); white-space: nowrap; }
.mcp-button span { font-size: 1.3em; }
.watch.reveal-pending:not(.is-visible) .watch-copy { opacity: 0; transform: translateY(22px); }
.watch.reveal-pending:not(.is-visible) .opportunity-card { opacity: 0; transform: translateY(26px) scale(.985); }
.watch.reveal-pending:not(.is-visible) .mcp-promo { opacity: 0; transform: translateY(18px); }
.watch .watch-copy, .watch .opportunity-card, .watch .mcp-promo { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.25,1); }
.watch .watch-benefit { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.watch.reveal-pending:not(.is-visible) .watch-benefit { opacity: 0; transform: translateY(12px); }
.watch.is-visible .opportunity-card { transition-delay: .18s; }
.watch.is-visible .mcp-promo { transition-delay: .4s; }
.watch.is-visible .watch-benefit:nth-child(1) { transition-delay: .1s; }
.watch.is-visible .watch-benefit:nth-child(2) { transition-delay: .2s; }
.watch.is-visible .watch-benefit:nth-child(3) { transition-delay: .3s; }
@keyframes orbit-drift { to { transform: rotate(360deg); } }
@keyframes ray-glow { from { opacity: .55; } to { opacity: 1; } }

/* 07 — Three aligned price blocks, with hand-drawn SVG reassurance icons. */
.pricing { min-height: 78svh; padding-block: var(--section-space); }
.pricing h2 { max-width: 760px; font-size: var(--section-title); line-height: .92; }
.pricing-grid { display: grid; width: min(100%, 1320px); grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); align-items: stretch; gap: clamp(14px, 1.4vw, 24px); margin: clamp(28px, 3vw, 58px) auto 0; }
.price-card { display: flex; min-height: 330px; flex-direction: column; justify-content: center; padding: clamp(24px, 2.5vw, 42px); }
.price-card strong { display: block; font-size: clamp(48px, 5vw, 84px); line-height: 1; white-space: nowrap; }
.price-card > span { color: var(--muted); font-size: clamp(16px, 1.25vw, 24px); }
.price-card p { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(15px, 1.1vw, 22px); line-height: 1.45; }
.plus { align-self: center; font-size: clamp(52px, 4vw, 76px); font-weight: 500; text-align: center; }
.commission-card { min-height: 330px; padding: clamp(22px, 1.7vw, 32px); font-size: clamp(15px, 1.15vw, 21px); }
.commission-card > strong { display: block; margin-bottom: 15px; font-size: clamp(20px, 1.45vw, 27px); line-height: 1.2; }
.commission-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(86px, .55fr); gap: 12px; padding: 11px 12px; border-top: 1px solid rgba(23, 24, 21, .08); color: var(--muted); }
.commission-row b { padding-left: 12px; border-left: 1px solid rgba(23, 24, 21, .08); color: var(--ink); text-align: center; }
.commission-row.head { padding-block: 12px; border-top: 0; border-radius: 8px 8px 0 0; background: #f1eee5; color: var(--muted); font-size: clamp(14px, 1.15vw, 20px); }
.commission-row.head span + span { padding-left: 12px; border-left: 1px solid rgba(23, 24, 21, .08); }
.price-reassurance { display: grid; grid-column: 1 / -1; min-height: 0; align-content: center; justify-items: center; gap: 14px; padding: 0; }
.price-promises { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px; }
.price-promise { display: inline-flex; min-height: 34px; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: var(--lime-soft); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; }
.promise-mark { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.price-reassurance .button { justify-self: center; width: fit-content; max-width: 100%; min-height: 50px; margin: 0; padding: 12px 21px; border-radius: 999px; font-size: 14px; text-align: center; white-space: normal; }
.pricing.reveal-pending:not(.is-visible) .pricing-grid > * { opacity: 0; transform: translateY(18px); }
.pricing .pricing-grid > * { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.pricing.is-visible .pricing-grid > :nth-child(2) { transition-delay: .1s; }
.pricing.is-visible .pricing-grid > :nth-child(3) { transition-delay: .2s; }
.pricing.is-visible .pricing-grid > :nth-child(4) { transition-delay: .3s; }

/* Keep the end of monitoring and the pricing intro visually connected. */
.watch.section-shell { min-height: 0; padding-bottom: clamp(48px, 5vw, 82px); }
.pricing { min-height: 0; padding-top: clamp(46px, 5vw, 78px); }

/* 08 — Dark, full-bleed action panel with a hand-drawn growth illustration. */
.action-banner.section-shell { position: relative; display: flex; width: 100%; max-width: none; min-height: clamp(360px, 29vw, 520px); align-items: center; justify-content: center; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse at 50% 100%, rgba(76, 94, 49, .15), transparent 54%), var(--dark); color: #fff; }
.banner-note-wrap { position: absolute; top: 32%; left: 6.2%; width: 270px; color: var(--lime); }
.banner-note { margin: 0; color: var(--lime); font-size: clamp(20px, 2vw, 34px); line-height: 1.35; transform: rotate(-7deg); }
.banner-note-arrow { display: block; width: clamp(96px, 10vw, 160px); height: auto; margin: 12px 0 0 38%; overflow: visible; transform: rotate(2deg); }
.banner-note-arrow path { stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.note-arrow-line, .note-arrow-head { stroke-dasharray: 1; stroke-dashoffset: 1; }
.banner-content { position: relative; z-index: 1; width: min(100%, 1340px); padding: 58px 100px; text-align: center; }
.banner-content h2 { margin-bottom: 10px; color: #fff; font-size: clamp(40px, 4vw, 76px); line-height: 1.02; white-space: nowrap; }
.banner-content p { margin-bottom: 28px; color: #eeeee7; font-size: clamp(18px, 1.65vw, 28px); }
.banner-content .button { min-height: 74px; padding-inline: clamp(34px, 4vw, 68px); font-size: clamp(17px, 1.45vw, 24px); }
.banner-content .button span { font-size: 1.4em; line-height: .8; transition: transform .25s ease; }
.banner-content .button:hover span { transform: translateX(5px); }
.chart-bars { position: absolute; right: 5.5%; bottom: clamp(44px, 5vw, 70px); display: flex; width: clamp(210px, 18vw, 330px); height: clamp(165px, 17vw, 250px); align-items: flex-end; gap: clamp(9px, 1vw, 17px); }
.chart-bars .growth-curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-bars .growth-curve path { fill: none; stroke: var(--lime); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.chart-bars .growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chart-bars .growth-arrowhead { opacity: 0; transform: translate(-8px, 8px); transform-origin: 50% 50%; }
.chart-bars i { position: relative; z-index: 1; display: block; flex: 1; max-width: 56px; border: 1px solid rgba(185, 255, 56, .85); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(185, 255, 56, .76), rgba(185, 255, 56, .12)); box-shadow: 0 0 18px rgba(185, 255, 56, .12), inset 0 1px rgba(255,255,255,.18); transform: scaleY(0); transform-origin: bottom; }
.chart-bars i:nth-of-type(1) { height: 18%; }
.chart-bars i:nth-of-type(2) { height: 36%; }
.chart-bars i:nth-of-type(3) { height: 54%; }
.chart-bars i:nth-of-type(4) { height: 74%; }
.chart-bars i:nth-of-type(5) { height: 96%; }
.action-banner.reveal-pending:not(.is-visible) .banner-content { opacity: 0; transform: translateY(20px); }
.action-banner.reveal-pending:not(.is-visible) .banner-note-wrap { opacity: 0; transform: translateX(-14px); }
.action-banner.reveal-pending:not(.is-visible) .chart-bars { opacity: 0; transform: translateY(12px); }
.action-banner .banner-content, .action-banner .banner-note-wrap, .action-banner .chart-bars { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.25,1); }
.action-banner.is-visible .banner-note-arrow .note-arrow-line { animation: draw-arrow .8s .25s ease-out forwards; }
.action-banner.is-visible .banner-note-arrow .note-arrow-head { animation: draw-arrow .26s .85s ease-out forwards; }
.action-banner.is-visible .chart-bars i { animation: chart-bar-rise .72s cubic-bezier(.2,.75,.25,1) both; }
.action-banner.is-visible .chart-bars i:nth-of-type(1) { animation-delay: .16s; }
.action-banner.is-visible .chart-bars i:nth-of-type(2) { animation-delay: .27s; }
.action-banner.is-visible .chart-bars i:nth-of-type(3) { animation-delay: .38s; }
.action-banner.is-visible .chart-bars i:nth-of-type(4) { animation-delay: .49s; }
.action-banner.is-visible .chart-bars i:nth-of-type(5) { animation-delay: .60s; }
.action-banner.is-visible .growth-line { animation: draw-arrow 1.25s .52s ease-out forwards; }
.action-banner.is-visible .growth-arrowhead { animation: chart-arrow-arrive .4s 1.55s ease-out forwards; }
@keyframes chart-bar-rise { from { opacity: .25; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes chart-arrow-arrive { to { opacity: 1; transform: translate(0, 0); } }

/* 09 — MCP-like vertical accordion; closed by default on every screen. */
#faq.faq { display: grid; min-height: 74svh; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); align-items: start; gap: clamp(54px, 8vw, 128px); padding-block: var(--section-space); }
#faq .faq-title { padding-top: 3px; }
#faq .faq-title h2 { margin-top: 0; font-size: var(--section-title); line-height: .94; }
#faq .faq-list { display: block; }
#faq .faq-list details, #faq .faq-list details:last-child, #faq .faq-list details:nth-last-child(2) { padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
#faq .faq-list details:first-child { border-top: 1px solid var(--line); }
#faq .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 0; font-size: clamp(15px, 1.08vw, 18px); font-weight: 500; line-height: 1.35; list-style: none; cursor: pointer; }
#faq .faq-list summary::-webkit-details-marker { display: none; }
#faq .faq-list summary span { flex: none; font-size: 24px; font-weight: 300; line-height: 1; transition: transform .2s ease; }
#faq .faq-list details[open] summary span { transform: rotate(45deg); }
#faq .faq-list details p { max-width: 760px; margin: 0; padding: 0 38px 20px 0; color: var(--muted); font-size: clamp(14px, 1vw, 17px); line-height: 1.5; }

/* Footer mirrors the home sign-off: side markers, oversized message and brand mark. */
.site-footer { display: block; width: 100%; margin: 0; padding: 0; background: var(--dark); color: #f7f4ec; }
.footer-inner { width: min(1760px, calc(100% - clamp(48px, 13.7vw, 280px))); margin-inline: auto; }
.footer-main { position: relative; display: grid; min-height: clamp(430px, 23.5vw, 500px); grid-template-columns: 92px minmax(0, 1.2fr) minmax(360px, 1fr) 112px; align-items: center; gap: clamp(24px, 2.5vw, 48px); padding-block: 42px; }
.footer-rail { display: flex; min-height: 270px; align-self: center; align-items: flex-end; padding: 0 24px 0 7px; border-right: 1px solid rgba(255, 255, 255, .2); }
.footer-rail span, .footer-side-note { color: rgba(247, 244, 236, .82); font-size: 12px; font-weight: 400; letter-spacing: .14em; line-height: 1.7; }
.footer-copy { max-width: 780px; padding: 0; }
.footer-kicker { max-width: 760px; margin: 0 0 28px; font: 400 clamp(50px, 4.35vw, 84px)/1.02 var(--serif); letter-spacing: -.04em; }
.footer-kicker em { color: var(--lime); font-weight: 400; }
.footer-subtitle { margin: 0 0 36px; color: rgba(247, 244, 236, .88); font-size: clamp(18px, 1.5vw, 28px); line-height: 1.4; }
.footer-cta { min-height: 68px; padding: 18px clamp(28px, 2.5vw, 48px); color: var(--ink); font-size: clamp(15px, 1.1vw, 19px); }
.footer-cta svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.footer-cta:hover svg { transform: translateX(5px); }
.footer-brand-lockup { display: grid; width: 100%; align-content: center; justify-items: end; gap: 0; }
.site-footer .footer-mark { display: block; width: 100%; max-height: 270px; object-fit: contain; }
.footer-brand-lockup span { margin-top: -12px; padding-right: 7px; color: #f7f4ec; font-size: clamp(22px, 1.8vw, 32px); letter-spacing: -.04em; }
.footer-side-note { align-self: start; margin: 4px 0 0; }
.footer-bottom { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .15); color: rgba(247, 244, 236, .65); font-size: 12px; }
.footer-bottom nav { display: flex; align-items: center; gap: 24px; }
.site-footer .footer-bottom a { margin-left: 0; color: inherit; }
.site-footer .footer-bottom a:hover { color: #fff; }

@media (max-width: 1100px) {
  :root { --gutter: 42px; --section-space: 82px; }
  .main-nav { gap: 20px; font-size: 13px; }
  .hero.section-shell { display: flex; min-height: max(620px, calc(100svh - var(--header-height))); flex-direction: column; align-items: center; justify-content: center; }
  .hero-content { max-width: min(57vw, 760px); }
  .hero h1 { font-size: clamp(44px, 5.4vw, 60px); }
  .hero-note, .hero-cross, .topo { display: none; }
  .hero-tags { position: absolute; z-index: 2; inset: 0; display: block; width: auto; margin: 0; pointer-events: none; }
  .hero-tags span { min-width: 0; padding: 10px 13px; border-radius: 12px; font-size: 10px; }
  .hero-tags span:nth-child(1), .hero-tags span:nth-child(2), .hero-tags span:nth-child(3) { right: 4%; }
  .problem.section-shell { min-height: 570px; grid-template-columns: 1.3fr .9fr; }
  .problem .split-copy { padding-inline: 42px; }
  .problem h2 { font-size: clamp(43px, 4.5vw, 58px); }
  .time-grid { gap: 12px; }
  .time-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; font-size: 12px; }
  .line-icon { width: 34px; height: 34px; font-size: 18px; }
  .time-row b { padding: 8px; font-size: 11px; }
  .process-grid { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; }
  .process-card { min-height: 300px; padding: 20px; }
  .process-card p { font-size: 14px; }
  .agent-card { min-height: 450px; padding-inline: 18px; }
  .agent-card > .avatar { width: 145px; height: 145px; }
  .personalisation.section-shell { grid-template-columns: 1fr; gap: 48px; padding-block: 88px; }
  .personalisation .workflow-visual { width: min(100%, 920px); margin-inline: auto; }
  .watch.section-shell { grid-template-columns: 1fr; grid-template-rows: auto; gap: 36px; padding-block: 88px; }
  .watch.section-shell { padding-bottom: 58px; }
  .watch-copy { max-width: 900px; }
  .watch h2 { font-size: clamp(54px, 5.8vw, 68px); }
  .watch-copy .lead { font-size: clamp(18px, 2vw, 22px); }
  .watch-benefits { grid-template-columns: .9fr .95fr 1.55fr; }
  .watch-visual { width: min(100%, 900px); min-height: 560px; grid-template-columns: minmax(0, 1fr) 160px; gap: 18px; margin-inline: auto; }
  .watch-note-wrap { width: 160px; }
  .mcp-promo { grid-template-columns: 70px 1fr auto; gap: 20px; padding-inline: 24px; }
  .mcp-mark { width: 60px; height: 60px; }
  .mcp-copy { padding-left: 20px; }
  .mcp-copy p { font-size: 16px; }
  .mcp-button { padding-inline: 16px; font-size: 14px; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .price-reassurance { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .banner-content { padding-inline: 130px; }
}

/* Tablet: let editorial sections stack before their content gets cramped. */
@media (max-width: 980px) {
  :root { --gutter: 32px; --section-space: 76px; }
  .site-header { gap: 18px; }
  .main-nav { display: none; }
  .hero.section-shell { min-height: max(650px, calc(100svh - var(--header-height))); }
  .hero h1 { font-size: clamp(44px, 5.4vw, 58px); }
  .hero-note, .hero-cross, .topo { display: none; }

  .problem.section-shell { min-height: 0; grid-template-columns: 1fr; }
  .problem .split-copy { padding: 52px clamp(32px, 7vw, 72px); }
  .problem-image { min-height: 340px; height: 38vw; max-height: 440px; order: 2; }
  .problem-image .hand-note { top: 8%; left: 6%; }

  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .process-card { min-height: 0; padding: 24px; }
  .process-arrow { display: none; }

  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .agent-card { min-height: 0; padding-inline: clamp(18px, 3vw, 32px); }
  .agent-card > .avatar { width: clamp(136px, 20vw, 180px); height: clamp(136px, 20vw, 180px); }
  .team-note { margin-right: 3%; }
  .team-note-arrow { display: none; }

  .watch-visual { min-height: 490px; }
  .pricing { min-height: 0; }
  .pricing-grid { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); }
  .price-reassurance { grid-column: 1 / -1; justify-items: center; }
  #faq.faq { min-height: 0; grid-template-columns: 1fr; gap: 28px; }
  #faq .faq-title { max-width: 620px; }

  .footer-inner { width: calc(100% - 64px); }
  .footer-main { grid-template-columns: 64px minmax(0, 1fr) minmax(210px, .7fr); gap: 24px; }
  .footer-side-note { display: none; }
  .footer-rail { min-height: 230px; padding-inline: 0 16px; }
  .footer-kicker { font-size: clamp(44px, 6vw, 66px); }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; --header-height: 72px; --section-space: 72px; }
  .site-header { gap: 14px; }
  .brand img { width: 92px; }
  .brand-team { font-size: 14px; }
  .main-nav { display: none; }
  .header-cta { min-height: 42px; padding: 9px 13px; font-size: 12px; }
  .hero.section-shell { display: flex; min-height: max(690px, calc(100svh - var(--header-height))); flex-direction: column; justify-content: center; padding: 86px 24px 105px; }
  .hero::before { opacity: .42; }
  .hero-content { max-width: 620px; }
  .hero h1 { margin: 0 0 18px; font-size: clamp(40px, 10vw, 66px); line-height: .94; letter-spacing: -.04em; }
  .hero-intro { max-width: 520px; font-size: 16px; }
  .desktop-only { display: none; }
  .hero-button { min-height: 54px; padding-inline: 22px; font-size: 13px; }
  .hero-price { max-width: 440px; margin-top: 22px; font-size: 12px; }
  .hero-subprice { font-size: 11px; }
  .hero-note, .topo-right, .topo-right-high, .topo-left-low, .hero-cross { display: none; }
  .topo-left { left: 5%; bottom: 15%; }
  .hero-tags { position: relative; inset: auto; display: grid; width: fit-content; max-width: 100%; grid-template-columns: repeat(2, max-content); align-self: center; justify-content: center; gap: 8px; margin-top: 20px; pointer-events: auto; }
  .hero-tags span { position: relative; inset: auto; width: max-content; min-width: 0; padding: 9px 11px; border-radius: 10px; font-size: 9px; opacity: 1; animation: none; }
  .hero-tags span:nth-child(1), .hero-tags span:nth-child(2), .hero-tags span:nth-child(3) { inset: auto; }
  .hero-tags span:nth-child(3) { grid-column: 1 / -1; justify-self: center; }
  .hero-tags i { width: 7px; height: 7px; margin-right: 5px; }
  h2 { font-size: clamp(40px, 9vw, 58px); }
  .lead { font-size: 16px; }
  .problem.section-shell { width: calc(100% - 24px); min-height: 0; grid-template-columns: 1fr; border-radius: 16px; }
  .problem .split-copy { padding: 34px 25px 32px; }
  .problem h2 { font-size: clamp(42px, 9vw, 58px); }
  .problem .lead { margin-bottom: 22px; }
  .time-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .time-column { gap: 10px; }
  .time-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; font-size: 10px; }
  .time-column:last-child .time-row { font-size: 10px; }
  .line-icon { width: 30px; height: 30px; border-radius: 7px; font-size: 16px; }
  .time-row b { padding: 7px; font-size: 9px; }
  .fine-print { margin-top: 16px; font-size: 10px; }
  .problem-image { min-height: 270px; height: 270px; order: 2; }
  .problem-image::after { background: linear-gradient(180deg, transparent 60%, rgba(252, 251, 247, .2)); }
  .problem-image img { object-position: 60% center; }
  .problem-image .hand-note { top: 8%; left: 7%; font-size: 14px; }
  .problem-arrow { width: 62px; height: 54px; margin-left: 24px; }
  .line-icon svg { width: 18px; height: 18px; }

  .solution { min-height: 0; padding-block: 76px; }
  .solution h2 { font-size: clamp(42px, 9vw, 58px); }
  .solution .lead { font-size: 16px; }
  .process-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .process-card { min-height: 0; padding: 23px; }
  .card-icon { width: 42px; height: 42px; margin-bottom: 14px; font-size: 22px; }
  .card-icon svg { width: 27px; height: 27px; }
  .process-card h3 { font-size: 17px; }
  .process-card p { font-size: 14px; }
  .process-arrow { display: block; font-size: 22px; line-height: 1; transform: rotate(90deg); }
  .center-note { margin-top: 21px; font-size: 24px; }

  .team { padding-block: 70px; }
  .team-heading { display: block; }
  .team h2 { font-size: clamp(43px, 9vw, 58px); }
  .team-note { margin: 20px 0 0 42%; font-size: 13px; }
  .team-note-arrow { display: none; }
  .team-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .agent-card { display: grid; min-height: 0; grid-template-columns: clamp(88px, 24vw, 112px) minmax(0, 1fr); align-items: center; column-gap: 16px; row-gap: 5px; padding: 16px; border-radius: 12px; }
  .agent-card > .avatar { grid-column: 1; grid-row: 1 / span 3; width: clamp(88px, 24vw, 112px); height: clamp(88px, 24vw, 112px); margin: 0; }
  .agent-card h3 { grid-column: 2; grid-row: 1; align-self: end; font-size: 20px; }
  .agent-card .role { grid-column: 2; grid-row: 2; min-height: 0; margin-bottom: 0; font-size: 12px; }
  .agent-card strong { grid-column: 2; grid-row: 3; align-self: start; margin-bottom: 0; font-size: 14px; }
  .agent-card p:not(.role) { grid-column: 1 / -1; margin-top: 5px; font-size: 13px; }

  .personalisation.section-shell { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding: 72px 24px; }
  .personalisation h2 { font-size: clamp(44px, 9vw, 60px); }
  .personalisation .lead { font-size: 16px; }
  .check-list { gap: 11px; margin-top: 20px; font-size: 16px; }
  .check-icon { width: 23px; height: 23px; flex-basis: 23px; }
  .workflow-visual { min-height: 0; grid-template-columns: 1fr; gap: 14px; }
  .workflow-box { min-height: 0; padding: 20px; font-size: 14px; }
  .workflow-box strong { margin-bottom: 12px; font-size: 18px; }
  .workflow-box .profile-row { grid-template-columns: minmax(78px, .7fr) 1fr; gap: 12px; padding: 8px 0; }
  .workflow-arrow { display: none; }
  .mini-avatars .avatar { width: 40px; height: 40px; }
  .team-mini small { font-size: 14px; }
  .workflow-loop { display: none; }
  .workflow-mobile-link { display: block; width: 48px; height: 50px; justify-self: center; margin: -3px 0; overflow: visible; }
  .workflow-mobile-link path { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.2,.7,.25,1); }
  .personalisation.reveal-pending:not(.is-visible) .workflow-mobile-link path { stroke-dashoffset: 1; }
  .personalisation.is-visible .workflow-mobile-link path:first-child { stroke-dashoffset: 0; transition-delay: .52s; }
  .personalisation.is-visible .workflow-mobile-link path:last-child { stroke-dashoffset: 0; transition-delay: .82s; }

  .watch.section-shell { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; gap: 34px; padding: 76px 24px; }
  .watch.section-shell { padding-bottom: 42px; }
  .watch h2 { font-size: clamp(46px, 10vw, 64px); }
  .watch-copy .lead { font-size: 17px; }
  .watch-benefits { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .watch-benefit:last-child { grid-column: auto; }
  .watch-benefit { font-size: 15px; }
  .watch-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; }
  .watch-icon svg { width: 24px; height: 24px; }
  .watch-visual { min-height: 0; grid-template-columns: 1fr; padding: 0 0 54px; }
  .watch-orbit, .watch-rays { display: none; }
  .opportunity-card { width: 100%; max-width: 590px; padding: 22px; }
  .opp-top .avatar { width: 54px; height: 54px; }
  .opp-meta span + span { padding-left: 0; border-left: 0; }
  .watch-note-wrap { position: absolute; top: auto; right: 0; bottom: 0; grid-column: auto; width: auto; }
  .watch-note-wrap .hand-note { margin: 0; font-size: 15px; text-align: right; }
  .watch-note-wrap svg { top: -8px; left: -42px; width: 54px; transform: rotate(30deg); }
  .mcp-promo { grid-column: auto; grid-template-columns: 54px 1fr; gap: 16px; padding: 18px; border-radius: 15px; }
  .mcp-mark { width: 50px; height: 50px; border-radius: 12px; }
  .mcp-mark img { width: 32px; height: 32px; }
  .mcp-copy { padding-left: 14px; }
  .mcp-copy small { font-size: 10px; }
  .mcp-copy p { font-size: 14px; }
  .mcp-button { grid-column: 1 / -1; min-height: 48px; justify-content: space-between; border-radius: 12px; font-size: 14px; }

  .pricing { min-height: 0; padding: 48px 0 72px; }
  .pricing h2 { font-size: clamp(48px, 10vw, 66px); }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 29px; }
  .price-card, .commission-card { min-height: 0; padding: 22px; }
  .price-card strong { font-size: 43px; }
  .price-card span { font-size: 14px; }
  .price-card p { font-size: 14px; }
  .plus { display: none; }
  .price-reassurance { grid-column: 1 / -1; grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .price-promises { justify-content: center; gap: 7px; }
  .price-promise { min-height: 32px; gap: 6px; padding: 7px 9px; font-size: 11px; }
  .promise-mark { width: 14px; height: 14px; }
  .price-reassurance .button { width: fit-content; max-width: 100%; min-height: 52px; padding-inline: 17px; font-size: 14px; white-space: nowrap; }

  .action-banner.section-shell { width: calc(100% - 24px); min-height: 340px; border-radius: 16px; }
  .banner-note-wrap { top: auto; bottom: 18px; left: 6%; width: 145px; }
  .banner-note { font-size: 13px; }
  .banner-note-arrow { width: 70px; margin: 2px 0 0 32%; }
  .banner-note-arrow path { stroke-width: 2.5; }
  .banner-content { padding: 62px 22px 118px; }
  .banner-content h2 { font-size: clamp(34px, 8vw, 45px); white-space: normal; }
  .banner-content p { font-size: 14px; }
  .banner-content .button { min-height: 48px; padding-inline: 20px; font-size: 13px; }
  .chart-bars { right: 5%; bottom: 18px; width: 102px; height: 64px; gap: 4px; opacity: .8; }
  .chart-bars i { max-width: none; border-radius: 4px 4px 0 0; }
  .chart-bars .growth-curve path { stroke-width: 1.5; }

  #faq.faq { min-height: 0; grid-template-columns: 1fr; gap: 28px; padding-block: 72px; }
  #faq .faq-title h2 { margin-top: 0; font-size: clamp(48px, 10vw, 62px); }
  #faq .faq-list summary { padding: 17px 0; font-size: 14px; }
  #faq .faq-list details p { padding: 0 28px 17px 0; font-size: 13px; }

  .footer-inner { width: calc(100% - 40px); }
  .footer-main { min-height: 340px; grid-template-columns: 64px minmax(0, 1.15fr) minmax(220px, .85fr); gap: 22px; padding-block: 38px; }
  .footer-rail { min-height: 205px; padding-right: 14px; }
  .footer-rail span { font-size: 9px; }
  .footer-side-note { display: none; }
  .footer-kicker { margin-bottom: 18px; font-size: clamp(38px, 5.7vw, 58px); }
  .footer-subtitle { margin-bottom: 24px; font-size: clamp(15px, 1.8vw, 20px); }
  .footer-cta { min-height: 52px; padding: 13px 22px; font-size: 14px; }
  .footer-brand-lockup { width: 100%; gap: 0; }
  .site-footer .footer-mark { max-height: 180px; }
  .footer-brand-lockup span { margin-top: -8px; font-size: 19px; }
  .footer-bottom { min-height: 0; align-items: flex-start; flex-direction: column; gap: 16px; padding-block: 20px 24px; font-size: 11px; }
  .footer-bottom nav { width: 100%; justify-content: space-between; gap: 12px; }
}

@media (max-width: 760px) {
  .footer-main { min-height: 0; grid-template-columns: 1fr; gap: 26px; padding-block: 36px 30px; }
  .footer-rail { min-height: 0; justify-self: start; padding: 0 0 0 12px; border-right: 0; border-left: 1px solid rgba(255, 255, 255, .2); }
  .footer-rail span { font-size: 9px; line-height: 1.5; }
  .footer-copy { max-width: 560px; }
  .footer-kicker { max-width: 520px; font-size: clamp(42px, 9vw, 62px); }
  .footer-subtitle { font-size: 16px; }
  .footer-brand-lockup { width: min(100%, 330px); justify-self: end; }
  .site-footer .footer-mark { max-height: 165px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 16px; padding-block: 20px 24px; font-size: 11px; }
  .footer-bottom nav { width: 100%; justify-content: space-between; gap: 12px; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .site-header { gap: 8px; }
  .brand img { width: 72px; }
  .brand-team { font-size: 13px; }
  .header-cta { padding: 8px 10px; font-size: 11px; }
  .hero.section-shell { min-height: max(670px, calc(100svh - var(--header-height))); padding-inline: 17px; }
  .hero h1 { font-size: clamp(38px, 10vw, 44px); }
  .hero-agent-avatar { width: 38px; height: 38px; }
  .hero-intro { font-size: 14px; }
  .time-grid { grid-template-columns: 1fr; }
  .problem .split-copy { padding-inline: 20px; }
  .team-grid { grid-template-columns: 1fr; gap: 10px; }
  .agent-card { grid-template-columns: 82px minmax(0, 1fr); column-gap: 12px; padding: 13px; }
  .agent-card > .avatar { width: 82px; height: 82px; }
  .agent-card h3 { font-size: 18px; }
  .agent-card .role { font-size: 11px; line-height: 1.3; }
  .agent-card strong { font-size: 12px; line-height: 1.3; }
  .agent-card p:not(.role) { font-size: 11px; line-height: 1.45; }
  .workflow-box { padding: 16px; font-size: 13px; }
  .workflow-box strong { font-size: 16px; }
  .price-reassurance { grid-template-columns: 1fr; }
  .footer-bottom nav { flex-wrap: wrap; justify-content: flex-start; gap: 12px 20px; }
}

@media (max-width: 350px) {
  .agent-card { grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px; padding: 11px; }
  .agent-card > .avatar { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .hero-highlight svg path { stroke-dashoffset: 0; animation: none; }
  .center-note-highlight { background-size: 100% 100%; }
}