/* ============================================================================
   Hotlines public marketing site (templates/marketing/*) and sign-in.
   Brand: white ground, near-black ink, Hotlines red. Action red and the
   folder hues are the dashboard's own tokens (assets/scss/_tokens.scss on
   ui-refresh); the logo's red-to-dark-red gradient is kept for brand moments.
   Headings Archivo (wide, heavy, the italic echoes the wordmark); body
   Source Sans 3. Every class is .hm- or .lg- so nothing collides with the
   app's Bootstrap 3 / Semantic UI vocabulary. Hand-written, no build step.
   Motion (assets/js/marketing_site.js): the hero hotline feed, numbers that
   count once, a gentle reveal on screenshots. Off under reduced motion.
   ========================================================================== */

:root {
  --hm-red:#d81f04;
  --hm-red-dark:#b31803;
  --hm-red-wash:#fdeee9;
  --hm-red-line:#f0c6bd;
  --hm-logo-red:#ff0000;
  --hm-logo-red-dark:#aa0001;
  --hm-black:#000;
  --hm-ink:#14181e;
  --hm-body:#3b424d;
  --hm-muted:#626b78;
  --hm-faint:#8b939e;
  --hm-line:#dde1e6;
  --hm-line-strong:#c8cdd4;
  --hm-bg:#eceef1;
  --hm-subtle:#f7f8fa;
  --hm-on-black:#b9bec6;
  --hm-general:#d97706;
  --hm-private:#dc4d26;
  --hm-sent:#7c3aed;
  --hm-members:#0d9488;
  --hm-automatch:#2563eb;
  --hm-located:#16a34a;
  --hm-green:#0f7a37;
  --hm-green-bg:#e8f5ec;
  --hm-radius:10px;
  --hm-radius-sm:6px;
  --hm-header-h:68px;
  --hm-shadow:0 1px 2px rgba(20,24,30,.06), 0 12px 32px rgba(20,24,30,.10);
  --hm-shadow-lg:0 2px 6px rgba(20,24,30,.08), 0 28px 70px rgba(20,24,30,.18);
  --hm-font:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --hm-display:'Archivo', 'Arial Black', -apple-system, 'Segoe UI', Arial, sans-serif;
  --hm-mono:ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;
  --hm-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------------------------------------------------------------- base ---- */

html:has(body.hm) { overflow-x:clip; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html:has(body.hm) { scroll-behavior:auto; } }
body.hm { overflow-x:clip; margin:0; font-family:var(--hm-font); font-size:18px; line-height:1.6; background:#fff; color:var(--hm-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.hm *, .hm *::before, .hm *::after { box-sizing:border-box; }
.hm a { color:var(--hm-red); text-decoration:none; }
.hm a:hover { color:var(--hm-red-dark); }
body.hm img { max-width:100%; }
.hm .material-icons { font-size:inherit; line-height:1; vertical-align:middle; user-select:none; }
.hm :focus-visible { outline:3px solid rgba(216,31,4,.45); outline-offset:2px; border-radius:4px; }
.hm .hm-skip { position:absolute; left:-9999px; top:0; background:#fff; color:var(--hm-ink); padding:10px 16px; z-index:80; border:1px solid var(--hm-line); border-radius:var(--hm-radius-sm); font-weight:700; }
.hm .hm-skip:focus { left:12px; top:12px; }

.hm-wrap { max-width:1200px; margin:0 auto; padding-left:32px; padding-right:32px; }
.hm-wrap.is-narrow { max-width:820px; }
.hm-wrap.is-mid { max-width:1040px; }

/* ---------------------------------------------------------------- type ---- */

.hm-h1, .hm-h2, .hm-h3 { font-family:var(--hm-display); color:var(--hm-ink); margin:0; text-wrap:balance; }
.hm-h1 { font-size:clamp(40px, 5vw, 70px); line-height:.98; font-weight:800; font-stretch:118%; font-style:italic; letter-spacing:-.02em; }
.hm-h1.is-sm { font-size:clamp(36px, 4vw, 54px); line-height:1.02; }
.hm-h2 { font-size:clamp(30px, 3.1vw, 44px); line-height:1.05; font-weight:800; font-stretch:112%; letter-spacing:-.015em; }
.hm-h2.is-sm { font-size:clamp(26px, 2.4vw, 34px); }
.hm-h3 { font-size:21px; line-height:1.25; font-weight:700; font-stretch:106%; }
.hm-lead { font-size:20px; line-height:1.55; color:var(--hm-body); margin:22px 0 0; max-width:58ch; text-wrap:pretty; }
.hm-lead.is-sm { font-size:18.5px; }
.hm-center { text-align:center; }
.hm-center .hm-lead { margin-left:auto; margin-right:auto; }
.hm-kicker { font-size:17px; font-weight:600; color:var(--hm-red); margin:0 0 14px; }
.hm-section-head { max-width:760px; margin-bottom:52px; }
.hm-section-head.hm-center { margin-left:auto; margin-right:auto; }

/* -------------------------------------------------------------- header ---- */

.hm-header { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92); border-bottom:1px solid transparent; backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); transition:border-color .2s ease, box-shadow .2s ease; }
.hm-header.is-scrolled { border-bottom-color:var(--hm-line); box-shadow:0 6px 24px rgba(20,24,30,.06); }
.hm-header-inner { height:var(--hm-header-h); display:flex; align-items:center; gap:28px; }
.hm .hm-brand { display:flex; align-items:center; flex:none; }
.hm-brand img { height:30px; width:auto; display:block; }
.hm-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.hm .hm-navlink { font-size:16.5px; font-weight:600; color:var(--hm-ink); padding:8px 12px; border-radius:var(--hm-radius-sm); white-space:nowrap; }
.hm .hm-navlink:hover { color:var(--hm-ink); background:var(--hm-subtle); }
.hm .hm-navlink.is-active { color:var(--hm-red); }
.hm-nav-sep { width:1px; height:22px; background:var(--hm-line); margin:0 10px; }
.hm-nav .hm-btn + .hm-btn { margin-left:8px; }
.hm .hm-header-inner > .hm-btn { display:none; }
.hm-menu { display:none; position:relative; }
.hm-menu > summary { list-style:none; cursor:pointer; width:42px; height:42px; border:1px solid var(--hm-line-strong); border-radius:var(--hm-radius-sm); display:flex; align-items:center; justify-content:center; color:var(--hm-ink); font-size:24px; }
.hm-menu > summary::-webkit-details-marker { display:none; }
.hm-menu[open] > summary { border-color:var(--hm-ink); }
.hm-menu-panel { position:absolute; right:0; top:calc(100% + 10px); background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-radius); box-shadow:var(--hm-shadow); padding:8px; min-width:220px; display:flex; flex-direction:column; gap:2px; animation:hm-pop .18s var(--hm-ease); }
.hm .hm-menu-panel a { font-size:17px; font-weight:600; color:var(--hm-ink); padding:11px 12px; border-radius:var(--hm-radius-sm); }
.hm .hm-menu-panel a:hover { background:var(--hm-subtle); color:var(--hm-red); }
@keyframes hm-pop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ------------------------------------------------------------- buttons ---- */

.hm .hm-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:17px; font-weight:700; line-height:1; padding:15px 22px; border-radius:var(--hm-radius-sm); background:var(--hm-red); color:#fff; border:1px solid var(--hm-red); cursor:pointer; text-align:center; white-space:nowrap; transition:background-color .15s ease, border-color .15s ease, transform .15s var(--hm-ease), box-shadow .15s ease; }
.hm .hm-btn:hover { background:var(--hm-red-dark); border-color:var(--hm-red-dark); color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(216,31,4,.24); }
.hm .hm-btn:active { transform:none; }
.hm .hm-btn .material-icons { font-size:20px; }
.hm .hm-btn.is-ghost { background:#fff; color:var(--hm-ink); border-color:var(--hm-line-strong); }
.hm .hm-btn.is-ghost:hover { border-color:var(--hm-ink); box-shadow:0 6px 16px rgba(20,24,30,.08); }
.hm .hm-btn.is-on-black { background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.hm .hm-btn.is-on-black:hover { border-color:#fff; background:rgba(255,255,255,.08); box-shadow:none; }
.hm .hm-btn.is-sm { font-size:16px; padding:10px 16px; }
.hm .hm-btn.is-block { width:100%; height:52px; }
.hm-ctarow { display:flex; gap:12px; flex-wrap:wrap; }
.hm-ctarow.is-center { justify-content:center; }

/* ----------------------------------------------------------- first screen ---- */
/* Hero + facts bar fill the viewport so the bar sits at the bottom of the
   first screen, as on the AutoValueAI and AutoInventoryAI sites. */

.hm-first { min-height:calc(100vh - var(--hm-header-h)); min-height:calc(100svh - var(--hm-header-h)); display:flex; flex-direction:column; overflow:clip; }
.hm-hero { flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.02fr); gap:56px; align-items:center; padding-top:48px; padding-bottom:56px; }
.hm-hero-note { margin:22px 0 0; font-size:17px; color:var(--hm-muted); }
.hm-hero-note a { font-weight:700; }

/* The hero illustration: the app's General folder, cleaned up. Structure and
   colours follow the live classic UI (tab links, the brown General folder bar,
   Status/From/Regarding/Action/Date Time, Done and View, the blue bottom bar).
   Rows have a FIXED height so a new request can slide in without any reflow:
   the list moves down exactly one row and the bottom row passes out of the clip. */
.hm-app { --rh:62px; position:relative; background:#fff; border:1px solid var(--hm-line); border-radius:12px; box-shadow:var(--hm-shadow-lg); overflow:hidden; font-family:Arial, 'Helvetica Neue', sans-serif; color:#333; }
.hm-app-tag { flex:none; font-family:var(--hm-font); font-size:12.5px; font-weight:600; color:var(--hm-muted); background:#fff; border:1px solid var(--hm-line); border-radius:999px; padding:2px 9px; }
.hm-app-top { display:flex; align-items:center; gap:16px; padding:8px 14px; background:#f4f4f4; border-bottom:1px solid #e2e2e2; }
.hm-app-tabs { display:flex; gap:12px; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; }
.hm-app-tabs span { color:#337ab7; text-decoration:underline; text-underline-offset:2px; padding:2px 3px; }
.hm-app-tabs span.is-on { color:#333; text-decoration:none; border:2px solid #333; border-radius:4px; background:#c9955f; }
.hm-app-logo { height:15px; width:auto; margin-left:auto; flex:none; }
.hm-app-folder { background:#bf8040; color:#1d1d1d; padding:8px 14px 6px; }
.hm-app-title { text-align:center; font-size:15px; font-weight:700; }
.hm-app-cols, .hm-app-row { display:grid; grid-template-columns:12px 108px minmax(0, 1fr) 104px 44px; gap:10px; align-items:center; }
.hm-app-cols { margin-top:6px; font-size:12.5px; }
.hm-app-cols span:last-child { text-align:right; }
.hm-app-rows { height:calc(6 * var(--rh)); overflow:hidden; position:relative; }
.hm-app-list { list-style:none; margin:0; padding:0; will-change:transform; }
.hm-app-row { height:var(--rh); padding:0 14px; border-bottom:1px solid #e6e6e6; background:#fff; font-size:12.5px; }
.hm-app-row > i { width:8px; height:8px; border-radius:50%; background:#5cb85c; display:block; }
.hm-app-from { color:#555; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-app-reg { min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.hm-app-reg b { font-weight:400; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-app-reg span { color:#555; white-space:nowrap; }
.hm-app-act { display:flex; gap:6px; justify-content:flex-end; }
.hm-app em, .hm-app-bottom em { font-style:normal; }
.hm-app-act em { font-size:12px; padding:5px 8px; border-radius:3px; background:#e2f0d9; color:#333; }
.hm-app-act em.is-view { background:#5cb85c; color:#fff; }
.hm-app-row time { text-align:right; color:#333; font-size:12px; line-height:1.3; }
.hm-app-bottom { display:flex; gap:4px; padding:6px 8px; background:#f4f4f4; border-top:1px solid #e2e2e2; white-space:nowrap; overflow:hidden; }
.hm-app-bottom em { font-size:12px; color:#fff; background:#337ab7; border-radius:3px; padding:3px 7px; }
.hm-app-row.is-new { animation:hm-app-new 2.6s ease-out both; }
.hm-app-row.is-new > * { animation:hm-app-fade .6s ease-out both; }
@keyframes hm-app-new { 0%, 35% { background:#fff5e0; } 100% { background:#fff; } }
@keyframes hm-app-fade { from { opacity:0; } to { opacity:1; } }

/* Load sequence for the hero copy, only when JS runs and motion is allowed. */
.hm-anim .hm-seq { opacity:0; transform:translateY(14px); }
.hm-anim.is-in .hm-seq { opacity:1; transform:none; transition:opacity .6s var(--hm-ease), transform .6s var(--hm-ease); transition-delay:calc(var(--i, 0) * 90ms); }
.hm-anim [data-hero] .hm-app { opacity:0; transform:translateY(22px); }
.hm-anim.is-in [data-hero] .hm-app { opacity:1; transform:none; transition:opacity .8s var(--hm-ease) .3s, transform .8s var(--hm-ease) .3s; }

.hm-facts { border-top:1px solid var(--hm-line); background:var(--hm-subtle); }
.hm-facts-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 32px; padding-top:18px; padding-bottom:18px; }
.hm-fact { display:inline-flex; align-items:center; gap:10px; font-size:17px; font-weight:600; color:var(--hm-ink); }
.hm-fact .material-icons { color:var(--hm-red); font-size:22px; }

/* ------------------------------------------------------------ sections ---- */

.hm-section { padding:104px 0; }
.hm-section.is-tight { padding:64px 0; }
.hm-section.is-subtle { background:var(--hm-subtle); border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); }
.hm-anchor { scroll-margin-top:var(--hm-header-h); }

/* How it works: a real sequence, so it is numbered. */
.hm-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:28px; counter-reset:hm-step; }
.hm-step { position:relative; padding:28px 26px 30px; border:1px solid var(--hm-line); border-radius:var(--hm-radius); background:#fff; counter-increment:hm-step; }
.hm-step::before { content:counter(hm-step); display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:18px; border-radius:8px; background:var(--hm-ink); color:#fff; font-family:var(--hm-display); font-weight:800; font-stretch:115%; font-style:italic; font-size:19px; }
.hm-step p { margin:10px 0 0; color:var(--hm-body); font-size:17.5px; }
.hm-step-tag { display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; font-weight:600; color:var(--hm-muted); }
.hm-step-tag i { width:8px; height:8px; border-radius:50%; background:var(--c); display:block; }

.hm-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1px; background:var(--hm-line); border:1px solid var(--hm-line); border-radius:var(--hm-radius); overflow:hidden; }
.hm-cell { background:#fff; padding:28px 26px 30px; }
.hm-cell .material-icons { font-size:28px; color:var(--hm-red); }
.hm-cell h3 { margin:14px 0 0; }
.hm-cell p { margin:8px 0 0; color:var(--hm-body); font-size:17px; }

/* The black band. Its slanted top edge borrows the logo's parallelogram. */
.hm-band { position:relative; background:var(--hm-black); color:#fff; padding:128px 0 104px; clip-path:polygon(0 48px, 100% 0, 100% 100%, 0 100%); margin-top:-48px; }
.hm-band .hm-h2 { color:#fff; }
.hm-band .hm-lead { color:var(--hm-on-black); }
.hm-quote { display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:64px; align-items:center; }
.hm-quote blockquote { margin:0; font-family:var(--hm-display); font-weight:700; font-stretch:106%; font-size:clamp(26px, 2.6vw, 38px); line-height:1.2; letter-spacing:-.01em; text-wrap:pretty; }
.hm-quote blockquote::before { content:"\201C"; display:block; font-size:96px; line-height:.6; color:var(--hm-logo-red); margin-bottom:18px; font-style:italic; }
.hm-quote cite { display:block; margin-top:24px; font-style:normal; font-size:18px; color:var(--hm-on-black); }
.hm-quote cite b { color:#fff; font-weight:700; }
.hm-stats { display:flex; flex-direction:column; gap:28px; border-left:1px solid rgba(255,255,255,.18); padding-left:40px; }
.hm-stat-num { font-family:var(--hm-display); font-weight:800; font-stretch:118%; font-style:italic; font-size:clamp(40px, 4vw, 58px); line-height:1; color:#fff; }
.hm-stat-num small { font-size:.42em; font-style:normal; font-stretch:100%; font-weight:700; margin-left:6px; color:var(--hm-on-black); }
.hm-stat-cap { margin-top:8px; font-size:17px; color:var(--hm-on-black); max-width:34ch; }

/* Pricing */
.hm-price-wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:56px; align-items:center; }
.hm-price { border:1px solid var(--hm-line); border-radius:14px; box-shadow:var(--hm-shadow); background:#fff; overflow:hidden; }
.hm-price-top { padding:32px 32px 26px; border-bottom:1px solid var(--hm-line); position:relative; }
.hm-price-top::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--hm-logo-red), var(--hm-logo-red-dark)); }
.hm-price-name { font-family:var(--hm-display); font-weight:700; font-stretch:110%; font-size:20px; }
.hm-price-amount { display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.hm-price-amount b { font-family:var(--hm-display); font-weight:800; font-stretch:118%; font-style:italic; font-size:68px; line-height:1; letter-spacing:-.02em; }
.hm-price-amount span { font-size:19px; color:var(--hm-muted); }
.hm-price-note { margin:10px 0 0; color:var(--hm-muted); font-size:16.5px; }
.hm-price-list { list-style:none; margin:0; padding:24px 32px 30px; display:flex; flex-direction:column; gap:12px; }
.hm-price-list li { display:flex; gap:12px; align-items:flex-start; font-size:17.5px; color:var(--hm-body); }
.hm-price-list .material-icons { color:var(--hm-green); font-size:22px; margin-top:2px; }
.hm-price-foot { padding:0 32px 32px; }
.hm-terms { list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.hm-terms li { display:flex; gap:12px; font-size:17.5px; color:var(--hm-body); }
.hm-terms .material-icons { color:var(--hm-ink); font-size:22px; margin-top:2px; }

/* FAQ */
.hm-faq details { border-bottom:1px solid var(--hm-line); }
.hm-faq details:first-child { border-top:1px solid var(--hm-line); }
.hm-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:22px 2px; font-weight:700; font-size:19px; color:var(--hm-ink); }
.hm-faq summary::-webkit-details-marker { display:none; }
.hm-faq summary .material-icons { font-size:24px; color:var(--hm-muted); transition:transform .2s var(--hm-ease); flex:none; }
.hm-faq details[open] summary .material-icons { transform:rotate(45deg); color:var(--hm-red); }
.hm-faq-a { padding:0 2px 24px; color:var(--hm-body); font-size:17.5px; max-width:68ch; }

/* Final call to action */
.hm-cta { text-align:center; }
.hm-cta p { margin:18px auto 0; max-width:56ch; font-size:19px; color:var(--hm-body); }
.hm-cta .hm-ctarow { margin-top:32px; }
.hm-cta-phones { font-size:17px !important; color:var(--hm-muted) !important; }

/* Screenshot frames */
.hm-frame { position:relative; margin:0; background:#fff; border:1px solid var(--hm-line); border-radius:var(--hm-radius); box-shadow:var(--hm-shadow); overflow:hidden; }
.hm-frame.is-lg { box-shadow:var(--hm-shadow-lg); }
.hm-frame-bar { display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:var(--hm-subtle); border-bottom:1px solid var(--hm-line); }
.hm-frame-bar i { width:10px; height:10px; border-radius:50%; background:var(--hm-line-strong); display:block; }
.hm-frame-url { flex:0 1 320px; margin:0 auto; height:22px; border-radius:5px; background:#fff; border:1px solid var(--hm-line); font-size:12.5px; color:var(--hm-muted); display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; overflow:hidden; }
.hm-frame-url .material-icons { font-size:13px; color:var(--hm-green); }
.hm-frame img { display:block; width:100%; height:auto; }
.hm-zoom { cursor:zoom-in; }
.hm-zoom-hint { position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#fff; background:rgba(20,24,30,.78); padding:6px 10px; border-radius:6px; opacity:0; transform:translateY(4px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; }
.hm-zoom:hover .hm-zoom-hint, .hm-zoom:focus-visible .hm-zoom-hint { opacity:1; transform:none; }
.hm-js .hm-reveal { opacity:0; transform:translateY(18px); transition:opacity .7s var(--hm-ease), transform .7s var(--hm-ease); }
.hm-js .hm-reveal.is-visible { opacity:1; transform:none; }
.hm-lightbox { position:fixed; inset:0; z-index:100; background:rgba(10,12,15,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px; opacity:0; transition:opacity .2s ease; }
.hm-lightbox.is-open { opacity:1; }
.hm-lightbox img { max-width:100%; max-height:calc(100vh - 110px); border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.hm .hm-lightbox-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:transparent; color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hm-lightbox-cap { margin-top:14px; color:#d9dde3; font-size:15px; text-align:center; max-width:80ch; }

/* Features page */
.hm-pagehead { padding:72px 0 0; }
.hm-subnav { position:sticky; top:var(--hm-header-h); z-index:30; background:rgba(255,255,255,.95); border-top:1px solid var(--hm-line); border-bottom:1px solid var(--hm-line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hm-subnav-inner { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-top:8px; padding-bottom:8px; }
.hm-subnav-inner::-webkit-scrollbar { display:none; }
.hm .hm-subnav a { flex:none; font-size:16px; font-weight:600; color:var(--hm-muted); padding:8px 12px; border-radius:var(--hm-radius-sm); white-space:nowrap; }
.hm .hm-subnav a:hover { color:var(--hm-ink); background:var(--hm-subtle); }
.hm .hm-subnav a.is-current { color:var(--hm-ink); background:var(--hm-bg); }
.hm-feature { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:56px; align-items:center; padding:88px 0; border-bottom:1px solid var(--hm-line); scroll-margin-top:calc(var(--hm-header-h) + 60px); }
.hm-feature:last-child { border-bottom:0; }
.hm-feature.is-flip .hm-feature-copy { order:2; }
.hm-feature-label { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; color:var(--hm-ink); margin-bottom:14px; }
.hm-feature-label i { width:10px; height:10px; border-radius:50%; background:var(--c, var(--hm-red)); display:block; }
.hm-feature p { color:var(--hm-body); font-size:18px; margin:16px 0 0; }
.hm-list { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hm-list li { display:flex; gap:10px; align-items:flex-start; font-size:17px; color:var(--hm-body); }
.hm-list .material-icons { font-size:20px; color:var(--hm-red); margin-top:3px; }

/* Demo form */
.hm-demo { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:56px; align-items:start; }
.hm-demo-points { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hm-demo-points li { display:flex; gap:12px; font-size:17.5px; color:var(--hm-body); }
.hm-demo-points .material-icons { color:var(--hm-red); font-size:22px; margin-top:2px; }
.hm-demo-phone { margin-top:26px; font-size:17.5px; color:var(--hm-muted); }
.hm-demo-phone a { font-weight:700; }
.hm-formcard { background:#fff; border:1px solid var(--hm-line); border-radius:14px; box-shadow:var(--hm-shadow); padding:32px; scroll-margin-top:calc(var(--hm-header-h) + 20px); }
.hm-formcard h3 { font-family:var(--hm-display); font-weight:800; font-stretch:112%; font-size:26px; margin:0; }
.hm-formcard > p { margin:8px 0 0; color:var(--hm-muted); font-size:17px; }
.hm-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 16px; margin-top:24px; }
.hm-form > .hm-alert, .hm-form > .hm-btn, .hm-form > .hm-formnote { grid-column:1 / -1; }
.hm-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.hm-field.is-wide { grid-column:1 / -1; }
.hm-label { font-size:15.5px; font-weight:700; color:var(--hm-ink); }
.hm-label small { font-weight:400; color:var(--hm-muted); font-size:14px; }
.hm .hm-input, .hm .hm-textarea { width:100%; font:inherit; font-size:17px; color:var(--hm-ink); background:#fff; border:1px solid var(--hm-line-strong); border-radius:var(--hm-radius-sm); padding:12px 13px; transition:border-color .15s ease, box-shadow .15s ease; }
.hm .hm-textarea { resize:vertical; min-height:96px; }
.hm .hm-input:focus, .hm .hm-textarea:focus { outline:none; border-color:var(--hm-ink); box-shadow:0 0 0 3px rgba(20,24,30,.10); }
.hm-field.has-error .hm-input { border-color:var(--hm-red); }
.hm-field-err { font-size:14.5px; color:var(--hm-red-dark); }
.hm-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
/* The reCAPTCHA badge is hidden; the demo form carries the disclosure Google requires instead. */
.grecaptcha-badge { visibility:hidden; }
.hm-formnote { margin:2px 0 0; font-size:14.5px; color:var(--hm-muted); }
.hm-alert { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--hm-radius-sm); font-size:16.5px; line-height:1.5; }
.hm-alert .material-icons { font-size:22px; margin-top:1px; }
.hm-alert.is-ok { background:var(--hm-green-bg); color:#0c5a2a; }
.hm-alert.is-err { background:var(--hm-red-wash); color:#8a1a06; }

/* About / contact / legal */
.hm-contacts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
.hm-contact { border:1px solid var(--hm-line); border-radius:var(--hm-radius); padding:26px; background:#fff; }
.hm-contact.is-black { background:var(--hm-black); border-color:var(--hm-black); color:#fff; }
.hm-contact .material-icons { font-size:26px; color:var(--hm-red); }
.hm-contact-title { margin-top:12px; font-weight:700; font-size:19px; }
.hm-contact-body { margin-top:6px; color:var(--hm-body); font-size:16.5px; }
.hm-contact.is-black .hm-contact-body { color:var(--hm-on-black); }
.hm .hm-contact-key { display:inline-block; margin-top:14px; font-family:var(--hm-display); font-weight:800; font-stretch:112%; font-size:22px; color:var(--hm-ink); }
.hm .hm-contact.is-black .hm-contact-key { color:#fff; }
.hm-prose p, .hm-prose li { color:var(--hm-body); font-size:18px; }
.hm-prose h2 { font-family:var(--hm-display); font-weight:800; font-stretch:110%; font-size:26px; margin:48px 0 0; }
.hm-prose ul { padding-left:22px; }
.hm-timeline { list-style:none; margin:36px 0 0; padding:0; border-left:2px solid var(--hm-line); }
.hm-timeline li { position:relative; padding:0 0 26px 26px; }
.hm-timeline li::before { content:""; position:absolute; left:-7px; top:8px; width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--hm-red); }
.hm-timeline b { display:block; font-family:var(--hm-display); font-weight:800; font-stretch:112%; font-style:italic; font-size:22px; color:var(--hm-ink); }

/* -------------------------------------------------------------- footer ---- */

.hm-footer { background:var(--hm-black); color:var(--hm-on-black); padding:72px 0 0; font-size:16.5px; }
.hm-footer-cols { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:40px; padding-bottom:56px; }
.hm-footer-logo { height:34px; width:auto; display:block; }
.hm-footer-about { margin-top:18px; max-width:36ch; line-height:1.55; }
.hm-footer-h { color:#fff; font-weight:700; margin-bottom:12px; }
.hm-footer-col { display:flex; flex-direction:column; gap:9px; }
.hm .hm-footer a { color:var(--hm-on-black); }
.hm .hm-footer a:hover { color:#fff; }
.hm-footer-legal { border-top:1px solid rgba(255,255,255,.14); }
.hm-footer-legal .hm-wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:20px; padding-bottom:24px; font-size:15px; }

/* ---------------------------------------------------------- responsive ---- */

@media (max-width:1080px) {
  .hm-nav { display:none; }
  .hm-menu { display:block; }
  .hm .hm-header-inner > .hm-btn { display:inline-flex; margin-left:auto; }
  .hm-hero { grid-template-columns:1fr; gap:44px; padding-top:40px; }
  .hm-first { min-height:0; }
  .hm-quote, .hm-price-wrap, .hm-demo { grid-template-columns:1fr; gap:44px; }
  .hm-stats { border-left:0; padding-left:0; flex-direction:row; flex-wrap:wrap; gap:28px 48px; }
  .hm-feature { grid-template-columns:1fr; gap:32px; padding:64px 0; }
  .hm-feature.is-flip .hm-feature-copy { order:0; }
  .hm-footer-cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .hm-steps, .hm-grid, .hm-contacts { grid-template-columns:1fr; }
  .hm-section { padding:72px 0; }
  .hm-band { padding:96px 0 72px; clip-path:polygon(0 28px, 100% 0, 100% 100%, 0 100%); margin-top:-28px; }
  .hm-facts-inner { justify-content:flex-start; }
}
@media (max-width:560px) {
  body.hm { font-size:17px; }
  .hm-wrap { padding-left:18px; padding-right:18px; }
  .hm-brand img { height:24px; }
  .hm .hm-header-inner > .hm-btn { display:none; }
  .hm-header-inner { gap:12px; justify-content:space-between; }
  .hm-menu { margin-left:auto; }
  .hm-form { grid-template-columns:1fr; }
  .hm-formcard { padding:22px; }
  .hm-app-cols, .hm-app-row { grid-template-columns:10px minmax(0, 1fr) 46px 40px; gap:8px; }
  .hm-app-cols span:nth-child(2), .hm-app-from, .hm-app-act em:not(.is-view) { display:none; }
  .hm-app-logo { display:none; }
  .hm-app-top .hm-app-tabs span:nth-child(n+5) { display:none; }
  .hm-footer-cols { grid-template-columns:1fr; }
  .hm-price-amount b { font-size:56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm *, .hm *::before, .hm *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ------------------------------------------------------------- sign-in ---- */

body.lg-body { margin:0; }
.lg-wrap { min-height:100vh; min-height:100svh; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.lg-side { position:relative; background:var(--hm-black); color:#fff; padding:44px 56px; display:flex; flex-direction:column; overflow:hidden; }
.lg-side::before { content:""; position:absolute; right:-120px; bottom:-140px; width:520px; height:520px; background:url(/assets/img/marketing/hotlines-mark.png) center / contain no-repeat; opacity:.08; transform:rotate(-8deg); pointer-events:none; }
.lg-side::after { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg, var(--hm-logo-red), var(--hm-logo-red-dark)); }
.lg-brand img { height:34px; width:auto; display:block; }
.lg-pitch { margin:auto 0; max-width:30em; position:relative; }
.lg-h1 { font-family:var(--hm-display); font-weight:800; font-stretch:118%; font-style:italic; font-size:clamp(34px, 3.4vw, 50px); line-height:1.02; letter-spacing:-.02em; }
.lg-lede { margin:18px 0 0; font-size:19px; color:var(--hm-on-black); }
.lg-points { margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.lg-point { display:flex; gap:12px; font-size:17px; color:#e6e8ec; }
.lg-point i { width:10px; height:10px; border-radius:50%; background:var(--c); margin-top:8px; flex:none; }
.lg-foot { position:relative; font-size:15px; color:var(--hm-on-black); }
.hm .lg-foot a { color:#fff; font-weight:600; }
.lg-panel { display:flex; align-items:center; justify-content:center; padding:40px 32px; background:#fff; }
.lg-form { width:100%; max-width:400px; }
.lg-mobile-logo { display:none; height:26px; width:auto; margin-bottom:28px; }
.lg-title { font-family:var(--hm-display); font-weight:800; font-stretch:112%; font-size:38px; line-height:1.05; margin:0; }
.lg-welcome { margin:8px 0 26px; color:var(--hm-muted); font-size:17.5px; }
.lg-fields { display:flex; flex-direction:column; gap:18px; }
.lg-label-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.hm .lg-label-row a { font-size:15px; font-weight:600; }
.lg-reset { display:none; margin-top:10px; background:var(--hm-subtle); color:var(--hm-ink); border:1px solid var(--hm-line); }
.lg-reset:target { display:flex; }
.lg-or { display:flex; align-items:center; gap:12px; margin:30px 0 16px; color:var(--hm-muted); font-size:15.5px; white-space:nowrap; }
.lg-or-rule { flex:1; height:1px; background:var(--hm-line); }
.hm .lg-back { display:inline-flex; align-items:center; gap:6px; margin-top:22px; font-size:16px; font-weight:600; color:var(--hm-muted); }
.hm .lg-back:hover { color:var(--hm-ink); }
@media (max-width:900px) {
  .lg-wrap { grid-template-columns:1fr; }
  .lg-side { display:none; }
  .lg-panel { align-items:flex-start; padding-top:40px; }
  .lg-mobile-logo { display:block; }
}