/* FrameDrop marketing site — base system.
   Dark only. System stack. Type 21/15/13/12/11. Spacing 6/10/14/22.
   Almost-monochrome Apple-like liquid glass; the app's aura is the one
   colour voice, kept inside the demo panel. */
:root{
  color-scheme:dark;
  --ground:#08090c;
  --ground-2:#0c0d12;
  --text:#f5f5f7;
  --muted:#a1a1a6;
  --faint:#9a9aa0;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.07);
  --query:21px;--prominent:15px;--body:13px;--label:12px;--micro:11px;
  --tight:6px;--snug:10px;--normal:14px;--wide:22px;
  --radius:26px;
  --surface:.46s;--entrance:.52s;--height:.78s;--settle:.28s;--exit:.16s;
  --spring:linear(0,.1 8%,.42 20%,.78 33%,.97 46%,1.012 58%,1.006 72%,1);
  --arrival:linear(0,.22 12%,.68 28%,1.03 46%,1.028 60%,.998 78%,1);
  --grow:linear(0,.14 9%,.55 24%,.94 40%,1.035 54%,1.012 70%,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",sans-serif;
  font-size:var(--body);
  font-synthesis:none;
}
*{box-sizing:border-box}
#bg-aura{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
main,footer.site-footer{position:relative;z-index:1}
html{scroll-behavior:smooth;scroll-padding-top:66px}
body{
  margin:0;background:var(--ground);color:var(--text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.045),transparent 60%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:2px solid #cbd5e8;outline-offset:4px;border-radius:6px}
::selection{background:#3a3d46;color:#fff}
.wrap{width:min(1280px,calc(100% - 44px));margin-inline:auto}
/* Header — quiet sticky glass like macOS chrome. */
.site-header{
  position:sticky;top:0;z-index:20;height:60px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,9,12,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line-soft);
}
.site-header.wrap{width:min(1280px,calc(100% - 44px))}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:17px;font-weight:600;letter-spacing:-.3px}
.wordmark img{width:24px;height:24px}
.site-header nav{display:flex;gap:22px;align-items:center;font-size:var(--label);font-weight:500}
.site-header nav>a{color:#b8b9bf;transition:color var(--settle)}
.site-header nav>a:hover{color:#fff}
.nav-download{padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.05);color:var(--text)}
.nav-download:hover{background:rgba(255,255,255,.1)}
.site-header nav span{margin-left:6px;opacity:.6}
/* Hero copy — dense, left-aligned, one clear focal number. */
.hero{position:relative;overflow:hidden}
.hero-composition{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 0 72px}
.hero-copy{position:relative;z-index:1;max-width:760px;display:flex;flex-direction:column;align-items:center}
.hero-lockup{height:128px;width:auto;max-width:60%;margin:0 0 28px;filter:drop-shadow(0 14px 34px rgba(0,0,0,.55))}
/* Speed boast: one grand sentence under the film. */
.speed-boast{text-align:center;padding:0 0 76px;margin-top:-24px}
.speed-sentence{font-size:clamp(32px,4.6vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1.18;margin:0 auto;max-width:820px;color:var(--muted)}
.speed-sentence span{color:var(--text)}
.hero h1{margin:0;font-weight:600;letter-spacing:-.04em;line-height:1.04}
.collection-count{display:block;font-size:clamp(56px,7vw,88px);font-weight:600;letter-spacing:-.055em;line-height:1.0;color:var(--text);font-variant-numeric:tabular-nums}
.collection-subline{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--muted);margin-top:10px}
.hero-description{color:var(--muted);font-size:16px;line-height:1.6;margin:16px 0 0;max-width:400px}
.hero-description strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin:24px 0 10px}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:24px;
  border:1px solid rgba(255,255,255,.28);
  font-size:14px;font-weight:600;letter-spacing:-.1px;
  transition:transform var(--settle) var(--spring),box-shadow var(--settle),background var(--settle);
}
.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.primary{color:#0b0c0f;background:linear-gradient(165deg,#fff,#d7d8dc);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.12),0 6px 22px rgba(0,0,0,.4)}
.primary:hover{background:linear-gradient(165deg,#fff,#eceef2);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 0 22px rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.5)}
.text-link{font-size:13px;color:#c7c9d1}
.text-link:hover{color:#fff}
.requirements{margin:6px 0 0;color:var(--faint);font-size:var(--micro);line-height:1.6}
.requirements span{padding:0 6px;opacity:.6}
/* Stage + panel base. Faithful sizes live in hero.css; this is the material. */
.demo-wrap{width:min(860px,100%);min-width:0;margin:30px 0 0}
/* The scene is a fixed 860x480 design canvas scaled as one unit, so the
   film keeps its exact aspect ratio at every viewport instead of the
   composition reflowing. #demo-scene's transform is set from main.js. */
.stage{aspect-ratio:860/480;height:auto;position:relative;display:flex;justify-content:center;align-items:flex-start;isolation:isolate}
.scene{position:absolute;inset:0;width:860px;height:480px;transform:scale(var(--scene-scale,1));transform-origin:top left;container-type:inline-size}
.stage-glow{position:absolute;z-index:-2;width:min(900px,110%);height:460px;top:-16px;background:radial-gradient(ellipse at 50% 38%,rgba(255,255,255,.07),transparent 55%),radial-gradient(ellipse at 50% 70%,rgba(255,255,255,.035),transparent 50%);filter:blur(40px)}
.search-panel{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  width:480px;height:64px;max-width:100%;
  border-radius:var(--radius);overflow:hidden;
  background:rgba(11,11,14,.66);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(0,0,0,.35),0 22px 44px rgba(0,0,0,.55),0 44px 88px rgba(0,0,0,.35);
  transition:width var(--surface) var(--spring),height var(--surface) var(--spring),border-radius var(--surface) var(--spring),opacity var(--exit) ease-out;
  contain:layout paint;will-change:width,height;
  /* Centred by compositor, not by layout: left is stage-stable and the
     -50% tracks width on the GPU, so the shell's centre never re-rounds
     mid-morph and the box cannot shake. */
}
.search-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.38),rgba(255,255,255,.02) 28%,transparent 48%,rgba(255,255,255,.14) 74%,rgba(255,255,255,.05));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.search-field{position:absolute;top:0;left:50%;transform:translateX(-50%);height:64px;width:min(480px,100cqw - 32px);display:flex;align-items:center;gap:14px;padding:0 22px;z-index:1;white-space:nowrap}
.search-field>svg{width:20px;height:20px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.6;flex-shrink:0}
.query{font-size:var(--query);letter-spacing:-.3px;color:rgba(255,255,255,.94);overflow:hidden;text-overflow:ellipsis}
.trailing{margin-left:auto;position:relative;width:66px;height:28px;flex-shrink:0;transition:width .2s ease-out}
.trailing-opt,.trailing-group{position:absolute;transition:opacity .18s ease-out,transform .28s var(--spring)}
.trailing-opt{inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:rgba(255,255,255,.38);background:rgba(255,255,255,.045);border-radius:6px;padding:5px 8px;white-space:nowrap}
.trailing-group{top:0;right:0;height:28px;display:flex;align-items:center;gap:8px}
.trailing-clear{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trailing-clear::after{content:"✕";width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.38);color:#101216;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
.share-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border-radius:20px;padding:7px 13px;white-space:nowrap}
.share-pill svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.caret{height:22px;width:1px;background:#e8eaf0;margin-left:-10px;flex-shrink:0;animation:blink 1s steps(1) infinite}
.aura{position:absolute;inset:0;opacity:0;overflow:hidden;transition:opacity .3s ease}
.aura canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.aura:not(.shader-ready) canvas{display:none}
.aura.shader-ready .aura-flow{display:none}
.aura-flow{position:absolute;inset:-40px;background:conic-gradient(from 210deg,#3a3d46,#6b6f7c,#2a2d34,#8b8f9a,#3a3d46);filter:blur(28px) saturate(.4);opacity:.4;animation:aura-flow 7s ease-in-out infinite alternate;animation-play-state:paused}
.results-content{position:absolute;top:64px;left:50%;transform:translateX(-50%);width:min(700px,100cqw - 16px);opacity:0;transition:opacity var(--exit) ease-out;z-index:1}
.panel-divider{height:1px;background:rgba(255,255,255,.075);margin:0 20px}
.results-bar{min-height:38px;padding:0 22px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:rgba(255,255,255,.46);font-size:var(--label);font-weight:500}
.results-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:10px 16px;height:320px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 92%,transparent);mask-image:linear-gradient(#000 92%,transparent)}
.image-column{display:flex;flex-direction:column;gap:9px;min-width:0}
.image-tile,.mini-image{background-image:url('assets/demo-atlas.png');background-size:300% 200%;background-repeat:no-repeat;background-color:rgba(255,255,255,.045);filter:saturate(.12) brightness(.97)}
.image-tile{height:220px;flex-shrink:0;border-radius:11px;opacity:0;transform:translateY(10px);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);transition:opacity .26s ease-out,transform var(--surface) var(--spring);
  /* Demo tiles only ever fade/rise on entry; nothing inside the grid
     animates while the shell morphs, so the morph stays silky. */}
.tile-1{background-position:0 0;height:240px}.tile-2{background-position:50% 0;height:180px}.tile-3{background-position:100% 0;height:300px}.tile-4{background-position:0 100%;height:200px}.tile-5{background-position:50% 100%;height:260px}.tile-6{background-position:100% 100%;height:170px}
/* Like ResultCell's caption: title + licence on hover only. Demo tiles are
   labelled as generated artwork, never as library images. */
.tile-cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:2px;padding:22px 10px 8px;background:linear-gradient(transparent,rgba(0,0,0,.82));opacity:0;transition:opacity .2s ease-out;pointer-events:none}
.image-tile:hover .tile-cap{opacity:1}
.tile-cap b{font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-cap i{font-size:10px;font-style:normal;color:rgba(255,255,255,.65)}
/* Bento — four quiet tiles, one plan. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px 0}
.bento-card{min-width:0;position:relative;overflow:hidden;padding:28px;border:1px solid var(--line-soft);border-radius:22px;background:linear-gradient(145deg,#14161b,#0e0f13 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.bento-card h2{font-size:26px;line-height:1.18;letter-spacing:-.8px;font-weight:600;margin:0}
.bento-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:10px 0 0}
.card-label{font-size:11px;font-weight:500;margin:0 0 10px;color:var(--faint);letter-spacing:.02em}
.bento-heading{grid-column:1/-1;text-align:center;margin:22px 0 10px}
.bento-heading h2{font-size:32px;line-height:1.15;letter-spacing:-1px;font-weight:600;margin:0}
.step-card{padding:22px}
.step-card .step-visual{height:148px;margin:0 0 18px}
.step-card h3{font-size:17px;margin:0 0 6px;letter-spacing:-.2px;font-weight:600}
.step-card p{font-size:12px;margin:0}
.step-visual{display:flex;justify-content:center;align-items:center;position:relative;border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.02);overflow:hidden}
.keys-visual kbd{display:flex;align-items:center;justify-content:center;height:60px;min-width:52px;padding:12px 16px;margin:0 4px;border:1px solid rgba(255,255,255,.1);border-bottom-width:3px;background:linear-gradient(145deg,#23252b,#131418);box-shadow:0 12px 20px rgba(0,0,0,.45);border-radius:12px;font-size:19px;font-family:inherit;animation:key-tap 5s ease-in-out infinite}
.keys-visual kbd+kbd{animation-delay:.14s}
.mini-field{display:flex;gap:10px;align-items:center;max-width:92%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);box-shadow:0 10px 24px rgba(0,0,0,.4);font-size:12px;overflow:hidden}
.mini-field>svg{width:16px;height:16px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.6;flex-shrink:0}
.mini-query{white-space:nowrap;overflow:hidden;max-width:140px;color:rgba(255,255,255,.94);animation:mini-type 5s steps(18) infinite}
.mini-caret{width:1px;height:14px;background:#e8eaf0;flex-shrink:0}
.mini-image{position:absolute;left:18px;top:22px;width:88px;height:68px;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.5);z-index:2}
.mini-image.still{position:relative;left:auto;top:auto;width:104px;height:80px}
.mini-copied{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#fff;background:rgba(10,11,16,.82);border:1px solid var(--line);border-radius:20px;padding:7px 12px;box-shadow:0 8px 18px rgba(0,0,0,.45);opacity:0;animation:mini-badge 5.5s ease-out infinite}
/* The hero's click beat in miniature: glide, squash, dial, check, badge. */
.mini-cursor{position:absolute;left:76%;top:58%;width:18px;z-index:3;fill:#101216;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));animation:mini-click 5.5s ease-in-out infinite}
.mini-copy{position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.48);display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;opacity:0;animation:mini-copy 5.5s ease-out infinite}
.mini-dial svg{display:block;width:20px;height:20px;fill:none}
.mini-track{stroke:rgba(255,255,255,.2);stroke-width:2.4}
.mini-prog{stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:81.68;stroke-dashoffset:81.68;transform:rotate(-90deg);transform-origin:center;animation:mini-dial 5.5s linear infinite}
.mini-check{stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:0;transform:scale(.4);transform-origin:center;animation:mini-check 5.5s ease-out infinite}
.mc-ing,.mc-done{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:8px;color:#fff;opacity:0}
.mc-ing{animation:mc-ing 5.5s ease-out infinite}
.mc-done{animation:mc-done 5.5s ease-out infinite}
@keyframes mini-click{0%,16%{transform:translate(0,0) scale(1)}30%{transform:translate(-70px,-32px) scale(1)}34%,40%{transform:translate(-70px,-32px) scale(.78)}54%,100%{transform:translate(0,0) scale(1)}}
@keyframes mini-copy{0%,36%{opacity:0}40%,84%{opacity:1}88%,100%{opacity:0}}
@keyframes mini-dial{0%,40%{stroke-dashoffset:81.68}58%,100%{stroke-dashoffset:0}}
@keyframes mini-check{0%,60%{opacity:0;transform:scale(.4)}66%{opacity:1;transform:scale(1.15)}70%,84%{opacity:1;transform:scale(1)}88%,100%{opacity:0}}
@keyframes mc-ing{0%,40%{opacity:0}44%,58%{opacity:1}62%,100%{opacity:0}}
@keyframes mc-done{0%,60%{opacity:0}64%,84%{opacity:1}88%,100%{opacity:0}}
@keyframes mini-badge{0%,60%{opacity:0;transform:scale(.7)}66%,84%{opacity:1;transform:scale(1)}88%,100%{opacity:0}}
.mac-card{display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.mac-emblem{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:24px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.015));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 14px 28px rgba(0,0,0,.35)}
.mac-emblem span{font-size:38px;font-weight:300;letter-spacing:-2px;color:#e6e9f0}
.mac-card h2{font-size:22px;letter-spacing:-.5px}
.licence-card{grid-column:span 2;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:22px}
.license-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.license-chips span{font-size:11px;padding:7px 12px;border:1px solid rgba(255,255,255,.1);border-radius:20px;color:#c7c9d1;background:rgba(255,255,255,.03)}
.licence-symbol{font-size:104px;line-height:1;font-weight:200;color:rgba(155,163,182,.32);position:relative;margin-right:14px;flex-shrink:0}
.licence-symbol>span{position:absolute;font-size:18px;bottom:2px;right:-4px;color:#d3d9e4;border:1px solid rgba(255,255,255,.18);border-radius:50%;width:40px;height:40px;display:grid;place-items:center;background:#22262e;box-shadow:0 6px 14px rgba(0,0,0,.4)}
/* Flow connector: top licensing card → explainer. Hairline, chevron, breath. */
.flow-arrow{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:18px}
.flow-conn{grid-column:2;display:flex;flex-direction:column;align-items:center;animation:flow-bob 3.2s ease-in-out infinite}
.flow-line{width:1px;height:52px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.3))}
.flow-head{width:12px;height:8px;fill:none;stroke:#9a9aa0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:-1px}
@keyframes flow-bob{0%,100%{transform:translateY(-3px);opacity:.65}50%{transform:translateY(3px);opacity:1}}
/* Pricing — transparent. No card, no fill: an open note. The price is the
   infrastructure, so the section says exactly that. */
.pricing{padding:56px 0 112px}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.price-card{width:100%;padding:8px 0;background:none;border:0;box-shadow:none;text-align:left;display:flex;flex-direction:column;justify-content:center}
.price-card::before{display:none}
.price-intro h2{font-size:32px;letter-spacing:-1px;font-weight:600;margin:0}
.price{font-size:64px;letter-spacing:-3px;font-weight:600;line-height:1;margin:18px 0 0}
.price>span{font-size:13px;font-weight:400;letter-spacing:0;margin-left:8px;color:var(--muted)}
.infra-note{font-size:14px;line-height:1.75;color:var(--muted);max-width:560px;margin:16px 0 0}
.trial-note{font-size:12px;color:var(--muted);margin:0}
.price-card ul{list-style:none;padding:24px 0;margin:26px 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;text-align:left}
.price-card li{display:flex;align-items:center;gap:12px;font-size:14px;color:#d5d7dd}
.price-card li::before{content:"✓";width:22px;height:22px;flex-shrink:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#e2e6ee;margin:0}
.price-action{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.price-action .button{min-width:250px;min-height:54px;padding:16px 34px;font-size:15px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 1px rgba(0,0,0,.12),0 0 32px rgba(255,255,255,.10),0 12px 32px rgba(0,0,0,.5)}
.price-action .button:hover{box-shadow:inset 0 1px 0 #fff,0 0 44px rgba(255,255,255,.16),0 14px 36px rgba(0,0,0,.55)}
.price-action .trial-note{font-size:11px}
/* Licensing explainer: the plain-English companion to the price. */
.licence-explainer{padding:28px;border:1px solid var(--line-soft);border-radius:22px;background:linear-gradient(145deg,#14161b,#0e0f13 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.licence-explainer h2{font-size:24px;line-height:1.2;letter-spacing:-.6px;font-weight:600;margin:0}
.lic-lede{font-size:13px;line-height:1.65;color:var(--muted);margin:10px 0 0}
.lic-row{padding:14px 0 0;margin:14px 0 0;border-top:1px solid var(--line-soft)}
.lic-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lic-top h3{font-size:14px;font-weight:600;letter-spacing:-.1px;margin:0}
.lic-chip{font-size:10px;font-weight:600;padding:5px 10px;border-radius:20px;white-space:nowrap}
.lic-chip.on{background:rgba(255,255,255,.09);color:#e8eaf0}
.lic-chip.off{border:1px solid rgba(255,255,255,.16);color:var(--muted)}
.lic-row p{font-size:12px;line-height:1.65;color:var(--muted);margin:8px 0 0}
/* Footer + dialog. */
.site-footer{border-top:1px solid var(--line-soft);padding:28px 0 44px;display:flex;justify-content:space-between;gap:28px}
.site-footer .wordmark{font-size:15px}
.site-footer .wordmark img{width:22px;height:22px}
.site-footer p{color:var(--muted);font-size:11px;line-height:1.7;margin:12px 0 0}
.footer-right{text-align:right}
.footer-right nav{display:flex;gap:22px;margin-bottom:14px;font-size:12px}
.footer-right nav a{color:#b8b9bf}
.footer-right nav a:hover{color:#fff}
.skip-link{position:absolute;left:14px;top:-100px;padding:12px 14px;background:#fff;color:#08090c;z-index:50;border-radius:8px;font-size:13px;font-weight:600}
.skip-link:focus{top:10px}
.reveal{opacity:1}
.js-motion .reveal{opacity:0;transform:translateY(18px);transition:opacity var(--surface) ease-out,transform var(--surface) var(--spring)}
.js-motion .reveal.visible{opacity:1;transform:translateY(0)}
dialog{width:440px;max-width:calc(100% - 44px);padding:0;color:var(--text);background:#141519;border:1px solid rgba(255,255,255,.14);border-radius:20px;box-shadow:0 22px 88px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(3,4,8,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dialog-content{padding:28px}
.dialog-content h2{font-size:24px;letter-spacing:-.6px;margin:0}
.dialog-content>p:not(.eyebrow){color:var(--muted);line-height:1.7;margin:14px 0 22px;font-size:13px}
.dialog-content .eyebrow{font-size:11px;letter-spacing:.12em;color:var(--faint);margin:0 0 10px;font-weight:600}
.dialog-content .button{width:100%}
.motion-paused *,.motion-paused *::before,.offscreen *,.offscreen *::before{animation-play-state:paused !important}
.motion-paused .image-tile,.motion-paused .search-panel{transition:none !important}
@keyframes aura-flow{0%{transform:translate(-6%,-6%) rotate(-12deg) scale(1)}100%{transform:translate(6%,10%) rotate(18deg) scale(1.2)}}
@keyframes blink{50%{opacity:0}}
@keyframes key-tap{0%,15%,35%,100%{transform:translateY(0)}25%{transform:translateY(5px)}}
@keyframes mini-type{0%,15%{max-width:0}45%,90%{max-width:140px}100%{max-width:0}}
@media(min-width:861px){
  .price-card{padding-left:48px}
  .licence-explainer{margin-right:48px}
}
@media(max-width:1100px){
  .collection-count{font-size:clamp(48px,6vw,72px)}
}
@media(max-width:860px){
  .wrap,.site-header.wrap{width:calc(100% - 44px)}
  .site-header{height:60px}
  .site-header nav>a:first-child{display:none}
  .hero-composition{padding:36px 0 56px}
  .demo-wrap{margin-top:22px}
  .bento{grid-template-columns:1fr 1fr;gap:10px}
  .bento-heading{margin:14px 0 6px}
  .bento-heading h2{font-size:28px}
  .licence-card{grid-column:1/-1}
  .mac-card{flex-direction:row;align-items:center;justify-content:flex-start}
  .flow-arrow{grid-template-columns:1fr;margin-top:10px}
  .flow-conn{grid-column:1}
  .pricing-grid{grid-template-columns:1fr}
  .price-card{padding:0}
}
@media(max-width:600px){
  .wordmark{font-size:16px}
  .site-header nav{gap:14px}
  .nav-download{display:none}
  .collection-count{font-size:clamp(44px,13vw,64px)}
  .collection-subline{font-size:clamp(24px,6.8vw,32px)}
  .hero-composition{padding:28px 0 44px}
  .hero-lockup{height:84px;margin-bottom:20px}
  .hero-description{font-size:13px;max-width:300px}
  .button{min-height:48px}
  .demo-wrap{margin-top:18px}
  .bento{grid-template-columns:1fr}
  .bento-card{padding:22px}
  .bento-card h2{font-size:22px}
  .bento-heading h2{font-size:26px}
  .step-card .step-visual{height:124px;margin-bottom:14px}
  .keys-visual kbd{height:48px;min-width:40px;font-size:15px;padding:8px 12px}
  .mini-field{font-size:11px;padding:10px 12px}
  .mini-image.still{width:84px;height:66px}
  .mini-copied{right:10px;bottom:10px;font-size:10px}
  .licence-card{flex-direction:column-reverse;align-items:flex-start}
  .licence-symbol{display:none}
  .pricing{padding:44px 0 80px}
  .price-intro h2{font-size:26px}
  .price{font-size:52px}
  .infra-note{font-size:13px}
  .price-card ul{grid-template-columns:1fr;gap:12px}
  .licence-explainer{padding:22px}
  .licence-explainer h2{font-size:22px}
  .site-footer{flex-direction:column;padding:22px 0 32px}
  .footer-right{text-align:left}
}
/* Phone performance tier (paired with scene.css): solid smoked fill and a
   trimmed shadow, so the width/height morph repaints far less per frame.
   The hairline, inner highlight and reflective rim are kept. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .search-panel{background:rgba(13,13,17,.92);-webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.05),
      0 0 0 1px rgba(0,0,0,.35),0 14px 34px rgba(0,0,0,.5)}
  .stage-glow{filter:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transform:none !important;transition-property:opacity !important;transition-duration:.15s !important}
  /* The scene scale is layout, not motion — keeps the film's aspect ratio. */
  .scene{transform:scale(var(--scene-scale,1)) !important}
  .js-motion .reveal{opacity:1}
  .caret{display:none}
  .image-tile{opacity:1}
  .mini-query{max-width:140px}
  .mini-cursor,.mini-copy{display:none}
  .mini-copied{animation:none;opacity:1}
  .search-panel{transition:none !important}
}
.motion-paused .mini-query{animation:none;max-width:140px}