/* Helicon Defense — /connect/ Fed Supernova 2026 landing layer
 * Loaded after styles.css, site-v5.css and correction.css. Additive only:
 * no brand token, colour, type scale, or existing class is redefined.
 * Mobile-first; every interactive target is at least 44px tall.
 */

.connect-hero {
  background: var(--navy);
  color: var(--text-on-dark);
  padding: clamp(26px, 6vw, 56px) 0 clamp(30px, 6vw, 60px);
}
.connect-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--gold);
  border-radius: 2px;
  padding: 6px 10px;
  margin-bottom: 18px;
}
.connect-wordmark {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.connect-hero .h1 {
  font-size: clamp(1.6rem, 6.4vw, 2.6rem);
  line-height: 1.16;
  color: #fff;
  margin: 0 0 16px;
  max-width: 22em;
}
.connect-hero p { color: var(--text-on-dark-dim); }
.connect-hero .connect-lede {
  font-size: clamp(0.98rem, 3.4vw, 1.06rem);
  line-height: 1.6;
  max-width: 40em;
  margin: 0 0 18px;
}
.connect-hero .connect-met {
  color: var(--cream);
  font-weight: 600;
  margin: 0 0 20px;
}
.connect-cta-sub {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-on-dark-dim);
  margin: 12px 0 0;
  max-width: 34em;
}

/* Buttons: 48px minimum, full width on small screens */
.connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border: 1px solid #B04A08;
  border-radius: var(--radius);
  background: #B04A08;
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  max-width: 26rem;
}
.connect-btn:hover { background: #A53D07; border-color: #A53D07; color: #fff; }
.connect-btn--ghost {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.connect-btn--ghost:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.connect-btn--quiet {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange-d);
}
.connect-btn--quiet:hover { background: #B04A08; color: #fff; border-color: #B04A08; }
@media (min-width: 640px) { .connect-btn { width: auto; } }

/* --------------------------------------------------------- option groups */
.connect-fieldset {
  border: 0;
  margin: 0 0 26px;
  padding: 0;
  min-width: 0;
}
.connect-fieldset > legend {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-d);
  padding: 0;
  margin-bottom: 4px;
}
.connect-fieldset .field-help { margin: 0 0 12px; }

.connect-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 700px) { .connect-options { grid-template-columns: 1fr 1fr; } }

.connect-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.97rem;
  line-height: 1.35;
  color: var(--ink);
  /* the .field label rule would otherwise force mono uppercase here */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}
.connect-option input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #B04A08;
}
.connect-option:hover { border-color: var(--orange); }
.connect-option:focus-within { outline: 3px solid #B04A08; outline-offset: 2px; }
.connect-option input:checked + span { font-weight: 700; color: var(--navy); }
.connect-option:has(input:checked) {
  border-color: #B04A08;
  box-shadow: inset 3px 0 0 #B04A08;
  background: #FFF8F2;
}

/* ------------------------------------------------------------ form shell */
.connect-form-wrap { padding: clamp(20px, 4vw, 34px); }
.connect-form-wrap .field label { line-height: 1.4; }
.connect-form-wrap .field input,
.connect-form-wrap .field textarea,
.connect-form-wrap .field select {
  min-height: 48px;
  font-size: 16px;               /* 16px prevents iOS zoom-on-focus */
}
.connect-form-wrap .field textarea { min-height: 116px; }
.connect-optional {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--slate);
  margin-left: 6px;
}
/* Honeypot: removed from sight, from the tab order and from assistive tech.
   Zero size keeps it out of the accessibility tree and out of layout while
   still being submitted by naive bots. */
.connect-hp {
  position: absolute;
  left: -9999px;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  border: 0;
  pointer-events: none;
}
.connect-hp input,
.connect-hp label {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}
.connect-disclosure {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--line);
  background: var(--surface-2);
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.55;
}
.connect-event-note {
  margin: 18px 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ------------------------------------------------------ business card box */
.connect-card-box {
  margin-top: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(20px, 4vw, 30px);
}
.connect-card-box .h3 { margin: 0 0 6px; }
.connect-camera {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font-size: 16px;
  background: var(--surface);
  border: 1px dashed var(--orange);
  border-radius: var(--radius);
}
.connect-file-note {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--slate);
  min-height: 1.2em;
}

/* ----------------------------------------------------------- success state */
.connect-success {
  background: #E8F4EA;
  border: 1px solid #A7D3B0;
  border-radius: 6px;
  padding: clamp(22px, 5vw, 36px);
}
.connect-success .h2 { color: #16783E; margin: 0 0 10px; }
.connect-success p { color: #1C4828; margin: 0 0 18px; }
.connect-success ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.connect-success li { margin: 0; }
.connect-success a.connect-btn { width: 100%; max-width: none; }
@media (min-width: 640px) {
  .connect-success ul { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ---------------------------------------------------------- credibility */
.connect-cred { background: var(--navy-2); color: var(--text-on-dark); }
.connect-cred .h2 { color: #fff; }
.connect-cred ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 12px;
}
.connect-cred li {
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  color: var(--text-on-dark);
  font-size: 0.98rem;
  line-height: 1.5;
}
.connect-cred .connect-cred-note {
  color: var(--cream);
  font-size: 0.84rem;
  line-height: 1.6;
  margin: 0;
  max-width: 46em;
}

/* ------------------------------------------------------------ four steps */
.connect-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px) { .connect-steps { grid-template-columns: 1fr 1fr; } }
.connect-step {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: 18px;
}
.connect-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange-d);
  display: block;
  margin-bottom: 6px;
}
.connect-step .h3 { font-size: 1.02rem; margin: 0 0 8px; }
.connect-step p { margin: 0; font-size: 0.94rem; color: var(--ink-2); }

/* --------------------------------------------------------- value props */
.connect-props {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) { .connect-props { grid-template-columns: repeat(3, 1fr); } }
.connect-prop {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.connect-prop .h3 { font-size: 1rem; margin: 0 0 10px; }
.connect-prop p { font-size: 0.94rem; color: var(--ink-2); flex: 1 1 auto; }
.connect-prop .connect-prop-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.connect-prop .connect-btn { width: 100%; max-width: none; font-size: 0.72rem; }

/* keep the anchor target clear of the sticky masthead */
#connect-form-section { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* quiet link lists: success actions and the closing "More about Helicon" set */
.connect-links {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.connect-links > li { margin: 0; }
.connect-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.connect-links--stack { flex-direction: column; gap: 12px; }
.connect-links--stack a { width: 100%; justify-content: center; }
@media (max-width: 600px) {
  .connect-links { flex-direction: column; gap: 10px; }
}