/* MyTsmall Designs — FAQ page (page-faq.css)
   Layout: hero left in the 1368 container, two topic groups with a group head
   each; the "cards" are the shared .qa-list accordion (668px centred).
   Every class here is prefixed fq-.                                       */

/* ── hero: h1 left (600 wide), then tag · lead (480, centred) · note right ── */
.fq-hero-grid{display:grid;grid-template-columns:1fr 480px 1fr;column-gap:24px;row-gap:40px;align-items:end}
.fq-hero h1{grid-column:1/-1;max-width:600px;margin:0}
.fq-hero .tag{grid-column:1;justify-self:start;margin:0}
.fq-lead{grid-column:2;max-width:480px;text-align:center;margin-inline:auto}
.fq-note{grid-column:3;justify-self:end;max-width:260px;font:400 14px/22px var(--body);color:var(--fg-3);text-align:right}
.fq-note a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.fq-note a:hover{color:var(--fg)}

/* ── topic groups ──
   Each group keeps the shared 120px top padding but drops the bottom half on
   purpose: hero → group 1 → group 2 → closing box then read as one 120px
   rhythm (120/120 per group would open a 240px hole between the groups).   */
.fq-group{padding-bottom:0}
.fq-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:28px;margin-bottom:48px;border-bottom:1px solid var(--line)}
.fq-head-l{display:grid;gap:8px}
.fq-head-l .tag{justify-self:start;margin:0 0 8px}
.fq-title{font:500 22px/26px var(--sans);letter-spacing:-.01em;color:var(--fg)}
.fq-line{font:400 16px/24px var(--body);color:var(--fg-2);max-width:560px}
.fq-head .pill-dark{flex:none}
.fq-group .qa{scroll-margin-top:110px}
.fq-group .qa p a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* Tap target: the shared .qa puts its 16px padding on <details>, which leaves
   <summary> (the thing you tap) only 32px tall. Here the padding moves onto the
   summary so the whole question row is the target — 62px for a one-line
   question — while the item looks the same (20px above the question, 18px to
   the answer, 24px under it).                                               */
.fq-group .qa{padding:0 16px}
.fq-group .qa summary{padding:20px 0 18px;min-height:62px}
.fq-group .qa p{padding:0 40px 24px 0}

/* ── closing box (the shared .qa-cta, 668 centred) ── */
.fq-end{padding:24px 0 0;position:relative;z-index:1}
.fq-end .qa-cta a{overflow-wrap:anywhere;max-width:100%}   /* the email address never widens the box */

/* ── responsive ── */
@media (max-width:1180px){
  .fq-hero-grid{grid-template-columns:1fr 420px 1fr}
  .fq-lead{max-width:420px}
}
@media (max-width:900px){
  .fq-hero-grid{grid-template-columns:1fr;row-gap:24px;align-items:start}
  .fq-hero h1{margin-bottom:4px}
  .fq-hero .tag{grid-column:auto}
  .fq-lead{grid-column:auto;max-width:520px;text-align:left;margin-inline:0}
  .fq-note{grid-column:auto;justify-self:start;max-width:420px;text-align:left}
  .fq-head{margin-bottom:32px;padding-bottom:24px}
  /* touch targets: the inline "ask us directly" link gets a 44px hit area
     without moving the line (padding cancelled by the negative margin) */
  .fq-note a{display:inline-block;padding:11px 0;margin:-11px 0}
  /* the two closing links become 44px rows, 4px apart (the grid gap) */
  .fq-end .qa-cta a{display:flex;align-items:center;min-height:44px;margin-top:0;justify-self:start}
}
@media (max-width:560px){
  .fq-hero h1{font-size:clamp(36px,11vw,44px);line-height:1.14}   /* 36px at 320 → the shell's 44px from 400 up */
  .fq-head{flex-direction:column;align-items:flex-start;gap:20px}
  .fq-title{font-size:20px;line-height:24px}
  .fq-group .qa p{padding-right:0}            /* full 248px answer column at 320, not 208 */
  .fq-note,.fq-end .qa-cta{font-size:15px;line-height:23px}   /* body copy ≥15px on phones */
}