:root {
  color-scheme: light;
  --bg: #F6FAF8;
  --bg-soft: #EDF6F3;
  --bg-blue: #EEF7FB;
  --bg-warm: #F4FBF6;

  --surface-1: #FFFFFF;
  --surface-2: #F7FBFA;
  --surface-3: #EDF6F3;
  --surface-dark: #16333A;
  --surface-dark-2: #20464D;
  --surface-overlay: rgba(255, 255, 255, 0.86);
  --surface-overlay-strong: rgba(255, 255, 255, 0.94);
  --surface-glass: rgba(255, 255, 255, 0.76);

  --text-1: #14232B;
  --text-2: #4E6670;
  --text-3: #708791;
  --text-inverse: #F4FAFB;
  --text-inverse-muted: #C8D8DC;

  --border-soft: #D8E4E7;
  --border-medium: rgba(20, 35, 43, 0.12);
  --border-strong: rgba(20, 35, 43, 0.22);
  --border-inverse: rgba(244, 250, 251, 0.16);

  --accent-blue: #2F80ED;
  --accent-blue-soft: #3B82D6;
  --accent-green: #7CCB5B;
  --accent-green-soft: #DFF2D6;
  --accent-warm: #3B82D6;
  --accent-warm-strong: #256DD1;
  --accent-warm-soft: #EEF7FB;

  --shadow-sm: 0 18px 40px rgba(22, 52, 58, 0.08);
  --shadow-lg: 0 34px 92px rgba(22, 52, 58, 0.14);
  --shadow-card: 0 24px 54px rgba(22, 52, 58, 0.1);
  --shadow-soft: 0 12px 30px rgba(22, 52, 58, 0.06);

  --line: var(--border-soft);
  --line-strong: var(--border-strong);
  --surface: var(--surface-overlay);
  --surface-strong: var(--surface-1);
  --surface-tint: var(--surface-3);
  --text: var(--text-1);
  --text-muted: var(--text-2);
  --text-soft: var(--text-3);
  --mint: var(--accent-green-soft);
  --mint-strong: var(--accent-green);
  --blue: var(--accent-blue-soft);
  --blue-strong: var(--accent-blue);
  --orange: var(--accent-warm);
  --orange-strong: var(--accent-warm-strong);
  --warm-highlight: var(--accent-warm-soft);
  --header-divider: color-mix(in srgb, var(--border-soft) 62%, var(--accent-blue) 14%);
  --header-panel-border: color-mix(in srgb, var(--border-soft) 82%, var(--accent-blue) 18%);
  --header-link: color-mix(in srgb, var(--text-1) 82%, var(--text-2) 18%);
  --header-link-hover: var(--text-1);
  --header-cta-border: color-mix(in srgb, var(--border-strong) 76%, var(--accent-blue) 24%);
  --header-cta-bg: color-mix(in srgb, var(--surface-2) 82%, var(--surface-1) 18%);
  --header-cta-text: color-mix(in srgb, var(--accent-blue) 74%, var(--text-1) 26%);

  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --radius-xl: 44px;
  --container: min(1200px, calc(100vw - 1.5rem));
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Manrope", "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F252A;
  --bg-soft: #16333A;
  --bg-blue: #143038;
  --bg-warm: #18353B;

  --surface-1: #16333A;
  --surface-2: #1B3E45;
  --surface-3: #20464D;
  --surface-dark: #16333A;
  --surface-dark-2: #20464D;
  --surface-overlay: rgba(22, 51, 58, 0.88);
  --surface-overlay-strong: rgba(27, 62, 69, 0.94);
  --surface-glass: rgba(22, 51, 58, 0.78);

  --text-1: #F4FAFB;
  --text-2: #C8D8DC;
  --text-3: #9FB4BA;
  --text-inverse: #F4FAFB;
  --text-inverse-muted: #C8D8DC;

  --border-soft: rgba(111, 145, 153, 0.34);
  --border-medium: rgba(200, 216, 220, 0.18);
  --border-strong: rgba(200, 216, 220, 0.3);
  --border-inverse: rgba(244, 250, 251, 0.16);

  --accent-blue: #60A5FA;
  --accent-blue-soft: #3B82D6;
  --accent-green: #7CCB5B;
  --accent-green-soft: rgba(124, 203, 91, 0.24);
  --accent-warm: #3B82D6;
  --accent-warm-strong: #256DD1;
  --accent-warm-soft: rgba(59, 130, 214, 0.18);

  --shadow-sm: 0 18px 40px rgba(0, 0, 0, 0.26);
  --shadow-lg: 0 34px 92px rgba(0, 0, 0, 0.38);
  --shadow-card: 0 24px 54px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.2);

  --line: var(--border-soft);
  --line-strong: var(--border-strong);
  --surface: var(--surface-overlay);
  --surface-strong: var(--surface-1);
  --surface-tint: var(--surface-3);
  --text: var(--text-1);
  --text-muted: var(--text-2);
  --text-soft: var(--text-3);
  --mint: var(--accent-green-soft);
  --mint-strong: var(--accent-green);
  --blue: var(--accent-blue-soft);
  --blue-strong: var(--accent-blue);
  --orange: var(--accent-warm);
  --orange-strong: var(--accent-warm-strong);
  --warm-highlight: var(--accent-warm-soft);
  --header-divider: color-mix(in srgb, var(--border-soft) 70%, var(--accent-blue) 18%);
  --header-panel-border: color-mix(in srgb, var(--border-soft) 76%, var(--accent-blue) 24%);
  --header-link: color-mix(in srgb, var(--text-1) 78%, var(--text-2) 22%);
  --header-link-hover: var(--text-1);
  --header-cta-border: color-mix(in srgb, var(--border-strong) 70%, var(--accent-blue) 30%);
  --header-cta-bg: color-mix(in srgb, var(--surface-2) 84%, var(--surface-1) 16%);
  --header-cta-text: color-mix(in srgb, var(--accent-blue) 68%, var(--text-1) 32%);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mint-strong) 18%, transparent), transparent 26%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-strong) 22%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 78%, var(--bg) 22%) 0%, var(--bg-blue) 18%, var(--bg) 52%, color-mix(in srgb, var(--bg-soft) 88%, var(--bg) 12%) 100%);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.7;
  min-width: 320px;
  transition: background-color 180ms ease, color 180ms ease;
}

main {
  overflow: clip;
}

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

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

a[href] {
  text-underline-offset: 0.18em;
}

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

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  stroke: currentColor;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

.icon--md {
  width: 1.25rem;
  height: 1.25rem;
}

.icon--lg {
  width: 2rem;
  height: 2rem;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-blue) 28%, transparent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--surface-dark);
  color: var(--text-inverse);
}

.skip-link:focus {
  top: 1rem;
}

.container {
  width: var(--container);
  margin: 0 auto;
}

.section {
  position: relative;
  padding: 4rem 0;
}

.section--soft {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 80%, var(--accent-blue-soft) 20%), color-mix(in srgb, var(--surface-3) 82%, var(--surface-2) 18%));
}

.section--contrast {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-dark) 92%, black 8%), var(--surface-dark-2));
  color: var(--text-inverse);
}

.faq-section {
  position: relative;
  overflow: clip;
  /* use a more neutral blue-green tint instead of dominant green */
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue-strong) 6%, transparent), transparent 24%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue-soft) 8%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--surface-1) 8%), color-mix(in srgb, var(--surface-3) 84%, var(--surface-2) 16%));
}

.section--cta {
  padding-top: 0.8rem;
  padding-bottom: 4.8rem;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.05;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
}

h1 {
  font-size: clamp(2.05rem, 5vw, 4.1rem);
  max-width: 13ch;
}

h2 {
  font-size: clamp(1.9rem, 4.1vw, 3.2rem);
  max-width: 18ch;
}

h3 {
  font-size: 1.15rem;
  line-height: 1.3;
}

p {
  margin: 0;
}

.eyebrow,
.mini-label,
.package-card__label {
  margin: 0 0 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--accent-blue);
}

.mini-label {
  color: inherit;
  opacity: 0.72;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--header-divider);
  background: color-mix(in srgb, var(--surface-overlay-strong) 93%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--header-divider) 58%, transparent);
  backdrop-filter: blur(18px);
}

.header-inner,
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-height: 4.15rem;
  padding-block: 0.55rem;
}

.brand,
.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.brand__logo {
  width: auto;
  height: 2.05rem;
  object-fit: contain;
  flex-shrink: 0;
}

.brand__text {
  display: grid;
  gap: 0.02rem;
  min-width: 0;
}

.brand__title,
.brand__text strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__subtitle,
.brand__text span {
  color: var(--text-soft);
  font-size: 0.7rem;
  line-height: 1.15;
}



.menu-toggle,
.button,
.faq-question {
  cursor: pointer;
}

.menu-toggle {
  min-height: 2.9rem;
  padding: 0.58rem 0.88rem;
  border: 1px solid var(--header-cta-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface-1) 16%);
  color: var(--text);
  font-weight: 800;
  line-height: 1;
}

.primary-nav {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0.75rem;
  right: 0.75rem;
  display: none;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-overlay-strong) 96%, transparent);
  border: 1px solid var(--header-panel-border);
  box-shadow: var(--shadow-sm);
}

.primary-nav.is-open {
  display: flex;
}

.nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.58rem 0.2rem;
  color: var(--header-link);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--header-link-hover);
}

.nav__link:not(.button)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.32rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-blue), color-mix(in srgb, var(--accent-blue) 45%, var(--mint-strong) 55%));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.nav__link:not(.button):hover::after,
.nav__link:not(.button):focus-visible::after {
  transform: scaleX(1);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  min-height: 3.2rem;
  padding: 0.92rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  text-align: center;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button--primary {
  background: linear-gradient(135deg, var(--orange), var(--orange-strong));
  color: #fffaf6;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--accent-warm-strong) 22%, transparent);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-warm) 88%, white 12%), var(--accent-warm-strong));
}

.button--secondary,
.button--nav {
  border-color: var(--border-medium);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--accent-blue-soft) 28%);
  color: var(--accent-blue);
}

.nav__cta,
.button--nav {
  min-height: 2.9rem;
  padding-inline: 1.05rem;
  border-color: var(--header-cta-border);
  background: var(--header-cta-bg);
  color: var(--header-cta-text);
}

.nav__cta {
  width: 100%;
  margin-top: 0.15rem;
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--nav:hover,
.button--nav:focus-visible {
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--surface-3) 68%, var(--surface-1) 32%);
  color: var(--text);
}

.button .icon {
  transition: transform 180ms ease;
}

.button:hover .icon,
.button:focus-visible .icon {
  transform: translateX(1px);
}

.hero {
  padding: 1.35rem 0 0.45rem;
}

.hero__layout,
.two-column,
.service-stack,
.package-grid,
.comparison-grid,
.timeline,
.faq-list,
.package-extras {
  display: grid;
  gap: 1rem;
}

.hero__copy,
.hero-panel__card,
.service-card,
.package-card,
.comparison-card,
.timeline-card,
.faq-item,
.cta-panel,
.ownership-card,
.questionnaire-shell,
.questionnaire-section-intro,
.questionnaire-fieldset {
  border: 1px solid var(--border-soft);
}

.hero__copy {
  position: relative;
  overflow: clip;
  padding: 1.15rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 80%, var(--surface-3) 20%));
  box-shadow: var(--shadow-lg);
}

.hero__copy::after {
  content: "";
  position: absolute;
  inset: auto -4rem -4rem auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-blue-soft) 34%, transparent), transparent 65%);
  pointer-events: none;
}

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.65rem;
  padding: 0.38rem 0.66rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  color: var(--accent-blue);
  font-size: 0.79rem;
  font-weight: 700;
}

.hero__lead,
.section-heading--wide p:last-child,
.service-card p,
.package-card__summary,
.package-card__alt,
.comparison-card p,
.timeline-card p,
.faq-answer p,
.cta-panel p {
  color: var(--text-muted);
}

.hero__lead {
  max-width: 54ch;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.62;
}

.hero__actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.hero__actions {
  margin-top: 0.8rem;
}

.hero__stats,
.page-banner__meta,
.site-footer__meta {
  display: grid;
  gap: 0.75rem;
}

.hero__stats {
  margin-top: 0.78rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.hero-stat {
  display: grid;
  gap: 0.16rem;
  padding: 0.68rem 0.78rem;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-1) 84%, var(--surface-3) 16%);
}

.hero-stat__icon {
  margin-bottom: 0.15rem;
  color: var(--blue-strong);
}

.hero-stat strong {
  font-size: 0.98rem;
  letter-spacing: -0.03em;
}

.hero-stat span {
  color: var(--text-muted);
  font-size: 0.81rem;
  line-height: 1.4;
}

.hero-panel {
  display: grid;
  gap: 0.65rem;
  align-content: start;
}

.hero-panel__card {
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 74%, var(--surface-3) 26%));
  box-shadow: var(--shadow-card);
}

.hero-panel__card--dark {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-blue-soft) 26%, var(--surface-1) 74%), color-mix(in srgb, var(--surface-3) 76%, var(--surface-2) 24%));
  color: var(--text);
  border-color: color-mix(in srgb, var(--panel-border) 82%, var(--accent-blue) 18%);
  box-shadow: 0 14px 30px rgba(32, 69, 78, 0.07);
}

.hero-panel__card--dark h2 {
  max-width: none;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  margin-bottom: 0.7rem;
}

.hero-panel__card--dark .mini-label,
.hero-panel__card--dark p:last-child {
  color: color-mix(in srgb, var(--text) 80%, var(--text-muted) 20%);
}

.hero-panel__card--dark .questionnaire-card__icon,
.hero-panel__card--dark .questionnaire-plan-lock__icon {
  color: var(--accent-blue);
}

.hero-panel__card--best-fit {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  height: 100%;
}

.hero-panel__card--best-fit h2,
.hero-panel__card--best-fit p,
.hero-panel__card--best-fit .tick-list {
  margin: 0;
}

.hero-panel__card--best-fit .tick-list {
  margin-top: 0.1rem;
}

.showcase-card {
  display: grid;
  gap: 0.72rem;
  padding: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 76%, transparent);
}

.showcase-card__header,
.showcase-card__footer,
.showcase-slide,
.showcase-slide__body {
  display: grid;
  gap: 0.58rem;
}

.showcase-card__header {
  align-items: start;
}

.showcase-card__header h3 {
  max-width: 24ch;
}

.showcase-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  color: var(--accent-blue);
  font-size: 0.88rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.showcase-card__link:hover,
.showcase-card__link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--surface-3) 68%, var(--surface-1) 32%);
}

.showcase-slider {
  position: relative;
}

.showcase-slide {
  display: none;
  align-items: start;
}

.showcase-slide.is-active {
  display: grid;
}

.showcase-slide__visual {
  position: relative;
  display: block;
  min-height: 11rem;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-dark), var(--surface-dark-2));
  box-shadow: var(--shadow-card);
  isolation: isolate;
}

.showcase-slide__visual::before,
.showcase-slide__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.showcase-slide__visual::before {
  top: 0;
  height: 2rem;
  background:
    radial-gradient(circle at 1rem 50%, color-mix(in srgb, var(--accent-warm) 85%, white 15%) 0 0.24rem, transparent 0.25rem),
    radial-gradient(circle at 1.7rem 50%, color-mix(in srgb, var(--accent-blue-soft) 85%, white 15%) 0 0.24rem, transparent 0.25rem),
    radial-gradient(circle at 2.4rem 50%, color-mix(in srgb, var(--accent-green) 80%, white 20%) 0 0.24rem, transparent 0.25rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  border-bottom: 1px solid var(--border-inverse);
}

.showcase-slide__visual::after {
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface-dark) 82%, black 18%));
}

.showcase-slide__visual img {
  width: 100%;
  height: 100%;
  min-height: 11rem;
  object-fit: cover;
  object-position: top center;
  transform: scale(1.01);
  transition: transform 220ms ease;
  background: var(--surface-2);
}

.showcase-slide__visual:hover img,
.showcase-slide__visual:focus-visible img {
  transform: scale(1.04);
}

.showcase-slide__visual span {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 14%, transparent);
  backdrop-filter: blur(12px);
  color: var(--text-inverse);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.showcase-slide__body h4 {
  font-size: 1.02rem;
  line-height: 1.2;
}

.showcase-slide__meta,
.showcase-card__note {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.showcase-slide__meta {
  margin-top: 0.18rem;
  font-weight: 700;
}

.showcase-slide__text {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
}

.showcase-demo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.68rem 0.95rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  color: var(--accent-blue);
  font-size: 0.84rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.showcase-demo-link:hover,
.showcase-demo-link:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--surface-3) 68%, var(--surface-1) 32%);
}

.showcase-card__footer {
  align-items: center;
  gap: 0.55rem;
}

.showcase-slider__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.showcase-slider__button {
  min-height: 2.35rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: var(--surface-overlay-strong);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease;
}

.showcase-slider__button:hover,
.showcase-slider__button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  color: var(--accent-blue);
}

.tick-list,
.package-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick-list li,
.package-list li {
  position: relative;
  padding-left: 1.35rem;
}

.tick-list li + li,
.package-list li + li {
  margin-top: 0.58rem;
}

.tick-list li::before,
.package-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--orange-strong);
  font-weight: 800;
}

.section-heading__text,
.page-banner__text {
  color: var(--text-muted);
  max-width: 62ch;
}

.section-heading {
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.section-heading--wide {
  max-width: 64rem;
  margin-bottom: 1.5rem;
}

.service-card,
.package-card,
.comparison-card,
.timeline-card {
  padding: 1.28rem;
  border-radius: var(--radius-md);
}

.package-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay-strong) 94%, transparent), color-mix(in srgb, var(--surface-2) 76%, var(--surface-3) 24%));
  box-shadow: var(--shadow-soft);
}

.service-card {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.9rem 0 0.96rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
  border-radius: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 42%, transparent), transparent 86%);
  box-shadow: none;
}

.service-card__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.68rem;
  align-items: start;
}

.service-card__icon,
.questionnaire-card__icon {
  color: var(--blue-strong);
  margin-bottom: 0;
}

.service-card__icon {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0.28rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-1) 74%, var(--surface-2) 26%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-border) 54%, transparent);
}

.service-card h3,
.package-card h3,
.timeline-card h3 {
  margin-bottom: 0.65rem;
}

.service-card h3 {
  margin: 0;
  max-width: 18ch;
}

.service-card p {
  margin: 0;
  padding-left: calc(2rem + 0.7rem);
  max-width: 34ch;
}

.package-card {
  position: relative;
  gap: 0.18rem;
  border-color: color-mix(in srgb, var(--panel-border) 78%, var(--border-soft) 22%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay-strong) 96%, transparent), color-mix(in srgb, var(--surface-2) 80%, var(--surface-3) 20%));
  box-shadow: 0 18px 38px rgba(22, 52, 58, 0.07);
}

.package-card > * + * {
  margin-top: 0.32rem;
}

.package-card--showcase .showcase-slide__visual {
  margin-bottom: 0.8rem;
}

.package-card--featured {
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 90%, var(--accent-blue-soft) 10%), color-mix(in srgb, var(--surface-2) 76%, var(--surface-3) 24%));
  border-color: color-mix(in srgb, var(--accent-blue) 22%, var(--border-soft) 78%);
  box-shadow: 0 20px 42px rgba(22, 52, 58, 0.08);
}

:root[data-theme="dark"] .package-card--featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 90%, var(--accent-blue-soft) 10%), color-mix(in srgb, var(--surface-2) 72%, var(--surface-3) 28%));
  border-color: color-mix(in srgb, var(--accent-blue) 34%, var(--border-soft) 66%);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--accent-blue) 12%, transparent);
}

.package-card__label {
  display: inline-flex;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.package-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.3rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--accent-blue) 18%, var(--panel-border) 82%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 80%, var(--surface-2) 20%);
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.package-card__recommend {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0.1rem 0 0.25rem;
  padding: 0.32rem 0.62rem;
  border: 1px solid color-mix(in srgb, var(--accent-warm) 28%, var(--border-soft) 72%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 82%, var(--accent-warm-soft) 18%);
  color: var(--accent-warm-strong);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:root[data-theme="dark"] .package-card__recommend {
  border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border-soft) 70%);
  background: color-mix(in srgb, var(--surface-1) 82%, var(--accent-blue-soft) 18%);
  color: var(--accent-blue);
}

.package-card__summary {
  margin-bottom: 0.62rem;
  color: var(--text-2);
  line-height: 1.55;
}

.package-card__price {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0.18rem 0.45rem;
  margin: 0.08rem 0 0;
  font-size: 1rem;
}

.package-card__price strong {
  font-size: 1.72rem;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.package-card__price span {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.package-card__alt {
  margin-top: 0.06rem;
  margin-bottom: 0.76rem;
  color: var(--text-3);
  font-size: 0.82rem;
}

.package-card__security {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  color: var(--accent-blue);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
}

.package-card__fit {
  margin-top: 1rem;
  color: var(--text);
  font-weight: 700;
}

.package-card__tagline {
  margin: 0.12rem 0 0.55rem;
  color: var(--text-2);
  font-size: 0.81rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.42;
}

.package-card--compact {
  gap: 0.08rem;
}

.package-card--compact h3 {
  font-size: 1.4rem;
  line-height: 1.15;
}

.package-card--compact .package-list {
  display: grid;
  align-content: start;
  flex: 1 1 auto;
  margin-top: 0.26rem;
  padding-top: 0.68rem;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 70%, transparent);
}

.package-card--compact .package-list li {
  font-size: 0.95rem;
}

.package-card--compact .package-card__alt {
  margin-bottom: 0.64rem;
}

.package-card__cta {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 0.92rem;
  padding: 0.84rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
}

.package-card--showcase .package-card__cta {
  margin-top: auto;
}

.package-card--pro {
  border-color: color-mix(in srgb, var(--accent-blue) 36%, var(--border-soft) 64%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 88%, var(--accent-blue-soft) 12%), color-mix(in srgb, var(--surface-2) 78%, var(--surface-3) 22%));
}

.package-card--pro .package-card__badge {
  margin-bottom: 0.08rem;
  padding-inline: 0.68rem;
  border-color: color-mix(in srgb, var(--accent-warm-strong) 86%, var(--accent-blue) 14%);
  background: linear-gradient(135deg, var(--accent-warm-strong), color-mix(in srgb, var(--accent-blue) 72%, var(--accent-warm-strong) 28%));
  color: var(--text-inverse);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--accent-warm-strong) 28%, transparent);
}

.package-card--pro h3 {
  margin-top: 0.12rem;
  color: color-mix(in srgb, var(--text) 86%, var(--accent-warm-strong) 14%);
}

.package-card--pro .package-card__sub {
  margin-top: 0.14rem;
  color: color-mix(in srgb, var(--text-2) 90%, var(--accent-blue) 10%);
}

.package-card--pro .package-card__price {
  margin-top: 0.12rem;
}

.package-notes {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.45rem;
}

.package-notes__panel {
  display: grid;
  gap: 0.95rem;
  padding: 1.08rem 1.1rem 1.12rem;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-glass) 88%, var(--surface-1) 12%), color-mix(in srgb, var(--surface-1) 78%, var(--surface-2) 22%));
  box-shadow: 0 18px 34px rgba(22, 52, 58, 0.05);
}

.package-notes__intro {
  max-width: 33rem;
}

.package-notes__panel .mini-label {
  margin-bottom: 0.42rem;
}

.package-notes__title {
  margin: 0;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.package-notes__text {
  margin: 0.38rem 0 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.58;
}

.package-notes__list {
  display: grid;
  gap: 0.12rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-notes__list li {
  display: grid;
  gap: 0.14rem;
  padding: 0.78rem 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 74%, transparent);
}

.package-notes__list li:first-child {
  padding-top: 0.16rem;
  border-top: 0;
}

.package-notes__list strong {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.package-notes__list span {
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.56;
}

.package-notes__list li + li {
  margin-top: 0;
}

.package-extras {
  display: grid;
  gap: 0.72rem;
  margin-top: 0.08rem;
}

.package-extras article {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  min-height: 100%;
  padding: 0.88rem 0.92rem 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glass) 76%, transparent), color-mix(in srgb, var(--surface-1) 72%, var(--surface-2) 28%));
  box-shadow: none;
}

.package-extras strong {
  font-size: 0.94rem;
  color: var(--text);
}

.package-extras p {
  margin-top: 0;
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.5;
}

.comparison-section {
  position: relative;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-blue-soft) 8%, transparent), transparent 22%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 95%, var(--surface-1) 5%), color-mix(in srgb, var(--surface-3) 86%, var(--surface-2) 14%));
}

#process + .faq-section {
  padding-top: 2.85rem;
}

.comparison-section__layout {
  align-items: start;
  gap: 1.06rem;
}

.comparison-section__intro {
  max-width: 33rem;
}

.comparison-section .section-heading__text {
  max-width: 34ch;
  color: var(--text-2);
}

.comparison-grid {
  gap: 0.76rem;
  padding: 0.44rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 78%, transparent);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-glass) 82%, var(--surface-1) 18%), color-mix(in srgb, var(--surface-1) 76%, var(--surface-2) 24%));
  box-shadow: 0 18px 36px rgba(22, 52, 58, 0.045);
}

.comparison-card {
  position: relative;
  padding: 1.02rem 1.05rem 1.04rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 94%, var(--surface-2) 6%), color-mix(in srgb, var(--surface-2) 84%, var(--surface-3) 16%));
  color: var(--text);
  border-color: color-mix(in srgb, var(--panel-border) 78%, var(--border-soft) 22%);
  box-shadow: none;
}

.comparison-card::before {
  content: "";
  position: absolute;
  inset: 0.72rem auto 0.72rem 0;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-medium) 82%, transparent);
}

.comparison-card strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.comparison-card p {
  margin-top: 0.42rem;
  color: var(--text-2);
  line-height: 1.58;
}

.comparison-card--brand {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 74%, var(--accent-blue-soft) 26%), color-mix(in srgb, var(--surface-2) 78%, var(--surface-3) 22%));
  border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--panel-border) 70%);
}

.comparison-card--brand::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-blue) 78%, var(--accent-blue-strong) 22%), color-mix(in srgb, var(--accent-green) 55%, var(--accent-blue) 45%));
}

.timeline-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.92rem;
  align-items: start;
  padding: 1.08rem 1.12rem 1.14rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 74%, var(--surface-3) 26%), color-mix(in srgb, var(--surface-3) 84%, var(--surface-2) 16%));
  border-color: var(--border-medium);
  box-shadow: var(--shadow-soft);
}

.timeline-card span {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  margin-top: 0.02rem;
  border-radius: 0.95rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 88%, white 12%), color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%));
  border: 1px solid color-mix(in srgb, var(--accent-green) 30%, var(--border-soft) 70%);
  color: var(--accent-blue);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.timeline-card h3 {
  line-height: 1.14;
}

.timeline-card p {
  margin-top: 0.48rem;
  line-height: 1.58;
}

.faq-item {
  overflow: clip;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 74%, var(--surface-3) 26%), color-mix(in srgb, var(--surface-3) 84%, var(--surface-2) 16%));
  border-color: var(--border-medium);
  box-shadow: var(--shadow-soft);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.faq-item:hover {
  border-color: color-mix(in srgb, var(--accent-blue) 24%, var(--border-medium) 76%);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.14rem 1.2rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font-weight: 700;
  text-align: left;
  transition: color 180ms ease;
}

.faq-question::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.84rem;
  height: 1.84rem;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  color: var(--accent-blue);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--surface-1) 76%, transparent);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

.faq-answer p {
  overflow: hidden;
  padding: 0 1.2rem 0;
}

.faq-item.is-open {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 88%, white 12%), color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%));
  border-color: color-mix(in srgb, var(--accent-blue) 24%, var(--border-soft) 76%);
  box-shadow: 0 16px 30px rgba(22, 52, 58, 0.06);
}

.faq-item.is-open .faq-question {
  color: var(--accent-blue);
}

.faq-item.is-open .faq-question::after {
  content: "−";
  border-color: color-mix(in srgb, var(--accent-blue) 30%, var(--border-soft) 70%);
  color: var(--accent-blue-strong);
  background: color-mix(in srgb, var(--surface-1) 90%, var(--accent-blue-soft) 10%);
  transform: rotate(180deg);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-item.is-open .faq-answer p {
  padding-bottom: 1.16rem;
  color: var(--text-2);
}

#faq + .section--cta {
  padding-top: 1.1rem;
}

.cta-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.48rem 1.56rem;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 78%, var(--surface-3) 22%));
  box-shadow: var(--shadow-lg);
}

.cta-panel h2 {
  max-width: 20ch;
}

.cta-panel > div:first-child {
  max-width: 41rem;
}

.cta-actions {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

.questionnaire-page {
  padding-top: 1.75rem;
  padding-bottom: 3.7rem;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-blue-soft) 6%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 95%, var(--surface-1) 5%), color-mix(in srgb, var(--surface-3) 84%, var(--surface-2) 16%));
}

.questionnaire-layout,
.questionnaire-grid,
.questionnaire-options {
  display: grid;
  gap: 1rem;
}

.questionnaire-sidebar,
.questionnaire-shell,
.questionnaire-form,
.questionnaire-actions {
  display: grid;
  gap: 1rem;
}

.questionnaire-sidebar {
  gap: 0.72rem;
  align-content: start;
}

.questionnaire-plan-card,
.questionnaire-help-card {
  gap: 0.55rem;
}

.questionnaire-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  gap: 0.45rem;
  min-height: 2.8rem;
  padding: 0.72rem 1rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 78%, var(--accent-blue) 22%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 88%, var(--surface-3) 12%);
  color: var(--accent-blue);
  font-weight: 800;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.questionnaire-back .icon {
  transform: rotate(180deg);
}

.questionnaire-back:hover,
.questionnaire-back:focus-visible {
  transform: translateY(-1px);
  border-color: var(--accent-blue);
  background: color-mix(in srgb, var(--surface-3) 68%, var(--surface-1) 32%);
}

.questionnaire-plan-card h1 {
  max-width: none;
  margin-bottom: 0.32rem;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
}

.questionnaire-plan-card p:last-child,
.questionnaire-help-card p:last-child {
  margin: 0;
  color: color-mix(in srgb, currentColor 78%, transparent);
  line-height: 1.58;
}

.questionnaire-plan-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.45rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border-inverse);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-1) 8%, transparent);
  font-weight: 700;
}

.questionnaire-plan-lock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  min-height: 2rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 14%, transparent);
  color: var(--text-inverse);
}

.questionnaire-help-card h2 {
  max-width: none;
  margin-bottom: 0.48rem;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.questionnaire-shell {
  gap: 0.95rem;
  padding: 1.28rem 1.32rem 1.34rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 84%, transparent);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 78%, var(--surface-3) 22%));
  box-shadow: var(--shadow-lg);
}

.page-banner {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 66%, var(--surface-2) 34%), color-mix(in srgb, var(--surface-1) 88%, var(--surface-2) 12%));
}

.page-banner__meta {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.page-banner__meta strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
}

.page-banner__meta span {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.questionnaire-grid {
  grid-template-columns: minmax(0, 1fr);
}

.questionnaire-field,
.questionnaire-fieldset {
  display: grid;
  gap: 0.42rem;
}

.questionnaire-field label,
.questionnaire-fieldset legend {
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
}

.questionnaire-field label span {
  color: var(--text-muted);
  font-weight: 600;
}

.questionnaire-field input,
.questionnaire-field textarea,
.questionnaire-field select {
  width: 100%;
  padding: 0.9rem 0.96rem;
  border: 1px solid var(--border-medium);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-1) 90%, var(--surface-2) 10%);
  color: var(--text);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.questionnaire-field textarea {
  min-height: 7rem;
  resize: vertical;
}

.questionnaire-field input:focus,
.questionnaire-field textarea:focus,
.questionnaire-field select:focus {
  border-color: color-mix(in srgb, var(--accent-blue) 50%, var(--border-soft) 50%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 14%, transparent);
}

.questionnaire-field--locked {
  padding: 0.9rem;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface-3) 82%, var(--surface-2) 18%);
}

.questionnaire-locked-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.questionnaire-locked-value strong {
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-warm-soft) 70%, transparent), color-mix(in srgb, var(--accent-warm) 18%, var(--surface-1) 82%));
  color: var(--orange-strong);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.questionnaire-locked-value span,
.questionnaire-note {
  color: var(--text-muted);
}

.questionnaire-fieldset {
  margin: 0;
  padding: 0.94rem 0.96rem 0.98rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 74%, transparent);
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 86%, var(--surface-2) 14%), color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%));
}

.questionnaire-section-intro {
  display: grid;
  gap: 0.42rem;
  padding: 1rem 1.02rem 1.04rem;
  border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 72%, var(--surface-2) 28%), color-mix(in srgb, var(--surface-1) 88%, var(--surface-2) 12%));
}

.questionnaire-section-intro h3 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
}

.questionnaire-section-intro p:last-child {
  margin: 0;
  color: var(--text-muted);
}

.questionnaire-options {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.questionnaire-options--three {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.ownership-grid {
  display: grid;
  gap: 0.82rem;
}

.flow-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-1) 6%, transparent);
}

.flow-list strong {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 14%, transparent);
  font-size: 0.82rem;
}

.flow-list span {
  color: var(--text-inverse-muted);
  line-height: 1.5;
}

.service-included-grid {
  margin-top: 0.1rem;
}

.ownership-card {
  display: grid;
  gap: 0.48rem;
  padding: 1rem 1.02rem 1.04rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 74%, var(--surface-3) 26%));
}

.ownership-card__icon {
  color: var(--accent-blue);
  margin-bottom: 0.18rem;
}

.ownership-card h3,
.ownership-statement h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.ownership-card p,
.ownership-statement p:last-child {
  margin: 0;
}

.ownership-list {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--text);
  font-weight: 700;
}

.ownership-list li + li {
  margin-top: 0.45rem;
}

.questionnaire-option {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 3.1rem;
  padding: 0.84rem 0.92rem;
  border: 1px solid var(--border-medium);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-2) 74%, var(--accent-blue-soft) 26%);
  font-weight: 700;
}

.questionnaire-option input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
}

.questionnaire-actions {
  align-items: start;
  gap: 0.72rem;
}

.site-footer {
  padding: 0 0 3rem;
}

.site-footer__panel {
  display: grid;
  gap: 1.35rem;
  padding: 1.5rem;
  border: 1px solid var(--border-soft);
  border-radius: 30px;
  background: var(--surface-glass);
  box-shadow: var(--shadow-sm);
}

.site-footer__brand {
  display: grid;
  gap: 0.55rem;
}

.site-footer__brand p,
.site-footer__meta span {
  color: var(--text-muted);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.6rem;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-3) 18%);
  font-weight: 700;
}

.button[disabled] {
  cursor: not-allowed;
  transform: none;
  opacity: 0.55;
  box-shadow: none;
}

.button[disabled]:hover,
.button[disabled]:focus-visible {
  transform: none;
}

.questionnaire-note[data-state="ready"] {
  color: var(--accent-blue);
}

.questionnaire-note[data-state="submitted"] {
  color: var(--orange-strong);
}

.questionnaire-field--full {
  grid-column: 1 / -1;
}

@media (max-width: 520px) {
  .container {
    width: min(100vw - 1rem, 100%);
  }

  .brand__logo {
    height: 2rem;
  }

  .brand__text span {
    font-size: 0.68rem;
  }

  .hero__copy,
  .hero-panel__card,
  .package-card,
  .comparison-card,
  .timeline-card,
  .faq-item,
  .cta-panel,
  .questionnaire-shell,
  .site-footer__panel {
    border-radius: 22px;
  }

  .hero__copy {
    padding: 1rem;
  }

  .hero__lead {
    max-width: 34ch;
    font-size: 0.93rem;
  }

  .hero__actions,
  .hero__stats {
    margin-top: 0.72rem;
  }

  .showcase-card {
    padding: 0.76rem;
  }

  .button,
  .showcase-card__link,
  .showcase-demo-link,
  .questionnaire-back,
  .showcase-slider__button {
    width: 100%;
  }

  /* Mobile-friendly tap targets and stacking tweaks */
  .button {
    min-height: 3.6rem;
    padding: 1rem 1.1rem;
  }

  /* Ensure package CTAs don't enforce a fixed min width on small screens */
  .package-card__cta {
    min-width: 0;
    width: 100%;
  }

  /* Keep hero headline from becoming too tall on small viewports */
  h1 {
    max-width: 40ch;
  }

  .showcase-card__footer {
    justify-items: stretch;
  }

  .showcase-slider__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .questionnaire-plan-lock,
  .questionnaire-locked-value {
    align-items: flex-start;
  }
}

@media (min-width: 760px) {
  .service-stack,
  .package-extras,
  .ownership-grid,
  .site-footer__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .package-notes {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.02rem;
  }

  .package-notes__panel {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: 0.96rem 1.08rem;
  }

  .package-notes__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.94rem;
  }

  .package-notes__list li {
    min-height: 100%;
  }

  .package-extras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.68rem;
  }

  .questionnaire-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .questionnaire-field--locked,
  .questionnaire-actions {
    grid-column: 1 / -1;
  }

  .questionnaire-section-intro,
  .questionnaire-fieldset,
  .questionnaire-field--full {
    grid-column: 1 / -1;
  }

  .questionnaire-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__layout,
  .two-column {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: start;
  }

  .cta-panel {
    display: block;
  }

  .cta-panel > div:first-child {
    max-width: 44rem;
    margin-bottom: 1rem;
  }

  .cta-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .site-footer__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

}

@media (min-width: 980px) {
  .section {
    padding: 4.35rem 0;
  }

  .section--cta {
    padding-top: 0.65rem;
    padding-bottom: 4.4rem;
  }

  .questionnaire-layout {
    grid-template-columns: minmax(250px, 0.33fr) minmax(0, 0.67fr);
    gap: 1.08rem;
    align-items: start;
  }

  .questionnaire-shell {
    padding: 1.56rem 1.6rem 1.62rem;
  }

  .site-header {
    background: color-mix(in srgb, var(--surface-overlay-strong) 94%, transparent);
  }

  .header-inner,
  .site-header__inner {
    min-height: 4.6rem;
    gap: 1.25rem;
    padding-block: 0.5rem;
  }

  .brand__logo {
    height: 2.2rem;
  }

  .brand__title,
  .brand__text strong {
    font-size: 1rem;
  }

  .menu-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    display: block;
    flex-direction: unset;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav__list {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
  }

  .nav__link {
    min-height: auto;
    padding: 0.2rem 0;
  }

  .nav__cta {
    width: auto;
    margin-top: 0;
    margin-left: 0.25rem;
  }

  .primary-nav a {
    white-space: nowrap;
  }

  .hero {
    padding: 1.75rem 0 0.6rem;
  }

  .questionnaire-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__layout,
  .two-column {
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: 1.3rem;
    align-items: start;
  }

  .hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
    gap: 1.05rem;
    align-items: stretch;
  }

  .hero__copy {
    padding: 1.75rem 1.85rem 1.55rem;
  }

  .hero__lead {
    max-width: 50ch;
  }

  .hero__actions {
    margin-top: 0.8rem;
  }

  .package-extras,
  .comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem;
  }

  .comparison-section__layout {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 1.18rem;
  }

  .comparison-section__intro {
    padding-top: 0.22rem;
  }

  .comparison-grid {
    gap: 0.72rem;
    padding: 0.46rem;
  }

  .hero-panel {
    height: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.9rem;
  }

  .hero-panel__card {
    padding: 1.5rem;
  }

  .hero-panel__card--dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-panel__card--best-fit .tick-list {
    margin-top: auto;
    padding-top: 0.2rem;
  }

  .showcase-card {
    padding: 0.88rem;
  }

  .showcase-card__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .showcase-slide {
    grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
    gap: 0.9rem;
  }

  .showcase-slide__visual {
    min-height: 12.25rem;
  }

  .showcase-card__footer {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .section-heading--wide {
    margin-bottom: 1.35rem;
  }

  .package-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.88rem;
    align-items: stretch;
  }

  .package-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.28rem 1.22rem;
  }

  .package-card__fit {
    margin-top: auto;
    padding-top: 0.94rem;
  }

  .package-card__cta {
    align-self: stretch;
  }

  .package-extras {
    margin-top: 1rem;
    gap: 0.9rem;
  }

  .comparison-grid,
  .timeline {
    gap: 1rem;
  }

  .comparison-grid {
    align-items: stretch;
  }

  .timeline {
    gap: 0.92rem;
  }

  .faq-list {
    max-width: 58rem;
    margin: 0 auto;
  }

  .cta-panel {
    grid-template-columns: minmax(0, 1.12fr) auto;
    gap: 2rem;
    padding: 2.35rem 2.45rem;
  }

  .site-footer__panel {
    padding: 1.7rem 1.8rem;
  }

}
/* PresGro visual system cleanup */
:root {
  --bg: #F8FBFA;
  --bg-soft: #F1F6F5;
  --bg-blue: #F3F8FA;
  --surface-2: #F8FBFA;
  --surface-3: #F1F6F5;
  --surface-overlay: rgba(255, 255, 255, 0.9);
  --surface-overlay-strong: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.88);
  --text-1: #14232B;
  --text-2: #425966;
  --text-3: #667B86;
  --border-soft: #D8E4E7;
  --border-medium: #CDDADF;
  --border-strong: rgba(20, 35, 43, 0.18);
  --shadow-soft: 0 12px 30px rgba(22, 52, 58, 0.06);
  --panel-radius: 24px;
  --panel-radius-compact: 20px;
  --panel-bg: linear-gradient(180deg, var(--surface-overlay-strong), color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%));
  --panel-bg-strong: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--surface-2) 92%, var(--surface-3) 8%));
  --panel-border: var(--border-medium);
  --panel-shadow: var(--shadow-soft);
  --pill-bg: color-mix(in srgb, var(--surface-2) 78%, var(--accent-blue-soft) 22%);
  --pill-border: var(--border-medium);
  --pill-text: var(--accent-blue);
  --field-bg: #FFFFFF;
  --field-border: var(--border-medium);
}

body {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mint-strong) 8%, transparent), transparent 21%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-strong) 10%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 90%, var(--bg) 10%) 0%, color-mix(in srgb, var(--bg-blue) 72%, var(--bg) 28%) 18%, var(--bg) 52%, color-mix(in srgb, var(--bg-soft) 78%, var(--bg) 22%) 100%);
}

.section {
  padding: 3.5rem 0;
}

.section--soft,
.section--contrast {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section--soft {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 94%, var(--accent-blue-soft) 6%), color-mix(in srgb, var(--surface-3) 88%, var(--surface-2) 12%));
}

.section--cta {
  padding-top: 0.9rem;
  padding-bottom: 1.6rem;
}

.faq-section {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--blue-strong) 4%, transparent), transparent 22%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent-blue-soft) 5%, transparent), transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, var(--surface-1) 4%), color-mix(in srgb, var(--surface-3) 88%, var(--surface-2) 12%));
}

.nav__link,
.section-heading__text,
.page-banner__text,
.hero__lead,
.section-heading--wide p:last-child,
.service-card p,
.package-card__summary,
.package-card__alt,
.comparison-card p,
.timeline-card p,
.faq-answer p,
.cta-panel p,
.package-notes__list,
.page-banner__meta span,
.site-footer__tag,
.showcase-slide__meta,
.showcase-card__note,
.package-extras p,
.questionnaire-note,
.questionnaire-locked-value span,
.questionnaire-section-intro p:last-child,
.contact-note {
  color: var(--text-2);
}

.contact-note__link {
  color: var(--accent-blue-strong);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.14em;
}

.mini-label,
.brand__subtitle,
.hero-stat span,
.package-card__price span,
.site-footer__bottom {
  color: var(--text-3);
  opacity: 1;
}

.button--primary {
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-blue-soft));
  color: #F4FAFB;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--accent-blue) 20%, transparent);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 88%, white 12%), var(--accent-blue-soft));
}

.button--secondary,
.button--nav {
  border-color: var(--panel-border);
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface-1) 22%);
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--nav:hover,
.button--nav:focus-visible {
  background: color-mix(in srgb, var(--surface-2) 62%, var(--surface-1) 38%);
  border-color: var(--accent-blue);
  color: var(--text);
}

.hero__copy,
.hero-panel__card,
.package-card,
.comparison-card,
.timeline-card,
.faq-item,
.page-banner,
.package-notes__panel,
.ownership-card,
.questionnaire-shell,
.cta-panel,
.site-footer__panel,
.package-extras article,
.quick-enquiry--separate,
.card,
.info-box,
.accordion-item {
  border-color: var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.hero__copy,
.hero-panel__card,
.package-card,
.comparison-card,
.timeline-card,
.faq-item,
.page-banner,
.package-notes__panel,
.ownership-card,
.questionnaire-shell,
.cta-panel,
.site-footer__panel,
.quick-enquiry--separate,
.card,
.info-box,
.accordion-item {
  background: var(--panel-bg);
}

.hero__copy,
.hero-panel__card,
.package-card,
.comparison-card,
.timeline-card,
.faq-item,
.page-banner,
.package-notes__panel,
.ownership-card,
.questionnaire-shell,
.cta-panel,
.site-footer__panel,
.card,
.info-box,
.accordion-item {
  border-radius: var(--panel-radius);
}

.package-extras article,
.hero-stat,
.pill,
.badge,
.package-card__security,
.package-card__recommend,
.hero__kicker,
.showcase-slider__button {
  border-radius: 999px;
}

.hero__copy::after {
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-blue-soft) 14%, transparent), transparent 66%);
}

.hero-panel {
  gap: 0.5rem;
}

.hero-panel__card {
  padding: 1rem;
}

.hero-panel__card--dark {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-blue-soft) 26%, var(--surface-1) 74%), color-mix(in srgb, var(--surface-3) 78%, var(--surface-2) 22%));
  border-color: color-mix(in srgb, var(--panel-border) 82%, var(--accent-blue) 18%);
  box-shadow: 0 10px 28px rgba(22, 52, 58, 0.06);
}

.hero-panel__card--dark h2 {
  color: var(--text);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
}

.hero-panel__card--best-fit,
.hero-stat,
.package-card--featured,
.package-card--pro,
.faq-item.is-open,
.package-notes__panel,
.package-extras article,
.questionnaire-field--locked,
.questionnaire-fieldset,
.questionnaire-section-intro,
.info-box,
.card-feature,
.card-package {
  background: var(--panel-bg-strong);
}

.hero-panel__card--best-fit,
.hero-stat,
.package-card--featured,
.package-card--pro,
.faq-item.is-open,
.package-card__recommend,
.package-card__security,
.pill,
.badge {
  border-color: var(--panel-border);
}

.service-card {
  border-bottom-color: var(--panel-border);
}

.package-card {
  padding: 1.28rem 1.18rem 1.15rem;
}

.package-card--featured,
.package-card--pro {
  transform: translateY(-2px);
}

.package-card--featured {
  box-shadow: 0 18px 36px color-mix(in srgb, var(--accent-blue) 8%, transparent);
}

.package-card--pro {
  box-shadow: 0 19px 38px rgba(22, 52, 58, 0.078);
}

.package-card__label,
.eyebrow,
.mini-label,
.package-card__recommend,
.pill,
.badge {
  letter-spacing: 0.08em;
}

.package-card__label,
.package-card__recommend,
.pill,
.badge,
.hero__kicker,
.package-card__security {
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-text);
}

.package-card__label {
  background: transparent;
  border: 0;
  color: var(--text-3);
}

.package-card--pro {
  border-color: color-mix(in srgb, var(--accent-blue) 44%, var(--panel-border) 56%);
}

.package-card--pro .package-card__badge {
  background: linear-gradient(135deg, var(--accent-warm-strong), color-mix(in srgb, var(--accent-blue) 72%, var(--accent-warm-strong) 28%));
  border-color: color-mix(in srgb, var(--accent-warm-strong) 86%, var(--accent-blue) 14%);
  color: var(--text-inverse);
  box-shadow: 0 4px 11px color-mix(in srgb, var(--accent-warm-strong) 28%, transparent);
}

.package-card__recommend,
.pill,
.badge,
.hero__kicker,
.package-card__security {
  font-weight: 800;
}

.package-card__alt,
.package-card__sub {
  color: var(--text-2);
}

.package-card__sub {
  margin-top: 0.08rem;
  font-size: 0.93rem;
  line-height: 1.48;
}

.package-card h3 {
  letter-spacing: -0.02em;
}

.package-card__price,
.price-month,
.price-setup {
  color: var(--text);
}

.package-card__cta,
.cta-actions .button {
  min-width: unset;
}

.questionnaire-field input,
.questionnaire-field textarea,
.questionnaire-field select,
.questionnaire-option,
.input-control,
.input,
textarea.input,
select.input {
  border: 1px solid var(--field-border);
  background: var(--field-bg);
}

.input-control,
.input,
textarea.input,
select.input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.72rem 0.85rem;
  border-radius: 14px;
  color: var(--text);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.input-control--textarea,
textarea.input,
textarea.input-control {
  min-height: 7rem;
  resize: vertical;
}

.input-control::placeholder,
.input::placeholder,
.questionnaire-field input::placeholder,
.questionnaire-field textarea::placeholder {
  color: var(--text-3);
}

.input-control:focus,
.input-control:focus-visible,
.input:focus,
.input:focus-visible,
.questionnaire-field input:focus,
.questionnaire-field textarea:focus,
.questionnaire-field select:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 12%, transparent);
  outline: 0;
}

.quick-enquiry {
  max-width: 720px;
}

.quick-enquiry--separate,
.quick-enquiry.quick-enquiry--separate {
  width: min(880px, 94%);
  margin: 0 auto;
  padding: 1.08rem 1.1rem 1.12rem;
  border-radius: var(--panel-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay-strong) 94%, transparent), color-mix(in srgb, var(--surface-2) 80%, var(--surface-3) 20%));
  border: 1px solid var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.quick-enquiry__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.quick-enquiry__field,
.quick-enquiry__actions {
  margin-top: 0.75rem;
}

.quick-enquiry__turnstile {
  margin-top: 0.78rem;
}

.turnstile-slot {
  min-height: 66px;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-form {
  display: grid;
  gap: 0;
}

.cta-panel,
.cta-panel--compact {
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
}

.cta-final {
  max-width: 680px;
  margin: 0 auto;
}

.cta-final__note {
  margin-top: 0.38rem;
  color: var(--text-2);
}

.cta-actions,
.cta-actions--focused {
  gap: 0.64rem;
  align-items: center;
  margin-top: 0.72rem;
}

.cta-actions--focused .button--primary {
  min-width: 11rem;
}

.cta-actions--focused .button--secondary {
  min-width: 10rem;
}

.quick-enquiry-section {
  margin-top: 0.42rem;
  margin-bottom: 1rem;
}

.section--cta + .site-footer {
  margin-top: 1.25rem;
}

.site-footer--simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  padding-top: 1.38rem;
  padding-bottom: 1.08rem;
  background: color-mix(in srgb, var(--surface-1) 96%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--surface-2) 38%, transparent);
}

.site-footer__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem;
}

.site-footer__left {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.3rem;
}

.brand__logo--footer {
  height: 28px;
  margin-right: 8px;
}

.site-footer__brand-mark {
  vertical-align: middle;
}

.site-footer__nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.72rem 0.98rem;
}

.site-footer__nav a {
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.35;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.site-footer__bottom {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--text-3);
}

.showcase-slider__button,
.showcase-card__link,
.showcase-demo-link,
.button--secondary,
.button--nav {
  border-color: color-mix(in srgb, var(--panel-border) 78%, var(--accent-blue) 22%);
}

/* Controlled top-of-page refinement */
.hero {
  position: relative;
  padding: 1.15rem 0 0.3rem;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mint-strong) 6%, transparent), transparent 28%),
    radial-gradient(circle at top right, color-mix(in srgb, var(--blue-strong) 8%, transparent), transparent 30%);
  pointer-events: none;
}

.hero__inner,
.hero__layout,
.support-band {
  position: relative;
}

.panel {
  border-radius: var(--panel-radius);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}

.hero__layout.hero__inner {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.72rem;
}

.hero-intro {
  display: grid;
  gap: 0;
  padding: 1rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay-strong) 98%, transparent), color-mix(in srgb, var(--surface-2) 86%, var(--surface-3) 14%));
}

.hero__copy::after {
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-blue-soft) 10%, transparent), transparent 68%);
}

.hero-intro__topline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  align-items: center;
  margin-bottom: 0.7rem;
}

.hero-intro__eyebrow {
  margin: 0;
}

.hero-intro__pill {
  margin: 0;
}

.hero-intro__title {
  max-width: 12.5ch;
  margin-bottom: 0.55rem;
}

.hero-intro__body {
  max-width: 56ch;
  margin-top: 0;
}

.hero-intro__actions {
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
}

.hero-intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  margin-top: 0.7rem;
  padding-top: 0.72rem;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
}

.hero-intro__link,
.package-guidance__link {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-blue);
  font-size: 0.9rem;
  font-weight: 800;
  transition:
    transform 180ms ease,
    color 180ms ease;
}

.hero-intro__link:hover,
.hero-intro__link:focus-visible,
.package-guidance__link:hover,
.package-guidance__link:focus-visible {
  transform: translateY(-1px);
  color: var(--text);
}

.button--ghost {
  min-height: 2.8rem;
  padding: 0.65rem 0.2rem;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--accent-blue);
}

.button--ghost:hover,
.button--ghost:focus-visible {
  border-color: transparent;
  background: transparent;
  color: var(--text);
}

.hero-intro__portfolio-link {
  justify-content: flex-start;
  font-weight: 800;
}

.hero-summary {
  display: grid;
  gap: 0.72rem;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  padding: 1rem;
  border-color: color-mix(in srgb, var(--panel-border) 68%, transparent);
  background: color-mix(in srgb, var(--surface-1) 82%, var(--surface-2) 18%);
  box-shadow: 0 6px 14px rgba(22, 52, 58, 0.035);
}

.hero-summary__eyebrow {
  margin: 0;
  color: var(--text-3);
}

.hero-summary__list {
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

.hero-summary__item {
  padding-left: 1rem;
  position: relative;
}

.hero-summary__item strong {
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.hero-summary__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.56rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-blue) 68%, white 32%), color-mix(in srgb, var(--accent-blue) 52%, var(--mint-strong) 48%));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-blue) 8%, transparent);
}

.hero-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-self: end;
  padding-top: 0.18rem;
}

.hero-summary__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.32rem 0.58rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-1) 60%, transparent);
  color: var(--text-3);
  font-size: 0.74rem;
  font-weight: 700;
}

.support-band {
  margin-top: 0;
  padding: 0 0 0.72rem;
}

.panel--support-band,
.support-band__inner {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
  border-color: color-mix(in srgb, var(--panel-border) 72%, var(--accent-blue) 28%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 98%, transparent), color-mix(in srgb, var(--surface-2) 90%, var(--surface-3) 10%));
  box-shadow: 0 8px 18px rgba(22, 52, 58, 0.045);
}

.support-band__intro {
  display: grid;
  gap: 0.45rem;
}

.support-band__title {
  margin: 0;
  max-width: 24ch;
  color: var(--text);
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  line-height: 1.08;
}

.support-band__body {
  margin: 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.58;
}

.support-points {
  display: grid;
  gap: 0.5rem;
}

.package-guidance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1rem;
}

.package-carousel {
  position: relative;
}

.package-carousel__hint,
.package-carousel__nav {
  display: none;
}

.support-point {
  padding: 0.6rem 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 74%, transparent);
  border-radius: 0;
  background: transparent;
}

.support-point:first-child {
  padding-top: 0;
  border-top: 0;
}

.support-point__title {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.25;
}

.support-point__body {
  margin: 0.2rem 0 0;
  color: var(--text-2);
  font-size: 0.82rem;
  line-height: 1.52;
}

.service-section {
  padding-top: 3.1rem;
}

.service-section .two-column {
  gap: 1rem;
  align-items: start;
}

.service-section__intro {
  gap: 0.82rem;
}

.service-section__intro h2 {
  max-width: 13ch;
}

.service-section .section-heading__text {
  max-width: 54ch;
}

.service-stack {
  position: relative;
  gap: 0.76rem;
}

.service-stack .service-card:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 620px) {
  .support-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .hero {
    padding: 1.35rem 0 0.25rem;
  }

  .hero__layout.hero__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.72fr);
    gap: 0.72rem;
    align-items: stretch;
  }

  .hero-intro__actions {
    gap: 0.8rem;
  }

  .hero-intro__links {
    gap: 0.9rem 1.1rem;
  }

  .hero-intro {
    padding: 1.18rem 1.2rem;
  }

  .hero-summary {
    padding: 1.18rem 1.2rem;
  }

  .service-section {
    padding-top: 3.35rem;
  }

  .service-section .two-column {
    grid-template-columns: minmax(260px, 0.84fr) minmax(0, 1.16fr);
    gap: 1.08rem;
  }

  .service-section__intro {
    position: sticky;
    top: 5.4rem;
  }

  .service-stack {
    gap: 0.72rem 0.95rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  .service-stack .service-card:nth-child(-n + 2) {
    border-top: 0;
    padding-top: 0;
  }

  .service-card {
    height: 100%;
  }

  .support-band {
    padding-bottom: 0.72rem;
  }

  .support-band__inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 0.72rem;
    padding: 1.02rem 1.06rem;
  }

  .support-point {
    padding: 0.1rem 0 0;
    border-top: 0;
  }
}

@media (max-width: 720px) {
  :root {
    --mobile-content-inset: 1rem;
  }

  #packages .section-heading,
  #packages .package-guidance,
  #faq .section-heading,
  #faq .faq-list {
    padding-inline: var(--mobile-content-inset);
  }

  .comparison-section {
    padding-top: 2.6rem;
    padding-bottom: 2.7rem;
  }

  .comparison-section__layout {
    gap: 0.88rem;
    padding-inline: var(--mobile-content-inset);
  }

  .comparison-section .section-heading__text {
    max-width: none;
  }

  .comparison-grid {
    gap: 0.56rem;
    padding: 0.32rem;
    border-radius: 24px;
  }

  .comparison-card {
    padding: 0.9rem 0.94rem 0.94rem;
  }

  .comparison-card p {
    margin-top: 0.4rem;
  }

  .package-carousel {
    margin-inline: calc(50% - 50vw + 0.5rem);
  }

  .package-carousel__hint {
    display: block;
    margin: 0 0 0.45rem var(--mobile-content-inset);
    color: var(--text-3);
    font-size: 0.78rem;
    font-weight: 700;
  }

  .package-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82.5%;
    gap: 0.65rem;
    overflow-x: auto;
    padding: 0 0.9rem 0.2rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: calc(8.75% + 0.9rem);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .package-grid::-webkit-scrollbar {
    display: none;
  }

  .package-grid::after {
    content: "";
    width: 0.1rem;
  }

  .package-card {
    scroll-snap-align: center;
    min-width: 0;
    width: 100%;
    padding: 0.94rem 0.88rem 0.88rem;
  }

  .package-card > * + * {
    margin-top: 0.28rem;
  }

  .package-card__price strong {
    font-size: 1.44rem;
  }

  .package-card__alt {
    margin-bottom: 0.68rem;
  }

  .package-card__summary {
    margin-bottom: 0.58rem;
  }

  .package-card--compact .package-list {
    margin-top: 0.28rem;
  }

  .package-card--compact .package-list li {
    font-size: 0.92rem;
  }

  .package-card__cta {
    width: 100%;
    padding: 0.78rem 0.88rem;
  }

  .package-notes {
    margin-top: 1.34rem;
    gap: 0.82rem;
  }

  .package-notes__panel {
    gap: 0.78rem;
    padding: 1rem 0.96rem 1.02rem;
  }

  .package-notes__text {
    font-size: 0.91rem;
  }

  .package-notes__list li {
    padding: 0.62rem 0;
  }

  .package-notes__list strong,
  .package-notes__list span {
    font-size: 0.9rem;
  }

  .package-carousel__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    justify-content: center;
    margin-top: 0.48rem;
    padding-inline: var(--mobile-content-inset);
  }

  .package-carousel__dot {
    min-height: 1.82rem;
    padding: 0.24rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--panel-border) 74%, var(--accent-blue) 26%);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-1) 82%, transparent);
    color: var(--text-2);
    font-size: 0.74rem;
    font-weight: 800;
    cursor: pointer;
    transition:
      background-color 180ms ease,
      border-color 180ms ease,
      color 180ms ease,
      transform 180ms ease;
  }

  .package-carousel__dot:hover,
  .package-carousel__dot:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent-blue);
    color: var(--text);
  }

  .package-carousel__dot.is-active {
    background: color-mix(in srgb, var(--surface-2) 74%, var(--accent-blue-soft) 26%);
    border-color: color-mix(in srgb, var(--accent-blue) 34%, var(--panel-border) 66%);
    color: var(--accent-blue);
  }

  .service-section {
    padding-top: 2.7rem;
    padding-bottom: 2.35rem;
  }

  .service-section .two-column {
    gap: 0.8rem;
    padding-inline: var(--mobile-content-inset);
  }

  #process .two-column {
    padding-inline: var(--mobile-content-inset);
  }

  .service-section__intro {
    gap: 0.74rem;
  }

  .service-stack {
    gap: 0.58rem;
  }

  .service-stack .service-card:first-child {
    margin-top: 0.12rem;
  }

  .service-card {
    gap: 0.46rem;
    padding: 0.82rem 0 0.84rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 26%, transparent), transparent 88%);
  }

  .service-card__head {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.58rem;
    align-items: start;
  }

  .service-card__icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.24rem;
    border-radius: 12px;
  }

  .service-card h3 {
    max-width: none;
    line-height: 1.28;
  }

  .service-card p {
    padding-left: 0;
    max-width: 38ch;
  }

  .service-section + .section--soft {
    padding-top: 2.75rem;
  }

  .hero-intro__topline {
    align-items: flex-start;
  }

  .hero-intro__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-intro__actions .button {
    width: 100%;
  }

  .hero-intro__links {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-intro__link,
  .package-guidance__link {
    width: 100%;
    justify-content: flex-start;
  }

  .hero-summary__meta {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions,
  .cta-actions--focused {
    flex-direction: column;
    gap: 0.58rem;
  }

  .cta-actions .button,
  .cta-actions--focused .button {
    width: 100%;
  }

  .quick-enquiry__grid {
    grid-template-columns: 1fr;
  }

  .quick-enquiry.quick-enquiry--separate {
    width: min(100%, 34rem);
    padding: 1rem 0.96rem 1.02rem;
  }

  .package-card--featured,
  .package-card--pro {
    transform: none;
  }

  .site-footer--simple,
  .site-footer__panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.82rem;
  }

  .site-footer__nav {
    justify-content: flex-start;
    gap: 0.62rem 0.92rem;
  }

  .site-footer__bottom {
    align-self: flex-end;
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  .hero__copy,
  .hero-panel__card,
  .package-card,
  .comparison-card,
  .timeline-card,
  .faq-item,
  .cta-panel,
  .questionnaire-shell,
  .site-footer__panel,
  .quick-enquiry--separate,
  .card,
  .info-box,
  .accordion-item {
    border-radius: 22px;
  }

  .timeline-card {
    gap: 0.82rem;
    padding: 0.98rem 0.94rem 1rem;
  }

  .questionnaire-shell {
    padding: 1.14rem 1.08rem 1.12rem;
  }

  .questionnaire-fieldset,
  .questionnaire-section-intro,
  .ownership-card {
    padding: 0.9rem 0.92rem 0.94rem;
  }

  .timeline-card span {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.9rem;
  }

  .timeline-card p {
    margin-top: 0.42rem;
  }

  .faq-question {
    padding: 1.06rem 1.04rem;
  }

  .faq-answer p {
    padding-inline: 1.04rem;
  }

  .faq-item.is-open .faq-answer p {
    padding-bottom: 1.04rem;
  }
}

@media (max-width: 760px) {
  .questionnaire-form[data-help-decide-form],
  .questionnaire-form[data-questionnaire-form] {
    gap: 0.9rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-grid,
  .questionnaire-form[data-questionnaire-form] .questionnaire-grid {
    gap: 0.88rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-fieldset,
  .questionnaire-form[data-questionnaire-form] .questionnaire-fieldset {
    gap: 0.48rem;
    padding: 0.86rem 0.9rem 0.9rem;
    border-radius: 20px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, var(--surface-2) 8%), color-mix(in srgb, var(--surface-2) 88%, var(--surface-3) 12%));
    border-color: color-mix(in srgb, var(--panel-border) 68%, transparent);
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-fieldset legend,
  .questionnaire-form[data-questionnaire-form] .questionnaire-fieldset legend {
    margin-bottom: 0.2rem;
    line-height: 1.34;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-options,
  .questionnaire-form[data-questionnaire-form] .questionnaire-options {
    gap: 0.58rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-option,
  .questionnaire-form[data-questionnaire-form] .questionnaire-option {
    gap: 0.6rem;
    min-height: 2.95rem;
    padding: 0.72rem 0.82rem;
    border-radius: 17px;
    background: color-mix(in srgb, var(--field-bg) 78%, var(--surface-1) 22%);
    border-color: color-mix(in srgb, var(--field-border) 82%, transparent);
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-option input,
  .questionnaire-form[data-questionnaire-form] .questionnaire-option input {
    margin-top: 0.18rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-option span,
  .questionnaire-form[data-questionnaire-form] .questionnaire-option span {
    display: block;
    min-width: 0;
    line-height: 1.35;
    text-wrap: pretty;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-field textarea,
  .questionnaire-form[data-questionnaire-form] .questionnaire-field textarea {
    min-height: 6.7rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-actions,
  .questionnaire-form[data-questionnaire-form] .questionnaire-actions {
    gap: 0.62rem;
    margin-top: 0.14rem;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-note,
  .questionnaire-form[data-questionnaire-form] .questionnaire-note {
    margin: 0;
    line-height: 1.5;
  }

  .questionnaire-form[data-help-decide-form] .questionnaire-actions .button--primary,
  .questionnaire-form[data-questionnaire-form] .questionnaire-actions .button--primary {
    width: 100%;
    min-height: 3.4rem;
    border: 1px solid color-mix(in srgb, var(--accent-blue-strong) 62%, var(--accent-blue) 38%);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--accent-blue) 18%, transparent);
  }
}

/* Form page consistency pass */
.questionnaire-page .questionnaire-layout {
  gap: 1.12rem;
  align-items: start;
}

.questionnaire-page .questionnaire-sidebar {
  gap: 0.8rem;
}

.questionnaire-page .questionnaire-sidebar .hero-panel__card {
  gap: 0.56rem;
  padding: 1.04rem 1.06rem 1.08rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-overlay-strong) 96%, transparent),
    color-mix(in srgb, var(--surface-2) 80%, var(--surface-3) 20%)
  );
  box-shadow: 0 10px 22px rgba(22, 52, 58, 0.045);
}

.questionnaire-page .questionnaire-sidebar .hero-panel__card--dark {
  border-color: color-mix(in srgb, var(--accent-blue) 22%, var(--panel-border) 78%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-1) 86%, var(--accent-blue-soft) 14%),
    color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%)
  );
}

.questionnaire-page .questionnaire-back {
  min-height: 2.75rem;
  padding: 0.68rem 0.96rem;
}

.questionnaire-page .questionnaire-shell {
  gap: 1.02rem;
  padding: 1.4rem 1.42rem 1.46rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 86%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-overlay-strong) 96%, transparent),
    color-mix(in srgb, var(--surface-2) 82%, var(--surface-3) 18%)
  );
}

.questionnaire-page .questionnaire-shell .section-heading--wide {
  margin-bottom: 1.08rem;
}

.questionnaire-page .questionnaire-shell .section-heading p:last-child {
  max-width: 62ch;
  line-height: 1.56;
}

.questionnaire-page .questionnaire-form {
  gap: 0.98rem;
}

.questionnaire-page .questionnaire-grid {
  gap: 0.94rem;
}

.questionnaire-page .questionnaire-field,
.questionnaire-page .questionnaire-fieldset {
  gap: 0.46rem;
}

.questionnaire-page .questionnaire-fieldset {
  padding: 0.98rem 1rem 1.02rem;
  border-radius: 22px;
  border-color: color-mix(in srgb, var(--panel-border) 70%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-1) 90%, var(--surface-2) 10%),
    color-mix(in srgb, var(--surface-2) 86%, var(--surface-3) 14%)
  );
}

.questionnaire-page .questionnaire-fieldset legend {
  margin-bottom: 0.16rem;
}

.questionnaire-page .questionnaire-section-intro {
  gap: 0.4rem;
  padding: 1rem 1.02rem 1.04rem;
  border: 1px solid color-mix(in srgb, var(--panel-border) 66%, transparent);
  border-radius: 22px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--surface-3) 70%, var(--surface-2) 30%),
    color-mix(in srgb, var(--surface-1) 90%, var(--surface-2) 10%)
  );
}

.questionnaire-page .questionnaire-field input,
.questionnaire-page .questionnaire-field textarea,
.questionnaire-page .questionnaire-field select {
  min-height: 3rem;
  border-radius: 17px;
}

.questionnaire-page .questionnaire-option {
  gap: 0.62rem;
  min-height: 3rem;
  padding: 0.76rem 0.86rem;
  border-radius: 17px;
  border-color: color-mix(in srgb, var(--field-border) 84%, transparent);
  background: color-mix(in srgb, var(--field-bg) 82%, var(--surface-1) 18%);
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.questionnaire-page .questionnaire-option span {
  display: block;
  min-width: 0;
  line-height: 1.38;
  text-wrap: pretty;
}

.questionnaire-page .questionnaire-option:focus-within {
  border-color: color-mix(in srgb, var(--accent-blue) 42%, var(--field-border) 58%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 11%, transparent);
}

.questionnaire-page .questionnaire-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent-blue) 48%, var(--field-border) 52%);
  background: color-mix(in srgb, var(--surface-1) 84%, var(--accent-blue-soft) 16%);
}

.questionnaire-page .questionnaire-note {
  margin: 0;
  line-height: 1.52;
}

.questionnaire-page .questionnaire-actions {
  gap: 0.68rem;
}

.questionnaire-page .questionnaire-actions .button {
  min-height: 3.3rem;
}

@media (min-width: 980px) {
  .questionnaire-page .questionnaire-shell {
    padding: 1.62rem 1.66rem 1.68rem;
  }
}

@media (max-width: 760px) {
  .questionnaire-page .questionnaire-layout {
    gap: 0.92rem;
  }

  .questionnaire-page .questionnaire-sidebar {
    gap: 0.68rem;
  }

  .questionnaire-page .questionnaire-sidebar .hero-panel__card {
    padding: 0.94rem 0.96rem 0.98rem;
  }

  .questionnaire-page .questionnaire-shell {
    gap: 0.92rem;
    padding: 1.16rem 1.08rem 1.18rem;
  }

  .questionnaire-page .questionnaire-shell .section-heading--wide {
    margin-bottom: 0.96rem;
  }

  .questionnaire-page .questionnaire-shell .section-heading p:last-child {
    max-width: 38ch;
  }

  .questionnaire-page .questionnaire-form {
    gap: 0.9rem;
  }

  .questionnaire-page .questionnaire-grid {
    gap: 0.84rem;
  }

  .questionnaire-page .questionnaire-fieldset {
    gap: 0.46rem;
    padding: 0.86rem 0.9rem 0.9rem;
    border-radius: 20px;
  }

  .questionnaire-page .questionnaire-options {
    gap: 0.56rem;
  }

  .questionnaire-page .questionnaire-option {
    min-height: 2.9rem;
    padding: 0.72rem 0.82rem;
  }

  .questionnaire-page .questionnaire-option input {
    margin-top: 0.16rem;
  }

  .questionnaire-page .questionnaire-field textarea {
    min-height: 6.6rem;
  }

  .questionnaire-page .questionnaire-actions {
    margin-top: 0.12rem;
  }

  .questionnaire-page .questionnaire-actions .button--primary {
    width: 100%;
    min-height: 3.4rem;
  }
}