/* Version B of the homepage body: the pitchbook's pattern (label, headline, short cards)
   in the site's own visual language. landing.css still owns type, colour and the frame styles. */
.home-b .hb-section { position: relative; padding: 68px 0; }
.home-b .hb-section + .hb-section::before,
.home-b .hb-cta::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1100px, 86%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent); }
.home-b .hb-cta { position: relative; }

.hb-eyebrow { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #45dce8; }
.home-b .hb-h2 { margin: 0 auto; text-align: center; font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
.hb-lede { max-width: 720px; margin: 20px auto 0; text-align: center; font-size: 20px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }

.hb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.hb-card { padding: 26px 26px 28px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.hb-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
.hb-card p { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

.home-b .ba-grid { max-width: 940px; margin: 40px auto 0; }
.home-b .try-cards { max-width: 1000px; margin-left: auto; margin-right: auto; }
.home-b .hb-steps, .home-b .hb-proof { max-width: 1060px; margin-left: auto; margin-right: auto; }

.hb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.hb-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.hb-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(120deg, #45dce8 0%, #25b8ff 100%); color: #04222e; font-size: 17px; font-weight: 800; }
.hb-step h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.hb-step p { min-height: 3.1em; margin: 0 0 18px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }

.hb-more { margin: 32px 0 0; text-align: center; font-size: 17px; font-weight: 600; }
.hb-more a { color: #66daed; text-decoration: none; }
.hb-more a:hover { color: #9be9f4; }

.home-b .try-examples { padding-top: 68px; padding-bottom: 68px; }
.hb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px 0 0; }
.hb-chips span { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.78); }

.home-b .pubprop-scene { margin-top: 40px; }

.hb-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.hb-proof img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: #000; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); }

.hb-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.hb-five > div { display: flex; flex-direction: column; gap: 8px; padding: 22px 18px; border: 1px solid rgba(69, 220, 232, 0.28); border-radius: 14px; background: rgba(69, 220, 232, 0.05); text-align: center; }
.hb-five strong { font-size: 19px; color: #fff; }
.hb-five span { font-size: 15px; line-height: 1.45; color: rgba(255, 255, 255, 0.74); }

.hb-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 32px; text-align: left; }
.hb-qa h3 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.hb-qa p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, 0.76); }

@media (max-width: 900px) {
  .home-b .hb-section, .home-b .try-examples { padding: 60px 0; }
  .hb-cards, .hb-steps, .hb-proof, .hb-qa { grid-template-columns: 1fr; }
  .hb-steps { gap: 40px; }
  .hb-step p { min-height: 0; }
  .hb-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-five > div:last-child { grid-column: 1 / -1; }
  .hb-proof { max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .hb-lede { font-size: 18px; }
  .hb-card { padding: 22px; }
}

/* Steps without screenshots: the live tool above is the demonstration. */
.hb-steps--plain { gap: 20px; }
.hb-steps--plain .hb-step { padding: 26px 26px 28px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.hb-steps--plain .hb-step p { min-height: 0; margin: 0; }
.hb-steps--plain .hb-step-head { margin-bottom: 12px; }
@media (max-width: 900px) { .hb-steps--plain { gap: 16px; } }

/* Review pass: publishing is the answer to the problem, so it gets the room. */
.home-b .hb-publish .hb-lede { max-width: 760px; }
.home-b .hb-publish .pubprop-scene { margin-top: 44px; }
.home-b .hb-publish .hb-cards { margin-top: 36px; }

/* Step pictures: plain drawings of the idea, not screenshots of the tool. */
.hb-steps--art .hb-step { padding-top: 22px; }
.hb-art { display: block; width: 100%; height: auto; margin: 0 0 20px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }

/* The time promise as a single call to act, no cards. */
.home-b .hb-promise { padding: 84px 0; }
.hb-promise-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

.hb-claim { max-width: 820px; margin: 44px auto 0; text-align: center; font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: #fff; }

/* The problem: give the headline the same breathing room The fix has. */
.home-b #about.hb-section { padding-top: 84px; }
.home-b #about .ba-grid { margin-top: 68px; }
@media (max-width: 900px) {
  .home-b #about.hb-section { padding-top: 70px; }
  .home-b #about .ba-grid { margin-top: 48px; }
}

/* The real page's publish block carries 46px of its own top padding; without it the
   label sits the same distance from the section above as every other label. */
.home-b .hb-publish .pubprop { padding-top: 4px; }

/* Chart types: real charts, a name under each, every one opens in the preview. */
.hb-types-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1000px; margin: 44px auto 0; }
.hb-type { display: block; color: inherit; text-decoration: none; }
.hb-type img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: #000; transition: border-color 160ms ease, transform 160ms ease; }
.hb-type:hover img, .hb-type:focus-visible img { border-color: #45dce8; transform: translateY(-3px); }
.hb-type:focus-visible { outline: none; }
.hb-type-name { display: block; margin-top: 14px; text-align: center; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 900px) { .hb-types-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* The solution: five steps on the left, a picture of each moment on the right (handoff 22 Sep, direction A).
   Every preview is drawn at 900 x 563 and scaled to the panel width so its type stays in proportion. */
@font-face { font-family: "Inter SemiBold"; src: url("/assets/fonts/Inter-SemiBold-subset.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
.hb-workflow { --sp-accent: #32c5fd; --sp-line: rgba(255, 255, 255, 0.10); --sp-dim: rgba(255, 255, 255, 0.52); --sp-semi: "Inter SemiBold", "Inter", "Segoe UI", system-ui, sans-serif; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; align-items: start; max-width: 1120px; margin: 52px auto 0; }

.sp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-step { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; width: 100%; margin: 0; padding: 14px 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 0.25s, border-color 0.25s; }
.sp-step.is-active { background: rgba(50, 197, 253, 0.07); border-color: rgba(50, 197, 253, 0.34); }
.sp-step:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }
.sp-badge { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.60); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.sp-step.is-active .sp-badge { background: var(--sp-accent); border-color: var(--sp-accent); color: #04121b; }
.sp-body { display: grid; gap: 6px; min-width: 0; }
.sp-title { font: 600 17px/1.35 var(--sp-semi); color: rgba(255, 255, 255, 0.78); }
.sp-step.is-active .sp-title { color: #fff; }
.sp-detail { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.60); max-height: 0; opacity: 0; overflow: hidden; text-wrap: pretty; transition: max-height 0.3s ease, opacity 0.25s ease; }
.sp-step.is-active .sp-detail { max-height: 96px; opacity: 1; }
.sp-track { display: none; height: 2px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.sp-step.is-active .sp-track { display: block; }
.sp-fill { display: block; height: 100%; background: var(--sp-accent); transform-origin: left; transform: scaleX(1); }
.sp-fill.is-running { animation: sp-grow 5.2s linear forwards; }
@keyframes sp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sp-panel { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; background: #05090f; }
.sp-scaled { --sp-scale: 0.8; position: relative; width: 100%; aspect-ratio: 900 / 563; overflow: hidden; }
.sp-stage { position: absolute; inset: 0; width: 900px; height: 563px; transform: scale(var(--sp-scale)); transform-origin: top left; font-family: "Inter", "Segoe UI", system-ui, sans-serif; font-size: 16px; line-height: normal; color: #fff; }
.sp-stage, .sp-stage * { box-sizing: border-box; }
.sp-stage i { font-style: normal; }
.sp-view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; }
.sp-view.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }

.sp-win { width: 100%; height: 100%; background: #05090f; display: grid; grid-template-rows: 34px 1fr; }
.sp-win--black { background: #000; }
.sp-bar { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--sp-line); background: #0a0f18; }
.sp-dots { display: flex; gap: 5px; }
.sp-dots i { width: 7px; height: 7px; border-radius: 99px; background: #2a3441; }
.sp-bar-label { font-size: 11px; color: var(--sp-dim); letter-spacing: 0.02em; }
.sp-win-body { position: relative; overflow: hidden; }

/* 1. Add the data */
.sp-data { display: grid; grid-template-columns: 150px 150px 1fr; height: 100%; font-size: 13px; }
.sp-col { border-right: 1px solid var(--sp-line); display: grid; grid-template-rows: repeat(12, 34px); }
.sp-col-h { display: grid; gap: 2px; align-content: center; padding: 0 12px; background: #0e1626; border-bottom: 1px solid var(--sp-line); color: #fff; font: 600 12px/1.2 var(--sp-semi); }
.sp-cell { display: flex; align-items: center; padding: 0 12px; color: rgba(255, 255, 255, 0.74); border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; }
.sp-cell.is-first { color: #fff; }
.sp-col--num .sp-cell { justify-content: flex-end; }
.sp-cell.is-picked { box-shadow: inset 0 0 0 1.5px var(--sp-accent); background: rgba(50, 197, 253, 0.10); }
.sp-detect { padding: 18px; display: grid; align-content: start; gap: 12px; }
.sp-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-dim); }
.sp-fact { display: grid; gap: 3px; padding: 10px 12px; background: #0b1220; border: 1px solid var(--sp-line); border-radius: 6px; }
.sp-fact-k { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-dim); }
.sp-fact-v { font-size: 13px; color: #fff; }
.sp-ready { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--sp-accent); }
.sp-ready i { width: 6px; height: 6px; border-radius: 99px; background: var(--sp-accent); }

/* 2. Add your brand */
.sp-brand { height: 100%; padding: 16px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.sp-card { background: #080d15; border: 1px solid var(--sp-line); border-radius: 8px; padding: 18px; display: grid; grid-template-rows: auto 1fr; gap: 14px; min-height: 0; }
.sp-card-head { display: grid; gap: 2px; }
.sp-card-t { font: 600 14px/normal var(--sp-semi); color: #fff; }
.sp-card-d { font-size: 11.5px; color: var(--sp-dim); }
.sp-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-content: center; }
.sp-swatches i { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; }
.sp-swatches i.is-picked { box-shadow: 0 0 0 2px #080d15, 0 0 0 3.5px var(--sp-accent); }
.sp-canvas { position: relative; overflow: hidden; background: #000; border: 1px solid var(--sp-line); border-radius: 6px; }
.sp-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 30px; width: auto; display: block; }
.sp-corner { position: absolute; width: 10px; height: 10px; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: transparent; }
.sp-corner--tl { left: 10px; top: 10px; }
.sp-corner--tr { right: 10px; top: 10px; }
.sp-corner--bl { left: 10px; bottom: 10px; }
.sp-corner--br { right: 10px; bottom: 10px; }
.sp-corner.is-picked { background: var(--sp-accent); border-color: var(--sp-accent); }
.sp-fonts { display: grid; gap: 8px; align-content: center; }
.sp-font { display: grid; gap: 3px; padding: 8px 12px; background: #0b1220; border: 1px solid var(--sp-line); border-radius: 6px; }
.sp-font-k { font-size: 10px; color: var(--sp-dim); }
.sp-font-s { color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-font-s--title { font: 600 22px/1.15 var(--sp-semi); letter-spacing: -0.02em; }
.sp-font-s--body { font-size: 13px; font-weight: 400; }
.sp-disc { display: grid; align-content: end; padding: 14px; gap: 8px; }
.sp-rule { display: block; height: 1px; background: rgba(255, 255, 255, 0.14); }
.sp-disc-text { font-size: 12px; line-height: 1.5; color: #fff; padding: 6px 8px; border: 1px dashed var(--sp-accent); border-radius: 4px; }

/* 3 and 4. The chart, then the same chart under review */
.sp-chartwrap { position: absolute; inset: 0; display: grid; place-items: center; background: #000; }
.sp-chart { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.sp-chart--dim { opacity: 0.85; }
.sp-chart img { width: 100%; height: 100%; display: block; }
/* The image carries its own end label and dot. Two black patches hide the date (above the spike) and the
   value with its leader (right of the spike) without cutting the line; the dot is placed on the measured end point. */
.sp-chart-mask { position: absolute; background: #000; }
.sp-chart-mask--date { left: 88%; top: 59%; width: 9%; height: 6.85%; }
.sp-chart-mask--value { left: 92%; top: 66.8%; width: 5%; height: 2.7%; }
/* The date label sits over the peak of the spike, so the patch that hides it also hides the top 1.5% of
   the line. This short bar redraws that peak in the line's own colour. */
.sp-chart-spike { position: absolute; left: 91.08%; top: 64.3%; width: 0.5%; height: 1.8%; border-radius: 99px; background: #2cb7c4; }
.sp-chart-dot { position: absolute; left: 91.59%; top: 68.1%; width: 7px; height: 7px; border-radius: 99px; background: #fff; transform: translate(-50%, -50%); }
.sp-chart-end { position: absolute; left: 91.59%; bottom: 35.4%; transform: translateX(-50%); display: grid; justify-items: center; gap: 1px; font-size: 11px; line-height: 1.15; color: #fff; white-space: nowrap; }
.sp-chart-end b { font: 600 11px/1.15 var(--sp-semi); }
.sp-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.sp-pill { font-size: 11px; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--sp-line); padding: 5px 9px; border-radius: 99px; }
.sp-comment { position: absolute; left: 300px; top: 120px; display: flex; align-items: flex-start; gap: 8px; }
.sp-avatar { flex: none; width: 22px; height: 22px; border-radius: 99px; background: var(--sp-accent); color: #04121b; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.sp-bubble { max-width: 230px; padding: 9px 11px; background: #0b1220; border: 1px solid var(--sp-line); border-radius: 8px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.sp-status { position: absolute; right: 14px; top: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 11px; background: rgba(11, 18, 32, 0.92); border: 1px solid var(--sp-line); border-radius: 99px; font-size: 12px; color: #fff; }
.sp-status i { width: 7px; height: 7px; border-radius: 99px; background: #69c9a5; }
.sp-reviewbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)); }
.sp-reviewbar-meta { font-size: 11px; color: var(--sp-dim); }
.sp-actions { display: flex; gap: 6px; }
.sp-btn { font-size: 11px; color: rgba(255, 255, 255, 0.8); border: 1px solid var(--sp-line); padding: 5px 10px; border-radius: 5px; }
.sp-btn--primary { border: 0; color: #04121b; background: var(--sp-accent); font: 600 11px/normal var(--sp-semi); }

/* 5. Publish anywhere */
.sp-publish { height: 100%; padding: 22px 26px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: end; }
.sp-publish-laptop { width: 100%; height: auto; display: block; align-self: center; }
.sp-publish-phone { height: 470px; width: auto; display: block; }

@media (max-width: 900px) {
  .sp-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; }
  .sp-panel { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-fill.is-running { animation: none; }
  .sp-step, .sp-badge, .sp-detail, .sp-view { transition: none; }
}