:root {
  --navy: #07111f;
  --navy-2: #0b1728;
  --text: #0f172a;
  --muted: #6b7289;
  --muted-light: #9aa3b5;
  --white: #ffffff;
  --page: #f4f6fa;
  --line: #e8edf5;
  --blue: #2f6fe4;
  --orange: #f47a12;
  --shadow: 0 24px 60px rgba(8, 18, 36, 0.22);
  --container: 1180px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--blue);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
}

.skip-link:focus {
  top: 12px;
}

.container {
  width: min(var(--container), calc(100% - 56px));
  margin: 0 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(47, 111, 228, 0.28);
}

.btn-primary:hover {
  background: #255fd0;
}

.btn-secondary {
  background: transparent;
  color: #d7deea;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--muted-light);
  margin-bottom: 16px;
}

.eyebrow.dark {
  color: #9aa6bb;
}

.hero-shell {
  background:
    radial-gradient(900px 420px at 80% 10%, rgba(47, 111, 228, 0.12), transparent 55%),
    radial-gradient(700px 380px at 10% 80%, rgba(244, 122, 18, 0.08), transparent 50%),
    var(--navy);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800' fill='none'%3E%3Cpath d='M-40 520C120 470 240 610 420 560C620 504 720 380 900 420C1080 460 1180 560 1440 500' stroke='%23182a44' stroke-width='1.2'/%3E%3Cpath d='M-40 580C160 530 280 670 470 610C680 542 790 430 980 470C1160 508 1260 610 1440 560' stroke='%2314263e' stroke-width='1.2'/%3E%3Cpath d='M-20 200C180 160 300 80 520 120C740 160 860 260 1080 210C1240 174 1340 90 1460 120' stroke='%2315263e' stroke-width='1'/%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 80% 10%, rgba(47, 111, 228, 0.12), transparent 55%),
    var(--navy);
  background-size: cover;
  color: #fff;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 17, 31, 0.72);
  backdrop-filter: blur(16px);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--orange);
}

.brand-mark span {
  color: var(--orange);
}

.brand-text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.main-nav {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: #c9d3e2;
}

.main-nav a:hover,
.main-nav a.is-active {
  color: #fff;
}

.main-nav a.is-active {
  color: #fff;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--orange);
}

.header-cta {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.hero {
  padding: 28px 0 88px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 32px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin-bottom: 22px;
}

.hero h1 span {
  color: var(--orange);
}

.hero-copy {
  max-width: 520px;
  color: #b7c2d4;
  font-size: 16.5px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
}

.hero-points {
  display: flex;
  gap: 28px;
}

.point {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d5deea;
}

.point-icon {
  width: 28px;
  height: 28px;
  color: #c5d0e0;
  flex: none;
}

.point-icon svg {
  width: 100%;
  height: 100%;
}

.point h4 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

.hero-visual {
  position: relative;
  min-height: 520px;
}

.device {
  position: relative;
  width: 250px;
  height: 510px;
  background: #111;
  border: 10px solid #111214;
  border-radius: 42px;
  box-shadow: var(--shadow), 0 0 0 1px #2a2a2e;
  overflow: hidden;
}

.device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.device-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 18px;
  background: #0a0a0a;
  border-radius: 20px;
  z-index: 3;
}

.device-one {
  position: absolute;
  left: 18px;
  top: 18px;
  transform: rotate(-8deg);
  z-index: 2;
}

.device-two {
  position: absolute;
  right: 8px;
  top: 54px;
  transform: rotate(8deg);
  width: 230px;
  height: 470px;
  z-index: 1;
}

.trust-bar {
  background: var(--white);
  padding: 28px 0 8px;
  border-bottom: 1px solid var(--line);
}

.trust-label {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #9aa6bb;
  margin-bottom: 18px;
}

.trust-items {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #5f6b80;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 18px;
}

.trust-items span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-items svg {
  width: 20px;
  height: 20px;
  color: #8b95a8;
}

.services {
  padding: 88px 0 40px;
  background: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.services h2,
.process h2,
.cta-section h2 {
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 18px;
}

.services-left p {
  color: var(--muted);
  max-width: 420px;
  margin-bottom: 26px;
}

.services-left strong {
  color: var(--text);
}

.services-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.service-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

a.service-card:hover,
a.service-card:focus-visible {
  border-color: #c9d6ea;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.service-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.service-card p {
  color: var(--muted);
  font-size: 14px;
}

.svc-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}

.svc-icon svg {
  width: 20px;
  height: 20px;
}

.svc-icon.blue {
  color: #2f6fe4;
  background: #eaf1ff;
}

.svc-icon.green {
  color: #22a45a;
  background: #e9f8ef;
}

.svc-icon.purple {
  color: #6b5cff;
  background: #eeedff;
}

.svc-icon.teal {
  color: #1aa3a8;
  background: #e7f7f7;
}

.svc-icon.orange {
  color: var(--orange);
  background: #fff3e8;
}

.svc-icon.rose {
  color: #d4526e;
  background: #fdecef;
}

.featured-work {
  padding: 28px 0 56px;
  background: var(--white);
}

.featured-card {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 20px;
  align-items: center;
  background:
    radial-gradient(500px 240px at 80% 20%, rgba(47, 111, 228, 0.16), transparent 60%),
    linear-gradient(180deg, #0d1b30 0%, #081221 100%);
  color: #fff;
  border-radius: 28px;
  padding: 42px 28px 42px 48px;
  overflow: hidden;
  min-height: 420px;
}

.featured-content h2 {
  font-size: 44px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.featured-content h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
}

.featured-content p {
  color: #b8c3d4;
  max-width: 420px;
  margin-bottom: 26px;
}

.featured-visual {
  position: relative;
  min-height: 390px;
  height: 100%;
}

.device-small {
  width: 210px;
  height: 430px;
  border-radius: 36px;
}

.featured-visual .device-small:first-child {
  position: absolute;
  left: 24px;
  top: 8px;
  transform: rotate(-6deg);
  z-index: 2;
}

.featured-visual .device-small.tilt {
  position: absolute;
  right: 18px;
  top: 28px;
  transform: rotate(8deg);
  z-index: 1;
}

.process {
  padding: 24px 0 80px;
  background: var(--white);
}

.process h2 {
  margin-bottom: 42px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.step-number {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff3e8;
  color: var(--orange);
  font-weight: 700;
  margin-bottom: 12px;
}

.process-step h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.process-step p {
  color: var(--muted);
  font-size: 15px;
  max-width: 230px;
}

.cta-section {
  position: relative;
  overflow: hidden;
  background: #f7f8fb;
  padding: 72px 0 160px;
}

.cta-mountains {
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  background:
    linear-gradient(180deg, #f7f8fb 0%, rgba(247, 248, 251, 0.72) 28%, rgba(247, 248, 251, 0.08) 70%),
    url("images/cta-mountains.jpg") center 58% / cover no-repeat;
  pointer-events: none;
}

.cta-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  align-items: center;
}

.cta-section h2 {
  font-size: clamp(36px, 5vw, 52px);
}

.cta-section p {
  color: var(--muted);
  max-width: 560px;
}

.cta-action {
  text-align: right;
}

.cta-action p {
  margin-top: 10px;
  font-size: 13px;
}

@media (max-width: 980px) {
  .main-nav {
    display: none;
  }

  .hero-grid,
  .services-grid,
  .featured-card,
  .cta-grid,
  .process-grid,
  .services-right {
    grid-template-columns: 1fr;
  }

  .hero-visual,
  .featured-visual {
    min-height: 460px;
  }

  .device-one,
  .device-two,
  .featured-visual .device-small:first-child,
  .featured-visual .device-small.tilt {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto 16px;
  }

  .hero-visual {
    display: flex;
    justify-content: center;
    gap: 16px;
  }

  .trust-items {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cta-action {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(var(--container), calc(100% - 32px));
  }

  .hero-points,
  .hero-actions {
    flex-direction: column;
  }

  .device,
  .device-two,
  .device-small {
    width: 210px;
    height: 430px;
  }
}
/* Stagg Studio: Canada-first homepage refinements */
.canada-flag {font-size:20px;line-height:1;display:inline-block;margin-left:2px}
.trust-benefits {justify-content:center;gap:clamp(16px,4vw,64px);padding:12px 0 24px}
.estimator-feature {background:#f4f6fa;padding:68px 0}
.estimator-grid {display:grid;grid-template-columns:1.5fr .7fr;gap:36px;align-items:center}
.estimator-feature h2 {font-size:clamp(30px,4vw,44px);letter-spacing:-.03em;line-height:1.15;margin-bottom:14px}
.estimator-feature p {color:var(--muted);max-width:610px}
.estimator-feature .estimate-note {font-size:13px;margin-top:14px}
.estimator-action {text-align:right}
.services-right {grid-template-columns:1fr}
.service-card {align-items:center}
.site-footer {padding:26px 0;background:var(--navy);color:#b7c2d4;font-size:13px}
.case-hero {padding:74px 0 85px}
.case-hero h1 {font-size:clamp(48px,6vw,76px);line-height:1.08;letter-spacing:-.04em;margin-bottom:20px}
.case-hero p {max-width:700px;color:#c2ccda;font-size:18px}
.case-content {padding:74px 0}
.case-content h2 {font-size:clamp(28px,3.5vw,40px);margin-bottom:18px}
.case-content p {max-width:760px;color:var(--muted);margin-bottom:22px}
.case-facts {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:32px 0}
.case-facts div,.case-panel {border:1px solid var(--line);border-radius:18px;padding:22px}
.case-facts small {display:block;color:var(--muted);margin-bottom:6px}
.case-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:34px 0}
.case-panel h3 {margin-bottom:10px}
.case-panel p {margin:0}
.case-screens {display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0}
.case-screens img {width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;border:1px solid var(--line)}
.case-caption {color:var(--muted);font-size:13px}
@media(max-width:980px){.estimator-grid,.case-grid {grid-template-columns:1fr}.estimator-action{text-align:left}}
@media(max-width:640px){.case-facts,.case-screens{grid-template-columns:1fr}.case-hero{padding:55px 0}.brand-text{letter-spacing:.08em}.canada-flag{font-size:17px}}

/* TrekStak editorial case study */
#experience, #approach, #case {scroll-margin-top: 96px;}
.case-study-hero{padding:44px 0 76px;overflow:hidden}
.case-study-hero-grid{display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:56px}
.case-back{display:inline-block;color:#aebbd0;font-size:13px;margin-bottom:54px}
.case-back:hover{color:#fff}
.case-study-hero h1{font-size:clamp(44px,5.2vw,72px);line-height:1.08;letter-spacing:-.045em;margin-bottom:24px}
.case-study-hero h1 span{color:var(--orange)}
.case-lede{font-size:17px;color:#bcc9dc;max-width:520px;line-height:1.75}
.case-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 36px}
.case-hero-meta{display:flex;flex-wrap:wrap;gap:12px;color:#aebbd0;font-size:12px}
.case-hero-meta span{border:1px solid #30415a;border-radius:100px;padding:7px 12px}
.case-showcase{height:530px;position:relative;isolation:isolate}
.case-glow{position:absolute;inset:14% 5%;border-radius:50%;background:radial-gradient(ellipse,rgba(47,111,228,.26),transparent 67%);z-index:-1}
.case-phone{position:absolute;width:235px;height:476px;border:9px solid #161a21;border-radius:38px;overflow:hidden;background:#141923;box-shadow:0 25px 65px rgba(0,0,0,.45)}
.case-phone img{width:100%;height:100%;object-fit:cover}
.case-phone-front{left:8%;top:16px;transform:rotate(-7deg);z-index:2}
.case-phone-back{right:5%;top:44px;transform:rotate(9deg)}
.case-overview,.case-experience,.case-capabilities{padding:90px 0}
.case-overview{background:#fff}.case-experience{background:#f5f7fb}.case-capabilities{background:#fff}
.case-section-intro{max-width:780px;margin-bottom:42px}
.case-section-intro h2,.case-story-row h2,.case-closing h2{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.04em;line-height:1.15;margin-bottom:18px}
.case-section-intro>p:not(.eyebrow),.case-story-row>p,.case-closing p:not(.eyebrow){font-size:16px;color:var(--muted);line-height:1.8}
.case-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.case-metrics>div{padding:25px 18px 25px 0;display:flex;flex-direction:column;gap:8px}
.case-metrics span{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.case-metrics strong{font-size:17px}
.case-narrative{padding:25px 0 70px;background:#fff}
.case-story-row{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:48px 0;border-top:1px solid var(--line);align-items:center}
.case-screen-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-bottom:52px}
.case-screen-gallery figure{min-width:0}
.case-screen-frame{background:#e9edf5;border-radius:22px;padding:18px 28px;display:flex;justify-content:center;align-items:center;min-height:350px}
.case-screen-frame img{height:360px;width:auto;max-width:100%;object-fit:contain;border-radius:16px;box-shadow:0 12px 25px rgba(8,18,36,.13)}
.case-screen-gallery figcaption{display:flex;flex-direction:column;gap:4px;padding-top:15px}
.case-screen-gallery figcaption strong{font-size:15px}.case-screen-gallery figcaption span{font-size:13px;color:var(--muted)}
.case-try-banner{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:38px;border-radius:22px;background:var(--navy);color:#fff}
.case-try-banner .eyebrow{margin-bottom:10px}.case-try-banner h3{font-size:24px;margin-bottom:9px}
.case-try-banner p:not(.eyebrow){font-size:14px;color:#b8c3d4;max-width:580px}
.case-link-pending{font-size:13px;color:#c8d4e6;border:1px solid #465671;padding:13px 16px;border-radius:99px;white-space:nowrap}
.case-capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.case-capability-grid article{padding:24px;border:1px solid var(--line);border-radius:18px}
.case-capability-grid article span{font-size:12px;color:var(--orange);font-weight:700}
.case-capability-grid h3{font-size:17px;margin:28px 0 10px}
.case-capability-grid p{font-size:14px;color:var(--muted);line-height:1.7}
.case-closing{background:#f5f7fb;padding:72px 0}
.case-closing-grid{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.case-closing-actions{display:flex;flex-direction:column;gap:16px;align-items:center}
.case-text-link{font-size:14px;font-weight:600;color:var(--blue)}
@media(max-width:980px){.case-study-hero-grid{grid-template-columns:1fr;gap:15px}.case-showcase{max-width:530px;width:100%;margin:auto}.case-back{margin-bottom:35px}.case-capability-grid{grid-template-columns:repeat(2,1fr)}.case-closing-grid{grid-template-columns:1fr}.case-closing-actions{align-items:flex-start}}
@media(max-width:640px){.case-study-hero{padding:28px 0 40px}.case-showcase{height:360px}.case-phone{width:158px;height:325px;border-width:7px;border-radius:27px}.case-phone-front{left:8%}.case-phone-back{right:8%}.case-overview,.case-experience,.case-capabilities{padding:60px 0}.case-metrics{grid-template-columns:repeat(2,1fr)}.case-story-row{grid-template-columns:1fr;gap:5px;padding:32px 0}.case-screen-gallery{grid-template-columns:1fr;gap:30px}.case-screen-frame img{height:320px}.case-try-banner{flex-direction:column;align-items:flex-start;padding:25px}.case-link-pending{white-space:normal}.case-capability-grid{grid-template-columns:1fr}.case-hero-actions .btn{width:100%}}

/* Phase 3: process and milestone payments */
#steps, #payments, #accounts, #faq {scroll-margin-top: 96px;}
.payment-promise{padding:80px 0;background:#f5f7fb}.payment-promise-grid{display:grid;grid-template-columns:1fr .9fr;gap:70px;align-items:center}.payment-promise h2,.how-section h2,.how-final h2{font-size:clamp(32px,4vw,46px);line-height:1.14;letter-spacing:-.04em;margin-bottom:20px}.payment-promise-grid>div>p:not(.eyebrow){color:var(--muted);max-width:570px;line-height:1.8;margin-bottom:22px}.text-arrow{color:var(--blue);font-weight:700;font-size:15px}.payment-promise-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 30px;box-shadow:0 15px 40px rgba(8,18,36,.05)}.payment-promise-card>span{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:700}.payment-promise-card>div{display:flex;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:15px 0}.payment-promise-card>div>strong{color:var(--orange);font-size:16px}.payment-promise-card p{display:flex;justify-content:space-between;gap:18px;flex:1;font-size:14px}.payment-promise-card b{white-space:nowrap}.payment-promise-card small{display:block;margin-top:16px;color:var(--muted);font-size:12px;line-height:1.6}.process-more{margin-top:30px}.how-hero{padding:78px 0 90px}.how-hero h1{font-size:clamp(45px,6vw,76px);line-height:1.08;letter-spacing:-.045em;margin-bottom:24px}.how-hero h1 span{color:var(--orange)}.how-hero>div>p:not(.eyebrow){color:#b7c2d4;font-size:18px;max-width:730px;line-height:1.75}.how-hero .hero-actions{margin:32px 0}.how-pills{display:flex;gap:12px;flex-wrap:wrap}.how-pills span{font-size:12px;color:#c8d4e6;border:1px solid #33445d;padding:8px 14px;border-radius:30px}.how-section{padding:88px 0}.how-muted{background:#f5f7fb}.how-section>div>p:not(.eyebrow),.how-two-col>div>p:not(.eyebrow),.how-faq-wrap>div>p:not(.eyebrow){color:var(--muted);line-height:1.8;max-width:660px;margin-bottom:18px}.how-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}.how-steps article,.how-account-grid article{border:1px solid var(--line);border-radius:18px;padding:25px;background:#fff}.how-steps article>span,.how-account-grid article>span{color:var(--orange);font-size:12px;font-weight:700;letter-spacing:.07em}.how-steps h3,.how-account-grid h3{font-size:19px;line-height:1.3;margin:25px 0 12px}.how-steps p,.how-account-grid p{color:var(--muted);font-size:14px;line-height:1.75}.how-steps small,.how-account-grid small{display:block;margin-top:24px;font-size:12px;color:#59677b}.how-two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.how-payment-card{background:white;border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 14px 35px rgba(8,18,36,.05)}.how-card-top{display:flex;justify-content:space-between;gap:15px;margin-bottom:12px}.how-card-top span{font-size:12px;color:var(--muted)}.how-payment-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.how-payment-row small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.how-payment-row>strong{white-space:nowrap;font-size:19px}.how-fineprint{color:var(--muted);font-size:12px;line-height:1.7;margin-top:22px}.how-intro{max-width:680px}.how-account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:35px 0}.how-faq-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:70px}.how-faq details{border-bottom:1px solid #dce3ed;padding:18px 0}.how-faq summary{cursor:pointer;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:18px}.how-faq summary::after{content:'+';font-size:20px;color:var(--blue)}.how-faq details[open] summary::after{content:'−'}.how-faq details p{color:var(--muted);font-size:14px;line-height:1.8;padding-top:12px}.how-final{background:#fff;padding:80px 0}.how-final-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.how-final-grid p:not(.eyebrow){color:var(--muted)}.how-final-grid>div:last-child{text-align:center}.how-final-grid .how-fineprint{margin-top:12px}@media(max-width:980px){.payment-promise-grid,.how-two-col,.how-faq-wrap,.how-final-grid{grid-template-columns:1fr;gap:30px}.how-steps,.how-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.payment-promise,.how-section{padding:60px 0}.how-hero{padding:55px 0}.how-steps,.how-account-grid{grid-template-columns:1fr}.how-final-grid>div:last-child{text-align:left}.how-payment-card{padding:20px}.payment-promise-card{padding:20px}.how-hero .hero-actions{flex-direction:column;align-items:stretch}}

/* Sample client portal preview on How It Works */
.process-more{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.portal-promo{padding:86px 0;background:#f7f9fc;border-top:1px solid #edf1f7}.portal-promo-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.portal-promo h2{font-size:clamp(29px,3.7vw,43px);letter-spacing:-.035em;line-height:1.15;margin-bottom:18px}.portal-promo p:not(.eyebrow){color:#6b7289;font-size:15px;max-width:510px;line-height:1.75;margin-bottom:24px}.portal-promo small{display:block;color:#8c99a9;margin-top:14px;font-size:11px}.portal-promo small a{color:var(--blue);font-weight:700}.portal-promo-visual{border:1px solid #e5ebf3;border-radius:19px;background:white;box-shadow:0 24px 70px rgba(10,32,59,.09);padding:27px;transform:rotate(1deg)}.promo-mini-head{display:flex;justify-content:space-between;gap:14px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#6d7a8d}.promo-mini-head b{font-size:13px}.promo-mini-head span:last-child{color:#9ba6b8}.portal-promo-visual h3{font-size:28px;margin:24px 0 20px;letter-spacing:-.05em}.promo-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.promo-mini-stats span{border:1px solid #e8eef6;border-radius:10px;padding:13px 11px;color:#8692a4;font-size:9px;font-weight:700}.promo-mini-stats b{display:block;color:#13263d;font-size:20px;letter-spacing:-.06em;margin-bottom:4px}.promo-mini-track{height:7px;background:#edf2f8;border-radius:10px;margin:25px 0 19px;overflow:hidden}.promo-mini-track span{display:block;background:#2f6fe4;width:25%;height:100%;border-radius:10px}.promo-mini-list{display:grid;gap:10px}.promo-mini-list div{border:1px solid #edf1f7;padding:11px 13px;border-radius:8px;font-size:12px;font-weight:600}.promo-mini-list div span{float:right;color:#8796a8;font-size:10px}@media(max-width:860px){.portal-promo-inner{grid-template-columns:1fr;gap:32px}.portal-promo{padding:55px 0}}