/* =========================================================================== V2W landing page common styles Scope: pages that put class "lp" on (see shared/lp-common). Tokens required by the generator: --accent, --accent-dark, --ink. Self contained: system font stack only, no web fonts, no images, no network. =========================================================================== */ :root{ --accent:#3661f5; --accent-dark:#2048c4; --ink:#14223a; --ink-2:#3c4a63; --muted:#5f6d86; --line:#e3e9f5; --line-strong:#ccd7ec; --soft:#f5f7fd; --surface:#ffffff; --accent-wash:rgba(54,97,245,.09); --accent-line:rgba(54,97,245,.26); --danger:#c23b3b; --danger-line:#efb9b9; --danger-wash:#fdf3f3; --ok:#1f7a4d; --ok-line:#a9dcbe; --ok-wash:#f2fbf5; --radius:8px; --wrap:1200px; --gutter:clamp(16px,4vw,32px); --shadow-sm:0 1px 2px rgba(20,34,58,.06); --shadow-md:0 12px 32px rgba(20,34,58,.10); --shadow-lg:0 24px 60px rgba(20,34,58,.16); --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* --------------------------------------------------------- base ---------- */ body.lp{ margin:0; background:var(--surface); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; overflow-wrap:break-word; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; } .lp *,.lp *::before,.lp *::after{box-sizing:border-box} .lp h1,.lp h2,.lp h3,.lp h4{ margin:0; color:var(--ink); font-weight:700; line-height:1.16; letter-spacing:0; } .lp h1{font-size:clamp(2.1rem,1.55rem + 2.7vw,3.4rem);line-height:1.08} .lp h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.3rem)} .lp h3{font-size:clamp(1.05rem,1rem + .25vw,1.22rem)} .lp p{margin:0} .lp ul{margin:0} .lp img,.lp svg{max-width:100%} .lp img{display:block;height:auto} .lp a{color:var(--accent-dark);text-decoration:none} .lp a:not(.button):hover{text-decoration:underline} .lp a:focus-visible, .lp button:focus-visible, .lp summary:focus-visible, .lp [tabindex]:focus-visible{ outline:2px solid var(--accent-dark); outline-offset:3px; border-radius:4px; } .lp [hidden]{display:none !important} .lp .wrap{ width:100%; max-width:var(--wrap); margin-left:auto; margin-right:auto; padding-left:var(--gutter); padding-right:var(--gutter); } .lp #contato,.lp section[id]{scroll-margin-top:88px} @media (prefers-reduced-motion:no-preference){ :root{scroll-behavior:smooth} } /* ---------------------------------------------------- skip link ---------- */ .lp .skip-link{ position:absolute; top:-60px; left:var(--gutter); z-index:130; padding:10px 16px; border-radius:var(--radius); background:var(--ink); color:#fff; font-size:.9rem; font-weight:600; text-decoration:none; transition:top .15s ease; } .lp .skip-link:focus,.lp .skip-link:focus-visible{top:12px;color:#fff;text-decoration:none} /* ------------------------------------------------- preview banner --------- */ .lp .preview-banner{ position:relative; z-index:70; padding:8px var(--gutter); background:#fff5dd; border-bottom:1px solid #f0d89c; color:#5c4406; font-size:.82rem; font-weight:600; line-height:1.4; text-align:center; } .lp .preview-banner a{color:#5c4406;text-decoration:underline} /* -------------------------------------------------------- header ---------- */ .lp .site-header{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); } .lp .site-header > .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; min-height:68px; padding-top:10px; padding-bottom:10px; } .lp .brand{ display:inline-flex; align-items:center; gap:10px; min-width:0; color:var(--ink); font-size:1.02rem; font-weight:700; text-decoration:none; } .lp .brand:hover{text-decoration:none;color:var(--ink)} .lp .brand img,.lp .brand svg{height:26px;width:auto;max-width:180px;flex:none} .lp .brand span{color:var(--muted);font-size:.92rem;font-weight:500} .lp .nav{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; min-width:0; } .lp .nav a:not(.button){ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:6px; color:var(--ink-2); font-size:.95rem; font-weight:600; text-decoration:none; transition:background-color .15s ease,color .15s ease; } .lp .nav a:not(.button):hover{background:var(--soft);color:var(--ink);text-decoration:none} .lp .nav .button{min-height:44px;padding:10px 18px;font-size:.94rem;box-shadow:none} .lp .menu-toggle{display:none} @media(max-width:760px){ .lp.lp-ready .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit} .lp.lp-ready .site-header .brand span{display:none} .lp.lp-ready .nav{flex-basis:100%} .lp.lp-ready .nav:not([data-open="true"]){display:none} } /* --------------------------------------------------------- buttons -------- */ .lp .button{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:var(--radius); background:var(--accent); color:#fff; font-family:inherit; font-size:1rem; font-weight:600; line-height:1.25; text-align:center; text-decoration:none; cursor:pointer; box-shadow:0 8px 20px rgba(54,97,245,.22); transition:background-color .16s ease,box-shadow .16s ease,transform .16s ease; -webkit-appearance:none; appearance:none; } .lp .button:hover{ background:var(--accent-dark); color:#fff; text-decoration:none; box-shadow:0 10px 26px rgba(32,72,196,.26); } .lp .button:active{transform:translateY(1px)} .lp .button.secondary{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); box-shadow:var(--shadow-sm); } .lp .button.secondary:hover{ background:#f7f9ff; border-color:var(--accent); color:var(--accent-dark); box-shadow:var(--shadow-sm); } .lp .button[disabled], .lp .button:disabled, .lp .button[aria-disabled="true"]{ background:#c8d2e6; border-color:#c8d2e6; color:#556382; box-shadow:none; cursor:not-allowed; transform:none; } .lp .button.secondary[disabled], .lp .button.secondary:disabled, .lp .button.secondary[aria-disabled="true"]{ background:var(--soft); border-color:var(--line); color:#8b97ad; } .lp button[disabled],.lp button[aria-disabled="true"]{cursor:not-allowed} /* ------------------------------------------------------------ hero -------- */ .lp .hero{ position:relative; padding:clamp(48px,7vw,96px) 0 clamp(44px,6vw,84px); background-color:#fff; background-image: linear-gradient(180deg,rgba(54,97,245,.05) 0%,rgba(54,97,245,0) 62%), linear-gradient(rgba(20,34,58,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(20,34,58,.035) 1px,transparent 1px); background-size:100% 100%,36px 36px,36px 36px; border-bottom:1px solid var(--line); } .lp .hero > .wrap.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(30px,4vw,60px); } .lp .hero-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,1.6vw,20px); min-width:0; } .lp .eyebrow{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; max-width:100%; padding:6px 10px; border:1px solid var(--accent-line); border-radius:6px; background:var(--accent-wash); color:var(--accent-dark); font-size:.78rem; font-weight:700; letter-spacing:.08em; line-height:1.3; text-transform:uppercase; } .lp .hero-copy h1{max-width:24ch} .lp .hero-copy .lead{ max-width:58ch; color:var(--ink-2); font-size:clamp(1.02rem,1rem + .3vw,1.16rem); line-height:1.62; } .lp .actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; max-width:100%; } .lp .hero-points{ display:grid; gap:12px; margin:4px 0 0; padding:0; list-style:none; } .lp .hero-points li{ position:relative; padding-left:30px; min-width:0; color:var(--ink-2); } .lp .hero-points li::before{ content:""; position:absolute; top:.28em; left:0; width:19px; height:19px; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-wash); } .lp .hero-points li::after{ content:""; position:absolute; top:calc(.28em + 4.5px); left:6.5px; width:4.5px; height:8.5px; border:2px solid var(--accent-dark); border-top:0; border-left:0; transform:rotate(45deg); } /* hero visual: workflow architecture, no invented numbers */ .lp .hero-visual{ position:relative; min-width:0; padding:clamp(10px,1.6vw,18px); background-image: linear-gradient(rgba(20,34,58,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(20,34,58,.045) 1px,transparent 1px); background-size:28px 28px; background-position:-1px -1px; } .lp .visual-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--muted); font-size:.78rem; font-weight:700; letter-spacing:.06em; line-height:1.3; text-transform:uppercase; } .lp .visual-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); flex:none; } .lp .workflow-card{ position:relative; display:grid; gap:14px; padding:clamp(18px,2.2vw,26px); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); box-shadow:var(--shadow-lg); } .lp .workflow-card > h3,.lp .workflow-card > h4{margin:0;font-size:.98rem} .lp .workflow-card > p{margin:0;color:var(--muted);font-size:.92rem} .lp .workflow-step{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:14px; min-width:0; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } .lp .workflow-step:first-of-type{ border-color:var(--accent-line); box-shadow:0 8px 22px rgba(54,97,245,.10); } .lp .workflow-step:not(:last-child)::after{ content:""; position:absolute; left:28px; bottom:-15px; width:2px; height:15px; background:linear-gradient(180deg,var(--line-strong),var(--accent-line)); } .lp .workflow-step h3,.lp .workflow-step h4,.lp .workflow-step strong,.lp .workflow-step b{ display:block; margin:0 0 2px; padding-right:26px; color:var(--ink); font-size:.98rem; line-height:1.35; } .lp .workflow-step p{ margin:0; color:var(--muted); font-size:.9rem; line-height:1.55; } /* decorative arrow or check stays on the first line, at the right edge */ .lp .workflow-step > span[aria-hidden="true"]{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); font-size:1rem; line-height:1; } .lp .workflow-step > span[aria-hidden="true"] svg{width:16px;height:16px;display:block} /* text siblings stay in the content column, never under the badge */ .lp .workflow-step > p,.lp .workflow-step > div,.lp .workflow-step > ul{ grid-column:2 / -1; min-width:0; } .lp .step-number{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border:1px solid var(--accent-line); border-radius:50%; background:var(--accent-wash); color:var(--accent-dark); font-size:.84rem; font-weight:700; } .lp .workflow-step:first-of-type .step-number{ background:var(--accent); border-color:var(--accent); color:#fff; } /* ----------------------------------------------------- trust strip -------- */ .lp .trust-strip{ background:var(--soft); border-bottom:1px solid var(--line); } .lp .trust-strip > .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px clamp(20px,4vw,44px); padding-top:18px; padding-bottom:18px; } .lp .trust-strip > .wrap > *{ min-width:0; margin:0; color:var(--muted); font-size:.92rem; font-weight:600; line-height:1.45; } .lp .trust-strip ul{ display:flex; flex-wrap:wrap; gap:10px clamp(20px,4vw,40px); padding:0; list-style:none; } /* -------------------------------------------------------- sections -------- */ .lp .section{padding:clamp(52px,7vw,92px) 0} .lp .section.soft{background:var(--soft)} .lp .section-heading{ display:grid; justify-items:center; gap:12px; max-width:44rem; margin:0 auto clamp(28px,4vw,44px); text-align:center; } .lp .section-heading .eyebrow{align-self:center} .lp .section-heading h2{max-width:24ch} .lp .section-heading p{ max-width:60ch; color:var(--muted); font-size:1.02rem; line-height:1.65; } .lp .grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,22px); } .lp .card{ display:flex; flex-direction:column; gap:10px; min-width:0; padding:clamp(20px,2.4vw,26px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; } .lp .card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)} .lp .card h3{margin:0} .lp .card p{color:var(--muted);line-height:1.62} .lp .steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,22px); margin-top:clamp(24px,3vw,36px); } .lp .step{ position:relative; min-width:0; padding:clamp(22px,2.4vw,28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .lp .step::before{ content:""; position:absolute; top:0; right:0; left:0; height:3px; border-radius:var(--radius) var(--radius) 0 0; background:var(--accent); } .lp .step:not(:last-child)::after{ content:""; position:absolute; top:34px; right:calc(-1 * clamp(16px,2vw,22px)); width:clamp(16px,2vw,22px); height:2px; background:var(--line-strong); } .lp .step h3{margin:0 0 6px} .lp .step p{color:var(--muted);line-height:1.62} .lp .step .step-number{margin-bottom:12px} /* ------------------------------------------------------------ proof ------- */ .lp .proof-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2vw,22px); } .lp blockquote.proof{ display:flex; flex-direction:column; gap:16px; min-width:0; margin:0; padding:clamp(22px,2.6vw,28px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .lp blockquote.proof p{ color:var(--ink); font-size:1.04rem; line-height:1.6; } .lp blockquote.proof cite{ display:block; color:var(--muted); font-size:.88rem; font-style:normal; font-weight:600; line-height:1.5; } .lp blockquote.proof cite::before{ content:""; display:block; width:34px; height:2px; margin-bottom:10px; background:var(--accent); } /* -------------------------------------------------------------- faq ------- */ /* details is the contracted hook: it works whether .faq is a wrapper or the section itself (the generator emits
). */ .lp .faq details{ max-width:860px; margin-left:auto; margin-right:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:border-color .16s ease,box-shadow .16s ease; } .lp .faq details + details{margin-top:12px} .lp .faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow-md)} .lp .faq summary{ display:flex; align-items:flex-start; gap:14px; padding:18px 20px; color:var(--ink); font-size:1rem; font-weight:600; line-height:1.5; cursor:pointer; list-style:none; } .lp .faq summary::-webkit-details-marker{display:none} .lp .faq summary p{ flex:1 1 auto; min-width:0; margin:0; font-weight:600; } .lp .faq summary::after{ content:""; flex:none; width:11px; height:11px; margin-top:4px; border-right:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(45deg); transition:transform .18s ease; } .lp .faq details[open] summary::after{transform:rotate(225deg)} .lp .faq details > p,.lp .faq details > div,.lp .faq details > ul{ margin:0; padding:0 20px 20px; color:var(--muted); line-height:1.65; } .lp .faq details > ul{padding-left:38px;list-style:disc} /* ---------------------------------------------------------- contact ------- */ .lp .contact{ padding:clamp(52px,7vw,92px) 0; background:var(--soft); border-top:1px solid var(--line); } .lp .contact-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:start; gap:clamp(28px,4vw,56px); } .lp .contact-grid > *{min-width:0} .lp .contact-grid h2{margin-bottom:12px;font-size:clamp(1.6rem,1.3rem + 1.3vw,2.3rem)} .lp .contact-grid p{color:var(--ink-2);line-height:1.65} .lp .lead-form{ display:grid; gap:16px; padding:clamp(22px,3vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); } .lp .lead-form fieldset{ display:grid; gap:16px; margin:0; padding:0; border:0; min-width:0; } .lp .lead-form label{ display:block; min-width:0; color:var(--ink); font-size:.88rem; font-weight:600; line-height:1.45; } .lp .lead-form label > input, .lp .lead-form label > textarea, .lp .lead-form label > select{margin-top:7px} .lp .lead-form input, .lp .lead-form textarea, .lp .lead-form select{ width:100%; max-width:100%; min-height:48px; padding:12px 14px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink); font-family:inherit; font-size:.98rem; line-height:1.4; transition:border-color .15s ease,box-shadow .15s ease; -webkit-appearance:none; appearance:none; } .lp .lead-form textarea{min-height:132px;resize:vertical} .lp .lead-form input:focus, .lp .lead-form textarea:focus, .lp .lead-form select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(54,97,245,.18); } .lp .lead-form input::placeholder, .lp .lead-form textarea::placeholder{color:#95a2b8} .lp .lead-form label > span{ color:var(--muted); font-size:.95em; font-weight:500; } .lp .lead-form .form-note{ color:var(--muted); font-size:.86rem; line-height:1.6; } .lp .lead-form .form-note a{color:var(--accent-dark);text-decoration:underline} .lp .lead-form input[aria-invalid="true"], .lp .lead-form textarea[aria-invalid="true"], .lp .lead-form select[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(194,59,59,.14); } .lp .form-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; } .lp .form-row > .full,.lp .form-row > label.full{grid-column:1 / -1} .lp .lead-form .button{width:100%} .lp .lead-form .actions{display:flex;flex-wrap:wrap;gap:10px} .lp .lead-form .actions .button{width:auto;flex:1 1 200px} .lp .lead-form button[type="submit"]:not(.button){ width:100%; min-height:48px; padding:12px 22px; border:0; border-radius:var(--radius); background:var(--accent); color:#fff; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; box-shadow:0 8px 20px rgba(54,97,245,.22); } .lp .lead-form button[type="submit"]:not(.button):hover{background:var(--accent-dark)} .lp .lead-form button[type="submit"]:not(.button)[disabled], .lp .lead-form button[type="submit"]:not(.button):disabled{ background:#c8d2e6; color:#556382; box-shadow:none; cursor:not-allowed; } .lp .honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .lp .form-status{ display:none; padding:12px 14px; border:1px solid var(--line-strong); border-left-width:4px; border-radius:var(--radius); background:var(--soft); color:var(--ink); font-size:.92rem; font-weight:600; line-height:1.55; } .lp .form-status:not(:empty), .lp .form-status[data-state="error"], .lp .form-status[data-state="success"]{display:block} .lp .form-status[data-state="error"]{ background:var(--danger-wash); border-color:var(--danger-line); border-left-color:var(--danger); color:#8f2626; } .lp .form-status[data-state="success"]{ background:var(--ok-wash); border-color:var(--ok-line); border-left-color:var(--ok); color:#15613d; } .lp .form-status a{color:inherit;text-decoration:underline} /* ----------------------------------------------------------- footer ------- */ .lp .site-footer{ padding:clamp(36px,5vw,56px) 0; background:var(--ink); color:#c6d1e4; } .lp .site-footer .wrap{display:grid;gap:20px} .lp .site-footer .footer-row{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:18px clamp(24px,4vw,48px); } .lp .site-footer .footer-row > *{min-width:0;max-width:100%} .lp .site-footer h4,.lp .site-footer h5{ margin:0 0 8px; color:#fff; font-size:.95rem; font-weight:700; } .lp .site-footer p{max-width:60ch;font-size:.92rem;line-height:1.65} .lp .site-footer ul{ display:grid; gap:8px; padding:0; font-size:.92rem; list-style:none; } .lp .site-footer a{color:#e8eefb;text-decoration:none} .lp .site-footer a:hover{text-decoration:underline} .lp .site-footer .brand,.lp .site-footer .brand:hover{color:#e8eefb;font-weight:700} .lp .site-footer .brand span{color:#a9b7d2} .lp .site-footer button{ padding:0; background:none; border:0; color:#e8eefb; font-family:inherit; font-size:.92rem; line-height:inherit; text-decoration:underline; cursor:pointer; } .lp .site-footer button:hover{color:#fff} /* ----------------------------------------------------- cookie panel ------- */ .lp .cookie-panel{ position:fixed; right:16px; bottom:16px; left:16px; z-index:90; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; max-width:840px; margin:0 auto; padding:18px 20px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lg); } .lp .cookie-panel[hidden]{display:none} .lp .cookie-panel p{ flex:1 1 300px; min-width:0; margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.55; } .lp .cookie-panel > div{min-width:0} .lp .cookie-panel > div:not(.cookie-actions){flex:1 1 420px} .lp .cookie-panel strong{ display:block; margin-bottom:4px; color:var(--ink); font-size:.95rem; } .lp .cookie-panel a{color:var(--accent-dark);text-decoration:underline} .lp .cookie-actions{ display:flex; flex:0 0 auto; flex-wrap:wrap; gap:8px; } .lp .cookie-actions .button, .lp .cookie-actions .button.secondary{ flex:1 1 140px; min-width:0; min-height:44px; padding:10px 16px; font-size:.94rem; box-shadow:none; } .lp .cookie-actions .button:hover{box-shadow:none} /* keep the footer band behind the fixed consent bar instead of a white strip */ .lp:has(.cookie-panel:not([hidden])) .site-footer{padding-bottom:clamp(108px,16vh,180px)} /* --------------------------------------------------------- responsive ----- */ @media (max-width:1080px){ .lp .grid,.lp .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .lp .step:not(:last-child)::after{display:none} } @media (max-width:960px){ .lp .hero > .wrap.hero-grid{grid-template-columns:minmax(0,1fr)} .lp .hero-copy h1{max-width:30ch} .lp .contact-grid{grid-template-columns:minmax(0,1fr)} .lp .hero{padding-top:clamp(36px,6vw,60px)} } @media (max-width:760px){ .lp .grid,.lp .steps,.lp .proof-grid{grid-template-columns:minmax(0,1fr)} .lp .hero-copy .actions .button{flex:1 1 100%} .lp .form-row{grid-template-columns:minmax(0,1fr)} .lp .faq summary{padding:16px 16px} .lp .faq details > p,.lp .faq details > div,.lp .faq details > ul{padding:0 16px 18px} .lp .faq details > ul{padding-left:34px} .lp .trust-strip > .wrap{justify-content:flex-start} .lp .cookie-panel{right:12px;bottom:12px;left:12px;padding:16px} .lp .cookie-actions{flex:1 1 100%} .lp .site-footer .footer-row{flex-direction:column} } @media (max-width:420px){ .lp .site-header > .wrap{gap:6px 12px} .lp .nav{gap:0 2px} .lp .nav a:not(.button){padding:0 10px;font-size:.92rem} .lp .hero-copy h1{max-width:100%} .lp .button{width:100%} .lp .nav .button,.lp .cookie-actions .button{width:auto} .lp .workflow-step{padding:12px;gap:12px} .lp .workflow-step:not(:last-child)::after{left:26px} } /* ------------------------------------------------------ reduced motion ---- */ @media (prefers-reduced-motion:reduce){ .lp *,.lp *::before,.lp *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } .lp .card:hover,.lp .button:active{transform:none} } .section-image{display:block;max-width:100%;height:auto;margin:1.5rem auto;border-radius:12px}.grid:empty,.steps:empty,.proof-grid:empty{display:none} .card-image{display:block;width:100%;height:220px;object-fit:contain;margin-bottom:1rem}.store-map{height:440px;border-radius:16px;margin-top:24px;z-index:0;background:var(--surface,#f3f5f8)} .language-switch,.lead-form select{border:1px solid #ccd3df;border-radius:10px;background:white;color:#152335;padding:10px;font:inherit}.lead-form select{display:block;width:100%;margin-top:6px}.contact-map{display:block;border:0;width:100%;height:280px;margin-top:24px;border-radius:16px}.period-switch{display:flex;gap:8px;justify-content:center;margin-bottom:24px}.period-switch [aria-pressed=true]{background:var(--accent);color:white}.plan-features{padding-left:20px;line-height:1.8}.not-included{color:#64748b}