/* ==========================================================================
   CacheGenie - Main Stylesheet
   Sections: Tokens → Reset → Button → Navbar → Hero → Features →
             Network → Pricing → Support → CTA → Contact → Footer → Responsive
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --color-navy: #1a1c34;
  --color-indigo: #21234c;
  --color-purple: #464b9f;

  /* Text */
  --color-text: #5f618b;
  --color-text-dark: #1e2a3a;
  --color-text-mid: #4a5568;
  --color-text-light: #718096;
  --color-white: #ffffff;

  /* Backgrounds */
  --color-light-bg: #f1f3f6;
  --color-section-bg: #e0e0ef;
  --color-footer-bg: #1a1c34;                      /* the footer is navy, the chrome, since 27 September 2026 */
  --color-footer-ink: rgba(255, 255, 255, 0.78);   /* its prose and links (10.7:1 on the navy) */
  --color-footer-muted: rgba(255, 255, 255, 0.62); /* its labels and the copyright row (7.3:1) */
  --color-footer-line: rgba(255, 255, 255, 0.16);  /* its hairlines */

  /* Brand Gradient */
  --color-gradient-start: #6ccbdd;
  --color-gradient-end: #9992c5;
  --gradient-brand: linear-gradient(90deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);

  /* The sales form and the two cards (pricing, contact) */
  --color-border: #d9dbe8;
  --color-error: #b42318;
  --shadow-card: 0 24px 60px rgba(26, 28, 52, 0.18);

  /* Layout */
  --font-body: 'Maven Pro', sans-serif;
  --section-spacing: 80px;
  --container-max: 1280px;
  --content-max: 1080px;
  --gutter: 40px;
  --radius: 6px;
  --radius-lg: 20px;
  --navbar-height: 115px;
}

/* ---------- Base / Reset ---------- */
* {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-padding-top: var(--navbar-height);
  overflow-x: hidden;
}
/* The navbar is 92px below 768px, measured at every width on 25 September 2026. A link arriving from another page
   with #S_CONTACT (the NOC login page's "Talk to sales") is placed by this padding and not by the page's own scroll
   script, and with the desktop's 115px it landed 23px low with a strip of the section above showing. */
@media (max-width: 767px) {
  :root { --navbar-height: 92px; }
}

/* Bootstrap's reboot sets scroll-behavior: smooth on :root, and a smooth scroll restarted on every frame by the
   page's own animation (footer.php) never gets anywhere: no nav link or "Talk to sales" button moved the page in
   Chrome until 17 September 2026. The page animates its own scrolling, so the browser's must be instant. */
:root {
  scroll-behavior: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
}

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

/* Invisible bot shield honeypot (BOT_SHIELD_FIELDS() in the sales form): out of sight and out of the tab order,
   the NOC's own rule */
.bs_hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Shared Button ---------- */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: none;
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
  background: var(--gradient-brand);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: var(--color-indigo);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.2));
}

/* ---------- Navbar ---------- */
.navbar {
  padding: 10px 0;
  background-color: transparent;
  transition: background-color 0.3s ease;
  z-index: 999;
}

.navbar--scrolled {
  position: fixed !important;
  top: 0;
  width: 100%;
  transition: background-color 0.3s ease !important;
  z-index: 1000;
  background-color: var(--color-white) !important;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

.collapsing {
  transition-duration: 0.5s !important;
}

.navbar .container-fluid {
  padding: 0 var(--gutter);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.navbar-brand {
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.nav-logo {
  height: 95px;
}

.navbar-nav {
  gap: 24px;
  padding-left: 40px;
  --bs-nav-link-padding-y: 0.2rem;
  font-size: 20px;
  font-weight: normal;
  text-align: left;
  color: var(--color-indigo);
}

.nav-link,
.nav-link:visited,
.nav-link:hover,
.nav-link:active {
  padding: 0;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.75;
}

.navbar--scrolled .nav-link,
.navbar--scrolled .nav-link:visited,
.navbar--scrolled .nav-link:hover,
.navbar--scrolled .nav-link:active {
  color: var(--color-indigo);
}

.nav-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  font-size: 20px;
  font-weight: normal;
  text-align: center;
  color: var(--color-white);
  padding: 0 40px 0 0;
  text-decoration: none;
  cursor: pointer;
}

.navbar--scrolled .nav-login {
  color: var(--color-indigo);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.16));
  border: none;
  background: var(--gradient-brand);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  color: var(--color-indigo);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 20px;
}

/* The menu button: three rounded bars that turn into a cross while the menu is open (Bootstrap keeps aria-expanded
   on the button in step with the collapse). White on the hero, indigo once the navbar is white; a soft rounded box on hover
   and a visible ring on keyboard focus; 48px tap target. nav.navbar beats Bootstrap's own .navbar-toggler rules. */
nav.navbar .navbar-toggler {
  /* no display here: Bootstrap's .navbar-expand-lg hides the button from 992px, and a display set at this
     specificity would win over that and show it beside the logo on desktop (it did, 17 September 2026) */
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius); /* the site's corner, as on its buttons: no circles */
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 992px) {
  nav.navbar .navbar-toggler {
    display: none;
  }
}

nav.navbar .navbar-toggler:hover {
  background: rgba(255, 255, 255, 0.14);
}

nav.navbar .navbar-toggler:focus {
  box-shadow: none;
}

nav.navbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--color-gradient-start);
  outline-offset: 2px;
}

nav.navbar--scrolled .navbar-toggler {
  color: var(--color-indigo);
}

nav.navbar--scrolled .navbar-toggler:hover {
  background: rgba(70, 75, 159, 0.1);
}

.nav-burger {
  position: relative;
  display: block;
  width: 24px;
  height: 18px;
  margin: 15px auto; /* centred in the 48px button without a flex display on the button itself */
}

.nav-burger span {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.nav-burger span:nth-child(1) { top: 0; }
.nav-burger span:nth-child(2) { top: 7.75px; }
.nav-burger span:nth-child(3) { top: 15.5px; }

.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(1) {
  top: 7.75px;
  transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.navbar-toggler[aria-expanded="true"] .nav-burger span:nth-child(3) {
  top: 7.75px;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-burger span {
    transition: none;
  }
}

.me-auto {
  margin-right: auto !important;
}

/* ---------- Hero ---------- */
.hero {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom left;
  width: 100%;
  min-height: 100svh;
  height: auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--container-max);
  padding: var(--section-spacing) var(--gutter) 0;
  margin: 0 auto;
}

.hero-title {
  line-height: 1.1;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900;
  text-align: left;
  color: var(--color-white);
}

.hero-text {
  padding-top: 20px;
  margin-bottom: 20px;
  max-width: 540px;
  width: 100%;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: 300;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: left;
  color: var(--color-white);
}

.hero-cta {
  margin-top: 0;
}

/* ---------- Features ---------- */
.features {
  margin: 0 auto;
  width: 100%;
  max-width: var(--content-max);
  padding: var(--section-spacing) var(--gutter) 0;
}

.features-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.features-media {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.features-img {
  max-width: 436px;
  width: 100%;
  height: auto;
}

.features-label {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  text-align: left;
  color: var(--color-purple);
}

.features-title {
  margin-bottom: 7px;
  margin-top: 2px;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  color: var(--color-indigo);
}

.features-desc {
  max-width: 524px;
  width: 100%;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 300;
  text-align: left;
  color: var(--color-text);
}

.feature-row {
  display: flex;
  margin-top: 30px;
}

.feature-icon {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.feature-img {
  max-width: 104px;
  width: 100%;
  height: auto;
}

.feature-content {
  padding-left: 20px;
}

.feature-title {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 5px;
  font-weight: 500;
  text-align: left;
  color: var(--color-purple);
}

.feature-desc {
  max-width: 330px;
  width: 100%;
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 300;
  text-align: left;
  color: var(--color-text);
}

/* The feature index (27 September 2026): the features a buyer shortlists on, four columns under a hairline, one
   column per group. A group's name wears the footer's short purple rule; each feature is a title and one line, a
   step smaller than the two drawn features above so twelve of them read as an index and not as prose. No boxes,
   no icons and no numbering: the groups are categories rather than a sequence. Body weight is 400: Maven Pro ships
   nothing lighter, so the 300 written elsewhere on this page renders as 400 anyway. */
.features-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  margin-top: 72px;
  padding-top: 44px;
  border-top: 1px solid var(--color-border);
}

.fgroup {
  min-width: 0;
}

.fgroup-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-indigo);
}

.fgroup-title::after {
  content: '';
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 10px;
  background: var(--color-purple);
}

.fgroup-list {
  display: grid;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.features-item .feature-title {
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.features-item .feature-desc {
  max-width: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/* ---------- Network ---------- */
.network {
  padding-bottom: var(--section-spacing);
  margin-top: var(--section-spacing);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
  height: 100%;
  background-color: var(--color-section-bg);
}

.network-title {
  padding-top: var(--section-spacing);
  line-height: 1;
  font-size: 36px;
  font-weight: 900;
  text-align: center;
  color: var(--color-indigo);
}

.network-text {
  font-size: 18px;
  margin-top: 5px;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 40px;
}

.network-map {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}

.network-map-img {
  width: 100%;
  height: auto;
  display: block;
}

.network-pin-wrap {
  position: absolute;
  transform: translate(-50%, -100%);
}

.network-pin-wrap:hover {
  z-index: 20;
}

.network-pin-wrap:hover .network-tooltip {
  display: block;
}

.network-pin {
  display: block; /* inline, the wrapper gained a line box's descender under the image and the tip sat 4px north of its point */
  cursor: pointer;
  width: 20px;
  height: auto;
  z-index: 5;
}

.network-tooltip {
  display: none;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: 10px 15px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  z-index: 10;
}

.network-tooltip::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--color-navy);
  z-index: 10;
}

.network-key {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-navy);
  padding: 16px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(26, 28, 52, 0.35);
}

.network-key-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.network-key-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.network-key-dot--live {
  background: linear-gradient(135deg, #A7A5E8, #6F6CC2);
}

.network-key-dot--live::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(139, 135, 214, 0.35);
  animation: key-pulse 2s ease-in-out infinite;
}

.network-key-dot--planned {
  background: linear-gradient(135deg, #7FC3D9, #4FA3C1);
  opacity: 0.7;
}

@keyframes key-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .network-key-dot--live::after {
    animation: none;
  }
}

.network-key-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

/* ---------- Pricing ---------- */
.pricing {
  padding-top: var(--section-spacing);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.pricing-title {
  font-size: 36px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: var(--color-indigo);
}

.pricing-text {
  margin: 5px 0 0;
  font-size: 18px;
  text-align: center;
  color: var(--color-text);
}

/* One split panel: the rate on navy, what it includes on the light grey */
.pricing-panel {
  display: grid;
  grid-template-columns: 2fr 3fr;
  max-width: 960px;
  margin: 48px auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.pricing-rate {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 56px 48px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
}

.pricing-amount {
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.pricing-unit {
  font-size: 24px;
  font-weight: 500;
}

.pricing-price-note {
  margin: 12px 0 28px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.pricing-minimum {
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.pricing-minimum b {
  font-weight: 700;
  color: var(--color-white);
}

.pricing-rate .btn-gradient {
  margin-top: 32px;
  font-size: 20px;
}

.pricing-details {
  background: var(--color-light-bg);
  padding: 56px 48px;
}

.pricing-list-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-indigo);
  margin-bottom: 16px;
}

.pricing-list + .pricing-list-title {
  margin-top: 36px;
}

.pricing-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pricing-list li + li {
  margin-top: 8px;
}

.pricing-tick {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--color-purple);
}

.pricing-list-text {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

/* ---------- Support ---------- */
.support {
  margin-top: var(--section-spacing);
  background: var(--color-light-bg);
  padding: var(--section-spacing) 0;
}

.support-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--gutter);
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.support-label {
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-purple);
}

.support-title {
  font-size: 35px;
  font-weight: 500;
  line-height: 40px;
  color: var(--color-indigo);
}

.support-desc {
  padding-top: 30px;
  max-width: 530px;
  width: 100%;
  font-size: 18px;
  font-weight: 300;
  text-align: left;
  color: var(--color-text);
}

.support-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  margin-bottom: -6px;
}

.support-link--spaced {
  margin-top: 30px;
}

.support-link-icon {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.support-link-img {
  display: block;
  width: 100%;
  height: auto;
}

.support-link-text {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 300;
  padding-bottom: 6px;
  padding-left: 6px;
  transition: color 0.2s ease;
}

.support-link:hover .support-link-text {
  color: var(--color-indigo);
}

/* ---------- CTA Banner ---------- */
.cta-section {
  width: 100%;
  background-color: var(--color-navy);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
}

/* The bottom 200px of the band sit behind the sales card below (.contact pulls it up by 140px) */
.cta-inner {
  padding: var(--section-spacing) var(--gutter) 200px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cta-title {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: var(--color-white);
}

.cta-text {
  max-width: 600px;
  width: 100%;
  margin-top: 20px;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: var(--color-white);
}

/* ---------- Sales contact ---------- */
.contact {
  margin-top: -140px;
  padding: 0 var(--gutter) var(--section-spacing);
}

.contact-inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
  padding: 56px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Grid children default to min-width auto, which lets a long word push the card wider than its column */
.contact-intro,
.contact-form-wrap {
  min-width: 0;
}

.contact-heading {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-indigo);
  margin-bottom: 24px;
}

/* What happens next: a real sequence, so it is numbered */
.contact-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.contact-steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-text);
}

.contact-steps li + li {
  margin-top: 18px;
}

.contact-steps li::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: #eef0fa;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-purple);
}

.contact-step-title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-indigo);
}

.contact-mascot {
  display: block;
  height: 190px;
  width: auto;
  margin-top: 24px;
}

.form-field {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-indigo);
}

.form-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-text-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder {
  color: var(--color-text-light);
  opacity: 1;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(70, 75, 159, 0.18);
}

.form-textarea {
  min-height: 150px;
  resize: vertical;
}

.form-input--error {
  border-color: var(--color-error);
}

.form-input--error:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.15);
}

.form-error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-error);
}

.form-error:empty {
  display: none;
}

.form-submit {
  width: 100%;
  font-size: 20px;
}

.form-submit:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.form-alt {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  color: var(--color-text);
}

.form-alt a {
  font-weight: 500;
  color: var(--color-purple);
}

.form-banner {
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #fdf1f0;
  font-size: 15px;
  line-height: 1.4;
  color: #8a2a1f;
}

.form-banner a {
  font-weight: 500;
  text-decoration: underline;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 40px 0;
  text-align: center;
}

.form-success[hidden] {
  display: none;
}

.form-success:focus {
  outline: none;
}

.form-success svg {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: var(--color-gradient-start);
}

.form-success p {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  color: var(--color-text);
}

.form-success b {
  font-weight: 500;
  color: var(--color-indigo);
}

/* ---------- Footer ---------- */
/* Navy, the site's chrome, closing the page the way the hero opens it (27 September 2026, the third layout: the
   owner found a sentence beside a one-column table on a pale band "messy in one way and empty in other areas", and
   the registrations two by two across it "silly as they're so far apart"). Three parts on one ground: the brand
   and the three link columns; the registrations a UK company owes on its website as one strip of cells between
   two hairlines, each a label over its value with a hairline between neighbours, so the facts sit together and the
   registered office, one line joined with commas as the invoice footer prints it, takes the width that is left;
   then the copyright row. The one colour is the brand gradient, as the short rule under each column title, where
   the purple rule the page draws on white would not read on navy. */
.footer {
  width: 100%;
  background: var(--color-footer-bg);
  color: var(--color-footer-ink);
}

.footer-inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 64px var(--gutter) 40px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-brand {
  flex: 0 1 400px;
  min-width: 0;
}

.footer-logo-link {
  display: inline-block;
}

.footer-logo {
  display: block;
  width: 226px;
  height: auto;
}

/* The sentence under the logo, balanced so it breaks at its comma rather than leaving "a" at the end of a line */
.footer-statement {
  margin: 20px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}

.footer-statement a {
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-white);
  transition: color 0.2s ease;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 60px;
}

.footer-col {
  min-width: 0;
}

/* The site's heading mark, the 38 x 3 rule, in the gradient here because purple does not read on navy */
.footer-col-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-white);
}

.footer-col-title::after {
  content: '';
  display: block;
  width: 38px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

.footer-links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.footer-links li + li {
  margin-top: 6px;
}

/* Weight 400 written as 400: Maven Pro ships nothing lighter, so the 300 the old footer asked for rendered as this */
.footer-links a {
  display: inline-block;
  padding: 2px 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-footer-ink);
  transition: color 0.2s ease;
}

/* Hover is the gradient's cyan, the interactive colour on the navy hero too */
.footer-links a:hover,
.footer-statement a:hover,
.footer-copyright a:hover,
.footer-legal-links a:hover {
  color: var(--color-gradient-start);
}

.footer a:focus-visible {
  outline: 2px solid var(--color-gradient-start);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Footer facts ---------- */
/* One strip: the cells sit against each other with a hairline between, the three numbers as wide as their
   contents and the office taking the rest, so nothing floats apart and the row ends at the content's edge */
.footer-facts {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--color-footer-line);
  border-bottom: 1px solid var(--color-footer-line);
}

.footer-fact {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 40px;
}

.footer-fact:first-child {
  padding-left: 0;
}

.footer-fact:last-child {
  padding-right: 0;
}

.footer-fact + .footer-fact {
  border-left: 1px solid var(--color-footer-line);
}

.footer-fact--office {
  flex: 1 1 0;
}

.footer-fact dt {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-footer-muted);
}

.footer-fact dd {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

/* One line of commas, and when it has to break, lines of about the same length rather than one and a stub */
.footer-fact address {
  margin: 0;
  font-style: normal;
  line-height: inherit;
  text-wrap: balance;
}

.footer-office-part {
  white-space: nowrap;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 32px;
  padding-top: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-footer-muted);
}

.footer-copyright {
  margin: 0;
}

/* The company's name in the copyright line is a link to pikaedge.com, a step brighter than the line around it */
.footer-copyright a {
  color: var(--color-footer-ink);
  transition: color 0.2s ease;
}

.footer-legal-links {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 5px of padding makes the target 31px tall; the margin gives it back, so the line box stays the text's own height */
.footer-legal-links a {
  display: inline-block;
  padding: 5px 0;
  margin: -5px 0;
  color: inherit;
  transition: color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .footer a {
    transition: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1400px) {
  .hero { min-height: 1000px; }
}

@media (min-width: 1200px) {
  .navbar-nav {
    gap: 40px;
    padding-left: 80px;
  }
}

/* Four columns need the full content width; between the tablet and 1200px the index runs two across */
@media (min-width: 992px) and (max-width: 1199px) {
  .features-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The brand column and the three link columns need the full 1200px in one row (measured: at 1024px the Support
   column wrapped under Company); below it the brand sits above the columns, which stay in one row down to about
   600px and wrap below that */
@media (max-width: 1199px) {
  .footer-inner {
    padding: 56px var(--gutter) 36px;
  }

  .footer-top {
    flex-direction: column;
    gap: 44px;
    padding-bottom: 48px;
  }

  .footer-brand {
    flex: 0 0 auto;
  }

  .footer-nav {
    gap: 32px 48px;
  }
}

@media (min-width: 992px) {
  .hero { min-height: 850px; }
}

/* A portrait tablet is 1024px tall, and a hero the full height of it put the centred block at the top, the lamp at
   the bottom and 300px of empty navy between them (measured at 768x1024, 27 September 2026). Capped at 760px the
   wave and the lamp come up under the button and the features section shows below the fold; a shorter viewport
   keeps its own height, so nothing on a landscape tablet changes */
@media (min-width: 576px) and (max-width: 991px) {
  .hero { min-height: min(100svh, 760px); }
}

/* ----- Tablet ----- */
@media (max-width: 991px) {
  .navbar .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }

  .navbar-collapse {
    background-color: var(--color-white) !important;
    width: 100%;
    z-index: 1001;
    position: absolute;
    top: 115px;
    right: 0;
    left: 0;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  }

  .nav-link,
  .nav-link:visited,
  .nav-link:hover,
  .nav-link:active {
    color: var(--color-indigo);
  }

  .nav-login {
    color: var(--color-indigo);
  }

  .navbar-nav {
    padding-left: 0;
    text-align: center;
    gap: 20px;
  }

  .nav-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin-top: 40px;
    padding-left: 0;
    padding-top: 0;
  }

  .nav-cta-wrap {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    text-align: center;
    margin-right: 0;
    margin-bottom: 40px;
  }

  .me-auto {
    padding-top: 40px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
  }

  .nav-login {
    padding-top: 10px;
    padding-left: 0;
    padding-right: 0;
  }

  /* Below 992px the hero background is cropped to its left edge (cover, anchored bottom left), so the globe
     artwork that balances a left-aligned block on a desktop is out of frame: the block is centred instead, on a
     tablet as on a phone (27 September 2026, a left-aligned column beside an empty field at 768px) */
  .hero-content {
    padding-top: 40px;
    justify-content: center;
    align-items: center;
  }

  .hero-title,
  .hero-text {
    text-align: center;
  }

  .features-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .features-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
  }

  .network {
    padding-left: 20px;
    padding-right: 20px;
  }

  .network-pin {
    width: 16px;
  }

  .network-key {
    bottom: 10px;
    left: 10px;
    padding: 12px 16px;
    gap: 10px;
  }

  .support-inner {
    flex-direction: column;
  }

  .support-body {
    text-align: center;
  }

  .support-title {
    text-align: center;
  }

  .support-desc {
    padding-top: 20px;
    text-align: center;
    width: auto;
  }

  .support-contacts {
    padding-top: 40px;
  }

  /* The facts two a row: a hairline between the two of a row, and one across between the rows */
  .footer-facts {
    flex-wrap: wrap;
    padding: 24px 0;
  }

  .footer-fact {
    flex: 0 0 50%;
    padding: 0 32px;
  }

  .footer-fact--office {
    flex: 1 1 50%;
  }

  .footer-fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .footer-fact:nth-child(even) {
    padding-right: 0;
  }

  .footer-fact:nth-child(-n + 2) {
    padding-bottom: 20px;
  }

  .footer-fact:nth-child(n + 3) {
    padding-top: 20px;
    border-top: 1px solid var(--color-footer-line);
  }

  .pricing-panel {
    grid-template-columns: 1fr 1fr;
  }

  .pricing-rate,
  .pricing-details {
    padding: 44px 36px;
  }

  .contact-card {
    gap: 40px;
    padding: 40px;
  }

  /* The mascot is a desktop flourish: beside narrow, wrapping steps it only leaves a hole under them */
  .contact-mascot {
    display: none;
  }
}

/* ----- Mobile landscape ----- */
@media (max-width: 767px) {
  /* The height sets the 92px navbar; the width follows the SVG's own ratio (300x128), so the mark is never
     squashed: a fixed 180x72 drew it 6% too flat (measured, 27 September 2026) */
  .nav-logo {
    width: auto;
    height: 72px;
  }

  .navbar-collapse {
    top: 92px;
  }

  .network {
    padding-bottom: 40px;
  }

  .network-title {
    padding-top: 40px;
  }

  .network-pin {
    width: 14px;
  }

  .network-key {
    bottom: 8px;
    left: 8px;
    padding: 10px 14px;
    gap: 8px;
    border-radius: 8px;
  }

  .network-key-dot {
    width: 8px;
    height: 8px;
  }

  .network-key-label {
    font-size: 10px;
  }

  .pricing-title {
    font-size: 30px;
  }

  .pricing-text {
    font-size: 16px;
  }

  .pricing-panel {
    grid-template-columns: 1fr;
  }

  .pricing-amount {
    font-size: 64px;
  }

  .pricing-rate,
  .pricing-details {
    padding: 40px 28px;
  }

  .cta-inner {
    padding: 40px var(--gutter) 160px;
  }

  .contact {
    margin-top: -120px;
  }

  .contact-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }

  .cta-text {
    font-size: 18px;
  }

  /* Three columns need about 490px in a row: at 48px gaps the third wrapped under the first between 576 and 599px */
  .footer-nav {
    gap: 32px;
  }

  /* The copyright over the two document links: side by side they wrapped between 576 and 640px anyway */
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* The facts in one column (two a row, the office wrapped into five lines at 600px), a hairline between each pair; :nth-child(n) outranks nothing and follows the tablet
     rules, so it takes every cell back to one shape */
  .footer-facts {
    flex-direction: column;
    padding: 20px 0;
  }

  .footer-fact:nth-child(n) {
    flex: 0 0 auto;
    padding: 14px 0;
    border-left: 0;
    border-top: 0;
  }

  .footer-fact + .footer-fact {
    border-top: 1px solid var(--color-footer-line);
  }

  .footer-fact:first-child {
    padding-top: 0;
  }

  .footer-fact:last-child {
    padding-bottom: 0;
  }
}

/* ----- Mobile portrait ----- */
@media (max-width: 575px) {
  /* Two lines on a phone too: "Ready for anything." needs 31px at 390px wide, so the size follows the viewport */
  .hero-title {
    font-size: clamp(26px, 7.8vw, 36px);
  }

  .features-body {
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .features-title {
    text-align: center;
  }

  .features-desc {
    text-align: center;
  }

  .features-index {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .pricing-amount {
    font-size: 56px;
  }

  .contact-card {
    padding: 28px 20px;
  }

  .contact-heading {
    font-size: 28px;
  }

  .feature-row {
    margin-top: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .feature-icon {
    margin-bottom: 20px;
  }

  .feature-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 0;
  }

  .feature-title {
    text-align: center;
    width: 100%;
  }

  .feature-desc {
    text-align: center;
  }

  .features-index .feature-title,
  .features-index .feature-desc {
    text-align: left;
    max-width: none;
  }

  .network-title {
    font-size: 26px;
  }

  .network-text {
    font-size: 14px;
  }

  .network-pin {
    width: 10px;
  }

  .network-key {
    bottom: 4px;
    left: 4px;
    padding: 8px 10px;
    gap: 6px;
    border-radius: 6px;
  }

  .network-key-dot {
    width: 7px;
    height: 7px;
  }

  .network-key-label {
    font-size: 9px;
  }

  .btn-gradient {
    padding: 8px 16px;
    font-size: 20px;
  }

  .footer-inner {
    padding: 48px var(--gutter) 32px;
  }

  .footer-top {
    gap: 36px;
    padding-bottom: 40px;
  }

  .footer-nav {
    flex-direction: column;
    gap: 32px;
  }
}