/* Yoga with Jo - /yogawithjo/
   A standalone page. It deliberately does NOT share style.css: this page has a
   fixed, brighter palette of its own and no dark mode, and loading the main
   stylesheet here would drag in the site chrome it does not use.
   Onest throughout, self-hosted and subset, same as the rest of the site.
   No third-party font requests. */

@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/assets/fonts/onest-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper:  #F6F8F6;
  --ground: #DDF7EC;   /* hero mint, matches the banner's own background */
  --ink:    #15201B;
  --navy:   #122D40;   /* display type and the sign-up panel */
  --green:  #2CD59F;
  --purple: #DA5FF5;
  --panel:  #E3EAE4;
  --line:   #DDE3DF;
  --sans:   "Onest", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: var(--sans);
  --wrap:   1160px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; }
a { color: #0B7453; }
a:hover { color: var(--ink); }
input, select, textarea, button { font: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }

.y-wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }

/* Keyboard users need to see where they are, on both grounds. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
}
.y-signup a:focus-visible, .y-signup input:focus-visible, .y-signup textarea:focus-visible,
.y-signup button:focus-visible { outline-color: var(--green); }

/* ---- Hero ------------------------------------------------------------- */
/* The banner scales, so the headline over it is positioned in percentages
   and sized in vw. Below 700px the banner is too short to hold type, so the
   headline stops overlaying and stacks above it instead. */
.y-hero { position: relative; overflow: hidden; background: var(--ground); }
.y-hero picture, .y-hero img { display: block; width: 100%; height: auto; }
.y-hero-copy { position: absolute; left: 7.9%; top: 26%; width: 50%; display: flex; flex-direction: column; }
.y-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 11.1vw, 160px);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--navy);
}
.y-pill {
  align-self: flex-start;
  margin: clamp(12px, 3vw, 40px) 0 0;
  padding: 12px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  font-size: clamp(15px, 2.2vw, 28px);
  line-height: 1.2;
}

/* ---- Class + pricing --------------------------------------------------- */
.y-class { padding-block: 96px; display: flex; flex-direction: column; gap: 64px; }
.y-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px; align-items: start; }
.y-class h2 { font-size: clamp(34px, 4.2vw, 46px); }
.y-class p { margin: 0; }
.y-stack { display: flex; flex-direction: column; gap: 16px; }
.y-when { font-weight: 700; }

.y-pay {
  position: relative; overflow: hidden;
  background: var(--ground); border-radius: 40px;
  padding: 48px 40px; display: flex; flex-direction: column; gap: 28px;
}
.y-pay .y-blob { position: absolute; right: 0; top: 0; width: 160px; height: auto; }
.y-pay h3 { position: relative; font-size: clamp(36px, 4.6vw, 56px); }
.y-prices { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.y-price {
  width: 136px; height: 124px;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px; font-weight: 700; letter-spacing: -0.03em;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
}
.y-price.is-green  { background: var(--green); }
.y-price.is-purple { background: var(--purple); }
.y-price.is-panel  { background: var(--panel); border-radius: 54% 46% 50% 50% / 50% 54% 46% 50%; }
.y-pay-note { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: center; }
.y-pay-note .lead { font-size: 24px; font-weight: 500; line-height: 1.25; }
.y-pay-note .fine { margin-top: 12px; font-size: 17px; }

/* ---- What to bring ----------------------------------------------------- */
.y-bring { display: flex; flex-direction: column; gap: 32px; }
.y-bring h3 { font-size: clamp(30px, 3.6vw, 44px); }
.y-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.y-kit-item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.y-kit-disc {
  width: 150px; height: 150px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50% 48% 52% 50% / 48% 52% 50% 50%;
}
.y-kit-disc.is-green  { background: var(--green); }
.y-kit-disc.is-panel  { background: var(--panel); }
.y-kit-disc.is-purple { background: var(--purple); }
.y-kit-item strong { font-size: 26px; font-weight: 700; line-height: 1.1; }
.y-kit-item .fine { font-size: 17px; font-weight: 500; }

/* ---- About ------------------------------------------------------------- */
.y-about { background: #FFFFFF; }
.y-about .y-split { padding-block: 96px; }
.y-about h2 { font-size: clamp(34px, 4.2vw, 46px); }
.y-about p { margin: 0; }
.y-about .y-stack { gap: 20px; }
.y-creds { display: flex; flex-direction: column; gap: 36px; }
.y-creds h3 { font-size: 26px; }
.y-creds ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.y-creds li { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.y-creds li span + span { font-weight: 700; }

/* ---- Sign up ----------------------------------------------------------- */
.y-signup { background: var(--navy); color: #FFFFFF; }
.y-signup h2 { font-size: clamp(34px, 4.6vw, 56px); color: var(--ground); }
.y-signup p { margin: 0; }
/* The site green is tuned for a light ground and only reaches 2.5:1 here. */
.y-signup a { color: var(--green); }
.y-signup a:hover { color: #FFFFFF; }

/* One column, one call to action. The section used to run the same offer
   twice - a paragraph on the left and a card repeating it on the right. */
.y-join {
  max-width: 62ch;
  padding-block: 96px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.y-join ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.y-join li { position: relative; padding-left: 28px; }
.y-join li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--green);
}

.y-form {
  width: 100%; max-width: 520px;
  background: #FFFFFF; color: var(--ink);
  border-radius: 32px; padding: 32px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 18px;
}
.y-field { display: flex; flex-direction: column; gap: 6px; }
.y-field label, .y-form legend { font-weight: 700; }
.y-field input, .y-field textarea {
  padding: 12px 14px; border: 2px solid var(--line); border-radius: 14px;
  background: #FFFFFF; min-height: 48px;
}
.y-field textarea { resize: vertical; }
.y-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.y-form legend { padding: 0 0 6px; }
.y-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.y-choices label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 2px solid var(--line); border-radius: 999px;
  min-height: 44px; font-weight: 700; cursor: pointer;
}
.y-submit {
  margin-top: 6px; padding: 14px 26px;
  background: var(--green); color: var(--ink);
  border: 0; border-radius: 999px;
  font-weight: 700; font-size: 19px; min-height: 52px; cursor: pointer;
}
.y-submit:hover { background: #25BE8D; }

/* The single call to action, shown until a form endpoint is configured. */
.y-mailto {
  margin-top: 8px;
  padding: 14px 28px; border-radius: 999px;
  background: var(--green); color: var(--ink);
  font-weight: 700; text-decoration: none; min-height: 52px;
  display: inline-flex; align-items: center;
}
.y-signup a.y-mailto { color: var(--ink); }
.y-signup a.y-mailto:hover { background: #25BE8D; color: var(--ink); }

/* ---- Footer ------------------------------------------------------------ */
.y-footer { padding-block: 32px; font-size: 15px; color: #56625C; }
.y-footer .y-wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }
.y-footer p { margin: 0; }

@media (max-width: 700px) {
  .y-hero { display: flex; flex-direction: column-reverse; }
  .y-hero-copy { position: static; width: auto; padding: 28px 20px 34px; }
  .y-hero h1 { font-size: clamp(40px, 12vw, 72px); }
  .y-class { padding-block: 64px; gap: 48px; }
  .y-about .y-split { padding-block: 64px; }
  .y-join { padding-block: 64px; }
  .y-pay { padding: 36px 24px; border-radius: 32px; }
  .y-form { padding: 24px; border-radius: 24px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .y-wrap { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }