/* =====================================================================
   home_v2.css: pixlel.com home page redesign (Caroline, Sept 2026).

   Ported from home/templates/home/pixlel/mockups/home_redesign_prototype.html.
   Every selector is scoped under .home-v2 so nothing here can reach the
   shared nav.html / footer.html / styles.css / Tailwind classes. The page
   root is <main class="home-v2">.

   Tokens live on .home-v2 (the prototype had them on :root).
   ===================================================================== */
.home-v2 {
    color-scheme: light;
    --ground: #F5F3F0;      /* off-white page */
    --paper: #FAF8F5;       /* cream cards */
    --white: #FFFFFF;
    --beige: #E8E2D9;       /* warm beige lines / pills */
    --taupe: #C4B8A8;
    --taupe-deep: #8C7E6E;
    --ink: #1A1A1A;         /* brand black */
    --ink-2: #3D3D3D;
    --muted: #6B6B6B;
    --faint: #B0B0B0;
    --blue: #4D66DD;        /* Pixlel blue, used sparingly */
    --blue-soft: rgba(77, 102, 221, 0.10);
    --green: #2F8F5B;

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(26,26,26,.04), 0 8px 24px rgba(26,26,26,.06);
    --shadow-lift: 0 2px 4px rgba(26,26,26,.05), 0 18px 40px rgba(26,26,26,.10);

    font-family: var(--font-body);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    /* No overflow-x:hidden here: body/html already clip sideways overflow, and
       an overflow rule on the root would also clip the zero-height footer
       cameo wrapper (overflow-x:hidden forces overflow-y to auto). */
    /* Real nav.html is position:fixed (64px / 80px tall); the first section clears it. */
    padding-top: 64px;
}
@media (min-width: 1024px) { .home-v2 { padding-top: 80px; } }
.home-v2 * { box-sizing: border-box; }
/* Jump-link targets land below the fixed nav */
.home-v2 [id] { scroll-margin-top: 96px; }

/* Cameo that waves from inside the footer: a zero-height wrapper after footer.html, so the figure
   is placed up from the footer's bottom edge onto the divider, just right of the social icons
   (footer container is max 1216px with 32px side padding; icons end 196px in).
   Off-white pen so it reads on the black footer. Footer columns stack below 1024px, so hide it there. */
.home-v2-foot-cameo { position: relative; height: 0; z-index: 3; }
.home-v2-foot-cameo .sf { pointer-events: none; width: 48px; left: calc(max(32px, 50% - 608px) + 236px); bottom: 68px; }
.home-v2.home-v2-foot-cameo .sf .pen, .home-v2.home-v2-foot-cameo .sf .head, .home-v2.home-v2-foot-cameo .sf .hand { stroke: #F4F1EC; }
.home-v2.home-v2-foot-cameo .sf .head, .home-v2.home-v2-foot-cameo .sf .hand { fill: #1A1A1A; }
@media (max-width: 1023px) { .home-v2-foot-cameo { display: none; } }

/* Logo marquee items (real customer logos, rendered by the template) */
.home-v2 .logo-item { height: 84px; min-width: 150px; padding: 0 24px; border-radius: var(--radius-md); border: 1px solid var(--beige); background: var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-v2 .logo-item.dark { background: var(--ink); border-color: var(--ink); }
.home-v2 .logo-item img { max-height: 56px; width: auto; max-width: 170px; object-fit: contain; display: block; }

/* Layout: one centered 1120px column, sections separated by generous air, the site's dotted ground throughout.
   Single light look on purpose: it mirrors pixlel.com, which has no dark theme. */
/* Element-level resets use :where() so they carry no extra specificity:
   Tailwind utility classes inside the page (the SEO feature-surface include)
   must be able to override them (text-white on links, mx-auto on headings). */
:where(.home-v2) h1, :where(.home-v2) h2, :where(.home-v2) h3 { text-wrap: balance; margin: 0; }
:where(.home-v2) p { margin: 0; }
:where(.home-v2) a { color: inherit; text-decoration: none; }
:where(.home-v2) button, :where(.home-v2) input { font: inherit; }
.home-v2 :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

.home-v2 .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
:where(.home-v2) section { padding-block: 96px; }
.home-v2 .eyebrow {
    font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.home-v2 .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.home-v2 .section-head { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: 56px; }
.home-v2 .section-head h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.home-v2 .section-head .sub { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--taupe-deep); max-width: 36ch; }

.home-v2 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--ink); color: var(--ground); border: 0; border-radius: 999px;
    padding: 14px 26px; font-weight: 600; cursor: pointer;
    transition: background .2s ease, transform .2s ease, gap .2s ease;
}
.home-v2 .btn:hover { background: var(--ink-2); gap: 12px; }
.home-v2 .btn:active { transform: scale(.98); }
.home-v2 .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--taupe); }
.home-v2 .btn-ghost:hover { background: var(--paper); }
.home-v2 .btn svg { width: 16px; height: 16px; }


/* ---------- Hero ---------- */
.home-v2 .hero { padding-block: 88px 24px; text-align: center; }
.home-v2 .hero h1 {
    font-size: clamp(2.4rem, 6.6vw, 4.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04;
    margin-block: 18px 18px;
}
.home-v2 .hero h1 span { color: var(--blue); }
.home-v2 .hero .tagline { font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--taupe-deep); margin-bottom: 32px; }
.home-v2 .hero-form { max-width: 440px; margin: 0 auto; display: grid; gap: 12px; }
.home-v2 .field {
    width: 100%; padding: 16px 20px; border-radius: var(--radius-md); border: 1px solid var(--beige);
    background: var(--white); color: var(--ink); font-size: 16px;
    transition: border-color .2s, box-shadow .2s;
}
.home-v2 .field::placeholder { color: var(--muted); }
.home-v2 .field:focus { outline: none; border-color: var(--taupe); box-shadow: 0 0 0 4px rgba(196,184,168,.25); }
.home-v2 .hero-form .btn { padding-block: 16px; }
.home-v2 .hero-micro { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: .85rem; color: var(--muted); margin-top: 6px; }
.home-v2 .hero-micro span { display: inline-flex; align-items: center; gap: 6px; }
.home-v2 .hero-micro svg { width: 14px; height: 14px; color: var(--taupe-deep); }
/* Price caption under a CTA (hero and the bottom "Build mine" card). Reads as a caption, not a section. */
.home-v2 .hero-cap { font-size: 13px; line-height: 1.4; font-weight: 400; color: #6B665F; margin: 8px 0 0; text-align: center; }
.home-v2 .count-copy .hero-cap { text-align: left; }

/* Notebook-sketch people walking in one line, each carrying a feature sign a different way.
   Drawn by buildParade(); positions set by script so the spacing never lets them overlap. */
.home-v2 .parade { position: relative; height: 280px; margin-top: 32px; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.home-v2 .parade::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1.5px; background: rgba(43,68,176,.22); border-radius: 2px; }
.home-v2 .nb-walk { position: absolute; left: 0; bottom: 8px; width: 204px; height: 255px; will-change: transform; }
.home-v2 .nb-walk svg { width: 100%; height: 100%; overflow: visible; }
.home-v2 .nb-leg-a { animation: nb-stride .52s ease-in-out infinite alternate; }
.home-v2 .nb-leg-b { animation: nb-stride .52s ease-in-out infinite alternate-reverse; }
.home-v2 .nb-swing { animation: nb-swing .52s ease-in-out infinite alternate-reverse; }
.home-v2 .nb-bob { animation: nb-bob .52s ease-in-out infinite alternate; }
.home-v2 .nb-boil-a { animation: nb-frame-a .3s steps(1, end) infinite; }
.home-v2 .nb-boil-b { animation: nb-frame-b .3s steps(1, end) infinite; }
@keyframes nb-stride { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes nb-swing { from { transform: rotate(-26deg); } to { transform: rotate(22deg); } }
@keyframes nb-bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes nb-frame-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes nb-frame-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
.home-v2 .hand-text { font-family: 'Caveat', 'Comic Sans MS', cursive; font-size: 12px; fill: #2B44B0; text-anchor: middle; }

/* ---------- Not your typical / How it works ---------- */
.home-v2 .growth h2 .serif { color: var(--blue); font-weight: 400; }
.home-v2 .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-v2 .steps-line { position: absolute; left: 12%; right: 12%; top: 26px; height: 2px; background: var(--beige); border-radius: 2px; }
.home-v2 .steps-line i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); border-radius: 2px; transition: width .6s ease; }
.home-v2 .step {
    position: relative; text-align: left; background: var(--paper); border: 1px solid var(--beige);
    border-radius: var(--radius-lg); padding: 22px; cursor: pointer; display: grid; gap: 14px; align-content: start;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.home-v2 .step:hover { border-color: var(--taupe); }
.home-v2 .step.is-active { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--ink); }
.home-v2 .step-num {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; font-weight: 700;
    background: var(--beige); color: var(--muted); transition: background .3s, color .3s;
}
.home-v2 .step.is-active .step-num, .home-v2 .step.is-done .step-num { background: var(--ink); color: var(--ground); }
.home-v2 .step h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }
.home-v2 .step p { font-size: .88rem; color: var(--muted); line-height: 1.5; }
.home-v2 .step-visual {
    height: 108px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--beige);
    display: grid; place-items: center; overflow: hidden; position: relative;
}
/* step 1: typing */
.home-v2 .v-type { font-size: .9rem; font-weight: 500; padding: 10px 14px; border: 1px solid var(--beige); border-radius: 10px; min-width: 70%; text-align: left; color: var(--ink); }
.home-v2 .v-type .caret { display: inline-block; width: 1.5px; height: 1em; background: var(--ink); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* step 2: blocks assembling */
.home-v2 .v-build { width: 72%; display: grid; gap: 6px; }
.home-v2 .v-build i { display: block; height: 10px; border-radius: 4px; background: var(--beige); transform-origin: left; }
.home-v2 .v-build i:nth-child(1) { width: 40%; background: var(--blue); }
.home-v2 .v-build i:nth-child(3) { width: 80%; }
.home-v2 .v-build i:nth-child(4) { width: 60%; height: 22px; background: var(--paper); border: 1px solid var(--beige); }
.home-v2 .step.is-active .v-build i { animation: grow .7s ease both; }
.home-v2 .step.is-active .v-build i:nth-child(2) { animation-delay: .15s; }
.home-v2 .step.is-active .v-build i:nth-child(3) { animation-delay: .3s; }
.home-v2 .step.is-active .v-build i:nth-child(4) { animation-delay: .45s; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* step 3: timer ring */
.home-v2 .v-timer { position: relative; width: 78px; height: 78px; }
.home-v2 .v-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.home-v2 .v-timer circle { fill: none; stroke-width: 6; }
.home-v2 .v-timer .track { stroke: var(--beige); }
.home-v2 .v-timer .fill { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 0; }
.home-v2 .step.is-active .v-timer .fill { animation: drain 3s linear both; }
@keyframes drain { from { stroke-dashoffset: 201; } to { stroke-dashoffset: 0; } }
.home-v2 .v-timer b { position: absolute; inset: 0; display: grid; place-items: center; font-size: .95rem; font-variant-numeric: tabular-nums; }
/* step 4: live */
.home-v2 .v-live { display: grid; gap: 8px; justify-items: center; }
.home-v2 .v-live .pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(47,143,91,.12); color: var(--green); font-weight: 700; font-size: .78rem; border-radius: 999px; padding: 5px 12px; }
.home-v2 .v-live .pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.home-v2 .step.is-active .v-live .pill i { animation: pulse 1.2s ease infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,143,91,.5); } 100% { box-shadow: 0 0 0 8px rgba(47,143,91,0); } }
.home-v2 .v-live small { font-size: .8rem; color: var(--muted); }

/* ---------- Dashboard ---------- */
.home-v2 .app {
    background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); overflow: hidden;
}
.home-v2 .app-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--beige); background: var(--paper); }
.home-v2 .app-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--beige); }
.home-v2 .app-bar span { margin-left: 10px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.home-v2 .app-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.home-v2 .side { border-right: 1px solid var(--beige); padding: 16px 12px; display: grid; gap: 4px; align-content: start; background: var(--paper); }
.home-v2 .side-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 4px 10px 8px; }
.home-v2 .side button {
    display: flex; align-items: center; gap: 10px; text-align: left; border: 0; background: none;
    padding: 9px 12px; border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--muted); cursor: pointer;
    transition: background .2s, color .2s;
}
.home-v2 .side button svg { width: 16px; height: 16px; flex-shrink: 0; }
.home-v2 .side button:hover { background: rgba(232,226,217,.55); color: var(--ink); }
.home-v2 .side button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.home-v2 .tiles {
    padding: 18px; display: grid; gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(136px, auto);
}
.home-v2 .tile {
    position: relative; border: 1px solid var(--beige); border-radius: var(--radius-md); background: var(--paper);
    padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, border-color .25s ease;
}
.home-v2 .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.home-v2 .tiles.has-focus .tile { opacity: .45; }
.home-v2 .tiles.has-focus .tile.is-focus { opacity: 1; border-color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.home-v2 .tile h3 { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.home-v2 .tile h3 svg { width: 16px; height: 16px; color: var(--taupe-deep); }
.home-v2 .tile .desc { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.home-v2 .t-design { grid-column: span 2; grid-row: span 2; }
.home-v2 .t-analytics, .home-v2 .t-domain, .home-v2 .t-edit { grid-column: span 2; }
.home-v2 .badge { font-size: .68rem; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 3px 8px; border-radius: 999px; justify-self: start; }
/* design tile mini-site */
.home-v2 .mini-site { border: 1px solid var(--beige); border-radius: 12px; background: var(--white); overflow: hidden; }
.home-v2 .mini-nav { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--beige); }
.home-v2 .mini-nav b { font-size: .72rem; }
.home-v2 .mini-nav span { display: flex; gap: 6px; }
.home-v2 .mini-nav span i { width: 22px; height: 5px; border-radius: 3px; background: var(--beige); }
.home-v2 .mini-hero { padding: 18px 14px; background: linear-gradient(135deg, #2B3A67, var(--blue)); color: #fff; display: grid; gap: 6px; }
.home-v2 .mini-hero strong { font-size: 1rem; letter-spacing: -.01em; }
.home-v2 .mini-hero small { font-size: .7rem; opacity: .85; }
.home-v2 .mini-hero em { font-style: normal; justify-self: start; background: #fff; color: var(--ink); font-size: .66rem; font-weight: 700; padding: 5px 10px; border-radius: 999px; margin-top: 4px; }
.home-v2 .mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; }
.home-v2 .mini-cards i { height: 34px; border-radius: 6px; background: var(--paper); border: 1px solid var(--beige); }
.home-v2 .row-list { display: grid; gap: 6px; }
.home-v2 .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .76rem; }
.home-v2 .row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-v2 .avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--beige); display: grid; place-items: center; font-size: .6rem; font-weight: 700; color: var(--ink-2); flex-shrink: 0; }
.home-v2 .chip { font-size: .64rem; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.home-v2 .chip.new { background: var(--blue-soft); color: var(--blue); }
.home-v2 .chip.won { background: rgba(47,143,91,.12); color: var(--green); }
.home-v2 .chip.warm { background: rgba(196,184,168,.35); color: var(--taupe-deep); }
.home-v2 .domain { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--white); border: 1px solid var(--beige); border-radius: 10px; padding: 8px 10px; font-size: .76rem; font-weight: 600; min-width: 0; }
.home-v2 .domain span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-v2 .ok { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: .68rem; white-space: nowrap; }
.home-v2 .ok svg { width: 12px; height: 12px; }
.home-v2 .product { display: flex; gap: 10px; align-items: center; }
.home-v2 .product i { width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, var(--beige), var(--taupe)); flex-shrink: 0; display: grid; place-items: center; color: var(--ink-2); }
.home-v2 .product i svg { width: 22px; height: 22px; }
.home-v2 .product div { display: grid; gap: 2px; font-size: .76rem; }
.home-v2 .product b { font-size: .82rem; }
.home-v2 .bars { display: grid; gap: 6px; }
.home-v2 .bar { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; font-size: .68rem; color: var(--muted); }
.home-v2 .bar i { display: block; height: 8px; border-radius: 4px; background: var(--beige); }
.home-v2 .bar.you i { background: var(--blue); }
.home-v2 .bar.you span { color: var(--ink); font-weight: 600; }
.home-v2 .spark { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: end; }
.home-v2 .spark .stat b { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.home-v2 .spark .stat small { font-size: .72rem; color: var(--muted); }
.home-v2 .spark .stat .up { color: var(--green); font-weight: 600; }
.home-v2 .spark svg { width: 100%; height: 64px; }
.home-v2 .rank { display: flex; align-items: baseline; gap: 8px; }
.home-v2 .rank b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.home-v2 .rank small { font-size: .74rem; color: var(--muted); }
.home-v2 .logo-demo { display: flex; align-items: center; gap: 10px; }
.home-v2 .logo-demo i { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--ground); display: grid; place-items: center; font-style: normal; font-weight: 800; font-family: var(--font-serif); font-size: 1.3rem; }
.home-v2 .logo-demo span { display: flex; gap: 4px; }
.home-v2 .logo-demo span u { width: 14px; height: 14px; border-radius: 50%; }
.home-v2 .tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.home-v2 .tool-chips span { font-size: .72rem; font-weight: 500; background: var(--white); border: 1px solid var(--beige); border-radius: 999px; padding: 5px 10px; }
.home-v2 .edit-demo { position: relative; font-size: .95rem; font-weight: 700; padding: 8px 10px; border: 1.5px dashed var(--blue); border-radius: 8px; justify-self: start; background: var(--white); }
.home-v2 .edit-demo small { position: absolute; top: -10px; left: 8px; font-size: .6rem; font-weight: 700; background: var(--blue); color: #fff; padding: 1px 6px; border-radius: 4px; }
.home-v2 .example-note { font-size: .7rem; color: var(--faint); text-align: right; padding: 0 18px 14px; }

/* ---------- Sketch-figure cameos (no signs), same pen style as the hero parade. Drawn by buildCameos(). ---------- */
.home-v2 .sf { position: absolute; overflow: visible; pointer-events: none; z-index: 3; }
.home-v2 .sf .pen { fill: none; stroke: #2B44B0; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.home-v2 .sf .head { fill: #FFFEF9; stroke: #2B44B0; stroke-width: 1.9; }
.home-v2 .sf .hand { fill: #FFFEF9; stroke: #2B44B0; stroke-width: 1.5; }
.home-v2 .sf text { font-family: 'Caveat', 'Comic Sans MS', cursive; fill: #2B44B0; }
.home-v2 .sf-dangle-a { animation: sf-dangle 1.1s ease-in-out infinite alternate; }
.home-v2 .sf-dangle-b { animation: sf-dangle 1.1s ease-in-out infinite alternate-reverse; }
.home-v2 .sf-wave { animation: sf-wave .45s ease-in-out infinite alternate; }
.home-v2 .sf-poke { animation: sf-poke 1.2s ease-in-out infinite; }
.home-v2 .sf-q { animation: sf-q 2s ease-in-out infinite; }
.home-v2 .sf-climb { animation: sf-climb 3.2s ease-in-out infinite; }
.home-v2 .sf-peek { animation: sf-peek 4s ease-in-out infinite; }
@keyframes sf-dangle { from { transform: rotate(-18deg); } to { transform: rotate(22deg); } }
@keyframes sf-wave { from { transform: rotate(-20deg); } to { transform: rotate(18deg); } }
@keyframes sf-poke { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes sf-q { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes sf-climb { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-8px); } }
@keyframes sf-peek { 0%, 20% { transform: translateY(26px); } 35%, 80% { transform: translateY(0); } 95%, 100% { transform: translateY(26px); } }
/* climber leans on the dashboard sidebar's divider, in the empty space under the last tool */
.home-v2 .side { position: relative; }
.home-v2 .sf-climber { width: 84px; right: 44px; bottom: 8px; transform: rotate(18deg); transform-origin: 50% 100%; }
.home-v2 .sf-climber .pen, .home-v2 .sf-climber .head { stroke-width: 2.3; }
/* paper-colored halo so the rungs don't cut through the figure */
.home-v2 .sf-climber .sf-climb { filter: drop-shadow(2px 0 0 var(--paper)) drop-shadow(-2px 0 0 var(--paper)) drop-shadow(0 2px 0 var(--paper)) drop-shadow(0 -2px 0 var(--paper)); }
.home-v2 .sf-peek-clip { position: absolute; left: 64px; top: -30px; width: 60px; height: 31px; overflow: hidden; pointer-events: none; }
.home-v2 .faq-title { position: relative; display: inline-block; }
.home-v2 .sf-jumper { position: absolute; left: 0; top: 0; width: 40px; height: 60px; z-index: 6; pointer-events: none; will-change: transform; }
.home-v2 .sf-jumper svg { width: 100%; height: 100%; overflow: visible; }
.home-v2 .sf-jumper [data-p] { display: none; }
.home-v2 .sf-jumper[data-pose="stand"] [data-p="stand"], .home-v2 .sf-jumper[data-pose="crouch"] [data-p="crouch"], .home-v2 .sf-jumper[data-pose="air"] [data-p="air"] { display: inline; }
.home-v2 .final-form, .home-v2 #offer .wrap, .home-v2 footer .wrap { position: relative; }
.home-v2 .plan.featured { overflow: visible; }
/* cameos that sit outside their element need side room: hide them where it runs out */
@media (max-width: 860px) { .home-v2 .sf-pointer, .home-v2 .sf-jumper, .home-v2 .sf-climber { display: none; } }
@media (max-width: 560px) { .home-v2 .sf-thinker { display: none; } }

/* ---------- Website showcase: screenshots scrolling full width, faded at both edges ----------
   Moved by home_v2.js (section 9): auto-slides, pauses on hover, and can be swiped/dragged sideways. */
.home-v2 .showcase { padding-block: 24px 72px; }
.home-v2 .showcase .section-head { margin-bottom: 40px; }
.home-v2 .showcase .section-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.home-v2 .showcase h2 .serif { color: var(--blue); font-weight: 400; }
.home-v2 .shots {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.home-v2 .shots.is-dragging { cursor: grabbing; }
.home-v2 .shots-track { display: flex; gap: 20px; width: max-content; height: 340px; will-change: transform; }
.home-v2 .shots-track img { display: block; height: 100%; width: auto; border-radius: 14px; flex-shrink: 0; box-shadow: var(--shadow); -webkit-user-drag: none; }
@media (max-width: 768px) { .home-v2 .shots-track { height: 220px; gap: 14px; } }

/* ---------- Assistant ---------- */
.home-v2 .assist-stage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; }
.home-v2 .chat { background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; height: 440px; overflow: hidden; }
.home-v2 .chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--beige); }
.home-v2 .chat-head .logo-mark { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; flex-shrink: 0; display: block; }
.home-v2 .chat-head b { font-size: .95rem; }
.home-v2 .chat-head small { display: block; font-size: .72rem; color: var(--green); font-weight: 500; }
.home-v2 .chat-log { padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; justify-content: flex-end; }
.home-v2 .msg { max-width: 82%; font-size: .88rem; line-height: 1.4; padding: 10px 14px; border-radius: 16px; animation: pop .3s ease both; }
.home-v2 .msg.user { align-self: flex-end; background: var(--ink); color: var(--ground); border-bottom-right-radius: 6px; }
.home-v2 .msg.bot { align-self: flex-start; background: var(--paper); border: 1px solid var(--beige); border-bottom-left-radius: 6px; display: flex; align-items: center; gap: 6px; }
.home-v2 .msg.bot svg { width: 14px; height: 14px; color: var(--green); flex-shrink: 0; }
.home-v2 .dots { display: inline-flex; gap: 4px; padding: 12px 14px; }
.home-v2 .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); animation: dot 1s ease infinite; }
.home-v2 .dots i:nth-child(2) { animation-delay: .15s; }
.home-v2 .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.home-v2 .chat-input { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--beige); }
.home-v2 .chat-input .typed { flex: 1; min-width: 0; font-size: .88rem; padding: 11px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--beige); white-space: nowrap; overflow: hidden; color: var(--ink); min-height: 42px; }
.home-v2 .chat-input .typed:empty::before { content: 'Tell Pixlel what to change...'; color: var(--faint); }
.home-v2 .icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--beige); background: var(--white); display: grid; place-items: center; color: var(--ink-2); flex-shrink: 0; }
.home-v2 .icon-btn.send { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.home-v2 .icon-btn svg { width: 17px; height: 17px; }
.home-v2 .browser { background: var(--white); border: 1px solid var(--beige); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.home-v2 .browser-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--paper); border-bottom: 1px solid var(--beige); }
.home-v2 .browser-bar .close { width: 22px; height: 22px; display: grid; place-items: center; color: var(--muted); }
.home-v2 .browser-bar .close svg { width: 12px; height: 12px; }
.home-v2 .browser-bar .url { flex: 1; min-width: 0; font-size: .76rem; color: var(--muted); background: var(--white); border: 1px solid var(--beige); border-radius: 999px; padding: 5px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-v2 .browser-bar .more { display: flex; gap: 3px; }
.home-v2 .browser-bar .more i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.home-v2 .site { --site-a: #3D3D3D; --site-b: #6B6B6B; transition: all .5s ease; }
.home-v2 .site.theme-1 { --site-a: #2B3A67; --site-b: #4D66DD; }
.home-v2 .site.theme-1.hand-sunset, .home-v2 .site.hand-sunset { --site-a: #B4472E; --site-b: #F2994A; }

/* Hand-edit layer on the preview site: selection outline, edit bar, color dropdown */
.home-v2 .assist-modes { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.home-v2 .mode { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--paper); border: 1px solid var(--beige); border-radius: 999px; padding: 7px 14px; transition: background .3s, color .3s, border-color .3s; }
.home-v2 .mode svg { width: 14px; height: 14px; }
.home-v2 .mode.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.home-v2 .site-hero { position: relative; }
.home-v2 .site-hero.selected { outline: 2px dashed rgba(255,255,255,.95); outline-offset: -6px; }
.home-v2 .edit-bar { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease; z-index: 2; }
.home-v2 .edit-bar.show { opacity: 1; transform: none; }
.home-v2 .eb-chip, .home-v2 .eb-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--ink); font-size: .68rem; font-weight: 600; padding: 5px 9px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18); white-space: nowrap; }
.home-v2 .eb-chip { color: var(--blue); }
.home-v2 .eb-chip svg, .home-v2 .eb-btn svg { width: 11px; height: 11px; }
.home-v2 .eb-btn .sw { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--site-a), var(--site-b)); }
.home-v2 .eb-btn.pressed { background: var(--beige); }
.home-v2 .color-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.2); padding: 6px; display: grid; gap: 2px; min-width: 128px; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.home-v2 .color-menu.show { opacity: 1; transform: none; }
.home-v2 .color-menu span { display: flex; align-items: center; gap: 8px; font-size: .7rem; font-weight: 500; color: var(--ink); padding: 5px 8px; border-radius: 6px; transition: background .15s; }
.home-v2 .color-menu span.hl { background: var(--beige); }
.home-v2 .color-menu i { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.home-v2 .site-nav { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; font-size: .8rem; font-weight: 700; }
.home-v2 .site-nav span { display: flex; gap: 14px; font-weight: 500; color: var(--muted); font-size: .72rem; }
.home-v2 .site-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 22px 18px; background: linear-gradient(135deg, var(--site-a), var(--site-b)); color: #fff; transition: background .6s ease; align-items: center; }
.home-v2 .site-hero h3 { font-size: clamp(1rem, 2vw, 1.35rem); letter-spacing: -.02em; line-height: 1.15; }
.home-v2 .site-hero p { font-size: .76rem; opacity: .9; margin-top: 6px; min-height: 1.2em; }
.home-v2 .site-hero .cta { display: inline-block; margin-top: 10px; background: #fff; color: var(--ink); font-size: .7rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.home-v2 .site-photo { aspect-ratio: 4 / 3; max-width: 100%; border-radius: 12px; border: 1.5px dashed rgba(255,255,255,.5); display: grid; place-items: center; font-size: .7rem; opacity: .9; transition: all .5s ease; overflow: hidden; }
.home-v2 .site-photo svg { width: 100%; height: 100%; display: none; }
.home-v2 .site-photo.filled { border: 0; }
.home-v2 .site-photo.filled svg { display: block; }
.home-v2 .site-photo.filled span { display: none; }
.home-v2 .site-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px 18px 18px; }
.home-v2 .site-gallery i { aspect-ratio: 1; border-radius: 8px; background: var(--paper); border: 1px dashed var(--beige); transition: all .4s ease; }
.home-v2 .site-gallery.filled i { border: 0; }
.home-v2 .site-gallery.filled i:nth-child(1) { background: linear-gradient(135deg, #E9C9A8, #C98F63); }
.home-v2 .site-gallery.filled i:nth-child(2) { background: linear-gradient(135deg, #B8C7E8, #6E86C9); transition-delay: .1s; }
.home-v2 .site-gallery.filled i:nth-child(3) { background: linear-gradient(135deg, #CFE3D2, #7FAE89); transition-delay: .2s; }
.home-v2 .site-gallery.filled i:nth-child(4) { background: linear-gradient(135deg, #E8D5E6, #B98DB4); transition-delay: .3s; }
.home-v2 .flash { animation: flash 1s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(77,102,221,.55); } 100% { box-shadow: 0 0 0 14px rgba(77,102,221,0); } }
.home-v2 .cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; pointer-events: none; transition: transform .9s cubic-bezier(.45,.05,.25,1); }
.home-v2 .cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.home-v2 .cursor .ripple { position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; }
.home-v2 .cursor.click .ripple { animation: ripple .45s ease-out; }
@keyframes ripple { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.home-v2 .reward { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .82rem; color: var(--muted); }
.home-v2 .reward b { color: var(--ink); }

/* ---------- Trusted ---------- */
.home-v2 .trusted { padding-block: 72px 40px; }
.home-v2 .trusted h2 { text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 32px; }
.home-v2 .trusted h2 .serif { color: var(--blue); font-weight: 400; }
.home-v2 .marquee + .marquee { margin-top: 16px; }
.home-v2 .marquee.slow .marquee-track { animation-duration: 52s; }
.home-v2 .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.home-v2 .marquee-track { display: flex; gap: 20px; width: max-content; animation: scroll-x 36s linear infinite; }
.home-v2 .marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------- Countdown ---------- */
.home-v2 .countdown { padding-block: 40px 96px; }
.home-v2 .count-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; background: var(--ink); color: var(--ground); border-radius: 32px; padding: 48px 56px; }
/* Working hourglass: sand drains top to bottom, then the glass flips and it starts again.
   One cycle = 20s. At the end the glass turns 180deg; the restart (0deg, top full) looks
   identical to the flipped state, so the loop is seamless. */
.home-v2 .hourglass { width: 130px; height: 184px; }
.home-v2 .hourglass .glass-turn { transform-box: view-box; transform-origin: 60px 85px; animation: hg-flip 20s ease-in-out infinite; }
.home-v2 .hourglass .cap { fill: var(--ground); }
.home-v2 .hourglass .post { stroke: var(--taupe); stroke-width: 3; stroke-linecap: round; }
.home-v2 .hourglass .glass { fill: rgba(245,243,240,.06); stroke: rgba(245,243,240,.55); stroke-width: 2; }
.home-v2 .hourglass .sand { fill: var(--blue); }
.home-v2 .hourglass .sand-top { transform-box: fill-box; transform-origin: 50% 100%; animation: hg-drain 20s linear infinite; }
.home-v2 .hourglass .sand-bottom { transform-box: fill-box; transform-origin: 50% 100%; animation: hg-fill 20s linear infinite; }
.home-v2 .hourglass .stream { stroke: var(--blue); stroke-width: 2; stroke-dasharray: 3 3; animation: hg-stream 20s linear infinite, hg-fall .4s linear infinite; }
@keyframes hg-drain  { 0% { transform: scaleY(1); } 92%, 100% { transform: scaleY(0); } }
@keyframes hg-fill   { 0% { transform: scaleY(0); } 92%, 100% { transform: scaleY(1); } }
@keyframes hg-stream { 0%, 91% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes hg-fall   { to { stroke-dashoffset: -6; } }
@keyframes hg-flip   { 0%, 93% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
.home-v2 .count-copy { display: grid; gap: 14px; }
.home-v2 .count-copy .big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.home-v2 .count-copy .big b { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.home-v2 .count-copy .big span { color: var(--taupe); font-size: 1rem; }
.home-v2 .count-copy h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.home-v2 .count-copy h2 .serif { color: var(--taupe); }
.home-v2 .count-copy .btn { background: var(--ground); color: var(--ink); justify-self: start; }
.home-v2 .count-copy .btn:hover { background: #fff; }

/* ---------- Pricing ---------- */
.home-v2 .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto 48px; }
.home-v2 .chips span { display: inline-flex; align-items: center; gap: 7px; background: var(--paper); border: 1px solid var(--beige); border-radius: 999px; padding: 9px 16px; font-size: .86rem; font-weight: 500; transition: transform .2s, border-color .2s; }
.home-v2 .chips span:hover { transform: translateY(-2px); border-color: var(--taupe); }
.home-v2 .chips svg { width: 14px; height: 14px; color: var(--taupe-deep); }
.home-v2 .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 0 auto; align-items: stretch; }
.home-v2 .plan { background: var(--paper); border: 1px solid var(--beige); border-radius: 28px; padding: 36px; display: grid; gap: 18px; align-content: start; }
.home-v2 .plan.featured { background: var(--white); border: 1.5px solid var(--ink); box-shadow: var(--shadow-lift); position: relative; }
.home-v2 .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-v2 .plan-name { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home-v2 .star { display: inline-flex; align-items: center; gap: 5px; background: var(--ink); color: var(--ground); border-radius: 999px; padding: 5px 12px; font-size: .74rem; font-weight: 600; }
.home-v2 .star svg { width: 12px; height: 12px; color: #F2C94C; }
.home-v2 .price { display: flex; align-items: baseline; gap: 6px; }
.home-v2 .price b { font-size: 3.4rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.home-v2 .price span { color: var(--muted); font-weight: 500; }
.home-v2 .value { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.home-v2 .value s { text-decoration-thickness: 1.5px; }
.home-v2 .save { background: rgba(47,143,91,.12); color: var(--green); font-weight: 700; font-size: .76rem; border-radius: 999px; padding: 3px 10px; }
.home-v2 .plan .desc { color: var(--ink-2); line-height: 1.5; font-size: .95rem; }
.home-v2 .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .9rem; }
.home-v2 .plan li { display: flex; gap: 10px; align-items: flex-start; }
.home-v2 .plan li svg { width: 16px; height: 16px; color: var(--ink); flex-shrink: 0; margin-top: 2px; }
.home-v2 .plan .btn { margin-top: 6px; }
.home-v2 .assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 36px; font-size: .88rem; color: var(--muted); }
.home-v2 .assure span { display: inline-flex; align-items: center; gap: 8px; }
.home-v2 .assure svg { width: 16px; height: 16px; color: var(--taupe-deep); }

/* ---------- FAQ ---------- */
.home-v2 .faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.home-v2 .faq details { background: var(--paper); border: 1px solid var(--beige); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.home-v2 .faq details[open] { box-shadow: var(--shadow); border-color: var(--taupe); }
.home-v2 .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 600; font-size: 1.02rem; }
.home-v2 .faq summary::-webkit-details-marker { display: none; }
.home-v2 .faq summary .plus { width: 28px; height: 28px; border-radius: 8px; background: var(--beige); display: grid; place-items: center; flex-shrink: 0; transition: background .3s, transform .3s; }
.home-v2 .faq summary .plus svg { width: 14px; height: 14px; transition: transform .3s; }
.home-v2 .faq details[open] .plus { background: var(--ink); color: var(--ground); }
.home-v2 .faq details[open] .plus svg { transform: rotate(45deg); }
.home-v2 .faq .answer { padding: 0 24px 22px; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.home-v2 .still { text-align: center; margin-top: 28px; color: var(--muted); }
.home-v2 .still a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--taupe); }

/* ---------- Final CTA ---------- */
.home-v2 .final { padding-block: 40px 110px; }
.home-v2 .final-card { background: var(--paper); border: 1px solid var(--beige); border-radius: 32px; padding: clamp(32px, 6vw, 64px); text-align: center; display: grid; gap: 26px; justify-items: center; box-shadow: var(--shadow); }
.home-v2 .final-card h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; max-width: 18ch; }
.home-v2 .final-card h2 u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(77,102,221,.22) 62%); }
.home-v2 .final-form { width: 100%; max-width: 620px; display: flex; gap: 8px; background: var(--white); border: 1px solid var(--beige); border-radius: 999px; padding: 6px; box-shadow: var(--shadow); }
.home-v2 .final-form label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding-left: 16px; }
.home-v2 .final-form label svg { width: 16px; height: 16px; color: #E0A800; flex-shrink: 0; }
.home-v2 .final-form input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; padding: 12px 0; color: var(--ink); }
.home-v2 .final-form input:focus { outline: none; }
.home-v2 .redesign { display: grid; gap: 8px; justify-items: center; }
.home-v2 .redesign small { color: var(--muted); font-size: .88rem; }
.home-v2 .perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: .88rem; color: var(--ink-2); }
.home-v2 .perks span { display: inline-flex; align-items: center; gap: 8px; }
.home-v2 .perks svg { width: 16px; height: 16px; color: var(--taupe-deep); }

/* ---------- SEO block (kept on home, collapsed) ---------- */
.home-v2 .seo { padding-block: 0 56px; }
.home-v2 .seo details { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--beige); padding-top: 18px; }
.home-v2 .seo summary { cursor: pointer; font-size: .86rem; color: var(--muted); font-weight: 500; }
.home-v2 .seo .seo-body { margin-top: 14px; font-size: .86rem; color: var(--muted); line-height: 1.6; display: grid; gap: 10px; }


/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .home-v2 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-v2 .t-design { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 860px) {
    :where(.home-v2) section { padding-block: 72px; }
    .home-v2 .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-v2 .steps-line { display: none; }
    .home-v2 .app-body { grid-template-columns: minmax(0, 1fr); }
    .home-v2 .side { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--beige); padding: 10px; gap: 6px; }
    .home-v2 .side-label { display: none; }
    .home-v2 .side button { white-space: nowrap; border: 1px solid var(--beige); background: var(--white); }
    .home-v2 .assist-stage { grid-template-columns: minmax(0, 1fr); }
    .home-v2 .chat { height: 360px; }
    .home-v2 .count-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 40px 24px; gap: 28px; }
    .home-v2 .count-copy .big, .home-v2 .count-copy .proto-note, .home-v2 .count-copy .btn { justify-self: center; justify-content: center; }
    .home-v2 .plans { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .home-v2 .wrap { padding-inline: 16px; }
    .home-v2 .hero { padding-top: 56px; }
    .home-v2 .steps { grid-template-columns: minmax(0, 1fr); }
    .home-v2 .tiles { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    .home-v2 .t-design, .home-v2 .t-analytics, .home-v2 .t-domain, .home-v2 .t-edit { grid-column: span 1; }
    .home-v2 .final-form { flex-direction: column; border-radius: 22px; }
    .home-v2 .final-form label { padding: 4px 10px; }
    .home-v2 .final-form .btn { width: 100%; }
    .home-v2 .plan { padding: 28px 22px; }
    .home-v2 .hourglass { width: 104px; height: 148px; }
    .home-v2 .parade { height: 220px; }
    .home-v2 .nb-walk { width: 160px; height: 200px; }
}
/* Motion is always on (Jake, 2026-10-01): the reduced-motion override below is
   disabled, not deleted. Uncomment it, and restore the `reduce` check at the
   top of home_v2.js, to honor the visitor's "reduce motion" setting again.

@media (prefers-reduced-motion: reduce) {
    .home-v2 *, .home-v2 *::before, .home-v2 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .home-v2 .nb-walk *, .home-v2 .nb-walk { animation: none !important; }
    .home-v2 .nb-boil-b { visibility: hidden; }
    .home-v2 .marquee-track { animation: none !important; }
}
*/