/* Landing correction: preserve the original white and orange Aion atmosphere.
   Only repair the observed section spacing, alignment and light-edge artifacts. */

/* The motion collection must lead naturally into the workflow. */
.landing-body #templates {
  padding-bottom: clamp(30px, 3vw, 48px);
}
.landing-body #workflow {
  padding-top: clamp(38px, 4vw, 62px);
}
.landing-body .center-action {
  margin-top: 22px;
}

/* The workflow headline, description and warm focus form one visual center. */
.landing-body .section-heading.workflow-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: min(900px, 100%);
  max-width: none;
  margin: 0 auto 38px;
  text-align: center;
}
.landing-body .workflow-heading > div { max-width: 800px; }
.landing-body .workflow-heading > p {
  max-width: 630px;
  margin: 0 auto;
  text-align: center;
}

/* Align the FAQ introduction with the vertical center of the questions. */
.landing-body .faq-section {
  align-items: center;
}

/* A restrained red reflection joins, but never replaces, the warm and white light. */
.landing-body .stage-halo {
  background:
    radial-gradient(ellipse at 24% 70%, rgba(255, 54, 65, .13), transparent 58%),
    radial-gradient(ellipse at 76% 26%, rgba(244, 241, 236, .1), transparent 62%),
    radial-gradient(ellipse at 84% 72%, rgba(var(--ember-rgb), .09), transparent 64%),
    radial-gradient(ellipse at 16% 68%, rgba(255, 116, 23, .088), transparent 60%);
}

/* Preserve the original CTA content and orbit rings; fade the background plane.
   The light is drawn on a larger, masked layer so it cannot end at the shell edge. */
.landing-body .final-cta {
  overflow: visible;
  background: none;
}
.landing-body .final-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -64px -12%;
  background:
    radial-gradient(ellipse 57% 55% at 48% 78%, rgba(255, 116, 23, .135), transparent 77%),
    radial-gradient(ellipse 48% 52% at 70% 24%, rgba(244, 241, 236, .055), transparent 78%),
    radial-gradient(ellipse 45% 49% at 82% 38%, rgba(var(--ember-rgb), .09), transparent 79%),
    radial-gradient(ellipse 36% 45% at 30% 64%, rgba(255, 49, 69, .07), transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 27%, transparent 94%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 27%, transparent 94%);
}
.landing-body .cta-orbit {
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 73% 65% at 50% 60%, #000 35%, transparent 96%);
  mask-image: radial-gradient(ellipse 73% 65% at 50% 60%, #000 35%, transparent 96%);
}

/* The original workflow and local-storage chapters retain their warm keylights.
   Only their rectangular background boundaries become a vertical feather. */
.landing-body .workflow-section {
  background: transparent;
  border-block: 0;
  overflow: visible;
  isolation: isolate;
}
.landing-body .workflow-section::after {
  content: "";
  position: absolute;
  inset: -76px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 88% 18%, rgba(255, 116, 23, .05), transparent 64%),
    radial-gradient(ellipse at 12% 85%, rgba(var(--ember-rgb), .045), transparent 68%),
    radial-gradient(ellipse at 62% 55%, rgba(255, 58, 67, .025), transparent 72%),
    linear-gradient(180deg, rgba(21, 19, 16, .83), rgba(12, 11, 10, .67));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 79%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 79%, transparent);
}
.landing-body .privacy-band {
  position: relative;
  isolation: isolate;
  background: transparent;
  border-block: 0;
}
.landing-body .privacy-band::before {
  content: "";
  position: absolute;
  inset: -58px 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 50%, rgba(255, 116, 23, .067), transparent 52%),
    radial-gradient(ellipse at 88% 78%, rgba(var(--ember-rgb), .06), transparent 61%),
    radial-gradient(ellipse at 70% 62%, rgba(244, 241, 236, .028), transparent 69%),
    linear-gradient(120deg, rgba(27, 23, 19, .88), rgba(14, 13, 12, .74));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 23%, #000 77%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 23%, #000 77%, transparent);
}

/* Retain a separator in the footer without a full-width sharp blade. */
.landing-body .footer-bottom {
  position: relative;
  border-top: 0;
}
.landing-body .footer-bottom::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244, 241, 236, .13), transparent);
}

@media (max-width: 1100px) {
  .landing-body .section-heading.workflow-heading {
    max-width: 740px;
    gap: 16px;
  }
}
@media (max-width: 767px) {
  .landing-body #templates { padding-bottom: 44px; }
  .landing-body #workflow { padding-top: 48px; }
  .landing-body .section-heading.workflow-heading { margin-bottom: 32px; }
  .landing-body .faq-section { align-items: start; }
  .landing-body .final-cta::after { inset: -32px -8%; }
}

/* Pixel-boundary repair: the hero atmosphere is a viewport-sized, all-edge
   feather, never a rectangle limited to the inner content shell. */
.landing-body .hero-layout-container::before {
  inset: -90px auto -115px 50%;
  width: calc(100vw + 180px);
  max-width: none;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 44% 56% at 27% 38%, rgba(255,116,23,.075), transparent 88%),
    radial-gradient(ellipse 40% 62% at 69% 52%, rgba(244,241,236,.055), transparent 89%),
    radial-gradient(ellipse 43% 60% at 75% 63%, rgba(var(--ember-rgb),.087), transparent 89%),
    radial-gradient(ellipse 36% 45% at 24% 74%, rgba(255,54,65,.039), transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 65% 67% at 50% 50%, #000 18%, transparent 98%);
  mask-image: radial-gradient(ellipse 65% 67% at 50% 50%, #000 18%, transparent 98%);
}
.landing-body .hero-layout-container::after {
  left: -9%;
  right: -9%;
  top: 11%;
  height: 79%;
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse 63% 56% at 50% 50%, #000 22%, transparent 97%);
  mask-image: radial-gradient(ellipse 63% 56% at 50% 50%, #000 22%, transparent 97%);
}

/* Put the workflow light around the actual headline; let it dissolve on
   all four sides, and let text remain legible over the original carbon. */
.landing-body .workflow-section::before {
  left: 50%;
  top: -152px;
  width: min(1420px, 100vw);
  height: 640px;
  transform: translateX(-50%);
  border-radius: 0;
  background:
    radial-gradient(ellipse 43% 47% at 50% 52%, rgba(255,116,23,.115), transparent 89%),
    radial-gradient(ellipse 37% 36% at 55% 55%, rgba(244,241,236,.026), transparent 93%),
    radial-gradient(ellipse 33% 44% at 75% 49%, rgba(var(--ember-rgb),.044), transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 25%, transparent 99%);
  mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 25%, transparent 99%);
}

/* Each workflow illustration mirrors the task described beneath it. */
.landing-body .step-visual {
  background:
    radial-gradient(ellipse 69% 62% at 51% 58%, rgba(255,116,23,.075), transparent 88%),
    radial-gradient(ellipse 59% 51% at 64% 21%, rgba(244,241,236,.034), transparent 90%),
    var(--surface-rest);
}
.landing-body .step-visual::before {
  pointer-events: none;
  background: radial-gradient(ellipse 57% 58% at 50% 50%, rgba(255,116,23,.09), transparent 96%);
}

/* Retire the old tag-wide illustration geometry within these four previews. */
.landing-body .step-visual div,
.landing-body .step-visual i {
  position: static;
  inset: auto;
  z-index: auto;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  display: block;
  place-items: normal;
  color: inherit;
  font: inherit;
  background: none;
  box-shadow: none;
  transform: none;
  opacity: 1;
}
.landing-body .step-visual i::after { content: none; }
.landing-body .step-visual span,
.landing-body .step-visual small,
.landing-body .step-visual b {
  position: static;
  z-index: auto;
  font: inherit;
  letter-spacing: normal;
  color: inherit;
}
.landing-body .step-visual .workflow-scene-picker,
.landing-body .step-visual .workflow-asset-demo,
.landing-body .step-visual .workflow-tune-demo,
.landing-body .step-visual .workflow-export-demo {
  position: relative;
  z-index: 1;
  width: calc(100% - 24px);
  max-width: 290px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(244,241,236,.12);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(31,28,25,.96), rgba(17,16,15,.98));
  box-shadow: 0 14px 28px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.035);
  color: #e5e0da;
  font: 500 10px/1.4 var(--font);
}
.landing-body .step-visual .workflow-demo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  margin-bottom: 12px;
}
.landing-body .step-visual .workflow-demo-heading > span {
  font-size: 10px;
  font-weight: 650;
  color: #f4f1ec;
}
.landing-body .step-visual .workflow-demo-heading > small {
  flex: none;
  color: #b0a69c;
  font: 500 8px/1.4 var(--mono);
}
.landing-body .step-visual .workflow-cdn-media {
  display: block;
  background-color: #342b23;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid rgba(244,241,236,.18);
  border-radius: 4px;
}

/* 01 — a library of genuinely different scene arrangements, with one selected. */
.landing-body .step-visual .workflow-scene-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
}
.landing-body .step-visual .workflow-scene-choice {
  overflow: hidden;
  border: 1px solid rgba(244,241,236,.1);
  border-radius: 7px;
  background: #151311;
}
.landing-body .step-visual .workflow-scene-choice.is-selected {
  border-color: rgba(255,155,77,.75);
  background: #23180f;
  box-shadow: 0 0 15px rgba(255,116,23,.07);
}
.landing-body .step-visual .workflow-scene-preview {
  position: relative;
  height: 96px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 52%, rgba(244,241,236,.045), transparent 75%);
}
.landing-body .step-visual .workflow-scene-preview .workflow-cdn-media {
  position: absolute;
  width: 25px;
  height: 37px;
  left: 50%;
  top: 50%;
  box-shadow: 0 4px 8px #0005;
}
.landing-body .step-visual [data-layout="orbit"] .workflow-cdn-media:nth-child(1) {
  transform: translate(-112%,-31%) rotate(-17deg);
}
.landing-body .step-visual [data-layout="orbit"] .workflow-cdn-media:nth-child(2) {
  z-index: 1;
  transform: translate(-50%,-70%);
}
.landing-body .step-visual [data-layout="orbit"] .workflow-cdn-media:nth-child(3) {
  transform: translate(12%,-25%) rotate(17deg);
}
.landing-body .step-visual [data-layout="grid"] .workflow-scene-preview {
  display: grid;
  grid-template-columns: repeat(2,18px);
  grid-template-rows: repeat(2,26px);
  place-content: center;
  gap: 4px;
}
.landing-body .step-visual [data-layout="grid"] .workflow-cdn-media {
  position: static;
  width: 18px;
  height: 26px;
  transform: none;
  border-radius: 3px;
}
.landing-body .step-visual [data-layout="ribbon"] .workflow-cdn-media {
  width: 21px;
  height: 43px;
  top: 50%;
}
.landing-body .step-visual [data-layout="ribbon"] .workflow-cdn-media:nth-child(1) {
  transform: translate(-155%,-40%) rotate(-12deg);
}
.landing-body .step-visual [data-layout="ribbon"] .workflow-cdn-media:nth-child(2) {
  transform: translate(-50%,-50%) rotate(-12deg);
}
.landing-body .step-visual [data-layout="ribbon"] .workflow-cdn-media:nth-child(3) {
  transform: translate(55%,-60%) rotate(-12deg);
}
.landing-body .step-visual .workflow-scene-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  padding: 7px 5px;
  border-top: 1px solid rgba(244,241,236,.08);
  color: #c4bbb2;
  font-size: 8px;
}
.landing-body .step-visual .is-selected .workflow-scene-label { color: #ffd0a6; }
.landing-body .step-visual .workflow-scene-check {
  flex: none;
  color: #ffad66;
  font: 700 10px/1 var(--font);
}

/* 02 — import assets, order the sequence, then choose its backdrop. */
.landing-body .step-visual .workflow-asset-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.landing-body .step-visual .workflow-asset-grid .workflow-cdn-media {
  position: relative;
  width: 100%;
  height: 68px;
  border-radius: 6px;
}
.landing-body .step-visual .workflow-add-asset {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 68px;
  border: 1px dashed rgba(255,173,102,.35);
  border-radius: 6px;
  color: #ffad66;
  background: rgba(255,116,23,.045);
  font-size: 22px;
  font-weight: 400;
}
.landing-body .step-visual .workflow-sequence,
.landing-body .step-visual .workflow-background {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.landing-body .step-visual .workflow-sequence {
  padding-bottom: 9px;
  margin-bottom: 9px;
  border-bottom: 1px solid rgba(244,241,236,.08);
}
.landing-body .step-visual .workflow-sequence > span,
.landing-body .step-visual .workflow-background > span { color: #b9afa5; }
.landing-body .step-visual .workflow-sequence-items {
  display: flex;
  align-items: center;
  gap: 4px;
}
.landing-body .step-visual .workflow-sequence-items b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border: 1px solid rgba(255,173,102,.22);
  border-radius: 4px;
  background: rgba(255,116,23,.09);
  color: #f1c5a0;
  font: 500 8px/1 var(--mono);
}
.landing-body .step-visual .workflow-background-swatches,
.landing-body .step-visual .workflow-color-chips {
  display: flex;
  align-items: center;
  gap: 7px;
}
.landing-body .step-visual .workflow-background-swatches i,
.landing-body .step-visual .workflow-color-chips i {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(244,241,236,.2);
  border-radius: 50%;
  background: #201a15;
}
.landing-body .step-visual .workflow-background-swatches i:nth-child(2) { background: #ece5dc; }
.landing-body .step-visual .workflow-background-swatches i:nth-child(3) { background: #683116; }
.landing-body .step-visual .workflow-background-swatches i.is-selected,
.landing-body .step-visual .workflow-color-chips i.is-selected {
  outline: 1px solid #ffad66;
  outline-offset: 2px;
}

/* 03 — motion and typography controls above a visible scrub timeline. */
.landing-body .step-visual .workflow-tune-demo .workflow-demo-heading { margin-bottom: 8px; }
.landing-body .step-visual .workflow-control-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 5px 8px;
  margin-bottom: 8px;
}
.landing-body .step-visual .workflow-control-row > span,
.landing-body .step-visual .workflow-color-row > span,
.landing-body .step-visual .workflow-type-row > span { color: #b9afa5; }
.landing-body .step-visual .workflow-control-row > b {
  color: #f1c5a0;
  font: 500 9px/1.4 var(--mono);
}
.landing-body .step-visual .workflow-control-track {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 4px;
  background: #3b332d;
}
.landing-body .step-visual .workflow-control-track i {
  position: relative;
  width: var(--control-value);
  height: 3px;
  border-radius: inherit;
  background: #f28a3e;
}
.landing-body .step-visual .workflow-control-track i::after {
  content: "";
  position: absolute;
  inset: 50% -3px auto auto;
  width: 7px;
  height: 7px;
  border: 1px solid #ffc28e;
  border-radius: 50%;
  background: #f28a3e;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #241b14;
}
.landing-body .step-visual .workflow-color-row,
.landing-body .step-visual .workflow-type-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  margin-top: 6px;
}
.landing-body .step-visual .workflow-color-chips,
.landing-body .step-visual .workflow-type-row b { margin-left: auto; }
.landing-body .step-visual .workflow-color-chips i { width: 12px; height: 12px; }
.landing-body .step-visual .workflow-color-chips i:nth-child(1) { background: #f28a3e; }
.landing-body .step-visual .workflow-color-chips i:nth-child(2) { background: #ece5dc; }
.landing-body .step-visual .workflow-color-chips i:nth-child(3) { background: #74695f; }
.landing-body .step-visual .workflow-type-row b { color: #f4f1ec; font-size: 14px; }
.landing-body .step-visual .workflow-type-row small { color: #b9afa5; font-size: 8px; }
.landing-body .step-visual .workflow-timeline {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(244,241,236,.1);
}
.landing-body .step-visual .workflow-timeline-ruler {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #a99e93;
  font: 500 7px/1 var(--mono);
}
.landing-body .step-visual .workflow-timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.35fr .85fr;
  gap: 3px;
  height: 12px;
}
.landing-body .step-visual .workflow-timeline-clip {
  height: 12px;
  border: 1px solid rgba(255,173,102,.3);
  border-radius: 3px;
  background: rgba(255,116,23,.22);
}
.landing-body .step-visual .workflow-timeline-clip:nth-child(2) { background: rgba(255,116,23,.35); }
.landing-body .step-visual .workflow-timeline-playhead {
  position: absolute;
  left: 33.333%;
  top: -4px;
  bottom: -3px;
  width: 1px;
  background: #f4f1ec;
}
.landing-body .step-visual .workflow-timeline-playhead::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -2px;
  width: 5px;
  height: 5px;
  background: #f4f1ec;
  clip-path: polygon(0 0,100% 0,50% 100%);
}

/* 04 — delivery settings and a render-ready state, without unrelated photos. */
.landing-body .step-visual .workflow-export-demo .workflow-demo-heading { margin-bottom: 6px; }
.landing-body .step-visual .workflow-export-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 29px;
  border-bottom: 1px solid rgba(244,241,236,.075);
}
.landing-body .step-visual .workflow-export-row > span { color: #b9afa5; font-size: 9px; }
.landing-body .step-visual .workflow-export-row > b {
  flex: none;
  color: #ece5dc;
  font: 500 9px/1.4 var(--mono);
}
.landing-body .step-visual .workflow-format-options {
  display: flex;
  align-items: center;
  gap: 3px;
}
.landing-body .step-visual .workflow-format-options b {
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a99e93;
  font-size: 8px;
}
.landing-body .step-visual .workflow-format-options b.is-selected {
  border-color: rgba(255,173,102,.3);
  color: #ffd0a6;
  background: rgba(255,116,23,.12);
}
.landing-body .step-visual .workflow-export-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  padding: 7px 10px;
  border: 1px solid rgba(255,173,102,.3);
  border-radius: 6px;
  color: #16110c;
  background: linear-gradient(110deg,#ffad66,#f28a3e);
  box-shadow: inset 0 1px rgba(255,255,255,.15);
}
.landing-body .step-visual .workflow-export-action span { font-size: 10px; font-weight: 700; }
.landing-body .step-visual .workflow-export-action b { font-size: 14px; line-height: 1; }
.landing-body .step-visual .workflow-export-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  color: #b9afa5;
  font-size: 8px;
}
.landing-body .step-visual .workflow-export-status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffad66;
}
@media (max-width: 767px) {
  .landing-body .step-visual .workflow-scene-picker,
  .landing-body .step-visual .workflow-asset-demo,
  .landing-body .step-visual .workflow-tune-demo,
  .landing-body .step-visual .workflow-export-demo { max-width: 310px; }
}

/* Carry the final CTA's warmth continuously into the footer without a
   rectangular section edge, while keeping the original orbit and typography. */
.landing-body .final-cta::after {
  inset: -140px auto -165px 50%;
  width: calc(100vw + 150px);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 43% 54% at 48% 58%, rgba(255,116,23,.11), transparent 88%),
    radial-gradient(ellipse 45% 50% at 71% 31%, rgba(var(--ember-rgb),.08), transparent 91%),
    radial-gradient(ellipse 44% 43% at 32% 66%, rgba(244,241,236,.032), transparent 93%);
  -webkit-mask-image: radial-gradient(ellipse 64% 63% at 50% 50%, #000 18%, transparent 98%);
  mask-image: radial-gradient(ellipse 64% 63% at 50% 50%, #000 18%, transparent 98%);
}
.landing-body .site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 50%;
  top: -160px;
  width: calc(100vw + 120px);
  height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 55% 55% at 50% 18%, rgba(255,116,23,.04), transparent 94%);
  -webkit-mask-image: radial-gradient(ellipse 67% 65% at 50% 40%, #000 10%, transparent 99%);
  mask-image: radial-gradient(ellipse 67% 65% at 50% 40%, #000 10%, transparent 99%);
}
@media (max-width: 767px) {
  .landing-body .section-heading.workflow-heading { max-width: 100%; }
  .landing-body .hero-layout-container::before { width: calc(100vw + 120px); }
}