/* ============================================================ Nexwio design system ("hv2") — carried over from the Brimeo template's component structure (grids, cards, buttons, timelines), retokenized to Nexwio's own flat palette. No gradients, no atmospheric glows: every token below is a single flat color so the whole site re-themes from this one block. Layout rhythm (split hero, centered stat numbers, hairline-divider call list instead of boxed cards, generous section padding) is unchanged from the original template. ============================================================ */ .hv2 { --hv-teal:#5B4FE9; --hv-teal-hover:#4638C2; --hv-teal-light:rgba(91,79,233,.1); --hv-blue:#5B4FE9; --hv-blue-dark:#4638C2; --hv-gradient:#5B4FE9; --hv-gradient-soft:rgba(91,79,233,.08); --hv-text:#16132B; --hv-text-muted:#6B6779; --hv-text-subtle:#9D99AC; --hv-bg:#ffffff; --hv-bg-soft:#F6F5FC; --hv-bg-alt:#EFEDFA; --hv-border:rgba(22,19,43,.08); --hv-border-strong:rgba(22,19,43,.14); --hv-warning:#f59e0b; --hv-warning-light:rgba(245,158,11,.1); --hv-error:#ef4444; --hv-error-light:rgba(239,68,68,.06); --hv-r-sm:8px; --hv-r:16px; --hv-r-lg:24px; --hv-r-pill:999px; --hv-shadow:0 10px 15px -3px rgba(0,0,0,.05),0 4px 6px -4px rgba(0,0,0,.05),inset 0 0 0 1px rgba(255,255,255,.5); --hv-shadow-premium:0 1px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(15,23,42,.06), 0 30px 80px -30px rgba(11,30,63,.18),0 80px 120px -60px rgba(91,79,233,.10); --hv-glow-teal:0 8px 24px -8px rgba(91,79,233,.45); --hv-atmo-light:#F7F6FD; --hv-atmo-dark:#16132B; /* flat, solid — reserved for the one section that should visually pop: the live-demo CTA. */ --hv-cta-gradient:#5B4FE9; /* flat solid for closing/footer bands — deliberately not the accent above, so the CTA stays the one that pops. */ --hv-navy:#120F24; font-family:'Plus Jakarta Sans',var(--sans); color:var(--hv-text); background:var(--hv-bg); } /* :where() so these low-level defaults carry zero specificity of their own — any single component class (like .hv2-widget-eyebrow) should always be able to override them. Without :where(), ".hv2 p" (a class + element) actually outranks a bare single-class rule, which silently ate several text-color fixes earlier before this was caught. */ :where(.hv2) h1,:where(.hv2) h2,:where(.hv2) h3{font-family:'Plus Jakarta Sans',var(--sans);color:var(--hv-text);font-weight:800;letter-spacing:-.02em;} :where(.hv2) p{color:var(--hv-text-muted);} .hv2-wrap{max-width:1200px;margin:0 auto;padding:0 24px;} .hv2-sec{padding:100px 0;} .hv2-sec.hv2-tight{padding:64px 0;} .hv2-sec.hv2-soft{background:var(--hv-bg-soft);} .hv2-eyebrow{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--hv-teal);margin-bottom:16px;} /* padding-right leaves room for italic glyphs' right-leaning overhang — without it, background-clip:text crops the trailing letter (the "r" in an italicised word, for example) because the gradient paints only the upright glyph box, not the slanted ink that spills past it. */ .hv2-grad-text{display:inline-block;background:var(--hv-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.15em;margin-right:-.15em;} .hv2-center{text-align:center;} .hv2-head{max-width:680px;margin:0 auto 56px;} .hv2-head.hv2-left{margin:0 0 56px;} :where(.hv2-head) h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;} .hv2-lede{font-size:17.5px;line-height:1.6;color:var(--hv-text-muted);margin-top:16px;} /* buttons */ .hv2-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 30px; border-radius:var(--hv-r-pill);font-weight:700;font-size:15.5px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease;} .hv2-btn-fill{background:var(--hv-gradient);color:#fff;box-shadow:var(--hv-glow-teal);} .hv2-btn-fill:hover{transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(91,79,233,.65);background:var(--hv-teal-hover);} .hv2-btn-ghost{background:#fff;color:var(--hv-teal);box-shadow:var(--hv-shadow);} .hv2-btn-ghost:hover{transform:translateY(-2px);} .hv2-btn-outline-light{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28);} .hv2-btn-outline-light:hover{background:rgba(255,255,255,.16);} .hv2-textlink{font-size:15px;font-weight:600;color:var(--hv-text);text-decoration:none;display:inline-flex;align-items:center;gap:6px;} .hv2-textlink:hover{color:var(--hv-teal);} .hv2-todo{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:8px; border:1.5px dashed #d99a2b;background:var(--hv-warning-light);color:#8a5f10;font-family:var(--mono);font-size:.84em;font-weight:600;} /* ===== hero (split, atmospheric) ===== */ .hv2-hero{position:relative;padding:64px 0 100px;background:var(--hv-atmo-light);overflow:hidden;} .hv2-hero-grid{display:grid;grid-template-columns:1fr .92fr;gap:60px;align-items:center;} @media (max-width:960px){.hv2-hero-grid{grid-template-columns:1fr;}} .hv2-crumb{font-size:13.5px;color:var(--hv-text-subtle);margin-bottom:18px;} :where(.hv2-crumb) a{color:var(--hv-text-subtle);text-decoration:none;} :where(.hv2-hero) h1{font-size:clamp(36px,4.6vw,58px);line-height:1.08;letter-spacing:-.03em;} /* plain bullet list, below the CTAs on purpose — supporting detail, not competing with the buttons for attention */ .hv2-badgerow{display:grid;grid-template-columns:1fr 1fr;gap:9px 22px;margin-top:28px;} @media (max-width:420px){.hv2-badgerow{grid-template-columns:1fr;}} .hv2-badge{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--hv-text-muted);} .hv2-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hv-teal);flex:none;} .hv2-pair{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;align-items:center;} /* secondary CTA — a real button now, not a bare text link */ .hv2-btn-soft{background:#fff;color:var(--hv-text);box-shadow:var(--hv-shadow);border:1px solid var(--hv-border-strong);} .hv2-btn-soft:hover{transform:translateY(-2px);border-color:var(--hv-teal);color:var(--hv-teal);box-shadow:var(--hv-shadow-premium);} /* ===== hero call-preview card — a short chat transcript between the caller and the agent, then what the agent actually did. Static mock, not interactive. ===== */ .hv2-card{position:relative;background:#fff;border-radius:var(--hv-r-lg);box-shadow:var(--hv-shadow-premium); padding:26px 26px 28px;} .hv2-callmock-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--hv-border);} .hv2-callmock-avatar{width:40px;height:40px;border-radius:50%;background:var(--hv-gradient);flex:none; display:flex;align-items:center;justify-content:center;color:#fff;} :where(.hv2-callmock-avatar) svg{width:18px;height:18px;} :where(.hv2-callmock-top) b{display:block;font-size:14.5px;font-weight:700;color:var(--hv-text);} :where(.hv2-callmock-top) span{display:block;font-size:12px;color:var(--hv-text-subtle);margin-top:1px;} .hv2-callmock-top .hv2-callmock-live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700; color:#0ea968;letter-spacing:.04em;text-transform:uppercase;} :where(.hv2-callmock-live) i{width:7px;height:7px;border-radius:50%;background:#22c580;box-shadow:0 0 0 0 rgba(34,197,128,.5); animation:hv2livepulse 1.6s infinite;} @keyframes hv2livepulse{0%{box-shadow:0 0 0 0 rgba(34,197,128,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,128,0)}100%{box-shadow:0 0 0 0 rgba(34,197,128,0)}} .hv2-chat{margin-top:18px;display:flex;flex-direction:column;gap:10px;} .hv2-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;} .hv2-msg.caller{align-self:flex-start;background:var(--hv-bg-alt);color:var(--hv-text);border-bottom-left-radius:4px;} .hv2-msg.agent{align-self:flex-end;background:var(--hv-teal-light);color:#0f6e64;border-bottom-right-radius:4px;} .hv2-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--hv-border);} .hv2-actions-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-text-subtle); margin-bottom:10px;} .hv2-action{display:flex;align-items:flex-start;gap:9px;padding:6px 0;font-size:13px;color:var(--hv-text);font-weight:500;} :where(.hv2-action) svg{flex:none;margin-top:1px;width:16px;height:16px;border-radius:50%;background:var(--hv-teal-light); color:var(--hv-teal);padding:2px;box-sizing:border-box;} /* ===== demo band — the one section that should pop. Bold saturated gradient (millionverifier's own CTA-banner treatment), not the dark moody wash used for the closing band. ===== */ .hv2-demoband{position:relative;background:var(--hv-cta-gradient);color:rgba(255,255,255,.92);text-align:center; padding:96px 0;overflow:hidden;} :where(.hv2-demoband) h2{color:#fff;font-size:clamp(28px,3.6vw,42px);} .hv2-demoband .hv2-lede{color:rgba(255,255,255,.85);max-width:640px;margin:16px auto 0;} .hv2-demoband .hv2-eyebrow{color:#fff;} /* live-call widget — same component as the homepage's #call section (agent chip, mic button, call-through number), restyled to the hv2 palette. Wired up by assets/call-widget.js, which toggles the .hv2-widget-mic--live modifier and the timer/message elements below as the call moves through its states. */ .hv2-widget{position:relative;max-width:420px;margin:44px auto 0;padding:44px 36px 38px; border-radius:28px;background:linear-gradient(160deg,#0f2b3f 0%,#0a1f30 100%); border:1px solid rgba(127,227,214,.22); box-shadow:0 40px 90px -30px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);} .hv2-widget-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#cfe8e4;text-align:center;} .hv2-widget-agent{display:inline-flex;align-items:center;gap:9px;margin:18px auto 0;padding:7px 16px 7px 7px; border-radius:var(--hv-r-pill);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);} .hv2-widget-agent-av{width:26px;height:26px;border-radius:50%;background:var(--hv-gradient);color:#fff; font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;} :where(.hv2-widget-agent) b{font-size:13.5px;font-weight:700;color:#fff;} :where(.hv2-widget-agent) s{text-decoration:none;color:rgba(255,255,255,.35);} :where(.hv2-widget-agent) span{font-size:13.5px;color:rgba(255,255,255,.7);} /* mic button — a soft "breathing" glow plus an expanding ping ring, same two-layer approach ainora.lt uses on their live-call widget: the glow pulses via animated box-shadow (not a hard-edged ring), and a separate translucent disc scales+fades on a slower loop underneath. */ .hv2-widget-micwrap{display:flex;justify-content:center;margin-top:34px;} .hv2-widget-mic{position:relative;width:96px;height:96px;border-radius:50%; border:2px solid rgba(127,227,214,.55); background:linear-gradient(135deg,rgba(91,79,233,.3),rgba(91,79,233,.18)); color:#eafffa;display:flex;align-items:center;justify-content:center; cursor:pointer;transition:transform .18s ease,box-shadow .3s ease; animation:hv2micbreathe 2.8s ease-in-out infinite;} :where(.hv2-widget-mic) svg{position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(127,227,214,.6));} .hv2-widget-mic-ping{position:absolute;inset:0;border-radius:50%;background:rgba(127,227,214,.16); animation:hv2micping 2.4s cubic-bezier(0,0,.2,1) infinite;} @keyframes hv2micbreathe{ 0%,100%{box-shadow:0 0 26px -6px rgba(91,79,233,.5),0 0 0 0 rgba(127,227,214,.18);} 50%{box-shadow:0 0 50px -6px rgba(127,227,214,.8),0 0 0 10px rgba(127,227,214,.06);} } @keyframes hv2micping{75%,100%{transform:scale(1.85);opacity:0;}} .hv2-widget-mic:hover{transform:scale(1.05);animation-play-state:paused; box-shadow:0 0 55px -4px rgba(127,227,214,.85),0 0 0 12px rgba(127,227,214,.08);} @media (prefers-reduced-motion:reduce){.hv2-widget-mic,.hv2-widget-mic-ping{animation:none;}} .hv2-widget-miclabel{margin-top:20px;font-size:14.5px;font-weight:600;color:#fff;text-align:center;} .hv2-widget-div{height:1px;margin:30px 0;background:rgba(255,255,255,.14);} .hv2-widget-or{text-align:center;font-size:13px;color:#cfe8e4;} .hv2-widget-num{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px; font-size:22px;font-weight:700;color:#8ff0e3;text-decoration:none;letter-spacing:-.01em;} .hv2-widget-num:hover{color:#b6f5eb;} .hv2-widget-sub{margin-top:10px;font-size:12.5px;color:#b9cdc9;text-align:center;} .hv2-demoband-foot{margin-top:22px;font-size:13px;color:rgba(255,255,255,.92); text-shadow:0 1px 4px rgba(0,20,20,.25);} /* mic button — live-call state. Same ring/glow shape as idle, just red instead of teal, so "tap to end" reads as a different affordance without a whole second component. */ .hv2-widget-mic--live{border-color:rgba(255,138,138,.65); background:linear-gradient(135deg,rgba(220,80,80,.32),rgba(180,40,40,.2)); animation:hv2miclive 1.6s ease-in-out infinite;} .hv2-widget-mic--live .hv2-widget-mic-ping{background:rgba(255,138,138,.24);animation-duration:1.5s;} .hv2-widget-mic--live:hover{box-shadow:0 0 55px -4px rgba(255,138,138,.85),0 0 0 12px rgba(255,138,138,.1);} @keyframes hv2miclive{ 0%,100%{box-shadow:0 0 26px -6px rgba(220,80,80,.55),0 0 0 0 rgba(255,138,138,.2);} 50%{box-shadow:0 0 50px -6px rgba(255,138,138,.85),0 0 0 10px rgba(255,138,138,.08);} } .hv2-widget-mic--pending{cursor:default;animation:none;} .hv2-widget-mic-icon svg{display:block;} .hv2-widget-mic-icon .hv2-spin{animation:hv2spin 1s linear infinite;transform-origin:50% 50%;} @keyframes hv2spin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){.hv2-widget-mic--live{animation:none;}.hv2-widget-mic-icon .hv2-spin{animation-duration:2.4s;}} /* :not([hidden]) rather than a bare selector — an unconditional display here would outrank the UA [hidden]{display:none} rule (author origin beats user-agent origin regardless of specificity), so the timer stays visible even while the hidden attribute is set. */ .hv2-widget-timer:not([hidden]){display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px; font-size:13px;font-weight:700;color:#ffb4b4;font-variant-numeric:tabular-nums;} .hv2-widget-timer-dot{width:7px;height:7px;border-radius:50%;background:#ff5a5a;animation:hv2livepulse 1.2s ease-in-out infinite;} @keyframes hv2livepulse{0%,100%{opacity:1;}50%{opacity:.35;}} .hv2-widget-msg{margin-top:16px;font-size:13.5px;line-height:1.55;color:#f3d9d9;text-align:center;} .hv2-widget-msg a{color:#8ff0e3;} .hv2-widget-msg code{color:#8ff0e3;font-size:.95em;} .hv2-widget-retry{display:inline-flex;align-items:center;justify-content:center;margin-top:12px;height:38px;padding:0 18px; border-radius:var(--hv-r-pill);border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08); color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .16s ease;} .hv2-widget-retry:hover{background:rgba(255,255,255,.16);} /* ===== agent tabs — homepage-only picker, living inside the widget card itself (right under its "try in browser" eyebrow) instead of as a separate row above it, so picking an agent and calling it read as one action in one component rather than two stacked pieces with a gap between them. Unselected chips are a translucent white on the card's own dark navy — reads clearly against a solid dark backdrop, unlike the light gradient outside the card where the same treatment used to wash out. Only the active tab carries an icon (a solid checkmark), so "selected" has one strong, unambiguous signal instead of every pill needing its own. ===== */ .hv2-agenttabs{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0 0;} .hv2-agenttab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:var(--hv-r-pill); border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:rgba(255,255,255,.88); font-size:13px;font-weight:600;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;} .hv2-agenttab:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.4);transform:translateY(-1px);} .hv2-agenttab.on{background:#fff;color:var(--hv-blue);border-color:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.35);} .hv2-agenttab.on::before{content:"";width:14px;height:14px;border-radius:50%;flex:none; background:var(--hv-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/8px no-repeat;} .hv2-agenttabs.is-disabled .hv2-agenttab{pointer-events:none;opacity:.5;} /* ===== stat rows (centered, gradient numbers) ===== */ .hv2-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:8px;} @media (max-width:760px){.hv2-statgrid{grid-template-columns:1fr;}} .hv2-stat{text-align:center;} :where(.hv2-stat) b{display:block;font-size:clamp(44px,5.5vw,64px);font-weight:800;line-height:1;letter-spacing:-.03em; background:var(--hv-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;} :where(.hv2-stat) p{margin-top:14px;font-size:14.5px;line-height:1.55;color:var(--hv-text-muted);} .hv2-statcite{display:block;margin-top:10px;font-size:11.5px;color:var(--hv-text-subtle);} /* ===== capability grid (icon badges) ===== */ .hv2-capgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px;} @media (max-width:900px){.hv2-capgrid{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.hv2-capgrid{grid-template-columns:1fr;}} /* 4-across variant for verticals with more capabilities than fit a 3-col grid and no icon (plain heading + paragraph) — same degrade path as the base grid, just one more column at desktop. */ .hv2-capgrid.hv2-capgrid-4{grid-template-columns:repeat(4,1fr);} @media (max-width:900px){.hv2-capgrid.hv2-capgrid-4{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.hv2-capgrid.hv2-capgrid-4{grid-template-columns:1fr;}} .hv2-capicon{width:42px;height:42px;border-radius:12px;background:var(--hv-gradient-soft); display:flex;align-items:center;justify-content:center;color:var(--hv-teal);margin-bottom:16px;} :where(.hv2-cap) h3{font-size:16.5px;} :where(.hv2-cap) p{margin-top:8px;font-size:14.5px;line-height:1.6;} /* 3-across badge row variant — the HVAC page shipped with 4 badges (a clean 2x2); some verticals only have 3. Carries its own mobile breakpoint so it doesn't depend on (and outrank) the base 2-col rule's own collapse. */ .hv2-badgerow.hv2-badgerow-3{grid-template-columns:repeat(3,1fr);} @media (max-width:640px){.hv2-badgerow.hv2-badgerow-3{grid-template-columns:1fr;}} /* ===== call-by-call (hairline definition list, Ainora-style) ===== */ .hv2-calllist{margin-top:8px;} .hv2-callrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px; padding:32px 0;border-bottom:1px solid var(--hv-border);} @media (max-width:760px){.hv2-callrow{grid-template-columns:1fr;gap:10px;}} .hv2-callrow:first-child{padding-top:0;} .hv2-callrow-meta{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--hv-text-subtle);} .hv2-callrow-who{display:block;margin-top:8px;font-size:18px;font-weight:700;color:var(--hv-text);} :where(.hv2-callrow-body) p{font-size:15px;line-height:1.62;} .hv2-callrow-foot{margin-top:12px;font-size:13.5px;color:var(--hv-text-subtle);line-height:1.5;} :where(.hv2-callrow-foot) b{color:var(--hv-teal);text-transform:uppercase;font-size:11px;letter-spacing:.05em;margin-right:6px;} .hv2-callrow.hv2-warn{background:var(--hv-error-light);margin:0 -28px;padding:32px 28px;border-radius:var(--hv-r); border-bottom-color:transparent;} .hv2-callrow.hv2-warn .hv2-callrow-meta{color:#c0392b;} .hv2-callrow.hv2-warn .hv2-callrow-foot b{color:#c0392b;} @media (max-width:760px){.hv2-callrow.hv2-warn{margin:0;}} /* ===== reads/writes ===== */ .hv2-reviewflag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 14px; border-radius:var(--hv-r-pill);background:var(--hv-warning-light);border:1px solid rgba(245,158,11,.3); color:#8a5f10;font-size:12.5px;font-weight:600;} .hv2-rwgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:8px;} @media (max-width:700px){.hv2-rwgrid{grid-template-columns:1fr;}} :where(.hv2-rwgrid) h3{font-size:15px;} :where(.hv2-rwgrid) ul{margin:16px 0 0;padding:0;list-style:none;} :where(.hv2-rwgrid) li{position:relative;margin-bottom:12px;padding-left:22px;font-size:14.5px;line-height:1.55;color:var(--hv-text-muted);} .hv2-rwgrid li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:2px;background:var(--hv-teal);} .hv2-rwtable{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px;} :where(.hv2-rwtable) th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--hv-text-subtle); font-weight:700;padding:0 16px 12px 0;} :where(.hv2-rwtable) td{padding:18px 16px 18px 0;border-top:1px solid var(--hv-border);vertical-align:top;line-height:1.6;color:var(--hv-text-muted);} .hv2-rwtable td:first-child{width:230px;font-weight:700;color:var(--hv-text);} /* ===== comparison cards — an alternative to the rwgrid bullet-columns above, for pages that already carry several dot-bulleted lists by the time they reach the agent/person split. Two bordered cards, icon-marked rows instead of bullets: a check for what the agent handles, a small person glyph for what hands off. ===== */ .hv2-comparegrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px;} @media (max-width:760px){.hv2-comparegrid{grid-template-columns:1fr;}} .hv2-comparecol{background:#fff;border-radius:var(--hv-r-lg);box-shadow:var(--hv-shadow-premium);overflow:hidden;} .hv2-comparecol-h{display:flex;align-items:center;gap:12px;padding:22px 26px;border-bottom:1px solid var(--hv-border);} :where(.hv2-comparecol-h) h3{font-size:15.5px;} .hv2-comparecol-ic{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;} .hv2-comparerow{display:flex;align-items:flex-start;gap:12px;padding:14px 26px;border-top:1px solid var(--hv-border);} .hv2-comparecol .hv2-comparerow:first-of-type{border-top:0;} :where(.hv2-comparerow) p{margin:0;font-size:14.5px;line-height:1.55;color:var(--hv-text-muted);} .hv2-comparerow-ic{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px;} .hv2-comparecol-agent .hv2-comparecol-ic,.hv2-comparecol-agent .hv2-comparerow-ic{background:var(--hv-teal-light);color:var(--hv-teal);} .hv2-comparecol-person .hv2-comparecol-ic,.hv2-comparecol-person .hv2-comparerow-ic{background:rgba(91,79,233,.1);color:var(--hv-blue);} /* ===== the approval line — two bulleted columns (same pattern as the reads/writes grid above) instead of a dense table; the "person joins" column gets a slate bullet instead of teal so the two lists stay visually distinct at a glance. ===== */ :where(.hv2-rwgrid) ul.hv2-muted li::before{background:var(--hv-text-subtle);} /* "never allowed" — a calm icon list, not an alarm. Red stays reserved for the one genuine safety escalation (the gas-smell card above); this is a boundary statement, not an emergency, so it reads in the site's own ink/slate tones with a plain "no" glyph, not red. */ .hv2-neverlist{margin-top:8px;background:#fff;border-radius:var(--hv-r-lg);box-shadow:var(--hv-shadow-premium); overflow:hidden;} .hv2-never{display:flex;gap:16px;align-items:flex-start;padding:14px 28px;border-top:1px solid var(--hv-border);} .hv2-never:first-child{border-top:0;} .hv2-never-ic{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(239,68,68,.1);color:#d1483c; display:flex;align-items:center;justify-content:center;margin-top:1px;} .hv2-never b{display:block;font-size:15.5px;font-weight:700;color:var(--hv-text);} .hv2-never p{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--hv-text-muted);} .hv2-boundary-close{margin-top:22px;font-size:14.5px;color:var(--hv-text-subtle);font-style:italic;} /* "Hard-boundary panel" — a heavier alternative to the calm icon-list above, for verticals whose boundary statement carries more weight than a bullet list should (escalation policy, not just a feature limit). Full-sentence statements, each opening on a bolded claim, in one dense premium card with a gradient accent bar — deliberately the heaviest thing on the page after the hero. */ .hv2-boundarypanel{position:relative;margin-top:8px;background:#fff;border-radius:var(--hv-r-lg); box-shadow:var(--hv-shadow-premium);padding:40px 44px 40px 48px;overflow:hidden;} .hv2-boundarypanel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--hv-gradient);} .hv2-boundarypanel p{margin-bottom:18px;font-size:15.5px;line-height:1.68;color:var(--hv-text-muted);} .hv2-boundarypanel p:last-of-type{margin-bottom:0;} :where(.hv2-boundarypanel) b{color:var(--hv-text);font-weight:700;} @media (max-width:640px){.hv2-boundarypanel{padding:32px 24px 32px 28px;}} /* ===== timeline ===== */ .hv2-timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px;} @media (max-width:820px){.hv2-timeline{grid-template-columns:1fr;}} /* 4-across variant — same degrade path as the base grid, one more column at desktop, for pages with a four-step sequence rather than three. */ .hv2-timeline.hv2-timeline-4{grid-template-columns:repeat(4,1fr);} @media (max-width:1080px){.hv2-timeline.hv2-timeline-4{grid-template-columns:repeat(2,1fr);}} @media (max-width:620px){.hv2-timeline.hv2-timeline-4{grid-template-columns:1fr;}} .hv2-step{position:relative;padding-top:56px;} .hv2-step-n{position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--hv-gradient); color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center; box-shadow:var(--hv-glow-teal);} :where(.hv2-step) h3{font-size:17px;} :where(.hv2-step) p{margin-top:10px;font-size:14.5px;line-height:1.6;} /* ===== integrations — continuous right-to-left marquee, same technique as the homepage's industries strip (masked edges, doubled content, translateX(-50%), pause on hover, no motion if the user asked for less) ===== */ .hv2-marq{margin-top:28px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .hv2-track{display:flex;width:max-content;animation:hv2slide 32s linear infinite;} .hv2-marq:hover .hv2-track{animation-play-state:paused;} @keyframes hv2slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.hv2-track{animation:none;}} :where(.hv2-track) span{display:inline-flex;align-items:center;padding:0 28px;white-space:nowrap; font-size:26px;font-weight:700;letter-spacing:-.01em; background:var(--hv-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85;} /* label above one group of a split integrations ticker — two-funnel verticals (recruiting + scheduling, or hiring + scheduling + short-term rental) show more than one named-system group, so each gets its own small caption. */ .hv2-integr-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--hv-text-subtle);margin:0 0 4px;} /* ===== FAQ (premium cards) ===== */ .hv2-faq{margin-top:8px;max-width:820px;} .hv2-faq details{background:#fff;border-radius:var(--hv-r);box-shadow:var(--hv-shadow);margin-bottom:12px; border:1px solid transparent;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;} .hv2-faq details:hover{border-color:rgba(91,79,233,.35);box-shadow:var(--hv-shadow-premium);transform:translateY(-1px);} /* padding lives on summary, not on details, so the whole question row — not just its text — is inside the element that actually toggles the
open/closed on click. */ .hv2-faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:16.5px;font-weight:700;color:var(--hv-text); display:flex;align-items:center;gap:16px;transition:color .18s ease;} .hv2-faq details:hover summary{color:var(--hv-teal);} .hv2-faq summary::-webkit-details-marker{display:none;} .hv2-faq summary::after{content:"+";margin-left:auto;color:var(--hv-teal);font-size:22px;line-height:1;font-weight:400; transition:transform .18s ease;} .hv2-faq details:hover summary::after{transform:scale(1.15);} .hv2-faq details[open] summary::after{content:"\2212";} .hv2-faq .hv2-ans{padding:0 26px 22px;font-size:15px;line-height:1.6;color:var(--hv-text-muted);} /* ===== author card ===== */ .hv2-author{display:flex;gap:20px;align-items:flex-start;margin-top:56px;max-width:820px; padding:30px 32px;background:#fff;border-radius:var(--hv-r-lg);box-shadow:var(--hv-shadow-premium);} .hv2-author-av{width:56px;height:56px;border-radius:50%;flex:none;background:var(--hv-gradient);color:#fff; font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;} :where(.hv2-author) b{display:block;font-size:16.5px;font-weight:700;color:var(--hv-text);} :where(.hv2-author) em{display:block;font-style:normal;font-size:13.5px;color:var(--hv-text-subtle);margin-top:2px;} :where(.hv2-author) p{margin-top:12px;font-size:14.5px;line-height:1.58;} .hv2-author .hv2-textlink{margin-top:12px;} @media (max-width:560px){.hv2-author{flex-direction:column;}} /* ===== closing CTA — calm navy, matching the legacy footer directly below it so the two dark bands read as one continuous zone instead of a visible seam. The live-demo band above is the one that gets to be loud. ===== */ .hv2-close{position:relative;background:var(--hv-navy);color:rgba(255,255,255,.75);text-align:center; padding:110px 0;overflow:hidden;} :where(.hv2-close) h2{color:#fff;font-size:clamp(30px,4vw,48px);} .hv2-close .hv2-lede{color:rgba(255,255,255,.6);max-width:520px;margin:16px auto 0;} .hv2-close-note{margin-top:26px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.5);} .hv2-prose{max-width:740px;} :where(.hv2-prose) h2{font-size:clamp(28px,3.4vw,40px);} :where(.hv2-prose) p{font-size:16.5px;line-height:1.62;margin-top:16px;} .hv2-prose p:first-of-type{margin-top:20px;} :where(.hv2-prose) h3{margin-top:36px;font-size:18px;color:var(--hv-text);} :where(.hv2-prose) ul{margin:16px 0 0;padding:0;list-style:none;} :where(.hv2-prose) li{position:relative;margin-bottom:11px;padding-left:24px;font-size:16px;line-height:1.55;color:var(--hv-text-muted);} .hv2-prose li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--hv-teal);} /* legal pages: dated meta line, callout boxes, and a plain data table */ .hv2-prose .hv2-updated{font-size:14px;color:var(--hv-text-subtle);margin-top:0;} .hv2-prose .hv2-note{margin:20px 0;padding:16px 20px;border-radius:var(--hv-r-sm); background:var(--hv-bg-soft);border-left:3px solid var(--hv-teal);font-size:15.5px;line-height:1.6;color:var(--hv-text);} .hv2-prose .hv2-note p{margin:0;font-size:15.5px;} .hv2-prose .hv2-note p+p{margin-top:10px;} .hv2-prose table{width:100%;border-collapse:collapse;margin-top:20px;font-size:15px;} .hv2-prose th,.hv2-prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--hv-border);} .hv2-prose th{color:var(--hv-text-subtle);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;} .hv2-prose td{color:var(--hv-text-muted);} .hv2-prose td:first-child,.hv2-prose th:first-child{color:var(--hv-text);font-weight:600;padding-left:0;} /* flex, not absolute-positioned guesswork, so the number lines up with the heading's cap-height regardless of font metrics */ .hv2-dpoint{display:flex;gap:18px;align-items:baseline;padding:22px 0;border-top:1px solid var(--hv-border);} .hv2-dpoint:first-of-type{border-top:0;padding-top:8px;} .hv2-dpoint-n{flex:none;font-family:'Plus Jakarta Sans',var(--sans);font-size:19px; font-weight:800;color:var(--hv-teal);line-height:1;} .hv2-dpoint-body{flex:1;min-width:0;} :where(.hv2-dpoint-body) b{display:block;font-size:16.5px;font-weight:700;color:var(--hv-text);margin-bottom:8px;} :where(.hv2-dpoint-body) p{font-size:15px;line-height:1.58;} /* ============================================================ Legacy footer (.close +