/* fitvee's site look: the home page as official guidance (Kevin 2026-10-14 12:49Z, via brain: "very official, health guidance ... a lot
   of credibility, no AI jargon or styling"). Tokens and self-hosted fonts in the engine's token names (web/public/site.css reads them; its
   defaults sit in :where(:root), so these win), and rules on the engine's home classes (web/public/site-home.css, engine/site/
   home-neutral.ts): the theme adds no markup. Type and space carry the page, as a public health page's do: sans headings in sentence
   case, no emphasis, no cards, boxes or shadows, one hairline between the questions; the accent only on buttons and links. Motion:
   none of its own, and the frame's hover motion on buttons is turned off (web/public/site.css).
   Fonts: Geist and Instrument Serif, SIL OFL 1.1, licences beside the files (the serif stays declared for the pages that quote). */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Geist-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InstrumentSerif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/InstrumentSerif-Italic-latin.woff2") format("woff2"); }

:root {
  --stone: #f7f5f2;
  --stone-2: #f1eee9;
  --paper: #ffffff;
  --ink: #1d1a21;
  --text: #34303a;
  --muted: #5c5664;
  --line: #ddd7cf;
  --accent: #b0205a;
  --accent-hover: #931a4b;
  --night: #1a1019;
  --night-ink: #f8eef4;
  --night-muted: #c4b2c0;
  --peach: #ff8db4;
  --good: #2f6b4f;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
  --radius: 10px;
}

h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.01em; }
/* Every page's buttons (the header's too) with small corners, not pills; the help pages' crumb in sentence case. */
.btn, .button { border-radius: var(--radius); }
.crumb { letter-spacing: 0; text-transform: none; font-size: .875rem; }
/* The engine's notes on a page of its own (its /pricing's refund line while a price test runs; a privacy choice's status): a soft
   full-tint panel, never a box with a coloured bar down its left side (Kevin 2026-10-15 12:16Z: "the most basic ai box"). The tint
   is the stone's own darker step, as the accent stays on buttons and links; a transparent outline keeps its edge in forced colours. */
.refund, .status { border: 0; border-radius: var(--radius); background: var(--stone-2); outline: 1px solid transparent; }

/* ---- the home page: type and rhythm ---------------------------------------------------------------------------------------------- */
.home { color: var(--text); background: var(--paper); }
.home h1, .home h2, .home h3 { color: var(--ink); }
.home em { font-style: normal; color: inherit; }
.home .lead { max-width: 40em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--text); text-wrap: pretty; }
.home .home-head { max-width: 46rem; margin: 0 0 clamp(24px, 3vw, 36px); text-align: left; }
.home .home-head h2, .home-cta h2 { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; text-wrap: balance; }
.home .home-head .lead { margin: 12px 0 0; }
.home-items, .home-plans, .home-steps, .home-faq, .home-cta { padding-block: clamp(44px, 6vw, 80px); }
.home .home-alt { background: var(--stone); }
.home .btn { min-height: 50px; padding: 0 24px; gap: 10px; border-radius: var(--radius); font: 600 16px/1 var(--sans); letter-spacing: 0; }
/* the button's arrow is our own SVG, drawn over the engine's glyph (which stays for screen readers' order, hidden from them) */
.home .btn .arrow { width: 18px; height: 18px; font-size: 0; background: currentColor; -webkit-mask: url("icons/arrow.svg") center / contain no-repeat; mask: url("icons/arrow.svg") center / contain no-repeat; }
.home a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.home a:not(.btn):hover { color: var(--accent-hover); text-decoration-thickness: 2px; }

/* ---- the hero: the words first, the still beside them from 960 px ------------------------------------------------------------------ */
.home-hero { display: grid; padding: 0; background: var(--stone); }
.home-hero > .wrap { order: 1; padding-block: clamp(36px, 6vw, 72px) 32px; }
.home .home-hero > .home-media { order: 2; margin: 0; }
.home .home-hero > .home-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home-hero h1 { max-width: 15em; margin: 0; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; text-wrap: balance; }
.home-hero .lead { margin: 18px 0 0; }
.home .home-hero .home-actions { margin: 26px 0 0; }
@media (min-width: 960px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .home-hero > .wrap { max-width: none; margin: 0; padding: 64px 56px 64px max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); }
  .home .home-hero > .home-media { height: 100%; }
  .home .home-hero > .home-media img { height: 100%; min-height: 480px; aspect-ratio: auto; }
}

/* ---- the guidance: titled lists, two to a row from 720 px, no boxes ------------------------------------------------------------- */
.home .home-items-list { gap: 28px 40px; }
.home .home-items-list li { max-width: 34em; }
.home .home-items-list h3 { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.home .home-items-list p { margin: 0; line-height: 1.55; }
.home .home-items-list .home-link { margin-top: 10px; font-weight: 500; }
@media (min-width: 720px) { .home .home-items-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- a session: three phones, each a screen of the player ------------------------------------------------------------------------ */
.home .home-steps-list li { display: block; }
.home .home-steps-list img { width: 100%; max-width: 260px; aspect-ratio: 600 / 1300; height: auto; border-radius: 15.33% / 7.08%; background: #1b1418; }
.home .home-steps-list h3 { margin: 20px 0 4px; font-size: 18px; line-height: 1.35; }
.home .home-steps-list p { margin: 0; max-width: 26em; }
/* Narrow: each phone small beside its words, one step under another (nothing to scroll sideways, so a keyboard reaches all
   three). From 720 px three across. */
@media (max-width: 719px) {
  .home .home-steps-list { gap: 28px; }
  .home .home-steps-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .home .home-steps-list img { grid-row: span 2; max-width: 112px; }
  .home .home-steps-list h3 { margin: 0 0 4px; align-self: end; }
  .home .home-steps-list p { align-self: start; }
}
@media (min-width: 720px) { .home .home-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }

/* ---- the plans: a still and the words, side by side from 860 px ----------------------------------------------------------------- */
.home .home-plans-list { gap: 40px; }
.home .home-plan { display: flex; flex-direction: column; }
.home .home-plan > img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: var(--radius); }
.home .home-plan-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 0 0; }
.home .home-plan h3 { margin: 0; font-size: 24px; line-height: 1.2; }
.home .home-plan p { margin: 0; }
.home .home-bullets { display: grid; gap: 6px; margin: 4px 0 10px; }
.home .home-bullets li { position: relative; padding-left: 18px; }
.home .home-bullets li::before { content: ""; position: absolute; left: 0; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.home .home-plan .btn { width: auto; align-self: flex-start; margin-top: auto; }
@media (min-width: 860px) { .home .home-plans-list { grid-template-columns: 1fr 1fr; } }

/* ---- the questions ------------------------------------------------------------------------------------------------------------- */
.home .home-faq-list { max-width: 820px; border-top: 1px solid var(--line); }
.home .home-faq-list details { margin: 0; border-bottom: 1px solid var(--line); background: none; }
.home .home-faq-list summary { display: flex; justify-content: space-between; gap: 20px; min-height: 0; padding: 20px 0; list-style: none; cursor: pointer; font: 600 18px/1.4 var(--sans); color: var(--ink); }
.home .home-faq-list summary::-webkit-details-marker { display: none; }
.home .home-faq-list summary::after { content: ""; flex: none; width: 24px; height: 24px; background: var(--muted); -webkit-mask: url("icons/plus.svg") center / contain no-repeat; mask: url("icons/plus.svg") center / contain no-repeat; }
.home .home-faq-list details[open] summary::after { rotate: 45deg; }
.home .home-answer { display: grid; gap: 10px; max-width: 44em; padding: 0 0 22px; color: var(--text); }

/* ---- the closing call: plain, on the paper between the questions' stone and the footer's ---------------------------------------- */
.home-cta { background: var(--paper); text-align: left; }
.home-cta .home-line { max-width: 36em; margin: 12px 0 0; color: var(--text); font-size: clamp(17px, 1.4vw, 19px); }
.home .home-cta .home-actions { margin: 24px 0 0; }

/* ---- forced colors: the icons are masks over currentColor, which the system would flatten to the page's own colour ---------------- */
@media (forced-colors: active) {
  .home .btn .arrow, .home .home-faq-list summary::after, .home .home-bullets li::before { forced-color-adjust: none; background: CanvasText; }
}

/* ==== The women's landings, /walking and /chair (engine.md §44c): the A4 look, on <body class="look-women"> =====================
   The four-page mock's (engine-research fitness/brand/site/mock/four/walking.html, chair.html; ../film/film-a4.css and four.css; Kevin's
   go 2026-10-14 19:46Z): warm cream, Instrument Serif headings with an italic accent (the texts' *words*), Geist, raspberry pill
   buttons, the film full-bleed with the words over it from 1200 px, four phones, three portraits, the 28 days beside a loop and
   beside a phone, the questions, the porch behind the closing call. The engine's markup, restyled; nothing moves but the films. */
.look-women {
  --stone: #f6f1ea;
  --stone-2: #ede5da;
  --paper: #fffdf9;
  --ink: #221a1f;
  --text: #4a4046;
  --muted: #675c62;
  --line: #ddd2c5;
  --night: #1f161b;
  --pill: 999px;
  background: var(--stone);
}
.look-women .nav { background: var(--stone); backdrop-filter: none; -webkit-backdrop-filter: none; }
.look-women .wordmark { gap: 8px; align-items: center; font: 700 21px/1 var(--sans); letter-spacing: -0.04em; }
.look-women .wordmark::before { content: ""; width: 28px; height: 28px; background: url("logo/mark-site.svg") center / contain no-repeat; }
.look-women .btn, .look-women .button { border-radius: var(--pill); }
.look-women .home { background: var(--stone); color: var(--text); }
.look-women .home .home-alt { background: var(--stone-2); }
.look-women .home h1, .look-women .home h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.look-women .home h1 em, .look-women .home h2 em { font-style: italic; color: inherit; }
.look-women .home h1 { margin: 0; font-size: clamp(46px, 7.2vw, 104px); line-height: .98; }
.look-women .home .home-head h2, .look-women .home-cta h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.look-women .home .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; }
.look-women .home .home-head { max-width: 820px; margin-bottom: clamp(40px, 6vw, 72px); }
.look-women .home .home-head .lead { margin-top: 20px; }
.look-women .home-steps .home-head, .look-women .home-faq .home-head, .look-home .home-steps .home-head { margin-inline: auto; text-align: center; }
.look-women .home-steps .home-head .lead, .look-home .home-steps .home-head .lead { margin-inline: auto; }
.look-women .home-steps, .look-women .home-items, .look-women .home-faq { padding-block: clamp(88px, 11vw, 160px); }
.look-home .home-steps { padding-block: clamp(56px, 7vw, 96px); }
.look-women .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); letter-spacing: -0.01em; }
.look-women .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }

/* the film: on a phone over the words, which sit on cream; from 1200 px full-bleed, the words over its dark corner */
.look-women .home-hero { position: relative; display: block; padding: 0; background: var(--night); }
.look-women .home .home-hero > .home-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #2b2226; }
.look-women .home .home-hero > .home-media video, .look-women .home .home-hero > .home-media img { width: 100%; height: 100%; object-fit: cover; }
.look-women .home-hero > .wrap { padding-block: 36px 64px; background: var(--stone); }
.look-women .home-hero .lead { margin: 18px 0 28px; }
.look-women .home .home-hero .home-actions { margin: 0; }
@media (min-width: 1200px) {
  .look-women .home .home-hero > .home-media { height: min(calc(100svh - 72px), 56.25vw); aspect-ratio: auto; }
  /* measured against every frame of both films by the brand kit (AA from 1200 to 1920 px) */
  .look-women .home .home-hero > .home-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 110% 130% at 0% 100%, rgba(24, 15, 20, .86) 0%, rgba(24, 15, 20, .74) 40%, rgba(24, 15, 20, .4) 70%, rgba(24, 15, 20, 0) 100%); }
  .look-women .home-hero > .wrap { position: absolute; left: 0; right: 0; bottom: 92px; max-width: none; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); background: none; pointer-events: none; }
  .look-women .home-hero .home-content { max-width: 560px; }
  .look-women .home .home-hero h1 { color: #fff; font-size: clamp(56px, 5.6vw, 88px); }
  .look-women .home-hero .lead { color: rgba(255, 255, 255, .92); }
  .look-women .home-hero .btn { pointer-events: auto; }
  .look-women .home-hero .btn:focus-visible { outline-color: #fff; }
}

/* a session in four phones: two to a row on a phone (nothing to scroll sideways), four across from 1040 px */
.look-women .home .home-steps-list, .look-home .home .home-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
.look-women .home .home-steps-list li, .look-home .home .home-steps-list li { display: grid; grid-template-columns: none; gap: 18px; justify-items: center; align-content: start; text-align: center; }
.look-women .home .home-steps-list img, .look-home .home .home-steps-list img { grid-row: auto; width: 100%; max-width: 272px; height: auto; aspect-ratio: 546 / 1178; border-radius: 0; background: none; filter: drop-shadow(0 30px 30px rgba(34, 26, 31, .28)); }
.look-women .home .home-steps-list h3, .look-home .home .home-steps-list h3 { align-self: auto; margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.look-women .home .home-steps-list h3::before, .look-home .home .home-steps-list h3::before { content: none; }
.look-women .home .home-steps-list p, .look-home .home .home-steps-list p { align-self: auto; margin: -12px 0 0; max-width: 250px; font-size: 15px; color: var(--muted); }
@media (min-width: 1040px) { .look-women .home .home-steps-list, .look-home .home .home-steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* made for the body you have now: three portraits */
.look-women .home #body .home-items-list { grid-template-columns: none; gap: 40px; }
.look-women .home #body .home-items-list li { max-width: none; }
.look-women .home #body .home-items-list img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; }
.look-women .home #body .home-items-list h3 { margin: 20px 0 0; font: 400 30px/1.05 var(--serif); color: var(--ink); }
.look-women .home #body .home-items-list p { margin-top: 8px; max-width: 26em; }
@media (min-width: 760px) { .look-women .home #body .home-items-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* what's in your 28 days, by the loop; one day at a time, by the phone: the words beside the picture from 960 px */
.look-women .home :is(#plan, #days) .wrap { display: grid; gap: 36px; align-items: center; }
.look-women .home :is(#plan, #days) .home-head { margin: 0; }
.look-women .home #plan .home-media { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #2b2226; }
.look-women .home #plan .home-media video, .look-women .home #plan .home-media img { width: 100%; height: 100%; object-fit: cover; }
.look-women .home #days .home-media { margin: 0; justify-self: center; }
.look-women .home #days .home-media img { width: 300px; max-width: 100%; height: auto; filter: drop-shadow(0 40px 40px rgba(34, 26, 31, .3)); }
.look-women .home :is(#plan, #days) .home-items-list { grid-template-columns: none; gap: 18px; max-width: 34em; }
.look-women .home :is(#plan, #days) .home-items-list li { max-width: none; padding-top: 18px; border-top: 1px solid var(--line); }
.look-women .home :is(#plan, #days) .home-items-list h3 { margin: 0 0 2px; font: 600 17px/1.4 var(--sans); color: var(--ink); }
.look-women .home #plan .home-actions { margin: 8px 0 0; }
@media (min-width: 960px) {
  .look-women .home :is(#plan, #days) .wrap { grid-template-columns: 1.1fr 1fr; column-gap: 64px; row-gap: 24px; }
  .look-women .home :is(#plan, #days) .home-media { grid-column: 1; grid-row: 1 / span 3; }
  .look-women .home :is(#plan, #days) .home-head, .look-women .home :is(#plan, #days) .home-items-list, .look-women .home #plan .home-actions { grid-column: 2; }
  .look-women .home #days .wrap { grid-template-columns: 1fr 1fr; }
  .look-women .home :is(#plan, #days) .home-head { align-self: end; }
}

/* the questions */
.look-women .home .home-faq-list { max-width: 860px; margin-inline: auto; }
.look-women .home .home-faq-list summary { padding: 24px 0; font: 600 19px/1.35 var(--sans); }

/* the closing call over the porch: the words at its foot, centred on a phone, to the left from 900 px */
.look-women .home-cta { position: relative; overflow: hidden; padding: 0; color: #fff; background: var(--night); text-align: center; }
.look-women .home .home-cta > .home-media { position: absolute; inset: 0; margin: 0; }
.look-women .home .home-cta > .home-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.look-women .home-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(24, 15, 20, .86) 0%, rgba(24, 15, 20, .7) 32%, rgba(24, 15, 20, .3) 52%, rgba(24, 15, 20, 0) 72%); }
.look-women .home-cta > .wrap { position: relative; z-index: 1; display: grid; justify-items: center; align-content: end; gap: 22px; min-height: clamp(560px, 52vw, 800px); padding-block: 0 clamp(48px, 6vw, 88px); }
.look-women .home .home-cta h2 { color: #fff; }
.look-women .home .home-cta .home-actions { margin: 0; }
.look-women .home-cta .btn { background: #fff; color: var(--ink); }
.look-women .home-cta .btn:hover { background: var(--stone); }
.look-women .home-cta .btn:focus-visible { outline-color: #fff; }
@media (min-width: 900px) { .look-women .home-cta > .wrap { justify-items: start; text-align: left; } .look-women .home .home-cta h2 { max-width: 7.5em; } }

/* the footer on the page's cream; its doctor line set apart a little */
.look-women .site-footer { background: var(--stone); }
.look-women .foot-note { color: var(--text); }

/* ==== fitvee.com, the home page: round 3 of the four-page mock, on <body class="look-home"> (engine.md §44c) =====================
   The general page for both lines (mock/four/index.html, four.css .t-home): the A4 cream and type, but ink buttons and a green tick,
   neither line's colour; the women's cards keep their raspberry button, the men's card is dark. The words centred over a framed
   film, three plan cards, the research as four cards with the body's name over each, the questions, a dark closing call
   (round 8, 2026-10-14 22:30Z: no "what fitvee is and isn't"). Nothing moves but the films. */
.look-home {
  --stone: #f6f1ea;
  --stone-2: #ede5da;
  --paper: #fffdf9;
  --ink: #1f1a17;
  --text: #4a4046;
  --muted: #675c62;
  --line: #ddd2c5;
  --accent: #1f1a17;
  --accent-hover: #3d3530;
  /* 4.9:1 on the darker band (the ticks; 4.2 before: the site's speed pass, 2026-10-15). */
  --green: #266e4c;
  --night: #1f1a17;
  --pill: 999px;
  background: var(--stone);
}
.look-home .nav { background: var(--stone); backdrop-filter: none; -webkit-backdrop-filter: none; }
.look-home .wordmark { gap: 8px; align-items: center; font: 700 21px/1 var(--sans); letter-spacing: -0.04em; }
.look-home .wordmark::before { content: ""; width: 28px; height: 28px; background: url("logo/mark-home.svg") center / contain no-repeat; }
.look-home .btn, .look-home .button { border-radius: var(--pill); }
.look-home .btn-primary { background: var(--ink); color: #fff; }
.look-home .btn-primary:hover { background: var(--accent-hover); }
.look-home .home { background: var(--stone); color: var(--text); }
.look-home .home .home-alt { background: var(--stone-2); }
.look-home .home h1, .look-home .home h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.01em; text-wrap: balance; }
.look-home .home h1 em, .look-home .home h2 em { font-style: italic; color: inherit; }
.look-home .home .home-head h2, .look-home .home-cta h2 { font-size: clamp(40px, 5vw, 72px); line-height: 1; }
.look-home .home .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; }
/* Kevin 2026-10-15 13:11Z: "shorten spaces between paragraphs", the gap under the film most of all: every gap of the look about
   a third shorter than before (sections 88-160 px to 56-96 px, a heading's foot 40-72 px to 28-44 px). */
.look-home .home .home-head { max-width: 820px; margin-bottom: clamp(28px, 4vw, 44px); }
.look-home .home .home-head .lead { margin-top: 14px; }
.look-home .home-faq .home-head { margin-inline: auto; text-align: center; }
.look-home .home-plans, .look-home .home-items, .look-home .home-faq { padding-block: clamp(56px, 7vw, 96px); }
/* the plans right under the film: the hero's own foot is the gap between them */
.look-home .home-hero + .home-plans { padding-top: 0; }
.look-home .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); letter-spacing: -0.01em; }
.look-home .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
.look-home .home a.home-textlink { font-weight: 600; color: var(--ink); text-underline-offset: 4px; }

/* the words centred, then the film in a frame */
.look-home .home-hero { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 64px); background: var(--stone); }
/* (the guidance page's rule from 960 px puts the words in the left half: here they are centred over the film, at every width) */
.look-home .home-hero > .wrap { order: 1; max-width: 1240px; margin-inline: auto; padding: 0 var(--gutter); text-align: center; }
.look-home .home .home-hero > .home-media { order: 2; width: min(1240px - 2 * var(--gutter), 100% - 2 * var(--gutter)); margin: clamp(32px, 4vw, 48px) auto 0; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: #2b2226; box-shadow: 0 40px 60px -40px rgba(31, 26, 23, .6); }
.look-home .home .home-hero > .home-media video, .look-home .home .home-hero > .home-media img { width: 100%; height: 100%; object-fit: cover; }
.look-home .home-hero .home-content { max-width: 1000px; margin-inline: auto; }
.look-home .home .home-hero h1 { max-width: none; margin: 0; font-size: clamp(46px, 6.4vw, 92px); line-height: .98; }
.look-home .home-hero .lead { margin: 18px auto 26px; }
.look-home .home .home-hero .home-actions { justify-content: center; margin: 0; }

/* three plans: cards with their loop on top; the men's (the third) dark */
.look-home .home .home-plans-list { grid-template-columns: none; gap: 24px; }
@media (min-width: 900px) { .look-home .home .home-plans-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.look-home .home .home-plan { overflow: hidden; border-radius: 28px; background: var(--paper); box-shadow: 0 30px 60px -50px rgba(31, 26, 23, .5); }
.look-home .home .home-plan > .home-media { margin: 0; aspect-ratio: 16 / 9; background: #2b2226; }
.look-home .home .home-plan > .home-media video, .look-home .home .home-plan > .home-media img { width: 100%; height: 100%; object-fit: cover; }
.look-home .home .home-plan-body { gap: 12px; padding: 26px 26px 30px; }
.look-home .home .home-plan .home-tag { justify-self: start; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: var(--pill); background: var(--stone-2); color: var(--ink); font-size: 13px; }
.look-home .home .home-plan h3 { margin: 0; font: 400 34px/1 var(--serif); color: var(--ink); }
.look-home .home .home-bullets li::before { background: #b0205a; }
.look-home .home .home-plan .btn { background: #b0205a; color: #fff; }
.look-home .home .home-plan .btn:hover { background: #931a4b; }
.look-home .home .home-plan:nth-child(3) { background: #23201d; color: #ebe1d3; }
.look-home .home .home-plan:nth-child(3) h3 { font: 700 30px/1.05 var(--sans); letter-spacing: -0.03em; color: #fff; }
.look-home .home .home-plan:nth-child(3) p { color: #ebe1d3; }
.look-home .home .home-plan:nth-child(3) .home-tag { background: #050300; color: #ebe1d3; }
.look-home .home .home-plan:nth-child(3) .home-bullets li::before { background: #8fb3d9; }
.look-home .home .home-plan:nth-child(3) .btn { background: #ebe1d3; color: #050300; }
.look-home .home .home-plan:nth-child(3) .btn:hover { background: #f6efe5; }

/* the research: four cards (Kevin 2026-10-15 13:22Z: "not alligned text walls. style them, allign them"). Each card's parts sit in rows
   the four share (subgrid: its picture, the number, what it means, the source's words, the plan, the source), so each part starts level
   in every card and the sources share a line. The number big in the serif; what it means plain; the source's words in the italic serif;
   what a plan includes in one line after a small raspberry tick, its "In the plans:" for screen readers only (Kevin 13:29Z: the pills
   were ugly: no pill, no box, no side bar); the source small. On a phone the cards stack, the picture 4:3 with the move in frame, the
   same rhythm. */
.look-home .home #guidelines .home-items-list { grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 640px) { .look-home .home #guidelines .home-items-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .look-home .home #guidelines .home-items-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.look-home .home #guidelines .home-items-list li { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; max-width: none; margin-bottom: 40px; }
.look-home .home #guidelines .home-items-list img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 20%; border-radius: 22px; }
@media (min-width: 640px) { .look-home .home #guidelines .home-items-list img { aspect-ratio: 4 / 5; } }
.look-home .home #guidelines .home-tag { position: absolute; top: 12px; left: 12px; margin: 0; padding: 3px 9px; border-radius: var(--pill); background: #fff; color: var(--ink); font-size: 12px; letter-spacing: .04em; }
.look-home .home #guidelines .home-items-list h3 { margin: 16px 0 2px; font: 400 clamp(52px, 4.6vw, 64px)/.95 var(--serif); letter-spacing: -0.01em; color: var(--ink); }
.look-home .home #guidelines .home-items-list h3 + p { margin: 0 0 12px; font: 600 15px/1.35 var(--sans); color: var(--ink); }
.look-home .home #guidelines .home-items-list h3 + p + p { margin: 0 0 14px; font: italic 400 19px/1.25 var(--serif); color: var(--text); }
.look-home .home #guidelines .home-items-list h3 + p + p + p { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 14px/1.35 var(--sans); color: var(--ink); }
.look-home .home #guidelines .home-items-list h3 + p + p + p::before { content: ""; flex: none; width: 16px; height: 16px; background: #b0205a; -webkit-mask: url("icons/tick.svg") center / contain no-repeat; mask: url("icons/tick.svg") center / contain no-repeat; }
.look-home .home #guidelines .home-items-list h3 + p + p + p strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.look-home .home #guidelines .home-link { margin: 0; font-size: 12px; font-weight: 400; }
.look-home .home #guidelines .home-link a { color: var(--muted); }
/* forced colours: the tick and the plans' bullets are masks over a colour the system would flatten (after their own rules, which would win) */
@media (forced-colors: active) {
  .look-home .home #guidelines .home-items-list h3 + p + p + p::before, .look-home .home .home-bullets li::before, .look-home .home .home-plan:nth-child(3) .home-bullets li::before { forced-color-adjust: none; background: CanvasText; }
}

.look-home .home .home-faq-list { max-width: 860px; margin-inline: auto; }
.look-home .home .home-faq-list summary { padding: 18px 0; font: 600 19px/1.35 var(--sans); }

/* the closing call: dark, centred, the mark over the words */
.look-home .home-cta { padding-block: clamp(56px, 7vw, 96px); background: var(--night); text-align: center; }
.look-home .home-cta > .wrap { display: grid; justify-items: center; gap: 24px; }
.look-home .home-cta > .wrap::before { content: ""; width: 56px; height: 56px; background: url("logo/mark-light.svg") center / contain no-repeat; }
.look-home .home .home-cta h2 { color: #fff; }
.look-home .home .home-cta .home-actions { justify-content: center; margin: 0; }
.look-home .home-cta .btn { background: #fff; color: var(--ink); }
.look-home .home-cta .btn:hover { background: var(--stone); }
.look-home .home-cta .btn:focus-visible { outline-color: #fff; }
.look-home .site-footer { background: var(--stone); }

/* /pricing (round 9, Kevin 2026-10-15 00:16Z; the brand kit's mock/four/r9.css): the home page's look, the prices on the first screen
   as two cards, 4 weeks first and dark; the ticked lines and the note; /walking's phones (the women's rules above, shared); how
   billing goes as three dots on a line, a column on a phone. */
.look-home .home #prices { padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.look-home .home #prices .home-head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.look-home .home #prices h1 { margin: 0; font-size: clamp(44px, 6vw, 88px); line-height: .98; }
.look-home .home #prices .lead { margin: 20px auto 0; }
.look-home .home .home-price-list { max-width: 860px; margin-inline: auto; gap: 18px; }
@media (min-width: 720px) { .look-home .home .home-price-list { grid-template-columns: 1fr 1fr; gap: 24px; } }
.look-home .home .home-price { gap: 6px; padding: 30px 28px 28px; border-radius: 28px; }
.look-home .home .home-price-featured { background: var(--night); color: #fff; box-shadow: 0 30px 60px -30px rgba(31, 26, 23, .55); }
.look-home .home .home-price h3 { margin: 0; font: 600 17px/1.2 var(--sans); letter-spacing: 0; color: inherit; }
.look-home .home .home-price-amount { margin: 8px 0 0; font: 400 clamp(64px, 8vw, 88px)/.95 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.look-home .home .home-price-for { font: 500 16px/1.35 var(--sans); color: var(--muted); }
.look-home .home .home-price-day { margin-top: 14px; padding-top: 14px; font: 650 16px/1.3 var(--sans); color: var(--ink); }
.look-home .home .home-price-then { margin-bottom: 18px; font: 650 16px/1.35 var(--sans); color: var(--ink); }
.look-home .home .home-price-featured .home-price-amount, .look-home .home .home-price-featured .home-price-day, .look-home .home .home-price-featured .home-price-then { color: #fff; }
.look-home .home .home-price-featured .home-price-for { color: rgba(255, 255, 255, .78); }
.look-home .home .home-price-featured .home-price-day { border-top-color: rgba(255, 255, 255, .18); }
.look-home .home .home-price .btn { width: 100%; }
.look-home .home .home-price-featured .btn { background: #fff; color: var(--ink); }
.look-home .home .home-price-featured .btn:hover { background: var(--stone); }
.look-home .home .home-price-featured :focus-visible { outline-color: #fff; }
.look-home .home .home-ticks { justify-content: center; gap: 10px 22px; max-width: 860px; margin: 26px auto 0; }
.look-home .home .home-ticks li { padding-left: 26px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.look-home .home .home-ticks li::before { font-weight: 700; color: var(--green); }
.look-home .home .home-price-note { max-width: 640px; margin: 14px auto 0; text-align: center; font: 500 14px/1.45 var(--sans); color: var(--muted); }
.look-home .home #billing { padding-block: clamp(56px, 7vw, 96px); }
.look-home .home #billing .home-head { margin: 0 auto; text-align: center; }
.look-home .home .home-billing-list { position: relative; max-width: 980px; margin: clamp(24px, 3vw, 40px) auto 0; grid-template-columns: none; gap: 22px; }
.look-home .home .home-billing-list li { position: relative; display: grid; gap: 6px; padding-left: 38px; }
.look-home .home .home-billing-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--night); box-shadow: 0 0 0 6px var(--stone); }
.look-home .home .home-alt .home-billing-list li::before { box-shadow: 0 0 0 6px var(--stone-2); }
.look-home .home .home-billing-list li:not(:last-child)::after { content: ""; position: absolute; left: 9px; top: 28px; bottom: -22px; width: 2px; background: var(--line); }
.look-home .home .home-billing-list h3 { margin: 0; font: 400 28px/1.1 var(--serif); color: var(--ink); }
.look-home .home .home-billing-list p { font: 500 16px/1.4 var(--sans); color: var(--text); }
@media (min-width: 760px) {
  .look-home .home .home-billing-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .look-home .home .home-billing-list li { padding: 40px 0 0; text-align: center; justify-items: center; }
  .look-home .home .home-billing-list li::before { left: calc(50% - 10px); top: 0; }
  .look-home .home .home-billing-list li:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 4px); top: 9px; bottom: auto; width: auto; height: 2px; }
}
.look-home .home #billing .home-price-note { margin-top: 28px; }

/* ==== /men, on <body class="look-men"> (engine.md §44c; Kevin 2026-10-14 21:20Z: "build it out") =================================
   The brand kit's round 6 layout with round 7's pictures (mock/four/men.html; four.css .t-men and its round 6 and 7 blocks): the
   coal of the men's funnel, cream on near-black, one accent in steel blue (Kevin 19:46Z: no orange), Inter, headings in capitals.
   The question over the still of his film; the four problems as loops, 2 x 2 on a phone and four across from 900 px, the turn under
   them; today's session beside its loop; the easier-to-harder steps, words on a line; the age cards; the questions. Motion is CSS
   only and only under prefers-reduced-motion: no-preference, inside @supports for the scroll-driven part: the still settles in once,
   the loops rise and come to size as their grid enters, the steps' line draws and their words rise. Words move, they never fade. */
/* Inter's variable latin file (@fontsource-variable/inter 5.3.0, OFL): every weight /men draws, 400 to 800, in one 48 KB file in place
   of four of 24 KB (the site's speed, 2026-10-15), preloaded on /men only (./site.ts). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Inter-latin-wght.woff2") format("woff2"); }
.look-men {
  --stone: #050300;
  --stone-2: #12100c;
  --paper: #23211d;
  --ink: #ebe1d3;
  --text: #d6ccbe;
  --muted: #b3a999;
  --line: rgba(235, 225, 211, .16);
  --accent: #8fb3d9;
  --accent-hover: #b3cbe6;
  --sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --pill: 999px;
  background: var(--stone);
  color: var(--text);
  font-family: var(--sans);
}
.look-men .nav { background: var(--stone); border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.look-men .wordmark { gap: 8px; align-items: center; font: 700 21px/1 var(--sans); letter-spacing: -0.04em; color: var(--ink); }
.look-men .wordmark::before { content: ""; width: 28px; height: 28px; background: url("logo/mark-light.svg") center / contain no-repeat; }
.look-men .nav-links a, .look-men .nav-right .account, .look-men .menu-btn { color: var(--text); }
.look-men .pop { background: var(--paper); }
.look-men .pop a { color: var(--ink); }
.look-men .btn, .look-men .button { border-radius: var(--pill); }
.look-men .btn-primary { background: var(--ink); color: #050300; }
.look-men .btn-primary:hover { background: #f6efe5; }
.look-men .btn.soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.look-men :focus-visible { outline-color: var(--accent); }
.look-men .home { background: var(--stone); color: var(--text); }
.look-men .home .home-alt { background: var(--stone-2); }
.look-men .home h1, .look-men .home h2 { font-family: var(--sans); font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: -0.02em; text-wrap: balance; }
.look-men .home h1 em, .look-men .home h2 em { font-style: normal; color: var(--accent); }
.look-men .home h1 { max-width: 9em; margin: 0; font-size: clamp(40px, 6.4vw, 96px); line-height: .94; }
.look-men .home .home-head h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1; }
.look-men .home .lead { color: var(--text); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 34em; }
.look-men .home .home-head { max-width: 820px; margin-bottom: 0; }
.look-men .home .home-head .lead { margin-top: 14px; }
.look-men .home .btn { min-height: 52px; padding: 0 28px; font: 600 17px/1 var(--sans); }
.look-men .nav .btn { min-height: 40px; padding: 0 18px; font-size: 15px; }
.look-men .home .home-actions { margin: 0; }

/* the question over the still of his film: on a phone the still, then the words on black; from 1200 px the words over its corner */
.look-men .home-hero { position: relative; display: block; padding: 0; background: var(--stone); }
.look-men .home .home-hero > .home-media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #050300; }
.look-men .home .home-hero > .home-media img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: 70% 40%; }
.look-men .home-hero > .wrap { padding-block: 32px 56px; }
.look-men .home-hero .lead { margin: 18px 0 28px; }
@media (min-width: 1200px) {
  .look-men .home .home-hero > .home-media { height: min(calc(100svh - 72px), 56.25vw); aspect-ratio: auto; }
  .look-men .home .home-hero > .home-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 120% 150% at 0% 100%, rgba(5, 3, 0, .94) 0%, rgba(5, 3, 0, .86) 40%, rgba(5, 3, 0, .5) 68%, rgba(5, 3, 0, 0) 100%); }
  .look-men .home-hero > .wrap { position: absolute; left: 0; right: 0; bottom: 88px; max-width: none; padding: 0 max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter))); pointer-events: none; }
  .look-men .home-hero .home-content { max-width: 640px; }
  .look-men .home .home-hero h1 { color: #fff; font-size: clamp(56px, 5.4vw, 88px); }
  .look-men .home-hero .btn { pointer-events: auto; }
}

/* the four problems: 2 x 2 on a phone, four across from 900 px; the turn under them, then the button */
.look-men .home #feel { padding-block: clamp(36px, 6vw, 88px) clamp(48px, 7vw, 96px); }
.look-men .home #feel .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.look-men .home #feel .home-items-list { order: 1; width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .look-men .home #feel .home-items-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.look-men .home #feel .home-items-list li { max-width: none; }
.look-men .home #feel .home-media { margin: 0; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--paper); }
.look-men .home #feel .home-media video, .look-men .home #feel .home-media img { width: 100%; height: 100%; object-fit: cover; }
.look-men .home #feel .home-items-list h3 { margin: 10px 0 0; font: 800 clamp(15px, 1.6vw, 22px)/1.1 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.look-men .home #feel .home-head { order: 2; margin-top: clamp(28px, 4vw, 56px); }
.look-men .home #feel .home-head h2 { font-size: clamp(30px, 4.6vw, 64px); }
.look-men .home #feel .home-actions { order: 3; margin-top: 22px; }

/* today's session, beside its loop from 900 px */
.look-men .home :is(#how, #ladder) { padding-block: clamp(48px, 6vw, 88px); }
.look-men .home #how .wrap { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .look-men .home #how .wrap { grid-template-columns: 1fr 1fr; gap: 56px; } }
.look-men .home #how .home-media { margin: 0; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--paper); }
.look-men .home #how .home-media video, .look-men .home #how .home-media img { width: 100%; height: 100%; object-fit: cover; }

/* the steps: easier to harder, words on a line that runs from the page's line to the accent */
.look-men .home #ladder .home-head { margin-bottom: 28px; }
.look-men .home #ladder .home-items-list { grid-template-columns: none; gap: 30px; }
.look-men .home #ladder .home-items-list li { max-width: none; }
.look-men .home #ladder .home-items-list h3 { margin: 0 0 14px; font: 700 15px/1 var(--sans); color: var(--muted); }
.look-men .home #ladder .home-items-list ul { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 0 0 18px; list-style: none; }
.look-men .home #ladder .home-items-list ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--line), var(--accent)); }
.look-men .home #ladder .home-items-list ul li { font: 800 clamp(17px, 3vw, 44px)/1 var(--sans); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
.look-men .home #ladder .home-items-list p { display: flex; justify-content: space-between; margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.look-men .home #ladder .home-items-list strong { font-weight: 400; }
.look-men .home #ladder .home-actions { margin-top: 8px; }

/* his age: four cards with a cream label bar, as the funnel's first screen draws them */
.look-men .home-pick { padding-block: clamp(64px, 9vw, 120px); }
.look-men .home-pick .home-head { margin: 0 auto 32px; text-align: center; }
.look-men .home-pick .home-head .lead { margin-inline: auto; }
.look-men .home .home-pick-list { gap: 14px; }
@media (min-width: 900px) { .look-men .home .home-pick-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.look-men .home .home-pick-list a, .look-men .home .home-pick-card { position: relative; overflow: hidden; gap: 0; border-radius: 18px; background: var(--paper); color: #050300; }
.look-men .home .home-pick-list img { border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.look-men .home .home-pick-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 12px 12px 14px; background: var(--ink); color: #050300; font: 700 16px/1 var(--sans); white-space: nowrap; }
.look-men .home .home-pick-list a:hover .home-pick-label { background: #fff; }
/* two cards to a row at 320 px are about 136 px wide: the label and its arrow fit at 14 px */
@media (max-width: 359px) { .look-men .home .home-pick-label { gap: 4px; padding: 10px; font-size: 14px; } }
.look-men .home .home-pick .home-note { margin: 18px auto 0; text-align: center; font-size: 13px; color: var(--muted); }
.look-men .home .home-note a, .look-men .home a:not(.btn) { color: var(--ink); }
.look-men .home .home-pick .home-actions { justify-content: center; margin-top: 20px; }

.look-men .home-faq .home-head { margin: 0 auto 32px; text-align: center; }
.look-men .home .home-faq-list { max-width: 860px; margin-inline: auto; border-color: var(--line); }
.look-men .home .home-faq-list details { border-color: var(--line); }
.look-men .home .home-faq-list summary { padding: 24px 0; font: 600 19px/1.35 var(--sans); color: var(--ink); }
.look-men .home .home-faq-list summary::after { background: var(--muted); }
.look-men .home-faq { padding-block: clamp(64px, 9vw, 120px); }
.look-men .site-footer { background: var(--stone); color: var(--muted); }
.look-men .foot-h, .look-men .foot-cols a { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* the still settles in, once, in under 5 seconds (WCAG 2.2.2: motion that starts by itself and can't be paused stops within 5 s) */
  .look-men .home .home-hero > .home-media img { animation: men-settle 4.5s cubic-bezier(.2, .7, .2, 1) both; }
  @supports (animation-timeline: view()) {
    /* the four problems rise one after another as the grid enters, each loop coming to size */
    .look-men .home #feel .home-items-list li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .look-men .home #feel .home-items-list li:nth-child(2) { animation-range: entry 8% entry 88%; }
    .look-men .home #feel .home-items-list li:nth-child(3) { animation-range: entry 16% entry 96%; }
    .look-men .home #feel .home-items-list li:nth-child(4) { animation-range: entry 24% entry 100%; }
    .look-men .home #feel .home-media { animation: men-zoom linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .look-men .home #feel .home-head { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
    /* the steps: the line draws from easier to harder, the words come up one by one */
    .look-men .home #ladder .home-items-list ul::after { transform-origin: left; animation: men-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .look-men .home #ladder .home-items-list ul li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .look-men .home #ladder .home-items-list ul li:nth-child(2) { animation-range: entry 20% cover 45%; }
    .look-men .home #ladder .home-items-list ul li:nth-child(3) { animation-range: entry 30% cover 50%; }
    .look-men .home #ladder .home-items-list ul li:nth-child(4) { animation-range: entry 40% cover 55%; }
    .look-men .home .home-pick-list li { animation: men-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  @keyframes men-settle { from { transform: scale(1.08); } to { transform: none; } }
  /* a picture may fade in as it comes to size; words only rise */
  @keyframes men-zoom { from { transform: scale(.86); opacity: .3; } to { transform: none; opacity: 1; } }
  @keyframes men-rise { from { transform: translateY(36px); } to { transform: none; } }
  @keyframes men-draw { from { transform: scaleX(0); } to { transform: none; } }
}

/* ---- the frame's hover motion off (web/public/site.css draws it under this same condition): no sheen, no lift, no stepping arrow.
   Last in the file, under prefers-reduced-motion: no-preference, where the frame's own is. -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn:not(.soon)::after { content: none; }
  .btn-primary:hover, .button:hover, .btn-light:not(.soon):hover { transform: none; }
  a:hover .arrow { translate: none; }
}