/* AIR / Make room for wonder. Authored, layered illustration — no WebGL. */
:root{--paper:#fef7e6;--ink:#242646;--blue:#3157d5;--lavender:#d7cafa;--line:rgba(36,38,70,.2);--radius:28px;--scene-bg:#d7cafa;--scene-accent:#3157d5;--scene-detail:#f8c450;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;font-size:17px;line-height:1.55;overflow-wrap:break-word}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}svg{display:block}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.05;font-weight:450;letter-spacing:-.045em}h2{font-size:clamp(40px,5.2vw,80px)}h3{font-size:clamp(26px,2.6vw,40px)}p+p{margin-top:20px}em{font-style:normal}button{border:0}ul{padding-left:22px}::selection{background:#f6ba79;color:#242646}:focus-visible{outline:3px solid #2455e6;outline-offset:5px;border-radius:5px}[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;overflow:hidden;border:0}.skip{position:fixed;top:12px;left:20px;z-index:100;background:var(--paper);padding:14px 24px;transform:translateY(-180%)}.skip:focus{transform:none}.section{padding:110px max(5vw,24px);max-width:1800px;margin:auto}.eyebrow{font-size:12px;font-weight:650;letter-spacing:.11em;line-height:1.5;text-transform:uppercase}.text-link{display:inline-flex;align-items:center;gap:24px;border-bottom:1px solid;padding:8px 0;font-weight:500}.text-link span{font-size:23px;transition:transform .2s}.text-link:hover span{transform:translate(3px,-3px)}.utility{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border:1px solid transparent;border-radius:50px;background:#fff;color:var(--ink);font-size:15px;font-weight:500}.utility>span{display:block;transition:transform .3s cubic-bezier(.3,1.7,.4,1)}.utility:hover>span{transform:rotate(-3deg)}.offset-button{position:relative;display:inline-flex;background:var(--ink);border-radius:9px;isolation:isolate;margin:0 5px 5px 0;min-height:54px;font-weight:500;font-size:16px}.offset-button>span{display:flex;gap:32px;align-items:center;justify-content:space-between;background:var(--scene-accent);color:white;padding:17px 25px;border:1.5px solid var(--ink);border-radius:9px;transform:translate(-4px,-4px);transition:transform .22s}.offset-button i{font-size:21px;font-style:normal}.offset-button:hover>span{transform:translate(-2px,-2px)}.offset-button:active>span{transform:translate(0,0)}
.site-header{height:100px;padding:20px 4vw;display:flex;align-items:center;justify-content:space-between;gap:28px;position:absolute;top:0;left:0;width:100%;z-index:30}.brand{display:inline-flex;gap:8px;align-items:center;flex-shrink:0;line-height:1;letter-spacing:-.05em;font-size:28px;font-weight:700}.brand img{object-fit:contain;width:45px;height:45px}.brand>span>span{display:block;font-weight:600;letter-spacing:.11em;font-size:9px;margin-top:4px}.nav{display:flex;gap:32px;font-size:14px;font-weight:500;align-items:center}.nav a{position:relative;padding:10px 0}.nav a:after{content:'';position:absolute;bottom:5px;left:0;width:0;height:1px;background:currentColor;transition:width .2s}.nav a:hover:after{width:100%}.header-actions{display:flex;gap:10px}.menu-toggle{display:none}.open-air{min-width:124px}.site-header:has(.is-open){z-index:60}

.journal-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.journal-card>img{width:100%;aspect-ratio:1.45;object-fit:cover;transition:transform .5s;border-radius:12px}.journal-card:hover img{transform:scale(1.025)}.journal-card .eyebrow{margin:25px 0 12px}.journal-card h3{font-size:clamp(27px,2.8vw,42px)}.journal-card>p:last-child{font-size:16px;margin-top:15px}
.site-footer{padding:80px 5vw 22px;background:var(--paper);overflow:hidden}.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}.footer-top>div>p{font-size:19px;line-height:1.45;margin-top:24px}.footer-column{display:flex;flex-direction:column;align-items:start;gap:13px}.footer-column h3{font-size:10px;letter-spacing:.12em;font-weight:650;margin:8px 0 12px}.footer-column a{font-size:14px}.footer-column a:hover{text-decoration:underline}.motion-toggle{margin-top:28px;border:1px solid var(--line);background:none;border-radius:40px;padding:10px 17px;font-size:13px;min-height:44px}.motion-toggle span{margin-left:15px}.footer-wordmark{font-size:clamp(60px,10.25vw,185px);font-weight:300;line-height:1.05;letter-spacing:-.06em;white-space:nowrap;margin-top:95px;text-align:center}.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:24px;margin-top:30px;font-size:10px;letter-spacing:.04em}.footer-bottom a{white-space:nowrap}

/* Supporting pages retain their original, honest copy and working form preview. */
.inner-page{background:var(--paper)}.inner-page .site-header{background:#dfd6f2}.page-hero{padding-top:165px;padding-bottom:75px;background:#dfd6f2;max-width:none;border-radius:0 0 50% 50% / 0 0 35px 35px}.page-hero h1{font-weight:300;font-size:clamp(48px,7.5vw,110px);margin:26px 0}.page-hero h1 em{color:#796096}.page-hero .page-lead{max-width:620px;font-size:21px}.back-link{display:inline-block;font-size:13px;margin-bottom:50px}.page-content{padding-top:85px;padding-bottom:120px}.page-content h2{font-size:clamp(35px,4vw,58px);margin-bottom:25px}.page-content h3{font-size:27px;margin:24px 0 15px}.page-content p{max-width:780px}.page-content p+p{margin-top:20px}.story-split,.contact-grid,.founder-grid{display:grid;grid-template-columns:1fr 1fr;gap:7vw;align-items:start}.story-split img{width:100%;border-radius:20px}.values-grid,.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:55px}.values-grid>*,.price-card{background:#f4e7d4;padding:35px;border-radius:14px}.values-grid h3{margin-top:0}.price-card.featured{background:#dfd6f2}.price-status{font-size:26px;font-weight:500;margin-block:25px}.price-card li{margin:12px 0;font-size:15px}.small-note,.form-help{font-size:13px;margin-top:25px;color:#625f6c}.button{display:inline-flex;align-items:center;gap:24px;padding:15px 24px;background:var(--ink);color:var(--paper);border-radius:8px;margin-top:24px;min-height:50px}.content-narrow{max-width:860px;margin:auto}.resource-row{display:block;padding:30px 0;border-bottom:1px solid var(--line)}.notice{background:#f5e9bd;border-left:3px solid #887147;padding:25px;margin:30px 0;border-radius:0 8px 8px 0}.notice p{margin-top:10px!important;font-size:15px}.article-body{max-width:800px;margin:auto;font-size:19px}.article-body h2{margin-top:50px}.article-body>img{border-radius:18px;width:100%;margin:30px 0}.article-body blockquote{font-size:30px;border-left:3px solid #ad8dd3;padding-left:25px;margin:40px 0}.inline-link,.linkedin-link{display:inline-flex;align-items:center;gap:15px;border-bottom:1px solid;margin-top:20px;padding-block:8px}.founder-portrait img{border-radius:12px;width:100%;height:auto}.portrait-caption{display:block;font-size:11px;letter-spacing:.1em;margin-top:16px}.founder-bio{font-size:21px}.founder-copy .credentials{padding:0;list-style:none}.credentials li{padding:18px 0;border-bottom:1px solid var(--line)}.credentials li>span{display:block;font-weight:600}.credentials small{font-size:14px}.founder-education{margin-top:25px;padding:25px;background:#f2e8d8;border-radius:12px}.founder-education h3{margin-top:0}.founder-copy .linkedin-link{margin-right:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}form label{display:flex;flex-direction:column;gap:10px;font-size:15px;margin-bottom:23px}input,textarea,select{width:100%;border:1px solid #ac9f98;background:#fffdf6;padding:15px 16px;border-radius:8px;color:var(--ink);font-size:16px;min-height:52px}textarea{resize:vertical;min-height:150px}#form-result{background:#d2e6cf;padding:25px;border-radius:12px;margin-top:25px}#form-result p{margin-top:12px}.policy-layout{display:grid;grid-template-columns:240px 1fr;gap:7vw}.policy-layout aside{position:sticky;top:25px;display:flex;flex-direction:column;gap:20px}.policy-layout article section{margin-bottom:40px}.policy-layout aside a[aria-current]{font-weight:700;text-decoration:underline}
/* Paused motion: the footer switch or the device preference. */
.motion-paused *{animation:none!important;scroll-behavior:auto!important}.motion-paused .utility>span,.motion-paused .offset-button>span,.motion-paused .journal-card img{transition:none!important}

@media(max-width:1100px){.site-header{gap:20px}.nav{gap:22px}.footer-top{gap:25px}}
@media(max-width:800px){.site-header{height:85px;padding:18px 24px}.menu-toggle{display:flex;min-width:48px;padding:11px 17px}.header-actions{gap:7px}.open-air{min-width:105px;padding:12px 18px}.nav{display:none;position:absolute;left:16px;right:16px;top:85px;background:var(--paper);border-radius:20px;box-shadow:0 10px 40px #24264622;padding:20px;gap:2px;flex-direction:column;align-items:stretch;font-size:20px}.nav.is-open{display:flex}.nav a{padding:15px}.section{padding:80px 30px}.journal-grid{gap:25px}.footer-top{grid-template-columns:1.2fr 1fr 1fr}.footer-top>div:first-child{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:25px}.footer-top>div>p{margin-top:0;font-size:16px}.motion-toggle{margin-top:0}.footer-bottom{flex-wrap:wrap}.footer-bottom>span:nth-child(2){display:none}.story-split,.contact-grid,.founder-grid{gap:35px}.values-grid,.pricing-grid{grid-template-columns:1fr}.page-hero{padding-top:140px}.form-grid{grid-template-columns:1fr;gap:0}.policy-layout{grid-template-columns:1fr}.policy-layout aside{position:static;flex-direction:row;flex-wrap:wrap}}
@media(max-width:600px){.site-header{padding:14px 20px;height:82px;gap:10px}.brand{font-size:24px;gap:4px}.brand img{width:36px;height:36px}.brand>span>span{font-size:8px}.header-actions .utility{font-size:12px;min-height:44px;padding:11px 15px}.open-air{min-width:0}.menu-toggle>span{font-size:0}.menu-toggle .air-icon{font-size:20px}.section{padding:68px 23px}.eyebrow{font-size:10px}.journal-grid{grid-template-columns:1fr;gap:40px}.journal-card h3{font-size:32px}.journal-card .eyebrow{margin-top:20px}.journal-card>p:last-child{font-size:16px}.site-footer{padding:55px 24px 25px}.footer-top{grid-template-columns:1fr 1fr;gap:35px}.footer-top>div:first-child{flex-wrap:wrap;justify-content:start;gap:22px;align-items:center}.footer-top>div:first-child>p{font-size:15px;margin-left:auto}.footer-top>div:first-child>button{flex-basis:auto}.footer-column a{font-size:14px}.footer-column h3{font-size:9px}.footer-top>div:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:13px}.footer-top>div:last-child h3{grid-column:1/-1}.footer-wordmark{font-size:11vw;margin:48px -6px 0}.footer-bottom{margin-top:20px;font-size:10px}.page-hero{padding-top:145px;padding-bottom:60px;border-radius:0 0 50% 50% / 0 0 20px 20px}.page-hero h1{font-size:48px;line-height:1.04}.page-hero .page-lead{font-size:18px}.back-link{margin-bottom:30px}.story-split,.contact-grid,.founder-grid{grid-template-columns:1fr}.page-content h2{font-size:38px}.page-content p{font-size:17px}.values-grid,.pricing-grid{margin-top:30px}.policy-layout aside{gap:12px 20px;font-size:14px}.article-body{font-size:17px}}
@media(max-height:499px) and (min-width:601px){.section{padding-block:65px}}

html{scroll-behavior:auto}

img{height:auto}

.site-header{position:fixed;transition:background-color .2s,height .2s}
.site-header.is-scrolled{height:80px;background:#fef7e6;border-bottom:1px solid var(--line)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.journal-card:hover img{transform:none}}

/* Pinned scenes size their own spacing; browser anchoring must not add it again on reload. */
.home-page{overflow-anchor:none}

/* Code-drawn icons keep iOS from substituting colourful emoji glyphs. */
.air-icon{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.air-icon-star,.air-icon-sunburst,.air-icon-play{fill:currentColor;stroke:none}
.offset-button .air-icon{font-size:21px}

/* A03 contact: bounded fields, accessible progress and no hidden overflow. */
#contact-fields{border:0;padding:0;margin:0;min-width:0}
.contact-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#contact-form input,#contact-form textarea,#contact-form select{max-width:100%;box-sizing:border-box}
#contact-form button:disabled{cursor:default;opacity:.65}
#contact-form[aria-busy="true"] button{cursor:wait}
#form-result{overflow-wrap:anywhere;scroll-margin:120px;border:1px solid currentColor;border-radius:16px;padding:20px;margin-top:20px}
#form-result[data-state="success"]{background:#e3efcf;color:#234a32}
#form-result[data-state="error"]{background:#fae2d5;color:#7a2c20}
#form-result[data-state="pending"]{background:#e2e0f7}
#form-result:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* A04: readable policy content and wrapping identifiers at narrow widths. */
.policy-page .policy-layout{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.policy-page .policy-layout aside{align-self:start;top:110px}
.policy-page article{min-width:0;max-width:800px}
.policy-page article section{scroll-margin-top:110px}
.policy-page article h2{font-size:clamp(28px,3vw,40px);line-height:1.15;letter-spacing:-.035em}
.policy-page article p,.policy-page article li,.policy-page article dd{font-size:clamp(16px,1.4vw,18px);line-height:1.7}
.policy-page article a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.policy-page ul{padding-left:1.3em}.policy-page li+li{margin-top:12px}
.policy-page .policy-date{font-size:14px;margin-top:24px}
.policy-definitions{margin:24px 0}.policy-definitions>div{padding:20px 0;border-top:1px solid var(--line)}
.policy-definitions dt{font-weight:700;line-height:1.5}.policy-definitions dd{margin:8px 0 0}
.policy-page code{font-size:.88em;overflow-wrap:anywhere;white-space:normal}
@media(max-width:900px){.policy-page .policy-layout{grid-template-columns:minmax(0,1fr)}.policy-page .policy-layout aside{position:static;flex-direction:row;flex-wrap:wrap}}

/* Airo home page. Every rule is scoped to the home page's <main class="airo-root">, its
   header switch or its footer, so the supporting pages are unchanged. */
.airo-root {
  --paper: #fef7e6;
  --ink: #242646;
  --blue: #3157d5;
  --lavender: #d7cafa;
  --orange: #ff8b51;
  --butter: #ffe59a;
  --line: rgba(36, 38, 70, 0.16);
  --header: 80px; /* the fixed site header once the page has scrolled */
  -webkit-font-smoothing: antialiased;
}
.airo-root, .airo-root * { box-sizing: border-box; }
.airo-root [hidden] { display: none !important; } /* component display rules must not unhide */
.airo-root { position: relative; overflow-x: clip; }
.airo-root p + p { margin-top: 0; }
/* Airo's art arrives with the home module; without it the decorative images stay hidden */
.airo-root:not(.airo-js) [data-airo-src], .airo-root:not(.airo-js) .airo-ball { visibility: hidden; }

/* the sound switch sits beside Open AIR on the home page */
.sound-toggle { gap: 8px; min-width: 48px; border-color: var(--line); background: rgba(255, 255, 255, 0.55); }
.sound-icon { width: 16px; height: 16px; flex: none; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8.5 8.5 0 0 1 0 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sound-toggle[aria-pressed='false'] .sound-icon { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.home-page .site-header:not(.is-scrolled) .sound-toggle { background: rgba(255, 255, 255, 0.55); }

/* smooth scrolling (Lenis 1.3.26, from its published stylesheet) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* hero -------------------------------------------------------------------- */
.airo-hero {
  position: relative; min-height: max(720px, 100svh); overflow: hidden;
  background: var(--lavender); isolation: isolate;
}
.airo-hero-copy {
  position: relative; z-index: 2; max-width: 760px;
  padding: clamp(120px, 15vh, 170px) clamp(16px, 5.5vw, 80px) 0;
}
.airo-kicker { margin: 0 0 18px; font-size: 13px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.airo-display { margin: 0; font-weight: 300; font-size: clamp(60px, 9.2vw, 150px); line-height: 0.88; letter-spacing: -0.058em; }
.airo-display-sm { font-size: clamp(44px, 6vw, 92px); }
.airo-lede { max-width: 30ch; margin: 26px 0 0; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.38; font-weight: 450; }
.airo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.airo-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink); background: transparent;
  font-weight: 600; font-size: 16px; text-decoration: none;
}
.airo-btn-primary { background: var(--ink); color: #fff; }
.airo-btn:hover { transform: translateY(-1px); }

.airo-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.airo-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; }
.airo-floor svg { width: 100%; height: 100%; display: block; fill: var(--paper); }
.airo-doodles { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.airo-doodle { fill: none; stroke: #34364c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.airo-actor { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; z-index: 4; }
.airo-hit {
  position: absolute; display: block; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 46%; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.airo-svg { position: absolute; display: block; overflow: visible; pointer-events: none; }
.airo-shadow {
  position: absolute; left: 0; top: 0; height: 16px; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 38, 70, 0.55), rgba(36, 38, 70, 0));
  will-change: transform;
}

.airo-ball {
  position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 50%; cursor: pointer; pointer-events: auto; will-change: transform; z-index: 5; /* in front of Airo's feet */
  -webkit-tap-highlight-color: transparent;
}
.airo-ball img { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(36, 38, 70, 0.18)); }
.airo-plane { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 10px 10px rgba(36, 38, 70, 0.12)); }

.airo-bubble {
  position: absolute; left: 0; top: 0; z-index: 6; max-width: min(300px, 80vw); width: max-content;
  padding: 12px 18px; border-radius: 22px; background: #fff; color: var(--ink);
  font: 650 17px/1.3 'DM Sans', sans-serif; box-shadow: 0 10px 30px rgba(36, 38, 70, 0.16);
  opacity: 0; scale: 0.8; transform-origin: 50% 100%;
  transition: opacity 0.18s ease, scale 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
.airo-bubble.is-on { opacity: 1; scale: 1; }
.airo-bubble.is-side { transform-origin: 0% 50%; }
.airo-bubble.is-side::after { bottom: auto; top: 50%; left: -6px; transform: translateY(-50%) rotate(45deg); }
.airo-bubble.is-side-left { transform-origin: 100% 50%; }
.airo-bubble.is-side-left::after { left: auto; right: -6px; }
.airo-bubble::after {
  content: ''; position: absolute; bottom: -9px; left: var(--tail, 50%); width: 20px; height: 20px;
  background: #fff; border-radius: 4px; transform: translateX(-50%) rotate(45deg);
}

.airo-dust { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 40% 40%, #fffdf6, rgba(255, 253, 246, 0.6) 55%, rgba(255, 253, 246, 0) 72%); }
.airo-sticker { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 7; }
.airo-sticker svg { width: 100%; height: 100%; display: block; }
.airo-float-text { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; white-space: nowrap; font: 800 26px/1 'DM Sans', sans-serif; color: var(--orange); text-shadow: 0 2px 0 #fff, 0 0 12px rgba(255, 255, 255, 0.8); }
.airo-float-text span { display: inline-block; }

.airo-ring { position: absolute; z-index: 5; border: 3px dashed var(--blue); border-radius: 50%; pointer-events: none; animation: airo-pulse 1.1s ease-in-out infinite; }
.airo-hand { position: absolute; z-index: 6; pointer-events: none; height: auto; transform-origin: 50% 50%; filter: drop-shadow(0 4px 4px rgba(36, 38, 70, 0.2)); }
@keyframes airo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(49, 87, 213, 0.35); } 50% { box-shadow: 0 0 0 10px rgba(49, 87, 213, 0); } }

.airo-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.airo-next { min-height: 80vh; padding: 120px clamp(16px, 5.5vw, 80px); background: var(--paper); }

/* section 2: Airo builds a lesson ---------------------------------------- */
.airo-demo { position: relative; padding: clamp(56px, 7vh, 96px) 0 clamp(40px, 6vh, 72px); background: var(--paper); overflow: hidden; }
.airo-demo .airo-display-sm { font-size: clamp(40px, 5vw, 76px); }
.airo-demo .airo-lede { margin-top: 14px; max-width: 40ch; }
.airo-demo-head { padding: 0 clamp(16px, 5.5vw, 80px); max-width: 900px; }
.airo-demo-stage { position: relative; margin-top: clamp(20px, 3vh, 36px); }
.airo-demo-track { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.airo-demo-track path { fill: none; stroke: rgba(36, 38, 70, 0.22); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.airo-demo-track circle { fill: var(--paper); stroke: rgba(36, 38, 70, 0.35); stroke-width: 2.5; }
.airo-demo-boards {
  position: relative; z-index: 2; list-style: none; margin: 0; padding: 0 clamp(16px, 5.5vw, 80px) calc(var(--reach, 300px) + 22px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px);
}
.demo-board {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; aspect-ratio: 1 / 0.74;
  padding: 12px; border: 1.5px solid rgba(36, 38, 70, 0.1); border-radius: 22px; background: #fff; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; box-shadow: 0 14px 30px -18px rgba(36, 38, 70, 0.35);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.demo-board:hover { border-color: rgba(49, 87, 213, 0.45); }
.demo-board.is-active { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(49, 87, 213, 0.14), 0 14px 30px -18px rgba(36, 38, 70, 0.4); }
.db-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.db-num { display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--lavender); font-size: 11px; letter-spacing: 0.04em; }
.db-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed rgba(36, 38, 70, 0.25); transition: background 0.2s, border-color 0.2s; }
.demo-board.is-done .db-check { border: 0; background: #1f8a72 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.db-screen { position: relative; flex: 1; display: block; border-radius: 14px; background: #f6f2ff; overflow: hidden; }

/* 01 topic */
.db-input { position: absolute; left: 10%; right: 10%; top: 50%; translate: 0 -50%; display: flex; align-items: center; height: 38%; min-height: 26px; padding: 0 10px; border-radius: 10px; background: #fff; border: 1.5px solid rgba(36, 38, 70, 0.14); font-size: 14px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.db-placeholder { color: rgba(36, 38, 70, 0.7); font-weight: 450; }
.demo-board.has-text .db-placeholder { display: none; }
.db-caret { width: 2px; height: 1.1em; margin-left: 2px; background: var(--blue); animation: db-blink 1s steps(1) infinite; }
@keyframes db-blink { 50% { opacity: 0; } }
.db-sun { position: absolute; right: 8%; top: 8%; width: 24%; aspect-ratio: 1; transform: scale(0); }
.db-sun svg { width: 100%; height: 100%; fill: #ffd34d; stroke: #f0a51c; stroke-width: 1.8; stroke-linecap: round; }

/* 02 outline */
.db-list { position: absolute; inset: 8% 8%; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.db-item { display: flex; align-items: center; gap: 6px; height: 28%; min-height: 20px; padding: 0 8px; border-radius: 8px; background: #fff; border: 1.5px solid rgba(36, 38, 70, 0.12); font-size: 12px; font-weight: 550; white-space: nowrap; overflow: hidden; }
.db-item > span { overflow: hidden; text-overflow: ellipsis; }
.db-n { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(36, 38, 70, 0.08); font-size: 10px; color: transparent; transition: background 0.2s, color 0.2s; }
.db-item.is-sorted { border-color: rgba(255, 139, 81, 0.6); }
.db-item.is-sorted .db-n { background: var(--orange); color: #fff; }

/* 03 theme: slot machine + pull cord */
.db-slot { position: absolute; inset: 8%; display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(36, 38, 70, 0.12); }
.db-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.db-theme-name { position: absolute; left: 8px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 11px; font-weight: 650; }
.db-slot.is-win { box-shadow: inset 0 0 0 3px #ffd34d, 0 0 0 4px rgba(255, 211, 77, 0.35); }
.db-cord { position: absolute; right: 16%; top: 100%; width: 3px; height: calc(var(--reach, 300px) * 0.24); background: #8b8fa8; border-radius: 2px; transform-origin: 50% 0; }
.db-cord i { position: absolute; left: 50%; bottom: -14px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 4px solid var(--orange); background: transparent; }

/* 04 slides: a stack that deals into a 3x2 grid */
.db-deck { position: absolute; inset: 8%; display: block; }
.db-slide { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 16 / 9; translate: -50% -50%; border-radius: 6px; background: #fff center / cover no-repeat; box-shadow: 0 3px 8px rgba(36, 38, 70, 0.18); }
.db-slide:nth-child(1) { rotate: -6deg; } .db-slide:nth-child(2) { rotate: 4deg; } .db-slide:nth-child(3) { rotate: -2deg; }
.db-slide:nth-child(4) { rotate: 7deg; } .db-slide:nth-child(5) { rotate: -4deg; } .db-slide:nth-child(6) { rotate: 1deg; }
.db-slide b { position: absolute; left: 12%; top: 22%; width: 48%; height: 12%; border-radius: 3px; background: rgba(36, 38, 70, 0.7); }
.db-slide i { position: absolute; left: 12%; top: 46%; width: 34%; height: 9%; border-radius: 3px; background: rgba(36, 38, 70, 0.25); }
.db-deck.is-dealt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6%; align-content: center; }
.db-deck.is-dealt .db-slide { position: relative; left: auto; top: auto; width: 100%; height: auto; translate: none; rotate: none; }

/* 05 live class */
.db-class { position: absolute; inset: 8%; display: flex; flex-direction: column; gap: 6%; }
.db-live { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: rgba(36, 38, 70, 0.12); color: rgba(36, 38, 70, 0.55); font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-board.is-live .db-live { background: #e0457b; color: #fff; animation: db-pulse 1.2s ease-in-out infinite; }
@keyframes db-pulse { 50% { box-shadow: 0 0 0 6px rgba(224, 69, 123, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 69, 123, 0.45); } }
.db-seats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8%; }
.db-seat { display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed rgba(36, 38, 70, 0.2); aspect-ratio: 1; align-self: center; justify-self: center; height: 100%; max-height: 46px; }
.db-student { width: 88%; aspect-ratio: 1; border-radius: 50%; transform: scale(0); --c: hsl(calc(var(--k) * 58 + 12) 80% 62%);
  position: relative; background: radial-gradient(circle at 36% 40%, #24264a 6%, transparent 7%), radial-gradient(circle at 64% 40%, #24264a 6%, transparent 7%), var(--c); }
.db-student::after { content: ''; position: absolute; left: 31%; top: 50%; width: 38%; height: 20%; border-bottom: 2px solid #24264a; border-radius: 0 0 50% 50%; } /* a smile */

/* badge buddies (the conga line) */
.demo-token { position: absolute; left: 0; top: 0; z-index: 3; width: var(--token, 60px); height: var(--token, 60px); pointer-events: none; will-change: transform; }
.demo-token-body { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 6px 10px -4px rgba(36, 38, 70, 0.35); position: relative; }
.demo-token-body svg { position: absolute; left: 22%; top: 30%; width: 56%; height: 56%; fill: #fff; }
.demo-eyes { position: absolute; left: 30%; top: 10%; display: flex; gap: 12%; width: 40%; }
.demo-eyes b { flex: 1; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 55% 55%, #24264a 38%, #fff 40%); }

.airo-demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(16px, 5.5vw, 80px); }
.airo-demo-status { margin: 0; font-size: 14px; font-weight: 600; color: rgba(36, 38, 70, 0.7); }
.airo-demo-foot .airo-actions { margin-top: 0; }

@media (max-width: 699px) {
  .airo-demo-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; row-gap: calc(var(--reach, 200px) + 40px); padding-bottom: calc(var(--reach, 200px) + 30px); }
  .airo-demo-boards li:nth-child(4) { grid-column: 3; grid-row: 2; }
  .airo-demo-boards li:nth-child(5) { grid-column: 2; grid-row: 2; }
  .demo-board { padding: 8px; gap: 6px; border-radius: 16px; aspect-ratio: 1 / 1.05; }
  .db-head { font-size: 11px; gap: 5px; }
  .db-num { min-width: 22px; height: 18px; font-size: 9px; }
  .db-check { width: 16px; height: 16px; }
  .demo-board.is-done .db-check { background-size: 11px; }
  .db-screen { border-radius: 10px; }
  .db-input { font-size: 10px; padding: 0 5px; left: 6%; right: 6%; }
  .db-placeholder { font-size: 9px; }
  .db-item { font-size: 8.5px; padding: 0 4px; gap: 3px; }
  .db-n { width: 12px; height: 12px; font-size: 7px; }
  .db-theme-name { font-size: 8px; padding: 2px 5px; left: 4px; bottom: 4px; }
  .db-live { font-size: 8px; padding: 1px 5px; }
  .airo-demo-foot { flex-direction: column; align-items: flex-start; }
}

/* section 3: four worlds, a pinned side-scroller ----------------------------- */
.airo-panels { position: relative; background: var(--paper); }
.airo-panels-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.airo-panels-bar { position: absolute; z-index: 6; left: 0; right: 0; top: var(--header); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(16px, 5.5vw, 80px); pointer-events: none; }
.airo-panels-bar .airo-kicker { margin: 0; }
.airo-panels-dots { display: flex; gap: 6px; pointer-events: auto; }
.airo-panels-dots button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid rgba(36, 38, 70, 0.22); background: rgba(255, 255, 255, 0.6); color: var(--ink); font: 600 12.5px/1 'DM Sans', sans-serif; cursor: pointer; }
.airo-panels-dots button[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.airo-panels-track { position: absolute; inset: 0; display: flex; width: max-content; will-change: transform; }
.airo-panel { position: relative; flex: none; width: 100vw; height: 100%; overflow: hidden; background: var(--bg); --floor: var(--fl); }
.airo-panel[data-world='explore'] { --bg: #d7cafa; --fl: #f3eefe; --accent: #3157d5; --detail: #f8c450; }
.airo-panel[data-world='create'] { --bg: #f9cdb6; --fl: #fff1e6; --accent: #a7402d; --detail: #fae181; }
.airo-panel[data-world='connect'] { --bg: #c5e8d8; --fl: #effaf4; --accent: #1f685b; --detail: #b6a0ed; }
.airo-panel[data-world='grow'] { --bg: #f7e7a8; --fl: #fffaea; --accent: #7050ad; --detail: #f5a598; }
.ap-copy { position: absolute; z-index: 2; left: clamp(16px, 5.5vw, 80px); top: 17%; width: min(40%, 520px); color: var(--ink); }
.ap-copy .airo-kicker { color: var(--accent); margin-bottom: 14px; }
.ap-title { margin: 0; font-weight: 300; font-size: clamp(44px, 5.4vw, 86px); line-height: 0.94; letter-spacing: -0.05em; }
.ap-text { margin: 18px 0 22px; max-width: 34ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; }
.ap-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: var(--floor); border-top: 2px solid rgba(36, 38, 70, 0.08); }
.ap-sky { position: absolute; inset: 0; pointer-events: none; }
.ap-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--detail); }
.ap-dot:nth-child(1) { left: 58%; top: 18%; } .ap-dot:nth-child(2) { left: 88%; top: 30%; width: 8px; height: 8px; } .ap-dot:nth-child(3) { left: 72%; top: 9%; width: 18px; height: 18px; background: var(--accent); opacity: 0.25; }
.ap-spark { position: absolute; font-style: normal; color: var(--accent); opacity: 0.55; font-size: 30px; }
.ap-spark:nth-of-type(4) { left: 92%; top: 14%; } .ap-spark:nth-of-type(5) { left: 64%; top: 34%; font-size: 18px; }

.ap-prop { position: absolute; z-index: 3; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pp-ledge svg { display: block; width: 100%; height: auto; fill: #fff; filter: drop-shadow(0 8px 10px rgba(36, 38, 70, 0.12)); }
.pp-star { display: none; height: auto; pointer-events: auto; cursor: pointer; z-index: 4; filter: drop-shadow(0 6px 8px rgba(255, 170, 0, 0.35)); }
.pp-star.is-landed { display: block; }
.pp-paper { height: auto; aspect-ratio: 5.2 / 1; border-radius: 10px; background: #fffdf7; box-shadow: 0 6px 0 rgba(36, 38, 70, 0.06), 0 10px 18px -10px rgba(36, 38, 70, 0.3); transform: perspective(500px) rotateX(38deg); transform-origin: 50% 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pp-paper::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 22%, rgba(49, 87, 213, 0.12) 22% 24%); }
.pp-ink { position: relative; font: 600 clamp(30px, 3.4vw, 56px)/1 'DM Sans', sans-serif; letter-spacing: -0.04em; color: #34364c; clip-path: inset(0 100% 0 0); white-space: nowrap; }
.pw { width: 64px; display: flex; flex-direction: column; align-items: center; }
.pw-frame { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 14px 14px 10px 10px; background: #fff; border: 4px solid var(--accent); overflow: hidden; box-shadow: 0 8px 14px -8px rgba(36, 38, 70, 0.35); }
.pw-kid { position: absolute; left: 14%; right: 14%; bottom: -6%; aspect-ratio: 1; border-radius: 50% 50% 40% 40%; transform: translateY(60%) scale(0.6);
  background: radial-gradient(circle at 36% 44%, #24264a 6%, transparent 7%), radial-gradient(circle at 64% 44%, #24264a 6%, transparent 7%), hsl(var(--h) 75% 64%); }
.pw-kid::after { content: ''; position: absolute; left: 32%; top: 55%; width: 36%; height: 18%; border-bottom: 2.5px solid #24264a; border-radius: 0 0 50% 50%; }
.pw-shutter { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--detail) 0 18%, rgba(255, 255, 255, 0.35) 18% 20%); transform-origin: 0 50%; }
.pw-hi { margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: #fff; font: 700 12px/1 'DM Sans', sans-serif; color: var(--ink); opacity: 0; transform: scale(0); box-shadow: 0 4px 8px -4px rgba(36, 38, 70, 0.3); }
.pw.is-open .pw-shutter { transform: scaleX(0); } .pw.is-open .pw-kid { transform: none; } .pw.is-open .pw-hi { opacity: 1; transform: none; }
.pp-plant { height: auto; }
.pp-plant svg { display: block; width: 100%; height: auto; overflow: visible; }
.pp-stem, .pp-leaf, .pp-bloom { transform-box: fill-box; }
.pp-stem { transform-origin: 50% 100%; transform: scaleY(0.25); }
.pp-leaf { transform: scale(0); } .pp-leaf-l { transform-origin: 100% 100%; } .pp-leaf-r { transform-origin: 0% 100%; }
.pp-bloom { transform-origin: 50% 50%; transform: scale(0) rotate(-120deg); }
.pp-plant.is-growing .pp-stem { transform: none; transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pp-plant.is-growing .pp-leaf { transform: none; transition: transform 0.45s cubic-bezier(0.3, 1.8, 0.5, 1); }
.pp-plant.is-growing .pp-leaf-l { transition-delay: 0.45s; } .pp-plant.is-growing .pp-leaf-r { transition-delay: 0.7s; }
.pp-plant.is-growing .pp-bloom { transform: none; transition: transform 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 1.3s; }
.pp-plant.is-grown .pp-stem, .pp-plant.is-grown .pp-leaf, .pp-plant.is-grown .pp-bloom { transform: none; }
.pp-rain { pointer-events: none; opacity: 0; transform: scale(0); }
.pp-rain svg { display: block; width: 100%; height: auto; fill: #fff; filter: drop-shadow(0 6px 10px rgba(36, 38, 70, 0.15)); }
.pp-rain i { position: absolute; top: 70%; width: 4px; height: 14px; border-radius: 4px; background: #6cb7f0; opacity: 0; }
.pp-rain i:nth-of-type(1) { left: 22%; } .pp-rain i:nth-of-type(2) { left: 38%; animation-delay: 0.15s !important; } .pp-rain i:nth-of-type(3) { left: 52%; animation-delay: 0.3s !important; } .pp-rain i:nth-of-type(4) { left: 66%; animation-delay: 0.08s !important; } .pp-rain i:nth-of-type(5) { left: 80%; animation-delay: 0.22s !important; }
.pp-rain.is-raining i { animation: pp-drop 0.55s linear infinite; }
@keyframes pp-drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(90px); } }
.airo-panels-stage { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.airo-thrown-plane { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }

/* the calm version: worlds stacked, everything finished, Airo still */
.airo-panels.is-flat .airo-panels-pin { height: auto; overflow: visible; }
.airo-panels.is-flat .airo-panels-bar { position: relative; top: auto; }
.airo-panels.is-flat .airo-panels-dots { display: none; }
.airo-panels.is-flat .airo-panels-track { position: relative; flex-direction: column; width: 100%; }
.airo-panels.is-flat .airo-panel { width: 100%; height: max(640px, 80svh); }
.airo-panels.is-flat .airo-panels-stage { inset: 0 0 auto 0; height: max(640px, 80svh); top: var(--bar-h, 76px); }

/* pace guide */
.airo-pace { position: fixed; z-index: 60; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #fff; color: var(--ink, #242646); font: 600 13px/1 'DM Sans', sans-serif; box-shadow: 0 12px 30px -12px rgba(36, 38, 70, 0.45); opacity: 0; transform: translateY(14px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.airo-pace.is-on { opacity: 1; transform: none; }
.airo-pace-icon svg { display: block; width: 26px; height: 20px; fill: rgba(36, 38, 70, 0.55); }
.airo-pace-icon.is-slow svg { fill: #1f8a72; }
.airo-pace.is-fast .airo-pace-icon.is-fast svg { fill: #e0457b; }
.airo-pace-bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.airo-pace-bars i { width: 5px; border-radius: 2px; background: rgba(36, 38, 70, 0.14); }
.airo-pace-bars i:nth-child(1) { height: 30%; } .airo-pace-bars i:nth-child(2) { height: 44%; } .airo-pace-bars i:nth-child(3) { height: 58%; } .airo-pace-bars i:nth-child(4) { height: 72%; } .airo-pace-bars i:nth-child(5) { height: 86%; } .airo-pace-bars i:nth-child(6) { height: 100%; }
.airo-pace-bars i.is-lit { background: #1f8a72; } .airo-pace.is-fast .airo-pace-bars i.is-lit { background: #e0457b; }

@media (max-width: 699px) {
  .airo-panels-bar { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .airo-panels-dots button { height: 28px; padding: 0 9px; font-size: 11px; }
  .ap-copy { top: calc(var(--header) + 96px); width: auto; right: 16px; }
  .ap-title { font-size: clamp(36px, 10.5vw, 46px); }
  .ap-text { margin: 10px 0 14px; font-size: 14.5px; }
  .ap-floor { height: 64px; }
  .pw { width: 46px; }
  .pw-hi { font-size: 10px; padding: 2px 6px; }
  .pp-ink { font-size: 40px; }
  .airo-pace { bottom: 12px; padding: 8px 12px; font-size: 12px; gap: 8px; }
  .airo-pace-text { max-width: 120px; line-height: 1.2; }
}

/* section 4: the AIR way, a scroll-scrubbed story --------------------------- */
.airo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.airo-story { position: relative; background: #fef7e6; }
.airo-story-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #fef7e6; }
.st-eyebrow { position: absolute; left: clamp(16px, 5.5vw, 80px); top: calc(var(--header) + 22px); margin: 0; z-index: 2; }
.st-lines { position: absolute; left: 0; right: 0; top: 30%; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.st-line { grid-area: 1 / 1; margin: 0; padding: 0 16px; text-align: center; font-weight: 300; font-size: clamp(48px, 8.6vw, 148px); line-height: 0.95; letter-spacing: -0.055em; color: var(--ink); transform-origin: 50% 50%; }
.k-word { display: inline-block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; vertical-align: top; }
.k-unit { display: inline-block; will-change: transform; }
.st-key { position: relative; white-space: nowrap; }
.st-atom { position: absolute; z-index: 1; opacity: 0; overflow: visible; }
.st-atom ellipse { stroke: #1f685b; opacity: 0.22; }
.st-atom circle { fill: #ff8b51; }
.st-loop { position: absolute; left: -16%; top: -6%; width: 132%; height: 116%; z-index: 3; overflow: visible; pointer-events: none; opacity: 0; }
.st-loop path { fill: none; stroke: #7050ad; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.st-paint { position: absolute; left: 0; right: 0; bottom: 30px; width: 100%; height: 200px; z-index: 1; pointer-events: none; }
.st-paint path { fill: none; stroke: #ff8b51; stroke-width: 34; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.st-closing { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(560px, calc(100% - 32px)); translate: -50% 0; text-align: center; opacity: 0; }
.st-closing p { margin: 0 0 22px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.45; }
.st-stage { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.st-beaker { position: absolute; z-index: 5; left: 42%; bottom: calc(84px - 6px); width: clamp(150px, 15vw, 230px); translate: -50% 0; opacity: 0; pointer-events: none; }
.st-beaker svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 16px rgba(31, 104, 91, 0.25)); }
.st-fizz { position: absolute; left: 0; right: 0; top: 34%; height: 0; }
.st-fizz i { position: absolute; left: calc(30% + var(--k, 0) * 10%); width: 16px; height: 16px; border-radius: 50%; border: 3px solid #7fd6b8; background: rgba(255, 255, 255, 0.6); opacity: 0; }
.st-fizz i:nth-child(1) { --k: 0; } .st-fizz i:nth-child(2) { --k: 1.4; width: 10px; height: 10px; } .st-fizz i:nth-child(3) { --k: 2.6; } .st-fizz i:nth-child(4) { --k: 3.6; width: 12px; height: 12px; } .st-fizz i:nth-child(5) { --k: 1; width: 9px; height: 9px; }
.airo-story.is-flat .airo-story-pin { height: auto; min-height: 100svh; padding: 90px 0 220px; }
.airo-story.is-flat .st-lines { position: relative; top: 0; display: block; }
.airo-story.is-flat .st-line { display: block; margin-bottom: 0.2em; font-size: clamp(40px, 7vw, 110px); }
.airo-story.is-flat .st-closing { position: relative; left: auto; top: auto; translate: none; opacity: 1; margin: 30px auto 0; }
.airo-story.is-flat .st-atom, .airo-story.is-flat .st-loop, .airo-story.is-flat .st-paint, .airo-story.is-flat .st-beaker { display: none; }
@media (max-width: 699px) {
  .st-eyebrow { top: calc(var(--header) + 14px); right: 16px; }
  .st-lines { top: 26%; }
  .st-line { font-size: clamp(40px, 12.5vw, 60px); }
  .st-closing { top: 43%; } /* clear of Airo's last line, which sits above its head */
  .st-beaker { bottom: 50px; width: 110px; }
  .st-paint { bottom: 10px; }
}

/* page-wide flourishes ------------------------------------------------------- */
.airo-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 70; height: 4px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #3157d5, #7d5cf0 55%, #ff8b51); pointer-events: none; }
.airo-hero .airo-display { white-space: nowrap; }
.hero-key { position: relative; display: inline-block; }
.hero-swash { position: absolute; left: 0; right: 0; bottom: -0.04em; width: 100%; height: 0.2em; overflow: visible; pointer-events: none; }
.hero-swash path { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.hero-motifs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hm { position: absolute; display: block; will-change: transform; }
.hm i { display: block; font-style: normal; line-height: 1; }
.hm-spark i { font-size: var(--s, 30px); color: var(--c, var(--orange)); }
.hm-dot i { width: var(--s, 14px); height: var(--s, 14px); border-radius: 50%; background: var(--c, var(--butter)); }
.hm-ring i { width: var(--s, 26px); height: var(--s, 26px); border-radius: 50%; border: 3px solid var(--c, var(--blue)); }
.hm-squiggle i svg { display: block; width: var(--s, 60px); height: auto; fill: none; stroke: var(--c, var(--ink)); stroke-width: 4; stroke-linecap: round; opacity: 0.55; }

.airo-edge { position: absolute; left: 0; right: 0; top: -119px; z-index: 1; display: block; width: 100%; height: 120px; pointer-events: none; }
.airo-edge path { fill: var(--edge, var(--paper)); }

.airo-ribbon { position: absolute; z-index: 5; left: -3vw; right: -3vw; top: -30px; padding: 16px 0; overflow: hidden; background: var(--ink); color: #fff; transform: rotate(-2.2deg); box-shadow: 0 16px 30px -18px rgba(36, 38, 70, 0.55); pointer-events: none; }
.rb-inner { display: flex; width: max-content; white-space: nowrap; will-change: transform; }
.rb-inner span { font: 300 clamp(24px, 2.8vw, 42px)/1 'DM Sans', sans-serif; letter-spacing: -0.03em; padding-right: 0.5em; }
.rb-inner b { margin: 0 0.45em; color: var(--orange); font-weight: 400; }
.airo-cross { position: relative; z-index: 6; height: 0; }
.airo-cross .airo-ribbon { top: -40px; }
.airo-cross .is-a { transform: rotate(-3deg); }
.airo-cross .is-b { transform: rotate(2.6deg); background: var(--orange); color: var(--ink); }
.airo-cross .is-b b { color: #fff; }

/* section 5: who it's for, as stepping stones ---------------------------------- */
.airo-people {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: clamp(24px, 4.5vw, 72px); align-items: center;
  padding: clamp(120px, 16vh, 170px) clamp(16px, 5.5vw, 80px) clamp(80px, 11vh, 130px);
  background: var(--lavender); overflow-x: clip;
}
.pe-head { grid-column: 1 / -1; position: relative; z-index: 2; margin-bottom: clamp(20px, 4vh, 44px); }
.pe-body { display: contents; }
.pe-stage { grid-column: 1; grid-row: 2; align-self: stretch; position: relative; min-height: 420px; }
.pe-stones { position: absolute; inset: 0; }
.pe-stones::before { content: ''; position: absolute; left: -4%; right: -8%; bottom: 0; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); }
.pe-stone {
  --c: var(--blue); --side: #2440a8;
  position: absolute; display: grid; place-items: center; width: clamp(118px, 10.5vw, 158px); aspect-ratio: 2.5 / 1; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer;
  font: 650 clamp(13px, 1vw, 15px)/1 'DM Sans', sans-serif; letter-spacing: 0.02em;
  box-shadow: 0 9px 0 #c9bcf3, 0 22px 26px -12px rgba(36, 38, 70, 0.4);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, translate 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}
.pe-stone[data-audience='students'] { --c: #f0794f; --side: #b44a28; }
.pe-stone[data-audience='schools'] { --c: #1f8a72; --side: #11594a; }
.pe-stone:hover { translate: 0 -3px; }
.pe-stone[aria-selected='true'] { background: var(--c); color: #fff; box-shadow: 0 9px 0 var(--side), 0 22px 26px -12px rgba(36, 38, 70, 0.45); }
.pe-stone::after { content: ''; position: absolute; inset: -10px -14px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; pointer-events: none; }
.pe-stone[aria-selected='true']::after { animation: pe-ripple 1.6s ease-out infinite; }
@keyframes pe-ripple { 0% { opacity: 0.6; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.35); } }
.pe-stone:nth-child(1) { left: 2%; bottom: 10%; }
.pe-stone:nth-child(2) { left: 36%; bottom: 27%; }
.pe-stone:nth-child(3) { left: 70%; bottom: 44%; }
.pe-panel { grid-column: 2; grid-row: 2; position: relative; z-index: 2; padding: clamp(12px, 1.3vw, 18px); border-radius: 36px; background: #fff; box-shadow: 0 34px 60px -34px rgba(36, 38, 70, 0.5); }
.pe-photo { position: relative; }
.pe-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8.6; object-fit: cover; border-radius: 24px; clip-path: circle(75% at 50% 50%); }
.pe-sticker { position: absolute; right: -16px; top: -22px; display: grid; place-items: center; width: clamp(96px, 8.4vw, 124px); aspect-ratio: 1; padding: 12px; border-radius: 50%; background: var(--butter); color: var(--ink); font: 700 clamp(11px, 0.9vw, 13px)/1.15 'DM Sans', sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; transform: rotate(8deg); box-shadow: 0 12px 22px -12px rgba(36, 38, 70, 0.45); }
.pe-sticker b { position: absolute; right: 12%; top: 6%; color: var(--orange); font: 400 18px/1 'DM Sans', sans-serif; }
.pe-copy { padding: clamp(16px, 2vw, 26px) clamp(6px, 1vw, 14px) 6px; }
.pe-copy .airo-kicker { color: var(--blue); margin-bottom: 10px; }
.pe-title { margin: 0; font-weight: 300; font-size: clamp(32px, 3.3vw, 52px); line-height: 0.96; letter-spacing: -0.045em; }
.pe-desc { margin: 14px 0 20px; max-width: 46ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: rgba(36, 38, 70, 0.82); }

/* section 6: free practice or play ---------------------------------------------- */
.airo-paths { position: relative; padding: clamp(100px, 13vh, 150px) clamp(16px, 5.5vw, 80px) clamp(90px, 12vh, 140px); background: var(--ink); color: #fff; --edge: var(--ink); }
.airo-paths > .airo-kicker, .pa-head .airo-kicker { color: var(--butter); }
.pa-head { position: relative; z-index: 2; max-width: 900px; }
.pa-head .airo-lede { max-width: 44ch; color: rgba(255, 255, 255, 0.78); }
.pa-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 230px) minmax(0, 1fr); margin-top: clamp(34px, 6vh, 64px); }
.pa-tests { grid-column: 1; }
.pa-play { grid-column: 3; }
.pa-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: clamp(430px, 56vh, 520px); padding: clamp(22px, 2.3vw, 34px); border-radius: 34px; color: var(--ink); text-decoration: none; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7); transition: box-shadow 0.3s; }
.pa-card > span { display: block; }
.pa-card p { margin: 0; }
.pa-card .pa-go::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* the whole card opens the main link */
.pa-grades, .pa-note a { position: relative; z-index: 2; }
.pa-grades { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-grades a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(36, 38, 70, 0.18); background: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 600; }
.pa-grades a:hover { background: #fff; }
.pa-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pa-tests { background: var(--butter); }
.pa-play { background: #c5e8d8; }
.pa-card.is-hot { box-shadow: 0 44px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 4px rgba(255, 255, 255, 0.22); }
.pa-art { position: relative; height: clamp(130px, 17vh, 170px); margin-bottom: 8px; }
.pa-card .airo-kicker { margin: 0; font-size: 12px; color: rgba(36, 38, 70, 0.68); }
.pa-title { font-weight: 300; font-size: clamp(32px, 3.1vw, 50px); line-height: 0.95; letter-spacing: -0.045em; }
.pa-text { max-width: 40ch; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; color: rgba(36, 38, 70, 0.8); }
.pa-card .pa-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; min-height: 50px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; transition: gap 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.pa-card.is-hot .pa-go { gap: 14px; }
.pa-note { font-size: 13px; color: rgba(36, 38, 70, 0.62); }
/* a test paper: answers fill in on hover */
.pa-paper { position: absolute; left: 4px; top: 0; width: clamp(150px, 13vw, 190px); height: 100%; padding: 20px 18px; border-radius: 14px; background: #fff; transform: rotate(-5deg); box-shadow: 0 14px 24px -14px rgba(36, 38, 70, 0.45); transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.pa-paper i { display: block; height: 8px; margin-bottom: 12px; border-radius: 4px; background: rgba(36, 38, 70, 0.14); }
.pa-paper i:nth-child(1) { width: 70%; background: rgba(36, 38, 70, 0.6); } .pa-paper i:nth-child(2) { width: 92%; } .pa-paper i:nth-child(3) { width: 58%; }
.pa-paper b { position: absolute; bottom: 22px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(36, 38, 70, 0.3); transition: background 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.3, 1.8, 0.5, 1); }
.pa-paper b:nth-of-type(1) { left: 18px; } .pa-paper b:nth-of-type(2) { left: 52px; } .pa-paper b:nth-of-type(3) { left: 86px; }
.pa-tests.is-hot .pa-paper { transform: rotate(0deg) translateY(-6px); }
.pa-tests.is-hot .pa-paper b:nth-of-type(2) { background: #1f8a72 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: #1f8a72; transform: scale(1.18); transition-delay: 0.15s; }
.pa-tests.is-hot .pa-paper b:nth-of-type(1), .pa-tests.is-hot .pa-paper b:nth-of-type(3) { transform: scale(0.88); }
/* a circuit: current flows and the bulb lights on hover */
.pa-circuit { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: 100%; overflow: visible; }
.pa-circuit .pa-wire { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10 12; }
.pa-circuit rect, .pa-circuit path:not(.pa-wire) { fill: var(--ink); }
.pa-bulb { fill: #fff; stroke: var(--ink); stroke-width: 5; transition: fill 0.3s, filter 0.3s; }
.pa-play.is-hot .pa-bulb { fill: #ffd34d; filter: drop-shadow(0 0 16px rgba(255, 211, 77, 0.95)); }
.pa-play.is-hot .pa-wire { animation: pa-flow 0.5s linear infinite; stroke: #1f685b; }
@keyframes pa-flow { to { stroke-dashoffset: -22; } }
.pa-stage .airo-bubble { color: var(--ink); }

/* section 7: the founder ------------------------------------------------------------ */
.airo-founder { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 6vw, 100px); padding: clamp(100px, 14vh, 160px) clamp(16px, 5.5vw, 80px); background: var(--paper); overflow-x: clip; }
.fo-photo { position: relative; justify-self: center; width: min(100%, 470px); }
.fo-photo::before { content: ''; position: absolute; inset: 7% -5% -4% 7%; border-radius: 44px; background: var(--lavender); transform: rotate(4deg); }
.fo-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 720 / 771; object-fit: cover; border-radius: 40px; background: #fff; box-shadow: 0 30px 50px -30px rgba(36, 38, 70, 0.45); }
.fo-stamp { position: absolute; z-index: 4; right: -34px; top: -30px; display: grid; place-items: center; width: clamp(104px, 9vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 14px 24px -14px rgba(36, 38, 70, 0.5); }
.fo-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fo-stamp text { font: 700 12.6px/1 'DM Sans', sans-serif; letter-spacing: 0.16em; fill: #fff; }
.fo-stamp b { font-size: 30px; line-height: 1; }
.fo-peek { position: absolute; left: -40%; right: -40%; top: 8%; bottom: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.fo-copy .airo-kicker { color: var(--blue); }
.fo-text { margin: 26px 0 0; max-width: 46ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.fo-quote { margin: 22px 0 0; max-width: 26ch; font: 400 clamp(22px, 2vw, 30px)/1.25 'DM Sans', sans-serif; letter-spacing: -0.02em; color: var(--blue); }
.fo-name { margin: 22px 0 26px; font-size: 15px; color: rgba(36, 38, 70, 0.68); }
.fo-name b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 17px; }
/* the co-founders: two living toy figures on a little stage (art and motion come from the module) */
.fo-team { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(24px, 4vw, 72px); margin-top: clamp(40px, 7vh, 88px); }
.fo-team-copy .airo-kicker { color: var(--blue); }
.fo-team-title { margin: 0; font-weight: 300; font-size: clamp(36px, 4vw, 60px); line-height: 0.96; letter-spacing: -0.045em; }
.fo-team-hint { margin: 18px 0 0; font-size: 15px; color: rgba(36, 38, 70, 0.68); }
.fo-team-stage { position: relative; height: clamp(320px, 32vw, 450px); }
.fo-team-floor { position: absolute; left: 4%; right: 4%; bottom: 10%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(215, 202, 250, 0.95), rgba(215, 202, 250, 0)); }
.fo-mate { position: absolute; bottom: 20%; height: 72%; aspect-ratio: 9 / 10; margin: 0; translate: -50% 0; }
.fo-mate[data-mate="prashant"] { left: 33%; }
.fo-mate[data-mate="sparsh"] { left: 69%; }
.fo-mate-body, .fo-mate-lean, .fo-mate-hop, .fo-mate-breath { position: absolute; inset: 0; }
.fo-mate-breath img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.fo-mate-breath img.is-on { opacity: 1; }
.fo-mate-breath .fo-blink { width: auto; height: auto; }
.fo-mate-shadow { position: absolute; left: 22%; right: 22%; bottom: -2.5%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 38, 70, 0.3), rgba(36, 38, 70, 0)); }
.fo-mate-hit { position: absolute; z-index: 3; left: 24%; right: 24%; top: 3%; bottom: 0; padding: 0; border: 0; border-radius: 45% 45% 18% 18%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fo-mate-hit:focus-visible { outline: 3px solid #2455e6; outline-offset: 4px; }
.fo-mate figcaption { position: absolute; left: 50%; top: 100%; translate: -50% 14px; text-align: center; white-space: nowrap; font-size: 14px; color: rgba(36, 38, 70, 0.68); }
.fo-mate figcaption b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 17px; }
.fo-glyph { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; font: 700 18px/1 'DM Sans', sans-serif; white-space: nowrap; text-shadow: 0 2px 0 #fff; }
.airo-root:not(.airo-js) .fo-team-stage { height: auto; display: flex; flex-wrap: wrap; gap: 28px 48px; }
.airo-root:not(.airo-js) .fo-mate { position: static; height: auto; aspect-ratio: auto; translate: none; }
.airo-root:not(.airo-js) .fo-mate figcaption { position: static; translate: none; text-align: left; }
.airo-root:not(.airo-js) :is(.fo-mate-hit, .fo-team-floor, .fo-team-hint) { display: none; }

/* section 8: the journal ------------------------------------------------------------ */
.airo-journal { position: relative; padding: clamp(100px, 13vh, 150px) clamp(16px, 5.5vw, 80px) clamp(90px, 12vh, 140px); background: #f9cdb6; --edge: #f9cdb6; }
.jo-head { position: relative; z-index: 2; }
.jo-head .airo-kicker { color: #a7402d; }
.jo-stage { position: relative; padding-top: clamp(150px, 21vh, 200px); }
.jo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; }
.jo-card:nth-child(2) { margin-top: 64px; }
.jo-card:nth-child(3) { margin-top: 24px; }
.jo-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 24px; border-radius: 28px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 24px 40px -26px rgba(36, 38, 70, 0.5); transition: box-shadow 0.35s; }
.jo-card:hover, .jo-card:focus-visible { box-shadow: 0 36px 50px -26px rgba(36, 38, 70, 0.6); }
.jo-card > span { display: block; }
.jo-img { overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 10; }
.jo-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.jo-card:hover .jo-img img, .jo-card:focus-visible .jo-img img { transform: scale(1.07); }
.jo-card .airo-kicker { margin: 8px 6px 0; font-size: 11.5px; color: #a7402d; }
.jo-title { margin: 0 6px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; }
.jo-text { margin: 0 6px; font-size: 15px; line-height: 1.45; color: rgba(36, 38, 70, 0.72); }
.jo-more { background: var(--ink); color: #fff; }
.jo-more .jo-text { color: rgba(255, 255, 255, 0.75); }
.jo-more .airo-kicker { color: var(--butter); }
.jo-card > .jo-more-art { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: var(--lavender); }
.jo-more-art::before, .jo-more-art::after { content: ''; position: absolute; width: 34%; aspect-ratio: 3 / 4; border-radius: 10px; background: #fff; box-shadow: 0 12px 22px -12px rgba(36, 38, 70, 0.45); transition: transform 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
.jo-more-art::before { transform: rotate(-10deg) translateX(-22%); }
.jo-more-art::after { transform: rotate(9deg) translateX(22%); background: #fffbe8; }
.jo-card:hover .jo-more-art::before, .jo-card:focus-visible .jo-more-art::before { transform: rotate(-17deg) translateX(-46%); }
.jo-card:hover .jo-more-art::after, .jo-card:focus-visible .jo-more-art::after { transform: rotate(15deg) translateX(46%); }
.jo-more-art b { position: relative; z-index: 1; color: var(--blue); font: 400 56px/1 'DM Sans', sans-serif; animation: jo-spin 14s linear infinite; }
@keyframes jo-spin { to { transform: rotate(360deg); } }

/* section 9: questions ------------------------------------------------------------------ */
.airo-faq { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); padding: clamp(100px, 13vh, 150px) clamp(16px, 5.5vw, 80px) clamp(130px, 17vh, 180px); background: var(--paper); }
.fq-side { position: relative; display: flex; flex-direction: column; }
.fq-side .airo-kicker { color: var(--blue); }
.fq-stage { position: relative; flex: 1; min-height: clamp(240px, 32vh, 320px); margin-top: 20px; }
.fq-list { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.fq-item { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(36, 38, 70, 0.06), 0 18px 30px -24px rgba(36, 38, 70, 0.35); transition: background 0.25s; }
.fq-item[open] { background: #f3eefe; }
.fq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; cursor: pointer; list-style: none; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary i { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.25s; }
.fq-item summary i::before, .fq-item summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.4px; margin: -1.2px 0 0 -7px; border-radius: 2px; background: #fff; }
.fq-item summary i::after { transform: rotate(90deg); }
.fq-item[open] summary i { transform: rotate(135deg); background: var(--blue); }
.fq-item summary:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; border-radius: 22px; }
.fq-answer { overflow: hidden; }
.fq-answer p { margin: 0; max-width: 60ch; padding: 0 24px 22px; font-size: 16px; line-height: 1.55; color: rgba(36, 38, 70, 0.8); }
.fq-cta { align-self: flex-start; margin-top: 14px; }

/* section 10: the finale ---------------------------------------------------------------- */
.airo-finale { position: relative; min-height: max(780px, 100svh); padding: clamp(150px, 20vh, 210px) clamp(16px, 5.5vw, 80px) 170px; background: var(--butter); overflow-x: clip; }
.airo-finale > .airo-kicker { position: relative; z-index: 2; color: #a7402d; }
.fi-title { position: relative; z-index: 2; margin: 0; font-weight: 300; font-size: clamp(64px, 11.2vw, 184px); line-height: 0.86; letter-spacing: -0.062em; }
.fi-click { position: relative; display: inline-block; color: var(--blue); font-weight: 400; }
.fi-click::after { content: ''; position: absolute; left: 3%; right: 6%; bottom: -0.03em; height: 0.09em; border-radius: 999px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s; }
.fi-click.is-on::after { transform: scaleX(1); }
.fi-cta { position: relative; z-index: 3; margin-top: clamp(30px, 4.5vh, 48px); min-height: 60px; padding: 0 30px; font-size: 17px; }
.fi-note { position: relative; z-index: 2; margin: 20px 0 0; font: 500 17px/1.3 'DM Sans', sans-serif; color: rgba(36, 38, 70, 0.72); }
.fi-collect { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fi-item { position: absolute; width: clamp(64px, 6.2vw, 96px); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; filter: drop-shadow(0 10px 12px rgba(36, 38, 70, 0.22)); -webkit-tap-highlight-color: transparent; }
.fi-item img { display: block; width: 100%; height: auto; pointer-events: none; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.fi-item:hover img, .fi-item:focus-visible img { transform: scale(1.12) rotate(-6deg); }
.fi-item[data-item='star'] { right: 31%; top: 22%; }
.fi-item[data-item='plane'] { right: 8%; top: 30%; width: clamp(80px, 7.6vw, 118px); }
.fi-item[data-item='globe'] { right: 19%; top: 47%; }
.fi-item.is-taken { visibility: hidden; }
.fi-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: #fff3c4; border-top: 2px solid rgba(36, 38, 70, 0.08); }
.fi-friends { position: absolute; z-index: 2; left: 36%; bottom: 74px; display: flex; gap: 10px; pointer-events: none; }
.fi-friends .demo-token { position: relative; --token: clamp(38px, 3.8vw, 54px); }
.en-moon { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 8px rgba(36, 38, 70, 0.22)); }
.en-moon.is-front { z-index: 6; }
.en-stage.is-flying .airo-shadow { visibility: hidden; }

/* footer: the site's shared footer, dressed for Airo's goodbye on the home page */
.home-page .site-footer { position: relative; overflow: visible; overflow-x: clip; padding: clamp(84px, 11vh, 120px) clamp(16px, 5.5vw, 80px) 28px; background: #242646; color: #f4f1ff; }
.home-page .site-footer .footer-top { position: relative; z-index: 2; }
.home-page .site-footer .brand { color: #fff; }
.home-page .site-footer .brand img { width: 96px; height: 96px; padding: 10px; border-radius: 26px; background: #fff; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6); }
.home-page .footer-column h3 { color: rgba(255, 255, 255, 0.55); }
.home-page .footer-column a, .home-page .footer-bottom a { color: #fff; }
.home-page .motion-toggle { border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.home-page .motion-toggle[aria-pressed='true'] { background: #fff; color: #242646; }
.home-page .site-footer :focus-visible { outline-color: #ffe59a; }
.home-page .footer-wordmark { position: relative; z-index: 1; margin-top: clamp(48px, 8vh, 90px); text-align: left; font-weight: 700; font-size: clamp(40px, 10.4vw, 200px); line-height: 0.82; letter-spacing: -0.065em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.28); }
.home-page .footer-wordmark .k-word { padding: 0 0.08em 0.08em 0; margin-right: -0.08em; }
.home-page .footer-wordmark .k-unit { -webkit-text-stroke-color: rgba(255, 255, 255, var(--sa, 0.28)); }
.home-page .footer-bottom { position: relative; z-index: 2; border-top-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.65); }
.en-stage { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 8; pointer-events: none; }

@media (max-width: 699px) {
  .airo-ribbon { padding: 12px 0; }
  .airo-people { grid-template-columns: minmax(0, 1fr); padding-top: 120px; }
  .pe-head, .pe-stage, .pe-panel { grid-column: 1; grid-row: auto; }
  .pe-head { margin-bottom: 0; }
  .pe-stage { min-height: 300px; margin-bottom: 24px; }
  .pe-stone { width: 30%; }
  .pe-stone:nth-child(1) { left: 0; bottom: 8%; } .pe-stone:nth-child(2) { left: 35%; bottom: 19%; } .pe-stone:nth-child(3) { left: 70%; bottom: 30%; }
  .pe-panel { border-radius: 28px; }
  .pe-sticker { right: -6px; top: -16px; }
  .pa-stage { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-top: 150px; margin-top: 10px; }
  .pa-tests, .pa-play { grid-column: 1; }
  .pa-card { min-height: 0; border-radius: 28px; }
  .pa-art { height: 118px; }
  .airo-founder { grid-template-columns: minmax(0, 1fr); }
  .fo-photo { width: min(80%, 330px); }
  .fo-stamp { right: -18px; top: -22px; }
  .fo-team { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fo-team-stage { height: clamp(300px, 86vw, 370px); }
  .fo-mate { height: 63%; bottom: 22%; }
  .fo-mate[data-mate="prashant"] { left: 30%; }
  .fo-mate[data-mate="sparsh"] { left: 72%; }
  .fo-mate figcaption { width: 9.5em; white-space: normal; font-size: 13px; line-height: 1.3; }
  .fo-mate figcaption b { font-size: 16px; }
  .jo-stage { padding-top: 150px; }
  .jo-cards { grid-template-columns: minmax(0, 1fr); row-gap: 150px; }
  .jo-card:nth-child(n) { margin-top: 0; }
  .airo-faq { grid-template-columns: minmax(0, 1fr); }
  .fq-stage { min-height: 180px; }
  .fq-item summary { padding: 18px 18px; font-size: 16.5px; }
  .fq-answer p { padding: 0 18px 18px; font-size: 15px; }
  .airo-finale { padding-top: 150px; min-height: 860px; }
  .fi-title { font-size: clamp(56px, 16.4vw, 76px); }
  .fi-item { width: 58px; }
  .fi-item[data-item='star'] { left: 7%; right: auto; top: auto; bottom: 250px; }
  .fi-item[data-item='plane'] { left: 28%; right: auto; top: auto; bottom: 290px; width: 74px; }
  .fi-item[data-item='globe'] { left: 52%; right: auto; top: auto; bottom: 236px; }
  .fi-friends { left: 16px; bottom: 76px; gap: 7px; }
  .fi-friends .demo-token { --token: 34px; }
}

/* reduced motion: everything in place, nothing moves on its own */
.airo-root.is-reduced .airo-ring { animation: none; }
.airo-root.is-reduced .airo-bubble { transition: none; }
.airo-root.is-reduced .hero-swash path { stroke-dashoffset: 0; }
.airo-root.is-reduced .pe-stone::after, .airo-root.is-reduced .pa-wire, .airo-root.is-reduced .jo-more-art b { animation: none !important; }
.airo-root.is-reduced .fi-click::after { transform: scaleX(1); transition: none; }

@media (max-width: 600px) {
  .sound-toggle { padding: 12px 14px; }
  .sound-toggle [data-airo-sound-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .airo-hero-copy { padding-top: 96px; }
  .airo-display { font-size: clamp(52px, 15vw, 72px); }
  .airo-lede { font-size: 17px; margin-top: 18px; }
  .airo-actions { margin-top: 22px; }
  .airo-btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
  .airo-bubble { font-size: 15px; padding: 10px 14px; }
}

/* the hero playground: draw Airo a slide, grab and throw it, tap to send it ------------------ */
.airo-hero.can-draw { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='12' y='2' width='8' height='20' rx='1.5' fill='%233157d5' stroke='%23242646' stroke-width='1.5'/%3E%3Crect x='12' y='0.5' width='8' height='4' rx='1.5' fill='%23d7cafa' stroke='%23242646' stroke-width='1.5'/%3E%3Cpath d='M12 22h8l-4 8z' fill='%23f2c79a' stroke='%23242646' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14.6 27.2h2.8L16 30z' fill='%23242646'/%3E%3C/g%3E%3C/svg%3E") 5 27, crosshair; }
.airo-hero.can-draw :is(a, button) { cursor: pointer; }
.airo-hero.can-draw :is(h1, p) { cursor: default; }
.airo-hero .airo-hit { cursor: grab; touch-action: none; }
.airo-hero.is-grabbing, .airo-hero.is-grabbing * { cursor: grabbing !important; }
.airo-hero.is-drawing { -webkit-user-select: none; user-select: none; }
.airo-slide { fill: none; stroke: #34364c; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.7)); }
.airo-slide.is-hint { stroke: var(--blue); stroke-width: 4; opacity: 0.6; }
.airo-slide-ink { fill: none; stroke: var(--orange); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(255, 139, 81, 0.65)); }
#hero-title.is-live .k-word { overflow: visible; } /* risen letters may now wobble out of their masks */
#hero-title.is-live .k-unit { cursor: pointer; }
.airo-zzz { position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; font: 700 30px/1 'DM Sans', sans-serif; color: var(--blue); text-shadow: 0 2px 0 #fff; }
.airo-ping { position: absolute; left: 0; top: 0; z-index: 2; border: 3px solid var(--blue); border-radius: 50%; pointer-events: none; }

/* the dance party, a secret (type "airo"): light beams from a disco ball ------------------------ */
.airo-disco { position: fixed; inset: 0; z-index: 65; overflow: hidden; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.airo-disco b { position: absolute; left: 50%; top: 40px; width: 220vmax; height: 220vmax; margin-left: -110vmax; transform-origin: 50% 0; background: conic-gradient(from 160deg at 50% 0, transparent 0 4%, rgba(255, 139, 81, 0.32) 5% 7%, transparent 8% 13%, rgba(49, 87, 213, 0.32) 14% 16%, transparent 17% 22%, rgba(112, 80, 173, 0.32) 23% 25%, transparent 26% 31%, rgba(31, 138, 114, 0.32) 32% 34%, transparent 35%); animation: airo-disco-sweep 2.4s ease-in-out infinite alternate; }
.airo-disco b:nth-child(2) { animation-duration: 3.1s; animation-direction: alternate-reverse; opacity: 0.8; }
.airo-disco b:nth-child(3) { animation-duration: 1.9s; opacity: 0.6; }
.airo-disco .disco-ball { position: absolute; left: 50%; top: -80px; width: 64px; height: 64px; margin-left: -32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 8%, transparent 9%), repeating-conic-gradient(#f4f1ff 0 15deg, #b8bfe0 15deg 30deg); box-shadow: 0 0 28px rgba(255, 255, 255, 0.9); animation: airo-disco-drop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) forwards, airo-disco-spin 0.9s linear infinite; }
@keyframes airo-disco-sweep { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes airo-disco-drop { to { top: 72px; } }
@keyframes airo-disco-spin { to { rotate: 360deg; } }

/* ---- Motion plan M5: the supporting pages ------------------------------------------------------
   Fixes first (audit A-027, A-028): finger-sized links and readable small type on phones. Then the
   motion, all under body:not(.motion-paused) (the device or the footer's Motion switch turns it off). */
@media (pointer: coarse), (max-width: 600px) {
  .inner-page :is(.back-link, .site-header .brand, .site-footer .brand, .footer-bottom a) { position: relative; }
  .inner-page :is(.back-link, .footer-bottom a)::after { content: ''; position: absolute; inset: -14px -6px; }
  .inner-page :is(.site-header .brand, .site-footer .brand)::after { content: ''; position: absolute; inset: -4px; }
  .inner-page .footer-column { gap: 0; }
  .inner-page .footer-column a, .inner-page .inline-link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 600px) {
  .inner-page .eyebrow, .inner-page .footer-column h3, .inner-page .footer-bottom, .inner-page .portrait-caption { font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  html:has(body.inner-page:not(.motion-paused)) { scroll-behavior: smooth; }
}

/* Arrivals below the fold. */
body:not(.motion-paused) [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
body:not(.motion-paused) [data-reveal].is-in { opacity: 1; transform: none; }

/* The journal: the article's picture, the reading pencil, and what to read next. */
.article-art { max-width: 1100px; margin: -20px auto 60px; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 7; background: #dfd6f2; }
.article-art img { width: 100%; height: 100%; object-fit: cover; }
body:not(.motion-paused) .article-art img { animation: m5-settle 1.4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes m5-settle { from { transform: scale(1.07); } }
.read-progress { position: fixed; z-index: 40; left: max(18px, calc(50% - 480px)); top: 160px; bottom: 120px; width: 3px; border-radius: 3px; background: var(--line); pointer-events: none; opacity: 0; transition: opacity .3s; }
.read-progress.is-reading { opacity: 1; }
.read-progress-fill { position: absolute; inset: 0; border-radius: inherit; background: #ad8dd3; transform-origin: top; transform: scaleY(var(--p, 0)); }
.read-progress-pencil { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 30px; height: 30px; transform: translate(-50%, -88%) rotate(-45deg); }
.read-progress-pencil path { fill: #fef7e6; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 1099px) {
  .read-progress { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 4px; border-radius: 0; z-index: 60; }
  .read-progress-fill { transform-origin: left; transform: scaleX(var(--p, 0)); }
  .read-progress-pencil { left: calc(var(--p, 0) * 100%); top: 0; width: 22px; height: 22px; transform: translate(-30%, -12%) rotate(-135deg); }
}
.read-next { max-width: 800px; margin: 80px auto 0; display: flex; gap: 22px; align-items: center; padding: 24px 28px; border-radius: 18px; background: #f4e7d4; }
.read-next-airo { width: 110px; height: auto; flex: none; }
.read-next-link { display: inline-block; margin: 8px 0 10px; border-bottom: 1px solid; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -.04em; }
.read-next p:last-child { font-size: 16px; }
body:not(.motion-paused) .read-next:is(:hover, :focus-within) .read-next-airo { animation: m5-bob .9s ease-in-out infinite; }
@keyframes m5-bob { 50% { transform: translateY(-7px) rotate(-3deg); } }
@media (max-width: 600px) { .read-next { flex-direction: column; align-items: start; padding: 22px; } .read-next-airo { width: 88px; } }

/* Pricing: Airo perches on the plan in view and hops between them. */
.pricing-grid { position: relative; }
.price-airo { position: absolute; left: 0; top: 0; z-index: 2; width: 110px; height: auto; pointer-events: none; opacity: 0; }
.price-airo.is-placed { opacity: 1; }
@media (max-width: 600px) { .price-airo { width: 88px; } }

/* Integrations: AIR's capabilities in orbit, their connections drawing in. */
.orbit { margin: 0 auto 50px; max-width: 620px; }
.orbit svg { width: 100%; height: auto; overflow: visible; }
.orbit-ring { fill: none; stroke: var(--line); stroke-dasharray: 3 9; }
.orbit-line { fill: none; stroke: #ad8dd3; stroke-width: 2.5; stroke-linecap: round; }
.orbit-core { fill: #dfd6f2; }
.orbit-node circle { fill: #f4e7d4; stroke: var(--ink); stroke-width: 1.5; }
.orbit-node path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.orbit-node text { fill: var(--ink); font-size: 17px; font-weight: 600; }
body:not(.motion-paused) .orbit[data-draw] .orbit-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.4, 0, .2, 1); }
body:not(.motion-paused) .orbit[data-draw] .orbit-line:nth-of-type(2) { transition-delay: .18s; }
body:not(.motion-paused) .orbit[data-draw] .orbit-line:nth-of-type(3) { transition-delay: .36s; }
body:not(.motion-paused) .orbit.is-in .orbit-line { stroke-dashoffset: 0; }
body:not(.motion-paused) .orbit.is-in .orbit-node { animation: m5-float 5s ease-in-out calc(var(--i) * -1.6s) infinite; }
@keyframes m5-float { 50% { transform: translateY(-7px); } }

/* Our story: Airo waves beside the way to the founder. */
.story-split .about-airo { display: inline-block; width: 92px; border-radius: 0; height: auto; margin: 0 0 -10px 16px; vertical-align: bottom; transform-origin: 50% 90%; }
body:not(.motion-paused) .about-airo { animation: m5-wave 3.2s ease-in-out 1s infinite; }
@keyframes m5-wave { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-6deg); } 86% { transform: rotate(5deg); } 93% { transform: rotate(-3deg); } }

/* Policies: a table of contents that marks the section in view (wide screens, where it stays put). */
.policy-toc { display: flex; flex-direction: column; gap: 9px; margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
.policy-toc .eyebrow { margin-bottom: 3px; }
.policy-toc a { position: relative; padding-left: 14px; color: #5f5b6b; text-decoration: none !important; font-weight: 450 !important; transition: color .2s; }
.policy-toc a::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.policy-toc a.is-current { color: var(--ink); font-weight: 650 !important; }
.policy-toc a.is-current::before { background: #796096; transform: scale(1.3); }
@media (max-width: 900px) { .policy-toc { display: none; } }

/* Contact: a paper plane lands beside the thank-you. */
.paper-plane { display: inline-block; width: 26px; height: 26px; margin-left: 10px; vertical-align: -6px; }
.paper-plane path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
body:not(.motion-paused) .paper-plane { animation: m5-plane 1.5s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes m5-plane { 0% { transform: translate(-60px, 40px) rotate(-14deg); opacity: 0; } 35% { opacity: 1; } 72% { transform: translate(10px, -8px) rotate(5deg); } 100% { transform: none; } }