/* Homepage sections added with the DoorLoop-structured layout. Scoped to .home-main and prefixed hv2- so the
   kept sections (rental choices, portfolio tour, benefits) keep their homepage-launch.css styling. */
.home-main { --hv2-lime:var(--ink-purple-lime,#84d828); --hv2-purple-deep:var(--brand-purple-fill-1,#5220b4); --hv2-hairline:#e2e8f0; }
.home-main .hv2-center { text-align:center; }
.home-main .hv2-lede { font-size:18px; color:var(--muted); max-width:62ch; margin:16px auto 0; }
.home-main .hv2-link { display:inline-flex; align-items:center; min-height:44px; font-size:16px; font-weight:600; color:var(--link-ink); text-decoration:underline; text-underline-offset:3px; }
.home-main .hv2-checks { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.home-main .hv2-checks li { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:16px; color:var(--text-secondary); }
.home-main .hv2-checks li::before { content:""; width:22px; height:22px; margin-top:1px; border-radius:50%; border:1px solid var(--ai-border); background:var(--ai-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat; }
.home-main .hv2-card { background:var(--page); border:1px solid var(--hv2-hairline); border-radius:24px; padding:28px; }
.home-main .hv2-card h3 { font-size:24px; line-height:1.2; letter-spacing:-.5px; }
.home-main .hv2-card p { font-size:16px; color:var(--muted); margin-top:10px; }
.home-main .hv2-shot { border:1px solid var(--hv2-hairline); border-radius:16px; background:var(--page); overflow:hidden; box-shadow:0 24px 50px -28px rgba(27,10,60,.4); }
.home-main .hv2-shot-bar { display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-bottom:1px solid var(--hv2-hairline); background:#fbfbfd; }
.home-main .hv2-shot-bar i { width:9px; height:9px; border-radius:50%; background:var(--hv2-hairline); }
.home-main .hv2-shot-bar span { margin-left:10px; font-size:12px; color:var(--muted); }
.home-main .hv2-shot img { width:100%; height:auto; }
.home-main .hv2-on-dark :is(a,button,summary):focus-visible { outline-color:#fff; }

/* Homepage header: transparent over the illustrated hero with white links, then a full-width white bar once the page scrolls
   (.nav-scrolled comes from the flush-header script in base.html). An open mobile menu keeps its own light sheet. */
body.pd-home { --pd-nav-h:79px; }
body.pd-home .home-main .hv2-hero { margin-top:calc(-1 * var(--pd-nav-h)); padding-top:calc(64px + var(--pd-nav-h)); }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush:not(.nav-scrolled),
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush:not(.nav-scrolled) .nav-shell { background:transparent !important; border-color:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush:not(.nav-scrolled) :is(.nav-top,#mobile-menu-btn) { color:#fff !important; }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush:not(.nav-scrolled) :is(.nav-top,#mobile-menu-btn):hover { color:var(--ink-purple-lime,#84d828) !important; }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush:not(.nav-scrolled) :is(a,button):focus-visible { outline:2px solid #fff; outline-offset:3px; }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush.nav-scrolled { background:#fff !important; border-bottom-width:0 !important; box-shadow:0 1px 0 #e2e8f0,0 8px 22px -16px rgba(15,23,42,.35) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.pd-home:not(.public-menu-open) nav#site-nav.nav-flush.nav-scrolled .nav-shell { background:#fff !important; border-color:transparent !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* Hero */
.home-main .hv2-hero { --marketing-title:clamp(1.875rem,3.9vw,3.375rem); position:relative; isolation:isolate; color:var(--text-on-dark); padding:88px 0 0; }
.home-main .hv2-hero-bg { position:absolute; inset:0 0 var(--hv2-shot-overhang,260px); overflow:hidden; z-index:-1; background:#14283f url("/images/homepage/hero-blue-hour-v1.webp") center bottom/cover no-repeat; }
.home-main .hv2-hero h1 { color:#fff; font-size:clamp(40px,5.4vw,68px); line-height:1.04; letter-spacing:-2.6px; font-weight:800; max-width:32ch; margin-inline:auto; }
.home-main .hv2-hero h1 span { color:var(--hv2-lime); }
/* Whole words only: the shared phone rule hyphenates marketing titles, which split "management" here; AI-powered stays on one line. */
.home-main .hv2-hero h1[data-marketing-title] { -webkit-hyphens:manual; hyphens:manual; overflow-wrap:normal; }
body #main-content .hv2-hero h1[data-marketing-title] > span { white-space:nowrap; text-wrap-mode:nowrap; }
.home-main .hv2-hero-sub { margin:22px auto 0; font-size:19px; max-width:58ch; color:var(--text-on-dark-muted); }
.home-main .hv2-hero .cta-row { justify-content:center; margin-top:30px; }
.home-main .hv2-hero .hv2-stars { position:relative; z-index:2; display:flex; justify-content:center; align-items:center; gap:12px; margin:18px 0 0; color:#f5b301; font-size:26px; letter-spacing:4px; line-height:1; text-shadow:0 2px 10px rgba(27,10,60,.25); }
.home-main .hv2-hero .hv2-stars-label { color:#fff; font-size:16px; font-weight:600; letter-spacing:0; text-shadow:none; }
/* Keep the dashboard size while extending its glass backing 32px on each side. */
.home-main .hv2-hero-shot { --hv2-shot-side-padding:150px; position:relative; margin:36px auto 0; max-width:1180px; padding:40px var(--hv2-shot-side-padding); }
.home-main .hv2-hero-shot::before { content:""; position:absolute; inset:0 calc(var(--hv2-shot-side-padding) - 32px); z-index:0; pointer-events:none; border-radius:28px; background:rgba(255,255,255,.14); box-shadow:0 0 0 1px rgba(124,58,237,.10),0 40px 80px -44px rgba(27,10,60,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.home-main .hv2-hero-shot .hv2-shot { border-radius:14px; box-shadow:0 30px 70px -28px rgba(27,10,60,.6); }
.home-main .hv2-hero-shot .hv2-shot img { max-height:none; }
/* AI agent mascots work the dashboard like staff: Mozart types in Chat with Mozart, Luna taps Payments,
   Pilot taps Manage on Pilot Mode. The stage matches the screenshot width, so cqw units map image positions
   (capture CSS px / 1920 * 100) and the 36px window bar offsets the top. */
.home-main .hv2-shot-stage { position:relative; z-index:1; container-type:inline-size; }
/* Anchor the house's visible base to the dashboard's top-right edge. */
.home-main .hv2-mascot { position:absolute; z-index:1; right:-4px; bottom:100%; transform:translateY(16%); width:210px; height:auto; pointer-events:none; filter:drop-shadow(0 24px 30px rgba(27,10,60,.35)); }
.home-main .hv2-ops { position:absolute; inset:0; pointer-events:none; z-index:1; }
.home-main .hv2-op { position:absolute; border:2px solid var(--hv2-lime); border-radius:8px; opacity:0; box-shadow:0 0 0 4px rgba(132,216,40,.22),0 0 18px rgba(132,216,40,.55); }
.home-main .hv2-op-chat { left:41.3cqw; top:calc(36px + 6.35cqw); width:28.3cqw; height:2.1cqw; border-radius:10px; animation:hv2-op-chat 4.4s ease-in-out infinite; }
.home-main .hv2-op-typing { position:absolute; left:56cqw; top:calc(36px + 7.4cqw); display:flex; gap:.45cqw; padding:.5cqw .8cqw; border-radius:999px; background:var(--ai-bg,#f3edff); transform:translateY(-50%); animation:hv2-op-typing 4.4s ease-in-out infinite; }
.home-main .hv2-op-typing i { width:.6cqw; height:.6cqw; min-width:4px; min-height:4px; border-radius:50%; background:var(--hv2-purple-deep); animation:hv2-dot 1s ease-in-out infinite; }
.home-main .hv2-op-typing i:nth-child(2) { animation-delay:.15s; }
.home-main .hv2-op-typing i:nth-child(3) { animation-delay:.3s; }
.home-main .hv2-op-nav { left:.4cqw; top:calc(36px + 13.33cqw); width:10cqw; height:2.3cqw; animation:hv2-op-first 5s ease-in-out .8s infinite; }
.home-main .hv2-op-card { left:12.4cqw; top:calc(36px + 12cqw); width:21.1cqw; height:9.45cqw; animation:hv2-op-second 5s ease-in-out .8s infinite; }
.home-main .hv2-op-pilot { left:81.9cqw; top:calc(36px + 42.15cqw); width:16.65cqw; height:16.2cqw; animation:hv2-op-second 5s ease-in-out 2.6s infinite; }
.home-main .hv2-tap { position:absolute; width:3.2cqw; height:3.2cqw; min-width:18px; min-height:18px; border-radius:50%; border:2px solid var(--hv2-lime); background:rgba(132,216,40,.45); opacity:0; }
.home-main .hv2-tap-luna { left:1.45cqw; top:calc(36px + 14.5cqw); animation:hv2-tap 5s ease-out .8s infinite; }
.home-main .hv2-tap-pilot { left:95.95cqw; top:calc(36px + 44.55cqw); animation:hv2-tap 5s ease-out 2.6s infinite; }
.home-main .hv2-agent { position:absolute; z-index:2; height:auto; pointer-events:none; filter:drop-shadow(0 18px 18px rgba(27,10,60,.35)); --j:1; transform-origin:50% 80%; will-change:transform; }
.home-main .hv2-agent-mozart { left:55cqw; top:calc(36px - 4.3cqw); width:11cqw; animation:hv2-work-mozart 4.4s ease-in-out infinite; }
.home-main .hv2-agent-luna { left:-10.5cqw; top:calc(36px + 10.1cqw); width:12cqw; animation:hv2-work-luna 5s ease-in-out .8s infinite; }
.home-main .hv2-agent-pilot { right:-9.5cqw; top:calc(36px + 42.5cqw); width:11cqw; animation:hv2-work-pilot 5s ease-in-out 2.6s infinite; }
/* Mozart nods while typing, then leans back as the message sends. */
@keyframes hv2-work-mozart {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  8%,24%,40%,56% { transform:translateY(calc(3px * var(--j))) rotate(-6deg) scale(1.02,.98); }
  16%,32%,48% { transform:translateY(0) rotate(-2deg); }
  66% { transform:translateY(calc(-14px * var(--j))) rotate(6deg); }
  78% { transform:translateY(0) rotate(-3deg) scale(1.04,.96); }
}
@keyframes hv2-op-chat { 0%,100% { opacity:0; } 8%,58% { opacity:.7; } 64% { opacity:1; box-shadow:0 0 0 6px rgba(132,216,40,.35),0 0 26px rgba(132,216,40,.8); } 80% { opacity:0; } }
@keyframes hv2-op-typing { 0%,58% { opacity:1; } 64%,92% { opacity:0; } 100% { opacity:1; } }
@keyframes hv2-dot { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-40%); opacity:1; } }
/* Luna and Pilot reach in, tap, then watch the result light up. */
@keyframes hv2-work-luna {
  0%,100% { transform:translate(0,0) rotate(3deg); }
  26% { transform:translate(0,calc(-8px * var(--j))) rotate(-2deg); }
  40% { transform:translate(calc(6px * var(--j)),calc(-3px * var(--j))) rotate(10deg); }
  46% { transform:translate(calc(10px * var(--j)),calc(2px * var(--j))) rotate(14deg) scale(1.04,.96); }
  56% { transform:translate(0,0) rotate(5deg); }
  76% { transform:translate(0,calc(-6px * var(--j))) rotate(0); }
}
@keyframes hv2-work-pilot {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  26% { transform:translate(0,calc(-8px * var(--j))) rotate(2deg); }
  40% { transform:translate(calc(-6px * var(--j)),calc(-3px * var(--j))) rotate(-10deg); }
  46% { transform:translate(calc(-10px * var(--j)),calc(2px * var(--j))) rotate(-14deg) scale(1.04,.96); }
  56% { transform:translate(0,0) rotate(-5deg); }
  76% { transform:translate(0,calc(-6px * var(--j))) rotate(0); }
}
@keyframes hv2-tap { 0%,45% { opacity:0; transform:translate(-50%,-50%) scale(.3); } 47% { opacity:.95; transform:translate(-50%,-50%) scale(.5); } 66%,100% { opacity:0; transform:translate(-50%,-50%) scale(2.4); } }
@keyframes hv2-op-first { 0%,45%,92%,100% { opacity:0; } 50%,80% { opacity:1; } }
@keyframes hv2-op-second { 0%,52%,96%,100% { opacity:0; } 60%,88% { opacity:1; } }

/* Proof row and tiles */
.home-main .hv2-after-hero { padding-top:72px; }
.home-main .hv2-strip { display:flex; gap:0; width:100vw; margin:0 0 0 calc(50% - 50vw); padding:4px 0 12px; overflow:hidden; --hv2-tile-w:216px; }
.home-main .hv2-strip-track { display:flex; flex:none; gap:16px; padding-right:16px; animation:hv2-marquee 70s linear infinite; }
.home-main .hv2-strip:is(:hover,:focus-within) .hv2-strip-track { animation-play-state:paused; }
@keyframes hv2-marquee { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.home-main .hv2-tile { position:relative; flex:0 0 var(--hv2-tile-w); aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:var(--panel); }
.home-main .hv2-tile img { width:100%; height:100%; object-fit:cover; }
.home-main .hv2-tile.hv2-stat { display:grid; align-content:end; padding:24px; color:#fff; isolation:isolate; }
.home-main .hv2-tile.hv2-stat::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--card-art) center/cover no-repeat; pointer-events:none; }
.home-main .hv2-tile.hv2-stat strong { font-size:44px; line-height:1; letter-spacing:-1.6px; font-weight:800; color:#fff; }
.home-main .hv2-tile.hv2-sky strong,.home-main .hv2-tile.hv2-sky span { color:#0b2a4a; }
.home-main .hv2-tile.hv2-stat span { margin-top:8px; font-size:16px; font-weight:600; line-height:1.3; color:#fff; }
.home-main .hv2-tile.hv2-stat .hv2-star { font-size:.8em; vertical-align:top; margin-left:2px; }
.home-main .hv2-tile.hv2-purple { background:linear-gradient(160deg,var(--hv2-purple-deep),var(--brand-purple)); --card-art:url("/images/homepage-20261018/card-art-swoosh-1.png?v=20261018a"); }
.home-main .hv2-tile.hv2-lime { background:linear-gradient(160deg,#6fc21c,#4e9a0f); --card-art:url("/images/homepage-20261018/card-art-swoosh-2.png?v=20261018a"); }
.home-main .hv2-tile.hv2-sky { background:linear-gradient(160deg,#d6f0ff 0%,#9fd3ff 55%,#6fb8f5 100%); --card-art:url("/images/homepage-20261018/card-art-swoosh-3.png?v=20261018a"); }
.home-main .hv2-tile.hv2-ink { background:linear-gradient(160deg,#1b1c1a,#34362f); --card-art:url("/images/homepage-20261018/card-art-swoosh-1.png?v=20261018a"); }
.home-main .hv2-tile.hv2-ink strong { color:#b5fc4f; }

/* AI band and bento */
.home-main .hv2-ai-band { background:linear-gradient(180deg,#f6f3ff 0%,#ebe5ff 100%); }
/* AI band, after the reference: a tall main card with text above its image, and two side cards with a square image beside the text. Images are GPT-made and carry their own pastel ground. */
.home-main .hv2-bento { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); gap:20px; margin-top:40px; }
.home-main .hv2-bento-main { display:flex; flex-direction:column; gap:28px; padding:36px; }
.home-main .hv2-bento-main > div { display:flex; flex-direction:column; align-items:flex-start; }
.home-main .hv2-bento-main h3 { font-size:30px; letter-spacing:-.8px; }
.home-main .hv2-bento-side { display:grid; gap:20px; }
.home-main .hv2-bento-side .hv2-card { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:24px; align-items:center; padding:20px 28px 20px 20px; }
.home-main .hv2-bento-side .hv2-card > div { display:flex; flex-direction:column; align-items:flex-start; }
/* AI band visuals, built in code after the reference: calm pastel tiles holding a few focused UI pieces, one lifted,
   a small cursor on the key action and the GPT mascots placed at the edge. Text scales with the tile. */
.home-main .hv2-bento .hv2-ai-tile { container-type:inline-size; border-radius:18px; overflow:hidden; }
.home-main .hv2-bento-main .hv2-ai-tile { background:radial-gradient(120% 90% at 85% 10%,#efe8ff 0%,rgba(239,232,255,0) 55%),linear-gradient(150deg,#f6f2ff 0%,#dcd3fb 100%); }
.home-main .hv2-ai-tile-pink { background:radial-gradient(110% 90% at 90% 0%,#ffe3ef 0%,rgba(255,227,239,0) 55%),linear-gradient(160deg,#fff0f6 0%,#f7cfe4 100%); }
.home-main .hv2-ai-tile-mint { background:radial-gradient(110% 90% at 10% 0%,#eafbe0 0%,rgba(234,251,224,0) 55%),linear-gradient(160deg,#f3fbe4 0%,#cdeedf 100%); }
.home-main .ax { position:relative; display:grid; gap:.7em; padding:6% 7%; color:#1b1c1a; font-size:clamp(10px,2.35cqw,15px); line-height:1.3; text-align:left; }
.home-main .ax svg { width:1.15em; height:1.15em; stroke-width:2; }
.home-main .ax b { font-weight:700; }
.home-main .ax small { display:block; font-size:.86em; color:#556274; font-weight:500; }
.home-main .ax-card { display:grid; gap:.35em; justify-items:start; padding:.9em 1em; border-radius:12px; background:#fff; box-shadow:0 10px 24px -16px rgba(27,10,60,.35); }
.home-main .ax-card-lift { box-shadow:0 0 0 5px rgba(255,255,255,.55),0 18px 34px -16px rgba(27,10,60,.45); }
.home-main .ax-card b { font-size:1.15em; }
.home-main .ax-pill { display:inline-flex; align-items:center; padding:.15em .7em; border-radius:999px; font-size:.78em; font-weight:700; white-space:nowrap; }
.home-main .ax-pill-red { background:#fde4e7; color:#b3122a; }
.home-main .ax-pill-purple { background:#efe9ff; color:#5b21b6; }
.home-main .ax-tag { flex:none; padding:.2em .7em; border-radius:999px; background:#eef0f4; color:#475569; font-size:.78em; font-weight:600; white-space:nowrap; }
.home-main .ax-btn { position:relative; display:inline-flex; align-items:center; padding:.45em 1.1em; border-radius:999px; font-size:.9em; font-weight:700; white-space:nowrap; }
.home-main .ax-btn-go { background:#00C434; box-shadow:inset 0 0 0 2px #84D828; color:#1b1c1a; }
.home-main .ax-btn-ghost { border:2px solid #6d28d9; color:#6d28d9; background:#fff; }
.home-main .ax-btn-lime { background:#c9f232; color:#1b1c1a; }
/* Tap ripple on the control each mascot works. */
.home-main .ax-tap { position:absolute; left:50%; top:50%; width:1.6em; height:1.6em; border-radius:50%; border:2px solid #84D828; background:rgba(132,216,40,.4); opacity:0; transform:translate(-50%,-50%) scale(.3); pointer-events:none; }
.home-main .ax-mascot { position:absolute; z-index:3; width:8.5em; height:auto; pointer-events:none; filter:drop-shadow(0 10px 12px rgba(27,10,60,.28)); transform-origin:50% 80%; will-change:transform; }
/* Main: sources on the left feed the list; the lifted action sits over the lower edge. */
.home-main .ax-main { grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr); align-items:center; column-gap:1.4em; padding:8% 8% 15% 5%; }
/* Mozart hovers at the end of the lifted late fee and taps Approve. */
.home-main .ax-main .ax-mascot { right:-2%; bottom:21%; width:7.6em; animation:ax-work-mozart 8s ease-in-out infinite; }
.home-main .ax-sources { display:grid; gap:.6em; }
.home-main .ax-sources span { display:flex; align-items:center; gap:.5em; padding:.6em .8em; border-radius:10px; background:#fff; box-shadow:0 8px 20px -14px rgba(27,10,60,.35); font-weight:600; color:#1b1c1a; }
.home-main .ax-sources svg { color:#6d28d9; }
.home-main .ax-win { display:grid; gap:.45em; padding:1em 1.1em 1.3em; border-radius:14px; background:#fff; box-shadow:0 14px 30px -18px rgba(27,10,60,.4); }
.home-main .ax-head { display:flex; align-items:center; gap:.5em; margin-bottom:.2em; }
.home-main .ax-head b { font-size:1.3em; }
.home-main .ax-count { display:inline-grid; place-items:center; min-width:1.5em; height:1.5em; padding:0 .4em; border-radius:999px; background:#c9f232; color:#1b1c1a; font-style:normal; font-weight:800; font-size:.86em; }
.home-main .ax-row { display:flex; align-items:center; gap:.6em; padding:.55em 0; border-top:1px solid #eef0f4; }
.home-main .ax-row .ax-txt { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:600; }
.home-main .ax-ico { display:grid; place-items:center; width:1.9em; height:1.9em; border-radius:50%; background:#efe9ff; color:#6d28d9; flex:none; }
.home-main .ax-lift { position:absolute; left:3%; right:16%; bottom:3%; display:flex; align-items:center; gap:.6em; padding:.85em 1em; border-radius:14px; background:#fff; box-shadow:0 0 0 5px rgba(255,255,255,.55),0 22px 40px -18px rgba(27,10,60,.5); transform:rotate(-1deg); }
.home-main .ax-lift-copy { flex:1; min-width:0; display:grid; }
.home-main .ax-lift-copy b { font-size:1.25em; }
/* Inbox: a message becomes a request and a drafted reply. */
.home-main .ax-inbox { padding:7% 8% 8%; row-gap:.8em; }
/* Luna reads the thread from above the drafted reply, then taps Send reply. */
.home-main .ax-inbox .ax-mascot { right:-4%; bottom:21%; width:6.6em; animation:ax-work-luna 8s ease-in-out 1.6s infinite; }
.home-main .ax-bubble { position:relative; justify-self:start; max-width:80%; padding:.75em 1em; border-radius:14px 14px 14px 4px; background:#fff; box-shadow:0 10px 24px -16px rgba(27,10,60,.35); font-weight:600; font-size:1.05em; }
.home-main .ax-bubble small { margin-bottom:.15em; }
.home-main .ax-inbox .ax-card { width:88%; }
.home-main .ax-inbox .ax-card-lift { width:84%; justify-self:start; transform:rotate(-1.2deg); }
.home-main .ax-line { display:block; width:78%; height:.45em; border-radius:999px; background:#e5e7eb; margin-top:.2em; }
.home-main .ax-line-short { width:52%; }
.home-main .ax-inbox .ax-btn-lime { justify-self:end; margin:.2em 1.2em 0 0; }
/* Control: the mode, the rules, the safeguard. */
.home-main .ax-control { padding:19% 8% 8%; }
/* Pilot sits beside the mode switch and taps Co-pilot. */
.home-main .ax-control .ax-mascot { top:-2%; left:3%; width:6.4em; animation:ax-work-pilot 8s ease-in-out 3.4s infinite; }
.home-main .ax-seg-card { width:82%; justify-self:end; }
.home-main .ax-seg { display:grid; grid-template-columns:repeat(3,1fr); width:100%; padding:.25em; border-radius:999px; background:#f1f5f9; }
.home-main .ax-seg span { position:relative; padding:.4em .1em; border-radius:999px; text-align:center; font-weight:600; color:#475569; font-size:.8em; white-space:nowrap; }
.home-main .ax-seg span.is-on { background:#c9f232; color:#1b1c1a; font-weight:700; animation:ax-press-lime 8s ease-in-out 3.4s infinite; }
.home-main .ax-main .ax-btn-go { animation:ax-press-green 8s ease-in-out infinite; }
.home-main .ax-inbox .ax-btn-lime { animation:ax-press-lime 8s ease-in-out 1.6s infinite; }
.home-main .ax-main .ax-tap { animation:ax-ripple 8s ease-out infinite; }
.home-main .ax-inbox .ax-tap { animation:ax-ripple 8s ease-out 1.6s infinite; }
.home-main .ax-control .ax-tap { animation:ax-ripple 8s ease-out 3.4s infinite; }
.home-main .ax-rules { width:100%; gap:0; justify-items:stretch; }
.home-main .ax-rules b { white-space:nowrap; }
.home-main .ax-rules div { display:flex; align-items:center; justify-content:space-between; gap:.6em; padding:.45em 0; }
.home-main .ax-rules div + div { border-top:1px solid #eef0f4; }
.home-main .ax-guard { grid-template-columns:auto 1fr auto; align-items:center; width:100%; column-gap:.6em; transform:rotate(-1.2deg); }
.home-main .ax-guard b { white-space:nowrap; }
.home-main .ax-guard svg { color:#6d28d9; width:1.4em; height:1.4em; }
.home-main .ax-toggle { position:relative; display:block; width:2.6em; height:1.45em; border-radius:999px; background:#00C434; }
.home-main .ax-toggle i { position:absolute; top:.15em; right:.15em; width:1.15em; height:1.15em; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); }
@media (max-width:860px) {
  .home-main .ax-main { grid-template-columns:1fr; padding:14% 6% 18%; }
  /* Phones: the tiles are wider relative to the type, so each mascot sits a little higher to keep its label clear at the tap. */
  .home-main .ax-main .ax-mascot { right:-3%; bottom:27%; width:6.4em; }
  .home-main .ax-inbox .ax-mascot { right:14%; bottom:26%; width:6em; }
  .home-main .ax-control .ax-mascot { top:3%; left:2%; width:5.8em; }
  .home-main .ax-sources { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .home-main .ax-sources span { justify-content:center; padding:.5em .4em; font-size:.9em; }
}
/* Each mascot floats, leans in, dips onto its control at 46%, and settles back; the control presses and ripples at the same moment. */
@keyframes ax-work-mozart {
  0%,100% { transform:translate(0,0) rotate(-4deg); }
  18% { transform:translate(0,-.5em) rotate(3deg); }
  34% { transform:translate(-.6em,.2em) rotate(-10deg); }
  44% { transform:translate(-.5em,1.1em) rotate(-16deg) scale(1.04,.96); }
  50% { transform:translate(-.5em,.9em) rotate(-14deg); }
  62% { transform:translate(-.2em,-.4em) rotate(4deg); }
  80% { transform:translate(0,-.3em) rotate(-2deg); }
}
@keyframes ax-work-luna {
  0%,100% { transform:translate(0,0) rotate(4deg); }
  18% { transform:translate(-.3em,-.5em) rotate(-3deg); }
  34% { transform:translate(-.4em,.4em) rotate(10deg); }
  44% { transform:translate(-.3em,1.2em) rotate(16deg) scale(1.04,.96); }
  50% { transform:translate(-.3em,1em) rotate(14deg); }
  62% { transform:translate(0,-.5em) rotate(-4deg); }
  80% { transform:translate(.1em,-.2em) rotate(2deg); }
}
@keyframes ax-work-pilot {
  0%,100% { transform:translate(0,0) rotate(-3deg); }
  18% { transform:translate(.2em,-.5em) rotate(4deg); }
  34% { transform:translate(.6em,.3em) rotate(10deg); }
  44% { transform:translate(1.6em,.9em) rotate(16deg) scale(1.04,.96); }
  50% { transform:translate(1.6em,.7em) rotate(14deg); }
  62% { transform:translate(.2em,-.5em) rotate(-4deg); }
  80% { transform:translate(0,-.2em) rotate(2deg); }
}
@keyframes ax-press-green { 0%,42%,58%,100% { transform:scale(1); box-shadow:inset 0 0 0 2px #84D828; } 47% { transform:scale(.94); box-shadow:inset 0 0 0 2px #84D828,0 0 0 .35em rgba(132,216,40,.45); } 52% { transform:scale(1.03); box-shadow:inset 0 0 0 2px #84D828,0 0 0 .5em rgba(132,216,40,0); } }
@keyframes ax-press-lime { 0%,42%,58%,100% { transform:scale(1); box-shadow:none; } 47% { transform:scale(.94); box-shadow:0 0 0 .35em rgba(132,216,40,.45); } 52% { transform:scale(1.03); box-shadow:0 0 0 .5em rgba(132,216,40,0); } }
@keyframes ax-ripple { 0%,44% { opacity:0; transform:translate(-50%,-50%) scale(.3); } 47% { opacity:.9; transform:translate(-50%,-50%) scale(.6); } 64%,100% { opacity:0; transform:translate(-50%,-50%) scale(2.6); } }
@media (prefers-reduced-motion:reduce) {
  .home-main .ax-mascot,.home-main .ax-btn,.home-main .ax-seg span,.home-main .ax-tap { animation:none; }
  .home-main .ax-tap { opacity:0; }
}
.home-main .hv2-bento .hv2-link { padding-top:10px; }

/* Testimonials */
.home-main .hv2-quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.home-main .hv2-quote { position:relative; display:grid; align-content:end; min-height:460px; margin:0; padding:30px; border-radius:24px; overflow:hidden; color:#fff; background:#1b1c1a; }
.home-main .hv2-quote::before { content:""; position:absolute; inset:0; background:var(--swoosh); opacity:.95; }
.home-main .hv2-quote::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(180deg,rgba(27,28,26,0),#1b1c1a 55%); }
.home-main .hv2-quote > * { position:relative; z-index:1; }
.home-main .hv2-quote .hv2-q { font-size:72px; line-height:.6; font-weight:800; color:var(--accent); font-family:Georgia,serif; margin-bottom:22px; }
.home-main .hv2-quote blockquote { margin:0; font-size:20px; line-height:1.4; font-weight:600; letter-spacing:-.2px; }
.home-main .hv2-quote blockquote small { display:block; margin-top:10px; font-size:14px; font-weight:400; color:rgba(255,255,255,.75); }
.home-main .hv2-quote :is(.hv2-card-score, .hv2-verified-customer) { display:none; }
.home-main .hv2-quote figcaption { margin-top:18px; font-size:14px; color:rgba(255,255,255,.85); }
.home-main .hv2-quote figcaption b { display:block; color:#fff; font-weight:700; font-size:15px; }
.home-main .hv2-quote figcaption a { color:var(--hv2-lime); text-decoration:underline; text-underline-offset:3px; }
.home-main .hv2-quote .hv2-src { position:absolute; top:24px; left:30px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.9); }
.home-main .hv2-quote.hv2-one { --swoosh:radial-gradient(70% 60% at 20% 20%,#c9f232 0,rgba(201,242,50,0) 60%),linear-gradient(160deg,#5220b4,#8c6cff); --accent:#c9f232; }
.home-main .hv2-quote.hv2-two { --swoosh:radial-gradient(70% 60% at 80% 20%,#9fd8ff 0,rgba(159,216,255,0) 60%),linear-gradient(160deg,#1d4ed8,#6a9eff); --accent:#cceeff; }
.home-main .hv2-quote.hv2-three { --swoosh:radial-gradient(70% 60% at 30% 10%,#ab8cf2 0,rgba(171,140,242,0) 60%),linear-gradient(160deg,#35224d,#6d28d9); --accent:#ab8cf2; }
.home-main .hv2-quotes-foot { margin-top:22px; }

/* Why cards and support band */
.home-main .hv2-why { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.home-main .hv2-why .hv2-card { padding:26px; }
.home-main .hv2-why img { width:120px; height:120px; object-fit:contain; margin-bottom:18px; }
.home-main .hv2-why h3 { font-size:20px; }
/* Support card: a soft lavender ground with a lime glow behind the illustration, instead of flat grey. */
.home-main .hv2-support { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; padding:52px 56px; margin-top:40px; border-radius:24px; border:0; background:radial-gradient(60% 80% at 88% 50%,rgba(201,242,50,.32) 0%,rgba(201,242,50,0) 70%),linear-gradient(135deg,#f6f2ff 0%,#e6dcfb 100%); box-shadow:0 20px 40px -32px rgba(82,32,180,.35); }
.home-main .hv2-support h2 { color:#1b1c1a; }
.home-main .hv2-support .hv2-checks li { color:#334155; }
.home-main .hv2-support .hv2-checks li::before { background-color:#fff; border-color:#d6c9ff; }
.home-main .hv2-support h2 { font-size:clamp(26px,3vw,36px); margin-top:0; }
.home-main .hv2-support > div > p { font-size:17px; color:var(--muted); margin-top:12px; }
.home-main .hv2-support .hv2-checks { grid-template-columns:1fr 1fr; margin-top:22px; }
.home-main .hv2-support .hv2-support-action { margin-top:24px; }
.home-main .hv2-support img { width:min(100%,380px); height:auto; justify-self:center; }

/* Portfolio types */
.home-main .hv2-types { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:40px; }
.home-main .hv2-type { position:relative; display:block; aspect-ratio:3/4.4; border-radius:20px; overflow:hidden; background:#1b1c1a; }
.home-main .hv2-type img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.home-main .hv2-type:is(:hover,:focus-visible) img { transform:scale(1.04); }
.home-main .hv2-type::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65)); }
.home-main .hv2-type span { position:absolute; z-index:1; left:18px; right:18px; bottom:18px; color:#fff; font-size:20px; font-weight:700; letter-spacing:-.3px; text-shadow:0 2px 12px rgba(0,0,0,.6); }

/* Listing sites band */
.home-main .hv2-networks { background:#f3f8ff; }
/* Listing-site logos run as one continuous full-width line; the second track is a hidden duplicate for a seamless loop. */
.home-main .hv2-logos { display:flex; width:100vw; margin:36px 0 0 calc(50% - 50vw); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.home-main .hv2-logos-track { display:flex; flex:none; min-width:100vw; justify-content:space-around; align-items:center; gap:64px; padding:8px 64px 8px 0; animation:hv2-marquee 36s linear infinite; }
.home-main .hv2-logos:hover .hv2-logos-track { animation-play-state:paused; }
.home-main .hv2-logos img { flex:none; height:28px; width:auto; max-width:150px; object-fit:contain; }

/* FAQ */
.home-main .hv2-faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:40px; }
.home-main .hv2-faq-grid details { border:1px solid var(--hv2-hairline); border-radius:12px; background:var(--page); padding:0 22px; align-self:start; }
.home-main .hv2-faq-grid summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:72px; padding:14px 0; font-size:16px; font-weight:700; cursor:pointer; }
.home-main .hv2-faq-grid summary::-webkit-details-marker { display:none; }
.home-main .hv2-faq-grid summary::after { content:""; width:12px; height:12px; flex:none; margin-right:4px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); transition:transform .2s; }
.home-main .hv2-faq-grid details[open] summary::after { transform:rotate(225deg); }
.home-main .hv2-faq-grid p { padding:0 0 18px; font-size:15px; color:var(--muted); }
.home-main .hv2-faq-grid p + p { margin-top:-8px; }
.home-main .hv2-faq-grid a { color:var(--link-ink); text-decoration:underline; text-underline-offset:3px; }

/* Closing panel */
.home-main .closing-panel.hv2-closing { display:block; text-align:center; padding:72px 32px; background:linear-gradient(135deg,#35224d 0%,var(--hv2-purple-deep) 60%,var(--purple) 100%); }
.home-main .hv2-closing::before { content:""; position:absolute; width:520px; height:520px; right:-160px; top:-200px; border-radius:50%; background:radial-gradient(circle,rgba(201,242,50,.22),transparent 62%); }
.home-main .hv2-closing::after { content:""; position:absolute; inset:0; border-radius:inherit; background:url("/images/illustrations/home-closing-backdrop-jony.png") center bottom 12px / 100% auto no-repeat; opacity:.22; pointer-events:none; }
.home-main .hv2-closing > * { position:relative; z-index:1; }
.home-main .hv2-closing p { max-width:48ch; margin:14px auto 0; font-size:18px; }
.home-main .hv2-closing .cta-row { justify-content:center; margin-top:28px; }
.home-main .hv2-closing .micro { font-size:13px; }

@media (min-width:861px) and (max-width:1279px) {
  .home-main .hv2-hero { --hv2-shot-overhang:220px; }
  .home-main .hv2-hero-shot { --hv2-shot-side-padding:110px; padding:32px var(--hv2-shot-side-padding); }
  .home-main .hv2-mascot { width:168px; }
}
@media (max-width:1100px) {
  .home-main .hv2-types { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px) {
  .home-main .hv2-hero { padding-top:52px; }
  body.pd-home .home-main .hv2-hero { padding-top:calc(40px + var(--pd-nav-h)); }
  .home-main .hv2-hero h1 { letter-spacing:-1.6px; }
  .home-main .hv2-hero-sub { font-size:17px; }
  .home-main .hv2-hero .cta-row .button { flex:1 1 100%; }
  .home-main .hv2-hero { --hv2-shot-overhang:calc(28vw + 16px); }
  /* Cover would crop to the empty middle of the wide art; fit its width so the houses flank the actions. */
  .home-main .hv2-hero-bg { background-size:120% auto; background-position:center bottom 110px; }
  .home-main .hv2-hero-shot { margin:96px auto 0; padding:0; }
  .home-main .hv2-hero-shot::before { display:none; }
  .home-main .hv2-hero-shot .hv2-shot img { max-height:none; }
  .home-main .hv2-hero .cta-row { position:relative; z-index:2; }
  /* Phones: agents keep their laptop spots, tucked onto the frame edges: Mozart on top, Luna left, Pilot right. */
  .home-main .hv2-agent { filter:drop-shadow(0 12px 12px rgba(27,10,60,.3)); --j:.45; }
  .home-main .hv2-agent-mozart { left:53cqw; top:-18px; width:50px; }
  .home-main .hv2-agent-luna { left:-8px; top:calc(36px + 8.1cqw); width:50px; }
  .home-main .hv2-agent-pilot { left:auto; right:-8px; top:calc(36px + 38.5cqw); width:48px; }
  .home-main .hv2-mascot { width:104px; }
  .home-main .hv2-after-hero { padding-top:48px; }
    .home-main .hv2-types { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .home-main .hv2-strip { --hv2-tile-w:200px; }
  .home-main .hv2-strip-track { gap:12px; padding-right:12px; }
  .home-main .hv2-tile.hv2-stat strong { font-size:38px; }
  .home-main .hv2-type { flex:0 0 58%; scroll-snap-align:start; }
  .home-main .hv2-bento,.home-main .hv2-bento-side .hv2-card { grid-template-columns:1fr; }
  .home-main .hv2-bento-main { gap:22px; padding:24px; }
  .home-main .hv2-bento-main h3 { font-size:26px; }
  .home-main .hv2-bento-side .hv2-card { gap:18px; padding:20px; }
  .home-main .hv2-quotes,.home-main .hv2-why { grid-template-columns:1fr; }
  .home-main .hv2-quote { min-height:360px; }
  .home-main .hv2-support { grid-template-columns:1fr; padding:32px 24px; }
  .home-main .hv2-support .hv2-checks { grid-template-columns:1fr; }
  .home-main .hv2-support img { order:-1; width:220px; }
  .home-main .hv2-faq-grid { grid-template-columns:1fr; }
  .home-main .closing-panel.hv2-closing { padding:48px 24px 112px; }
  .home-main .hv2-closing::after { background-position:center bottom 8px; opacity:.3; }
}
@media (max-width:420px) {
  .home-main .hv2-hero h1 { font-size:30px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-main .hv2-agent,.home-main .hv2-op-typing,.home-main .hv2-op-typing i { animation:none; }
  .home-main .hv2-op,.home-main .hv2-tap { animation:none; opacity:0; }
  .home-main .hv2-strip { overflow-x:auto; }
  .home-main .hv2-strip-track { animation:none; }
  .home-main .hv2-strip-track[aria-hidden] { display:none; }
  .home-main .hv2-logos { width:auto; margin:36px 0 0; -webkit-mask-image:none; mask-image:none; }
  .home-main .hv2-logos-track { flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:center; gap:22px 40px; padding:0; animation:none; }
  .home-main .hv2-logos-track[aria-hidden] { display:none; }
  .home-main .hv2-type img { transition:none; }
}

/* Tighter page rhythm: sections trimmed by about a third and one heading-to-content gap everywhere; sections that sit flush keep their zero top padding. */
.home-main :is(#features,#ai,#syndication,#questions) { padding-top:64px; padding-bottom:64px; }
.home-main .hv2-after-hero { padding-top:52px; padding-bottom:64px; }
.home-main #portfolio { padding-top:64px; padding-bottom:52px; }
.home-main #portfolio + #why-rentari { padding-top:52px; }
.home-main #why-rentari { padding-bottom:28px; }
.home-main #customer-voices { padding-top:28px; padding-bottom:36px; }
.home-main :is(#why,#portfolios) { padding-bottom:64px; }
.home-main section.closing { padding-bottom:52px; }
.home-main #main .section-heading { margin-bottom:32px; }
.home-main #main .section-heading + * { margin-top:0; }
@media (max-width:800px) {
  .home-main :is(#features,#ai,#syndication,#questions) { padding-top:40px; padding-bottom:40px; }
  .home-main .hv2-after-hero { padding-top:36px; padding-bottom:40px; }
  .home-main #portfolio { padding-top:40px; padding-bottom:36px; }
  .home-main #portfolio + #why-rentari { padding-top:36px; }
  .home-main :is(#why,#portfolios) { padding-bottom:40px; }
  .home-main section.closing { padding-bottom:36px; }
  .home-main #main .section-heading { margin-bottom:22px; }
}
