/* A single blue → champagne → rose → pink tone sampled from the supplied reference. */
:root{--heading-spectrum:var(--heading-spectrum-light);--heading-spectrum-light:linear-gradient(105deg,#b5d2ea 0%,#d3d9d5 26%,#f1dfc1 50%,#f1ced5 73%,#f0bde9 100%);--skill-spectrum:var(--heading-spectrum)}
.pillar-card .pillar-label{background:none;color:#173d79;-webkit-text-fill-color:#173d79}
.manifesto h2{font-size:clamp(2.5rem,6vw,5.4rem);line-height:1.12;letter-spacing:-.025em}
.learning-path-card,.learning-path-card:hover,.learning-path-card:focus-within{--card-angle:0deg;transform:translate3d(0,var(--card-offset),0) rotate(var(--card-angle));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.learning-path-card:focus-within:not(.is-lesson-hover){transform:translate3d(0,var(--card-offset),0) rotate(var(--card-angle))}
.about-layout{row-gap:2.8rem}
.about-layout>h2.about-closing-line{grid-column:1 / -1;width:100%;max-width:none;margin:0;text-align:center;font-size:clamp(.9rem,3.75vw,3.25rem);font-weight:750;line-height:1.4;letter-spacing:-.015em;white-space:nowrap}
.about-closing-line .blue-text{color:#b5d2ea}

/* Radiant rings run independently of the button's existing hover movement. */
.radiant-control{position:relative;isolation:isolate}
.radiant-control::before{content:'';position:absolute;inset:-3px;border-radius:inherit;padding:2px;background-image:conic-gradient(from var(--cta-angle),#7dcdff00 0%,#589beb 14%,#b68af3 27%,#e783cb 38%,#e9ba72 47%,#84d7b8 60%,#a7e7ed 72%,#fff 79%,#589beb 86%,#7dcdff00 97%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:0;opacity:0;animation:cta-border 4.8s linear infinite;animation-play-state:paused;filter:drop-shadow(0 0 3px #b998f34a)}
/* Footer CTAs and the fixed contact control keep their continuous border. */
.contact-actions .radiant-control.radiant-visible::before,.whatsapp-float.radiant-control.radiant-visible::before{opacity:1;animation-play-state:running}
@media(hover:hover) and (pointer:fine){
  .radiant-control.radiant-visible:hover:not(:disabled)::before{opacity:1;animation-play-state:running}
}
.learning-cta.radiant-control{animation:none}
.text-link.radiant-control,.orbit-project-link.radiant-control,.lesson-detail.radiant-control,.orbit-skip.radiant-control,.footer-top.radiant-control,.desktop-nav a.radiant-control,.mobile-nav a.radiant-control{border-radius:7px}
.text-link.radiant-control::before,.orbit-project-link.radiant-control::before,.desktop-nav a.radiant-control::before{inset:-5px}
.radiant-control:disabled::before{opacity:0;animation-play-state:paused}
.radiant-control:focus-visible{outline:3px solid #6c5ace;outline-offset:7px}

/* More colour in the notes, while keeping the lettering dark and readable. */
.note-clarity{background-image:linear-gradient(135deg,#cce0ff,#d2eddf);box-shadow:inset 0 1px 0 #fff,0 4px 0 #c5d3f4,0 15px 30px #4068d51c;color:#183f8a}
.note-system{background-image:linear-gradient(135deg,#dce7ff,#f4d5e8);box-shadow:inset 0 1px 0 #fff,0 4px 0 #d6beeb,0 15px 30px #8851bd1c;color:#59308a}
.note-first{background-image:linear-gradient(135deg,#ccebdc,#f1e2b8);box-shadow:inset 0 1px 0 #fff,0 4px 0 #bddaca,0 15px 30px #2488651c;color:#15553f}
.note-visual i{color:#4874be55}.note-system i{color:#8a50af55}.note-first i{color:#2d896555}

/* Each poster is an illustrated process, rather than a decorative orbit. */
.build-poster.skill-poster{--scene-accent:#2859d7;--scene-soft:#e6efff;--scene-highlight:#7045cc;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:1.3rem;padding:1.5rem;min-height:425px;background-image:radial-gradient(ellipse at 90% 0%,#d8c5ff8a,transparent 65%),radial-gradient(ellipse at 5% 85%,#cceaff8a,transparent 60%),linear-gradient(145deg,#f7faff,#edefff);border:1px solid #dce3f8;color:#1c3156;box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 #d9dff34d,0 14px 30px #4c57a514}
.build-poster.skill-automation{--scene-accent:#087763;--scene-soft:#e1f4eb;--scene-highlight:#2859d7;background-image:radial-gradient(ellipse at 90% 0%,#b9e8d870,transparent 65%),radial-gradient(ellipse at 5% 85%,#cddefc7d,transparent 60%),linear-gradient(145deg,#f6fcfa,#e9f4f1);border-color:#cee7df}
.build-poster.skill-digital{--scene-accent:#7045cc;--scene-soft:#f0e6ff;--scene-highlight:#ac2d84;background-image:radial-gradient(ellipse at 90% 0%,#e9bbda70,transparent 65%),radial-gradient(ellipse at 5% 85%,#e6ceaa65,transparent 60%),linear-gradient(145deg,#fcf8ff,#f0eaff);border-color:#e3d8f3}
.scene-chrome{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem;font-weight:650;letter-spacing:.035em;color:var(--scene-accent)}
.scene-chrome>span{padding:.35rem .55rem;border:1px solid color-mix(in srgb,var(--scene-accent) 18%,white);border-radius:999px;background:#ffffffc2;font-size:.6875rem;white-space:nowrap}
.scene-chrome>span::before{content:'';display:inline-block;vertical-align:middle;margin-right:5px;width:5px;height:5px;border-radius:50%;background:var(--scene-accent);box-shadow:0 0 7px color-mix(in srgb,var(--scene-accent) 24%,transparent)}
.scene-viewport{width:100%;aspect-ratio:4 / 3;max-height:320px;display:grid;place-items:center;position:relative}
.scene-viewport svg{display:block;width:100%;height:100%;overflow:visible;font-family:var(--font);transform:none;filter:none;text-rendering:geometricPrecision}
/* Keep small vector labels on a stable plane while the artwork assembles. */
.screen-stage .build-panels{transform:none;transition:none}
.scene-svg text{font-size:12px;fill:#33486a;font-weight:500;letter-spacing:0}
.scene-svg .scene-heading{font-size:17px;font-weight:650;fill:#193865}
.scene-svg .scene-small{font-size:10.5px;fill:#3e526e;font-weight:550}
.scene-svg .scene-light{fill:#fff}
.scene-svg .scene-accent{fill:var(--scene-accent)}
.scene-svg .scene-highlight{fill:var(--scene-highlight)}
.scene-svg .scene-soft{fill:var(--scene-soft)}
.scene-svg .scene-face{fill:#ffffffed;stroke:#cfd9ed;stroke-width:1.3}
.scene-svg .scene-outline{fill:none;stroke:var(--scene-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scene-svg .scene-connector{fill:none;stroke:#bdcce3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene-svg .scene-travel{fill:none;stroke:var(--scene-highlight);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 130;stroke-dashoffset:0}
.scene-svg .scene-unit{transform-box:fill-box;transform-origin:center;opacity:1}
.scene-svg .scene-dot{fill:var(--scene-highlight)}
.scene-footer{position:relative}
.scene-footer>strong{display:block;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.25;letter-spacing:-.015em;color:#233653}
.scene-steps{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.8rem;font-size:.8125rem;color:#51617b}
.scene-steps b{font-weight:550;color:var(--scene-accent)}
.scene-progress{height:3px;border-radius:6px;background:color-mix(in srgb,var(--scene-accent) 12%,white);overflow:hidden;margin-top:1rem}
.scene-progress>span{display:block;height:100%;width:100%;background-image:linear-gradient(90deg,var(--scene-accent),var(--scene-highlight),#d08bb9);transform-origin:left}
/* Every phase completes in 4.8 seconds; data travels immediately. */
.scene-svg .scene-build-line{fill:none;stroke:var(--scene-accent);stroke-width:2;stroke-linecap:round}
.scene-animated .scene-stage-one{animation:scene-first 4.8s ease-in-out infinite}
.scene-animated .scene-stage-two{animation:scene-second 4.8s ease-in-out infinite}
.scene-animated .scene-stage-three{animation:scene-third 4.8s ease-in-out infinite}
.scene-animated .scene-stage-four{animation:scene-fourth 4.8s ease-in-out infinite}
.scene-animated .scene-travel{animation:scene-data 1.2s linear infinite}
.scene-animated .scene-progress>span{animation:scene-progress 4.8s linear infinite}
.scene-animated .scene-pointer{animation:scene-pointer 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.scene-animated .scene-build-line,.scene-animated .scene-draw,.scene-animated .scene-product-lines{stroke-dasharray:1;animation:scene-draw 4.8s ease-in-out infinite}
.scene-animated .scene-beacon{animation:scene-signal 1.2s ease-in-out infinite}
.scene-animated .scene-beacon:nth-last-of-type(2){animation-delay:.3s}
.scene-animated .scene-beacon:last-of-type{animation-delay:.6s}
.scene-animated .scene-chrome>span::before{animation:scene-signal 1.2s ease-in-out infinite}
.scene-animated:not(.scene-playing) *,.scene-animated:not(.scene-playing) .scene-chrome>span::before{animation-play-state:paused!important}
@keyframes scene-first{0%,100%{opacity:.45;transform:translateY(6px)}10%,90%{opacity:1;transform:none}97%{opacity:.45;transform:translateY(6px)}}
@keyframes scene-second{0%,8%,100%{opacity:.45;transform:translateY(7px)}24%,90%{opacity:1;transform:none}97%{opacity:.45;transform:translateY(7px)}}
@keyframes scene-third{0%,23%,100%{opacity:.45;transform:translateY(6px)}40%,90%{opacity:1;transform:none}97%{opacity:.45;transform:translateY(6px)}}
@keyframes scene-fourth{0%,39%,100%{opacity:.45;transform:translateY(6px)}56%,90%{opacity:1;transform:none}97%{opacity:.45;transform:translateY(6px)}}
@keyframes scene-data{to{stroke-dashoffset:-137}}
@keyframes scene-progress{0%{transform:scaleX(.04)}65%,94%{transform:scaleX(1)}100%{transform:scaleX(.04)}}
@keyframes scene-draw{0%,6%,100%{stroke-dashoffset:1}28%,94%{stroke-dashoffset:0}}
@keyframes scene-signal{0%,100%{opacity:.3}40%,60%{opacity:1}}
@keyframes scene-pointer{0%{opacity:0;transform:translate(-70px,-100px)}12%,17%{opacity:1;transform:translate(-50px,-62px)}28%,33%{opacity:1;transform:translate(25px,-12px)}44%,49%{opacity:1;transform:translate(0,0)}62%,88%{opacity:1;transform:translate(-35px,50px)}96%,100%{opacity:0;transform:translate(-35px,50px)}}
@media(max-width:1024px){
  .learning-path-card,.learning-path-card:hover,.learning-path-card:focus-within{--card-offset:0px;--card-angle:0deg;transform:translate3d(0,0,0)}
  .about-layout{row-gap:2rem}
  .build-poster.skill-poster{padding:1.25rem;min-height:380px}
}
@media(max-width:760px){
  .manifesto h2{font-size:clamp(2rem,7.5vw,3.3rem);line-height:1.15}
  .build-poster.skill-poster{min-height:350px;gap:1rem;padding:1.1rem}
  .scene-viewport{max-height:290px}
  .scene-chrome{font-size:.6875rem}
  .scene-footer>strong{font-size:1.25rem}
}
@media(hover:hover) and (pointer:fine){
  .learning-path-card.is-lesson-hover{transform:translate3d(0,calc(var(--card-offset) - 9px),18px) rotate(var(--card-angle)) rotateX(var(--lesson-tilt-x,0deg)) rotateY(var(--lesson-tilt-y,0deg))}
}
@media(prefers-reduced-motion:reduce){
  .scene-animated .scene-unit,.scene-animated .scene-travel,.scene-animated .scene-progress>span,.scene-animated .scene-pointer,.scene-animated .scene-build-line,.scene-animated .scene-draw,.scene-animated .scene-product-lines,.scene-animated .scene-beacon,.scene-animated .scene-chrome>span::before{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .radiant-control::before{animation:none!important}
  .scene-pointer{display:none}
  .scene-viewport svg{transform:none}
  .learning-path-card,.learning-path-card:hover,.learning-path-card:focus-within,.learning-path-card.is-lesson-hover{transform:none;transition:none}
}
@media(forced-colors:active){
  .pillar-card .pillar-label,.cta-label,.about-closing-line .blue-text{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .radiant-control::before{display:none}
  .scene-svg .scene-face,.scene-svg .scene-soft{fill:Canvas;stroke:CanvasText}
  .scene-svg text{fill:CanvasText}
  .scene-svg .scene-accent,.scene-svg .scene-highlight{fill:Highlight}
}

/* Selected controls show the ring on hover; navigation still marks the current section. */
.desktop-nav a[aria-current="location"],.mobile-nav a[aria-current="location"]{color:#2859d7;font-weight:650}
.mobile-nav a.radiant-control::before{inset:1px -7px}
body .button,body .button:hover,body .learning-path-card .button,body .learning-path-card .button:hover,body .learning-cta.cta-bright,body .learning-cta.cta-bright:hover,body .whatsapp-float,body .whatsapp-float:hover{--cta-surface:#fff;background:#fff;color:#2859d7;border:1px solid #d5e1ee;box-shadow:inset 0 1px 0 #fff,0 5px 18px #30568015;font-weight:650}
body .button:hover,body .learning-path-card .button:hover,body .whatsapp-float:hover{box-shadow:inset 0 1px 0 #fff,0 9px 23px #30568020}
.cta-label{color:#2859d7;font-weight:650}
.button .cta-label{font-size:inherit}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .cta-label{background:none}
}
.about-links{gap:1rem;align-items:center;margin-top:1.6rem}
.about-links .button{margin:0;min-height:54px;padding:.85rem 1.3rem;font-size:1rem;border-radius:100px}
[data-reset-flow]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem .9rem;border:1px solid #b3c7de;border-radius:10px;background:#fff;color:#2859d7;font-size:.9375rem;font-weight:650}
[data-reset-flow]:hover:not(:disabled){color:#087763;border-color:#78b3a1;box-shadow:0 4px 12px #2859d714}
[data-reset-flow]:disabled{opacity:.48;cursor:default}
body .whatsapp-float{right:1.25rem;min-height:44px;padding:.5rem .9rem;font-size:.8125rem;gap:.5rem}
@media(max-width:760px){
  .about-layout>h2.about-closing-line{font-size:clamp(.8125rem,3.95vw,1.75rem)}
  .about-links{gap:.8rem}
  .about-links .button{min-height:50px;padding:.75rem 1.1rem;font-size:.9375rem}
  body .whatsapp-float{right:1rem;width:48px;height:48px;min-height:48px;padding:0}
}
@media(forced-colors:active){
  .cta-label,.learn-digital .cta-label,#panel-digital .cta-label,.about-closing-line .blue-text{background:none;color:ButtonText;-webkit-text-fill-color:ButtonText}
}

/* Compact fixed contact control, independent of the shared border positioning. */
body .whatsapp-float.radiant-control{position:fixed;inset:auto max(1.75rem,env(safe-area-inset-right)) max(1.75rem,env(safe-area-inset-bottom)) auto;left:auto;top:auto;width:max-content;max-width:calc(100vw - 3.5rem);min-height:48px;padding:.6rem 1rem;display:inline-flex;align-items:center;justify-content:center;z-index:30;font-size:.875rem;border-radius:999px}

/* Dark miniature fields use the same indigo atmosphere as the learning chapter. */
body .button,body .button:hover,body .learning-path-card .button,body .learning-path-card .button:hover,body .learning-cta.cta-bright,body .learning-cta.cta-bright:hover,body .whatsapp-float,body .whatsapp-float:hover{--cta-surface:#192441;background:linear-gradient(110deg,#182541,#2d2b59 58%,#444077);color:#edf6ff;border-color:#c8d8f04f;box-shadow:inset 0 1px 0 #ffffff1a,0 6px 18px #1c26432b}
body .button:hover,body .learning-path-card .button:hover,body .whatsapp-float:hover{box-shadow:inset 0 1px 0 #ffffff24,0 10px 25px #1c26433b}
.particle-cta::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.72;background-image:radial-gradient(circle at 15px 19px,#b6e4ffbd 1px,transparent 1.6px),radial-gradient(circle at 43px 8px,#c2efdfa3 .9px,transparent 1.5px),radial-gradient(circle at 17px 34px,#efd3f78f .8px,transparent 1.4px);background-size:128px 64px,88px 56px,64px 40px;background-position:0 0,14px 8px,4px -8px;animation:button-particle-drift 16s linear infinite;animation-play-state:paused}
.particle-cta.radiant-visible::after{animation-play-state:running}
.particle-cta.radiant-control::before{z-index:2}
.particle-cta>.cta-label,.particle-cta>svg{position:relative;z-index:1}
/* Dark CTA text and every icon stay white in all states. */
body .particle-cta,body .particle-cta:hover,body .particle-cta:focus-visible{color:#fff}
body .particle-cta .cta-label,body .learn-digital .particle-cta .cta-label,body #panel-digital .particle-cta .cta-label,body .particle-cta svg{background:none;color:#fff;-webkit-text-fill-color:#fff}
@keyframes button-particle-drift{to{background-position:128px -64px,102px -48px,68px -48px}}

/* Transparent footer controls expose the actual section field behind them. */
body .contact-section .contact-actions .button,body .contact-section .contact-actions .button:hover{background:transparent;--cta-surface:transparent;border-color:#cbdaf033;box-shadow:none}
.contact-actions .particle-cta::after{content:none;animation:none}
.contact-section.learning-close{margin-inline:0;border-radius:0;border:0;box-shadow:none;transform:none;transition:none;overflow:clip}
.contact-section.learning-close>.contact-orbit{inset:0;left:0;right:0;width:100%;height:100%;transform:none;border:0}

/* Use the same reference hues on all accents, with a light variant on dark chapters. */
.hero-radiant,.radiant-word,.about-closing-line .blue-text,.live-build-copy h2>.radiant-word{color:#b5d2ea}
.learning-intro .radiant-word,.contact-inner .radiant-word{--heading-spectrum:var(--heading-spectrum-light);color:#b5d2ea}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .hero-radiant,.radiant-word,.about-closing-line .blue-text,.live-build-copy h2>.radiant-word,.learning-intro h2 .radiant-word,.contact-inner h2>.radiant-word{background-image:var(--heading-spectrum);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .hero-radiant.radiant-typed,.radiant-word.radiant-typed,.learning-intro h2 .radiant-word.radiant-typed,.contact-inner h2>.radiant-word.radiant-typed{background:none;color:inherit;-webkit-text-fill-color:inherit}
  .hero-radiant.radiant-typed .type-char,.radiant-word.radiant-typed .type-char{background-image:var(--heading-spectrum);background-size:var(--word-tint-scale,500%) 100%;background-position:var(--word-tint-position,0%) center;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.hero-radiant .type-char,.radiant-word .type-char{color:inherit;-webkit-text-fill-color:inherit}
.about-copy .large-copy strong{font-weight:750}
.profile-studio{color:#173d79;font-weight:600}
@media(max-width:760px){
  body .whatsapp-float.radiant-control{inset:auto max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) auto;width:52px;height:52px;min-height:52px;max-width:52px;padding:0;gap:0}
  body .whatsapp-float .cta-label{display:none}
}
@media(prefers-reduced-motion:reduce){.particle-cta::after{animation:none}}
@media(forced-colors:active){
  .particle-cta::after{display:none}
  body .particle-cta,body .particle-cta:hover,body .particle-cta:focus-visible,body .particle-cta .cta-label,body .learn-digital .particle-cta .cta-label,body #panel-digital .particle-cta .cta-label,body .particle-cta svg{background:none;color:ButtonText;-webkit-text-fill-color:ButtonText}
  .hero-radiant,.hero-radiant.radiant-typed .type-char,.radiant-word,.radiant-word.radiant-typed .type-char,.about-closing-line .blue-text,.live-build-copy h2>.radiant-word,.learning-intro h2 .radiant-word,.contact-inner h2>.radiant-word,.learning-intro h2 .radiant-word.radiant-typed,.contact-inner h2>.radiant-word.radiant-typed{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}

/* Dark controls share the existing CTA atmosphere and keep their labels white. */
:root{--control-surface:linear-gradient(110deg,#182541,#2d2b59 58%,#444077);--footer-surface:linear-gradient(110deg,#15233e,#2d2b59 58%,#444077)}
.live-milestones .is-current>span{background:var(--control-surface);border-color:#c8d8f04f;color:#fff;box-shadow:inset 0 1px 0 #ffffff1a,0 6px 18px #1c26432b}
.build-selector button{background:#fff;border-color:#d5e1ee;color:#173d79;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 3px 0 #dfe6ee50,0 8px 18px #173d790d}
.build-selector button[aria-selected=true]{background:var(--control-surface);border-color:#98c9e5;color:#fff;box-shadow:inset 0 0 0 1px #d9ecff70,0 4px 0 #18254133,0 10px 24px #1c264330}
.build-explainer dt{color:#173d79}
.demo-scenarios button,.demo-scenarios button:hover,.demo-scenarios button[aria-pressed=true]{background:var(--footer-surface);border-color:#c8d8f04f;color:#fff;box-shadow:inset 0 1px 0 #ffffff1a,0 5px 14px #1c264320}
.demo-scenarios button[aria-pressed=true]{border-color:#98c9e5;box-shadow:inset 0 0 0 1px #d9ecff70,0 6px 16px #1c26432b}

/* Restore the white lettering over the same surface and particle field as the footer. */
.motion-ribbon{background:var(--footer-surface);color:#fff}
.motion-ribbon::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 74% 40%,#bc93ee36,transparent 48%),radial-gradient(ellipse at 14% 75%,#6cbbe324,transparent 47%)}
.motion-ribbon>.ribbon-particles{z-index:0;opacity:.7}
.motion-ribbon .ribbon-line{position:relative;z-index:1}
.motion-ribbon .ribbon-phrase{background:none;color:#fff;-webkit-text-fill-color:#fff}
.motion-ribbon .ribbon-outline{color:transparent;-webkit-text-stroke:1px #fff}
.motion-ribbon .ribbon-outline .ribbon-phrase{background:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #fff;opacity:1}

/* One lifted table, with a dark heading row and a softly highlighted live-build column. */
.comparison-scroll{border-color:#d5deeb;background:#fff;box-shadow:inset 0 1px 0 #fff,0 6px 0 #dae1ed,0 12px 0 -3px #e6eaf2,0 28px 55px -20px #293e6940;transform:perspective(1600px) rotateX(0deg) rotateY(0deg);transition:transform .22s ease-out,box-shadow .22s ease-out}
.comparison-scroll.is-comparison-hover{transform:perspective(1600px) rotateX(var(--comparison-tilt-x,0deg)) rotateY(var(--comparison-tilt-y,0deg));box-shadow:inset 0 1px 0 #fff,0 6px 0 #d5dfea,0 12px 0 -3px #e6eaf2,0 35px 70px -22px #293e694f}
.learning-table tbody td:last-child{background-color:#edf4fa;background-image:linear-gradient(115deg,#edf4fa,#fbf2e5 55%,#fbeff6);color:#253a59}
.learning-table thead th,.learning-table thead th:first-child,.learning-table thead th:last-child{background:#1c2e4b;color:#fff;border-bottom-color:#314666;font-weight:650}
.site-footer .footer-credit>a{color:#173d79}
.site-footer .footer-credit>a:hover{color:#173d79;text-decoration:underline;text-underline-offset:4px}

/* Pure white page and chapter backgrounds leave colour inside the artwork. */
html,body{background:#fff}
.page-atmosphere{background:none;animation:none}
.site-header,.site-header.is-scrolled,.mobile-nav{background:#fff}
.hero,.manifesto,.work-orbit-section,.about-layout,.live-build-story,.capability-section,.automation-section,.brand-band,.guide-section,.process-section,.notes-section,.learning-comparison,.faq-section,.site-footer{background:#fff}
.pillar-window,.pillar-strip{background:transparent}
.live-build-pin::before{background-image:none}
.contact-section.learning-close{background-image:var(--footer-surface)}
.contact-inner h2,.contact-inner h2>.type-word,.contact-inner h2>.type-word .type-char{color:#fff;-webkit-text-fill-color:#fff}
@media(prefers-reduced-motion:reduce){.comparison-scroll,.comparison-scroll.is-comparison-hover{transform:none;transition:none}}
@media(forced-colors:active){
 .pillar-card .pillar-label,.motion-ribbon .ribbon-phrase{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;-webkit-text-stroke:0}
 .learning-table thead th,.learning-table thead th:first-child,.learning-table thead th:last-child{background:Canvas;color:CanvasText}
 .build-selector button,.demo-scenarios button,.demo-scenarios button:hover{background:ButtonFace;color:ButtonText}
 .build-selector button[aria-selected=true],.live-milestones .is-current>span{background:Highlight;color:HighlightText}
 .demo-scenarios button[aria-pressed=true]{background:Highlight;color:HighlightText}
 .contact-inner h2,.contact-inner h2>.type-word,.contact-inner h2>.type-word .type-char{color:CanvasText;-webkit-text-fill-color:CanvasText}
}

/* Show the supplied wordmark without its transparent canvas margins. */
.personal-wordmark .personal-logo-frame{width:240px;aspect-ratio:1874/198;overflow:hidden;flex:none}
.personal-wordmark .personal-logo{left:-3.468517%;top:-463.131313%;width:106.723586%;height:auto;max-width:none;aspect-ratio:auto;object-fit:contain;filter:none}
@media(max-width:1100px){.personal-wordmark .personal-logo-frame{width:210px}}
@media(max-width:760px){.personal-wordmark .personal-logo-frame{width:145px}}
@media(max-width:400px){.personal-wordmark .personal-logo-frame{width:128px}}
@media(max-width:360px){.personal-wordmark .personal-logo-frame{width:105px}}

/* Clear teaching cards retain the simplified learning outcomes. */
.learning-showcase .learning-path-card{background:#fff}
.learning-path-card .lesson-outcomes{margin-top:1.2rem;font-size:1rem}
@media(forced-colors:active){.learning-showcase .learning-path-card{background:Canvas}}