/* MyTsmall Designs — start.html only (page-start.css)
   Hero → booking panel (static calendar + WhatsApp slots) → "write to us"
   → FAQ. Every class is prefixed st-; tokens and breakpoints from site.css.
   Phone rules (≤900 / ≤560 / ≤360) live at the bottom: 44px tap targets,
   clamp() headings, a 7-column month grid that keeps ≥40px cells at 320. */

/* ── hero ── */
.st-hero h1{max-width:800px;margin-inline:auto}
.st-hero .ph-sub{max-width:560px}
.st-hero .a-rise{display:block}

/* ── booking panel ──
   Deliberate 64px top (not the 120px section rhythm): on the reference the
   booking panel sits directly under the hero sub-line as part of the same
   composition, so the panel stays visually attached to its heading. */
.st-book-sec{position:relative;z-index:1;padding:64px 0 var(--sec)}
.st-book{width:min(1200px,100% - var(--gut) * 2);margin-inline:auto;display:grid;grid-template-columns:1fr 340px;overflow:hidden}
.st-cal-wrap{padding:42px;border-right:1px solid var(--line)}
.st-who{margin-bottom:36px}
.st-who .person{grid-column:auto}
.st-cal-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.st-cal-h{font:500 22px/26px var(--sans);color:var(--fg)}
.st-cal{width:100%;border-collapse:collapse;table-layout:fixed}
.st-cal th{padding:0 0 12px;text-align:center;font:500 12px/18px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.st-cal abbr{text-decoration:none;border:0;cursor:default}
.st-cal td{padding:3px;text-align:center;vertical-align:middle}
.st-cal .st-pad{background:transparent}
.st-day{display:grid;place-items:center;width:min(48px,100%);aspect-ratio:1;margin-inline:auto;border-radius:50%;font:500 15px/1 var(--body);color:var(--fg);transition:background .3s}
.st-wknd .st-day{color:#5c5c5c}
.st-past{color:#6a6a6a}
.st-today{background:var(--fg);color:#080808;font-weight:700}
.st-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:400 13px/18px var(--body);color:var(--fg-3)}
.st-legend li{display:inline-flex;align-items:center;gap:8px}
.st-dot{width:10px;height:10px;border-radius:50%;flex:none}
.st-dot-today{background:var(--fg)}
.st-dot-wknd{background:#3a3a3a}
.st-slots{padding:42px 36px;display:grid;align-content:start;gap:8px;background:var(--card-2)}
.st-slots-h{font:500 22px/26px var(--sans);color:var(--fg)}
.st-slots-sub{font:400 14px/20px var(--body);color:var(--fg-2);margin-bottom:12px}
.st-slot-list{display:grid;gap:8px}
.st-slot-list .pill-dark{width:100%;padding:0 16px 0 20px}
.st-slot-list .pill-dark .arr{margin-left:auto}
.st-note{width:min(1200px,100% - var(--gut) * 2);margin:20px auto 0;text-align:center;font:400 16px/24px var(--body);color:var(--fg-2)}
.st-note a{color:var(--fg)}
.st-note a:hover{color:var(--fg-2)}

/* ── write to us ── */
.st-write,.st-faq{scroll-margin-top:72px}
.st-write-l{display:grid;gap:24px;justify-items:start;align-content:start}
.st-write-l h2{max-width:560px}
.st-write-p{font:400 16px/24px var(--body);color:var(--fg-2);max-width:440px}
.st-direct{display:grid;gap:14px;justify-items:start;margin-top:16px;padding-top:32px;border-top:1px solid var(--line);width:100%}
.st-k{font:500 14px/18px var(--sans);color:var(--fg-2)}
.st-mail{display:inline-flex;align-items:center;gap:14px;font:400 34px/41px var(--sans);letter-spacing:-.05em;color:var(--fg);max-width:100%;overflow-wrap:anywhere}
.st-mail .spark{width:16px;height:16px}
.st-mail:hover{color:var(--fg-2)}
.st-tel{font:400 16px/24px var(--body);color:var(--fg-2)}
.st-tel:hover{color:var(--fg)}

/* ── faq ── */
/* .st-faq takes the shared .sec rhythm (120px top and bottom); no override. */

/* ── responsive ── */
@media (max-width:1180px){
  .st-book{grid-template-columns:1fr 300px}
  .st-cal-wrap{padding:32px}
  .st-slots{padding:32px 28px}
}
@media (max-width:900px){
  .st-book{grid-template-columns:1fr}
  .st-cal-wrap{border-right:0;border-bottom:1px solid var(--line)}
  .st-slot-list{grid-template-columns:1fr 1fr}
  .st-direct{margin-top:8px;padding-top:24px;gap:8px}
  /* touch: every plain-text link becomes a 44px target without moving the text.
     .st-mail / .st-tel grow to 44px boxes (8px gap keeps them apart); the
     inline phone link in .st-note pads out and pulls the padding back with a
     negative margin so the line box stays 24px. */
  .st-mail,.st-tel{display:inline-flex;align-items:center;min-height:44px}
  .st-note a{display:inline-block;padding:10px 0;margin:-10px 0}
  /* FAQ accordion: move 6px of the <details> padding into the <summary> so the
     tappable summary is 44px while each closed row stays 64px tall. */
  .st-faq .qa{padding:10px 16px}
  .st-faq .qa summary{min-height:44px}
  .st-faq .qa p{padding-bottom:14px}
  .st-faq .qa-cta a{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
}
@media (max-width:560px){
  .st-book{--st-pad:16px}
  .st-book-sec{padding-top:48px}
  /* headings scale with the viewport: 34→44px h1, 30→38px h2 across 320–430 */
  .st-hero h1{font-size:clamp(34px,10.5vw,44px);line-height:1.14}
  .st-write-l h2,.st-faq .shead h2{font-size:clamp(30px,9.5vw,38px);line-height:1.2}
  .st-faq .shead{margin-bottom:40px}
  .st-cal-wrap,.st-slots{padding:24px var(--st-pad)}
  .st-who{margin-bottom:24px}
  .st-cal-top{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:16px}
  .st-cal th{padding-bottom:8px}
  .st-cal td{padding:2px}
  .st-day{width:min(44px,100%)}
  .st-legend{gap:6px 16px;margin-top:16px}
  .st-slots-h{font-size:20px;line-height:26px}
  .st-slot-list{grid-template-columns:1fr}
  /* the email must fit one line in a 280px column at 320: 19px there, 22px from ~367px */
  .st-mail{font-size:clamp(18px,6vw,22px);line-height:1.3;gap:10px}
  .st-mail .spark{width:14px;height:14px}
  .st-faq .qa p{padding-right:8px}
}
@media (max-width:360px){
  /* 7 columns × 40px needs the full 280px card at 320: the month grid runs
     edge to edge of the panel (the card's overflow:hidden clips the corners). */
  .st-cal{width:calc(100% + var(--st-pad) * 2);margin-inline:calc(var(--st-pad) * -1)}
}