/*
 * ============================================================
 *  SEAGULL HEALTH — Design System
 *  Version: 1.0
 *  Hosted at: https://assets.seagullhealth.global/seagull.css
 *  Reference every standalone HTML page with:
 *    <link rel="stylesheet" href="https://assets.seagullhealth.global/seagull.css">
 * ============================================================
 */

/* ── Design Tokens ────────────────────────────────────────── */
:root {

  /* Brand */
  --sh-orange:       #ef7835;
  --sh-orange-dim:   #ef7835;
  --sh-orange-glow:  rgba(239, 120, 53, 0.10);
  --sh-orange-border:rgba(239, 120, 53, 0.25);

  /* Current website palette */
  --orange:      #ef7835;
  --orange-dim:  #ef7835;
  --orange-action:#ef7835;
  --orange-text: #ef7835;
  --orange-soft: #ffb079;
  --orange-rgb:  239, 120, 53;
  --orange-pale: #fff4ee;
  --ink:         #0a1628;
  --ink-2:       #0f1d33;
  --ink-mid:     #1e2f45;
  --text:        #2d3f52;
  --muted:       #6b7e92;
  --bg:          #ffffff;
  --surface:     #f6f8fb;
  --border:      #e4eaf2;
  --border-dark: #d0dae6;
  --green:       #2da870;

  /* SeizureSafe step system */
  --step-recognize:       #ef7835;
  --step-recognize-pale:  #fff4ee;
  --step-recognize-rgb:   239, 120, 53;
  --step-respond:         #e8a020;
  --step-respond-pale:    #fffbf0;
  --step-respond-rgb:     232, 160, 32;
  --step-document:        #2da870;
  --step-document-pale:   #f0faf6;
  --step-document-rgb:    45, 168, 112;
  --step-advocate:        #4a8fd4;
  --step-advocate-pale:   #f0f6fd;
  --step-advocate-rgb:    74, 143, 212;

  /* Backgrounds */
  --sh-bg:           #0d1117;
  --sh-bg-card:      #141b24;
  --sh-bg-raised:    #192230;

  /* Text */
  --sh-white:        #f4f7fb;
  --sh-text:         #dde3ec;
  --sh-muted:        #7a8fa8;
  --sh-faint:        #4a5a6e;

  /* Borders */
  --sh-border:       #1e2d40;
  --sh-border-light: #243547;

  /* Typography */
  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:       'Source Serif 4', Georgia, serif;

  /* Spacing scale */
  --sp-xs:   8px;
  --sp-sm:   16px;
  --sp-md:   24px;
  --sp-lg:   40px;
  --sp-xl:   64px;
  --sp-2xl:  96px;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-med:  0.22s ease;
}

/*
 * Legacy .sh-* component library
 *
 * Keep its reset and base rules scoped to an explicit .sh-site wrapper so
 * linking this file for the current website palette cannot restyle a page.
 */
.sh-site, .sh-site *, .sh-site *::before, .sh-site *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sh-site {
  background:  var(--sh-bg);
  color:       var(--sh-text);
  font-family: var(--font-body);
  font-size:   18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.sh-site img { max-width: 100%; display: block; }
.sh-site a   { color: var(--sh-orange); }

.skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 1000;
  background: #fff;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10,22,40,.18);
}

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

/* ── Layout ───────────────────────────────────────────────── */
.sh-container {
  max-width: 760px;
  margin:    0 auto;
  padding:   0 24px;
}

.sh-container--wide {
  max-width: 1080px;
  margin:    0 auto;
  padding:   0 24px;
}

.sh-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--sh-border);
}

.sh-section:last-of-type {
  border-bottom: none;
}

/* ── Navigation ───────────────────────────────────────────── */
.sh-nav {
  position:   sticky;
  top:        0;
  z-index:    100;
  border-bottom: 1px solid var(--sh-border);
  background: rgba(13,17,23,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding:    16px 24px;
  display:    flex;
  align-items: center;
  justify-content: space-between;
}

.sh-nav__logo {
  font-family:     var(--font-display);
  font-size:       17px;
  font-weight:     600;
  color:           var(--sh-white);
  letter-spacing:  0.01em;
  text-decoration: none;
}

.sh-nav__logo span { color: var(--sh-orange); }

.sh-nav__links {
  display:    flex;
  gap:        28px;
  list-style: none;
  align-items: center;
}

.sh-nav__links a {
  font-size:       14px;
  color:           var(--sh-muted);
  text-decoration: none;
  letter-spacing:  0.02em;
  transition:      color var(--t-fast);
}

.sh-nav__links a:hover { color: var(--sh-text); }

/* ── Typography ───────────────────────────────────────────── */
.sh-eyebrow {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--sh-orange);
  margin-bottom:  var(--sp-md);
}

.sh-h1 {
  font-family:    var(--font-display);
  font-size:      clamp(36px, 5vw, 54px);
  font-weight:    700;
  line-height:    1.13;
  color:          var(--sh-white);
  letter-spacing: -0.015em;
  margin-bottom:  var(--sp-md);
}

.sh-h2 {
  font-family:    var(--font-display);
  font-size:      clamp(26px, 3.5vw, 38px);
  font-weight:    600;
  line-height:    1.2;
  color:          var(--sh-white);
  letter-spacing: -0.01em;
  margin-bottom:  var(--sp-md);
}

.sh-h3 {
  font-family:    var(--font-display);
  font-size:      clamp(20px, 2.5vw, 24px);
  font-weight:    600;
  line-height:    1.3;
  color:          var(--sh-white);
  margin-bottom:  var(--sp-sm);
}

.sh-h1 em,
.sh-h2 em,
.sh-h3 em { font-style: italic; color: var(--sh-orange); }

.sh-lead {
  font-size:     19px;
  color:         var(--sh-muted);
  line-height:   1.65;
  font-weight:   300;
  margin-bottom: var(--sp-lg);
  max-width:     620px;
}

.sh-body { margin-bottom: var(--sp-sm); }
.sh-body:last-child { margin-bottom: 0; }

.sh-muted { color: var(--sh-muted); }

/* ── Buttons ──────────────────────────────────────────────── */
.sh-btn {
  display:         inline-block;
  font-family:     var(--font-body);
  font-size:       15px;
  font-weight:     500;
  text-decoration: none;
  letter-spacing:  0.02em;
  border-radius:   var(--r-sm);
  padding:         13px 28px;
  transition:      background var(--t-fast), transform var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  cursor:          pointer;
  border:          1px solid transparent;
  line-height:     1;
}

.sh-btn--primary {
  background: var(--sh-orange);
  color:      #fff;
}
.sh-btn--primary:hover {
  background: var(--sh-orange-dim);
  transform:  translateY(-1px);
}

.sh-btn--ghost {
  background:   transparent;
  color:        var(--sh-muted);
  border-color: var(--sh-border);
}
.sh-btn--ghost:hover {
  color:        var(--sh-text);
  border-color: var(--sh-border-light);
  background:   transparent;
}

.sh-btn--text {
  background:   transparent;
  color:        var(--sh-muted);
  padding:      0;
  border-bottom: 1px solid var(--sh-border);
  border-radius: 0;
}
.sh-btn--text:hover { color: var(--sh-text); border-color: var(--sh-muted); }

.sh-btn--sm {
  font-size: 13px;
  padding:   9px 18px;
}

.sh-btn--lg {
  font-size: 17px;
  padding:   16px 36px;
}

/* ── Nav CTA button ───────────────────────────────────────── */
.sh-nav__cta {
  background:      var(--sh-orange);
  color:           #fff;
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       13px;
  font-weight:     500;
  padding:         9px 18px;
  border-radius:   var(--r-sm);
  transition:      background var(--t-fast);
  letter-spacing:  0.02em;
  white-space:     nowrap;
}
.sh-nav__cta:hover { background: var(--sh-orange-dim); }

/* ── Cards ────────────────────────────────────────────────── */
.sh-card {
  background:    var(--sh-bg-card);
  border:        1px solid var(--sh-border);
  border-radius: var(--r-md);
  padding:       var(--sp-lg);
}

.sh-card:hover { border-color: var(--sh-border-light); }

.sh-card--featured {
  border-color: var(--sh-orange);
}

/* ── Callout / blockquote ─────────────────────────────────── */
.sh-callout {
  border-left:   3px solid var(--sh-orange);
  padding:       20px 24px;
  background:    var(--sh-bg-card);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin:        var(--sp-lg) 0;
  font-style:    italic;
  color:         var(--sh-white);
  font-size:     17px;
  line-height:   1.6;
}

/* ── Section label / rule ─────────────────────────────────── */
.sh-rule {
  width:         40px;
  height:        3px;
  background:    var(--sh-orange);
  margin-bottom: var(--sp-md);
  border-radius: 2px;
}

/* ── Divider ──────────────────────────────────────────────── */
.sh-divider {
  border:     none;
  border-top: 1px solid var(--sh-border);
  margin:     var(--sp-lg) 0;
}

/* ── Badge ────────────────────────────────────────────────── */
.sh-badge {
  display:        inline-block;
  background:     var(--sh-orange-glow);
  color:          var(--sh-orange);
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  var(--r-pill);
  white-space:    nowrap;
}

/* ── Feature rows ─────────────────────────────────────────── */
.sh-feature-list { display: flex; flex-direction: column; }

.sh-feature-row {
  display:       flex;
  gap:           20px;
  padding:       24px 0;
  border-bottom: 1px solid var(--sh-border);
  align-items:   flex-start;
}

.sh-feature-row:first-child { border-top: 1px solid var(--sh-border); }

.sh-feature-icon {
  width:            36px;
  min-width:        36px;
  height:           36px;
  background:       var(--sh-orange-glow);
  border-radius:    var(--r-sm);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        16px;
  margin-top:       2px;
}

.sh-feature-title {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   600;
  color:         var(--sh-white);
  margin-bottom: 4px;
}

.sh-feature-desc {
  font-size:   15px;
  color:       var(--sh-muted);
  line-height: 1.55;
}

/* ── Step list ────────────────────────────────────────────── */
.sh-steps { display: flex; flex-direction: column; }

.sh-step {
  display:       flex;
  gap:           24px;
  padding:       28px 0;
  border-bottom: 1px solid var(--sh-border);
  align-items:   flex-start;
}
.sh-step:first-child { padding-top: 0; }
.sh-step:last-child  { border-bottom: none; padding-bottom: 0; }

.sh-step__num {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: 700;
  color:       var(--sh-orange);
  opacity:     0.45;
  line-height: 1;
  min-width:   32px;
  margin-top:  2px;
}

.sh-step__title {
  font-family:   var(--font-display);
  font-size:     17px;
  font-weight:   600;
  color:         var(--sh-white);
  margin-bottom: 5px;
}

.sh-step__body { font-size: 15px; color: var(--sh-muted); line-height: 1.6; }

/* ── Pricing grid ─────────────────────────────────────────── */
.sh-pricing-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
  margin-top:            44px;
}

@media (max-width: 560px) {
  .sh-pricing-grid { grid-template-columns: 1fr; }
}

.sh-pricing-card {
  border:        1px solid var(--sh-border);
  border-radius: var(--r-md);
  padding:       32px;
  background:    var(--sh-bg-card);
  position:      relative;
  transition:    border-color var(--t-med);
}
.sh-pricing-card:hover { border-color: var(--sh-orange); }
.sh-pricing-card--featured { border-color: var(--sh-orange); }

.sh-price-badge {
  position:        absolute;
  top:             -13px;
  left:            50%;
  transform:       translateX(-50%);
  background:      var(--sh-orange);
  color:           #fff;
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  0.10em;
  text-transform:  uppercase;
  padding:         4px 14px;
  border-radius:   var(--r-pill);
  white-space:     nowrap;
}

.sh-price-label {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--sh-muted);
  margin-bottom:  var(--sp-sm);
}

.sh-price-amount {
  font-family:   var(--font-display);
  font-size:     46px;
  font-weight:   700;
  color:         var(--sh-white);
  line-height:   1;
  margin-bottom: 4px;
}

.sh-price-amount sup {
  font-size:      22px;
  font-weight:    400;
  vertical-align: top;
  margin-top:     8px;
  color:          var(--sh-muted);
}

.sh-price-period {
  font-size:     14px;
  color:         var(--sh-muted);
  margin-bottom: 4px;
}

.sh-price-savings {
  font-size:     13px;
  color:         var(--sh-orange);
  margin-bottom: var(--sp-md);
  min-height:    20px;
}

.sh-price-includes {
  font-size:      12px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--sh-muted);
  margin-bottom:  var(--sp-sm);
}

.sh-price-feature {
  font-size:     14px;
  color:         var(--sh-text);
  margin-bottom: 9px;
  display:       flex;
  gap:           10px;
  align-items:   flex-start;
}

.sh-price-feature::before {
  content:     '✓';
  color:       var(--sh-orange);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Hero proof bar ───────────────────────────────────────── */
.sh-proof {
  margin-top:    var(--sp-xl);
  padding-top:   var(--sp-lg);
  border-top:    1px solid var(--sh-border);
  font-size:     13px;
  color:         var(--sh-muted);
  letter-spacing:0.03em;
  display:       flex;
  gap:           32px;
  flex-wrap:     wrap;
}

.sh-proof span { display: flex; align-items: center; gap: 7px; }
.sh-proof span::before { content: '—'; color: var(--sh-orange); }

/* ── Footer ───────────────────────────────────────────────── */
.sh-footer {
  border-top: 1px solid var(--sh-border);
  padding:    28px 24px;
  text-align: center;
  font-size:  13px;
  color:      var(--sh-muted);
  line-height:1.8;
}

.sh-footer a {
  color:          var(--sh-muted);
  text-decoration:none;
  border-bottom:  1px solid var(--sh-border);
  transition:     color var(--t-fast);
}
.sh-footer a:hover { color: var(--sh-text); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes sh-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.sh-fade { opacity: 0; animation: sh-fade-up 0.7s ease forwards; }
.sh-d1   { animation-delay: 0.08s; }
.sh-d2   { animation-delay: 0.20s; }
.sh-d3   { animation-delay: 0.34s; }
.sh-d4   { animation-delay: 0.48s; }
.sh-d5   { animation-delay: 0.62s; }

/* ── Ambient hero glow ────────────────────────────────────── */
.sh-hero-glow {
  position:       absolute;
  top:            -120px;
  right:          -200px;
  width:          600px;
  height:         600px;
  background:     radial-gradient(circle, var(--sh-orange-glow) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Utilities ────────────────────────────────────────────── */
.sh-text-center { text-align: center; }
.sh-mt-sm       { margin-top: var(--sp-sm); }
.sh-mt-md       { margin-top: var(--sp-md); }
.sh-mt-lg       { margin-top: var(--sp-lg); }
.sh-mt-xl       { margin-top: var(--sp-xl); }
.sh-mb-sm       { margin-bottom: var(--sp-sm); }
.sh-mb-md       { margin-bottom: var(--sp-md); }
.sh-mb-lg       { margin-bottom: var(--sp-lg); }
.sh-flex        { display: flex; }
.sh-flex-gap-sm { gap: var(--sp-sm); }
.sh-flex-gap-md { gap: var(--sp-md); }
.sh-flex-wrap   { flex-wrap: wrap; }
.sh-align-center{ align-items: center; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .sh-section     { padding: 60px 0; }
  .sh-lead        { font-size: 17px; }
  .sh-proof       { gap: 16px; flex-direction: column; }
  .sh-nav__links  { display: none; }
  .sh-card        { padding: var(--sp-md); }
}