/* Screenshot-led introduction. Existing galleries and tool surfaces stay isolated. */
.landing-page .hero-cover-sequence{background:var(--color-page)}
.landing-page .public-header .header-inner{max-width:1620px;margin-inline:auto}
/* Reserve the wordmark footprint so its reveal never pushes the navigation. */
@media(hover:hover) and (pointer:fine) and (min-width:851px){
  .landing-page .public-header .intro-brand{position:relative;width:176px;height:44px;gap:0}
  .landing-page .intro-brand .brand-mark{position:absolute;left:0;transition:opacity .3s,transform .55s cubic-bezier(.22,1,.36,1)}
  .landing-page .intro-brand .brand-wordmark{display:block;position:absolute;left:0;white-space:nowrap;opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-8px);filter:blur(4px);transition:clip-path .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1),opacity .35s,filter .45s}
  .landing-page .intro-brand .brand-wordmark small{transform:translateX(-8px);transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .landing-page .intro-brand:is(:hover,:focus-visible) .brand-mark{opacity:0;transform:rotate(-35deg) scale(.65)}
  .landing-page .intro-brand:is(:hover,:focus-visible) .brand-wordmark{opacity:1;clip-path:inset(0);transform:translateX(0);filter:blur(0)}
  .landing-page .intro-brand:is(:hover,:focus-visible) .brand-wordmark small{transform:translateX(0);transition-delay:.08s}
}
.landing-page .intro-hero{position:relative;z-index:0;display:flex;flex-direction:column;align-items:center;min-height:640px;height:100svh;padding:clamp(130px,20svh,280px) 0 26px;background:var(--color-surface);overflow:clip}
.landing-page .intro-heading{width:min(680px,calc(100% - 40px));text-align:center;transition:opacity .5s}
.landing-page .intro-heading h1{font-size:clamp(38px,3.5vw,64px);font-weight:800;line-height:1.08;letter-spacing:-.055em}
.landing-page .intro-line{display:block;overflow:hidden;padding:0 .08em .12em}
.landing-page .intro-line>span{display:block;animation:intro-type-in 1s cubic-bezier(.16,1,.3,1) both}
.landing-page .intro-line:nth-child(2)>span{animation-delay:.12s}
.landing-page .intro-heading h1 em{font-style:normal;margin-left:.08em;color:var(--color-accent-deep)}
.landing-page .intro-description{max-width:370px;margin:14px auto 0;font-size:13px;line-height:1.75;color:var(--color-text-secondary);text-wrap:balance;animation:intro-copy-in .8s .32s both}
.landing-page .intro-explore{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;margin-top:10px;font-size:var(--text-caption);color:var(--color-accent-deep);animation:intro-copy-in .8s .45s both}
.landing-page .intro-explore .material-symbols-outlined{font-size:16px;transition:transform .3s}
.landing-page .intro-explore:hover .material-symbols-outlined{transform:translateY(3px)}
.landing-page .intro-featured{width:min(1620px,calc(100% - clamp(40px,12vw,180px)));margin-top:auto;padding-top:28px;container-type:inline-size}
.landing-page .intro-featured-title{margin-bottom:14px;text-align:center;color:var(--color-text-secondary);font-size:var(--text-caption);font-weight:500;letter-spacing:normal;transition:opacity .3s}
/* Fixed baseline: cards expand upward, without moving either section boundary. */
.landing-page .intro-preview-grid{--preview-gap:clamp(12px,1vw,24px);display:flex;align-items:flex-end;gap:var(--preview-gap);height:calc((100cqw - 5*var(--preview-gap))/6 + 24px);perspective:1200px}
.landing-page .intro-preview{position:relative;display:block;min-width:0;flex:var(--preview-grow,1) 1 0px;transition:flex-grow .65s cubic-bezier(.22,1,.36,1);animation:intro-preview-in .95s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.42s + var(--preview-order,0)*.065s)}
.landing-page .intro-preview:nth-child(2){--preview-order:1;--preview-angle:2deg}
.landing-page .intro-preview:nth-child(3){--preview-order:2;--preview-angle:-1deg}
.landing-page .intro-preview:nth-child(4){--preview-order:3;--preview-angle:1.5deg}
.landing-page .intro-preview:nth-child(5){--preview-order:4;--preview-angle:-2deg}
.landing-page .intro-preview:nth-child(6){--preview-order:5;--preview-angle:1deg}
.landing-page .intro-preview-media{display:block;aspect-ratio:1;padding:4px;border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface);box-shadow:var(--shadow-surface);backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .4s}
.landing-page .intro-preview-media img{width:100%;height:100%;border-radius:var(--radius-control);object-fit:contain;object-position:center}
.landing-page .intro-preview-caption{display:block;margin-top:8px;font-size:var(--text-caption);font-weight:500;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-secondary)}
@media(hover:hover) and (pointer:fine) and (min-width:851px){
  .landing-page :where(.intro-preview-grid:has(>.intro-preview:is(:hover,:focus-visible)))>.intro-preview{--preview-grow:.74}
  .landing-page .intro-preview-grid>.intro-preview:has(+.intro-preview:is(:hover,:focus-visible)),.landing-page .intro-preview-grid>.intro-preview:is(:hover,:focus-visible)+.intro-preview{--preview-grow:1.02}
  .landing-page .intro-preview-grid>.intro-preview:is(:hover,:focus-visible){--preview-grow:1.9;z-index:2}
  .landing-page .intro-preview:is(:hover,:focus-visible) .intro-preview-media{background:var(--color-surface)}
  .landing-page .intro-hero:has(.intro-preview:is(:hover,:focus-visible)) .intro-heading{opacity:.28}
  .landing-page .intro-featured:has(.intro-preview:is(:hover,:focus-visible)) .intro-featured-title{opacity:0}
}
.landing-page .intro-preview:focus-visible .intro-preview-media{background:var(--color-surface)}

/* The three circles are real category links, not a raster illustration. */
.landing-page .workflow-intro{--workflow-top:clamp(94px,8.5svh,116px);--workflow-title-space:132px;--workflow-diagram-gap:clamp(24px,3svh,40px);--circle-size:min(25vw,315px,max(80px,calc((100cqh - var(--workflow-title-space) - var(--workflow-diagram-gap))/1.635)));position:relative;z-index:2;min-height:640px;background:transparent}
.landing-page .intro-nav-edge{position:absolute;top:var(--workflow-top);left:0;width:1px;height:1px;pointer-events:none}
.landing-page .workflow-sticky{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:clamp(20px,3svh,40px);min-height:640px;height:100svh;padding:clamp(80px,8svh,108px) 0 20px}
/* Reserve the bottom row for partners; all three diagram poses fit above it. */
.landing-page .workflow-composition{container-type:size;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0 20px clamp(16px,3svh,40px)}
.landing-page .workflow-sticky .partner-inner{row-gap:14px;padding:8px 0}
.landing-page .workflow-intro.is-motion-active{height:340svh}
.landing-page .workflow-intro.is-motion-active .workflow-sticky{position:sticky;top:0}
.landing-page #workflow-intro-title{text-align:center;font-size:clamp(32px,3.6vw,56px);font-weight:800;line-height:1.08;letter-spacing:-.05em}
.landing-page #workflow-intro-title>span{--title-entry:var(--workflow-heading-entry,1);display:block;opacity:var(--title-entry);transform:translate3d(0,calc((1 - var(--title-entry))*36px),0);filter:blur(calc((1 - var(--title-entry))*6px))}
.landing-page #workflow-intro-title>span+span{--title-entry:var(--workflow-subheading-entry,1);margin-top:6px;color:var(--color-text-primary)}
.landing-page .workflow-circles{position:relative;flex-shrink:0;width:min(100%,calc(var(--circle-size)*2.82));height:var(--workflow-diagram-height,var(--circle-size));margin:var(--workflow-diagram-gap) auto 0;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Transparent interiors keep every outline visible where the circles overlap. */
.landing-page .workflow-circle{position:absolute;top:0;left:50%;display:grid;place-items:center;width:var(--circle-size);height:var(--circle-size);border:1px solid var(--color-text-primary);border-radius:50%;background:transparent;color:var(--color-text-primary);box-shadow:none;transform:translate3d(-50%,0,0) translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0) scale(var(--orbit-scale,1));opacity:var(--orbit-opacity,1);filter:blur(var(--orbit-blur,0px))}
.landing-page .workflow-circle:focus-visible{opacity:1;filter:none;outline-color:var(--color-text-primary)}
.landing-page [data-workflow-circle="design"]{--orbit-x:-86%}
.landing-page [data-workflow-circle="operations"]{--orbit-x:86%}
.landing-page .workflow-circle-label{display:grid;justify-items:center;gap:12px;min-width:70px;transform:translateY(var(--orbit-label-y,0px));transition:transform .35s cubic-bezier(.22,1,.36,1)}
.landing-page .workflow-circle strong{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:normal}
.landing-page .workflow-icon.material-symbols-outlined{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--color-text-primary);border-radius:50%;background:transparent;color:var(--color-text-primary);font-size:24px;transition:transform .4s}
.landing-page .workflow-circle:hover,.landing-page .workflow-circle:focus-visible{z-index:4;border-color:var(--color-text-primary)}
.landing-page .workflow-circle:hover .workflow-circle-label{transform:translateY(calc(var(--orbit-label-y,0px) - 3px))}
.landing-page .workflow-circle:hover .workflow-icon{transform:rotate(-7deg)}
.landing-page .workflow-progress{position:absolute;top:46%;left:max(24px,calc((100% - 1620px)/2));width:1px;height:100px;background:var(--color-border)}
.landing-page .workflow-progress>span{display:block;width:100%;height:100%;background:var(--color-text-primary);transform:scaleY(var(--workflow-progress,.03));transform-origin:top}

/* Desktop only: three stable poses on a short track, interpolated by the compositor. */
@media(min-width:851px){
  .landing-page.intro-steps-ready .header-inner{transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .24s .1s ease}
  .landing-page .workflow-intro.is-step-active{height:calc(max(100svh,640px) + 320px)}
  .landing-page .is-step-active .workflow-circle{filter:none;will-change:transform,opacity;transition:transform .66s cubic-bezier(.22,1,.36,1),opacity .42s ease}
  .landing-page .is-step-active .workflow-circles{transition:height .66s cubic-bezier(.22,1,.36,1)}
  .landing-page .is-step-active #workflow-intro-title>span{filter:none;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}
  .landing-page .is-step-active .workflow-progress>span{transition:transform .66s cubic-bezier(.22,1,.36,1)}
}

@keyframes intro-type-in{from{opacity:0;transform:translateY(108%);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes intro-copy-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-preview-in{from{opacity:0;transform:translateY(44px) rotateX(8deg) rotate(var(--preview-angle,-2deg))}to{opacity:1;transform:translateY(0) rotateX(0) rotate(0)}}

@media(max-width:850px){
  .landing-page .intro-hero{padding-top:clamp(128px,19svh,180px)}
  .landing-page .intro-preview-grid{display:grid;height:auto;align-items:start;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .landing-page .intro-featured{width:min(540px,calc(100% - 40px))}
  .landing-page .intro-preview-media{aspect-ratio:1.35}
  .landing-page .intro-preview-caption{font-size:var(--text-caption);margin-top:5px;white-space:normal;overflow:visible;text-overflow:clip}
  .landing-page .workflow-intro{--circle-size:min(33vw,240px,max(80px,calc((100cqh - var(--workflow-title-space) - var(--workflow-diagram-gap))/1.635)))}
  .landing-page .workflow-circle strong{font-size:15px}
  .landing-page .workflow-progress{left:18px;height:70px}
}
@media(max-width:520px){
  .landing-page .intro-hero{min-height:680px;padding-top:clamp(112px,17svh,160px);padding-bottom:22px}
  .landing-page .intro-heading h1{font-size:clamp(31px,8.3vw,40px);line-height:1.16;letter-spacing:-.065em}
  .landing-page .intro-description{max-width:290px;margin-top:12px;font-size:12px}
  .landing-page .intro-featured{width:calc(100% - 32px);padding-top:24px}
  .landing-page .intro-featured-title{margin-bottom:10px;font-size:var(--text-caption)}
  .landing-page .intro-preview-grid{gap:12px 10px}
  .landing-page .intro-preview-media{aspect-ratio:1;padding:3px;border-radius:var(--radius-control)}
  .landing-page .intro-preview-media img{border-radius:var(--radius-control)}
  .landing-page .workflow-intro{--circle-size:min(33vw,170px,max(80px,calc((100cqh - var(--workflow-title-space) - var(--workflow-diagram-gap))/1.635)));--workflow-title-space:88px;--workflow-top:clamp(100px,14svh,140px);min-height:560px}
  .landing-page .workflow-sticky{min-height:560px}
  .landing-page .workflow-composition{padding-inline:12px}
  .landing-page .workflow-intro.is-motion-active{height:320svh}
  .landing-page #workflow-intro-title{font-size:clamp(27px,7vw,34px);line-height:1.2}
  .landing-page .workflow-circle-label{min-width:0;gap:9px}
  .landing-page .workflow-circle strong{font-size:14px;letter-spacing:0}
  .landing-page .workflow-icon.material-symbols-outlined{width:36px;height:36px;font-size:19px}
  .landing-page .workflow-progress{top:45%;bottom:auto;left:18px;height:50px}
  .landing-page[data-lang="en"] .workflow-circle strong{font-size:var(--text-caption)}
}
@media(max-width:380px){
  .landing-page .workflow-circle-label{gap:7px}
  .landing-page .workflow-icon.material-symbols-outlined{width:32px;height:32px;font-size:18px}
  .landing-page .public-header .public-brand{gap:7px}
  .landing-page .public-header .public-brand strong{font-size:14px}
  .landing-page .public-header .brand-mark{width:32px;height:32px;font-size:21px}
  .landing-page .public-header .public-button.compact{padding-inline:8px}
}
@media(max-height:600px) and (min-width:851px){
  .landing-page .intro-hero{position:relative;min-height:600px;padding-top:120px}
  .landing-page .workflow-intro{--workflow-top:76px;--workflow-title-space:76px}
  .landing-page #workflow-intro-title{font-size:32px}
  .landing-page .workflow-sticky{min-height:560px}
}
@media(prefers-reduced-motion:reduce){
  .landing-page .intro-line>span,.landing-page .intro-description,.landing-page .intro-explore,.landing-page .intro-preview{animation:none!important}
  .landing-page .intro-heading,.landing-page .intro-featured-title{opacity:1!important;transition:none}
  .landing-page .intro-preview-grid>.intro-preview{flex-grow:1!important;transition:none}
  .landing-page .intro-brand .brand-mark,.landing-page .intro-brand .brand-wordmark,.landing-page .intro-brand .brand-wordmark small{transition:none}
  .landing-page .workflow-intro.is-motion-active{height:auto}
  .landing-page .workflow-intro.is-motion-active .workflow-sticky{position:relative}
  .landing-page #workflow-intro-title>span{opacity:1;transform:none;filter:none}
  .landing-page .workflow-circle{opacity:1;filter:none}
  .landing-page .workflow-progress{display:none}
}