/* Dark theme (October 2026; the owner's chosen and only version of these parts of the site).
   PageLayout puts html.theme-dark on every page. It styles the navigation bar everywhere and, on the
   English and Italian home pages, the blocks tagged data-dark: the logo strip, the problem with the
   before/after comparison and the benefits, the outcomes band, "Now, try an improvement", "How Syllotips works"
   and every section after it down to "Before we talk."

   Owner's direction:
   - One flat #1D1817 from the top of the hero to the footer (owner's request, October 2026, replacing the
     earlier #1D1817-to-#2D2220 gradients), so cards in #261F1D sit slightly lighter than the page.
     hero-ring.ts paints the same colour while the ring plays.
   - Accents in brand yellow (#FFF089) instead of blue. Solid brand-blue controls that mean "Syllotips
     at work" (the Syllotips box, the selected "With Syllotips" tab, an opened step, the pause button)
     stay blue; hairlines and connectors are warm white.

   The blocks reuse the site's colour tokens, so most of the work is giving those tokens dark values.
   Overrides are wrapped in :where() so they keep the original rule's weight: states such as
   .is-tracing or [aria-pressed=true] still win as they do on the light site. */

.theme-dark [data-dark]:not(.trust-strip){
  --ink:#F9F6F3;
  --paper:#2C2220;
  --ice:#332826;
  --sky:#3E322B;
  --beige:#3A2F2C;
  --deep:#FFF089;
  --blue:rgba(255,240,137,.6);
  --line:rgba(249,246,243,.12);
  --muted:rgba(249,246,243,.72);
  --edge:rgba(249,246,243,.16);
  color:var(--ink);
}

/* Backgrounds. Low weight on purpose: the light site's "transparent while the hero ring plays" rules
   (.is-scroll+.trust-strip, .hero-field-through) must still win. */
:where(.theme-dark) [data-dark]{background:var(--dark-bg,#1D1817)}
.theme-dark .hero-v4[data-hero-ring]:not(.is-scroll){background:var(--dark-bg,#1D1817)}

/* Accents that sit on brand blue or brand yellow keep the light site's colours inside them. */
.theme-dark [data-dark] :is(
  [data-mode=after] .change-tabs>button[aria-selected=true],
  .change-play[aria-pressed=true],
  [data-mode=after] .change-node:nth-child(5),
  .issue-group>div,
  .reusable-rule,
  .flow-filter-box,
  .mechanics-play[aria-pressed=true],
  .mechanics-node[aria-expanded=true]
){--deep:#295BCC;--paper:#F9F6F3;--ink:#2C2220;--ice:#DDEBFC;--sky:#C3DDFA;--muted:rgba(249,246,243,.82);color:#F9F6F3}
.theme-dark [data-dark] :is(
  .expert-moment,
  .change-bottleneck>svg,
  [data-mode=before] .change-node:nth-child(4).is-tracing,
  [data-mode=before] .change-node:nth-child(5).is-tracing
){--ink:#2C2220;--paper:#F9F6F3;--deep:#295BCC;--line:rgba(44,34,32,.16);--muted:#6D6460;color:#2C2220}

/* Headings: warm white like the hero, with large accents in yellow. */
:where(.theme-dark [data-dark]) h2,
:where(.theme-dark [data-dark]).light h2{color:#F9F6F3}
:where(.theme-dark [data-dark]) :is(.fix-target h3 span,.reuse-heading h3>span,.outcomes-band strong){color:var(--deep)}
:where(.theme-dark [data-dark]) .section-head>p,
:where(.theme-dark [data-dark]) .benefits-heading>p{color:var(--muted)}

/* Secondary text that the light site sets in a fixed grey-brown. */
:where(.theme-dark [data-dark]) :is(
  .value-card p,.change-panel-head>span,.change-node p,.change-panel-foot p,.change-bottom>span,
  .fix-target p:last-child,.future-answers>li>span,.flow-scale,.outcomes-band small
){color:var(--muted)}

/* Hairlines: brown and pale-blue lines become faint warm-white lines. */
:where(.theme-dark [data-dark]) :is(.change-node,[data-mode=after] .change-node){border-color:var(--line)}
:where(.theme-dark [data-dark]) :is(
  .change-story,.change-play,.flow-chat,.flow-issue,.flow-expert,.flow-approval-box,.flow-memory-box,.flow-example,.reuse-moment,
  .repeat-questions>li,.future-answers>li,.reuse-takeaway,.mechanics-node
){border-color:var(--edge)}
:where(.theme-dark [data-dark]) :is(.fix-target,.flow-scale,.change-technical,.change-example,.starting-failure){border-color:var(--line)}
/* The before/after comparison card on the shared card colour #261F1D (owner's request, October 2026): the frame,
   both panels and the sale-returns example, which keeps its fine edge. */
.theme-dark [data-dark] :is(.change-story,.change-panel,.change-example){background:#261F1D}
/* The "With Syllotips" panel sets its fill with !important on the light site, so it needs the same here. */
.theme-dark [data-dark] .reuse-panel{background:#261F1D!important}

/* Diagram connectors and the many conversation tiles stay quiet; yellow marks the step being traced. */
:where(.theme-dark [data-dark]) .change-paths{color:rgba(249,246,243,.42)}
:where(.theme-dark [data-dark]) .expert-flow-wires g>path{stroke:rgba(249,246,243,.5)}
:where(.theme-dark [data-dark]) .expert-flow-wires g>path.is-current{stroke:var(--deep)}
:where(.theme-dark [data-dark]) .flow-chat{color:rgba(249,246,243,.7)}

/* Focus rings stay visible on dark. */
:where(.theme-dark [data-dark]) :focus-visible{outline-color:var(--yellow)}
:where(.theme-dark [data-dark]) .mechanics :focus-visible{outline-color:var(--yellow)}

/* Avenna touch: the problem, benefits and time-to-fix descriptions light up word by word with the scroll (dark.js). */
/* Lit, they read in warm white; the second time-to-fix paragraph keeps its quieter tone. */
.theme-dark :is(.section-head>p,.benefits-heading>p,.connected-intro>p,.cta-inner p).lit-words{color:#F9F6F3}
.lit-words .lit-word{transition:opacity .25s linear}

/* Every card on the home page shares one fill, #261F1D, a touch lighter than the #1D1817 page (owner's request, October 2026;
   the earlier #1C1715 read as holes in the page). Benefits, example, explorer, starting points, customer story, controls. */
.theme-dark [data-dark] .value-grid{background:#261F1D}

/* The explorer's own cards: fine lines and a quieter fill. */
:where(.theme-dark [data-dark]) .mechanics{border-color:rgba(249,246,243,.16);background:#261F1D}
:where(.theme-dark [data-dark]) .mechanics-node{background:#2C2220}

/* "How Syllotips works": the explorer copies the live syllotips.com component (owner's request, October 2026),
   blue accents included. It is the one dark block whose accents stay brand blue rather than yellow:
   a blue Low/Pro code choice in capitals, blue-tinted step cards with blue numbers, white icon tiles,
   a blue return loop, outlined "Play the loop", and quiet beige secondary text. See DESIGN-DECISIONS.md. */
.theme-dark #how-it-works[data-dark] .mechanics{--deep:#468BEA;--blue:#468BEA;--line:rgba(249,246,243,.1);
  background:#261F1D;border-color:var(--line)}
@media(min-width:621px){.theme-dark #how-it-works[data-dark] .mechanics{border-radius:24px}}
.theme-dark #how-it-works[data-dark] .agent-type{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(249,246,243,.16)}
.theme-dark #how-it-works[data-dark] .agent-type>button{color:#F9F6F3;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.theme-dark #how-it-works[data-dark] .agent-type>button[aria-pressed=true]{background:#468BEA;color:#F9F6F3}
.theme-dark #how-it-works[data-dark] .mechanics-hint{color:#8E7964;opacity:1}
.theme-dark #how-it-works[data-dark] .mechanics-play{background:transparent;border-color:rgba(249,246,243,.18);color:#F9F6F3}
.theme-dark #how-it-works[data-dark] .mechanics-play:hover{background:rgba(255,255,255,.05)}
.theme-dark #how-it-works[data-dark] .mechanics-play[aria-pressed=true]{background:#468BEA;border-color:#468BEA;color:#fff}

/* The four steps: blue-tinted cards, blue numbers, white icon tiles, quieter third lines. */
.theme-dark #how-it-works[data-dark] .mechanics-node{background:rgba(70,139,234,.08);border-color:rgba(70,139,234,.25);border-radius:16px;color:#F9F6F3}
.theme-dark #how-it-works[data-dark] .mechanics-node:hover,
.theme-dark #how-it-works[data-dark] .mechanics-node.is-past{border-color:#468BEA}
.theme-dark #how-it-works[data-dark] .mechanics-number{font:600 .78rem/1 SF,sans-serif;letter-spacing:.01em;color:#468BEA}
.theme-dark #how-it-works[data-dark] .mechanics-orb{background:rgba(255,255,255,.9);color:#468BEA;border-radius:12px}
.theme-dark #how-it-works[data-dark] .mechanics-orb:before{display:none}
@media(min-width:621px){
  .theme-dark #how-it-works[data-dark] .mechanics-orb{width:40px;height:40px}
  .theme-dark #how-it-works[data-dark] .mechanics-orb svg{width:20px;height:20px}
}
.theme-dark #how-it-works[data-dark] .mechanics-node>small{opacity:1;color:rgba(249,246,243,.65)}
.theme-dark #how-it-works[data-dark] .mechanics-open{color:#468BEA}
/* An opened step fills with brand blue, as on the light site. */
.theme-dark #how-it-works[data-dark] .mechanics-node[aria-expanded=true]{background:#468BEA;border-color:#468BEA;color:#fff}
.theme-dark #how-it-works[data-dark] .mechanics-node[aria-expanded=true] .mechanics-number{color:rgba(255,255,255,.85)}
.theme-dark #how-it-works[data-dark] .mechanics-node[aria-expanded=true] .mechanics-orb{background:rgba(255,255,255,.9);color:#468BEA}
.theme-dark #how-it-works[data-dark] .mechanics-node[aria-expanded=true]>small{color:rgba(255,255,255,.75)}
.theme-dark #how-it-works[data-dark] .mechanics-node[aria-expanded=true] .mechanics-open{color:#fff}

/* The return loop in blue, its label a brown pill with a fine light edge. */
.theme-dark #how-it-works[data-dark] :is(.return-track,.return-arrow){stroke:#468BEA}
.theme-dark #how-it-works[data-dark] .return-signal{stroke:#C3DDFA}
.theme-dark #how-it-works[data-dark] .runtime-return>button{background:#2C2220;border-color:rgba(249,246,243,.3);color:#F9F6F3;font-weight:500}
.theme-dark #how-it-works[data-dark] .runtime-return>button:hover{background:#3A2E2A}
.theme-dark #how-it-works[data-dark] .runtime-return>button[aria-expanded=true]{background:#468BEA;border-color:#468BEA;color:#fff}

/* The opened step's explanation and the caption bar. */
.theme-dark #how-it-works[data-dark] .mechanics-detail{background:transparent}
.theme-dark #how-it-works[data-dark] .mechanics-detail p{color:rgba(249,246,243,.85)}
.theme-dark #how-it-works[data-dark] .mechanics-detail-note{color:#8E7964}
.theme-dark #how-it-works[data-dark] :is(.mechanics-caption>span,.mechanics-caption>span svg,.mechanics-caption>button){color:#B3A591}
.theme-dark #how-it-works[data-dark] .mechanics-caption>button:hover{color:#F9F6F3}

/* "Now, try an improvement." (owner's request, October 2026; colours from the live syllotips.com component).
   Inside the example, brand blue marks Syllotips at work
   (its box, the chosen tab, the main button, completed run steps); yellow marks the failure, the finding's
   title and the current step. */
.theme-dark [data-dark] .improvement-lab{
  --paper:#261F1D;--ice:#302724;--beige:#3A2E2A;--deep:#468BEA;--blue:#468BEA;--line:rgba(249,246,243,.14);
  background:#261F1D;border-color:var(--line);box-shadow:none}
.theme-dark [data-dark] .improvement-lab :is(.lab-tabs,.lab-bottom){background:#261F1D}
.theme-dark [data-dark] .improvement-lab :is(
  .lab-disclaimer,.lab-play,.lab-tabs small,.scene-icon,.run-badge,.run-area-label,.run-steps>li,.trace-details,
  .lab-reset,.expert-person small,.retained-card small,.approval-note,.run-hint
){color:var(--muted)}
.theme-dark [data-dark] .improvement-lab :is(.lab-tabs>button[aria-selected=true] .tab-icon,.syllo-icon,.lab-action,.run-done>.run-node){color:#fff}
.theme-dark [data-dark] .improvement-lab .lab-reset:hover{color:#F9F6F3}

/* The conversation: browner bubbles, the failure flag in yellow. */
.theme-dark [data-dark] .improvement-lab .question-bubble{background:#55443E}
.theme-dark [data-dark] .improvement-lab .answer-bubble{background:#3D2F2C}
.theme-dark [data-dark] .improvement-lab .answer-flag{color:#FFDF45}
.theme-dark [data-dark] .improvement-lab .answer-flag>i{background:#FFDF45}
.theme-dark [data-dark] .improvement-lab .answer-bubble.is-correct{background:#24304A;border-color:rgba(70,139,234,.45)}
.theme-dark [data-dark] .improvement-lab .answer-bubble.is-correct .answer-flag{color:#C3DDFA}
.theme-dark [data-dark] .improvement-lab .answer-bubble.is-correct .answer-flag>i{background:#C3DDFA}

/* The run's steps: quiet tiles, the failing step outlined in yellow. */
.theme-dark [data-dark] .improvement-lab .run-steps>li:not(:last-child):after{border-color:var(--line)}
.theme-dark [data-dark] .improvement-lab .run-node{background:#3A2E2A;border-color:var(--line);color:var(--muted)}
.theme-dark [data-dark] .improvement-lab .run-fail{color:#FFF089!important}
.theme-dark [data-dark] .improvement-lab .run-fail>.run-node{background:rgba(255,240,137,.1);border-color:#FFDF45;color:#FFF089}
.theme-dark [data-dark] .improvement-lab .run-done>.run-node{background:var(--deep);border-color:var(--deep)}
.theme-dark [data-dark] .improvement-lab .run-active .run-node{background:rgba(70,139,234,.18);border-color:var(--blue)}
.theme-dark [data-dark] .improvement-lab .trace-details pre{background:#211A19;color:var(--muted)}

/* Syllotips' side: a slightly lighter fill, sky labels, the finding's title in yellow. */
.theme-dark [data-dark] .improvement-lab .review-scene{background:#302724;border-color:rgba(70,139,234,.25)}
.theme-dark [data-dark] .improvement-lab :is(.review-stage,.review-kicker,.evidence-card>span,.retained-card>span,.lab-back,.lab-result-link,.approval-note svg){color:#C3DDFA}
.theme-dark [data-dark] .improvement-lab .review-kicker .issue-dot{background:#C3DDFA}
.theme-dark [data-dark] .improvement-lab .review-content h3{color:#FFF089}
.theme-dark [data-dark] .improvement-lab .review-description{color:rgba(249,246,243,.86)}
.theme-dark [data-dark] .improvement-lab .evidence-card{background:rgba(255,255,255,.05)}
.theme-dark [data-dark] .improvement-lab .expert-note{background:rgba(255,255,255,.05);border-color:rgba(70,139,234,.3)}
.theme-dark [data-dark] .improvement-lab :is(.expert-avatar,.lab-noscript){color:#2C2220}
.theme-dark [data-dark] .improvement-lab .retained-card{background:rgba(255,255,255,.05);border-color:rgba(70,139,234,.45);box-shadow:4px 4px 0 #243049,5px 5px 0 rgba(70,139,234,.35)}
.theme-dark [data-dark] .improvement-lab .lab-back{border-bottom-color:rgba(195,221,250,.4)}
.theme-dark [data-dark] .improvement-lab .comparison-controls{background:transparent;border-color:rgba(70,139,234,.4)}
.theme-dark [data-dark] .improvement-lab .comparison-controls>button{color:#C3DDFA}
.theme-dark [data-dark] .improvement-lab .comparison-controls>button[aria-pressed=true]{background:var(--deep);color:#fff}
.theme-dark [data-dark] .improvement-lab .lab-action:hover{background:#295BCC}
.theme-dark [data-dark] .improvement-lab .lab-action:disabled{background:rgba(70,139,234,.6)}

/* Progress along the bottom: the current and completed steps in yellow. */
.theme-dark [data-dark] .improvement-lab .lab-progress{color:rgba(249,246,243,.5)}
.theme-dark [data-dark] .improvement-lab .lab-progress i{border-color:rgba(249,246,243,.22)}
.theme-dark [data-dark] .improvement-lab .lab-progress>:is(span[aria-current=step],span.complete){color:#FFF089}
.theme-dark [data-dark] .improvement-lab .lab-progress>:is(span[aria-current=step],span.complete) i{background:#FFF089;border-color:#FFF089;color:#2C2220}

/* Room between the end of "How Syllotips works" and the "Your people know" card below it. */
.theme-dark #how-it-works[data-dark]+.chapter-section{padding-top:88px}
@media(max-width:620px){.theme-dark #how-it-works[data-dark]+.chapter-section{padding-top:56px}}

/* Same type sizes as the "Now, try an improvement." heading and description (owner's request): the
   problem, benefits and time-to-fix titles use the site's section h2 size and the descriptions the
   section-head paragraph size, with the same steps at 1000px and 620px. */
.theme-dark [data-dark] :is(.benefits-heading h2,.fix-target h3){font-family:Clash,SF,sans-serif;font-weight:500;font-size:clamp(2.6rem,4.5vw,4.45rem);line-height:1.08;letter-spacing:-.044em}
.theme-dark [data-dark] :is(.problem-section .section-head>p,.benefits-heading>p,.fix-target p){font-size:1.1rem;line-height:1.6}
.theme-dark [data-dark] :is(.problem-section .section-head>p,.benefits-heading>p){max-width:410px}
@media(max-width:1000px){.theme-dark [data-dark] :is(.benefits-heading h2,.fix-target h3){font-size:3rem}}
@media(max-width:620px){
  .theme-dark [data-dark] :is(.benefits-heading h2,.fix-target h3){font-size:2.65rem;letter-spacing:-.04em}
  .theme-dark [data-dark] :is(.problem-section .section-head>p,.benefits-heading>p,.fix-target p){font-size:1rem}
  .theme-dark [data-dark] :is(.problem-section .section-head>p,.benefits-heading>p){max-width:none}
}

/* "From weeks of handoffs / to a fix in hours." on two even lines (owner's request): on wide screens the
   title column fits its two lines and the paragraph takes the rest; up to 1000px the title sits above the
   paragraph; on phones, where a whole line cannot fit, the browser balances the lines. */
@media(min-width:1001px){
  .theme-dark [data-dark] .fix-target{grid-template-columns:max-content minmax(0,1fr)}
  .theme-dark [data-dark] .fix-target h3{white-space:nowrap}
}
@media(max-width:1000px){.theme-dark [data-dark] .fix-target{grid-template-columns:1fr;gap:22px}}
@media(max-width:620px){.theme-dark [data-dark] .fix-target h3{text-wrap:balance}}

/* "Faster value. / Less work to keep improving." likewise stays on two lines on wide screens (owner's
   request): its second line is slightly longer than the 780px cap, so it used to drop "improving." onto a
   third line. The paragraph beside it gives up the room. Narrower screens keep the normal wrapping. English
   only: the Italian line is much longer and would squeeze the paragraph, so it keeps wrapping. */
@media(min-width:1001px){html:not([lang=it]).theme-dark [data-dark] .benefits-heading h2{white-space:nowrap;max-width:none}}

/* A soft brand-yellow glow behind "A shorter time-to-fix" (owner's request, October 2026; reference: a dark
   page with a faint coloured light behind its key statement). Very faint (14% at its brightest), centred
   behind the title and fading out before the block's edges, so it never spills into the outcomes band.
   It sits behind the text and does not move. Second approved gradient after the hero ring. */
.theme-dark [data-dark] .fix-target{position:relative;isolation:isolate}
.theme-dark [data-dark] .fix-target:before{content:'';position:absolute;inset:-56px 0 -72px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 60% at 32% 54%,rgba(255,240,137,.05),rgba(255,240,137,.02) 40%,rgba(255,240,137,0) 68%)}
/* Wider than the block only where the page margins leave room for it. */
@media(min-width:1101px){.theme-dark [data-dark] .fix-target:before{inset-inline:-48px}}
@media(max-width:1000px){.theme-dark [data-dark] .fix-target:before{inset:-40px 0 -56px;background:radial-gradient(ellipse 70% 46% at 50% 38%,rgba(255,240,137,.045),rgba(255,240,137,.018) 42%,rgba(255,240,137,0) 70%)}}

/* Owner's review: larger outcome numbers and more room before "A shorter time-to-fix". */
.theme-dark .outcomes-band[data-dark] strong{font-size:clamp(3.4rem,5.4vw,4.6rem)}
.theme-dark [data-dark] .fix-target{margin-top:88px;padding-top:72px}
@media(max-width:620px){
  .theme-dark .outcomes-band[data-dark] strong{font-size:3rem}
  .theme-dark [data-dark] .fix-target{margin-top:56px;padding-top:44px}
}

/* Outcome numbers with their labels underneath (owner's request), so the larger numbers leave the labels
   room on one or two lines; the arrow sits beside the number. Phones keep their side-by-side rows. */
@media(min-width:621px){
  .theme-dark .outcomes-band[data-dark] a{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num arrow" "label label";align-items:center;gap:14px 20px}
  .theme-dark .outcomes-band[data-dark] strong{grid-area:num;margin:0}
  .theme-dark .outcomes-band[data-dark] a>span{grid-area:label}
  .theme-dark .outcomes-band[data-dark] a>svg{grid-area:arrow;margin-left:0}
}

/* Larger outcome labels (owner's request): the label at the section-description size, the source note
   at the site's caption size. */
.theme-dark .outcomes-band[data-dark] a>span{font-size:1.1rem;line-height:1.4}
.theme-dark .outcomes-band[data-dark] small{font-size:.875rem;line-height:1.45;margin-top:6px;max-width:none}
@media(max-width:1100px){.theme-dark .outcomes-band[data-dark] a>span{font-size:1rem}.theme-dark .outcomes-band[data-dark] small{font-size:.8rem}}
@media(max-width:620px){.theme-dark .outcomes-band[data-dark] a>span{font-size:.95rem}.theme-dark .outcomes-band[data-dark] small{font-size:.78rem}}

/* Counting outcome numbers (dark.js): the arrival enlargement grows from the number's left edge. */
.count-up{display:inline-block;transform-origin:left center}
/* On the Customer stories tiles the number is centred, so it grows from its centre. */
.case-art .count-up{transform-origin:center}

/* Navigation bar like trajectory.ai (owner's request): at the top of the page it spans the full width
   with no card around it; once the page scrolls (dark.js adds .is-scrolled) it shrinks into a
   slightly narrower floating bar, as wide as the page content, with a translucent brown fill and a blur
   so the content behind shows through. 68% fill keeps the white links readable (over 5:1) on light sections. */
.theme-dark .header-shell{top:0;padding:0;transition:top .35s var(--ease)}
.theme-dark .header{position:relative;width:100%;max-width:none;min-height:80px;padding:14px 40px;border-radius:0;
  border-color:transparent;background:rgba(44,34,32,0);
  transition:width .35s var(--ease),min-height .35s var(--ease),padding .35s var(--ease),border-radius .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),-webkit-backdrop-filter .35s var(--ease),backdrop-filter .35s var(--ease)}
.theme-dark .header-shell.is-scrolled{top:16px}
.theme-dark .header-shell.is-scrolled .header{width:min(1264px,calc(100% - 112px));min-height:66px;padding:10px 20px 10px 26px;border-radius:20px;
  border-color:rgba(249,246,243,.12);background:rgba(44,34,32,.68);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
/* The page-transition name sits on the bar itself, not its outer frame: on the frame it cut the blur off
   from the page behind, so only the colour showed. */
.theme-dark .header-shell{view-transition-name:none}
.theme-dark .header{view-transition-name:syllotips-navigation}
@media(max-width:1100px){.theme-dark .header{padding-inline:28px}.theme-dark .header-shell.is-scrolled .header{width:calc(100% - 72px)}}
@media(max-width:1000px){
  .theme-dark .header{min-height:68px;padding:10px 24px}
  .theme-dark .header-shell.is-scrolled{top:12px}
  .theme-dark .header-shell.is-scrolled .header{width:calc(100% - 32px);min-height:62px;padding:10px 14px 10px 20px}
  /* The mobile menu opens under the bar, whatever its width. */
  .theme-dark .nav{left:0;right:0;top:calc(100% + 10px)}
}
@media(max-width:620px){
  .theme-dark .header{padding:10px 18px}
  .theme-dark .header-shell.is-scrolled .header{width:calc(100% - 24px);border-radius:16px;padding:10px 13px 10px 18px}
}

/* Logo row in "Customer results" (owner's request, October 2026; first as two carousels under the hero, as
   on the live syllotips.com, then moved here and merged into one row so the hero's animation flows straight
   into the problem section). The customer logos and the investor/recognition logos scroll slowly to the left
   in one endless loop, the two groups split by a small dot, and fade out at the edges. dark.js repeats the
   logos to fill the loop; the copies are hidden from screen readers and the keyboard. The loop pauses only
   while the pointer is on a logo itself (not the gaps between them), or under keyboard focus. Without the script, or with reduced motion, the logos sit still, centred.
   Customer logos link to their sites and grow slightly on hover or focus, with no bounce; the other logos
   grow on hover too. */
.results-logos{margin:36px 0 92px}
.logo-marquee-label{margin:0 auto 22px;max-width:none;text-align:center;font-size:.95rem;line-height:1.4;letter-spacing:.02em;text-transform:uppercase;color:#8E7964}
.logo-marquee-viewport{overflow:hidden}
/* Six logos on show at a time on wide screens (container query units: each logo has a sixth of the row),
   four on tablets, three on phones. */
.logo-marquee.is-running .logo-marquee-viewport{container-type:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.logo-marquee-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:28px 88px;list-style:none;margin:0;padding:12px 24px}
.logo-marquee-track>li{flex-shrink:0;display:flex;align-items:center}
.logo-marquee-track img{height:calc(var(--logo-h,44px) * 1.15);width:auto;max-width:none;transition:transform .35s var(--ease)}
.logo-marquee-track a{display:block;border-radius:8px}
.logo-marquee-track a:is(:hover,:focus-visible) img{transform:scale(1.08)}
/* The investor and recognition logos have no links but grow the same way under the pointer (owner's request). */
.logo-marquee-track>li>img:hover{transform:scale(1.08)}
/* Running loop (set by dark.js): one line, moving by exactly one copy of the logos per cycle. */
.logo-marquee.is-running .logo-marquee-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding-inline:0;animation:logo-marquee var(--marquee-duration,40s) linear infinite}
.logo-marquee.is-running .logo-marquee-track>li{width:16.666cqw;justify-content:center}
@media(max-width:1000px){.logo-marquee.is-running .logo-marquee-track>li{width:25cqw}}
@media(max-width:620px){.logo-marquee.is-running .logo-marquee-track>li{width:33.333cqw}}
/* The dot between the two groups: halfway between the last logo of a group and the next logo. In the still
   row it has no group after the last logo, so it is left out there. */
.logo-marquee-track>li.logo-group-end{position:relative}
.logo-marquee-track>li.logo-group-end:after{content:'';position:absolute;top:50%;right:-47px;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#8E7964}
.logo-marquee.is-running .logo-marquee-track>li.logo-group-end:after{right:-2.5px}
.logo-marquee:not(.is-running) .logo-marquee-track>li.logo-group-end:last-child:after{display:none}
.logo-marquee.is-running .logo-marquee-track a{display:flex;justify-content:center;max-width:84%}
.logo-marquee.is-running .logo-marquee-track img{max-width:84%;object-fit:contain}
.logo-marquee.is-running .logo-marquee-track a img{max-width:100%}
.logo-marquee.is-running .logo-marquee-track{gap:0}
.logo-marquee.is-running:is(:has(img:hover),:focus-within) .logo-marquee-track{animation-play-state:paused}
@keyframes logo-marquee{to{transform:translateX(-50%)}}
@media(max-width:620px){
  .results-logos{margin:24px 0 64px}
  .logo-marquee-label{font-size:.85rem;margin-bottom:18px}
  .logo-label-dot{display:block;height:0;overflow:hidden}
  .logo-marquee-track img{height:calc(var(--logo-h,44px) * .92)}
}
@media(prefers-reduced-motion:reduce){
  .logo-marquee-track img{transition:none}
  .logo-marquee-track :is(a:hover img,a:focus-visible img,li>img:hover){transform:none}
}

/* The rest of the home page (owner's request, October 2026): from "Your people know" to "Before we talk."
   the sections sit on the same flat #1D1817, running on with no step into the closing call to action and the footer. */
/* Blocks that were already dark on the light page (the "Your people know" card) keep their dark look:
   the same dark #261F1D card as the benefits and the explorer, with a fine light edge. */
.theme-dark #how-it-works[data-dark]~[data-dark] .dark{--ink:#261F1D;--paper:#F9F6F3;--beige:#E6E2DB;
  background:#261F1D;color:#F9F6F3;box-shadow:inset 0 0 0 1px rgba(249,246,243,.1)}

/* "Where are you with AI?": the four starting points in warm white on dark, the chosen one on the
   card in yellow; the panel on #261F1D. The Syllotips bar under it stays solid brand blue, as a control
   that means "Syllotips at work". */
.theme-dark #your-setup[data-dark] .fit-tabs,
.theme-dark #your-setup[data-dark] .fit-tabs>button{border-color:var(--edge)}
.theme-dark #your-setup[data-dark] .fit-tabs>button{color:var(--muted)}
.theme-dark #your-setup[data-dark] .fit-tabs>button:hover{background:rgba(255,255,255,.04)}
.theme-dark #your-setup[data-dark] .fit-tabs>button[aria-selected=true]{background:#261F1D;color:var(--deep)}
.theme-dark #your-setup[data-dark] .fit-stage{background:#261F1D;border-color:var(--edge)}
.theme-dark #your-setup[data-dark] .fit-panel p{color:var(--muted)}
.theme-dark #your-setup[data-dark] .fit-environment>span{background:rgba(255,255,255,.05);border-color:var(--edge);color:var(--muted)}
.theme-dark #your-setup[data-dark] .fit-environment svg{color:var(--muted)}
.theme-dark #your-setup[data-dark] .fit-foundation{background:#295BCC;color:#F9F6F3}
.theme-dark #your-setup[data-dark] .fit-foundation .syllo-icon{background:#F9F6F3;color:#295BCC}
.theme-dark #your-setup[data-dark] .fit-foundation p{color:#DDEBFC}

/* "Real work.": the logo tile on the photo is the same dark glass as the result card below (owner's request,
   October 2026); the source note reads in the muted warm white. */
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-logo{background:rgba(29,24,23,.55);border:1px solid rgba(249,246,243,.18);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
/* The result card on the photo as dark glass (owner's request, October 2026, replacing the flat yellow card):
   translucent brown with the photo blurred behind it and a fine light edge, as the floating navigation bar.
   The figure stays brand yellow; the label reads in warm white. */
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-number{color:#F9F6F3;background:rgba(29,24,23,.55);
  border:1px solid rgba(249,246,243,.18);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-number strong{color:#FFF089}
/* The −40% in Clash at a moderate size (owner's request, October 2026). site-motion.ts splits the figure into two spans to
   count it up from zero; the label rule (.proof-number span) must not shrink them, so they inherit the figure's type. */
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-number strong{font:500 4.2rem/.95 Clash;letter-spacing:-.04em}
.proof-number>strong>span{display:inline;margin:0;font:inherit;letter-spacing:inherit}
/* The counting figure keeps its final width, so the yellow card does not change size. */
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-number strong>span[aria-hidden]{display:inline-block;min-width:2.6em;font-variant-numeric:tabular-nums}
@media(max-width:620px){.theme-dark #how-it-works[data-dark]~[data-dark] .proof-number strong{font-size:3.4rem}}
.theme-dark #how-it-works[data-dark]~[data-dark] .proof-card{background:#261F1D;border-color:var(--edge)}
.theme-dark #how-it-works[data-dark]~[data-dark] .customer-more>span{color:var(--muted)}
/* "Your agents. Your experts. Your controls.": the three cards on the same dark #261F1D. */
.theme-dark #how-it-works[data-dark]~[data-dark] .trust-card{background:#261F1D;border-color:var(--edge)}
/* Sections end on fractions of a pixel, so the page's cream background showed as a faint line between two
   dark sections. On the dark home page the page itself is dark brown too. */
.theme-dark body:has(#how-it-works[data-dark]~[data-dark]){background:#1D1817}
/* The closing call to action and the footer join the same #1D1817 on the home page (other pages keep #2C2220). */
.theme-dark body:has(#how-it-works[data-dark]~[data-dark]) :is(.cta-section,.site-footer){background:#1D1817}

/* "Your controls" cards (October 2026, after knotch.framer.ai, rebuilt in the brand): each card opens with a
   small product panel listing groups (title, one line, a row of round logos and pills) that drift slowly
   upward. Motion runs only while the cards are on screen (dark.js adds .is-playing), pauses on hover and
   stays still with reduced motion. No spinning borders; the only fades are the frame and the list edges. */
.trust-card.has-demo h3{margin-top:30px;font:500 1.75rem/1.15 Clash;letter-spacing:-.025em}
.trust-demo{position:relative;width:100%;height:330px;display:flex;flex-direction:column;padding:22px 24px 0;
  font-size:.82rem;line-height:1.35;color:var(--ink);overflow:hidden}
/* Same fill as the card, so it never reads as a card inside a card: only a hairline frame on the top and
   sides, fading out towards the bottom (as in the reference). The outer card drops its border. */
.trust-demo:before{content:'';position:absolute;inset:0;border:1px solid rgba(249,246,243,.28);border-bottom:0;border-radius:18px 18px 0 0;
  pointer-events:none;-webkit-mask-image:linear-gradient(#000 30%,transparent 92%);mask-image:linear-gradient(#000 30%,transparent 92%)}
.theme-dark #how-it-works[data-dark]~[data-dark] .trust-card.has-demo,
.theme-dark #how-it-works[data-dark]~[data-dark] .trust-card.has-demo:hover{border-color:transparent}
/* A faint, still warm-white light at the top centre of each card, behind the panel (owner's request,
   October 2026, after the same reference). Third approved gradient; see context/DESIGN-DECISIONS.md. */
.theme-dark #how-it-works[data-dark]~[data-dark] .trust-card.has-demo{
  background:radial-gradient(70% 42% at 50% 16%,rgba(249,246,243,.075),rgba(249,246,243,0) 72%),#261F1D}
.trust-demo-head{display:flex;flex-direction:column;gap:4px;padding-bottom:16px;border-bottom:2px solid rgba(249,246,243,.22)}
.trust-demo-head strong{font:500 1.15rem/1.2 Clash;letter-spacing:-.01em}
.trust-demo-head span{color:var(--muted);font-size:.8rem}
.trust-demo-view{flex:1;min-height:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 10%,#000 60%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 60%,transparent)}
.trust-ticker{list-style:none;margin:0;padding:0;animation:trust-ticker 26s linear infinite paused}
.trust-demo.is-playing .trust-ticker{animation-play-state:running}
.trust-card:hover .trust-ticker,.trust-card:focus-within .trust-ticker{animation-play-state:paused}
@keyframes trust-ticker{to{transform:translateY(-50%)}}
.trust-ticker li{display:flex;flex-direction:column;gap:3px;padding:16px 0;border-bottom:1px solid var(--line)}
.trust-ticker li>strong{font-weight:500;font-size:.98rem}
.trust-ticker li>span{color:var(--muted);font-size:.74rem}
.trust-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px}
/* Partner logos sit on a dark round tile, untouched (no recolouring); certification badges on warm white. */
.trust-logo{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:#1D1817;border:1px solid var(--edge)}
.trust-logo img{width:22px;height:22px;object-fit:contain}
.trust-logo.is-badge{background:#F9F6F3;border-color:transparent}
.trust-logo.is-badge img{width:30px;height:30px}
.trust-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--edge);border-radius:8px;
  font-size:.76rem;color:var(--ink);white-space:nowrap}
.trust-pill i{width:7px;height:7px;border-radius:50%;border:1.5px solid rgba(249,246,243,.5)}
.trust-pill i.is-on{background:#FFF089;border-color:#FFF089}
@media(prefers-reduced-motion:reduce){.trust-ticker{animation:none}}

/* "Your people know" (owner's request, October 2026, after avenna-template.framer.website): no card and no
   metal ring. The eyebrow, then two paragraphs of large text that light up word by word with the scroll
   (dark.js); "Your agents can learn." is brand yellow. The heading keeps its h2 role, set in the same type. */
.people-know{max-width:1180px}
.people-know .eyebrow{margin-bottom:34px}
.theme-dark #people-know[data-dark] .people-know-line{font:500 clamp(2rem,3.6vw,3.4rem)/1.18 SF,sans-serif;letter-spacing:-.025em;
  color:#F9F6F3;max-width:none;margin:0}
.theme-dark #people-know[data-dark] .people-know-line+.people-know-line{margin-top:.9em}
.theme-dark #people-know[data-dark] .lit-accent{color:#FFF089}
.theme-dark #how-it-works[data-dark]+#people-know{padding-bottom:120px}
@media(max-width:620px){.theme-dark #people-know[data-dark] .people-know-line{font-size:1.85rem;line-height:1.22}
  .theme-dark #how-it-works[data-dark]+#people-know{padding-bottom:70px}}

/* The same soft brand-yellow glow as behind "A shorter time-to-fix" (owner's request, October 2026), here
   centred low behind "Your agents can learn." Very faint (14% at its brightest), fading out before the
   block's edges (the box reaches into the section's bottom padding so the light is never cut), behind
   the text and still. Fifth approved gradient. */
.theme-dark #people-know[data-dark] .people-know{position:relative;isolation:isolate}
.theme-dark #people-know[data-dark] .people-know:before{content:'';position:absolute;inset:-56px 0 -110px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 42% 48% at 30% 64%,rgba(255,240,137,.05),rgba(255,240,137,.02) 40%,rgba(255,240,137,0) 68%)}
@media(min-width:1101px){.theme-dark #people-know[data-dark] .people-know:before{inset-inline:-48px}}
@media(max-width:1000px){.theme-dark #people-know[data-dark] .people-know:before{inset:-40px 0 -60px;background:radial-gradient(ellipse 70% 46% at 50% 64%,rgba(255,240,137,.045),rgba(255,240,137,.018) 42%,rgba(255,240,137,0) 70%)}}

/* Comparison tabs ("Before / With Syllotips") styled like the LOW CODE / PRO CODE switch (owner's request,
   October 2026). */
.theme-dark [data-dark] .concrete-story .change-tabs{background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(249,246,243,.16);padding:3px;gap:3px}
.theme-dark [data-dark] .concrete-story .change-tabs>button{min-height:38px;padding:8px 17px;color:#F9F6F3}
.theme-dark [data-dark] .concrete-story .change-tabs strong{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.01em}
.theme-dark [data-dark] .concrete-story .change-tabs>button[aria-selected=true]{background:#468BEA;color:#F9F6F3}
@media(max-width:650px){.theme-dark [data-dark] .concrete-story .change-tabs>button{padding:8px 10px}}
/* Home outcome cards: a calm hover, the column's fill warms slightly and its text brightens; no movement. */
@media(hover:hover){.theme-dark [data-dark] .value-card{transition:background-color .45s var(--ease)}.theme-dark [data-dark] .value-card p{transition:color .45s var(--ease)}.theme-dark [data-dark] .value-card:hover{background:#2A2321}.theme-dark [data-dark] .value-card:hover p{color:#F9F6F3}}
.theme-dark #how-it-works[data-dark]~[data-dark] .trust-card:not(.has-demo):hover{background:#2A2321}