/* The home page (index.html), with the wheel in the hero. Loaded after css/home.css; changes nothing the other pages load.
   The hero's words stay as they are. On a wide screen they sit on the wheel's stage, where the page grid puts them; on a phone they
   sit above it, in the page. The default here is the final state too: no JS shows the words and the still wheel. */

/* ---------- 1. Hero ---------- */
.hx-up{--hx-bar:68px;--hx-gy:clamp(8px,2.2vh,24px);--hx-pad:clamp(28px,4.2vw,56px)}
.hx-lay{width:min(1200px,100% - 48px);margin-inline:auto;padding-block:24px 20px}
@media (min-width:900px),(max-width:899.98px) and (max-height:599.98px) and (min-aspect-ratio:1/1){
  .js-motion .hx-over{position:sticky;top:var(--hx-bar);height:0;z-index:5;pointer-events:none}
  .js-motion .hx-lay{position:absolute;left:0;right:0;top:var(--hx-gy);width:min(1200px,100% - 32px - 2*var(--hx-pad));height:calc(100vh - var(--hx-bar) - 2*var(--hx-gy));padding:0;display:flex;align-items:center}
  @supports (height:1svh){.js-motion .hx-lay{height:calc(100svh - var(--hx-bar) - 2*var(--hx-gy))}}
  .js-motion .hx-copy{width:min(540px,44%);pointer-events:auto;will-change:transform,opacity}
  .js-motion .hx-lede{margin-top:clamp(14px,2.4vh,26px)}
  .js-motion .hx-cta{margin-top:clamp(18px,3vh,34px)}
  .js-motion .hx-note{margin-top:clamp(8px,1.4vh,16px)}
}
/* Before the wheel has mounted: its stage and its height, so nothing moves. */
@media all{
.js-motion .hx-up .rfw--static{display:flow-root;height:calc(100vh - var(--hx-bar) + 100vh*var(--rfw-run))}
@supports (height:1svh){.js-motion .hx-up .rfw--static{height:calc(100svh - var(--hx-bar) + 100svh*var(--rfw-run))}}
.js-motion .hx-up .rfw--static .rfw-pin{display:none}
.js-motion .hx-up .rfw--static::before{content:"";display:block;position:sticky;top:calc(var(--hx-bar) + var(--hx-gy));width:var(--rfw-grid);height:calc(100vh - var(--hx-bar) - 2*var(--hx-gy));margin:var(--hx-gy) auto 0;border-radius:var(--rf-r-stage);background:var(--tint)}
}
/* Reduced motion and no JavaScript, wide: the words and the still wheel side by side on one stage, every name below. */
@media (min-width:900px){
  html:not(.js-motion) .hx-up{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:0 clamp(32px,4vw,64px);width:min(1640px,100% - 32px);margin:clamp(8px,2.2vh,24px) auto 0;padding:clamp(28px,4.4vw,64px) max(var(--hx-pad),(100% - 1200px)/2);border-radius:var(--rf-r-stage);background:var(--tint)}
  html:not(.js-motion) .hx-over,html:not(.js-motion) .hx-up .rfw--static,html:not(.js-motion) .hx-up .rfw-pin{display:contents}
  html:not(.js-motion) .hx-lay{width:auto;padding:0}
  html:not(.js-motion) .hx-up .rfw-wheel{grid-column:2;grid-row:1}
  html:not(.js-motion) .hx-up .rfw-stage{grid-column:1/-1;margin-top:clamp(32px,4vw,56px)}
}

/* ---------- the step 2 screen: Send waits for delivery ---------- */
.a-acts2{align-items:center}
.a-btn--off{background:var(--app-sunken);border-color:var(--app-sunken);color:var(--app-ink-3);box-shadow:none;cursor:default}
.a-why{font-size:13.5px;color:var(--app-ink-3)}

/* ---------- use cases: each one wears the colour of its piece of the wheel ---------- */
/* What the wheel no longer stops on: its words and its sample card. */
.uc{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:clamp(48px,6vw,80px) 0 0;padding:0}
.uc-i{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:center;padding:clamp(20px,2.2vw,30px);border-radius:var(--r);background:var(--tint)}
.uc-t h3{display:flex;align-items:center;gap:9px}
.uc-t h3::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--pc)}
.uc-t p{margin-top:8px;font-size:16px;line-height:1.42;color:var(--ink-2);text-wrap:pretty}
@media (max-width:1080px){
  .uc-i{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:899.98px){
  /* A phone: one swipe, one card at a time, the next one showing at the edge. */
  .uc{display:flex;gap:10px;margin:26px -20px 0;padding:0 20px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .uc::-webkit-scrollbar{display:none}
  .uc-i{flex:none;display:block;width:min(84vw,340px);padding:18px;scroll-snap-align:start}
  .uc-t p{margin-top:6px;font-size:16px;min-height:4.3em}
  .uc-card{margin-top:12px}
}

/* ---------- founder: a wall of grey text on white becomes a stage, the quote on one side and the story on the other ---------- */
#founder{background:#fff;padding-block:0 clamp(56px,7vw,96px)}
#founder .fd-in{width:min(1640px,100% - 32px);max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);grid-template-rows:auto auto 1fr;column-gap:clamp(40px,5vw,88px);align-items:start;padding:clamp(56px,6.4vw,96px) max(clamp(28px,4.2vw,56px),(100% - 1200px)/2);border-radius:var(--rf-r-stage);background:var(--rf-brand-700);color:#fff}
#founder .kick{grid-column:1;color:var(--rf-link-on-navy)}
#founder .fd-q{grid-column:1;grid-row:2;font-size:clamp(40px,4.5vw,68px);line-height:1.06;color:#fff;transform-origin:0 60%}
#founder .fd-note,#founder .fd-short,#founder .fd-more,#founder .fd-sig{grid-column:2}
#founder .fd-note{grid-row:1/span 3;margin-top:0;max-width:none;font-size:clamp(17px,1.32vw,19px);line-height:1.58;color:var(--rf-on-navy)}
#founder .fd-note a{color:#fff}
#founder .fd-sig{grid-column:1;grid-row:3;align-self:end;margin-top:32px}
#founder .fd-mono{background:#fff;color:var(--rf-brand-700)}
#founder .fd-sig span span{color:var(--rf-on-navy)}
@media (max-width:899.98px){
  #founder{padding-block:0 28px}
  #founder .fd-in{width:calc(100% - 16px);display:block;padding:40px 16px 32px}
  #founder .fd-q{font-size:clamp(32px,9vw,46px);line-height:1.08}
  #founder .fd-short,#founder .fd-note{margin-top:18px;font-size:18px;line-height:1.42;color:var(--rf-on-navy)}
  #founder .fd-more{color:#fff;text-decoration:underline;text-underline-offset:3px}
  #founder .fd-sig{margin-top:18px}
}

/* ---------- plans: each card shows its one difference ---------- */
.pm{margin:18px 0 26px}
.pm-n{font-size:17px;line-height:1.3}
.pm-n b{font-weight:650;font-variant-numeric:tabular-nums}
.pm-bar{display:block;height:8px;margin-top:10px;border-radius:4px;background:rgba(16,38,77,.1);overflow:hidden}
.pm-bar i{display:block;width:calc(var(--v)*100%);height:100%;border-radius:4px;background:var(--rf-brand-700);transform-origin:0 50%}
.featured .pm-bar{background:rgba(255,255,255,.22)}
.featured .pm-bar i{background:#fff}
.pl-all{position:relative;z-index:1;margin-top:16px;padding:clamp(24px,2.6vw,36px);border-radius:var(--r);background:#fff;box-shadow:var(--rf-sh-card)}
.pl-all .checks{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;margin-top:16px}
.pl-all .checks li{gap:10px;font-size:16px;line-height:1.35;letter-spacing:0}
.pl-all .checks .ico{flex:none;width:20px;height:20px;margin-top:1px}
@media (max-width:1080px){.pl-all .checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899.98px){.pl-all{display:none}}

/* ---------- phone header: Pricing instead of a second trial button while the hero button shows ---------- */
@media (max-width:899.98px){
  .js .site-header.hero-btn-in .nav-price{display:inline-flex}
  .js .site-header.hero-btn-in .btn-sm{display:none}
  /* the open menu lists Pricing itself, so the header pill steps aside */
  .js body.menu-open .site-header.hero-btn-in .nav-price{display:none}
}

/* ---------- header and footer links land clear of the fixed header ---------- */
#stores,#founder,#faq{scroll-margin-top:68px}

/* ---------- under the wheel: what each part does (the moving wheel names only three; the still version already lists all fifteen) ---------- */
.sy-parts{display:none}
body:has(.rfw:not(.rfw--static)) .sy-parts{display:block;padding:8px 0 clamp(32px,4vw,56px)}
.sy-ph{margin:0 0 4px;font-size:clamp(24px,3vw,32px);line-height:1.15;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.sy-eye{margin:24px 0 0;font-size:15px;font-weight:500;color:var(--ink-2)}
.sy-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:8px 0 0;padding:0;list-style:none}
.sy-list li{padding:11px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.3}
.sy-list b{display:block;font-weight:600;letter-spacing:-.01em}
.sy-list span{display:block;margin-top:2px;font-size:16px;color:var(--ink-2)}
@media (max-width:899.98px){.sy-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- order-to-paid stage, wide: words that slide past the window edge fade out instead of being cut off ---------- */
@media (min-width:900px) and (min-height:600px){
  .js-motion .jr-view{--jr-fade:clamp(16px,calc((100vw - 1200px) / 2 - 8px),72px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--jr-fade),#000 calc(100% - var(--jr-fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--jr-fade),#000 calc(100% - var(--jr-fade)),transparent)}
}
/* From 1181px the panels are narrower than the window, so the track rests 96px in and the fade (88px) never touches a resting panel. */
@media (min-width:1181px) and (min-height:600px){
  .js-motion .jr-view{--jr-fade:calc(max(96px,(100vw - 1200px) / 2) - 8px)}
  .js-motion .jr-track{padding:0 max(96px,calc((100vw - 1200px) / 2))}
}

/* ---------- tablet hero: the button and its link share a row, so the wheel and its scroll cue sit higher ---------- */
@media (min-width:600px) and (max-width:899.98px){
  .hx-up .hx-cta{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 24px;margin-top:18px}
  .hx-up .hx-cta .btn{width:auto}
  .hx-up .hx-note{margin-top:8px}
}

/* ---------- a short screen: a phone held sideways (narrow, short, wider than tall), or a wide window under 500 px tall (the ones that used to get the still). A wide window 500 px or taller keeps the page as it was. The words beside the wheel, sized to the height ---------- */
@media (max-width:899.98px) and (max-height:599.98px) and (min-aspect-ratio:1/1),(min-width:900px) and (max-height:499.98px){
  .js-motion .hx-copy{width:min(540px,46%)}
  .home .hx-up .hx-copy .kick{margin-bottom:clamp(6px,1.6vh,12px);padding-block:clamp(3px,.9vh,6px);font-size:clamp(13px,3.3vh,15px)}
  .hx-up h1{font-size:clamp(26px,7.6vh,48px);line-height:1.06}
  .js-motion .hx-up .hx-lede{margin-top:clamp(6px,1.6vh,14px);font-size:clamp(14px,3.6vh,18px);line-height:1.36}
  .js-motion .hx-up .hx-cta{margin-top:clamp(8px,2.2vh,18px);flex-direction:row;align-items:center;gap:4px 18px}
  .js-motion .hx-up .hx-cta .btn{width:auto;min-height:0;padding-block:clamp(9px,2.4vh,14px)}
  .js-motion .hx-up .hx-note{margin-top:clamp(4px,1vh,8px);font-size:14px}
}
@media (max-width:899.98px) and (max-height:599.98px) and (min-aspect-ratio:1/1),(min-width:900px) and (max-height:499.98px){
  /* the sample screens need more height than the stage has; they show in full in the use cases below */
  .rfw-card{display:none}
}