/* How cheese is made: scroll story with animated illustrations. Shared tokens,
   buttons and motion live in site.css. */

/* Hero and step wheel */
.mk-hero{padding:clamp(48px,7vw,96px) 0 clamp(80px,9vw,128px)}
.mk-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.mk-hero-copy{display:flex;flex-direction:column;gap:30px}
.mk-kicker{display:flex;align-items:center;gap:14px;font-family:var(--cp-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-text-soft)}
.mk-kicker span{display:block;width:32px;height:1px;background:var(--cp-accent)}
.mk-h1{font-family:var(--cp-serif);font-size:clamp(56px,7vw,108px);line-height:.94;letter-spacing:-.025em;animation-delay:.08s}
.mk-h1 em{color:var(--cp-text-soft)}
.mk-lead{max-width:540px;font-size:18px;line-height:1.65;color:var(--cp-text-soft);animation-delay:.16s}
.mk-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;animation-delay:.24s}
.mk-btn-lg{height:54px;padding:0 24px;border-radius:14px}
.mk-play{background:transparent;font:inherit;font-size:15px;cursor:pointer}
.mk-play .mk-icon-play{display:none}
.mk-play[aria-pressed="false"] .mk-icon-play{display:block}
.mk-play[aria-pressed="false"] .mk-icon-pause{display:none}

.mk-wheel{position:relative;width:min(520px,100%);aspect-ratio:1/1;margin:0 auto;animation-delay:.2s}
.mk-wheel-dots,.mk-wheel-ring{position:absolute;inset:0;width:100%;height:100%}
.mk-wheel-dots{animation:mk-spin 60s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}
.mk-wheel-ring [data-wheel-progress]{transition:stroke-dashoffset .9s var(--cp-ease)}
.mk-wheel-center{position:absolute;inset:22%;display:grid;place-items:center;text-align:center}
.mk-wheel-item{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s var(--cp-ease)}
.mk-wheel-item.is-active{opacity:1;transform:none}
.mk-wheel-num{font-family:var(--cp-serif);font-size:clamp(64px,8vw,112px);line-height:.85;color:var(--cp-accent-text)}
.mk-wheel-name{font-family:var(--cp-serif);font-size:clamp(24px,2.6vw,34px);line-height:1.1}
.mk-wheel-param{font-family:var(--cp-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-node{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:999px;border:1px solid var(--cp-line-strong);background:var(--cp-bg);color:var(--cp-text-soft);font-family:var(--cp-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:background .4s ease,color .4s ease,border-color .4s ease}
.mk-node:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}
.mk-node[aria-pressed="true"]{background:var(--cp-accent);border-color:var(--cp-accent);color:var(--cp-ink)}

/* Shared section pieces */
.mk-head{max-width:820px}
.mk-measure{max-width:600px}
.mk-detail{border-top:1px solid var(--cp-line-strong);border-bottom:1px solid var(--cp-line-strong)}
.mk-detail summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;list-style:none;cursor:pointer;font-family:var(--cp-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text)}
.mk-detail summary::-webkit-details-marker{display:none}
.mk-detail summary:hover{color:var(--cp-accent-text)}
.mk-plus{flex:none;transition:transform .3s ease}
.mk-detail[open] .mk-plus{transform:rotate(45deg)}
.mk-detail p{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--cp-text-soft)}
.mk-detail .mk-refs{margin-bottom:20px;font-family:var(--cp-mono);font-size:11px;letter-spacing:.1em;color:var(--cp-text-muted)}
.mk-figure{margin:0;padding:24px;border-radius:24px;background:var(--cp-card);border:1px solid var(--cp-line)}
.mk-figure--plain{max-width:520px;width:100%;padding:28px;background:var(--cp-bg)}
.mk-figure figcaption{margin-top:14px;font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.cp-grow-x{transform-origin:0 50%}
@keyframes cp-grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: view()){
  .cp-grow-x{animation:cp-grow-x linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
}

/* Milk */
.mk-milk{scroll-margin-top:76px}
.mk-composition{display:flex;flex-direction:column;gap:14px;margin-top:64px}
.mk-scale{display:flex;justify-content:space-between;gap:16px;font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-zoom{margin-top:26px}
.mk-bar{display:flex;gap:4px;height:44px}
.mk-bar span{border-radius:8px}
.mk-bar--thin{height:18px}
.mk-bar--thin span{border-radius:6px}
.mk-comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:20px;margin-top:18px}
.mk-comp-item{display:flex;gap:14px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--cp-line-strong)}
.mk-swatch{flex:none;width:12px;height:12px;margin-top:10px;border-radius:3px}
.mk-comp-copy{display:flex;flex-direction:column;gap:4px}
.mk-comp-head{display:flex;align-items:baseline;gap:10px}
.mk-comp-value{font-family:var(--cp-serif);font-size:40px;line-height:1}
.mk-comp-label{font-family:var(--cp-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-soft)}
.mk-comp-note{font-size:14px;color:var(--cp-text-muted)}
.mk-micelle{margin-top:clamp(80px,9vw,128px)}
.mk-micelle-copy{display:flex;flex-direction:column;gap:22px}
.mk-micelle-copy h3{font-family:var(--cp-serif);font-size:clamp(36px,3.6vw,52px);line-height:1.02}
.mk-micelle-copy > p{font-size:17px;line-height:1.7;color:var(--cp-text-soft)}
.mk-yield{display:flex;align-items:baseline;gap:18px;padding:22px 0;border-top:1px solid var(--cp-line-strong);border-bottom:1px solid var(--cp-line-strong)}
.mk-yield span:first-child{flex:none;font-family:var(--cp-serif);font-size:56px;line-height:.9;color:var(--cp-accent-text)}
.mk-yield span:last-child{font-size:15px;color:var(--cp-text-soft)}
.mk-micelle .mk-detail{border-top:0}

/* Nine steps */
.mk-process{padding:clamp(40px,5vw,64px) 0 0}
.mk-steps{display:grid;grid-template-columns:176px minmax(0,1fr);gap:56px}
.mk-rail{position:sticky;top:108px;align-self:start}
.mk-rail p{margin:0 0 18px;font-family:var(--cp-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-rail ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--cp-line)}
.mk-rail a{display:flex;align-items:baseline;gap:12px;margin-left:-1px;padding:8px 0 8px 16px;border-left:2px solid transparent;font-size:14px;color:var(--cp-text-muted);transition:color .4s ease,border-color .4s ease}
.mk-rail a span{font-family:var(--cp-mono);font-size:11px;color:var(--cp-line-bold);transition:color .4s ease}
.mk-rail a:hover,.mk-rail a[aria-current]{color:var(--cp-text)}
.mk-rail a[aria-current]{border-left-color:var(--cp-accent)}
.mk-rail a[aria-current] span{color:var(--cp-accent-text)}
.mk-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:56px;align-items:center;padding:96px 0;border-top:1px solid var(--cp-line);scroll-margin-top:90px}
.mk-step:first-child{border-top:0}
.mk-step-copy{display:flex;flex-direction:column;gap:22px}
.mk-step-kicker{font-family:var(--cp-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-accent-text)}
.mk-step h2{font-family:var(--cp-serif);font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.02em}
.mk-step h2 em{color:var(--cp-text-soft)}
.mk-step-summary{font-size:17px;line-height:1.7;color:var(--cp-text-soft)}
.mk-facts{display:flex;flex-wrap:wrap;gap:8px}
.mk-facts span{padding:8px 12px;border-radius:999px;background:var(--cp-card);border:1px solid var(--cp-line-strong);font-family:var(--cp-mono);font-size:11px;letter-spacing:.08em}
.mk-diverges{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.mk-diverges span{font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-diverges a{padding:7px 12px;border-radius:999px;border:1px dashed var(--cp-line-bold);font-family:var(--cp-mono);font-size:11px;letter-spacing:.08em;color:var(--cp-text-soft);transition:border-color .25s ease,color .25s ease}
.mk-diverges a:hover{border-color:var(--cp-accent);color:var(--cp-text)}

/* Production families */
.mk-families{scroll-margin-top:76px}
.mk-fam-total{display:flex;flex-direction:column;gap:12px;margin-top:56px}
.mk-fam-total p{font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-fam-bar{display:flex;gap:3px;height:16px}
.mk-fam-bar span{border-radius:4px;background:var(--cp-line-strong);transition:background .4s ease}
.mk-fam-bar span[data-alt="1"]{background:var(--cp-raised-strong)}
.mk-fam-bar span.is-active{background:var(--cp-accent)}
.mk-fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:10px;margin-top:36px}
.mk-fam{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px;border-radius:14px;border:1px solid var(--cp-line);background:transparent;color:var(--cp-text-soft);font:inherit;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease}
.mk-fam span:first-child{font-family:var(--cp-serif);font-size:22px;line-height:1.15}
.mk-fam span:last-child{font-family:var(--cp-mono);font-size:12px;color:var(--cp-text-muted)}
.mk-fam:hover{border-color:var(--cp-line-bold);color:var(--cp-text)}
.mk-fam[aria-pressed="true"]{background:var(--cp-raised);border-color:var(--cp-accent);color:var(--cp-text)}
.mk-fam[aria-pressed="true"] span:last-child{color:var(--cp-accent-text)}
.mk-fam-panels{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.mk-fam-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;padding:clamp(24px,4vw,44px);border-radius:22px;background:var(--cp-bg);border:1px solid var(--cp-line-strong)}
.js-families .mk-fam-panel{display:none}
.js-families .mk-fam-panel.is-active{display:grid;animation:cp-in .6s var(--cp-ease) both}
.mk-fam-panel-head{display:flex;flex-direction:column;gap:14px}
.mk-fam-count{font-family:var(--cp-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-accent-text)}
.mk-fam-panel h3{font-family:var(--cp-serif);font-size:clamp(40px,4.4vw,60px);line-height:1}
.mk-fam-step{font-family:var(--cp-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--cp-text-soft)}
.mk-fam-panel-body{display:flex;flex-direction:column;gap:12px}
.mk-fam-panel-body > p{margin-bottom:8px;font-size:17px;line-height:1.7;color:var(--cp-text-soft)}
.mk-fam-examples-label{font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.mk-fam-examples{display:flex;flex-wrap:wrap;gap:8px}
.mk-fam-examples a{padding:9px 14px;border-radius:999px;border:1px solid var(--cp-line-strong);background:var(--cp-card);font-size:14px;color:var(--cp-text);transition:border-color .25s ease}
.mk-fam-examples a:hover{border-color:var(--cp-accent);color:var(--cp-text)}

/* Sources and closing */
.mk-review{padding:12px 16px;border-radius:12px;border:1px dashed var(--cp-line-bold);font-family:var(--cp-mono);font-size:12px;letter-spacing:.06em;color:var(--cp-text-soft)}
.mk-source-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--cp-line-strong)}
.mk-source-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--cp-line)}
.mk-source-list li span:first-child{font-family:var(--cp-mono);font-size:12px;color:var(--cp-accent-text)}
.mk-source-list li span:last-child{font-size:15px;line-height:1.6;color:var(--cp-text-soft)}
.mk-download{padding:clamp(110px,13vw,180px) 0;text-align:center;border-top:1px solid var(--cp-line);background:radial-gradient(56% 60% at 50% 100%,rgba(245,138,7,.1),rgba(245,138,7,0) 70%)}
.mk-download-inner{display:flex;flex-direction:column;align-items:center;gap:28px}
.mk-download-inner > img{width:72px;height:72px;border-radius:18px;display:block;box-shadow:0 24px 48px var(--cp-shadow-deep)}
.mk-download h2{font-family:var(--cp-serif);font-size:clamp(52px,6.6vw,104px);line-height:.95;letter-spacing:-.025em}
.mk-download h2 em{color:var(--cp-text-soft)}
.mk-download .cp-lead{max-width:540px;font-size:18px}

/* Light theme for the illustrations. They were drawn on the dark palette, so
   in light mode their neutrals follow the theme tokens and the dairy colours
   deepen a little to stay visible on paper. */
:root{--cpx-rind:#E8D9B5}
:root[data-theme="light"]{--cpx-rind:#D2B77C}
:root[data-theme="light"] .cpx [fill="#161412"]{fill:var(--cp-bg)}
:root[data-theme="light"] .cpx [fill="#1C1916"]{fill:var(--cp-card)}
:root[data-theme="light"] .cpx [fill="#38322D"]{fill:var(--cp-line-strong)}
:root[data-theme="light"] .cpx [stroke="#38322D"]{stroke:var(--cp-line-strong)}
:root[data-theme="light"] .cpx [fill="#504740"]{fill:var(--cp-line-bold)}
:root[data-theme="light"] .cpx [stroke="#504740"]{stroke:var(--cp-line-bold)}
:root[data-theme="light"] .cpx [fill="#8A837A"]{fill:var(--cp-text-muted)}
:root[data-theme="light"] .cpx [stroke="#8A837A"]{stroke:var(--cp-text-muted)}
:root[data-theme="light"] .cpx [fill="#BBB4AC"]{fill:var(--cp-text-soft)}
:root[data-theme="light"] .cpx [fill="#F5F3EF"]{fill:var(--cp-text)}
:root[data-theme="light"] .cpx [stroke="#F5F3EF"]{stroke:var(--cp-text)}
:root[data-theme="light"] .cpx [fill="#EFE6D2"]{fill:#E8D3A2}
:root[data-theme="light"] .cpx [stroke="#EFE6D2"]{stroke:#CDB683}
:root[data-theme="light"] .cpx [fill="#E8D9B5"]{fill:#E2C98E}
:root[data-theme="light"] .cpx [stroke="#E8D9B5"]{stroke:#D2B77C}
:root[data-theme="light"] .cpx [fill="#CFC79A"]{fill:#C9BE85}
:root[data-theme="light"] .cpx [fill="#D9C9A2"]{fill:#CDB683}
:root[data-theme="light"] .cpx [stroke="#BFAE86"]{stroke:#A8956A}
:root[data-theme="light"] .cpx [fill="#9DB8BF"]{fill:#7FA3AD}
:root[data-theme="light"] .cpx [stroke="#9DB8BF"]{stroke:#7FA3AD}
:root[data-theme="light"] .cpx [fill="#8FD694"]{fill:#5DB368}

/* Illustration motion (ported from the design canvas) */
.cpx svg{display:block;width:100%;height:auto;overflow:hidden}
.cpx svg *{transform-box:fill-box}
@keyframes cpx-wave{to{transform:translateX(-100px)}}
.cpx-wave{animation:cpx-wave 3.2s linear infinite}
@keyframes cpx-mercury{0%,8%{transform:scaleY(.1)}55%,88%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.cpx-mercury{transform-origin:50% 100%;animation:cpx-mercury 6s ease-in-out infinite}
@keyframes cpx-steam{0%{opacity:0;transform:translateY(12px)}40%{opacity:.6}100%{opacity:0;transform:translateY(-34px)}}
.cpx-steam{animation:cpx-steam 3.3s ease-out infinite}
@keyframes cpx-drift{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
.cpx-drift{transform-origin:50% 50%;animation:cpx-drift var(--t) ease-in-out infinite}
@keyframes cpx-lac{0%,25%{opacity:1;transform:scale(1)}55%,100%{opacity:0;transform:scale(.6)}}
.cpx-lac{transform-origin:50% 50%;animation:cpx-lac 6s ease-in-out infinite}
@keyframes cpx-h{0%,40%{opacity:0;transform:translateY(6px)}62%,92%{opacity:1;transform:none}100%{opacity:0}}
.cpx-h{animation:cpx-h 6s ease-in-out infinite}
@keyframes cpx-needle{0%,10%{transform:rotate(-62deg)}70%,90%{transform:rotate(40deg)}100%{transform:rotate(-62deg)}}
.cpx-needle{transform-origin:50% 100%;animation:cpx-needle 6s ease-in-out infinite}
@keyframes cpx-gather{0%,24%{transform:translate(0,0)}52%,82%{transform:translate(var(--dx),var(--dy))}100%{transform:translate(0,0)}}
.cpx-gather{animation:cpx-gather 8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cpx-hair{0%,22%{opacity:1}36%,88%{opacity:0}100%{opacity:1}}
.cpx-hair{animation:cpx-hair 8s ease infinite}
@keyframes cpx-snip{0%,16%{opacity:0;transform:scale(.4)}24%,32%{opacity:1;transform:scale(1)}40%,100%{opacity:0;transform:scale(.4)}}
.cpx-snip{transform-origin:50% 50%;animation:cpx-snip 8s ease infinite}
@keyframes cpx-net{0%,52%{opacity:0}62%,80%{opacity:.85}90%,100%{opacity:0}}
.cpx-net{animation:cpx-net 8s ease infinite}
@keyframes cpx-sweep{0%{transform:translateX(-200px)}36%,100%{transform:translateX(200px)}}
.cpx-sweep{animation:cpx-sweep 6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes cpx-split{0%,30%{transform:translate(0,0)}58%,86%{transform:translate(calc(var(--i) * 7px),calc(var(--j) * 7px))}100%{transform:translate(0,0)}}
.cpx-split{animation:cpx-split 6s ease-in-out infinite}
@keyframes cpx-whey{0%,30%{opacity:0}58%,86%{opacity:.55}100%{opacity:0}}
.cpx-whey{animation:cpx-whey 6s ease-in-out infinite}
@keyframes cpx-turn{to{transform:rotate(360deg)}}
.cpx-turn{transform-origin:50% 50%;animation:cpx-turn 14s linear infinite}
@keyframes cpx-shrink{0%,100%{transform:scale(1)}50%{transform:scale(.68)}}
.cpx-shrink{transform-origin:50% 50%;animation:cpx-shrink 6s ease-in-out infinite}
@keyframes cpx-drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(92px);opacity:0}}
.cpx-drop{animation:cpx-drop 2.4s ease-in infinite}
@keyframes cpx-draw{0%{stroke-dashoffset:420}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
.cpx-draw{stroke-dasharray:420;animation:cpx-draw 5s ease-in-out infinite}
@keyframes cpx-press{0%,14%{transform:translateY(0)}48%,72%{transform:translateY(34px)}100%{transform:translateY(0)}}
.cpx-press{animation:cpx-press 4.2s ease-in-out infinite}
@keyframes cpx-squash{0%,14%{transform:scaleY(1)}48%,72%{transform:scaleY(.83)}100%{transform:scaleY(1)}}
.cpx-squash{transform-origin:50% 100%;animation:cpx-squash 4.2s ease-in-out infinite}
@keyframes cpx-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.cpx-pulse{animation:cpx-pulse 2.1s ease-in-out infinite}
@keyframes cpx-bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(8px) rotate(1.5deg)}}
.cpx-bob{transform-origin:50% 50%;animation:cpx-bob 4.6s ease-in-out infinite}
@keyframes cpx-sink{0%{transform:translateY(-24px) rotate(0deg);opacity:0}15%{opacity:1}100%{transform:translateY(170px) rotate(200deg);opacity:0}}
.cpx-sink{transform-origin:50% 50%;animation:cpx-sink 3.8s linear infinite}
@keyframes cpx-bubble{0%{transform:translateY(0);opacity:0}20%{opacity:.7}100%{transform:translateY(-130px);opacity:0}}
.cpx-bubble{animation:cpx-bubble 3.2s ease-in infinite}
@keyframes cpx-diffuse{0%{transform:scale(1);opacity:0}20%{opacity:.8}100%{transform:scale(.3);opacity:0}}
.cpx-diffuse{transform-origin:50% 50%;animation:cpx-diffuse 4s ease-in infinite}
@keyframes cpx-rind{0%,8%{stroke-width:3;stroke:var(--cpx-rind)}58%,90%{stroke-width:14;stroke:#C98A3A}100%{stroke-width:3;stroke:var(--cpx-rind)}}
.cpx-rind{animation:cpx-rind 9s ease-in-out infinite}
@keyframes cpx-eye{0%,10%{transform:scale(0)}36%,90%{transform:scale(1)}100%{transform:scale(0)}}
.cpx-eye{transform-origin:50% 50%;animation:cpx-eye 9s ease-in-out infinite}
@keyframes cpx-vein{0%,30%{stroke-dashoffset:300}70%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:300}}
.cpx-vein{stroke-dasharray:300;animation:cpx-vein 9s ease-in-out infinite}
@keyframes cpx-marker{0%,8%{transform:translateX(0)}90%,100%{transform:translateX(250px)}}
.cpx-marker{animation:cpx-marker 9s ease-in-out infinite}
@keyframes cpx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cpx-float{animation:cpx-float 5s ease-in-out infinite}

@media (max-width:1100px){
  .mk-steps{grid-template-columns:1fr}
  .mk-rail{display:none}
}
@media (max-width:960px){
  .mk-hero-grid,.mk-step,.mk-fam-panel{grid-template-columns:1fr;gap:44px}
  .mk-step{padding:72px 0}
}
@media (max-width:600px){
  .mk-fam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-fam span:first-child{font-size:18px}
  .mk-node{width:38px;height:38px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .mk-wheel-dots{animation:none}
}