:root {
  --ink: #173b3d;
  --muted: #53696a;
  --blue: #17636a;
  --blue-dark: #104d52;
  --line: #d8dfda;
  --soft: #f3f3ed;
  --white: #fff;
  --cream: #f7f4ec;
  --teal: #173b3d;
  --gold: #9a6c2d;
  --gold-soft: #fbf2e2;
  --sage: #dce8df;
}
body {
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(220, 232, 223, 0.78),
      transparent 31rem
    ),
    linear-gradient(180deg, #fbfaf6 0, #fff 34rem);
  color: var(--ink);
}
a {
  color: #17636a;
}
.site-header {
  background: rgba(251, 250, 246, 0.9);
  border-bottom-color: rgba(23, 59, 61, 0.14);
  backdrop-filter: blur(10px);
}
.brand-logo {
  display: block;
  width: min(195px, 54vw);
  height: auto;
}
.intro:not(.ask-intro) {
  position: relative;
  padding-left: 22px;
}
.intro:not(.ask-intro):before {
  position: absolute;
  inset: 5px auto 4px 0;
  width: 4px;
  background: var(--gold);
  border-radius: 4px;
  content: "";
}
.ask-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 286px;
  padding: clamp(34px, 5vw, 62px);
  color: #fff;
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(239, 209, 154, 0.18),
      transparent 24rem
    ),
    linear-gradient(135deg, #123638 0%, #1c4a4b 58%, #24585a 100%);
  border: 1px solid rgba(23, 59, 61, 0.28);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(23, 59, 61, 0.19);
}
.ask-intro::after {
  position: absolute;
  right: -84px;
  bottom: -148px;
  z-index: -1;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.025),
    0 0 0 92px rgba(255, 255, 255, 0.018);
  content: "";
}
.ask-intro .eyebrow {
  color: #efd19a;
}
.ask-intro h1 {
  color: #fff;
  font-size: clamp(4rem, 7vw, 6.35rem);
}
.ask-intro .lede {
  color: #e2ecea;
  font-size: clamp(1.06rem, 1.55vw, 1.24rem);
  line-height: 1.62;
}
.ask-intro .availability {
  margin: 0;
  padding: 15px 17px;
  color: #effaf4;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.19);
  box-shadow: none;
  backdrop-filter: blur(10px);
}
.ask-intro .availability.available {
  color: #effaf4;
  background: rgba(230, 251, 239, 0.09);
  border-color: rgba(201, 238, 216, 0.28);
}
.ask-intro .availability.unavailable {
  color: #fff2d8;
  background: rgba(255, 229, 178, 0.09);
  border-color: rgba(255, 229, 178, 0.3);
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.045em;
}
.lede {
  color: #4d6263;
}
.availability {
  box-shadow: 0 12px 34px rgba(23, 59, 61, 0.06);
}
.form-card,
.policy-card {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(23, 59, 61, 0.16);
  box-shadow: 0 22px 60px rgba(23, 59, 61, 0.09);
}
.trust-card {
  background: linear-gradient(145deg, #173b3d, #214d4e);
  border-color: #173b3d;
  box-shadow: 0 22px 60px rgba(23, 59, 61, 0.18);
}
.trust-card .eyebrow {
  color: #efd19a;
}
.section-heading h2,
.trust-card h2,
.policy-card h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}
.eyebrow,
.step {
  color: var(--gold);
}
input[type="email"],
textarea,
select {
  border-color: #aab9b5;
  background: #fffefa;
}
.choice-card:has(input:checked) {
  border-color: var(--blue);
  background: #edf5f1;
}
.choice-card input,
.check-row input {
  accent-color: var(--blue);
}
input:focus,
textarea:focus,
select:focus,
button:focus-visible {
  outline-color: rgba(23, 99, 106, 0.24);
  border-color: var(--blue);
}
.primary-button {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 10px 26px rgba(23, 99, 106, 0.22);
}
.primary-button:hover {
  background: var(--blue-dark);
}
.secondary-button {
  color: var(--teal);
  border-color: var(--teal);
}
.ai-explainer {
  background: #f5f6f1;
  border-color: #d9e1dc;
}
.policy-page main {
  padding-top: 72px;
}
footer {
  background: #f7f4ec;
  border-top-color: rgba(23, 59, 61, 0.14);
}
@media (max-width: 560px) {
  .intro:not(.ask-intro) {
    padding-left: 16px;
  }
  .ask-intro {
    min-height: 0;
    padding: 28px 24px;
    border-radius: 24px;
  }
  .ask-intro h1 {
    font-size: clamp(3.35rem, 17vw, 4.6rem);
  }
  .brand-logo {
    width: 178px;
  }
}

/* Visible keyboard focus retains Ask OCM's approved teal accent. */
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible { outline-color: #17636a; }