/* Night QA fixes, 21.10.2026. Loaded after the type scale layer, so typography fixes made here
   win over it. Every block names the screen and the finding it fixes. */

/* ===== Pass 1 · layout ===== */
/* wide screens: every panel spans the viewport, so the 1200 column stays centred on 1536–1920 */
.panel:not(.hero__stage):not(.workflow-stage) { width: 100% !important; max-width: none !important; }
/* section headings start at the same height on every screen */
.section-head h2, .outcomes__intro h2 { margin-top: 0 !important; }
.section-tracks { padding-top: 90px !important; padding-bottom: 90px !important; }
/* heading → lead 28 px everywhere; lead → cards 40 px where it varied */
.pains .section-head h2, .section-cases .section-lead h2 { margin-bottom: 28px !important; }
.outcomes__intro { margin-bottom: 0; }
.outcome-panels { margin-top: 40px !important; }
.section-tracks .section-lead { margin-bottom: 40px !important; }
/* 06 → 07: the veil fades to nothing, no light band at the boundary */
.section-cases::before { background: linear-gradient(180deg, rgba(244, 250, 253, 0) 0, rgba(240, 249, 251, .22) 260px, rgba(244, 250, 253, 0) 100%) !important; }
/* card corners: one radius for the large cards */
.weeks-grid article, .apply-card, .usecase-card, .author-portrait, .story { border-radius: 28px !important; }
.outcome-panel::after, .outcome-panel::before { border-radius: 28px !important; }
.weeks-grid { gap: 20px !important; }
/* 05: the left column no longer jumps when the caption changes from one line to two */
.mech-caption { min-height: 130px !important; }
.mech-cta { min-height: 48px; padding-block: 0 !important; display: inline-flex; align-items: center; }
/* 09: portrait card and text start at the same top */
.author-layout { align-items: start !important; }
/* 02: channel name on one line; the last file name is not cut */
.ps-bar .ps-grow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-file { padding-inline: 12px !important; gap: 8px !important; }
.ps-file.ps-last small { letter-spacing: -.01em; }
.ps-task { padding-block: 5px !important; }
/* 06 "After the fix": items wrap instead of being cut */
.sv-version--after .sv-mini li { white-space: normal !important; }
/* contact popup: room for the three topics on one line */
dialog.contact-block { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; }
.contact-topic { gap: 6px !important; }
/* examples: a little taller, so short scrolls disappear */
.ucx { max-height: min(88svh, 900px) !important; }
/* the page behind an open dialog does not scroll */
html.has-dialog { overflow: hidden; }
.ucx-body, dialog.contact-block { overscroll-behavior: contain; }
/* "Show fewer questions" arrow points up */
.faq-all span { display: inline-block; }
/* invalid fields are marked after a submit attempt */
form.is-tried :is(input, textarea):invalid { border-color: #c2410c !important; box-shadow: 0 0 0 3px rgba(194, 65, 12, .12); }
form.is-tried .check input:invalid { outline: 2px solid #c2410c; outline-offset: 1px; }
/* hero, final frame: the whole conversation fits, nothing cut at the top */
.aw-thread__inner { gap: 8px !important; }
.aw-row { padding-block: 8px !important; }
.aw-thread { -webkit-mask-image: linear-gradient(transparent 0, #000 18px); mask-image: linear-gradient(transparent 0, #000 18px); }
/* laptops (≤ 860 px tall): screen 03 and the stories fit with their buttons in view */
@media (max-height: 860px) {
  .handover, .section-cases { padding-top: 64px !important; }
  .handover .section-head { margin-bottom: 20px !important; }
  .usecase-tabs { margin-bottom: 24px !important; }
  .story { min-height: 480px !important; }
}

/* ===== Pass 1 · type (on the scale) ===== */
html[data-type="system"] .outcome-panel--know .outcome-row__copy h3 { font-size: var(--ts-fs-lead); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
html[data-type="system"] #usecase-card-title { font-size: var(--ts-fs-lead); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
html[data-type="system"] .mech-doc h3 { font-size: var(--ts-fs-h4-serif) !important; line-height: var(--ts-lh-h4-serif) !important; }
html[data-type="system"] .section-head > p:last-child, html[data-type="system"] .section-lead > p:last-child, html[data-type="system"] .workflow-heading > p:last-child, html[data-type="system"] .outcomes__intro > p:last-child, html[data-type="system"] .hero__lead { color: var(--ts-ink-2) !important; }
html[data-type="system"] .apply-card :is(input, textarea), html[data-type="system"] .contact-form :is(input, textarea) { font-weight: 400 !important; }
html[data-type="system"] .mech-cta { font-size: var(--ts-fs-body) !important; }
html[data-type="system"] .uc-board__task .usecase-card__source { font-size: var(--ts-fs-small) !important; }
html[data-type="system"] .uc-diff__mark { font-family: var(--body) !important; font-size: 16px !important; font-weight: 700 !important; }
html[data-type="system"] .mech-caption__step b { font-size: inherit !important; font-weight: inherit !important; }
html[data-type="system"] .outcome-row__copy h3, html[data-type="system"] .weeks-grid h3 { line-height: var(--ts-lh-h3-sans) !important; }
html[data-type="system"] .req { font-weight: 700 !important; }
html[data-type="system"] .apply-status { line-height: var(--ts-lh-small) !important; }
html[data-type="system"] .site-footer nav a { color: var(--ts-ink-2) !important; }
.tracks-grid h3 { margin-bottom: 16px !important; }
#usecase-view mark { white-space: nowrap; }
.section-head > p:last-child, .section-lead > p:last-child, .week-swap li { text-wrap: pretty; }
/* contrast ≥ 4.5 for small text on coloured fills */
.outcome-row__preview--run.op--run .outcome-run { background: #1f6fa0 !important; }
.aw-btn--primary.is-done { background: #26773f !important; }
.uc-agenda__date small { background: #b93a2c !important; }
.uc-offer.is-over { opacity: .85 !important; }
.uc-offer.is-over b { color: #6b2f17; }
@keyframes op-step { 0%, 6% { color: #4a5f72; background: #eef3f6; } 12%, 86% { color: #2B552C; background: #DDF1E2; } 94%, 100% { color: #4a5f72; background: #eef3f6; } }
@keyframes op-test { 0%, 6% { color: #4a5f72; background: #eef3f6; } 12%, 86% { color: #2B552C; background: #DDF1E2; } 94%, 100% { color: #4a5f72; background: #eef3f6; } }
@keyframes op-test-fix { 0%, 6% { color: #4a5f72; background: #eef3f6; } 12%, 24% { color: #7A3A20; background: #fde3d2; } 32%, 86% { color: #2B552C; background: #DDF1E2; } 94%, 100% { color: #4a5f72; background: #eef3f6; } }

/* ===== Morning 21.10 · owner feedback ===== */
/* one vertical rhythm for 02–10: screens fit a full-screen laptop window again.
   Top leaves room under the fixed header (bottom edge at 54 px); heading → lead is tight,
   lead → content is the larger step, so the heading group reads as one block. */
.pains, .handover, .outcomes, .section-cases, .section-course, .section-tracks, .section-author, .section-faq {
  padding-top: clamp(64px, 8.5vh, 96px) !important;
  padding-bottom: clamp(48px, 6vh, 72px) !important;
}
:is(.panel, .section-author) :is(.section-head, .section-lead, .outcomes__intro, .author-copy) > h2 { margin-bottom: 22px !important; }
/* 09: heading starts at the same height as on the other screens */
.section-author { align-items: start !important; }
.pains .section-head, .handover .section-head, .section-cases .section-lead, .section-course .section-lead,
.section-tracks .section-lead, .section-faq .section-lead { margin-bottom: 32px !important; }
.outcome-panels { margin-top: 32px !important; }
.pains .section-head > h2 { margin-bottom: 15px !important; }
/* 04: icon motion plays once per panel hover, row by row; no snapping between rows,
   the dart stays inside its tile, transform origins computed the same way in Safari */
.outcome-row--skill .oi :is(.oi-dart, .oi-next) { transform-box: fill-box; transform-origin: center; }
.outcome-row--skill:hover :is(.oi-dart, .oi-next, .oi-tick) { animation: none; }
@media (hover: hover) {
  .outcome-panel--know:hover .oi-dart { animation: oi-dart-in .7s var(--e-expo) both; }
  .outcome-panel--know:hover .oi-next { animation: oi-pop-in .6s var(--e-expo) .14s both; }
  .outcome-panel--know:hover .oi-tick { animation: oi-draw .55s var(--e-power3) .28s both; }
}
@keyframes oi-dart-in { 0% { transform: translate(5px, -5px); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes oi-pop-in { 0% { transform: scale(.6); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .outcome-panel--know .oi * { animation: none !important; } }
/* 05: the scene heading is a real H2 again, same size as on the other screens */
html[data-type="system"] .mech__side .workflow-heading h2 { font-size: var(--ts-fs-h2) !important; line-height: var(--ts-lh-h2) !important; letter-spacing: var(--ts-ls-h2) !important; text-wrap: balance; }
/* hero "Learn to build…" and 02 "Each of these…": a bridge sentence, not a heading —
   body face, semibold, full ink */
html[data-type="system"] :is(.hero-learning, .pains-bridge) { font-family: var(--body) !important; font-size: var(--ts-fs-lead) !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: -.01em !important; color: var(--ts-ink) !important; }
/* 06: the card is as tall as the story text; the illustration gives up height so the
   two buttons sit right under it instead of stretching the card */
.story { min-height: 474px !important; align-items: start; }
.story__media { gap: 12px !important; }
.story__media .story__visual { flex: none !important; height: 364px; min-height: 0 !important; }
.story__view { padding: 12px !important; }
.story__view .sv-version { gap: 8px; padding: 14px; }
.story__view .sv-mini { gap: 5px; }
.story__view .sv-mini li { padding-block: 5px; }
/* contact popup: Safari stretched it to the full window height (inset 0 + auto height).
   Centred without insets, so its height is always just its content */
dialog.contact-block { inset: auto !important; top: 50% !important; left: 50% !important; translate: -50% -50%; margin: 0 !important; height: auto !important; align-content: start; overflow: auto; }
/* 09: the quote is a quiet pull-quote — no box, no green rule, smaller and narrower */
html[data-type="system"] .author-quote { width: auto; max-width: 560px; margin: 26px 0 22px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 19px !important; line-height: 1.45 !important; letter-spacing: -.005em !important; color: var(--ts-ink) !important; }
html[data-type="system"] .author-quote small { margin-top: 8px; color: var(--ts-ink-3) !important; }

/* ===== Pass 2 · remaining fixes ===== */
/* 05: the CTA is out of the Tab order while it is invisible */
.mech-cta { visibility: hidden; transition: opacity .5s var(--e-power3), transform .5s var(--e-power3), visibility 0s linear .5s !important; padding-inline: 24px !important; }
.workflow-story.is-end .mech-cta { visibility: visible; transition-delay: 0s !important; }
@media (max-width: 900px) { .mech-cta { visibility: visible; } }
/* 07: the week result reads as the result — 14 px green, one colour with its label */
html[data-type="system"] .weeks-grid b.week-outcome { font-size: var(--ts-fs-ui, 14px) !important; color: var(--ts-tone-green, #2B552C) !important; }
/* 09: the career line ends at the last dot */
.career::before { bottom: 34px !important; }
.career::after { height: calc((100% - 44px) * var(--draw, 0)) !important; }
/* one focus ring everywhere */
:where(a, button, summary, [tabindex], input, textarea):focus-visible { outline: 2px solid #2b94c8; outline-offset: 3px; }
.faq-list summary:focus-visible { outline-offset: 6px; border-radius: 10px; }
.ucx-body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #2b94c8; }
/* 05 brief: highlighted rows get breathing room inside the fill */
.mech-brief > div { padding-inline: 12px; margin-inline: -12px; }
/* outline buttons: one padding and line height */
.track-choose, .faq-all { padding-inline: 24px !important; gap: 12px !important; line-height: 24px !important; }
/* 06: fact dividers as wide as the text column; no hanging word in the story title */
.story__facts > div { margin-inline: 0 !important; padding-inline: 0 !important; }
.story h3 { text-wrap: balance; }
.sv-version--after .sv-mini li { display: flex !important; gap: 6px; align-items: baseline; }
/* forms: "Privacy Policy" never splits */
.check a { white-space: nowrap; }
/* FAQ: answers stay clear of the +/− column */
.faq-list details > :not(summary) { max-width: none !important; padding-right: 40px; }
/* examples: a little more height, so the short scrolls disappear */
.ucx { max-height: min(92svh, 920px) !important; }
.ucx td:first-child, .ucx th:first-child { padding-left: 0; }
.ucx td { font-variant-numeric: tabular-nums; }
/* hero, final frame: the top fade covers empty space, not the "sources connected" pill;
   on short laptop screens the rows tighten so the whole conversation fits */
.aw-thread__inner { padding-top: 18px; }
@media (max-height: 860px) {
  .aw-thread__inner { gap: 5px !important; padding-top: 8px; }
  .aw-row { padding-block: 4px !important; }
  .aw-thread { -webkit-mask-image: linear-gradient(transparent 0, #000 8px); mask-image: linear-gradient(transparent 0, #000 8px); }
}
/* 03: the text column is centred on the result card, so the card does not hang below it */
@media (min-width: 901px) { .usecase-body { align-items: center !important; } }

/* ===== Type cleanup · one line height per size =====
   12 px text 1.4 (16.8), 14 px 1.45 (20.3), 16 px buttons 24. Caps labels keep their own 1.3. */
html[data-type="system"] :is(.aw-chips span, .ps-msg time, .ps-chip, .ps-badge, .ps-n, .ps-task small, .ps-meta, .ps-res small, .ps-file small,
  .uc-item span, .usecase-card__text em, .mech-badge, .mech-changes__n, .stories__placeholder, .sv-tag, .sv-version__label, .ps-replay) { line-height: 1.4 !important; }
html[data-type="system"] :is(.hw-mail__preview, .hw-notes li, .ps-typed, .week-outcome span) { line-height: 1.45 !important; }
html[data-type="system"] .mech-cta { line-height: 24px !important; }
html[data-type="system"] :is(.uc-brief__row--agenda li, .ucx-head span) { line-height: 1.4 !important; }
html[data-type="system"] :is(.ps-card b, .usecase-card__text, .usecase-card__source) { line-height: 1.45 !important; }

/* header CTA: a plain action, not a badge — dark solid pill, no rim, no glow.
   Lime stays for the big calls to action on the page. */
html[data-type="system"] .theme-light .site-header .header-cta { min-height: 36px !important; padding: 0 16px 0 18px !important; gap: 8px; border: 0 !important; border-radius: 999px; color: #fff !important; background: #0d2130 !important; box-shadow: none !important; transition: background-color .2s ease; }
html[data-type="system"] .theme-light .site-header .header-cta:hover { background: #1f3a4f !important; }
html[data-type="system"] .theme-light .site-header .header-cta:focus-visible { outline: 2px solid #2b94c8; outline-offset: 3px; }

/* 08: specializations and services take less room; both titles one size; chips say "Coming soon" */
html[data-type="system"] .tracks-strip--programs b { margin-top: 2px; font-size: var(--ts-fs-body); line-height: var(--ts-lh-body); }
.tracks-strips { margin-top: 24px !important; }
.tracks-strip--programs { padding: 14px 22px !important; gap: 12px 28px !important; }
.tracks-strip--services { margin-top: 10px !important; padding: 4px 22px 0 !important; }
.tracks-strip__chips span { display: inline-flex; align-items: center; gap: 7px; padding: 4px 5px 4px 12px !important; }
.tracks-strip__chips .soon-tag { padding: 1px 7px; border-radius: 999px; color: #6F4E17; background: #F8F5E2; font-size: 12px; font-style: normal; font-weight: 600; line-height: 1.4; }

/* ===== Pass 3 ===== */
/* laptops 1280×800: 03, 06 and 07 fit again when opened from the menu */
@media (max-height: 860px) {
  .handover .section-head, .section-cases .section-lead, .section-course .section-lead { margin-bottom: 20px !important; }
  .course-facts { margin-top: 20px !important; padding-top: 14px !important; }
}
/* hero below 1440: source cards wide enough that their lines do not break (1440+ unchanged) */
@media (max-width: 1439px) {
  .hw[data-widget="call"], .hw[data-widget="calendar"] { width: clamp(222px, 15.5vw, 228px); }
  .hw[data-widget="notes"] { left: 3.5%; width: 300px; }
  .hw[data-widget="email"] { width: clamp(288px, 20vw, 298px); }
}
/* 10: form card starts level with the heading */
#apply { top: 77px; }
/* 05: heading → lead gap like on the other screens */
.mech__side .workflow-heading > h2 { margin-bottom: 22px !important; }
/* no one- or two-word last lines */
.mech-proposal__text, .section-tracks .section-lead > p, #contact-title { text-wrap: balance; }
.usecase-card li { text-wrap: pretty; }
/* example dialogs: drawn buttons read as part of the picture; no 1-px scroll */
.ucx-btn { cursor: default; box-shadow: none !important; opacity: .8; }
.ucx { max-height: min(93svh, 920px) !important; }
/* the last two focus rings on the common style */
.ps-replay:focus-visible, .track-pick input:focus-visible + span { outline: 2px solid #2b94c8 !important; outline-offset: 3px !important; }
/* FAQ answers read like the rest of the body text */
.faq-list details > :not(summary) { font-size: 16px !important; line-height: 24px !important; }
/* Windows: opening a dialog does not shift the page by the scrollbar width */
html { scrollbar-gutter: stable; }

/* 09 · one spread: the quote sits at the bottom, level with the end of the portrait card.
   Right column: heading, lead, one body block on top; the quote is the accent at the bottom,
   serif 24 under a hairline; LinkedIn is a plain link, not a pill. Photo 240 (sharp 600-px source). */
@media (min-width: 901px) {
  .section-author .author-layout { align-items: stretch !important; }
  .section-author .author-copy { display: flex; flex-direction: column; }
  html[data-type="system"] .section-author .author-copy > .author-quote { margin-top: auto !important; }
}
@media (min-width: 901px) {
  .author-photo__frame { width: 252px !important; height: 252px !important; }
  .author-photo__frame img { width: 240px !important; height: 240px !important; }
  .author-photo__badge--a { left: 214px !important; top: 40px !important; }
}
html[data-type="system"] .section-author .author-copy > p { max-width: 600px; margin: 0 0 12px; }
html[data-type="system"] .section-author .author-copy > p.author-intro { margin-bottom: 18px; }
html[data-type="system"] .section-author .author-copy > p:not(.author-intro) { font-size: var(--ts-fs-body); line-height: var(--ts-lh-body); color: var(--ts-ink-2) !important; }
html[data-type="system"] .section-author .author-quote { max-width: 640px; margin: 32px 0 0; padding: 24px 0 0 !important; border-top: 1px solid rgba(13, 33, 48, .12) !important; font-size: var(--ts-fs-h4-serif) !important; line-height: var(--ts-lh-h4-serif) !important; letter-spacing: var(--ts-ls-h4-serif) !important; }
html[data-type="system"] .section-author .author-quote small::before { content: "— "; }
.section-author .author-quote small { display: block !important; margin-top: 12px !important; font-size: var(--ts-fs-ui, 14px) !important; font-weight: 600 !important; }
.section-author .author-links { margin-top: 10px !important; padding: 0 !important; }
.section-author .author-links a { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--ts-accent-ink, #1c5a80) !important; font-size: var(--ts-fs-ui, 14px) !important; }
.section-author .author-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* hero · the start group (cards, headline, chat field) and the final window are centred in the space
   under the header. The shift grows with window height (0 at 800 px tall, 36/14 px at 900) and uses
   margins, so the scripted flight of the cards (measured with offsetTop/rects) stays exact. */
@media (min-width: 901px) {
  .hero__stage .hw, .hero__stage .hero__copy { margin-top: clamp(0px, calc((100svh - 800px) * .36), 40px); }
  .hero__stage .agent-window { margin-top: clamp(0px, calc((100svh - 800px) * .14), 16px); }
  .hero__stage .hero-learning { translate: 0 clamp(0px, calc((100svh - 800px) * .14), 16px); }
}

/* ===== 21.10 evening · screens 09 and 10 ===== */
/* opened from the header, the content sits in the middle of the screen under the header — no empty band at the bottom */
@media (min-width: 901px) and (min-height: 700px) {
  .section-author, .section-faq { min-height: 100svh; display: flex !important; flex-direction: column; justify-content: center; }
  .section-author > .author-layout, .section-faq > .faq-grid { width: 100%; }
}
/* 09: the three paragraphs are one text style (the section lead, 19 px); the first in full ink */
html[data-type="system"] .section-author .author-copy > p,
html[data-type="system"] .section-author .author-copy > p:not(.author-intro) { max-width: 600px; margin: 0 0 14px !important; font-size: var(--ts-fs-lead) !important; line-height: var(--ts-lh-lead) !important; letter-spacing: 0 !important; font-weight: 400 !important; color: var(--ts-ink-2) !important; }
html[data-type="system"] .section-author .author-copy > p.author-intro { color: var(--ts-ink) !important; }
/* 10: one small set of styles —
   questions 16/600 · answers 16/400 · form: eyebrow 12 caps, title serif 24, labels and track chips 14/600,
   helper text and checkboxes 14/400, fields 16, button 16/600, note 12 */
html[data-type="system"] .faq-list summary { font-size: var(--ts-fs-body) !important; line-height: var(--ts-lh-body) !important; font-weight: 600 !important; }
html[data-type="system"] .apply-card h3 { font-size: var(--ts-fs-h4-serif) !important; line-height: var(--ts-lh-h4-serif) !important; letter-spacing: var(--ts-ls-h4-serif) !important; }
html[data-type="system"] .apply-card :is(.lbl, legend) { font-size: var(--ts-fs-ui) !important; font-weight: 600 !important; color: var(--ts-ink) !important; }
html[data-type="system"] .apply-card .track-pick span { font-size: var(--ts-fs-ui) !important; font-weight: 600 !important; color: var(--ts-ink) !important; }
html[data-type="system"] .apply-card > p, html[data-type="system"] .apply-card .check span { font-size: var(--ts-fs-ui) !important; font-weight: 400 !important; color: var(--ts-ink-2) !important; }
html[data-type="system"] .apply-card .req { font-size: inherit !important; font-weight: inherit !important; }

/* ===== Hover without blurred text (04, 08) =====
   Text is never scaled. The hovered card's surface grows from its outer bottom corner; the neighbour
   keeps its size and slides away by exactly the growth (whole pixels), so the gap stays the same. */
@media (hover: hover) and (min-width: 901px) {
  /* 04 */
  .outcome-panels:has(.outcome-panel:first-child:hover) .outcome-panel:last-child { transform: translateX(28px) !important; }
  .outcome-panels:has(.outcome-panel:last-child:hover) .outcome-panel:first-child { transform: translateX(-18px) !important; }
  /* 08: the card's look moves to a surface layer that can grow without touching the text */
  .tracks-grid article.track { overflow: visible !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transform: none !important; transition: transform .3s ease-out !important; }
  .tracks-grid article.track::after { content: ''; position: absolute; inset: 0; z-index: -2; border: 1px solid rgba(40, 98, 125, .17); border-radius: 28px; background: rgb(242, 247, 253); box-shadow: 0 24px 54px rgba(60, 111, 137, .13), inset 0 1px 0 rgba(255, 255, 255, .84); transition: transform .3s ease-out, box-shadow .3s ease-out; }
  .tracks-grid article.track::before { border-radius: 28px; transition: transform .3s ease-out, opacity .3s ease-out; }
  .tracks-grid article.track:first-child::after, .tracks-grid article.track:first-child::before { transform-origin: left bottom; }
  .tracks-grid article.track:last-child::after, .tracks-grid article.track:last-child::before { transform-origin: right bottom; }
  .tracks-grid article.track:hover { transform: none !important; box-shadow: none !important; }
  .tracks-grid article.track:hover::after, .tracks-grid article.track:hover::before { transform: scale(1.03); }
  .tracks-grid article.track:hover::after { box-shadow: 0 36px 72px rgba(53, 103, 129, .2), inset 0 1px 0 rgba(255, 255, 255, .84); }
  .tracks-grid:has(article.track:first-child:hover) article.track:last-child { transform: translateX(18px) !important; box-shadow: none !important; }
  .tracks-grid:has(article.track:last-child:hover) article.track:first-child { transform: translateX(-18px) !important; box-shadow: none !important; }
}

/* 05: the hidden CTA no longer takes room in the left column, so the visible column is centred on the window */
@media (min-width: 901px) {
  .mech__side { position: relative; }
  .mech__side .mech-cta { position: absolute !important; left: 0; top: calc(100% + 24px); }
}
@media (min-width: 901px) and (max-height: 860px) {
  .mech__side { gap: 18px !important; }
}

/* 09: the three paragraphs are one style and one colour (the section lead) */
html[data-type="system"] .section-author .author-copy > p.author-intro { color: var(--ts-ink-2) !important; }

/* forms (10 and the contact popup): one small text size. Labels and track chips 14/600; helper text,
   checkboxes, fields and their placeholders 14/400; the button keeps the site button style */
@media (min-width: 901px) {
  html[data-type="system"] :is(.apply-card, .contact-form) :is(input, textarea) { font-size: var(--ts-fs-ui) !important; line-height: var(--ts-lh-ui) !important; }
}
html[data-type="system"] :is(.apply-card, .contact-form) :is(input, textarea)::placeholder { color: var(--ts-ink-3); opacity: 1; }
html[data-type="system"] .contact-form :is(.lbl, legend, .contact-topic span) { font-size: var(--ts-fs-ui) !important; font-weight: 600 !important; color: var(--ts-ink) !important; }
html[data-type="system"] .contact-form .check span { font-size: var(--ts-fs-ui) !important; font-weight: 400 !important; color: var(--ts-ink-2) !important; }
html[data-type="system"] :is(.apply-card, .contact-form) .req { font-size: inherit !important; font-weight: inherit !important; }

/* 02: the clock chip stands out from the card */
.ps-clock { background: #fff !important; box-shadow: 0 0 0 1px rgba(13, 33, 48, .1), 0 4px 10px -6px rgba(24, 55, 80, .35) !important; }

/* 08: the arrows in "where the agent runs" pulse gently, one after another */
@media (prefers-reduced-motion: no-preference) {
  .track-flow > i { display: inline-block; animation: flow-nudge 2.4s ease-in-out infinite; }
  .track-flow > i:nth-of-type(2) { animation-delay: .4s; }
  @keyframes flow-nudge { 0%, 60%, 100% { transform: none; opacity: .55; } 30% { transform: translateX(3px); opacity: 1; } }
}

/* 10: answers open smoothly (height where the browser can animate it, fade and slide everywhere) */
.faq-list { interpolate-size: allow-keywords; }
.faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .4s cubic-bezier(.215, .61, .355, 1), content-visibility .4s allow-discrete; }
.faq-list details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: no-preference) {
  .faq-list details[open] > :not(summary) { animation: faq-open .4s cubic-bezier(.215, .61, .355, 1); }
  @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }
}

/* 05, step 8/8: the last step is shown in full; a second later (or at once near the very end — the script
   sets .is-cta) the caption card gives way to the "Bring your own task" button in the same place.
   Scrolling back brings the caption back. */
@media (min-width: 901px) {
  .mech__side .mech-cta { top: auto !important; bottom: 41px; }
  .mech-caption { transition: opacity .35s ease, transform .35s ease, visibility 0s linear 0s; }
  .workflow-story.is-cta .mech-caption { opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s; }
  .workflow-story.is-end:not(.is-cta) .mech-cta { opacity: 0 !important; transform: translateY(10px) !important; visibility: hidden !important; }
  .workflow-story.is-cta .mech-cta { transition: opacity .45s var(--e-power3) .12s, transform .45s var(--e-power3) .12s, visibility 0s linear .12s !important; }
}
/* 09: a full line of space between the three paragraphs */
html[data-type="system"] .section-author .author-copy > p,
html[data-type="system"] .section-author .author-copy > p:not(.author-intro) { margin-bottom: 28px !important; }

/* 09: a little more air under the heading */
html[data-type="system"] .section-author .author-copy > h2 { margin-bottom: 34px !important; }

/* hero: scroll hint at the bottom centre; hides as soon as scrolling starts. */
.scroll-hint { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ts-accent-ink, #1c5a80); pointer-events: none; transition: opacity .4s ease, translate .4s ease; }
html.hint-hidden .scroll-hint { opacity: 0; translate: 0 8px; }
.scroll-hint__label { order: 2; font-family: var(--body); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .14em; text-transform: uppercase; }
/* three chevrons growing downward, lit one after another */
.scroll-hint__cascade { display: flex; flex-direction: column; align-items: center; }
.scroll-hint__cascade svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .2; animation: hint-wave 1.8s ease-in-out infinite; }
.scroll-hint__cascade svg path { vector-effect: non-scaling-stroke; }
.scroll-hint__cascade svg:nth-child(1) { width: 12px; height: 12px; }
.scroll-hint__cascade svg:nth-child(2) { width: 16px; height: 16px; margin-top: -5px; animation-delay: .2s; }
.scroll-hint__cascade svg:nth-child(3) { width: 20px; height: 20px; margin-top: -6px; animation-delay: .4s; }
@keyframes hint-wave { 0%, 100% { opacity: .2; } 35% { opacity: 1; } 70% { opacity: .2; } }
@media (max-width: 900px) { .scroll-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .scroll-hint__cascade svg { animation: none !important; } .scroll-hint__cascade svg { opacity: .7; } }
/* the hint fades in after the hero intro has settled */
@media (prefers-reduced-motion: no-preference) {
  .scroll-hint { animation: hint-in .6s ease 1.6s backwards; }
  @keyframes hint-in { from { opacity: 0; } }
}

/* ---------- 21.10 night: sharp text on layers ----------
   A permanent will-change keeps a block on its own layer; when that layer sits between pixels its text blurs.
   These blocks only animate now and then, so the browser can promote them just for the motion. */
.usecase-card, .mech-window, .mech-doc, .mech-toast, .mech-proposal { will-change: auto; }
/* the frosted ghost button is its own layer too; over the hero's smooth gradient the blur was not visible anyway */
.hero__actions .button--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .7); }
/* 09: the badge floats on transform (Safari moves it on the GPU, smoothly) and slides in on translate instead */
.author-photo__badge { transition: opacity .6s ease, translate .8s var(--e-expo); will-change: transform; }
.career-wrap:not(.is-drawn) .author-photo__badge { transform: none; translate: -14px 0; }
@keyframes badge-float { 50% { transform: translateY(-6px); } }
/* hero headline block: no permanent layer. With will-change the browser keeps one bitmap and rescales it on scroll,
   so on a 1× external monitor the slightly shrunk headline, lead and buttons turn soft. Painted directly they stay sharp. */
.hero__copy { will-change: auto; }