/* The published homepage owns the brand, content, and layout.
   These additions place the iPhone and QR handoff in that existing hero. */
/* The existing navigation already reserves 112px on desktop and 96px on mobile. */
body.ios-homepage #top{padding-top:0}
.ios-hero .hero-content>h1{font-size:60px;line-height:1;letter-spacing:-1.5px}
.ios-hero .hero-content>p:first-of-type{max-width:545px}
.ios-download-button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;min-height:76px;padding:14px 18px;border-radius:12px;
  background:rgba(255,255,255,.76);border:1px solid #c9dcfb;
  box-shadow:0 2px 7px -4px rgba(37,99,235,.19);backdrop-filter:blur(14px);
  color:#111827;text-decoration:none;
  transition:background-color 150ms,border-color 150ms,box-shadow 150ms;
}
.ios-download-button:hover{background:rgba(255,255,255,.96);border-color:#93b8fa;box-shadow:0 4px 15px -8px rgba(37,99,235,.3)}
.ios-download-button:focus-visible,.ios-qr:focus-visible{outline:3px solid #2563eb;outline-offset:4px}
.ios-download-copy{display:flex;align-items:center;gap:12px;min-width:0}
.ios-download-copy>svg{width:23px;height:23px;color:#2563eb;flex:none;stroke-width:1.8}
.ios-download-title{font-size:15px;font-weight:600;line-height:1.4;display:block}
.ios-download-note{font-size:12px;line-height:1.5;color:#64748b;display:block;margin-top:2px}
.ios-download-badge{height:42px;width:auto;max-width:172px;flex:none;display:block}
.ios-hero .ios-demo-link{
  min-height:44px;border:0;background:transparent!important;box-shadow:none;
  padding:5px 0;font-size:14px;justify-content:flex-start;
}
.ios-hero .hero-content>p.italic{font-size:12px;margin-top:1px;line-height:1.5}
.ios-hero .hero-content>div:last-child>div{font-size:13px;line-height:1.7}
.ios-composition{position:relative;isolation:isolate;min-width:0;height:650px;perspective:1400px}
.ios-dash-anchor{position:absolute;left:0;top:42px;width:100%;z-index:2;transform-origin:0 0}
.ios-dash-reveal{transform-origin:50% 50%}
.ios-dashboard-parallax{transition:transform 280ms cubic-bezier(.22,1,.36,1)}
.ios-composition .dashboard-mockup{margin:0}
.ios-composition .dashboard-mockup:hover{transform:none!important}
.ios-composition .dashboard-mockup::after{display:none}
.ios-composition .floating-badge{animation:none!important}
.ios-phone-anchor{position:absolute;z-index:8;width:190px;transform-origin:50% 85%}
.ios-phone-motion{transform-origin:50% 85%}
.ios-phone-parallax{transition:transform 300ms cubic-bezier(.22,1,.36,1);transform-origin:50% 80%}
.ios-phone-angle{transform-style:preserve-3d;transform-origin:50% 60%}
.ios-phone{
  position:relative;width:100%;aspect-ratio:190/405;border-radius:34px;
  padding:6px;background:linear-gradient(115deg,#707783 0%,#272d37 8%,#11141c 34%,#292f39 94%,#79818e 100%);
  border:1px solid #48505e;
  box-shadow:1px 0 0 #a4acb7,3px 1px 0 #454d5b,6px 2px 0 #171c25,18px 29px 38px -15px rgba(17,24,39,.34),0 7px 13px rgba(17,24,39,.1);
}
.ios-phone::before{content:"";position:absolute;left:-4px;top:22%;width:3px;height:28px;border-radius:3px;background:#59616f;box-shadow:0 38px 0 #59616f}
.ios-phone::after{content:"";position:absolute;right:-5px;top:29%;width:3px;height:45px;border-radius:3px;background:#4c5563}
.ios-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:27px;background:#fff}
.ios-phone-screen>img{display:block;width:129.07%;max-width:none;height:auto;margin-left:-14.535%;margin-top:-77.907%}
.ios-phone-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(transparent,#fff 65%)}
.ios-home-indicator{position:absolute;bottom:5px;left:50%;width:35%;height:3px;border-radius:4px;background:#141820;transform:translateX(-50%);z-index:2}
.ios-phone-ground{position:absolute;z-index:0;background:rgba(47,65,104,.12);filter:blur(15px);border-radius:50%;pointer-events:none}
.ios-qr{
  position:absolute;z-index:12;display:flex;align-items:center;gap:15px;
  padding:12px;border:1px solid rgba(191,219,254,.9);border-radius:18px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(20px);
  box-shadow:0 9px 26px -18px rgba(37,99,235,.35);
  color:#111827;text-decoration:none;transform-origin:100% 0;
}
.ios-qr-image{width:104px;height:104px;display:block;flex:none;background:#fff;border-radius:8px}
.ios-qr-title{font-size:13px;font-weight:600;line-height:1.4;color:#111827;display:block}
.ios-qr-note{display:block;color:#64748b;font-size:11px;line-height:1.55;margin-top:5px}
.ios-qr-copy{max-width:125px}
.ios-qr-copy>svg{display:block;width:19px;height:19px;color:#2563eb;margin-bottom:7px}
.ios-connector{position:absolute;z-index:0;pointer-events:none;background:linear-gradient(#93c5fd,rgba(147,197,253,0));width:1px}
.ios-dash-anchor{left:54px;top:43px;transform:scale(.88)}
.ios-phone-anchor{left:8px;top:205px;width:181px}
.ios-phone-angle{transform:rotateX(5deg) rotateY(15deg) rotateZ(-9deg)}
.ios-phone-ground{left:0;top:589px;width:190px;height:27px;transform:rotate(-7deg)}
.ios-qr{right:12px;bottom:12px;padding:13px 16px;flex-direction:row-reverse;width:278px}
.ios-connector{right:75px;bottom:120px;height:75px}
@media(min-width:1024px) and (max-width:1279px){
  .ios-composition{height:675px}
  .ios-phone-anchor{width:171px!important}
  .ios-dash-anchor{left:34px}
  .ios-phone-anchor{left:-2px}
}
@media(max-width:1023px){
  /* Navigation stays in flow in both phone orientations. */
  body.ios-homepage>header{position:relative;inset:auto;padding:8px 0;z-index:9999}
  body.ios-homepage>header+div.h-24{display:none}
  body.ios-homepage>header nav>div>div:first-child{background:#fff;backdrop-filter:none;border-color:#e2e8f0;box-shadow:0 2px 6px rgba(17,24,39,.04)}
  body.ios-homepage>header nav>div>div:first-child>div{min-height:44px;padding-top:0;padding-bottom:0}
  body.ios-homepage #mobile-menu-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
  body.ios-homepage #mobile-menu>div{max-height:calc(100dvh - 90px);overscroll-behavior:contain}
  body.ios-homepage #top{padding-top:8px}
  /* One mobile video poster: the real phone fills the scene, with a clear play target. */
  .ios-composition{
    display:block;width:100%;max-width:620px;height:clamp(380px,112vw,480px);
    margin:0 auto;overflow:hidden;isolation:isolate;perspective:none;border-radius:26px;
    background:radial-gradient(ellipse at 100% 0%,rgba(139,181,255,.9),transparent 56%),linear-gradient(145deg,#315fd4,#10234c);
    border:1px solid rgba(37,99,235,.18);box-shadow:0 18px 40px -26px rgba(20,48,116,.55);
  }
  /* Keep the existing accessible video button, but remove the desktop frame's boxes. */
  .ios-dash-anchor,.ios-dash-reveal,.ios-dashboard-parallax,.ios-composition .dashboard-mockup{display:contents;transform:none!important;opacity:1!important}
  .ios-composition .dashboard-mockup>:not(.play-button-overlay){display:none!important}
  .ios-phone-anchor{position:absolute;z-index:2;left:24%;top:32px;width:84%;max-width:320px;margin:0}
  .ios-phone-motion,.ios-phone-parallax{transform:none!important;opacity:1!important}
  .ios-phone-angle{transform:rotate(-11deg)!important;transform-origin:50% 60%}
  .ios-phone{border-color:#818ba0;box-shadow:2px 0 0 #a4acb7,5px 2px 0 #242f48,0 22px 45px rgba(4,16,49,.45)}
  .ios-phone-ground,.ios-qr,.ios-connector,.ios-composition .floating-badge{display:none!important}
  .ios-composition .play-button-overlay{
    inset:0;z-index:30;width:100%;height:100%;align-items:flex-end;justify-content:flex-start;padding:24px 24px 48px;
    border:0;border-radius:inherit;background:linear-gradient(180deg,transparent 38%,rgba(9,27,65,.12) 56%,rgba(9,27,65,.68) 78%,rgba(9,27,65,.94) 100%);
    -webkit-tap-highlight-color:transparent;transition:none;
  }
  .ios-composition .play-button-overlay> :first-child{flex-direction:row;align-items:center;gap:18px;width:100%}
  .ios-composition .play-button-overlay> :first-child> :first-child{
    width:64px;height:64px;flex:none;border-radius:50%;background:#fff;transform:none;
    box-shadow:0 0 0 7px rgba(255,255,255,.13),0 8px 24px rgba(4,16,49,.24);
  }
  .ios-composition .play-button-overlay svg{width:28px;height:28px;color:#1d4ed8}
  .ios-composition .play-button-overlay> :first-child> :last-child{
    padding:0;border-radius:0;background:none!important;backdrop-filter:none;box-shadow:none;
    color:#fff;font-size:17px;font-weight:600;line-height:1.3;text-align:left;white-space:normal;text-shadow:0 1px 8px rgba(4,16,49,.3);
  }
  .ios-composition .play-button-overlay:focus-visible{outline:3px solid #fff;outline-offset:-7px}
  /* Leave room above the video for its close control on short screens. */
  .ios-homepage #homepageDemoVideo{max-height:calc(100dvh - 112px);object-fit:contain}
  .ios-homepage #videoModalClose{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .ios-hero .hero-content>h1{font-size:48px;line-height:1.02;letter-spacing:-1.2px}
}
/* Compact mobile hero; desktop keeps the approved third composition. */
.ios-mobile-copy{display:none}
@media(max-width:767px){
  body.ios-homepage #top{padding-top:0}
  .ios-hero{padding-top:12px;padding-bottom:28px}
  .ios-hero>div:first-child>div:first-child{gap:16px}
  .ios-hero .hero-content>h1{font-size:clamp(29px,8vw,34px);line-height:1.08;letter-spacing:-.65px;margin-bottom:12px;text-wrap:pretty}
  .ios-hero .hero-content>p:first-of-type{font-size:16px;line-height:1.5;margin-bottom:16px;max-width:36em}
  .ios-hero .hero-content>div:first-child{margin-bottom:12px}
  .ios-hero .hero-content>.flex.flex-col{gap:10px}
  .ios-desktop-copy{display:none}
  .ios-mobile-copy{display:inline}
  .ios-hero .hero-content a[href*="/users/sign_up"]{min-height:50px;padding:12px 18px;font-size:16px;line-height:1.5}
  .ios-download-button{min-height:76px;padding:12px 13px;gap:10px}
  .ios-download-copy{gap:9px}
  .ios-download-copy>svg{width:20px;height:20px}
  .ios-download-title{font-size:14px;line-height:1.35}
  .ios-download-note{font-size:12px;line-height:1.4;color:#475569}
  .ios-download-badge{height:40px;max-width:135px}
  .ios-hero .ios-demo-link{font-size:14px;min-height:44px;padding:8px 0}
  .ios-hero .hero-content>p.italic{font-size:12px;line-height:1.5;margin-top:0;font-style:normal;color:#475569}
  .ios-hero .hero-content>div:last-child{margin-top:12px}
  .ios-hero .hero-content>div:last-child>div{font-size:12px;line-height:1.6;color:#475569}
  .ios-hero .hero-content+div{margin-top:0}
  .ios-composition{max-width:420px}
  .ios-hero .ios-composition~div{margin-top:16px}
}
@media(max-width:359px){
  .ios-download-copy>svg{display:none}
  .ios-download-button{gap:8px;padding:12px 10px}
  .ios-download-title{font-size:13px}
  .ios-download-badge{max-width:125px;height:40px}
}
@media(max-width:1023px) and (max-height:500px){
  .ios-composition{height:320px}
  .ios-phone-anchor{left:34%;top:20px;width:280px}
}
@media(prefers-reduced-motion:reduce){
  .ios-dashboard-parallax,.ios-phone-parallax,.ios-download-button{transition:none!important}
}
/* Keep the approved scene still once its entrance completes. */
.ios-homepage .gradient-bg,
.ios-hero .animate-float,
.ios-hero .animate-float-delayed,
.ios-hero .animate-marquee,
.ios-hero .animate-marquee-fast { animation: none !important; }
.ios-hero [class*="animate-fade-up"] { animation: none; opacity: 1; transform: none; }
.ios-phone-anchor { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .ios-homepage *, .ios-homepage *::before, .ios-homepage *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}