/* Homepage opening: white hero with a live browser, then the problems checklist on the same white page. */

.ox-stack{
  --ox-navy:#042953;
  --ox-blue:#0062D6;
  --ox-sky:#44ADFE;
  --ox-slate:#6C7E8F;
  position:relative;
}
.ox-stack :focus-visible{outline:3px solid var(--ox-sky);outline-offset:3px}
.ox-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ox-diamond{flex:none;width:.5rem;height:.5rem;transform:rotate(45deg);background:var(--ox-sky)}

/* Buttons */
.ox-btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.25rem;padding:.8rem 1.4rem;border:1px solid transparent;border-radius:999px;font-size:.95rem;font-weight:700;line-height:1.2;transition:transform .25s cubic-bezier(.2,.8,.2,1),background-color .25s,border-color .25s,box-shadow .25s}
.ox-btn svg{flex:none;width:1.1rem;height:1.1rem}
.ox-btn--primary{background:var(--ox-blue);color:#fff;box-shadow:0 .7rem 1.5rem -.5rem #0062d699,inset 0 1px 0 #ffffff33}
.ox-btn--primary:hover{background:#0052b4;transform:translateY(-2px);box-shadow:0 1rem 2rem -.6rem #0062d6b3,inset 0 1px 0 #ffffff33}
.ox-btn-meta{padding-left:.7rem;border-left:1px solid #ffffff4d;font-weight:500;font-variant-numeric:tabular-nums;opacity:.92}
.ox-btn--ghost{border-color:#c5d6e5;background:#fff;color:var(--ox-navy);box-shadow:0 .3rem 1rem #04295308}
.ox-btn--ghost:hover{border-color:var(--ox-navy);transform:translateY(-2px)}
.ox-btn--light{background:#fff;color:var(--ox-navy);box-shadow:0 .9rem 2.2rem -.7rem #44adfe80}
.ox-btn--light:hover{background:#e9f5ff;transform:translateY(-2px)}
.ox-btn--ghost svg,.ox-btn--light svg{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ox-btn--ghost:hover svg,.ox-btn--light:hover svg{transform:translateX(3px)}

/* ---------- Hero ---------- */
.ox-hero{position:relative}
.ox-hero-inner{
  position:relative;
  isolation:isolate;
  overflow-x:clip; /* the browser's shadow spills down into the next section */
  min-height:100lvh;
  padding:clamp(4.25rem,11vh,7.5rem) 0 clamp(1rem,2.2vh,1.5rem);
  background:#fff;
}
.ox-hero-inner::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background-image:radial-gradient(circle,#0429531c 1px,transparent 1.3px);
  background-size:1.5rem 1.5rem;
  -webkit-mask-image:radial-gradient(ellipse 62% 42% at 50% 20%,#000 15%,transparent 75%);
  mask-image:radial-gradient(ellipse 62% 42% at 50% 20%,#000 15%,transparent 75%);
}
.ox-hero-inner::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:50%;
  width:min(72rem,150vw);
  aspect-ratio:2;
  transform:translate(-50%,-56%);
  background:radial-gradient(ellipse at center,#44adfe24,transparent 66%);
}

.ox-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
.ox-hero-title{margin:0;font-size:1rem;letter-spacing:normal;line-height:1}
.ox-title-visual{display:flex;flex-direction:column;align-items:center;gap:clamp(1.4rem,3.4vh,2.25rem)}
/* Wordmark: the Onyx logo traced to SVG, so each letter, the cube and SOLUTIONS can animate on their own. */
.ox-wordmark{display:block;width:clamp(14rem,70vw,35rem)}
.ox-logo{display:block;width:100%;height:auto;overflow:visible}
.ox-logo-onyx{fill:var(--ox-navy)}
.ox-logo-cube{fill:var(--ox-sky)}
.ox-logo-solutions{fill:var(--ox-slate)}
.ox-logo-letter,.ox-logo-rule,.ox-logo-sub>g{transform-box:fill-box;transform-origin:50% 100%}
.ox-logo-cube{transform-box:fill-box;transform-origin:50% 50%}
.ox-logo-rule{transform-origin:0 50%}
.ox-tagline{display:block;font-family:Manrope,sans-serif;font-size:clamp(1.25rem,4.4vw,1.95rem);font-weight:700;line-height:1.15;letter-spacing:-.035em;color:var(--ox-navy);text-wrap:balance}
.ox-tagline em{display:block;margin-top:.1em;font-family:'Instrument Serif',Georgia,serif;font-size:1.3em;font-style:italic;font-weight:400;line-height:1.05;letter-spacing:-.01em;color:var(--ox-blue)}
.ox-hero-sub{max-width:36rem;margin:clamp(1rem,2.4vh,1.5rem) auto 0;color:#4f6478;font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;text-wrap:pretty}
.ox-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;width:100%;margin-top:clamp(1.5rem,3.2vh,2.2rem)}
.ox-hero-actions .ox-btn{flex:1 1 100%}

/* Browser window: a plain macOS window, sized so it settles fully on screen. */
.ox-browser-stage{
  --chrome:2.5rem;
  position:relative;
  width:min(calc(100% - 2rem),92rem,calc((100svh - var(--chrome) - 4rem) * 16 / 9));
  margin:clamp(2.25rem,5vh,3.5rem) auto 0;
  perspective:1800px;
}
.ox-browser-stage::before{content:"";position:absolute;z-index:-1;inset:10% 3% -8%;border-radius:50%;background:radial-gradient(ellipse at 50% 55%,#44adfe5c,#0062d621 45%,transparent 70%);filter:blur(2.5rem)}
.ox-browser{
  overflow:hidden;
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 0 0 1px #00000024,0 .15rem .4rem #04295312,0 1.6rem 3rem -1rem #0429534d,0 4rem 7rem -2.5rem #04295359;
  transform-origin:50% 0;
  transform:rotateX(calc(var(--ox-tilt,0) * 22deg)) scale(calc(1 - var(--ox-tilt,0) * .1));
  will-change:transform;
}
.ox-browser-bar{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,28rem) minmax(max-content,1fr);align-items:center;gap:.75rem;height:var(--chrome);padding:0 .35rem 0 .85rem;border-bottom:1px solid #d6d9de;background:linear-gradient(#f6f6f7,#ebebed)}
.ox-traffic{display:flex;gap:.45rem;justify-self:start}
.ox-traffic i{width:.62rem;height:.62rem;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px #00000026}
.ox-traffic i:nth-child(2){background:#febc2e}
.ox-traffic i:nth-child(3){background:#28c840}
.ox-address{display:flex;align-items:center;justify-content:center;gap:.4rem;min-width:0;height:1.65rem;padding:0 .75rem;border-radius:.45rem;background:#0000000f;color:#2f3742;font-size:.72rem;font-weight:500}
.ox-address svg{flex:none;width:.7rem;height:.7rem;color:#6b7380}
.ox-address span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ox-browser-visit{display:inline-flex;align-items:center;align-self:stretch;justify-self:end;gap:.35rem;padding:0 .55rem;color:#59616d;font-size:.74rem;font-weight:600;transition:color .2s}
.ox-browser-visit:hover{color:var(--ox-blue)}
.ox-browser-visit svg{flex:none;width:.9rem;height:.9rem}
.ox-visit-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ox-browser-screen{position:relative;aspect-ratio:16/9;background:#0b322a}
.ox-browser-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ox-screen-chip{position:absolute;left:clamp(.6rem,1.5vw,1rem);bottom:clamp(.6rem,1.5vw,1rem);display:inline-flex;align-items:center;gap:.5rem;max-width:calc(100% - 5rem);min-height:2.25rem;padding:.4rem .85rem .4rem .7rem;border:1px solid #ffffff40;border-radius:999px;background:#042953a6;color:#e8f3ff;font-size:.76rem;line-height:1.2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ox-screen-chip strong{color:#fff}
.ox-chip-prefix{display:none}
.ox-live-dot{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#22c55e;box-shadow:0 0 0 .2rem #22c55e2e;animation:oxPulse 2.4s ease-in-out infinite}

.ox-video-toggle{position:absolute;right:clamp(.6rem,1.5vw,1rem);bottom:clamp(.6rem,1.5vw,1rem);display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid #ffffff59;border-radius:50%;background:#04295399;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,transform .2s}
.ox-video-toggle:hover{background:var(--ox-blue);transform:scale(1.06)}
.ox-icon-play{display:block;width:0;height:0;margin-left:2px;border-top:.38rem solid transparent;border-bottom:.38rem solid transparent;border-left:.58rem solid currentColor}
.ox-icon-pause{display:none;width:.6rem;height:.75rem;border-left:.2rem solid currentColor;border-right:.2rem solid currentColor}
.is-playing .ox-icon-play{display:none}
.is-playing .ox-icon-pause{display:block}

/* ---------- Problem ---------- */
.ox-sheet{position:relative;isolation:isolate;overflow-x:clip;padding:clamp(3.5rem,7vw,6rem) 0 clamp(1rem,2vw,1.5rem);color:var(--ox-navy)}
.ox-problem{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.ox-problem-copy{min-width:0}
.ox-sheet-eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1rem;color:var(--ox-blue);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ox-sheet h2{max-width:20ch;margin:0;color:var(--ox-navy);font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.ox-sheet h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--ox-blue)}

.ox-checklist-hint{margin:clamp(1.6rem,3.5vw,2.2rem) 0 0;color:#66798c;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ox-checklist{display:grid;gap:.75rem;width:100%;max-width:36rem;margin:.9rem 0 0;padding:0;list-style:none}
.ox-check{display:flex;align-items:center;gap:.85rem;width:100%;height:100%;min-height:4.25rem;padding:.9rem 1.1rem;border:1px solid #d6e3ee;border-radius:1rem;background:#fff;box-shadow:0 .6rem 1.5rem -1.1rem #04295340;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,background-color .25s,box-shadow .25s,transform .25s cubic-bezier(.2,.8,.2,1)}
.ox-check:hover{border-color:#a9c2d8;transform:translateY(-2px)}
.ox-check[aria-pressed=true]{border-color:var(--ox-sky);background:#f2f9ff;box-shadow:0 0 0 3px #44adfe29,0 .8rem 1.6rem -1.1rem #0062d666}
.ox-check-box{display:grid;place-items:center;flex:none;width:1.5rem;height:1.5rem;border:1.5px solid #a9c2d8;border-radius:.4rem;color:var(--ox-navy);transition:background-color .25s,border-color .25s,transform .25s}
.ox-check-box svg{width:1rem;height:1rem;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s ease .05s}
.ox-check[aria-pressed=true] .ox-check-box{border-color:var(--ox-sky);background:var(--ox-sky);transform:scale(1.06)}
.ox-check[aria-pressed=true] .ox-check-box svg{stroke-dashoffset:0}
.ox-check-title{flex:1;min-width:0;color:var(--ox-navy);font-family:Manrope,sans-serif;font-size:clamp(1rem,1.3vw,1.1rem);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.ox-check-num{flex:none;color:#8aa0b4;font:700 .72rem Manrope,sans-serif;letter-spacing:.12em}

/* Phone: Balsam Builders, a real site we built */
.ox-phone-stage{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:1rem 0}
.ox-phone-stage::before{content:"";position:absolute;z-index:-1;top:6%;left:50%;width:min(32rem,115%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#44adfe33,#44adfe12 45%,transparent 68%);transform:translateX(-50%);filter:blur(1.5rem)}
.ox-phone{position:relative;width:clamp(13rem,56vw,17.5rem);padding:.55rem;border-radius:2.85rem;background:linear-gradient(150deg,#46525f,#141a22 42%,#2b3440);box-shadow:inset 0 0 0 1.5px #66768a,inset 0 0 0 .3rem #0b0f15,0 2.5rem 4.5rem -1.5rem #0429537a,0 0 0 1px #00000080}
.ox-phone::before,.ox-phone::after{content:"";position:absolute;width:.2rem;border-radius:.2rem;background:#3a4553}
.ox-phone::before{top:7.5rem;left:-.2rem;height:3.4rem}
.ox-phone::after{top:8.5rem;right:-.2rem;height:4.4rem}
.ox-phone-screen{position:relative;overflow:hidden;border-radius:2.35rem;background:#161616}
.ox-phone-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:2.3rem;padding:.2rem 1.35rem 0 1.6rem;background:#161616;color:#fff;font:600 .7rem/1 'DM Sans',sans-serif}
.ox-phone-island{position:absolute;top:.5rem;left:50%;width:30%;height:1.25rem;border-radius:1rem;background:#000;transform:translateX(-50%)}
.ox-phone-status-icons{display:flex;align-items:center;gap:.25rem}
.ox-phone-status-icons svg{display:block;height:.6rem;width:auto}
.ox-phone-screen video{display:block;width:100%;height:auto;aspect-ratio:13/24;object-fit:cover;background:#161616}
.ox-phone-screen::after{content:"";position:absolute;bottom:.4rem;left:50%;width:34%;height:.24rem;border-radius:1rem;background:#ffffffb3;transform:translateX(-50%);mix-blend-mode:difference}
.ox-phone-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 1rem;margin-top:1.5rem;color:#5b6f82;font-size:.82rem;line-height:1.4;text-align:center}
.ox-phone-meta strong{color:var(--ox-navy)}
.ox-phone-meta .ox-video-toggle{position:static;width:2.75rem;height:2.75rem;border-color:#c5d6e5;background:#fff;color:var(--ox-navy)}
.ox-phone-meta .ox-video-toggle:hover{border-color:var(--ox-blue);background:var(--ox-blue);color:#fff}

/* Arrow down into the solution section */
.ox-bridge{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:fit-content;margin:clamp(1.5rem,3vw,2.25rem) auto 0;padding:0 .5rem .5rem;border-radius:.6rem;color:var(--ox-blue);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ox-bridge::before{content:"";width:1px;height:clamp(2.25rem,4.5vw,3.25rem);background:linear-gradient(#44adfe00,var(--ox-sky))}
.ox-bridge-arrow{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--ox-blue);color:#fff;box-shadow:0 .8rem 1.6rem -.6rem #0062d699;transition:background-color .2s;animation:oxBob 2.2s ease-in-out infinite}
.ox-bridge-arrow svg{width:1.2rem;height:1.2rem}
.ox-bridge:hover .ox-bridge-arrow{background:#0052b4}
.ox-bridge-picked,.ox-sheet.has-picks .ox-bridge-default{display:none}
.ox-sheet.has-picks .ox-bridge-picked{display:inline}

/* Motion */
@keyframes oxRise{from{opacity:0;transform:translateY(1.1rem);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes oxStageIn{from{opacity:0;transform:translateY(3.5rem)}to{opacity:1;transform:none}}
@keyframes oxPulse{0%,100%{box-shadow:0 0 0 .2rem #22c55e2e}50%{box-shadow:0 0 0 .38rem #22c55e14}}
@keyframes oxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(.35rem)}}
@keyframes oxShow{to{opacity:1}}
@keyframes oxRuleShow{to{transform:none}}
@keyframes oxLetterIn{from{opacity:0;transform:translateY(12%) scale(.94)}to{opacity:1;transform:none}}
@keyframes oxSubIn{from{opacity:0;transform:translateX(-40%)}to{opacity:1;transform:none}}
@keyframes oxImpact{0%,100%{transform:none}30%{transform:scale(1.025,.95)}}
/* The cube tumbles in from above, lands in the Y and settles with two small bounces. */
@keyframes oxCubeDrop{
  0%{opacity:0;transform:translateY(-330%) rotate(-180deg);animation-timing-function:cubic-bezier(.5,0,.85,.5)}
  5%{opacity:1}
  68%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
  80%{transform:translateY(-24%) rotate(10deg);animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  90%{transform:translateY(0) rotate(0);animation-timing-function:cubic-bezier(.15,.6,.35,1)}
  95%{transform:translateY(-6%) rotate(-2deg);animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  100%{opacity:1;transform:none}
}
@keyframes oxCaret{0%,100%{opacity:1}50%{opacity:0}}

/* Typed opening. Armed by the head script (.ox-js); if home-hero.js never
   starts (.ox-run), the delayed fallbacks reveal everything. */
.ox-ch{position:relative}
.ox-tw{white-space:nowrap}
.ox-js [data-ox-type]:not(.is-split),.ox-js .ox-ch,.ox-js .ox-after-type{opacity:0}
.ox-js .ox-ch.is-on{opacity:1}
.ox-ch.is-caret::after{content:"";position:absolute;top:.08em;bottom:.04em;right:-.12em;width:max(2px,.06em);border-radius:1px;background:var(--ox-sky);animation:oxCaret .85s steps(1) infinite}
.ox-js .ox-logo-letter,.ox-js .ox-logo-cube,.ox-js .ox-logo-sub>g{opacity:0}
.ox-js .ox-logo-rule{transform:scaleX(0)}
.ox-logo-letter.is-on{opacity:1;animation:oxLetterIn .4s cubic-bezier(.2,.9,.3,1.2) both}
.ox-logo-y.is-hit{animation:oxImpact .4s cubic-bezier(.3,.7,.4,1)}
.ox-logo-cube.is-on{opacity:1;animation:oxCubeDrop 1.1s both}
.ox-logo-rule.is-on{transform:none;transition:transform .6s cubic-bezier(.65,0,.25,1)}
.ox-logo-sub>g.is-on{opacity:1;animation:oxSubIn .45s cubic-bezier(.2,.8,.2,1) both}
.ox-js:not(.ox-run) [data-ox-type],.ox-js:not(.ox-run) .ox-after-type{animation:oxShow 0s 4s forwards}
.ox-js:not(.ox-run) .ox-logo-letter,.ox-js:not(.ox-run) .ox-logo-cube,.ox-js:not(.ox-run) .ox-logo-sub>g{animation:oxShow 0s 4s forwards}
.ox-js:not(.ox-run) .ox-logo-rule{animation:oxRuleShow 0s 4s forwards}
.ox-js .ox-hero.is-ui .ox-after-type{animation:oxRise .9s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
.ox-js .ox-hero.is-ui .ox-browser-stage{animation-name:oxStageIn;animation-duration:1.15s}
/* Problem: each piece rises in as it scrolls into view; the italic half of the headline lands a beat later. */
.ox-sheet.is-armed .ox-reveal{opacity:0;transform:translateY(2rem);filter:blur(6px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1),filter .9s ease;transition-delay:var(--d,0s)}
.ox-sheet.is-armed .ox-reveal.is-in{opacity:1;transform:none;filter:none}
.ox-sheet.is-armed h2.ox-reveal em{opacity:0;filter:blur(6px);transition:opacity .8s ease,filter .8s ease;transition-delay:calc(var(--d,0s) + .35s)}
.ox-sheet.is-armed h2.ox-reveal.is-in em{opacity:1;filter:none}

@media (min-width:30rem){
  .ox-hero-actions .ox-btn{flex:0 1 auto}
}
@media (min-width:40rem){
  .ox-browser-stage{--chrome:2.75rem}
  .ox-traffic{gap:.5rem}
  .ox-traffic i{width:.75rem;height:.75rem}
  .ox-address{height:1.8rem;font-size:.78rem}
  .ox-visit-label{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .ox-chip-prefix{display:inline}
}
@media (min-width:64rem){
  .ox-problem{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .ox-phone-stage{order:-1}
  .ox-phone{width:clamp(16rem,21vw,18rem)}
  .ox-browser-stage{width:min(calc(100% - 4rem),92rem,calc((100svh - var(--chrome) - 4rem) * 16 / 9))}
}
@media (prefers-reduced-motion:reduce){
  .ox-hero-inner,.ox-browser{transform:none;border-radius:0}
  .ox-browser{border-radius:.75rem}
  .ox-live-dot,.ox-bridge-arrow{animation:none}
  .ox-sheet.is-armed .ox-reveal,.ox-sheet.is-armed h2.ox-reveal em{opacity:1;transform:none;filter:none;transition:none}
  .ox-btn,.ox-check,.ox-check-box,.ox-check-box svg,.ox-video-toggle{transition:none}
  .ox-check:hover{transform:none}
}