/* Use-case and workplace pages on direction G, after the Home and About pages: a centred
   hero under pill tabs, then numbered bands that alternate midnight and deep, and a
   centred close. Loads after tokens.css, g-home.css and g-chrome.css. */

/* Hero */
.page-hero { padding: var(--space-5) 0 var(--space-6); }
.page-hero .hero-copy { gap: var(--space-4); margin: var(--space-6) auto 0; max-width: 1028px; }
.page-hero .hero-title { font-size: clamp(40px, 5.6vw, 72px); }
.page-hero .lede { max-width: 760px; }

/* Pill tabs between the pages of one menu, like the step pills on the home page */
.page-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.page-tabs a { padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); font: 500 14px/1 var(--font-sans); color: var(--muted); text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.page-tabs a:hover { border-color: var(--steel); color: var(--ink); }
.page-tabs a[aria-current="page"] { border-color: var(--rose); color: var(--ink); background: color-mix(in srgb, var(--rose) 12%, transparent); }

/* Approach: the illustration beside the three numbered steps, framed as one plate */
.approach { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-top: var(--space-6); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-plate); background: var(--surface-raised); }
.approach .illustration img { width: 100%; height: auto; border-radius: var(--radius); }
.method { margin: 0; padding: 0; list-style: none; }
.method li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-2); padding: var(--space-4) var(--space-3) var(--space-4) 0; }
.method li + li { border-top: 1px solid var(--hairline); }
.method li > span { align-self: start; padding-bottom: 6px; border-bottom: 2px solid var(--rose); font: var(--type-label-weight) var(--type-label-size)/1.4 var(--font-sans); letter-spacing: var(--type-label-tracking); color: var(--rose); justify-self: start; }
.method h3 { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--ink); }
.method p { margin-top: 6px; color: var(--muted); }
.voice-agent-accent { color: var(--rose); }

/* What you get: report switch, the laptop with the live report, three takeaways */
.report-options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.report-options button { padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: transparent; font: 500 14px/1 var(--font-sans); color: var(--muted); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.report-options button:hover { border-color: var(--steel); color: var(--ink); }
.report-options button.selected { border-color: var(--rose); color: var(--ink); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.laptop-link { position: relative; display: block; width: 100%; max-width: 1080px; margin: 0 auto; }
.laptop { position: relative; padding: 12px; border: 1px solid rgba(201,214,230,.28); border-radius: 18px 18px 6px 6px; background: linear-gradient(145deg, #3d4864, #262f48 62%, #353f5a); box-shadow: 0 0 0 1px rgba(201,214,230,.06), 0 30px 60px -28px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.18); }
.laptop .camera { position: absolute; top: 4px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 1px rgba(201,214,230,.3); transform: translateX(-50%); }
.laptop .screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(201,214,230,.2); border-radius: 6px; background: #f5f6f8; }
.laptop .screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop .screen .report-frame { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: top left; transform: scale(var(--report-scale, .7)); background: #f5f6f8; }
.laptop .base { position: absolute; left: -6%; right: -6%; bottom: -14px; height: 14px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #4a5574, #262f48); box-shadow: 0 18px 30px -16px rgba(0,0,0,.7); }
.report-touch-link { display: none; }
.output .laptop-link { margin-bottom: var(--space-4); }
.takeaways > div { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--hairline); border-top-color: var(--ice); border-radius: var(--radius); background: var(--surface); }
.takeaways h3 { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--ink); }
.takeaways p { color: var(--muted); }
.privacy-line { font-size: var(--type-small-size); line-height: var(--type-small-line); color: var(--muted); }
.privacy-line a, .setting-backlink { color: var(--rose); text-decoration: none; }
.privacy-line a:hover, .setting-backlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* In practice: one example at a time, picked from pill tabs or the arrows */
.examples-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); }
.example-arrows { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.example-arrows button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline); background: transparent; color: var(--ink); font: 400 16px/1 var(--font-sans); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out); }
.example-arrows button:hover { border-color: var(--steel); }
.example-count { min-width: 44px; text-align: center; font-size: var(--type-small-size); color: var(--muted); font-variant-numeric: tabular-nums; }
.example-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.example-tabs button { padding: 9px 18px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: transparent; font: 500 14px/1 var(--font-sans); color: var(--muted); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.example-tabs button:hover { border-color: var(--steel); color: var(--ink); }
.example-tabs button[aria-selected="true"] { border-color: var(--rose); color: var(--ink); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.example-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-plate); background: var(--surface-raised); position: relative; overflow: hidden; isolation: isolate; }
.example-slide[hidden] { display: none; }
.example-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--rose) 12%, transparent), transparent 70%); pointer-events: none; }
.example-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius); }
.example-copy { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) 0; }
.example-top { display: flex; flex-direction: column; gap: var(--space-2); }
.example-kpi { display: flex; flex-direction: column; gap: 6px; }
.example-kpi span, .example-detail > span { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--steel); }
.example-kpi strong { font: var(--type-number-weight) clamp(28px, 3vw, 40px)/1.1 var(--font-sans); letter-spacing: var(--type-number-tracking); color: var(--ice); }
.example-copy h3 { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--ink); }
.example-detail { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.example-detail p { color: var(--ink); }
.example-copy .setting-backlink { margin-top: auto; font-size: var(--type-small-size); }

/* Workplace cards: one plate per use, with the photo on top */
.setting-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--radius-plate); background: var(--surface); position: relative; transition: border-color var(--duration-base) var(--ease-out); }
.setting-card:hover { border-color: var(--steel-deep); }
.setting-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--rose), var(--steel-deep) 55%, transparent); }
.setting-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.setting-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.card-label { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--steel); }
.kpi-chip { align-self: flex-start; padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--ice) 45%, transparent); font-size: var(--type-small-size); color: var(--ice); }
.setting-card h3 { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); letter-spacing: var(--type-title-tracking); color: var(--ink); }
.card-description { color: var(--muted); }
.setting-card dl { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.setting-card dt { font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--steel); }
.setting-card dd { margin: 6px 0 0; padding-left: 14px; border-left: 1px solid var(--rose-deep); font: italic 400 var(--type-quote-size)/var(--type-quote-line) var(--font-name); color: var(--ink); }
.setting-more { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-plate); }
.setting-more h3 { font: var(--type-title-weight) var(--type-title-size)/var(--type-title-line) var(--font-sans); color: var(--ink); }
.setting-more a { display: flex; flex-direction: column; gap: 4px; padding-top: var(--space-3); border-top: 1px solid var(--hairline); text-decoration: none; }
.setting-more a span { font-size: var(--type-small-size); color: var(--steel); }
.setting-more a strong { font-weight: 500; color: var(--ink); transition: color var(--duration-fast) var(--ease-out); }
.setting-more a:hover strong { color: var(--rose); }

/* Close */
.close-band .contact { gap: var(--space-4); }
.close-actions { display: flex; justify-content: center; padding-top: var(--space-2); }

/* Phone and tablet */
@media (max-width: 960px) {
  .approach, .example-slide { grid-template-columns: 1fr; }
  .examples-heading { flex-direction: column; align-items: flex-start; }
  .example-photo img { min-height: 0; aspect-ratio: 16 / 10; }
  .setting-cards.grid-3, .takeaways.grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .report-touch-link { display: block; position: absolute; inset: 0; z-index: 4; }
  .page-hero .hero-copy { margin-top: var(--space-5); }
  .approach { padding: var(--space-3); }
}

/* Works councils page: the three-party story, the steps and the guarantees.
   Employees are rose, management steel and OREY ink, as on the home page. */

/* Three parties: one pinned stage, the triangle and message change on scroll */
.br-story { padding: 0; }
.br-story-track { position: relative; }
.br-stage { position: sticky; top: 73px; min-height: calc(100vh - 73px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: var(--space-5) 0; }
.br-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.br-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid var(--hairline); border-radius: 999px; background: transparent; color: var(--muted); font: 500 14px/1 var(--font-sans); cursor: pointer; transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); }
.br-pill span { font-size: 11px; letter-spacing: .12em; color: var(--steel); }
.br-pill:hover { border-color: var(--steel); color: var(--ink); }
.br-pill.is-on { color: var(--ink); border-color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, transparent); }
.br-pill-mgmt.is-on { border-color: var(--steel); background: color-mix(in srgb, var(--steel) 12%, transparent); }
.br-pill-orey.is-on { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }

.br-stage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.br-stage-visual { display: flex; justify-content: center; }
.br-tri-svg { width: min(100%, calc((100vh - 360px) * 1.19)); max-width: 520px; height: auto; overflow: visible; }
.br-tri-edge { stroke: var(--hairline); stroke-width: 2; fill: none; transition: stroke var(--duration-slow) var(--ease-out); }
.br-tri-cut { stroke-dasharray: 3 7; stroke-linecap: round; }
.br-tri-elabel { font: 600 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--muted); }
.br-node { stroke-width: 1.5; }
.br-node-orey { fill: var(--surface); stroke: var(--ink); }
.br-node-emp { fill: color-mix(in srgb, var(--rose) 18%, var(--surface)); stroke: var(--rose); }
.br-node-mgmt { fill: color-mix(in srgb, var(--steel) 18%, var(--surface)); stroke: var(--steel); }
.br-node-t { font: 500 17px var(--font-sans); letter-spacing: .14em; fill: var(--ink); }
.br-node-lab { font: 500 14px var(--font-sans); fill: var(--ink); }
.br-node-sub { font: 600 10px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--steel); }
.br-n { opacity: .32; transform-box: fill-box; transform-origin: center; transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.br-story[data-active="emp"] .br-n[data-node="emp"],
.br-story[data-active="mgmt"] .br-n[data-node="mgmt"],
.br-story[data-active="orey"] .br-n[data-node="orey"] { opacity: 1; transform: scale(1.12); }
.br-story[data-active="emp"] .br-tri-edge[data-edge="emp"] { stroke: var(--rose); }
.br-story[data-active="mgmt"] .br-tri-edge[data-edge="mgmt"] { stroke: var(--steel); }
.br-story[data-active="orey"] .br-tri-edge:not(.br-tri-cut) { stroke: var(--ink); }

.br-msgs { display: grid; }
.br-msg { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--space-3); opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); pointer-events: none; }
.br-msg.is-on { opacity: 1; transform: none; pointer-events: auto; }
.br-msg-kick { margin: 0; font: var(--type-label-weight) var(--type-label-size)/var(--type-label-line) var(--font-sans); letter-spacing: var(--type-label-tracking); text-transform: uppercase; }
.br-kick-emp { color: var(--rose); } .br-kick-mgmt { color: var(--steel); } .br-kick-orey { color: var(--ink); }
.br-msg h3 { margin: 0; font: 500 clamp(28px, 3.2vw, 40px)/1.12 var(--font-sans); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.br-msg-body { margin: 0; font: var(--type-lede-weight) var(--type-lede-size)/var(--type-lede-line) var(--font-sans); color: var(--muted); max-width: 560px; }

/* Steps: three plates with ticked lines */
.steps { list-style: none; margin: 0; padding: 0; }
.step-card { background: var(--surface-raised); }
.step-n { margin: 0; font: 400 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--rose); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--hairline); color: var(--muted); line-height: 1.5; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }

/* Guarantees: a hairline card each, with a check */
.guarantees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.guarantee { flex-direction: row; align-items: flex-start; gap: 14px; background: var(--surface); }
.guarantee .body { margin: 0; }
.check { flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--rose); position: relative; }
.check::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border-right: 1.5px solid var(--rose); border-bottom: 1.5px solid var(--rose); transform: rotate(45deg); }

@media (max-width: 860px) {
  .br-story-track { height: auto !important; }
  .br-stage { position: static; min-height: 0; padding: var(--space-5) 0; }
  .br-pills { display: none; }
  .br-stage-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .br-tri-svg { width: 100%; max-width: 300px; }
  .br-tri-elabel { display: none; }
  .br-n { opacity: 1; transform: none; }
  .br-msgs { gap: var(--space-3); }
  .br-msg { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; padding: var(--space-4); border: 1px solid var(--hairline); border-left: 3px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
  .br-msg[data-focus="emp"] { border-left-color: var(--rose); }
  .br-msg[data-focus="mgmt"] { border-left-color: var(--steel); }
  .br-msg[data-focus="orey"] { border-left-color: var(--ink); }
  .br-msg h3 { font-size: 22px; }
  .br-msg-body { font-size: 16px; }
  .steps.grid-3, .guarantees { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .br-n, .br-msg, .br-tri-edge, .br-pill { transition: none; } }

/* Survey comparison: a three-column table, OREY's column raised and ticked in rose */
.sv-table { border: 1px solid var(--hairline); border-radius: var(--radius-plate); overflow: hidden; background: var(--surface); }
.sv-row { display: grid; grid-template-columns: 160px 1fr 1fr; }
.sv-row + .sv-row { border-top: 1px solid var(--hairline); }
.sv-row > span { padding: 18px 24px; display: flex; gap: 12px; align-items: baseline; line-height: 1.5; }
.sv-row i { font-style: normal; flex: none; width: 14px; }
.sv-l { font: 600 11px/1.5 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.sv-o { color: var(--muted); }
.sv-o i { color: var(--muted); }
.sv-u { color: var(--ink); background: var(--surface-raised); }
.sv-u i { color: var(--rose); }
.sv-head > span { padding-top: 14px; padding-bottom: 14px; font: 600 11px/1.5 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sv-head .sv-u { color: var(--ink); }
.cv-scale { display: flex; gap: var(--space-2); }
.cv-scale span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--hairline); border-radius: var(--radius); font: 500 var(--type-small-size)/1 var(--font-sans); color: var(--muted); }
.cv-scale .is-on { background: var(--ice); border-color: var(--ice); color: var(--midnight); }
.found { color: var(--ink); padding-top: var(--space-2); border-top: 1px solid var(--hairline); }

/* Legal pages: one readable column of text */
.legal-body { max-width: 760px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.7; }
.legal-body h2 { margin: var(--space-5) 0 var(--space-2); font: 500 22px/1.3 var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { margin: var(--space-4) 0 var(--space-1); font: 500 17px/1.4 var(--font-sans); color: var(--ink); }
.legal-body p { margin: 0 0 var(--space-2); }
.legal-body strong { color: var(--ink); font-weight: 500; }
.legal-body ul { margin: 0 0 var(--space-3); padding-left: 20px; }
.legal-body li { margin: 6px 0; }
.legal-body li::marker { color: var(--rose); }
.legal-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); font-size: 15px; }
.legal-body th, .legal-body td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--hairline); vertical-align: top; }
.legal-body th { color: var(--ink); font-weight: 500; }

@media (max-width: 860px) {
  .sv-row { grid-template-columns: 1fr 1fr; }
  .sv-row .sv-l { grid-column: 1 / -1; padding-bottom: 0; }
  .sv-head > span:first-child { display: none; }
  .sv-row > span { padding: 12px 16px; }
}

/* Phones: the laptop's base flares 6% past the frame, which on a 390px screen pushes the
   page sideways, so there it stays inside. Long single words in a hero title, such as
   the German "Datenschutzerklärung.", break with a hyphen instead of running off the page. */
@media (max-width: 640px) {
  .laptop .base { left: 0; right: 0; }
}
.hero-title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }

/* Use case and workplace pages on phones, in the spirit of the phone home page (.page-sub):
   one section per screen and the page snaps from one to the next, smaller and lighter
   type, few words and no boxes. The use case pills give way to the menu; the steps and the
   report questions keep only their titles; each example keeps its question and what we
   would ask; the three workplace cards sit on one row people swipe. Wider screens never
   see any of it. */
@media (max-width: 640px) {
  .page-sub main > section { min-height: calc(100lvh - 73px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
  .page-sub .stack { gap: clamp(22px, 4.5svh, 48px); }
  .page-sub .output .stack, .page-sub .setting-section .stack { gap: clamp(18px, 2.4svh, 26px); }
  .page-sub .hero-title { font-size: clamp(32px, 4.8svh, 46px); font-weight: 400; line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); }
  .page-sub .section-title { font-size: clamp(28px, 4.2svh, 42px); font-weight: 400; line-height: 1.12; letter-spacing: -0.03em; }
  .page-sub .lede { font-size: clamp(15px, 2svh, 18px); line-height: 1.55; font-weight: 300; }
  .page-sub .method h3, .page-sub .example-copy h3 { font-size: clamp(17px, 2.7svh, 24px); }
  .page-sub .takeaways h3, .page-sub .setting-card h3 { font-size: clamp(17px, 2.2svh, 20px); line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }

  .page-sub .page-tabs, .page-sub .method p, .page-sub .takeaways p, .page-sub .output .lede, .page-sub .endpoint-examples .lede, .page-sub .setting-section .lede, .page-sub .setting-more { display: none; }
  .page-sub .page-hero .hero-copy { margin-top: 0; gap: 14px; }
  .page-sub .approach { margin-top: 24px; padding: 0; border: 0; background: none; box-shadow: none; gap: 16px; }
  .page-sub .approach .illustration img { height: 25svh; object-fit: cover; }
  .page-sub .method li, .page-sub .method li + li { grid-template-columns: 36px 1fr; padding: clamp(8px, 1.6svh, 16px) 0; border: 0; }
  .page-sub .method li > span { padding: 0; border: 0; color: var(--rose); }

  .page-sub .output .laptop-link { margin-bottom: 0; }
  .page-sub .takeaways { gap: clamp(10px, 1.8svh, 20px); }
  .page-sub .takeaways > div { flex-direction: row; gap: 14px; padding: 0; border: 0; background: none; }
  .page-sub .takeaways > div::before { content: "→"; color: var(--rose); }

  .page-sub .example-arrows, .page-sub .example-kpi span, .page-sub .example-copy > .example-detail { display: none; }
  .page-sub .example-copy > .example-detail:nth-child(3) { display: flex; }
  .page-sub .example-tabs { flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .page-sub .example-tabs::-webkit-scrollbar { display: none; }
  .page-sub .example-tabs button { flex: none; padding: 7px 12px; font-size: 13px; }
  .page-sub .example-slide { gap: 14px; padding: 0; border: 0; background: none; }
  .page-sub .example-slide::before { content: none; }
  .page-sub .example-photo img { height: 20svh; aspect-ratio: auto; }
  .page-sub .example-copy { gap: 12px; padding: 0; }
  .page-sub .example-kpi strong { font-size: clamp(22px, 3.4svh, 32px); }

  .page-sub .setting-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 16px; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .page-sub .setting-cards::-webkit-scrollbar { display: none; }
  .page-sub .setting-card { flex: 0 0 84%; scroll-snap-align: start; }
  .page-sub .setting-card > img { height: 17svh; aspect-ratio: auto; }
  .page-sub .setting-card .card-description { display: none; }
  .page-sub .setting-card dd { font-size: clamp(15px, 2.1svh, 18px); }

  .page-sub .gc-footer { padding: 48px 0; }
  .page-sub .gc-footer-cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
}
/* Works councils on phones (.page-wc): the triangle with the three short claims beside
   their colour, the steps as plain lists, the guarantees as plain lines and five questions. */
@media (max-width: 640px) {
  .page-wc .br-stage { padding: 0; }
  .page-wc .br-tri-svg { max-width: 62%; }
  .page-wc .br-msgs { gap: clamp(14px, 2.6svh, 26px); }
  .page-wc .br-msg { gap: 4px; padding: 0 0 0 14px; border: 0; border-left: 2px solid var(--hairline); border-radius: 0; background: none; }
  .page-wc .br-msg h3 { font-size: clamp(18px, 2.6svh, 23px); }
  .page-wc .br-msg-body, .page-wc #guarantees .lede, .page-wc .faq details:nth-child(n+6) { display: none; }
  .page-wc .steps { gap: clamp(18px, 3.2svh, 32px); }
  .page-wc .step-card { gap: 6px; padding: 0; border: 0; background: none; }
  .page-wc .step-card .title { font-size: clamp(20px, 3svh, 26px); font-weight: 400; }
  .page-wc .ticks li { padding: 5px 0 5px 18px; border-top: 0; font-size: clamp(14px, 1.9svh, 17px); }
  .page-wc .ticks li::before { top: 13px; }
  .page-wc .guarantees { gap: clamp(12px, 2.6svh, 24px); }
  .page-wc .guarantee { padding: 0; border: 0; background: none; }
  .page-wc .guarantee .body { font-size: clamp(15px, 2.1svh, 18px); color: var(--ink); }
  .page-wc .faq summary.title { padding: clamp(14px, 2.4svh, 22px) 0; font-size: clamp(15px, 2.1svh, 18px); }
}
/* Survey or conversation on phones (.page-sv): four rows of the comparison without the
   table frame, and the two answers to the same question without boxes and with one
   exchange of the conversation. */
@media (max-width: 640px) {
  .page-sv .sv-table { border: 0; border-radius: 0; background: none; }
  .page-sv .sv-row:nth-child(3), .page-sv .sv-row:nth-child(7), .page-sv .sv-row:nth-child(8) { display: none; }
  .page-sv .sv-row, .page-sv .sv-head { grid-template-columns: 1fr 1fr; }
  .page-sv .sv-row .sv-l { display: none; }
  .page-sv .sv-row > span { padding: clamp(10px, 1.8svh, 16px) 12px clamp(10px, 1.8svh, 16px) 0; font-size: clamp(13px, 1.8svh, 16px); }
  .page-sv .sv-head > span { padding-top: 0; font-weight: 500; color: var(--ink); }
  .page-sv #example .grid-2 { gap: clamp(22px, 4svh, 40px); }
  .page-sv .compare-card { gap: 8px; padding: 0; border: 0; background: none; }
  .page-sv .compare-card .small, .page-sv .compare-card.card-raised > p:nth-child(4), .page-sv .compare-card.card-raised > p:nth-child(5) { display: none; }
  .page-sv .compare-card .title { font-size: clamp(17px, 2.4svh, 21px); }
  .page-sv .faq summary.title { padding: clamp(14px, 2.4svh, 22px) 0; font-size: clamp(15px, 2.1svh, 18px); }
}
/* Short phones (iPhone SE and the like): a little less picture so each section still fits one screen. */
@media (max-width: 640px) and (max-height: 700px) {
  .page-sub main > section { padding: 16px 0; }
  .page-sub .setting-card > img { height: 16svh; }
  .page-sub .setting-card .card-label { display: none; }
  .page-sub .example-photo img { height: 14svh; }
  .page-sub .output .laptop-link { width: 72%; }
  .page-wc .steps { gap: 12px; }
  .page-wc .ticks li { padding: 3px 0 3px 18px; }
  .page-wc .ticks li::before { top: 11px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  html:has(> body.page-sub) { scroll-snap-type: y mandatory; scroll-padding-top: 73px; }
  .page-sub main > section { scroll-snap-align: start; }
  .page-sub .gc-footer { scroll-snap-align: end; }
}