/* ─── DESIGN TOKENS (project-wide) ─── */ :root { color-scheme: light; } :scope{ --nm-brand-red:#FF034D;--nm-brand-red-hover:#E8003C;--nm-dark:#2B2F38; --nm-bg:#F4F4F4;--nm-surface:#FFFFFF;--nm-surface-alt:#F9F9F9; --nm-divider:#EFEFEF;--nm-meta:#888888;--nm-muted:#AEAFB2; --nm-fg:var(--nm-dark);--nm-fg-2:#646D82;--nm-fg-3:var(--nm-meta); --nm-link:var(--nm-brand-red);--nm-link-hover:var(--nm-brand-red-hover); --nm-success:#2BB673;--nm-danger:var(--nm-brand-red);--nm-warning:#E8A700; --nm-radius-sm:4px;--nm-radius:8px;--nm-radius-lg:12px;--nm-radius-pill:999px; --nm-shadow-sm:0 2px 6px rgba(43,47,56,0.06); --nm-shadow:0 4px 16px rgba(43,47,56,0.08); --nm-shadow-lg:0 12px 32px rgba(43,47,56,0.10); --nm-focus-ring:0 0 0 3px rgba(255,3,77,0.25); --nm-font-sans:"Mark OT","Mark W01","Space Grotesk","Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,system-ui,Arial,sans-serif; --nm-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; --red:#FF034D;--red-hover:#D90040; --dark:var(--nm-dark);--fg-2:var(--nm-fg-2);--meta:var(--nm-meta); --divider:var(--nm-divider);--surface:var(--nm-surface);--surface-alt:var(--nm-surface-alt); --bg:var(--nm-bg);--success:var(--nm-success);--warning:var(--nm-warning); --max:1200px;--pad:32px; } .ds-root,.ds-root *,.ds-root *::before,.ds-root *::after{box-sizing:border-box;margin:0} .ds-root{ font-family:var(--nm-font-sans); font-size:17px;line-height:1.55; color:var(--dark);background:#fff; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:inherit} /* ─── UTILITIES ─── */ .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)} .eyebrow{ display:inline-flex;align-items:center; font:500 12px/1.4 var(--nm-font-sans); letter-spacing:.08em;text-transform:uppercase; color:var(--red);margin-bottom:16px; } h2{ font:700 clamp(32px,3.4vw,44px)/1.09 var(--nm-font-sans); letter-spacing:-.015em;color:var(--dark); margin-bottom:16px; } h2 em{font-style:normal;color:var(--red)} .section-lead{ font:400 19px/1.55 var(--nm-font-sans); color:var(--fg-2);max-width:620px; } /* Arrow */ .arr{ display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;border-radius:50%; background:#fff;flex-shrink:0;position:relative; font-size:0;color:transparent; } .arr::before{ content:"";position:absolute;inset:0; background-color:var(--red); -webkit-mask:url("data:image/svg+xml;utf8,") center/10px 10px no-repeat; mask:url("data:image/svg+xml;utf8,") center/10px 10px no-repeat; } .arr-invert{background:var(--red)} .arr-invert::before{background-color:#fff} .arr-lg{width:48px;height:48px} .arr-lg::before{-webkit-mask-size:22px 22px;mask-size:22px 22px} /* BUTTONS */ .btn{ display:inline-flex;align-items:center;gap:10px; font:600 15px/1 var(--nm-font-sans); border-radius:var(--nm-radius); transition:background .15s,border-color .15s,color .15s,transform .15s; cursor:pointer;white-space:nowrap;border:0; } .btn:active{transform:scale(.97)} .btn-primary{background:var(--red);color:#fff;padding:14px 22px;transition:background .18s} .btn-primary:hover{background:var(--red-hover);color:#fff} .btn-dark{background:var(--dark);color:#fff;padding:14px 22px} .btn-dark:hover{background:#1f2229;color:#fff} .btn-secondary{background:#fff;color:var(--dark);border:1px solid var(--divider);padding:13px 22px} .btn-secondary:hover{color:var(--dark);background:#fff;border-color:var(--dark)} .btn-ghost-dark{color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.2);padding:13px 22px;background:transparent} .btn-ghost-dark:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)} .btn-ghost-white{color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.22);padding:13px 22px;background:transparent} .btn-ghost-white:hover{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.04)} .btn-white{background:#fff;color:var(--dark);padding:13px 22px} .btn-white:hover{background:#F4F4F4;color:var(--dark)} .btn-sm{font-size:14px;padding:11px 18px} /* BADGES */ .badge{ display:inline-block; font:500 11px/1 var(--nm-font-sans); letter-spacing:.06em;text-transform:uppercase; padding:5px 10px;border-radius:var(--nm-radius-pill); } .badge-red{background:rgba(255,3,77,.1);color:var(--red)} .badge-green{background:rgba(43,182,115,.12);color:var(--success)} .badge-amber{background:rgba(232,167,0,.12);color:var(--warning)} .badge-gray{background:var(--surface-alt);color:var(--meta);border:1px solid var(--divider)} /* SECTIONS */ section{padding:112px var(--pad)} section.alt{background:var(--surface-alt)} section.dark{background:var(--dark);padding:112px var(--pad)} section.dark h2{color:#fff} section.dark .section-lead{color:rgba(255,255,255,.6);max-width:none} /* Check list */ .check-list{display:flex;flex-direction:column;gap:12px;margin-top:28px} .check-item{ display:flex;align-items:flex-start;gap:12px; font:400 15px/1.55 var(--nm-font-sans);color:var(--dark); } .check-dot{ width:22px;height:22px;border-radius:50%;flex-shrink:0; background:rgba(43,182,115,.12); display:flex;align-items:center;justify-content:center;margin-top:1px; } .check-dot svg{width:10px;height:10px} /* Focus polish */ .btn:focus-visible,.resource-card:focus-visible,.feature-link:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:var(--nm-radius)} /* Arrow hover */ .arr{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)} a:hover > .arr, button:hover > .arr, .btn:hover .arr, .resource-card:hover .arr, .feature-link:hover .arr, .related-link:hover .arr{transform:translateX(3px)} /* Proof num */ .proof-num{font-variant-numeric:tabular-nums} /* Pulse */ @keyframes nmPulse{0%{box-shadow:0 0 0 0 rgba(255,3,77,.45)}70%{box-shadow:0 0 0 8px rgba(255,3,77,0)}100%{box-shadow:0 0 0 0 rgba(255,3,77,0)}} .nm-pulse{animation:nmPulse 2.1s ease-out infinite} /* ─── HERO ─── */ .hero{ background:var(--dark);position:relative;overflow:hidden; padding:110px var(--pad) 64px; } .hero-glow{ position:absolute;top:-200px;right:-140px; width:720px;height:720px;border-radius:50%; background:radial-gradient(circle,rgba(255,3,77,.09) 0%,transparent 64%); pointer-events:none; } .hero-inner{ max-width:var(--max);margin:0 auto; display:grid;grid-template-columns:1.05fr 1fr; gap:64px;align-items:end;position:relative;z-index:1; } .hero-eyebrow{ display:inline-flex;align-items:center; font:500 12px/1.4 var(--nm-font-sans); letter-spacing:.08em;text-transform:uppercase; color:var(--red);margin-bottom:24px; } .hero h1{ font:700 clamp(40px,4.6vw,64px)/1.05 var(--nm-font-sans); letter-spacing:-.02em;color:#fff;margin-bottom:24px; } .hero h1 em{font-style:normal;color:var(--red)} .hero-sub{ font:400 18px/1.6 var(--nm-font-sans); color:rgba(255,255,255,.62);max-width:520px;margin-bottom:36px; } .hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:40px} .hero-trust{display:flex;gap:22px;flex-wrap:wrap} .trust-badge{ display:flex;align-items:center;gap:8px; font:500 12.5px/1 var(--nm-font-sans); color:rgba(255,255,255,.5);letter-spacing:.01em; } .trust-dot{width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0} .hero-visual{align-self:end} /* Dashboard mock */ .dash{ background:#1E222A;border-radius:12px 12px 0 0; border:1px solid rgba(255,255,255,.07);border-bottom:none; box-shadow:0 -24px 80px rgba(0,0,0,.5);overflow:hidden; } .dash-bar{ background:#262A33;padding:10px 14px; display:flex;align-items:center;gap:6px; border-bottom:1px solid rgba(255,255,255,.05); } .d-dot{width:9px;height:9px;border-radius:50%} .d-url{ flex:1;margin-left:8px; background:rgba(255,255,255,.06);border-radius:4px; padding:4px 10px;font:500 11px/1.3 var(--nm-font-mono); color:rgba(255,255,255,.36); } .dash-body{padding:20px} .dash-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px} .dash-label{font:600 13px/1 var(--nm-font-sans);color:rgba(255,255,255,.85)} .d-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .d-stat{ background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06); border-radius:var(--nm-radius);padding:12px 14px; } .d-stat-lbl{font:500 10px/1 var(--nm-font-sans);color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px} .d-stat-val{font:700 22px/1 var(--nm-font-sans);letter-spacing:-.02em} .d-stat-sub{font:400 10px/1.3 var(--nm-font-sans);color:rgba(255,255,255,.28);margin-top:4px} .val-g{color:#2BB673}.val-r{color:var(--red)}.val-w{color:rgba(255,255,255,.9)} .d-chart{ background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06); border-radius:var(--nm-radius);padding:12px 14px;margin-bottom:12px; } .d-chart-lbl{font:500 10px/1 var(--nm-font-sans);color:rgba(255,255,255,.34);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px} .bars{display:flex;align-items:flex-end;gap:4px;height:48px} .bar{flex:1;border-radius:2px 2px 0 0} .bar-g{background:rgba(43,182,115,.5)} .bar-r{background:rgba(255,3,77,.6)} .d-row{ display:flex;align-items:center;gap:10px;padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); font:400 11.5px/1 var(--nm-font-sans); } .d-row:last-child{border-bottom:none} .d-dot-sm{width:7px;height:7px;border-radius:50%;flex-shrink:0} .dot-g{background:#2BB673}.dot-a{background:var(--warning)}.dot-r{background:var(--red)} .d-name{color:rgba(255,255,255,.72);flex:1} .d-vol{color:rgba(255,255,255,.32);font:500 11px/1 var(--nm-font-mono)} .d-tag{font:500 10px/1 var(--nm-font-sans);padding:3px 8px;border-radius:4px;letter-spacing:.04em} .tag-g{background:rgba(43,182,115,.15);color:#4FD199} .tag-a{background:rgba(232,167,0,.15);color:#F2BE3A} .tag-r{background:rgba(255,3,77,.15);color:#FF6B9D} /* ─── TRUST BAR ─── */ .trust-bar{ background:var(--surface-alt);border-bottom:1px solid var(--divider); padding:18px var(--pad); } .trust-bar-inner{ max-width:var(--max);margin:0 auto; display:flex;align-items:center;gap:24px;flex-wrap:wrap; } .tb-label{ font:500 11px/1.4 var(--nm-font-sans); letter-spacing:.08em;text-transform:uppercase;color:var(--meta); margin-right:4px; } .tb-cert{display:flex;align-items:center;gap:8px;} .tb-cert-icon{width:34px;height:34px;border-radius:50%;background:var(--dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .tb-cert-icon svg{width:16px;height:16px;} .tb-cert-icon.light{background:white;border:1px solid var(--divider);} .tb-cert-text{display:flex;flex-direction:column;} .tb-cert-name{font:600 11px/1.25 var(--nm-font-sans);color:var(--dark);} .tb-cert-sub{font:400 10px/1.25 var(--nm-font-sans);color:var(--meta);} .tb-divider{width:1px;height:28px;background:var(--divider);flex-shrink:0;} .omr-awards-row{display:flex;align-items:center;gap:32px;margin-top:32px;padding:28px 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);} .omr-badge-frame{width:110px;height:110px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;} .omr-badge{width:100%;height:100%;object-fit:contain;} .omr-badge-blend{mix-blend-mode:multiply;} .customer-logos-img{height:36px;opacity:.5;filter:grayscale(1);} /* ─── TOOL BLOCK ─── */ .tool-block{background:var(--bg);padding:56px var(--pad) 88px} .tool-inner{ max-width:var(--max);margin:0 auto; background:#fff;border:1px solid var(--divider); border-radius:var(--nm-radius-lg);padding:40px 44px; display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center; } .tool-label{ font:500 11px/1.4 var(--nm-font-sans); letter-spacing:.08em;text-transform:uppercase; color:var(--red);margin-bottom:12px;display:inline-block; } .tool-inner h3{ font:700 26px/1.2 var(--nm-font-sans); letter-spacing:-.02em;color:var(--dark);margin-bottom:10px; } .tool-inner p{ font:400 15px/1.6 var(--nm-font-sans); color:var(--fg-2);margin-bottom:6px; } .tool-upsell{font:400 14px/1.6 var(--nm-font-sans);color:var(--fg-2);margin-top:14px} .tool-upsell a{color:var(--red);font-weight:600} .tool-upsell a:hover{color:var(--red-hover)} .tool-inputs{display:flex;flex-direction:column;gap:12px} .tool-input{ width:100%;padding:14px 18px; border:1px solid var(--divider);border-radius:var(--nm-radius); font:400 15px/1.2 var(--nm-font-sans);color:var(--dark); background:#fff;outline:none;transition:border-color .15s,box-shadow .15s; } .tool-input:focus{border-color:var(--red);box-shadow:var(--nm-focus-ring)} .tool-input::placeholder{color:#BBBDC4} .tool-btns{display:flex;gap:10px} /* Widget placeholder */ .tool-inputs .widget-placeholder{width:100%} .widget-placeholder-label{ display:inline-flex;align-items:center;gap:8px; font:600 10.5px/1 var(--nm-font-mono); letter-spacing:.12em;text-transform:uppercase; color:var(--meta);margin-bottom:12px; } .wp-dot{width:7px;height:7px;border-radius:50%;background:var(--meta);box-shadow:0 0 0 3px rgba(155,159,168,.18);} .widget-placeholder-frame{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;min-height:160px;padding:36px 24px; background:repeating-linear-gradient(135deg,rgba(0,0,0,0.018) 0 10px,transparent 10px 20px),#fff; border:1.5px dashed rgba(155,159,168,.55);border-radius:var(--nm-radius-lg); text-align:center;color:var(--meta); } .widget-placeholder-icon{width:30px;height:30px;color:var(--meta);opacity:.7;margin-bottom:2px;} .widget-placeholder-title{font:600 15px/1.3 var(--nm-font-sans);color:var(--dark);margin:0;} .widget-placeholder-sub{font:400 13px/1.5 var(--nm-font-sans);color:var(--meta);margin:0;max-width:380px;} /* ─── BENEFITS STRIP ─── */ .benefits-strip{background:var(--dark)} .benefits-inner{ max-width:var(--max);margin:0 auto; display:grid;grid-template-columns:repeat(3,1fr); } .benefit{ padding:52px 40px; border-right:1px solid rgba(255,255,255,.08); } .benefit:last-child{border-right:none} .benefit-icon{ width:44px;height:44px;border-radius:10px; background:rgba(255,3,77,.14); display:flex;align-items:center;justify-content:center;margin-bottom:20px; } .benefit-title{font:700 18px/1.3 var(--nm-font-sans);color:#fff;letter-spacing:-.01em;margin-bottom:10px} .benefit-text{font:400 15px/1.6 var(--nm-font-sans);color:rgba(255,255,255,.56)} /* ─── STEPS ─── */ .steps-grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--divider); border:1px solid var(--divider);border-radius:var(--nm-radius-lg); overflow:hidden;margin-top:56px; } .step{background:#fff;padding:0 0 32px;position:relative;display:flex;flex-direction:column} .step-visual{ height:128px;background:#FFF0F3;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;margin-bottom:24px; border-bottom:1px solid var(--divider); } .step-visual svg{display:block;width:100%;height:100%} .step-num{font:500 12px/1 var(--nm-font-mono);color:var(--red);letter-spacing:.08em;margin:0 28px 10px;} .step-title{font:700 16px/1.3 var(--nm-font-sans);color:var(--dark);margin:0 28px 8px;letter-spacing:-.005em} .step-text{font:400 14px/1.6 var(--nm-font-sans);color:var(--fg-2);margin:0 28px} .step-arrow{ position:absolute;right:-12px;top:50%;transform:translateY(-50%); width:24px;height:24px;background:#fff; border:1px solid var(--divider);border-radius:50%;z-index:2; font-size:0;color:transparent;line-height:0; display:flex;align-items:center;justify-content:center; } .step-arrow::before{ content:"";display:block;width:12px;height:12px; background-color:var(--red); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ─── FEATURE DETAIL ─── */ .fd-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center} .fd-grid.rev{direction:rtl} .fd-grid.rev>*{direction:ltr} .fd-screen{background:var(--dark);border-radius:var(--nm-radius-lg);overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:var(--nm-shadow-lg);} .fd-screen-bar{background:#262A33;padding:10px 14px;display:flex;gap:6px;align-items:center} .fd-screen-body{padding:20px} .fd-tabs{display:flex;gap:6px;margin-bottom:14px} .fd-tab{font:500 11px/1 var(--nm-font-sans);padding:6px 12px;border-radius:4px} .fd-tab-on{background:var(--red);color:#fff} .fd-tab-off{background:rgba(255,255,255,.05);color:rgba(255,255,255,.42)} .fd-table{width:100%;border-collapse:collapse} .fd-th{font:500 10px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.36);text-align:left;padding:8px;border-bottom:1px solid rgba(255,255,255,.06)} .fd-td{font:400 11.5px/1.3 var(--nm-font-sans);color:rgba(255,255,255,.66);padding:8px;border-bottom:1px solid rgba(255,255,255,.04)} .fd-tag{display:inline-block;font:500 10px/1 var(--nm-font-sans);padding:2px 7px;border-radius:4px} .fd-tag-g{background:rgba(43,182,115,.15);color:#4FD199} .fd-tag-r{background:rgba(255,3,77,.15);color:#FF6B9D} .fd-tag-a{background:rgba(232,167,0,.15);color:#F2BE3A} .fd-content h3{font:700 32px/1.15 var(--nm-font-sans);letter-spacing:-.015em;margin-bottom:18px;color:var(--dark)} .fd-content p{font:400 17px/1.65 var(--nm-font-sans);color:var(--fg-2);margin-bottom:24px} .policy-screen{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .policy-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.04);border-radius:6px;padding:12px 14px} .policy-label{font:500 12px/1 var(--nm-font-mono);color:rgba(255,255,255,.68)} .policy-next{background:rgba(255,3,77,.08);border:1px solid rgba(255,3,77,.2);border-radius:6px;padding:12px 14px} .policy-next-title{font:500 11px/1 var(--nm-font-sans);color:rgba(255,255,255,.7);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em} .policy-next-text{font:400 12px/1.55 var(--nm-font-sans);color:rgba(255,255,255,.48)} /* ─── FEATURES GRID ─── */ .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px} .feat{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:28px;transition:box-shadow .2s,transform .2s;} .feat:hover{box-shadow:var(--nm-shadow-sm);transform:translateY(-2px)} .feat-icon{width:40px;height:40px;background:#FFF0F3;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .feat-title{font:700 16.5px/1.3 var(--nm-font-sans);color:var(--dark);margin-bottom:8px;letter-spacing:-.005em} .feat-text{font:400 14.5px/1.6 var(--nm-font-sans);color:var(--fg-2)} /* ─── COMPARISON ─── */ .compare-table-wrap{overflow-x:auto;margin-top:56px;border-radius:var(--nm-radius-lg);border:1px solid var(--divider)} .compare-table{width:100%;border-collapse:collapse;font:400 14.5px/1.5 var(--nm-font-sans)} .compare-table thead tr th{padding:16px 20px;font:600 11.5px/1.3 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.07em;text-align:center;} .col-ours{background:var(--dark);color:#fff} .col-tool{background:#EEEFF1;color:#8A8E97} .col-ent{background:#EEEFF1;color:#8A8E97} .col-lbl{background:var(--surface-alt);color:var(--fg-2);text-align:left!important} .compare-table tbody tr td{padding:14px 20px;border-top:1px solid var(--divider);vertical-align:top} .compare-table tbody tr td:nth-child(2){background:#fff;text-align:center} .compare-table tbody tr td:nth-child(3),.compare-table tbody tr td:nth-child(4){text-align:center;background:#F3F4F5} .compare-table tbody tr:nth-child(even) td:nth-child(1){background:#F3F4F5} .compare-table tbody tr:nth-child(even) td:nth-child(2){background:#F8F8F8} .compare-table tbody tr:nth-child(even) td:nth-child(3),.compare-table tbody tr:nth-child(even) td:nth-child(4){background:#EAEBEC} .col-label-title{font:700 14.5px/1.3 var(--nm-font-sans);color:var(--dark);margin-bottom:3px} .col-label-sub{font:400 13px/1.5 var(--nm-font-sans);color:var(--meta)} .ic-ok{display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(43,182,115,.15);align-items:center;justify-content:center} .ic-warn{display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(232,167,0,.15);align-items:center;justify-content:center} .ic-no{display:inline-flex;width:24px;height:24px;border-radius:50%;background:rgba(255,3,77,.12);align-items:center;justify-content:center} .compare-note{font:400 12.5px/1.5 var(--nm-font-sans);color:var(--meta);margin-top:14px} /* ─── SOCIAL PROOF ─── */ .proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider);border:1px solid var(--divider);border-radius:var(--nm-radius-lg);overflow:hidden;margin-top:56px;margin-bottom:48px;} .proof-stat{background:#fff;padding:32px 24px;text-align:center} .proof-num{font:700 44px/1 var(--nm-font-sans);letter-spacing:-.03em;color:var(--dark);margin-bottom:8px} .proof-num span{color:var(--red)} .proof-lbl{font:400 13.5px/1.45 var(--nm-font-sans);color:var(--fg-2)} .logos-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .logos-lbl{font:500 13px/1 var(--nm-font-sans);color:var(--meta);flex-shrink:0} .logo-chip{font:700 14px/1 var(--nm-font-sans);color:#9B9FA8;letter-spacing:-.015em;padding:8px 14px;border:1px solid var(--divider);border-radius:var(--nm-radius-sm);transition:border-color .15s,color .15s;} .logo-chip:hover{border-color:#B8BBC4;color:var(--dark)} .awards-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px;align-items:center;} .award-chip{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--nm-font-sans);color:var(--fg-2);background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-pill);padding:8px 14px;} .award-dot{width:16px;height:16px;border-radius:4px;background:var(--red);flex-shrink:0} /* TESTIMONIALS */ .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px} .testi{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:28px} .testi-quote{font:700 36px/1 var(--nm-font-sans);color:var(--red);margin-bottom:14px} .testi-text{font:400 15.5px/1.65 var(--nm-font-sans);color:var(--dark);margin-bottom:20px} .testi-person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--divider)} .testi-avatar{width:38px;height:38px;border-radius:50%;background:#FFF0F3;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--nm-font-sans);color:var(--red);flex-shrink:0;} .testi-name{font:700 13.5px/1.2 var(--nm-font-sans);color:var(--dark);margin-bottom:2px} .testi-role{font:400 12.5px/1.3 var(--nm-font-sans);color:var(--meta)} /* ─── RESOURCES ─── */ .resources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} .resource-card{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);overflow:hidden;transition:box-shadow .2s,transform .2s} .resource-card:hover{box-shadow:var(--nm-shadow-sm);transform:translateY(-2px)} .resource-thumb{height:176px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative} .resource-thumb svg{display:block;width:100%;height:100%} .resource-body{padding:24px} .resource-tag{font:500 10.5px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:10px} .resource-title{font:700 17px/1.35 var(--nm-font-sans);color:var(--dark);margin-bottom:10px;letter-spacing:-.005em} .resource-text{font:400 14px/1.58 var(--nm-font-sans);color:var(--fg-2)} /* ─── TASKFORCE ─── */ .taskforce-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .tf-guarantee{background:#fff;border:1px solid var(--red);border-radius:var(--nm-radius-lg);padding:24px 28px;margin-bottom:28px;border-left:3px solid var(--red);} .tf-guarantee-label{font:600 11px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:10px} .tf-guarantee-text{font:400 16px/1.6 var(--nm-font-sans);color:var(--dark)} .tf-guarantee-text strong{font-weight:700} .tf-panel{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:32px 36px;box-shadow:var(--nm-shadow-sm)} .tf-panel-title{font:700 16px/1.3 var(--nm-font-sans);color:var(--dark);margin-bottom:6px} .tf-panel-sub{font:400 13.5px/1.5 var(--nm-font-sans);color:var(--meta);margin-bottom:24px} .tf-input,.tf-select{width:100%;padding:13px 16px;margin-bottom:12px;border:1px solid var(--divider);border-radius:var(--nm-radius-sm);font:400 14px/1.2 var(--nm-font-sans);color:var(--dark);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;} .tf-input:focus,.tf-select:focus{border-color:var(--red);box-shadow:var(--nm-focus-ring)} .tf-input::placeholder{color:#BBBDC4} .tf-select{margin-bottom:18px;cursor:pointer;appearance:none;color:var(--fg-2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;} .tf-submit{width:100%;padding:14px;font:600 15px/1 var(--nm-font-sans);background:var(--red);color:#fff;border:0;border-radius:var(--nm-radius-sm);cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;justify-content:center;gap:10px;} .tf-submit:hover{background:var(--red-hover)} .tf-disclaimer{font:400 12px/1.55 var(--nm-font-sans);color:var(--meta);text-align:center;margin-top:12px} .tf-panel-person{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--divider)} .tf-panel-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.10)} .tf-panel-person-name{font:600 14px/1.3 var(--nm-font-sans);color:var(--dark)} .tf-panel-person-role{font:400 12px/1.4 var(--nm-font-sans);color:var(--meta);margin-top:3px} /* ─── MONITORING CTA (dark) ─── */ .mon-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .mon-checks{margin-top:28px;display:flex;flex-direction:column;gap:12px} .mon-check{display:flex;align-items:flex-start;gap:12px;font:400 15px/1.5 var(--nm-font-sans);color:rgba(255,255,255,.68)} .mon-dot{width:18px;height:18px;border-radius:50%;background:rgb(85,182,34);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} .mon-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--nm-radius-lg);padding:32px} .mon-panel-title{font:600 13px/1 var(--nm-font-sans);color:rgba(255,255,255,.85);margin-bottom:6px} .mon-panel-sub{font:400 13px/1.4 var(--nm-font-sans);color:rgba(255,255,255,.42);margin-bottom:24px} .mon-price{font:700 38px/1 var(--nm-font-sans);color:#fff;letter-spacing:-.03em;margin-bottom:6px} .mon-price sub{font:400 15px/1 var(--nm-font-sans);color:rgba(255,255,255,.42);vertical-align:baseline} .mon-note{font:400 12px/1.4 var(--nm-font-sans);color:rgba(255,255,255,.36);margin-bottom:24px} .mon-ctas{display:flex;gap:10px;flex-wrap:wrap} .mon-contact{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)} .mon-contact-label{font:500 11px/1 var(--nm-font-sans);color:rgba(255,255,255,.36);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px} .mon-contact a{color:rgba(255,255,255,.62);font:400 14px/1.7 var(--nm-font-sans);display:block;transition:color .15s} .mon-contact a:hover{color:#fff} /* ─── CONTACT ─── */ .contact-tiers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:48px;justify-items:center} .contact-tiers:has(> :only-child){grid-template-columns:minmax(0,480px);justify-content:center} .contact-tier{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:32px 28px;transition:box-shadow .2s,transform .2s} .contact-tier:hover{box-shadow:var(--nm-shadow-sm);transform:translateY(-2px)} .contact-tier.featured{border:2px solid var(--red);position:relative;padding:32px 28px} .ct-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font:600 10.5px/1 var(--nm-font-sans);letter-spacing:.07em;text-transform:uppercase;padding:5px 14px;border-radius:var(--nm-radius-pill);white-space:nowrap;} .ct-icon{width:44px;height:44px;background:var(--surface-alt);border:1px solid var(--divider);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;} .contact-tier.featured .ct-icon{background:#FFF0F3;border-color:#FFD0DB} .ct-label{font:500 10.5px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--meta);margin-bottom:10px} .contact-tier.featured .ct-label{color:var(--red)} .ct-title{font:700 18px/1.3 var(--nm-font-sans);color:var(--dark);margin-bottom:10px;letter-spacing:-.005em} .ct-text{font:400 14.5px/1.6 var(--nm-font-sans);color:var(--fg-2);margin-bottom:20px} .ct-domain-row{display:flex;gap:8px} .ct-domain-input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--divider);border-radius:var(--nm-radius-sm);font:400 14px/1.2 var(--nm-font-sans);outline:none;transition:border-color .15s} .ct-domain-input:focus{border-color:var(--red)} .ct-domain-input::placeholder{color:#BBBDC4} .ct-domain-btn{padding:11px 18px;font:600 14px/1 var(--nm-font-sans);background:var(--dark);color:#fff;border:0;border-radius:var(--nm-radius-sm);cursor:pointer;transition:background .15s} .ct-domain-btn:hover{background:#1f2229} .ct-response{font:400 12px/1.4 var(--nm-font-sans);color:var(--meta);margin-top:10px} .ct-link{display:flex;align-items:center;justify-content:center;gap:10px;padding:13px;font:600 15px/1 var(--nm-font-sans);border-radius:var(--nm-radius-sm);transition:background .15s} .ct-link-red{background:var(--red);color:#fff} .ct-link-red:hover{background:var(--red-hover);color:#fff} .ct-link-dark{background:var(--dark);color:#fff} .ct-link-dark:hover{background:#1f2229} .ct-hint{font:400 12px/1.4 var(--nm-font-sans);color:var(--meta);text-align:center;margin-top:10px} .contact-person{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-top:36px;border-top:1px solid var(--divider)} .cp-left{display:flex;align-items:center;gap:16px} .cp-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--surface-alt);border:1px solid var(--divider);flex-shrink:0} .cp-avatar img{width:100%;height:100%;object-fit:cover} .cp-name{font:700 15.5px/1.2 var(--nm-font-sans);color:var(--dark);margin-bottom:3px} .cp-info{font:400 13.5px/1.4 var(--nm-font-sans);color:var(--fg-2)} .cp-info a{color:var(--red)} .cp-info a:hover{color:var(--red-hover)} .cp-tagline{font:500 17px/1.5 var(--nm-font-sans);color:var(--dark);max-width:380px} .cp-tagline em{font-style:normal;color:var(--red)} /* ─── MICRO-INTERACTIONS ─── */ .reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} .reveal-stagger.visible>*{opacity:1;transform:translateY(0)} .reveal-stagger.visible>*:nth-child(1){transition-delay:.00s} .reveal-stagger.visible>*:nth-child(2){transition-delay:.06s} .reveal-stagger.visible>*:nth-child(3){transition-delay:.12s} .reveal-stagger.visible>*:nth-child(4){transition-delay:.18s} .reveal-stagger.visible>*:nth-child(5){transition-delay:.24s} .reveal-sec{opacity:0;transition:opacity .12s} .reveal-sec.visible{opacity:1} .reveal-sec>*{opacity:0;transform:translateY(10px);transition:opacity .44s cubic-bezier(.2,.8,.2,1),transform .44s cubic-bezier(.2,.8,.2,1)} .reveal-sec.visible>*:nth-child(1){opacity:1;transform:none;transition-delay:.14s} .reveal-sec.visible>*:nth-child(2){opacity:1;transform:none;transition-delay:.24s} .reveal-sec.visible>*:nth-child(3){opacity:1;transform:none;transition-delay:.34s} .reveal-sec.visible>*:nth-child(4){opacity:1;transform:none;transition-delay:.44s} .reveal-sec.visible>*:nth-child(5){opacity:1;transform:none;transition-delay:.54s} .reveal-sec.visible>*:nth-child(6){opacity:1;transform:none;transition-delay:.64s} .fd-slide-l{opacity:0;transform:translateX(-28px);transition:opacity .6s cubic-bezier(.16,1,.3,1) .28s,transform .6s cubic-bezier(.16,1,.3,1) .28s} .fd-slide-r{opacity:0;transform:translateX(28px);transition:opacity .6s cubic-bezier(.16,1,.3,1) .40s,transform .6s cubic-bezier(.16,1,.3,1) .40s} .visible .fd-slide-l,.visible .fd-slide-r{opacity:1;transform:translateX(0)} @keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(255,3,77,.55)}70%{box-shadow:0 0 0 12px rgba(255,3,77,0)}100%{box-shadow:0 0 0 0 rgba(255,3,77,0)}} .hero-ctas .btn-primary{animation:ctaPulse 3.2s ease-out infinite 1.4s} @keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .logos-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);mask:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%)} .logos-track{display:flex;width:max-content;animation:logoScroll 30s linear infinite} .logos-track .customer-logos-img{height:36px;opacity:.45;filter:grayscale(1);margin-right:60px;flex-shrink:0} .resource-card{transition:box-shadow .25s,transform .25s,border-color .25s} .resource-card:hover{border-color:rgba(255,3,77,.35)} .step{transition:background .25s,box-shadow .25s} .step:hover{background:#FFFCFD} .step:hover .step-arrow{background:var(--red);border-color:var(--red);transform:translateY(-50%) translateX(2px)} .step:hover .step-arrow::before{background-color:#fff} .step-arrow{transition:background .2s,border-color .2s,transform .25s} .logo-chip{transition:border-color .2s,color .2s,transform .2s} .logo-chip:hover{color:var(--dark);border-color:var(--dark);transform:translateY(-1px)} #main-nav{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease} #main-nav.nav-scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);box-shadow:0 1px 0 rgba(0,0,0,0.04),0 6px 24px -12px rgba(0,0,0,0.08)} /* ─── ANIMATIONS ─── */ @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeRight{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:translateX(0)}} .hero-content>*{animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both} .hero-eyebrow{animation-delay:.06s} .hero h1{animation-delay:.18s} .hero-sub{animation-delay:.32s} .hero-ctas{animation-delay:.48s} .hero-trust{animation-delay:.62s} .hero-visual{animation:fadeRight .75s cubic-bezier(.16,1,.3,1) .15s both} .reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease} .reveal.visible{opacity:1;transform:translateY(0)} @keyframes fd1WarnRow{0%,100%{background:transparent}50%{background:rgba(232,163,61,.18)}} @keyframes fd2NextStep{0%,100%{border-left-color:#e6004c;box-shadow:none}55%{border-left-color:#FF034D;box-shadow:0 0 0 5px rgba(255,3,77,.18),0 4px 16px rgba(255,3,77,.12)}} @keyframes fd2ActivePulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 4px rgba(43,182,115,.35)}} @keyframes stepFocus{ 0%,25%,100%{box-shadow:0 2px 12px rgba(0,0,0,.07);background:#fff} 4%,21%{box-shadow:0 0 0 2px rgba(255,3,77,.32),0 12px 40px rgba(255,3,77,.14);background:#FFFCFD} } @keyframes stepNumFocus{0%,25%,100%{color:var(--meta)}4%,21%{color:var(--red)}} @keyframes stepVisualPop{0%,25%,100%{transform:scale(1)}4%,21%{transform:scale(1.03)}} .steps-grid .step:nth-child(1){animation:stepFocus 8s ease-in-out infinite 0s} .steps-grid .step:nth-child(2){animation:stepFocus 8s ease-in-out infinite 2s} .steps-grid .step:nth-child(3){animation:stepFocus 8s ease-in-out infinite 4s} .steps-grid .step:nth-child(4){animation:stepFocus 8s ease-in-out infinite 6s} .steps-grid .step:nth-child(1) .step-num{animation:stepNumFocus 8s ease-in-out infinite 0s} .steps-grid .step:nth-child(2) .step-num{animation:stepNumFocus 8s ease-in-out infinite 2s} .steps-grid .step:nth-child(3) .step-num{animation:stepNumFocus 8s ease-in-out infinite 4s} .steps-grid .step:nth-child(4) .step-num{animation:stepNumFocus 8s ease-in-out infinite 6s} .steps-grid .step:nth-child(1) .step-visual{animation:stepVisualPop 8s ease-in-out infinite 0s} .steps-grid .step:nth-child(2) .step-visual{animation:stepVisualPop 8s ease-in-out infinite 2s} .steps-grid .step:nth-child(3) .step-visual{animation:stepVisualPop 8s ease-in-out infinite 4s} .steps-grid .step:nth-child(4) .step-visual{animation:stepVisualPop 8s ease-in-out infinite 6s} @media (prefers-reduced-motion: reduce){ .reveal,.reveal-stagger>*,.reveal-sec,.reveal-sec>*,.fd-slide-l,.fd-slide-r,.arr,.btn-primary::after,.resource-card,.step-arrow,.logo-chip,#main-nav{transition:none!important;animation:none!important;transform:none!important;opacity:1!important} .hero-content>*,.hero-visual{animation:none!important} .steps-grid .step,.steps-grid .step .step-num,.steps-grid .step .step-visual{animation:none!important} .hero-ctas .btn-primary{animation:none!important} .logos-track{animation:none!important} } /* ─── DMARC FLOW VIZ ─── */ .dv-card{background:#1E222A;border-radius:12px;border:1px solid rgba(255,255,255,.08);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45)} .dv-bar{background:#262A33;padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.05)} .dv-bar-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .dv-bar-title{font:500 11px/1 var(--nm-font-mono);color:rgba(255,255,255,.32);letter-spacing:.06em;text-transform:uppercase;margin-left:4px} .dv-body{padding:18px 18px 10px} .dv-svg{width:100%;height:auto;display:block} .dv-insight{display:flex;align-items:flex-start;gap:9px;background:rgba(255,3,77,.06);border-top:1px solid rgba(255,3,77,.14);padding:10px 14px} .dv-insight-icon{flex-shrink:0;margin-top:1px} .dv-insight p{font:400 11.5px/1.5 var(--nm-font-sans);color:rgba(255,255,255,.45);margin:0} .dv-insight strong{color:rgba(255,255,255,.88);font-weight:600} .dv-sender,.dv-arrow-1,.dv-arrow-2,.dv-arrow-3,.dv-inbox,.dv-brace,.dv-brace-label{opacity:0} .dv-path-1,.dv-path-2,.dv-path-3{opacity:0} .ps-showcase{background:#1E222A;border-radius:12px 12px 0 0;border:1px solid rgba(255,255,255,.07);border-bottom:none;box-shadow:0 -24px 80px rgba(0,0,0,.5);overflow:hidden} .ps-bar{background:#262A33;padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid rgba(255,255,255,.05)} .ps-main{overflow:hidden;position:relative;max-height:295px} .ps-main::after{content:"";position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(transparent,#1E222A);pointer-events:none} .ps-main>div{max-width:100%!important;width:100%!important;border-radius:0!important;border-left:none!important;border-right:none!important;border-top:none!important;margin:0!important} .ps-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px 0;background:#1E222A} .ps-card{border-radius:6px;overflow:hidden;position:relative;height:175px;box-shadow:0 4px 16px rgba(0,0,0,.3)} .ps-card-inner{position:absolute;top:0;left:0;transform-origin:top left;transform:scale(.47);width:213%} .fd-screen-light{border-radius:var(--nm-radius-lg);overflow:hidden;border:1px solid var(--divider);box-shadow:var(--nm-shadow-lg)} .fd-screen-light>div{width:100%!important;max-width:100%!important;margin:0!important;border-radius:0!important;border:none!important} /* ─── PRICING CALCULATOR ─── */ .pricing-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start} .pricing-info-title{font:700 28px/1.2 var(--nm-font-sans);letter-spacing:-.02em;color:var(--dark);margin-bottom:12px} .pricing-info-sub{font:400 16px/1.6 var(--nm-font-sans);color:var(--fg-2);max-width:420px;margin-bottom:0} .pricing-calc-inner{background:#fff;border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:36px;box-shadow:var(--nm-shadow-sm)} .pc-heading{font:600 11px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.09em;color:var(--red);margin-bottom:28px;display:block} .pc-slider-group{margin-bottom:26px} .pc-slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .pc-slider-label span{font:500 14px/1 var(--nm-font-sans);color:var(--dark)} .pc-val{font:700 16px/1 var(--nm-font-sans);color:var(--dark);min-width:88px;text-align:right} .pc-val.is-request{font-size:13px;color:var(--red)} .pc-range{width:100%;height:4px;border-radius:2px;-webkit-appearance:none;appearance:none;outline:none;cursor:pointer;background:linear-gradient(to right,var(--red) var(--pct,2%),#E4E6EA var(--pct,2%));transition:background .08s} .pc-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 1px 6px rgba(0,0,0,.18);cursor:grab;transition:transform .15s,box-shadow .15s} .pc-range::-webkit-slider-thumb:active{transform:scale(1.2);cursor:grabbing;box-shadow:0 2px 10px rgba(255,3,77,.3)} .pc-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--red);box-shadow:0 1px 6px rgba(0,0,0,.18);cursor:grab} .pc-range::-moz-range-track{height:4px;border-radius:2px;background:#E4E6EA} .pc-result{background:var(--surface-alt);border:1px solid var(--divider);border-radius:var(--nm-radius);padding:20px 24px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} .pc-result-left{display:flex;flex-direction:column;gap:5px} .pc-result-label{font:500 11px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--meta)} .pc-result-note{font:400 12px/1.4 var(--nm-font-sans);color:var(--meta)} .pc-result-price{font:700 28px/1 var(--nm-font-sans);color:var(--dark);letter-spacing:-.03em;white-space:nowrap} .pc-result-price.is-request{font-size:18px;color:var(--red)} /* ─── Legal / Generic Pages ─── */ .page-hero{padding:64px var(--pad) 48px;border-bottom:1px solid var(--divider)} .page-hero-inner{max-width:var(--content-max,720px);margin:0 auto} .page-label{font:600 11px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.09em;color:var(--meta);margin-bottom:16px} .page-hero h1{font:700 clamp(28px,3.5vw,40px)/1.1 var(--nm-font-sans);letter-spacing:-.02em;color:var(--dark)} .page-body{padding:56px var(--pad) 96px} .page-body-inner{max-width:var(--content-max,720px);margin:0 auto} .legal-section{margin-bottom:48px} .legal-section:last-child{margin-bottom:0} .legal-section h2{font:700 20px/1.3 var(--nm-font-sans);color:var(--dark);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--divider)} .legal-section h3{font:600 15px/1.4 var(--nm-font-sans);color:var(--dark);margin:20px 0 8px} .legal-section h4{font:600 13.5px/1.4 var(--nm-font-sans);color:var(--dark);margin:18px 0 6px} .legal-section h4:first-child{margin-top:0} .legal-section p{font:400 15px/1.7 var(--nm-font-sans);color:#3D4453;margin-bottom:12px} .legal-section p:last-child{margin-bottom:0} .legal-section ul{font:400 15px/1.7 var(--nm-font-sans);color:#3D4453;margin:0 0 12px;padding-left:22px} .legal-section ul li{margin-bottom:6px} .legal-section a{color:var(--red);text-decoration:underline;text-decoration-color:rgba(255,3,77,.3)} .legal-section a:hover{text-decoration-color:var(--red)} .legal-block{background:var(--surface-alt);border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:24px 28px;margin-bottom:24px} .legal-block dt{font:600 11px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.07em;color:var(--meta);margin-bottom:5px;margin-top:16px} .legal-block dt:first-child{margin-top:0} .page-hero-meta{font:400 14px/1.5 var(--nm-font-sans);color:var(--meta);margin-top:12px} .toc{background:var(--surface-alt);border:1px solid var(--divider);border-radius:var(--nm-radius-lg);padding:24px 28px;margin-bottom:56px} .toc-title{font:600 12px/1 var(--nm-font-sans);text-transform:uppercase;letter-spacing:.08em;color:var(--meta);margin-bottom:14px} .toc ol{padding-left:20px;display:flex;flex-direction:column;gap:6px} .toc li{font:400 14px/1.4 var(--nm-font-sans);color:var(--fg-2)} .toc a{color:var(--red);text-decoration:none} .toc a:hover{text-decoration:underline} .legal-info{background:var(--surface-alt);border-left:3px solid var(--divider);padding:16px 20px;border-radius:0 var(--nm-radius) var(--nm-radius) 0;margin:20px 0} .legal-info p{color:var(--meta);font-size:14px} .legal-block dd{font:400 15px/1.6 var(--nm-font-sans);color:var(--dark)} .legal-block dd a{color:var(--red)} .legal-note{font:400 13px/1.6 var(--nm-font-sans);color:var(--meta);margin-top:8px} /* ─── RESPONSIVE ─── */ @media (max-width:960px){ section{padding:84px var(--pad)} section.dark{padding:84px var(--pad)} .hero{padding:96px var(--pad) 56px!important} .hero-content{width:auto!important} .hero-inner,.fd-grid,.mon-grid,.taskforce-grid,.tool-inner,.pricing-layout{grid-template-columns:1fr;gap:48px} .fd-grid.rev{direction:ltr} .benefits-inner,.steps-grid,.features-grid,.related-grid,.proof-stats,.testimonials,.resources-grid,.footer-top{grid-template-columns:1fr 1fr} .contact-tiers{grid-template-columns:1fr} .benefit{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)} .steps-grid .step-arrow{display:none} } @media (max-width:600px){ :scope{--pad:20px} section{padding:56px var(--pad)} section.dark{padding:56px var(--pad)} .hero{padding:80px var(--pad) 44px!important} .hero h1{font-size:clamp(30px,8.5vw,40px)} h2{font-size:clamp(25px,7vw,32px)} .benefits-inner,.steps-grid,.features-grid,.related-grid,.proof-stats,.testimonials,.resources-grid,.footer-top,.d-stats{grid-template-columns:1fr} .tool-inner{padding:26px 20px} .feat,.testi{padding:22px} .trust-bar{padding:16px var(--pad)} .trust-bar-inner{gap:14px 18px} .omr-awards-row{gap:16px;justify-content:center;padding:22px 0} .omr-badge-frame{width:84px;height:84px} .customer-logos-img{width:auto;object-fit:contain} .omr-badge{object-fit:contain} .testi-text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden} .compare-table{min-width:580px} .compare-table thead tr th,.compare-table tbody tr td{padding:12px 12px} .compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;z-index:1} .compare-note::after{content:" ← zum Vergleichen seitlich wischen";color:var(--meta)} .proof-num{font-size:36px} }