/* JumpIn — marketing site.
   Built to the Mosto light template's visual language: an indigo hero band with
   white type, floating dot fields, a curved shape cutting the hero off, soft
   rounded cards on a pale blue ground, Josefin Sans display over Open Sans body.
   The palette is JumpIn's own — the app's blue and near-black ink — rather than
   the template's stock indigo/orange. */
:root{
  --indigo-900:#15123A;
  --indigo-700:#211C57;
  --indigo-500:#3B368C;
  --blue:#1C6FE0;
  --blue-600:#0B4FA8;
  --warm:#EE4730;
  --seam:#8FC2FF;

  --ground:#F0F5FC;
  --card:#FFFFFF;
  --ink:#0E1330;
  --body:#504C89;
  --body-2:#33406A;
  --faint:#8E96BC;
  --line:#E1E8F5;

  --radius:20px;
  --shadow:0 6px 24px rgba(23,28,71,.07);
  --shadow-lg:0 22px 60px rgba(23,28,71,.16);
  --wrap:1180px;
  --display:"Josefin Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--body-2);
  font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);width:100%;margin:0 auto;padding:0 24px;position:relative;z-index:2}
/* Grid and flex children default to min-width:auto, so an item refuses to
   shrink below its content's intrinsic size. The hero screenshot is 1280px
   wide, which was forcing the whole column — and therefore the page — wider
   than a phone viewport, clipping every section. */
.banner-inner>*,.grid>*,.foot>*,.shots>*,.devices>*{min-width:0}
body{overflow-x:clip}
h1,h2,h3,p,a,li,summary{overflow-wrap:anywhere}

h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;line-height:1.12;font-weight:700}
h1{font-size:clamp(40px,5.4vw,62px);letter-spacing:-.01em}
h2{font-size:clamp(30px,3.5vw,44px)}
h3{font-size:21px}
.cl-white,.cl-white h1,.cl-white h2,.cl-white h3{color:#fff}
.lead{font-size:17px;color:var(--body);margin:22px 0 0;max-width:56ch}
.cl-white .lead{color:#C9CEEA}
section{padding:clamp(66px,8vw,112px) 0;position:relative}
.center{text-align:center}
.center .lead{margin-inline:auto}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.eyebrow.on-dark{color:var(--seam)}
.section-head{max-width:680px;margin:0 auto clamp(44px,5vw,64px)}

/* Buttons — the template's pill pair, one solid, one outlined. */
.button{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);
  font-weight:600;font-size:16px;border-radius:999px;padding:15px 32px;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.button:hover{transform:translateY(-2px)}
.button-solid{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(28,111,224,.34)}
.button-solid:hover{background:var(--blue-600)}
.button-warm{background:var(--warm);color:#fff;box-shadow:0 10px 26px rgba(238,71,48,.3)}
.button-outline{border-color:rgba(255,255,255,.5);color:#fff}
.button-outline:hover{background:#fff;color:var(--indigo-700);border-color:#fff}
.button-outline-dark{border-color:var(--line);color:var(--ink);background:var(--card)}

/* Header */
header{position:sticky;top:0;z-index:60;background:rgba(21,18,58,.92);backdrop-filter:blur(12px)}
nav{display:flex;align-items:center;gap:30px;height:78px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;
  font-size:22px;color:#fff;letter-spacing:.01em}
.brand img{width:36px;height:36px;border-radius:9px}
.navlinks{display:flex;gap:28px;margin-left:auto;font-size:15px;color:#BFC6E6;font-family:var(--display);font-weight:600}
.navlinks a:hover{color:#fff}
.nav-cta{padding:11px 26px;font-size:15px}

/* Hero band */
.banner{background:linear-gradient(128deg,var(--indigo-900) 0%,var(--indigo-700) 42%,var(--indigo-500) 78%,#2A4FB6 100%);
  overflow:hidden;padding:clamp(60px,7vw,104px) 0 clamp(150px,15vw,220px)}
.banner-inner{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:52px;align-items:center}
/* Dot fields, drawn rather than shipped as bitmaps. */
.dots{position:absolute;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.6px, transparent 1.7px);
  background-size:22px 22px}
.dot-1{width:190px;height:150px;top:60px;left:-40px}
.dot-2{width:230px;height:170px;bottom:150px;right:-30px;opacity:.35}
.dot-3{width:120px;height:110px;top:40%;left:46%;opacity:.28;background-size:16px 16px}
/* The curved shape that cuts the band off. */
.banner-curve{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.banner-curve svg{width:100%;height:clamp(60px,8vw,120px);display:block}
.banner-buttons{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap}
.banner-note{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:#96A0CE}

/* Device mockup. One 16:9 screen at its natural aspect — no cropping, no
   absolute positioning, nothing that can collapse at a narrow width. */
.devices{position:relative}
.screen{border-radius:16px;overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.22);box-shadow:var(--shadow-lg)}
.screen img{width:100%;height:auto;display:block}
/* The hero already contains its own bezel and shadow — the room is the frame,
   so the panel chrome would be a second border around a photograph. */
.screen.room{border:0;background:transparent;box-shadow:none;border-radius:20px}
.screen-caption{margin-top:18px;text-align:center;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#8F99C8}

/* Trusted strip */
.trusted{background:var(--card);padding:46px 0;border-bottom:1px solid var(--line)}
.logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:20px}
.logos img{width:54px;height:54px;border-radius:13px;border:1px solid var(--line);
  transition:transform .2s ease}
.logos img:hover{transform:translateY(-4px)}

/* Cards */
.grid{display:grid;gap:24px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card p{margin:10px 0 0;font-size:15.5px;color:var(--body)}
.ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,#E8F1FE,#DCE7FB);color:var(--blue)}
.ico svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico.warm{background:linear-gradient(140deg,#FFE9E4,#FFDCD4);color:var(--warm)}
.ico.violet{background:linear-gradient(140deg,#E8E6F8,#DEDBF4);color:var(--indigo-500)}

/* Honesty panel */
.panel{background:linear-gradient(128deg,var(--indigo-900),var(--indigo-500));
  border-radius:28px;padding:clamp(40px,5vw,64px);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.panel .dots{opacity:.3}
.ladder{display:grid;gap:12px;margin-top:34px;position:relative;z-index:2}
.rung{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:18px;align-items:center;padding:17px 22px;
  border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.rung.on{background:rgba(94,152,255,.2);border-color:rgba(143,194,255,.55)}
.rung .n{font-family:var(--mono);font-size:12px;color:var(--seam)}
.rung .what{font-family:var(--display);font-weight:600;font-size:17px;color:#fff}
.rung .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#98A2C8}
.rung.on .tag{color:var(--seam)}

/* Steps */
.step{background:var(--card);border-radius:var(--radius);padding:36px 32px;box-shadow:var(--shadow);position:relative}
.step .num{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:20px;color:#fff;
  background:linear-gradient(140deg,var(--blue),var(--indigo-500));margin-bottom:20px;
  box-shadow:0 8px 20px rgba(28,111,224,.3)}

/* Screenshots */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* The panel holds the same box the still did, whatever the video is doing.
   An <img> sizes the container from its own intrinsic ratio the moment the
   layout runs; a <video> does not until it has metadata, so the hero would
   settle at one size and then jump. Pinning the ratio on the container and
   filling it absolutely takes the video out of that negotiation entirely. */
/* 16:9 twice over. `aspect-ratio` is the modern form, but where it is ignored
   the panel collapses or stretches — on a phone it went portrait and cropped
   the poster to a slice. The padding trick has no such gap in support, and the
   two together mean the box is 16:9 or nothing. */
.screen.room{position:relative;width:100%;aspect-ratio:16/9}
@supports not (aspect-ratio:16/9){
  .screen.room{height:0;padding-top:56.25%}
}
/* contain, not cover: cover crops the moment the file's ratio and the panel's
   disagree by a pixel, and the first thing cropped is the tab bar along the
   top of the screenshot. Letterboxing against the panel's own ground is
   invisible when they match and honest when they don't. */
.screen.room video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block}

/* The tour is decoration: someone who has asked for less motion should get a
   still, not a loop they cannot stop. The poster is the same first frame the
   video would show, so nothing disappears — it simply stops moving. */
/* Wherever the video is not attached — a phone, reduced motion, Save-Data —
   the panel still has to be the picture rather than a black box, so the poster
   is painted underneath it and the empty <video> sits transparently on top. */
/* contain, matching the video on top of it: a cover background is what cropped
   the poster's headline in half when the panel lost its ratio. */
.screen.room{background:#07080F url(/assets/tour-poster.jpg) center/contain no-repeat}
.screen.room video{background:transparent}
@media (prefers-reduced-motion:reduce){.screen.room video{display:none}}
.shot{margin:0;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.shot img{background:#000}
.shot figcaption{padding:18px 22px;font-size:15px;color:var(--body)}
.shot b{font-family:var(--display);color:var(--ink);font-weight:700}

/* Pricing */
.price{background:var(--card);border-radius:var(--radius);padding:40px 34px;box-shadow:var(--shadow);
  display:flex;flex-direction:column}
.price.hi{background:linear-gradient(128deg,var(--indigo-900),var(--indigo-500));color:#fff;
  box-shadow:var(--shadow-lg);transform:translateY(-10px)}
.price.hi h3,.price.hi .amount{color:#fff}
.amount{font-family:var(--display);font-size:52px;font-weight:700;color:var(--ink);margin:14px 0 2px;line-height:1}
.amount span{font-size:15px;font-family:var(--sans);color:var(--faint);font-weight:400}
.price.hi .amount span{color:#B9C2E8}
.plist{list-style:none;padding:0;margin:24px 0 30px;display:grid;gap:12px}
.plist li{display:flex;gap:12px;font-size:15.5px}
.plist svg{width:20px;height:20px;flex:none;margin-top:3px;stroke:var(--blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.price.hi .plist{color:#DCE2F6}
.price.hi .plist svg{stroke:var(--seam)}
.price .button{margin-top:auto;justify-content:center}

/* FAQ */
.faq{max-width:840px;margin:0 auto}
details{background:var(--card);border-radius:14px;margin-bottom:13px;box-shadow:var(--shadow);overflow:hidden}
summary{padding:22px 26px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:18px;align-items:center;font-family:var(--display);font-weight:600;font-size:17.5px;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--blue);font-size:22px;flex:none;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin:0;padding:0 26px 24px;font-size:15.5px;color:var(--body)}

/* CTA band */
.cta-band{background:linear-gradient(128deg,var(--indigo-900),var(--indigo-500) 70%,#2A4FB6);
  overflow:hidden;text-align:center}

/* Footer */
footer{background:var(--indigo-900);color:#AEB6DC;padding:64px 0 34px}
.foot{display:flex;gap:44px;justify-content:space-between;flex-wrap:wrap}
.fcol{display:grid;gap:12px;align-content:start}
.fcol strong{font-family:var(--display);color:#fff;font-size:15px;letter-spacing:.02em}
.foot a{color:#AEB6DC;font-size:15px}
.foot a:hover{color:#fff}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  color:#8A93BC;font-size:13.5px;display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}

@media (max-width:980px){
  .banner-inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3,.g2,.shots{grid-template-columns:minmax(0,1fr)}
  .navlinks{display:none}
  .brand{font-size:19px}.brand img{width:32px;height:32px}
  .nav-cta{padding:10px 18px;font-size:14px}
  nav{height:66px;gap:14px}
  .price.hi{transform:none}
}
@media (max-width:560px){
  .g4{grid-template-columns:minmax(0,1fr)}
  .rung{grid-template-columns:30px minmax(0,1fr);row-gap:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}