:root{--ink:#08070d;--text:#e8e6f0;--muted:#a6a0b1;--gold:#efc873;--line:#ffffff16;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'SFMono-Regular',Consolas,monospace;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--text);font:15px/1.7 var(--sans);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button[hidden],[hidden]{display:none!important}.shell{max-width:1280px;margin:auto;padding:0 54px}.nav{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;font-size:25px;letter-spacing:-1px;font-weight:550}.mark{display:flex;align-items:center;gap:3px;height:28px}.mark i{display:block;width:3px;border-radius:3px;background:var(--text);height:10px}.mark i:nth-child(2),.mark i:nth-child(6){height:17px}.mark i:nth-child(3),.mark i:nth-child(5){height:23px;background:var(--gold)}.mark i:nth-child(4){height:28px}.study-label{font:9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#898291}.nav nav{display:flex;gap:29px;align-items:center;font-size:12px;color:#bdb6c5}.nav-cta{border:1px solid #efc87340;border-radius:6px;padding:9px 15px;color:var(--gold)}.hero{display:grid;grid-template-columns:1fr 1.14fr;align-items:center;gap:58px;padding:93px 0 86px}.hero-copy{min-width:0}.eyebrow{font:10px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.17em;color:var(--gold);margin:0 0 24px;display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';height:4px;width:4px;border-radius:50%;background:currentColor;flex-shrink:0}h1{font:400 clamp(48px,5.2vw,68px)/1.075 var(--serif);letter-spacing:-2.6px;margin:0 0 25px}h1 em,h2 em{font-weight:400;color:var(--gold)}.intro{font-size:15px;line-height:1.9;color:#b6afbf;max-width:398px;margin:0 0 30px}.actions{display:flex;align-items:center;gap:24px}.primary{display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:13px 22px;background:var(--gold);color:#241c10;font-size:12px;font-weight:650;border-radius:6px;transition:box-shadow .3s,background .3s,transform .3s}.primary:hover{background:#f4d38c;box-shadow:0 6px 30px #efc8731c;transform:translateY(-2px)}.text-link{font-size:12px;border-bottom:1px solid #c4b9d04d;padding-bottom:4px}.trial{color:#b0a8ba;font-size:11px;margin:15px 0 0}.requirements{font-size:10px;color:#8d839c;margin:3px 0 0}.hero-showcase{position:relative;min-width:0;padding:24px 25px 21px;border:1px solid #ffffff12;border-radius:16px;background:radial-gradient(ellipse at 55% 65%,#183d3023,transparent 65%),linear-gradient(150deg,#13101780,#08070d 80%);box-shadow:0 30px 65px #0003}.stage-top,.stage-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font:8px/1.5 var(--mono);letter-spacing:.08em;color:#aaa1b3}.stage-top>span:first-child{color:#d0c5d8}.native-label{display:flex;align-items:center;gap:6px}.native-label i{width:4px;height:4px;background:#8fcda8;border-radius:50%}.stage-title{font:400 clamp(25px,3vw,35px)/1.3 var(--serif);letter-spacing:-.75px;margin:47px 0 8px;color:#e8e3ec}.stage-title em{font-weight:400;color:#b2a7bf}.hero-film{margin:18px -15px 28px;min-height:123px;display:grid;align-items:center}.native-video{display:block;width:100%;height:auto;background:var(--ink);border:0}.hero-film video{aspect-ratio:auto 620/156}.stage-bottom{letter-spacing:0;font:10px/1.5 var(--sans);color:#8f879c;border-top:1px solid var(--line);padding-top:18px}.stage-bottom kbd{font:10px var(--mono);border:1px solid #ffffff23;border-radius:4px;padding:2px 5px;margin-right:5px}.promise-line{display:flex;align-items:center;justify-content:center;gap:28px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:10px/1.6 var(--mono);letter-spacing:.02em;color:#aaa0b8}.promise-line i{width:3px;height:3px;border-radius:50%;background:#b0955d}.section{padding:76px 0;scroll-margin-top:28px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:35px}.section-head h2,.closing h2{font:400 clamp(32px,4vw,49px)/1.16 var(--serif);letter-spacing:-1.5px;margin:0}.section-head .eyebrow{margin-bottom:20px}.section-head>p{font-size:14px;line-height:1.9;max-width:345px;color:var(--muted);margin:0}.style-picker{display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);margin:0 0 26px}.style-picker button{position:relative;border:0;background:transparent;color:#9f95ad;padding:12px 1px 18px;font-size:12px;transition:color .25s}.style-picker button:after{position:absolute;content:'';bottom:-1px;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s}.style-picker button[aria-pressed=true]{color:var(--gold)}.style-picker button[aria-pressed=true]:after{transform:scaleX(1)}.style-picker button:hover{color:var(--text)}.product-theatre{border:1px solid var(--line);border-radius:16px;padding:24px 31px 28px;background:linear-gradient(145deg,#100d1580,#08070d 60%);overflow:hidden}.theatre-meta{display:flex;justify-content:space-between;font:9px/1.5 var(--mono);letter-spacing:.14em;color:#9689a4}.theatre-meta>span:first-child{color:#b99b62}.feature-film{min-height:244px;display:grid;align-items:center;padding:20px 0}.feature-film video{display:block;width:100%;height:auto;max-width:830px;margin:auto;aspect-ratio:auto 620/156}.theatre-caption{display:flex;justify-content:space-between;align-items:end;gap:20px;border-top:1px solid #ffffff0e;padding-top:25px}.theatre-caption h3{font:400 27px/1.2 var(--serif);letter-spacing:-.6px;margin:0 0 9px}.theatre-caption p{color:#a59bae;font-size:12px;line-height:1.8;margin:0;max-width:480px}.element-picker{display:flex;gap:6px;flex-shrink:0}.element-picker button{border:1px solid transparent;border-radius:20px;background:none;color:#a297ab;font-size:10px;padding:7px 13px;transition:border-color .25s,color .25s}.element-picker button[aria-pressed=true]{border-color:#efc87340;color:#e7c68d}.element-picker button:hover{color:var(--text)}.footage-note{font-size:11px;color:#93889f;text-align:center;line-height:1.8;margin:20px auto 0}.inside{border-top:1px solid var(--line);padding-top:70px}.app-film{max-width:916px;margin:42px auto 0;border:1px solid #ffffff18;border-radius:15px;overflow:hidden;box-shadow:0 25px 80px #0004}.app-film video{aspect-ratio:auto 3024/1900}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:39px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:38px 0}.benefits article+article{border-left:1px solid var(--line);padding-left:35px}.benefits article>span{font:8px/1.4 var(--mono);letter-spacing:.12em;color:#b59a68}.benefits h3{font:400 23px/1.25 var(--serif);letter-spacing:-.5px;margin:18px 0 10px}.benefits p{font-size:12px;color:#a59bae;margin:0;line-height:1.9}.closing{text-align:center;padding:52px 0 28px}.closing .eyebrow{justify-content:center;margin-bottom:14px}.closing h2{margin-bottom:22px}.closing>p:last-child{font-size:11px;color:#9b90a7;margin:15px 0 0}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:23px 0 78px;color:#8e819d;font-size:10px}footer a{border-bottom:1px solid #8e819d5c}.motion-toggle{position:fixed;bottom:20px;right:20px;z-index:10;display:flex;align-items:center;gap:8px;border:1px solid #efc8733b;border-radius:24px;padding:10px 14px;min-height:42px;background:#111017ee;color:#e3d7c1;font-size:11px;backdrop-filter:blur(14px);box-shadow:0 5px 25px #0005}.motion-icon{font-size:13px;width:11px}.motion-toggle:hover{border-color:#efc87375}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.no-script{padding:12px 24px;text-align:center;color:var(--muted);font-size:12px}.js-motion .reveal{opacity:0;transform:translateY(14px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.6,.3,1)}.js-motion .reveal.seen{opacity:1;transform:none}.js-motion[data-motion=paused] .reveal{opacity:1;transform:none;transition:none}.feature-film.switching{opacity:.35;transition:opacity .16s}.feature-film{transition:opacity .35s}video.failed{object-fit:contain}
@media(max-width:1080px){.shell{padding:0 34px}.hero{gap:35px}h1{font-size:54px;letter-spacing:-2px}.intro{font-size:14px}.stage-top{font-size:7px}.hero-showcase{padding-inline:20px}.section-head{gap:38px}.style-picker{gap:26px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:45px;padding:63px 0 54px}.hero-copy{max-width:620px}.hero h1{font-size:clamp(50px,7.7vw,65px)}.intro{max-width:540px}.hero-showcase{max-width:680px;width:100%;padding:25px 29px}.stage-title{margin-top:35px}.hero-film{margin:10px 0 20px}.stage-top{font-size:9px}.stage-bottom{font-size:11px}.promise-line{gap:16px;font-size:9px}.section-head>p{max-width:300px}.feature-film{min-height:220px}.theatre-caption{align-items:start;flex-direction:column;gap:18px}.benefits{gap:25px}.benefits article+article{padding-left:23px}.benefits h3{font-size:21px}}
@media(max-width:620px){.shell{padding:0 22px}.nav{height:82px}.study-label{display:none}.nav nav{gap:20px;font-size:11px}.nav-cta{padding:8px 12px}.hero{padding-top:45px;gap:36px}.hero h1{font-size:clamp(42px,9.5vw,58px);letter-spacing:-1.9px}.eyebrow{font-size:9px;margin-bottom:20px}.intro{font-size:14px}.primary{padding:12px 18px}.trial{font-size:10px}.hero-showcase{padding:20px 18px 18px;border-radius:12px}.stage-top{font-size:7px;letter-spacing:.05em}.stage-title{font-size:29px;margin-top:31px}.hero-film{min-height:92px;margin:11px -9px 17px}.stage-bottom{font-size:9px;gap:9px}.promise-line{flex-wrap:wrap;column-gap:12px;row-gap:8px;font-size:8px;padding:18px 0}.promise-line span:last-child,.promise-line i:last-of-type{display:none}.section{padding:47px 0}.section-head{display:block;margin-bottom:24px}.section-head>p{max-width:420px;margin:19px 0 0;font-size:13px}.section-head h2,.closing h2{font-size:36px;letter-spacing:-1px}.style-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:0 15px;margin-bottom:20px}.style-picker button{padding:10px 5px;font-size:11px;margin-bottom:6px}.product-theatre{padding:19px 17px 23px;border-radius:12px}.theatre-meta{font-size:7px;letter-spacing:.09em}.feature-film{min-height:167px;margin-inline:-12px;padding:13px 0}.theatre-caption{padding-top:20px}.theatre-caption h3{font-size:25px}.theatre-caption p{font-size:12px}.footage-note{font-size:10px;text-align:left;margin-top:16px}.app-film{margin-top:28px;border-radius:10px}.benefits{grid-template-columns:1fr;gap:24px;padding:29px 0}.benefits article+article{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.benefits h3{font-size:24px;margin:12px 0 8px}.benefits p{max-width:430px}.closing{padding:40px 0 20px}.closing .eyebrow{font-size:8px}footer{flex-direction:column;gap:7px;padding-bottom:78px;font-size:9px}.motion-toggle{bottom:14px;right:14px;min-height:40px;padding:9px 12px}}
@media(max-width:350px){.shell{padding:0 17px}.nav nav>a:first-child{display:none}.stage-bottom{font-size:8px}.hero h1{font-size:41px}.hero-showcase{padding-inline:15px}.native-label{font-size:6px}.section-head h2,.closing h2{font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.js-motion .reveal{opacity:1;transform:none}}

/* One quiet button treatment throughout the page. */
.primary,.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:44px;padding:11px 20px;border:1px solid #f5d99566;border-radius:8px;background:linear-gradient(170deg,#f1d38f,var(--gold));color:#302619;font:500 12px/1.4 var(--sans);letter-spacing:.01em;box-shadow:inset 0 1px 0 #fff3,0 3px 12px #0002;transition:background .25s,box-shadow .25s,transform .25s}
.primary:hover,.nav-cta:hover{background:linear-gradient(170deg,#f5dda7,#efcb80);box-shadow:inset 0 1px 0 #fff4,0 5px 22px #efc87312;transform:translateY(-1px)}
.nav-cta{min-height:38px;padding:9px 14px;font-size:11px;gap:14px}
.cta-arrow{width:14px;height:14px;flex:none;transition:transform .25s}
.primary:hover .cta-arrow,.nav-cta:hover .cta-arrow{transform:translate(1px,-1px)}
/* Exterior mattes follow the recorded capsule, preserving its native dark body. */
.pill-stage{position:relative;isolation:isolate}
.pill-layer{grid-area:1/1;width:100%;min-width:0;opacity:0;transform:translateY(4px);transition:opacity .24s ease,transform .5s cubic-bezier(.2,.6,.3,1);pointer-events:none;filter:drop-shadow(0 13px 15px #0005)}
.pill-layer.is-active{opacity:1;transform:none;transition-delay:.16s}
.pill-layer .native-video{background:transparent}
.pill-layer[data-shape=sliver] video{clip-path:inset(35.142857% 2.142857% round 2% / 8%)}
.pill-layer[data-shape=meter] video{clip-path:inset(21.818182% 4.724409% round 999px)}
.pill-layer[data-shape=elements] video{clip-path:inset(24% 6.315789% round 999px)}
.hero-film{height:154px;min-height:0;margin:15px -10px 0}
.hero-film video{max-height:154px;object-fit:contain}
.hero-picker{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 auto 17px}
.hero-picker button{border:0;background:transparent;width:33px;height:28px;padding:12px 7px;border-radius:5px}
.hero-picker button>span{display:block;height:2px;width:100%;border-radius:2px;background:#ffffff26;position:relative;overflow:hidden;transition:background .3s}
.hero-picker button[aria-pressed=true]>span{background:#efc87355}
.hero-picker button[aria-pressed=true]>span:after{content:'';position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(max(.12,var(--cycle-progress,0)))}
.hero-picker button:hover>span{background:#efc87399}
.feature-film{height:252px;min-height:0;padding:12px 0;transition:none}
.feature-film video{max-height:222px;object-fit:contain}
.theatre-caption{min-height:109px}
.style-picker{gap:26px}
.style-picker button[aria-pressed=true]:after{transform:scaleX(1)}
[data-motion=paused] .pill-layer{transition:none}
@media(max-width:900px){.hero-film{height:163px}.hero-film video{max-height:163px}.feature-film{height:230px}.feature-film video{max-height:206px}.theatre-caption{min-height:146px}}
@media(max-width:620px){.hero-film{height:120px;margin:9px -9px 0}.hero-film video{max-height:120px}.hero-picker{margin-bottom:12px}.hero-picker button{width:29px}.feature-film{height:176px;padding:12px 0}.feature-film video{max-height:152px}.theatre-caption{min-height:163px}.style-picker{gap:0 15px}.primary{padding:11px 18px;font-size:12px}.nav-cta{padding:9px 12px;gap:11px}.cta-arrow{width:13px;height:13px}}
.pill-layer[data-shape=classic] video{clip-path:inset(24% 6.25% round 999px)}
.pill-layer[data-shape=island] video{clip-path:inset(23.529412% 4.562738% round 999px)}
.pill-layer[data-shape=pulse] video{clip-path:inset(26.086957% 4.958678% round 999px)}
.pill-layer[data-shape=sliver]{--frame-aspect:4}
.pill-layer[data-shape=classic]{--frame-aspect:3.84}
.pill-layer[data-shape=island]{--frame-aspect:5.156863}
.pill-layer[data-shape=pulse]{--frame-aspect:5.260870}
.pill-layer[data-shape=meter]{--frame-aspect:4.618182}
.pill-layer[data-shape=elements]{--frame-aspect:3.8}
.hero-film{--frame-height:154px}.feature-film{--frame-height:222px}
.pill-stage .pill-layer{justify-self:center;width:min(100%,calc(var(--frame-height) * var(--frame-aspect)));max-width:830px}
.pill-stage .native-video{max-height:none;object-fit:fill}
@media(max-width:900px){.hero-film{--frame-height:163px}.feature-film{--frame-height:206px}}
@media(max-width:620px){.hero-film{--frame-height:120px}.feature-film{--frame-height:152px}}
/* Readable trial invitation, with the offer explained beneath it. */
.primary{min-height:48px;padding:12px 21px;font-size:16px;gap:21px}
.nav-cta{min-height:38px;font-size:14px;padding:8px 14px}
.primary .cta-arrow{width:16px;height:16px}
@media(max-width:620px){.primary{font-size:16px;padding:12px 20px}.nav-cta{font-size:14px;padding:8px 13px;gap:12px}}

/* Editorial signature: the wordmark leads; the original app icon signs it. */
.nav{position:relative;height:86px;border-bottom:0}
.nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#efc87355,#ffffff16 35%,#ffffff0b)}
.brand{display:inline-flex;align-items:center;gap:15px;flex-shrink:0;font:inherit;letter-spacing:normal}
.brand-signature{display:grid;gap:7px}
.brand-wordmark{font:400 30px/.95 var(--serif);text-transform:uppercase;letter-spacing:.15em;color:#eeebf2}
.brand-descriptor{font:8px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#c0a66e}
.brand-seal{display:flex;align-items:center;padding-left:15px;border-left:1px solid #efc87338}
.brand-icon{display:block;position:relative;width:46px;height:46px;flex-shrink:0}
.app-icon{display:block;width:100%;height:100%;object-fit:contain}
.brand-icon-live{display:none;position:absolute;inset:0}
.brand-icon-plate{display:block;width:100%;height:100%}
.brand-icon-bars{position:absolute;inset:0;width:100%;height:100%}
.brand-icon[data-motion-ready=true] .app-icon{visibility:hidden}
.brand-icon[data-motion-ready=true] .brand-icon-live{display:block}
.nav nav{font-size:13px}
.brand-signature{animation:brand-signature-arrive .8s cubic-bezier(.16,1,.3,1) both}
.brand-seal{animation:brand-seal-arrive .9s cubic-bezier(.16,1,.3,1) .12s both}
@keyframes brand-signature-arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes brand-seal-arrive{from{opacity:0}to{opacity:1}}
:root[data-motion=paused] .brand-signature,:root[data-motion=paused] .brand-seal{animation-play-state:paused}
.primary,.nav-cta{white-space:nowrap}
@media(max-width:620px){
  .nav{height:78px;gap:10px}
  .brand{gap:11px}
  .brand-signature{gap:6px}
  .brand-wordmark{font-size:26px;letter-spacing:.12em}
  .brand-descriptor{font-size:7px;letter-spacing:.08em}
  .brand-seal{padding-left:11px}
  .brand-icon{width:38px;height:38px}
  .nav nav{gap:12px;font-size:12px}
}
@media(max-width:440px){.nav nav>a:first-child{display:none}}

@media(prefers-reduced-motion:reduce){
  .brand-icon[data-motion-ready=true] .app-icon{visibility:visible}
  .brand-icon[data-motion-ready=true] .brand-icon-live{display:none}
}

.footer-resources{display:grid;gap:12px;justify-items:end}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 24px;font:12px/1.8 var(--mono);color:#bdb6c5}
.footer-links a{border-bottom-color:transparent;transition:color .2s,border-color .2s}
.footer-links a:hover{color:var(--gold);border-bottom-color:#efc87355}
@media(max-width:620px){.footer-resources{justify-items:start;margin-top:8px}.footer-links{gap:8px 20px;font-size:11px}}

/* A compact signature with all navigation available on narrow screens. */
.nav nav>a[aria-current="page"]{color:var(--gold)}
@media(max-width:620px){.nav{height:auto;min-height:106px;flex-wrap:wrap;gap:10px;padding:16px 0 12px}.nav nav{width:100%;justify-content:space-between;gap:12px}.nav nav>a:first-child{display:inline-flex}.nav nav>a{min-height:38px;align-items:center;display:inline-flex}}

/* The first thing a keyboard reaches, and the only way past a header that
   repeats on every page. Off screen until it takes focus. */
.skip-link{position:fixed;top:8px;left:12px;z-index:200;background:var(--text);color:var(--ink);padding:10px 18px;border-radius:4px;font-size:12px;transform:translateY(-160%)}
.skip-link:focus{transform:none}
main:focus{outline:none}

/* A one line notice for the people who followed an old justbeam.ing link: the
   one fact a returning customer needs, dismissible for good. It retires on its
   own (see the script at the foot of index.html) so nobody has to remember to
   delete it. Hidden in the markup; only the script may show it. */
.moved{background:rgba(239,200,115,.05);border-bottom:1px solid #efc87330}
.moved-wrap{max-width:1280px;margin:auto;padding:12px 54px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.moved p{margin:0;color:#a6a0b1;font-size:12px;line-height:1.6}
.moved strong{color:var(--gold);font-weight:600}
.moved-x{flex:none;background:none;border:0;cursor:pointer;color:#a6a0b1;font-size:18px;line-height:1;padding:4px 8px;border-radius:5px;transition:color .2s ease,background .2s ease}
.moved-x:hover{color:var(--text);background:#ffffff14}
@media(max-width:860px){.moved-wrap{padding:11px 22px;gap:12px}.moved p{font-size:11px}}