/* FRISTNOR, the playful layer. Pairs with js/fun.v1.js.
   1. The living eye logo (every page)
   2. Build-a-week (home, #try)
   3. Rep challenge (home, #try)
   4. Easter eggs: the toast and the star shower (every page) */

/* tokens: the site's ice-blue as channels, so alpha variants stay one colour */
:root{ --accent-rgb: 186 208 255; }

/* ================= 1. living eye ================= */
.eye-lid, .eye-pupil{ transform-box: fill-box; transform-origin: center; }
a.logo svg{ overflow: visible; }
.is-blink .eye-lid{ animation: eye-blink .22s ease-in-out; }
.is-wink .eye-lid{ animation: eye-blink .34s ease-in-out; }
.is-wink .eye-pupil{ animation: eye-spin .8s cubic-bezier(.22,1,.36,1); }
.is-dizzy .eye-look{ animation: eye-dizzy .42s linear 4; }
.is-spin{ animation: eye-whirl 1s cubic-bezier(.65,0,.35,1); }
.is-beast .eye-pupil{ animation: eye-beast .5s ease-in-out infinite alternate; }
@keyframes eye-blink{ 0%,100%{ transform: scaleY(1); } 45%,55%{ transform: scaleY(.06); } }
@keyframes eye-spin{ from{ transform: rotate(0) scale(1); } 40%{ transform: rotate(120deg) scale(1.3); } to{ transform: rotate(180deg) scale(1); } }
@keyframes eye-dizzy{
  0%,100%{ transform: translate(3px, 0); } 25%{ transform: translate(0, 1.5px); }
  50%{ transform: translate(-3px, 0); } 75%{ transform: translate(0, -1.5px); }
}
@keyframes eye-whirl{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
@keyframes eye-beast{ from{ transform: scale(1); } to{ transform: scale(1.35); filter: drop-shadow(0 0 3px var(--accent)); } }


/* ================= 2. build-a-week ================= */
.play .section-head{ margin-bottom: 52px; }
.wk{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 352px);
  gap: 40px 72px;
  align-items: start;
}
.wk-controls{ padding-top: 56px; }
.wk-field{ border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.wk-field legend{
  padding: 0; margin-bottom: 13px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--t4);
}
.wk-opts{ display: flex; flex-wrap: wrap; gap: 8px; }
.wk-opt{ position: relative; }
.wk-opt input{ position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; }
.wk-opt span{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 17px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  color: var(--t2); font-size: 14px; letter-spacing: -.01em;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: border-color .3s ease, background .3s ease, color .3s ease, scale .35s var(--pop);
}
.wk-opts--days .wk-opt span{ width: 46px; padding: 0; font-variant-numeric: tabular-nums; }
@media (hover: hover){ .wk-opt:hover span{ border-color: rgba(255,255,255,.34); color: #fff; } }
.wk-opt span:active{ scale: .96; }
.wk-opt input:checked + span{
  border-color: rgb(var(--accent-rgb) / .65); background: rgb(var(--accent-rgb) / .12); color: #fff;
}
.wk-opt input:focus-visible + span{ outline: 2px solid rgb(var(--accent-rgb) / .75); outline-offset: 2px; }
.wk-note{ margin-top: 6px; max-width: 420px; color: var(--t4); font-size: 13.5px; line-height: 1.6; }

.wk-phone{
  justify-self: center;
  width: 100%; max-width: 352px; margin: 0;
  padding: 9px; border-radius: 46px;
  background: linear-gradient(160deg, #222a35, #0c1016 55%, #161c25);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.wk-screen{
  position: relative; overflow: hidden;
  min-height: 600px; padding: 20px 14px 18px;
  border-radius: 37px; background: #0a0e13;
}
.wk-bar{ display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; color: #fff; }
.wk-bar b{ font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-mark{
  flex: none; width: 22px; height: 22px; border-radius: 7px; background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4Q13 11 20 12Q13 13 12 20Q11 13 4 12Q11 11 12 4Z' fill='%230a0e14'/%3E%3C/svg%3E");
  background-size: 15px; background-position: center; background-repeat: no-repeat;
}
.wk-state{
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--t4); font-size: 11.5px; white-space: nowrap;
}
.wk-state.is-writing{ color: var(--accent); }
.wk-state.is-writing::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: wk-pulse .9s ease-in-out infinite;
}
.wk-head{ margin: 20px 4px 14px; }
.wk-kicker{ display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.wk-title{ display: block; margin-top: 6px; font-size: 21px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: #fff; }
.wk-tags{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.wk-tags span{
  padding: 4px 9px; border-radius: 999px; font-size: 11px; color: var(--t2);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07);
}
.wk-days{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wk-day{
  position: relative;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start;
  padding: 10px 12px; border-radius: 15px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06);
}
.wk-day.is-today{ border-color: rgb(var(--accent-rgb) / .35); background: rgb(var(--accent-rgb) / .07); }
.wk-day.is-rest{ background: transparent; border-style: dashed; border-color: rgba(255,255,255,.08); padding-top: 8px; padding-bottom: 8px; }
.wk-d{ grid-row: span 2; padding-top: 2px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.wk-s{ font-size: 14px; font-weight: 600; letter-spacing: -.015em; color: #fff; }
.wk-day.is-rest .wk-s{ font-weight: 400; color: var(--t4); font-size: 13px; }
.wk-m{ font-size: 11px; color: var(--t4); white-space: nowrap; padding-top: 2px; }
.wk-l{ grid-column: 2 / -1; font-size: 11.5px; line-height: 1.45; color: var(--t3); }
.wk-l span{ white-space: nowrap; }
.wk-l i{ font-style: normal; color: var(--accent); }
/* the "being written" state: text hidden, a shimmer bar in its place */
.wk-day > *{ transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.wk-day.is-wait > *{ opacity: 0; transform: translateY(5px); }
.wk-day.is-wait::after{
  content: ""; position: absolute; left: 56px; right: 30%; top: 50%; height: 8px; margin-top: -4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.16), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: wk-shimmer .9s linear infinite;
}
@keyframes wk-shimmer{ from{ background-position: 100% 0; } to{ background-position: -100% 0; } }
@keyframes wk-pulse{ 0%,100%{ opacity: .35; } 50%{ opacity: 1; } }


/* ================= 3. rep challenge ================= */
.rep{
  margin-top: 88px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: center;
  padding: 40px 48px; border-radius: 28px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(60% 120% at 85% 50%, rgb(var(--accent-rgb) / .08), transparent 70%),
    rgba(255,255,255,.02);
}
.rep-kicker{
  display: block; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--t4);
}
.rep h3, .rep h2{ font-size: 30px; font-weight: 500; letter-spacing: -.04em; line-height: 1.15; color: #fff; }
.rep h3 em, .rep h2 em{ font-family: "Instrument Serif", "Times New Roman", Times, serif; font-style: italic; font-weight: 400; font-size: 1.08em; color: var(--t3); }
.rep-copy p{ margin-top: 14px; max-width: 460px; color: var(--t3); font-size: 15px; line-height: 1.6; }
.rep-copy .rep-result{ min-height: 1.6em; color: var(--t2); }
.rep-result b{ color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-result span{ color: var(--t4); }
.rep-play{ position: relative; display: grid; justify-items: center; gap: 14px; }
.rep-btn{
  position: relative; display: grid; place-items: center; align-content: center;
  width: 196px; height: 196px; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 30%, #1d2530, #0b0f14 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.9);
  color: #fff; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.rep-btn:focus-visible{ outline: 2px solid rgb(var(--accent-rgb) / .75); outline-offset: 6px; }
.rep-btn.is-hit{ animation: rep-hit .2s cubic-bezier(.22,1,.36,1); }
.rep-btn.is-done{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgb(var(--accent-rgb) / .4), 0 0 60px rgb(var(--accent-rgb) / .25); }
.rep-ring{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rep-ring path{ fill: none; stroke: rgba(255,255,255,.1); stroke-width: 6; stroke-linecap: round; transition: stroke .25s ease; }
.rep-ring path.is-lit{ stroke: var(--accent); }
.rep-count{ font-size: 60px; font-weight: 600; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rep-count.is-pop{ animation: rep-pop .3s var(--pop); }
.rep-of{ margin-top: 4px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.rep-timer{ min-height: 20px; font-size: 14px; color: var(--t3); font-variant-numeric: tabular-nums; }
.rep-again[hidden]{ display: none; }
.rep-spark{ position: absolute; left: 50%; top: 98px; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; }
@keyframes rep-hit{ 50%{ transform: scale(.94); } }
@keyframes rep-pop{ from{ transform: scale(1.25); color: var(--accent); } }


/* ================= 4. easter eggs ================= */
.egg-toast{
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 9001;
  display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px); padding: 11px 18px 11px 13px; border-radius: 999px;
  background: rgba(16,21,28,.84);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7), 0 0 30px rgb(var(--accent-rgb) / .12);
  color: #fff; font-size: 13.5px; letter-spacing: -.01em;
  opacity: 0; transform: translate(-50%, 10px) scale(.97);
  transition: opacity .18s ease-out, transform .18s ease-out;            /* leaving: quick */
  pointer-events: none;
}
.egg-toast.is-on{
  opacity: 1; transform: translate(-50%, 0) scale(1);
  transition: opacity .3s cubic-bezier(.23,1,.32,1), transform .3s cubic-bezier(.23,1,.32,1);   /* arriving */
}
.egg-toast svg{ flex: none; width: 16px; height: 16px; color: var(--accent); }
.egg-toast small{ color: var(--t4); font-size: 12px; white-space: nowrap; }
.egg-sky{ position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; }
.egg-star, .rep-spark{
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1Q13.2 10.8 23 12Q13.2 13.2 12 23Q10.8 13.2 1 12Q10.8 10.8 12 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1Q13.2 10.8 23 12Q13.2 13.2 12 23Q10.8 13.2 1 12Q10.8 10.8 12 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.egg-star{ position: absolute; top: 0; }
html.is-beast .motion-ribbon{ filter: drop-shadow(0 0 16px rgb(var(--accent-rgb) / .55)); transition: filter .4s ease; }


/* ================= small screens ================= */
@media (max-width: 860px){
  .wk{ grid-template-columns: minmax(0, 1fr); }
  .wk-controls{ padding-top: 0; }
  .wk-phone{ max-width: min(352px, 100%); }
  .rep{ grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 32px 22px; margin-top: 64px; }
  .rep-copy p{ margin-left: auto; margin-right: auto; }
  .rep h3, .rep h2{ font-size: 26px; }
}
@media (max-width: 420px){
  .wk-screen{ min-height: 0; padding: 18px 10px 14px; border-radius: 34px; }
  .wk-opt span{ min-height: 44px; padding: 0 14px; font-size: 13.5px; }
  .wk-opts--days .wk-opt span{ width: 44px; padding: 0; }
}

@media (prefers-reduced-motion: reduce){
  .is-blink .eye-lid, .is-wink .eye-lid, .is-wink .eye-pupil, .is-dizzy .eye-look, .is-spin, .is-beast .eye-pupil,
  .rep-btn.is-hit, .rep-count.is-pop, .wk-state.is-writing::before, .wk-day.is-wait::after{ animation: none; }
  .wk-day > *{ transition: none; }
  .egg-toast{ transition: opacity .2s ease; transform: translate(-50%, 0); }
}


/* ================= 5. subpages =================
   Platform: throw the plan a bad week (#curveballs)
   How it works: your dates (#your-dates)
   Pricing: fill a hundred seats (#roster) */

/* -- platform: the plan rewrites around what went wrong -- */
.adapt-coach{
  position: relative; max-width: 440px; margin-top: 8px;
  padding: 16px 18px; border-radius: 18px 18px 18px 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.adapt-coach-who{ display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.adapt-coach p{ color: var(--t2); font-size: 14.5px; line-height: 1.55; }
.adapt-coach.is-typing p{ opacity: 0; }
.adapt-coach.is-typing::after{
  content: ""; position: absolute; left: 18px; bottom: 22px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--t3); box-shadow: 11px 0 0 var(--t3), 22px 0 0 var(--t3);
  animation: wk-pulse .8s ease-in-out infinite;
}
.adapt-days s{ color: var(--t5); text-decoration-color: rgba(255,255,255,.35); }
.adapt-new{ color: var(--accent); }
.adapt-tag{
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--accent);
  background: rgb(var(--accent-rgb) / .1); border: 1px solid rgb(var(--accent-rgb) / .25);
}
.wk-day.is-missed{ background: transparent; border-style: dashed; border-color: rgba(255,138,138,.25); }
.wk-day.is-missed .wk-s{ color: var(--t4); font-weight: 400; font-size: 13px; }
.wk-day.is-changed{ animation: adapt-flash 1s ease; }
@keyframes adapt-flash{ 0%{ border-color: rgb(var(--accent-rgb) / .8); background: rgb(var(--accent-rgb) / .1); } }

/* -- how it works: your dates -- */
.dates{
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px 72px; align-items: start;
}
.dates-pick{ padding-top: 28px; }
.dates-label{ display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--t4); }
.dates-input{
  width: 100%; max-width: 320px; height: 54px; padding: 0 18px; border-radius: 14px;
  font: inherit; font-size: 17px; color: #fff; color-scheme: dark;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.dates-input:focus{ outline: none; border-color: rgb(var(--accent-rgb) / .65); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .12); }
.dates-quick{ margin-top: 14px; }
.dates-card{
  position: relative; padding: 34px 34px 26px; border-radius: 26px;
  border: 1px solid var(--border-soft);
  background: radial-gradient(70% 90% at 20% 0%, rgb(var(--accent-rgb) / .09), transparent 70%), rgba(255,255,255,.02);
}
.dates-kicker{ display: block; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.dates-big{
  display: block; margin-top: 10px;
  font-family: "Instrument Serif", "Times New Roman", Times, serif; font-style: italic; font-weight: 400;
  font-size: clamp(42px, 6vw, 68px); line-height: 1.02; letter-spacing: -.02em; color: #fff;
}
.dates-big.is-flip{ animation: dates-flip .6s cubic-bezier(.22,1,.36,1); }
@keyframes dates-flip{ from{ opacity: 0; transform: translateY(14px) rotateX(-50deg); filter: blur(6px); } }
.dates-count{ display: block; margin-top: 10px; color: var(--t3); font-size: 14px; font-variant-numeric: tabular-nums; }
.dates-count b{ color: #fff; font-weight: 600; }
.dates-list{ list-style: none; margin: 26px 0 0; padding: 0; display: grid; }
.dates-list li{
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px; color: var(--t2);
}
.dates-list li > span:first-child{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t4); }
.dates-list li > b{ font-weight: 500; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dates-list li.is-live{ color: #fff; }
.dates-list li.is-live > b{ color: var(--accent); }

/* -- pricing: fill a hundred seats -- */
.roster{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.roster-seats{
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 9px;
  width: 100%; max-width: 440px; justify-self: center;
}
.roster-seats i{
  aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12); background: transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.roster-seats i[data-t]{ animation: seat-pop .45s var(--pop); border-color: transparent; }
.roster-seats i[data-t="0"]{ background: #8b929d; }
.roster-seats i[data-t="1"]{ background: var(--accent); }
.roster-seats i[data-t="2"]{ background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.5); }
@keyframes seat-pop{ from{ transform: scale(.6); opacity: 0; } }
.roster-legend{ display: flex; justify-content: center; gap: 18px; margin-top: 18px; font-size: 12.5px; color: var(--t4); }
.roster-legend span::before{ content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--c); vertical-align: 0; }
.roster-add{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.roster-btn{
  display: grid; gap: 4px; padding: 15px 14px; border-radius: 16px; text-align: left;
  font: inherit; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  transition: border-color .3s ease, background .3s ease, scale .35s var(--pop), opacity .3s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.roster-btn b{ font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.roster-btn span{ font-size: 12.5px; color: var(--t4); }
.roster-btn b::before{ content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
@media (hover: hover){ .roster-btn:hover:not(:disabled){ border-color: rgb(var(--accent-rgb) / .55); background: rgb(var(--accent-rgb) / .07); } }
.roster-btn:active:not(:disabled){ scale: .96; }
.roster-btn:disabled{ opacity: .4; cursor: default; }
.roster-btn:focus-visible{ outline: 2px solid rgb(var(--accent-rgb) / .75); outline-offset: 2px; }
.roster-more{ display: flex; gap: 8px; margin-top: 12px; }
.roster-out{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 26px 0 0; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.08); }
.roster-out > div{ padding: 16px 18px; background: #0b0f14; }
.roster-out dt{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--t4); }
.roster-out dd{ margin: 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
.roster-out .is-you dd{ color: var(--accent); }
.roster-note{ margin-top: 16px; color: var(--t4); font-size: 13.5px; line-height: 1.6; }
.roster-note a{ color: var(--t2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.roster-note b{ color: #fff; font-weight: 600; }

@media (max-width: 860px){
  .dates, .roster{ grid-template-columns: minmax(0, 1fr); }
  .dates-pick{ padding-top: 0; }
  .dates-card{ padding: 26px 20px 18px; }
  .dates-list li{ grid-template-columns: minmax(0, 1fr) auto; }
  .dates-list li > span:first-child{ grid-column: 1 / -1; margin-bottom: -6px; }
}
@media (max-width: 420px){
  .roster-add{ grid-template-columns: minmax(0, 1fr); }
  .roster-btn{ grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
  .roster-out dd{ font-size: 22px; }
}
@media (prefers-reduced-motion: reduce){
  .wk-day.is-changed, .dates-big.is-flip, .roster-seats i[data-t], .adapt-coach.is-typing::after{ animation: none; }
}


/* ================= 6. the coach mascot (home, coach chat) =================
   Drawn with the page-mascot pipeline: two 3x3 sheets, nine head directions and
   nine expressions, swapped by background-position. Sheets load near the section. */
/* She stands beside the section heading, presenting the chat on the right. */
.coach-head{ display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; gap: 8px 8px; align-items: center; margin-bottom: 22px; }
.coach-head h2{ margin-bottom: 0; }
.coach-mascot{ position: relative; width: 184px; height: 184px; margin-right: -8px; }
.mascot{
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .9s var(--pop);
}
/* small and low until she is first seen, then she pops up */
.js .coach-mascot:not(.is-up) .mascot{ transform: translateY(18%) scale(.55); opacity: 0; transition-duration: 0s; }
.mascot{ transition: transform .9s var(--pop), opacity .35s ease; }
.mascot:focus-visible{ outline: 2px solid rgb(var(--accent-rgb) / .75); outline-offset: 2px; border-radius: 50%; }
.mascot-squash{ position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 78%; }
.mascot-layer{
  position: absolute; inset: 0; background-size: 300% 300%; background-repeat: no-repeat; background-position: 50% 50%;
  /* a cool rim light, so black hair still reads against the near-black page */
  filter: drop-shadow(0 0 1.5px rgba(214,226,255,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.5));
}
.mascot-react{ opacity: 0; }
.mascot.is-reacting .mascot-dir{ opacity: 0; }
.mascot.is-reacting .mascot-react{ opacity: 1; }
.coach-mascot-hi{
  position: absolute; left: 50%; bottom: 94%; width: max-content; max-width: 190px; text-align: center; line-height: 1.35;
  padding: 7px 12px; border-radius: 14px;
  background: #fff; color: #0b0f14; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.6);
  opacity: 0; transform: translate(-50%, 6px) scale(.9); transform-origin: 50% 100%;
  transition: opacity .3s ease, transform .45s var(--pop);
  pointer-events: none;
}
.coach-mascot.is-hi .coach-mascot-hi{ opacity: 1; transform: translate(-50%, 0); }
.coach-mascot-hi::after{ content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
/* -- her motion. Breathing and sway use the individual translate/scale/rotate
   properties, so they layer under the squash, the lean and the per-expression moves,
   which all animate transform. */
.mascot-move{
  position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 88%;
  animation: mascot-breathe 3.6s ease-in-out infinite, mascot-sway 7.2s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mascot.is-bashful .mascot-move{ transform: rotate(-5deg) scale(.96); }
.mascot.is-asleep .mascot-move{ animation-duration: 5.6s, 11s; transform: translateY(3px) rotate(3deg); }
@keyframes mascot-breathe{ 0%,100%{ translate: 0 0; scale: 1 1; } 50%{ translate: 0 -3px; scale: 1.01 1.025; } }
@keyframes mascot-sway{ 0%,100%{ rotate: -1.4deg; } 50%{ rotate: 1.4deg; } }
.mascot-float{
  position: absolute; left: 50%; top: 34%; z-index: 2; pointer-events: none;
  font-weight: 700; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
/* the chat's avatar becomes the same face */
.chat-avatar.has-face{ overflow: hidden; background-color: #c9d7f7; background-repeat: no-repeat; }
.chat-avatar.has-face svg{ display: none; }
@media (max-width: 860px){
  .coach-mascot{ width: 128px; height: 128px; margin-right: -6px; }
}
@media (max-width: 420px){
  .coach-head{ grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; margin-bottom: 18px; }
  .coach-mascot{ width: 108px; height: 108px; }
  .coach-mascot-hi{ font-size: 12px; left: auto; right: 6px; max-width: 160px; transform: translateY(6px) scale(.9); transform-origin: 80% 100%; }
  .coach-mascot.is-hi .coach-mascot-hi{ transform: none; }
  .coach-mascot-hi::after{ left: auto; right: 42px; }
}

@media (prefers-reduced-motion: reduce){
  .mascot{ transition: none; }
  .mascot-move{ animation: none; }
  .mascot.is-bashful .mascot-move, .mascot.is-asleep .mascot-move{ transform: none; }
  .js .coach-mascot:not(.is-up) .mascot{ transform: none; opacity: 1; }
}



/* ================= 7. /coach/ and /who-its-for/ ================= */
/* coach: one message, four voices */
.vd-sub{ max-width: 600px; margin-bottom: 48px; }
#try-voice .coach-head{ margin-bottom: 18px; }
.vd-screen{ display: flex; flex-direction: column; padding: 0; height: 420px; min-height: 0; }
.vd-screen .chat-appbar{ padding-top: 22px; }
.vd-thread{ flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; padding: 16px 14px 20px; }
.vd-thread .chat-tone{
  align-self: center; margin-bottom: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t4);
  background: rgba(255,255,255,.05);
}

/* who it's for: preview your app */
.pv-name{
  width: 100%; max-width: 320px; height: 48px; padding: 0 16px; border-radius: 14px;
  font: inherit; font-size: 15px; color: #fff;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.pv-name:focus{ outline: none; border-color: rgb(var(--accent-rgb) / .65); box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .12); }
.pv-name::placeholder{ color: var(--t5); }
.pv-phone .wk-screen{ min-height: 0; padding-bottom: 22px; }
.pv-list .wk-day{ grid-template-columns: 26px minmax(0, 1fr) auto; }
.pv-list .wk-d{ grid-row: auto; font-variant-numeric: tabular-nums; }
.pv-coach{
  margin: 14px 2px 0; padding: 12px 14px; border-radius: 16px 16px 16px 5px;
  background: rgb(var(--accent-rgb) / .08); border: 1px solid rgb(var(--accent-rgb) / .18);
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.pv-coach.is-wait{ opacity: 0; transform: translateY(6px); }
.pv-coach-who{ display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pv-msg{ font-size: 13px; line-height: 1.5; color: var(--t2); }

/* who it's for: audience size */
.size-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.size-card{
  display: grid; gap: 6px; padding: 26px 24px; border-radius: 22px;
  border: 1px solid var(--border-soft);
  background: radial-gradient(80% 100% at 20% 0%, rgb(var(--accent-rgb) / .07), transparent 70%), rgba(255,255,255,.02);
}
.size-aud{ font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--t4); }
.size-share{ margin-top: 6px; font-size: 30px; font-weight: 600; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.size-per{ font-size: 13px; color: var(--accent); }
.size-members{ margin-top: 8px; font-size: 13.5px; color: var(--t3); }
.size-note{ margin-top: 22px; color: var(--t4); font-size: 14px; }
.size-note a{ color: var(--t2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
@media (max-width: 860px){
  .size-grid{ grid-template-columns: minmax(0, 1fr); }
  .size-share{ font-size: 26px; }
  .vd-screen{ height: 400px; }
}


/* ================= 8. shareable results ================= */
.calc-share{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.calc-share .btn{ height: 44px; font-size: 13px; }
.calc-share svg{ width: 15px; height: 15px; margin-right: 7px; }


/* ================= 9. the 404 page ================= */
.lost-head{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: center; }
.lost-head .coach-mascot{ width: 200px; height: 200px; }
.lost-links{ margin-top: 0; }
@media (max-width: 700px){
  .lost-head{ grid-template-columns: minmax(0, 1fr); }
  .lost-head .coach-mascot{ width: 150px; height: 150px; justify-self: center; order: -1; margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce){
}