/* Premium homepage (2 Nov 2026). The homepage's own last sheet, after premium-shell.css, which holds what every
   page shares. Built to the premium-design skill: one accent, flat grounds that change at every chapter (how it
   works, quality control and pricing keep the owner's gradients), far larger type, one focal point a section. */
/* Hero: catalog H08, a dark split with figures. The team stands on the hero's bottom edge. */
.hero { padding: 0; background: var(--night); color: var(--on-night); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 50fr) minmax(0, 50fr); gap: 24px; align-items: end; }
.hero__copy { padding: clamp(56px, 5.5vw, 80px) 0; align-self: center; }
.hero .eyebrow { color: var(--accent-on-dark); }
.hero h1 { color: var(--white); font-size: clamp(38px, 3.9vw, 56px); line-height: 1.08; letter-spacing: -.02em; font-weight: 500; max-width: 13em; margin-bottom: 28px; }
.hero__sub { color: var(--on-night); font-size: 19px; line-height: 1.55; max-width: 54ch; margin-bottom: 36px; }
.hero__actions { gap: 12px; margin-bottom: 0; }
.hero__actions .btn { padding: 0 28px; }
.hero .btn--primary { background: var(--accent-on-dark); color: var(--night); }
.hero .btn--primary:hover { background: var(--accent-on-dark-hover); color: var(--night); }
.hero .btn--secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,.34); }
.hero .btn--secondary:hover { border-color: var(--white); }
.hero :focus-visible { outline-color: var(--white); }
.hero__bar { position: relative; border-top: 1px solid var(--on-night-line); background: var(--night); }
.hero__bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 28px; padding-bottom: 28px; }
.hero__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 0; }
.hero__stat { padding: 0 32px; border-left: 1px solid var(--on-night-line); }
.hero__stat:first-child { padding-left: 0; border-left: 0; }
.hero__stat dd { margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.hero__stat dt { font-size: 14px; color: var(--on-night); }
.hero__note { max-width: 54ch; margin: 0 0 0 auto; padding: 0; border: 0; font-size: 15px; line-height: 1.6; color: var(--on-night); }
.hero__note strong { display: block; color: var(--white); font-weight: 600; }
.hero__figure { position: relative; align-self: end; display: flex; justify-content: center; }
.hero__figure::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 120%; aspect-ratio: 1; transform: translate(-50%, 28%); border-radius: 50%; background: radial-gradient(closest-side, rgba(79,196,186,.2), transparent); }
.hero__figure picture { display: contents; }
.hero__figure img { position: relative; flex: none; width: 142%; max-width: none; height: auto; margin: 0 -26% 0 -16%; }

/* Marquee: the near-black strip under the hero, in one quiet tone. */
.marquee-band { padding: 26px 0; background: var(--night-strip); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; text-align: left; }
.marquee-band > .container { margin: 0; padding-right: 0; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); max-width: none; }
.marquee-band__label { margin: 0; font-size: 13px; letter-spacing: .14em; color: var(--accent-on-dark); white-space: nowrap; }
.marquee { border: 0; }
.marquee__item { font-size: 18px; font-weight: 400; color: var(--on-night); }
.marquee__item::before { width: 5px; height: 5px; background: var(--on-night-line); }

/* Services */
#services { background: var(--white); }
.howto { gap: 56px; align-items: stretch; }
.acc__item { margin-bottom: 4px; border-radius: 0; border-bottom: 1px solid var(--border); }
.acc__head { font-family: var(--font-display); font-size: 22px; padding: 24px 8px; letter-spacing: -.01em; }
.acc__head svg.acc__ico { color: var(--accent-text); }
.acc__item.is-open { background: var(--night); border-radius: var(--r-md); box-shadow: none; padding: 8px 12px; border-color: transparent; }
.acc__item.is-open .acc__head svg.acc__ico { color: var(--accent-on-dark); }
.acc__body p { font-size: 16px; line-height: 1.6; color: var(--on-night); max-width: 54ch; }
.acc__body p + p { color: var(--on-night); }
.stage { background: var(--page); border: 0; border-radius: var(--r-lg); min-height: 0; padding: clamp(24px, 4vw, 56px); }
.person-card { box-shadow: 0 30px 60px -30px rgba(12,28,44,.35); }
.person-card__tag { color: var(--accent-text); }
.person-card__foot strong { text-align: right; }

/* Getting started: large numbered steps on the owner's mint-to-sky gradient, which stays in refinement.css with
   its eyebrow colour and its white-edged cards. On that tint only the darker --accent-on-wash clears 4.5:1. */
#people .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
/* The globe moved here from the hero (owner, 2 Nov 2026). Its aspect ratio and chip rules are unchanged. */
#people .globe { width: 100%; max-width: 620px; margin: 0 auto; }
/* The intro plays when the globe comes into view: main.js holds the chips hidden with globe--waiting until then. */
.intro-pending .globe .chip, .globe--waiting .chip { opacity: 0; }
#people .globe__core { z-index: 3; will-change: scale; }
#people .chip { will-change: transform, translate, scale, opacity; }
.how-workaid h2 { margin-bottom: 44px; }
.how-workaid__steps { counter-reset: step; margin-bottom: 40px; }
.how-workaid__steps li { counter-increment: step; display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid rgba(23,50,77,.16); }
.how-workaid__steps li:last-child { padding-bottom: 22px; }
.how-workaid__steps li::before, #people .how-workaid__steps li::before { content: counter(step, decimal-leading-zero); position: static; width: auto; height: auto; grid-row: span 2; background: none; box-shadow: none; border-radius: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--accent-on-wash); }
.how-workaid__steps li:last-child::before { background: none; }
.how-workaid__steps li:not(:last-child)::after, #people .how-workaid__steps li:not(:last-child)::after { display: none; }
.how-workaid__steps h3 { grid-column: 2; font-size: 24px; margin-bottom: 6px; }
.how-workaid__steps p, #people .how-workaid__steps p { grid-column: 2; font-size: 17px; line-height: 1.55; max-width: 54ch; color: var(--charcoal); }

/* Client portal: a light ground, so the dark film stands out and the gradient below it starts a new chapter. */
#portal { padding-top: var(--section-space); background: var(--white); }
#portal .section-head { max-width: 860px; }

/* The team behind them: words on the left, one real person on the right. The gradient and its text colours
   stay in refinement.css; #quality.section--gradient below only sizes what this layout makes larger. */
#quality .split { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: 72px; align-items: start; }
#quality h2 { max-width: none; font-size: clamp(36px, 3.6vw, 52px); }
#quality .lede { margin-bottom: 8px; }
/* The reviewer's column with its list runs longer than the words, so the words travel down beside it. */
#quality .split__text { position: sticky; top: 112px; }
.qc-points { margin-top: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.qc-point { display: block; padding: 24px 0 28px; }
.qc-point__icon { display: none; }
.qc-point h3 { font-size: 22px; margin-bottom: 8px; line-height: 1.2; }
.qc-point p { font-size: 16px; line-height: 1.6; color: var(--charcoal); max-width: 54ch; }
.price-card__cols li, .price-line small { max-width: 54ch; }
.quality-col { background: var(--page); border: 0; border-radius: var(--r-lg); padding: 0; overflow: hidden; position: sticky; top: 112px; }
.quality-col > .reviewer { background: transparent; border-radius: 0; padding: 0 28px 28px; gap: 18px; }
.reviewer__head { display: block; margin: 0 -28px; }
.reviewer__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.reviewer__head > div { padding: 24px 28px 0; }
.reviewer__tag { color: var(--accent-text); font-size: 12px; }
.reviewer__name { font-size: 30px; }
.reviewer__role { font-size: 15px; color: var(--charcoal); }
.reviewer__line { font-size: 16px; line-height: 1.6; color: var(--charcoal); }
#quality.section--gradient .reviewer__photo { box-shadow: none; }
#quality.section--gradient .reviewer__name { font-size: 30px; }
#quality.section--gradient .qc-point p { font-size: 16px; }

/* The numbers: the page's one big figure, in the accent, on a light ground between the two gradients. */
#value { background: var(--page); }
#value .split { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 72px; }
#value h2 { font-size: clamp(36px, 3.6vw, 52px); }
#value .lede { margin-top: 28px; }
.donut-card { border-radius: var(--r-lg); box-shadow: 0 30px 60px -36px rgba(12,28,44,.3); padding: 40px; }
.costs__total--ours { background: var(--teal-soft); }
.costs__total--ours span, .costs__total--ours strong { color: var(--accent-text); }

/* Pricing: the gradient and glass card stay in refinement.css, with a very large price. */
#pricing .pricing__grid { margin-top: 0; }
#pricing .price-card--main .price-card__head { padding: 44px; }
.price-card__head h3 { font-size: 26px; line-height: 1.2; }
.price-card__head .muted { max-width: 42ch; }
.price__amount { font-size: clamp(64px, 7vw, 96px); font-weight: 500; letter-spacing: -.02em; }
.price { flex-wrap: wrap; }
.price__unit { flex: 0 0 100%; }
#pricing .pricing-terms { padding: 44px; }
#pricing .pricing-inclusions { padding: 0 44px 32px; }
.pricing-explained__action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; text-align: left; }
#pricing.section--gradient .pricing-explained__action p { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.25; letter-spacing: -.015em; color: var(--white); max-width: 26em; text-wrap: balance; }
#pricing .commitments { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 32px; margin-top: 56px; }
#pricing .commitment { grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
#pricing .commitment svg { width: 20px; height: 20px; }
#pricing .commitment strong { line-height: 1.45; }

/* Questions: words and look as the owner had them (2 Nov 2026). These rules only undo what this sheet changes
   for the whole page, so the section keeps the sizes and colours the earlier sheets give it. */
.faq { --section-space: clamp(64px, 7vw, 96px); background: #FAFBFC; }
.faq .eyebrow { font-size: 12px; letter-spacing: .12em; color: var(--teal); margin-bottom: 18px; }
.faq__head h2 { line-height: 1.16; letter-spacing: -.02em; }

/* Latest articles */
.latest { background: var(--page); }

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
  .hero__bar-inner { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero__note { margin-left: 0; }
  .hero__stat { padding: 0 20px; }
  #people .split, #quality .split, #value .split { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .quality-col { position: static; max-width: 460px; }
  #pricing .commitments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: re-composed, in the order heading, picture, body, action. */
@media (max-width: 768px) {
  .hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .hero h1 { order: 1; font-size: 38px; margin: 40px 0 24px; }
  .hero__figure { order: 2; margin: 0 -16px; }
  .hero__figure img { width: 100%; margin: 0; }
  .hero__figure::before { width: 100%; }
  .hero__sub { order: 3; font-size: 18px; margin: 28px 0 24px; }
  .hero__actions { order: 4; margin: 0 0 32px; }
  .hero__actions .btn { width: 100%; }
  .hero__bar { border-top: 0; }
  .hero__bar-inner { padding-top: 0; padding-bottom: 36px; }
  .hero__stats { grid-template-columns: minmax(0, 1fr); }
  .hero__stat, .hero__stat:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-left: 0; border-top: 1px solid var(--on-night-line); }
  .hero__stat dd { order: 2; margin: 0; font-size: 28px; white-space: nowrap; }
  .hero__stat dt { min-width: 0; }
  .marquee-band { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 22px 0; }
  .marquee-band > .container { padding-right: var(--gutter); }
  .marquee-band__label { white-space: normal; }
  .acc__head { font-size: 19px; padding: 20px 4px; }
  .acc__body p { padding-left: 4px; padding-right: 4px; font-size: 16px; }
  .acc__more { margin-left: 4px; }
  .stage { padding: 16px; }
  .how-workaid__steps li { grid-template-columns: 44px minmax(0, 1fr); }
  .how-workaid__steps h3 { font-size: 21px; }
  .how-workaid .btn { width: 100%; }
  .qc-points { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .donut-card { padding: 24px 20px; }
  #pricing .price-card--main .price-card__head, #pricing .pricing-terms { padding: 28px 22px; }
  #pricing .pricing-inclusions { padding: 0 22px 20px; }
  .pricing-explained__action .btn { width: 100%; }
  #pricing.section--gradient .pricing-explained__action p { font-size: 22px; }
  #pricing .commitments { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Unslop pass (7 Nov 2026, user request): space instead of a rule on every row, no caps labels. */
.qc-point { border-top: 0; }
.checklist .checkrow { border-bottom: 0; padding-top: 8px; padding-bottom: 8px; }
.person-card__tag { text-transform: none; letter-spacing: 0; font-size: 12px; }
.marquee-band__label { text-transform: none; letter-spacing: 0; font-size: 15px; }