/* 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-video,
.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%; }

/* 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));
  }
}

/* ---------- 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; }
}