/* Landing Horizon : CSS natif, animations pilotées par le scroll (animation-timeline), sans dépendance. */
@font-face { font-family: Geist; src: url(fonts/geist-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Geist; src: url(fonts/geist-latin-wght-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #121211; --surface: #1a1a19; --surface-2: #222220; --line: rgb(252 252 251 / .09);
  --text: #f0efec; --muted: #a3a29d; --accent: #3987e5; --accent-ink: #fcfcfb;
  --ridge-far: #1f2c40; --ridge-mid: #18212f; --sky: #0e1420; --glow: rgb(57 135 229 / .28);
  --radius: 18px; --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f3f4f5; --surface: #fbfbfb; --surface-2: #e9ebee; --line: rgb(22 22 21 / .1);
    --text: #161615; --muted: #5d5d59; --accent: #2a72cc;
    --ridge-far: #c4d3e7; --ridge-mid: #dae3ee; --sky: #e6edf6; --glow: rgb(57 135 229 / .22);
    color-scheme: light;
  }
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: Geist, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1280px, 100% - 3rem); margin-inline: auto; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.muted { color: var(--muted); }
.eyebrow { font: 500 .75rem/1 'Geist Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.02; font-weight: 600; }
h2 { font-size: clamp(2.2rem, 5vw, 4rem); }
section { position: relative; }

/* grain : pseudo-élément fixe, jamais sur un conteneur qui défile */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* boutons : pilule partout */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.4rem; border-radius: 999px;
  font: 500 .95rem Geist, sans-serif; white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: transform .35s var(--ease), background .25s, border-color .25s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: color-mix(in oklab, var(--accent) 86%, white); }
.btn-ghost { border-color: var(--line); color: var(--text); background: color-mix(in oklab, var(--surface) 60%, transparent); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: color-mix(in oklab, var(--text) 30%, transparent); }
.btn i { font-size: 1.1rem; transition: transform .35s var(--ease); }
.btn:hover i.ti-arrow-right { transform: translateX(3px); }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 64px; display: flex; align-items: center;
  background: color-mix(in oklab, var(--bg) 70%, transparent); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: -.02em; font-size: 1.05rem; }
.brand img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; font-size: .92rem; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.nav .btn { height: 2.4rem; padding: 0 1.1rem; margin-left: auto; }
@media (max-width: 767px) { .nav-links { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- Hero : paysage en couches ---------- */
.hero { min-height: 100dvh; display: grid; align-items: center; overflow: clip; background: linear-gradient(to bottom, var(--sky), var(--bg) 92%); }
.scene { position: absolute; inset: 0; pointer-events: none; }
.scene > * { position: absolute; will-change: transform; }
.stars { inset: 0 0 40%; opacity: .7;
  background-image: radial-gradient(1px 1px at 12% 22%, var(--text) 50%, transparent 51%), radial-gradient(1px 1px at 28% 64%, var(--text) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, var(--text) 50%, transparent 51%), radial-gradient(1px 1px at 61% 48%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, var(--text) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 86% 36%, var(--text) 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 70%, var(--text) 50%, transparent 51%), radial-gradient(1px 1px at 5% 80%, var(--text) 50%, transparent 51%); }
@media (prefers-color-scheme: light) { .stars { opacity: 0; } }
.glow { left: 50%; bottom: 8%; width: 140vw; height: 70vh; translate: -50% 0; background: radial-gradient(closest-side, var(--glow), transparent); }
.dial { right: 9vw; bottom: 30%; width: clamp(180px, 26vw, 380px); aspect-ratio: 1; }
@media (max-width: 767px) { .dial { display: none; } }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .needle { transform-origin: 50% 50%; rotate: -34deg; }
.ridge { left: -5%; width: 110%; bottom: 0; height: 46vh; }
.ridge svg { width: 100%; height: 100%; }
.ridge-far { bottom: 14vh; } .ridge-mid { bottom: 5vh; }
.ridge-far path { fill: var(--ridge-far); } .ridge-mid path { fill: var(--ridge-mid); } .ridge-near path { fill: var(--bg); }
/* parallaxe souris : --mx/--my (-1..1) posés par landing.js ; le scroll anime `translate`, la souris `transform` */
.stars { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0); }
.dial { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0); }
.ridge-far { transform: translate3d(calc(var(--mx, 0) * -10px), 0, 0); }
.ridge-mid { transform: translate3d(calc(var(--mx, 0) * -22px), 0, 0); }
.ridge-near { transform: translate3d(calc(var(--mx, 0) * -38px), 0, 0); }

.hero-copy { position: relative; z-index: 2; padding-block: 6rem 22vh; max-width: 760px; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); margin-block: 1.4rem 1.4rem; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--accent); }
.hero p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--muted); max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

/* entrée du hero */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; translate: 0 22px; animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 110ms + 150ms); }
  @keyframes rise { to { opacity: 1; translate: 0 0; } }
  .dial .needle { animation: settle 2.4s var(--ease) .4s both; }
  @keyframes settle { from { rotate: -120deg; } }
}

/* ---------- Manifeste : mots révélés au scroll ---------- */
.manifesto { padding-block: 22vh 18vh; }
.manifesto p { font-size: clamp(1.9rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; max-width: 22ch; }
.manifesto .w { transition: color .3s; }
.manifesto .w.hl { color: var(--accent); }

/* ---------- Modules : panoramique horizontal ---------- */
.pan { height: 320vh; view-timeline: --pan block; }
.pan-sticky { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 3rem; }
.pan-head { display: grid; gap: 1rem; }
.pan-head h2 { max-width: 20ch; }
.pan-head p { color: var(--muted); max-width: 52ch; }
.pan-track { display: flex; gap: 1.25rem; width: max-content; padding-inline: max(1.5rem, (100vw - 1280px) / 2); }
.mod {
  --x: 50%; --y: 50%;
  position: relative; flex: 0 0 clamp(270px, 26vw, 360px); height: clamp(340px, 50vh, 440px); padding: 1.8rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; isolation: isolate;
}
.mod::before { /* bordure éclairée sous le pointeur */
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--x) var(--y), color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%);
}
.mod:hover::before { opacity: 1; }
.mod:nth-child(4n+1) { background: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--accent) 30%, var(--surface)), var(--surface) 60%); }
.mod:nth-child(4n+2) { background: radial-gradient(color-mix(in oklab, var(--text) 14%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--surface); }
.mod:nth-child(4n+3) { background: repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in oklab, var(--text) 5%, transparent) 14px 15px), var(--surface-2); }
.mod i { font-size: 3.2rem; color: var(--accent); }
.mod h3 { font-size: 1.7rem; margin-bottom: .6rem; }
.mod p { color: var(--muted); max-width: 30ch; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .pan-track { animation: pan linear both; animation-timeline: --pan; animation-range: contain 0% contain 100%; }
    @keyframes pan { to { transform: translateX(calc(-100% + 100vw)); } }
    .manifesto .w { opacity: .14; animation: word linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
    @keyframes word { to { opacity: 1; } }
    .stars { animation: p-stars linear both; } .glow { animation: p-glow linear both; } .dial { animation: p-dial linear both; }
    .ridge-far { animation: p-far linear both; } .ridge-mid { animation: p-mid linear both; } .hero-copy { animation: p-copy linear both; }
    .scene > *, .hero-copy { animation-timeline: scroll(root); animation-range: 0 100vh; }
    .dial .needle { animation: settle 2.4s var(--ease) .4s both, sweep linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
    @keyframes p-stars { to { translate: 0 30vh; } }
    @keyframes p-glow { to { translate: -50% 18vh; opacity: .4; } }
    @keyframes p-dial { to { translate: 0 34vh; } }
    @keyframes p-far { to { translate: 0 22vh; } }
    @keyframes p-mid { to { translate: 0 10vh; } }
    @keyframes p-copy { to { translate: 0 18vh; opacity: 0; } }
    @keyframes sweep { to { rotate: 62deg; } }
  }
}
/* repli : sans scroll-timeline, en mouvement réduit ou sur mobile, simple défilement horizontal */
@supports not (animation-timeline: view()) { .pan { height: auto; } .pan-sticky { position: static; height: auto; padding-block: 18vh 10vh; } .pan-scroll { overflow-x: auto; scroll-snap-type: x mandatory; } .mod { scroll-snap-align: center; } }
@media (prefers-reduced-motion: reduce), (max-width: 767px) { .pan { height: auto; } .pan-sticky { position: static; height: auto; padding-block: 14vh 8vh; } .pan-scroll { overflow-x: auto; scroll-snap-type: x mandatory; } .mod { scroll-snap-align: center; } }

/* ---------- Agent : démo de confirmation ---------- */
.agent { padding-block: 20vh; }
.agent .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.agent h2 { margin-block: 1.2rem 1.4rem; max-width: 13ch; }
.agent > .wrap > div > p { color: var(--muted); max-width: 44ch; font-size: 1.08rem; }
.tiers { list-style: none; padding: 0; margin-top: 2.4rem; display: grid; gap: 1.2rem; }
.tiers li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem 1rem; align-items: start; }
.tiers i { grid-row: span 2; font-size: 1.5rem; color: var(--accent); padding-top: .1rem; }
.tiers b { font-weight: 600; } .tiers span { color: var(--muted); font-size: .95rem; }

.demo { position: relative; padding: 1.4rem; border-radius: calc(var(--radius) + 8px); border: 1px solid var(--line);
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 12%, var(--surface)), var(--surface) 55%); box-shadow: 0 30px 80px -30px rgb(10 20 40 / .5); }
.bubble { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface-2); font-size: .98rem; margin-bottom: 1rem; }
.bubble .who { font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.confirm { border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg); padding: 1.2rem; transition: border-color .4s; }
.confirm .row { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--muted); }
.confirm h3 { font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.3; margin-block: .6rem 1.1rem; font-weight: 500; }
.confirm .acts { display: flex; gap: .6rem; }
.confirm .btn { height: 2.5rem; padding: 0 1rem; font-size: .9rem; }
.confirm .result { display: none; align-items: center; gap: .6rem; font-size: .95rem; }
.confirm[data-state='done'] { border-color: color-mix(in oklab, var(--accent) 60%, transparent); }
.confirm[data-state='done'] .acts, .confirm[data-state='refused'] .acts { display: none; }
.confirm[data-state='done'] .result, .confirm[data-state='refused'] .result { display: flex; }
.confirm .result i { font-size: 1.3rem; color: var(--accent); }
.confirm .result button { margin-left: auto; background: none; border: 0; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.confirm[data-state='loading'] h3, .confirm[data-state='loading'] .acts { visibility: hidden; }
.confirm[data-state='loading'] { background: linear-gradient(90deg, var(--bg) 30%, var(--surface-2) 50%, var(--bg) 70%) 0 0 / 300% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -100% 0; } }
.journal { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .4rem; font-size: .8rem; color: var(--muted); }
.journal li { display: flex; gap: .8rem; animation: rise .5s var(--ease) both; }
.journal:empty { display: none; }
@media (max-width: 899px) { .agent .wrap { grid-template-columns: 1fr; } }

/* ---------- Confiance : pile collante ---------- */
.trust { padding-block: 8vh 16vh; }
.trust > .wrap > h2 { max-width: 16ch; margin-bottom: 8vh; }
.stack { display: grid; gap: 14vh; }
.card {
  position: sticky; top: calc(96px + var(--i) * 26px); min-height: 56vh; border-radius: calc(var(--radius) + 10px); padding: clamp(1.6rem, 4vw, 3.4rem);
  border: 1px solid var(--line); background: var(--surface); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; overflow: hidden;
  box-shadow: 0 -24px 60px -30px rgb(0 0 0 / .45);
}
.card:nth-child(2) { background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.card:nth-child(3) { background: radial-gradient(90% 120% at 0% 100%, color-mix(in oklab, var(--accent) 22%, var(--surface)), var(--surface) 70%); }
.card:nth-child(4) { background: var(--accent); color: var(--accent-ink); }
.card:nth-child(4) p { color: color-mix(in oklab, var(--accent-ink) 82%, transparent); }
.card h3 { font-size: clamp(1.9rem, 4vw, 3.2rem); max-width: 14ch; margin-bottom: 1rem; }
.card p { color: var(--muted); max-width: 42ch; font-size: 1.08rem; }
.card > i { font-size: clamp(6rem, 16vw, 13rem); line-height: .8; opacity: .9; color: var(--accent); }
.card:nth-child(4) > i { color: var(--accent-ink); opacity: .35; }
@media (max-width: 767px) { .card { grid-template-columns: 1fr; } .card > i { order: -1; font-size: 4.5rem; } }

/* ---------- Bandeau d'intégrations (seul marquee de la page) ---------- */
.logos { padding-block: 6vh 14vh; overflow: hidden; }
.logos p { text-align: center; color: var(--muted); margin-bottom: 2.4rem; }
.marquee { display: flex; width: max-content; gap: 5rem; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee img { height: 34px; width: auto; opacity: .75; }
@media (prefers-reduced-motion: no-preference) { .marquee { animation: slide 38s linear infinite; } .logos:hover .marquee { animation-play-state: paused; } @keyframes slide { to { transform: translateX(calc(-50% - 2.5rem)); } } }
@media (prefers-reduced-motion: reduce) { .marquee { flex-wrap: wrap; justify-content: center; width: auto; mask-image: none; } .marquee [aria-hidden] { display: none; } }

/* ---------- Appel final ---------- */
.final { padding-block: 16vh 18vh; text-align: center; overflow: clip; }
.final h2 { font-size: clamp(2.6rem, 7vw, 6rem); max-width: 14ch; margin: 0 auto 1.4rem; }
.final p { color: var(--muted); font-size: 1.1rem; margin-bottom: 2.4rem; }
.final .halo { position: absolute; left: 50%; top: 50%; width: min(900px, 120vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; border-radius: 50%;
  border: 1px solid var(--line); box-shadow: inset 0 0 0 80px color-mix(in oklab, var(--accent) 4%, transparent), inset 0 0 0 160px color-mix(in oklab, var(--accent) 3%, transparent); }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .final .halo { animation: halo linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  @keyframes halo { from { scale: .55; opacity: 0; } }
} }

footer { border-top: 1px solid var(--line); padding-block: 2.4rem; font-size: .88rem; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }

/* ---------- Page de mise en route ---------- */
.setup { padding-block: 8rem 6rem; }
.setup-head { max-width: 760px; margin-bottom: 4rem; }
.setup-head h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); margin-block: 1.2rem 1.2rem; }
.setup-head p { color: var(--muted); font-size: 1.1rem; max-width: 52ch; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 899px) { .setup-grid { grid-template-columns: 1fr; } }
form { display: grid; gap: 2rem; }
.field { display: grid; gap: .5rem; }
.field label, fieldset legend { font-weight: 500; font-size: .95rem; }
.field small { color: var(--muted); font-size: .85rem; }
.field input {
  height: 3.2rem; padding: 0 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: 1rem Geist, sans-serif; transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: color-mix(in oklab, var(--muted) 85%, transparent); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.field input[aria-invalid='true'] { border-color: #e5484d; }
.field .err { color: #ff8589; font-size: .85rem; min-height: 1.2em; }
@media (prefers-color-scheme: light) { .field .err { color: #c3262c; } }
fieldset { border: 0; padding: 0; display: grid; gap: .8rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); cursor: pointer; user-select: none; font-size: .92rem; transition: background .2s, border-color .2s, color .2s, transform .3s var(--ease);
}
.chip span:active { transform: scale(.96); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.plan { position: sticky; top: 88px; border-radius: calc(var(--radius) + 8px); border: 1px solid var(--line); background: var(--surface); padding: clamp(1.4rem, 3vw, 2.2rem); }
.plan-top { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.plan-top h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.total { font-size: 3rem; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--accent); }
.total small { font-size: 1rem; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-left: .2rem; }
.urls { display: grid; gap: .5rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.urls div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.urls span:first-child { color: var(--muted); }
.urls .mono { overflow-wrap: anywhere; text-align: right; }
.urls .placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }
.steps { list-style: none; padding: 1.4rem 0 0; display: grid; gap: 0; position: relative; }
.steps li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .2rem .9rem; padding-bottom: 1.2rem; position: relative; }
.steps li::before { content: ''; position: absolute; left: calc(.8rem - 1px); top: 1.4rem; bottom: .1rem; width: 2px; background: var(--line); }
.steps li:last-child::before { display: none; }
.steps .dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; font-size: .75rem; color: var(--accent); background: var(--surface); position: relative; z-index: 1; }
.steps b { font-weight: 600; }
.steps .min { font-size: .85rem; color: var(--muted); }
.steps p { grid-column: 2 / 4; color: var(--muted); font-size: .9rem; }
.steps li.new { animation: rise .5s var(--ease) both; }
.needs { margin-top: .6rem; padding: 1.2rem; border-radius: var(--radius); background: var(--surface-2); }
.needs h3 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .7rem; }
.needs ul { padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .92rem; color: var(--muted); }
.plan-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; align-items: center; }
.toast { font-size: .88rem; color: var(--accent); opacity: 0; transition: opacity .3s; }
.toast.on { opacity: 1; }