/*
 * The System / Client Loop page (/system/ and the standalone /client-loop/), on top of home.css.
 * Only the pieces this page adds: the loop hero, the client quote, pains, now-and-with rows, outcomes,
 * fit columns, the do-it-yourself list, the case study and the slim landing-page header and footer.
 */

/* ---------- hero: the loop ---------- */
.sy-sub { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; color: var(--ink); max-width: 26ch; }
.sy-hero .hx-copy .small { margin-top: -8px; }

.sy-loop svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loop-ghost { fill: none; stroke: var(--sand-2); stroke-width: 18; stroke-linecap: round; }
.loop-line { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.loop-spark { fill: var(--orange); }
.loop-spark-glow { fill: var(--orange); opacity: 0.25; }
html.motion .sy-loop:not(.is-drawn) .loop-line { stroke-dashoffset: 1; }
html.motion .sy-loop.is-drawn .loop-line { transition: stroke-dashoffset calc(var(--slow) * 3) var(--ease); }

/* without JavaScript the stops are a numbered list under the drawing */
.loop-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; position: absolute; left: 0; right: 0; top: 100%; }
.loop-stop { display: flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-size: clamp(15px, 1.5vw, 19px); color: var(--ink); white-space: nowrap; }
.loop-stop i { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--sand); border: 1.5px solid var(--gold-dk); transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.loop-stop span { padding: 5px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.loop-stop.is-near i { transform: scale(1.5); background: var(--orange); border-color: var(--orange); }
.loop-stop.is-near span { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
/* once placed on the line: the dot sits on the line, the label above (top half) or below (bottom half) */
.is-placed .loop-stops { position: static; display: block; }
.is-placed .loop-stop { position: absolute; flex-direction: column; gap: 6px; transform: translate(-50%, -7px); }
.is-placed .loop-stop[data-side="top"] { flex-direction: column-reverse; transform: translate(-50%, calc(-100% + 7px)); }
@media (max-width: 600px) { .loop-stop span { padding: 3px 9px; } .is-placed .loop-stop { gap: 4px; } }
@media (max-width: 900px) { .sy-hero .hx-art { order: 0; max-width: 560px; margin-top: 40px; } }

/* ---------- the client quote under the hero ---------- */
.sy-quote { padding-block: clamp(40px, 6vw, 72px); border-block: 1px solid var(--line); background: var(--bg); }
.sy-quote figure { margin: 0 auto; max-width: 56rem; display: grid; gap: 16px; text-align: center; justify-items: center; }
.sy-quote blockquote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.sy-quote figcaption { display: grid; gap: 6px; font-size: var(--text-small); color: var(--brown-2-text); }
.sy-quote figcaption > span:first-child { font-weight: var(--weight-medium); color: var(--ink); }

/* ---------- the italic accent on this page: the brand's dark orange (the light one is too pale on sand) ---------- */
.sy h1 em, .sy main h2 em, .sy .sy-whole h3 em, .sy .sy-turn em, .sy .sy-conclusion em { color: var(--orange-dk); }
.sy .c-close h2 em, .sy .sy-diy h3 em { color: var(--orange); }

/* ---------- the problem ---------- */
/* the advice they get (owner, 2026-10-17): what "they" tell you, as a message bubble, and under it what actually
   happens. Three side by side; one column on phones. */
.sy-myths { margin: 0 auto clamp(56px, 8vw, 96px); display: grid; gap: 20px; }
.sy-chat-label { justify-self: center; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--brown-2-text); }
.sy-myth-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
.sy-myth-list li { display: grid; grid-row: span 2; grid-template-rows: subgrid; } /* the "what actually happens" lines start on one line across the three */
.sy-myth-list p { margin: 0; }
.sy-myth-list span { display: block; margin-bottom: 6px; font-family: var(--font-sans); font-style: normal; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--brown-2-text); }
.sy-told { padding: 18px 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 22px 22px 22px 6px; box-shadow: var(--shadow-float); font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.25; color: var(--ink); }
.sy-actually { padding: 0 6px; font-size: var(--text-body); line-height: 1.5; color: var(--ink); }
.sy-actually span { color: var(--orange-dk); }
@media (max-width: 860px) { .sy-myth-list { grid-template-columns: minmax(0, 1fr); } .sy-myth-list li + li { margin-top: 18px; } }
/* the turn, the cause, the conclusion */
.sy-why-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 88px); align-items: start; }
.sy-turn { font-family: var(--font-serif); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.sy-turn em { font-style: italic; }
.sy-turn-solo { max-width: 30ch; margin-inline: auto; text-align: center; text-wrap: balance; }
.sy-intro { font-size: var(--text-lead); color: var(--ink); }
.sy-conclusion { margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px); background: var(--ink); color: var(--bg); border-radius: var(--radius-card); font-family: var(--font-serif); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; text-wrap: balance; }
.sy .sy-conclusion em { color: var(--orange); font-style: italic; }
.sy-conclusion { display: grid; gap: 18px; justify-items: start; }
/* "keep going" links between sections (owner, 2026-10-17): a word and an arrow that bobs downward */
.sy-next { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-medium); color: var(--orange-dk); text-decoration: none; }
.sy-next:hover { text-decoration: underline; text-underline-offset: 4px; }
.sy-conclusion .sy-next { color: var(--orange); }
.sy-flow { margin-top: clamp(40px, 6vw, 64px); text-align: center; }
.sy-after-actions { justify-content: center; align-items: center; gap: 24px; }
/* two example Loops (owner, 2026-10-17): side by side, one light, one dark; numbered, they are a sequence */
.sy-examples { margin-top: clamp(56px, 8vw, 88px); display: grid; gap: 28px; }
.sy-examples-title { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); color: var(--ink); }
.sy-examples-title em { font-style: italic; color: var(--orange-dk); }
.sy-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.sy-example { display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sy-example h4 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.2; color: var(--ink); }
.sy-example ol { margin: 0; padding-left: 1.3em; list-style: decimal; display: grid; gap: 10px; }
.sy-example li { padding-left: 4px; line-height: 1.45; }
.sy-example li::marker { font-family: var(--font-serif); color: var(--gold-dk); }
.sy-example-dark { background: var(--ink); color: var(--on-dark-muted); border-color: transparent; }
.sy-example-dark h4 { color: var(--bg); }
.sy-example-dark li::marker { color: var(--gold); }
.sy-examples-note { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 1.8vw, 22px); color: var(--ink); max-width: 36rem; margin-inline: auto; }
@media (max-width: 760px) { .sy-example-grid { grid-template-columns: minmax(0, 1fr); } }
.sy-next svg { width: 18px; height: 18px; }
html.motion .sy-next svg { animation: sy-nudge calc(var(--slow) * 2) var(--ease) infinite; }
@keyframes sy-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (max-width: 800px) { .sy-why-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- imagine instead: four flip cards (owner, 2026-10-17) ----------
   The home's flip component (home.css, home.js §5) in a 2 × 2 grid. The colours go from light to dark,
   be seen to be remembered: cream, sand, sand, dark; each back in a contrasting one. */
.sy-flips { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sy-flip.fit.flip { min-height: clamp(23rem, 30vw, 27rem); }
.sy-flip .fit-q { font-size: clamp(26px, 2.5vw, 36px); }
.sy-stage { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--gold-dk); }
.sy-flip .flip-back { gap: 18px; }
.sy-flip .flip-back .fit-offer { font-size: clamp(32px, 3vw, 46px); }
.sy-flip .flip-back p.sy-value { padding-top: 16px; border-top: 1px solid var(--line-on-dark); font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.35; color: var(--gold); }
.sy-flips .flip:nth-child(3) .flip-front { background: var(--sand-3); color: var(--ink); }
.sy-flips .flip:nth-child(3) .flip-back { background: linear-gradient(135deg, var(--ink), var(--ink-2)); color: var(--on-dark-muted); }
.sy-flips .flip:nth-child(3) .flip-back .fit-offer { color: var(--bg); }
.sy-flips .flip:nth-child(4) .flip-front { background: var(--ink); color: var(--bg); border-color: transparent; }
.sy-flips .flip:nth-child(4) .sy-stage { color: var(--gold); }
.sy-flips .flip:nth-child(4) .flip-back { background: var(--sand-3); color: var(--brown); }
.sy-flips .flip:nth-child(4) .flip-back .fit-offer { color: var(--ink); }
.sy-flips .flip:nth-child(4) .flip-back p.sy-value { border-top-color: var(--line); color: var(--gold-dk); }
@media (max-width: 899px) { .sy-flips { grid-template-columns: minmax(0, 1fr); } .sy-flip.fit.flip { min-height: 27rem; } }
.sy-after { display: grid; justify-items: center; text-align: center; gap: 18px; margin-top: 48px; max-width: 40rem; margin-inline: auto; }
.sy-after > p:first-child { font-size: var(--text-lead); color: var(--ink); }

/* ---------- the free call: what you leave with ---------- */
.sy-outcomes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sy-outcomes li { display: grid; gap: 10px; align-content: start; padding: clamp(24px, 3vw, 36px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card); }
.sy-n { font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--gold); }
.sy-outcomes h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); line-height: 1.15; color: var(--ink); }
@media (max-width: 860px) { .sy-outcomes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- for you, not for you ---------- */
.sy-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sy-fit-col { display: grid; gap: 20px; align-content: start; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-card); }
.sy-fit-col .h3 { font-family: var(--font-serif); font-weight: 400; }
.sy-yes { background: var(--sand-3); }
.sy-yes .h3 { color: var(--ink); }
.sy-no { background: var(--ink); color: var(--on-dark-muted); }
.sy-no .h3 { color: var(--bg); }
.sy-no a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.sy-crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sy-crosses li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.sy-crosses li::before { content: "×"; color: var(--orange); font-size: 20px; line-height: 1.2; }
@media (max-width: 760px) { .sy-fit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- how it works ---------- */
.sy .stack-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); }
.sy-ends { font-family: var(--font-serif); font-style: italic; color: var(--gold-dk); margin-block: 4px 8px; }
.sy-ends span { font-family: var(--font-sans); font-style: normal; font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; font-weight: var(--weight-label); color: var(--brown-2-text); margin-right: 6px; }
.stack > li:last-child .sy-ends { color: var(--gold); }
.stack > li:last-child .sy-ends span { color: var(--on-dark-muted); }
/* scoped to the container so it outranks `.ph figure { margin: 0 }` in home.css */
.c-narrow .sy-dashboard { margin: clamp(40px, 6vw, 64px) auto 0; max-width: 30rem; display: grid; gap: 12px; }
.sy-dashboard img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-float); }
.sy-dashboard figcaption { font-size: var(--text-small); color: var(--brown-2-text); text-align: center; }
.sy-practice { margin-top: 48px; padding: clamp(24px, 3vw, 36px); border-left: 2px solid var(--gold); background: var(--bg); border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0; }

/* ---------- why a loop ---------- */
.sy-diy { margin-block: clamp(48px, 7vw, 88px); padding: clamp(28px, 5vw, 56px); background: var(--ink); color: var(--on-dark-muted); border-radius: var(--radius-band); display: grid; gap: 16px; }
.sy-diy h3 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: clamp(26px, 3vw, 38px); color: var(--bg); }
.sy-diy ul { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 0; }
.sy-diy li { padding-block: 14px; border-top: 1px solid var(--line-on-dark); font-family: var(--font-serif); font-size: 20px; color: var(--bg); }
.sy-diy li:last-child { border-bottom: 1px solid var(--line-on-dark); }
.sy-diy-more { display: grid; gap: 12px; margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line-on-dark); }
.sy-diy-punch { font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; color: var(--gold); }
.sy-whole { align-items: start; }
.sy-whole-text { font-family: var(--font-serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--ink); }
.sy-whole h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); color: var(--ink); }
.sy-whole h3 em { font-style: italic; color: var(--gold-dk); }

/* ---------- who is behind it: studio first ---------- */
.sy-team-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(32px, 6vw, 80px); align-items: center; }
.sy-team-photo { margin: 0; display: grid; gap: 10px; align-self: start; position: sticky; top: 120px; } /* stays in view beside the long story */
.sy-team-photo .placeholder { aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius-card); max-width: none; }
.sy-blend { display: grid; gap: 8px; padding: 20px 24px; border-left: 2px solid var(--orange); background: var(--bg); border-radius: 0 var(--radius-card-sm) var(--radius-card-sm) 0; }
.sy-blend h3 { font-family: var(--font-serif); font-weight: 400; font-size: var(--text-h3); color: var(--ink); }
.sy-blend h3 em { font-style: italic; color: var(--orange-dk); }
.sy-team-photo img { width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-float); }
.sy-team-photo figcaption { font-size: var(--text-small); color: var(--brown-2-text); }
.sy-promises { list-style: none; padding: 0; margin: clamp(48px, 7vw, 80px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sy-promises li { display: grid; gap: 8px; align-content: start; padding: 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-card-sm); }
.sy-promises h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.sy-promises li:first-child { background: var(--ink); border-color: transparent; color: var(--on-dark-muted); }
.sy-promises li:first-child h3 { color: var(--bg); }
@media (max-width: 960px) { .sy-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .sy-team-grid { grid-template-columns: minmax(0, 1fr); } .sy-team-photo { position: static; } }
@media (max-width: 520px) { .sy-promises { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the case ---------- */
.sy-case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sy-case-col { margin: 0; display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg); }
.sy-case-col h3 { font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: var(--weight-label); color: var(--brown-2-text); }
.sy-case-quote { background: var(--ink); color: var(--on-dark-muted); border-color: transparent; }
.sy-case-quote h3 { color: var(--gold); }
.sy-case-quote blockquote p { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.35; color: var(--bg); }
@media (max-width: 900px) { .sy-case { grid-template-columns: minmax(0, 1fr); } }

/* ---------- closing band ---------- */
.sy .c-close .eyebrow { justify-self: center; color: var(--gold); }

/* ---------- standalone landing page: slim header and footer ---------- */
.lp-header .header-row { grid-template-columns: auto auto; justify-content: space-between; }
.lp-footer .footer-bottom { border-top: 0; }
.lp-footer .cluster { gap: 8px 20px; }
.sy .stack { --stack-num: var(--orange); }

/* The five steps of How it works carry the Sansara icons in place of 01 to 05 (owner, 2026-10-19).
   Icons: pages/_partials/loop-icons.html, drawn like the home's value icons. */
.li { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; --li-accent: var(--orange); flex: none; }
.sy-step-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--peach); display: grid; place-items: center; flex: none; }
.sy-step-icon .li { width: 36px; height: 36px; }

/* The explainer film under the hero (owner, 22 Oct 2026) */
.sy-film-video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-card); box-shadow: var(--shadow-float); background: var(--sand); }
.sy-film-intro { font-size: 1.2em; font-weight: 600; }
.sy-film-note { margin-top: 14px; opacity: 0.75; }
.sy-film-after { margin: 28px auto 0; font-size: 1.15em; }
@media (min-width: 900px) { .sy-film-note { display: none; } }

/* Hero: what's inside the Loop, as a moving band under the buttons (owner, 22 Oct 2026). Reuses the home's .mq;
   fades at both ends; without motion (reduced motion, no JS) it wraps into a still list without the duplicate. */
.c .sy-hero-mq { background: none; border-block: 0; padding-block: 4px; margin-block: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); }
.sy-hero-mq span { gap: 18px; padding-right: 18px; font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 17px; color: var(--ink); }
.sy-hero-mq span::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-4.9' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.sy-hero-mq span::after { display: none; }
html.motion .sy-hero-mq .mq-track { animation-duration: calc(var(--slow) * 30 / var(--speed)); }
html:not(.motion) .sy-hero-mq { white-space: normal; -webkit-mask-image: none; mask-image: none; }
html:not(.motion) .sy-hero-mq .mq-track { flex-wrap: wrap; row-gap: 10px; }
html:not(.motion) .sy-hero-mq .mq-dup { display: none; }

/* Hero art: the four stages of the system map, clockwise round a flowing orange line (owner, 22 Oct 2026). */
.sy-stages { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.sy-stages-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sy-stages-ring rect { fill: none; stroke: var(--orange); stroke-width: 0.6; stroke-dasharray: 2 2.4; vector-effect: non-scaling-stroke; opacity: 0.75; }
.sy-stages-ring rect { stroke-width: 2.5px; stroke-dasharray: 8 10; }
html.motion .sy-stages-ring rect { animation: sy-flow calc(var(--slow) * 2 / var(--speed)) linear infinite; }
@keyframes sy-flow { to { stroke-dashoffset: -36; } }
.sy-stages-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2.4vw, 28px); }
.sy-stage:nth-child(3) { grid-area: 2 / 2; }
.sy-stage:nth-child(4) { grid-area: 2 / 1; }
.sy-stage { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 14px 12px 16px; border-radius: var(--radius-card); background: var(--bg); box-shadow: var(--shadow-float); }
.sy-stage img { width: 100%; max-width: 220px; height: auto; }
.sy-stage-n { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.sy-stage strong { font-family: var(--font-sans); font-weight: 800; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink); }
html.motion .sy-stage { animation: sy-stage-on calc(var(--slow) * 8 / var(--speed)) var(--ease) infinite; animation-delay: calc(var(--slow) * 2 * var(--i) / var(--speed) + var(--slow) * 2); }
@keyframes sy-stage-on { 0%, 22% { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--orange), var(--shadow-float); } 30%, 100% { transform: none; } }
@media (max-width: 900px) { .sy-stages { margin-top: 40px; } .sy-stage img { max-width: 150px; } }
.sy-hero-price { font-weight: 600; color: var(--ink); }

/* The client's words as a WhatsApp chat (owner, 22 Oct 2026: "make it look more like WhatsApp"): header with back arrow,
   default avatar, name, call icons; WhatsApp's wallpaper; a received bubble with its time; the input bar with the green
   mic. Phone system font inside the chat. WhatsApp's colours are tokens (--wa-*). */
.sy-quote .sy-wa { margin: 0; display: grid; gap: 0; text-align: left; justify-items: stretch; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; border-radius: var(--radius-card); box-shadow: var(--shadow-float); overflow: hidden; }
.sy-wa-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--wa-head); }
.sy-wa-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--wa-icon); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sy-wa-head .sy-wa-ico:first-child { width: 20px; }
.sy-wa-avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wa-avatar); overflow: hidden; }
.sy-wa-avatar svg { width: 30px; height: 30px; margin-top: 8px; fill: var(--bg); stroke: none; }
.sy-wa-avatar svg path { fill: var(--bg); }
.sy-wa-who { flex: 1; display: grid; line-height: 1.2; color: var(--wa-text); min-width: 0; }
.sy-wa-who strong { font-weight: 600; font-size: 16px; }
.sy-wa-who small { font-size: 13px; color: var(--wa-time); }
.sy-wa-chat { padding: 18px 14px 22px; background-color: var(--wa-chat); background-image: radial-gradient(var(--wa-doodle) 1.2px, transparent 1.3px), radial-gradient(var(--wa-doodle) 1.2px, transparent 1.3px); background-size: 22px 22px; background-position: 0 0, 11px 11px; }
.sy-wa-msg { position: relative; margin: 0 0 0 8px; max-width: 88%; padding: 7px 10px 8px; background: var(--bg); border-radius: 0 10px 10px 10px; box-shadow: 0 1px 0.5px var(--wa-doodle); }
.sy-wa-msg::before { content: ''; position: absolute; top: 0; left: -8px; width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 0; border-color: transparent var(--bg) transparent transparent; }
.sy-quote .sy-wa-msg p { margin: 0; font-family: inherit; font-style: normal; font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.4; color: var(--wa-text); text-wrap: pretty; }
.sy-wa-time { float: right; margin: 8px 0 -4px 12px; font-size: 11px; color: var(--wa-time); }
.sy-wa-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--wa-chat); }
.sy-wa-input { flex: 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--bg); font-size: 15px; color: var(--wa-time); }
.sy-wa-mic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--wa-green); }
.sy-wa-mic svg { width: 22px; height: 22px; fill: none; stroke: var(--bg); stroke-width: 1.8; stroke-linecap: round; }
.sy-wa figcaption { padding: 10px 14px 12px; background: var(--bg); font-family: var(--font-sans); font-size: var(--text-small); color: var(--brown-2-text); text-align: center; }
/* two client chats side by side, one under the other on phones */
.sy-wa-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; max-width: 64rem; }
@media (max-width: 860px) { .sy-wa-pair { grid-template-columns: minmax(0, 1fr); } }
/* the chats' title, with the site's own chat icon (no platform logos, Meta's rules) */
.sy-wa-title { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 28px; font-family: var(--font-serif); font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); }
.sy-wa-title .sy-step-icon { width: 52px; height: 52px; }
.sy-wa-title .li { width: 30px; height: 30px; }
/* "WhatsApp compatible" in the hero band, with the site's own chat icon instead of the check (no platform logos) */
.sy-hero-mq .sy-mq-wa::before { display: none; }
.sy-hero-mq .sy-mq-wa .li { width: 26px; height: 26px; margin-right: -8px; }
.sy-hero-mq .sy-mq-wa { color: var(--ink); }

/* ---------- The human look (owner, 2026-10-26: "less AI and more like them", after funnelarchitektinnen.de; lab:
   /lab/client-loop-human/). Heavy plain headings with the italic phrase underlined by the pen (sy-hand.js), labels
   written by hand, a real photo of Chris as the hero, the advice and the pains crossed out, the four stages numbered,
   the objections answered with a sticker, and Chris beside the call button. ---------- */
.hand { font-family: var(--font-hand); font-weight: 700; line-height: 1.1; color: var(--orange-dk); }

/* headings: heavy sans, the italic phrase stays serif */
.sy h1, .sy main h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.sy h1 em, .sy main h2 em { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.01em; }

/* the small labels over headings, written by hand instead of tracked capitals */
.sy main .eyebrow { font-family: var(--font-hand); font-size: 26px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--orange-dk); transform: rotate(-2deg); }
.sy main .eyebrow::before { display: none; }

/* hero: the photo is the background, light (owner's photo DSC00741, 2026-10-26) */
.sy-hero { position: relative; overflow: hidden; isolation: isolate; background: transparent; } /* the page's own colour, so the photo fades into it */
.sy-hero picture { display: block; }
.sy-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 40% 35%; -webkit-mask-image: linear-gradient(180deg, black 78%, transparent); mask-image: linear-gradient(180deg, black 78%, transparent); }
.sy-hero-copy { display: grid; gap: 18px; justify-items: start; padding-top: 8px; padding-bottom: 56px; }
.sy-hero-copy > * { margin: 0; }
.sy-for { font-size: var(--text-small); font-weight: 700; color: var(--brown-2-text); }
.sy-hello { font-size: 34px; color: var(--orange-dk); transform: rotate(-3deg); transform-origin: left; margin-bottom: -10px; }
.sy .sy-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 0.98; max-width: 14ch; color: var(--ink); }
.sy-hero .sy-sub { font-size: 19px; line-height: 1.5; max-width: 34ch; color: var(--brown); }
.sy-checks { list-style: none; padding: 0; display: grid; gap: 10px; }
.sy-checks li { position: relative; padding-left: 34px; font-weight: 600; font-size: 17px; color: var(--ink); }
.sy-checks li::before, .sy-tiles li::before, .sy .ticks li::before {
  content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border: 0; transform: none; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c2.5 1.6 4.4 3.6 6 6.5C12 12 16 6.5 21.5 3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c2.5 1.6 4.4 3.6 6 6.5C12 12 16 6.5 21.5 3' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sy-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.sy-not-sales-note { display: flex; align-items: flex-end; gap: 6px; margin: 0; font-size: 26px; color: var(--orange-dk); transform: rotate(-4deg); }
.sy-not-sales-note svg { width: 44px; flex: none; }
.sy-hero .small { max-width: 46ch; color: var(--brown-2-text); }
.sy-hero-note { display: none; }
@media (min-width: 900px) {
  .sy-hero { display: flex; align-items: center; min-height: min(92vh, 860px); }
  .sy-hero picture { position: absolute; inset: 0; z-index: -2; }
  .sy-hero-img { height: 100%; aspect-ratio: auto; object-position: 30% 45%; -webkit-mask-image: linear-gradient(180deg, black 82%, transparent); mask-image: linear-gradient(180deg, black 82%, transparent); }
  /* a soft wash of cream over the wall behind the words, nothing over her */
  .sy-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 0%, transparent 44%, color-mix(in srgb, var(--sand) 70%, transparent) 58%, color-mix(in srgb, var(--sand) 88%, transparent) 100%); }
  .sy-hero > .container { width: 100%; }
  .sy-hero-copy { width: min(600px, 48%); margin-left: auto; padding-block: 88px; }
  .sy-hero-note { display: block; position: absolute; left: 5%; top: 12%; width: 220px; margin: 0; font-size: 26px; color: var(--orange-dk); transform: rotate(-6deg); z-index: 1; }
  .sy-hero-note svg { display: block; width: 100px; margin: 6px 0 0 110px; }
}

/* the moving band under the hero: no rules above or below, its ends fade into the page */
.sy-band { padding-block: 6px 28px; background: linear-gradient(180deg, transparent 30%, var(--bg)); } /* fades from the page into the lighter quotes below, no line between */
.sy .sy-band + .sy-quote { border-top: 0; }
.c .sy-band .sy-hero-mq { margin: 0; padding-block: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }

/* the quotes, taped on and a little crooked */
.sy-quote .sy-wa { position: relative; overflow: visible; }
.sy-quote .sy-wa > :first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.sy-quote .sy-wa::before { content: ''; position: absolute; z-index: 2; top: -14px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: color-mix(in srgb, var(--peach) 85%, transparent); transform: rotate(-4deg); }
.sy-quote .sy-wa:nth-child(1) { transform: rotate(-1.2deg); }
.sy-quote .sy-wa:nth-child(2) { transform: rotate(1deg); }

/* the advice they get, crossed out */
.sy-told { background: none; border: 0; box-shadow: none; padding: 0 6px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(20px, 2vw, 23px); }
.sy-myth-list span.hand, .sy-actually span.hand { font-family: var(--font-hand); font-size: 24px; font-weight: 700; color: var(--brown-2-text); }
.sy-actually span.hand { color: var(--orange-dk); }
.sy-myth-list .sy-told-text { display: inline; margin: 0; font: inherit; color: var(--ink); }

/* Imagine instead: the four stages */
.sy-four { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.sy-four-item { position: relative; display: grid; gap: 20px 48px; align-items: center; padding: clamp(24px, 4vw, 40px); background: var(--bg); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 8px 8px 0 var(--ink); }
.sy-four-img { width: 100%; max-width: 360px; height: auto; justify-self: center; }
.sy-four-text { display: grid; gap: 12px; }
.sy-four-text > * { margin: 0; }
.sy-four-stage { font-size: 30px; color: var(--orange-dk); }
.sy-four-now { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--brown); }
.sy-four-text h3 { font-family: var(--font-sans); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.sy-four-text .sy-value { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--gold-dk); padding-top: 12px; border-top: 1px dashed var(--line); }
@media (min-width: 860px) {
  .sy-four-item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .sy-four-item:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .sy-four-item:nth-child(even) .sy-four-img { order: 2; }
  .sy-four-item:nth-child(even) }

/* How it works: the 1 2 3 4 of working together, as a method chart (owner's reference, 2026-10-26) */
.sy-method { position: relative; padding: clamp(28px, 4vw, 48px); background: var(--ink); border-radius: var(--radius-card); margin-inline: max(-110px, calc(50% - 50vw + 16px)); } /* a little wider than the narrow column, so four boxes fit side by side */
.sy-method-badge { display: grid; place-items: center; width: 132px; height: 132px; margin: 0 0 28px; border: 2px dotted var(--peach); border-radius: 50%; font-family: var(--font-serif); font-weight: 600; font-size: 26px; line-height: 1.05; text-align: center; color: var(--bg); }
.sy-method-badge em { color: var(--orange); }
.sy-method-steps { position: relative; list-style: none; padding: 0 0 0 44px; margin: 0; display: grid; gap: 28px; }
.sy-method-steps::before { content: ''; position: absolute; left: 14px; top: 24px; bottom: 24px; border-left: 3px solid var(--bg); }
.sy-method-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 30px 20px 20px; background: var(--bg); border: 2px dotted var(--brown-2); }
.sy-method-step::after { content: ''; position: absolute; left: -32px; top: 50%; width: 30px; border-top: 3px solid var(--bg); }
.sy-method-n { position: absolute; top: -18px; left: -12px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); border: 3px solid var(--orange); font-family: var(--font-sans); font-weight: 900; font-size: 24px; color: var(--orange); }
.sy-method-step .li { width: 36px; height: 36px; }
.sy-method-step h3 { margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: 19px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.sy-method-step p { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.5; color: var(--brown); }
@media (min-width: 960px) {
  /* the zigzag: 2 and 4 on top, 1 and 3 below, all hung on one line between the rows; the badge sits top left */
  .sy-method-badge { position: absolute; top: clamp(28px, 4vw, 48px); left: clamp(28px, 4vw, 48px); margin: 0; }
  .sy-method-steps { padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 56px auto; gap: 0 18px; }
  .sy-method-steps::before { position: static; grid-row: 2; grid-column: 1 / -1; align-self: center; justify-self: center; width: 76%; border-left: 0; border-top: 3px solid var(--bg); }
  .sy-method-step:nth-child(1) { grid-area: 3 / 1; }
  .sy-method-step:nth-child(2) { grid-area: 1 / 2; }
  .sy-method-step:nth-child(3) { grid-area: 3 / 3; }
  .sy-method-step:nth-child(4) { grid-area: 1 / 4; }
  .sy-method-step:nth-child(even) { align-self: end; }
  .sy-method-step:nth-child(odd) { align-self: start; }
  .sy-method-step::after { left: 50%; width: 0; height: 28px; border-top: 0; border-left: 3px solid var(--bg); }
  .sy-method-step:nth-child(odd)::after { top: -30px; }
  .sy-method-step:nth-child(even)::after { top: auto; bottom: -30px; }
}

/* the price: Sansara Client Foundation. The head runs across (price and name, then the pitch and the button), what's
   included below as a grid of icon cards: three across on a wide screen, two on a tablet, one on a phone. */
.sy-price { display: grid; gap: 36px; padding: clamp(28px, 5vw, 56px); background: var(--white); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 10px 10px 0 var(--ink); }
.sy-price-head { display: grid; gap: 20px 56px; align-items: end; padding-bottom: 32px; border-bottom: 2px dashed var(--line); }
@media (min-width: 900px) { .sy-price-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sy-price-name, .sy-price-pitch { display: grid; gap: 16px; justify-items: start; }
.sy-price-head p, .sy-price-head h2 { margin: 0; }
.sy-price-tag { display: inline-block; padding: 8px 18px; border-radius: 6px; background: var(--orange); font-family: var(--font-sans); font-weight: 900; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); rotate: -3deg; }
.sy .sy-price-head h2 { font-size: clamp(36px, 4.6vw, 56px); color: var(--ink); }
.sy-price-lead { font-size: 18px; line-height: var(--leading-body); color: var(--brown); }
.sy-price-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.sy-price-note { font-size: 24px; rotate: -2deg; }
.sy-price-body h3 { margin: 0 0 20px; font-size: 32px; }
/* the flexible-payment banner across the top of the card, and the "much more" box under what's included (owner, 2026-10-26) */
.sy-price { position: relative; overflow: hidden; }
.sy-price-banner { margin: calc(-1 * clamp(28px, 5vw, 56px)) calc(-1 * clamp(28px, 5vw, 56px)) 0; padding: 12px 20px; background: var(--ink); color: var(--peach); font-weight: 700; font-size: 16px; text-align: center; letter-spacing: 0.01em; }
.sy-price-more { padding: 18px 22px; border: 2px dashed var(--orange); border-radius: 14px; background: var(--peach); }
.sy-price-more p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--brown); }
.sy-price-more .hand { font-size: 28px; color: var(--orange-dk); margin-bottom: 4px; }
.sy-price-more a { font-weight: 700; color: var(--ink); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sy-price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sy-price-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sy-price-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sy-price-list li { display: grid; gap: 8px; align-content: start; padding: 20px; border: 2px dotted var(--brown-2); border-radius: 14px; background: var(--bg); }
.sy-price-list .li { width: 40px; height: 40px; margin-bottom: 4px; }
.sy-price-list h4 { margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--ink); }
.sy-price-list p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--brown); }
@media (max-width: 639px) { /* on a phone: compact rows, the icon beside the words */
  .sy-price-list { gap: 10px; }
  .sy-price-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; }
  .sy-price-list .li { grid-row: span 2; width: 30px; height: 30px; margin: 2px 0 0; }
  .sy-price-list h4 { font-size: 16.5px; }
  .sy-price-list p { font-size: 15px; }
}

/* what we build: dotted tiles */
.sy-get { margin-top: clamp(56px, 8vw, 96px); }
.sy-get-title { font-family: var(--font-sans); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.03em; color: var(--ink); }
.sy-get-title em { font-family: var(--font-serif); font-weight: 500; color: var(--orange-dk); }
.sy-tiles { list-style: none; padding: 0; margin: 28px 0 16px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .sy-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sy-tiles li { position: relative; padding: 20px 20px 20px 54px; border: 2px dotted var(--brown-2); border-radius: 14px; background: var(--bg); font-weight: 700; font-size: 18px; color: var(--ink); }
.sy-tiles li::before { left: 20px; top: 21px; }
.sy-tiles li:last-child { background: var(--peach); border-style: solid; border-color: var(--orange); }
.sy-get-note { margin: 0; font-size: 30px; text-align: right; transform: rotate(-2deg); }

/* what people say to us, answered */
.sy-objections { display: grid; gap: 56px; max-width: 820px; margin: clamp(48px, 7vw, 88px) auto; }
.sy-objections:first-child { margin-top: 0; } /* the section opens on them since its intro went (2026-10-26) */
.sy-obj { position: relative; display: grid; gap: 14px; padding: clamp(26px, 4vw, 40px); background: var(--white); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 8px 8px 0 var(--ink); }
.sy-obj > * { margin: 0; }
.sy-obj h3 { padding-right: 120px; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; color: var(--ink); }
.sy-obj ul { padding-left: 20px; display: grid; gap: 6px; color: var(--brown); }
.sy-obj-close { font-weight: 700; color: var(--ink); }
.sy-sticker { position: absolute; top: -20px; right: 18px; padding: 10px 16px; border-radius: 4px; background: var(--orange); color: var(--ink); font-size: 24px; line-height: 1; transform: rotate(5deg); }

/* fit */
.sy-fit-note { margin: 0 0 24px; font-size: 30px; transform: rotate(-2deg); }
.sy .ticks li { position: relative; display: block; padding-left: 34px; }

/* the call: Chris as a polaroid on the left, the heading and the button on the right */
.sy-call-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 900px) { .sy-call-grid { grid-template-columns: 380px minmax(0, 1fr); gap: 72px; } }
.sy-polaroid { margin: 0 auto; max-width: 340px; padding: 14px 14px 0; background: var(--white); rotate: -2.5deg; box-shadow: var(--shadow-float); } /* rotate, not transform: the entrance animation owns transform */
.sy-polaroid img { display: block; width: 100%; height: auto; }
.sy-polaroid figcaption { padding: 14px 6px 18px; font-size: 26px; text-align: center; color: var(--ink); }
.sy-call-act { display: grid; gap: 20px; justify-items: start; }
.sy-call-act > * { margin: 0; }
.sy-call-act > p:not([class]) { font-size: 18px; line-height: var(--leading-body); color: var(--brown); }
.sy-call-list li { font-size: 17px; line-height: 1.5; color: var(--brown); }
.sy-call-list b { color: var(--ink); }
.sy-not-sales { padding: 18px 22px; border: 2px dashed var(--orange); border-radius: 14px; background: var(--peach); }
.sy-not-sales p { margin: 0; }
.sy-not-sales .hand { font-size: 30px; margin-bottom: 4px; }
/* the rising headline mask opens once the pen has drawn, or it clips the underline (as on the home, home.css) */
.sy h1.is-marked .mask, .sy main h2.is-marked .mask { overflow: visible; }