/* home.css: the home page's own placing and sizing (plan.md, "home"), with the tokens of system.css only. */

/* ======================= hero: full-bleed footage, one field at a time (the kit's rotate) ======================= */
/* the kit's own rules for the header that changes its field (kit.md), kept as they are */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(var(--kit-glide, calc((1 - var(--kit-move, 1)) * 4%))); } /* the kit gives the glide in whole device pixels */
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; clip-path: inset(2px); } /* each clip reaches 1 px past its frame, so no still picture shows beside it; until it has shown its first frames, its first paint is cut 1 px inside the frame, so the first picture stays the largest paint */
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; } /* the kit marks a clip once it has shown its first frames */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); } /* the picture that left goes once the new one covers it whole */
[data-kit-scene="rotate"] [data-kit-slide] img.kit-first { inset: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: none; } /* the first picture laid like its clip */

.hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(640px, calc(100svh - 72px), 900px); background: var(--c-ink-deep); color: var(--c-on-ink); overflow: hidden; isolation: isolate; }
.hero .defs { position: absolute; width: 0; height: 0; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__slide { --draw: clamp(0, var(--kit-in, 1) * 1.8, 1); --in: clamp(0, (var(--kit-in, 1) - 0.42) * 1.75, 1); }
.hero__slide .kit-first { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the shade, under the card: only behind the words */
.hero__slide::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink-deep) 86%, transparent) 0%, color-mix(in srgb, var(--c-ink-deep) 74%, transparent) 30%, color-mix(in srgb, var(--c-ink-deep) 30%, transparent) 52%, transparent 70%); }
.hero__fx { position: absolute; z-index: 2; left: var(--cx); top: var(--cy); transform: translateY(-50%); }
.hero__card { position: relative; width: max-content; max-width: 340px; opacity: var(--in); transform: translateY(calc((1 - var(--in)) * 16px)); }
.hero__swoosh { position: absolute; right: calc(100% - 4px); top: 50%; width: clamp(170px, 19vw, 330px); height: clamp(72px, 7.6vw, 132px); clip-path: inset(0 calc((1 - var(--draw)) * 100%) 0 0); }
.hero__stop { position: absolute; z-index: 5; right: var(--gutter); top: 20px; }
.hero__in { position: relative; z-index: 4; padding-block: clamp(44px, 7vh, 84px); pointer-events: none; }
.hero__words { max-width: 640px; pointer-events: auto; }
.hero__title { display: grid; font-size: var(--fs-display); color: var(--c-on-ink); }
/* the headline with the longest words, unseen in the same cell: the header keeps one height as the word changes */
.hero__shown, .hero__title::before, .hero__title::after { grid-area: 1 / 1; }
.hero__title::before, .hero__title::after { content: attr(data-size-a); white-space: pre-line; visibility: hidden; }
.hero__title::after { content: attr(data-size-b); }
.hero__l { display: block; }
.hero__word { color: var(--c-brand-on-ink); opacity: calc(1 - var(--kit-swap, 0)); }
.hero__line { margin-top: 20px; max-width: 44ch; font-size: 1.1875rem; line-height: 1.5; color: var(--c-on-ink); opacity: .9; }
.hero__picker { margin-top: 28px; max-width: 520px; }

@media (max-width: 900px) {
  .hero { display: flex; min-height: 0; background: var(--c-paper); color: var(--c-ink); }
  .hero__in { padding-block: 28px 24px; }
  .hero__l { display: inline; }
  .hero__title { color: var(--c-ink); }
  .hero__title::before, .hero__title::after { white-space: normal; }
  .hero__word { color: var(--c-brand-text); }
  .hero__line { margin-top: 14px; color: var(--c-ink-soft); opacity: 1; font-size: 1.0625rem; }
  .hero__picker { margin-top: 22px; max-width: none; padding: 16px; box-shadow: var(--shadow-m); }
  .hero__media { position: relative; inset: auto; margin: 0 var(--gutter) 8px; aspect-ratio: 4 / 3; max-height: 72svh; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-deep); }
  .hero__slide::before { background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink-deep) 45%, transparent), transparent 45%); }
  .hero__fx { left: auto; right: 14px; top: auto; bottom: 16px; transform: none; }
  .hero__card { max-width: min(270px, calc(100vw - 2 * var(--gutter) - 90px)); }
  .hero__swoosh { width: 96px; height: 52px; top: 30%; }
  .hero__stop { top: 12px; right: 12px; }
}

/* ======================= plan: the free plan tour ======================= */
.plan__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5); align-items: stretch; }
.plan__side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5); }
.plan__tabs { display: grid; border-top: 1px solid var(--c-line); }
.plan__tab { position: relative; display: grid; gap: 6px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink-soft); font: inherit; text-align: left; cursor: pointer; }
.plan__bar { position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--c-brand); transform-origin: left center; transform: scaleX(0); }
.plan__tab[aria-selected="true"] .plan__bar { transform: scaleX(var(--kit-fill, 1)); }
.plan__tabs:not([data-kit-on]) .plan__tab[aria-selected="true"] .plan__bar { transform: scaleX(1); }
.plan__tab-title { font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--c-ink-soft); }
.plan__tab[aria-selected="true"] .plan__tab-title { color: var(--c-ink); }
.plan__tab:hover .plan__tab-title { color: var(--c-ink); }
.plan__tab-line { font-size: var(--fs-small); }
.plan__stage { display: grid; min-height: clamp(470px, 40vw, 540px); }
.plan__stage::after { content: ""; position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--c-ink-deep) 22%, transparent); pointer-events: none; }
.plan__panel { position: relative; z-index: 1; grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(20px, 3vw, 40px); }
.plan__panel:focus-visible { outline-offset: -4px; }
.plan__scene { width: 100%; }
.plan__stop { position: absolute; z-index: 2; right: 14px; top: 14px; }
@media (max-width: 960px) {
  .plan__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .plan__side { display: contents; }
  .plan__tabs { order: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 0; }
  .plan__tab { padding: 14px 0 0; border-bottom: 0; border-top: 1px solid var(--c-line); }
  .plan__tab-line { display: none; }
  .plan__tab-title { font-size: 1rem; }
  .plan__stage { order: 2; min-height: 460px; }
  .plan__cta { order: 3; }
}

/* ======================= how: three steps lit by the chat ======================= */
.how { overflow: hidden; background: var(--c-ink-deep); isolation: isolate; }
.how__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.how__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink-deep) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink-deep) 84%, transparent) 48%, color-mix(in srgb, var(--c-ink-deep) 52%, transparent) 100%); }
.how__stop { position: absolute; z-index: 2; right: var(--gutter); top: 20px; }
.how__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; }
.how__title { color: var(--c-on-ink); }
.how__line { margin-top: 16px; }
.how__steps { margin: 36px 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--c-ink-line); }
.how__step { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--c-ink-line); opacity: .74; transition: opacity var(--dur-med) var(--ease-out); }
.how__step::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--c-brand-on-ink); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-med) var(--ease-out); }
.how__step[aria-current="step"] { opacity: 1; }
.how__step[aria-current="step"]::before { transform: scaleX(1); }
.how__num { font: 800 2.9rem/0.86 var(--font-display); color: var(--c-on-ink); }
.how__step-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: var(--fs-h3); color: var(--c-on-ink); }
.how__chip { padding: 5px 8px; border-radius: var(--radius-s); background: color-mix(in srgb, var(--c-on-ink) 12%, transparent); color: var(--c-on-ink); font: 600 0.8125rem/1 var(--font-ui); letter-spacing: 0; }
.how__phone { display: grid; justify-items: center; }
.phone { display: flex; flex-direction: column; width: 336px; height: 620px; box-sizing: border-box; border: 11px solid var(--c-ink); border-radius: 46px; background: var(--c-paper); color: var(--c-ink); overflow: hidden; box-shadow: 0 0 0 1px var(--c-ink-line), var(--shadow-l); }
.phone__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--c-line); }
.phone__bar b { display: block; font: 600 0.9375rem/1.2 var(--font-ui); }
.phone__bar small { display: block; font: 400 0.8125rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
.phone__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-m); background: var(--c-ink); }
.phone__mark { width: 26px; height: 10px; }
.phone__screen { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; overflow: hidden; opacity: calc(1 - var(--kit-out, 0)); }
.phone__intro { flex: none; margin-bottom: auto; display: grid; justify-items: center; gap: 4px; padding: 18px 8px 22px; text-align: center; }
.phone__intro-mark { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 8px; border-radius: var(--radius-l); background: var(--c-ink); }
.phone__intro-mark .phone__mark { width: 36px; height: 14px; }
.phone__intro b { font: 700 1.05rem/1.25 var(--font-display); color: var(--c-ink); }
.phone__intro small { font-size: 0.8125rem; color: var(--c-ink-soft); }
.msg { flex: none; max-width: 84%; padding: 10px 13px; border-radius: 14px; font: 400 0.9375rem/1.35 var(--font-ui); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--us { align-self: flex-start; background: var(--c-paper-alt); color: var(--c-ink); border-bottom-left-radius: 4px; }
.msg--you { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); border-bottom-right-radius: 4px; }
.msg--chips { align-self: flex-start; display: flex; gap: 6px; padding: 0; background: none; }
.msg--chips span { padding: 8px 13px; border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--c-line); font: 700 0.9375rem/1 var(--font-display); color: var(--c-ink); }
.msg--chips [data-kit-on] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: none; }
.msg--check { display: grid; gap: 8px; min-width: 68%; }
.msg__bar { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--c-line); overflow: hidden; }
.msg__bar::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); transform-origin: left center; transform: scaleX(var(--kit-fill, 0)); }
.msg--plan { align-self: stretch; max-width: none; padding: 14px 16px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-m); }
.msg--plan b { display: block; font: 700 1.05rem/1.2 var(--font-display); }
.msg--plan ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.msg--plan li { position: relative; padding-left: 22px; font-size: 0.875rem; color: var(--c-ink-soft); }
.msg--plan li::before { content: ""; position: absolute; left: 2px; top: 4px; width: 8px; height: 4px; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }
.msg--alert { align-self: stretch; max-width: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-m); background: var(--c-ink); color: var(--c-on-ink); }
.msg--alert b { display: block; font: 600 0.9375rem/1.2 var(--font-ui); }
.msg--alert small { display: block; font-size: 0.8125rem; color: var(--c-on-ink-soft); }
@media (max-width: 960px) {
  .how__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .phone { width: min(336px, 100%); height: 560px; }
}
@media (prefers-reduced-motion: reduce) { .how__step, .how__step::before { transition: none; } }

/* ======================= outcomes: the owner's day ======================= */
.day .defs { position: absolute; width: 0; height: 0; }
.day__track { position: relative; }
.day__arc { position: relative; height: clamp(56px, 7vw, 96px); margin: 0 0 18px; }
.day__swoosh { position: absolute; inset: 0; width: 100%; height: 100%; }
.day__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--c-paper); box-shadow: 0 0 0 3px var(--c-brand); }
.day__stop { position: absolute; z-index: 2; right: 0; top: 0; }
.day__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.day__frame { aspect-ratio: 3 / 4.5; }
.day__frame > .day__video { object-position: var(--pos, 50% 50%); }
.day__frame::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink-deep) 30%, transparent), transparent 22%); }
.day__time { position: absolute; z-index: 2; left: 12px; top: 12px; }
.day__scene { position: absolute; z-index: 1; left: 10px; right: 10px; }
.day__frame--bottom .day__scene { bottom: 12px; }
.day__frame--top .day__scene { top: 52px; }
.day__title { margin-top: 20px; font-size: var(--fs-h3); }
.day__line { margin-top: 8px; color: var(--c-ink-soft); font-size: var(--fs-small); }
.day__item .link-arrow { margin-top: 12px; }
@media (max-width: 1120px) {
  .day__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .day__arc { display: none; }
  .day__stop { top: -56px; }
  .day__frame { aspect-ratio: 4 / 4.6; }
}
@media (max-width: 620px) {
  .day__list { grid-template-columns: minmax(0, 1fr); }
  .day__frame { aspect-ratio: 4 / 5.4; }
  .day__scene { left: 50%; right: auto; width: min(300px, calc(100% - 20px)); transform: translateX(-50%); }
}

/* ======================= worth: the calculator, the year on the swoosh ======================= */
.worth { --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-on-ink-soft); --calc-track: var(--c-ink-line); --calc-fill: var(--c-brand-on-ink); --calc-thumb: var(--c-paper); --calc-thumb-edge: var(--c-brand); --calc-surface: var(--c-ink); --calc-focus: var(--c-brand-on-ink); --calc-track-radius: 3px; --calc-thumb-radius: var(--radius-m); --calc-value-size: 1.35rem; --calc-total-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.2rem); --calc-figure-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.worth__stop { position: absolute; z-index: 2; right: var(--gutter); top: 20px; }
.worth__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: center; }
.worth__controls { padding: clamp(20px, 2.6vw, 32px); border: 1px solid var(--c-ink-line); border-radius: var(--radius-l); }
.worth__result { display: grid; gap: 18px; min-width: 0; }
.worth__art { position: relative; }
.worth__svg { display: block; width: 100%; height: auto; aspect-ratio: 640 / 280; overflow: visible; }
.worth__track { fill: var(--c-ink-line); }
/* solid, never a gradient: a gradient's dithering redraws a level apart each time, and the picture must rest exactly */
.worth__fill { fill: var(--c-accent); }
.worth__tick { stroke: color-mix(in srgb, var(--c-on-ink) 55%, transparent); stroke-width: 2; }
.worth__tip { fill: var(--c-paper); stroke: var(--c-accent); stroke-width: 6; }
.worth__marks { position: absolute; inset: 0; pointer-events: none; }
.worth__marks span { position: absolute; transform: translate(-50%, -100%); font: 600 0.875rem/1 var(--font-ui); color: var(--c-on-ink-soft); white-space: nowrap; }
.worth__marks span.is-passed { color: var(--c-on-ink); }@media (max-width: 960px) {
  .worth__box { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

/* ======================= compare: what they report, what we give ======================= */
.compare__box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); --out: var(--kit-out, 0); }
.compare__stop { position: absolute; z-index: 3; right: 14px; top: 14px; }
.compare__side { min-height: 460px; display: grid; align-items: end; }
.compare__photo, .compare__side > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__side--them .compare__photo, .compare__side--them img { filter: grayscale(1) contrast(.92) brightness(1.04); }
.compare__side--us img { object-position: 78% 40%; }
.compare__panel { position: relative; z-index: 1; margin: 16px; max-width: 360px; padding: 20px 22px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-l); }
.compare__tag { font: 700 1.05rem/1.2 var(--font-display); color: var(--c-ink-soft); }
.compare__tag--us { color: var(--c-brand-text); }
.compare__list { display: grid; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.compare__row { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--c-line); font: 500 1rem/1.3 var(--font-ui); }
.compare__row--x span { position: relative; color: color-mix(in srgb, var(--c-ink-soft) calc(100% - var(--kit-in, 0) * 30%), var(--c-paper)); }
.compare__row--x span::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--c-ink); transform-origin: left center; transform: scaleX(calc(var(--kit-in, 0) * (1 - var(--out)))); }
.compare__row--tick span { color: color-mix(in srgb, var(--c-ink) calc(45% + var(--kit-in, 0) * (1 - var(--out)) * 55%), var(--c-paper)); font-weight: 600; }
.compare__tick { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-s); background: var(--c-brand); color: var(--c-on-brand); transform: scale(calc(var(--kit-in, 0) * (1 - var(--out)))); }
.compare__tick svg { width: 15px; height: 15px; }
@media (max-width: 860px) {
  .compare__box { grid-template-columns: minmax(0, 1fr); }
  .compare__side { min-height: 500px; }
  .compare__side--us img { object-position: 80% 22%; }
  .compare__panel { max-width: none; }
}

/* ======================= who: six categories and many more ======================= */
.who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 300px); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.who__cell--a { grid-column: 1 / 3; grid-row: 1 / 3; }
.who__cell--f { grid-column: 1 / 3; }
.who__cell--more { grid-column: 3 / 5; }
.tile { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-l); overflow: hidden; background: var(--c-paper); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-fast) var(--ease-out); }
.tile:hover { box-shadow: 0 0 0 1.5px var(--c-ink); }
.tile__photo { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.tile__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.tile:hover .tile__photo img { transform: scale(1.03); }
.tile__bar { display: grid; gap: 4px; padding: 14px 16px 16px; border-top: 1px solid var(--c-line); }
.tile__name { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.tile__fields { font-size: var(--fs-small); color: var(--c-ink-soft); }
.tile--more { justify-content: flex-end; gap: 10px; padding: clamp(20px, 2.4vw, 32px); background: var(--c-brand); color: var(--c-on-brand); box-shadow: none; }
.tile--more:hover { background: var(--c-brand-dark); box-shadow: none; }
.tile--more .tile__name { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.tile--more .tile__fields { max-width: 40ch; color: var(--c-on-brand); font-size: 1rem; }
.tile__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 1rem/1.2 var(--font-ui); }
@media (max-width: 960px) {
  .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 280px; }
  .who__cell--a, .who__cell--f, .who__cell--more { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .who__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 290px; }
  .who__cell--more { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .tile, .tile__photo img { transition: none; } .tile:hover .tile__photo img { transform: none; } }

/* ======================= faq ======================= */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-5) var(--space-6); }
.faq__head { display: grid; align-content: start; gap: var(--space-5); }
@media (max-width: 860px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } }

/* ======================= close: the idea's line over footage ======================= */
.close { position: relative; overflow: hidden; padding-block: clamp(112px, 13vw, 176px) clamp(88px, 10vw, 140px); background: var(--c-ink-deep); color: var(--c-on-ink); isolation: isolate; }
.close .defs { position: absolute; width: 0; height: 0; }
.close__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.close__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink-deep) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink-deep) 70%, transparent) 48%, color-mix(in srgb, var(--c-ink-deep) 34%, transparent) 100%); }
.close__swoosh { position: absolute; left: 0; top: 0; width: 100%; height: clamp(36px, 5.4vw, 84px); }
.close__stop { position: absolute; z-index: 2; right: var(--gutter); bottom: 20px; }
/* words and picker in one column at the left, over the shade: the clip's woodworker stays clear at the right */
.close__in { display: grid; grid-template-columns: minmax(0, 580px); gap: var(--space-5); }
.close__title { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 4.75rem); color: var(--c-on-ink); max-width: 11ch; }
.close__line { margin-top: 18px; max-width: 36ch; font-size: 1.1875rem; color: var(--c-on-ink); opacity: .9; }
@media (max-width: 860px) { .close__video { object-position: 28% 40%; } }