/* The feature carousel: one liquid-glass stage. Chapters sit on a rail, pages on a strip, and colour is carried by --tone,
   which animates between chapters. Motion is orchestrated by features.js; this file holds the resting states. */
@property --tone { syntax:'<color>'; inherits:true; initial-value:#69d7e6; }
.feature-explorer { --tone:#69d7e6; --pad-x:30px; --pad-t:22px; --pad-b:16px; --stage-min:472px; padding:36px 24px 0; scroll-margin-top:calc(var(--header) + 20px); transition:--tone .6s var(--ease); }
.feature-explorer[data-tone=mint] { --tone:#80dfb7; }
.feature-explorer[data-tone=blue] { --tone:#91b6ff; }
.feature-explorer[data-tone=amber] { --tone:#efc77f; }
.feature-explorer[data-tone=rose] { --tone:#f59cae; }
.feature-explorer[data-tone=violet] { --tone:#c1adfb; }
.feature-explorer[data-tone=sky] { --tone:#8bb4ff; }
.feature-heading { max-width:1240px; margin:0 auto 18px; display:flex; justify-content:space-between; align-items:end; gap:25px; }
.feature-heading .kicker { color:#97d8d4; font-size:10px; letter-spacing:.15em; }
.feature-heading .kicker::before,.feature-heading .kicker::after { display:none; }
.feature-heading h2 { font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.038em; margin-top:8px; }
.feature-heading>p { max-width:340px; color:#a4b1c2; font-size:14px; line-height:1.65; }
.feature-glass { position:relative; isolation:isolate; width:min(100%,1240px); margin:auto; border:1px solid color-mix(in srgb,var(--tone) 30%,transparent); border-radius:26px; background:linear-gradient(125deg,rgba(30,44,58,.84),rgba(14,20,32,.95) 46%,color-mix(in srgb,var(--tone) 9%,rgba(10,14,22,.94))); box-shadow:inset 0 1px 0 #ffffff17,0 28px 90px #0007,0 0 110px -52px color-mix(in srgb,var(--tone) 55%,transparent); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.feature-blooms { position:absolute; z-index:-1; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
.feature-blooms i { position:absolute; border-radius:50%; animation:fx-drift-a 23s ease-in-out infinite alternate; animation-play-state:paused; }
.feature-blooms i:nth-child(1) { width:760px; height:760px; left:-240px; top:-330px; background:radial-gradient(circle,color-mix(in srgb,var(--tone) 34%,transparent),transparent 68%); opacity:.5; }
.feature-blooms i:nth-child(2) { width:700px; height:700px; right:-260px; top:-300px; background:radial-gradient(circle,color-mix(in srgb,color-mix(in srgb,var(--tone) 60%,#9b7bf0) 30%,transparent),transparent 68%); opacity:.42; animation-name:fx-drift-b; animation-duration:31s; }
.feature-blooms i:nth-child(3) { width:640px; height:640px; left:30%; bottom:-380px; background:radial-gradient(circle,color-mix(in srgb,color-mix(in srgb,var(--tone) 70%,#f0186f) 22%,transparent),transparent 68%); opacity:.34; animation-name:fx-drift-c; animation-duration:27s; }
@keyframes fx-drift-a { to { transform:translate3d(120px,-70px,0); } }
@keyframes fx-drift-b { to { transform:translate3d(-140px,90px,0); } }
@keyframes fx-drift-c { to { transform:translate3d(100px,-110px,0); } }
.feature-explorer[data-live=true] .feature-blooms i { animation-play-state:running; }
.feature-sheen { position:absolute; z-index:4; left:14px; right:14px; top:-1px; height:2px; border-radius:2px; opacity:0; background:linear-gradient(90deg,transparent,var(--tone) 30%,#fff 50%,var(--tone) 70%,transparent); pointer-events:none; }

.feature-rail { position:relative; z-index:2; padding:14px 20px 12px; border-bottom:1px solid #ffffff10; }
.feature-rail-track { position:relative; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x proximity; padding:6px; margin:-5px -6px; }
.feature-rail-track::-webkit-scrollbar { display:none; }
.feature-rail-pill { position:absolute; z-index:0; left:0; top:6px; bottom:6px; width:var(--pill-w,0); transform:translateX(var(--pill-x,0)); border-radius:10px; border:1px solid color-mix(in srgb,var(--tone) 38%,transparent); background:color-mix(in srgb,var(--tone) 12%,transparent); box-shadow:0 0 26px -8px color-mix(in srgb,var(--tone) 60%,transparent); pointer-events:none; }
.feature-rail-track.is-ready .feature-rail-pill { transition:transform .46s var(--ease),width .46s var(--ease); }
.feature-chapter { position:relative; z-index:1; flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:9px 15px; border:1px solid transparent; border-radius:10px; background:none; color:#a9b8c9; font:600 12px/1.2 var(--sans); white-space:nowrap; cursor:pointer; scroll-snap-align:center; transition:color .2s,background-color .2s; }
.feature-chapter i { width:7px; height:7px; border-radius:50%; background:var(--dot,var(--tone)); opacity:.5; transition:opacity .25s,box-shadow .25s; }
.feature-chapter:hover { color:#f0f6ff; background:#ffffff08; }
.feature-chapter[aria-current=true] { color:#fff; }
.feature-chapter[aria-current=true] i { opacity:1; box-shadow:0 0 0 3px color-mix(in srgb,var(--dot,var(--tone)) 24%,transparent),0 0 10px var(--dot,var(--tone)); }
.feature-chapter[data-tone=cyan] { --dot:#69d7e6; }
.feature-chapter[data-tone=mint] { --dot:#80dfb7; }
.feature-chapter[data-tone=blue] { --dot:#91b6ff; }
.feature-chapter[data-tone=amber] { --dot:#efc77f; }
.feature-chapter[data-tone=rose] { --dot:#f59cae; }
.feature-chapter[data-tone=violet] { --dot:#c1adfb; }
.feature-chapter[data-tone=sky] { --dot:#8bb4ff; }

.feature-stage { position:relative; z-index:1; display:grid; min-height:var(--stage-min); padding:var(--pad-t) var(--pad-x) var(--pad-b); touch-action:pan-y pinch-zoom; }
.feature-slide { grid-area:1/1; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:42px; align-items:center; min-width:0; }
.feature-slide[data-state=idle] { display:none; }
.feature-slide[data-state=staging] { position:absolute; left:var(--pad-x); right:var(--pad-x); top:var(--pad-t); visibility:hidden; pointer-events:none; }
.feature-slide[data-state=entering] { z-index:2; pointer-events:none; }
.feature-slide[data-state=entering]:not([data-plain]) :is(.feature-window,.feature-peek,.feature-visual figcaption,.feature-eyebrow,.feature-title,.feature-lead,.feature-access,.feature-point,.feature-detail,.feature-docs) { opacity:0; }
.feature-slide[data-state=leaving] { z-index:1; pointer-events:none; }

.feature-visual { position:relative; min-width:0; margin:0; container-type:inline-size; }
.feature-window { position:relative; width:90%; border-radius:13px; }
.feature-slide[data-kind=scene] .feature-window { width:92%; }
.feature-tilt { position:relative; border-radius:inherit; transform:perspective(1200px) rotateX(calc(var(--ty,0) * -2.2deg)) rotateY(calc(var(--tx,0) * 2.8deg)); transition:transform .35s var(--ease); }
.feature-slide[data-kind=scene] .feature-tilt { transform:none; transition:none; }
.feature-enlarge { position:relative; display:block; width:100%; aspect-ratio:16/10; padding:0; border:1px solid #ffffff26; border-radius:13px; background:#0a0e15; overflow:hidden; box-shadow:0 26px 54px -18px #000c,0 0 0 1px #00000066; cursor:zoom-in; touch-action:pan-y; }
.feature-enlarge[hidden],.feature-scene[hidden],.feature-sim[hidden],.feature-peeks[hidden] { display:none; }
.feature-frame { position:absolute; inset:0; transform-origin:30% 28%; }
.feature-slide[data-state=current] .feature-frame { animation:fx-drift 24s ease-in-out infinite alternate; animation-play-state:paused; }
.feature-explorer[data-live=true] .feature-slide[data-state=current] .feature-frame { animation-play-state:running; }
@keyframes fx-drift { from { transform:scale(1); } to { transform:scale(1.035) translate3d(-.5%,-.4%,0); } }
.feature-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; background:#0a0e15; }
.feature-focus { position:absolute; left:calc(var(--fx,0) * 100%); top:calc(var(--fy,0) * 100%); width:calc(var(--fw,.3) * 100%); height:calc(var(--fw,.3) * 100%); border:1.5px solid var(--tone); border-radius:7px; box-shadow:0 0 0 100vmax #04070d70,0 0 22px color-mix(in srgb,var(--tone) 60%,transparent); opacity:0; transition:opacity .25s,left .4s var(--ease),top .4s var(--ease),width .4s var(--ease),height .4s var(--ease); pointer-events:none; }
.feature-slide[data-focus] .feature-focus { opacity:1; }
.feature-decor { position:absolute; inset:0; pointer-events:none; }
.feature-pulse { position:absolute; left:calc(var(--px) * 100%); top:calc(var(--py) * 100%); width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--tone); box-shadow:0 0 12px var(--tone); }
.feature-pulse::after { content:''; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--tone); animation:fx-ping 2.4s ease-out infinite; animation-play-state:paused; }
.feature-explorer[data-live=true] .feature-pulse::after { animation-play-state:running; }
@keyframes fx-ping { from { transform:scale(1); opacity:.9; } to { transform:scale(3.6); opacity:0; } }
.feature-enlarge-hint { position:absolute; right:10px; bottom:10px; display:flex; gap:6px; align-items:center; border:1px solid #8ca2b750; border-radius:5px; background:#111b2cee; color:#d8e7f5; padding:5px 8px; font:600 10px/1.4 var(--sans); box-shadow:0 4px 15px #0004; opacity:.0; transition:opacity .25s; }
.feature-enlarge:hover .feature-enlarge-hint,.feature-enlarge:focus-visible .feature-enlarge-hint { opacity:1; }
@media(hover:none) { .feature-enlarge-hint { opacity:.92; } }
.feature-scene { position:relative; width:100%; aspect-ratio:16/10; container-type:size; overflow:hidden; border:1px solid #ffffff26; border-radius:13px; background:#0a0e15; box-shadow:0 26px 54px -18px #000c,0 0 0 1px #00000066; color:#dfe9f4; }
.feature-scene[data-live=false] *,.feature-peek-scene[data-live=false] * { animation-play-state:paused !important; }
.feature-sim { position:absolute; z-index:4; left:12px; top:12px; padding:4px 9px; border:1px solid color-mix(in srgb,var(--tone) 50%,#ffffff26); border-radius:999px; background:#0a0f17d9; color:var(--tone); font:700 9px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.feature-peeks { position:absolute; z-index:3; right:0; top:3.4%; width:27%; display:grid; gap:2.4cqw; pointer-events:none; }
.feature-peek { position:relative; aspect-ratio:16/10; border:1px solid color-mix(in srgb,var(--tone) 48%,#ffffff30); border-radius:11px; overflow:hidden; background:#0a0e15; box-shadow:0 18px 36px -14px #000d,0 0 30px -12px color-mix(in srgb,var(--tone) 55%,transparent); transition:transform .35s var(--ease),opacity .3s,border-color .3s,box-shadow .3s; }
.feature-peek-view { position:absolute; inset:0; overflow:hidden; }
.feature-peek-view img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-peek-scene { position:absolute; inset:0; container-type:size; overflow:hidden; color:#dfe9f4; }
.feature-peek-label { position:absolute; z-index:2; left:6px; bottom:6px; max-width:calc(100% - 12px); padding:2px 8px; border:1px solid #ffffff22; border-radius:999px; background:#0a0f17dd; color:#dce9f6; font:600 9px/1.6 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature-peek-tag { position:absolute; z-index:2; right:6px; top:6px; padding:1px 7px; border:1px solid color-mix(in srgb,var(--tone) 50%,#ffffff26); border-radius:999px; background:#0a0f17dd; color:var(--tone); font:700 8px/1.6 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.feature-peek .pc-replay { display:none; }
.feature-slide[data-peek] .feature-peek { opacity:.55; }
.feature-slide[data-intro] .feature-peek { opacity:0; }
.feature-slide[data-peek] .feature-peek.is-active { opacity:1; transform:translate3d(-8px,0,0) scale(1.04); border-color:var(--tone); box-shadow:0 22px 40px -14px #000e,0 0 34px -6px color-mix(in srgb,var(--tone) 70%,transparent); }
.feature-visual figcaption { display:flex; justify-content:space-between; gap:12px; margin-top:14px; color:#a2b0c1; font:400 10px/1.5 var(--sans); }
.feature-visual figcaption span:last-child { color:var(--tone); white-space:nowrap; }

.feature-copy { min-width:0; }
.feature-eyebrow { color:var(--tone); font:600 10px/1.6 var(--mono); text-transform:uppercase; letter-spacing:.07em; }
.feature-title { font-size:clamp(26px,2.45vw,35px); line-height:1.1; letter-spacing:-.034em; margin:10px 0 12px; max-width:13em; }
.feature-lead { font-size:13.5px; line-height:1.7; color:#c2ccda; min-height:72px; }
.feature-access { display:inline-block; padding:5px 8px; border-radius:5px; border:1px solid #90dcc14d; background:#79cba80d; color:#9ce5c5; margin:12px 0 0; font:600 10px/1.5 var(--sans); }
.feature-access[data-access=pro] { border-color:#d8b46d66; background:#d0aa5c12; color:#f0d195; }
.feature-access[data-access=mixed] { border-color:#a4bac64d; color:#d1dde9; background:#a4bac608; }
.feature-points { list-style:none; padding:0; margin:8px -9px 10px; display:grid; gap:1px; }
.feature-point { display:flex; gap:10px; margin:0; padding:5px 9px; border-radius:8px; font-size:12.5px; line-height:1.5; color:#cad6e3; transition:background-color .2s,color .2s; }
.feature-point::before { content:'+'; color:var(--tone); font-weight:600; transition:transform .25s var(--ease); }
.feature-point[data-peek] { cursor:pointer; }
.feature-point.is-active { background:color-mix(in srgb,var(--tone) 10%,transparent); color:#f1f7fd; }
.feature-point.is-active::before { transform:scale(1.3); }
.feature-detail { color:#a4b3c4; font-size:10.5px; line-height:1.6; border-top:1px solid #ffffff12; padding-top:10px; min-height:46px; }
.feature-docs { display:inline-flex; align-items:center; gap:8px; color:var(--tone); font:600 11px/1.4 var(--sans); margin-top:6px; padding:4px 0; }
.feature-docs:hover { text-decoration:underline; text-underline-offset:4px; }

.feature-error { position:relative; z-index:2; margin:0 30px 14px; padding:12px; border:1px solid #d4ab6470; border-radius:7px; color:#f0d5a1; font-size:12px; }
.feature-foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:80px; padding:12px 24px 14px; border-top:1px solid #ffffff12; border-radius:0 0 26px 26px; background:#09111b50; }
.feature-pages { display:flex; align-items:center; gap:8px; min-width:0; min-height:58px; padding:7px; margin:-5px; overflow-x:auto; scrollbar-width:none; }
.feature-pages::-webkit-scrollbar { display:none; }
.feature-pages-note { color:#96a9bf; font-size:11px; padding-left:2px; }
.feature-page { position:relative; flex:0 0 auto; width:98px; padding:0; border:1px solid #ffffff1f; border-radius:8px; overflow:hidden; background:#0a0e15; color:#e4eef9; cursor:pointer; opacity:.7; transition:opacity .2s,transform .25s var(--ease),border-color .2s,box-shadow .25s; }
.feature-page img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:left top; }
.feature-page span { position:absolute; left:0; right:0; bottom:0; padding:14px 6px 4px; background:linear-gradient(transparent,#05080cf2); font:600 9px/1.2 var(--sans); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feature-page:hover { opacity:1; transform:translateY(-2px); }
.feature-page[aria-current=true] { opacity:1; border-color:var(--tone); box-shadow:0 0 0 1px var(--tone),0 10px 22px -8px color-mix(in srgb,var(--tone) 65%,transparent); }
.feature-controls { display:flex; align-items:center; gap:15px; flex:none; }
.feature-controls button { display:grid; place-items:center; width:40px; height:40px; border:1px solid #6c839649; border-radius:9px; background:#ffffff04; color:#c5d8ea; cursor:pointer; transition:color .2s,border-color .2s,background-color .2s,transform .2s var(--ease); }
.feature-controls button:hover { color:var(--tone); border-color:var(--tone); background:color-mix(in srgb,var(--tone) 9%,transparent); }
.feature-controls button:active { transform:scale(.94); }
.feature-count { min-width:52px; text-align:center; font:600 11px/1 var(--mono); color:var(--tone); }
.feature-explorer[data-loading=true] .feature-count { opacity:.45; }

.product-pillars { max-width:1240px; margin:34px auto 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #ffffff16; }
.product-pillars article { min-width:0; padding:22px 22px; }
.product-pillars article+article { border-left:1px solid #ffffff12; }
.product-pillars .kicker { color:#97d8d4; font-size:9px; letter-spacing:.12em; }
.product-pillars .kicker::before,.product-pillars .kicker::after { display:none; }
.product-pillars h3 { margin:12px 0 10px; font-size:20px; line-height:1.25; letter-spacing:-.025em; }
.product-pillars p { color:#afbdcf; font-size:13px; line-height:1.7; }
.product-pillars a { display:inline-flex; align-items:center; min-height:36px; margin-top:9px; color:#9cdce5; font-size:11px; line-height:1.5; }
.product-pillars a:hover { text-decoration:underline; text-underline-offset:4px; }

.feature-lightbox { padding:0; border:1px solid #536979; border-radius:13px; background:#0b121d; color:#e1ecf5; width:min(96vw,1800px); max-width:none; max-height:94dvh; box-shadow:0 35px 100px #000b; }
.feature-lightbox::backdrop { background:#050910e8; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.feature-lightbox header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 17px; border-bottom:1px solid #334150; }
.feature-lightbox h2 { font-size:16px; }
.feature-lightbox button { min-height:34px; min-width:64px; padding:6px 12px; color:#d8e5f1; border:1px solid #526676; border-radius:6px; background:#ffffff08; cursor:pointer; }
.feature-lightbox img { width:100%; max-height:calc(94dvh - 70px); object-fit:contain; }
.feature-alias { position:absolute; top:0; pointer-events:none; scroll-margin-top:var(--header); }
.site-home .pro-band { margin-top:80px; padding:55px 0; }
.site-home .pro-grid { gap:35px; }
.site-home .pro-grid h2 { font-size:clamp(32px,3.5vw,48px); }
.site-home .close { padding:70px 24px; }
.site-home .close-mark,.site-home .close .hint { display:none; }
.site-home .close h2 { font-size:clamp(32px,4vw,52px); }

@media(min-width:1500px) { .feature-explorer { padding-inline:100px; } }
@media(max-height:820px) and (min-width:861px) { .feature-explorer { --stage-min:466px; padding-top:30px; } .feature-heading { margin-bottom:16px; } .feature-heading h2 { font-size:clamp(28px,2.8vw,40px); } .feature-lead { min-height:76px; } .feature-detail { min-height:48px; } .feature-foot { min-height:78px; padding-block:10px 12px; } .feature-pages { min-height:54px; } .feature-page { width:88px; } }
@media(max-width:1100px) { .feature-explorer { --pad-x:24px; --stage-min:470px; } .feature-slide { grid-template-columns:minmax(0,1.3fr) minmax(0,.95fr); gap:28px; } .feature-title { font-size:30px; } .feature-chapter { padding-inline:12px; } .product-pillars { grid-template-columns:repeat(2,minmax(0,1fr)); } .product-pillars article:nth-child(3) { border-left:0; } .product-pillars article:nth-child(n+3) { border-top:1px solid #ffffff12; } }
@media(max-width:860px) {
  .feature-explorer { --pad-x:20px; --pad-t:20px; --pad-b:18px; --stage-min:0px; padding:48px 18px 0; }
  .feature-heading { display:block; }
  .feature-heading>p { max-width:37em; margin-top:15px; }
  .feature-glass { border-radius:19px; }
  .feature-slide { grid-template-columns:1fr; gap:22px; align-items:start; }
  .feature-window { width:100%; }
  .feature-peeks { position:static; width:100%; margin-top:10px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .feature-slide[data-peek] .feature-peek.is-active { transform:translate3d(0,-3px,0) scale(1.03); }
  .feature-lead { min-height:0; }
  .feature-detail { min-height:0; }
  .feature-foot { border-radius:0 0 19px 19px; }
}
@media(max-width:560px) {
  .feature-explorer { padding:42px 12px 0; --pad-x:14px; }
  .feature-slide[data-kind=scene] .feature-window { width:100%; }
  .feature-scene { aspect-ratio:1/1; }
  .feature-heading { padding-inline:7px; }
  .feature-heading h2 { font-size:32px; }
  .feature-rail { padding:10px 10px 8px; }
  .feature-chapter { min-height:42px; }
  .feature-title { font-size:31px; max-width:12em; }
  .feature-lead { font-size:13px; line-height:1.7; }
  .feature-visual figcaption { font-size:9px; }
  .feature-visual figcaption span:last-child { display:none; }
  .feature-foot { padding:12px 12px 14px; gap:10px; }
  .feature-page { width:76px; }
  .feature-controls { gap:8px; }
  .feature-controls button { width:42px; height:42px; }
  .feature-error { margin:0 14px 14px; }
  .feature-lightbox { width:calc(100vw - 16px); }
  .feature-lightbox h2 { font-size:14px; }
  .product-pillars { grid-template-columns:1fr; }
  .product-pillars article { padding:20px 7px; }
  .product-pillars article+article { border-left:0; border-top:1px solid #ffffff12; }
  .product-pillars h3 { margin-top:9px; }
  .site-home .pro-band { margin-top:55px; }
  .site-home .close { padding:55px 18px; }
}
@media(prefers-reduced-motion:reduce) { .feature-explorer,.feature-explorer *,.feature-explorer *::before,.feature-explorer *::after { animation:none !important; transition:none !important; } .feature-glass,.feature-lightbox::backdrop { -webkit-backdrop-filter:none; backdrop-filter:none; } .feature-tilt { transform:none; } }
html:not(.js) :is(.feature-rail,.feature-foot) { display:none; }