/* ==========================================================================
   ANNEX FIBER - STATEN ISLAND TARGETED MAILER LANDING PAGE
   Single-page, no frameworks, no external requests.

   Visual rhythm: dark cinematic hero -> light offer/pricing -> light value
   -> light form -> dark footer. The Verrazzano hero is the only large
   photograph on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Dark surfaces - hero overlay and footer only */
  --navy-900: #04060F;
  --navy-850: #070B1A;
  --navy-800: #0A0F24;
  --navy-700: #101735;

  /* Light surfaces - the body of the page */
  --ivory: #F7F4EE;          /* offer / pricing */
  --mist: #F1F1F7;           /* check availability */
  --ivory-soft: #FCFAF6;     /* value band */
  --paper: #FFFFFF;          /* cards, form card */

  /* Ink on light */
  --ink-1: #0B1020;
  --ink-2: #444D64;
  --ink-3: #6E7689;
  --rule: rgba(11, 16, 32, 0.10);
  --rule-soft: rgba(11, 16, 32, 0.06);

  /* Ink on dark */
  --on-dark-1: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, 0.80);
  --on-dark-3: rgba(255, 255, 255, 0.58);
  --line: rgba(255, 255, 255, 0.12);

  /* Brand accents - used sparingly */
  --violet: #8B33F0;
  --violet-bright: #A24BFF;
  --indigo: #6D4BFF;
  --blue: #2F7BFF;
  --magenta: #C42FD8;

  --grad: linear-gradient(100deg, var(--violet-bright) 0%, var(--indigo) 48%, var(--blue) 100%);

  --danger: #C0293C;
  --danger-dark: #FF8A8A;

  --radius: 14px;
  --radius-lg: 22px;

  --wrap: 1820px;
  --gutter: clamp(18px, 3.2vw, 60px);

  --font: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  /* Swap the stack above for the licensed Annex brand typeface when supplied. */

  --card-shadow: 0 1px 2px rgba(11, 16, 32, 0.04), 0 12px 32px rgba(11, 16, 32, 0.07);
  --card-shadow-lift: 0 2px 4px rgba(11, 16, 32, 0.05), 0 22px 54px rgba(11, 16, 32, 0.12);
  --ring: 0 0 0 4px rgba(139, 51, 240, 0.22);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink-1);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Reading-width column, left-aligned so its edge lines up with the hero copy
   and every section heading. */
.form-col { max-width: 780px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink-1);
  padding: 12px 18px;
  font-weight: 700;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: 17px 36px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.btn--primary {
  background: var(--grad);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(109, 75, 255, 0.34);
}
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn--primary:active { transform: translateY(0); }
.btn--primary[disabled] { opacity: 0.62; cursor: progress; transform: none; }
.btn--lg { font-size: 1.02rem; padding: 20px 46px; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(880px, 94vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-dark-1);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* Readability layer only. The hero files already carry the Annex grade, and
   the shadows have been lifted in the exported JPEGs, so this stays light on
   the photograph and concentrates its weight behind the copy. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 6, 15, 0.88) 0%, rgba(5, 8, 22, 0.70) 30%, rgba(6, 9, 26, 0.22) 60%, rgba(6, 9, 26, 0.02) 100%),
    linear-gradient(180deg, rgba(4, 6, 15, 0.30) 0%, rgba(4, 6, 15, 0) 28%, rgba(4, 6, 15, 0) 70%, rgba(4, 6, 15, 0.42) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* Balanced top/bottom so the group sits optically centred in the frame. */
  padding: clamp(56px, 7vh, 96px) var(--gutter);
}

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

.hero__bar { margin-bottom: clamp(30px, 5vh, 54px); }
.logo--hero { width: 268px; height: auto; }

/* The menu button, open stage, script line, CTA arrow, proof icons and scroll
   cue are mobile-only and switched on in the max-width: 640px block. */
.navtoggle,
.navmenu,
.hero__stage,
.scrollcue,
.proof__icon,
.btn__arrow { display: none; }

.eyebrow {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  margin-bottom: 18px;
}

/* One cohesive headline: three stacked lines, tight leading, shared optical
   left edge. Sized to fill the hero with confidence. */
.hero__headline {
  font-size: clamp(3.1rem, 8.4vw, 6.6rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin-left: -0.045em;  /* optical alignment of the cap Y with the copy below */
}
.hl { display: block; }
.hl--1 { color: var(--on-dark-1); }
.hl--2 { color: #B478FF; }
.hl--3 { color: #6FA5FF; }

.hero__subhead {
  margin-top: clamp(20px, 3vh, 30px);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  font-weight: 600;
  color: var(--on-dark-1);
}
.hero__subhead .plus { color: var(--violet-bright); font-weight: 800; }

.hero__reassure {
  margin-top: 12px;
  font-size: clamp(0.9rem, 1.1vw, 1.02rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E9A9F5;
}

.hero .btn { margin-top: clamp(28px, 4vh, 42px); }

/* Proof row - readable, restrained, clearly secondary to the offer */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(34px, 5vh, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 900px;
}
.proof__item {
  position: relative;
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-1);
  padding-right: 26px;
}
.proof__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: linear-gradient(180deg, rgba(162, 75, 255, 0), var(--violet-bright), rgba(47, 123, 255, 0));
}

/* ==========================================================================
   SHARED SECTION SCAFFOLD (light)
   ========================================================================== */
.section { padding: clamp(64px, 8vw, 118px) 0; }

.section__head { margin-bottom: clamp(40px, 5vw, 64px); }

.section__title {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--ink-1);
}
.section__title--sm { font-size: clamp(1.6rem, 2.4vw, 2.25rem); }
.section__title-sub {
  display: block;
  margin-top: 0.22em;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink-2);
}
.section__lede {
  margin-top: 20px;
  color: var(--ink-2);
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  max-width: 60ch;
}
.section__lede strong { color: var(--ink-1); font-weight: 700; }

.section--offer { background: var(--ivory); }
.section--value { background: var(--ivory-soft); border-top: 1px solid var(--rule-soft); }
.section--form  { background: var(--mist); border-top: 1px solid var(--rule-soft); scroll-margin-top: 10px; }

/* ==========================================================================
   2. PRICING
   ========================================================================== */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.6vw, 26px);
  max-width: 1180px;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2vw, 34px) clamp(24px, 2vw, 30px);
  box-shadow: var(--card-shadow);
}
/* Restrained emphasis on the middle plan - a brand-coloured top edge and a
   slightly stronger lift. No "most popular" badge: no such treatment exists in
   the campaign materials, so none is invented here. */
.plan--feature {
  box-shadow: var(--card-shadow-lift);
  border-color: rgba(139, 51, 240, 0.28);
  position: relative;
  overflow: hidden;
}
.plan--feature::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--grad);
}

.plan__speed {
  font-size: clamp(2.1rem, 2.6vw, 2.7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-1);
}
.plan__speed span { font-size: 0.42em; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.plan__name {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
}

.plan__price {
  margin-top: clamp(22px, 2.2vw, 32px);
  font-size: clamp(2.8rem, 3.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-1);
}
.plan__currency { font-size: 0.42em; vertical-align: super; font-weight: 700; }
.plan__cents { font-size: 0.42em; vertical-align: super; font-weight: 700; }
.plan__per { font-size: 0.3em; font-weight: 700; color: var(--ink-3); letter-spacing: 0; }
.plan__term {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--ink-3);
}

/* Internet-only marker closes every card, so the qualifier is the last thing
   read on each price. */
.plan__tag {
  align-self: flex-start;
  margin-top: clamp(20px, 2vw, 28px);
  padding: 7px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(11, 16, 32, 0.045);
  border: 1px solid var(--rule);
  border-radius: 999px;
}

/* ==========================================================================
   BUSINESS PHONE - deliberately separate from the internet prices
   ========================================================================== */
.phone {
  max-width: 1180px;
  margin-top: clamp(34px, 3.4vw, 54px);
  padding: clamp(28px, 2.6vw, 44px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
}
.phone__title {
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-1);
}
.phone__free {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  font-size: 1.05rem;
  color: var(--ink-2);
}
.phone__free strong { color: var(--ink-1); }
.phone__badge {
  flex: none;
  padding: 7px 15px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--grad);
  border-radius: 999px;
}
.phone__after {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.phone__price {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-1);
}
.phone__unit {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.phone__fax {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--ink-3);
}
.phone__fax-label {
  font-weight: 700;
  color: var(--ink-2);
  margin-right: 8px;
}

/* ==========================================================================
   3. VALUE
   ========================================================================== */
.values {
  margin-top: clamp(32px, 3vw, 46px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 26px);
  max-width: 1180px;
}
.value { padding-top: 22px; border-top: 2px solid var(--rule); }
.value:nth-child(1) { border-image: var(--grad) 1; }
.value__title {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-1);
}
.value__body { margin-top: 10px; color: var(--ink-2); font-size: 0.96rem; }

/* ==========================================================================
   4. CHECK AVAILABILITY
   ========================================================================== */
.brandline {
  margin-bottom: 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--violet);
}

.form {
  margin-top: clamp(28px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 2.8vw, 46px);
  display: grid;
  gap: 22px;
  box-shadow: var(--card-shadow);
}
.field { display: grid; gap: 9px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

.field label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.req { color: var(--violet); }
.opt { color: var(--ink-3); font-weight: 500; letter-spacing: 0; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink-1);
  background: #FBFBFD;
  border: 1px solid rgba(11, 16, 32, 0.16);
  border-radius: 12px;
  padding: 16px 17px;      /* comfortable target on touch */
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 46px;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgba(11, 16, 32, 0.28); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--violet);
  box-shadow: var(--ring);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.field__error { font-size: 0.86rem; color: var(--danger); font-weight: 600; }
.field__error:empty { display: none; }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--danger); background: #FFF7F8; }

.form__error-summary { color: var(--danger); font-size: 0.94rem; font-weight: 600; }

.form__consent {
  font-size: 0.82rem;
  color: var(--ink-3);
  line-height: 1.6;
  text-align: center;
}
.form__consent.is-placeholder {
  color: #8A6400;
  background: #FFF8E6;
  border: 1px dashed rgba(160, 120, 0, 0.45);
  border-radius: 10px;
  padding: 11px 15px;
}

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Config warning banner (placeholder mode only) */
.config-warning {
  margin-top: 20px;
  background: #FFF8E6;
  border: 1px dashed rgba(160, 120, 0, 0.5);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: #7A5900;
  font-size: 0.92rem;
  line-height: 1.6;
}
.config-warning strong {
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.ghl-embed iframe { width: 100%; border: 0; min-height: 780px; border-radius: var(--radius-lg); }

/* SUCCESS */
.success {
  margin-top: clamp(28px, 3vw, 40px);
  background: var(--paper);
  border: 1px solid rgba(46, 160, 110, 0.35);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 4vw, 58px) clamp(24px, 3vw, 40px);
  text-align: center;
  box-shadow: var(--card-shadow);
}
.success__mark {
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--grad);
  position: relative;
}
.success__mark::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 15px;
  width: 13px;
  height: 24px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.success__title { font-size: 1.7rem; font-weight: 800; text-transform: uppercase; color: var(--ink-1); }
.success__body { margin-top: 12px; color: var(--ink-2); max-width: 48ch; margin-inline: auto; }

/* ==========================================================================
   5. FOOTER - returns to deep navy and closes the page
   ========================================================================== */
.footer {
  background: var(--navy-900);
  color: var(--on-dark-2);
  padding: clamp(44px, 5vw, 64px) 0 clamp(32px, 4vw, 44px);
}
.footer__inner { display: grid; gap: 22px; justify-items: start; }
.logo--footer { width: 168px; height: auto; }

.footer__contact { display: grid; gap: 6px; font-size: 1rem; }
.footer__contact a { color: var(--on-dark-1); text-decoration: none; }
.footer__contact a:hover { color: #CBA8FF; }
.footer__site a { font-weight: 600; }
.footer__line { color: var(--on-dark-2); }
.footer__sep { margin: 0 10px; color: var(--on-dark-3); }

.footer__legal { font-size: 0.76rem; color: var(--on-dark-3); line-height: 1.6; max-width: 70ch; }
.footer__copy { font-size: 0.76rem; color: var(--on-dark-3); }

/* ==========================================================================
   MOBILE STICKY CTA
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(247, 244, 238, 0), rgba(247, 244, 238, 0.97) 45%);
  transform: translateY(115%);
  transition: transform 0.25s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
@media (min-width: 861px) { .sticky-cta { display: none !important; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Tablet: deliberate 2-up layouts rather than accidental wrapping ------ */
@media (max-width: 1080px) {
  .values { grid-template-columns: repeat(2, 1fr); gap: 26px 24px; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }

  .hero { min-height: auto; }
  .hero__inner { padding: clamp(52px, 8vh, 76px) var(--gutter); }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(4, 6, 15, 0.78) 0%, rgba(6, 9, 26, 0.50) 42%, rgba(4, 6, 15, 0.86) 100%),
      linear-gradient(90deg, rgba(4, 6, 15, 0.42) 0%, rgba(4, 6, 15, 0) 70%);
  }
  .hero__media img { object-position: 50% 45%; }
  .logo--hero { width: 214px; }
  .hero__headline { font-size: clamp(2.9rem, 12vw, 4.6rem); }

  .plans { grid-template-columns: 1fr; max-width: 560px; }
  .plan { padding: 28px 24px 24px; }
  .phone { padding: 26px 22px; }
  .phone__after { flex-direction: column; align-items: flex-start; }

  .form { padding: 24px 20px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .form-col { max-width: none; }
}

/* ==========================================================================
   MOBILE HERO
   A taller, full-bleed composition: copy at the top, the bridge carrying the
   middle of the frame, then the script line, icon proof row and scroll cue.
   ========================================================================== */
@media (max-width: 640px) {

  .hero {
    min-height: 100svh;
    align-items: stretch;
  }
  /* The mobile asset is already art-directed for this slot, so it is used at
     its native framing with cover and no offset. Note the vertical value is
     inert here: the file is taller in proportion than the hero box, so cover
     fills the height exactly and only trims ~18% off the sides. Tuning the Y
     value does nothing - change the image if the framing needs to move. */
  .hero__media img { object-position: 50% 50%; }

  /* Dark at the top for the copy, clear through the middle so the bridge and
     gold roadway read, dark again at the base for the proof row. */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4, 6, 15, 0.92) 0%,
        rgba(5, 8, 22, 0.80) 26%,
        rgba(6, 9, 26, 0.26) 44%,
        rgba(4, 6, 15, 0.10) 58%,
        rgba(4, 6, 15, 0.72) 82%,
        rgba(4, 6, 15, 0.95) 100%);
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    /* Kept tight at the top: every pixel above the CTA is a pixel the bridge
       tower gets back below it. */
    padding: 17px var(--gutter) 22px;
  }

  /* --- top bar: stacked lockup + menu --- */
  .hero__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 13px;
  }
  .brand { display: block; }
  .logo--hero { width: min(47vw, 200px); }

  .navtoggle {
    display: block;
    position: relative;
    flex: none;
    width: 46px;
    height: 40px;
    margin-top: 4px;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .navtoggle__bars,
  .navtoggle__bars::before,
  .navtoggle__bars::after {
    position: absolute;
    left: 8px;
    width: 30px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--on-dark-1);
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .navtoggle__bars { top: 19px; }
  .navtoggle__bars::before { content: ""; top: -9px; left: 0; }
  .navtoggle__bars::after { content: ""; top: 9px; left: 0; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(9px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] .navtoggle__bars::after { transform: translateY(-9px) rotate(-45deg); }

  .navmenu {
    display: grid;
    margin: -10px 0 22px;
    padding: 6px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .navmenu[hidden] { display: none; }
  .navmenu a {
    padding: 15px 2px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--on-dark-1);
  }
  .navmenu a + a { border-top: 1px solid var(--line); }

  /* --- copy --- */
  /* Copy is deliberately compact here: every pixel it gives back is open frame
     for the bridge below it. */
  .hero__copy { flex: none; }
  .eyebrow { font-size: clamp(0.72rem, 3.1vw, 0.86rem); letter-spacing: 0.24em; margin-bottom: 9px; }
  .hero__headline { font-size: clamp(2.5rem, 11.4vw, 3.9rem); line-height: 0.88; }
  .hero__subhead { font-size: clamp(0.98rem, 4.1vw, 1.2rem); margin-top: 11px; }
  .hero__reassure { font-size: clamp(0.76rem, 3.2vw, 0.9rem); letter-spacing: 0.14em; margin-top: 7px; }

  .hero .btn { width: 100%; margin-top: 14px; padding: 16px 30px; }
  .btn--arrow { display: inline-flex; justify-content: center; gap: 14px; }
  .btn__arrow {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* --- open stage: the bridge owns this space --- */
  /* flex-grow absorbs whatever is left over after the fixed blocks, so the
     whole hero lands at one viewport height on a 390x844 phone and simply
     opens up further on taller screens. */
  .hero__stage {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 118px;
    padding: 24px 0 20px;
  }
  /* Approximated with a system script stack. Swap for the real Annex script
     asset (or an SVG of the lettering) for consistent rendering everywhere. */
  .script {
    font-family: "Segoe Script", "Bradley Hand", "Snell Roundhand", "Apple Chancery", cursive;
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    line-height: 1.3;
    text-align: right;
    color: var(--on-dark-1);
    text-shadow: 0 2px 18px rgba(4, 6, 15, 0.75);
    padding-bottom: 12px;
    border-bottom: 2.5px solid transparent;
    border-image: var(--grad) 1;
  }

  /* --- icon proof row --- */
  .proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: none;
    margin-top: 0;
    padding-top: 22px;
  }
  .proof__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 8px;
    text-align: center;
    font-size: clamp(0.66rem, 2.9vw, 0.78rem);
    letter-spacing: 0.08em;
    line-height: 1.35;
  }
  .proof__item:not(:last-child)::after {
    height: 46px;
    background: var(--line);
    right: 0;
  }
  .proof__icon {
    display: block;
    width: 26px;
    height: 26px;
    fill: var(--violet-bright);
  }
  .proof__item:nth-child(2) .proof__icon { fill: #7C6BFF; }
  .proof__item:nth-child(3) .proof__icon { fill: var(--blue); }

  /* --- scroll cue --- */
  .scrollcue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 26px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--on-dark-3);
  }
  .scrollcue svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--violet-bright);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: cue 2.2s ease-in-out infinite;
  }
  @keyframes cue {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(5px); opacity: 1; }
  }

  /* --- rest of the page --- */
  .values { grid-template-columns: 1fr; gap: 24px; }

  /* Room for the sticky CTA so it never covers the footer's last line. */
  .footer { padding-bottom: 96px; }
}

/* ==========================================================================
   PORTRAIT TABLETS (iPad mini / Air held upright, 641-860 wide)
   This range was inheriting the phone treatment: a full-width scrim built for
   a 390px screen, which reads as very heavy across 768px, plus type scaled for
   a phone sitting in a much larger frame.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 860px) and (orientation: portrait) {

  .hero { min-height: min(900px, 86svh); align-items: center; }
  .hero__inner { padding: clamp(44px, 6vh, 72px) var(--gutter); }

  /* Much lighter than the phone scrim: weighted behind the copy at the top
     left, then releasing so the bridge and gold roadway carry the lower half. */
  .hero__scrim {
    background:
      linear-gradient(180deg,
        rgba(4, 6, 15, 0.86) 0%,
        rgba(5, 8, 22, 0.56) 32%,
        rgba(4, 6, 15, 0.12) 56%,
        rgba(4, 6, 15, 0.46) 74%,
        rgba(4, 6, 15, 0.84) 100%),
      linear-gradient(90deg, rgba(4, 6, 15, 0.52) 0%, rgba(4, 6, 15, 0.16) 52%, rgba(4, 6, 15, 0) 100%);
  }
  .hero__media img { object-position: 50% 50%; }

  /* Type scaled for the bigger canvas */
  .logo--hero { width: 256px; }
  .eyebrow { font-size: 0.95rem; letter-spacing: 0.28em; margin-bottom: 14px; }
  .hero__headline { font-size: 9.4vw; line-height: 0.9; }
  .hero__subhead { font-size: 1.5rem; margin-top: 18px; }
  .hero__reassure { font-size: 1.02rem; margin-top: 10px; }
  .hero .btn { width: auto; margin-top: 30px; padding: 19px 44px; font-size: 1.02rem; }

  .proof { gap: 14px 30px; margin-top: 42px; padding-top: 26px; max-width: none; }
  .proof__item { font-size: 0.9rem; padding-right: 30px; }
  .proof__item:not(:last-child)::after { height: 17px; }

  /* Content widths that suit the larger frame */
  .plans { grid-template-columns: 1fr; max-width: 620px; }
  .phone { max-width: 620px; }
  .form-col { max-width: 640px; }
}

/* ==========================================================================
   SHORT PHONES (iPhone SE and similar, 375 x 667)
   The copy block is the same height as on a tall phone but there are ~180
   fewer pixels to put it in, which pushed the CTA down onto the bridge tower.
   Everything above the CTA is tightened so the CTA clears the tower, and the
   blocks below are trimmed so the whole hero still fits one screen.
   ========================================================================== */
@media (max-width: 640px) and (max-height: 720px) {

  .hero__inner { padding: 11px var(--gutter) 13px; }

  .hero__bar { margin-bottom: 8px; }
  .logo--hero { width: min(40vw, 150px); }
  .navtoggle { width: 42px; height: 34px; margin-top: 0; }
  .navtoggle__bars { top: 16px; }
  .navtoggle__bars,
  .navtoggle__bars::before,
  .navtoggle__bars::after { width: 26px; left: 8px; }
  .navtoggle__bars::before { top: -8px; }
  .navtoggle__bars::after { top: 8px; }

  .eyebrow { font-size: 0.68rem; letter-spacing: 0.2em; margin-bottom: 5px; }
  .hero__headline { font-size: 8.6vw; line-height: 0.88; }
  .hero__subhead { font-size: 0.88rem; margin-top: 6px; }
  .hero__reassure { font-size: 0.68rem; margin-top: 4px; letter-spacing: 0.12em; }

  .hero .btn { margin-top: 7px; padding: 12px 24px; font-size: 0.88rem; }
  .btn__arrow { width: 19px; height: 19px; }

  .hero__stage { min-height: 96px; padding: 14px 0 12px; }
  .script { font-size: 1.05rem; line-height: 1.25; padding-bottom: 9px; }

  .proof { padding-top: 13px; }
  .proof__item { gap: 6px; font-size: 0.6rem; letter-spacing: 0.05em; padding: 0 5px; }
  .proof__icon { width: 21px; height: 21px; }
  .proof__item:not(:last-child)::after { height: 36px; }

  .scrollcue { margin-top: 12px; font-size: 0.62rem; letter-spacing: 0.18em; }
  .scrollcue svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   "A BETTER WAY TO SWITCH" SECTION
   Self-contained and additive. Every rule below is namespaced to
   .section--switch / .switch__*, including its own media queries, so nothing
   here can affect the hero, the pricing section or any shared component.
   ========================================================================== */
.section--switch {
  /* A half step deeper than the pricing ivory, so the band reads as its own
     moment without introducing a new colour family. */
  background: #F2EEE7;
  /* This section now sits directly under the dark hero, so the hairline moves
     to the bottom edge, where it separates this ivory from the slightly
     lighter pricing ivory below. */
  border-bottom: 1px solid var(--rule-soft);
}

.switch__eyebrow {
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--violet);
}

.switch__statement {
  margin-top: 26px;
  padding-left: 18px;
  border-left: 3px solid transparent;
  border-image: var(--grad) 1;
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink-1);
  max-width: 46ch;
}

.switch__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.6vw, 26px);
  max-width: 1180px;
}

.switch__card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2vw, 34px) clamp(22px, 1.8vw, 30px);
  box-shadow: var(--card-shadow);
}
.switch__card-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--ink-1);
}
.switch__mark { color: var(--violet); }
.switch__card-body {
  margin-top: 12px;
  font-size: 0.96rem;
  color: var(--ink-2);
}

.switch__disclaimer {
  margin-top: clamp(24px, 2.4vw, 34px);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 88ch;
}

/* Portrait tablets: single column, matched to the 620px cap the pricing cards
   and form use at this width. */
@media (max-width: 860px) {
  .switch__grid { grid-template-columns: 1fr; max-width: 620px; }
  .switch__card { padding: 24px 22px; }
}

/* Phones: compact stacked cards. */
@media (max-width: 640px) {
  .switch__grid { max-width: none; gap: 14px; }
  .switch__card { padding: 22px 20px; border-radius: var(--radius); }
  .switch__card-title { font-size: 0.9rem; }
  .switch__card-body { font-size: 0.94rem; margin-top: 10px; }
  .switch__statement { margin-top: 22px; padding-left: 14px; }
  .switch__eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; }
}