/* Homepage. Hero with the live ez service diagram, promise strip, and the help tile grid. */
@keyframes h2In { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Hero: centered headline + live service diagram ---------- */
.h2-hero { padding: 64px 0 40px; }
.h2-hero__wrap { position: relative; z-index: 1; text-align: center; }
.h2-hero h1 { max-width: 15em; margin: 0 auto 18px; font-size: clamp(36px, 5.4vw, 64px); }
.h2-hero .bs-hero__lede { margin: 0 auto 26px; }
.h2-actions { justify-content: center; }
.h2-rot { display: inline-grid; vertical-align: bottom; text-align: left; }
.h2-rot > span { grid-area: 1 / 1; color: var(--cta); opacity: 0; transform: translateY(.35em); transition: opacity .45s, transform .45s cubic-bezier(.3,1.3,.5,1); }
.h2-rot > span.is-on { opacity: 1; transform: none; }
.h2-rot > span.is-out { opacity: 0; transform: translateY(-.35em); }

.h2-net { position: relative; max-width: 1000px; aspect-ratio: 1000 / 440; margin: 34px auto 0; }
.h2-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h2-lines path { fill: none; stroke: #c9ccd0; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .3s; }
.h2-lines path.is-on { stroke: #DD6226; stroke-width: 3.5; }
.h2-pulses circle { fill: #DD6226; }
:root[data-theme="dark"] .h2-lines path { stroke: rgba(255,255,255,.18); }
:root[data-theme="dark"] .h2-lines path.is-on { stroke: #DD6226; }
.h2-laptop { position: absolute; left: 41%; top: 49%; width: 18%; z-index: 1; display: grid; justify-items: center; }
.h2-laptop__screen { width: 100%; aspect-ratio: 16 / 10.5; display: grid; place-items: center; border-radius: 10px; border: 7px solid #646A73; background: #fff; box-shadow: 0 20px 40px -18px rgba(29,31,34,.5); }
.h2-laptop__screen img { width: 66%; animation: h2Beat 3s ease-in-out infinite; }
@keyframes h2Beat { 50% { transform: scale(1.06); } }
.h2-laptop__base { width: 128%; height: 12px; margin-top: -1px; border-radius: 2px 2px 12px 12px; background: linear-gradient(#7a8089, #4a4f56); }
.h2-node { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.h2-node > .material-icons { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; font-size: 34px; color: #373B40; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(29,31,34,.45); transition: background .3s, color .3s, transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
:root[data-theme="dark"] .h2-node > .material-icons { color: #EFF0F1; background: #2a2d32; border-color: rgba(255,255,255,.12); }
.h2-node small { font: 700 12.5px var(--font-display); white-space: nowrap; color: var(--accent); transition: color .3s; }
.h2-node:hover > .material-icons { transform: scale(1.06); }
.h2-node.is-on > .material-icons { background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff; border-color: transparent; transform: scale(1.12); box-shadow: 0 0 0 8px rgba(221,98,38,.14), 0 18px 34px -12px rgba(221,98,38,.8); }
.h2-node.is-on small { color: var(--cta); }
.h2-cap { display: flex; justify-content: center; align-items: center; gap: 10px; max-width: 640px; min-height: 52px; margin: 18px auto 0; padding: 12px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.45; text-align: left; box-shadow: 0 16px 30px -24px rgba(29,31,34,.4); }
.h2-cap .material-icons { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff; font-size: 18px; }
.h2-cap > span + span { animation: h2In .35s both; }
.h2-cap a { color: var(--cta-deep); font-weight: 700; white-space: nowrap; }
:root[data-theme="dark"] .h2-cap a { color: #f0803f; }

/* ---------- Promise strip ---------- */
.h2-promise { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0; }
.h2-promise__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.h2-pr { display: flex; gap: 12px; align-items: center; justify-content: center; }
.h2-pr > .material-icons { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #373B40; color: #f0803f; font-size: 23px; }
.h2-pr b { display: block; font: 700 16px var(--font-display); color: var(--ink); }
.h2-pr small { font-size: 13.5px; color: var(--accent); }

/* ---------- What can we help with? tile grid ---------- */
main.h2-x .h2-help .section-head--center .eyebrow { background: var(--surface); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; display: inline-flex; }
.h2-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.h2-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -30px rgba(29,31,34,.4); overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; }
.h2-tile__ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #373B40; color: #f0803f; margin-bottom: 8px; transition: background .3s, color .3s; }
.h2-tile__ic .material-icons { font-size: 24px; }
.h2-tile small { font: 700 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--cta); }
.h2-tile h3 { margin: 0; font-size: 16.5px; line-height: 1.3; }
.h2-tile p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--accent); }
.h2-tile__arrow { position: absolute; right: 16px; top: 18px; color: var(--accent); transition: transform .3s, color .3s; }
.h2-tile:hover, .h2-tile:focus-visible { transform: translateY(-5px); border-color: #DD6226; box-shadow: 0 0 0 1px #DD6226, 0 26px 50px -28px rgba(221,98,38,.55); }
.h2-tile:hover .h2-tile__ic, .h2-tile:focus-visible .h2-tile__ic { background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff; }
.h2-tile:hover .h2-tile__arrow, .h2-tile:focus-visible .h2-tile__arrow { transform: translateX(4px); color: var(--cta); }
.h2-tile--lead { grid-column: span 2; grid-row: span 2; padding: 30px; color: #EFF0F1; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(221,98,38,.35), transparent 60%), linear-gradient(160deg, #33363b, #222428); border-color: transparent; }
.h2-tile--lead .h2-tile__ic { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff; }
.h2-tile--lead .h2-tile__ic .material-icons { font-size: 32px; }
.h2-tile--lead small { color: #f0803f; }
.h2-tile--lead h3 { color: #fff; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }
.h2-tile--lead p { color: #c9ccd0; font-size: 15.5px; margin: 6px 0 10px; }
.h2-tile--lead ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.h2-tile--lead li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; color: #EFF0F1; }
.h2-tile--lead li .material-icons { color: #f0803f; font-size: 19px; }
.h2-tile__go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 12px 20px; border-radius: 999px; background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff; font: 700 15px var(--font-display); box-shadow: 0 12px 26px -10px rgba(221,98,38,.75); }
.h2-tile__go .material-icons { font-size: 19px; transition: transform .3s; }
.h2-tile--lead:hover .h2-tile__go .material-icons { transform: translateX(4px); }

@media (max-width: 980px) {
  .h2-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .h2-net { aspect-ratio: auto; display: grid; justify-items: center; gap: 18px; margin-top: 26px; }
  .h2-lines { display: none; }
  .h2-laptop { position: static; width: 190px; }
  .h2-nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; width: 100%; }
  .h2-node { position: static; transform: none; }
  .h2-node > .material-icons { width: 58px; height: 58px; font-size: 27px; }
  .h2-node small { white-space: normal; font-size: 11.5px; text-align: center; }
  .h2-promise__row { grid-template-columns: 1fr; }
  .h2-pr { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .h2-bento { grid-template-columns: 1fr; }
  .h2-tile--lead { grid-column: auto; grid-row: auto; padding: 22px; }
  .h2-hero { padding-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .h2-pulses { display: none; }
  .h2-laptop__screen img, .h2-cap > span + span { animation: none; }
  .h2-rot > span { transition: none; }
}

/* Full-width MDM tile closing out the help grid (Oct 29) */
.h2-tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; padding: 22px 56px 22px 22px; }
.h2-tile--wide .h2-tile__ic { flex: none; width: 56px; height: 56px; margin: 0; border-radius: 16px; background: linear-gradient(140deg, #f0803f, #DD6226); color: #fff;
  box-shadow: 0 12px 24px -12px rgba(221,98,38,.8); }
.h2-tile--wide .h2-tile__ic .material-icons { font-size: 28px; }
.h2-wide__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.h2-tile--wide h3 { font-size: 18px; }
.h2-new { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #373B40; color: #fff; font-style: normal; font-size: 10px; letter-spacing: .08em; vertical-align: 1px; }
.h2-wide__pts { flex: none; display: grid; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); }
.h2-wide__pts > span { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--font-display); color: var(--ink); white-space: nowrap; }
.h2-wide__pts .material-icons { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 16px; background: #373B40; color: #f0803f; }
.h2-tile--wide .h2-tile__arrow { top: 50%; margin-top: -12px; }
.h2-tile--wide:hover .h2-tile__ic, .h2-tile--wide:focus-visible .h2-tile__ic { background: linear-gradient(140deg, #f0803f, #DD6226); }
@media (max-width: 760px) {
  .h2-tile--wide { flex-direction: column; align-items: flex-start; padding: 20px; }
  .h2-wide__pts { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); width: 100%; }
  .h2-tile--wide .h2-tile__arrow { top: 18px; margin-top: 0; }
}