/*
  CareBella homepage: the page's own CSS, after the kit (public/assets, never edited).
  What lives here: the brand's type over the dealt tokens, the hero's handoff composition (the seam, the tilted schedule
  and phone, the dotted path), the product mocks (.cb-*), --p-h per card group, the app-frame recipe, the close's wordmark.
*/

/* ---------------------------------------------------------------- brand */
:root {
  /* the faces (the owner's direction C): Instrument Serif for the headings and the figures, Geist for text. The lockup keeps its
     own faces, drawn as outlines (src/app/(site)/_home/name.tsx), so neither Nunito nor Fraunces loads here */
  --font-display: var(--font-serif), "Instrument Serif", Georgia, serif;
  /* Geist by its own face name: next/font's variable still lists its "Geist Fallback" alias (adjustFontFallback: false is not
     honoured for it in this Next), and naming the face alone keeps that alias from ever loading */
  --font-text: "Geist", system-ui, sans-serif;
  --font-figure: var(--font-serif), "Instrument Serif", Georgia, serif;
  --display-weight: 400;
  --display-tracking: -0.012em;
  --display-tracking-xl: -0.022em;
  /* brand tints the printed block does not carry */
  --cb-green: #2f5d50;
  --cb-green-deep: #21443a;
  --cb-tint: #e6eeea;
  --cb-line: #e4e2dd;
  --cb-dot: #7fa397;
  --cb-cream-hi: #fff7ee;
  /* paper: a fine grain over the cream grounds (inline noise, about 5%), so the light has a material; no file, nothing to load */
  --cb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .10 0 0 0 0 .12 0 0 0 0 .11 0 0 .2 0 -.055'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* the grain is a layer of its own under the page (never a background of what holds the words, so every word's ground is the
   flat colour it reads on); the green bands and the hero cover it with theirs */
html { background: var(--p-bg); }
body { position: relative; background: none; }
body::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cb-grain); pointer-events: none; }
/* the lit ground (the deal's sage) in the brand's own tints: pale green toward cream, never the kit's blue-grey */
html[data-ground] { --ground-bg: #e6eeea; --ground-surface: #faf8f5; --ground-accent: #cfe0d6; --ground-ink: #16181d; --ground-muted: #5d6270; }
::selection { background: color-mix(in oklab, var(--cb-green) 22%, transparent); }

/* the lockup: the Cradle and the name (outlines in the brand's faces), centred on each other */
.cb-lockup { display: inline-flex; align-items: center; gap: 0.5em; color: var(--cb-green); line-height: 1; }
.nav__logo .cb-lockup__mark, .cb-lockup__mark { height: 1.62em; width: auto; flex: none; }
.cb-name { display: block; flex: none; height: calc(var(--nh) * 1em); width: auto; overflow: visible; }
.nav__logo { font-size: 22px; }
@media (max-width: 639px) { .nav__logo { font-size: 20px; } }

/* headings: Instrument Serif, large and tight; h3s (questions, step titles) a step down in the same face */
h1, h2, h3 { font-weight: 400; font-synthesis: none; }
h2, .t-h2 { font-size: clamp(40px, 2.4vw + 22px, 60px); line-height: 1.02; letter-spacing: -0.014em; }
h2 em, h1 em { font-style: italic; letter-spacing: -0.005em; }
.section-head h2, .cb-split h2 { max-width: 16ch; }

/* ---------------------------------------------------------------- the hero: Torrance Beach at sunset
   The photograph fills the stage under the cream nav. The horizon is the seam; the headline stands very large on the sky, the
   Who's coming panel small and far on the left near the horizon, the phone close on the right rising out of the screen's foot,
   the shift card in flight across the sky between them. The sentence and the two actions stand on the sea, which darkens into
   the brand's deep green at the foot. The light over the photograph (.cb-light) is the photograph's own dusk and the deep green. */
.hero--handoff {
  --cb-foot: calc(var(--btn-h) + 4px);
  --cb-dot: #ffe7c8;
  overflow: clip; background: var(--cb-green-deep);
  /* the words on the photograph: cream white; the primary inverted (cream, the deep green its ink), as on a brand band */
  --ink: var(--cb-cream-hi); --muted: rgb(255 247 238 / .88); --line-strong: rgb(255 247 238 / .55);
  --action: var(--p-bg); --action-ink: var(--cb-green-deep);
  color: var(--ink);
}
.hero--handoff > .sc__stage { background: var(--cb-green-deep); }
.hero--handoff > .sc__stage > picture.cb-photo { position: absolute; inset: var(--nav) 0 0 0; z-index: 0; overflow: hidden; }
.hero--handoff > .sc__stage > picture.cb-photo > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0%; }
.hero--handoff > .sc__stage > .cb-light {
  position: absolute; inset: var(--nav) 0 0 0; z-index: 0; pointer-events: none;
  background:
    /* the dusk over the top of the sky, deepest at the top left where the headline starts */
    radial-gradient(70% 60% at 0% 0%, rgb(18 22 30 / .42), rgb(18 22 30 / 0) 72%),
    radial-gradient(60% 34% at 48% 26%, rgb(18 22 30 / .3), rgb(18 22 30 / 0) 80%),
    linear-gradient(180deg, rgb(18 22 30 / .72) 0%, rgb(18 22 30 / .6) 18%, rgb(18 22 30 / .4) 34%, rgb(18 22 30 / .12) 44%, rgb(18 22 30 / 0) 52%),
    /* the sea into the deep green */
    linear-gradient(180deg, rgb(33 68 58 / 0) 60%, rgb(33 68 58 / .5) 69%, rgb(33 68 58 / .86) 82%, #21443a 97%);
}
.cb-handoff { position: relative; }
.hero--handoff h1 { color: var(--ink); font-weight: 400; letter-spacing: -0.022em; text-wrap: balance; }
.hero--handoff h1 em { letter-spacing: -0.01em; }
.cb-handoff .hero__lead { color: var(--ink); }
.cb-handoff__acts { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-6); row-gap: var(--s-2); }
.cb-handoff__go > .btn { box-shadow: 0 10px 24px -10px rgb(0 0 0 / .45); }
.hero--handoff .cb-handoff__go > .btn--primary:hover { background: #ffffff; }
.hero--handoff .btn--secondary { color: var(--ink); text-decoration-color: rgb(255 247 238 / .55); }
.hero--handoff .btn--secondary:focus-visible, .hero--handoff .btn--primary:focus-visible { outline-color: var(--ink); }

/* the schedule panel (WhosComing, compact): white, its own soft weight */
.cb-sched {
  --ui-font: var(--font-text);
  position: relative; z-index: 2; background: #ffffff; color: var(--p-ink); border-radius: 18px;
  padding: 16px 16px 12px; font: 400 13px/1.45 var(--font-text);
  box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 2px 4px rgb(8 14 20 / .10), 0 18px 30px -18px rgb(8 14 20 / .55);
}
.cb-sched__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 4px 12px; border-bottom: 1px solid var(--cb-line); }
.cb-sched__title { font: 600 16px/22px var(--font-text); letter-spacing: -0.01em; }
.cb-sched__sub { font-size: 12px; line-height: 18px; color: var(--p-muted); }
.cb-sched__rows { display: grid; }
.cb-sched__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 60px; padding: 0 4px; }
.cb-sched__row + .cb-sched__row { border-top: 1px solid var(--cb-line); }
.cb-sched__when { font: 600 14px/20px var(--font-text); white-space: nowrap; }
.cb-sched__who { font-size: 13px; line-height: 18px; color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-sched__text { min-width: 0; }
/* Monday's empty slot: where the card waits on the schedule */
.cb-sched__slot { width: 120px; height: 40px; border-radius: 10px; border: 1.5px dashed color-mix(in oklab, var(--cb-green) 55%, transparent); background: color-mix(in oklab, var(--cb-green) 4%, transparent); }

/* avatars and chips, in the app's words and tints */
.cb-av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cb-tint); color: var(--cb-green); flex: none; }
.cb-av svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-av--open { background: none; border: 1.5px dashed #c9c7c1; color: #8a8d96; font: 400 18px/1 var(--font-text); }
.cb-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 8px; font: 500 12px/1 var(--font-text); white-space: nowrap; }
.cb-chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cb-chip--coming { background: rgb(22 24 29 / .045); color: var(--p-ink); }
.cb-role { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: color-mix(in oklab, var(--cb-green) 10%, #ffffff); color: var(--cb-green); font: 500 12px/1 var(--font-text); }
.cb-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 2px; font: 500 12px/1 var(--font-text); color: var(--cb-green); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--cb-green) 40%, transparent); }

/* "Example": one small chip inside each mock's own chrome */
.cb-example { display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 999px; background: rgb(22 24 29 / .05); box-shadow: inset 0 0 0 1px rgb(22 24 29 / .08); color: #5d6270; font: 500 11px/1 var(--font-text); letter-spacing: 0.01em; }

/* the worker's shift card (ShiftCard) */
.cb-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #ffffff; color: var(--p-ink); font-family: var(--font-text);
  box-shadow: 0 0 0 1px rgb(22 24 29 / .05), 0 1px 2px rgb(22 24 29 / .06), 0 10px 24px -10px rgb(22 24 29 / .22); }
.cb-card__head { padding: 14px 16px 13px; background: var(--cb-green); color: #ffffff; }
.cb-card__place { font: 500 12px/18px var(--font-text); color: rgb(255 255 255 / .86); }
.cb-card__when { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cb-card__name { margin-top: 4px; font: 600 19px/1.22 var(--font-text); letter-spacing: -0.012em; }
.cb-card__yours { margin-top: 6px; font: 500 12px/16px var(--font-text); }
.cb-card__body { display: grid; align-content: start; gap: 12px; padding: 14px 16px 16px; }
.cb-card__day { font: 600 17px/24px var(--font-text); letter-spacing: -0.01em; }
.cb-card__hours { font-size: 15px; line-height: 22px; }
.cb-card__pay { font: 600 16px/22px var(--font-text); color: var(--cb-green); font-variant-numeric: tabular-nums; }
.cb-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* in the hero the card catches the sunset: a warm line along its top edge and the low sun on its green head */
.hero--handoff .cb-card { position: relative; box-shadow: 0 0 0 1px rgb(22 24 29 / .05), 0 4px 10px rgb(10 14 20 / .14), 0 30px 50px -24px rgb(10 14 20 / .55); }
.hero--handoff .cb-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 2; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgb(255 200 140 / .35), #ffcf94 28%, #fff3e0 60%, #ffc98c 85%, rgb(255 190 130 / .4)); }
.hero--handoff .cb-card__head { background-image: linear-gradient(180deg, rgb(255 186 120 / .24), rgb(255 186 120 / 0) 50%); }

/* the phone: a quiet bezel, the cream app screen in it */
.cb-phone { position: relative; z-index: 2; font-family: var(--font-text); color: var(--p-ink); }
.cb-phone::before { content: ""; position: absolute; inset: 0; border-radius: 44px; background: #15171b; box-shadow: inset 0 0 0 1.5px #2b2e35, 0 30px 60px -20px rgb(10 20 16 / .55), 0 60px 120px -40px rgb(10 20 16 / .5); }
.cb-phone__screen { position: absolute; inset: 9px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; border-radius: 36px; background: #f6f4ef; padding: 44px 14px 18px; }
.cb-phone__screen::before { content: ""; position: absolute; top: 12px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 999px; background: #15171b; }
.cb-screen__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.cb-screen__title { font: 600 17px/24px var(--font-text); letter-spacing: -0.012em; }
.cb-deck { position: relative; }
/* the card fits its words; the phone closes up under its two buttons */
.cb-phone .cb-deck { flex: none; }
.cb-phone .cb-phone__screen { position: relative; inset: auto; margin: 9px; }
.cb-deck__acts { display: flex; gap: 8px; }
.cb-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 999px; font: 500 14px/1 var(--font-text); white-space: nowrap; cursor: pointer; border: 1px solid transparent; }
.cb-btn--pass { flex: 1; background: #ffffff; border-color: var(--cb-line); color: var(--p-ink); box-shadow: 0 1px 2px rgb(22 24 29 / .06); }
.cb-btn--take { flex: 1.4; background: var(--cb-green); color: #ffffff; font-weight: 600; box-shadow: 0 6px 14px -6px rgb(33 68 58 / .7); }
button.cb-btn { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
button.cb-btn--take:hover { background: var(--cb-green-deep); }
button.cb-btn:active { transform: translateY(1px) scale(.985); }

/* the board's two other states (the scene shows them): the shift taken (ShiftClaimed, the app's words) and the shift passed */
.cb-board__yours { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 20px 16px; text-align: center;
  border-radius: 18px; background: #ffffff; box-shadow: 0 0 0 1px rgb(22 24 29 / .05), 0 1px 2px rgb(22 24 29 / .06), 0 10px 24px -10px rgb(22 24 29 / .22); outline: none; }
.cb-yours__mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: var(--cb-green); color: #ffffff; }
.cb-yours__mark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cb-yours__title { font: 600 22px/28px var(--font-text); letter-spacing: -0.015em; }
.cb-yours__when { margin-top: 6px; font: 600 15px/22px var(--font-text); }
.cb-yours__where { font-size: 13px; line-height: 19px; color: var(--p-muted); text-wrap: balance; }
.cb-board__empty { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 20px 16px; text-align: center; font: 500 15px/22px var(--font-text); color: var(--p-ink); }
.cb-undo { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--cb-green); font: 600 15px/1 var(--font-text); cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--cb-green) 45%, transparent); }
.cb-undo:hover { text-decoration-color: currentColor; }
.cb-undo:active { transform: scale(.985); }
.cb-undo:focus-visible, .cb-btn:focus-visible { outline: 2px solid var(--cb-green); outline-offset: 2px; }

/* the dotted path at rest: from Monday's slot on the far panel, up over the sky, down to the phone's edge at the deck */
.cb-handoff__path { display: none; overflow: visible; pointer-events: none; }
.cb-handoff__path path { fill: none; stroke: var(--cb-dot); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 9; vector-effect: non-scaling-stroke; }

/* ---- 1024 and up: laid out in the hero's own box (container units) */
@media (min-width: 1024px) {
  .cb-handoff {
    container-type: size; height: 100%;
    perspective: 1600px; perspective-origin: 50% 42%;
    --pw: 420px;                                         /* the schedule panel's width (its distance draws it at 0.8) */
    --sh: 268px;                                         /* its height: head and three rows */
    --ptop: 42cqh;                                       /* its top, on the horizon */
    --pwid: clamp(300px, 29cqw, 380px);                  /* the phone's width */
    --phtop: 37cqh;                                      /* the phone's top; it runs past the screen's foot */
    /* the dotted path's two ends at rest: Monday's slot on the far panel, and the phone's edge level with its card */
    --sx: calc(var(--pw) * .76);
    --sy: calc(var(--ptop) + 96px);
    --dx: calc(100cqw - var(--pwid) + 6px);
    --dy: calc(var(--phtop) + 150px);
  }
  .cb-handoff__copy { display: contents; }
  .cb-handoff h1 { position: absolute; left: -0.04em; top: 0; z-index: 3; width: 100%; max-width: 8.6em; margin: 0;
    font-size: clamp(76px, 9.4cqw, 132px); line-height: .94; }
  .cb-handoff .hero__lead { position: absolute; left: 0; bottom: calc(var(--btn-h) + var(--s-6)); z-index: 3; width: min(560px, 44cqw); margin: 0;
    font-size: 19px; line-height: 1.55; }
  .cb-handoff__acts { position: absolute; left: 0; bottom: 0; z-index: 3; }
  /* far away near the horizon: the panel stands back in depth and turns toward the phone */
  .cb-sched { position: absolute; left: 12px; top: var(--ptop); width: var(--pw); height: var(--sh);
    transform: translateZ(-400px) rotateY(13deg) rotateX(4deg); transform-origin: 0 0; }
  /* close: the phone on the right, square to the page, rising out of the screen's foot */
  .cb-phone--hero { position: absolute; right: 0; top: var(--phtop); width: var(--pwid); }
  .cb-phone--hero::before { border-radius: 58px; box-shadow: inset 0 0 0 1.5px #2b2e35, inset 1.5px 0 0 rgb(255 210 160 / .32), inset -1px 1px 0 rgb(255 220 180 / .22), -40px 40px 70px -30px rgb(4 10 10 / .7); }
  .cb-phone--hero .cb-phone__screen { min-height: 820px; margin: 12px; border-radius: 47px; padding: 58px 20px 18px; gap: 16px; }
  .cb-phone--hero .cb-phone__screen::before { top: 16px; width: 104px; height: 30px; margin-left: -52px; }
  .cb-phone--hero .cb-screen__title { font-size: 21px; line-height: 28px; }
  /* the next shift in the deck, under the buttons, running past the screen's foot as in the comp */
  .cb-deck__after { flex: none; margin-top: 6px; transition: opacity 240ms var(--ease, ease); }
  .cb-board.is-passed ~ .cb-deck__after { opacity: 0; }
  .cb-handoff__path {
    display: block; position: absolute; z-index: 3;
    left: var(--sx); top: var(--dy); width: calc(var(--dx) - var(--sx)); height: calc(var(--sy) - var(--dy));
  }
  /* a short screen (1024x768, 1280x800): the schedule keeps two rows and the headline a step smaller, so the words never meet it */
  @media (max-height: 860px) {
    .cb-handoff { --sh: 208px; --ptop: 35cqh; }
    .cb-sched__row--third { display: none; }
    .cb-handoff h1 { font-size: clamp(68px, 8.2cqw, 112px); }
    .cb-handoff .hero__lead { font-size: 18px; width: min(540px, 50cqw); }
  }
}

/* ---- under 1024: the photograph crops to the sky and the horizon, a band behind the headline (the headline on the sky, the
   horizon and a strip of sea at its foot going into the deep green); the sentence, the actions, the schedule and the phone stand
   on the deep green. The headline keeps a set number of lines, so the band's height follows its size */
@media (max-width: 1023px) {
  /* the band: the sky behind the two lines of the headline, the horizon about 50px under them, then the sea darkening into the
     green, where the sentence starts (--cb-sea is the band below the headline) */
  .hero--handoff { --h1fs: clamp(48px, 7.4vw + 12px, 76px); --h1lh: .96; --cb-sea: 96px; --cb-band: calc(var(--hgap) + 2 * var(--h1lh) * var(--h1fs) + var(--cb-sea)); }
  .hero--handoff > .sc__stage > :is(picture.cb-photo, .cb-light) { bottom: auto; height: var(--cb-band); }
  .hero--handoff > .sc__stage > picture.cb-photo > img { object-position: 50% 87%; }
  .hero--handoff > .sc__stage > .cb-light {
    background:
      linear-gradient(180deg, rgb(18 22 30 / .6) 0, rgb(18 22 30 / .4) 40%, rgb(18 22 30 / .2) 62%, rgb(18 22 30 / 0) 74%),
      linear-gradient(180deg, rgb(33 68 58 / 0) 76%, rgb(33 68 58 / .62) 86%, rgb(33 68 58 / .9) 94%, #21443a 100%);
  }
  .cb-handoff {
    display: grid; height: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "copy copy copy" "acts acts acts" "sched sched phone";
    column-gap: var(--s-5);
  }
  .cb-handoff__copy { grid-area: copy; }
  .cb-handoff h1 { font-size: var(--h1fs); line-height: var(--h1lh); max-width: 8.6em; }
  .cb-handoff .hero__lead { margin-top: calc(var(--cb-sea) - 16px); max-width: 40ch; }
  .cb-handoff__acts { grid-area: acts; margin-top: var(--s-6); }
  .cb-handoff { perspective: 1800px; perspective-origin: 50% 60%; }
  .cb-sched { grid-area: sched; align-self: center; margin-top: var(--s-7); transform: rotateX(6deg) rotateY(5deg); transform-origin: 50% 100%; }
  .cb-sched__slot { width: 72px; }
  .cb-sched__row { height: auto; min-height: 60px; padding-block: 8px; }
  .cb-sched__when { white-space: normal; }
  .cb-phone--hero { grid-area: phone; width: clamp(250px, 36vw, 290px); height: auto; align-self: center; margin-top: var(--s-7); }
}

/* the card's role and pay share a row under 1024 */
@media (max-width: 1023px) {
  .cb-deck__after { display: none; }
  .cb-phone--hero .cb-card__meta { flex-flow: row wrap; align-items: center; gap: 6px 12px; }
}

/* ---- under 640: the headline on the sky, the sentence and the actions on the sea; on the green, Monday's row as one strip,
   then the phone screen with the card */
@media (max-width: 639px) {
  main > .hero--handoff { min-height: 100lvh; }
  .hero--handoff > .sc__stage > .wrap { min-height: 0; }
  .cb-handoff {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "copy" "acts" "sched" "phone";
    column-gap: 0;
  }
  /* two lines at every phone width: the headline sized to the column ("picked from your phone" is 8 of its ems wide) */
  .hero--handoff { --h1fs: clamp(32px, calc((100vw - 2 * var(--gut)) / 8.2), 60px); --h1lh: 1; }
  .cb-handoff h1 { max-width: 8.4em; }
  .cb-handoff .hero__lead { margin-top: var(--s-4); font-size: 17px; line-height: 1.5; }
  /* a phone: the tall crop under the whole stage, the sky behind the words and the actions, the horizon under them, the
     schedule's strip and the phone on the water going into the green; the dusk over the sky is the photograph's own */
  .hero--handoff > .sc__stage > :is(picture.cb-photo, .cb-light) { bottom: 0; height: auto; }
  .hero--handoff > .sc__stage > picture.cb-photo > img { height: 100%; object-position: 50% 100%; }
  .hero--handoff > .sc__stage > .cb-light {
    background:
      linear-gradient(180deg, rgb(18 22 30 / .62) 0, rgb(18 22 30 / .62) 368px, rgb(18 22 30 / .4) 400px, rgb(18 22 30 / 0) 432px),
      linear-gradient(180deg, rgb(33 68 58 / 0) 450px, rgb(33 68 58 / .5) 520px, rgb(33 68 58 / .82) 640px, #21443a 780px);
  }
  .cb-handoff__acts { margin-top: var(--s-5); display: grid; justify-items: stretch; }
  .cb-handoff__go > .btn { width: 100%; }
  .cb-handoff__secondary { justify-self: center; }
  .cb-sched { margin-top: var(--s-6); padding: 0 12px; border-radius: 14px; transform: none; }
  .cb-sched__head, .cb-sched__rows > li:not([data-handoff-row="mon"]) { display: none; }
  .cb-sched__row { height: 56px; }
  .cb-sched__slot { width: 64px; }
  .cb-phone--hero { width: auto; height: auto; min-height: 0; margin-top: var(--s-2); align-self: start; transform: none; }
  .cb-phone--hero::before { display: none; }
  .cb-phone--hero .cb-phone__screen { margin: 0; border-radius: 18px; padding: 10px; gap: 10px; }
  .cb-phone--hero .cb-phone__screen::before { display: none; }
  /* the card in its phone form: the role and the pay share a row */
  .cb-phone--hero .cb-card__head { padding: 12px 14px 11px; }
  .cb-phone--hero .cb-card__name { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cb-phone--hero .cb-card__body { gap: 10px; padding: 12px 14px 14px; }
  .cb-phone--hero .cb-card__meta { flex-flow: row wrap; align-items: center; gap: 6px 12px; }
  .cb-phone--hero .cb-screen__head { display: none; }
}

/* ---------------------------------------------------------------- shared section pieces */
main .link { font-size: var(--t-body); }
.cb-split { display: flex; flex-direction: column; gap: var(--s-5); }
.cb-split > h2 { margin-bottom: 0; }
.cb-facts { display: grid; gap: var(--s-3); }
.cb-facts li { position: relative; padding-left: 28px; font-size: var(--t-body); line-height: 1.55; text-wrap: pretty; }
.cb-facts li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--cb-tint);
  -webkit-mask: none; box-shadow: inset 0 0 0 5.5px var(--cb-tint), inset 0 0 0 9px var(--cb-green); }

/* a phone rising out of a frame's foot, cut by it under the fade */
.stage > .cb-rise { left: 50%; top: 50%; translate: -50% -50%; width: 320px; max-width: calc(100% - 48px); }
/* the next card's edge behind the top one, as SwipeDeck stacks them (8px up, a little narrower) */
.cb-deck--two { padding-top: 8px; }
.cb-deck--two > .cb-deck__card { position: relative; z-index: 2; }
.cb-deck__next { position: absolute; z-index: 1; top: 0; left: 4%; right: 4%; height: 48px; border-radius: 18px 18px 0 0; background: color-mix(in oklab, var(--cb-green) 78%, #ffffff); }

/* a small UI card on a panel */
.cb-ui { font: 400 13px/20px var(--font-text); color: var(--p-ink); background: #ffffff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 1px 2px rgb(22 24 29 / .06), 0 12px 28px -10px rgb(22 24 29 / .26), 0 32px 64px -28px rgb(22 24 29 / .22); }
.cb-ui__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.cb-ui__title { font: 600 15px/20px var(--font-text); letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- 2. shifts: the split's frame runs to the screen's foot */
/* the hero's foot is the deep green of the water; Shifts takes it over as a mist rising off it into the cream, across its top
   padding (the heading starts below it), so the two never meet at a hard edge */
#shifts { position: relative; }
#shifts::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 0; height: calc(var(--padt) * 1.5); pointer-events: none;
  background: linear-gradient(180deg, #21443a 0%, rgb(33 68 58 / .74) 14%, rgb(33 68 58 / .42) 34%, rgb(33 68 58 / .16) 58%, rgb(33 68 58 / .04) 80%, rgb(33 68 58 / 0) 100%); }
/* its ground is the walkway down to Torrance Beach (the page's second place), the phone standing on the path's foot */
.cb-pathframe { padding: 0; border: 0; background: #c9c3b6; }
.cb-pathframe > picture.frame__img { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cb-pathframe > picture.frame__img > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; }
#shifts .cb-pathframe .stage > .cb-rise { top: auto; bottom: clamp(24px, 5%, 48px); translate: -50% 0; }
#shifts .cb-pathframe .cb-phone::before { box-shadow: inset 0 0 0 1.5px #2b2e35, 0 26px 44px -18px rgb(14 22 18 / .6), 0 60px 110px -40px rgb(14 22 18 / .55); }
/* a phone: the frame straight under the words, tall enough for the whole phone with the path above it */
@media (max-width: 639px) {
  #shifts .frame { margin-top: var(--s-6); --ratio: 148%; }
  #shifts .cb-pathframe .stage > .cb-rise { width: 286px; bottom: 20px; }
}
@media (min-width: 1024px) {
  #shifts > .wrap { grid-template-rows: minmax(0, 1fr); }
  #shifts .frame { height: 100%; }
  #shifts .frame::before { display: none; }
}

/* ---------------------------------------------------------------- 3. pay */
#pay .wrap { justify-content: flex-start; }
.cb-statement { font-size: clamp(56px, 8.4vw + 15px, 140px); line-height: 0.94; letter-spacing: -0.022em; max-width: 12ch; }
.cb-pay { margin-top: var(--s-10); }
.cb-pay__lines { display: grid; gap: var(--s-4); align-content: start; }
.cb-figline { display: grid; gap: var(--s-2); font-size: var(--t-lead); line-height: 1.45; }
.cb-figrow { display: block; }
.cb-fig { font-family: var(--font-figure); font-style: italic; font-weight: 400; font-size: clamp(36px, .57vw + 33.8px, 42px); line-height: 1; letter-spacing: -0.01em; color: var(--cb-green); margin-right: 0.12em; font-variant-numeric: lining-nums; }
@media (max-width: 639px) {
  .cb-statement { font-size: 20vw; max-width: 7ch; }
  .cb-pay { margin-top: var(--s-7); row-gap: var(--s-6); }
  .cb-pay__lines { gap: var(--s-5); }
}

/* ---------------------------------------------------------------- 4. your first week: four stages on one phone (pinned-chapters)
   The kit's moment holds the section for one screen of scroll while each stage opens at the left and the one phone at the right
   crossfades to that stage's screen. At rest (a phone, a tablet, a short screen, reduced motion, no script) each stage stands
   with its own screen and the counter is hidden. The kit's sheet (moments/pinned-chapters/moment.css) is linked before this one. */
/* a heading and its second sentence as two lines: the sentence at the lead's size in a green-tinted ink, never the grey half */
.cb-headpair { display: grid; gap: var(--s-3); }
.cb-headpair > h2 { margin: 0; }
.cb-sub { font-size: var(--t-lead); line-height: 1.45; font-weight: 500; color: color-mix(in oklab, var(--cb-green) 62%, var(--p-ink)); max-width: 40ch; }
#work .cb-headpair > h2 { max-width: 18ch; }
/* the step: its title (not a heading: the moment reads a step's first paragraph as its lines), its lines, its screen */
#work .mo-pc__step { border-left-width: 1px; }
#work .cb-step__t { font: 400 28px/1.12 var(--font-display); letter-spacing: -0.008em; color: var(--ink); }
#work .mo-pc__step > p { font-size: var(--t-body); line-height: 1.55; max-width: 44ch; color: var(--ink); }
/* the counter: shown only while the section is held */
.cb-count { display: none; }

/* the terms that explain themselves (W-2, cleared): the word, underlined in dots, a tap opens one line under it */
.cb-term { position: relative; display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, var(--cb-green) 70%, transparent);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease); }
/* a 44px tap area round the word, without moving the line */
.cb-term::after { content: ""; position: absolute; inset: -12px -6px; }
.cb-term:hover, .cb-term:focus-visible, .cb-term:has(+ .cb-tip:popover-open) { color: var(--cb-green); text-decoration-color: var(--cb-green); }
.cb-term:focus-visible { outline: 2px solid var(--cb-green); outline-offset: 1px; border-radius: 3px; }
.cb-tip { width: min(320px, calc(100vw - 32px)); margin: auto; padding: 14px 16px 15px; border: 0; border-radius: 14px; background: #ffffff; color: var(--p-ink);
  font: 400 15px/1.5 var(--font-text); letter-spacing: 0; text-align: left;
  box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 2px 4px rgb(22 24 29 / .05), 0 18px 36px -12px rgb(22 24 29 / .24), 0 42px 80px -32px rgb(22 24 29 / .28);
  opacity: 0; translate: 0 4px; transition: opacity 150ms var(--ease), translate 150ms var(--ease), display 150ms allow-discrete, overlay 150ms allow-discrete; }
.cb-tip:popover-open { display: grid; gap: 4px; opacity: 1; translate: 0 0; }
@starting-style { .cb-tip:popover-open { opacity: 0; translate: 0 4px; } }
.cb-tip::backdrop { background: transparent; }
.cb-tip__term { font: 600 13px/18px var(--font-text); color: var(--cb-green); }
.cb-tip__text { display: block; }
/* where the browser can anchor it: under its word, flipped when the screen's edge is near; elsewhere the browser centres it */
@supports (position-area: block-end) {
  .cb-term--w2 { anchor-name: --cb-term-w2; }
  .cb-term--cleared { anchor-name: --cb-term-cleared; }
  .cb-tip { inset: auto; margin: 12px 0; position-area: block-end span-inline-end; position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline; }
  .cb-tip--w2 { position-anchor: --cb-term-w2; }
  .cb-tip--cleared { position-anchor: --cb-term-cleared; }
}
@media (prefers-reduced-motion: reduce) { .cb-tip { transition: none; } }

/* ---- the four screens, in the app's words (the moment moves each into the shared phone while the section is held) */
.cb-sv { font-family: var(--font-text); color: var(--p-ink); }
.cb-sv__screen { display: flex; flex-direction: column; gap: 12px; }
.cb-sv__screen > * { flex: none; }
.cb-sv__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.cb-sv__title { font: 600 17px/24px var(--font-text); letter-spacing: -0.012em; }
.cb-sv--apply .cb-sv__title { font: 700 22px/1.2 var(--font-text); letter-spacing: -0.018em; color: var(--p-ink); }
.cb-sv--apply .cb-sv__top { align-items: flex-start; }
.cb-sv__muted { display: block; margin-top: -6px; font-size: 14px; line-height: 20px; color: var(--p-muted); }
.cb-sv__bar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: color-mix(in oklab, var(--cb-green) 15%, transparent); }
.cb-sv__bar > span { display: block; height: 100%; border-radius: inherit; background: var(--cb-green); }
.cb-sv__step { display: block; margin-top: -6px; font-size: 13px; line-height: 18px; color: var(--p-muted); }
.cb-sv__fields { display: grid; gap: 12px; }
.cb-sv__field { display: grid; gap: 6px; }
.cb-sv__label { display: block; font: 500 13px/18px var(--font-text); color: var(--p-ink); }
.cb-sv__opt { display: inline-flex; align-items: center; height: 20px; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: color-mix(in oklab, var(--cb-green) 10%, #ffffff); color: var(--cb-green); font: 500 11.5px/1 var(--font-text); vertical-align: 1px; }
.cb-sv__input { display: block; height: 44px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 1px #d9d6cf; }
/* the form's button in the page's own button look (radius and height), drawn: it is part of the picture */
.cb-sv__go { display: flex; align-items: center; justify-content: center; height: var(--btn-h, 48px); border-radius: var(--r-btn, 12px); background: var(--cb-green); color: #ffffff; font: 600 15px/1 var(--font-text); }
.cb-sv__checks { display: grid; padding: 2px 14px; border-radius: 16px; background: #ffffff; box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 1px 2px rgb(22 24 29 / .05); }
.cb-sv__check { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; }
.cb-sv__check + .cb-sv__check { border-top: 1px solid var(--cb-line); }
.cb-sv__checkname { font: 600 14px/19px var(--font-text); letter-spacing: -0.005em; }
.cb-sv__ok { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: color-mix(in oklab, var(--cb-green) 12%, #ffffff); color: var(--cb-green); font: 600 12.5px/1 var(--font-text); }
.cb-sv__done { display: grid; justify-items: center; gap: 2px; text-align: center; }
.cb-sv__done .cb-yours__mark { margin-bottom: 12px; }
.cb-sv__done .cb-sv__label { color: var(--p-muted); }
.cb-sv__donetitle { display: block; font: 700 26px/1.15 var(--font-text); letter-spacing: -0.02em; color: var(--cb-green); }
/* the shift card in its span markup (the screen holds no paragraph) */
.cb-sv .cb-card__head, .cb-sv .cb-card__place, .cb-sv .cb-card__name, .cb-sv .cb-card__day, .cb-sv .cb-card__hours, .cb-sv .cb-card__pay { display: block; }
.cb-sv__deck { display: block; position: relative; }
/* the next card's edge behind it, as SwipeDeck stacks them */
.cb-sv__deck.cb-deck--two > .cb-card { position: relative; z-index: 2; }
.cb-sv__paycard { display: grid; gap: 4px; padding: 16px 16px 14px; border-radius: 16px; background: #ffffff; box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 1px 2px rgb(22 24 29 / .05); }
.cb-sv__paycard > .cb-sv__label { color: var(--p-muted); }
.cb-sv__fig { display: block; font-family: var(--font-figure); font-style: italic; font-weight: 400; font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; color: var(--cb-green); font-variant-numeric: lining-nums; }
.cb-sv__payline { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--cb-line); font: 400 13px/18px var(--font-text); color: var(--p-muted); }
.cb-sv__amt { font-weight: 600; color: var(--p-ink); font-variant-numeric: tabular-nums; }

/* ---- at rest: each screen a card of its own under (or beside) its stage, the parts that need the phone's height left out */
#work:not(.is-live) .cb-sv { width: min(100%, 380px); border-radius: 22px; background: #f6f4ef;
  box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 2px 4px rgb(22 24 29 / .05), 0 18px 36px -14px rgb(22 24 29 / .22); }
#work:not(.is-live) .cb-sv__screen { padding: 16px; gap: 10px; }
#work:not(.is-live) .cb-sv__more, #work:not(.is-live) .cb-sv--apply .cb-sv__go { display: none; }
#work:not(.is-live) .cb-sv__check { min-height: 52px; }
#work:not(.is-live) .cb-sv__fig { font-size: 44px; }
/* a phone: the four stages fit two whole screens, so each screen keeps only what its stage names */
@media (max-width: 639px) {
  main > #shifts, main > #pay { padding-bottom: var(--padb); }
  main > #work:not(.is-live) { --hm: 2; min-height: calc(2 * 100vh); min-height: calc(2 * 100lvh); }
  #work:not(.is-live) .mo-pc__text { gap: var(--s-4); }
  #work:not(.is-live) .mo-pc__steps { gap: var(--s-3); }
  #work:not(.is-live) .mo-pc__step .cb-sv { margin-top: var(--s-3); }
  #work:not(.is-live) .cb-sv__screen { padding: 12px; }
  #work:not(.is-live) .cb-sv--apply .cb-sv__title { font-size: 20px; }
  #work:not(.is-live) .cb-sv--apply .cb-sv__field:nth-child(2),
  #work:not(.is-live) .cb-sv--shift .cb-sv__top,
  #work:not(.is-live) .cb-sv--shift .cb-deck__next,
  #work:not(.is-live) .cb-sv--pay .cb-sv__payline { display: none; }
  #work:not(.is-live) .cb-sv--shift .cb-deck--two { padding-top: 0; }
  #work:not(.is-live) .cb-sv--shift .cb-card__meta { flex-flow: row wrap; align-items: center; gap: 6px 12px; }
  #work:not(.is-live) .cb-sv--shift .cb-card__name { font-size: 17px; }
  #work:not(.is-live) .cb-sv__check { min-height: 44px; }
  #work:not(.is-live) .cb-sv__fig { font-size: 40px; }
}
@media (min-width: 640px) {
  #work:not(.is-live) .mo-pc__step { grid-template-rows: 1fr auto auto 1fr; }
  #work:not(.is-live) .mo-pc__step > .cb-step__t { grid-column: 1; grid-row: 2; }
  #work:not(.is-live) .mo-pc__step > p { grid-column: 1; grid-row: 3; }
  #work:not(.is-live) .mo-pc__step > .cb-sv { grid-column: 2; grid-row: 1 / -1; justify-self: start; }
}

/* ---- held (1024 and up, 640px tall or more): the counter, the steps, and one phone the screens share */
/* from 640 to 1279 the kit's section is a column whose .wrap grows to fill it (system.css); held, the stage stays one screen */
#work.is-live > .mo-pc__grid { flex: none; }
/* held, the words and the phone start where every section's heading does (--padt under the screen's top), like the page's splits */
main #work.is-live > .mo-pc__grid { align-content: start; padding-top: var(--padt); }
#work.is-live .cb-step__t { color: var(--muted); transition: color 300ms ease; }
#work.is-live .mo-pc__step.is-on .cb-step__t { color: var(--ink); }
/* a word inside a closed step that takes the keyboard's focus opens its lines, so the focus is never on a hidden word */
#work.is-live .mo-pc__step:focus-within > p { grid-template-rows: 1fr; opacity: 1; }
#work.is-live .mo-pc__text { gap: var(--s-7); }
#work.is-live .mo-pc__steps { gap: var(--s-6); }
#work.is-live .cb-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; --stage: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#work.is-live .cb-count__i { font: 500 13px/18px var(--font-text); color: var(--muted); white-space: nowrap; transition: color 240ms ease; }
.cb-count__n { margin-right: 3px; font-family: var(--font-figure); font-style: italic; font-weight: 400; font-size: 17px; color: var(--cb-green); font-variant-numeric: lining-nums; }
/* the stage in view: its label in the ink and the green mark under it, travelling from one label to the next */
#work.is-live .cb-count::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 25%; height: 2px; border-radius: 2px; background: var(--cb-green);
  transform: translateX(calc(var(--stage) * 100%)); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
#work.is-live:has(.mo-pc__step:nth-child(2).is-on) .cb-count { --stage: 1; }
#work.is-live:has(.mo-pc__step:nth-child(3).is-on) .cb-count { --stage: 2; }
#work.is-live:has(.mo-pc__step:nth-child(4).is-on) .cb-count { --stage: 3; }
#work.is-live:has(.mo-pc__step:nth-child(1).is-on) .cb-count__i:nth-child(1),
#work.is-live:has(.mo-pc__step:nth-child(2).is-on) .cb-count__i:nth-child(2),
#work.is-live:has(.mo-pc__step:nth-child(3).is-on) .cb-count__i:nth-child(3),
#work.is-live:has(.mo-pc__step:nth-child(4).is-on) .cb-count__i:nth-child(4) { color: var(--ink); }

/* the phone: the frame the moment fills is the bezel, the island stays put, and the screens crossfade inside it */
#work.is-live .mo-pc__visuals.cb-sphone {
  --sp-h: min(660px, calc(100svh - var(--padt) - var(--padb)));
  justify-self: center; width: calc(var(--sp-h) * 0.5); height: var(--sp-h); aspect-ratio: auto; max-height: none;
  display: block; padding: 0; border: 0; border-radius: 48px; overflow: visible;
  /* the screen's own cream under the bezel (an inset ring), so two screens halfway through their crossfade never show it dark */
  background: #f6f4ef;
  box-shadow: inset 0 0 0 1.5px #2b2e35, inset 0 0 0 10px #15171b, 0 30px 60px -20px rgb(10 20 16 / .42), 0 60px 120px -40px rgb(10 20 16 / .38); }
#work.is-live .cb-sphone::before { content: ""; position: absolute; z-index: 3; top: 21px; left: 50%; width: 78px; height: 22px; margin-left: -39px; padding: 0; border-radius: 999px; background: #15171b; }
#work.is-live .cb-sphone > .mo-pc__visual { inset: 10px; border-radius: 38px; background: #f6f4ef; overflow: hidden; transform: none; transition: opacity 480ms ease; }
#work.is-live .cb-sphone .cb-sv__screen { position: absolute; inset: 0; padding: 60px 16px 20px; gap: 14px;
  transform: translateY(16px); transition: transform 720ms cubic-bezier(.22, 1, .36, 1); }
#work.is-live .cb-sphone .mo-pc__visual.is-past .cb-sv__screen { transform: translateY(-16px); }
#work.is-live .cb-sphone .mo-pc__visual.is-on .cb-sv__screen { transform: none; }
/* each screen's parts placed for the phone's height: the form's button at its foot, the status and the card in the middle */
#work.is-live .cb-sv--apply .cb-sv__go { margin-top: auto; }
#work.is-live .cb-sv__done { margin-block: auto; }
#work.is-live .cb-sv--shift .cb-sv__deck { margin-top: auto; }
#work.is-live .cb-sv--shift .cb-deck__acts { margin-bottom: auto; }
#work.is-live .cb-sv--pay .cb-sv__paycard { margin-block: auto; padding: 22px 18px 16px; }
#work.is-live .cb-sv--pay .cb-sv__fig { font-size: 64px; }
/* a short screen (1024x768): the held phone is shorter, so the form keeps its two required fields and its button */
@media (max-height: 820px) { #work.is-live .cb-sv--apply .cb-sv__more { display: none; } }
@media print { #work .cb-sphone { display: none; } }

/* ---------------------------------------------------------------- 9. questions: back on the cream. The heading at the top, then the
   answers straight under it, the shift times beside the first one */
.cb-questions { height: 100%; align-content: start; }
#questions .faq > .faq__item { padding-block: var(--s-5); gap: var(--s-2); }
#questions .faq > .faq__item:first-child { padding-top: 0; }
#questions .faq__item > p { font-size: 17px; line-height: 1.55; }
/* the address in the answer is a link inside a sentence: no arrow between it and the full stop */
#questions .faq__item .link.cb-inline { display: inline; min-height: 0; }
#questions .faq__item .link.cb-inline::after { content: none; display: none; }
.cb-hours { width: min(460px, 100%); padding-bottom: 16px; box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 2px 4px rgb(22 24 29 / .05), 0 18px 36px -12px rgb(22 24 29 / .22), 0 42px 80px -32px rgb(22 24 29 / .28); }
/* the times as chips, the app's role-chip look: tinted, no outline */
.cb-hours__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 0; }
.cb-hchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgb(22 24 29 / .05); color: var(--p-ink); font: 500 13px/1 var(--font-text); white-space: nowrap; }
.cb-hchip.is-on { background: color-mix(in oklab, var(--cb-green) 12%, #ffffff); color: var(--cb-green); }
.cb-hchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1024px) {
  /* the hours as the app's list of three rows (each runs the card's width, the chosen one ticked), so the mock holds its column
     beside the answers */
  .cb-hours { width: min(480px, 100%); padding-bottom: 18px; }
  .cb-hours .cb-ui__head { padding: 20px 22px 14px; }
  .cb-hours .cb-ui__title { font-size: 19px; line-height: 26px; }
  .cb-hours__chips { flex-direction: column; flex-wrap: nowrap; gap: 10px; padding: 4px 22px 0; }
  .cb-hchip { justify-content: space-between; height: 64px; padding: 0 20px; border-radius: 14px; font-size: 17px; }
  .cb-hchip.is-on { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cb-green) 45%, transparent); }
  .cb-hchip.is-on svg { order: 2; width: 18px; height: 18px; }
  .cb-questions { grid-template-rows: auto auto; row-gap: var(--s-8); }
  /* the answers at a reading size with room between them, so the list runs down the screen it holds */
  #questions .faq > .faq__item { padding-block: 36px; gap: var(--s-3); }
  #questions .faq > .faq__item:first-child { padding-top: 0; }
  #questions .faq__item > h3 { font-size: 22px; line-height: 1.35; }
  #questions .faq__item > p { font-size: 18px; line-height: 1.6; }
  .cb-questions > .cb-headpair { grid-row: 1; }
  .cb-questions > .cb-hours-slot, .cb-questions > .faq { grid-row: 2; align-self: start; }
}
@media (max-width: 1023px) {
  .cb-hours-slot, .cb-questions > .faq { margin-top: var(--s-7); }
}
@media (max-width: 639px) {
  #questions .faq > .faq__item { padding-block: var(--s-4); }
  #questions .faq__item > p { font-size: 16px; }
}

/* ---------------------------------------------------------------- the community's side: the brand green, entered through a second seam */
/* The kit's brand band (.ground-brand: every word in the green's cream ink, the primary inverted) across the community's
   sections. White product screens stand on it, as on the hero's green side, with the hero's deeper shadow. */
.cb-green { --cb-shadow: 0 0 0 1px rgb(10 20 16 / .10), 0 2px 4px rgb(10 20 16 / .10), 0 22px 44px -14px rgb(10 20 16 / .45), 0 54px 100px -36px rgb(10 20 16 / .50); }
/* never a flat fill: layered greens, the brand green lit from the top left and deepening to the lower right, one soft diagonal
   band of light across it, and the paper's grain. Every point stays at or under the brand green's lightness, so the cream ink
   keeps 7:1 everywhere */
.cb-green { --p-accent: #2a5145; background: #2a5145; }
.cb-green::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* the light fades out at the band's top and foot, so two green bands meet on one flat green, never on a line */
  -webkit-mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  background:
    linear-gradient(116deg, rgb(47 93 80 / 0) 30%, rgb(47 93 80 / .55) 44%, rgb(47 93 80 / .7) 50%, rgb(47 93 80 / .55) 56%, rgb(47 93 80 / 0) 70%),
    radial-gradient(90% 75% at 0% 0%, #2f5d50 0%, rgb(47 93 80 / 0) 72%),
    radial-gradient(85% 90% at 100% 100%, #193a30 0%, rgb(25 58 48 / 0) 70%),
    var(--cb-grain);
}
.cb-green .t-lead { color: var(--ink); }
.cb-green .cb-facts li::before { background: var(--ink); box-shadow: inset 0 0 0 5.5px color-mix(in oklab, var(--ink) 30%, var(--bg)); }
.cb-green .btn--primary:focus-visible, .cb-green .link:focus-visible { outline-color: var(--ink); }
/* the hand-over: the hero's seam leaned the green in from the right; here the green comes in from the left and fills the width.
   A cream wedge in the section's top padding, its slant the hero's, so the change of ground is a seam, not a rule */
.cb-seam { --seam: clamp(32px, 7vw, 100px); }
.cb-seam::before { content: ""; position: absolute; z-index: 1; inset: -1px 0 auto 0; height: calc(var(--seam) + 1px); background: var(--p-bg) var(--cb-grain); clip-path: polygon(0 0, 100% 0, 100% 100%); pointer-events: none; }

/* ---------------------------------------------------------------- 6. communities: the app frame (sections-library app-frame) */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
/* the loop's pause button (motion.css) is a live control: it sits over the pane's fade, never under it */
.app > .app__pane > :is(button, .m-pause, [data-m-pause]) { z-index: 2; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
/* from 1024 the window fills what the screen leaves, so its height changes with the screen: each pane shows whole rows only (a
   row its height would cut is left out, a day with its rows), measured from the rows' own heights, and needs no fade */
@media (min-width: 1024px) {
  .cb-app > .app__pane { container-type: size; }
  .cb-app > .app__pane::after { display: none; }
  @container (max-height: 614px) { .cb-today__rows > li:nth-child(n + 9) { display: none; } }
  @container (max-height: 554px) { .cb-today__rows > li:nth-child(n + 8) { display: none; } }
  @container (max-height: 494px) { .cb-today__rows > li:nth-child(n + 7) { display: none; } }
  @container (max-height: 434px) { .cb-today__rows > li:nth-child(n + 6) { display: none; } }
  @container (max-height: 374px) { .cb-today__rows > li:nth-child(n + 5) { display: none; } }
  /* the days list, one line a row (from 1280) */
  @container (min-width: 401px) and (max-height: 612px) { .cb-days > :nth-child(n + 14) { display: none; } }
  @container (min-width: 401px) and (max-height: 543px) { .cb-days > :nth-child(n + 11) { display: none; } }
  @container (min-width: 401px) and (max-height: 439px) { .cb-days > :nth-child(n + 8) { display: none; } }
  @container (min-width: 401px) and (max-height: 335px) { .cb-days > :nth-child(n + 7) { display: none; } }
  /* the narrower list (1024 to 1279), where the title and some rows take two lines */
  @container (max-width: 400px) and (max-height: 666px) { .cb-days > :nth-child(n + 14) { display: none; } }
  @container (max-width: 400px) and (max-height: 597px) { .cb-days > :nth-child(n + 11) { display: none; } }
  @container (max-width: 400px) and (max-height: 493px) { .cb-days > :nth-child(n + 8) { display: none; } }
  @container (max-width: 400px) and (max-height: 389px) { .cb-days > :nth-child(n + 7) { display: none; } }
}
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}
.cb-app { --u-r: 16px; --fx-bg: #ffffff; --fx-ink: var(--p-ink); --fx-muted: var(--p-muted); --fx-accent: var(--cb-green); font-family: var(--font-text); color: var(--p-ink); }
.cb-green .cb-app { --u-border: transparent; box-shadow: var(--cb-shadow); }
/* the window fills what the screen leaves under the words, flat: its lean back belonged to the section's moment (now the
   first-week story's), and outside a moment or the scene the house rules keep a window square to the page */
.cb-plane { display: flex; flex-direction: column; margin-top: var(--s-7); margin-bottom: var(--s-3); }
.cb-plane > .cb-app { flex: 1 1 auto; min-height: 0; margin-top: 0; }
/* a phone: the window as tall as its rows (the pane's four), not cut to what the screen leaves */
@media (max-width: 639px) { main > section > .wrap > .fill.cb-plane { flex: none; } }
.cb-app__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--cb-line); }
.cb-app__title { font: 600 17px/24px var(--font-text); letter-spacing: -0.012em; }
.cb-app__sub { font-size: 13px; line-height: 18px; color: var(--p-muted); }
.cb-days { display: grid; padding: 6px 20px 20px; }
.cb-days__day { margin-top: 14px; font: 600 14px/20px var(--font-text); }
.cb-days__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cb-line); font-size: 13px; line-height: 18px; }
.cb-days__state { color: var(--p-muted); white-space: nowrap; }
.cb-days__row.is-open .cb-days__state { color: var(--cb-green); font-weight: 500; }
.cb-days__empty { margin-top: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--cb-line); font-size: 13px; color: var(--p-muted); }
.cb-today__bar { align-items: center; }
.cb-today__title { color: var(--cb-green); font: 600 17px/24px var(--font-text); letter-spacing: -0.012em; }
.cb-today__rows { display: grid; gap: 8px; padding: 14px 20px 20px; }
.cb-today__row { display: grid; grid-template-columns: 112px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #ffffff; box-shadow: 0 0 0 1px rgb(22 24 29 / .06), 0 1px 2px rgb(22 24 29 / .05); }
.cb-today__hours { font: 600 13px/18px var(--font-text); white-space: nowrap; }
.cb-today__name { font: 600 14px/20px var(--font-text); }
.cb-today__role { font-size: 12px; color: var(--p-muted); }
.cb-today__end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
/* the loop's finished frame (motion.css holds it there on a phone, under reduced motion and without script) */
.cb-loop { --m-still: .72; }
/* the open pane's one loop: the open CNA row is taken. Both states share their cells; a reset dims the taken state, the open
   one shows, then it turns into "Coming at 3 PM" (never both at once) and rests */
.cb-swap { display: grid; }
.cb-swap > * { grid-area: 1 / 1; }
.cb-today__end.cb-swap { justify-items: end; }
.cb-today__row--loop .cb-swap__open { animation: cb-swap-open var(--m-cycle) linear infinite; }
.cb-today__row--loop .cb-swap__taken { animation: cb-swap-taken var(--m-cycle) linear infinite; }
@keyframes cb-swap-open { 0%, 4% { opacity: 0; } 8%, 34% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes cb-swap-taken { 0% { opacity: 1; } 3%, 40% { opacity: 0; } 46%, 100% { opacity: 1; } }
/* without motion.js (no script) the loop still stands on its finished frame */
html:not(.m-enter) .cb-loop * { animation-play-state: paused; animation-delay: calc(-1 * var(--m-still) * var(--m-cycle)); }

@media (max-width: 639px) {
  .cb-today__row { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "av who" "av hrs" "end end"; row-gap: 6px; }
  .cb-today__row > .cb-av { grid-area: av; align-self: start; }
  .cb-today__who { grid-area: who; }
  .cb-today__hours { grid-area: hrs; font-weight: 400; color: var(--p-muted); }
  .cb-today__end { grid-area: end; justify-content: flex-start; }
  .cb-app__bar, .cb-today__rows { padding-inline: 14px; }
  /* the phone pane ends on its fourth whole row, the open one, then the window's own rounded foot: no fade, no blank band */
  .cb-today__row:nth-child(n + 5) { display: none; }
  .cb-app { overflow: hidden; }
  .cb-app > .app__pane::after { display: none; }
  /* on a phone the loop holds its finished picture and shows no pause button, so the band kept for that button closes */
  .cb-today__rows.cb-loop { --m-safe: 16px; }
}

/* ---------------------------------------------------------------- 7. community: the setting, the Swap sheet over its corner, on the green */
/* the two screens at their own sizes, no frame: the setting, and the sheet laid over its lower corner */
.cb-firstpick { display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--s-2); }
.cb-firstpick > .cb-setting { width: min(440px, 100%); box-shadow: var(--cb-shadow); }
/* the sheet steps down from the setting's lower corner: it overlaps only the card's foot padding, never a word */
.cb-firstpick > .cb-sheet { position: relative; z-index: 2; align-self: flex-end; width: min(340px, 82%); margin: -12px 0 0; box-shadow: var(--cb-shadow); }
@media (min-width: 1024px) {
  /* at a phone's own type size (the app's 16-17px), so the two screens hold the section beside the words */
  .cb-firstpick > .cb-setting { width: min(580px, 100%); }
  .cb-firstpick > .cb-sheet { width: min(400px, 72%); }
  .cb-firstpick .cb-ui__head { padding: 20px 22px 14px; }
  .cb-firstpick .cb-ui__title, .cb-firstpick .cb-sheet__title { font-size: 19px; line-height: 26px; }
  .cb-firstpick .cb-radio { margin: 0 18px; padding: 18px 4px; font-size: 17px; line-height: 24px; gap: 14px; grid-template-columns: 24px minmax(0, 1fr); }
  .cb-firstpick .cb-radio__dot { width: 24px; height: 24px; }
  .cb-firstpick .cb-radio.is-on .cb-radio__dot { border-width: 7.5px; }
  .cb-firstpick .cb-radio__sub { font-size: 15px; line-height: 22px; margin-top: 4px; }
  .cb-firstpick .cb-setting { padding-bottom: 22px; }
  .cb-firstpick .cb-setting__done { margin: 8px 22px 0; padding: 13px 16px; font-size: 15px; line-height: 22px; }
  .cb-firstpick .cb-sheet { padding: 24px 24px 22px; gap: 8px; }
  .cb-firstpick .cb-sheet__text { font-size: 15px; line-height: 23px; }
  .cb-firstpick .cb-sheet__btn { margin-top: 12px; height: 48px; font-size: 16px; }
  .cb-firstpick .cb-example { height: 22px; font-size: 12px; }
}
@media (min-width: 1280px) {
  .cb-firstpick { padding-right: var(--s-5); }
  /* the two screens at a size that holds the green screen beside the words (the action now under the facts) */
  .cb-firstpick .cb-ui__head { padding: 26px 26px 18px; }
  .cb-firstpick .cb-ui__title, .cb-firstpick .cb-sheet__title { font-size: 20px; line-height: 28px; }
  .cb-firstpick .cb-radio { margin: 0 22px; padding: 24px 4px; font-size: 18px; line-height: 26px; }
  .cb-firstpick .cb-radio__sub { font-size: 16px; line-height: 23px; }
  .cb-firstpick .cb-setting { padding-bottom: 26px; }
  .cb-firstpick .cb-setting__done { margin: 10px 26px 0; padding: 16px 18px; font-size: 16px; }
  .cb-firstpick > .cb-sheet { width: min(440px, 76%); margin-top: 18px; padding: 30px 30px 28px; gap: 10px; }
  .cb-firstpick .cb-sheet__text { font-size: 16px; line-height: 24px; }
  .cb-firstpick .cb-sheet__btn { margin-top: 14px; height: 52px; }
}
@media (max-width: 1023px) { .cb-firstpick { margin-top: var(--s-7); } }
/* first pick goes a layer deeper: the deep green of the hero's sea, eased in from the Communities green above it */
main > #community.cb-green { --p-accent: #21443a; background: #21443a; }
main > #community.cb-green::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 0; height: 240px; pointer-events: none; background: linear-gradient(180deg, #2a5145, rgb(42 81 69 / 0)); }
/* the words start where every section's heading does (--padt under its top), the action under the facts, the two screens
   level with the heading and running down the screen */
@media (min-width: 1024px) { main > #community > .wrap.grid { align-content: start; } }
.cb-setting { padding-bottom: 16px; }
.cb-radio { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 12px; padding: 12px 4px; border-top: 1px solid var(--cb-line); font-weight: 500; font-size: 14px; }
.cb-radio__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #b9bcc4; margin-top: 0; }
.cb-radio.is-on .cb-radio__dot { border: 6px solid var(--cb-green); }
.cb-radio__sub { display: block; margin-top: 2px; font-weight: 400; font-size: 13px; line-height: 18px; color: var(--p-muted); }
.cb-setting__done { margin: 4px 16px 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--cb-green) 9%, #ffffff); color: var(--cb-green); font-weight: 500; font-size: 13px; }
.cb-sheet { padding: 18px 18px 16px; display: grid; gap: 6px; }
.cb-sheet__title { font: 600 16px/22px var(--font-text); }
.cb-sheet__text { font-size: 13px; line-height: 19px; color: color-mix(in oklab, var(--p-ink) 84%, #ffffff); }
.cb-sheet__btn { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; background: var(--cb-green); color: #ffffff; font: 600 14px/1 var(--font-text); }

/* ---------------------------------------------------------------- 8. staff: on the green, the form a cream sheet with the page's own words */
.cb-form { align-self: start; background: var(--p-surface); border: 1px solid var(--cb-line); border-radius: var(--r-lg); padding: var(--s-7); }
/* inside the form the page's base ground again (the brand band's cream ink would vanish on it) */
.cb-green .cb-form {
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted); --accent: var(--p-accent); --accent-ink: var(--p-accent-ink);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
  --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent);
  background: var(--p-bg); color: var(--ink); border: 0; box-shadow: var(--cb-shadow);
}
.cb-form > .field:nth-of-type(1), .cb-form > .field:nth-of-type(2) { grid-column: auto; }
.cb-form .field :is(input, textarea) { height: 48px; background: #ffffff; }
.cb-form .field textarea { height: auto; min-height: 152px; }
@media (max-width: 639px) { .cb-form .field textarea { min-height: 120px; } }
.field__hint { margin-top: -4px; font-weight: 400; color: var(--p-muted); }
.cb-form > p.t-small { margin-top: -4px; }
@media (max-width: 639px) { .cb-form { padding: var(--s-5); } .cb-form > .field:nth-of-type(1), .cb-form > .field:nth-of-type(2) { grid-column: 1 / -1; } }
/* side by side, a field whose neighbour shows a two-line reason keeps its label and box at the top */
.cb-form > .field { align-content: start; }
/* the Privacy link at the size of the line it ends, centred on it (a phone gives the link a 44px tap height) */
.cb-form .t-small .link { font-size: inherit; }
.cb-form p.cb-form__privacy { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.35em; }
/* the honeypot: out of sight and out of the tab order; bots that ignore the sheet still fill it */
.cb-hp { display: none; }
/* the section's picture: the desk's Staffing requests list on a lighter green, down to the form's foot from 1024 */
.cb-reqframe { --ratio: 64%; }
/* on the green: a flat panel in the band's lighter green, the list in it at its own size */
.cb-green .cb-reqframe { background: color-mix(in oklab, var(--p-accent) 86%, var(--p-accent-ink)); border: 0; }
.cb-green .cb-reqs { width: min(440px, 100%); box-shadow: var(--cb-shadow); }
.cb-reqs__new--done { background: rgb(22 24 29 / .05); color: var(--p-ink); }
/* the Privacy link underlined as text, not drawn under it, so it reads on the form's own ground */
.cb-form__privacy .link { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.cb-reqs { width: min(400px, 100%); padding-bottom: 6px; }
.cb-reqs__row { display: grid; gap: 4px; margin: 0 8px; padding: 12px 8px 10px; border-top: 1px solid var(--cb-line); }
.cb-reqs__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cb-reqs__where { font: 600 14px/20px var(--font-text); }
.cb-reqs__new { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 9px; border-radius: 999px; background: color-mix(in oklab, var(--cb-green) 10%, #ffffff); color: var(--cb-green); font: 500 12px/1 var(--font-text); }
.cb-reqs__need { color: color-mix(in oklab, var(--p-ink) 84%, #ffffff); }
.cb-reqs__acts { display: flex; gap: 8px; margin-top: 8px; }
.cb-reqs__btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px; background: var(--cb-green); color: #ffffff; font: 500 13px/1 var(--font-text); }
.cb-reqs__btn--quiet { background: #ffffff; color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--cb-line); }
@media (min-width: 1024px) {
  #staff .cb-staff { align-self: stretch; }
  #staff .cb-reqframe { flex: 1 1 auto; min-height: 280px; }
  #staff .cb-reqframe::before { display: none; }
}
@media (max-width: 639px) { .cb-reqframe { --ratio: 78%; } }

/* ---------------------------------------------------------------- 9. close: the page closes at sunrise
   The Rancho Palos Verdes sunrise lies under the whole footer: the last words and the action stand on its pale sky in the deep
   green, the water darkens into the deep green under the name and the links (the cream ink there) */
footer.closing.cb-close { position: relative; overflow: clip; background: var(--cb-green-deep); }
footer.closing.cb-close > picture.layer > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0%; }
/* the water darkens into the deep green from just above the name down: a fade tied to the name, so the last words and the
   action keep the pale sky at every width and the name and the links stand on the green (under the .wrap's words) */
.cb-close .cb-closeword { position: relative; --cb-fade: clamp(48px, 9vw, 120px); }
.cb-close .cb-closeword::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); width: 100vw; top: calc(-1 * var(--cb-fade)); height: 4000px; pointer-events: none;
  background: linear-gradient(180deg, rgb(33 68 58 / 0) 0, rgb(33 68 58 / .55) calc(var(--cb-fade) * .5), rgb(33 68 58 / .9) var(--cb-fade), #21443a calc(var(--cb-fade) + 160px)); }
.cb-close .closing__cta h2 { color: var(--cb-green-deep); }
.cb-close .cb-closeword, .cb-close .closing__links {
  --ink: var(--cb-cream-hi); --muted: rgb(255 247 238 / .78); --line: rgb(255 247 238 / .16); --line-strong: rgb(255 247 238 / .4);
  color: var(--ink);
}
.cb-close .closing__links .cb-lockup { color: var(--cb-cream-hi); }
.cb-close .closing__links a:focus-visible { outline-color: var(--ink); }
/* a phone or a tablet: the 4:5 sunrise at the top (the words on its sky), the deep green under it */
@media (max-width: 1023px) {
  footer.closing.cb-close > picture.layer > img { height: auto; aspect-ratio: 780 / 977; }
}
/* the credits: the kit's one line (details.credits), on the legal row's line; opened, the photographs, their authors and licences */
.cb-close .footer__legal { flex-wrap: wrap; column-gap: var(--s-5); }
.cb-close .credits { flex-basis: auto; margin-left: auto; color: var(--muted); }
.cb-close .credits > summary { display: inline-flex; align-items: center; min-height: 44px; }
.cb-close .credits > summary::after { color: var(--ink); }
.cb-close .credits[open] { flex-basis: 100%; margin-left: 0; }
.cb-close .credits a { color: var(--ink); }
@media (max-width: 1023px) { .cb-close .credits { flex-basis: 100%; margin-left: 0; } }
.cb-closeword { display: block; color: var(--ink); line-height: 0; overflow: visible; }
.cb-closeword > svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1024px) { .closing__cta h2 { max-width: none; } }
.closing__links .nav__logo { font-size: 22px; }
/* the legal row: the year and the Privacy link on one line (a phone gives the link a 44px tap height) */
.closing .footer__legal { align-items: center; }

/* a short desktop screen (1024x768): the form keeps to one screen */
@media (min-width: 640px) and (max-height: 820px) {
  .cb-form { padding: var(--s-6); gap: var(--s-3); }
  .cb-form .field textarea { min-height: 88px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  #questions .faq > .faq__item { padding-block: var(--s-5); }
  #questions .faq > .faq__item:first-child { padding-top: 0; }
  #questions .faq__item > p { line-height: 1.5; }
}

/* ---------------------------------------------------------------- /privacy: one column of plain text */
.cb-privacy .wrap { display: block; }
.cb-privacy__body { max-width: 68ch; }
.cb-privacy__body h1 { margin-bottom: var(--s-4); }
.cb-privacy__body h2 { margin: var(--s-8) 0 var(--s-3); font-size: var(--t-h3, 24px); }
.cb-privacy__body p, .cb-privacy__body li { font-size: var(--t-body); line-height: 1.6; }
.cb-privacy__body ul { display: grid; gap: var(--s-3); padding-left: 1.2em; list-style: disc; }
.cb-privacy__body p + p { margin-top: var(--s-4); }
.cb-privacy__body > p:last-child { margin-top: var(--s-8); }

/* ---------------------------------------------------------------- a 404 in the homepage's layout ((site)/not-found.tsx), as global-not-found */
.cb-nf { width: min(100% - 48px, 560px); min-height: 100svh; margin: 0 auto; padding: 96px 0; display: flex; flex-direction: column; justify-content: center; }
.cb-nf__mark { font-size: 26px; align-self: flex-start; }
.cb-nf h1 { margin-top: var(--s-8); font-size: clamp(32px, 4vw + 16px, 48px); line-height: 1.1; text-wrap: balance; }
.cb-nf__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: var(--s-7); }
.cb-nf__links .link { display: inline-flex; align-items: center; min-height: 44px; }