/* Existing TikFlow tokens and primitives. Content-order revision, November 2026. */
/* Keep the page as the scroll container so the navigation stays visible. */
html,body{overflow-x:clip}
#pourquoi,#faq{scroll-margin-top:84px}
.workflow-note{max-width:720px;margin:28px auto 0;text-align:center;color:var(--muted);font-size:15px;line-height:1.65}
.workflow-steps .step{padding:26px 22px}
.workflow-steps .step h3{font-size:19px}
@media(min-width:640px){.workflow-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.workflow-steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
#profits .section-subtitle,#pourquoi .section-subtitle{max-width:600px}
.goal-calculator{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:32px}
.goal-inputs{display:grid;align-content:center;gap:30px;min-width:0}
.goal-inputs .sim-label{gap:16px;align-items:center;line-height:1.45}
.goal-inputs output{white-space:nowrap;font-family:var(--font-display);font-weight:700;color:var(--blue-dark);font-variant-numeric:tabular-nums}
.goal-inputs input[type=range]{height:8px;display:block;margin:16px 0 10px}
.goal-inputs input[type=range]:focus-visible{outline:3px solid var(--blue);outline-offset:7px}
.goal-inputs .sim-note{margin:0}
.goal-output{padding:28px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(155deg,var(--blue-soft),var(--white) 70%);min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.goal-output .section-kicker{font-size:10px;padding:6px 9px;letter-spacing:.08em}
.goal-total{font-family:var(--font-display);font-size:clamp(29px,4vw,46px);color:var(--blue-dark);line-height:1.2;letter-spacing:-.045em;font-variant-numeric:tabular-nums;margin:10px 0 22px;overflow-wrap:anywhere}
.goal-details{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;border-top:1px solid var(--line-2);padding-top:20px;margin-bottom:26px}
.goal-details span{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.goal-details strong{display:block;font-family:var(--font-display);font-size:23px;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.goal-output .btn{font-size:14px;padding-inline:14px}
.goal-disclaimer{max-width:850px;margin:22px auto 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.6}
.workflow-comparison{max-width:920px;margin:0 auto;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--white);box-shadow:var(--sh-1)}
.workflow-comparison table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:left}
.workflow-comparison th,.workflow-comparison td{padding:23px 24px;font-size:14px;line-height:1.55;vertical-align:middle}
.workflow-comparison thead th{font-family:var(--font-display);font-size:19px;letter-spacing:-.03em}
.workflow-comparison thead img{vertical-align:middle;margin-right:5px}
.workflow-comparison th:first-child{width:30%}
.workflow-comparison tbody th{font-weight:600}
.workflow-comparison td:last-child{color:var(--muted)}
.workflow-comparison th:nth-child(2),.workflow-comparison td:nth-child(2){background:var(--blue-soft);color:var(--blue-dark)}
.workflow-comparison tbody tr{border-top:1px solid var(--line)}
.comparison-check{color:var(--blue-dark);margin-right:8px;font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:719px){.goal-calculator{grid-template-columns:1fr;gap:24px;padding:24px}.goal-inputs{gap:22px}.goal-output{padding:24px}.goal-total{font-size:40px}.workflow-comparison th,.workflow-comparison td{padding:16px 12px;font-size:12px}.workflow-comparison thead th{font-size:15px}.workflow-comparison thead img{width:20px;height:20px;margin-right:0}.workflow-note{font-size:14px}}
@media(max-width:380px){.goal-calculator{padding:20px}.goal-output{padding:19px}.goal-total{font-size:26px;white-space:nowrap}.goal-details{gap:12px}.goal-details strong{font-size:20px}.workflow-comparison th,.workflow-comparison td{padding:14px 9px;font-size:12px}.workflow-comparison thead th{font-size:13px}.goal-inputs .sim-label{font-size:13px}}

/* Five-card flow: same compact hierarchy as the reference, TikFlow visual identity. */
.hero{padding:38px 0 30px}
.hero h1{font-size:clamp(34px,5vw,56px);margin-bottom:16px;line-height:1.03}
.hero .badge{font-size:12px;margin-bottom:18px;padding:6px 12px}
.hero .shell>p:not(.hero-note){max-width:620px;font-size:17px;line-height:1.5;margin-bottom:22px}
.hero .hero-actions{display:block;max-width:290px;margin:0 auto 12px}
.hero .hero-actions .btn{min-height:50px;font-size:15px}
.hero .hero-note{font-size:12px;line-height:1.5;margin:0 auto;color:inherit;opacity:.75}
.flow-handoff{text-align:center;padding:22px 22px 0}
.flow-handoff>span{display:inline-block;padding:12px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);box-shadow:var(--sh-1);font-size:15px;color:var(--ink)}
.flow-how{padding:38px 0 56px}
.flow-how .section-header{margin-bottom:28px}
.section-header .section-title{font-size:clamp(28px,4vw,38px)}
.flow-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch}
.flow-card{min-width:0;padding:23px 16px 25px;text-align:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);box-shadow:var(--sh-1);transition:transform .2s,border-color .2s}
.flow-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.flow-emoji{display:block;font-size:32px;line-height:1.25;margin-bottom:12px}
.flow-mini{height:28px;display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:13px}
.flow-brand{width:24px;height:19px;flex-shrink:0;display:block}
.flow-tiktok{width:19px;height:23px}
.flow-url{font-size:10px;line-height:25px;text-align:left;padding:0 9px;min-width:91px;border-radius:5px;border:1px solid var(--line);background:var(--paper);color:var(--muted)}
.flow-bell{font-size:19px}
.flow-detection{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
.flow-snip{font-size:22px;color:var(--blue);line-height:1}
.flow-cut-strip{position:relative;display:block;width:68px;height:15px;border-radius:6px;background:linear-gradient(100deg,var(--blue),var(--mint));overflow:hidden}
.flow-cut-strip i{position:absolute;top:0;bottom:0;left:20%;width:4px;background:var(--white);opacity:.65;animation:flow-cut 1.4s ease-in-out 2}
.flow-account{display:grid;place-items:center;width:21px;height:23px;border-radius:5px;border:1px solid var(--line);background:var(--blue-soft);color:var(--blue-dark);font-size:9px;font-weight:700}
.flow-reward{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--blue-dark)}
.flow-card h3{margin:0 0 9px;font-family:var(--font-display);font-size:16px;letter-spacing:-.025em;line-height:1.25}
.flow-card p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.flow-card:last-child{background:linear-gradient(160deg,var(--mint-soft),var(--white));border-color:var(--mint)}
@keyframes flow-cut{0%,100%{transform:translateX(0)}50%{transform:translateX(35px)}}
#profits,#pourquoi,#pricing,#faq{padding:56px 0}
#profits .section-header,#pourquoi .section-header,#pricing .section-header,#faq .section-header{margin-bottom:32px}
.goal-calculator{margin-top:0;gap:26px;box-shadow:var(--sh-1)}
.goal-inputs{gap:28px}
.goal-disclaimer{max-width:750px;font-size:12px;margin-top:18px}
.workflow-comparison{border:0;background:transparent;box-shadow:none;overflow:visible}
.workflow-comparison table{border-collapse:separate;border-spacing:10px;table-layout:fixed}
.workflow-comparison thead th:first-child{background:transparent;border:0}
.workflow-comparison th,.workflow-comparison td{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);padding:19px 18px;text-align:center}
.workflow-comparison tbody th{text-align:left}
.workflow-comparison th:nth-child(2),.workflow-comparison td:nth-child(2){background:var(--blue-soft)}
.workflow-comparison thead th:nth-child(2){border-color:var(--blue)}
.workflow-comparison th:first-child{width:30%}
.workflow-comparison strong{font-size:14px;font-weight:700}
.workflow-comparison strong span{font-size:19px;margin-right:5px}
.workflow-comparison small{display:block;margin-top:6px;font-family:var(--font-body);font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;line-height:1.4}
.simple-plan{max-width:440px;padding:30px 32px 24px}
.simple-plan .pricing-price{font-size:60px;margin:12px 0 8px;line-height:1.2}
.simple-plan .pricing-price small{font-size:15px;color:var(--muted)}
.simple-plan .pricing-label{font-size:11px}
.simple-plan .pricing-features{margin:20px 0 24px}
.simple-plan .pricing-features li{font-size:14px;padding:7px 0;line-height:1.5}
.simple-plan>p.pricing-note{font-size:12px;line-height:1.5;margin:14px 0 8px}
.simple-subscribe{border:0;background:none;font-size:12px;padding:7px;color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
.simple-capacity{max-width:620px;margin:20px auto 0;text-align:center;font-size:12px;color:var(--muted);line-height:1.5}
.footer .footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;text-align:left;position:relative}
.footer-brand p{font-size:13px;margin:14px 0;color:inherit}
.footer-group{display:grid;align-content:start;gap:9px;font-size:13px}
.footer-group strong{color:var(--white);margin-bottom:4px}
.footer-group a:hover{color:var(--white)}
@media(min-width:900px){.hero{padding:38px 0 30px}.section{padding:56px 0}}
@media(max-width:999px){.flow-cards{gap:10px}.flow-card{padding:20px 12px}.flow-card h3{font-size:15px}.flow-card p{font-size:12px}.flow-mini{gap:5px}.flow-url{min-width:75px;padding:0 6px}}
@media(max-width:899px){.flow-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.flow-card{padding:21px 16px}.flow-card:last-child{grid-column:1/-1;max-width:none}.flow-card h3{font-size:17px}.flow-card p{font-size:13px}.flow-card:last-child .flow-emoji{display:inline-block;margin:0 10px 7px 0;vertical-align:middle}.flow-card:last-child .flow-mini{display:inline-flex;vertical-align:middle;margin-bottom:7px}.flow-handoff>span{font-size:13px;padding:10px 14px}.flow-how{padding-top:30px}.hero h1{font-size:clamp(32px,6.3vw,46px)}.hero .shell>p:not(.hero-note){font-size:15px}.workflow-comparison table{border-spacing:5px}.workflow-comparison th,.workflow-comparison td{padding:14px 9px;font-size:12px}.workflow-comparison strong{font-size:12px}.workflow-comparison strong span{display:block;margin:0 0 4px;font-size:19px}.workflow-comparison small{font-size:11px}.footer .footer-inner{grid-template-columns:1fr 1fr;gap:26px}.footer-brand{grid-column:1/-1}}
@media(max-width:380px){.flow-card{padding:18px 10px}.flow-card h3{font-size:15px}.flow-card p{font-size:12px}.simple-plan{padding:26px 22px}.simple-plan .pricing-features li{font-size:13px}.workflow-comparison th,.workflow-comparison td{padding:12px 6px}.workflow-comparison thead th{font-size:12px}.workflow-comparison strong{font-size:11px}.workflow-comparison small{font-size:10px}.hero .hero-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow-card{transition:none}.flow-cut-strip i{animation:none}}
/* Clear monetization entry points at every screen size. */
.nav-links .nav-monetize{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;color:var(--blue-dark);background:var(--blue-soft);white-space:nowrap}
.nav-links .nav-monetize:hover{color:var(--blue-dark);border-color:var(--blue)}
.monetize-mobile-entry{display:none}
.flow-card--monetize{display:flex;flex-direction:column;align-items:center;position:relative}
.flow-card--monetize:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.flow-card-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;margin-top:15px;padding:8px 13px;border-radius:999px;background:var(--ink);color:var(--white);font-size:12px;line-height:1.3;font-weight:700}
.flow-card-action>span:last-child{transition:transform .2s}
.flow-card--monetize:hover .flow-card-action>span:last-child{transform:translateX(3px)}
@media(min-width:900px) and (max-width:1050px){.nav-links{gap:14px}.nav-links a{font-size:13px}.nav-links .nav-monetize{padding-inline:9px}}
@media(max-width:899px){.monetize-mobile-entry{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:9px 16px;border-top:1px solid var(--line-2);background:var(--blue-soft);color:var(--blue-dark);font-size:12px;line-height:18px;font-weight:700}.monetize-mobile-entry>span:last-child{margin-left:3px}.flow-card--monetize{display:block}.flow-card--monetize .flow-card-action{display:inline-flex}.flow-card--monetize p{max-width:420px;margin-inline:auto}#comment,#profits,#pourquoi,#pricing,#faq{scroll-margin-top:126px}}
@media(max-width:359px){.monetize-mobile-entry{gap:6px;padding-inline:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.flow-card-action>span:last-child{transition:none}}