/* Product-led revision. Account layouts remain in their own stylesheet. */
:root{--ink:#111216;--paper:#f5f5f3;--silver:#bcc1c7;--muted:#68686d}
body{background:var(--paper)}
.site-header{color:#fff;border-bottom-color:#ffffff14;background:#11121666}
.desktop-nav{color:#c1c1c5}.desktop-nav a:hover{color:#fff}
.version-label{border-color:#515258;color:#c1c1c5}
.site-header .button-header{background:var(--orange);color:#28190f;border-color:#ff9e63;box-shadow:inset 0 1px 0 #ffffff50}
.site-header .profile-menu .profile-menu-trigger{border-color:#ffffff55}
.site-header.is-light{color:var(--ink);background:#ffffffed;border-bottom-color:#dededd}
.site-header.is-light .button-header{background:var(--orange);color:#28190f;border-color:#ff9e63}
.site-header .button-header:hover{background:#ff914f}
.site-header.is-light .desktop-nav{color:#68686d}.site-header.is-light .desktop-nav a:hover{color:var(--ink)}
.site-header.is-light .profile-menu .profile-menu-trigger{border-color:#bdbdc1}
.site-header.is-light .version-label{color:#68686d;border-color:#c9c9cc}
.mobile-nav{background:#fff;border-bottom-color:#dededd}
.hero{background:#111216;color:#fff;isolation:isolate}
.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 80% 49%,#ffffff07,transparent 58%);pointer-events:none}
.hero-inner{grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:8px;max-width:1580px;padding-top:18px;padding-bottom:0}
.hero-copy{padding-bottom:25px;container-type:inline-size}.hero h1{font-size:clamp(58px,5.6vw,86px);letter-spacing:-.065em;font-weight:560;line-height:1.04}
.hero-title-line{display:block;white-space:nowrap;font-size:min(1em,15cqi)}.hero-accent{color:var(--orange)}
.hero .hero-lead{color:#c5c5c9;font-size:clamp(13px,4.5cqi,23px);font-weight:440;line-height:1.45;letter-spacing:-.02em;white-space:nowrap;max-width:none;margin:26px 0 0}
.hero .hero-actions{gap:12px;margin-top:34px;max-width:452px;flex-wrap:nowrap}
.hero .hero-actions .button{flex:1;min-width:0;width:220px;min-height:56px;justify-content:flex-start;padding-inline:20px;gap:11px}
.hero .hero-actions .external-icon{margin-left:auto}
.hero .button-secondary{color:#f8f8f9;border-color:#68696f;background:#ffffff05;box-shadow:inset 0 1px 0 #ffffff0d}
.hero .button-secondary:hover{background:#ffffff12;border-color:#a2a3a8}
.hero .figma-mark{display:grid}.hero .button-orange{color:#28190f}
.hero .scroll-cue{color:#dedee4;min-height:82px;padding:14px 18px 26px;gap:13px;font-size:12px;font-weight:500;letter-spacing:-.01em}
.hero .scroll-cue i{width:40px;height:40px;border:1px solid #74757d;border-radius:50%;background:#ffffff08;box-shadow:inset 0 1px 0 #ffffff0d;transition:background .2s,border-color .2s}
.hero .scroll-cue i:before{content:'';position:absolute;left:18px;top:10px;width:1.5px;height:17px;background:currentColor}
.hero .scroll-cue i:after{left:14.5px;top:18px;bottom:auto;width:8px;height:8px;border-width:1.5px;transform:rotate(45deg)}
.hero .scroll-cue:hover,.hero .scroll-cue:focus-visible{color:#ff964f}
.hero .scroll-cue:hover i,.hero .scroll-cue:focus-visible i{transform:none;background:#ff762713;border-color:#ff964f}
.hero.has-scrolled .scroll-cue{opacity:1}
.demo-fallback{color:#b8b8bd}
.workflow{background:var(--paper);padding-block:112px 100px}
.workflow-heading{margin-bottom:48px;align-items:center}.workflow-heading h2{max-width:760px}
.workflow-grid{gap:36px;padding-bottom:12px}
.workflow-step{display:flex;flex-direction:column;align-items:center;padding:0;border:0}
.workflow-art{height:300px;width:100%;margin:0 0 24px;isolation:isolate}
.workflow-art:after{content:'';position:absolute;width:66%;height:20px;bottom:25px;left:17%;background:#11121617;filter:blur(13px);border-radius:50%;z-index:0}
.workflow-art>img{width:330px;height:330px;max-width:110%;object-fit:contain;transition:transform .65s cubic-bezier(.2,.75,.3,1)}
.step-heading{flex-direction:column;text-align:center;gap:22px;margin-top:0;position:relative;width:100%}
.step-heading>.step-number{position:relative;background:var(--paper);border:1px solid #bdbdc1;width:43px;height:43px;border-radius:50%;font-size:13px;font-weight:550;letter-spacing:-.03em;box-shadow:0 0 0 10px var(--paper);transition:background .3s,color .3s,border-color .3s}
.step-heading h3{font-size:clamp(21px,2vw,28px);line-height:1.17;max-width:235px;letter-spacing:-.045em;font-weight:550}
.workflow-grid[data-trace-step="0"] .workflow-step:nth-of-type(1) .step-number,.workflow-grid[data-trace-step="1"] .workflow-step:nth-of-type(2) .step-number,.workflow-grid[data-trace-step="2"] .workflow-step:nth-of-type(3) .step-number{background:#111216;border-color:#111216;color:#fff;box-shadow:0 0 0 6px var(--paper),0 0 0 7px #bdbdc1}
.workflow-rail{display:block;left:16.67%;width:66.66%;height:1px;top:345px;background:#cdcdce}
.workflow-rail i{height:2px;background:#ff7627}
.workflow-packet{display:block;width:11px;height:11px;border:2px solid var(--paper);background:#ff7627;border-radius:50%;top:340px;font-size:0;box-shadow:0 0 0 4px #ff762724;transform:translateX(-50%);z-index:3}
.workflow-scan{top:calc(50px + var(--scan-progress)*180px);left:24%;width:52%}
.workflow-file-label{bottom:30px}.workflow-layers i:nth-child(1){left:14%;top:47px}.workflow-layers i:nth-child(2){right:11%;top:132px}.workflow-layers i:nth-child(3){left:24%;bottom:38px}
.video-section{background:#fff;border-color:#e3e3e1}
.video-card{border-color:#11121620;box-shadow:0 24px 60px -35px #11121670}
.canvas-section{background:#18191c;padding-block:104px;color:#f8f8f9}
.canvas-section .section-heading{align-items:center;position:relative}
.canvas-play{color:#dedee1;border:1px solid #68696f;background:#ffffff05;border-radius:99px;min-height:42px;padding:10px 18px;font-size:12px;white-space:nowrap}
.canvas-play:before{content:'';display:inline-block;vertical-align:-1px;width:7px;height:10px;margin-right:9px;border-inline:2px solid currentColor}
.canvas-play[aria-pressed="false"]:before{border:0;width:0;height:0;border-block:5px solid transparent;border-left:7px solid currentColor}
.canvas-play:hover{background:#ffffff10;border-color:#a2a3a8}
.canvas-workspace{position:relative;border-color:#9b9ca1;background:#e8e8e6;color:#44444b;box-shadow:0 28px 70px #00000066}
.canvas-workspace:after{content:'';position:absolute;bottom:0;left:0;width:var(--demo-progress,0%);height:3px;background:#ff9d63}
.canvas-body{min-height:400px}.canvas-stage{padding-block:54px 78px;background-color:#e8e8e6;background-image:radial-gradient(#b9b9b7 .65px,transparent .65px)}
.canvas-chrome{background:#fff;border-color:#d4d4d3}.canvas-layers{background:#fafafa;border-color:#d4d4d3}
.canvas-properties{color:#505057;background:#fff;border-color:#c8c8cb}
.canvas-page{transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .9s;transform:translateY(14px) rotate(-2deg);box-shadow:0 12px 25px #11121620;border-color:#b8b8bb;background:#f5f2e9}
.canvas-in-view .canvas-page{transform:translateY(0) rotate(0)}
.canvas-content{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:10px;transition:grid-template-columns .75s,gap .75s,padding .75s}
.canvas-content>div{min-width:0}
.editable-heading strong{font-size:clamp(22px,2vw,30px);min-height:3.3em;line-height:1.08;letter-spacing:-.05em}
.editable-heading strong>span{display:block}.editable-heading strong>span:first-child{min-height:1.08em}
.editable-image{height:178px;transition:background .6s,border-radius .6s,transform .75s}
.canvas-lamp-base,.canvas-lamp-stem,.canvas-lamp-shade{transition:opacity .55s,transform .6s}
.canvas-vase{position:absolute;inset:0;opacity:0;transform:translateY(9px) scale(.9);transition:opacity .55s,transform .65s}
.canvas-vase:before{content:'';position:absolute;left:22%;bottom:15%;width:62%;height:7%;border-radius:50%;background:#25252938;filter:blur(5px)}
.canvas-vase i{position:absolute;left:28%;bottom:18%;width:49%;height:53%;border-radius:23% 23% 42% 42%/18% 18% 65% 65%;background:linear-gradient(100deg,#85868a,#f8f8f8 29%,#eeeeef 59%,#9d9ea2);box-shadow:inset -5px -3px 12px #45454b24,2px 4px 4px #25252918}
.canvas-vase b{position:absolute;left:29%;top:24%;width:47%;height:12%;border-radius:50%;background:radial-gradient(ellipse,#35363a 0%,#65666b 44%,#e8e8e9 50%,#fff 73%,#aeb0b5 100%);border:1px solid #dddde0}
.canvas-workspace[data-image-changed="true"] .editable-image{background:#dededb;border-radius:4px}
.canvas-workspace[data-image-changed="true"] :is(.canvas-lamp-base,.canvas-lamp-stem,.canvas-lamp-shade){opacity:0;transform:translateY(-8px) scale(.94)}
.canvas-workspace[data-image-changed="true"] .canvas-vase{opacity:1;transform:none}
.canvas-workspace[data-layout-changed="true"] .canvas-content{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:21px;padding-top:26px}
.canvas-demo-cursor{position:absolute;width:18px;height:25px;background:#246ad5;clip-path:polygon(0 0,100% 68%,57% 72%,35% 100%);left:43%;top:51%;z-index:5;filter:drop-shadow(1px 2px 0 white);pointer-events:none;transition:left .8s cubic-bezier(.2,.7,.2,1),top .8s cubic-bezier(.2,.7,.2,1);transform:rotate(-12deg)}
.canvas-workspace[data-selection="image"] .canvas-demo-cursor{left:78%;top:56%}
.canvas-workspace[data-selection="layout"] .canvas-demo-cursor{left:63%;top:74%}
.canvas-workspace[data-playing="false"] .canvas-demo-cursor{opacity:0}
.canvas-options button{padding-block:24px;transition:opacity .35s;color:#c1c1c5}.canvas-options button small{max-width:250px;color:#b2b2b8}
.canvas-options button strong{color:#f5f5f6}.canvas-options .option-symbol{color:#dedee1}
.canvas-options button[aria-pressed="true"] .option-symbol{background:#ff7627;color:#111216;border-color:#ff9e63}
.canvas-options button[aria-pressed="true"] strong{color:#fff}
.canvas-footnote{max-width:340px;color:#a2a2a9}.transfer-section{padding-block:110px;background:var(--paper)}
.capture-options{background:#eaeae7;padding-block:100px 65px;border-color:#d8d8d5}
.capture-options .privacy-note{padding-top:30px;margin-top:38px;border-color:#c8c8c5;gap:24px}
.capture-options .privacy-note p{max-width:800px;color:#68686d}.capture-options .privacy-note a{margin-left:auto}
.pricing,.faq{background:#fff}.plan-pro{background:#f5f5f3}.plan-grid,.plan+.plan{border-color:#dcdcdc}
.closing{background:#111216}.closing-inner>img{border-color:#77787d;box-shadow:0 4px 0 #434449}
.site-footer{background:var(--paper)}
@media(min-width:1600px){.hero h1{font-size:91px}.hero-inner{min-height:740px}}
@media(max-width:1200px) and (min-width:961px){.hero .hero-actions .button{width:190px;font-size:12px;padding-inline:14px;gap:8px}.hero h1{font-size:61px}.workflow-art{height:270px}.workflow-art>img{width:295px;height:295px}.workflow-rail{top:315px}.workflow-packet{top:310px}}
@media(max-width:960px){.hero-inner{grid-template-columns:1fr;padding-top:48px}.hero-copy{padding:0}.hero h1{font-size:68px}.hero .hero-actions .button{width:224px}.workflow{padding-block:85px}.workflow-grid{gap:20px}.workflow-art{height:235px}.workflow-art>img{width:260px;height:260px}.workflow-rail{top:280px}.workflow-packet{top:275px}.step-heading h3{font-size:23px}.canvas-body{min-height:390px}.canvas-footnote{max-width:650px}.canvas-options button small{max-width:none}}
@media(max-width:600px){
  .hero-inner{padding-top:42px}.hero h1{font-size:clamp(43px,11.8vw,67px)}.hero-lead{font-size:22px;margin-top:22px}
  .hero .hero-actions{margin-top:27px;gap:10px}.hero .hero-actions .button{width:calc(50% - 5px);min-height:54px;font-size:12px;padding-inline:13px;gap:8px}.hero .external-icon{width:8px;height:8px}.hero .external-icon:after{width:10px;top:3px}
  .workflow{padding-block:65px 72px}.workflow-heading{margin-bottom:20px}.workflow-heading h2{font-size:36px}.workflow-grid{display:block;padding-bottom:0}
  .workflow-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 22px;align-items:center;padding:18px 0 27px;border:0}
  .workflow-art{grid-column:2;grid-row:1;height:225px;width:100%;margin:0;align-self:auto}.workflow-art>img{width:250px;height:250px;max-width:100%}.workflow-art:after{bottom:10px}
  .step-heading{display:contents}.step-heading>.step-number{grid-column:1;grid-row:1/3;width:38px;height:38px;align-self:center;font-size:12px;z-index:4;box-shadow:0 0 0 10px var(--paper)}
  .step-heading h3{grid-column:2;grid-row:2;text-align:left;max-width:200px;font-size:27px;line-height:1.12;margin-top:7px}
  .workflow-rail{display:block;left:18px;top:145px;width:2px;height:calc(100% - 295px);background:#cdcdce}.workflow-rail i{width:2px;height:100%;transform:scaleY(var(--trace-progress));transform-origin:top}
  .workflow-packet{display:none}.workflow-scan{top:calc(32px + var(--scan-progress)*145px);left:24%;width:52%}.workflow-file-label{bottom:18px;font-size:10px}
  .workflow-layers i:nth-child(1){left:15%;top:30px}.workflow-layers i:nth-child(2){right:13%;top:100px}.workflow-layers i:nth-child(3){left:22%;bottom:28px}
  .canvas-section{padding-block:68px}.canvas-section .section-heading{display:flex;align-items:flex-end;gap:12px}.canvas-section .section-heading h2{font-size:34px}.canvas-play{font-size:10px;padding:9px 12px;min-height:38px}.canvas-play:before{margin-right:6px}
  .canvas-body{min-height:345px}.canvas-stage{padding:48px 21px 77px}.editable-heading strong{font-size:clamp(23px,6.2vw,30px)}.editable-image{height:165px}.canvas-workspace[data-layout-changed="true"] .canvas-content{gap:15px}.canvas-properties{font-size:9px;bottom:23px;max-width:90%}
  .canvas-options{margin-top:9px}.canvas-options button{padding-block:22px}.canvas-options button small{font-size:13px}.canvas-footnote{font-size:11px}
  .transfer-section{padding-block:67px}.capture-options{padding-block:67px 45px}.capture-options .privacy-note{margin-top:28px;padding-top:24px;gap:15px}.capture-options .privacy-note p{font-size:11px;min-width:0}.capture-options .privacy-note a{margin-left:0;font-size:11px}
}
@media(max-width:380px){.hero .hero-actions{flex-direction:column}.hero .hero-actions .button{width:100%;font-size:14px}.workflow-heading h2{font-size:32px}.workflow-step{gap:0 15px}.workflow-art{height:202px}.workflow-art>img{width:224px;height:224px}.step-heading h3{font-size:25px}.canvas-section .section-heading{display:block}.canvas-play{margin-top:18px}.canvas-section .section-heading h2{font-size:34px}.editable-heading strong{font-size:21px}.editable-image{height:146px}}
@media(prefers-reduced-motion:reduce){.canvas-page{transform:none}.canvas-demo-cursor{display:none}.canvas-workspace:after{display:none}.workflow-art>img{transform:none}.workflow-packet,.workflow-scan{display:none}}
/* Keep automatic motion pausable by keyboard without a visible demo toolbar. */
.canvas-play{position:absolute;right:0;top:100%;z-index:6;margin-top:10px;background:#18191c}
.canvas-play:not(:focus-visible){width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Approved hero composition is locked. This is a background-only depth plane. */
.hero::after{
  content:'';position:absolute;inset:-24% -16% -38%;z-index:-1;pointer-events:none;
  background-image:linear-gradient(#bcc1c71c 1px,transparent 1px),linear-gradient(90deg,#bcc1c71c 1px,transparent 1px),linear-gradient(#bcc1c70b 1px,transparent 1px),linear-gradient(90deg,#bcc1c70b 1px,transparent 1px);
  background-size:144px 144px,144px 144px,48px 48px,48px 48px;
  mask-image:radial-gradient(ellipse 62% 55% at 70% 55%,#000 12%,#0009 42%,transparent 76%);
  transform-origin:60% 45%;transform:perspective(1000px) rotateX(48deg) rotateZ(-8deg) translate3d(-12px,-18px,0);
  animation:hero-grid-drift 24s ease-in-out infinite alternate paused;
}
.hero[data-grid-playing="true"]::after{animation-play-state:running}
.hero:has(.hero-demo[data-paused="true"])::after{animation-play-state:paused}
@keyframes hero-grid-drift{
  from{transform:perspective(1000px) rotateX(48deg) rotateZ(-8deg) translate3d(-12px,-18px,0)}
  to{transform:perspective(1000px) rotateX(48deg) rotateZ(-8deg) translate3d(12px,18px,0)}
}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none}}

/* Match both header edges to the approved hero frame; keep its backdrop full-width. */
.site-header{padding-inline:max(var(--gutter),calc((100% - 1580px)/2 + var(--gutter)))}