/* NotiTrac website. Big type, one ember accent, one pinned film, the real Air and real app captures. */
:root{
  --paper:#fcfbf9;--ink:#141213;--night:#121011;--muted:#6f6964;--faint:#14121329;--line:#1412131f;--ember:#f2461f;--flame:#fa642b;
  --pad:4vw;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;--glide:cubic-bezier(.2,.75,.1,1);--spring:cubic-bezier(.3,1.4,.5,1);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",sans-serif;
  color:var(--ink);background:var(--paper);font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
body{margin:0;overflow-x:clip;background:var(--paper)}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:500;letter-spacing:-.05em}
p{line-height:1.5}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;border:0;background:none;padding:0}
button,a,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
::selection{background:var(--ember);color:#fff}
.skip{position:fixed;left:20px;top:-100px;z-index:100;background:var(--ink);color:#fff;padding:14px 22px;border-radius:99px}.skip:focus{top:15px}

/* Line reveals: each line rises out of its own mask. */
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:block;transform:none;transition:transform 1.15s var(--glide) calc(var(--i,0)*85ms)}
.reveal-ready:not(.is-in) .line>span{transform:translate3d(0,108%,0)}
.is-in .line>span{transform:none}

/* Text that rolls to a second copy on hover. */
.roll{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25}
.roll>span{display:inline-block;position:relative;transition:transform .55s var(--glide)}
.roll>span:after{content:attr(data-text);position:absolute;left:0;top:100%}
a.roll:hover>span,:is(a,button):hover>.roll>span{transform:translateY(-100%)}

.button{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;background:var(--ink);color:var(--paper);border-radius:999px;padding:16px 26px;font-size:15px;font-weight:500;transition:color .4s}
.button:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--ember);transform:translate3d(0,102%,0);transition:transform .6s var(--glide)}
.button:hover:before{transform:none}
.button.outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--faint)}
.button.outline:hover,.button.light:hover{color:#fff}
.button.light{background:#f4efe8;color:var(--ink)}
.button.large{padding:22px 34px;font-size:17px}

/* Header */
.header{position:fixed;inset:0 0 auto;height:72px;display:flex;align-items:center;gap:24px;padding:0 28px;z-index:30;color:var(--ink);transition:transform .6s var(--glide),color .35s}
.header:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);border-bottom:1px solid var(--line);opacity:0;transition:opacity .35s,background .35s}
.header.is-solid:before{opacity:1}
.header.is-hidden{transform:translate3d(0,-100%,0)}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:22px;font-weight:650;letter-spacing:-1px}
.brand img{width:18px;height:23px;filter:brightness(0);transition:transform .9s var(--spring),filter .3s}
.brand:hover img{transform:rotate(360deg)}
.navigation{display:flex;gap:2px;margin-left:auto;border-radius:8px;padding:3px;background:#fcfbf9b8;border:1px solid #1b191b12;transition:background .3s,border-color .3s}
.navigation a{position:relative;padding:9px 13px;font-size:10px;letter-spacing:.04em;border-radius:5px;transition:background .2s}
.navigation a:hover{background:#1b191b0a}
.navigation a:after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--glide)}
.navigation a:hover:after{transform:scaleX(1)}
.nav-download{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;background:var(--flame);color:#fff8ed;border:1px solid #df4f1e;min-height:36px;border-radius:4px;padding:9px 15px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;transition:background .2s}
.nav-download:hover{background:#ff6f37}
.arrow{display:inline-block;transition:transform .4s var(--spring)}
:is(button,a):hover>.arrow{transform:rotate(45deg)}
.header.on-dark,.header.over-dark{color:#f4efe8}
.header.on-dark .brand img,.header.over-dark .brand img{filter:none}
.header.on-dark .navigation,.header.over-dark .navigation{background:#151214b0;border-color:#ffffff1c}
.header.on-dark .navigation a:hover,.header.over-dark .navigation a:hover{background:#ffffff14}
.header.over-dark:before{background:var(--night);border-color:#ffffff12}

/* The film */
.film{height:820svh;position:relative;background:var(--paper)}
.film-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:clip;isolation:isolate}
#terrain{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.film-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
.film-fallback{position:absolute;inset:0;z-index:0;background:color-mix(in srgb,#050405 calc(var(--rise,0)*100% - var(--exit,0)*100%),var(--paper))}
.has-webgl .film-fallback{display:none}
.act{position:absolute;inset:0;z-index:1;will-change:opacity,transform}
.act-open,.act-outro{pointer-events:none}
.act-open a{pointer-events:auto}

.act-open{text-align:center;color:var(--ink)}
.chapter-dots{position:absolute;top:31px;left:50%;transform:translateX(-50%);display:flex;gap:7px}
.chapter-dots i{width:7px;height:7px;border:1px solid #ccc7c1;animation:dot-cycle 3.6s infinite}
.chapter-dots i:nth-child(2){animation-delay:1.2s}.chapter-dots i:nth-child(3){animation-delay:2.4s}
.framed-title{position:absolute;left:50%;top:26px;transform:translateX(-50%);width:36%;max-width:560px;height:48vh;min-height:260px;padding:0 15px;display:flex;align-items:center;flex-direction:column;justify-content:center}
.framed-title h1{font-size:clamp(33px,3.5vw,55px);line-height:.99;max-width:510px;margin-top:30px;letter-spacing:-.055em}
.framed-title>p{font-size:14px;line-height:1.35;color:#7c7470;margin-top:23px}
.corner{position:absolute;width:12px;height:12px;border:0 solid #938b82;opacity:.7;animation:corner-breathe 4.5s ease-in-out infinite}
.corner.tl{top:0;left:0;border-width:1px 0 0 1px;--cx:-5px;--cy:-5px}.corner.tr{top:0;right:0;border-width:1px 1px 0 0;--cx:5px;--cy:-5px}
.corner.bl{bottom:0;left:0;border-width:0 0 1px 1px;--cx:-5px;--cy:5px}.corner.br{bottom:0;right:0;border-width:0 1px 1px 0;--cx:5px;--cy:5px}
.opening-rule{position:absolute;top:27.5vh;height:1px;width:30%;background:#d8d4cf;overflow:hidden}
.opening-rule:after{content:"";position:absolute;top:0;width:40%;height:1px;background:linear-gradient(90deg,transparent,#f2461f,transparent);animation:rule-run 4.6s ease-in-out infinite}
.opening-rule.left{left:0}.opening-rule.right{right:0}.opening-rule.right:after{animation-direction:reverse}
.opening-caption{position:absolute;top:48vh;left:0;right:0;font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:#aa8d6c;display:flex;align-items:center;justify-content:center;gap:13px}
.tiny-wave{display:inline-block;font-size:22px;color:#c67335;animation:wave-buzz 4.6s 1.4s infinite}
.scroll-invitation{position:absolute;bottom:20px;left:28px;right:28px;display:flex;justify-content:space-between;padding-top:11px;border-top:1px dashed #ffffff40;color:#efe1d3;font-family:var(--mono);font-size:9px;letter-spacing:.08em}
.scroll-arrow{font-size:14px;animation:bob 2.4s ease-in-out infinite}

.act-signal{color:#f4efe8;opacity:0}
.act-signal[inert]{pointer-events:none}
.signal-copy{position:absolute;left:var(--pad);bottom:9vh;width:min(34vw,520px);height:clamp(220px,30vh,300px)}
.signal-intro,.chapter{position:absolute;inset:auto 0 0;opacity:0;translate:0 26px;transition:opacity .3s,translate .45s var(--glide);pointer-events:none}
.signal-intro.is-current,.chapter.is-current{opacity:1;translate:0 0;transition:opacity .55s .22s,translate .9s var(--glide) .22s}
.chapter.is-past,.signal-intro:not(.is-current){translate:0 -18px}
.signal-copy h2{font-size:clamp(34px,3.4vw,58px);line-height:1;letter-spacing:-.05em}
.signal-copy h2 span{color:#8f8781}
.signal-copy p{font-size:16px;color:#a39b95;max-width:420px;margin-top:20px}
.banner{position:absolute;right:var(--pad);top:max(96px,17vh);width:min(330px,34vw);padding:14px 16px 15px;border-radius:20px;background:#1d1b1c;border:1px solid #ffffff12;opacity:0;transform:translate3d(0,-12px,0) scale(.97);transform-origin:top right;transition:opacity .3s,transform .6s var(--spring);pointer-events:none}
.banner.show{opacity:1;transform:none}
.banner p{display:flex;justify-content:space-between;font-size:12px;color:#8f8781;margin-bottom:6px}
.banner p b{font-weight:500;color:#c9c0b9}
.banner strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.banner span{display:block;font-size:14px;color:#cfc7c0;line-height:1.35;margin-top:2px}
.pod-hit{position:absolute;left:calc(var(--pod-x) - var(--pod-w)/2);top:calc(var(--pod-y) - var(--pod-h)/2);width:var(--pod-w);height:var(--pod-h);border-radius:999px;cursor:pointer}
.signal-progress{position:absolute;right:var(--pad);bottom:9vh;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.signal-bars{display:flex;gap:6px;background:linear-gradient(90deg,#ffffff24 0 30px,transparent 30px 36px) 0 0/36px 2px repeat-x}
.signal-bars i{width:30px;height:2px;background:#f4efe8;transform:scaleX(0);transform-origin:left}

.act-outro{opacity:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:20vh;color:var(--ink)}
.act-outro h2{font-size:clamp(44px,5.6vw,100px);line-height:.92;letter-spacing:-.058em}
.act-outro p{font-size:17px;color:var(--muted);max-width:440px;margin-top:26px}

/* Statement, with the buzz pattern of each alert drawn inline */
.statement{padding:24vh var(--pad) 20vh}
.statement-text{font-size:clamp(30px,4.3vw,78px);line-height:1.08;letter-spacing:-.048em;font-weight:500;text-indent:14vw;max-width:1560px}
.word{display:inline-block;text-indent:0;opacity:.14;translate:0 .14em;transition:opacity .45s,translate .7s var(--glide)}
.word.on{opacity:1;translate:0 0}
.glyph{display:inline-block;text-indent:0;height:.82em;width:2.05em;margin:0 .06em;vertical-align:-.1em;opacity:.2;transform:scale(.7);transition:transform .9s var(--spring),opacity .4s}
.glyph.on{opacity:1;transform:none}
.glyph svg{display:block;width:100%;height:100%;overflow:visible}
.glyph-bg{fill:var(--ink)}
.glyph-base{fill:none;stroke:#f4efe833;stroke-width:1.6;stroke-linejoin:round}
.glyph-run{fill:none;stroke:var(--flame);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.22 1;stroke-dashoffset:1.22}
.glyph.on .glyph-run{animation:signal-run 2.6s linear infinite}
.air-shape rect{fill:none;stroke:#f4efe8;stroke-width:2}
.air-shape .lip{stroke:#f4efe855;stroke-width:1.2}
.air-shape .band{stroke:var(--flame);stroke-width:5;stroke-linecap:round}
.air-shape{transform-origin:60px 24px}
.glyph.on .air-shape{animation:air-buzz 2.6s infinite}

/* Inside the app: a sticky phone whose screen follows the steps */
.app{background:var(--night);color:#f4efe8;padding:20vh var(--pad) 10vh}
.app-head{display:grid;grid-template-columns:9vw 1fr;align-items:start;row-gap:28px}
.app-head h2{font-size:clamp(52px,7.4vw,136px);line-height:.88;letter-spacing:-.062em}
.app-head>p:last-child{grid-column:2;font-size:17px;color:#a39b95;max-width:440px}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:6vh}
.app-steps{padding-left:9vw}
.app-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.22;transition:opacity .5s}
.app-step.is-active{opacity:1}
.app-step h3{font-size:clamp(46px,5.4vw,96px);line-height:.95;letter-spacing:-.058em;margin:14px 0 18px}
.app-step p{font-size:18px;color:#a39b95;max-width:380px}
.step-shot{display:none}
.app-phone{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.phone{position:relative;height:min(80vh,780px);aspect-ratio:820/1781;padding:9px;border-radius:58px;background:linear-gradient(145deg,#3a3638,#151314 40%,#2a2729);box-shadow:inset 0 0 0 1px #ffffff1a,0 50px 120px #000a}
.phone-screen{position:relative;width:100%;height:100%;border-radius:49px;overflow:hidden;background:#0b0a0b}
.phone-screen img,.phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translate3d(0,2.5%,0) scale(1.035);transition:opacity .6s,transform 1.1s var(--glide)}
.phone-screen .on{opacity:1;transform:none}
.phone-island{position:absolute;top:22px;left:50%;width:30%;height:26px;transform:translateX(-50%);border-radius:20px;background:#000}

/* The Air, in three dimensions, and the setup steps */
.air-section{padding:22vh var(--pad) 12vh}
.air-grid{margin-bottom:8vh}
.air-copy{display:grid;grid-template-columns:9vw 1fr;row-gap:28px;align-items:start}
.air-copy h2{font-size:clamp(46px,6.4vw,118px);line-height:.9;letter-spacing:-.06em}
.air-copy h2,.air-copy>p{grid-column:2}
.air-copy>p{font-size:18px;color:var(--muted);max-width:420px}
.rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:9vw 1.15fr 1fr;align-items:baseline;gap:2vw;padding:3.4vw 0}
.row h3{grid-column:2}.row p{grid-column:3}
.row:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;transition:transform 1.4s var(--glide)}
html.js .row:not(.is-in):before{transform:scaleX(0)}
.row h3{font-size:clamp(32px,4.4vw,80px);line-height:1;letter-spacing:-.055em;transition:transform .7s var(--glide),opacity .4s}
.row p{font-size:17px;color:var(--muted);max-width:440px}
.row:hover h3{transform:translate3d(1.6vw,0,0)}
.rows:hover .row:not(:hover) h3{opacity:.28}
.preview{position:fixed;left:0;top:0;z-index:20;width:210px;aspect-ratio:820/1781;border-radius:22px;overflow:hidden;background:#141213;pointer-events:none;opacity:0;scale:.5;transition:opacity .3s,scale .55s var(--spring)}
.preview.show{opacity:1;scale:1}
.preview img{display:block;width:100%;height:100%;object-fit:cover}

/* Pricing */
.pricing,.faq{padding:20vh var(--pad) 12vh}
.section-head{display:grid;grid-template-columns:9vw 1fr;align-items:start;margin-bottom:8vh}
.section-head>h2{grid-column:2}
.section-head h2{font-size:clamp(46px,6.4vw,118px);line-height:.9;letter-spacing:-.06em}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-left:9vw}
.plan{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:22px;padding:44px;min-height:480px;border-radius:32px;border:1px solid var(--line);transition:transform .7s var(--glide)}
.plan:hover{transform:translate3d(0,-6px,0)}
.plan h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.plan-price{font-size:clamp(52px,5.4vw,96px);line-height:.92;letter-spacing:-.06em;font-weight:500}
.plan p:not(.plan-price){font-size:17px;color:var(--muted);max-width:430px;flex:1}
.plan-pro{background:#0c0c0e;color:#f4efe8;border-color:transparent}
.plan-pro p:not(.plan-price){color:#b7bac6}
.plan-pro:before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-75%;height:120%;border-radius:50%;background:radial-gradient(closest-side,#e4ecff 0%,#9db3ea 18%,#5a74bd 38%,#223059 58%,transparent 76%);opacity:.9;transition:transform 1.2s var(--glide),opacity .6s;animation:light-drift 16s ease-in-out infinite}
.plan-pro:hover:before{transform:translate3d(0,-6%,0) scale(1.05);opacity:1}
.plan-pro:after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fine{font-size:13px;color:var(--muted);margin:22px 0 0 9vw}

/* FAQ */
.faq-list{margin-left:9vw;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 0;font-size:clamp(20px,2.1vw,34px);letter-spacing:-.035em;cursor:pointer;transition:color .3s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--ember)}
summary>span:last-child{position:relative;flex:none;width:18px;height:18px;transition:transform .55s var(--glide)}
summary>span:last-child:before,summary>span:last-child:after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor}
summary>span:last-child:after{transform:rotate(90deg)}
details.is-open summary>span:last-child,.motion-paused details[open] summary>span:last-child{transform:rotate(45deg)}
.answer{overflow:hidden}
.answer p{font-size:17px;color:var(--muted);max-width:640px;padding-bottom:32px}

/* Closing: the mountain again, and the wordmark */
.closing{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--night)}
#closing-grain{position:absolute;inset:0;width:100%;height:100%}
.closing-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5vh;padding:18vh var(--pad) 0}
.closing h2{max-width:100%}
.closing h2{font-size:clamp(56px,8.4vw,160px);line-height:.88;letter-spacing:-.065em}
.closing .button{align-self:center}
.footer{padding:0 var(--pad) 3vh;overflow:hidden;background:var(--night);color:#f4efe8}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #ffffff1a;padding:22px 0;font-size:14px;color:#a39b95}
.footer nav{display:flex;gap:26px;align-items:center}
.footer nav a,.footer nav button{color:#f4efe8}
.wordmark{display:inline-block;font-size:30vw;font-weight:600;letter-spacing:-.075em;line-height:.74;margin:5vh 0 0 -.05em;white-space:nowrap}
.legal{font-size:12px;color:#8f8781;margin-top:3vh}

/* Dialog */
dialog{border:0;border-radius:28px;padding:44px;max-width:460px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:0 40px 120px #0004}
dialog[open]{animation:dialog-in .6s var(--glide)}
dialog::backdrop{background:#14121399}
dialog h2{font-size:44px;line-height:.95;letter-spacing:-.055em;margin-bottom:18px}
dialog>p{color:var(--muted);font-size:16px}
dialog .dialog-done{margin-top:28px}
.dialog-close{position:absolute;right:16px;top:12px;font-size:28px;line-height:1;color:var(--muted);padding:6px 10px}

/* Legal pages */
.legal-page{max-width:850px;padding:150px 30px 100px;margin:auto}
.legal-page h1{font-size:clamp(45px,7vw,80px);margin:20px 0 35px}
.legal-page h2{font-size:28px;margin:35px 0 15px}
.legal-page p{color:var(--muted);font-size:17px;margin:16px 0}
.legal-page .notice{padding:24px;border:1px solid var(--line);border-radius:14px}
.legal-page a{text-decoration:underline;text-underline-offset:5px}
.eyebrow{font-size:13px;color:var(--muted)}
.header .pill.nav-download{margin-left:auto}

@keyframes dot-cycle{0%,100%{background:transparent;border-color:#ccc7c1}12%,30%{background:#f26832;border-color:#db5c2b}}
@keyframes corner-breathe{0%,100%{translate:0 0}50%{translate:var(--cx) var(--cy)}}
@keyframes rule-run{0%{left:-40%}100%{left:100%}}
@keyframes wave-buzz{0%,14%,100%{transform:none}2%,6%,10%{transform:translateX(-2px) rotate(-6deg)}4%,8%,12%{transform:translateX(2px) rotate(6deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes signal-run{to{stroke-dashoffset:0}}
@keyframes air-buzz{0%,40%,100%{transform:none}43%,49%,55%{transform:translateX(-1.6px) rotate(-1.5deg)}46%,52%{transform:translateX(1.6px) rotate(1.5deg)}}
@keyframes dialog-in{from{opacity:0;transform:translateY(20px)}}
@keyframes light-drift{0%,100%{translate:0 0;scale:1}33%{translate:3% -1.5%;scale:1.03}66%{translate:-2.5% 1%;scale:.98}}

@media(max-width:1000px){
  .header{gap:14px;padding:0 20px}.navigation a{padding:9px 9px}.chapter-dots{display:none}
  .framed-title{width:42%}.opening-rule{width:27%}
  .row{grid-template-columns:9vw 1fr;row-gap:14px}
  .row h3,.row p{grid-column:2}
  .plans{margin-left:0}
}
@media(max-width:760px){
  :root{--pad:22px}
  .header{height:64px;padding:0 17px;gap:12px}
  .brand{font-size:20px;gap:6px}.brand img{width:16px;height:20px}
  .navigation{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);margin:0;border-radius:10px;background:#fcfbf9e6;box-shadow:0 4px 24px #0002;white-space:nowrap;padding:4px;color:var(--ink)}
  .navigation a{font-size:9px;padding:11px 9px}
  .header.on-dark .navigation,.header.over-dark .navigation{color:#eee5d9;background:#151214d9}
  .nav-download{margin-left:auto;font-size:9px;padding:8px 11px;min-height:32px}
  .film{height:860svh}
  .framed-title{top:100px;height:35vh;min-height:240px;width:84%;max-width:440px;padding:0 10px}
  .framed-title h1{font-size:clamp(32px,8.6vw,46px);margin-top:0;max-width:350px}
  .framed-title>p{font-size:13px;margin-top:22px}
  .opening-rule{top:30vh;width:6%}
  .opening-caption{top:calc(100px + 35vh + 18px);font-size:8px;gap:9px}
  .scroll-invitation{bottom:82px;left:20px;right:20px;font-size:8px}
  .signal-copy{left:var(--pad);right:var(--pad);width:auto;bottom:calc(9vh + 40px);height:220px}
  .signal-copy h2{font-size:30px}
  .signal-copy p{font-size:14px;margin-top:12px}
  .banner{left:var(--pad);right:var(--pad);width:auto;top:74px;transform-origin:top center}
  .signal-progress{left:var(--pad);right:auto;bottom:calc(4vh + 50px);flex-direction:row-reverse;align-items:center}
  .act-outro{padding:12vh 24px 0}
  .act-outro h2{font-size:44px}
  .act-outro p{font-size:15px}
  .statement{padding:16vh var(--pad) 12vh}
  .statement-text{font-size:clamp(28px,8vw,44px);text-indent:0}
  .app{padding:14vh var(--pad) 8vh}
  .app-head{grid-template-columns:1fr;row-gap:16px}
  .app-head>p:last-child{grid-column:1}
  .app-grid{display:block;margin-top:4vh}
  .app-steps{padding-left:0}
  .app-phone{display:none}
  .app-step{min-height:0;opacity:1;padding:7vh 0;border-top:1px solid #ffffff14}
  .app-step h3{font-size:44px}
  .app-step p{font-size:16px}
  .step-shot{display:block;width:72%;height:auto;margin-top:28px;border-radius:30px;border:6px solid #262325}
  .app-step[data-screen=video]{display:none}
  .air-section{padding:14vh var(--pad) 8vh}
  .air-grid{margin-bottom:5vh}
  .air-copy{grid-template-columns:1fr;row-gap:16px}
  .air-copy h2,.air-copy>p{grid-column:1}
  .air-copy h2{font-size:clamp(42px,11vw,64px)}
  .row{grid-template-columns:1fr;padding:26px 0}
  .row h3,.row p{grid-column:1}
  .row h3{font-size:32px}
  .row p{font-size:15px}
  .preview{display:none}
  .pricing,.faq{padding:14vh var(--pad) 8vh}
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:6vh}
  .section-head h2{font-size:clamp(42px,11vw,64px)}
  .plans{grid-template-columns:1fr}
  .plan{padding:32px;min-height:400px}
  .fine{margin-left:0}
  .faq-list{margin-left:0}
  summary{font-size:20px;padding:24px 0}
  .answer p{font-size:15px}
  .closing-copy{padding-top:14vh}
  .closing h2{font-size:clamp(44px,12.5vw,90px)}
  .footer-row{flex-direction:column;align-items:flex-start}
  .footer{padding-bottom:90px}
  dialog{padding:36px 24px 26px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .line>span{transform:none}
  .word{opacity:1;translate:none}.glyph{opacity:1;transform:none}
  [data-reveal],.hero-fade,.app-step h3,.app-step p{opacity:1!important;translate:none!important}
  html.js .row:not(.is-in):before{transform:none}html.js .framed-title .line>span{transform:none}
}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}

.act-signal .signal-copy,.act-signal .banners,.act-signal .signal-progress{z-index:1}
.act-signal .pod-hit{z-index:2}
/* A single pinned app chapter, on phone and desktop alike. */
.app{padding:0;position:relative;height:430svh}
.app-stage{position:sticky;top:0;height:100svh;overflow:clip;padding:100px var(--pad) 56px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:4vw}
.app-head{display:block;grid-column:1;align-self:start;padding-left:9vw;position:relative}
.app-head h2{font-size:clamp(38px,4.6vw,72px);line-height:.96}
.app-head>p:last-child{font-size:14px;line-height:1.6;margin-top:19px;max-width:370px}
.app-grid{display:contents;margin:0}
.app-steps{position:relative;grid-column:1;grid-row:2;align-self:center;height:220px;padding:0;margin-left:9vw}
.app-step{position:absolute;inset:0;min-height:0;padding:0;border:0;display:flex;justify-content:center;opacity:0;visibility:hidden;translate:0 12px;transition:opacity .4s,translate .5s var(--glide),visibility .4s}
.app-step.is-active{opacity:1;visibility:visible;translate:0 0}
.app-step h3,.app-step p{translate:0 .35em;opacity:0;transition:translate .8s var(--glide),opacity .5s}
.app-step.is-active h3,.app-step.is-active p{translate:0 0;opacity:1}
.app-step.is-active h3{transition-delay:.08s}.app-step.is-active p{transition-delay:.24s}
.app-step h3{font-size:clamp(42px,5vw,76px);margin:13px 0 17px}
.app-step p{font-size:16px;max-width:345px}
.app-phone{position:relative;grid-column:2;grid-row:1/3;top:auto;height:100%;min-height:0;display:flex}
.app-phone .phone{height:min(76svh,730px);max-height:100%;padding:7px;border-radius:38px;flex-shrink:0}
.app-phone .phone-screen{border-radius:31px}
.app-phone .phone-island{top:16px;height:20px}
.app-chapters{position:absolute;bottom:24px;left:calc(var(--pad) + 9vw);display:flex;align-items:center;gap:5px}
.app-chapters button{height:32px;width:25px;padding:0;background:none;display:grid;place-items:center}
.app-chapters button span{display:block;width:22px;height:2px;background:#ffffff30;transition:background .25s,transform .25s}
.app-chapters button[aria-pressed=true] span{background:#eee5d9;transform:scaleY(2)}
@media(max-width:760px){
 .app{height:420svh}
 .app-stage{padding:78px 22px 86px;display:flex;flex-direction:column;gap:0;align-items:stretch}
 .app-head{padding:0;flex:0 0 auto}
 .app-head h2{font-size:32px;line-height:1}
 .app-head>p:last-child{font-size:12px;margin-top:12px;max-width:340px;line-height:1.5}
 .app-steps{width:100%;height:100px;flex:0 0 100px;margin:13px 0 6px;align-self:auto}
 .app-step{padding:0;min-height:0;border:0}
 .app-step[data-screen=video]{display:flex}
 .app-step h3{font-size:29px;margin:0 0 9px}
 .app-step p{font-size:13px;line-height:1.5;max-width:340px}
 .app-phone{height:auto;flex:1 1 0;min-height:0;width:100%;display:flex}
 .app-phone .phone{height:100%;max-height:530px;max-width:100%;border-radius:30px;padding:5px}
 .app-phone .phone-screen{border-radius:25px}
 .app-phone .phone-island{top:12px;height:14px}
 .app-chapters{left:50%;transform:translateX(-50%);bottom:61px;gap:3px;white-space:nowrap}
 .app-chapters button{height:24px;width:23px}
}
@media(max-height:650px) and (min-width:761px){.app-stage{padding-top:80px;padding-bottom:50px}.app-head h2{font-size:36px}.app-head>p:last-child{font-size:12px;margin-top:12px}.app-steps{height:155px}.app-step h3{font-size:42px}.app-step p{font-size:14px}}
@media(max-height:700px) and (max-width:760px){.app-stage{padding-top:72px;padding-bottom:82px}.app-head h2{font-size:27px}.app-head>p:last-child{display:none}.app-steps{height:83px;flex-basis:83px;margin-top:10px}.app-step h3{font-size:25px;margin-bottom:6px}.app-step p{font-size:12px}}

/* Readable notification help, linked from the product page. */
.guide-link{max-width:680px;margin:0 0 32px 9vw;color:var(--muted);font-size:16px}
.guide-link a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.guide-page{max-width:980px;padding:130px 32px 90px;margin:auto}
.guide-page .eyebrow{font-size:14px}
.guide-page h1{font-size:clamp(42px,6vw,76px);line-height:1.04;margin:22px 0 28px;max-width:850px}
.guide-page .intro{font-size:clamp(19px,2.2vw,24px);max-width:720px;color:var(--muted)}
.guide-page section{max-width:740px;margin-top:52px;scroll-margin-top:100px}
.guide-page h2{font-size:clamp(28px,3.5vw,40px);line-height:1.1;margin-bottom:22px}
.guide-page h3{font-size:23px;margin:26px 0 10px}
.guide-page p,.guide-page li{font-size:17px;line-height:1.65;color:var(--muted);margin-bottom:14px}
.guide-page a:not(.button){text-decoration:underline;text-underline-offset:4px}
.guide-page strong{color:var(--ink);font-weight:600}
.guide-page ol,.guide-page ul{padding-left:23px}
.guide-toc{display:flex;flex-wrap:wrap;gap:10px 20px;padding:22px 0;border-block:1px solid var(--line);margin-top:32px;font-size:14px}
.guide-note{padding:22px 26px;border:1px solid var(--line);border-radius:16px;background:#f1eeea;margin-top:28px;max-width:740px}
.guide-note p:last-child{margin:0}
.guide-page .button{margin-top:12px}
.guide-footer{border-top:1px solid var(--line);padding:26px 32px 40px;display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted)}
@media(max-width:760px){.guide-link{margin-left:0;font-size:14px}.guide-page{padding:108px 22px 60px}.guide-page h1{font-size:43px}.guide-page p,.guide-page li{font-size:16px}.guide-page section{margin-top:38px}.guide-note{padding:18px}.guide-footer{padding-inline:22px}.footer-row nav{flex-wrap:wrap}}

/* Arrival. The page is readable before any script runs; with JavaScript, the opening composes itself
   and each later section rises into place the first time it is scrolled to. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.js .framed-title .line>span{transition-duration:1.4s;transition-delay:calc(.25s + var(--i,0)*110ms)}
html.js .framed-title h1:not(.is-in) .line>span{transform:translate3d(0,108%,0)}
.hero-fade{transition:opacity 1s var(--glide),translate 1.2s var(--glide);transition-delay:calc(var(--d,0)*95ms)}
html.js:not(.hero-in) .hero-fade{opacity:0;translate:0 12px}
html.js:not(.hero-in) .corner.hero-fade{translate:var(--cx) var(--cy)}
.header{transition:transform .6s var(--glide),color .35s,opacity .8s .4s}
html.js:not(.hero-in) .header{opacity:0}
[data-reveal]{transition:opacity .9s var(--glide),translate 1.15s var(--glide);transition-delay:calc(var(--d,0)*90ms)}
html.js [data-reveal]:not(.is-in){opacity:0;translate:0 28px}
html.js .row[data-reveal]:not(.is-in){translate:0 0;opacity:1}
html.js .row[data-reveal]:not(.is-in)>*{opacity:0;translate:0 18px}
.row>*{transition:opacity .8s var(--glide),translate 1s var(--glide)}
.row>h3{transition-delay:.12s}.row>p{transition-delay:.26s}
.wordmark-mask{overflow:hidden;margin-top:5vh;padding-bottom:.02em}
.wordmark-mask .wordmark{margin-top:0;transition:translate 1.5s var(--glide)}
html.js .wordmark-mask[data-reveal]:not(.is-in){opacity:1;translate:none}
html.js .wordmark-mask:not(.is-in) .wordmark{translate:0 100%}
.summary-text{display:inline-block;transition:translate .5s var(--glide)}
summary:hover .summary-text{translate:.35em 0}