/* DNA product story. Shared site tokens/buttons and existing catalogue tab pattern. */
.dnk-section{margin-top:100px;scroll-margin-top:30px}
.dnk-feature{overflow:hidden;padding:0;border-radius:var(--radius);background:var(--lavender)}
.dnk-story{padding:clamp(32px,4vw,64px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.dnk-copy{min-width:0}
.dnk-copy .eyebrow{color:#625775;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.05em;margin-bottom:26px}
.dnk-copy .eyebrow::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.dnk-copy h2{font-size:clamp(40px,4.6vw,72px);line-height:1.07;letter-spacing:-.055em}
.dnk-copy h2 mark{display:inline-block;margin-top:4px;padding:0 12px 7px}
.dnk-intro{font-size:clamp(16px,1.4vw,20px);line-height:1.55;max-width:490px;color:#60596e;margin-top:26px}
.dnk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px 24px;margin-top:32px}
.dnk-actions .button{min-height:60px;justify-content:space-between;gap:35px;font-size:17px}
.dnk-actions p{font-size:12px;line-height:1.5;color:#625775}
.dnk-discovery{position:relative;min-width:0;text-align:center;padding:12px 0}
.dnk-discovery-label{font-size:10px;letter-spacing:.12em;color:#68597e}
.dnk-orbit{position:relative;aspect-ratio:540/440;max-width:590px;margin:10px auto 0;isolation:isolate}
.dnk-orbit::before{content:'';position:absolute;inset:12% 15%;border-radius:50%;background:radial-gradient(circle,#c3b4ed88,transparent 70%);z-index:-1}
.dnk-orbit-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#ad98d1;stroke-width:1}
.dnk-orbit-lines>ellipse{opacity:.65}.dnk-orbit-lines>circle:not(.dnk-orbit-dot){stroke-dasharray:2 7;opacity:.7}.dnk-orbit-lines .dnk-orbit-dot{fill:#8c75b9;stroke:none}
.dnk-core{position:absolute;left:34%;top:30%;width:32%;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--yellow);box-shadow:0 12px 30px #77642a12;transform:rotate(-8deg);z-index:2}
.dnk-core>span{font-size:clamp(11px,1.1vw,16px);line-height:1.2}
.dnk-core>strong{font-size:clamp(40px,5.1vw,76px);line-height:1.1;letter-spacing:-.07em}
.dnk-core>svg{position:absolute;width:22%;height:22%;right:-4%;bottom:7%;color:#776098;transform:rotate(8deg)}
.dnk-ingredients{list-style:none;margin:0;padding:0}
.dnk-ingredient{position:absolute;padding:18px 22px;text-align:left;border-radius:17px;background:#fffdf5;border:1px solid #ffffffaa;box-shadow:0 12px 26px -18px #4f39544d;width:38%;z-index:3}
.dnk-ingredient>span{display:block;font-size:9px;letter-spacing:.04em;color:#71617e;margin-bottom:9px}
.dnk-ingredient>strong{display:block;font-size:clamp(17px,1.6vw,24px);line-height:1.15;letter-spacing:-.025em}
.dnk-ingredient-goal{left:2%;top:8%;transform:rotate(-7deg)}
.dnk-ingredient-strength{right:0;top:12%;transform:rotate(6deg);background:#eee8fc}
.dnk-ingredient-barrier{left:0;bottom:10%;transform:rotate(4deg);background:var(--pink)}
.dnk-ingredient-pace{right:0;bottom:6%;transform:rotate(-5deg)}
.dnk-discovery-caption{font-size:14px;color:#625775;margin-top:5px}
.dnk-discovery-caption>span{color:var(--txt);border-bottom:1px solid #a48dbf;padding-bottom:3px}
/* A quiet, typographic summary below the brand illustration. */
.dnk-takeaways{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,5vw,80px);padding:clamp(32px,4vw,64px);background:var(--panel-solid)}
.dnk-takeaways-heading .eyebrow{font-size:10px;letter-spacing:.09em;color:var(--muted);margin-bottom:24px}
.dnk-takeaways-heading h3{font-size:clamp(36px,3.4vw,54px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.dnk-outcomes{list-style:none;counter-reset:dnk-outcome;margin:0;padding:0}
.dnk-outcome{counter-increment:dnk-outcome;display:grid;grid-template-columns:26px minmax(0,.9fr) minmax(0,1.1fr);gap:14px;align-items:baseline;padding:23px 0;border-top:1px solid var(--stroke)}
.dnk-outcome:first-child{padding-top:0;border-top:0}
.dnk-outcome:last-child{padding-bottom:0}
.dnk-outcome::before{content:counter(dnk-outcome,decimal-leading-zero);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.dnk-outcome h4{font-size:20px;font-weight:400;line-height:1.2;letter-spacing:-.025em;margin:0}
.dnk-outcome p{font-size:15px;line-height:1.5;color:var(--muted);max-width:32ch;text-wrap:pretty}
.dnk-path{margin-top:14px;padding:27px 30px 30px;border-radius:24px;background:var(--panel-solid);scroll-margin-top:160px}
.dnk-path-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.dnk-path-heading h3{font-size:19px;letter-spacing:-.025em}
.dnk-path-heading p{color:var(--muted);font-size:11px}
.dnk-path [data-dnk-tone="start"]{--path-tone:var(--lavender);--path-ink:#655080}
.dnk-path [data-dnk-tone="route"]{--path-tone:color-mix(in srgb,var(--yellow) 65%,var(--panel-solid));--path-ink:#766027}
.dnk-path [data-dnk-tone="practice"]{--path-tone:var(--pink);--path-ink:#8a4c72}
.dnk-path [data-dnk-tone="result"]{--path-tone:#deeee5;--path-ink:#3e6b57}
.dnk-path-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.dnk-path-tabs .settings-tab{
  position:relative;isolation:isolate;display:grid;grid-template-columns:1fr auto;
  align-content:start;align-items:center;gap:10px 8px;min-width:0;text-align:left;
  border:1px solid color-mix(in srgb,var(--path-ink) 15%,var(--path-tone));
  background:var(--path-tone);color:var(--txt);border-radius:18px;padding:18px;
  transition:translate .3s cubic-bezier(.2,.75,.2,1),border-color .25s,box-shadow .25s;
}
.dnk-path-tabs .settings-tab::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;right:16px;top:57px;
  width:105px;height:78px;border:1px solid color-mix(in srgb,var(--path-ink) 12%,transparent);
  border-radius:50%;transform:rotate(-24deg);
}
.dnk-path-tabs .settings-tab.on{border-color:var(--path-ink);box-shadow:inset 0 0 0 1px var(--path-ink),0 7px 16px -12px var(--path-ink)}
.dnk-path-tabs .settings-tab:focus-visible{outline-color:var(--accent);outline-offset:4px}
.dnk-path-number{font-size:11px;line-height:1.3;color:var(--path-ink)}
.dnk-path-arrow{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:color-mix(in srgb,var(--panel-solid) 60%,transparent);font-size:19px;line-height:1;color:var(--path-ink);transition:transform .3s,background .25s,color .25s}
.dnk-path-tabs .settings-tab.on .dnk-path-arrow{transform:rotate(90deg);background:var(--path-ink);color:#fff}
.dnk-path-art{grid-column:1/-1;display:flex;justify-content:flex-end;height:76px;margin:0 0 2px;color:var(--path-ink);pointer-events:none;transition:transform .4s cubic-bezier(.2,.75,.2,1)}
.dnk-path-art svg{display:block;width:126px;height:81px;overflow:visible;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dnk-art-paper{fill:color-mix(in srgb,var(--panel-solid) 70%,var(--path-tone))}
.dnk-art-orbit{opacity:.45}
.dnk-path-title{grid-column:1/-1;font-size:20px;line-height:1.12;letter-spacing:-.03em}
.dnk-path-subtitle{grid-column:1/-1;font-size:12px;line-height:1.4;color:var(--path-ink)}
.dnk-path-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);margin-top:32px;padding:32px 18px 10px;border-top:1px solid var(--stroke);outline-offset:4px}
.dnk-path-detail>span{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.dnk-path-detail h4{font-size:23px;line-height:1.2;letter-spacing:-.03em;font-weight:400;margin:0 0 11px}
.dnk-path-detail p{max-width:470px;font-size:14px;line-height:1.6;color:var(--muted)}
.dnk-path-result{align-self:start;min-width:0}
.dnk-path-result>span{display:block;font-size:10px;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.dnk-path-result p{font-size:clamp(24px,2.3vw,36px);line-height:1.2;letter-spacing:-.035em;margin:0 0 26px;text-wrap:pretty}
.dnk-path-result .button{font-size:14px;min-height:50px;padding:13px 22px;gap:28px;max-width:100%}
.dnk-path-result .button .arrow{font-size:23px;flex-shrink:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .dnk-path-tabs .settings-tab:hover{translate:0 -4px;border-color:var(--path-ink);box-shadow:0 12px 20px -16px var(--path-ink)}
  .dnk-path-tabs .settings-tab.on:hover{box-shadow:inset 0 0 0 1px var(--path-ink),0 12px 20px -16px var(--path-ink)}
  .dnk-path-tabs .settings-tab:hover .dnk-path-art{transform:translateY(-3px) rotate(-3deg)}
}
@media(prefers-reduced-motion:no-preference){
  .dnk-path-panel:not([hidden]) .dnk-path-detail{animation:dnk-panel-in .38s cubic-bezier(.2,.75,.2,1) both}
  .dnk-path-panel:not([hidden]) .dnk-path-result{animation:dnk-panel-in .42s .06s cubic-bezier(.2,.75,.2,1) both}
  .dnk-path .dnk-art-float{animation:dnk-art-float 4.8s ease-in-out infinite paused}
  .dnk-path .dnk-art-route{animation:dnk-route-flow 3s linear infinite paused}
  .dnk-path .dnk-art-voice path{transform-box:fill-box;transform-origin:center;animation:dnk-voice 1.3s ease-in-out infinite alternate paused}
  .dnk-path .dnk-art-voice path:nth-child(2n){animation-delay:-.45s}
  .dnk-path .dnk-art-voice path:nth-child(3){animation-delay:-.8s}
  .dnk-path .dnk-art-spark{transform-box:fill-box;transform-origin:center;animation:dnk-spark 4.8s ease-in-out infinite paused}
  html[data-motion="on"] .dnk-path[data-motion-visible="true"] .settings-tab.on :is(.dnk-art-float,.dnk-art-route,.dnk-art-voice path,.dnk-art-spark){animation-play-state:running}
  @keyframes dnk-panel-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
  @keyframes dnk-art-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes dnk-route-flow{to{stroke-dashoffset:-27}}
  @keyframes dnk-voice{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
  @keyframes dnk-spark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(30deg) scale(.82)}}
}
@media(min-width:1500px){.dnk-ingredient{padding:23px 26px}.dnk-ingredient>span{font-size:10px}.dnk-path-title{font-size:23px}.dnk-path-subtitle{font-size:14px}.dnk-path-detail p{font-size:16px}}
@media(max-width:1100px){.dnk-story{padding:36px 30px}.dnk-story{gap:28px}.dnk-copy h2{font-size:46px}.dnk-copy .eyebrow{font-size:9px}.dnk-intro{font-size:16px}.dnk-ingredient{padding:16px}.dnk-ingredient>span{font-size:8px}.dnk-ingredient>strong{font-size:19px}.dnk-actions .button{font-size:15px;gap:23px}.dnk-path{padding:23px}.dnk-path-tabs .settings-tab{padding:15px 12px}.dnk-path-title{font-size:18px}.dnk-path-panel{padding-inline:5px;gap:25px}}
@media(max-width:900px){.dnk-section{margin-top:65px}.dnk-story{grid-template-columns:1fr;gap:30px}.dnk-copy h2{font-size:clamp(39px,7vw,58px)}.dnk-copy .eyebrow{font-size:10px}.dnk-intro{max-width:580px}.dnk-actions{margin-top:26px}.dnk-discovery{width:100%;max-width:540px;justify-self:center;padding-top:15px}.dnk-core>span{font-size:14px}.dnk-core>strong{font-size:65px}.dnk-ingredient{padding:20px}.dnk-ingredient>span{font-size:9px}.dnk-ingredient>strong{font-size:23px}.dnk-path-heading{align-items:flex-start;flex-direction:column;gap:7px}.dnk-path-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.dnk-path-tabs .settings-tab{padding:16px}.dnk-path-title{font-size:20px}.dnk-path-panel{grid-template-columns:1fr;gap:20px}.dnk-path-heading h3{font-size:20px}}
@media(max-width:580px){.dnk-story{padding:30px 22px}.dnk-copy h2{font-size:clamp(35px,9vw,48px)}.dnk-copy .eyebrow{font-size:9px;letter-spacing:.025em}.dnk-copy h2 mark{padding-inline:9px}.dnk-intro{font-size:16px;margin-top:23px}.dnk-actions{gap:15px}.dnk-actions .button{width:100%;font-size:16px;padding-inline:21px}.dnk-actions p{font-size:12px;text-align:center;width:100%}.dnk-actions p br{display:none}.dnk-story{gap:30px}.dnk-discovery{padding:7px 0}.dnk-orbit{margin-top:14px;aspect-ratio:1.16}.dnk-ingredient{padding:13px 12px;border-radius:12px;width:42%}.dnk-ingredient>span{font-size:7px;letter-spacing:0;margin-bottom:7px}.dnk-ingredient>strong{font-size:17px}.dnk-ingredient-goal{left:0;top:5%}.dnk-ingredient-strength{top:9%}.dnk-ingredient-barrier{bottom:9%}.dnk-ingredient-pace{bottom:5%}.dnk-core{top:34%;left:35%;width:30%}.dnk-core>span{font-size:10px}.dnk-core>strong{font-size:43px}.dnk-discovery-caption{font-size:12px;margin-top:9px}.dnk-path{padding:23px 16px}.dnk-path-heading h3{font-size:19px}.dnk-path-tabs .settings-tab{padding:14px 12px}.dnk-path-title{font-size:18px}.dnk-path-subtitle{font-size:11px}.dnk-path-detail h4{font-size:23px}.dnk-path-panel{padding-inline:2px}}
@media(max-width:580px){
  .dnk-path-number{font-size:9px}
  .dnk-path-arrow{width:25px;height:25px;font-size:17px}
  .dnk-path-art{height:60px}
  .dnk-path-art svg{width:105px;height:68px}
  .dnk-path-tabs .settings-tab::before{top:51px;width:90px;height:65px}
}
@media(max-width:350px){.dnk-copy .eyebrow{font-size:8px;gap:7px}.dnk-ingredient>strong{font-size:15px}.dnk-ingredient>span{font-size:6px}.dnk-core>strong{font-size:37px}.dnk-core>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){.dnk-section *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:1100px){
  .dnk-takeaways{padding:36px 30px;gap:40px}
  .dnk-outcome{grid-template-columns:24px minmax(0,1fr);gap:8px 14px;padding-block:20px}
  .dnk-outcome p{grid-column:2}
}
@media(max-width:900px){
  .dnk-path-panel{gap:28px;padding-top:28px}
  .dnk-path-result{border-top:1px solid var(--stroke);padding-top:25px}
  .dnk-path-result p{font-size:28px;max-width:30ch}
}
@media(max-width:600px){
  .dnk-takeaways{grid-template-columns:1fr;gap:32px;padding:32px 22px}
  .dnk-takeaways-heading .eyebrow{margin-bottom:16px}
  .dnk-takeaways-heading h3{font-size:38px}
  .dnk-outcome h4{font-size:21px}
  .dnk-outcome p{font-size:15px;max-width:none}
  .dnk-path-panel{margin-top:24px;padding-top:26px}
  .dnk-path-result p{font-size:26px}
  .dnk-path-result p br{display:none}
  .dnk-path-result .button{min-height:50px;font-size:14px}
}