/*
 * Home page. One accent (brand blue), cool neutrals, one deliberate dark stage.
 * Radius system: controls 10px, cards 18px, chips full.
 * Motion is progressive: without JS or with reduced motion everything is visible.
 */
:root {
  --h-ink: #0b1324;
  --h-ink-2: #334058;
  --h-muted: #5f6c82;
  --h-line: #e3e8f0;
  --h-soft: #f5f7fb;
  --h-brand: #1877ff;
  --h-brand-ink: #0b57d0;
  --h-brand-wash: #eaf2ff;
  --h-stage: #0a1122;
  --h-stage-2: #111a30;
  --h-stage-line: #223052;
  --h-radius: 18px;
  --h-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Full-bleed sections inside the constrained post content. */
.wp-block-post-content > [class*="h-"].wp-block-group { max-width: none !important; width: 100%; margin-inline: 0 !important; margin-block: 0; }
.h-hero, .h-facts, .h-trace, .h-stage, .h-setup, .h-faq, .h-writing, .h-close { position: relative; box-sizing: border-box; padding-inline: 24px; }
.h-hero > *, .h-facts > *, .h-trace > *, .h-stage > *, .h-setup > *, .h-faq > *, .h-writing > *, .h-close > * { max-width: 1160px; margin-inline: auto; }

/* Type */
.h-title, .h-hero__title, .h-close__title { color: var(--h-ink); font-weight: 850; letter-spacing: 0; line-height: 1.35; text-wrap: balance; }
.h-title { font-size: clamp(28px, 3.1vw, 42px); margin: 0 0 14px; }
.h-intro { max-width: 58ch; margin: 0; color: var(--h-muted); font-size: 16px; line-height: 2; }
.h-head { margin-bottom: 48px; }

/* Buttons: tactile, one shape. */
.h-actions { gap: 10px; }
.h-actions .wp-block-button__link { border-radius: 10px; padding: 13px 26px; font-size: 15px; font-weight: 750; box-shadow: 0 1px 0 #ffffff33 inset, 0 10px 24px -10px #1877ffaa; transition: transform .25s var(--h-ease), box-shadow .25s var(--h-ease), background-color .2s; }
.h-actions .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #ffffff33 inset, 0 16px 30px -12px #1877ffcc; }
.h-actions .wp-block-button__link:active { transform: translateY(0) scale(.98); }
.h-actions .is-style-outline .wp-block-button__link { background: #fff; color: var(--h-ink); border: 1px solid var(--h-line); box-shadow: 0 1px 2px #0b13240d; }
.h-actions .is-style-outline .wp-block-button__link:hover { border-color: #c9d5e6; box-shadow: 0 8px 20px -12px #0b132440; }

/* ---------------------------------------------------------------- Hero */
.h-hero { padding-top: 8px; padding-bottom: 88px; overflow: hidden; background: radial-gradient(60% 70% at 18% 45%, #eef4ff 0%, #fff 70%); }
.h-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 48px; position: relative; z-index: 1; }
.h-hero__title { font-size: clamp(32px, 3.6vw, 50px); margin: 0 0 22px; }
.h-hero__title mark { background: none; color: var(--h-brand); }
.h-hero__lead { max-width: 46ch; margin: 0 0 34px; color: var(--h-ink-2); font-size: 17px; line-height: 2.05; }
.h-hero__demo .p-hero-demo { min-height: 0; }
.h-hero__demo .p-hero-demo__halo { display: none; }
.h-hero__demo .p-hero-demo__frame { box-shadow: 0 40px 80px -30px #14356b55, 0 0 0 1px #d7e3f5; }
.h-hero__demo .p-hero-demo__caption { margin-top: 14px; }
.h-hero > .h-pulse { top: auto; bottom: 0; max-width: none; translate: none; }
.p-hero-demo--live .p-hero-demo__caption::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px #12b76a26; vertical-align: 1px; }

/* The pulse: the brand mark as a living line. */
.h-pulse { position: absolute; inset-inline: 0; top: 50%; width: 100%; height: 160px; translate: 0 -40%; pointer-events: none; overflow: visible; }
.h-pulse path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.h-pulse__base { stroke: #1877ff; stroke-opacity: .16; stroke-width: 1.5; }
.h-pulse__beat { stroke: #1877ff; stroke-width: 2.5; stroke-dasharray: 0 1; opacity: 0; }

/* ---------------------------------------------------------------- Facts */
.h-facts { padding-block: 0; }
.h-facts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.h-fact { display: flex; min-height: 154px; height: 100%; box-sizing: border-box; flex-direction: column; align-items: center; justify-content: center; padding: 26px 22px 24px; text-align: center; }
.h-fact + .h-fact { border-inline-start: 1px solid var(--h-line); }
.h-fact h3 { margin: 0 0 4px; color: var(--h-ink); font-size: 15px; font-weight: 800; letter-spacing: 0; }
.h-fact p { margin: 0; color: var(--h-muted); font-size: 13px; line-height: 1.9; }

/* ---------------------------------------------------------------- Trace */
.h-trace { padding-top: 120px; padding-bottom: 60px; }
.h-trace__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.h-trace__visual { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 136px); order: 2; }
.h-trace__steps { order: 1; }
.h-step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding-inline-start: 26px; border-inline-start: 2px solid var(--h-line); transition: border-color .4s; }
.h-step h3 { margin: 0 0 10px; color: #9aa6b8; font-size: clamp(22px, 2.2vw, 30px); font-weight: 850; letter-spacing: 0; transition: color .4s; }
.h-step p { max-width: 42ch; margin: 0; color: #9aa6b8; font-size: 16px; line-height: 2; transition: color .4s; }
.h-step.is-active { border-color: var(--h-brand); }
.h-step.is-active h3 { color: var(--h-ink); }
.h-step.is-active p { color: var(--h-ink-2); }
html:not(.h-js) .h-step h3 { color: var(--h-ink); }
html:not(.h-js) .h-step p { color: var(--h-ink-2); }

.h-trace__card { display: flex; flex-direction: column; height: 470px; border: 1px solid var(--h-line); border-radius: var(--h-radius); background: #fff; box-shadow: 0 30px 70px -40px #14356b66; overflow: hidden; }
.h-trace__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--h-line); font-size: 13px; color: var(--h-ink); }
.h-trace__mark { width: 26px; height: 26px; border-radius: 50%; background: var(--h-brand-wash) url('pulsia-mark.svg') center / 16px no-repeat; }
.h-trace__state { margin-inline-start: auto; color: var(--h-muted); font-size: 11px; }
.h-trace__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; background: var(--h-soft); overflow: hidden; }
.h-t { max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.95; transition: opacity .5s var(--h-ease), translate .6s var(--h-ease), max-height .6s var(--h-ease), padding .6s var(--h-ease), margin .6s var(--h-ease); }
.h-t--user { align-self: flex-start; background: var(--h-brand); color: #fff; border-end-start-radius: 4px; }
.h-t--bot { align-self: flex-end; background: #fff; color: var(--h-ink-2); border: 1px solid var(--h-line); border-end-end-radius: 4px; }
.h-t__cite { display: block; width: fit-content; margin-top: 8px; padding: 2px 9px; border-radius: 999px; background: var(--h-brand-wash); color: var(--h-brand-ink); font-size: 11px; font-weight: 700; }
.h-t--miss { border-style: dashed; }
.h-t--handoff { align-self: center; padding: 4px 12px; border-radius: 999px; background: #fff4e5; color: #9a5b00; font-size: 11px; font-weight: 700; }
.h-t--search { align-self: stretch; max-width: none; display: grid; gap: 6px; padding: 12px; border: 1px solid var(--h-line); background: #fff; }
.h-t__label { color: var(--h-muted); font-size: 11px; font-weight: 700; }
.h-src { display: block; padding: 7px 10px; border-radius: 10px; background: var(--h-soft); color: var(--h-muted); font-size: 12px; transition: background-color .5s, color .5s; }
.h-src b { font-weight: 700; }
.h-src i { display: block; max-height: 0; overflow: hidden; font-style: normal; font-size: 12px; line-height: 1.9; transition: max-height .6s var(--h-ease), margin .6s var(--h-ease); }
.h-trace__note { margin: 12px 0 0; color: #8a96a8; font-size: 12px; text-align: center; }

/* Step states, only when JS drives them; otherwise the whole thread shows. */
html.h-js .h-trace__card .h-t { opacity: 0; translate: 0 14px; max-height: 0; padding-block: 0; margin-top: -10px; overflow: hidden; }
html.h-js .h-trace__card[data-step="1"] [data-from="1"],
html.h-js .h-trace__card[data-step="2"] :is([data-from="1"], [data-from="2"]),
html.h-js .h-trace__card[data-step="3"] :is([data-from="1"], [data-from="2"], [data-from="3"]),
html.h-js .h-trace__card[data-step="4"] .h-t { opacity: 1; translate: 0 0; max-height: 240px; padding-block: 10px; margin-top: 0; }
html.h-js .h-trace__card[data-step="4"] .h-t--handoff { padding-block: 4px; }
html.h-js .h-trace__card:is([data-step="2"], [data-step="3"]) .h-src.is-hit { background: var(--h-brand-wash); color: var(--h-ink); }
html.h-js .h-trace__card:is([data-step="2"], [data-step="3"]) .h-src.is-hit i { max-height: 80px; margin-top: 4px; }
html:not(.h-js) .h-src.is-hit i { max-height: none; margin-top: 4px; }

/* ---------------------------------------------------------------- Stage (dark) */
.h-stage { margin-top: 60px; padding-top: 110px; padding-bottom: 110px; background: radial-gradient(70% 60% at 80% 0%, #16306a 0%, transparent 60%), var(--h-stage); color: #c6d0e2; }
.h-stage .h-title { color: #fff; }
.h-stage .h-intro { color: #9dabc4; }
.h-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "sources sources inbox" "widget channels inbox"; gap: 16px; }
.h-cell { position: relative; padding: 26px; border: 1px solid var(--h-stage-line); border-radius: var(--h-radius); background: var(--h-stage-2); overflow: hidden; }
.h-cell h3 { margin: 0 0 6px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0; }
.h-cell > p { max-width: 46ch; margin: 0 0 22px; color: #93a1bb; font-size: 13.5px; line-height: 1.95; }
.h-cell--sources { grid-area: sources; background: linear-gradient(160deg, #13244a 0%, var(--h-stage-2) 60%); }
.h-cell--inbox { grid-area: inbox; }
.h-cell--widget { grid-area: widget; }
.h-cell--channels { grid-area: channels; background-image: radial-gradient(#ffffff14 1px, transparent 1px); background-size: 14px 14px; }

.h-sources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.h-sources li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 90px 52px; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff08; font-size: 13px; }
.h-sources span { color: #e6ecf7; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-sources em { color: #8391ab; font-style: normal; font-size: 12px; }
.h-meter { display: block; height: 3px; border-radius: 3px; overflow: hidden; }
.h-meter b { display: block; width: 100%; height: 100%; border-radius: inherit; background: #4d9bff; transform-origin: right center; }
.h-sources strong { color: #4ade9b; font-size: 12px; font-weight: 700; text-align: left; }
html.h-js .h-stage:not(.is-live) .h-meter b { transform: scaleX(0); }
html.h-js .h-stage:not(.is-live) .h-sources strong { opacity: 0; }
html.h-js .h-stage .h-meter b { transition: transform 1.3s var(--h-ease) calc(var(--d) * 280ms + 200ms); }
html.h-js .h-stage .h-sources strong { transition: opacity .4s calc(var(--d) * 280ms + 1300ms); }

.h-inbox { display: grid; gap: 8px; }
.h-inbox__row { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid #ffffff12; border-radius: 12px; background: #ffffff08; font-size: 12.5px; }
.h-inbox__row b { color: #fff; font-size: 13px; }
.h-inbox__row span { color: #a7b3c9; }
.h-inbox__row em { color: #6f7f9c; font-style: normal; font-size: 11px; }
.h-inbox__row.is-urgent { border-color: #f5a52455; background: #f5a5240f; }
.h-inbox__flag { color: #f5b454 !important; font-weight: 700; }
.h-inbox__reply { margin: 6px 0 0; padding: 11px 14px; border-radius: 12px 12px 4px 12px; background: var(--h-brand); color: #fff; font-size: 12.5px; line-height: 1.9; }
html.h-js .h-stage .h-inbox__row.is-urgent { transition: opacity .5s var(--h-ease) 1.6s, translate .6s var(--h-ease) 1.6s; }
html.h-js .h-stage .h-inbox__reply { transition: opacity .5s var(--h-ease) 2.8s, translate .6s var(--h-ease) 2.8s; }
html.h-js .h-stage:not(.is-live) :is(.h-inbox__row.is-urgent, .h-inbox__reply) { opacity: 0; translate: 0 12px; }

.h-brandkit { display: grid; gap: 16px; }
.h-swatches { display: flex; gap: 10px; }
.h-swatches button { width: 30px; height: 30px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--h-stage-2); cursor: pointer; transition: transform .2s var(--h-ease), border-color .2s; }
.h-swatches button:hover { transform: scale(1.1); }
.h-swatches button[aria-checked="true"] { border-color: #fff; }
.h-swatches button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.h-miniwidget { --w: #1877ff; border-radius: 14px; background: #fff; overflow: hidden; color: var(--h-ink-2); font-size: 12px; }
.h-miniwidget__top { padding: 10px 14px; background: var(--w); color: #fff; font-weight: 700; transition: background-color .45s var(--h-ease); }
.h-miniwidget p { margin: 12px 14px 8px; }
.h-miniwidget__chips { display: flex; gap: 6px; padding: 0 14px 14px; }
.h-miniwidget__chips span { padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--w) 35%, #fff); border-radius: 999px; color: var(--w); transition: color .45s, border-color .45s; }

.h-channels { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.h-channels li { padding: 7px 14px; border: 1px solid #ffffff1f; border-radius: 999px; background: #0a1122cc; color: #e6ecf7; font-size: 13px; font-weight: 700; }

/* ---------------------------------------------------------------- Setup */
.h-setup { padding-top: 120px; padding-bottom: 40px; }
.h-setup .h-head { margin-bottom: 40px; }
.h-setup__steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 34px; }
.h-rail { position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--h-line); }
.h-rail span { position: absolute; inset: 0; background: var(--h-brand); transform-origin: right center; }
.h-setup__step { position: relative; }
.h-setup__step::before { content: ''; position: absolute; top: -41px; inset-inline-start: 0; width: 14px; height: 14px; border: 2px solid var(--h-brand); border-radius: 50%; background: #fff; }
.h-setup__step h3 { margin: 0 0 8px; color: var(--h-ink); font-size: 24px; font-weight: 850; letter-spacing: 0; }
.h-setup__step p { max-width: 34ch; margin: 0; color: var(--h-muted); font-size: 15px; line-height: 2; }
.h-embed { max-width: 760px; margin-top: 56px; margin-inline: auto; border-radius: 14px; background: var(--h-stage); overflow: hidden; }
.h-embed__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--h-stage-line); color: #93a1bb; font-size: 12px; }
.h-embed__copy { padding: 5px 14px; border: 1px solid var(--h-stage-line); border-radius: 8px; background: transparent; color: #e6ecf7; font: inherit; font-size: 12px; cursor: pointer; transition: background-color .2s, transform .15s; }
.h-embed__copy:hover { background: #ffffff10; }
.h-embed__copy:active { transform: scale(.96); }
.h-embed__copy.is-done { border-color: #4ade9b66; color: #4ade9b; }
.h-embed pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #cfe0ff; font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: left; }

/* ---------------------------------------------------------------- FAQ */
.h-faq { padding-top: 120px; padding-bottom: 40px; }
.h-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.h-faq__aside { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 136px); }
.h-tel-wrap { margin-top: 10px; }
.h-tel { color: var(--h-ink); font-size: 26px; font-weight: 850; unicode-bidi: isolate; }
.h-tel:hover { color: var(--h-brand); }
.h-q { border-bottom: 1px solid var(--h-line); }
.h-q summary { position: relative; padding: 22px 0 22px 40px; color: var(--h-ink); font-size: 17px; font-weight: 750; cursor: pointer; list-style: none; }
.h-q summary::-webkit-details-marker { display: none; }
.h-q summary::after { content: ''; position: absolute; left: 6px; top: 50%; width: 10px; height: 10px; border-inline-end: 2px solid var(--h-muted); border-bottom: 2px solid var(--h-muted); translate: 0 -70%; rotate: 45deg; transition: rotate .3s var(--h-ease), translate .3s var(--h-ease); }
.h-q[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.h-q p { max-width: 62ch; margin: 0 0 22px; color: var(--h-ink-2); font-size: 15px; line-height: 2.1; }
.h-q p a { color: var(--h-brand-ink); text-decoration: underline; text-underline-offset: 4px; }
.h-q summary:focus-visible { outline: 2px solid var(--h-brand); outline-offset: 4px; border-radius: 6px; }

/* ---------------------------------------------------------------- Writing */
.h-writing { padding-top: 110px; padding-bottom: 40px; }
.h-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.h-more a { color: var(--h-brand-ink); font-weight: 700; font-size: 14px; }
.h-posts.wp-block-latest-posts { margin: 0 auto; padding: 0; }
.h-posts li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--h-line); }
.h-posts li a { color: var(--h-ink); font-size: 18px; font-weight: 750; transition: color .2s; }
.h-posts li a:hover { color: var(--h-brand); }
.h-posts time { flex: none; color: var(--h-muted); font-size: 13px; }

/* ---------------------------------------------------------------- Close (prefooter) */
.h-close { margin-top: 110px; padding-top: 72px; padding-bottom: 128px; overflow: hidden; text-align: center; background: #f5f8ff; border-top: 1px solid var(--h-line); }
.h-close > * { position: relative; z-index: 1; }
.h-close > .h-pulse { position: absolute; z-index: 0; top: auto; bottom: 0; max-width: none; translate: none; }
.h-close__title { font-size: clamp(28px, 3.2vw, 42px); margin: 0 auto 10px; }
.h-close__lead { max-width: 48ch; margin: 0 auto 24px; color: var(--h-ink-2); font-size: 16px; line-height: 2; }
.h-actions--center { justify-content: center; }
.h-close__tel { margin: 16px auto 0; color: var(--h-muted); font-size: 14px; }
.h-close__tel a { color: var(--h-ink); font-weight: 800; unicode-bidi: isolate; }

/* Footer sits right after the closing section; drop the old overlap. */
.home .p-footer { margin-top: 0; padding-top: 0; }
.home .p-footer > .p-footer-grid { padding-top: 24px; }

/* ---------------------------------------------------------------- Motion */
@media (prefers-reduced-motion: no-preference) {
  html.h-js [data-h-reveal] { opacity: 0; translate: 0 26px; transition: opacity .8s var(--h-ease), translate .9s var(--h-ease); transition-delay: var(--h-delay, 0ms); }
  html.h-js [data-h-reveal].is-in { opacity: 1; translate: 0 0; }

  /* Headline: words rise out of a mask, in reading order. */
  html.h-js .h-split .h-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
  html.h-js .h-split .h-w > span { display: inline-block; translate: 0 110%; transition: translate 1s var(--h-ease); transition-delay: calc(var(--i) * 55ms + 120ms); }
  html.h-js .h-split.is-in .h-w > span { translate: 0 0; }

  /* Pulse: the line draws once, then a beat travels along it. */
  html.h-js .h-pulse__base { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1); }
  html.h-js .h-pulse.is-in .h-pulse__base { stroke-dashoffset: 0; }
  html.h-js .h-pulse.is-in .h-pulse__beat { opacity: 1; stroke-dasharray: .07 .93; animation: h-beat 4.8s cubic-bezier(.45, 0, .2, 1) 1.6s infinite; }
  @keyframes h-beat { from { stroke-dashoffset: 1.07; } to { stroke-dashoffset: 0; } }

  /* Setup rail fills as the section scrolls through the viewport. */
  html.h-js .h-rail span { transform: scaleX(0); transition: transform 1.6s var(--h-ease) .2s; }
  html.h-js .h-setup__steps.is-in .h-rail span { transform: scaleX(1); }
  @supports (animation-timeline: view()) {
    html.h-js .h-rail span { transition: none; animation: h-rail linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    @keyframes h-rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }

  html.h-js .h-cell { transition: border-color .4s, translate .4s var(--h-ease); }
  html.h-js .h-cell:hover { border-color: #33477a; translate: 0 -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-pulse__beat { display: none; }
  .h-step, .h-step h3, .h-step p, .h-t, .h-src, .h-src i { transition: none !important; }
}

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .h-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .h-hero__copy { max-width: 640px; }
  .h-facts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sources sources" "inbox widget" "inbox channels"; }
}

@media (max-width: 767px) {
  .h-hero, .h-facts, .h-trace, .h-stage, .h-setup, .h-faq, .h-writing, .h-close { padding-inline: 16px; }
  .h-hero { padding-top: 40px; padding-bottom: 56px; }
  .h-hero__lead { font-size: 15.5px; }
  .h-actions .wp-block-button__link { padding: 12px 20px; font-size: 14px; }
  .h-facts__row { grid-template-columns: minmax(0, 1fr); }
  .h-fact + .h-fact { border-inline-start: 0; border-top: 1px solid var(--h-line); }
  .h-fact { padding: 18px 4px; }
  .h-trace { padding-top: 80px; }
  .h-trace__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h-trace__visual { order: 0; top: calc(var(--wp-admin--admin-bar--height, 0px) + 70px); z-index: 2; margin-inline: -16px; padding: 12px 16px 18px; background: linear-gradient(#fff 90%, #fff0); }
  .h-trace__card { height: 330px; }
  .h-trace__note { display: none; }
  .h-step { min-height: 46vh; }
  .h-stage { padding-top: 80px; padding-bottom: 80px; }
  .h-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sources" "inbox" "widget" "channels"; }
  .h-sources li { grid-template-columns: minmax(0, 1fr) 60px 44px; }
  .h-sources em { display: none; }
  .h-setup { padding-top: 80px; }
  .h-setup__steps { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-top: 0; padding-inline-start: 30px; }
  .h-rail { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 6px; width: 2px; height: auto; }
  .h-rail span { transform-origin: center top; }
  .h-setup__step::before { top: 8px; inset-inline-start: -31px; }
  .h-faq { padding-top: 80px; }
  .h-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .h-faq__aside { position: static; }
  .h-posts li { flex-direction: column; gap: 4px; }
  .h-close { margin-top: 80px; padding-top: 56px; padding-bottom: 96px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.h-js .h-rail span { transform: scaleY(0); }
  html.h-js .h-setup__steps.is-in .h-rail span { transform: scaleY(1); }
  @supports (animation-timeline: view()) {
    html.h-js .h-rail span { animation-name: h-rail-y; }
    @keyframes h-rail-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}