/* ---- Reconstructed design-system utility classes (external stylesheet unavailable) ---- */
:root{
  --color-neutral-300:#d9d3c7;
  --color-neutral-500:#9d968a;
  --color-neutral-600:#7d766a;
  --color-neutral-700:#5c564c;
  --color-neutral-800:#3f3a32;
  --color-neutral-900:#211d18;
}

.btn{
  display:inline-block;
  border:2px solid var(--color-text);
  background:var(--color-bg);
  color:var(--color-text);
  text-decoration:none;
  cursor:pointer;
  font-family:var(--font-body);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{background:var(--color-accent-100)}

.btn-primary{
  background:var(--color-accent);
  border-color:var(--color-text);
}
.btn-primary:hover{background:var(--color-accent-600);border-color:var(--color-accent-600)}

.btn-secondary{
  background:transparent;
  border-color:var(--color-text);
  color:var(--color-text);
}
.btn-secondary:hover{background:var(--color-text);color:var(--color-bg)}

.btn-block{display:block;width:100%;text-align:center}

.tag{
  display:inline-block;
  border:2px solid var(--color-text);
  background:var(--color-bg);
  color:var(--color-text);
  padding:8px 14px;
}
.tag-accent{
  background:var(--color-accent);
  color:var(--color-text);
  border-color:var(--color-text);
}
.tag-outline{
  background:transparent;
  border:2px solid var(--color-text);
  color:var(--color-text);
  padding:8px 14px;
}

.input{color:var(--color-text)}
.input::placeholder{color:var(--color-neutral-600)}

.card{}

button.btn{font:inherit}

/* radio / option labels used in the trial forms */
label:has(> input[type="radio"]):hover{
  border-color:var(--color-accent-700) !important;
  background:var(--color-accent-100) !important;
}

/* sticky widget option buttons */
[data-show] button[data-val]:hover{
  border-color:var(--color-accent-700) !important;
  background:var(--color-accent-100) !important;
}

details summary:hover{color:var(--color-accent-700)}

/* hide all conditional widget panels until JS decides otherwise, to avoid a flash of every state at once */
[data-show]{display:none}
[data-show="isClosed"]{display:block}

img[data-px]{ backface-visibility:hidden }
@media (prefers-reduced-motion: reduce){
  [data-px],[data-px-fg],[data-reveal]{ transform:none !important; opacity:1 !important; }
}

/* ---------------------------------------------------------------
   Mobile refinements — the original relies mostly on clamp()+flex-wrap,
   which already reflows well. These are the few genuine gaps.
---------------------------------------------------------------- */
@media (max-width:640px){
  header nav[aria-label="Primary"]{ gap:16px }
  section[aria-labelledby="hero-h"] { min-height:min(92vh,680px) !important; padding:64px 0 !important; }
  #book > div{ padding-left:20px !important; padding-right:20px !important; }
  form[name="trial-week"]{ padding:26px 20px !important; }
  .btn{ padding-top:14px !important; padding-bottom:14px !important; }

  /* every section wrapper uses this exact pattern for its horizontal padding */
  [style*="max-width:1240px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  /* header row: logo + nav + CTA competing for space at 40px padding was clipping "Trial week" */
  header .nav-row-wrap,
  header > div{
    padding-left:16px !important;
    padding-right:16px !important;
    gap:10px !important;
  }
  header a[href="#top"] span{ font-size:14px !important; letter-spacing:1.5px !important; }
  header nav[aria-label="Primary"]{ font-size:11px !important; gap:14px !important; }
  header a.btn{ padding:10px 14px !important; font-size:11px !important; }
  .header-contact-sep,.header-contact-addr{ display:none !important; }
}