/* Otto landing — MOBILE (≤767px). Spec: design_handoff_otto_mobile/README.md
   (390px design width, fluid 360–430; verify against screenshots/ at 390×844
   and Chrome's iPhone 17 Pro viewport, 402×874).

   Loaded via <link media="(max-width: 767px)"> so desktop never applies any of
   this — every rule here can therefore override freely without @media wrappers.
   The DOM is shared with desktop: these rules restyle it, hide desktop-only
   layers, and reveal the .m-only elements (hidden ≥768px by styles.css).
   main.js skips its desktop scroll-linked entrances at this width; the only
   motion here is the hero⇄strip dissolve, the two soft-fade entrances
   (mobile.js), and the ambient loops. */

/* ---------- Base ---------- */

body {
  min-width: 0; /* desktop's 1180 floor would force a zoomed-out layout */
  background: #F3EDE0;
}

/* body ONLY — the value propagates to the viewport, so the wide seam art still
   clips. Setting it on html AND body would make body its own clip box and
   break every position:sticky inside it (the stage pin stopped pinning). */
body { overflow-x: hidden; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid #F2C24E;
  outline-offset: 3px;
}

/* desktop-only layers and chrome */
.toolbar,
.hero-rail,
.bg-scrim,
.strip-bg,
.qb-2,
.qb-5,
.meadow-band,
.op-cloud,
.op-cloud2,
.fold-clouds,
.sky-veil,
.pricing-band,
.pr-seam,
.pr-left .pr-cta,
.faq-rail .faq-scene,
.cs-tagline,
.scroll-hint,
.s3-tuner { display: none !important; }

/* Desktop's scroll-linked entrances don't run here (main.js gates them), so
   their opacity-0 pre-states must rest visible. The soft-fade sections
   (use-case + testimonial) animate via mobile.js one-shots instead. */
.op-h, .op-sub, .op-right, .op-card-w,
.dfy-h, .dfy-sub, .dfy-cta-row, .dfy-step, .dfy-bar,
.pricing [data-an], .faq [data-an], .closing [data-an],
.faq-item,
.pb-clouds { opacity: 1; }

.tm-rise { opacity: 1; transform: none; }

/* ---------- Stage: hero ⇄ strip pin (100dvh + one extra viewport) ---------- */

.stage-wrap {
  height: calc(100vh + max(100vh, 600px));
  height: calc(100dvh + max(100dvh, 600px));
}

.stage {
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
}

/* ---------- Hero ---------- */

/* day art: the flipped expanded still (portrait tiling — desk lower third).
   Selectors carry img so they outrank styles.css's `.hero-bg img { object-
   position: center }` — a bare .bg-day silently loses that fight (the dc's
   crop shipped without effect until this was caught).
   51.5% is her split-the-difference call (8/18): 50% (the as-rendered state
   she first assessed) read left-heavy, a bezel-centered 52.8% read right-
   heavy — the midpoint lands back on the dc's own value, now actually applied. */
.hero-bg img.bg-day {
  top: -11%;
  height: 115%;
  object-position: 51.5% 50%;
  transform: scaleX(-1);
}

/* night variant: 49.5% centers ITS computer (measured at 402×690, like the
   day art — this art isn't flipped, so its % runs the other way). DELIBERATE
   deviation from the dc's 10%, which crops the glowing CRT out of frame
   entirely at every mobile size — a stale prototype value. */
.hero-bg img.bg-night { object-position: 49.5% 50%; }

/* ---------- Phone hero loop (≤767 only) ----------
   Same mechanism as desktop: the still is the loop's frame 0 and the video
   cross-fades in over it (styles.css .bg-video/.is-playing); main.js assigns
   the src, and pauses it for night mode and reduced motion.

   Wrapped in @media because tablet.css @imports this sheet for its own band:
   the loop is a 9:16 render for the phone and there is no tablet-framed one,
   so 768–959 keeps the landscape still (and re-hides .bg-video itself). The
   wrapper is a no-op under this sheet's own <link media="(max-width: 767px)">. */
@media (max-width: 767px) {
  /* the phone's poster (hero-day-phone.jpg) IS hero-loop-phone.mp4's frame 0 and
     already carries the 9:16 crop, so it has to sit exactly where the video sits
     or the .5s fade-in morphs. The flip and overscan above belong to the
     landscape still — still correct for the tablet band, which keeps it. */
  .hero-bg img.bg-day {
    top: 0;
    height: 100%;
    object-position: center;
    transform: none;
  }
}

/* mobile hero UI (m-only) — dc h3v variant: scrimmed headline zone up top,
   chat card + CTA row pinned to the bottom of the viewport */
.mh {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(16px + env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left));
}

.mh-top {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mh-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
}

.mh-logo img { height: 24px; display: block; }

.mh-burger {
  appearance: none;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 2px 0 0;
  cursor: pointer;
  transition: opacity .18s ease;
}

.mh-burger:hover { opacity: .65; }

.mh-burger span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 243, 226, .95);
  transition: transform .2s ease;
}

.mh-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.mh-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mh-menu {
  position: absolute;
  z-index: 6;
  top: calc(68px + env(safe-area-inset-top));
  left: max(22px, env(safe-area-inset-left));
  right: max(22px, env(safe-area-inset-right));
  display: grid;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255, 244, 226, .28);
  border-radius: 18px;
  background: rgba(22, 26, 39, .88);
  box-shadow: 0 24px 60px rgba(10, 16, 34, .32);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.mh-menu a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 12px;
  color: #FFFDF8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.mh-menu .mh-menu-cta {
  justify-content: center;
  margin-top: 4px;
  background: #FFF3E2;
  color: #1E2433;
}

.mh-head { position: relative; margin-top: 16px; }

/* soft navy pool behind the copy (dc mh=6) — blurred so it has no edge */
.mh-scrim {
  position: absolute;
  z-index: -1;
  left: -30px;
  top: -118px;
  right: -44px;
  bottom: -30px;
  background: radial-gradient(ellipse 100% 100% at 32% 52%, rgba(16, 44, 92, .38), rgba(16, 44, 92, .19) 58%, transparent 82%);
  filter: blur(8px);
  pointer-events: none;
}

.mh-head h1 {
  position: relative;
  margin: 0;
  max-width: 330px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.14;
  letter-spacing: -.7px;
  color: #FFFDF8;
}

.mh-head h1 .dim { font-weight: 500; color: rgba(255, 244, 226, .8); }

.mh-head h1 em {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.05em;
  letter-spacing: -.4px;
}

.mh-sub {
  position: relative;
  margin: 9px 0 0;
  max-width: 344px;
  text-wrap: balance;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 252, 245, .95);
  text-shadow: 0 1px 2px rgba(10, 16, 22, .5), 0 3px 16px rgba(10, 16, 22, .4);
}

.mh-stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* chat card — same glass recipe as desktop's (shared day/night vars) */
.mh-card-w {
  transform-origin: 100% 100%;
  transition: opacity .65s ease, transform .65s cubic-bezier(.55, 0, .6, .4);
}

/* script done: the card cedes to the launcher (shrinks toward the corner) */
.mh-card-w.done {
  opacity: 0;
  transform: scale(.55) translate(26%, 20%);
  pointer-events: none;
}

.mh-card {
  border-radius: 20px;
  background: var(--card-bg);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 30px 70px rgba(15, 22, 40, .25);
  animation: float 7s ease-in-out infinite;
  transition: background-color .9s ease;
}

.mh-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(27, 26, 23, .08);
}

.mh-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(243, 234, 218, .8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mh-avatar img { height: 14px; }

.mh-id { display: flex; flex-direction: column; gap: 2px; }

.mh-biz {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--title);
  transition: color .9s ease;
}

.mh-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  color: #2E9558;
}

.mh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34A863;
  animation: ping 2.4s infinite;
}

/* message viewport — the dc's 96px window, bottom-anchored. Only the top
   feather changed from the dc (26px → 3px over three of her passes: keep the
   box size, bring the fade right up against the line — it just anti-aliases
   the clip edge now, never dims a bubble that's still being read). */
.mh-win {
  position: relative;
  height: 96px;
  margin: 8px 11px 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3px);
  mask-image: linear-gradient(to bottom, transparent, #000 3px);
}

.mh-flow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 2px;
}

.mh-flow .bubble {
  max-width: 88%;
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 13px;
}

.mh-flow .bubble.otto {
  background: rgba(251, 246, 234, .94);
  border-radius: 13px 13px 13px 4px;
  box-shadow: 0 3px 8px -3px rgba(43, 39, 31, .12);
}

.mh-flow .bubble.visitor {
  background: rgba(43, 39, 31, .9);
  border-radius: 13px 13px 4px 13px;
}

.mh-dots {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  background: rgba(251, 246, 234, .94);
  padding: 12px 13px;
  border-radius: 13px 13px 13px 4px;
  animation: ottoIn .35s ease both;
}

.mh-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8F887A;
  animation: ottoDot 1.2s ease-in-out infinite;
}

.mh-dots i:nth-child(2) { animation-delay: .15s; }
.mh-dots i:nth-child(3) { animation-delay: .3s; }

.mh-pill {
  align-self: flex-start;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(43, 39, 31, .12);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #2A2620;
  cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(43, 39, 31, .18);
  animation: ottoPop .5s cubic-bezier(.22, .9, .3, 1) both;
}

.mh-replay {
  appearance: none;
  border: 0;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(24, 22, 18, .38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 244, 226, .28);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(255, 243, 226, .85);
  cursor: pointer;
  animation: ottoIn .5s ease both;
  transition: opacity .18s ease;
}

.mh-replay:hover { opacity: .75; }

.mh-replay-i { font-size: 12px; line-height: 1; }

.mh-cta { display: flex; gap: 11px; }

.mh-btn-primary,
.mh-btn-glass {
  flex: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
}

.mh-btn-primary {
  background: #FFF3E2;
  color: #1E2433;
  padding: 15px 0;
  box-shadow: 0 12px 32px rgba(20, 28, 46, .22);
  transition: transform .18s ease;
}

.mh-btn-primary:hover { transform: translateY(-1px); }

.mh-btn-glass {
  background: rgba(255, 255, 255, .19);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .55);
  color: #FFFDF8;
  padding: 14px 0;
  transition: opacity .18s ease;
}

.mh-btn-glass:hover { opacity: .75; }

/* ---------- Audience strip (dissolves in over the hero) ---------- */

.strip { background: #FAF3E4; }

.strip-head {
  flex: none;
  min-height: 0;
  justify-content: flex-start;
  gap: 13px;
  padding: 64px 24px 18px;
}

.strip-head .eyebrow { font-size: 11px; margin-bottom: 0; }

.strip-head h2 {
  font-size: 29px;
  line-height: 1.16;
  letter-spacing: -.8px;
}

.strip-head h2 br { display: none; } /* the 390px measure breaks naturally */
.strip-head h2 em::before { content: ' '; } /* the space the removed <br> was standing in for */

.strip-sub {
  max-width: 335px;
  font-size: 14.5px;
  line-height: 1.5;
}

/* scene fills the rest of the viewport; art shows the center three huts */
.strip-scene {
  flex: 1 1 auto;
  height: auto;
  min-height: 46%;
}

.ss-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ss-bg img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 217.2%;
  height: auto;
  max-width: none;
  transform: translate(-22.7%, 23.4%);
}

.ss-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #FAF3E4, rgba(250, 243, 228, 0) 26%);
}

/* three bubbles, percent of the scene box. Re-laddered from the dc's 84/70/58
   (her 8/18 compositional pass at the 690pt Chrome viewport: the ladder was
   crowding the copy while the sky above the huts sat empty). An even 9% step
   fills the sky band and the deepest bubble sits tight above the left hut's
   roofline — do NOT push qb-4 below ~62%: at 690 the rooflines reach ~60% of
   the scene and anything lower lands a bubble on a building. */
.qb-3 { left: 38%; bottom: 80%; animation: bob 5.6s ease-in-out infinite; }
.qb-1 { left: 74%; bottom: 71%; animation: bob 6.2s ease-in-out 1.4s infinite; }
.qb-4 { left: 30%; bottom: 62%; animation: bob 5.9s ease-in-out 2.4s infinite; }

.qbubble { font-size: 12.5px; padding: 10px 14px; }

.qb-3 .qbubble { border-radius: 16px 16px 16px 5px; transform-origin: 0% 100%; }
.qb-1 .qbubble { border-radius: 16px 16px 5px 16px; transform-origin: 100% 100%; }
.qb-4 .qbubble { border-radius: 16px 16px 5px 16px; transform-origin: 100% 100%; }

.qb-typing { padding: 13px 14px; gap: 4px; }
.qb-typing .tdot { width: 6px; height: 6px; }

/* ---------- Seam: strip → use-case (grass continuation + paper cloud) ---------- */

.offplate {
  padding: 176px 22px 54px;
  display: block;
}

/* the strip's meadow runs past the joint and dissolves into the demo cream */
.op-seam-grass {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 181px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 12%, transparent 91%);
  mask-image: linear-gradient(to bottom, #000 12%, transparent 91%);
}

.op-seam-grass img {
  position: absolute;
  left: 0;
  top: 0;
  width: 217.2%;
  height: auto;
  max-width: none;
  transform: translate(-22.7%, -76.6%);
}

/* torn paper-cloud edge lapping the last grass from below */
.op-seam-cloud {
  position: absolute;
  left: -12%;
  top: -127px;
  width: 124%;
  height: auto;
  transform: scaleX(-1);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 26%, rgba(0, 0, 0, .5) 35%, transparent 48%);
  mask-image: linear-gradient(to bottom, #000 26%, rgba(0, 0, 0, .5) 35%, transparent 48%);
}

/* ---------- Use case — stacked copy → scenario rows → chat card ---------- */

.op-wrap {
  max-width: none;
  flex-direction: column;
  /* stretch, not the desktop's flex-start: in the column layout flex-start
     shrink-wraps the items — the chat card rendered narrower than the
     scenario cards and every bubble wrapped tighter than the dc */
  align-items: stretch;
  gap: 0;
}

.op-left { margin-top: 0; align-items: stretch; }

.op-h {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.8px;
}

.op-sub {
  margin-top: 12px;
  max-width: 340px;
  font-size: 14.5px;
}

.op-cards {
  margin-top: 20px;
  flex-direction: column;
  gap: 9px;
}

/* selector cards become medallion rows */
.op-card {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  border-radius: 17px;
  padding: 10px 12px 10px 10px;
}

.op-card:hover { transform: none; box-shadow: none; }

.op-card.active { box-shadow: 0 16px 36px rgba(43, 39, 31, .1); }

.op-card-top { order: 3; margin-left: auto; }

.op-num { display: none; }

.op-illo {
  order: 1;
  flex: none;
  align-self: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(164, 183, 209, .4), rgba(222, 224, 222, .5) 62%, #F1EBDC 100%);
  border: 1px solid rgba(43, 39, 31, .1);
  overflow: hidden;
  transition: border-color .3s ease;
}

.op-card.active .op-illo { border-color: rgba(199, 154, 62, .65); }

/* dc medallion look: the object multiplies against the medallion's own OPAQUE
   haze (safe here — the desktop warning is about the cards' translucent bgs) */
.op-illo img {
  width: 42px;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: none;
}

.op-card[data-scenario="0"] .op-illo img,
.op-card[data-scenario="1"] .op-illo img,
.op-card[data-scenario="2"] .op-illo img { height: 42px; }

.op-card-text { order: 2; flex: 1; margin-top: 0; gap: 2px; }

.op-card-title { font-size: 14px; }

.op-card-tag { font-size: 12.5px; }

.op-right {
  width: auto;
  margin-top: 20px;
}

/* chat window card — flat cream (no glass out here) */
.demo-card {
  border-radius: 20px;
  background: rgba(255, 253, 248, .9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(43, 39, 31, .08);
  box-shadow: 0 24px 60px rgba(43, 39, 31, .1);
}

.dc-header { padding: 12px 14px; }

.dc-avatar { width: 32px; height: 32px; background: #F3EADA; }
.dc-avatar img { height: 15px; }

.dc-biz { font-size: 13px; }
.dc-online { font-size: 10px; }

.dc-chip {
  margin: 11px 14px 0;
  height: 12px;
  letter-spacing: .15em;
}

.demo-window { height: 300px; margin: 8px 13px 0; }

.demo-window.over {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 36px);
  mask-image: linear-gradient(to bottom, transparent, #000 36px);
}

.demo-flow { gap: 9px; padding-bottom: 5px; }

.demo-flow .bubble { max-width: 86%; border-radius: 13px 13px 13px 4px; }
.demo-flow .bubble.visitor { background: rgba(43, 39, 31, .88); border-radius: 13px 13px 4px 13px; }
.demo-flow .bubble.otto { background: #F6F1E6; }

.dm-dots { background: #F6F1E6; padding: 13px 14px; border-radius: 13px 13px 13px 4px; }

.demo-flow .booked {
  border: 1px solid rgba(234, 223, 201, .9);
  border-radius: 13px;
  background: #FBF6EA;
  padding: 11px 13px;
}

.demo-flow .badge { width: 28px; height: 28px; font-size: 13px; background: rgba(228, 240, 228, .9); }
.demo-flow .booked-title { font-size: 12.5px; }
.demo-flow .booked-sub { font-size: 11px; color: #7E776A; }

.dc-input {
  margin: 9px 13px 13px;
  background: rgba(255, 255, 255, .55);
  padding: 8px 8px 8px 14px;
}

.dc-ph { font-size: 12px; }

.dc-send { width: 26px; height: 26px; font-size: 11.5px; }

/* ---------- Testimonial ---------- */

.testimonial {
  position: relative;
  min-height: 0;
  padding: 77px 28px 150px;
}

/* feathered cream wash straddling the joint above (no hard edge) */
.tm-wash {
  position: absolute;
  left: 0;
  right: 0;
  top: -48px;
  height: 96px;
  background: linear-gradient(to bottom, rgba(243, 237, 224, 0), #F3EDE0 36%, #F3EDE0 64%, rgba(243, 237, 224, 0));
  pointer-events: none;
}

.tm-rise { max-width: none; gap: 24px; }

.tm-quote {
  font-size: 19.5px;
  line-height: 1.6;
  letter-spacing: -.2px;
}

.tm-name { font-size: 14px; }
.tm-co { font-size: 14px; }

/* two drifting clouds in a zero-height layer after the section.
   overflow-x clip (never hidden — y must stay visible): the side bleeds would
   otherwise widen the mobile layout viewport, shrinking the whole page. */
.tm-clouds {
  position: relative;
  z-index: 2;
  height: 0;
  overflow-x: clip;
}

.tm-clouds img {
  position: absolute;
  opacity: .75;
  pointer-events: none;
}

.tmc-l {
  left: -96px;
  bottom: -10px;
  width: 250px;
  animation: mCloudL 11s ease-in-out 1.4s infinite;
}

.tmc-r {
  right: -104px;
  bottom: -86px;
  width: 280px;
  animation: mCloudR 9s ease-in-out infinite;
}

@keyframes mCloudL {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-9px); }
}

@keyframes mCloudR {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---------- Done for you — dusk storefront under a cream scrim ---------- */

.dfy {
  min-height: 0;
  display: block;
  padding: 96px 22px 120px;
}

.dfy-bg {
  left: 0;
  bottom: auto;
  top: 0;
  transform: none;
  width: 100%;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  object-position: 66% 100%;
  -webkit-mask-image: none;
  mask-image: none;
}

.dfy-blend {
  height: auto;
  bottom: 0;
  background: linear-gradient(to bottom, #F3EDE0, rgba(243, 237, 224, .96) 18%, rgba(243, 237, 224, .82) 34%, rgba(243, 237, 224, .45) 52%, rgba(243, 237, 224, .1) 70%, rgba(243, 237, 224, 0));
}

.dfy-wrap { max-width: none; }

.dfy-copy { width: auto; }

.dfy-h {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.8px;
}

.dfy-sub {
  margin-top: 12px;
  max-width: 335px;
  font-size: 14.5px;
}

.dfy-cta-row { margin-top: 22px; }

.dfy-cta { font-size: 14px; }

.dfy-grid {
  margin-top: 26px;
  width: auto;
  gap: 10px;
}

.dfy-step {
  gap: 6px;
  border-radius: 16px;
  padding: 14px 15px;
  background: rgba(252, 249, 241, .84);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.dfy-step-t { font-size: 13.5px; }

.dfy-step-b { font-size: 12px; line-height: 1.45; color: #615A4A; }

.dfy-bar {
  margin-top: 12px;
  width: auto;
  border-radius: 18px;
  padding: 17px 19px;
  background: rgba(38, 34, 27, .9);
  gap: 9px;
}

.dfy-bar-t { font-size: 15.5px; }

.dfy-checks { flex-direction: column; gap: 6px; }

/* ---------- Continuous warm sky (pricing + FAQ) ---------- */

/* the sky reads plainly here — no vh-mask fade, no parallax. It must also END
   at the closing's top: in the dc the night section sits OUTSIDE the sky
   wrapper, so the art's warm bottom row (#FDDFB0 exactly) lands on the
   FAQ→closing boundary and the underpaint continues it seamlessly. Our shared
   DOM keeps the closing inside .skywrap (desktop needs that), so mobile.js
   measures the closing and lifts the sky's bottom edge to match — otherwise
   the sky's pale middle met solid #FDDFB0 as a hard line at the joint. */
.sky-mask {
  bottom: var(--m-closing-h, 0px);
  -webkit-mask-image: none;
  mask-image: none;
}

/* 64px seam strip: the warm cloud bank laps over the dusk art's horizon.
   clip-x only — the art must still bleed 240px upward over the DFY dusk. */
.m-skyseam {
  position: relative;
  height: 64px;
  overflow-x: clip;
}

.m-skyseam img {
  position: absolute;
  left: -46%;
  top: -240px;
  width: 192%;
  height: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 22%, #000 70%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 22%, #000 70%, transparent 90%);
}

/* ---------- Pricing — stacked single card ---------- */

.pricing {
  min-height: 0;
  margin-top: 0;
  padding: 34px 22px 56px;
  display: block;
}

.pr-wrap { max-width: none; gap: 24px; }

.pr-head { gap: 12px; }

.pr-eyebrow { font-size: 11px; margin-bottom: 0; }

.pr-h {
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.8px;
}

.pr-sub { max-width: 330px; font-size: 14.5px; }

.pr-card {
  grid-template-columns: 1fr;
  border-radius: 24px;
}

.pr-left { padding: 28px 24px 24px; gap: 14px; }

.pr-amt { font-size: 52px; letter-spacing: -1.8px; }
.pr-per { font-size: 14.5px; }

.pr-desc { max-width: 300px; font-size: 14px; }

.pr-right {
  padding: 20px 24px 24px;
  gap: 12px;
  justify-content: flex-start;
  background: rgba(247, 242, 231, .55);
  border-top: 1px solid rgba(43, 39, 31, .09);
  font-size: 13.5px;
}

/* the CTA lives at the bottom of the card here (m-only copy; desktop's hides) */
.pr-cta-m {
  display: block;
  margin-top: 8px;
  align-self: stretch;
  text-align: center;
  padding: 14px 22px;
}

.pr-note { font-size: 12.5px; }

/* ---------- Cord divider ---------- */

.cord-divider { margin: -6px 0 0; }

/* no draw on mobile — the art rests fully shown */
.cord-reveal {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.cord-divider img {
  width: 186%;
  max-width: none;
  margin-left: -44%;
}

/* ---------- FAQ ---------- */

.faq {
  min-height: 0;
  display: block;
  padding: 36px 22px 110px;
}

.faq-wrap {
  max-width: none;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}

.faq-rail {
  position: static;
  width: auto;
}

.faq-eyebrow { font-size: 11px; margin-bottom: 0; }

.faq-h {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -.8px;
}

.faq-sub { font-size: 14.5px; }

.faq-q { padding: 17px 2px; gap: 16px; }

.faq-qt { font-size: 14.5px; letter-spacing: -.1px; }

.faq-plus { width: 24px; height: 24px; font-size: 14px; }

.faq-a { font-size: 13.5px; padding: 0 2px; }
.faq-item.open .faq-a { padding: 0 2px 18px; }

/* workstation illustration in a 120px reserve at the section's bottom
   (clip-x: the 400px art can poke past the edges of a 360-wide viewport) */
.faq-scene-m {
  position: relative;
  height: 120px;
  margin-top: 4px;
  pointer-events: none;
  overflow-x: clip;
}

.faq-scene-m img {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 400px;
  max-width: none;
  height: auto;
  opacity: .97;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, #000 42%, transparent 90%);
  mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, #000 42%, transparent 90%);
}

/* ---------- Night CTA + footer ---------- */

.closing {
  --cs-slide: 0px;
  min-height: min(110vh, 700px);
  min-height: min(110dvh, 700px);
}

/* underpaint: continues the warm sky's bottom color and settles into night,
   so the twilight PNG's thin top never shows cream through */
.closing::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  bottom: 0;
  background: linear-gradient(to bottom, #FDDFB0 0, #F2C79B 110px, #D39A9C 240px, #6F5A90 390px, #0F2B64 520px, #01183F 700px);
  pointer-events: none;
}

.cs-twilight {
  top: -240px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 240px);
  mask-image: linear-gradient(to bottom, transparent, #000 240px);
}

.cs-env { top: -140px; }

/* storybook shop, bottom-anchored; the mask kills the art's baked-in peach sky */
.cs-env img {
  left: auto;
  right: -30%;
  bottom: 0;
  width: 200%;
  max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 28%, #000 44%);
  mask-image: linear-gradient(to bottom, transparent 28%, #000 44%);
}

/* wisps ride the shop's window glow (dc anchors) */
.wisp { padding: 7px 9px; gap: 4px; }

.wisp-1 { right: 14%; bottom: 330px; border-radius: 10px 10px 4px 10px; }
.wisp-2 { right: 24%; bottom: 322px; border-radius: 10px 10px 10px 4px; }
.wisp-3 { right: 9%;  bottom: 308px; border-radius: 10px 10px 10px 4px; }

.wisp-bar { height: 4px; }
.wisp-1 .wisp-bar:first-child { width: 34px; }
.wisp-1 .wisp-bar:last-child { width: 22px; }
.wisp-3 .wisp-bar:first-child { width: 28px; }
.wisp-3 .wisp-bar:last-child { width: 38px; }

.wisp-dot { width: 4px; height: 4px; }

.cs-main { position: relative; align-items: flex-end; overflow-x: clip; } /* clip-x: the vignette's ±40px side bleed */

/* radial dark pool for copy contrast over the twilight */
.cs-main::before {
  content: '';
  position: absolute;
  left: -40px;
  right: -40px;
  top: 30%;
  bottom: -60px;
  background: radial-gradient(ellipse 85% 60% at 38% 55%, rgba(10, 14, 32, .52), rgba(10, 14, 32, .22) 55%, transparent 75%);
  pointer-events: none;
}

.cs-wrap {
  max-width: none;
  margin: 0;
  padding: 110px 26px 250px;
}

.cs-copy {
  position: relative;
  max-width: none;
  gap: 18px;
}

.cs-eyebrow { color: #A08F76; } /* matches the FAQ eyebrow (dc call) */

.cs-h {
  font-size: 37px;
  letter-spacing: -1px;
}

.cs-sub { max-width: 320px; font-size: 15px; }

.cs-cta {
  font-size: 14.5px;
  padding: 14px 28px;
  box-shadow: 0 16px 44px rgba(4, 8, 20, .5);
}

/* footer */
.cs-footer {
  padding: 10px max(24px, env(safe-area-inset-right))
    calc(36px + env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background: linear-gradient(to bottom, transparent, rgba(2, 8, 20, .55) 78%);
}

.cs-footer-wrap { max-width: none; }

.cs-footer-cols {
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 22px;
}

.cs-wordmark { height: 22px; margin-top: 26px; }

.cs-links { gap: 40px; flex-wrap: wrap; }

.cs-col-t { font-size: 9.5px; letter-spacing: .16em; color: rgba(251, 246, 234, .4); }

.cs-col a { font-size: 13.5px; color: rgba(251, 246, 234, .75); }

.cs-legal {
  padding-top: 18px;
  font-size: 12.5px;
  color: rgba(251, 246, 234, .45);
}

.cs-domain { font-size: 9.5px; }

/* ---------- Chat launcher (FAB) ---------- */

/* hidden until the hero script completes (mobile.js adds .on); rides above the
   hero CTA row while the hero is in view, then drops to the corner */
.otto-launcher {
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  cursor: pointer;
  transition: opacity .8s ease, transform .8s ease, bottom .5s ease;
}

.otto-launcher.on {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.otto-launcher.dock-hero { bottom: calc(104px + env(safe-area-inset-bottom)); }

.otto-launcher.avoid-actions {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.otto-launcher:hover { transform: translateY(-2px); }

.otto-launcher img { height: 18px; }

@media (max-width: 340px) {
  .mh-cta {
    align-self: center;
    width: 100%;
    max-width: 260px;
    flex-direction: column;
    gap: 10px;
    margin-bottom: max(0px, calc(600px - 100dvh));
  }

  .mh-btn-primary,
  .mh-btn-glass {
    flex: 0 0 auto;
    width: 100%;
  }

  .otto-launcher.dock-hero {
    bottom: calc(140px + env(safe-area-inset-bottom));
  }
}

/* ---------- Hero entrance — desktop's "Slow drift", on the mobile hero ----------
   Same keyframes, easing, durations and delays as styles.css's
   html[data-anim="2"] block, mapped element for element:

     .toolbar-pill -> .mh-top      dropIn 2.9s .25s
     .hero-copy h1 -> .mh-head h1  riseIn 3.2s .45s
     .chat-card    -> .mh-card     riseIn 3.4s .55s, then float from 3.95s
     .cta-row      -> .mh-cta      riseIn 3.2s .6s
     .hero-desc    -> .mh-sub      riseIn 3.2s .8s

   Notes on the two places this couldn't be a literal copy:

   · The rise goes on .mh-card, not .mh-card-w. The wrapper owns the transform
     that cedes the card to the launcher when the script finishes (.mh-card-w
     .done), and an animation with `both` would pin transform forever and stop
     that dead. Desktop puts rise and float on one element for the same reason
     it works here: float is delayed past the end of the rise (.55 + 3.4 = 3.95)
     so the two never fight over transform. The base float on .mh-card above
     still covers ?anim=off / ?anim=3, exactly as .chat-card's does.

   · .mh-scrim fades on the headline's clock. Desktop's .bg-scrim isn't
     animated, but that one is a full-bleed wash — this is a tight pool sitting
     directly behind the copy, and leaving it to arrive first shows a navy
     smudge with no text in it.

   --px resolves to 1px at these widths (its clamp floors at 10px/10), so the
   desktop offsets carry over as 8-12px unchanged. Gated on data-anim="2" like
   desktop, which keeps ?anim=off working for handoff screenshot comparisons. */

html[data-anim="2"] .mh-top {
  --drop: calc(-8 * var(--px));
  animation: dropIn 2.9s var(--ease-out-soft) .25s both;
}

html[data-anim="2"] .mh-head h1 {
  --rise: calc(10 * var(--px));
  animation: riseIn 3.2s var(--ease-out-soft) .45s both;
}

html[data-anim="2"] .mh-scrim { animation: fadeIn 3.2s var(--ease-out-soft) .45s both; }

html[data-anim="2"] .mh-card {
  --rise: calc(12 * var(--px));
  animation: riseIn 3.4s var(--ease-out-soft) .55s both,
             float 7s ease-in-out 3.95s infinite;
}

html[data-anim="2"] .mh-cta {
  --rise: calc(10 * var(--px));
  animation: riseIn 3.2s var(--ease-out-soft) .6s both;
}

html[data-anim="2"] .mh-sub {
  --rise: calc(8 * var(--px));
  animation: riseIn 3.2s var(--ease-out-soft) .8s both;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  .mh-card, .mh-dot, .qb, .wisp, .tm-clouds img { animation: none !important; }
  .mh-flow > *, .mh-pill { animation: none !important; }
  /* hero entrance off — elements simply appear in place, as desktop does */
  .mh-top, .mh-head h1, .mh-scrim, .mh-cta, .mh-sub { animation: none !important; }
}