/* SOS Files — shared chrome + tokens (gj- prefix, mixed token style) */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=DM+Sans:wght@400;500&family=Instrument+Sans:wght@400;600&family=Poppins:wght@400;600&display=swap");

:root {
  --gj-main: #ff4d2a;
  --gj-white: #ffffff;
  --gj-dark: #232838;
  --gj-text: #5a6072;
  --gj-muted: #b7bbc8;
  --gj-bright: #fbfaf7;
  --gj-tone: #f2f0ea;
  --gj-brightMain: #f3e5dd;
  --gj-footLink: #edebe4;
  --gj-footMuted: #a9adbb;
  --gj-legalTitle: #0a0a0a;
  --gj-legalBody: #52595e;
  --gj-max: 1200px;
  --gj-radPill: 999px;
  --gj-shadowCta: 0 15.75px 42.75px -13.5px rgba(255, 77, 42, 0.5);
  --gj-shadowCtaSm: 0 14px 38px -12px rgba(255, 77, 42, 0.5);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gj-text);
  background: var(--gj-bright);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.gj-frame {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.gj-primary {
  flex: 1 1 auto;
}

.gj-wrap {
  width: 100%;
  max-width: var(--gj-max);
  margin-inline: auto;
  padding-inline: 24px;
}

/* —— Header / ridge —— */
.gj-ridge {
  width: 100%;
  flex-shrink: 0;
}

.gj-ridgeInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--gj-max);
  margin-inline: auto;
  padding: 16px 32px;
}

.gj-ridgeIsBright {
  background: transparent;
}

.gj-ridgeIsWhite {
  background: var(--gj-white);
}

.gj-ridgeIsWhite .gj-ridgeInner {
  min-height: 77px;
  padding-block: 16px;
}

.gj-logoMark {
  width: 146px;
  height: auto;
}

.gj-ridgeBrand {
  display: inline-flex;
  align-items: center;
}

.gj-ridgeOutline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border: 1.25px solid var(--gj-main);
  border-radius: var(--gj-radPill);
  color: var(--gj-main);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: 19px;
  background: var(--gj-white);
  line-height: 1.2;
}

.gj-ridgeOutline:hover {
  background: rgba(255, 77, 42, 0.06);
}

/* —— Primary filled CTA —— */
.gj-ctaFill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  border-radius: var(--gj-radPill);
  background: var(--gj-main);
  color: var(--gj-white);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  box-shadow: var(--gj-shadowCta);
  line-height: 1.2;
}

.gj-ctaFill:hover {
  filter: brightness(1.05);
}

.gj-ctaFillLg {
  font-size: clamp(22px, 2.4vw, 38px);
  padding: clamp(14px, 1.6vw, 22px) clamp(28px, 3vw, 48px);
}

.gj-ctaFillMd {
  font-size: clamp(18px, 2vw, 25.6px);
  box-shadow: var(--gj-shadowCtaSm);
}

.gj-ctaIcon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

/* —— Footer / colophon —— */
.gj-colophon {
  background: var(--gj-dark);
  color: var(--gj-footLink);
  padding: 65px 0 40px;
  flex-shrink: 0;
}

.gj-colophonGrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  max-width: var(--gj-max);
  margin-inline: auto;
  padding-inline: 32px;
}

.gj-colophonBrand {
  max-width: 420px;
}

.gj-colophonLogo {
  width: 146px;
  height: auto;
  margin-bottom: 16px;
}

.gj-colophonTag {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gj-footMuted);
}

.gj-colophonMail {
  color: var(--gj-footLink);
  text-decoration: underline;
  font-size: 15px;
}

.gj-colophonMail:hover {
  color: var(--gj-white);
}

.gj-colophonNav {
  display: flex;
  gap: 64px;
}

.gj-colophonCol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gj-colophonCol a {
  color: var(--gj-footLink);
  font-size: 15px;
  opacity: 0.9;
}

.gj-colophonCol a:hover {
  opacity: 1;
  color: var(--gj-white);
}

.gj-colophonBar {
  max-width: var(--gj-max);
  margin: 40px auto 0;
  padding: 24px 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gj-colophonCopy {
  margin: 0;
  font-size: 12px;
  color: var(--gj-footMuted);
  font-family: "DM Sans", sans-serif;
}

/* —— Shared inner-page helpers —— */
.gj-simpleCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 8vh, 120px) 24px;
  min-height: min(60vh, 640px);
}

.gj-displayTitle {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1;
  color: var(--gj-dark);
}

.gj-displayAccent {
  color: var(--gj-main);
}

.gj-leadCopy {
  margin: 20px 0 0;
  font-size: clamp(16px, 1.4vw, 21px);
  color: var(--gj-text);
  max-width: 640px;
}

.gj-legalShell {
  padding: 48px 24px 96px;
}

.gj-legalInner {
  max-width: 900px;
  margin-inline: auto;
}

.gj-legalTitle {
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 48px);
  color: var(--gj-legalTitle);
  line-height: 1.2;
}

.gj-legalDate {
  margin: 0 0 32px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: var(--gj-muted);
}

.gj-legalBody {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--gj-legalBody);
}

.gj-legalBody p {
  margin: 0 0 1.1em;
}

.gj-legalBody h2,
.gj-legalBody strong.gj-legalHead {
  display: block;
  margin: 1.6em 0 0.6em;
  font-size: 1.05em;
  color: var(--gj-legalTitle);
  font-weight: 600;
}

.gj-legalBody ul {
  margin: 0 0 1.1em;
  padding-left: 1.25em;
}

.gj-legalBody li {
  margin-bottom: 0.45em;
}

.gj-legalUpper {
  text-transform: uppercase;
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* FAQ open class hook for JS */
.gj-kbluv .gj-faqPanel {
  display: block;
}

@media (max-width: 900px) {
  .gj-ridgeInner {
    padding-inline: 20px;
  }

  .gj-colophonGrid {
    flex-direction: column;
    padding-inline: 20px;
  }

  .gj-colophonNav {
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .gj-colophonNav {
    flex-direction: column;
    gap: 24px;
  }

  .gj-ridgeOutline {
    font-size: 16px;
    padding: 8px 20px;
  }
}