/* The browse pages (calm batch G, #190; the mockups v2's browse page, C:\TrillyOps\plans\calm-show-mockups-v2\site\browse.html):
   /explore, /search and the lists. Rules prefixed br-; AreaStyles loads this sheet on those routes only. The card, the header, the
   search box and the closing ask are calm-g-home's (site.css): nothing here restyles them. */

/* The hero: a two-tone headline that counts the skills, the search, and the one proof number (wide screens). */
.br-hero{padding:0 0 20px}
.br-hero .crumbs{margin-bottom:12px}
.br-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
/* A directory's heading at the section size on a wide screen (the mockup's browse heading is smaller than a page's), so the first
   cards' names are on the first screen (FirstScreenTests); a phone keeps the page size. */
.br-ask h1{max-width:13em;font-size:var(--h2)}
.br-hero-list h1{max-width:13em}
.br-tt{display:block;color:var(--soft)}
.br-ask .search{max-width:620px;margin-top:24px}
.br-tested{display:grid;grid-template-columns:auto auto;gap:6px 24px;align-items:center;max-width:460px;padding:28px 32px;border-radius:var(--r-panel);background:var(--cream);color:var(--navy);text-decoration:none}
.br-tested .display-number{grid-row:span 2}
.br-tested-what{align-self:end;line-height:1.35}
.br-tested-go{display:inline-flex;align-items:center;gap:8px;align-self:start;min-height:44px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.br-tested-go .ui-ico{width:18px;height:18px}
.br-tested:hover .br-tested-go{text-decoration-thickness:2px}
.br-tested:focus-visible{outline:var(--ring-line);outline-offset:3px;box-shadow:var(--ring)}

/* The filter bar: the areas as chips (links), then the switches, the country and the order. It stays under the header. */
.br-filters{position:sticky;top:72px;z-index:20;padding:10px 0;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.br-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.br-sits{position:relative;display:flex;flex:1 1 100%;gap:8px;min-width:0;padding:2px;overflow-x:auto;scrollbar-width:none}
.br-sits::-webkit-scrollbar{display:none}
.br-sit{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);color:var(--navy);text-decoration:none;white-space:nowrap;transition:box-shadow .15s}
.br-sit svg{width:22px;height:22px;flex:none}
.br-n{color:var(--soft);font-size:var(--fs-small)}
.br-sit:hover{box-shadow:inset 0 0 0 1px var(--navy)}
.br-sit[aria-current]{background:var(--navy);color:var(--white);box-shadow:none}
.br-sit[aria-current] .br-n{color:var(--on-navy-soft)}
.br-sit:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.br-filters-btn{display:none}
/* On a wide screen the sheet is the row itself: the popover's own box rules are undone. */
.br-sheet{position:static;inset:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:auto;height:auto;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible}
.br-sheet-head,.br-sheet-help{display:none}
.br-toggles{display:flex;flex-wrap:wrap;gap:4px}
.br-check{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.br-toggles label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px 0 4px;border-radius:12px;cursor:pointer;white-space:nowrap}
.br-toggles label:hover{background:var(--mist)}
/* The switch: its edge is --field (3:1 on white) off, navy on, so either state reads (WCAG 1.4.11). */
.br-sw{position:relative;flex:none;width:36px;height:22px;border-radius:99px;background:var(--white);box-shadow:inset 0 0 0 2px var(--field);transition:background-color .25s}
.br-sw::after{content:"";position:absolute;left:4px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--field);transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s}
.br-check:checked+label .br-sw{background:var(--navy);box-shadow:none}
.br-check:checked+label .br-sw::after{background:var(--marigold);transform:translateX(14px)}
.br-check:focus-visible+label{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.br-pick{display:inline-flex;align-items:center;gap:10px}
.br-pick label{color:var(--soft)}
.br-pick .input{width:auto;max-width:190px;min-height:44px;padding-block:8px}
.br-hint{flex-basis:100%;max-width:var(--measure);color:var(--soft)}
/* "Show first" beside the count: its label stays on screen here. The select is a 44 px target; it reaches into the line's spacing, so
   the line keeps the count's height and the first cards' names stay on a desktop's first screen (FirstScreenTests). */
.br-order{margin:-10px 0 -10px auto}
.br-order label{color:var(--soft)}
.br-order-go{min-height:44px;padding:8px 16px}
/* With no script, "Show skills" ends the row on a wide screen, small, so the row stays one line; js/browse.js sends the form instead. */
@media (min-width:761px){
  .br-apply{min-height:40px;padding:8px 16px;font-size:var(--fs-small)}
  .br-live:not(.br-dirty) .br-apply{display:none}
  /* In the row the select says its own choice ("Any country"), so its label is for screen readers; the phone's sheet shows it. */
  .br-sheet .br-pick label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* The results: the count and the order, the notes, the cards. */
.br-results{padding:16px 0 clamp(56px,7vw,96px)}
.br-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:16px}
.br-count{font-size:var(--h3)}
.br-sort,.br-noreviews{color:var(--soft)}
.br-sort a{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
.br-sort a:hover{color:var(--navy);text-decoration-color:var(--gold)}
.br-results .market-note{margin:0 0 16px}
.br-results .list-note{margin-bottom:16px}
.br-cards{gap:28px 24px}
/* More cards on a phone (design-b2-9): the first dozen, the rest one press away (/explore ran 15,000 px); open, with no button, on wider screens (site.css .phone-fold). */
.br-cards-more{margin-top:28px}
.br-cards-more>summary{justify-content:center;min-height:48px;border:1px solid var(--line);border-radius:999px;background:var(--white)}
.br-cards-more[open]>summary{margin-bottom:28px}
/* The button says what it does next: "Show 12 more skills" shut, "Show fewer skills" open (the design-b2-9 review, L5). */
.br-cards-more>summary .br-more-shut,.br-cards-more[open]>summary .br-more-open{display:none}
.br-cards-more[open]>summary .br-more-shut{display:inline}
.br-sec{padding-top:0}

/* /search's other finds, and the lists' answer, chips and "Show all". */
.br-more{margin-top:clamp(40px,5vw,64px)}
.br-more h2,.br-results .tell-us-box h2{font-size:var(--h3)}
.br-hero .answer-box{max-width:38em;padding:0;border:0;border-radius:0;background:none;font-size:var(--fs-lead);color:var(--soft)}
.br-hero .fresh{margin-top:12px}
@media (max-width:760px){.br-wide{display:none}}
/* A list's hero ends with a section's gap (the v2 rhythm), so its answer and the lists read as the page's first idea, and the
   cards begin below them. */
.br-hero-list{padding:24px 0 64px}
.br-hero-list.br-hero-snug{padding-bottom:32px}   /* less dead space before the first card: batch 2's own lists only (design-b2) */
.br-hero-list .crumbs{margin-bottom:32px}
.br-hero-list .answer-box{margin-top:28px!important}
.br-lists{flex:none;margin-top:44px}
.br-hero-list+.br-results{padding-top:40px}
.br-hero-snug+.br-results{padding-top:24px}
.br-results .ranked-when{margin-bottom:20px}
/* One or two results: wide cards, the picture beside the words (design-b2's review); a phone keeps the one card. */
@media (min-width:761px){
  .grid3.br-cards-wide,.br-cards-wide{grid-template-columns:minmax(0,1fr);max-width:880px}   /* beats site.css's .grid3:has(>:only-child) 520 px (r2's L1) */
  .br-cards-wide>.card-linked{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .br-cards-wide>.card-linked>.card-pic{border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);aspect-ratio:auto;min-height:100%}
}
/* The other pages a search found, as chips under the cards (design-b2's review). */
.br-hit-chips{flex-wrap:wrap;margin:10px 0 0;padding:0;list-style:none;overflow:visible}
.br-hits h2{font-size:var(--fs-body)}
/* /best's other ways as one line when they are two or fewer (design-b2's review). */
.br-lists-line{align-items:center;margin-top:32px}
.br-lists-lead{flex:none;color:var(--soft);font-size:var(--fs-small)}
.br-all{margin-top:32px}
.br-after .section-tight:first-child{padding-top:0}
/* One section size down each page: the sections after the list never outshout it (set 2's review, M6). */
.br-after h2{font-size:var(--h3)}
/* Nothing ranked yet (/best/[area]): "Too new to rank" comes up under the hero, no empty band (set 2's review, L9). */
.br-hero-list+.br-results.br-results-tight{padding-top:0}
.br-results-tight .br-more:first-of-type{margin-top:0}   /* and no section gap above it (the re-review, N-L5) */

/* The drawn empty state. */
.br-empty{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:center;padding:48px;border-radius:var(--r-panel);background:var(--mist)}
.br-empty-art{display:block;width:200px;height:auto}
/* A collection's skills as a row of pictures above its name (the 29 Oct design sweep, group B) */
.br-strip{display:flex;gap:10px;margin-bottom:20px}
.br-strip-t{display:grid;place-items:center;width:56px;height:56px;border-radius:16px}
.br-strip-t svg{width:32px;height:32px}
@media (min-width:961px){.br-strip{float:right;margin:0 0 12px 32px}}   /* beside the heading on a wide screen, so the first cards are on the first screen (the review, L4) */
/* A job page's steps folded: each step's name one line, its detail one press away (the 30 Oct design sweep, group B round 2). */
.steps-fold summary{justify-content:space-between;font-family:var(--display);font-size:var(--h3);line-height:1.25;color:var(--navy);font-weight:600}
ol.steps.steps-fold details>p{margin-top:6px}
/* The list an empty ranked page will become: three places waiting (the 29 Oct design sweep, group B). Counters, so no numbers are words on the page. */
.br-ghost{display:grid;gap:10px;width:200px;counter-reset:ghost}
.br-ghost-row{counter-increment:ghost;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.br-ghost-row::before{content:counter(ghost);grid-row:1 / span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--marigold);color:var(--navy);font-weight:600;font-size:var(--fs-small)}
.br-ghost-row b{display:block;height:10px;border-radius:5px;background:var(--line)}
.br-ghost-row i{display:block;height:8px;width:60%;border-radius:4px;background:var(--mist)}
.br-empty h2{font-size:var(--h2)}
.br-empty p{max-width:34em;margin-top:12px;color:var(--soft)}
.br-empty .br-empty-ways{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}

@media (max-width:1080px){
  .br-grid{grid-template-columns:minmax(0,1fr)}
  .br-tested{justify-self:start}
}
@media (max-width:1200px){
  .br-filters{top:64px}
}
/* Phones: one line of chips and the Filters button; the switches in a bottom sheet (only where the Popover API is, so with no
   support they stay in the page); the proof tile, the headline's count and the order line step aside, as in the mockup. */
@media (max-width:760px){
  /* Room above the results on a phone (the calm look, and the directory budget): the first card's picture and name show on the
     first screen, and what it does starts below it, as the mockup's phone shows one card. */
  .br-hero{padding-bottom:40px}
  .br-hero .crumbs{margin-bottom:20px}
  /* A list's hero takes more room on a phone: the answer, then the lists, then the first card with only its name in view. */
  .br-hero-list{padding:8px 0 72px}
  .br-hero-list.br-hero-snug{padding-bottom:48px}
  .br-hero-list .crumbs{margin-bottom:28px}
  .br-hero-list .answer-box{margin-top:20px!important}
  .br-hero-list .br-lists{margin-top:40px}
  .br-hero-list+.br-results{padding-top:64px}
  .br-hero-snug+.br-results{padding-top:24px}
  .br-results .ranked-when{margin-bottom:36px}
  .br-ask h1{font-size:var(--h1)}
  .br-ask .search{margin-top:28px}
  .br-tested,.br-tt,.br-sort{display:none}
  .br-filters{padding:14px 0}
  .br-results{padding-top:36px}
  /* The count and "Show first" share one line on a phone: the select says its own choice, its label is for screen readers. */
  .br-line{flex-wrap:nowrap;align-items:center;margin-bottom:24px}
  .br-count{flex:1 1 auto;min-width:0}
  .br-order{flex:none}
  .br-order label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* "New skills, so no reviews yet." (the code review's L4) and a shown "Show" each take their own line below the count. */
  .br-line:has(.br-noreviews),.br-line:has(.br-order-go:not([hidden])){flex-wrap:wrap;row-gap:4px}
  .br-noreviews{order:3;flex-basis:100%}
  .br-empty{grid-template-columns:minmax(0,1fr);gap:12px;padding:28px 20px}
  .br-empty-art{width:150px}
  .br-ghost{width:170px}
  .br-strip-t{width:44px;height:44px;border-radius:14px}
  .br-strip-t svg{width:26px;height:26px}
  @supports selector(:popover-open){
    .br-bar{flex-wrap:nowrap}
    .br-sits{flex:1 1 auto;margin-left:calc(-1 * clamp(16px,4vw,32px));padding-left:clamp(16px,4vw,32px)}
    .br-filters-btn{display:inline-flex;flex:none;gap:8px;min-height:44px;padding:0 14px}
    .br-filters-btn .ui-ico{width:20px;height:20px}
    .br-sheet:not(:popover-open){display:none}
    .br-sheet:popover-open{position:fixed;inset:auto 0 0 0;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;max-width:none;max-height:80dvh;padding:10px 20px calc(20px + env(safe-area-inset-bottom,0px));border-radius:28px 28px 0 0;background:var(--white);box-shadow:0 -20px 50px -20px rgba(13,44,84,.35);overflow:auto}
    .br-sheet::backdrop{background:rgba(13,44,84,.38)}
    .br-sheet-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 8px}
    .br-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--mist);color:var(--navy);cursor:pointer}
    .br-close .ui-ico{width:18px;height:18px}
    .br-close:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
    .br-toggles{flex-direction:column;gap:0}
    .br-toggles label{flex-direction:row-reverse;justify-content:space-between;min-height:56px;padding:0 2px;border-bottom:1px solid var(--line);border-radius:0}
    .br-toggles label:hover{background:none}
    .br-pick{display:flex;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--line)}
    .br-pick label{color:var(--navy)}
    .br-sheet-help{display:block;padding:14px 2px 0}
    /* In the open sheet "Show skills" is the one action on screen, so it takes the navy (the page itself keeps one: the search). */
    .br-apply{width:100%;margin-top:16px;border-color:var(--navy);background:var(--navy);color:var(--white)}
  }
}
@media (prefers-reduced-motion:reduce){
  .br-sit,.br-sw,.br-sw::after{transition:none}
}

/* ---- Set 2: /tasks, /best and the doors (/for/{area}). ---- */

/* /tasks: one panel an area, its icon on its tint, its jobs with their numbers, its best-of list. */
.br-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.br-area{display:flex;flex-direction:column;gap:12px;min-width:0;padding:28px;border:1px solid var(--line);border-radius:var(--r)}
.br-area-ic{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:16px}
.br-area-ic svg{width:32px;height:32px}
.br-area h2{font-size:var(--h3)}
.br-area h2 a{color:var(--navy);text-decoration:none}
.br-area h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.br-jobs{list-style:none;margin:0;padding:0}
.br-jobs li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--line)}
.br-jobs li:last-child{border-bottom:0}
.br-jobs a{color:var(--navy);font-weight:500;text-decoration:none}
.br-jobs a:hover{text-decoration:underline;text-underline-offset:3px}
.br-jobs .br-n{flex:none;padding:2px 10px;border-radius:999px;background:var(--mist);color:var(--soft);font-size:var(--fs-small)}
/* A panel's fold of the rest of its jobs, and a phone's fold of the areas after the sixth (design-b2's review). */
.br-jobs-more>summary{min-height:44px;font-weight:500;color:var(--navy)}
.br-areas-more{margin-top:24px}
.br-areas-more>summary{min-height:44px;font-weight:600;color:var(--navy);margin-bottom:12px}
.br-area-best{margin-top:auto;padding-top:8px}
.br-ask-box{padding:clamp(24px,3vw,40px);border:0;border-radius:var(--r-panel);background:var(--mist)}
.br-ask-box p{max-width:var(--measure)}
.br-best-tiles{margin-top:0}

/* The doors: the area's want and the picture that proves it, on the area's tint. */
.br-door{padding-bottom:clamp(40px,5vw,72px)}
.br-door .crumbs{margin-bottom:16px}
.br-door-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding:clamp(28px,4vw,56px);border-radius:var(--r-panel)}
.br-door-solo{grid-template-columns:minmax(0,1fr)}
.br-door-copy h1{max-width:12em}
/* The area's name above its want, in the heading (calm-g-doors' eyebrow, set inside the h1 so the heading still names the list). */
.br-kicker{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-family:var(--body);font-size:var(--fs-body);font-weight:500;line-height:1.4;letter-spacing:0;color:var(--ink)}
.br-kicker svg{flex:none;width:28px;height:28px}
.br-door-copy .lead{margin-top:16px;color:var(--ink)}
.br-door-go{margin-top:28px}
.br-door-pic{min-width:0;margin:0}
.br-door-pic .pic-flip{margin-bottom:16px}
.br-door-note{margin-top:14px;max-width:40em;color:var(--soft);font-size:var(--fs-small)}
/* The door's score (set 2's review, H1): under the pictures, or straight after the switch in the narrow copy. */
.br-door-pic .pic-fc + .pic-score{margin-top:20px}
.br-door-pic .pic-score + .pic-fc{margin-top:20px}
.br-door-pic .pic-score-cap{margin:0 0 8px;font-size:var(--fs-small);color:var(--soft)}
.br-door-skills{padding-top:0}

/* The navy band: what stays with you, and the three steps in the shared "In your AI" words. */
.br-night-top{display:flex;align-items:flex-start;gap:20px;margin-bottom:28px}
.br-night-top svg{flex:none;width:48px;height:48px}
.br-night-top p{max-width:40em;margin-top:12px;color:var(--on-navy-soft)}
.br-night .iya{max-width:none}
.br-night .iya-steps{border-top-color:rgba(255,255,255,.18)}
.br-night .iya-steps>li{border-bottom-color:rgba(255,255,255,.18)}
.br-night .iya-steps>li::before{color:var(--marigold)}
.br-night .iya-word{color:var(--white)}
.br-night .iya-body,.br-night .br-night-more p{color:var(--on-navy-soft)}
.br-night .iya-more>summary,.br-night .br-night-more>summary{color:var(--white)}
.br-night .link,.br-night a{color:var(--white)}
.br-night .iya-apps .pill{border-color:rgba(255,255,255,.3);background:transparent;color:var(--white)}
.br-night .iya-apps .pill[aria-current="true"]{border-color:var(--marigold);background:var(--marigold);color:var(--navy)}
.br-night-more{margin-top:20px}

/* A business door's staff box: just you needs no workspace; a team's price only as true as billing is. */
.br-staff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.br-staff h2{max-width:12em}
.br-staff-box{display:grid;gap:12px;padding:clamp(24px,3vw,36px);border-radius:var(--r-panel);background:var(--ice)}
.br-staff-box p{max-width:var(--measure)}

@media (max-width:1080px){
  .br-areas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .br-door-field{grid-template-columns:minmax(0,1fr);gap:32px}
  .br-staff{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:760px){
  .br-areas{grid-template-columns:minmax(0,1fr);gap:16px}
  .br-area{padding:20px}
  .br-door-field{padding:28px 20px;border-radius:28px}
  .br-door-copy h1{font-size:var(--h1)}
  .br-night-top{flex-direction:column;gap:12px}
}
/* A door's picture: beside its heading on a wide screen; below its hero on a narrower one, so a phone's first screen is the want and
   its button. */
.br-flip-narrow{display:none}
@media (max-width:1080px){
  .br-flip-wide{display:none}
  .br-flip-narrow{display:block;padding-bottom:clamp(40px,5vw,64px)}
}
/* A door's bands (what stays with you, staff) keep a section's space between them and what follows. */
.br-band{padding-bottom:clamp(48px,5vw,88px)}

/* ---- Set 2: /collections and a collection, /compare, /tell-us, /works-with and /what-trilly-does. ---- */

/* /collections: one card a collection, its mark on its tint, its name, its line, its count and who picked it. */
.br-colls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.br-coll{gap:10px;padding:24px;color:var(--ink);transition:border-color .15s}
.br-coll:hover{border-color:var(--navy)}
.br-coll:focus-visible{outline:var(--ring-line);outline-offset:3px;box-shadow:var(--ring)}
.br-coll b{font-size:var(--h3);font-weight:600}
.br-coll-ic{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px}
.br-coll-ic svg{width:28px;height:28px}
.br-hero .badge{margin-bottom:4px}
.br-hero .note{margin-top:8px;color:var(--soft)}
.br-line .list-note{margin:0}
@media (max-width:1080px){.br-colls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.br-colls{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (prefers-reduced-motion:reduce){.br-coll{transition:none}}

/* /compare: the two cards side by side above the one table. */
.br-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:880px}
/* On a phone the two cards stack, so their example pictures go and the table comes sooner (set 2's pre-check: a picture's words
   filled whatever room the heading left on the first screen). */
@media (max-width:760px){.br-pair{grid-template-columns:minmax(0,1fr);gap:16px}.br-pair .card-pic{display:none}}

/* A page's drawing beside its heading on a wide screen (/tell-us, /works-with: Trilly's scenes); a narrower screen leaves it out,
   so the first screen is the heading and the form or the list. */
.br-aside-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px;align-items:center}
.br-aside-art{display:block;width:100%;height:auto}
.br-tell .br-aside-grid{align-items:start}
.br-tell .br-aside-art{margin-top:56px}
.br-tell .lead{max-width:34em}
.br-tell-form{margin-top:28px}
/* What happens next, drawn: three numbered places under the board, or under the form on a phone (the 29 Oct design sweep, group B). */
.tu-side{min-width:0}
.tu-next{margin-top:32px}
.tu-next h2{font-size:var(--h3)}
.tu-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;counter-reset:tu}
.tu-steps>li{counter-increment:tu;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r-sm);background:var(--mist)}
.tu-steps>li::before{content:counter(tu);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--marigold);color:var(--navy);font-weight:600}
@media (max-width:1080px){
  .br-aside-grid{grid-template-columns:minmax(0,1fr)}
  .br-aside-art{display:none}
}

/* /what-trilly-does: one band a group, its head beside what it does on a wide screen. */
.br-caps{padding-bottom:clamp(56px,7vw,96px)}
.br-cap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:48px;max-width:none;padding-block:40px}
.br-cap .cap-head{flex-direction:column;align-items:flex-start;gap:16px}
.br-cap .cap-head h2{font-size:var(--h3)}
.br-cap .cap-list{margin:0;max-width:none}
@media (max-width:900px){.br-cap{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:28px}}

/* A list's heading a phone leaves to screen readers, where the button above already says the count (a collection). */
@media (max-width:760px){.br-phone-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

/* /what-trilly-does: the groups as tiles under the heading, the page at a glance. */
.br-cap-tiles{margin-top:28px}
.br-cap-tiles .tile{min-height:120px}
/* A phone's first screen: two tiles a row, not six full-width ones (set 2's review, L4). */
/* site.css's .tiles.tiles-3 goes to one column at 900 px; this list keeps two (the re-review's L4). */
@media (max-width:900px){.tiles.tiles-3.br-cap-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.br-cap-tiles .tile{min-height:0}}
/* A phone's tiles are the groups' names; each group's own section says how many it holds (the 28 Oct sweep: 49 words, warn over 45). */
@media (max-width:600px){.br-cap-tiles .wtd-count{display:none}}

/* The skill finder (/find, #205): who it's for, your apps and your jobs, one screen each, then each job's skills as the one card.
   The areas are the browse chips; the steps' numbers are the home's marigold. */
.fnd-hero{padding-bottom:8px}
.fnd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:48px;align-items:center}
.fnd-ask h1{max-width:13em;font-size:var(--h2)}
.fnd-lead{margin-top:12px;max-width:38em;font-size:var(--fs-lead);color:var(--soft)}
.fnd-art{min-width:0}
.fnd-step{padding:24px 0}
.fnd-step h2{display:flex;align-items:center;gap:12px;font-size:var(--h3)}
.fnd-n{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--marigold);color:var(--navy);font-family:var(--display);font-size:var(--fs-body);font-weight:600;line-height:1}
.fnd-first{padding-bottom:clamp(56px,7vw,96px)}
.fnd-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fnd-note{margin-top:8px;max-width:44em;color:var(--soft)}
.fnd-choose{padding-bottom:clamp(56px,7vw,96px)}
.fnd-for{margin-top:4px;color:var(--soft)}
.fnd-form{display:grid;gap:8px}
.fnd-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;margin-top:16px}
.fnd-app{display:grid;gap:4px;min-width:0}
.fnd-app label{font-weight:600}
/* The app pickers as My apps draws its own (site.css .myapps-pick select): the label's type, a 2px field border. */
.fnd-app select{width:100%;min-width:0;min-height:44px;border:2px solid var(--field);border-radius:10px;background:var(--white);padding:8px 10px;color:var(--ink);font:inherit;font-size:var(--fs-body)}
.fnd-more{margin-top:16px}
/* The folds carry the site's one fold sign (.disclose: its chevron, and no browser marker). */
.fnd-more>summary,.fnd-change>summary,.fnd-tell>summary,.fnd-more-jobs>summary,.fnd-area>summary{min-height:44px;font-weight:600;color:var(--navy)}
/* Step 3 (the re-check's M1, M2): a job with a skill says it, with the skill's name; the rest after a plain label, five, then "More";
   under Every job, an area a fold with its count. */
.fnd-skill{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:var(--fs-small);color:var(--good)}

.fnd-jobs>.fnd-none-label,.fnd-jobs>.fnd-more-jobs{grid-column:1/-1}
.fnd-none-label{margin:12px 0 0;font-weight:600;color:var(--soft)}
.fnd-jobs-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;margin-top:4px}
.fnd-area{border-top:1px solid var(--line)}
.fnd-step h2+.fnd-area,.fnd-step .alert+.fnd-area,.fnd-step .fnd-note+.fnd-area,.fnd-other-h+.fnd-area{margin-top:16px}   /* r3's N-M2: the first fold's line touched the heading */
.fnd-other-h{margin:28px 0 0;font-size:var(--fs-body);font-weight:600}
.fnd-more-areas{margin-top:12px}
.fnd-more-areas>.fnd-area{margin-left:16px}
.fnd-area:last-of-type,.fnd-area:has(+.fnd-more-areas){border-bottom:1px solid var(--line)}   /* r4's L-a: "N more areas" is a details too */
.fnd-count{margin-left:10px;font-weight:400;font-size:var(--fs-small);color:var(--soft)}
.fnd-area>.fnd-jobs{margin:0 0 12px}
.fnd-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;margin:16px 0 0;padding:0;border:0;min-width:0}
.fnd-jobs legend{margin-bottom:8px;padding:0;font-weight:600}
.fnd-jobs .check{min-height:44px;align-items:center}
/* A row with a skill runs two lines (the job, then the skill's name): its box sits by the job's line (r3's L3: the rule above won). */
.fnd-jobs .check.fnd-has{align-items:flex-start;padding:4px 0}
.fnd-step .btn-go{margin-top:20px}
.fnd-results{padding-top:8px}
.fnd-job{margin-top:32px}
.fnd-job-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:12px}
.fnd-job-head h3{font-size:var(--h3)}
.fnd-pick{display:grid;align-content:start;min-width:0}
/* "Uses your Xero" joined to the card's foot, not floating under it (the re-check's L2). */
.fnd-pick:has(>.fnd-uses) .card{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Every job's cards keep one width, a lone card too: site.css lets a lone card grow to 520 px, which here sat wider than the
   pairs in the groups around it. */
@media (min-width:961px){.fnd-results .grid3:has(>:only-child){grid-template-columns:repeat(3,1fr)}}
@media (min-width:601px) and (max-width:960px){.fnd-results .grid3:has(>:only-child){grid-template-columns:repeat(2,1fr)}}
.fnd-uses{display:flex;align-items:center;gap:6px;margin:0;padding:10px 16px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);background:var(--white);font-size:var(--fs-small);color:var(--navy)}
.fnd-also{margin-top:12px;font-size:var(--fs-small);color:var(--soft)}
.fnd-ideas,.fnd-ask-us{margin-top:48px}
.fnd-ideas h2,.fnd-ask-us h2{font-size:var(--h3)}
.fnd-ask-us .link-list{margin-top:12px}
.fnd-ask-us .tell-us-box{margin-top:16px;max-width:40em}
.fnd-save{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:40px}
.fnd-save p{display:flex;align-items:center;gap:6px}
.fnd-save form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.fnd-change{margin-top:40px;padding-top:16px;border-top:1px solid var(--line)}
.fnd-tell-list{display:grid;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.fnd-tell-list>li{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.fnd-tell .tell-us-box{margin-top:8px;max-width:40em}
.br-find{margin-top:24px;color:var(--soft)}
@media (max-width:760px){
  .fnd-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .fnd-art{max-width:340px;margin-top:16px}   /* a phone sees the drawn answer too (the re-check's L5), its first two lines */
  .fnd-lead-ask{display:none}
}
/* The compare hub (/compare; REMAINING 3.34, package 5): two pickers and one button under the heading, close to the closest real
   pair's two v2 cards (the review: no blank gap at 375), then the other pairs as small cards in the v2 card's look (white, 1 px line,
   the edge darkens on hover), each with the job they share and the two skills' own icons. The form is the site's one form style. */
.br-hero.br-hero-list.cmp-hero{padding-bottom:24px}
.br-hero-list.cmp-hero+.br-results{padding-top:16px}
.cmp-pick{display:grid;grid-template-columns:repeat(2,minmax(0,18rem)) auto;gap:16px 20px;align-items:end;margin-top:28px;max-width:52rem}
.cmp-pick .field select{min-height:48px}
.cmp-pick>p{margin:0}
.cmp-problem{grid-column:1/-1;color:var(--bad)}
.cmp-vs{color:var(--soft);font-weight:400}
.cmp-go{margin-top:20px}
.cmp-shown-head{margin-bottom:20px}
.cmp-shown-head .cmp-job{margin:4px 0 0}
/* The closest pair as a small table (the 30 Oct design sweep, group B round 2): the row names a third, the two skills a third each.
   A fixed table takes its widths from the first row, the header's. On a phone it is a card a row at body size (stack-cards, site.css). */
.cmp-mini-wrap{max-width:880px}
.cmp-mini{table-layout:fixed}
.cmp-mini thead th:first-child{width:34%}
.cmp-mini thead th a{color:var(--navy)}
.cmp-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:16px}
.cmp-card{display:grid;gap:10px;height:100%;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);color:var(--navy);text-decoration:none}
.cmp-card:hover{border-color:var(--field)}
.cmp-card:focus-visible{outline:var(--ring-line);outline-offset:2px;box-shadow:var(--ring)}
.cmp-job{font-size:var(--fs-small);color:var(--soft)}
.cmp-side{display:flex;align-items:center;gap:12px;min-width:0}
.cmp-side b{font-weight:500}
.cmp-ic{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px}
.cmp-ic svg{width:26px;height:26px}
.cmp-card .cmp-vs{padding-left:52px;font-size:var(--fs-small)}
@media (max-width:760px){
  .cmp-pick{grid-template-columns:minmax(0,1fr);margin-top:20px}
}