/* ============================================================
   Funnel Desura — router public (desura.fr → app.desura.fr)
   S'appuie sur theme.css + style.css. Mobile-first, ~620px.
   ============================================================ */

body{background:var(--color-mist);margin:0;font-family:var(--font-sans);color:var(--color-obsidian);}

/* ---- Top bar / progress ---- */
.fn-top{position:sticky;top:0;background:rgba(244,244,245,0.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;border-bottom:1px solid var(--color-fog);}
.fn-top__in{max-width:640px;margin:0 auto;padding:15px 20px;display:flex;align-items:center;gap:16px;}
.fn-logo{height:22px;display:block;}
.fn-prog{flex:1;display:flex;gap:5px;}
.fn-prog span{flex:1;height:5px;border-radius:999px;background:var(--color-fog);overflow:hidden;}
.fn-prog span i{display:block;height:100%;width:0;background:var(--color-ember);border-radius:999px;transition:width .35s ease;}
.fn-prog span.done i,.fn-prog span.active i{width:100%;}
.fn-step__count{font-size:12.5px;color:var(--color-steel);font-family:var(--font-mono);white-space:nowrap;}
.fn-restart{border:none;background:none;cursor:pointer;color:var(--color-ash);font:inherit;font-size:12px;display:inline-flex;align-items:center;gap:5px;padding:4px;border-radius:8px;}
.fn-restart:hover{color:var(--color-steel);}
.fn-restart svg{width:13px;height:13px;}

/* ---- Layout ---- */
.fn-wrap{max-width:620px;margin:0 auto;padding:30px 20px 96px;}
.fn-sec{display:none;animation:fnf .32s ease;}
.fn-sec.is-active{display:block;}
@keyframes fnf{from{transform:translateY(8px);}to{transform:none;}}
.fn-eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-ember);}
.fn-h{font-size:clamp(23px,5vw,31px);font-weight:700;letter-spacing:-0.02em;line-height:1.12;margin:11px 0 6px;text-wrap:balance;}
.fn-sub{font-size:15px;color:var(--color-steel);line-height:1.5;margin:0 0 26px;text-wrap:pretty;}

/* ---- Hero (entry only) ---- */
.fn-hero{position:relative;border-radius:var(--radius-card);overflow:hidden;margin-bottom:24px;min-height:150px;display:flex;align-items:flex-end;padding:22px;background-size:cover;background-position:center;box-shadow:0 18px 44px rgba(9,9,11,0.14);}
.fn-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(170deg,rgba(9,9,11,0.05),rgba(9,9,11,0.6));}
.fn-hero__c{position:relative;color:#fff;}
.fn-hero__t{font-size:19px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;text-wrap:balance;}
.fn-hero__chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.fn-hero__chips span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,0.18);color:#fff;padding:5px 11px;border-radius:999px;}
.fn-hero__chips svg{width:12px;height:12px;}

/* ---- Objective grid (entry) ---- */
.fn-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
@media(max-width:480px){.fn-grid{grid-template-columns:1fr;}}
.fn-card{position:relative;display:flex;align-items:flex-start;gap:13px;text-align:left;background:var(--color-snow);border:none;cursor:pointer;border-radius:var(--radius-card-sm);box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:17px;font:inherit;transition:box-shadow .15s,transform .15s;}
.fn-card:hover{transform:translateY(-2px);}
.fn-card.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);background:rgba(16,185,129,0.04);}
.fn-card__ic{width:40px;height:40px;border-radius:12px;background:var(--color-mist);display:grid;place-items:center;color:var(--color-obsidian);flex-shrink:0;}
.fn-card__ic svg{width:20px;height:20px;}
.fn-card.is-on .fn-card__ic{background:var(--color-ember);color:#fff;}
.fn-card__t{display:block;font-size:14.5px;font-weight:600;line-height:1.25;}
.fn-card__d{display:block;font-size:12px;color:var(--color-steel);margin-top:4px;line-height:1.4;}
.fn-card__tag{display:inline-block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--color-slate);background:var(--color-mist);box-shadow:inset 0 0 0 1px var(--color-fog);border-radius:6px;padding:2px 6px;margin-top:7px;}

/* ---- Question option groups ---- */
.fn-q{margin-bottom:24px;}
.fn-q__l{font-size:15px;font-weight:600;margin-bottom:10px;}
.fn-q__hint{font-size:12.5px;color:var(--color-steel);font-weight:400;margin-left:2px;}
.fn-opts{display:flex;flex-direction:column;gap:9px;}
.fn-opt{display:flex;align-items:center;gap:12px;background:var(--color-snow);border:none;cursor:pointer;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:13px 15px;font:inherit;font-size:14.5px;text-align:left;transition:box-shadow .15s;}
.fn-opt__r{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--color-pebble);flex-shrink:0;transition:all .15s;}
.fn-opt.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);}
.fn-opt.is-on .fn-opt__r{box-shadow:inset 0 0 0 6px var(--color-ember);}
.fn-opt__main{flex:1;min-width:0;}
.fn-opt__t{display:block;}
.fn-opt__d{display:block;font-size:12.5px;color:var(--color-steel);margin-top:2px;line-height:1.4;}
.fn-opt__meta{font-size:12.5px;font-weight:600;color:var(--color-steel);font-family:var(--font-mono);white-space:nowrap;flex-shrink:0;}
.fn-opt.is-on .fn-opt__meta{color:var(--color-ember);}
/* metier mini-grid */
.fn-metiers{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
@media(max-width:480px){.fn-metiers{grid-template-columns:1fr 1fr;}}
.fn-metier{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--color-snow);border:none;cursor:pointer;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:15px 10px;font:inherit;transition:box-shadow .15s,transform .15s;}
.fn-metier:hover{transform:translateY(-2px);}
.fn-metier.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);background:rgba(16,185,129,0.04);}
.fn-metier__ic{width:34px;height:34px;border-radius:10px;background:var(--color-mist);display:grid;place-items:center;color:var(--color-obsidian);}
.fn-metier.is-on .fn-metier__ic{background:var(--color-ember);color:#fff;}
.fn-metier__ic svg{width:18px;height:18px;}
.fn-metier__t{font-size:12.5px;font-weight:600;line-height:1.2;}

/* ---- Fields ---- */
.fn-field{margin-bottom:15px;}
.fn-field label{display:block;font-size:13.5px;font-weight:500;color:var(--color-graphite);margin-bottom:7px;}
.fn-field label .opt{color:var(--color-ash);font-weight:400;}
.fn-field input,.fn-field textarea,.fn-field select{width:100%;border:none;background:var(--color-snow);box-shadow:inset 0 0 0 1.5px var(--color-pebble);border-radius:14px;padding:13px 15px;font:inherit;font-size:15px;color:var(--color-obsidian);box-sizing:border-box;}
.fn-field textarea{min-height:92px;resize:vertical;line-height:1.5;}
.fn-field input:focus,.fn-field textarea:focus,.fn-field select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--color-ember);}
.fn-field--mono input{font-family:var(--font-mono);}
.fn-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:480px){.fn-row2{grid-template-columns:1fr;}}

/* ---- Plan cards (tenant / presta / identité packages) ---- */
.fn-plans{display:flex;flex-direction:column;gap:11px;}
.fn-plan{position:relative;display:flex;align-items:flex-start;gap:14px;background:var(--color-snow);border:none;cursor:pointer;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:17px 18px;font:inherit;text-align:left;transition:box-shadow .15s,transform .12s;width:100%;}
.fn-plan:hover{transform:translateY(-1px);}
.fn-plan.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);background:rgba(16,185,129,0.035);}
.fn-plan__r{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--color-pebble);flex-shrink:0;margin-top:2px;transition:all .15s;}
.fn-plan.is-on .fn-plan__r{box-shadow:inset 0 0 0 6px var(--color-ember);}
.fn-plan__main{flex:1;min-width:0;}
.fn-plan__name{display:block;font-size:15.5px;font-weight:700;letter-spacing:-0.01em;}
.fn-plan__desc{display:block;font-size:12.5px;color:var(--color-steel);margin-top:3px;line-height:1.4;}
.fn-plan__feats{list-style:none;padding:0;margin:9px 0 0;display:flex;flex-direction:column;gap:4px;}
.fn-plan__feats li{font-size:12.5px;color:var(--color-graphite);display:flex;gap:7px;align-items:flex-start;}
.fn-plan__feats svg{width:13px;height:13px;color:var(--color-ember);flex-shrink:0;margin-top:2px;}
.fn-plan__price{text-align:right;flex-shrink:0;}
.fn-plan__amt{font-size:20px;font-weight:700;letter-spacing:-0.02em;line-height:1;white-space:nowrap;}
.fn-plan__per{font-size:11.5px;color:var(--color-steel);margin-top:3px;}
.fn-plan__was{font-size:12px;color:var(--color-ash);text-decoration:line-through;}
.fn-plan__eb{font-size:11px;color:var(--color-ember);font-weight:700;margin-top:3px;white-space:nowrap;}
.fn-plan__badge{position:absolute;top:-9px;left:18px;background:var(--color-obsidian);color:#fff;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}
.fn-plan__badge.eb{background:var(--color-ember);}

/* cycle toggle */
.fn-toggle{display:inline-flex;background:var(--color-mist);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px var(--color-fog);margin-bottom:16px;}
.fn-toggle button{border:none;cursor:pointer;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--color-steel);padding:8px 16px;border-radius:999px;white-space:nowrap;}
.fn-toggle button.is-on{background:var(--color-snow);color:var(--color-obsidian);box-shadow:0 1px 3px rgba(9,9,11,.12);}
.fn-toggle .save{color:var(--color-ember);}

/* add-on toggle (maintenance) */
.fn-addon{display:flex;align-items:center;gap:13px;background:var(--color-snow);border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:15px 16px;margin-top:13px;cursor:pointer;}
.fn-addon.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);background:rgba(16,185,129,0.035);}
.fn-addon__main{flex:1;min-width:0;}
.fn-addon__t{font-size:14px;font-weight:600;}
.fn-addon__d{font-size:12px;color:var(--color-steel);margin-top:2px;line-height:1.4;}
.fn-addon__price{font-size:13.5px;font-weight:700;font-family:var(--font-mono);color:var(--color-graphite);white-space:nowrap;}
.fn-switch{width:40px;height:23px;border-radius:999px;background:var(--color-pebble);position:relative;flex-shrink:0;transition:background .18s;}
.fn-switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .18s;}
.fn-addon.is-on .fn-switch{background:var(--color-ember);}
.fn-addon.is-on .fn-switch::after{transform:translateX(17px);}

/* ---- Recommendation / single-product card ---- */
.fn-reco{background:var(--color-snow);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:24px;position:relative;overflow:hidden;}
.fn-reco__badge{position:absolute;top:18px;right:18px;background:rgba(16,185,129,0.12);color:#0f8a5f;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;}
.fn-reco__name{font-size:21px;font-weight:700;letter-spacing:-0.01em;padding-right:96px;}
.fn-reco__desc{font-size:14px;color:var(--color-steel);margin:6px 0 18px;line-height:1.5;}
.fn-price{display:flex;align-items:baseline;gap:8px;}
.fn-price__n{font-size:38px;font-weight:700;letter-spacing:-0.03em;line-height:1;}
.fn-price__p{font-size:14px;color:var(--color-steel);}
.fn-price__eb{font-size:13px;color:var(--color-ember);font-weight:600;margin-top:8px;}
.fn-feats{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;}
.fn-feats li{display:flex;gap:10px;font-size:14px;color:var(--color-graphite);align-items:flex-start;}
.fn-feats svg{width:17px;height:17px;color:var(--color-ember);flex-shrink:0;margin-top:1px;}
.fn-note{font-size:12.5px;color:var(--color-ash);margin-top:14px;line-height:1.5;}
.fn-vat{display:inline-block;font-size:11.5px;color:var(--color-ash);margin-top:12px;}

/* ---- Reference prices (app mobile devis) ---- */
.fn-ref{background:var(--color-snow);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:8px 22px;margin-bottom:16px;}
.fn-ref__row{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--color-fog);align-items:flex-start;}
.fn-ref__row:first-child{border-top:none;}
.fn-ref__k{font-size:14px;color:var(--color-graphite);}
.fn-ref__k small{display:block;color:var(--color-steel);font-size:12px;margin-top:2px;line-height:1.4;}
.fn-ref__v{font-size:14.5px;font-weight:700;font-family:var(--font-mono);white-space:nowrap;flex-shrink:0;}
.fn-ref__cap{font-size:11.5px;color:var(--color-ash);text-align:center;padding:4px 0 14px;line-height:1.5;}

/* ---- Honest "à définir" / validation banners ---- */
.fn-pending{display:flex;gap:11px;align-items:flex-start;border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.5;margin-top:4px;
  background:oklch(0.965 0.03 75);color:oklch(0.45 0.09 75);box-shadow:inset 0 0 0 1.5px oklch(0.88 0.06 75);}
.fn-pending svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;}
.fn-pending b{color:oklch(0.38 0.1 75);}
.fn-info{display:flex;gap:9px;align-items:flex-start;background:var(--color-mist);color:var(--color-graphite);border-radius:14px;padding:12px 14px;font-size:12.5px;line-height:1.45;margin-top:14px;}
.fn-info svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--color-steel);}
.fn-apple{display:flex;gap:9px;align-items:flex-start;background:rgba(16,185,129,0.06);color:#0c6b48;border-radius:14px;padding:12px 14px;font-size:12.5px;line-height:1.45;margin-top:14px;box-shadow:inset 0 0 0 1px rgba(16,185,129,.2);}
.fn-apple svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;}

/* ---- Client / payment recap ---- */
.fn-seg{display:flex;gap:8px;margin-bottom:18px;}
.fn-seg button{flex:1;border:none;cursor:pointer;background:var(--color-snow);box-shadow:inset 0 0 0 1.5px var(--color-fog);border-radius:14px;padding:13px;font:inherit;font-size:14px;font-weight:600;color:var(--color-steel);transition:box-shadow .15s,color .15s;}
.fn-seg button.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);color:var(--color-obsidian);background:rgba(16,185,129,.04);}
.fn-recap{background:var(--color-snow);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:22px 24px;margin-bottom:16px;}
.fn-recap__ttl{font-size:13px;font-weight:700;color:var(--color-steel);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:4px;}
.fn-recap__row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--color-fog);font-size:14.5px;}
.fn-recap__row:first-of-type{border-top:none;}
.fn-recap__k{flex:1;min-width:0;color:var(--color-graphite);}
.fn-recap__v{white-space:nowrap;flex-shrink:0;font-weight:600;font-family:var(--font-mono);}
.fn-recap__v.free{color:var(--color-ember);}
.fn-recap__row.today{font-weight:700;font-size:16px;color:var(--color-obsidian);border-top:2px solid var(--color-pebble);margin-top:4px;}
.fn-recap__inst{font-size:13px;color:var(--color-ember);font-weight:600;text-align:right;padding-top:8px;}
.fn-pay{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;}
@media(max-width:380px){.fn-pay{grid-template-columns:1fr;}}
.fn-pay__o{background:var(--color-snow);border:none;cursor:pointer;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--color-fog);padding:13px 14px;font:inherit;text-align:left;transition:box-shadow .15s;}
.fn-pay__o.is-on{box-shadow:inset 0 0 0 2px var(--color-ember);background:rgba(16,185,129,0.04);}
.fn-pay__t{font-size:14px;font-weight:600;}
.fn-pay__d{font-size:12px;color:var(--color-steel);margin-top:2px;}
.fn-paylabel{font-size:13.5px;font-weight:600;color:var(--color-graphite);margin:2px 0 10px;}

/* ---- OAuth / consent (client step) ---- */
.fn-oauth{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:var(--color-snow);box-shadow:inset 0 0 0 1.5px var(--color-pebble);border-radius:999px;padding:13px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--color-obsidian);}
.fn-or{display:flex;align-items:center;gap:12px;color:var(--color-ash);font-size:12.5px;margin:16px 0;}
.fn-or::before,.fn-or::after{content:"";flex:1;height:1px;background:var(--color-fog);}
.fn-check{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--color-steel);line-height:1.45;margin-bottom:11px;}
.fn-check input{margin-top:2px;accent-color:var(--color-ember);width:16px;height:16px;flex-shrink:0;}
.fn-check a{color:var(--color-obsidian);text-decoration:underline;text-underline-offset:2px;}

/* ---- Domaine ---- */
.fn-domrow{display:flex;gap:8px;}
.fn-domrow input{flex:1;}
.fn-domcheck-load{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--color-steel);padding:14px 0;}
.fn-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(16,185,129,.3);border-top-color:var(--color-ember);display:inline-block;animation:fnspin 0.8s linear infinite;}
.fn-domok{background:rgba(16,185,129,.06);box-shadow:inset 0 0 0 1.5px rgba(16,185,129,.3);border-radius:14px;padding:16px;margin-top:8px;}
.fn-domok__h{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--color-obsidian);}
.fn-domok__h svg{width:18px;height:18px;color:var(--color-ember);flex-shrink:0;}
.fn-domok__price{display:flex;align-items:baseline;gap:10px;margin-top:10px;padding-left:27px;flex-wrap:wrap;}
.fn-domok__free{font-size:14px;font-weight:700;color:var(--color-ember);}
.fn-domok__then{font-size:13px;color:var(--color-steel);}
.fn-domprem{font-size:12.5px;color:oklch(0.45 0.09 75);margin-top:8px;padding-left:27px;}
.fn-domno{background:#fdecec;box-shadow:inset 0 0 0 1.5px #f3c4c4;border-radius:14px;padding:16px;margin-top:8px;}
.fn-domno__h{display:flex;align-items:center;gap:9px;font-size:15px;color:#9a2a2a;}
.fn-domno__h svg{width:18px;height:18px;color:#c0392b;flex-shrink:0;}
.fn-domsugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-left:27px;}
.fn-domsugg button{border:none;cursor:pointer;background:var(--color-snow);box-shadow:inset 0 0 0 1.5px var(--color-pebble);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--color-obsidian);font-family:var(--font-mono);}
.fn-domsugg button:hover{box-shadow:inset 0 0 0 1.5px var(--color-ember);color:var(--color-ember);}

/* ---- Confirmation ---- */
.fn-conf{text-align:center;padding:14px 0;}
.fn-conf__ic{width:64px;height:64px;border-radius:50%;background:rgba(16,185,129,0.12);display:grid;place-items:center;margin:0 auto 18px;color:var(--color-ember);}
.fn-conf__ic svg{width:30px;height:30px;}
.fn-conf__ic.spin{background:var(--color-mist);}
.fn-conf__ic.spin svg{width:28px;height:28px;color:var(--color-steel);animation:fnspin 1s linear infinite;}
@keyframes fnspin{to{transform:rotate(360deg);}}
.fn-conf__ref{font-family:var(--font-mono);font-size:12.5px;color:var(--color-steel);background:var(--color-mist);border-radius:999px;padding:5px 13px;display:inline-block;margin-top:2px;}
.fn-steps{background:var(--color-snow);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:20px 22px;margin-top:22px;text-align:left;}
.fn-steps__ttl{font-size:13px;font-weight:700;color:var(--color-steel);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-mono);margin-bottom:6px;}
.fn-poll__row{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14px;color:var(--color-graphite);border-top:1px solid var(--color-fog);}
.fn-poll__row:first-of-type{border-top:none;}
.fn-poll__d{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;}
.fn-poll__d.ok{background:var(--color-ember);color:#fff;}
.fn-poll__d.run{box-shadow:inset 0 0 0 2px var(--color-ember);position:relative;}
.fn-poll__d.run::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-ember);animation:fnpulse 1s infinite;}
@keyframes fnpulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.fn-poll__d.wait{box-shadow:inset 0 0 0 2px var(--color-fog);}
.fn-poll__d svg{width:11px;height:11px;}
.fn-poll__row.wait{color:var(--color-ash);}
.fn-delay{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--color-graphite);background:var(--color-mist);border-radius:999px;padding:7px 14px;margin-top:16px;}
.fn-delay svg{width:14px;height:14px;color:var(--color-steel);}

/* ---- Onboarding checklist (post-pay) ---- */
.fn-onb{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;text-align:left;}
.fn-onb li{display:flex;gap:10px;font-size:13.5px;color:var(--color-graphite);align-items:flex-start;}
.fn-onb svg{width:15px;height:15px;color:var(--color-steel);flex-shrink:0;margin-top:2px;}

/* ---- Nav ---- */
.fn-nav{display:flex;gap:12px;margin-top:28px;}
.fn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font:inherit;font-weight:600;font-size:15px;padding:15px 22px;border-radius:999px;transition:all .15s;text-decoration:none;}
.fn-btn--p{background:var(--color-ember);color:#fff;flex:1;}
.fn-btn--p:hover{filter:brightness(1.06);}
.fn-btn--g{background:var(--color-snow);color:var(--color-obsidian);box-shadow:inset 0 0 0 1.5px var(--color-pebble);}
.fn-btn:disabled{opacity:.45;cursor:default;}
.fn-shake{animation:fnshake .3s;}
@keyframes fnshake{0%,100%{transform:none;}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}