/* ---- T1 · hero: the words on the left, the film on the right (E12a) ------
   Built as home's: the headline, the line under it, then Download for Mac
   and the other tool's link, stacked, in the left column; the film in the
   right one, the keys typing under it. Narrower than 1280 the two stack,
   the words first, as home's do. */
.thero{padding:clamp(28px,3.4vw,44px) 0 clamp(52px,6vw,88px)}
.tsplit{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,3.4vw,48px);align-items:start}
.tcopy{display:flex;flex-direction:column;gap:24px;padding-top:4px}
/* optical alignment, as home's (hero.css): F's stem hangs its side bearing */
.thero .h1{margin-left:-.075em}
/* E19, F7, G33: "Flying through spreadsheets. Now made easy" keeps its
   highlighter on one line, 7.8 em with its padding at 100% stretch, so the headline is
   sized by its own column (cqi), never wider than it: by the screen it ran
   under the film at 1440 and off a 360 px phone. At 100%, the widest the
   column allows (about 57 px at 1440); the film cannot give up width, its
   words are at their 10 px floor */
.tcopy{container-type:inline-size}
/* G16: and never under the page's h2 (site.css's .h2 size, repeated here),
   which the wider column below leaves room for */
/* the website review (S1): WebKit's balanced wrap split "Now made easy" over
   two lines from 600 to 1279 */
.thero .h1 .hl{white-space:nowrap}
.thero .h1{font-stretch:100%;word-spacing:.06em;font-size:max(min(clamp(44px,6.9vw,100px),12.5cqi),clamp(36px,4.5vw,66px))}
.tcopy .line{font-size:clamp(18px,1.36vw,20px)}
.tcopy .ctas{margin-top:28px;flex-direction:column;align-items:flex-start;gap:18px}
.tfilm{position:relative}
.tf-inner{position:relative}
/* G16: beside the words, the sheet sits over the pane, where the Tracer
   floats; it was 72 px to the left of it (page.css's 712), and those
   72 px go to the words. G34 (the user, 2026-10-14): not exactly over it,
   but 32 px to its left, nearer the words. The pane gives the 32 px, out
   past the column's edge: the words keep their width (480 px at least, and
   the headline on one highlighter) and the film its 10 px words. The sheet
   keeps the pane's 640, so Excel stays framed short of its title (the
   website review found the title cut at 1280 × 800); a short screen scales
   the scene in place (hero.js, fit's keep), and the gap is 36 px */
@media (min-width:1280px){.thero .scene{width:640px}.thero .sc-pane{right:-32px}.tsplit{column-gap:36px}}
@media (max-width:1279px){
  .tsplit{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .tcopy .ctas{flex-direction:row;align-items:center}
}