/* on cue landing page (bahlr apps). Loads after site.css and service.css. */
.oc em{font-style:normal;color:var(--coral)}
.oc-rec{width:11px;height:11px;border-radius:50%;background:var(--coral);display:inline-block;animation:ocpulse 1.6s ease-in-out infinite}
@keyframes ocpulse{50%{opacity:.35;transform:scale(.8)}}
.oc-price-line{font-size:15px;font-weight:300;color:var(--gain);margin-top:-6px}
.oc-hero .sv-hero-copy{grid-column:span 6}
.oc-hero-stage{grid-column:7/span 6;display:flex;flex-direction:column;align-items:center;gap:18px}
.oc-cap{font-size:14px;font-weight:300;color:#8fa3ab;text-align:center}

/* the phone */
.oc-phone{width:300px;max-width:100%;aspect-ratio:9/19;border-radius:46px;background:#05090c;padding:10px;border:1px solid #2a3c44;position:relative}
.oc-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#111}
.oc-cam{position:absolute;inset:0;background:#1b2a31}
.oc-tp{position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(rgba(6,12,16,.84),rgba(6,12,16,.72));padding:44px 16px 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 30px,#000 64px,#000 82%,transparent);mask-image:linear-gradient(transparent 30px,#000 64px,#000 82%,transparent)}
.oc-tp-roll{font:600 21px/1.3 'Hanken Grotesk',Helvetica,Arial,sans-serif;color:#fff;will-change:transform}
.oc-tp-roll p{margin:0 0 .3em}
.oc-tp-roll p.gap{height:.5em;margin:0}
.oc-tp-roll p.hl{color:var(--coral)}
.oc-tp-hero .oc-tp-roll{font-size:19px}
.oc-guide{position:absolute;left:6px;right:6px;top:calc(46% * .42);height:0;border-top:1.5px solid rgba(239,69,69,.6)}
.oc-guide::before{content:"";position:absolute;left:-4px;top:-5px;border:4px solid transparent;border-left:6px solid var(--coral)}
.oc-recbar{position:absolute;left:12px;right:12px;top:12px;display:flex;justify-content:space-between;align-items:center;z-index:3;font:600 11px/1 'Hanken Grotesk',sans-serif;color:#fff}
.oc-recpill{display:flex;align-items:center;gap:6px;background:var(--coral);border-radius:999px;padding:5px 9px;font-variant-numeric:tabular-nums}
.oc-recpill i{width:6px;height:6px;border-radius:50%;background:#fff;animation:ocpulse 1s infinite}
.oc-shape{background:rgba(20,20,20,.6);border-radius:999px;padding:5px 9px}
.oc-shoot{position:absolute;left:50%;bottom:18px;width:58px;height:58px;margin-left:-29px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center}
.oc-shoot i{width:22px;height:22px;border-radius:5px;background:var(--coral)}

/* the tools */
.oc-tool-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.oc-tabs{grid-column:span 6;border-top:1px solid var(--ink);display:flex;flex-direction:column}
.oc-tab{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:48px 1fr;gap:12px;padding:30px 0;border-bottom:1px solid var(--gain);transition:background-color .5s,padding .5s}
.oc-tab .n{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:22px;color:var(--teal);padding-top:3px}
.oc-tab b{display:block;font-family:'Maitree',Georgia,serif;font-weight:200;font-size:30px;line-height:1.1;letter-spacing:-.01em}
.oc-tab small{display:block;font-size:16px;line-height:1.55;color:var(--body);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .6s ease,margin .6s ease}
.oc-tab.on{padding-left:16px;background:#fff}
.oc-tab.on .n{color:var(--coral)}
.oc-tab.on small{max-height:120px;opacity:1;margin-top:8px}
.oc-tab:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.oc-demo{grid-column:8/span 5;display:flex;flex-direction:column;align-items:center;gap:20px;position:sticky;top:24px}
.oc-phone-demo{width:280px}
.oc-layer{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.oc-layer.on{opacity:1;visibility:visible}
.oc-ctl{display:none;width:100%;max-width:440px;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:end}
.oc-ctl.on{display:grid}
.oc-ctl label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--body);letter-spacing:.02em}
.oc-ctl .oc-full{grid-column:1/-1}
.oc-ctl input[type=text],.oc-ctl select,.oc-ctl textarea{font:400 16px/1.4 'Hanken Grotesk',sans-serif;border:1px solid var(--gain);background:#fff;padding:10px 12px;color:var(--ink);border-radius:0;width:100%;box-sizing:border-box}
.oc-ctl textarea{resize:vertical}
.oc-ctl input[type=range]{accent-color:var(--coral);width:100%}
.oc-ctl output{font-size:13px;color:var(--teal)}
.oc-ctl label:has(input[type=range]){display:grid;grid-template-columns:1fr auto;align-items:center}
.oc-ctl label:has(input[type=range]) input{grid-column:1/-1}
.oc-sw{flex-direction:row!important;align-items:center;gap:10px!important}
.oc-sw input[type=color]{width:42px;height:42px;border:1px solid var(--gain);padding:2px;background:#fff;cursor:pointer}
.oc-sw code{font:400 14px/1 ui-monospace,Menlo,monospace;color:var(--ink)}
.oc-up input{font-size:13px}
.oc-mini{all:unset;box-sizing:border-box;cursor:pointer;height:44px;padding:0 18px;border:1px solid var(--ink);font-weight:600;font-size:14px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.oc-mini.coral{background:var(--coral);border-color:var(--coral);color:#fff}
.oc-mini:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.oc-note{font-size:13px;line-height:1.5;color:var(--body);grid-column:1/-1;margin:0}
.oc-chips{display:flex;flex-wrap:wrap;gap:8px}
.oc-chip{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 14px;border:1px solid var(--gain);background:#fff;font-size:14px}
.oc-chip.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.oc-chip .x{width:24px;height:24px;display:grid;place-items:center;font-size:16px;opacity:.6}
.oc-add{display:flex;gap:8px}
.oc-add input{flex:1}

/* branded overlays (colors come from --b1 / --b2 on the stage) */
#stage{--b1:#1d3b34;--b2:#e9a23b;--bf:'Hanken Grotesk',Helvetica,Arial,sans-serif;--bw:700;--bt:none}
.oc-bug{position:absolute;right:14px;top:16px;min-width:52px;height:30px;padding:0 9px;background:var(--b1);color:#fff;display:flex;align-items:center;justify-content:center;font:var(--bw) 10px/1 var(--bf);text-transform:var(--bt);letter-spacing:.04em}
.oc-bug img{max-height:22px;max-width:80px;display:block}
.oc-bug-sm{transform:scale(.85);transform-origin:top right}
.oc-lower{position:absolute;left:14px;right:40px;bottom:110px;display:flex;flex-direction:column;gap:0;transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.oc-layer.on .oc-lower{transform:none}
.oc-lower b{align-self:flex-start;background:var(--b1);color:#fff;padding:8px 12px;font:var(--bw) 17px/1.1 var(--bf);text-transform:var(--bt)}
.oc-lower span{align-self:flex-start;background:var(--b2);color:var(--ink);padding:5px 12px;font:500 12px/1.2 'Hanken Grotesk',sans-serif}
.oc-card{position:absolute;inset:0;background:var(--b1);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:32px;gap:10px}
.oc-card-n{font:var(--bw) 64px/1 var(--bf);color:var(--b2)}
.oc-card-name{font:var(--bw) 34px/1.05 var(--bf);text-transform:var(--bt);letter-spacing:-.01em;clip-path:inset(0 100% 0 0)}
.oc-card.go .oc-card-name{animation:ocwipe 1s .2s cubic-bezier(.2,.8,.2,1) forwards}
.oc-card-by{font-size:13px;opacity:.75;border-top:2px solid var(--b2);padding-top:10px;align-self:flex-start}
@keyframes ocwipe{to{clip-path:inset(0 0 0 0)}}
.oc-capline{position:absolute;left:18px;right:18px;bottom:120px;text-align:center;font:800 24px/1.15 'Hanken Grotesk',sans-serif;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55);margin:0;min-height:56px}
.oc-capline span{transition:color .2s}
.oc-capline span.now{color:var(--b2)}
.oc-end{position:absolute;inset:0;background:var(--b1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;font-size:14px;opacity:0;transition:opacity .6s}
.oc-end.on{opacity:1}
.oc-end-logo{min-width:120px;min-height:46px;padding:10px 16px;border:2px solid var(--b2);display:flex;align-items:center;justify-content:center;font:var(--bw) 16px/1 var(--bf);text-transform:var(--bt)}
.oc-end-logo img{max-width:160px;max-height:70px;display:block}
#endLine{color:var(--b2);font-weight:600}
.oc-tp-script .oc-tp-roll{font-size:18px}
.oc-tp-script{height:62%}
.oc-tp-roll.static p{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.oc-tp-roll.static p.in{opacity:1;transform:none}

/* rows */
.oc-rows{border-top:1px solid var(--ink)}
.oc-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:32px 0;border-bottom:1px solid var(--gain);align-items:baseline}
.oc-row .n{grid-column:span 1;font-family:'Maitree',Georgia,serif;font-weight:200;font-size:20px;color:var(--teal)}
.oc-row .n.oc-ok{color:var(--coral)}
.oc-row h3{grid-column:2/span 4;font-family:'Maitree',Georgia,serif;font-weight:200;font-size:34px;line-height:1.1;letter-spacing:-.01em;margin:0}
.oc-row p{grid-column:7/span 6;font-size:17px;line-height:1.6;color:var(--body);margin:0}
.oc-who,.oc-post{padding-bottom:0}
.oc-post{padding-bottom:128px}

/* split band */
.oc-split{background:var(--ink);color:var(--paper);margin-top:128px}
.oc-split-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:112px;padding-bottom:112px}
.oc-split-in>div:first-child{grid-column:span 5}
.oc-split-r{grid-column:7/span 6;display:flex;flex-direction:column;gap:18px;font-size:19px;line-height:1.6;font-weight:300;color:var(--gain)}
.oc-split-r p{margin:0}
.oc-split-r b{color:var(--paper);font-weight:500}
.oc-price-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.oc-price-grid>.oc-price-head{grid-column:span 5;display:flex;flex-direction:column;gap:20px}
.oc-price-grid>.oc-price-head .lede{color:var(--body);font-size:18px;line-height:1.6;max-width:420px}
.oc-price-grid>.pcard{grid-column:7/span 6}
@media (max-width:1100px){.oc-price-grid>.oc-price-head,.oc-price-grid>.pcard{grid-column:span 12}.oc-price-grid>.pcard{margin-top:48px;max-width:620px}}
.oc-access .form select{font-family:inherit}

@media (max-width:1100px){
  .oc-hero .sv-hero-copy{grid-column:span 12}
  .oc-hero-stage{grid-column:span 12;margin-top:56px}
  .oc-tabs{grid-column:span 12}
  .oc-demo{grid-column:span 12;position:static;margin-top:40px}
  .oc-row h3{grid-column:2/span 11}
  .oc-row p{grid-column:2/span 11;margin-top:10px}
  .oc-split-in>div:first-child,.oc-split-r{grid-column:span 12}
  .oc-split-r{margin-top:28px}
}
@media (max-width:760px){
  .oc-hero-stage{margin-top:40px}
  .oc-phone{width:270px;border-radius:40px}
  .oc-screen{border-radius:31px}
  .oc-phone-demo{width:280px}
  .oc-tabs{flex-direction:row;overflow-x:auto;border-top:0;gap:8px;padding-bottom:6px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
  .oc-tabs::-webkit-scrollbar{display:none}
  .oc-tab{flex:0 0 auto;grid-template-columns:auto;gap:2px;padding:12px 16px;border:1px solid var(--gain);background:#fff}
  .oc-tab .n{font-size:13px;padding:0}
  .oc-tab b{font-size:19px;white-space:nowrap}
  .oc-tab small{display:none}
  .oc-tab.on{padding-left:16px;background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .oc-demo{margin-top:24px}
  .oc-demo-line{display:block}
  .oc-ctl{grid-template-columns:1fr}
  .oc-row{grid-template-columns:1fr;padding:24px 0}
  .oc-row .n,.oc-row h3,.oc-row p{grid-column:auto}
  .oc-row h3{font-size:27px;margin-top:4px}
  .oc-row p{font-size:16px}
  .oc-split{margin-top:96px}
  .oc-split-in{padding-top:80px;padding-bottom:80px}
  .oc-split-r{font-size:17px}
  .oc-post{padding-bottom:96px}
}
/* phones: the line under the active tab shows above the phone */
.oc-tabline{display:none;font-size:16px;line-height:1.55;color:var(--body);margin:0;text-align:center;max-width:440px}
@media (max-width:760px){.oc-tabline{display:block}}
@media (prefers-reduced-motion:reduce){.oc-rec,.oc-recpill i{animation:none}.oc-lower,.oc-layer,.oc-tab,.oc-tab small,.oc-end{transition:none}.oc-card-name{clip-path:none!important;animation:none!important}}

/* the beta: the first 10 (Corey, Oct 23 2026) */
.oc-beta{background:var(--paper);border-bottom:1px solid var(--gain)}
.oc-beta-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:112px;padding-bottom:112px;align-items:start}
.oc-beta-l{grid-column:span 6;display:flex;flex-direction:column;gap:26px}
.oc-beta-l .eyebrow{display:flex;align-items:center;gap:10px;color:var(--coral)}
.oc-beta-l .eyebrow .oc-rec{width:9px;height:9px}
.oc-beta-l .h2 em{font-style:normal;color:var(--coral)}
.oc-beta-l .lede{color:var(--body);font-size:18px;line-height:1.6;max-width:540px;margin:0}
.oc-spots{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.oc-sq{display:grid;grid-template-columns:repeat(10,18px);gap:6px}
.oc-sq i{height:18px;background:var(--coral);transition:background-color .6s}
.oc-sq i.gone{background:var(--gain)}
.oc-spots p{margin:0;font-size:16px;color:var(--body)}
.oc-spots b{color:var(--ink);font-weight:600}
.oc-beta-ctas{display:flex;gap:14px;flex-wrap:wrap}
.oc-dark-line{color:var(--ink);background:none;cursor:pointer;font-family:inherit;height:60px}
.oc-beta-r{grid-column:8/span 5;border-top:1px solid var(--ink)}
.oc-brow{display:grid;grid-template-columns:56px minmax(0,1fr);padding:28px 0;border-bottom:1px solid var(--gain)}
.oc-brow .n{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:20px;color:var(--coral)}
.oc-brow h3{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:30px;line-height:1.1;letter-spacing:-.01em;margin:0 0 10px}
.oc-brow p{margin:0;font-size:16px;line-height:1.6;color:var(--body)}
.oc-beta-note{font-size:15px;line-height:1.5;margin:4px 0 0;color:var(--gain)}
.oc-beta-note b{color:#fff;font-weight:500}

/* I want to: beta or early access */
.oc-mode{border:0;padding:0;margin:0 0 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.oc-mode legend{font-size:14px;margin-bottom:10px;padding:0}
.oc-pick{display:flex!important;flex-direction:row!important;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background-color .3s}
.oc-pick input{accent-color:var(--coral);margin-top:3px;width:auto!important;height:auto!important}
.oc-pick span{display:flex;flex-direction:column;gap:4px}
.oc-pick b{font-weight:500;font-size:16px}
.oc-pick small{font-size:13.5px;line-height:1.45;opacity:.75;font-weight:300}
.oc-pick:has(input:checked){border-color:var(--coral)}

/* the report button in the demo phone, and its window */
.oc-flag{position:absolute;right:12px;bottom:32px;z-index:6;display:flex;align-items:center;gap:6px;background:rgba(14,30,38,.82);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 11px;font:600 11px/1 'Hanken Grotesk',Helvetica,Arial,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.oc-flag:hover{border-color:var(--coral)}
.oc-report{border:0;padding:0;max-width:560px;width:calc(100% - 32px);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:var(--ink);color:var(--paper);overflow:auto}
.oc-report::backdrop{background:rgba(6,12,16,.72)}
.oc-report::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--paper) 0 25%,var(--teal) 25% 50%,var(--laurel) 50% 75%,var(--coral) 75%)}
.oc-report-in,.oc-report-done{padding:28px 32px 32px;display:flex;flex-direction:column;gap:18px}
.oc-report-top{display:flex;justify-content:space-between;align-items:center}
.oc-report .eyebrow{display:flex;align-items:center;gap:9px;color:#8fa3ab;margin:0}
.oc-report .eyebrow .oc-rec{width:8px;height:8px}
.oc-x{background:none;border:0;color:var(--paper);font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.oc-report h2{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:38px;line-height:1.05;margin:0;letter-spacing:-.01em}
.oc-report-t{margin:0;font-size:15.5px;line-height:1.55;color:var(--gain);font-weight:300}
.oc-report label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--gain)}
.oc-report textarea,.oc-report input:not([type=radio]),.oc-report select{background:#132a34;border:1px solid #2a3c44;color:var(--paper);font:300 16px/1.5 'Hanken Grotesk',Helvetica,Arial,sans-serif;padding:12px 14px;width:100%;border-radius:0}
.oc-report textarea:focus,.oc-report input:focus,.oc-report select:focus{outline:none;border-color:var(--coral)}
.oc-kinds{display:flex;gap:8px;flex-wrap:wrap}
.oc-kinds label{flex-direction:row}
.oc-kinds input{position:absolute;opacity:0;pointer-events:none}
.oc-kinds span{padding:9px 14px;border:1px solid #2a3c44;font-size:14px;color:var(--gain);cursor:pointer;transition:border-color .3s,color .3s}
.oc-kinds input:checked+span{border-color:var(--coral);color:#fff}
.oc-kinds input:focus-visible+span{outline:2px solid var(--coral);outline-offset:2px}
.oc-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.oc-send{border:0;cursor:pointer;font-family:inherit;align-self:flex-start}
.oc-rnote{margin:0;font-size:14px;color:#f3a3a3;min-height:1em}
.oc-report .oc-dark-line{color:var(--paper);align-self:flex-start}

@media (max-width:1100px){.oc-beta-l{grid-column:span 12}.oc-beta-r{grid-column:span 12;margin-top:56px}}
@media (max-width:760px){
  .oc-beta-in{padding-top:72px;padding-bottom:72px}
  .oc-beta-l{gap:22px}
  .oc-sq{grid-template-columns:repeat(10,minmax(0,1fr));width:100%;gap:5px}
  .oc-beta-ctas>*{flex:1 1 0;min-width:0;padding:0 12px;font-size:15px;height:54px}
  .oc-brow{grid-template-columns:40px minmax(0,1fr);padding:22px 0}
  .oc-brow h3{font-size:25px}
  .oc-mode,.oc-two{grid-template-columns:minmax(0,1fr)}
  .oc-report-in,.oc-report-done{padding:22px 20px 24px}
  .oc-report h2{font-size:32px}
}
@media (prefers-reduced-motion:reduce){.oc-sq i,.oc-pick,.oc-kinds span{transition:none}}

/* ===== Oct 23 2026, second pass: join the beta, the tour, two phones with real client brands ===== */
@font-face{font-family:'Scoreboard JNL';src:url(a/scoreboard.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Jost';src:url(a/jost.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'IB Inter';src:url(a/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'AOS Montserrat';src:url(a/montserrat-900.woff2) format('woff2');font-weight:900;font-display:swap}
.oc-price-line b{color:var(--paper);font-weight:500}

/* the camera: a real clip, or a quiet stand-in of a person in a room */
.oc-cams{position:absolute;inset:0}
.oc-camk{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.oc-camk.on{opacity:1}
.oc-camk video,.oc-camk img{width:100%;height:100%;object-fit:cover;display:block}
.oc-camk::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.18),transparent 30%,transparent 60%,rgba(0,0,0,.4))}
.oc-you{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 70% at 22% 18%,#3b3328 0%,#1a1d22 55%,#101317 100%)}
.oc-you.night{background:radial-gradient(110% 65% at 78% 16%,#4a3a2a 0%,#1c2350 42%,#121633 72%)}
.oc-you.night::before{content:"";position:absolute;inset:0;background:url(a/gnfb-pattern.jpg) center/cover;opacity:.045}
.oc-you svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;transform-origin:50% 100%;animation:ocbreath 5.5s ease-in-out infinite}
.oc-you .who{animation:ocnod 3.6s ease-in-out infinite;transform-origin:50px 124px}
.oc-you .lamp{position:absolute;width:46%;aspect-ratio:1;border-radius:50%;left:-8%;top:6%;background:radial-gradient(circle,rgba(255,196,120,.38),transparent 65%);animation:oclamp 7s ease-in-out infinite}
.oc-you.night .lamp{left:auto;right:-6%;top:4%;background:radial-gradient(circle,rgba(223,146,44,.34),transparent 65%)}
.oc-you .tag{position:absolute;left:12px;bottom:12px;font:500 9.5px/1 'Hanken Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42)}
@keyframes ocbreath{50%{transform:scale(1.012,1.018)}}
@keyframes ocnod{0%,100%{transform:rotate(0)}30%{transform:rotate(-1.4deg)}62%{transform:rotate(1deg)}}
@keyframes oclamp{50%{opacity:.75;transform:scale(1.06)}}

/* hero: brand chips, two phones */
.oc-kits{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
.oc-kits-k{font-size:13px;color:#8fa3ab;margin-right:4px}
.oc-kit{position:relative;all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;height:36px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid #2a3c44;color:var(--gain);font:500 13.5px/1 'Hanken Grotesk',Helvetica,Arial,sans-serif;transition:border-color .4s,color .4s}
.oc-kit:hover{border-color:#50798b}
.oc-kit.on{border-color:var(--paper);color:var(--paper)}
.oc-kit::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--coral)}
.oc-kit.on.run::after{animation:ockit var(--cyc,9s) linear forwards}
@keyframes ockit{to{width:100%}}
.oc-kit:focus-visible,.oc-views button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.oc-views{display:none}
.oc-pair{display:flex;justify-content:center;align-items:flex-start;width:100%}
.oc-ph{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.oc-ph .oc-phone{width:248px;border-radius:40px;padding:9px}
.oc-ph .oc-screen{border-radius:31px}
.oc-ph-fin{margin-left:-26px;margin-top:56px;position:relative;z-index:2}
.oc-ph-rec .oc-phone{transform:rotate(-2deg)}
.oc-ph-fin .oc-phone{transform:rotate(2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.oc-ph figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.oc-ph figcaption b{font-family:'Maitree',Georgia,serif;font-weight:300;font-size:19px;color:var(--paper)}
.oc-ph figcaption span{font-size:13px;color:#8fa3ab;max-width:220px;line-height:1.4}
.oc-ph-rec figcaption b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:8px;vertical-align:2px;animation:ocpulse 1.4s infinite}
.oc-hero .oc-tp{height:44%;padding-top:40px}
.oc-hero .oc-tp-roll{font-size:16.5px}
.oc-hero .oc-guide{top:calc(44% * .44)}
.oc-kitpill{background:rgba(20,20,20,.6);border-radius:999px;padding:5px 9px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-serchip{position:absolute;left:12px;bottom:92px;z-index:3;font:600 10px/1 'Hanken Grotesk',sans-serif;color:#fff;background:rgba(14,30,38,.7);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 9px;letter-spacing:.04em}
.oc-serchip i{display:inline-block;width:7px;height:7px;background:var(--sc,#ef4545);margin-right:6px;vertical-align:-.5px}

/* the finished video (brand colors come from --k-* set by the script) */
.fz{position:absolute;inset:0;font-family:var(--k-font);text-transform:var(--k-tt)}
.fz-bug{position:absolute;right:12px;top:14px;z-index:3;opacity:0;transition:opacity .6s}
.fz-bug img{display:block;height:var(--k-bugh,22px);width:auto}
.fz-low{position:absolute;left:12px;right:20px;bottom:102px;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.fz-low b,.fz-low span{transform:translateX(-120%);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fz-low b{background:var(--k-bar);color:var(--k-barInk);padding:7px 10px 6px;font:var(--k-w) 15px/1.05 var(--k-font);letter-spacing:var(--k-ls,0)}
.fz-low span{background:var(--k-sub);color:var(--k-subInk);padding:5px 10px;font:600 10.5px/1.2 var(--k-body);letter-spacing:.03em;transition-delay:.12s}
.fz-cap{position:absolute;left:12px;right:12px;bottom:206px;z-index:3;margin:0;text-align:center;font:var(--k-w) 19px/1.22 var(--k-font);color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);letter-spacing:var(--k-ls,0);min-height:48px}
.fz-cap span{padding:1px 3px;transition:color .15s,background-color .15s}
.fz-cap span.now{color:var(--k-now);background:var(--k-nowBg,transparent);text-shadow:none}
.fz-card{position:absolute;inset:0;z-index:5;background:var(--k-bg);display:flex;flex-direction:column;justify-content:center;padding:26px;gap:12px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;overflow:hidden}
.fz-card::before{content:"";position:absolute;inset:0;background:var(--k-cardimg,none) center/cover;opacity:.08}
.fz-card .n{position:relative;font:var(--k-w) 52px/1 var(--k-font);color:var(--k-acc)}
.fz-card .nm{position:relative;font:var(--k-w) 30px/1.02 var(--k-font);color:var(--k-ink);letter-spacing:var(--k-ls,0);clip-path:inset(0 100% 0 0);overflow-wrap:anywhere}
.fz-card .rule{position:relative;display:block;height:4px;width:0;background:var(--k-rule);transition:width .9s .5s cubic-bezier(.2,.8,.2,1)}
.fz-card .by{position:relative;font:500 11px/1.3 var(--k-body);color:var(--k-ink);opacity:.75;letter-spacing:.06em;text-transform:uppercase}
.fz-end{position:absolute;inset:0;z-index:6;background:var(--k-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s;padding:20px;text-align:center}
.fz-end img{width:var(--k-endw,150px);height:auto;transform:scale(.92);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fz-end span{white-space:pre-line;font:600 12px/1.5 var(--k-body);color:var(--k-endInk);letter-spacing:.04em;text-transform:none}
.fz.p-card .fz-card{opacity:1;visibility:visible}
.fz.p-card .fz-card .nm{animation:ocwipe 1s .15s cubic-bezier(.2,.8,.2,1) forwards}
.fz.p-card .fz-card .rule{width:64px}
.fz.p-run .fz-bug{opacity:1}
.fz.p-low .fz-low b,.fz.p-low .fz-low span{transform:none}
.fz.p-end .fz-end{opacity:1;visibility:visible}
.fz.p-end .fz-end img{transform:none}

/* the beta: three prices */
.oc-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-bottom:1px solid var(--gain)}
.oc-tier{display:flex;flex-direction:column;gap:6px;padding:20px 18px 20px 0}
.oc-tier+.oc-tier{padding-left:18px;border-left:1px solid var(--gain)}
.oc-tier .k{font-size:12.5px;line-height:1.35;color:var(--body);letter-spacing:.02em}
.oc-tier b{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:40px;line-height:1;color:var(--ink)}
.oc-tier b small{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:400;margin-left:5px;color:var(--body)}
.oc-tier .t{font-size:13px;color:var(--body)}
.oc-tier.hot b{color:var(--coral)}

/* the tour */
.oc-tour{padding-bottom:0}
.oc-tour-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.oc-steps{grid-column:span 6;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.oc-steps li{border-bottom:1px solid var(--gain)}
.oc-steps button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:24px 0 22px;position:relative;transition:padding .5s,background-color .5s}
.oc-steps .n{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:20px;color:var(--teal);padding-top:2px}
.oc-steps b{display:block;font-family:'Maitree',Georgia,serif;font-weight:200;font-size:27px;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.oc-steps small{display:block;font-size:15.5px;line-height:1.55;color:var(--body);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s,opacity .6s,margin .6s}
.oc-steps .bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.oc-steps .bar i{display:block;height:100%;width:100%;background:var(--coral);transform:scaleX(0);transform-origin:left}
.oc-steps li.on button{padding-left:16px;background:#fff}
.oc-steps li.on .n{color:var(--coral)}
.oc-steps li.on small{max-height:110px;opacity:1;margin-top:8px}
.oc-steps li.done .bar i{transform:scaleX(1);opacity:.25}
.oc-steps button:focus-visible{outline:2px solid var(--coral);outline-offset:2px}
.oc-tour-stage{grid-column:8/span 5;display:flex;flex-direction:column;align-items:center;gap:18px}
.oc-phone-tour{width:280px}
.oc-tour-ctl{display:flex;gap:8px}
.oc-tour-ctl .oc-mini{min-width:78px}
#tourScreen{cursor:pointer;outline:none}
#tourScreen:focus-visible{box-shadow:0 0 0 2px var(--coral)}
#tourScreen.paused::after{content:"paused · tap to play";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;background:rgba(14,30,38,.86);color:#fff;font:600 12px/1 'Hanken Grotesk',sans-serif;padding:10px 14px;border-radius:999px;white-space:nowrap}
.tz{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.tz.on{opacity:1;visibility:visible}
/* app screens (bahlr ink UI) */
.tz-app{position:absolute;inset:0;background:#0e1e26;color:#eff3f4;padding:46px 18px 18px;display:flex;flex-direction:column;gap:14px;font-family:'Hanken Grotesk',sans-serif}
.tz-app .hd{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #2a3c44;padding-bottom:10px}
.tz-app .hd b{font-family:'Maitree',Georgia,serif;font-weight:200;font-size:21px}
.tz-app .hd span{font-size:10px;color:#8fa3ab;letter-spacing:.06em;text-transform:uppercase}
.tk-row{display:flex;flex-direction:column;gap:7px}
.tk-l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#8fa3ab}
.tk-drop{height:62px;border:1.5px dashed #2a3c44;display:grid;place-items:center;position:relative;transition:border-color .5s,background-color .5s}
.tk-drop img{height:20px;opacity:0;transform:translateY(-34px) scale(1.15);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.tk-drop::after{content:"drop a PNG";position:absolute;font-size:11px;color:#5f7680;transition:opacity .3s}
.tz.a1 .tk-drop{border-color:#1F562B;background:#1F562B;border-style:solid}
.tz.a1 .tk-drop img{opacity:1;transform:none}
.tz.a1 .tk-drop::after{opacity:0}
.tk-sws{display:flex;gap:10px}
.tk-sw{display:flex;align-items:center;gap:8px;flex:1;border:1px solid #2a3c44;padding:7px}
.tk-sw i{width:24px;height:24px;background:#16262e;transform:scale(.4);transition:transform .5s cubic-bezier(.2,.8,.2,1),background-color .4s}
.tk-sw code{font:500 11px/1 ui-monospace,Menlo,monospace;color:#8fa3ab}
.tz.a2 .tk-sw i{transform:none;background:var(--c)}
.tz.a2 .tk-sw:nth-child(2) i{transition-delay:.25s;box-shadow:inset 0 0 0 1px #2a3c44}
.tk-fonts{display:flex;gap:6px}
.tk-fonts span{flex:1;border:1px solid #2a3c44;padding:9px 4px;text-align:center;font-size:11px;color:#8fa3ab;transition:border-color .4s,color .4s,background-color .4s}
.tk-fonts .pick{font-family:'AOS Montserrat',sans-serif;font-weight:900}
.tz.a3 .tk-fonts .pick{border-color:#ef4545;color:#fff;background:#132a34}
.tk-chips{display:flex;gap:6px;flex-wrap:wrap}
.tk-chips span{border:1px solid #2a3c44;padding:7px 9px;font:900 10px/1 'AOS Montserrat',sans-serif;color:#fff;opacity:0;transform:scale(.7);transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.tk-chips span:nth-child(2){transition-delay:.25s}.tk-chips span:nth-child(3){transition-delay:.5s}
.tz.a4 .tk-chips span{opacity:1;transform:none}
.tk-note{border:1px solid #2a3c44;background:#132a34;padding:10px;min-height:96px;font:400 12.5px/1.45 'Hanken Grotesk',sans-serif;color:#d8dcd7}
.tk-note .car{display:inline-block;width:1.5px;height:13px;background:#ef4545;vertical-align:-2px;animation:ocpulse .9s infinite}
.tk-go{align-self:flex-start;background:#ef4545;color:#fff;font:600 12px/1 'Hanken Grotesk',sans-serif;padding:11px 14px;transition:transform .2s,box-shadow .3s}
.tz.press .tk-go{transform:scale(.94);box-shadow:0 0 0 6px rgba(239,69,69,.25)}
.tk-out{display:flex;flex-direction:column;gap:2px;font:600 15px/1.25 'Hanken Grotesk',sans-serif}
.tk-out p{margin:0;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.tk-out p.in{opacity:1;transform:none}
.tk-out p.gap{height:6px}
.tk-out p.hl{color:#ef4545}
.tz-count{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(0,0,0,.35);font:200 120px/1 'Maitree',Georgia,serif;color:#fff;opacity:0;visibility:hidden;transition:opacity .3s}
.tz-count.on{opacity:1;visibility:visible}
.tz-count b{font-weight:200;animation:occount .7s ease-out}
@keyframes occount{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
.tz .oc-recpill{opacity:0;transition:opacity .3s}
.tz.rolling .oc-recpill{opacity:1}
.tz-sheet{position:absolute;left:0;right:0;bottom:0;z-index:9;background:#f3f4f5;color:#0e1e26;border-radius:22px 22px 0 0;padding:10px 16px 26px;transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.8,.2,1);font-family:'Hanken Grotesk',sans-serif}
.tz-sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:#c8ced1;margin:0 auto 12px}
.tz-sheet .t{font-size:12px;color:#5f7680;margin:0 0 10px}
.tz-sheet .r{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-top:1px solid #dde2e4;font-size:14px;font-weight:500;transition:background-color .3s}
.tz-sheet .r i{font-style:normal;color:#5f7680;font-size:12px}
.tz.sheet .tz-sheet{transform:none}
.tz.pick .tz-sheet .r:first-of-type{background:#e3e7e9}
.tz-toast{position:absolute;left:50%;top:52px;z-index:10;transform:translate(-50%,-14px);opacity:0;transition:opacity .4s,transform .5s;background:#0e1e26;color:#fff;border-radius:999px;padding:9px 14px;font:600 12px/1 'Hanken Grotesk',sans-serif;white-space:nowrap;display:flex;gap:8px;align-items:center}
.tz-toast i{width:16px;height:16px;border-radius:50%;background:#7da69f;display:grid;place-items:center;font-style:normal;font-size:10px}
.tz.toast .tz-toast{opacity:1;transform:translate(-50%,0)}
.tz-kept{position:absolute;left:16px;right:16px;top:96px;z-index:10;text-align:center;font:500 11px/1.4 'Hanken Grotesk',sans-serif;color:#fff;opacity:0;transition:opacity .6s;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tz.kept .tz-kept{opacity:1}

@media (max-width:1100px){
  .oc-hero .sv-hero-copy{grid-column:span 12}
  .oc-hero-stage{grid-column:span 12}
  .oc-steps,.oc-tour-stage{grid-column:span 12}
  .oc-tour-stage{margin-top:40px}
}
@media (max-width:760px){
  .oc-tiers{grid-template-columns:minmax(0,1fr)}
  .oc-tier,.oc-tier+.oc-tier{padding:16px 0;border-left:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .oc-tier+.oc-tier{border-top:1px solid var(--gain)}
  .oc-tier .k{flex:1 1 100%}
  .oc-tier b{font-size:34px}
  .oc-kits{gap:6px}
  .oc-kits-k{flex:1 1 100%;text-align:center;margin:0}
  .oc-kit{height:34px;padding:0 10px;font-size:12.5px}
  .oc-views{display:flex;border:1px solid #2a3c44}
  .oc-views button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 14px;font:500 13px/1 'Hanken Grotesk',sans-serif;color:#8fa3ab;transition:background-color .4s,color .4s}
  .oc-views button.on{background:var(--paper);color:var(--ink)}
  .oc-pair{display:grid}
  .oc-ph{grid-area:1/1;transition:opacity .6s,visibility .6s}
  .oc-ph-fin{margin:0}
  .oc-ph .oc-phone{width:262px;transform:none!important;box-shadow:none!important}
  #duo[data-view=rec] .oc-ph-fin,#duo[data-view=fin] .oc-ph-rec{opacity:0;visibility:hidden}
  .oc-ph figcaption b::before{display:none}
  .oc-steps button{padding:18px 0 16px;grid-template-columns:38px minmax(0,1fr)}
  .oc-steps b{font-size:22px}
  .oc-steps small{font-size:15px}
  .oc-steps li.on button{padding-left:12px}
  .oc-phone-tour{width:270px}
  .oc-tour-grid{display:flex;flex-direction:column}
  .oc-tour-stage{order:-1;margin:0 0 28px}
  .oc-steps{width:100%}
}
@media (prefers-reduced-motion:reduce){.oc-you svg,.oc-you .who,.oc-you .lamp,.tk-note .car,.oc-ph-rec figcaption b::before{animation:none}.oc-camk,.fz *,.tz,.tz *{transition:none!important}.oc-kit::after{display:none}}
.oc-tour-now{display:none;margin:0;font-size:14px;color:var(--body)}
.oc-tour-now b{font-family:'Maitree',Georgia,serif;font-weight:300;font-size:20px;color:var(--ink);margin-left:6px}
.oc-tour-now span{color:var(--coral)}
@media (max-width:760px){.oc-tour-now{display:block}}