:root {
  --kf-paper: #e7dcc7;                     
  --kf-paper-deep: #ddd0b7;
  --kf-sky: #f6f0e3;                      
  --kf-panel: rgba(251, 246, 236, 0.9);
  --kf-panel-solid: #fbf6ec;
  --kf-line: rgba(60, 44, 24, 0.14);
  --kf-pencil: #6b5a45;
  --kf-ink: #1d1a16;
  --kf-muted: #5b5247;
  --kf-charcoal: #101820;
  --kf-sienna: #b8552e;                    
  --kf-sienna-text: #9a4424;               
  --kf-terracotta: #d27a4a;
  --kf-green: #2e5c47;                     
  --kf-sage: #9caf88;
  --kf-steel: #35607d;                     
  --kf-red: #a8321f;                       
  --kf-radius: 18px;
  --kf-shadow-card: 0 10px 28px rgba(80, 52, 24, 0.12), 0 0 0 1px rgba(80, 52, 24, 0.08);
  --kf-shadow-model: drop-shadow(0 14px 10px rgba(60, 40, 20, 0.18));
  --kf-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.30  0 0 0 0 0.17  0 0 0 0.075 0'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>");
  --kf-fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.05 0'/></filter><rect width='320' height='320' filter='url(%23m)'/></svg>");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
.kf-page, body.kf-page {
  margin: 0; color: var(--kf-ink); font-family: var(--kf-sans); font-size: var(--kf-fs-body); line-height: 1.55;
  background-color: var(--kf-paper);
  background-image:
    radial-gradient(1200px 700px at 12% 0%, rgba(255, 248, 232, 0.55), transparent 60%),
    radial-gradient(1000px 800px at 40% 110%, rgba(140, 100, 55, 0.10), transparent 60%),
    var(--kf-fibre),
    var(--kf-grain);
}
.kf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.kf-display { font: 500 var(--kf-fs-display)/1.04 var(--kf-serif); letter-spacing: -0.01em; margin: 0; }
.kf-h2 { font: 500 var(--kf-fs-h2)/1.1 var(--kf-serif); margin: 0 0 10px; }
.kf-h3 { font: 600 var(--kf-fs-title)/1.3 var(--kf-sans); margin: 0 0 6px; }
.kf-eyebrow { line-height: 1.2; color: var(--kf-sienna-text); margin: 0 0 12px; }
.kf-lede { font-size: var(--kf-fs-title); line-height: 1.45; color: var(--kf-muted); max-width: 720px; margin: 0; }
.kf-accent { color: var(--kf-sienna); }
.kf-num { font: 600 1em var(--kf-sans); font-variant-numeric: tabular-nums; }
.kf-brand { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--kf-fs-title) var(--kf-sans); color: var(--kf-ink); text-decoration: none; }
.kf-brand svg { width: 34px; height: 34px; flex: none; }
.kf-panel { background: var(--kf-panel); border: 1px solid var(--kf-line); border-radius: var(--kf-radius); }
.kf-card { background: var(--kf-panel-solid); border-radius: 20px; padding: 16px 22px; box-shadow: var(--kf-shadow-card); }
.kf-chip { display: inline-block; background: var(--kf-panel-solid); border-radius: 999px; padding: 8px 16px; font: 600 var(--kf-fs-small)/1.2 var(--kf-sans); white-space: nowrap; box-shadow: 0 10px 26px rgba(60, 40, 20, 0.16); }
.kf-chip small { font-weight: 400; color: var(--kf-muted); }
.kf-chip.is-committed { outline: 3px solid var(--kf-green); }
.kf-chip.is-intent { outline: 3px dashed var(--kf-sienna); }
.kf-vision { font: 600 var(--kf-fs-label) var(--kf-sans); color: #5b5247; background: rgba(241, 232, 214, 0.9); padding: 5px 10px; border-radius: 6px; }
.kf-button { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--kf-fs-small) var(--kf-sans); padding: 12px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; background: var(--kf-charcoal); color: #f6f1e6; }
.kf-button.is-quiet { background: transparent; color: var(--kf-ink); box-shadow: inset 0 0 0 1.5px var(--kf-line); }
.kf-button:focus-visible, .kf-link:focus-visible { outline: 2px solid var(--kf-sienna); outline-offset: 3px; }
.kf-link { color: var(--kf-sienna-text); font-weight: 600; text-decoration: none; }
.kf-link:hover { text-decoration: underline; }
.clay-stage-wrap { position: relative; width: 100%; overflow: hidden; border-radius: var(--kf-radius); border: 1px solid var(--kf-line);
  background-color: var(--kf-sky);
  background-image: radial-gradient(140% 120% at 30% 0%, #fbf6ea 0%, #f1e7d4 55%, #e6d8bf 100%);
  box-shadow: inset 0 -24px 48px rgba(120, 84, 44, 0.10), 0 1px 0 rgba(255, 255, 255, 0.6); }
.clay-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; color: #1d1a16; }
.clay-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.clay-path { fill: none; stroke: var(--kf-pencil); stroke-width: 3; opacity: 0.5; stroke-linecap: round; }
.clay-path.solid { opacity: 0.8; stroke: var(--kf-sienna); }
.clay-actor { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.clay-shadow { filter: var(--kf-shadow-model); }
.clay-halo { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--halo, rgba(150, 196, 232, 0.85)), transparent); filter: blur(3px); will-change: transform, opacity; }
.clay-glint { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 246, 225, 0.95), rgba(255, 230, 190, 0.35) 55%, transparent); mix-blend-mode: screen; will-change: transform, opacity; }
.clay-chip { background: rgba(255, 251, 242, 0.95); border-radius: 999px; padding: 10px 20px; font: 600 24px/1.2 var(--kf-sans); white-space: nowrap; box-shadow: 0 10px 26px rgba(60, 40, 20, 0.16); color: #1d1a16; }
.clay-chip small { font-weight: 400; color: #5b5247; font-size: 20px; }
.clay-card { background: rgba(255, 251, 242, 0.95); border-radius: 20px; padding: 16px 22px; font: 400 22px/1.4 var(--kf-sans); box-shadow: var(--kf-shadow-card); color: #1d1a16; }
.clay-stage .scn-head { font: 500 54px/1 var(--kf-serif); }
.clay-stage .scn-head small { display: block; font: 500 22px/1.3 var(--kf-sans); color: #5b5247; font-style: normal; margin-top: 8px; }
.clay-stage .scn-head.is-demand { color: var(--kf-sienna-text); }
.clay-stage .scn-head.is-supply { color: var(--kf-steel); }
.clay-stage .scn-head.is-promise { color: var(--kf-green); }
.clay-stage .scn-product { display: flex; gap: 14px; align-items: center; }
.clay-stage .scn-product img { width: 84px; }
.clay-stage .scn-muted { color: #5b5247; font-size: 19px; }
.clay-stage .scn-line { font: 600 30px/1.3 var(--kf-sans); }
.clay-stage .scn-line small { display: block; font: 400 20px var(--kf-sans); color: #5b5247; }
.clay-stage .scn-step { min-height: 112px; font: 600 18px/1 var(--kf-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--kf-sienna-text); }
.clay-stage .scn-step b { display: block; font: 500 34px/1.1 var(--kf-serif); letter-spacing: 0; text-transform: none; color: #1d1a16; margin-top: 8px; }
.clay-stage .scn-money { font: 600 34px var(--kf-sans); font-variant-numeric: tabular-nums; }
.clay-caption { min-height: 3.2em; margin: 14px 0 0; font-size: var(--kf-fs-body); line-height: 1.55; border-left: 3px solid var(--kf-sienna); padding-left: 12px; }
@media (prefers-reduced-motion: reduce) {
  .kf-page *, .kf-page *::before, .kf-page *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}