/* Aurea website — layout and design values modelled on cleanshot.com, real Aurea screenshots, light + dark */
:root{
  /* Apple palette (apple.com light) */
  --bg:#fff; --surface:#fff; --panel:#f5f5f7; --panel2:#e8e8ed;
  --ink:#1d1d1f; --muted:#6e6e73; --faint:#86868b; --line:#d2d2d7; --line2:#e8e8ed; --hover:#0000000d;
  --blue:#0071e3; --blue-h:#0077ed; --blue-t:#0071e3; --blue-soft:#0071e314;
  --sh-card:0 4px 24px -6px #0000001a,0 0 0 1px #0000000d;
  --sh-media:0 8px 30px -8px #00000024,0 0 0 1px #0000000f;
  --sh-btn:0 0 0 1px #d2d2d7;
  --sh-dd:0 18px 50px -12px #00000033,0 0 0 1px #0000000f;
  --sh-shot:0 24px 50px -20px #00000047,0 0 0 1px #00000014;
  --hdr:#fffffff0; --glow-a:#dbe9fb; --glow-b:#eef4fd; --glow-c:#ece9fb;
  --font:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Helvetica,Arial,sans-serif;
  --display:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  color-scheme:light;
}
:root[data-theme=dark]{
  /* Apple palette (apple.com dark) */
  --bg:#000; --surface:#1d1d1f; --panel:#161617; --panel2:#2a2a2d;
  --ink:#f5f5f7; --muted:#a1a1a6; --faint:#86868b; --line:#424245; --line2:#2a2a2d; --hover:#ffffff14;
  --blue:#2997ff; --blue-h:#47a6ff; --blue-t:#2997ff; --blue-soft:#2997ff24;
  --sh-card:0 0 0 1px #ffffff17,0 20px 40px -20px #000000b3;
  --sh-media:0 0 0 1px #ffffff17,0 30px 60px -24px #000000cc;
  --sh-btn:0 0 0 1px #424245;
  --sh-dd:0 0 0 1px #ffffff1a,0 30px 60px -20px #000000d9;
  --sh-shot:0 30px 60px -24px #000000d9,0 0 0 1px #ffffff1f;
  --hdr:#000000e6; --glow-a:#0b2547; --glow-b:#0a1a33; --glow-c:#1a1440;
  color-scheme:dark;
}
@font-face{font-family:"SF Pro Display";src:url(assets/fonts/SF-Pro-Display-Bold.ttf) format("truetype");font-weight:600 800;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;background:var(--bg)}
body{margin:0;position:relative;overflow-x:clip;color:var(--ink);font:400 15px/1.6 var(--font);letter-spacing:-.005em;transition:background .3s,color .3s}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4,.t60,.t40,.t24,.t20,.btitle,.logo,.price,.number,.pname,.title,.amt{font-family:var(--display)}
[id]{scroll-margin-top:100px}
.layout{max-width:1232px;margin:0 auto;padding:0 20px}
.page-content{display:flex;flex-direction:column;gap:200px;padding-top:120px;padding-bottom:120px}
.grad-title{background:linear-gradient(90deg,var(--ink),var(--ink) 60%,var(--blue-t));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}
.t60{font-size:60px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.t40{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.t24{font-size:24px;font-weight:600;line-height:1.333;letter-spacing:-.02em}
.t20{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em}
.d18{font-size:18px;font-weight:450;line-height:1.67;color:var(--muted)}
.d15{font-size:15px;font-weight:450;line-height:1.6;color:var(--muted)}
.dark-ink{color:var(--ink)}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--panel2)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 20px;border:none;border-radius:14px;font-size:15px;font-weight:550;line-height:1.6;letter-spacing:.01em;cursor:pointer;user-select:none;white-space:nowrap;transition:background .15s,transform .2s,box-shadow .2s,color .15s;transform:translateZ(0)}
.btn:active{transform:translateY(2px)}
.btn.sm{height:40px;padding:0 16px}
.btn.primary{color:#fff;background:var(--blue)}
.btn.primary:hover{background:var(--blue-h)}
.btn.secondary{color:var(--ink);background:var(--surface);box-shadow:var(--sh-btn)}
.btn.secondary:hover{color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.btn.ghost{color:var(--ink);background:transparent}
.btn.ghost:hover,.btn.ghost[aria-expanded=true]{background:var(--hover)}
.btn.primary-contrast{color:#161618;background:#fff;box-shadow:0 0 6px -2px #16161880,0 6px 4px -2px #16161840}
.btn.primary-contrast:hover{background:#fffc}
.btn.secondary-contrast{color:#fff;background:transparent;border:1px solid #ffffff3d}
.btn.secondary-contrast:hover{background:#ffffff0f}
.btn .play{width:20px;height:20px;margin-right:10px}
.btn .chev{width:20px;height:20px;margin-left:8px;opacity:.48;transition:transform .2s}
.text-btn{display:inline-flex;align-items:center;height:24px;font-size:15px;font-weight:550;line-height:1.6;color:var(--blue);cursor:pointer}
.text-btn.secondary{color:var(--ink)}
.text-btn:hover{color:var(--blue-h)}
.text-btn svg{width:16px;height:16px;margin-left:3px;flex-shrink:0;transition:transform .1s}
.text-btn:hover svg{transform:translate(2px)}
.icon-badge{display:inline-flex;padding:8px;border-radius:12px;background:var(--surface);color:var(--blue);box-shadow:var(--sh-btn);flex-shrink:0}
.icon-badge svg{width:24px;height:24px}
.icon-badge.sm{padding:6px;border-radius:10px}
.icon-badge.sm svg{width:20px;height:20px}
.nav-btn{width:40px;height:40px;border-radius:40px;border:1px solid transparent;background:var(--hover);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}
.nav-btn:hover{border-color:var(--line)}
.nav-btn svg{width:20px;height:20px}
.nav-btn:disabled{background:transparent;color:var(--faint);cursor:default;border-color:transparent}
.theme-btn{width:40px;height:40px;border-radius:14px;border:none;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background .15s}
.theme-btn:hover{background:var(--hover)}
.theme-btn svg{width:20px;height:20px}
.theme-btn .moon{display:none}
:root[data-theme=dark] .theme-btn .sun{display:none}
:root[data-theme=dark] .theme-btn .moon{display:block}

/* ---------- header ---------- */
.app-header{position:sticky;top:0;z-index:10;margin-top:12px;padding:12px 0;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
.app-header.scrolled{background:var(--hdr);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-color:var(--line2)}
.app-header .content{display:flex;align-items:center;justify-content:space-between;max-width:1232px;margin:0 auto;padding:0 20px}
.app-header .left{display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:10px;height:48px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.logo img{width:40px;height:40px;border-radius:11px;box-shadow:0 2px 5px #0000001a}
.navigation{display:flex;gap:8px;margin:0 0 0 16px;padding:0;list-style:none}
.navigation .item{position:relative;display:flex;align-items:center}
.navigation .btn.drop{padding:0 13px 0 16px}
.navigation .btn .chev{margin-left:4px}
.navigation .btn[aria-expanded=true] .chev{transform:rotate(180deg)}
.navigation .item.drop::after{content:"";position:absolute;bottom:-3px;width:100%;height:3px}
.navigation .btn[aria-current=page]{background:var(--hover)}
.dropdown{position:absolute;top:calc(100% + 3px);left:0;width:280px;margin:0;padding:8px;list-style:none;background:var(--surface);border-radius:20px;font-size:14px;font-weight:550;line-height:1.43;box-shadow:var(--sh-dd);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility .18s}
.item.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.dropdown a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--ink)}
.dropdown a.icon{padding:8px}
.dropdown a:hover{background:var(--hover)}
.dropdown .line{border-top:1px solid var(--line);margin:8px 0}
.dropdown a.dl svg{width:20px;height:20px}
.app-header .right{display:flex;align-items:center;gap:12px}
.m-header{display:none;position:fixed;top:0;left:0;right:0;z-index:10;margin:12px 12px 0;padding:8px 12px 8px 8px;align-items:center;justify-content:space-between;background:var(--hdr);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:20px;box-shadow:var(--sh-card)}
.m-header .logo{height:40px;font-size:17px}
.m-header .logo img{width:36px;height:36px;border-radius:10px}
.m-header .r{display:flex;align-items:center;gap:8px}
.trigger{width:40px;height:40px;border:none;border-radius:16px;background:var(--hover);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}
.trigger svg{width:20px;height:20px}
.m-menu{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s}
.m-menu.open{opacity:1;visibility:visible;transform:none}
.m-menu .bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 12px 20px;border-bottom:1px solid var(--line2)}
.m-menu .close{border:none;border-radius:999px;background:var(--hover);padding:10px;display:flex;cursor:pointer;color:var(--ink)}
.m-menu .close svg{width:20px;height:20px}
.m-menu .content{display:flex;flex-direction:column;padding:24px 20px calc(32px + env(safe-area-inset-bottom))}
.m-menu .actions{display:flex;gap:12px;margin-bottom:32px}
.m-menu .actions .btn{flex:1}
.m-menu .section+.section{margin-top:28px}
.m-menu .section-title{margin:0 0 8px;font-size:13px;font-weight:450;line-height:1.23;color:var(--muted)}
.m-menu .links{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}
.m-menu .links a{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:15px;font-weight:550}
.m-menu .links a.icon{padding:6px 0}

/* ---------- ambient background ---------- */
.ambient{position:relative;height:0;z-index:-1}
.ambient .glow{position:absolute;left:50%;top:-300px;width:2271px;height:1198px;transform:translateX(-50%);pointer-events:none;opacity:.55;will-change:transform;
  background:radial-gradient(30% 32% at 50% 48%,var(--glow-a) 0%,transparent 70%),radial-gradient(22% 26% at 38% 42%,var(--glow-b) 0%,transparent 70%),radial-gradient(22% 26% at 62% 40%,var(--glow-c) 0%,transparent 70%)}

/* ---------- screenshots ---------- */
.shot{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--sh-shot);background:#0f0f12}
.shot.r20{border-radius:20px}
.frame{position:relative;border-radius:20px;background:var(--panel);overflow:hidden;isolation:isolate}
.frame .pad{padding:40px}
.frame.edge .shot{position:absolute;left:40px;top:40px;width:auto;max-width:none;height:calc(100% - 40px);border-bottom-left-radius:0;border-bottom-right-radius:0}
.frame.fit{display:grid;place-items:center;padding:40px}
.frame.fit .shot{max-height:100%;width:auto;max-width:100%}
.lens-wrap{position:relative}
.lens{position:absolute;border-radius:16px;box-shadow:0 30px 60px -20px #000000a6,0 0 0 1px #ffffff26,0 0 0 6px color-mix(in srgb,var(--surface) 70%,transparent);overflow:hidden;transform-origin:var(--o,50% 50%);transition:transform 1s var(--ease),opacity .8s var(--ease)}
.lens img{width:100%;display:block}
.lens-wrap:not(.in) .lens{transform:scale(.6);opacity:0}
.lens-tag{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:#000000b3;color:#fff;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}

/* ---------- home heading ---------- */
.home-top{position:relative;padding-bottom:120px}
.badge-row{display:flex;justify-content:center;padding:49px 0 52px}
.mode-badge{display:flex;align-items:center;gap:6px;padding:8px 13px 8px 8px;border-radius:14px;font-size:14px;font-weight:550;line-height:1.43;color:#fff;background:#0f0f12;box-shadow:0 2px 6px -1px #16161833,0 0 10px #0d6ce84d;cursor:pointer;transition:background .15s}
:root[data-theme=dark] .mode-badge{background:#1d1d23;box-shadow:0 0 0 1px #ffffff1f,0 0 14px #3d6bff55}
.mode-badge:hover{background:#212127}
.mode-badge svg{width:20px;height:20px;color:#ffffffb8}
.heading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:64px;text-align:center}
.heading h1{max-width:890px}
.heading .desc{margin:16px 0 32px;font-size:18px;font-weight:450;line-height:1.67;color:var(--ink)}
.heading-actions{display:flex;flex-direction:column;align-items:center;gap:16px}
.heading-actions .top{display:flex;align-items:center;gap:16px}
.hero-stage{width:100%;margin-top:80px;perspective:1600px}
.hero-shot{position:relative;width:min(1192px,100%);margin:0 auto;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#0f0f12;box-shadow:0 60px 120px -40px #00000059,0 0 0 1px #0000001a;transform:perspective(1600px) rotateX(26deg) scale(.9);transform-origin:50% 0;will-change:transform}
:root[data-theme=dark] .hero-shot{box-shadow:0 60px 120px -40px #000,0 0 0 1px #ffffff1f}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
.video-section{display:flex;gap:24px;width:100%;margin-top:88px;text-align:left}
.video-container{position:relative;flex:1;min-width:0;height:320px;border-radius:20px;overflow:hidden;box-shadow:var(--sh-media);background:#0f0f12;will-change:transform}
.video-container img{width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:30% 40%;will-change:transform}
.heading-testimonials{position:relative;width:480px;height:320px;flex-shrink:0;background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:var(--sh-card)}
.ht-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:35px;text-align:left;opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .4s,transform .5s}
.ht-slide.on{opacity:1;transform:none;pointer-events:auto}
.ht-slide .content{font-size:18px;font-weight:450;line-height:1.67;color:var(--ink)}
.ht-slide .bottom{display:flex;align-items:center}
.ht-slide .avatar{width:48px;height:48px;border-radius:48px;margin-right:16px}
.ht-slide .author{font-size:14px;font-weight:550;line-height:1.43}
.ht-slide .company{font-size:14px;line-height:1.43;color:var(--muted)}
.heading-testimonials .actions{position:absolute;right:35px;bottom:38px;z-index:1;display:flex;gap:8px;background:var(--surface)}
.logos{padding-top:25px}
.logos .heading2{margin-bottom:30px;text-align:center;font-size:15px;font-weight:450;line-height:1.6;color:var(--muted)}
.logos .carousel{display:flex;overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask-image:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}
.logos .group{display:flex;align-items:center;gap:64px;padding-right:64px;flex-shrink:0;animation:marquee 60s linear infinite}
.logos .group span{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--faint);white-space:nowrap}
.logos .group svg{width:26px;height:26px}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ---------- section heads ---------- */
.title-container{display:flex;align-items:center;gap:20px}
.description-container{display:flex;justify-content:space-between;gap:40px;margin:12px 0 64px}
.description-container .d18{max-width:736px}
.description-container .actions{display:flex;align-items:flex-end;flex-shrink:0}
.text-badge{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:550;line-height:1.43;color:var(--blue)}
.text-badge svg{width:16px;height:16px}

/* ---------- feature card ---------- */
.feature-card{display:flex;align-items:center;gap:80px}
.feature-card.reverse{flex-direction:row-reverse}
.feature-card .content{width:432px;flex-shrink:0}
.feature-card .title{margin:0 0 12px}
.feature-card .details{display:flex;flex-direction:column;gap:24px;margin:32px 0 0;padding:0;list-style:none}
.feature-card .details li{display:flex;align-items:center;gap:16px;font-size:18px;font-weight:550;line-height:1.67}
.feature-card .details svg{width:24px;height:24px;color:var(--blue);flex-shrink:0}
.feature-card .actions{margin-top:32px}
.feature-card .image-container{flex:1;min-width:0}
.media-box{position:relative;width:100%;max-width:680px;aspect-ratio:680/480}
.media-box.frame{display:grid;place-items:center;padding:36px}
.media-box.frame .shot{max-width:100%;max-height:100%;width:auto}

/* ---------- bento ---------- */
.bento-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:418px;gap:24px}
.bento-item{position:relative;isolation:isolate;width:100%;min-height:220px;border-radius:20px;overflow:hidden;justify-self:center;background:var(--panel)}
.bento-item.large{grid-column:span 2;max-width:584px}
.bento-item.small{grid-column:span 1;max-width:280px}
.bento-item .bcontent{position:relative;z-index:2;padding:30px 30px 0}
.bento-item .btitle{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--ink)}
.bento-item .bdesc{margin:12px 0 0;font-size:15px;font-weight:450;line-height:1.6;color:var(--muted)}
.bento-item .bimg{position:absolute;z-index:1;left:30px;bottom:-1px;width:auto;max-width:none;border-radius:12px 12px 0 0;box-shadow:var(--sh-shot);will-change:transform}
.bento-item .bimg.right{left:auto;right:-1px;border-radius:12px 0 0 0}
.bento-item .bimg.top{top:150px;bottom:auto}
.bento-item .bimg.center{left:0;right:0;margin:0 auto;bottom:44px;border-radius:12px}

/* ---------- gallery ---------- */
.gallery{position:relative}
.gallery .track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:8px 2px 30px;margin:-8px -2px 0;scroll-behavior:smooth}
.gallery .track::-webkit-scrollbar{display:none}
.annotate-card{flex:0 0 380px;max-width:380px;scroll-snap-align:start;background:var(--surface);border-radius:20px;overflow:hidden;box-shadow:var(--sh-card)}
.annotate-card .top{display:flex;align-items:center;gap:16px;padding:20px 24px}
.annotate-card .img{position:relative;height:300px;overflow:hidden;background:var(--panel)}
.annotate-card .img img{position:absolute;left:24px;top:0;width:calc(100% + 40px);max-width:none;border-radius:12px 0 0 0;box-shadow:var(--sh-shot)}
.annotate-card .img.text{padding:24px}
.gallery .navigation2{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* ---------- scroll showcases ---------- */
.showcase{position:relative;border-radius:20px;overflow:hidden;background:#0f0f12;will-change:transform}
.showcase img{width:100%;display:block}
/* sticky story: text steps on the left, pinned screenshot on the right */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.story .steps{display:flex;flex-direction:column}
.story .step{min-height:70vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s}
.story .step.active{opacity:1}
.story .step .num{font-size:14px;font-weight:600;color:var(--blue);margin-bottom:12px}
.story .step h3{margin-bottom:12px}
.story .pin{position:sticky;top:calc(50vh - 260px);height:520px}
.story .pin .frame{height:100%;display:grid;place-items:center;padding:36px}
.story .pin img{grid-area:1/1;max-height:100%;max-width:100%;width:auto;border-radius:14px;box-shadow:var(--sh-shot);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.story .pin img.on{opacity:1;transform:none}
.story .pin .frame{grid-template-areas:"a"}
.story .pin .frame>img{grid-area:a}
.story .dots{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
.story .dots i{width:6px;height:6px;border-radius:6px;background:var(--faint);transition:height .3s,background .3s}
.story .dots i.on{height:22px;background:var(--blue)}
/* scroll zoom: a full screenshot zooms into the part that matters */
.zoomstage{position:relative;height:260vh}
.zoomstage .sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.zoomstage .viewport{position:relative;width:min(100%,calc(70vh * 1.6));aspect-ratio:16/10;margin:0 auto;border-radius:20px;overflow:hidden;box-shadow:var(--sh-media);background:#0f0f12}
.zoomstage .viewport img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:0 0;will-change:transform}
.zoomstage .caps{position:relative;height:84px;margin-top:28px;text-align:center}
.zoomstage .cap{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
.zoomstage .cap.on{opacity:1;transform:none}
.zoomstage .cap b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.zoomstage .ring{position:absolute;border:2px solid var(--blue);border-radius:12px;box-shadow:0 0 0 9999px #00000059;opacity:0;transition:opacity .4s;pointer-events:none}
.zoomstage .ring.on{opacity:1}
/* pinned horizontal gallery */
.hscroll{position:relative}
.hscroll .sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hscroll .row{display:flex;gap:32px;padding:0 max(20px,calc((100vw - 1192px)/2));will-change:transform}
.hscroll figure{flex:0 0 min(860px,78vw);margin:0}
.hscroll figcaption{margin-top:16px;display:flex;justify-content:space-between;gap:20px;font-size:15px;color:var(--muted)}
.hscroll figcaption b{color:var(--ink);font-weight:600}
.hscroll .head{max-width:1232px;margin:0 auto 40px;padding:0 20px;width:100%}

.check-link{text-align:center;margin-top:40px}

/* changelog gallery (home) */
.testimonials-heading{display:flex;justify-content:space-between;margin-bottom:64px}
.testimonials-heading .r{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.testimonials-heading .score{text-align:right}
.testimonials-heading .score b{font-size:18px;font-weight:550;line-height:1.67;margin-right:5px}
.testimonial-card{flex:0 0 480px;max-width:480px;min-height:294px;padding:32px;background:var(--surface);border-radius:20px;box-shadow:var(--sh-card);scroll-snap-align:start}
.testimonial-card .top{display:flex;align-items:center;margin-bottom:36px}
.testimonial-card .avatar{width:48px;height:48px;border-radius:100%;margin-right:15px}
.testimonial-card .author{font-size:14px;font-weight:550;line-height:1.43}
.testimonial-card .nick{font-size:14px;line-height:1.43;color:var(--muted)}
.testimonial-card .tag{margin-left:auto;padding:5px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:12.5px;font-weight:600}
.testimonial-card ul{margin:0;padding-left:19px;list-style-type:"–  "}
.testimonial-card li{font-size:18px;font-weight:450;line-height:1.67;margin-bottom:6px}
.testimonial-card li::marker{color:var(--faint)}

/* ---------- footer ---------- */
.footer-section{position:relative;overflow:hidden;color:#fff;isolation:isolate}
.footer-section .bg{position:absolute;inset:0;z-index:-1}
.footer-section .bg .dark{position:absolute;inset:0;background:#0f0f12}
.footer-section .bg .gradient{position:absolute;inset:0;background:radial-gradient(45% 55% at 50% -12%,#0779ee 0%,transparent 70%),radial-gradient(40% 45% at 42% -2%,#0d03c8 0%,transparent 70%),radial-gradient(18% 22% at 37% 10%,#8e1f06 0%,transparent 70%),radial-gradient(16% 26% at 30% 6%,#70041d 0%,transparent 70%),radial-gradient(22% 22% at 72% 10%,#290b73 0%,transparent 70%);opacity:.85;will-change:transform}
.footer-section .bg .blur{position:absolute;inset:0;backdrop-filter:blur(60px);-webkit-backdrop-filter:blur(60px)}
.footer-layout{max-width:1344px;margin:0 auto;padding:20px}
.footer-section .top{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;max-width:584px;margin:0 auto;padding:100px 0 120px;text-align:center}
.footer-section .top .appicon{width:112px;height:112px;border-radius:26px;box-shadow:0 24px 60px -12px #0d44e8aa,0 0 0 1px #ffffff1f}
.footer-section .top .title{margin-top:34px;font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.footer-section .top .description{margin:8px 0 32px;font-size:18px;font-weight:450;line-height:1.67;color:#ffffffb8}
.footer-section .top .description .hl{color:#fff}
.footer-section .top .actions{display:flex;gap:20px}
.newsletter{display:flex;justify-content:space-between;align-items:center;padding:48px 0;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14}
.newsletter .title{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em}
.newsletter .description{margin:4px 0 0;font-size:15px;color:#ffffffb8}
.newsletter .r{display:flex;align-items:center;gap:12px;max-width:457px}
.f-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin-top:48px}
.f-links .section{flex:1;min-width:120px;margin:0;padding:0;list-style:none}
.f-links .ftitle{margin-bottom:16px;font-size:14px;font-weight:550;line-height:1.43}
.f-links a{display:flex;margin:8px 0;font-size:14px;line-height:1.43;color:#ffffffb8;transition:color .1s}
.f-links a:hover{color:#fff}
.f-bottom{display:flex;justify-content:space-between;align-items:center;padding:48px 0}
.f-bottom .copyright{display:flex;align-items:center;gap:8px;font-size:14px;color:#ffffffb8}
.f-bottom .iso2{display:flex;align-items:center;gap:5px;margin-left:4px;padding:7px 11px;border-radius:56px;background:#ffffff24;border:1px solid #ffffff14;font-size:13px;font-weight:550;line-height:1.23;color:#fff}
.f-bottom .iso2 svg{width:14px;height:14px}
.f-bottom .socials{display:flex;gap:25px}
.f-bottom .socials svg{width:22px;height:22px;color:#fff;opacity:.85}

/* ---------- product pages ---------- */
.p-heading-container{position:relative;overflow:hidden}
.p-heading{display:flex;gap:50px;padding:130px 0 150px}
.p-heading .left,.p-heading .right{flex:1;position:relative}
.p-heading .left{z-index:1;padding-top:30px}
.p-heading .desc{max-width:461px;margin:16px 0 32px;font-size:18px;font-weight:450;line-height:1.67}
.p-heading .heading-actions{align-items:flex-start}
.p-heading .photo{position:absolute;left:0;top:0;margin:-70px 0 0 -10px;width:820px;border-radius:20px;overflow:hidden;box-shadow:var(--sh-media);will-change:transform}
.p-heading .photo img{width:100%;display:block}
.feature-section{text-align:center}
.feature-section .fdesc{max-width:736px;margin:12px auto 64px;font-size:18px;line-height:1.67;color:var(--muted)}
.icons-group{display:flex;max-width:884px;margin:56px auto 0}
.icons-group .g{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;padding:0 32px;border-right:1px solid var(--line)}
.icons-group .g:last-child{border-right:none}
.icons-group .g svg{width:28px;height:28px;color:var(--blue)}
.icons-group .g span{font-size:15px;font-weight:600}
.tabs-feature{display:flex;align-items:flex-end;gap:40px;text-align:left}
.tabs-feature .items{flex:1;min-width:240px;margin:0;padding:0;list-style:none}
.tabs-feature .item{border-top:1px solid var(--line)}
.tabs-feature .item:first-child{border-top:none}
.tabs-feature .item-button{display:flex;align-items:center;width:100%;padding:24px 0;border:none;background:none;text-align:left;font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--faint);cursor:pointer;transition:color .2s,padding-bottom .2s}
.tabs-feature .item-button svg{width:24px;height:24px;margin-right:12px}
.tabs-feature .item.active .item-button{color:var(--blue);padding-bottom:8px}
.tabs-feature .dw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s}
.tabs-feature .dw>p{min-height:0;overflow:hidden;opacity:0;transition:opacity .7s;font-size:15px;line-height:1.6;color:var(--ink)}
.tabs-feature .item.active .dw{grid-template-rows:1fr}
.tabs-feature .item.active .dw>p{opacity:1;padding-bottom:24px}
.tabs-feature .media-container{position:relative;flex:0 0 auto;width:100%;max-width:850px;aspect-ratio:850/560;border-radius:20px;overflow:hidden;display:grid;background:var(--panel)}
.tabs-feature .slot{grid-area:1/1;position:relative;opacity:0;transition:opacity 0s linear .2s;display:grid;place-items:center;padding:40px}
.tabs-feature .slot.active{opacity:1;z-index:1;transition:opacity .25s}
.tabs-feature .slot img{max-width:100%;max-height:100%;width:auto;border-radius:14px;box-shadow:var(--sh-shot)}
.boxes{display:flex;justify-content:center;gap:24px}
.box{position:relative;flex:1;max-width:584px;aspect-ratio:584/440;border-radius:20px;overflow:hidden;text-align:left;background:var(--panel)}
.box .content{position:absolute;top:0;left:0;right:0;padding:32px;z-index:1}
.box .content .t20{margin-bottom:8px}
.box .bimg{position:absolute;left:32px;bottom:-1px;width:calc(100% - 32px);border-radius:12px 0 0 0;box-shadow:var(--sh-shot)}
.text-container{max-width:582px;margin:0 auto 56px;text-align:center}
.title-icon-row{display:flex;justify-content:center;align-items:center;gap:20px}

/* ---------- features page ---------- */
.f-heading{display:flex;flex-direction:column;align-items:center;padding:80px 20px 48px;text-align:center}
.f-heading h1{margin:0 0 24px}
.features{display:flex;justify-content:center;align-items:flex-start;gap:24px;padding:80px 20px}
.features .left{width:280px;position:sticky;top:150px;flex-shrink:0}
.features .right{width:100%;min-width:0;max-width:888px}
.f-menu{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.f-menu a{display:inline-block;padding:8px 12px;border-radius:14px;font-size:14px;font-weight:550;line-height:1.43;color:var(--muted);transition:all .1s}
.f-menu a:hover{color:var(--ink);background:var(--hover)}
.f-menu a.active{color:var(--ink);background:var(--hover);font-weight:600}
.f-section{padding-bottom:180px}
.f-section .ftitle{margin:0 0 20px}
.f-section .fdesc{margin:0 0 40px;font-size:18px;line-height:1.89}
.f-media{position:relative;width:100%;aspect-ratio:17/12;border-radius:20px;overflow:hidden;background:var(--panel);display:grid;place-items:center;padding:40px}
.f-media img{max-width:100%;max-height:100%;width:auto;border-radius:14px;box-shadow:var(--sh-shot)}
.f-list{display:grid;grid-template-columns:1fr 1fr;margin:40px 0 0;padding:0;list-style:none;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.f-list li{padding:32px;border-top:1px solid var(--line);font-size:15px;font-weight:550;line-height:1.6}
.f-list li:nth-child(-n+2){border-top:none}
.f-list li:nth-child(odd){border-right:1px solid var(--line)}
.f-list li:nth-child(odd):last-child{border-right:none;grid-column:1/-1}
.f-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-top:40px}
.f-card .it{display:flex;align-items:flex-start;gap:12px;padding:32px;border-top:1px solid var(--line)}
.f-card .it:nth-child(-n+2){border-top:none}
.f-card .it:nth-child(odd){border-right:1px solid var(--line)}
.f-card .it svg{width:24px;height:24px;color:var(--blue);flex-shrink:0}
.f-card .it b{display:block;font-size:15px;font-weight:550;margin-bottom:8px}
.f-card .it p{font-size:15px;color:var(--muted)}

/* ---------- pricing ---------- */
.pr-heading{display:flex;flex-direction:column;align-items:center;padding:80px 0 48px;text-align:center}
.pr-heading .d18{margin-top:24px;color:var(--ink)}
.pricing{display:flex;justify-content:center;gap:25px;margin:44px 0 32px}
.pricing .hl{position:relative;flex:1;max-width:432px;display:flex}
.pricing .hl::before{content:attr(data-label);position:absolute;inset:-44px -3px -3px;z-index:-1;border-radius:22px;text-align:center;font-size:15px;font-weight:550;line-height:44px;color:var(--blue);background:var(--blue-soft)}
.pricing .hl.neutral::before{color:var(--ink);background:var(--hover)}
.pricing .box2{flex:1;display:flex;flex-direction:column;padding:32px;background:var(--surface);border-radius:20px;box-shadow:var(--sh-media)}
.pricing .pname{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;font-size:21px;font-weight:550;line-height:1.67}
.pricing .price{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em}
.pricing .pdesc{font-size:15px;color:var(--muted)}
.pricing .details{display:flex;flex-direction:column;flex:1;gap:22px;margin-top:25px}
.pricing .benefit{display:flex;align-items:center;gap:16px;font-size:15px;font-weight:600}
.pricing .sub{display:flex;align-items:center;gap:16px;margin:-8px 0 0 12px;font-size:15px;color:var(--muted)}
.pricing .sub svg{width:20px;height:20px;color:var(--faint)}
.pricing .actions{margin-top:auto;padding-top:28px}
.pricing .actions .btn{width:100%}
.pricing .note{margin-top:20px;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pricing .note .text-btn{font-size:14px}
.billing-switch{position:relative;display:flex;padding:2px;border-radius:14px;background:var(--hover)}
.billing-switch span{position:relative;z-index:1;display:grid;place-items:center;height:32px;padding:0 13px;border-radius:12px;font-size:13px;font-weight:550}
.billing-switch span.on{background:var(--surface);box-shadow:var(--sh-btn)}
.small-print{text-align:center;font-size:14px;color:var(--muted);line-height:1.8}
.guarantee{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:120px 0;padding:32px;border-radius:20px;background:var(--surface);box-shadow:var(--sh-media)}
.guarantee .l{display:flex;align-items:center;gap:20px}
.guarantee .gi{width:56px;height:56px;border-radius:14px;background:var(--blue);display:grid;place-items:center;color:#fff}
.guarantee .gi svg{width:28px;height:28px}
.plans .plans-header,.plans .plans-row{display:grid;grid-template-columns:1fr 380px 380px;gap:16px}
.plans .plans-header{position:sticky;top:85px;z-index:3;background:linear-gradient(var(--bg) 80%,transparent);padding:12px 0 20px}
.plans .sticky-plan{display:flex;flex-direction:column;gap:8px;margin:0 38px;padding:12px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--sh-media);text-align:center}
.plans .sticky-plan b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.plans .sticky-plan small{font-size:14px;color:var(--muted)}
.plans .sticky-plan small strong{color:var(--ink);font-size:18px}
.plans .ph{display:flex;align-items:center;gap:16px;padding:48px 0 16px}
.plans .ph span{font-size:18px;font-weight:550}
.plans .plans-row{align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.plans .ph+.plans-row{border-top:none}
.plans .lab{font-size:15px}
.plans .val{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;font-size:15px}
.plans .val svg{width:22px;height:22px;color:var(--ink)}
.plans .val.dash{color:var(--faint)}
.inapp{display:flex;align-items:center;gap:64px;margin:0 0 120px}
.inapp .t{flex:1}
.inapp .frame{flex:0 0 520px;padding:36px}

/* ---------- FAQ ---------- */
.faq-heading{display:flex;flex-direction:column;align-items:center;padding:80px 0 48px;text-align:center}
.faq-heading .d18{margin-top:24px;color:var(--ink)}
.faq-section{max-width:800px;margin:0 auto;padding-bottom:80px}
.question{margin-bottom:5px;padding:18px 22px;border-radius:20px;font-size:18px;font-weight:600;line-height:1.67;cursor:pointer;transition:background .15s}
.question.active,.question:hover{background:var(--hover)}
.question .qt{display:flex;justify-content:space-between;align-items:center;user-select:none}
.question .plus{width:20px;height:20px;margin-left:20px;flex-shrink:0;transition:transform .3s}
.question.active .plus{transform:rotate(180deg)}
.question .answer{max-height:0;overflow:hidden;font-size:15px;font-weight:450;line-height:1.6;color:var(--ink);cursor:text;transition:max-height .25s,margin .25s}
.question.active .answer{margin-top:24px}
.question .answer a{color:var(--blue);font-weight:600}
.faq-title{text-align:center;margin:100px 0 48px}

/* ---------- changelog ---------- */
.cl-heading{display:flex;flex-direction:column;align-items:center;padding:96px 0 48px}
.versions{margin:0 auto 120px}
.version{display:grid;grid-template-columns:minmax(0,278px) minmax(0,1fr);gap:24px;align-items:start;padding:40px 0;border-bottom:1px solid var(--line)}
.version:first-child{padding-top:0}
.version .date{font-size:18px;line-height:1.67;color:var(--muted)}
.version .topbar{display:flex;align-items:center;margin-bottom:40px}
.version .number{font-size:24px;font-weight:600;line-height:1.333;letter-spacing:-.02em}
.version .text-badge{margin-left:20px}
.version .intro{margin-bottom:30px;font-size:18px;line-height:1.89}
.version .changes{margin:0;padding-left:19px;list-style-type:"–  "}
.version .change{margin-bottom:15px;padding-left:4px;font-size:15px;line-height:1.6}
.version .change::marker{color:var(--faint)}
.version .change b{font-weight:600}
.version .acts{display:flex;gap:25px;align-items:center;margin-bottom:40px}
.version .shot{margin-bottom:32px;max-width:720px}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(.94);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-scale.in{opacity:1;transform:none}
.reveal-clip{clip-path:inset(12% 12% 12% 12% round 20px);opacity:.4;transition:clip-path 1.2s var(--ease),opacity 1s var(--ease)}
.reveal-clip.in{clip-path:inset(0 0 0 0 round 20px);opacity:1}
.words .w{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.words.in .w{opacity:1;transform:none;filter:none}
.grad-title.words{opacity:0;transform:translateY(.3em);filter:blur(8px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.grad-title.words.in{opacity:1;transform:none;filter:none}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:1000;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
html.theme-anim *,html.theme-anim *::before{transition:background-color .35s,color .35s,border-color .35s,box-shadow .35s!important}

/* ---------- responsive ---------- */
@media (width<=1100px){.plans .plans-header,.plans .plans-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr)}.plans .sticky-plan{margin:0}}
@media (width<=1000px){
  .bento-grid{grid-template-columns:repeat(5,minmax(0,172px));justify-content:center}
  .bento-item{grid-column:span 2!important;max-width:368px!important;min-height:0}
  .bento-item:nth-child(6n+1),.bento-item:nth-child(6n+4),.bento-item:nth-child(6n+5){grid-column:span 3!important;max-width:564px!important}
  .feature-card{gap:40px}.feature-card .content{flex:1;width:auto}
  .features .left{display:none}
  .p-heading .right{display:none}
  .p-heading{flex-direction:column;padding:80px 0 0;text-align:center}
  .p-heading .left{padding-top:0}
  .p-heading .desc{margin:16px auto 32px}
  .p-heading .heading-actions{align-items:center}
  .tabs-feature{flex-direction:column;align-items:stretch}
  .newsletter{flex-direction:column;gap:40px}
  .footer-section .top{padding:30px 0 60px}
  .story{grid-template-columns:1fr;gap:0}
  .story .pin{top:84px;height:46vh;order:-1;z-index:2}
  .story .step{min-height:80vh;justify-content:flex-end;padding-bottom:16vh}
  .story .pin{height:38vh}
  .story .pin{background:var(--bg);padding-bottom:12px}
  .inapp{flex-direction:column}.inapp .frame{flex:auto;width:100%}
}
@media (width<=920px){
  .app-header{display:none}
  .m-header{display:flex}
  body{padding-top:76px}
}
@media (width<=850px){
  .feature-card,.feature-card.reverse{flex-direction:column;gap:35px}
  .feature-card .image-container{width:100%}
  .f-links{gap:64px;padding:0 15px}
  .f-bottom{align-items:flex-end}
  .f-bottom .copyright{flex-direction:column-reverse;align-items:flex-start;gap:16px}
  .hero-stage{width:100%;margin-top:80px;perspective:1600px}
.hero-shot{position:relative;width:min(1192px,100%);margin:0 auto;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#0f0f12;box-shadow:0 60px 120px -40px #00000059,0 0 0 1px #0000001a;transform:perspective(1600px) rotateX(26deg) scale(.9);transform-origin:50% 0;will-change:transform}
:root[data-theme=dark] .hero-shot{box-shadow:0 60px 120px -40px #000,0 0 0 1px #ffffff1f}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
.video-section{flex-direction:column}
  .video-container{height:auto;aspect-ratio:16/10}
  .heading-testimonials{width:100%;height:auto;min-height:300px}
  .description-container{flex-direction:column;gap:20px;margin-bottom:50px}
  .icons-group{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 0}
  .icons-group .g{border-right:none}
  .boxes{flex-direction:column;align-items:center}
  .box{width:100%}
  .pricing{flex-direction:column;align-items:center;gap:70px}
  .pricing .hl{width:100%}
  .version{grid-template-columns:1fr;gap:12px}
  .guarantee{flex-direction:column;align-items:flex-start}
  .plans .plans-header{top:76px}
  .zoomstage{height:220vh}
}
@media (width<=700px){
  .t60{font-size:42px;line-height:1.14}
  .t40{font-size:32px;line-height:1.25}
  .footer-section .top .title{font-size:32px}
  .f-list,.f-card{grid-template-columns:1fr}
  .f-list li,.f-card .it{border-right:none!important;border-top:1px solid var(--line)!important;padding:24px}
  .f-list li:first-child,.f-card .it:first-child{border-top:none!important}
  .f-media{padding:20px}
  .question{padding:15px;border-radius:10px}
  .testimonials-heading{flex-direction:column;margin-bottom:45px}
  .testimonials-heading .r{align-items:flex-start;gap:20px;margin-top:20px}
  .testimonials-heading .score{text-align:left}
  .heading-testimonials .actions{right:24px;bottom:24px}
  .ht-slide{padding:28px}
  .plans .plans-header,.plans .plans-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
  .plans .lab,.plans .val{font-size:14px}
  .plans .sticky-plan b{font-size:16px}
  .media-box.frame,.frame.fit,.tabs-feature .slot{padding:20px}
  .hscroll figure{flex-basis:86vw}
}
@media (width<=640px){
  .page-content{gap:100px}
  .title-container{flex-direction:column;align-items:flex-start}
  .heading-actions .top{flex-direction:column;align-items:stretch;width:100%}
  .heading-actions,.description-container .actions,.description-container .actions .btn,.feature-card .actions .btn{width:100%}
  .heading-actions .top .btn{width:100%}
  .annotate-card{flex-basis:86%}
  .testimonial-card{flex-basis:88%}
}
@media (width<=624px){
  .bento-grid{grid-template-columns:repeat(1,minmax(0,584px));grid-auto-rows:380px}
  .bento-grid .bento-item:nth-child(n){grid-column:span 1!important;max-width:584px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.reveal-scale,.reveal-clip,.words .w,.grad-title.words{opacity:1;transform:none;filter:none;clip-path:none}
  .zoomstage{height:auto}.zoomstage .sticky{position:static;height:auto;padding:40px 0}
  .hscroll .sticky{position:static;height:auto}.hscroll .row{overflow-x:auto}
}