/* =============================================================
   7io — enhancement layer
   Loaded AFTER style.css. Everything here is additive or a
   deliberate override, so the original stylesheet stays intact
   and any single rule below can be removed without breakage.
   ============================================================= */

:root {
  --navy:        #191e4f;
  --navy-soft:   #2a3170;
  --blue:        #0055ff;
  --blue-bright: #007bff;
  --blue-tint:   #e9f4ff;
  --ink:         #1c1c22;
  --body:        #4a4a55;
  --muted:       #6f6f7d;
  --line:        #e3e6ef;
  --paper:       #ffffff;
  --paper-alt:   #f6f8fc;

  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 1px 2px rgba(25, 30, 79, .04), 0 8px 24px rgba(25, 30, 79, .07);
  --shadow-lg: 0 2px 4px rgba(25, 30, 79, .05), 0 18px 48px rgba(25, 30, 79, .13);
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Typography -------------------------------------------------
   style.css asked for "GT Eesti Pro Display" and "Open Sans" but the site
   never loaded either, so everything fell back to a system serif. These
   map the old font names onto webfonts that are actually loaded.        */

body,
p, li, td, th, label, input, textarea, select, button,
.nav-link, .primary-text-link, .location__address, .copyright,
.common-description, .footer-rhs__text {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.primary-heading, .common-heading, .home-portfolio-heading, .m-heading {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}

body { color: var(--body); background: var(--paper); }
p    { color: var(--body); font-size: 1.0625rem; line-height: 1.75; }

.primary-heading {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.14;
  font-weight: 700;
  color: var(--navy);
  margin: 4.5rem auto 1.25rem;
}

.common-heading,
.home-portfolio-heading.m-heading {
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.25rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

.common-description {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--muted);
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* Small uppercase kicker above section headings */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 .85rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--blue);
  vertical-align: middle;
  margin-right: .6rem;
  border-radius: 2px;
}

/* ---------- Hero ---------- */

section.hero h1 {
  /* Sized to the half-width hero column so a two-clause headline breaks once, at
     the comma, from tablet up. Measured against Plus Jakarta Sans 800: at the
     2.9rem cap the longer clause is ~457px inside a 540px column. */
  font-size: clamp(1.9rem, 0.4rem + 3.2vw, 2.9rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.03em;
  text-wrap: balance;
}

section.hero .content-box p { font-size: 1.15rem; line-height: 1.7; }

.hero-meta {
  font-size: .95rem !important;
  color: rgba(255, 255, 255, .78) !important;
  border-left: 2px solid rgba(255, 255, 255, .35);
  padding-left: .9rem;
  margin-top: 1.25rem;
}

/* Darken the hero photo so white text always passes contrast */
.split-outer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(16, 20, 58, .82) 0%, rgba(16, 20, 58, .55) 55%, rgba(16, 20, 58, .38) 100%);
  pointer-events: none;
}
/* Hero text sits above the gradient; the nav sits above the hero box. The hero
   section is 100vh tall and overlaps the header, so if these two share a
   z-index the hero (later in the DOM) wins and the nav links become unclickable. */
#hero   { position: relative; z-index: 2; }
#header { z-index: 3; }

/* ---------- Header ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--navy);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.nav-link {
  font-size: 1rem !important;
  font-weight: 500;
  position: relative;
  opacity: .88;
  transition: opacity .2s var(--ease);
}
.nav-link:hover { opacity: 1; }

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav-link.is-active { opacity: 1; font-weight: 600; }

.secondary-btn-outline {
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .5rem 1.35rem !important;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.secondary-btn-outline:hover {
  background: #fff !important;
  color: var(--navy) !important;
  border-color: #fff !important;
  text-decoration: none;
}

/* Sticky condensed header once the hero scrolls away.
   The FIXED element is #header (the full-width wrapper), not .header. A fixed
   element is positioned against the viewport, so fixing .header directly
   stretched it edge to edge and pushed the logo against the window. Fixing the
   wrapper keeps the Bootstrap .container inside it centred at its normal width. */
#header.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgba(25, 30, 79, .06);
  animation: slideDown .35s var(--ease);
}
/* Put .header back in normal flow so the wrapper has height and paints the bar.
   The negative margins cancel the container padding, matching where the
   absolutely-positioned header sat before, so the logo does not shift. */
#header.is-stuck .header {
  position: relative;
  padding: .6rem 0;
  margin: 0 -15px;
  width: auto;
}
#header.is-stuck .nav-link { color: var(--navy) !important; }
#header.is-stuck .secondary-btn-outline {
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}
#header.is-stuck .secondary-btn-outline:hover { background: var(--blue) !important; color: #fff !important; }
#header.is-stuck .navbar-toggler span { background: var(--navy); }
#header.is-stuck .navbar-brand img { filter: invert(1) brightness(.35) saturate(2.5) hue-rotate(200deg); }

@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Thin reading-progress bar under the sticky header */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), #35d0c4);
  z-index: 1001;
  pointer-events: none;
}

/* ---------- Buttons ---------- */

.primary-button,
.btn-primary {
  display: inline-block;
  background: var(--blue) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: .85rem 1.9rem;
  border-radius: 999px;
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 85, 255, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.primary-button:hover,
.btn-primary:hover {
  background: var(--navy) !important;
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(25, 30, 79, .3);
}
.primary-button:active, .btn-primary:active { transform: translateY(0); }

.link_homepage {
  display: inline-block;
  border-bottom: 2px solid var(--blue);
  color: var(--navy);
  padding-bottom: .3rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.link_homepage::after {
  content: "→";
  display: inline-block;
  margin-left: .45rem;
  transition: transform .25s var(--ease);
}
.link_homepage:hover { color: var(--blue); border-color: var(--navy); }
.link_homepage:hover::after { transform: translateX(4px); }

/* ---------- Trust bar ---------- */

.trust-bar {
  margin: -3.5rem auto 5rem;
  position: relative;
  z-index: 3;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 2rem;
  text-align: center;
}
.trust-bar__label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-bar__list li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  opacity: .72;
  transition: opacity .2s var(--ease);
}
.trust-bar__list li:hover { opacity: 1; }
.trust-bar__list li:last-child { font-weight: 500; font-style: italic; opacity: .5; }

/* ---------- Section rhythm ---------- */

.pitch { margin: 0 auto 5rem; text-align: center; }
.pitch .primary-heading { margin-top: 2rem; }
.mb-8 { margin-bottom: 6rem; }

.img-box img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.img-box img:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Alternate which column leads, so the page doesn't read as a single column */
@media (min-width: 768px) {
  .row.mb-8:nth-of-type(even) > .col-md-6:first-child  { order: 2; }
  .row.mb-8:nth-of-type(even) > .col-md-6.img-box      { order: 1; }
  .row.mb-8 { display: flex; align-items: center; }
}

/* ---------- Steps ---------- */

.steps-band {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1rem 0 5rem;
  margin: 0 0 6rem;
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  counter-reset: step;
}
.steps__item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem 1.5rem;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.steps__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1rem;
}
.steps__title { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; }
.steps__item p { font-size: .98rem; margin: 0; }

/* ---------- Feature cards ---------- */

.feature-box ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 0;
}
.feature-box ul li {
  width: auto;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature-box ul li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #35d0c4);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.feature-box ul li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.feature-box ul li:hover::before { transform: scaleX(1); }
.feature-box ul li h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .6rem;
}
.feature-box ul li p { font-size: .98rem; margin: 0; }

/* ---------- Checklists ---------- */

.checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .65rem;
  color: var(--body);
  line-height: 1.6;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230055ff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / .72rem no-repeat;
}
.checklist--numbered { counter-reset: c; }
.checklist--numbered li { counter-increment: c; }
.checklist--numbered li::before {
  content: counter(c);
  background: var(--blue-tint);
  color: var(--blue);
  font-size: .72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  top: .3em;
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- FAQ accordion ---------- */

.faq { max-width: 48rem; margin: 0 auto 6rem; }
.faq__list { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.4rem 3rem 1.4rem 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--blue); }
.faq__q::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq__q[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.faq__q[aria-expanded="true"] { color: var(--blue); }

.faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .38s var(--ease);
}
.faq__a p { padding: 0 2.5rem 1.5rem 0; margin: 0; color: var(--muted); }

/* ---------- Blog cards ---------- */

.blogbox_main {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 3rem 0 5rem;
}
.blogbox_main li {
  width: auto !important;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.blogbox_main li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blogbox_main li h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 .7rem;
}
.blogbox_main li p { font-size: .95rem; color: var(--muted); flex: 1; margin: 0 0 1.1rem; }
.blogbox_main li a {
  align-self: flex-start;
  font-weight: 600;
  font-size: .95rem;
  color: var(--blue);
}
.blogbox_main li a:hover { text-decoration: none; color: var(--navy); }
.insights-empty { text-align: center; margin: 2rem 0 5rem; }

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

/* ---------- Contact + form ---------- */

.contact_sec { padding-top: 1rem; }

.hubspot_form form {
  width: 100%;
  max-width: 46rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.5rem;
}
.contact-outer__input-box label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .4rem;
}
.contact-outer__input-box .required { color: #d33; font-style: normal; }

.hubspot_form .form-control {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .9rem;
  height: auto;
  font-size: 1rem;
  background: var(--paper-alt);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.hubspot_form .form-control:focus {
  border-color: var(--blue);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(0, 85, 255, .14);
  outline: none;
}
.hubspot_form .form-control.error {
  border-color: #d33;
  background: #fff6f6;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, .1);
}
.validtion { display: block; color: #d33; font-size: .82rem; margin-top: .3rem; }
.form-reassure { font-size: .875rem; color: var(--muted); margin: .5rem 0 0; }
.common-outer__status { text-align: center; padding: 2rem 0; }
.common-outer__status h2 { font-size: 1.5rem; color: var(--navy); margin: 1rem 0 .5rem; }
.common-outer__status img { max-width: 92px; }
.common-outer__loader { text-align: center; padding: 1rem 0; }

/* ---------- Footer ---------- */

.footer-bg { background: var(--paper-alt); }
.footer { padding: 0 0 2rem; }

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 2.75rem 2.5rem;
  margin: -4rem 0 4rem;
  box-shadow: var(--shadow-lg);
}
.footer-cta__title {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.95rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 .5rem;
}
.footer-cta__text { color: rgba(255, 255, 255, .8); margin: 0; max-width: 34rem; }
.footer-cta__btn { flex-shrink: 0; margin-top: 0; float: none; }

.footer__brand { padding-right: 2rem; }
.footer__blurb { font-size: .92rem; color: var(--muted); margin: 1rem 0; max-width: 22rem; }
.footer-col__title {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 1rem;
}
.footer-contact { list-style: none; padding: 0; margin: 0; }
.primary-text-link { font-size: .92rem; color: var(--body); transition: color .2s var(--ease); }
.primary-text-link:hover { color: var(--blue); text-decoration: none; }
.location__address { list-style: none; font-size: .92rem; color: var(--muted); }
.footer hr { border-color: var(--line); margin: 2.5rem 0 1.5rem; }

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s var(--ease);
  z-index: 900;
}
.back-to-top::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 9px;
  height: 9px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--blue); }

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger children of a revealed grid */
.reveal.is-visible .feature-box ul li,
.reveal.is-visible .steps__item,
.reveal.is-visible .blogbox_main li { animation: riseIn .6s var(--ease) backwards; }
.reveal.is-visible li:nth-child(2) { animation-delay: .08s; }
.reveal.is-visible li:nth-child(3) { animation-delay: .16s; }
.reveal.is-visible li:nth-child(4) { animation-delay: .24s; }
.reveal.is-visible li:nth-child(5) { animation-delay: .32s; }
.reveal.is-visible li:nth-child(6) { animation-delay: .40s; }

@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Focus + motion ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .split-outer::before { transform: none !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
  #header.is-stuck .header { padding: .5rem 0; }
  .footer-cta { margin-top: -2rem; padding: 2rem 1.5rem; }
  .footer__brand { padding-right: 0; margin-bottom: 2rem; }
  .footer-col__title { margin-top: 1.5rem; }
}

@media (max-width: 767px) {
  .mb-8 { margin-bottom: 3.5rem; }
  .primary-heading { margin-top: 3rem; }
  .trust-bar { margin: -2rem auto 3.5rem; padding: 1.25rem 1rem; }
  .trust-bar__list { gap: .5rem 1.1rem; }
  .trust-bar__list li { font-size: .95rem; }
  .hubspot_form form { padding: 1.5rem; }
  .img-box { margin-top: 2rem; }
  .steps-band { margin-bottom: 3.5rem; }
  .back-to-top { right: 1rem; bottom: 1rem; }
}

/* =============================================================
   Interactive lead capture (payroll page)
   Inputs live inside the section they relate to and attach to
   the contact form via the HTML5 `form` attribute.
   ============================================================= */

.capture {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 2.5rem;
  margin: 0 0 6rem;
}

.capture__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .4rem;
}

.capture__hint { font-size: .95rem; color: var(--muted); margin: 0 0 1.75rem; }

.capture__q {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .75rem;
  padding: 0;
  float: none;
  width: auto;
}

.capture__readout {
  font-size: 1rem;
  color: var(--navy);
  font-weight: 600;
  min-height: 1.5rem;
  margin: 1rem 0 0;
}

.capture fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* ---- Stepper + range ---- */

.capture__row {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem;
}

.stepper__btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--navy);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(25, 30, 79, .12);
  transition: background .2s var(--ease), color .2s var(--ease), transform .12s var(--ease);
}
.stepper__btn:hover { background: var(--blue); color: #fff; }
.stepper__btn:active { transform: scale(.92); }

.stepper__value {
  min-width: 3.25rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.capture__range {
  flex: 1 1 220px;
  min-width: 180px;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.capture__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0, 85, 255, .4);
  cursor: grab;
}
.capture__range::-webkit-slider-thumb:active { cursor: grabbing; }
.capture__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--blue);
  border: 3px solid var(--paper);
  box-shadow: 0 2px 8px rgba(0, 85, 255, .4);
  cursor: grab;
}

/* ---- Worker blocks ---- */

.blocks {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  max-width: 420px;
  min-height: 26px;
  margin: 0 0 .5rem;
}
.blocks__b {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--blocks-fill, var(--blue-tint));
  animation: blockIn .28s var(--ease) backwards;
  transition: background .5s var(--ease);
}
.blocks__b--more {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  grid-column: span 2;
  aspect-ratio: auto;
}
@keyframes blockIn { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* ---- Pills (single choice) ---- */

.capture__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.pillset { display: block; }

.pill { display: inline-block; margin: 0 .5rem .5rem 0; cursor: pointer; }
.pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pill span {
  display: inline-block;
  padding: .6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-alt);
  font-size: .95rem;
  font-weight: 500;
  color: var(--body);
  transition: all .2s var(--ease);
}
.pill span:hover { border-color: var(--blue); color: var(--blue); }
.pill input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 85, 255, .25);
}
.pill input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---- Tiles (multi choice) ---- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .65rem;
}

.tile { margin: 0; cursor: pointer; }
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.tile span {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 100%;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-alt);
  font-size: .95rem;
  color: var(--body);
  transition: all .2s var(--ease);
}
.tile span::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  transition: all .2s var(--ease);
}
.tile span:hover { border-color: var(--blue); background: var(--paper); }
.tile input:checked + span {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--navy);
  font-weight: 600;
}
.tile input:checked + span::before {
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--blue);
}
.tile input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---- Payday strip ---- */

.paydays { margin-top: 1.75rem; }
.paydays__label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .6rem;
}
.paydays__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26px, 1fr));
  gap: 4px;
  max-width: 460px;
}
.paydays__d {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--paper-alt);
  font-size: .7rem;
  color: var(--muted);
  transition: all .3s var(--ease);
}
.paydays__d--pay {
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  animation: blockIn .3s var(--ease) backwards;
}

/* ---- Summary readback in the form ---- */

.capture-summary {
  background: var(--blue-tint);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2rem;
}
.capture-summary__title {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 .85rem;
}
.capture-summary__list { list-style: none; padding: 0; margin: 0; }
.capture-summary__list li {
  font-size: .95rem;
  color: var(--navy);
  padding: .3rem 0 .3rem 1.4rem;
  position: relative;
}
.capture-summary__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.capture-summary__list b { font-weight: 700; }
.capture-summary__edit { font-size: .875rem; color: var(--muted); margin: .85rem 0 0; }
.capture-summary__edit a { color: var(--blue); font-weight: 600; }

/* ---- Supporting page bits ---- */

.proofline {
  max-width: 46rem;
  margin: 4rem auto 5rem;
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--blue);
  background: var(--paper-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--navy);
  font-weight: 500;
}

.narrow-section { max-width: 44rem; margin: 0 auto 6rem; }

.parallel-run {
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2.5rem;
  margin: 0 0 6rem;
  text-align: center;
}
.parallel-run .primary-heading { color: #fff; margin-top: 0; }
.parallel-run .common-description { color: rgba(255, 255, 255, .85); }

.founder {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 6rem;
}
.founder__photo {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .capture { padding: 1.5rem 1.25rem; margin-bottom: 3.5rem; }
  .capture__row { gap: 1rem; }
  .blocks { grid-template-columns: repeat(10, 1fr); gap: 4px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile span { padding: .8rem .75rem; font-size: .875rem; }
  .proofline { margin: 2.5rem auto 3.5rem; font-size: 1rem; padding: 1.25rem 1.25rem; }
  .parallel-run { padding: 2.25rem 1.5rem; margin-bottom: 3.5rem; }
  .narrow-section { margin-bottom: 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .blocks__b, .paydays__d--pay { animation: none; }
}

/* The single sitewide CTA is a long string; keep it comfortable in the nav. */
.navbar .secondary-btn-outline { font-size: .875rem; padding: .5rem 1.1rem !important; }
@media (max-width: 1199px) and (min-width: 992px) {
  .navbar-nav li.nav-item { margin-right: .9rem; }
  .nav-link { margin: 0 .5rem; }
}