/* what: "One app for your whole farm." (E2, SPEC 4.2). Every selector starts with #what.
   Pure night, 12-column grid. Statement cols 1-10 (--ink-2, four key phrases in --ink).
   Three question rows, cols 1-4 / 5-8 / 9-12, each with a 1px --hair-2 top rule; stacked under 760. */
/* short top padding (about 48px on a 900px screen): the hero hands over straight into the statement,
   so its first line is on screen right as the hero releases (no dead black beat) */
#what{padding-block:clamp(40px,5.4vh,56px) clamp(104px,15vh,168px)}
#what .what-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
#what .what-in>*{grid-column:1 / -1;min-width:0}

#what .what-eyebrow{color:var(--ink-2);margin-bottom:clamp(20px,3vh,32px)}
#what .what-h{grid-column:1 / span 10;color:var(--ink-2)}
#what .what-h strong{font-weight:inherit;color:var(--ink)}
#what .what-sub{grid-column:1 / span 7;margin-top:clamp(24px,3.6vh,36px);color:var(--ink-2);max-width:62ch}

#what .what-label{margin-top:clamp(72px,11vh,120px);color:var(--ink-2)}
#what .what-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);margin-top:20px}
#what .what-row{min-width:0}
/* the link reaches 12px past its column on both sides so the focus ring has room; the rule stays on the column */
#what .what-link{position:relative;display:flex;flex-direction:column;height:100%;margin-inline:-12px;padding:28px 40px 10px 12px;
  color:var(--ink);text-decoration:none;border-radius:var(--r-btn)}
#what .what-link:focus-visible{outline-offset:-2px}
#what .what-rule{position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--hair-2);transform-origin:0 50%;
  transition:background-color .3s}
/* index, then its 48px glyph right after it on the left */
#what .what-top{display:flex;align-items:flex-end;justify-content:flex-start;gap:20px;margin-bottom:clamp(18px,2.6vh,26px)}
#what .what-idx{color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:2.4ch;padding-bottom:3px}
#what .what-glyph{width:48px;height:48px;flex:none;overflow:visible;color:var(--ink-2)}
#what .what-q{color:var(--ink)}
#what .what-a{margin-top:10px;color:var(--ink-2);max-width:34ch}
#what .what-see{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:22px;color:var(--ink)}
#what .what-see svg{width:18px;height:18px;flex:none;transition:transform .35s var(--ease-out)}
#what .what-link:hover .what-see svg,#what .what-link:focus-visible .what-see svg{transform:translateX(4px)}
#what .what-link:hover .what-rule{background:var(--ink-3)}

/* glyph strokes: 1.5px --ink-2 at 48px; amber = "you", lime = the top fields */
#what .what-glyph .g-line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
#what .what-glyph .g1-ln{stroke:var(--ink-3);stroke-linecap:round}
#what .what-glyph .g-fill{fill:currentColor}
#what .what-glyph .g2-base{fill:none;stroke:var(--hair-2);stroke-width:1.5}
#what .what-glyph .g2-you{fill:var(--amber)}
#what .what-glyph .g2-top{fill:none;stroke:var(--lime);stroke-width:2}
#what .what-glyph .g3-road{fill:none;stroke:var(--ink-3);stroke-width:1.5}
#what .what-glyph .g3-dest{fill:none;stroke:var(--ink);stroke-width:1.5}
#what .what-glyph .g3-dest .g3-dot{fill:var(--ink);stroke:none}

@media (max-width:1099px){
  #what .what-h{grid-column:1 / -1}
  #what .what-sub{grid-column:1 / span 10}
  #what .what-link{padding-right:28px}
}
/* phones: rows stacked with 32px between them. "See it" moves up beside the index and glyph
   (the top line's empty right side), so each row is three lines: glyph line, question, answer.
   The bottom padding follows the page's phone --sec-pad (base.css). */
@media (max-width:759px){
  #what{padding-bottom:var(--sec-pad)}
  #what .what-h{font-size:clamp(1.6rem,7vw,2.2rem);line-height:1.16}
  #what .what-sub{grid-column:1 / -1}
  #what .what-label{margin-top:48px}
  /* 8px link padding + 24px row gap = 32px from one answer to the next rule (the padding keeps the
     focus ring off the answer's last line) */
  #what .what-rows{grid-template-columns:minmax(0,1fr);row-gap:24px;margin-top:16px}
  #what .what-link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:16px;
    padding:22px 12px 8px}
  #what .what-top{grid-column:1;grid-row:1;margin-bottom:14px}
  #what .what-see{grid-column:2;grid-row:1;align-self:end;margin:0 0 14px;padding:0 0 3px}
  #what .what-q{grid-column:1 / -1;grid-row:2}
  #what .what-a{grid-column:1 / -1;grid-row:3;margin-top:8px;max-width:none}
}