/* The buyer pages, shown (calm batch G, #190): /enterprise, and the pages built on its parts. Its own area sheet (the
   calm-g-enterprise code review, L8: in companies.css it doubled the sheet every company page loads). Loaded after site.css, in
   the head, only on its own routes (Operations/AreaStyles.cs). Same tokens as site.css; no inline styles (CSP). Sizes by role,
   so the v2 scale arrives with calm-g-home's tokens (the lead's ruling, 21 Oct 00:25): a section heading --h2 (50 px wide once it
   merges), a price --h2, a picture's numbers and a card's name --h3; never a fixed size. */

/* ---------- /enterprise, shown (calm batch G, #190; the v2 mockups Eddie approved, #183) ----------
   The workspace's overview as the hero picture, then a band a role, each with the screen that proves its line, then the plans and
   the buyer's closing. Pictures are HTML at body size (the six sizes; never under 14 px), 1 px lines, one marigold glow behind the
   hero picture, one navy night band; they end on a whole line, and a phone crops them tighter (.biz-crop, .biz-crop-s). The same
   shapes as the product pictures (pictures.css, calm-g-skill); they can join it once both are merged. Motion: each band rises once
   as it comes into view, opacity and transform only, and none with reduced motion. */
/* overflow-x:clip: a hero picture's glow never makes a phone scroll sideways. */
.biz-hero{padding:24px 0 0;overflow-x:clip}
.biz-copy{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 64px;align-items:end}
.biz-hero h1{font-size:var(--h1-hero);font-weight:700;letter-spacing:-.02em}
.biz-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--soft);margin-bottom:16px}
.biz-eyebrow svg{width:22px;height:22px}
.biz-cta{display:grid;justify-items:start;gap:20px}
.biz-cta .lead{font-size:var(--h3);line-height:1.4}
.biz-reassure{color:var(--soft)}
.biz-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.biz-pic-h{font-family:var(--display);font-weight:600;font-size:var(--h3);line-height:1.2;color:var(--navy)}
/* A picture's tag and tags are pictures.css's (.pic-tag, .pic-tags); this pill says what waits ("Coming", "Opens with ...") */
.biz-pill{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:500;line-height:1.3;padding:5px 12px;border-radius:999px;color:var(--warn);background:var(--cream)}
.biz-panel{border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-width:0}
.biz-panel-h{font-weight:500;margin-bottom:8px}
.biz-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.biz-row:first-of-type{border-top:0}
.biz-row b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.biz-soft{color:var(--soft)}
.biz-block{display:block}
.biz-meter{display:block;height:6px;border-radius:3px;background:var(--line);margin-top:5px;overflow:hidden}
/* A figure never breaks over two lines in a picture (the design review, P1 8): .biz-row b above; a summary row wraps instead. */
.biz-meter i{display:block;height:100%;background:var(--navy);border-radius:3px}
.biz-w90{width:90%}
.biz-ok{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--good);margin-right:8px}
.biz-gap{margin-top:12px}
.biz-sum{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
.biz-sum b{white-space:normal}

/* The role chips under the hero: a jump to each role's band */
.biz-roles{padding:48px 0 0}
.biz-roles-h{color:var(--soft);margin-bottom:12px}
.biz-rn{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;position:relative}
.biz-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--navy);text-decoration:none}
.biz-chip svg{width:20px;height:20px}
.biz-chip:hover{border-color:var(--navy)}

/* A band a role: its want in one line, and the picture that proves it */
.biz-band{padding-block:clamp(64px,4rem + 4vw,128px) 0}
.biz-band h2,.biz-sec-h,.biz-faq h2{font-family:var(--display);font-size:var(--h2);font-weight:600;line-height:1.06;letter-spacing:-.02em}
.biz-sec-h{margin-bottom:40px}
.biz-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.biz-two.is-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.biz-two.is-rev>.biz-two-copy{order:2}
.biz-two-copy{display:grid;gap:18px;min-width:0}
/* /for/schools (calm batch G): the hero's field in even halves, the team count, a student's question and the skill's marked answer. */
.biz-two-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* /for-creators (#232): the chapters beside the film at the home console film's size (home.css .hn-cv-in: a 1360 px wrap, the film's
   column 1.52fr), so the film draws at about 900 px at 1440 and its words read at 12 px (the film-v2 review, M5); one column under
   1081 px, as every .biz-two */
.wrap.biz-wrap-film{max-width:1360px}
.biz-two-film{grid-template-columns:minmax(0,.48fr) minmax(0,1.52fr);gap:clamp(24px,3vw,40px)}
/* The team's rules drawn as the console's switches, on in navy and off in line grey (the design review, schools 1) */
.biz-big.biz-big-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}   /* beats .biz-big's grid, later in the sheet */
.biz-switch{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--line)}
.biz-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--white);box-shadow:0 1px 2px rgba(13,44,84,.2)}
.biz-switch.is-on{background:var(--navy)}
.biz-switch.is-on::after{left:19px}
.biz-mark{background:var(--cream);border-radius:4px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.biz-sch-uni{align-items:center}
.biz-tt{display:block;color:var(--soft)}
.biz-role{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-weight:500;color:var(--navy);background:var(--white);border:1px solid var(--line);padding:6px 14px 6px 8px;border-radius:999px}
.biz-role svg{width:22px;height:22px}
.biz-role.is-night{background:var(--navy-2);color:var(--white);border-color:var(--navy-2);margin-bottom:16px}
.biz-rule{display:flex;gap:10px;align-items:flex-start;color:var(--navy);max-width:var(--measure)}
.biz-rule svg{width:26px;height:26px;flex:none}
.pic-field.biz-two,.pic-field.biz-stack-sec{padding:56px}   /* a band's field: pictures.css's, with a band's room */
/* A film inside a hero's field (/for/schools): on a phone the card reaches into the field's padding and the mat goes, so the 4:5
   cut's smallest words stay 12 px from 360 px up (its first round: 299 px at 375 and 284 at 360 drew them at 11.6 and 11.0 px). */
@media (max-width:560px){.biz-hero .pic-field>.film-card{margin-inline:-14px;width:calc(100% + 28px);max-width:none;padding:4px}.biz-hero .pic-field>.film-card .film-mat{padding:0}}
/* The same for the wide cut from 1024 to 1119 px, where the field's padding left its smallest words under 12 px (10.9 at 1024; the
   schools-film review, M1): about 912 px of frame at 1024, 12.35 px. To 1119, not 1103: a classic scrollbar takes about 15 px, and
   the floor missed by 0.13 px from 1104 to 1117 (the r2 review). */
@media (min-width:1024px) and (max-width:1119px){.biz-hero .pic-field>.film-card{margin-inline:-28px;width:calc(100% + 56px);max-width:none}.biz-hero .pic-field>.film-card .film-mat{padding:0}}
/* Under 360 px the field and its card run to the screen's edges together, so the frame is the screen less 8 px and the 4:5 cut's
   smallest words stay 12 px down to 320 px (the schools-film-2 review, M1: a 272 px frame at 320 drew them at 10.6 px; now 312,
   12.1 px), and no sliver of field shows past the card (the enterprise-lows re-check, L5). 16 px is the page's gutter there. */
@media (max-width:359px){.biz-hero .pic-field:has(>.film-card){margin-inline:-16px;border-radius:0}.biz-hero .pic-field>.film-card{margin-inline:-18px;width:calc(100% + 36px);border-radius:0}}
.biz-t-cream{background:var(--cream)}
.biz-t-ice{background:var(--ice)}
.biz-t-mint{background:var(--mint)}
.biz-t-mist{background:var(--mist)}
.biz-frame{background:var(--white);border:1px solid var(--line);border-radius:28px;box-shadow:0 44px 80px -44px rgba(13,44,84,.34),0 2px 6px rgba(13,44,84,.07);padding:22px 24px;color:var(--navy);min-width:0}
.biz-crop,.biz-crop-s{min-width:0}

/* Executives: Trilly's own scene of the monthly email (set v2; it isn't live yet, so a drawing, not a screen) */
.biz-scene{display:block;width:100%;max-width:640px;height:auto;justify-self:center}
.biz-scene img{display:block;width:100%;height:auto}

/* Risk and compliance, on the night band */
.biz-night{background:var(--navy);color:var(--white);border-radius:40px;padding:64px}
.biz-night h2{color:var(--white)}
.biz-night a{color:var(--white)}
.biz-night-lead{margin-top:16px;max-width:var(--measure);color:var(--on-navy-soft)}
/* The IT band's four lines, in two columns from 900 px now the band has no picture (the enterprise-film r2 review, M3). */
.biz-it-rules{display:grid;gap:18px 48px}
@media (min-width:900px){.biz-it-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The receipt bar right under the lead, now the band's pictures are the film's: the band's spacing, and no wider than its words need
   (the enterprise-film r2 review, M1: it sat 5 px under the lead, the band's full width). */
.biz-night-lead+.biz-receipt{margin-top:28px;max-width:34rem}
/* The evidence, folded on a phone (the enterprise-film-3 review, M1): its name the summary, a chevron that turns; wide screens show
   the dated line and where it runs in the open, so the fold is a phone's only */
.biz-phone-fold{display:none}
.biz-fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:44px}
.biz-fold summary::-webkit-details-marker{display:none}
.biz-fold summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(45deg) translateY(-3px);transition:transform .15s}
.biz-fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.biz-fold b{color:var(--white);font-weight:500}
.biz-fold>p{margin-top:12px;color:var(--on-navy-soft)}
/* The IT band: the fold under the add line it is about */
.biz-it-rules .faq{margin-top:18px}
.biz-night .biz-tt{color:var(--marigold)}
.biz-sec-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:40px;align-items:start}
.biz-night .biz-frame{box-shadow:none;border-color:var(--navy)}
.biz-facts{display:grid;gap:10px;margin-top:10px}
.biz-facts-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px}
.biz-fact{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--mist)}
.biz-fact svg{width:26px;height:26px}
.biz-fact b{font-weight:500;display:block}
.biz-fact span{color:var(--soft)}
.biz-fact span b{color:var(--navy)}
.biz-real-note{margin-top:12px;color:var(--soft)}
.biz-receipt{display:grid;grid-template-columns:40px minmax(0,1fr) 22px;gap:14px;align-items:center;padding:20px 22px;border-radius:28px;background:var(--navy-2);text-decoration:none}
.biz-receipt>svg:first-child{width:40px;height:40px;background:var(--white);border-radius:12px;padding:6px}
.biz-receipt b{display:block;font-weight:500}
.biz-receipt span span{display:block;color:var(--on-navy-soft);margin-top:2px}
.biz-receipt>svg:last-child{width:22px;height:22px;color:var(--marigold)}
.biz-proof{margin-top:28px;max-width:var(--measure);color:var(--on-navy-soft)}
.biz-honest{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;color:var(--on-navy-soft)}
.biz-honest li{display:flex;gap:12px;align-items:flex-start}
.biz-honest svg{width:40px;height:40px;flex:none;background:var(--white);border-radius:12px;padding:6px}
.biz-honest b{color:var(--white);font-weight:500;display:block}
.biz-night-links{margin-top:24px;color:var(--on-navy-soft)}

/* Heads of department: outcomes, in words (the console film draws the report) */
.biz-stack-sec{display:grid;gap:32px}
.biz-heads-copy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:start}

/* Your people, and software companies */
.biz-only-you{display:flex;gap:8px;align-items:center;margin-top:12px;color:var(--good);font-weight:500}
.biz-only-you svg{width:20px;height:20px}
.biz-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.biz-hbar{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 2.4rem;gap:10px;align-items:center;padding:6px 0}
.biz-hbar i{display:block;height:10px;border-radius:5px;background:var(--navy)}
.biz-hbar b{font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.biz-hb-a{width:100%}
.biz-hb-b{width:58%}
.biz-hb-c{width:37%}

/* The plans, and the buyer's closing */
.biz-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:20px}
.biz-plan{border-radius:40px;padding:40px;display:flex;flex-direction:column;gap:14px}
/* Each plan ends on its one quiet step, at the card's foot (the design review, P2 12). */
.biz-plan-go{margin-top:auto;padding-top:6px}
.biz-plan h3{font-size:var(--h3);font-weight:600}
.biz-price{color:var(--soft)}
.biz-price b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);color:var(--navy);margin-right:6px;white-space:nowrap}
.biz-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.biz-plan li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px}
.biz-plan li svg{width:20px;height:20px;color:var(--good);margin-top:3px}
.biz-plans-edu{margin-top:16px;color:var(--soft);max-width:var(--measure)}
.biz-whole{white-space:nowrap}   /* "60-day" never breaks at its hyphen */
/* The workspace ladder's four steps on the Teams card (#222's review, design 1): two to a row, each person pays their own step. */
.biz-ladder{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:0;padding:0;list-style:none;font-size:var(--fs-small)}
.biz-ladder li{display:flex;justify-content:space-between;gap:8px;color:var(--soft);white-space:nowrap}   /* "500–1,999" never wraps */
.biz-ladder b{color:var(--navy);font-weight:600}
.biz-plans-more{margin-top:24px;color:var(--soft);max-width:var(--measure)}
#plans .biz-plans{margin-top:24px}
.biz-closing{padding:clamp(64px,4rem + 4vw,128px) 0 clamp(48px,3rem + 3vw,96px)}
.biz-closing-box{display:grid;justify-items:center;text-align:center;gap:20px;background:var(--ice);border-radius:40px;padding:56px 32px 64px}
.biz-closing-box>svg{width:64px;height:64px;background:var(--white);border-radius:18px;padding:12px}
.biz-closing-box h2{font-size:var(--h2);font-weight:600;max-width:14em}
.biz-closing-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* Motion: each band's picture rises once as it comes into view (scroll-driven, so no script), never with reduced motion */
@keyframes biz-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .biz-band .biz-frame,.biz-band .biz-scene,.biz-band .biz-plan{animation:biz-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
  /* The hero's picture rises once as the page opens (the design review, P2 13; schools 7 and pricing 10). */
  .biz-hero .biz-frame,.biz-hero .biz-zero-box{animation:biz-rise .6s ease-out both}
}
/* Wide screens: the questions beside their heading, so the column never leaves half the width empty (the design review, P2 12). */
@media (min-width:1081px){
  .biz-faq .section-tight{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:0 64px;align-items:start}
}

@media (max-width:1080px){
  .biz-copy,.biz-two,.biz-two.is-rev,.biz-sec-grid,.biz-heads-copy{grid-template-columns:minmax(0,1fr)}
  .biz-two.is-rev>.biz-two-copy{order:0}
  .biz-film-first>.film-card{order:-1}   /* /for-creators (#232): the film, then its chapters, as the home's console film on a phone */
  .biz-honest{grid-template-columns:minmax(0,1fr)}
}
/* /pricing (calm batch G): the one proof number on the first screen (main's .display-number, centred in the hero's field), the
   ways' lighter cards, a maker's figure, four maker plans to a row, a wider gap */
.biz-zero-box{display:grid;justify-items:center;align-content:center;text-align:center;gap:10px;border-radius:40px;padding:48px 44px;min-height:18rem}
.biz-hbar-l{grid-template-columns:minmax(0,12rem) minmax(0,1fr) 2.6rem}   /* a longer label: the studio's steps, what customers try to do */
.biz-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
/* /pricing's block by buyer (AUD-9): four answers, each one line and where to read on */
.biz-buyers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.biz-buyer{display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-radius:24px;padding:22px 20px;min-width:0}
.biz-buyer p{margin:0}
.biz-buyer-h{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.2}
.biz-buyer-h svg{width:28px;height:28px;flex:none}
.biz-buyer>a,.biz-buyer-links{margin-top:auto}
.biz-buyer-links{display:flex;flex-wrap:wrap;gap:4px 16px}
@media (max-width:1080px){.biz-buyers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.biz-buyers{grid-template-columns:minmax(0,1fr)}}
.biz-way{display:flex;flex-direction:column;gap:10px;border-radius:28px;padding:28px 24px}
.biz-way h3{font-size:var(--h3);font-weight:600}
/* A way's live example as the skill's card prints its price row, on a small white surface (real, so no "Example" tag) */
.biz-pp-for{margin-top:auto}
.biz-pp{display:grid;gap:2px;background:var(--white);border-radius:16px;padding:12px 14px;box-shadow:0 1px 2px rgba(13,44,84,.08);color:var(--navy);text-decoration:none}
.biz-pp:hover{box-shadow:0 0 0 1px var(--navy)}
.biz-pp b{font-weight:500}
.biz-pp-price b{font-weight:600}
.biz-hb-25{width:25%}
.biz-hb-19{width:19%}
.biz-hb-12{width:12%}
/* The Teams card's seat calculator */
.biz-seats{display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:var(--white)}
.biz-seats label{font-weight:500}
.biz-seats input{width:100%;min-height:24px;accent-color:var(--navy)}
.biz-seats-out{color:var(--soft)}
.biz-seats-out b{color:var(--navy);font-weight:600}
.biz-big{display:grid;gap:4px}
.biz-big b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;color:var(--navy)}
.biz-big span{color:var(--soft)}
.biz-plans-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.biz-plans-4 .biz-plan{padding:32px 24px}   /* four to a row: room for "Needed to sell paid skills" on one line */
.biz-gap-l{margin-top:32px}
@media (max-width:760px){
  .biz-facts-3{grid-template-columns:minmax(0,1fr)}
  .biz-zero-box{border-radius:28px;padding:20px 0 4px;min-height:0}
  .biz-hbar-l{grid-template-columns:minmax(0,1fr) 2.6rem;row-gap:6px}
  .biz-hbar-l i{grid-row:2;grid-column:1 / -1}
  .biz-ways{grid-template-columns:none}
  .biz-hero{padding-top:8px}
  .biz-eyebrow{display:none}
  .biz-crop,.biz-crop-s{display:none!important}
  .biz-phone-fold{display:block;margin-top:28px}
  .biz-fold>.biz-proof{margin-top:12px}
  .biz-roles-h{display:none}
  .biz-rn{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding:2px clamp(16px,4vw,32px)}
  .pic-field.biz-two,.pic-field.biz-stack-sec{padding:28px 18px}
  .biz-night{padding:36px 18px;border-radius:28px}
  .biz-frame{padding:18px 16px}
  .biz-ins{grid-template-columns:minmax(0,1fr)}
  .biz-plan{padding:28px 22px;border-radius:28px}
  .biz-night-links{display:none}
  .biz-closing-box{border-radius:28px;padding:40px 20px 48px}
  /* Phones, nearer v2's length (the design review, enterprise 2): tighter bands */
  .biz-band{padding-top:56px}
  /* A buyer page's or a door's hero fills a phone's first screen (its copy, its picture, then room), so the first band starts on the
     second: one idea a screen, and the pre-check's 45 words (the next band's heading had come into view) */
  .biz-hero-fill{min-height:calc(100vh - 6.75rem);min-height:calc(100svh - 6.75rem)}   /* the header and crumbs above it */
}

/* ---------- The doors (calm batch G wave 1: /for-companies, /for-creators, /how-it-works) ----------
   The for.html mockup's door: the role's want, one step and Trilly's own scene at the top (scenes 09, 05 and 01, where the scene set
   puts them), then a band an idea with the product picture that proves it, the questions and the close. The buyer pages' parts; these
   few are the doors' own. A scene's words are drawn shapes, so a phone gets the same scene without them (-phone.svg): at 375 px they
   would fall under 12 px (the scene rules). */
.biz-door{padding:16px 0 0}
.biz-door-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 56px;align-items:center}
.biz-door-copy{display:grid;justify-items:start;gap:20px;min-width:0}
.biz-door-copy .biz-eyebrow{margin-bottom:-4px}
.biz-door .lead{font-size:var(--h3);line-height:1.4;max-width:28rem}
.biz-door-scene,.biz-door-scene img{display:block;width:100%;height:auto}
.biz-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:500}
.biz-badge svg{width:20px;height:20px;flex:none}
.biz-badge.is-wait{color:var(--soft);font-weight:400}
/* Numbered steps: a marigold number, the step in a few words, then one line */
.biz-steps{list-style:none;margin:0;padding:0;counter-reset:biz-step;display:grid;max-width:var(--measure)}
.biz-steps>li{counter-increment:biz-step;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.biz-steps>li:first-child{border-top:0;padding-top:0}
.biz-steps>li::before{content:counter(biz-step);grid-row:1 / span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--marigold);color:var(--navy);font-weight:600;line-height:1}
.biz-steps b{font-weight:500}
.biz-steps span{color:var(--soft)}
/* A loop of four cards, joined by a line (the feedback loop) */
.biz-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative}
.biz-chain>li{position:relative;display:grid;gap:6px;align-content:start;background:var(--white);color:var(--navy);border:1px solid var(--line);border-radius:22px;padding:18px 18px 20px;min-width:0}
.biz-chain>li+li::before{content:"";position:absolute;left:-17px;top:50%;width:16px;height:2px;background:var(--marigold)}
.biz-chain>li>span{color:var(--soft)}
.biz-chain b{font-weight:500}
.biz-chain .is-done{background:var(--mint);border-color:var(--mint)}
.biz-chain-tag{justify-self:start;margin-bottom:16px}
/* /how-it-works: the shared "In your AI" steps (_InYourAi) at the band's width, in v2's weights */
.biz-band .iya{max-width:none}
.biz-band .iya-word,.biz-band .iya-steps>li::before{font-weight:600}
/* A band's own small heading (/for-creators' "Show buyers each step") in v2's weight, and the abilities one to a row beside their picture */
.biz-band h3{font-weight:600}
.biz-two-copy .ability-list{grid-template-columns:minmax(0,1fr)}
@media (prefers-reduced-motion:no-preference){
  .biz-door-scene{animation:biz-rise .6s ease-out both}
  @supports (animation-timeline:view()){
    .biz-band .biz-chain>li,.biz-band .pic{animation:biz-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media (max-width:1080px){
  .biz-door-two{grid-template-columns:minmax(0,1fr)}
  .biz-chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .biz-chain>li+li::before{display:none}
}
@media (max-width:760px){
  .biz-door .lead{font-size:var(--fs-body)}
  .biz-door-copy{gap:16px}
  .biz-chain{grid-template-columns:minmax(0,1fr);gap:12px}
  .biz-chain>li{padding:14px 16px 16px;border-radius:18px}
  .biz-chain>li+li::before{display:block;left:28px;top:-13px;width:2px;height:12px}
}
/* Phones: shelves keep each card its own height (no blank band under a short card), and two picture rows stack their value under
   the label so the name reads on one line (design r2, pricing 4 and enterprise 4); a role pill stays on one line at 360 (schools 1) */
@media (max-width:600px){
  .biz-plans.swipe,.biz-ways.swipe{align-items:start}
}
@media (max-width:480px){
  .biz-row.biz-row-stack{grid-template-columns:minmax(0,1fr);gap:2px}
  .biz-row.biz-row-stack b{justify-self:start;white-space:normal}
}
@media (max-width:400px){
  .biz-role{padding:6px 12px 6px 6px;gap:6px;font-size:var(--fs-small)}
}
@media (forced-colors:active){
  .biz-frame,.biz-fact,.biz-plan,.biz-night,.biz-chain>li{border:1px solid CanvasText}
}

/* /for-companies, For your own staff (#235, the lead's A1; r2 and r3, the for-companies-film reviews): the home's console layout
   (home.css .hn-cv-in, .hn-cv-copy) in the page's own wrap, so the section's edges are the page's at every width (r3 item 2: the
   home's 1124 cap put it 18 px in from 1160 to 1399). Below 1400 one column: the heading, the film, its chapters, then the lines
   under it (.fc-staff-more), three across from 1024 px (r3 item 6: stacked, they left the right half empty). From 1400 the kicker,
   heading and lead run across the row, the heading in the home's 16ch so it reads in three lines (r3 item 3: beside the film it broke
   into five), and the chapters sit beside the film; the row reaches right, by up to 216 px and 56 px short of the window's edge (a
   full gutter beside a scrollbar, r3 item 1), so the film's frame is 898 px (card and mat 8 px each), the size the home draws it, its
   words never smaller. The lines under it keep the page's width: only the film reaches right. */
.fc-staff-more{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fc-staff-pt{display:flex;gap:14px;align-items:flex-start;line-height:1.45;margin:0;max-width:34rem}
.fc-staff-pt svg{width:30px;height:30px;flex:none}
.fc-staff-pt b{font-weight:500;color:var(--navy)}
/* The heading breaks between its sentences, never inside "It's on your team's list" where the line has room (the r3 review): each
   sentence is an inline block, in a measure wide enough for the longest one. */
.fc-h{display:inline-block}
.fc-staff-in .hn-cv-copy h2{max-width:24ch}
/* 561 to 1023 px: the film's 536 px card from the copy's left edge, never centred under left-aligned words (as /enterprise's hero) */
@media (min-width:561px) and (max-width:1023px){.hn-cv-in.fc-staff-in>.film-card{margin-inline:0}}
@media (min-width:1024px){
  .fc-staff-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 40px;margin-top:16px}
  .fc-staff-more>.hm-fine,.fc-staff-more>.hm-acts{grid-column:1/-1}
}
@media (min-width:1400px){
  .hn-cv-in.fc-staff-in{grid-template-columns:minmax(0,1fr) 930px;gap:14px 24px;margin-right:max(calc(604px - 50vw),-216px)}
  .fc-staff-in>.hn-cv-copy{display:contents}
  .fc-staff-in>.hn-cv-copy>:not(.film-ch){grid-column:1/-1;justify-self:start}   /* the kicker, heading and lead across the row */
  .fc-staff-in .hn-cv-copy h2{max-width:none}   /* two lines across the row, not three in a column with the right half empty (r3) */
  .fc-staff-in>.hn-cv-copy>.film-ch{grid-column:1;margin:18px 0 0}
  .hn-cv-in.fc-staff-in>.film-card{grid-column:2;margin-top:18px}
  .hn-cv-in.fc-staff-in .film-card,.hn-cv-in.fc-staff-in .film-mat{padding:8px}   /* over home.css's .hn-cv-in .film-mat */
  .fc-staff-more{grid-column:1/-1;margin-right:min(calc(50vw - 604px),216px)}   /* back in the page's width: only the film reaches right */
}
@media (max-width:1399px){
  .fc-staff-more{order:2}
}
/* /how-it-works (#232): the How film across the band above the steps, as wide as the home's widest film slot or more, so its words read
   at the size builder-film made them for (the film-v2 review, M5) */
/* From the heading's left edge, so the band has one left edge, and the steps under it at a readable line (the r1 review, L3) */
.biz-film-wide{max-width:960px;margin:0 0 48px}
.biz-film-wide+.biz-two-copy{max-width:70ch}
/* On a phone the card reaches 8 px into each gutter, as /enterprise's hero does, so the 4:5 cut's smallest words stay 12 px at 360
   (its rebased round: a 304 px frame at 360 drew them at 11.8 px). */
@media (max-width:560px){.biz-film-wide>.film-card{margin-inline:-8px;width:calc(100% + 16px);max-width:none}}
/* 561 to 1023 px: the 536 px card from the copy's left edge, never centred under left-aligned words, as /enterprise's hero (the
   how-it-works-film review, 28 Oct: x 116 against x 32 at 768). */
@media (min-width:561px) and (max-width:1023px){.biz-film-wide>.film-card{margin-inline:0}}
/* Under 360 px edge to edge with no mat, as /enterprise's hero, so its smallest words stay 12 px down to 320 px (the schools-film-2
   review, M1: a 280 px frame at 320 drew them at 10.9 px; now 312, 12.1 px). */
@media (max-width:359px){.biz-film-wide>.film-card{margin-inline:-16px;width:calc(100% + 32px);padding:4px;border-radius:0}.biz-film-wide>.film-card .film-mat{padding:0}}
/* /enterprise (#232): the console film in the hero, where the overview picture was */
.biz-hero .film-card{margin-top:clamp(24px,4vw,48px)}
/* 561 to 1023 px: the film's 536 px card from the copy's left edge, never centred under left-aligned words (the enterprise-film review, L2) */
@media (min-width:561px) and (max-width:1023px){.biz-hero .film-card{margin-inline:0}}
/* 1024 to 1059 px: the card 12 px into each gutter, so the wide cut's smallest words (its Example chip, 25.9 px of the 1920 frame) hold
   12 px with a classic scrollbar too (the crop and size audit, 28 Oct: an 888 px frame at 1024 drew them at 11.98 px) */
@media (min-width:1024px) and (max-width:1059px){.biz-hero .film-card{margin-inline:-12px;width:calc(100% + 24px);max-width:none}}
/* A phone: the card 8 px into each gutter, as the home's, so the 4:5 cut's smallest words hold 12 px at 360 (L1) */
@media (max-width:560px){.biz-hero .film-card{margin-inline:-8px;width:calc(100% + 16px);max-width:none}}
/* Under 360 px the card runs edge to edge and the mat goes, so the frame is the screen less 8 px and the 4:5 cut's smallest words stay
   12 px down to 320 px (the enterprise-film r2 review, L4: 10.9 px at 320). /enterprise's own hero only (.wrap>.film-card): /for/schools'
   hero film sits in a pic-field, which runs edge to edge with it by its own rule, above (the enterprise-lows re-check, L5). */
@media (max-width:359px){.biz-hero>.wrap>.film-card{margin-inline:-16px;width:calc(100% + 32px);padding:4px;border-radius:0}.biz-hero>.wrap>.film-card .film-mat{padding:0}}