/* pages-g1.css: home page only (group g1 page build, 2026-09-29). Loaded after shared/site.css on index.html.
   Brand: lime / black / white only, from the shared tokens (no new hex). Every rule here is home-specific; nothing in
   this file is a copy of a shared part. Sources per rule are in handoffs/draft4/BUILD-LOG-g1.md. */

[data-intent-only][hidden], .g1-fork [hidden] { display: none !important; }

/* ---------- 1. Routing boxes inside the hero (PAGE-FIXES home 3, 19; RESOLVED home 3, 19) ----------
   The box name is the heading (24px, sentence case) and the job-led hook sits under it at 18px, so a scanner reads
   three services, not three questions (WD-11 step 1). The ghost pill becomes a text action with a lime arrow disc
   (WD-23 NEVER 1: no ghost primary). The ITAD box is the lead door: the only box with a filled button, drawn in ink so
   the hero keeps its one lime button per view (TEMPLATE-NOTES §5). */
.door2__body { padding: 26px 28px 24px; }
.door2__label { font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.door2__hook { margin-top: 14px; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); font-weight: 600; letter-spacing: -0.005em; line-height: 1.35; }
.door2__desc { margin-top: 6px; margin-bottom: 20px; }
.door2__cta { gap: 12px; padding: 0; min-height: 44px; border: 0; border-radius: 0; font-size: 1rem;
  text-decoration: none; background: none; }
.door2__arrow { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  background: var(--lime); color: var(--ink); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.door2__arrow svg { width: 16px; height: 16px; }
.door2__cta svg { transition: none; }
/* the shared :hover pill and svg nudge are cancelled on every device (so a tap never leaves a stuck hover on phones);
   the one hover effect this page adds, the arrow nudge, runs only where a pointer can hover (X18) */
.door2:hover .door2__cta { background: none; color: var(--ink); }
.door2:hover .door2__cta svg { transform: none; }
@media (hover: hover) { .door2:hover .door2__arrow { transform: translateX(4px); } }
/* Buy box: the bulk quote is the card link; one-device shop and live sit as two quiet text links above it, lifted over
   the card's stretched link so each stays its own tap target (44px, WD-10) (Tom GO 2026-09-29: individuals + 3 routes) */
.door2__alt { display: flex; flex-wrap: wrap; gap: 0 20px; margin: -8px 0 8px; }
.door2__alt a { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.door2__alt a:hover { text-decoration-color: var(--ink); }
.door2__alt a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 63.99rem) {
  .door2__body { padding: 22px 22px 20px; }
}
/* Three across (Tom, 2026-09-30): heading, who line, proof line and button share one row track across all three
   cards, so the rows sit level whatever each heading wraps to at that width. Browsers without subgrid keep the
   stacked flex layout above. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 64rem) {
    .hx__doors { row-gap: 0; }
    .door2, .door2__body { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
    .door2__cta { align-self: end; justify-self: start; }
  }
}

/* ---------- 2. Award row: optical balance (PAGE-FIXES home 6 design part; design.md home 4) ----------
   Tom's row stays (line left, 4 colour logos right, no years: RESOLVED X9). Heights follow each logo's shape so the
   round seals, the wide wordmark and the square badge carry equal weight.
   Tom, 2026-09-30: three logos (Smart 50 off), clustered left beside the line, each named in text underneath so the
   award reads without decoding the badge (and is visible text, not only an image). The caption is the accessible
   name, so the images carry empty alt. Logos sit centred in a fixed-height box so the captions share one baseline. */
.hx__logos .hx__logo { display: grid; grid-template-rows: 48px auto; justify-items: center; align-items: center; row-gap: 8px; }
.hx__logo-cap { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--text-2); text-align: center; }
/* Tom, 2026-09-30 (his reference: a full-bleed white-to-lime wash behind a logo strip): the wash runs edge to edge of
   the page, heaviest at the bottom right and almost gone by the logos. The row's content keeps its card alignment; a
   pseudo-element reaches out over .hx's side padding (var(--inset)) to the page edges. No new colour: tints are
   var(--lime) mixed into white. */
.hx__trust { position: relative; isolation: isolate; }
/* Tom 2026-10-01: one light-green surface, not two in a row. The lifecycle circle keeps its tint; the logo wash is off. */
.hx__trust { padding-bottom: 0 !important; }
.hx__trust::before { display: none; content: ""; position: absolute; z-index: -1; inset: 0 calc(-1 * var(--inset));
  background: radial-gradient(130% 160% at 100% 100%, color-mix(in srgb, var(--lime) 55%, #fff) 0%,
    color-mix(in srgb, var(--lime) 22%, #fff) 40%, #fff 78%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%); mask-image: linear-gradient(to bottom, transparent 0%, #000 45%); }
/* The badge files carry white mattes; multiply drops the white into the wash so no white boxes show. */
.hx__logos img { mix-blend-mode: multiply; }
.hx__logos { gap: 12px 16px; }
.hx__logo-cap { font-size: 0.75rem; }
@media (min-width: 64rem) {
  .hx__logos { justify-content: flex-start; gap: 0 96px; }
  .hx__logos .hx__logo { grid-template-rows: 90px auto; row-gap: 10px; }
  .hx__logos .hx__logo--round img { height: 90px; }
  .hx__logos .hx__logo--wide img { height: 72px; }
  .hx__logos .hx__logo--square img { height: 84px; }
  .hx__logo-cap { font-size: 0.875rem; }
}
@media (min-width: 64rem) and (max-width: 84.99rem) { .hx__logos { gap: 0 72px; } }
/* Tom 2026-10-01: router cards get "the slightest backdrop of the light green, like a gradient shadow". */
/* Then "thinner... should barely show... all the way around": an even, faint glow on every side (Tom's brief wins over
   the offset-shadow default), plus the existing hairline. */
.hx__doors .door2 { box-shadow: 0 0 0 1px rgb(142 198 63 / 0.18), 0 0 16px 0 rgb(142 198 63 / 0.22), inset 0 0 0 1px rgb(18 19 17 / 0.05); }
.hx__doors .door2:hover { box-shadow: 0 0 0 1px rgb(142 198 63 / 0.3), 0 0 22px 2px rgb(142 198 63 / 0.32), inset 0 0 0 2px var(--lime); }
/* Tom 2026-10-01 ("centered better"): with the wash gone, the row reads as one unit, so centre it under the cards. */
@media (min-width: 64rem) {
  .hx__trust { grid-template-columns: auto auto; justify-content: center; column-gap: var(--s16); padding-inline: var(--s6); }
}
/* Spacing (Tom, 2026-09-30: "use best practices for buffers"). WD-11.4: 8px scale, spaced outside-in, and proximity:
   the award row belongs to the hero, so it sits closer to the router above than a full section gap (--section-y,
   112px desktop). Wash padding carries the row's own air; the proof band below starts a new block at --s12.
   Desktop: links -> wash 32, wash padding 48, wash -> proof band 48. Phone: 24 / 32 / 32. */
.hx__trust { margin-top: var(--s6); padding-block: var(--s8); }
@media (min-width: 64rem) { .hx__trust { margin-top: var(--s8); padding-block: var(--s12); } }

/* ---------- 3. Journey: recycling as a branch off stop 2 (PAGE-FIXES home 14; design.md home 7) ---------- */
.track__branch { display: grid; justify-items: center; margin-top: var(--s4); }
.track__branch-line { display: none; }
.track__exit { margin-top: 0; display: inline-flex; align-items: center; gap: 10px 12px; padding: 12px 20px 12px 14px;
  border: 1px solid var(--hairline-dark); border-radius: 999px; background: rgb(255 255 255 / 0.04); text-align: left; }
.track__exit-ico { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: rgb(142 198 63 / 0.16); color: var(--lime); }
.track__exit-ico svg { width: 18px; height: 18px; }
@media (min-width: 64rem) {
  /* the branch hangs from the middle stop: a short lime rule down from stop 2, then the recycled card */
  .track__branch { margin-top: 0; }
  .track__branch-line { display: block; width: 2px; height: 28px; background: linear-gradient(var(--lime), rgb(142 198 63 / 0.2)); }
  .stop { grid-template-rows: auto auto 1fr; }
}
@media (max-width: 47.99rem) {
  .track__exit { border-radius: 20px; flex-wrap: wrap; }
}

/* ---------- 4. Security band: forwarding line for the approver (PAGE-FIXES home 11) ---------- */
.security__actions { gap: var(--s4); }
.g1-forward { color: var(--text-2); line-height: 1.5; }
.g1-forward .textlink { display: inline; color: var(--ink); padding-block: 10px; }
@media (min-width: 64rem) { .security__actions { align-self: start; } }

/* ---------- 5. Buying band (PAGE-FIXES home 7, 8, 12, 15; design.md home 5, 8, 9; X16) ----------
   Heading, then two full halves: left the graded-stock photo with the customer quote set over its foot; right the
   four proof rows, the quote button and the "who are you buying for" doors. Neither half is left near-empty. */
.g1-buy { padding-top: var(--section-y); }
.g1-buy__head { display: grid; gap: var(--s3); max-width: 46rem; margin-bottom: var(--s8); }
.g1-buy__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); }
.g1-buy__grid { display: grid; gap: var(--s8); }
.g1-buy__media { display: grid; gap: 0; }
.g1-buy__photo { display: block; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: var(--ink); }
.g1-buy__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.g1-quote { background: var(--ink); color: var(--on-dark); border-radius: 0 0 var(--r-card) var(--r-card); padding: var(--s6) var(--s6) var(--s8); }
.g1-quote__text { font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.g1-quote__who { margin-top: var(--s4); display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--lime); }
.g1-quote__who::before { content: ""; width: 24px; height: 2px; background: var(--lime); }
.g1-buy__side { display: grid; gap: var(--s6); align-content: start; }
.g1-buy__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 36rem; }
.g1-proof { border-top: 1px solid var(--hairline); }
.g1-proof__row { display: grid; gap: 4px; padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.g1-proof dt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; }
.g1-proof dt::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); }
.g1-proof dd { color: var(--text-2); line-height: 1.55; }
.g1-buy__cta .btn { min-width: 12rem; }
.g1-fork { display: grid; gap: var(--s3); padding: var(--s6); border-radius: 24px; background: var(--floor); }
.g1-fork__q { font-size: 1.1875rem; line-height: 1.3; font-weight: 600; }
.g1-fork__list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.g1-fork__list a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-weight: 600; text-decoration: none; color: var(--ink);
  transition: box-shadow var(--dur) var(--ease); }
.g1-fork__list a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .g1-fork__list a:hover { box-shadow: inset 0 0 0 2px var(--lime); } }
.g1-fork__one { color: var(--text-2); }
.g1-fork__one .textlink { display: inline; color: var(--ink); padding-block: 10px; }
@media (max-width: 47.99rem) { .g1-buy__cta .btn { width: 100%; } }
/* tablet: photo and quote side by side, so the 529px photo is never stretched across a 720px column */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .g1-buy__media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g1-buy__photo { border-radius: var(--r-card) 0 0 var(--r-card); }
  .g1-buy__photo img { height: 100%; aspect-ratio: auto; }
  .g1-quote { border-radius: 0 var(--r-card) var(--r-card) 0; display: grid; align-content: center; }
}
@media (min-width: 64rem) {
  .g1-buy__head { margin-bottom: var(--s10); }
  .g1-buy__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s12); align-items: stretch; }
  /* the quote card sizes to its words; the photo (1400px source, 1x/2x) takes the rest of the column height, so
     both halves still end on the same line with no empty ink around the quote */
  .g1-buy__media { grid-template-rows: minmax(0, 1fr) auto; }
  .g1-buy__photo { min-height: 18rem; }
  .g1-buy__photo img { height: 100%; aspect-ratio: auto; }
  .g1-quote { padding: var(--s10); }
  .g1-quote__text { font-size: clamp(1.5rem, 0.9rem + 1vw, 2rem); line-height: 1.3; }
}

/* ---------- 6. Where devices go: statement left, the 35,000+ numeral right (PAGE-FIXES home 9; X16, X22) ---------- */
.g1-equity { padding-top: var(--section-y); }
.g1-equity__band { display: grid; gap: var(--s8); margin-inline: var(--gutter); padding: var(--s10) var(--s6);
  border-radius: var(--r-card); color: var(--on-dark);
  background: radial-gradient(120% 90% at 50% 100%, var(--ink-3) 0%, var(--ink) 62%); }
.g1-equity__text { display: grid; gap: var(--s5); align-content: start; }
.g1-equity__text .h2 { max-width: 20ch; }
.g1-equity__answer { font-size: var(--fs-lead); line-height: 1.55; color: var(--on-ink-2); max-width: 36rem; }
.g1-equity__voice { font-size: var(--fs-h3); line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; max-width: 30rem; }
.g1-equity__push { color: var(--lime); white-space: nowrap; }
.g1-equity__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s2); }
.g1-equity__link { color: var(--on-dark); display: inline; padding-block: 10px; }
.g1-equity__band :where(a, button):focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime); outline: none; }
.g1-stat { display: grid; align-content: center; align-self: center; padding: var(--s8); border-radius: 28px; background: var(--lime); color: var(--ink); }
.g1-stat__fact { display: grid; gap: var(--s3); }
.g1-stat__num { font-size: clamp(3.25rem, 2.4rem + 3vw, 5rem); line-height: 0.95; font-weight: 600; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; }
.g1-stat__label { font-size: var(--fs-lead); line-height: 1.4; font-weight: 600; max-width: 18rem; }
.g1-equity__foot { padding-top: var(--s6); border-top: 1px solid var(--hairline-dark); color: var(--on-ink-2); }
.g1-equity__foot .textlink { color: var(--on-dark); }
.g1-equity__band > * { min-width: 0; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  /* 768: the lime block holds its own width instead of spanning a half-empty slab */
  .g1-stat { justify-self: start; width: 100%; max-width: 24rem; }
}
@media (max-width: 47.99rem) { .g1-equity__actions .btn { width: 100%; } }
@media (min-width: 48rem) { .g1-equity__band { margin-inline: var(--s3); padding: var(--s16) var(--s12); } }
@media (min-width: 64rem) {
  .g1-equity__band { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s12); row-gap: var(--s10);
    max-width: var(--wide); margin-inline: max(var(--s3), (100% - var(--wide)) / 2); padding: var(--s16); border-radius: var(--r-band); }
  .g1-stat { padding: var(--s10); }
  .g1-equity__foot { grid-column: 1 / -1; }
}
@media (min-width: 73.5rem) { .g1-equity__band { margin-inline: auto; } }

/* ---------- 7. FAQ head: the heading column carries a way to ask what isn't listed (fills the empty left column) ---------- */
.g1-faq__head { display: grid; gap: var(--s4); align-content: start; }
.g1-faq__aside { color: var(--text-2); line-height: 1.55; max-width: 24rem; }
.g1-faq__aside .textlink { display: inline; color: var(--ink); padding-block: 10px; white-space: nowrap; }
@media (min-width: 64rem) {
  .faq__grid > .g1-faq__head { position: sticky; top: calc(var(--header-h) + var(--s8)); }
}

/* ---------- 8. Contact card: the low-commitment next step (PAGE-FIXES home 13; TURN10 turn 9 secondary offer) ---------- */
.g1-panel__next > span { display: block; }
.g1-panel__next { margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--hairline-dark); color: var(--on-ink-2); line-height: 1.5; }
.g1-panel__next .textlink { display: inline; color: var(--on-dark); padding-block: 10px; }

/* ======================= v2 content pass (2026-09-29, BUILD-LOG-v2-g1.md) ======================= */

/* ---------- 9. Journey stops carry one line of what happens there (live /recycle-and-refurbish/ depth) ---------- */
.stop { grid-template-areas: "photo label" "photo text" "photo pin"; }
.stop__text { grid-area: text; color: var(--on-ink-2); line-height: 1.5; max-width: 34ch; }
@media (min-width: 64rem) {
  .stop { grid-template-areas: "photo" "label" "text" "pin"; grid-template-rows: auto auto auto 1fr; }
  .stop__text { padding-inline: var(--s4); }
  .stop__pin { align-self: end; }
}
.track__exit-link { color: var(--on-dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime);
  text-decoration-thickness: 2px; text-underline-offset: 0.25em; display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 10. How free ITAD pickup works + what we take (live ITAD/recycle depth; Anthony itad.html steps) ----------
   Steps left, the accepted-equipment list right on the lime tint: two full halves at 1024+ (X16). */
.g1-how { padding-top: var(--section-y); }
.g1-how__grid { display: grid; gap: var(--s10); }
.g1-how__main { display: grid; gap: var(--s6); align-content: start; }
.g1-how__steps { margin-top: var(--s2); }
.g1-how__cta .btn { min-width: 12rem; }
.g1-take { align-self: start; display: grid; gap: var(--s4); padding: var(--s8) var(--s6); border-radius: var(--r-card); background: var(--floor); }
.g1-take__title { font-size: var(--fs-h3); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.g1-take__lead { color: var(--text-2); line-height: 1.5; }
.g1-take__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s4); gap: 0 var(--s4); margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--hairline); }
.g1-take__list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 8px;
  border-bottom: 1px solid var(--hairline); font-weight: 600; line-height: 1.3; }
.g1-take__list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.g1-take__note { color: var(--text-2); line-height: 1.5; }
@media (min-width: 30rem) { .g1-take__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); } }
@media (max-width: 47.99rem) { .g1-how__cta .btn { width: 100%; } }
@media (min-width: 64rem) {
  .g1-how__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s16); align-items: start; }
  .g1-take { padding: var(--s10); }
}

/* ---------- 11. Security band: its button moved up into the pickup steps, so the text and the forwarding line sit
   together, centred against the spec card instead of leaving a gap between them (X16) ---------- */
@media (min-width: 64rem) {
  .security__grid { row-gap: var(--s5); }
  .security__text { align-self: end; }
  .security__actions { align-self: start; }
}

/* ---------- 12. Equity voice line is now two sentences: the lime half may wrap ---------- */
.g1-equity__push { white-space: normal; }
.g1-equity__voice { max-width: 34rem; }

/* ======================= v2 round 2 (2026-09-29, grade v2-g1-r1 corrections) ======================= */

/* ---------- 13. Buying photo carries a proof caption (Anthony index.html:355 pattern; grade gap 5) ----------
   The figure takes over the photo's frame (radius, ink fill, column height); the caption sits on an ink scrim at the
   photo's foot so it reads as part of the evidence, not as a stray line between photo and quote. */
.g1-buy__fig { position: relative; margin: 0; display: grid; border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden; background: var(--ink); }
.g1-buy__fig .g1-buy__photo { border-radius: 0; }
.g1-buy__cap { position: absolute; inset: auto 0 0 0; padding: 56px var(--s6) var(--s4);
  background: linear-gradient(to top, rgb(18 19 17 / 0.9) 0%, rgb(18 19 17 / 0.72) 55%, rgb(18 19 17 / 0) 100%);
  color: var(--on-dark); font-size: 0.9375rem; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .g1-buy__fig { border-radius: var(--r-card) 0 0 var(--r-card); }
  .g1-buy__fig .g1-buy__photo { height: 100%; }
}
@media (min-width: 64rem) {
  .g1-buy__fig { min-height: 18rem; }
  .g1-buy__fig .g1-buy__photo { min-height: 0; height: 100%; }
  .g1-buy__cap { padding: 72px var(--s8) var(--s6); font-size: 1rem; }
}

/* ---------- 14. Ongoing-program line under the pickup steps (BV messaging rules; grade gap 4) ---------- */
.g1-how__program { color: var(--text-2); line-height: 1.55; max-width: 36rem; padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.g1-how__program strong { color: var(--ink); font-weight: 700; }

/* ---------- 15. Journey: the three stops share one baseline at 1024+ (grade correction 10) ----------
   Labels reserve two lines, so a one-line label no longer lifts its text and pin above the two-line one. */
@media (min-width: 64rem) {
  .stop__label { min-height: calc(var(--s2) + 2.5em); }
  /* one- and two-line pins end on the same line: the last line sits on the card's shared bottom row */
  .stop__pin { align-self: end; align-items: flex-end; }
}

/* ---------- 16. The accepted-equipment card now ends on the pickup button (the list is the settled X13c set, so it is
   shorter; the card runs the full height of the steps column instead of leaving the right half near-empty, X16) ---------- */
.g1-take .g1-how__cta { padding-top: var(--s2); }
@media (min-width: 64rem) {
  .g1-how__grid { align-items: stretch; }
  .g1-take { align-self: stretch; display: flex; flex-direction: column; gap: var(--s4); }
  .g1-take .g1-how__cta { margin-top: auto; }
}

/* ======================= v2 round 3 (2026-09-29, grade v2-g1-r2 corrections; BUILD-LOG-v2-g1.md round 3) ======================= */

/* ---------- 17. "What we take" sizes to its content (grade r2 correction 5a) ----------
   Replaces rule 16's stretch: the card no longer runs to the steps column's foot, so there is no empty tint between the
   note and the button. The button sits straight after the note. */
@media (min-width: 64rem) {
  .g1-how__grid { align-items: start; }
  .g1-take { align-self: start; }
  .g1-take .g1-how__cta { margin-top: 0; }
}

/* ---------- 18. Security spec on paper, not tint, on the home page only (grade r2 correction 5b) ----------
   The take card above is lime tint on the right; the spec card directly below it was the same tint on the same side.
   Paper with a hairline keeps it a card but ends the stacked-twin look. */
.security .spec { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }

/* ---------- 19. School retire route under the program line (grade r2 correction 7): a quiet text link, never a button ---------- */
.g1-how__school { color: var(--text-2); line-height: 1.55; margin-top: calc(-1 * var(--s3)); }
.g1-how__school .textlink { display: inline; color: var(--ink); padding-block: 10px; white-space: nowrap; }

/* ---------- 20. One human promise in the closing (grade r2 correction 3) ----------
   The closing sub-line above the fields already says a person reads every request (retire and buy intents), so the
   template's .form__who line under the button is hidden here for those two intents only. Other intents (work at home,
   partner, other) have no sub-line, so they keep the template line. Logged for the template owner. */
.closing .form:not([data-intent]) .form__who,
.closing .form[data-intent="retire_devices"] .form__who,
.closing .form[data-intent="buy_refurbished"] .form__who { display: none; }

/* ---------- 21. Buying caption sits under the photo on phones (grade r2 correction 9) ----------
   At <48rem the scrim covered about 45% of a short photo; the caption now sits on ink below it, so the photo stays a photo. */
@media (max-width: 47.99rem) {
  .g1-buy__cap { position: static; padding: var(--s4) var(--s6); background: var(--ink); color: var(--on-ink-2);
    font-size: 0.875rem; border-bottom: 1px solid var(--hairline-dark); }
}

/* ======================= Short home (2026-09-29, Tom-approved words "yes... better") =======================
   Sections 3-7, 9-19 and 21 above styled the long home and no longer match any markup on index.html; they are kept
   only so the backup (site-backup-home-pre-short/) still renders if restored. New rules are prefixed hs-. */

/* ---------- S1. What we do: three open columns, no boxes (the hero's routing boxes sit directly above) ---------- */
.hs-do { padding-top: var(--section-y); }
.hs-do__grid { display: grid; gap: var(--s10); margin: 0; padding: 0; list-style: none; }
.hs-do__item { position: relative; display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s6);
  border-top: 1px solid var(--hairline); }
.hs-do__item::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; border-radius: 2px; background: var(--lime); }
.hs-do__title { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; max-width: 22ch; }
.hs-do__text { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; max-width: 36rem; }
.hs-do__link { margin-top: auto; align-self: flex-start; }
@media (min-width: 64rem) {
  .hs-do__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s12); }
  .hs-do__item { padding-top: var(--s8); }
  /* the three paragraphs and links start on shared lines even when a headline runs a line longer */
  @supports (grid-template-rows: subgrid) {
    .hs-do__grid { grid-template-rows: auto auto auto; row-gap: 0; }
    .hs-do__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--s4); }
    .hs-do__link { margin-top: var(--s2); justify-self: start; align-self: start; }
  }
}

/* ---------- S2. Proof strip: four facts in one row, then the customer's words, on an inset ink band ---------- */
.hs-proof { padding-top: var(--s8); }
@media (min-width: 64rem) { .hs-proof { padding-top: var(--s12); } }
/* Tom, 2026-09-30: the four facts moved up into the award band (company-wide trust, next to the awards); this band now
   holds only the customer's words. "Spice up the black, give it a green backdrop": one lime bloom rising from the
   bottom-right corner into the ink, with a faint echo top-left. Brand lime only (142 198 63 = --lime), no image. */
.hs-proof__band { display: grid; gap: var(--s10); margin-inline: var(--gutter); padding: var(--s10) var(--s6);
  border-radius: var(--r-card); color: var(--on-dark);
  background:
    radial-gradient(55% 95% at 100% 100%, rgb(142 198 63 / 0.9) 0%, rgb(142 198 63 / 0.38) 32%, rgb(142 198 63 / 0.08) 62%, transparent 80%),
    radial-gradient(55% 80% at 0% 0%, rgb(142 198 63 / 0.14) 0%, transparent 70%),
    radial-gradient(120% 100% at 50% 0%, var(--ink-3) 0%, var(--ink) 60%); }
/* The facts line under the award logos: full width of the band, quiet type, lime dot separators. */
.hx__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s2) 0 0; padding: 0;
  list-style: none; font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.hx__facts li { display: inline-flex; align-items: center; gap: var(--s2); }
.hx__facts li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
@media (min-width: 64rem) { .hx__facts { font-size: 0.9375rem; gap: var(--s2) var(--s8); margin-top: var(--s4); } }
.hs-proof__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); margin: 0; padding: 0 0 var(--s8);
  list-style: none; border-bottom: 1px solid var(--hairline-dark); font-weight: 600; line-height: 1.3; }
.hs-proof__facts li { display: flex; align-items: flex-start; gap: 10px; }
.hs-proof__facts li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.42em; border-radius: 50%; background: var(--lime); }
.hs-proof__quote { margin: 0; display: grid; gap: var(--s5); max-width: 52rem; }
.hs-proof__text { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; }
.hs-proof__who { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--lime); }
.hs-proof__who::before { content: ""; width: 28px; height: 2px; background: var(--lime); }
@media (min-width: 48rem) {
  .hs-proof__band { margin-inline: var(--s3); padding: var(--s16) var(--s12); }
  .hs-proof__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3) 0; }
  .hs-proof__facts li { align-items: center; padding-inline: var(--s6); }
  .hs-proof__facts li::before { display: none; }
  .hs-proof__facts li + li { border-left: 1px solid rgb(142 198 63 / 0.55); }
  .hs-proof__quote { justify-items: center; text-align: center; margin-inline: auto; }
}
@media (min-width: 64rem) {
  .hs-proof__band { max-width: var(--wide); margin-inline: max(var(--s3), (100% - var(--wide)) / 2); padding: var(--s16) var(--s12); border-radius: var(--r-band); gap: var(--s12); }
  .hs-proof__facts { font-size: 1.0625rem; }
  .hs-proof__facts li { padding-inline: var(--s6); }
}
@media (min-width: 73.5rem) { .hs-proof__band { margin-inline: auto; } }
/* Tom, 2026-09-30: the quote sits on a white card over the ink-and-lime band (the band becomes its backdrop, the lime
   bloom showing around the card). Ink text on white; the attribution turns ink too (lime on white is ~2:1, fails
   4.5:1), keeping only its short lime rule. Depth from an offset two-layer shadow, not a halo. */
.hs-proof__quote { justify-self: center; width: 100%; margin-inline: auto; padding: var(--s8) var(--s6);
  border-radius: 28px; background: #fff; color: var(--ink);
  box-shadow: 0 2px 4px rgb(18 19 17 / 0.14), 0 28px 56px -20px rgb(0 0 0 / 0.55); }
.hs-proof__quote .hs-proof__who { color: var(--ink); }
@media (min-width: 48rem) { .hs-proof__quote { max-width: 50rem; padding: var(--s12) var(--s16); } }

/* ---------- S3. Where your old computers go: real floor photo left, the answer right ---------- */
.hs-go { padding-top: var(--section-y); }
.hs-go__grid { display: grid; gap: var(--s8); align-items: center; }
.hs-go__fig { margin: 0; border-radius: var(--r-card); overflow: hidden; background: var(--ink); }
.hs-go__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hs-go__text { display: grid; gap: var(--s5); justify-items: start; }
.hs-go__text .h2 { max-width: 16ch; }
.hs-go__text strong { font-weight: 700; color: var(--ink); }
@media (min-width: 64rem) {
  .hs-go__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s16); }
}

/* ---------- S4. Security in writing: lime-tint band, heading left, the paperwork right ---------- */
.hs-sec { margin-top: var(--section-y); padding-block: var(--section-y); background: var(--floor); }
/* Tom 2026-10-01: moved up to follow the lifecycle circle (wireframe HOME-3). The circle panel already carries the light
   green, so this band sits on white (one green surface at a time, Tom's rule from the logo row). */
.hs-sec { background: none; margin-top: 0; padding-bottom: 0; }
.hs-sec__pom { font-weight: 700; color: var(--green-text); }
.hs-sec__grid { display: grid; gap: var(--s6); }
.hs-sec__head { display: grid; gap: var(--s5); justify-items: start; }
.hs-sec__ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); }
.hs-sec__ico svg { width: 26px; height: 26px; }
.hs-sec__h2 { max-width: 14ch; }
.hs-sec__mark { display: inline-block; background: var(--lime); color: var(--ink); padding: var(--s1) var(--s2); margin: 0 0 var(--s2) calc(-1 * var(--s2)); }
/* Tom 2026-10-01 ("does the green need shifted up?"): the face sits high in its line box, so equal padding left more
   green under the baseline than above the capitals. Shift the bar up: more padding on top, less below. */
.hs-sec__mark { padding-top: 0.22em; padding-bottom: 0.02em; }
.hs-sec__lead { max-width: 44ch; margin: 0; }
.hs-sec__body { display: grid; gap: var(--s6); justify-items: start; }
.hs-sec__list { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 40rem; }
.hs-sec__list li { padding-block: var(--s4); border-top: 1px solid var(--hairline); color: var(--text-2); line-height: 1.5; }
.hs-sec__list li:first-child { border-top: 0; padding-top: 0; }
.hs-sec__list strong { display: block; margin-bottom: var(--s1); color: var(--ink); font-size: 1.125rem; }
@media (min-width: 64rem) {
  .hs-sec__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s16); align-items: center; }
  .hs-sec__h2 { font-size: clamp(2.25rem, 1.6rem + 1.6vw, 3rem); line-height: 1.08; }
}

/* ---------- S5. Four quick questions: native <details> accordion (answers stay in the HTML) ---------- */
.hs-q { border-bottom: 1px solid var(--hairline); }
.hs-q__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 44px;
  padding: var(--s5) 0; cursor: pointer; list-style: none; }
.hs-q__q::-webkit-details-marker { display: none; }
.hs-q__h { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.005em; }
.hs-q__sign { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hs-q__sign::before, .hs-q__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 1px; background: var(--ink); transition: transform .25s var(--ease); }
.hs-q__sign::after { transform: rotate(90deg); }
.hs-q[open] .hs-q__sign { background: var(--lime); box-shadow: none; }
.hs-q[open] .hs-q__sign::after { transform: rotate(0deg); }
@media (hover: hover) { .hs-q__q:hover .hs-q__sign { box-shadow: inset 0 0 0 2px var(--lime); } }
.hs-q__a { padding: 0 var(--s12) var(--s6) 0; max-width: 42rem; color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; }
.hs-q__a .textlink { color: var(--ink); }
@media (min-width: 64rem) {
  .hs-q__q { padding: var(--s6) 0; }
  .hs-q__h { font-size: 1.3125rem; }
  .hs-q__a { padding-bottom: var(--s8); }
}

/* ---------- Home: lifecycle circle (v2, Tom 2026-10-01; restyled to Tom's reference, file_229) ---------- */
.lc { padding-top: var(--section-y); }
.lc__panel { background: radial-gradient(ellipse 70% 60% at 50% 45%, #f7fbf1 0%, var(--floor) 100%); border-radius: var(--r-card); padding: var(--s10) var(--s6); box-shadow: 0 1px 0 rgb(255 255 255 / .8) inset, 0 24px 48px -32px rgb(78 118 0 / .25); }
.lc__track { display: none; }
.lc__intro { display: grid; gap: var(--s4); margin-bottom: var(--s8); }
.lc__h2 { margin: 0; }
.lc__sub { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 36rem; }
.lc__more { margin: 0; color: var(--text-2); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; }
.lc__center { display: none; }
.lc__leaf { display: block; width: 40px; height: 40px; color: var(--green-text); margin-bottom: var(--s3); }
.lc__title { margin: 0; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: var(--lh-head); font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.lc__title .accent { display: block; }
.lc__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); position: relative; }
.lc__stops::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--green-text); opacity: .5; }
.lc__stop, .lc__exit { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s4); align-items: center; position: relative; }
.lc__node { width: 56px; height: 56px; border-radius: 50%; color: var(--ink); display: grid; place-items: center; position: relative; z-index: 1;
  background: radial-gradient(circle at 34% 28%, #eef7e0 0%, #c4e494 38%, #9fd055 72%, #8ec63f 100%);
  border: 3px solid #fff;
  box-shadow: 0 10px 22px -10px rgb(78 118 0 / .55), 0 0 0 6px rgb(142 198 63 / .14); }
.lc__node svg { width: 26px; height: 26px; }
.lc__node--exit { background: radial-gradient(circle at 34% 28%, #fff 0%, #f6f8f3 70%, #e9eee2 100%); color: var(--green-text); border: 3px solid #fff; box-shadow: 0 10px 22px -12px rgb(18 19 17 / .35), 0 0 0 1px rgb(78 118 0 / .14); }
/* Codex art (Tom 2026-10-01: "use codex to do your images and graphics"); the badge fills ~80% of each canvas */
.lc__node--art, .lc__node--exit.lc__node--art { background: none; border: 0; box-shadow: none; }
.lc__node--art picture { display: contents; }
.lc__art { width: 128%; height: 128%; max-width: none; position: absolute; left: -14%; top: -14%; }
.lc__leaf-img { width: 100%; height: 100%; transform: scale(1.5); }
.lc__text { margin: 0; color: var(--text-2); line-height: var(--lh-body); }
.lc__label { display: block; color: var(--ink); font-weight: 700; font-size: 1.125rem; line-height: 1.25; margin-bottom: 2px; }
.lc__exit { margin: var(--s6) 0 0; padding-left: var(--s8); }
.lc__exit::before { content: ""; position: absolute; left: 27px; top: -34px; width: 20px; height: 62px; border-left: 2px dashed var(--steel); border-bottom: 2px dashed var(--steel); border-bottom-left-radius: 14px; }
.lc .nowrap { white-space: nowrap; }

@media (min-width: 64rem) {
  .lc__panel { padding: var(--s12) var(--s10) var(--s16); }
  .lc__ring { position: relative; width: 100%; max-width: 1000px; margin: 0 auto var(--s12); aspect-ratio: 1000 / 640; }
  .lc__track { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .lc__band { fill: none; stroke: rgb(142 198 63 / .12); stroke-width: 76; }
  .lc__halo { fill: #fff; filter: drop-shadow(0 0 28px rgb(142 198 63 / .35)) drop-shadow(0 18px 30px rgb(78 118 0 / .12)); }
  .lc__arc { fill: none; stroke: var(--green-text); stroke-width: 3; stroke-linecap: round; }
  .lc__exit-line { fill: none; stroke: #93a17f; stroke-width: 2.5; stroke-dasharray: 7 7; }
  #lc-arr path { fill: var(--green-text); }
  #lc-arr-x path { fill: #93a17f; }
  .lc__intro { text-align: center; justify-items: center; margin-bottom: var(--s10); }
  .lc__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; margin: 0; text-align: center; display: grid; justify-items: center; }
  .lc__center::after { content: ""; width: 36px; height: 3px; border-radius: 2px; background: var(--green-text); margin-top: var(--s4); }
  .lc__stops { position: static; display: block; }
  .lc__stops::before { content: none; }
  .lc__stop, .lc__exit { position: absolute; display: block; width: 76px; height: 76px; margin: 0; padding: 0; transform: translate(-50%, -50%); }
  .lc__exit::before { content: none; }
  .lc__node { width: 76px; height: 76px; border-width: 4px; }
  .lc__node svg { width: 32px; height: 32px; }
  .lc__stop--1 { left: 50%; top: 15.625%; }
  .lc__stop--2 { left: 72%; top: 50%; }
  .lc__stop--3 { left: 50%; top: 84.375%; }
  .lc__stop--4 { left: 28%; top: 50%; }
  .lc__exit { left: 87.2%; top: 80%; width: 60px; height: 60px; }
  .lc__node--exit { width: 60px; height: 60px; }
  .lc__node--exit svg { width: 28px; height: 28px; }
  .lc__text { position: absolute; width: 15rem; font-size: 1.0625rem; }
  .lc__label { font-size: 1.3125rem; margin-bottom: 4px; }
  .lc__stop--1 .lc__text { left: calc(100% + 20px); bottom: calc(50% - 4px); }
  .lc__stop--2 .lc__text { left: calc(100% + 20px); bottom: calc(50% + 12px); width: 15rem; }
  .lc__stop--3 .lc__text { left: 50%; top: calc(100% + 14px); transform: translateX(-50%); width: 18rem; text-align: center; }
  .lc__stop--4 .lc__text { right: calc(100% + 20px); top: 50%; transform: translateY(-50%); text-align: right; width: 15rem; }
  .lc__exit .lc__text { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); width: 12rem; text-align: center; }
}

/* Text beside the circle (Tom, file_230): only where the ring still has room for its side labels */
@media (min-width: 80rem) {
  .lc .wrap { max-width: calc(1400px + 2 * var(--gutter)); }
  .lc__panel { display: grid; grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); column-gap: clamp(1.5rem, -6rem + 8vw, 3rem); align-items: center; padding: var(--s12) clamp(2rem, -4rem + 6vw, 3rem) var(--s16); }
  .lc__intro { text-align: left; justify-items: start; margin: 0; }
  .lc__h2 .accent { display: block; }
  .lc__ring { margin-bottom: var(--s8); }
  .lc__stop--2 .lc__text, .lc__stop--4 .lc__text { width: clamp(11.5rem, 3rem + 9vw, 13.5rem); }
  .lc__intro { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 80rem) and (max-width: 89.99rem) {
  .lc__panel { grid-template-columns: 16rem minmax(0, 1fr); }
  .lc__sub { font-size: 1.0625rem; }
  .lc__title { font-size: clamp(1.625rem, 0.6rem + 1.3vw, 2.25rem); }
}

@supports (animation-timeline: view()) {
  @media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
    .lc__arc { stroke-dasharray: 1; animation: lc-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    .lc__arc:nth-of-type(2) { animation-range: entry 50% cover 45%; }
    .lc__arc:nth-of-type(3) { animation-range: entry 70% cover 50%; }
    .lc__arc:nth-of-type(4) { animation-range: entry 90% cover 55%; }
  }
}
@keyframes lc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* =====================================================================================================================
   DESIGN RUN 2026-10-06 (Plan 4, family A). Alignment and spacing only; the hero and router cards are Tom's and untouched.
   ===================================================================================================================== */
/* Security block: the designed icon (.hs-sec__ico, above) is now in the markup, so the left column has an anchor and is no
   longer a heading over a paragraph. Its list caps at 66ch (DESIGN.md), was 40rem (~73ch at 16px). */
.hs-sec__list { max-width: 66ch; }
/* Four quick questions: the 5/7 split left the column under the heading empty for ~600px of scroll. 64-80rem: a narrower
   heading column (4/8). 80rem+: one column, heading above the list, list capped at 66ch (brief Move 1, blank-column fix). */
/* First try (one 66ch column at 80rem+) left the right half of the section empty instead; the section's own four Q&As
   fill the width as a 2x2 hairline grid under a full-width heading (Move 2: a quiet list, ~58ch per column at 1280). */
@media (min-width: 64rem) {
  .hs-faq .faq__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s10); }
  .hs-faq .faq__grid > .h2 { position: static; }
  .hs-faq .faq__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s16); border-top: 0; }
  .hs-faq .qa { border-bottom: 0; border-top: 1px solid var(--hairline); align-content: start; }
  /* a two-line question beside a one-line one: answers start level (DESIGN.md Balance Rule) */
  @supports (grid-template-rows: subgrid) { .hs-faq .qa { grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--s2); } }
}

/* finish review A 10-07: the security block's two columns were centre-aligned, so once the icon sat above the heading the
   list's first row floated between the icon and the H2. Top-aligned, with the list starting on the heading's line (icon
   56px + the head's 20px gap). */
@media (min-width: 64rem) {
  .hs-sec__grid { align-items: start; }
  .hs-sec__body { padding-top: calc(56px + var(--s5)); }
}

/* Tom 10-09 "new home page HERO" (hm-hero-bg, experiments/home_hero_1009.py): his assembly-floor image has the left fade baked
   in, so at 64rem+ it runs full-bleed behind the card (not the right 55%), right-anchored and never past its native 1672px;
   site.css's ink grade still keeps the text side solid. Past 1672px the image's left edge is feathered into the ink. */
@media (min-width: 64rem) {
  .hx:not(.iv-hx) .hx__card picture { inset: 0; width: 100%; display: flex; justify-content: flex-end; }
  .hx:not(.iv-hx) .hx__card picture img { position: static; width: min(100%, 1672px); height: 100%; object-position: 100% 40%; }
}
@media (min-width: 104.50rem) {
  .hx:not(.iv-hx) .hx__card picture img { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%); mask-image: linear-gradient(90deg, transparent 0, #000 8%); }
}

/* Tom 10-09 (file_725): more air between the three router cards and the link lines under them */
.hx__more--one { margin-top: 32px; }
@media (max-width: 47.99rem) { .hx__more--one { margin-top: 24px; } }
.door2__label .accent { white-space: nowrap; }

/* Tom 10-09 Home loop v2 (hm-loop2-*, experiments/home_loop_v2_1009.py; einstein v2): the clip carries its own left ink, so at
   64rem+ it fills the whole card like the hm-hero-bg still under it. */
@media (min-width: 64rem) { .hx:not(.iv-hx) .hx__video { inset: 0; width: 100%; object-position: 100% 55%; } }
/* Tom 10-13 ("the file is waaaaay better quality"): the site.css blur(1.6px) + scale(1.04) was for the old small-photo loop.
   The v3 clip is 1080p, so Home plays it sharp, at its own size. */
.hx:not(.iv-hx) .hx__video { filter: none; transform: none; }

/* Tom 10-09 (file_747): an icon in front of each security row; the shield disc above the heading is gone. Same disc family
   as the old shield (ink, lime stroke), smaller, centred on the row's bold line. */
.hs-sec__li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s4); align-items: start; }
.hs-sec__li-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); margin-top: -8px; }
.hs-sec__li-ico svg { width: 22px; height: 22px; }
.hs-sec__list li.hs-sec__li:first-child .hs-sec__li-ico { margin-top: -8px; }