/* Five illustrated scenes; only the homepage uses these styles. */
.creation-journey {
  --creation-top:153px;
  --creation-accent:#e36b50;
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse at 78% 44%,#eaf7ff 0,#f6fbff 35%,#fff 72%);
  border-bottom:1px solid #e2edf3;
}
.creation-sticky {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:650px;
  overflow:clip;
}
.creation-layout {
  display:grid;
  grid-template-columns:.98fr 1.12fr;
  align-items:center;
  gap:36px;
  padding-top:32px;
  padding-bottom:20px;
}
.creation-copy {position:relative;z-index:2;min-width:0}
.creation-copy .eyebrow {
  margin:0 0 25px;
  font-size:10px;
  line-height:1.5;
  letter-spacing:1.45px;
}
.creation-copy .eyebrow:before {width:6px;height:6px;background:var(--creation-accent)}
/* Every step contributes its real height, preventing overlapping text and CTAs. */
.creation-headlines {position:relative;display:grid;min-width:0}
.creation-step {
  position:relative;
  grid-area:1/1;
  align-self:start;
  min-width:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .26s ease,transform .42s cubic-bezier(.16,1,.3,1),visibility .26s;
}
.creation-step.is-current {opacity:1;visibility:visible;transform:none}
.creation-step h2 {
  margin:0 0 22px;
  color:#15394c;
  font-size:clamp(44px,4.25vw,64px);
  font-weight:740;
  line-height:1.055;
  letter-spacing:-2.5px;
  text-wrap:normal;
}
.creation-step h2 em {font-style:normal;color:#078fc9}
.creation-lead {
  max-width:420px;
  margin:0;
  color:#5a7485;
  font-size:15px;
  line-height:1.75;
  text-wrap:pretty;
}
.creation-actions {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px}
.creation-actions .button {
  min-height:49px;
  padding:12px 22px;
  gap:16px;
  border-radius:999px;
  font-size:13px;
}
.creation-actions .button-light {border-color:#ccdfeb;background:#ffffffb3}
.creation-actions .button-light:hover {border-color:#9acfe7;background:#f1faff}
.creation-progress {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  max-width:470px;
  padding:0;
  margin:36px 0 0;
  list-style:none;
}
.creation-progress li {
  position:relative;
  min-width:0;
  padding-top:12px;
  color:#7c94a3;
  font-size:10px;
  line-height:1.4;
  transition:color .2s ease;
}
.creation-progress li:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:#dceaf2;
  transition:background .2s ease;
}
.creation-progress li span {display:block;margin-bottom:5px;font-size:10px;font-variant-numeric:tabular-nums}
.creation-progress li b {font:inherit;white-space:nowrap}
.creation-progress li.is-current {color:#17394b}
.creation-progress li.is-current:before {background:#1b9fd3}
.creation-progress li.is-current span {color:#b65038}
.creation-visual {
  position:relative;
  isolation:isolate;
  min-width:0;
  height:clamp(420px,calc(100svh - var(--creation-top) - 126px),650px);
  margin-right:-30px;
}
.creation-glow {
  position:absolute;
  z-index:-1;
  inset:9% -3% 5%;
  border-radius:50%;
  background:radial-gradient(ellipse at 52% 52%,#d9efffa6 0,#eaf7ff70 36%,#f1faff00 72%);
  pointer-events:none;
}
.creation-frames {position:absolute;inset:0 0 34px;pointer-events:none}
.creation-frame {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  max-width:none;
  height:100%;
  object-fit:contain;
  object-position:50% 100%;
  opacity:0;
  transform-origin:50% 85%;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.creation-frame.is-current {opacity:1}
.creation-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:18px;
  color:#718a9a;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.2px;
  text-align:center;
}
.creation-caption i {display:block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--creation-accent)}
.creation-bottom {
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:20px;
  color:#8196a4;
  font-size:10px;
  line-height:1.6;
  letter-spacing:.2px;
}
.creation-bottom b {margin:0 9px;color:#b6cbd7;font-weight:400}
.creation-scroll-hint {display:none;align-items:center;gap:14px}
.creation-scroll-hint>span {color:#178dbd;font-size:20px;line-height:1}
.js .creation-journey.has-motion:not(.is-static):not(.is-flow) {height:370svh;min-height:2200px}
.js .creation-journey.has-motion:not(.is-static):not(.is-flow) .creation-sticky {
  position:sticky;
  top:var(--creation-top);
  height:calc(100svh - var(--creation-top));
  min-height:0;
}
.js .creation-journey.has-motion .creation-scroll-hint {display:inline-flex}
.creation-viewport-probe {position:absolute;top:0;left:0;width:0;height:100svh;visibility:hidden;pointer-events:none}
.creation-copy .creation-sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.creation-motion-controls {display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:14px}
.creation-motion-controls[hidden] {display:none}
.creation-motion-controls>span {max-width:255px;color:#607c8c;font-size:11px;line-height:1.5}
.creation-enable {
  min-height:44px;
  padding:10px 16px;
  border:1px solid #abd4e7;
  border-radius:999px;
  background:#fff;
  color:#09648d;
  font:inherit;
  font-size:12px;
  line-height:1.4;
  cursor:pointer;
}
.creation-enable span {margin-left:8px}
.creation-enable:hover {background:#edf9ff}
.creation-enable:focus-visible {outline:3px solid #169cce;outline-offset:3px}
.creation-journey.is-static,.creation-journey.is-flow {height:auto;min-height:0}
.creation-journey.is-static .creation-sticky,.creation-journey.is-flow .creation-sticky {position:relative;height:auto;min-height:0}
.creation-journey.is-static .creation-scroll-hint {display:none}
@media(min-width:1400px) {
  .creation-layout {gap:45px}
  .creation-visual {margin-right:-45px}
}
@media(min-width:801px) and (max-width:1080px) {
  .creation-layout {grid-template-columns:1fr 1fr;gap:24px}
  .creation-step h2 {font-size:44px;letter-spacing:-1.7px}
  .creation-lead {font-size:14px}
  .creation-actions .button {padding:11px 16px;font-size:12px;gap:11px}
  .creation-progress {gap:9px}
  .creation-progress li {font-size:9px}
  .creation-visual {margin-right:-22px}
}
@media(min-width:801px) and (max-height:760px) {
  .creation-layout {padding-top:20px;padding-bottom:14px}
  .creation-copy .eyebrow {margin-bottom:18px}
  .creation-step h2 {font-size:44px;letter-spacing:-1.8px;margin-bottom:17px}
  .creation-lead {font-size:14px;line-height:1.65}
  .creation-actions {margin-top:22px}
  .creation-progress {margin-top:27px}
  .creation-bottom {padding-bottom:15px}
}
@media(max-width:800px) {
  .creation-journey {--creation-top:88px;background:radial-gradient(ellipse at 56% 71%,#eaf7ff 0,#f7fcff 39%,#fff 77%)}
  .creation-sticky {min-height:0}
  .creation-layout {grid-template-columns:1fr;gap:8px;padding-top:20px;padding-bottom:0}
  .creation-copy {width:100%;max-width:580px;margin:0 auto}
  .creation-copy .eyebrow {margin-bottom:14px;font-size:9px;letter-spacing:1.1px}
  .creation-step h2 {margin-bottom:12px;font-size:clamp(34px,5.2vw,43px);line-height:1.07;letter-spacing:-1.55px}
  .creation-desktop-break {display:none}
  .creation-lead {max-width:500px;font-size:13px;line-height:1.6}
  .creation-actions {display:grid;grid-template-columns:1.12fr 1fr;gap:9px;max-width:390px;margin-top:18px}
  .creation-actions .button {min-width:0;min-height:44px;padding:10px 14px;gap:9px;font-size:12px;white-space:nowrap}
  .creation-progress {gap:10px;max-width:390px;margin-top:20px}
  .creation-progress li {padding-top:8px;font-size:9px;line-height:1.35}
  .creation-progress li span {margin-bottom:3px;font-size:9px}
  .creation-visual {width:100%;max-width:580px;height:clamp(300px,calc(100svh - var(--creation-top) - 345px),450px);margin:0 auto}
  .creation-frames {inset:0 0 28px}
  .creation-glow {inset:4% -10% 0}
  .creation-caption {bottom:1px;font-size:9px}
  .creation-bottom {justify-content:center;padding-top:5px;padding-bottom:13px;font-size:9px}
  .creation-bottom>span:first-child {display:none}
  .creation-scroll-hint {gap:10px}
  .creation-scroll-hint>span {font-size:17px}
  .creation-motion-controls {margin-top:12px}
  .creation-motion-controls>span {max-width:230px;font-size:10px}
  .js .creation-journey.has-motion:not(.is-static):not(.is-flow) {height:330svh;min-height:1800px}
}
@media(max-width:800px) and (max-height:780px) {
  .creation-layout {padding-top:12px;gap:8px}
  .creation-copy .eyebrow {margin-bottom:10px}
  .creation-step h2 {margin-bottom:10px;font-size:clamp(30px,4.7svh,39px)}
  .creation-lead {font-size:12.5px;line-height:1.55}
  .creation-actions {margin-top:12px}
  .creation-progress {margin-top:16px}
  .creation-visual {height:clamp(240px,calc(100svh - var(--creation-top) - 320px),390px)}
  .creation-bottom {padding-top:2px;padding-bottom:10px}
}
@media(max-width:370px) {
  .creation-copy .eyebrow {font-size:8px;letter-spacing:.9px}
  .creation-step h2 {font-size:31px;letter-spacing:-1.1px}
  .creation-lead {font-size:12.5px}
  .creation-actions {gap:7px}
  .creation-actions .button {padding:10px 9px;font-size:10.5px;gap:7px}
  .creation-progress {gap:7px}
  .creation-progress li {font-size:8.5px}
  .creation-caption {font-size:8.5px}
}
@media(prefers-reduced-motion:reduce) {
  .creation-step,.creation-progress li,.creation-progress li:before {transition:none}
}
/* JavaScript may explicitly enable motion; reduced/static mode never pins the scene. */

/* Short portrait screens give the character more room; the accessible summary remains. */
@media(max-width:800px) and (max-height:700px) and (orientation:portrait) {
  .creation-lead {display:none}
  .creation-visual {height:clamp(260px,calc(100svh - var(--creation-top) - 270px),390px)}
}