/* Adaxit sales pages (long-form pages built by inc/sales.php): services, sprint, deck, financial model, cross-border, funding, investor-ready kit.
   Loaded only on those pages, after the theme stylesheet. Every rule lives under .f-root (class prefix f-), the page wrapper that inc/sales.php prints.
   Three parts, in this order:
     A. Context: what the site and WordPress set on body, headings, links and svg, set back to what the approved design assumes (specificity 0,1,0, so every later rule wins).
     B. The approved design: sales/tools/sales.css of the design project, copied unchanged except its first line (body{...}), which belongs to the preview page.
     C. Integration: header button, anchor offset under the sticky header, form states, phone bar. Nothing here changes how the approved rules look.
   Fonts (Manrope, Outfit, Fraunces italic) come from theme.json (assets/fonts/*.woff2). */

/* ---- A. context ---- */
.f-root{font-size:16px;line-height:normal;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;text-rendering:auto;-moz-osx-font-smoothing:auto}
.f-root :where(h1,h2,h3,h4,h5,h6){font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:normal;letter-spacing:normal;text-transform:none}
.f-root :where(svg){max-width:none}

/* ---- B. approved design (sales/tools/sales.css) ---- */
.f-root{--petrol:#022529;--bianco:#FCFCFC;--menta:#B4EAC2;--mint:#7DE4A8;--medio:#6AD88A;--verde:#00C757;--scuro:#007A3D;--testo:#00873B;--grigio:#4B6164;--linea:#DCE7E2;--ice:#F2F7F4;--amber:#E3A33F;font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--petrol);background:var(--bianco);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.f-root *{box-sizing:border-box}
.f-root a{color:var(--scuro)}
.f-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.f-head{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--linea);background:rgba(252,252,252,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.f-head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.f-lockup{display:flex;align-items:center;gap:12px;text-decoration:none}
.f-nav{display:flex;gap:28px}
.f-nav a{font-size:14px;font-weight:500;color:var(--grigio);text-decoration:none;transition:color .25s}
.f-nav a:hover,.f-nav a[aria-current]{color:var(--petrol)}
.f-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background-color .3s,color .3s}
.f-pill svg{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.f-pill:hover svg{transform:translateX(3px)}
.f-root .f-pill--go{background:var(--verde);color:var(--petrol)}
.f-pill--go:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,199,87,.32)}
.f-root .f-pill--dark{background:var(--petrol);color:var(--bianco)}
.f-pill--dark:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(2,37,41,.25)}
.f-root .f-pill--line{border:1px solid rgba(2,37,41,.22);color:var(--petrol);background:transparent}
.f-pill--line:hover{background:var(--petrol);color:var(--bianco)}
.f-root .f-pill--light{border:1px solid rgba(252,252,252,.32);color:var(--bianco);background:transparent}
.f-pill--light:hover{background:var(--bianco);color:var(--petrol)}
.f-eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--scuro);display:flex;align-items:center;gap:12px}
.f-eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
.f-h1{margin:22px 0 0;font-family:Outfit,Manrope,sans-serif;font-weight:200;font-size:clamp(40px,4.9vw,70px);line-height:1.05;letter-spacing:-.025em}
.f-h2{margin:18px 0 0;font-family:Outfit,Manrope,sans-serif;font-weight:300;font-size:clamp(32px,3.4vw,50px);line-height:1.1;letter-spacing:-.02em;max-width:880px}
.f-h1 em,.f-h2 em{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;color:var(--testo)}
.f-lead{margin:26px 0 0;max-width:560px;font-size:19px;line-height:1.65;color:var(--grigio)}
.f-p{font-size:18px;line-height:1.7;color:var(--grigio);max-width:680px;margin:20px 0 0}
.f-sec{padding:112px 0}
.f-ice{background:var(--ice)}
.f-dark{background:radial-gradient(60% 80% at 85% 10%,rgba(0,199,87,.16),rgba(2,37,41,0) 60%),var(--petrol);color:var(--bianco)}
.f-dark .f-eyebrow{color:var(--mint)}
.f-dark .f-h2 em{color:var(--mint)}
.f-dark .f-p{color:rgba(252,252,252,.72)}
/* hero */
.f-hero{position:relative;overflow:hidden;background:radial-gradient(48% 62% at 80% 40%,rgba(180,234,194,.42),rgba(252,252,252,0) 70%),var(--bianco)}
.f-hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:56px;padding-top:76px;padding-bottom:104px}
.f-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.f-micro{margin:26px 0 0;font-size:14px;color:var(--grigio);display:flex;flex-wrap:wrap;gap:8px 18px}
.f-micro span{display:inline-flex;align-items:center;gap:8px}
.f-micro span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verde)}
.f-dialbox{display:flex;flex-direction:column;align-items:center;gap:22px}
.f-dial{position:relative;width:min(440px,100%);aspect-ratio:1/1;filter:drop-shadow(0 34px 56px rgba(2,37,41,.14))}
.f-dial svg{width:100%;height:100%;display:block}
.f-dial-arc{stroke-dasharray:100 100;stroke-dashoffset:20}
.f-mo .f-dial-arc{stroke-dashoffset:100;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.7,.2,1) .35s}
.f-mo .f-dial.is-in .f-dial-arc{stroke-dashoffset:20}
.f-dial-hand{transform-origin:220px 220px;transform:rotate(288deg)}
.f-mo .f-dial-hand{transform:rotate(0deg);transition:transform 2.2s cubic-bezier(.3,.7,.2,1) .35s}
.f-mo .f-dial.is-in .f-dial-hand{transform:rotate(288deg)}
.f-dial-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.f-dial-c b{font-family:Outfit,sans-serif;font-weight:200;font-size:clamp(64px,8vw,104px);line-height:1;letter-spacing:-.04em;color:var(--bianco)}
.f-dial-c b small{font-size:.42em;letter-spacing:0;margin-left:6px;color:var(--mint)}
.f-dial-c span{margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--menta)}
.f-dialcap{margin:0;max-width:360px;text-align:center;font-size:14px;line-height:1.55;color:var(--grigio)}
/* situation */
.f-sit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center}
.f-vers{display:grid;gap:12px}
.f-ver{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--linea);border-radius:14px;background:var(--bianco);font-size:15px;color:var(--grigio);box-shadow:0 12px 30px -20px rgba(2,37,41,.22);transform-origin:left center}
.f-fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-decoration:line-through;text-decoration-color:rgba(2,37,41,.32)}
.f-ver em{font-style:normal;font-size:13px;color:#8A9C9E}
.f-ico{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--bianco);background:var(--petrol);border-radius:6px;padding:5px 7px}
.f-ver:nth-child(1){opacity:.42;transform:scale(.93)}.f-ver:nth-child(2){opacity:.6;transform:scale(.955)}.f-ver:nth-child(3){opacity:.8;transform:scale(.98)}
.f-ver--now{border-color:var(--verde);color:var(--petrol);box-shadow:0 20px 44px -22px rgba(0,199,87,.5)}
.f-ver--now .f-fn{text-decoration:none;font-weight:700}
.f-ver--now em{color:var(--scuro);font-weight:700}
.f-vers-cap{margin:10px 0 0;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;font-size:22px;color:var(--testo)}
/* problem */
.f-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.f-card{border-top:1px solid rgba(2,37,41,.16);padding-top:30px}
.f-num{font-family:Outfit,sans-serif;font-weight:200;font-size:72px;line-height:1;letter-spacing:-.035em;color:var(--scuro)}
.f-num small{font-size:20px;font-weight:400;letter-spacing:.02em;margin-left:8px;color:var(--grigio)}
.f-card h3{margin:22px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.f-card p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--grigio)}
/* cost */
.f-rows{margin-top:56px;border-top:1px solid rgba(252,252,252,.14)}
.f-row{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:baseline;padding:38px 0;border-bottom:1px solid rgba(252,252,252,.14)}
.f-fig{font-family:Outfit,sans-serif;font-weight:200;font-size:76px;line-height:1;letter-spacing:-.04em;color:var(--mint)}
.f-fig--word{font-size:58px;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300}
.f-row h3{margin:0;font-size:22px;font-weight:600;color:var(--bianco)}
.f-row p{margin:12px 0 0;font-size:17px;line-height:1.7;color:rgba(252,252,252,.72);max-width:640px}
/* payoff */
.f-quote{margin:34px 0 0;font-family:Outfit,sans-serif;font-weight:300;font-size:clamp(26px,2.6vw,36px);line-height:1.38;letter-spacing:-.012em;max-width:940px}
.f-quote em{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;color:var(--testo)}
/* sample */
.f-sample{margin-top:56px;border-radius:24px;background:linear-gradient(135deg,#F7FAF8 0%,#EEF6F1 100%);border:1px solid var(--linea);padding:52px 56px;box-shadow:0 40px 80px -40px rgba(2,37,41,.22)}
.f-sample-k{margin:0;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro);display:flex;align-items:center;gap:14px}
.f-sample-k::before{content:"";width:34px;height:1px;background:currentColor}
.f-sample-t{margin:18px 0 0;font-family:Outfit,sans-serif;font-weight:300;font-size:44px;letter-spacing:-.02em}
.f-sample-t em{font-family:Fraunces,Georgia,serif;font-style:italic;color:var(--testo)}
.f-sample-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;margin-top:40px}
.f-lab{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro)}
.f-bars{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.f-bars li{display:grid;grid-template-columns:150px minmax(0,1fr) 36px;align-items:center;gap:16px;font-size:16px}
.f-bar{height:9px;border-radius:9px;background:#DDE7E2;overflow:hidden}
.f-bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:var(--verde)}
.f-bar i.l{background:var(--medio)}.f-bar i.a{background:var(--amber)}
.f-mo .f-sample .f-bar i{width:0;transition:width 1.3s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-sample.is-in .f-bar i{width:var(--w)}
.f-bars b{font-weight:600;color:var(--grigio);text-align:right;font-variant-numeric:tabular-nums}
.f-first{border-radius:20px;background:var(--petrol);color:var(--bianco);padding:30px 32px}
.f-first .f-lab{color:var(--mint)}
.f-first q{display:block;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;font-size:22px;line-height:1.5;quotes:"\201C" "\201D"}
.f-fix{margin:28px 0 0;padding:0 0 0 22px;font-size:17px;line-height:1.9}
.f-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:28px}
.f-note{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:22px 24px}
.f-note b{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--scuro)}
.f-note p{margin:10px 0 0;font-size:15.5px;line-height:1.65;color:var(--petrol)}
.f-fine{margin:18px 0 0;font-size:13px;color:var(--grigio)}
/* tiers */
.f-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px;align-items:stretch}
.f-tier{display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:22px;padding:34px 32px;background:var(--bianco);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.f-tier:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(2,37,41,.28)}
.f-tier--k{background:var(--petrol);color:var(--bianco);border-color:var(--petrol)}
.f-tier-l{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro)}
.f-tier--k .f-tier-l{color:var(--mint)}
.f-tier h3{margin:14px 0 0;font-family:Outfit,sans-serif;font-weight:300;font-size:30px;letter-spacing:-.015em}
.f-tier-m{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--grigio)}
.f-tier--k .f-tier-m{color:var(--menta)}
.f-tier>p{margin:20px 0 0;font-size:16px;line-height:1.65;color:var(--grigio)}
.f-tier--k>p{color:rgba(252,252,252,.76)}
.f-inc{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--linea);display:grid;gap:12px;font-size:15px;line-height:1.5}
.f-tier--k .f-inc{border-color:rgba(252,252,252,.16)}
.f-inc li{display:flex;gap:12px;align-items:flex-start}
.f-inc li::before{content:"";flex:0 0 16px;height:16px;margin-top:2px;border-radius:50%;background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23022529' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.f-tier .f-pill{margin-top:auto}
.f-tier .f-pill-gap{flex:1;min-height:26px}
.f-promise{margin:34px auto 0;max-width:820px;text-align:center;font-size:16px;line-height:1.7;color:var(--grigio)}
.f-promise b{color:var(--petrol)}
/* steps */
.f-steps{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:st;position:relative}
.f-steps::before{content:"";position:absolute;left:24px;right:24px;top:24px;height:1px;background:linear-gradient(90deg,var(--verde),rgba(0,199,87,.15))}
.f-steps li{position:relative;counter-increment:st}
.f-steps li::before{content:counter(st,decimal-leading-zero);position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--bianco);border:1px solid var(--verde);font-family:Outfit,sans-serif;font-size:16px;color:var(--scuro)}
.f-steps h3{margin:24px 0 0;font-size:19px;font-weight:700}
.f-steps p{margin:10px 0 0;font-size:15.5px;line-height:1.65;color:var(--grigio)}
/* guide */
.f-guide{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:start}
.f-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 32px;margin-top:8px}
.f-pt h3{margin:0;font-size:18px;font-weight:700;display:flex;align-items:flex-start;gap:12px}
.f-pt h3::before{content:"";flex:0 0 10px;margin-top:8px;width:10px;height:10px;border-radius:50%;background:var(--verde);box-shadow:0 0 0 6px rgba(0,199,87,.14)}
.f-pt p{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:var(--grigio)}
/* fit */
.f-fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:52px}
.f-fitc{border-radius:22px;padding:36px 36px 30px;background:var(--bianco);border:1px solid var(--linea)}
.f-fitc h3{margin:0;font-family:Outfit,sans-serif;font-weight:300;font-size:28px}
.f-fitc ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:16px}
.f-fitc li{display:flex;gap:14px;font-size:16.5px;line-height:1.6}
.f-yes li::before,.f-no li::before{content:"";flex:0 0 22px;height:22px;margin-top:1px;border-radius:50%;background-position:center;background-size:22px;background-repeat:no-repeat}
.f-yes li::before{background-color:rgba(0,199,87,.16);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.5 11.3l3 3 6-6' fill='none' stroke='%23007A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.f-no li::before{background-color:rgba(2,37,41,.07);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' fill='none' stroke='%234B6164' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.f-no li{color:var(--grigio)}
/* faq */
.f-faq{margin-top:48px;border-top:1px solid var(--linea);max-width:900px}
.f-faq details{border-bottom:1px solid var(--linea)}
.f-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:19px;font-weight:600}
.f-faq summary::-webkit-details-marker{display:none}
.f-faq summary::after{content:"";flex:0 0 28px;height:28px;border-radius:50%;border:1px solid rgba(2,37,41,.2);background:linear-gradient(var(--petrol),var(--petrol)) center/11px 1.5px no-repeat,linear-gradient(var(--petrol),var(--petrol)) center/1.5px 11px no-repeat;transition:transform .35s,background-color .3s}
.f-faq details[open] summary::after{transform:rotate(45deg);background-color:var(--menta)}
.f-faq details p{margin:0;padding:0 56px 26px 0;font-size:16.5px;line-height:1.75;color:var(--grigio)}
/* final */
.f-final{text-align:center;padding:120px 0}
.f-final .f-h2{margin-left:auto;margin-right:auto}
.f-final .f-p{margin-left:auto;margin-right:auto}
.f-final .f-ctas{justify-content:center}
.f-alt{display:inline-block;margin-top:26px;font-size:15px;color:var(--menta)!important;text-decoration:none;border-bottom:1px solid rgba(180,234,194,.4);padding-bottom:3px}
/* form */
.f-form{margin-top:48px;border-radius:24px;border:1px solid var(--linea);background:var(--bianco);padding:44px 48px;box-shadow:0 40px 80px -48px rgba(2,37,41,.25)}
.f-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.f-field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.f-field--w{grid-column:1/-1}
.f-field input,.f-field select,.f-field textarea{font:inherit;font-weight:500;font-size:16px;color:var(--petrol);background:var(--ice);border:1px solid var(--linea);border-radius:12px;padding:14px 16px;outline:none;transition:border-color .25s,box-shadow .25s}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--verde);box-shadow:0 0 0 4px rgba(0,199,87,.14)}
.f-field small{font-weight:500;color:var(--grigio)}
.f-check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--grigio);font-weight:500}
.f-check input{margin-top:3px;accent-color:var(--verde)}
.f-formfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:28px}
.f-formfoot p{margin:0;font-size:14px;color:var(--grigio)}
.f-src{padding:44px 0 56px;border-top:1px solid var(--linea)}
.f-src p{margin:0;font-size:13px;line-height:1.7;color:var(--grigio);max-width:980px}
.f-foot{background:var(--petrol);color:rgba(252,252,252,.7);padding:44px 0}
.f-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;font-size:14px}
.f-foot a{color:rgba(252,252,252,.7)!important;text-decoration:none;margin-left:22px}
.f-sticky{display:none}
/* motion */
.f-mo [data-rv]{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo [data-rv].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.f-mo [data-rv]{opacity:1;transform:none;transition:none}}
/* responsive */
@media (max-width:1000px){
.f-hero-grid,.f-guide,.f-sample-g,.f-sit{grid-template-columns:minmax(0,1fr)}
.f-grid3,.f-tiers,.f-notes{grid-template-columns:minmax(0,1fr)}
.f-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-steps::before{display:none}
.f-row{grid-template-columns:minmax(0,1fr);gap:14px}
.f-nav{display:none}
}
@media (max-width:720px){
.f-wrap{padding:0 16px}
.f-sec{padding:76px 0}
.f-hero-grid{padding-top:44px;padding-bottom:64px;gap:40px}
.f-head-in{height:64px}
.f-head .f-pill{min-height:40px;padding:0 16px;font-size:14px}
.f-sample{padding:30px 20px}
.f-sample-t{font-size:32px}
.f-bars li{grid-template-columns:110px minmax(0,1fr) 30px;gap:10px;font-size:14.5px}
.f-steps,.f-pts,.f-fit,.f-fields{grid-template-columns:minmax(0,1fr)}
.f-form{padding:28px 20px}
.f-fig{font-size:60px}.f-fig--word{font-size:48px}
.f-faq details p{padding-right:0}
.f-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center}
.f-sticky .f-pill{width:100%;box-shadow:0 16px 36px rgba(2,37,41,.28)}
.f-foot a{margin:0 18px 0 0}
}
/* ==================================================================================================
   ADDITIONS for the sales-page generator. Everything above this line is copied verbatim from
   home-canvas/src/DeckReview.dc.html and must stay as it is. Rules below add to it; where one generalises a rule above
   it is written so that the reference page renders the same (see the comments "keeps the reference unchanged" and
   "same as the reference unless ...").
   Pattern for every animated visual: final state by default; hidden/initial state under .f-mo (set by the motion
   script, never under prefers-reduced-motion); the .is-in class of the [data-rv] wrapper plays it.
   ================================================================================================== */
/* inline markup in any text field: *accent* -> em, **bold** -> b, [label](url) -> a */
:where(.f-root) em{font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;color:var(--testo)}
:where(.f-ver) em{font-family:inherit;font-weight:inherit}
.f-dark em,.f-tier--k em,.f-first em,.f-qcard em,.f-price em,.f-pnl em{color:var(--mint)}
:where(.f-p,.f-lead,.f-card p,.f-pt p,.f-steps p,.f-row p,.f-faq p,.f-fitc li,.f-tier p,.f-note p,.f-it p,.f-fine,.f-src p,.f-check,.f-doc-l li,.f-tbl td) b{color:var(--petrol)}
.f-dark b,.f-tier--k b,.f-price b{color:var(--bianco)}
:where(.f-p,.f-lead,.f-card p,.f-pt p,.f-steps p,.f-row p,.f-faq p,.f-fitc li,.f-tier p,.f-note p,.f-it p,.f-promise,.f-fine,.f-src p,.f-check,.f-doc-l li,.f-tbl td,.f-price-g,.f-micro) a{text-decoration-thickness:1px;text-underline-offset:3px}
.f-dark p a,.f-price p a{color:var(--menta)}
.f-qcard blockquote a{color:var(--menta)}

/* layout variants */
@media (min-width:1001px){.f-row{grid-template-columns:minmax(260px,max-content) minmax(0,1fr)}}  /* same as the reference unless a figure is wider than 260px */
.f-hero-grid--solo{grid-template-columns:minmax(0,1fr)}
.f-hero-grid--solo .f-h1{max-width:920px}
.f-sit--solo{grid-template-columns:minmax(0,1fr)}
.f-fit--1{grid-template-columns:minmax(0,760px)}
.f-vers .f-ver.f-ver--now{opacity:1;transform:none}  /* keeps the reference unchanged (its "now" row is the 4th) */
.f-ver:nth-child(n+4):not(.f-ver--now){opacity:.9;transform:scale(.99)}
@media (min-width:1001px){
.f-grid3--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
.f-grid3--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.f-steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.f-steps--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px}
.f-steps--n{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px}
.f-steps--n::before{display:none}
.f-notes--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-notes--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.f-tiers--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-tiers--1{grid-template-columns:minmax(0,1fr)}
}

/* situation visual: checklist (done = solid card, missing = dashed outline) */
.f-ck{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px dashed rgba(2,37,41,.26);border-radius:14px;font-size:15.5px;line-height:1.45;color:var(--grigio)}
.f-ck--done{border:1px solid var(--linea);background:var(--bianco);color:var(--petrol);box-shadow:0 12px 30px -20px rgba(2,37,41,.22)}
.f-cb{flex:0 0 24px;height:24px;border-radius:50%;border:1.5px solid rgba(2,37,41,.28)}
.f-ck--done .f-cb{border-color:var(--verde);background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23022529' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat}
.f-mo .f-ck{opacity:0;transform:translateX(14px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-chk.is-in .f-ck{opacity:1;transform:none}
/* situation visual: quote (the reader's own thought, never a testimonial) */
.f-qcard{position:relative;margin:0;padding:50px 40px 34px;border-radius:26px;background:radial-gradient(70% 90% at 90% 0%,rgba(0,199,87,.18),rgba(2,37,41,0) 60%),var(--petrol);color:var(--bianco);box-shadow:0 34px 60px -34px rgba(2,37,41,.5)}
.f-qcard::before{content:"\201C";position:absolute;left:34px;top:20px;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;font-size:92px;line-height:1;color:var(--mint);opacity:.85}
.f-qcard blockquote{margin:18px 0 0;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(22px,2.1vw,28px);line-height:1.45}
.f-qcard figcaption{margin-top:26px;padding-top:20px;border-top:1px solid rgba(252,252,252,.16);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--menta)}

/* hero visuals on a dark panel (timeline, runway, route) */
.f-pnl{position:relative;width:min(468px,100%);border-radius:28px;padding:30px 30px 28px;color:var(--bianco);background:radial-gradient(90% 75% at 28% 12%,#0E5A3A 0%,#03312F 52%,#022529 100%);box-shadow:0 34px 56px -22px rgba(2,37,41,.34);overflow:hidden}
.f-pnl-h b{display:block;font-family:Outfit,sans-serif;font-weight:200;font-size:clamp(56px,7vw,76px);line-height:1;letter-spacing:-.04em;color:var(--bianco)}
.f-pnl-h b small{font-size:.38em;letter-spacing:0;margin-left:8px;color:var(--mint);font-weight:300}
.f-pnl-h span{display:block;margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--menta)}
/* timeline */
.f-tl-track{position:relative;height:200px;margin-top:20px}
.f-tl-base,.f-tl-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.f-tl-base{background:rgba(252,252,252,.14)}
.f-tl-line{background:linear-gradient(90deg,#B4EAC2,#00C757);transform-origin:0 50%}
.f-tl-t{position:absolute;left:var(--x);top:50%;width:2px;height:12px;margin:-6px 0 0 -1px;border-radius:2px;background:rgba(180,234,194,.5)}
.f-tl-m{position:absolute;left:var(--x);top:0;bottom:0;width:0}
.f-tl-dot{position:absolute;left:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--bianco);box-shadow:0 0 0 5px rgba(125,228,168,.24)}
.f-tl-lab{position:absolute;left:0;width:max-content;max-width:104px;transform:translateX(-50%);text-align:center;font-size:13px;line-height:1.35;color:rgba(252,252,252,.86)}
.f-tl-lab b{display:block;margin-bottom:3px;font-family:Outfit,sans-serif;font-weight:300;font-size:22px;line-height:1;color:var(--mint)}
.f-tl-m::after{content:"";position:absolute;left:-.5px;width:1px;height:14px;background:rgba(180,234,194,.45)}
.f-tl-m--dn .f-tl-lab{top:calc(50% + 24px)}
.f-tl-m--dn::after{top:calc(50% + 8px)}
.f-tl-m--up .f-tl-lab{bottom:calc(50% + 24px)}
.f-tl-m--up::after{bottom:calc(50% + 8px)}
.f-tl-m--l .f-tl-lab{transform:none;text-align:left}
.f-tl-m--r .f-tl-lab{transform:none;left:auto;right:0;text-align:right}
.f-mo .f-tl-line{transform:scaleX(0);transition:transform var(--t,1.6s) linear var(--d,.45s)}
.f-mo .f-dialbox.is-in .f-tl-line{transform:scaleX(1)}
.f-mo .f-tl-t{background:rgba(252,252,252,.14);transition:background-color .5s ease var(--d,0s)}
.f-mo .f-dialbox.is-in .f-tl-t{background:rgba(180,234,194,.5)}
.f-mo .f-tl-dot{transform:scale(0);transition:transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-dialbox.is-in .f-tl-dot{transform:scale(1)}
.f-mo .f-tl-lab,.f-mo .f-tl-m::after{opacity:0;transition:opacity .8s ease var(--d,0s)}
.f-mo .f-dialbox.is-in .f-tl-lab,.f-mo .f-dialbox.is-in .f-tl-m::after{opacity:1}
/* runway */
.f-rw{padding:26px 26px 20px}
.f-rw-k{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--menta)}
.f-rw-k span{display:inline-flex;align-items:center;gap:9px}
.f-rw-k i{flex:0 0 auto;width:18px;height:3px;border-radius:3px;background:var(--c)}
.f-rw-chart{position:relative;margin-top:16px;aspect-ratio:400/230}
.f-rw-chart svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.f-rw-ln{stroke-dasharray:100 100;stroke-dashoffset:0}
.f-rw-mk{position:absolute;top:0;transform:translateX(-50%);padding:6px 11px;border-radius:999px;border:1px solid rgba(125,228,168,.34);background:rgba(125,228,168,.12);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);white-space:nowrap}
.f-rw-mk--r{transform:translateX(-100%)}
.f-rw-mk--l{transform:none}
.f-rw-x{position:relative;height:20px;margin-top:8px}
.f-rw-x span{position:absolute;top:0;transform:translateX(-50%);font-size:12px;color:rgba(252,252,252,.62);white-space:nowrap}
.f-rw-end circle:first-child{transform-box:fill-box;transform-origin:center}
.f-mo .f-rw-ln{stroke-dashoffset:100;transition:stroke-dashoffset 2.2s cubic-bezier(.3,.7,.2,1) var(--d,.4s)}
.f-mo .f-dialbox.is-in .f-rw-ln{stroke-dashoffset:0}
.f-mo .f-rw-area,.f-mo .f-rw-mkl,.f-mo .f-rw-end,.f-mo .f-rw-mk{opacity:0;transition:opacity 1s ease 1.9s}
.f-mo .f-dialbox.is-in .f-rw-area,.f-mo .f-dialbox.is-in .f-rw-mkl,.f-mo .f-dialbox.is-in .f-rw-end,.f-mo .f-dialbox.is-in .f-rw-mk{opacity:1}
.f-mo .f-dialbox.is-in .f-rw-end circle:first-child{animation:f-pulse 2.8s ease-in-out 3.2s infinite}
@keyframes f-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.3}}
/* route */
.f-rt{padding:18px}
.f-rt-map{position:relative;aspect-ratio:440/340}
.f-rt-bg{position:absolute;inset:0;background:radial-gradient(circle,rgba(180,234,194,.28) 1px,transparent 1.7px) 0 0/20px 20px;-webkit-mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 28%,transparent 100%);mask-image:radial-gradient(ellipse 64% 64% at 50% 50%,#000 28%,transparent 100%)}
.f-rt-map svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.f-rt-arc{stroke-dasharray:100 100;stroke-dashoffset:0}
.f-rt-flow{stroke-dasharray:.02 7;stroke-dashoffset:0;opacity:.9}
.f-rt-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.f-rt-c{position:absolute;font-size:13px;font-weight:600;line-height:1.2;color:var(--bianco);white-space:nowrap;text-shadow:0 0 10px #022529,0 0 3px #022529}
.f-rt-c--r{transform:translate(14px,-50%)}
.f-rt-c--l{transform:translate(calc(-100% - 14px),-50%)}
.f-rt-c--t{transform:translate(-50%,calc(-100% - 14px))}
.f-rt-c--b{transform:translate(-50%,14px)}
.f-rt-c--hub{font-size:15px;color:var(--mint)}
.f-mo .f-rt-arc{stroke-dashoffset:100;transition:stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1) var(--d,.5s)}
.f-mo .f-dialbox.is-in .f-rt-arc{stroke-dashoffset:0}
.f-mo .f-rt-flow{opacity:0;transition:opacity 1.2s ease var(--d,2s)}
.f-mo .f-dialbox.is-in .f-rt-flow{opacity:.9;animation:f-flow 3.8s linear var(--d,2s) infinite}
.f-mo .f-rt-city,.f-mo .f-rt-c{opacity:0;transition:opacity .9s ease var(--d,.3s)}
.f-mo .f-dialbox.is-in .f-rt-city,.f-mo .f-dialbox.is-in .f-rt-c{opacity:1}
.f-mo .f-dialbox.is-in .f-rt-ring{animation:f-ring 3.2s ease-out 1.2s infinite}
@keyframes f-flow{to{stroke-dashoffset:-7.02}}
@keyframes f-ring{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(2.6);opacity:0}}
/* docs: a cascade of document cards; the front one carries a single small check ("in order", never an approval: no stamp, no seal) */
.f-docs{position:relative;width:min(440px,100%);height:calc(var(--n)*64px + 70px)}
.f-dcard{position:absolute;left:0;right:0;top:calc(var(--i)*64px);z-index:calc(var(--i) + 1);display:flex;align-items:flex-start;gap:14px;min-height:78px;padding:15px 20px;border:1px solid var(--linea);border-radius:18px;background:var(--bianco);box-shadow:0 18px 40px -24px rgba(2,37,41,.32)}
.f-dcard:nth-child(odd){margin-right:16px;transform:rotate(-.7deg)}
.f-dcard:nth-child(even){margin-left:16px;transform:rotate(.6deg)}
.f-dcard--front{flex-wrap:wrap;min-height:132px}
.f-dic{flex:0 0 40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--ice);color:var(--scuro)}
.f-dtx{flex:1;min-width:0}
.f-dtx b{display:block;font-size:16px;font-weight:700;line-height:1.3;color:var(--petrol)}
.f-dtx span{display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--grigio)}
.f-dck{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--scuro);background:rgba(0,199,87,.12)}
.f-dln{display:block;flex:0 0 100%}
.f-dln i{display:block;height:7px;border-radius:7px;background:var(--linea);margin-top:9px}
.f-dln i:nth-child(2){width:84%}.f-dln i:nth-child(3){width:56%}
.f-mo .f-dcard{opacity:0;transform:translateY(46px);transition:opacity .8s ease var(--d,0s),transform 1s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-dialbox.is-in .f-dcard:nth-child(odd){opacity:1;transform:rotate(-.7deg)}
.f-mo .f-dialbox.is-in .f-dcard:nth-child(even){opacity:1;transform:rotate(.6deg)}
.f-mo .f-dck{opacity:0;transform:scale(.4);transition:opacity .5s ease var(--d,0s),transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-dialbox.is-in .f-dck{opacity:1;transform:none}
/* stack: product tiles fanned out like a hand of cards. Later tiles lie on top, so the top-left of every tile (badge + name) stays readable.
   gen_board.js computes the geometry (see stackGeometry): --ar box ratio, --tw tile width (% of the box), --tx offset per step (% of the tile),
   --a angle per step, --top / --th tile position and height (% of the box), --fs label size in px at 440 wide (--fq: the same as % of the box,
   so labels scale with it). Four or more tiles become a 2-column grid on phones (.f-stk--many), where a fan would be too narrow to read. */
.f-stk{position:relative;width:min(440px,100%);aspect-ratio:var(--ar,1.3);container-type:inline-size}
.f-tile{position:absolute;left:calc(50% - var(--tw)/2);top:var(--top);width:var(--tw);height:var(--th);z-index:var(--z);display:flex;flex-direction:column;padding:calc(var(--tw)*.1) calc(var(--tw)*.09) calc(var(--tw)*.09);border:1px solid var(--linea);border-radius:18px;background:var(--bianco);box-shadow:0 26px 50px -26px rgba(2,37,41,.4);transform-origin:50% 100%;transform:rotate(calc(var(--k)*var(--a))) translateX(calc(var(--k)*var(--tx)))}
.f-tile .f-ico{align-self:flex-start;font-size:12px;padding:6px 9px;border-radius:8px}
.f-tile b{margin-top:14px;font-family:Outfit,sans-serif;font-weight:400;font-size:var(--fs,17px);font-size:calc(var(--fq,3.9)*1cqw);line-height:1.25;letter-spacing:-.01em;color:var(--petrol);overflow-wrap:anywhere}
.f-tile:not(:last-child) b{max-width:68%}  /* the part of the label that is not covered by the next tile */
.f-tile-ln{display:block;margin-top:auto}
.f-tile-ln i{display:block;height:6px;border-radius:6px;background:var(--linea);margin-top:9px}
.f-tile-ln i:nth-child(2){width:82%}.f-tile-ln i:nth-child(3){width:54%}
.f-ico--x{background:var(--verde);color:var(--petrol)}
.f-ico--s{background:var(--scuro)}
.f-ico--d{background:var(--menta);color:var(--petrol)}
.f-mo .f-tile{opacity:0;transform:none;transition:opacity .6s ease var(--d,0s),transform 1.3s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-dialbox.is-in .f-tile{opacity:1;transform:rotate(calc(var(--k)*var(--a))) translateX(calc(var(--k)*var(--tx)))}
@media (max-width:560px){
.f-stk--many{aspect-ratio:auto;container-type:normal;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f-stk--many .f-tile{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:150px;padding:16px 16px 14px;transform:none;border-radius:16px}
.f-stk--many .f-tile:nth-child(odd){transform:rotate(-.9deg)}
.f-stk--many .f-tile:nth-child(even){transform:rotate(.8deg)}
.f-stk--many .f-tile:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}
.f-stk--many .f-tile b,.f-stk--many .f-tile:not(:last-child) b{max-width:none;font-size:16px}
.f-mo .f-stk--many .f-tile{transform:translateY(24px)}
.f-mo .f-dialbox.is-in .f-stk--many .f-tile:nth-child(odd){transform:rotate(-.9deg)}
.f-mo .f-dialbox.is-in .f-stk--many .f-tile:nth-child(even){transform:rotate(.8deg)}
}
/* paths: "you are here -> go there" */
.f-dialbox--paths{align-items:stretch}
.f-paths{display:grid;gap:12px;width:min(468px,100%);margin:0 auto}
.f-paths-t{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro)}
.f-path{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:3px;padding:18px 20px 18px 22px;border:1px solid var(--linea);border-radius:18px;background:var(--bianco);color:var(--petrol);text-decoration:none;box-shadow:0 12px 30px -22px rgba(2,37,41,.24);transition:background-color .3s,border-color .3s,box-shadow .3s}
.f-root .f-path{color:var(--petrol)}
.f-path-l{grid-column:1;font-size:17px;font-weight:700;line-height:1.35}
.f-path-h{grid-column:1;font-size:14.5px;line-height:1.5;color:var(--grigio);transition:color .3s}
.f-path-a{grid-column:2;grid-row:1/span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(2,37,41,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .3s,border-color .3s}
.f-path:hover,.f-path:focus-visible{background:var(--ice);border-color:var(--verde);box-shadow:0 18px 40px -24px rgba(0,199,87,.45)}
.f-path:hover .f-path-a,.f-path:focus-visible .f-path-a{transform:translateX(4px);background:var(--verde);border-color:var(--verde)}
.f-path:hover .f-path-h,.f-path:focus-visible .f-path-h{color:var(--scuro)}
.f-path:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.f-mo .f-path[data-rv]{transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),background-color .3s,border-color .3s,box-shadow .3s}

/* sample card kinds: table and doc */
.f-sample--tbl{padding-bottom:38px}
.f-tbl{width:100%;margin-top:34px;border-collapse:collapse;font-size:16px}
.f-tbl th{padding:0 20px 14px 0;text-align:left;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--scuro);border-bottom:1px solid rgba(2,37,41,.18)}
.f-tbl td{padding:18px 20px 18px 0;vertical-align:top;border-bottom:1px solid var(--linea);line-height:1.55;color:var(--grigio)}
.f-tbl td:first-child{color:var(--petrol);font-weight:600}
.f-tbl tbody tr:last-child td{border-bottom:0}
.f-tbl th:last-child,.f-tbl td:last-child{padding-right:0}
.f-mo .f-sample .f-tbl tbody tr{opacity:0;transition:opacity .9s ease var(--d,0s)}
.f-mo .f-sample.is-in .f-tbl tbody tr{opacity:1}
.f-doc{position:relative;margin:38px auto 8px;max-width:780px}
.f-doc::before{content:"";position:absolute;inset:10px -12px -12px 12px;border:1px solid var(--linea);border-radius:18px;background:rgba(252,252,252,.55);transform:rotate(1.1deg)}
.f-doc-p{position:relative;padding:36px 44px 14px;border:1px solid var(--linea);border-radius:18px;background:var(--bianco);box-shadow:0 30px 60px -36px rgba(2,37,41,.34)}
.f-doc-hd{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--linea)}
.f-doc-l{counter-reset:dl;list-style:none;margin:0;padding:0}
.f-doc-l li{counter-increment:dl;display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--linea);font-size:16.5px;line-height:1.65;color:var(--petrol)}
.f-doc-l li>span{flex:1;min-width:0}
.f-doc-l li::before{content:counter(dl,decimal-leading-zero);flex:0 0 28px;padding-top:2px;font-family:Outfit,sans-serif;font-weight:300;font-size:15px;color:var(--scuro)}
.f-doc-l li:last-child{border-bottom:0}
.f-mo .f-sample .f-doc-l li{opacity:0;transform:translateY(8px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.f-mo .f-sample.is-in .f-doc-l li{opacity:1;transform:none}

/* inside: what is in the product */
.f-ins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px}
.f-ins--1{grid-template-columns:minmax(0,640px)}
.f-ins--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-it{border:1px solid var(--linea);border-radius:20px;padding:28px 30px 30px;background:var(--bianco);transition:border-color .35s,box-shadow .45s}
.f-it:hover{border-color:rgba(0,199,87,.5);box-shadow:0 30px 60px -34px rgba(2,37,41,.28)}
.f-it-h{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.f-it-m{font-size:13px;font-weight:600;color:var(--grigio)}
.f-it h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.f-it p{margin:10px 0 0;font-size:16px;line-height:1.7;color:var(--grigio)}
.f-mo .f-it[data-rv]{transition:opacity .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .35s,box-shadow .45s}

/* tiers: a single tier is a wide feature card */
.f-tier--wide{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;padding:44px 48px}
.f-tier--wide h3{font-size:clamp(30px,3vw,40px)}
.f-tier-d{margin:20px 0 0;max-width:520px;font-size:17px;line-height:1.7;color:var(--grigio)}
.f-tier--k .f-tier-d{color:rgba(252,252,252,.76)}
.f-tier-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.f-tier--wide .f-inc{margin:0;padding:0;border-top:0;width:100%;font-size:16px}
.f-tier--wide .f-pill{margin-top:30px}
.f-tier--wide:hover{transform:none}

/* price (products): one dark offer card */
.f-price{margin-top:56px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:center;border-radius:28px;padding:52px 56px;color:var(--bianco);background:radial-gradient(60% 80% at 85% 10%,rgba(0,199,87,.16),rgba(2,37,41,0) 60%),var(--petrol);box-shadow:0 40px 80px -40px rgba(2,37,41,.45)}
.f-price-fig{margin:0;font-family:Outfit,sans-serif;font-weight:200;font-size:clamp(72px,9vw,112px);line-height:1;letter-spacing:-.04em;color:var(--mint)}
.f-price-note{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--menta)}
.f-price .f-pill{margin-top:30px}
.f-price-g{margin:22px 0 0;display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:rgba(252,252,252,.74)}
.f-price-g::before{content:"";flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(125,228,168,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%237DE4A8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.f-price-inc{margin:0;padding:0;border:0;gap:16px;font-size:16.5px;line-height:1.55;color:rgba(252,252,252,.92)}

/* form: in a row where only one of the two fields has a hint line, the other one sits at the bottom so the inputs line up */
.f-field--push{justify-content:flex-end}

/* header button: optional shorter label for phones (nav_cta.short); a long label without one wraps onto two centred lines */
.f-cta-s{display:none}
@media (max-width:560px){.f-cta-l{display:none}.f-cta-s{display:inline}.f-head .f-pill{text-align:center}}

/* reduced motion, belt and braces: no endless animation even if the preference flips after load */
@media (prefers-reduced-motion:reduce){.f-mo *,.f-mo *::before,.f-mo *::after{animation:none!important}}

/* responsive additions */
@media (max-width:1000px){
.f-ins{grid-template-columns:repeat(2,minmax(0,1fr))}
.f-ins--1{grid-template-columns:minmax(0,1fr)}
.f-price{grid-template-columns:minmax(0,1fr);gap:36px;padding:44px 36px}
.f-tier--wide{grid-template-columns:minmax(0,1fr);gap:28px}
.f-fit--1{grid-template-columns:minmax(0,1fr)}
.f-doc-p{padding:30px 30px 10px}
}
@media (max-width:720px){
.f-pnl{padding:24px 20px 22px;border-radius:24px}
.f-rw{padding:22px 18px 16px}
.f-rt{padding:12px}
.f-tl-lab{font-size:12.5px;max-width:92px}
.f-rt-c{font-size:12px}
.f-rt-c--hub{font-size:13.5px}
.f-ins{grid-template-columns:minmax(0,1fr)}
.f-price{padding:34px 22px;margin-top:40px}
.f-tier--wide{padding:30px 22px}
.f-qcard{padding:46px 24px 28px}
.f-qcard::before{left:22px}
.f-path{padding:16px 16px 16px 18px}
.f-doc-p{padding:26px 22px 8px}
.f-doc-l li{gap:14px;font-size:16px}
.f-sample--tbl,.f-sample--doc{padding:30px 20px}
.f-tbl,.f-tbl tbody,.f-tbl tr,.f-tbl td{display:block;width:100%}
.f-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.f-tbl{margin-top:22px}
.f-tbl tr{padding:16px 0;border-bottom:1px solid var(--linea)}
.f-tbl tbody tr:last-child{border-bottom:0}
.f-tbl td{padding:3px 0;border:0}
.f-tbl td+td::before{content:attr(data-label);display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--scuro)}
.f-tbl td:first-child{padding-bottom:2px;font-size:17px}
.f-tbl--num td+td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:4px 0}
.f-tbl--num td+td::before{margin-top:0}
}

/* ---- C. integration with the site ---- */

/* header button (theme header): a page may give nav_cta a shorter label for narrow desktop widths; the long one stays in the phone menu */
.ax-header__cta .ax-cta-s{display:none}
@media (max-width:1180px){.ax-header__cta .ax-cta-l{display:none}.ax-header__cta .ax-cta-s{display:inline}}

/* the site header is meant to stay on screen (style.css gives .ax-header position:sticky), but its template-part wrapper is only as tall as the header, so on every page it scrolls away with the content.
   On sales pages the wrapper itself sticks, which keeps the header button in reach, as in the approved boards. Delete this rule to get the site's usual behaviour back. */
body:has(.f-root) .wp-site-blocks>.wp-block-template-part:first-child{position:sticky;top:var(--ax-ab,0px);z-index:60}

/* in-page anchors land right under the sticky site header (72px + WordPress admin bar) */
.f-root [id]{scroll-margin-top:calc(var(--ax-hh,72px) + var(--ax-ab,0px))}

/* form: submitted by the theme's [data-ax-form] handler. Success hides the fields and shows the message; the status line takes the place of the form */
.f-form .ax-form__status{margin:22px 0 0;font-size:15px;font-weight:600;line-height:1.5;min-height:0}
.f-form .ax-form__status:empty{display:none}
.f-form .ax-form__status.is-ok{color:var(--scuro)}
.f-form .ax-form__status.is-err{color:#B42318}
.f-form.is-sent .f-fields,.f-form.is-sent .f-formfoot,.f-form.is-sent .f-fine{display:none}
.f-form.is-sent{padding-top:34px;padding-bottom:34px}
.f-form.is-sent .ax-form__status{margin:0;padding:20px 22px;border-radius:16px;background:rgba(0,199,87,.10);font-size:17px;line-height:1.55}
.f-pill[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
@media (max-width:720px){.f-form.is-sent{padding-top:22px;padding-bottom:22px}.f-form.is-sent .ax-form__status{padding:16px 16px}}

/* the phone bar sits below the site header (60) and the mobile menu, and above the page; it steps aside while the section it points to or the footer is on screen, or while the cookie banner is open */
.f-sticky{z-index:30;transition:opacity .25s ease,transform .25s ease}
.f-sticky.is-off{opacity:0;transform:translateY(16px);pointer-events:none;visibility:hidden}
body:has(.ax-consent.is-open) .f-sticky{opacity:0;pointer-events:none;visibility:hidden}
@media print{.f-sticky{display:none!important}}