/* ==========================================================================
   The Care Web, "Cinema" (v88.5.0): the home page, the two ways in and the
   step pages. The films lead, on a night-navy ground with the brand gold as
   the one accent. Dark first, with a full light theme that follows the device
   (or the Colours choice in the accessibility panel).

   Scope: html[data-look="cinema"] is on every page (v88.6.0). This file draws
   the header, the tokens and the new pages (inside .cine); the rest of the site
   takes the same colours from cinema-skin.css and cinema-site.css. Tokens are
   --cn-*, so nothing here can change a colour the older pages read.

   Display type: Fraunces (already on the site). Reading type: Atkinson
   Hyperlegible Next (SIL Open Font License, LICENSE-ATKINSON.txt).
   ========================================================================== */

@font-face { font-family: "Atkinson Next"; src: url("/assets/fonts/atkinson-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url("/assets/fonts/atkinson-next-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

/* ---------- tokens: dark first ---------- */
html[data-look="cinema"] {
  color-scheme: dark;
  --cn-bg: #0C1130;
  --cn-raise: #141A3F;
  --cn-raise-2: #1B2250;
  --cn-sunk: #080C24;
  --cn-ink: #F4EFE4;
  --cn-ink-2: #C3C0D2;
  --cn-ink-3: #A3A1BA;
  --cn-line: rgba(244, 239, 228, .13);
  --cn-line-2: rgba(244, 239, 228, .26);
  /* v88.11.0: the edge of a field or a choice (text fields, selects, tick boxes, toggles): 3:1 on every
     surface (WCAG 1.4.11), where a line is only decoration */
  --cn-field: rgba(244, 239, 228, .44);
  --cn-gold: #F1BE48;
  --cn-gold-hi: #F7D27A;
  --cn-gold-base: #A87814;
  --cn-gold-text: #F1BE48;
  --cn-on-gold: #1A1400;
  --cn-link: #7FD6C9;
  --cn-focus: #F7D27A;
  --cn-shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .75), 0 12px 30px -18px rgba(0, 0, 0, .6);
  --cn-shadow-md: 0 18px 40px -22px rgba(0, 0, 0, .7);
  --cn-glass: rgba(20, 26, 63, .74);

  /* worlds (dark) */
  --cn-emp-bg: #0F2E2C; --cn-emp-ink: #EFF7F4; --cn-emp-glow: #56B8AA; --cn-emp-soft: #1B4441;
  --cn-pc-bg: #33172A;  --cn-pc-ink: #FBEFF4;  --cn-pc-glow: #E691B2;  --cn-pc-soft: #4A2340;
  --cn-tr-bg: #0E2A3A;  --cn-tr-ink: #EEF6FA;  --cn-tr-glow: #74BAD8;  --cn-tr-soft: #183F54;
  --cn-dt-bg: #33230D;  --cn-dt-ink: #FBF3E6;  --cn-dt-glow: #F0A13B;  --cn-dt-soft: #4A3414;
  --cn-hh-bg: #1F2A18;  --cn-hh-ink: #F2F7EC;  --cn-hh-glow: #A3C77F;  --cn-hh-soft: #2E3D24;
  --cn-co-bg: #3A1D12;  --cn-co-ink: #FDF1EA;  --cn-co-glow: #F29066;  --cn-co-soft: #52291A;
  --cn-on-bg: #070A20;  --cn-on-ink: #F3EEE3;  --cn-on-glow: #F1BE48;  --cn-on-soft: #141942;

  --cn-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --cn-body: "Atkinson Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --cn-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --cn-fs-hero: clamp(2.5rem, 1.25rem + 3.4cqw, 4.75rem);
  --cn-fs-h2: clamp(2.1rem, 1.15rem + 3.2cqw, 4.1rem);
  --cn-fs-h3: clamp(1.9rem, 1.05rem + 2.6cqw, 3.4rem);
  --cn-fs-lede: clamp(1.125rem, 1rem + .4cqw, 1.3rem);
  --cn-fs-body: 1.0625rem;
  --cn-fs-small: .9375rem;
  --cn-fs-micro: .8125rem;

  --cn-r-s: 10px; --cn-r-m: 16px; --cn-r-l: 24px; --cn-r-xl: 34px;
  --cn-gutter: clamp(16px, 4cqw, 48px);
  --cn-maxw: 1320px;
  --cn-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cn-out: cubic-bezier(.2, .8, .2, 1);
  --cn-cine: cubic-bezier(.65, 0, .35, 1);
  --cn-header-h: var(--site-header-height, 76px);

  /* the two ways in: right for participants and families (gold), left for support workers (teal) */
  --cn-part-acc: #F1BE48; --cn-part-on: #1A1400; --cn-part-text: #F1BE48;
  --cn-work-acc: #7FD6C9; --cn-work-on: #06302C; --cn-work-text: #7FD6C9;

  /* step pages */
  --cn-acc: var(--cn-part-acc); --cn-acc-ink: var(--cn-part-on); --cn-acc-text: var(--cn-part-text);
  --cn-ok: #6FCF97; --cn-on-ok: #0B2A17; --cn-bad: #FF9CBD; --cn-bad-ink: #FFC2D6;
  --cn-warn: #F1BE48;
}
/* the light theme: the device asks for it (and no one chose dark), or the Colours choice says light */
@media (prefers-color-scheme: light) {
  html[data-look="cinema"]:not([data-cn-theme="dark"]) {
    color-scheme: light;
    --cn-bg: #EEF0F4; --cn-raise: #FFFFFF; --cn-raise-2: #F6F7FA; --cn-sunk: #E2E5EE;
    --cn-ink: #10173A; --cn-ink-2: #3F4668; --cn-ink-3: #545A78;
    --cn-line: rgba(16, 23, 58, .13); --cn-line-2: rgba(16, 23, 58, .28); --cn-field: #80879B;
    --cn-gold-text: #8A5E00; --cn-link: #0E6E63; --cn-focus: #1C2D5A;
    --cn-shadow-lg: 0 40px 80px -40px rgba(16, 23, 58, .35), 0 10px 30px -18px rgba(16, 23, 58, .25);
    --cn-shadow-md: 0 18px 40px -24px rgba(16, 23, 58, .35);
    --cn-glass: rgba(255, 255, 255, .8);
    --cn-emp-bg: #DCEFEA; --cn-emp-ink: #0D2F2B; --cn-emp-glow: #16655B; --cn-emp-soft: #C4E4DC;
    --cn-pc-bg: #F6E1EA;  --cn-pc-ink: #3A1428;  --cn-pc-glow: #9A2E59;  --cn-pc-soft: #EFCCDB;
    --cn-tr-bg: #DCEBF3;  --cn-tr-ink: #0E2A3A;  --cn-tr-glow: #185D7E;  --cn-tr-soft: #C6DEEA;
    --cn-dt-bg: #F7E8CF;  --cn-dt-ink: #3A2708;  --cn-dt-glow: #875006;  --cn-dt-soft: #F0D8AE;
    --cn-hh-bg: #E5EEDC;  --cn-hh-ink: #1F2A18;  --cn-hh-glow: #3F6424;  --cn-hh-soft: #D3E3C4;
    --cn-co-bg: #F8E1D6;  --cn-co-ink: #3A1D12;  --cn-co-glow: #983F1A;  --cn-co-soft: #F1CBB9;
    --cn-part-text: #8A5E00; --cn-acc: #8A5E00; --cn-acc-ink: #FFFFFF; --cn-acc-text: #8A5E00;
    --cn-work-acc: #0E6E63; --cn-work-on: #FFFFFF; --cn-work-text: #0E6E63;
    --cn-ok: #2F7A3E; --cn-on-ok: #FFFFFF; --cn-bad: #A3234F; --cn-bad-ink: #8A1C42; --cn-warn: #8A5E00;
  }
}
html[data-look="cinema"][data-cn-theme="light"] {
  color-scheme: light;
  --cn-bg: #EEF0F4; --cn-raise: #FFFFFF; --cn-raise-2: #F6F7FA; --cn-sunk: #E2E5EE;
  --cn-ink: #10173A; --cn-ink-2: #3F4668; --cn-ink-3: #545A78;
  --cn-line: rgba(16, 23, 58, .13); --cn-line-2: rgba(16, 23, 58, .28); --cn-field: #80879B;
  --cn-gold-text: #8A5E00; --cn-link: #0E6E63; --cn-focus: #1C2D5A;
  --cn-shadow-lg: 0 40px 80px -40px rgba(16, 23, 58, .35), 0 10px 30px -18px rgba(16, 23, 58, .25);
  --cn-shadow-md: 0 18px 40px -24px rgba(16, 23, 58, .35);
  --cn-glass: rgba(255, 255, 255, .8);
  --cn-emp-bg: #DCEFEA; --cn-emp-ink: #0D2F2B; --cn-emp-glow: #16655B; --cn-emp-soft: #C4E4DC;
  --cn-pc-bg: #F6E1EA;  --cn-pc-ink: #3A1428;  --cn-pc-glow: #9A2E59;  --cn-pc-soft: #EFCCDB;
  --cn-tr-bg: #DCEBF3;  --cn-tr-ink: #0E2A3A;  --cn-tr-glow: #185D7E;  --cn-tr-soft: #C6DEEA;
  --cn-dt-bg: #F7E8CF;  --cn-dt-ink: #3A2708;  --cn-dt-glow: #875006;  --cn-dt-soft: #F0D8AE;
  --cn-hh-bg: #E5EEDC;  --cn-hh-ink: #1F2A18;  --cn-hh-glow: #3F6424;  --cn-hh-soft: #D3E3C4;
  --cn-co-bg: #F8E1D6;  --cn-co-ink: #3A1D12;  --cn-co-glow: #983F1A;  --cn-co-soft: #F1CBB9;
  --cn-part-text: #8A5E00; --cn-acc: #8A5E00; --cn-acc-ink: #FFFFFF; --cn-acc-text: #8A5E00;
  --cn-work-acc: #0E6E63; --cn-work-on: #FFFFFF; --cn-work-text: #0E6E63;
  --cn-ok: #2F7A3E; --cn-on-ok: #FFFFFF; --cn-bad: #A3234F; --cn-bad-ink: #8A1C42; --cn-warn: #8A5E00;
}
html[data-look="cinema"][data-cn-theme="dark"] { color-scheme: dark; }
/* high contrast: the light theme, pushed to black on white */
html.high-contrast[data-look="cinema"] {
  color-scheme: light;
  --cn-bg: #FFFFFF; --cn-raise: #FFFFFF; --cn-raise-2: #F2F2F2; --cn-sunk: #FFFFFF;
  --cn-ink: #000000; --cn-ink-2: #000000; --cn-ink-3: #1A1A1A;
  --cn-line: #000000; --cn-line-2: #000000; --cn-field: #000000;
  --cn-gold: #F1BE48; --cn-gold-text: #5C3F00; --cn-link: #00443C; --cn-focus: #000000;
  --cn-glass: #FFFFFF; --cn-shadow-lg: none; --cn-shadow-md: none;
  --cn-emp-bg: #FFFFFF; --cn-emp-ink: #000; --cn-emp-glow: #00443C; --cn-emp-soft: #F2F2F2;
  --cn-pc-bg: #FFFFFF;  --cn-pc-ink: #000;  --cn-pc-glow: #6B1A3C;  --cn-pc-soft: #F2F2F2;
  --cn-tr-bg: #FFFFFF;  --cn-tr-ink: #000;  --cn-tr-glow: #0E3F57;  --cn-tr-soft: #F2F2F2;
  --cn-dt-bg: #FFFFFF;  --cn-dt-ink: #000;  --cn-dt-glow: #5C3F00;  --cn-dt-soft: #F2F2F2;
  --cn-hh-bg: #FFFFFF;  --cn-hh-ink: #000;  --cn-hh-glow: #2B4418;  --cn-hh-soft: #F2F2F2;
  --cn-co-bg: #FFFFFF;  --cn-co-ink: #000;  --cn-co-glow: #6B2A10;  --cn-co-soft: #F2F2F2;
  --cn-on-bg: #FFFFFF;  --cn-on-ink: #000;  --cn-on-glow: #5C3F00;  --cn-on-soft: #F2F2F2;
  --cn-part-acc: #5C3F00; --cn-part-on: #FFFFFF; --cn-part-text: #5C3F00;
  --cn-work-acc: #00443C; --cn-work-on: #FFFFFF; --cn-work-text: #00443C;
  --cn-acc: #5C3F00; --cn-acc-ink: #FFFFFF; --cn-acc-text: #5C3F00;
  --cn-ok: #1A5C2A; --cn-on-ok: #FFFFFF; --cn-bad: #8A0000; --cn-bad-ink: #8A0000; --cn-warn: #5C3F00;
}
/* the easier-to-read font setting wins everywhere */
html[data-font="readable"][data-look="cinema"] { --cn-display: Verdana, "Trebuchet MS", Tahoma, sans-serif; --cn-body: Verdana, "Trebuchet MS", Tahoma, sans-serif; }

/* ---------- the page around the new parts ---------- */
html[data-look="cinema"] body { background: var(--cn-bg); }
html[data-look="cinema"] main#main { background: var(--cn-bg); }
.cine {
  container: page / inline-size;
  --field-border: var(--cn-field);
  background: var(--cn-bg); color: var(--cn-ink);
  font-family: var(--cn-body); font-size: var(--cn-fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.cine :where(h1, h2, h3) { margin: 0; font-family: var(--cn-display); font-weight: 560; font-optical-sizing: auto; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; color: inherit; }
.cine :where(h4) { margin: 0; font-family: var(--cn-body); font-weight: 700; line-height: 1.25; }
.cine :where(p) { margin: 0; }
/* the site's global paragraph and label colours are for its light pages; here text takes its colour from the part it sits in */
.cine :where(p, li, small, label, legend, blockquote, figcaption) { color: inherit; }
.cine :where(a) { color: var(--cn-link); text-underline-offset: .18em; }
.cine :where(button, input, select, textarea) { font: inherit; color: inherit; }
.cine :where(img, video, svg) { max-width: 100%; }
.cine :focus-visible { outline: 3px solid var(--cn-focus); outline-offset: 3px; box-shadow: none; }
.cine .tnum, .cine .cn-num { font-variant-numeric: tabular-nums; }
.cine h1 em, .cine h2 em, .cine h3 em, .cine .cn-em { font-style: italic; font-weight: 520; color: var(--cn-gold-text); white-space: nowrap; }
.cine h1 em, .cine h2 em { position: relative; }
.cine h1 em::after, .cine h2 em::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: .02em; height: .085em; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--cn-gold) 18%, var(--cn-gold) 82%, transparent); opacity: .5; }
.cn-ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.cn-wrap { width: min(100%, var(--cn-maxw)); margin-inline: auto; padding-inline: var(--cn-gutter); box-sizing: border-box; }
.cn-eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: var(--cn-fs-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cn-ink-2); }
.cn-eyebrow .dot { width: .55em; height: .55em; border-radius: 50%; background: var(--cn-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cn-gold) 22%, transparent); }
.cn-lede { font-size: var(--cn-fs-lede); line-height: 1.5; color: var(--cn-ink-2); max-width: 36em; }
.cn-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- buttons ---------- */
.cn-btn { box-sizing: border-box; --b-bg: var(--cn-raise-2); --b-ink: var(--cn-ink); --b-base: rgba(0, 0, 0, .35); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--b-bg); color: var(--b-ink); font-family: var(--cn-body); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 0 var(--b-base); transition: transform .16s var(--cn-out), box-shadow .16s var(--cn-out), background-color .2s; white-space: nowrap; }
.cn-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--b-base); text-decoration: none; color: var(--b-ink); }
.cn-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--b-base); }
.cn-btn .cn-ic { width: 1.15em; height: 1.15em; }
.cn-gold { --b-bg: var(--cn-gold); --b-ink: var(--cn-on-gold); --b-base: var(--cn-gold-base); }
.cn-gold:hover { --b-bg: var(--cn-gold-hi); }
.cn-ghost { --b-bg: transparent; --b-base: transparent; box-shadow: inset 0 0 0 1.5px var(--cn-line-2); }
.cn-ghost:hover, .cn-ghost:active { box-shadow: inset 0 0 0 1.5px var(--cn-ink-2); }
/* v88.11.0: the path colour (--cn-acc: brown for participants, teal for workers) is for step indicators,
   chosen answers and slots, never a button: a main action is .cn-gold, a second one .cn-ghost.
   v88.12.0 (BP2): the one teal button is the support workers' own action where the two ways in sit side by side
   (the home page's worker band, the header's Work with us, the phone menu's doors and the footer): .cn-work */
.cn-work { --b-bg: var(--cn-work-acc); --b-ink: var(--cn-work-on); --b-base: color-mix(in srgb, var(--cn-work-acc) 45%, #000); }
.cn-work:hover { --b-bg: color-mix(in srgb, var(--cn-work-acc) 88%, #fff); }
.cn-sm { min-height: 40px; padding: 0 16px; font-size: var(--cn-fs-small); }
/* touch screens: the small pill is still a 44px target */
@media (pointer: coarse) { .cn-sm { min-height: 44px; } }
.cn-btn[disabled], .cn-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
html.high-contrast[data-look="cinema"] .cn-btn { box-shadow: inset 0 0 0 2px #000; }
html.high-contrast[data-look="cinema"] .cn-gold { --b-bg: #F1BE48; --b-ink: #000; }
.cn-link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--cn-ink); text-decoration: none; border-bottom: 1.5px solid var(--cn-line-2); padding-bottom: 2px; }
.cn-link-arrow .cn-ic { transition: transform .25s var(--cn-spring); }
.cn-link-arrow:hover { border-color: var(--cn-gold); color: var(--cn-ink); }
.cn-link-arrow:hover .cn-ic { transform: translateX(4px); }
.cn-chip { display: inline-flex; align-items: center; gap: .45em; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: var(--cn-fs-small); font-weight: 600; background: color-mix(in srgb, var(--cn-ink) 8%, transparent); color: var(--cn-ink); white-space: nowrap; }
.cn-chip .cn-ic { width: 1.05em; height: 1.05em; }
.cn-tag { display: inline-flex; align-items: center; gap: .35em; font-size: var(--cn-fs-micro); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cn-ink-3); }
.cn-tile { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tile, #203566); color: #fff; font-family: var(--cn-display); font-weight: 600; font-style: italic; font-size: 1.1rem; letter-spacing: -.02em; flex: none; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.cn-tile img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- the site header on these pages ---------- */
html[data-look="cinema"] header.site { background: color-mix(in srgb, var(--cn-bg) 90%, transparent); border-bottom-color: var(--cn-line); }
/* v88.6.0: the site's own dialogs, modals and panels take the Cinema colours too (cinema-site.css),
   so they follow the page's colour scheme; in high contrast they stay the site's light cards */
html.high-contrast[data-look="cinema"] :is(dialog, .modal-overlay, .a11y-panel, .toast) { color-scheme: light; }
/* the reversed logo is for the dark cinema pages only: every other page keeps the usual one */
header.site .cw-brand > img.cn-rev { display: none; }
html[data-look="cinema"] .burger svg, html[data-look="cinema"] .msg-btn svg { stroke: var(--cn-ink); }
html[data-look="cinema"] .msg-btn:hover, html[data-look="cinema"] .burger:hover { background: color-mix(in srgb, var(--cn-ink) 10%, transparent); }
html[data-look="cinema"] .nav-cta .btn-ghost { color: var(--cn-ink); box-shadow: inset 0 0 0 1.5px var(--cn-line-2); }
html[data-look="cinema"] .nav-cta .btn-ghost:hover { background: color-mix(in srgb, var(--cn-ink) 10%, transparent); color: var(--cn-ink); }
html[data-look="cinema"] #btnGetStarted { background: var(--cn-gold); color: var(--cn-on-gold); box-shadow: 0 3px 0 0 var(--cn-gold-base); }
html[data-look="cinema"] #btnGetStarted::before { display: none; }
html[data-look="cinema"] .a11y-open { background: color-mix(in srgb, var(--cn-gold) 18%, transparent); border-color: transparent; color: var(--cn-gold-text); }
html[data-look="cinema"] .a11y-open:hover { background: color-mix(in srgb, var(--cn-gold) 30%, transparent); }
html[data-look="cinema"] .acct-chip { background: var(--cn-raise); border-color: var(--cn-line-2); }
html[data-look="cinema"] .acct-caret { color: var(--cn-ink); }
html[data-look="cinema"] header.site :focus-visible { --focus-color: var(--cn-focus); }
@media (min-width: 1021px) {
  html[data-look="cinema"] nav.main a.nav-link, html[data-look="cinema"] nav.main button.nav-link { color: var(--cn-ink-2); }
  html[data-look="cinema"] nav.main a.nav-link:hover, html[data-look="cinema"] nav.main button.nav-link:hover,
  html[data-look="cinema"] nav.main a.nav-link[aria-current="page"] { color: var(--cn-ink); background: color-mix(in srgb, var(--cn-ink) 10%, transparent); }
}
/* the reversed (light) logo on the dark theme; the light theme keeps the site's own marks */
html[data-look="cinema"]:not([data-cn-theme="light"]):not(.high-contrast) header.site .cw-brand > img.cn-rev { display: block; }
html[data-look="cinema"]:not([data-cn-theme="light"]):not(.high-contrast) header.site .cw-brand > img:not(.cn-rev) { display: none; }
@media (prefers-color-scheme: light) {
  html[data-look="cinema"]:not([data-cn-theme="dark"]):not(.high-contrast) header.site .cw-brand > img.cn-rev { display: none; }
  html[data-look="cinema"]:not([data-cn-theme="dark"]):not(.high-contrast) header.site .cw-brand > img:not(.cn-rev) { display: block; }
}
html.high-contrast[data-look="cinema"] header.site { background: #fff; }
/* signed in on a very narrow phone (320px): the symbol alone, so messages, the account menu and the menu button still fit */
@media (max-width: 360px) { html[data-look="cinema"] header.site:has(#acctWrap:not([hidden])) .cw-brand > img.cw-brand-wordmark { display: none !important; } }

/* ==========================================================================
   The two ways in (the top of the home page). Right for participants and
   families, left for support workers. A sideways track snapped one stop at a
   time, with a phone that travels along and shows each step's page.
   ========================================================================== */
/* v88.13.0 (P9): on a wide screen the first screen ends with the proof strip under the two ways in (.cn-proof), so the
   journey is that much shorter (--jr-proof); on a phone the journey keeps the whole first screen and the strip follows */
.cn-journey { --jr-glide: 1; --jr-top: 184px; --jr-bottom: 86px; --jr-proof: 62px;
  --jw-bg: var(--cn-bg); --jw-ink: var(--cn-ink); --jw-glow: var(--cn-gold); --jw-soft: var(--cn-raise); --jw-acc: var(--cn-gold); --jw-on-acc: #1A1400;
  --jr-stage-ar: 560 / 628; --jr-phone-col: calc((clamp(560px, 100svh - var(--cn-header-h) - var(--jr-proof), 1080px) - var(--jr-top) - var(--jr-bottom)) * 560 / 628);
  position: relative; height: calc(100svh - var(--cn-header-h) - var(--jr-proof)); min-height: 560px; max-height: 1080px; overflow: hidden; isolation: isolate;
  background: var(--jw-bg); color: var(--jw-ink); transition: background-color .7s ease, color .5s ease; }
.cn-journey[data-world="emp"] { --jw-bg: var(--cn-emp-bg); --jw-ink: var(--cn-emp-ink); --jw-glow: var(--cn-emp-glow); --jw-soft: var(--cn-emp-soft); }
.cn-journey[data-world="pc"]  { --jw-bg: var(--cn-pc-bg);  --jw-ink: var(--cn-pc-ink);  --jw-glow: var(--cn-pc-glow);  --jw-soft: var(--cn-pc-soft); }
.cn-journey[data-world="tr"]  { --jw-bg: var(--cn-tr-bg);  --jw-ink: var(--cn-tr-ink);  --jw-glow: var(--cn-tr-glow);  --jw-soft: var(--cn-tr-soft); }
.cn-journey[data-world="dt"]  { --jw-bg: var(--cn-dt-bg);  --jw-ink: var(--cn-dt-ink);  --jw-glow: var(--cn-dt-glow);  --jw-soft: var(--cn-dt-soft); }
.cn-journey[data-world="hh"]  { --jw-bg: var(--cn-hh-bg);  --jw-ink: var(--cn-hh-ink);  --jw-glow: var(--cn-hh-glow);  --jw-soft: var(--cn-hh-soft); }
.cn-journey[data-world="co"]  { --jw-bg: var(--cn-co-bg);  --jw-ink: var(--cn-co-ink);  --jw-glow: var(--cn-co-glow);  --jw-soft: var(--cn-co-soft); }
.cn-journey[data-world="on"]  { --jw-bg: var(--cn-on-bg);  --jw-ink: var(--cn-on-ink);  --jw-glow: var(--cn-on-glow);  --jw-soft: var(--cn-on-soft); }
.cn-journey:not([data-world="jf"]) { --jw-acc: var(--jw-glow); --jw-on-acc: var(--jw-bg); }
.cn-journey .cn-eyebrow { color: color-mix(in srgb, var(--jw-ink) 80%, transparent); }
.jr-glow { position: absolute; top: 0; bottom: 0; left: -30%; right: -30%; pointer-events: none; background: radial-gradient(37.5% 70% at 50% 62%, color-mix(in srgb, var(--jw-acc) 22%, transparent), transparent 70%); will-change: transform; }
.jr-scroller { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; container: jr / size; outline: none; }
.jr-scroller::-webkit-scrollbar { display: none; }
.jr-track { display: flex; height: 100%; width: max-content; }
.jr-group { display: flex; flex: none; height: 100%; }
.jr-work { order: 1; flex-direction: row-reverse; }
.jr-fork { order: 2; }
.jr-part { order: 3; }
.jr-panel { position: relative; flex: none; width: 100cqw; height: 100cqh; box-sizing: border-box; scroll-snap-align: center; scroll-snap-stop: always; display: grid; align-items: center; padding: 28px max(84px, calc(50cqw - 660px + var(--cn-gutter))) var(--jr-bottom); }
.jr-copy { display: grid; gap: 16px; width: min(100%, 540px, 46cqw); align-content: center; }
.jr-panel.is-p .jr-copy { justify-self: start; }
.jr-panel.is-w .jr-copy { justify-self: end; }
.jr-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--cn-fs-small); font-weight: 700; opacity: .92; }
.jr-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--jw-acc); color: var(--jw-on-acc); font-family: var(--cn-display); font-style: italic; font-weight: 600; font-size: 1.05rem; }
.jr-title { font-size: var(--cn-fs-h3); }
.cine .jr-title em, .cine .jr-fork-title em { color: var(--jw-glow); }
.cine .jr-fork .jr-fork-title em { color: var(--cn-gold-text); }
.jr-lede { font-size: var(--cn-fs-lede); line-height: 1.5; max-width: 34em; color: color-mix(in srgb, var(--jw-ink) 86%, transparent); }
.jr-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jr-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 600; }
.jr-points .cn-ic { width: 20px; height: 20px; margin-top: 2px; stroke-width: 3; color: var(--jw-acc); }
.jr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 4px; }
/* v88.13.0 (P1): the step's real action is its filled button (.cn-gold for participants, .cn-work for workers);
   moving the tour on is this quiet text control beside it */
.jr-next { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: color-mix(in srgb, var(--jw-ink) 86%, transparent); font: inherit; font-weight: 700; cursor: pointer; }
.jr-next .cn-ic { width: 18px; height: 18px; stroke-width: 2.4; }
.jr-next:hover { color: var(--jw-ink); text-decoration: underline; text-underline-offset: .25em; }

/* the fork in the middle */
.jr-fork { grid-template-columns: minmax(0, 1fr) var(--jr-phone-col, 300px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(20px, 3cqw, 48px); align-items: center; padding-top: 22px; }
.jr-fork-head { grid-column: 1 / -1; align-self: start; display: grid; justify-items: center; gap: 10px; text-align: center; }
.jr-fork-title { font-size: var(--cn-fs-hero); font-weight: 540; letter-spacing: -.03em; }
/* v88.13.0 (P1): a plain line under the title; the direction line and its two round arrows are gone */
.jr-fork-lede { font-size: var(--cn-fs-lede); font-weight: 500; color: var(--cn-ink-2); }
.jr-way { display: grid; gap: 10px; max-width: 380px; }
.jr-way.is-w { grid-column: 1; justify-self: end; justify-items: end; text-align: right; --jw-acc: var(--cn-work-acc); --jw-on-acc: var(--cn-work-on); }
.jr-way.is-p { grid-column: 3; justify-self: start; justify-items: start; --jw-acc: var(--cn-part-acc); --jw-on-acc: var(--cn-part-on); }
.jr-who { font-size: var(--cn-fs-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jr-way.is-w .jr-who { color: var(--cn-work-text); }
.jr-way.is-p .jr-who { color: var(--cn-part-text); }
.jr-way-t { font-family: var(--cn-display); font-weight: 560; font-size: clamp(1.5rem, 1rem + 1.4cqw, 2.3rem); letter-spacing: -.01em; line-height: 1.05; }
.jr-way-t em { color: var(--jw-acc); font-style: italic; }
.jr-way.is-p .jr-way-t em { color: var(--cn-part-text); }
.jr-way.is-w .jr-way-t em { color: var(--cn-work-text); }
.jr-way-x { opacity: .9; max-width: 30ch; }
.jr-go { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 24px; margin-top: 6px; border: 0; border-radius: 999px; font: inherit; font-weight: 800; font-size: 1.05rem; cursor: pointer; background: var(--jw-acc); color: var(--jw-on-acc); box-shadow: 0 5px 0 color-mix(in srgb, var(--jw-acc) 55%, #000); transition: transform .2s, box-shadow .2s; }
.jr-go .cn-ic { width: 22px; height: 22px; stroke-width: 2.6; transition: transform .35s; }
.jr-go:hover { transform: translateY(-2px); }
.jr-go.is-w:hover .cn-ic { transform: translateX(-5px); }
.jr-go.is-p:hover .cn-ic { transform: translateX(5px); }
.jr-go:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--jw-acc) 55%, #000); }
.jr-hint { position: absolute; top: 58%; display: flex; opacity: .8; pointer-events: none; }
.jr-hint .cn-ic { width: 28px; height: 28px; margin: 0 -8px; stroke-width: 2.4; }
.jr-hint.l { left: 14px; color: var(--cn-work-text); }
.jr-hint.r { right: 14px; color: var(--cn-part-text); }
.jr-hint.l .cn-ic { animation: jr-chev-l 1.8s ease-in-out infinite; }
.jr-hint.r .cn-ic { animation: jr-chev-r 1.8s ease-in-out infinite; }
.jr-hint .cn-ic:nth-child(2) { animation-delay: .15s; } .jr-hint .cn-ic:nth-child(3) { animation-delay: .3s; }
.jr-hint.l .cn-ic:nth-child(1) { animation-delay: .3s; } .jr-hint.l .cn-ic:nth-child(3) { animation-delay: 0s; }
@keyframes jr-chev-r { 0%, 100% { opacity: .2; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes jr-chev-l { 0%, 100% { opacity: .2; transform: translateX(4px); } 50% { opacity: 1; transform: translateX(-4px); } }

/* the phone, gliding to the side away from the words */
.jr-stage { position: absolute; z-index: 3; left: 50%; top: var(--jr-top); bottom: var(--jr-bottom); aspect-ratio: var(--jr-stage-ar); transform-origin: 50% 50%; transform: translateX(-50%); pointer-events: none; will-change: transform; }
.jr-stage .aj { position: relative; width: 100%; height: 100%; container-type: inline-size; font-size: clamp(10px, 2.7cqw, 15px); }
.aj-glow { position: absolute; inset: 4% -12%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--jw-glow) 55%, transparent), transparent 72%); filter: blur(34px); opacity: .75; pointer-events: none; }
.aj-orbit { position: absolute; left: 50%; top: 50%; width: 96cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jw-ink) 16%, transparent); pointer-events: none; }
.aj-orbit::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--jw-glow) 55%, transparent); }
.cn-phone { position: absolute; z-index: 7; left: 50%; top: 0; bottom: 0; height: 100%; aspect-ratio: 290 / 628; transform: translateX(-50%); box-sizing: border-box; border-radius: 13% / 6%; background: #03050F; box-shadow: 0 50px 80px -34px rgba(0, 0, 0, .85), 0 16px 34px -18px rgba(0, 0, 0, .7), inset 0 0 0 1.5px #2E3766, 0 0 0 1px rgba(255, 255, 255, .05); }
.cn-phone::before { content: ""; position: absolute; right: -3px; top: 22%; width: 3px; height: 10%; border-radius: 0 3px 3px 0; background: #1E2650; }
.cn-phone .scr { position: absolute; inset: 2.6%; border-radius: 11% / 5.2%; overflow: hidden; background: var(--cn-bg); isolation: isolate; }
.cn-phone .island { position: absolute; z-index: 10; top: 3.6%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.aj .float { position: absolute; z-index: 8; opacity: 0; transform: translateY(18px) scale(.94); transition: opacity .45s var(--cn-out), transform .6s var(--cn-spring); pointer-events: none; }
.aj .fset.on .float { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 90ms + 250ms); }
.aj .pos-a { left: -10%; bottom: 24%; }
.aj .pos-b { right: -12%; top: 30%; }
.aj .pos-c { right: -9%; bottom: 12%; }
.cn-journey[data-side="f"] .aj .pos-a { left: -4%; }
.cn-journey[data-side="f"] .aj .pos-b, .cn-journey[data-side="f"] .aj .pos-c { right: -4%; }
.aj-card { display: grid; grid-template-columns: 2.7em minmax(0, 1fr); gap: .25em .75em; align-items: center; width: 15.5em; box-sizing: border-box; padding: .85em 1em; border-radius: 1.15em; background: var(--cn-glass); color: var(--cn-ink); box-shadow: var(--cn-shadow-md), inset 0 0 0 1px var(--cn-line); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.aj-card .cn-tile { grid-row: span 2; width: 2.7em; height: 2.7em; border-radius: .85em; font-size: 1em; }
.aj-card .l1 { font-size: .72em; letter-spacing: .06em; text-transform: uppercase; color: var(--cn-ink-3); font-weight: 700; }
.aj-card .l2 { font-size: .92em; font-weight: 700; line-height: 1.25; }
.aj-card .l3 { grid-column: 1 / -1; display: flex; align-items: center; gap: .5em; margin-top: .5em; padding-top: .6em; border-top: 1px solid var(--cn-line); font-size: .82em; color: var(--cn-ink-2); }
.aj-card .l3 .cn-ic { color: var(--jw-glow); }
.aj-chip { display: inline-flex; align-items: center; gap: .55em; min-height: 2.6em; padding: 0 1.05em; border-radius: 999px; background: var(--jw-glow); color: var(--jw-bg); font-weight: 700; font-size: .92em; white-space: nowrap; box-shadow: var(--cn-shadow-md); }
.aj-chip .cn-ic { width: 1.15em; height: 1.15em; }
.cn-journey[data-world="jf"] .aj-chip { background: var(--cn-gold); color: #1A1400; }

/* arrows at the edges, and the dots */
.jr-edge { position: absolute; z-index: 5; top: calc(50% - 10px); display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; font-size: var(--cn-fs-small); cursor: pointer; }
.jr-edge[hidden] { display: none; }
.jr-edge.l { left: 12px; }
.jr-edge.r { right: 12px; }
.jr-edge-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--jw-ink) 10%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jw-ink) 22%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s, background-color .2s; }
.jr-edge-ic .cn-ic { width: 24px; height: 24px; stroke-width: 2.6; }
.jr-edge:hover .jr-edge-ic { background: var(--jw-acc); color: var(--jw-on-acc); box-shadow: none; }
.jr-edge.l:hover .jr-edge-ic { transform: translateX(-3px); }
.jr-edge.r:hover .jr-edge-ic { transform: translateX(3px); }
.jr-edge-l { max-width: 7.5em; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--jw-bg) 70%, transparent); line-height: 1.2; text-align: center; opacity: 0; transform: scale(.94); transition: opacity .25s, transform .25s; }
.jr-edge:hover .jr-edge-l, .jr-edge:focus-visible .jr-edge-l { opacity: 1; transform: none; }
.jr-pager { position: absolute; z-index: 5; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--jw-ink) 10%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap; }
.jr-pg-side { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cn-fs-micro); font-weight: 800; letter-spacing: .02em; }
.jr-pg-side .cn-ic { width: 16px; height: 16px; }
/* v88.13.0 (P1): every dot is a 24px target (WCAG 2.5.8) with the dot drawn inside it; the dots are 55% ink, 3:1 on
   the pager in every world (WCAG 1.4.11), and the current one is a longer bar in full ink */
.jr-dots { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.jr-dots li { display: flex; }
.jr-dots button { position: relative; display: block; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 99px; background: transparent; cursor: pointer; transition: width .45s cubic-bezier(.34, 1.56, .64, 1); }
.jr-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 99px; background: color-mix(in srgb, var(--jw-ink) 55%, transparent); transition: width .45s cubic-bezier(.34, 1.56, .64, 1), background-color .3s; }
.jr-dots button.is-fork::before { width: 14px; height: 14px; background: transparent; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--jw-ink) 55%, transparent); }
.jr-dots button:hover::before { background: color-mix(in srgb, var(--jw-ink) 80%, transparent); }
.jr-dots button[aria-current] { width: 34px; }
.jr-dots button[aria-current]::before { width: 26px; background: var(--jw-ink); }
.jr-dots button.is-fork[aria-current] { width: 24px; }
.jr-dots button.is-fork[aria-current]::before { width: 16px; height: 16px; background: var(--cn-gold); box-shadow: none; }
/* before the script runs (and without it), the two ways in are two plain links */
.jr-static { display: grid; gap: 22px; justify-items: center; align-content: center; min-height: 100%; padding: 40px var(--cn-gutter); text-align: center; }
.jr-static .jr-static-ways { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* phones and narrow windows: words on top, the phone below */
@media (max-width: 900px) {
  .cn-journey { --jr-glide: 0; --jr-top: 316px; --jr-bottom: 74px; --jr-proof: 0px; min-height: 640px; }
  .jr-panel { align-items: start; padding: 22px var(--cn-gutter) var(--jr-bottom); }
  .jr-copy { width: 100%; gap: 10px; }
  .jr-title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.3rem); }
  .jr-lede { font-size: 1rem; }
  .jr-points { display: none; }
  .jr-panel.is-w .jr-copy, .jr-panel.is-p .jr-copy { justify-self: stretch; }
  .jr-fork { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 14px; align-content: start; align-items: start; padding-top: 18px; }
  .jr-fork-head { gap: 6px; }
  .jr-fork-title { font-size: clamp(1.9rem, 1.3rem + 3vw, 2.6rem); }
  .jr-fork-lede { font-size: .98rem; }
  .jr-way { max-width: none; gap: 6px; align-self: stretch; align-content: space-between; }
  .jr-way.is-w { grid-column: 1; grid-row: 2; justify-self: stretch; justify-items: start; text-align: left; }
  .jr-way.is-p { grid-column: 2; grid-row: 2; justify-self: stretch; justify-items: end; text-align: right; }
  .jr-way-t, .jr-way-x { display: none; }
  .jr-go { width: 100%; justify-content: center; min-height: 52px; padding: 0 14px; font-size: .98rem; }
  .jr-hint { top: auto; bottom: 40%; }
  .jr-edge { display: none; }
  /* v88.13.0 (P1): the fourteen 24px dots fill the pager on a phone (its two arrow buttons are gone); a swipe, a dot
     and each step's Next step move the tour */
  .jr-pg-side { display: none; }
  .jr-pager { bottom: 12px; padding: 4px 8px; gap: 0; }
  .aj .pos-c { display: none; }
  .aj .pos-b, .cn-journey[data-side="f"] .aj .pos-b { right: -1%; top: 26%; }
  .aj .pos-a, .cn-journey[data-side="f"] .aj .pos-a { left: -1%; bottom: 16%; }
  .aj-chip { white-space: normal; max-width: 36cqw; min-height: 0; padding: .55em .9em; border-radius: 1.1em; line-height: 1.2; }
  .aj-card { width: 13.5em; }
}
@media (max-width: 900px) and (max-height: 700px) { .cn-journey { --jr-top: 290px; } .jr-lede { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
/* v88.13.0 (P1): on the narrowest phones (under 375px) the dots' targets step down a little so all fourteen still fit */
@media (max-width: 374px) { .jr-dots button { width: 22px; } .jr-dots button[aria-current] { width: 30px; } .jr-dots button[aria-current]::before { width: 22px; } .jr-dots button.is-fork[aria-current] { width: 22px; } }
@media (max-width: 339px) { .jr-dots button { width: 20px; } .jr-dots button[aria-current] { width: 26px; } .jr-dots button[aria-current]::before { width: 18px; } .jr-dots button.is-fork[aria-current] { width: 20px; } }
@media (min-width: 901px) and (max-height: 760px) { .cn-journey { --jr-top: 150px; --jr-bottom: 74px; } .jr-fork-title { font-size: clamp(2rem, 1rem + 2.4cqw, 3.2rem); } .jr-points { display: none; } }

/* ---------- the phone's screen: pages of this site at phone width (390px) ---------- */
.pocket { position: absolute; inset: 0; overflow: hidden; container: pocket / inline-size; background: var(--cn-bg); color: var(--cn-ink); font-family: var(--cn-body); font-size: var(--cn-fs-body); font-weight: 400; line-height: 1.55; letter-spacing: normal; text-align: left; }
.pk-sb { position: absolute; left: 0; right: 0; top: 0; z-index: 6; height: 12.6cqw; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; padding: 1.4cqw 8cqw 0 10cqw; background: var(--cn-bg); color: var(--cn-ink); font: 700 4.3cqw/1 var(--cn-body); }
.pk-sb .r { display: flex; align-items: center; gap: 1.3cqw; }
.pk-sb .cn-ic { width: 4.9cqw; height: 4.9cqw; stroke-width: 2.4; }
.pk-vp { position: absolute; left: 0; right: 0; top: 12.6cqw; bottom: 0; overflow: hidden; }
.pk-page { position: absolute; inset: 0; overflow: hidden; background: var(--cn-bg); visibility: hidden; contain: strict; }
.pk-page.on { visibility: visible; }
.pk-page.in { z-index: 2; box-shadow: -2cqw 0 6cqw rgba(0, 0, 0, .45); }
.pk-page.in.from-left { box-shadow: 2cqw 0 6cqw rgba(0, 0, 0, .45); }
.pk-scale { position: absolute; left: 0; top: 0; width: 390px; transform: scale(var(--k, .5)); transform-origin: 0 0; container: page / inline-size; }
.pk-hdr { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.pk-scroll { padding-top: 64px; }
.pk-page.on .pk-scroll { will-change: transform; }
.pk-shade { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; pointer-events: none; }
.pk-bar { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; box-sizing: border-box; background: color-mix(in srgb, var(--cn-bg) 94%, transparent); border-bottom: 1px solid var(--cn-line); }
.pk-bar img { height: 30px; width: auto; }
.pk-bar .pk-word { height: 20px; }
.pk-bar .pk-r { margin-left: auto; display: flex; gap: 8px; }
.pk-bar .pk-r span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cn-ink) 8%, transparent); color: var(--cn-ink); }
.pk-bar .pk-r span.a { background: color-mix(in srgb, var(--cn-gold) 18%, transparent); color: var(--cn-gold-text); }
.pk-bar .pk-r .cn-ic { width: 20px; height: 20px; }
.pk-bar .pk-light { display: none; }
@media (prefers-color-scheme: light) { html[data-look="cinema"]:not([data-cn-theme="dark"]) .pk-bar .pk-light { display: block; } html[data-look="cinema"]:not([data-cn-theme="dark"]) .pk-bar .pk-dark { display: none; } }
html[data-look="cinema"][data-cn-theme="light"] .pk-bar .pk-light, html.high-contrast[data-look="cinema"] .pk-bar .pk-light { display: block; }
html[data-look="cinema"][data-cn-theme="light"] .pk-bar .pk-dark, html.high-contrast[data-look="cinema"] .pk-bar .pk-dark { display: none; }
.pk-view { padding: 0 16px 24px; }
/* inside the phone the page moves by transform, so nothing can stick */
.pk-scroll .stp-actions, .pk-scroll .stp-side, .pk-scroll .pv-card { position: static; }

/* ==========================================================================
   Below the two ways in: the words, the suburb search and the trust points.
   v88.9.1: the films moved into the Seven kinds of support (home-kinds.css); the reel's
   rules below (.cn-screen, .cn-ticks) have nothing to draw on the home page any more.
   ========================================================================== */
/* v88.13.0 (P9): the proof strip right under the two ways in: the registration number, every worker employed and
   insured, prices at the NDIA limits. One row on a wide screen (62px, the --jr-proof the journey leaves for it), a
   short list on a phone */
.cn-proof { background: var(--cn-raise); border-block: 1px solid var(--cn-line); }
.cn-proof ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 48px; margin: 0; padding: 11px 0; list-style: none; }
.cn-proof li { display: flex; align-items: center; gap: 12px; color: var(--cn-ink); }
.cn-proof .pf-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cn-gold) 24%, transparent); color: var(--cn-gold-text); }
.cn-proof .pf-ic .cn-ic { width: 20px; height: 20px; stroke-width: 2.2; }
.cn-proof b { display: block; font-size: .97rem; line-height: 1.25; }
.cn-proof small { display: block; color: var(--cn-ink-3); font-size: .8125rem; line-height: 1.3; }
@container page (max-width: 640px) { .cn-proof ul { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 0; } }
.cn-films { position: relative; overflow: clip; padding-block: clamp(64px, 8cqw, 120px) clamp(56px, 7cqw, 110px); }
.cn-films-glow { position: absolute; inset: -20% -10% auto 30%; height: 120%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hero-glow, var(--cn-emp-glow)) 38%, transparent), transparent 70%); filter: blur(30px); opacity: .55; transition: background 1.2s var(--cn-cine); pointer-events: none; }
.cn-films .cn-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 11fr); gap: clamp(28px, 5cqw, 88px); align-items: center; }
.cn-films-copy { display: grid; gap: 26px; align-content: start; }
.cn-films-act { display: grid; gap: 22px; align-content: start; min-width: 0; }
.cn-films-act .cn-search { max-width: none; }
.cn-nw { white-space: nowrap; }
.cn-films h2 { font-size: var(--cn-fs-h2); font-weight: 540; letter-spacing: -.035em; line-height: .98; }
.cn-films h2 .quiet { display: block; margin-top: .34em; font-size: .46em; line-height: 1.1; letter-spacing: -.015em; color: var(--cn-ink-2); font-weight: 420; }
.cn-search { display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: var(--cn-raise); box-shadow: inset 0 0 0 1.5px var(--cn-field), var(--cn-shadow-md); max-width: 560px; }
.cn-search label { display: flex; align-items: center; flex: none; padding-left: 14px; color: var(--cn-ink-3); }
.cine .cn-search input { flex: 1; min-width: 0; min-height: 48px; border: 0 !important; background: transparent; font-size: 1.0625rem; color: var(--cn-ink); padding: 0; }
.cn-search input::placeholder { color: var(--cn-ink-3); opacity: 1; }
.cine .cn-search input:focus { outline: none; }
.cn-search:focus-within { box-shadow: inset 0 0 0 2px var(--cn-focus), var(--cn-shadow-md); }
.cn-films-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.cn-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 4px 0 0; list-style: none; font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.cn-trust li { display: inline-flex; align-items: center; gap: 8px; }
.cn-trust .cn-ic { color: var(--cn-gold-text); }
.cn-screen { position: relative; aspect-ratio: 16 / 10; max-width: 100%; border-radius: var(--cn-r-xl); overflow: hidden; background: #05081C; box-shadow: var(--cn-shadow-lg), 0 0 0 1px rgba(255, 255, 255, .06); isolation: isolate; }
.cn-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -120px 120px -60px rgba(5, 8, 28, .75); z-index: 3; }
.cn-screen .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--cn-cine); }
.cn-screen .layer.on { opacity: 1; }
.cn-screen video, .cn-screen img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-screen .caption { position: absolute; left: 20px; bottom: 18px; right: 20px; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; color: #F4EFE4; }
.cn-now { display: grid; gap: 4px; }
.cn-now .k { font-size: var(--cn-fs-micro); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.cn-now .t { font-family: var(--cn-display); font-size: clamp(1.2rem, .9rem + 1cqw, 1.7rem); font-weight: 520; line-height: 1.1; }
.cn-tc { font-family: var(--cn-mono); font-size: var(--cn-fs-micro); opacity: .92; font-variant-numeric: tabular-nums; }
.cn-screen-ctl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 0; background: rgba(8, 12, 36, .66); color: #F4EFE4; font-weight: 700; cursor: pointer; flex: none; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cn-screen-ctl:hover { background: rgba(8, 12, 36, .84); }
.cine .cn-screen-ctl:focus-visible { outline-color: #F7D27A; }
.cn-ticks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.cn-ticks button { display: grid; gap: 8px; width: 100%; padding: 6px 0; border: 0; background: none; color: var(--cn-ink-3); font-size: var(--cn-fs-micro); font-weight: 600; text-align: left; cursor: pointer; }
.cn-ticks .bar { height: 4px; border-radius: 99px; background: var(--cn-line-2); overflow: hidden; }
.cn-ticks .bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--cn-gold); border-radius: inherit; }
.cn-ticks button[aria-current], .cn-ticks button:hover { color: var(--cn-ink); }
@container page (max-width: 960px) { .cn-films .cn-wrap { grid-template-columns: minmax(0, 1fr); } .cn-films-glow { inset: 30% -30% auto -30%; } }
@container page (max-width: 640px) { .cn-ticks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cn-screen { border-radius: var(--cn-r-l); } }
@container page (max-width: 520px) { .cn-search { flex-wrap: wrap; border-radius: var(--cn-r-l); } .cn-search input { flex: 1 1 60%; } .cn-search .cn-btn { width: 100%; } }

/* ==========================================================================
   The rest of the home page, in the same light
   ========================================================================== */
.cn-sec { padding-block: clamp(64px, 8cqw, 120px); }
.cn-sec + .cn-sec { padding-top: 0; }
.cn-head { display: grid; gap: 16px; max-width: 52rem; margin-bottom: clamp(30px, 4.5cqw, 56px); }
.cn-head h2 { font-size: var(--cn-fs-h2); }
.cn-head.cn-split { max-width: none; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; gap: 28px; }
@container page (max-width: 860px) { .cn-head.cn-split { grid-template-columns: minmax(0, 1fr); } }
.cn-center { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(24px, 3cqw, 36px); }

/* seven kinds of support: the site's own service cards, restyled */
.cine .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cine .service-card { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: var(--cn-r-l); background: var(--cn-raise); color: var(--cn-ink); border: 0; box-shadow: inset 0 0 0 1px var(--cn-line); text-decoration: none; transition: box-shadow .25s, transform .3s var(--cn-spring); }
.cine .service-card:hover { box-shadow: inset 0 0 0 1.5px var(--cn-gold), var(--cn-shadow-md); transform: translateY(-3px); color: var(--cn-ink); }
.cine .service-card h3 { font-size: 1.45rem; color: var(--cn-ink); }
.cine .service-card p { color: var(--cn-ink-2); font-size: var(--cn-fs-small); }
.cine .service-card .code { font-size: var(--cn-fs-micro); font-weight: 700; letter-spacing: .04em; color: var(--cn-ink-3); }
.cine .service-card .go { font-weight: 800; color: var(--cn-gold-text); }
.cine .service-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--cn-gold) 16%, transparent) !important; color: var(--cn-gold-text) !important; }
.cine .service-icon svg { width: 24px; height: 24px; }

/* fair and transparent */
.cn-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4cqw, 60px); align-items: center; padding: clamp(24px, 4cqw, 48px); border-radius: var(--cn-r-xl); background: var(--cn-raise); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cn-band h2 { font-size: var(--cn-fs-h2); }
.cn-band-copy { display: grid; gap: 18px; align-content: start; }
.cn-ticklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cn-ticklist li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--cn-ink-2); }
.cn-ticklist li b { color: var(--cn-ink); }
.cn-ticklist .cn-ic { width: 20px; height: 20px; color: var(--cn-ok); stroke-width: 3; margin-top: 2px; }
.cn-meter { display: grid; gap: 0; border-radius: var(--cn-r-l); overflow: hidden; background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cn-meter .mh { padding: 14px 18px; font-size: var(--cn-fs-micro); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cn-ink-2); border-bottom: 1px solid var(--cn-line); }
.cn-meter .mr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--cn-line); color: var(--cn-ink-2); }
.cn-meter .mr:last-child { border-bottom: 0; }
.cn-meter .mr small { display: block; font-size: var(--cn-fs-micro); color: var(--cn-ink-3); }
.cn-meter .mr b { font-family: var(--cn-display); font-size: 1.35rem; font-weight: 560; color: var(--cn-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cn-meter .mr b.big { font-size: 2rem; color: var(--cn-gold-text); }
.cn-meter .mr b.good { color: var(--cn-ok); }
@container page (max-width: 860px) { .cn-band { grid-template-columns: minmax(0, 1fr); } }

/* the site's own worker cards, restyled */
/* v88.10.0: three even columns across the whole width (auto-fill left an empty fourth column), so the button sits centred under the cards */
.cine .worker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@container page (max-width: 960px) { .cine .worker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container page (max-width: 620px) { .cine .worker-grid { grid-template-columns: minmax(0, 1fr); } }
.cine .worker-card { background: var(--cn-raise); color: var(--cn-ink); border: 0; border-radius: var(--cn-r-l); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cine .worker-card .wc-name { color: var(--cn-ink); font-family: var(--cn-display); font-weight: 560; font-size: 1.3rem; }
.cine .worker-card .wc-meta, .cine .worker-card .wc-bio, .cine .worker-card .muted-sm { color: var(--cn-ink-2) !important; }
.cine .worker-card .wc-tag, .cine .worker-card .wc-int { background: color-mix(in srgb, var(--cn-ink) 8%, transparent); border-color: transparent; color: var(--cn-ink); }
.cine .worker-card .wc-foot { border-top-color: var(--cn-line); }
.cine .worker-card .wc-rate { color: var(--cn-ink-2); }
.cine .worker-card .wc-rate b { color: var(--cn-ink); }
.cine .worker-card .btn-secondary { background: transparent; color: var(--cn-ink); border-color: var(--cn-line-2); }
.cine .worker-card .btn-secondary:hover { background: color-mix(in srgb, var(--cn-ink) 10%, transparent); color: var(--cn-ink); }
/* v88.15.0 (BP4): the proof layer on the home page's workers: the rating on its own line, counted as what it is, and the
   checks with their valid-to dates (the site's demo marking, the amber open shield, on a demonstration profile) */
.cine .worker-card .wc-rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .9375rem; color: var(--cn-ink-2); }
.cine .worker-card .wc-rating b { font-family: var(--cn-display); font-size: 1.15rem; font-weight: 600; color: var(--cn-ink); }
.cine .wc-proof { padding: 12px 14px; border-radius: 14px; background: var(--cn-raise-2); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cine .wc-proof-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 6px; }
.cine .wc-proof-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--cn-ink-2); }
.cine .wc-proof .cred-badge { margin-left: 0; }
.cine .wc-proof ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cine .wc-proof li { display: flex; align-items: center; gap: 8px; font-size: .875rem; line-height: 1.35; color: var(--cn-ink); }
.cine .wc-proof li > svg { width: 16px; height: 16px; flex: none; color: var(--cn-ok); }
.cine .wc-proof.is-demo li > svg { color: var(--cn-gold-text); }
.cine .wc-proof-to { margin-left: auto; padding-left: 8px; white-space: nowrap; color: var(--cn-ink-3); font-variant-numeric: tabular-nums; }
.cine .wc-proof-emp { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cn-line); font-size: .8125rem; color: var(--cn-ink-2); }
/* the site's one empty state on a Cinema page (the skin leaves .cine to this file): where written reviews will go */
.cine .empty-state { background: var(--cn-raise); border-color: var(--cn-line-2); color: var(--cn-ink-2); }
.cine .empty-state > .cn-ic { color: var(--cn-gold-text); }
.cine .empty-state :is(h2, h3) { color: var(--cn-ink); }
.cine .cn-reviews-empty { margin-top: clamp(28px, 4cqw, 44px); }
.cine .cn-reviews-empty p { max-width: 64ch; }
.cine .demo-note { margin: 0; padding: 10px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--cn-gold) 45%, transparent); background: color-mix(in srgb, var(--cn-gold) 12%, var(--cn-raise)); color: var(--cn-ink); }
.cine .demo-note b { color: inherit; }

/* v88.13.0 (P9): made-up scenarios, not reviews: an icon and a plain description as the card's title (.cw-card-title),
   in the reading font, with no names, initials or quotation marks */
.cn-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cn-story { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: var(--cn-r-l); background: var(--cn-raise); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cn-story .sc-head { display: flex; align-items: center; gap: 14px; }
.cn-story .sc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--cn-gold) 22%, transparent); color: var(--cn-gold-text); }
.cn-story .sc-ic .cn-ic { width: 24px; height: 24px; stroke-width: 2; }
.cn-story .sc-head h3 { margin-top: 2px; }
.cn-story > p { font-size: 1.0625rem; line-height: 1.55; color: var(--cn-ink-2); }
@container page (max-width: 900px) { .cn-stories { grid-template-columns: minmax(0, 1fr); } }

/* for support workers */
.cn-workband { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 40px; align-items: center; padding: clamp(26px, 4cqw, 52px); border-radius: var(--cn-r-xl); background: var(--cn-emp-bg); color: var(--cn-emp-ink); }
.cn-workband h2 { font-size: var(--cn-fs-h3); }
.cine .cn-workband h2 em { color: var(--cn-emp-glow); }
.cine .cn-workband h2 em::after { background: linear-gradient(90deg, transparent, var(--cn-emp-glow) 18%, var(--cn-emp-glow) 82%, transparent); }
.cn-workband p { color: color-mix(in srgb, var(--cn-emp-ink) 86%, transparent); max-width: 46ch; margin-top: 12px; }
.cn-workband .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.cn-workband .cn-ghost { --b-ink: var(--cn-emp-ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cn-emp-ink) 40%, transparent); }
@container page (max-width: 760px) { .cn-workband { grid-template-columns: minmax(0, 1fr); } }

/* questions, answered: the site's own FAQ items */
.cn-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 4cqw, 64px); align-items: start; }
.cn-faq-aside { display: grid; gap: 16px; position: sticky; top: calc(var(--cn-header-h) + 24px); }
.cn-faq-aside h2 { font-size: var(--cn-fs-h2); }
.cine .faq-list { display: grid; gap: 10px; }
.cine .faq-item { background: var(--cn-raise); color: var(--cn-ink); border: 0; border-radius: var(--cn-r-m); box-shadow: inset 0 0 0 1px var(--cn-line); }
.cine .faq-item summary { color: var(--cn-ink); font-weight: 700; }
.cine .faq-item .faq-body { color: var(--cn-ink-2); }
.cine .faq-item .plus { color: var(--cn-gold-text); }
.cine .faq-item a { color: var(--cn-link); }
@container page (max-width: 860px) { .cn-faq { grid-template-columns: minmax(0, 1fr); } .cn-faq-aside { position: static; } }

/* ==========================================================================
   Get started: which way are you going?
   ========================================================================== */
.cn-fork-page { padding-block: clamp(28px, 5cqw, 64px) clamp(48px, 7cqw, 96px); }
.fork-page { display: grid; gap: clamp(20px, 3cqw, 32px); }
.fork-head { display: grid; gap: 12px; justify-items: center; text-align: center; }
.fork-head h1 { font-size: clamp(2.2rem, 1.3rem + 3cqw, 3.8rem); }
.fork-head .cn-lede { text-align: center; }
.fork-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2cqw, 24px); }
.fork-card { position: relative; display: grid; gap: 12px; align-content: start; padding: clamp(20px, 3cqw, 32px); border-radius: var(--cn-r-xl); text-decoration: none; transition: transform .45s var(--cn-spring), box-shadow .3s; }
.cine .fork-card.is-part { background: var(--cn-dt-bg); color: var(--cn-dt-ink); }
.cine .fork-card.is-worker { order: -1; background: var(--cn-emp-bg); color: var(--cn-emp-ink); }
.fork-card:hover { box-shadow: var(--cn-shadow-md); }
.fork-card.is-part:hover { transform: translateX(6px); }
.fork-card.is-worker:hover { transform: translateX(-6px); }
.fc-arrow { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: currentColor; }
.fc-arrow .cn-ic { width: 30px; height: 30px; stroke-width: 2.6; }
.fork-card.is-part .fc-arrow { justify-self: end; }
.fork-card.is-part .fc-arrow .cn-ic { color: var(--cn-dt-bg); }
.fork-card.is-worker .fc-arrow .cn-ic { color: var(--cn-emp-bg); }
.fork-card .who { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.fork-card > b { font-family: var(--cn-display); font-weight: 560; font-size: clamp(1.6rem, 1.2rem + 1.3cqw, 2.3rem); letter-spacing: -.01em; line-height: 1.05; }
.fork-card > b em { font-style: italic; }
.fork-card .fc-text { opacity: .92; max-width: 34ch; }
.fc-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.fc-steps li { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: .8rem; font-weight: 700; }
.fc-steps .cn-ic { width: 14px; height: 14px; }
.fc-go { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 800; }
/* v88.11.0: each way's button in its path colour, as on the home page's first screen: gold for participants
   and families, teal for support workers (the only pages with path-coloured buttons) */
.cine .fork-card.is-part .fc-go { background: var(--cn-part-acc); color: var(--cn-part-on); box-shadow: 0 4px 0 0 var(--cn-gold-base); }
.cine .fork-card.is-worker .fc-go { background: var(--cn-work-acc); color: var(--cn-work-on); box-shadow: 0 4px 0 0 color-mix(in srgb, var(--cn-work-acc) 55%, #000); }
html.high-contrast[data-look="cinema"] .fork-card .fc-go { box-shadow: none; }
.fork-card:focus-visible { outline: 3px solid var(--cn-focus); outline-offset: 4px; }
.fork-foot { text-align: center; font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.fork-foot button { border: 0; background: none; padding: 0; color: var(--cn-link); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
@container page (max-width: 640px) { .fork-grid { grid-template-columns: minmax(0, 1fr); } .fork-card.is-worker { order: 0; } }
/* v88.13.0 (P8): on a phone both ways and both buttons fit on the first screen: compact cards (a small arrow in the
   corner, no step chips, the one line of words), a smaller heading and tighter gaps. The fork in the home page's
   phone is drawn at phone width, so it shows the same. */
@container page (max-width: 640px) {
  .fork-page { gap: 16px; }
  .fork-head { gap: 6px; }
  .fork-head h1 { font-size: 2rem; }
  .fork-head .cn-lede { font-size: 1rem; }
  .fork-grid { gap: 12px; }
  .fork-card { gap: 4px; padding: 16px 18px 18px; border-radius: 22px; }
  .fc-arrow { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; }
  .fc-arrow .cn-ic { width: 20px; height: 20px; }
  .fc-steps { display: none; }
  .fork-card .who, .fork-card > b { padding-right: 44px; }
  .fork-card > b { font-size: 1.45rem; }
  .fork-card .fc-text { font-size: .95rem; line-height: 1.45; }
  .fc-go { margin-top: 8px; min-height: 44px; }
  .fork-foot { margin-top: -2px; }
}
@media (max-width: 640px) { .cn-fork-page { padding-block: 14px 40px; } }
/* v88.13.0 (P8): the line under the cards ("Already have an account? Log in · Or look around first"): each of its two
   targets is a 24px box that never breaks across lines (WCAG 2.5.8; on a 360px phone the link broke under Log in) */
.fork-page .fork-foot :is(button, a) { display: inline-block; min-height: 24px; line-height: 24px; }

/* ==========================================================================
   The step pages: right for participants (#/join/...), left for support
   workers (#/work/...). Real forms, real answers from the server.
   ========================================================================== */
.cn-steps-page { padding-block: 18px clamp(48px, 7cqw, 96px); }
.stp { display: grid; gap: 22px; padding-block: 14px 8px; }
.stp[data-path="work"] { --cn-acc: var(--cn-work-acc); --cn-acc-ink: var(--cn-work-on); --cn-acc-text: var(--cn-work-text); }
.stp h1 { font-size: clamp(2rem, 1.3rem + 2.4cqw, 3.3rem); }
.stp h2 { font-size: 1.45rem; }
.stp .cn-lede { max-width: 38em; }

/* the step bar */
.stp-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 22px; padding: 10px 12px 10px 10px; border-radius: var(--cn-r-l); background: var(--cn-raise); box-shadow: inset 0 0 0 1px var(--cn-line); }
.stp-fork { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--cn-raise-2); color: var(--cn-ink); text-decoration: none; font-weight: 700; font-size: var(--cn-fs-small); white-space: nowrap; }
.cine .stp-fork { color: var(--cn-ink); }
.stp-fork .cn-ic { color: var(--cn-acc-text); }
.stp-fork { max-width: 100%; box-sizing: border-box; }
@container page (max-width: 380px) { .stp-fork { white-space: normal; line-height: 1.2; padding-block: 6px; } }
.stp-fork small { margin-left: 2px; padding: 2px 8px; border-radius: 99px; background: var(--cn-raise); color: var(--cn-ink-2); font-size: .75rem; font-weight: 700; }
.stp-count { display: none; gap: 6px; font-size: var(--cn-fs-small); font-weight: 700; color: var(--cn-ink-2); }
.cn-bar { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--cn-raise-2); overflow: hidden; }
.cn-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--cn-acc); }
.stp-track { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.stp-track li { position: relative; }
.stp-track li + li::before { content: ""; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--cn-line-2); z-index: 0; }
.stp-track li.is-done + li::before, .stp-track li.is-done + li.is-current::before { background: var(--cn-ok); }
.stp-track a { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding: 2px 2px 4px; color: var(--cn-ink-3); text-decoration: none; font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.2; border-radius: 10px; }
.cine .stp-track a { color: var(--cn-ink-3); }
.stp-track .n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-raise); box-shadow: inset 0 0 0 2px var(--cn-line-2); color: var(--cn-ink-2); font-size: .85rem; font-weight: 800; transition: transform .3s; }
.stp-track .n .cn-ic { width: 16px; height: 16px; stroke-width: 3; }
.stp-track a:hover .n { transform: scale(1.08); }
.cine .stp-track .is-done a { color: var(--cn-ink-2); }
.stp-track .is-done .n { background: var(--cn-ok); color: var(--cn-on-ok); box-shadow: none; }
.stp-track .is-office .n { box-shadow: inset 0 0 0 2px var(--cn-warn); color: var(--cn-ink); }
.cine .stp-track .is-current a { color: var(--cn-ink); }
.stp-track .is-current .n { background: var(--cn-acc); color: var(--cn-acc-ink); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cn-acc) 28%, transparent); }
/* v88.13.0 (P19): where the step track does not fit (a phone, a narrow tablet) the progress is one line: the light-up
   logo on the participant steps (careweb-mark.css), "Step 1 of 7" and its bar, then Switch at the end (the path's name
   stays for screen readers). */
@container page (max-width: 820px) {
  .stp-bar { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 999px; }
  .stp-track { display: none; }
  .stp-count { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; color: var(--cn-ink); }
  .stp-count > span:not(.stp-pmini, .cn-bar) { white-space: nowrap; }
  .stp-count .cn-bar { flex: 1 1 auto; min-width: 36px; }
  .stp-fork { order: 1; flex: none; gap: 6px; padding: 0 12px 0 10px; }
  .stp-fork > span:not(.cn-sr) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stp-fork small { margin: 0; padding: 0; background: none; color: var(--cn-ink); font-size: .875rem; }
}

/* layout */
.stp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(20px, 3cqw, 40px); align-items: start; }
.stp-main { display: grid; gap: 18px; min-width: 0; max-width: 780px; }
.stp-head { display: grid; gap: 12px; }
/* the home page's preview of a step says it is an example (care-steps.js, sample) */
.stp-head > .cn-tag { justify-self: start; }
/* v88.13.0 (P19): where the step bar is one line, the gaps above the heading are a little tighter */
@container page (max-width: 820px) { .stp { gap: 16px; padding-top: 6px; } .stp-main { gap: 14px; } }
.stp-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: var(--cn-fs-small); font-weight: 700; color: var(--cn-ink-2); }
.stp-tk { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--cn-acc); color: var(--cn-acc-ink); flex: none; }
.stp-tk .cn-ic { width: 19px; height: 19px; }
.stp-side { display: grid; gap: 14px; position: sticky; top: calc(var(--cn-header-h) + 18px); }
@container page (max-width: 900px) { .stp-grid { grid-template-columns: minmax(0, 1fr); } .stp-side { position: static; } }
.stp-panel { display: grid; gap: 6px; padding: 18px; border-radius: var(--cn-r-l); background: var(--cn-raise); box-shadow: inset 0 0 0 1px var(--cn-line); font-size: var(--cn-fs-small); }
.stp-panel .k { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-3); }
.stp-panel b { font-family: var(--cn-display); font-weight: 560; font-size: 1.12rem; letter-spacing: -.01em; line-height: 1.15; color: var(--cn-ink); }
.stp-panel p { color: var(--cn-ink-2); }
.stp-call { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.stp-call > .cn-ic { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; border-radius: 12px; background: color-mix(in srgb, var(--cn-acc) 22%, transparent); color: var(--cn-acc-text); }
.stp-call strong { color: var(--cn-ink); white-space: nowrap; }
.stp-perks ul { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.stp-perks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; color: var(--cn-ink); }
.stp-perks li .cn-ic { width: 18px; height: 18px; color: var(--cn-ok); stroke-width: 3; margin-top: 2px; }

/* the card that holds the questions */
.stp-card { display: grid; gap: 22px; padding: clamp(18px, 3cqw, 32px); border-radius: var(--cn-r-xl); background: var(--cn-raise); box-shadow: var(--cn-shadow-md), inset 0 0 0 1px var(--cn-line); min-width: 0; }
.stp-card[hidden] { display: none; }
/* v88.13.0: high contrast sets --cn-shadow-md to none, which voids the whole shadow list above, edge and all */
html.high-contrast[data-look="cinema"] .stp-card { box-shadow: inset 0 0 0 2px #000; }
.f2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@container page (max-width: 560px) { .f2 { grid-template-columns: minmax(0, 1fr); } }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > label, .fld > .lbl { font-weight: 700; font-size: var(--cn-fs-small); color: var(--cn-ink); }
.cine .fld input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), .cine .fld select, .cine .fld textarea { min-width: 0; min-height: 48px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--cn-field); background: var(--cn-bg); color: var(--cn-ink); font-size: 1rem; box-sizing: border-box; width: 100%; font-family: var(--cn-body); }
.cine .fld textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.cine .fld input:focus, .cine .fld select:focus, .cine .fld textarea:focus { outline: 3px solid var(--cn-focus); outline-offset: 1px; border-color: transparent !important; }
.cine .fld [aria-invalid="true"] { border-color: var(--cn-bad) !important; }
.fld .hint, .fld .opt-note { font-size: var(--cn-fs-small); color: var(--cn-ink-3); }
.fld .opt { margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--cn-raise-2); color: var(--cn-ink-2); font-size: .72rem; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; }

/* big tappable choices */
.stp-choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.stp-choices legend { padding: 0; margin-bottom: 4px; font-family: var(--cn-display); font-weight: 560; font-size: 1.2rem; letter-spacing: -.01em; color: var(--cn-ink); }
.stp-help-text { margin: -2px 0 4px; font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.stp-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.cols-2 .stp-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 .stp-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container page (max-width: 560px) { .stp-choice-grid, .cols-2 .stp-choice-grid, .cols-3 .stp-choice-grid { grid-template-columns: minmax(0, 1fr); } }
.stp-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px; border-radius: var(--cn-r-m); background: var(--cn-bg); box-shadow: inset 0 0 0 2px var(--cn-line); cursor: pointer; transition: box-shadow .2s, background-color .2s; }
.stp-choice:hover { box-shadow: inset 0 0 0 2px var(--cn-line-2); }
.stp-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stp-choice .ch-tk { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cn-raise-2); color: var(--cn-ink-2); transition: background-color .2s, color .2s; }
.stp-choice .ch-tk .cn-ic { width: 20px; height: 20px; }
.stp-choice .ch-t { display: grid; gap: 2px; min-width: 0; }
.stp-choice .ch-t b { font-weight: 800; line-height: 1.25; color: var(--cn-ink); }
.stp-choice .ch-t small { font-size: var(--cn-fs-small); color: var(--cn-ink-2); line-height: 1.35; }
.stp-choice .ch-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--cn-field); color: transparent; transition: background-color .2s, color .2s, box-shadow .2s; }
.stp-choice .ch-mark .cn-ic { width: 14px; height: 14px; stroke-width: 3.4; }
.stp-choice:has(input:checked) { background: color-mix(in srgb, var(--cn-acc) 11%, var(--cn-bg)); box-shadow: inset 0 0 0 2px var(--cn-acc); }
.stp-choice:has(input:checked) .ch-tk { background: var(--cn-acc); color: var(--cn-acc-ink); }
.stp-choice:has(input:checked) .ch-mark { background: var(--cn-acc); color: var(--cn-acc-ink); box-shadow: none; }
.stp-choice:has(input:focus-visible) { outline: 3px solid var(--cn-focus); outline-offset: 2px; }
.stp-choice:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--cn-bad); }

/* small pills (the site's own .choice-pill markup, drawn by the sign-up screens) */
.stp .choice-row, .stp .cn-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.stp .choice-pill { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; cursor: pointer; }
.stp .choice-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.stp .choice-pill span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cn-bg); box-shadow: inset 0 0 0 2px var(--cn-line); color: var(--cn-ink); font-weight: 700; font-size: var(--cn-fs-small); transition: box-shadow .2s, background-color .2s; }
.stp .choice-pill span b { color: var(--cn-ok) !important; }
.stp .choice-pill:hover span { box-shadow: inset 0 0 0 2px var(--cn-ink-2); }
.stp .choice-pill:has(input:checked) span { background: var(--cn-acc); color: var(--cn-acc-ink); box-shadow: none; }
.stp .choice-pill:has(input:checked) span b { color: inherit !important; }
.stp .choice-pill:has(input:focus-visible) span { outline: 3px solid var(--cn-focus); outline-offset: 2px; }
/* the site's grouped questions keep their markup (a fieldset and a legend) */
.stp fieldset.field { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.stp fieldset.field legend { padding: 0; margin-bottom: 4px; font-family: var(--cn-display); font-weight: 560; font-size: 1.2rem; letter-spacing: -.01em; color: var(--cn-ink); }
.stp fieldset.field legend .hint { font-family: var(--cn-body); font-size: var(--cn-fs-small); font-weight: 600; color: var(--cn-ink-3); letter-spacing: 0; }
.stp .muted-sm { color: var(--cn-ink-2); font-size: var(--cn-fs-small); }
.stp .info-card { padding: 16px 18px; border-radius: var(--cn-r-m); background: color-mix(in srgb, var(--cn-acc) 12%, var(--cn-raise)) !important; border: 0 !important; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cn-acc) 45%, transparent); color: var(--cn-ink); }
.stp .info-card h3 { font-family: var(--cn-display); font-size: 1.2rem; }
.stp .info-card a { color: var(--cn-link); }

/* a tick box people can hit */
.stp-check { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 12px; padding: 4px 0; font-weight: 700; color: var(--cn-ink); cursor: pointer; }
.stp-check input { position: absolute; left: 0; top: 4px; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.stp-check .box { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--cn-field); background: var(--cn-bg); color: transparent; transition: background-color .2s, color .2s; }
.stp-check .box .cn-ic { width: 16px; height: 16px; stroke-width: 3.4; }
.stp-check:has(input:checked) .box { background: var(--cn-acc); color: var(--cn-acc-ink); box-shadow: none; }
.stp-check:has(input:focus-visible) .box { outline: 3px solid var(--cn-focus); outline-offset: 2px; }
.stp-check:has(input[aria-invalid="true"]) .box { box-shadow: inset 0 0 0 2px var(--cn-bad); }
.stp-check span.t { font-weight: 600; }
.stp-check a { color: var(--cn-link); }

/* notes, reasons, errors */
.stp-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--cn-r-m); background: color-mix(in srgb, var(--cn-acc) 12%, transparent); font-size: var(--cn-fs-small); color: var(--cn-ink); }
.stp-note > .cn-ic { width: 20px; height: 20px; color: var(--cn-acc-text); margin-top: 1px; }
.stp-note.is-office { background: color-mix(in srgb, var(--cn-warn) 14%, transparent); }
.stp-note.is-office > .cn-ic { color: var(--cn-warn); }
.stp-note.is-ok { background: color-mix(in srgb, var(--cn-ok) 14%, transparent); }
.stp-note.is-ok > .cn-ic { color: var(--cn-ok); }
.stp-why summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-weight: 700; font-size: var(--cn-fs-small); color: var(--cn-ink-2); list-style: none; }
.stp-why summary::-webkit-details-marker { display: none; }
.stp-why summary .cn-ic { width: 18px; height: 18px; }
.stp-why p { padding: 0 0 4px 26px; font-size: var(--cn-fs-small); color: var(--cn-ink-2); max-width: 60ch; }
.stp-err { display: block; padding: 12px 14px; border-radius: var(--cn-r-m); background: color-mix(in srgb, var(--cn-bad) 14%, transparent); color: var(--cn-bad-ink); font-weight: 700; font-size: var(--cn-fs-small); }
.stp-err[hidden] { display: none; }
.stp-fine { font-size: var(--cn-fs-micro); color: var(--cn-ink-3); }
.stp-fine a { color: var(--cn-link); }
.stp-banner, .stp-ready { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 18px; border-radius: var(--cn-r-l); background: color-mix(in srgb, var(--cn-ok) 16%, var(--cn-raise)); color: var(--cn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-ok) 35%, transparent); }
.stp-banner[hidden] { display: none; }
.stp-banner > .cn-ic, .stp-ready > .cn-ic { width: 26px; height: 26px; color: var(--cn-ok); }
.stp-banner h2, .stp-banner b.t { font-family: var(--cn-display); font-size: 1.25rem; font-weight: 560; display: block; }
.stp-banner p, .stp-ready p { font-size: var(--cn-fs-small); color: var(--cn-ink-2); margin-top: 4px; }
.stp-banner .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.stp-banner.is-warn { background: color-mix(in srgb, var(--cn-warn) 14%, var(--cn-raise)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-warn) 40%, transparent); }
.stp-banner.is-warn > .cn-ic { color: var(--cn-warn); }
.stp-loading { display: flex; align-items: center; gap: 10px; padding: 18px; color: var(--cn-ink-2); font-weight: 600; }

/* the buttons at the bottom */
.stp-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--cn-line); }
.stp-actions .grow { flex: 1; }
.stp-skip { margin-left: auto; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--cn-link); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.stp-skip + .cn-btn { margin-left: 0; }
@container page (max-width: 560px) {
  .stp-actions { position: sticky; bottom: 0; z-index: 3; margin: 0 -18px -18px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--cn-raise); border-radius: 0 0 var(--cn-r-xl) var(--cn-r-xl); box-shadow: 0 -10px 24px -18px rgba(0, 0, 0, .45); flex-wrap: nowrap; }
  .stp-actions .cn-btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
  .stp-actions .stp-back { flex: 0 0 auto; width: 54px; padding: 0; }
  .stp-back-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stp-skip { order: 3; flex-basis: 100%; margin: 0; }
  .stp-actions:has(.stp-skip) { flex-wrap: wrap; }
  /* two choices besides Back (no form to keep in view): Back and the second choice on one row, the main one full width under them */
  .stp-actions:has(> .cn-btn:not(.stp-back) ~ .cn-btn:not(.stp-back)) { position: static; flex-wrap: wrap; margin: 0; padding: 16px 0 0; background: none; box-shadow: none; border-radius: 0; }
  .stp-actions:has(> .cn-btn:not(.stp-back) ~ .cn-btn:not(.stp-back)) > .grow { display: none; }
  .stp-actions:has(> .cn-btn:not(.stp-back) ~ .cn-btn:not(.stp-back)) > .cn-btn:not(.stp-back):not(.cn-gold) { flex: 1 1 0; white-space: nowrap; }
  .stp-actions:has(> .cn-btn:not(.stp-back) ~ .cn-btn:not(.stp-back)) > .cn-gold { flex: 1 1 100%; }
}

/* status rows (the first-visit checklist, the worker checklist) */
.st-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--cn-r-m); background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line); }
.st-row.is-done { background: color-mix(in srgb, var(--cn-ok) 9%, var(--cn-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-ok) 35%, transparent); }
.st-row.is-office { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-warn) 45%, transparent); }
.st-mk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--cn-line-2); color: var(--cn-ink-2); }
.st-row.is-done .st-mk { background: var(--cn-ok); color: var(--cn-on-ok); box-shadow: none; }
.st-row.is-office .st-mk { box-shadow: inset 0 0 0 2px var(--cn-warn); color: var(--cn-warn); }
.st-mk .cn-ic { width: 15px; height: 15px; stroke-width: 3; }
.st-t { display: grid; gap: 2px; min-width: 0; }
.st-t b { font-size: .98rem; color: var(--cn-ink); line-height: 1.25; }
.st-t small { font-size: var(--cn-fs-micro); color: var(--cn-ink-2); }
.st-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@container page (max-width: 620px) { .st-row { grid-template-columns: 30px minmax(0, 1fr); } .st-act { grid-column: 2; justify-content: flex-start; } }
.st-upload { grid-column: 1 / -1; display: grid; gap: 12px; padding: 14px; margin-top: 4px; border-radius: var(--cn-r-m); background: var(--cn-raise); box-shadow: inset 0 0 0 1px var(--cn-line); }
.st-upload[hidden] { display: none; }

/* agreements */
.stp-agree { display: grid; gap: 12px; padding: 18px; border-radius: var(--cn-r-l); background: var(--cn-bg); box-shadow: inset 0 0 0 2px var(--cn-line); transition: box-shadow .25s; }
.stp-agree.is-on { box-shadow: inset 0 0 0 2px var(--cn-ok); }
.ag-head { display: flex; align-items: center; gap: 12px; }
.ag-tk { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--cn-raise-2); color: var(--cn-ink); flex: none; }
.stp-agree.is-on .ag-tk { background: var(--cn-ok); color: var(--cn-on-ok); }
.ag-head h2 { font-size: 1.3rem; }
.ag-points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--cn-fs-small); }
.ag-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; color: var(--cn-ink-2); }
.ag-points li b { color: var(--cn-ink); }
.ag-points .cn-ic { width: 18px; height: 18px; color: var(--cn-ok); stroke-width: 3; margin-top: 2px; }
.ag-read { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ag-done { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cn-ok); }
.ag-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* NDIS plan upload */
.stp-drop { display: grid; gap: 12px; }
.stp-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-zone { display: grid; justify-items: center; gap: 8px; padding: clamp(22px, 4cqw, 36px) 20px; border-radius: var(--cn-r-l); border: 2px dashed var(--cn-field); background: var(--cn-bg); text-align: center; cursor: pointer; transition: border-color .2s, background-color .2s; }
.drop-zone:hover { border-color: var(--cn-acc); background: color-mix(in srgb, var(--cn-acc) 6%, var(--cn-bg)); }
.stp-file:focus-visible + .drop-zone, .stp-file:focus-visible + label { outline: 3px solid var(--cn-focus); outline-offset: 3px; }
.dz-ic { display: flex; gap: 10px; color: var(--cn-acc-text); }
.dz-ic .cn-ic { width: 30px; height: 30px; }
.drop-zone b { font-size: 1.1rem; color: var(--cn-ink); }
.drop-zone small { color: var(--cn-ink-2); font-size: var(--cn-fs-small); }
.dz-btn { margin-top: 6px; pointer-events: none; }
.stp-drop.has-file .drop-zone { padding-block: 16px; }
.stp-drop.has-file .dz-ic, .stp-drop.has-file .drop-zone small { display: none; }
.file-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--cn-r-m); background: color-mix(in srgb, var(--cn-ok) 12%, var(--cn-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cn-ok) 40%, transparent); }
.file-card[hidden] { display: none; }
.fc-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--cn-raise); color: var(--cn-ok); }
.file-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cn-ink); }
.file-card small { color: var(--cn-ink-2); font-size: var(--cn-fs-micro); }
.fc-ok .cn-ic { width: 24px; height: 24px; color: var(--cn-ok); }

/* support plan wizard */
.spw { gap: 18px; }
.spw-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: var(--cn-fs-small); font-weight: 800; color: var(--cn-ink-2); }
/* v88.13.0 (S19): the section buttons wrap onto a second line instead of scrolling sideways, where the last one
   was cut off at the card's edge ("6 Wh"). In a narrow space (a phone) they show only their numbers and ticks,
   in one row; the words stay for screen readers. The support plan page (#/support-plan) draws the same row. */
.spw-nav { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: 0; padding: 2px 2px 6px; list-style: none; }
.spw-nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 6px; border: 0; border-radius: 999px; background: var(--cn-raise-2); color: var(--cn-ink-2); font: inherit; font-size: .85rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.spw-nav .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--cn-raise); font-weight: 800; font-size: .8rem; }
.spw-nav .n .cn-ic { width: 14px; height: 14px; stroke-width: 3.4; }
.spw-nav .is-done { color: var(--cn-ink); }
.spw-nav .is-done .n { background: var(--cn-ok); color: var(--cn-on-ok); }
.spw-nav .is-current { background: var(--cn-acc); color: var(--cn-acc-ink); }
.spw-nav .is-current .n { background: var(--cn-acc-ink); color: var(--cn-acc); }
/* v88.14.0 (BS3): on the support plan's summary each button says how many of its required questions are answered */
.spw-nav .spw-c { font-size: .82em; font-weight: 600; color: var(--cn-ink-2); }
@container (max-width: 600px) {
  .spw-top.has-count { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .spw-nav { gap: 4px; }
  .spw-nav button, .spw-nav .is-current { justify-content: center; min-width: 44px; min-height: 44px; padding: 4px; background: transparent; color: var(--cn-ink-2); }
  .spw-nav .spw-l { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .spw-nav .n { width: 36px; height: 36px; font-size: .9rem; background: var(--cn-raise-2); }
  .spw-nav .is-current .n { background: var(--cn-acc); color: var(--cn-acc-ink); }
}
.spw-sec { display: grid; gap: 14px; }
.spw-sec[hidden] { display: none; }
.spw-sec h2 { font-size: 1.55rem; }
.spw-why { font-size: var(--cn-fs-small); color: var(--cn-ink-2); max-width: 62ch; margin-top: -8px; }
.spw-list { display: grid; gap: 10px; }
.spw-item { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--cn-r-m); background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line); }
.spw-item.is-miss { box-shadow: inset 0 0 0 2px var(--cn-bad); }
.spw-item[hidden] { display: none; }
.stp-yn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.stp-yn .q { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cn-ink); min-width: min(100%, 220px); flex: 1 1 260px; }
.spw-help { font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.yn-btns { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cn-raise-2); box-shadow: inset 0 0 0 1.5px var(--cn-field); }
.yn-btns button { min-width: 64px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--cn-ink-2); font: inherit; font-weight: 800; cursor: pointer; }
.yn-btns button:hover { color: var(--cn-ink); }
.yn-btns button[aria-pressed="true"] { background: var(--cn-raise); color: var(--cn-ink); box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .35), inset 0 0 0 2px var(--cn-acc); }
.spw-tier { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--cn-r-l); background: var(--cn-raise-2); box-shadow: inset 0 0 0 2px var(--cn-line); }
.spw-tier .k { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-3); }
.spw-tier b { font-family: var(--cn-display); font-weight: 560; font-size: 1.35rem; color: var(--cn-ink); }
.spw-tier p { font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.spw-care { display: grid; gap: 8px; }
.spw-care-row { display: flex; gap: 8px; align-items: center; }
.spw-care-row input { flex: 1; }
.spw-saved { display: flex; align-items: center; gap: 8px; font-size: var(--cn-fs-micro); color: var(--cn-ink-3); }
.spw-saved .cn-ic { width: 16px; height: 16px; color: var(--cn-ok); }

/* choose and book */
.stb-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stb-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--cn-r-l); background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line); }
.stb-card .cn-tile { width: 52px; height: 52px; border-radius: 16px; font-size: 1.25rem; }
.stb-t { display: grid; gap: 6px; min-width: 0; }
.stb-t b { font-size: 1.05rem; color: var(--cn-ink); }
.stb-why { display: flex; flex-wrap: wrap; gap: 6px; }
.stb-why .cn-chip { min-height: 26px; font-size: .78rem; }
.stb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@container page (max-width: 560px) { .stb-card { grid-template-columns: auto minmax(0, 1fr); } .stb-acts { grid-column: 1 / -1; } .stb-acts .cn-btn { flex: 1; } }
.wk-days { display: grid; gap: 10px; }
.wk-day { display: grid; gap: 8px; }
.wk-day > b { font-family: var(--cn-display); font-weight: 560; font-size: 1.1rem; color: var(--cn-ink); }

/* worker profile with a live preview */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.pf-fields { display: grid; gap: 16px; min-width: 0; }
@container page (max-width: 760px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; }
.pf-chip { gap: 6px; border: 0; cursor: pointer; font: inherit; font-size: var(--cn-fs-small); font-weight: 700; }
.pf-chip .cn-ic { width: 14px; height: 14px; }
.pf-add { display: flex; gap: 8px; margin-top: 8px; }
.pf-photo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pv-card { position: sticky; top: calc(var(--cn-header-h) + 18px); display: grid; gap: 12px; padding: 18px; border-radius: var(--cn-r-l); background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line), var(--cn-shadow-md); }
.pv-k { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-3); }
.pv-id { display: flex; gap: 12px; align-items: center; }
.pv-id .cn-tile { width: 56px; height: 56px; border-radius: 18px; font-size: 1.4rem; }
.pv-name { display: block; font-family: var(--cn-display); font-weight: 560; font-size: 1.2rem; color: var(--cn-ink); }
.pv-meta { color: var(--cn-ink-2); font-size: var(--cn-fs-micro); }
.pv-bio { font-size: var(--cn-fs-small); color: var(--cn-ink-2); overflow-wrap: anywhere; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-chips .cn-chip { min-height: 28px; font-size: .78rem; }
.pv-langs { display: flex; gap: 8px; align-items: center; font-size: var(--cn-fs-micro); color: var(--cn-ink-2); }

/* worker hours */
.hr-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--cn-fs-small); font-weight: 700; color: var(--cn-ink-2); }
/* the quick-fill choices are the outline pill (cn-btn cn-ghost cn-sm in the markup), like Back */
.hr-wrap { overflow-x: auto; }
.hr-grid { width: 100%; border-collapse: separate; border-spacing: 6px; }
.hr-grid th { font-size: .78rem; font-weight: 800; color: var(--cn-ink-2); text-align: center; }
.hr-grid th small { display: block; font-weight: 600; color: var(--cn-ink-3); }
.hr-grid th[scope="row"] { text-align: left; font-size: .9rem; color: var(--cn-ink); width: 52px; }
.hr-cell { width: 100%; min-width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cn-raise-2); color: transparent; cursor: pointer; display: grid; place-items: center; transition: background-color .15s, transform .2s; }
.hr-cell .cn-ic { width: 18px; height: 18px; stroke-width: 3.2; }
.hr-cell:hover { transform: scale(1.04); }
.hr-cell[aria-pressed="true"] { background: var(--cn-acc); color: var(--cn-acc-ink); }
/* v88.11.0: a free slot is a visible choice too: the field edge and an empty tick box (S9) */
.hr-cell[aria-pressed="false"]:not([data-custom="1"]) { background: var(--cn-raise); box-shadow: inset 0 0 0 1.5px var(--cn-field); }
.hr-cell[aria-pressed="false"]:not([data-custom="1"]) .cn-ic { display: none; }
.hr-cell[aria-pressed="false"]:not([data-custom="1"])::after { content: ""; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--cn-field); border-radius: 5px; }
.hr-cell[data-custom="1"] { background: color-mix(in srgb, var(--cn-acc) 40%, var(--cn-raise-2)); color: var(--cn-ink); }
.hr-custom { font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
/* v88.13.0 (S3): the grid fits its box wherever it is drawn (the hours step, Settings > Availability, the home page's
   phone): it never takes the site's 640px table minimum, and when its box is narrow each day is one row of four
   compact toggles under the short names of the parts of the day. Their hours (still in each heading and each toggle's
   name for screen readers) show in a key under the grid. */
.hr-wrap { container: hours / inline-size; }
.hr-grid { min-width: 0; }
.hr-key { display: none; }
@container hours (max-width: 480px) {
  .hr-grid { table-layout: fixed; border-spacing: 5px 7px; }
  .hr-grid :is(th, td) { padding: 0; }
  .hr-grid thead th { font-size: .7rem; line-height: 1.2; letter-spacing: -.01em; padding: 0 0 2px; }
  .hr-grid thead th:first-child { width: 44px; }
  .hr-grid th[scope="row"] { font-size: .88rem; }
  .hr-grid thead th small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hr-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 14px 0 2px; font-size: .8rem; line-height: 1.5; color: var(--cn-ink-2); }
  .hr-key b { color: var(--cn-ink); font-weight: 800; }
}

/* requests */
.rq-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rq { display: grid; gap: 10px; padding: 16px; border-radius: var(--cn-r-l); background: var(--cn-bg); box-shadow: inset 0 0 0 1px var(--cn-line); }
.rq-top { display: flex; gap: 12px; align-items: center; }
.rq-top b { display: block; color: var(--cn-ink); }
.rq-top small { color: var(--cn-ink-2); font-size: var(--cn-fs-micro); }
.rq-note { font-size: var(--cn-fs-small); color: var(--cn-ink); font-style: italic; overflow-wrap: anywhere; }
.rq-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rq-decline { min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--cn-ink-2); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.rq-status { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: var(--cn-fs-small); color: var(--cn-ink); }
.rq-status:empty { display: none; }

/* pay */
.py-hero { display: grid; gap: 4px; padding: 18px; border-radius: var(--cn-r-l); background: color-mix(in srgb, var(--cn-acc) 16%, var(--cn-bg)); }
.py-hero .k { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-2); }
.py-hero b { font-family: var(--cn-display); font-weight: 560; font-size: clamp(2.4rem, 1.8rem + 2cqw, 3.4rem); letter-spacing: -.03em; line-height: 1; color: var(--cn-ink); font-variant-numeric: tabular-nums; }
.py-hero b small { font-size: .38em; letter-spacing: 0; }
.py-hero span:last-child { font-size: var(--cn-fs-small); color: var(--cn-ink-2); }
.py-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; margin: 0; padding: 0; list-style: none; }
.py-rung { display: grid; gap: 6px; }
.py-rung .bar { display: block; height: calc(24px + (var(--s) - 72.5) * 22px); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--cn-acc) 70%, #fff), var(--cn-acc)); }
.py-rung.is-you .bar { box-shadow: 0 0 0 3px var(--cn-ink); }
.py-rung b { font-size: 1.1rem; color: var(--cn-ink); font-variant-numeric: tabular-nums; }
.py-rung small { font-size: .75rem; color: var(--cn-ink-2); line-height: 1.3; }
@container page (max-width: 480px) { .py-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.py-table-wrap { overflow-x: auto; }
.py-table { width: 100%; border-collapse: collapse; font-size: var(--cn-fs-small); }
.py-table th { text-align: left; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--cn-line); background: none; }
.py-table td { padding: 10px; border-bottom: 1px solid var(--cn-line); color: var(--cn-ink); vertical-align: top; }
.py-table td small { display: block; color: var(--cn-ink-2); font-size: .78rem; }
.py-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* v88.13.0 (S3): the pay table fits a phone: no 640px table minimum, and when its box is narrow each time of day sits
   above its amount, under the table's own name ("What you earn, including super"), so every amount shows without
   scrolling sideways. The column headings stay for screen readers. */
.py-table-wrap { container: pay / inline-size; }
.py-table { min-width: 0; }
.py-cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container pay (max-width: 440px) {
  .py-table, .py-table tbody { display: block; }
  .py-cap { position: static; display: block; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; text-align: left; padding: 8px 2px; border-bottom: 1px solid var(--cn-line); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cn-ink-3); }
  .py-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .py-table tr { display: block; padding: 11px 2px; border-bottom: 1px solid var(--cn-line); }
  .py-table td { display: block; padding: 0; border: 0; text-align: left; }
  .py-table td:first-child { color: var(--cn-ink-2); font-size: .9rem; line-height: 1.35; }
  .py-table td.num { white-space: normal; text-align: left; font-weight: 800; font-size: 1.02rem; margin-top: 3px; color: var(--cn-ink); }
}

/* ==========================================================================
   Motion, and the accessibility panel's Colours choice
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cine *, .cine *::before, .cine *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html[data-motion="reduce"] .cine *, html[data-motion="reduce"] .cine *::before, html[data-motion="reduce"] .cine *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* any part scrolled out of view stops its decorative animations */
.cine [data-offscreen], .cine [data-offscreen] *, .cine [data-offscreen] *::before, .cine [data-offscreen] *::after { animation-play-state: paused !important; }
.a11y-colours .row button[aria-pressed="true"] { font-weight: 800; }

/* ---------- small pieces ---------- */
.cn-stack { display: grid; gap: 16px; align-content: start; }
.cn-films-note { font-size: var(--cn-fs-small); color: var(--cn-ink-2); max-width: 40em; }
.cn-films-note b { color: var(--cn-ink); }
.cn-films-media { min-width: 0; }
.cn-on-band { color: inherit; opacity: .9; }
.stp-form { display: grid; gap: 20px; }
.stp-form .stp-actions { margin-top: 4px; }
.spw-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cn-raise-2); color: var(--cn-ink-2); flex: none; }
.spw-ic .cn-ic { width: 18px; height: 18px; }
.spw-tier[data-tier="1"] { background: color-mix(in srgb, var(--cn-acc) 22%, var(--cn-raise)); box-shadow: inset 0 0 0 2px var(--cn-acc); }
.spw-tier[data-tier="2"] { background: color-mix(in srgb, var(--cn-acc) 12%, var(--cn-raise)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cn-acc) 60%, transparent); }
.spw-tier[data-tier="3"] { background: color-mix(in srgb, var(--cn-ok) 12%, var(--cn-raise)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cn-ok) 50%, transparent); }
.stp-send { display: grid; gap: 12px; }
.stp-send > summary { justify-self: start; list-style: none; margin: 0; }
.stp-send > summary::-webkit-details-marker { display: none; }
.stp-send[open] > summary.cn-sr { position: absolute !important; }
.stp-card > h2 { font-size: 1.45rem; }
.stp .fork-foot { text-align: left; }
.st-input, .pf-add input { flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--cn-field); background: var(--cn-bg); color: var(--cn-ink); font: inherit; }
.stp .flow-ack { display: flex; gap: 8px; align-items: flex-start; }
/* the site's table stripes and navy header cells belong to its light pages */
.cine table thead th, .cine table tbody th { background: none; color: var(--cn-ink-2); }
.cine table thead th small { opacity: 1; } /* the site-wide header rule fades these to 80%, below AA on white */
.cine table tbody tr, .cine table tbody tr:nth-child(2n) { background: none; }
.cine .hr-grid th, .cine .hr-grid td { border: 0; }
.cols-1 .stp-choice-grid { grid-template-columns: minmax(0, 1fr); }