/* site.css — tenean.com between a phone and a desk.
 *
 * Phil's review of the site (2026-10-03, nineteen issues; Peter: "fix all"). phone.css speaks under 720px.
 * This sheet covers the widths it does not: an iPad held either way, a phone held sideways, and the small
 * laptop. ONE FILE, EVERY PAGE, LOADED LAST. Nothing here changes a word, a number or a picture.
 */

/* The diagnostic sits in the folded menu, above the booking button (Phil #18). On a desk it has its own
   section on the home page and a line in the footer; the header row has no room for a sixth word. */
.mdiag,.askhead{display:none}
@media (max-width:1023px){
  nav.site .links .mdiag{display:block}
}

/* Ask has a fixed home between a phone and a desk (Phil #16). The floating chip sat over the Services
   card's words on a phone held sideways (844 x 390). From 721 to 1023px it is a button in the header,
   beside Book and Menu; under 720 it is in the booking bar (phone.css); on a desk it floats as before. */
@media (min-width:721px) and (max-width:1023px){
  .askchip{display:none !important}
  nav.site .navright .askhead{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;
    border:1.5px solid var(--coral);background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap}
  nav.site .navright{gap:8px}
}

/* An iPad held sideways is 1,024px. The header folded into "Menu" until 1,080, so an iPad got the phone
   menu and a narrow hero card with the headline over four lines (Phil #17). The header now folds at 1,023;
   from 1,024 to 1,180 its gaps close a little so the whole row fits, and the hero's two halves are nearer
   equal so the headline has room. */
@media (min-width:1024px) and (max-width:1180px){
  nav.site .links{gap:18px}
  nav.site .links .navcta{padding-left:18px;padding-right:18px}
  .ds-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
}

/* The hero's reassurance line, second copy (index.artifact.html): under the product, on a phone only
   (Phil #11). Every other width keeps the line inside the dark panel. */
.hint-under{display:none}
@media (max-width:720px){
  .hint-under{display:block;margin:12px 20px 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
}