/* The front door (#197, the lead's spec C:\TrillyOps\plans\2026-10-22-new-home-spec.md) in the v2 system (calm batch G, #176, #183,
   #190): what Trilly is, the AI apps, how it works, the proof on the night band, the role tabs, "After
   you add it", making your own, teams, Enterprise, the doors, questions and the closing ask. On site.css's tokens: the v2 scale,
   Gabarito at 600 and 700, Lexend 400 to 600, 1 px lines, nothing lifting on hover. Motion is transform and opacity, once, and none
   with reduced motion. Loaded on "/" only (IndexModel.HomeCss), with pictures.css for the pictures and enterprise.css for the buyer
   bands' pictures. Every class starts hm-. */

/* ---------- 1. The ask ---------- */
.hm-hero h1{max-width:9.5em;margin:0;position:relative;z-index:0;font-size:var(--h1-hero)}
/* The hero (home I, #200): the title, one line and the search, centred on the soft cream */
.hm-hero{padding:clamp(64px,10vw,128px) 0 clamp(64px,9vw,112px);overflow-x:clip;background:var(--cream-soft);text-align:center}
.hm-hero-in{display:flex;flex-direction:column;align-items:center;gap:22px}
.hm-hero .hm-hero-in h1{max-width:14ch;line-height:1.02;text-wrap:balance}
.hm-hero-in .lead{margin:0;max-width:32rem;text-wrap:balance}
.hm-hero-in .search{width:100%;max-width:640px;margin:12px 0 0}
.hm-mark{text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:.14em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.hm-short{display:none}

/* The skills' list is the hero's one switch: each a link to its skill's page, a button once home.js runs (44 px tall at least). */
.hm-tag{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:500;line-height:1.2;color:var(--navy);background:var(--white);border-radius:999px;padding:5px 11px;box-shadow:0 0 0 1px var(--line)}
.hm-pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:500;line-height:1.3;padding:2px 10px;border-radius:999px;background:var(--mist);color:var(--navy);white-space:nowrap}
.hm-pill .ui-ico{width:15px;height:15px}
.hm-pill-warn{background:var(--cream);color:var(--warn)}

/* ---------- Sections, fields and links ---------- */
.hm-sec{padding:clamp(48px,4.5vw,56px) 0 0}
.hm-sec-head{margin-bottom:clamp(20px,2.4vw,28px)}
.hm-sec-head h2{margin:0}
.hm-sec-head .lead{margin:12px 0 0}
.hm-field{border-radius:40px;overflow:hidden}
.hm-go{display:inline-flex;align-items:center;gap:8px;color:var(--navy);font-weight:500;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hm-go .ui-ico{width:18px;height:18px;transition:transform .15s}
.hm-go:hover .ui-ico{transform:translateX(4px)}

/* ---------- 2. The AI apps: one line, the apps as wordmarks in our own type ---------- */
/* The AI apps (mockup I, #199): a card an app, from the link guides; the linked app's card in green, the rest "Steps ready" */

/* What a skill is (mockup I, #199): a phone's app store beside Trilly in our own shapes, then the four ideas that map across */
.hm-store{background:var(--cream-soft);padding-bottom:clamp(48px,4.5vw,56px)}
.hm-store-h{max-width:20em;margin:0 auto;text-align:center}
.hm-store-s{border:2px solid var(--navy);border-radius:999px;padding:8px 14px;font-size:var(--fs-small);color:var(--soft)}
.hm-store-ic{flex:none;width:44px;height:44px;border-radius:12px;border:3px solid var(--navy)}
.hm-store-t{display:grid;place-items:center;background:var(--navy)}
.hm-store-t svg{width:26px;height:26px}
.hm-store-get{flex:none;border-radius:999px;padding:6px 14px;font-size:var(--fs-small);font-weight:500;background:var(--ice);white-space:nowrap}
.hm-store-get.is-add{background:var(--navy);color:var(--white)}

/* ---------- 3. How it works: three steps, each with a small picture ---------- */

/* ---------- 4. Tested before you trust it: the night band, once. The flip and the score beside the scoreboard ---------- */

.hm-see-pics{align-self:stretch;min-width:0}
.hm-co-pic{min-width:0}   /* the bands' pictures shrink with their column, never past it */


/* Trilly for your team (mockup I, #199): approve once, on everyone's AI, see it work */
.hm-team .hm-fine{margin-top:20px}
.hm-team .hm-acts{margin-top:18px}

/* "See which skill does the job best" (#200): transparent performance the way people shop, for whoever they shop for */
.hm-pf-head{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:48rem;margin-bottom:8px}
.hm-pf-head h2,.hm-pf-head .lead{margin:0}
.hm-pf-panel{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(16px,3vw,32px);box-shadow:0 2px 4px rgba(13,44,84,.06),0 30px 56px -34px rgba(13,44,84,.35)}
.hm-pf-job{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:16px}
.hm-pf-for{margin:0;font-weight:500;color:var(--soft)}
.hm-pf-q{display:inline-flex;align-items:center;gap:10px;margin:0;min-width:0;border:2px solid var(--navy);border-radius:999px;padding:8px 18px;font-weight:500}
.hm-pf-q svg{flex:none;width:20px;height:20px}
.hm-pf-job .hm-tag{margin-left:auto}
.hm-pf-note{margin:-4px 0 14px;font-weight:500;color:var(--good)}
.hm-pf-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
.hm-pf-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hm-pf-row{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,9rem);gap:8px 16px;align-items:center;padding:14px 12px;border-top:1px solid var(--line)}
.hm-pf-row:first-child,.hm-pf-row.is-best+.hm-pf-row{border-top:0}
.hm-pf-row.is-best{background:var(--cream);border-radius:20px}
.hm-pf-rank{width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:var(--fs-body);background:var(--mist)}
.hm-pf-row.is-best .hm-pf-rank{background:var(--navy);color:var(--marigold)}
.hm-pf-name{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.hm-pf-name b{font-family:var(--display);font-weight:700;font-size:var(--fs-lead);line-height:1.2}
.hm-pf-top,.hm-pf-new{font-size:var(--fs-small);font-weight:500;line-height:1.3;padding:2px 10px}
.hm-pf-top{border-radius:999px;background:var(--good);color:var(--white)}
.hm-pf-new{border-radius:999px;background:var(--ice)}   /* a pill, never a highlight box (CalmPageTests) */
.hm-pf-num{min-width:0}
.hm-pf-num b{display:block;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.1;font-variant-numeric:tabular-nums}
.hm-pf-num span{display:block;font-size:var(--fs-small);line-height:1.35;color:var(--soft)}
.hm-pf-bar{display:block;width:100%;max-width:150px;height:6px;margin-top:6px}
.hm-pf-track{fill:var(--line)}
.hm-pf-fill{fill:var(--marigold)}
.hm-pf-row.is-thin .hm-pf-wide{grid-column:2/-1}
.hm-pf-row.is-thin .hm-pf-wide b{font-size:var(--fs-lead)}
.hm-pf-card{background:var(--cream-soft);border:1px solid var(--apricot-line);border-radius:22px;padding:18px}
.hm-pf-card-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;margin:0 0 12px}
.hm-pf-card-h b{font-family:var(--display);font-weight:700;font-size:var(--fs-lead)}
.hm-pf-card-h span{font-size:var(--fs-small);color:var(--soft)}
.hm-pf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.hm-pf-tile{background:var(--white);border-radius:14px;padding:12px;min-width:0}
.hm-pf-tile dt{font-size:var(--fs-small);line-height:1.3;color:var(--soft)}
.hm-pf-tile dd{margin:4px 0 0}
.hm-pf-tile dd b{display:block;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.15;font-variant-numeric:tabular-nums}
.hm-pf-tile dd span{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.3;color:var(--soft)}
.hm-pf-tile.is-key,.hm-pf-tile.is-wide{grid-column:span 2}
.hm-pf-tile.is-key dd b{font-size:var(--fs-num)}
/* The measured result (#201, behind DiscoveryOptions.HomeMeasuredResults): navy, the number in marigold, how it was measured as a chip */
.hm-pf-tile.is-result{grid-column:1/-1;background:var(--navy);color:var(--white)}
.hm-pf-tile.is-result dt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--on-navy-soft)}
.hm-pf-how{font-size:var(--fs-small);font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--navy);background:var(--marigold);border-radius:999px;padding:2px 9px}
.hm-pf-tile.is-result dd b{color:var(--marigold);font-size:var(--fs-num)}
.hm-pf-tile.is-result dd span{color:var(--on-navy-soft)}
.hm-pf-goal{margin:12px 0 0;font-size:var(--fs-small)}
/* How we know (#200, v5): counted, not claimed; four steps with arrows between them, then the consent band (#201) */

.hm-pf-consent{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 24px;align-items:center;margin-top:16px;padding:20px;border-radius:24px;background:var(--ice)}
.hm-pf-consent-copy{display:flex;flex-direction:column;gap:6px;margin:0}
.hm-pf-consent-copy b{font-family:var(--display);font-weight:700;font-size:var(--fs-lead);line-height:1.25}
.hm-pf-consent-copy span{font-size:var(--fs-small);line-height:1.5}
.hm-pf-cc{background:var(--white);border-radius:18px;padding:16px;box-shadow:0 2px 4px rgba(13,44,84,.07),0 22px 40px -26px rgba(13,44,84,.4)}
.hm-pf-cc-ask{margin:0;background:var(--mist);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:var(--fs-small);line-height:1.45}
.hm-pf-cc-ask small{display:block;font-size:var(--fs-small);color:var(--soft);margin-bottom:2px}
.hm-pf-cc-ask b{font-weight:500}
.hm-pf-cc-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
.hm-pf-yes,.hm-pf-no{border-radius:999px;padding:7px 16px;font-size:var(--fs-small);font-weight:500}
.hm-pf-yes{background:var(--navy);color:var(--white)}
.hm-pf-no{box-shadow:inset 0 0 0 1.5px var(--navy)}
.hm-pf-cc-btns .hm-tag{margin-left:auto}

/* Software companies (mockup I, #199, from C): a company page, made up and labelled, its totals waiting for payments */
.hm-co-areas{margin-top:12px}
.hm-co-area{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 2.5rem;align-items:center;gap:10px;margin:0;padding:6px 0;font-size:var(--fs-small)}
.hm-co-area b{font-weight:500;text-align:right}
.hm-co-bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.hm-co-bar i{display:block;height:8px;border-radius:999px;background:var(--marigold)}
.hm-co-w100{width:100%}
.hm-co-w58{width:58%}
.hm-co-w37{width:37%}
/* A wide screen: the flip's words and score beside its two answers, the scoreboard a row under them. */
@media (min-width:1081px){
  .hm-tabs .hm-tab{padding:0 18px 0 10px}   /* the seven shopping tabs inside the content edge (the design re-review, L1; over the base .hm-tab) */

}

/* ---------- 5. Skills for every part of life and work: a tab per role ---------- */
.hm-tabs-scroll{position:relative;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * clamp(16px,4vw,32px)) 28px;padding:4px clamp(16px,4vw,32px)}
.hm-tabs-scroll::-webkit-scrollbar{display:none}
.hm-tabs{display:flex;gap:6px;margin:0;padding:0;list-style:none;width:max-content}
.hm-tab{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 12px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);text-decoration:none;white-space:nowrap;transition:color .15s,box-shadow .15s}
.hm-tab svg{width:28px;height:28px;flex:none;background:var(--white);border-radius:50%;padding:2px}
.hm-tab:hover{color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.hm-tab[aria-selected="true"],.hm-tab[aria-current="true"]{background:var(--navy);color:var(--white);box-shadow:none}

/* A small example screen: the role panels and the four tiles */

.hm-ui-row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.hm-ui-row:last-child{border-bottom:0}
.hm-ui-row b{font-weight:500}
.hm-ui-row span{color:var(--soft);font-size:var(--fs-small);text-align:right}

/* The night band's top: the one big number and its heading (the band and its tiles are site.css's shared .night and .board) */

.night .hm-go{color:var(--white);margin-top:20px}

/* ---------- 7 to 9. Make your own, your team, Enterprise: a band each, the words beside one picture ---------- */
.hm-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hm-field.hm-band{padding:44px 60px}
.hm-band-rev>.hm-band-copy{order:2}
.hm-band-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.hm-points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:14px}
.hm-points li{display:flex;gap:14px;align-items:flex-start;line-height:1.45;max-width:34rem}
.hm-points svg{width:30px;height:30px;flex:none}
.hm-points b{font-weight:500;color:var(--navy)}
.hm-fine{font-size:var(--fs-small);color:var(--soft);max-width:var(--measure)}
.hm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:4px}
.hm-studio .biz-panel+.biz-panel{margin-top:12px}
.hm-studio .biz-sum{margin-top:14px;padding-top:12px}

/* ---------- 10. Who it's for: the Browse panel's tiles (.bm-tile, site.css), each with the arrow that says it's a link ---------- */
.hm-doors .bm-name .ui-ico{display:inline-block;width:16px;height:16px;margin:0 0 0 4px;vertical-align:-2px;transition:transform .15s}
.hm-doors .bm-tile:hover .bm-name .ui-ico{transform:translateX(4px)}

/* ---------- 11 and 12. Questions (the shared _Faq) and the closing ask (the shared _ClosingAsk, site.css's .closing) ---------- */
.hm-faq{padding-top:clamp(24px,3vw,40px)}
/* The questions near the foot, centred: the heading over a centred column (Eddie, #226); each question reads from its left as ever. */
.hm-faq #faq-title{text-align:center}
.hm-faq .faq{margin-inline:auto}

/* ---------- Tablet and phone: composed, not shrunk ---------- */
@media (max-width:1080px){
  .hm-pf-body{grid-template-columns:minmax(0,1fr)}
  .hm-pf-consent{grid-template-columns:minmax(0,1fr)}
  .hm-band{grid-template-columns:minmax(0,1fr);gap:40px}
  .hm-field.hm-band{padding:48px 40px}
  .hm-band-rev>.hm-band-copy{order:0}
  /* Three cards never sit two and one (design r2, item 12): from here down they swipe, about two and a half showing. */

}
@media (max-width:760px){
  .hm-ui-row{grid-template-columns:auto minmax(0,1fr)}   /* the label keeps its line; the value wraps (r3, item 10) */
  .hm-ui-row b{white-space:nowrap}
  /* A phone's hero (the design reviews, the lead's ruling of 22 Oct): a box short of the screen, so "Add skills to the AI you already
     use" ends the first screen (at most 45 words, the pre-check; home K's names row under it had brought a second row of names in at
     190 px, 47 words), the title, the line and the search centred in it, a little above the middle; the whole search on the first
     screen, its foot at most 70% down (FirstScreenTests' G4 since then). */
  .hm-hero{min-height:calc(100svh - 150px);padding:24px 0 72px;display:grid;align-content:center}
  /* The phone's hero picture: the plain line saying what's happening, then the thing made (the design review r1, item 5). */
  .hm-hero-in{gap:12px}
  .hm-hero-in .search{margin-top:4px}
  /* A phone's ranked list: the two key numbers of the card (any phone screen at most 80 words) */
  .hm-pf-row{grid-template-columns:36px minmax(0,1fr) minmax(0,7rem);padding:12px 8px}
  .hm-pf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-pf-tile:not(.is-key){display:none}
  .hm-pf-job .hm-tag{margin-left:0}
  .hm-long{display:none}
  .hm-short{display:inline}
  /* A phone's apps: two by two, each with who can use it; the line under them is the badges' again, so it's left out. */

  .hm-lead-wide{display:none}
  .hm-doors .bm-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* A phone's doors are the way in, each page says the rest: the name and its arrow, no line (81 words of tiles made any phone
     screen over them pass 80, the code review round's measure). */
  .hm-doors .bm-line{display:none}
  .hm-field.hm-band{padding:32px 20px}
  .hm-studio-steps{display:none}
  .hm-field{border-radius:24px}
  /* Any phone screen at most 80 words (CalmPageTests), at every offset, not only the probe's slices (rounds 9 and 10's slide
     measure), by cutting words, never by adding room or hiding a true statement (the reviews of 22 Oct: the proof band's "Not
     enough data yet" stays; on a phone it leaves out the first two trust marks and the tested Original's caption). Each band keeps its key line and its picture and says each fact once; left to tablet and desktop: the scoreboard's links,
     the flip's caption on an Original's tested pair (its "Example, shortened" tag says it), the maker's goal, the first and last
     know-how steps' second lines, a thin row's copies so far, the second link under the numbers, the team flow's second step and
     all but its privacy line in the third, the team's first three points (the flow says them), the last two My skills rows and two
     of its second lines (their points say them), the Communities link over the roles and three leads; and, said elsewhere on the
     page, the first two trust marks (the store's map and the numbers below say them), the know-how receipt's chips (its step says
     what a note holds), How it works' "in full" link (the closing ask links it) and the team's price line (/pricing says it). */
  .hm-team .hm-fine{display:none}
  .hm-pf-goal,.hm-pf-more,.hm-pf-num .hm-pf-more{display:none}
  /* The design re-review's M2: the "Not enough data yet" tile's second line (the numbers below say "from 20" twice), the card's
     header over the key numbers (the card sits under its skill, and its tiles name each number) and a role panel's kicker (its h3
     says it). "Not enough data yet" stays. */
  .hm-pf-card-h,.hm-pf-top{display:none}
  /* Air after the navy proof band, and its words a phone screen (k2b: 82 where the band's tiles met this heading). */
  .hm-pf-head{padding-top:24px}
  .hm-pf-for{display:none}   /* "Shopping for yourself": the picked tab says who (round 20: 82 over the numbers' head and rows) */

}
@media (max-width:420px){
  .closing.hm-sec .closing-box .search{width:calc(100% + 24px);margin-inline:-12px}   /* the placeholder whole, as in the hero */
  .hm-hero-in .search input{font-size:1rem;padding-left:40px}   /* "What job do you want done?" whole (the design review, item 2) */
  .hm-hero-in .search svg{left:14px}
  /* The flip's skill link: its arrow stays with the name's last word when the name wraps (the design re-check, N4). */

}
@media (max-width:370px){
  /* "What job do you want done?" whole at 360 too, still 16 px (the design re-check, N3) */
  .hm-hero-in .search{width:calc(100% + 12px);margin-inline:-6px;gap:4px}
  .hm-hero-in .search input{padding-left:34px}
  .hm-hero-in .search svg{left:12px}
}
@media (prefers-reduced-motion:reduce){
  .hm-tab,.hm-go .ui-ico,.hm-doors .bm-name .ui-ico{transition:none}
}
@media (forced-colors:active){
  .hm-field,.hm-tag,.hm-tab{border:1px solid CanvasText}
  .hm-tab[aria-selected="true"],.hm-tab[aria-current="true"]{outline:2px solid Highlight}
}

/* Home K (#208, #210): J1's rules for apps, perf, how, renamed to hm- (C:\TrillyOps\plans\home-k\NOTES-k.md). */
.hm-hw{padding:clamp(48px,4.5vw,56px) 0 0}
.hm-ai{padding:20px 0 14px;border-bottom:1px solid var(--line)}
.hm-ai .hm-ai-in{max-width:1280px;display:flex;flex-direction:column;align-items:center;gap:4px}
.hm-ai-h{margin:0;font-size:var(--fs-body);font-weight:600;letter-spacing:0;text-align:center;color:var(--navy)}
.hm-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 24px}
.hm-logos a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--navy);font-weight:500;text-decoration:none;white-space:nowrap}
.hm-logos a:hover>span{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hm-logos a:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring);border-radius:8px}
.hm-logos img,.hm-logos a>svg{width:26px;height:26px;flex:none;object-fit:contain}
@media (min-width:761px){.hm-logos{max-width:720px}}
/* One visual size for every mark: OpenAI's file is half clear space (its mark fills 49% of the box, the others about 90%). */
.hm-logos img[src*="/apps/chatgpt"]{transform:scale(1.75)}
.hm-logos img[src*="/apps/perplexity"]{transform:scale(1.3)}     /* 67% of its box wide, 73% tall */
.hm-logos img[src*="/apps/mistral-vibe"]{transform:scale(1.15)}  /* 62% of its box tall */   /* two even lines on a wide screen, never one name alone on the second */
.hm-kn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 24px;align-items:center;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.hm-kn-pic{grid-row:span 2;display:flex;align-items:center;gap:12px}
.hm-kn-watch{display:block;flex:none;width:52px;height:52px}
.hm-kn-watch svg{display:block;width:100%;height:100%}
.hm-kn-chips{display:grid;grid-template-columns:repeat(2,auto);gap:6px}
.hm-kn-chips i{font-style:normal;font-size:var(--fs-small);font-weight:500;line-height:1.3;color:var(--navy);background:var(--cream);border:1px solid var(--gold);border-radius:8px;padding:2px 8px;text-align:center;white-space:nowrap}
.hm-kn-t{margin:0;max-width:56rem}
.hm-kn-t b{font-weight:500;color:var(--navy)}
.hm-kn-go{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;font-size:var(--fs-small);color:var(--soft)}
.hm-hw-band{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px 48px;padding:clamp(22px,3vw,30px) clamp(20px,3.5vw,40px);border-radius:28px;background:var(--mist)}
.hm-hw-head{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hm-hw-head h2{margin:0;font-size:var(--fs-num);white-space:nowrap}
.hm-hw-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.hm-hw-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px 12px;align-items:start;min-width:0}
.hm-hw-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--marigold);font-family:var(--display);font-weight:700;font-size:var(--fs-small);line-height:1;color:var(--navy)}
.hm-hw-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-hw-t b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.25;color:var(--navy)}
.hm-hw-t>span{font-size:var(--fs-small);line-height:1.4;color:var(--soft)}
.hm-hw-mini{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:6px 12px;border-radius:14px;background:var(--white);box-shadow:0 1px 3px rgba(13,44,84,.14);font-size:var(--fs-small);line-height:1.3;color:var(--navy);white-space:nowrap}
.hm-hw-mini>svg{width:20px;height:20px;flex:none}
.hm-hw-mini-search{border-radius:999px;box-shadow:inset 0 0 0 2px var(--navy);padding-right:16px}
.hm-hw-mini-ask{background:var(--mist);border-radius:12px 12px 4px 12px;padding:2px 10px}
.hm-hw-mini-ok{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--good)}
.hm-hw-mini-ok svg{width:14px;height:14px}
@media (max-width:1080px){
.hm-hw-band{grid-template-columns:minmax(0,1fr)}
.hm-hw-head{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px}
}
@media (max-width:760px){
.hm-ai{padding:18px 0 12px}
.hm-logos{gap:0 18px}
.hm-kn{grid-template-columns:minmax(0,1fr);gap:14px}
.hm-kn-pic{grid-row:auto}
.hm-kn-chips{grid-template-columns:repeat(4,auto)}
.hm-hw-steps{grid-template-columns:minmax(0,1fr);gap:16px}
.hm-hw-t>span,.hm-hw-mini,.hm-ps-marks li:nth-child(2),.hm-con-head .lead,.hm-kn-go .hm-go:last-child{display:none}
.hm-kn-go>span:first-child{display:none}
/* A phone's How we know is its line, the watch and a note's chips: "never your chat" is the proof band's trust mark (80 words a phone
   screen; trust said once). */
.hm-kn-t .hm-short{display:none}
}
@media (max-width:380px){
.hm-kn-chips{grid-template-columns:repeat(2,auto)}
}

/* Home K (#208, #210): J2's rules for proof, consoles, renamed to hm- (C:\TrillyOps\plans\home-k\NOTES-k.md). */
.hm-con-head{max-width:46rem;margin:0 0 clamp(20px,2.4vw,28px)}
.hm-con-head h2{margin:0}
.hm-con-head .lead{margin:12px 0 0}
.hm-con .hm-tabs-scroll{margin-bottom:20px}
.hm-ps-strip{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,9fr);gap:24px 48px;align-items:center;padding:clamp(28px,3vw,40px) clamp(20px,3.5vw,44px)}
.hm-ps-head h2{margin:0;font-size:var(--h3);line-height:1.2}
.hm-ps-head .hm-go{margin-top:14px}
.hm-ps-strip .board{margin:0}
.hm-ps-strip .board:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.hm-ps-strip .board a{padding:18px 18px 20px}
.hm-ps-strip .board b{font-size:var(--h3)}
.hm-ps-strip .board a>span{margin-top:8px}
.hm-ps-marks{grid-column:1/-1;list-style:none;margin:0;padding:20px 0 0;border-top:1px solid color-mix(in oklab,var(--white) 16%,var(--navy));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px}
.hm-ps-marks a{display:flex;align-items:center;gap:10px;color:var(--on-navy-soft);font-size:var(--fs-small);line-height:1.35;text-decoration:none}
.hm-ps-marks a:hover span{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.hm-ps-mark-ic{flex:none;width:36px;height:36px;border-radius:11px;background:var(--white);display:grid;place-items:center}
.hm-ps-mark-ic svg{width:24px;height:24px}
.hm-con-panel{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,56px);align-items:center}
.hm-con-copy h3{margin:0;font-size:var(--h3)}
.hm-con-pts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.hm-con-pts li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45;color:var(--navy)}
.hm-con-pts svg{flex:none;width:24px;height:24px;margin-top:1px}
.hm-con-copy .hm-go{margin-top:20px}
.hm-con-stage{position:relative;border-radius:var(--r-panel);padding:clamp(24px,3.4vw,44px) clamp(20px,3vw,40px) clamp(28px,3.4vw,44px)}
.hm-con-stage .hm-tag{position:absolute;top:16px;left:16px;z-index:2}
.hm-con-devices{position:relative;padding:18px 0 0}
.hm-con-laptop{margin:0 0 0 2%;width:84%}
.hm-con-scr{background:var(--navy);border-radius:16px 16px 0 0;padding:9px 9px 0;box-shadow:0 30px 60px -36px rgba(13,44,84,.55)}
.hm-con-scr img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0}
.hm-con-base{position:relative;height:14px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(var(--line),color-mix(in oklab,var(--navy) 24%,var(--white)))}
.hm-con-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:color-mix(in oklab,var(--navy) 36%,var(--white))}
.hm-con-phone{position:absolute;right:0;bottom:-22px;width:23%;margin:0;padding:7px;border-radius:30px;background:var(--navy);box-shadow:0 30px 50px -24px rgba(13,44,84,.6)}
.hm-con-phone img{display:block;width:100%;height:auto;border-radius:24px}
.hm-con-phone::before{content:"";position:absolute;top:13px;left:50%;width:22%;height:5px;transform:translateX(-50%);border-radius:999px;background:color-mix(in oklab,var(--white) 30%,var(--navy));z-index:1}
@media (max-width:1080px){
.hm-ps-strip{grid-template-columns:minmax(0,1fr)}
.hm-ps-marks{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
.hm-ps-strip{gap:18px}
.hm-ps-strip .board:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* A phone's proof: how many passed across the top, then the runs with and without the skill; the refusals are the trust mark
   "Every skill checked before it's listed" (80 words a phone screen). */
.hm-ps-strip .board:has(>li:nth-child(4):last-child)>li:first-child{grid-column:1/-1}
.hm-ps-strip .board:has(>li:nth-child(4):last-child)>li:nth-child(4){display:none}
.hm-ps-strip .board a{padding:14px 14px 16px}
.hm-ps-marks{grid-template-columns:minmax(0,1fr);gap:10px}
.hm-con-panel{grid-template-columns:minmax(0,1fr)}
.hm-con-stage{border-radius:var(--r-lg);padding:44px 14px 26px}
.hm-con-stage .hm-tag{top:12px;left:12px}
.hm-con-laptop{width:88%;margin:0}
.hm-con-phone{width:36%;border-radius:22px;padding:5px;bottom:-14px}
.hm-con-phone img{border-radius:18px}
.hm-con-phone::before{top:9px;height:4px}
}
@media (forced-colors:active){
.hm-con-stage{border:1px solid CanvasText}
}

/* Home K (#208, #210): J3's rules for what, power, renamed to hm- (C:\TrillyOps\plans\home-k\NOTES-k.md). */
.hm-tw-grid{display:grid;grid-template-columns:minmax(0,300px) 72px minmax(0,640px);grid-template-rows:auto repeat(4,auto) auto;justify-content:center;margin-top:44px}
.hm-tw-frame{grid-row:1/6;border:6px solid var(--navy);border-radius:30px;background:var(--white)}
.hm-tw-frame-app{grid-column:1}
.hm-tw-frame-skill{grid-column:3}
.hm-tw-head-app,.hm-tw-app{grid-column:1;margin:0 26px}
.hm-tw-head-skill,.hm-tw-skill{grid-column:3;margin:0 26px}
.hm-tw-head-app,.hm-tw-head-skill{grid-row:1;align-self:end;padding:24px 0 12px}
.hm-tw-r2{grid-row:2}
.hm-tw-r3{grid-row:3}
.hm-tw-r4{grid-row:4}
.hm-tw-r5{grid-row:5}
.hm-tw-app.hm-tw-r5,.hm-tw-skill.hm-tw-r5{margin-bottom:22px}
.hm-tw-head-app .hm-store-s{display:block}
.hm-tw-head-skill{display:grid;grid-template-columns:minmax(0,1fr) 120px 120px;grid-template-areas:"pill test test" "pill c1 c2";gap:4px 14px;align-items:end;font-size:var(--fs-small);line-height:1.3;color:var(--soft)}
.hm-tw-head-skill .hm-store-s{grid-area:pill;align-self:end;margin-right:10px}
.hm-tw-head-test{grid-area:test;font-weight:500;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:4px}
.hm-tw-head-col{min-width:0}
@media (min-width:761px){.hm-tw-head-col{white-space:nowrap}}   /* "Well-prompted AI" on one line, as "With the skill" (L5); a phone's 72 px columns wrap it */
.hm-tw-head-col:nth-of-type(3){grid-area:c1}
.hm-tw-head-col:nth-of-type(4){grid-area:c2}
.hm-tw-app{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 0;min-width:0}
.hm-tw-app .hm-store-ic{display:grid;place-items:center}
.hm-tw-app .hm-store-ic svg{width:26px;height:26px}
.hm-tw-app-name{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.2}
.hm-tw-to{grid-column:2;display:grid;place-items:center;color:var(--navy)}
.hm-tw-to .ui-ico{width:30px;height:30px}
.hm-tw-skill{display:grid;grid-template-columns:44px minmax(0,1fr) 120px 120px;gap:14px;align-items:center;border-top:1px solid var(--line);padding:12px 0;color:var(--navy);text-decoration:none;min-width:0}
.hm-tw-skill-ln{display:flex;flex-direction:column;gap:2px;min-width:0}
.hm-tw-skill-ln b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.25}
.hm-tw-skill-ln span{font-size:var(--fs-small);line-height:1.35;color:var(--soft)}
.hm-tw-skill:hover .hm-tw-skill-ln b,.hm-tw-skill:focus-visible .hm-tw-skill-ln b{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.hm-tw-res{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.hm-tw-res b{font-family:var(--display);font-weight:700;font-size:var(--fs-lead);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.hm-tw-res-off b{color:var(--soft)}
.hm-dots{display:flex;gap:2px}
.hm-dots i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--field)}
.hm-dots i.on{background:var(--marigold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.hm-tw-cap{grid-row:6;margin:14px 0 0;text-align:center;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.2}
.hm-tw-cap-app{grid-column:1}
.hm-tw-cap-skill{grid-column:3}
.hm-tw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px;margin:26px 0 0;text-align:center}
.hm-tw-size{display:inline-flex;align-items:center;gap:10px;color:var(--soft)}
.hm-tw-size b{font-weight:500;color:var(--navy);font-variant-numeric:tabular-nums}   /* body text is never bold (#176): navy says the number */
.hm-tw-size>span+span::before{content:"\00B7" / "";margin-right:10px;color:var(--soft)}   /* the size's parts, a dot between (a phone keeps the first two) */
.hm-tw-size i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 4px var(--cream)}
.hm-tw-bar{display:flex!important;align-items:center;min-height:38px}
.hm-tw-bar svg{width:18px;height:18px}
@media (max-width:1080px){
.hm-tw-grid{grid-template-columns:minmax(0,.8fr) 48px minmax(0,1.6fr)}
.hm-tw-head-app,.hm-tw-app{margin:0 18px}
.hm-tw-head-skill,.hm-tw-skill{margin:0 18px}
.hm-tw-app.hm-tw-r5,.hm-tw-skill.hm-tw-r5{margin-bottom:18px}
}
@media (max-width:760px){
.hm-tw-grid{display:flex;flex-direction:column;margin-top:24px}
.hm-tw-frame,.hm-tw-head-app,.hm-tw-cap,.hm-tw-to{display:none}
.hm-tw-head-skill{order:-1;grid-template-columns:minmax(0,1fr) 72px 72px;grid-template-areas:"pill test test" "pill c1 c2";gap:2px 10px;margin:0 0 2px;padding:0 15px}
.hm-tw-head-skill .hm-store-s{display:none}
.hm-tw-size{display:inline;line-height:1.5}
.hm-tw-size>span:nth-of-type(n+3){display:none}
.hm-tw-size i{display:inline-block;margin-right:8px;vertical-align:1px}
.hm-tw-app,.hm-tw-app.hm-tw-r5{margin:16px 0 6px;padding:0;border:0;gap:8px}
.hm-tw-app .hm-store-ic{width:30px;height:30px;border-width:2px;border-radius:9px}
.hm-tw-app .hm-store-ic svg{width:18px;height:18px}
.hm-tw-app-name{flex:0 1 auto;font-family:var(--body);font-weight:500;font-size:var(--fs-small);color:var(--soft)}
.hm-tw-r5{display:none}   /* the apps keep their "Get": the comparison's other side on a phone too (L7) */
.hm-tw-skill,.hm-tw-skill.hm-tw-r5{margin:0;grid-template-columns:minmax(0,1fr) 72px 72px;gap:10px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--white)}
.hm-tw-skill .hm-store-ic{display:none}
.hm-tw-res b{font-size:var(--fs-body)}
.hm-dots{gap:2px}
.hm-dots i{width:5px;height:5px}
}
.hm-pw-panel{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:clamp(16px,3vw,32px);box-shadow:0 2px 4px rgba(13,44,84,.06),0 30px 56px -34px rgba(13,44,84,.35)}
.hm-pw-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-bottom:20px}
.hm-pw-ask{display:inline-flex;align-items:center;gap:10px;margin:0;min-width:0;border:2px solid var(--navy);border-radius:999px;padding:7px 20px 7px 10px;font-weight:500;line-height:1.35}
.hm-pw-ask svg{width:28px;height:28px;flex:none}
.hm-pw-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.15fr) minmax(0,1.05fr);gap:16px;align-items:stretch;min-height:480px}   /* one height a tab: the four measure 453 to 485 (the review, M2) */
/* By hand is the shorter card beside the skill's steps, never a stretched grey box half empty (the re-check, item 2). */
@media (min-width:761px){.hm-pw-before{align-self:start}}
.hm-pw-before,.hm-pw-after{display:flex;flex-direction:column;border-radius:22px;padding:18px 18px 16px;min-width:0}
.hm-pw-before{background:var(--mist)}
.hm-pw-after{background:var(--cream-soft);border:1px solid var(--apricot-line)}
.hm-pw-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 10px;font-family:var(--display);font-weight:700;font-size:var(--fs-lead);line-height:1.2}
.hm-pw-h span{font-family:var(--body);font-weight:400;font-size:var(--fs-small);color:var(--soft)}
.hm-pw-grid .pic-steps{gap:0}
.hm-pw-grid .pic-step{grid-template-columns:24px minmax(0,1fr);align-items:center;gap:10px;padding:4px 0;font-size:var(--fs-small);line-height:1.35}
.hm-pw-grid .pic-step-n{width:24px;height:24px}
.hm-pw-before .pic-step-t{color:var(--soft)}
.hm-pw-before .pic-step{padding:7px 0}
.hm-pw-after .pic-s-you .pic-step-t{font-weight:500}
.hm-pw-stop{display:inline-flex;margin-left:8px;padding:1px 8px;border:1.5px solid var(--bad);border-radius:999px;background:var(--white);color:var(--bad);font-size:var(--fs-small);font-weight:500;line-height:1.25;white-space:nowrap}
.hm-pw-stat{display:flex;align-items:baseline;gap:10px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.hm-pw-stat b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;color:var(--soft);font-variant-numeric:tabular-nums}
.hm-pw-stat span{font-size:var(--fs-small);line-height:1.35;color:var(--soft)}
.hm-pw-stat-on{border-top-color:var(--apricot-soft)}
.hm-pw-stat-on b{color:var(--navy)}
.hm-pw-stat-on span{color:var(--navy);font-weight:500}
.hm-pw-before .pic-steps,.hm-pw-after .pic-steps{margin-bottom:14px}
.hm-pw-test{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:14px 18px;border-radius:18px;background:var(--navy);color:var(--white)}
.hm-pw-test-h{grid-column:1/-1;margin:0 0 2px;font-size:var(--fs-small);font-weight:500;color:var(--on-navy-soft)}
.hm-pw-who{font-size:var(--fs-small);line-height:1.2}
.hm-pw-test b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1;color:var(--marigold);white-space:nowrap}
.hm-pw-test b.hm-pw-off{color:var(--on-navy-soft)}
.hm-pw-test .hm-dots i{box-shadow:inset 0 0 0 1.5px var(--on-navy-soft)}
.hm-pw-test .hm-dots i.on{background:var(--marigold);box-shadow:none}
.hm-pw-out{display:flex;flex-direction:column;gap:12px;min-width:0}
.hm-pw-out .pic-win{flex:1 1 auto;padding:18px 20px;box-shadow:0 0 0 1px var(--line),0 34px 60px -40px rgba(13,44,84,.45)}
.hm-pw-out .pic-top{margin-bottom:10px}
.hm-pw-out .pic-reply{margin-top:0}
.hm-pw-out .pic-key{font-size:var(--fs-lead);line-height:1.35}
.hm-pw-out .pic-line{font-size:var(--fs-small)}
.hm-pw-cap{display:flex;flex-direction:column;gap:2px;margin:0;font-size:var(--fs-small);color:var(--soft)}
.hm-pw-cap .hm-go{font-size:var(--fs-body)}
@media (max-width:1080px){
.hm-pw-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);min-height:0}
.hm-pw-out{grid-column:1/-1}
}
@media (max-width:760px){
.hm-pw-panel{border-radius:24px}
/* A phone leaves out the tab's own test dots: the proof band right below gives every tested skill's runs (80 words a phone screen). */
.hm-pw-cap,.hm-pw-map,.hm-pw-test{display:none}
/* The tab's question on a phone too, at most two lines (the review, M1: the answer below needs its question). */
.hm-pw-top{margin-bottom:12px}
.hm-pw-ask span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-pw-after .pic-step:not(.pic-s-you):not(.hm-pw-stops){display:none}
.hm-pw-ask{border-radius:18px;padding:8px 14px 8px 10px}
.hm-pw-grid{grid-template-columns:minmax(0,1fr);gap:12px}
.hm-pw-before,.hm-pw-after{padding:14px}
.hm-pw-before{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
/* A phone's by-hand row is its count alone, "5 steps, all on you", against "With the skill" below (k8: 81 words on that screen). */
.hm-pw-before .hm-pw-h{display:none}
.hm-pw-before .pic-steps{display:none}
.hm-pw-before .hm-pw-stat{margin:0;padding:0;border:0}
.hm-pw-stat b{font-size:var(--fs-lead)}
.hm-pw-out .pic-win{padding:16px}
.hm-pw-out .pic-key{font-size:var(--fs-body)}
.hm-pw-out .pic-lines{display:none}
}

/* Home K's own glue (#210): the whole-job tab's answer window sits flush in its column. */
.hm-pw-out>.pic{margin:0}
/* No company's logo at launch (the lead, 23 Oct): each app's name as a chip in Trilly's own type, all one size and weight; a maker's
   cleared mark goes beside its name (.hm-ai-label) once its file is in img/apps. */
.hm-ai-name{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);font-family:var(--display);font-weight:700;font-size:var(--fs-body);line-height:1.2;letter-spacing:-.005em;color:var(--navy)}
.hm-logos a:hover>.hm-ai-name{text-decoration:none;border-color:var(--navy)}
.hm-ai-label{font-weight:500}
.hm-tw-skill:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring);border-radius:12px}
@media (forced-colors:active){
  .hm-pw-panel,.hm-hw-band{border:1px solid CanvasText}
}

/* After you add it (home K, A2 "a month in the life", #211; the review's twelve fixes): one month seen by you and by whoever looks
   after the skill. Day 1 is one line across both lanes; then the lanes side by side on a wide screen, their days on a calendar spine
   between them, each day's two cards on one row (subgrid). Each day's window keeps a minimum height, so switching roles never moves
   the page. A phone shows one lane at a time with the skill page's switch (.pic-flip, CSS only), each moment carrying its day. */
.hm-af{background:var(--cream-soft);padding-bottom:48px;margin-top:clamp(48px,4.5vw,56px)}   /* its own cream band, as the section it replaced */
.hm-af-head{max-width:64rem;margin:0 0 14px}
.hm-af-head h2{margin:0}
.hm-af-head .lead{margin:6px 0 0}
.hm-af-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 16px}
.hm-af-whose{margin:0;font-weight:500;color:var(--navy)}
.hm-af-bar .hm-tabs-scroll{margin-bottom:0;min-width:0;flex:0 1 auto}
.hm-af-tag{margin-left:auto}
.hm-af-start{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:center;margin:0 0 14px}
.hm-af-start-you,.hm-af-start-them{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:52px;margin:0;padding:8px 22px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.hm-af-start-you{grid-column:1}
.hm-af-start-them{grid-column:3}
.hm-af-start b{font-weight:500;color:var(--navy)}
.hm-af-start>.hm-af-cal{grid-column:2;justify-self:center}
.hm-af-sub{font-size:var(--fs-small);color:var(--soft)}
.hm-af-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:500;color:var(--navy)}
.hm-af-chip svg{width:24px;height:24px;flex:none}
.hm-af-flip{display:none}
.hm-af-time{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);grid-template-rows:auto repeat(3,auto);row-gap:12px}
.hm-af-lane{display:grid;grid-template-rows:subgrid;grid-row:1/5;padding:16px 22px 20px;border-radius:var(--r-lg);min-width:0}
.hm-af-you{grid-column:1;background:var(--mint)}
.hm-af-them{grid-column:3;background:var(--ice)}
.hm-af-lane-h{grid-row:1;display:flex;align-items:center;gap:12px;margin:0;font-size:var(--h3);line-height:1.15}
.hm-af-lane-h>svg{width:34px;height:34px;flex:none;padding:4px;border-radius:50%;background:var(--white)}
.hm-af-lane-h .hm-tag{display:none;margin-left:auto}
.hm-af-list{grid-row:2/5;display:grid;grid-template-rows:subgrid;margin:0;padding:0;list-style:none}
.hm-af-item{display:flex;flex-direction:column;gap:8px;min-width:0}
.hm-af-cap{position:relative;margin:0;font-family:var(--display);font-size:var(--fs-body);font-weight:600;line-height:1.25;color:var(--navy)}   /* a heading's face, as h1 to h3 (body text is never bold, #176) */
.hm-af-dchip{position:absolute;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hm-af-spine{grid-column:2;grid-row:2/5;display:grid;grid-template-rows:subgrid}
.hm-af-day{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:2px}
.hm-af-day::after{content:"";position:absolute;left:0;right:0;top:28px;border-top:1px solid color-mix(in oklab,var(--navy) 22%,transparent)}
.hm-af-day:not(.hm-af-day30)::before{content:"";position:absolute;left:calc(50% - 1.5px);top:28px;width:3px;height:calc(100% + 12px);border-radius:3px;background:color-mix(in oklab,var(--navy) 22%,transparent)}
.hm-af-cal{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:60px;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 0 0 2px var(--navy),0 10px 20px -14px rgba(13,44,84,.6)}
.hm-af-cal>span{display:flex;justify-content:center;gap:18px;width:100%;height:14px;padding-top:4px;background:var(--marigold)}
.hm-af-cal>span>i{width:6px;height:6px;border-radius:50%;background:var(--navy)}
.hm-af-cal>b{display:block;padding:4px 0 6px;font-family:var(--display);font-size:var(--h3);font-weight:700;line-height:1.1;color:var(--navy)}
.hm-af-day30 .hm-af-cal{background:var(--navy)}
.hm-af-day30 .hm-af-cal>b{color:var(--marigold)}
.hm-af-win{position:relative;flex:1 0 auto;padding:12px 16px;border-radius:16px;background:var(--white);line-height:1.4;color:var(--navy);box-shadow:0 1px 2px rgba(13,44,84,.10),0 14px 30px -20px rgba(13,44,84,.42)}
.hm-af-item:nth-child(1) .hm-af-win{min-height:100px}
.hm-af-item:nth-child(2) .hm-af-win{min-height:112px}
.hm-af-item:nth-child(3) .hm-af-win{min-height:118px}
.hm-af-them .hm-af-line{font-size:var(--fs-small);align-items:flex-start}
.hm-af-win p{margin:0}
.hm-af-win p+p{margin-top:8px}
.hm-af-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.hm-af-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--mist)}
.hm-af-ic svg{width:24px;height:24px}
.hm-af-plain .hm-af-ic{width:30px;height:30px;background:transparent}
.hm-af-plain .hm-af-ic svg{width:28px;height:28px}
.hm-af-nm{flex:1 1 150px;min-width:0;font-weight:500}
.hm-af-nm>.hm-af-sub{display:block;margin-top:1px;font-weight:400}
.hm-af-btn{flex:none;display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:var(--navy);color:var(--white);font-size:var(--fs-small);font-weight:500;line-height:1.3;white-space:nowrap}
.hm-af-btn.is-line{background:var(--white);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.hm-af-btns{display:inline-flex;flex-wrap:wrap;gap:8px}
.hm-af-note{font-size:var(--fs-small);color:var(--soft)}
.hm-af-note b{font-weight:500;color:var(--navy)}
.hm-af-pill{display:inline-flex;align-items:center;flex:none;padding:2px 10px;border-radius:999px;background:var(--mint);color:var(--good);font-size:var(--fs-small);font-weight:500;line-height:1.3;white-space:nowrap}
.hm-af-sub>.hm-af-pill{margin-top:4px}
.hm-af-pill-warn{background:var(--cream);color:var(--warn)}
.hm-af-pill-no{background:color-mix(in oklab,var(--bad) 11%,var(--white));color:var(--bad)}
.hm-af-ask{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;background:var(--ice);font-size:var(--fs-small)}
.hm-af-them .hm-af-ask{background:var(--cream)}
.hm-af-ask svg{width:22px;height:22px;flex:none}
.hm-af-avs{display:inline-flex;flex:none;padding-left:8px}
.hm-af-av{display:grid;place-items:center;width:32px;height:32px;margin-left:-8px;border-radius:50%;box-shadow:0 0 0 2px var(--white);font-size:var(--fs-small);font-weight:500;line-height:1}
.hm-af-av svg{width:22px;height:22px;margin-top:4px}
.hm-af-av0{background:var(--cream)}
.hm-af-av1{background:var(--ice)}
.hm-af-av2{background:var(--apricot)}
.hm-af-av3{background:var(--mint)}
.hm-af-av-more{width:auto;padding:0 9px;border-radius:999px;background:var(--navy);color:var(--white)}
.hm-af-stamp{position:absolute;top:-13px;right:14px;display:inline-flex;align-items:center;gap:5px;padding:2px 10px 2px 6px;border-radius:999px;background:var(--white);box-shadow:0 0 0 1.5px var(--navy);font-size:var(--fs-small);font-weight:500;line-height:1.4;color:var(--navy)}
.hm-af-stamp svg{width:18px;height:18px}
.hm-af-mo{display:flex;align-items:baseline;gap:10px;font-weight:500}
.hm-af-mo b{font-family:var(--display);font-size:var(--fs-num);font-weight:700;line-height:1}
.hm-af-line{display:flex;align-items:center;gap:8px}
.hm-af-line svg{width:22px;height:22px;flex:none}
.hm-af-priv{font-size:var(--fs-small);color:var(--soft)}
.hm-af-flip:has(input[value="them"]:checked)::before{transform:translateX(100%)}
@media (max-width:820px){
  .hm-af-bar>.hm-af-tag{display:none}          /* each lane says "Example" in its own header (the review's fix 3) */
  .hm-af-lane-h .hm-tag{display:inline-flex}
  .hm-af-start{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cal you" "cal them";gap:8px 12px;margin-bottom:14px;padding:10px 14px;border-radius:18px;background:var(--white);box-shadow:0 0 0 1px var(--line)}
  .hm-af-start>.hm-af-cal{grid-area:cal;align-self:start}
  .hm-af-start-you{grid-area:you}
  .hm-af-start-them{grid-area:them}
  .hm-af-start-you,.hm-af-start-them{min-height:0;padding:0;border-radius:0;background:none;box-shadow:none}
  .hm-af-av{width:26px;height:26px}
  .hm-af-av svg{width:18px;height:18px;margin-top:3px}
  .hm-af-av:nth-child(n+4):not(.hm-af-av-more){display:none}
  .hm-af-flip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;margin:0 0 14px}
  .hm-af-flip label{white-space:normal;text-align:center;line-height:1.2;padding:4px 10px}   /* the pill stays on its own label at 360 (review H1) */
  .hm-af-time{display:block}
  .hm-af-spine{display:none}
  .hm-af-lane{position:relative;display:block;padding:30px 14px 16px;border-radius:24px}
  .hm-af-lane-h{position:absolute;top:10px;right:12px;margin:0;line-height:1}
  .hm-af-lane-h>svg,.hm-af-lane-h>span:not(.hm-tag){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .hm-af-panel:has(input[value="you"]:checked) .hm-af-them,.hm-af-panel:has(input[value="them"]:checked) .hm-af-you{display:none}
  .hm-af-list{display:block;position:relative;padding-left:22px}
  .hm-af-list::before{content:"";position:absolute;left:5px;top:14px;bottom:24px;width:3px;border-radius:3px;background:color-mix(in oklab,var(--navy) 18%,transparent)}
  .hm-af-item{position:relative;margin-top:16px}
  .hm-af-item::before{content:"";position:absolute;left:-22px;top:6px;width:13px;height:13px;border-radius:50%;background:var(--marigold);box-shadow:0 0 0 2px var(--navy)}
  .hm-af-item:last-child::before{background:var(--navy)}
  .hm-af-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
  .hm-af-dchip{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-family:var(--body);font-size:var(--fs-small);font-weight:500;color:var(--soft)}
  .hm-af-win{padding:12px 14px}
  .hm-af-item:nth-child(n) .hm-af-win{min-height:0}
  .hm-af-note,.hm-af-kept{display:none}
  .hm-af-nm{flex-basis:110px}
  .hm-af-pill{white-space:normal}               /* "Version 1.1" and its pill wrap, never run together (fix 10) */
  .hm-af-stamp{position:static;margin:0 0 8px}
  .hm-af{padding-bottom:32px}
}
@supports not selector(:has(*)){
  @media (max-width:820px){ .hm-af-flip{display:none} .hm-af-them{margin-top:14px} }
}
@media (forced-colors:active){
  .hm-af-win,.hm-af-lane,.hm-af-cal,.hm-af-start-you,.hm-af-start-them{border:1px solid CanvasText}
}

/* ===== Home N (#220): its own CSS (hn-), from the mockups C:\TrillyOps\plans\home-n\home-n-v1.html and home-n.html (v2). Brand tokens and the type scale are the live site.css's; the studios' tiles, the characters and their label are studios.css's. Motion at the end. ===== */
.hn-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin:0 auto 28px}
.hn-head h2{max-width:18ch}
.hn-sub{margin:0;max-width:40rem;font-size:var(--fs-lead);color:var(--soft);text-wrap:balance}

/* 1. hero: a global marketplace, very simple */
/* overflow-x only (#226 (3)): the search suggestions' list hangs below the box, past the hero's bottom edge, and must not be cut off. */
.hn-hero{position:relative;overflow-x:clip;overflow-y:visible;background:linear-gradient(180deg,var(--cream-soft),var(--white) 85%);padding:clamp(48px,7vw,104px) 0 22px;border-bottom:1px solid var(--line)}
.hn-hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 1.5px 1.5px,rgba(13,44,84,.16) 1.5px,transparent 2px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,transparent 34%,#000 60%,transparent 92%);mask-image:radial-gradient(ellipse 62% 70% at 50% 42%,transparent 34%,#000 60%,transparent 92%)}
.hn-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hn-hero h1{font-size:var(--h1-hero);max-width:20ch;line-height:1.02;text-wrap:balance}
.hn-hero .lead{margin:0;max-width:32rem}
.hn-hero .search{width:100%;max-width:640px;margin:10px 0 0}
.hn-ai{padding:4px 0 0;border:0;background:none}
.hn-ai .hn-ai-in{gap:2px}
.hn-ai .hm-ai-h{font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.hn-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin:6px 0 0;font-size:var(--fs-small);color:var(--soft)}
.hn-stats span{padding:0 14px}
.hn-stats span+span{border-left:1px solid var(--line)}
.hn-stats b{font-family:var(--display);font-weight:700;color:var(--navy);margin-right:4px}
.hn-mq{position:relative;margin-top:clamp(28px,4vw,48px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hn-mq-track{display:flex;width:max-content}
.hn-mq-set{display:flex;gap:10px;margin:0;padding:4px 5px;list-style:none}
.hn-mq-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 8px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy);text-decoration:none;font-size:var(--fs-small);font-weight:500;white-space:nowrap}
a.hn-mq-pill:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.hn-area-ic{display:inline-grid;width:28px;height:28px;flex:none}
.hn-area-ic svg,.hn-tab-ic svg,.hn-ed-ic svg{width:100%;height:100%}

/* focus rings on the home's own controls */
.hn-mq-pill:focus-visible,.hn-job:focus-visible,.hn-by-a:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}

/* 2. the global strip: flags are our own drawings (img/flags) */
.hn-flag{display:block;flex:none;width:24px;height:16px}
.hn-flags{display:inline-flex;gap:4px;align-items:center}
.hn-glob{background:var(--white);border-bottom:1px solid var(--line)}
.hn-glob-in{display:flex;justify-content:center;align-items:center;gap:10px 40px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.hn-glob-a,.hn-glob-b{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:0;text-align:center;font-size:var(--fs-small);color:var(--soft)}
.hn-glob-a b,.hn-glob-b b{color:var(--navy);font-family:var(--display);font-weight:600}

/* 3. workflows by who you are: a tab a kind of person, the jobs, four cards, then the studios (studios.css) */
.hn-flows{background:var(--white)}
.hn-tabs-scroll{display:flex;justify-content:safe center;margin-bottom:20px}
.hn-tab{padding:0 20px 0 10px}
.hn-tab-ic{display:inline-grid;width:26px;height:26px;flex:none;margin-right:6px}
.hn-shelf[hidden]{display:none}
.hn-jobs{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 18px;padding:14px 16px;border-radius:var(--r-sm);background:var(--cream-soft);box-shadow:inset 0 0 0 1px var(--line)}
.hn-jobs-h{margin:0;font-family:var(--display);font-weight:700;color:var(--navy)}
.hn-jobs ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hn-job{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 14px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy);text-decoration:none;font-size:var(--fs-small);font-weight:500}
.hn-job:hover{box-shadow:inset 0 0 0 2px var(--navy)}
.hn-job .ui-ico{width:14px;height:14px;color:var(--gold-text)}
.hn-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.hn-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);box-shadow:0 2px 4px rgba(13,44,84,.05),0 24px 40px -30px rgba(13,44,84,.4)}
.hn-by{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;font-size:var(--fs-small);color:var(--navy)}
.hn-by-sm{gap:4px 6px}
.hn-by-a{display:inline-flex;align-items:center;gap:6px;min-height:44px;border-radius:999px;color:var(--navy);text-decoration:none}
.hn-by-a:hover .hn-by-t{text-decoration:underline}
.hn-by-t b{font-family:var(--display);font-weight:600}
.hn-card-job{margin:0;font-size:var(--h3);line-height:1.15}
.hn-card-job a{color:var(--navy)}
.hn-card-name{margin:0;font-size:var(--fs-small);color:var(--soft)}
.hn-card-name a{color:var(--navy);font-family:var(--display);font-weight:600}
.hn-card-price{display:block;margin-top:2px}
.hn-soft{color:var(--soft)}
.hn-card-test{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--navy);color:var(--white)}
.hn-card-test p{margin:0}
.hn-tt{font-size:var(--fs-small);color:var(--on-navy-soft)}
.hn-tt-row{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-small)}
.hn-tt-row b{min-width:3.6em;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--marigold)}
.hn-tt-off b,.hn-tt-off span{color:var(--on-navy-soft)}
.hn-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.hn-ed{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;background:var(--mist);color:var(--navy);font-size:var(--fs-small);font-weight:500}
.hn-ed .hn-flag{width:21px;height:14px}
.hn-ed-ic{display:inline-grid;width:18px;height:18px}
/* the card's foot line (#228): @trilly, the account behind every Original, then its signals */
.hn-card .sig{margin-top:auto;padding-top:4px;border-top:1px solid var(--line)}
.hn-also{display:flex;justify-content:center;gap:12px 28px;flex-wrap:wrap;margin:24px 0 0}

/* 4. the console film: builder-film's Remotion film of the team console (the shared _FilmLoop) */
.hn-con{background:var(--mist)}
/* The films v2 (#228; console-film-v2-brief.md Part 5): monday.com's tab layout. The copy and the chapters on the left; the loop on the
   right in a mist mat (24 px) inside a white card (24 px corners, the brief's e2 shadow). Only the chapter that's showing says its line. */
/* The film draws at about 900 px at 1440 so its own text reads at 12 px or more (the lead's ruling on the film-v2 review, M5): this
   section's wrap is wider than the page's, and its mat thinner. */
.hn-con .wrap.hn-cv-in{max-width:1360px}
.hn-cv-in{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,1.52fr);gap:clamp(24px,3vw,40px);align-items:center}
.hn-cv-in .film-mat{padding:16px}
.hn-cv-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hn-cv-copy h2{max-width:16ch}
.hn-cv-copy .hn-sub{text-align:left}
.hn-cv-copy .film-ch{margin:6px 0 8px}

/* 6. make a skill, as a film */
.hn-make{background:var(--cream-soft)}
/* The make film at the console film's size (about 900 px at 1440), its v2.1 render on the console film's type floor (26 px a word in
   the wide master, 42 in the phone one). */
.hn-make .wrap.hn-make-in{max-width:1360px}
.hn-make-in{display:grid;grid-template-columns:minmax(0,.48fr) minmax(0,1.52fr);gap:clamp(24px,3vw,40px);align-items:center}
.hn-make-in .film-mat{padding:16px}
.hn-make-copy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hn-make-copy .hn-sub{text-align:left}
.hn-host{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0;font-size:var(--fs-small);color:var(--navy)}
.hn-host b{font-family:var(--display);font-weight:600}

/* 7. software as the slim strip */
.hn-sw .hm-hw-head h2{white-space:normal;max-width:15ch}

@media (max-width:1080px){
  .hn-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Below 1400 px a film beside its copy draws under 0.69 of its 1280 px master, its smallest words under 12 px (the r2 review, M2: 0.50
   at 1024): the copy, then the film across the column (its frame about 900 to 1000 px from 1024 px up), then its chapters and the
   button. Up to 1023 px the 4:5 cut, in a phone-width card (site.css). */
@media (max-width:1399px){
  .hn-con .wrap.hn-cv-in,.hn-make .wrap.hn-make-in{max-width:1124px}
  .hn-make-in{grid-template-columns:minmax(0,1fr)}
  .hn-cv-in{grid-template-columns:minmax(0,1fr);gap:16px}
  .hn-cv-copy{display:contents}   /* heading and line, then the film, then its chapters and the button */
  .hn-cv-in>.film-card{order:1}
  .hn-cv-copy>.film-ch,.hn-cv-copy>.btn{order:2}
}
@media (min-width:761px) and (max-width:1399px){
  .hn-cv-copy .film-ch{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}   /* three a row under the film */
  .hn-cv-copy>.btn{justify-self:start}
}
@media (max-width:900px){
  .hn-cv-in .film-mat,.hn-make-in .film-mat{padding:8px}
}
@media (max-width:760px){
  /* A phone's first screen is the hero alone, its parts centred in it (at most 45 words a first screen). */
  .hn-hero{padding-top:28px;min-height:calc(100svh - 64px);display:flex;flex-direction:column;justify-content:center}
  .hn-hero>.wrap{width:100%}   /* a flex item with auto margins shrinks to its widest line (the apps row): never wider than the screen */
  /* A phone's first screen at most 45 words (the pre-check; CalmPageTests 49): the AI apps on one line that scrolls sideways, the
     row's heading short, its key line left to wider screens (each ticked app still says it to screen readers), two counts. */
  .hn-ai .hm-logos{position:relative;flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;gap:0 16px}
  .hn-hero .hn-ai,.hn-ai .hn-ai-in{width:100%;min-width:0}   /* a centred flex item is never narrower than its one-line row: the screen's width */
  .hn-stats span:nth-child(n+3){display:none}
  .hn-hero-in{gap:14px}
  .hn-stats span{padding:0 8px}
  /* The jobs on one line that scrolls sideways (a phone screen at most 80 words), the cards one a row. */
  .hn-jobs{flex-wrap:nowrap;flex-direction:column;align-items:stretch}
  .hn-jobs ul{position:relative;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hn-job{white-space:nowrap}
  /* A phone screen at most 80 words: the workflows' line is each card's "Why it's here" there; the make section's line is the film's
     first step. */
  .hn-flows .hn-head .hn-sub,.hn-make-copy .hn-sub{display:none}
  /* The make band's first phone screen held 81-83 words (26 Oct, release by): its second link repeats the button's way in (the
     section's line names the custom GPT on wider screens). */
  .hn-make-copy .hm-go{display:none}
  /* The cards one a screen, the next peeking, swiped sideways, its chips left to Why it's here and its name; the make film's pasted
     words two lines (the clamp on the words, the box keeps its padding); the studios' line left to wider screens (the heading and
     the tiles say it). */
  .hn-cards{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .hn-card{flex:0 0 calc(100% - 28px);scroll-snap-align:start}
  .hn-card-meta{display:none}
  .hn-studios-h p{display:none}
  /* The films on a phone: the frame as wide as the screen allows (its card into the gutters; the 4:5 cut's words 12 px and up from
     360 px; at 320 px about 11). */
  .hn-cv-in .film-mat,.hn-make-in .film-mat{padding:6px}
}
@media (max-width:560px){
  .hn-cv-in>.film-card,.hn-make-in>.film-card{margin-inline:-8px}
}

/* ===== The proof in pictures (#226, _ProofStrip): three tested skills on the navy band, each its runs right with the skill against
   a well-prompted AI's as two bars (a tenth a step), a link to its test; then how testing and ranking work. ===== */
.hm-ps-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 0;padding:0;list-style:none}   /* the strip's full width (the review r1, H1) */
.hm-ps-card{display:grid;gap:8px;height:100%;padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--white);text-decoration:none}
.hm-ps-card:hover{box-shadow:inset 0 0 0 1px var(--marigold)}
.hm-ps-card:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.hm-ps-name{font-family:var(--display);font-weight:600;line-height:1.3}
.hm-ps-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:var(--fs-small)}
.hm-ps-row b{font-family:var(--display);font-weight:600;white-space:nowrap}
.hm-ps-track{display:block;height:8px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden}
.hm-ps-track i{display:block;height:100%;border-radius:8px;background:var(--marigold)}
.hm-ps-plain .hm-ps-track i{background:var(--on-navy-soft)}
.hm-ps-w0{width:0}.hm-ps-w10{width:10%}.hm-ps-w20{width:20%}.hm-ps-w30{width:30%}.hm-ps-w40{width:40%}.hm-ps-w50{width:50%}
.hm-ps-w60{width:60%}.hm-ps-w70{width:70%}.hm-ps-w80{width:80%}.hm-ps-w90{width:90%}.hm-ps-w100{width:100%}
.hm-ps-when{color:var(--on-navy-soft);font-size:var(--fs-small)}
.hm-ps-kick{color:var(--marigold);font-size:var(--fs-small);font-weight:500}   /* body text never bold (#176) */
.hm-ps-p50{width:50%}.hm-ps-p35{width:35%}.hm-ps-p15{width:15%}
.hm-ps-rank .hm-ps-track i{background:var(--on-navy-soft)}
.hm-ps-steps{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.hm-ps-steps li{display:flex;align-items:center;gap:10px;font-weight:500}
.hm-ps-step-ic{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:10px;background:rgba(255,255,255,.1)}
.hm-ps-step-ic svg{width:20px;height:20px}
@media (max-width:900px){
  .hm-ps-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .hm-ps-when{display:none}   /* a phone screen's words (the home at 80 a screen): each card is a link to the whole of it */
  /* The newest test alone on a phone: Browse's order took a screen over 80 words, and with the rank the band was still 82 on one
     screen (release bw6, 26 Oct). Both are on /trust/how-we-rank. */
  .hm-ps-cards>li:nth-child(n+2){display:none}
}

/* ===== The live band (#226, Pages/Home/_Live.cshtml): what happened lately, newest first, beside the week's counts and the country
   editions. One list and one card, 1 px lines, the v2 type; nothing moves but the band's one entrance (.reveal). ===== */
.hn-live .hm-sec-head{margin-bottom:clamp(16px,2vw,24px);text-align:center}
.hn-live-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.hn-live-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.hn-live-item{border-bottom:1px solid var(--line)}
.hn-live-a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 4px;color:var(--navy);text-decoration:none;border-radius:var(--r-sm)}
.hn-live-a:hover .hn-live-name{text-decoration:underline;text-underline-offset:3px}
.hn-live-a:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.hn-live-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}
.hn-live-ic svg{width:24px;height:24px}
.hn-live-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.hn-live-kind{align-self:flex-start;padding:2px 10px;border-radius:999px;background:var(--mist);font-size:var(--fs-small);font-weight:500;line-height:1.5}
.hn-live-kind.hn-live-new{background:var(--marigold)}
.hn-live-kind.hn-live-updated{background:var(--mint)}
.hn-live-kind.hn-live-asked,.hn-live-kind.hn-live-answered{background:var(--ice)}
.hn-live-kind.hn-live-review,.hn-live-kind.hn-live-result{background:var(--apricot)}
.hn-live-name{font-weight:500;line-height:1.35}
.hn-live-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;color:var(--soft);font-size:var(--fs-small)}
.hn-live-meta .hn-flag{width:18px;height:12px;border-radius:2px}
.hn-live-by{color:var(--navy);font-weight:500}
.hn-live-at{color:var(--soft);font-weight:400}
.hn-live-meta .sig{display:inline-flex}
.hn-live-stars{display:inline-flex;color:var(--gold-text)}
.hn-live-side{display:grid;gap:20px;padding:clamp(20px,2.5vw,28px);border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.hn-live-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.hn-live-nums a{display:flex;flex-direction:column;gap:2px;height:100%;padding:14px 16px;border-radius:var(--r-sm);background:var(--cream-soft);color:var(--navy);text-decoration:none}
.hn-live-nums a:hover{background:var(--cream)}
.hn-live-nums a:focus-visible,.hn-live-eds a:focus-visible{outline:var(--ring-line);box-shadow:var(--ring)}
.hn-live-nums b{font-family:var(--display);font-size:var(--h3);font-weight:700;line-height:1.1}
.hn-live-nums span{color:var(--soft);font-size:var(--fs-small);line-height:1.35}
.hn-live-eds-h{margin:0;font-size:var(--fs-body);font-weight:600}
.hn-live-eds{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:0;list-style:none}
.hn-live-eds a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--navy);text-decoration:none}
.hn-live-eds a:hover{border-color:var(--navy)}
.hn-live-eds span{flex:1;min-width:0}
.hn-live-eds b{font-family:var(--display);font-weight:600;white-space:nowrap}
.hn-live-eds b span{font-family:var(--body);font-weight:400;color:var(--soft);font-size:var(--fs-small)}
.hn-live-cn{display:flex;flex-direction:column;line-height:1.25}
.hn-live-cn small{color:var(--soft);font-size:var(--fs-small)}
.hn-live-world{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;color:var(--soft);font-size:var(--fs-small)}
.hn-live-world b{font-family:var(--display);font-weight:600;color:var(--navy)}
@media (max-width:900px){
  .hn-live-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* A phone lists the three newest and the first three editions; the rest are a tap away (each one's page, the feed, "Choose your
     region"), so the band keeps to a phone screen's words however much the month holds (release bw3, 26 Oct). */
  .hn-live-item:nth-child(n+4),.hn-live-eds li:nth-child(n+4),.hn-live-nums li:nth-child(n+3){display:none}
  .hn-live-world{display:none}   /* a phone: three items, two counts and no region line (the footer has it): each item says its maker (#228) */
}
@media (forced-colors:active){
  .hn-live-kind,.hn-live-nums a{border:1px solid CanvasText}
}

/* ===== Motion: only with .hn-motion (js/site.js adds it; never under reduced motion or ?still). The HTML is the finished state. */
.hn-dup{display:none}
.hn-motion .hn-dup{display:flex}
.hn-motion .hn-mq-track{animation:hn-glide 80s linear 2}   /* two passes, then still: its second copy is the first, so it rests seamlessly */
.hn-motion .hn-mq:hover .hn-mq-track,.hn-motion .hn-mq:focus-within .hn-mq-track,.hn-motion .hn-mq.hn-held .hn-mq-track{animation-play-state:paused}
html:not(.hn-motion) .hn-mq{position:relative;overflow-x:auto;-webkit-mask-image:none;mask-image:none}
@keyframes hn-glide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* The hero builds as monday.com's does (#228, brief Part 5 item 3): the search box and the AI apps row rise (power3.out, 0.75 s), the
   apps follow 0.3 s later, 0.05 s apart, the placeholder types (js/site.js); the moving row keeps its two passes, then rests. */
@keyframes hn-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hn-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
/* From CSS alone, at first paint (the film-v2 review, M4: waiting for the deferred script, the search showed, vanished, then rose); a
   visitor who asked for less motion gets none, and ?still (js/site.js adds hn-still) cancels it. Filled backwards only: an animation
   that keeps its last frame keeps each element in a layer of its own, and the apps row then covered the search's suggestions (the r2
   review, 27 Oct); backwards holds the first frame through each delay and lets go at the end. */
@media (prefers-reduced-motion:no-preference){
  html:not(.hn-still) .hn-hero .search-hero,html:not(.hn-still) .hn-hero .hm-ai-h{animation:hn-up .75s cubic-bezier(.215,.61,.355,1) backwards}
  html:not(.hn-still) .hn-hero .hm-ai-h{animation-delay:.12s}
  html:not(.hn-still) .hn-hero .hm-logos li{animation:hn-pop .5s cubic-bezier(.34,1.5,.64,1) .3s backwards}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(2){animation-delay:.35s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(3){animation-delay:.4s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(4){animation-delay:.45s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(5){animation-delay:.5s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(6){animation-delay:.55s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(7){animation-delay:.6s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(8){animation-delay:.65s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(9){animation-delay:.7s}
  html:not(.hn-still) .hn-hero .hm-logos li:nth-child(n+10){animation-delay:.75s}
}
/* A workflows tab's panel pops in on each switch (brief Part 5 item 4: back.out(1.5), 0.5 s, cards 0.08 s apart; js/site.js adds hn-pop). */
.hn-motion .hn-shelf.hn-pop .hn-jobs,.hn-motion .hn-shelf.hn-pop .hn-card{animation:hn-pop .5s cubic-bezier(.34,1.5,.64,1) both}
.hn-motion .hn-shelf.hn-pop .hn-card:nth-child(1){animation-delay:.08s}
.hn-motion .hn-shelf.hn-pop .hn-card:nth-child(2){animation-delay:.16s}
.hn-motion .hn-shelf.hn-pop .hn-card:nth-child(3){animation-delay:.24s}
.hn-motion .hn-shelf.hn-pop .hn-card:nth-child(4){animation-delay:.32s}

/* sections rise in once */
.hn-motion .hn-rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.hn-motion .hn-rise.hn-in{opacity:1;transform:none}
@media print{.hn-motion .hn-rise{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hn-motion .hn-mq-track,.hn-motion .hn-shelf.hn-pop .hn-jobs,.hn-motion .hn-shelf.hn-pop .hn-card{animation:none}
  .hn-motion .hn-rise{opacity:1;transform:none;transition:none}
}