/* AfterAir: a tactile photo studio. Interaction-led motion, quiet when idle. */
:root {
  color-scheme:light;
  --page:#f5f8ff;--paper:#fff;--ink:#17233f;--muted:#556582;
  --blue:#245bdb;--blue-ink:#245bdb;--blue-soft:#e5edff;--surface:#e7eefc;
  --line:#dde6f6;--glass:rgba(245,248,255,.96);--green:#176a52;
  --cobalt:#3978ff;--coral:#ff805f;--mint:#82e0be;
  --shadow:0 24px 60px -24px #26375b40,0 2px 6px #26375b08;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  --display:"Avenir Next","SF Pro Display",var(--font);
}
:root[data-theme=dark] {
  color-scheme:dark;--page:#131827;--paper:#28344e;--ink:#f5f8ff;--muted:#c0cce0;
  --blue:#245bdb;--blue-ink:#99bcff;--blue-soft:#293e64;--surface:#202942;
  --line:#394763;--glass:rgba(23,28,48,.96);--green:#82e0be;--shadow:0 24px 60px -24px #0009,0 2px 6px #0002;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme=light]) {
    color-scheme:dark;--page:#131827;--paper:#28344e;--ink:#f5f8ff;--muted:#c0cce0;
    --blue:#245bdb;--blue-ink:#99bcff;--blue-soft:#293e64;--surface:#202942;
    --line:#394763;--glass:rgba(23,28,48,.96);--green:#82e0be;--shadow:0 24px 60px -24px #0009,0 2px 6px #0002;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0}
button:disabled{cursor:default}img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--display);font-weight:600}
h2{font-size:clamp(34px,4.2vw,52px);line-height:1.12;letter-spacing:-.045em}
h3{font-size:29px;line-height:1.18;letter-spacing:-.035em}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:5px}
::selection{background:#a7b7ff66}
.shell{width:min(1080px,calc(100% - 64px));margin-inline:auto}
.icon{width:20px;height:20px;display:inline-block;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-100px;z-index:100;background:var(--paper);padding:12px 18px;border-radius:10px}
.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:30;background:var(--page);border-bottom:1px solid transparent}
.site-header.scrolled{background:var(--glass);border-color:var(--line)}
.nav{height:82px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:7px;font-size:21px;font-weight:650;letter-spacing:-.8px}
.brand img{width:37px;height:37px}
.nav-links{display:flex;gap:7px;margin-left:auto;font-size:12px;font-weight:500;color:var(--muted);padding:4px;border-radius:14px;background:var(--surface)}
.nav-links a{padding:7px 12px;border-radius:10px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s,color .2s}
.nav-links a:hover,.nav-links a[aria-current=location]{color:var(--ink);background:var(--paper);transform:translateY(-3px);box-shadow:0 3px 8px #17233f10}
.nav-end{display:flex;align-items:center;gap:12px}
.icon-button{background:transparent;width:34px;height:34px;display:grid;place-items:center;border-radius:8px}
.icon-button:hover{background:var(--surface)}.nav-toggle{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:49px;padding:0 23px;border-radius:12px;font-size:13px;font-weight:600;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s}
.button:active{transform:translateY(1px)}
.button-blue{background:var(--blue);color:white;box-shadow:inset 0 1px 0 #ffffff38,0 4px 7px #4666f622;border:1px solid #3758ec}
.button-blue:hover{background:#3656e9;box-shadow:inset 0 1px 0 #ffffff38,0 6px 14px #4666f62b}
.button-soft,.button.secondary{background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 3px #00000003}
.button-dark{background:var(--ink);color:var(--page)}
.button.compact,.button.small{min-height:36px;font-size:11px;padding:0 14px;border-radius:9px}
.button .icon{width:17px;height:17px}.button [href="#i-play"]{fill:currentColor}
.hero{padding-top:45px}
.hero-copy{text-align:center;position:relative;z-index:2}
.intro-pill{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;color:var(--ink);padding:6px 13px;background:var(--surface);border-radius:30px}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.hero h1{font-size:clamp(54px,6.7vw,82px);line-height:1.04;letter-spacing:-.065em;margin:24px 0}
.hero-copy>p:not(.hero-fineprint){font-size:16px;line-height:1.65;color:var(--muted)}
.actions{display:flex;justify-content:center;gap:10px;margin-top:26px}
.hero-fineprint{font-size:10px;color:var(--muted);margin-top:15px}
.demo{position:relative;height:630px;max-width:1000px;margin:20px auto 0;isolation:isolate}
.photo-sheet{position:absolute;width:205px;padding:8px 8px 0;background:#fff;border-radius:13px;box-shadow:0 18px 32px -12px #21334c38,0 1px 2px #21334c20;color:#454958}
.photo-crop{height:182px;overflow:hidden;border-radius:7px}
.photo-crop img{height:100%;width:100%;object-fit:cover;object-position:45%}
.photo-caption{display:flex;align-items:center;justify-content:space-between;padding:11px 3px;font-size:9px}
.photo-caption b{font-size:10px;background:#eef1fb;padding:2px 5px;border-radius:4px}
.source-photo{left:3%;top:115px;transform:rotate(-13deg);z-index:1}
.result-photo{right:3%;top:185px;transform:rotate(12deg);z-index:1}
.result-photo .photo-crop img{object-position:70%}
.app-preview{position:absolute;z-index:2;top:30px;width:570px;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:var(--paper);border:1px solid var(--line);border-radius:22px;box-shadow:0 35px 65px -24px #245bdb46,0 4px 10px #26375b0b;overflow:hidden}
.window-bar{height:40px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:10px;font-weight:500;color:var(--muted);background:var(--paper)}
.traffic-lights,.tiny-window-bar{display:flex;gap:5px}
.traffic-lights i,.tiny-window-bar i{width:8px;height:8px;border-radius:50%;background:#ff6259}
.traffic-lights i:nth-child(2),.tiny-window-bar i:nth-child(2){background:#ffbe30}
.traffic-lights i:nth-child(3),.tiny-window-bar i:nth-child(3){background:#2acb42}
.window-options{font-size:19px;line-height:1}
.preview-content{padding:20px 25px 0;text-align:center}
.preview-meta{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}
.preview-meta>span:last-child{display:flex;align-items:center;gap:4px}
.preview-meta .icon{width:11px;height:11px}
.photo-stage{position:relative;display:block;width:300px;height:220px;margin:10px auto 6px;background:transparent;perspective:700px;isolation:isolate}
.photo-stage>span{position:absolute;display:block}
.folder-shadow{width:210px;height:24px;left:45px;bottom:12px;background:#3978ff44;border-radius:50%;filter:blur(13px)}
.folder-back{left:40px;top:69px;width:220px;height:132px;border-radius:16px;background:linear-gradient(120deg,#619bff,#245bdb);box-shadow:inset 0 1px #cce3ff}
.folder-back:before{content:"";position:absolute;left:0;top:-13px;width:86px;height:25px;background:#619bff;border-radius:10px 12px 0 0}
.folder-photo{width:108px;height:128px;background:white;border-radius:10px;padding:6px;left:96px;top:44px;box-shadow:0 3px 8px #13274c30;transition:transform .55s cubic-bezier(.22,1.4,.36,1)}
.folder-photo img{width:96px;height:96px;object-fit:cover;border-radius:5px;pointer-events:none}
.folder-photo>span{display:block;color:#394763;font-size:7px;padding-top:6px;white-space:nowrap}
.photo-a{transform:translate(-44px,5px) rotate(-13deg)}.photo-a img{object-position:20%}
.photo-b{transform:translate(0,-10px) rotate(3deg)}.photo-b img{object-position:55%}
.photo-c{transform:translate(44px,6px) rotate(15deg)}.photo-c img{object-position:90%}
.folder-front{left:30px;top:106px;width:240px;height:108px;border-radius:19px;background:linear-gradient(130deg,#acd8ffef,#518dfffa 65%,#3978ff);border:1px solid #d2eaffb0;box-shadow:inset 0 2px 5px #ffffff50,0 10px 15px -8px #245bdb55;transform-origin:bottom;transition:transform .5s cubic-bezier(.22,1.4,.36,1)}
.folder-front:before{content:"";position:absolute;width:75px;height:2px;top:10px;left:82px;background:#ffffff70;border-radius:3px}
.folder-emblem,.folder-ready{display:grid!important;place-items:center;position:absolute;left:95px;top:32px;width:50px;height:50px;border-radius:50%;background:#ffffff20;border:1px solid #ffffff50;color:white}
.folder-emblem .icon,.folder-ready .icon{width:25px;height:25px}
.folder-ready{left:125px;top:139px;opacity:0;transform:scale(.7);background:#176a52;transition:opacity .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.photo-stage:hover .photo-a,.photo-stage:focus-visible .photo-a,.demo[data-state=arriving] .photo-a,.demo[data-state=ready] .photo-a{transform:translate(-61px,-17px) rotate(-21deg)}
.photo-stage:hover .photo-b,.photo-stage:focus-visible .photo-b,.demo[data-state=arriving] .photo-b,.demo[data-state=ready] .photo-b{transform:translate(0,-35px) rotate(-3deg)}
.photo-stage:hover .photo-c,.photo-stage:focus-visible .photo-c,.demo[data-state=arriving] .photo-c,.demo[data-state=ready] .photo-c{transform:translate(61px,-15px) rotate(21deg)}
.photo-stage:hover .folder-front,.photo-stage:focus-visible .folder-front,.demo[data-state=arriving] .folder-front{transform:rotateX(-19deg)}
.fluid-orb{display:none!important;left:124px;top:138px;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#f5fbff;box-shadow:inset 0 0 3px white,0 2px 7px #245bdb55;border:1px solid #ffffffa0}
.fluid-orb i{position:absolute;width:65px;height:65px;left:-7px;top:16px;border-radius:44%;background:radial-gradient(ellipse at 55% 65%,#3978ff 5%,#3978ff00 68%)}
.fluid-orb i:nth-child(2){background:radial-gradient(ellipse at 40% 40%,#41ceef 5%,#41ceef00 68%);left:-24px;top:4px}
.fluid-orb i:nth-child(3){background:radial-gradient(ellipse at 50% 50%,#ff805fcc 5%,#ff805f00 65%);left:15px;top:19px}
.demo[data-state=converting] .fluid-orb{display:block!important}
.demo[data-motion=active] .fluid-orb i{animation:fluid-drift 2s ease-in-out infinite alternate}
.demo[data-motion=active] .fluid-orb i:nth-child(2){animation-delay:-.7s;animation-direction:alternate-reverse}
.demo[data-motion=active] .fluid-orb i:nth-child(3){animation-delay:-1.3s}
.demo[data-state=converting] .folder-emblem,.demo[data-state=ready] .folder-emblem{opacity:0}
.demo[data-state=ready] .folder-ready{opacity:1;transform:scale(1)}
@keyframes fluid-drift{from{transform:translate(-9px,-8px) rotate(0)}to{transform:translate(10px,4px) rotate(120deg)}}
.conversion-headline{font-size:24px;letter-spacing:-.7px;line-height:1.3}
.conversion-subtitle{font-size:10px;min-height:17px;color:var(--muted);margin-top:6px}
.demo-progress{height:3px;width:110px;background:var(--surface);margin:17px auto 20px;border-radius:3px;overflow:hidden}
.demo-progress span{height:100%;display:block;width:0;background:var(--blue);border-radius:3px}
.preview-recipe{border-top:1px solid var(--line);padding:13px 0;display:flex;gap:10px;align-items:center;font-size:9px;color:var(--muted)}
.format-control{padding:4px;display:flex;gap:7px;background:var(--surface);border-radius:11px}
.format-control button{background:transparent;color:var(--muted);padding:6px 12px;font-size:10px;border-radius:8px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s}
.format-control button[aria-pressed=true]{background:var(--blue);color:white;transform:translateY(-3px);box-shadow:0 4px 8px #245bdb22}
.preview-folder{display:flex;gap:5px;align-items:center;margin-left:auto}
.preview-folder .icon{width:13px;height:13px}
.demo-notification{position:absolute;z-index:4;right:7%;top:466px;display:flex;align-items:center;text-align:left;gap:10px;width:302px;padding:12px 14px;background:var(--paper);box-shadow:var(--shadow);border:1px solid var(--line);border-radius:14px;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.demo-notification>img{width:42px;height:42px}
.demo-notification>span{flex:1}
.demo-notification b{display:block;font-size:11px;letter-spacing:-.2px}
.demo-notification small{display:block;font-size:9px;color:var(--muted);margin-top:3px}
.demo-notification>.icon{width:14px;height:14px;color:var(--muted)}
.demo-controls{position:absolute;top:555px;left:50%;transform:translateX(-50%);width:570px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted)}
.demo-controls>span{display:flex;gap:7px;align-items:center}
.replay-button{display:flex;align-items:center;gap:6px;font-size:10px;background:transparent;padding:7px 0 7px 10px;color:var(--muted)}
.replay-button:hover{color:var(--ink)}
.replay-button>.icon{width:13px;height:13px}
.demo-disclaimer{position:absolute;top:603px;left:0;right:0;text-align:center;font-size:9px;color:var(--muted)}
.demo[data-state=arriving] .source-photo{animation:photo-arrives 1s cubic-bezier(.22,1,.36,1) both}
.demo[data-state=converting] .demo-progress span{width:88%;transition:width 1.7s ease-out}
.demo[data-state=ready] .demo-progress span{width:100%;transition:width .2s}
.demo[data-state=ready] .demo-notification{opacity:1;transform:translateY(0);pointer-events:auto}
.demo[data-state=ready] .result-photo{animation:photo-ready .7s cubic-bezier(.22,1,.36,1) both}
@keyframes photo-arrives{from{opacity:0;transform:translate(-28px,-20px) rotate(-19deg)}to{opacity:1;transform:rotate(-13deg)}}
@keyframes photo-ready{from{transform:translate(-35px,15px) rotate(2deg)}to{transform:rotate(12deg)}}
.hero-promises{display:flex;justify-content:center;gap:42px;color:var(--muted);font-size:11px;padding:0 0 37px;border-bottom:1px solid var(--line)}
.hero-promises>span{display:flex;align-items:center;gap:8px}.hero-promises .icon{width:15px;height:15px}
.section{padding-top:112px}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:37px}
.section-heading>p{color:var(--muted);font-size:14px;line-height:1.8;max-width:330px}
.section-heading.centered{display:block;text-align:center}
.section-heading.centered>p{margin:18px auto 0;max-width:500px}
.feature-composition{display:grid;grid-template-columns:1.06fr 1fr;grid-template-rows:320px 238px;gap:18px}
.formats-card,.quiet-card,.privacy-card{border-radius:22px;position:relative;overflow:hidden;border:1px solid var(--line)}
.formats-card{grid-row:span 2;background:var(--paper);padding:36px}
.card-copy{position:relative;z-index:2}
.card-copy p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:14px}
.format-art{position:absolute;left:20%;right:10%;top:48%;height:205px}
.format-photo{position:absolute;left:0;right:13%;height:190px;background:white;transform:rotate(-9deg);padding:7px;border-radius:9px;box-shadow:0 14px 28px #0002}
.format-photo>img{width:100%;height:145px;object-fit:cover;border-radius:4px}
.format-photo>span{display:block;text-align:center;font-size:10px;padding-top:7px;color:#686d7b}
.file-sticker{position:absolute;background:var(--paper);color:var(--blue-ink);border:1px solid var(--line);border-radius:11px;font-size:27px;letter-spacing:-1px;font-weight:600;padding:8px 19px;box-shadow:0 5px 13px #0001}
.png-sticker{right:-1%;top:0;transform:rotate(10deg)}
.jpeg-sticker{right:8%;bottom:1%;transform:rotate(6deg);color:var(--ink)}
.format-links{position:absolute;bottom:28px;left:36px;right:36px;display:flex;gap:24px;font-size:11px;color:var(--muted)}
.format-links a,.text-link{border-bottom:1px solid var(--line);padding-bottom:3px}
.format-links a:hover,.text-link:hover{color:var(--blue-ink)}
.quiet-card{padding:30px;background:var(--surface)}
.quiet-visual{position:relative;height:128px}
.mini-menubar{display:flex;align-items:center;gap:16px;height:27px;border-radius:7px;background:var(--paper);padding:0 10px;font-size:8px;border:1px solid var(--line);color:var(--muted)}
.mini-menubar .icon{margin-left:auto;width:12px;height:12px;color:var(--blue-ink)}
.quiet-popover{position:absolute;right:8%;top:39px;background:var(--paper);border:1px solid var(--line);border-radius:11px;box-shadow:0 8px 17px #0000000c;padding:11px;display:flex;align-items:center;gap:8px;width:235px}
.quiet-popover b{font-size:11px;display:block}.quiet-popover span{display:flex;gap:5px;align-items:center;font-size:8px;color:var(--muted)}
.quiet-popover>.icon{margin-left:auto;width:15px;color:var(--green)}
.quiet-card h3{font-size:25px}.quiet-card p{margin-top:10px}
.privacy-card{display:flex;align-items:center;gap:25px;padding:30px;background:var(--paper)}
.privacy-card h3{font-size:24px}.privacy-card p{font-size:12px;line-height:1.75;margin-top:10px}
.privacy-seal{display:grid;place-items:center;width:76px;height:92px;flex:none;border:1px solid var(--line);border-radius:23px;background:linear-gradient(145deg,var(--paper),var(--surface));box-shadow:inset 0 1px 0 #fff7,0 6px 10px #00000006}
.privacy-seal>.icon{width:29px;height:29px;color:var(--muted)}
.text-link{display:inline-block;font-size:12px;font-weight:500;margin-top:16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}
.step-art{height:207px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.folder-object{width:128px;height:91px;background:linear-gradient(155deg,#a2bdff,#5276ed);border-radius:9px 13px 13px 13px;position:relative;box-shadow:inset 0 2px 0 #c8d8ff,0 15px 20px -10px #4666f655;display:grid;place-items:center}
.folder-object:before{content:"";position:absolute;z-index:-1;left:0;top:-12px;width:61px;height:21px;border-radius:8px 10px 0 0;background:#8ba7f2}
.folder-object>.icon{width:40px;height:40px;color:#e6eeff}
.art-caption{font-size:10px;color:var(--muted);position:absolute;bottom:17px}
.recipe-object{width:182px;background:var(--paper);padding:20px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);transform:rotate(-4deg);font-size:11px;color:var(--muted)}
.recipe-object>div{display:flex;gap:4px;margin:12px 0;background:var(--surface);padding:4px;border-radius:7px}
.recipe-object>div>*{width:50%;padding:4px;text-align:center;font-size:10px}
.recipe-object b{background:var(--paper);color:var(--ink);border-radius:4px}
.recipe-object small{display:flex;align-items:center;gap:5px;font-size:9px}.recipe-object .icon{width:12px;color:var(--green)}
.step-icon{width:134px;height:134px;transform:rotate(5deg)}
.step-copy{display:flex;gap:10px;align-items:flex-start;margin-top:15px}
.step-number{font-size:10px;border:1px solid var(--line);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:3px;color:var(--muted)}
.step h3{font-size:17px;letter-spacing:-.4px;line-height:1.5}.step p{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.8}
.setup-link{display:table;margin:36px auto 0}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.detail-card{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.detail-copy{padding:0 32px 32px}.detail-copy h3{font-size:26px}.detail-copy p{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.8}
.appearance-art,.sound-art{height:290px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.appearance-art{background:linear-gradient(135deg,var(--paper),var(--surface))}
.appearance-window{width:69%;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:var(--shadow);text-align:center;transform:rotate(-5deg)}
.tiny-window-bar{height:24px;align-items:center;padding:0 10px;border-bottom:1px solid var(--line)}
.tiny-window-bar i{width:5px;height:5px}
.appearance-window>img{width:53px;height:53px;margin:13px auto 4px}
.appearance-window>b{display:block;font-size:17px;letter-spacing:-.6px}
.appearance-window>span{display:block;font-size:9px;color:var(--muted);margin:3px 0 15px}
.appearance-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:10px 14px;font-size:8px;color:var(--muted)}
.appearance-row .icon{width:10px;height:10px;color:var(--green)}
.theme-picker{display:inline-flex;padding:5px;background:var(--surface);border-radius:13px;gap:7px;margin-top:22px}
.theme-picker button{background:transparent;border-radius:9px;padding:7px 10px;font-size:10px;display:flex;align-items:center;gap:6px;color:var(--muted);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .2s}
.theme-picker button[aria-pressed=true]{background:var(--blue);color:white;transform:translateY(-3px);box-shadow:0 3px 7px #245bdb22}
.theme-picker .icon{width:13px;height:13px}
.sound-rings{position:absolute;inset:0;display:grid;place-items:center}
.sound-rings i{position:absolute;width:140px;height:140px;border:1px solid var(--line);border-radius:50%}
.sound-rings i:nth-child(2){width:220px;height:220px;opacity:.7}
.sound-rings i:nth-child(3){width:300px;height:300px;opacity:.4}
.sound-notification{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--paper);box-shadow:var(--shadow);width:83%;transform:rotate(3deg)}
.sound-notification b{display:block;font-size:11px}.sound-notification span{display:block;font-size:8px;color:var(--muted);margin-top:3px}
.sound-notification>small{font-size:8px;align-self:flex-start;margin-left:auto;color:var(--muted)}
.sound-button{display:flex;align-items:center;gap:7px;font-size:11px;padding:11px 14px;background:var(--surface);border:1px solid var(--line);border-radius:9px;margin-top:22px}
.sound-button .icon{width:15px;height:15px}
.is-playing .sound-rings i{animation:sound-ring .85s ease-out 2}
@keyframes sound-ring{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.12);opacity:.15}}
.pricing-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.pricing-intro>img{width:88px;height:88px;margin:0 0 20px -8px}
.pricing-intro>p{color:var(--muted);font-size:14px;line-height:1.9;margin-top:22px;max-width:350px}
.price-card{background:var(--paper);padding:34px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.price-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:29px}
.preview-badge{border:1px solid var(--line);padding:3px 7px;border-radius:6px;font-size:9px}
.price-card>.price-amount{font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.05;letter-spacing:-.055em;color:var(--ink);margin:0 0 18px}
.price-amount span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}
.price-card h3{font-size:39px}
.price-card>p{font-size:12px;color:var(--muted);line-height:1.8;margin-top:15px}
.price-card ul{list-style:none;padding:0;margin:24px 0;font-size:11px}
.price-card li{display:flex;align-items:center;gap:8px;margin:12px 0}.price-card li .icon{width:14px;height:14px;color:var(--green)}
.price-card>.button{width:100%;font-size:12px}
.price-card>small{display:block;text-align:center;font-size:9px;color:var(--muted);line-height:2;margin-top:12px}
.price-card>small a{text-decoration:underline;text-underline-offset:3px}
.faq-section{display:grid;grid-template-columns:1fr 1.3fr;gap:90px}
.faq-intro>p{font-size:12px;color:var(--muted);margin-top:18px}.faq-intro a{text-decoration:underline;text-underline-offset:3px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-size:13px;font-weight:500;padding:19px 0}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{position:relative;width:13px;height:13px;flex:none;margin-top:3px}
.faq-plus:before,.faq-plus:after{content:"";width:10px;height:1px;background:var(--muted);position:absolute;top:6px;left:1px}
.faq-plus:after{transform:rotate(90deg);transition:transform .2s}.faq details[open] .faq-plus:after{transform:rotate(0)}
.faq p{color:var(--muted);font-size:12px;line-height:1.9;padding:0 20px 20px 0}
.faq p a{color:var(--blue-ink);text-decoration:underline}
.closing{text-align:center;padding:110px 0 95px}
.closing>img{width:110px;height:110px;margin:0 auto 18px}
.closing h2{font-size:clamp(38px,5vw,62px)}
.closing>.button{margin-top:27px}
.closing>p{font-size:11px;color:var(--muted);margin-top:17px}
.site-footer{border-top:1px solid var(--line);padding-top:44px;overflow:hidden}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:35px}
.footer-grid>div{display:flex;align-items:flex-start;flex-direction:column;gap:9px}
.footer-grid p{font-size:11px;color:var(--muted);margin-top:4px}
.footer-grid b{font-size:11px;font-weight:600;margin-bottom:6px}
.footer-grid a:not(.brand){font-size:11px;color:var(--muted)}.footer-grid a:hover{color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:9px;color:var(--muted);margin-top:45px}
.footer-wordmark{font:600 clamp(100px,21vw,300px)/1 var(--display);letter-spacing:-.075em;text-align:center;margin:40px auto -3vw;color:var(--line);user-select:none}
.finder-dialog{width:min(480px,calc(100% - 32px));padding:0;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow)}
.finder-dialog::backdrop{background:#11182766}
.finder-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.finder-bar h2{font-size:14px;letter-spacing:-.3px}
.finder-bar>span{font-size:10px;color:var(--muted);margin-left:auto}
.finder-content{padding:30px}
.finder-file{display:flex;flex-direction:column;gap:12px;text-align:center}
.finder-file img{width:200px;border-radius:7px;margin:0 auto;aspect-ratio:4/3;object-fit:cover}
.finder-file b{font-size:13px}.finder-file>span{font-size:11px;color:var(--green)}
.finder-file .icon{width:13px;height:13px}
.finder-content>p{font-size:11px;line-height:1.8;text-align:center;color:var(--muted);margin-top:24px}
/* Guide pages keep their URLs, hierarchy, and internal links. */
.page-hero{padding:65px 0 48px}.breadcrumb{font-size:12px;color:var(--muted);margin-bottom:25px}
.section-kicker{display:block;font-size:12px;color:var(--blue-ink);margin-bottom:16px}
.page-hero h1{font-size:clamp(38px,5vw,62px);letter-spacing:-.045em;line-height:1.12;max-width:820px}
.page-hero>p{font-size:17px;color:var(--muted);line-height:1.8;max-width:760px;margin-top:24px}
.page-hero .actions{justify-content:flex-start}
.content-wrap{display:grid;grid-template-columns:minmax(0,760px) 210px;gap:80px;padding-bottom:70px}
.content h2{font-size:28px;margin:36px 0 18px}.content h2:first-child{margin-top:0}
.content p,.content li{font-size:15px;color:var(--muted);line-height:1.9}.content p{margin-bottom:20px}
.content a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.side-nav{display:flex;flex-direction:column;gap:12px;position:sticky;top:110px;align-self:start;font-size:12px;color:var(--muted)}
.side-nav b{color:var(--ink);margin-bottom:7px}.callout{padding:22px;background:var(--blue-soft);border-radius:13px;margin:25px 0;font-size:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.card h3{font-size:23px;margin:12px 0}.card p{font-size:13px;color:var(--muted)}
.step-no{font-size:11px;color:var(--blue-ink)}
.final-cta{padding:70px 0 85px}.final-cta h2{font-size:36px}.final-cta p{color:var(--muted);margin-top:15px}.final-cta>.button{margin-top:25px;background:var(--blue);color:#fff}
@media(max-width:950px) {
 .shell{width:calc(100% - 48px)}.nav-links{gap:18px}.nav{gap:22px}
 .demo{height:630px}.photo-sheet{width:170px}.photo-crop{height:165px}
 .source-photo{left:0}.result-photo{right:0}.app-preview,.demo-controls{width:520px}
 .demo-notification{right:1%}.feature-composition{grid-template-rows:330px 250px}
 .formats-card{padding:28px}.format-art{top:49%;left:12%;right:6%}
 .privacy-card{gap:17px;padding:25px}.privacy-seal{width:60px;height:76px}
 .privacy-card h3{font-size:21px}.quiet-card{padding:25px}.quiet-card h3{font-size:23px}
 .section-heading>p{font-size:12px}.steps{gap:25px}
 .detail-copy{padding:0 25px 25px}.detail-copy h3{font-size:23px}
 .pricing-section{gap:50px}.faq-section{gap:50px}.content-wrap{grid-template-columns:1fr;gap:30px}
 .side-nav{position:static}.hero-promises{gap:25px;font-size:10px}
}
@media(min-width:1150px) {
 .hero.shell{width:min(1320px,calc(100% - 80px));display:grid;grid-template-columns:.95fr 1.15fr;align-items:center;column-gap:34px;padding-top:30px}
 .hero-copy{text-align:left;padding-bottom:50px}.hero h1{font-size:clamp(56px,5.2vw,76px);letter-spacing:-.065em}
 .hero .actions{justify-content:flex-start}.hero-copy>p:not(.hero-fineprint){font-size:15px;max-width:430px}
 .hero .desktop-break{display:none}.hero .demo{width:100%;height:630px;margin:0}
 .hero .app-preview{width:90%;top:35px}.hero .photo-sheet{width:145px}.hero .photo-crop{height:133px}
 .hero .source-photo{left:-4%;top:88px}.hero .result-photo{right:-2%;top:217px}
 .hero .demo-controls{width:90%}.hero .demo-notification{right:0;top:477px}
 .hero-promises{grid-column:1/-1;width:100%;padding:12px 0 32px}
}
@media(max-width:700px) {
 .shell{width:calc(100% - 36px)}.nav{height:70px;gap:12px}.brand{font-size:20px}
 .nav-end{margin-left:auto;gap:7px}.nav-end>.button{font-size:10px;padding:0 11px}.nav-end>.button .icon{display:none}
 .nav-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:27px}
 .nav-toggle span{width:15px;height:1px;background:var(--ink)}
 .nav-links{display:none;position:absolute;top:63px;left:18px;right:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow)}
 .nav-links.open{display:flex;flex-direction:column;gap:0}.nav-links a{padding:10px 0;font-size:13px}
 .hero{padding-top:38px}.intro-pill{font-size:9px}.hero h1{font-size:clamp(43px,8.5vw,60px);margin:21px 0}
 .hero-copy>p:not(.hero-fineprint){font-size:13px}.hero-fineprint{font-size:8px}.actions{gap:8px;margin-top:24px}
 .actions .button{font-size:11px;min-height:45px;padding:0 16px}
 .demo{height:605px;width:100%;margin-top:27px}
 .photo-sheet{width:123px;padding:5px 5px 0;border-radius:8px}
 .photo-crop{height:106px;border-radius:4px}.photo-caption{font-size:6px;padding:6px 1px;gap:3px}.photo-caption b{font-size:7px;padding:1px 3px}
 .source-photo{left:4%;top:12px}.result-photo{right:4%;top:18px}
 .app-preview{width:92%;top:98px;border-radius:12px}
 .window-bar{height:29px;font-size:8px;padding:0 11px}.traffic-lights i{width:6px;height:6px}
 .preview-content{padding:14px 15px 0}.preview-meta{font-size:7px}.preview-meta .icon{width:9px;height:9px}
 .photo-stage{transform:scale(.8);transform-origin:top center;margin:12px auto -30px;left:50%;margin-left:-150px}
 .conversion-headline{font-size:19px}.conversion-subtitle{font-size:8px;margin-top:4px}
 .demo-progress{margin:11px auto 14px;width:80px;height:2px}
 .preview-recipe{font-size:7px;padding:9px 0;gap:6px}.format-control button{font-size:8px;padding:3px 8px}.preview-folder .icon{width:10px;height:10px}
 .demo-notification{width:246px;top:457px;right:0;padding:9px 11px;border-radius:11px;gap:7px}
 .demo-notification>img{width:33px;height:33px}.demo-notification b{font-size:9px}.demo-notification small{font-size:7px}
 .demo-controls{width:92%;top:540px;font-size:8px}.replay-button{font-size:8px}.demo-disclaimer{top:582px;font-size:8px}
 .hero-promises{padding:20px 0 26px;gap:9px;flex-wrap:wrap;font-size:8px}.hero-promises>span{gap:4px}.hero-promises .icon{width:11px;height:11px}
 .section{padding-top:78px}.section-heading{display:block;margin-bottom:27px}.section-heading>p{margin-top:18px;max-width:100%;font-size:13px}.section-heading h2{font-size:36px}
 .feature-composition{grid-template-columns:1fr;grid-template-rows:auto;gap:16px}
 .formats-card{grid-row:auto;min-height:540px;padding:30px}.formats-card h3{font-size:30px}
 .format-art{left:22%;right:14%;top:47%}.format-links{left:30px;right:30px;font-size:10px}
 .quiet-card{padding:28px;min-height:320px}.quiet-visual{height:138px}.quiet-card h3{font-size:26px}
 .privacy-card{padding:28px;min-height:230px;gap:24px}.privacy-card h3{font-size:24px}.privacy-seal{width:65px;height:84px}
 .steps{grid-template-columns:1fr;gap:25px;margin-top:32px}.step{display:grid;grid-template-columns:130px 1fr;gap:15px;align-items:center}.step-art{height:160px}
 .folder-object{width:94px;height:70px}.folder-object:before{width:45px;top:-9px;height:17px}.folder-object>.icon{width:30px;height:30px}
 .step-copy{display:block;margin:0}.step-number{margin-bottom:8px;width:20px;height:20px;font-size:9px}
 .step h3{font-size:17px}.step p{font-size:11px;margin-top:7px}.recipe-object{width:122px;padding:13px;font-size:9px}.recipe-object>div{margin:8px 0}.recipe-object>div>*{font-size:8px}.recipe-object small{font-size:7px}
 .step-icon{width:105px;height:105px}.art-caption{font-size:8px;bottom:8px}
 .detail-grid{grid-template-columns:1fr;gap:16px}.detail-copy{padding:0 28px 28px}.detail-copy h3{font-size:25px}
 .appearance-art,.sound-art{height:275px}.appearance-window{width:70%;max-width:310px}
 .pricing-section{grid-template-columns:1fr;gap:30px}.pricing-intro>p{font-size:13px;max-width:100%}.pricing-intro>img{width:74px;height:74px}
 .price-card{padding:28px}.price-card h3{font-size:35px}.price-card li{font-size:10px}
 .faq-section{grid-template-columns:1fr;gap:25px}.faq summary{font-size:12px}.faq p{font-size:12px}
 .closing{padding:78px 0}.closing>img{width:91px;height:91px}.closing h2{font-size:42px}
 .footer-grid{grid-template-columns:repeat(3,1fr);gap:25px 15px}.footer-grid>div:first-child{grid-column:1/-1}
 .footer-grid a:not(.brand),.footer-grid b{font-size:10px}.footer-bottom{flex-wrap:wrap;font-size:8px;gap:12px}
 .footer-bottom>span:nth-child(2){order:3;flex-basis:100%}
 .page-hero{padding:40px 0}.page-hero h1{font-size:38px}.page-hero>p{font-size:15px}.grid-3{grid-template-columns:1fr}
 .content h2{font-size:27px}.content p,.content li{font-size:14px}.page-hero .actions{flex-wrap:wrap}
}
@media(max-width:360px) {
 .shell{width:calc(100% - 28px)}.hero h1{font-size:43px}.brand{font-size:18px;gap:3px}.brand img{width:30px;height:30px}
 .nav-end{gap:3px}.nav-end>.button{padding:0 8px;font-size:9px}.icon-button{width:28px}
 .hero-copy>p:not(.hero-fineprint){font-size:12px}.actions .button{font-size:10px;padding:0 13px}
 .conversion-headline{font-size:17px}.preview-folder{font-size:6px}.formats-card{min-height:520px}
 .format-art{left:16%;right:9%;top:48%}.format-links{gap:18px}.privacy-card{gap:16px;padding:23px}.privacy-card h3{font-size:21px}
 .step{grid-template-columns:110px 1fr;gap:12px}.recipe-object{width:110px}.step h3{font-size:15px}
}
/* Readable supporting copy and action-led feedback, without idle animation. */
.hero-copy>p:not(.hero-fineprint){font-size:17px;line-height:1.7}
.hero-fineprint{font-size:12px}
.card-copy p,.detail-copy p,.pricing-intro>p{font-size:15px}
.step p,.faq p,.faq-intro>p,.price-card>p{font-size:14px}
.price-card li,.faq summary,.format-links,.footer-grid a:not(.brand){font-size:13px}
.price-card>small,.closing>p,.hero-promises{font-size:12px}
.button .icon,.demo-notification>.icon{transition:transform .2s ease}
.format-photo,.file-sticker{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.text-link,.format-links a,.footer-grid a:not(.brand){
 background-image:linear-gradient(currentColor,currentColor);
 background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
 transition:background-size .2s ease,color .2s ease;
}
.faq summary{border-radius:8px;transition:background-color .18s,color .18s}
.button:focus-visible{box-shadow:0 6px 18px #245bdb35}
.text-link:focus-visible,.format-links a:focus-visible,.footer-grid a:focus-visible{background-size:100% 1px;color:var(--blue-ink)}
.faq summary:focus-visible{background:var(--surface);color:var(--blue-ink)}
.formats-card:focus-within .format-photo{transform:rotate(-5deg) translateY(-3px)}
.formats-card:focus-within .png-sticker{transform:translate(4px,-5px) rotate(13deg)}
.formats-card:focus-within .jpeg-sticker{transform:translate(-3px,4px) rotate(3deg)}
.demo[data-state=ready] .demo-notification:focus-visible{background:var(--surface)}
.demo-notification:focus-visible>.icon{transform:translateX(3px)}
@media(hover:hover) and (pointer:fine) {
 .button:hover{transform:translateY(-2px);box-shadow:0 7px 18px #245bdb29}
 .button:hover .icon{transform:translateY(-1px)}
 .button:active{transform:translateY(0);box-shadow:none}
 .formats-card:hover .format-photo{transform:rotate(-5deg) translateY(-3px)}
 .formats-card:hover .png-sticker{transform:translate(4px,-5px) rotate(13deg)}
 .formats-card:hover .jpeg-sticker{transform:translate(-3px,4px) rotate(3deg)}
 .demo[data-state=ready] .demo-notification:hover{background:var(--surface);border-color:var(--blue-ink)}
 .demo-notification:hover>.icon{transform:translateX(3px)}
 .text-link:hover,.format-links a:hover,.footer-grid a:not(.brand):hover{background-size:100% 1px;color:var(--blue-ink)}
 .faq summary:hover{background:var(--surface);color:var(--blue-ink)}
}
@media(max-width:700px) {
 .hero-copy>p:not(.hero-fineprint){font-size:15px}
 .hero-fineprint{font-size:11px}
 .hero-promises{font-size:11px;gap:12px}
 .format-links{flex-wrap:wrap;gap:12px}
 .step p{font-size:13px}
}
@media(prefers-reduced-motion:reduce) {
 html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}
 .button:hover,.button:active,.button:hover .icon,.demo-notification:hover>.icon,.demo-notification:focus-visible>.icon{transform:none}
 .formats-card:is(:hover,:focus-within) .format-photo{transform:rotate(-9deg)}
 .formats-card:is(:hover,:focus-within) .png-sticker{transform:rotate(10deg)}
 .formats-card:is(:hover,:focus-within) .jpeg-sticker{transform:rotate(6deg)}
}
body.page-hidden *{animation-play-state:paused!important}

/* Installation guide: authentic system captures carry the visual explanation. */
.install-page{overflow:hidden}
.install-hero{position:relative;padding-top:82px;padding-bottom:74px}
.install-hero:after{content:"";position:absolute;z-index:-1;right:-15%;top:10%;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#9cc9ff5e 0,#9cc9ff15 42%,transparent 70%);pointer-events:none}
.install-hero h1{font-size:clamp(52px,7vw,84px);line-height:1.04;letter-spacing:-.06em}
.install-hero>p{max-width:680px}
.install-hero-actions{display:flex;align-items:center;gap:24px;margin-top:28px}
.install-text-link{color:var(--blue-ink);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.install-text-link:hover{color:var(--ink)}
.hero-fineprint a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.install-trust{display:grid;grid-template-columns:54px 1fr;gap:24px;padding:28px 32px;background:var(--blue-soft);border:1px solid var(--line);border-radius:22px}
.install-trust-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--paper);color:var(--blue-ink);box-shadow:0 4px 12px #245bdb12}
.install-trust-icon .icon{width:25px;height:25px}
.install-trust h2{font-size:22px;letter-spacing:-.035em;margin:1px 0 7px}
.install-trust p{font-size:14px;color:var(--muted);line-height:1.8;max-width:850px}
.install-steps{padding-top:104px}
.install-section-heading{margin-bottom:44px}
.install-section-heading>p{color:var(--blue-ink);font-size:13px;font-weight:600;margin-bottom:10px}
.install-timeline{list-style:none;margin:0;padding:0}
.install-step{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:65px;align-items:start;padding:36px 0 76px;border-top:1px solid var(--line)}
.install-step:first-child{border-top:2px solid var(--blue-ink)}
.install-step-copy{position:relative;padding-left:52px}
.install-step-number{position:absolute;top:0;left:0;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:white;font-size:13px;font-weight:700;box-shadow:0 5px 12px #245bdb29}
.install-step h3{font-size:27px;letter-spacing:-.04em;line-height:1.2;margin:2px 0 14px}
.install-step p{color:var(--muted);font-size:14px;line-height:1.75;margin-top:12px}
.install-step strong{color:var(--ink);font-weight:650}
.install-step-note{padding-left:16px;border-left:2px solid var(--blue-ink)}
.install-shot{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.install-shot img{width:100%;height:auto;object-fit:contain;background:var(--surface)}
.install-shot figcaption{padding:11px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.install-bottom{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:90px;padding:26px 0 110px}
.install-bottom>div:first-child>p{color:var(--muted);font-size:15px;line-height:1.8;max-width:600px;margin-top:19px}
.install-bottom a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:4px}
.install-bottom-card{align-self:start;background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px}
.install-bottom-card>.icon{width:28px;height:28px;color:var(--green);margin-bottom:20px}
.install-bottom-card h3{font-size:23px}
.install-bottom-card p{color:var(--muted);font-size:14px;line-height:1.75;margin:12px 0 18px}
@media(max-width:850px){
 .install-step{grid-template-columns:1fr;gap:24px;padding-bottom:60px}
 .install-step-copy{max-width:650px}
 .install-bottom{grid-template-columns:1fr;gap:28px}
 .install-bottom-card{max-width:460px}
}
@media(max-width:700px){
 .install-hero{padding-top:46px;padding-bottom:48px}
 .install-hero h1{font-size:clamp(44px,11vw,58px)}
 .install-hero-actions{align-items:flex-start;flex-direction:column;gap:17px}
 .install-trust{grid-template-columns:1fr;gap:14px;padding:24px}
 .install-steps{padding-top:76px}
 .install-section-heading{margin-bottom:25px}
 .install-step{padding:28px 0 52px}
 .install-step-copy{padding-left:45px}
 .install-step h3{font-size:23px}
 .install-shot{border-radius:14px}
 .install-shot figcaption{font-size:11px}
 .install-bottom{padding-bottom:70px}
}