/* Generated from tokens.json (Plannerly v1) - do not edit by hand. */
:root {
  --brand-navy: #0e1e3d;
  --brand-navy-deep: #0b1733;
  --brand-navy-raised: #132a52;
  --brand-blue: #009ef5;
  --brand-mint: #50e3c2;
  --action: #0077c8;
  --action-hover: #0069b3;
  --action-pressed: #00609f;
  --on-action: #ffffff;
  --surface-selected: #e8f4fe;
  --ink-selected: #145687;
  --surface-pro: #f5faff;
  --surface: #ffffff;
  --surface-wash: #f6f8fb;
  --surface-tint: #eaf3ff;
  --surface-tint-line: #dbeaff;
  --surface-mint: #e3faf4;
  --ink: #1c2430;
  --ink-soft: #3f5471;
  --ink-muted: #5b6b88;
  --link: #195fe9;
  --blue-ink: #006fac;
  --blue-accent: #008bd8;
  --mint-ink: #08745f;
  --line: #e3e8f0;
  --line-button: #c8d7ea;
  --line-button-hover: #9fc1ea;
  --line-control: #7f96b8;
  --ink-button: #1f3a60;
  --on-navy: #e6eefc;
  --on-navy-title: #ffffff;
  --on-navy-soft: #c6d4ea;
  --on-navy-muted: #9fb2cf;
  --on-navy-accent: #7cc7f2;
  --focus-ring: #006fac;
  --focus-ring-on-navy: var(--brand-mint);
  --status-success: #43cbac;
  --status-success-ink: #0b7a5f;
  --status-danger: #d81839;
  --status-review: #f39c12;
  --status-review-ink: #9a5b00;
  --linkedin: #0077b5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 8px 28px rgba(11, 23, 51, 0.05);
  --shadow-header: 0 1px 0 #e8edf5, 0 6px 18px rgba(14, 30, 61, 0.05);
  --shadow-raised: 0 20px 40px -24px rgba(14, 30, 61, 0.4);
  --shadow-startbar: 0 -8px 20px -14px rgba(14, 30, 61, 0.4);
  --shadow-action: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px -6px rgba(0, 119, 200, 0.55);
  --shadow-action-hover: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px -8px rgba(0, 119, 200, 0.6);
  --shadow-lift: 0 18px 36px -18px rgba(14, 30, 61, 0.35);
  --shadow-pro: 0 8px 28px rgba(20, 75, 120, 0.08);
  --shadow-float: 0 28px 56px -24px rgba(2, 8, 20, 0.65);
  --shadow-pop: 0 16px 40px -12px rgba(14, 30, 61, 0.28);
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --container-max: 1200px;
  --measure: 68ch;
  --tap-min: 44px;
  --header-height: 64px;
  --z-lens: 20;
  --z-startbar: 30;
  --z-header: 40;
  --z-consent: 90;
  --z-dialog: 100;
  --control-web-lg: 56px;
  --control-web: 48px;
  --control-help: 44px;
  --control-app: 36px;
  --control-app-sm: 30px;
  --icon-web: 20px;
  --icon-app: 16px;
  --font-sans: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-condensed: "Roboto Condensed", "Arial Narrow", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@font-face { font-family: 'Roboto'; src: url('/web-assets/roboto-400-10f4e710cb20ecf2.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/web-assets/roboto-500-616e25baa35e11d0.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/web-assets/roboto-700-13b636f4fadae85c.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/web-assets/roboto-900-324b011a9328a36a.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('/web-assets/roboto-condensed-regular-4caef44a97236ac5.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Condensed'; src: url('/web-assets/roboto-condensed-bold-a63ec499e01e09a1.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Plannerly - one component stylesheet for the website, the Help Center and the app (v3).
   Surfaces: data-pw-mode="web" (default), "help" or "app" on any ancestor sets control heights,
   text and icon sizes and motion, so the same part reads as one family at three volumes.
   Every colour, size, radius and shadow is a token from tokens.json, read as var(--name).
   Media queries use the breakpoint tokens' literal values (640px = bp-sm, 900px = bp-md),
   because CSS cannot read a custom property inside @media. Motion timings live here as
   --pw-* custom properties because tokens have no motion family. Class prefix: pw-. */

/* Plannerly core - every surface (website, Help Center, app): base, motion, type, grounds, button, chip,
   badge, input, select, dialog, close button, menu and the Help/App type styles. */
/* ---- Base ------------------------------------------------------------------ */
.pw { --pw-ease: cubic-bezier(.2, .8, .2, 1); --pw-fast: 150ms; --pw-med: 260ms; --pw-slow: 600ms;
  --pw-control: var(--control-web); --pw-control-lg: var(--control-web-lg); --pw-control-sm: 38px; --pw-control-font: 16px; --pw-control-pad: 22px; --pw-icon: var(--icon-web); }
[data-pw-mode="help"] { --pw-control: var(--control-help); --pw-control-lg: var(--control-web); --pw-control-sm: 36px; --pw-control-font: 15px; --pw-control-pad: 18px; --pw-icon: var(--icon-web); }
[data-pw-mode="app"] { --pw-fast: 120ms; --pw-med: 150ms; --pw-slow: 200ms; --pw-control: var(--control-app); --pw-control-lg: var(--control-help); --pw-control-sm: var(--control-app-sm); --pw-control-font: 14px; --pw-control-pad: 14px; --pw-icon: var(--icon-app); }
.pw, .pw *, .pw *::before, .pw *::after { box-sizing: border-box; }
.pw { font-family: var(--font-sans); color: var(--ink); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.pw :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
.pw :where(ul, ol) { padding: 0; list-style: none; }
.pw img { max-width: 100%; height: auto; }
/* Plain links only: a classed <a> (button, card) styles itself. */
.pw a:not([class]) { color: var(--link); text-underline-offset: 3px; }
.pw-navy a:not([class]) { color: var(--on-navy-title); }
.pw :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pw-navy :focus-visible { outline-color: var(--focus-ring-on-navy); }
.pw-ic { width: var(--pw-icon); height: var(--pw-icon); fill: currentColor; flex: none; } /* Font Awesome glyphs are filled; stand-in symbols carry their own stroke. */
.pw-ic--fill { fill: currentColor; stroke: none; }
.pw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Motion ---------------------------------------------------------------- */
/* Content is visible without script. bundle.js adds .pw-motion to <html> only when motion is allowed,
   and then [data-pw-reveal] elements rise in as they enter the viewport. */
.pw-motion [data-pw-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--pw-slow) var(--pw-ease) var(--pw-delay, 0ms), transform var(--pw-slow) var(--pw-ease) var(--pw-delay, 0ms); }
.pw-motion [data-pw-reveal].is-in { opacity: 1; transform: none; }
/* The app moves only to give feedback: no arrivals, no lifts. */
.pw-motion [data-pw-mode="app"] [data-pw-reveal], .pw-motion [data-pw-mode="app"][data-pw-reveal] { opacity: 1; transform: none; }
@keyframes pw-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes pw-ring { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes pw-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pw-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes pw-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .pw *, .pw *::before, .pw *::after { animation: none !important; transition: none !important; }
}

/* ---- Type ------------------------------------------------------------------ */
.pw-display-xl { font-size: 64px; line-height: 1.02; font-weight: 900; letter-spacing: -0.025em; color: var(--brand-navy); text-wrap: balance; }
.pw-display { font-size: 48px; line-height: 1.06; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); text-wrap: balance; }
.pw-h2 { font-size: 34px; line-height: 1.12; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); text-wrap: balance; }
.pw-h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.pw-h4 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
.pw-lead { font-size: 20px; line-height: 1.5; color: var(--ink-soft); max-width: 56ch; }
.pw-body { font-size: 17px; line-height: 1.8; max-width: var(--measure); }
.pw-small { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.pw-eyebrow { font-family: var(--font-condensed); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-ink); }
.pw-overline { font-family: var(--font-condensed); font-size: 12px; line-height: 1.33; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.pw-eyebrow--mint { color: var(--mint-ink); }
.pw-accent { color: var(--blue-accent); }
.pw-navy :is(.pw-display-xl, .pw-display, .pw-h2, .pw-h3, .pw-h4) { color: var(--on-navy-title); }
.pw-navy .pw-lead { color: var(--on-navy-soft); }
.pw-navy .pw-small { color: var(--on-navy-muted); }
.pw-navy .pw-eyebrow { color: var(--brand-mint); }
.pw-navy .pw-accent { color: var(--brand-mint); }
@media (max-width: 640px) {
  .pw-display-xl { font-size: 40px; line-height: 1.06; }
  .pw-display { font-size: 36px; line-height: 1.08; }
  .pw-h2 { font-size: 26px; line-height: 1.15; }
  .pw-lead { font-size: 18px; }
}

/* ---- Grounds and layout ---------------------------------------------------- */
.pw-navy { background: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-raised) 100%); color: var(--on-navy); }
.pw-navy--glow {
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--on-navy-title) 9%, transparent) 1px, transparent 0) 0 0 / 26px 26px,
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--brand-blue) 26%, transparent), transparent 55%),
    radial-gradient(ellipse at 8% 100%, color-mix(in srgb, var(--brand-mint) 16%, transparent), transparent 50%),
    linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-navy-raised) 100%);
}
.pw-section { padding-block: var(--space-24); padding-inline: var(--space-10); }
.pw-section--wash { background: var(--surface-wash); }
.pw-section--tight { padding-block: var(--space-16); }
.pw-container { max-width: var(--container-max); margin-inline: auto; display: grid; gap: var(--space-6); }
.pw-head { display: grid; gap: var(--space-3); max-width: 720px; }
.pw-stack { display: grid; gap: var(--space-3); align-content: start; }
.pw-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pw-grid-2, .pw-grid-3, .pw-grid-4 { display: grid; gap: var(--space-5); }
.pw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; min-width: 0; box-shadow: var(--shadow-card); }
.pw-tile { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-lg); background: var(--surface-mint); color: var(--mint-ink); }
.pw-tile--blue { background: var(--surface-selected); color: var(--ink-selected); }
.pw-tile--navy { background: var(--brand-navy); color: var(--brand-mint); }
@media (max-width: 900px) {
  .pw-section { padding-block: var(--space-16); }
  .pw-grid-3, .pw-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pw-section { padding-block: var(--space-12); padding-inline: var(--space-4); }
  .pw-grid-2, .pw-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pw-card { padding: var(--space-5); }
}

/* ---- Button ---------------------------------------------------------------- */
.pw-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--pw-control); padding: 0 var(--pw-control-pad); border: 1.5px solid transparent; border-radius: var(--radius-md); font: 700 var(--pw-control-font)/1 var(--font-sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease); }
.pw-btn .pw-ic { width: calc(var(--pw-icon) - 2px); height: calc(var(--pw-icon) - 2px); transition: transform var(--pw-med) var(--pw-ease); }
.pw-btn:hover .pw-ic--go { transform: translateX(4px); }
.pw-btn:active { transform: translateY(1px); }
.pw-btn--primary { background: var(--action); color: var(--on-action); box-shadow: var(--shadow-action); }
.pw-btn--primary:hover { background: var(--action-hover); box-shadow: var(--shadow-action-hover); transform: translateY(-1px); }
.pw-btn--primary:active { background: var(--action-pressed); box-shadow: var(--shadow-action); transform: translateY(1px); }
/* invert: solid blue at rest; on hover, keyboard focus, or while its card (`pw-invert-host`) is hovered or holds focus,
   it turns white with a blue edge and blue label - clear feedback without moving the layout. */
.pw-btn--invert { background: var(--action); border-color: var(--action); color: var(--on-action); box-shadow: var(--shadow-action); }
.pw-btn--invert:is(:hover, :focus-visible), .pw-invert-host:is(:hover, :focus-within) .pw-btn--invert { background: var(--surface); color: var(--action); box-shadow: none; }
.pw-btn--invert:active { background: var(--surface-wash); transform: translateY(1px); }
.pw-btn--secondary { background: var(--surface); border-color: var(--line-button); color: var(--ink-button); }
.pw-btn--secondary:hover { border-color: var(--action-hover); color: var(--action-hover); }
.pw-btn--ghost { background: color-mix(in srgb, var(--on-navy-title) 8%, transparent); border-color: color-mix(in srgb, var(--on-navy-title) 30%, transparent); color: var(--on-navy-title); }
.pw-btn--ghost:hover { background: color-mix(in srgb, var(--on-navy-title) 15%, transparent); border-color: var(--on-navy-title); }
.pw-btn--linkedin { background: var(--linkedin); color: var(--on-action); }
.pw-btn--linkedin:hover { background: color-mix(in srgb, var(--linkedin) 85%, var(--brand-navy)); transform: translateY(-1px); }
.pw-btn--sm { min-height: var(--pw-control-sm); padding: 0 12px; font-size: calc(var(--pw-control-font) - 2px); gap: 8px; }
.pw-btn--sm .pw-ic { width: calc(var(--pw-icon) - 4px); height: calc(var(--pw-icon) - 4px); }
.pw-btn--lg { min-height: var(--pw-control-lg); padding: 0 calc(var(--pw-control-pad) + 6px); font-size: calc(var(--pw-control-font) + 1px); }
.pw-btn--danger { background: var(--status-danger); color: var(--on-action); }
.pw-btn--danger:hover { background: color-mix(in srgb, var(--status-danger) 85%, var(--brand-navy)); }
[data-pw-mode="app"] .pw-btn:hover { transform: none; }
[data-pw-mode="app"] .pw-btn--primary { box-shadow: none; }
[data-pw-mode="app"] .pw-btn--primary:hover { box-shadow: none; }
.pw-btn--block { width: 100%; }
.pw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
/* CarouselArrows: a pair of round buttons that page a horizontal row one item at a time. They sit beside the row's
   heading, never over its items, and stay put - greyed out, still focusable - at either end. */
.pw-arrows { display: flex; gap: 10px; }
.pw-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line-button); border-radius: 50%; background: var(--surface); color: var(--brand-navy); box-shadow: var(--shadow-card); cursor: pointer; transition: border-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease), background-color var(--pw-fast) var(--pw-ease), opacity var(--pw-fast) var(--pw-ease); }
.pw-arrow .pw-ic { width: 16px; height: 16px; }
.pw-arrow:hover { border-color: var(--action); color: var(--action); }
.pw-arrow:active { background: var(--surface-wash); }
.pw-arrow[aria-disabled="true"] { border-color: var(--line); color: var(--ink-muted); box-shadow: none; opacity: .45; cursor: default; }
.pw-arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pw-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(300px, 82vw); gap: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding: 6px 2px 20px; }
.pw-rail > * { scroll-snap-align: start; }
.pw-microcopy { font-size: 14px; color: var(--ink-muted); }
.pw-navy .pw-microcopy { color: var(--on-navy-muted); }

/* ---- Chip and Badge -------------------------------------------------------- */
.pw-chip { display: inline-flex; align-items: center; gap: 8px; min-height: calc(var(--pw-control) - 4px); padding: 0 calc(var(--pw-control-pad) - 6px); border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-navy); font: 500 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease), transform var(--pw-med) var(--pw-ease); }
.pw-chip .pw-ic { width: calc(var(--pw-icon) - 4px); height: calc(var(--pw-icon) - 4px); color: var(--mint-ink); }
.pw-chip:hover { border-color: var(--line-control); transform: translateY(-1px); }
.pw-chip[aria-pressed="true"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--on-navy-title); }
.pw-chip[aria-pressed="true"] .pw-ic { color: var(--brand-mint); }
.pw-navy .pw-chip { background: color-mix(in srgb, var(--on-navy-title) 6%, transparent); border-color: color-mix(in srgb, var(--on-navy-title) 24%, transparent); color: var(--on-navy-title); }
.pw-navy .pw-chip .pw-ic { color: var(--brand-mint); }
.pw-navy .pw-chip:hover { background: color-mix(in srgb, var(--on-navy-title) 12%, transparent); border-color: color-mix(in srgb, var(--on-navy-title) 55%, transparent); }
.pw-navy .pw-chip[aria-pressed="true"] { background: var(--on-navy-title); border-color: var(--on-navy-title); color: var(--brand-navy); }
.pw-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--blue-ink); font: 700 13px/1.3 var(--font-sans); white-space: nowrap; }
.pw-badge .pw-ic { width: 14px; height: 14px; }
.pw-badge--mint { background: var(--surface-mint); color: var(--mint-ink); }
.pw-badge--neutral { background: var(--surface-wash); color: var(--ink-soft); }
.pw-badge--review { background: var(--status-review); color: var(--brand-navy); }
.pw-badge--live { background: var(--surface); color: var(--status-danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-danger) 25%, transparent); }
.pw-badge--live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-danger); animation: pw-pulse 2s ease-in-out infinite; }
.pw-badge--on-navy { background: var(--brand-mint); color: var(--brand-navy); }

/* ---- Form and select ------------------------------------------------------- */
.pw-form { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-raised), var(--shadow-card); }
.pw-form__head { display: grid; gap: var(--space-2); }
.pw-form__fields { display: grid; gap: var(--space-4); }
.pw-field { display: grid; gap: 6px; }
.pw-field > label, .pw-field__label { font-size: 14px; font-weight: 700; color: var(--brand-navy); }
.pw-field__hint { font-weight: 400; color: var(--ink-muted); }
.pw-input { width: 100%; min-width: 0; height: var(--pw-control); padding: 0 14px; border: 1.5px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 max(var(--pw-control-font), 14px)/1.4 var(--font-sans); transition: border-color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-input::placeholder { color: var(--ink-muted); }
textarea.pw-input { height: auto; min-height: calc(var(--pw-control) * 2); padding: 10px 14px; }
.pw-input:hover { border-color: var(--ink-muted); }
.pw-input:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 22%, transparent); }
.pw-field__error { display: none; align-items: center; gap: 6px; font-size: 13.5px; color: var(--status-danger); }
.pw-field__error .pw-ic { width: 16px; height: 16px; }
.pw-field.is-invalid .pw-input, .pw-field.is-invalid .pw-select__button { border-color: var(--status-danger); }
.pw-field.is-invalid .pw-field__error { display: flex; animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-form__done { display: none; justify-items: center; gap: var(--space-3); padding: var(--space-6); text-align: center; animation: pw-pop var(--pw-slow) var(--pw-ease); }
.pw-form__done svg { width: 64px; height: 64px; }
.pw-form__done circle { fill: var(--surface-mint); }
.pw-form__done path { fill: none; stroke: var(--mint-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; animation: pw-draw .6s var(--pw-ease) .2s both; }
.pw-form__done b { font-size: 20px; color: var(--brand-navy); }
.pw-form__done p { color: var(--ink-soft); }
.pw-form.is-done .pw-form__done { display: grid; }
.pw-form.is-done .pw-form__fields, .pw-form.is-done .pw-form__head { display: none; }

/* Select: bundle.js builds this around a native <select class="pw-select"> and keeps both in sync. */
select.pw-select { width: 100%; min-height: var(--pw-control); padding: 12px 14px; border: 1.5px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/1.4 var(--font-sans); }
.pw-select-wrap { position: relative; }
.pw-select-wrap select.pw-select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pw-select__button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--pw-control); padding: 4px 12px 4px 6px; border: 1.5px solid var(--line-control); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 400 max(var(--pw-control-font), 14px)/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-select__button:hover { border-color: var(--ink-muted); }
.pw-select__button:focus-visible, .pw-select-wrap.is-open .pw-select__button { outline: none; border-color: var(--action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-blue) 22%, transparent); }
.pw-select__button .pw-tile { width: calc(var(--pw-control) - 14px); height: calc(var(--pw-control) - 14px); border-radius: var(--radius-md); }
[data-pw-mode="app"] .pw-select__button .pw-tile { width: 24px; height: 24px; border-radius: var(--radius-sm); }
[data-pw-mode="app"] .pw-select__value small, [data-pw-mode="help"] .pw-select__value small { display: none; }
[data-pw-mode="app"] .pw-select__option { grid-template-columns: 24px minmax(0, 1fr) 16px; padding: 6px 8px; font-size: 13px; }
[data-pw-mode="app"] .pw-select__option .pw-tile { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.pw-select__button .pw-tile .pw-ic { width: 18px; height: 18px; }
.pw-select__value { flex: 1; min-width: 0; display: grid; }
.pw-select__value b { font-weight: 500; color: var(--brand-navy); }
.pw-select__value small { font-size: 12.5px; color: var(--ink-muted); }
.pw-select__chev { color: var(--ink-muted); transition: transform var(--pw-med) var(--pw-ease); }
.pw-select-wrap.is-open .pw-select__chev { transform: rotate(180deg); color: var(--action); }
.pw-select__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; display: grid; gap: 2px; max-height: 400px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); transform-origin: top; animation: pw-pop var(--pw-fast) var(--pw-ease); }
.pw-select__list[hidden] { display: none; }
.pw-select__option { display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; gap: var(--space-3); align-items: center; padding: 8px; border-radius: var(--radius-md); cursor: pointer; }
.pw-select__option .pw-tile { width: 34px; height: 34px; border-radius: var(--radius-md); }
.pw-select__option .pw-tile .pw-ic { width: 18px; height: 18px; }
.pw-select__option b { display: block; font-weight: 500; color: var(--brand-navy); }
.pw-select__option small { font-size: 12.5px; color: var(--ink-muted); }
.pw-select__option > .pw-ic { color: var(--action); opacity: 0; width: 18px; height: 18px; }
.pw-select__option.is-active { background: var(--surface-wash); }
.pw-select__option[aria-selected="true"] { background: var(--surface-selected); }
.pw-select__option[aria-selected="true"] b { color: var(--ink-selected); font-weight: 700; }
.pw-select__option[aria-selected="true"] > .pw-ic { opacity: 1; }

/* ---- Dialog ---------------------------------------------------------------- */
.pw-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--radius-2xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); }
.pw-dialog[open] { animation: pw-pop var(--pw-med) var(--pw-ease); }
.pw-dialog::backdrop { background: color-mix(in srgb, var(--brand-navy) 72%, transparent); backdrop-filter: blur(4px); animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); }
.pw-dialog__body { padding: 0 var(--space-6) var(--space-6); display: grid; gap: var(--space-4); }
.pw-dialog__foot { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); background: var(--surface-wash); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); }
[data-pw-mode="app"] .pw-dialog, .pw-dialog[data-pw-mode="app"] { width: min(560px, calc(100vw - 32px)); border-radius: var(--radius-xl); }
[data-pw-mode="app"] .pw-dialog__head, .pw-dialog[data-pw-mode="app"] .pw-dialog__head { padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); }
[data-pw-mode="app"] .pw-dialog__body, .pw-dialog[data-pw-mode="app"] .pw-dialog__body { padding: var(--space-5); font-size: 14px; }
[data-pw-mode="app"] .pw-dialog__foot, .pw-dialog[data-pw-mode="app"] .pw-dialog__foot { padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }

/* ---- Close button: the one X, everywhere ----------------------------------- */
.pw-close { display: inline-grid; place-items: center; width: var(--pw-control); height: var(--pw-control); flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--surface-wash); color: var(--brand-navy); cursor: pointer; transition: background-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease), transform var(--pw-med) var(--pw-ease); }
.pw-close .pw-ic { width: var(--pw-icon); height: var(--pw-icon); }
.pw-close:hover { background: var(--surface-selected); color: var(--ink-selected); transform: rotate(90deg); }
.pw-close--sm { width: var(--pw-control-sm); height: var(--pw-control-sm); }
.pw-close--sm .pw-ic { width: calc(var(--pw-icon) - 2px); height: calc(var(--pw-icon) - 2px); }
.pw-close--on-navy { background: color-mix(in srgb, var(--on-navy-title) 10%, transparent); color: var(--on-navy-title); }
.pw-close--on-navy:hover { background: color-mix(in srgb, var(--on-navy-title) 20%, transparent); color: var(--on-navy-title); }
[data-pw-mode="app"] .pw-close { background: transparent; color: var(--ink-muted); }
[data-pw-mode="app"] .pw-close:hover { background: var(--surface-wash); color: var(--brand-navy); transform: none; }

/* ---- Type for the Help Center and the app ---------------------------------- */
.pw-help-title { font-size: 36px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); text-wrap: balance; }
.pw-help-h2 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.pw-help-h3 { font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--brand-navy); }
.pw-app-display { font-size: 24px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-navy); }
.pw-app-title { font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--brand-navy); }
.pw-app-heading { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--brand-navy); }
.pw-app-body { font-size: 13px; line-height: 1.45; color: var(--ink); }
.pw-app-caption { font-size: 12px; line-height: 1.35; color: var(--ink-muted); }
@media (max-width: 640px) { .pw-help-title { font-size: 28px; } }

/* ---- Menu: the one action menu (the app builds it on Radix) ----------------- */
.pw-menu { display: grid; gap: 2px; min-width: 220px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); font-size: max(calc(var(--pw-control-font) - 1px), 13px); animation: pw-pop var(--pw-fast) var(--pw-ease); }
.pw-menu__item { display: grid; grid-template-columns: var(--pw-icon) minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: calc(var(--pw-control) - 4px); padding: 0 10px; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.pw-menu__item .pw-ic { color: var(--ink-muted); }
.pw-menu__item kbd { font: 500 12px/1 var(--font-sans); color: var(--ink-muted); }
.pw-menu__item:hover, .pw-menu__item[data-highlighted] { background: var(--surface-wash); }
.pw-menu__item:hover .pw-ic { color: var(--brand-navy); }
.pw-menu__item--danger, .pw-menu__item--danger .pw-ic { color: var(--status-danger); }
.pw-menu__item--danger:hover { background: color-mix(in srgb, var(--status-danger) 8%, var(--surface)); }
.pw-menu__sep { height: 1px; margin: 4px 6px; background: var(--line); }
.pw-menu__label { padding: 8px 10px 4px; }

/* Plannerly site - the website and the Help Center: header, footer, FAQ, consent banner, video facade. */
/* ---- Site header ----------------------------------------------------------- */
.pw-header { position: sticky; top: 0; z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-8); min-height: var(--header-height); padding: 8px var(--space-10); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow var(--pw-med) var(--pw-ease), border-color var(--pw-med) var(--pw-ease); }
.pw-header.is-scrolled { border-bottom-color: transparent; box-shadow: var(--shadow-header); }
.pw-header__logo { display: flex; }
.pw-header__logo img { display: block; height: 28px; width: auto; }
.pw-header__nav { display: flex; gap: var(--space-6); }
.pw-header__nav a { position: relative; color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; padding-block: 12px; transition: color var(--pw-fast) var(--pw-ease); }
.pw-header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--pw-med) var(--pw-ease); }
.pw-header__nav a:hover { color: var(--brand-navy); }
.pw-header__nav a:hover::after, .pw-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.pw-header__nav a[aria-current="page"] { color: var(--brand-navy); font-weight: 700; }
.pw-header__end { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.pw-header__signin { color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 500; }
.pw-header__signin:hover { color: var(--brand-navy); }
.pw-header__menu { display: none; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--brand-navy); cursor: pointer; }
@media (max-width: 900px) { .pw-header__nav { gap: var(--space-4); } }
@media (max-width: 640px) {
  .pw-header { padding-inline: var(--space-4); gap: var(--space-3); }
  .pw-header__nav, .pw-header__signin { display: none; }
  .pw-header__menu { display: inline-flex; }
}

/* ---- Site footer ----------------------------------------------------------- */
.pw-footer { padding: var(--space-16) var(--space-10) var(--space-10); }
.pw-footer__grid { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.pw-footer__brand { display: grid; gap: var(--space-4); align-content: start; }
.pw-footer__brand img { height: 26px; width: auto; }
.pw-footer h2 { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-muted); margin-bottom: var(--space-4); }
.pw-footer ul { display: grid; gap: 10px; }
.pw-footer a:not(.pw-btn) { color: var(--on-navy); text-decoration: none; font-size: 15px; transition: color var(--pw-fast) var(--pw-ease); }
.pw-footer a:not(.pw-btn):hover { color: var(--brand-mint); }
.pw-footer__base { max-width: var(--container-max); margin: var(--space-10) auto 0; padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--on-navy-title) 12%, transparent); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: 14px; color: var(--on-navy-muted); }
@media (max-width: 900px) { .pw-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pw-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .pw-footer { padding-inline: var(--space-4); } }

/* ---- Video facade ---------------------------------------------------------- */
.pw-video { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius-xl); overflow: hidden; cursor: pointer; scroll-margin-top: calc(var(--header-height, 0px) + var(--space-4)); color: var(--on-navy-title); font: inherit; text-align: left; isolation: isolate;
  background:
    radial-gradient(ellipse at 88% 0%, color-mix(in srgb, var(--brand-blue) 34%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--brand-mint) 18%, transparent), transparent 50%),
    linear-gradient(140deg, var(--brand-navy-deep), var(--brand-navy) 60%, var(--brand-navy-raised));
  box-shadow: var(--shadow-raised); }
.pw-video__num { position: absolute; right: -0.04em; bottom: -0.22em; z-index: -1; font-size: 220px; line-height: 1; font-weight: 900; letter-spacing: -0.06em; color: color-mix(in srgb, var(--on-navy-title) 7%, transparent); transition: transform var(--pw-slow) var(--pw-ease); }
.pw-video:hover .pw-video__num { transform: translateX(-8px); }
.pw-video__plate { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--brand-mint); color: var(--brand-navy); font-family: var(--font-condensed); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; max-width: calc(100% - 136px); }
.pw-video__length { position: absolute; top: 20px; right: 22px; padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand-navy-deep) 70%, transparent); color: var(--on-navy-title); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pw-video__play { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--surface); color: var(--action); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); transition: transform var(--pw-med) var(--pw-ease); }
.pw-video__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--surface); animation: pw-ring 2.4s ease-out infinite; }
.pw-video:hover .pw-video__play { transform: scale(1.08); }
.pw-video__play .pw-ic { width: 30px; height: 30px; margin-left: 4px; }
.pw-video__meta { position: absolute; left: 24px; right: 24px; bottom: 22px; display: grid; gap: 6px; }
.pw-video__meta b { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 900; }
.pw-video__meta span { font-size: 14px; color: var(--on-navy-soft); }
.pw-video.is-playing .pw-video__play::after { animation: none; opacity: 0; }
.pw-video.is-playing { cursor: auto; }
.pw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
@media (max-width: 640px) { .pw-video__meta { left: 18px; right: 18px; bottom: 16px; } .pw-video__meta b { font-size: 19px; } .pw-video__play { width: 58px; height: 58px; } .pw-video__num { font-size: 150px; } .pw-video__plate { top: 14px; left: 14px; max-width: calc(100% - 112px); } .pw-video__length { top: 14px; right: 14px; } }
/* Inline (pw-video--inline): a video in running text. No plate, numeral or title; the poster is our own stored still
   (never YouTube-hosted) or, without one, the navy ground. In figure.pw-video-figure, with an optional caption. */
.pw-video-figure { display: grid; gap: var(--space-2); min-width: 0; margin: 0; }
.pw-video-figure > figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.pw-video--inline { border-radius: var(--radius-lg); box-shadow: none; }
/* Every facade shows the video's still behind its play button, with a shade that keeps the plate and title readable. */
.pw-video .pw-video__poster { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: cover; }
.pw-video .pw-video__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-navy-deep) 10%, transparent) 0%, color-mix(in srgb, var(--brand-navy-deep) 30%, transparent) 50%, color-mix(in srgb, var(--brand-navy-deep) 82%, transparent) 100%); }
.pw-video:has(.pw-video__poster) .pw-video__num { display: none; }
.pw-video--inline .pw-video__length { top: 14px; right: 14px; }

/* ---- Video with chapters (VideoChapters; EpisodeBlock after airing) ------------
   Numbered rows (button, or a link to the recording at its second); the row playing is aria-current.
   .pw-recording__lead holds the facade with its details (.pw-recording__meta) beside it. Once the video plays
   (.is-playing, set by bundle.js when the facade or a chapter starts it) the player fills the block's width and
   the details, and side-by-side chapters, move below it. The poster is never framed by a colour of its own.
   Where something sat beside the player, bundle.js puts the facade in .pw-recording__player with a pill above its
   top-right corner (.pw-recording__size, outside the player and clear of YouTube's controls): "Smaller video"
   sets .is-smaller, the layout from before play with the video still playing; "Bigger video" clears it. The pill
   is hidden below bp-md, where the block stacks anyway. */
.pw-recording { display: grid; gap: var(--space-5); }
.pw-recording__lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-6) var(--space-8); align-items: center; }
.pw-recording__meta { display: grid; gap: var(--space-3); align-content: center; min-width: 0; }
.pw-recording__meta p { color: var(--ink-soft); }
.pw-recording__chapters { display: grid; gap: var(--space-3); width: 100%; max-width: 640px; justify-self: center; }
.pw-recording__chapters > .pw-head { text-align: center; justify-items: center; max-width: none; }
.pw-recording--side { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; gap: var(--space-8); }
.pw-recording--side .pw-recording__chapters { justify-self: stretch; }
/* Side by side (Clive, 15 Oct 2026): the video takes its column's full width, between the details' heading and text
   (.pw-recording__intro) and what it covers (.pw-recording__covers). The chapters column is size-contained, so the
   video column alone sets the row's height, and its list scrolls in a panel that fills it (at least 26rem). A fade
   and a "More chapters" pill (the island's .has-more) say there is more below; .has-above fades the top. */
.pw-recording--side > .pw-recording__lead { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-5); }
.pw-recording__intro { align-content: start; }
.pw-recording__covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); }
.pw-recording--side .pw-recording__chapters { display: flex; flex-direction: column; gap: var(--space-3); min-height: 26rem; max-width: none; contain: size; }
.pw-recording--side .pw-recording__chapters > .pw-head { text-align: left; justify-items: start; }
.pw-chapters-scroll { position: relative; display: flex; flex: 1; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.pw-chapters-scroll > .pw-chapters { flex: 1; min-height: 0; padding: var(--space-2); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong, var(--line)) transparent; }
.pw-chapters-scroll::before, .pw-chapters-scroll::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 72px; opacity: 0; pointer-events: none; transition: opacity var(--pw-med) var(--pw-ease); }
.pw-chapters-scroll::before { top: 0; height: 40px; background: linear-gradient(var(--surface), transparent); }
.pw-chapters-scroll::after { bottom: 0; background: linear-gradient(transparent, var(--surface) 70%); }
.pw-chapters-scroll.has-above::before, .pw-chapters-scroll.has-more::after { opacity: 1; }
.pw-chapters-scroll__more { position: absolute; left: 50%; bottom: var(--space-3); z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: var(--pw-control-sm); padding: 0 14px; border: 0; border-radius: var(--radius-pill); background: var(--brand-navy); color: var(--on-navy-title); font: inherit; font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-lift); cursor: pointer; transform: translateX(-50%); }
.pw-chapters-scroll__more[hidden] { display: none; }
.pw-chapters-scroll__more .pw-ic { width: 16px; height: 16px; }
.pw-chapters-scroll__more:hover { background: var(--brand-navy-raised, var(--brand-navy)); }
.pw-recording--side.is-playing:not(.is-smaller) .pw-recording__chapters { contain: none; min-height: 0; }
.pw-recording--side.is-playing:not(.is-smaller) .pw-chapters-scroll > .pw-chapters { max-height: 26rem; }
.pw-recording.is-playing:not(.is-smaller), .pw-recording.is-playing:not(.is-smaller) .pw-recording__lead { grid-template-columns: minmax(0, 1fr); }
.pw-recording--side.is-playing:not(.is-smaller) .pw-recording__chapters { justify-self: center; }
.pw-recording__player { display: grid; gap: var(--space-2); min-width: 0; scroll-margin-top: calc(var(--header-height, 0px) + var(--space-4)); }
.pw-recording__size { justify-self: end; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--pw-control-sm); padding: 0 14px; border: 1.5px solid var(--line-button); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-button); font: 700 14px/1 var(--font-sans); white-space: nowrap; cursor: pointer; transition: border-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease); }
.pw-recording__size .pw-ic { width: 16px; height: 16px; }
.pw-recording__size:hover { border-color: var(--action-hover); color: var(--action-hover); }
.pw-recording__size:focus:not(:focus-visible) { outline: none; }
@media (max-width: 900px) { .pw-recording--side, .pw-recording__lead { grid-template-columns: minmax(0, 1fr); } .pw-recording__size { display: none; } .pw-recording--side .pw-recording__chapters { contain: none; min-height: 0; } .pw-chapters-scroll > .pw-chapters { max-height: 24rem; } }
@media (max-width: 560px) { .pw-recording__covers { grid-template-columns: minmax(0, 1fr); } }
.pw-chapters { display: grid; gap: 6px; counter-reset: pw-ch; }
.pw-chapters :is(button, a[href]) { counter-increment: pw-ch; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--ink); font: 500 15px/1.35 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--pw-med) var(--pw-ease), border-color var(--pw-med) var(--pw-ease), color var(--pw-med) var(--pw-ease); }
.pw-chapters :is(button, a[href]):focus:not(:focus-visible) { outline: none; }
.pw-chapters :is(button, a[href])::before { content: counter(pw-ch); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-wash); color: var(--ink-muted); font-size: 12.5px; font-weight: 700; transition: background-color var(--pw-med) var(--pw-ease), color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease); }
.pw-chapters :is(button, a[href])[aria-current="true"]::before { transform: scale(1.06); }
.pw-chapters :is(button, a[href]) span { font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-chapters :is(button, a[href]):hover { background: var(--surface-wash); }
.pw-chapters :is(button, a[href])[aria-current="true"] { background: var(--surface-selected); border-color: color-mix(in srgb, var(--brand-blue) 35%, transparent); color: var(--ink-selected); }
.pw-chapters :is(button, a[href])[aria-current="true"]::before { background: var(--action); color: var(--on-action); }

/* ---- FAQ ------------------------------------------------------------------- */
/* No scroll anchoring inside a FAQ: as one answer closes above another, the browser would otherwise scroll the
   page by itself to keep whatever was on screen in place, and the whole page seems to slide (Clive, 15 Oct 2026). */
.pw-faq { display: grid; gap: var(--space-3); overflow-anchor: none; }
.pw-faq details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: box-shadow var(--pw-med) var(--pw-ease), border-color var(--pw-med) var(--pw-ease); }
.pw-faq details[open] { border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--line)); box-shadow: var(--shadow-card); }
.pw-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 56px; padding: 14px 20px; font-size: 17px; font-weight: 700; color: var(--brand-navy); cursor: pointer; list-style: none; }
.pw-faq summary::-webkit-details-marker { display: none; }
.pw-faq summary .pw-ic { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--surface-wash); color: var(--action); transition: transform var(--pw-med) var(--pw-ease), background-color var(--pw-fast) var(--pw-ease); }
.pw-faq details[open] summary .pw-ic { transform: rotate(180deg); background: var(--surface-selected); }
.pw-faq details > div { padding: 0 20px 18px; color: var(--ink-soft); }
.pw-faq details > div a { color: var(--action); font-weight: 600; text-underline-offset: 2px; }
.pw-faq details.is-closing summary .pw-ic { transform: none; background: var(--surface-wash); }
.pw-faq summary:hover { color: var(--action-hover); }
.pw-faq summary:hover .pw-ic { background: var(--surface-selected); }

/* ---- Consent banner -------------------------------------------------------- */
.pw-consent { position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); z-index: var(--z-consent); max-width: 560px; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-2xl); background: var(--brand-navy); color: var(--on-navy); box-shadow: var(--shadow-float); animation: pw-pop var(--pw-slow) var(--pw-ease); }
.pw-consent[hidden] { display: none; }
.pw-consent__head { display: flex; align-items: center; gap: var(--space-3); color: var(--on-navy-title); font-weight: 700; }
.pw-consent__head .pw-tile { width: 36px; height: 36px; border-radius: 50%; }
.pw-consent p { font-size: 15px; color: var(--on-navy-soft); }
.pw-consent a:not(.pw-btn) { color: var(--on-navy-title); font-size: 14px; }
.pw-consent--inline { position: static; }

/* ---- ScreenTour: real screens under numbered tabs, turned only by the reader (14 Oct 2026) ----------------
   One light tour for a walkthrough (with a header naming the current screen) and for a step's screenshots
   (.pw-tour--steps, labels only). On the page's own ground, never in a navy band, so the blue in the screens reads
   as the product's own. Every screen shares the stage's one grid cell, so the stage is as tall as the tallest screen
   (at most 16:10 of its width, 62.5cqi, or 75% of the window) whichever shows. A tour of one shape (.is-uniform, set
   by the script) lays out only the current screen and its neighbours, so the rest stay unloaded until the reader
   nears them. */
.pw-tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.pw-tour--steps { gap: var(--space-3); }
.pw-tour__head { display: grid; gap: 2px; min-width: 0; }
.pw-tour__title { margin: 0; color: var(--brand-navy); font: 700 18px/1.35 var(--font-sans); }
.pw-tour__sub { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.pw-tour:not(.is-ready) .pw-tour__tabs { display: none; }
.pw-tour:not(.is-ready) .pw-tour__slide:not(.is-current) { display: none; }
/* The tabs: one per screen, numbered and named by its label (data-label). Each looks like the button it is; the
   current one is surface-selected with an action number. */
.pw-tour__tabs { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pw-tour__tabs li { flex: 1 1 auto; min-width: 0; }
.pw-tour__tabs button { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; min-height: var(--tap-min); padding: 7px 12px 7px 8px; border: 1px solid var(--line-button); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink-soft); font: 500 14px/1.3 var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--pw-fast) var(--pw-ease), background-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-fast) var(--pw-ease); }
.pw-tour__tabs b { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-wash); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease); }
.pw-tour__tabs span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pw-tour__tabs button:hover { border-color: var(--action); box-shadow: var(--shadow-card); color: var(--ink); }
.pw-tour__tabs button:hover b { background: var(--surface-selected); box-shadow: none; color: var(--action); }
.pw-tour__tabs [aria-current="step"], .pw-tour__tabs [aria-current="step"]:hover { border-color: var(--action); background: var(--surface-selected); box-shadow: inset 0 0 0 1px var(--action); color: var(--ink-selected); }
.pw-tour__tabs [aria-current="step"] b { background: var(--action); box-shadow: none; color: var(--on-action); }
/* Where a name would be cut short (.is-compact, set by the script), the tabs are numbered and the current
   screen's name is a line under them. */
.pw-tour.is-compact .pw-tour__tabs { position: relative; padding-bottom: 26px; }
.pw-tour.is-compact .pw-tour__tabs li { flex: 0 1 48px; }
.pw-tour.is-compact .pw-tour__tabs button { justify-content: center; padding: 6px 0; }
.pw-tour.is-compact .pw-tour__tabs span { display: none; }
.pw-tour.is-compact .pw-tour__tabs .is-current span { position: absolute; right: 0; bottom: 0; left: 0; display: block; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
/* The stage: the screenshot is the hero, on a white mount with a hairline and shadow-raised. overflow: clip, not
   hidden: a scroll container's minimum height is 0, which collapses the stage in a narrow column. */
.pw-tour__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: clip; border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-raised); container-type: inline-size; touch-action: pan-y; }
.pw-tour__slide { grid-area: 1 / 1; display: grid; min-width: 0; align-content: center; margin: 0; visibility: hidden; opacity: 0; transition: opacity var(--pw-med) var(--pw-ease), visibility 0s linear var(--pw-med); }
.pw-tour__slide.is-current { z-index: 1; visibility: visible; opacity: 1; transition: opacity var(--pw-med) var(--pw-ease); }
.pw-tour.is-uniform .pw-tour__slide:not(.is-current, .is-near, .is-leaving) { display: none; }
.pw-tour__slide picture { display: block; }
.pw .pw-tour__slide img { display: block; width: 100%; height: auto; max-height: 75vh; max-height: min(62.5cqi, 75vh); object-fit: contain; }
/* CarouselArrows at the stage's sides. At either end the arrow with nowhere to go is hidden, not greyed: over a
   wide screenshot a greyed arrow reads as a smudge. */
.pw-tour__arrow { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; }
.pw-tour__prev { left: var(--space-3); }
.pw-tour__next { right: var(--space-3); }
.pw-tour__arrow[aria-disabled="true"] { visibility: hidden; }
@media (max-width: 640px) { .pw-tour__sub { font-size: 15px; } }
/* On a narrow stage (a phone, or a narrow column) the arrows are smaller and closer to the edge. */
@container (max-width: 480px) {
  .pw-tour__arrow { width: 36px; height: 36px; }
  .pw-tour__prev { left: var(--space-2); }
  .pw-tour__next { right: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { .pw-tour__slide, .pw-tour__tabs :is(button, b) { transition: none; } }

/* ---- Contents menu ----------------------------------------------------------- */
.pw-contents { position: sticky; top: calc(var(--header-height) + var(--space-4)); display: grid; gap: var(--space-3); }
.pw-contents__toggle { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--pw-control); padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--brand-navy); font: 700 15px/1 var(--font-sans); cursor: pointer; box-shadow: var(--shadow-card); transition: border-color var(--pw-fast) var(--pw-ease); }
.pw-contents__toggle:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); }
.pw-contents__toggle .pw-tile { width: 30px; height: 30px; border-radius: var(--radius-md); }
.pw-contents__progress { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.pw-contents__chev { color: var(--ink-muted); transition: transform var(--pw-med) var(--pw-ease); }
.pw-contents.is-open .pw-contents__chev { transform: rotate(180deg); }
.pw-contents__panel { display: grid; gap: 2px; max-height: calc(100vh - var(--header-height) - 140px); overflow-y: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); overscroll-behavior: contain; transform-origin: top; }
.pw-contents:not(.is-open) .pw-contents__panel { display: none; }
.pw-motion .pw-contents.is-open .pw-contents__panel { animation: pw-pop var(--pw-med) var(--pw-ease); }
.pw-contents__bar { display: block; height: 4px; margin: 4px 6px 8px; border-radius: var(--radius-pill); background: var(--surface-wash); overflow: hidden; }
.pw-contents__bar i { display: block; height: 100%; width: var(--value, 0%); background: var(--status-success); border-radius: inherit; transition: width var(--pw-slow) var(--pw-ease); }
.pw-contents__item { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; border-radius: var(--radius-md); color: var(--ink-soft); font-size: 14px; line-height: 1.4; text-decoration: none; transition: background-color var(--pw-fast) var(--pw-ease), color var(--pw-fast) var(--pw-ease); }
.pw-contents__item:hover { background: var(--surface-wash); color: var(--brand-navy); }
.pw-contents__item i { display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; background: var(--surface-wash); color: var(--ink-muted); font: 700 11.5px/1 var(--font-sans); font-style: normal; transition: background-color var(--pw-med) var(--pw-ease), color var(--pw-med) var(--pw-ease); }
.pw-contents__item i .pw-ic { width: 12px; height: 12px; }
.pw-contents__item.is-done i { background: var(--brand-mint); color: var(--brand-navy); }
.pw-contents__item[aria-current="true"] { background: var(--surface-selected); color: var(--ink-selected); font-weight: 700; }
.pw-contents__item[aria-current="true"] i { background: var(--action); color: var(--on-action); }
.pw-contents__item.is-done[aria-current="true"] i { background: var(--brand-mint); color: var(--brand-navy); }
.pw-contents__sub { display: grid; gap: 2px; margin: 0 0 4px 34px; }
.pw-contents__sub a { padding: 5px 10px; border-radius: var(--radius-md); color: var(--ink-muted); font-size: 13.5px; line-height: 1.35; text-decoration: none; }
.pw-contents__sub a:hover { background: var(--surface-wash); color: var(--brand-navy); }
.pw-contents__quick { display: flex; gap: 6px; padding: 8px 6px 2px; margin-top: 6px; border-top: 1px solid var(--line); }
.pw-contents__quick button { flex: 1; min-height: 32px; border: 0; border-radius: var(--radius-md); background: var(--surface-wash); color: var(--ink-soft); font: 500 13px/1 var(--font-sans); cursor: pointer; }
.pw-contents__quick button:hover { background: var(--surface-selected); color: var(--ink-selected); }
@media (max-width: 900px) {
  .pw-contents { position: sticky; top: calc(var(--header-height) + 8px); z-index: var(--z-lens); }
  .pw-contents__panel { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 60vh; box-shadow: var(--shadow-pop); }
}


/* Plannerly web - website-only blocks: start bar, lens, hero, moves, episode, live card, job card, kit, proof,
   help, next job, price, course, certificate, story; the website pages; case studies, quote wall and events. */
/* ---- Start bar (phones) ---------------------------------------------------- */
.pw-startbar { display: none; }
@media (max-width: 640px) {
  .pw-startbar { position: sticky; bottom: 0; z-index: var(--z-startbar); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: var(--shadow-startbar); transform: translateY(110%); transition: transform var(--pw-med) var(--pw-ease); }
  .pw-startbar.is-visible { transform: none; }
}
.pw-startbar__note { display: grid; font-size: 13px; color: var(--ink-muted); line-height: 1.35; }
.pw-startbar__note b { color: var(--brand-navy); font-size: 14px; }

/* ---- Lens bar -------------------------------------------------------------- */
.pw-lens { position: sticky; top: var(--header-height); z-index: var(--z-lens); display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-10); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.pw-lens::-webkit-scrollbar { display: none; }
.pw-lens__label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink-muted); margin-right: var(--space-2); white-space: nowrap; }
.pw-lens__label .pw-ic { width: 16px; height: 16px; color: var(--blue-ink); }
.pw-lens .pw-chip { min-height: 38px; padding: 0 14px; }
.pw-lens-swap { transition: opacity var(--pw-med) var(--pw-ease); }
.pw-lens-swap.is-swapping { opacity: 0; }
@media (max-width: 640px) { .pw-lens { padding-inline: var(--space-4); } }
[data-lens-only][hidden] { display: none !important; }
.pw-motion [data-lens-only]:not([hidden]) { animation: pw-fade var(--pw-med) var(--pw-ease); }

/* ---- Hero ------------------------------------------------------------------ */
.pw-hero { padding: var(--space-16) var(--space-10) calc(var(--space-16) + var(--space-4)); }
.pw-hero__grid { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.pw-hero__copy { display: grid; gap: var(--space-5); align-content: start; }
.pw-hero__copy .pw-row { margin-top: var(--space-1); }
.pw-hero__aside { min-width: 0; position: relative; }
.pw-hero__crumb { display: flex; gap: var(--space-2); align-items: center; font-size: 14px; color: var(--ink-muted); }
.pw-hero__crumb a { color: inherit; text-decoration: none; }
.pw-hero__crumb a:hover { color: var(--brand-navy); }
.pw-hero__proof { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 14px; color: var(--ink-muted); }
.pw-hero__proof span { display: inline-flex; gap: 6px; align-items: center; }
.pw-hero__proof .pw-ic { width: 16px; height: 16px; color: var(--mint-ink); }
.pw-navy .pw-hero__proof { color: var(--on-navy-soft); }
.pw-navy .pw-hero__proof .pw-ic { color: var(--brand-mint); }
@media (max-width: 900px) { .pw-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); } }
@media (max-width: 640px) { .pw-hero { padding: var(--space-12) var(--space-4); } }

/* App shot: a product window standing in for a real screenshot */
.pw-appshot { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised), var(--shadow-card); overflow: hidden; }
.pw-appshot img { display: block; width: 100%; }
.pw-appshot__chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-wash); border-bottom: 1px solid var(--line); }
.pw-appshot__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.pw-appshot__chrome span { margin-left: 8px; font-size: 12.5px; color: var(--ink-muted); }
.pw-appshot__body { padding: 16px; display: grid; gap: 14px; }
.pw-appshot__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.pw-appshot__head b { font-size: 15px; color: var(--brand-navy); }
.pw-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pw-kpis div { background: var(--surface-wash); border-radius: var(--radius-md); padding: 10px 12px; font-size: 12px; color: var(--ink-muted); }
.pw-kpis b { display: block; font-size: 22px; line-height: 1.1; font-weight: 900; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-kpis .is-good b { color: var(--mint-ink); }
.pw-teams { display: grid; }
.pw-teams li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 92px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.pw-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-navy); color: var(--brand-mint); font-size: 11px; font-weight: 700; flex: none; }
.pw-avatar--lg { width: 44px; height: 44px; font-size: 15px; }
.pw-teams .pw-bar { margin-top: 5px; }
.pw-bar { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--surface-wash); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--status-success); transition: width 1.1s var(--pw-ease); }
.pw-motion [data-pw-reveal]:not(.is-in) .pw-bar i { width: 0; }
.pw-status { justify-self: end; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; }
.pw-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pw-status--agreed { background: var(--surface-mint); color: var(--mint-ink); }
.pw-status--review { background: var(--surface-selected); color: var(--ink-selected); }
.pw-status--waiting { background: var(--surface-wash); color: var(--ink-muted); }
.pw-toast { position: absolute; left: -24px; bottom: -52px; display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); font-size: 13px; color: var(--ink); max-width: 280px; }
.pw-toast .pw-tile { width: 34px; height: 34px; border-radius: 50%; }
.pw-toast b { display: block; color: var(--brand-navy); font-size: 13.5px; }
@media (max-width: 640px) { .pw-toast { position: static; margin-top: var(--space-3); max-width: none; } }

/* ---- Moves ----------------------------------------------------------------- */
/* One column per move (--n, set by the block, at most 4), so three moves fill the row instead of leaving a gap.
   The line is drawn in segments, one from each number to the next (li::after over a grey li::before), so it starts
   and ends on a number at any count and in either direction, and always runs under the numbers. Each number turns
   mint as the line reaches it (--i, its place), and the last one pops when the line arrives (Clive, 15 Oct 2026).
   Without motion everything shows finished. */
.pw-moves { --pw-move-seg: .42s; --pw-move-lead: .3s; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-5); counter-reset: pw-move; }
.pw-moves > li { counter-increment: pw-move; position: relative; display: grid; grid-template-rows: auto 1fr; gap: var(--space-4); min-width: 0; }
.pw-moves > li:not(:last-child)::before, .pw-moves > li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 21px; left: 22px; width: calc(100% + var(--space-5)); height: 3px; border-radius: 3px; }
.pw-moves > li::before { background: var(--line); }
.pw-moves > li::after { background: linear-gradient(90deg, var(--brand-mint), var(--status-success)); transform-origin: left; transition: transform var(--pw-move-seg) linear calc(var(--pw-move-lead) + var(--i, 0) * var(--pw-move-seg)); }
.pw-motion .pw-moves:not(.is-in) > li::after { transform: scaleX(0); }
/* More than four moves wrap to a second row: the fourth number has nothing beside it to run to. */
.pw-moves > li:nth-child(4n):not(:last-child)::before, .pw-moves > li:nth-child(4n):not(:last-child)::after { display: none; }
.pw-moves__num { position: relative; z-index: 1; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: var(--brand-mint); color: var(--brand-navy); font-size: 17px; font-weight: 900; box-shadow: 0 0 0 6px var(--surface-wash); transition: transform var(--pw-med) var(--pw-ease), background-color .25s ease calc(var(--pw-move-lead) + var(--i, 0) * var(--pw-move-seg)), color .25s ease calc(var(--pw-move-lead) + var(--i, 0) * var(--pw-move-seg)); }
.pw-moves__num::before { content: counter(pw-move); }
.pw-motion .pw-moves:not(.is-in) .pw-moves__num { background: var(--brand-navy); color: var(--brand-mint); }
.pw-motion .pw-moves.is-in > li:last-child .pw-moves__num { animation: pw-move-arrive .5s var(--pw-ease) calc(var(--pw-move-lead) + var(--i, 0) * var(--pw-move-seg)) both; }
@keyframes pw-move-arrive { 0%, 100% { transform: none; } 45% { transform: scale(1.18); box-shadow: 0 0 0 6px var(--surface-wash), 0 0 0 12px color-mix(in srgb, var(--brand-mint) 35%, transparent); } }
.pw-moves__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); transition: transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease), border-color var(--pw-med) var(--pw-ease); }
.pw-moves > li:hover .pw-moves__card { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--brand-blue) 40%, var(--line)); }
.pw-moves > li:hover .pw-moves__num { transform: scale(1.08); }
.pw-moves__card > .pw-tile { width: 40px; height: 40px; border-radius: var(--radius-md); }
.pw-moves__card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 6px; }
.pw-moves__result { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface-mint); color: var(--mint-ink); font-size: 12.5px; font-weight: 700; }
.pw-moves__result .pw-ic { width: 14px; height: 14px; }
.pw-motion .pw-moves > li { opacity: 0; transform: translateY(18px); transition: opacity var(--pw-slow) var(--pw-ease), transform var(--pw-slow) var(--pw-ease); transition-delay: calc(var(--i, 0) * 120ms); }
.pw-motion .pw-moves.is-in > li { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .pw-moves { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-left: 64px; }
  .pw-moves > li:not(:last-child)::before, .pw-moves > li:not(:last-child)::after { top: 22px; left: -43px; width: 3px; height: calc(100% + var(--space-4)); }
  .pw-moves > li:nth-child(4n):not(:last-child)::before, .pw-moves > li:nth-child(4n):not(:last-child)::after { display: block; }
  .pw-moves > li::after { background: linear-gradient(180deg, var(--brand-mint), var(--status-success)); transform-origin: top; }
  .pw-motion .pw-moves:not(.is-in) > li::after { transform: scaleY(0); }
  .pw-moves__num { position: absolute; left: -64px; top: 0; }
}

/* ---- Episode --------------------------------------------------------------- */
.pw-episode { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.pw-episode__state[hidden] { display: none; }
.pw-episode__state { animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--radius-lg); background: var(--surface-wash); overflow: hidden; }
.pw-times > span { display: grid; gap: 2px; padding: 12px 14px; font-size: 12.5px; color: var(--ink-muted); }
.pw-times > span + span { box-shadow: inset 1px 0 0 var(--line); }
.pw-times b { font-size: 20px; line-height: 1.1; font-weight: 900; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-checklist { display: grid; gap: 10px; }
.pw-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.pw-checklist li > .pw-ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--surface-mint); color: var(--mint-ink); margin-top: 1px; }
.pw-navy .pw-checklist li > .pw-ic { background: color-mix(in srgb, var(--brand-mint) 20%, transparent); color: var(--brand-mint); }
@media (max-width: 900px) { .pw-episode { grid-template-columns: minmax(0, 1fr); } }

/* ---- Date tile and live card ----------------------------------------------- */
.pw-date { display: grid; justify-items: center; align-content: center; width: 72px; height: 80px; flex: none; border-radius: var(--radius-lg); background: var(--brand-navy); color: var(--on-navy-title); text-align: center; line-height: 1; }
.pw-date span:first-child { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-mint); }
.pw-date b { font-size: 32px; font-weight: 900; letter-spacing: -0.03em; margin: 4px 0 3px; }
.pw-date span:last-child { font-size: 12px; color: var(--on-navy-soft); }
.pw-live { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-2xl); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); transition: transform var(--pw-med) var(--pw-ease); }
.pw-live:hover { transform: translateY(-3px); }
.pw-live__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.pw-live__ep { font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.pw-live__main { display: flex; gap: var(--space-4); align-items: center; }
.pw-live__series { font-size: 13px; font-weight: 700; color: var(--blue-ink); }
.pw-live__kind { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--blue-ink); }
.pw-live__kind .pw-ic { flex: none; width: 18px; height: 18px; }
.pw-live__main h3 { margin-top: 4px; font-size: 20px; line-height: 1.25; font-weight: 900; letter-spacing: -0.01em; color: var(--brand-navy); }
.pw-live__note { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.pw-live__host { display: inline-flex; align-items: center; gap: 6px; }
.pw-live__host .pw-avatar { width: 22px; height: 22px; font-size: 9.5px; }

/* ---- Linked cards: one shell and one hover for job, course and story cards ----
   Keyboard focus gets the same feedback as hover (14 Oct 2026), and under reduced motion only the colours change. */
:is(.pw-job, .pw-course, .pw-story) { display: grid; align-content: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); min-width: 0; transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
:is(.pw-job, .pw-course, .pw-story, .pw-kit__file):is(:hover, :focus-visible) { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
@media (prefers-reduced-motion: reduce) { :is(.pw-job, .pw-course, .pw-story, .pw-kit__file):is(:hover, :focus-visible), :is(.pw-job__go, .pw-story__more .pw-ic) { transform: none !important; } }

/* ---- Job card -------------------------------------------------------------- */
.pw-job { position: relative; gap: 10px; }
.pw-job .pw-tile { margin-bottom: 4px; transition: background-color var(--pw-med) var(--pw-ease), color var(--pw-med) var(--pw-ease); }
.pw-job:is(:hover, :focus-visible) .pw-tile { background: var(--brand-navy); color: var(--brand-mint); }
.pw-job p { color: var(--ink-soft); font-size: 15px; }
.pw-job .pw-row { gap: 6px; margin-top: 4px; }
.pw-job__go { position: absolute; top: var(--space-6); right: var(--space-6); color: var(--action); opacity: 0; transform: translateX(-6px); transition: opacity var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease); }
.pw-job:is(:hover, :focus-visible) .pw-job__go { opacity: 1; transform: none; }

/* ---- Kit ------------------------------------------------------------------- */
.pw-kit { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-raised), var(--shadow-card); }
.pw-kit__cover { position: relative; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8); overflow: hidden; }
.pw-kit__cover h3 { font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; color: var(--on-navy-title); }
.pw-kit__cover p { color: var(--on-navy-soft); }
.pw-kit__facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-1); }
.pw-kit__facts li { padding: 6px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-navy-title) 10%, transparent); color: var(--on-navy); font-size: 12.5px; font-weight: 700; }
.pw-kit__stack { position: relative; height: 150px; margin-top: var(--space-4); }
.pw-kit__sheet { position: absolute; left: 50%; bottom: 0; width: 132px; height: 150px; margin-left: -66px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-float); display: grid; align-content: start; gap: 7px; transition: transform var(--pw-slow) var(--pw-ease); }
.pw-kit__sheet b { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--ink-muted); }
.pw-kit__sheet i { display: block; height: 7px; border-radius: 4px; background: var(--surface-wash); }
.pw-kit__sheet i:nth-of-type(2) { width: 70%; }
.pw-kit__sheet i.m { background: var(--surface-mint); width: 85%; }
.pw-kit__sheet:nth-child(1) { transform: translateX(-58px) rotate(-10deg); }
.pw-kit__sheet:nth-child(2) { transform: translateX(58px) rotate(9deg); }
.pw-kit__sheet:nth-child(3) { transform: translateY(-6px); background: var(--brand-mint); }
.pw-kit__sheet:nth-child(3) b { color: var(--brand-navy); }
.pw-kit__sheet:nth-child(3) i { background: color-mix(in srgb, var(--brand-navy) 14%, transparent); }
.pw-kit:hover .pw-kit__sheet:nth-child(1) { transform: translateX(-78px) rotate(-14deg); }
.pw-kit:hover .pw-kit__sheet:nth-child(2) { transform: translateX(78px) rotate(13deg); }
.pw-kit:hover .pw-kit__sheet:nth-child(3) { transform: translateY(-14px); }
.pw-kit__items { display: grid; gap: var(--space-3); align-content: center; padding: var(--space-8); }
.pw-kit__feature { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-pro); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand-blue) 45%, transparent); }
.pw-kit__feature .pw-tile { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.pw-kit__feature .pw-tile .pw-ic { width: 26px; height: 26px; }
.pw-kit__feature h4 { font-size: 18px; font-weight: 900; color: var(--brand-navy); }
.pw-kit__feature p { font-size: 14.5px; color: var(--ink-soft); margin-top: 4px; }
.pw-kit__feature .pw-row { margin-top: var(--space-3); }
.pw-kit__file { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-kit__type { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--surface-selected); color: var(--ink-selected); font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.pw-kit__type--sheet { background: var(--surface-mint); color: var(--mint-ink); }
.pw-kit__file b { display: block; font-size: 15px; color: var(--brand-navy); }
.pw-kit__file span { font-size: 13px; color: var(--ink-muted); }
.pw-kit__dl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-wash); color: var(--action); transition: background-color var(--pw-fast) var(--pw-ease); }
.pw-kit__file:hover .pw-kit__dl { background: var(--action); color: var(--on-action); }
.pw-kit__file:hover .pw-kit__dl .pw-ic { animation: pw-nudge .8s var(--pw-ease) infinite; }
@media (max-width: 900px) { .pw-kit { grid-template-columns: minmax(0, 1fr); } .pw-kit__stack { display: none; } }
@media (max-width: 640px) { .pw-kit__cover, .pw-kit__items { padding: var(--space-5); } .pw-kit__feature { grid-template-columns: minmax(0, 1fr); } .pw-kit__file { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); padding: 12px; } .pw-kit__type { width: 40px; height: 40px; } }

/* ---- Proof ----------------------------------------------------------------- */
.pw-proof { position: relative; display: grid; gap: var(--space-5); padding: var(--space-8); border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.pw-proof::before { content: "\201C"; position: absolute; top: -18px; right: 20px; font-size: 180px; line-height: 1; font-weight: 900; color: var(--surface-mint); pointer-events: none; }
.pw-proof > * { position: relative; }
.pw-proof blockquote { font-size: 24px; line-height: 1.4; font-weight: 500; letter-spacing: -0.012em; color: var(--brand-navy); text-wrap: pretty; }
.pw-proof figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: 14.5px; color: var(--ink-muted); }
.pw-proof figcaption b { display: block; color: var(--brand-navy); font-size: 15.5px; }
.pw-proof--rating { grid-template-columns: auto minmax(0, 1fr); align-items: center; background: var(--brand-navy); border-color: var(--brand-navy); color: var(--on-navy); }
.pw-proof--rating::before { color: color-mix(in srgb, var(--brand-mint) 12%, transparent); }
.pw-proof__score { font-size: 72px; line-height: .9; font-weight: 900; letter-spacing: -0.04em; color: var(--on-navy-title); font-variant-numeric: tabular-nums; }
.pw-proof--rating figcaption { color: var(--on-navy-soft); display: block; }
.pw-proof--rating figcaption b { display: inline; color: var(--on-navy-title); }
.pw-stars { display: flex; gap: 3px; color: var(--status-review); }
.pw-stars .pw-ic { width: 20px; height: 20px; fill: currentColor; stroke: none; }
@media (max-width: 640px) { .pw-proof { padding: var(--space-6); } .pw-proof blockquote { font-size: 19px; } .pw-proof__score { font-size: 56px; } }

/* ---- Help ------------------------------------------------------------------ */
.pw-help { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.pw-help__lead { margin-top: calc(-1 * var(--space-1)); color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.pw-help__group + .pw-help__group { margin-top: var(--space-2); }
.pw-help__stage { margin: var(--space-3) 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
/* The lesson card: its course's picture across the top, kept in view beside a long list. */
.pw-help__lesson { position: sticky; top: calc(var(--header-height, 0px) + var(--space-4)); overflow: hidden; }
.pw-help__media { display: block; width: calc(100% + 2 * var(--space-6)); max-width: none; height: auto; aspect-ratio: 16 / 9; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); object-fit: cover; }
.pw-links { display: grid; gap: 4px; }
.pw-links a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: var(--space-3); align-items: center; padding: 10px 12px; margin-inline: -12px; border-radius: var(--radius-lg); color: var(--brand-navy); text-decoration: none; font-weight: 500; transition: background-color var(--pw-fast) var(--pw-ease); }
.pw-links a .pw-tile { width: 36px; height: 36px; border-radius: var(--radius-md); }
.pw-links a .pw-tile .pw-ic { width: 18px; height: 18px; }
.pw-links a > .pw-ic { color: var(--ink-muted); width: 18px; height: 18px; transition: transform var(--pw-med) var(--pw-ease), color var(--pw-fast) var(--pw-ease); }
.pw-links a:hover { background: var(--surface-wash); }
.pw-links a:hover > .pw-ic { transform: translateX(4px); color: var(--action); }
@media (max-width: 900px) { .pw-help { grid-template-columns: minmax(0, 1fr); } .pw-help__lesson { position: static; } }
/* HelpBlock's cards layout (Clive's review, 15 Oct 2026: the /uses/ downloads and blog stories "look like they're
   lacking something"): each full story as a card across the page - its organisation's logo, or its name set as a
   wordmark, then its flag and place, the story's headline, and how it opens. Logos show in their own colours on
   the white card; a white logo (is-white) becomes a dark silhouette, and one on its own solid ground (is-solid)
   blends its ground into the card. */
.pw-storylinks { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.pw-storylinks > li { display: grid; min-width: 0; }
.pw-storylink { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-storylink:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pw-storylink__brand { display: flex; align-items: center; height: 36px; margin-bottom: var(--space-2); }
.pw-storylink__logo { display: block; width: auto; height: auto; max-width: 150px; max-height: 36px; object-fit: contain; }
.pw-storylink__logo.is-white { filter: brightness(0); opacity: .72; }
.pw-storylink__logo.is-solid { mix-blend-mode: multiply; }
.pw-storylink__wordmark { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 17px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; color: var(--brand-navy); }
.pw-storylink__place { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-muted); }
.pw-storylink__place > .pw-case__flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.pw-storylink__title { flex: 1; font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
.pw-storylink:hover .pw-storylink__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pw-storylink__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); font-size: 14px; font-weight: 700; color: var(--blue-ink); }
.pw-storylink__go .pw-ic { width: 16px; height: 16px; transition: transform var(--pw-med) var(--pw-ease); }
.pw-storylink:hover .pw-storylink__go .pw-ic { transform: translateX(2px); }
@media (max-width: 1080px) { .pw-storylinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pw-storylinks { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .pw-storylink { padding: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .pw-storylink, .pw-storylink__go .pw-ic { transition: none; } .pw-storylink:hover, .pw-storylink:hover .pw-storylink__go .pw-ic { transform: none; } }

/* ---- Next job -------------------------------------------------------------- */
.pw-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-8) var(--space-10); border-radius: var(--radius-2xl); text-decoration: none; transition: transform var(--pw-med) var(--pw-ease); }
.pw-next:hover { transform: translateY(-2px); }
.pw-next p { color: var(--on-navy-soft); margin-top: var(--space-2); max-width: 56ch; }
.pw-next .pw-h3 { margin-top: var(--space-2); font-size: 26px; font-weight: 900; }
.pw-path { display: flex; align-items: center; gap: 0; margin-top: var(--space-5); font-size: 13px; font-weight: 700; }
.pw-path li { display: inline-flex; align-items: center; gap: 8px; color: var(--on-navy-muted); }
.pw-path li + li::before { content: ""; width: 36px; height: 2px; margin: 0 10px; background: color-mix(in srgb, var(--on-navy-title) 22%, transparent); }
.pw-path i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--on-navy-title) 35%, transparent); }
.pw-path .is-done { color: var(--brand-mint); }
.pw-path .is-done i { background: var(--brand-mint); border-color: var(--brand-mint); color: var(--brand-navy); }
.pw-path .is-done i .pw-ic { width: 13px; height: 13px; stroke-width: 3; }
.pw-path .is-next { color: var(--on-navy-title); }
.pw-path .is-next i { position: relative; border-color: var(--brand-mint); }
.pw-path .is-next i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--brand-mint); animation: pw-ring 2.2s ease-out infinite; }
@media (max-width: 640px) { .pw-next { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); border-radius: 18px; } .pw-path li + li::before { width: 16px; margin: 0 6px; } }

/* ---- Price ----------------------------------------------------------------- */
.pw-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-5); align-items: stretch; }
.pw-price__tile { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-price__tile--pro { border: 2px solid var(--brand-blue); background: var(--surface-pro); box-shadow: var(--shadow-pro); }
.pw-price__flag { position: absolute; top: -13px; left: var(--space-8); padding: 5px 12px; border-radius: var(--radius-pill); background: var(--action); color: var(--on-action); font-size: 12.5px; font-weight: 700; box-shadow: var(--shadow-action); }
.pw-price__name { font-family: var(--font-condensed); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pw-price__amount { display: flex; align-items: baseline; gap: 6px; font-size: 48px; line-height: 1; font-weight: 900; letter-spacing: -0.03em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-price__amount small { font-size: 15px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.pw-price__amount [data-pw-amount] { display: inline-block; transition: transform var(--pw-med) var(--pw-ease), opacity var(--pw-med) var(--pw-ease); }
.pw-price__amount [data-pw-amount].is-changing { transform: translateY(-6px); opacity: 0; }
.pw-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.pw-modules legend { font-size: 14px; color: var(--ink-soft); margin-bottom: var(--space-2); padding: 0; }
.pw-modules label { position: relative; display: block; }
.pw-modules input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pw-modules span { display: grid; gap: 2px; padding: 12px 12px 12px 38px; border: 1.5px solid var(--line-button); border-radius: var(--radius-lg); background: var(--surface); font-size: 15px; font-weight: 700; color: var(--brand-navy); position: relative; transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-fast) var(--pw-ease); }
.pw-modules span small { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.pw-modules span::before { content: ""; position: absolute; left: 12px; top: 14px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--line-control); background: var(--surface); transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease); }
.pw-modules span::after { content: ""; position: absolute; left: 18px; top: 17px; width: 5px; height: 9px; border: solid var(--on-action); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--pw-fast) var(--pw-ease); }
.pw-modules label:hover span { border-color: var(--brand-blue); }
.pw-modules input:checked + span { background: var(--surface-selected); border-color: var(--brand-blue); color: var(--ink-selected); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-blue) 12%, transparent); }
.pw-modules input:checked + span::before { background: var(--action); border-color: var(--action); }
.pw-modules input:checked + span::after { transform: rotate(45deg) scale(1); }
.pw-modules input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pw-price__list { display: grid; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.pw-price__list li { display: flex; gap: 10px; align-items: flex-start; }
.pw-price__list .pw-ic { width: 18px; height: 18px; color: var(--mint-ink); margin-top: 2px; }
.pw-price__tile .pw-btn { margin-top: auto; }
@media (max-width: 900px) { .pw-price { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pw-price__tile { padding: var(--space-6); } .pw-modules { grid-template-columns: minmax(0, 1fr); } }

/* ---- Course ---------------------------------------------------------------- */
.pw-course { gap: 10px; overflow: hidden; }
/* The picture runs edge to edge in one 16:9 frame: no border, padding or rounded corners of its own. */
.pw-course__media { display: block; width: calc(100% + 2 * var(--space-6)); max-width: none; aspect-ratio: 16 / 9; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 6px; object-fit: cover; }
/* A lesson card shows its video's still with a play badge: the card opens the lesson, where the video plays. */
.pw-course__video { position: relative; overflow: hidden; background: var(--brand-navy); }
.pw-course__video img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pw-course__play { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--action); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); transition: transform var(--pw-med) var(--pw-ease); }
.pw-course__play .pw-ic { width: 22px; height: 22px; margin-left: 3px; }
.pw-course:hover .pw-course__play { transform: scale(1.08); }
/* Five stars for every rated course, then the exact score: the stars round, the number stays honest. */
.pw-course__stars { color: var(--status-review); font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
.pw-course .pw-btn { margin-top: auto; }
.pw-course__level { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); }
.pw-course p { font-size: 15px; color: var(--ink-soft); }
.pw-course__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.pw-course__meta span { display: inline-flex; align-items: center; gap: 5px; }
.pw-course__meta .pw-ic { width: 15px; height: 15px; }
.pw-course__meta .pw-ic--fill { color: var(--status-review); }
.pw-course__meta b { color: var(--brand-navy); }
/* A paid credential looks like every other course (Clive, 2026-10-15: "I don't think it should look as
   different as it does"): the same card and picture, marked only by a blue edge and its level line. */
.pw-course--paid { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); box-shadow: inset 0 3px 0 var(--brand-blue), var(--shadow-card); }
.pw-course--paid .pw-course__level { color: var(--blue-ink); }
.pw-progress { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--surface-wash); overflow: hidden; }
.pw-progress i { display: block; height: 100%; width: var(--value, 0%); background: var(--status-success); border-radius: inherit; transition: width 1.1s var(--pw-ease); }
.pw-motion [data-pw-reveal]:not(.is-in) .pw-progress i { width: 0; }

/* ---- Certificate ----------------------------------------------------------- */
.pw-cert { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-raised), var(--shadow-card); overflow: hidden; }
.pw-cert::before { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, var(--surface-mint) 0%, var(--surface-tint) 55%, transparent 70%); pointer-events: none; }
.pw-cert > * { position: relative; }
.pw-cert__label { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.pw-cert__title { font-size: 30px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); }
.pw-cert__holder { font-size: 18px; color: var(--ink-soft); }
.pw-cert__holder b { color: var(--brand-navy); }
.pw-cert__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-cert__seal { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--brand-navy); color: var(--brand-mint); box-shadow: 0 0 0 6px var(--surface), 0 0 0 9px var(--brand-mint), var(--shadow-raised); transition: transform var(--pw-slow) var(--pw-ease); }
.pw-cert:hover .pw-cert__seal { transform: rotate(-8deg) scale(1.04); }
.pw-cert__seal .pw-ic { width: 46px; height: 46px; stroke-width: 1.6; }
@media (max-width: 640px) { .pw-cert { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-5); } .pw-cert__seal { order: -1; width: 84px; height: 84px; } .pw-cert__seal .pw-ic { width: 36px; height: 36px; } }

/* ---- Story ----------------------------------------------------------------- */
.pw-story { gap: var(--space-4); }
.pw-story__org { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; font-weight: 700; color: var(--brand-navy); }
.pw-story blockquote { font-size: 18px; line-height: 1.45; color: var(--brand-navy); font-weight: 500; }
.pw-story__speaker { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.pw-story__speaker b { font-weight: 700; color: var(--brand-navy); }
.pw-story__more { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 700; color: var(--action); }
.pw-story__more .pw-ic { width: 18px; height: 18px; transition: transform var(--pw-med) var(--pw-ease); }
.pw-story:is(:hover, :focus-visible) .pw-story__more .pw-ic { transform: translateX(4px); }

/* ==== Website pages (13 Oct 2026): post header, prose, post list, hero hub and story, feature rows, logos,
   stats, CTA band, pricing, team, video grid, 404. Posts use ContentsMenu from help.css's @shared span. */
a.pw-chip { text-decoration: none; }
/* Fixes: edge-to-edge course pictures, and link colours the base a:not([class]) rule outranked. */
.pw-course { grid-template-columns: minmax(0, 1fr); }
.pw-course > .pw-course__media { max-width: none; }
.pw-links a[href] { color: var(--brand-navy); text-decoration: none; }
.pw-hero__crumb a[href] { color: inherit; text-decoration: none; }
/* Breadcrumbs (44px links) and the meta line */
.pw-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; font-size: 14px; color: var(--ink-muted); }
.pw-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); }
.pw-crumbs a[href] { display: inline-flex; align-items: center; min-height: var(--tap-min); color: inherit; text-decoration: none; }
.pw-crumbs a[href]:hover { color: var(--brand-navy); text-decoration: underline; text-underline-offset: 3px; }
.pw-crumbs .pw-ic { width: 14px; height: 14px; color: var(--line-control); }
.pw-navy .pw-crumbs ol, .pw-navy .pw-crumbs .pw-ic { color: var(--on-navy-muted); }
.pw-navy .pw-crumbs a[href]:hover { color: var(--on-navy-title); }
.pw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 14px; color: var(--ink-muted); }
.pw-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.pw-meta .pw-ic { width: 16px; height: 16px; }

/* ---- Post header ------------------------------------------------------------ */
.pw-posthead, .pw-post { --pw-post-side: 260px; --pw-post-main: 760px; --pw-post-width: calc(var(--pw-post-side) + var(--space-10) + var(--pw-post-main)); }
.pw-posthead { padding: var(--space-8) var(--space-10) var(--space-6); }
.pw-posthead__inner { max-width: var(--pw-post-width); margin-inline: auto; display: grid; gap: var(--space-4); justify-items: start; }
.pw-posthead__topics { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-posthead h1 { max-width: 30ch; }
.pw-posthead__by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.pw-author { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--ink-muted); }
.pw-author :is(img, .pw-avatar) { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 14px; }
.pw-author b { display: block; font-size: 15px; color: var(--brand-navy); }
.pw-posthead__media { width: 100%; margin-top: var(--space-4); }
.pw-posthead__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); background: var(--surface-wash); box-shadow: var(--shadow-raised); }
@media (max-width: 640px) { .pw-posthead { padding: var(--space-4) var(--space-4) var(--space-2); } .pw-posthead__media img { border-radius: var(--radius-lg); } }

/* ---- Post layout: the contents menu beside the prose --------------------------- */
.pw-post { display: grid; grid-template-columns: var(--pw-post-side) minmax(0, var(--pw-post-main)); gap: var(--space-10); justify-content: center; align-items: start; padding: var(--space-6) var(--space-10) var(--space-16); }
.pw-post--single { grid-template-columns: minmax(0, var(--pw-post-width)); }
.pw-post__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); min-width: 0; }
@media (max-width: 900px) { .pw-post { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-top: var(--space-2); } }
@media (max-width: 640px) { .pw-post { padding: var(--space-2) var(--space-4) var(--space-12); } }

/* ---- Prose: text keeps the measure; tables, figures and video use the column ---- */
.pw-prose { min-width: 0; font-size: 17px; line-height: 1.8; color: var(--ink); overflow-wrap: break-word; }
.pw-prose::after { content: ""; display: table; clear: both; }
.pw-prose > :where(p, ul, ol, dl, h2, h3, h4, blockquote) { max-width: var(--measure); }
.pw-prose > * + * { margin-top: var(--space-5); }
.pw-prose :where(h2, h3, h4) { color: var(--brand-navy); text-wrap: balance; scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.pw-prose h2 { margin-top: var(--space-12); font-size: 26px; line-height: 1.2; font-weight: 900; letter-spacing: -0.02em; }
.pw-prose h3 { margin-top: var(--space-8); font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.pw-prose h4 { margin-top: var(--space-6); font-size: 18px; line-height: 1.35; font-weight: 700; }
.pw-prose :is(h2, h3, h4) + * { margin-top: var(--space-3); }
.pw-prose > :first-child { margin-top: 0; }
.pw-prose :where(ul, ol) { display: grid; gap: var(--space-2); padding-left: 1.5em; }
.pw-prose ul { list-style: disc; }
.pw-prose ol { list-style: decimal; }
.pw-prose li::marker { color: var(--ink-muted); }
.pw-prose ol > li::marker { font-weight: 700; color: var(--brand-navy); }
.pw-prose li > :where(ul, ol, p) { margin-top: var(--space-2); }
.pw-prose :where(a:not([class*="pw-"])) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pw-prose :where(a:not([class*="pw-"])):hover { text-decoration-thickness: 2px; }
.pw-prose :where(img, video) { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.pw-prose :is(.alignleft, .alignright, .aligncenter) { float: none; margin-inline: auto; }
.pw-prose figure { display: grid; gap: var(--space-2); }
.pw-prose figcaption, .pw-prose caption { font-size: 14px; line-height: 1.5; color: var(--ink-muted); text-align: left; }
.pw-prose blockquote { padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--surface-wash); color: var(--brand-navy); font-size: 19px; line-height: 1.6; font-weight: 500; }
.pw-prose blockquote > * + * { margin-top: var(--space-3); }
.pw-prose blockquote :is(cite, footer) { display: block; font-size: 14px; font-style: normal; font-weight: 400; color: var(--ink-muted); }
.pw-prose :where(code, kbd, samp) { padding: .1em .35em; border-radius: var(--radius-sm); background: var(--surface-wash); font-family: var(--font-mono); font-size: .88em; }
.pw-prose pre { overflow-x: auto; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-wash); font: 14px/1.65 var(--font-mono); tab-size: 2; }
.pw-prose pre code { padding: 0; background: none; font-size: inherit; }
.pw-prose hr { width: 64px; height: 3px; margin: var(--space-10) auto; border: 0; border-radius: var(--radius-pill); background: var(--line-button); }
.pw-prose iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }
/* Tables scroll in their own frame (.pw-table), never the page; a bare one scrolls itself. */
.pw-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pw-table:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pw-prose > table { display: block; overflow-x: auto; }
.pw-prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.pw-prose :is(th, td) { min-width: 7em; padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pw-prose thead th { background: var(--surface-wash); font: 700 13px/1.3 var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.pw-prose tbody th { font-weight: 700; color: var(--brand-navy); }
.pw-prose tbody tr:last-child > * { border-bottom: 0; }
.pw-prose caption { padding: 10px 14px; caption-side: bottom; }

/* ---- Link cards in the prose: a post's "Keep learning" tiles (15 Oct 2026) -------
   A moved post's outdated footer becomes a row of small link cards (Website::KeepLearning), the same cards a
   lesson's "Explore further" list uses (learn.css, website/shared/_article_links): the destination's picture or a
   navy tile with an icon, its title in two lines and one line of description. Posts load only this sheet, so the
   cards are here; learn.css's copy of these rules is now redundant. */
.pw-prose .pw-linkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); max-width: none; padding: 0; list-style: none; }
.pw-linkcards > li { display: grid; min-width: 0; }
.pw-linkcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-linkcard:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pw-linkcard > .pw-linkcard__media { display: block; flex: none; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; border-radius: 0; object-fit: cover; background: var(--surface-wash); }
.pw-linkcard > .pw-linkcard__tile { display: grid; place-items: center; background: var(--brand-navy); color: var(--brand-mint); }
.pw-linkcard__tile .pw-ic { width: 28px; height: 28px; }
.pw-linkcard__body { display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-4); }
.pw-linkcard__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
.pw-linkcard:hover .pw-linkcard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pw-linkcard__text { overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) {
  /* Phones: one card a row, the picture beside the words. */
  .pw-prose .pw-linkcards { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pw-linkcard { flex-direction: row; align-items: center; }
  .pw-linkcard > .pw-linkcard__media { width: 112px; align-self: stretch; aspect-ratio: auto; min-height: 63px; }
  .pw-linkcard__body { flex: 1; min-width: 0; padding: 10px var(--space-3); }
}
/* A post's tiles are few (three, or five with a video and a download), so they are wider and say two lines. */
.pw-post .pw-linkcard__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
@media (min-width: 641px) { .pw-post .pw-prose .pw-linkcards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }

/* ---- Post card and list (/blog/, topic hubs, related posts) -------------------- */
.pw-postlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pw-postlist--list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.pw-postlist > li { display: grid; min-width: 0; }
.pw-postcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-postcard:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pw-postcard:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pw-postcard > .pw-postcard__media { display: block; flex: none; width: calc(100% + 2 * var(--space-6)); max-width: none; aspect-ratio: 16 / 9; margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 6px; object-fit: cover; background: var(--surface-wash); }
.pw-postcard__topic { font: 700 13px/1.2 var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.pw-postcard p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 15px; color: var(--ink-soft); }
.pw-postcard .pw-meta { margin-top: auto; padding-top: 4px; }
.pw-postcard:not(:has(> .pw-postcard__media)) p { -webkit-line-clamp: 7; }
.pw-postlist--list .pw-postcard:has(> .pw-postcard__media) { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-content: center; gap: 6px var(--space-6); padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); }
.pw-postlist--list .pw-postcard:has(> .pw-postcard__media) > * { grid-column: 2; }
.pw-postlist--list .pw-postcard > .pw-postcard__media { grid-column: 1; grid-row: 1 / span 4; align-self: start; width: 100%; margin: 0; border-radius: var(--radius-lg); }
.pw-postlist--list .pw-postcard .pw-meta { margin-top: 0; }
.pw-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pw-pager__status { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 900px) { .pw-postlist:not(.pw-postlist--list) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pw-postlist:not(.pw-postlist--list) { grid-template-columns: minmax(0, 1fr); }
  .pw-postlist--list .pw-postcard:has(> .pw-postcard__media) { grid-template-columns: 96px minmax(0, 1fr); gap: 4px var(--space-4); padding: var(--space-3); }
  .pw-postlist--list .pw-postcard > .pw-postcard__media { aspect-ratio: 1; }
  .pw-postlist--list .pw-postcard p { -webkit-line-clamp: 2; }
  .pw-postcard { padding: var(--space-5); }
  .pw-postcard > .pw-postcard__media { width: calc(100% + 2 * var(--space-5)); margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 6px; }
  .pw-postlist--list .pw-postcard h3 { font-size: 18px; }
  .pw-pager { flex-wrap: wrap; }
  .pw-pager__status { order: -1; flex-basis: 100%; }
}

/* ---- Hero: topic hub and customer story ---------------------------------------- */
.pw-hero--hub, .pw-hero--story { background: var(--surface-wash); }
.pw-hero--hub { padding-block: var(--space-10) var(--space-12); }
.pw-hero--hub .pw-hero__grid { grid-template-columns: minmax(0, 1fr); }
.pw-hero--hub .pw-hero__copy { max-width: 760px; }
/* A hub hero with a product screen (the /templates/ pages, 15 Oct 2026) puts it beside the copy, as a journey's does. */
.pw-hero--hub .pw-hero__grid:has(> .pw-hero__aside) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .pw-hero--hub .pw-hero__grid:has(> .pw-hero__aside) { grid-template-columns: minmax(0, 1fr); } }
.pw-hero__count { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 15px; color: var(--ink-muted); }
.pw-hero__count b { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-navy); }
.pw-hero__count .pw-ic { width: 18px; height: 18px; color: var(--mint-ink); }
.pw-hero--story .pw-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.pw-storyfacts { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-raised), var(--shadow-card); }
.pw-storyfacts__org { display: flex; align-items: center; gap: var(--space-4); font-size: 20px; font-weight: 900; letter-spacing: -0.01em; color: var(--brand-navy); }
.pw-storyfacts__org img { height: 40px; width: auto; }
.pw-storyfacts dl { display: grid; margin: 0; }
.pw-storyfacts dl > div { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr); gap: var(--space-3); padding-block: 12px; border-top: 1px solid var(--line); font-size: 15px; }
.pw-storyfacts dt { color: var(--ink-muted); }
.pw-storyfacts dd { margin: 0; font-weight: 500; color: var(--brand-navy); }
@media (max-width: 900px) { .pw-hero--story .pw-hero__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pw-hero--hub { padding-block: var(--space-6) var(--space-10); } .pw-storyfacts { padding: var(--space-6); } .pw-storyfacts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---- Feature rows (product and module pages) ------------------------------------ */
.pw-features { display: grid; gap: var(--space-24); }
.pw-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-12); align-items: center; }
.pw-feature:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.pw-feature:nth-child(even) > .pw-feature__media { order: -1; }
.pw-feature__copy { display: grid; gap: var(--space-3); align-content: start; }
.pw-feature__copy > p:not([class]) { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }
.pw-feature__copy > h3 { font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; } /* h2-sm: a step below the section heading */
.pw-feature__copy .pw-checklist { margin-top: var(--space-2); }
.pw-feature__copy .pw-btn { justify-self: start; margin-top: var(--space-3); }
.pw-feature__media { margin: 0; min-width: 0; }
@media (max-width: 900px) {
  .pw-features { gap: var(--space-16); }
  .pw-feature, .pw-feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pw-feature:nth-child(even) > .pw-feature__media { order: 0; }
}

/* ---- Logo strip -------------------------------------------------------------- */
.pw-logos { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.pw-logos ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6) var(--space-12); }
.pw-logos li > * { display: grid; place-items: center; min-height: var(--tap-min); }
.pw-logos img { display: block; width: auto; height: 32px; max-width: 168px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: opacity var(--pw-fast) var(--pw-ease); }
.pw-logos a:hover img { opacity: 1; }
@media (max-width: 640px) { .pw-logos ul { gap: var(--space-4) var(--space-8); } .pw-logos img { height: 26px; max-width: 128px; } }
/* White logo artwork (today's home page belt) sits on navy; the default stays on the light ground. */
.pw-logos--navy .pw-eyebrow { color: var(--on-navy-soft); }
.pw-logos--navy .pw-small { color: var(--on-navy-soft); }
.pw-logos--navy img { filter: none; opacity: .86; }
.pw-logos--navy a:hover img { opacity: 1; }
/* The belt (15 Oct 2026, Clive: "so that the logos don't all show at the same time"): more than eight logos
   move slowly sideways, the list twice over so the loop never shows a seam. Hover and focus stop it; reduced
   motion keeps it still and lets the row scroll by hand instead (no Pause button: Clive, 15 Oct 2026). */
.pw-logos--belt { justify-items: stretch; }
.pw-logos--belt > .pw-eyebrow, .pw-logos--belt > .pw-small, .pw-logos--belt > .pw-logos__belt { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pw-logos__run { display: flex; width: max-content; animation: pw-logos-belt var(--pw-logos-time, 60s) linear infinite; }
.pw-logos--belt ul { flex-wrap: nowrap; justify-content: flex-start; padding-right: var(--space-12); }
@keyframes pw-logos-belt { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pw-logos__belt:hover .pw-logos__run, .pw-logos__belt:focus-within .pw-logos__run { animation-play-state: paused; }
.pw-logos--navy .pw-logos--navy @media (max-width: 640px) { .pw-logos--belt ul { padding-right: var(--space-8); } }
@media (prefers-reduced-motion: reduce) {
  .pw-logos__run { animation: none; }
  .pw-logos__belt { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .pw-logos__run > ul + ul, }

/* ---- Stats: every number with its source ------------------------------------------ */
.pw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-5); }
.pw-stats > li { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-stats b { font-size: 48px; line-height: 1; font-weight: 900; letter-spacing: -0.03em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-stats span { font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink); }
.pw-stats small { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
@media (max-width: 640px) { .pw-stats b { font-size: 40px; } }

/* ---- CTA band: the closing navy section (one of the page's two) ----------------- */
.pw-cta { padding: var(--space-16) var(--space-10); }
.pw-cta__inner { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-12); align-items: center; }
.pw-cta__copy { display: grid; gap: var(--space-3); max-width: 720px; }
.pw-cta__actions { display: grid; gap: var(--space-3); justify-items: start; }
@media (max-width: 900px) { .pw-cta__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pw-cta { padding: var(--space-12) var(--space-4); } .pw-cta__actions { justify-items: stretch; } .pw-cta__actions .pw-btn { flex: 1; } }

/* ---- Pricing: PriceBlock's tiles, Chips for the choices, then the comparison ------- */
.pw-pricing { display: grid; gap: var(--space-8); }
.pw-pricing__head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.pw-pricing__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: stretch; }
.pw-pricing__desc { font-size: 15px; color: var(--ink-soft); }
.pw-pricing__pick { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.pw-pricing__pick legend { margin-bottom: var(--space-2); padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.pw-pricing__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-pricing__head .pw-pricing__chips { justify-content: center; }
.pw-chip--option .pw-ic { color: var(--ink-muted); }
.pw-chip--option[aria-pressed="true"] { background: var(--surface-selected); border-color: var(--brand-blue); color: var(--ink-selected); font-weight: 700; }
.pw-chip--option[aria-pressed="true"] .pw-ic { color: var(--action); }
.pw-pricing__sub, .pw-pricing__note { font-size: 14px; color: var(--ink-muted); }
.pw-pricing__ladder { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); font-size: 13.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-pricing__ladder [aria-current="true"] { font-weight: 700; color: var(--ink-selected); }
.pw-pricing__keep { font-size: 13.5px; font-weight: 500; color: var(--status-review-ink); }
.pw-pricing__keep:empty { display: none; }
.pw-pricing__quote { font-size: 32px; line-height: 1.1; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); }
.pw-pricing .pw-price__amount { flex-wrap: wrap; }
.pw-pricing__note { text-align: center; }
.pw-compare { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-compare table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.pw-compare :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pw-compare thead :is(th, td) { position: sticky; top: var(--header-height); z-index: 1; background: var(--surface); box-shadow: 0 1px 0 var(--line); }
.pw-compare thead th { font-size: 17px; font-weight: 900; color: var(--brand-navy); }
.pw-compare thead small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-muted); }
.pw-compare tr > :nth-child(3) { background: var(--surface-pro); }
.pw-compare thead tr > :nth-child(3) { box-shadow: inset 0 3px 0 var(--brand-blue), 0 1px 0 var(--line); }
.pw-compare tbody th { width: 34%; font-weight: 500; color: var(--brand-navy); }
.pw-compare tbody th small { display: block; font-size: 13.5px; font-weight: 400; color: var(--ink-muted); }
.pw-compare .pw-compare__group th { padding-top: var(--space-8); font: 700 13px/1.3 var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); background: var(--surface); }
.pw-compare td .pw-ic { width: 18px; height: 18px; color: var(--mint-ink); vertical-align: -3px; }
.pw-compare td .pw-ic.is-no { color: var(--line-control); }
@media (max-width: 900px) { .pw-pricing__tiles { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pw-compare { padding: var(--space-5) var(--space-4); }
  .pw-compare :is(table, thead, tbody, tr, th, td) { display: block; }
  .pw-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pw-compare tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .pw-compare tbody :is(th, td) { width: auto; padding: 0; border: 0; }
  .pw-compare tbody th { grid-column: 1 / -1; padding-bottom: 4px; }
  .pw-compare tbody td { padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-wash); font-size: 14px; }
  .pw-compare tbody td::before { content: attr(data-label); display: block; font: 700 12px/1.3 var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
  .pw-compare tbody tr > :nth-child(3) { background: var(--surface-selected); }
  .pw-compare tbody tr.pw-compare__group { display: block; padding-bottom: 0; border: 0; }
  .pw-compare .pw-compare__group th { padding-top: var(--space-6); }
}

/* ---- Team (/about/) -------------------------------------------------------------- */
.pw-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-5); }
.pw-person { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-person > :is(img, .pw-avatar) { width: 88px; height: 88px; margin-bottom: var(--space-2); border-radius: 50%; object-fit: cover; font-size: 28px; font-weight: 900; }
.pw-person__role { font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.pw-person p:not(.pw-person__role) { font-size: 15px; color: var(--ink-soft); }
.pw-person__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.pw-person__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: 14px; }

/* ---- Video grid (webinar and video libraries) ------------------------------------ */
.pw-vgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
.pw-vgrid > li { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.pw-vgrid .pw-video { margin-bottom: var(--space-2); }
.pw-vgrid .pw-video__num { font-size: 150px; }
.pw-vgrid .pw-video__play { width: 58px; height: 58px; }
.pw-vgrid .pw-video__play .pw-ic { width: 24px; height: 24px; }
.pw-vgrid :is(.pw-video__plate, .pw-video__length) { top: 14px; }
.pw-vgrid .pw-video__plate { left: 14px; }
.pw-vgrid .pw-video__length { right: 14px; }
.pw-vgrid h3 a[href] { display: inline-flex; min-height: var(--tap-min); align-items: center; color: inherit; text-decoration: none; }
.pw-vgrid h3 a[href]:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .pw-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pw-vgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Not found (404) ------------------------------------------------------------- */
.pw-notfound { position: relative; overflow: hidden; padding: var(--space-16) var(--space-10) var(--space-24); background: var(--surface-wash); }
.pw-notfound__num { position: absolute; top: -0.12em; right: -0.04em; font-size: 340px; line-height: 1; font-weight: 900; letter-spacing: -0.06em; color: var(--surface-tint); pointer-events: none; user-select: none; }
.pw-notfound__inner { position: relative; max-width: 960px; margin-inline: auto; display: grid; gap: var(--space-8); }
.pw-notfound__inner > .pw-head { max-width: 640px; }
.pw-notfound__ways { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .pw-notfound__ways { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pw-notfound { padding: var(--space-12) var(--space-4) var(--space-16); } .pw-notfound__num { font-size: 180px; } }

/* ==== Case studies, quotes and events (14 Oct 2026): CaseStudyCard and its filter row (/uses/, persona hubs,
   journeys), QuoteWall ("In their own words") and EventRow (/events/ and the webinars page). */

/* ---- Case study cards and their filter row --------------------------------------
   With a story page, the title's link is stretched over the card: the card is one link named by its title, and hover
   and keyboard focus give the linked-card lift. Without one (no link) nothing moves. The chips hide cards by
   data-persona; without script every card shows and the chip row stays hidden. */
.pw-cases { display: grid; gap: var(--space-6); }
.pw-cases__bar { display: grid; gap: var(--space-3); }
.pw-cases__bar[hidden] { display: none; }
.pw-cases__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-cases__count { font-size: 14px; line-height: 1.5; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pw-cases__all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pw-cases__all > span { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.pw-case { --pw-case-pad: var(--space-6); position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: 0 var(--pw-case-pad) var(--pw-case-pad); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-case[hidden] { display: none; }
.pw-motion .pw-case.is-shown { animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-case__place { display: flex; align-items: center; gap: var(--space-2); min-height: 48px; margin: 0 calc(-1 * var(--pw-case-pad)) var(--space-2); padding: var(--space-2) var(--pw-case-pad); border-radius: calc(var(--radius-xl) - 1px) calc(var(--radius-xl) - 1px) 0 0; background: var(--surface-wash); font-size: 14px; font-weight: 700; color: var(--brand-navy); }
/* The flag is an image from the renderer's vendored 4x3 set, never an emoji; its 1px edge keeps white stripes visible on the wash.
   The flag and logo rules name their bar so their sizes outrank the base `.pw img { max-width: 100%; height: auto; }` (0,1,1). */
.pw-case__place > .pw-case__flag { flex: none; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.pw-case__place > svg.pw-case__flag { width: 18px; height: 18px; border-radius: 0; box-shadow: none; color: var(--ink-soft); }
.pw-case__place > .pw-case__logo { flex: none; width: auto; height: 24px; max-width: 96px; margin-left: auto; object-fit: contain; filter: brightness(0); opacity: .5; }
/* A logo on its own solid ground (the helper's is-solid): grey, and its ground blends into the strip. */
.pw-case__place > .pw-case__logo.is-solid { filter: grayscale(1); opacity: .85; mix-blend-mode: multiply; }
.pw-case__wordmark { min-width: 0; max-width: 55%; margin-left: auto; overflow: hidden; font-size: 13px; font-weight: 700; color: var(--ink-muted); white-space: nowrap; text-overflow: ellipsis; }
.pw-case__result { display: grid; gap: 2px; }
.pw-case__value { font-size: 26px; line-height: 1.15; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); text-wrap: balance; }
.pw-case__value span { color: var(--ink-muted); }
.pw-case__label { font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--ink-muted); }
.pw-case__title { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); text-wrap: balance; }
.pw-case__title a[href] { color: inherit; text-decoration: none; }
.pw-case__title a::after { content: ""; position: absolute; inset: -1px; z-index: 1; border-radius: var(--radius-xl); }
.pw-case__title a:focus-visible { outline: none; }
.pw-case__title a:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pw-case__org { font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--ink-muted); }
.pw-case__summary { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
/* The panel: the customer's words (figure) or a plain line (p). surface-tint with a brand-blue edge, never a frame. */
:is(.pw-case__quote, .pw-case__note) { position: relative; overflow: hidden; padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--surface-tint); }
.pw-case__quote::before { content: "\201C"; position: absolute; top: -12px; right: 14px; font-size: 88px; line-height: 1; font-weight: 900; color: color-mix(in srgb, var(--brand-blue) 16%, transparent); pointer-events: none; }
.pw-case__quote > * { position: relative; }
.pw-case__quote blockquote { font-size: 15.5px; line-height: 1.5; font-weight: 500; color: var(--brand-navy); text-wrap: pretty; }
.pw-case__quote figcaption { margin-top: var(--space-2); font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }
.pw-case__quote figcaption b { font-weight: 700; color: var(--brand-navy); }
/* The speaker's face, when their quote record has a cleared photo (Clive, 15 Oct 2026). */
.pw-case__quote figcaption:has(> .pw-avatar) { display: flex; align-items: center; gap: var(--space-2); }
.pw-case__quote figcaption > .pw-avatar { width: 32px; height: 32px; font-size: 11px; }
.pw-case__note { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
/* Quotes are verbatim with no typed marks: the card and the wall set curly ones. */
:is(.pw-case__quote, .pw-wall, .pw-story) blockquote { quotes: "\201C" "\201D" "\2018" "\2019"; }
:is(.pw-case__quote, .pw-wall, .pw-story) blockquote::before { content: open-quote; }
:is(.pw-case__quote, .pw-wall, .pw-story) blockquote::after { content: close-quote; }
/* The topics, then "Read the story" on its own line: the same on every card, however long the topics run. */
.pw-case__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }
/* Tags are labels, not filters: small rectangles, never pills, so they don't read as the chips above. */
.pw-case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-case__tags li { padding: 4px 9px; border-radius: var(--radius-sm); background: var(--surface-wash); color: var(--ink-soft); font-size: 12.5px; line-height: 1.3; font-weight: 500; }
.pw-case__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--action); white-space: nowrap; }
.pw-case__more .pw-ic { width: 16px; height: 16px; transition: transform var(--pw-med) var(--pw-ease); }
.pw-case:has(.pw-case__title a:is(:hover, :focus-visible)) { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.pw-case:has(.pw-case__title a:is(:hover, :focus-visible)) .pw-case__more .pw-ic { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .pw-case, .pw-case__more .pw-ic { transform: none !important; } }
@media (max-width: 900px) { .pw-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .pw-cases__grid { grid-template-columns: minmax(0, 1fr); }
  .pw-case { --pw-case-pad: var(--space-5); }
  /* One row that scrolls sideways, edge to edge, like the lens bar; 4px above and below keeps focus rings whole. */
  .pw-cases__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding: 4px var(--space-4); scrollbar-width: none; }
  .pw-cases__chips::-webkit-scrollbar { display: none; }
}

/* ---- Quote wall ("In their own words") ---------------------------------------------
   CSS columns, not a grid: quotes run from one line to five, and columns stack each card straight under the one
   above. A grid's equal rows would strand a one-liner in a five-line row. Reading order runs down each column. */
.pw-wall { columns: 3; column-gap: var(--space-5); }
.pw-wall > li { break-inside: avoid; padding-bottom: var(--space-5); }
.pw-wall__card { display: grid; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-wall .pw-stars { gap: 2px; }
.pw-wall .pw-stars .pw-ic { width: 16px; height: 16px; }
.pw-wall blockquote { font-size: 16.5px; line-height: 1.55; font-weight: 500; color: var(--brand-navy); text-wrap: pretty; }
.pw-wall figcaption { display: flex; align-items: center; gap: var(--space-3); font-size: 13.5px; line-height: 1.4; color: var(--ink-muted); }
.pw-wall figcaption b { display: block; font-size: 15px; color: var(--brand-navy); }
.pw-wall figcaption :is(img, .pw-avatar) { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; font-size: 14px; }
@media (max-width: 900px) { .pw-wall { columns: 2; } }
@media (max-width: 640px) { .pw-wall { columns: 1; } .pw-wall__card { padding: var(--space-5); } }

/* ---- Event rows (/events/ and the webinars page) ------------------------------------
   The renderer sorts (upcoming and live first, then replays) and renders the reference zone's time; the script adds
   the visitor's own date and time and turns an upcoming row live between data-start and data-end. */
.pw-events { display: grid; gap: var(--space-4); }
.pw-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date body action"; gap: var(--space-5); align-items: center; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-event > .pw-date { grid-area: date; }
.pw-event__body { grid-area: body; display: grid; gap: 6px; min-width: 0; }
.pw-event__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-3); }
.pw-event__series { font-size: 13px; line-height: 1.4; font-weight: 700; color: var(--blue-ink); }
.pw-event__title { font-size: 20px; line-height: 1.25; font-weight: 900; letter-spacing: -0.01em; color: var(--brand-navy); text-wrap: balance; }
/* The visitor's time and the reference zone's are atomic, so a narrow row breaks between them, after the dot. */
.pw-event__when { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.pw-event__when .pw-ic { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--ink-muted); }
.pw-event__when > span { display: inline-block; }
.pw-event__when b { font-weight: 700; color: var(--brand-navy); }
.pw-event__local[hidden] { display: none; }
.pw-event__local::after { content: " \00B7"; margin-right: 8px; }
.pw-event__action { grid-area: action; min-width: 200px; }
.pw-event__action[hidden] { display: none; }
/* A replay's tile is quieter than an upcoming one. */
.pw-event[data-status="past"] > .pw-date { background: var(--surface-wash); color: var(--brand-navy); }
.pw-event[data-status="past"] > .pw-date span { color: var(--ink-muted); }
@media (max-width: 640px) {
  .pw-event { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "date body" "action action"; gap: var(--space-4); align-items: start; }
  .pw-event__title { font-size: 18px; }
  .pw-event__action { width: 100%; min-width: 0; }
}

/* ---- HeroSystem: the home hero's picture of the whole platform -------------
   Documents in, one plan with an owner on every line, then models checked,
   charts and CDEs kept up to date (Clive, 2026-10-15). On the navy hero. */
.pw-hero--backdrop { position: relative; overflow: hidden; isolation: isolate; }
.pw-hero__backdrop { position: absolute; inset: auto 0 0 0; z-index: -1; width: 100%; height: auto; min-height: 70%; object-fit: cover; object-position: center bottom; opacity: 0.65; pointer-events: none; user-select: none; }
/* The scene (15 Oct 2026, Clive: "more fluid ... a system where Plannerly is central"): a 640 x 620 frame
   (Website::HeroSystemHelper) whose nodes sit at percentages of it and whose wires share its viewBox. Sizes are
   container units, so the picture scales as one. Every element rests in its finished state; the keyframes add
   the moments before it, so under reduced motion the finished picture stands still. */
.pw-system { --pw-sys-loop: 10s; --pw-b-loop: 10s; position: relative; margin: 0; aspect-ratio: 640 / 620; container-type: inline-size; color: var(--on-navy-soft); font-size: max(11px, 1.95cqw); line-height: 1.3; }
.pw-system::before { content: ""; position: absolute; left: 50%; top: 48.4%; width: 78cqw; height: 78cqw; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-blue) 28%, transparent), transparent); pointer-events: none; }
.pw-system > * { position: absolute; margin: 0; transform: translate(-50%, -50%); }
.pw-system > .pw-system__wires { inset: 0; width: 100%; height: 100%; transform: none; overflow: visible; }
/* Wires, orbits and what travels on them. */
.pw-system__wire { fill: none; stroke: color-mix(in srgb, var(--on-navy-title) 26%, transparent); stroke-width: 1.2; stroke-dasharray: 3 5; animation: pw-sys-flow 1.6s linear infinite; }
@keyframes pw-sys-flow { to { stroke-dashoffset: -16; } }
.pw-system__orbit { fill: none; stroke: color-mix(in srgb, var(--on-navy-title) 11%, transparent); stroke-width: 1; stroke-dasharray: 2 7; transform-box: view-box; transform-origin: 320px 300px; animation: pw-sys-orbit 48s linear infinite; }
.pw-system__orbit + .pw-system__orbit { animation-duration: 72s; animation-direction: reverse; }
@keyframes pw-sys-orbit { to { transform: rotate(360deg); } }
.pw-system__packet.doc rect { fill: #fff; }
.pw-system__packet.doc path { fill: none; stroke: var(--brand-blue); stroke-width: 1.2; stroke-linecap: round; }
.pw-system__packet.is-out rect { fill: var(--brand-mint); }
.pw-system__packet.is-in rect { fill: var(--on-navy-accent); }
.pw-system__packet.is-out path, .pw-system__packet.is-in path { stroke: var(--brand-navy); }
.pw-system__packet.dot circle { fill: var(--brand-mint); }
/* The tools and CDEs, each in its own tile, gently afloat. */
.pw-system__app { display: grid; place-items: center; width: 8.4cqw; height: 8.4cqw; border-radius: 2.2cqw; background: var(--surface); box-shadow: 0 1cqw 2.4cqw rgb(0 0 0 / 0.3); animation: pw-sys-bob 6s var(--pw-ease) calc(var(--i) * -0.8s) infinite; }
.pw-system__app img { display: block; width: 60%; height: 60%; object-fit: contain; }
@keyframes pw-sys-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.7cqw; } }
/* Plannerly at the centre, pulsing. */
.pw-system__hub { z-index: 2; display: grid; place-items: center; width: 25cqw; height: 9.4cqw; border-radius: 4.7cqw; background: var(--surface); box-shadow: 0 0 0 0.7cqw color-mix(in srgb, var(--brand-mint) 32%, transparent), 0 1.6cqw 4cqw rgb(0 0 0 / 0.35); }
.pw-system__hub img { display: block; width: 17cqw; height: auto; }
.pw-system__halo { position: absolute; inset: 0; border-radius: inherit; border: 0.3cqw solid var(--brand-mint); opacity: 0; animation: pw-sys-halo 3.2s var(--pw-ease) infinite; }
.pw-system__halo + .pw-system__halo { animation-delay: 1.6s; }
@keyframes pw-sys-halo { 0% { opacity: 0.55; transform: none; } 100% { opacity: 0; transform: scale(1.45, 2.1); } }
/* Captions. */
.pw-system p { line-height: 1.3; }
.pw-system__caption.pw-system__caption--cde { max-width: 70cqw; }
.pw-system__caption { width: max-content; max-width: 46cqw; font-size: max(11px, 1.95cqw); font-weight: 700; color: var(--on-navy-title); text-align: center; }
.pw-system__soon { width: max-content; font-size: max(10.5px, 1.8cqw); color: var(--on-navy-muted); }
.pw-system__legend { display: flex; gap: 0 2cqw; width: max-content; font-size: max(10.5px, 1.75cqw); }
.pw-system__legend span { display: inline-flex; align-items: center; gap: 0.8cqw; }
.pw-system__legend span::before { content: ""; width: 1.3cqw; height: 1.3cqw; min-width: 7px; min-height: 7px; border-radius: 2px; }
.pw-system__legend .is-pass::before { background: var(--status-success); }
.pw-system__legend .is-warn::before { background: var(--status-review); }
.pw-system__legend .is-fail::before { background: var(--status-danger); }
/* One visual plan: each line drawn on the schedule, then agreed by its owner. */
.pw-system__plan { z-index: 1; display: grid; gap: 1.1cqw; width: 37cqw; padding: 2.2cqw 2.4cqw; border-radius: 2.6cqw; background: var(--surface); color: var(--ink); box-shadow: 0 1.6cqw 4cqw rgb(0 0 0 / 0.35); animation: pw-sys-float 7s var(--pw-ease) infinite; }
@keyframes pw-sys-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.9cqw; } }
.pw-system__plantitle { display: flex; align-items: center; gap: 1cqw; font-size: max(10.5px, 1.8cqw); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-navy); }
.pw-system__plantitle .pw-ic { width: 2.4cqw; height: 2.4cqw; min-width: 12px; min-height: 12px; color: var(--mint-ink); }
.pw-system__plansub { margin-top: -0.6cqw; font-size: max(10.5px, 1.8cqw); color: var(--ink-muted); }
.pw-system__plan ul { display: grid; gap: 1cqw; margin: 0; padding: 0; list-style: none; }
.pw-system__plan li { display: grid; grid-template-columns: auto minmax(0, 11.5cqw) minmax(0, 1fr) auto; align-items: center; gap: 1.2cqw; font-size: max(10.5px, 1.9cqw); font-weight: 500; }
.pw-system__who { display: grid; place-items: center; width: 4cqw; height: 4cqw; min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--surface-selected); color: var(--ink-selected); font-size: max(8.5px, 1.5cqw); font-weight: 700; }
.pw-system__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-system__bar { position: relative; height: 1.2cqw; min-height: 6px; border-radius: 1cqw; background: var(--surface-wash); }
.pw-system__bar i { position: absolute; top: 0; bottom: 0; left: var(--s); width: var(--w); border-radius: inherit; background: var(--brand-blue); transform-origin: left center; animation: pw-sys-draw var(--pw-sys-loop) var(--pw-ease) calc(var(--i) * 0.35s) infinite; }
.pw-system__plan li:nth-child(2) .pw-system__bar i { background: var(--status-success); }
.pw-system__plan li:nth-child(3) .pw-system__bar i { background: var(--status-review); }
.pw-system__ok { display: grid; place-items: center; width: 3.4cqw; height: 3.4cqw; min-width: 18px; min-height: 18px; border-radius: 50%; background: var(--surface-mint); color: var(--mint-ink); animation: pw-sys-agree var(--pw-sys-loop) var(--pw-ease) calc(var(--i) * 0.35s) infinite; }
.pw-system__ok .pw-ic { width: 65%; height: 65%; }
@keyframes pw-sys-draw { 0%, 12% { transform: scaleX(0); } 22%, 94% { transform: none; } 100% { transform: scaleX(0); } }
@keyframes pw-sys-agree { 0%, 22% { opacity: 0; transform: scale(0.4); } 26% { opacity: 1; transform: scale(1.25); } 30%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* The model: CSS boxes in a turning 3D scene. Elements drop into place floor by floor, the check turns each
   green, orange or red, and warning triangles - always facing the viewer - rise over the ones that need it. */
.pw-system__stage { z-index: 1; width: 36cqw; height: 32cqw; font-size: 2cqw; perspective: 50em; }
.pw-b, .pw-b__world, .pw-b__pos, .pw-b__box, .pw-b__flagpos { transform-style: preserve-3d; }
.pw-b { position: absolute; inset: 0; }
.pw-b__world { position: absolute; left: 50%; top: 80%; width: 0; height: 0; transform: rotateX(-24deg) rotateY(35deg); animation: pw-b-spin 24s linear infinite; }
@keyframes pw-b-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
.pw-b__pos, .pw-b__flagpos { position: absolute; left: 0; top: 0; }
.pw-b__box { position: relative; animation: pw-b-drop var(--pw-b-loop) var(--pw-ease) var(--o) infinite; }
@keyframes pw-b-drop { 0% { transform: translateY(-2.6em); } 9%, 100% { transform: none; } }
.pw-b__f { position: absolute; display: block; backface-visibility: hidden; box-shadow: inset 0 0 0 0.06em rgb(14 30 61 / 0.18); animation: pw-b-show var(--pw-b-loop) linear var(--o) infinite; }
.pw-b__f::before { content: ""; position: absolute; inset: 0; box-shadow: inherit; animation: pw-b-check var(--pw-b-loop) linear var(--o) infinite; }
.pw-b__f::after { content: ""; position: absolute; inset: 0; background: var(--brand-navy-deep); opacity: 0; }
.pw-b__box:not(.is-fail) .pw-b__f::after { animation: pw-b-dim var(--pw-b-loop) linear infinite; }
@keyframes pw-b-dim { 0%, 71% { opacity: 0; } 74%, 84% { opacity: 0.68; } 87%, 100% { opacity: 0; } }
@keyframes pw-b-show { 0% { opacity: 0; } 6%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pw-b-check { 0%, 34% { opacity: 0; } 42%, 100% { opacity: 1; } }
.pw-b__f--top { background: #eef1f5; }
.pw-b__f--front { background: #d6dce4; }
.pw-b__f--back { background: #d6dce4; }
.pw-b__f--side { background: #bcc5d1; }
.pw-b__box.is-pass { --c-top: color-mix(in srgb, var(--status-success) 55%, #fff); --c-front: var(--status-success); --c-side: color-mix(in srgb, var(--status-success) 72%, #000); }
.pw-b__box.is-warn { --c-top: color-mix(in srgb, var(--status-review) 55%, #fff); --c-front: var(--status-review); --c-side: color-mix(in srgb, var(--status-review) 76%, #000); }
.pw-b__box.is-fail { --c-top: color-mix(in srgb, var(--status-danger) 50%, #fff); --c-front: var(--status-danger); --c-side: color-mix(in srgb, var(--status-danger) 72%, #000); }
.pw-b__f--top::before { background: var(--c-top); }
.pw-b__f--front::before, .pw-b__f--back::before { background: var(--c-front); }
.pw-b__f--side::before { background: var(--c-side); }
.pw-b__flag { width: 2em; height: 1.85em; margin: -1.85em 0 0 -1em; animation: pw-b-face 24s linear infinite; }
@keyframes pw-b-face { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
.pw-b__flag svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: center bottom; animation: pw-b-flag var(--pw-b-loop) var(--pw-ease) infinite; }
.pw-b__flag path { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.pw-b__flag.is-fail path { fill: var(--status-danger); }
.pw-b__flag.is-warn path { fill: var(--status-review); }
.pw-b__flag.is-warn svg { animation-name: pw-b-flag-dim; }
@keyframes pw-b-flag-dim { 0%, 50% { opacity: 0; transform: translateY(0.8em) scale(0.3); } 55% { opacity: 1; transform: translateY(-0.3em) scale(1.2); } 60% { transform: none; } 70% { opacity: 1; transform: translateY(-0.35em); } 74%, 84% { opacity: 0.2; transform: none; } 87%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.pw-b__flag .pw-b__bang { fill: none; stroke-width: 2.2; stroke-linecap: round; }
@keyframes pw-b-flag { 0%, 50% { opacity: 0; transform: translateY(0.8em) scale(0.3); } 55% { opacity: 1; transform: translateY(-0.3em) scale(1.2); } 60% { transform: none; } 70% { transform: translateY(-0.35em); } 80%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* The charts: two donuts fill clockwise and the bars grow. */
.pw-system__charts { z-index: 1; display: grid; grid-template-columns: 1fr 1fr 0.72fr; align-items: end; gap: 1.4cqw; width: 30cqw; }
.pw-system__donut, .pw-system__bars { display: block; width: 100%; height: auto; overflow: visible; }
.pw-system__ring { fill: none; stroke: color-mix(in srgb, var(--on-navy-title) 14%, transparent); stroke-width: 6; }
.pw-system__seg { fill: none; stroke-width: 6; }
.pw-system__seg.is-pass { stroke: var(--status-success); }
.pw-system__seg.is-warn { stroke: var(--status-review); }
.pw-system__seg.is-fail { stroke: var(--status-danger); }
.pw-system__seg.is-done { stroke: var(--brand-mint); }
/* The charts stay on screen and move a little; once a loop (on the model's clock, --pw-b-loop) a pointer picks
   the red slice, and the model shows only its red elements (.pw-b__f::after below). */
.pw-system__draw { fill: none; stroke: #fff; stroke-width: 8; }
.pw-system__donut { transform-origin: center; animation: pw-sys-sway 9s var(--pw-ease) infinite; }
.pw-system__donut + .pw-system__donut { animation-delay: -4.5s; }
@keyframes pw-sys-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.pw-system__donut text { fill: var(--on-navy-title); font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.pw-system__donut:first-child .pw-system__seg { animation: pw-sys-unpicked var(--pw-b-loop) linear infinite; }
.pw-system__donut:first-child .pw-system__seg.is-fail { animation-name: pw-sys-picked; }
@keyframes pw-sys-unpicked { 0%, 71% { opacity: 1; } 74%, 84% { opacity: 0.3; } 87%, 100% { opacity: 1; } }
@keyframes pw-sys-picked { 0%, 71% { stroke-width: 6; } 74%, 84% { stroke-width: 9.5; } 87%, 100% { stroke-width: 6; } }
.pw-system__pointer { fill: #fff; stroke: var(--brand-navy); stroke-width: 0.8; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: 0 0; animation: pw-sys-pick var(--pw-b-loop) var(--pw-ease) infinite; }
@keyframes pw-sys-pick { 0%, 64% { opacity: 0; transform: translate(6px, 7px); } 69% { opacity: 1; transform: none; } 72% { transform: scale(0.82); } 74%, 84% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: none; } }
.pw-system__bars rect { fill: var(--on-navy-accent); transform-box: fill-box; transform-origin: center bottom; animation: pw-sys-breathe 3.6s var(--pw-ease) calc(var(--i) * -0.9s) infinite; }
.pw-system__bars rect:last-child { fill: var(--brand-mint); }
@keyframes pw-sys-breathe { 0%, 100% { transform: none; } 50% { transform: scaleY(0.78); } }
/* Narrow frames keep the picture and drop the small words. */
@container (max-width: 460px) {
  .pw-system__what, .pw-system__plansub, .pw-system__legend, .pw-system__soon { display: none; }
  .pw-system__plan li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pw-system__caption { font-size: 10.5px; }
  .pw-system__caption--in { left: 50% !important; max-width: 94cqw; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-system__wire, .pw-system__orbit, .pw-system__app, .pw-system__halo, .pw-system__plan, .pw-system__bar i, .pw-system__ok,
  .pw-b__world, .pw-b__box, .pw-b__f, .pw-b__f::before, .pw-b__f::after, .pw-b__flag, .pw-b__flag svg,
  .pw-system__donut, .pw-system__seg, .pw-system__bars rect { animation: none; }
  .pw-system__pointer { animation: none; opacity: 0; }
  .pw-system__packet { display: none; }
  .pw-b__flag { transform: rotateY(-35deg); }
}

/* A stats band and the course cards it introduces share one band. */
.pw-section--lead-in { padding-bottom: var(--space-8); }
.pw-section--follow-on { padding-top: 0; }

/* A form inside a card that is already its frame (the episode's seat form). */
.pw-form--bare { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pw-form--bare .pw-form__done { padding: var(--space-4) 0; }

/* ── Faces on reviews (Clive, 15 Oct 2026) ──────────────────────────────
   site_face: a reviewer's approved photo as a round avatar, laid over their
   initials, so a photo that fails to load leaves the initials showing. The
   quote wall's faces are 48px with a thin ring; a story's speaker gets a
   small face beside their name when they have an approved photo. */
.pw-avatar--photo { position: relative; overflow: hidden; }
.pw-avatar.pw-avatar--photo > .pw-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pw-wall figcaption .pw-avatar { width: 48px; height: 48px; font-size: 15px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.pw-story__speaker:has(> .pw-avatar) { display: flex; align-items: center; gap: var(--space-3); }
.pw-story__speaker > .pw-avatar { width: 36px; height: 36px; font-size: 12px; }

/* ── A credential as an award (the Master Practitioner page, 15 Oct 2026) ──
   HeroBlock's certificate aside: the certificate itself, framed like a
   print on a soft mint glow, with its caption underneath and no app window
   round it. FeatureRows' plain frame: a picture that isn't a screen (a
   badge, a person) without the window. */
.pw-hero__award { position: relative; margin: 0; display: grid; justify-items: center; gap: var(--space-4); isolation: isolate; }
.pw-hero__award::before { content: ""; position: absolute; inset: -4% -6% 8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-mint) 30%, transparent), transparent); filter: blur(34px); }
.pw-hero__award img { display: block; width: min(100%, 440px); height: auto; border-radius: var(--radius-xl); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-mint) 40%, transparent), 0 0 0 8px color-mix(in srgb, var(--on-navy-title) 6%, transparent), var(--shadow-float); transition: transform var(--pw-slow) var(--pw-ease); }
.pw-hero__award:hover img { transform: translateY(-4px); }
.pw-hero__award figcaption { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-navy-soft); }
.pw-feature__media--plain { display: grid; place-items: center; padding: var(--space-6); border-radius: var(--radius-2xl); background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-mint) 16%, transparent), transparent 75%), var(--surface-wash); }
.pw-feature__media--plain img { display: block; width: auto; max-width: 100%; max-height: 420px; height: auto; }
@media (max-width: 900px) { .pw-hero__award img { width: min(100%, 340px); } .pw-feature__media--plain img { max-height: 320px; } }
@media (prefers-reduced-motion: reduce) { .pw-hero__award img { transition: none; } .pw-hero__award:hover img { transform: none; } }

/* OfferBlock: a one-off paid offer (a credential). The price on a navy card
   - usual price struck through, the price large in white, the code line and
   fact pills, the one action - with a second rate (students) set apart on a
   mint-edged panel; beside it, what's included with mint ticks and the badge. */
.pw-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-top: var(--space-10); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-lift); overflow: hidden; }
.pw-offer__deal { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-10); }
.pw-offer__name { font-family: var(--font-condensed); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-mint); }
.pw-offer__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); line-height: 1; }
.pw-offer__price s { font-size: 24px; font-weight: 700; color: var(--on-navy-muted); text-decoration-thickness: 2px; }
.pw-offer__price b { font-size: 72px; font-weight: 900; letter-spacing: -0.03em; color: var(--on-navy-title); }
.pw-offer__note-line { font-size: 16px; font-weight: 600; color: var(--on-navy); }
.pw-offer__facts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pw-offer__facts li { padding: 5px 12px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--on-navy-title) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-navy-title) 14%, transparent); font-size: 13px; font-weight: 700; color: var(--on-navy); }
.pw-offer__deal > .pw-row { margin-top: var(--space-2); }
.pw-offer__second { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--brand-mint) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-mint) 38%, transparent); }
.pw-offer__second-label { font-family: var(--font-condensed); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-mint); }
.pw-offer__second-price { display: flex; align-items: baseline; gap: var(--space-2); line-height: 1; }
.pw-offer__second-price s { font-size: 17px; font-weight: 700; color: var(--on-navy-muted); }
.pw-offer__second-price b { font-size: 40px; font-weight: 900; letter-spacing: -0.02em; color: var(--on-navy-title); }
.pw-offer__second > p:not([class]) { font-size: 14.5px; line-height: 1.55; color: var(--on-navy-soft); }
.pw-offer__note { font-size: 13.5px; line-height: 1.5; color: var(--on-navy-muted); }
.pw-offer__included { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-10); }
.pw-offer__list { display: grid; gap: var(--space-5); }
.pw-offer__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); }
.pw-offer__tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-mint); color: var(--mint-ink); }
.pw-offer__tick .pw-ic { width: 15px; height: 15px; }
.pw-offer__list p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.pw-offer__badge { display: flex; align-items: center; gap: var(--space-4); margin: var(--space-2) 0 0; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-offer__badge img { flex: none; width: 88px; height: auto; }
.pw-offer__badge figcaption { font-size: 15px; font-weight: 700; color: var(--brand-navy); }
@media (max-width: 900px) { .pw-offer { grid-template-columns: minmax(0, 1fr); } }
.pw-offer__deal, .pw-offer__included { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) {
  .pw-offer__deal, .pw-offer__included { padding: var(--space-6) var(--space-5); }
  .pw-offer__price b { font-size: 56px; }
  .pw-offer .pw-btn { white-space: normal; text-align: center; }
  .pw-offer__deal > .pw-row > .pw-btn { flex: 1 1 100%; justify-content: center; }
}
/* The offer's one text link (how it works, or the booking page without a code), mint on the navy card. */
.pw-offer__more a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--brand-mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pw-offer__more a:hover { text-decoration-thickness: 2px; }
.pw-offer__more .pw-ic { width: 14px; height: 14px; }

/* CourseExplainersBlock: what each course covers, one row per course - the course's picture, then its level in
   mint capitals, the title linking to it, the promise, the outcomes as a two-column ticked list and a secondary
   action - in one column of white cards; a wash strip of getting-started links closes it. Rows stack below
   bp-sm with the picture on top. */
.pw-explainers__lead { margin-top: var(--space-4); }
.pw-explainers { display: grid; gap: var(--space-4); margin-top: var(--space-10); padding: 0; list-style: none; }
.pw-explainer { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-8); align-items: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-explainer__media { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-wash); }
.pw-explainer__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--pw-med) var(--pw-ease); }
.pw-explainer:hover .pw-explainer__media img { transform: scale(1.03); }
.pw-explainer__body { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.pw-explainer__level { font-family: var(--font-condensed); font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); }
.pw .pw-explainer h3 a { color: inherit; text-decoration: none; }
.pw .pw-explainer h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pw-explainer__promise { max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); }
.pw-explainer__outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); width: 100%; margin: var(--space-1) 0 var(--space-2); }
.pw-explainer__outcomes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.pw-explainer__tick { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--surface-mint); color: var(--mint-ink); }
.pw-explainer__tick .pw-ic { width: 12px; height: 12px; }
.pw-explainers__start { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-8); margin-top: var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-explainers__start ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding: 0; list-style: none; }
.pw-explainers__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--link); text-decoration: none; }
.pw-explainers__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-explainers__link .pw-ic { width: 14px; height: 14px; }
@media (max-width: 900px) { .pw-explainer { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5); } .pw-explainer__outcomes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pw-explainer { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); } .pw-explainers__start { padding: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .pw-explainer__media img { transition: none; } .pw-explainer:hover .pw-explainer__media img { transform: none; } }
/* A run of four or more course or lesson cards (pw-grid-4) kept two across on phones, which clipped each card's
   button at 390px; on phones they stack like every other card grid. */
@media (max-width: 640px) { .pw-grid-4:has(> .pw-course) { grid-template-columns: minmax(0, 1fr); } }

/* Landing sections: a moved page's long text on a landing page (the article block, layout "sections";
   Website::LandingBlocksHelper) instead of a post's contents-menu layout. Each h2 is a band whose heading reads as
   the site's section heads; its lead keeps the reading measure; its h3s are white cards in a grid (a video
   facade fills the card's width); a note after an <hr> sits on a mint-edged panel. A long page opens with a row
   of chips linking to its sections. The headings come through the prose sanitiser, so they are styled here by
   position, not by class. */
.pw-landing__band { scroll-margin-top: var(--header-height); }
.pw-landing__jump { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
.pw-landing__jump ul { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.pw-landing__jump .pw-chip { text-decoration: none; }
.pw-prose.pw-landing__head { max-width: 760px; }
.pw-landing__head h2 { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 900; letter-spacing: -0.02em; }
.pw :is(.pw-landing__head h2, .pw-landing__card h3) a { color: inherit; }
.pw-landing__lead { max-width: 820px; margin-top: var(--space-3); }
.pw-landing__band .pw-prose > ul:not([class]) { gap: var(--space-3); padding-left: 0; list-style: none; }
.pw-landing__band .pw-prose > ul:not([class]) > li { position: relative; padding-left: 30px; }
.pw-landing__band .pw-prose > ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-mint); box-shadow: inset 0 0 0 5px var(--surface-mint), inset 0 0 0 9px var(--mint-ink); }
.pw-landing__cards { margin-top: var(--space-8); }
.pw-landing__cards--one { display: grid; max-width: 820px; }
.pw-landing__card { min-width: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); font-size: 16px; line-height: 1.65; }
.pw-landing__card.pw-prose > * + * { margin-top: var(--space-3); }
.pw-landing__card h3 { margin: 0; font-size: 20px; line-height: 1.3; }
.pw-landing__card > p:last-child { color: var(--ink-soft); font-size: 15px; }
.pw-landing__card.pw-prose > figure { margin-block: var(--space-4); }
.pw-landing__footer { max-width: 820px; margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--brand-mint) 10%, var(--surface)); box-shadow: inset 4px 0 0 var(--brand-mint); }
.pw-landing__footer > * + * { margin-top: var(--space-3); }
@media (max-width: 640px) {
  .pw-landing__head h2 { font-size: 28px; }
  .pw-landing__card { padding: var(--space-5); }
  .pw-landing__jump .pw-chip { white-space: normal; text-align: left; min-height: 44px; padding-block: 8px; line-height: 1.3; }
}
/* VideoGridBlock with exactly four recordings (an assignment's four parts):
   one row of four on wide screens, never three and an orphan. */
@media (min-width: 901px) {
  .pw-vgrid:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pw-vgrid:has(> li:nth-child(4):last-child) .pw-video__num { font-size: 110px; }
}

/* The cookie notice (website_analytics.js): a small card in the bottom left
   corner, only for visitors in Europe who have not chosen yet. It never
   covers the page or blocks it, and it is gone once they choose. */
.pw-cookies { position: fixed; z-index: 50; left: var(--space-4); bottom: var(--space-4); max-width: 340px; display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 1.45; animation: pw-cookies-in var(--pw-med) var(--pw-ease) both; }
.pw-cookies p { margin: 0; }
.pw-cookies__actions { display: flex; align-items: center; gap: var(--space-4); }
.pw-cookies__no { padding: 4px 2px; border: 0; background: none; color: var(--ink-muted); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pw-cookies__no:hover { color: var(--ink); }
@keyframes pw-cookies-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .pw-cookies { animation: none; } }
@media (max-width: 480px) { .pw-cookies { right: var(--space-4); max-width: none; } }

/* Plannerly learn - the training site: course hero, curriculum, lesson layout, quiz and result, learner dashboard
   and the certificate verify page. Loaded only by training pages: dist/plannerly-learn.css is the website pack
   plus this file. Lessons reuse the website's Prose, VideoFacade, CourseBlock and CertificateBlock. */

/* ---- Course hero (navy: one of the page's two navy sections) ---------------- */
.pw-coursehero { padding: var(--space-12) var(--space-10) var(--space-16); }
.pw-coursehero__grid { max-width: var(--container-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.pw-coursehero__copy { display: grid; gap: var(--space-5); align-content: start; }
.pw-coursehero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 15px; color: var(--on-navy-soft); }
.pw-coursehero__facts > span { display: inline-flex; align-items: center; gap: 6px; }
.pw-coursehero__facts > span > .pw-ic { width: 16px; height: 16px; color: var(--brand-mint); }
.pw-coursehero__facts b { color: var(--on-navy-title); }
.pw-coursehero .pw-stars .pw-ic { width: 16px; height: 16px; }
.pw-coursehero__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pw-coursehero__price { font-size: 15px; color: var(--on-navy-soft); }
.pw-coursehero__price b { font-size: 22px; font-weight: 900; color: var(--on-navy-title); }
.pw-coursehero__progress { display: grid; gap: var(--space-2); max-width: 420px; font-size: 14px; color: var(--on-navy-soft); }
.pw-navy .pw-progress { background: color-mix(in srgb, var(--on-navy-title) 16%, transparent); }
.pw-coursehero__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
@media (max-width: 900px) { .pw-coursehero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
@media (max-width: 640px) { .pw-coursehero { padding: var(--space-6) var(--space-4) var(--space-12); } }

/* ---- Curriculum: a topic per accordion, a row per lesson ---------------------
   State is an icon and a word: Done, You're here, Not started, Locked. */
.pw-curriculum { display: grid; gap: var(--space-3); }
.pw-topic { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease); }
.pw-topic[open] { border-color: color-mix(in srgb, var(--brand-blue) 35%, var(--line)); }
.pw-topic > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; min-height: 64px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); cursor: pointer; list-style: none; }
.pw-topic > summary::-webkit-details-marker { display: none; }
.pw-topic > summary b { display: block; font-size: 17px; line-height: 1.35; color: var(--brand-navy); }
.pw-topic > summary small { font-size: 13.5px; color: var(--ink-muted); }
.pw-topic__done { font-size: 13px; font-weight: 700; color: var(--mint-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pw-topic__chev { color: var(--ink-muted); transition: transform var(--pw-med) var(--pw-ease); }
.pw-topic[open]:not(.is-closing) .pw-topic__chev { transform: rotate(180deg); }
.pw-topic > summary + ol { display: grid; gap: 2px; padding: 0 var(--space-2) var(--space-3); }
.pw-lessonrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; min-height: var(--tap-min); padding: 6px 10px; border-radius: var(--radius-lg); color: var(--ink); font-size: 15px; line-height: 1.4; text-decoration: none; transition: background-color var(--pw-fast) var(--pw-ease); }
a.pw-lessonrow:hover { background: var(--surface-wash); }
.pw-lessonrow > .pw-tile { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-wash); color: var(--ink-soft); }
.pw-lessonrow > .pw-tile .pw-ic { width: 16px; height: 16px; }
.pw-lessonrow small { display: block; font-size: 13px; color: var(--ink-muted); }
.pw-lessonrow__state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink-muted); }
.pw-lessonrow__state .pw-ic { width: 16px; height: 16px; }
.pw-lessonrow.is-done .pw-lessonrow__state { color: var(--mint-ink); }
.pw-lessonrow.is-done > .pw-tile { background: var(--surface-mint); color: var(--mint-ink); }
.pw-lessonrow[aria-current="page"] { background: var(--surface-selected); color: var(--ink-selected); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand-blue) 55%, transparent); }
.pw-lessonrow[aria-current="page"] .pw-lessonrow__state, .pw-lessonrow[aria-current="page"] small { color: var(--ink-selected); }
.pw-lessonrow[aria-current="page"] > .pw-tile { background: var(--action); color: var(--on-action); }
.pw-lessonrow.is-locked { color: var(--ink-muted); cursor: not-allowed; }

/* ---- Lesson: the lesson beside the course contents --------------------------- */
.pw-lesson { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6) var(--space-10); align-items: start; max-width: calc(var(--container-max) + 2 * var(--space-10)); margin-inline: auto; padding: var(--space-4) var(--space-10) var(--space-16); }
.pw-lesson__main { display: grid; gap: var(--space-6); min-width: 0; }
/* The breadcrumb row spans both columns, so the step (its video first) and the course contents start level
   (Clive, 15 Oct 2026). */
.pw-lesson__top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.pw-lesson__progress { display: grid; gap: 6px; min-width: 200px; font-size: 13.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-lesson__head { display: grid; gap: var(--space-2); }
.pw-lesson__toggle { display: none; }
.pw-lesson__toggle span { margin-left: auto; font-weight: 500; color: var(--ink-muted); }
.pw-lesson__complete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-lesson__complete form { margin: 0; }
.pw-lesson__complete p { font-size: 15px; color: var(--ink-soft); }
.pw-lesson__complete p b { display: block; color: var(--brand-navy); }
.pw-lesson__pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.pw-lesson__pager a[href] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-3); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--brand-navy); text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-lesson__pager a[href]:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pw-lesson__pager a > .pw-ic { grid-row: span 2; color: var(--action); }
.pw-lesson__pager small { font: 700 12px/1.3 var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pw-lesson__pager b { font-size: 15.5px; line-height: 1.35; }
.pw-lesson__pager [rel="next"] { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.pw-lesson__pager [rel="next"] > .pw-ic { grid-column: 2; grid-row: 1 / span 2; }
.pw-transcript { border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-transcript > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-5); font-weight: 700; color: var(--brand-navy); cursor: pointer; list-style: none; }
.pw-transcript > summary::-webkit-details-marker { display: none; }
.pw-transcript > summary .pw-ic { color: var(--ink-muted); transition: transform var(--pw-med) var(--pw-ease); }
.pw-transcript[open]:not(.is-closing) > summary .pw-ic { transform: rotate(180deg); }
.pw-transcript > summary + div { display: grid; gap: var(--space-3); max-height: 420px; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
/* The lesson text's "Common questions": FaqBlock's accordion (site.css) inside the prose, at the text's measure. */
.pw-prose > .pw-faq { max-width: var(--measure); }
.pw-prose .pw-faq summary { line-height: 1.4; }
.pw-prose .pw-faq details > div { font-size: 16px; line-height: 1.7; }
.pw-prose .pw-faq details > div > * + * { margin-top: var(--space-3); }
/* The lesson text's "Explore further": a row of small link cards - the destination's picture (or a navy tile with
   an icon), its title in two lines and one line of description. A card that leaves the course opens a new tab. */
.pw-prose .pw-linkcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); max-width: none; padding: 0; list-style: none; }
.pw-linkcards > li { display: grid; min-width: 0; }
.pw-linkcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-linkcard:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pw-linkcard > .pw-linkcard__media { display: block; flex: none; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; border-radius: 0; object-fit: cover; background: var(--surface-wash); }
.pw-linkcard > .pw-linkcard__tile { display: grid; place-items: center; background: var(--brand-navy); color: var(--brand-mint); }
.pw-linkcard__tile .pw-ic { width: 28px; height: 28px; }
.pw-linkcard__body { display: grid; gap: 2px; padding: var(--space-3) var(--space-3) var(--space-4); }
.pw-linkcard__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--brand-navy); }
.pw-linkcard:hover .pw-linkcard__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.pw-linkcard__text { overflow: hidden; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) {
  /* Phones: one card a row, the picture beside the words. */
  .pw-prose .pw-linkcards { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .pw-linkcard { flex-direction: row; align-items: center; }
  .pw-linkcard > .pw-linkcard__media { width: 112px; align-self: stretch; aspect-ratio: auto; min-height: 63px; }
  .pw-linkcard__body { flex: 1; min-width: 0; padding: 10px var(--space-3); }
}
.pw-lesson__nav { position: sticky; top: calc(var(--header-height) + var(--space-4)); display: grid; gap: var(--space-3); max-height: calc(100vh - var(--header-height) - var(--space-8)); overflow-y: auto; padding: 0 var(--space-5) var(--space-6); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-5)) 0; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
/* The course list beside a lesson scrolls on its own when it is taller than the window. Its edges fade while there
   is more to see that way (the lesson island's has-above / has-more), and wheel or touch scrolling carries on to the
   page at either end instead of stopping there (Clive, 15 Oct 2026: near the foot of a lesson the list looked cut
   off). */
/* "Course contents" stays at the top of the list as it scrolls (it opens scrolled to the lesson you are on, which
   used to take the heading away), and the top fade starts under it (--pw-head, the heading's height). */
.pw-lesson__nav { --pw-head: 40px; --pw-fade-top: 0px; --pw-fade-bottom: 0px; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--pw-head), transparent var(--pw-head), #000 calc(var(--pw-head) + var(--pw-fade-top)), #000 calc(100% - var(--pw-fade-bottom)), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 var(--pw-head), transparent var(--pw-head), #000 calc(var(--pw-head) + var(--pw-fade-top)), #000 calc(100% - var(--pw-fade-bottom)), transparent 100%); }
.pw-lesson__nav.has-above { --pw-fade-top: 32px; }
.pw-lesson__nav.has-more { --pw-fade-bottom: 64px; }
.pw-lesson__navhead { position: sticky; top: 0; z-index: 1; box-sizing: border-box; min-height: var(--pw-head); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-1) var(--space-2); background: var(--surface); }
.pw-lesson__navhead .pw-close { display: none; }
.pw-lesson__scrim { position: fixed; inset: 0; z-index: calc(var(--z-dialog) - 1); background: color-mix(in srgb, var(--brand-navy) 64%, transparent); animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-lesson__scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .pw-lesson { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-2) var(--space-4) var(--space-12); }
  .pw-lesson__toggle { display: flex; position: sticky; top: calc(var(--header-height) + 8px); z-index: var(--z-lens); box-shadow: var(--shadow-card); }
  .pw-lesson__nav { position: static; max-height: none; overflow: visible; }
  /* With the script, the contents become a drawer that rises from the bottom. */
  .pw-lesson.is-drawer .pw-lesson__nav { position: fixed; inset: auto 0 0; z-index: var(--z-dialog); max-height: min(82vh, 680px); overflow-y: auto; padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: var(--surface); box-shadow: var(--shadow-float); transform: translateY(105%); visibility: hidden; transition: transform var(--pw-med) var(--pw-ease), visibility 0s linear var(--pw-med); }
  .pw-lesson.is-drawer.is-open .pw-lesson__nav { transform: none; visibility: visible; transition: transform var(--pw-med) var(--pw-ease); }
  .pw-lesson.is-drawer .pw-lesson__navhead .pw-close { display: inline-grid; }
}
@media (max-width: 640px) { .pw-lesson__pager { grid-template-columns: minmax(0, 1fr); } .pw-lesson__pager [rel="next"] { grid-column: 1; } .pw-lesson__complete { padding: var(--space-4); } .pw-lesson__complete > * { flex: 1 1 100%; } .pw-lesson__complete .pw-btn { width: 100%; } }

/* ---- The Master Practitioner programme on its course page (Clive, 15 Oct 2026) ------------------------------------
   Training::MasterPractitioner: the steps from booking to the certificate. A visitor reads them as how it works; for
   the enrolled learner learn.js marks each done (a mint tick for its icon) and the next one current, opens the
   questions, gives them their kickoff booking link or their call's time, and lets them tick off each part. */
.pw-programme__intro { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.pw-programme__intro > p { margin: 0; }
.pw-programme { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.pw-programme__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-programme__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-wash); color: var(--ink-muted); transition: background-color var(--pw-med) var(--pw-ease), color var(--pw-med) var(--pw-ease); }
.pw-programme__mark .pw-ic { grid-area: 1 / 1; width: 20px; height: 20px; }
.pw-programme__tick { opacity: 0; }
.pw-programme__body { display: grid; gap: var(--space-2); min-width: 0; }
.pw-programme__body > p { margin: 0; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.pw-programme__step.is-done .pw-programme__mark { background: var(--brand-mint); color: var(--brand-navy); }
.pw-programme__step.is-done .pw-programme__icon { opacity: 0; }
.pw-programme__step.is-done .pw-programme__tick { opacity: 1; }
.pw-programme__step.is-current { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); box-shadow: var(--shadow-raised), var(--shadow-card); }
.pw-programme__step.is-current .pw-programme__mark { background: color-mix(in srgb, var(--brand-blue) 12%, var(--surface)); color: var(--blue-ink); }
.pw-programme__form { display: grid; gap: var(--space-4); margin-top: var(--space-2); }
.pw-programme__when { font-weight: 700; color: var(--brand-navy); }
.pw-programme__parts { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.pw-programme__parts > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px var(--space-4); padding: 4px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.pw-programme__parts > li > a { font-size: 14px; font-weight: 700; color: var(--blue-ink); text-underline-offset: 3px; }
.pw-programme__check { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); font-size: 15px; font-weight: 700; color: var(--brand-navy); cursor: pointer; }
.pw-programme__check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--mint-ink); cursor: pointer; }
.pw-programme__check:has(input:disabled) { cursor: default; }
.pw-programme__check:has(input:disabled) input { cursor: default; }
@media (max-width: 640px) {
  .pw-programme__step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .pw-programme__mark { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { .pw-programme__step, .pw-programme__mark { transition: none; } }

/* ---- Quiz: real radio buttons and checkboxes; the server grades ---------------- */
.pw-quiz { display: grid; gap: var(--space-5); max-width: 760px; }
.pw-quiz__head { display: grid; gap: var(--space-3); }
.pw-question { display: grid; gap: var(--space-4); min-width: 0; margin: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.pw-question[hidden] { display: none; }
.pw-question legend { float: left; width: 100%; padding: 0; }
.pw-question legend + * { clear: both; }
.pw-question legend b { display: block; margin-top: 4px; font-size: 19px; line-height: 1.4; color: var(--brand-navy); }
.pw-question legend small { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-muted); }
.pw-options { display: grid; gap: var(--space-2); }
.pw-option { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: center; min-height: var(--pw-control); padding: 10px 14px; border: 1.5px solid var(--line-button); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.4; cursor: pointer; transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease); }
.pw-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pw-option__box { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--line-control); border-radius: 50%; background: var(--surface); transition: background-color var(--pw-fast) var(--pw-ease), border-color var(--pw-fast) var(--pw-ease), box-shadow var(--pw-fast) var(--pw-ease); }
.pw-option input[type="checkbox"] + .pw-option__box { border-radius: 6px; }
.pw-option input[type="checkbox"] + .pw-option__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--on-action); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--pw-fast) var(--pw-ease); }
.pw-option:hover { border-color: var(--brand-blue); }
.pw-option input:checked + .pw-option__box { border-color: var(--action); background: var(--action); box-shadow: inset 0 0 0 4px var(--surface); }
.pw-option input[type="checkbox"]:checked + .pw-option__box { box-shadow: none; }
.pw-option input[type="checkbox"]:checked + .pw-option__box::after { transform: rotate(45deg) scale(1); }
.pw-option input:focus-visible + .pw-option__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.pw-option:has(input:checked) { border-color: var(--brand-blue); background: var(--surface-selected); color: var(--ink-selected); font-weight: 500; }
.pw-question__error { display: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--status-danger); }
.pw-question__error .pw-ic { width: 16px; height: 16px; }
.pw-question.is-invalid { border-color: var(--status-danger); }
.pw-question.is-invalid .pw-question__error { display: flex; }
.pw-quiz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pw-quiz__step { display: flex; gap: var(--space-3); }
.pw-quiz__step[hidden], .pw-quiz [type="submit"][hidden], .pw-quiz__step [hidden] { display: none; }
.pw-quiz.is-stepped .pw-quiz__foot { flex-direction: column-reverse; align-items: stretch; }
.pw-quiz.is-stepped .pw-quiz__step .pw-btn { flex: 1; }
@media (max-width: 640px) { .pw-question { padding: var(--space-5); } .pw-quiz [type="submit"] { width: 100%; } }

/* ---- Quiz result -------------------------------------------------------------- */
.pw-result { display: grid; gap: var(--space-5); max-width: 760px; }
.pw-result__score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-raised), var(--shadow-card); }
.pw-result__ring { position: relative; display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: conic-gradient(var(--pw-ring, var(--status-success)) calc(var(--value, 0) * 1%), var(--surface-wash) 0); }
.pw-result__ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface); }
.pw-result__ring b { position: relative; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-result--retry .pw-result__ring { --pw-ring: var(--status-review); }
.pw-result__copy { display: grid; gap: var(--space-3); justify-items: start; }
.pw-review { display: grid; gap: var(--space-3); }
.pw-review > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.pw-review .pw-tile { width: 32px; height: 32px; border-radius: 50%; }
.pw-review .pw-tile .pw-ic { width: 18px; height: 18px; }
.pw-review .is-wrong .pw-tile { background: color-mix(in srgb, var(--status-review) 14%, var(--surface)); color: var(--status-review-ink); }
.pw-review__body { display: grid; gap: 6px; font-size: 15px; color: var(--ink-soft); }
.pw-review__body > b { font-size: 16px; color: var(--brand-navy); }
.pw-review__verdict { font-weight: 700; color: var(--mint-ink); }
.pw-review .is-wrong .pw-review__verdict { color: var(--status-review-ink); }
.pw-review__why { margin-top: 4px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface-wash); }
@media (max-width: 640px) { .pw-result__score { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-5); padding: var(--space-6); } .pw-review > li { padding: var(--space-4); gap: var(--space-3); } }

/* ---- Learner dashboard -------------------------------------------------------- */
.pw-dash { display: grid; gap: var(--space-12); }
.pw-dash__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5) var(--space-8); }
.pw-dash__next { display: grid; gap: var(--space-2); justify-items: start; }
.pw-certs { display: grid; gap: var(--space-3); }
.pw-certrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: border-color var(--pw-med) var(--pw-ease), transform var(--pw-med) var(--pw-ease), box-shadow var(--pw-med) var(--pw-ease); }
.pw-certrow:hover { border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.pw-certrow .pw-tile { width: 48px; height: 48px; border-radius: 50%; }
.pw-certrow b { display: block; font-size: 16px; color: var(--brand-navy); }
.pw-certrow span span { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-certrow > .pw-ic { color: var(--action); transition: transform var(--pw-med) var(--pw-ease); }
.pw-certrow:hover > .pw-ic { transform: translateX(4px); }
@media (max-width: 640px) { .pw-certrow { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) var(--space-4); } .pw-certrow .pw-tile { width: 40px; height: 40px; } }

/* ---- Certificate verify page (public) ------------------------------------------- */
.pw-verify { display: grid; gap: var(--space-6); max-width: 880px; margin-inline: auto; }
.pw-verify__status { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-mint); color: var(--brand-navy); }
.pw-verify__status .pw-tile { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--mint-ink); }
.pw-verify__status b { display: block; font-size: 20px; line-height: 1.3; color: var(--brand-navy); }
.pw-verify__status > span > span { font-size: 15px; color: var(--ink-soft); }
.pw-verify__status--missing { background: color-mix(in srgb, var(--status-review) 14%, var(--surface)); }
.pw-verify__status--missing .pw-tile { color: var(--status-review-ink); }
.pw-verify__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); margin: 0; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); }
.pw-verify__facts dt { font: 700 12px/1.3 var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.pw-verify__facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 500; color: var(--brand-navy); overflow-wrap: anywhere; }
.pw-verify__lookup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; }
@media (max-width: 640px) { .pw-verify__facts, .pw-verify__lookup { grid-template-columns: minmax(0, 1fr); } .pw-verify__status { align-items: flex-start; padding: var(--space-4); } }

/* ---- Course reviews (CourseReviews, ReviewPrompt; Clive, 15 Oct 2026) ------------------
   The learners' published reviews on a course page and on /reviews/: the average with how many gave each number of
   stars, then each review - face, name, when, stars, words - newest first, with "Load more". ReviewPrompt asks a
   learner for stars and a few words as they finish, before their certificate: no star is chosen for them, and
   "Skip - see my certificate" is always there. The hero's rating links down to the reviews. */
a.pw-coursehero__rating { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
a.pw-coursehero__rating:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pw-coursehero__media .pw-video { border-radius: var(--radius-xl); box-shadow: var(--shadow-float); }
.pw-stars .pw-ic.is-off { color: var(--line); }
.pw-reviews { display: grid; gap: var(--space-6); }
.pw-reviews__summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-8); align-items: center; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-reviews__score { display: grid; justify-items: center; gap: 6px; min-width: 150px; text-align: center; }
.pw-reviews__score b { font-size: 52px; line-height: 1; font-weight: 900; letter-spacing: -0.03em; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.pw-reviews__score small { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-reviews__bars { display: grid; gap: 6px; }
.pw-reviews__bars li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; gap: var(--space-3); align-items: center; font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pw-reviews__bars li > :last-child { text-align: right; color: var(--ink-muted); }
.pw-reviews__bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-wash); overflow: hidden; }
.pw-reviews__bar i { display: block; width: var(--value, 0%); height: 100%; border-radius: inherit; background: var(--status-review); }
.pw-reviews__write { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-reviews__write .pw-small:empty { display: none; }
.pw-reviews__list { display: grid; gap: var(--space-3); }
.pw-reviews__empty { color: var(--ink-muted); }
.pw-reviews__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.pw-reviews__foot:empty { display: none; }
.pw-reviews__all { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; color: var(--blue-ink); text-decoration: none; }
.pw-reviews__all:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-reviews__all .pw-ic { width: 16px; height: 16px; transition: transform var(--pw-med) var(--pw-ease); }
.pw-reviews__all:hover .pw-ic { transform: translateX(4px); }
.pw-reviews__filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-6) var(--space-2); }
.pw-reviews__filter .pw-chip { text-decoration: none; }
.pw-reviews__filter .pw-chip[aria-current="page"] { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--on-navy-title); }
.pw-reviewcard { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.pw-reviewcard.is-new { animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-reviewcard > .pw-avatar { width: 48px; height: 48px; font-size: 15px; }
.pw-reviewcard__body { display: grid; gap: 6px; min-width: 0; }
.pw-reviewcard__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); }
.pw-reviewcard__who b { font-size: 16px; color: var(--brand-navy); overflow-wrap: anywhere; }
.pw-reviewcard__who time { font-size: 13.5px; color: var(--ink-muted); }
.pw-reviewcard__stars { gap: 2px; }
.pw-reviewcard__stars .pw-ic { width: 16px; height: 16px; }
.pw-reviewcard__text { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.pw-reviewcard__course { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--blue-ink); text-decoration: none; }
.pw-reviewcard__course:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-reviewcard__course .pw-ic { width: 15px; height: 15px; }
/* Stars to choose: real radio buttons, none checked until the learner chooses; the stars up to the one chosen (or
   pointed at) light up. */
.pw-starpick { min-width: 0; margin: 0; padding: 0; border: 0; }
.pw-starpick legend { padding: 0; margin-bottom: 6px; }
.pw-starpick__stars { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.pw-starpick__star { position: relative; display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-md); color: var(--line-control); cursor: pointer; transition: color var(--pw-fast) var(--pw-ease), transform var(--pw-fast) var(--pw-ease); }
.pw-starpick__star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pw-starpick__star .pw-ic { width: 32px; height: 32px; }
.pw-starpick__star:hover { transform: scale(1.08); }
.pw-starpick__star:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.pw-starpick:has(input[value="1"]:checked) .pw-starpick__star:nth-child(-n+1),
.pw-starpick:has(input[value="2"]:checked) .pw-starpick__star:nth-child(-n+2),
.pw-starpick:has(input[value="3"]:checked) .pw-starpick__star:nth-child(-n+3),
.pw-starpick:has(input[value="4"]:checked) .pw-starpick__star:nth-child(-n+4),
.pw-starpick:has(input[value="5"]:checked) .pw-starpick__star:nth-child(-n+5) { color: var(--status-review); }
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:hover) .pw-starpick__star:nth-child(n) { color: var(--line-control); }
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(1):hover) .pw-starpick__star:nth-child(-n+1),
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(2):hover) .pw-starpick__star:nth-child(-n+2),
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(3):hover) .pw-starpick__star:nth-child(-n+3),
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(4):hover) .pw-starpick__star:nth-child(-n+4),
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(5):hover) .pw-starpick__star:nth-child(-n+5) { color: var(--status-review); }
/* Until the learner chooses, the stars are empty outlines (star-outline), so nothing reads as a rating already
   given; the filled star fades in on the chosen ones, and on hover up to the pointer (Clive, 15 Oct 2026). */
.pw-starpick__star > .pw-ic { grid-area: 1 / 1; }
.pw-starpick__star > .pw-starpick__full { opacity: 0; transition: opacity var(--pw-fast) var(--pw-ease); }
.pw-starpick:has(input[value="1"]:checked) .pw-starpick__star:nth-child(-n+1) > .pw-starpick__full,
.pw-starpick:has(input[value="2"]:checked) .pw-starpick__star:nth-child(-n+2) > .pw-starpick__full,
.pw-starpick:has(input[value="3"]:checked) .pw-starpick__star:nth-child(-n+3) > .pw-starpick__full,
.pw-starpick:has(input[value="4"]:checked) .pw-starpick__star:nth-child(-n+4) > .pw-starpick__full,
.pw-starpick:has(input[value="5"]:checked) .pw-starpick__star:nth-child(-n+5) > .pw-starpick__full { opacity: 1; }
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:hover) .pw-starpick__star > .pw-starpick__full { opacity: 0; }
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(1):hover) .pw-starpick__star:nth-child(-n+1) > .pw-starpick__full,
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(2):hover) .pw-starpick__star:nth-child(-n+2) > .pw-starpick__full,
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(3):hover) .pw-starpick__star:nth-child(-n+3) > .pw-starpick__full,
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(4):hover) .pw-starpick__star:nth-child(-n+4) > .pw-starpick__full,
.pw-starpick .pw-starpick__stars:has(.pw-starpick__star:nth-child(5):hover) .pw-starpick__star:nth-child(-n+5) > .pw-starpick__full { opacity: 1; }
/* The prompt (Clive, 15 Oct 2026: invite a rating "without forcing them to select five stars"): "Tap a star to
   rate" beside the empty stars, pointing back at them, and one soft wave across all five, left to right and twice,
   so no count is suggested. Both go once a star is chosen; pointing at the stars stops the wave. */
.pw-starpick__hint { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--space-2); font-size: 14px; font-weight: 500; color: var(--ink-muted); }
.pw-starpick__hint .pw-starpick__hint-arrow { width: 15px; height: 15px; transform: scaleX(-1); color: var(--status-review); }
.pw-starpick:has(input:checked) .pw-starpick__hint { display: none; }
@keyframes pw-star-nudge {
  0%, 18%, 100% { transform: none; color: var(--line-control); }
  8% { transform: translateY(-3px) scale(1.14); color: color-mix(in srgb, var(--status-review) 75%, var(--line-control)); }
}
.pw-starpick:not(:has(input:checked)) .pw-starpick__star { animation: pw-star-nudge 2.4s var(--pw-ease) calc(700ms + var(--i, 0) * 110ms) 2 backwards; }
.pw-starpick__stars:hover .pw-starpick__star { animation: none; }
@media (prefers-reduced-motion: reduce) { .pw-starpick__star { animation: none !important; } }
.pw-reviewform { display: grid; gap: var(--space-4); }
/* The words come after the rating (Clive, 15 Oct 2026: a star rating first, then the comment): closed, and out of
   the tab order, until a star is chosen - or the learner's earlier review is filled in - then they open in place. */
.pw-reviewform__words { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--pw-med) var(--pw-ease), opacity var(--pw-med) var(--pw-ease), margin var(--pw-med) var(--pw-ease); }
.pw-reviewform__words > .pw-field { min-height: 0; overflow: hidden; padding: 3px; margin: -3px; }
.pw-reviewform:not(:has(input[name="rating"]:checked)) .pw-reviewform__words { grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: calc(-1 * var(--space-4)); }
@media (prefers-reduced-motion: reduce) { .pw-reviewform__words { transition: none; } }
.pw-reviewform__optional { font-weight: 400; color: var(--ink-muted); }
.pw-reviewform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.pw-reviewform__skip { font-size: 14px; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.pw-reviewform__skip:hover { color: var(--brand-navy); }
.pw-finish { display: grid; gap: var(--space-5); padding: var(--space-8); border: 1px solid color-mix(in srgb, var(--brand-mint) 55%, var(--line)); border-radius: var(--radius-2xl); background: linear-gradient(160deg, var(--surface-mint) 0%, var(--surface) 55%); box-shadow: var(--shadow-raised), var(--shadow-card); scroll-margin-top: calc(var(--header-height) + var(--space-4)); animation: pw-pop var(--pw-med) var(--pw-ease); }
.pw-finish:focus { outline: none; }
.pw-finish__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.pw-finish__head > div { display: grid; gap: 6px; }
.pw-finish__badge { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--mint-ink); box-shadow: var(--shadow-card); }
.pw-finish__badge .pw-ic { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .pw-reviews__summary { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); }
  /* The course filter: one row that scrolls sideways, edge to edge, like the case studies' chips. */
  .pw-reviews__filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--space-4)); padding: 4px var(--space-4); scrollbar-width: none; }
  .pw-reviews__filter::-webkit-scrollbar { display: none; }
  .pw-reviewcard { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); }
  .pw-reviewcard > .pw-avatar { width: 40px; height: 40px; font-size: 13px; }
  .pw-finish { padding: var(--space-5); }
  .pw-finish__head { grid-template-columns: minmax(0, 1fr); }
  .pw-reviewform__foot .pw-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pw-starpick__star, .pw-reviews__all .pw-ic { transition: none; transform: none !important; } }
/* ---- Lesson discussion (LessonDiscussion; Clive, 16 Oct 2026) ---------------------------------------------------
   The conversation under a lesson, after Previous and Next: its count, the way to sign in for a visitor, then for a
   signed-in learner the box to post and the threads, newest first - each comment's initial, first name ("Plannerly"
   beside someone from the team), when and the words, its replies indented under it - with "Show more". A hidden
   comment shows only to staff, faded and marked. A link to one comment opens on its thread, outlined. */
.pw-discussion { display: grid; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.pw-discussion__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pw-discussion__head .pw-h3 { display: inline-flex; align-items: center; gap: var(--space-2); }
.pw-discussion__head .pw-h3 .pw-ic { color: var(--mint-ink); }
.pw-discussion__count { font-size: 14px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.pw-discussion__gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); background: var(--surface-wash); }
.pw-discussion__gate p { font-size: 15px; color: var(--ink-soft); }
.pw-discussion__form, .pw-discussion__replyform { display: grid; gap: var(--space-3); }
.pw-discussion__replyform { margin: var(--space-3) 0 0 calc(40px + var(--space-3)); }
.pw-discussion__formfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); }
.pw-discussion__note, .pw-discussion__empty { color: var(--ink-muted); }
.pw-discussion__list { display: grid; gap: var(--space-3); }
.pw-discussion__thread { display: grid; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.pw-discussion__thread.is-new, .pw-comment.is-new { animation: pw-fade var(--pw-med) var(--pw-ease); }
.pw-discussion__thread.is-focus { border-color: color-mix(in srgb, var(--brand-mint) 70%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-mint) 30%, transparent), var(--shadow-card); }
.pw-discussion__replies { display: grid; gap: var(--space-3); margin-left: calc(40px + var(--space-3)); }
.pw-discussion__replies:not(:empty) { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pw-discussion__foot { display: flex; justify-content: center; }
.pw-discussion__foot:has(> [hidden]:only-child) { display: none; }
.pw-comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); scroll-margin-top: calc(var(--header-height) + var(--space-8)); }
.pw-comment > .pw-avatar { width: 40px; height: 40px; font-size: 15px; }
.pw-comment.is-staff > .pw-avatar { background: var(--brand-mint); color: var(--brand-navy); }
.pw-comment__main { display: grid; gap: 4px; min-width: 0; }
.pw-comment__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); }
.pw-comment__who b { font-size: 15.5px; color: var(--brand-navy); overflow-wrap: anywhere; }
.pw-comment__who time { font-size: 13px; color: var(--ink-muted); }
.pw-comment__badge { font: 700 11.5px/1.4 var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; color: var(--mint-ink); }
.pw-comment__badge::before { content: "· "; color: var(--ink-muted); }
.pw-comment__body { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere; }
.pw-comment__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.pw-comment__action { padding: 0; border: 0; background: none; font: 700 13.5px/1.6 var(--font-sans); color: var(--blue-ink); cursor: pointer; }
.pw-comment__action:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-comment.is-hidden .pw-comment__body { opacity: .55; }
.pw-comment__hidden { font-size: 13px; font-weight: 700; color: var(--status-danger); }
@media (max-width: 640px) {
  .pw-discussion__thread { padding: var(--space-4); }
  .pw-discussion__replies, .pw-discussion__replyform { margin-left: var(--space-4); }
  .pw-comment { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); }
  .pw-comment > .pw-avatar { width: 32px; height: 32px; font-size: 13px; }
  .pw-discussion__gate .pw-btn, .pw-discussion__formfoot .pw-btn { flex: 1 1 auto; }
}