/* Homepage (concept A) layout, scoped under .home-a. */
/* Homepage section labels carry the small longrtail bars mark, like the inner pages' eyebrows. */
.home-a .eyebrow { display: inline-flex; align-items: baseline; gap: .75em; }
.home-a .eyebrow::before { content: ''; flex: none; width: 1.457em; height: 1.06em; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 72'%3E%3Cpath fill='%230E95D2' d='M0 72V0L14.2 2.3V72Z'/%3E%3Cpath fill='%2316233F' d='M28.4 72V24.6L42.6 26.9V72Z'/%3E%3Cpath fill='%230E95D2' d='M56.8 72V41.8L71 44.1V72Z'/%3E%3Cpath fill='%2316233F' d='M85.2 72V55.4L99.4 57.7V72Z'/%3E%3C/svg%3E"); }
.home-a .hero .eyebrow::before, .home-a .a-how .eyebrow::before, .home-a .answer .eyebrow::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 99 72'%3E%3Cpath fill='%2355C6F7' d='M0 72V0L14.2 2.3V72Z'/%3E%3Cpath fill='%23FF7A2F' d='M28.4 72V24.6L42.6 26.9V72Z'/%3E%3Cpath fill='%2355C6F7' d='M56.8 72V41.8L71 44.1V72Z'/%3E%3Cpath fill='%23F2B33D' d='M85.2 72V55.4L99.4 57.7V72Z'/%3E%3C/svg%3E"); }
.home-a .trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 24px 0 28px; padding: 0; font-weight: 600; font-size: 15px; }
.home-a .trust li { display: flex; align-items: center; gap: 8px; }
.home-a .trust svg { width: 18px; height: 18px; fill: none; stroke: var(--link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* menu and hero colours from the reskin preview's homepage: light frosted menu over a navy hero */
.home-a .hdr { background: rgba(247, 246, 242, .88); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hair); }
.home-a .hero { position: relative; padding-top: 88px; background: linear-gradient(165deg, var(--navy) 0%, var(--navy) 45%, #0F5E8C 100%); color: var(--on-navy); overflow: hidden; }
.home-a .hero .eyebrow { color: #9FB0CC; }
.home-a .hero .air-light .air-pill { box-shadow: 0 18px 50px rgba(0, 0, 0, .3); border-color: transparent; }
.home-a .hero h1 { max-width: 900px; margin-top: 18px; }
.home-a .hero-in { position: relative; z-index: 2; }
.home-a .tail { position: relative; margin: 4px 0 0; height: 300px; }
.home-a .tail-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .45%; }
/* Each bar is a real search, from crowded big keywords to long, specific questions. Hover: the bars lift in a
   wave from left to right, the one under the pointer rises and brightens, and its question shows. */
.home-a .tb { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none; }
/* only the bar's own footprint catches the pointer, not the empty space above it; the footprint stays put while the bar lifts */
.home-a .tb::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); pointer-events: auto; }
.home-a .tb > i { pointer-events: none; }
.home-a .tb > i { display: block; width: 100%; height: var(--h); background: var(--c); clip-path: polygon(0 0, 100% 6px, 100% 100%, 0 100%); transform-origin: 50% 100%; transition: translate .45s cubic-bezier(.2,.8,.2,1), filter .2s, opacity .25s; }
@media (prefers-reduced-motion: no-preference) {
  .home-a .tb > i { animation: grow .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 22ms + 150ms); }
  .home-a .tail-bars .tb:hover > i, .home-a .tail-bars .tb:focus-visible > i { translate: 0 -22px; transition-delay: 0s; }
}
.home-a .tail-bars .tb:hover > i, .home-a .tail-bars .tb:focus-visible > i { opacity: 1; filter: brightness(1.12) saturate(1.15); }
.home-a .tb::after { content: attr(data-tip); display: none; position: absolute; left: 50%; bottom: calc(var(--h) + 34px); translate: -50% 0; width: max-content; max-width: 280px; padding: 9px 12px; border-radius: 8px; background: #fff; color: var(--ink); font: 500 14px/1.4 var(--text); text-align: left; box-shadow: 0 12px 28px rgba(0, 0, 0, .3); pointer-events: none; z-index: 5; }
.home-a .tb:hover::after, .home-a .tb:focus-visible::after { display: block; animation: tip .18s ease-out; }
@media (hover: none) { .home-a .tail-bars .tb:focus > i { opacity: 1; filter: brightness(1.12) saturate(1.15); } .home-a .tb:focus::after { display: block; animation: tip .18s ease-out; } }
.home-a .tb.tip-l::after { left: var(--tip-pl, 0px); translate: 0 0; max-width: min(280px, calc(100vw - 24px)); }
.home-a .tb.tip-r::after { left: auto; right: var(--tip-pr, 0px); translate: 0 0; max-width: min(280px, calc(100vw - 24px)); }
@keyframes tip { from { opacity: 0; } }
/* touch screens: only the tapped bar lifts, so a lifted bar never sticks after the note closes */
.touch-tips .home-a .tail-bars .tb:not(.tip-on) > i { translate: none !important; filter: none !important; }
.touch-tips .home-a .tail-bars .tb.tip-on > i { translate: 0 -22px; filter: brightness(1.12) saturate(1.15); }
.home-a .tail figcaption { position: absolute; inset: 0; pointer-events: none; }
.home-a .ann { position: absolute; display: flex; flex-direction: column; max-width: 260px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.home-a .ann b { font: 700 18px var(--display); letter-spacing: -.02em; color: var(--ink); }
.home-a .ann-head { left: 9%; top: -8px; }
.home-a .ann-tail { left: 46%; top: 92px; padding-left: 14px; border-left: 2px solid var(--ink); }
.home-a .legend { position: absolute; right: 24px; top: 16px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) { .home-a .tail { height: 200px; } .home-a .ann-head { display: none; } .home-a .ann-tail { left: 30%; top: 20px; max-width: 200px; } .home-a .legend { top: auto; bottom: calc(100% + 12px); right: 16px; } }

.home-a .statement { padding: 120px 0 104px; background: #fff; }
.home-a .st-in h2 { max-width: 900px; font-size: clamp(36px, 5.4vw, 68px); margin: 14px 0 24px; }
.home-a .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 72px; border-top: 1px solid var(--hair); }
.home-a .nums > div { display: flex; flex-direction: column; gap: 6px; padding: 28px 24px 0 0; color: var(--muted); }
.home-a .nums > div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.home-a .big { font: 700 clamp(48px, 6vw, 80px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.home-a .up { color: var(--pine); margin-left: 6px; }
.home-a .nums .sample { grid-column: 1 / -1; margin-top: 18px; }
@media (max-width: 760px) { .home-a .nums { grid-template-columns: 1fr; } .home-a .nums > div + div { border-left: 0; padding-left: 0; } }

/* "How it works" from concept D: the six-step engine flow (rules copied from kit.css) */
.home-a .a-how { position: relative; overflow: hidden; margin-top: 56px; padding: 48px; border-radius: 20px; background: var(--sky-depth); color: var(--on-navy); --ease: cubic-bezier(.2, .8, .2, 1); }
.home-a .a-how::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--bands); }
.home-a .a-how .eyebrow { color: #9FB0CC; }
.home-a .a-how .sec-head { max-width: 720px; margin-bottom: 28px; }
.home-a .a-how .sec-head .lede { margin-top: 10px; }
.home-a .a-how .sec-head h2 { margin: 14px 0 16px; color: #fff; }
.home-a .a-how .lede { color: #C9D6E8; }
.home-a .a-how .btn-sm { font: 600 14px/1 var(--text); padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--hair); background: #fff; color: var(--ink); }
.home-a .a-how .btn-sm.pine { background: var(--pine); border-color: var(--pine); color: #fff; }
@media (max-width: 720px) { .home-a .a-how { padding: 32px 18px; margin-top: 40px; border-radius: 16px; } }
/* ---------- the engine flow: six tabbed steps (from the content engine page) ---------- */
.home-a .flow-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.home-a .flow-tabs button { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font: 600 16px var(--text); cursor: pointer; text-align: left; transition: background .2s, border-color .2s, transform .2s; }
.home-a .flow-tabs button:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.home-a .flow-tabs button[aria-selected="true"] { background: rgba(14, 149, 210, .22); border-color: rgba(85, 198, 247, .6); }
.home-a .flow-tabs .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .16); font: 500 13px var(--mono); }
.home-a .flow-tabs [aria-selected="true"] .n, .home-a .flow-tabs .done .n { background: var(--sky); color: var(--ink); }
.home-a .flow-tabs .pb { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--sky-2); }
.home-a .flow-tabs [aria-selected="true"] .pb { animation: pb var(--dur, 6.5s) linear forwards; }
.home-a .flow.paused .flow-tabs .pb { animation-play-state: paused; }
@keyframes pb { to { width: 100%; } }
.home-a .flow-stage { border-radius: 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); padding: 48px; min-height: 400px; }
.home-a .flow-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center; }
.home-a .flow-panel[hidden] { display: none; }
.home-a .flow-panel .step { font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sky-2); }
.home-a .flow-panel h3 { font-size: clamp(26px, 3vw, 36px); color: #fff; margin: 12px 0 14px; letter-spacing: -.025em; }
.home-a .flow-panel p { color: #C9D6E8; font-size: 18px; }
.home-a .flow-panel .flow-text > * { animation: rise .6s var(--ease) both; }
.home-a .flow-panel .flow-text > :nth-child(2) { animation-delay: 60ms; } .home-a .flow-panel .flow-text > :nth-child(3) { animation-delay: 120ms; }
@media (max-width: 960px) {
  .home-a .flow-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-a .flow-panel { grid-template-columns: 1fr; gap: 28px; }
  .home-a .flow-stage { padding: 28px 20px; }
}
@media (max-width: 520px) { .home-a .flow-tabs button { padding: 12px 10px; font-size: 14px; gap: 8px; } }

/* the step visuals: white product cards that work on light or dark grounds */
.home-a .ui { background: #fff; color: var(--ink); border-radius: 14px; padding: 20px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); font-size: 15px; }
.home-a .ui-h { display: flex; justify-content: space-between; font: 700 11px var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.home-a .ui-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: center; padding: 11px 6px; border-bottom: 1px solid #EDF0F4; border-radius: 6px; transition: background .2s; cursor: default; }
.home-a .ui-row:last-child { border-bottom: 0; }
.home-a .ui-row:hover { background: #F1F7FB; }
.home-a .ui-row .pill { display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--link); color: #fff; font-size: 12px; font-weight: 600; }
.home-a .meter { height: 8px; border-radius: 4px; background: #F0EEE8; overflow: hidden; }
.home-a .meter i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--sky); transform-origin: left; transition: filter .2s; }
.home-a .ui-row:first-of-type .meter i { background: var(--link); }
.home-a .ui-row:hover .meter i { filter: brightness(1.15); }
@media (prefers-reduced-motion: no-preference) { .home-a .flow-panel:not([hidden]) .meter i, .home-a .is-on .meter i { animation: fill 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); } @keyframes fill { from { transform: scaleX(0); } } }
.home-a .ui-q { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-bottom: 1px solid #EDF0F4; transition: background .2s, padding .2s; }
.home-a .ui-q:hover { background: #F1F7FB; padding-left: 12px; }
.home-a .ui-q svg { flex: none; color: var(--muted); }
.home-a .ui-q .tag { margin-left: auto; }
.home-a .ui-doc i { display: block; height: 8px; border-radius: 4px; background: var(--raised); margin: 10px 0; width: var(--w, 100%); }
.home-a .ui-doc i.h { height: 14px; background: var(--ink); width: 80%; margin-bottom: 16px; }
@media (prefers-reduced-motion: no-preference) { .home-a .flow-panel:not([hidden]) .ui-doc i, .home-a .is-on .ui-doc i { animation: fill .7s var(--ease) both; transform-origin: left; animation-delay: calc(var(--i, 0) * 120ms); } }
.home-a .ui-checks { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.home-a .ui-checks li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.home-a .ui-checks li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 10px; flex: none; }
.home-a .ui-mail-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.home-a .ui-mail-top i { width: 8px; height: 8px; border-radius: 50%; background: var(--tang); }
.home-a .ui-mail h4 { font: 600 19px/1.3 var(--display); letter-spacing: -.01em; margin: 10px 0 12px; }
.home-a .ui-mail-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.home-a .ui-ai { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #EDF0F4; }
.home-a .ui-ai:last-child { border-bottom: 0; }
.home-a .ui-ai img { width: 18px; height: 18px; }
.home-a .ui-ai s { color: var(--muted); font-size: 13px; text-decoration: none; }
.home-a .named { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: #E3F2EC; color: var(--pine); }
.home-a .named.no { background: var(--raised); color: var(--muted); }
.home-a .ui-mix-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; padding: 10px 0; font-size: 15px; }
.home-a .ui-mix-row .meter i { background: var(--pine); }
.home-a .ui-mix-row:nth-child(3) .meter i { background: var(--sky); }
.home-a .ui-mix-row:nth-child(4) .meter i { background: var(--mari); }
.home-a .ui-loop { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #F1F7FB; color: var(--link); font-weight: 600; font-size: 14px; }


.home-a .answer { padding: 112px 0; background: var(--navy); color: var(--on-navy); background: linear-gradient(165deg, var(--navy) 0%, var(--navy) 45%, #0F5E8C 100%); }
.home-a .ans-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.home-a .answer .eyebrow { color: #9FB0CC; }
.home-a .answer h2 { margin: 14px 0 20px; }
.home-a .answer .lede { color: #C9D6E8; }
.home-a .tracked { display: flex; align-items: center; gap: 12px; margin-top: 28px; font-size: 14px; color: #C9D6E8; }
.home-a .ai-stack { display: inline-flex; }
.home-a .ai-stack span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--navy); }
.home-a .ai-stack span + span { margin-left: -8px; }
.home-a .chat .q { margin-left: auto; width: fit-content; max-width: 85%; background: var(--navy-2); border-radius: 16px 16px 4px 16px; padding: 18px 22px; font-size: 20px; font-weight: 600; }
.home-a .chat .a { margin-top: 20px; max-width: 92%; background: #fff; color: var(--ink); border-radius: 16px 16px 16px 4px; padding: 22px 24px; font-size: 19px; line-height: 1.55; }
.home-a mark { background: #DCEEF8; color: var(--link); box-shadow: inset 0 -2px 0 var(--sky); padding: 0 3px; }
@media (max-width: 860px) { .home-a .ans-in { grid-template-columns: 1fr; gap: 40px; } }

.home-a .inds { padding: 112px 0 40px; }
.home-a .inds h2 { margin-top: 14px; }
.home-a .ind-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.home-a .ind-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; font-size: 16px; color: var(--link); text-decoration: none; }
.home-a .ind-all span { transition: translate .25s; }
.home-a .ind-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-a .ind-all:hover span { translate: 4px 0; }
.home-a .ind-row a { position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; color: #fff; text-decoration: none; background: var(--navy); isolation: isolate; }
/* the photos fade from navy on the left into the picture on the right, so they sit with the page; hover lifts the fade */
.home-a .ind-row img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s; }
.home-a .ind-row a::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 35, 63, .92) 0%, rgba(22, 35, 63, .62) 30%, rgba(22, 35, 63, .18) 70%, rgba(22, 35, 63, 0) 100%); transition: opacity .5s; pointer-events: none; }
.home-a .ind-row a::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(22, 35, 63, 0) 55%, rgba(22, 35, 63, .55) 100%); pointer-events: none; }
.home-a .ind-row a:hover img, .home-a .ind-row a:focus-visible img { transform: scale(1.05); filter: none; }
.home-a .ind-row a:hover::before, .home-a .ind-row a:focus-visible::before { opacity: .55; }
.home-a .ind-row span { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--display); letter-spacing: -.02em; }
.home-a .ind-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(247, 246, 242, .14); border: 1px solid rgba(247, 246, 242, .28); backdrop-filter: blur(6px); color: var(--sky-2); transition: background .3s, color .3s; }
.home-a .ind-row a:hover .ind-ic { background: var(--sky); color: #fff; border-color: var(--sky); }

.home-a .plans { padding: 72px 0 112px; }
.home-a .plans h2 { margin: 14px 0 40px; }
.home-a .tiers { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.home-a .tier { padding: 28px 28px 0 0; }
.home-a .tier + .tier { padding-left: 28px; border-left: 1px solid var(--hair); }
.home-a .tier .mono { color: var(--muted); font-size: 13px; }
.home-a .tier h3 { font-size: 26px; margin-top: 8px; }
.home-a .tier .k { color: var(--muted); font-size: 15px; }
.home-a .price { font: 700 56px/1 var(--display); letter-spacing: -.04em; margin: 22px 0 12px; }
.home-a .price small { font: 500 16px var(--text); color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.home-a .tier p:last-child { color: var(--muted); font-size: 15px; }
.home-a .more { display: inline-block; margin-top: 32px; font-weight: 700; text-decoration: none; }
@media (max-width: 860px) { .home-a .tiers { grid-template-columns: 1fr; } .home-a .tier + .tier { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); margin-top: 28px; } }

.home-a .cta { position: relative; overflow: hidden; background: var(--sky-depth); color: var(--on-navy); --cta-pb: 136px; padding: 112px 0 var(--cta-pb); }
/* text and bars sit in their own columns, so the bars can never run under the copy */
.home-a .cta-in { position: relative; z-index: 1; max-width: 1200px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 48px; }
.home-a .cta-copy { min-width: 0; }
.home-a .cta h2 { font-size: clamp(40px, 6vw, 76px); max-width: 700px; }
.home-a .cta .lede { color: #C9D6E8; margin: 20px 0 32px; }
.home-a .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.home-a .cta-bars { align-self: end; width: 100%; height: auto; max-height: 360px; aspect-ratio: 700 / 400; margin-bottom: calc(-1 * var(--cta-pb)); /* the bars stand on the band's bottom edge: always the same number as its bottom padding (a phone padding change once left them 56px below it, cut off) */ }
@media (max-width: 860px) { .home-a .cta-in { grid-template-columns: 1fr; gap: 32px; } .home-a .cta-bars { justify-self: end; width: 70%; } }

/* Hero: a sample of what Analyze returns, beside the input */
.home-a .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: center; }
@media (min-width: 1101px) { .home-a .hero-split h1 { font-size: clamp(48px, 4.4vw, 64px); } }
.home-a .hero-copy { min-width: 0; }
.home-a .rc { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(22, 35, 63, .28); padding: 0 0 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.home-a .rc:hover { transform: translateY(-4px); box-shadow: 0 38px 80px -22px rgba(22, 35, 63, .34); }
.home-a .rc-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--hair); }
.home-a .rc-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E2E6EC; }
.home-a .rc-bar span { margin-left: 10px; padding: 3px 10px; border-radius: 6px; background: var(--raised); font: 500 12px var(--mono); color: var(--muted); }
.home-a .rc-top { display: flex; gap: 16px; align-items: center; padding: 18px 20px 6px; }
.home-a .rc-score { --p: calc(var(--s) * 1%); flex: none; display: grid; place-items: center; align-content: center; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(closest-side, #fff 78%, transparent 79%), conic-gradient(var(--mari) var(--p), #EEF1F5 0); }
.home-a .rc-score b { font: 700 28px/1 var(--display); color: var(--ink); }
.home-a .rc-score small { font: 500 11px var(--mono); color: var(--muted); }
.home-a .rc-grade { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #FDF1D8; color: #7A5200; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.home-a .rc-top p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.home-a .rc-bots { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 20px 4px; }
.home-a .rc-bot { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--hair); font-size: 12px; font-weight: 600; color: var(--ink); }
.home-a .rc-bot img { width: 14px; height: 14px; }
.home-a .rc-bot svg { width: 13px; height: 13px; fill: none; stroke: var(--pine); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.home-a .rc-rows { list-style: none; margin: 10px 0 0; padding: 0 12px; }
.home-a .rc-row { position: relative; display: grid; grid-template-columns: 150px 1fr 28px; gap: 12px; align-items: center; padding: 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: default; transition: background .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.home-a .rc-row:hover, .home-a .rc-row:focus-visible { background: #F1F7FB; transform: translateX(3px); outline: none; }
.home-a .rc-row > i { position: relative; height: 8px; border-radius: 4px; background: #F0EEE8; }
.home-a .rc-row > i > b { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--c); transform-origin: left; }
.home-a .rc-row em { font-style: normal; font-size: 13px; text-align: right; color: var(--ink); }
.home-a .rc-row::after { content: attr(data-tip); display: none; position: absolute; right: 0; bottom: calc(100% + 6px); width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 8px; background: var(--navy); color: #fff; font: 500 13px/1.4 var(--text); box-shadow: 0 12px 28px rgba(22, 35, 63, .3); pointer-events: none; z-index: 5; }
.home-a .rc-row:hover::after, .home-a .rc-row:focus-visible::after { display: block; animation: tip .16s ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .home-a .rc-row > i > b { animation: rc-fill 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 120ms + 400ms); }
  .home-a .rc-score { animation: rc-ring 1.4s cubic-bezier(.2,.8,.2,1) both .2s; }
  .home-a .rc:hover .rc-row > i > b { animation: rc-fill .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
  .home-a .rc:hover .rc-row:hover > i > b { filter: brightness(1.1); }
  @keyframes rc-fill { from { transform: scaleX(0); } }
  @property --s { syntax: '<number>'; inherits: true; initial-value: 0; }
  @keyframes rc-ring { from { --s: 0; } }
}
@media (max-width: 1100px) { .home-a .hero-split { grid-template-columns: 1fr; gap: 36px; } .home-a .rc { max-width: 440px; } }
@media (max-width: 480px) { .home-a .rc-row { grid-template-columns: 1fr 70px 26px; } }

/* hero art: D's approval packet and floating chips, smaller (rules copied from kit.css, scoped to .a-art) */
.home-a .a-art { --shadow-2: 0 2px 4px rgba(22, 35, 63, .06), 0 22px 48px rgba(22, 35, 63, .13); --ease: cubic-bezier(.2, .8, .2, 1); position: relative; padding: 18px 0 30px 28px; }
.home-a .a-art .packet { position: relative; max-width: 370px; margin-left: auto; background: #fff; border: 1px solid var(--hair); border-radius: 14px; padding: 16px; box-shadow: var(--shadow-2); color: var(--ink); transition: transform .4s var(--ease), box-shadow .4s; }
.home-a .a-art .packet:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 30px 70px rgba(22, 35, 63, .2); }
.home-a .a-art .pk-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.home-a .a-art .pk-top .tag { font-size: 10px; padding: 5px 7px; transition: background .25s, color .25s; }
.home-a .a-art .tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.home-a .a-art .pk-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.home-a .a-art .pk-img { position: relative; height: 112px; border-radius: 9px; overflow: hidden; background: var(--sky-depth); display: flex; justify-content: flex-end; align-items: flex-end; padding: 0 18px; }
.home-a .a-art .pk-img svg { height: 82%; width: auto; }
.home-a .a-art .packet h3 { font-size: 17px; line-height: 1.25; margin: 14px 0 10px; letter-spacing: -.015em; }
.home-a .a-art .pk-lines i { display: block; height: 6px; border-radius: 3px; background: var(--raised); margin: 6px 0; }
.home-a .a-art .pk-lines i.s { width: 58%; }
.home-a .a-art .pk-checks { list-style: none; margin: 14px 0; padding: 0 0 12px; border-bottom: 1px solid var(--hair); display: grid; gap: 7px; font-size: 13px; }
.home-a .a-art .pk-checks li { display: flex; align-items: center; gap: 8px; }
.home-a .a-art .pk-checks li::before { content: ''; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 9px; }
.home-a .a-art .pk-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.home-a .a-art .pk-foot b { color: var(--ink); }
.home-a .a-art .pk-btns { display: flex; gap: 6px; }
.home-a .a-art .btn-sm { font: 600 12.5px/1 var(--text); padding: 8px 11px; border-radius: 7px; border: 1.5px solid var(--hair); background: #fff; color: var(--ink); cursor: pointer; transition: transform .15s, background .15s, border-color .15s; }
.home-a .a-art .btn-sm:hover { transform: translateY(-1px); border-color: var(--ctl); }
.home-a .a-art .btn-sm.pine { background: var(--pine); border-color: var(--pine); color: #fff; }
.home-a .a-art .btn-sm.pine:hover { background: #18604F; }
.home-a .a-art .packet.approved .btn-sm.pine { background: #fff; color: var(--pine); }
.home-a .a-art .pk-toast { position: absolute; left: 50%; top: -16px; translate: -50% 0; padding: 7px 12px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .25s, translate .25s; pointer-events: none; }
.home-a .a-art .packet.approved .pk-toast, .home-a .a-art .packet.changes .pk-toast { opacity: 1; translate: -50% -6px; }
.home-a .a-art .kb path { transform-box: fill-box; transform-origin: 50% 100%; transition: translate .4s var(--ease), filter .2s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home-a .a-art .kb:hover path { translate: 0 -6%; transition-delay: calc(var(--i, 0) * 45ms), 0s; }
  .home-a .a-art .kb path:hover { filter: brightness(1.18) saturate(1.1); }
}
.home-a .a-art .wave-again path { animation: grow .9s var(--ease) both !important; animation-delay: calc(var(--i, 0) * 70ms) !important; }
.home-a .a-art .chip-float { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-2); font-size: 12.5px; color: var(--ink); white-space: nowrap; z-index: 2; }
.home-a .a-art .chip-float b { font-family: var(--display); font-size: 17px; letter-spacing: -.02em; }
.home-a .a-art .chip-float .up { color: var(--pine); font-weight: 700; margin-left: 0; }
.home-a .a-art .b1 { left: -6px; top: 92px; flex-direction: column; align-items: flex-start; gap: 1px; }
.home-a .a-art .b2 { right: -18px; bottom: 2px; }
.home-a .a-art .b2 svg { width: 28px; height: 20px; }
@media (prefers-reduced-motion: no-preference) { .home-a .a-art .chip-float { animation: a-bob 6s ease-in-out infinite; } .home-a .a-art .chip-float.b2 { animation-delay: -3s; } @keyframes a-bob { 50% { translate: 0 -8px; } } }
@media (max-width: 1100px) { .home-a .a-art { max-width: 420px; padding-left: 0; } .home-a .a-art .packet { margin-left: 0; } .home-a .a-art .b1 { left: auto; right: -12px; top: 70px; } .home-a .a-art .b2 { right: auto; left: 12px; bottom: 0; } }
@media (max-width: 520px) { .home-a .a-art .pk-meta, .home-a .a-art .b1 { display: none; } .home-a .a-art .b2 { left: auto; right: 8px; } }

/* 'See everything' block, from concept B */
.home-a .proof { padding: 112px 0; background: var(--paper); color: var(--ink); }
.home-a .proof .eyebrow { color: var(--muted); }
.home-a .proof-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-a .proof .head { grid-column: 1 / -1; margin-bottom: 24px; }
.home-a .proof .head h2 { margin: 14px 0 6px; }
.home-a .metric { position: relative; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--hair); border-radius: 16px; padding: 24px; overflow: hidden; }
.home-a .metric::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, var(--g) 0%, transparent 70%); opacity: .35; }
.home-a .m1 { --g: #0E95D2; } .home-a .m2 { --g: #FF7A2F; } .home-a .m3 { --g: #4FB394; } .home-a .m4 { --g: #F2B33D; }
.home-a .metric > * { position: relative; }
.home-a .metric span { color: var(--muted); font-size: 15px; }
.home-a .metric b { font: 700 52px/1 var(--display); letter-spacing: -.04em; }
.home-a .metric small { color: var(--muted); font-size: 14px; }
.home-a .metric em { font-style: normal; font-weight: 700; color: var(--pine); margin-right: 8px; }
@media (max-width: 960px) { .home-a .proof-in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .home-a .proof-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .home-a .a-how { padding: 24px 12px; }
  .home-a .a-how .flow-stage { padding: 20px 12px; }
  .home-a .a-how .flow-tabs { gap: 8px; }
  .home-a .a-how .flow-tabs button { padding: 10px 8px; gap: 6px; font-size: 13px; }
  .home-a .a-how .flow-tabs .n { flex: none; width: 22px; height: 22px; font-size: 12px; }
  .home-a .a-how .ui { padding: 14px 12px; font-size: 14px; }
  .home-a .a-how .ui-q .tag { display: none; }
}
@media (max-width: 1000px) { .home-a .ind-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-a .ind-row a { aspect-ratio: 4 / 3; } .home-a .ind-row a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .home-a .ind-row { grid-template-columns: 1fr; } .home-a .ind-row a, .home-a .ind-row a:first-child { aspect-ratio: 16 / 10; } }

/* integrations: the platforms approved pages publish to (same copy as the preview's Integrations block) */
.home-a .a-ints { padding: 112px 0; background: #fff; }
.home-a .a-ints-head { max-width: 720px; margin-bottom: 32px; }
.home-a .a-ints-head h2 { margin: 14px 0 16px; }
.home-a .a-ints-head .lede { color: var(--muted); margin: 0; }
.home-a .a-int-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-a .a-int { background: var(--paper); border: 1px solid var(--hair); border-radius: 16px; padding: 24px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.home-a .a-int:hover { transform: translateY(-4px); border-color: var(--sky); box-shadow: 0 14px 30px rgba(22, 35, 63, .08); }
.home-a .a-int-more { background: transparent; border-style: dashed; }
.home-a .a-int-logo { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); color: var(--navy); }
.home-a .a-int-logo img { display: block; width: 34px; height: 34px; }
.home-a .a-int h3 { margin: 16px 0 6px; font-size: 19px; }
.home-a .a-int p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 960px) { .home-a .a-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .home-a .a-ints { padding: 72px 0; }
  .home-a .a-int-grid { grid-template-columns: 1fr; gap: 12px; }
  /* on a phone each card is one row: logo on the left, name and line beside it */
  .home-a .a-int { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 18px; }
  .home-a .a-int-logo { width: 48px; height: 48px; border-radius: 12px; grid-row: span 2; }
  .home-a .a-int-logo img { width: 28px; height: 28px; }
  .home-a .a-int h3 { margin: 2px 0 4px; font-size: 17px; }
}

/* Undo the site's inner-page hero and eyebrow rules (Base.astro) on the homepage, so it matches concept A. */
.home-a .hero { padding-bottom: 0; isolation: auto; }
.home-a .hero::before { content: none; }
.home-a .eyebrow { margin-bottom: 0; }
/* The closing navy band runs straight into the site footer, as in concept A. */
body[data-home] .site-footer { margin-top: 0; }
/* The approval note sat navy on the navy hero. It takes the colour of the new state (green when approved,
   orange when changes are asked for) with a white rim, so it reads against the hero and the card. */
.home-a .a-art .pk-toast { border: 2px solid #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.home-a .a-art .packet.approved .pk-toast { background: var(--pine); color: #fff; }
.home-a .a-art .packet.changes .pk-toast { background: var(--tang); color: var(--ink); }
/* "Who AI names" rows: the before and after labels stay on one line and line up from row to row,
   even with a larger phone text size (the ChatGPT row wrapped both onto two lines). */
.home-a .ui-ai { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.home-a .ui-ai > span:not(.named) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-a .ui-ai s { white-space: nowrap; min-width: 5.4em; }
.home-a .ui-ai .named { white-space: nowrap; min-width: 6.8em; text-align: center; }
/* Phones: the "before" answer moves under the assistant's name, so the name and the after pill keep
   their room at any text size. */
@media (max-width: 520px) {
  .home-a .ui-ai { grid-template-columns: 18px minmax(0, 1fr) auto; row-gap: 2px; }
  .home-a .ui-ai img { grid-row: 1 / span 2; }
  .home-a .ui-ai s { grid-row: 2; grid-column: 2; min-width: 0; font-size: 12px; white-space: normal; }
  .home-a .ui-ai s::before { content: 'Before: '; }
  .home-a .ui-ai .named { grid-row: 1 / span 2; grid-column: 3; min-width: 0; padding: 4px 10px; }
}

/* hero headline: an assistant logo on a white rounded square before each name (Jay 11-13). The square is exactly as tall as the
   capital letters and stands on the text baseline: an inline-block with nothing in flow takes its bottom edge as its baseline
   (an inline-grid took the image's, which dropped the badge below the line). Logo and name never split across lines. */
.home-a .hero h1 .ai-n { white-space: nowrap; }
.home-a .hero h1 .ai-c { display: inline-block; position: relative; width: .71em; height: .71em; width: 1cap; height: 1cap; margin-right: .17em; vertical-align: baseline; border-radius: 24%; background: var(--paper); /* #F7F6F2, the warm off-white of the "See everything" block (Jay 11-13 named that block; not white, not the cool raised #EEF1F5) */ }
.home-a .hero h1 .ai-c img { position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; display: block; }
/* phones: the desktop section paddings (112px each side) left over 200px of nothing between blocks (Jay 11-13 "excessive space") */
@media (max-width: 640px) {
  .home-a .proof, .home-a .answer, .home-a .a-ints { padding: 60px 0; }
  .home-a .statement { padding: 60px 0 56px; }
  .home-a .inds { padding: 60px 0 32px; }
  .home-a .cta { --cta-pb: 80px; padding-top: 64px; }
}
/* TRIAL (Jay 11-13): centred hero. Headline and analyze bar in the middle, the approval-packet graphic hidden, the bars taller
   and closer to the bar. To go back to the split hero, remove "hero-c" from the hero section in src/home/concept-a.html. */
.home-a .hero-c .a-art { display: none; }
.home-a .hero-c .hero-split { grid-template-columns: minmax(0, 1fr); text-align: center; }
.home-a .hero-c .hero-copy { max-width: 940px; margin-inline: auto; }
.home-a .hero-c .eyebrow { justify-content: center; }
.home-a .hero-c h1 { margin-inline: auto; }
.home-a .hero-c .air-left .air-hero, .home-a .hero-c .air-left .air-hero > div:not(.air-start) { margin-inline: auto; }
.home-a .hero-c .tail { height: 340px; margin-top: -24px; }
@media (max-width: 760px) { .home-a .hero-c .tail { height: 230px; margin-top: 0; } }