/* need-strip ("What do you need help with?") — SINGLE SOURCE. tools/build-needstrip.py writes
   this file and the section markup from needstrip.json into a marked "GENERATED needstrip"
   region of every consumer; the copy in a page is never edited by hand.

   Card anatomy (compact-media-top, 2026-09-06 · CTA row removed 2026-09-07): media strip (136px) · title with the arrow inline (the link affordance) · description.
   Until today the tile was a tall 3/5 poster with the title above an empty rect, the photo low and a
   translucent 'LEARN MORE' pill over it (the owner: too tall, too much unused space, generic CTA). The <img> is the only
   layer that carries a filter; .needstrip-tile-media::after is a pointer-transparent veil.
   Dark is the base (every page's :root is dark); light hangs off :root[data-theme="light"],
   the hook the generated theme layer uses. Per-tile focal position comes from data as a
   [data-tile] rule the generator writes — never from :nth-child. */

.needstrip { padding: 96px 0 88px; border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(120,140,150,.03), transparent); }
.needstrip .wrap { max-width: 1240px; }
.needstrip .sec-head { max-width: 720px; margin-bottom: 40px; }
.needstrip .sec-head h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; margin: 0 0 12px; color: var(--text); }
.needstrip .sec-head p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.needstrip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; --needstrip-media-h: 136px; }
/* compact-media-top card (2026-09-06, CTA row removed 2026-09-07 — it repeated the title): media strip · title + arrow · description. Normal flex column, no reserved
   media rect, no overlay pill — the whole card is the link (ctaAccessibleLabel is its accessible name); the title carries the arrow, last word + arrow never wrap apart. */
.needstrip-tile { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; background: var(--surface); transition: border-color .22s, box-shadow .22s; }
.needstrip-tile:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
:root[data-theme="light"] .needstrip-tile:hover { box-shadow: 0 10px 26px rgba(20,24,27,.08); }
.needstrip-tile:focus-visible { outline: 2px solid var(--focus-ring, var(--mineral)); outline-offset: 3px; }
.needstrip-tile-media { position: relative; height: var(--needstrip-media-h); flex: 0 0 auto; overflow: hidden; isolation: isolate; background: var(--bg-2, var(--surface)); }
.needstrip-tile-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8,10,11,.02) 0%, rgba(8,10,11,.14) 100%); }
.needstrip-tile-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--tile-pos, center center); filter: saturate(0.62) contrast(0.9) brightness(0.74); }
:root[data-theme="light"] .needstrip-tile-media::after { background: linear-gradient(180deg, rgba(248,246,239,.02) 0%, rgba(248,246,239,.10) 100%); }
:root[data-theme="light"] .needstrip-tile-img { filter: saturate(0.72) contrast(0.93) brightness(1.02); }
.needstrip-tile-q { padding: 18px 20px 0; font-size: 17px; font-weight: 500; letter-spacing: -.012em; line-height: 1.25; color: var(--text); }
.needstrip-tile-desc { margin: 8px 0 0; padding: 0 20px 20px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.needstrip-tile-q:last-child { padding-bottom: 20px; }
.needstrip-tile-q-end { white-space: nowrap; }
.needstrip-tile-q svg { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; transition: transform .2s; }
.needstrip-tile:hover .needstrip-tile-q { text-decoration: underline; text-underline-offset: 3px; }
.needstrip-tile:hover .needstrip-tile-q svg { transform: translateX(2px); }
.needstrip-tile--text .needstrip-tile-q { padding-top: 22px; }
@media (max-width: 900px) { .needstrip-grid { grid-template-columns: repeat(2, 1fr); --needstrip-media-h: 140px; } }
@media (max-width: 540px) { .needstrip-grid { grid-template-columns: 1fr; gap: 12px; --needstrip-media-h: 150px; } .needstrip-tile-q { padding: 16px 18px 0; } .needstrip-tile-desc { padding: 0 18px 18px; } .needstrip-tile-q:last-child { padding-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .needstrip-tile, .needstrip-tile-q svg { transition: none; } .needstrip-tile:hover .needstrip-tile-q svg { transform: none; } }