@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");


:root {
  --navy: #061b45;
  --formsy-logo-navy: #011841;
  --navy-2: #092b67;
  --blue: #155eef;
  --blue-dark: #0d4ed8;
  --green: #12b76a;
  --green-accessible: #078347;
  --green-dark: #0e9f5f;
  --text: #0a1f44;
  --muted: #5f6f89;
  --line: #d9e2f1;
  --surface: #ffffff;
  --surface-soft: #f4f8ff;
  --surface-blue: #eef4ff;
  --footer: #031d4a;
  --footer-bottom: #083b85;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(13, 39, 86, .08);
  --container: 1420px;
  --font: "Manrope", "Segoe UI", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button, input, select, textarea { font: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(21,94,239,.35);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 999;
  background: white;
  padding: 10px 14px;
  border-radius: 6px;
}
.skip-link:focus { left: 8px; }

.topbar {
  background: var(--navy);
  color: white;
}
.topbar-inner {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-btn {
  min-width: 112px;
  text-align: center;
  background:var(--green-accessible);
  color: white;
  padding: 6px 14px;
  border-radius: 5px;
  font-weight: 700;
  transition: background .2s ease;
}
.login-btn:hover { background: var(--green-dark); }
.phone-link {
  font-size: clamp(1.05rem, 1.45vw, 1.65rem);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.phone-link img { width: 24px; height: 24px; flex: 0 0 auto; }

/* Consistent text-link hover treatment */
a:not(.btn):not(.login-btn):hover { color: var(--blue); }

.site-header {
  background: #fff;
  border-bottom: 1px solid #edf1f7;
}
.header-inner {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.brand img { width: 315px; max-width: 38vw; height: auto; }

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: white;
  color: var(--navy);
  border-radius: 7px;
  padding: 9px 12px;
}
.main-nav {
  display: flex;
  align-items: stretch;
  gap: 56px;
  height: 120px;
}
.main-nav a {
  display: grid;
  place-items: center;
  position: relative;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--formsy-logo-navy);
  transition: color .2s ease;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] { color: var(--blue) !important; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }

.hero {
  background: linear-gradient(105deg, #fff 0 47%, #eef5ff 47% 100%);
  overflow: hidden;
}
.hero-grid {
  min-height: 430px;
  display: grid;
  grid-template-columns: .95fr 1.25fr;
  align-items: center;
  gap: 40px;
}
.hero-copy { padding: 48px 0 56px; position: relative; z-index: 2; }
.hero h1 {
  margin: 0 0 28px;
  font-size: clamp(2.6rem, 4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 800;
}
.blue { color: var(--blue); }
.green { color:var(--green-accessible); }
.hero-lead {
  max-width: 620px;
  font-size: clamp(1.2rem, 1.5vw, 1.65rem);
  font-weight: 700;
  line-height: 1.55;
}
.hero-sub {
  max-width: 570px;
  color: #4c5e79;
  font-size: clamp(1.12rem, 1.4vw, 1.55rem);
  margin-top: 34px;
}
.hero-picture {
  display: block;
  width: 100%;
}

.hero-image {
  align-self: end;
  justify-self: end;
  width: 125%;
  max-width: 1080px;
  aspect-ratio: 1338 / 668;
  margin-right: -110px;
  position: relative;
  z-index: 1;
}

.how {
  background: var(--surface-blue);
  padding: clamp(30px, 3vw, 46px) 0 clamp(34px, 3.2vw, 52px);
}
.section-title {
  text-align: center;
  margin: 0 0 clamp(28px, 3vw, 48px);
  font-size: clamp(2.25rem, 3.15vw, 3.65rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.035em;
}



















/* Laptop / small desktop: preserve the reference layout but tighten it. */


/* Tablet: stack the two halves cleanly instead of squeezing the desktop layout. */


/* Phone: make each part readable and touch-friendly, with no overflow. */
@media (max-width: 620px) {
  .section-title { margin-bottom: 28px; }
  
  
  
  
  
  
  
  
  
  
  
  
  
}


/* Homepage reassurance section */
.your-forms {
  background: var(--surface-blue);
  padding: 0 0 clamp(42px, 5vw, 72px);
}
.your-forms-card {
  background: #fff;
  border: 1px solid #e4eaf3;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(13,39,86,.07);
  padding: clamp(34px, 4vw, 58px) clamp(24px, 5vw, 70px) clamp(30px, 4vw, 54px);
}
.your-forms-intro {
  max-width: 760px;
  margin: 0 auto clamp(30px, 3.8vw, 50px);
  text-align: center;
}
.your-forms-intro h2 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: clamp(1.75rem, 2.55vw, 2.75rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.your-forms-intro p {
  margin: 8px auto 0;
  color: #354966;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.55;
}
.your-forms-intro .your-forms-lead {
  color: var(--navy);
  font-weight: 600;
}
.your-forms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.your-forms-item {
  position: relative;
  text-align: center;
  padding: 0 clamp(22px, 3vw, 46px);
}
.your-forms-item + .your-forms-item {
  border-left: 1px solid #dbe4f1;
}
.your-forms-item img {
  display: block;
  width: clamp(145px, 13vw, 205px);
  height: clamp(130px, 12vw, 185px);
  object-fit: contain;
  margin: 0 auto 18px;
}
.your-forms-item h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: clamp(1.14rem, 1.35vw, 1.42rem);
  font-weight: 800;
}
.your-forms-item p {
  max-width: 290px;
  margin: 0 auto;
  color: #354966;
  line-height: 1.5;
}


.cta-wrap { padding: clamp(32px, 4vw, 54px) 0 38px; }
.cta {
  min-height: 125px;
  border-radius: 14px;
  background: linear-gradient(110deg, #0b57d5, #0544b9);
  color: white;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 24px 44px;
  box-shadow: var(--shadow);
}
.cta-icon { width: 58px; flex: 0 0 auto; }
.cta-copy { flex: 1; }
.cta-copy strong { font-size: 1.45rem; display:block; }
.cta-copy span { opacity: .96; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 10px 30px;
  border-radius: 7px;
  border: 2px solid var(--blue);
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--formsy-logo-navy); color: #fff; border-color: var(--formsy-logo-navy); }
.btn-primary:hover { background: var(--blue); border-color: var(--blue); }
.btn-green { background:var(--green-accessible); color: white; border-color: var(--green); }
.btn-outline { background: #fff; color: var(--formsy-logo-navy); border-color: var(--formsy-logo-navy); }
.btn-outline:hover, .btn-outline:focus-visible { color: var(--blue); border-color: var(--blue); }

.form-types {
  border-top: 1px solid #e6ebf4;
  padding: 34px 0 40px;
  background: #fff;
}
.form-types-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.form-types h2 {
  margin: 0;
  font-size: 1.55rem;
}
.carousel-controls {
  display: flex;
  gap: 8px;
}
.carousel-btn {
  width: 42px;
  height: 42px;
  border: 1px solid #d7e0ee;
  border-radius: 50%;
  background: #fff;
  color: var(--blue);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.carousel-btn:hover {
  background: var(--surface-blue);
  border-color: #b8cae8;
  transform: translateY(-1px);
}
.carousel-btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}
.form-types-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  overscroll-behavior-inline: contain;
}
.form-types-carousel::-webkit-scrollbar {
  display: none;
}
.form-type {
  min-height: 132px;
  scroll-snap-align: start;
  border: 1px solid #e4eaf3;
  border-radius: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 18px 14px;
  font-size: .88rem;
  font-weight: 700;
  color: #203655;
  box-shadow: 0 5px 16px rgba(13,39,86,.045);
}




.form-type img {
  width: 64px;
  height: 64px;
  margin: 0;
}

.site-footer {
  background: var(--footer);
  color: white;
}
.footer-main {
  min-height: 200px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 60px;
  padding: 30px 0;
}
.footer-main h2 {
  font-size: 1rem;
  text-decoration: underline;
  margin: 0 0 12px;
}
.footer-main p { margin: 2px 0; }
.footer-main a:hover { text-decoration: underline; }
.footer-blog { text-align:right; }
.footer-bottom {
  background: var(--footer-bottom);
  text-align: center;
  padding: 13px 20px 15px;
  font-size: .88rem;
}
.footer-bottom p { margin: 2px 0; }

/* Pricing */
.pricing-main {
  background: linear-gradient(#fff, #f4f8ff 48%, #fff 100%);
  padding: 30px 0 20px;
}



.plans {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: white;
  border: 1px solid #dbe4f1;
  border-radius: 16px;
  padding: 28px 30px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.plan.featured { border: 2px solid var(--blue); }
.badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  text-align: center;
  background: var(--blue);
  color: white;
  border-radius: 5px;
  padding: 4px 12px;
  font-weight: 800;
}
.plan-icon {
  width: 82px;
  height: 82px;
  margin: 0 auto 7px;
}
.plan h2 { text-align:center; font-size:1.8rem; margin:0; }
.plan-desc { text-align:center; min-height: 60px; margin:5px 0 14px; }
.plan-price {
  border-top: 1px solid #dfe6f0;
  text-align:center;
  padding: 10px 0 14px;
}
.plan-price strong {
  display:block;
  font-size:2.15rem;
  color: var(--navy-2);
}
.plan-price small { display:block; }
.setup-note { color:var(--green-dark); font-weight:800; }
.features {
  list-style:none;
  padding:0;
  margin: 0 0 18px;
  display:grid;
  gap: 9px;
  flex: 1;
}
.features li {
  position:relative;
  padding-left: 27px;
  font-size: .96rem;
}
.features li::before {
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--blue);
  font-weight:900;
  width:18px;
  height:18px;
  border:1.5px solid var(--blue);
  border-radius:50%;
  line-height:15px;
  text-align:center;
  font-size:.72rem;
}
.plan .btn { width:100%; }

.pricing-extras {
  max-width: 1380px;
  margin: 56px auto 0;
  display:grid;
  gap:18px;
}
.extra-card {
  background:white;
  border:1px solid #dfe6f1;
  border-radius:15px;
  box-shadow: var(--shadow);
  min-height:130px;
  display:grid;
  grid-template-columns: 90px 1fr auto;
  gap:30px;
  align-items:center;
  padding:22px 44px;
}
.extra-card .extra-icon { width:70px; height:70px; }
.extra-card h2 { font-size:1.35rem; margin:0 0 4px; }
.extra-card p { margin:2px 0; }
.extra-link { color:var(--blue); font-weight:800; }
.setup-visual { width:230px; mix-blend-mode:multiply; }
.fair-use {
  text-align:center;
  font-size:.9rem;
  margin: 16px 0 0;
}

/* Medium desktop / half-width browser: keep the hero in two columns,
   but bring the artwork fully inside the same right-hand container edge
   as CONTACT. This matches the requested composition without changing
   the full widescreen layout. */
@media (min-width: 1101px) and (max-width: 1600px) {
  /* As the artwork grows leftwards on narrower desktop windows, progressively
     reduce the usable width of the copy. This makes the paragraphs wrap before
     they can run underneath the image, while leaving the widescreen layout alone. */
  .hero-copy {
    padding-right: clamp(0px, calc((1600px - 100vw) * .22), 110px);
  }
  .hero-lead,
  .hero-sub {
    max-width: 100%;
  }

  .hero-image {
    /* Keep the same large scale as the widescreen hero and anchor it to the
       right-hand container edge. Extra width therefore grows to the left. */
    width: 125%;
    max-width: 1080px;
    margin-right: 0;
    transform: none;
    align-self: end;
    justify-self: end;
  }
}

@media (max-width: 1100px) {
  .main-nav { gap: 28px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero { background:#fff; }
  /* Tablet and smaller: always show the complete hero artwork.
     Do not oversize or offset it at these widths, otherwise the transparent
     PNG can extend beyond the hero and appear cropped. */
  .hero-image {
    display: block;
    justify-self: center;
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
    transform: none;
  }
  .form-types-carousel { grid-auto-columns: minmax(165px, 22vw); }
  .plans { grid-template-columns:1fr; max-width:600px; }
  .plan-desc { min-height:0; }
}

@media (max-width: 760px) {
  .hero-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    justify-self: center;
    transform: none;
  }
  .container { width:min(calc(100% - 30px), var(--container)); }
  .topbar-inner { min-height:50px; }
  .login-btn { min-width:84px; }
  .phone-link { font-size:.95rem; }
  .phone-link img { width:20px; height:20px; }
  .header-inner { min-height:82px; gap:12px; }
  .brand { min-width:0; flex:1 1 auto; }
  .brand img { display:block; width:210px; max-width:100%; }
  .nav-toggle { display:block; flex:0 0 auto; white-space:nowrap; }
  .main-nav {
    display:none;
    position:absolute;
    top:132px;
    left:0; right:0;
    height:auto;
    background:white;
    padding:12px 15px 18px;
    flex-direction:column;
    gap:0;
    z-index:20;
    border-bottom:1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .main-nav.is-open { display:flex; }
  .main-nav a { min-height:48px; }
  .main-nav a[aria-current="page"]::after { height:3px; }
  .hero-grid { min-height:0; gap:0; }
  .hero-copy { padding:38px 0 22px; }
  .hero h1 { font-size:2.7rem; }
  .hero-lead { font-size:1.1rem; }
  .hero-sub { font-size:1.02rem; margin-top:22px; }
  .section-title { font-size:2rem; }
  
  .cta { padding:22px; flex-wrap:wrap; }
  .cta-icon { width:44px; }
  .cta .btn { width:100%; }
  .form-types {
    padding: 28px 0 34px;
  }
  .form-types-header {
    margin-bottom: 16px;
  }
  .form-types h2 {
    font-size: 1.3rem;
  }
  .form-types-carousel {
    grid-auto-columns: minmax(150px, 72vw);
    gap: 12px;
  }
  .form-type {
    min-height: 150px;
  }
  .form-type img {
    width: 72px;
    height: 72px;
  }
  .footer-main { grid-template-columns:1fr; gap:24px; min-height:0; }
  .footer-blog { text-align:left; }
  .pricing-main { padding-top:22px; }
  
  
  .plan { padding:28px 22px 22px; }
  .extra-card { grid-template-columns:58px 1fr; padding:20px; gap:16px; }
  .extra-card .extra-icon { width:54px; height:54px; }
  .extra-card > .btn { grid-column:1/-1; justify-self:center; }
}

/* FAQ */
.faq-main {
  background: #fff;
}











.faq-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding-top: 54px;
  padding-bottom: 70px;
}

.faq-sections {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid #dfe7f2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(13,39,86,.05);
}

.faq-sections strong {
  display: block;
  margin: 0 0 4px;
  padding: 10px 12px 9px;
  border-bottom: 1px solid #dfe7f2;
  color: var(--formsy-logo-navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.faq-sections a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--formsy-logo-navy);
  font-size: .92rem;
  font-weight: 700;
}

.faq-sections a:hover,
.faq-sections a:focus-visible {
  color: var(--blue);
  background: var(--surface-blue);
}

.faq-content {
  min-width: 0;
}

.faq-group {
  scroll-margin-top: 24px;
  margin-bottom: 56px;
}

.faq-group:last-child {
  margin-bottom: 0;
}

.faq-group > h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: clamp(1.75rem, 2.5vw, 2.35rem);
  letter-spacing: -.02em;
}

.faq-item {
  border-top: 1px solid #dce5f0;
  background: #fff;
}

.faq-item:last-child {
  border-bottom: 1px solid #dce5f0;
}

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 20px 54px 20px 0;
  color: var(--formsy-logo-navy);
  font-size: 1.08rem;
  font-weight: 800;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 1px solid #c9d7ea;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1;
  transition: transform .18s ease, background .18s ease;
}

.faq-item[open] summary::after {
  content: "−";
  background: var(--surface-blue);
}

.faq-item summary:hover,
.faq-item summary:focus-visible,
.faq-item[open] summary {
  color: var(--blue);
}

/* FAQ question states: dark Formsy blue when collapsed, light blue on hover/open */
.faq-item:not([open]) summary {
  color: var(--formsy-logo-navy);
}

.faq-item:not([open]) summary:hover,
.faq-item:not([open]) summary:focus-visible,
.faq-item[open] summary {
  color: var(--blue);
}

.faq-answer {
  max-width: 900px;
  padding: 0 54px 22px 0;
  color: #435570;
  font-size: 1rem;
  line-height: 1.7;
}

.faq-answer p {
  margin: 0 0 12px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-note {
  font-size: .9rem;
  color: var(--muted);
}

@media (max-width: 960px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 36px;
  }

  .faq-sections {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  

  

  .faq-layout {
    padding-top: 28px;
    padding-bottom: 48px;
  }

  .faq-sections {
    grid-template-columns: 1fr;
  }

  .faq-group {
    margin-bottom: 42px;
  }

  .faq-item summary {
    padding: 18px 46px 18px 0;
    font-size: 1rem;
  }

  .faq-answer {
    padding-right: 4px;
    font-size: .96rem;
  }
}

/* Supporting information pages */
.info-page { background:#fff; }
.info-hero { background:linear-gradient(110deg,#f7faff 0%,#edf4ff 100%); border-bottom:1px solid #e3ebf7; }
.info-hero-grid { min-height:330px; display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:70px; align-items:center; padding-top:48px; padding-bottom:48px; }
.eyebrow { margin:0 0 12px; color:var(--blue); font-size:.88rem; font-weight:800; letter-spacing:.09em; }
.info-hero h1 { max-width:900px; margin:0 0 20px; font-size:clamp(2.45rem,4vw,4.3rem); line-height:1.05; letter-spacing:-.035em; }
.info-lead { max-width:880px; margin:0; color:#435570; font-size:clamp(1.08rem,1.5vw,1.35rem); line-height:1.65; }
.info-hero-icon { width:170px; height:170px; justify-self:center; object-fit:contain; }
.info-content { padding:64px 0 72px; }
.info-grid { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:70px; align-items:start; }
.info-main { min-width:0; }
.info-section { padding:0 0 50px; margin:0 0 50px; border-bottom:1px solid #e5ebf4; }
.info-section:last-child { margin-bottom:0; }
.info-section h2 { margin:0 0 18px; font-size:clamp(1.75rem,2.5vw,2.35rem); letter-spacing:-.025em; line-height:1.15; }
.info-section h3 { margin:0 0 8px; font-size:1.15rem; }
.info-section p { max-width:900px; margin:0 0 16px; color:#435570; font-size:1.03rem; line-height:1.75; }
.process-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:30px; }
.process-grid article,.benefit-grid article { border:1px solid #dfe7f3; border-radius:14px; background:#fff; padding:24px; box-shadow:0 7px 24px rgba(13,39,86,.05); }
.process-grid article > span { display:grid; place-items:center; width:36px; height:36px; margin-bottom:16px; border-radius:50%; background:var(--surface-blue); color:var(--blue); font-weight:800; }
.process-grid p,.benefit-grid p { font-size:.98rem; line-height:1.6; margin:0; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:30px; }
.split-info { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:40px; align-items:start; }
.feature-box { background:var(--surface-blue); border:1px solid #dbe7f8; border-radius:14px; padding:28px 30px; }
.feature-box h3 { margin-bottom:18px; }
.tick-list { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.tick-list li { position:relative; padding-left:28px; color:#344966; }
.tick-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green-dark); font-weight:900; }
.info-aside { position:sticky; top:24px; display:grid; gap:18px; }
.aside-card { border:1px solid #dfe7f3; border-radius:16px; background:#fff; padding:28px; box-shadow:var(--shadow); }
.aside-card-soft { background:var(--surface-blue); box-shadow:none; }
.aside-card h2 { margin:0 0 12px; font-size:1.45rem; }
.aside-card h3 { margin:0 0 10px; font-size:1.2rem; }
.aside-card p { margin:0 0 20px; color:#4c5e79; line-height:1.65; }
.aside-card .btn { width:100%; }
.info-cta { padding:0 0 54px; }
.info-cta-inner { min-height:130px; display:flex; align-items:center; gap:30px; padding:28px 42px; border-radius:15px; background:linear-gradient(110deg,#0b57d5,#0544b9); color:#fff; box-shadow:var(--shadow); }
.info-cta-inner > div { flex:1; }
.info-cta-inner strong { display:block; margin-bottom:3px; font-size:1.4rem; }
.info-cta-inner span { opacity:.96; }

@media (max-width:1050px) {
  .info-hero-grid { grid-template-columns:1fr 150px; gap:36px; }
  .info-hero-icon { width:130px; height:130px; }
  .info-grid { grid-template-columns:1fr; gap:44px; }
  .info-aside { position:static; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .benefit-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .info-hero-grid { min-height:0; grid-template-columns:1fr; gap:24px; padding-top:38px; padding-bottom:38px; }
  .info-hero-icon { width:105px; height:105px; justify-self:center; }
  .info-hero h1 { font-size:2.5rem; }
  .info-content { padding:42px 0 52px; }
  .info-section { margin-bottom:38px; padding-bottom:38px; }
  .process-grid,.split-info,.info-aside { grid-template-columns:1fr; }
  .info-cta-inner { padding:24px; flex-wrap:wrap; }
  .info-cta-inner .btn { width:100%; }
}


/* Consistent internal-page presentation */
.pricing-main { padding: 0; background: linear-gradient(#fff, #f4f8ff 58%, #fff 100%); }
.pricing-content { padding-top: 54px; }
.faq-main { padding-top: 0; }
.faq-page-hero { margin-bottom: 0; }
.faq-layout { padding-top: 54px; }
.parent-back { padding-top: 22px; padding-bottom: 2px; }
.parent-back a { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:.92rem; font-weight:700; }
.parent-back a:hover, .parent-back a:focus-visible { color:var(--blue); }
.back-to-top { position:fixed; right:24px; bottom:24px; z-index:40; display:flex; align-items:center; gap:7px; min-height:44px; padding:9px 14px; border:1px solid #d5e0f0; border-radius:999px; background:rgba(255,255,255,.96); color:var(--navy); font-size:.86rem; font-weight:800; box-shadow:0 8px 24px rgba(13,39,86,.13); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease,transform .2s ease,visibility .2s ease,color .2s ease,border-color .2s ease; }
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover, .back-to-top:focus-visible { color:var(--blue); border-color:#b8cae8; }
@media (max-width:760px) {
  .pricing-content, .faq-layout { padding-top:34px; }
  .parent-back { padding-top:16px; }
  .back-to-top { right:14px; bottom:14px; width:44px; height:44px; justify-content:center; padding:0; }
  .back-to-top span { display:none; }
}


/* Contextual information links */
.info-link {
  display: inline-flex;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
  text-decoration: none;
}
.info-link:hover,
.info-link:focus-visible {
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
.footnote-link {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.footnote-link:hover,
.footnote-link:focus-visible { text-decoration: underline; }
#unlimited-completed-form-storage,
#sequential-numbering { scroll-margin-top: 24px; }



/* Ensure information icon reverses cleanly on hover/focus */
a.info-link:hover,
a.info-link:focus-visible {
  background-color: var(--blue);
  border-color: var(--blue);
  color: #fff !important;
}


/* Footer social links */
.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.footer-social a:hover { color: #6ea8ff; text-decoration: none; }
.social-icon {
  width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  font-size: .8rem;
  line-height: 1;
  font-weight: 800;
}
.social-facebook { font-family: Arial, sans-serif; font-size: 1rem; }

/* Social icon-only footer links */
.footer-social { gap: 10px; }
.footer-social a {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
}
.social-icon { margin: 0; }

/* Legal pages */
.legal-page { background:#fff; }
.legal-hero { background:linear-gradient(135deg,#f3f7ff 0%,#fff 72%); border-bottom:1px solid #e6edf8; padding:52px 0 44px; }
.legal-hero .eyebrow { color:var(--blue); font-weight:800; letter-spacing:.08em; font-size:.82rem; margin:0 0 10px; }
.legal-hero h1 { margin:0 0 12px; font-size:clamp(2.35rem,4vw,4rem); line-height:1.05; letter-spacing:-.035em; }
.legal-hero p { max-width:820px; margin:0; color:var(--muted); font-size:1.08rem; }
.legal-wrap { width:min(calc(100% - 48px),var(--container)); margin:0 auto; display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; padding:48px 0 72px; align-items:start; }
.legal-nav { position:sticky; top:24px; display:grid; gap:4px; padding:16px; border:1px solid #dfe7f2; border-radius:14px; background:#fff; box-shadow:0 8px 24px rgba(13,39,86,.05); }
.legal-nav strong { display:block; margin:0 0 4px; padding:10px 12px 9px; border-bottom:1px solid #dfe7f2; color:var(--formsy-logo-navy); font-size:1rem; font-weight:800; letter-spacing:.01em; }
.legal-nav a { display:block; padding:10px 12px; border-radius:8px; color:var(--formsy-logo-navy); font-size:.92rem; font-weight:700; }
.legal-nav a:hover,
.legal-nav a:focus-visible { color:var(--blue); background:var(--surface-blue); }
.legal-content { min-width:0; }
.legal-content section { scroll-margin-top:28px; margin:0 0 38px; }
.legal-content h2 { font-size:1.55rem; line-height:1.25; margin:0 0 12px; }
.legal-content h3 { font-size:1.08rem; margin:20px 0 8px; }
.legal-content p, .legal-content li { color:#304665; }
.legal-content ul { padding-left:22px; }
.legal-content li { margin:7px 0; }
.legal-note { border-left:4px solid var(--blue); background:#f3f7ff; padding:16px 18px; border-radius:0 10px 10px 0; }
.legal-meta { margin-top:16px!important; font-size:.92rem!important; }
@media (max-width:800px){ .legal-wrap{width:min(calc(100% - 30px),var(--container));grid-template-columns:1fr;gap:28px;padding-top:30px}.legal-nav{position:static}.legal-hero{padding:38px 0 34px} }

/* Equal vertical spacing for internal page hero headings */
.info-hero-grid {
  min-height: 0;
  padding-top: 48px;
  padding-bottom: 48px;
}

.legal-hero {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (max-width: 760px) {
  .info-hero-grid {
    padding-top: 38px;
    padding-bottom: 38px;
  }
}

@media (max-width: 800px) {
  .legal-hero {
    padding-top: 38px;
    padding-bottom: 38px;
  }
}


/* API Integration: carousel follows the CTA banner without an extra gap */

/* Form type cards are links to dedicated SEO pages */
.form-types-carousel a.form-type { color: inherit; text-decoration: none; }
.form-types-carousel a.form-type:hover span, .form-types-carousel a.form-type:focus-visible span { color: var(--blue, #1769aa); }
.form-types-carousel a.form-type:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

@media (max-width: 760px) {
  .your-forms { padding-bottom: 34px; }
  .your-forms-card { padding: 30px 20px 26px; }
  .your-forms-intro { margin-bottom: 24px; }
  .your-forms-grid { grid-template-columns: 1fr; }
  .your-forms-item { padding: 26px 8px; }
  .your-forms-item + .your-forms-item {
    border-left: 0;
    border-top: 1px solid #dbe4f1;
  }
  .your-forms-item img { width: min(190px, 62vw); height: 150px; margin-bottom: 12px; }
}


/* Homepage How it works: four-step process */
.how-steps { padding-bottom: clamp(42px, 4vw, 64px); }
.how-steps .section-title { margin-bottom: clamp(28px, 3vw, 44px); }
.how-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
  position: relative;
}
.how-step { text-align: center; position: relative; min-width: 0; }
.how-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: clamp(46px, 4.2vw, 62px);
  left: calc(50% + clamp(58px, 5vw, 72px));
  width: calc(100% - clamp(82px, 7vw, 112px));
  border-top: 2px dashed #b8d2f3;
}
.how-step img {
  display: block;
  width: clamp(92px, 8vw, 120px);
  height: clamp(92px, 8vw, 120px);
  margin: 0 auto 18px;
  position: relative;
  z-index: 1;
}
.how-step h3 { margin: 0 0 10px; color: var(--navy); font-size: clamp(1.02rem, 1.2vw, 1.25rem); line-height: 1.25; font-weight: 800; }
.how-step p { margin: 0 auto; max-width: 250px; color: #354966; font-size: clamp(.9rem, 1vw, 1.02rem); line-height: 1.45; }
@media (max-width: 900px) {
  .how-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 34px; }
  .how-step::after { display: none; }
}
@media (max-width: 560px) {
  .how-steps-grid { grid-template-columns: 1fr; gap: 32px; }
  .how-step img { width: 96px; height: 96px; margin-bottom: 14px; }
  .how-step p { max-width: 300px; }
}

/* Pricing: breathing room between the API Integration banner and the form types section */
.pricing-extras { margin-bottom: 42px; }

/* Digital form product pages: reusable image-led hero */
.product-info-hero-grid {
  grid-template-columns:minmax(0,1fr) minmax(330px,520px);
  gap:54px;
  align-items:center;
}
.product-hero-image {
  display:block;
  width:100%;
  max-width:520px;
  max-height:390px;
  object-fit:contain;
  object-position:center;
  justify-self:end;
}
.product-hero-actions { margin-top:26px; }
.product-hero-actions .btn { width:auto; }
@media (max-width:1050px) {
  .product-info-hero-grid { grid-template-columns:minmax(0,1fr) minmax(260px,390px); gap:34px; }
  .product-hero-image { max-width:390px; max-height:320px; }
}
@media (max-width:760px) {
  .product-info-hero-grid { grid-template-columns:1fr; gap:28px; }
  .product-hero-image { width:min(100%,430px); max-width:430px; max-height:none; justify-self:center; }
  .product-hero-actions .btn { width:100%; }
}

/* Product hero example caption */
.product-hero-figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.product-hero-figure .product-hero-image{width:100%;height:auto}
.product-hero-figure figcaption{max-width:560px;margin:12px auto 0;color:#63748b;font-size:.86rem;line-height:1.5;text-align:center}
@media (max-width: 800px){.product-hero-figure figcaption{max-width:92%;font-size:.82rem}}

/* Contact form */
.contact-form { margin-top: 28px; max-width: 760px; }
.form-field { margin-bottom: 20px; }
.form-field label { display:block; margin-bottom:8px; color:var(--navy); font-weight:700; }
.field-optional { color:var(--muted); font-weight:500; }
.form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"], .form-field input[type="file"], .form-field textarea { width:100%; border:1px solid #cbd7e8; border-radius:10px; background:#fff; color:var(--text); padding:13px 14px; line-height:1.45; transition:border-color .18s ease, box-shadow .18s ease; }
.form-field textarea { resize:vertical; min-height:160px; }
.form-field input:focus, .form-field textarea:focus { outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,94,239,.12); }
.form-field input[type="file"] { padding:10px; }
.field-help, .form-privacy { margin:7px 0 0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.form-privacy { margin-top:14px; }
.form-alert { margin:0 0 22px; padding:13px 15px; border-radius:10px; font-weight:650; }
.form-alert-success { background:#ecfdf3; border:1px solid #abefc6; color:#067647; }
.form-alert-error { background:#fff4f2; border:1px solid #fecdca; color:#b42318; }
.form-honeypot { position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.contact-form .btn { cursor:pointer; }

.required-note { margin:12px 0 0; color:var(--muted); font-size:.9rem; }
.file-error { margin:7px 0 0; color:#b42318; font-size:.88rem; font-weight:650; line-height:1.45; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"] { border-color:#d92d20 !important; box-shadow:0 0 0 3px rgba(217,45,32,.08); }
.upload-progress { margin:4px 0 2px; padding:13px 14px; border:1px solid #d8e2ef; border-radius:10px; background:#f7f9fc; }
.upload-progress-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:8px; color:var(--navy); font-size:.9rem; }
.upload-progress-row strong { font-size:.88rem; }
.upload-progress-track { height:8px; overflow:hidden; border-radius:999px; background:#e3eaf3; }
.upload-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--blue); transition:width .12s linear; }
.contact-form .btn:disabled { opacity:.65; cursor:wait; }

/* Contact form presentation */
.contact-form {
  margin-top: 26px;
  max-width: 760px;
  padding: 28px;
  background: #fff;
  border: 1px solid #e2e9f3;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 39, 71, .06);
}
.contact-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.contact-form .form-field { margin-bottom: 20px; }
.contact-form-grid .form-field { margin-bottom:0; }
.contact-form-grid + .form-field { margin-top:20px; }
.contact-form .form-field label { margin-bottom:7px; font-size:.95rem; }
.contact-form .form-field input[type="text"],
.contact-form .form-field input[type="tel"],
.contact-form .form-field input[type="email"],
.contact-form .form-field textarea {
  min-height: 48px;
  border-color:#cfd9e7;
  border-radius:9px;
  padding:12px 14px;
}
.contact-form .form-field textarea { min-height: 170px; }
.contact-form .file-upload-box {
  padding:16px 16px 16px;
  background:#f7f9fc;
  border:1px dashed #b9c8dc;
  border-radius:10px;
}
.contact-form .file-upload-box .field-help {
  margin:22px 0 0;
  line-height:1;
}
.contact-form .file-upload-box input[type="file"] {
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.contact-form .file-upload-box input[type="file"]::file-selector-button {
  margin-right:12px;
  padding:9px 14px;
  border:1px solid #cbd7e8;
  border-radius:7px;
  background:#fff;
  color:var(--navy);
  font:inherit;
  font-weight:650;
  cursor:pointer;
}
.contact-form .file-upload-box input[type="file"]::file-selector-button:hover { border-color:var(--blue); color:var(--blue); }
.contact-form-actions { display:flex; align-items:center; gap:18px; margin-top:24px; }
.contact-form-actions .btn { flex:0 0 auto; }
.contact-form-actions .form-privacy { margin:0; }
@media (max-width:760px) {
  .contact-form { padding:20px; }
  .contact-form-grid { grid-template-columns:1fr; }
  .contact-form-actions { align-items:flex-start; flex-direction:column; gap:12px; }
  .contact-form-actions .btn { width:100%; }
}

/* Inline contact-form validation messages */
.contact-form .field-error {
  margin: 7px 0 0;
  color: #b42318;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.45;
}
.contact-form .field-error[hidden] { display: none; }


/* Account login — visual shell for developer authentication integration */
.account-login-main { background:var(--surface-soft); }
.account-login-section { padding:72px 0 84px; }
.account-login-card {
  width:min(100%, 560px);
  margin:0 auto;
  padding:42px;
  background:#fff;
  border:1px solid #e2e9f3;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.account-login-card .eyebrow { margin:0 0 8px; }
.account-login-card h1 { margin:0 0 10px; color:var(--navy); font-size:clamp(2rem,4vw,2.7rem); line-height:1.12; }
.account-login-intro { margin:0 0 12px; color:var(--muted); }
.account-required-note { margin:0 0 30px; }
.account-login-form { margin:0; }
.account-login-form .form-field { margin:0 0 20px; }
.account-login-form .form-field label { display:block; margin:0 0 7px; color:var(--navy); font-size:.95rem; font-weight:700; }
.account-login-form input[type="email"],
.account-login-form input[type="password"] {
  display:block;
  width:100%;
  min-height:48px;
  margin:0;
  padding:12px 14px;
  color:var(--text);
  background:#fff;
  border:1px solid #cfd9e7;
  border-radius:9px;
  outline:none;
}
.account-login-form input[type="email"]:focus,
.account-login-form input[type="password"]:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,94,239,.08); }
.account-login-options { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:2px 0 24px; font-size:.9rem; }
.remember-me { display:inline-flex; align-items:center; gap:8px; margin:0; cursor:pointer; }
.remember-me input { width:17px; height:17px; margin:0; }
.account-login-form .field-error { margin:7px 0 0; color:#b42318; font-size:.88rem; font-weight:650; line-height:1.45; }
.account-login-form .field-error[hidden] { display:none; }
.account-login-form input[aria-invalid="true"] { border-color:#d92d20 !important; box-shadow:0 0 0 3px rgba(217,45,32,.08); }
.account-text-link, .account-help a { color:var(--blue); font-weight:650; }
.account-sign-in { width:100%; margin:0; border:0; cursor:pointer; }
.account-help { display:flex; align-items:center; justify-content:flex-start; gap:5px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); font-size:.92rem; }
.account-help strong { color:var(--navy); }
.account-help a { white-space:nowrap; }
@media (max-width:600px) {
  .account-login-section { padding:42px 0 56px; }
  .account-login-card { padding:28px 20px; }
  .account-login-intro { margin-bottom:12px; }
  .account-required-note { margin-bottom:26px; }
  .account-login-options { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:22px; }
  .account-help { align-items:center; flex-direction:row; gap:5px; margin-top:24px; padding-top:22px; }
}

/* Sitewide inline text links.
   Applies to ordinary links within page copy only. Header/footer links, buttons,
   cards, navigation, information icons and other specialist UI links keep their own styling. */
main p a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link),
main li a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link) {
  color: var(--blue);
  text-decoration: none;
}

main p a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link):hover,
main p a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link):focus-visible,
main li a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link):hover,
main li a:not(.btn):not(.info-link):not(.footnote-link):not(.form-type):not(.extra-link):focus-visible {
  color: var(--blue-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Formsy dark-blue hover treatment for outline buttons and key text links */
.btn-outline:hover,
.btn-outline:focus-visible {
  color: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
}

.extra-link:hover,
.extra-link:focus-visible {
  color: var(--formsy-logo-navy);
}

/* NAVIGATION — preserve approved Formsy colours.
   Default links: light blue. Hover/focus/current link + underline: logo dark blue. */
.main-nav a {
  color: var(--blue) !important;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--formsy-logo-navy) !important;
}
.main-nav a::after {
  background: var(--formsy-logo-navy) !important;
}

/* Requested hover treatment: form setup text link */
.extra-link:hover,
.extra-link:focus-visible {
  color: var(--formsy-logo-navy) !important;
}

/* FAQ question headings: light blue normally, Formsy logo navy on hover/focus */
.faq-item summary {
  color: var(--blue);
}

.faq-item summary:hover,
.faq-item summary:focus-visible,
.faq-item[open] summary {
  color: var(--blue);
}

/* FAQ open/selected state: keep question heading Formsy logo dark blue until closed */
.faq-item[open] summary {
  color: var(--formsy-logo-navy);
}

/* Formsy outline CTA hover colours */
.plan .btn-outline,
.extra-card .btn-outline {
  color: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
}

.plan .btn-outline:hover,
.plan .btn-outline:focus-visible,
.extra-card .btn-outline:hover,
.extra-card .btn-outline:focus-visible {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
  background: #fff;
}


/* Pricing: keep both additional-service CTA buttons the same width */
.pricing-extras .extra-card > .btn {
  width: 260px;
  max-width: 100%;
  justify-content: center;
}


/* Pricing: keep additional-service button text on one line */
.pricing-extras .extra-card > .btn {
  width: auto;
  min-width: 285px;
  max-width: none;
  white-space: nowrap;
  justify-content: center;
}


/* Pricing page: requested colour swap only — preserve existing button backgrounds */
.pricing-main .plans .btn,
.pricing-main .pricing-extras .btn {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

.pricing-main .plans .btn:hover,
.pricing-main .plans .btn:focus-visible,
.pricing-main .pricing-extras .btn:hover,
.pricing-main .pricing-extras .btn:focus-visible {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}


/* Business pricing button: light blue normally, dark blue on hover */
.pricing-main .plan-featured .btn,
.pricing-main .plan-business .btn,
.pricing-main .plans .featured .btn {
  color: var(--blue) !important;
  border-color: var(--blue) !important;
}

.pricing-main .plan-featured .btn:hover,
.pricing-main .plan-featured .btn:focus-visible,
.pricing-main .plan-business .btn:hover,
.pricing-main .plan-business .btn:focus-visible,
.pricing-main .plans .featured .btn:hover,
.pricing-main .plans .featured .btn:focus-visible {
  color: var(--navy) !important;
  border-color: var(--navy) !important;
}


/* Business Contact us button — actual filled button colour */
.pricing-main .plans .plan.featured .btn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

.pricing-main .plans .plan.featured .btn-primary:hover,
.pricing-main .plans .plan.featured .btn-primary:focus-visible {
  background: var(--formsy-logo-navy) !important;
  border-color: var(--formsy-logo-navy) !important;
  color: #fff !important;
}


/* TOP NAVIGATION — dark Formsy blue normally, light blue on hover/focus.
   Underline follows the text colour. */
.main-nav a {
  color: var(--formsy-logo-navy) !important;
}

.main-nav a::after {
  background: var(--formsy-logo-navy) !important;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--blue) !important;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  background: var(--blue) !important;
}

/* Current page remains dark blue until hovered */
.main-nav a[aria-current="page"] {
  color: var(--formsy-logo-navy) !important;
}

.main-nav a[aria-current="page"]::after {
  background: var(--formsy-logo-navy) !important;
}

.main-nav a[aria-current="page"]:hover,
.main-nav a[aria-current="page"]:focus-visible {
  color: var(--blue) !important;
}

.main-nav a[aria-current="page"]:hover::after,
.main-nav a[aria-current="page"]:focus-visible::after {
  background: var(--blue) !important;
}


/* TOP NAVIGATION — selected/current page stays light blue */
.main-nav a[aria-current="page"],
.main-nav a[aria-current="page"]:hover,
.main-nav a[aria-current="page"]:focus-visible {
  color: var(--blue) !important;
}

.main-nav a[aria-current="page"]::after,
.main-nav a[aria-current="page"]:hover::after,
.main-nav a[aria-current="page"]:focus-visible::after {
  background: var(--blue) !important;
}


/* Sitewide hover/focus colour for information (i) icons and footnote asterisks */
a.info-link:hover,
a.info-link:focus-visible {
  background: transparent !important;
  border-color: var(--formsy-logo-navy) !important;
  color: var(--formsy-logo-navy) !important;
  text-decoration: none;
}

a.footnote-link:hover,
a.footnote-link:focus-visible {
  color: var(--formsy-logo-navy) !important;
  text-decoration: none;
}

/* Contact page primary buttons: light blue, Formsy dark blue on hover/focus */
.contact-main .btn-primary,
.contact-form .btn-primary,
.info-aside .btn-primary[href^="tel:"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.contact-main .btn-primary:hover,
.contact-main .btn-primary:focus-visible,
.contact-form .btn-primary:hover,
.contact-form .btn-primary:focus-visible,
.info-aside .btn-primary[href^="tel:"]:hover,
.info-aside .btn-primary[href^="tel:"]:focus-visible {
  background: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
  color: #fff;
}


/* Contact page button consistency: links and form buttons use identical box/hover treatment */
.contact-main .btn-primary,
.contact-form .btn-primary,
.info-aside .btn-primary[href^="tel:"] {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid var(--blue);
  background: var(--blue);
  color: #fff;
  text-decoration: none;
}
.contact-main .btn-primary:hover,
.contact-form .btn-primary:hover,
.info-aside .btn-primary[href^="tel:"]:hover {
  background: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
  color: #fff;
}
.contact-main .btn-primary:focus-visible,
.contact-form .btn-primary:focus-visible,
.info-aside .btn-primary[href^="tel:"]:focus-visible {
  background: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
  color: #fff;
}

/* Requested light-blue primary CTAs on API integration and digital form setup pages */
.api-integration-page .info-aside .btn-primary,
body:has(> .site-header) main.info-page .aside-card .btn-primary[href="contact.php"][title="Contact Formsy"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.api-integration-page .info-aside .btn-primary:hover,
.api-integration-page .info-aside .btn-primary:focus-visible,
body:has(> .site-header) main.info-page .aside-card .btn-primary[href="contact.php"][title="Contact Formsy"]:hover,
body:has(> .site-header) main.info-page .aside-card .btn-primary[href="contact.php"][title="Contact Formsy"]:focus-visible {
  background: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
  color: #fff;
}

/* Sitewide body-copy text links: light blue normally, Formsy dark blue + underline on hover/focus */
main p a:not(.btn):not(.info-link):not(.form-type),
main li a:not(.btn):not(.info-link):not(.form-type),
main .extra-link,
main .account-text-link,
main .account-help a {
  color: var(--blue);
}

main p a:not(.btn):not(.info-link):not(.form-type):hover,
main p a:not(.btn):not(.info-link):not(.form-type):focus-visible,
main li a:not(.btn):not(.info-link):not(.form-type):hover,
main li a:not(.btn):not(.info-link):not(.form-type):focus-visible,
main .extra-link:hover,
main .extra-link:focus-visible,
main .account-text-link:hover,
main .account-text-link:focus-visible,
main .account-help a:hover,
main .account-help a:focus-visible {
  color: var(--formsy-logo-navy) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Digital-form page CTA consistency: light blue normally, Formsy dark blue on hover/focus */
.digital-form-product-page .product-hero-actions .btn-primary,
.digital-form-product-page .info-aside .btn-primary,
.digital-form-product-page .info-cta-inner .btn {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  text-decoration: none;
}
.digital-form-product-page .product-hero-actions .btn-primary:hover,
.digital-form-product-page .product-hero-actions .btn-primary:focus-visible,
.digital-form-product-page .info-aside .btn-primary:hover,
.digital-form-product-page .info-aside .btn-primary:focus-visible,
.digital-form-product-page .info-cta-inner .btn:hover,
.digital-form-product-page .info-cta-inner .btn:focus-visible {
  background: var(--formsy-logo-navy);
  border-color: var(--formsy-logo-navy);
  color: #fff;
  text-decoration: none;
}