/* home.css: the home page's parts, placed and sized with the tokens of system.css. */

/* ---------- hero: split, the field clips bleeding to the right edge ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); min-height: clamp(620px, calc(100svh - 76px), 860px); background: var(--c-paper); overflow: hidden; }
.hero__words { position: relative; z-index: 3; display: grid; align-content: center; gap: 22px; padding: 40px clamp(28px, 4vw, 64px) 48px max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
.hero__h1 { display: flex; flex-direction: column; justify-content: flex-end; font-size: clamp(2.6rem, 1.15rem + 3.4vw, 4.25rem); line-height: 1.0; min-height: calc(5 * 1em); text-wrap: pretty; }
.hero__word { color: var(--c-ink); background: linear-gradient(transparent 60%, color-mix(in srgb, var(--c-brand) 55%, var(--c-paper)) 60%, color-mix(in srgb, var(--c-brand) 55%, var(--c-paper)) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; opacity: calc(1 - var(--kit-swap, 0) * 0.85); }
.hero__line { max-width: 520px; font-size: 1.1875rem; line-height: 1.5; color: var(--c-ink-soft); }
.picker--hero { max-width: 520px; margin-top: 6px; }

.hero__stage { position: relative; margin-block: 16px; border-radius: var(--radius-xl) 0 0 var(--radius-xl); overflow: hidden; background: var(--c-paper-alt); }
.hero__stop { top: 20px; left: 20px; }
/* the kit's header (kit.md): kept as it is */
[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%))); }
[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); }
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); }
.hero__slide video { object-position: var(--pos, 50% 50%); }

/* each field's booking card: on the clip's face-free side, at the height of the main button's line */
.hero__card { position: absolute; z-index: 3; left: 28px; top: calc(var(--link-y, 74%) - 38px); display: flex; align-items: center; gap: 12px; box-sizing: border-box; width: min(340px, calc(100% - 56px)); padding: 12px 18px 12px 12px; border-radius: 18px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 14px)) scale(calc(0.95 + 0.05 * var(--kit-in, 1))); transform-origin: 0 50%; }
.hero__icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--tone); color: var(--tone-ink); }
.hero__icon svg { width: 24px; height: 24px; }
.hero__card-text { display: grid; gap: 2px; min-width: 0; }
.hero__card-text b { font: 700 1.0625rem/1.2 var(--font-ui); }
.hero__card-text small { font: 500 0.9375rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
.tone--brand { --tone: var(--c-brand); --tone-ink: var(--c-ink); }
.tone--found { --tone: var(--c-found); --tone-ink: var(--c-ink); }
.tone--answered { --tone: var(--c-answered); --tone-ink: var(--c-ink); }
.tone--booked { --tone: var(--c-booked); --tone-ink: var(--c-paper); }
.tone--reviewed { --tone: var(--c-reviewed); --tone-ink: var(--c-answered); }

/* the dot-line from the main button to the card's node, in the logo's four colors */
.hero__link { display: none; position: absolute; z-index: 4; top: var(--link-y); left: var(--link-x0); width: var(--link-w); height: 0; border-top: 3px dotted color-mix(in srgb, var(--c-ink) 28%, transparent); pointer-events: none; }
.hero[data-linked] .hero__link { display: block; }
.hero__link i { position: absolute; top: -1.5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--c-paper); box-shadow: var(--shadow-s); transform: translate(-50%, -50%); }
.hero__link i:nth-child(1) { left: 18%; background: var(--c-found); }
.hero__link i:nth-child(2) { left: 39%; background: var(--c-answered); }
.hero__link i:nth-child(3) { left: 60%; background: var(--c-booked); }
.hero__link i:nth-child(4) { left: 81%; background: var(--c-reviewed); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__words { padding: 28px var(--gutter) 24px; gap: 18px; }
  .hero__h1 { min-height: calc(4 * 1em); font-size: clamp(2.2rem, 1.4rem + 3.6vw, 3.4rem); }
  .hero__stage { height: clamp(300px, 62vw, 460px); margin: 0 var(--gutter) 28px; border-radius: var(--radius-l); }
  .hero__card { top: auto; bottom: 14px; left: 14px; width: calc(100% - 28px); max-width: 340px; }
  .hero[data-linked] .hero__link { display: none; }
}
@media (max-width: 420px) {
  .hero__h1 { font-size: 2.35rem; }
  .picker__choices { gap: 6px; }
}

/* ---------- outcomes: the logo's four bars, rising ---------- */
.bars { padding-block: var(--section-y); }
.bars__row { --gap: 20px; --step: 44px; --top: 600px; --lift: 30px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--gap); row-gap: 18px; padding-top: 104px; }
.bar { grid-row: span 2; display: grid; grid-template-rows: subgrid; min-width: 0; }
.bar--found { --tone: var(--c-found); --pos: 66% 50%; }
.bar--answered { --tone: var(--c-answered); --pos: 47% 50%; }
.bar--booked { --tone: var(--c-booked); --pos: 80% 50%; }
.bar--reviewed { --tone: var(--c-reviewed); --pos: 67% 40%; }
.bar__media { position: relative; align-self: end; height: calc(var(--top) - (3 - var(--k)) * var(--step)); border-radius: var(--radius-l); overflow: hidden; background: var(--c-paper-alt); box-shadow: var(--shadow-m); }
.bar__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos); }
.bar__scene { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; }
.bar__text { display: grid; gap: 8px; align-content: start; }
.bar__text h3 { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; }
.bar__dot { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--tone); }
.bar__text p { font-size: 1rem; line-height: 1.5; color: var(--c-ink-soft); }
.bars__line, .bars__nodes { position: absolute; left: calc((100% - 3 * var(--gap)) / 8); width: calc(100% - (100% - 3 * var(--gap)) / 4); top: calc(104px - var(--lift)); height: calc(3 * var(--step)); pointer-events: none; }
.bars__line { z-index: 3; overflow: visible; }
.bars__line line { fill: none; stroke: color-mix(in srgb, var(--c-ink) 32%, transparent); stroke-width: 3.5; stroke-dasharray: 0 10; stroke-linecap: round; }
.bars__nodes { z-index: 4; }
.bars__nodes i { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--c-paper); box-sizing: border-box; box-shadow: var(--shadow-s); transform: translate(-50%, -50%); }
.bars__nodes i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--lift) - 11px); margin-left: -1px; background: inherit; opacity: 0.6; }
.bars__nodes i:nth-child(1) { left: 0; top: 100%; background: var(--c-found); }
.bars__nodes i:nth-child(2) { left: 33.333%; top: 66.667%; background: var(--c-answered); }
.bars__nodes i:nth-child(3) { left: 66.667%; top: 33.333%; background: var(--c-booked); }
.bars__nodes i:nth-child(4) { left: 100%; top: 0; background: var(--c-reviewed); }
.bars__hub { position: absolute; left: 100%; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--c-ink); color: var(--c-paper); font: 700 0.9375rem/1 var(--font-ui); white-space: nowrap; box-shadow: var(--shadow-m); transform: translate(-50%, calc(-100% - 26px)); }
.bars__hubdot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-brand); color: var(--c-ink); }
.bars__mark { width: 18px; height: 18px; fill: currentColor; }
.bars__stop { left: 12px; top: calc(104px + 3 * var(--step) + 12px); }
@media (max-width: 1180px) { .bars__row { --top: 560px; --step: 38px; --gap: 16px; } }
@media (max-width: 960px) {
  .bars__row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 56px; row-gap: 14px; }
  .bar { margin-bottom: 24px; }
  .bar__media { height: 580px; }
  .bars__line, .bars__nodes { display: none; }
  .bars__stop { top: 68px; }
}
@media (max-width: 600px) {
  .bars__row { grid-template-columns: minmax(0, 1fr); }
  .bar__media { height: 580px; }
}

/* ---------- the free plan tour ---------- */
.tour { padding-block: var(--section-y); background: var(--c-paper-alt); }
/* F1: the tabs in a row above one wide stage, the owner in the footage's right part and the cards in its left 62% */
.tour__box { display: grid; gap: 16px; }
.tour__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; }
.tour__tab { position: relative; display: grid; gap: 6px; padding: 20px 22px 22px; border: 1.5px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.tour__tab:hover { transform: translateY(-2px); }
.tour__tab b { font: 800 1.3125rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.tour__tab span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-soft); }
.tour__tab[aria-selected="true"] { border-color: var(--c-ink); box-shadow: var(--shadow-m); }
.tour__fill { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--kit-fill, 1) * 100%); background: var(--c-brand); }
.tour__tab[aria-selected="false"] .tour__fill { display: none; }
.tour__stage { position: relative; height: clamp(500px, 42vw, 580px); border-radius: var(--radius-xl); overflow: hidden; background: var(--c-ink); }
/* the florist sits in the clip's right half (face at 58-66%); drawn 8% wider from the right edge, so a colleague's
   blurred face at its far-left edge stays out of the frame, and the cards keep to the left half */
.tour__video { position: absolute; top: -1px; right: -1px; bottom: -1px; left: auto; width: calc(108% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 50%; }
.tour__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-ink) 16%, transparent); pointer-events: none; }
.tour__stop .stop__play, .tour__stop[aria-pressed="true"] .stop__pause { display: none; }
.tour__stop[aria-pressed="true"] .stop__play { display: inline; }
.tour__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center start; padding: 32px 28px; }
.tour__panel:focus-visible { outline-offset: -6px; }
.tour__scene { width: 50%; min-width: 470px; }
.tour__stop { top: 16px; right: 16px; }
/* under 1080 the cards would reach her face: they take the whole stage over the flowers at the clip's left */
@media (max-width: 1080px) {
  .tour__stage { height: 620px; }
  .tour__video { left: -1px; width: calc(100% + 2px); object-position: 18% 50%; }
  .tour__panel { place-items: center; padding: 16px; }
  .tour__scene { width: 100%; min-width: 0; }
}
@media (max-width: 900px) {
  .tour__tabs { grid-template-columns: 1fr; }
  .tour__tab { padding: 14px 16px 16px; }
  .tour__tab span { display: none; }
}

/* ---------- three steps on one connected route ---------- */
.route { padding-block: var(--section-y); }
.route__stage { position: relative; height: 480px; border-radius: var(--radius-xl); overflow: hidden; background: var(--c-paper-alt); }
.route__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 72%; }
.route__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-paper) 14%, transparent); pointer-events: none; }
.route__scene { position: absolute; inset: 0; z-index: 2; }
.route__stop { top: 16px; right: 16px; }
/* the tradesman's face stays above the crop on a computer; on the phone the frame keeps to the tree-filled right side */
@media (max-width: 700px) { .route__stage { height: 800px; } .route__video { object-position: 100% 50%; } }

/* ---------- the calculator: the connected year ---------- */
.worth { padding-block: var(--section-y); }
.worth__panel { position: relative; padding: clamp(18px, 3vw, 40px); border-radius: var(--radius-xl); background-color: var(--c-paper-alt); background-image: radial-gradient(circle, color-mix(in srgb, var(--c-ink) 10%, transparent) 1.3px, transparent 1.8px); background-size: 22px 22px; }
.worth__stop { top: 16px; right: 16px; }
.worth__box { --calc-surface: var(--c-paper); --calc-fill: var(--c-brand); --calc-thumb-edge: var(--c-ink); --calc-thumb-size: 30px; --calc-track-size: 8px; --calc-track: color-mix(in srgb, var(--c-ink) 12%, transparent); --calc-total-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); --calc-figure-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(20px, 3.5vw, 48px); align-items: start; }
.worth__controls { padding: clamp(18px, 2.5vw, 30px); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-s); }
.worth__controls .calc-sliders { gap: 26px; }
.worth__controls .calc-slider__label { font-weight: 600; }
.worth__controls .calc-slider__value { font: 800 1.375rem/1.1 var(--font-display); }
.worth__result { position: relative; display: grid; gap: 16px; padding: clamp(18px, 2.5vw, 30px); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-s); }
.worth__result .calc-total { display: grid; gap: 4px; }
.worth__result .calc-total__value { font-weight: 800; letter-spacing: -0.03em; }
.worth__result .calc-total__label { font: 600 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.worth__result .calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.worth__result .calc-figure { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--radius-m); background: var(--c-paper-alt); }
.worth__result .calc-figure__label { font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.worth__result .calc-note { font-size: var(--fs-small); color: var(--c-ink-soft); }

.worth__picture { position: relative; height: 290px; }
.yr { position: absolute; inset: 52px 0 30px 0; --scale: 0.7; }
.yr__bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; }
/* one meaning, one color: month 1 is the set-up (a pale stub), then new business climbs in the brand's cyan */
.yr__m { --tone: var(--c-brand); position: relative; display: block; height: calc((var(--i) - 1) / 11 * var(--scale) * 100%); min-height: 10px; border-radius: 8px 8px 3px 3px; background: var(--tone); transform-origin: 50% 100%; transition: height var(--dur-fast) var(--ease-out); }
.yr__m:first-child { --tone: color-mix(in srgb, var(--c-brand) 28%, var(--c-paper)); }
.yr__m[data-kit-month]:not([data-kit-on]) { transform: scaleY(0); }
.yr__m[data-kit-on] { transform: scaleY(var(--kit-in, 1)); }
.yr__node { display: none; position: absolute; left: 50%; top: 0; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: var(--c-paper); border: 3.5px solid var(--tone); transform: translate(-50%, -50%); }
.yr__line { position: absolute; left: calc((100% - 66px) / 24); bottom: 0; width: calc(100% - (100% - 66px) / 12); height: calc(var(--scale) * 100%); overflow: visible; clip-path: inset(-10px calc((1 - var(--kit-year, 1)) * 100%) -10px -10px); transition: height var(--dur-fast) var(--ease-out); pointer-events: none; }
.yr__line line { fill: none; stroke: color-mix(in srgb, var(--c-ink) 40%, transparent); stroke-width: 3; stroke-dasharray: 0 9; stroke-linecap: round; }
.yr__hub { position: absolute; right: 0; bottom: calc(var(--scale) * 100% + 16px); display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--c-ink); color: var(--c-paper); font: 700 0.875rem/1 var(--font-ui); white-space: nowrap; opacity: clamp(0, (var(--kit-year, 1) - 0.92) * 14, 1); transition: bottom var(--dur-fast) var(--ease-out); }
.yr__hubdot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-brand); color: var(--c-ink); }
.yr__mark { width: 16px; height: 16px; fill: currentColor; }
.yr__axis { position: absolute; left: 0; right: 0; bottom: -28px; display: flex; justify-content: space-between; font: 600 0.8125rem/1 var(--font-ui); color: var(--c-ink-soft); }
@media (max-width: 900px) {
  .worth__box { grid-template-columns: minmax(0, 1fr); }
  .worth__picture { height: 240px; }
}
@media (max-width: 420px) { .worth__controls .calc-scale__mark { display: none; } .worth__result .calc-figures { grid-template-columns: 1fr; } .yr__bars { gap: 4px; } .yr__line { left: calc((100% - 44px) / 24); width: calc(100% - (100% - 44px) / 12); } }

/* ---------- who we help ---------- */
.who { padding-block: var(--section-y); }
.who__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile { grid-column: span 4; display: flex; flex-direction: column; min-width: 0; border: 1.5px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); text-decoration: none; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast), border-color var(--dur-fast); }
.tile:nth-of-type(n + 4) { grid-column: span 3; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: transparent; }
.who__grid { position: relative; }
.who__stop { top: 12px; left: 12px; }
.tile__pic { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-paper-alt); }
/* a new booking lands on each kind in turn (2.8 s each, the "And many more" hub last), one at a time; home.js runs it
   only on screen and holds it with the part's stop icon; under reduced motion every booking rests in place */
.tile__chip { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; box-sizing: border-box; max-width: calc(100% - 24px); padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); opacity: 0; transform: translateY(10px) scale(0.95); transform-origin: 0 100%; animation: tile-chip 19.6s var(--ease-out) calc(var(--i) * 2.8s) infinite both paused; }
.tile__chip-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--tone); color: var(--tone-ink); }
.tile__chip-icon svg { width: 20px; height: 20px; }
.tile__chip-text { display: grid; gap: 1px; min-width: 0; }
.tile__chip-text b { font: 700 0.9375rem/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__chip-text small { font: 500 0.8125rem/1.25 var(--font-ui); color: var(--c-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile--more .tile__hub { animation: tile-hub 19.6s var(--ease-out) 16.8s infinite both paused; }
.who[data-on]:not([data-held]) .tile__chip, .who[data-on]:not([data-held]) .tile--more .tile__hub { animation-play-state: running; }
@keyframes tile-chip { 0% { opacity: 0; transform: translateY(10px) scale(0.95); } 3.2% { opacity: 1; transform: none; } 14.3% { opacity: 1; transform: none; } 18% { opacity: 0; transform: none; } 100% { opacity: 0; transform: translateY(10px) scale(0.95); } }
@keyframes tile-hub { 0%, 100% { transform: none; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-brand) 18%, transparent); } 4% { transform: scale(1.08); box-shadow: 0 0 0 14px color-mix(in srgb, var(--c-brand) 26%, transparent); } 12% { transform: none; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-brand) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tile__chip { animation: none; opacity: 1; transform: none; } .tile--more .tile__hub { animation: none; } }
.tile:nth-of-type(n + 4) .tile__pic { aspect-ratio: 4 / 3; }
/* the health tile's faces fill its right half: its booking stays in the left half, its words wrapping */
.tile__chip--top { top: 12px; bottom: auto; max-width: 54%; transform-origin: 0 0; }
.tile__chip--top .tile__chip-text b, .tile__chip--top .tile__chip-text small { white-space: normal; }
.tile__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.tile:hover .tile__pic img { transform: scale(1.04); }
.tile__body { display: grid; gap: 6px; padding: 16px 18px 20px; }
.tile__name { font: 800 1.25rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.tile__fields { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-soft); }
.tile--more { justify-content: space-between; gap: 12px; padding: 22px; border-color: transparent; background: var(--c-brand-light); }
.tile--more .tile__body { padding: 0; }
.tile__hub { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-brand); color: var(--c-ink); box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-brand) 18%, transparent); }
.tile__mark { width: 28px; height: 28px; fill: currentColor; }
.tile__go { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); }
.tile__go svg { width: 18px; height: 18px; }
@media (max-width: 1000px) { .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile, .tile:nth-of-type(n + 4) { grid-column: span 1; } .tile:nth-of-type(n + 4) .tile__pic { aspect-ratio: 16 / 10; } .tile--more { grid-column: 1 / -1 !important; } }
@media (max-width: 600px) { .who__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { padding-block: var(--section-y); background: var(--c-paper-alt); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--space-6); align-items: start; }
.faq__head { margin-bottom: 0; }
@media (max-width: 900px) { .faq__wrap { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ---------- the close ---------- */
.close { padding-block: var(--section-y); }
.close__frame { position: relative; display: flex; align-items: center; min-height: 620px; padding: 40px; border-radius: var(--radius-xl); overflow: hidden; background: var(--c-paper-alt); }
.close__media { position: absolute; inset: 0; overflow: hidden; }
.close__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 60% 40%; }
.close__card { position: relative; z-index: 2; display: grid; gap: 14px; box-sizing: border-box; width: min(500px, 100%); padding: 32px; border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); }
.close__card h2 { font-size: clamp(2rem, 1.35rem + 2vw, 3rem); }
.close__card > p { color: var(--c-ink-soft); font-size: 1.125rem; }
.picker--close { padding: 0; border: 0; box-shadow: none; margin-top: 4px; }
.close__stop { top: 16px; right: 16px; }
@media (max-width: 760px) {
  .close__frame { display: block; min-height: 0; padding: 0; border-radius: 0; overflow: visible; background: none; }
  .close__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-l); }
  .close__media video { object-position: 55% 40%; }
  .close__card { width: auto; margin-top: -40px; margin-inline: 10px; padding: 24px 20px; }
}