@font-face { font-family:"Caveat"; font-style:normal; font-weight:600; font-display:swap; src:url("assets/caveat-latin-600.woff2") format("woff2"); }
:root { --canvas:#f8f4ee; --paper:#fffdfa; --ink:#202326; --muted:#65717a; --line:#d9d7d3; --copper:#c96725; --copper-dark:#ad541b; --brand-orange:#f86d32; --brand-orange-hover:#ff7b42; --blue-grey:#70818a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:Arial, Helvetica, sans-serif; }
.page-shell { min-height:100vh; width:100%; max-width:1540px; margin:0 auto; padding:38px clamp(28px,5vw,74px) 30px; display:flex; flex-direction:column; overflow:visible; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:2; }
.logo { width:197px; height:auto; display:block; }
.site-header p { margin:0; font-family:"Caveat",cursive; font-size:clamp(24px,2.05vw,32px); font-weight:600; line-height:1.08; letter-spacing:0; }
.hero { flex:1; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.05fr); align-items:center; min-height:720px; gap:30px; }
.hero-copy { padding:66px 0 33px; position:relative; z-index:2; max-width:660px; }
.eyebrow { margin:0 0 35px; text-transform:uppercase; color:var(--brand-orange); font-size:19px; font-weight:800; letter-spacing:.29em; }
h1 { margin:0; max-width:590px; font-size:clamp(52px,4.25vw,66px); line-height:1.05; letter-spacing:-.055em; font-weight:800; }
.intro { margin:34px 0 0; max-width:610px; color:#4c545a; font-size:clamp(20px,1.75vw,29px); line-height:1.42; letter-spacing:-.023em; }
.signup { margin-top:52px; max-width:620px; }
.launch-list-heading { margin:0 0 16px; color:var(--ink); font-size:clamp(25px,2vw,31px); line-height:1.15; letter-spacing:-.035em; }
button { min-width:229px; border:0; border-radius:11px; background:var(--brand-orange); color:#fff; cursor:pointer; font:700 18px Arial,sans-serif; transition:background .18s ease,transform .18s ease; } button:hover { background:var(--brand-orange-hover); transform:translateY(-1px); } button:focus-visible { outline:3px solid #7d9aa5; outline-offset:3px; }
.mailerlite-shell { min-height:68px; position:relative; transform:translateY(-15px); }
.mailerlite-loading { display:flex; align-items:center; min-height:68px; margin:0; padding:0 22px; border:1px solid var(--line); border-radius:11px; color:#555f65; background:var(--paper); font-size:16px; line-height:1.4; }
.mailerlite-shell.is-ready .mailerlite-loading, .mailerlite-shell.is-unavailable .mailerlite-loading { display:none; }
.mailerlite-shell.is-unavailable { padding:17px 20px; border:1px solid #dfc4af; border-radius:11px; background:#fff8f1; }
.mailerlite-shell.is-unavailable::after { content:"The signup form is not available right now. Please try again later."; color:#754b25; font-size:15px; line-height:1.45; }
.ml-embedded { width:100%; min-height:0; }
.ml-embedded:empty { display:none; }
.ml-embedded form { max-width:100% !important; }
/* MailerLite injects its own centered table layout. Scope these overrides to
   this one landing embed so its card shares the copy column's left edge. */
.signup .ml-embedded .ml-form-embedContainer { display:block !important; margin:0 !important; }
.signup .ml-embedded .ml-form-align-default { display:block !important; text-align:left !important; }
.signup .ml-embedded .ml-form-align-center { display:block !important; text-align:left !important; }
.signup .ml-embedded .ml-form-embedWrapper { margin:0 !important; max-width:100% !important; }
/* Keep the provider thank-you message on the same left edge as the form. */
.signup .ml-embedded .ml-form-successBody { padding-left:0 !important; padding-right:0 !important; max-width:100% !important; }
.signup .ml-embedded .ml-form-successContent,
.signup .ml-embedded .ml-form-successContent h4,
.signup .ml-embedded .ml-form-successContent p { text-align:left !important; max-width:100% !important; overflow-wrap:anywhere; }
.signup .ml-embedded .ml-form-embedBody { padding-left:0 !important; padding-right:0 !important; }
/* Match the email/name fields and both submit states to the standard 304px
   reCAPTCHA widget. Keep the provider widget itself untouched. */
.signup .ml-embedded .ml-form-formContent,
.signup .ml-embedded .ml-form-embedSubmit {
  width:304px !important;
  max-width:100% !important;
}
.signup .ml-embedded .ml-form-embedSubmit button { min-width:0 !important; }
/* On phones use the available form width for easier typing and tapping.
   Leave the provider's reCAPTCHA sizing unchanged. */
@media screen and (max-width:560px) {
  .signup .ml-embedded .ml-form-embedWrapper,
  .signup .ml-embedded .ml-form-formContent,
  .signup .ml-embedded .ml-form-embedSubmit { width:100% !important; }
}


.signup-note { margin:16px 0 0; color:#555f65; font-size:15px; line-height:1.45; }.form-message { min-height:22px; margin:8px 0 0; color:#8c4216; font-size:14px; font-weight:600; }
/* Independent layers: circle, three tiles, ground shadows and one seamless bike image. */
.hero-art { position:relative; min-width:0; align-self:center; width:100%; overflow:visible; }
.hero-stage { position:relative; width:112%; aspect-ratio:1 / 1.05; margin-left:-5%; isolation:isolate; overflow:visible; }
.hero-circle { position:absolute; z-index:0; width:91%; aspect-ratio:1; top:0; left:5%; border-radius:50%; background:radial-gradient(circle at 48% 34%, #f7eadf 0%, #f3e4d5 76%, #f2e2d1 100%); opacity:.75; }
.feature-tile { position:absolute; z-index:1; width:21%; aspect-ratio:1; display:grid; place-items:center; border-radius:28%; background:linear-gradient(135deg,#fffdfa 10%,#f0e9df 100%); border:1px solid rgba(255,255,255,.94); box-shadow:inset 2px 3px 4px #fff, inset -2px -4px 5px rgba(180,160,140,.24), 0 15px 16px -8px rgba(99,73,46,.23); }
.maintenance-tile { top:11%; left:11%; transform:translateY(-42px) rotate(-3deg); }
.journeys-tile { top:3%; left:42%; transform:translateY(-47px) rotate(1deg); }
.fuel-tile { top:calc(11% - 10px); right:calc(5% + 5px); transform:translateY(-32px) rotate(3deg); }
.feature-tile img { display:block; width:79%; height:79%; object-fit:contain; }
.bike-layer { position:absolute; z-index:3; width:120%; aspect-ratio:3 / 2; left:-9%; bottom:4%; overflow:visible; }
.rider-hero-layer { width:120%; left:-9%; bottom:2%; }
.hero-bike { position:relative; z-index:2; display:block; width:100%; height:auto; }
.bike-shadow { position:absolute; z-index:1; pointer-events:none; border-radius:50%; }
/* Broad warm penumbra plus small contact cores, aligned to the tyre contact points. */
.soft-shadow { left:7%; top:83%; width:91%; height:19%; background:radial-gradient(ellipse,rgba(86,59,39,.26) 0%,rgba(95,65,43,.17) 28%,rgba(108,77,53,.08) 47%,transparent 70%); transform:rotate(5deg); filter:blur(9px); }
.soft-shadow::after { content:""; position:absolute; inset:27% 9% 21%; border-radius:50%; background:radial-gradient(ellipse,rgba(53,35,22,.30) 0%,rgba(67,43,26,.15) 35%,transparent 71%); filter:blur(4px); }
.rear-shadow { left:12%; top:86.1%; width:19%; height:3.5%; background:radial-gradient(ellipse,rgba(40,27,18,.56) 0%,rgba(56,37,24,.24) 35%,transparent 72%); filter:blur(2px); }
.front-shadow { left:66.5%; top:95%; width:23%; height:3%; background:radial-gradient(ellipse,rgba(40,27,18,.60) 0%,rgba(56,37,24,.26) 35%,transparent 74%); filter:blur(2px); }
footer { display:flex; justify-content:space-between; align-items:end; margin-top:auto; color:#4f575c; font-size:16px; } footer a { color:inherit; text-decoration:none; } footer a:hover, footer a:focus-visible { color:var(--copper); text-decoration:underline; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (min-width: 901px) and (max-width: 1540px) {
  .hero-stage { width:104%; margin-left:-5%; }
}
@media (max-width: 1050px) {
  .hero { gap:14px; }
  button { min-width:0; }
  button { min-width:0; }
}
@media (max-width: 900px) {
  .page-shell { padding-top:28px; }
  .hero { grid-template-columns:1fr; min-height:0; gap:0; }
  .hero-copy { padding:76px 0 0; max-width:700px; }
  button { min-width:220px; }
  .hero-art { margin:15px auto 0; max-width:640px; }
  .hero-stage { width:100%; margin-left:0; }
  .bike-layer { width:110%; left:-5%; }
  .rider-hero-layer { width:100%; left:0; bottom:0; }
  footer { margin-top:16px; }
}
@media (max-width: 560px) {
  .page-shell { padding:22px 22px 24px; }
  .logo { width:155px; }
  .site-header p { font-size:21px; text-align:right; max-width:150px; }
  .hero-copy { padding-top:62px; }
  .eyebrow { font-size:13px; letter-spacing:.24em; margin-bottom:24px; }
  h1 { font-size:45px; line-height:1.04; }
  .intro { margin-top:23px; font-size:20px; }
  .intro br { display:none; }
  .signup { margin-top:34px; }
  button { min-width:0; }
  .hero-art { margin-top:0; }
  .feature-tile { box-shadow:inset 1px 2px 3px #fff, inset -1px -2px 3px rgba(180,160,140,.24), 0 9px 12px -6px rgba(99,73,46,.23); }
  footer { font-size:13px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { transition:none !important; } }

/* Privacy stays in this preview; pending copy is intentionally not a live policy. */
.privacy-trigger { min-width:0; width:auto; height:auto; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; text-decoration:none; }
.privacy-trigger:hover { background:none; color:var(--ink); transform:none; }
body.privacy-open { overflow:hidden; }
.privacy-modal { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; margin:auto; color:var(--ink); background:var(--paper); border:1px solid #e4ddd4; border-radius:18px; box-shadow:0 24px 80px rgba(20,22,24,.24); overflow:hidden; }
.privacy-modal[open] { display:flex; flex-direction:column; }
.privacy-modal::backdrop { background:rgba(22,27,30,.48); }
.privacy-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 26px; border-bottom:1px solid #e9e1d8; }
.privacy-header h2 { margin:0; font-size:27px; line-height:1.2; letter-spacing:-.03em; }
.privacy-header h2:focus { outline:none; }
.privacy-close { flex:none; min-width:0; width:40px; height:40px; padding:0; border-radius:50%; background:#eee9e2; color:#202326; font-size:30px; line-height:1; }
.privacy-close:hover { background:#e0d8ce; transform:none; }
.privacy-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:20px 26px 28px; font-size:17px; line-height:1.65; }
.privacy-content p { margin:0 0 16px; }
.privacy-content p:last-child { margin-bottom:0; }
.privacy-content h3 { margin:26px 0 8px; font-size:20px; line-height:1.3; }
.privacy-content ul { padding-left:22px; }
.privacy-content a { color:#9e3c14; }
.privacy-draft-label { color:#754b25; font-weight:700; }
.privacy-actions { display:flex; justify-content:flex-end; flex:none; padding:16px 26px; border-top:1px solid #e9e1d8; }
.privacy-done { min-width:100px; width:auto; height:44px; padding:0 25px; border:1px solid #bab3aa; background:#f0eae3; color:#202326; font:700 16px Arial,sans-serif; }
.privacy-done:hover { background:#e4dbd0; transform:none; }
@media(max-width:560px) { .privacy-modal { max-height:calc(100dvh - 28px); border-radius:14px; }.privacy-header { padding:18px; }.privacy-header h2 { font-size:25px; }.privacy-content { padding:18px; font-size:16px; }.privacy-actions { padding:14px 18px; } }

.privacy-review-note { color:#754b25; background:#fff0cf; border-radius:3px; }

/* Local confirmation-page review. It is intentionally not wired to MailerLite. */
.confirmation-page { min-height:100vh; max-width:1540px; margin:0 auto; padding:38px clamp(28px,5vw,74px) 30px; display:flex; flex-direction:column; overflow:hidden; }
.confirmation-content { flex:1; display:grid; grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr); align-items:center; gap:30px; min-height:680px; }
.confirmation-copy { max-width:575px; padding:38px 0; position:relative; z-index:1; }
.confirmation-copy h1 { max-width:520px; }
.confirmation-copy > p:not(.eyebrow) { margin:30px 0 0; color:#4c545a; font-size:clamp(20px,1.75vw,27px); line-height:1.42; letter-spacing:-.02em; }
.confirmation-art { position:relative; min-width:0; aspect-ratio:1/1; isolation:isolate; }
.confirmation-circle { position:absolute; z-index:0; width:91%; aspect-ratio:1; top:2%; left:5%; border-radius:50%; background:radial-gradient(circle at 48% 34%,#f7eadf 0%,#f3e4d5 76%,#f2e2d1 100%); opacity:.75; }
.confirmation-bike-stage { position:absolute; z-index:1; width:118%; aspect-ratio:1536/1024; left:-9%; bottom:4%; }
.confirmation-bike-stage .bike-shadow { z-index:1; }
.confirmation-bike-stage .soft-shadow { display:block; left:2%; top:83.5%; width:96%; height:17%; background:radial-gradient(ellipse at 49% 47%,rgba(50,57,60,.23) 0%,rgba(50,57,60,.14) 35%,rgba(50,57,60,.065) 61%,transparent 82%); transform:rotate(5.8deg); filter:blur(10px); }
.confirmation-bike-stage .soft-shadow::after { content:""; position:absolute; inset:37% 10% 19%; border-radius:50%; background:radial-gradient(ellipse,rgba(35,42,45,.19) 0%,rgba(35,42,45,.085) 48%,transparent 78%); filter:blur(5px); }
.confirmation-bike-stage .rear-shadow,
.confirmation-bike-stage .front-shadow { background:radial-gradient(ellipse,rgba(45,51,53,.37) 0%,rgba(45,51,53,.20) 35%,rgba(45,51,53,.075) 65%,transparent 86%); filter:blur(2px); box-shadow:0 3px 10px 4px rgba(45,51,53,.08); }
.confirmation-bike-stage .rear-shadow { left:12%; top:86.5%; width:19%; height:4%; }
.confirmation-bike-stage .front-shadow { left:66%; top:94%; width:20%; height:4%; }
.confirmation-bike-stage > img.confirmation-bike { position:absolute; z-index:2; width:100%; height:auto; inset:0; }
.confirmation-bike-stage .confirmation-mail-tile { z-index:3; width:20%; left:54%; top:-18%; transform:rotate(1deg); }
.confirmation-mail-tile img { position:absolute; left:50%; top:50%; width:130%; height:130%; max-width:none; transform:translate(-50%,-50%); object-fit:contain; }
@media (max-width:900px) { .confirmation-page { padding-top:28px; overflow-x:hidden; }.confirmation-content { grid-template-columns:1fr; min-height:0; gap:0; }.confirmation-copy { padding:70px 0 0; }.confirmation-art { width:100%; max-width:640px; margin:0 auto; }.confirmation-page footer { margin-top:16px; } }
@media (max-width:560px) { .confirmation-page { padding:22px 22px 24px; }.confirmation-copy { padding-top:58px; }.confirmation-copy > p:not(.eyebrow) { font-size:20px; margin-top:23px; } }


/* Landing-only refinements: preserve tile bevels; fade only backdrop, never artwork. */
.hero-stage .feature-tile { box-shadow:inset 2px 3px 4px #fff, inset -2px -4px 5px rgba(180,160,140,.24); }
.hero-circle { -webkit-mask-image:linear-gradient(to bottom,#000 65%,transparent 100%); mask-image:linear-gradient(to bottom,#000 65%,transparent 100%); }
@media (max-width:560px) { .hero-stage .feature-tile { box-shadow:inset 1px 2px 3px #fff, inset -1px -2px 3px rgba(180,160,140,.24); } }

/* Ryder scale match — keep robot and bike as a single proportional layer. */
@media (min-width:901px) { .confirmation-page { overflow:visible; } }
@media (min-width:1541px) { .confirmation-bike-stage { width:137%; left:-18%; bottom:4%; } }
@media (min-width:901px) and (max-width:1540px) { .confirmation-bike-stage { width:128%; left:calc(-13.5% - 12px); bottom:4%; } }

/* Fade only the lower third of the confirmation backdrop. */
.confirmation-circle { -webkit-mask-image:linear-gradient(to bottom,#000 66.667%,transparent 100%); mask-image:linear-gradient(to bottom,#000 66.667%,transparent 100%); }

/* Keep the complete Ryder artwork inside small screens. */
@media (max-width:900px) { .confirmation-bike-stage { width:100%; left:0; } }

/* Bring the phone confirmation illustration closer to the message. */
@media (max-width:560px) { .confirmation-bike-stage { bottom:calc(4% + 30px); } }

/* Phone tiles use proportional spacing instead of desktop pixel nudges. */
@media (max-width:560px) {
  .hero-stage .feature-tile { width:26%; }
  .hero-stage .maintenance-tile { top:10%; left:2%; transform:rotate(-3deg); }
  .hero-stage .journeys-tile { top:-5%; left:37%; transform:rotate(1deg); }
  .hero-stage .fuel-tile { top:10%; right:2%; transform:rotate(3deg); }
}

/* Mobile reading order: introduction, illustration, then signup. */
@media (max-width:560px) {
  .hero-copy { display:contents; }
  .hero-copy > .eyebrow { order:0; margin-top:62px; }
  .hero-copy > h1 { order:1; }
  .hero-copy > .intro { order:2; }
  .hero > .hero-art { order:3; margin-top:40px; }
  .hero-copy > .signup { order:4; margin-top:20px; }
}

/* Optical centering compensates for the artwork's uneven transparent margins. */
@media (max-width:560px) {
  .hero-stage .hero-circle { left:4.5%; }
  .hero-stage .rider-hero-layer { left:-1.25%; }
}

/* Balance the visible wide-screen composition, including the artwork overhang. */
@media (min-width:1700px) { .page-shell, .confirmation-page { position:relative; left:-56px; } }

/* Provider privacy note follows Notify me; readable wrapping on narrow screens. */
.signup .ml-embedded .motooly-signup-privacy {
  margin:12px 0 0 !important;
  padding:0 !important;
  width:100% !important;
}
.signup .ml-embedded .motooly-signup-privacy p {
  margin:0 !important;
  font-size:11px !important;
  line-height:1.5 !important;
  white-space:normal !important;
}

@media (max-width:560px) { .signup .ml-embedded .motooly-signup-privacy p { font-size:12px !important; } }

/* Final mobile composition and concise provider confirmation. */
.signup .ml-embedded .ml-form-successContent p { font-size:15px !important; line-height:1.5 !important; }
@media (max-width:560px) {
  .hero-stage .rider-hero-layer { bottom:calc(-3% + 24px); }
  .confirmation-bike-stage { bottom:calc(4% + 42px); }
}

/* The illustration overhang must not widen the confirmation viewport. */
@media (min-width:901px) and (max-width:1540px) { .confirmation-page { overflow-x:clip; } }

/* iOS zooms focused form inputs below16px; keep zoom accessible, prevent auto-zoom. */
@media (max-width:560px) { #motooly-signup .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="email"], #motooly-signup .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input[type="text"] { font-size:16px !important; } }

/* Keep provider floats from placing Notify me beside reCAPTCHA on wide forms. */
.signup .ml-embedded .ml-block-form { display:flow-root !important; }
.signup .ml-embedded .ml-form-embedSubmit,
.signup .ml-embedded .motooly-signup-privacy {
  float:none !important;
  clear:both !important;
}

/* Match the landing typeface rather than the provider Open Sans default. */
#motooly-signup .ml-form-successContent h4,
#motooly-signup .ml-form-successContent p,
#motooly-signup .ml-form-successContent p * { font-family:Arial, Helvetica, sans-serif !important; }