/* Amaris public website. Same palette and fonts as the app (index.html), fonts self-hosted. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --bg:#F7F3EC; --surface:#FFFFFF; --side:#EFE9DF; --ink:#1E1C1A; --muted:#625D55; --line:#E3DDD2;
  --accent:#000091; --accent-soft:#E3E6F7; --pos:#2F7A1F; --s-sub:#000091; --s-otp:#E4794A;
  --f-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body:"Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --r:14px; --max:1120px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#151311; --surface:#1F1C19; --side:#1A1815; --ink:#EEE9E1; --muted:#A9A196; --line:#36312B;
  --accent:#9BA8F2; --accent-soft:#252840; --pos:#6CC25A; --s-sub:#8585F6; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151311; --surface:#1F1C19; --side:#1A1815; --ink:#EEE9E1; --muted:#A9A196; --line:#36312B;
  --accent:#9BA8F2; --accent-soft:#252840; --pos:#6CC25A; --s-sub:#8585F6; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--f-display);font-weight:650;letter-spacing:-.015em;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--surface);padding:10px 14px;border-radius:99px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}

/* header */
.head{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.head.scrolled{border-bottom-color:var(--line)}
.head .wrap{display:flex;align-items:center;gap:24px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
/* wordmark: "amaris" with the i dot in the accent colour */
.wm{font-family:var(--f-display);font-weight:650;font-size:25px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.wm-i{position:relative;display:inline-block}
.wm-i::after{content:"";position:absolute;left:50%;top:.08em;width:.2em;height:.2em;margin-left:-.1em;border-radius:50%;background:var(--accent)}
.links{display:flex;gap:4px;margin-left:auto}
.links a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px;padding:8px 12px;border-radius:99px}
.links a:hover{color:var(--ink);background:var(--side)}
.head .actions{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:600;font-size:15px;border-radius:99px;padding:11px 20px;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--surface)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-sm{padding:8px 16px;font-size:14px}
/* header drop-downs: language and appearance, right-most */
.panel{display:contents}
.links .panel-login{display:none}
.links{order:1}
.head .actions{order:2}
.prefs{order:3;display:flex;gap:6px;align-items:center}
.menu-btn{order:4}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 9px 0 10px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--ink);background:var(--side)}
.dd-btn svg,.dd-menu svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dd-btn .chev{width:14px;height:14px;opacity:.7;transition:transform .2s ease}
.dd-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dd-btn .ti{display:inline-flex}
.dd svg .fill{fill:currentColor;stroke:none}
.dd-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;min-width:170px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(30,28,26,.12)}
.dd-menu[hidden]{display:none}
.dd-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.dd-menu button:hover{background:var(--side)}
.dd-menu button[aria-pressed="true"]{background:var(--accent-soft);font-weight:600}
.dd-menu button[aria-pressed="true"]::after{content:"";margin-left:auto;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){.dd-btn .chev{transition:none}}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:99px;width:40px;height:40px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* hero */
.hero{padding:72px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.hero h1{font-size:clamp(36px,5vw,56px)}
.hero .lead{font-size:19px;color:var(--muted);margin-top:20px;max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:14px;color:var(--muted)}
.fine span::before{content:"✓";color:var(--pos);font-weight:700;margin-right:6px}

/* dashboard mock */
.mock{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.3)}
.mock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.mock-top b{font-family:var(--f-display);font-size:17px;font-weight:650}
.chip{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 9px}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kpi{background:var(--bg);border-radius:12px;padding:12px 14px}
.kpi small{display:block;font-size:12px;color:var(--muted)}
.kpi strong{display:block;font-family:var(--f-display);font-size:22px;font-weight:650;margin-top:2px}
.kpi em{font-style:normal;font-size:12px;font-weight:600;color:var(--pos)}
.chart{margin-top:12px;background:var(--bg);border-radius:12px;padding:12px 14px 8px}
.chart small{font-size:12px;color:var(--muted)}
.chart svg{display:block;width:100%;height:auto;margin-top:6px}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .l1{stroke:var(--s-sub);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .l2{stroke:var(--s-otp);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart .a1{fill:color-mix(in srgb,var(--s-sub) 10%,transparent)}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle;background:var(--s-sub)}
.legend i.o{background:var(--s-otp)}

/* sections */
section{padding:72px 0}
.sec-head{max-width:640px;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.4vw,38px)}
.sec-head p{color:var(--muted);font-size:18px;margin-top:14px}
.alt{background:var(--side)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{font-size:21px}
.card p{color:var(--muted);margin-top:10px}
.ico{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:18px}
.ico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.card li{position:relative;padding-left:20px;font-size:15px}
.card li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tag{display:inline-block;margin-left:8px;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 8px;vertical-align:middle}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{counter-increment:s;padding:26px;border-top:2px solid var(--ink)}
.step::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--f-display);font-size:15px;font-weight:650;color:var(--accent);margin-bottom:12px}
.step h3{font-size:20px}
.step p{color:var(--muted);margin-top:8px}

/* pricing */
.price{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.price > div{padding:36px}
.price .left{border-right:1px solid var(--line)}
.amount{font-family:var(--f-display);font-size:56px;font-weight:650;letter-spacing:-.02em;margin-top:12px}
.amount small{font-family:var(--f-body);font-size:16px;font-weight:500;color:var(--muted);letter-spacing:0}
.price .left p{color:var(--muted);margin-top:8px}
.price .left .btn{margin-top:24px}
.price ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.price li{display:flex;gap:12px}
.price li::before{content:"✓";color:var(--pos);font-weight:700}

/* faq */
.faq{max-width:780px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:22px;line-height:1;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:10px}

/* final cta */
.final{text-align:center}
.final .box{background:var(--accent);color:#fff;border-radius:24px;padding:56px 24px}
:root[data-theme="dark"] .final .box{color:var(--bg)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .final .box{color:var(--bg)}}
.final h2{font-size:clamp(28px,3.6vw,40px)}
.final p{margin:14px auto 0;max-width:34em;opacity:.85;font-size:18px}
.final .cta-row{justify-content:center}
.final .btn-primary{background:var(--surface);color:var(--ink)}
.final .btn-ghost{color:inherit;border-color:color-mix(in srgb,currentColor 40%,transparent)}

/* footer */
.foot{padding:40px 0 56px;color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink)}

/* legal page */
.legal{padding:56px 0 24px}
.legal .wrap{max-width:780px}
.legal h1{font-size:clamp(30px,4vw,42px)}
.legal h2{font-size:22px;margin-top:40px}
.legal p,.legal li{color:var(--muted);margin-top:10px}
.legal .todo{background:var(--accent-soft);color:var(--ink);border-radius:6px;padding:0 4px}

/* responsive */
/* header: menu button once links, buttons and drop-downs no longer fit on one line */
@media (max-width: 1060px){
  .panel,.head .actions .login{display:none}
  .menu-btn{display:grid;place-items:center;margin-left:0;flex:none}
  .head .actions{margin-left:auto}
  .head .wrap{gap:12px}
  .head.open .panel{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 16px}
  .head.open .links{flex-direction:column;margin-left:0}
  .head.open .links a{padding:12px}
  .head.open .links .panel-login{display:block;color:var(--ink);font-weight:600}
  .prefs{margin-top:8px;padding:14px 12px 0;border-top:1px solid var(--line)}
  .dd-menu{right:auto;left:0}
}
@media (max-width: 760px){.head.open .panel{padding:8px 16px 16px}}
@media (max-width: 960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .grid3,.steps{grid-template-columns:1fr 1fr}
}
@media (max-width: 760px){
  .wrap{padding:0 16px}
  .hero{padding:40px 0 24px}
  .hero .lead{font-size:17px}
  section{padding:56px 0}
  .grid3,.grid2,.steps,.price{grid-template-columns:1fr}
  .price .left{border-right:0;border-bottom:1px solid var(--line)}
  .price > div{padding:26px}
}
@media (max-width: 420px){
  .head .actions .btn{padding:8px 12px}
  .kpi strong{font-size:19px}
}
.card-gap{margin-top:18px}

/* "every invoice books itself": the finance sequence from the pitch (Factur-X → entry → CA3 → FEC) */
.auto{--gold:#C9952A;background:color-mix(in srgb,var(--accent-soft) 45%,var(--bg))}
.auto .sec-head{max-width:none;text-align:center}
.auto h2 em{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0}
.pipe{position:relative;margin-top:44px}
.pipe ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pipe-line{position:absolute;left:12.5%;right:12.5%;top:118px;height:2px}
.pipe-line i{position:absolute;inset:0;background:var(--gold);border-radius:2px;transform-origin:left}
.pipe-line b{position:absolute;left:0;top:1px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px color-mix(in srgb,var(--gold) 20%,transparent);opacity:0}
.pk{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 18px 22px;box-shadow:0 14px 34px rgba(30,28,26,.06)}
.pk .ok{position:absolute;top:-13px;left:18px;width:28px;height:28px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.pk .ok svg{width:16px;height:16px;fill:none;stroke:var(--surface);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pk .num{position:absolute;top:10px;right:16px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
.pk h3{font-size:20px;color:var(--accent);margin-top:18px}
.pk p{color:var(--muted);font-size:15px;margin-top:8px;line-height:1.45}
.ill{position:relative;height:120px;margin-top:10px;border-radius:12px;background:var(--side);overflow:hidden}
.ill i,.ill b{display:block;border-radius:3px}
.ill1 .doc{position:absolute;left:50%;top:14px;width:76px;height:96px;margin-left:-46px;background:var(--surface);border-radius:6px;box-shadow:0 6px 16px rgba(30,28,26,.12);padding:11px 10px}
.ill1 .doc i{height:4px;width:75%;background:var(--line);margin-top:7px}
.ill1 .doc i:nth-child(3){width:60%}.ill1 .doc i:nth-child(5){width:48%}
.ill1 .doc .h{height:6px;width:55%;background:var(--ink);opacity:.85;margin:0 0 4px}
.ill1 .doc .tot{position:absolute;right:10px;bottom:11px;width:38%;height:6px;background:var(--ink);opacity:.8;margin:0}
.ill1 .fx{position:absolute;left:50%;top:62px;margin-left:-6px;background:var(--accent);color:var(--surface);font-size:12px;font-weight:700;padding:5px 9px;border-radius:7px;box-shadow:0 6px 14px color-mix(in srgb,var(--accent) 30%,transparent);transform:rotate(-4deg)}
.ill2{padding:20px 18px;display:grid;gap:13px;align-content:center}
.ill2 .vr{position:absolute;left:58%;top:14px;bottom:14px;width:1.5px;background:var(--line);border-radius:0}
.ill2 .er{position:relative;height:6px}
.ill2 .er i{position:absolute;left:0;width:26%;height:6px;background:var(--muted);opacity:.55}
.ill2 .er:nth-child(odd) i{width:18%}
.ill2 .er b{position:absolute;height:7px;top:-.5px;width:22%}
.ill2 .d b{left:calc(58% - 24%);background:var(--accent)}
.ill2 .c b{left:calc(58% + 7%);background:var(--gold)}
.ill3{padding:16px 18px;display:grid;gap:9px;align-content:center}
.ill3 .fl{display:flex;align-items:center;gap:12px}
.ill3 .fl i{flex:none;width:22%;height:5px;background:var(--muted);opacity:.45}
.ill3 .fl b{flex:1;height:9px;background:var(--accent);border-radius:2px;transform-origin:left}
.ill4 .file{position:absolute;left:50%;top:13px;width:72px;height:94px;margin-left:-48px;background:var(--surface);border-radius:6px 20px 6px 6px;box-shadow:0 6px 16px rgba(30,28,26,.12);padding:12px 11px}
.ill4 .file b{font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--accent);border-radius:0}
.ill4 .file i{height:4px;background:var(--line);margin-top:8px}
.ill4 .file i:nth-child(3){margin-right:12px}.ill4 .file i:nth-child(4){margin-right:6px}
.ill4 .chk{position:absolute;left:50%;top:58px;margin-left:6px;width:42px;height:42px}
.ill4 .chk circle{fill:var(--gold)}
.ill4 .chk path{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.auto-cap{text-align:center;margin-top:40px;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-style:italic;font-size:clamp(20px,2.4vw,26px);line-height:1.35}
.auto-cap span,.auto-cap b{display:block}
.auto-cap b{font-weight:400;color:var(--accent)}
:root[data-theme="dark"] .pk{box-shadow:0 14px 34px rgba(0,0,0,.3)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pk{box-shadow:0 14px 34px rgba(0,0,0,.3)}}
@media (max-width: 900px){.pipe ol{grid-template-columns:1fr 1fr;gap:30px 18px}.pipe-line{display:none}}
@media (max-width: 520px){.pipe ol{grid-template-columns:1fr}}

/* hero glow: two soft lights drifting slowly behind the headline */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative}
.glow{position:absolute;inset:0;pointer-events:none}
.glow i{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%);left:-160px;top:-180px}
.glow i + i{left:auto;right:-140px;top:120px;background:radial-gradient(circle,color-mix(in srgb,#C9952A 10%,transparent),transparent 65%)}

/* motion: only when the visitor allows it (html.motion is set by site.js) */
.motion .glow i{animation:drift 26s ease-in-out infinite alternate}
.motion .glow i + i{animation-duration:32s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(140px,90px)}}

.motion .hero .eyebrow,.motion .hero .lead,.motion .hero .cta-row,.motion .hero .fine,.motion .hero .mock{opacity:0;transform:translate3d(0,28px,0)}
.motion .hero h1{clip-path:inset(0 0 100% 0);transform:translate3d(0,40px,0)}
.motion .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s cubic-bezier(.33,1,.68,1) var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.motion .rv.in{opacity:1;transform:none}
.motion .mask{clip-path:inset(0 0 100% 0);transform:translate3d(0,40px,0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s),transform 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.motion .mask.in{clip-path:inset(0 0 -10% 0);transform:none}
.motion .step{border-top-color:transparent}
.motion .step::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.motion .step.in::after{transform:scaleX(1)}
.step{position:relative}

.motion .chart .l1,.motion .chart .l2{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1) .5s}
.motion .chart .l2{transition-delay:.75s}
.motion .chart .a1{opacity:0;transition:opacity 1.2s ease 1.4s}
.motion .mock.in .chart .l1,.motion .mock.in .chart .l2{stroke-dashoffset:0}
.motion .mock.in .chart .a1{opacity:1}

/* finance sequence: plays once when it scrolls into view (.go is added by site.js) */
.motion .pipe-line i{transform:scaleX(0);transition:transform 3.4s linear .5s}
.motion .pipe.go .pipe-line i{transform:scaleX(1)}
.motion .pipe.go .pipe-line b{animation:token 3.4s linear .5s both}
@keyframes token{0%{left:0;opacity:0}8%{opacity:1}88%{left:100%;opacity:1}100%{left:100%;opacity:0}}
.motion .pk{opacity:0;transform:translate3d(0,26px,0);transition:opacity .7s ease var(--t),transform .9s cubic-bezier(.16,1,.3,1) var(--t)}
.motion .pk:nth-child(1){--t:0s}.motion .pk:nth-child(2){--t:1.25s}.motion .pk:nth-child(3){--t:2.4s}.motion .pk:nth-child(4){--t:3.5s}
.motion .pk .ok{transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1) calc(var(--t) + .75s),opacity .3s ease calc(var(--t) + .75s)}
.motion .ill1 .fx{opacity:0;transform:translate3d(14px,0,0) rotate(-4deg);transition:opacity .5s ease calc(var(--t) + .45s),transform .7s cubic-bezier(.16,1,.3,1) calc(var(--t) + .45s)}
.motion .ill2 .er{opacity:0;transform:translate3d(12px,0,0);transition:opacity .45s ease var(--e),transform .55s cubic-bezier(.16,1,.3,1) var(--e)}
.motion .ill2 .er:nth-of-type(1){--e:calc(var(--t) + .3s)}.motion .ill2 .er:nth-of-type(2){--e:calc(var(--t) + .45s)}.motion .ill2 .er:nth-of-type(3){--e:calc(var(--t) + .6s)}.motion .ill2 .er:nth-of-type(4){--e:calc(var(--t) + .75s)}
.motion .ill3 .fl b{transform:scaleX(0);transition:transform .6s cubic-bezier(.16,1,.3,1) var(--e)}
.motion .ill3 .fl:nth-child(1){--e:calc(var(--t) + .3s)}.motion .ill3 .fl:nth-child(2){--e:calc(var(--t) + .42s)}.motion .ill3 .fl:nth-child(3){--e:calc(var(--t) + .54s)}.motion .ill3 .fl:nth-child(4){--e:calc(var(--t) + .66s)}.motion .ill3 .fl:nth-child(5){--e:calc(var(--t) + .78s)}
.motion .ill4 .chk{opacity:0;transform:scale(.6);transition:opacity .3s ease calc(var(--t) + .4s),transform .5s cubic-bezier(.16,1,.3,1) calc(var(--t) + .4s)}
.motion .ill4 .chk path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease calc(var(--t) + .75s)}
.motion .pipe.go .pk,.motion .pk.go,.motion .pipe.go .ill1 .fx,.motion .pk.go .ill1 .fx,.motion .pipe.go .ill2 .er,.motion .pk.go .ill2 .er{opacity:1;transform:none}
.motion .pipe.go .ill1 .fx,.motion .pk.go .ill1 .fx{transform:rotate(-4deg)}
.motion .pipe.go .pk .ok,.motion .pk.go .ok,.motion .pipe.go .ill4 .chk,.motion .pk.go .ill4 .chk{opacity:1;transform:none}
.motion .pipe.go .ill3 .fl b,.motion .pk.go .ill3 .fl b{transform:none}
.motion .pipe.go .ill4 .chk path,.motion .pk.go .ill4 .chk path{stroke-dashoffset:0}
.motion .auto-cap span,.motion .auto-cap b{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.motion .auto-cap.go span{transition-delay:.2s}.motion .auto-cap.go b{transition-delay:.55s}
.motion .auto-cap.go span,.motion .auto-cap.go b{opacity:1;transform:none}
@media (max-width: 900px){.motion .pk:nth-child(n){--t:0s}}  /* phones: each card plays as it scrolls in */

/* access-request form, inside the final call to action */
.req{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;text-align:left;max-width:720px;margin:32px auto 0}
.req[hidden],.rq-done[hidden]{display:none}
.req .wide{grid-column:1/-1}
.req .f{display:flex;flex-direction:column;gap:6px}
.req label{font-size:14px;font-weight:600}
.req small{font-weight:400;opacity:.75}
.req input,.req select,.req textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid transparent;border-radius:10px;padding:11px 12px;width:100%}
.req textarea{resize:vertical;min-height:84px}
.req input:focus-visible,.req select:focus-visible,.req textarea:focus-visible{outline:2px solid var(--surface);outline-offset:2px}
.req .consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.45}
.req .consent input{width:18px;height:18px;margin:1px 0 0;flex:none;padding:0;accent-color:var(--ink)}
.req .consent a{color:inherit;white-space:nowrap}
.req .cta-row{justify-content:flex-start;margin-top:6px}
.req .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.final .rq-err{margin:0;max-width:none;opacity:1;font-size:14px;font-weight:600;background:color-mix(in srgb,var(--surface) 92%,transparent);color:#B3261E;border-radius:8px;padding:8px 12px}
.rq-done{max-width:560px;margin:28px auto 0}
.rq-done h3{font-size:22px}
.final .rq-done p{margin-top:10px}
.rq-done:focus{outline:none}
.final .rq-alt{font-size:14px;margin-top:22px}
.rq-alt a{color:inherit}
@media (max-width: 760px){.req{grid-template-columns:1fr}}
.nf{min-height:60vh}
.nf .cta-row{margin-top:28px}
.req .f input,.req .f select{height:47px}

/* integrations: cards by category, like the app's Integrations page (brand marks: Simple Icons, CC0) */
.int-card-site{padding-bottom:28px}
.ints{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}
.int-col{display:flex;flex-direction:column;gap:10px}
.int-col h4{margin:0 0 2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ic{position:relative;display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 12px 12px 12px;min-height:76px}
.ic-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ic-txt b{font-size:15px;font-weight:650}
.ic-txt span{font-size:13px;line-height:1.35;color:var(--muted)}
.il{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:18px;color:#fff}
.il svg{width:22px;height:22px;fill:currentColor}
.il-google_ads{background:#4285F4;color:#fff}
.il-meta_ads{background:#0467DF;color:#fff}
.il-brevo{background:#0B996E;color:#fff}
.il-stripe{background:#635BFF;color:#fff}
.il-shopify{background:#7AB55C;color:#fff}
.il-letter{background:#24252B;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.ist{position:absolute;top:8px;right:10px;font-size:11px;font-weight:600;color:var(--muted)}
.ist.on{color:var(--pos)}
.ist.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:1px}
.ic-soon{border-style:dashed}
.ic-soon .il{filter:saturate(.55);opacity:.8}
.ic .ic-txt{padding-right:52px}
@media (max-width: 1000px){.ints{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.ints{grid-template-columns:1fr}}
/* motion: cards rise one after another, then the logo tiles settle in (calm, no bounce) */
.motion .ic{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease var(--d,0s),transform .9s cubic-bezier(.16,1,.3,1) var(--d,0s)}
.motion .ic .il{transform:scale(.82);opacity:0;transition:transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + .25s),opacity .5s ease calc(var(--d,0s) + .25s)}
.motion .ints.go .ic{opacity:1;transform:none}
.motion .ints.go .ic .il{transform:none;opacity:1}
.motion .ints.go .ic-soon .il{opacity:.8}
.motion .ist.on::before{animation:livedot 2.8s ease-in-out infinite}
@keyframes livedot{0%,100%{opacity:1}50%{opacity:.35}}

[data-fr-only][hidden]{display:none}
/* guides (/guides/): generated by site-src/build-guides.py, French only */
.guide{padding:48px 0 24px}
.guide .wrap{max-width:760px}
.g-crumbs{display:flex;gap:8px;font-size:14px;color:var(--muted);margin-bottom:22px}
.g-crumbs a{color:var(--muted);text-decoration:none}
.g-crumbs a:hover{color:var(--ink);text-decoration:underline}
.guide h1{font-size:clamp(30px,4.2vw,44px)}
.g-lead{font-size:19px;color:var(--muted);margin-top:16px}
.guide article h2{font-size:24px;margin-top:44px}
.guide article h3{font-size:19px;margin-top:28px}
.guide article p,.guide article li{margin-top:12px;line-height:1.65}
.guide article ul,.guide article ol{padding-left:22px;margin:10px 0 0}
.guide article li::marker{color:var(--accent)}
.guide article a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
.guide article strong{font-weight:650}
.g-note{margin:28px 0 0;padding:14px 18px;border-radius:12px;background:var(--side);border-left:3px solid var(--accent)}
.g-note p{margin:0;font-size:15px;color:var(--muted)}
.g-table{margin-top:18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.g-table table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
.g-table th,.g-table td{text-align:left;vertical-align:top;padding:11px 14px;border-top:1px solid var(--line)}
.g-table thead th{border-top:0;background:var(--side);font-weight:650}
.g-table tbody th{font-weight:600}
.guide article .g-sources-h{font-size:18px;margin-top:48px}
.guide article .g-sources-h + ul{font-size:14px}
.guide article .g-sources-h + ul li{margin-top:6px;color:var(--muted)}
.g-checked{font-size:14px;color:var(--muted)}
.g-cta{margin-top:56px;padding:28px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.g-cta h2{font-size:22px}
.g-cta p{color:var(--muted);margin-top:10px}
.g-cta .cta-row{margin-top:20px}
.g-index .wrap{max-width:var(--max)}
.g-index h1,.g-index .g-lead,.g-index .g-note{max-width:760px}
.g-list{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g-card{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:border-color .2s}
.g-card:hover{border-color:var(--muted)}
.g-card h2{font-size:19px;line-height:1.25}
.g-card p{color:var(--muted);margin-top:10px;font-size:15px;flex:1}
.g-more{margin-top:16px;font-weight:600;font-size:14px;color:var(--accent)}
@media (max-width: 900px){.g-list{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.g-list{grid-template-columns:1fr}.guide{padding-top:32px}.g-lead{font-size:17px}.g-cta{padding:22px}}
.head .brand + .actions{margin-left:auto}