/* ===================== Shield Knot Landing (light theme) =====================
   Shared styles for the alternative light-theme landing + about pages.
   Color language + gradient match products/_shared/styles.css.
============================================================================= */
:root {
  --sk-primary:      #331C29;
  --sk-primary-rgb:  51, 28, 41;
  --sk-ink:          #2b2330;
  --sk-body:         #3a3340;
  --sk-muted:        #8b8492;
  --sk-line:         #e6e0e4;
  --sk-light:        #f9f9f9;
  --sk-white:        #ffffff;
  /* Brand accent: pink. Replaces the purple per Kevin's feedback (2026-08-27).
     Chosen from the brand palette because it is the only one of the five that
     carries white button text legibly (~4.9:1); the light blue, light green
     and yellow all fail badly against white. The dark end of the ramp is the
     same hue at lower lightness, matching how the purple ramp worked. */
  --sk-gradient:         linear-gradient(90deg, #EA088B 0%, #8B0552 100%);
  --sk-gradient-shadow:  rgba(139, 5, 82, 0.35);
  --font-body: 'Source Sans Pro', system-ui, sans-serif;
  --font-alt:  'Roboto', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--sk-body);
  background: var(--sk-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.container { width: min(1140px, 92vw); margin: 0 auto; }
.container-narrow { width: min(720px, 92vw); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sk-line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px;
}
.brand { display: inline-flex; align-items: center; }
.brand-logo { height: 26px; width: auto; }
.main-nav { display: flex; gap: 28px; }
.main-nav a {
  color: var(--sk-ink); text-decoration: none;
  font-size: 0.95rem; font-weight: 600;
  padding: 6px 0; position: relative;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--sk-gradient); transition: width 0.2s ease;
}
.main-nav a:hover::after, .main-nav a.is-active::after { width: 100%; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 32px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 2px; text-transform: uppercase; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gradient { background: var(--sk-gradient); color: #fff; background-size: 160% 100%; }
.btn-gradient:hover { box-shadow: 0 12px 28px var(--sk-gradient-shadow); background-position: 100% 0; }
.btn-block { width: 100%; }

/* ---------- Shared type ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase;
  font-weight: 700; color: #C4076F; margin-bottom: 14px;
}

/* ---------- Landing hero ---------- */
.hero-landing {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 100px 0 120px;
  text-align: center;
  position: relative;
  background:
    radial-gradient(900px 400px at 20% 0%,   rgba(234, 8, 139, 0.09), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(139, 5, 82, 0.07), transparent 60%),
    #fff;
}
.hero-landing h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 700; line-height: 1.1;
  color: var(--sk-ink);
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}
.rotator {
  display: inline-block;
  background: var(--sk-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  transition: opacity 0.28s ease;
}
.hero-landing .hero-sub {
  font-size: 1.15rem; color: var(--sk-muted);
  max-width: 520px; margin: 0 auto 38px;
}

/* The About page and its styles (.hero-about, .about-main, .about-body,
   .about-cta) were removed with www/about.html on 2026-08-27. */

/* ---------- Footer ---------- */
.site-footer-light {
  padding: 28px 0 34px;
  border-top: 1px solid var(--sk-line);
  color: var(--sk-muted);
  font-size: 0.85rem;
  text-align: center;
  background: #fff;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(43, 35, 48, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
  animation: fadeIn 0.2s ease;
}
.modal-backdrop[hidden] { display: none !important; }
.modal-card {
  background: #fff;
  border-radius: 16px;
  max-width: 460px; width: 100%;
  padding: 30px 30px 28px;
  box-shadow: 0 30px 80px rgba(43, 35, 48, 0.25);
  position: relative;
  animation: slideUp 0.28s ease;
}
.modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; font-size: 1.6rem;
  color: var(--sk-muted); cursor: pointer; line-height: 1;
  padding: 4px 10px;
}
.modal-close:hover { color: var(--sk-ink); }
.modal-card h2 {
  margin: 0 0 6px; font-size: 1.35rem; font-weight: 700; color: var(--sk-ink);
}
.modal-sub {
  font-size: 0.92rem; color: var(--sk-muted); margin: 0 0 22px;
}
.modal-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--sk-ink); margin: 4px 0 12px;
}

/* toggles */
.toggles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.92rem; color: var(--sk-body); cursor: pointer; user-select: none;
  gap: 12px;
}
.toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  flex-shrink: 0; width: 40px; height: 22px;
  background: #d8ccd4;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
}
.toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.toggle-input:checked + .toggle-track { background: var(--sk-gradient); }
.toggle-input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

/* email */
.email-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  font-size: 0.98rem; font-family: var(--font-body);
  color: var(--sk-ink);
  outline: none;
  margin-bottom: 6px;
}
.email-input:focus { border-color: #EA088B; }
.email-input.is-invalid { border-color: #d33; }
.invalid-msg {
  color: #d33; font-size: 0.82rem; margin-bottom: 12px;
}

.modal-success {
  margin-top: 14px; text-align: center;
  color: #2b7a3f; font-weight: 600; font-size: 0.95rem;
}

/* Honeypot: must be reachable to a bot parsing the DOM but invisible and
   unfocusable for people, so display:none is deliberately avoided. */
.hp-field {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
  .hero-landing { padding: 70px 0 90px; }
  .modal-card { padding: 26px 22px; }
}