/* 10hub.ai homeowner landing — engagement-audit fix pack (2026-09-25).
   Loaded after the page's own inline <style>, so it wins on equal specificity.
   Fixes 1, 2a, 2b, 2c(styling), 3. Fix 4 (images) ships as make-images.sh. */

/* ---------- FIX 1 · sticky ballpark bar on phones ---------- */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:10px max(14px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -12px 32px -24px #12201a66;
  transform:translateY(110%);transition:transform .32s var(--ease)}
.stick.on{transform:none}
.stick .btn{width:100%;padding:15px 20px}
.stick small{display:block;text-align:center;margin-top:6px;font:500 12px/1.2 var(--f-body);color:var(--ink-3)}
@media (max-width:720px){.stick{display:block} body.has-stick{padding-bottom:84px}}
@media (prefers-reduced-motion:reduce){.stick{transition:none}}

/* ---------- FIX 2 · shorter middle ---------- */
/* 2a · the roadmap: one line, the twelve notes a tap away */
.board.folded .board-notes{display:none}
.board.folded{padding:28px 32px}
.board-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font:500 15px/1.5 var(--f-body);color:var(--ink-2)}
.board-line b{color:var(--ink)}
.board-line .nbtn,.board-line button{font:600 14px/1 var(--f-body);color:var(--mint-deep);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (max-width:720px){.board.folded{padding:22px 20px;margin-top:36px}}

/* 2b · the founder quote: first sentences only on phones, the rest a tap away */
@media (max-width:720px){
  .founder blockquote.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
  .founder .more{font:600 14px/1 var(--f-body);color:var(--mint-deep);background:none;border:0;padding:8px 0 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
}
@media (min-width:721px){.founder .more{display:none}}

/* 2c · "After the button" is now one <details> in the FAQ (markup); its old block is removed from the page */
#after{display:none!important}
.faq details ol{margin:10px 0 0;padding-left:20px}
.faq details ol li{margin:6px 0}

/* ---------- FIX 3 · the three questions on the page (hero tiles) ---------- */
/* six tiles since 2026-09-29 (it was eight, four to a row): three to a row, two rows, no orphan */
.hpick{margin:22px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* explicit hex on purpose (2026-09-28): the tiles sit inside the dark hero, which remaps --ink, --ink-3 and
   --mint-deep to light values for its own text, so the tokens turned these light panels light-on-light
   (unreadable on a phone). The hex values are the suite's own root tokens, just pinned. */
.hpick a{display:flex;flex-direction:column;gap:4px;padding:12px 12px 11px;border-radius:14px;text-decoration:none;
  color:#0f1412;background:#ffffffeb;border:1px solid #0f14121a;backdrop-filter:blur(6px);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.hpick a:hover,.hpick a:focus-visible{transform:translateY(-2px);border-color:#2f6b4f;box-shadow:0 12px 24px -16px #2f6b4f73;outline:0}
.hpick small{font:600 10.5px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.06em;color:#2f6b4f}
.hpick b{font:600 14px/1.25 var(--f-body)}
.hpick .all{justify-content:center;align-items:center;color:#69726e}
@media (max-width:720px){.hpick{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.hpick a{padding:11px 11px 10px}}

/* ---------- hero phone (owner, 2026-09-25): hide the two floats over the mockup, scroll the estimate, slower glide ----------
   Floats hide on the OUTER .stage :hover (the tilt moves the inner .stage-3d, so a hover there flickers). */
.stage.ho-copy .float{transition:opacity .3s ease}
.stage.ho-copy:hover .float{opacity:0;pointer-events:none}
/* slower, more readable auto-scroll (was 26s) */
.stage.ho-copy .phone-scr .roll{animation-duration:46s}
/* while scrolling by hand: freeze the glide and make the screen a real scroll area */
.stage.ho-copy .phone-scr.manual{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;cursor:ns-resize}
.stage.ho-copy .phone-scr.manual::-webkit-scrollbar{width:0;height:0;display:none}
.stage.ho-copy .phone-scr.manual .roll{animation:none!important;transform:none!important}

/* ---------- scroll polish (owner, 2026-09-25): modern, engagement — all transform/opacity, reduced-motion-safe ---------- */
/* a thin progress line as you move down the page */
.sfx-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:130;
  background:linear-gradient(90deg,var(--mint,#8FBFB0),var(--mint-deep,#487468));box-shadow:0 0 10px -1px var(--mint,#8FBFB0);
  pointer-events:none;will-change:transform}
/* the hero phone lingers a touch as you scroll past (outer .stage only — the tilt lives on the inner .stage-3d).
   The stage is also a .rv reveal, so this must out-rank .js .rv.in{transform:none} and drop transform from
   its transition so the parallax tracks the scroll instead of lagging behind it. */
@media(min-width:961px){
  .js .hero .stage.ho-copy.rv{transition-property:opacity,filter}
  .js .hero .stage.ho-copy.rv.in{transform:translate3d(0,calc(var(--sy,0) * 0.05px),0);will-change:transform}
}
/* reveal polish: the existing fade-up gains a gentle scale */
.js .rv{transform:translateY(20px) scale(.99)}
.js .rv.in{transform:none}
/* section headings drift up a hair as they settle in (adds to the reveal, not a second animation) */
.js .rv h2{transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){.sfx-progress{display:none}.hero .stage.ho-copy{transform:none}.js .rv{transform:none}}

/* ---------- leads relabel (Jev A2, 2026-09-25): site walks are coming soon ---------- */
.soon{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;vertical-align:middle;
  font:600 11px/1.35 var(--f-body);letter-spacing:.04em;color:var(--mint-deep);
  background:var(--mint-bg,#eef6f3);border:1px solid var(--mint-line,#b9d8cd)}