/* Static razor hero shared by the homepage and landing preview. */
.ox-razor-story {
  --hero-blue:#6b8ba0;
  --hero-white:#fcfaf3;
  --stage-height:max(100svh,820px);
  background:var(--hero-blue);
  color:var(--hero-white);
}
.ox-razor-stage {position:relative;height:var(--stage-height);overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 76% 42%,#b2cad141,transparent 54%)}
.ox-razor-header {position:absolute;top:0;left:0;right:0;z-index:4;height:108px;display:flex;align-items:center;justify-content:center}
.ox-razor-header>a {display:block}
.ox-razor-brand {display:block;width:140px;height:47px;overflow:hidden}
.ox-razor-story :is(a,button):focus-visible {outline:3px solid var(--hero-white);outline-offset:6px}
.ox-razor-visual {position:absolute;right:2%;top:105px;bottom:30px;width:50%;margin:0;display:flex;align-items:center;justify-content:center;z-index:1}
.ox-razor-visual .hero-diagram {width:100%;height:100%}
.ox-razor-copy {position:absolute;left:6%;top:18%;width:43%;max-width:610px;z-index:2}
.ox-razor-copy #hero-title {font-size:clamp(46px,4.7vw,68px);font-weight:500;line-height:1.02;letter-spacing:-.055em;margin:0 0 26px;color:var(--hero-white)}
.ox-razor-copy #hero-title>span {display:block}
.ox-razor-copy #hero-title em {display:block;font-style:normal;font-weight:500;color:#dfebeb;margin-top:.16em}
.ox-razor-copy .hero-problem {font-size:19px;line-height:1.4;margin-bottom:12px}
.ox-razor-copy .hero-problem strong {font-weight:600}
.ox-razor-copy .hero-explanation {font-size:16px;line-height:1.65;max-width:455px;color:#f3f5f4}
.ox-razor-copy .hero-promise {font-size:16px;line-height:1.5;margin-top:18px}
.ox-razor-copy .hero-promise strong {font-weight:650}
.ox-razor-copy>.button {background:var(--hero-white);color:#1b303c;border-color:var(--hero-white);font-size:13px;padding:14px 20px;min-height:48px;margin:24px 0 12px;gap:40px}
.ox-razor-copy>.button:hover {background:#e6eff1;border-color:#e6eff1}
.ox-razor-copy>.shipping-copy {font-size:12px;line-height:1.5;margin:0}
.ox-razor-copy .hero-price-increase {max-width:330px;margin-top:18px;padding-top:14px;border-color:#ffffff3b}
.ox-razor-copy .price-increase-heading {font-size:13px}
.ox-razor-copy .price-increase-date {font-size:11px;color:#e8eef0}
.ox-razor-copy .price-countdown {margin-top:12px}
.ox-razor-copy .price-countdown b {font-size:23px}
.ox-razor-copy .price-countdown small {font-size:10px;color:#e8eef0}
.ox-razor-copy .price-countdown>span+span {border-color:#ffffff3b}
@media(min-width:1600px) {.ox-razor-copy{left:8%}.ox-razor-visual{right:4%;width:46%}}
@media(max-width:1100px) and (min-width:761px) {
  .ox-razor-copy{left:5%;width:45%;top:17%}
  .ox-razor-copy #hero-title{font-size:clamp(43px,4.7vw,53px)}
  .ox-razor-copy .hero-explanation{font-size:15px;max-width:370px}
  .ox-razor-visual{right:-3%;width:53%;top:130px;bottom:55px}
}
@media(max-width:760px) {
  .ox-razor-stage{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:104px 7% 30px;background:radial-gradient(ellipse at 50% 75%,#b2cad141,transparent 60%)}
  .ox-razor-header{height:84px}.ox-razor-brand{width:120px;height:41px}
  .ox-razor-copy{position:relative;order:1;top:auto;left:auto;width:100%;max-width:none}
  .ox-razor-copy #hero-title{font-size:clamp(37px,9.6vw,49px);line-height:1.02;margin-bottom:19px}
  .ox-razor-copy #hero-title em{margin-top:.12em}
  .ox-razor-copy .hero-problem{font-size:15px;line-height:1.4;margin-bottom:9px}
  .ox-razor-copy .hero-explanation{font-size:13px;line-height:1.55;max-width:430px}
  .ox-razor-copy .hero-promise{font-size:14px;margin-top:12px}
  .ox-razor-copy>.button{margin:17px 0 10px;font-size:12px;min-height:44px;padding:11px 17px;gap:30px}
  .ox-razor-copy>.shipping-copy{font-size:10px}
  .ox-razor-copy .hero-price-increase{margin-top:12px;padding-top:10px;max-width:285px}
  .ox-razor-copy .price-increase-heading{font-size:11px}.ox-razor-copy .price-increase-date{font-size:10px;margin-top:4px}
  .ox-razor-copy .price-countdown b{font-size:20px}.ox-razor-copy .price-countdown small{font-size:9px}
  .ox-razor-visual{position:relative;order:2;inset:auto;width:calc(100% + 10vw);margin:15px -5vw 0;aspect-ratio:680/760;flex-shrink:0}
  .ox-razor-visual .hero-diagram{height:auto}
}
@media(max-width:380px) {.ox-razor-copy #hero-title{font-size:35px}.ox-razor-stage{padding-top:98px}}