/* OCH inline subscribe box: homepage hero (.och-sub--hero, on navy) and generic inline (.och-sub--inline, on light).
   Uses the theme's Tailwind tokens with fallbacks. */
.och-sub {
  --s-navy: var(--color-secondary-900, #0b1a2b);
  --s-yel: var(--color-primary, #ffba00);
  --s-yel-d: var(--color-primary-700, #b98600);
  --s-cream: var(--color-background, #fff7eb);
  --s-sans: var(--font-sans, "Montserrat", ui-sans-serif, system-ui, sans-serif);
  max-width: 36rem;
  font-family: var(--s-sans);
}
/* Pill: white field + yellow button inside one shape */
.och-sub__form {
  position: relative;
  display: flex; align-items: center; gap: .4rem;
  margin: 0; padding: .4rem;
  background: #fff;
  border: 3px solid var(--s-yel);
  border-radius: 999px;
  box-shadow: 0 6px 0 0 var(--s-yel-d), 0 18px 40px -18px rgb(0 0 0 / .55);
  transition: box-shadow .15s ease, transform .15s ease;
}
.och-sub__form:focus-within { box-shadow: 0 6px 0 0 var(--s-yel-d), 0 0 0 5px rgb(255 186 0 / .35); }
.och-sub__form input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  padding: .85rem .5rem .85rem 1.1rem;
  border: 0; background: transparent; outline: none; box-shadow: none;
  color: var(--s-navy);
  font: 600 1.0625rem/1.2 var(--s-sans);
  appearance: none;
}
.och-sub__form input[type="email"]::placeholder { color: var(--color-secondary-400, #64798e); font-weight: 500; }
.och-sub__form input[aria-invalid="true"] { color: #b42318; }
.och-sub__btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 1.6rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--s-navy); color: var(--s-yel);
  font: 800 .9rem/1 var(--s-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.och-sub__btn:hover { background: var(--color-secondary-700, #16273a); }
.och-sub__btn:active { transform: translateY(1px); }
.och-sub__btn:focus-visible { outline: 3px solid var(--s-yel); outline-offset: 2px; }
.och-sub__btn[disabled] { opacity: .75; cursor: progress; }
.och-sub__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.och-sub__msg { min-height: 1.25rem; margin: .85rem 0 0; font-weight: 700; font-size: .95rem; color: var(--s-yel); }
.och-sub__msg:empty { min-height: 0; margin: 0; }
.och-sub__msg.is-error { color: #ffb4b4; }
.och-sub__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-top: 1rem;
  font-size: .85rem; font-weight: 600;
  color: var(--color-secondary-200, #c9d2db);
}
.och-sub__note::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 999px; background: var(--s-yel); vertical-align: .05em; }
.och-sub.is-known .och-sub__note::after { content: " You're already subscribed on this device."; color: var(--s-yel); }
.och-sub__explore {
  color: #fff; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
  text-decoration: underline; text-decoration-color: var(--s-yel); text-decoration-thickness: 2px; text-underline-offset: .35em;
}
.och-sub__explore:hover { color: var(--s-yel); }

/* ---------- v0.3.5 success card: replaces the email box after a real signup ---------- */
.och-sub.is-done .och-sub__form,
.och-sub.is-done .och-sub__msg,
.och-sub.is-done .och-sub__note { display: none; }
.och-done {
  --d-navy: var(--color-secondary-900, #0b1a2b);
  --d-gold: var(--color-primary, #ffba00);
  --d-orange: #ffa94d;
  --d-cream: var(--color-background, #fff7eb);
  display: flex; align-items: flex-start; gap: 1rem;
  font-family: var(--font-sans, "Montserrat", ui-sans-serif, system-ui, sans-serif);
  outline: none;
}
.och-done:not(:has(.och-done__title:not(:empty))) { visibility: hidden; } /* empty for ~30ms before the live text lands */
.och-done__icon {
  flex: 0 0 auto; position: relative;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--d-gold);
  box-shadow: 0 0 0 4px rgb(255 169 77 / .35);
}
.och-done__icon::after {           /* navy check mark */
  content: ""; position: absolute; left: 50%; top: 46%;
  width: .7rem; height: 1.25rem;
  border: solid var(--d-navy); border-width: 0 .26rem .26rem 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.och-done__text { min-width: 0; }
.och-done__title { margin: .1rem 0 .35rem; font-weight: 900; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.och-done__body  { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.5; }

/* Hero (on navy): cream card in the same pill-ish shape as the form it replaces */
.och-sub .och-done {
  position: relative; overflow: hidden;
  padding: 1.15rem 1.4rem 1.2rem 1.15rem;
  background:
    radial-gradient(circle, var(--d-orange) 0 3px, transparent 3.5px) right 1.6rem top .9rem / 10px 10px no-repeat,
    radial-gradient(circle, var(--d-gold) 0 4px, transparent 4.5px) right 3.1rem top 1.9rem / 12px 12px no-repeat,
    radial-gradient(circle, var(--d-navy) 0 2px, transparent 2.5px) right 1.1rem top 2.6rem / 8px 8px no-repeat,
    var(--d-cream);
  border: 3px solid var(--d-gold);
  border-radius: 1.5rem;
  box-shadow: 0 6px 0 0 var(--s-yel-d), 0 18px 40px -18px rgb(0 0 0 / .55);
  color: var(--d-navy);
  animation: och-done-pop .45s cubic-bezier(.2, .9, .3, 1.35) both;
}
.och-sub .och-done:focus-visible { box-shadow: 0 6px 0 0 var(--s-yel-d), 0 0 0 5px rgb(255 186 0 / .45); }
.och-sub .och-done__title { color: var(--d-navy); padding-right: 3rem; }
.och-sub .och-done__body { color: var(--color-secondary-700, #16273a); }
.och-sub.is-done .och-sub__meta { margin-top: 1.25rem; }

@keyframes och-done-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .och-done { animation: none !important; } }

/* Inline variant on light backgrounds */
.och-sub--inline .och-sub__msg { color: var(--s-navy); }
.och-sub--inline .och-sub__msg.is-error { color: #b42318; }
.och-sub--inline .och-sub__meta { color: var(--color-secondary-700, #16273a); }

/* Mobile: stack the field and the button, both full width and thumb-sized */
@media (max-width: 560px) {
  .och-sub__form {
    flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .5rem; border-radius: 1.5rem;
  }
  .och-sub__form input[type="email"] { padding: .95rem 1rem; font-size: 1rem; text-align: center; } /* 16px: no iOS zoom */
  .och-sub__btn { justify-content: center; padding: 1.05rem 1rem; font-size: .95rem; border-radius: 1.1rem; }
  .och-sub__meta { justify-content: center; text-align: center; flex-direction: column; gap: .7rem; }
  .och-sub__msg { text-align: center; }
  .och-sub .och-done { flex-direction: column; align-items: center; text-align: center; gap: .7rem; padding: 1.25rem 1.1rem 1.3rem; }
  .och-sub .och-done__title { padding-right: 0; font-size: 1.35rem; }
}