/* =========================================================
   Systems Engineering Advisory — shared .sea-page base styles
   =========================================================
   Loaded site-wide via theme/functions.php. The selectors are
   scoped under `.sea-page`, so these rules only take effect on
   pages whose top-level wrapper carries that class. WordPress
   chrome and other pages are unaffected.

   Extraction rules: only rules that were character-for-character
   identical (modulo whitespace) across every `.sea-page` HTML
   fragment in `pages/` were moved here. Page-specific styles —
   hero variants, section components, the reduced-motion media
   block, and the :focus-visible rule — remain inline in each
   fragment so per-page tweaks stay in one place.

   The --success custom property is declared here for consistency
   even though no rule in this stylesheet reads it; some fragments
   originally declared it inline alongside their other vars.
   ========================================================= */

.sea-page {
  --navy: #0f2a44;
  --navy-dark: #081a2d;
  --navy-light: #1a3957;
  --teal: #2aa4a4;
  --teal-dark: #1f8585;
  --teal-bg: #e7f4f4;
  --teal-pale: #f4fafa;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #d8d8d8;
  --bg: #ffffff;
  --bg-alt: #f7f8f9;
  --success: #2a8d4a;
  --shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 42, 68, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 42, 68, 0.12);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  padding: 0;
}

.sea-page * { box-sizing: border-box; }
.sea-page p { margin: 0 0 1rem; }
.sea-page h1, .sea-page h2, .sea-page h3, .sea-page h4 {
  font-family: inherit;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
.sea-page ul, .sea-page ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.sea-page li { margin-bottom: 0.4rem; }
.sea-page a { color: var(--teal-dark); text-decoration: none; }
.sea-page a:hover { text-decoration: underline; }

/* =========================================================
   Content wrapper: remove the theme's top AND bottom padding so
   the full-bleed SEA fragments sit flush against the site header
   and footer. The .sea-main wrapper + its 48px padding come from
   the Kadence layout (outside this repo); this overrides the gaps
   that otherwise show as white bands above the first section and
   before the navy footer.
   !important is needed to win over the Kadence/Customizer rule.
   ========================================================= */
.sea-main { padding-top: 0 !important; padding-bottom: 0 !important; }

#main-content { scroll-margin-top: 6rem; }
.sea-main-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 6rem;
}

/* Sales-page evidence blocks shared by the three paid products. */
.sea-page .sea-proof {
  padding: 4.5rem 0;
  background: var(--bg);
}
.sea-page .sea-release {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.2rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 5px;
  background: var(--teal-pale);
  color: var(--muted);
  font-size: 0.9rem;
}
.sea-page .sea-release strong { color: var(--navy); }
.sea-page .sea-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.5rem;
  margin: 1.5rem 0 2.5rem;
  padding: 0;
  list-style: none;
}
.sea-page .sea-outcomes li {
  position: relative;
  margin: 0;
  padding: 1rem 1rem 1rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-alt);
}
.sea-page .sea-outcomes li::before {
  content: "✓";
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: var(--teal-dark);
  font-weight: 700;
}
.sea-page .sea-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.75rem;
}
.sea-page .sea-preview {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-alt);
  box-shadow: var(--shadow-sm);
}
.sea-page .sea-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--border);
}
.sea-page .sea-preview figcaption {
  padding: 0.8rem 1rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.sea-page .sea-sample {
  margin: 1.25rem 0 2.75rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 6px;
  background: var(--teal-pale);
}
.sea-page .sea-sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.sea-page .sea-sample-card {
  padding: 1rem;
  border-radius: 5px;
  background: var(--bg);
}
.sea-page .sea-sample-card h4 {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}
.sea-page .sea-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
}
.sea-page .sea-comparison {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.sea-page .sea-comparison th,
.sea-page .sea-comparison td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.sea-page .sea-comparison th {
  background: var(--navy);
  color: #ffffff;
}
.sea-page .sea-comparison tbody th {
  background: var(--bg-alt);
  color: var(--navy);
}
@media (max-width: 768px) {
  .sea-page .sea-proof { padding: 3rem 0; }
  .sea-page .sea-outcomes,
  .sea-page .sea-preview-grid,
  .sea-page .sea-sample-grid { grid-template-columns: 1fr; }
  .sea-page .sea-preview-grid { gap: 1rem; }
}