@font-face{font-family:"Inter";src:url("./assets/brand/InterVariable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --paper:#EEEAE0; --paper-2:#E3DDD0; --ink:#151412; --soft:#5d5952; --mute:#99948a;
  --acc:#FF4D1A; --line:rgba(21,20,18,.12); --line-d:rgba(238,234,224,.12);
  --sans:"Inter",system-ui,sans-serif; --serif:"RASLO Grid",system-ui,sans-serif; --mono:var(--sans); --db-font-primary:var(--sans); --db-font-mono:var(--sans);
  --g:clamp(20px,3vw,40px); --max:1440px; --ease:cubic-bezier(.65,0,.15,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html.lenis,html.lenis body{height:auto}
/* Designbase components load in a lower layer. Undo its bare-tag reset so plain
   landing elements keep browser defaults; component classes are unaffected. */
:where(h1,h2,h3,h4,h5,h6){margin:revert;padding:revert;font-family:revert;line-height:revert;color:revert}
:where(p){margin:revert;line-height:revert;color:revert}
:where(a){color:revert;text-decoration:revert;cursor:revert}
:where(strong,b,em,i,ul,ol,li,dt,dd,small,time,figcaption,big,cite,address,ins,u,del,s,mark,code,pre){color:revert;margin:revert;line-height:revert;background-color:revert;padding:revert}
:where(details){margin:revert;border:revert;border-radius:revert;overflow:revert}
:where(summary){padding:revert;background-color:revert;color:revert;cursor:revert}
:where(article,section){margin-bottom:revert}
:where(figure){margin:revert;text-align:revert}
:where(video,audio){border-radius:revert}
:where(blockquote,hr,dl){margin:revert;padding:revert;border:revert;background-color:revert;height:revert}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--acc);color:var(--ink)}
em{font-family:"RASLO Grid",var(--sans);font-style:normal;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.kicker{color:var(--mute);margin:0 0 20px}
.dark{background:var(--ink);color:var(--paper)}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.h2{font-weight:500;font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.045em;margin:0}
.h2 em{font-size:1.06em}
.sec{padding-block:clamp(96px,14vh,160px)}
.sec--tight{padding-top:0}
.split-line{overflow:hidden;padding-bottom:.04em}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .4s}
.nav.is-scrolled{background:rgba(238,234,224,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.is-dark{background:rgba(21,20,18,.7);color:var(--paper)}
.nav.is-dark .nav__links>a,.nav.is-dark .nav__drop>button{color:rgba(238,234,224,.6)}
.nav.is-dark .btn{background:var(--paper);color:var(--ink)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:68px}
.nav__logo{font:800 20px/1 var(--sans);letter-spacing:-.05em}
.nav__links{display:flex;gap:32px;font-size:14px;align-items:center}
.nav__links>a,.nav__drop>button{color:var(--soft);transition:color .3s}
.nav__links>a:hover,.nav__drop>button:hover,.nav__links .is-on{color:var(--ink)}
.nav.is-dark .nav__links>a:hover,.nav.is-dark .nav__drop>button:hover{color:var(--paper)}
.nav__drop{position:relative}
.nav__drop>button::after{content:" ▾";font-size:10px}
.nav__menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:180px;padding:8px;border-radius:12px;background:var(--ink);display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s var(--ease),visibility .25s}
.nav__menu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{padding:9px 12px;border-radius:8px;color:rgba(238,234,224,.7);transition:background .2s,color .2s}
.nav__menu a:hover,.nav__menu a.is-on{background:rgba(238,234,224,.08);color:var(--paper)}

/* buttons */
.btn{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:500;font-size:15px;transition:background .35s,color .35s}
.btn:hover{background:var(--acc);color:var(--ink)}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
.btn--line{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}
.dark .btn{background:var(--paper);color:var(--ink)}
.dark .btn:hover{background:var(--acc)}
.link{font-size:15px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .3s;white-space:nowrap}
.link:hover{opacity:.6}

/* screenshots */
.shot{margin:0}
.shot__frame{border-radius:14px;overflow:hidden;background:#0e0e0e;padding:6px;box-shadow:0 40px 80px -40px rgba(21,20,18,.45)}
.shot__frame img{width:100%;height:auto;border-radius:9px}
.shot figcaption{margin-top:14px;color:var(--mute)}

/* hero */
.hero{padding-top:clamp(140px,20vh,200px)}
.hero__title{margin:0;font-weight:500;font-size:clamp(48px,8vw,124px);line-height:.95;letter-spacing:-.055em}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title .ln>span{display:inline-block}
.hero__title em{color:var(--acc)}
.hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin:36px 0 clamp(56px,9vh,96px)}
.hero__sub{max-width:32ch;font-size:18px;color:var(--soft);margin:0}
.hero__cta{display:flex;align-items:center;gap:28px}
.hero__shot{perspective:1600px}
.hero__shot .shot{transform-origin:50% 0;will-change:transform}

/* Results first: front-facing artwork in a gently curved, moving row. */
.hero--showcase{padding:clamp(88px,11vh,112px) 0 32px;overflow-x:clip;overflow-y:visible;position:relative;z-index:1}
.hero__copy{text-align:center;position:relative;z-index:2}
.hero--showcase .hero__title{font-size:clamp(56px,6.4vw,100px);line-height:1.04}
.hero--showcase .hero__title .ln{padding-bottom:.04em}
.hero--showcase .hero__sub{max-width:52ch;margin:0 auto 18px;font-size:clamp(15px,1.3vw,19px);line-height:1.5}
.hero--showcase .hero__title{margin-bottom:28px}
.hero--showcase .hero__cta{justify-content:center;margin-top:28px}
.hero-gallery{width:100%;height:clamp(200px,31vw,470px);margin:clamp(8px,2vh,24px) auto 0;position:relative;overflow-x:clip;perspective:var(--orbit-p,1200px);perspective-origin:50% 50%}
.hero-orbit{position:absolute;inset:0;transform-style:preserve-3d}
.hero-art{position:absolute;left:50%;top:50%;width:var(--orbit-w,190px);aspect-ratio:4/5;margin:calc(var(--orbit-w,190px)*-.625) 0 0 calc(var(--orbit-w,190px)*-.5);overflow:hidden;border-radius:14px;background:#202620;backface-visibility:hidden;will-change:transform,opacity;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);opacity:0}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.hero-glow{position:absolute;left:50%;top:55%;width:60%;height:80%;translate:-50% -50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 28%,transparent),transparent);filter:blur(30px);opacity:.55;pointer-events:none}
.hero__note{text-align:center;color:var(--mute);font-size:11px;margin:12px 20px 0}
/* A scroll scene: the interface recedes while source and result move inward. */
.tool-story{height:210svh;position:relative;margin-top:80px}
.tool-scene{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;padding-top:90px}
.tool-scene__copy{position:relative;z-index:3;text-align:center;max-width:650px;margin:0 auto 24px;padding:0 20px}
.tool-scene__copy .h2{font-size:clamp(34px,4vw,58px)}
.tool-scene__copy>p:last-child{color:var(--soft);max-width:45ch;margin:18px auto 0;font-size:16px}
.tool-scene__ui{position:absolute;top:42%;left:50%;width:min(82vw,1180px);margin-left:calc(min(82vw,1180px)/-2);transform-origin:center;z-index:1;overflow:hidden;border-radius:14px}
.tool-scene__shade{position:absolute;inset:0;background:#050806;opacity:0;pointer-events:none}
.tool-float{position:absolute;z-index:4;width:clamp(140px,20vw,280px);margin:0;opacity:0;pointer-events:none}
.tool-float--before{top:43%;left:calc(50% - clamp(140px,20vw,280px) - 100px)}.tool-float--after{top:50%;right:calc(50% - clamp(140px,20vw,280px) - 100px)}
.tool-float img,.tool-float canvas{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:9px;box-shadow:0 24px 60px #0007}
.tool-float figcaption{font-size:10px;margin-top:12px;color:var(--ink)}
/* Home benefits between the editor demo and the looks gallery. */
.home-benefits{padding-block:clamp(52px,8vw,112px)}
.home-benefits__head{margin-bottom:clamp(26px,4vw,48px)}
.home-benefits__head .h2{font-size:clamp(36px,4.6vw,68px)}
.home-benefits__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}




@media(max-width:720px){.home-benefits__grid{grid-template-columns:1fr}}

/* The ring turns while the artwork stays upright. */
.demo{padding:clamp(24px,5vw,76px) 0;overflow:clip}
.demo__in{position:relative;width:min(96vw,86svh,960px);aspect-ratio:1;margin-inline:auto;container-type:inline-size}
.demo__center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:1;pointer-events:none}
.demo__center .h2{font-size:13cqi;line-height:.98}
.demo__list{position:absolute;inset:0;list-style:none;margin:0;padding:0;animation:look-turn 84s linear infinite paused}
.demo__list li{position:absolute;left:var(--x);top:var(--y);width:23%;translate:-50% -50%}
.look-card{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:5%;background:#202620;animation:look-turn 84s linear infinite reverse paused}
.demo.is-running .demo__list,.demo.is-running .look-card{animation-play-state:running}
@keyframes look-turn{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.demo__list,.look-card{animation:none}}

/* section heads */
.head{margin-bottom:clamp(48px,8vh,80px)}
.head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* feature rows (home) */
.frows{display:flex;flex-direction:column;gap:clamp(72px,12vh,140px)}
.frow{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g);align-items:center}
.frow__txt{grid-column:1/5}
.frow .shot{grid-column:6/13}
.frow:nth-child(even) .frow__txt{grid-column:9/13;grid-row:1}
.frow:nth-child(even) .shot{grid-column:1/8;grid-row:1}
.frow__txt .mono{color:var(--acc)}
.frow h3{margin:14px 0 12px;font-weight:500;font-size:clamp(32px,3.4vw,52px);line-height:1;letter-spacing:-.045em}
.frow p{margin:0 0 24px;color:var(--soft);max-width:30ch}
.frow .shot__frame{transition:transform .9s var(--ease)}
.frow:hover .shot__frame{transform:translateY(-6px)}

/* effects grid */
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 20px}
.fx{cursor:default}
.fx.is-hidden{display:none}
.fx__thumb{aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--paper-2)}
.fx__thumb canvas{width:100%;height:100%;transition:transform .9s var(--ease)}

.fx__meta{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;font-weight:500}
.fx__meta span:last-child{color:var(--mute);font-family:var(--mono);font-size:11px}
.more{display:flex;justify-content:center;margin-top:56px}
.filters{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:36px}
.filters button{height:32px;padding:0 14px;border-radius:12px;color:var(--soft);transition:background .3s,color .3s}
.filters button:hover{color:var(--ink)}
.filters button.is-on{background:var(--ink);color:var(--paper)}

/* feature pages */
.fhero{padding-top:clamp(150px,22vh,220px);padding-bottom:clamp(48px,8vh,80px)}
.fhero__title{margin:0;font-weight:500;font-size:clamp(56px,9vw,140px);line-height:.92;letter-spacing:-.06em}
.fhero__title em{color:var(--acc)}
.fhero__sub{margin:28px 0 0;font-size:clamp(18px,1.5vw,22px);color:var(--soft);max-width:34ch}
.fhero__shot{perspective:1600px}
.fhero__shot .shot{transform-origin:50% 0}
.pts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}


.next{padding-block:clamp(48px,8vh,96px) clamp(96px,14vh,160px)}
.next__link{display:flex;justify-content:space-between;align-items:baseline;padding-top:28px;border-top:1px solid var(--line)}
.next__link .mono{color:var(--mute)}
.next__title{font-weight:500;font-size:clamp(40px,6vw,96px);letter-spacing:-.05em;line-height:1;transition:transform .6s var(--ease),color .3s}
.next__link:hover .next__title{transform:translateX(-12px);color:var(--acc)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.plan{padding:36px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.plan p{margin:0;color:var(--mute)}
.plan h3{margin:14px 0 28px;font-weight:500;font-size:clamp(56px,6vw,96px);line-height:1;letter-spacing:-.06em}
.plan ul{list-style:none;margin:0 0 36px;padding:0}
.plan li{padding:11px 0;border-top:1px solid var(--line)}
.plan .btn{align-self:flex-start;margin-top:auto}
.plan--pro{background:var(--ink);color:var(--paper);box-shadow:none}
.plan--pro li{border-color:var(--line-d)}
.plan--pro .btn{background:var(--acc);color:var(--ink)}
.plan--pro .btn:hover{background:var(--paper)}
.faq{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--g)}
.faq .kicker{grid-column:1/4}
.faq__list{grid-column:4/13;border-top:1px solid var(--ink)}
.landing-faq{--db-font-primary:var(--sans);--db-text-primary:var(--ink);--db-text-secondary:var(--soft);--db-border-base:var(--line);--db-surface-base:transparent;--db-surface-secondary:transparent;--db-shadow-card:none;color:var(--ink)}


/* footer */
.foot{padding-block:clamp(96px,16vh,180px) 24px}
.foot__title{margin:0 0 40px;font-weight:500;font-size:clamp(56px,10vw,160px);line-height:.9;letter-spacing:-.06em}
.foot__title em{color:var(--acc)}
.foot__cta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:var(--g);margin-top:clamp(80px,14vh,140px)}
.foot__cols div{display:flex;flex-direction:column;gap:10px}
.foot__cols span{color:var(--mute);margin-bottom:6px}
.foot__cols a{color:rgba(238,234,224,.75);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:14px}
.foot__cols a:hover{color:var(--paper)}
.foot__bar{display:flex;justify-content:space-between;padding-top:16px;margin-top:56px;border-top:1px solid var(--line-d);color:var(--mute)}

/* responsive */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr)}
    .frow,.frow:nth-child(even){display:flex;flex-direction:column;align-items:stretch}
  .frow .shot{order:2}
}
@media (max-width:720px){
  .nav__links{gap:18px;font-size:13px}
  .nav__drop{display:none}
  .nav .btn--sm{display:none}
  .hero__row{flex-direction:column;align-items:flex-start}
  .hero--showcase{padding-top:112px}.hero--showcase .hero__title{font-size:clamp(48px,11.5vw,72px)}
  .hero--showcase .hero__sub br{display:none}.hero--showcase .hero__cta{gap:20px}.hero-gallery{margin-top:20px}
  .tool-story{margin-top:40px;height:180svh}.tool-scene{padding-top:100px}.tool-scene__copy .h2{font-size:34px}.tool-scene__copy>p:last-child{font-size:14px}
  .tool-scene__ui{top:43%;width:94vw;margin-left:-47vw}.tool-float{width:33vw;min-width:0}.tool-float--before{top:51%;left:calc(50% - 33vw - 30px)}.tool-float--after{top:61%;right:calc(50% - 33vw - 30px)}
  .grid{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .pts{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan{padding:28px}
  .faq{display:block}
  .faq .kicker{margin-bottom:16px}
  .foot__cols{grid-template-columns:1fr 1fr}
  .shot__frame{border-radius:10px;padding:4px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* Feature explanations: editorial columns and open numbered rows. */
.feature-index{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px;color:var(--soft);font-size:14px}
.feature-index a{border-bottom:1px solid var(--line);padding-bottom:4px}.feature-index a:hover{color:var(--ink)}
.story-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,7vw,110px);align-items:start}
.story-lead{margin:0;font-size:clamp(19px,2vw,27px);line-height:1.6;color:var(--soft);max-width:38ch}.story-lead p:first-child{margin-top:0}
.workflow{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.workflow li{display:grid;grid-template-columns:90px minmax(0,1fr);padding:32px 0;border-bottom:1px solid var(--line);gap:24px}
.workflow li>.mono{color:var(--acc);padding-top:8px}
.workflow h3,
.workflow p,
.usecases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}


.story-related{margin-top:48px}.story-note{max-width:80ch;color:var(--soft);line-height:1.7;margin:28px 0}
.plan-table-wrap{overflow:auto}.plan-table{width:100%;border-collapse:collapse;text-align:left;font-size:16px}.plan-table caption{text-align:left;margin-bottom:20px;color:var(--soft)}
.plan-table th,.plan-table td{border-bottom:1px solid var(--line);padding:20px 16px;vertical-align:top}.plan-table th{font-weight:500}.plan-table th:first-child{padding-left:0;width:42%}.plan-table thead{color:var(--mute)}
.nav__menu small{display:block;font-size:12px;line-height:1.5;color:var(--mute);margin-top:3px}.nav__menu{min-width:260px}
.nav__drop>summary{list-style:none;color:var(--soft);cursor:pointer}.nav__drop>summary::-webkit-details-marker{display:none}.nav__drop>summary::after{content:' ▾';font-size:10px}
.nav__drop[open] .nav__menu{opacity:1;visibility:visible;transform:none}.nav__drop:not([open]) .nav__menu{display:none}
section[id]{scroll-margin-top:88px}
@media(max-width:1023px){.story-intro{grid-template-columns:1fr;gap:32px}.story-lead{max-width:55ch}.usecases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.usecases{grid-template-columns:1fr;gap:28px}.workflow li{grid-template-columns:32px minmax(0,1fr);gap:16px;padding-block:26px}.workflow p,.plan-table{font-size:14px}.plan-table td,.plan-table th{padding:16px 10px}.plan-table th:first-child{width:36%}}
@media(max-width:720px){.nav__drop{display:block}.nav__menu{position:fixed;top:64px;left:20px;right:20px;min-width:0;max-height:calc(100svh - 90px);overflow:auto}.nav__links{gap:14px}.feature-index{gap:12px 20px}}

.plan--pro .btn{color:#151412}
.commerce-status{font-size:14px;line-height:1.6;color:var(--soft);margin-top:18px;max-width:64ch}.plan--pro .commerce-status{color:var(--paper)}
.plan button:disabled{opacity:.5;cursor:not-allowed}

@media(prefers-reduced-motion:reduce){.tool-story{height:100svh}.tool-float{opacity:1}.look-card{transition:none}}

.btn{padding-inline:28px}.btn--sm{padding-inline:22px}
.btn--line{box-shadow:none;background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
.btn:focus-visible,.filters button:focus-visible{background:var(--acc);color:#111412;text-decoration:underline;text-underline-offset:4px}

.plan h3 small{font-size:16px;letter-spacing:0;white-space:nowrap}
.plan .plan-billing{margin:-12px 0 24px;color:inherit;font-size:14px}
@media (min-width:768px) and (max-width:980px){.plans .plan{padding:22px}}

.plan--lifetime{background:#ff521c;color:#151412;box-shadow:none}
.plan--lifetime p,.plan--lifetime .commerce-status{color:#2c170e}
.plan--lifetime li{border-color:#15141233}
.plan--lifetime .btn{background:#151412;color:#fff4e8}
.plan--lifetime .btn:hover{background:#fff4e8;color:#151412}
.plan-purchase{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.plan-purchase .btn{font-size:13px;padding-inline:16px}

.legal-page{max-width:800px;padding-block:140px 100px;line-height:1.7}
.legal-page h1{font-size:clamp(36px,5vw,64px);line-height:1.1}
.legal-page section{margin-top:36px}.legal-page h2{font-size:23px;line-height:1.3}.legal-page p{color:var(--soft)}
.legal-page a,.foot__legal a{text-decoration:underline;text-underline-offset:4px}

/* Pixel icons (icons.js) */
.px-icon{display:block;width:44px;height:44px;color:var(--acc);flex:none}
.px-icon svg{display:block;width:100%;height:100%;overflow:visible}



/* Feature highlights as cards */



/* In practice: regular type, live effect strip */
.story-intro--plain .h2 em{font-family:var(--sans);font-size:1em;letter-spacing:inherit;color:var(--soft)}
.fx-strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(16px,3vw,40px)}
.fx-tile{margin:0}
.fx-tile canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--paper-2)}
.fx-tile--big canvas{aspect-ratio:4/5}
.fx-tile figcaption{margin-top:12px;color:var(--mute);font-size:11px}
/* Workflow: steps beside a sticky visual */
.workflow-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.workflow-visual{position:sticky;top:120px}
.workflow-visual .fx-tile canvas{max-height:70vh;width:auto;margin-inline:auto}
.workflow li{transition:opacity .5s}
.workflow li h3,.workflow li>.mono{transition:color .5s}
.workflow li:not(.is-active){opacity:.45}
@media(max-width:1023px){.workflow-wrap{grid-template-columns:1fr}.workflow-visual{position:static}.workflow li:not(.is-active){opacity:1}}
@media(max-width:767px){.fx-strip{grid-template-columns:repeat(3,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.fx-tile{scroll-snap-align:start}}

/* Feature menu: readable current page, accent icon at the right end */
.nav__menu a{position:relative}
.nav__menu a{padding-right:52px}
.nav__menu a.is-on{background:color-mix(in srgb,var(--acc) 10%,transparent);color:var(--ink)}
.nav__menu a.is-on small{color:var(--soft)}
.nav__icon{position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;color:var(--acc);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .35s var(--ease)}
.nav__menu a.is-on .nav__icon{opacity:1;transform:none}
@media(hover:hover){.nav__menu a:hover .nav__icon{opacity:1;transform:none}}
/* Phones: bigger nav tap targets, stacked footer actions, compact feature cards */
@media(max-width:720px){
  .nav__links>a,.nav__drop>summary{display:inline-flex;align-items:center;min-height:44px}
  .foot__cta{flex-direction:column;align-items:stretch;gap:14px}
  .foot__cta .btn{justify-content:center;text-align:center}
  .foot__cta .link{align-self:flex-start;order:3;margin-top:6px}
  
  
  
}

/* Plans: pixel prices, a billing switch on Pro, one status line under the cards. */
.plan__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.plan h3{font-family:"RASLO Grid",var(--sans);font-weight:400;letter-spacing:0;font-size:clamp(50px,5vw,84px);display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
.plan h3 small{font-family:var(--sans)}
.plan h3>span{display:inline-flex;align-items:baseline;gap:12px}
.plan .plan-billing{margin:-8px 0 28px;font-size:14px;min-height:1.5em}
.plan--pro[data-billing="monthly"] [data-bill-show="annual"],.plan--pro[data-billing="annual"] [data-bill-show="monthly"]{display:none}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--paper) 9%,transparent)}
.plan--pro .seg{background:#15141214}
.seg button{border:0;font:500 13px/1 var(--sans);padding:9px 14px;border-radius:999px;background:transparent;color:inherit;opacity:.6;cursor:pointer;transition:background .25s,opacity .25s,color .25s}
.seg button b{font-weight:500;color:var(--acc)}
.seg button[aria-pressed="true"]{opacity:1;background:#151412;color:#f1eee6}
.seg button:hover{opacity:1}
.plan .btn{margin-top:auto}
.plans__status{margin:20px 0 0;max-width:none;font-size:12px;letter-spacing:.04em;color:var(--mute)}
.plans__status:empty{display:none}
.plans__status::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc);margin-right:10px;vertical-align:middle}
@media(max-width:720px){.plan h3{font-size:56px}}

/* Download page */
.dl-main{display:flex;align-items:center;gap:clamp(20px,3vw,40px);margin-top:48px;padding:clamp(24px,3vw,40px);border-radius:16px;background:#191d1a;border:1px solid var(--line);max-width:860px}
.dl-main .px-icon{width:72px;height:72px}
.dl-main__for{margin:0 0 16px;color:var(--soft);font-size:13px;letter-spacing:.04em}
.dl-main__cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.dl-main__meta{margin:16px 0 0;color:var(--mute);font-size:12px;line-height:1.6}
.btn.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}
.dl-list{border-top:1px solid var(--line)}
.dl-row{display:grid;grid-template-columns:44px minmax(0,1.4fr) minmax(0,1fr) auto;align-items:center;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.dl-row .px-icon{width:36px;height:36px;color:var(--soft);transition:color .3s}
.dl-row.is-match .px-icon,.dl-row:hover .px-icon{color:var(--acc)}
.dl-row h3{margin:0;font-size:22px;font-weight:500}.dl-row h3 span{color:var(--soft)}
.dl-row p{margin:4px 0 0;color:var(--mute);font-size:14px}
.dl-row .dl-row__file{margin:0;font-size:12px}
.dl-row.is-match h3::after{content:"This computer";margin-left:12px;padding:3px 8px;border-radius:999px;font:500 11px/1 var(--mono);vertical-align:middle;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent)}
.dl-links{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:48px}
@media(max-width:720px){
  .dl-main{flex-direction:column;align-items:flex-start}
  .dl-main .px-icon{width:52px;height:52px}
  .dl-row{grid-template-columns:36px minmax(0,1fr);gap:6px 16px}
  .dl-row .px-icon{grid-row:1/3}
  .dl-row .dl-row__file{grid-column:2}
  .dl-row .btn{grid-column:2;justify-self:start;margin-top:10px}
}

/* Release notes */
.rels{padding-top:0}
.rel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line)}
.rel__head{align-self:start;position:sticky;top:110px}
.rel__v{margin:0;font-family:"RASLO Grid",var(--sans);font-weight:400;font-size:clamp(56px,7vw,112px);line-height:1;color:var(--acc)}
.rel__head p{margin:14px 0 0;color:var(--mute);font-size:13px;letter-spacing:.04em}
.rel__sum{margin:0 0 36px;font-size:clamp(20px,1.8vw,26px);line-height:1.4}
.rel__body section{padding:22px 0;border-top:1px solid var(--line)}
.rel__body h3{margin:0 0 12px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.rel__body ul{margin:0;padding:0;list-style:none}
.rel__body li{position:relative;padding:6px 0 6px 22px;color:var(--soft);line-height:1.55}
.rel__body li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;background:var(--acc)}
.rel__body code{font-family:var(--mono);font-size:.9em}
@media(max-width:720px){.rel{grid-template-columns:1fr}.rel__head{position:static}}

/* Hero ring labels: which effect made the card. */
.hero-art figcaption{white-space:nowrap;position:absolute;left:10px;bottom:10px;padding:5px 8px;border-radius:6px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#f1eee6;background:#111412cc}

/* Home video reel */
.reels__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:clamp(16px,2vw,28px);align-items:start}
.reel__frame{position:relative;border-radius:16px;overflow:hidden;background:#191d1a;aspect-ratio:4/5}
.reel__frame canvas{display:block;width:100%;height:100%;object-fit:cover}
@keyframes reelDot{50%{opacity:.25}}
.reel__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.reel__chips button{border:0;font:500 13px/1 var(--sans);padding:10px 14px;border-radius:999px;color:var(--soft);background:color-mix(in srgb,var(--ink) 8%,transparent);cursor:pointer;transition:background .25s,color .25s}
.reel__chips button:hover{color:var(--ink)}
.reel__chips button[aria-pressed="true"]{background:var(--acc);color:#151412}
.reels__copy{align-self:end;padding-bottom:58px}
.reels__copy p{margin:0 0 24px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--soft)}
.reels__copy ul{list-style:none;margin:0;padding:0;font-size:12px;letter-spacing:.04em;color:var(--mute)}
.reels__copy li{padding:12px 0;border-top:1px solid var(--line)}
@media(max-width:900px){.reels__grid{grid-template-columns:1fr 1fr}.reels__copy{grid-column:1/-1;padding:0}}
@media(max-width:560px){.reels__grid{grid-template-columns:1fr}}
@media(max-width:720px){.hero-art figcaption{left:6px;bottom:6px;padding:3px 5px;font-size:8px;border-radius:4px}}

/* Hero video cards: the poster shows until the live canvas has a frame. */
.hero-art--video canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.hero-art--video canvas[data-preview-ready]{opacity:1}
.hero-art--video figcaption i{display:inline-block;width:5px;height:5px;margin-right:6px;border-radius:50%;background:var(--acc);vertical-align:1px;animation:reelDot 1.4s ease-in-out infinite}
.hero-gallery{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.hero-gallery.is-dragging{cursor:grabbing}

/* Shared Designbase Card composition. Border/shadow removal is intentional. */
.landing-feature-card{
  --db-surface-base:color-mix(in srgb,var(--ink) 3.5%,var(--paper));
  --db-text-primary:var(--ink);
  --db-text-secondary:var(--soft);
  --db-shadow-card:none;
  --db-shadow-card-hover:none;
  min-width:0;border:0;box-shadow:none;color:var(--db-text-primary);
}
.landing-feature-card>.designbase-wc-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--db-gap-l)}
.landing-feature-card h3{margin:0;font-size:clamp(22px,2.1vw,32px);font-weight:500;line-height:1.15;letter-spacing:-.03em}
.landing-feature-card p{margin:0;color:var(--db-text-secondary);line-height:1.55}
.landing-feature-card>.designbase-wc-card__footer{margin-top:auto;border:0}
.landing-feature-card .px-icon{width:44px;height:44px}