/* Company pages: /companies, /for-companies, /enterprise (its older parts; the v2 parts are enterprise.css), /for-teams.
   Loaded after site.css, in the head, only on its own routes (Operations/AreaStyles.cs), so pages that
   don't use these rules never download them. Same tokens as site.css; no inline styles (CSP). Rules here were moved
   from site.css by page usage: a rule belongs here only when every page that uses it loads this file. */
/* ---------- Companies (/companies, /companies/{slug}, /business/claim) ---------- */
.co-head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;padding-block:24px 8px}
.co-logo{width:96px;height:96px;border-radius:var(--r-lg);flex:none;display:grid;place-items:center;background:var(--ice);font-family:var(--display);font-weight:700;font-size:var(--h2);color:var(--navy);overflow:hidden}
/* The name and its badges share the logo's row however long the name; the description sits under the head (G2-04). */
.co-head>div{flex:1 1 0;min-width:0}
.co-desc{max-width:var(--measure)}
/* In the About card the description sat on its first fact (design-b3-9: a three-line description touched "Website"). */
.co-card .co-desc{margin-bottom:18px}
/* Section headings on a company page are a page's sections, not landing-page bands (G2-11, pattern K). */
.co-page section>h2{font-size:var(--h2)}
/* Calm batch G (#190; builder-g6, calm-g-companies): the hub's first screen in the v2 system. The answer first, who it is and
   whether your AI can use it, with the one action, beside the card of public facts on the ice tint (the mockups v2's field,
   --r-panel). A page's sections keep the v2 rhythm, and the claim closes the page as a band with Trilly's own scene. */
.co-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,4vw,72px);align-items:start;padding-block:8px 32px}
.co-hero.is-solo{grid-template-columns:minmax(0,1fr)}
.co-hero-copy{display:grid;gap:16px;justify-items:start;min-width:0;max-width:46rem}
.co-id{display:flex;gap:22px;align-items:center;min-width:0;max-width:100%}
.co-tagline{max-width:var(--measure)}
.co-marks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:var(--fs-small);color:var(--navy)}
.co-marks a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.co-claimed{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.co-unclaimed{color:var(--soft)}
.co-hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
/* Follow sits beside the hero's button, and its line beside them where there's room, under them where there isn't (a consent
   line, body size), so the skill cards start on a wide first screen. */
.co-hero-act .co-follow{display:contents}
.co-hero-act .co-follow-hint{flex:1 1 12rem}
/* A phone's first screen (the design sweep): Follow says itself; only the signed-out default hint goes, never the consent lines. */
@media (max-width:760px){.co-hero-act .co-follow-default{display:none}}
.co-card{display:grid;gap:18px;min-width:0;background:var(--ice);border-radius:var(--r-panel);padding:clamp(24px,3vw,40px)}
.co-card h2{font-size:var(--h3)}
/* On a phone the card is one folded line, "Facts about Xero" (its summary), so the heading above it would say the name twice (design-b3-9h:
   the first screen's words). The card still takes its name from the heading (aria-labelledby reads a hidden one). */
@media (max-width:900px){.co-card>h2{display:none}}
.co-card-note{font-size:var(--fs-small);color:var(--soft)}
.co-card .co-facts-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.co-card-note a{color:var(--navy)}
/* Not the "For developers" fold: its own padding reset (.dev-fold) stays (the companies code review, L1). */
.co-page>.section-tight:not(.dev-fold){padding-block:clamp(32px,4vw,56px)}
.co-more{margin-block:clamp(40px,5vw,72px) 0}
/* The claim, the page's closing band: the ask and its one button beside the scene, on the ice tint, so it never runs into the shared closing ask's
   cream box under it (the design-b3-9h review, H1: two cream bands read as one). */
.co-claim{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(56px,6vw,96px);background:var(--ice);border-radius:var(--r-panel);padding:clamp(28px,4vw,56px)}
.co-claim-copy{display:grid;gap:16px;justify-items:start;min-width:0}
.co-claim-copy p{max-width:44ch}
/* The heading's second half in the soft colour, the v2 two-tone (as .biz-tt and .sk-tt). */
.co-tt{display:block;color:var(--soft)}
.co-claim-scene{display:block;width:100%;height:auto}
@media (max-width:760px){
  .co-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:32px}
  .co-id{gap:16px}
  .co-claim{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .co-head{gap:14px}
  .co-logo{width:72px;height:72px;border-radius:20px;font-size:var(--h2)}
}
.co-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:24px 0 0;padding:0}
/* The site's one quiet card (the calm site, CALM-6): white with a 1px line, as .card and .panel; no tinted tiles. */
.co-facts div{border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;background:var(--white)}
.co-facts dt{font-size:var(--fs-small);color:var(--soft)}
.co-facts dd{margin:2px 0 0;font-weight:500;color:var(--navy);overflow-wrap:anywhere}
/* /enterprise: each identity provider's steps fold under its name (G2-25); addresses break only between words on wide screens. */
/* The provider's name is the fold's own words, not a heading inside <summary>, which some screen readers don't expose (review L15). */

.co-source{font-size:var(--fs-small);color:var(--soft);margin-top:32px;max-width:var(--measure)}
.co-source a{color:var(--navy)}
/* A company as a card (calm batch G v2: the one card, a 1 px line, --r-lg): its initials on a brand tint, then its words. */
.co-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:16px}
.co-list a{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;text-decoration:none;height:100%;background:var(--white);transition:border-color .15s}
.co-list a:hover{border-color:var(--navy)}
.co-list-ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy)}
.co-list-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.co-list b{font-family:var(--display);font-size:var(--fs-body);color:var(--navy);font-weight:700;overflow-wrap:anywhere}
.co-list-main>span{font-size:var(--fs-small);color:var(--soft)}
.co-list .badge{margin-top:6px;align-self:flex-start}
/* The directory's first screen: the heading, one line, the search, the count and the A to Z (calm batch G). */
.co-dir-hero{padding-block:16px 8px}
.co-dir-hero:has(.co-dir-scene),.co-dir-hero:has(.co-dir-pic){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:24px 56px;align-items:center}
.co-dir-hero:not(:has(.co-dir-scene,.co-dir-pic)){max-width:52rem}
.co-dir-copy{min-width:0;max-width:52rem}
.co-dir-scene{display:block;width:100%;height:auto}
/* On a phone the drawing sits under the search, so the first screen is the heading, the search and the picture, not the first cards' words
   (design-b3-9h: /companies 72 first-screen words, an industry's 52). It was hidden there, yet still downloaded. */
@media (max-width:900px){.co-dir-hero:has(.co-dir-scene),.co-dir-hero:has(.co-dir-pic){grid-template-columns:minmax(0,1fr)}.co-dir-scene{max-width:26rem;margin:8px auto 0}}
/* /companies' picture (design-sweep-d): a real company page's answer on the ice field, its question, its answer at the lead's size and its top
   skills as checked rows (the readiness card's rows). On a phone only the name and the answer, so the first screen keeps its word budget. */
.co-dir-pic{margin:0}
.co-dir-pic .co-chip{margin-bottom:12px}
.co-dir-pic-q{font-family:var(--display);font-weight:600;font-size:var(--h3);line-height:1.25;color:var(--navy)}
.co-dir-pic-a{margin-top:6px;font-size:var(--fs-lead);line-height:1.5;color:var(--navy)}
.co-dir-pic-skills{list-style:none;margin:14px 0 0;padding:0;display:grid}
.co-dir-pic-skills li{padding:9px 0;border-top:1px solid var(--line);color:var(--navy);font-size:var(--fs-small)}
@media (max-width:760px){
  .co-dir-pic{margin-top:20px;padding:16px;border-radius:var(--r)}
  .co-dir-pic .tc-pic-cap,.co-dir-pic-q,.co-dir-pic-skills{display:none}
  .co-dir-pic .tc-pic-card{padding:14px 16px}
  .co-dir-pic-a{margin-top:0;font-size:var(--fs-body)}
}
.co-dir-hero .lead{margin-top:16px;max-width:var(--measure)}
.co-dir-count{margin-top:16px;color:var(--soft)}
@media (max-width:760px){.co-dir-order,.co-src-note,.co-sec-lead{display:none}}
.co-sec-lead{margin-top:8px;color:var(--soft);max-width:var(--measure)}
/* The A to Z as one row of round pills; on a phone it scrolls sideways and holds its own labels (the 2,008 px lesson). */
.co-az{position:relative;margin-top:8px}
.co-dir-hero .phone-fold{margin-top:16px}
.co-az a{min-height:44px;min-width:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
/* Every pill one width on a wide screen too: the site's A to Z stretches its links to fill each row, so the second row's came out wider. */
@media (min-width:1100px){.co-az a{flex:0 0 auto;padding-inline:0}}
/* The industries on the four brand tints, as the Browse panel's area tiles. */
.co-industries{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.co-industries a{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:104px;border-radius:var(--r-lg);padding:20px 22px;text-decoration:none}
.co-industries b{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);overflow-wrap:anywhere}
.co-industries span{font-size:var(--fs-small);color:var(--navy)}
.co-industries a:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){
  .co-az{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px)}
  .co-az::-webkit-scrollbar{display:none}
  .co-az a{flex:none}
  .co-industries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-industries a{min-height:0;padding:14px 16px}
}
.readiness td:nth-child(2){white-space:nowrap}

/* ---------- The company page as a hub (G6, the site plan's 3f): Follow, tabs, the "Can my AI use" answer, the hub strip,
   the requests board and the "For developers" fold. Same tokens; no inline styles (CSP). Written to the layout batch's
   patterns (docs/plans/LAYOUT_FIXES_1.md): each part sets its own top margin instead of an mt-* it would beat (B), reading
   text at one width (C), grids that fit their count (D), long names wrap (F), buttons don't (I), headings use the sizes the
   site already has (K), and the fold's chevron is the FAQ's (P). ---------- */
.co-head-main{flex:1 1 320px;min-width:0}
/* A tab page's Follow on the company's name line (the live design review, companies item 6), not floating at the far right. */
.co-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.co-head-sm .co-follow-hint{display:none}
/* With no logo, the head's tile takes the company's tint, as every card and chip of it does (item 2). */
.co-logo.t-cream{background:var(--cream)}.co-logo.t-mint{background:var(--mint)}.co-logo.t-apricot{background:var(--apricot)}.co-logo.t-ice{background:var(--ice)}
.co-follow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:340px}
.co-follow .btn,.co-request-vote .btn{white-space:nowrap}
.co-follow-count{font-weight:600;color:var(--navy)}
.co-follow-hint{flex-basis:100%;font-size:var(--fs-body);color:var(--soft)}
.co-claimed svg{width:20px;height:20px;flex:none}
.co-head-sm{padding-block:16px 4px;align-items:center}
.co-head-sm .co-logo{width:64px;height:64px;border-radius:18px;font-size:var(--h3)}
.co-name{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.2;overflow-wrap:anywhere}
.co-name a{color:var(--navy);text-decoration:none}
.co-name a:hover{text-decoration:underline;text-underline-offset:3px}
/* The tabs as the skill family's (skill.css .sk-tabbar): 52 px links on one line, the current one's count on marigold. */
.co-tabs{margin-top:16px}
.co-tabs a{min-height:52px;white-space:nowrap}
.co-tabs .tab-count{margin-left:6px;font-size:var(--fs-small);font-weight:600;border-radius:999px;padding:1px 8px;background:var(--mist);color:var(--navy)}
.co-tabs a[aria-current="page"] .tab-count{background:var(--marigold)}
/* A hub page's own heading: the size member and sign-in pages use (no new size). */
.co-sub-head{min-width:0}
.co-sub-h1{font-size:var(--h1)}
.co-sub-head .lead{margin-top:8px;max-width:var(--measure,68ch)}
/* A company's tab pages as the skill's (skill.css .sk-tabpage, calm batch G): under the hub's head and tabs, the page's own heading at
   the h2 size, one line, then the list, or the skill tabs' one empty card (Pages/Skills/_TabEmpty, drawn the same here). */
.co-tabpage{padding-bottom:96px}
.co-tabpage .co-sub-h1{margin-top:32px;font-size:var(--h2);letter-spacing:-.025em}
.co-tabpage .sk-empty{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center;margin-top:24px;text-align:left}
.co-tabpage .sk-empty-art{display:block;width:120px;height:auto}
.co-tabpage .sk-empty-words p{margin:0}
.co-tabpage .sk-empty-words p+p{margin-top:4px}
.co-tabpage .sk-empty-t{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.25;color:var(--navy)}
@media (max-width:760px){
  /* A tab page's head on a phone: the name, its claim state (never hidden: the only word there on who runs the page; the companies
     code review, M1), Follow and the tabs; Follow's line is the overview's, as the skill's tabs leave the promise there. */
  .co-head-sm .co-follow-hint{display:none}
  .co-tabpage .co-sub-h1{margin-top:24px}
  .co-tabpage .sk-empty{grid-template-columns:minmax(0,1fr);gap:12px}
  .co-tabpage .sk-empty-art{width:96px}
}
/* Design sweep G (30 Oct), the company pages no group owned. The four tabs fit a 360 to 420 px phone on one line ("Overview" was cut
   off at 375). Questions: the skills to ask about as rows, two across on a wide screen. Report and Feedback start where the tab pages
   start (they were a narrower, centred column), the form 760 px wide, the crumb level with the tab pages' and the heading at their size;
   beside the form sit Feedback's drawing of what the company sees and Report's next steps. */
@media (max-width:420px){.co-tabs a{padding-inline:7px;font-size:var(--fs-small)}}
.co-ask-rows .row{padding-block:12px}
@media (min-width:901px){.co-ask-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-tabpage>section:last-child{padding-bottom:0}
.co-ask-first{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center}
.co-ask-first .art-empty{width:120px}
@media (max-width:760px){.co-ask-first{display:block}.co-ask-first .art-empty{display:none}}
.co-formpage.lifecycle-page{max-width:1160px;padding-top:0}
.co-formpage>*{max-width:760px}
.co-formpage>.co-fb{max-width:none}
.co-formpage .co-chip{margin-top:12px}
.co-formpage h1{font-size:var(--h2);letter-spacing:-.025em}
.co-note{background:var(--cream)}
.co-fb{display:grid;gap:32px 56px;align-items:start}
.co-fb-main{min-width:0;max-width:760px}
.co-fb-side{min-width:0}
.co-fb-example{margin:0;border:1px solid var(--line);border-radius:var(--r-lg,20px);padding:20px;background:var(--white);display:grid;gap:14px}
@media (min-width:901px){.co-fb{grid-template-columns:minmax(0,1fr) minmax(0,380px)}.co-fb-example{margin-top:8px}}
.co-fb-example figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--display);font-weight:600;color:var(--navy);line-height:1.3}
.co-fb-example h2{font-size:var(--fs-body);line-height:1.3}
.co-example-tag{display:inline-flex;align-items:center;font-family:var(--body);font-size:var(--fs-small);font-weight:500;line-height:1.2;color:var(--navy);background:var(--white);border-radius:999px;padding:5px 12px;box-shadow:0 0 0 1px color-mix(in oklab,var(--navy) 16%,var(--white));white-space:nowrap}
.co-fb-themes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.co-fb-themes li{display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:var(--mist)}
.co-fb-themes b{font-weight:600;color:var(--navy)}
.co-report-steps{counter-reset:co-step}
.co-report-steps li{counter-increment:co-step;position:relative;padding-left:48px}
.co-report-steps li::before{content:counter(co-step);position:absolute;left:14px;top:11px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--marigold);color:var(--navy);font-size:var(--fs-small);font-weight:600}
.co-report-steps .meta{font-size:var(--fs-body)}
.co-fb-example .note{margin:0}
/* Updates (round g2): one row a skill, two across on a wide screen, what changed in the maker's words under the name, its two links on a
   line of their own. Requests: the board's look beside the form while it's empty, both columns starting at the grid's top (it carries
   the section's padding), so the Example sits level with the form's heading; on a phone that heading goes (the h1 says it), read out still. */
@media (min-width:901px){.co-updates{grid-template-columns:repeat(2,minmax(0,1fr))}}
.co-updates>.row{align-items:flex-start}
.co-update-what{margin:0;color:var(--ink)}
.co-updates-more{margin-top:16px}
.co-updates-more>summary{font-weight:600;color:var(--navy);min-height:44px}
.co-update-links{display:flex;flex-wrap:wrap;gap:0 20px;font-size:var(--fs-small)}
.co-update-links a{display:inline-flex;align-items:center;min-height:24px;color:var(--navy)}
@media (max-width:760px),(pointer:coarse){.co-update-links a{min-height:44px}}
.co-ask-grid{display:grid;gap:32px 56px;align-items:start;padding-top:clamp(36px,5vw,64px)}
.co-ask-grid .co-ask{padding-block:0}
@media (min-width:901px){.co-ask-grid{grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
@media (max-width:900px){.co-ask-grid .co-ask>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
.co-req-example{margin:0;display:grid;gap:12px}
.co-req-example figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--display);font-weight:600;color:var(--navy)}
.co-req-example .co-request{background:var(--white)}
/* A filled board two across, as the tab's rows and Updates are; each title's first line level with its button (top-aligned, as a title
   or a maker's button can run a row to several lines). */
@media (min-width:901px){.co-tabpage .co-requests{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:601px){.co-request-main{padding-top:7px}.co-req-example .co-request-main{padding-top:4px}}
.co-example-vote{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-small);font-weight:500;color:var(--navy);white-space:nowrap}
/* Claiming a page (/business/claim/{slug} and its verify page, calm batch G): its boxes take the v2 card's corner. */
.co-claim-page .claim-box{border-radius:var(--r-lg);padding:28px}
/* Whose page an intent page is (calm batch G): the company's initials on its tint and its name, in place of the handwritten kicker. */
.co-chip{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-weight:600;color:var(--navy)}
.co-chip .co-list-ic{width:40px;height:40px;border-radius:12px}
.co-chip a{color:var(--navy);text-decoration:none}
.co-chip a:hover{text-decoration:underline;text-underline-offset:3px}
/* The answer in the hero, as plain text (the calm site, CALM-7: it was a cream box): the question at the h3 size, the answer at
   the lead's, under a 1 px line. */
.co-answer{max-width:var(--measure);border-top:1px solid var(--line);padding-top:20px}
.co-answer h2{font-size:var(--h3);margin-bottom:8px}
.co-answer p{font-size:var(--fs-lead);line-height:1.5;color:var(--navy)}
.co-answer a{color:var(--navy);font-weight:500}
/* About's main facts as a two-column list, one source line under it (CALM-7, V-10); the rest fold into "More facts". */
.co-facts-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;margin:0;max-width:820px}
.co-facts-list dt{font-size:var(--fs-small);font-weight:500;color:var(--soft)}
.co-facts-list dd{margin:2px 0 0;overflow-wrap:anywhere}
.co-facts-list a{color:var(--navy)}
/* A company page's guides (design-sweep-d): its AI pages as the one card (a 1 px line, --r-lg), then the jobs as a ruled list in columns, the
   first nine open and the rest folded (on a company with real facts it was 30 links in one column). */
.co-guides{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.co-guides a{display:flex;align-items:center;min-height:64px;height:100%;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 20px;font-weight:600;color:var(--navy);text-decoration:none;transition:border-color .15s}
.co-guides a:hover{border-color:var(--navy)}
.co-jobs-h{font-size:var(--fs-body);margin-top:clamp(28px,3vw,40px)}
.co-jobs{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0 32px}
.co-jobs li{border-top:1px solid var(--line)}
.co-jobs a{display:flex;align-items:center;min-height:48px;padding:8px 0;color:var(--navy);text-underline-offset:3px}
.co-jobs-more{margin-top:8px}
/* "More software companies": a plain list, never pills (CALM-7). */
.co-next{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px 24px}
.co-next a{color:var(--navy)}
@media (max-width:640px){
  .co-facts-list{grid-template-columns:minmax(0,1fr)}
}
.co-hub-strip{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.co-hub-strip li{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.co-hub-label{font-size:var(--fs-small);font-weight:600;color:var(--soft)}
.co-hub-title{font-family:var(--display);font-weight:700;font-size:var(--fs-body);color:var(--navy);overflow-wrap:anywhere}
a.co-hub-title{text-decoration:none}
a.co-hub-title:hover{text-decoration:underline;text-underline-offset:3px}
.co-hub-strip .meta a{color:var(--navy)}
.co-requests{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;max-width:820px}
.co-request{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.co-request:target{border-color:var(--marigold)}
.co-request-built{background:var(--mist)}
.co-request-vote{flex:none;min-width:150px}
.co-request-main{flex:1;min-width:0}
.co-request-title{font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.co-request-main .meta{margin-top:4px}
.co-request-main .meta a{color:var(--navy)}
.co-request-build{margin-top:8px}
.co-build-note{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--soft)}
.co-updates{margin-top:20px}
.co-ask{max-width:var(--measure,68ch)}
/* A margin of its own: its padding cancels section-tight's, so the next section touched it (the calm site, V-12). */
.dev-fold{border:1px solid var(--line);border-radius:var(--r-lg);padding:0 22px;margin-block:24px}
.dev-fold[open]{padding-bottom:18px}
.dev-fold>summary{flex-wrap:wrap;gap:4px 14px;min-height:52px;padding:12px 0}
/* Its chevron is the site's one fold sign, .disclose, at the far end (the console's live design review, 22 Oct). */
.dev-fold>summary::after{margin-left:auto}
.dev-fold-title{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy)}
.dev-fold-h{font-size:var(--h3);margin-top:18px}
/* An intent page's "What you need" past its must-read lines, folded (the lead's ruling, 22 Oct): a quieter fold at the body's size. */
.co-need{margin-block:12px 0}
.co-need .dev-fold-title{font-size:var(--fs-body)}
.co-need p{max-width:var(--measure)}
/* From 901 px a plan line's fold is open (.phone-fold, design-b3-9j): it drops its box, so its lines read on under "What you need". */
@media (min-width:901px){
  @supports selector(::details-content){
    .co-need.phone-fold{border:0;border-radius:0;padding:0;margin-top:8px}
    .co-need.phone-fold>summary{min-height:0;padding:0 0 4px}
  }
}
/* From 1024 px the skill steps under the connector steps are open too (design-sweep-d3, the d2 review's L6): a section under its heading, no box. */
@media (min-width:1024px){
  @supports selector(::details-content){
    .co-alt-steps:not([open])::details-content{content-visibility:visible}
    .co-alt-steps.dev-fold{border:0;border-radius:0;padding:0}
    .co-alt-steps.disclose>summary{min-height:0;padding:0;cursor:default;pointer-events:none}
    .co-alt-steps.disclose>summary::after{display:none}
  }
}

/* The facts table: a date in the source column never wraps on a wide screen (G2-07); on phones the value needs no label (G2-13). */
@media (min-width:641px){
  .co-facts-table td:last-child{white-space:nowrap}
}
@media (max-width:640px){
  .co-facts-table td:nth-child(2){padding-left:0!important}
  .co-facts-table td:nth-child(2)::before{display:none}
}
/* Phones: company cards closer together (G1-29). */
@media (max-width:600px){
  .co-follow{max-width:none}
  .co-request{flex-direction:column;gap:8px}
  .co-request-vote{min-width:0}
  .co-list{gap:8px}
  .co-list a{padding:14px 16px;gap:14px}
  .co-list-ic{width:40px;height:40px;border-radius:12px}
}
/* /requests (G12g) loads this sheet for the same request list; its "Who it's for" filter: */
.req-page{padding-bottom:clamp(40px,6vw,72px)}
/* The board's head (calm batch G, #190): the requests board's own drawing (scene 12) beside the words on a wide screen, and under
   them on a phone, small enough that the form or the first request is close (the board's scene proof). */
.req-art{max-width:30rem}
@media (max-width:760px){.req-art{max-width:18rem}}
.req-areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
/* On a phone the areas are one row that scrolls sideways (site.css's .scroll-row), so many areas never push the first request off
   the first screen (the G12 open items, G9). This file loads after site.css, so its own wrap would win without this. */
@media (max-width:760px){.req-areas{flex-wrap:nowrap}}
.req-area{display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:var(--fs-small);color:var(--navy);text-decoration:none}
.req-area:hover{border-color:var(--navy)}
.req-area.is-on{background:var(--navy);border-color:var(--navy);color:var(--white)}