/* ============================================================ HVAC page redesign — look-and-feel experiment Isolated on purpose: loaded only by ai-receptionist-hvac-redesign.html, after site.css. Nav/footer/search stay the normal Brimeo chrome from site.css; everything in here is scoped to the "hv2-" prefix so nothing here can bleed into or collide with the rest of the site. Palette/shadow/gradient tokens adapted from millionverifier.com (their teal->blue gradient, "atmospheric" layered radial backgrounds, and soft layered card shadows). Layout rhythm (split hero, centered stat numbers, hairline-divider call list instead of boxed cards, generous section padding) adapted from ainora.lt/industries/dental-clinics. ============================================================ */ .hv2 { --hv-teal:#20b0a3; --hv-teal-hover:#1c9e92; --hv-teal-light:rgba(32,176,163,.1); /* Featured-column wash. --hv-teal-light (.1) reads too heavy over a full-height table column, so the scale gets a lighter step rather than a one-off alpha inlined at the use site. */ --hv-teal-wash:rgba(32,176,163,.055); --hv-blue:#216ec2; --hv-blue-dark:#1e62ad; --hv-gradient:linear-gradient(116.5deg,#20b0a3 25.44%,#216ec2 109.01%); --hv-gradient-soft:linear-gradient(116.5deg,rgba(32,176,163,.08) 25.44%,rgba(33,110,194,.08) 109.01%); --hv-text:#0c1616; --hv-text-muted:#5b6363; --hv-text-subtle:#8b9494; --hv-bg:#ffffff; --hv-bg-soft:#f7f8f8; --hv-bg-alt:#f0f2f2; --hv-border:rgba(15,23,42,.08); --hv-border-strong:rgba(15,23,42,.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(32,176,163,.10); --hv-glow-teal:0 8px 24px -8px rgba(32,176,163,.55); --hv-atmo-light:radial-gradient(120% 120% at 0% 0%,rgba(32,176,163,.10),transparent 55%), radial-gradient(120% 120% at 100% 100%,rgba(33,110,194,.12),transparent 55%), linear-gradient(135deg,#ffffff,#f7fbff); --hv-atmo-dark:radial-gradient(120% 120% at 0% 0%,rgba(32,176,163,.35),transparent 55%), radial-gradient(120% 120% at 100% 100%,rgba(33,110,194,.45),transparent 55%), radial-gradient(80% 80% at 50% 50%,rgba(15,23,42,0),rgba(15,23,42,.35) 80%), linear-gradient(135deg,#0b1e3f,#06121f); /* the bold, saturated version — millionverifier's actual CTA-banner background, not the moody dark one above. Reserved for the one section that should visually shout: the live-demo CTA. */ --hv-cta-gradient:radial-gradient(120% 120% at 0% 0%,rgba(32,176,163,.25),transparent 55%), radial-gradient(120% 120% at 100% 100%,rgba(33,110,194,.3),transparent 55%), linear-gradient(116.5deg,#20b0a3 25.44%,#216ec2 109.01%); /* calm, solid dark navy for closing/footer bands — deliberately not the loud gradient above, so the live-demo CTA stays the one that pops. */ --hv-navy:linear-gradient(160deg,#0f2b3f 0%,#081420 100%); 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(32,176,163,.65);} .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;} /* Without this the first hero starts one nav-band down and the strip behind the nav is bare page white. Pulled up into the band, with the same amount added to its top padding: the gradient starts at the top edge with the nav floating on it, and the content stays exactly where it was. */ main > .hv2-hero:first-child{margin-top:calc(-1 * var(--navband)); padding-top:calc(64px + var(--navband));} .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(32,176,163,.3),rgba(33,110,194,.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(32,176,163,.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);} /* Fine print under the demo CTA. Sits on the dark demoband, so it is dimmed white rather than a grey — a muted ink colour would disappear against the gradient. Deliberately quieter than -foot above it: that line tells you how to use the widget, this one is legal boilerplate nobody needs to read before clicking. Quieter, but not invisible: at .58 it measured 1.79:1 against the teal end of the gradient, and a disclaimer nobody can read is not much of a disclaimer. .74 plus the same text-shadow -foot uses lands at 2.15:1, still clearly subordinate to that line's 2.5:1. The band as a whole is under WCAG AA on its teal end — pre-existing, and not something this rule can fix alone. */ .hv2-demoband-legal{max-width:600px;margin:14px auto 0;font-size:11.5px;line-height:1.5; color:rgba(255,255,255,.74);text-shadow:0 1px 4px rgba(0,20,20,.25);} .hv2-demoband-legal a{color:#fff;text-decoration:underline; text-underline-offset:2px;} .hv2-demoband-legal a:hover{color:#fff;} /* 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) — one more column at desktop. The degrade steps below are NOT redundant with the base grid's: this selector is two classes, so it outranks the single-class media queries above no matter where they sit in the file. Without these the variant stayed 4-across to 375px and put the page into horizontal scroll. Keep them at this specificity if you touch them. */ .hv2-capgrid.hv2-capgrid-4{grid-template-columns:repeat(4,1fr);} @media (max-width:1040px){.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;} /* Bleeds out to the page gutter. The negative margin must match .hv2-wrap's `padding: 0 24px` exactly — at -28px it overflowed 4px each side once the wrap was gutter-constrained (~760-1248px), which is invisible at wide widths where max-width leaves slack. */ .hv2-callrow.hv2-warn{background:var(--hv-error-light);margin:0 -24px;padding:32px 24px;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(33,110,194,.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(32,176,163,.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);} /* 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 +