:root{
  --bg:#f7f8f6;
  --surface:#ffffff;
  --surface-soft:#f0f4f1;
  --text:#17211a;
  --muted:#6b746d;
  --green:#21c86d;
  --green-strong:#0c8f49;
  --line:#dfe6e1;
  --shadow:0 1.125rem 2.5rem rgba(20,42,18,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--bg);
  color:var(--text);
}
.shell{width:min(61.25rem,calc(100% - clamp(1rem,4vw,2rem)));margin:0 auto;padding:clamp(.75rem,3vw,1.5rem) 0 clamp(2rem,8vw,4rem)}
.hero{
  display:flex;
  gap:clamp(.75rem,3vw,1.125rem);
  align-items:center;
  padding:clamp(.875rem,3.5vw,1.25rem);
  border:.0625rem solid var(--line);
  border-radius:clamp(1rem,4vw,1.5rem);
  background:var(--surface);
  box-shadow:var(--shadow);
}
.logo{width:clamp(4.5rem,18vw,5.75rem);aspect-ratio:1;object-fit:contain;border-radius:clamp(1rem,4vw,1.25rem);background:#fff;padding:clamp(.375rem,1.5vw,.5rem);border:.0625rem solid var(--line);flex:0 0 auto}
.eyebrow{margin:0 0 .375rem;color:var(--green-strong);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(.68rem,2.6vw,.75rem)}
h1{margin:0;font-size:clamp(1.7rem,8vw,2.875rem);line-height:1.02;letter-spacing:0}
h2{margin:0;font-size:clamp(1.35rem,5vw,1.625rem)}
.subtitle{margin:.625rem 0 0;color:var(--muted);max-width:38.75rem;line-height:1.45;font-size:clamp(.9rem,3.5vw,1rem)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.5rem,2vw,.625rem);margin:clamp(.75rem,3vw,1rem) 0}
.tab,.primary,.ghost{border:0;border-radius:clamp(.875rem,3vw,1.125rem);padding:clamp(.75rem,3vw,.875rem) clamp(.875rem,4vw,1rem);font-weight:800;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.tab{background:var(--surface);color:var(--muted);border:.0625rem solid var(--line)}
.tab.active{background:var(--text);color:#fff}
.panel{display:none}
.panel.active{display:block;animation:fadeIn .18s ease-out}
.name-card,.month{display:block;background:var(--surface);border:.0625rem solid var(--line);border-radius:clamp(1rem,4vw,1.375rem);padding:clamp(.875rem,3.8vw,1.125rem);margin-bottom:clamp(.75rem,3vw,1rem);box-shadow:0 .625rem 1.625rem rgba(20,42,18,.055)}
.name-card span{display:block;font-weight:800;margin-bottom:.625rem}
input{width:100%;border:.0625rem solid var(--line);border-radius:clamp(.875rem,3vw,1rem);padding:clamp(.875rem,3.8vw,1rem);font-size:clamp(1rem,4vw,1.125rem);background:#fff;color:var(--text);outline:none}
input:focus{border-color:var(--green);box-shadow:0 0 0 .25rem rgba(33,200,109,.14)}
.calendar-stack{display:grid;gap:clamp(.75rem,3vw,1rem)}
.month h3{margin:0 0 clamp(.625rem,3vw,.875rem);font-size:clamp(1.2rem,5vw,1.375rem)}
.grid,.weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(.25rem,1.8vw,.45rem)}
.weekdays{color:var(--muted);font-weight:800;font-size:clamp(.68rem,2.6vw,.75rem);text-align:center;margin-bottom:.5rem}
.day{
  min-height:clamp(2.75rem,12vw,3.625rem);
  border:.0625rem solid var(--line);
  border-radius:clamp(.7rem,3vw,1rem);
  background:#fff;
  color:var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.125rem;
  font-weight:900;
  position:relative;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
  cursor:pointer;
}
.day:hover,.day:focus-visible{transform:translateY(-.0625rem);box-shadow:0 .5rem 1.125rem rgba(20,42,18,.1);outline:none}
.day.empty{visibility:hidden}
.day.selected{background:var(--green);color:#05230f;border-color:transparent;box-shadow:0 .75rem 1.5rem rgba(33,200,109,.22)}
.result-day{background:rgba(33,200,109,var(--availability-alpha));border-color:rgba(12,143,73,.16)}
.result-day .date{font-size:clamp(.86rem,3.4vw,.95rem)}
.ratio{font-size:clamp(.72rem,3vw,.82rem);color:#0c6d39;font-weight:900}
.primary{width:100%;margin-top:clamp(.875rem,3.8vw,1.125rem);background:var(--green);color:#05230f;font-size:clamp(1rem,4vw,1.125rem);box-shadow:0 1rem 1.875rem rgba(33,200,109,.22)}
.ghost{background:#fff;border:.0625rem solid var(--line);color:var(--text)}
.primary:hover,.ghost:hover,.tab:hover{transform:translateY(-.0625rem)}
.results-head{display:flex;justify-content:space-between;gap:clamp(.625rem,3vw,.75rem);align-items:center;margin:.5rem 0 clamp(.75rem,3vw,1rem)}
.results-head p{margin:.3rem 0 0;color:var(--muted)}
.legend{display:grid;grid-template-columns:auto minmax(5rem,1fr) auto;align-items:center;gap:.625rem;margin:0 0 clamp(.75rem,3vw,1rem);color:var(--muted);font-size:clamp(.78rem,3vw,.9rem);font-weight:800}
.scale{height:.75rem;border-radius:999rem;background:linear-gradient(90deg,rgba(33,200,109,0),rgba(33,200,109,.35),rgba(33,200,109,1));border:.0625rem solid var(--line)}
.popover{position:absolute;z-index:5;left:50%;bottom:calc(100% + .5rem);transform:translateX(-50%);background:var(--text);color:#fff;border-radius:.875rem;padding:.625rem .75rem;width:max-content;max-width:min(15rem,78vw);font-size:clamp(.78rem,3vw,.82rem);font-weight:700;line-height:1.35;box-shadow:0 .875rem 1.875rem rgba(0,0,0,.2)}
.toast{position:fixed;z-index:10;left:50%;top:clamp(.75rem,3vw,1.125rem);transform:translate(-50%,-140%);background:var(--text);color:#fff;padding:.75rem 1rem;border-radius:999rem;box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.18);font-weight:800;transition:transform .25s ease;max-width:calc(100% - 1.5rem);text-align:center}
.toast[data-type="error"]{background:#8c1d18}
.toast.show{transform:translate(-50%,0)}
@keyframes fadeIn{from{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:none}}
@media(max-width:38.75rem){
  .hero{align-items:flex-start}
  .results-head{align-items:flex-start;flex-direction:column}
  .ghost{width:100%}
}
@media(max-width:24rem){
  .hero{display:grid;grid-template-columns:auto 1fr}
  .legend{grid-template-columns:1fr}
  .scale{width:100%}
}