/* Aerolull · v4 */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2")}

:root{
  color-scheme:light dark;
  --bg:#f3eee5; --bg-deep:#e9e1d3; --glow:rgba(232,170,120,.30); --glow2:rgba(143,168,155,.22);
  --ink:#16201e; --muted:#56615d; --faint:#646e6a; --hair:rgba(22,32,30,.12);
  --deep:#1d3833; --deep-2:#2a4a44; --on-deep:#f6f1e7;
  --accent:#b5653c; --accent-soft:rgba(181,101,60,.14);
  --sage:#8ea596; --glass:#fbf8f2; --pane:#e4e9e3;
  --card:rgba(251,248,242,.86); --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(29,56,51,.55), 0 2px 6px -2px rgba(29,56,51,.35);
  --serif:"Instrument Serif","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --grain-op:.055; --grain-blend:multiply;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1614; --bg-deep:#0a100f; --glow:rgba(214,137,92,.20); --glow2:rgba(110,150,135,.14);
    --ink:#efe8db; --muted:#aab3ad; --faint:#89938e; --hair:rgba(239,232,219,.14);
    --deep:#efe7d8; --deep-2:#ffffff; --on-deep:#14201d;
    --accent:#dc9466; --accent-soft:rgba(220,148,102,.16);
    --sage:#7f998b; --glass:#17231f; --pane:#1b2a26;
    --card:rgba(20,31,28,.9); --shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 18px 40px -16px rgba(0,0,0,.7), 0 2px 8px -2px rgba(0,0,0,.5);
    --grain-op:.07; --grain-blend:soft-light;
  }
}

*{box-sizing:border-box}
html,body{margin:0;overscroll-behavior:none}
html{height:100%}body{min-height:100%}
body{
  background:
    radial-gradient(120% 70% at 50% -10%, var(--glow) 0%, transparent 60%),
    radial-gradient(80% 60% at 50% 115%, var(--glow2) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment:fixed;
  color:var(--ink); font:400 16px/1.55 var(--sans); font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
body::before{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:0;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Layout: nav, main and footer are all in normal flow. main never shrinks below its content (min-height:auto),
   only the illustration flexes. If content can't fit, the page grows and scrolls instead of overlapping. */
.page{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--sat) + clamp(16px,3dvh,32px)) calc(var(--sar) + 24px) calc(var(--sab) + clamp(12px,2.4dvh,24px)) calc(var(--sal) + 24px)}

nav{flex:none;display:flex;justify-content:center;width:100%;margin-bottom:clamp(14px,3dvh,30px)}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:400 1.6rem/1 var(--serif);letter-spacing:-.01em}
.logo svg{width:26px;height:26px;display:block}
.logo .mk-bg{fill:var(--deep)} .logo .mk-fg{stroke:var(--on-deep)}

main{flex:1 0 auto;width:100%;max-width:680px;display:flex;flex-direction:column;align-items:center;justify-content:center}

.art{position:relative;flex:1 1 0;min-height:0;width:100%;max-height:min(300px,27dvh);margin-bottom:clamp(10px,2.6dvh,28px)}
.art svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}

.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px;border-radius:999px;border:1px solid var(--hair);
  background:color-mix(in srgb,var(--glass) 70%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:500 .76rem/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);display:block}

h1{font:400 clamp(2.45rem,min(10.4vw,7.2dvh),4.6rem)/1.0 var(--serif);letter-spacing:-.022em;margin:clamp(12px,2.2dvh,22px) 0 clamp(10px,1.8dvh,18px);max-width:12.5em;text-wrap:balance}
h1 em{font-style:italic;color:var(--accent)}
.lede{font-size:clamp(.98rem,min(4.1vw,2.2dvh),1.12rem);line-height:1.6;color:var(--muted);max-width:28.5em;margin:0 auto;text-wrap:pretty;letter-spacing:-.003em}

.buy{margin-top:clamp(18px,3.8dvh,38px);width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center}
.price{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:clamp(12px,2dvh,18px)}
.price small{font:600 .66rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.price b{font:400 clamp(2rem,min(8vw,5dvh),2.6rem)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}

.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:clamp(14px,2.1dvh,18px) 24px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font:560 1rem/1 var(--sans);letter-spacing:-.005em;color:var(--on-deep);
  background:linear-gradient(180deg,var(--deep-2),var(--deep));box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,filter .18s;-webkit-tap-highlight-color:transparent}
.btn svg{width:16px;height:16px;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:translateY(1px) scale(.99);filter:brightness(.97)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.note{margin:clamp(10px,1.6dvh,14px) 0 0;font-size:.78rem;color:var(--faint);letter-spacing:.005em}

footer{flex:none;margin-top:clamp(16px,2.8dvh,28px);display:flex;gap:10px;justify-content:center;align-items:center;font-size:.74rem;color:var(--faint);letter-spacing:.01em}
footer .dot{opacity:.45}
.link{background:none;border:0;padding:2px 0;font:inherit;color:inherit;cursor:pointer;text-decoration:none;border-bottom:1px solid var(--hair);transition:color .15s,border-color .15s}
.link:hover{color:var(--ink);border-color:currentColor}
.link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* entrance */
.rise{opacity:0;transform:translateY(10px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0) * 90ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}

/* illustration motion */
.air path{stroke-dasharray:6 14;animation:drift 3.8s linear infinite}
.air path:nth-child(2){animation-duration:4.6s}
.air path:nth-child(3){animation-duration:4.2s;animation-delay:-1.4s}
@keyframes drift{to{stroke-dashoffset:40}}
.wave{transform-box:fill-box;transform-origin:center;animation:wave 3.6s cubic-bezier(.4,0,.2,1) infinite;opacity:0}
.wave:nth-of-type(2){animation-delay:1.2s}.wave:nth-of-type(3){animation-delay:2.4s}
@keyframes wave{0%{opacity:0;transform:translateX(26px)}25%{opacity:.85}100%{opacity:0;transform:translateX(-30px) scale(.82)}}
.halo{animation:breathe 7s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes breathe{50%{opacity:.7;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none;opacity:1;transform:none}
  .air path,.halo{animation:none}
  .wave{animation:none;opacity:.75;transform:translateX(18px)}
  .wave:nth-of-type(2){opacity:.42;transform:translateX(2px)}.wave:nth-of-type(3){opacity:.16;transform:translateX(-14px) scale(.9)}
}

/* dialogs */
dialog{border:1px solid var(--hair);border-radius:24px;padding:0;width:min(520px,calc(100vw - 32px));max-height:min(82dvh,640px);
  background:var(--card);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  color:var(--ink);text-align:left;box-shadow:0 30px 80px -30px rgba(0,0,0,.45)}
dialog[open]{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
dialog::backdrop{background:rgba(14,22,20,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.dlg{padding:26px 26px 22px;max-height:min(82dvh,640px);overflow:auto}
.dlg h2{font:400 2rem/1.05 var(--serif);letter-spacing:-.015em;margin:0 0 14px}
.dlg p{color:var(--muted);margin:0 0 10px;font-size:.93rem;line-height:1.6}
.x{float:right;width:34px;height:34px;margin:-6px -8px 0 0;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.x:hover{background:var(--hair);color:var(--ink)}
.faq{margin:0}
.faq dt{font-weight:600;font-size:.92rem;margin-top:16px;letter-spacing:-.005em}
.faq dt:first-child{margin-top:4px}
.faq dd{margin:4px 0 0;color:var(--muted);font-size:.9rem;line-height:1.55}

/* form */
form.rform{text-align:left;width:100%}
label{display:block;font:600 .74rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 7px}
.opt{font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.85}
input[type=email],select{width:100%;padding:12px 14px;border:1px solid var(--hair);border-radius:14px;font:400 16px/1.2 var(--sans);
  background:color-mix(in srgb,var(--glass) 85%,transparent);color:var(--ink);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237a8380' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field{margin-bottom:clamp(10px,1.6dvh,14px)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin:10px 0 0;font-weight:500;font-size:.9rem;text-align:center;min-height:1.2em}
.msg.ok{color:var(--muted)}.msg.err{color:var(--accent)}

/* short screens */
@media (max-height:720px){.art{max-height:min(170px,22dvh);margin-bottom:12px}nav{margin-bottom:14px}h1{margin:12px 0 10px}.buy{margin-top:18px}.price{margin-bottom:10px}.note{margin-top:10px}}
@media (max-height:640px){h1{font-size:clamp(2.1rem,min(9.4vw,6.6dvh),3.4rem)}.lede{font-size:.95rem;line-height:1.5}.buy{margin-top:14px}.btn{padding:13px 22px}}
@media (max-height:600px){.art{max-height:min(100px,17dvh);margin-bottom:10px}nav{margin-bottom:12px}
  input[type=email],select{padding:9px 12px}.field{margin-bottom:8px}label{margin-bottom:5px}.rform .btn{padding:12px 22px}}
@media (max-height:540px){.art{display:none}h1{margin:8px 0 8px}}
@media (min-width:900px){.lede{max-width:31em}}
.btn span{white-space:nowrap}