/* ===== NATIVE SHIM (pre) : container neutralization ===== */
/* converted divs were block-flow originally; restore that as the default.
   Original class rules (.hero-grid{display:grid}, .cta-row{display:flex})
   come later in this stylesheet and win by source order. ".ava-fx" marks a
   container native_container_style() has fully converted to real Elementor
   settings (flex/grid layout, padding, margin) - excluded here so its own
   native output isn't neutralized right back to the pre-conversion default.
   Empirically confirmed the display/flex/justify/align/wrap/gap/grid-columns
   properties actually win over Elementor's own per-widget CSS even WITHOUT
   this exclusion (they're set as direct properties, not consumed through a
   var Elementor's own low-specificity base rule reads) - padding/margin are
   the one exception that genuinely needed this (verified: native padding
   silently rendered as 0 until excluded here). */
.e-con:not(.ava-fx) { display: block; }
/* Elementor reads flex props through vars on .e-con.e-flex (0,2,0), which
   outranks original single-class rules; neutralize at the var level to the
   CSS initial values so original class rules decide the layout */
.e-con.e-flex:not(.ava-fx) { --flex-direction: row; --flex-wrap: nowrap;
                --justify-content: normal; --align-items: normal; }
.e-con:not(.ava-fx) {
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --padding-top: 0px; --padding-bottom: 0px;
  --padding-left: 0px; --padding-right: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
  --padding-block-start: 0px; --padding-block-end: 0px;
  --margin-top: 0px; --margin-bottom: 0px;
  --margin-left: 0px; --margin-right: 0px;
  --margin-inline-start: 0px; --margin-inline-end: 0px;
  --margin-block-start: 0px; --margin-block-end: 0px;
}
/* Elementor bakes its kit "Text" global color onto EVERY text-editor
   widget wrapper (.elementor-widget-text-editor{color:var(--e-global-color-text)}),
   which wins over pure inheritance for any bare element (a <span> with no
   class of its own) that's supposed to inherit its color from a dark/colored
   ancestor section. Elements with their OWN explicit color rule (.tonight-sub
   etc) are unaffected since that rule comes later in this file and wins by
   source order; this only restores the fallback for elements that had none. */
.elementor-widget-text-editor { color: inherit; }
/* Elementor/WordPress auto-wraps bare text-editor content with no leading
   block tag in a <p> (wpautop-style processing), and that auto-inserted <p>
   carries the kit's own default margin-bottom - completely separate from,
   and in addition to, the real margin we already bake natively via
   native_spacing()'s _margin setting on the widget wrapper itself. Confirmed
   via direct measurement: the ROI calculator's title row grew 15px from
   exactly this (a 14.4px phantom margin on an auto-wrapped single-line <p>
   inside a flex row, where margins don't collapse). Neutralize it - any
   spacing we actually want is already handled by the native setting. */
.elementor-widget-text-editor p { margin: 0; }


  :root {
  --swoosh-g: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-1dfcb847042c.webp");
  --swoosh: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-f93ce47326c5.webp");
  --stats-bg: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-2739809f008c.webp");
  --cta-bg: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-7da6ff0fc80f.webp");
    --brand: #87EA5C;
    --brand-deep: #4FB82A;
    --brand-text: #2D7A14;
    --brand-soft: #EDFBE0;
    --brand-ink: #0E2A03;
    --paper: #FFFFFF;
    --paper-2: #F7F9FA;
    --ink: #0A0B0A;
    --ink-2: #2A2C29;
    --muted: #6B6E68;
    --line: #E2E2DA;
    --alert: #E25A1C;       
    --alert-soft: #FFE6D6;
    --warn: #D69A2B;        
    --warn-soft: #FFF1D1;
    --sans: 'Sora', system-ui, -apple-system, sans-serif;
    --mono: 'Sora', system-ui, -apple-system, sans-serif;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 84px; }
  @media (max-width: 1024px) { html { scroll-padding-top: 128px; } }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11";
  }

  ::selection { background: var(--brand); color: var(--ink); }
  a { color: inherit; text-decoration: none; }

  .container { max-width: 1240px; margin: 0 auto; padding: 0 100px; }
  @media (max-width: 1024px) { .container { padding: 0 48px; } }
  @media (max-width: 600px) { .container { padding: 0 24px; } }

  
  .topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
  }
  html.nav-locked, html.nav-locked body { overflow: hidden; }
  .topbar.nav-open { position: fixed; top: 0; left: 0; right: 0; }
  .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
  .logo .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
  .logo .for { font-family: var(--mono); font-weight: 400; color: var(--muted); font-size: 12px; letter-spacing: 0; }
  .top-right { display: flex; align-items: center; gap: 20px; }
  .try-line { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
  .try-line .pulse {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand-deep);
    box-shadow: 0 0 0 0 rgba(79,184,42,0.6);
    animation: pulse 2.2s infinite;
  }
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(79,184,42,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(79,184,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(79,184,42,0); }
  }
  @keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(226,90,28,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(226,90,28,0); }
    100% { box-shadow: 0 0 0 0 rgba(226,90,28,0); }
  }
  .try-line a { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }

  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    border-radius: 999px;
    font-family: var(--sans); font-weight: 500; font-size: 14px;
    letter-spacing: -0.005em;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  }
  .btn-primary { background: var(--ink); color: var(--paper); }
  .btn-primary:hover { background: #262626; transform: translateY(-1px); }
  .btn-brand { background: var(--brand); color: var(--ink); border-color: var(--brand); }
  .btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--paper); }
  .btn-lg { padding: 15px 24px; font-size: 15px; }
  .arrow { display: inline-block; transition: transform 0.2s ease; }
  .btn:hover .arrow { transform: translateX(3px); }
  @media (max-width: 760px) { .top-right .try-line { display: none; } }

  
  .hero { padding: 88px 0 56px; position: relative; overflow: hidden; }
  @media (max-width: 600px) { .hero { padding-top: 44px; } }
  .eyebrow {
    display: inline-flex; align-items: center;
    font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink);
    margin-bottom: 32px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: none;
  }

  .hero-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: start;
  }
  @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

  h1.headline {
    font-family: var(--sans); font-weight: 400;
    font-size: clamp(36px, 4.8vw, 64px);
    line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 28px;
  }
  h1.headline .your { position: relative; color: var(--ink); display: inline; font-style: normal; }
  h1.headline .your::after { content: none; }
  h1.headline .small {
    display: block; font-size: 0.6em; color: var(--muted);
    font-weight: 400; letter-spacing: -0.025em; margin-top: 14px;
  }
  h1.headline .small .crossed {
    color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); text-decoration-thickness: 1.5px;
  }

  .sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 560px; margin-bottom: 36px; }
  .sub strong { color: var(--ink); font-weight: 500; }

  .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
  @media (max-width: 600px) {
    .cta-row { flex-direction: column; align-items: stretch; }
    .cta-row .btn { width: 100%; justify-content: center; }
  }

  .trust-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    padding-top: 30px; border-top: 1px solid var(--line); margin-top: 52px; }
  @media (max-width: 960px) { .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
  .trust-item { display: flex; flex-direction: column; gap: 6px; }
  .trust-num { font-weight: 500; font-size: 28px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .trust-num .accent { color: var(--ink); }
  .trust-label {
    font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
  }

  
  .triage-card {
    background: var(--ink); color: var(--paper);
    border-radius: 0; padding: 22px;
    position: relative;
    box-shadow: 18px 18px 0 -2px #D6DDE2;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .triage-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 18px;
  }
  .triage-incoming {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand);
    font-weight: 500;
  }
  .triage-incoming .pulse-light {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
    animation: pulse 1.6s infinite;
  }
  .triage-time { font-family: var(--mono); font-size: 12px; color: rgba(250,250,247,0.55); }

  .severity-banner {
    display: flex; align-items: center; gap: 10px;
    background: rgba(135,234,92,0.12);
    border: 1px solid rgba(135,234,92,0.4);
    border-radius: 0;
    padding: 10px 14px;
    margin-bottom: 16px;
  }
  .severity-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12px;
  }
  .severity-label {
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand); font-weight: 500;
  }
  .severity-label .cat { color: rgba(250,250,247,0.85); font-weight: 500; margin-left: 8px; }

  .caller-block { margin-bottom: 14px; }
  .caller-label {
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(250,250,247,0.5);
    margin-bottom: 4px;
  }
  .caller-name {
    font-size: 14px; color: var(--paper);
    font-weight: 500;
  }
  .caller-quote {
    margin-top: 8px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid rgba(255,255,255,0.2);
    border-radius: 0;
    font-size: 13.5px;
    color: rgba(250,250,247,0.85);
    line-height: 1.45;
    font-style: italic;
  }

  .triage-checks {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 0;
    margin: 14px 0;
    border-top: 1px dashed rgba(255,255,255,0.13);
    border-bottom: 1px dashed rgba(255,255,255,0.13);
  }
  .check {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--paper);
  }
  .check-icon {
    color: var(--brand);
    font-weight: 700;
    font-family: var(--mono);
    font-size: 13px;
  }
  .check-label { color: rgba(250,250,247,0.9); }
  .check-detail { color: rgba(250,250,247,0.6); font-family: var(--mono); font-size: 12px; margin-left: auto; }

  .triage-actions { display: flex; flex-direction: column; gap: 8px; }
  .action {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: rgba(135,234,92,0.08);
    border: 1px solid rgba(135,234,92,0.25);
    border-radius: 0;
    font-size: 13px;
  }
  .action-arrow { color: var(--brand-text); font-weight: 700; }
  .action-text { color: var(--paper); font-weight: 500; }
  .action-text .accent { color: var(--brand-text); }
  .action-tag {
    margin-left: auto;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(135,234,92,0.85);
  }

  .triage-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: var(--mono); font-size: 12px;
    color: rgba(250,250,247,0.55);
  }
  .triage-foot .tonight { color: var(--brand); font-weight: 500; }


  
  .surge-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .surge-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--muted);
    border-radius: 4px;
  }
  .surge-item.live { border-left-color: var(--brand); }
  .surge-item.booked { border-left-color: var(--brand-deep); }
  .surge-item.routed { border-left-color: rgba(135,234,92,0.5); }
  .surge-tag {
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: rgba(250,250,247,0.65); font-weight: 500;
  }
  .surge-item.live .surge-tag { color: var(--brand-text); }
  .surge-item.booked .surge-tag { color: var(--brand-text); }
  .surge-detail { font-size: 12.5px; color: rgba(250,250,247,0.85); line-height: 1.35; }

  
  .marquee-section {
    padding: 36px 0 28px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper-2);
  }
  .marquee-label {
    text-align: center;
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink); margin-bottom: 22px;
  }
  .marquee {
    display: flex; gap: 48px; flex-wrap: wrap; justify-content: center; align-items: center;
  }
  .marquee span {
    font-weight: 500; font-size: 17px;
    color: var(--ink-2); opacity: 0.78;
    letter-spacing: -0.015em;
  }

  
  section { padding: 100px 0; }
  .section-eyebrow {
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: var(--ink);
    margin-bottom: 18px; display: inline-block;
  }
  .section-title {
    font-weight: 400; font-size: clamp(24px, 3.7vw, 48px);
    line-height: 1.02; letter-spacing: -0.035em; color: var(--ink);
    margin-bottom: 20px; max-width: 820px;
  }
  .section-title .underlined { color: #4FB82A;
    padding: 0 2px;
    font-style: normal;
  }
  .section-sub {
    font-size: 18px; color: var(--ink-2); max-width: 640px;
    line-height: 1.55; margin-bottom: 56px;
  }

  
  .problem {
    background-color: var(--ink); background-image: var(--stats-bg); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff;
    padding: 100px 0; position: relative; overflow: hidden;
  }
  .problem h2 {
    font-weight: 400; font-size: clamp(24px, 3.7vw, 48px);
    line-height: 1.2; letter-spacing: -0.035em;
    margin-bottom: 14px; text-align: center;
    max-width: 820px; margin-left: auto; margin-right: auto;
  }
  .problem h2 .accent { color: var(--brand); }
  .problem-sub {
    text-align: center; color: rgba(255,255,255,0.7);
    font-size: 17px; max-width: 620px; margin: 0 auto 56px;
  }
  .problem-sources {
    text-align: center; margin-top: 32px;
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,0.4); letter-spacing: 0.04em;
  }
  .stat-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: #3A3A3A;
    border: 1px solid #3A3A3A;
  }
  @media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; } }
  .stat-cell {
    background: var(--ink); padding: 36px 28px; text-align: left;
  }
  .stat-cell-tag {
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: rgba(255,255,255,0.9); margin-bottom: 14px;
  }
  .stat-cell-num {
    font-weight: 500; font-size: 76px; line-height: 0.95;
    letter-spacing: -0.045em; color: #fff; margin-bottom: 18px;
  }
  .stat-cell-num .pct, .stat-cell-num .x, .stat-cell-num .plus { color: #fff; }
  .stat-cell-num .small { font-size: 0.55em; vertical-align: top; margin-left: 2px; }
  .stat-cell-num .currency { font-size: 0.55em; vertical-align: top; opacity: 0.85; }
  .stat-cell-label { font-size: 15px; color: rgba(255,255,255,0.85); line-height: 1.45; }

  
  .how { padding: 110px 0; }
  .how-header {
    position: sticky;
    top: 64px;
    z-index: 5;
    padding-top: 24px;
    padding-bottom: 4px;
  }
  .how-header::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -20px; right: -20px;
    background: var(--paper);
    z-index: -1;
  }
  @media (max-width: 820px) { .how-header { position: static; padding-top: 18px; } .how-header::after { display: none; } }
  .how-steps { margin-top: 48px; display: flex; flex-direction: column; gap: 26px; }
  .how-step {
    display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center;
  }
  .how-viz {
    position: relative; background: var(--paper-2); border: 1px solid var(--line);
    border-radius: 4px; padding: 44px 40px; min-height: 300px;
    display: flex; align-items: center; justify-content: center;
  }
  .cx { position: absolute; width: 10px; height: 10px; color: var(--muted); opacity: .55; }
  .cx::before, .cx::after { content:''; position:absolute; background: currentColor; }
  .cx::before { left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
  .cx::after { top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
  .cx-tl{ top:-5px; left:-5px; } .cx-tr{ top:-5px; right:-5px; }
  .cx-bl{ bottom:-5px; left:-5px; } .cx-br{ bottom:-5px; right:-5px; }
  .how-phase {
    font-family: var(--mono); font-size: 12px; color: var(--brand-text);
    letter-spacing: 0.06em; font-weight: 500; margin-bottom: 14px;
    display:flex; align-items:center; gap:9px; text-transform: uppercase;
  }
  .how-phase::before { content:''; width:8px; height:8px; background: var(--brand); border-radius:2px; }
  .how-step-title { font-weight:400; font-size:24px; letter-spacing:-0.02em; margin-bottom:12px; color:var(--ink); line-height:1.18; }
  .how-step-body { color: var(--ink-2); font-size:15px; line-height:1.62; max-width: 44ch; }

  
  .viz-intake { width:100%; max-width:380px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:2px 16px; }
  .vi-row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
  .vi-row:last-child { border-bottom:none; }
  .vi-ico { color:var(--ink-2); display:flex; flex:0 0 auto; }
  .vi-ico svg { width:18px; height:18px; }
  .vi-label { font-size:13px; color:var(--ink); font-weight:500; flex:0 0 96px; }
  .vi-field { flex:1; height:22px; background:var(--paper-2); border-radius:5px; }

  .how-svg { width:100%; height:auto; display:block; margin:0 auto; }

  
  .viz-gantt { width:100%; max-width:400px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px 18px; }
  .vg-head { font-size:14px; font-weight:400; color:var(--ink); margin-bottom:14px; }
  .vg-cols { display:grid; grid-template-columns:74px repeat(7,1fr); font-family:var(--mono); font-size:9.5px; color:var(--muted); letter-spacing:0.02em; padding-bottom:7px; border-bottom:1px solid var(--line); margin-bottom:9px; }
  .vg-cols span { text-align:center; } .vg-cols span:first-child { text-align:left; }
  .vg-row { display:grid; grid-template-columns:74px 1fr; align-items:center; gap:10px; margin-bottom:10px; }
  .vg-row:last-child { margin-bottom:0; }
  .vg-task { font-size:11.5px; color:var(--ink-2); }
  .vg-track { height:14px; border-radius:4px; position:relative; background:var(--paper-2); }
  .vg-bar { position:absolute; left:0; top:0; height:100%; border-radius:4px; width:var(--w); background:#C9CBC4; }
  .vg-row.go .vg-bar { background:var(--brand); }

  @media (max-width: 820px) {
    .how-steps { gap: 44px; }
    .how-step { grid-template-columns: 1fr; gap: 30px; }
    .how-viz { min-height: 0; padding: 32px 22px; }
  }
  .live-badge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 28px; padding: 0;
    background: none;
    border: none;
    border-radius: 999px;
    font-family: var(--mono); font-size: 14px;
    color: var(--ink);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
  }

  
  .features {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .feature-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); margin-top: 8px;
    border: 1px solid var(--line);
  }
  @media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } }
  .feature {
    background: var(--paper-2); padding: 36px 32px;
    transition: background 0.2s ease;
  }
  .feature:hover { background: var(--paper); }
  .feature-tag {
    display: inline-block;
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink); background: none;
    border: none;
    padding: 0; border-radius: 999px;
    margin-bottom: 18px; font-weight: 500;
  }
  .feature h3 {
    font-weight: 400; font-size: 23px; letter-spacing: -0.025em;
    line-height: 1.2; margin-bottom: 12px; color: var(--ink);
  }
  .feature p { color: var(--ink-2); font-size: 15px; line-height: 1.55; }

  
  .integrations { text-align: center; padding: 100px 0; }
  .int-title {
    font-weight: 400; font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 16px;
  }
  .int-title .accent { color: var(--brand-deep); }
  .int-sub {
    color: var(--ink-2); margin-bottom: 48px;
    max-width: 580px; margin-left: auto; margin-right: auto;
    font-size: 17px;
  }
  .int-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line);
    max-width: 1000px; margin: 0 auto;
  }
  @media (max-width: 760px) { .int-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 460px) { .int-grid { grid-template-columns: 1fr; } }
  .int-cell {
    text-align: left;
    background: var(--paper);
    padding: 30px 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .int-cell:hover { background: var(--paper-2); color: var(--ink); }
  .int-ico { color: #404040; margin-bottom: 16px; line-height: 0; transition: color 0.2s ease; }
  .int-ico svg { width: 26px; height: 26px; display: block; }
  .int-cell:hover .int-ico { color: #404040; }
  .int-name { font-weight: 500; font-size: 17px; letter-spacing: -0.015em; line-height: 1.25; }
  .int-cat {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    margin-top: 6px;
  }
  .int-foot { margin-top: 30px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .int-foot a { color: var(--brand-text); border-bottom: 1px solid var(--brand-text); }

  
  .proof {
    background-color: #060e04; background-image: linear-gradient(rgba(6,14,4,0.52) 0%, rgba(6,14,4,0.34) 100%), var(--swoosh-g); background-size: cover; background-position: center; background-repeat: no-repeat;
    color: #fff;
    padding: 110px 0; position: relative; overflow: hidden;
  }
  .proof::before { display: none;
    content: ''; position: absolute; inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(14,42,3,0.03) 0 1px, transparent 1px 16px);
    pointer-events: none;
  }
  .proof-head {
    max-width: 760px; margin: 0 auto 56px;
    text-align: center; position: relative;
  }
  .proof-eyebrow {
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.16em;
    color: rgba(255,255,255,0.9); opacity: 0.7;
    margin-bottom: 18px; display: inline-block;
  }
  .proof-title {color: #fff; 
    font-weight: 400; font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.02; letter-spacing: -0.035em;
    margin-bottom: 16px;
  }
  .proof-sub {
    font-size: 17px; line-height: 1.55;
    color: rgba(255,255,255,0.78); opacity: 0.82;
    max-width: 600px; margin: 0 auto;
  }

  .timeline-card {
    max-width: 900px; margin: 0 auto;
    background: var(--ink); color: #fff;
    border-radius: 0; padding: 36px;
    box-shadow: 0 24px 50px -20px rgba(0,0,0,0.35);
    position: relative;
  }
  @media (max-width: 760px) { .timeline-card { padding: 24px; } }

  .timeline-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px; margin-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,0.13);
  }
  .timeline-head-title {
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--brand-text);
    display: flex; align-items: center; gap: 8px;
    font-weight: 500;
  }
  .timeline-head-title::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex-shrink: 0;
  }
  .timeline-head-source { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.5); }

  
  .chart-area {
    display: flex; align-items: flex-end;
    height: 200px;
    gap: 4px;
    padding: 0 4px;
    position: relative;
    margin-bottom: 8px;
  }
  .bar {
    flex: 1;
    background: rgba(135,234,92,0.5);
    border-radius: 2px 2px 0 0;
    position: relative;
    transition: background 0.2s ease;
    min-height: 4px;
  }
  .bar.emergency { background: rgba(226,90,28,0.7); }
  .bar.afterhours { background: rgba(214,154,43,0.55); }
  .bar:hover { background: var(--brand); }
  .bar.emergency:hover { background: var(--alert); }
  .bar.afterhours:hover { background: var(--warn); }

  .chart-axis {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,0.4);
    padding: 8px 4px 0;
    border-top: 1px solid rgba(255,255,255,0.13);
    letter-spacing: 0.04em;
  }
  .axis-label { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,0.35); }
  .axis-marker {
    text-align: center;
    flex: 1;
    min-width: 0;
  }

  .timeline-legend {
    display: flex; gap: 24px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.13);
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,0.7); letter-spacing: 0.02em;
  }
  .legend-swatch {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .legend-swatch .sq {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 2px;
  }
  .legend-swatch.routine .sq { background: rgba(135,234,92,0.7); }
  .legend-swatch.afterhours .sq { background: rgba(214,154,43,0.7); }
  .legend-swatch.emergency .sq { background: rgba(226,90,28,0.85); }

  .timeline-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin-top: 28px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.13);
  }
  @media (max-width: 640px) { .timeline-stats { grid-template-columns: 1fr; gap: 16px; } }
  .timeline-stat-cell {
    display: flex; flex-direction: column; gap: 6px;
  }
  .timeline-stat-num {
    font-weight: 500; font-size: 32px;
    color: var(--brand);
    letter-spacing: -0.025em; line-height: 1;
  }
  .timeline-stat-num.alert { color: var(--alert); }
  .timeline-stat-label {
    font-family: var(--mono); font-size: 12px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  
  .roi {
    background: var(--paper-2);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    padding: 110px 0; position: relative; overflow: hidden;
  }
  .roi-grid {
    display: grid; grid-template-columns: 1fr 1.1fr;
    gap: 72px; align-items: center; position: relative;
  }
  @media (max-width: 960px) { .roi-grid { grid-template-columns: 1fr; gap: 48px; } }
  .roi-tool {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 0; padding: 32px;
    box-shadow: 0 24px 50px -24px rgba(0,0,0,0.12);
    position: relative;
  }
  .roi-tool-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 22px;
  }
  .roi-tool-title {
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--brand-text);
    display: flex; align-items: center; gap: 8px;
    font-weight: 400;
  }
  .roi-tool-title::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-deep); }
  .roi-tool-tag { font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); }

  .roi-input {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px dashed var(--line);
    gap: 16px;
  }
  .roi-input-label { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
  .roi-input-label .hint {
    display: block; font-family: var(--mono); font-size: 12px;
    color: var(--muted); margin-top: 3px;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .roi-input-value {
    font-family: var(--mono); font-size: 18px;
    color: var(--ink); font-weight: 500;
    background: var(--paper-2);
    padding: 6px 12px; border-radius: 0;
    border: 1px solid var(--line);
    letter-spacing: -0.01em; flex-shrink: 0;
  }
  .roi-output {
    margin-top: 26px; padding: 20px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-deep);
    border-radius: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .roi-output-label { font-size: 13px; color: var(--brand-text); line-height: 1.3; font-weight: 500; }
  .roi-output-label .small {
    display: block; font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--brand-text); opacity: 0.75;
    margin-top: 4px; font-weight: 400;
  }
  .roi-output-value {
    font-weight: 500; font-size: 38px; line-height: 1;
    letter-spacing: -0.035em; color: var(--brand-text);
    white-space: nowrap;
  }
  .roi-output-value .currency { font-size: 0.6em; vertical-align: top; margin-right: 1px; opacity: 0.85; }
  .roi-tool-foot {
    margin-top: 18px; font-family: var(--mono); font-size: 12px;
    color: var(--muted); text-align: center;
    line-height: 1.5; letter-spacing: 0.02em;
  }

  
  .tonight { padding: 110px 0; }
  .tonight-card {
    background: var(--ink); color: var(--paper);
    border-radius: 0; padding: 56px;
    position: relative; overflow: hidden;
  }
  @media (max-width: 760px) { .tonight-card { padding: 40px 28px; } }
  .tonight-card::before {
    content: ''; position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(226,90,28,0.20) 0%, transparent 70%);
    pointer-events: none;
  }
  .tonight-grid {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 56px; align-items: start; position: relative; z-index: 1;
  }
  @media (max-width: 860px) { .tonight-grid { grid-template-columns: 1fr; gap: 32px; } }
  .tonight-eyebrow {
    font-family: var(--mono); font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--alert); margin-bottom: 18px; display: inline-block;
    font-weight: 500;
  }
  .tonight-title {
    font-weight: 400; font-size: clamp(22px, 3vw, 36px);
    line-height: 1.2; letter-spacing: -0.035em;
    margin-bottom: 20px; color: var(--paper);
  }
  .tonight-title .underlined {
    color: #4FB82A; padding: 0 4px;
    font-style: normal;
  }
  .tonight-sub { color: rgba(250,250,247,0.78); font-size: 17px; margin-bottom: 32px; line-height: 1.55; }

  .scenario-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    padding: 24px;
    margin-bottom: 16px;
    position: relative;
  }
  .scenario-block.bad { border-left: 3px solid var(--alert); }
  .scenario-block.good { border-left: 3px solid var(--brand); }
  .scenario-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 14px; font-weight: 500;
  }
  .scenario-block.bad .scenario-label { color: var(--alert); }
  .scenario-block.good .scenario-label { color: var(--brand-text); }
  .scenario-line {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: rgba(250,250,247,0.85);
    line-height: 1.5; margin-bottom: 8px;
  }
  .scenario-line:last-child { margin-bottom: 0; }
  .scenario-icon { flex-shrink: 0; font-family: var(--mono); font-weight: 700; }
  .scenario-block.bad .scenario-icon { color: var(--alert); }
  .scenario-block.good .scenario-icon { color: var(--brand-text); }
  .scenario-total {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .scenario-block.bad .scenario-total-num { color: var(--alert); font-weight: 700; font-size: 18px; }
  .scenario-block.good .scenario-total-num { color: var(--brand-text); font-weight: 700; font-size: 18px; }

  
  .faq { padding: 110px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
  .faq-grid {
    display: grid; grid-template-columns: 1fr 1.6fr;
    gap: 80px; align-items: start;
  }
  @media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } }
  .faq-list { border-top: 1px solid var(--line); }
  details.faq-item {
    border-bottom: 1px solid var(--line);
    padding: 22px 0; cursor: pointer;
  }
  details.faq-item summary {
    list-style: none;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
    font-weight: 500; font-size: 18px; letter-spacing: -0.02em;
    color: var(--ink); transition: color 0.15s ease;
    line-height: 1.35;
  }
  details.faq-item summary::-webkit-details-marker { display: none; }
  details.faq-item summary:hover { color: var(--brand-text); }
  details.faq-item[open] summary { color: var(--brand-text); }
    .faq-toggle {
    flex-shrink: 0; width: 28px; height: 28px;
    background: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-324cd0871312.svg") center / contain no-repeat;
    font-size: 0;
    transition: opacity 0.2s ease;
    margin-top: 1px;
  }
    details.faq-item[open] .faq-toggle {
    background-image: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-6b935805dec2.svg");
  }
  .faq-answer {
    margin-top: 14px; color: var(--ink-2);
    font-size: 15px; line-height: 1.6; max-width: 720px;
  }

  
  .final {
    background-color: var(--ink); background-image: var(--cta-bg); background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff;
    padding: 130px 0; position: relative; overflow: hidden;
  }
  .final-inner { text-align: center; position: relative; z-index: 1; }
  .final-pillars {
    display: inline-flex; gap: 20px; align-items: center;
    margin-bottom: 32px;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: #fff;
  }
  .final-pillars .sep { opacity: 0.4; }
  .final h2 {
    font-weight: 400; font-size: clamp(24px, 3.7vw, 48px);
    line-height: 0.98; letter-spacing: -0.045em;
    margin-bottom: 26px;
  }
  .final h2 .underlined {
    color: #4FB82A; padding: 0 6px;
    font-style: normal;
  }
  .final p {
    font-size: 18px; max-width: 600px; margin: 0 auto 40px;
    color: rgba(255,255,255,0.78); line-height: 1.55;
  }
  .final-ctas { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
  .final .btn-brand { background: var(--brand); color: var(--ink); }
  .final .btn-brand:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .final .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
  .final .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: #fff; }
  @media (max-width: 600px) {
    .final-ctas { display: flex; flex-direction: column; align-items: stretch; }
    .final-ctas .btn { width: 100%; justify-content: center; }
  }
  .final-reassurance {
    margin-top: 28px;
    font-family: var(--mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
  }
  .final-reassurance span { color: var(--brand); margin: 0 8px; }

  
  footer {
    background: var(--paper);
    color: var(--ink);
    padding: 72px 0 40px;
    font-size: 14px;
    border-top: 1px solid var(--line);
  }
  .footer-top {
    display: flex;
    justify-content: space-between;
    gap: 48px;
    flex-wrap: wrap;
  }
  .footer-left { max-width: 440px; }
  .footer-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
  .footer-logo svg { display: block; }
  .footer-logo .for { color: var(--muted); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
  .footer-tag {
    margin-top: 22px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.65;
    max-width: 400px;
  }
  .footer-tag a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .footer-tag a:hover { color: var(--brand-text); }
  .footer-col { display: flex; flex-direction: column; gap: 13px; }
  .footer-col-head {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .footer-col a { color: var(--ink); font-size: 15px; }
  .footer-col a:hover { color: var(--brand-text); }
  .footer-bottom { margin-top: 52px; color: var(--muted); font-size: 14px; }
  @media (max-width: 640px) {
    .footer-top { gap: 36px; }
    .footer-left { max-width: none; }
    .footer-bottom { margin-top: 40px; }
  }

  
  .mobile-cta-bar { display: none; }
  @media (max-width: 760px) {
    .mobile-cta-bar {
      position: fixed; bottom: 0; left: 0; right: 0;
      display: flex; gap: 8px;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-top: 1px solid var(--line);
      z-index: 95;
      box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
    }
    .mobile-cta-bar .btn {
      flex: 1; justify-content: center;
      padding: 13px 14px; font-size: 14px;
    }
    body { padding-bottom: 72px; }
  }

  
  @media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(14px); animation: reveal 0.7s ease forwards; }
    .reveal-1 { animation-delay: 0.05s; }
    .reveal-2 { animation-delay: 0.18s; }
    .reveal-3 { animation-delay: 0.32s; }
    .reveal-4 { animation-delay: 0.46s; }
    .reveal-5 { animation-delay: 0.6s; }
  }
  @keyframes reveal { to { opacity: 1; transform: translateY(0); } }
  
  @media (prefers-reduced-motion: no-preference) {
    .has-io .hero-grid > [class*="-card"]:not(.in-view) * { animation-play-state: paused; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
  }

  
  .topbar-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    height: 64px;
  }
  .top-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 64px;
    display: flex;
    gap: 28px;
    align-items: center;
  }
  .top-nav > a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
    transition: color 0.15s ease;
    position: relative;
  }
  .top-nav > a:hover {
    color: var(--ink);
  }
  .top-nav > a:hover::after {
    content: '';
    position: absolute;
    bottom: -6px; left: 0; right: 0;
    height: 2px;
    background: var(--ink);
  }
  .try-link {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--ink-2);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
  }
  .try-link:hover {
    color: var(--brand-text);
    border-color: var(--brand-text);
  }
  .nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    padding: 0; background: none; border: none;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle-bars { position: relative; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transition: background 0.15s ease; }
  .nav-toggle-bars::before, .nav-toggle-bars::after {
    content: ''; position: absolute; left: 0; width: 24px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform 0.2s ease;
  }
  .nav-toggle-bars::before { top: -7px; }
  .nav-toggle-bars::after { top: 7px; }
  .topbar.nav-open .nav-toggle-bars { background: transparent; }
  .topbar.nav-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
  .topbar.nav-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-cta { display: none; }
  .nav-scrim {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(10, 11, 10, 0.5);
    z-index: 95;
  }
  .topbar.nav-open + .nav-scrim { display: block; }
  @media (max-width: 1240px) {
    
    .topbar-inner {
      display: flex !important;
      align-items: center;
      gap: 16px;
      height: 64px;
    }
    .logo { margin-right: auto; }
    .nav-toggle { display: inline-flex; order: 3; }
    .top-right { order: 2; }
    .top-nav {
      display: none;
      position: fixed;
      top: 100%; left: 0; right: 0; width: auto; margin-left: 0; transform: none; height: auto;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      max-height: calc(100vh - 64px);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 14px 28px rgba(10,11,10,0.07);
      padding: 10px 48px 26px;
      z-index: 96;
    }
    .topbar.nav-open .top-nav { display: flex; }
    .top-nav > a {
      width: 100%;
      padding: 13px 0;
      background: none;
      border: none;
      border-radius: 0;
      color: var(--ink);
      font-size: 22px;
      font-weight: 500;
      white-space: normal;
    }
    .top-nav > a:hover,
    .top-nav > a:focus-visible {
      background: none;
      color: var(--brand-text);
    }
    .top-nav > a:hover::after { display: none; }
    .nav-cta {
      margin-top: 14px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      align-items: center;
      gap: 18px;
    }
  }
  @media (max-width: 600px) {
    .top-right { display: none; }
    .top-nav { padding-left: 24px; padding-right: 24px; }
    .nav-cta { display: flex; }
  }

  
  .sticky-widget {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 90;
    width: 64px;
    height: 64px;
    padding: 0;
    display: grid;
    place-items: center;
    background: var(--brand);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 14px 36px -8px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    animation: sw-ring 4.8s infinite;
  }
  .sticky-widget .sw-mark {
    width: 64px;
    height: 64px;
    display: block;
    pointer-events: none;
  }
  .sticky-widget:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.06);
    background: var(--brand-deep);
    box-shadow: 0 18px 44px -10px rgba(0,0,0,0.45);
  }
  @keyframes sw-ring {
    0% { box-shadow: 0 14px 36px -8px rgba(0,0,0,0.35), 0 0 0 0 rgba(135,234,92,0.55); }
    70% { box-shadow: 0 14px 36px -8px rgba(0,0,0,0.35), 0 0 0 20px rgba(135,234,92,0); }
    100% { box-shadow: 0 14px 36px -8px rgba(0,0,0,0.35), 0 0 0 0 rgba(135,234,92,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sticky-widget { animation: none; }
  }
  @media (max-width: 760px) {
    .sticky-widget {
      bottom: 80px;
      right: 14px;
      width: 56px;
      height: 56px;
    }
    .sticky-widget .sw-mark { width: 56px; height: 56px; }
  }

  
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 10, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-overlay.open {
    display: flex;
    animation: modalFade 0.2s ease;
  }
  @keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .modal-card {
    background: #F5F5F0;
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 48px 40px 32px;
    position: relative;
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4);
    animation: modalSlide 0.3s ease;
  }
  @keyframes modalSlide {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .modal-card.playbook {
    max-width: 480px;
    padding: 48px 40px 40px;
    text-align: left;
  }
  .modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 1;
    font-family: var(--sans);
  }
  .modal-close:hover {
    background: rgba(0,0,0,0.06);
    color: var(--ink);
  }
  .modal-close:focus { outline: none; }
  .modal-close:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 2px; }
  .modal-card:focus { outline: none; }
  .modal-card h2 {
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-align: center;
    margin-bottom: 14px;
    color: var(--ink);
  }
  .modal-card.playbook h2 {
    text-align: left;
    font-size: 30px;
    margin-bottom: 8px;
  }
  .modal-sub {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    margin-bottom: 28px;
    line-height: 1.55;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .modal-card.playbook .modal-sub {
    text-align: left;
    font-size: 15px;
    margin: 0 0 32px 0;
    max-width: none;
  }
  .modal-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .modal-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .modal-label > span {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .modal-input {
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
  }
  .modal-input:focus {
    border-color: var(--brand-deep);
  }
  .modal-input::placeholder {
    color: var(--muted);
  }
  .modal-card.playbook .modal-input {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--ink);
    padding: 10px 0;
    background: transparent;
  }
  .phone-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper);
  }
  .phone-wrap:focus-within {
    border-color: var(--brand-deep);
  }
  .phone-cc {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-right: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    background: transparent;
  }
  .phone-cc .flag {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
  }
  .phone-cc .caret {
    font-size: 12px;
    color: var(--muted);
  }
  .phone-cc .cc-num {
    color: var(--muted);
    margin-left: 4px;
  }
  .phone-wrap input {
    border: none;
    padding: 14px 18px;
    background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    min-width: 0;
  }
  .modal-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
    cursor: pointer;
  }
  .modal-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand-deep);
    flex-shrink: 0;
    cursor: pointer;
  }
  .modal-fine {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
  }
  .modal-fine a {
    color: var(--ink-2);
    text-decoration: underline;
  }
  .modal-submit {
    padding: 17px 24px;
    border-radius: 999px;
    border: none;
    background: #DEDFD8;
    color: #9B9C95;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    cursor: not-allowed;
    margin-top: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .modal-submit.active {
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
  }
  .modal-submit.active:hover {
    background: var(--brand-deep);
  }
  .modal-submit.brand {
    background: var(--brand);
    color: var(--ink);
    cursor: pointer;
  }
  .modal-submit.brand:hover {
    background: var(--brand-deep);
    color: #fff;
  }
  .modal-submit .arrow {
    transition: transform 0.2s ease;
  }
  .modal-submit:hover .arrow {
    transform: translateX(3px);
  }
  @media (max-width: 560px) {
    .modal-card {
      padding: 48px 22px 22px;
    }
    .modal-card h2 {
      font-size: 22px;
      margin-bottom: 10px;
    }
    .modal-card.playbook h2 {
      font-size: 26px;
    }
    .modal-sub {
      margin-bottom: 16px;
    }
    .modal-form {
      gap: 12px;
    }
    .modal-input {
      padding: 11px 18px;
    }
    .phone-wrap input {
      padding: 11px 16px;
    }
    .modal-submit {
      padding: 14px 24px;
      margin-top: 4px;
    }
  }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    background: var(--brand);
    color: var(--brand-ink);
    padding: 12px 16px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    z-index: 10000;
  }
  .skip-link:focus { left: 8px; }
  .u-mt-10 { margin-top: 10px; }
  .u-footer-sep { opacity: 0.4; margin: 0 8px; }
  .triage-foot .tonight { padding: 0; }
  
  @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: no-preference) {
    .triage-card > .triage-head,
    .triage-card > .severity-banner,
    .triage-card > .caller-block,
    .triage-card > .triage-foot,
    .triage-card .check,
    .triage-card .action { opacity: 0; animation: msgIn 0.5s ease both; }
    .triage-card > .triage-head { animation-delay: 1s; }
    .triage-card > .severity-banner { animation-delay: 1.12s; }
    .triage-card > .caller-block { animation-delay: 1.24s; }
    .triage-card .check:nth-child(1) { animation-delay: 1.36s; }
    .triage-card .check:nth-child(2) { animation-delay: 1.45s; }
    .triage-card .check:nth-child(3) { animation-delay: 1.54s; }
    .triage-card .check:nth-child(4) { animation-delay: 1.63s; }
    .triage-card .action:nth-child(1) { animation-delay: 1.74s; }
    .triage-card .action:nth-child(2) { animation-delay: 1.83s; }
    .triage-card .action:nth-child(3) { animation-delay: 1.92s; }
    .triage-card > .triage-foot { animation-delay: 2.03s; }
  }



.exit-card{max-width:660px;padding:48px 48px 42px;text-align:left}
.exit-title{font-family:var(--sans);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.04;letter-spacing:-0.03em;color:var(--ink);margin:0 0 18px;padding-right:30px}
.exit-sub{font-size:15px;color:var(--muted);line-height:1.55;margin:0 0 34px}
.exit-fields{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:28px}
.exit-field{display:flex;flex-direction:column;gap:14px}
.exit-field label{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.exit-input{border:none;border-bottom:1px solid var(--line);background:transparent;padding:8px 2px 10px;font-family:var(--sans);font-size:16px;color:var(--ink);outline:none;transition:border-color .18s ease}
.exit-input:focus{border-bottom-color:var(--brand-deep)}
.exit-fine{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 26px}
.exit-fine a{color:var(--brand-text);text-decoration:underline}
.exit-submit{width:100%;padding:18px 24px;border:none;border-radius:999px;background:var(--brand);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:background .18s ease,transform .12s ease}
.exit-submit:hover{background:var(--brand-deep)}
.exit-submit:active{transform:translateY(1px)}
@media (max-width:560px){.exit-card{padding:48px 22px 24px}.exit-title{margin:0 0 12px}.exit-sub{margin:0 0 18px}.exit-fields{grid-template-columns:1fr;gap:16px;margin-bottom:18px}.exit-field{gap:8px}.exit-fine{margin:0 0 16px}.exit-submit{padding:14px 24px}}
  
  h1.headline { line-height: 1.16; }
  .section-title, .problem h2, .final h2 { line-height: 1.2; }
  @media (max-width: 600px) {
    h1.headline { line-height: 1.28; }
    .section-title, .problem h2, .final h2 { line-height: 1.33; }
  }




  button:focus, button:hover,
  [type="button"]:focus, [type="button"]:hover,
  [type="submit"]:focus, [type="submit"]:hover {
    background-color: transparent;
    color: inherit;
  }
  button, [type="button"], [type="submit"] {
    border-color: transparent;
  }

  input.modal-input {
    padding: 14px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s ease;
    width: 100%;
  }
  input.modal-input:focus {
    border-color: var(--brand-deep);
  }
  input.modal-input::placeholder {
    color: var(--muted);
  }
  .phone-wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--paper);
  }
  .phone-wrap:focus-within {
    border-color: var(--brand-deep);
  }
  .phone-cc {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-right: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    background: transparent;
  }
  .phone-cc .flag {
    width: 22px; height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; line-height: 1; overflow: hidden;
  }
  .phone-cc .caret {
    font-size: 12px;
    color: var(--muted);
  }
  .phone-cc .cc-num {
    color: var(--muted);
    margin-left: 4px;
  }
  
  .phone-cc { cursor: pointer; position: relative; }
  .phone-cc-list {
    display: none;
    
    position: fixed; top: 0; left: 0;
    min-width: 220px; max-height: 260px; overflow-y: auto;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.18);
    z-index: 10000; padding: 6px; margin: 0; list-style: none;
  }
  .phone-cc-list.open { display: block; }
  .phone-cc-list li {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    font-size: 14px; color: var(--ink); white-space: nowrap;
  }
  .phone-cc-list li:hover, .phone-cc-list li:focus {
    background: var(--paper-2); outline: none;
  }
  .phone-cc-list .pf { font-size: 15px; flex-shrink: 0; }
  .phone-cc-list .pn { flex: 1; overflow: hidden; text-overflow: ellipsis; }
  .phone-cc-list .pd { color: var(--muted); flex-shrink: 0; }
  .phone-wrap input {
    border: none;
    padding: 14px 18px;
    background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    outline: none;
    min-width: 0;
  }
  .modal-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
    cursor: pointer;
  }
  .modal-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand-deep);
    flex-shrink: 0;
    cursor: pointer;
  }
  .modal-fine {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.55;
  }
  .modal-fine a {
    color: var(--ink-2);
    text-decoration: underline;
  }
  .modal-submit {
    padding: 17px 24px;
    border-radius: 999px;
    border: none;
    background: #DEDFD8;
    color: #9B9C95;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    cursor: not-allowed;
    margin-top: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .modal-submit.active {
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
  }
  .modal-submit.active:hover {
    background: var(--brand-deep);
  }
  .modal-submit.brand {
    background: var(--brand);
    color: var(--ink);
    cursor: pointer;
  }
  .modal-submit.brand:hover {
    background: var(--brand-deep);
    color: #fff;
  }
  .modal-submit .arrow {
    transition: transform 0.2s ease;
  }
  .modal-submit:hover .arrow {
    transform: translateX(3px);
  }
  .ava-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ava-spin 0.6s linear infinite;
    opacity: 0.85;
    vertical-align: middle;
  }
  @keyframes ava-spin {
    to { transform: rotate(360deg); }
  }
input.exit-input{border:1px solid var(--line);border-radius:999px;background:var(--paper);padding:14px 20px;font-family:var(--sans);font-size:16px;color:var(--ink);outline:none;transition:border-color .18s ease}
input.exit-input:focus{border-color:var(--brand-deep)}


/* ================= NATIVE ELEMENTOR SHIM (generated) ================= */
/* Elementor's kit applies a default color to EVERY heading widget
   (same kit-default-color issue documented above for text-editor widgets),
   which wins over true CSS inheritance for any heading with no color rule
   of its own (relying on inheriting white/etc from a dark ancestor
   section) - native_typography() correctly omits title_color in that case,
   but needs this to make the omission actually fall through to inheritance. */
.elementor-widget-heading .elementor-heading-title { color: inherit; }

/* in-page nav anchor targets (site.js intercepts #href clicks and calls
   scrollIntoView on these ids): scroll-margin-top gives real breathing room
   below the sticky topbar, applied directly on the scrolled-to element
   itself - more robust than relying only on the page-wide html{scroll-
   padding-top} above, which some browsers/paths don't consistently honor
   for JS-triggered scrollIntoView. Matches topbar height (65px) plus a
   small amount of headroom so the section doesn't feel jammed against
   the nav. */
#hero-headline, #features-title, #int-title, #proof-title, #faq-title {
  scroll-margin-top: 76px;
}
/* #how-anchor is NOT grouped with the others above: it sits on the outer
   <section> (needed to fix an earlier sticky-ancestor scrollIntoView bug -
   see the how-anchor HTML transform), while every other title anchor here
   is on an inner heading that's already past its own section's top padding.
   .how and .problem are perfectly flush (zero gap between them) and .how
   is transparent with its own 110px top padding providing the breathing
   room - reserving 76px of scroll-margin ABOVE the section boundary lands
   that reserved space in .problem's (dark-background) territory instead of
   .how's own white padding zone, visibly showing a slice of the wrong
   section above the topbar. A small value that stays inside .how's own
   110px padding fixes it without the mismatch. */
#how-anchor {
  scroll-margin-top: -130px;
}
@media (max-width: 1024px) {
  #hero-headline, #features-title, #int-title, #proof-title, #faq-title {
    /* was 118px (overshot, landed above the section) then 8px (undershot
       the other way, near-zero gap) then briefly -60px - that last value
       was Raju's fix for #how-anchor specifically (a section-level anchor
       with the .problem-bleed-through problem, see below) and got wrongly
       applied to this whole group when it was propagated, including these
       four which are all on INNER HEADINGS, not section-level anchors -
       they don't have .how's flush-against-a-dark-section issue, so -60px
       just pulled them almost flush against the sticky topbar (confirmed
       live: 2-3px gap, "too close to top", one heading's first line
       actually clipped behind the topbar). A small positive value (topbar
       height + light breathing room) is correct for these. */
    scroll-margin-top: 15px;
  }
  #how-anchor {
    /* same section-vs-heading mismatch as the desktop rule above (.how is
       flush against dark .problem, transparent bg, relies on its own
       internal padding for breathing room) - a small POSITIVE value was
       tried here first assuming mobile wouldn't need the same negative
       correction as desktop, but that was wrong: confirmed live, still
       showed a slice of .problem's dark background above .how at 390px
       width. Raju's -60px (tested and confirmed on an earlier staging
       build) fixed the .problem bleed-through, but left ~133px of visible
       blank space between the topbar and the "How it Works" heading -
       same over-generous-padding issue as desktop, tightened the same way
       (pull more of .how's own blank top padding up behind the sticky
       topbar - nothing meaningful is hidden by it). */
    scroll-margin-top: -170px;
  }
}

/* .nav-cta (the "Test it yourself" / "Get a Demo" pair inside the mobile
   nav dropdown) duplicates .mobile-cta-bar, the always-visible sticky
   bottom bar with the same two actions - redundant once the sticky bar is
   showing (user report, screenshot of the open mobile nav dropdown).
   .nav-cta's own "on" range is <=600px (where .top-right, the topbar's
   inline buttons, is also hidden); .mobile-cta-bar's is the wider <=760px.
   This override only needs to beat the <=600px rule (later in source
   order + same specificity wins for the range where both conditions are
   true), so scoping it at <=760px is a superset that still works, with no
   effect in the 601-760px gap since .nav-cta was already display:none by
   default there regardless. Verified live across 390/700/900px: no width
   loses access to Get a Demo/Test it yourself - .top-right (topbar) or
   .mobile-cta-bar (sticky) always covers it once .nav-cta is hidden. */
@media (max-width: 760px) {
  .nav-cta { display: none; }
}

/* .funnel-fill (education's enrollment-funnel bar chart) is height:100% but
   NOT position:absolute (unlike the structurally similar .vg-bar chart,
   which uses position:absolute and so resolves its height:100% against the
   nearest POSITIONED ancestor directly, bypassing any wrapper in between).
   In the original design .funnel-fill is a DIRECT child of .funnel-track
   (explicit height:30px), so height:100% resolves cleanly. Elementor wraps
   every HTML-island widget in its own div, inserting a block/height:auto
   wrapper between them - height:100% can't resolve against an indefinite-
   height ancestor per spec, so the fill collapses to ~0px (confirmed live:
   all funnel bars render as an invisible sliver instead of a filled bar).
   Give that wrapper an explicit height instead of changing .funnel-fill's
   own positioning model. */
.funnel-track > .elementor-widget-html { height: 100%; }

/* .int-cell is a grid item in the original design, so it naturally fills
   its row's full stretched height (CSS Grid's default align-items:stretch)
   whenever a sibling's title wraps to more lines than others in the same
   row. Elementor wraps every HTML-island widget in its own extra div
   (.elementor-element.elementor-widget-html), which becomes the ACTUAL
   grid item instead - it stretches correctly, but .int-cell nested one
   level inside it only grows to fit its own content and leaves a gap at
   the bottom, where the grid's own divider-line background (.int-grid's
   background, used for the 1px row/column gaps) shows through instead of
   the cell's own white background - looks like an uneven/overflowing
   divider bar under the shorter cells in that row (confirmed live: a
   ~21px gap on 3 of 4 first-row integration cards, restaurants' longer
   "Tock . Yelp Reservations" being the one that wraps to 2 lines and sets
   the row height). Fix: make the actual card fill its wrapper. */
.int-cell { height: 100%; }

/* Consolidated from plumbers' WP Customizer "Additional CSS" (site-wide,
   theme-level, so it applied to every page regardless of source bundle) -
   moved here so it's tracked and reaches every industry through the normal
   build, instead of being a per-site manual customization nobody else
   inherits. */
.anchor { overflow: hidden; padding: 0 !important; }
.modal-overlay { z-index: 999; }
.mobile-cta-bar { z-index: 999; }
@media screen and (max-width: 1024px) {
  .top-nav { height: 100vh; }
}
@media screen and (max-width: 767px) {
  .sticky-widget { bottom: 100px; }
}

/* sticky islands (e.g. topbar): promote position:sticky to the OUTER
   wrapper too, since our tight per-block wrapper is otherwise the sticky
   element's containing block and gives it no room to actually stick */
.ava-sticky-topbar { position: sticky; top: 0; z-index: 100; }
.ava-sticky-how-header { position: sticky; top: 64px; z-index: 5; }

/* button hover background/border color - Elementor's Button widget has no
   working native key for this (empirically confirmed, see native_button_
   style's docstring); one small reusable utility class per resolved color
   pair, applied to the widget wrapper so hovering the button area triggers
   it on the real inner anchor */
.elementor-widget-button.ava-hover-background-color-4fb82a-important-border:hover .elementor-button { background-color: #4FB82A !important; border-color: #4FB82A !important; }
.elementor-widget-button.ava-hover-background-color-0a0b0a-important:hover .elementor-button { background-color: #0A0B0A !important; }
.elementor-widget-button.ava-hover-background-color-262626-important:hover .elementor-button { background-color: #262626 !important; }
.elementor-widget-button.ava-hover-background-color-fff-important-border-co:hover .elementor-button { background-color: #fff !important; border-color: #fff !important; }
.elementor-widget-button.ava-hover-background-color-ffffff-important-border:hover .elementor-button { background-color: #FFFFFF !important; border-color: #fff !important; }

/* HTML-island widgets (decorative visuals, nav, modals...) are plain <div>s
   in the original design and expected to fill their parent's width like any
   block element. When their parent container got converted from a plain
   flex/grid div into a NATIVE Elementor container (e.g. ".how-viz{display:
   flex;justify-content:center}"), Elementor's own auto-generated widget
   wrapper around the island doesn't stretch to fill by default the way a
   plain nested <div> would - it shrinks to its content's natural width
   instead. That starves any width:100% child inside the island (e.g. the
   "Map your shop" card's gray placeholder bars, which need a real width to
   flex:1 into) down to a cramped, icon-width sliver. */
.elementor-widget-html { width: 100% !important; }

/* utility for text-editor widgets whose original rule centered a narrower
   block via `margin: 0 auto` - see native_spacing() for why no native
   Elementor control does this */
.ava-center-block { margin-left: auto !important; margin-right: auto !important; }
.ava-inline-block { display: inline-block !important; width: auto !important; }
.ava-flex-noshrink { flex-shrink: 0 !important; }
.ava-inlineflex-center { display: inline-flex !important; width: auto !important; align-items: center !important; }
.ava-flex-center-gap9px { display: flex !important; align-items: center !important; gap: 9px !important; }
.ava-inlineflex-center-gap6px { display: inline-flex !important; width: auto !important; align-items: center !important; gap: 6px !important; }
.ava-flex-center-gap8px { display: flex !important; align-items: center !important; gap: 8px !important; }
.ava-inlineflex-center-gap8px { display: inline-flex !important; width: auto !important; align-items: center !important; gap: 8px !important; }
.ava-flex-gap10px { display: flex !important; gap: 10px !important; }
.ava-flex-center { display: flex !important; align-items: center !important; }
.ava-inlineflex-center-gap20px { display: inline-flex !important; width: auto !important; align-items: center !important; gap: 20px !important; }
.ava-stickybox-how-header { position: sticky; top: 64px; z-index: 5; padding: 24px 0px 4px 0px; }
.ava-stickybox-how-header::after { content: '';
    position: absolute;
    top: 0; bottom: 0; left: -20px; right: -20px;
    background: var(--paper);
    z-index: -1; }
@media (max-width: 820px) {
  .ava-stickybox-how-header { position: static; padding-top: 18px; }
  .ava-stickybox-how-header::after { display: none; }
}

/* decorative position:absolute overlays (e.g. the "Map your shop" card's
   corner brackets, ".cx") were siblings of the real content in the original
   design, removed from flow so they don't affect layout. Each one now gets
   its own separate Elementor widget wrapper - but that WRAPPER div is still
   a normal in-flow flex item even though the span inside it isn't, so it
   still eats a share of the row's width (4 corner-bracket wrappers + the
   real content = 5 competing flex items instead of 1). Making the wrapper
   `display:contents` removes its own box from layout while still rendering
   the span, whose own position:absolute then applies normally. */
.elementor-widget-html:has(> .cx) { display: contents; }

/* forcing the html-widget wrapper to width:100% (above) means the flex
   parent's justify-content:center no longer has any effect (the wrapper
   already fills all available space) - so a max-width-capped card inside it
   (e.g. .viz-intake, .viz-gantt) sits flush left instead of centered.
   margin:auto is a no-op on elements already at 100% width, so this only
   affects the capped ones. */
.elementor-widget-html > [class] { margin-left: auto; margin-right: auto; }

/* layout intent of original class rules, boosted to container specificity */
.e-con.container{max-width: 1240px;margin: 0 auto;padding: 0 100px;}
.elementor.elementor .elementor-widget.container{max-width: 1240px;margin: 0 auto;}
@media (max-width: 1024px) {
.e-con.container{padding: 0 48px;}
}
@media (max-width: 600px) {
.e-con.container{padding: 0 24px;}
}
.e-con.topbar-inner{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;height: 64px;}
.e-con.logo{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 10px;--gap:10px;}
.logo .e-con.dot{width: 10px;height: 10px;}
.elementor.elementor .logo .elementor-widget.dot{width: 10px;}
.e-con.top-right{display: flex;--display:flex;align-items: center;--align-items:center;gap: 20px;--gap:20px;}
.e-con.try-line{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 10px;--gap:10px;}
.try-line .e-con.pulse{width: 7px;height: 7px;}
.elementor.elementor .try-line .elementor-widget.pulse{width: 7px;}
.try-line a.e-con{padding-bottom: 1px;}
.e-con.btn{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;padding: 11px 18px;}
.e-con.btn-lg{padding: 15px 24px;}
.e-con.arrow{display: inline-block;--display:inline-block;}
@media (max-width: 760px) {
.top-right .e-con.try-line{display: none;--display:none;}
}
.e-con.hero{padding: 88px 0 56px;}
@media (max-width: 600px) {
.e-con.hero{padding-top: 44px;}
}
.e-con.eyebrow{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;margin-bottom: 32px;padding: 0;}
.elementor.elementor .elementor-widget.eyebrow{margin-bottom: 32px;}
.e-con.hero-grid{display: grid;--display:grid;grid-template-columns: 1.2fr 1fr;gap: 64px;--gap:64px;align-items: start;--align-items:start;}
@media (max-width: 960px) {
.e-con.hero-grid{grid-template-columns: 1fr;gap: 48px;--gap:48px;}
}
h1.headline .e-con.your{display: inline;--display:inline;}
h1.headline .e-con.small{display: block;--display:block;margin-top: 14px;}
.elementor.elementor h1.headline .elementor-widget.small{margin-top: 14px;}
.e-con.sub{max-width: 560px;margin-bottom: 36px;}
.elementor.elementor .elementor-widget.sub{max-width: 560px;margin-bottom: 36px;}
.e-con.cta-row{display: flex;--display:flex;gap: 14px;--gap:14px;flex-wrap: wrap;--flex-wrap:wrap;margin-bottom: 44px;}
.elementor.elementor .elementor-widget.cta-row{margin-bottom: 44px;}
@media (max-width: 600px) {
.e-con.cta-row{flex-direction: column;--flex-direction:column;align-items: stretch;--align-items:stretch;}
.cta-row .e-con.btn{width: 100%;justify-content: center;--justify-content:center;}
}
.e-con.trust-strip{display: grid;--display:grid;grid-template-columns: repeat(4, 1fr);gap: 24px;--gap:24px;padding-top: 30px;margin-top: 52px;}
.elementor.elementor .elementor-widget.trust-strip{margin-top: 52px;}
@media (max-width: 960px) {
.e-con.trust-strip{grid-template-columns: repeat(2, 1fr);gap: 18px;--gap:18px;}
}
.e-con.trust-item{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 6px;--gap:6px;}
.e-con.triage-card{padding: 22px;}
.e-con.triage-head{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;padding-bottom: 14px;margin-bottom: 18px;}
.elementor.elementor .elementor-widget.triage-head{margin-bottom: 18px;}
.e-con.triage-incoming{display: flex;--display:flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;}
.triage-incoming .e-con.pulse-light{width: 7px;height: 7px;}
.elementor.elementor .triage-incoming .elementor-widget.pulse-light{width: 7px;}
.e-con.severity-banner{display: flex;--display:flex;align-items: center;--align-items:center;gap: 10px;--gap:10px;padding: 10px 14px;margin-bottom: 16px;}
.elementor.elementor .elementor-widget.severity-banner{margin-bottom: 16px;}
.e-con.severity-icon{flex-shrink: 0;width: 22px;height: 22px;display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;}
.elementor.elementor .elementor-widget.severity-icon{width: 22px;}
.severity-label .e-con.cat{margin-left: 8px;}
.elementor.elementor .severity-label .elementor-widget.cat{margin-left: 8px;}
.e-con.caller-block{margin-bottom: 14px;}
.elementor.elementor .elementor-widget.caller-block{margin-bottom: 14px;}
.e-con.caller-label{margin-bottom: 4px;}
.elementor.elementor .elementor-widget.caller-label{margin-bottom: 4px;}
.e-con.caller-quote{margin-top: 8px;padding: 12px 14px;}
.elementor.elementor .elementor-widget.caller-quote{margin-top: 8px;}
.e-con.triage-checks{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 8px;--gap:8px;padding: 14px 0;margin: 14px 0;}
.elementor.elementor .elementor-widget.triage-checks{margin: 14px 0;}
.e-con.check{display: flex;--display:flex;align-items: center;--align-items:center;gap: 10px;--gap:10px;}
.e-con.check-detail{margin-left: auto;}
.elementor.elementor .elementor-widget.check-detail{margin-left: auto;}
.e-con.triage-actions{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 8px;--gap:8px;}
.e-con.action{display: flex;--display:flex;align-items: center;--align-items:center;gap: 10px;--gap:10px;padding: 10px 12px;}
.e-con.action-tag{margin-left: auto;}
.elementor.elementor .elementor-widget.action-tag{margin-left: auto;}
.e-con.triage-foot{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;margin-top: 18px;padding-top: 14px;}
.elementor.elementor .elementor-widget.triage-foot{margin-top: 18px;}
.e-con.surge-list{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 8px;--gap:8px;margin-top: 8px;}
.elementor.elementor .elementor-widget.surge-list{margin-top: 8px;}
.e-con.surge-item{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 3px;--gap:3px;padding: 10px 12px;}
.e-con.marquee-section{padding: 36px 0 28px;}
.e-con.marquee-label{margin-bottom: 22px;}
.elementor.elementor .elementor-widget.marquee-label{margin-bottom: 22px;}
.e-con.marquee{display: flex;--display:flex;gap: 48px;--gap:48px;flex-wrap: wrap;--flex-wrap:wrap;justify-content: center;--justify-content:center;align-items: center;--align-items:center;}
section.e-con{padding: 100px 0;}
.e-con.section-eyebrow{margin-bottom: 18px;display: inline-block;--display:inline-block;}
.elementor.elementor .elementor-widget.section-eyebrow{margin-bottom: 18px;}
.e-con.section-title{margin-bottom: 20px;max-width: 820px;}
.elementor.elementor .elementor-widget.section-title{margin-bottom: 20px;max-width: 820px;}
.section-title .e-con.underlined{padding: 0 2px;}
.e-con.section-sub{max-width: 640px;margin-bottom: 56px;}
.elementor.elementor .elementor-widget.section-sub{max-width: 640px;margin-bottom: 56px;}
.e-con.problem{padding: 100px 0;}
.problem h2.e-con{margin-bottom: 14px;max-width: 820px;margin-left: auto;margin-right: auto;}
.e-con.problem-sub{max-width: 620px;margin: 0 auto 56px;}
.elementor.elementor .elementor-widget.problem-sub{max-width: 620px;margin: 0 auto 56px;}
.e-con.problem-sources{margin-top: 32px;}
.elementor.elementor .elementor-widget.problem-sources{margin-top: 32px;}
.e-con.stat-grid{display: grid;--display:grid;grid-template-columns: repeat(3, 1fr);gap: 1px;--gap:1px;}
@media (max-width: 760px) {
.e-con.stat-grid{grid-template-columns: 1fr;}
}
.e-con.stat-cell{padding: 36px 28px;}
.e-con.stat-cell-tag{margin-bottom: 14px;}
.elementor.elementor .elementor-widget.stat-cell-tag{margin-bottom: 14px;}
.e-con.stat-cell-num{margin-bottom: 18px;}
.elementor.elementor .elementor-widget.stat-cell-num{margin-bottom: 18px;}
.stat-cell-num .e-con.small{margin-left: 2px;}
.elementor.elementor .stat-cell-num .elementor-widget.small{margin-left: 2px;}
.e-con.how{padding: 110px 0;}
.e-con.how-header{padding-top: 24px;padding-bottom: 4px;}
@media (max-width: 820px) {
.e-con.how-header{padding-top: 18px;}
.e-con.how-header::after{display: none;--display:none;}
}
.e-con.how-steps{margin-top: 48px;display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 26px;--gap:26px;}
.elementor.elementor .elementor-widget.how-steps{margin-top: 48px;}
.e-con.how-step{display: grid;--display:grid;grid-template-columns: 1.08fr 0.92fr;gap: 56px;--gap:56px;align-items: center;--align-items:center;}
.e-con.how-viz{padding: 44px 40px;min-height: 300px;display: flex;--display:flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;}
.e-con.cx{width: 10px;height: 10px;}
.elementor.elementor .elementor-widget.cx{width: 10px;}
.e-con.cx::before{width:1px;height:100%;}
.elementor.elementor .elementor-widget.cx::before{width:1px;}
.e-con.cx::after{height:1px;width:100%;}
.elementor.elementor .elementor-widget.cx::after{width:100%;}
.e-con.how-phase{margin-bottom: 14px;display:flex;--display:flex;align-items:center;--align-items:center;gap:9px;--gap:9px;}
.elementor.elementor .elementor-widget.how-phase{margin-bottom: 14px;}
.e-con.how-phase::before{width:8px;height:8px;}
.elementor.elementor .elementor-widget.how-phase::before{width:8px;}
.e-con.how-step-title{margin-bottom:12px;}
.elementor.elementor .elementor-widget.how-step-title{margin-bottom:12px;}
.e-con.how-step-body{max-width: 44ch;}
.elementor.elementor .elementor-widget.how-step-body{max-width: 44ch;}
.e-con.viz-intake{width:100%;max-width:380px;padding:2px 16px;}
.elementor.elementor .elementor-widget.viz-intake{width:100%;max-width:380px;}
.e-con.vi-row{display:flex;--display:flex;align-items:center;--align-items:center;gap:12px;--gap:12px;padding:13px 0;}
.e-con.vi-ico{display:flex;--display:flex;flex:0 0 auto;}
.vi-ico svg.e-con{width:18px;height:18px;}
.e-con.vi-label{flex:0 0 96px;}
.e-con.vi-field{flex:1;height:22px;}
.e-con.how-svg{width:100%;height:auto;display:block;--display:block;margin:0 auto;}
.elementor.elementor .elementor-widget.how-svg{width:100%;margin:0 auto;}
.e-con.viz-gantt{width:100%;max-width:400px;padding:16px 18px 18px;}
.elementor.elementor .elementor-widget.viz-gantt{width:100%;max-width:400px;}
.e-con.vg-head{margin-bottom:14px;}
.elementor.elementor .elementor-widget.vg-head{margin-bottom:14px;}
.e-con.vg-cols{display:grid;--display:grid;grid-template-columns:74px repeat(7,1fr);padding-bottom:7px;margin-bottom:9px;}
.elementor.elementor .elementor-widget.vg-cols{margin-bottom:9px;}
.e-con.vg-row{display:grid;--display:grid;grid-template-columns:74px 1fr;align-items:center;--align-items:center;gap:10px;--gap:10px;margin-bottom:10px;}
.elementor.elementor .elementor-widget.vg-row{margin-bottom:10px;}
.e-con.vg-row:last-child{margin-bottom:0;}
.elementor.elementor .elementor-widget.vg-row:last-child{margin-bottom:0;}
.e-con.vg-track{height:14px;}
.e-con.vg-bar{height:100%;width:var(--w);}
.elementor.elementor .elementor-widget.vg-bar{width:var(--w);}
@media (max-width: 820px) {
.e-con.how-steps{gap: 44px;--gap:44px;}
.e-con.how-step{grid-template-columns: 1fr;gap: 30px;--gap:30px;}
.e-con.how-viz{min-height: 0;padding: 32px 22px;}
}
.e-con.live-badge{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 6px;--gap:6px;margin-top: 28px;padding: 0;}
.elementor.elementor .elementor-widget.live-badge{margin-top: 28px;}
.e-con.feature-grid{display: grid;--display:grid;grid-template-columns: repeat(2, 1fr);gap: 1px;--gap:1px;margin-top: 8px;}
.elementor.elementor .elementor-widget.feature-grid{margin-top: 8px;}
@media (max-width: 760px) {
.e-con.feature-grid{grid-template-columns: 1fr;}
}
.e-con.feature{padding: 36px 32px;}
.e-con.feature-tag{display: inline-block;--display:inline-block;padding: 0;margin-bottom: 18px;}
.elementor.elementor .elementor-widget.feature-tag{margin-bottom: 18px;}
.feature h3.e-con{margin-bottom: 12px;}
.e-con.integrations{padding: 100px 0;}
.e-con.int-title{margin-bottom: 16px;}
.elementor.elementor .elementor-widget.int-title{margin-bottom: 16px;}
.e-con.int-sub{margin-bottom: 48px;max-width: 580px;margin-left: auto;margin-right: auto;}
.elementor.elementor .elementor-widget.int-sub{margin-bottom: 48px;max-width: 580px;margin-left: auto;margin-right: auto;}
.e-con.int-grid{display: grid;--display:grid;grid-template-columns: repeat(4, 1fr);gap: 1px;--gap:1px;max-width: 1000px;margin: 0 auto;}
.elementor.elementor .elementor-widget.int-grid{max-width: 1000px;margin: 0 auto;}
@media (max-width: 760px) {
.e-con.int-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 460px) {
.e-con.int-grid{grid-template-columns: 1fr;}
}
.e-con.int-cell{padding: 30px 24px 28px;display: flex;--display:flex;flex-direction: column;--flex-direction:column;align-items: flex-start;--align-items:flex-start;}
.e-con.int-ico{margin-bottom: 16px;}
.elementor.elementor .elementor-widget.int-ico{margin-bottom: 16px;}
.int-ico svg.e-con{width: 26px;height: 26px;display: block;--display:block;}
.e-con.int-cat{margin-top: 6px;}
.elementor.elementor .elementor-widget.int-cat{margin-top: 6px;}
.e-con.int-foot{margin-top: 30px;}
.elementor.elementor .elementor-widget.int-foot{margin-top: 30px;}
.e-con.proof{padding: 110px 0;}
.e-con.proof::before{display: none;--display:none;}
.e-con.proof-head{max-width: 760px;margin: 0 auto 56px;}
.elementor.elementor .elementor-widget.proof-head{max-width: 760px;margin: 0 auto 56px;}
.e-con.proof-eyebrow{margin-bottom: 18px;display: inline-block;--display:inline-block;}
.elementor.elementor .elementor-widget.proof-eyebrow{margin-bottom: 18px;}
.e-con.proof-title{margin-bottom: 16px;}
.elementor.elementor .elementor-widget.proof-title{margin-bottom: 16px;}
.e-con.proof-sub{max-width: 600px;margin: 0 auto;}
.elementor.elementor .elementor-widget.proof-sub{max-width: 600px;margin: 0 auto;}
.e-con.timeline-card{max-width: 900px;margin: 0 auto;padding: 36px;}
.elementor.elementor .elementor-widget.timeline-card{max-width: 900px;margin: 0 auto;}
@media (max-width: 760px) {
.e-con.timeline-card{padding: 24px;}
}
.e-con.timeline-head{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;padding-bottom: 16px;margin-bottom: 22px;}
.elementor.elementor .elementor-widget.timeline-head{margin-bottom: 22px;}
.e-con.timeline-head-title{display: flex;--display:flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;}
.e-con.timeline-head-title::before{width: 6px;height: 6px;flex-shrink: 0;}
.elementor.elementor .elementor-widget.timeline-head-title::before{width: 6px;}
.e-con.chart-area{display: flex;--display:flex;align-items: flex-end;--align-items:flex-end;height: 200px;gap: 4px;--gap:4px;padding: 0 4px;margin-bottom: 8px;}
.elementor.elementor .elementor-widget.chart-area{margin-bottom: 8px;}
.e-con.bar{flex: 1;min-height: 4px;}
.e-con.chart-axis{display: flex;--display:flex;justify-content: space-between;--justify-content:space-between;padding: 8px 4px 0;}
.e-con.axis-marker{flex: 1;min-width: 0;}
.elementor.elementor .elementor-widget.axis-marker{min-width: 0;}
.e-con.timeline-legend{display: flex;--display:flex;gap: 24px;--gap:24px;flex-wrap: wrap;--flex-wrap:wrap;margin-top: 24px;padding-top: 20px;}
.elementor.elementor .elementor-widget.timeline-legend{margin-top: 24px;}
.e-con.legend-swatch{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;}
.legend-swatch .e-con.sq{display: inline-block;--display:inline-block;width: 12px;height: 12px;}
.elementor.elementor .legend-swatch .elementor-widget.sq{width: 12px;}
.e-con.timeline-stats{display: grid;--display:grid;grid-template-columns: repeat(3, 1fr);gap: 20px;--gap:20px;margin-top: 28px;padding-top: 24px;}
.elementor.elementor .elementor-widget.timeline-stats{margin-top: 28px;}
@media (max-width: 640px) {
.e-con.timeline-stats{grid-template-columns: 1fr;gap: 16px;--gap:16px;}
}
.e-con.timeline-stat-cell{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 6px;--gap:6px;}
.e-con.roi{padding: 110px 0;}
.e-con.roi-grid{display: grid;--display:grid;grid-template-columns: 1fr 1.1fr;gap: 72px;--gap:72px;align-items: center;--align-items:center;}
@media (max-width: 960px) {
.e-con.roi-grid{grid-template-columns: 1fr;gap: 48px;--gap:48px;}
}
.e-con.roi-tool{padding: 32px;}
.e-con.roi-tool-head{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;padding-bottom: 16px;margin-bottom: 22px;}
.elementor.elementor .elementor-widget.roi-tool-head{margin-bottom: 22px;}
.e-con.roi-tool-title{display: flex;--display:flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;}
.e-con.roi-tool-title::before{width: 6px;height: 6px;}
.elementor.elementor .elementor-widget.roi-tool-title::before{width: 6px;}
.e-con.roi-input{display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;padding: 16px 0;gap: 16px;--gap:16px;}
.roi-input-label .e-con.hint{display: block;--display:block;margin-top: 3px;}
.elementor.elementor .roi-input-label .elementor-widget.hint{margin-top: 3px;}
.e-con.roi-input-value{padding: 6px 12px;flex-shrink: 0;}
.e-con.roi-output{margin-top: 26px;padding: 20px;display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;gap: 16px;--gap:16px;}
.elementor.elementor .elementor-widget.roi-output{margin-top: 26px;}
.roi-output-label .e-con.small{display: block;--display:block;margin-top: 4px;}
.elementor.elementor .roi-output-label .elementor-widget.small{margin-top: 4px;}
.roi-output-value .e-con.currency{margin-right: 1px;}
.elementor.elementor .roi-output-value .elementor-widget.currency{margin-right: 1px;}
.e-con.roi-tool-foot{margin-top: 18px;}
.elementor.elementor .elementor-widget.roi-tool-foot{margin-top: 18px;}
.e-con.tonight{padding: 110px 0;}
.e-con.tonight-card{padding: 56px;}
@media (max-width: 760px) {
.e-con.tonight-card{padding: 40px 28px;}
}
.e-con.tonight-card::before{width: 400px;height: 400px;}
.elementor.elementor .elementor-widget.tonight-card::before{width: 400px;}
.e-con.tonight-grid{display: grid;--display:grid;grid-template-columns: 1fr 1.15fr;gap: 56px;--gap:56px;align-items: start;--align-items:start;}
@media (max-width: 860px) {
.e-con.tonight-grid{grid-template-columns: 1fr;gap: 32px;--gap:32px;}
}
.e-con.tonight-eyebrow{margin-bottom: 18px;display: inline-block;--display:inline-block;}
.elementor.elementor .elementor-widget.tonight-eyebrow{margin-bottom: 18px;}
.e-con.tonight-title{margin-bottom: 20px;}
.elementor.elementor .elementor-widget.tonight-title{margin-bottom: 20px;}
.tonight-title .e-con.underlined{padding: 0 4px;}
.e-con.tonight-sub{margin-bottom: 32px;}
.elementor.elementor .elementor-widget.tonight-sub{margin-bottom: 32px;}
.e-con.scenario-block{padding: 24px;margin-bottom: 16px;}
.elementor.elementor .elementor-widget.scenario-block{margin-bottom: 16px;}
.e-con.scenario-label{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;margin-bottom: 14px;}
.elementor.elementor .elementor-widget.scenario-label{margin-bottom: 14px;}
.e-con.scenario-line{display: flex;--display:flex;align-items: flex-start;--align-items:flex-start;gap: 10px;--gap:10px;margin-bottom: 8px;}
.elementor.elementor .elementor-widget.scenario-line{margin-bottom: 8px;}
.e-con.scenario-line:last-child{margin-bottom: 0;}
.elementor.elementor .elementor-widget.scenario-line:last-child{margin-bottom: 0;}
.e-con.scenario-icon{flex-shrink: 0;}
.e-con.scenario-total{margin-top: 14px;padding-top: 14px;display: flex;--display:flex;align-items: center;--align-items:center;justify-content: space-between;--justify-content:space-between;}
.elementor.elementor .elementor-widget.scenario-total{margin-top: 14px;}
.e-con.faq{padding: 110px 0;}
.e-con.faq-grid{display: grid;--display:grid;grid-template-columns: 1fr 1.6fr;gap: 80px;--gap:80px;align-items: start;--align-items:start;}
@media (max-width: 860px) {
.e-con.faq-grid{grid-template-columns: 1fr;gap: 32px;--gap:32px;}
}
details.faq-item summary.e-con{display: flex;--display:flex;align-items: flex-start;--align-items:flex-start;justify-content: space-between;--justify-content:space-between;gap: 24px;--gap:24px;}
.e-con.faq-toggle{flex-shrink: 0;width: 28px;height: 28px;}
.elementor.elementor .elementor-widget.faq-toggle{width: 28px;}
.e-con.faq-answer{margin-top: 14px;max-width: 720px;}
.elementor.elementor .elementor-widget.faq-answer{margin-top: 14px;max-width: 720px;}
.e-con.final{padding: 130px 0;}
.e-con.final-pillars{display: inline-flex;--display:inline-flex;gap: 20px;--gap:20px;align-items: center;--align-items:center;margin-bottom: 32px;}
.elementor.elementor .elementor-widget.final-pillars{margin-bottom: 32px;}
.final h2.e-con{margin-bottom: 26px;}
.final h2 .e-con.underlined{padding: 0 6px;}
.final p.e-con{max-width: 600px;margin: 0 auto 40px;}
.e-con.final-ctas{display: inline-flex;--display:inline-flex;gap: 14px;--gap:14px;flex-wrap: wrap;--flex-wrap:wrap;justify-content: center;--justify-content:center;}
@media (max-width: 600px) {
.e-con.final-ctas{display: flex;--display:flex;flex-direction: column;--flex-direction:column;align-items: stretch;--align-items:stretch;}
.final-ctas .e-con.btn{width: 100%;justify-content: center;--justify-content:center;}
}
.e-con.final-reassurance{margin-top: 28px;}
.elementor.elementor .elementor-widget.final-reassurance{margin-top: 28px;}
.final-reassurance span.e-con{margin: 0 8px;}
footer.e-con{padding: 72px 0 40px;}
.e-con.footer-top{display: flex;--display:flex;justify-content: space-between;--justify-content:space-between;gap: 48px;--gap:48px;flex-wrap: wrap;--flex-wrap:wrap;}
.e-con.footer-left{max-width: 440px;}
.elementor.elementor .elementor-widget.footer-left{max-width: 440px;}
.e-con.footer-logo{display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;gap: 12px;--gap:12px;}
.footer-logo svg.e-con{display: block;--display:block;}
.e-con.footer-tag{margin-top: 22px;max-width: 400px;}
.elementor.elementor .elementor-widget.footer-tag{margin-top: 22px;max-width: 400px;}
.e-con.footer-col{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 13px;--gap:13px;}
.e-con.footer-col-head{margin-bottom: 4px;}
.elementor.elementor .elementor-widget.footer-col-head{margin-bottom: 4px;}
.e-con.footer-bottom{margin-top: 52px;}
.elementor.elementor .elementor-widget.footer-bottom{margin-top: 52px;}
@media (max-width: 640px) {
.e-con.footer-top{gap: 36px;--gap:36px;}
.e-con.footer-left{max-width: none;}
.elementor.elementor .elementor-widget.footer-left{max-width: none;}
.e-con.footer-bottom{margin-top: 40px;}
.elementor.elementor .elementor-widget.footer-bottom{margin-top: 40px;}
}
.e-con.mobile-cta-bar{display: none;--display:none;}
@media (max-width: 760px) {
.e-con.mobile-cta-bar{display: flex;--display:flex;gap: 8px;--gap:8px;padding: 10px 12px calc(10px + env(safe-area-inset-bottom));}
.mobile-cta-bar .e-con.btn{flex: 1;justify-content: center;--justify-content:center;padding: 13px 14px;}
body.e-con{padding-bottom: 72px;}
}
.e-con.topbar-inner{display: flex !important;--display:flex !important;justify-content: space-between !important;--justify-content:space-between !important;align-items: center;--align-items:center;height: 64px;}
.e-con.top-nav{height: 64px;display: flex;--display:flex;gap: 28px;--gap:28px;align-items: center;--align-items:center;}
.e-con.try-link{padding-bottom: 1px;}
.e-con.nav-toggle{display: none;--display:none;align-items: center;--align-items:center;justify-content: center;--justify-content:center;width: 44px;height: 44px;margin-right: -10px;padding: 0;}
.elementor.elementor .elementor-widget.nav-toggle{width: 44px;margin-right: -10px;}
.e-con.nav-toggle-bars{width: 24px;height: 2px;}
.elementor.elementor .elementor-widget.nav-toggle-bars{width: 24px;}
.e-con.nav-toggle-bars::before{width: 24px;height: 2px;}
.elementor.elementor .elementor-widget.nav-toggle-bars::before{width: 24px;}
.e-con.nav-toggle-bars::after{width: 24px;height: 2px;}
.elementor.elementor .elementor-widget.nav-toggle-bars::after{width: 24px;}
.e-con.nav-cta{display: none;--display:none;}
.e-con.nav-scrim{display: none;--display:none;}
.topbar.nav-open + .e-con.nav-scrim{display: block;--display:block;}
@media (max-width: 1240px) {
.e-con.topbar-inner{display: flex !important;--display:flex !important;align-items: center;--align-items:center;gap: 16px;--gap:16px;height: 64px;}
.e-con.logo{margin-right: auto;}
.elementor.elementor .elementor-widget.logo{margin-right: auto;}
.e-con.nav-toggle{display: inline-flex;--display:inline-flex;order: 3;}
.elementor.elementor .elementor-widget.nav-toggle{order: 3;}
.e-con.top-right{order: 2;}
.elementor.elementor .elementor-widget.top-right{order: 2;}
.e-con.top-nav{display: none;--display:none;width: auto;margin-left: 0;height: auto;flex-direction: column;--flex-direction:column;align-items: stretch;--align-items:stretch;gap: 2px;--gap:2px;max-height: calc(100vh - 64px);padding: 10px 48px 26px;}
.elementor.elementor .elementor-widget.top-nav{width: auto;margin-left: 0;}
.topbar.nav-open .e-con.top-nav{display: flex;--display:flex;}
.top-nav > a.e-con{width: 100%;padding: 13px 0;}
.e-con.nav-cta{margin-top: 14px;padding-top: 18px;align-items: center;--align-items:center;gap: 18px;--gap:18px;}
.elementor.elementor .elementor-widget.nav-cta{margin-top: 14px;}
}
@media (max-width: 600px) {
.e-con.top-right{display: none;--display:none;}
.e-con.top-nav{padding-left: 24px;padding-right: 24px;}
.e-con.nav-cta{display: flex;--display:flex;}
}
.e-con.sticky-widget{width: 64px;height: 64px;padding: 0;display: grid;--display:grid;place-items: center;}
.elementor.elementor .elementor-widget.sticky-widget{width: 64px;}
.sticky-widget .e-con.sw-mark{width: 64px;height: 64px;display: block;--display:block;}
.elementor.elementor .sticky-widget .elementor-widget.sw-mark{width: 64px;}
@media (max-width: 760px) {
.e-con.sticky-widget{width: 56px;height: 56px;}
.elementor.elementor .elementor-widget.sticky-widget{width: 56px;}
.sticky-widget .e-con.sw-mark{width: 56px;height: 56px;}
.elementor.elementor .sticky-widget .elementor-widget.sw-mark{width: 56px;}
}
.e-con.modal-overlay{display: none;--display:none;align-items: center;--align-items:center;justify-content: center;--justify-content:center;padding: 20px;}
.e-con.modal-overlay.open{display: flex;--display:flex;}
.e-con.modal-card{max-width: 520px;width: 100%;max-height: 92vh;max-height: 92dvh;padding: 48px 40px 32px;}
.elementor.elementor .elementor-widget.modal-card{max-width: 520px;width: 100%;}
.e-con.modal-card.playbook{max-width: 480px;padding: 48px 40px 40px;}
.elementor.elementor .elementor-widget.modal-card.playbook{max-width: 480px;}
.e-con.modal-close{width: 32px;height: 32px;display: flex;--display:flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;}
.elementor.elementor .elementor-widget.modal-close{width: 32px;}
.modal-card h2.e-con{margin-bottom: 14px;}
.modal-card.playbook h2.e-con{margin-bottom: 8px;}
.e-con.modal-sub{margin-bottom: 28px;max-width: 420px;margin-left: auto;margin-right: auto;}
.elementor.elementor .elementor-widget.modal-sub{margin-bottom: 28px;max-width: 420px;margin-left: auto;margin-right: auto;}
.modal-card.playbook .e-con.modal-sub{margin: 0 0 32px 0;max-width: none;}
.elementor.elementor .modal-card.playbook .elementor-widget.modal-sub{margin: 0 0 32px 0;max-width: none;}
.e-con.modal-form{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 18px;--gap:18px;}
.e-con.modal-label{display: flex;--display:flex;flex-direction: column;--flex-direction:column;gap: 6px;--gap:6px;}
.e-con.modal-input{padding: 14px 20px;width: 100%;}
.elementor.elementor .elementor-widget.modal-input{width: 100%;}
.modal-card.playbook .e-con.modal-input{padding: 10px 0;}
.e-con.phone-wrap{display: grid;--display:grid;grid-template-columns: auto 1fr;}
.e-con.phone-cc{display: flex;--display:flex;align-items: center;--align-items:center;gap: 6px;--gap:6px;padding: 0 14px;}
.phone-cc .e-con.flag{width: 22px;height: 22px;flex-shrink: 0;}
.elementor.elementor .phone-cc .elementor-widget.flag{width: 22px;}
.phone-cc .e-con.cc-num{margin-left: 4px;}
.elementor.elementor .phone-cc .elementor-widget.cc-num{margin-left: 4px;}
.phone-wrap input.e-con{padding: 14px 18px;min-width: 0;}
.e-con.modal-consent{display: flex;--display:flex;align-items: flex-start;--align-items:flex-start;gap: 12px;--gap:12px;}
.e-con.modal-submit{padding: 17px 24px;margin-top: 8px;display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;gap: 8px;--gap:8px;}
.elementor.elementor .elementor-widget.modal-submit{margin-top: 8px;}
@media (max-width: 560px) {
.e-con.modal-card{padding: 48px 22px 22px;}
.modal-card h2.e-con{margin-bottom: 10px;}
.e-con.modal-sub{margin-bottom: 16px;}
.elementor.elementor .elementor-widget.modal-sub{margin-bottom: 16px;}
.e-con.modal-form{gap: 12px;--gap:12px;}
.e-con.modal-input{padding: 11px 18px;}
.phone-wrap input.e-con{padding: 11px 16px;}
.e-con.modal-submit{padding: 14px 24px;margin-top: 4px;}
.elementor.elementor .elementor-widget.modal-submit{margin-top: 4px;}
}
.e-con.skip-link{padding: 12px 16px;}
.e-con.u-mt-10{margin-top: 10px;}
.elementor.elementor .elementor-widget.u-mt-10{margin-top: 10px;}
.e-con.u-footer-sep{margin: 0 8px;}
.elementor.elementor .elementor-widget.u-footer-sep{margin: 0 8px;}
.triage-foot .e-con.tonight{padding: 0;}
.e-con.exit-card{max-width:660px;padding:48px 48px 42px;}
.elementor.elementor .elementor-widget.exit-card{max-width:660px;}
.e-con.exit-title{margin:0 0 18px;padding-right:30px;}
.elementor.elementor .elementor-widget.exit-title{margin:0 0 18px;}
.e-con.exit-sub{margin:0 0 34px;}
.elementor.elementor .elementor-widget.exit-sub{margin:0 0 34px;}
.e-con.exit-fields{display:grid;--display:grid;grid-template-columns:1fr 1fr;gap:30px;--gap:30px;margin-bottom:28px;}
.elementor.elementor .elementor-widget.exit-fields{margin-bottom:28px;}
.e-con.exit-field{display:flex;--display:flex;flex-direction:column;--flex-direction:column;gap:14px;--gap:14px;}
.e-con.exit-input{padding:8px 2px 10px;}
.e-con.exit-fine{margin:0 0 26px;}
.elementor.elementor .elementor-widget.exit-fine{margin:0 0 26px;}
.e-con.exit-submit{width:100%;padding:18px 24px;display:inline-flex;--display:inline-flex;align-items:center;--align-items:center;justify-content:center;--justify-content:center;gap:10px;--gap:10px;}
.elementor.elementor .elementor-widget.exit-submit{width:100%;}
@media (max-width:560px){
.e-con.exit-card{padding:48px 22px 24px;}
.e-con.exit-title{margin:0 0 12px;}
.elementor.elementor .elementor-widget.exit-title{margin:0 0 12px;}
.e-con.exit-sub{margin:0 0 18px;}
.elementor.elementor .elementor-widget.exit-sub{margin:0 0 18px;}
.e-con.exit-fields{grid-template-columns:1fr;gap:16px;--gap:16px;margin-bottom:18px;}
.elementor.elementor .elementor-widget.exit-fields{margin-bottom:18px;}
.e-con.exit-field{gap:8px;--gap:8px;}
.e-con.exit-fine{margin:0 0 16px;}
.elementor.elementor .elementor-widget.exit-fine{margin:0 0 16px;}
.e-con.exit-submit{padding:14px 24px;}
}
.e-con.phone-wrap{display: grid;--display:grid;grid-template-columns: auto 1fr;}
.e-con.phone-cc{display: flex;--display:flex;align-items: center;--align-items:center;gap: 6px;--gap:6px;padding: 0 14px;}
.phone-cc .e-con.flag{width: 22px;height: 22px;flex-shrink: 0;display: flex;--display:flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;}
.elementor.elementor .phone-cc .elementor-widget.flag{width: 22px;}
.phone-cc .e-con.cc-num{margin-left: 4px;}
.elementor.elementor .phone-cc .elementor-widget.cc-num{margin-left: 4px;}
.e-con.phone-cc-list{display: none;--display:none;min-width: 220px;max-height: 260px;padding: 6px;margin: 0;}
.elementor.elementor .elementor-widget.phone-cc-list{min-width: 220px;margin: 0;}
.e-con.phone-cc-list.open{display: block;--display:block;}
.phone-cc-list li.e-con{display: flex;--display:flex;align-items: center;--align-items:center;gap: 8px;--gap:8px;padding: 8px 10px;}
.phone-cc-list .e-con.pf{flex-shrink: 0;}
.phone-cc-list .e-con.pn{flex: 1;}
.phone-cc-list .e-con.pd{flex-shrink: 0;}
.phone-wrap input.e-con{padding: 14px 18px;min-width: 0;}
.e-con.modal-consent{display: flex;--display:flex;align-items: flex-start;--align-items:flex-start;gap: 12px;--gap:12px;}
.e-con.modal-submit{padding: 17px 24px;margin-top: 8px;display: inline-flex;--display:inline-flex;align-items: center;--align-items:center;justify-content: center;--justify-content:center;gap: 8px;--gap:8px;}
.elementor.elementor .elementor-widget.modal-submit{margin-top: 8px;}
.e-con.ava-spinner{display: inline-block;--display:inline-block;width: 15px;height: 15px;}
.elementor.elementor .elementor-widget.ava-spinner{width: 15px;}
/* the original page relies on the 16px browser default; the active theme's
   global styles bump body font-size (e.g. TT25 -> 22px), which every
   unsized element inherits. Pin it. */
body { font-size: 16px !important; letter-spacing: normal !important; word-spacing: normal !important; }

/* button widget: wrapper carries the original classes; anchor gets the look */
.elementor-widget-button .elementor-button {
  background: transparent; box-shadow: none; border-radius: 0; padding: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
}
.elementor-widget-button .elementor-button-content-wrapper { display: contents; }
/* containers stretch children by default; buttons must hug their text */
.e-con > .elementor-widget-button, .elementor-widget-button { width: fit-content; }
@media (max-width: 600px) {
  .cta-row .elementor-widget-button, .tonight-card .elementor-widget-button,
  .final-ctas .elementor-widget-button { width: 100%; }
}
/* native FAQ accordion: match details.faq-item (flat list, border-bottom,
   custom +/x svg toggles) */
.ava-native-faq .elementor-accordion { border-top: 1px solid var(--line); }
.ava-native-faq .elementor-accordion-item {
  border: none; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; margin: 0;
}
.ava-native-faq .elementor-tab-title {
  font-family: var(--sans); font-weight: 500 !important; font-size: 18px; letter-spacing: -0.02em;
  color: var(--ink); padding: 22px 0; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 24px; cursor: pointer; line-height: 1.35;
}
.ava-native-faq .elementor-tab-title:hover,
.ava-native-faq .elementor-tab-title.elementor-active { color: var(--brand-text); }
.ava-native-faq .elementor-tab-title a { color: inherit; }
/* the visible question text lives in this nested <a>, not the wrapper -
   Elementor's own default (var(--e-global-typography-primary-font-weight),
   700) targets it directly, more specifically than the wrapper rule above */
.ava-native-faq .elementor-accordion-title { font-weight: 500 !important; }
.ava-native-faq .elementor-accordion-icon {
  flex-shrink: 0; width: 28px; height: 28px; order: 2;
  background: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-324cd0871312.svg") center/contain no-repeat;
}
.ava-native-faq .elementor-active .elementor-accordion-icon {
  background-image: url("https://roofers.instawp.site/wp-content/uploads/2026/08/ava-asset-6b935805dec2.svg");
}
.ava-native-faq .elementor-accordion-icon i,
.ava-native-faq .elementor-accordion-icon svg { display: none; }
.ava-native-faq .elementor-tab-content {
  border-top: none; background: transparent; padding: 0 0 22px;
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  color: var(--ink-2); max-width: 720px;
}