/* ==================================================================
   Guided — subpage retheme  (LOCAL PREVIEW ONLY)

   Sign Up, Privacy, Terms, Child Safety, For Families and Our
   Principles were authored in the original identity: cream #FAF7F0,
   Poppins, black pill buttons and a spread of accent colours (teal,
   green, orange, pink, red). The landing page and pricing page have
   since moved to white / #F5F5F7, the system face, and a single blue.

   Everything below is an override of an INLINE style, so it needs
   both an attribute selector and !important. Inline styles serialize
   to rgb(), never hex — matching on "#FAF7F0" finds nothing, which is
   why every selector here uses the rgb() form.
   ================================================================== */

:root {
  --ink:   #1D1D1F;
  --grey:  #6E6E73;
  --faint: #86868B;
  --hair:  #D2D2D7;
  --wash:  #F5F5F7;
  --blue:  #0071E3;
}

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

body,
body * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body { background: #FFFFFF !important; }

h1, h2, h3 {
  font-weight: 600 !important;
  letter-spacing: -0.024em !important;
}

h1 { line-height: 1.06 !important; }

/* ---------- grounds ---------- */

[style*="background: rgb(250, 247, 240)"] { background: #FFFFFF !important; }   /* cream page */
[style*="background: rgb(241, 237, 226)"],                                      /* cream panel */
[style*="background: rgb(242, 233, 216)"],
[style*="background: rgb(230, 220, 198)"],
[style*="background: rgb(250, 238, 223)"],
[style*="background: rgb(237, 249, 242)"],                                      /* mint */
[style*="background: rgb(159, 221, 224)"] {                                     /* teal */
  background: var(--wash) !important;
}

/* ---------- accent blocks ---------- */

[style*="background: rgb(116, 206, 156)"],   /* green */
[style*="background: rgb(30, 158, 99)"],     /* deep green */
[style*="background: rgb(210, 98, 42)"],     /* orange */
[style*="background: rgb(232, 68, 47)"],     /* red */
[style*="background: rgb(232, 154, 78)"] {   /* amber */
  background: var(--blue) !important;
  color: #FFFFFF !important;
}

/* ---------- text ---------- */

[style*="color: rgb(46, 42, 34)"],    /* body brown */
[style*="color: rgb(92, 86, 71)"],
[style*="color: rgb(74, 68, 56)"],
[style*="color: rgb(122, 115, 96)"] {
  color: var(--grey) !important;
}

[style*="color: rgb(154, 147, 132)"] { color: var(--faint) !important; }
[style*="color: rgb(17, 17, 17)"]    { color: var(--ink) !important; }

/* eyebrows and inline accents, whatever colour they started as */
[style*="color: rgb(30, 158, 99)"],
[style*="color: rgb(11, 74, 46)"],
[style*="color: rgb(232, 68, 47)"],
[style*="color: rgb(192, 57, 43)"],
[style*="color: rgb(245, 48, 126)"],
[style*="color: rgb(199, 154, 0)"],
[style*="color: rgb(46, 143, 184)"] {
  color: var(--blue) !important;
}

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

button,
a[style*="background: rgb(17, 17, 17)"],
[style*="background: rgb(17, 17, 17)"][style*="border-radius"] {
  background: var(--blue) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10), 0 6px 16px rgba(0,113,227,0.20) !important;
  transition: transform 0.16s ease, filter 0.16s ease;
}

button:hover,
a[style*="background: rgb(17, 17, 17)"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

button:active { transform: translateY(0) scale(0.985); }

/* ---------- form fields ---------- */

input, select, textarea {
  border: 1px solid var(--hair) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  color: var(--ink) !important;
  padding: 11px 13px !important;
  font-size: 16px !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--blue) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.15) !important;
}

/* ---------- rules and cards ---------- */

[style*="border: 1px solid rgb(230, 220, 198)"],
[style*="border: 1px solid rgb(241, 237, 226)"],
[style*="border-top: 1px solid rgb(230, 220, 198)"],
[style*="border-bottom: 1px solid rgb(237, 231, 218)"] {
  border-color: var(--hair) !important;
}

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

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }