/* ==========================================================================
   Universal Website System
   Shared structure for PresGro, SocialGro, LaunchGro and related sites.
   Brand files should provide the --brand-* values loaded after this file.
   ========================================================================== */

:root {
  color-scheme: light;

  --ui-primary: var(--brand-primary, #2563EB);
  --ui-primary-hover: var(--brand-primary-hover, #1D4ED8);
  --ui-primary-soft: var(--brand-primary-soft, #EFF6FF);
  --ui-primary-softer: var(--brand-primary-softer, #F8FBFF);
  --ui-secondary: var(--brand-secondary, #16A34A);
  --ui-secondary-soft: var(--brand-secondary-soft, #F0FDF4);
  --ui-warning: var(--brand-warning, #A16207);
  --ui-warning-soft: var(--brand-warning-soft, #FEFCE8);
  --ui-page: var(--brand-page, #F7FAFC);
  --ui-surface: var(--brand-surface, #FFFFFF);
  --ui-surface-muted: var(--brand-surface-muted, #F8FAFC);
  --ui-surface-soft: var(--brand-surface-soft, #F1F5F9);
  --ui-border: var(--brand-border, #DDE7F0);
  --ui-border-strong: var(--brand-border-strong, #C7D4E3);
  --ui-heading: var(--brand-heading, #111827);
  --ui-text: var(--brand-text, #243244);
  --ui-muted: var(--brand-muted, #65758A);
  --ui-focus-ring: var(--brand-focus-ring, rgba(37, 99, 235, 0.2));

  --ui-font-body: var(--brand-font-body, system-ui, sans-serif);
  --ui-font-heading: var(--brand-font-heading, var(--ui-font-body));

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: var(--brand-radius-sm, 8px);
  --radius-md: var(--brand-radius-md, 10px);
  --radius-lg: var(--brand-radius-lg, 14px);
  --radius-xl: var(--brand-radius-xl, 18px);
  --radius-pill: 999px;

  --shadow-sm: var(--brand-shadow-sm, 0 8px 22px rgba(18, 32, 55, 0.045));
  --shadow-md: var(--brand-shadow-md, 0 16px 42px rgba(18, 32, 55, 0.065));
  --shadow-lg: var(--brand-shadow-lg, 0 24px 70px rgba(18, 32, 55, 0.1));
  --shadow-focus: 0 0 0 4px var(--ui-focus-ring);

  --transition-fast: 160ms ease;
  --transition-base: 220ms ease;
  --container: var(--brand-container, min(1160px, calc(100vw - 2rem)));

  --surface-panel: var(--brand-panel-bg, linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%));
  --surface-panel-soft: var(--brand-panel-bg-soft, linear-gradient(180deg, #FFFFFF 0%, #F6FBF8 100%));

  /* Compatibility aliases used by existing PresGro markup and older rules. */
  --color-primary: var(--ui-primary);
  --color-primary-hover: var(--ui-primary-hover);
  --color-primary-soft: var(--ui-primary-soft);
  --color-primary-softer: var(--ui-primary-softer);
  --color-success: var(--ui-secondary);
  --color-success-soft: var(--ui-secondary-soft);
  --color-warning: var(--ui-warning);
  --color-warning-soft: var(--ui-warning-soft);
  --color-surface: var(--ui-surface);
  --color-surface-muted: var(--ui-surface-muted);
  --color-surface-soft: var(--ui-surface-soft);
  --color-page: var(--ui-page);
  --color-border: var(--ui-border);
  --color-border-strong: var(--ui-border-strong);
  --color-text: var(--ui-heading);
  --color-text-body: var(--ui-text);
  --color-text-muted: var(--ui-muted);
  --color-focus-ring: var(--ui-focus-ring);
  --bg: var(--ui-page);
  --bg-soft: var(--ui-surface-muted);
  --bg-blue: var(--ui-surface-soft);
  --surface: var(--ui-surface);
  --surface-1: var(--ui-surface);
  --surface-2: var(--ui-surface-muted);
  --surface-3: var(--ui-surface-soft);
  --border: var(--ui-border);
  --border-soft: color-mix(in srgb, var(--ui-border) 72%, white 28%);
  --border-medium: color-mix(in srgb, var(--ui-border) 84%, var(--ui-primary) 16%);
  --border-strong: var(--ui-border-strong);
  --panel-border: var(--ui-border);
  --text-strong: var(--ui-heading);
  --text: var(--ui-text);
  --text-muted: var(--ui-muted);
  --text-soft: color-mix(in srgb, var(--ui-muted) 82%, white 18%);
  --accent-blue: var(--ui-primary);
  --accent-blue-soft: var(--brand-accent, var(--ui-primary));
  --accent-blue-strong: var(--ui-primary-hover);
  --accent-green: var(--ui-secondary);
  --accent-green-soft: var(--ui-secondary-soft);
  --panel-radius: var(--radius-lg);
  --panel-radius-lg: var(--radius-xl);
  --button-radius: var(--radius-md);
  --field-radius: var(--radius-md);
  --panel-bg: var(--surface-panel);
  --panel-bg-soft: var(--surface-panel-soft);
  --panel-shadow: var(--shadow-md);
  --panel-shadow-strong: var(--shadow-lg);
  --shadow-card: var(--shadow-md);
  --shadow-soft: var(--shadow-sm);
  --field-border: var(--ui-border-strong);
  --field-border-focus: var(--ui-primary);
  --field-shadow-focus: var(--shadow-focus);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--brand-body-background, var(--ui-page));
  color: var(--ui-text);
  font-family: var(--ui-font-body);
}

:focus-visible {
  outline: 3px solid var(--ui-focus-ring);
  outline-offset: 3px;
}

h1,
h2,
h3,
strong {
  color: var(--ui-heading);
}

h1,
h2,
h3 {
  font-family: var(--ui-font-heading);
}

h1,
h2 {
  letter-spacing: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.18rem, 4vw, 3.48rem);
  line-height: 1.06;
}

h2 {
  font-size: clamp(1.82rem, 3vw, 2.72rem);
  line-height: 1.12;
}

h3 {
  line-height: 1.22;
}

p,
li {
  text-wrap: pretty;
}

.container {
  width: var(--container);
  max-width: var(--container);
}

.section {
  padding: clamp(3.75rem, 6vw, 5.75rem) 0;
}

.section--soft {
  border-block: 1px solid color-mix(in srgb, var(--ui-primary) 9%, transparent);
  background: var(--brand-section-soft-bg, var(--ui-surface-soft));
}

.section-heading {
  gap: var(--space-3);
}

.section-heading__text,
.section-heading--wide p:last-child,
.hero__lead,
.hero-intro__body,
.hero-summary__intro,
.hero-summary__item p {
  color: var(--ui-muted);
}

.eyebrow,
.mini-label,
.package-card__label,
.package-card__badge {
  color: var(--ui-primary);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

.hero__layout,
.two-column,
.package-grid,
.quick-enquiry__grid,
.questionnaire-layout,
.questionnaire-grid {
  min-width: 0;
}

.button {
  min-height: 3.05rem;
  padding: 0.82rem 1.18rem;
  border-radius: var(--button-radius);
  font-weight: 800;
  letter-spacing: 0;
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast);
}

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

.button--primary {
  border-color: var(--brand-button-border, var(--ui-primary));
  background: var(--brand-button-bg, var(--ui-primary));
  color: var(--brand-button-text, #FFFFFF);
  box-shadow: var(--brand-button-shadow, 0 14px 30px color-mix(in srgb, var(--ui-primary) 20%, transparent));
}

.button--primary:hover,
.button--primary:focus-visible {
  border-color: var(--brand-button-border-hover, var(--ui-primary-hover));
  background: var(--brand-button-bg-hover, var(--ui-primary-hover));
  box-shadow: var(--brand-button-shadow-hover, 0 18px 34px color-mix(in srgb, var(--ui-primary) 24%, transparent));
}

.button--secondary,
.button--nav,
.button--ghost {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-primary);
  box-shadow: var(--shadow-sm);
}

.button--secondary:hover,
.button--secondary:focus-visible,
.button--nav:hover,
.button--nav:focus-visible,
.button--ghost:hover,
.button--ghost:focus-visible {
  border-color: var(--ui-primary);
  background: var(--ui-primary-softer);
  color: var(--ui-heading);
}

.hero-intro__link,
.package-guidance__link,
.page-link {
  color: var(--ui-primary);
  font-weight: 800;
}

.panel,
.hero__copy,
.hero-summary,
.support-band__inner,
.service-card,
.package-card,
.comparison-card,
.timeline-card,
.faq-item,
.cta-panel,
.questionnaire-shell,
.brief-section,
.brief-summary,
.page-banner,
.ownership-card,
.example-card,
.quick-enquiry.quick-enquiry--separate,
.site-footer__panel {
  border-color: var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--surface-panel);
  box-shadow: var(--shadow-md);
}

.hero-summary__meta span,
.journey-meta__item,
.package-card__label,
.package-card__badge,
.package-carousel__dot {
  border-radius: var(--radius-pill);
}

.section--cta .cta-panel,
.cta-panel--compact {
  position: relative;
  overflow: hidden;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-color: var(--brand-cta-panel-border, color-mix(in srgb, var(--ui-primary) 26%, var(--ui-border) 74%));
  background: var(--brand-cta-panel-bg, var(--surface-panel));
  color: var(--brand-cta-panel-text, var(--ui-text));
  box-shadow: var(--brand-cta-panel-shadow, var(--shadow-md));
}

.section--cta .cta-panel h2,
.section--cta .cta-panel .eyebrow,
.section--cta .cta-panel p,
.section--cta .cta-final__note,
.cta-panel--compact h2,
.cta-panel--compact .eyebrow,
.cta-panel--compact p,
.cta-panel--compact .cta-final__note {
  color: var(--brand-cta-panel-text, var(--ui-text));
}

.section--cta .cta-panel .eyebrow,
.cta-panel--compact .eyebrow {
  opacity: var(--brand-cta-eyebrow-opacity, 0.78);
}

.section--cta .cta-actions .button--secondary,
.section--cta .cta-actions .button--nav,
.cta-panel--compact .cta-actions .button--secondary,
.cta-panel--compact .cta-actions .button--nav {
  border-color: var(--brand-cta-secondary-border, var(--ui-border-strong));
  background: var(--brand-cta-secondary-bg, var(--ui-surface));
  color: var(--brand-cta-secondary-text, var(--ui-primary));
}

.section--cta .cta-actions .button--secondary:hover,
.section--cta .cta-actions .button--secondary:focus-visible,
.section--cta .cta-actions .button--nav:hover,
.section--cta .cta-actions .button--nav:focus-visible,
.cta-panel--compact .cta-actions .button--secondary:hover,
.cta-panel--compact .cta-actions .button--secondary:focus-visible,
.cta-panel--compact .cta-actions .button--nav:hover,
.cta-panel--compact .cta-actions .button--nav:focus-visible {
  border-color: var(--brand-cta-secondary-border-hover, var(--brand-cta-secondary-border, var(--ui-primary)));
  background: var(--brand-cta-secondary-bg-hover, var(--ui-primary-softer));
  color: var(--brand-cta-secondary-text-hover, var(--ui-heading));
}

.quick-enquiry__field-group,
.questionnaire-field,
.questionnaire-fieldset {
  gap: var(--space-2);
}

.quick-enquiry__label,
.questionnaire-field label,
.questionnaire-fieldset legend {
  color: var(--ui-heading);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
}

.input-control,
.input,
textarea.input,
select.input,
.questionnaire-field input,
.questionnaire-field textarea,
.questionnaire-field select {
  min-height: 3.05rem;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.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(--field-border-focus);
  box-shadow: var(--field-shadow-focus);
  outline: 0;
}

.questionnaire-option {
  border-color: var(--ui-border);
  background: var(--ui-surface);
}

.questionnaire-option:hover,
.questionnaire-option:focus-within {
  border-color: var(--ui-primary);
  background: var(--ui-primary-softer);
}

.questionnaire-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--ui-primary) 72%, var(--ui-secondary) 28%);
  background: var(--brand-selected-bg, var(--ui-primary-softer));
}

.questionnaire-note,
.contact-note,
.quick-enquiry__fallback p {
  color: var(--ui-muted);
}

.site-header {
  border-bottom-color: var(--ui-border);
  background: var(--brand-header-bg, rgba(255, 255, 255, 0.95));
  box-shadow: var(--brand-header-shadow, 0 8px 24px rgba(18, 32, 55, 0.045));
}

.nav__link {
  color: var(--ui-text);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
  color: var(--ui-primary);
}

.nav__cta,
.button--nav {
  min-height: 2.8rem;
  border-radius: var(--button-radius);
  box-shadow: none;
}

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

.site-footer {
  background: var(--ui-surface);
}

.site-footer__panel {
  box-shadow: none;
}

.site-footer__nav a {
  color: var(--ui-text);
}

.hero {
  padding: clamp(1.4rem, 3vw, 2.35rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  background: var(--brand-hero-bg, var(--ui-surface-muted));
}

.hero__layout.hero__inner {
  gap: clamp(1rem, 2.2vw, 1.65rem);
  align-items: stretch;
}

.hero__copy,
.hero-intro {
  min-width: 0;
  padding: clamp(1.35rem, 3vw, 2.45rem);
  border-top: 1px solid var(--ui-border);
  box-shadow: var(--shadow-lg);
}

.hero__copy::before,
.hero-intro::before {
  content: "";
  position: absolute;
  inset: 0.85rem 1.1rem auto 1.1rem;
  width: auto;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent-bar, linear-gradient(90deg, var(--ui-primary), var(--ui-secondary)));
}

.hero-intro__title {
  max-width: 18ch;
  font-size: clamp(2.25rem, 3.95vw, 3.45rem);
}

.hero-demo-proof,
.hero-demo-proof__main,
.hero-demo-proof__stack,
.hero-demo-proof img {
  min-width: 0;
  max-width: 100%;
}

.hero-demo-proof img,
.example-preview-link img {
  border-radius: var(--radius-md);
  box-shadow: 0 12px 30px rgba(18, 32, 55, 0.075);
}

.support-band__inner {
  border-color: color-mix(in srgb, var(--ui-secondary) 24%, var(--ui-border) 76%);
  background: var(--surface-panel-soft);
}

#packages {
  background: var(--brand-packages-bg, var(--ui-surface-soft));
}

#packages .section-heading--wide {
  margin-bottom: var(--space-5);
}

.package-guidance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}

.package-carousel {
  margin-top: 0;
}

.package-grid {
  gap: var(--space-4);
  align-items: stretch;
}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: clamp(1.2rem, 2vw, 1.55rem);
  border: 1px solid var(--ui-border);
  background: var(--surface-panel);
  box-shadow: var(--shadow-md);
}

#packages .package-card--managed,
.package-card--managed {
  border: var(--brand-featured-card-border, 2px solid var(--ui-primary));
  box-shadow: var(--brand-featured-card-shadow, 0 24px 68px color-mix(in srgb, var(--ui-primary) 15%, transparent));
}

#packages .package-card--managed::before,
.package-card--managed::before {
  content: "";
  position: absolute;
  inset: var(--brand-featured-accent-inset, -2px -2px auto -2px);
  width: auto;
  height: var(--brand-featured-accent-height, 5px);
  border-radius: var(--brand-featured-accent-radius, calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0);
  background: var(--brand-accent-bar, linear-gradient(90deg, var(--ui-primary), var(--ui-secondary)));
}

.package-card__label,
.package-card__badge {
  width: fit-content;
  margin: 0;
  padding: 0.36rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ui-primary) 16%, transparent);
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  line-height: 1.2;
}

.package-card__badge {
  border-color: color-mix(in srgb, var(--ui-secondary) 34%, transparent);
  background: var(--ui-secondary-soft);
  color: var(--brand-success-text, var(--ui-heading));
}

.package-card h3 {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  letter-spacing: 0;
}

.package-card__sub {
  margin: -0.25rem 0 0;
  color: var(--ui-muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.package-card__price {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4) 0;
  border-block: 1px solid var(--ui-border);
}

.package-card__price strong,
.price-month {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem;
  color: var(--ui-heading);
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
}

.price-month span {
  color: var(--ui-muted);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.price-setup,
.price-annual {
  width: fit-content;
  color: var(--ui-text);
  font-size: 0.88rem;
  font-weight: 800;
}

.price-setup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.44rem 0.66rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--ui-surface-muted);
}

.price-setup__label {
  color: var(--ui-primary);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-annual {
  color: var(--ui-muted);
  font-weight: 700;
}

.package-card__context {
  margin: 0;
  padding: 0 0 var(--space-2);
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  border-radius: 0;
  background: transparent;
}

.package-card__summary,
.package-card__alt {
  margin: 0;
  color: var(--ui-text);
  line-height: 1.55;
}

.package-card__alt {
  margin-bottom: var(--space-2);
  color: var(--ui-warning);
  font-weight: 800;
}

.package-card--compact .package-list {
  display: grid;
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
  list-style: none;
}

.package-card--compact .package-list li {
  position: relative;
  padding-left: 1.38rem;
  color: var(--ui-text);
  font-size: 0.94rem;
  line-height: 1.45;
}

.package-card--compact .package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: var(--radius-pill);
  background: var(--ui-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-secondary) 13%, transparent);
}

.package-card__cta {
  width: 100%;
  margin-top: auto;
}

.package-card:not(.package-card--managed) .package-card__cta {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-primary);
  box-shadow: var(--shadow-sm);
}

.package-card:not(.package-card--managed) .package-card__cta:hover,
.package-card:not(.package-card--managed) .package-card__cta:focus-visible {
  border-color: var(--ui-primary);
  background: var(--ui-primary-softer);
  color: var(--ui-heading);
}

.package-notes {
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.package-notes__panel,
.package-extras article {
  border-radius: var(--radius-lg);
  background: var(--surface-panel-soft);
  box-shadow: var(--shadow-sm);
}

.package-extras {
  gap: var(--space-3);
}

.faq-item,
.timeline-card {
  box-shadow: var(--shadow-sm);
}

.quick-enquiry.quick-enquiry--separate {
  width: min(860px, 100%);
  padding: clamp(1.2rem, 2.2vw, 1.65rem);
}

.quick-enquiry__intro {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--ui-border);
}

.quick-enquiry__grid {
  gap: var(--space-4);
}

@media (min-width: 980px) {
  .hero__layout.hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.78fr);
  }

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

  .package-card--managed {
    transform: translateY(-0.35rem);
  }
}

@media (min-width: 761px) and (max-width: 979px) {
  .hero__layout.hero__inner,
  .package-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  :root {
    --container: min(100%, calc(100vw - 1.25rem));
  }

  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .container,
  .hero__layout.hero__inner {
    width: calc(100% - 1.25rem);
    max-width: calc(100% - 1.25rem);
    margin-inline: auto;
  }

  .site-header,
  .site-header__inner,
  .header-inner,
  .hero,
  .hero__layout.hero__inner,
  .hero__copy,
  .hero-intro,
  .hero-summary,
  .hero-demo-proof,
  .hero-demo-proof__main,
  .hero-demo-proof__stack,
  .package-section,
  .package-carousel,
  .package-grid,
  .quick-enquiry.quick-enquiry--separate {
    min-width: 0;
    max-width: 100%;
  }

  .primary-nav {
    left: 0.625rem;
    right: 0.625rem;
    max-width: calc(100vw - 1.25rem);
  }

  .hero {
    padding-top: var(--space-4);
  }

  .hero__layout.hero__inner,
  .support-band__inner,
  .service-section .two-column,
  .comparison-section__layout,
  #process .two-column,
  .questionnaire-page .questionnaire-layout,
  .site-footer__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy,
  .hero-intro,
  .hero-summary,
  .support-band__inner,
  .package-card,
  .quick-enquiry.quick-enquiry--separate,
  .questionnaire-shell,
  .cta-panel {
    border-radius: var(--radius-lg);
  }

  .hero__copy,
  .hero-intro {
    padding: var(--space-5);
  }

  .hero-intro__title {
    max-width: 13.5ch;
    font-size: clamp(2rem, 8.8vw, 2.55rem);
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero-intro__body,
  .hero-intro__pill,
  .hero-intro__links,
  .hero-intro__actions {
    width: 100%;
    max-width: 100%;
  }

  .hero-intro__actions,
  .cta-actions,
  .cta-actions--focused {
    flex-direction: column;
    align-items: stretch;
  }

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

  .button,
  .hero-intro__actions .button,
  .cta-actions .button,
  .quick-enquiry__actions .button,
  .questionnaire-page .questionnaire-actions .button,
  .page-link-row .button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-demo-proof {
    display: grid;
    gap: var(--space-3);
  }

  .hero-demo-proof__stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .hero-demo-proof__main img,
  .hero-demo-proof__stack img {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1.45 / 1;
    object-fit: cover;
    object-position: top center;
  }

  .support-points {
    grid-template-columns: 1fr;
    border-left: 0;
    border-top: 1px solid var(--ui-border);
  }

  .package-carousel {
    max-width: 100%;
    margin-inline: 0;
    overflow: visible;
  }

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

  .package-grid {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    overflow: visible;
    padding-inline: 0;
    scroll-snap-type: none;
  }

  .package-card {
    width: 100%;
    scroll-snap-align: unset;
    transform: none;
  }

  .package-card--managed {
    order: -1;
    transform: none;
  }

  .package-card__price strong,
  .price-month {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
  }

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

  .site-footer__panel {
    align-items: start;
  }
}

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

  .container,
  .hero__layout.hero__inner {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }

  .hero__copy,
  .hero-intro,
  .hero-summary,
  .quick-enquiry.quick-enquiry--separate,
  .questionnaire-shell {
    padding: var(--space-4);
  }

  .brand__logo {
    max-width: min(8.25rem, 48vw);
  }

  .menu-toggle {
    padding-inline: 0.72rem;
  }

  .package-card {
    padding: var(--space-4);
  }

  .hero-intro__title {
    max-width: 12.75ch;
    font-size: clamp(1.9rem, 8.4vw, 2.26rem);
  }
}

@media (max-width: 340px) {
  .hero-intro__title {
    font-size: 1.92rem;
  }

  .button {
    padding-inline: 0.85rem;
  }
}