:root{
  --bg:#fff; --ink:#111; --muted:#5b5f67; --line:#e6e8ec;
  --accent:#0a7f73; --hover:#085e56; --soft:#f6f9fb;
  --seg-bg:#eaeaec; --seg-active:#fff; --shadow:0 2px 8px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Always use Outfit for all controls as well */
button, input, select, textarea, a { font-family: inherit; }

/* Containers */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* Rail + segmented toggle */
.rail{border-bottom:1px solid var(--line);background:#fff}
.rail__inner{display:flex;align-items:center;justify-content:space-between;height:56px}
.rail__title{font-weight:600}

.segmented{display:flex;gap:0;background:var(--seg-bg);border-radius:999px;padding:3px}
.seg{flex:1;padding:10px 20px;border:none;background:transparent;color:#60646c;
     font-weight:700;border-radius:999px;cursor:pointer}
.seg.active{background:var(--seg-active);color:#1a1d22;box-shadow:var(--shadow)}

/* Panels (consistent padding) */
.panel{padding:24px 16px;max-width:1080px;margin:0 auto}

/* Breadcrumb */
.breadcrumb {
  border-bottom:1px solid var(--line);
  background:#fafafa;
  font-size:14px;
  color:var(--muted);
}
.breadcrumb__inner {
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 16px;
  max-width:1080px;
  margin:0 auto;
}
.breadcrumb__link {
  color:#0b62c1;
  text-decoration:none;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.breadcrumb__link:hover {
  text-decoration:underline;
}
.breadcrumb__sep {
  color:var(--muted);
}
.breadcrumb__current {
  color:var(--ink);
  font-weight:600;
}


/* Hero (Support only) */
.hero{border-bottom:1px solid var(--line);
      background-image:linear-gradient(0deg,rgba(255,255,255,.92),rgba(255,255,255,.92)),var(--hero-image);
      background-size:cover;background-position:center}
.hero__inner{padding:28px 0}
.hero__title{font-size:44px;line-height:1.1;margin:0 0 10px}
.hero__sub{color:var(--muted);margin:0}

/* Grid */
.grid{display:grid;gap:28px}
.grid--topics{grid-template-columns:1fr 1fr;margin:28px 0 10px}
.cell{display:grid;gap:8px;align-content:start;padding:14px 8px 8px;border-top:1px solid var(--line)}
.cell__title{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:20px}
.cell__desc{margin:0;color:var(--muted)}

/* Material Symbols (rounded) */
.msr{
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;            /* icon size */
  line-height: 1;
  display: inline-flex;
  vertical-align: -2px;
  /* Variable font settings */
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  color:#5b5f67;
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
     padding:12px 18px;border-radius:12px;border:1px solid transparent;
     background:var(--accent);color:#fff;font-weight:600;cursor:pointer;text-decoration:none}
.btn:not(.btn--text):hover{background:var(--hover)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:#cfd3d9}
.btn--call{font-size:16px}

/* Text button (hover underline = text width only) */
.btn--text{display:inline;background:transparent;border:none;padding:0;color:#0b62c1;
           font-weight:600;cursor:pointer;text-decoration:none}
.btn--text:hover{ text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:2px }

/* Pledge + Call now */
.pledge{margin:16px 0;background:var(--soft);border:1px solid var(--line);
        border-radius:12px;padding:14px 16px;color:#2c2f35}
.callnow{display:grid;place-items:center;margin:24px 0 40px}
.small{color:var(--muted);font-size:14px}

/* Warranty */
.w-h1{font-size:44px;margin:8px 0}
.w-lede{font-size:18px;margin:0 0 16px;color:var(--ink)}
.w-bullets{margin:0 0 8px;padding-left:22px}
.w-form{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.w-row{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.w-grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
label{font-weight:500}
.req{color:#c34343}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);
    border-radius:10px;font-family:inherit;background:#fafafa}
input:focus,select:focus,textarea:focus{outline:2px solid #cfeee7}
.w-actions{display:flex;gap:12px;align-items:center;margin-top:4px}
.hint{color:var(--muted);font-size:14px}

/* A11y helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Utilities */
.hidden{display:none!important}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
       background:#1f2937;color:#fff;border-radius:10px;padding:10px 14px;
       box-shadow:0 8px 24px rgba(0,0,0,.18);font-weight:500}

/* Responsive */
@media (max-width:900px){
  .hero__title{font-size:36px}
  .grid--topics,.w-grid2{grid-template-columns:1fr}
  .seg{min-width:unset;padding:10px 16px}
}