/*
 * SDN storefront design system.
 *
 * Every colour and type size here was measured off the original with Playwright
 * (getComputedStyle), not matched by eye. The reference dumps live alongside the
 * capture script used to produce them.
 *
 * The original ships two entirely separate DOM trees, one for desktop and one
 * for mobile, which is why its homepage is 1.7MB of HTML. This rebuild is a
 * single responsive tree. Where the two trees carry genuinely different COPY
 * (the hero, several section headings), both strings are kept and swapped at
 * the breakpoint with .sdn-d / .sdn-m, so neither audience loses its wording.
 */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* Measured from the original. */
  --navy: #152741;
  --violet: #9333ea;
  --orange: #ea580c;
  --orange-accent: #f97316;
  --green: #16a34a;
  --gray-900: #1f2937;
  --gray-700: #374151;
  --light-200: #e5e7eb;
  --light-300: #cbd5e0;
  --link: #188bf6;
  --muted: #8893a8;
  --muted-deep: #565a7c;

  --page: #ffffff;
  --surface-soft: #f8fafc;
  --border-soft: #e6ebf2;
  --dark-section: #0f172a;

  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;

  /*
   * Fluid scale. Endpoints are the measured mobile and desktop sizes, so the
   * two breakpoints land exactly on the original and everything between
   * interpolates rather than stepping.
   */
  --fs-hero: clamp(1.4375rem, 1.02rem + 2.1vw, 3rem);      /* 23 -> 48 */
  --fs-section: clamp(1.3125rem, 0.83rem + 2.4vw, 3rem);   /* 21 -> 48 */
  --fs-sub: clamp(1.125rem, 0.93rem + 0.9vw, 1.75rem);     /* 18 -> 28 */
  --fs-lead: clamp(1rem, 0.9rem + 0.42vw, 1.3125rem);      /* 16 -> 21 */
  --fs-body: clamp(0.875rem, 0.8rem + 0.31vw, 1.125rem);   /* 14 -> 18 */
  --fs-small: 1rem;
  --fs-tag: 0.875rem;

  --wrap: 1140px;
  --wrap-narrow: 820px;
  --gap: clamp(1rem, 0.6rem + 1.8vw, 2.25rem);
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-fluent: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- reset ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* The original overflows horizontally on small screens; the mirror must not. */
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--link); }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.18; font-family: var(--font-display); }

p { margin: 0 0 1em; }

/* ---------- breakpoint copy swap ---------- */

.sdn-m { display: none; }
.sdn-d { display: block; }

@media (max-width: 767px) {
  .sdn-m { display: block; }
  .sdn-d { display: none; }
}

/* ---------- layout ---------- */

.sdn-wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.sdn-wrap--narrow { width: min(100% - 2rem, var(--wrap-narrow)); margin-inline: auto; }

.sdn-section { padding-block: var(--section-y); }
.sdn-section--soft { background: var(--surface-soft); }
.sdn-section--dark { background: var(--dark-section); color: var(--light-200); }
.sdn-section--dark h2, .sdn-section--dark h3 { color: var(--light-200); }
.sdn-section--dark p { color: var(--light-300); }

.sdn-center { text-align: center; }

.sdn-grid { display: grid; gap: var(--gap); }
@media (min-width: 768px) {
  .sdn-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .sdn-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- type ---------- */

.sdn-hero-title { font-size: var(--fs-hero); font-weight: 900; color: var(--navy); }
.sdn-section-title { font-size: var(--fs-section); font-weight: 900; color: var(--navy); }
.sdn-sub-title { font-size: var(--fs-sub); font-weight: 900; color: var(--navy); }
.sdn-lead { font-size: var(--fs-lead); color: var(--navy); }
.sdn-tag { font-size: var(--fs-tag); font-weight: 600; color: var(--orange-accent); text-transform: uppercase; letter-spacing: 0.04em; }

.sdn-violet { color: var(--violet); }
.sdn-orange { color: var(--orange); }
.sdn-green { color: var(--green); }

/* ---------- buttons ---------- */

.sdn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 220ms var(--ease-fluent);
  /* Comfortable thumb target; the original's buttons are borderline on mobile. */
  min-height: 52px;
}

.sdn-btn--primary {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 10px 26px rgba(147, 51, 234, 0.28);
}
.sdn-btn--primary:hover { background: #7e22ce; transform: translateY(-2px); }

.sdn-btn--orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 10px 26px rgba(234, 88, 12, 0.28);
}
.sdn-btn--orange:hover { background: #c2410c; transform: translateY(-2px); }

.sdn-btn--ghost {
  background: transparent;
  color: var(--violet);
  border: 2px solid var(--violet);
}
.sdn-btn--ghost:hover { background: rgba(147, 51, 234, 0.08); }

.sdn-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sdn-btn { transition: none; }
  .sdn-btn:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- cards ---------- */

.sdn-card {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.sdn-card__title { font-size: var(--fs-lead); font-weight: 900; color: var(--navy); margin-bottom: 0.4em; }
.sdn-card__body { font-size: var(--fs-body); color: var(--navy); margin: 0; }

/* Icons inside a coloured card sit bare, with no chip wrapper behind them. */
.sdn-card__icon { width: 40px; height: 40px; margin-bottom: 0.75rem; }

/* ---------- stat tiles ---------- */

.sdn-stat { text-align: center; }
.sdn-stat__label { font-size: var(--fs-sub); font-weight: 900; color: var(--navy); margin: 0 0 0.25em; }
.sdn-stat__value { font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem); font-weight: 700; line-height: 1; display: block; }

/* ---------- price cards ---------- */

.sdn-price-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem; }
.sdn-price-card--featured { border-color: var(--violet); box-shadow: 0 16px 40px rgba(147, 51, 234, 0.16); }

.sdn-price-card__flag {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--violet);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.sdn-price-card__now { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); font-weight: 900; color: var(--navy); line-height: 1; }
.sdn-price-card__was { color: var(--muted); text-decoration: line-through; margin-left: 0.5rem; font-weight: 500; font-size: var(--fs-body); }
.sdn-price-card__save { color: var(--green); font-weight: 700; font-size: var(--fs-body); }

/* ---------- accordion (FAQ) ---------- */

.sdn-faq { border-bottom: 1px solid rgba(203, 213, 224, 0.22); }
.sdn-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  color: var(--light-200);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.sdn-faq__mark { flex: none; transition: transform 240ms var(--ease-out); }
.sdn-faq__q[aria-expanded='true'] .sdn-faq__mark { transform: rotate(45deg); }
.sdn-faq__a {
  display: none;
  padding-bottom: 1.15rem;
  color: var(--light-300);
  font-size: var(--fs-small);
}
.sdn-faq__q[aria-expanded='true'] + .sdn-faq__a { display: block; }

/* ---------- forms ---------- */

.sdn-field { display: block; margin-bottom: 1rem; }
.sdn-field__label { display: block; font-weight: 700; font-size: var(--fs-body); margin-bottom: 0.35rem; color: var(--navy); }
.sdn-field__req { color: var(--orange); }

.sdn-input, .sdn-select, .sdn-textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: #fff;
  color: var(--navy);
  font-family: var(--font-body);
  /* 16px minimum, otherwise iOS Safari zooms the page on focus. */
  font-size: 1rem;
  line-height: 1.4;
  min-height: 52px;
  transition: border-color 180ms var(--ease-fluent), box-shadow 180ms var(--ease-fluent);
}
.sdn-textarea { min-height: 110px; resize: vertical; }

.sdn-input:focus, .sdn-select:focus, .sdn-textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.18);
}

.sdn-field--error .sdn-input,
.sdn-field--error .sdn-select,
.sdn-field--error .sdn-textarea { border-color: #dc2626; }

.sdn-field__error { display: none; color: #dc2626; font-size: var(--fs-tag); margin-top: 0.3rem; }
.sdn-field--error .sdn-field__error { display: block; }

/* Honeypot. Off-screen rather than display:none so bots that skip hidden
   inputs still fill it in. Never shown to a real buyer. */
.sdn-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.sdn-note { font-size: var(--fs-tag); color: var(--muted-deep); }

/* ---------- alerts ---------- */

.sdn-alert { border-radius: var(--radius); padding: 0.9rem 1.1rem; font-size: var(--fs-body); margin-bottom: 1rem; }
.sdn-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.sdn-alert--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }

/* ---------- footer ---------- */

.sdn-footer { background: var(--dark-section); color: var(--light-300); padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); text-align: center; }
.sdn-footer p { margin: 0.25rem 0; font-size: var(--fs-small); }
.sdn-footer .sdn-footer__fine { font-size: var(--fs-tag); }

/* ---------- utilities ---------- */

.sdn-stack > * + * { margin-top: var(--gap); }
.sdn-mt { margin-top: var(--gap); }
.sdn-hidden { display: none !important; }

.sdn-skip {
  position: absolute;
  left: -9999px;
}
.sdn-skip:focus {
  left: 1rem; top: 1rem;
  z-index: 100;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

/* Wide content must scroll inside its own container, never the page body. */
.sdn-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }